/* ライトテーマ（2026-11-08 Fable ラリー1）
   html[data-theme="light"] のときだけ効く。dark は styles.css のまま。切替は ?theme=light / ?theme=dark（app.js）。
   方針: 白〜薄いグレー地、深い緑をアクセントにし、場面3の白い業務画面（#f3f6f4 / #216b45）と同じ系統に揃える。
   人物写真2枚はライト版専用の透過PNGを使い、ページ背景になじませる。
   ロゴ（fde-logo.png）は黒い図形なので invert を外す。
   本文・注記の文字色は背景に対して 4.5:1 以上を目標にした手計算値（実測ではない）。装飾の .worry-cloud（aria-hidden）は対象外。
   帰属・注記の 12px 化、「休」セル、凡例の修正はラリー2で styles.css（両テーマ共通）へ移し、ここでは色だけ上書きする。 */

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8f7;
  --bg-2: #f0f3f1;
  --bg-3: #e9eeeb;
  --panel: #ffffff;
  --panel-2: #e8eeea;
  --line: #d7dfda;
  --line-2: #c3cec7;
  --text: #16211b;
  --muted: #4e5e55;
  --muted-2: #5f6e65;
  --accent: #1f6b47;
  --accent-ink: #0e2a1c;
  --accent-deep: #164d31;
  --photo-card: transparent;
  --you-bubble: #d4ebdd;
  --you-ink: #14281d;
}

/* ===== 共通：場面移動ボタン、写真カードのゴースト ===== */
html[data-theme="light"] .story-nav button { background: rgba(255, 255, 255, 0.92); border-color: var(--line-2); color: var(--text); box-shadow: 0 2px 8px rgba(22, 33, 27, 0.12); }
html[data-theme="light"] .story-morph { background: var(--photo-card); }

/* ===== 表紙 ===== */
html[data-theme="light"] .scene-cover { background: var(--bg); color: var(--text); }
html[data-theme="light"] .scene-cover .cover-welcome { color: var(--muted-2); }
html[data-theme="light"] .cover-intro { color: var(--muted); }
html[data-theme="light"] .scene-cover .cover-start { color: var(--muted); }
html[data-theme="light"] .scene-cover .cover-start:hover { color: var(--accent); }
html[data-theme="light"] .scene-cover .cover-start > span { color: var(--accent); }

/* ===== 場面1：悩みと人物（写真カード） ===== */
html[data-theme="light"] .brand-logo { filter: none; opacity: 1; }
html[data-theme="light"] .worry-cloud span { color: var(--text); }
html[data-theme="light"].story-mode .hero-figure { bottom: 0; }
html[data-theme="light"].story-mode .scene-hero .hero-img { mask-image: none; -webkit-mask-image: none; border-radius: 18px 18px 0 0; background: var(--photo-card); }

/* ===== 場面2・納品：会話 ===== */
html[data-theme="light"].story-mode .chatui-top { background: var(--bg-2); }
html[data-theme="light"] .chat-topic { color: var(--muted); }
html[data-theme="light"] .avatar-co { background: #ffffff; box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="light"] .bubble-fde p { background: var(--panel-2); color: var(--text); }
html[data-theme="light"] .bubble-you p { background: var(--you-bubble); color: var(--you-ink); }
html[data-theme="light"].story-mode main > .scene-delivery { background: var(--bg-2); }
html[data-theme="light"] .delivery-date { color: var(--muted-2); }
html[data-theme="light"] .delivery-message { background: var(--panel-2); }
html[data-theme="light"] #delivery-additions .delivery-message > p { color: var(--text); }
html[data-theme="light"] .delivered-app { background: #ffffff; color: var(--you-ink); border: 1px solid #b9d5c4; }
html[data-theme="light"] .delivered-app b { border-top-color: var(--line); color: var(--accent); }

/* ===== 場面2.5：つくるのは、この3つ ===== */
html[data-theme="light"].story-mode main > .scene-spec { background: var(--bg-2); }
html[data-theme="light"] .spec-lead { color: var(--muted); }
html[data-theme="light"] .spec-list li { border-bottom-color: var(--line-2); }
html[data-theme="light"] .spec-list span { color: var(--accent); }
html[data-theme="light"] .spec-list p { color: var(--muted); }
html[data-theme="light"] .spec-next { background: #216b45; color: #ffffff; box-shadow: 0 4px 0 #164d31; }
html[data-theme="light"] .spec-next:active { transform: translateY(2px); box-shadow: 0 2px 0 #164d31; }

/* 要件カードのゴースト：出発色は場面2.5の行、到着色は業務画面のカード（app.js が computed style を読む） */
html[data-theme="light"] .requirement-flight.morph-card { background: var(--bg-2); border-color: var(--line-2); color: var(--accent); }
html[data-theme="light"] .morph-source p { color: var(--muted); }

/* ===== 場面3：業務画面（元から白。場面の外枠だけ暗かったので合わせる） ===== */
html[data-theme="light"].story-mode main > .scene-app { background: #f3f6f4; }
html[data-theme="light"] .scene-app .grid .c-off { background: #e3e8e5; color: #4f6156; }
/* 凡例のセルは .grid の外にあり、ベースの .c-day/.c-night/.c-off（dark用）が効いてしまう。表本体と同じ色に揃える */
html[data-theme="light"] .app-legend .c-day { background: #dceddf; color: #235839; }
html[data-theme="light"] .app-legend .c-night { background: #435b7d; color: #ffffff; }
html[data-theme="light"] .app-legend .c-off { background: #e3e8e5; color: #4f6156; }
html[data-theme="light"] .planner-note { font-size: 12px; color: var(--muted-2); }

/* ===== 解決：笑顔（写真カード） ===== */
html[data-theme="light"].story-mode main > .scene-resolution { background: var(--bg); }
html[data-theme="light"] .resolution-image {
  top: auto; bottom: 0; left: 0; right: 0; margin: 0 auto;
  width: min(100%, calc(58vh * 941 / 1054));
  width: min(100%, calc(58dvh * 941 / 1054));
  height: auto; aspect-ratio: 941 / 1054;
  object-fit: cover; object-position: center bottom;
  border-radius: 18px 18px 0 0; background: var(--photo-card);
}
html[data-theme="light"] .resolution-sub { color: var(--muted); }
html[data-theme="light"] .resolution-note { color: var(--muted); background: rgba(246, 248, 247, 0.88); padding: 2px 10px; border-radius: 999px; font-size: 11px; }

/* ===== 会社紹介・原点・進め方・メンバー ===== */
html[data-theme="light"].story-mode main > .company-story { background: var(--bg-2); }
html[data-theme="light"].story-mode main > .company-overview { background: var(--bg); }
html[data-theme="light"].story-mode main > .story-values { background: var(--bg-2); }
html[data-theme="light"] .overview-lead { color: var(--text); }
html[data-theme="light"] .fde-approach { color: var(--muted); }
html[data-theme="light"] .fde-services,
html[data-theme="light"] .fde-fullname { color: var(--muted-2); }
html[data-theme="light"] .experience-lines { border-left-color: var(--accent); }
html[data-theme="light"] .experience-lines p { color: var(--text); }
html[data-theme="light"] .story-prose,
html[data-theme="light"] .value-story p,
html[data-theme="light"] .person-story > p { color: var(--muted); }
html[data-theme="light"] .story-source { color: var(--muted-2); font-size: 12px; }
html[data-theme="light"] .story-bridge { color: var(--accent); }
html[data-theme="light"] .value-story h3 { color: var(--text); }
html[data-theme="light"] .value-story article,
html[data-theme="light"] .person-story { border-color: var(--line-2); }
html[data-theme="light"] .person-heading p { color: var(--muted-2); }
html[data-theme="light"] .person-story .person-link { color: var(--accent-deep); }

/* ===== 担当事例 01〜03（事例ごとの色味は深い色で残す） ===== */
html[data-theme="light"] .project-crm { background: var(--bg); }
html[data-theme="light"] .project-crm .scene-label { color: #2b5f86; }
html[data-theme="light"] .project-facility { background: var(--bg-2); }
html[data-theme="light"] .project-stock { background: var(--bg); }
html[data-theme="light"] .project-stock .scene-label { color: #8a5a2b; }
html[data-theme="light"] .project-copy > p:last-child,
html[data-theme="light"] .project-stock .project-copy > p:last-child { color: var(--muted); }
html[data-theme="light"] .case-facts > div { border-top-color: var(--line-2); }
html[data-theme="light"] .case-facts dt { color: var(--accent); }
html[data-theme="light"] .case-facts dd { color: var(--text); }
html[data-theme="light"] .case-facts .case-role { border-left-color: var(--accent); }
html[data-theme="light"] .crm-view-tabs { border-bottom-color: var(--line-2); }
html[data-theme="light"] .crm-view-tabs button { color: var(--muted); }
html[data-theme="light"] .crm-view-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
html[data-theme="light"] .crm-view-tabs button:focus-visible { outline-color: var(--accent); }
html[data-theme="light"] #crm-screen-image,
html[data-theme="light"] #facility-screen-image,
html[data-theme="light"] #apparel-screen-image { border-color: var(--line-2); box-shadow: 0 10px 30px rgba(22, 33, 27, 0.08); }
html[data-theme="light"] #crm-screen-title,
html[data-theme="light"] #facility-screen-title,
html[data-theme="light"] #apparel-screen-title { color: var(--text); }
html[data-theme="light"] #crm-screen-description,
html[data-theme="light"] #facility-screen-description,
html[data-theme="light"] #apparel-screen-description { color: var(--muted); }
html[data-theme="light"] #crm-screen figcaption span,
html[data-theme="light"] #facility-screen figcaption span,
html[data-theme="light"] #apparel-screen figcaption span { color: var(--muted-2); font-size: 12px; }
html[data-theme="light"] .crm-prototype-link { color: var(--accent); }
/* 個人・他社での担当経験という帰属文。最小文字だったので 12px に上げ、本文と同じ濃さにする */
html[data-theme="light"] .project-credit { color: var(--muted); font-size: 12px; }

/* ===== 対応可能範囲 ===== */
html[data-theme="light"] .scene-scope { background: var(--bg-2); }
html[data-theme="light"] .scope-list li { border-bottom-color: var(--line-2); }
html[data-theme="light"] .scope-list h3 { color: var(--accent); }
html[data-theme="light"] .scope-list p,
html[data-theme="light"] .scope-note { color: var(--muted); }

/* ===== 最後：悩みを入れる・相談の会話 ===== */
html[data-theme="light"] .scene-ask .inquiry-greeting { background: var(--panel-2); color: var(--text); }
html[data-theme="light"] .inquiry-dialog { background: transparent; color: var(--text); }
html[data-theme="light"] .inquiry-inner p { color: var(--muted); }
html[data-theme="light"] .inquiry-thread #inquiry-summary { background: var(--you-bubble); color: var(--you-ink); }
html[data-theme="light"] .inquiry-thread .fde-ack { background: var(--panel-2); color: var(--text); }
html[data-theme="light"] .inquiry-thread #inquiry-receipt { color: var(--muted-2); font-size: 12px; }
html[data-theme="light"] .fde-question span { background: var(--panel-2); color: var(--text); }
html[data-theme="light"] .inquiry-thread .contact-answer { background: var(--you-bubble); color: var(--you-ink); }
html[data-theme="light"] #contact-form input { background: #ffffff; border-color: var(--line-2); color: var(--text); }
html[data-theme="light"] #contact-form input::placeholder { color: var(--muted-2); }
html[data-theme="light"] .contact-submit { background: var(--accent); color: #ffffff; }
html[data-theme="light"] .contact-skip { color: var(--accent); border-color: var(--line-2); }
html[data-theme="light"] .is-contact-chat .inquiry-chat-header { background: var(--bg); border-bottom-color: var(--line); }
html[data-theme="light"] .chat-reply-bar { background: var(--bg); }
html[data-theme="light"] .inquiry-thread .contact-privacy { color: var(--muted-2); }

/* ===== PC ===== */
@media (min-width: 1000px) {
  html[data-theme="light"] .resolution-image {
    left: auto; right: 8vw; margin: 0;
    width: min(44vw, calc(78vh * 941 / 1054));
    width: min(44vw, calc(78dvh * 941 / 1054));
  }
}

html[data-theme="light"] .avatar-person { background: #e8eeea; }