/* ============================================================
   このファイルは金継ぎ（.claude/skills/kintsugi）の修理結果です。
   写しの上で検証してから本番へ入れました（2026-09-24）。

   before → after（散らかり度・1280px）
     トップ 45→16 合格ライン到達 ／ 教材 45→12 合格ライン到達
     学ぶ  39→20（整いは合格・型が残る）／ プロフィール 40→24 合格ライン到達
     破れ（読めない・押せない・崩れる）は全ページ 0

   読み込みは templates/base.html。style.css と mobile-bar.css の"あと"に置く。
   セレクタの頭に html を付けてあるのは、各ページが本文内に持っている
   <style> より後ろから当てるため（同じ詳細度だとページ側が勝つ）。

   いずれ各ページのソース値そのものを書き換えれば、このファイルは不要になる。
   ============================================================ */

/* ============================================================
   金継ぎ 2026-09-24 ── e-life（www.e-life.work）
   依頼: 「デザインをもう少し綺麗にして欲しい。背景は白にして」
         「このベージュ背景が好きじゃないかもしれない」
   土台プリセット: design/DESIGN.md の D（エディトリアル）。背景だけ純白に振る。
   掟: 節の交互の地（拍）は潰さない。色相だけ暖色ベージュ → ニュートラルへ。
   ============================================================ */

/* ── 1. 元栓：全ページ共通のトークン ───────────────────
   ベージュ群 #FAF6F1 / #FBFAF7 / #E7DCCF / #E3DED4 が
   1クラスタ（似て非なる色）として数えられていた。白とニュートラルに寄せる。 */
:root{
  --bg:#FFFFFF;        /* 生成り #F5F3EF → 純白 */
  --surface:#FFFFFF;   /* ヘッダー・カードは白。1pxの罫で分ける */
  --ink:#1A1A1A;       /* #333333 → D の墨。コントラストも上がる */
  --muted:#5C5C5C;     /* #6A655D（暖色グレー）→ ニュートラル */
  --line:#E6E6E6;      /* #E3DED4（暖色）→ ニュートラル */
}

/* ── 2. ページ側のベージュも同じ元栓の考えで ───────────
   節の地（--cream）は「拍」なので残す。色相だけ外す。 */
html .eh,html .esv,html .ep,html .dg-page,html .lp-pain{
  --cream:#F7F7F7;     /* 節の地＝拍。白地に対してごく薄く */
  --line:#E6E6E6;
  --ink:#1A1A1A;
  --sub:#5C5C5C;
}
html .ahk,html .ahg,html .khy,html .unl{
  --bg:#FFFFFF;
  --surface:#F7F7F7;
  --ink:#1A1A1A;
  --muted:#5C5C5C;
  --line:#E6E6E6;
}

/* ── 3. 破れの修理 ─────────────────────────────────
   2026-09-24 に足したPC追従CTAが、全18ページの
   「極小文字」と「絶望のz-index」を作っていた。 */
.elife-pc-sub,.elife-mb-sub{font-size:12px}   /* 11px → 12px */
#elife-pc-cta{z-index:100}                    /* 9998 → 100 */
.elife-mobile-bar{z-index:100}                /* 9999 → 100 */

/* ── 4. 文字の段：9段の rem を1本の段へ ─────────────
   0.8 / 0.85 / 0.9 / 0.95 / 1 / 1.15 / 1.5 / 1.7 / 2.1rem が同居し、
   12.8 / 13.6 / 14.4 / 15.2 / 16 / 18.4 / 24 / 27.2 / 33.6px と割れていた。
   段 = 12 / 14 / 16 / 18 / 24 / 28 / 34。役割ごとに1〜2段に収める。 */
.brand-tag,.nav a,.foot-nav a,.card-date{font-size:14px}
.copy{font-size:12px}
.foot-brand,.card-title,.pager-now,.pager a{font-size:16px}
.card-desc{font-size:14px}
.article-head h1{font-size:34px}

.eh .kick,.eh .hero figcaption,.eh .gen .st,.eh .made span{font-size:12px}
.eh .note,.eh .hero .also,.eh .end .also,.eh .gen .d,
.eh .step a,.eh .story .sign{font-size:14px}
.eh .gen div,.eh .life dd,.eh .step p,
.eh .hero p.l,.eh .bio p,.eh .list li,.eh .story p{font-size:16px}
.eh .bio b,.eh h3{font-size:18px}
.eh h2{font-size:24px}
.eh .made b{font-size:28px}
.eh h1{font-size:34px}

/* ── 5. 変数を経由していない直書きのベージュ ────────────
   mobile-bar.css が #FBFAF7 / #E3DED4 を直に持っていて、
   元栓を変えても残る＝「似て非なる色」が増えるだけになっていた。 */
html .elife-pc-mag{background:#CC4614; color:#FFFFFF}
html .elife-pc-learn{background:#FFFFFF; border-color:#E6E6E6; color:#1B3A5B}
html .elife-mobile-bar{background:#FFFFFF}
html .elife-mb-contact{background:#FFFFFF; color:#1B3A5B !important;
  border:1px solid #E6E6E6}   /* 元は #2d2d2d 地＋color:#fff !important。
                                 地だけ白にすると白文字が消えるので色も越える */
html .elife-mb-diagnosis{background:#BE400F}  /* #A44C13＝3色目のオレンジだった */

/* ── 6. 文字の段（ページ側に勝たせる） ──────────────── */
html .eh .kick,html .eh .hero figcaption,html .eh .gen .st,html .eh .made span{font-size:12px}
html .eh .note,html .eh .hero .also,html .eh .end .also,html .eh .gen .d,
html .eh .step a,html .eh .story .sign{font-size:14px}
html .eh .gen div,html .eh .life dd,html .eh .step p,
html .eh .hero p.l,html .eh .bio p,html .eh .list li,html .eh .story p{font-size:16px}
html .eh .bio b,html .eh h3{font-size:18px}
html .eh h2{font-size:24px}
html .eh .made b{font-size:28px}
html .eh h1{font-size:34px}

/* ── 7. 役割内の割れを詰める（2巡目） ──────────────
   本文 4段→3 ／ その他 5段→3。12pxの小ラベルを14へ上げ、
   0.95rem（15.2px）の取りこぼしを16へ寄せる。 */
html .eh .kick{font-size:14px}                 /* 本文: 12→14 */
html .eh .made span{font-size:14px}            /* その他: 12→14 */
html .eh .step .no,html .eh span.no{font-size:16px}  /* 15.2 の取りこぼし */
html .elife-pc-sub,html .elife-mb-sub{font-size:14px} /* ボタン: 12→14 */

/* ── 8. 角丸を3種へ（小4 / 面12 / 丸999） ─────────
   2 / 4 / 12 / 14 / 16 / 999 の6種あった。 */
html .nav-burger span{border-radius:4px}       /* 2 → 4 */
html .eh .list,html .eh ul.list{border-radius:12px}    /* 14 → 12 */
html .eh .hero figure img,html .eh figure img{border-radius:12px} /* 16 → 12 */
html .eh .genph{border-radius:12px}
html .eh .step img{border-radius:12px}
html .eh .made div{border-radius:12px}

/* ── 9. 3巡目：角丸の取りこぼしと、残る役割内の割れ ── */
html .eh .koma img,html .eh .life img,html .eh img{border-radius:12px}
html .eh a.cta,html .eh .cta{border-radius:999px}       /* 丸は丸のまま */
html #elife-pc-cta .elife-pc-btn{border-radius:4px}     /* 小は4のまま */
html .copy{font-size:14px}                              /* 本文: 12→14 */
html .eh .gen .st{font-size:14px}                       /* その他: 12→14 */

/* ── 10. 最後の取りこぼし（角丸3種へ） ── */
html .eh .gen,html .esv .gen{border-radius:12px}

/* ============================================================
   11. 他ページ（学ぶ／教材／プロフィール）にも同じ段と角丸を
   ============================================================ */

/* 小さいオレンジ文字が床4.5に届かない（12pxは大文字扱いにならない）。
   色相は保ち、明度だけ落とした派生1色を文字用に使う（床のための例外）。 */
html .elrn .tool em,html .elrn .more,html .esv .sub,html .esv .bl{color:#BE400F}

/* ── 学ぶ：ボタンの役割が8段に割れていた ── */
html .elrn .tool em{font-size:14px}
html .elrn .tool span,html .elrn .num span,html .elrn .gh .c,html .elrn .gd,
html .elrn .arts a,html .elrn .more{font-size:14px}
html .elrn .tool b,html .elrn .gh h3{font-size:16px}
html .elrn .btn{font-size:16px}

/* ── 教材（service） ── */
html .esv h1{font-size:34px}
html .esv .note,html .esv .gen,html .esv .bl,html .esv .sub{font-size:14px}
html .esv .in p,html .esv .lead,html .esv .bt,html .esv .bd{font-size:16px}
html .esv .btn,html .esv .yen{font-size:16px}
html .esv .ph img,html .esv .bk,html .esv .bk img,
html .esv .card,html .esv .koma img,html .esv .gen{border-radius:12px}
html .esv .btn{border-radius:999px}

/* ── プロフィール ── */
html .ep h1{font-size:34px}
html .ep .facts li,html .ep .sign{font-size:14px}
html .ep .it p,html .ep .yomi,html .ep .nm,html .ep .btn{font-size:16px}
html .ep .lic,html .ep img,html .ep .bk img{border-radius:12px}
html .ep .facts li{border-radius:999px}

/* ── ボタンの塗り色に残っていた暖色の白 ── */
html .btn-primary{color:#FFFFFF}

/* ── 12. 取りこぼし（名指しで段と角丸へ寄せる） ── */
html .esv .gen,html .esv .d,html .esv .bl,html .esv .bd{font-size:14px}
html .esv .in li,html .esv .in p,html .esv .bt,html .esv .nm{font-size:16px}
html .esv .soon,html .esv .book,html .esv .book img{border-radius:12px}
html .esv .sub{border-radius:999px}

html .ep .sign,html .ep .facts li{font-size:14px}
html .ep .lic li b,html .ep .nm,html .ep .clinic p{font-size:16px}
html .ep .clinic,html .ep .w img,html .ep .bk img{border-radius:12px}

/* ── 13. 詳細度で負けていた分（ページ側が .esv .bk .bt のように2クラス） ── */
html .esv .bks .bk .bt{font-size:16px}
html .esv .bks .bk .bd,html .esv .bks .bk .bl{font-size:14px}
html .esv .soon li .d,html .esv .soon li .g,html .esv .buy .gen{font-size:14px}
html .esv .sec .w .g{font-size:14px}
html .esv .bks .bk,html .esv .bks .bk img,
html .esv .ws img,html .esv img.si{border-radius:12px}

/* オレンジを1本に。小さい文字が床4.5に届かなかったので、
   ブランドのオレンジ自体を少しだけ濃くして、2色に割れるのをやめる。 */
html{--accent:#BE400F}
html .elife-pc-mag{background:#BE400F}
html .esv .btn,html .eh .cta,html .ep .btn{background:#BE400F}

/* ── 14. 白を主役にする（1巡目はグレーが主役に見えてしまった） ──
   社長の依頼は「背景は白」。ヘッダー・ヒーロー・カードは白、
   節の地だけ #F7F7F7 の薄い拍にする。 */
html body{background:#FFFFFF}
html .site-head{background:#FFFFFF}
html .eh,html .esv,html .ep,html .elrn{background:#FFFFFF}
html .eh .hero,html .esv .sec:not(.cream),html .ep .sec:not(.cream){background:#FFFFFF}
html .eh .sec.cream,html .esv .sec.cream,html .ep .sec.cream,
html .eh .bio{background:#F7F7F7}
html .elrn .sec{background:#FFFFFF}
html .elrn .num,html .elrn .tool,html .elrn .arts a,html .elrn .end{background:#FFFFFF}