* { box-sizing: border-box; }

/* 宮古島の海・砂浜の写真を元にした配色パレット。
   操作系のアクセントはオーシャンブルー1色に絞り、残りは背景・罫線・
   テキストといった脇役として全体に薄く効かせる(ミニマル路線)。 */
:root {
  --accent: #72C9DC;        /* オーシャンブルー(写真そのままの色。淡い背景・枠線用) */
  --accent-strong: #1E7C93; /* オーシャンブルーを濃くした色。白文字と組み合わせるボタン等用 */
  --accent-tint: #EAF6F9;   /* オーシャンブルーの極薄背景 */
  --sand: #FACA74;          /* サンドイエロー。ワンポイントのみに使用 */
  --cream: #F8F6EE;         /* ベージュを控えめにしたページ地色(白基調は維持) */
  --border: #E7E1D2;        /* タン寄りの薄い罫線色 */
  --border-strong: #D9CFB8;
  --text-primary: #2B2B28;  /* 店名などメインテキスト */
  --text-secondary: #74776F;/* スレートグレー寄りの補助テキスト */
  --danger: #c0392b;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
  color: var(--text-primary);
  background: var(--cream);
}

.app-header {
  padding: 10px 16px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.app-header h1 {
  font-size: 18px;
  margin: 0;
}
.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-header {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
}
.btn-header-primary {
  background: var(--accent-strong);
  color: #fff;
  border-color: transparent;
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip {
  border: 1px solid var(--border-strong);
  background: #fff;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.chip.active {
  background: var(--accent-strong);
  color: #fff;
  border-color: transparent;
}

.app-main {
  display: flex;
  height: calc(100vh - 70px);
}
#map {
  flex: 1;
  position: relative;
  background: #e5e3df;
  /* 高さはCSSのパーセント指定に頼らず、JS(app.js)で明示的にpx指定する。
     flex:1 と height:100% の併用はGoogle Mapsのタイル内部計算が
     0pxになる既知の相性問題があるため、height指定はJS側で行う。 */
}
.map-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  text-align: center;
  font-size: 13px;
  z-index: 10;
}
.map-fallback button {
  margin-top: 8px;
  padding: 8px 16px;
  background: var(--accent-strong);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#list-panel {
  width: 360px;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  background: var(--cream);
}

#sort-bar {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
#btn-use-mylocation {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

#spot-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spot-item {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.spot-item:hover { background: var(--accent-tint); }
.spot-name {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.spot-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.spot-category {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
}
/* カテゴリごとの色。地図ピン(CATEGORY_PIN_COLORS)と同系統の色相を、
   一覧では「淡い背景+濃い文字」の組み合わせにしてミニマルな印象を保つ。 */
.cat-food        { background: #FBE6D2; color: #8A4B1E; }
.cat-izakaya     { background: #F6DAD3; color: #8A2E1C; }
.cat-cafe        { background: #EFE2D0; color: #6B4A26; }
.cat-sightseeing { background: #DCF0F5; color: #14647D; }
.cat-scenery     { background: #E1EBE3; color: #3E5C48; }
.travel-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
}
.spot-comment {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.spot-item-admin {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.btn-edit-sm, .btn-delete-sm {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-primary);
}
.btn-delete-sm {
  color: var(--danger);
  border-color: #e0a8a0;
}

#detail-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
#detail-modal.hidden { display: none; }
.modal-inner {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  width: min(90vw, 420px);
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}
#modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}
.modal-sub { color: var(--text-secondary); margin-top: -6px; }
.modal-fields {
  display: grid;
  grid-template-columns: 90px 1fr;
  row-gap: 4px;
  font-size: 13px;
  margin: 10px 0;
}
.modal-fields dt { color: var(--text-secondary); }
.modal-fields dd { margin: 0; }
.modal-comment {
  font-size: 13px;
  background: var(--cream);
  padding: 8px 10px;
  border-radius: 6px;
}
#modal-map-link {
  display: inline-block;
  margin-top: 8px;
  margin-right: 10px;
}
#modal-set-origin {
  display: block;
  margin-top: 12px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: var(--accent-strong);
  color: #fff;
  cursor: pointer;
  width: 100%;
}
.modal-admin-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.modal-admin-actions .btn-edit,
.modal-admin-actions .btn-delete {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 13px;
}
.modal-admin-actions .btn-delete {
  color: #fff;
  background: var(--danger);
  border-color: transparent;
}

/* スマホ: 地図を上、一覧を下にスタック */
@media (max-width: 768px) {
  .app-main { flex-direction: column; height: auto; }
  /* #map と #list-panel の高さは app.js の sizeMapContainer() が
     画面幅に応じてpxで明示的に設定する(CSSのパーセント/vh指定は使わない)。 */
  #list-panel { width: 100%; }
  /* ★根本原因の修正:
     #map は元々 flex: 1 (flex-basis:0%) が指定されている。デスクトップ(横並び)では
     高さがクロス軸になるため問題ないが、ここで flex-direction が column になると
     高さがメイン軸になり、flex-basis:0% がJS(sizeMapContainer)の設定した
     インラインheightより優先されてしまい、実際の描画高さが0pxに潰れてしまう。
     これがモバイルでGoogleマップが一切表示されなかった直接の原因だった。
     flex: none にして flex-basis を auto に戻し、JSが設定したheightを
     そのまま使わせることで解消する。 */
  #map { flex: none; }
}