/* ぬいもの図解帳 — このアプリだけの見た目（共通の style.css のあとに読む）
 * 置き場所：site/sewing/assets/css/sewing.css
 * 差し色は藍色（あみもの計算帳のテラコッタと見分けやすく）。背景などはサイト共通のまま
 */
body.sew {
  --accent: #2f5f8f; --accent-strong: #234a71; --accent-ink: #ffffff; --accent-soft: #e2ebf4;
  --seam: #d2412a; --gapc: #e6a23c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.sew { --accent: #8db6e0; --accent-strong: #b5d0ee; --accent-ink: #14181c; --accent-soft: #1f2a36; --seam: #ff8a70; --gapc: #f0b765; --cord2: #eaa36c; }
}
:root[data-theme="dark"] body.sew { --accent: #8db6e0; --accent-strong: #b5d0ee; --accent-ink: #14181c; --accent-soft: #1f2a36; --seam: #ff8a70; --gapc: #f0b765; --cord2: #eaa36c; }

/* ---- 作る流れ（ページの上）---- */
.sew-flow { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.sew-flow li { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: .9rem; font-weight: 700; }
.sew-flow b { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: .8rem; }

/* ---- 入力 ---- */
.form-h { font-family: var(--font-body); font-size: 1.05rem; margin: 0 0 8px; }
.form-h small { font-weight: 400; color: var(--muted); font-size: .85rem; margin-left: 4px; }
.sew-form > .card > .field:last-child { margin-bottom: 0; } /* 入れる所を「縫い方」と「できあがりの大きさ」の2つの枠に分けた（2026-10-30） */
.sz-guide-fig { margin: 0 0 12px; background: var(--bg); border-radius: var(--radius-sm); padding: 6px 4px; }
.sz-guide-fig .sz-svg { max-width: 380px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 599px) { /* 3つ横は 600px から（561〜575px で「30.5」が切れていた） */
  .row-3 { grid-template-columns: 1fr 1fr; }
  .row-3 > :last-child { grid-column: 1 / -1; }
}
.row-3 .stepper button { width: 42px; }
.row-3 .stepper input { font-size: 1.45rem; }

/* ---- 答え ---- */
.sz-h3 { font-size: 1.05rem; margin: 22px 0 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sz-h3:first-child { margin-top: 0; }
.sz-h3-big { font-family: var(--font-head); font-size: 1.3rem; padding-top: 14px; border-top: 1px solid var(--line); }
.sz-cnt { font-family: var(--font-body); font-size: .85rem; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); padding: 1px 10px; border-radius: 999px; }
.sz-sum { margin: 6px 0 0; text-align: center; }
.sz-eqs { margin: 6px 0 4px; line-height: 2; font-size: .95rem; }
.sz-eq b { font-size: 1.1rem; color: var(--accent-strong); }
.sz-eq .nw { font-variant-numeric: tabular-nums; }
.sz-note { color: var(--muted); font-size: .88rem; margin: 6px 0 0; }
.sz-piece { margin: 0 0 8px; }
.sz-dotline .sz-legend { margin-bottom: 4px; }
.sz-mat { margin: 6px 0 0; padding-left: 1.2em; }
.sz-mat li { margin: 4px 0; }

/* ---- 図 ---- */
.sz-fig { margin: 8px 0 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 6px; }
.sz-fig figcaption { color: var(--muted); font-size: .8rem; text-align: center; }
.sz-svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; overflow: visible; }
.sz-t { font-family: var(--font-body); font-size: 14px; font-weight: 700; fill: var(--ink); }
.sz-ts { font-size: 13px; font-weight: 600; }
.sz-halo { stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; fill: var(--bg); }
.sz-on.sz-halo { stroke: var(--surface); fill: var(--surface); }
.sz-acc { fill: var(--accent-strong); }
.sz-dimt { fill: var(--ink); }
.sz-cloth { stroke: var(--ink); stroke-width: 1.4; }
.sz-face { fill: url(#sz-pat-face); }
.sz-pf-bg { fill: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.sz-pf-dot { fill: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.sz-back { fill: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.sz-lin { fill: url(#sz-pat-lin); }
.sz-pl-bg { fill: var(--moss-soft); }
.sz-pl-ln { stroke: color-mix(in srgb, var(--moss) 40%, transparent); stroke-width: 1.4; }
.sz-linb { fill: url(#sz-pat-linb); }
.sz-plb-bg { fill: color-mix(in srgb, var(--moss-soft) 80%, var(--surface)); }
.sz-plb-ln { stroke: color-mix(in srgb, var(--moss) 22%, transparent); stroke-width: 1.2; }
.sz-hemtop { fill-opacity: 1; }
.sz-hem { fill: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.sz-side { opacity: .82; }
.sz-inside { fill: color-mix(in srgb, var(--ink) 30%, var(--surface)); stroke: var(--ink); stroke-width: 1.2; }
.sz-seam { stroke: var(--seam); stroke-width: 2.6; stroke-dasharray: 7 4; fill: none; stroke-linecap: round; }
.sz-fold { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 10 3 2 3; fill: none; }
.sz-thin { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.sz-done { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 3; fill: none; opacity: .75; }
.sz-dim { stroke: var(--muted); stroke-width: 1.2; }
.sz-dim.sz-pick { stroke: var(--accent); stroke-width: 2.6; }
.sz-tape { fill: var(--accent); stroke: var(--accent-strong); stroke-width: 1; }
.sz-handle { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.sz-stitch { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .6; }
.sz-name { fill: var(--surface); stroke: var(--ink); stroke-width: 1; }
.sz-roll { fill: var(--bg-deep); }
.sz-selv { stroke: var(--muted); stroke-width: 3; stroke-dasharray: 1 4; }
.sz-arrow { stroke: var(--ink); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sz-arrow-acc { stroke: var(--accent-strong); }
.sz-gap { stroke: var(--gapc); stroke-width: 7; stroke-linecap: round; opacity: .95; }
/* 巾着袋の仲間のひも（kinzu.js）。2本目（両引きの右のひも）は別の色。kz-in＝通り道の中（前の面）・kz-back＝後ろの面の中 */
.kz-cord { fill: none; stroke: var(--accent-strong); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kz-cord.kz-c2 { stroke: var(--cord2, #b0602a); }
.kz-cord.kz-in { stroke-width: 2.4; stroke-dasharray: 5 4; }
.kz-cord.kz-back { stroke-width: 2; opacity: .45; }
.kz-knot { fill: var(--accent-strong); }
.sz-mouthseam { stroke: var(--ink); stroke-width: 2.2; }
.sz-sideseam { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 6 3; }
.sz-cutline { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 2 3; fill: none; }
.sz-center { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 8 4; }
.sz-zig { stroke: var(--seam); stroke-width: 1.6; fill: none; stroke-linejoin: round; }
.sz-prof { stroke: var(--accent); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sz-hemline { stroke: var(--ink); stroke-width: 1; opacity: .6; }
.sz-cover { fill: var(--bg); stroke: none; }
.sz-dotline p { margin: 6px 0 0; font-size: .88rem; color: var(--muted); font-weight: 400; }
.sz-legend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: .8rem; color: var(--muted); }
.sz-legend li { display: flex; align-items: center; gap: 5px; }
.sz-legend svg { width: 16px; height: 16px; flex: none; }
.sz-legend svg[viewBox="0 0 28 12"] { width: 28px; height: 12px; }
.sz-legend .sz-seam { stroke-dasharray: 5 3; }

/* ---- 言葉の説明（押すと出る）：うすい青の札＋小さな「？」で、押せるとひと目で分かるように ---- */
/* 札は inline-flex にして、「？」の丸を札の中に収める（iPhone の Safari で、丸が右のふちにはみ出したため） */
.sz-term { appearance: none; display: inline-flex; align-items: center; gap: 3px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); border-radius: 6px;
  padding: 0 5px 0 6px; margin: 0 1px; font: inherit; font-weight: 700; color: var(--accent-strong); line-height: 1.5; cursor: pointer; white-space: nowrap; vertical-align: baseline; }
.sz-term::after { content: "?"; flex: none; display: block; width: 14px; height: 14px; border-radius: 50%; text-align: center;
  background: var(--accent); color: var(--accent-ink); font-size: 10px; line-height: 14px; font-weight: 800; }
.sz-term[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.sz-term.sz-q { padding: 0; width: 28px; height: 28px; border-radius: 50%; font-size: .95rem; display: inline-grid; place-items: center; vertical-align: middle; }
.sz-term.sz-q::after { content: none; }
.label-row { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 0 0 6px; }
.label-row > label { margin: 0; }
.field > .sz-tbox { margin-top: 8px; }
/* 図の中の押せる言葉 */
.sz-tlink { cursor: pointer; }
.sz-tlink .sz-tl { fill: var(--accent-strong); text-decoration: underline; }
.sz-tlink:focus { outline: none; }
.sz-tlink:focus-visible .sz-tl { fill: var(--accent); }
.sz-fig > .sz-tbox { margin: 6px 4px 2px; }
.sz-tbox { display: block; margin: 8px 0 0; padding: 10px 12px; background: var(--accent-soft); border-radius: var(--radius-sm); font-size: .9rem; line-height: 1.7; color: var(--ink); }
.sew-text .sz-tbox, .sew-why .sz-tbox { font-weight: 400; }

/* ---- 縫う手順 ---- */
.sew-progress { font-weight: 700; color: var(--accent-strong); font-size: .95rem; white-space: nowrap; }
.sew-intro { margin: 0 0 10px; }
.sew-open { width: 100%; margin: 0 0 6px; }
.sew-list { list-style: none; margin: 8px 0 0; padding: 0; }
.sew-step { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.sew-head { display: flex; align-items: center; gap: 10px; }
.sew-no { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; }
.sew-title { margin: 0; font-size: 1.1rem; line-height: 1.45; }
.sew-text { margin: 10px 0 0; }
.sew-why { margin: 10px 0 0; padding: 10px 12px; background: var(--bg); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; font-size: .92rem; color: var(--muted); }
.sew-why-q { display: block; font-weight: 800; color: var(--accent-strong); margin-bottom: 2px; }
.sz-h3 .sz-tbox { flex-basis: 100%; font-family: var(--font-body); font-weight: 400; font-size: .9rem; }
.sz-cnt .sz-term { color: inherit; font-weight: 700; }
.sew-check { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 44px; padding: 4px 14px 4px 8px; border: 1.5px solid var(--field-line); border-radius: 999px; cursor: pointer; font-weight: 700; }
.sew-check input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 0; border: 2px solid var(--field-line); border-radius: 7px; background: var(--surface); display: grid; place-content: center; cursor: pointer; }
.sew-check input:checked { background: var(--accent); border-color: var(--accent); }
.sew-check input:checked::after { content: ""; width: 11px; height: 6px; border: 3px solid var(--accent-ink); border-top: 0; border-right: 0; transform: translateY(-2px) rotate(-45deg); }
.sew-check input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sew-step.is-done .sew-no { background: var(--moss); }
.sew-step.is-done .sew-check { border-color: var(--moss); color: var(--moss); }
.sew-step.is-done .sz-fig { opacity: .75; }
/* できあがり（最後の手順のあと） */
.sew-finish { margin: 6px 0 4px; padding: 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--line)); text-align: center; }
.sew-finish-t { margin: 0 0 6px; font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--accent-strong); }
.sew-finish p:last-child { margin: 10px 0 0; text-align: left; }
.sm-foot.sm-foot-2 { grid-template-columns: 1fr 1fr; }

/* ---- 縫いながら見る（1手順ずつ）---- */
.sewmode { position: fixed; inset: 0; z-index: 100; background: var(--bg); overflow-y: auto; overflow-wrap: anywhere; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.sewmode[hidden] { display: none; }
.sm-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line);
  padding-left: max(16px, env(safe-area-inset-left, 0px), calc((100% - 760px) / 2 + 16px)); padding-right: max(16px, env(safe-area-inset-right, 0px), calc((100% - 760px) / 2 + 16px)); }
.sm-bar h2 { margin: 0 auto 0 0; font-size: 1.05rem; line-height: 1.4; min-width: 0; }
.sm-count { flex: none; font-weight: 800; color: var(--accent-strong); white-space: nowrap; }
.sm-bar .icon-btn { flex: none; }
.sm-body { max-width: 760px; margin: 0 auto; padding: 12px 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sm-fig .sz-svg { max-width: 560px; max-height: 58vh; }
.sm-body .sew-text { font-size: 1.1rem; line-height: 1.85; }
.sm-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 94%, transparent); border-top: 1px solid var(--line);
  padding-left: max(16px, env(safe-area-inset-left, 0px), calc((100% - 760px) / 2 + 16px)); padding-right: max(16px, env(safe-area-inset-right, 0px), calc((100% - 760px) / 2 + 16px)); }
.sm-foot .btn { min-height: 52px; padding: 8px 6px; }
.sm-done.is-on { background: var(--moss); border-color: var(--moss); color: var(--surface); }
/* スマホの横向き：図を左・文を右に並べる（上の帯と下のボタンで、図が隠れないように） */
@media (max-height: 500px) and (orientation: landscape) {
  .sm-bar { padding-top: 6px; padding-bottom: 6px; }
  .sm-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; max-width: 960px; }
  .sm-fig { grid-row: span 3; margin: 0; }
  .sm-fig .sz-svg { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
  .sm-body .sew-text { margin-top: 0; font-size: 1rem; }
  .sm-foot .btn { min-height: 44px; }
}
/* 打っている途中で入力がまちがっているあいだは、手順を消さずにうすくする（ページが大きく動かないように） */
.sew-steps.is-stale { opacity: .45; pointer-events: none; }

/* ---- はじめての方へ（ページの上。押すと開く）---- */
.sew-begin { margin: 8px 0 4px; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--radius); box-shadow: var(--shadow); }
.sew-begin > summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; position: relative; min-height: 48px; }
.sew-begin > summary::-webkit-details-marker { display: none; }
.sew-begin > summary::after { content: "＋"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--accent); font-size: 1.2rem; }
.sew-begin[open] > summary::after { content: "－"; }
.sew-begin-t { display: block; font-weight: 800; color: var(--accent-strong); font-size: 1.05rem; }
.sew-begin-s { display: block; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.sew-begin-body { padding: 0 16px 8px; }
.sew-begin-body section { border-top: 1px solid var(--line); padding: 14px 0 6px; }
.sew-begin-body h2 { font-size: 1.15rem; margin: 0 0 8px; }
.sew-begin-body h3 { margin: 12px 0 6px; }
.sew-begin-body p { margin: 0 0 10px; }
.sew-begin-body ul { padding-left: 1.3em; margin: 0 0 10px; }
.sew-sizes { list-style: none; padding: 0 !important; display: grid; gap: 6px; }
.sew-sizes li { display: flex; flex-wrap: wrap; gap: 2px 10px; background: var(--bg); border-radius: var(--radius-sm); padding: 8px 12px; }
.sew-sizes b { min-width: 7.5em; }
/* 2つを比べる札（表のかわりに。スマホは縦に、広い画面は横に並べる） */
.sew-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 10px; }
@media (min-width: 560px) { .sew-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sew-cmp { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.sew-cmp.is-pick { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.sew-cmp h3 { margin: 0 0 6px !important; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.sew-badge { font-size: .75rem; font-weight: 800; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 1px 8px; }
.sew-cmp dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
/* とても狭い画面（360px 以下）では、見出し（dt）と中身（dd）を縦に並べる（長い言葉の札が右へはみ出さないように） */
@media (max-width: 360px) { .sew-cmp dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .sew-cmp dd { margin-bottom: 6px; } }
.sew-cmp dt { color: var(--muted); font-size: .85rem; padding-top: 2px; white-space: nowrap; }
.sew-cmp dd { margin: 0; }

/* ---- 読みもの ---- */
.sew-words dt { font-weight: 800; margin-top: 12px; color: var(--accent-strong); }
.sew-words dd { margin: 2px 0 0; }

/* 広い画面（左に入力・右に答え）では、サイズの見方の図を少し小さく */
@media (min-width: 1100px) { .sz-guide-fig .sz-svg { max-width: 340px; } }

/* ---- 縫い方図鑑：針と糸が動く図（stitchanim.js）---- */
body.sew { --needle: #5f6d7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.sew { --needle: #c3ccd5; } }
:root[data-theme="dark"] body.sew { --needle: #c3ccd5; }
.sa-svg { max-width: 520px; overflow: hidden; }
.sa-thread { stroke: var(--seam); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sa-under { stroke: var(--seam); stroke-width: 1.6; fill: none; stroke-dasharray: 3 4; opacity: .55; stroke-linecap: round; }
.sa-knot-u { fill: var(--seam); opacity: .45; }
.sa-knot { fill: var(--seam); }
.sa-coil { fill: none; stroke: var(--seam); stroke-width: 2.2; }
.sa-needle { stroke: var(--needle); stroke-width: 3.8; stroke-linecap: round; }
.sa-needle.sa-under-n { opacity: .3; stroke-dasharray: 2 3; }
.sa-eye { fill: var(--bg); stroke: var(--needle); stroke-width: 1.2; }
.sa-eye.sa-under-n { opacity: .3; }
.sa-num { fill: var(--accent-strong); font-size: 15px; }
.sa-foldedge { stroke: var(--ink); stroke-width: 2; }
.sa-chalk { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 4; opacity: .45; }
.sa-plain { fill: var(--bg-deep); }
.sa-thumb { fill: color-mix(in srgb, #e7b89a 72%, transparent); stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1.2; }
.sa-mseam { stroke: var(--seam); stroke-width: 2.4; fill: none; stroke-dasharray: 8 2; stroke-linejoin: round; stroke-linecap: butt; }
.sa-mback { stroke-width: 2.2; opacity: .9; }
.sa-footp { fill: color-mix(in srgb, var(--needle) 30%, transparent); stroke: var(--ink); stroke-width: 1.5; }
.sa-lift { opacity: .3; }
.sa-mneedle { fill: var(--ink); stroke: var(--bg); stroke-width: 1.5; }
.sa-fig { padding: 6px 4px; }
.sa-cap { margin: 8px 0 0; min-height: 3.4em; font-weight: 700; line-height: 1.6; display: flex; gap: 8px; align-items: flex-start; }
.sa-cap b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: .85rem; margin-top: 1px; }
.sa-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; }
.sa-ctl .btn { min-height: 46px; }
.sa-legend { margin-top: 4px; }

/* 縫い方の言葉（押すと窓で動く図）：「？」のかわりに「▶」 */
.sz-term.sz-mv::after { content: "▶"; font-size: 7px; line-height: 14px; text-indent: 1px; }

/* ---- 縫い方の窓（stitchmodal.js）。「縫いながら見る」の画面より上 ---- */
.sw-modal { position: fixed; inset: 0; z-index: 130; background: rgba(20, 16, 14, .55); display: flex; align-items: center; justify-content: center; padding: 12px; padding-top: max(12px, env(safe-area-inset-top, 0px)); padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); overflow-wrap: anywhere; }
.sw-modal[hidden] { display: none; }
.sw-dialog { background: var(--bg); width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.sw-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.sw-bar h2 { margin: 0 auto 0 0; font-size: 1.15rem; min-width: 0; }
.sw-kind { flex: none; font-size: .75rem; font-weight: 800; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 1px 9px; }
.sw-bar .icon-btn { flex: none; }
.sw-body { padding: 10px 14px 16px; }
.sw-short { margin: 12px 0 0; }
.sw-more { display: block; width: 100%; margin: 12px 0 0; text-align: center; text-decoration: none; }
@media (max-height: 520px) and (orientation: landscape) {
  .sw-dialog { max-width: 820px; }
  .sw-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 14px; align-items: start; }
  .sw-body .sa-fig { grid-row: span 4; margin: 0; }
  .sw-body .sa-fig .sz-svg { max-height: calc(100dvh - 110px); }
  .sw-body .sa-cap { margin-top: 0; }
}

/* ---- 縫い方図鑑のページ ---- */
.st-anim .sa-fig { margin-top: 0; }
.st-steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.st-steps > li { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.st-steps > li:first-child { border-top: 0; padding-top: 4px; }
.st-steps .sew-head { margin-bottom: 4px; }
.st-steps .sz-fig { margin-top: 8px; }
.st-steps p { margin: 8px 0 0; }
.st-fails dt { font-weight: 800; margin-top: 14px; color: var(--ink); }
.st-fails dt::before { content: "失敗 "; color: var(--seam); font-size: .85rem; }
.st-fails dd { margin: 4px 0 0; padding: 8px 12px; background: var(--bg); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; }
.st-uses { padding-left: 1.2em; }
.st-uses li { margin: 6px 0; }
.st-related { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.st-related a, .st-card { display: block; padding: 10px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.st-related a b, .st-card b { color: var(--accent-strong); }
.st-related a span, .st-card span { display: block; font-size: .88rem; color: var(--muted); }
@media (hover: hover) { .st-related a:hover, .st-card:hover { border-color: var(--accent); } }
.st-cards { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .st-cards { grid-template-columns: 1fr 1fr; } }
.st-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; align-items: center; height: 100%; box-sizing: border-box; }
.st-card .st-thumb { grid-row: span 2; background: var(--surface); border-radius: 8px; border: 1px solid var(--line); overflow: hidden; }
.st-card .st-thumb .sz-svg { max-width: none; }
.st-card b { font-size: 1.05rem; }
.st-group-h { font-family: var(--font-body); font-size: 1.05rem; margin: 18px 0 4px; }
.st-group-h:first-of-type { margin-top: 4px; }
.st-scale { font-size: .8rem; color: var(--muted); text-align: center; margin: 4px 0 0; }
.sew-zukan { margin: 14px 0 0; padding: 10px 12px; background: var(--accent-soft); border-radius: var(--radius-sm); }
/* できあがり・① 布を切る・② 縫う・保存は、同じ形の枠（見出しは枠のいちばん上） */
.sew-cut.is-stale { opacity: .45; pointer-events: none; }
.sew-cut .sz-piece:first-of-type .sz-h3 { margin-top: 0; }
.sew-end .rate { margin: 14px 0 0; }
.sew-end .calc-note { margin: 10px 0 0; }
/* 広い画面：① 布を切る の表布と裏布・並べ方の図を、横に2つ並べる（図が小さく見えないように） */
@media (min-width: 900px) {
  .sew-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; gap: 0 20px; align-items: start; }
  .sew-grid > .sz-dotline { grid-column: 1 / -1; }
  .sew-grid > p.sz-note { grid-column: 1; } /* 表布の並べ方の下の一言は、表布の図の下に（裏布の図は右へ） */
  .sew-grid > .sz-piece { margin: 0; }
}
.st-thumb text { display: none; } /* 一覧の小さな図は、文字を出さない（小さすぎて読めないため） */
@media (max-width: 360px) { .sa-ctl .btn { font-size: .9rem; padding-left: 4px; padding-right: 4px; } }
@media (max-width: 360px) { .st-card { grid-template-columns: 72px minmax(0, 1fr); gap: 4px 10px; } }
/* せまい画面（400px より小さい）では、たて・よこ・マチを1列に（数字が切れないように。ボタンは小さくしない。380〜399px で「30.5」が切れていた） */
@media (max-width: 399px) { .row-3 { grid-template-columns: 1fr; } .row-3 > :last-child { grid-column: auto; } }
.sa-wrap { stroke-width: 3.2; }

/* ---- クリスマスブーツの図（bootzu.js）---- */
body.sew { --felt: #d14b3d; --felt-ink: #8f2a20; --felt-w: #fbf8f2; --ribbon: #2f7d52; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.sew { --felt: #b8483c; --felt-ink: #ff9d8f; --felt-w: #e9e4da; --ribbon: #5fbf86; } }
:root[data-theme="dark"] body.sew { --felt: #b8483c; --felt-ink: #ff9d8f; --felt-w: #e9e4da; --ribbon: #5fbf86; }
.bz-felt { fill: var(--felt); stroke: var(--ink); stroke-width: 1.4; }
.bz-clothf { fill: url(#sz-pat-face); stroke: var(--ink); stroke-width: 1.4; }
.bz-behind { opacity: .55; }
.bz-ghost { opacity: .3; }
.bz-cuff { fill: var(--felt-w); stroke: var(--ink); stroke-width: 1.2; }
.bz-boa { fill: var(--felt-w); stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 2 2; }
.bz-sheet { stroke-width: 1.6; }
.bz-part { fill: color-mix(in srgb, var(--surface) 55%, transparent); stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.bz-bl { stroke: var(--felt-w); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.bz-bl-edge { stroke: var(--felt-w); stroke-width: 1.8; fill: none; stroke-linejoin: round; }
/* 縫い目の縁どりは、明るい画面でも暗い画面でも濃い色（白い飾りの上でも白い糸が見えるように） */
.bz-bl-halo { stroke: rgba(48, 30, 24, .78); stroke-width: 3.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bz-ribbon { stroke: var(--ribbon); stroke-width: 4.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bz-pen { stroke: var(--accent); stroke-width: 2.6; fill: none; stroke-linejoin: round; }
.bz-pen-thin { stroke: var(--muted); stroke-width: 1.2; fill: none; stroke-dasharray: 4 3; }
.bz-paper { fill: color-mix(in srgb, var(--accent) 9%, var(--surface)); stroke: none; }
.bz-cup { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent-strong); stroke-width: 1.4; stroke-dasharray: 3 3; }
.bz-cut { stroke: var(--ink); stroke-width: 2.6; fill: none; stroke-linejoin: round; }
.bz-outline { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.bz-mark { fill: var(--accent-strong); stroke: var(--bg); stroke-width: 2; }
.bz-stick { stroke: #b08a55; stroke-width: 5; stroke-linecap: round; }
.bz-lead { margin: 0 0 6px; }
.bz-bl-leg { stroke: var(--ink); stroke-width: 1.8; fill: none; }
.bz-ribbon-in { stroke-dasharray: 3 3; opacity: .75; }
.bz-notch { stroke: var(--accent-strong); stroke-width: 2.6; stroke-linecap: round; }
/* 図を大きく見るボタン・窓の中の図 */
.bz-zoom { display: flex; margin: 8px auto 0; min-height: 44px; font-size: .95rem; }
.sw-zoom .sz-svg { max-width: 520px; }
.bz-notch-big { stroke-width: 3.4; }
/* 縫い方（ミシン／手縫い）の札：② 縫う の見出しの横・縫いながら見る の帯（フェーズ4） */
.sew-mbadge { display: inline-flex; align-items: center; gap: 2px; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
  color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); }
.sew-mbadge.is-hand { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.card-title .sew-mbadge { margin-right: auto; }
.sm-count .sew-mbadge { display: flex; width: max-content; margin-top: 2px; font-size: .75rem; padding: 0 8px; }
.sew-hand-lead { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); border-left: 4px solid var(--accent); line-height: 1.75; }
.field .hint.sew-warn { color: var(--ink); background: color-mix(in srgb, var(--gapc) 22%, var(--surface)); border-radius: 8px; padding: 6px 10px; margin-top: 6px; }
.field .hint.sew-inherit { color: var(--accent-strong); font-weight: 700; }
/* 図：手でかがる（ブランケットステッチ）・手縫いの補強・上履き入れの Dカン */
.sz-blk { stroke: var(--seam); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.sz-seam-b { stroke-dasharray: none; stroke-width: 2.2; }
.uz-dring { fill: none; stroke: var(--dring, #7d838b); stroke-width: 3.2; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.sew { --dring: #c5cad1; } }
:root[data-theme="dark"] body.sew { --dring: #c5cad1; }
.uz-behind { opacity: .6; }

/* ---- ぬいもの図解帳のトップ（index.html。2026-10-30 フェーズ6-2）---- */
.sew-hero .pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.sew-hero h1 { margin: 10px 0 10px; line-height: 1.3; }
.sew-hero .lead { max-width: 34em; }
.sew-hero .sew-flow { margin-top: 14px; }
.tool-card .ic svg { width: 26px; height: 26px; }
.sew-sample { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sew-sample-h { font-weight: 700; margin: 0 0 6px; }
.sew-sample-figs { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .sew-sample-figs { grid-template-columns: 1fr 1fr; align-items: start; } }
.sew-sample-figs .sz-fig { margin: 0; }
.sew-sample-go { margin: 10px 0 0 !important; font-weight: 700; }
.sew-order { list-style: none; counter-reset: so; padding: 0 !important; margin: 0; }
.sew-order li { counter-increment: so; position: relative; padding: 0 0 0 40px; margin: 0 0 14px !important; }
.sew-order li::before { content: counter(so); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.sew-order b { display: block; line-height: 1.6; }
.sew-order span { display: block; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.sew-friend { border-left: 6px solid #d0643a; }
.sew-friend-links { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sew-friend-links li { margin: 0 !important; }
.sew-friend-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--ink); }
@media (hover: hover) { .sew-friend-links a:hover { border-color: #d0643a; } }