/* 修正: グローバルな `*` セレクタは.jcm-root外にも波及し、
   サイト全体(ヘッダー・フッター等)のmargin/paddingを消してしまう重大なバグだったため
   .jcm-root配下にスコープした */
.jcm-root, .jcm-root * { margin:0; padding:0; box-sizing:border-box; }

.jcm-root {
  --bg: #f0f4f8;
  --ui-bg: rgba(30,58,95,0.1);
  --ui-text: #1e3a5f;
  --ui-text-sub: rgba(30,58,95,0.6);
  --btn-active: #1e3a5f;
  --btn-active-text: #ffffff;
  --border: rgba(30,58,95,0.2);
}

.jcm-root {
  width:100vw;
  /* 修正: 100vh→100dvhでモバイルブラウザのアドレスバー分のガタつきを解消 */
  height:100dvh;
  overflow:hidden !important; /* 修正: レイアウト崩壊防止のためCocoon側の上書きに強くする */
  background: #f0f4f8; /* 背景色パレットでJSがinline styleとして上書きするため!importantは付けない */
  font-family:'M PLUS Rounded 1c','BIZ UDGothic',sans-serif;
  transition: background 0.3s;
  position:relative;
}
/* 修正: ログイン中はWP管理バー(上部固定 32px/モバイル46px)の分だけ高さを補正 */
body.admin-bar .jcm-root { height: calc(100dvh - 32px); }
@media (max-width: 782px) {
  body.admin-bar .jcm-root { height: calc(100dvh - 46px); }
}

#jcm-map-area {
  width:100%;
  /* 修正: 600px固定→親いっぱいに可変。大画面での余白/小画面での窮屈さを解消 */
  height:100%;
  overflow:hidden; position:relative;
  cursor: grab;
}
#jcm-map-area.dragging { cursor: grabbing; }

/* 修正: CSS transform(scale)によるズームを廃止しSVGのviewBoxを直接書き換える方式に変更したため、
   ラッパーのposition/transform関連指定は不要になった。SVGがエリア全体を占めるようにする */
#jcm-map-wrap {
  width:100%; height:100%;
}
#jcm-svg {
  display:block; width:100%; height:100%;
}

#jcm-svg path {
  fill: #c8dde8;
  stroke: var(--map-stroke, #1e3a5f);
  stroke-width: 0.8;
  /* 修正: 頂点データが粗い都道府県境界線で、鋭角の頂点が針のようなトゲとして
     見えていた（miterジョイン既定値の副作用）。round化で見た目のカクつきを緩和 */
  stroke-linejoin: round;
  stroke-linecap: round;
  cursor: pointer;
  transition: opacity 0.12s;
}
#jcm-svg text {
  fill: var(--map-stroke, #1e3a5f);
}
#jcm-svg path:hover { opacity: 0.72; }
#jcm-svg text {
  font-size: 6px;
  font-weight: bold;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* 沖縄ラベル位置補正用 */
/* 修正: JS側が付与するidは #jcm-okinawa-label のため、セレクタを一致させた（従来は未適用だった） */
#jcm-okinawa-label {
  font-size: 5.5px;
}

#jcm-zoom-btns {
  position:fixed !important; bottom:16px !important; right:16px !important;
  display:flex; flex-direction:column; gap:6px;
  z-index:2147482000; /* 修正: Cocoon側の固定要素に埋もれないようz-indexを確保 */
}
.zoom-btn {
  width:40px; height:40px; border-radius:50% !important; border: 1px solid var(--border) !important;
  background: var(--ui-bg) !important; /* 修正: Cocoonのボタン共通スタイルに負けないよう!important */
  color: var(--ui-text);
  font-size:20px; font-weight:bold;
  cursor:pointer; backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  transition: background 0.15s;
  line-height:1;
}
.zoom-btn:hover { background: rgba(255,255,255,0.3) !important; }

#jcm-toolbar {
  position:fixed !important; bottom:16px !important; left:16px !important;
  display:flex; flex-direction:column; gap:8px;
  user-select:none;
  z-index:2147482000; /* 修正: Cocoon側の固定要素に埋もれないようz-indexを確保 */
  max-width: calc(100vw - 80px); /* 修正: 幅の狭い画面でズームボタンと重ならないよう制限 */
}

.palette-wrap {
  background: var(--ui-bg) !important;
  padding:8px 10px;
  border-radius:14px !important;
  backdrop-filter:blur(6px);
  border:1px solid var(--border) !important;
  max-width:300px;
}
.palette-label {
  color: var(--ui-text-sub);
  font-size:11px; font-weight:bold;
  margin-bottom:5px;
}
.palette-row {
  display:flex; flex-wrap:wrap; gap:5px;
}

.color-btn {
  width:34px; height:34px; border-radius:50% !important;
  border:3px solid transparent !important;
  cursor:pointer;
  transition:transform 0.1s, border-color 0.1s, box-shadow 0.1s;
  flex-shrink:0;
}
.color-btn:hover { transform:scale(1.15); }
.color-btn.active {
  border-color: var(--btn-active) !important;
  transform:scale(1.2);
  box-shadow:0 0 0 2px rgba(255,255,255,0.6);
}
.color-btn.eraser {
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M20 20H7L3 16l10-10 7 7-3 4'/%3E%3C/svg%3E") center/20px no-repeat;
}

#jcm-tool-row {
  display:flex; gap:6px; flex-wrap:wrap;
}
.tool-btn {
  padding:7px 13px; border-radius:20px !important; border: 1px solid var(--border) !important;
  background: var(--ui-bg) !important;
  color: var(--ui-text);
  font-size:12px; font-weight:bold;
  cursor:pointer; backdrop-filter:blur(6px);
  transition:background 0.15s, color 0.15s;
  font-family:inherit;
  white-space:nowrap;
}
.tool-btn:hover { background:rgba(255,255,255,0.3) !important; }
.tool-btn.active {
  background: var(--btn-active) !important;
  color: var(--btn-active-text);
  border-color: transparent !important;
}

#jcm-mode-tabs {
  display:flex; gap:0; overflow:hidden;
  border-radius:20px !important; border:1px solid var(--border) !important;
  backdrop-filter:blur(6px);
}
.mode-tab {
  padding:7px 14px; border:none !important;
  background: var(--ui-bg) !important;
  color: var(--ui-text);
  font-size:12px; font-weight:bold;
  cursor:pointer; font-family:inherit;
  transition:background 0.15s, color 0.15s;
}
.mode-tab.active {
  background: var(--btn-active) !important;
  color: var(--btn-active-text);
}

#jcm-tooltip {
  position:fixed !important;
  background:rgba(30,58,95,0.92) !important;
  color:#fff; padding:4px 10px;
  border-radius:8px !important; font-size:13px; font-weight:bold;
  pointer-events:none;
  display:none; /* JSがinline styleで block/none を切り替えるため display には!importantを付けない */
  border:1px solid #d4af37 !important;
  white-space:nowrap; z-index:2147482050; /* 修正: Cocoon-safeなz-indexへ引き上げ */
}

/* 修正: 「沖縄設定モード」用CSS(#ok-panel等、開発時の座標取得ツール用)はJS側に
   対応コードが一切なく完全に未使用だったため削除 */

#jcm-save-dialog {
  position:fixed !important; inset:0;
  background:rgba(0,0,0,0.5) !important;
  display:none !important; align-items:center; justify-content:center;
  z-index:2147482100; /* 修正: Cocoon-safeなz-indexへ引き上げ（モーダルなので最前面） */
}
#jcm-save-dialog.open { display:flex !important; }
#jcm-save-box {
  background:#fff !important; border-radius:16px !important;
  padding:24px; min-width:280px;
  display:flex; flex-direction:column; gap:12px;
  max-width: calc(100vw - 32px); /* 修正: 幅の狭い画面ではみ出さないよう制限 */
}
#jcm-save-box h3 { color:#1e3a5f; font-size:16px; }
#jcm-save-title {
  border:2px solid #1e3a5f !important;
  border-radius:8px !important;
  padding:8px 12px; font-size:14px;
  font-family:inherit; outline:none;
}
#jcm-save-title:focus { border-color:#d4af37 !important; }
.dialog-btns { display:flex; gap:8px; justify-content:flex-end; }
.dialog-btn {
  padding:8px 18px; border-radius:20px !important; border:none !important;
  font-size:14px; font-weight:bold; cursor:pointer; font-family:inherit;
}
.btn-ok { background:#1e3a5f !important; color:#fff; }
.btn-cancel { background:#eee !important; color:#555; }

/* ===== モード選択モーダル（全国／地方／市町村） ===== */
#jcm-region-dialog {
  position:fixed !important; inset:0;
  background:rgba(0,0,0,0.5) !important;
  display:none !important; align-items:center; justify-content:center;
  z-index:2147482100;
  padding:16px;
}
#jcm-region-dialog.open { display:flex !important; }
#jcm-region-box {
  background:#fff !important; border-radius:16px !important;
  padding:24px; width:100%; max-width:420px;
  display:flex; flex-direction:column; gap:14px;
  max-height: calc(100dvh - 32px); overflow-y:auto;
}
#jcm-region-box h3 { color:#1e3a5f; font-size:16px; }
#jcm-mode-choices,
#jcm-region-grid {
  display:grid; grid-template-columns: repeat(2, 1fr); gap:10px;
}
.region-btn {
  padding:14px 10px; border-radius:14px !important; border:2px solid var(--border, rgba(30,58,95,0.2)) !important;
  background:#f0f4f8 !important; color:#1e3a5f;
  font-size:14px; font-weight:bold; cursor:pointer; font-family:inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.region-btn:hover { background:#e2ebf3 !important; }
.region-btn.active {
  background:#1e3a5f !important; color:#fff; border-color:#1e3a5f !important;
}

/* 修正: ステップ2「市町村」の都道府県一覧は47件あるため、
   地方一覧(2列)より詰めた3列グリッド・小さめフォントにして一覧性を確保 */
#jcm-pref-grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:8px;
}
.pref-choice-btn {
  padding:10px 4px; font-size:12px;
}

/* 修正: 選択した地方の対象外の都道府県は「文脈」として薄く残す（クリックでの色ぬり不可）。
   以前はpath全体にopacityをかけていたため、境界線(stroke)まで半透明になり、
   お隣の県（不透明な線）とのわずかな座標のズレが二重線として目立ってしまっていた。
   線は他の県と同じ不透明な色のまま保ち、fillだけをグレーにすることで「境界は重なって見える」ようにした */
#jcm-svg path.out-of-region {
  fill: #dde5ea !important;
  cursor: default;
  pointer-events: none;
}
#jcm-svg text.out-of-region {
  opacity: 0.4;
}

@media (max-width: 420px) {
  #jcm-mode-choices,
  #jcm-region-grid { grid-template-columns: 1fr; }
  #jcm-pref-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 市町村モード：トースト通知（データ未準備の案内など） ===== */
/* 修正: alert()はブラウザ標準ダイアログで操作を強制的に止めてしまい、
   タブレットで子どもが操作中に出ると驚いてしまうため、
   数秒で自動的に消える軽い通知を画面上部中央に表示する方式にした */
#jcm-toast {
  position:fixed !important; top:16px !important; left:50%;
  transform:translateX(-50%) translateY(-12px);
  background:rgba(30,58,95,0.94) !important; color:#fff;
  padding:9px 18px; border-radius:20px !important;
  font-size:13px; font-weight:bold;
  border:1px solid #d4af37 !important;
  white-space:nowrap; max-width:calc(100vw - 32px);
  overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
  opacity:0; transition:opacity 0.2s, transform 0.2s;
  z-index:2147482100;
}
#jcm-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* 修正: タブレット・スマホ幅でもズームボタンとツールバーが重ならないよう調整
   （既存CSSに@media指定が一切なかったため新規追加） */
@media (max-width: 768px) {
  #jcm-zoom-btns { bottom:12px !important; right:12px !important; gap:5px; }
  .zoom-btn { width:36px; height:36px; font-size:18px; }
  #jcm-toolbar { bottom:12px !important; left:12px !important; gap:6px; max-width: calc(100vw - 64px); }
  .tool-btn, .mode-tab { padding:6px 10px; font-size:11px; }
  .color-btn { width:30px; height:30px; }
  .palette-wrap { max-width: calc(100vw - 80px); padding:6px 8px; }
}
@media (max-width: 420px) {
  #jcm-tool-row { gap:4px; }
  .tool-btn, .mode-tab { padding:5px 8px; font-size:10px; }
  .color-btn { width:26px; height:26px; }
  .zoom-btn { width:32px; height:32px; font-size:16px; }
}