/* ベトナム経理のための Claude 実践テキスト — 配布用スタイル
   外部への通信はしない。Webフォントも読み込まない。 */
:root{
  --ink:#1b1d21; --sub:#5c6672; --line:#dfe3e8; --bg:#ffffff; --soft:#f5f7f9;
  --accent:#1d5a8c; --warn:#8c4a1d; --gray:#9aa3ad;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Yu Gothic UI","Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",
              Meiryo,"Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.85;
}
main{max-width:46rem; margin:0 auto; padding:1.5rem 1.25rem 4rem}
main.index{max-width:52rem}

.topbar{border-bottom:1px solid var(--line); background:var(--soft)}
.topbar a{display:inline-block; padding:.7rem 1.25rem; color:var(--accent);
  text-decoration:none; font-size:.9rem}
.topbar a:hover{text-decoration:underline}

h1{font-size:1.7rem; line-height:1.4; margin:.4rem 0 .3rem; letter-spacing:.01em}
h2{font-size:1.18rem; margin:2.4rem 0 .7rem; padding-bottom:.35rem;
   border-bottom:2px solid var(--line)}
h3{font-size:1.02rem; margin:1.8rem 0 .5rem; color:var(--accent)}
h4{font-size:.97rem; margin:1.3rem 0 .4rem}
p{margin:.85rem 0}
.part{color:var(--sub); font-size:.85rem; margin:0}
.sub{color:var(--sub); margin:.2rem 0 .1rem}
.sub2{font-size:.95rem !important; border:0 !important; margin:1.1rem 0 .4rem !important}
.meta{color:var(--gray); font-size:.85rem; margin:.2rem 0 1.2rem}
.warn{color:var(--warn)}
hr{border:0; border-top:1px solid var(--line); margin:2.2rem 0}
strong{font-weight:700}
a{color:var(--accent)}

code{background:var(--soft); padding:.1em .35em; border-radius:3px;
  font-family:Consolas,"Courier New",monospace; font-size:.9em}
pre{background:#20262e; color:#e8edf2; padding:1rem 1.1rem; border-radius:6px;
  overflow-x:auto; line-height:1.65; font-size:.86rem}
pre code{background:none; padding:0; color:inherit; font-size:inherit; white-space:pre}

.codebox{position:relative; margin:1.1rem 0}
.codebox pre{margin:0; padding-top:2.4rem}
.copybtn{position:absolute; top:.55rem; right:.6rem; cursor:pointer;
  background:#39424e; color:#dfe6ee; border:1px solid #4d5865; border-radius:5px;
  padding:.28rem .8rem; font-size:.78rem; font-family:inherit}
.copybtn:hover{background:#4d5865}
.copybtn.did{background:#1d6b3a; border-color:#1d6b3a; color:#fff}

.crumb{color:var(--sub); font-size:.85rem; padding:.7rem 0; float:right;
  margin-right:1.25rem}
.langsw{display:inline-block; margin-right:1rem; padding:.15rem .7rem;
  border:1px solid var(--accent); border-radius:99px; color:var(--accent);
  text-decoration:none; font-size:.8rem}
.langsw:hover{background:var(--accent); color:#fff}
.stepmeta{color:var(--accent); font-size:.82rem; font-weight:700;
  letter-spacing:.02em; margin:1.2rem 0 .2rem; padding:.25rem .6rem;
  background:var(--soft); border-radius:4px; display:inline-block}

.stepnav{margin-top:2.6rem; padding-top:1.2rem; border-top:1px solid var(--line)}
.nextbtn{display:block; text-align:center; background:var(--accent); color:#fff;
  text-decoration:none; border-radius:8px; padding:.9rem 1rem; font-weight:700;
  font-size:1rem}
.nextbtn:hover{background:#174a74}
.nextbtn.done{background:#1d6b3a}
.nextbtn.done:hover{background:#175830}
.stepsub{display:flex; justify-content:space-between; margin-top:.8rem;
  font-size:.85rem}
.stepsub a{color:var(--sub)}

blockquote{margin:1.4rem 0; padding:.9rem 1.1rem; background:var(--soft);
  border-left:4px solid var(--accent); border-radius:0 4px 4px 0}
blockquote p{margin:0}

.tablewrap{overflow-x:auto; margin:1.1rem 0}
table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:22rem}
th,td{border:1px solid var(--line); padding:.45rem .6rem; text-align:left;
  vertical-align:top; line-height:1.6}
th{background:var(--soft); font-weight:700; white-space:nowrap}

ul,ol{margin:.8rem 0; padding-left:1.5rem}
li{margin:.3rem 0}
ul.tasks{list-style:none; padding-left:0}
ul.tasks li.task::before{content:"☐"; margin-right:.5rem; color:var(--accent)}

.ext{font-size:.7rem; color:#fff; background:var(--gray); border-radius:3px;
  padding:.05rem .4rem; letter-spacing:.03em}
.path{font-size:.74rem; color:var(--gray); font-family:Consolas,monospace}

/* その場でダウンロードするリンク */
.dlnote{font-size:.85rem; color:var(--sub); background:var(--soft);
  border-radius:6px; padding:.7rem .9rem; margin:1.2rem 0 1.8rem}
.dlrow{display:flex; flex-direction:column; gap:1.1rem; margin:.9rem 0 1.4rem}

/* 資料の「中身が見えるプレビュー」（2026-08-07）。
   読者は資料を落として開かない。それでもAIに何を渡しているかは知っておく必要がある。
   画像は原寸へのリンクにしてあり、lazy 読み込みで重さを逃がしている。
   外部通信はしない（画像はサイトに同梱）。 */
/* 動画（2026-08-07）。プレビューと同じく本文より広く出す */
figure.vid{margin:1.2rem 0 1.4rem; display:flex; flex-direction:column; gap:.5rem}
figure.vid video{width:100%; height:auto; display:block; border-radius:10px;
  background:#20262e}
figure.vid figcaption{font-size:.8rem; color:var(--gray)}
/* 字幕。事務所で音を出せない人が読むものなので、既定より少し大きく・読みやすく */
figure.vid video::cue{font-size:1.05em; line-height:1.5;
  background:rgba(16,20,26,.82); color:#fff}

figure.peek{margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:.5rem}
/* 表は本文の幅（46rem）に収めると字が小さくなりすぎるので、
   プレビューだけ本文より広く出す。狭い画面では画面幅に収まるので横スクロールは出ない。 */
figure.peek.wide, figure.vid.wide{width:min(62rem, calc(100vw - 2.5rem)); margin-left:50%;
  transform:translateX(-50%)}
figure.peek .peekimg{display:block; max-width:100%; line-height:0;
  border-radius:6px; overflow:hidden}
figure.peek img{max-width:100%; height:auto; display:block; background:#fff}
figure.peek figcaption{display:flex; flex-wrap:wrap; align-items:center; gap:.55rem}
.peeknote{font-size:.76rem; color:var(--gray)}
/* XMLは「読めない」ことを見せるためのものなので、プロンプトの箱（濃い背景）とは
   別の見た目にしてある。濃い箱は「コピーして使うもの」に取ってある。 */
.peekcode{max-height:15rem; overflow:auto; margin:0; width:100%;
  background:#f7f9fb; color:#3a4653; border:1px solid var(--line); border-radius:6px;
  padding:.7rem .9rem; font-size:.78rem; line-height:1.55}
.peekcode code{background:none; padding:0; color:inherit;
  font-family:Consolas,Menlo,monospace; white-space:pre}
a.peektool{font-size:.76rem; color:var(--accent); text-decoration:none;
  border-bottom:1px solid currentColor}
a.peektool:hover{opacity:.75}
a.dl{display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  background:#fff; border:1px solid var(--accent); border-radius:6px;
  padding:.4rem .7rem .4rem .55rem; font-size:.88rem; color:var(--accent);
  line-height:1.3}
a.dl:hover{background:var(--accent); color:#fff}
a.dl:hover .ext{background:#fff; color:var(--accent)}
a.dl .dlic{font-weight:700}
a.dl .dlname{font-weight:600}

.hero{width:100%; height:auto; display:block; border-radius:10px; margin:1.2rem 0 1.6rem}

/* 章タイトル画像：記号＋見出し＋図柄。文字は本物のHTMLなので折り返しが効く */
.chapbar{display:flex; align-items:center; gap:1rem; background:var(--soft);
  border-left:8px solid var(--c,var(--accent)); border-radius:10px;
  padding:1rem 1.1rem; margin:1rem 0 1.4rem}
/* 章タイトル写真（2026-08-07）。帯の高さは CSS で決めているので、
   厚さを変えたいときに画像を作り直す必要はない。 */
.chapphoto{margin:1rem 0 0; line-height:0; border-radius:10px 10px 0 0; overflow:hidden}
.chapphoto img{width:100%; height:auto; display:block;
  aspect-ratio:2.75/1; object-fit:cover; object-position:center 32%}
.chapbar.withphoto{margin-top:0; border-radius:0 0 10px 10px}
@media (max-width:640px){ .chapphoto img{aspect-ratio:2.1/1} }
.chapcode{flex:none; width:64px; height:64px; border-radius:17px; background:var(--c,var(--accent));
  color:#fff; font-weight:700; font-size:1.6rem; display:flex; align-items:center;
  justify-content:center; line-height:1}
.chaptext{flex:1 1 auto; min-width:0}
.chaptext h1{font-size:1.42rem; margin:.1rem 0 .15rem}
.chappart{color:var(--sub); font-size:.78rem; margin:0}
.chapsub{color:var(--sub); font-size:.9rem; margin:0}
.chapart{flex:none; width:170px}
.chapart svg{width:100%; height:auto; display:block}
@media (max-width:640px){ .chapart{display:none} .chapcode{width:52px; height:52px;
  font-size:1.3rem; border-radius:14px} .chaptext h1{font-size:1.2rem} }
.sronly{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.fig{margin:1.4rem 0; overflow-x:auto}
.fig svg{width:100%; max-width:46rem; height:auto; display:block; margin:0 auto}

.lead{background:var(--soft); border-radius:6px; padding:1rem 1.2rem; margin:1.4rem 0 2rem}
.lead p{margin:.5rem 0; font-size:.95rem}

ul.toclist{list-style:none; padding:0; margin:.6rem 0 1.6rem}
ul.toclist li{margin:0; border-bottom:1px solid var(--line)}
ul.toclist li:last-child{border-bottom:0}
ul.toclist a, ul.toclist li.planned{display:flex; align-items:center;
  gap:.85rem; padding:.6rem .4rem; text-decoration:none}
ul.toclist a:hover{background:var(--soft)}
ul.toclist .tctext{display:flex; flex-wrap:wrap; align-items:baseline; gap:.7rem;
  min-width:0; flex:1 1 auto}
/* 目次のサムネイル（2026-08-07）。写真の無い回は枠だけを出して、行の高さを揃える */
.tcthumb{flex:none; width:104px; height:59px; border-radius:6px; object-fit:cover;
  display:block; background:var(--soft); border:1px solid var(--line)}
.tcthumb.noimg{border-style:dashed}
ul.toclist li.planned .tcthumb{filter:grayscale(1); opacity:.55}
ul.toclist .t{font-weight:700; color:var(--ink)}
ul.toclist .s{font-size:.85rem; color:var(--sub)}
ul.toclist li.planned .t, ul.toclist li.planned .s{color:var(--gray); font-weight:400}
@media (max-width:520px){ .tcthumb{width:72px; height:41px} }
.badge{font-size:.7rem; color:#fff; background:var(--gray); border-radius:3px;
  padding:.05rem .45rem; margin-left:auto}

ul.matlist{list-style:none; padding:0}
ul.matlist li{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem;
  padding:.4rem 0; border-bottom:1px solid var(--line)}
.uses{font-size:.78rem; color:var(--sub)}

.pager{display:flex; gap:1rem; align-items:center; justify-content:space-between;
  margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:.88rem}
.pager .prev{flex:1}
.pager .next{flex:1; text-align:right}
.pager .toc{color:var(--sub)}

footer{border-top:1px solid var(--line); background:var(--soft); color:var(--sub);
  font-size:.8rem; line-height:1.7}
footer p{max-width:46rem; margin:.6rem auto; padding:0 1.25rem}
footer p:first-child{padding-top:1.2rem}
footer p:last-child{padding-bottom:1.4rem}

@media print{
  .topbar,.pager{display:none}
  body{font-size:10.5pt}
  pre{background:#f2f2f2; color:#111; border:1px solid #ccc}
  a{color:inherit; text-decoration:none}
}