/* Hallmark · component: theme-css (Enjin Pop) · genre: playful · theme: custom (brand violet #7b3ff2)
 * pre-emit critique: P4 H5 E4 S4 R4 V4
 * ============================================================
 * themes-fable/pop.css — Enjin テーマ「Pop」（light / Fable磨き版）
 * enjin-base.css のトークンを上書きして配色/書体を与える（共有スケルトンを着せ替え）。
 * accent は base.css 側で var(--club-color, var(--theme-accent)) に解決される。
 *
 * 磨きの要点:
 *  - accent派生色(--accent-d/-l/-deep/-soft)を color-mix で自動生成。
 *    黒/白は oklch 上で無彩色＝色相が保存されるため、クラブ色を
 *    何色に変えてもグラデ・影・チップが同一家系で自動追従する。
 *  - グラデは「深→主→光」の3段 + ハイライト/シェード層で奥行きを出す。
 *  - 丸みは 999(ピル) / 22(カード) / 14(入力) の3段トークンで一貫。
 *  - 影は紫インク着色の2層シャドウ。ベタ黒ドロップシャドウは使わない。
 * ============================================================ */
:root{
  /* 紙とインク — 白に近い薄ラベンダーで、ビビッドな accent を引き立てる */
  --paper:#fdfbff;
  --paper2:#f4eefd;
  --white:#ffffff;
  --card:#ffffff;
  --ink:#211342;
  --body:#4c3d72;
  --mute:#8f81ab;
  --line:#eae2f8;
  --line2:#dbcbf3;
  --theme-accent:#7b3ff2;

  /* accent家系（クラブ色変更に自動追従。oklch混合で色相を保存） */
  --accent-l: color-mix(in oklch, var(--accent), white 16%);
  --accent-d: color-mix(in oklch, var(--accent), black 16%);
  --accent-deep: color-mix(in oklch, var(--accent), black 34%);
  --accent-soft: color-mix(in srgb, var(--accent) 9%, var(--white));
  --accent-glow: color-mix(in srgb, var(--accent) 28%, transparent);

  /* シグネチャ・グラデ（3段：光→主→深） */
  --grad-pop: linear-gradient(135deg, var(--accent-l) 0%, var(--accent) 52%, var(--accent-d) 100%);
  --grad-text: linear-gradient(120deg, var(--accent-d) 0%, var(--accent) 46%, var(--accent-l) 100%);

  /* 丸み3段 + 影 */
  --r-pill:999px;
  --r-card:22px;
  --r-el:14px;
  --shadow-s: 0 1px 2px rgba(33,19,66,.05), 0 4px 12px rgba(33,19,66,.05);
  --shadow-m: 0 2px 6px rgba(33,19,66,.06), 0 14px 30px -12px rgba(33,19,66,.16);
  --shadow-accent: 0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent),
                   0 12px 26px -10px color-mix(in srgb, var(--accent) 42%, transparent);

  --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;
}

/* ▼ 丸みの言語 — 操作要素はピル、器はカード、入力は中丸。例外を作らない */
.btn,.navcta,.submit,.chip,.stag,.ayear,.seg label,.crest,.powered .badge{border-radius:var(--r-pill)}
.field input,.field select,.field textarea,.toast{border-radius:var(--r-el)}

/* ▼ セクション頭 — eyebrow はキャンディピル（内側ハイライトで艶を1段だけ） */
.eyebrow{
  background:var(--grad-pop);color:#fff;
  padding:.5em 1.15em;border-radius:var(--r-pill);
  text-transform:none;font-weight:700;font-size:11.5px;letter-spacing:.09em;
  box-shadow:0 3px 10px -3px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.28);
}
.eyebrow i{color:#fff;opacity:.92}
.eyebrow i::after{content:"・";color:#fff;opacity:.6}
.rule{width:46px;height:5px;border-radius:var(--r-pill);background:var(--grad-pop);opacity:.9;margin:16px 0 22px}
h2.sec em,.htitle em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ▼ nav — 丸クレスト + グラデ下線 */
.crest{background:var(--grad-pop);box-shadow:0 2px 8px -2px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3)}
.navlinks a::after{height:3px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent),var(--accent-l));opacity:1;bottom:-.5em}
.navcta{background:var(--grad-pop);padding:.72em 1.5em;box-shadow:var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,.22);transition:filter .18s,transform .15s,box-shadow .2s}
.navcta:hover{background:var(--grad-pop);filter:brightness(1.06) saturate(1.05);transform:translateY(-1px)}
.navcta:active{transform:translateY(1px);box-shadow:0 1px 4px var(--accent-glow)}

/* ▼ hero — 見出し側に柔らかい光。メッシュの鮮烈さは殺さない */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 58% at 16% 34%, color-mix(in srgb, var(--white) 46%, transparent), transparent 72%),
    radial-gradient(30% 42% at 82% 12%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
}

/* ▼ ボタン — グラデピル + 2層シャドウ + 押下フィードバック */
.btn{font-weight:700;letter-spacing:.06em;padding:1em 1.75em;transition:background .18s,transform .16s,box-shadow .22s,border-color .18s,color .18s,filter .18s}
.btn-accent{background:var(--grad-pop);box-shadow:var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,.22)}
.btn-accent:hover{background:var(--grad-pop);filter:brightness(1.06) saturate(1.05);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 22%,transparent), 0 18px 34px -10px color-mix(in srgb,var(--accent) 48%,transparent)}
.btn-accent:active{transform:translateY(1px);filter:none;box-shadow:0 1px 4px var(--accent-glow)}
.btn-line{border:1.5px solid var(--line2);color:var(--ink);background:color-mix(in srgb, var(--white) 72%, transparent)}
.btn-line:hover{background:var(--accent-soft);border-color:color-mix(in srgb, var(--accent) 45%, var(--line2));color:var(--accent-d)}
.btn-ink{background:var(--white);color:var(--accent-d);box-shadow:0 12px 28px -10px rgba(18,8,44,.5), inset 0 1px 0 #fff}
.btn-ink:hover{background:var(--white);color:var(--accent-deep);transform:translateY(-2px)}
.btn-ink:active{transform:translateY(1px)}

/* ▼ chips — 白ピル + うっすら浮かせる */
.chip{background:var(--white);border:1px solid var(--line2);padding:.6em 1.2em;box-shadow:var(--shadow-s)}

/* ▼ team — ハアライン格子をやめ、丸カードの集まりに（playfulの型） */
.grid4{gap:.9rem;background:transparent;border:0}
.person{border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--shadow-s);padding:1.7rem 1rem 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) 22%, var(--line))}
.avatar{border-radius:50%;background:linear-gradient(145deg, var(--accent-soft), color-mix(in srgb, var(--accent) 17%, var(--white)));border:1px solid color-mix(in srgb, var(--accent) 26%, var(--line2));color:var(--accent-d)}
.comp b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.gallery{gap:.9rem;background:transparent;border:0}
.gcard{border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--shadow-s)}

/* ▼ schedule — 行を丸カード化し、日付をアクセントのバッジに */
.sched{border-top:0;display:grid;gap:.7rem;margin-top:1.9rem}
.srow{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:1.05rem 1.25rem;box-shadow:var(--shadow-s)}
.sdate{background:var(--accent-soft);border-radius:var(--r-el);padding:.5rem .55rem;min-width:4em}
.sdate b{color:var(--accent-d)}
.sdate span{color:var(--accent-d);opacity:.72}
.stag{font-weight:700;letter-spacing:.1em}
.stag.match{background:color-mix(in srgb, var(--accent) 13%, var(--white));border-color:color-mix(in srgb, var(--accent) 32%, transparent)}
.stag.practice{background:var(--white)}

/* ▼ news — リストの編集感は残しつつ、カテゴリをピルに・ホバーを丸く */
.nbody .ncat{display:inline-block;background:var(--accent-soft);color:var(--accent-d);padding:.34em .95em;border-radius:var(--r-pill);font-size:10.5px;font-weight:700;letter-spacing:.08em;margin-bottom:.5rem}
.nrow{padding:1.5rem .9rem;border-radius:16px}
.nrow:hover{background:var(--accent-soft)}

/* ▼ 実績 — 年号をピルバッジに */
.ayear{background:var(--accent-soft);color:var(--accent-d);padding:.22em .9em;font-weight:700;font-size:.82rem;letter-spacing:.04em}

/* ▼ bunbu band — accent家系のみで組む深いグラデ（光と陰を1層ずつ） */
.band{background:
  radial-gradient(52% 72% at 84% 10%, color-mix(in srgb, var(--accent-l) 50%, transparent), transparent 70%),
  radial-gradient(64% 84% at 6% 94%, color-mix(in srgb, #150a30 52%, transparent), transparent 72%),
  linear-gradient(135deg, var(--accent-d) 0%, var(--accent) 46%, var(--accent-deep) 100%)}
.band .wm{color:rgba(255,255,255,.12)}
.band h2{text-shadow:0 2px 18px rgba(18,8,44,.26)}
.band .eyebrow{background:color-mix(in srgb, #fff 15%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, #fff 32%, transparent)}

/* ▼ form — 器は大きな丸カード、フォーカスはにじむリング */
.form{border:1px solid var(--line);border-radius:calc(var(--r-card) + 4px);box-shadow:var(--shadow-m)}
.field input,.field select,.field textarea{border:1.5px solid var(--line2);background:var(--white);transition:border-color .18s,box-shadow .18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px color-mix(in srgb, var(--accent) 20%, transparent)}
.seg{gap:.6rem}
.seg label{border:1.5px solid var(--line2);background:var(--white);transition:background .18s,border-color .18s,color .18s,box-shadow .18s}
.seg label:has(input:checked){background:var(--grad-pop);border-color:transparent;color:#fff;box-shadow:0 4px 12px -4px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.24)}
.submit{background:var(--grad-pop);font-weight:700;letter-spacing:.12em;box-shadow:var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,.22);transition:filter .18s,transform .16s,box-shadow .22s}
.submit:hover{background:var(--grad-pop);filter:brightness(1.06) saturate(1.05)}
.submit:active{transform:translateY(1px);filter:none;box-shadow:0 1px 4px var(--accent-glow)}
.toast{background:var(--accent-soft);border-color:color-mix(in srgb, var(--accent) 30%, transparent)}

/* ▼ 面（背景）— alt を単調ベタからごく淡い縦グラデへ */
.alt{background:linear-gradient(180deg, var(--paper2) 0%, color-mix(in srgb, var(--paper2) 45%, var(--paper)) 100%)}

/* ▼ footer / ticker(将来フラグON時も家系を保つ) */
.powered .badge{background:var(--white);border-color:var(--line2)}
.ticker{background:var(--grad-pop)}