/* ============================================================
   deck-jsdmh.css — JSDMH WS 2026 ワークショップ専用レイヤ
   スライドの型は AMPL Studio 正本:
     slide.css + ampl-modern.css + github-extra.css
   本ファイルは WS 固有コンポーネントと投影向け微調整のみ。
   ============================================================ */

/* 投影・会場向け：本文を github-extra 既定より少し大きく */
.bigline { font-size: 2.4rem; line-height: 1.36; }
.small-copy { font-size: 1.28rem; line-height: 1.65; max-width: 920px; }
.kicker { font-size: 0.9rem; }
.lead-p { font-size: 1.2rem; line-height: 1.65; color: #3a4046; max-width: 1040px; }
.note-foot { font-size: 1.05rem; line-height: 1.5; color: #7a8288; }
.col-left { display: flex; flex-direction: column; gap: 14px; }
.col-left p { font-size: 1.2rem; line-height: 1.65; color: #3a4046; margin: 0; }
.col-left.lg p { font-size: 1.5rem; line-height: 1.62; } /* s10「特殊なスキル」右カラムを拡大 */

/* m3hero：大型見出し（会場投影） */
.m3hero .body .bigline.hero-md { font-size: 3.4rem !important; line-height: 1.22 !important; }
.m3hero .body .bigline.hero-lg { font-size: 4rem !important; line-height: 1.18 !important; }

/* 4ビート：温色ハイライト（ハンズオン区切り） */
.beat .bname { white-space: nowrap; } /* 「書き出す」の途中折れ防止 */
.beat.warm { background: var(--warm); border-color: var(--warm); }
.beat.warm .bname, .beat.warm .bnum { color: #fff; }
.beat.now { background: var(--teal); border-color: var(--teal); }
.beat.now .bname, .beat.now .bnum { color: #fff; }

/* 生成図版の配置（diagram-full の WS 別名） */
.figslide > .body { gap: 10px; width: 100%; max-width: none; }
.figslide h2 { font-size: 1.68rem; line-height: 1.26; margin: 0; }
.dgfig { max-width: 100%; width: 100%; margin: 0 auto; }
.dgfig img {
  display: block; width: 100%; max-width: 100%; height: auto;
  max-height: 480px; object-fit: contain; margin: 0 auto;
}
.dgfig .figcap {
  font-size: 1.02rem; line-height: 1.42; margin-top: 6px;
  color: #5a6066; text-align: center;
}
/* .dgfig.big：図を大きく見せたい図解スライド用（横フルブリードで拡大・高さは中央寄せに収まる範囲） */
.dgfig.big { width: calc(100% + 260px); max-width: none; margin-left: -130px; }
.dgfig.big img { max-height: 424px; }
.dgfig.shot img {
  max-height: 420px; border: 1px solid #d9dee1; border-radius: 12px;
  box-shadow: 0 18px 40px -28px rgba(15, 30, 40, 0.45); background: #fff;
}
.asset-wide img {
  display: block; width: 100%; max-height: 360px; object-fit: contain;
  border: 1px solid #d9dee1; border-radius: 12px;
  box-shadow: 0 18px 44px -34px rgba(15, 30, 40, 0.55); background: #f7f4ee;
}
.asset-wide.tight img { max-height: 265px; }
/* codeworld：「作る」とはコードを書くこと（となりのAI 発2 から移植） */
.codeworld{ display:grid; grid-template-columns:1fr auto auto; gap:20px; align-items:center; width:100%; }
.codeworld .cw-things{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.codeworld .cw-thing{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 6px; border:1px solid #d9dee1; border-radius:11px; background:#f8fafb; }
.codeworld .cw-thing svg{ width:24px; height:24px; color:#5f5f60; }
.codeworld .cw-thing span{ font-size:1.17rem; font-weight:700; color:#2a2a2a; line-height:1.28; }
.codeworld .cw-link{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.codeworld .cw-link .ar{ font-family:var(--font-mono); font-size:1.3rem; font-weight:800; color:#b8c0c5; }
.codeworld .cw-link .lb{ font-family:var(--font-mono); font-size:1.17rem; font-weight:700; color:#9aa3a8; letter-spacing:.04em; }
.codeworld .cw-core{ display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--teal); border-radius:16px; padding:18px 26px; color:#fff; }
.codeworld .cw-core .cw-code{ font-family:var(--font-mono); font-size:2.1rem; font-weight:800; line-height:1; }
.codeworld .cw-core .cw-label{ font-size:1.5rem; font-weight:900; white-space:nowrap; }

/* terminal / chatmock / safebar（となりのAI 発2 スライド10-11 から移植） */
.terminal{ background:#f6f8fa; border:1px solid #e2e8eb; border-radius:12px; overflow:hidden; box-shadow:0 12px 32px rgba(15,30,40,.08); width:100%; }
.terminal .tm-bar{ display:flex; gap:7px; padding:12px 14px; background:#eef1f3; border-bottom:1px solid #e2e8eb; }
.terminal .tm-bar span{ width:11px; height:11px; border-radius:50%; background:#cfd6da; }
.terminal .tm-body{ margin:0; padding:18px 20px; font-family:var(--font-mono); font-size:1.17rem; line-height:1.65; color:#3a4046; white-space:pre-wrap; }
.terminal .tm-body .dim{ color:#9aa3a8; }
.chatmock{ display:flex; flex-direction:column; gap:8px; width:100%; }
.chatmock .bub{ max-width:90%; padding:9px 14px; border-radius:14px; font-size:1.17rem; line-height:1.45; }
.chatmock .bub .who{ display:none; }
.chatmock .bub.me{ align-self:flex-end; background:var(--teal); color:#fff; border-bottom-right-radius:4px; }
.chatmock .bub.ai{ align-self:flex-start; background:#f4f6f7; border:1px solid #e2e8eb; color:#2a2a2a; border-bottom-left-radius:4px; }
/* 引用ボックス：細いグレー全周1px＋角丸のみ（色帯・濃い塗りなし） */
.safebar{ background:transparent; color:#2a2a2a; border:1px solid #e2e8eb; border-radius:12px; padding:14px 18px; display:flex; gap:16px; align-items:center; width:100%; }
.safebar .sb-label{ flex:0 0 auto; font-family:var(--font-mono); font-size:1.17rem; font-weight:800; letter-spacing:.06em; color:var(--teal); }
.safebar .sb-text{ font-size:1.17rem; line-height:1.55; color:#2a2a2a; }
.safebar .sb-text b{ color:#0b5f7d; }
.safebar.cite{ gap:16px; }
.safebar.cite .sb-face{ flex:0 0 auto; width:52px; height:52px; border-radius:50%; object-fit:cover; border:1px solid #d9dee1; }
.safebar.cite .sb-src{ font-family:var(--font-mono); font-size:0.92rem; color:#8a9299; margin-top:4px; display:block; }

/* quote-band：黒背景(#0f0f0f)を廃止し、safebar/スライド11と同じ明るい引用スタイルへ統一（濃い色NG・本人指示 2026-07-12） */
.quote-band{ background:transparent; border:1px solid #e2e8eb; color:#2a2a2a; }
.quote-band .label2{ color:var(--teal); }
.quote-band p{ color:#3a4046; }
.quote-band b{ color:#0b5f7d; }

/* Tipsマーク：Tipスライド右上に「TIPS」はんこ印（gpt-image-2生成・右角を埋める目立つ印） */
.tipmark{ position:absolute; top:14px; right:20px; z-index:8; pointer-events:none; }
.tipmark img{ display:block; width:138px; height:auto; transform:rotate(20deg); }

/* iface-evo：インターフェースの変遷（手で書く→打つ→触れる→話す） */
.iface-evo{ display:flex; align-items:stretch; justify-content:center; gap:10px; width:100%; margin-top:6px; }
.iface-evo .ie-stage{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:22px 12px; border:1px solid #d9dee1; border-radius:14px; background:#f8fafb; }
.iface-evo .ie-stage svg{ width:40px; height:40px; color:#5f5f60; }
.iface-evo .ie-era{ font-size:1.5rem; font-weight:900; color:#1a1a1a; line-height:1.2; }
.iface-evo .ie-when{ font-family:var(--font-mono); font-size:1.02rem; font-weight:700; color:#9aa3a8; letter-spacing:.03em; }
.iface-evo .ie-desc{ font-size:1.17rem; line-height:1.5; color:#5a6066; }
.iface-evo .ie-arrow{ align-self:center; font-family:var(--font-mono); font-size:1.6rem; color:#c4ccd0; font-weight:800; }
.iface-evo .ie-stage.now{ background:var(--teal); border-color:var(--teal); }
.iface-evo .ie-stage.now svg{ color:#fff; }
.iface-evo .ie-stage.now .ie-era{ color:#fff; }
.iface-evo .ie-stage.now .ie-when{ color:rgba(255,255,255,.82); }
.iface-evo .ie-stage.now .ie-desc{ color:rgba(255,255,255,.92); }

/* kquote：Karpathy引用（顔写真＋大きな引用） */
.kquote{ display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center; width:100%; margin-top:10px; }
.kq-person{ margin:0; text-align:center; width:230px; }
.kq-person img{ width:230px; height:290px; object-fit:cover; border-radius:16px; border:1px solid #d9dee1; box-shadow:0 18px 44px -30px rgba(15,30,40,.5); display:block; }
.kq-person figcaption{ margin-top:12px; }
.kq-name{ display:block; font-size:1.3rem; font-weight:900; color:#1a1a1a; }
.kq-role{ display:block; font-size:1.02rem; line-height:1.42; color:#7a8288; margin-top:4px; }
.kq-body blockquote{ margin:0; font-size:1.95rem; line-height:1.5; font-weight:700; color:#1a1a1a; }
.kq-body blockquote b{ color:var(--teal); }
.kq-ja{ font-size:1.2rem; line-height:1.6; color:#5a6066; margin:16px 0 0; }
.kq-meta{ display:flex; align-items:center; gap:14px; font-family:var(--font-mono); font-size:1.02rem; color:#9aa3a8; margin:18px 0 0; }
.kq-meta .kq-qr img{ width:52px; height:52px; display:block; }
.kq-credit{ font-size:0.82rem; color:#b0b7bc; margin:14px 0 0; }

/* statrow：数字3連（世界の実情・日米格差） */
.statrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; width:100%; }
.statcell{ border:1px solid #d9dee1; border-radius:13px; padding:18px 20px; background:#f8fafb; display:flex; flex-direction:column; gap:8px; }
.statcell .slabel{ font-family:var(--font-mono); font-size:0.82rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#9aa3a8; }
.statcell .snum{ font-size:3rem; font-weight:900; color:var(--teal); line-height:1; letter-spacing:-.01em; }
.statcell .snum .unit{ font-size:1.17rem; font-weight:800; margin-left:1px; }
.statcell.alt .snum{ color:#131313; }
.statcell .sdesc{ font-size:1.17rem; line-height:1.55; color:#444; }
.statcell .sdesc b{ color:#1a1a1a; }

/* cases：実例カード3連 */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100%; }
.case{ border:1px solid #d9dee1; border-radius:13px; padding:14px 16px; background:#fff; display:flex; flex-direction:column; gap:7px; }
.case > img{ width:100%; height:118px; object-fit:cover; border-radius:9px; display:block; }
.case .ctag{ font-family:var(--font-mono); font-size:1.02rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--teal); }
.case .ch{ font-size:1.4rem; font-weight:800; color:#1a1a1a; line-height:1.3; }
.case .cs{ font-size:1.12rem; line-height:1.5; color:#555; }
.case .cs b{ color:#1a1a1a; }
.case .cm{ margin-top:auto; font-family:var(--font-mono); font-size:1.02rem; font-weight:800; color:var(--teal); background:var(--teal-soft); border:1px solid var(--teal-line); border-radius:8px; padding:6px 9px; align-self:flex-start; }
/* 出典は"一応書いてある"程度に小さく。基底 .body p（詳細度が高い）に勝つため !important */
.src-foot{ font-size:0.72rem !important; color:#c3c9ce !important; font-family:var(--font-mono); letter-spacing:.02em; line-height:1.4 !important; }
/* impacts：桁違いの実績（大きな数字＋文脈・2×2） */
.impacts{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; width:100%; }
.impact{ display:flex; gap:18px; align-items:center; border:1px solid #d9dee1; border-radius:13px; padding:18px 22px; background:#f8fafb; }
.impact .inum{ font-size:2.7rem; font-weight:900; color:#131313; line-height:1; letter-spacing:-.01em; flex:0 0 auto; min-width:132px; }
.impact.hot .inum{ color:var(--teal); }
.impact .ibody{ display:flex; flex-direction:column; gap:5px; }
.impact .ilabel{ font-family:var(--font-mono); font-size:0.92rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#9aa3a8; }
.impact .idesc{ font-size:1.12rem; line-height:1.45; color:#444; }
.impact .idesc b{ color:#1a1a1a; }

/* cases 6枚（3×2・テキストのみ・実例集） */
.cases.six{ grid-template-columns:repeat(3,1fr); gap:12px; }
.cases.six .case{ padding:12px 15px; gap:5px; }
.cases.six .case .ctag{ font-size:0.92rem; }
.cases.six .case .ch{ font-size:1.22rem; line-height:1.3; }
.cases.six .case .cs{ font-size:1.02rem; line-height:1.45; color:#555; }
.cases.six .case .cm{ font-size:0.92rem; padding:4px 9px; }

/* 白背景の図解を余白・枠・影なしで幅いっぱいに埋め込む（レターボックス防止） */
.asset-bleed img {
  display: block; width: 100%; height: auto; max-height: 500px;
  object-fit: contain; border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.asset-side img {
  display: block; width: 100%; max-height: 430px; object-fit: contain;
  border: 1px solid #d9dee1; border-radius: 12px;
  box-shadow: 0 18px 44px -34px rgba(15, 30, 40, 0.55); background: #f7f4ee;
}
.asset-mini img {
  display: block; width: 100%; max-height: 145px; object-fit: contain;
  border: 1px solid #d9dee1; border-radius: 10px; background: #f7f4ee;
}

/* 2カラム＋図（github-extra .visual の WS 比率） */
.cols-2.figside {
  display: grid; grid-template-columns: 1.04fr 0.96fr;
  align-items: center; gap: var(--sp-lg); width: 100%;
}
.cols-2.figside.reverse { grid-template-columns: 0.96fr 1.04fr; }
.cols-2.figside.reverse > :last-child { order: -1; }

/* 定義スタック（vibe coding 説明） */
.def-stack { display: flex; flex-direction: column; gap: 18px; max-width: 980px; width: 100%; }
.def-stack .eyebrow {
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--teal);
}
.def-stack .def-main { font-size: 2.35rem; font-weight: 900; line-height: 1.35; color: #111; margin: 0; }
.def-stack .def-main b { color: var(--teal); }
.def-stack .def-sub { font-size: 1.25rem; line-height: 1.65; color: #3a4046; margin: 0; max-width: 920px; }
.def-stack .def-foot { font-size: 1.05rem; line-height: 1.55; color: #7a8288; margin: 0; }

/* 証拠ツイートカード */
.tweets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.tweet {
  border: 1px solid #d9dee1; border-radius: 14px; padding: 18px 20px;
  background: #fff; display: flex; flex-direction: column; gap: 10px;
}
.tweet .thead { display: flex; align-items: center; gap: 12px; }
.tweet .tav {
  width: 40px; height: 40px; border-radius: 50%; background: var(--teal-soft);
  border: 1px solid var(--teal-line); display: flex; align-items: center;
  justify-content: center; font-family: var(--font-mono); font-weight: 800;
  color: var(--teal); font-size: 1rem; flex: 0 0 auto;
}
.tweet .tname { font-weight: 800; color: #1a1a1a; font-size: 0.95rem; line-height: 1.25; }
.tweet .thandle { font-family: var(--font-mono); font-size: 0.7rem; color: #9aa3a8; }
.tweet .tmark { margin-left: auto; font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; color: #1a1a1a; }
.tweet .ttext { font-size: 0.98rem; line-height: 1.65; color: #15171a; margin: 0; }
.tweet .ttext b { color: var(--teal); font-weight: 800; }
.tweet .tgloss { font-size: 0.78rem; line-height: 1.55; color: #7a8288; margin: 0; }
.tweet .tfoot {
  display: flex; align-items: flex-end; gap: 12px; margin-top: auto;
  padding-top: 10px; border-top: 1px solid #eef1f3;
}
.tweet .tdate { font-family: var(--font-mono); font-size: 0.68rem; color: #9aa3a8; }
.tweet .tqr { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tweet .tqr img { width: 52px; height: 52px; display: block; }
.tweet .tqr .qlabel {
  font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700;
  color: var(--teal); line-height: 1.3; text-align: right;
}
.tweetshot {
  max-width: 720px; width: 100%; margin: 0 auto; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); border: 1px solid #e2e8eb;
  background: #fff; display: block;
}
.story-shot { width: 100%; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.13); }

/* 時代論タイムライン */
.era { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.era .estep {
  flex: 1; border: 1px solid #d9dee1; border-radius: 12px; padding: 16px 12px;
  background: #f8fafb; display: flex; flex-direction: column; gap: 6px;
  text-align: center; min-height: 140px; justify-content: center;
}
.era .estep.now { background: var(--teal); border-color: var(--teal); }
.era .estep .ey { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 800; color: #9aa3a8; letter-spacing: 0.04em; }
.era .estep.now .ey { color: rgba(255, 255, 255, 0.75); }
.era .estep .eh { font-size: 1.15rem; font-weight: 900; color: #1a1a1a; line-height: 1.3; }
.era .estep.now .eh { color: #fff; }
.era .estep .es { font-size: 0.85rem; line-height: 1.4; color: #5f5f60; }
.era .estep.now .es { color: rgba(255, 255, 255, 0.88); }
.era .earr { display: flex; align-items: center; color: #c4ccd0; font-size: 1.1rem; font-weight: 800; }

/* 番号リスト・進行ラダー */
.nlist { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1000px; }
.nrow { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: baseline; }
.nrow .n { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 900; color: var(--teal); }
.nrow .t { font-size: 1.55rem; font-weight: 800; line-height: 1.35; color: #131313; }
.nrow .t small { display: block; margin-top: 4px; font-size: 1.1rem; font-weight: 600; color: #5f5f60; }
.lv { display: flex; flex-direction: column; width: 100%; max-width: 980px; }
.lvr {
  display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid #e6e9ec;
}
.lvr .lc { font-family: var(--font-mono); font-weight: 900; font-size: 1.2rem; color: #9a9a9c; }
.lvr.here .lc { color: var(--teal); }
.lvr .lt { font-size: 1.45rem; font-weight: 900; color: #131313; }
.lvr .lt small { display: inline; margin-left: 10px; font-size: 1.05rem; font-weight: 600; color: #5f5f60; }

/* QR・お題カード・安全帯（会場向けサイズ） */
.qrbox { display: flex; align-items: center; gap: 28px; width: 100%; max-width: 980px; }
.qrbox img {
  width: 200px; height: 200px; background: #fff; border: 1px solid #d9dee1;
  border-radius: 12px; padding: 10px;
}
.qrbox .qmeta { display: flex; flex-direction: column; gap: 10px; }
.qrbox .qurl { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--teal); word-break: break-all; }
.odai { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.odai .card {
  border: 1px solid #d9dee1; border-radius: 12px; padding: 12px;
  background: #fff; display: grid; grid-template-columns: 132px 1fr;
  gap: 14px; align-items: center; min-height: 154px;
}
.odai .card.d { border-color: var(--teal); background: var(--teal-soft); }
.odai .tag { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 800; color: var(--teal); letter-spacing: 0.06em; }
.odai .thumb img {
  width: 132px; aspect-ratio: 16/9; object-fit: cover; display: block;
  border: 1px solid #d9dee1; border-radius: 9px; background: #f7f4ee;
}
.odai .copy { min-width: 0; }
.odai .copy h3 { font-size: 1.2rem; font-weight: 900; margin: 6px 0 4px; color: #131313; }
.odai .copy p { font-size: 0.98rem; line-height: 1.45; color: #555; margin: 0; }
.safebar { padding: 18px 24px; }
.safebar .sb-label { font-size: 0.88rem; color: var(--teal); }
.safebar .sb-text { font-size: 1.2rem; line-height: 1.55; }

/* 補助 */
.ph-note { opacity: 0.55; font-style: italic; color: #7a8288; }
.board-note { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; color: #9aa3a8; }
.cite-foot { font-family: var(--font-mono); font-size: 0.78rem; color: #9aa3a8; letter-spacing: 0.02em; }
.stack-vis { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 1040px; }
.stack-vis .vis-wide img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 12px; }
.foot-credit { position: absolute; left: 64px; bottom: 28px; font-size: 0.78rem; color: #9a9a9c; }
.slide-content .body p.timer-big {
  font-size: 5.2rem; font-weight: 900; color: var(--teal);
  letter-spacing: -0.02em; line-height: 1.1; margin: 8px 0;
}
/* タイトル位置を全スライドで固定：コンテンツ系は上端(ヘッダー直下)から並べる。
   これで(1)本文が中央寄せで上にはみ出しヘッダーに被る事故を防ぎ、(2)めくってもタイトルが同じ高さに揃い視線移動が減る（2026-07-13）。
   写真ヒーロー(.photo)・図版1枚もの(.figslide)は従来どおり中央寄せのまま除外。 */
.slide-content.has-headbar:not(.photo):not(.figslide) { justify-content: flex-start; }
.slide-content.has-headbar > .body { flex: 0 1 auto; justify-content: center; gap: var(--sp-md); }

@media print {
  .bigline, .m3hero .body .bigline { font-weight: 900 !important; }
}