/* ツールページ(niche / general / scratch 共通) */
main{max-width:var(--w);margin:0 auto;padding:22px 20px 56px}
h1{font-size:clamp(1.55rem,4vw,2.1rem);line-height:1.3;margin:.2em 0 .45em;letter-spacing:-.01em;font-weight:800;border-left:8px solid var(--amber);padding-left:14px}
.lede{color:var(--mute);margin:0 0 1.6em;max-width:40em}
h2{font-size:1.1rem;margin:2.2em 0 .7em;padding-bottom:.35em;border-bottom:2px solid var(--ink)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:760px){.grid{grid-template-columns:1fr}}
/* パネル: 枠+下端の厚み+わずかな影で「物」に見せる */
.card{background:var(--panel);border:1px solid var(--line);border-bottom:3px solid var(--edge);border-radius:6px;padding:22px;box-shadow:0 8px 16px -12px rgba(20,28,36,.45)}
.f{margin:0 0 14px}
.f label{display:block;font-weight:700;font-size:.92rem;margin-bottom:5px}
.row{display:flex;align-items:center;gap:8px}
input,select,textarea{width:100%;font:inherit;font-variant-numeric:tabular-nums;padding:9px 11px;border:1px solid var(--edge);border-top-color:var(--mute);border-radius:4px;background:var(--field);color:var(--ink);box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);background:var(--panel)}
textarea{resize:vertical;line-height:1.6}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--blue)}
.u{min-width:3.2em;color:var(--mute);font-size:.9rem}
/* 計算結果: 計器の表示部 */
.res{background:var(--readout);color:var(--ro-sub);border-color:var(--ro-line);border-bottom-color:#000}
.m{margin:0 0 12px}
.m small{display:block;color:var(--ro-sub);font-size:.85rem}
.m b{font-size:clamp(1.8rem,5vw,2.5rem);font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--ro-ink);word-break:break-all}
.s{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--ro-line);font-variant-numeric:tabular-nums;color:#fff}
.s span:first-child{color:var(--ro-sub)}
.res .err,.res .warn{color:#ff9d94}
.t{margin:0 0 8px;max-height:260px;overflow:auto;padding:9px 11px;border-radius:4px;background:var(--field);border:1px solid var(--line);font:.85rem/1.6 ui-monospace,Menlo,Consolas,monospace;tab-size:9}
.res .t{background:#0f161c;border-color:var(--ro-line);color:#e8ebee}
.sw{min-height:84px;margin:4px 0 12px;border-radius:4px;border:1px solid var(--line)}
.err,.warn{color:var(--bad);font-weight:700;min-height:1.6em;margin:0 0 8px}
/* ボタン: 押せる厚み */
button{font:inherit;font-weight:700;margin-top:12px;padding:9px 18px;border:1px solid #b88a00;border-bottom-width:3px;border-radius:5px;background:var(--amber);color:#1e262d;cursor:pointer}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(2px);border-bottom-width:1px}
button.sub,.b2,.sc button{background:var(--panel);color:var(--ink);border-color:var(--edge)}
@media(prefers-reduced-motion:reduce){button:active{transform:none}}
.fm{list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--plate);border-radius:4px}
.fm li{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem;padding:9px 14px}
.fm li+li{border-top:1px solid var(--line)}
.rel{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.rel a{display:block;padding:7px 13px;border:1px solid var(--line);border-bottom:3px solid var(--edge);border-radius:5px;background:var(--panel);color:var(--ink);text-decoration:none;font-weight:700;font-size:.93rem}
.rel a:hover{border-color:var(--ink);border-bottom-color:var(--amber)}
.stack{display:grid;gap:20px}
.pv{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 14px}
.pv figure{margin:0;max-width:100%}
.pv canvas{display:block;max-width:100%;height:auto;image-rendering:pixelated;border:1px solid var(--line);background:repeating-conic-gradient(#d3dae6 0 25%,#fff 0 50%) 0 0/14px 14px}
.pv.many canvas{max-width:96px}
.pv figcaption{font-size:.8rem;color:var(--mute);word-break:break-all;max-width:260px}
.stack>.card:first-child{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 20px}
.stack>.card:first-child>.f:first-child:has(input[type=file]){grid-column:1/-1}
.b2{margin:4px 8px 0 0;padding:4px 10px;font-size:.82rem}
.hint,.note{color:var(--mute);font-size:.88rem;margin:0 0 12px}
input[type=file]{padding:8px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:.92rem;font-variant-numeric:tabular-nums}
th{background:var(--field);text-align:left}
th,td{border-bottom:1px solid var(--line);padding:6px 9px}
code{background:var(--field);border:1px solid var(--line);padding:1px 5px;border-radius:3px}
canvas{max-width:100%}
/* Scratch系ページの部品(他のツールと同じ部品) */
.sc .card{margin:18px 0}
.sc .card h2{margin:0 0 .8em;padding:0;border:0;font-size:1.05rem}
.sc .row{flex-wrap:wrap;align-items:stretch;gap:12px}
.sc label{display:flex;flex-direction:column;font-weight:700;font-size:.9rem;color:var(--ink);flex:1;min-width:130px}
.sc label input,.sc label select{margin-top:4px;font-weight:400}
.sc .res{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:12px;background:none;border:0;padding:0;box-shadow:none}
.sc .res div{background:var(--readout);border-radius:4px;padding:9px 13px;font-size:.85rem;color:var(--ro-sub)}
.sc .res b{display:block;font-size:1.3rem;color:var(--ro-ink);font-variant-numeric:tabular-nums}
.sc button{margin-top:0;padding:7px 14px}
.sc button.p{background:var(--amber);border-color:#b88a00;color:#1e262d}
.sc td,.sc th{text-align:right}
.sc th:first-child,.sc td:first-child{text-align:left}
.sc canvas{background:var(--field);border:1px solid var(--line);border-radius:4px}
input[type=color]{height:42px;padding:3px;cursor:pointer}
.sc input[type=checkbox]{width:auto}.sc input[type=range]{padding:0}
.sc .res+.note,.sc .res+p{margin-top:12px}
/* Q&A・記事 */
.qa{display:grid;gap:8px}
.qa details{background:var(--panel);border:1px solid var(--line);border-bottom:3px solid var(--edge);border-radius:6px}
.qa summary{cursor:pointer;list-style:none;padding:12px 44px 12px 16px;font-weight:700;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.3rem;line-height:1;color:var(--mute)}
.qa details[open] summary{border-bottom:1px solid var(--line)}
.qa details[open] summary::after{content:"−"}
.qa p{margin:0;padding:12px 16px 14px;max-width:44em}
.art p{max-width:40em;line-height:1.95;margin:0 0 1em}
.art h2:first-child{margin-top:.6em}
.alist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.alist a{display:block;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-bottom:3px solid var(--edge);border-radius:6px;color:var(--ink);text-decoration:none}
.alist a:hover{border-color:var(--ink);border-bottom-color:var(--amber)}
.alist b{display:block}.alist span{display:block;color:var(--mute);font-size:.9rem}