/* 共通トークン（デザイン仕様書 2.2。--ds- 接頭辞のみ） */
:root{
  /* ---------- 色：地と面 ---------- */
  --ds-color-bg:              #efedec; /* ページの地。手本の rgb(239,237,236) */
  --ds-color-surface:         #ffffff; /* パネル・カード・ナビ・入力欄 */
  --ds-color-surface-sunken:  #f9f8f7; /* パネル内の帯、小さな札、表の見出し行、白の上の区画 */
  --ds-color-surface-hover:   rgba(34,34,34,.06); /* 透明なボタンや行のホバー */
  --ds-color-surface-selected:#e6e3e1; /* 選んだ行・選んだ日 */
  --ds-color-inverse:         #222222; /* 暗いパネル・主ボタンの地・曲線の面 */
  --ds-color-inverse-hover:   #3d3a39; /* 主ボタンのホバー */
  --ds-color-overlay:         rgba(17,17,17,.55); /* 写真の上に敷く暗幕 */

  /* ---------- 色：文字 ---------- */
  --ds-color-ink:          #222222; /* 本文・見出し */
  --ds-color-ink-soft:     #4f4a48; /* 説明文。地 #efedec の上で 7.4:1 */
  --ds-color-ink-faint:    #66615e; /* 日付・補足・件数。白 6.1:1、地 5.2:1、選択中の地 #e6e3e1 の上で 4.8:1（文字に使ってよい下限） */
  --ds-color-ink-placeholder: #75706d; /* 入力欄の例文。白の上で 4.9:1 */
  --ds-color-ink-disabled: #8a8583; /* 押せない部品の文字だけ（WCAG の対象外）。本文・例文には使わない */
  --ds-color-disabled-bg:  #d6d2d0; /* 押せない主ボタンの地。道具の「予定あり」の帯（--busy）にも使う */
  --ds-color-on-inverse:      #ffffff; /* 暗い面の上の文字 */
  --ds-color-on-inverse-soft: #c9c3c1; /* 暗い面の上の補足文字。#222 の上で 9:1 */

  /* ---------- 色：線 ---------- */
  --ds-color-line:        #dfdad9; /* 区切り線・カードの枠。手本の実測値 */
  --ds-color-line-strong: #c9c3c1; /* ピルの枠・リンクの下線 */
  --ds-color-line-input:  #8f8986; /* 入力欄・チェックボックスの枠。白の上で 3.4:1（形が読める下限） */
  --ds-color-line-ink:    #222222; /* 枠線ボタン・フッター列の上の線 */

  /* ---------- 色：状態（意味のある色。装飾に使わない） ---------- */
  --ds-color-danger:    #b3261e; --ds-color-danger-bg:  #fbeae8;
  --ds-color-warn:      #8a5a00; --ds-color-warn-bg:    #fbf3df; --ds-color-warn-line: #e2c27a; /* 注意の箱の枠 */
  --ds-color-ok:        #2f7a4f; --ds-color-ok-bg:      #e8f3ec;
  --ds-color-info:      #2f5f9e; --ds-color-info-bg:    #eaf0f8;

  /* ---------- 色：フォーカス ---------- */
  --ds-color-focus:         #222222; /* 明るい面 */
  --ds-color-focus-inverse: #ffffff; /* 暗い面・写真の上 */

  /* ---------- 色：作品色（作品ごとに上書きする。既定は無彩色） ---------- */
  --ds-work-accent: #66615e; /* 作品の識別点・挿絵の線・見本の上辺 3px にだけ使う */
  --ds-work-wash:   #e6e3e1; /* 作品タイル・挿絵の地にだけ使う */

  /* ---------- 文字 ---------- */
  --ds-font-ja:   "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --ds-font-en:   "Inter", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --ds-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --ds-fw-regular: 400;
  --ds-fw-medium:  500;
  --ds-fw-bold:    700;

  --ds-ls-ja:      -0.02em; /* 14px 以上の和文 */
  --ds-ls-ja-small: 0;      /* 13px 以下の和文（詰めると読みにくい） */
  --ds-ls-en:      -0.02em; /* Inter のラベル・日付 */
  --ds-ls-display:  0;      /* Inter の大見出し（手本は normal） */

  /* サイト用の段階（スマホの値。PC は下の @media で上書き） */
  --ds-fs-display: 40px;  /* 英字の大見出し */
  --ds-fs-hero:    26px;  /* ファーストビューのコピー */
  --ds-fs-h1:      28px;  /* 下層ページの h1（和文） */
  --ds-fs-h2:      24px;  /* パネルの和文見出し */
  --ds-fs-h3:      20px;  /* 下層ページの h2、カードの見出し（大） */
  --ds-fs-lead:    17px;  /* リード文 */
  --ds-fs-title:   16px;  /* お知らせの見出し・カードの見出し（小） */
  --ds-fs-sub:     14px;  /* 英字見出しの下の和文 */
  --ds-fs-body:    15px;  /* 本文 */
  --ds-fs-small:   13px;  /* 補足・フッターの小さな札 */
  --ds-fs-label:   12px;  /* Inter のラベル・日付・ピル */
  --ds-fs-micro:   11px;  /* 著作権表記だけ */

  --ds-lh-display: 1.0;
  --ds-lh-heading: 1.5;
  --ds-lh-body:    1.8;
  --ds-lh-tight:   1.3;  /* 2 行までの短い見出し・カードの見出し */
  --ds-lh-ui:      1;    /* ボタン・ピル・ラベル（高さは箱で決める） */

  /* ---------- 余白（4px 単位） ---------- */
  --ds-space-1:   4px;
  --ds-space-2:   8px;
  --ds-space-3:  12px;
  --ds-space-4:  16px;
  --ds-space-5:  20px;
  --ds-space-6:  24px;
  --ds-space-8:  32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-space-20: 80px;
  --ds-space-24: 96px;
  --ds-space-30: 120px;
  --ds-space-40: 160px;

  /* 面ごとの余白（スマホの値。@media で上書き） */
  --ds-gutter:         16px;  /* 画面端から中身までの左右の余白 */
  --ds-panel-inset:     8px;  /* 画面端からパネルまで */
  --ds-panel-pad:      20px;  /* パネルの内側の余白（左右） */
  --ds-panel-pad-y:    48px;  /* パネルの内側の余白（上下） */
  --ds-section-gap:    72px;  /* セクションとセクションの間 */
  --ds-heading-gap:    32px;  /* セクション見出しから中身まで */

  /* ---------- 角丸 ---------- */
  --ds-radius-xs:     2px;   /* 小さな札・表のセル内のタグ */
  --ds-radius-sm:     4px;   /* ボタン・入力欄・ナビのピル・道具のタブ */
  --ds-radius-md:     8px;   /* カード（道具）・サムネイル・メニュー・Menu ボタン・吹き出し */
  --ds-radius-lg:    16px;   /* パネル内の画像・カード（サイト）・モーダル */
  --ds-radius-panel: 16px;   /* 大きいパネル（PC で 40px に上書き） */
  --ds-radius-pill: 999px;   /* カテゴリのピル・丸い矢印ボタン */

  /* ---------- 影（手本はほぼ影なし。浮くものにだけ使う） ---------- */
  --ds-shadow-0: none;                                                      /* パネル・カード */
  --ds-shadow-1: 0 0 4px rgba(34,34,34,.10);                                /* ナビのピル・固定ヘッダーの上の部品 */
  --ds-shadow-2: 0 0 1px rgba(34,34,34,.16), 0 6px 16px -6px rgba(34,34,34,.16); /* メニュー・ポップオーバー・ドラッグ中のカード */
  --ds-shadow-3: 0 0 1px rgba(34,34,34,.16), 0 24px 48px -16px rgba(34,34,34,.28); /* モーダル */

  /* ---------- 線 ---------- */
  --ds-border:        1px solid var(--ds-color-line);
  --ds-border-strong: 1px solid var(--ds-color-line-strong);
  --ds-border-input:  1px solid var(--ds-color-line-input);
  --ds-border-ink:    1px solid var(--ds-color-line-ink);
  --ds-focus-ring:    2px solid var(--ds-color-focus);
  --ds-focus-offset:  3px;

  /* ---------- 大きさ ---------- */
  --ds-container:      1344px; /* 中身の最大幅（1440 - 48×2） */
  --ds-container-text:  760px; /* 読む文章の最大幅（下層ページ） */
  --ds-measure:          40em; /* 段落 1 行の最大長（和文で約 40 字。5.1 の理由参照） */
  --ds-header-h:         60px; /* サイトの固定ヘッダーの下端（上 16 + 部品 44）。PC は 88px（上 40 + 部品 48） */
  --ds-app-header-h:     56px; /* 作品アプリのヘッダー（3.12）。画面幅で変えない */
  --ds-control-h:        48px; /* サイトのボタン・入力欄 */
  --ds-control-h-sm:     32px; /* 道具のボタン・入力欄（マウス） */
  --ds-tap-min:          44px; /* 指で押すものの最小 */
  --ds-pill-h:           28px; /* カテゴリのピル（手本の実測） */
  --ds-btn-gap:          24px; /* ボタンのラベルと「区切り＋矢印」の間の最小 */
  --ds-btn-sep-gap:      16px; /* 区切りと矢印の間 */

  /* ---------- 動き ---------- */
  --ds-ease:     cubic-bezier(0.4, 0.4, 0, 1); /* 手本の実測値 */
  --ds-dur-fast: 120ms; /* 道具のホバー */
  --ds-dur:      200ms; /* 開閉 */
  --ds-dur-slow: 300ms; /* サイトのホバー（手本の 0.3s） */

  /* ---------- 重なり順 ---------- */
  --ds-z-menu:    90; /* メニューの面はヘッダーの「下」。Menu/Close ボタンとロゴが面の上に残る */
  --ds-z-header: 100;
  --ds-z-modal:  300;
  --ds-z-toast:  400;
}

/* タブレット 640px〜 */
@media (min-width: 640px){
  :root{
    --ds-gutter:      32px;
    --ds-panel-inset: 12px;
    --ds-panel-pad:   40px;
    --ds-panel-pad-y: 64px;
    --ds-section-gap: 96px;
    --ds-heading-gap: 40px;
    --ds-radius-panel: 24px;
    --ds-fs-display: 52px;
    --ds-fs-hero:    30px;
    --ds-fs-h1:      34px;
    --ds-fs-h2:      28px;
    --ds-fs-sub:     16px;
  }
}
/* PC 900px〜 */
@media (min-width: 900px){
  :root{
    --ds-gutter:      48px;
    --ds-panel-pad:   80px;
    --ds-panel-pad-y: 96px;
    --ds-section-gap: 160px;
    --ds-heading-gap: 64px;
    --ds-radius-panel: 40px;
    --ds-header-h:    88px; /* 上 40 + ピル 48 */
    --ds-fs-display: 64px;
    --ds-fs-hero:    36px;
    --ds-fs-h1:      40px;
    --ds-fs-h2:      32px;
    --ds-fs-h3:      24px;
    --ds-fs-lead:    20px;
    --ds-fs-title:   18px;
    --ds-fs-sub:     18px;
    --ds-fs-body:    16px;
    --ds-fs-small:   14px;
    --ds-fs-label:   13px;
  }
}

/* ---- 写真家の拠点：既存の変数を共通トークンに寄せる（デザイン仕様書 4.3.1） ---- */
:root {
  --paper: var(--ds-color-bg);
  --surface: var(--ds-color-surface);
  --surface-sunken: var(--ds-color-surface-sunken);
  --surface-hover: var(--ds-color-surface-hover);
  --line: var(--ds-color-line);
  --line-strong: var(--ds-color-line-strong);
  --ink: var(--ds-color-ink);
  --ink-soft: var(--ds-color-ink-soft);
  --ink-faint: var(--ds-color-ink-faint);
  /* ボタンの地・リンクは黒。ピンなど中身の色は --pin / --vermilion に残す */
  --accent: var(--ds-color-inverse);
  --accent-deep: #000000;
  --accent-soft: var(--ds-color-surface-selected);
  --accent-line: var(--ds-color-line-strong);
  --pin: #4a5578;
  --vermilion: #c4452d;
  --vermilion-soft: #fbeae6;
  --ok: var(--ds-color-ok);
  --r-sm: var(--ds-radius-sm);
  --r-md: var(--ds-radius-md);
  --r-pill: var(--ds-radius-pill);
  --shadow-sm: var(--ds-shadow-1);
  --shadow-md: var(--ds-shadow-2);
  --ease: var(--ds-ease);
  --panel-w: 380px;
  --ds-work-accent: var(--vermilion);
  font-family: var(--ds-font-ja);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ds-color-bg); }
[hidden] { display: none !important; }
:focus-visible {
  outline: var(--ds-focus-ring);
  outline-offset: var(--ds-focus-offset);
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---- 共通ヘッダー（仕様書 3.12） ---- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-header);
  flex: 0 0 auto;
  height: var(--ds-app-header-h);
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: 0 var(--ds-gutter);
  background: var(--ds-color-surface);
  border-bottom: var(--ds-border);
}

.header-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-1);
  min-height: 44px;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 12px;
  color: var(--ds-color-ink-soft);
  text-decoration: none;
}
.header-back-arrow { font-size: 16px; line-height: 1; }
@media (hover: hover) {
  .header-back:hover { color: var(--ds-color-ink); }
}

.header-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: var(--ds-fw-bold);
  line-height: 1.4;
  letter-spacing: var(--ds-ls-ja);
}
.header-name a {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-width: 0;
  color: var(--ds-color-ink);
  text-decoration: none;
}
.header-name a::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-work-accent);
}
.header-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stopped {
  flex: 0 0 auto;
  margin: 0;
  font-size: 12px;
  font-weight: var(--ds-fw-bold);
  color: var(--ds-color-danger);
  white-space: nowrap;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  flex: 0 0 auto;
}

.views { display: flex; gap: var(--ds-space-1); }

.menu-btn { display: none; }

/* 案内などの文字リンク（3.2 text）。タブと同じ高さ 32px に揃える */
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-control-h-sm);
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 13px;
  font-weight: var(--ds-fw-bold);
  color: var(--ds-color-ink);
  text-decoration: underline;
  text-decoration-color: var(--ds-color-line-strong);
  text-underline-offset: 4px;
}
@media (hover: hover) {
  .nav-link:hover { text-decoration-color: currentColor; }
}
/* サイトまとめへの行はメニューの面の 1 行目だけ（PC では左端の「← まとめ」がある） */
.nav-link.menu-only { display: none; }

/* 切り替えのタブ（3.7 明るい面の上） */
.view-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-control-h-sm);
  flex: 0 0 auto;
  padding: 0 var(--ds-space-3);
  white-space: nowrap;
  font: inherit;
  font-size: 13px;
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-ui);
  border: var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-surface);
  color: var(--ds-color-ink-soft);
  cursor: pointer;
  transition: border-color var(--ds-dur-fast) var(--ds-ease);
}
@media (hover: hover) {
  .view-btn:hover { border-color: var(--ds-color-line-strong); }
}
.view-btn:active { transform: translateY(1px); }
.view-btn.is-on {
  background: var(--ds-color-inverse);
  border-color: var(--ds-color-inverse);
  color: var(--ds-color-on-inverse);
}
@media (pointer: coarse) {
  .view-btn::after { content: ""; position: absolute; inset: -6px 0; }
}

/* ---- ログイン ---- */
.login-box { position: relative; }
.login-box summary { list-style: none; }
.login-box summary::-webkit-details-marker { display: none; }
.login-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--ds-space-2));
  z-index: 1;
  width: min(20.5rem, calc(100vw - 2rem));
  padding: var(--ds-space-3);
  background: var(--ds-color-surface);
  border: var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-2);
}
.login-lead {
  margin: 0 0 var(--ds-space-2);
  font-size: 12px;
  color: var(--ds-color-ink-soft);
  line-height: 1.5;
}
.login-form { display: grid; gap: var(--ds-space-2); }
.login-field {
  display: grid;
  gap: var(--ds-space-1);
  font-size: 12px;
  color: var(--ds-color-ink-faint);
}
.login-hint { margin: 0; }
.login-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  align-items: center;
}

/* ---- 入力欄（3.8 道具） ---- */
.login-form input,
.muni-picker input[type="search"],
.field select {
  width: 100%;
  min-height: var(--ds-control-h-sm);
  padding: 0 var(--ds-space-2);
  font: inherit;
  font-size: 13px;
  font-weight: var(--ds-fw-regular);
  color: var(--ds-color-ink);
  background: var(--ds-color-surface);
  border: var(--ds-border-input);
  border-radius: var(--ds-radius-sm);
}
.field select {
  appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1 2.5l3 3 3-3' fill='none' stroke='%23222' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.login-form input::placeholder,
.muni-picker input::placeholder { color: var(--ds-color-ink-placeholder); }
@media (hover: hover) {
  .login-form input:hover,
  .muni-picker input[type="search"]:hover,
  .field select:hover { border-color: var(--ds-color-ink-soft); }
}
.login-form input:focus,
.muni-picker input[type="search"]:focus,
.field select:focus {
  outline: none;
  border-color: var(--ds-color-ink);
  box-shadow: 0 0 0 1px var(--ds-color-ink);
}
@media (pointer: coarse) {
  .login-form input,
  .muni-picker input[type="search"],
  .field select { min-height: var(--ds-tap-min); font-size: 16px; }
}

/* ---- 本体 ---- */
.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8px var(--panel-w);
  position: relative;
  z-index: 0;
}

/* 地図の入れ物：Leaflet の高い z-index をこの中で完結させる（3.12） */
.map-panel {
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
}

#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.resize-handle {
  width: 8px;
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  cursor: col-resize;
  position: relative;
  user-select: none;
  touch-action: none;
}
.resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 28px;
  border-radius: 2px;
  background: var(--line-strong);
}
@media (hover: hover) {
  .resize-handle:hover { background: var(--accent-soft); }
}

.side-panel {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--ds-space-4) var(--ds-space-4) 0;
  background: var(--paper);
}

.desk-view {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.today-scroll {
  flex: 1;
  min-height: 10rem;
  overflow-y: auto;
  padding-right: var(--ds-space-1);
  scrollbar-width: thin;
}

#shelf { padding-bottom: var(--ds-space-5); overflow-y: auto; }

.panel-actions {
  flex-shrink: 0;
  z-index: 2;
  margin: var(--ds-space-3) calc(var(--ds-space-4) * -1) 0;
  padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-4);
  border-top: var(--ds-border);
  background: var(--ds-color-surface);
  display: grid;
  gap: var(--ds-space-2);
}

.side-panel h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: var(--ds-ls-ja);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
}

.hint {
  color: var(--ds-color-ink-faint);
  font-size: 12px;
  margin: var(--ds-space-1) 0 var(--ds-space-3);
  text-wrap: pretty;
}

.filters {
  display: grid;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-4);
}

.field {
  display: grid;
  gap: var(--ds-space-1);
  font-size: 12px;
  color: var(--ds-color-ink-faint);
}

.mode-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.mode-field legend { padding: 0; margin-bottom: var(--ds-space-1); font: inherit; }
.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-1);
}
/* ラジオ：選択肢の箱ぜんぶを押せる範囲にし、見た目は切り替えのタブ（3.7 / 3.8） */
.mode-opt {
  position: relative;
  display: block;
  cursor: pointer;
}
.mode-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  accent-color: var(--ds-color-inverse);
}
.mode-opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-control-h-sm);
  padding: 0 var(--ds-space-2);
  text-align: center;
  font-size: 13px;
  font-weight: var(--ds-fw-bold);
  line-height: 1.3;
  border: var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-surface);
  color: var(--ds-color-ink-soft);
  transition: border-color var(--ds-dur-fast) var(--ds-ease);
}
@media (hover: hover) {
  .mode-opt:hover span { border-color: var(--ds-color-line-strong); }
}
.mode-opt input:checked + span {
  background: var(--ds-color-inverse);
  border-color: var(--ds-color-inverse);
  color: var(--ds-color-on-inverse);
}
.mode-opt input:focus-visible + span {
  outline: var(--ds-focus-ring);
  outline-offset: var(--ds-focus-offset);
}
@media (pointer: coarse) {
  .mode-opt span { min-height: var(--ds-tap-min); }
}

/* スライダー：色は黒、押せる範囲は高さ 32px（指で 44px） */
.field input[type="range"] {
  width: 100%;
  min-height: var(--ds-control-h-sm);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  appearance: none;
  accent-color: var(--ds-color-inverse);
  cursor: pointer;
}
.field input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ds-color-line-strong);
}
.field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  border: 0;
  background: var(--ds-color-inverse);
}
.field input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ds-color-line-strong);
}
.field input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: var(--ds-color-inverse);
}
.field input[type="range"]:focus-visible {
  outline: var(--ds-focus-ring);
  outline-offset: 0;
}
@media (pointer: coarse) {
  .field input[type="range"] { min-height: var(--ds-tap-min); }
}

.muni-picker { position: relative; }
.muni-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-1);
  min-height: 0.2rem;
  margin-bottom: var(--ds-space-1);
}
.muni-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  font-size: 12px;
  font-weight: var(--ds-fw-bold);
  padding: var(--ds-space-1) var(--ds-space-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  color: var(--ds-color-ink);
  white-space: nowrap;
}
.muni-chip button {
  font: inherit;
  border: none;
  background: transparent;
  color: var(--ds-color-ink-faint);
  cursor: pointer;
  padding: 0 var(--ds-space-1);
}
.muni-results {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 6;
  margin: var(--ds-space-1) 0 0;
  padding: var(--ds-space-1);
  list-style: none;
  background: var(--surface);
  border: var(--ds-border);
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-2);
  max-height: 14rem;
  overflow-y: auto;
}
.muni-results button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  padding: var(--ds-space-2);
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--ds-radius-xs);
}
@media (hover: hover) {
  .muni-results button:hover { background: var(--ds-color-surface-hover); }
}
.field-error { color: var(--ds-color-danger); font-size: 12px; margin: var(--ds-space-1) 0 0; font-weight: var(--ds-fw-bold); }
.settings-hint { margin: var(--ds-space-1) 0 0; }
.field em { font-style: normal; font-weight: var(--ds-fw-bold); color: var(--ds-color-ink); }
.wait-line {
  margin: 0 0 var(--ds-space-3);
  padding: var(--ds-space-3);
  background: var(--ds-color-info-bg);
  border: 1px solid var(--ds-color-line-strong);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-info);
  font-size: 13px;
  font-weight: var(--ds-fw-bold);
}

/* ---- ボタン（3.2 sm） ---- */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-link,
.danger {
  font: inherit;
  cursor: pointer;
}

.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-control-h-sm);
  flex: 0 0 auto;
  padding: 0 var(--ds-space-3);
  white-space: nowrap;
  font-size: 13px;
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-ui);
  letter-spacing: 0;
  text-decoration: none;
  border-radius: var(--ds-radius-sm);
  transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active { transform: translateY(1px); }
.btn-primary,
.btn-secondary { width: 100%; }

.btn-primary {
  border: 1px solid var(--ds-color-inverse);
  background: var(--ds-color-inverse);
  color: var(--ds-color-on-inverse);
}
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { background: var(--ds-color-inverse-hover); border-color: var(--ds-color-inverse-hover); }
}
.btn-primary:disabled {
  background: var(--ds-color-disabled-bg);
  border-color: var(--ds-color-disabled-bg);
  color: var(--ds-color-ink-disabled);
  cursor: not-allowed;
}

.btn-secondary,
.btn-ghost {
  border: var(--ds-border-ink);
  background: var(--ds-color-surface);
  color: var(--ds-color-ink);
}
@media (hover: hover) {
  .btn-secondary:hover:not(:disabled),
  .btn-ghost:hover:not(:disabled) {
    background: var(--ds-color-inverse);
    color: var(--ds-color-on-inverse);
  }
}
.btn-secondary:disabled,
.btn-ghost:disabled {
  border-color: var(--ds-color-line);
  color: var(--ds-color-ink-disabled);
  cursor: not-allowed;
}
.btn-fit { width: auto; }

@media (pointer: coarse) {
  .btn-primary, .btn-secondary, .btn-ghost { min-height: var(--ds-tap-min); }
}

.btn-link,
.maps-link {
  display: inline-block;
  color: var(--ds-color-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 13px;
}

/* ---- loc のカード ---- */
.spot-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

.spot-card {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--ds-space-3);
  align-items: start;
  padding: var(--ds-space-3);
  background: var(--surface);
  border: var(--ds-border);
  border-radius: var(--ds-radius-md);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}
@media (hover: hover) {
  .spot-card:hover { border-color: var(--ds-color-line-strong); }
}
.spot-card.is-on {
  border-color: var(--ds-color-ink);
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--ds-color-ink);
}
.spot-card.is-off { background: var(--ds-color-surface-sunken); }
.spot-card.is-off strong { color: var(--ds-color-ink-faint); }

.spot-order {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pin);
  color: #fff;
  font-family: var(--ds-font-en);
  font-size: 12px;
  font-weight: var(--ds-fw-bold);
}
.spot-card.is-off .spot-order { background: var(--ds-color-ink-faint); }

.spot-card-body { min-width: 0; }
.spot-card-body strong { font-size: 14px; line-height: 1.4; }
.spot-card p {
  margin: var(--ds-space-1) 0 0;
  font-size: 13px;
  color: var(--ds-color-ink-soft);
  text-wrap: pretty;
}
.spot-meta {
  display: block;
  margin-top: var(--ds-space-1);
  font-size: 12px;
  color: var(--ds-color-ink-faint);
}

/* チェックボックス：見た目 18px、押せる範囲 32px（指で 44px）の枠に収める */
.spot-check {
  appearance: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: -7px -7px -7px 0;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect x='.5' y='.5' width='17' height='17' rx='2.5' fill='%23fff' stroke='%238f8986'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.spot-check:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='18' height='18' rx='3' fill='%23222'/%3E%3Cpath d='M4.5 9.2l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E");
}
@media (pointer: coarse) {
  .spot-check { width: 44px; height: 44px; margin: -13px -13px -13px 0; }
}

.route-meta {
  margin: 0;
  font-size: 12px;
  color: var(--ds-color-ink-soft);
  font-variant-numeric: tabular-nums;
}
.route-meta:empty { display: none; }

.thread {
  margin: var(--ds-space-2) 0 0;
  padding: 0 0 0 1.15em;
  font-size: 13px;
}
.thread .leg {
  display: block;
  font-size: 12px;
  color: var(--ds-color-ink-faint);
}

/* ---- 棚 ---- */
.drop {
  display: grid;
  gap: var(--ds-space-1);
  margin: var(--ds-space-3) 0 var(--ds-space-2);
  padding: var(--ds-space-4) var(--ds-space-3);
  border: 1.5px dashed var(--ds-color-line-input);
  border-radius: var(--ds-radius-md);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
}
.drop.is-over {
  border-color: var(--vermilion);
  background: var(--vermilion-soft);
}
.drop input { display: none; }
.drop strong { font-size: 14px; }
.drop span { font-size: 12px; color: var(--ds-color-ink-faint); }

.prints {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: var(--ds-space-2);
}

.print {
  border: var(--ds-border);
  background: var(--surface);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-1);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.print.is-on { outline: 2px solid var(--ds-color-ink); }

.print img {
  display: block;
  width: 100%;
  height: 88px;
  object-fit: cover;
  background: #1f1b16;
  border-radius: var(--ds-radius-md);
}
.print figcaption {
  margin-top: var(--ds-space-1);
  font-size: 12px;
  color: var(--ds-color-ink-soft);
}

.review-card {
  margin-top: var(--ds-space-3);
  background: var(--surface);
  border: var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3);
}
.review-card img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: #1f1b16;
  border-radius: var(--ds-radius-md);
}
.review-card h2 { margin: var(--ds-space-2) 0 0; font-size: 16px; }
.readout, .savings { margin: var(--ds-space-1) 0 0; font-size: 12px; color: var(--ds-color-ink-soft); }

.settings-text {
  margin: var(--ds-space-2) 0 0;
  padding: var(--ds-space-2);
  background: var(--surface-sunken);
  border-radius: var(--ds-radius-sm);
  font-size: 12px;
  white-space: pre-wrap;
}

.notes { margin: var(--ds-space-3) 0 0; padding: 0; list-style: none; }
.notes li {
  margin: 0 0 var(--ds-space-2);
  padding-left: var(--ds-space-2);
  border-left: 2px solid var(--line);
  font-size: 13px;
}
.notes li.next { border-left-color: var(--vermilion); }
.notes li.watch { border-left-color: var(--ds-color-ink); }

.danger {
  margin-top: var(--ds-space-3);
  background: none;
  border: none;
  color: var(--ds-color-ink-faint);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- 地図の中身（ピンの色は残す） ---- */
.map-pin-wrap { background: none !important; border: none !important; }
.map-pin {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--pin);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: var(--ds-shadow-1);
  border: 2px solid #fff;
}
.map-pin-wrap.is-on .map-pin {
  background: var(--vermilion);
  transform: scale(1.12);
}

.leaflet-container { font-family: inherit; background: var(--surface-sunken); }

/* ---- 899px 以下：Menu ボタン、地図とパネルの縦積み（3.12 / 3.12.1） ---- */
@media (max-width: 899px) {
  .header-back { width: 44px; margin-left: -14px; }
  .header-back-label { display: none; }
  .header-back-arrow { font-size: 20px; }

  .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    flex: 0 0 auto;
    padding: 0 var(--ds-space-4);
    white-space: nowrap;
    font-family: var(--ds-font-en);
    font-size: 13px;
    font-weight: var(--ds-fw-bold);
    color: var(--ds-color-ink);
    background: var(--ds-color-surface);
    border: var(--ds-border);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
  }
  .menu-btn:active { transform: translateY(1px); }

  /* メニューの面：ヘッダー（100）より下（90 相当）に敷く。ヘッダーの中なので -1 */
  .header-tools {
    display: none;
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--ds-app-header-h) + var(--ds-space-4)) var(--ds-gutter) var(--ds-space-10);
    background: var(--ds-color-surface);
    overflow-y: auto;
  }
  .header-tools.is-open { display: flex; }
  .header-tools .nav-link.menu-only { display: flex; }
  .views { flex-direction: column; gap: 0; }

  .header-tools .menu-row,
  .header-tools .view-btn,
  .header-tools .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 56px;
    padding: 0;
    font-size: 20px;
    font-weight: var(--ds-fw-bold);
    color: var(--ds-color-ink);
    text-decoration: none;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: var(--ds-border);
    border-radius: 0;
    transition: none;
  }
  .header-tools .view-btn::after { display: none; }
  .header-tools .view-btn.is-on {
    padding-left: var(--ds-space-3);
    box-shadow: inset 3px 0 0 var(--ds-color-ink);
    background: var(--ds-color-surface-sunken);
  }
  .login-box { width: 100%; }
  .login-box[open] summary { border-bottom: 0; }
  .login-panel {
    position: static;
    width: 100%;
    padding: var(--ds-space-2) 0 var(--ds-space-4);
    background: none;
    border: 0;
    border-bottom: var(--ds-border);
    border-radius: 0;
    box-shadow: none;
  }
  .login-lead { font-size: 13px; }
  .login-field { font-size: 12px; }

  .workspace { display: flex; flex-direction: column; }
  .resize-handle { display: none; }
  .map-panel { flex: none; height: 45dvh; min-height: 240px; }
  .side-panel {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
  }
  .desk-view {
    flex: none;
    overflow: visible;
  }
  .today-scroll {
    flex: none;
    min-height: 0;
    overflow: visible;
    padding-bottom: var(--ds-space-3);
  }
  .panel-actions {
    position: sticky;
    bottom: 0;
  }
}

@media (max-width: 380px) {
  .stopped { font-size: 11px; }
}

@media (max-width: 899px) and (hover: hover) {
  .header-tools .menu-row:hover { background: none; color: var(--ds-color-ink); }
}