/* 使い方ガイド 共通スタイル（新トップの中央枠に埋め込む前提。tw-ui のテーマ・文字サイズに追従） */
:root{
  --bg:#f6f5f1;--card:#fff;--txt:#222;--mute:#777;--line:#e2dfd7;--acc:#e8562a;--kbd:#eee;
  --fs:15px;
}
html[data-theme="dark"]{--bg:#1e1e1e;--card:#2a2a2a;--txt:#e8e5de;--mute:#a09c94;--line:#3d3d3d;--kbd:#3a3a3a}
html[data-fs="s"]{--fs:13.5px}
html[data-fs="l"]{--fs:17px}
*{box-sizing:border-box}
html,body{margin:0}
body{font:var(--fs)/1.8 "Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;color:var(--txt);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.g{max-width:820px;margin:0 auto;padding:36px 40px 60px}
@media (max-width:700px){.g{padding:24px 16px 48px}}

.g-head{padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:34px}
.g-kicker{margin:0;font-size:.82em;letter-spacing:.14em;color:var(--acc);font-weight:700}
.g-head h1{margin:2px 0 10px;font-size:1.9em;line-height:1.3}
.g-lead{margin:0 0 18px;color:var(--mute)}
.g-btn{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;font-weight:700;padding:11px 22px;border-radius:10px}
.g-btn:hover{filter:brightness(1.08)}

.g-sec{margin:0 0 46px}
.g-sec h2{font-size:1.25em;margin:0 0 16px;padding-left:12px;border-left:4px solid var(--acc);line-height:1.4}

.g-can{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.g-can li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.g-can b{display:block;margin-bottom:2px}
.g-can span{color:var(--mute);font-size:.95em}

.g-fig{margin:0 0 14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#1e1e1e}
.g-fig a{display:block}
.g-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
@media (max-width:700px){.g-legend{grid-template-columns:1fr}}
.g-legend li{display:flex;gap:12px;align-items:flex-start}
.g-legend i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;font-style:normal;font-weight:700;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 0 0 1px var(--acc);margin-top:3px}
.g-legend b{display:block}
.g-legend span{color:var(--mute);font-size:.93em}

.g-step{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.g-step:last-child{border-bottom:1px solid var(--line)}
@media (max-width:700px){.g-step{grid-template-columns:1fr}}
.g-step__img{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#1e1e1e}
.g-step__img--tall{max-width:300px}
.g-step__img--sq{max-width:280px}
.g-step__n{margin:0;font-size:.78em;letter-spacing:.14em;color:var(--acc);font-weight:700}
.g-step__body h3{margin:2px 0 8px;font-size:1.15em;line-height:1.4}
.g-step__body p{margin:0 0 8px}
.g-note{color:var(--mute);font-size:.92em;padding-left:12px;border-left:2px solid var(--line)}
kbd{font:inherit;font-size:.85em;background:var(--kbd);border:1px solid var(--line);border-radius:5px;padding:0 6px}

.g-faq{margin:0;display:grid;gap:8px}
.g-faq dt{font-weight:700;background:var(--card);border:1px solid var(--line);border-radius:12px 12px 0 0;padding:12px 16px 6px}
.g-faq dt::before{content:"Q. ";color:var(--acc)}
.g-faq dd{margin:0 0 6px;background:var(--card);border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;padding:0 16px 12px;color:var(--mute)}

.g-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding-top:10px}
.g-link{color:var(--mute);text-decoration:none}
.g-link:hover{color:var(--txt)}

/* ===== 画像の拡大表示（ページ内ライトボックス） ===== */
.g-zoom{cursor:zoom-in}
.g-lightbox{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.86);cursor:zoom-out;padding:16px}
.g-lightbox.on{display:flex}
.g-lightbox img{max-width:min(96vw,1800px);max-height:92vh;width:auto;height:auto;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.g-lightbox__hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#ddd;font-size:.85em}
.g-noscroll{overflow:hidden}

/* ===== 単体で開いたときの上部バー（トップの枠内＝html.tw-embedded では隠す） ===== */
.g-topbar{display:flex;align-items:center;gap:14px;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--card);font-size:.9em}
.g-topbar__home{font-weight:700;text-decoration:none;letter-spacing:.02em}
.g-topbar__home b{color:var(--acc)}
.g-topbar__crumb{color:var(--mute)}
.g-topbar__open{margin-left:auto;text-decoration:none;color:var(--acc);font-weight:700;white-space:nowrap}
html.tw-embedded .g-topbar{display:none}

/* ===== 更新履歴（src/_data/tools.json から） ===== */
.g-changelog{padding-top:0}
.g-changelog h2{font-size:1.1em;margin:0 0 12px;padding-left:12px;border-left:4px solid var(--line);color:var(--mute)}
.g-changelog h2 small{font-weight:400;font-size:.85em;margin-left:8px}
.g-log{margin:0;font-size:.92em}
.g-log dt{display:flex;gap:12px;align-items:baseline;margin-top:8px}
.g-log dt b{font-family:ui-monospace,monospace}
.g-log dt time{color:var(--mute);font-size:.9em}
.g-log dd{margin:0 0 4px;color:var(--mute)}