/* ==========================================================================
   page-cerec-dark.css ｜ CERECワンデー特設ページ専用のダーク配色
   ------------------------------------------------------------------------
   読み込み順： sanitize → style.min → top-natural → theme-hakuji
                → page-veneer → 本ファイル（最後）

   このファイルは /service/cerec_oneday.html だけが読み込む。
   HTML 側の <link> 1 行を外せば白磁テーマの見た目に戻る。既存 CSS は未変更。

   設計方針：
   - theme-hakuji が定義した CSS 変数を、このページに限って上書きする。
     page-veneer.css のパーツ（vLead / vCols / vSteps / vCards / vFig /
     vNote / vFaq / vTable）は色をすべて変数で書いているため、変数の差し替え
     だけで追従する。
   - ただし --bark は「フッターの地」「料金表の見出し行」「ボタンの hover 地」
     として構造的に“暗い背景”に使われている。明るくするとフッターが白飛びして
     文字が読めなくなるため、--bark は暗いまま据え置き、--bark を文字色として
     使っている箇所だけ個別に明るく上書きする。
   - 症例写真・口腔内写真には filter をかけない（歯の色調が変わるため）。
   ========================================================================== */

/* ---- 1. 変数の差し替え ------------------------------------------------- */
:root{
  /* 地まわり：温かみのある墨。純黒にはしない（銀座の夜の照明を意識） */
  --kinari:#14120f;               /* ページの地 */
  --paper:#1d1a16;                /* カード・セクション面 */
  --clay:#1a1714;
  --sand:rgba(201,173,118,.22);   /* 罫（淡）＝細い金の線 */
  --sand-pale:#241f19;            /* 表の淡い塗り */

  /* 金：暗い地の上では少し持ち上げる */
  --wood:#c9ad76;
  --wood-dark:#d9bf8c;            /* 暗地で文字に使うので明るめ */

  /* 文字 */
  --ink:#ded7c9;                  /* 本文 */
  --moss:#a49b8d;                 /* 二次テキスト */
  --moss-dark:#b7ae9f;
  --moss-deep:#2a2722;

  /* --bark は暗い背景として使われているので据え置き */
  --bark:#22201c;
  --sumi-mid:#3b3831;

  /* このファイル用の追加トークン */
  --dk-head:#f0e9dc;              /* 見出しの白 */
  --dk-line:rgba(201,173,118,.22);
  --dk-shadow:0 14px 40px rgba(0,0,0,.45);
}

/* ---- 2. 地：わずかな明暗で奥行きを出す -------------------------------- */
body{
  background-color:var(--kinari);
  background-image:
    radial-gradient(1200px 600px at 15% -10%, rgba(201,173,118,.07), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(201,173,118,.05), transparent 60%);
  background-attachment:fixed;
}
.comBlock + .comBlock{ border-top:1px solid var(--dk-line); }

/* ---- 3. ヘッダー・パンくず -------------------------------------------- */
#header{
  background:rgba(20,18,15,.92);
  border-bottom:1px solid var(--dk-line);
  backdrop-filter:saturate(120%) blur(6px);
}
#header div.clinicName h3,
#header h1.clinicName,
#header div.clinicName a{ color:#eadfc9; }
/* ヘッダーのロゴは黒版 SVG（logo_kdc_b.svg）が直に書かれている。
   暗い地では読めないので、同梱の白版に差し替える。HTML は触らない。 */
#header .logo img,
#header .logo img{ content:url("/img/common/logo_kdc_w.svg"); }
#headerBtnMenu .btn span,
#headerBtnMenu p.close{ background:#eadfc9; }
#headerBtnMenu .name{ color:var(--moss); }
#breadCrumb, #breadCrumb li, #breadCrumb li a{ color:#93897a; }
#breadCrumb li a:hover{ color:var(--wood-dark); }

/* ---- 4. 見出し --------------------------------------------------------- */
.comBlock div.comContent h2.com,
.comBlock div.comContent h3.com{ color:var(--dk-head); }
.comBlock div.comContent p.enTitle,
.comBlock div.comContent p.enTitle span{ color:var(--wood); }

/* 縦組みの英字ラベル（ページ左端） */
p.enTitle{ color:var(--wood); }

/* ---- 5. 本文・リンク --------------------------------------------------- */
.comBlock div.comContent p.com,
.comBlock div.comContent ul.com li,
.comBlock div.comContent ol.com li,
.comBlock div.comContent dl.com dd{ color:var(--ink); }
.comBlock div.comContent p a,
.comBlock div.comContent ul.com a,
.comBlock div.comContent dd a{ color:var(--wood-dark); text-decoration-color:rgba(201,173,118,.5); }
.comBlock div.comContent p a:hover,
.comBlock div.comContent ul.com a:hover,
.comBlock div.comContent dd a:hover{ color:#f0dcb4; text-decoration-color:var(--wood); }
/* 箇条書き（vNote / vCols）の中のリンクは theme-hakuji のセレクタから漏れており、
   ブラウザ既定の青（#0000EE）のまま出る。暗い地では読めないので拾い直す。
   ボタンは別扱いなので除外する。 */
.comBlock div.comContent a:not(.btn){
  color:var(--wood-dark); text-decoration-color:rgba(201,173,118,.5);
}
.comBlock div.comContent a:not(.btn):hover{ color:#f0dcb4; text-decoration-color:var(--wood); }

/* ---- 6. page-veneer パーツの微調整 ------------------------------------- */
/* リード文：金の縦罫＋白に近い明朝 */
.comBlock div.comContent p.vLead{ color:var(--dk-head); }

/* カード類：面をわずかに持ち上げ、影で浮かせる */
.vCols section,
.vCards article{
  background:var(--paper);
  border-color:var(--dk-line);
  box-shadow:var(--dk-shadow);
}
.comBlock div.comContent .vCols h3,
.comBlock div.comContent ol.vSteps h3{ color:var(--dk-head); }
.comBlock div.comContent .vCards h3{ color:var(--wood-dark); }

/* 手順リスト：番号の丸を金の線で */
.comBlock div.comContent ol.vSteps > li{ border-top-color:var(--dk-line); }
.comBlock div.comContent ol.vSteps > li:last-child{ border-bottom-color:var(--dk-line); }
.comBlock div.comContent ol.vSteps > li::before{ color:var(--wood-dark); border-color:var(--wood); }

/* 図版：枠を細い金線に。画像そのものには filter をかけない */
.comBlock div.comContent figure.vFig img,
.vPair figure img{ border-color:var(--dk-line); }

/* FAQ */
.vFaq{ border-top-color:var(--dk-line); }
.vFaq details{ border-bottom-color:var(--dk-line); }
.vFaq summary{ color:var(--dk-head); }
.vFaq summary:hover{ color:var(--wood-dark); }
.comBlock div.comContent .vFaq .vAnswer p{ color:var(--ink); }

/* 参考文献 */
.comBlock div.comContent ol.vRefList li{ color:var(--ink); }
.comBlock div.comContent ol.vRefList li .vRefJa{ color:var(--moss-dark); }
.comBlock div.comContent ol.vRefList li:target{
  background:rgba(201,173,118,.16);
  box-shadow:0 0 0 6px rgba(201,173,118,.16);
}
.comBlock div.comContent sup a{ color:var(--wood-dark); }
.comBlock div.comContent sup a:hover{ color:#f0dcb4; }

/* ---- 7. 表 ------------------------------------------------------------- */
/* 比較表（vTable）：見出し行を一段明るい墨に、当院の行を金でうっすら */
.comBlock div.comContent table.vTable th,
.comBlock div.comContent table.vTable td{
  border-color:var(--dk-line)!important;
  color:var(--ink);
}
.comBlock div.comContent table.vTable thead th,
.comBlock div.comContent table.vTable tbody th{
  background:#262119!important;
  color:var(--dk-head);
}
.comBlock div.comContent table.vTable td.vOurs,
.comBlock div.comContent table.vTable tbody tr.vOurs th{ background:rgba(201,173,118,.13)!important; }
.comBlock div.comContent table.vTable tbody tr.vOurs th{ color:var(--dk-head); }
.comBlock div.comContent table.vTable.vTotal td.vSum{ color:var(--dk-head); }

/* 料金表（theme-hakuji 側で --bark を地に使っている） */
.comBlock div.comContent table[class^="price"] tr th,
.comBlock div.comContent table[class^="price"] tr th:nth-child(2){
  background:#262119!important; color:var(--dk-head)!important;
  border-color:var(--dk-line)!important;
}
.comBlock div.comContent table[class^="price"] tr td{ color:var(--ink); }
.comBlock div.comContent table[class^="price"] tr td:first-child{ color:var(--ink); }
.comBlock div.comContent table[class^="price"] tr td:nth-child(2){
  background:rgba(201,173,118,.10)!important; color:var(--dk-head);
}
.comBlock div.comContent table[class^="price"] tr td,
.comBlock div.comContent table[class^="price"] tr th,
.comBlock div.comContent table.simple tr td,
.comBlock div.comContent table.simple tr th{ border-top-color:var(--dk-line)!important; }
.comBlock div.comContent table.simple tr th{ color:var(--dk-head); }
.comBlock div.comContent table.simple tr td{ color:var(--ink); }

/* ---- 8. ボタン：金の細枠、hover で金ベタ ------------------------------- */
.comBlock div.comContent a.btn{
  color:var(--wood-dark); background:transparent; border-color:var(--wood);
}
.comBlock div.comContent a.btn:hover{
  background:var(--wood); border-color:var(--wood); color:#1a1714!important;
}

/* ---- 9. 注記・キャプション --------------------------------------------- */
.comBlock div.comContent .vFig figcaption,
.comBlock div.comContent .vCaption,
.comBlock div.comContent .vCaption dd{ color:var(--ink); }
.comBlock div.comContent .vCaption dt,
.comBlock div.comContent .vNote h3,
.vPair figure figcaption{ color:var(--wood-dark); }
.comBlock div.comContent .vNote li,
.comBlock div.comContent .vNote p{ color:var(--ink); }

/* ---- 10. リンク集（ページ下部の関連リンク） ---------------------------- */
.linkIcons ul li a{ color:var(--ink); }
.linkTexts .linkTextsWrap ul li a{ color:var(--moss-dark); }
.linkTexts .linkTextsWrap ul li.head a{ color:var(--dk-head); }

/* ---- 11. 画像の縁を地になじませる -------------------------------------- */
.comBlock div.comContent figure.vFig img{ box-shadow:var(--dk-shadow); }