/* ============================================================
 * themes-fable/pitch.css — Enjin テーマ「Pitch」（light / Fable磨き版）
 * enjin-base.css のトークンを上書きして配色/書体を与える（共有スケルトンを着せ替え）。
 * accent は base.css 側で var(--club-color, var(--theme-accent)) に解決される。
 *
 * 設計方針:
 *  - 個性は維持: 芝グリーン #2e9e4f / Zen Maru Gothic / 丸ピル / 親しみ
 *  - 角丸の型階層: pill(ラベル・ボタン) > card 20px > row 16px > el 12px > circle(アイデンティティ)
 *  - 派生色を color-mix で --accent から自動生成 → club_color 1色指定でも
 *    濃色/淡色/ソフト面が家系ごと追従（自動配色の洗練）
 *  - 芝の意匠: 刈り込みストライプの帯 / センターサークル / 芝目ドットの紙肌
 * ============================================================ */
:root{
  /* --- 紙・墨（芝の上の光。ミント寄り→わずかに若草へ） --- */
  --paper:#f5faf1;
  --paper2:#e9f3e4;
  --white:#ffffff;
  --card:#ffffff;
  --ink:#122b1b;
  --body:#39523f;
  --mute:#66856f;
  --line:#d9e9db;
  --line2:#c6dcc9;

  /* --- 芝グリーン。濃淡は --accent から派生（club_color にも追従） --- */
  --theme-accent:#2e9e4f;
  --accent-d:color-mix(in srgb, var(--accent) 70%, #0c2a17);
  --accent-l:color-mix(in srgb, var(--accent) 78%, #ffffff);
  --accent-soft:color-mix(in srgb, var(--accent) 8%, var(--white));

  /* --- 書体（丸ゴシック主体は維持） --- */
  --serif:"Zen Maru Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --mono:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;

  /* --- 角丸トークン（外側ほど大きく、入れ子で必ず小さく） --- */
  --r-pill:999px;
  --r-card:20px;
  --r-row:16px;
  --r-el:12px;

  /* --- 影（緑がかった墨で、光を柔らかく） --- */
  --shadow-s:0 1px 2px rgba(15,42,25,.05), 0 4px 12px -6px rgba(15,42,25,.10);
  --shadow-m:0 2px 4px rgba(15,42,25,.06), 0 14px 30px -14px rgba(15,42,25,.18);
}

/* ============ 紙肌とタイポグラフィ ============ */
/* 芝目のドット（accent由来 → クラブ色でも追従）。ほぼ気配だけの密度 */
body{
  background-image:radial-gradient(color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px);
  background-size:26px 26px;
}
h1,h2,h3{font-feature-settings:"palt";letter-spacing:.02em}
h2.sec{letter-spacing:.025em}
h2.sec em{
  color:var(--accent-d);
  background:linear-gradient(transparent 70%, color-mix(in srgb, var(--accent) 20%, transparent) 0);
  border-radius:4px;
  padding:0 .06em;
}
section{padding:clamp(4.2rem,9vw,7.4rem) 0}

/* ============ signature: 丸ピル（維持・精度を上げる） ============ */
.btn,.navcta,.chip,.stag,.submit{border-radius:var(--r-pill)}

/* 日英ラベル: 白ピル＋ヘアライン。alt背景でも沈まない */
.eyebrow{
  background:var(--white);
  color:var(--accent-d);
  border:1px solid var(--line2);
  padding:.45em 1.05em;
  border-radius:var(--r-pill);
  text-transform:none;
  font-weight:700;
  font-size:12px;
  letter-spacing:.03em;
  box-shadow:0 1px 2px rgba(15,42,25,.05);
}
.eyebrow i{color:var(--accent-d);letter-spacing:.06em}
.eyebrow i::after{content:"・";color:var(--accent);margin:0 .1em}

/* 芝目の走り: ラベルと見出しの間に、丸い刈り跡のリズム */
.rule{
  display:block;
  width:46px;height:5px;border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--accent), var(--accent-l));
  margin:16px 0 20px;
  position:relative;
}
.rule::after{
  content:"";position:absolute;top:0;left:54px;
  width:14px;height:5px;border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ============ ナビ ============ */
nav{background:color-mix(in srgb, var(--white) 86%, transparent);backdrop-filter:blur(16px) saturate(1.2)}
.brand{font-size:1.1rem;letter-spacing:.02em}
.crest{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-d) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 6px -2px color-mix(in srgb, var(--accent) 55%, transparent);
  font-size:.95rem;
}
.navlinks a::after{height:2px;border-radius:var(--r-pill);bottom:-.45em;background:var(--accent)}
.navlinks a:hover{color:var(--accent-d)}
.navcta{
  box-shadow:0 1px 2px rgba(15,42,25,.12), 0 5px 12px -6px color-mix(in srgb, var(--accent) 60%, transparent);
  transition:background .18s, transform .18s, box-shadow .22s;
}
.navcta:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(15,42,25,.12), 0 8px 18px -8px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* ============ ヒーロー ============ */
/* 足元にごく薄い芝の色気を足す（基盤のスクリム2層は保持） */
.hero-scrim{background:
  linear-gradient(96deg, color-mix(in srgb,var(--paper) 96%,transparent) 0%, color-mix(in srgb,var(--paper) 80%,transparent) 36%, color-mix(in srgb,var(--paper) 22%,transparent) 72%, transparent 100%),
  linear-gradient(0deg, color-mix(in srgb,var(--paper) 62%,transparent) 0%, transparent 44%),
  linear-gradient(0deg, color-mix(in srgb,var(--accent) 10%,transparent) 0%, transparent 34%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.htitle{line-height:1.22;letter-spacing:.01em;margin-top:1rem}
.hsub{color:var(--body)}

/* ============ ボタン ============ */
.btn{
  font-weight:700;font-size:13.5px;letter-spacing:.06em;padding:1em 1.7em;
  transition:background .18s, transform .18s, border-color .18s, color .18s, box-shadow .22s;
}
.btn-accent{
  background:linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 88%, #0c2a17) 100%);
  box-shadow:0 1px 2px rgba(15,42,25,.12), 0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-accent:hover{
  background:var(--accent-d);
  box-shadow:0 2px 4px rgba(15,42,25,.14), 0 12px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn-line{
  border:1.5px solid color-mix(in srgb, var(--ink) 72%, transparent);
  background:color-mix(in srgb, var(--white) 62%, transparent);
  backdrop-filter:blur(4px);
}
.btn-line:hover{background:var(--white);border-color:var(--accent);color:var(--accent-d);transform:translateY(-2px)}
.btn-ink{box-shadow:0 2px 10px -2px rgba(10,30,18,.35)}

/* ============ チップ（クラブ紹介） ============ */
.chip{
  background:var(--white);
  border:1px solid var(--line2);
  padding:.55em 1.15em;
  font-size:.86rem;
  box-shadow:0 1px 2px rgba(15,42,25,.04);
}
.chip b{letter-spacing:.02em}

/* ============ チーム: 罫線グリッド → 丸カードの並びへ ============ */
.grid4{gap:14px;background:transparent;border:none}
.person{
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-s);
  padding:1.8rem 1.2rem 1.5rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.person:hover{box-shadow:var(--shadow-m);border-color:color-mix(in srgb, var(--accent) 35%, var(--line))}
.avatar{
  border-radius:50%;
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line2));
  box-shadow:inset 0 -2px 6px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* 学年別の人数: 小さなスタットカードに */
.comp{gap:.8rem;margin-top:2rem}
.comp div{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-row);
  box-shadow:var(--shadow-s);
  padding:.95rem 1.35rem .8rem;
  min-width:5.2em;
  text-align:center;
}
.comp b{color:var(--accent-d);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ============ 日程: 罫線リスト → カードリストへ ============ */
.sched{border-top:none;display:flex;flex-direction:column;gap:.7rem;margin-top:2rem}
.srow{
  border:1px solid var(--line);
  border-radius:var(--r-row);
  background:var(--white);
  padding:1rem 1.25rem;
  box-shadow:0 1px 2px rgba(15,42,25,.04);
  transition:border-color .2s, box-shadow .25s;
}
.srow:hover{border-color:color-mix(in srgb, var(--accent) 38%, var(--line));box-shadow:var(--shadow-s)}
.sdate{
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 18%, var(--line2));
  border-radius:var(--r-el);
  padding:.5rem .55rem .35rem;
  min-width:4em;
}
.sdate b{font-size:1.3rem;color:var(--accent-d);font-variant-numeric:tabular-nums}
.sdate span{font-size:10px;letter-spacing:.08em}
.stag{padding:.45em 1em;font-weight:700;letter-spacing:.06em}
.stag.match{background:color-mix(in srgb, var(--accent) 12%, var(--white));border-color:color-mix(in srgb, var(--accent) 35%, transparent)}
.stag.practice{background:var(--paper)}

/* ============ お知らせ: 静かな罫線リストのまま精度を上げる ============ */
.nrow{transition:background .25s}
.nrow:hover{background:color-mix(in srgb, var(--accent) 5%, transparent)}
.nrow time{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.nbody .ncat{
  display:inline-block;
  background:color-mix(in srgb, var(--accent) 10%, var(--white));
  color:var(--accent-d);
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius:var(--r-pill);
  padding:.28em .9em;
  font-weight:700;
  letter-spacing:.05em;
  margin-bottom:.5rem;
}

/* ============ 実績 ============ */
.ayear{
  background:var(--paper2);
  border-radius:var(--r-pill);
  padding:.22em .85em;
  font-weight:700;
  font-size:.82rem;
  color:var(--accent-d);
  font-variant-numeric:tabular-nums;
}
.aresult{letter-spacing:.02em}

/* ============ 文武両道バンド: 刈り込みストライプ＋センターサークル ============ */
.band{background:
  radial-gradient(circle at 50% 128%, transparent 0 236px, rgba(255,255,255,.10) 237px 240px, transparent 241px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 72px, transparent 72px 144px),
  linear-gradient(135deg, var(--accent) 0%, var(--accent-d) 100%)}
.band .wm{color:rgba(255,255,255,.12)}
.band .eyebrow{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.32);box-shadow:none}

/* ============ フォーム: 丸カード＋セグメントピル ============ */
.form{
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-m);
}
.field label{font-weight:700;letter-spacing:.08em;font-size:11px}
.field input,.field select,.field textarea{
  border-radius:var(--r-el);
  background:color-mix(in srgb, var(--paper) 55%, var(--white));
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.field input:focus,.field select:focus,.field textarea:focus,
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;
  border-color:var(--accent);
  background:var(--white);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.seg{
  background:var(--paper2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:5px;gap:5px;
}
.seg label{
  border:none;border-radius:var(--r-pill);
  background:transparent;color:var(--mute);
  padding:.62em;
  transition:color .18s, background .18s, box-shadow .18s;
}
.seg label:has(input:checked){
  background:var(--white);
  color:var(--accent-d);
  box-shadow:0 1px 3px rgba(15,42,25,.12), 0 3px 8px -4px rgba(15,42,25,.10);
}
.seg label:has(input:focus-visible){outline:2.5px solid var(--accent);outline-offset:2px}
.submit{
  font-weight:700;font-size:.95rem;letter-spacing:.08em;padding:1em;
  background:linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 88%, #0c2a17) 100%);
  box-shadow:0 1px 2px rgba(15,42,25,.12), 0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  transition:background .18s, transform .18s, box-shadow .22s;
}
.submit:hover{
  background:var(--accent-d);
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(15,42,25,.14), 0 12px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.submit:active{transform:translateY(0)}
.toast{
  border-radius:var(--r-el);
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-left:4px solid var(--accent);
}

/* ============ ギャラリー（写真がある場合）: 丸カード化 ============ */
.gallery{gap:14px;background:transparent;border:none}
.gcard{border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-s)}

/* ============ フッター: 日暮れのピッチ（深い森緑で全体を締める） ============ */
footer{
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 94%, var(--accent)) 0%, var(--ink) 100%);
  border-top:none;
  color:rgba(233,243,228,.6);
  padding:3.6rem 0 2.2rem;
}
footer h4{color:#eef6ec}
footer p{color:rgba(233,243,228,.62)}
footer a{color:rgba(233,243,228,.78)}
footer a:hover{color:var(--accent-l)}
.powered{border-top:1px solid rgba(233,243,228,.14);color:rgba(233,243,228,.5)}
.powered .badge{border:1px solid rgba(233,243,228,.22);border-radius:var(--r-pill);background:rgba(255,255,255,.04)}
.powered .badge b{color:var(--accent-l)}