:root{
  --pink:#f8cfe0;
  --pink-light:#fdeaf3;
  --pink-dark:#e59abf;
  --gray-100:#fafafa;
  --gray-200:#f2f2f2;
  --gray-300:#e5e5e5;
  --gray-500:#999;
  --gray-700:#555;
  --gray-900:#222;
  --radius:12px;
  --shadow:0 2px 8px rgba(0,0,0,.05);
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.genre-page{
  padding:1rem;
}

/* 見出しっぽさを抑える（罫線・強調を外す） */
.page-title{
  margin:0 0 .6rem;
  font-size:1rem;
  font-weight:500;
  color:var(--gray-700);
  padding:0;
  border:none;
}

/* グリッドは少し密度を上げる */
.genre-grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
}

@media (max-width:400px){
  .genre-grid{
    gap:8px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* 丸みと余白を控えめに、チップ感を弱める */
.genre-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;                 /* ← 余白ダウン */
  background:#fff;
  border:1px solid var(--gray-300);
  border-radius:8px;                 /* ← 丸みダウン */
  box-shadow:var(--shadow);
  text-decoration:none;
  color:var(--gray-900);
  transition:background .15s ease, border-color .15s ease;
}

.genre-chip:hover{
  background:#fff;
  border-color:#d9d9d9;              /* ほのかな変化だけ */
  text-decoration:none;
}

/* 文字は見出し化しない：太字や大サイズは使わない */
/* ジャンル名 */
.genre-name{
  font-weight:500;        /* 普通寄り */
  font-size:.92rem;       /* 控えめ */
  white-space:normal;     /* ← 折り返し可 */
  overflow:visible;       /* ← 省略しない */
  text-overflow:clip;     /* ← 省略記号なし */
  line-height:1.3;
  flex:1 1 auto;          /* ← 人数バッジと並べても潰れない */
}


/* 人数バッジの改行防止＋縮まないよう固定 */
.genre-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.15rem .5rem;              /* 余白控えめ */
  font-size:.78rem;
  background:var(--pink-dark);
  color:#fff;
  border-radius:6px;                 /* 角丸控えめ */
  flex:0 0 auto;                     /* ← これで縮まず改行されにくい */
  white-space:nowrap;                /* ← 改行防止 */
}

/* 検索UIもややコンパクトに */
.genre-search{
  display:flex;
  gap:8px;
  align-items:center;
  margin:0 0 .5rem;
}
.genre-search input[type="text"]{
  flex:1 1 auto;
  padding:.45rem .7rem;
  border:1px solid var(--gray-300);
  border-radius:8px;                 /* 丸み控えめ */
  background:#fff;
  outline:none;
  font-size:.9rem;
}
.genre-search input[type="text"]:focus{
  border-color:var(--pink-dark);
  box-shadow:0 0 0 2px rgba(229,154,191,.12);
}
.genre-search button{
  background:var(--pink-dark);
  color:#fff;
  border:none;
  padding:.45rem .75rem;
  border-radius:8px;
  cursor:pointer;
  font-size:.88rem;
}
.genre-search .btn-clear{
  padding:.42rem .65rem;
  border:1px solid var(--gray-300);
  border-radius:8px;
  background:#fff;
  color:var(--gray-700);
  text-decoration:none;
  font-size:.85rem;
}
.genre-search .btn-clear:hover{
  box-shadow:var(--shadow);
  text-decoration:none;
}

.genre-meta{
  margin:.2rem 0 .8rem;
  color:var(--gray-700);
  font-size:.86rem;
}