/* ⚠ このファイルは scripts/sync_from_skill.mjs が
 *   ~/.claude/skills/design-slides/assets/base.css から自動生成します。
 *   直接編集しないこと。デザインを変えるときはスキルの base.css を直し、
 *   `node scripts/sync_from_skill.mjs` を実行して追従させる。 */
/* ==========================================================
   design-slides 基盤CSS（1280×720 スライド用テンプレート）
   使い方: このファイルをプロジェクトに slides.css としてコピーし、
   下の【ブランドトークン】ブロックだけを DESIGN.md の値で置き換える。
   構造部分（レイアウト・図解パーツ・印刷設定）は原則いじらない。
   ========================================================== */

:root {
  /* ─── 【ブランドトークン】DESIGN.md の値で置き換える ─── */
  --ink: #111111;          /* 主要テキスト・黒ピル（DESIGN.mdのprimary/ink系） */
  --canvas: #ffffff;       /* スライド背景 */
  --cloud: #f5f5f5;        /* カード・スクショ台紙のグレー面 */
  --charcoal: #39393b;     /* 本文のやや柔らかい黒 */
  --mute: #707072;         /* 補足テキスト */
  --stone: #9e9ea0;        /* 最弱テキスト・ページ外背景 */
  --hairline: #cacacb;     /* 罫線 */
  --hairline-soft: #e5e5e5;/* フッター罫線 */
  --accent: #1151ff;       /* ★強調色（1色だけ選ぶ。DESIGN.mdのaccent/info系） */
  --accent-tint: #e9efff;  /* 強調色の淡色面（accentの10%程度の明るい色） */
  --sale: #d30005;         /* ★注意・警告色（DESIGN.mdのsale/error系） */
  --sale-tint: #fdeaea;    /* 注意色の淡色面 */
  --font: "Hiragino Sans", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius-pill: 30px;     /* キッカー・チップ・ピルCTAの角丸。ピル禁止ブランド（例:Notion）なら8〜12pxに。DESIGN.mdのrounded系とDo/Don'tを見て決める */
  --radius-round: 9999px;  /* 丸地アイコン(.icdot)・ステップ番号(.stepnum)。角丸長方形ボキャブラリーのブランドでは12px等に */
  /* ─── ここまで ─── */

  --sp-sm: 8px; --sp-md: 12px; --sp-lg: 18px; --sp-xl: 24px; --sp-xxl: 32px;
}

.deck, .deck * { margin: 0; padding: 0; box-sizing: border-box; }
.deck { font-family: var(--font); color: var(--ink); background: var(--stone); }
/* body余白を0に。書き出しHTML単体で開いたときの印刷溢れ・空白ページを防ぐ。
   （アプリ側の index.html も body{margin:0} 指定済みなので二重でも無害） */
body { margin: 0; }

/* ---------- スライドの器 ---------- */
.deck { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 0; }
.slide {
  width: 1280px; height: 720px; background: var(--canvas);
  position: relative; overflow: hidden; flex-shrink: 0;
  padding: 44px 60px 56px;
  display: flex; flex-direction: column;
  isolation: isolate; /* .wm の z-index:-1 をスライド内に閉じ込める */
}
.slide img { max-width: 100%; }
.slide--dark { background: var(--ink); color: var(--canvas); justify-content: center; }

/* ---------- タイポグラフィ（投影前提の特大サイズ。これ以上小さくしない）
   ※26px級は“配布資料の下限”。投影のデフォルトはこの特大値。文字が小さいは最頻の手戻り。 */
.t-display { font-size: 96px; font-weight: 800; line-height: 1.16; letter-spacing: 0.01em; }
.t-display-sm { font-size: 66px; font-weight: 800; line-height: 1.15; }
.t-h1 { font-size: 58px; font-weight: 800; line-height: 1.22; }
.t-h2 { font-size: 42px; font-weight: 800; line-height: 1.3; }
.t-body { font-size: 32px; font-weight: 500; line-height: 1.5; color: var(--charcoal); }
.t-strong { font-size: 38px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.t-caption { font-size: 27px; font-weight: 600; line-height: 1.45; color: var(--mute); }

/* 強調（差し色は accent と sale の2色のみ） */
.hl { color: var(--accent); font-weight: 800; }
.mark { background: var(--accent-tint); color: var(--ink); font-weight: 800; padding: 2px 10px; }
.caution { color: var(--sale); font-weight: 800; }

/* 下線強調（文字との間隔を必ず確保） */
.uline { display: inline-block; border-bottom: 12px solid var(--accent); padding-bottom: 16px; }

/* 黒スライドのサブテキストは大きく・明るく（グレー小文字は読めない） */
.slide--dark .t-body { color: #d6d6d8; font-size: 36px; }

/* 黒スライドの右余白を埋める飾りアイコン（本文の背面） */
.wm { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-size: 380px; color: #29292b; z-index: -1; }

/* ---------- アイコン ---------- */
.ic { width: 1em; height: 1em; stroke: currentColor; stroke-width: 2.2; fill: none;
      stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* 大きな主役アイコン（丸地・アバター内）はデュオトーン＝本体に薄い塗りを重ねて厚みを出す。
   細い線画がスカスカに見える“チープさ”を回避する。小さいキッカー/リストの線画は素のまま。 */
.icdot .ic, .avatar .ic { fill: currentColor; fill-opacity: .17; }
/* 丸地アイコン。カードの主役として大きく使う（--lg/--xl で「大アイコン＋短い語」） */
.icdot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100px; height: 100px; border-radius: var(--radius-round);
  background: var(--accent-tint); color: var(--accent); font-size: 52px; flex-shrink: 0;
}
.icdot--ink { background: var(--ink); color: var(--canvas); }
.icdot--red { background: var(--sale-tint); color: var(--sale); }
.icdot--sm { width: 72px; height: 72px; font-size: 36px; }
.icdot--lg { width: 148px; height: 148px; font-size: 76px; }
.icdot--xl { width: 188px; height: 188px; font-size: 96px; }

/* アイコン付きチップ（太字は26px以上＝「太い文字は大きく」） */
.chip {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cloud); border-radius: var(--radius-pill);
  padding: 12px 26px; font-size: 26px; font-weight: 700; color: var(--ink);
}
.chip .ic { color: var(--accent); font-size: 30px; }

/* ---------- 部品 ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  border: 2px solid var(--ink); border-radius: var(--radius-pill);
  padding: 10px 28px; font-size: 24px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--ink); width: fit-content; margin-bottom: var(--sp-lg);
}
.kicker .ic { color: var(--accent); font-size: 28px; }
.slide--dark .kicker { border-color: var(--canvas); color: var(--canvas); }
.kicker--accent { border-color: var(--accent); color: var(--accent); }
.kicker--red { border-color: var(--sale); color: var(--sale); }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--ink); color: var(--canvas);
  border-radius: var(--radius-pill); padding: 18px 38px;
  font-size: 31px; font-weight: 800; width: fit-content;
}
.pill--soft { background: var(--cloud); color: var(--ink); }
.pill--accent { background: var(--accent); color: var(--canvas); }

.stepnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--radius-round);
  background: var(--accent); color: var(--canvas);
  font-size: 34px; font-weight: 800; flex-shrink: 0;
}
.stepnum--sm { width: 44px; height: 44px; font-size: 22px; }

/* カード（座布団）。paddingは詰めて文字・アイコンを大きく＝中の余白を目立たせない */
.card { background: var(--cloud); padding: 22px 24px; display: flex; flex-direction: column; gap: var(--sp-sm); min-height: 0; }
.card--tint { background: var(--accent-tint); }
.card--red { background: var(--sale-tint); }
.card .t-strong { font-size: 40px; }
/* カード内リストは面いっぱいに広げる（余白対策） */
.card > .list { flex: 1; justify-content: space-evenly; }
.card .list li { font-size: 36px; }

/* 引用・ひとこと座布団。左端に色つき縦線（border-left accent）は付けない＝フラット。
   区別は背景色だけで行う（差し色2色ルール）。 */
.quote {
  background: var(--cloud); border-radius: 18px; padding: 30px 40px;
  display: flex; flex-direction: column; justify-content: center; min-height: 0;
}
.quote .t-body { color: var(--ink); font-weight: 700; font-size: 46px; line-height: 1.4; }
.quote .who { margin-top: 20px; font-size: 28px; font-weight: 700; color: var(--accent); }

/* スクショ台紙（角丸0・影なし） */
.shot { background: var(--cloud); display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; min-width: 0; }
.shot img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

.rule { border: 0; border-top: 1px solid var(--hairline); margin: var(--sp-lg) 0; }

/* リスト */
.list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-lg); }
.list li { display: flex; gap: 18px; align-items: center; font-size: 34px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.list li .ic { margin-top: 0; font-size: 34px; }
.list li.ok .ic { color: var(--accent); }
.list li.ng .ic { color: var(--sale); }
/* 丸地アイコン付きリスト（グラフィカル化。箇条書きも“座布団の主役”に） */
.list--dot li { gap: 22px; }
.list--dot li .lead {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 64px; height: 64px; border-radius: var(--radius-round);
  background: var(--accent-tint); color: var(--accent); font-size: 34px;
}
.list--dot li.ng .lead { background: var(--sale-tint); color: var(--sale); }

/* ---------- 図解パーツ ---------- */
/* 横フロー: box → 矢印 → box。min-height/width:0 は画像膨張バグ防止に必須 */
.flow { display: flex; align-items: center; gap: var(--sp-md); flex: 1; min-height: 0; min-width: 0; }
.flow-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-md); min-height: 0; min-width: 0; align-self: stretch; justify-content: center; }
.flow-arrow { color: var(--accent); font-size: 44px; flex-shrink: 0; display: flex; align-items: center; }

/* 図解ボックス（枠つき） */
.dbox {
  border: 3px solid var(--ink); padding: 20px 24px; min-height: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-md); text-align: center;
}
.dbox--accent { border-color: var(--accent); background: var(--accent-tint); }
.dbox--soft { border-color: var(--hairline); background: var(--cloud); }

/* フッター */
.slide-footer {
  position: absolute; left: 64px; right: 64px; bottom: 18px;
  display: flex; justify-content: space-between;
  font-size: 14px; font-weight: 600; color: var(--stone);
  border-top: 1px solid var(--hairline-soft); padding-top: 10px;
}
.slide--dark .slide-footer { color: var(--mute); border-top-color: var(--charcoal); }

/* 2カラム（左テキスト/右スクショ） */
.cols { display: flex; gap: var(--sp-xxl); flex: 1; min-height: 0; align-items: stretch; }
.col-text { flex: 5; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-xl); min-height: 0; min-width: 0; }
.col-shot { flex: 6; display: flex; min-height: 0; min-width: 0; }
.col-shot .shot { flex: 1; }

/* ---------- 印刷（PDF書き出し） ---------- */
@page { size: 1280px 720px; margin: 0; }
@media print {
  html, body { background: var(--canvas); }
  .deck { padding: 0; gap: 0; display: block; }
  .slide {
    page-break-after: always; break-after: page;
    /* 1スライド=1ページを厳守。内容が1px超過してもページ分割させない（余分な空白ページ防止） */
    page-break-inside: avoid; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* 最終スライドの改ページを消して末尾の空白ページを防ぐ */
  .slide:last-child { page-break-after: auto; break-after: auto; }
}