/* =========================================
   みんなのジャム - メインスタイル
   温かみのあるコーラルピンク/オレンジ/パープル配色
   ========================================= */

/* ===== スタート画面 ===== */
#modal-start {
  background: linear-gradient(135deg, rgba(255, 154, 118, 0.55), rgba(231, 111, 157, 0.55), rgba(155, 126, 189, 0.55));
  backdrop-filter: blur(8px);
}

/* ===== 共同編集 アバター ===== */
#user-avatars { align-items: center; }
.avatar-chip {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  user-select: none;
}
.avatar-chip.avatar-more {
  background: #e5e7eb !important;
  color: #555;
}
#sync-indicator { transition: background-color .2s, color .2s; }
#sync-dot { transition: background-color .2s; }

* {
  font-family: 'M PLUS Rounded 1c', 'Kosugi Maru', system-ui, -apple-system, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #fffaf5;
  color: #3a3a3a;
}

/* ===== ロゴバッジ ===== */
.logo-badge {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff9a8b 0%, #ffb88c 50%, #c6a4ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(255, 154, 139, 0.35);
}

/* ===== ヘッダーボタン ===== */
.header-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-size: 14px;
}
.header-btn:hover {
  background: #fff1e6;
  color: #ff7e5f;
}
.header-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.header-btn-primary {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff9a8b, #ffb88c);
  color: white;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.15s;
  box-shadow: 0 3px 8px rgba(255, 154, 139, 0.3);
}
.header-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(255, 154, 139, 0.45);
}

.header-btn-share {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #c6a4ff, #ffb6e0);
  color: white;
  font-weight: 700;
  font-size: 12px;
  transition: all 0.15s;
  box-shadow: 0 3px 8px rgba(198, 164, 255, 0.3);
  display: flex;
  align-items: center;
}
.header-btn-share:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(198, 164, 255, 0.45);
}

/* ===== 先生モード／生徒モード切替ボタン ===== */
.header-btn-mode {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #b8e0c8, #a8d4ff);
  color: #2c5a4a;
  font-weight: 700;
  font-size: 12px;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(168, 212, 255, 0.3);
  display: flex;
  align-items: center;
}
.header-btn-mode:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(168, 212, 255, 0.45);
}
.header-btn-mode.teacher-on {
  background: linear-gradient(135deg, #ff9a8b, #ffb88c);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 154, 139, 0.4);
}

/* 先生モード時、ロック対象オブジェクトに薄い印 */
body.teacher-mode #app-header {
  border-bottom-color: #ffd1c2;
  box-shadow: 0 2px 8px rgba(255, 154, 139, 0.15);
}
body.teacher-mode::before {
  content: '👩‍🏫 先生モード';
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff9a8b, #ffb88c);
  color: white;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  z-index: 25;
  box-shadow: 0 2px 8px rgba(255, 154, 139, 0.4);
  pointer-events: none;
}

/* 生徒モード時、teacher-only項目を非表示 */
body:not(.teacher-mode) .ctx-item.teacher-only {
  display: none;
}

/* ===== タイマーパネル ===== */
.timer-panel {
  position: fixed;
  top: 80px;
  right: 24px;
  width: 280px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(255, 154, 139, 0.25), 0 4px 12px rgba(0,0,0,0.06);
  border: 2px solid #ffe0d6;
  padding: 14px;
  z-index: 40;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  user-select: none;
}
.timer-panel.hidden { display: none; }
.timer-header {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid #ffefe6;
  cursor: move;
}
.timer-display {
  font-size: 56px;
  font-weight: 800;
  text-align: center;
  color: #2c3e50;
  font-family: 'Kosugi Maru', monospace;
  letter-spacing: 2px;
  padding: 6px 0;
  transition: color 0.2s;
}
.timer-display.warn  { color: #f39c12; }
.timer-display.danger {
  color: #e74c3c;
  animation: timer-pulse 1s ease-in-out infinite;
}
.timer-display.finished {
  color: #e74c3c;
  animation: timer-flash 0.4s ease-in-out infinite;
}
@keyframes timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes timer-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.timer-progress-wrap {
  height: 6px;
  background: #ffefe6;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.timer-progress {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff9a8b, #ffb88c, #ffd88c);
  border-radius: 999px;
  transition: width 0.2s linear;
}
.timer-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.timer-preset {
  padding: 6px 0;
  background: #fff7ed;
  color: #d4622e;
  border: 1px solid #ffe0d6;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.15s;
}
.timer-preset:hover {
  background: #ffd88c;
  border-color: #ffb88c;
}
.timer-edit {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  justify-content: center;
}
.timer-input {
  width: 48px;
  padding: 4px 6px;
  border: 1px solid #ffd1c2;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  font-weight: 600;
}
.timer-input:focus { outline: none; border-color: #ff9a8b; }
.timer-mini-btn {
  margin-left: 6px;
  padding: 4px 10px;
  background: #ffd1c2;
  color: #b45339;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.timer-mini-btn:hover { background: #ffb88c; }
.timer-actions {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 6px;
}
.timer-btn {
  padding: 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.15s;
  color: white;
}
.timer-btn-start  { background: linear-gradient(135deg, #69d49d, #4cb588); }
.timer-btn-start:hover  { box-shadow: 0 4px 12px rgba(76, 181, 136, 0.35); }
.timer-btn-pause  { background: linear-gradient(135deg, #ffb88c, #ff9a8b); }
.timer-btn-pause:hover  { box-shadow: 0 4px 12px rgba(255, 154, 139, 0.35); }
.timer-btn-reset {
  background: #fff;
  color: #888;
  border: 1.5px solid #e8e0d8;
}
.timer-btn-reset:hover {
  background: #f5f0eb;
  color: #555;
}

/* タイマー終了時の画面フラッシュ */
.timer-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(255,154,139,0.4), rgba(255,184,140,0.1));
  pointer-events: none;
  z-index: 9999;
  animation: timer-screen-flash 1.6s ease-out forwards;
}
@keyframes timer-screen-flash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Phase3: コメント機能 ===== */
.comment-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
}
.comment-pin {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 4px;
  transform: translate(-2px, -32px) rotate(-45deg);
  border: 2px solid white;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 12px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  transition: transform 0.15s, box-shadow 0.15s;
}
.comment-pin:hover {
  transform: translate(-2px, -34px) rotate(-45deg) scale(1.1);
  box-shadow: 0 5px 14px rgba(0,0,0,0.3);
  z-index: 20;
}
.comment-pin > span,
.comment-pin > i {
  transform: rotate(45deg);
  display: inline-block;
}
.comment-pin.resolved {
  opacity: 0.55;
  background: #b0bec5 !important;
}

/* コメントモード時の見た目 */
body.comment-mode #canvas-wrapper {
  cursor: cell;
}
body.comment-mode #canvas-wrapper::after {
  content: '💬 ボード上をクリックでコメントを追加';
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #c6a4ff, #ffb6e0);
  color: white;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  z-index: 25;
  box-shadow: 0 2px 8px rgba(198,164,255,0.4);
  pointer-events: none;
}
.header-btn.active {
  background: linear-gradient(135deg, #c6a4ff, #ffb6e0);
  color: white;
}

/* コメント詳細モーダル：返信表示 */
.comment-reply {
  background: #f7f5ff;
  border-radius: 8px;
  padding: 8px 10px;
}
.reply-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
}
.reply-color {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.reply-date { color: #aaa; margin-left: auto; font-size: 10px; }
.reply-text {
  font-size: 13px;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ===== Phase3: 変更履歴パネル ===== */
.history-panel {
  position: fixed;
  top: 64px;
  right: 12px;
  width: 320px;
  max-height: calc(100vh - 80px);
  background: white;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  border: 2px solid #ffe0d6;
  z-index: 35;
  display: flex;
  flex-direction: column;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
.history-panel.hidden { display: none; }
.history-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #ffefe6;
}
.history-tip {
  padding: 8px 14px;
  font-size: 11px;
  color: #888;
  background: #fff7ed;
  border-bottom: 1px solid #ffefe6;
}
.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.history-row {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: #fafafa;
  transition: background 0.15s;
  border: 1px solid transparent;
}
.history-row:hover { background: #fff7ed; border-color: #ffe0d6; }
.history-row.current {
  background: linear-gradient(135deg, #fff5e6, #ffe9d6);
  border-color: #ff9a8b;
}
.history-thumb {
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.history-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.history-label {
  font-size: 12px;
  font-weight: 700;
  color: #444;
  display: flex;
  align-items: center;
  gap: 6px;
}
.badge-now {
  background: #ff9a8b;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
}
.history-detail {
  font-size: 10px;
  color: #888;
}
.history-jump {
  margin-top: 2px;
  align-self: flex-start;
  padding: 4px 8px;
  background: white;
  color: #d4622e;
  border: 1px solid #ffd1c2;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.history-jump:hover {
  background: #ff9a8b;
  color: white;
  border-color: #ff9a8b;
}

/* ===== 参加者リスト ===== */
.peer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: #444;
  transition: background 0.1s;
}
.peer-item:hover { background: #fff5ec; }
.peer-item.peer-me { background: #fff1e6; }
.peer-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}
.peer-name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peer-tag {
  font-size: 10px;
  background: #ff9a8b;
  color: white;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.peer-edit-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: transparent;
  color: #888;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.peer-edit-btn:hover {
  background: #fff1e6;
  color: #ff7e5f;
}

/* ===== プロフィールカラーピッカー ===== */
.profile-color {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
}
.profile-color:hover { transform: scale(1.1); }
.profile-color.selected {
  border-color: #3a3a3a;
  transform: scale(1.1);
  box-shadow: 0 0 0 2px white inset;
}

/* ===== ツールボタン（左） ===== */
.tool-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: transparent;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.15s;
  position: relative;
}
.tool-btn:hover {
  background: #fff1e6;
  color: #ff7e5f;
  transform: scale(1.05);
}
.tool-btn.active {
  background: linear-gradient(135deg, #ff9a8b, #ffb88c);
  color: white;
  box-shadow: 0 4px 10px rgba(255, 154, 139, 0.4);
}
.tool-btn.active::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #ffb88c;
}

/* ===== ズームボタン ===== */
.zoom-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 11px;
  transition: all 0.15s;
}
.zoom-btn:hover {
  background: #fff1e6;
  color: #ff7e5f;
}

/* ===== ツールオプション（上部バー） ===== */
#tool-options .opt-color {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px #ddd;
  cursor: pointer;
  transition: all 0.15s;
}
#tool-options .opt-color:hover {
  transform: scale(1.15);
}
#tool-options .opt-color.active {
  box-shadow: 0 0 0 2px #ff7e5f, 0 2px 6px rgba(0,0,0,0.15);
  transform: scale(1.1);
}

#tool-options .opt-size {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  color: #555;
}
#tool-options .opt-size:hover {
  background: #fff1e6;
}
#tool-options .opt-size.active {
  background: linear-gradient(135deg, #ff9a8b, #ffb88c);
  color: white;
}
#tool-options .opt-size .dot {
  background: currentColor;
  border-radius: 50%;
}

#tool-options .opt-divider {
  width: 1px;
  height: 22px;
  background: #ffe0cc;
  margin: 0 3px;
}

#tool-options .opt-shape {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  color: #555;
  font-size: 14px;
}
#tool-options .opt-shape:hover {
  background: #fff1e6;
  color: #ff7e5f;
}
#tool-options .opt-shape.active {
  background: linear-gradient(135deg, #ff9a8b, #ffb88c);
  color: white;
}

/* ===== ページサムネイル ===== */
.page-thumb {
  position: relative;
  border-radius: 10px;
  border: 2px solid transparent;
  background: white;
  cursor: pointer;
  transition: all 0.15s;
  overflow: hidden;
  padding: 8px;
}
.page-thumb:hover {
  border-color: #ffcaa8;
  transform: translateY(-1px);
}
.page-thumb.active {
  border-color: #ff7e5f;
  box-shadow: 0 4px 12px rgba(255, 126, 95, 0.25);
}
.page-thumb .thumb-canvas {
  width: 100%;
  aspect-ratio: 16/10;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #f0e0d0;
  overflow: hidden;
}
.page-thumb .thumb-canvas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.page-thumb .thumb-num {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(255,255,255,0.9);
  color: #666;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
}
.page-thumb .thumb-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  gap: 2px;
}
.page-thumb:hover .thumb-actions {
  display: flex;
}
.page-thumb .thumb-action {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 10px;
}
.page-thumb .thumb-action:hover {
  background: #ff7e5f;
  color: white;
}

/* ===== モーダル ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 50, 0.4);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.15s ease-out;
}
.modal-panel {
  background: white;
  border-radius: 20px;
  padding: 24px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: scaleIn 0.2s ease-out;
}
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  transition: all 0.15s;
}
.modal-close:hover {
  background: #fff1e6;
  color: #ff7e5f;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== エクスポートカード ===== */
.export-card {
  padding: 20px 12px;
  border-radius: 14px;
  background: #fff9f3;
  border: 2px solid #ffe8d6;
  text-align: center;
  transition: all 0.15s;
  cursor: pointer;
}
.export-card:hover {
  background: white;
  border-color: #ff9a8b;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 154, 139, 0.2);
}

/* ===== ヘルプセクション ===== */
.help-section {
  padding: 12px;
  background: #fff9f3;
  border-radius: 12px;
  border-left: 3px solid #ffb88c;
}
.help-section h4 {
  font-weight: 700;
  color: #555;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.help-section p {
  color: #777;
  font-size: 13px;
  line-height: 1.6;
}
.help-section ul {
  color: #777;
  line-height: 1.7;
}
.help-section code {
  background: #fff1e6;
  color: #d35400;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

/* ===== ヘルプタブ（v1.5.0）===== */
#help-tabs {
  /* モバイルでも横スクロールで全タブにアクセス可能 */
  -webkit-overflow-scrolling: touch;
}
#help-tabs::-webkit-scrollbar {
  height: 4px;
}
.help-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 10px 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #999;
  background: transparent;
  border: 2px solid transparent;
  border-bottom: none;
  transition: all 0.15s;
  white-space: nowrap;
  cursor: pointer;
}
.help-tab:hover {
  color: #ff7e5f;
  background: #fff5ec;
}
.help-tab.active {
  color: #ff7e5f;
  background: #fff9f3;
  border-color: #ffe8d6;
  border-bottom: 2px solid #fff9f3;
  margin-bottom: -2px;
}

.help-tab-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: helpTabFadeIn 0.2s;
}
.help-tab-content.hidden {
  display: none;
}
@keyframes helpTabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* GIGA大UIモード時はヘルプタブとセクション文字も少し大きく */
body.giga-big-ui .help-tab { font-size: 13px; padding: 10px 16px; }
body.giga-big-ui .help-section p,
body.giga-big-ui .help-section ul { font-size: 14px; }
body.giga-big-ui .help-section h4 { font-size: 15px; }
.kbd {
  display: inline-block;
  padding: 1px 6px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
  box-shadow: 0 1px 0 #ccc;
  margin: 0 2px;
}

/* ===== コンテキストメニュー ===== */
.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 14px;
  text-align: left;
  transition: all 0.1s;
  color: #555;
  font-size: 13px;
}
.ctx-item:hover {
  background: #fff1e6;
  color: #ff7e5f;
}

/* ===== キャンバスのカーソル ===== */
#canvas-container.cursor-crosshair { cursor: crosshair; }
#canvas-container.cursor-grab { cursor: grab; }
#canvas-container.cursor-text { cursor: text; }
#canvas-container.cursor-cell { cursor: cell; }
#canvas-container.cursor-none { cursor: none; }

/* ===== 付箋のテキストエディタ ===== */
/* [B25修正] z-index を高くし、textarea 上での wheel イベントは自然にスクロール */
.floating-editor {
  position: absolute;
  background: transparent;
  border: 2px dashed #ff7e5f;
  border-radius: 8px;
  padding: 6px;
  outline: none;
  resize: none;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: auto;
  overscroll-behavior: contain;
}

/* ===== スクロールバー ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #ffd4b8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffb88c;
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  #pages-panel { width: 110px; }
  #board-title { width: 140px; font-size: 12px; }
}

/* =========================================
   Phase 4-1: GIGAスクール端末最適化
   ========================================= */

/* タッチ端末ではボタンを少し大きく + タップハイライトを薄く */
body.giga-touch-device .header-btn,
body.giga-touch-device .tool-btn {
  min-width: 40px;
  min-height: 40px;
  -webkit-tap-highlight-color: rgba(255, 154, 139, 0.2);
}

/* ===== UI拡大モード（先生切替）===== */
body.giga-big-ui .header-btn {
  min-width: 48px;
  min-height: 48px;
  font-size: 16px;
  padding: 0 14px;
}
body.giga-big-ui .header-btn-primary,
body.giga-big-ui .header-btn-share {
  min-height: 48px;
  font-size: 14px;
  padding: 0 18px;
}
body.giga-big-ui .tool-btn {
  width: 56px;
  height: 56px;
  font-size: 22px;
}
body.giga-big-ui #toolbar {
  width: 76px;
  padding: 12px 8px;
}
body.giga-big-ui #board-title {
  font-size: 16px;
  height: 44px;
  padding: 0 12px;
}
body.giga-big-ui .tool-options-panel button {
  min-width: 36px;
  min-height: 36px;
}
body.giga-big-ui #app-header {
  height: 64px;
}
body.giga-big-ui #pages-panel {
  width: 160px;
}
body.giga-big-ui .page-thumb {
  width: 140px;
  height: 90px;
}
body.giga-big-ui .ctx-item {
  padding: 12px 18px;
  font-size: 15px;
}
body.giga-big-ui #zoom-controls button {
  width: 44px;
  height: 44px;
}

/* GIGAボタンのアクティブ状態 */
#btn-giga-bigui.active,
#btn-giga-palm.active {
  background: linear-gradient(135deg, #ff9a8b, #ffb88c);
  color: white;
}

/* タッチデバイスでスクロールバウンス抑制 */
body.giga-touch-device #canvas-container {
  touch-action: none;
  overscroll-behavior: contain;
}

/* Chromebook向けに描画レイテンシを下げる */
body.giga-chromebook canvas {
  will-change: transform;
}

/* ペン入力中の手のひら誤接触ヒント */
.giga-palm-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 12px;
  z-index: 9999;
  pointer-events: none;
  animation: fadeIn 0.2s;
}

/* =========================================
   Phase 4-2: ボード整理機能
   ========================================= */
.board-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 2px solid #ffe8d6;
  border-radius: 12px;
  background: #fff9f3;
  cursor: pointer;
  transition: all 0.15s;
}
.board-card:hover {
  border-color: #ff9a8b;
  background: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 154, 139, 0.15);
}
.board-card .board-thumb-wrap {
  width: 60px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 6px;
  background: white;
  border: 1px solid #eee;
  overflow: hidden;
}
.board-card .board-info {
  flex: 1;
  min-width: 0;
}
.board-card .board-title {
  font-weight: 700;
  color: #444;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-card .board-meta {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}
.board-card .board-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.board-tag {
  display: inline-block;
  padding: 1px 8px;
  font-size: 10px;
  border-radius: 10px;
  background: #ffe8d6;
  color: #ff7e5f;
  font-weight: 600;
}
.board-tag.subject-japanese { background: #ffe0e0; color: #d63031; }
.board-tag.subject-math { background: #d6ecff; color: #0984e3; }
.board-tag.subject-science { background: #d6f5e0; color: #00875a; }
.board-tag.subject-society { background: #fff3d6; color: #c08800; }
.board-tag.subject-english { background: #e0d6ff; color: #6c5ce7; }
.board-tag.subject-music { background: #ffd6f0; color: #d63384; }
.board-tag.subject-art { background: #d6f5f5; color: #00858f; }
.board-tag.subject-pe { background: #ffd6c2; color: #d35400; }
.board-tag.subject-other { background: #eee; color: #666; }

.board-folder-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fff1e6;
  border: 1px solid #ffd4b8;
  border-radius: 8px;
  font-size: 11px;
  color: #ff7e5f;
  font-weight: 600;
}

.board-actions {
  display: flex;
  gap: 4px;
}
.board-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #888;
  transition: all 0.15s;
  font-size: 12px;
}
.board-action-btn:hover {
  background: #fff1e6;
  color: #ff7e5f;
}
.board-action-btn.danger:hover {
  background: #ffe0e0;
  color: #d63031;
}

.board-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  align-items: center;
}
.board-filter-bar input,
.board-filter-bar select {
  padding: 6px 10px;
  border: 2px solid #ffe8d6;
  border-radius: 8px;
  font-size: 13px;
  background: white;
  outline: none;
  transition: border-color 0.15s;
}
.board-filter-bar input:focus,
.board-filter-bar select:focus {
  border-color: #ff9a8b;
}
.board-filter-bar input { flex: 1; min-width: 140px; }

/* =========================================
   Phase 4-3: 先生用ダッシュボード
   ========================================= */
#modal-dashboard .modal-panel {
  max-width: 920px;
  width: 92%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.dashboard-stat-card {
  background: linear-gradient(135deg, #fff5ec 0%, #fff9f3 100%);
  border: 2px solid #ffe8d6;
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
}
.dashboard-stat-card .stat-num {
  font-size: 28px;
  font-weight: 800;
  color: #ff7e5f;
  line-height: 1;
}
.dashboard-stat-card .stat-label {
  font-size: 11px;
  color: #888;
  margin-top: 6px;
}
.dashboard-board-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
}
.dashboard-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid #ffe8d6;
  margin-top: 12px;
}
.dashboard-action-btn {
  padding: 8px 14px;
  background: #fff5ec;
  border: 2px solid #ffe8d6;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #ff7e5f;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.dashboard-action-btn:hover {
  background: white;
  border-color: #ff9a8b;
  transform: translateY(-1px);
}
.dashboard-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #ff7e5f;
  cursor: pointer;
}

@media (max-width: 768px) {
  .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   Phase 6: PWA関連スタイル
   ========================================= */

/* ===== オフラインバッジ（ヘッダー） ===== */
#offline-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #fde68a;
  animation: offlineBadgePulse 2.4s ease-in-out infinite;
}
#offline-badge i {
  font-size: 11px;
}
@keyframes offlineBadgePulse {
  0%, 100% { background: #fef3c7; }
  50%      { background: #fde68a; }
}

/* オフライン中の保存トースト強調 */
body.is-offline #toast-container .toast-info {
  border-left: 4px solid #fbbf24;
}

/* ===== PWA: 新バージョン通知バナー ===== */
#pwa-update-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff9a8b, #ffb88c);
  color: white;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(255, 154, 139, 0.4);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 13px;
  max-width: calc(100vw - 32px);
  animation: pwaUpdateSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pwaUpdateSlideIn {
  from { transform: translate(-50%, 100px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
.pwa-update-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.95);
  color: #ff7e5f;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.1s;
}
.pwa-update-btn:hover {
  transform: scale(1.04);
}
.pwa-update-btn-secondary {
  background: rgba(255,255,255,0.2);
  color: white;
}
.pwa-update-btn-secondary:hover {
  background: rgba(255,255,255,0.3);
}

/* ===== PWA: インストール案内モーダル ===== */
#pwa-install-modal {
  animation: pwaModalFadeIn 0.2s ease-out;
}
@keyframes pwaModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#pwa-install-modal > div:last-child {
  animation: pwaModalPopIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pwaModalPopIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ===== iOS スタンドアロン: セーフエリア対応 ===== */
@media (display-mode: standalone) {
  #app-header {
    padding-top: env(safe-area-inset-top, 0);
    height: calc(56px + env(safe-area-inset-top, 0));
  }
  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* スタンドアロンで起動した時は「インストール」ボタンを隠す */
  #btn-pwa-install,
  #btn-pwa-install-mobile {
    display: none !important;
  }
}

/* スマホでバナーがツールバーと被らないように */
@media (max-width: 767px) {
  #pwa-update-banner {
    bottom: 12px;
    padding: 10px 14px;
    font-size: 12px;
    gap: 8px;
  }
  .pwa-update-btn {
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* =========================================
   Phase 5: モバイル / タブレット対応
   ========================================= */

/* ===== ヘッダー横スクロール完全防止 ===== */
#app-header {
  overflow: hidden;
  flex-wrap: nowrap;
}
#app-header > div {
  min-width: 0; /* flex子要素の縮小を許可 */
}

/* ボード名入力の最小幅を確保（スマホで18pxまで縮まないように） */
#board-title {
  min-width: 70px !important;
  flex-shrink: 1;
  flex-basis: auto;
}

/* ===== モバイルドロワー：位置を CSS で明示的に保証 ===== */
/* Tailwind の right-0 / inset-0 が iframe や一部環境で効かない場合の保険 */
#mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 40;
}
#mobile-drawer-backdrop {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}
#mobile-drawer-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 288px;
  max-width: 85vw;
  background: white;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}
#mobile-pages-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 40;
}
#mobile-pages-backdrop {
  position: absolute !important;
  inset: 0 !important;
}

/* ===== モバイルメニュー項目 ===== */
.mobile-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: transparent;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: background 0.12s, transform 0.08s;
  -webkit-tap-highlight-color: rgba(255, 154, 139, 0.18);
}
.mobile-menu-item:hover,
.mobile-menu-item:focus-visible {
  background: #fff1e6;
  color: #ff7e5f;
  outline: none;
}
.mobile-menu-item:active {
  background: #ffe2d2;
  transform: scale(0.98);
}
.mobile-menu-item i {
  width: 22px;
  text-align: center;
  font-size: 16px;
  flex-shrink: 0;
}
.mobile-menu-item.danger {
  color: #c0392b;
}
.mobile-menu-item.danger i {
  color: #e74c3c !important;
}

/* ===== モバイルドロワー ===== */
#mobile-drawer {
  /* hidden は Tailwind が制御 */
}
#mobile-drawer-backdrop {
  animation: mobileFadeIn 0.18s ease-out;
}
#mobile-drawer-panel {
  animation: mobileSlideInRight 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  /* iOS Safari セーフエリア対応 */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@keyframes mobileSlideInRight {
  from { transform: translateX(100%); opacity: 0.6; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes mobileFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#mobile-drawer.closing #mobile-drawer-panel {
  animation: mobileSlideOutRight 0.18s ease-in forwards;
}
#mobile-drawer.closing #mobile-drawer-backdrop {
  animation: mobileFadeOut 0.18s ease-in forwards;
}
@keyframes mobileSlideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
@keyframes mobileFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* モバイル接続状態インジケータ */
#mobile-sync-status {
  display: flex;
  align-items: center;
}
#mobile-sync-status.is-online {
  background: #e8f7ee;
  color: #1b7a3e;
}
#mobile-sync-status.is-online #mobile-sync-dot {
  background: #2ecc71;
  animation: pulseDot 1.6s ease-in-out infinite;
}
#mobile-sync-status.is-offline {
  background: #f3f4f6;
  color: #555;
}
#mobile-sync-status.is-offline #mobile-sync-dot {
  background: #9ca3af;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(46, 204, 113, 0); }
}

/* ===== モバイルページボトムシート ===== */
#mobile-pages-sheet > div:not(#mobile-pages-backdrop) {
  animation: mobileSlideUp 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
#mobile-pages-backdrop {
  animation: mobileFadeIn 0.2s ease-out;
}
@keyframes mobileSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
#mobile-pages-sheet.closing > div:not(#mobile-pages-backdrop) {
  animation: mobileSlideDown 0.2s ease-in forwards;
}
#mobile-pages-sheet.closing #mobile-pages-backdrop {
  animation: mobileFadeOut 0.2s ease-in forwards;
}
@keyframes mobileSlideDown {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* モバイルページ一覧の各サムネイル */
#mobile-pages-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mobile-page-card {
  position: relative;
  border: 2px solid #ffe0d6;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ff7e5f;
  font-size: 13px;
  transition: all 0.15s;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 154, 139, 0.2);
}
.mobile-page-card:active {
  transform: scale(0.97);
}
.mobile-page-card.active {
  border-color: #ff7e5f;
  background: linear-gradient(135deg, #fff5ec, #ffe9dc);
  box-shadow: 0 4px 12px rgba(255, 126, 95, 0.25);
}
.mobile-page-card .page-num {
  font-size: 18px;
  font-weight: 800;
}
.mobile-page-card .page-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #c0392b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border: 1px solid #ffd1c2;
}

/* =========================================
   レスポンシブ：タブレット (≤1024px)
   ========================================= */
@media (max-width: 1024px) {
  /* ページパネルを少し細く */
  #pages-panel {
    width: 130px;
  }
  /* タイマーパネルの位置調整 */
  .timer-panel {
    width: 260px;
    right: 12px;
  }
}

/* =========================================
   レスポンシブ：タブレット縦 / スマホ (≤1023px)
   ※ lg(1024px)未満はハンバーガーメニュー方式
   ※ ただし右ページパネルは 768px 以上では残す
   ========================================= */
@media (max-width: 1023px) {
  /* ヘッダー: タイトル入力を細く */
  #board-title {
    font-size: 13px;
  }

  /* メインレイアウト */
  #main-layout {
    height: calc(100dvh - 56px) !important;
  }

  /* ツールバーをコンパクト＋横スクロール可能に */
  #toolbar {
    padding: 8px 6px;
    gap: 4px;
  }
  #toolbar .tool-btn {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  #toolbar .tool-btn.active::after {
    display: none; /* 矢印インジケータは非表示 */
  }

  /* ツールオプション（フロート）位置調整 */
  #tool-options {
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 80px);
    padding: 6px 10px !important;
    gap: 6px !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    border-radius: 999px !important;
  }
  #tool-options::-webkit-scrollbar { display: none; }

  /* ズームコントロール */
  #zoom-controls {
    bottom: 12px !important;
    right: 12px !important;
    padding: 2px 4px;
  }
  #zoom-controls .zoom-btn {
    width: 32px;
    height: 32px;
  }
  #zoom-level {
    width: 40px !important;
    font-size: 11px !important;
  }

  /* タイマーパネル */
  .timer-panel {
    width: calc(100vw - 24px);
    right: 12px;
    top: 70px;
    max-width: 320px;
  }

  /* 各種モーダル全画面化 */
  .modal-card,
  .modal-panel,
  .dashboard-modal,
  .organize-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    height: auto !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
  }

  /* 先生モードラベルの位置調整 */
  body.teacher-mode::before {
    top: 56px;
    font-size: 10px;
    padding: 3px 12px;
  }
}

/* =========================================
   レスポンシブ：スマホ専用 (≤767px) - 右ページパネル非表示
   ※ タブレット縦持ち(768〜1023px)では右パネルは表示する
   ========================================= */
@media (max-width: 767px) {
  #pages-panel {
    display: none !important;
  }
  /* スマホでは tool-options をフローティングからボード上端へ */
  #tool-options {
    top: 4px !important;
    padding: 5px 8px !important;
  }
}

/* =========================================
   レスポンシブ：極小スマホ (≤360px) - iPhone SE/5 など
   ========================================= */
@media (max-width: 360px) {
  #app-header {
    padding: 0 4px;
    gap: 1px;
  }
  #app-header > div {
    gap: 2px !important;
  }
  .logo-badge {
    width: 26px;
    height: 26px;
    font-size: 11px;
    border-radius: 8px;
  }
  #board-title {
    min-width: 50px !important;
    font-size: 11px;
    padding: 2px 5px !important;
    margin-left: 2px !important;
  }
  .header-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
    border-radius: 8px;
  }
  .header-btn-primary,
  .header-btn-share {
    height: 28px;
    padding: 0 6px;
    font-size: 10px;
    border-radius: 8px;
  }
  /* 極小では「保存」「招待」のアイコン余白も削減 */
  .header-btn-primary i.fa-download,
  .header-btn-share i.fa-user-plus {
    margin-right: 0 !important;
  }
}

/* =========================================
   レスポンシブ：スマートフォン (≤480px)
   ========================================= */
@media (max-width: 480px) {
  /* ヘッダー高さを少し小さく */
  #app-header {
    height: 52px;
    padding: 0 8px;
  }
  #main-layout {
    height: calc(100dvh - 52px) !important;
  }
  .logo-badge {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  #board-title {
    width: 110px !important;
    min-width: 0;
    font-size: 12px;
    padding: 4px 8px !important;
  }

  /* ヘッダーボタンを小さく */
  .header-btn {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
  .header-btn-primary,
  .header-btn-share {
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  /* ツールバーをさらにコンパクトに */
  #toolbar {
    padding: 6px 4px;
  }
  #toolbar .tool-btn {
    width: 38px;
    height: 38px;
  }

  /* タイマーパネルをよりコンパクトに */
  .timer-panel {
    padding: 10px;
  }
}

/* =========================================
   タッチデバイス: hover効果を抑制
   ========================================= */
@media (hover: none) and (pointer: coarse) {
  .header-btn:hover,
  .tool-btn:hover,
  .mobile-menu-item:hover {
    background: transparent;
    color: inherit;
    transform: none;
  }
  .header-btn-primary:hover,
  .header-btn-share:hover,
  .header-btn-mode:hover {
    transform: none;
  }
}

/* =========================================
   横向き（landscape）スマホ用の特別対応
   ========================================= */
@media (max-height: 480px) and (orientation: landscape) {
  #app-header {
    height: 44px;
  }
  #main-layout {
    height: calc(100dvh - 44px) !important;
  }
  #toolbar .tool-btn {
    width: 36px;
    height: 36px;
  }
}

/* =========================================
   Phase 7: 教材テンプレートライブラリ
   ========================================= */

/* テンプレボタン（左ツールバー） */
.tool-btn-template {
  position: relative;
  background: linear-gradient(135deg, #fff5ef, #fff);
  border: 1.5px solid #ffd7c2 !important;
  color: #ff7e5f !important;
}
.tool-btn-template:hover {
  background: linear-gradient(135deg, #ffe5d4, #fff);
  transform: scale(1.05);
}
.tool-btn-template::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9a8b, #ff7e5f);
  box-shadow: 0 0 4px rgba(255, 126, 95, 0.6);
}

/* 横長モーダル（テンプレギャラリー用） */
.modal-panel-wide {
  max-width: 1100px !important;
  width: 95% !important;
}

/* カテゴリタブ */
.template-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff5ef;
  border: 1.5px solid transparent;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
  cursor: pointer;
}
.template-cat-btn:hover {
  background: #ffe5d4;
  color: #ff7e5f;
}
.template-cat-btn.active {
  background: linear-gradient(135deg, #ff9a8b, #ff7e5f);
  color: #fff;
  border-color: #ff7e5f;
  box-shadow: 0 4px 12px rgba(255, 126, 95, 0.3);
}
.template-cat-btn i {
  font-size: 14px;
}

/* テンプレカード */
.template-card {
  border: 1.5px solid #ffe0cf;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.template-card:hover {
  border-color: #ff9a8b;
  box-shadow: 0 8px 24px rgba(255, 126, 95, 0.15);
  transform: translateY(-2px);
}
.template-card-preview {
  height: 130px;
  background: #fffaf5;
  border-bottom: 1px solid #ffe0cf;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.template-card-preview svg {
  display: block;
  width: 100%;
  height: 100%;
}
.template-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.template-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #2c3e50;
}
.template-card-title i {
  font-size: 16px;
}
.template-card-desc {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
  flex: 1;
  margin: 0;
}
.template-card-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.template-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border-radius: 8px;
  background: #fff5ef;
  border: 1px solid #ffd7c2;
  color: #ff7e5f;
  font-size: 10px;
  font-weight: 700;
  transition: all 0.15s;
  cursor: pointer;
  white-space: nowrap;
}
.template-action-btn i {
  font-size: 10px;
}
.template-action-btn:hover {
  background: #ffe5d4;
  border-color: #ff9a8b;
}
.template-action-btn.primary {
  background: linear-gradient(135deg, #ff9a8b, #ff7e5f);
  border-color: #ff7e5f;
  color: #fff;
}
.template-action-btn.primary:hover {
  background: linear-gradient(135deg, #ff7e5f, #ff5a3c);
}
.template-action-btn.warn {
  background: #fff;
  border-color: #f0c4c4;
  color: #c0392b;
}
.template-action-btn.warn:hover {
  background: #fee5e5;
  border-color: #e74c3c;
}

/* モバイル：カード単列・アクションボタン縦並び */
@media (max-width: 640px) {
  .modal-panel-wide {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0;
    margin-top: auto;
    padding: 16px;
  }
  .template-card-actions {
    flex-wrap: wrap;
  }
  .template-action-btn {
    font-size: 11px;
    padding: 8px 6px;
  }
  #template-categories {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .template-cat-btn {
    flex-shrink: 0;
  }
}

/* =========================================
   Phase 8: 教材インポート（PDF / 画像）
   ========================================= */

/* インポートボタン（左ツールバー） */
.tool-btn-import {
  position: relative;
  background: linear-gradient(135deg, #fff0e8, #fff);
  border: 1.5px solid #ffcab2 !important;
  color: #e84e1f !important;
}
.tool-btn-import:hover {
  background: linear-gradient(135deg, #ffe0d2, #fff);
  transform: scale(1.05);
}
.tool-btn-import::after {
  content: 'NEW';
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ff9a8b, #ff5a3c);
  color: #fff;
  box-shadow: 0 2px 4px rgba(255, 90, 60, 0.4);
  line-height: 1.2;
}

/* ドロップゾーン */
.import-drop-zone {
  border: 3px dashed #ffd7c2;
  border-radius: 12px;
  background: #fff8f3;
  padding: 32px 16px;
  text-align: center;
  color: #ff7e5f;
  cursor: pointer;
  transition: all 0.2s;
}
.import-drop-zone:hover,
.import-drop-zone.dragover {
  border-color: #ff7e5f;
  background: #fff0e6;
  transform: scale(1.01);
}
.import-drop-zone.dragover {
  border-style: solid;
  box-shadow: 0 6px 18px rgba(255, 126, 95, 0.25);
}
.import-drop-zone p {
  margin: 0;
}

/* ステータスライン */
.import-status {
  margin-top: 12px;
  min-height: 0;
  padding: 0;
  font-size: 13px;
  color: #555;
  transition: all 0.2s;
  border-radius: 8px;
  overflow: hidden;
}
.import-status.active {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fff5ef;
  border: 1px solid #ffd7c2;
  min-height: 36px;
}

/* スライダー */
#import-opacity {
  height: 6px;
  border-radius: 3px;
  background: #ffe5d4;
}

/* モバイル */
@media (max-width: 640px) {
  .import-drop-zone {
    padding: 24px 12px;
  }
}

/* =========================================
   Phase 9: 手書き文字認識（OCR）
   ========================================= */

/* OCRボタン（左ツールバー） */
.tool-btn-ocr {
  position: relative;
  background: linear-gradient(135deg, #ffeaf5, #fff);
  border: 1.5px solid #ffc1dd !important;
  color: #e91e63 !important;
}
.tool-btn-ocr:hover {
  background: linear-gradient(135deg, #ffd6e8, #fff);
  transform: scale(1.05);
}
.tool-btn-ocr.active {
  background: linear-gradient(135deg, #ff7eb3, #ff5a8a);
  color: #fff !important;
  border-color: #ff5a8a !important;
  box-shadow: 0 4px 12px rgba(255, 90, 138, 0.4);
}
.tool-btn-ocr .tool-btn-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ff7eb3, #e91e63);
  color: #fff;
  box-shadow: 0 2px 4px rgba(233, 30, 99, 0.4);
  line-height: 1.2;
  pointer-events: none;
}

/* OCRモード時の画面下バナー（モード中表示） */
.ocr-mode-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff7eb3, #ff5a8a);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(233, 30, 99, 0.35);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: ocrBannerIn 0.3s ease-out;
}
.ocr-mode-banner i {
  font-size: 16px;
}
.ocr-mode-banner .ocr-banner-close {
  background: rgba(255, 255, 255, 0.25);
  border: none;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 900;
  font-size: 11px;
  margin-left: 4px;
  transition: background 0.15s;
}
.ocr-mode-banner .ocr-banner-close:hover {
  background: rgba(255, 255, 255, 0.45);
}
@keyframes ocrBannerIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* OCRドラッグ選択枠（ボード上、ocr.jsから生成） */
/* ※ Konvaで描画するため、ここでは指示書のみ。コーラル系の点線枠 */

/* OCR進捗バー */
.ocr-progress {
  background: #fff5f9;
  border: 1px solid #ffd6e8;
  border-radius: 10px;
  padding: 10px 14px;
}

/* OCRアクションボタン（モーダル下部の3枚カード） */
.ocr-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 10px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.ocr-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.ocr-action-btn:active {
  transform: translateY(0);
}
.ocr-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* OCR付箋色ピッカー */
#ocr-sticky-color {
  display: flex;
  gap: 6px;
}
#ocr-sticky-color .ocr-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px #e5e7eb;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
#ocr-sticky-color .ocr-color-swatch:hover {
  transform: scale(1.15);
}
#ocr-sticky-color .ocr-color-swatch.selected {
  box-shadow: 0 0 0 2.5px #e91e63;
  transform: scale(1.1);
}

/* OCRプレビュー画像 */
#ocr-preview-img {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* モバイル調整 */
@media (max-width: 640px) {
  .ocr-mode-banner {
    bottom: 12px;
    font-size: 12px;
    padding: 8px 16px;
  }
  .ocr-action-btn {
    padding: 12px 8px;
  }
}

/* =========================================
   Phase 10: 投票・挙手（v1.10.0）
   ========================================= */

/* 投票ツールボタン（左ツールバー） */
.tool-btn-poll {
  position: relative;
  background: linear-gradient(135deg, #ffe4ec, #fff);
  border: 1.5px solid #ffbacf !important;
  color: #e91e63 !important;
}
.tool-btn-poll:hover {
  background: linear-gradient(135deg, #ffd0e0, #fff);
  transform: scale(1.05);
}
.tool-btn-poll .tool-btn-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ff7eb3, #e91e63);
  color: #fff;
  box-shadow: 0 2px 4px rgba(233, 30, 99, 0.4);
  line-height: 1.2;
  pointer-events: none;
}

/* 投票作成モーダル：種類切替タブ */
.poll-variant-tab {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.15s;
}
.poll-variant-tab:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #e91e63;
}
.poll-variant-tab.active {
  background: #fff;
  color: #e91e63;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 選択肢入力行 */
.poll-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.poll-emoji-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  font-size: 20px;
  border-radius: 10px;
  background: #fff5ef;
  border: 1.5px solid #ffd7c2;
  cursor: pointer;
  transition: all 0.15s;
}
.poll-emoji-btn:hover {
  background: #ffe5d4;
  transform: scale(1.05);
}
.poll-option-input {
  flex: 1;
  font-size: 14px;
  padding: 8px 12px;
  background: #fff8f3;
  border: 1.5px solid #ffd7c2;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s;
}
.poll-option-input:focus {
  border-color: #ff7eb3;
  background: #fff;
}
.poll-option-remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  font-size: 12px;
  color: #9ca3af;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s;
}
.poll-option-remove:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* 絵文字パレット（ポップオーバー） */
.poll-emoji-palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 8px;
  background: #fff;
  border: 1.5px solid #ffd7c2;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  max-width: 220px;
}
.poll-emoji-palette button {
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: #fff5ef;
  cursor: pointer;
  transition: all 0.12s;
}
.poll-emoji-palette button:hover {
  background: #ffe5d4;
  transform: scale(1.1);
}

/* モバイル調整 */
@media (max-width: 640px) {
  .poll-variant-tab {
    font-size: 12px;
    padding: 7px 8px;
  }
  .poll-option-input {
    font-size: 13px;
    padding: 7px 10px;
  }
  .poll-emoji-btn {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}