/* ========== 背景・共通トーン（planlist.css相当） ========== */
body{
  background: radial-gradient(circle at 0% 0%, #e5f2ff 0, #f3f7ff 40%, #f7f0ff 100%);
  font-family: 'M PLUS Rounded 1c', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hidden{ display:none; }

/* ========== メインコンテナ ========== */
.container{
  margin: 10px auto 48px;
  max-width: 980px;
  padding: 24px 28px 28px;
  background: rgba(255,255,255,.96);
  border-radius: 26px;
  box-shadow: 0 12px 35px rgba(84,118,196,.16), 0 0 0 1px rgba(232,238,252,.9);
  position: relative;
}

/* ========== タイトル ========== */
.title{
  text-align:center;
  font-size: 20px;
  font-weight: 700;
  color:#1f2633;
  margin:0;
}
.sub-title{
  margin-top: 60px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  font-size: .9rem;
  text-align:left;
  color:#7a849d;
  border-bottom: 1px solid #e2e7f4;
}

/* ========== 上部ボタン ========== */
.top-left-buttons{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
  margin: 70px auto 10px;
  max-width: 1015px;
}

.top-button{
  background: linear-gradient(135deg, #2f6bff, #7b5cff);
  color:#fff;
  padding: 10px 25px;
  border-radius: 10px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  box-shadow: 0 8px 20px rgba(60,105,255,.35), 0 0 0 1px rgba(220,230,255,.9);
  font-weight: 600;
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
  font-size: 12px;
  cursor:pointer;
}
.top-button:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 11px 26px rgba(60,105,255,.45), 0 0 0 1px rgba(230,238,255,.98);
}
.top-button:active{ transform: translateY(0) scale(.98); }
.top-button:focus-visible{
  outline: 2px solid rgba(82,123,255,.55);
  outline-offset: 2px;
}

/* 企画一覧ボタンを緑にしたいなら個別クラスが安全 */
.top-button.green{
  background: #178f16;
  box-shadow: 0 8px 20px rgba(23,143,22,.28), 0 0 0 1px rgba(220,238,255,.9);
}

/* ========== 検索フォーム ========== */
.search-form{ margin: 20px 0 10px; }
.search-input-wrapper{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: .8rem 1rem;
  border-radius: 999px;
  border: 1px solid #dde4f3;
  background: #f9fbff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
  max-width: 360px;
}
.search-icon{ width:18px; height:18px; opacity:.8; }
.search-input{
  border:none;
  outline:none;
  width:100%;
  font-size: .9rem;
  background: transparent;
  padding:0;
  color:#222a3b;
}
.search-input::placeholder{ color:#a3acbf; }

/* ========== 並び替えフォーム ========== */
.sort-form{
  margin: 8px 0 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sort-form select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border-radius: 999px;
  border: 1px solid #d9e2ff;
  padding: .45rem 2.4rem .45rem .8rem;
  font-size: .8rem;
  color:#3a4460;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #f9fbff, #f3f5ff);
  background-repeat:no-repeat,no-repeat;
  background-position: right .9rem center, left top;
  background-size: 14px 14px, auto;
}
.sort-form select:focus-visible{
  outline: 2px solid rgba(82,123,255,.8);
  outline-offset: 1px;
}

/* ========== カードグリッド（planlist.css相当） ========== */
.thumbnail-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 30px 0 10px;
}
.thumbnail-card-link{ text-decoration:none; color: inherit; }

.thumbnail-card{
  position: relative;
  background:#fff;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(143,160,204,.18);
  overflow:hidden;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  border: 1px solid #e2e7f5;
}
.thumbnail-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 13px 30px rgba(143,160,204,.28);
  border-color:#c9d5ff;
}

.thumbnail-title-with-icon{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px 10px;
}

.creator-icon{
  width:32px; height:32px;
  border-radius: 50%;
  object-fit: cover;
}

.thumbnail-title-creater{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 2px;
  font-size: 11px;
}
.thumbnail-title-creater span:nth-child(1){
  color:#7a849d;
  font-weight: 600;
}
.thumbnail-title-creater span:nth-child(2){
  font-size: 12px;
  font-weight: 700;
  color:#222a3b;
  text-align:left;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* ========== ページネーション ========== */
.pagination{
  text-align:center;
  margin-top: 24px;
  font-size: .9rem;
  color:#7a849d;
}
.pagination a{
  margin: 0 8px;
  text-decoration:none;
  color:#2f6bff;
  font-weight: 600;
}
.pagination a:hover{ text-decoration: underline; }

/* ========== レスポンシブ ========== */
@media (max-width: 1024px){
  .container{
    margin: 10px 12px 32px;
    padding: 18px 14px 22px;
    border-radius: 18px;
  }
  .top-left-buttons{ padding: 0 14px 0; }
  .thumbnail-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 768px){
  .container{
    margin: 10px 12px 32px;
    padding: 18px 14px 22px;
    border-radius: 18px;
  }
  .top-left-buttons{
    margin: 46px 12px 10px;
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }
  .top-left-buttons .top-button{
    width: 90%;
    justify-content:center;
    padding: 10px 10px;
    border-radius: 12px;
    font-size: 12px;
    gap: 6px;
    box-shadow: 0 6px 14px rgba(60,105,255,.22), 0 0 0 1px rgba(220,230,255,.85);
    line-height: 1;
  }
  .top-left-buttons .top-button i{ font-size: 15px; }
  .top-left-buttons .top-button i + *{ display:none; }

  .search-input-wrapper{ max-width: 100%; }
  .sort-form{ flex-direction: column; align-items:flex-start; }
  .thumbnail-grid{ grid-template-columns: minmax(0,1fr); }
  .title, .sub-title{ text-align:center; }
}

@media (max-width: 360px){
  .top-left-buttons{ grid-template-columns: minmax(0,1fr); }
}


/* 追加ボタン色 */
.top-left-buttons .top-button.green{
  background: linear-gradient(135deg, #23b36a, #5ed18e);
  box-shadow: 0 8px 20px rgba(60,167,108,.30), 0 0 0 1px rgba(220,238,255,.9);
}

/* グループ専用 */
.group-card{
  padding-bottom: 14px;
}

/* グループ一覧：サムネ表示を企画一覧と同じ感じに */
.group-hero{
  margin: 12px;
  border-radius: 16px;
  overflow: hidden;                 /* ★はみ出しカット */
  background: #eef3ff;
  aspect-ratio: 16 / 9;             /* ★横長固定 */
  height: auto;                     /* ★固定heightは使わない */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* サムネ画像 */
.group-thumb-img{
  width: 100%;
  height: 100%;
  object-fit: cover;                /* ★トリミング */
  display: block;
}

/* サムネが無い時のアイコン */
.group-hero i{
  font-size: 44px;
  color: rgba(47,107,255,.55);
}


.group-badges{
  position:absolute;
  top: 12px;
  left: 12px;
  display:flex;
  gap:8px;
  z-index: 2;
}

.badge{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(226,231,245,.95);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  color: #374057;
}

.badge.pub{ color:#1f7a3a; border-color: rgba(188,239,208,.9); background: rgba(233,255,241,.9); }
.badge.limited{ color:#7a5a00; border-color: rgba(255,220,160,.9); background: rgba(255,246,224,.92); }
.badge.private{ color:#6b7390; }

.group-desc{
  margin: 6px 14px 0;
  font-size: 12px;
  color: #65708a;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.flash-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 20, 35, 0.55);
  z-index: 10050;
  padding: 18px;
}
.flash-modal.is-open{ display: flex; }

.flash-modal-card{
  width: min(420px, 92vw);
  background: rgba(255,255,255,0.98);
  border-radius: 18px;
  border: 1px solid rgba(232, 238, 252, 0.95);
  box-shadow: 0 18px 55px rgba(30, 55, 120, 0.25);
  padding: 18px 18px 16px;
  text-align: center;
}

.flash-modal-icon{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  margin: 0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(35,179,106,0.12);
  border: 1px solid rgba(35,179,106,0.25);
}
.flash-modal-icon i{
  font-size: 22px;
  color: #23b36a;
}

.flash-modal-title{
  font-weight: 900;
  color: #1f2633;
  font-size: 15px;
  margin-bottom: 12px;
}

.flash-modal-btn{
  height: 40px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #2f6bff, #7b5cff);
  box-shadow: 0 10px 24px rgba(63,110,255,.22);
}
.flash-modal-btn:active{ transform: scale(0.98); }

.favorite-list-btn {
    background: linear-gradient(135deg, #ff6a7a, #ff9fb0);
    box-shadow: 0 8px 20px rgba(255, 106, 122, 0.35), 0 0 0 1px rgba(255, 220, 226, 0.9);
}