/* ===== 和の配色（藍：indigo / 朱：vermilion） ===== */
:root{
  --ai:#1b2f52;        /* 藍 */
  --ai-2:#243d6a;
  --shu:#d7402b;       /* 朱 */
  --paper:#f7f3ea;     /* 生成り */
  --ink:#20242b;
  --ok:#2e7d32;
  --off:#9e9e9e;
  --ng:#c62828;
  --line:#e4ddcd;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:system-ui,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink); background:var(--paper); overflow:hidden;
}

/* ===== ヘッダー ===== */
.topbar{
  height:52px; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; background:var(--ai); color:#fff;
  border-bottom:3px solid var(--shu);
}
.brand{ font-weight:800; letter-spacing:.08em; font-size:17px; }
.lantern{ font-size:18px; }
.clock{ font-variant-numeric:tabular-nums; font-size:14px; opacity:.9; }

/* ===== レイアウト（PC：右にパネル / スマホ：下にシート） ===== */
.layout{ position:relative; height:calc(100% - 52px); display:flex; }
#map{ flex:1; height:100%; background:#dfe6ea; z-index:1; }

.panel{
  width:340px; height:100%; background:var(--paper);
  border-left:1px solid var(--line); display:flex; flex-direction:column; z-index:2;
}
.panel-head{ padding:12px; border-bottom:1px solid var(--line); }
.search input{
  width:100%; font-size:15px; padding:11px 12px; border:2px solid var(--line);
  border-radius:10px; background:#fff;
}
.search input:focus{ outline:none; border-color:var(--ai); }
.counts{ margin-top:10px; font-size:12px; color:#5a5346; font-variant-numeric:tabular-nums; }

.list{ list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; }
.row{
  display:flex; align-items:center; gap:10px; padding:11px 12px;
  border-bottom:1px solid var(--line); cursor:pointer;
}
.row:hover{ background:#fffaf0; }
.row-crest{ width:34px; height:34px; border-radius:50%; flex:none; background:#fff;
  border:1px solid #e2ddd0; overflow:hidden; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.2); }
.row-crest img{ width:100%; height:100%; object-fit:contain; }
.row-main{ flex:1; min-width:0; }
.row-name{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.row-sub{ font-size:11px; color:#7a7263; margin-top:2px; }
.badge{ font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.badge.ok{  background:#e6f4ea; color:var(--ok); }
.badge.off{ background:#eee; color:#616161; }
.badge.non{ background:#f3ede0; color:#a99; }

.panel-foot{ padding:10px 12px; font-size:12px; color:#7a7263; border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums; }

/* 神輿検索ボタン（スマホ用・右上） */
.panel-toggle{
  display:none; position:absolute; top:10px; right:12px;
  z-index:1200; background:var(--shu); color:#fff; border:2px solid rgba(255,255,255,.6);
  border-radius:999px; padding:14px 20px; font-weight:800; font-size:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}

/* ===== 地図アイコン（紋バッジ画像） ===== */
.pin-img{ width:44px; height:44px; position:relative; }
.pin-img img{ width:44px; height:44px; object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }

/* 波紋アニメーション（更新時。リング色は inline で神輿の色を指定） */
.ripple-box{ position:absolute; left:22px; top:22px; width:0; height:0; pointer-events:none; z-index:-1; }
.ripple-ring{
  position:absolute; left:0; top:0; width:40px; height:40px; margin:-20px 0 0 -20px;
  border-radius:50%; border:3px solid; opacity:0;
  animation:mikoshiRipple 1.4s ease-out forwards;
}
@keyframes mikoshiRipple{
  0%{ transform:scale(0.7); opacity:.85; }
  100%{ transform:scale(2.9); opacity:0; }
}

/* 一覧：移動中／停止中の行 */
.row-move{ font-size:12px; font-weight:800; color:#333; margin-top:2px; }
.row-move.stop{ color:#8a8375; font-weight:700; }

/* ===== 現在地（この端末の画面だけ） ===== */
/* ボタン：左上・縮尺(＋/−)の下、アイコンのみ・和のトンマナ（白地に藍） */
.locate-btn{
  position:absolute; left:12px; top:96px; z-index:1200;
  width:46px; height:46px; border-radius:50%;
  background:#fff; color:var(--ai); border:2px solid var(--ai);
  font-size:20px; line-height:1; cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center;
}
.locate-btn.on{ background:var(--ai); color:#fff; }
.locate-btn.loading{ opacity:.6; }

/* ===== 地図レイヤー切替（現在地ボタンの下・Googleマップ風） ===== */
.layer-btn{
  position:absolute; left:12px; top:150px; z-index:1200;
  width:46px; height:46px; border-radius:14px;
  background:#fff; color:var(--ai); border:2px solid var(--ai);
  font-size:20px; line-height:1; cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center;
}
.layer-btn.on{ background:var(--ai); color:#fff; }
.layer-panel{
  position:absolute; left:66px; top:150px; z-index:1300;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.28); overflow:hidden;
  display:none; min-width:168px;
}
.layer-panel.open{ display:block; }
.layer-opt{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:14px 16px; border:none; background:#fff; cursor:pointer;
  font-size:15px; font-weight:700; color:var(--ink); text-align:left;
  border-bottom:1px solid #eee;
}
.layer-opt:last-child{ border-bottom:none; }
.layer-opt .chk{ width:16px; color:var(--shu); font-weight:900; }
.layer-opt.sel{ background:#f3f6fb; color:var(--ai); }
.layer-opt:active{ background:#e9eef6; }

/* ===== ふきだしを開いている間は、地図の操作アイコンを隠す =====
   （縮尺＋/−・現在地・地図切替・検索がふきだしと重なって読みにくい、という声への対応）
   スマホだけ。PCは画面が広く重ならないので、そのまま出しておく */
@media (max-width:720px){
  .leaflet-control-zoom, .locate-btn, .layer-btn, .panel-toggle{
    transition:opacity .18s ease, visibility .18s ease;
  }
  .layout.map-focus .leaflet-control-zoom,
  .layout.map-focus .locate-btn,
  .layout.map-focus .layer-btn,
  .layout.map-focus .layer-panel,
  .layout.map-focus .panel-toggle{
    opacity:0; visibility:hidden; pointer-events:none;
  }
}

/* ===== 注意書き（パネル内の常設テキスト） ===== */
.panel-note{
  font-size:11px; line-height:1.6; color:#8a8375;
  background:#f8f4ec; border-top:1px solid var(--line);
  padding:9px 14px;
}

/* ===== 注意書き（青バー右端のⓘ・半透明） ===== */
.info-btn{
  flex-shrink:0; z-index:1200;
  width:34px; height:34px; border-radius:50%;
  background:transparent; color:#fff; border:none;
  font-size:17px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:.75; box-shadow:none;
  transition:opacity .15s;
}
.info-btn:hover{ opacity:1; }
.info-btn.on{ opacity:1; }
.info-bubble{
  position:fixed; right:12px; top:60px; z-index:1300;
  max-width:min(320px,80vw); background:#fff; color:#444;
  border:1px solid var(--ai); border-radius:10px;
  padding:12px 14px; font-size:12px; line-height:1.7;
  box-shadow:0 6px 20px rgba(0,0,0,.28); display:none;
}
.info-bubble.open{ display:block; }

/* ===== 準備中モードの黄色帯 ===== */
.premode-bar{
  display:none; position:absolute; top:0; left:0; right:0; z-index:1150;
  background:#ffd400; color:#000; font-weight:800; font-size:13.5px; line-height:1.4;
  text-align:center; padding:9px 12px; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.premode-on .premode-bar{ display:block; }
/* 帯が出ている間は、上部のボタン類を帯の下へずらして重ならないようにする */
.premode-on .leaflet-top{ margin-top:46px; }
.premode-on .panel-toggle{ top:56px; }
.premode-on .locate-btn{ top:142px; }
.premode-on .layer-btn{ top:196px; }
.premode-on .layer-panel{ top:196px; }

/* ポップアップ内の紹介画像（縦横どちらの写真も全体が見えるように・最大2枚） */
.pop-img{ margin-top:8px; display:flex; gap:6px; justify-content:center; align-items:flex-start; }
.pop-img figure{ margin:0; flex:1 1 0; min-width:0; text-align:center; }
.pop-img img{
  max-width:100%; max-height:240px;
  width:auto; height:auto;
  object-fit:contain; border-radius:8px;
  display:inline-block; vertical-align:top; background:#f0efe9;
}
.pop-img.two figure{ height:150px; display:flex; align-items:center; justify-content:center; }
.pop-img.two img{ max-height:100%; max-width:100%; }

/* 中心の青いドット（白フチ・影）。家紋も色も無い＝神輿と混同しない */
.me-dot{
  width:16px; height:16px; border-radius:50%; box-sizing:border-box;
  background:#1a73e8; border:3px solid #fff;
  box-shadow:0 0 4px rgba(0,0,0,.4);
}
/* 精度円：半透明の青が、ゆっくり脈打つ */
.me-acc{ animation:mePulse 2.6s ease-in-out infinite; transform-origin:center; }
@keyframes mePulse{
  0%,100%{ opacity:.10; }
  50%{ opacity:.28; }
}

/* ポップアップ */
.pop b{ font-size:15px; }
.pop .line{ font-size:13px; margin-top:3px; }
.pop .state-off{ color:var(--ng); font-weight:800; }
.pop .state-ok{ color:var(--ok); font-weight:800; }

/* ===== 通信バナー ===== */
.banner{
  position:fixed; left:0; right:0; bottom:0; z-index:2000; display:none;
  background:var(--ng); color:#fff; text-align:center; padding:10px; font-size:13px; font-weight:700;
}
.banner.show{ display:block; }

/* ===== スマホ ===== */
@media (max-width:720px){
  .panel{
    position:absolute; left:0; right:0; bottom:0; width:100%; height:55%;
    border-left:none; border-top:1px solid var(--line);
    border-radius:16px 16px 0 0; box-shadow:0 -4px 18px rgba(0,0,0,.18);
    transform:translateY(100%); transition:transform .25s ease;
  }
  .panel.open{ transform:translateY(0); }
  .panel-toggle{ display:block; }
}

/* ===== 詳細シート（紹介文・写真をじっくり読む） ===== */
.sheet-mask{
  position:fixed; inset:0; z-index:1400;
  background:rgba(0,0,0,.45); opacity:0; visibility:hidden;
  transition:opacity .2s;
}
.sheet-mask.open{ opacity:1; visibility:visible; }

.detail-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:1401;
  max-height:82vh; display:flex; flex-direction:column;
  background:#fff; border-radius:16px 16px 0 0;
  box-shadow:0 -6px 24px rgba(0,0,0,.3);
  transform:translateY(100%); transition:transform .25s ease;
  padding:10px 18px calc(18px + env(safe-area-inset-bottom));
}
.detail-sheet.open{ transform:translateY(0); }

.sheet-grip{ width:42px; height:4px; border-radius:2px; background:#d5d0c4; margin:0 auto 10px; flex-shrink:0; }
.sheet-close{
  position:absolute; top:10px; right:12px;
  width:32px; height:32px; border:none; border-radius:50%;
  background:#f0efe9; color:#555; font-size:15px; cursor:pointer;
}
.sheet-title{ margin:0 34px 10px 0; font-size:17px; font-weight:800; flex-shrink:0; }
.sheet-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sheet-img{ margin-bottom:12px; display:flex; gap:10px; justify-content:center; align-items:flex-start; }
.sheet-img figure{ margin:0; flex:1 1 0; min-width:0; text-align:center; }
.sheet-img img{
  max-width:100%; max-height:320px; width:auto; height:auto;
  object-fit:contain; border-radius:10px; background:#f0efe9; display:inline-block;
}
.sheet-img.two figure{ height:240px; display:flex; align-items:center; justify-content:center; }
.sheet-img.two img{ max-height:100%; max-width:100%; }
.sheet-text{ margin:0 0 14px; font-size:14px; line-height:1.9; color:#3a3a3a; white-space:pre-wrap; }
.sheet-dir{
  display:inline-block; padding:10px 16px; background:#1a73e8; color:#fff;
  border-radius:8px; font-weight:700; text-decoration:none; font-size:13px;
}

/* ===== ボタン共通（ポップアップ・詳細シート） ===== */
.pop-dir{ text-align:center; margin-top:10px; }

.btn-primary,
.leaflet-popup-content .btn-primary{
  display:inline-block; padding:10px 18px;
  background:#1B2F52; color:#fff !important; border:none; border-radius:8px;
  font-weight:700; font-size:13px; text-decoration:none; cursor:pointer;
}
.btn-primary:hover,
.btn-primary:visited,
.leaflet-popup-content .btn-primary:hover{ color:#fff !important; }
.btn-primary:hover{ background:#2a4675; }

.detail-btn{
  display:block; width:100%; margin-top:8px; padding:9px 10px;
  background:#1B2F52; color:#fff; border:none; border-radius:8px;
  font-size:13px; font-weight:700; cursor:pointer;
}
.detail-btn:hover{ background:#2a4675; }

.sheet-dir{
  display:block; width:fit-content; margin:0 auto;
  padding:10px 18px; background:#1B2F52; color:#fff; border-radius:8px;
  font-weight:700; text-decoration:none; font-size:13px;
}
.sheet-dir:hover{ background:#2a4675; }

/* PCでは中央のダイアログとして出す */
@media (min-width:900px){
  .detail-sheet{
    left:50%; right:auto; bottom:auto; top:50%;
    transform:translate(-50%,-46%); opacity:0; visibility:hidden;
    width:min(560px,90vw); max-height:80vh; border-radius:14px;
    padding:18px 22px;
    transition:opacity .2s, transform .2s;
  }
  .detail-sheet.open{ transform:translate(-50%,-50%); opacity:1; visibility:visible; }
  .sheet-grip{ display:none; }
}