/* 記事の「できあがり」を見せる作例ページ。マニュアル本体と同じ意匠に揃える */
:root {color-scheme:light; --purple:#8e44ad; --soft:#f9f3fc; --ink:#2c3e50; --muted:#64717d; --line:#e9edf1; font-family:'Helvetica Neue',Arial,'Hiragino Sans','Yu Gothic',sans-serif;}
* {box-sizing:border-box;}
body {margin:0 auto; padding:20px; max-width:740px; color:var(--ink); background:#f0f4f8; line-height:1.7;}
button,input,select,textarea {font:inherit;}
button {cursor:pointer;}
a {color:var(--purple); overflow-wrap:anywhere;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {outline:3px solid #9b59b6; outline-offset:3px;}
[hidden] {display:none !important;}

/* 作例であることを、本文より先に必ず読ませる */
.demo-note {background:#fdf6e3; border:2px solid #f0d9a0; border-radius:12px; padding:12px 14px; margin-bottom:16px; font-size:12px; line-height:1.7; color:#7a5c1e;}
.demo-note strong {display:block; font-size:13px; margin-bottom:3px;}
.demo-note a {color:#8a5a00; font-weight:bold;}

.card {background:white; padding:26px 22px; border-radius:15px; box-shadow:0 10px 20px #00000014; margin-bottom:16px;}
h1 {font-size:21px; color:var(--purple); margin:0 0 6px; line-height:1.5;}
.sub {font-size:12px; color:var(--muted); margin:0 0 20px;}
h2 {font-size:16px; color:var(--ink); margin:24px 0 10px; padding-left:10px; border-left:4px solid #9b59b6; line-height:1.5;}
h3 {font-size:14px; color:var(--ink); margin:18px 0 6px;}
p {font-size:14px; margin:0 0 12px;}
ul,ol {margin:0 0 12px; padding-left:20px;}
li {font-size:14px; margin-bottom:5px;}
small {color:var(--muted);}

table {width:100%; border-collapse:collapse; margin:0 0 14px; font-size:13px;}
th,td {border:1px solid var(--line); padding:8px 10px; text-align:left; line-height:1.6; vertical-align:top;}
th {background:var(--soft); color:var(--purple); font-size:12px;}
td.num {text-align:right; font-variant-numeric:tabular-nums;}
.scroll {overflow-x:auto;}

.tag {display:inline-block; font-size:10px; color:var(--purple); border:1px solid #d7bde2; border-radius:6px; padding:1px 6px; margin-right:5px;}
.tip {background:#fef9e7; border-left:5px solid #f39c12; border-radius:12px; padding:12px 14px; margin:16px 0; font-size:13px;}
.ok {color:#157e70; font-weight:bold;}
.ng {color:#c0392b; font-weight:bold;}

.foot {text-align:center; font-size:12px; color:var(--muted); padding:6px 0 20px; line-height:1.9;}