:root {
  --bg: #f6f4ee;
  --panel: #ffffff;
  --ink: #1d2a26;
  --muted: #62706b;
  --line: #e2ded3;
  --accent: #1f6f54;      /* 行った */
  --accent-soft: #e3f1eb;
  --todo: #d9622b;        /* まだ */
  --me: #2b6fe0;          /* 現在地 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131917;
    --panel: #1b2320;
    --ink: #e8eeeb;
    --muted: #9aa8a3;
    --line: #2c3733;
    --accent: #4fc39a;
    --accent-soft: #1f3a31;
    --todo: #f08a54;
    --me: #6ea3ff;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
a { color: inherit; }

.app { display: grid; grid-template-columns: 380px 1fr; height: 100dvh; }
.panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border-right: 1px solid var(--line);
}
.mapwrap { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--bg); }

.head { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
h1 { margin: 0; font-size: 1.25rem; letter-spacing: .04em; }
.sub { margin: 2px 0 12px; color: var(--muted); font-size: .8rem; }
.progress-num { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.progress-num strong { font-size: 1.7rem; color: var(--accent); line-height: 1; }
.progress-num .pct { margin-left: auto; color: var(--muted); }
.bar { height: 8px; margin-top: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width .3s; }

.controls { padding: 12px 16px; display: grid; gap: 10px; border-bottom: 1px solid var(--line); }
input[type=search], select {
  width: 100%; min-height: 40px; padding: 8px 12px;
  font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
}
.row { display: flex; gap: 8px; }
.row select { width: auto; flex: none; }
.seg { display: flex; flex: 1; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button {
  flex: 1; min-height: 40px; padding: 0 6px; font: inherit; color: var(--muted);
  background: var(--bg); border: 0; border-left: 1px solid var(--line); cursor: pointer;
}
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--accent); color: #fff; font-weight: 600; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 5px 10px; font: inherit; font-size: .82rem; color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.status { margin: 0; padding: 6px 16px; font-size: .8rem; color: var(--muted); min-height: 1.9em; }
.list { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; flex: 1; min-height: 0; }
.group { position: sticky; top: 0; z-index: 1; padding: 6px 8px; font-size: .78rem; color: var(--muted); background: var(--panel); font-variant-numeric: tabular-nums; }
.item { display: flex; align-items: stretch; border-radius: 10px; }
.item:hover, .item.active { background: var(--accent-soft); }
.item label { display: grid; place-items: center; width: 48px; flex: none; cursor: pointer; }
.item input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); cursor: pointer; }
.item .go {
  flex: 1; min-width: 0; padding: 8px 8px 8px 0; text-align: left;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
.item .name { display: block; font-weight: 600; }
.item.done .name { color: var(--accent); }
.item .meta { display: block; font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .dist { align-self: center; padding-right: 10px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item .vdate {
  align-self: center; flex: none; margin-right: 8px; min-height: 36px; padding: 4px 6px;
  font: inherit; font-size: .8rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; font-variant-numeric: tabular-nums;
}
.empty { padding: 24px 16px; color: var(--muted); text-align: center; }

.foot { padding: 8px 16px; font-size: .72rem; color: var(--muted); border-top: 1px solid var(--line); }

.locate {
  position: absolute; right: 12px; bottom: 28px; z-index: 500;
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  font: inherit; font-weight: 600; color: var(--me); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.locate[hidden] { display: none; }
.locate.on { color: #fff; background: var(--me); border-color: var(--me); }
.maperror { position: absolute; inset: 0; margin: 0; padding: 24px; display: grid; place-items: center; text-align: center; color: var(--muted); }
.maperror[hidden] { display: none; }

/* 地図のピン */
.pin { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--todo); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); display: grid; place-items: center; }
.pin::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.pin.done { background: var(--accent); }
.pin.done::after { width: 10px; height: 5px; border-radius: 0; background: none; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(0deg) translate(1px, -1px); }
.me-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--me); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--me), 0 1px 4px rgba(0,0,0,.4); }

.leaflet-popup-content { margin: 12px 14px; font: inherit; font-size: 14px; line-height: 1.5; min-width: 200px; }
.pop h2 { margin: 0 0 2px; font-size: 1rem; }
.pop p { margin: 2px 0; color: #55615d; font-size: .82rem; }
.pop .popcheck { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 8px 10px; border-radius: 8px; background: #eef5f1; color: #1d2a26; font-weight: 600; cursor: pointer; }
.pop .popcheck input { width: 20px; height: 20px; accent-color: #1f6f54; }
.pop .popdate { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .85rem; color: #55615d; }
.pop .popdate input { min-height: 34px; padding: 4px 6px; font: inherit; color: #1d2a26; background: #fff; border: 1px solid #cfd8d3; border-radius: 8px; }
.pop .links { display: flex; gap: 12px; font-size: .85rem; }
.pop .links a { color: #1f6f54; }
.pop .around { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2ded3; font-size: .85rem; }
.pop .around a { color: #b4521f; }
.pop .around .pr { flex-basis: 100%; font-size: .72rem; color: #8a948f; }

/* パネルの切り替え(駅リスト / おすすめルート) */
.mode { margin-top: 12px; }
.listview, .routeview { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.routeview { overflow-y: auto; }
body[data-panel="list"] .routeview, body[data-panel="route"] .listview { display: none; }

.lead { margin: 0; font-size: .85rem; color: var(--muted); }
.field { display: grid; gap: 4px; }
.field .lbl { font-size: .78rem; color: var(--muted); }
.field .val { font-size: .85rem; font-weight: 600; }
.check { display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.ghost, .primary {
  min-height: 42px; padding: 0 14px; font: inherit; font-weight: 600; border-radius: 10px; cursor: pointer;
}
.ghost { flex: 1; color: var(--ink); background: var(--bg); border: 1px solid var(--line); }
.primary { color: #fff; background: var(--accent); border: 0; }
.primary:disabled { opacity: .45; cursor: default; }
.routemsg { margin: 0; font-size: .85rem; color: var(--muted); }
.routemsg:empty { display: none; }
.routemsg.error { color: var(--todo); }

#routeResult { padding: 0 16px 16px; }
#routeResult:empty { display: none; }
.summary { padding: 12px 0; font-size: .85rem; color: var(--muted); }
.summary p { margin: 2px 0; }
.summary .big { font-size: 1rem; color: var(--ink); }
.summary .big strong { font-size: 1.4rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.summary .warn { color: var(--todo); }
.stops { list-style: none; margin: 0; padding: 0; }
.stops li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.stops .n, .stop-num {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  font-size: .78rem; font-weight: 700; color: #fff; background: var(--me); font-variant-numeric: tabular-nums;
}
.stop-num { width: 22px; height: 22px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.stops .go { flex: 1; min-width: 0; padding: 4px 0; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.stops .name { display: block; font-weight: 600; }
.stops .meta { display: block; font-size: .78rem; color: var(--muted); }
.stops .at { font-size: .8rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.back { margin: 0; padding: 10px 0; font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); }
.gmaps { display: grid; gap: 8px; margin: 8px 0; }
.gmaps a {
  display: grid; place-items: center; min-height: 44px; font-weight: 600; text-decoration: none;
  color: #fff; background: var(--me); border-radius: 10px;
}
#clearRoute { width: 100%; }
.start-pin {
  display: grid; place-items: center; width: 44px; height: 24px; border-radius: 12px;
  font-size: 12px; font-weight: 700; color: #fff; background: #1d2a26; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.pickhint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 600; margin: 0;
  padding: 8px 14px; font-size: .85rem; font-weight: 600; color: #fff; background: var(--me);
  border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.3); white-space: nowrap;
}
.pickhint[hidden] { display: none; }

.backup { border-top: 1px solid var(--line); padding: 0 16px; font-size: .85rem; }
.backup summary { padding: 10px 0; cursor: pointer; font-weight: 600; }
.backup summary span { font-weight: 400; color: var(--muted); }
.backup p { margin: 0 0 8px; color: var(--muted); }
.backup .row { margin-bottom: 10px; }

.tabs { display: none; }

/* スマホ: 地図とリストを下のタブで切り替える(それぞれ全画面) */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .mapwrap, .panel { grid-row: 1; grid-column: 1; }
  .panel { border-right: 0; }
  body[data-view="map"] .panel { display: none; }
  body:not([data-view="map"]) .mapwrap { visibility: hidden; pointer-events: none; }
  .mode { display: none; }
  .tabs {
    grid-row: 2; display: flex; background: var(--panel); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabs button {
    flex: 1; min-height: 52px; font: inherit; font-weight: 600; color: var(--muted);
    background: none; border: 0; border-top: 3px solid transparent; cursor: pointer;
  }
  .tabs button.on { color: var(--accent); border-top-color: var(--accent); }
  .head { padding: 10px 16px 8px; }
  .sub { margin: 0 0 6px; font-size: .72rem; }
  h1 { font-size: 1rem; margin-bottom: 6px; }
  .progress-num strong { font-size: 1.3rem; }
  .controls { padding: 8px 16px; gap: 8px; }
  .foot { display: none; }
}

/* 「新規」の目印と、地域の切り替えリンク */
.new { display: inline-block; margin-left: 4px; padding: 0 6px; font-size: .7rem; font-weight: 700; line-height: 1.6; color: #fff; background: var(--todo); border-radius: 4px; vertical-align: 2px; }
.sub a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }