/* ============================================================
 * themes-fable/aqua.css — Enjin テーマ「Aqua」（light / Fable磨き版）
 * enjin-base.css のトークンを上書きして配色/書体を与える（共有スケルトンを着せ替え）。
 * accent は base.css 側で var(--club-color, var(--theme-accent)) に解決される。
 *
 * 磨きの方針:
 *  - 水色×コーラルの二声部。コーラルは「区切りドット / ルールの端 / 試合タグ /
 *    実績の結果 / 帯の照り」だけの少量運用で、主役の accent（自動配色）と競わせない。
 *  - --accent-d / --accent-l を color-mix で accent から導出。クラブ色1色を
 *    指定しても濃淡ファミリーが自動で付いてくる（自動配色の強化・家系の維持）。
 *  - 丸みは 12 / 18 / 24 / pill の4段に統一。影は青緑インクの淡い2種のみ。
 *  - 余白をわずかに増やし、罫線グリッドをカード浮遊に置換して清涼感を出す。
 *
 * Hallmark · component: theme-skin (Aqua) · states: hover/focus/active 完備
 * pre-emit critique: P4 H5 E4 S4 R5 V4 · contrast: ラベル類は accent-d 基準で確保
 * ============================================================ */
:root{
  --paper:#f3fbfa;
  --paper2:#e4f4f2;
  --white:#ffffff;
  --card:#ffffff;
  --ink:#0b2f33;
  --body:#3c5a5d;
  --mute:#5f878c;
  --line:#d6ebe9;
  --line2:#c3e2df;
  --theme-accent:#0fb5ba;
  /* accent の濃淡をクラブ色からも自動導出（パレット家系を保ったまま追随） */
  --accent-d:color-mix(in srgb, var(--accent) 52%, #062f33);
  --accent-l:color-mix(in srgb, var(--accent) 52%, #ffffff);
  /* テーマ第二色: コーラル（少量・意味のある場所だけ） */
  --coral:#f0735f;
  --coral-d:#c94f3d;
  --serif:"Zen Kaku Gothic New","Hiragino Sans",system-ui,sans-serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* 丸みの段階と、青緑インクの淡い影（透明感のある深み） */
  --r-1:12px; --r-2:18px; --r-3:24px;
  --shadow-1:0 1px 2px rgba(11,47,51,.05), 0 3px 10px rgba(11,47,51,.05);
  --shadow-2:0 2px 6px rgba(11,47,51,.06), 0 14px 34px -12px rgba(11,47,51,.16);
}

/* ▼ 土台の空気感 — 余白と選択色 */
::selection{background:color-mix(in srgb, var(--accent) 28%, #fff);color:var(--ink)}
section{padding:clamp(4.2rem,9vw,7.4rem) 0}
h2.sec{letter-spacing:.02em}
.htitle{letter-spacing:.005em}

/* ▼ signature: 清涼 — 丸みの一貫性（12/18/24/pill） */
.btn,.navcta,.chip,.stag,.eyebrow,.seg label,.submit,.powered .badge{border-radius:999px}
.crest{border-radius:12px}

/* ▼ ナビ — すりガラスの軽さ */
nav{background:color-mix(in srgb, #fff 78%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom-color:color-mix(in srgb, var(--line) 75%, transparent)}
.crest{background:linear-gradient(135deg, var(--accent) 8%, var(--accent-d) 100%);
  box-shadow:0 2px 8px -2px color-mix(in srgb, var(--accent) 55%, transparent)}
.navcta{transition:background .18s, transform .18s, box-shadow .18s;
  box-shadow:0 1px 2px color-mix(in srgb, var(--accent) 22%, transparent),
             0 6px 16px -6px color-mix(in srgb, var(--accent) 55%, transparent)}
.navcta:hover{transform:translateY(-1px);
  box-shadow:0 2px 4px color-mix(in srgb, var(--accent) 25%, transparent),
             0 10px 22px -8px color-mix(in srgb, var(--accent) 60%, transparent)}

/* ▼ ヒーロー — 水面のような淡いウォッシュ + ガラスの eyebrow */
.hero{background:linear-gradient(180deg,
  color-mix(in srgb, var(--accent) 7%, var(--paper)) 0%, var(--paper) 62%)}
.hero .eyebrow{background:color-mix(in srgb, #fff 72%, transparent);
  border-color:color-mix(in srgb, var(--accent) 24%, transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ▼ 見出しの em — 水彩マーカー（accent 追随） */
.htitle em, h2.sec em{color:var(--ink);padding:0 .06em;border-radius:4px;
  background:linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 26%, transparent) 62%)}

/* ▼ セクションヘッド — ピル eyebrow（英=accent-d / 点=コーラル / 日=ink） */
.eyebrow{background:color-mix(in srgb, var(--accent) 8%, #fff);
  border:1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  padding:.5em 1.15em;color:var(--ink);font-weight:700;max-width:100%}
.eyebrow i{color:var(--accent-d)}
.eyebrow i::after{content:"・";color:var(--coral);font-weight:700;margin:0 .3em 0 .35em}
.rule{width:46px;height:4px;border-radius:999px;
  background:linear-gradient(90deg, var(--accent) 35%, var(--coral))}

/* ▼ ボタン — 軽い浮遊感（hover/active の呼吸） */
.btn{padding:.95em 1.7em}
.btn-accent{box-shadow:0 1px 2px color-mix(in srgb, var(--accent) 26%, transparent),
            0 10px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent)}
.btn-accent:hover{box-shadow:0 2px 4px color-mix(in srgb, var(--accent) 28%, transparent),
            0 14px 30px -10px color-mix(in srgb, var(--accent) 65%, transparent)}
.btn-line{border:1.5px solid color-mix(in srgb, var(--ink) 28%, transparent)}
.btn-line:hover{border-color:var(--ink)}

/* ▼ チップ */
.chip{background:var(--white);border-color:var(--line2)}

/* ▼ チーム — 罫線グリッドをやめ、白カードの浮遊へ */
.comp{gap:.8rem}
.comp>div{background:var(--white);border:1px solid var(--line);border-radius:var(--r-2);
  padding:.85rem 1.4rem 1rem;box-shadow:var(--shadow-1);min-width:6em}
.comp b{font-variant-numeric:tabular-nums}
.grid4{gap:.9rem;background:transparent;border:0}
.person{border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-1);
  padding:1.7rem 1.1rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.person:hover{box-shadow:var(--shadow-2);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--line))}
.avatar{border-radius:50%;color:var(--accent-d);
  border-color:color-mix(in srgb, var(--accent) 24%, transparent);
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 16%, #fff), color-mix(in srgb, var(--accent) 5%, #fff))}

/* ▼ 日程 — 日付を水色チップに、試合タグはコーラルで意味づけ */
.sched{border-top:0}
.srow{transition:background .2s;border-radius:var(--r-1)}
.srow:hover{background:color-mix(in srgb, var(--accent) 5%, transparent)}
.sdate{background:color-mix(in srgb, var(--accent) 9%, #fff);
  border:1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius:var(--r-1);padding:.5rem .55rem .45rem;min-width:4.2em}
.sdate b{color:var(--accent-d)}
.sdate span{color:var(--body)}
.stag.match{background:color-mix(in srgb, var(--coral) 12%, #fff);color:var(--coral-d);
  border:1px solid color-mix(in srgb, var(--coral) 42%, transparent)}
.stag.practice{background:var(--white)}

/* ▼ お知らせ — 罫線リストを白カードの束に */
.newslist{border-top:0;display:grid;gap:.85rem}
.nrow{background:var(--white);border:1px solid var(--line);border-radius:var(--r-2);
  padding:1.2rem 1.4rem;
  transition:border-color .2s, box-shadow .25s, transform .25s, background .2s}
.nrow:hover{background:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-1);
  border-color:color-mix(in srgb, var(--accent) 32%, var(--line))}
.nbody .ncat{display:inline-block;padding:.25em .85em;border-radius:999px;
  background:color-mix(in srgb, var(--accent) 9%, #fff);color:var(--accent-d);
  margin-bottom:.5rem}

/* ▼ ギャラリー（P2.4 写真配信の先取り） */
.gallery{gap:.9rem;background:transparent;border:0}
.gcard{border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;
  box-shadow:var(--shadow-1)}

/* ▼ 実績 — 年は accent-d、結果はコーラルの祝色 */
.ayear{color:var(--accent-d)}
.aresult{color:var(--coral-d)}

/* ▼ 文武両道の帯 — 深い accent の水面に、コーラルの照り */
.band{background:
  radial-gradient(120% 160% at 88% 0%, color-mix(in srgb, var(--coral) 34%, transparent) 0%, transparent 52%),
  linear-gradient(125deg, var(--accent) 0%, var(--accent-d) 92%)}
.band .eyebrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.band .eyebrow i{color:#fff}
.band .eyebrow i::after{color:rgba(255,255,255,.75)}
.band .btn-ink{box-shadow:0 10px 26px -10px rgba(6,47,51,.5)}

/* ▼ フォーム — 白いカードとやわらかいフォーカスの輪 */
.form{border-radius:var(--r-3);border-color:var(--line);box-shadow:var(--shadow-2)}
.field input,.field select,.field textarea{border-radius:var(--r-1);
  border-color:var(--line2);background:color-mix(in srgb, var(--paper) 60%, #fff);
  transition:border-color .18s, box-shadow .18s, background .18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent)}
.seg label{background:var(--white);border-color:var(--line2);
  transition:background .18s, border-color .18s, color .18s, box-shadow .18s}
.seg label:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent)}
.submit{transition:background .18s, transform .15s, box-shadow .18s;
  box-shadow:0 1px 2px color-mix(in srgb, var(--accent) 26%, transparent),
             0 10px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent)}
.submit:hover{transform:translateY(-1px)}
.submit:active{transform:translateY(0)}
.toast{border-radius:var(--r-1);background:color-mix(in srgb, var(--accent) 8%, #fff)}

/* ▼ フッター */
.powered .badge{background:var(--white);border-color:var(--line)}