/* 読みやすい白背景版（Lab・お知らせの記事のページ）
   <html class="theme-light"> のときだけ効く。切り替えは _inc/theme-head.php と js/theme-switch.js
   本文（.wrap の中）を大きな白い枠にし、ヘッダー・メニュー・フッター・左右の余白は今の暗いまま */

/* 本文の色 */
.theme-light .wrap {
  --bg:       #ffffff;
  --bg-card:  #f6f7f9;
  --ink:      #1a1d23;
  --ink-dim:  #5d6676;
  --ink-line: rgba(0,0,0,0.12);
  --accent:   #2563c9;
  color: var(--ink);
}
/* ヘッダー・メニュー・フッターは、元の暗い色に戻す */
.theme-light .site-header,
.theme-light .site-menu,
.theme-light .wrap > footer,
.theme-light .desk-view {   /* デスクツアーの 3D の画面（上に重なるボタンも含む）は暗いまま */
  --bg:       #0a1220;
  --bg-card:  rgba(255,255,255,0.04);
  --ink:      #e8edf5;
  --ink-dim:  #8ba0c0;
  --ink-line: rgba(255,255,255,0.15);
  --accent:   #a8d0ff;
}

/* 本文を大きな白い枠にする。左右と上下は今まで通りの暗い背景 */
.theme-light .wrap {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px 56px 0;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
/* フッターは枠の外に見えるように、枠の下の端を暗い色で覆う */
.theme-light .wrap > footer {
  margin: 96px -56px 0;
  padding: 56px 24px 0;
  background: #05080f;
  color: rgba(255,255,255,0.35);
}
/* 白い枠の下の角も丸く見せる（フッターの上の端に、角の外側だけ暗い色を描く） */
.theme-light .wrap > footer { position: relative; }
.theme-light .wrap > footer::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
  background:
    radial-gradient(circle at 100% 0, transparent 15.5px, #05080f 16px) left / 16px 16px no-repeat,
    radial-gradient(circle at 0 0, transparent 15.5px, #05080f 16px) right / 16px 16px no-repeat;
  pointer-events: none;
}
/* スマホでは、白い枠を画面の左右の端まで広げる（body の左右の余白 16px ぶんを外に出す。角丸と影はなし） */
@media (max-width: 640px) {
  .theme-light .wrap { width: auto; margin-left: -16px; margin-right: -16px; padding: 24px 20px 0; border-radius: 0; box-shadow: none; }   /* width は css/nav.css の 100% を外す（右に広がらないため） */
  .theme-light .wrap > footer { margin-left: -20px; margin-right: -20px; }
  .theme-light .wrap > footer::before { display: none; }
}

/* 見出し・本文 */
.theme-light .wrap .section-label { color: var(--accent); }
.theme-light .wrap .section-title,
.theme-light .wrap .prose h2,
.theme-light .wrap .prose h3,
.theme-light .wrap .prose strong,
.theme-light .wrap .prose ul.cards > li strong { color: #111; }
.theme-light .wrap .lead,
.theme-light .wrap .prose p,
.theme-light .wrap .prose li { color: #2b303a; }
.theme-light .wrap .prose a { color: var(--accent); }
.theme-light .wrap .crumbs,
.theme-light .wrap .crumbs a,
.theme-light .wrap .lab-date { color: var(--ink-dim); }
.theme-light .wrap .crumbs [aria-current],
.theme-light .wrap .crumbs span:last-child { color: var(--ink); }

/* 表 */
.theme-light .wrap .info th { color: var(--ink-dim); }
.theme-light .wrap .info td { color: #2b303a; }

/* 枠・カード */
.theme-light .wrap .prose ul.box { background: #f3f6fb; border-color: #d6e0ef; }
.theme-light .wrap .prose .why { background: #f3f6fb; }

/* コード */
.theme-light .wrap .prose code { background: #eef1f5; color: #1f2a3a; }
/* コードの欄は、白背景版でもエディターのような暗い背景に明るい文字のまま */
.theme-light .wrap .prose pre { background: #0d1117; border-color: #0d1117; }
.theme-light .wrap .prose pre code { background: none; color: #dbe6f5; }

/* 記事の下のカード・戻るボタン */
.theme-light .wrap .link-card { background: #f6f7f9; }
.theme-light .wrap .link-card:hover,
.theme-light .wrap .link-card:focus-visible { background: #eef3fb; }
.theme-light .wrap .link-card-title { color: #111; }
.theme-light .wrap .link-card-desc { color: var(--ink-dim); }
.theme-light .wrap .lab-tech-items span { color: var(--ink); }

/* 暗い背景用に白や明るい色を直に書いているところ（共通の CSS） */
.theme-light .wrap .prose blockquote,
.theme-light .wrap .steps strong,
.theme-light .wrap .md-safe-list strong,
.theme-light .wrap .prose ul.points li strong,
.theme-light .wrap .news-pager-title { color: #111; }
.theme-light .wrap .bot-demo-result { color: #2b303a; }
.theme-light .wrap .news-pager-link { background: #f6f7f9; }
.theme-light .wrap .news-pager-link:hover,
.theme-light .wrap .news-pager-link:focus-visible { background: #eef3fb; }
/* MD CMS の説明の絵の注記（黄・赤）は、白の上では濃い色に */
.theme-light .wrap .cms-mock-note.is-design { color: #8a6200; }
.theme-light .wrap .cms-mock-note.is-news { color: #c0392b; }
/* デスクツアーの金色の文字・リンクは、白の上では濃い金色に */
.theme-light .wrap .desk-safe h3,
.theme-light .wrap .desk-wishlink a,
.theme-light .wrap .desk-info a { color: #8a6200; }
.theme-light .wrap .desk-wishlink a { border-color: #c9a227; }
.theme-light .wrap .desk-wishlink a:hover,
.theme-light .wrap .desk-wishlink a:focus-visible { color: #fff; background: #8a6200; border-color: #8a6200; }

.theme-light .wrap .desk-list button:hover,
.theme-light .wrap .desk-list button:focus-visible,
.theme-light .wrap .desk-list button.is-current { color: #8a6200; border-color: #c9a227; background: #fdf6e3; }

/* 切り替えのボタン（js/theme-switch.js）。白背景版・サイトデザイン版のどちらでも出す */
.crumbs.has-theme-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.theme-switch {
  padding: 6px 14px;
  font: 11px 'JetBrains Mono', 'Noto Sans JP', monospace;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.theme-switch:hover,
.theme-switch:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }