/* ============================================================
   entsuji-iro.css —【圓通寺】六色（和の伝統色）
   2026-09-22 新設（住職ご要望「ページによって明るく、カラフルに」）

   ■ なにをする一枚か
     参拝の方がご覧になる画面の「色」を、このファイル一枚で決めます。
     それまでは 23枚の .html それぞれに :root が書かれており、
     しかも同じ名前が画面によって逆の意味でした
     （--ink が top では黒 #231E18、omikuji では白 #EDE4D3）。
     色を一つ変えるのに23か所を触る状態だったのを、ここ一か所にします。

   ■ ページ側がすること（2行だけ）
     ① <html lang="ja" data-iro-page="top">   … 自分の名を名乗る
     ② <head> に
        <link rel="stylesheet" href="/static/entsuji-iro.css?v=YYYYMMDD">
     ページの中の CSS は、一行も書き換えません。

   🚨 差し替えたら ?v= を必ず変える（変えないと前の色が残ります）。

   ■ なぜ html[...] で書いてあるか
     <link> は各ページの <style> より先に読まれるので、同じ強さでは
     ページ側が勝ちます。html[属性] を頭に付けて強さを一段上げています。
     このファイルが読めなかったときは、いままでの色のまま出ます（安全側）。

   ■ 六色の割り当て（もくじの群と同じ）
       緋   ひいろ   ご祈祷・お守り     護摩の炎。当山の芯
       金茶 きんちゃ 御朱印             御朱印帳と朱肉の金
       萌黄 もえぎ   こよみ・おみくじ   毎日お寄りいただく所
       山吹 やまぶき 今日の占い         おみくじの隣。押し間違い防止
       浅葱 あさぎ   お知らせ・知恵袋   住職のお言葉が載る所
       藍   あい     お寺について       長く読む所・調べる所

   ■ 暗いままにする画面（明るくしない）
       仮想参拝 osanpai … 映像が主役。周りが明るいと映像が負ける
       ケンゾクくん soudan  … 夜に一人でお尋ねになる方の画面
   ============================================================ */

:root{
  /* ── 地 ─────────────────────────────── */
  --iro-sumi:#17130F;  --iro-sumi2:#241C15;
  --iro-washi:#F6F1E7; --iro-paper:#FBF7EF;
  --iro-ink:#231E18;   --iro-ash:#6E655A;   --iro-line:#E3DAC9;

  /* ── 六色（濃い / 標準 / 淡い / ごく淡い） ── */
  --iro-hi-d:#8F2C17;   --iro-hi:#C2481F;   --iro-hi-l:#E0704A;   --iro-hi-w:#FBEDE7;
  --iro-kin-d:#7E5612;  --iro-kin:#A9761F;  --iro-kin-l:#C69A4E;  --iro-kin-w:#FBF3E2;
  --iro-moe-d:#456A29;  --iro-moe:#5E8C3A;  --iro-moe-l:#8FB85E;  --iro-moe-w:#EEF5E4;
  --iro-yama-d:#8A5A12; --iro-yama:#C0902A; --iro-yama-l:#E0B65C; --iro-yama-w:#FCF3DE;
  --iro-asa-d:#205E64;  --iro-asa:#2E7F86;  --iro-asa-l:#5CB2B8;  --iro-asa-w:#E5F2F2;
  --iro-ai-d:#23405C;   --iro-ai:#34597E;   --iro-ai-l:#7FA6CE;   --iro-ai-w:#E9F0F7;
}

/* ── 群ごとの当て色 ───────────────────────────────────────
   第二段・第三段のページは data-iro="kin" のように群を名乗るだけで、
   --iro / --iro-d / --iro-l / --iro-w が使えるようになります。       */
:root[data-iro="hi"]  {--iro:var(--iro-hi);  --iro-d:var(--iro-hi-d);  --iro-l:var(--iro-hi-l);  --iro-w:var(--iro-hi-w);}
:root[data-iro="kin"] {--iro:var(--iro-kin); --iro-d:var(--iro-kin-d); --iro-l:var(--iro-kin-l); --iro-w:var(--iro-kin-w);}
:root[data-iro="moe"] {--iro:var(--iro-moe); --iro-d:var(--iro-moe-d); --iro-l:var(--iro-moe-l); --iro-w:var(--iro-moe-w);}
:root[data-iro="yama"]{--iro:var(--iro-yama);--iro-d:var(--iro-yama-d);--iro-l:var(--iro-yama-l);--iro-w:var(--iro-yama-w);}
:root[data-iro="asa"] {--iro:var(--iro-asa); --iro-d:var(--iro-asa-d); --iro-l:var(--iro-asa-l); --iro-w:var(--iro-asa-w);}
:root[data-iro="ai"]  {--iro:var(--iro-ai);  --iro-d:var(--iro-ai-d);  --iro-l:var(--iro-ai-l);  --iro-w:var(--iro-ai-w);}


/* ══════════════════════════════════════════════════════════
   縁側（トップ）── 墨と金のまま。中のご案内が「行き先の色」をまとう
   当山のお顔ですので、帯の格は動かしません。
   ══════════════════════════════════════════════════════════ */

/* 今日のこよみ ＝ 萌黄 */
html[data-iro-page="top"] .koyomi{border-color:#CFE0BC;}
html[data-iro-page="top"] .koyomi.kaiun{border-color:var(--iro-moe-l);box-shadow:0 3px 16px rgba(94,140,58,.20);}
html[data-iro-page="top"] .koyomi .kh{background:linear-gradient(90deg,#2F4A1E,#4E7A30);}
html[data-iro-page="top"] .koyomi .kh .t{color:#F2FAEA;}
html[data-iro-page="top"] .koyomi .kh .d{color:#FFFFFF;}
html[data-iro-page="top"] .koyomi .more{color:var(--iro-moe-d);}

/* 今月の御朱印 ＝ 金茶 */
html[data-iro-page="top"] .goshuin{border-color:#E4CFA0;box-shadow:0 3px 14px rgba(169,118,31,.14);}
html[data-iro-page="top"] .goshuin .cap{background:var(--iro-kin-w);color:#7E6430;}
html[data-iro-page="top"] .goshuin .cap b{color:var(--iro-kin-d);}

/* おみくじ ＝ 萌黄 */
html[data-iro-page="top"] .omikuji-cta{
  background:linear-gradient(135deg,#2F4A1E,#4E7A30);
  border-color:var(--iro-moe-l);color:#F4FBEC;}
html[data-iro-page="top"] .omikuji-cta::after{background:radial-gradient(circle,rgba(255,255,255,.20),transparent 70%);}
html[data-iro-page="top"] .omikuji-cta .t{color:#F4FBEC;}
html[data-iro-page="top"] .omikuji-cta .d{color:#FFFFFF;}
html[data-iro-page="top"] .omikuji-cta .go{color:#FFFFFF;}

/* 今日の占い ＝ 山吹（おみくじの真下に並ぶので、色を分けて押し間違いを防ぐ） */
/* 🚨 山吹は明るい色なので、白い字では 4.5:1 に届かない（実測 2.68:1）。
      濃くすると御朱印の金茶と見分けがつかなくなるため、**金地に墨**にした。
      萌黄は「濃い地に白」、山吹は「明るい地に墨」＝二つの帯が、より間違いにくい。 */
html[data-iro-page="top"] #uranaiLink{
  background:linear-gradient(135deg,var(--iro-yama),#DCA83C);
  border-color:#E8C070;}
html[data-iro-page="top"] #uranaiLink::after{background:radial-gradient(circle,rgba(255,255,255,.26),transparent 70%);}
html[data-iro-page="top"] #uranaiLink .t{color:#2E2206;}
html[data-iro-page="top"] #uranaiLink .d{color:#2E2206;}
html[data-iro-page="top"] #uranaiLink .go{color:#2E2206;}

/* 今月の知恵袋 ＝ 浅葱（住職のお言葉） */
html[data-iro-page="top"] .wisdom{background:var(--iro-asa-w);border-color:#BBD9D9;}
html[data-iro-page="top"] .wisdom .wt{color:var(--iro-asa-d);}
html[data-iro-page="top"] .wisdom .more{color:var(--iro-asa-d);}

/* 見出しの印（◆）＝ その先の色。ページ側で .ir-◯◯ を付けています */
html[data-iro-page="top"] .sec-h.ir-kin::before {background:var(--iro-kin);}
html[data-iro-page="top"] .sec-h.ir-moe::before {background:var(--iro-moe);}
html[data-iro-page="top"] .sec-h.ir-asa::before {background:var(--iro-asa);}
html[data-iro-page="top"] .sec-h.ir-hi::before  {background:var(--iro-hi);}


/* ══════════════════════════════════════════════════════════
   今日のこよみ ── 萌黄
   ══════════════════════════════════════════════════════════ */
:root[data-iro-page="koyomi"]{
  --washi:#F4F8EE;
  --ember:var(--iro-moe); --ember-d:var(--iro-moe-d);
}
html[data-iro-page="koyomi"] header.top{background:linear-gradient(180deg,#2F4A1E,#4E7A30);}
html[data-iro-page="koyomi"] header.top::before{background:radial-gradient(120% 80% at 50% -18%,rgba(255,255,255,.17),transparent 60%);}
html[data-iro-page="koyomi"] header .eyebrow{color:#F0F8E4;}
html[data-iro-page="koyomi"] header h1{color:#FFFFFF;}
html[data-iro-page="koyomi"] header .date{color:#FFFFFF;}
html[data-iro-page="koyomi"] .back{color:#F0F8E4;}


/* ══════════════════════════════════════════════════════════
   おみくじ ── 全面の暗がりを和紙の明るさへ ＋ 萌黄
   御籤筒（おみくじづつ）は、実際の寺社と同じ朱塗りに金の箍（たが）。
   結果の「大吉」は緋で大きく。
   ══════════════════════════════════════════════════════════ */
:root[data-iro-page="omikuji"]{
  --sumi:#F4F7EE; --sumi2:#FBFBF4;
  --ink:#26241C;  --ash:#6E6B5C;
  --ember:var(--iro-hi); --ember-soft:var(--iro-hi);
  --brass:var(--iro-moe); --brass-soft:var(--iro-moe-l);
  --line:rgba(94,140,58,.30); --panel:#FFFFFF;
}
html[data-iro-page="omikuji"] body{
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(94,140,58,.22), transparent 62%),
    linear-gradient(180deg,#F4F7EE,#FBFBF4 55%,#F7F5EA);}
html[data-iro-page="omikuji"] .eyebrow{color:var(--iro-moe-d);}
html[data-iro-page="omikuji"] .lead{color:#3E4A33;}
html[data-iro-page="omikuji"] .chara{filter:drop-shadow(0 6px 16px rgba(0,0,0,.18));}
html[data-iro-page="omikuji"] .tube{
  background:linear-gradient(180deg,#D2512C,#A62F16);
  border-color:#E0A33A;
  box-shadow:inset 0 8px 16px rgba(0,0,0,.22), 0 10px 22px rgba(166,47,22,.30);}
html[data-iro-page="omikuji"] .tube::before{background:#7E2210;}
html[data-iro-page="omikuji"] .tube .lbl{color:#FBE9C6;}
html[data-iro-page="omikuji"] .fortune{color:var(--iro-hi);text-shadow:0 2px 18px rgba(178,58,32,.22);}
html[data-iro-page="omikuji"] .omtext{
  background:#FFFFFF;border-color:rgba(94,140,58,.28);color:#2F2C24;
  box-shadow:0 3px 14px rgba(70,90,40,.08);}
html[data-iro-page="omikuji"] .btn-primary{
  background:linear-gradient(180deg,#4E7A30,#3C5F24);color:#FFFFFF;
  box-shadow:0 8px 22px rgba(94,140,58,.34);}
html[data-iro-page="omikuji"] .btn-ghost{color:#5E7A3E;border-color:rgba(94,140,58,.42);}
html[data-iro-page="omikuji"] .toast{background:rgba(255,255,255,.97);color:#26241C;}


/* ══════════════════════════════════════════════════════════
   今日の占い ── 全面の暗がりを生成りの明るさへ ＋ 山吹
   ══════════════════════════════════════════════════════════ */
:root[data-iro-page="uranai"]{
  --sumi:#FBF6E8; --sumi2:#FDFBF3;
  --ink:#2A2418;  --ash:#6E6555;
  --ember:var(--iro-hi); --ember-soft:var(--iro-hi);
  --brass:var(--iro-yama-d); --brass-soft:var(--iro-yama-l);
  --line:rgba(192,144,42,.32); --panel:#FFFFFF;
}
html[data-iro-page="uranai"] body{
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(192,144,42,.20), transparent 62%),
    linear-gradient(180deg,#FBF6E8,#FDFBF3 55%,#F9F4E6);}
html[data-iro-page="uranai"] .eyebrow{color:var(--iro-yama-d);}
html[data-iro-page="uranai"] .lead{color:#42392A;}
html[data-iro-page="uranai"] .chara{filter:drop-shadow(0 6px 16px rgba(0,0,0,.18));}
html[data-iro-page="uranai"] .theme{
  background:#FFFFFF;border-color:rgba(192,144,42,.34);
  box-shadow:0 2px 10px rgba(140,110,40,.07);}
html[data-iro-page="uranai"] .theme:hover{border-color:var(--iro-yama);box-shadow:0 8px 22px rgba(192,144,42,.18);}
html[data-iro-page="uranai"] .res-theme{color:var(--iro-yama-d);text-shadow:0 2px 16px rgba(192,144,42,.20);}
html[data-iro-page="uranai"] .urtext{
  background:#FFFFFF;border-color:rgba(192,144,42,.28);color:#312B20;
  box-shadow:0 3px 14px rgba(140,110,40,.08);}
html[data-iro-page="uranai"] .btn-primary{
  background:linear-gradient(180deg,var(--iro-yama-l),var(--iro-yama));color:#3A2C0C;
  box-shadow:0 8px 22px rgba(192,144,42,.30);}
html[data-iro-page="uranai"] .btn-ghost{color:#7A6528;border-color:rgba(192,144,42,.42);}
html[data-iro-page="uranai"] .toast{background:rgba(255,255,255,.97);color:#2A2418;}


/* ══════════════════════════════════════════════════════════
   第一段の手直し（見張りが実測で見つけたもの）
   ══════════════════════════════════════════════════════════ */
/* 署名が opacity:.7 で薄く、明るい地の上で 2.78:1 しか無かった */
html[data-iro-page="omikuji"] footer.sig,
html[data-iro-page="uranai"]  footer.sig{opacity:1;}
/* 御籤の字が 4.45:1（4.5 に届かない）。札を少し明るく */
html[data-iro-page="omikuji"] .tube .lbl{color:#FFF6E4;}


/* ══════════════════════════════════════════════════════════
   第二段【金茶】御朱印・スタンプカード・お参りのスタンプ・遠くからの御朱印
   全面の暗がりを生成りへ。月替わりの御朱印そのものが主役になる。
   🚨 4枚は骨格が同じ（同じ :root・同じ body のグラデーション）。一組で足りる。
   ══════════════════════════════════════════════════════════ */
:root[data-iro="kin"]{
  --sumi:#FBF5E6; --sumi2:#FDFAF2;
  --ink:#2A241A;  --ash:#6E6455;
  --ember:var(--iro-hi); --ember-d:var(--iro-hi-d); --ember-soft:var(--iro-kin-d);
  --brass:var(--iro-kin); --brass-soft:var(--iro-kin-d);
  --line:rgba(169,118,31,.32); --panel:#FFFFFF; --field:#FFFDF7;
}
html[data-iro="kin"] body{
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(169,118,31,.16), transparent 62%),
    linear-gradient(180deg,#FBF5E6,#FDFAF2 60%,#F8F2E4);}
/* 暗い地の前提で書かれていた明るい文字（機械で洗い出した分）を、墨に戻す */
html[data-iro="kin"] .lead,
html[data-iro="kin"] .sub,
html[data-iro="kin"] .way,
html[data-iro="kin"] .onote,
html[data-iro="kin"] .guide-b,
html[data-iro="kin"] .reward-b,
html[data-iro="kin"] .step p,
html[data-iro="kin"] .stampbox p{color:#3B352A;}
html[data-iro="kin"] .toast{background:rgba(255,255,255,.97);color:#2A241A;
  border-color:rgba(169,118,31,.35);box-shadow:0 6px 20px rgba(120,84,20,.18);}
html[data-iro="kin"] .chara{filter:drop-shadow(0 6px 16px rgba(0,0,0,.16));}
html[data-iro="kin"] .hero{background:#FFFFFF;box-shadow:0 3px 14px rgba(169,118,31,.12);}
html[data-iro="kin"] footer,
html[data-iro="kin"] footer.sig{opacity:1;color:var(--iro-ash);}


/* ══════════════════════════════════════════════════════════
   第三段【緋】ご案内・ご祈祷の申込・授与品・郵送祈祷・継続祈願・お納めについて
   護摩の炎の色。当山のいちばん大事なご用。
   🚨 帯は #7E2210→#A83A1C まで濃くする（白い字が 4.5:1 に届く明るさ）。
   ══════════════════════════════════════════════════════════ */
:root[data-iro="hi"]{
  --ember:var(--iro-hi); --ember-d:var(--iro-hi-d); --ember-l:#D2643F;
  --brass:var(--iro-hi-d); --brass-l:var(--iro-hi); --brass-soft:#FBE4DA;
  --line:#EFD9CF; --washi:#FDF4F0; --sumi:#7E2210;
}
html[data-iro="hi"] header.top{background:linear-gradient(180deg,#7E2210,#A83A1C);}
html[data-iro="hi"] header.top::before{
  background:radial-gradient(120% 80% at 50% -20%,rgba(255,255,255,.16),transparent 60%);}
html[data-iro="hi"] header.top,
html[data-iro="hi"] header.top h1{color:#FFFFFF;}
html[data-iro="hi"] header .eyebrow,
html[data-iro="hi"] header p,
html[data-iro="hi"] header .sub{color:#FBE4DA;}
html[data-iro="hi"] .req,[data-iro="hi"] .req{background:var(--iro-hi-d) !important;color:#fff;}


/* ══════════════════════════════════════════════════════════
   第三段【浅葱】月一便り ── 住職のお言葉が載る場所
   ══════════════════════════════════════════════════════════ */
:root[data-iro="asa"]{
  --ember:var(--iro-asa); --ember-d:var(--iro-asa-d);
  --brass:var(--iro-asa-d); --brass-l:var(--iro-asa); --brass-soft:var(--iro-asa-w);
  --line:#D3E4E4; --washi:#F2F8F8; --sumi:#205E64;
}
html[data-iro="asa"] header.top{background:linear-gradient(180deg,#184A50,#2E7F86);}
html[data-iro="asa"] header.top::before{
  background:radial-gradient(120% 80% at 50% -18%,rgba(255,255,255,.16),transparent 60%);}
html[data-iro="asa"] header.top,
html[data-iro="asa"] header.top h1{color:#FFFFFF;}
html[data-iro="asa"] header .eyebrow,
html[data-iro="asa"] header p,
html[data-iro="asa"] header .date{color:#FFFFFF;}


/* ══════════════════════════════════════════════════════════
   第三段【藍】よくあるご質問・交通案内・特商法の表記
   長く読む所、調べる所。落ち着いて字を追える色に。
   ══════════════════════════════════════════════════════════ */
:root[data-iro="ai"]{
  --sumi:#23405C; --ember:var(--iro-ai); --brass:var(--iro-ai-d);
  --wash:#F2F6FA; --washi:#F2F6FA; --line:#D6E1EC; --soft:#5C6B7C;
}
html[data-iro="ai"] body{background:#F2F6FA;}
/* よくあるご質問は、もともと帯を持っている（header.hd）。色だけ替わる */
html[data-iro="ai"] header.hd{background:linear-gradient(180deg,#1C3449,#34597E);}
/* 交通案内・特商法は帯が無く、罫線一本だった。帯にする */
html[data-iro="ai"] .wrap > header:not(.hd){
  background:linear-gradient(180deg,#23405C,#34597E);
  border-bottom:none;
  margin:0 -16px 18px; padding:22px 18px 20px; text-align:center;}
html[data-iro="ai"] .wrap > header:not(.hd) .temple{color:#BBD0E4;}
html[data-iro="ai"] .wrap > header:not(.hd) h1{color:#FFFFFF;}
html[data-iro="ai"] .wrap > header:not(.hd) .lead{color:#E2EBF4;}
html[data-iro="ai"] h2,html[data-iro="ai"] h3{color:#23405C;}
html[data-iro="ai"] a[href*="maps"],
html[data-iro="ai"] .oshi .map{background:var(--iro-ai);color:#fff;border-color:var(--iro-ai);}


/* ══════════════════════════════════════════════════════════
   第二段・第三段の手直し（見張りが実測で見つけたもの）
   🚨 どれも「暗い地の前提」で書かれた色か、opacity で薄めた字。
      明るい地に変えた途端に読めなくなる。手で探さず、機械に洗い出させた。
   ══════════════════════════════════════════════════════════ */

/* ── 金茶 ───────────────────────────────────── */
/* 署名 .foot が opacity:.75 で 3.2:1 しか無かった */
html[data-iro="kin"] .foot{opacity:1;}
/* 御朱印の「見本です」は、印の中に opacity:.75 が直に書いてある */
html[data-iro="kin"] .cap div{opacity:1 !important;color:#5A5044;}
/* 「これまでのお申し込みを見る」＝金茶のままでは 3.8:1 */
html[data-iro="kin"] .myorders a{color:var(--iro-kin-d);}

/* ── 緋 ────────────────────────────────────── */
/* 帯の中の「‹ トップへ戻る」が、緋の上に緋で 1.43:1 だった */
html[data-iro="hi"] .back{color:#FBE4DA;}
/* 緋のボタンの副題（opacity:.9 ＋ #ffe）で 4.29:1 */
html[data-iro="hi"] .cta.p .ds{color:#FFFFFF;opacity:1;}
html[data-iro="hi"] .cta.p .go{opacity:1;}
/* 前厄・後厄の行は、印の中で opacity:.75 に薄められている */
html[data-iro="hi"] .price .r .n[style],
html[data-iro="hi"] .price .r .v[style]{opacity:.88 !important;}
/* お志の枠（淡い緋の地）に、灰の字が直に書いてある */
html[data-iro="hi"] .shinou span{color:#5F564B !important;}

/* ── 藍 ────────────────────────────────────── */
/* よくあるご質問の帯の副題が、藍の上に藍で 1.12:1 だった */
html[data-iro="ai"] header.hd .ken{color:#A9C6E0;}

/* ── 生成りの上の、薄すぎる署名 ──
   🚨 はじめ群まるごと（[data-iro="ai"] footer）に当てたら、
      **よくあるご質問の署名は地が濃い藍**だったので、そこだけ 1.52:1 にしてしまった。
      「同じ群なら同じ地」ではない。**明るい地のページだけ**に絞る。 */
html[data-iro-page="access"] footer,
html[data-iro-page="access"] footer a,
html[data-iro-page="tokushoho"] footer,
html[data-iro-page="payguide"] footer,
html[data-iro-page="payguide"] footer a,
html[data-iro="hi"] footer,
html[data-iro="hi"] footer a{color:#5F5A52;}

/* 火渡り神事（info の作り）も、ご祈祷と同じ緋の帯。
   🚨 罫線一本の見出しのままだと、帯を持つ他のページと顔が揃わない。
      帯にしたら .temple（--brass＝濃い緋）が緋の上の緋になるので、
      payguide と同じく 淡い桃色・白に置き替える。 */
html[data-iro-page="hiwatari"] .wrap > header{
  background:linear-gradient(180deg,#7E2210,#A83A1C);
  border-bottom:none;
  margin:0 -16px 18px; padding:22px 18px 20px; text-align:center;}
html[data-iro-page="hiwatari"] .wrap > header .temple,
html[data-iro-page="hiwatari"] .wrap > header .lead{color:#FBE4DA;}
html[data-iro-page="hiwatari"] .wrap > header h1{color:#FFFFFF;}

/* お納めについて（info の作り）にも、ご祈祷と同じ緋の帯を出す */
html[data-iro-page="payguide"] .wrap > header{
  background:linear-gradient(180deg,#7E2210,#A83A1C);
  border-bottom:none;
  margin:0 -16px 18px; padding:22px 18px 20px; text-align:center;}
html[data-iro-page="payguide"] .wrap > header .temple{color:#FBE4DA;}
html[data-iro-page="payguide"] .wrap > header h1{color:#FFFFFF;}
