/* めぐログ — スマホ縦持ち優先 */
:root{
  --navy:#2c3e62;
  --amber:#e8a33d;
  --cream:#f5f1e8;
  --ink:#1f2733;
  --muted:#6b7684;
  --line:#dfe4ec;
  --bg:#fbfaf7;
  --danger:#c0392b;
}
*{box-sizing:border-box}
/* ★重ね順は下から上へ この順★ 個別に決めると必ずどこかが前に出すぎる。
     500  地図の上のボタン類
    1000  Leaflet のコントロール（+/- など。ライブラリ側の値なので動かせない）
    1100  .mapsearch    … Leaflet の +/- より前（候補が隠れるため）
    1300  .sheet        … 記録・編集の画面。検索バーより前に出す
    1400  .toast        … 記録画面の上にも出す必要がある
    1500  .updatebar    … 一番上 */
/* ★hidden を最優先で効かせる★
   .mkinds{display:flex} のように display を持つクラスは、ブラウザ既定の
   [hidden]{display:none} に勝ってしまう。そのため hidden を付けても消えず、
   ランドマークがオフのままチップの行が出続けて、地図の高さを45px奪っていた。 */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.7;
  -webkit-text-size-adjust:100%;
}
a{color:var(--navy)}

/* ---- ヘッダー ---- */
.hero{background:var(--navy); color:#fff; padding:14px 16px 12px}
.hero__mark{font-size:11px; letter-spacing:.12em; opacity:.8}
.hero__mark a{color:#fff; text-decoration:none}
.hero__title{margin:2px 0 0; font-size:22px; letter-spacing:.04em}
.hero__lead{margin:2px 0 10px; font-size:12.5px; opacity:.85}
.progress__bar{height:8px; background:rgba(255,255,255,.22); border-radius:99px; overflow:hidden}
.progress__bar span{display:block; height:100%; width:0; background:var(--amber); border-radius:99px; transition:width .35s ease}
.progress__text{margin:6px 0 0; font-size:12.5px; font-weight:700}

/* ---- タブ ---- */
.tabs{display:flex; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:600}
.tab{
  flex:1; appearance:none; border:0; background:none; padding:12px 0;
  font:inherit; font-size:14px; font-weight:700; color:var(--muted); cursor:pointer;
  border-bottom:3px solid transparent;
}
.tab.is-active{color:var(--navy); border-bottom-color:var(--amber)}

/* ---- パネル ---- */
.panel{display:none}
.panel.is-active{display:block}

/* ---- 地図 ---- */
#panel-map{position:relative}
/* 高さは js の fitMapHeight が実測して上書きする。ここの値は、
   万一 js が動かなかったときのための控え。min-height は inline の height にも
   勝つので、js 側は「下限」としてこの値を読んでいる（数字を二重に書かない）。 */
#map{height:calc(100vh - 230px); min-height:300px; background:#e8eef5}
/* 地図の枠を基準にする。パネル基準だと、下の説明文の行数でボタン位置がずれる */
.mapwrap{position:relative}
/* bottom は地図の帰属表示（約17px）を避けられる高さにする */
.fabs{position:absolute; right:14px; bottom:26px; z-index:500; display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.fab{
  appearance:none; border:0; border-radius:99px; padding:12px 18px;
  background:var(--navy); color:#fff; font:inherit; font-weight:700; font-size:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.25); cursor:pointer; white-space:nowrap;
}
.fab--sub{background:#fff; color:var(--navy); border:1.5px solid var(--navy)}
.fab:disabled{opacity:.6}
.hint{margin:0; padding:9px 16px; font-size:12.5px; color:var(--muted); background:#fff; border-top:1px solid var(--line)}

/* ---- 一覧 ---- */
.list{padding:8px 12px 24px}
.row{
  display:flex; align-items:center; gap:10px; width:100%;
  appearance:none; border:1px solid var(--line); border-radius:12px; background:#fff;
  padding:12px 14px; margin-bottom:8px; font:inherit; text-align:left; cursor:pointer;
}
.row--done{background:#fffaf0; border-color:#f0d9a8}
.row__mark{color:var(--line); font-size:15px}
.row--done .row__mark{color:var(--amber)}
.row__name{flex:1; font-weight:700}
.row__go{font-size:12px; color:var(--muted)}

/* ---- カード ---- */
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; margin:12px}
.card h2{margin:0 0 8px; font-size:15px; color:var(--navy)}
.card p{margin:0 0 8px; font-size:13.5px}
.muted{color:var(--muted); font-size:12.5px}
.warn{color:#8a5a00; background:#fff6e5; border-left:3px solid var(--amber); padding:8px 10px; border-radius:0 6px 6px 0; font-size:13px}
.todo{margin:0; padding-left:1.2em; font-size:13.5px; color:var(--muted)}
.todo li{margin:2px 0}

/* ---- ボタン ---- */
.btns{display:flex; gap:8px; flex-wrap:wrap}
.btn{
  appearance:none; border:0; border-radius:10px; padding:11px 16px;
  background:var(--navy); color:#fff; font:inherit; font-weight:700; font-size:14px; cursor:pointer;
}
.btn--sub{background:#fff; color:var(--navy); border:1.5px solid var(--navy)}
.btn--danger{background:var(--danger)}
.btn--wide{width:100%; margin-top:4px}
.linkbtn{appearance:none;border:0;background:none;color:var(--danger);font:inherit;font-size:12px;cursor:pointer;padding:0}
.iconbtn{appearance:none;border:0;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}

/* ---- 記録シート ---- */
.sheet{position:fixed; inset:0; z-index:1300; display:none}
.sheet.is-open{display:block}
.sheet__backdrop{position:absolute; inset:0; background:rgba(20,26,38,.45)}
.sheet__body{
  position:absolute; left:0; right:0; bottom:0; max-height:86vh; overflow-y:auto;
  background:#fff; border-radius:18px 18px 0 0; padding:16px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(0,0,0,.2);
}
.sheet__head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.sheet__head h2{margin:0; font-size:19px; color:var(--navy)}
.sheet__sub{margin:18px 0 8px; font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px}
.field{display:block; margin:12px 0}
.field>span{display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:4px}
.field input[type=date],.field textarea,.field input[type=file]{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  font:inherit; font-size:16px; background:#fff; color:var(--ink);
}
.field textarea{resize:vertical}

.visit{border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; background:#fcfcfa}
.visit__head{display:flex; align-items:center; justify-content:space-between; font-size:13.5px}
.visit__memo{margin:6px 0 0; font-size:13px; white-space:pre-wrap}
.visit__photo{display:block; width:100%; height:auto; border-radius:8px; margin-top:8px}

/* ---- トースト ---- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:99px;
  font-size:13.5px; opacity:0; pointer-events:none; transition:.25s; z-index:1400; max-width:90vw; text-align:center;
}
.toast.is-on{opacity:.96; transform:translateX(-50%) translateY(0)}

/* ---- フッター ---- */
.foot{padding:18px 16px calc(24px + env(safe-area-inset-bottom)); text-align:center; color:var(--muted); font-size:11.5px}
.foot p{margin:2px 0}

@media (min-width:720px){
  #map{height:520px}
  .card{max-width:680px; margin-left:auto; margin-right:auto}
  .list{max-width:680px; margin:0 auto}
  .sheet__body{max-width:560px; margin:0 auto; border-radius:18px; bottom:5vh; left:16px; right:16px}
}

/* ---- 添付写真のプレビュー ---- */
.field>span{}
.preview{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.preview__item{position:relative; width:74px; height:74px; border-radius:8px; overflow:hidden; border:1px solid var(--line)}
.preview__item img{width:100%; height:100%; object-fit:cover; display:block}
.preview__del{
  position:absolute; top:2px; right:2px; width:22px; height:22px; line-height:20px;
  appearance:none; border:0; border-radius:99px; background:rgba(20,26,38,.72); color:#fff;
  font-size:15px; cursor:pointer; padding:0; text-align:center;
}

/* ---- 記録済み写真＋端末保存ボタン ---- */
.shot{position:relative; margin-top:8px}
/* 画像に重ねると見落とされる（実機で長押しメニューを使われてしまった）ので、
   写真の下に独立した行として置く。 */
.shot__acts{display:flex; gap:8px; margin-top:6px}
.shot__btn{
  flex:1; appearance:none; border:1.5px solid var(--navy); border-radius:10px; padding:10px 8px;
  background:#fff; color:var(--navy); font:inherit; font-size:13px; font-weight:700;
  cursor:pointer;
}
.shot__btn:active{background:#eef2f8}

/* ---- 端末の対応状況 ---- */
.diag{margin-top:6px}
.diag__row{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:13px}
.diag__row span{color:var(--muted)}
.diag__advice{margin:10px 0 0; font-size:12.5px; color:#8a5a00; background:#fff6e5; border-left:3px solid var(--amber); padding:9px 11px; border-radius:0 6px 6px 0; line-height:1.65}


/* ---- 更新のお知らせ ---- */
.updatebar{
  position:fixed; left:12px; right:12px; bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:1500; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--navy); color:#fff; padding:12px 14px; border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.3); font-size:13.5px; font-weight:700;
}
.updatebar__btn{
  appearance:none; border:0; border-radius:99px; padding:9px 16px;
  background:var(--amber); color:#3a2600; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  white-space:nowrap;
}
.updatebar__btn:disabled{opacity:.7}


/* ---- 表示レベルの切替 ---- */
.levels{display:flex; gap:6px; padding:8px 12px; background:#fff; border-bottom:1px solid var(--line)}
.lvbtn{
  flex:1; appearance:none; border:1.5px solid var(--line); border-radius:99px; padding:8px 0;
  background:#fff; color:var(--muted); font:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.lvbtn.is-active{border-color:var(--navy); background:var(--navy); color:#fff}
.progress__sub{margin:4px 0 0; font-size:11.5px; opacity:.8}
.sheet__sublabel{margin:2px 0 0; font-size:12px; color:var(--muted)}
.chome{margin:2px 0 0; font-size:13px; font-weight:700; color:var(--navy)}
.visit__addr{margin:4px 0 0; font-size:12.5px; color:var(--navy); font-weight:700}
.row__pref{display:block; font-size:11px; color:var(--muted); font-weight:400}


/* ---- 一覧の絞り込み ---- */
.filter{display:flex; gap:10px; align-items:center; padding:10px 12px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:45px; z-index:500}
.filter input[type=search]{
  flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  font:inherit; font-size:16px; background:#fff; color:var(--ink);
}
.filter__only{display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); white-space:nowrap}


/* ---- 地方で絞る ---- */
.regions{
  display:flex; gap:6px; overflow-x:auto; padding:9px 12px 7px;
  background:#fff; border-bottom:1px solid var(--line);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.regions::-webkit-scrollbar{display:none}
.rgbtn{
  flex:0 0 auto; appearance:none; border:1.5px solid var(--line); border-radius:99px;
  padding:7px 14px; background:#fff; color:var(--muted);
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.rgbtn.is-active{border-color:var(--navy); background:var(--navy); color:#fff}

/* ---- 一覧の見出し ---- */
.group{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:14px 2px 6px; padding-bottom:5px; border-bottom:2px solid var(--navy);
  font-size:13.5px; font-weight:700; color:var(--navy);
}
.group small{font-size:11.5px; font-weight:700; color:var(--muted)}
.more{display:block; margin:14px auto 4px}


/* ---- 記録の編集 ---- */
.linkbtn--edit{color:var(--navy); margin-right:12px}
.editbar{
  display:none; align-items:center; justify-content:space-between; gap:10px;
  margin:10px 0 0; padding:9px 12px; border-radius:10px;
  background:#fff6e5; border-left:3px solid var(--amber);
  font-size:12.5px; font-weight:700; color:#8a5a00;
}
.editbar.is-on{display:flex}
.editbar__btn{
  appearance:none; border:1.5px solid #8a5a00; border-radius:99px; padding:5px 12px;
  background:transparent; color:#8a5a00; font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.visit__head{gap:10px}

/* ---- 記録タブ ---- */
.hist-summary{margin:0; padding:9px 14px 0; font-size:12.5px; color:var(--muted); font-weight:700}
.hcard{
  border:1px solid var(--line); border-radius:12px; background:#fff;
  padding:12px 14px; margin:8px 0; cursor:pointer;
}
.hcard:active{background:#fbfaf7}
.hcard__head{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.hcard__head b{font-size:15px; color:var(--navy)}
.hcard__head small{font-size:12px; color:var(--muted); white-space:nowrap}
.hcard__meta{margin:3px 0 0; font-size:12px; color:var(--muted)}
.hcard__memo{margin:7px 0 0; font-size:13.5px; white-space:pre-wrap; line-height:1.65}
.hcard__photos{display:flex; gap:6px; margin-top:9px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.hcard__photos::-webkit-scrollbar{display:none}
.hcard__photos img{
  flex:0 0 auto; width:96px; height:96px; object-fit:cover;
  border-radius:8px; border:1px solid var(--line);
}
.hrow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; margin-bottom:6px; background:#fff;
  border:1px solid var(--line); border-radius:10px; font-size:13.5px;
}
.hrow__name{font-weight:700; color:var(--ink)}
.hrow small{color:var(--muted); font-size:11.5px}


/* ---- 目的タグ ---- */
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.tagbtn{
  appearance:none; border:1.5px solid var(--line); border-radius:99px;
  padding:7px 12px; background:#fff; color:var(--muted);
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; line-height:1;
}
.tagbtn span{font-size:15px}
.tagbtn.is-active{border-color:var(--navy); background:var(--navy); color:#fff}


/* ---- 記録のピン ----
   しずく型に回転させると中の絵文字まで傾くので、円形にして下に小さな足を付ける */
.pin{background:none; border:0}
.pin__mark{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:#fff; border:2px solid var(--navy);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  font-size:16px; line-height:1;
}
.pin__mark::after{
  content:''; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:7px solid var(--navy);
}
/* ---- 表示パネル（地図に出すもの／地図の種類） ---- */
/* ボタンを地図の上に並べ続けると右端が埋まるので、押したときだけ開く1枚にまとめた */
/* 右下ではなく左寄りの下に出す。右下に重ねると、開いている間だけ
   「ここを記録」が押せなくなり、押しても無反応に見える。
   ★ただし左端いっぱいには寄せない★ left:14px だと Leaflet の拡大・縮小ボタン
   （左上・幅44pxまで）に「地図に出すもの」の見出しが隠れていた。52px から始める。 */
.layers{
  position:absolute; left:52px; bottom:26px; z-index:600;
  width:min(220px, calc(100% - 122px)); max-height:calc(100% - 52px); overflow-y:auto;
  background:#fff; border-radius:14px; padding:8px;
  box-shadow:0 8px 28px rgba(20,30,50,.28); border:1px solid var(--line);
}
.layers__h{margin:4px 6px 6px; font-size:11.5px; font-weight:700; color:var(--muted)}
.layers__h+.layers__h, .layers__row+.layers__h{margin-top:10px}
.layers__row{
  appearance:none; width:100%; border:0; background:none; font:inherit; font-size:13.5px;
  font-weight:700; color:var(--navy); text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:8px; padding:9px 8px; border-radius:9px;
  /* 幅を詰めたときに「ランドマーク」が2行に折れるので、折り返さない */
  white-space:nowrap;
}
.layers__row:active{background:var(--bg)}
.layers__row>span{font-size:16px; width:20px; text-align:center; flex:0 0 auto}
.layers__row>small{margin-left:auto; font-size:10.5px; font-weight:400; color:var(--muted)}
/* チェックは行の右端。文字だけだと「今どっちなのか」が読み取れない */
.layers__row::after{
  content:'✓'; margin-left:auto; font-size:14px; color:var(--navy); flex:0 0 auto;
}
.layers__row.is-off{color:var(--muted)}
.layers__row.is-off::after{content:''; width:14px; height:14px; border:1.5px solid var(--line); border-radius:4px}
.layers__styles{display:flex; gap:6px; padding:0 4px 4px}
.mstyle{
  flex:1 1 0; appearance:none; border:1.5px solid var(--line); border-radius:9px;
  padding:8px 4px; background:#fff; color:var(--muted);
  font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.mstyle.is-on{border-color:var(--navy); background:var(--navy); color:#fff}

/* ---- まとめたピン ---- */
/* 近いピンは丸1つにまとめる。全国表示だと数百のピンが重なって数が読めない */
.cpin{background:none; border:0}
.cpin>b{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:13px; font-weight:700;
  border:2.5px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.cpin--big>b{width:46px; height:46px; font-size:14px}


/* ---- 一覧の折りたたみ ---- */
.group--fold{cursor:pointer; user-select:none; -webkit-user-select:none}
.group--fold:active{opacity:.7}
.group__label{display:inline-flex; align-items:center; gap:7px}
.group__caret{
  width:0; height:0; display:inline-block;
  border-left:6px solid var(--navy);
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  transition:transform .15s ease;
}
.group--fold.is-open .group__caret{transform:rotate(90deg)}
.group__body{margin-bottom:4px}


/* ---- 追加の入力欄 ---- */
.row3{display:flex; gap:12px; align-items:flex-end}
.mini{flex:1; display:block}
.mini>small, .mini2>small{display:block; font-size:11.5px; color:var(--muted); font-weight:700; margin-bottom:4px}
.mini2{display:block; margin:10px 0 0}
.mini2 input{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  font:inherit; font-size:16px; background:#fff; color:var(--ink);
}
.yen{display:flex; align-items:center; gap:6px}
.yen input{
  width:100%; min-width:0; border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  font:inherit; font-size:16px; text-align:right;
}
.yen i{font-style:normal; font-size:13px; color:var(--muted)}
.stars{display:flex; gap:2px}
.star{
  appearance:none; border:0; background:none; cursor:pointer; padding:2px;
  font-size:22px; line-height:1; color:var(--line);
}
.star.is-on{color:var(--amber)}
.check{display:flex; align-items:center; gap:7px; margin-top:10px; font-size:13.5px; font-weight:700; color:var(--ink)}

/* ---- 折りたたみ（場所の情報） ---- */
.folder{
  appearance:none; width:100%; text-align:left; cursor:pointer;
  border:1px dashed var(--line); border-radius:10px; padding:11px 13px;
  background:#fcfcfa; color:var(--navy); font:inherit; font-size:13px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.folder__caret{
  width:0; height:0; display:inline-block;
  border-left:6px solid var(--navy);
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  transition:transform .15s ease;
}
.folder.is-open .folder__caret{transform:rotate(90deg)}
.folder__body{padding:4px 2px 0}
.days{display:flex; flex-wrap:wrap; gap:5px}
.day{
  appearance:none; border:1.5px solid var(--line); border-radius:8px;
  width:38px; height:36px; background:#fff; color:var(--muted);
  font:inherit; font-size:13px; font-weight:700; cursor:pointer; padding:0;
}
.day--wide{width:auto; padding:0 12px}
.day.is-on{border-color:var(--danger); background:var(--danger); color:#fff}


/* ---- 記録カードの追加情報 ---- */
.hcard__place{margin:4px 0 0; font-size:14px; font-weight:700; color:var(--ink)}
.hcard__badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.badge{
  display:inline-block; padding:3px 9px; border-radius:99px;
  background:#eef2f8; color:var(--navy); font-size:11.5px; font-weight:700;
}
.badge--star{background:#fff6e5; color:#8a5a00; letter-spacing:1px}
.badge--revisit{background:#e9f6ec; color:#1e6b32}
.hcard__place-info{margin-top:8px; border-top:1px dashed var(--line); padding-top:7px}
.hcard__place-info div{display:flex; gap:8px; font-size:12.5px; padding:2px 0}
.hcard__place-info span{flex:0 0 44px; color:var(--muted)}
.hcard__place-info b{font-weight:400; color:var(--ink)}
.hcard__place-info a{color:var(--navy); word-break:break-all}


/* ---- 御朱印 ---- */
.hcard__goshuin{margin:4px 0 0; font-size:13px; color:var(--navy); font-weight:700}
.badge--goshuin{background:#f3ecff; color:#5b3ea8}


/* ---- ランドマーク（記録のピンより控えめに） ---- */
.lmark{background:none; border:0}
.lmark__mark{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1.5px solid rgba(44,62,98,.45);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  font-size:13px; line-height:1;
}


/* ---- 記録カードの編集ボタン ---- */
.hcard__right{display:inline-flex; align-items:center; gap:10px; white-space:nowrap}
.hcard__edit{
  appearance:none; border:1.5px solid var(--navy); border-radius:99px;
  padding:4px 12px; background:#fff; color:var(--navy);
  font:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
}
.hcard__edit:active{background:#eef2f8}

/* ---- ランドマークの種類フィルタ ---- */
.mkinds{
  display:flex; gap:6px; overflow-x:auto; padding:8px 12px;
  background:#fff; border-bottom:1px solid var(--line); scrollbar-width:none;
}
.mkinds::-webkit-scrollbar{display:none}
.mkchip{
  flex:0 0 auto; appearance:none; border:1.5px solid var(--line); border-radius:99px;
  padding:6px 12px; background:#fff; color:var(--muted);
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; line-height:1;
}
.mkchip span{font-size:14px}
.mkchip.is-on{border-color:var(--navy); background:var(--navy); color:#fff}


/* ヒント内の強調 */
.hint b{color:var(--navy)}


/* ---- 移動の線の日切替 ---- */
.ldays{border-bottom:1px solid var(--line)}
.ldchip{
  flex:0 0 auto; appearance:none; border:1.5px solid var(--line); border-radius:99px;
  padding:6px 13px; background:#fff; color:var(--muted);
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.ldchip.is-on{border-color:var(--amber); background:var(--amber); color:#3a2600}

/* ---- ピンの吹き出し ---- */
.pinpop{min-width:170px; max-width:230px}
.pinpop__title{display:block; font-size:14.5px; color:var(--navy); line-height:1.4}
.pinpop__sub{margin-top:3px; font-size:11.5px; color:var(--muted)}
.pinpop__date{margin-top:2px; font-size:11.5px; color:var(--muted)}
.pinpop__goshuin{margin-top:6px; font-size:12.5px; font-weight:700; color:var(--navy)}
.pinpop__memo{margin-top:6px; font-size:12.5px; white-space:pre-wrap; line-height:1.6}
.pinpop__edit{width:100%; margin-top:10px; padding:8px 0; font-size:12.5px}

/* ---- バックアップの状況 ---- */
.bkup{margin:0 0 10px; font-size:13px; font-weight:700; line-height:1.6}
.bkup.is-warn{color:#a8410f}
.bkup.is-ok{color:#2f6b3f}
.muted.is-warn{color:#a8410f; font-weight:700}
.btn--slim{padding:7px 14px; font-size:12.5px; margin:2px 0 8px}

/* ---- 訪れた日時 ---- */
.when{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.when input[type=date]{flex:1 1 150px; min-width:140px}
.when input[type=time]{flex:0 1 110px; min-width:100px}

/* ---- 同じ場所をまとめたピン ---- */
.pin{position:relative}
.pin__count{
  position:absolute; top:-4px; right:-6px; min-width:17px; height:17px; padding:0 4px;
  border-radius:99px; background:var(--navy); color:#fff; border:1.5px solid #fff;
  font-size:10.5px; line-height:14px; text-align:center; font-weight:700;
}
.pinpop__times{margin:6px 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
.pinpop__time{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:5px 0; border-bottom:1px solid var(--line); font-size:12.5px;
}
/* 日時の下に、その回の金額・御朱印を小さく添える */
.pinpop__timeMain{display:flex; flex-direction:column; gap:1px; min-width:0}
.pinpop__when{line-height:1.4}
.pinpop__meta{font-size:11px; color:var(--muted); line-height:1.4}
.pinpop__more{margin-top:5px; font-size:11.5px; color:var(--muted)}
.visit__time{font-weight:700; color:var(--muted); font-size:12.5px}

/* ---- 地図の場所検索 ---- */
/* z-index は Leaflet のコントロール(1000)より上。指定しないと、候補の上に
   地図の +/- ボタンが描かれて読めなくなる（実際にそうなっていた）。 */
.mapsearch{position:relative; z-index:1100; margin:0 0 8px}
.mapsearch input{
  width:100%; padding:9px 34px 9px 12px; font-size:14px;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}
.mapsearch input:focus{outline:none; border-color:var(--navy)}
.mapsearch__x{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:0; background:transparent;
  color:var(--muted); font-size:17px; line-height:1; cursor:pointer;
}
.mapsearch__hits{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:600;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 6px 20px rgba(20,30,50,.14); max-height:330px; overflow:auto;
}
.mapsearch__hit{
  display:block; width:100%; text-align:left; padding:9px 12px; border:0;
  background:transparent; border-bottom:1px solid var(--line);
  font-size:13.5px; color:var(--ink); cursor:pointer;
}
.mapsearch__hit:last-child{border-bottom:0}
.mapsearch__hit:hover, .mapsearch__hit:focus{background:var(--bg)}
.mapsearch__hit small{display:block; color:var(--muted); font-size:11.5px; margin-top:1px}
.mapsearch__none{padding:10px 12px; font-size:12.5px; color:var(--muted)}

/* 「インターネットでも探す」の行。押されたときだけ通信するので、
   通信することが行を見ただけで分かるようにしておく。 */
.mapsearch__net{
  /* 一番下に固定する。候補が長いとスクロールしないと出てこず、
     「探す手段がある」ことに気づけない。 */
  position:sticky; bottom:0;
  display:block; width:100%; text-align:left; padding:10px 12px;
  border:0; border-top:1px solid var(--line); background:var(--bg);
  font:inherit; font-size:13px; font-weight:700; color:var(--navy); cursor:pointer;
}
.mapsearch__net:disabled{color:var(--muted); font-weight:400; cursor:default}
.mapsearch__net small{display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:2px}
.mapsearch__head{
  padding:7px 12px; font-size:11.5px; font-weight:700; color:var(--muted);
  background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
/* 探した結果には「記録」を並べる。名前を打ち直さずにそのまま記録できるように。 */
.mapsearch__row{display:flex; align-items:stretch; border-bottom:1px solid var(--line)}
.mapsearch__row:last-child{border-bottom:0}
.mapsearch__row .mapsearch__hit{flex:1 1 auto; min-width:0; width:auto; border-bottom:0}
.mapsearch__rec{
  flex:0 0 auto; align-self:center; margin:0 8px;
  padding:6px 12px; border:1.5px solid var(--navy); border-radius:99px;
  background:#fff; color:var(--navy); font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.mapsearch__rec:active{background:var(--bg)}
/* 探した場所に「もう行った」を出す。探し直したときに二重に記録しないため。 */
.visit__when{margin:2px 0 0; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.mapsearch__been{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px;
  background:var(--amber); color:#fff; font-size:10.5px; font-weight:700; vertical-align:middle;
}

/* ---- 「この範囲で探す」 ---- */
.searcharea{
  position:absolute; left:50%; transform:translateX(-50%); top:10px; z-index:500;
  padding:8px 16px; font-size:13px; font-weight:700;
  border:1px solid var(--navy); border-radius:999px;
  background:#fff; color:var(--navy); cursor:pointer;
  box-shadow:0 3px 12px rgba(20,30,50,.18);
}
.searcharea:disabled{opacity:.6; cursor:default}

/* ---- 選んで書き出す ---- */
.picktags{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.pktag{
  appearance:none; border:1.5px solid var(--line); border-radius:99px;
  padding:6px 11px; background:#fff; color:var(--muted);
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; line-height:1;
}
.pktag.is-on{border-color:var(--navy); background:var(--navy); color:#fff}
.pktag small{font-weight:400; opacity:.85}
.pickopts{display:flex; flex-wrap:wrap; gap:10px 16px; margin:10px 0 8px}
.pickopts label{display:inline-flex; align-items:center; gap:6px; font-size:13px; cursor:pointer}
.pickcount{margin:0 0 10px; font-size:13px; font-weight:700; color:var(--navy)}
.pickcount.is-none{color:var(--muted); font-weight:400}

/* ---- 集めるリスト ---- */
.collect-lead{margin:0; padding:10px 14px; font-size:12.5px; color:var(--muted);
  background:#fff; border-bottom:1px solid var(--line)}
.collect-mine{padding:6px 12px 20px}
.collect-mine h3{margin:16px 0 4px; font-size:14px; color:var(--navy)}
.collect-mine .muted{margin:0 0 8px; font-size:12px}

.ccard{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  appearance:none; border:0; border-bottom:1px solid var(--line);
  background:#fff; padding:12px 14px; font:inherit; cursor:pointer;
}
.ccard:active{background:var(--bg)}
.ccard__mark{font-size:22px; flex:0 0 auto; width:28px; text-align:center}
.ccard__body{flex:1 1 auto; min-width:0}
.ccard__body b{display:block; font-size:14px; color:var(--ink)}
.ccard__body small{display:block; font-size:11.5px; color:var(--muted); margin-top:3px}
.ccard__bar{display:block; height:6px; border-radius:99px; background:var(--line); margin-top:6px; overflow:hidden}
.ccard__bar i{display:block; height:100%; background:var(--amber); border-radius:99px}

.cdet__head{display:flex; justify-content:space-between; padding:8px 12px;
  background:#fff; border-bottom:1px solid var(--line)}
.cdet__title{margin:14px 14px 6px; font-size:17px; color:var(--navy)}
#panel-collect .prog{padding:0 14px}
#panel-collect .prog__bar{height:8px; border-radius:99px; background:var(--line); overflow:hidden}
#panel-collect .prog__bar span{display:block; height:100%; background:var(--amber); border-radius:99px}
#panel-collect .prog__text{margin:6px 0 0; font-size:13px; font-weight:700; color:var(--navy)}
#cdet-note{margin:6px 14px 10px; font-size:12px}
.cdet__acts{display:flex; gap:10px; padding:14px; flex-wrap:wrap}

/* まだ行っていない所をはっきり、行った所は薄く。目的は「次どこに行くか」 */
.citem{display:flex; align-items:stretch; border-bottom:1px solid var(--line); background:#fff}
.citem__go{
  flex:1 1 auto; min-width:0; text-align:left; appearance:none; border:0; background:none;
  font:inherit; font-size:14px; color:var(--ink); padding:11px 12px; cursor:pointer;
  display:flex; align-items:center; gap:8px;
}
.citem__go:active{background:var(--bg)}
/* 丸は押せる。手で「行った」を付けるため（昔行った分は記録が無い） */
.citem__chk{
  flex:0 0 auto; align-self:center; margin-left:12px;
  width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; background:#fff; cursor:pointer; padding:0;
}
.citem.is-done .citem__chk{background:var(--amber); border-color:var(--amber)}
/* 手で付けたものは、記録から見つかったものと見分けが付くようにする */
.citem .citem__chk.is-hand{background:#fff; color:var(--amber); border-color:var(--amber)}
.citem.is-done .citem__go{color:var(--muted)}
.citem__no{
  flex:0 0 auto; min-width:26px; font-size:11.5px; font-weight:700;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.citem__mine{margin-left:6px; font-size:10.5px; font-style:normal; color:var(--amber); font-weight:700}
/* 位置が確かでない項目。資料に番地が無く、地図にも載っていない小さな寺がある */
.citem__rough{
  margin-left:6px; padding:1px 6px; border-radius:99px; font-size:10px;
  font-style:normal; font-weight:700; color:var(--muted);
  background:var(--line); vertical-align:middle;
}
.citem__del{
  flex:0 0 auto; align-self:center; margin:0 10px; width:28px; height:28px;
  border:0; border-radius:50%; background:none; color:var(--muted);
  font-size:18px; line-height:1; cursor:pointer;
}
.citem__del:active{background:var(--bg)}

/* 地図に出しているリストを消すボタン。出しっぱなしで消し方が分からなくならないように */
.colclear{
  position:absolute; left:50%; transform:translateX(-50%); top:10px; z-index:500;
  padding:8px 16px; font-size:12.5px; font-weight:700;
  border:1px solid var(--navy); border-radius:999px;
  background:var(--navy); color:#fff; cursor:pointer;
  box-shadow:0 3px 12px rgba(20,30,50,.25); max-width:calc(100% - 28px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 集めるリストの区分見出し。巡礼は地域ごとに無数にあるので、ただ並べると探せない */
.cgroup{
  margin:0; padding:12px 14px 6px; font-size:11.5px; font-weight:700;
  color:var(--muted); background:var(--bg); border-bottom:1px solid var(--line);
}
.ccard__area{
  margin-left:8px; padding:1px 7px; border-radius:99px;
  background:var(--bg); border:1px solid var(--line);
  font-size:10.5px; font-style:normal; font-weight:700; color:var(--muted);
  vertical-align:middle;
}

/* ---- 使い方 ---- */
/* 機能が増えて、開いただけでは気づけないものが多くなった。
   ただ最初から全部開いていると設定が読めなくなるので、たたんでおく。 */
.howto summary{
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; list-style:none; gap:10px;
}
.howto summary::-webkit-details-marker{display:none}
.howto summary h2{margin:0}
.howto__more{
  flex:0 0 auto; padding:4px 12px; border:1.5px solid var(--navy); border-radius:99px;
  font-size:12px; font-weight:700; color:var(--navy);
}
.howto[open] .howto__more::after{content:'';}
.howto[open] .howto__more{color:var(--muted); border-color:var(--line)}
.howto[open] .howto__more::before{content:'とじる'}
.howto[open] .howto__more{font-size:0}
.howto[open] .howto__more::before{font-size:12px}
.howto h3{margin:18px 0 6px; font-size:14px; color:var(--navy)}
.howto h3.warn-h{color:var(--danger)}
.howto ul{margin:0; padding-left:1.2em}
.howto li{margin:5px 0; font-size:13px; line-height:1.75}
.howto .warn-i{color:var(--danger); font-style:normal}
/* リストの中身の一番下にも「一覧へ戻る」「地図に出す」を置く。
   100件あると上まで戻るのが大変なため。 */
.cdet__head--bottom{border-bottom:0; border-top:1px solid var(--line)}
/* 記録が0件のタグ。選べるが、あることが分かる程度に薄くする */
.pktag.is-zero{opacity:.5}
.pktag.is-zero.is-on{opacity:1}

/* ---- 移動記録モード ---- */
/* 記録中であることが常に見えていないと、切り忘れて電池を食う */
/* ★地図の下ではなく右上に置く★
   下いっぱいに広げていたら「ここを記録」ボタン(.fabs, bottom:26px)に重なり、
   記録中は登録そのものができなくなっていた。幅も内容ぶんに縮めてある。
   左上は Leaflet の拡大・縮小ボタンの場所なので空けておく（左端に 52px の余白）。 */
.trackbar{
  position:absolute; right:10px; top:10px; z-index:520;
  display:flex; align-items:center; gap:7px; max-width:calc(100% - 62px);
  background:var(--navy); color:#fff; padding:6px 8px 6px 11px; border-radius:99px;
  box-shadow:0 4px 14px rgba(0,0,0,.28); font-size:12px; line-height:1.3;
}
.trackbar b{font-size:12px; font-weight:700; white-space:nowrap}
.trackbar small{
  font-size:11px; opacity:.85; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.trackbar__dot{
  flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:#e8a33d;
  animation:trackpulse 1.6s ease-in-out infinite;
}
@keyframes trackpulse{0%,100%{opacity:1}50%{opacity:.25}}
.trackbar__stop{
  flex:0 0 auto; margin-left:2px; padding:3px 11px; border-radius:99px;
  background:#fff; color:var(--navy); font-style:normal; font-weight:700;
  font-size:11.5px; cursor:pointer; white-space:nowrap;
}
/* 旧国名。一の宮は「どの国の一宮か」がそのまま意味になる */
.citem__kuni{
  margin-left:8px; padding:1px 7px; border-radius:99px;
  background:var(--bg); border:1px solid var(--line);
  font-size:10.5px; font-style:normal; font-weight:700; color:var(--muted);
}

/* 駅の選び方の切り替え（県別／路線別／廃駅）。
   地図の「都道府県／市区町村」と同じ見た目にそろえてある */
.stseg{display:flex; gap:6px; margin:10px 0 4px}
.stseg__b{
  flex:1 1 0; padding:9px 4px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--muted); font-size:13px; font-weight:700; cursor:pointer;
}
.stseg__b.is-on{background:var(--navy); border-color:var(--navy); color:#fff}
/* 県・路線の1行。数は右端にそろえる（探すときに目が滑らないように） */
.strow{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 12px; border:0; border-bottom:1px solid var(--line);
  background:none; text-align:left; font-size:14px; cursor:pointer;
}
.strow:hover{background:var(--cream)}
.strow__n{flex:1 1 auto; font-weight:700; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.strow__c{flex:0 0 auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.strow__c b{color:var(--amber)}
.strow__p{flex:0 0 auto; font-size:11px; color:var(--muted)}

/* 記録タブのカードは全体が押せる。押せることが分かるように指の形にする */
.hcard.is-tap{cursor:pointer}
.hcard.is-tap:active{background:var(--cream)}

/* 記録を見るだけの画面。入力欄が無いぶん、読みやすさだけを考えた並び */
#viewer-body{margin:6px 0 16px}
.vrow{display:flex; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line)}
.vrow__k{flex:0 0 88px; font-size:12px; color:var(--muted); padding-top:1px}
.vrow__v{flex:1 1 auto; font-size:14px; font-weight:700; color:var(--ink);
  word-break:break-word}
.vmemo{
  margin:12px 0 0; padding:11px 12px; background:var(--bg); border-radius:10px;
  font-size:14px; line-height:1.7; white-space:pre-wrap;
}
.vshots{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.vshots img{width:calc(50% - 4px); border-radius:10px; display:block}

/* SNSは行を足せる。1行ぶんの入力欄と、その行を消す× */
.snsrow{display:flex; gap:6px; align-items:center; margin-bottom:6px}
.snsrow input{flex:1 1 auto; min-width:0}
.snsrow__x{
  flex:0 0 auto; width:30px; height:30px; border:1px solid var(--line);
  border-radius:8px; background:#fff; color:var(--muted); font-size:16px;
  line-height:1; cursor:pointer;
}
/* 出かけていない記録は、一覧でひと目で分かるようにしておく */
.badge--athome{background:var(--line); color:var(--muted)}

/* 割れない束の中身。1行1か所、押すとその場所の吹き出しへ */
.cpop{min-width:200px}
.cpop__h{display:block; font-size:12px; color:var(--muted); margin:0 0 6px}
.cpop__row{
  display:flex; align-items:center; gap:8px; width:100%; padding:8px 4px;
  border:0; border-top:1px solid var(--line); background:none; text-align:left;
  font:inherit; font-size:13.5px; font-weight:700; color:var(--navy); cursor:pointer;
}
.cpop__row:active{background:var(--cream)}
.cpop__n{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cpop__row small{flex:0 0 auto; font-weight:400; color:var(--muted)}

/* 集めるの見出しは押して畳める。畳んだ印は左の三角 */
.cgroup--btn{
  display:flex; align-items:center; gap:6px; width:100%; border:0; background:none;
  font:inherit; text-align:left; cursor:pointer;
}
.cgroup__caret{
  width:0; height:0; border-left:6px solid var(--muted);
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  transform:rotate(90deg); transition:transform .15s;
}
.cgroup--btn.is-folded .cgroup__caret{transform:rotate(0deg)}
.cgroup__body{margin-bottom:4px}

/* よくある質問。質問だけ並べ、押した分だけ開く */
.qa{border-top:1px solid var(--line); padding:2px 0}
.qa summary{
  cursor:pointer; padding:10px 2px; font-size:14px; font-weight:700; color:var(--navy);
  list-style:none; display:flex; gap:8px; align-items:flex-start;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:'Q'; flex:0 0 auto; color:var(--amber); font-weight:900}
.qa[open] summary::before{content:'A'}
.qa p, .qa ol{margin:0 0 10px 22px; font-size:13.5px; line-height:1.75}
.qa ol{padding-left:18px}
.qa li{margin-bottom:6px}
.qa code{background:var(--bg); padding:1px 5px; border-radius:5px; font-size:12.5px}