/* 愛犬とおでかけマップ 画面スタイル
   旧アプリ index.html（12〜733行）のCSSを流用・改修したもの（設計書3-1の実装方針）。
   変えた点：カテゴリ名（dogcafe→restaurant）・facility色の追加・お知らせ帯の新設・
   折り返しを599/1023の2本に（設計書3-13）。 */

:root {
  --chrome-bottom: 139px;
  --content-top: 139px;
  --map-credit-clearance: 40px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif; }
/* hidden属性を常に勝たせる（displayを持つクラスと併用したとき、ブラウザ既定の[hidden]は
   authorスタイルに負けて効かなくなるため。レビュー重大-3） */
[hidden] { display: none !important; }

/* ===== ヘッダー（旧アプリと同じ50px・濃紺） ===== */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #1a1a2e; color: white;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; height: 50px;
}
#header-logo { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }  /* 旧アプリの丸ロゴ30px */
#header h1 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: 0.3px; white-space: nowrap; }
#count-display { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.55); white-space: nowrap; }
/* 「もしもの時」への文字リンク（設計書UI-C2。ボタンにしない・色を目立たせない） */
#vet-link {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  font-size: 11px; color: rgba(255,255,255,0.75); text-decoration: underline;
  padding: 4px 0; white-space: nowrap;
}

/* ===== カテゴリタブ（流用） ===== */
#filter-bar {
  position: fixed; top: 50px; left: 0; right: 0; z-index: 999;
  background: white; border-bottom: 1px solid #e8e8e8;
  display: flex; gap: 6px; padding: 7px 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#filter-bar::-webkit-scrollbar { display: none; }
.filter-btn {
  padding: 5px 13px; border-radius: 20px; border: 1.5px solid #d0d0d0;
  background: white; font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: all 0.18s; color: #555; flex-shrink: 0;
}
.filter-btn:active { transform: scale(0.96); }
.filter-btn.active { color: white; border-color: transparent; }
#btn-all.active        { background: #333; }
#btn-dogrun.active     { background: #27ae60; }
#btn-restaurant.active { background: #e74c3c; }
#btn-vet-back { border-color: #8e44ad; color: #8e44ad; }
#region-open {
  min-height: 31px; padding: 5px 13px; border-radius: 20px;
  border: 1.5px solid #1a1a2e; background: #1a1a2e; color: white;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
#region-open:disabled { opacity: 0.5; cursor: default; }
#tutorial-open {
  min-height: 31px; padding: 5px 11px; border-radius: 20px;
  border: 1.5px solid #d0d0d0; background: white; color: #555;
  font-size: 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
#tutorial-open:hover { border-color: #1a1a2e; color: #1a1a2e; }

/* ===== 検索バー（流用） ===== */
#search-bar {
  position: fixed; top: 95px; left: 0; right: 0; z-index: 998;
  background: #f5f5f7; border-bottom: 1px solid #e0e0e0;
  display: flex; gap: 6px; padding: 6px 12px; align-items: center;
}
#search-input {
  flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: 10px;
  font-size: 13px; outline: none; background: white; transition: border-color 0.2s;
}
#search-input:focus { border-color: #1a1a2e; box-shadow: 0 0 0 2px rgba(26,26,46,0.08); }
#genre-select {
  padding: 8px 8px; border: 1px solid #ddd; border-radius: 10px;
  font-size: 12px; background: white; outline: none; max-width: 120px; cursor: pointer;
}
#search-clear {
  padding: 7px 11px; border: none; background: #e0e0e0; border-radius: 10px;
  font-size: 12px; cursor: pointer; color: #555; transition: background 0.15s; flex-shrink: 0;
}
#search-clear:hover { background: #d0d0d0; }

/* ===== お知らせ帯（設計書3-9。全失敗をここに集める。旧トーストの見た目を格上げ） ===== */
#notice-band {
  position: fixed; top: var(--content-top); left: 0; right: 0; z-index: 1900;
  display: flex; flex-direction: column; gap: 2px; pointer-events: none;
}
.notice-item {
  background: rgba(30,30,50,0.93); color: white;
  padding: 10px 14px; font-size: 13px; line-height: 1.6;
  display: flex; align-items: flex-start; gap: 10px; pointer-events: auto;
}
.notice-item .notice-text { flex: 1; }
.notice-item .notice-close {
  background: none; border: none; color: rgba(255,255,255,0.7);
  font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1.4; flex-shrink: 0;
}

/* ===== マップ ===== */
#map-container {
  /* 上端は固定UIの実測値、下端は表示領域の下端に直接固定する */
  position: fixed; top: var(--content-top); right: 0; bottom: 0; left: 0;
}
#map { width: 100%; height: 100%; }

/* ===== ローディング（流用） ===== */
#loading {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 2000; background: white; padding: 24px 36px; border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12); font-size: 14px; color: #333;
  display: flex; align-items: center; gap: 12px;
}
#loading-spinner {
  width: 20px; height: 20px; border: 3px solid #eee;
  border-top-color: #1a1a2e; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 現在地ボタン（照準マーク＋文字。押した後の状態も同じ場所に表示） ===== */
#locate-btn {
  position: fixed; bottom: calc(var(--map-credit-clearance) + 64px); right: 14px; z-index: 1800;
  min-width: 92px; height: 46px; padding: 0 13px; border-radius: 23px;
  background: white; border: none; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: #1a1a2e;
  transition: box-shadow 0.2s, transform 0.15s, background 0.2s;
}
#locate-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.28); }
#locate-btn:active { transform: scale(0.93); }
#locate-btn:disabled { opacity: 0.6; cursor: default; }
#locate-btn[data-state="success"] { background: #e9f8ef; color: #18733c; }
#locate-btn[data-state="error"] { background: #fff1ef; color: #a52a1d; }
.location-icon {
  position: relative; width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid currentColor; border-radius: 50%;
}
.location-icon::before {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: currentColor;
}
.location-icon::after {
  content: ''; position: absolute; inset: -5px 6px;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
}

/* ===== 近くを探す（発注07 #1。現在地ボタンと同じ高さの段に、左側へ置く） ===== */
#nearby-btn {
  position: fixed; bottom: calc(var(--map-credit-clearance) + 64px); left: 14px; z-index: 1800;
  min-height: 46px; padding: 0 16px; border-radius: 23px;
  background: #16a085; color: white; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28); transition: background 0.2s, transform 0.15s;
}
#nearby-btn:hover { background: #128f76; }
#nearby-btn:active { transform: scale(0.96); }
#nearby-btn:disabled { opacity: 0.7; cursor: default; }

/* ===== リストボタン（流用） ===== */
#list-toggle {
  position: fixed; bottom: calc(var(--map-credit-clearance) + 12px); right: 14px; z-index: 1800;
  background: #1a1a2e; color: white; border: none;
  padding: 11px 18px; border-radius: 22px; font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  transition: background 0.2s, box-shadow 0.2s;
}
#list-toggle:hover { background: #2d2d4e; }
#list-toggle:active { transform: scale(0.96); }

/* ===== リストパネル（流用。タブレットは右から310px） ===== */
#list-panel {
  position: fixed; top: var(--content-top); right: 0; bottom: 0; width: 310px;
  background: white; z-index: 1500; overflow-y: auto;
  box-shadow: -3px 0 20px rgba(0,0,0,0.08);
  transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
#list-panel.open { transform: translateX(0); }
#list-header {
  padding: 12px 16px; background: #1a1a2e; color: white;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 600; position: sticky; top: 0; z-index: 10;
}
#list-close { background: none; border: none; color: white; font-size: 20px; cursor: pointer; padding: 0 2px; }
.list-item {
  padding: 11px 14px; border-bottom: 1px solid #f2f2f2;
  cursor: pointer; transition: background 0.12s;
}
.list-item:hover { background: #f7f7f9; }
.list-item:active { background: #eef0f5; }
.list-item-name { font-size: 13px; font-weight: 600; color: #1a1a2e; margin-bottom: 3px; line-height: 1.3; }
/* 「近くを探す」の距離と、🐾行ったよ済みの印（発注07 #1・#2） */
.list-item-distance { float: right; margin-left: 8px; color: #16a085; font-size: 12px; font-weight: 700; }
.list-item-visited { color: #d68910; font-weight: 700; }
.list-item-addr { font-size: 11px; color: #999; margin-bottom: 4px; }
.list-item-meta { font-size: 11px; color: #666; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 600; color: white; }
.badge-dogrun     { background: #27ae60; }
.badge-restaurant { background: #e74c3c; }
.badge-vet        { background: #8e44ad; }
.badge-hotel      { background: #2980b9; }
.badge-facility   { background: #16a085; }  /* 新設カテゴリ。設計書に色の指定なし（設計への質問） */
#list-more {
  padding: 13px; text-align: center; font-size: 13px; color: #1a73e8;
  cursor: pointer; border-top: 1px solid #eee; transition: background 0.12s;
}
#list-more:hover { background: #f0f4ff; }

/* ===== 要約（ポップアップの中身。流用した .iw-* 構造） ===== */
.iw-card { max-width: 260px; font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif; }
.iw-name { font-weight: 700; font-size: 14px; color: #1a1a2e; margin-bottom: 3px; line-height: 1.35; }
.iw-addr { font-size: 11px; color: #999; margin-bottom: 7px; line-height: 1.4; }
.iw-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.iw-badge { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; color: white; }
.iw-genre { font-size: 11px; color: #aaa; }
.iw-detail { font-size: 11px; color: #666; margin-bottom: 3px; }
.iw-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; }
.iw-link {
  display: inline-block; padding: 4px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: opacity 0.15s;
}
.iw-link:hover { opacity: 0.8; }
.iw-link-hp { background: #fff0f0; color: #e74c3c; }
.iw-link-web { background: #f0f4ff; color: #1a73e8; }
.iw-link-gmap { background: #f5f5f5; color: #555; }
.iw-source { font-size: 10px; color: #bbb; margin-top: 8px; padding-top: 6px; border-top: 1px solid #f5f5f5; line-height: 1.6; }

/* スマホ（599px以下）の要約はボトムシート（設計書3-13） */
#summary-sheet {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2200;
  background: white; border-radius: 20px 20px 0 0; max-height: 50vh; overflow-y: auto;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.18); padding: 16px 18px 24px;
}
#summary-sheet.open { display: block; }
#summary-sheet .iw-card { max-width: none; }

/* ===== 都道府県選択 ===== */
#region-overlay {
  display: none; position: fixed; inset: 0; z-index: 2400;
  background: rgba(0,0,0,0.48); align-items: center; justify-content: center; padding: 20px;
}
#region-overlay.open { display: flex; }
#region-dialog {
  width: min(620px, 100%); max-height: min(760px, calc(100dvh - 40px));
  overflow: hidden; display: flex; flex-direction: column;
  background: white; border-radius: 18px; box-shadow: 0 8px 40px rgba(0,0,0,0.24);
}
#region-header {
  padding: 14px 18px; background: #1a1a2e; color: white;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
#region-title { margin: 0; font-size: 16px; }
#region-close {
  width: 40px; height: 40px; margin: -8px -8px -8px 0;
  border: 0; background: none; color: white; font-size: 24px; cursor: pointer;
}
#region-groups { padding: 10px 16px 20px; overflow-y: auto; overscroll-behavior: contain; }
.region-group h3 { margin: 12px 0 7px; font-size: 13px; color: #555; }
.region-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.prefecture-btn {
  min-height: 44px; padding: 6px 5px; border: 1px solid #d9d9df; border-radius: 9px;
  background: white; color: #333; cursor: pointer; font-size: 12px; line-height: 1.35;
}
.prefecture-btn:hover { background: #f2f3f7; border-color: #1a1a2e; }
.prefecture-btn:disabled { background: #f5f5f5; color: #aaa; cursor: default; }
.prefecture-count { display: block; font-size: 10px; color: #777; }
.prefecture-btn:disabled .prefecture-count { color: #aaa; }
#summary-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; font-size: 22px; color: #999; cursor: pointer;
}

/* ===== 投稿・修正報告（設計書3-12）と商品枠（設計書3-8） ===== */

/* ステマ規制のサイト全体表示（_work/17 4-1。本文と同等の文字サイズ・コントラスト確保） */
#ad-disclosure {
  position: fixed; top: var(--chrome-bottom); left: 0; right: 0; z-index: 997;
  background: #f0f0f3; color: #444; font-size: 12px;
  padding: 4px 12px; border-bottom: 1px solid #e0e0e0; text-align: center;
}

/* 「情報の修正を報告」（要約パネル内。タップの当たり判定44px以上を守る） */
.report-block { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; }
.report-open {
  width: 100%; min-height: 44px; padding: 8px 12px;
  background: #f7f7f9; color: #555; border: 1px solid #ddd; border-radius: 10px;
  font-size: 12px; cursor: pointer; transition: background 0.15s;
}
.report-open:hover { background: #eef0f5; }
.report-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.report-reason {
  min-height: 44px; padding: 8px 12px; text-align: left;
  background: white; border: 1.5px solid #d0d0d0; border-radius: 10px;
  font-size: 13px; color: #333; cursor: pointer; transition: all 0.15s;
}
.report-reason:hover { border-color: #e67e22; color: #e67e22; }
.report-reason:disabled, .report-open:disabled, .report-other-send:disabled { opacity: 0.5; cursor: default; }
.report-other { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.report-other-text {
  width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 10px;
  font-size: 13px; font-family: inherit; resize: vertical; outline: none;
}
.report-other-text:focus { border-color: #1a1a2e; }
.report-other-send {
  min-height: 44px; padding: 8px; background: #1a1a2e; color: white;
  border: none; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.report-done { margin-top: 8px; font-size: 13px; color: #27ae60; font-weight: 600; line-height: 1.5; }

/* ===== 犬OKの条件（発注07 #3）。表示側と入力側 ===== */
.dog-cond { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; }
.dog-cond-title { font-size: 11px; font-weight: 700; color: #555; margin-bottom: 4px; }
.dog-cond-item {
  display: inline-block; margin: 0 5px 4px 0; padding: 3px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
}
.dog-cond-yes { background: #e8f6f1; color: #12795f; }
.dog-cond-no  { background: #fdecea; color: #a52a1d; }
.dog-cond-none { font-size: 11px; color: #999; }
.dog-input { margin-top: 6px; }
.dog-input-note { font-size: 11px; color: #999; line-height: 1.6; margin-bottom: 6px; }
.dog-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.dog-row-name { flex: 1 1 120px; font-size: 12px; color: #555; }
.dog-row-choices { display: flex; gap: 4px; flex-shrink: 0; }
.dog-chip {
  min-height: 36px; padding: 6px 12px; border: 1.5px solid #d0d0d0; border-radius: 18px;
  background: white; color: #555; font-size: 12px; cursor: pointer;
}
.dog-chip.active { background: #16a085; border-color: transparent; color: white; font-weight: 700; }
.dog-chip:disabled { opacity: 0.5; cursor: default; }
.report-dog { margin-top: 8px; }
.report-dog-send {
  width: 100%; min-height: 40px; margin-top: 4px; padding: 9px; background: #16a085; color: white;
  border: none; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.report-dog-send:disabled { opacity: 0.5; cursor: default; }

/* ===== 🐾行ったよ（発注07 #2。旧アプリの見た目を踏襲し、押した後は色を変える） ===== */
.visit-block { margin-top: 8px; }
.visit-btn {
  width: 100%; min-height: 44px; padding: 10px; border: 1.5px solid #f39c12; border-radius: 10px;
  background: white; color: #b9770e; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.visit-btn:hover { background: #fff8ee; }
.visit-btn.active { background: #f39c12; border-color: transparent; color: white; }
.visit-btn:disabled { opacity: 0.6; cursor: default; }
.visit-prompt {
  margin-top: 6px; padding: 8px 10px; background: #fff8ee; border-radius: 8px;
  font-size: 12px; color: #7a5411; line-height: 1.6;
}

/* 新規スポット投稿：起点ボタンと案内 */
#add-spot-btn {
  position: fixed; bottom: calc(var(--map-credit-clearance) + 12px); left: 14px; z-index: 1800;
  background: #e67e22; color: white; border: none;
  padding: 11px 16px; border-radius: 22px; font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.28); transition: background 0.2s;
}
#add-spot-btn:hover { background: #d35400; }
#add-hint {
  position: fixed; bottom: calc(var(--map-credit-clearance) + 12px); left: 14px; right: 76px; z-index: 1800;
  background: rgba(30,30,50,0.93); color: white; border-radius: 12px;
  padding: 10px 14px; font-size: 13px; line-height: 1.5;
  display: flex; align-items: center; gap: 10px;
}
#add-cancel {
  margin-left: auto; flex-shrink: 0; min-height: 32px; padding: 4px 12px;
  background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.4);
  border-radius: 8px; font-size: 12px; cursor: pointer;
}

/* 新規スポット投稿フォーム（下からのシート） */
#submit-sheet {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2300;
  background: white; border-radius: 20px 20px 0 0; max-height: 70vh; overflow-y: auto;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.18);
}
#submit-sheet.open { display: block; }
#submit-header {
  padding: 14px 18px; background: #e67e22; color: white; border-radius: 20px 20px 0 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; font-weight: 700; position: sticky; top: 0;
}
#submit-close { background: none; border: none; color: white; font-size: 22px; cursor: pointer; padding: 0 2px; }
#submit-body { padding: 14px 18px 24px; }
.submit-label { font-size: 12px; font-weight: 600; color: #555; margin: 10px 0 6px; }
#submit-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-chip {
  min-height: 36px; padding: 6px 12px; border-radius: 18px; border: 1.5px solid #d0d0d0;
  background: white; font-size: 12px; color: #555; cursor: pointer; transition: all 0.15s;
}
.cat-chip.active { background: #e67e22; border-color: transparent; color: white; font-weight: 600; }
#submit-name, #submit-nickname {
  width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 10px;
  font-size: 14px; outline: none;
}
#submit-name:focus, #submit-nickname:focus { border-color: #e67e22; }
.submit-note { font-size: 11px; color: #999; line-height: 1.7; margin-top: 8px; }
#submit-send {
  width: 100%; margin-top: 12px; min-height: 46px; padding: 12px;
  background: #e67e22; color: white; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.2s;
}
#submit-send:hover { background: #d35400; }
#submit-send:disabled { opacity: 0.6; cursor: default; }
#submit-done { margin-top: 10px; font-size: 13px; color: #27ae60; font-weight: 600; text-align: center; }

/* Turnstile（見えない確認）の置き場。画面に出さない */
#turnstile-slot { position: fixed; left: -9999px; bottom: 0; width: 1px; height: 1px; overflow: hidden; }

/* 商品枠（設計書3-8・_work/17 4-1：「広告」ラベル＋枠線か背景色で本文と区別する） */
.ad-block {
  margin-top: 8px; padding: 8px 10px; background: #fafafa;
  border: 1px solid #e8e8e8; border-radius: 10px;
}
.ad-label {
  display: inline-block; padding: 1px 8px; margin-bottom: 4px;
  background: #888; color: white; border-radius: 4px; font-size: 11px; font-weight: 700;
}
.ad-lead { font-size: 11px; color: #666; line-height: 1.6; margin-bottom: 6px; }
.ad-item { margin-bottom: 6px; }
.ad-item a { font-size: 13px; color: #1a73e8; text-decoration: underline; line-height: 1.5; }
.ad-note { font-size: 11px; color: #888; line-height: 1.5; margin-top: 1px; }
.ad-legal { font-size: 10px; color: #aaa; line-height: 1.6; margin-top: 6px; padding-top: 6px; border-top: 1px solid #eee; }

/* ===== 注意喚起モーダル（流用。R-12） ===== */
#caution-overlay {
  display: none; position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.55); align-items: center; justify-content: center;
}
#caution-overlay.open { display: flex; }
#caution-modal {
  background: white; border-radius: 18px; padding: 0;
  width: 360px; max-width: 92vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  display: flex; flex-direction: column; overflow: hidden;
}
#caution-header {
  background: #e67e22; color: white;
  padding: 14px 18px; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
#caution-body { padding: 20px 20px 16px; font-size: 13px; color: #333; line-height: 1.75; }
#caution-body p { margin: 0 0 12px; }
#caution-check-row {
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px 16px; font-size: 13px; color: #555; cursor: pointer;
}
#caution-check-row input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: #e67e22; }
#caution-ok {
  margin: 0 20px 20px; width: calc(100% - 40px);
  padding: 12px; background: #e67e22; color: white;
  border: none; border-radius: 10px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.2s;
}
#caution-ok:hover { background: #d35400; }

/* ===== 使い方チュートリアル（旧アプリのスポットライト型を流用） ===== */
#tutorial-overlay {
  display: none; position: fixed; inset: 0; z-index: 10000; pointer-events: all;
}
#tutorial-overlay.open { display: block; }
#tutorial-spotlight {
  position: fixed; z-index: 10001; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.72);
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, border-radius 0.3s;
}
#tutorial-tooltip {
  display: none; position: fixed; z-index: 10002; width: min(320px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); overflow-y: auto; background: white; border-radius: 14px;
  padding: 16px 18px 14px; box-shadow: 0 4px 24px rgba(0,0,0,0.22);
}
#tutorial-tooltip.open { display: block; }
#tutorial-step-label { margin-bottom: 6px; color: #999; font-size: 12px; font-weight: 600; }
#tutorial-title { margin: 0 0 7px; color: #1a1a2e; font-size: 17px; line-height: 1.4; }
#tutorial-description { margin: 0 0 14px; color: #555; font-size: 14px; line-height: 1.7; }
#tutorial-link {
  display: inline-block; margin: -6px 0 14px; padding: 6px 0;
  color: #1a73e8; font-size: 13px; line-height: 1.6;
}
#tutorial-link[hidden] { display: none; }
.tutorial-footer { display: flex; align-items: center; gap: 10px; }
#tutorial-close, #tutorial-next {
  min-width: 64px; min-height: 44px; border-radius: 10px; font-size: 13px; cursor: pointer; flex-shrink: 0;
}
#tutorial-close { border: 1px solid #ddd; background: white; color: #666; }
#tutorial-next { border: none; padding: 8px 14px; background: #1a1a2e; color: white; font-weight: 700; }
#tutorial-dots { display: flex; justify-content: center; gap: 5px; margin: 0 auto; }
.tutorial-dot { width: 6px; height: 6px; border-radius: 50%; background: #ddd; transition: all 0.2s; }
.tutorial-dot.active { width: 18px; border-radius: 3px; background: #1a1a2e; }
#tutorial-demo-card {
  display: none; position: fixed; z-index: 10001; top: min(180px, 22dvh); left: 50%;
  transform: translateX(-50%); width: min(320px, calc(100vw - 32px)); padding: 15px 16px;
  background: white; border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,0.22);
}
#tutorial-demo-card.open { display: block; }
.tutorial-demo-name { margin-bottom: 4px; color: #1a1a2e; font-size: 15px; font-weight: 700; }
.tutorial-demo-address { margin-bottom: 8px; color: #999; font-size: 12px; }
.tutorial-demo-badge { display: inline-block; padding: 3px 8px; border-radius: 10px; background: #16a085; color: white; font-size: 11px; }
.tutorial-demo-map { margin: 10px 0; padding: 8px 0; border-bottom: 1px solid #f0f0f0; color: #1a73e8; font-size: 12px; }
.tutorial-demo-dog { margin-bottom: 8px; color: #12795f; font-size: 11px; font-weight: 600; line-height: 1.6; }
#tutorial-visit-sample, #tutorial-report-sample {
  display: block; width: 100%; min-height: 44px; margin-top: 6px;
  border: 1.5px solid #f39c12; border-radius: 8px;
  background: #fff8ee; color: #555; font-size: 13px; font-weight: 600;
  animation: tutorial-button-pulse 1.1s ease-in-out infinite;
}
@keyframes tutorial-button-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(243,156,18,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(243,156,18,0.2); }
}
@media (prefers-reduced-motion: reduce) {
  #tutorial-spotlight { transition: none; }
  #tutorial-visit-sample, #tutorial-report-sample { animation: none; }
}

/* ===== メンテナンス表示（表11 maintenance_mode） ===== */
#maintenance-overlay {
  display: none; position: fixed; inset: 0; background: rgba(26,26,46,0.96); z-index: 99999;
  align-items: center; justify-content: center; flex-direction: column; gap: 16px;
  text-align: center; padding: 32px;
}
#maintenance-overlay.open { display: flex; }
#maintenance-overlay .m-icon { font-size: 48px; }
#maintenance-overlay .m-title { font-size: 22px; font-weight: 800; color: #fff; }
#maintenance-overlay .m-desc { font-size: 14px; color: #aaa; line-height: 1.8; max-width: 320px; }

/* ===== レスポンシブ（設計書3-13。折り返しは599/1023の2本だけ） ===== */

/* スマホ（〜599px）：リストは全幅・件数表示は隠す（旧アプリ踏襲） */
@media (max-width: 599px) {
  #list-panel { width: 100%; }
  #genre-select { max-width: 95px; }
  #count-display { display: none; }
  #region-overlay { align-items: flex-end; padding: 0; }
  #region-dialog { width: 100%; max-height: 82dvh; border-radius: 18px 18px 0 0; }
  #region-groups { padding: 8px 12px 18px; }
  .region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}

/* PC（1024px〜）：検索バーをヘッダー行に統合して2段に。リストは360pxで常時表示 */
@media (min-width: 1024px) {
  :root { --chrome-bottom: 95px; --content-top: 95px; }
  /* 検索バーはタイトルと「もしもの時」リンクの間を伸縮して埋める（固定幅にしない） */
  #search-bar {
    top: 0; left: 250px; right: 200px; width: auto; height: 50px; z-index: 1001;
    background: transparent; border-bottom: none; padding: 8px 0;
  }
  #vet-link { position: fixed; top: 13px; right: 14px; z-index: 1002; }
  /* ヘッダー右の件数はPCではタブの件数表示に譲る（幅の衝突を避ける） */
  #count-display { display: none; }
  #filter-bar { top: 50px; right: 360px; }
  #map-container {
    right: 360px;
  }
  #notice-band { right: 360px; }
  #ad-disclosure { right: 360px; }
  #list-panel { width: 360px; transform: none; }
  #list-toggle { display: none; }
  #list-close { display: none; }
  #locate-btn { right: 374px; }
}