/* oshidoki-tools-bridge.css — app.cssの旧変数を新トークンにマップ */

/* app.cssの:root変数を新トークンで上書き（重要：app.cssの後に読む） */
:root {
  --bg: var(--paper);
  --bg-2: var(--card);
  --panel: var(--card);
  --panel-2: var(--card2);
  --panel-3: var(--card2);
  --line: var(--line);
  --line-strong: var(--guard-line);
  --text: var(--ink);
  --heading: var(--ink);
  --muted: var(--ink3);
  --soft: var(--ink2);
  --ink-panel: var(--ink);
  --ink-panel-2: var(--guard-ink);
  --teal: var(--guard);
  --coral: var(--threat);
  --yellow: var(--sun);
}

/* bodyの背景を新トークンの方眼紙に統一 */
body {
  background:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 24px),
    var(--paper) !important;
  color: var(--ink) !important;
}

/* theme-2026-07のクラス変数を新トークンにマップ */
.theme-2026-07 {
  --t-paper: var(--paper);
  --t-card: var(--card);
  --t-ink: var(--ink);
  --t-ink2: var(--ink2);
  --t-line: var(--line);
  --t-accent: var(--guard);
  --t-accent-ink: var(--guard-ink);
  --t-accent-soft: var(--guard-soft);
  --t-coral: var(--threat);
  --t-coral-soft: var(--threat-soft);
}
.theme-2026-07 .t-u { background: linear-gradient(transparent 68%, rgba(27, 161, 137, 0.22) 68%); }

/* ガイド個別記事を白カードに（方眼紙の上に浮かせる） */
.guide-body {
  max-width: var(--measure, 720px) !important;
  margin: 24px auto !important;
  padding: 32px 24px 40px !important;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.guide-visual,
.guide-visual picture,
.guide-visual img {
  max-width: 100%;
}

.guide-visual {
  overflow: hidden;
}

.guide-visual picture,
.guide-visual img {
  display: block;
}

.guide-visual img {
  width: 100%;
  height: auto;
}