@charset "UTF-8";

/* ========== 基本コンポーネント（共通） ========== */

/* ボタン */
.el-btn{display:inline-block;padding:10px 16px;border-radius:999px;text-decoration:none;line-height:1;border:1px solid transparent;cursor:pointer}
.el-btn--primary{background:#111;color:#fff}
.el-btn--ghost{background:#fff;color:#111;border-color:#111}
.el-btn + .el-btn{margin-left:8px}

/* バッジ */
.el-badge{display:inline-block;padding:4px 8px;border-radius:6px;font-size:.85rem;background:#f1f1f1;color:#111}
.el-badge--on{background:#E8F5E9;color:#1B5E20;border:1px solid #C8E6C9}

/* 状態 */
.el-state{display:inline-block;padding:8px 12px;border-radius:8px;font-size:.9rem}
.el-state--pending{background:#FFF8E1;border:1px solid #FFECB3;color:#8D6E63}

/* ========== 支援ボックス（authorページ など） ========== */

.el-support-box{
  margin:24px auto;max-width:980px;
  background:#fff;border:1px solid #e6e6e6;border-radius:12px;
  padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.03)
}
.el-support-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px
}
.el-support-item{background:#fff;border:1px solid #eee;border-radius:12px;padding:16px}
.el-support-item__title{font-size:1.15rem;font-weight:600;line-height:1.35;margin:0 0 .4em}
.el-support-item__desc{margin:.2em 0 1em;color:#666;line-height:1.8}

/* “推す”側サムネ（任意のビジュアル枠） */
.el-card__thumb--sub img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;background:#f5f5f5;border-radius:10px;margin:6px 0 8px
}

/* ========== ショップ（講座カード） ========== */

.el-grid{
  list-style:none;margin:12px 0 0;padding:0;
  display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))
}
.el-card{
  border:1px solid #eaeaea;border-radius:12px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column
}
.el-card__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.el-card__thumb img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;background:#f5f5f5
}
.el-card__title{font-size:15px;font-weight:600;padding:10px 12px;line-height:1.4;margin:0}
.el-card__excerpt{padding:0 12px 10px;color:#666;font-size:13px;line-height:1.6}
.el-card__price{margin-top:auto;padding:10px 12px 12px;font-size:14px;color:#111}
.el-card .el-btn{margin:0 12px 12px}

/* もっと見る */
.el-more-wrap{margin-top:8px;text-align:right}

/* ========== クリエイター一覧（[el_creators] 用） ========== */

.el-creators-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.el-creator-card{border:1px solid #eee;border-radius:14px;overflow:hidden;background:#fff;display:flex;gap:12px;padding:12px}
.el-creator-card__thumb img{width:84px;height:84px;object-fit:cover;border-radius:10px;background:#f5f5f5;display:block}
.el-creator-card__body{flex:1;min-width:0}
.el-creator-card__name{font-size:16px;margin:2px 0 4px;line-height:1.3}
.el-creator-card__badges{display:flex;gap:6px;margin-bottom:6px}
.el-creator-card__item{display:block;font-size:13px;color:#333;text-decoration:none;margin:2px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-creator-card__muted{font-size:12px;color:#777;margin:2px 0 8px}
.el-creator-card__actions{display:flex;gap:8px;flex-wrap:wrap}
.el-creators-empty{padding:16px;border:1px dashed #ccc;border-radius:12px;background:#fafafa}
.el-creators-pager ul{display:flex;gap:8px;list-style:none;padding:0;margin:16px 0 0;justify-content:center}
.el-creators-pager a, .el-creators-pager span{display:inline-block;padding:6px 10px;border:1px solid #ddd;border-radius:8px}
.el-creators-pager .current{background:#111;color:#fff;border-color:#111}

/* ========== 細かな整形（authorページ内の統一） ========== */

.p-author .el-support-box .el-btn--primary{background:#111;color:#fff}
.p-author .el-support-box .el-btn--ghost{background:#fff;color:#111;border:1px solid #111}
.p-author .el-support-box .el-state{margin-top:.5em}
.p-author .el-support-box .el-btn{margin-top:.5em}

/* ========== reCAPTCHA バッジ（左下＋半透明） ========== */

.grecaptcha-badge{
  left:14px !important; right:auto !important; bottom:14px !important;
  opacity:.6; transition:opacity .3s; z-index:9999
}
.grecaptcha-badge:hover{opacity:1}

/* === EL CUSTOM: クリエイター一覧カード === */
.el-creators-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.el-creator-card{border:1px solid #eee;border-radius:14px;overflow:hidden;background:#fff;display:flex;gap:12px;padding:12px}
.el-creator-card__thumb img{width:84px;height:84px;object-fit:cover;border-radius:10px;background:#f5f5f5;display:block}
.el-creator-card__body{flex:1;min-width:0}
.el-creator-card__name{font-size:16px;margin:2px 0 4px;line-height:1.3}
.el-creator-card__badges{display:flex;gap:6px;margin-bottom:6px}
.el-badge{display:inline-block;font-size:11px;padding:2px 6px;border-radius:999px;background:#111;color:#fff}
.el-badge--ghost{background:#fff;color:#111;border:1px solid #111}
.el-creator-card__item{display:block;font-size:13px;color:#333;text-decoration:none;margin:2px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-creator-card__muted{font-size:12px;color:#777;margin:2px 0 8px}
.el-creator-card__actions{display:flex;gap:8px;flex-wrap:wrap}
.el-btn{display:inline-block;padding:8px 12px;border-radius:999px;text-decoration:none}
.el-btn--ghost{border:1px solid #111;color:#111}
.el-btn--primary{background:#111;color:#fff}
.el-creators-empty{padding:16px;border:1px dashed #ccc;border-radius:12px;background:#fafafa}
.el-creators-pager ul{display:flex;gap:8px;list-style:none;padding:0;margin:16px 0 0;justify-content:center}
.el-creators-pager a, .el-creators-pager span{display:inline-block;padding:6px 10px;border:1px solid #ddd;border-radius:8px}
.el-creators-pager .current{background:#111;color:#fff;border-color:#111}

/* === クリエイター一覧の整列・余白調整（MVP fix） === */

/* グリッドをセンターに寄せ、列幅を安定させる */
.el-creators-grid{
  max-width: 1040px;           /* 行の視線幅を制限 */
  margin: 0 auto;              /* センター寄せ */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  justify-items: stretch;      /* カード幅を均等伸長 */
}

/* カードは左揃え・揃った余白 */
.el-creator-card{
  align-items: flex-start;     /* 中央寄せ→左揃え */
  gap: 14px;
  padding: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

/* サムネは少し大きめ＆角丸を強めて存在感を出す */
.el-creator-card__thumb img{
  width: 96px; height: 96px; border-radius: 12px; object-fit: cover;
}

/* テキストの行間と間隔を微調整（詰めすぎ回避） */
.el-creator-card__name{ font-size: 17px; margin: 0 0 6px; line-height: 1.35; }
.el-creator-card__badges{ margin-bottom: 6px; }
.el-creator-card__item, .el-creator-card__muted{ margin: 2px 0 10px; }

/* ボタン行は右に流れないように折り返し＋上余白を統一 */
.el-creator-card__actions{ gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.el-btn{ padding: 9px 14px; }
.el-btn--primary{ background:#111; color:#fff; }

/* 1件しか無い時でも“左寄りに小さく見えない”ように最小幅を確保 */
.el-creators-grid > .el-creator-card{
  min-width: 300px;
}

/* ページ見出し直下がスカスカなテーマ向けの軽い詰め（任意） */
.entry-title + .el-creators-grid,
h1 + .el-creators-grid{
  margin-top: 12px;
}

/* === EL 支援者マイページ（簡易） === */
.el-suppdash{max-width:980px;margin:24px auto;padding:20px;background:#fff;border:1px solid #eee;border-radius:12px}
.el-suppdash__title{font-size:1.25rem;margin:0 0 12px}
.el-sd__section{border-top:1px solid #f0f0f0;padding-top:14px;margin-top:14px}
.el-sd__section:first-of-type{border-top:none;margin-top:0;padding-top:0}
.el-sd__kv{list-style:none;margin:8px 0;padding:0;display:grid;grid-template-columns:1fr 2fr;gap:8px}
.el-sd__kv li{display:contents}
.el-sd__kv span{color:#666}
.el-sd__actions{margin-top:8px}
.el-sd__actions .el-btn{margin-right:8px}

.el-sd__cards{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.el-sd__card{border:1px solid #eee;border-radius:10px;overflow:hidden;background:#fff}
.el-sd__cardlink{display:block;color:inherit;text-decoration:none}
.el-sd__thumb img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#f5f5f5}
.el-sd__meta{padding:10px 12px;display:flex;justify-content:space-between;align-items:center}
.el-sd__title{font-size:14px;font-weight:600}
.el-sd__tag{font-size:12px;color:#111;border:1px solid #111;border-radius:999px;padding:2px 8px}

.el-sd__list{list-style:none;margin:8px 0 0;padding:0}
.el-sd__list li{padding:6px 0;border-bottom:1px solid #f4f4f4}
.el-sd__empty{padding:10px;border:1px dashed #ccc;border-radius:10px;background:#fafafa}

/* === 支援者ダッシュボード（購入済み講座リスト用） === */
.el-sd__list{list-style:disc;margin:8px 0 0 20px;padding:0}
.el-sd__listitem{margin:.35em 0}
.el-sd__listitem a{text-decoration:none}
.el-sd__listitem a:hover{text-decoration:underline}