:root { --ink:#202321; --muted:#5c625c; --line:#d9ddd8; --paper:#fdfdfb; --wash:#f3f5f1; --accent:#2f5347; --reading-size:18px; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; line-height:1.85; }
body { margin:0; min-width:320px; }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus-visible { left:1rem; top:1rem; z-index:10; width:auto; height:auto; padding:.5rem .75rem; background:var(--paper); color:var(--ink); border:1px solid var(--ink); }
.frame { width:min(100% - 40px, 700px); margin-inline:auto; }

/* ヘッダー・表示設定 */
.site-header { border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; min-height:58px; font-size:.75rem; color:var(--muted); }
.site-name { margin:0; letter-spacing:.05em; color:var(--ink); font-weight:700; }
.edition { margin:0; text-align:right; }
.reader-bar { display:none; border-bottom:1px solid var(--line); background:var(--wash); }
html.js .reader-bar { display:block; }
.reader-tools { display:flex; align-items:center; gap:.55rem; min-height:46px; font-size:.75rem; color:var(--muted); }
.reader-label { margin-right:.15rem; white-space:nowrap; }
.reader-mark { color:var(--muted); }
.reader-value { min-width:2.1rem; text-align:right; font-variant-numeric:tabular-nums; }
#fontsize { flex:1 1 auto; max-width:16rem; min-width:6rem; height:1.5rem; accent-color:var(--accent); cursor:pointer; }

/* 本文の基本 */
article { padding:2.5rem 0 4rem; font-size:var(--reading-size); }
.article-entry { border-bottom:1px solid var(--line); padding-bottom:2rem; }
.eyebrow,.index { margin:0 0 .5rem; color:var(--accent); font-size:.75rem; font-weight:700; letter-spacing:.1em; }
h1,h2,h3,p,li { overflow-wrap:anywhere; }
h1 { margin:.2rem 0 1.1rem; font-size:clamp(1.75rem,6.6vw,2.5rem); line-height:1.38; letter-spacing:.015em; }
h2 { margin:0; font-size:1.2rem; line-height:1.45; }
h3 { margin:0 0 .45rem; font-size:.95rem; }
p { margin:0 0 1rem; font-size:1em; }
.lead { color:var(--muted); font-size:1em; }
.byline { display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; margin:1.2rem 0 0; color:var(--muted); font-size:.8rem; }
.byline div,.source-list div { display:flex; gap:.5rem; }
dt { font-weight:700; } dd { margin:0; }
section { border-bottom:1px solid var(--line); padding:2.2rem 0; }
section:last-of-type { border-bottom:0; }
.section-heading { display:flex; align-items:baseline; gap:.8rem; margin-bottom:1.15rem; }
.index { min-width:1.6rem; margin:0; }
mark { background:#e7ede7; color:inherit; padding:0 .15em; }
blockquote { margin:1.3rem 0; padding:.2rem 1rem; border-left:2px solid var(--accent); color:var(--muted); } blockquote p { margin:0; }
.caution { margin:1rem 0 0; color:var(--muted); font-size:.9em; }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:.18em; } a:hover { text-decoration-thickness:2px; }

/* 箱もの */
.note { border-left:3px solid var(--accent); background:var(--wash); padding:1rem 1.1rem; }
.note p,.note ul { margin:0; } .note ul { padding-left:1.15rem; } .note li { margin:.35rem 0 0; }
.steps { list-style:none; counter-reset:step; padding:0; margin:0; }
.steps li { counter-increment:step; display:grid; grid-template-columns:2rem 1fr; column-gap:.65rem; padding:1rem 0; border-top:1px solid var(--line); }
.steps li::before { content:"0" counter(step); color:var(--accent); font-size:.8rem; font-weight:700; }
.steps strong,.steps span { grid-column:2; }
.steps span { color:var(--muted); font-size:.92em; }
.placeholder { margin:0; border:1px solid var(--line); background:var(--wash); }
.process-card { margin-top:1.35rem; }
.placeholder-lines { height:100px; display:grid; align-content:center; gap:.8rem; padding:1.3rem; }
.placeholder-lines i { display:block; height:1px; background:#9bad9f; }
.placeholder-lines i:nth-child(1){width:48%}.placeholder-lines i:nth-child(2){width:82%}.placeholder-lines i:nth-child(3){width:66%}
figcaption { padding:1rem 1.1rem; font-size:.85em; line-height:1.7; color:var(--muted); background:var(--paper); }
.two-notes { display:grid; gap:1px; border:1px solid var(--line); background:var(--line); }
.two-notes > div { padding:1.05rem; background:var(--paper); }
.two-notes p { margin:0; color:var(--muted); font-size:.94em; }

/* 依頼文の小窓 */
.prompt-box { margin-top:1.2rem; border:1px solid var(--line); background:var(--wash); }
.prompt-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.7rem .9rem; border-bottom:1px solid var(--line); }
.prompt-label { font-size:.8rem; font-weight:700; color:var(--muted); }
.copy-button { flex:0 0 auto; padding:.42rem .8rem; border:1px solid var(--accent); background:var(--paper); color:var(--accent); font-size:.8rem; font-weight:700; font-family:inherit; line-height:1.4; cursor:pointer; }
.copy-button:hover { background:var(--accent); color:#fff; }
.prompt-body { display:block; width:100%; height:13rem; padding:.9rem; border:0; border-radius:0; background:var(--paper); color:var(--ink); font-family:ui-monospace,SFMono-Regular,"Hiragino Sans","Yu Gothic",monospace; font-size:.9em; line-height:1.75; overflow-y:auto; resize:vertical; }
.copy-status { margin:0; padding:.55rem .9rem; min-height:1.9rem; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }

/* 次回予告・脚部 */
.next { margin-top:2.5rem; border:1px solid var(--line); padding:1.5rem; background:var(--wash); }
.next .section-heading { margin-bottom:.9rem; }
.next-note { color:var(--muted); font-size:.94em; }
.button-link { display:inline-flex; gap:.7rem; align-items:center; padding:.6rem .8rem; border:1px solid currentColor; font-size:.9rem; font-weight:700; text-decoration:none; }
.button-link:hover { background:var(--accent); color:#fff; }
.site-footer { border-top:1px solid var(--line); margin-top:3rem; padding:1.8rem 0 2.4rem; color:var(--muted); font-size:.8rem; }
.footer-title { margin:0 0 .9rem; font-size:.8rem; letter-spacing:.1em; color:var(--accent); }
.source-list { display:grid; gap:.55rem; margin:0 0 1rem; }
.source-list dt { min-width:5.1rem; } .source-list dd { overflow-wrap:anywhere; }
.footer-note { margin:0; line-height:1.8; }

:focus-visible { outline:3px solid #a85f00; outline-offset:3px; }
@media (min-width: 720px) {
  .frame { width:min(100% - 96px, 700px); }
  article { padding-top:3.4rem; }
  .two-notes { grid-template-columns:1fr 1fr; }
  .prompt-body { height:15rem; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }

/* 記事本文用の追記 */
.fit-notes { margin-top:1.3rem; }
.fit-notes h3 { color:var(--accent); }
.source-list dt:empty { min-height:1px; }
.footer-note + .footer-note { margin-top:.9rem; }

/* 縦幅圧縮（スマホのスクロール回数を減らす） */
article { padding:1.9rem 0 2.6rem; }
section { padding:1.5rem 0; }
.section-heading { margin-bottom:.75rem; }
p { margin:0 0 .75rem; }
.article-entry { padding-bottom:1.4rem; }
h1 { margin:.2rem 0 .8rem; }
.steps li { padding:.7rem 0; }
.note { padding:.85rem 1rem; }
.note li { margin:.25rem 0 0; }
.two-notes > div { padding:.9rem; }
.fit-notes { margin-top:1rem; }
.next { margin-top:1.8rem; padding:1.2rem; }
.diagram { margin:1.1rem 0 !important; }
.diagram figcaption { padding:.6rem 0 0; font-size:.8em; }
.site-footer { margin-top:2rem; padding:1.4rem 0 1.9rem; }
@media (min-width: 720px) { article { padding-top:2.4rem; } }

/* 記事末尾の導線 */
.page-nav { display:flex; gap:1.4rem; align-items:center; margin:2.2rem auto 0; padding-top:1rem; border-top:1px solid var(--line); font-size:.8rem; }
.page-nav a { color:var(--muted); text-decoration:none; }
.page-nav a:hover { color:var(--accent); text-decoration:underline; }
.site-name a { color:inherit; text-decoration:none; }
.site-name a:hover { text-decoration:underline; }