/* =========================================================
   クリスタで描く マンガのきほん ― 共通スタイル
   設計: 原稿用紙のグリッド + スクリーントーンの網点 + 操作パンくず
   ========================================================= */
:root{
  --paper:#ffffff;
  --bg:#EEF1F4;
  --ink:#14171C;
  --ink2:#3A424E;
  --muted:#6A7480;
  --line:#D6DBE2;
  --line2:#EBEEF2;
  --blue:#0F62CE;
  --blue-deep:#0A3F87;
  --blue-soft:#E8F1FD;
  --blue-line:#C6DCF8;
  --rose:#C93C5C;
  --rose-soft:#FBE9ED;
  --green:#0E7F5A;
  --green-soft:#E5F5EE;
  --amber:#A96E00;
  --amber-soft:#FFF4DC;
  --marker:#FFE873;
  --mincho:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP","MS PMincho",serif;
  --gothic:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP","Meiryo",system-ui,-apple-system,sans-serif;
  --side-w:272px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--gothic);font-size:16px;line-height:1.95;
  -webkit-text-size-adjust:100%;
  font-feature-settings:"palt" 1;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(rgba(20,23,28,.055) 1px,transparent 1.1px);
  background-size:9px 9px;
}
img{max-width:100%}
a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue-line)}
a:hover{border-bottom-color:var(--blue)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:.5em 1em;border:2px solid var(--blue);border-radius:8px;z-index:99}

/* ---------- layout ---------- */
.wrap{
  display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);gap:32px;
  max-width:1200px;margin:0 auto;padding:26px 22px 60px;
}
.side{position:sticky;top:22px;align-self:start;max-height:calc(100vh - 44px);min-width:0}
.side-in{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 14px 18px;box-shadow:0 1px 0 rgba(20,23,28,.03);max-height:calc(100vh - 44px);overflow:auto}
.brand{display:block;padding:4px 6px 12px;margin:0;min-width:0;border:0}
.side-head{display:flex;align-items:flex-start;gap:8px;border-bottom:1px dashed var(--line);margin-bottom:10px;padding-bottom:4px}
.side-hide,.side-show{font:inherit;font-size:.72rem;font-weight:800;letter-spacing:.04em;cursor:pointer;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.28em .75em;line-height:1.4}
.side-hide{flex:0 0 auto;margin-top:6px}
.side-hide:hover,.side-show:hover{border-color:var(--blue-line);color:var(--blue-deep)}
.side-show{display:none;position:fixed;z-index:40;left:16px;top:16px;background:var(--paper);box-shadow:0 6px 18px rgba(20,23,28,.12);padding:.45em .9em;font-size:.82rem}
body.nav-hidden{--side-w:0px}
body.nav-hidden .wrap{gap:0}
body.nav-hidden .side{visibility:hidden;pointer-events:none}
body.nav-hidden .side-show{display:inline-flex}
body.is-resizing{cursor:col-resize;user-select:none}
.side-resizer{position:absolute;top:8px;bottom:8px;right:-20px;width:14px;z-index:5;cursor:col-resize;touch-action:none;border-radius:99px}
.side-resizer::after{content:"";position:absolute;left:5px;top:18%;bottom:18%;width:4px;border-radius:99px;background:var(--line)}
.side-resizer:hover::after,.side-resizer:focus-visible::after,body.is-resizing .side-resizer::after{background:var(--blue)}
.side-resizer:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.brand b{display:block;font-size:1.02rem;font-weight:900;letter-spacing:.01em;line-height:1.5;color:var(--ink)}
.brand span{display:block;font-size:.74rem;color:var(--muted);letter-spacing:.08em;margin-top:.35em}
.nav{list-style:none;margin:0;padding:0}
.nav a{
  display:grid;grid-template-columns:3.9em minmax(0,1fr);gap:.45em;align-items:start;
  padding:.44em .5em;border-radius:9px;border:0;color:var(--ink2);
  font-size:.88rem;line-height:1.5;font-weight:600;
}
.nav a:hover{background:#F5F8FC;color:var(--blue-deep)}
.nav a .n{font-family:var(--mincho);font-weight:700;color:var(--muted);font-size:.85em;white-space:nowrap;letter-spacing:-.02em}
.nav a.on{background:var(--blue-soft);color:var(--blue-deep);box-shadow:inset 0 0 0 1px var(--blue-line)}
.nav a.on .n{color:var(--blue)}
.nav .sep{padding:.7em .55em .2em;font-size:.7rem;letter-spacing:.14em;color:var(--muted);font-weight:800}
.side-foot{font-size:.72rem;color:var(--muted);padding:.9em .55em 0;border-top:1px dashed var(--line);margin-top:.8em;line-height:1.7}

.main{min-width:0}
.toc-m{display:none}

/* ---------- chapter head ---------- */
.chead{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:30px 30px 26px;overflow:hidden;margin-bottom:26px;
}
.chead::before{
  content:"";position:absolute;inset:0;opacity:.6;
  background-image:
    linear-gradient(to right,rgba(15,98,206,.09) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(15,98,206,.09) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(115deg,#000 0%,rgba(0,0,0,.05) 58%,transparent 72%);
  mask-image:linear-gradient(115deg,#000 0%,rgba(0,0,0,.05) 58%,transparent 72%);
}
.chead::after{
  content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;border-radius:50%;opacity:.5;
  background-image:radial-gradient(rgba(20,23,28,.42) 1.2px,transparent 1.3px);
  background-size:8px 8px;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);
}
.chead>*{position:relative;z-index:1}
.eyebrow{
  display:inline-flex;align-items:baseline;gap:.5em;margin:0 0 .5em;
  font-family:var(--mincho);font-size:.9rem;font-weight:700;color:var(--blue);
  letter-spacing:.06em;
}
.eyebrow em{font-style:normal;font-size:2.1rem;line-height:1;color:var(--blue-deep)}
.chead h1{
  margin:0;font-size:clamp(1.55rem,3.4vw,2.15rem);font-weight:900;
  letter-spacing:-.01em;line-height:1.35;
}
.chead .lede{margin:.75em 0 0;color:var(--ink2);font-size:1rem;max-width:58ch}
.chead .tags{display:flex;flex-wrap:wrap;gap:.4em;margin:.9em 0 0}
.tag{
  font-size:.74rem;font-weight:800;color:var(--blue-deep);background:var(--blue-soft);
  border:1px solid var(--blue-line);border-radius:999px;padding:.18em .7em;letter-spacing:.02em;
}

/* ---------- content ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:26px 30px 30px;margin-bottom:22px;
}
.card>h2:first-child{margin-top:.1em}
h2{
  font-size:1.28rem;font-weight:900;line-height:1.5;margin:2.1em 0 .7em;
  padding-bottom:.4em;border-bottom:2px solid var(--ink);letter-spacing:.005em;
}
h2 .h2n{
  display:inline-block;font-family:var(--mincho);color:var(--blue);
  margin-right:.5em;font-size:1.05em;
}
h3{font-size:1.06rem;font-weight:900;margin:1.8em 0 .5em;padding-left:.62em;border-left:5px solid var(--blue);line-height:1.55}
h4{font-size:.98rem;font-weight:900;margin:1.4em 0 .4em;color:var(--ink)}
p{margin:.6em 0}
ul,ol{margin:.6em 0;padding-left:1.4em}
li{margin:.28em 0}
li>ul,li>ol{margin:.25em 0}
strong,b{font-weight:900}
em{font-style:normal;font-weight:800;background:linear-gradient(transparent 60%,var(--marker) 60%)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:#F3F6F9;border:1px solid var(--line2);border-radius:5px;padding:.05em .35em}
ruby rt{font-size:.48em;color:var(--muted);font-weight:600;letter-spacing:0}

/* ---------- breadcrumb (操作パンくず) ---------- */
.where{display:flex;flex-wrap:wrap;align-items:center;gap:.45em;margin:.7em 0 .85em;font-size:.8rem;font-weight:800;color:var(--muted);letter-spacing:.04em}
.crumb{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:.1em;
  background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:9px;
  padding:.3em .7em .3em .6em;color:var(--blue-deep);
  font-size:.92rem;font-weight:800;line-height:1.6;
}
.crumb>span{white-space:nowrap;padding:0 .1em}
.crumb>span+span::before{content:"▸";color:#84AADD;font-weight:400;margin-right:.42em}
.crumb.tool{background:#FFF7E6;border-color:#EBD49B;color:#7C5200}
.crumb.tool>span+span::before{color:#D5AE5B}
.crumb.menu{background:#F1F3F6;border-color:var(--line);color:var(--ink2)}
.crumb.menu>span+span::before{color:var(--muted)}

/* ---------- boxes ---------- */
.box{
  position:relative;margin:1.1em 0;padding:.95em 1.15em 1em;border-radius:0 12px 12px 0;
  border-left:5px solid var(--line);background:#F7F9FB;
}
.box::before{
  display:block;font-size:.76rem;font-weight:900;letter-spacing:.1em;
  color:var(--muted);margin-bottom:.15em;content:attr(data-label);
}
.box>*:last-child{margin-bottom:0}
.box>*:first-child{margin-top:.2em}
.tip{border-color:var(--green);background:var(--green-soft)}
.tip::before{color:var(--green)}
.warn{border-color:var(--amber);background:var(--amber-soft)}
.warn::before{color:var(--amber)}
.ng{border-color:var(--rose);background:var(--rose-soft)}
.ng::before{color:var(--rose)}
.def{border-color:var(--blue);background:var(--blue-soft)}
.def::before{color:var(--blue)}

/* ---------- steps ---------- */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:1.1em 0}
ol.steps>li{position:relative;padding-left:2.75em;margin:.85em 0}
ol.steps>li::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:.12em;width:1.75em;height:1.75em;border-radius:50%;
  background:var(--blue);color:#fff;font-weight:900;font-size:.86rem;
  display:flex;align-items:center;justify-content:center;font-family:var(--mincho);
}
ol.steps>li::after{content:"";position:absolute;left:.86em;top:2.05em;bottom:-.9em;width:2px;background:var(--blue-line)}
ol.steps>li:last-child::after{display:none}
ol.steps.tone>li::before{background:var(--ink)}
ol.steps.tone>li::after{background:var(--line)}
ol.steps.color>li::before{background:var(--rose)}
ol.steps.color>li::after{background:var(--rose-soft)}

/* ---------- layer stack ---------- */
.layers{display:grid;gap:5px;margin:1em 0;max-width:460px;counter-reset:l}
.layer{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6em;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:.42em .7em;
  font-size:.88rem;font-weight:800;line-height:1.45;
}
.layer .no{font-family:var(--mincho);color:var(--muted);font-size:.9em;min-width:1em}
.layer small{font-weight:600;color:var(--muted);font-size:.82em;white-space:nowrap}
.layer.hi{background:var(--blue-soft);border-color:var(--blue-line)}
.layer.dark{background:#2B3138;border-color:#2B3138;color:#fff}
.layer.dark small{color:#AEB6C0}
.layer .clip{color:var(--rose);font-size:.75rem;font-weight:900;border:1px dashed var(--rose);border-radius:6px;padding:0 .35em}

/* ---------- tone dots & figures ---------- */
.fig{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px 12px;margin:1.2em 0}
.fig svg{width:100%;height:auto;display:block}
.fig figcaption{font-size:.82rem;color:var(--muted);margin-top:.6em;line-height:1.7}
.dots{display:flex;flex-wrap:wrap;gap:12px;margin:1em 0}
.dot{width:88px;font-size:.72rem;font-weight:800;color:var(--ink2);text-align:center}
.dot i{
  display:block;height:74px;border:1px solid var(--line);border-radius:8px;background:#fff;
  background-image:radial-gradient(#101317 1.15px,transparent 1.25px);background-size:6px 6px;
}
.dot.d1 i{background-size:10px 10px}
.dot.d2 i{background-size:7px 7px}
.dot.d3 i{background-size:5px 5px}
.dot.d4 i{background-image:radial-gradient(#101317 .8px,transparent .9px);background-size:4px 4px}
.dot.a45 i{transform:rotate(0)}
.dot.moire i{
  background-image:radial-gradient(#101317 1.15px,transparent 1.3px),radial-gradient(rgba(16,19,23,.55) 1.15px,transparent 1.3px);
  background-size:6px 6px,6.4px 6.4px;background-position:0 0,1.4px 2.1px;
}
.dot.gray i{background-image:radial-gradient(#7A838E 1.6px,transparent 1.7px);background-size:6px 6px}
.dot.line i{background-image:repeating-linear-gradient(45deg,#101317 0 1.6px,transparent 1.6px 6px)}

/* ---------- grids & cards ---------- */
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:1.1em 0}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:1.1em 0}
.mini{background:#FBFCFD;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:.9rem;line-height:1.8}
.mini h4{margin:0 0 .35em;font-size:.94rem}
.mini.male{border-top:4px solid var(--blue)}
.mini.female{border-top:4px solid var(--rose)}
.mini p{margin:.35em 0}
.mini ul{padding-left:1.15em;margin:.35em 0}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin:1.1em 0;font-size:.9rem;background:#fff;line-height:1.7}
caption{text-align:left;font-size:.8rem;color:var(--muted);font-weight:700;padding-bottom:.4em}
th,td{border:1px solid var(--line);padding:.55em .7em;vertical-align:top;text-align:left}
th{background:#F4F7FA;font-weight:900;white-space:nowrap}
tbody tr:nth-child(even) td{background:#FCFDFE}
table.compact th,table.compact td{padding:.42em .55em}
.tbl-wrap{overflow-x:auto}

/* ---------- checklist & drill ---------- */
ul.check{list-style:none;padding-left:0}
ul.check li{position:relative;padding-left:1.7em}
ul.check li::before{
  content:"";position:absolute;left:0;top:.55em;width:.95em;height:.95em;
  border:2px solid var(--blue);border-radius:4px;background:#fff;
}
ol.drill{list-style:none;counter-reset:d;padding:0}
ol.drill>li{counter-increment:d;padding:.7em .9em .7em 3.1em;position:relative;background:#fff;border:1px solid var(--line);border-radius:11px;margin:.5em 0;font-size:.92rem}
ol.drill>li::before{
  content:"課題" counter(d);position:absolute;left:.8em;top:.72em;font-size:.7rem;font-weight:900;color:#fff;
  background:var(--rose);border-radius:6px;padding:.05em .35em;font-family:var(--gothic);
}

/* ---------- chapter grid (index) ---------- */
.chapgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:1.2em 0}
.chap{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;border-left:5px solid var(--blue);color:var(--ink)}
.chap:hover{background:#FAFCFF;border-color:var(--blue-line)}
.chap b{display:block;font-size:.98rem;font-weight:900;line-height:1.5}
.chap span{display:block;font-size:.78rem;color:var(--muted);font-weight:700;letter-spacing:.05em;margin-bottom:.25em;font-family:var(--mincho)}
.chap em{display:block;font-size:.8rem;color:var(--ink2);font-weight:600;background:none;margin-top:.3em;line-height:1.7}

/* ---------- pager / footer ---------- */
.pager{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;margin:6px 0 0}
.pager a{
  flex:1 1 220px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;
  font-weight:800;font-size:.9rem;color:var(--ink2);border-bottom:1px solid var(--line);
}
.pager a:hover{border-color:var(--blue-line);background:#FAFCFF}
.pager a span{display:block;font-size:.72rem;color:var(--muted);letter-spacing:.08em;font-weight:800;margin-bottom:.2em}
.foot{max-width:1200px;margin:0 auto;padding:0 22px 44px;font-size:.78rem;color:var(--muted);line-height:1.8}
.foot a{color:var(--muted);text-decoration:underline}

/* ---------- all-in-one extras ---------- */
.topbar{
  display:none;
  position:sticky;top:0;z-index:20;background:rgba(238,241,244,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:transform .28s ease;will-change:transform;
}
.topbar.tb-hidden{transform:translateY(-100%)}
.topbar-in{max-width:1200px;margin:0 auto;padding:6px 14px 0;display:flex;flex-direction:column;align-items:center;gap:4px}
.topbar-title{font-size:.82rem;font-weight:900;white-space:nowrap;letter-spacing:.02em;padding:4px 0 2px;color:var(--ink)}
.topbar-links{display:flex;gap:7px;min-width:0;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;padding:0 0 7px}
.topbar-links::-webkit-scrollbar{display:none}
.topbar b{display:none}
.topbar a{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;font-size:.75rem;font-weight:800;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.15em .65em;color:var(--ink2);border-bottom:1px solid var(--line)}
.topbar a:hover{border-color:var(--blue-line);color:var(--blue-deep)}
.chapter{scroll-margin-top:64px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .wrap{gap:22px;padding:16px 14px 48px}
  .side-in{padding:12px}
  .card,.chead{padding:20px 18px 22px;border-radius:14px}
  .chead{padding-top:22px}
}
@media (max-width:767px){
  .topbar{display:block}
  .wrap{grid-template-columns:minmax(0,1fr);gap:18px;padding:16px 14px 48px}
  .side,.side-resizer,.side-hide,.side-show{display:none !important}
  .chapter{scroll-margin-top:80px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{
  body{background:#fff}body::before{display:none}
  .side,.topbar,.pager,.toc-m,.side-show,.side-hide,.side-resizer{display:none}
  .wrap{display:block;max-width:none;padding:0}
  .card,.chead{break-inside:avoid;border-color:#999}
  a{color:inherit}
}

/* ---------- 手順フロー ---------- */
.flow{display:flex;flex-wrap:wrap;gap:7px;margin:1.1em 0 1.3em}
.flow .fs{
  position:relative;background:#fff;border:1px solid var(--blue-line);border-radius:11px;
  padding:.45em .8em;font-size:.84rem;font-weight:800;color:var(--ink);line-height:1.45;
}
.flow .fs b{display:block;font-family:var(--mincho);font-size:.68rem;font-weight:700;color:var(--blue);letter-spacing:.08em}
.flow .fs+.fs{margin-left:22px}
.flow .fs+.fs::before{content:"→";position:absolute;left:-19px;top:50%;transform:translateY(-50%);color:#9AA5B1;font-weight:400;font-size:.95rem}
.flow .fs.goal{background:var(--blue);border-color:var(--blue);color:#fff}
.flow .fs.goal b{color:#C3DAF9}
/* ---------- 図版（完成例） ---------- */
.fig.pic img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#fff}
.fig.pic.w-sm{max-width:420px}
.fig.pic.w-md{max-width:580px}
.fig.pic .shot{
  display:inline-block;font-size:.73rem;font-weight:900;letter-spacing:.04em;color:var(--blue-deep);
  background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:999px;padding:.14em .7em;margin-bottom:.6em;
}
.fig.pic .shot.alt{color:#7C5200;background:#FFF7E6;border-color:#EBD49B}
.fig.pic figcaption strong{color:var(--ink)}
.picgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;align-items:start;margin:1.2em 0}
.picgrid .fig{margin:0}
.ui-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.35em 1.2em;font-size:.84rem;margin:.9em 0 0;padding:0;list-style:none}
.ui-legend li{display:grid;grid-template-columns:1.6em 1fr;gap:.35em;align-items:baseline;margin:0}
.ui-legend .num{
  display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;
  background:var(--blue);color:#fff;font-size:.72rem;font-weight:900;font-family:var(--mincho);
}

/* ---------- バッジ・キー ---------- */
.badge{
  display:inline-block;font-size:.7rem;font-weight:900;letter-spacing:.03em;line-height:1.5;
  border-radius:999px;padding:.05em .6em;vertical-align:.08em;white-space:nowrap;
}
.badge.ex{background:#F2ECFB;color:#6136A8;border:1px solid #DCCDF3}
.badge.pro{background:var(--blue-soft);color:var(--blue-deep);border:1px solid var(--blue-line)}
.badge.warnb{background:var(--amber-soft);color:var(--amber);border:1px solid #EBD49B}
.kbd{
  display:inline-block;font-family:var(--gothic);font-size:.86em;font-weight:900;
  background:#F1F3F6;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  padding:.02em .45em;margin:0 .1em;
}
.mini-note{display:block;font-size:.82rem;color:var(--muted);line-height:1.7;margin-top:.3em}

/* ---------- 手順カード（1手順＝1画像） ---------- */
.stepsheet{display:grid;gap:20px;margin:1.3em 0}
.stepcard{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  border-left:5px solid var(--blue);
}
.stepcard-fig{margin:0;min-width:0}
.stepcard-fig img{
  display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#fff;
}
.stepcard-fig svg{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#fff}
.stepcap{display:block;font-size:.79rem;color:var(--muted);line-height:1.7;margin-top:.55em}
.stepcard-body{min-width:0}
.stepcard-body h4{
  margin:0 0 .4em;font-size:1.02rem;font-weight:900;line-height:1.5;
  padding-bottom:.3em;border-bottom:1px dashed var(--line);
}
.stepcard-body ol.mini-steps{
  counter-reset:ms;list-style:none;padding:0;margin:.5em 0 .7em;
}
.stepcard-body ol.mini-steps>li{
  counter-increment:ms;position:relative;padding-left:1.9em;margin:.3em 0;font-size:.93rem;line-height:1.8;
}
.stepcard-body ol.mini-steps>li::before{
  content:counter(ms);position:absolute;left:0;top:.15em;width:1.45em;height:1.45em;border-radius:50%;
  background:var(--blue-soft);color:var(--blue-deep);border:1px solid var(--blue-line);
  font-size:.78rem;font-weight:900;display:flex;align-items:center;justify-content:center;
  font-family:var(--mincho);
}
.stepcard .box{margin:.7em 0 .2em;font-size:.92rem}
.stepcard .where{font-size:.8rem;margin:.45em 0}
.stepcard .crumb{font-size:.88rem}
.stepcard .fig{margin:.7em 0}
@media (max-width:760px){
  .stepcard{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px}
  .stepcard-fig{max-width:440px}
}
/* 章内の小見出し数字（実践版など） */
.chead .eyebrow em{min-width:1.1em}

/* ==== 実践③④⑤：レイヤーパレットの状態図 ==== */
.lfig{margin:.85em 0 0;padding:0}
.lfig>svg{display:block;width:100%;height:auto}
.lfigcap{display:block;font-size:.76rem;color:var(--muted);margin-top:.4em;line-height:1.65}
.lstack{display:grid;gap:12px;margin:1.1em 0}
.lstack .lfig{margin:0}
.setlist{margin:.5em 0 .2em;padding:0;list-style:none;font-size:.9rem;line-height:1.75}
.setlist li{padding-left:1.1em;position:relative}
.setlist li::before{content:"▪";position:absolute;left:0;color:var(--blue);font-size:.8em;top:.15em}
.setlist b{color:var(--blue-deep)}
.two-layer{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:1em 0}
.stepcard .lfigcap{margin-top:.3em}
@media(max-width:900px){.two-layer{grid-template-columns:minmax(0,1fr)}}

/* ==== 復習シート：印つき作例の一覧 ==== */
.revgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:1.2em 0}
.revcard{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.revcard img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.revcard .rbody{padding:10px 12px 12px}
.revcard .rno{display:inline-block;font-size:.72rem;font-weight:900;color:#fff;background:var(--blue);border-radius:999px;padding:.12em .8em;margin-bottom:.35em}
.revcard .rnm{display:block;font-weight:900;font-size:.98rem;color:var(--ink);line-height:1.5;margin-bottom:.35em}
.revcard ul{list-style:none;margin:0;padding:0;font-size:.82rem;line-height:1.7}
.revcard li{position:relative;padding-left:1.05em}
.revcard li::before{content:"▪";position:absolute;left:0;color:var(--rose)}
.revcard .rset{display:block;margin-top:.5em;font-size:.78rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:.45em}
.revcard .rset b{color:var(--blue-deep)}
.revhead{margin:1.6em 0 .2em;padding:.5em .9em;border-radius:8px;background:var(--blue-soft);border-left:5px solid var(--blue);font-weight:900;color:var(--blue-deep)}
@media print{.revgrid{grid-template-columns:1fr 1fr}.revcard{break-inside:avoid}}

/* ---------- 画像の不用意な保存を少し抑える ---------- */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.fig.pic img,.stepcard-fig img,.revcard img{pointer-events:auto}