/* =========================
  Members Page Base
========================= */

.page-id-39 {
  --text-main: #222;
  --card-bg: #ffffff;
}

.page-id-39 a {
  color: var(--text-main);
  text-decoration: none;
}

/* =========================
  CATEGORY SECTION
========================= */

.kp-category {
  margin: 56px auto;
  padding: 32px 24px;
  border-radius: 24px;
}

/* =========================
  CATEGORY HEADER（色付き）
========================= */

.kp-category-title {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 32px;
  color: #222;
}

/* ---- Header Colors ---- */

.kp-category.owner .kp-category-title {
  background: #bfe8c9;
}

.kp-category.partner .kp-category-title {
  background: linear-gradient(90deg,#f6c1f0,#cbb7ff);
}

.kp-category.cast .kp-category-title {
  background: linear-gradient(90deg,#7ff0c5,#4fdba0);
}

.kp-category.art .kp-category-title {
  background: linear-gradient(90deg,#ffd39a,#ff9bbd);
}

.kp-category.singer .kp-category-title {
  background: linear-gradient(90deg,#9cc9ff,#7aa7ff);
}

.kp-category.community .kp-category-title {
  background: linear-gradient(90deg,#ffb703,#fb8500);
}

/* =========================
  CATEGORY BACKGROUND（パステル）
========================= */

.kp-category.owner {
  background: linear-gradient(
    90deg,
    #9be7c4,
    #6ed3a3
  );
}

.kp-category.partner {
  background: linear-gradient(
    90deg,
    #e7c6ff,
    #cdb4ff
  );
}

.kp-category.cast {
  background: linear-gradient(
    90deg,
    #7fffd4,
    #5eead4
  );
}

.kp-category.art {
  background: linear-gradient(
    90deg,
    #f6a8ff,
    #ff9ecf,
    #ffd36a
  );
}

.kp-category.singer {
  background: linear-gradient(
    90deg,
    #4facfe,
    #00c6fb
  );
}

.kp-category.community {
  background: linear-gradient(
    90deg,
    #ffb703,
    #fb8500
  );
}

/* =========================
  GRID（最大6人）
========================= */

.kp-members-grid {
  display: grid;
  grid-template-columns: repeat(6, 200px);
  justify-content: center;
  gap: 32px;
}

@media (max-width: 1200px) {
  .kp-members-grid {
    grid-template-columns: repeat(4, 200px);
  }
}

@media (max-width: 768px) {
  .kp-members-grid {
    grid-template-columns: repeat(2, 200px);
  }
}

/* =========================
  CARD（ドックタグ風）
========================= */

.kp-member-card {
  background: var(--card-bg);
  border-radius: 999px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: center;
}

.kp-member-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* =========================
  IMAGE
========================= */

.kp-member-card img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* =========================
  NAME
========================= */

.kp-member-name {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;

  /* ここが重要 */
  height: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* =========================
  CATEGORY HEADER TEXT (WHITE)
========================= */

/* すべてのカテゴリヘッダー文字を白抜きに */
.kp-category-title {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* アイコンも白に揃える（絵文字含む） */
.kp-category-title span,
.kp-category-title i {
  color: #ffffff;
}

.kp-member-card {
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* ===============================
   MEMBERS GRID（最終完全版）
================================ */

.kp-members-grid {
  display: grid;

  /* 人数に応じて列数が決まる */
  grid-template-columns: repeat(auto-fit, 200px);

  /* 最大6人分まで */
  max-width: calc(200px * 6 + 32px * 5);

  /* Grid全体を中央へ */
  margin: 0 auto;

  /* 余白 */
  gap: 32px;

  /* 各カードを中央 */
  justify-content: center;
  justify-items: center;
}

/* ===============================
   MEMBER CARD
================================ */
/* カード自体は全カテゴリ共通 */
.kp-member-card {
  width: 200px;
}

/* 画像サイズを完全固定 */
.kp-member-card img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
}

/* 名前 */
.kp-member-name {
  margin-top: 12px;
  font-weight: 600;
}

.kp-category.owner .kp-members-grid {
  grid-template-columns: 200px;
}

/* =========================
   カテゴリー内も中央寄せ
========================= */

.kp-category {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* タイトルは横幅いっぱい */
.kp-category-title {
  width: 100%;
  max-width: 1200px;
}

@media (max-width: 1400px) {
  .kp-members-grid {
    grid-template-columns: repeat(4, 200px);
  }
}

@media (max-width: 1024px) {
  .kp-members-grid {
    grid-template-columns: repeat(3, 200px);
  }
}

@media (max-width: 768px) {
  .kp-members-grid {
    grid-template-columns: repeat(2, 200px);
  }
}

@media (max-width: 480px) {
  .kp-members-grid {
    grid-template-columns: 1fr;
  }

  .kp-member-card {
    width: 200px;
  }
}

@media (max-width: 600px) {
  .kp-members-grid {
    grid-template-columns: repeat(2, 200px);
  }
}