/* =========================================================
   Marketing Monster — LIGHT skin (trial / index only)
   ---------------------------------------------------------
   ADDITIVE override layer. Every rule is scoped under
   html[data-theme="light"], so the DARK theme (no attribute)
   is byte-for-byte untouched. Load this AFTER cz.css.
   "同デザインの明色スキン" 方針：構成・余白・モーションは
   現状のまま、配色だけを白地用に反転・微調整する。
   ========================================================= */

/* ---- design tokens (override :root / POLISH v2) -------------------------
   html[data-theme="light"] = (0,1,1) は :root (0,1,0) に勝つので確実に上書き。 */
html[data-theme="light"]{
  --bg:#f7f6f2;          /* warm off-white（ink #f2f0ea の暖色基調を踏襲） */
  --bg2:#eceae2;         /* card / hover */
  --ink:#16161e;         /* near-black（やや寒色） */
  --muted:#45455e;       /* 本文補助：白地でAA確保 */
  --faint:#8c8ca2;       /* 罫・キャプション */
  --accent:#5b46e6;      /* 紫：白地で映える深さに調整 */
  --accent2:#2f7fff;     /* 青：同上 */
  --line:rgba(18,18,40,.14);
  --line-soft:rgba(18,18,40,.07);
  /* EDITORIAL DEVICES（2026-06-16）：ライト基調のゴースト英字＝地に極めて近い薄ベタ。
     cz.css の :root 既定（ダーク用 #20202c）を白地用へ上書き。1.14:1（装飾・aria-hidden）。
     bracket はライトの accent（5.6:1）をそのまま継承（cz.css の var(--accent) 参照で追従）。 */
  --ghost-c:#eae7dd;
  /* design-review S4：注記・出典の可読階層＝META #6E6E86（地#f7f6f2で4.6:1）。
     FAINT #8c8ca2(3.04:1) はメタ専用（©/ページ番号）に分離（デッキ art_direction_v2 と整合）。 */
  --meta:#6e6e86;
}

/* ---- base / scrollbar / selection -------------------------------------- */
html[data-theme="light"] *{scrollbar-color:rgba(0,0,0,.22) transparent}
html[data-theme="light"] ::-webkit-scrollbar-track{background:#e9e7df}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border:2px solid #e9e7df}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.32)}
html[data-theme="light"] ::selection{background:#5b46e6;color:#fff}

/* grain はオーバーレイ合成で白地ではほぼ無効。さらに薄めて質感ノイズに留める */
html[data-theme="light"] body::after{opacity:.035;mix-blend-mode:multiply}

/* ---- AURORA（白地用：暗バンドを白へ＋multiplyで淡く着色） ----------------
   元は #000 striping + difference blend（暗背景で発光）。白地では暗く沈むため、
   暗バンドを白に置換し multiply 合成へ。白=無変化／パステル帯のみ淡く乗る。 */
html[data-theme="light"] .aurora{
  opacity:.42;mix-blend-mode:multiply;
  --au-dark:repeating-linear-gradient(100deg,#fff 0%,#fff 7%,transparent 10%,transparent 12%,#fff 16%);
}
html[data-theme="light"] .aurora::after{mix-blend-mode:multiply}

/* ---- preloader --------------------------------------------------------- */
html[data-theme="light"] .pl__n{
  background:linear-gradient(120deg,#2a2a3a,#6a4dff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .pl__bar{background:rgba(0,0,0,.14)}

/* ---- header ------------------------------------------------------------ */
@media(min-width:861px){
  html[data-theme="light"] .hdr.scrolled{
    border-color:var(--line);background:rgba(255,255,255,.6);
    box-shadow:0 16px 50px -22px rgba(40,40,80,.35)}
}
@media(max-width:860px){
  html[data-theme="light"] .hdr.scrolled,
  html[data-theme="light"] .hdr.nav-open{background:rgba(247,246,242,.85);border-bottom-color:var(--line)}
}
/* fill ボタン（ink背景）の文字色は bg（明色）へ反転 */
html[data-theme="light"] .hdr__cta{color:var(--bg)}
html[data-theme="light"] .hdr__cta:hover{box-shadow:0 8px 24px -10px rgba(40,40,80,.4)}

/* ---- mobile nav overlay ------------------------------------------------ */
html[data-theme="light"] .navov{background:rgba(247,246,242,.94)}
html[data-theme="light"] .navov__links a:hover,
html[data-theme="light"] .navov__links a:active{color:var(--ink)}
html[data-theme="light"] .navov__cta .is-fill{color:var(--bg)}

/* ---- hero（トンネル背景上のスクリム／veil） ------------------------------
   トンネル＝off-white地に紫/青の点群。見出しは左寄せの濃インクのため、
   veil は「左を強めにウォッシュして見出しを確実に読ませ、右側はトンネルを
   見せる」左寄せグラデ＋上下フェードに。中央の明るい収束点でも左ウォッシュで
   可読性を確保する。 */
/* ヒーローの印象を高めるヴィネット（外周減光＋中央集光・2026-06-16ユーザー指示「強/cinematic」）。
   減光は左右＋四隅＋中央グローに集中。上下は .hero::before（上層）で off-white へ再リフトし、
   ナビ可読性（最上部は透明ヘッダー）と次セクションへの馴染みを確保＝ダーク帯・可読性低下を防ぐ。
   色は黒でなくブランド深インディゴ（安っぽさ回避・トンネルの紫青と調和）。中心は収束点に合わせ 56%/46〜48%。 */
html[data-theme="light"] .bg3d__veil{
  background:
    /* ① 中央グロー：収束点を持ち上げて「明るい中心」を作る（最前面） */
    radial-gradient(50% 44% at 56% 46%, rgba(255,255,255,.66) 0%, rgba(255,255,255,.20) 36%, rgba(255,255,255,0) 62%),
    /* ② 左ウォッシュ：見出し域を整える（濃インク見出しの可読性＋クリーンさ） */
    linear-gradient(95deg,rgba(247,246,242,.52) 0%,rgba(247,246,242,.24) 40%,rgba(247,246,242,.03) 72%,rgba(247,246,242,0) 100%),
    /* ③ 上下端だけ off-white へ：上=ナビ域(0→12%)／下=次セクション馴染み(86→100%)。
          ※帯を狭くして四隅のヴィネットが打ち消されないようにする（旧版の失敗＝.hero::beforeが四隅を washout） */
    linear-gradient(180deg,rgba(247,246,242,.30) 0%,rgba(247,246,242,0) 12%,rgba(247,246,242,0) 86%,rgba(247,246,242,.60) 100%),
    /* ④ ヴィネット（強・cinematic）：外周を深インディゴで明確に落とす（中央32%素抜き→四隅 .60 まで） */
    radial-gradient(120% 108% at 56% 47%, rgba(12,10,34,0) 32%, rgba(14,12,40,.20) 58%, rgba(18,14,52,.42) 80%, rgba(26,18,72,.60) 100%)}
/* .hero::before（ダークの上下スクリム）はライトでは無効化＝ヴィネットを単層で完全制御（旧版で四隅を打ち消していた競合を除去） */
html[data-theme="light"] .hero::before{background:none}
html[data-theme="light"] .hero__ey{color:var(--muted)}
html[data-theme="light"] .hero__en{color:var(--muted)}

/* 見出しキーワードのグラデ（白地では淡すぎるため深色へ差し替え） */
html[data-theme="light"] .hero h1 em,
html[data-theme="light"] .stmt em,
html[data-theme="light"] .cta h2 em,
html[data-theme="light"] .phero h1 em,
html[data-theme="light"] .pcta h2 em,
html[data-theme="light"] .hpanel--intro h2 em{
  background-image:
    radial-gradient(55% 55% at 50% 50%,#8a3ff0 0%,transparent 72%),
    radial-gradient(55% 55% at 50% 50%,#1f7fff 0%,transparent 72%),
    radial-gradient(58% 58% at 50% 50%,#5a2de0 0%,transparent 72%),
    radial-gradient(55% 55% at 50% 50%,#1aa6e6 0%,transparent 72%),
    linear-gradient(110deg,#6a3fe0,#1f78ff)}

/* ---- section labels / accents ------------------------------------------ */
html[data-theme="light"] .lbl{color:var(--accent)}
html[data-theme="light"] .biz__main p{color:var(--muted)}
html[data-theme="light"] .biz__main .en,
html[data-theme="light"] .witem .cat,
html[data-theme="light"] .gcard .n,
html[data-theme="light"] .appr__k,
html[data-theme="light"] .hpanel__no--sm,
html[data-theme="light"] .phero .en{color:var(--accent)}
html[data-theme="light"] .stat__n .u{color:var(--accent)}
html[data-theme="light"] .hpanel__tag,
html[data-theme="light"] .hpanel:hover .hpanel__tag{color:var(--muted)}
html[data-theme="light"] .hpanel:hover .hpanel__tag{color:var(--accent)}
html[data-theme="light"] .hpanel__ic svg{stroke:var(--accent)}

/* 現在ページのナビ項目：白地で白文字＝不可視だったため accent（選択中の明示）へ */
html[data-theme="light"] .hdr__nav a[aria-current="page"]{color:var(--accent)}

/* ---- marquee（装飾の淡色テキスト） ------------------------------------- */
html[data-theme="light"] .marq__t{color:#c6c4d0}

/* ---- horizontal scroll panels ------------------------------------------ */
html[data-theme="light"] .hpanel:hover{background:var(--bg2)}
html[data-theme="light"] .hpanel[data-n]::before{color:rgba(18,18,40,.045)}
html[data-theme="light"] .hpanel__no{
  background:linear-gradient(125deg,#2a2a3a,#6a4dff 75%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- updates / footer hovers（#fff hover → ink） ------------------------ */
html[data-theme="light"] .upd__row:hover{color:var(--ink)}
html[data-theme="light"] .ft__cols a:hover,
html[data-theme="light"] .phero .crumb a:hover,
html[data-theme="light"] .witem:hover .go{color:var(--ink)}
html[data-theme="light"] .witem .go:hover{color:var(--accent)}

/* ---- CTA buttons ------------------------------------------------------- */
/* .btn:hover と .biz__go hover は ink背景/bg文字でトークン追従＝自動反転、追加不要。
   solidボタンのhoverのみ #fff 直値で破綻するため反転。 */
html[data-theme="light"] .btn--solid:hover{
  background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ---- footer ------------------------------------------------------------ */
html[data-theme="light"] .ft{
  background:radial-gradient(42% 150px at 50% 0%,rgba(91,70,230,.10),transparent 72%),#efeee7}

/* ---- mobile static background ------------------------------------------ */
@media(max-width:768px){
  html[data-theme="light"] body{background:
    radial-gradient(120% 70% at 72% 6%,rgba(120,100,240,.14),transparent 55%),
    radial-gradient(90% 60% at 0% 100%,rgba(60,120,230,.10),transparent 55%),#f7f6f2}
}

/* =========================================================
   SUBPAGES — 全ページ・ライト化に必要な下層コンポーネントの上書き
   （phero / prose / form / table / works / faq / orbital ほか）
   ========================================================= */

/* prose / 本文リンク（淡ラベンダー #cdc4ff は白地で低コントラスト → accent） */
html[data-theme="light"] .prose-cz a,
html[data-theme="light"] .fcheck a{color:var(--accent)}

/* フォーム：select のドロップダウン背景を明色へ */
html[data-theme="light"] .frow select option{background:#ffffff;color:var(--ink)}

/* 比較テーブル見出し（#9a9ab6 直値 → muted） */
html[data-theme="light"] .ctable th{color:var(--muted)}

/* =========================================================
   ASSETS — radial orbital map（service-marketing）
   暗背景前提の直値（白ドット・暗カード・淡ラベンダーicon）を反転
   ========================================================= */
html[data-theme="light"] .orbital__dot{color:var(--accent)}
html[data-theme="light"] .orbital__node:hover .orbital__dot{color:var(--ink);border-color:var(--accent)}
html[data-theme="light"] .orbital__node.is-related .orbital__dot{
  background:rgba(91,70,230,.12);color:var(--accent);border-color:var(--accent)}
html[data-theme="light"] .orbital__node.is-active .orbital__dot{
  background:var(--accent);color:var(--bg);border-color:var(--accent);
  box-shadow:0 0 24px rgba(91,70,230,.35)}
html[data-theme="light"] .orbital__name.is-active,
html[data-theme="light"] .orbital__node.is-active .orbital__name{color:var(--ink)}
html[data-theme="light"] .orbital__card{
  background:rgba(255,255,255,.94);box-shadow:0 18px 50px rgba(40,40,80,.22)}
html[data-theme="light"] .orbital__card::before{background:rgba(18,18,40,.35)}
html[data-theme="light"] .orbital__rel button{color:var(--accent)}
html[data-theme="light"] .orbital__rel button:hover{
  background:rgba(18,18,40,.05);color:var(--ink);border-color:var(--accent)}
html[data-theme="light"] .orbital__hub b{color:#fff}/* ハブは紫グラデのまま＝白文字維持 */

/* =========================================================
   EDITORIAL DEVICES — ライト固有の上書き（2026-06-16）
   ---------------------------------------------------------
   ダーク反転セクション（.sec--ink）内の要素は、ライト層の他ルールと
   詳細度が拮抗する。data-theme="light" を冠したセレクタで確実に
   ダーク基調へ寄せる（ソース順＝cz-light が後＝勝つ）。
   ========================================================= */
/* CTA キーワード em：ライト深色グラデ（沈む）を、暗地用の明グラデへ上書き。
   詳細度を data-theme で揃えてソース順勝ち。デッキ rev29 のダーク面熱源。 */
html[data-theme="light"] .sec--ink .cta h2 em{
  background:none;
  background-image:linear-gradient(110deg,#9b7bff,#4d9bff)}
/* .sec--ink 内のアイブロウは明るい紫（暗地6.6:1）。ライト層 .lbl{color:accent} を上書き。 */
html[data-theme="light"] .sec--ink .lbl{color:#9b8cff}
/* CTA ソリッドボタン hover：ライト層 .btn--solid:hover は #ink背景になるが、
   暗地では白ボタンを維持（cz.css .sec--ink .btn--solid:hover が #fff指定済だが
   ライト層 html[data-theme=light] .btn--solid:hover の詳細度が勝つため再上書き）。 */
html[data-theme="light"] .sec--ink .btn--solid{
  background:#f4f2ec;border-color:#f4f2ec;color:#14141c}
html[data-theme="light"] .sec--ink .btn--solid:hover{
  background:#fff;border-color:#fff;color:#14141c}