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

*, *::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; }

/* ===== ヘッダー（旧アプリと同じ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; }

/* ===== 検索バー（流用） ===== */
#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: 139px; 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 { position: fixed; top: 139px; left: 0; right: 0; bottom: 0; }
#map { width: 100%; height: 100%; }
/* 拡大縮小ボタンは右下（設計書UI-A4）。自前ボタンと重ならない高さに置く */
.maplibregl-ctrl-bottom-right { bottom: 180px; }

/* ===== ローディング（流用） ===== */
#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); } }

/* ===== 現在地ボタン（流用。位置は旧アプリのまま＝UI-D6撤回） ===== */
#locate-btn {
  position: fixed; bottom: 72px; right: 14px; z-index: 1800;
  width: 46px; height: 46px; border-radius: 50%;
  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;
  font-size: 20px; transition: box-shadow 0.2s, transform 0.15s;
}
#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; }

/* ===== リストボタン（流用） ===== */
#list-toggle {
  position: fixed; bottom: 20px; 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: 139px; 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; }
.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; }
#summary-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; font-size: 22px; color: #999; cursor: pointer;
}

/* ===== 注意喚起モーダル（流用。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; }

/* ===== メンテナンス表示（表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; }
}

/* PC（1024px〜）：検索バーをヘッダー行に統合して2段に。リストは360pxで常時表示 */
@media (min-width: 1024px) {
  /* 検索バーはタイトルと「もしもの時」リンクの間を伸縮して埋める（固定幅にしない） */
  #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; }
  #map-container { top: 95px; right: 360px; }
  #notice-band { top: 95px; right: 360px; }
  #list-panel { top: 95px; width: 360px; transform: none; }
  #list-toggle { display: none; }
  #list-close { display: none; }
  #locate-btn { right: 374px; }
  .maplibregl-ctrl-bottom-right { right: 360px; }
}