/* /column/ 一覧ページ専用スタイル（Phase 3-A・このページでのみ読み込む）
   依頼U: ヘッダー/フッターは通常テーマのまま、main領域（コラム一覧）のみダーク化。 */

.column-list {
  background: #0a0a0a;            /* main領域だけダークパネル化 */
  color: #ededed;
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 18px 56px;
  font-family: 'Noto Sans JP', sans-serif;
}

.column-list__title {
  font-size: 22px;
  font-weight: 500;
  color: #ededed;
  text-align: center;
  margin: 0 0 8px;
}

.column-list__subtitle {
  font-size: 13px;
  color: #888;
  text-align: center;
  margin: 0 0 32px;
}

.column-list__empty {
  text-align: center;
  color: #888;
  padding: 48px 0;
}

.column-list__group {
  margin-bottom: 32px;
}

.column-list__group-title {
  font-size: 15px;
  font-weight: 500;
  color: #B60000;
  border-bottom: 1px solid #2a2a2a;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.column-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.column-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.column-card__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #B60000;
  margin-bottom: 8px;
  background: #1a1a1a;
  display: block;
}

.column-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.column-card__no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 36px;
}

.column-card__name {
  display: block;
  font-size: 13px;
  color: #ededed;
  text-align: center;
  margin: 0 0 2px;
  line-height: 1.3;
}

.column-card__ruby {
  display: block;
  font-size: 10px;
  color: #888;
  text-align: center;
  margin: 0;
  line-height: 1.2;
}

.column-card:active .column-card__photo {
  opacity: 0.8;
}

/* 「トップに戻る」ボタン（依頼W・/column/ のみ）
   ・中央揃え（.detail-back-wrap の中央寄せCSSは当ページで未読込のため補う）
   ・ダーク背景に合わせて通常テーマ（黒ボタン×白文字）の逆＝明ボタン×暗文字に反転 */
.column-list .detail-back-wrap {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.column-list .btn-back {
  background: #333333;
  color: #FFFFFF;
}

/* 依頼AN: コラム一覧専用の min-height 上書き
   base.css の .container { min-height: 100vh } はトップ等で必要だが、
   コラム一覧はリストが短い場合（公開1〜数件）に巨大空白を生むため
   ここでのみ撤廃する。 */
.container.container--column-list {
  min-height: auto;
}