/* ツール用ページ(本文に [stream_tools] か [tool_page_wide] があるページ)だけに効く見た目。body.szt-tool-page の中だけ。
   JIN:R の普通のテンプレートのまま、サイドバーを消して本文を広げる。2.0.0(2026-09-29) */

/* 本文の枠: JIN:R は最大1120px → 1440px。サイドバーは中身を出していないので枠ごと消す */
.szt-tool-page #mainContentInner.t--main-width { max-width: 1440px; }
.szt-tool-page #mainSideBar { display: none !important; }

/* 記事部分: JIN:R は最大740px → 横いっぱい */
.szt-tool-page #jinrArticle,
.szt-tool-page #postContent { width: 100% !important; max-width: none !important; }

/* タイトル・説明文・記事おわりの欄は読みやすい幅(900px)、ツールだけ横いっぱい */
.szt-tool-page #postHeaderInner { max-width: 900px !important; margin-left: auto; margin-right: auto; }
.szt-tool-page #postContent > * { max-width: 900px; margin-left: auto; margin-right: auto; }
.szt-tool-page #postContent > .sk-tabs,
.szt-tool-page #postContent > .sk-app,
.szt-tool-page #postContent > .sm-app,
.szt-tool-page #postContent > .szt-wide { max-width: none; }
.szt-tool-page #jinr-post-end-widget-area,
.szt-tool-page #postTagBox,
.szt-tool-page #postFooter { max-width: 900px; margin-left: auto; margin-right: auto; }

/* ツールのページでは目次を出さない(タブで切り替えるため) */
.szt-tool-page #rtoc-mokuji-wrapper { display: none !important; }

/* スマホなど1列になるとき: 見本(画像だけ)を入力欄の上に小さく固定して、入力しながら雰囲気を見られるようにする。
   保存ボタンや注意書きは入力欄の下に回す。追尾メニューが出ているときはその下に付く(--sk-sticky-top は JS が入れる) */
@container (max-width: 759px) {
  .szt-tool-page .sk-app .sk-preview { display: contents; }
  .szt-tool-page .sk-app .sk-stage {
    order: -1; position: sticky; top: var(--sk-sticky-top, 0px); z-index: 50;
    padding: 6px; margin: 0; background: rgba(255, 255, 255, 0.94); border: 1px solid #e3e0da; border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .szt-tool-page .sk-app .sk-stage canvas { width: auto; max-width: 100%; height: auto; max-height: 24vh; box-shadow: none; border-radius: 6px; }
  .szt-tool-page .sk-app .sk-cap, .szt-tool-page .sk-app .sk-hint, .szt-tool-page .sk-app .sk-actions,
  .szt-tool-page .sk-app .sk-note, .szt-tool-page .sk-app .sk-cta { order: 1; }
  .szt-tool-page .sk-app .sk-cap, .szt-tool-page .sk-app .sk-hint, .szt-tool-page .sk-app .sk-note { text-align: center; }
}