/* ===================================================================
   KBJDFAN Crew pages — components layered on kbjdfan-design.css
   crews/ ハブ + crews/<slug>/ 個別ページ共通。手編集ファイル。
   =================================================================== */

/* ---- hero crew emblem (logo/icon) ---- */
.crew-emblem{width:108px; height:108px; margin:0 auto 16px; border-radius:26px; overflow:hidden;
  background:#fff; border:3px solid rgba(255,255,255,.9); box-shadow:0 12px 34px rgba(0,0,0,.4);}
.crew-emblem img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---- hub card crew badge (small icon over thumb) ---- */
.card .thumb .crew-badge{position:absolute; top:10px; left:10px; z-index:3; width:48px; height:48px;
  border-radius:12px; overflow:hidden; background:#fff; border:2px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.25);}
.card .thumb .crew-badge img{width:100%; height:100%; object-fit:cover;}

/* ---- hero stat pills ---- */
.crew-stats{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:20px;}
.crew-stats .pill{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--pill); padding:8px 15px; font-size:13px; color:#cfcfdb;}
.crew-stats .pill b{color:var(--gold); font-weight:800; font-size:15px;}
.crew-h1-sub{display:block; font-family:var(--font-body); font-weight:700; font-size:18px; color:#cfcfdb; margin-top:6px; letter-spacing:0;}
.crew-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px;}

/* ---- prose blocks ---- */
.crew-prose{color:var(--ink); font-size:16px; line-height:1.85;}
.crew-prose p{margin-bottom:14px;}
.crew-prose p:last-child{margin-bottom:0;}
.crew-prose b{color:var(--brand-coral);}
.crew-prose a.inlink{color:var(--flag-blue); font-weight:700; text-decoration:none; border-bottom:2px dotted var(--flag-blue);}

/* ---- format / payout table ---- */
.crew-table{width:100%; border-collapse:collapse; margin-top:14px; font-size:14px; background:#fff;
  border:1px solid #efece6; border-radius:14px; overflow:hidden;}
.crew-table th,.crew-table td{padding:11px 14px; text-align:left; border-bottom:1px solid #f1eee8;}
.crew-table thead th{background:var(--paper-pink); color:var(--ink); font-weight:800; font-size:13px;}
.crew-table tbody tr:last-child td{border-bottom:0;}
.crew-table td:first-child{font-weight:700;}

/* ---- season anchor nav (sticky chips) ---- */
.season-nav{position:sticky; top:56px; z-index:30; background:rgba(251,248,243,.95); backdrop-filter:blur(8px);
  border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; margin-top:8px;}
.season-nav .wrap{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
.season-nav a{flex:0 0 auto; display:inline-flex; align-items:baseline; gap:6px; text-decoration:none;
  background:#fff; border:1px solid #e7e2d9; border-radius:var(--pill); padding:7px 14px; font-weight:700; font-size:13px; color:var(--ink); white-space:nowrap;}
.season-nav a:hover{border-color:var(--brand-coral); color:var(--brand-coral);}
.season-nav a small{color:var(--text-subtle); font-weight:700;}

/* ---- season block ---- */
.season{margin-top:22px; border:1px solid #efece6; border-radius:18px; background:#fff;
  box-shadow:0 8px 22px rgba(40,30,50,.06); overflow:hidden; scroll-margin-top:120px;}
.season-head{padding:20px 22px 4px;}
.season-head h3{font-family:var(--font-head); font-size:24px; color:var(--ink); display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.season-head h3 .kw{font-size:13px; font-weight:800; color:#fff; background:var(--brand-coral); border-radius:var(--pill); padding:3px 11px;}
.season-head h3 .brand-tag{font-size:12px; font-weight:800; color:var(--flag-blue); background:rgba(30,80,180,.1); border:1px solid rgba(30,80,180,.25); border-radius:var(--pill); padding:3px 11px;}
.season-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:8px; color:var(--text-muted); font-size:13px; font-weight:700;}
.season-meta span i{color:var(--brand-coral); margin-right:5px;}
.season-blurb{margin:12px 0 0; color:var(--text-muted); font-size:14.5px; line-height:1.75;}
.season-blurb a.inlink{color:var(--flag-blue); font-weight:700; text-decoration:none; border-bottom:2px dotted var(--flag-blue);}

/* collapsible older seasons */
details.season > summary{list-style:none; cursor:pointer;}
details.season > summary::-webkit-details-marker{display:none;}
details.season > summary .season-head{position:relative;}
details.season > summary .season-head::after{content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:22px; top:22px; color:var(--text-subtle); font-size:13px; transition:transform .2s;}
details.season[open] > summary .season-head::after{transform:rotate(180deg);}

/* ---- roster grid ---- */
.roster{display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:14px; padding:18px 22px 24px;}
.mtile{display:block; text-align:center; text-decoration:none; color:inherit;}
.mtile .av{position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; margin-bottom:8px;
  background:repeating-linear-gradient(45deg,#E9E4DC,#E9E4DC 9px,#E2DCD2 9px,#E2DCD2 18px);
  display:flex; align-items:center; justify-content:center;}
.mtile .av img{width:100%; height:100%; object-fit:cover; transition:transform .2s ease;}
.mtile .av .ini{font-family:var(--font-logo); font-size:26px; font-weight:700; color:#b3a994;}
a.mtile:hover .av img{transform:scale(1.05);}
.mtile .crown{position:absolute; top:7px; left:7px; z-index:2; background:var(--gold); color:#4a3a00;
  font-size:10px; font-weight:800; padding:3px 7px; border-radius:var(--pill); box-shadow:0 2px 6px rgba(0,0,0,.2);}
.mtile .nm{font-weight:700; font-size:13.5px; color:var(--ink); line-height:1.3; word-break:break-word;}
.mtile .id{display:inline-block; margin-top:3px; font-family:'Fredoka',monospace; font-size:11px; color:var(--text-subtle);}
a.mtile:hover .nm{color:var(--brand-coral);}
.mtile.nolink{cursor:default;}
.mtile.nolink .av{opacity:.7;}
.mtile.nolink .nm{color:var(--text-muted);}
.mtile .guestbadge{display:inline-block; margin-top:5px; font-size:9.5px; font-weight:800; letter-spacing:.02em;
  padding:2px 8px; border-radius:var(--pill); background:rgba(90,120,200,.14); color:#4a5da8; border:1px solid rgba(90,120,200,.28);}
.mtile.guest .av{box-shadow:inset 0 0 0 2px rgba(90,120,200,.4);}
.roster-empty{padding:6px 22px 22px; color:var(--text-subtle); font-size:14px; font-style:italic;}

/* ---- coverage chip ---- */
.cov{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text-muted);}
.cov .bar{width:60px; height:6px; border-radius:var(--pill); background:#eee; overflow:hidden;}
.cov .bar i{display:block; height:100%; background:var(--teal);}

/* ---- related chips ---- */
.chips{display:flex; flex-wrap:wrap; gap:9px;}
.chip{display:inline-flex; align-items:center; gap:7px; text-decoration:none; background:#fff; border:1px solid #e7e2d9;
  border-radius:var(--pill); padding:8px 15px; font-weight:700; font-size:13.5px; color:var(--flag-blue); transition:.18s;}
.chip:hover{border-color:var(--flag-blue); transform:translateY(-2px);}
.chip i{color:var(--brand-coral);}

/* ---- FAQ ---- */
.faq details{background:#fff; border:1px solid #efece6; border-radius:14px; margin-bottom:10px; padding:0 18px;}
.faq summary{list-style:none; cursor:pointer; font-weight:700; font-size:15.5px; color:var(--ink); padding:16px 0; position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"\2b"; position:absolute; right:2px; color:var(--brand-coral); font-weight:800;}
.faq details[open] summary::after{content:"\2212";}
.faq .ans{padding:0 0 16px; color:var(--text-muted); font-size:14.5px; line-height:1.8;}

/* ---- cta cards ---- */
.cta-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.cta-card{background:var(--night); color:#fff; border-radius:18px; padding:26px 24px; text-align:center;}
.cta-card h3{font-family:var(--font-head); font-size:20px; color:#fff; margin-bottom:8px;}
.cta-card p{color:#cfcfdb; font-size:14px; line-height:1.7; margin-bottom:16px;}

/* ---- hub crew cards & compare table ---- */
.crew-card-meta{padding:16px 18px;}
.crew-card-meta h3{font-family:var(--font-head); font-size:20px; margin-bottom:4px;}
.crew-card-meta .sub{color:var(--text-muted); font-size:13px; font-weight:700; margin-bottom:10px;}
.crew-card-meta .row{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--text-muted); font-weight:700;}
.compare{width:100%; border-collapse:collapse; font-size:14px; background:#fff; border:1px solid #efece6; border-radius:14px; overflow:hidden;}
.compare th,.compare td{padding:12px 14px; text-align:left; border-bottom:1px solid #f1eee8;}
.compare thead th{background:var(--night); color:#fff; font-weight:800; font-size:13px;}
.compare tbody td:first-child{font-weight:800;}
.compare tbody tr:last-child td{border-bottom:0;}

@media(max-width:900px){
  .season-nav{top:0;}
  .roster{grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:11px; padding:14px;}
  .mtile .nm{font-size:12.5px;}
  .cta-grid{grid-template-columns:1fr;}
  .season-head h3{font-size:20px;}
  .compare{font-size:12.5px;}
  .compare th,.compare td{padding:9px 8px;}
}