/* 照沼健太の基本トーン 共通スタイル（2026-10-04 照沼決定「白と黒だけで進めて」）
   白と黒は文章から始まる。黒い点1つから中身が広がる。色がつくのは写真とてけの絵だけ。
   説明書= 09_assets/design-kit/kenta/README.md ／ 値の出どころ= scripts/x_article_motion/example-20261004-personal-mono/ESheets.tsx
   ページごとの <style> では色を直接書かず、ここの var(--ink) などを使う（build.py が検査する） */

:root{
  --ink:#0B0B0C; --paper:#FFFFFF;
  --sub:#55565A;   /* 説明の灰。文字に使える */
  --mute:#9A9BA0;  /* 外したものの字。小さい字には使わない */
  --edge:#B9BABF;  /* 外したものの枠 */
  --rule:#C9CACF;  /* 細い線・進み具合の線の地 */
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --latin:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans",sans-serif;
  --m:clamp(20px,6.667vw,72px); /* 左右の余白＝幅の15分の1 */
  /* 箱の角の丸み（2026-10-04 照沼健太「Cで行こう」）。数字はここと values.json の shape だけ。角なしへ戻すときは全部 0 にする */
  --r0:3px; --r1:6px; --r2:9px; --r3:14px;   /* 凡例の四角／札・数字の札／ボタン・コピー欄・顔写真／枠・写真・黒い台 */
  --sr1:16; --sr2:24; --sr3:32;              /* スライド（幅1920のときの px）: 顔写真・てけの札／箱／写真・黒い札 */
  color-scheme:light;
}
/* Apple と同じなめらかな角（直線から少しずつ曲がる形）が使える画面では、それで描く。同じくらいの丸みに見える数字へ替える */
@supports (corner-shape:squircle){
  :root{--r0:5px; --r1:10px; --r2:16px; --r3:24px; --sr1:28; --sr2:40; --sr3:54}
}

/* 黒い面（.dark）。基本は白で、黒い面は例外（2026-10-04 照沼健太「基本は白でいい」）。
   使ってよいのは 外に出すスライド／写真・画像が黒い地の方が映えるところ／アクセントとして例外的に。
   その箱の中だけ6つの値が入れ替わるので、中の部品はそのまま使える。端末の暗い設定には合わせない（ページの地は白のまま）。
   .stage は読む資料・図解の中に置く黒い台（写真・画像をのせる箱の余白）。
   てけの絵は黒い服なので、黒い面では白い札の上に置く */
.dark{
  --ink:#FFFFFF; --paper:#0B0B0C;
  --sub:#B9BABF; --mute:#77787D; --edge:#55565A; --rule:#3A3B3F;
  background:var(--paper);color:var(--ink);color-scheme:dark;
}
.dark.stage{padding:clamp(20px,4.4vw,48px);margin:28px 0}
.dark.stage>:first-child{margin-top:0}
.dark.stage>:last-child{margin-bottom:0}
.dark img.teke,.dark .quote img:not(.face){background:var(--ink);padding:8px 10px;object-fit:contain}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.9;font-weight:400;-webkit-font-smoothing:antialiased;accent-color:var(--ink)}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:4px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
main{max-width:1080px;margin:0 auto;padding:0 var(--m) 96px}
figure{margin:0}

/* 柱（題・名前・区切りの線）。ページの上に固定 */
.pillar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);max-width:1080px;margin:0 auto;padding:24px var(--m) 16px}
.pillar .row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;font-weight:700;line-height:1}
.pillar .ttl{font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pillar .name{font-size:18px;white-space:nowrap}
.segs{display:flex;gap:6px;margin-top:14px}
.segs a{flex:1;height:4px;background:var(--rule);position:relative;display:block}
.segs a i{position:absolute;inset:0;background:var(--ink);transform-origin:left center;transform:scaleX(0)}

section{padding-top:72px;scroll-margin-top:60px}
main>section:first-child{padding-top:48px}

/* 見出しの組み（小さい行・大きい行・下線） */
.head{font-weight:800;letter-spacing:-.01em;font-feature-settings:"palt" 1;margin:0 0 40px}
.head small{display:block;font-size:clamp(18px,2.6vw,26px);font-weight:800;line-height:1.3;margin-bottom:12px}
.head b{display:inline-block;font-size:clamp(30px,5.4vw,56px);line-height:1.15;font-weight:800;padding-bottom:.3em;border-bottom:.1em solid var(--ink);word-break:auto-phrase;text-wrap:balance}
h3{font-size:22px;font-weight:800;line-height:1.4;letter-spacing:-.01em;font-feature-settings:"palt" 1;margin:56px 0 16px}
section>h3:first-child,.cols h3{margin-top:0}

/* 文。長い文は 17・W4・行間1.9、短い説明は W6 */
p{margin:0 0 1em;max-width:40em}
.lead{font-size:clamp(19px,2.4vw,24px);font-weight:700;line-height:1.7;max-width:34em}
.explain{font-weight:600}
.note{font-size:14px;font-weight:600;color:var(--sub);line-height:1.7}
ul.dot{list-style:none;padding:0;margin:0 0 1em;max-width:42em}
ul.dot li{position:relative;padding-left:1.4em;margin-bottom:.5em}
ul.dot li::before{content:"";position:absolute;left:.15em;top:.72em;width:.55em;height:.55em;border-radius:50%;background:var(--ink)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px 48px}
.cols>*{min-width:0}

/* 状態の札。黒く塗る＝決まった・済んだ／線だけ＝まだ／灰＝外した。
   頭に黒い点（.you）＝照沼健太の番（確認待ち）。点はペン先＝次にここが動く。
   点線の枠（.wip）＝作業の途中（直しています）。点がまだ線になっていない。
   頭に黒い四角の記号（.warn は !、.no は ×）＝注意・できない（2026-10-04 照沼健太「案Aで進めて」） */
.tag{display:inline-block;font-size:13px;font-weight:800;line-height:1;padding:6px 10px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);white-space:nowrap;vertical-align:middle}
.tag.on{background:var(--ink);color:var(--paper)}
.tag.off{border-color:var(--edge);color:var(--sub)}
.tag.you::before{content:"";display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--ink);margin-right:.5em;vertical-align:.04em}
.tag.wip{border-style:dashed}
.tag.warn,.tag.no{display:inline-flex;align-items:center;gap:9px;padding:0 10px 0 0}
.tag.warn::before,.tag.no::before{content:"!";align-self:stretch;display:flex;align-items:center;background:var(--ink);color:var(--paper);font-family:var(--latin);font-weight:700;line-height:1;padding:6px 8px}
.tag.no::before{content:"×"}
.tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* 数字の札 */
.num{display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;flex:none;background:var(--ink);color:var(--paper);font-family:var(--latin);font-weight:700;font-size:17px;line-height:1}

/* ボタン。黒く塗る＝いちばん押してほしい1つ／選ばれている */
.btn{font:inherit;font-size:15px;font-weight:800;line-height:1;padding:14px 20px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
.btn.pri,.btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.btn.sm{padding:8px 12px;border-width:2px;font-size:13px}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* 発言の段（線・てけ・言葉） */
.quote{border-top:4px solid var(--ink);padding-top:22px;display:flex;align-items:center;gap:20px;margin-top:64px}
.quote img{height:100px;width:auto;flex:none}
.quote img.face{width:80px;height:80px;object-fit:cover}
.quote .say{font-size:clamp(19px,2.8vw,28px);font-weight:800;line-height:1.5;letter-spacing:-.01em;font-feature-settings:"palt" 1;word-break:auto-phrase}
.quote .who{margin-left:auto;font-size:14px;font-weight:600;color:var(--sub);white-space:nowrap}

/* 決めてほしいこと */
.ask{border:5px solid var(--ink);padding:22px 26px 24px;margin:40px 0 0}
.ask .lbl{font-size:14px;font-weight:800;line-height:1;margin-bottom:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ask .q{font-size:clamp(19px,2.6vw,26px);font-weight:800;line-height:1.5;letter-spacing:-.01em;font-feature-settings:"palt" 1;margin:0;max-width:none;word-break:auto-phrase}
.ask .btns{margin-top:18px}

/* 写真（四角・色はそのまま・説明は灰） */
.photo img{width:100%;aspect-ratio:1;object-fit:cover}
.cap{font-size:13px;font-weight:600;color:var(--sub);line-height:1.5;margin-top:12px}

/* 表 */
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.7}
thead th{border-top:4px solid var(--ink);border-bottom:2px solid var(--ink);font-weight:800;text-align:left;padding:12px 16px 12px 0;white-space:nowrap}
td{border-bottom:1px solid var(--rule);padding:14px 16px 14px 0;vertical-align:top}
td:first-child{font-weight:800}
td.r,th.r{text-align:right;font-family:var(--latin);font-weight:700;font-variant-numeric:tabular-nums}

/* 大きい数字 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px 40px;border-top:4px solid var(--ink);padding-top:22px}
.stat b{display:block;font-family:var(--latin);font-weight:700;font-size:clamp(56px,9vw,96px);line-height:.95;letter-spacing:-.03em}
.stat b small{font-family:var(--sans);font-size:.3em;font-weight:800;letter-spacing:0;margin-left:.15em}
.stat span{display:block;font-size:14px;font-weight:600;color:var(--sub);line-height:1.6;margin-top:10px}

/* 棒グラフ（黒＝言いたいもの、斜線＝比べる相手） */
.bars{border-top:4px solid var(--ink);padding-top:18px}
.bar{display:grid;grid-template-columns:9.5em 1fr;gap:14px;align-items:center;margin-bottom:12px;font-size:14px;font-weight:700;line-height:1.3}
.bar .track{position:relative;height:34px}
.bar .fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.bar .fill.ref{background:repeating-linear-gradient(135deg,var(--ink) 0 2px,transparent 2px 7px);border:2px solid var(--ink)}
.bar .v{position:absolute;top:0;line-height:34px;padding:0 6px 0 10px;font-family:var(--latin);font-weight:700;font-size:16px}

/* 流れ（点と線でつなぐ）。段の数は style="--n:3" で変える */
ol.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),1fr);border-top:4px solid var(--ink)}
ol.flow li{position:relative;padding:26px 24px 0 0}
ol.flow li::before{content:"";position:absolute;left:0;top:-11px;width:18px;height:18px;border-radius:50%;background:var(--ink)}
ol.flow b{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;line-height:1.4;letter-spacing:-.01em;font-feature-settings:"palt" 1}
ol.flow span.d{display:block;font-size:14px;font-weight:600;color:var(--sub);line-height:1.7;margin-top:8px}

/* 要点（数字の札・太い1行・灰の説明） */
ol.pts{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px}
ol.pts li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
ol.pts b{font-size:18px;font-weight:800;line-height:1.5;letter-spacing:-.01em;font-feature-settings:"palt" 1}
ol.pts span.d{grid-column:2;font-size:15px;font-weight:600;color:var(--sub);line-height:1.7}

/* 入口の一覧（1行ずつ押せる） */
.list{border-top:4px solid var(--ink);margin-top:44px}
.list a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.list .num{font-size:22px;grid-row:1 / span 2}
.list b{font-size:clamp(22px,3.4vw,32px);font-weight:800;line-height:1.3;letter-spacing:-.01em;font-feature-settings:"palt" 1}
.list .d{grid-column:2;font-size:15px;font-weight:600;color:var(--sub);line-height:1.7}
.list .go{grid-row:1 / span 2;grid-column:3;font-family:var(--latin);font-weight:700;font-size:32px;line-height:1}
.list a:hover b{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}

/* 凡例（塗り方の説明） */
.legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;font-size:14px;font-weight:600;color:var(--sub);align-items:center}
.legend i{display:inline-block;width:18px;height:18px;border:3px solid var(--ink);vertical-align:-4px;margin-right:8px}
.legend i.on{background:var(--ink)}
.legend i.off{border-color:var(--edge)}

/* コピー欄 */
.copy{border:3px solid var(--ink);margin-top:14px}
.copy .h{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 14px;border-bottom:3px solid var(--ink);font-size:14px;font-weight:800}
.copy pre{margin:0;padding:12px 14px;font-family:inherit;font-size:15px;line-height:1.7;white-space:pre-wrap;word-break:break-word}

@media(max-width:720px){
  ol.flow{grid-template-columns:1fr;border-top:0;border-left:4px solid var(--ink)}
  ol.flow li{padding:0 0 28px 24px}
  ol.flow li::before{left:-11px;top:5px}
  ol.flow li:last-child{padding-bottom:4px}
  ol.pts{grid-template-columns:1fr}
  .quote{flex-wrap:wrap;gap:12px 16px}
  .quote .who{margin-left:0;flex-basis:100%}
  .bar{grid-template-columns:7.5em 1fr}
}

/* 印刷・PDF（A4 縦）。黒い塗りはそのまま刷る。柱は最初のページだけに出し、進み具合の線は1本の黒い線にする。
   見出しだけがページの下に残らない。表の行・要点・図の1段は途中で切らない */
@media print{
  @page{size:A4;margin:14mm 0}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pillar{position:static;padding-top:0}
  .segs{gap:0}
  .segs a{background:var(--ink)}
  .segs a i{display:none}
  main{padding-bottom:0}
  section{padding-top:48px}
  main>section:first-child{padding-top:32px}
  .head,h3,thead,.ask .lbl{break-after:avoid}
  .head,.ask,.stat,.bar,tr,.quote,.copy,.photo,figure,ol.flow li,ol.pts li,ul.dot li,.list a,.legend{break-inside:avoid}
}

/* ---- 角の丸みを当てる箱 ----
   丸くするのは箱だけ。線・見出しの下線・柱・表・流れは丸めない。点は丸（50%）のまま */
.legend i{border-radius:var(--r0);corner-shape:squircle}
.tag,.num,.dark img.teke,.dark .quote img:not(.face){border-radius:var(--r1);corner-shape:squircle}
.tag.warn,.tag.no{overflow:hidden}
.bar .fill{border-radius:0 var(--r1) var(--r1) 0;corner-shape:squircle}
.btn,.copy,.quote img.face{border-radius:var(--r2);corner-shape:squircle}
.ask,.photo img,.dark.stage{border-radius:var(--r3);corner-shape:squircle}
.btn.sm{border-radius:var(--r1)}