/* Playgrounds#list 専用（mobile-first） */
:root{
  --bg-top:#ffd79f;
  --bg-bottom:#ffbe74;
  --accent:#ff8f2a;
  --accent-weak:#ffe2c5;
  --text-strong:#6a3b13;
  --text-muted:#6b7280;
  --card-shadow:0 6px 18px rgba(0,0,0,.08);
}

.playgrounds-list-container{
  max-width:1200px;
  margin:0 auto;
  padding:20px 16px 32px;
  color:var(--text-strong);
}

/* ヘッダー */
.playgrounds-list-container .list-header{
  text-align:center;
  margin-bottom:24px;
}
.playgrounds-list-container .list-header h1{
  margin:0 0 8px;
  font-weight:800;
  color:var(--accent);
}
.playgrounds-list-container .subtitle{
  color:var(--text-muted);
  margin:0 0 16px;
}
.playgrounds-list-container .header-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
}

/* ボタン */
.playgrounds-list-container .btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9999px;padding:12px 18px;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;
  transition:transform .05s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.playgrounds-list-container .btn-primary{ background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(255,143,42,.25); }
.playgrounds-list-container .btn-primary:hover{ transform:translateY(-1px); }
.playgrounds-list-container .btn-secondary{ background:#fff; color:var(--accent); border:2px solid var(--accent); }
.playgrounds-list-container .btn-outline{ background:#fff; color:var(--accent); border:1px solid var(--accent); }
.playgrounds-list-container .btn-outline-secondary{ background:#fff; color:var(--text-muted); border:1px solid #e5e7eb; }

/* フィルター */
.playgrounds-list-container .filter-section{
  background:#fff; border:1px solid #f3f4f6; border-radius:16px;
  padding:16px; margin-bottom:20px; box-shadow:var(--card-shadow);
}
.playgrounds-list-container .filter-group{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.playgrounds-list-container .filter-item{ flex:1 1 220px; min-width:220px; }
.playgrounds-list-container .filter-item label{ display:block; font-weight:700; margin:0 0 6px; color:var(--text-strong); }

.playgrounds-list-container .form-select{
  width:100%; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; background:#fff;
}
.playgrounds-list-container .checkbox-group{ display:flex; gap:14px; flex-wrap:wrap; }
.playgrounds-list-container .checkbox-label{ display:flex; align-items:center; gap:6px; font-weight:500; color:var(--text-strong); }
.playgrounds-list-container .filter-actions{ display:flex; gap:10px; }

/* 検索結果サマリー／タグ */
.playgrounds-list-container .results-summary{
  background:var(--accent-weak); border:1px solid rgba(255,143,42,.25);
  padding:12px 14px; border-radius:12px; margin:16px 0 20px;
}
.playgrounds-list-container .results-summary p{ margin:0; }
.playgrounds-list-container .results-summary strong{ color:var(--accent); }
.playgrounds-list-container .active-filters{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.playgrounds-list-container .filter-label{ font-size:12px; color:var(--text-muted); }
.playgrounds-list-container .filter-tag{
  background:var(--accent); color:#fff; padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:700;
}

/* 一覧グリッド */
.playgrounds-list-container .playgrounds-grid{
  display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:28px;
}
.playgrounds-list-container .playground-card{
  background:#fff;
  border-radius:16px;
  border:1px solid #f3f4f6;
  padding:16px;
  box-shadow:var(--card-shadow);
  transition:transform .05s ease, box-shadow .2s ease;
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  border-radius:16px; /* フォーカス枠用に角丸維持 */
}
.playgrounds-list-container .playground-card:hover{ 
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
/* キーボード操作のフォーカス見やすく */
.playgrounds-list-container .playground-card:focus-visible{
  outline:3px solid rgba(255,143,42,.35);
  outline-offset:3px;
}

/* 写真 */
.playgrounds-list-container .playground-card{
  padding:16px; overflow:hidden; /* 角丸に写真を合わせる */
}
.playgrounds-list-container .playground-photo{
  position:relative; height:160px; margin:-16px -16px 12px; overflow:hidden;
}
.playgrounds-list-container .result-photo{
  width:100%; height:100%; object-fit:cover; display:block;
}
.playgrounds-list-container .result-photo.no-image{
  object-fit:contain; background:#f8f9fa; padding:20px; border-bottom:1px solid #f1f5f9;
}

/* カード内 */
.playgrounds-list-container .card-header{ margin-bottom:8px; }
.playgrounds-list-container .playground-name{ margin:0; }
.playgrounds-list-container .playground-link{ color:inherit; text-decoration:none; font-weight:800; }
.playgrounds-list-container .playground-link:hover{ color:var(--accent); }

.playgrounds-list-container .playground-subtitle{ margin:4px 0 10px; color:var(--text-muted); }

.playgrounds-list-container .address,
.playgrounds-list-container .genre{ display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--text-strong); }
.playgrounds-list-container .distance{ color:var(--accent); font-weight:600; }

.playgrounds-list-container .genre-tag{
  background:rgba(255,143,42,.1); color:var(--accent); padding:4px 8px; border-radius:9999px; font-weight:700; font-size:12px;
}

/* 料金タグ */
.playgrounds-list-container .price-info{ margin:12px 0 8px; display:flex; gap:8px; flex-wrap:wrap; }
.playgrounds-list-container .price-tag{
  padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:800;
}
.playgrounds-list-container .price-free{ background:#e8f6ee; color:#1d7a50; }
.playgrounds-list-container .price-budget{ background:#fff3cd; color:#7a5b00; }
.playgrounds-list-container .price-premium{ background:#fde2e2; color:#a61b2b; }

/* 特徴タグ */
.playgrounds-list-container .features{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.playgrounds-list-container .feature-tag{
  background:#f3f4f6; color:#374151; padding:3px 8px; border-radius:10px; font-size:12px;
}

/* フッター */
.playgrounds-list-container .list-footer{ text-align:center; padding-top:24px; border-top:1px solid #f3f4f6; }
.playgrounds-list-container .footer-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

/* スマホ最適化 */
@media (max-width:767px){
  /* .playgrounds-list-container .filter-group{ flex-direction:column; } */
  .playgrounds-list-container .filter-item{ min-width:100%; }
}

/* Tablet */
@media (min-width:768px){
  .playgrounds-list-container{ padding:24px; }
  .playgrounds-list-container .playgrounds-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
  .playgrounds-list-container .playground-photo{ height:180px; }
}

/* Desktop */
@media (min-width:1200px){
  .playgrounds-list-container{ padding:28px; }
  .playgrounds-list-container .playgrounds-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
  .playgrounds-list-container .playground-photo{ height:200px; }
}