/* =============================================================
   Happy Map — Global Stylesheet
   
   カラー役割の設計：
   --brand   : ブランド（紫グラデ）→ ロゴ・ヘッダーアクセント
   --action  : 操作色（青）        → ボタン・リンク・主要アクション
   --success : 状態色（緑）        → 成功・公開・いいね済み
   --warn    : 注意色（橙）        → 警告・保護エリア
   --danger  : 削除色（赤）        → 破壊的操作のみ
   同じ色に複数の意味を持たせない
============================================================= */

/* ── CSS変数 ── */
:root {
  /* ブランド */
  --brand-from:   #6d28d9;
  --brand-to:     #4f46e5;
  --brand-grad:   linear-gradient(135deg, var(--brand-from), var(--brand-to));

  /* 操作色 */
  --action:       #2563eb;
  --action-dark:  #1d4ed8;
  --action-light: #eff6ff;

  /* 状態色 */
  --success:      #16a34a;
  --success-light:#f0fdf4;

  /* 注意色 */
  --warn:         #ea580c;
  --warn-light:   #fff7ed;

  /* 削除色 */
  --danger:       #dc2626;
  --danger-light: #fef2f2;

  /* テキスト */
  --text-primary:   #111827;
  --text-secondary: #6b7280;
  --text-muted:     #9ca3af;

  /* 背景・ボーダー */
  --bg:           #f4f4f5;
  --surface:      #ffffff;
  --border:       #e5e7eb;
  --border-focus: var(--action);

  /* 共通 */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --transition: 0.18s ease;
}

/* ── リセット ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* iOS スクロール最適化 */
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
a { color: var(--action); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ============================================================
   サイドナビゲーション
============================================================ */
.sidenav {
  position: fixed;
  top: 0; left: 0;
  width: 260px;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.sidenav.open { transform: translateX(0); box-shadow: var(--shadow-lg); }

/* スマホ：ナビ背後オーバーレイ */
.nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
}
.nav-overlay.show { display: block; }

/* PCでは常時表示 */
@media (min-width: 1024px) {
  .sidenav { transform: translateX(0); box-shadow: none; }
  .main-content { margin-left: 260px; }
  .menu-btn { display: none !important; }
  .nav-overlay { display: none !important; }
}

.sidenav-header {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-container {
  display: flex; align-items: center; gap: 10px;
}
.logo-icon {
  width: 36px; height: 36px;
  background: var(--brand-grad);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 18px;
}
.app-name {
  font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -.3px;
}
.close-btn {
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer; padding: 4px;
  display: none;
}
@media (max-width: 1023px) { .close-btn { display: block; } }

.sidenav-user {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.user-avatar { color: var(--text-muted); font-size: 32px; line-height: 1; }
.username { font-weight: 700; font-size: 14px; color: var(--text-primary); display: block; }
.hapipo-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--brand-from); font-weight: 600;
  margin-top: 2px;
}

.sidenav-links {
  flex: 1;
  padding: 8px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.sidenav-links a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  font-size: 15px; font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition);
  /* iOS タップ最適化 */
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  min-height: 48px;
}
.sidenav-links a:hover {
  background: var(--action-light);
  color: var(--action);
  text-decoration: none;
}
.sidenav-links a.active {
  background: var(--action-light);
  color: var(--action);
  font-weight: 700;
}
.sidenav-links a i { width: 18px; text-align: center; font-size: 15px; }
.sidenav-links .logout-link { color: var(--danger); }
.sidenav-links .logout-link:hover { background: var(--danger-light); color: var(--danger); }

.sidenav-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
}

/* ============================================================
   メインコンテンツ
============================================================ */
.main-content { min-height: 100vh; }

/* トップバー */
.topbar {
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  /* fixed にしてスクロールしても常に最上部に固定 */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
}
/* PCではサイドナビ分だけ右にずらす */
@media (min-width: 1024px) {
  .topbar { left: 260px; }
}
/* topbar固定化に伴い、main-contentの先頭に余白を追加 */
.main-content { padding-top: 52px; }
.menu-btn {
  background: none; border: none;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 18px; cursor: pointer;
}
.menu-btn:hover { background: var(--bg); }
.page-title {
  font-size: 16px; font-weight: 700;
  color: var(--text-primary); margin: 0; flex: 1;
}
.page-title i { color: var(--action); margin-right: 6px; }
.hapipo-display-mini {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700;
  color: var(--brand-from);
  background: #f5f3ff;
  padding: 4px 10px; border-radius: 20px;
}

/* ============================================================
   ボタン
============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 15px; font-weight: 600;
  border: none; cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
  min-height: 48px;
  /* タップ最適化 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.btn:hover { text-decoration: none; filter: brightness(0.93); }
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--action);
  color: white;
}
.btn-secondary {
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--border); }
.btn-success {
  background: var(--success);
  color: white;
}
.btn-danger {
  background: var(--danger);
  color: white;
}
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ── フローティングボタングループ ──
   右下に縦並びで固定。間隔を確保して重ならないようにする。
   投稿(一番大きく・一番下) / 検索 / 現在地 の順
*/
.floating-btn {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  right: 20px;
  width: 56px; height: 56px;
  background: var(--action);
  color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,99,235,.4);
  z-index: 450;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.floating-btn:hover { background: var(--action-dark); transform: scale(1.06); text-decoration: none; }

.floating-search-btn {
  position: fixed;
  bottom: max(96px, calc(env(safe-area-inset-bottom, 24px) + 72px));
  right: 22px;
  width: 48px; height: 48px;
  background: var(--surface);
  color: var(--action); border: 2px solid var(--action);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 450;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.floating-search-btn:hover { background: var(--action-light); }

.floating-location-btn {
  position: fixed;
  bottom: max(160px, calc(env(safe-area-inset-bottom, 24px) + 136px));
  right: 22px;
  width: 48px; height: 48px;
  background: var(--surface);
  color: var(--success); border: 2px solid var(--success);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 450;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.floating-location-btn:hover { background: var(--success-light); }

/* ============================================================
   アラート・バナー
============================================================ */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-md);
  font-size: 14px; margin-bottom: 12px;
}
.alert i { margin-top: 1px; flex-shrink: 0; }
.alert-success { background: var(--success-light); color: var(--success); border: 1px solid #bbf7d0; }
.alert-error   { background: var(--danger-light);  color: var(--danger);  border: 1px solid #fecaca; }
.alert-warn    { background: var(--warn-light);    color: var(--warn);    border: 1px solid #fed7aa; }

.success-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--success-light);
  color: var(--success);
  border-bottom: 1px solid #bbf7d0;
  font-size: 14px; font-weight: 600;
}

.search-info-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
  font-size: 13px; color: var(--action);
}
.search-info-banner button {
  background: none; border: none; color: var(--action);
  font-size: 13px; cursor: pointer; text-decoration: underline;
}

/* ============================================================
   ポップアップ（地図）
============================================================ */
.map-popup { padding: 4px; min-width: 180px; max-width: 230px; }
.popup-experience {
  font-size: 15px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 6px; line-height: 1.4;
}
.popup-location {
  font-size: 12px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 4px; margin-bottom: 3px;
}
.popup-location i { color: var(--warn); }
.popup-date {
  font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
}
.popup-mine {
  margin-top: 8px; font-size: 12px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}

/* ============================================================
   フォーム共通
============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="datetime-local"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
input::placeholder { color: var(--text-muted); }

label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.required-mark { color: var(--danger); margin-left: 3px; }
.help-text {
  font-size: 12px; color: var(--text-muted);
  margin-top: 6px; display: flex; align-items: flex-start; gap: 5px;
}
.help-text i { margin-top: 1px; flex-shrink: 0; }

/* ============================================================
   投稿フォーム（post.php）
============================================================ */
.post-container {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: white;
  background: rgba(255,255,255,.22);
  padding: 8px 14px;
  border-radius: 20px;
  text-decoration: none; margin-bottom: 16px;
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255,255,255,.3);
  transition: all var(--transition);
}
.back-link:hover { background: rgba(255,255,255,.35); text-decoration: none; color: white; }

/* はぴぽ表示 */
.hapipo-display {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.hapipo-icon { font-size: 28px; color: var(--brand-from); margin-bottom: 4px; }
.hapipo-number {
  font-size: 40px; font-weight: 800;
  color: var(--brand-from); line-height: 1;
}
.hapipo-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.streak-info {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600;
  color: var(--warn); margin-top: 8px;
  background: var(--warn-light); padding: 4px 12px; border-radius: 20px;
}

/* フォームカード */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

/* ステップインジケーター */
.form-step-indicator {
  display: flex; align-items: center;
  margin-bottom: 28px;
}
.step-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1; position: relative;
}
.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px; left: calc(50% + 16px);
  width: calc(100% - 32px); height: 2px;
  background: var(--border);
}
.step-item.completed::after { background: var(--action); }
.step-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: var(--text-muted);
  background: var(--surface);
  transition: all var(--transition);
}
.step-item.active .step-circle {
  border-color: var(--action); color: var(--action); background: var(--action-light);
}
.step-item.completed .step-circle {
  border-color: var(--action); background: var(--action); color: white;
}
.step-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.step-item.active .step-label { color: var(--action); }

/* フォームセクション（ステップ） */
.form-section { display: none; }
.form-section.active { display: block; }
.section-title {
  font-size: 16px; font-weight: 700;
  color: var(--text-primary); margin: 0 0 20px;
  display: flex; align-items: center; gap: 8px;
}
.section-title i { color: var(--action); }
.form-group { margin-bottom: 18px; }

/* 体験入力 */
.experience-input-group {
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap;
}
.subject-input   { flex: 1; min-width: 100px; }
.particle-select { width: 70px; flex-shrink: 0; }
.predicate-input { flex: 2; min-width: 140px; }

.experience-preview {
  margin-top: 10px; padding: 12px 16px;
  background: #f5f3ff; border-radius: var(--radius-md);
  font-size: 15px; font-weight: 700; color: var(--brand-from);
  min-height: 44px;
  border: 1.5px dashed #c4b5fd;
}
.preview-subject, .preview-particle, .preview-predicate { color: var(--brand-from); }

/* 地図 */
.map-container {
  height: 300px; border-radius: var(--radius-md);
  overflow: hidden; border: 1.5px solid var(--border);
  margin: 10px 0;
}

/* GPS / 場所検索 */
.gps-button {
  width: 100%; padding: 10px;
  background: var(--success-light);
  color: var(--success);
  border: 1.5px solid #86efac;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600;
  cursor: pointer; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--transition);
}
.gps-button:hover { background: #dcfce7; }

.search-box {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.search-box input { flex: 1; }
.search-box button {
  padding: 10px 14px; background: var(--action); color: white;
  border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 14px;
}

.search-results { display: none; }
.search-results.show {
  display: block;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden; margin-bottom: 8px;
}
.search-result-item {
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border); font-size: 14px;
  transition: background var(--transition);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--action-light); }
.result-name { font-weight: 600; color: var(--text-primary); }
.result-address { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* 写真アップロード */
.photo-upload {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center; cursor: pointer;
  color: var(--text-muted); font-size: 14px;
  transition: all var(--transition);
}
.photo-upload:hover { border-color: var(--action); color: var(--action); background: var(--action-light); }
.photo-upload i { font-size: 28px; display: block; margin-bottom: 8px; }
.hapipo-bonus {
  background: var(--success-light);
  color: var(--success);
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; margin-left: 6px;
}

/* トグルスイッチ */
.toggle-container {
  display: flex; align-items: center; gap: 10px;
}
.toggle-switch {
  width: 44px; height: 24px;
  background: var(--border);
  border-radius: 12px; cursor: pointer;
  position: relative; transition: background var(--transition);
  flex-shrink: 0;
}
.toggle-switch.active { background: var(--success); }
.toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: white; border-radius: 50%;
  transition: left var(--transition);
  box-shadow: var(--shadow-sm);
}
.toggle-switch.active .toggle-knob { left: 23px; }
.toggle-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }

/* ボタングループ */
.button-group {
  display: flex; gap: 10px; margin-top: 24px;
}
.button-group .btn { flex: 1; }

/* ============================================================
   プライバシー設定
============================================================ */
.privacy-settings-container {
  max-width: 680px; margin: 0 auto;
  padding: 20px 16px 60px;
}
.setting-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.setting-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.setting-header i { font-size: 20px; color: var(--action); }
.setting-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }

.toggle-setting {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.toggle-setting:last-of-type { border-bottom: none; }
.toggle-info { flex: 1; }
.toggle-info strong { font-size: 14px; color: var(--text-primary); display: block; margin-bottom: 2px; }
.toggle-info p { font-size: 12px; color: var(--text-muted); margin: 0; }

/* ============================================================
   マイ投稿
============================================================ */
.my-posts-container {
  display: flex; gap: 0; height: calc(100vh - 52px);
}
.posts-list-panel {
  flex: 1; overflow-y: auto;
  padding: 16px;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.posts-map-panel {
  width: 380px; flex-shrink: 0;
  position: sticky; top: 0; height: calc(100vh - 52px);
}
@media (max-width: 768px) {
  .my-posts-container { flex-direction: column; height: auto; }
  .posts-map-panel { width: 100%; height: 300px; position: relative; }
}

/* 投稿カード */
.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 12px;
  transition: box-shadow var(--transition);
  cursor: pointer;
}
.post-card:hover { box-shadow: var(--shadow-md); }
.post-card.highlighted {
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.post-image img {
  width: 100%; height: 180px;
  object-fit: cover; display: block;
}
.post-content { padding: 14px 16px; }
.post-experience {
  font-size: 16px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 6px; line-height: 1.4;
}
.exp-subject  { color: var(--action); }
.exp-particle { color: var(--text-muted); margin: 0 1px; }
.exp-predicate{ color: var(--text-primary); }
.post-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: var(--text-muted);
  margin-bottom: 10px;
}
.post-meta span { display: flex; align-items: center; gap: 4px; }
.post-meta i { font-size: 11px; }
.badge-public  { background: var(--success-light); color: var(--success); padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.badge-private { background: var(--bg); color: var(--text-muted); padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.post-actions { display: flex; gap: 8px; align-items: center; }
.map-link-btn {
  font-size: 12px; color: var(--action); background: var(--action-light);
  border: none; padding: 5px 10px; border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}

/* 投稿統計バー */
.posts-stats-bar {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.stat-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px; text-align: center; flex: 1; min-width: 80px;
}
.stat-chip .chip-num {
  font-size: 22px; font-weight: 800; color: var(--brand-from);
  display: block; line-height: 1;
}
.stat-chip .chip-label {
  font-size: 11px; color: var(--text-muted); margin-top: 3px;
}

/* フィルターバー */
.filter-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.filter-btn {
  padding: 6px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-secondary);
  cursor: pointer; transition: all var(--transition);
}
.filter-btn.active {
  background: var(--action); color: white; border-color: var(--action);
}

/* ============================================================
   検索モーダル
============================================================ */
.search-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  display: none; align-items: flex-end;
}
.search-modal.show { display: flex; }
@media (min-width: 600px) {
  .search-modal { align-items: center; justify-content: center; }
}
.search-modal-content {
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 600px) {
  .search-modal-content {
    border-radius: var(--radius-lg);
    max-width: 480px; max-height: 85vh;
  }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.modal-title { font-size: 17px; font-weight: 700; margin: 0; color: var(--text-primary); }
.modal-close {
  background: none; border: none; font-size: 22px;
  color: var(--text-muted); cursor: pointer; line-height: 1;
}

/* 検索マップ */
.search-map-container {
  height: 240px; border-radius: var(--radius-md);
  overflow: hidden; border: 1.5px solid var(--border);
  margin-bottom: 8px;
}

/* 半径選択 */
.radius-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.radius-option {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 6px; text-align: center; cursor: pointer;
  transition: all var(--transition);
  background: var(--surface);
}
.radius-option:hover { border-color: var(--action); }
.radius-option.selected { border-color: var(--action); background: var(--action-light); }
.radius-option input { display: none; }
.radius-option span { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.hapipo-cost {
  display: block; font-size: 11px; color: var(--brand-from);
  font-weight: 600; margin-top: 3px;
}

/* 場所検索 */
.location-search-box { margin-bottom: 12px; }
.location-search-input {
  display: flex; gap: 8px;
}
.location-search-input input { flex: 1; }
.location-search-input button {
  padding: 10px 14px; background: var(--action); color: white;
  border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 14px;
}
.search-results-list { display: none; }
.search-results-list.show {
  display: block; border: 1.5px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; margin-top: 6px;
  max-height: 200px; overflow-y: auto;
}

/* ============================================================
   プライバシーガイドモーダル
============================================================ */
.privacy-guide-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.privacy-guide-modal.show { display: flex; }
.privacy-guide-content {
  background: var(--surface);
  border-radius: var(--radius-lg);
  max-width: 440px; width: 100%;
  padding: 28px 24px;
  box-shadow: var(--shadow-lg);
  animation: popIn .25s ease;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
.guide-header { text-align: center; margin-bottom: 20px; }
.guide-header i { font-size: 40px; color: var(--warn); margin-bottom: 10px; display: block; }
.guide-header h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--text-primary); }
.guide-list { list-style: none; padding: 0; margin: 0 0 20px; }
.guide-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text-secondary); line-height: 1.6;
}
.guide-list li:last-child { border-bottom: none; }
.guide-list li i { color: var(--success); margin-top: 2px; flex-shrink: 0; }
.guide-actions { display: flex; flex-direction: column; gap: 8px; }

/* ============================================================
   ログイン・登録
============================================================ */
.auth-container {
  max-width: 400px;
  margin: 60px auto;
  padding: 0 16px;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-md);
}
.auth-logo {
  text-align: center; margin-bottom: 28px;
}
.auth-logo .logo-icon-lg {
  width: 56px; height: 56px;
  background: var(--brand-grad);
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-size: 28px; margin-bottom: 12px;
}
.auth-logo h1 { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: var(--text-primary); }
.auth-logo p  { margin: 0; font-size: 14px; color: var(--text-muted); }
.auth-footer { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-secondary); }

/* ============================================================
   ユーティリティ
============================================================ */
.h { color: var(--text-primary); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 13px; }

/* ============================================================
   レスポンシブ補完
============================================================ */
@media (max-width: 480px) {
  .experience-input-group { flex-direction: column; }
  .subject-input, .particle-select, .predicate-input { width: 100%; }
  .radius-selector { grid-template-columns: repeat(2, 1fr); }
  .button-group { flex-direction: column; }
  .button-group .btn { width: 100%; }
}

/* ============================================================
   ピン近接プレビュー（ラベル）
============================================================ */
.pin-preview-tooltip .leaflet-tooltip-content {
  padding: 0;
}
.pin-label {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  overflow: hidden;
  max-width: 160px;
  pointer-events: none;
}
.pin-label-img {
  width: 100%; height: 80px;
  object-fit: cover; display: block;
}
.pin-label-text {
  font-size: 12px; font-weight: 700;
  color: var(--text-primary);
  padding: 6px 8px;
  line-height: 1.4;
  white-space: normal;
  word-break: break-all;
}

/* ============================================================
   ボトムシート（検索結果一覧）
============================================================ */
.bottom-sheet-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.3);
  z-index: 600;
}
.bottom-sheet-backdrop.show { display: block; }

.bottom-sheet {
  position: fixed;
  bottom: calc(60px + env(safe-area-inset-bottom)); /* ボトムナビの上 */
  left: 0; right: 0;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.15);
  z-index: 700;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  max-height: 75vh;
  display: flex; flex-direction: column;
}
.bottom-sheet.peek  { transform: translateY(calc(100% - 72px)); }
.bottom-sheet.half  { transform: translateY(30%); }
.bottom-sheet.full  { transform: translateY(0); }

/* PCでは非表示（サイドパネルで代替） */
@media (min-width: 768px) {
  .bottom-sheet, .bottom-sheet-backdrop { display: none !important; }
}

.bs-handle-wrap {
  padding: 10px 0 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: grab; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.bs-handle {
  width: 40px; height: 4px;
  background: var(--border); border-radius: 2px;
}
.bs-title {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
}

.bs-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 0 0 8px;
}
.bs-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.bs-item:active { background: var(--action-light); }
.bs-item-thumb {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--bg);
}
.bs-item-thumb-placeholder {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.bs-item-body { flex: 1; min-width: 0; }
.bs-item-exp {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-item-meta { font-size: 12px; color: var(--text-muted); }

/* 引き出しトリガーボタン（地図上） */
.bs-trigger {
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px; font-weight: 700;
  color: var(--action);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  z-index: 500;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.bs-trigger:hover { background: var(--action-light); }

/* ============================================================
   5タブ ボトムナビ
============================================================ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(60px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 2px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.12);
  z-index: 600;
  justify-content: space-around;
  align-items: stretch;
}
@media (max-width: 1023px) {
  .bottom-nav { display: flex; }
  .main-content { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) {
  .bottom-nav { display: none !important; }
}

.bnav-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex: 1; gap: 3px;
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 2px;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition);
}
.bnav-item i { font-size: 22px; }
.bnav-item.active { color: var(--action); }
.bnav-item.active i { filter: drop-shadow(0 0 4px rgba(37,99,235,.35)); }
.bnav-item:hover  { color: var(--action); text-decoration: none; }

/* 投稿ボタン（中央・大きく） */
.bnav-post { margin-top: -16px; }
.bnav-post-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--brand-from), var(--action));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(109,40,217,.5);
  margin-bottom: 2px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.bnav-post-icon i { font-size: 24px; color: white; }
.bnav-post.active .bnav-post-icon,
.bnav-post:hover  .bnav-post-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(109,40,217,.6);
}
.bnav-post span { font-size: 10px; font-weight: 700; }

/* セグメントコントロール（マイページ・設定のタブ切り替え） */
.seg-ctrl {
  display: flex;
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 3px;
  margin: 0 16px 16px;
}
.seg-btn {
  flex: 1; padding: 8px 4px;
  border: none; border-radius: calc(var(--radius-md) - 2px);
  background: transparent; color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.seg-btn.active {
  background: var(--surface);
  color: var(--action);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   iOS / スマホ 追加最適化
============================================================ */

/* セーフエリア対応（iPhone ノッチ・ホームバー） */
.topbar {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.sidenav {
  padding-bottom: env(safe-area-inset-bottom);
}

/* スクロール可能な要素をiOSでスムーズに */
.posts-list-panel,
.privacy-settings-container,
.search-modal-content,
.sidenav {
  -webkit-overflow-scrolling: touch;
}

/* フォーム入力のズーム防止（iOS は16px未満でズームする） */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="datetime-local"],
  select, textarea {
    font-size: 16px;
  }
}

/* フローティングボタン：スマホではボトムナビ(60px)の上に出す */
@media (max-width: 1023px) {
  .floating-btn {
    /* ボトムナビ60px + セーフエリア + 余白16px */
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 16px);
  }
  .floating-search-btn {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 80px);
  }
  .floating-location-btn {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 144px);
  }
}

/* タップ時の青いハイライトを全消し */
* { -webkit-tap-highlight-color: transparent; }

/* 地図コンテナのタッチ操作を地図に渡す */
#map-view, #mainmap, .map-container {
  touch-action: pan-x pan-y;
}

/* モバイルでのメニューボタンを大きく */
@media (max-width: 1023px) {
  .menu-btn {
    width: 44px; height: 44px;
    font-size: 20px;
  }
  .topbar { height: 56px; }
  .page-title { font-size: 17px; }
}