/* 骨組みは3案共通。色・書体・角丸だけを [data-theme] で切り替える（地図側の色は themes.js） */
:root {
  /* A モノトーン（既定） */
  --bg: #ffffff; --surface: rgba(255,255,255,.96); --ink: #111111; --muted: #7a7a7a; --line: #e6e6e6;
  --chip-bg: #ffffff; --chip-line: #d4d4d4; --chip-on-bg: #111111; --chip-on-ink: #ffffff;
  --accent: #111111; --card-active: #f6f6f6; --tag-bg: transparent; --tag-line: #d9d9d9; --tag-ink: #6b6b6b;
  --handle: #cfcfcf; --gmaps-bg: transparent; --gmaps-ink: #111111; --gmaps-line: #111111;
  --r-chip: 3px; --r-sheet: 0px; --r-btn: 4px; --r-locate: 50%;
  --shadow: 0 -1px 0 var(--line); --shadow-btn: 0 2px 8px rgba(0,0,0,.10);
  --font-title: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --title-weight: 600; --title-spacing: .14em; --title-size: 17px; --card-title-weight: 600;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
[data-theme="latte"] {
  --bg: #f8f3ec; --surface: rgba(248,243,236,.96); --ink: #3b2a1f; --muted: #8a7466; --line: #e8ddcf;
  --chip-bg: #fffaf3; --chip-line: #e3d6c4; --chip-on-bg: #6b4a35; --chip-on-ink: #fff6ea;
  --accent: #6b4a35; --card-active: #f1e8dc; --tag-bg: #f0e6d8; --tag-line: transparent; --tag-ink: #6b4a35;
  --handle: #d9cbb9; --gmaps-bg: #6b4a35; --gmaps-ink: #fff6ea; --gmaps-line: #6b4a35;
  --r-chip: 999px; --r-sheet: 24px; --r-btn: 999px; --r-locate: 50%;
  --shadow: 0 -6px 24px rgba(80,52,36,.14); --shadow-btn: 0 3px 10px rgba(80,52,36,.18);
  --font-title: "Hiragino Maru Gothic ProN", "Rounded Mplus 1c", "Hiragino Sans", sans-serif;
  --font-body: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --title-weight: 700; --title-spacing: .04em; --title-size: 18px; --card-title-weight: 700;
}
[data-theme="botanical"] {
  --bg: #ffffff; --surface: rgba(255,255,255,.92); --ink: #14322a; --muted: #6a7f77; --line: #e2ebe6;
  --chip-bg: #eef5f1; --chip-line: transparent; --chip-on-bg: #1f5c45; --chip-on-ink: #ffffff;
  --accent: #1f5c45; --card-active: #f2f7f4; --tag-bg: #eef5f1; --tag-line: transparent; --tag-ink: #1f5c45;
  --handle: #cfdbd5; --gmaps-bg: transparent; --gmaps-ink: #1f5c45; --gmaps-line: #1f5c45;
  --r-chip: 10px; --r-sheet: 20px; --r-btn: 10px; --r-locate: 14px;
  --shadow: 0 -8px 24px rgba(20,50,42,.10); --shadow-btn: 0 3px 10px rgba(20,50,42,.14);
  --font-title: "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --title-weight: 700; --title-spacing: .02em; --title-size: 18px; --card-title-weight: 600;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); overflow: hidden; -webkit-font-smoothing: antialiased; }

.top {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  background: var(--surface); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 10px;
}
[data-theme="mono"] .top { border-bottom: 1px solid var(--line); }
.top h1 { font-family: var(--font-title); font-weight: var(--title-weight); font-size: var(--title-size); margin: 0 0 9px; letter-spacing: var(--title-spacing); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1px solid var(--chip-line); background: var(--chip-bg); color: var(--ink);
  border-radius: var(--r-chip); padding: 7px 14px; font-size: 13.5px; font-family: inherit; cursor: pointer; line-height: 1.2;
}
.chip[aria-pressed="true"] { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-ink); }

#map { position: fixed; inset: 0; z-index: 1; background: var(--bg); }
.maplibregl-ctrl-bottom-left { bottom: calc(34vh + 4px); }
body.sheet-open .maplibregl-ctrl-bottom-left { bottom: calc(78vh + 4px); }
.maplibregl-ctrl-attrib.maplibregl-compact { background: var(--surface); }
.maplibregl-ctrl-attrib a { color: var(--muted); }

.locate {
  position: fixed; right: 14px; bottom: calc(34vh + 14px); z-index: 1000;
  width: 44px; height: 44px; border-radius: var(--r-locate); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); display: grid; place-items: center;
  box-shadow: var(--shadow-btn); cursor: pointer; transition: bottom .2s ease;
}
body.sheet-open .locate { bottom: calc(78vh + 14px); }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; height: 34vh;
  background: var(--bg); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: height .2s ease; padding-bottom: var(--safe-b);
}
.sheet.open { height: 78vh; }
.handle { border: 0; background: none; padding: 10px 0 4px; cursor: pointer; }
.handle span { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--handle); margin: 0 auto; }
.count { margin: 0; padding: 0 16px 6px; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.list { list-style: none; margin: 0; padding: 0 0 12px; overflow-y: auto; flex: 1; }

.cafe { padding: 12px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.cafe.active { background: var(--card-active); }
.cafe h2 { font-family: var(--font-title); font-size: 16px; font-weight: var(--card-title-weight); margin: 0 0 4px; letter-spacing: .02em; }
.cafe .meta { font-size: 12px; color: var(--muted); margin: 0 0 7px; }
.cafe .note { font-size: 13.5px; margin: 0 0 9px; line-height: 1.55; }
.cafe .photo { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--r-btn); margin: 0 0 9px; display: block; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; padding: 0; list-style: none; }
.tags li { font-size: 11px; background: var(--tag-bg); border: 1px solid var(--tag-line); border-radius: var(--r-chip); padding: 3px 9px; color: var(--tag-ink); }
.gmaps {
  display: inline-block; font-size: 13px; color: var(--gmaps-ink); background: var(--gmaps-bg); text-decoration: none;
  border: 1px solid var(--gmaps-line); border-radius: var(--r-btn); padding: 7px 13px;
}
.empty { padding: 24px 16px; color: var(--muted); font-size: 14px; }