/* ============================================================
 * themes-fable/craft.css — Enjin テーマ「Craft」（light / Fable磨き版）
 * enjin-base.css のトークン上書き + 既存クラスの着せ替えのみ（HTML不変）。
 * accent は base 側で var(--club-color, var(--theme-accent)) に解決される。
 *
 * 設計方針:
 *  - 「手作り」を上質側へ: 雑然ではなく“丁寧にしつらえた紙もの”の質感。
 *  - 手書き(Caveat)は英語ラベル・西暦など要所だけに絞り、本文との対比を強調。
 *  - 破線は --dash（accentを32%含む温色）で統一し、精度を出す。
 *  - マーカーは両端がすぼまるテーパー型（実物のひと塗り）に統一。
 *  - accent派生色(--accent-d/--accent-l/--marker/--dash)はすべて
 *    var(--accent) から color-mix で導出 → club_color 1色の自動配色を保つ。
 * ============================================================ */
:root{
  /* 紙のパレット（深みを一段: クリームを黄土寄りに、墨をエスプレッソに） */
  --paper:#f9f1de;
  --paper2:#f1e5c9;
  --white:#fffdf4;
  --card:#fffdf4;
  --ink:#332615;
  --body:#5b4a32;
  --mute:#93815e;
  --line:#e6d9ba;
  --line2:#d3bf98;

  /* トマト（テーマ既定）。派生はaccentから導出し自動配色を維持 */
  --theme-accent:#d0552f;
  --accent-d:color-mix(in srgb, var(--accent) 76%, #3c1a07);
  --accent-l:color-mix(in srgb, #ecb43e 74%, var(--accent) 26%);
  --marker:color-mix(in srgb, var(--accent-l) 46%, transparent);
  --dash:color-mix(in srgb, var(--accent) 32%, var(--line2));

  /* 温かい影（黒ではなく焦茶ベース＝紙の上の影） */
  --shadow-s:0 1px 2px rgba(93,62,24,.05), 0 5px 16px rgba(93,62,24,.07);
  --shadow-m:0 2px 4px rgba(93,62,24,.06), 0 16px 36px rgba(93,62,24,.10);

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

/* ▼ 紙の質感 — 微細な繊維ドット2層 + 上部の柔らかい光。画像不使用 */
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(1100px 520px at 76% -10%, rgba(255,253,244,.65), transparent 62%),
    radial-gradient(rgba(146,106,52,.045) 1px, transparent 1.6px),
    radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.5px);
  background-size:auto, 26px 26px, 54px 54px;
  background-position:0 0, 0 0, 13px 17px;
}
.alt{
  background-color:var(--paper2);
  background-image:radial-gradient(rgba(146,106,52,.05) 1px, transparent 1.6px);
  background-size:26px 26px;
}

/* ▼ signature: 日英ラベル — 英語だけCaveatで大きく手書き、日本語は端正に */
.eyebrow{
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.24em;
  font-weight:700;
  color:var(--body);
  text-transform:uppercase;
  transform:none;
  display:inline-flex;
  align-items:baseline;
  gap:.6em;
}
.eyebrow i{
  font-family:"Caveat",cursive;
  font-style:normal;
  font-weight:700;
  font-size:24px;
  line-height:1;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--accent);
  display:inline-block;
  transform:rotate(-2.5deg);
  transform-origin:left bottom;
}
.eyebrow i::after{content:"";margin:0}

/* ▼ セクション罫 — 直線バーをやめ、手描きのひと筆（SVGマスク×accent） */
.rule{
  width:64px;height:8px;margin:12px 0 22px;border-radius:0;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%208'%3E%3Cpath%20d='M2%205C12%201.5%2022%207%2032%204.5%2042%202%2052%206.5%2062%203'%20fill='none'%20stroke='black'%20stroke-width='2.8'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%208'%3E%3Cpath%20d='M2%205C12%201.5%2022%207%2032%204.5%2042%202%2052%206.5%2062%203'%20fill='none'%20stroke='black'%20stroke-width='2.8'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ▼ マーカー下線 — 両端テーパーの「ひと塗り」。塗り位置・厚みを統一 */
h2.sec em{
  color:var(--accent-d);
  background-image:linear-gradient(100deg, transparent 1%, var(--marker) 8%, var(--marker) 93%, transparent 99%);
  background-size:100% .48em;
  background-repeat:no-repeat;
  background-position:0 82%;
  padding:0 .06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.lead b,.lead strong{
  box-shadow:none;
  background-image:linear-gradient(100deg, transparent 0, var(--marker) 6%, var(--marker) 94%, transparent 100%);
  background-size:100% .52em;
  background-repeat:no-repeat;
  background-position:0 86%;
  padding:0 .05em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.htitle .hl{
  background:none;
  background-image:linear-gradient(100deg, transparent 1%, var(--marker) 7%, var(--marker) 94%, transparent 99%);
  background-size:100% .42em;
  background-repeat:no-repeat;
  background-position:0 80%;
  padding:0 .04em;
}

/* ▼ ヒーロー — 見出しは鉛筆の波線、背景に糸のような破線リング */
.htitle{line-height:1.18;letter-spacing:.005em}
.htitle em{
  text-decoration-line:underline;
  text-decoration-style:wavy;
  text-decoration-color:color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness:.05em;
  text-underline-offset:.16em;
}
.hero::before{
  content:"";position:absolute;z-index:0;
  right:-90px;top:12%;width:340px;height:340px;
  border:2px dashed color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius:50%;
  pointer-events:none;
}
@media(max-width:820px){.hero::before{display:none}}

/* ▼ ナビ — ステッカー風クレスト + 破線ヘアライン */
nav{border-bottom:1px dashed var(--dash)}
.crest{
  border-radius:38%;
  transform:rotate(-4deg);
  box-shadow:0 0 0 2.5px var(--white), 0 2px 5px rgba(93,62,24,.28);
  transition:transform .25s ease;
}
.brand:hover .crest{transform:rotate(3deg) scale(1.05)}
.navcta{
  border-radius:999px;
  box-shadow:0 2px 0 var(--accent-d);
  transition:transform .15s ease, box-shadow .15s ease, background .18s ease;
}
.navcta:hover{background:var(--accent);transform:translateY(-1px);box-shadow:0 3px 0 var(--accent-d)}
.navcta:active{transform:translateY(1px);box-shadow:0 0 0 var(--accent-d)}

/* ▼ ボタン — 丸ゴ太字のピル + 押せる立体（ハードシャドウ→沈む） */
.btn{
  border-radius:999px;
  font-family:var(--serif);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.05em;
  text-transform:none;
  padding:.85em 1.7em;
  transition:background .18s, transform .15s, border-color .18s, color .18s, box-shadow .15s;
}
.btn-accent{box-shadow:0 3px 0 var(--accent-d)}
.btn-accent:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 5px 0 var(--accent-d)}
.btn-accent:active{transform:translateY(1px);box-shadow:0 1px 0 var(--accent-d)}
.btn-line{border:1.5px dashed color-mix(in srgb, var(--ink) 55%, var(--line2))}
.btn-line:hover{border-style:solid;border-color:var(--ink)}
.btn-ink{box-shadow:0 3px 0 rgba(0,0,0,.20)}
.btn-ink:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,.20)}
.btn-ink:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.20)}

/* ▼ チップ — 縫い付けタグ（破線ピル + 紙の浮き影 + わずかに傾く） */
.chip{
  border:1.5px dashed var(--dash);
  border-radius:999px;
  background:var(--white);
  padding:.5em 1.1em;
  box-shadow:var(--shadow-s);
  transition:transform .18s ease, box-shadow .18s ease;
}
.chip:hover{transform:translateY(-2px) rotate(-.8deg);box-shadow:var(--shadow-m)}

/* ▼ チーム — 罫線グリッドをやめ、丸カードのステッカーシートに */
.grid4{background:transparent;border:0;gap:14px}
.person{
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow-s);
  transition:transform .25s ease, box-shadow .25s ease;
}
.person:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:var(--shadow-m)}
.avatar{
  border-radius:50%;
  border:1.6px dashed var(--dash);
  background:var(--white);
  transition:transform .25s ease;
}
.person:hover .avatar{transform:rotate(4deg) scale(1.04)}
.comp b{
  width:fit-content;
  background-image:linear-gradient(100deg, transparent 2%, var(--marker) 10%, var(--marker) 92%, transparent 98%);
  background-size:100% .4em;
  background-repeat:no-repeat;
  background-position:0 88%;
  padding:0 .1em;
}
.note{border-left:2px dashed var(--line2);padding-left:.9em}

/* ▼ 日程 — 日付を白い付箋カードに。区切りは細い破線で軽く */
.sched{border-top:1px dashed var(--line2)}
.srow{border-bottom:1px dashed var(--line2)}
.sdate{
  background:var(--white);
  border:1.5px dashed var(--dash);
  border-radius:14px;
  padding:.55rem .5rem .45rem;
  min-width:4.2em;
  box-shadow:var(--shadow-s);
}
.sdate b{font-size:1.3rem}
.stag{border-radius:999px}
.stag.practice{border:1px dashed var(--line2)}

/* ▼ お知らせ — カテゴリをゴム印風スタンプに */
.newslist{border-top:1px dashed var(--line2)}
.nrow{border-bottom:1px dashed var(--line2);border-radius:12px}
.nrow time{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.nbody .ncat{
  display:inline-block;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--accent-d);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius:999px;
  padding:.18em .8em;
  margin-bottom:.5rem;
}

/* ▼ 実績 — 西暦だけ手書き（Caveatは数字が活きる場所に限定投入） */
.ach{border-top:0}
.arow{border-top:1px dashed var(--line2)}
.ayear{
  font-family:"Caveat",cursive;
  font-weight:700;
  font-size:1.5rem;
  line-height:1;
  letter-spacing:.02em;
  color:var(--accent);
}

/* ▼ 文武バンド — 深みのある塗り + 白破線の額装 + 紙目 */
.band{
  background-color:var(--accent-d);
  background-image:
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.6px),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-d) 100%);
  background-size:22px 22px, auto;
}
.band .wrap{
  border:2px dashed rgba(255,255,255,.38);
  border-radius:26px;
  padding-top:2.8rem;
  padding-bottom:3rem;
}
.band .wm{color:rgba(255,255,255,.12)}

/* ▼ フォーム — マスキングテープで紙に留めた申込用紙 */
.form{
  position:relative;
  border:1.6px dashed var(--dash);
  border-radius:22px;
  background:var(--white);
  box-shadow:var(--shadow-m);
}
.form::before{
  content:"";position:absolute;
  top:-13px;left:50%;width:118px;height:27px;
  transform:translateX(-50%) rotate(-2deg);
  background-color:color-mix(in srgb, var(--accent) 24%, transparent);
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 7px, transparent 7px 14px);
  border-radius:2px;
  clip-path:polygon(2% 8%, 98% 0%, 100% 92%, 0% 100%);
  pointer-events:none;
}
.field input,.field select,.field textarea{
  border-radius:12px;
  border:1px solid var(--line2);
  background:color-mix(in srgb, var(--paper) 55%, var(--white));
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.seg label{
  border:1.5px dashed var(--line2);
  border-radius:999px;
  background:var(--white);
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.seg label:has(input:checked){
  border-style:solid;
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, var(--white));
  color:var(--accent-d);
  transform:rotate(-1deg);
  box-shadow:var(--shadow-s);
}
.submit{
  border-radius:999px;
  font-family:var(--serif);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.06em;
  text-transform:none;
  box-shadow:0 3px 0 var(--accent-d);
  transition:transform .15s ease, box-shadow .15s ease, background .18s ease;
}
.submit:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 5px 0 var(--accent-d)}
.submit:active{transform:translateY(1px);box-shadow:0 1px 0 var(--accent-d)}
.toast{border-radius:14px;border:1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent)}

/* ▼ ギャラリー（将来枠）— カード化して統一 */
.gallery{background:transparent;border:0;gap:14px}
.gcard{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-s)}
.gcap span{font-family:var(--sans);letter-spacing:.1em}

/* ▼ フッター — 紙目を続け、バッジもタグに */
footer{
  border-top:1px dashed var(--line2);
  background-color:var(--paper2);
  background-image:radial-gradient(rgba(146,106,52,.05) 1px, transparent 1.6px);
  background-size:26px 26px;
}
.powered .badge{border-radius:999px;border:1px dashed var(--line2)}