@charset "UTF-8";
/* =========================================================
   tools.css — 記事の中の道具（移行のあとに足したもの）

   クロスヘアのコードのコピーと見本・クロスヘア生成ツール・感度の計算・記事の図。
   もとは content.css の 16〜21 節で、節の番号と並びはそのまま（2026-10-12 に移した）。

   SWELL の表示（元テーマのCSSだけを読む）でも、道具のあるページだけこれを読む
   （なべちゃんの回答。manage の tasks/nabe/done/manage_swell-fps-tools-css.md。
   道具は元テーマに無い部品なので「元に戻す」の対象外で、使える形を保つ）。
   そのため本文の入れ物は :is(.entry-content, .post_content) で受ける。移行後の本文は
   両方のクラスを持つので、当たる要素と優先度は content.css にあったときと同じ。
   読むのは layout.php（移行後の表示は content.css の直後、SWELL は道具のあるページだけ）。
   色・字体・動きの変数（--c-*・--f-mono・--ease）は tokens.css にあり、SWELL の表示でも
   道具のあるページでは一緒に読む。
   ========================================================= */

/* =========================================================
   16. コードのコピーと、クロスヘアの見本
   ---------------------------------------------------------
   クロスヘアコードは、読者が VALORANT の「プロファイルコードを
   インポート」へそのまま貼り付けるもの。長いもので 249 文字あり、
   手で選択させるのは酷なので、コピーボタンを置く。

   コードの下には見本（.n-xh）も置く。生成ツールのリアルタイム
   プレビューと同じ描きかたで、文言は添えない（2026-09-21、なべちゃん）。

   **本文のコードは、ボタンをそれぞれの枠の中の右上に置く**
   （2026-10-02、なべちゃんの指示）。「コピー」はコードの枠（.n-code）、
   「編集」（生成ツールへコードを渡すリンク。2026-10-12 までの「クロスヘアを調整」）は見本の枠
   （.n-xh-stage）。枠の下に並べていたころ、コードの箱と見本が押されて
   何も起きない（Clarity のデッドクリック）が多かった。
   **表のセル（.n-copy--inline）は見本の下に並べたまま**（枠が狭く、
   中に置くとコードと見本を覆う。同じ日のなべちゃんの判断）。

   **ボタンを <pre> の中に入れないこと。** <pre> は overflow-x: auto の
   スクロール領域で、中に絶対配置すると、横に送ったときにボタンが流れて
   消える（コードの枠は 2026-10-02 から折り返すので横には送らないが、
   作りは変えない）。.n-code で <pre> を包んでボタンを <pre> の横に並べ、
   包みの地を <pre> と同じ色にして1つの枠に見せる。

   **押したあとの字（「コピーしました」など）でコードを押さない**
   （2026-10-05、なべちゃんの判断で案B）。字が伸びるとボタンの列が広がり、
   コードの折れ目が2秒だけ動いていた（スマホでは 9 行が 12 行に伸びた）。
   PC はボタンの列の幅を押した瞬間の幅で留め（main.js の initCodeCopy()）、
   伸びた字は左へはみ出してコードの1行目の端に重ねる。600px 以下は
   ボタンを枠の一番上の行に置き、コードを全幅にする。

   箱を出すのは app/inc/content.php の add_code_copy()、見本を描くのは
   main.js の initCrosshairSamples()、押したときの動きは initCodeCopy()。
   ========================================================= */

/* --- コードの枠（本文）---
   ボタンの上端は、コードの1行目と中心が揃う位置
   （<pre> の上の余白 20px ＋ 行の高さ 25.2px の半分 − ボタンの高さ 31px の半分）。 */
:is(.entry-content, .post_content) .n-code {
  display: flex;
  align-items: flex-start;
  background: var(--c-bg-inv);
}

/* 長いコードは折り返して全体を見せる。横に送らせない（2026-10-02、なべちゃんの指示）。
   コードに空白が無いので、折る場所は content.php の code_wrap_points() が「;」の
   後ろに足す <wbr>（2026-10-05、なべちゃんの判断。値の途中で折らない）。
   overflow-wrap: anywhere は、「;」の間だけで1行に収まらないときの備え。
   折り返しは見た目だけで、コピーする文字列（code.textContent）は変わらない。 */
:is(.entry-content, .post_content) .n-code > pre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;

  /* ここから下はコードの地と字。値は style.css の 10 節の .entry-content pre・pre code と同じ（片方だけ変えない）。
     SWELL の表示は style.css を読まないので、元テーマの淡いコードの枠のまま黒い .n-code の中に入り、
     字が地に沈んで読めない（2026-10-12、手元で撮って見た）。そのためコードの枠の中だけに同じ値を当てる */
  padding: 20px 22px;
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: 1.8;
}

:is(.entry-content, .post_content) .n-code > pre code {
  padding: 0;
  background: none;
  border: none;
  color: inherit;
}

/* 押したあとの伸びた字は左へはみ出させ、コードの上に描く（上の「押したあとの字」） */
:is(.entry-content, .post_content) .n-code > .n-copy {
  flex: none;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 17px 16px 0 0;
}

:is(.entry-content, .post_content) .n-code > .n-copy > .n-copy__btn {
  flex: none;
  white-space: nowrap;
}

/* --- 見本の枠（本文）---
   コードの枠と離すと「別のもの」に見えるので、.entry-content > * + * の
   1.6em を打ち消して詰める。 */
:is(.entry-content, .post_content) .n-xh-stage {
  position: relative;
  margin-top: 6px;
}

:is(.entry-content, .post_content) .n-xh-stage > .n-copy__btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* --- 表のセルの中 ---
   幅が 119px しかない列に入るので、見本の下に左寄せで並べる */
:is(.entry-content, .post_content) .n-copy--inline {
  display: block;
  margin-top: 6px;
}

:is(.entry-content, .post_content) .n-copy__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

:is(.entry-content, .post_content) .n-copy__btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--c-text-sub);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}

:is(.entry-content, .post_content) .n-copy__btn:hover {
  border-color: var(--c-line-str);
  color: var(--c-text);
}

/* 「編集」は塗りで出し、コピーと区別する。
   .entry-content a の下線と色に負けないよう、ここで明示する */
:is(.entry-content, .post_content) .n-copy__btn--edit {
  border-color: var(--c-text);
  background: var(--c-text);
  color: var(--c-bg);
}

:is(.entry-content, .post_content) .n-copy__btn--edit:hover {
  border-color: var(--c-text);
  background: var(--c-bg);
  color: var(--c-text);
}

/* 見本の枠の中では白の塗りで固定する（2026-10-02、なべちゃんの判断）。
   見本はどのモードでも暗い面で、ライトの黒い塗り（var(--c-text)）だと
   ボタンの輪郭が見本に溶ける。hover は見本の地に白い枠線へ反転。 */
:is(.entry-content, .post_content) .n-xh-stage > .n-copy__btn--edit {
  border-color: #fff;
  background: #fff;
  color: #111;
}

:is(.entry-content, .post_content) .n-xh-stage > .n-copy__btn--edit:hover {
  border-color: #fff;
  background: #18232c;
  color: #fff;
}

/* --- 見本 ---
   生成ツールの vcg-stage と同じ暗い面に、同じ部品（線4本とドット）を
   同じ CSS 変数で置く。中心 0×0 の箱（.n-xh__reticle）を基準に、
   線はオフセットぶん離して並べ、拡大は transform で掛ける（main.js）。
   暗い面なのでダークモードでも変えない。 */
:is(.entry-content, .post_content) .n-xh {
  display: block;
  position: relative;
  height: 120px;
  overflow: hidden;
  background: #18232c;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 8px 8px;
}

:is(.entry-content, .post_content) .n-copy--inline .n-xh {
  height: 96px;
}

:is(.entry-content, .post_content) .n-xh__reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-origin: center;
}

:is(.entry-content, .post_content) .n-xh__line,
:is(.entry-content, .post_content) .n-xh__dot {
  position: absolute;
  display: block;
  background: var(--color);
  box-shadow: 0 0 0 var(--outline) rgba(0, 0, 0, var(--outline-opacity));
}

:is(.entry-content, .post_content) .n-xh__line--left   { right: var(--gap);  top: calc(var(--thick) / -2); }
:is(.entry-content, .post_content) .n-xh__line--right  { left: var(--gap);   top: calc(var(--thick) / -2); }
:is(.entry-content, .post_content) .n-xh__line--top    { bottom: var(--gap); left: calc(var(--thick) / -2); }
:is(.entry-content, .post_content) .n-xh__line--bottom { top: var(--gap);    left: calc(var(--thick) / -2); }

:is(.entry-content, .post_content) .n-xh__dot {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* スマートフォンでは枠の中の左上へ寄せる（2026-10-02、なべちゃんの判断）。
   **右上のままだと押せないことがある。** ページトップボタン（#pagetop）と
   目次ボタン（#tocfab）が右下に 46x46 で固定されており、1カラムになる幅では
   本文の右端と重なる。枠の下の右に置いていたころの実測で、ボタンが画面に
   収まるスクロール位置のうち 19% で重なり、最悪はボタン全面が隠れて
   「TOP」のほうが押された。 */
@media (max-width: 600px) {
  /* ボタンは枠の一番上の行に置き、コードを全幅にする（上の「押したあとの字」） */
  :is(.entry-content, .post_content) .n-code {
    flex-wrap: wrap;
  }

  :is(.entry-content, .post_content) .n-code > .n-copy {
    order: -1;
    flex: 1 0 100%;
    justify-content: flex-start;
    padding: 10px 0 0 10px;
  }

  :is(.entry-content, .post_content) .n-code > pre {
    padding-top: 12px;
  }

  :is(.entry-content, .post_content) .n-xh-stage > .n-copy__btn {
    right: auto;
    left: 10px;
  }

  /* 指で押す大きさにする。14px の文字に padding 4px だと高さ 31px で、
     目安（Apple 44pt / Google 48dp）に届かない。上下の余白だけ増やす
     （文字を大きくすると本文の中で浮く）。 */
  :is(.entry-content, .post_content) .n-copy__btn {
    padding: 10px 14px;
  }
}

/* コードブロックはページと明暗が逆の面。既定の ::selection は
   背景が var(--c-text) で、<pre> の背景 var(--c-bg-inv) とほぼ同色
   （明 #111111 対 #0f0f0f、暗 #ededed 対 #fafafa）になり、選んでも
   見た目が変わらない。ここだけ入れ替える。

   クリップボードが使えない環境では「選択する」のが最後の手段なので、
   選択が見えないと何も起きていないように映る。

   **SWELL の表示で旧プラグインのコードブロック（.code-block-wrapper。地は淡いミント色）には当てない**
   （2026-10-12。当てると選んだ地が白に近い色になり、ミント色の上で選んだことが見えなかった）。
   移行後の表示には .code-block-wrapper が無いので、当たり方は変わらない。 */
:is(.entry-content, .post_content) pre:not(.code-block-wrapper > pre)::selection,
:is(.entry-content, .post_content) pre:not(.code-block-wrapper > pre) ::selection {
  background: var(--c-text-inv);
  color: var(--c-bg-inv);
}

/* =========================================================
   17. VALORANT クロスヘアコード生成ツール
   ---------------------------------------------------------
   記事内のツールは、元データに 7〜10px の文字と細い range が
   インライン指定されている。本文として読める大きさと操作領域へ
   揃え、暗いコード欄では選択範囲を明るく見せる。

   5サイト共通CSSだが、#vcg-app の内側だけに効く。
   ========================================================= */
:is(.entry-content, .post_content) #vcg-app {
  --vcg-red: #d21f3c;
  --vcg-muted: #46545b;
}

:is(.entry-content, .post_content) #vcg-app .vcg-card {
  min-width: 0;
}

:is(.entry-content, .post_content) #vcg-app .vcg-panel-title {
  font-size: 22px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-count,
:is(.entry-content, .post_content) #vcg-app .vcg-unsaved,
:is(.entry-content, .post_content) #vcg-app .vcg-code-valid {
  color: #46545b;
  font-size: 14px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-section-note {
  color: #46545b;
  font-size: 14px;
  line-height: 1.7;
}

:is(.entry-content, .post_content) #vcg-app .vcg-filter button,
:is(.entry-content, .post_content) #vcg-app .vcg-profile-tabs button {
  color: #46545b;
  font-size: 14px;
  min-height: 44px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-filter button {
  min-width: 70px;
  padding: 9px 13px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-search input {
  color: var(--vcg-ink);
  font-size: 16px;
  height: 44px;
  padding-left: 13px;
}

/* 案内文字（「名前で検索」）は色の指定が無く、ブラウザ既定の色（Chrome で #757575 相当）で
   地の #f8f6f1 に対して 4.26 しかなかった（基準 4.5。2026-09-24 に bg-contrast.sh で実測）。
   上の小さい文字と同じ色にする（7.26）。 */
:is(.entry-content, .post_content) #vcg-app .vcg-search input::placeholder {
  color: #46545b;
}

:is(.entry-content, .post_content) #vcg-app .vcg-search i {
  right: 14px;
  top: 14px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-preset {
  grid-template-columns: 76px 1fr;
  min-height: 88px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-preset__copy {
  padding: 13px 11px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-preset__copy span {
  color: #b81731;
  font-size: 12px;
  letter-spacing: .02em;   /* 0.1em だと PC の 3 列で「PRO / CREATOR」が 2 行に折れ、その段だけカードが高くなる */
}

:is(.entry-content, .post_content) #vcg-app .vcg-preset__copy strong {
  font-size: 14px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-preset__copy small {
  color: #46545b;
  font-size: 14px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-pager button {
  color: #46545b;
  font-size: 14px;
  height: 40px;
  min-width: 40px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-accordion summary {
  font-size: 16px;
  min-height: 52px;
  padding: 17px 2px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-accordion summary b {
  color: #b81731;
  font-size: 12px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-control-title {
  color: #46545b;
  font-size: 14px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-control-grid {
  gap: 20px 24px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-control__top label,
:is(.entry-content, .post_content) #vcg-app .vcg-toggle-label {
  color: #344249;
  font-size: 14px;
  line-height: 1.5;
}

:is(.entry-content, .post_content) #vcg-app .vcg-control__value {
  font-size: 16px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-control select {
  font-size: 16px;
  height: 44px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-color-row input[type="color"] {
  height: 44px;
  width: 48px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-toggle-control {
  min-height: 44px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-switch {
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-switch span {
  height: 24px;
  width: 42px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-switch span::after {
  height: 18px;
  left: 3px;
  top: 3px;
  width: 18px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-switch input:checked + span::after {
  transform: translateX(18px);
}

:is(.entry-content, .post_content) #vcg-app input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 34px;
  margin-top: 4px;
}

:is(.entry-content, .post_content) #vcg-app input[type="range"]::-webkit-slider-runnable-track {
  background: #b9c1c5;
  border-radius: 4px;
  height: 8px;
}

:is(.entry-content, .post_content) #vcg-app input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--vcg-red);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #9da8ad, 0 2px 5px rgba(16, 24, 32, .25);
  height: 22px;
  margin-top: -7px;
  width: 22px;
}

:is(.entry-content, .post_content) #vcg-app input[type="range"]::-moz-range-track {
  background: #b9c1c5;
  border-radius: 4px;
  height: 8px;
}

:is(.entry-content, .post_content) #vcg-app input[type="range"]::-moz-range-thumb {
  background: var(--vcg-red);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #9da8ad, 0 2px 5px rgba(16, 24, 32, .25);
  height: 16px;
  width: 16px;
}

:is(.entry-content, .post_content) #vcg-app input[type="range"]:focus-visible {
  outline: 3px solid rgba(210, 31, 60, .32);
  outline-offset: 2px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-code-label {
  color: #46545b;
  font-size: 14px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-code textarea {
  caret-color: #fff;
  font-size: 16px;
  line-height: 1.7;
  min-height: 160px;
  padding: 18px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-code textarea::selection {
  background: #9dfaf4;
  color: #101820;
}

:is(.entry-content, .post_content) #vcg-app .vcg-code textarea::-moz-selection {
  background: #9dfaf4;
  color: #101820;
}

:is(.entry-content, .post_content) #vcg-app .vcg-button {
  font-size: 14px;
  min-height: 48px;
  padding: 0 17px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-code-message {
  color: #46545b;
  font-size: 14px;
  line-height: 1.7;
}

:is(.entry-content, .post_content) #vcg-app .vcg-tip {
  padding: 15px 16px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-tip > span {
  color: #46545b;
  font-size: 13px;
  height: 24px;
  width: 24px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-tip p {
  color: #46545b;
  font-size: 14px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-tip strong {
  font-size: 14px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-live-label {
  color: #46545b;
  font-size: 12px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-segmented button {
  color: #46545b;
  font-size: 12px;
  min-height: 28px;
  min-width: 30px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-current-summary strong {
  font-size: 13px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-current-summary small {
  color: #46545b;
  font-size: 12px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-preview-actions button {
  color: #344249;
  font-size: 12px;
}

/* 拡大プレビュー（⛶ で開く窓。最大 560px で、小さな枠の例外に当たらない）。20 節の 12px・9px のままだった
   （開くまで隠れているので、2026-09-29 の見直しの測定に出なかった） */
:is(.entry-content, .post_content) #vcg-app .vcg-preview-modal__head strong {
  font-size: 16px;
}

:is(.entry-content, .post_content) #vcg-app .vcg-preview-modal__window > p {
  color: #46545b;   /* 20 節の #68747a は地の #f8f6f1 に対して 4.45（基準 4.5）。上の小さい文字と同じ色にする */
  font-size: 14px;
}

:is(.entry-content, .post_content) #vcg-app button:focus-visible,
:is(.entry-content, .post_content) #vcg-app input:focus-visible,
:is(.entry-content, .post_content) #vcg-app select:focus-visible,
:is(.entry-content, .post_content) #vcg-app textarea:focus-visible,
:is(.entry-content, .post_content) #vcg-app summary:focus-visible {
  outline: 3px solid rgba(210, 31, 60, .32);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  :is(.entry-content, .post_content) #vcg-app .vcg-panel-title {
    font-size: 20px;
  }

  /* 5つを1行に並べると、幅 390 で1枠の中身が 51px しかなく、直す前の 11px でも「ストリーマー」（63px）がはみ出していた。
     14px では 80px（全角 6 字ぶんの書体なら 84px）。文字を小さくせず、3つと2つの2行に並べる。
     区切りの線は、隙間から覗く線の色で引く（2026-09-29 に測った） */
  :is(.entry-content, .post_content) #vcg-app .vcg-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--vcg-line);
  }

  :is(.entry-content, .post_content) #vcg-app .vcg-filter button {
    flex: 1 0 30%;
    border-left: 0;
    background: #fff;
    font-size: 14px;
    min-width: 0;
    padding-inline: 3px;
  }

  :is(.entry-content, .post_content) #vcg-app .vcg-control-grid {
    gap: 18px;
  }
}

/* 3 列の枠の中身は幅 390 で 90px・375 で 85px・361 で 80px。「ストリーマー」の 80〜84px が入らない 374px 以下は 2 列にする */
@media (max-width: 374px) {
  :is(.entry-content, .post_content) #vcg-app .vcg-filter button {
    flex-basis: 45%;
  }
}

/* =========================================================
   18. クロスヘア生成ツールのプレビューを目次の下へ寄せる
   ---------------------------------------------------------
   サイドバーが横に並ぶ 1025px 以上でだけ、ツールの中央上部に
   あったプレビューを、追従する目次の下へ置いて一緒に追従させる。
   設定を触っている手元とプレビューが縦に離れないようにするため。
   狭い幅は今までどおりツールの中で追従する（サイドバーが下へ回る）。

   DOM は動かさない。ツール本体の JS が #vcg-app の中しか見ておらず、
   プレビューをサイドバーへ移すと形が描けなくなる。置き場所だけを
   position: fixed で移し、座標は main.js の initCrosshairRail が
   測って CSS 変数で渡す。
   ========================================================= */
@media (min-width: 1025px) {
  :is(.entry-content, .post_content) #vcg-app.vcg-app--rail .vcg-preview-panel {
    position: fixed;
    top: var(--vcg-rail-top, 104px);
    left: var(--vcg-rail-left, 0);
    width: var(--vcg-rail-width, 320px);
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease;
  }

  /* ツールが画面に入っているあいだだけ出す */
  :is(.entry-content, .post_content) #vcg-app.vcg-app--rail-on .vcg-preview-panel {
    opacity: 1;
    visibility: visible;
  }

  /* 横 132px の枠から、サイドバーの幅いっぱいの枠へ組み替える */
  :is(.entry-content, .post_content) #vcg-app.vcg-app--rail .vcg-stage {
    height: 190px;
  }

  :is(.entry-content, .post_content) #vcg-app.vcg-app--rail .vcg-preview-meta {
    gap: 8px;
    padding: 10px 12px 12px;
  }

  /* 拡大ボタンは横の余りへ広げる（移動の挙動のボタンが出たときは分け合う） */
  :is(.entry-content, .post_content) #vcg-app.vcg-app--rail .vcg-preview-actions button {
    height: 40px;
  }

  :is(.entry-content, .post_content) #vcg-app.vcg-app--rail .vcg-preview-actions button:last-child {
    flex: 1;
    width: auto;
  }
}

/* サイドバーが下へ回る 1024px 以下は、プレビューをツールの上に1列で置く。
   ツール側の分岐（コンテナ幅 980px）では 1021〜1024px だけ2列のままになり、
   本体が 570px ほどに潰れてプリセットの名前が折り返す（実測）。 */
@media (max-width: 1024px) {
  :is(.entry-content, .post_content) #vcg-app .vcg-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.entry-content, .post_content) #vcg-app .vcg-preview-panel {
    justify-self: center;
    width: min(369px, 100%);
  }
}

/* =========================================================
   19. 感度の計算ツール（FPSマウスの eDPI・振り向き／VALORANT⇔CS2。2026-09-25）
   ---------------------------------------------------------
   旧 WordPress の Calculated Fields Form の置き換え。HTML は記事本文、計算は main.js の initSensCalc()。
   reset.css が input の appearance を消しているので、ラジオボタンだけ戻す（消えたままだと選べない見た目になる）。
   ========================================================= */
:is(.entry-content, .post_content) .n-calc {
  display: grid;
  gap: 18px;
}

:is(.entry-content, .post_content) .n-calc__field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

:is(.entry-content, .post_content) .n-calc__label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
}

:is(.entry-content, .post_content) .n-calc__choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 15px;
  cursor: pointer;
}

:is(.entry-content, .post_content) .n-calc__choice input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  appearance: auto;
  accent-color: var(--c-accent);
  cursor: pointer;
}

/* 16px 未満にすると、iPhone の Safari が入力のたびに画面を拡大する */
:is(.entry-content, .post_content) .n-calc__input {
  width: 100%;
  max-width: 240px;
  padding: 10px 12px;
  border: 1px solid var(--c-line-str);
  background: var(--c-bg);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

:is(.entry-content, .post_content) .n-calc__input:focus {
  outline: none;
}

:is(.entry-content, .post_content) .n-calc__input:focus-visible,
:is(.entry-content, .post_content) .n-calc__choice input:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

:is(.entry-content, .post_content) .n-calc__results {
  margin: 0;
  border-top: 1px solid var(--c-line);
}

:is(.entry-content, .post_content) .n-calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
}

:is(.entry-content, .post_content) .n-calc__row dt {
  min-width: 0;
  font-size: 14px;
}

:is(.entry-content, .post_content) .n-calc__row dd {
  flex: none;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

:is(.entry-content, .post_content) .n-calc__row--main dt {
  font-weight: 700;
}

:is(.entry-content, .post_content) .n-calc__row--main dd {
  font-size: 22px;
}

/* =========================================================
   21. 記事の図（イメージ図。2026-10-07）
   ---------------------------------------------------------
   仕組み・流れ・違い・手順を、画像を使わず HTML の箱と矢印で描く部品（なべちゃんの選択「サイトの CSS に図の部品」。
   形の手本は web-dev-tips の /what-is-web-development の図。Lism CSS は読まない）。書き方は writing-principle/seo_writing.md の「イメージ図」。
   図（.n-fig）の幅で切り替える：480px 以上は .n-fig__row を横に並べ、矢印も横向き。狭いと縦に積み、矢印は下向き。
   箱の色は青・緑・橙と既定の灰の4つ（ライトとダークの両方に書く）。色だけで区別させず、箱ごとに名前を書く。
   矢印と番号は CSS が描く飾りで、読み上げには出さない（content の「/ ""」。読めないブラウザは前の行の値を使う）。
   20 節を末尾に置くため、この節は 20 節の前に置く。
   ========================================================= */
:is(.entry-content, .post_content) .n-fig {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.7;
}

:is(.entry-content, .post_content) .n-fig p {
  margin: 0;
}

:is(.entry-content, .post_content) .n-fig > figcaption {
  margin-top: 0;
}

/* 横並び（狭い図では縦に積む） */
:is(.entry-content, .post_content) .n-fig__row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 縦の並び（題・説明・流れを1列にまとめる） */
:is(.entry-content, .post_content) .n-fig__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 縦の流れ（箱と箱のあいだに ▼ を出す） */
:is(.entry-content, .post_content) .n-fig__flow {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

:is(.entry-content, .post_content) .n-fig__flow > * + * {
  position: relative;
}

:is(.entry-content, .post_content) .n-fig__flow > * + *::before {
  content: "▼";
  content: "▼" / "";
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text-sub);
}

/* 箱 */
:is(.entry-content, .post_content) .n-fig__box {
  --fig-bg: var(--c-bg-sub);
  --fig-line: var(--c-line);
  --fig-key: var(--c-text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--fig-line);
  border-radius: 6px;
  background: var(--fig-bg);
  color: var(--c-text-body);
}

:is(.entry-content, .post_content) .n-fig__box--blue   { --fig-bg: #eef3fd; --fig-line: #a9c0ee; --fig-key: #1f4fae; }
:is(.entry-content, .post_content) .n-fig__box--green  { --fig-bg: #ecf6ef; --fig-line: #9ccfac; --fig-key: #1c6b38; }
:is(.entry-content, .post_content) .n-fig__box--orange { --fig-bg: #fcf2e8; --fig-line: #e6bb90; --fig-key: #94450c; }

:root[data-theme="dark"] :is(.entry-content, .post_content) .n-fig__box--blue   { --fig-bg: #131c2e; --fig-line: #33518c; --fig-key: #9bbaff; }
:root[data-theme="dark"] :is(.entry-content, .post_content) .n-fig__box--green  { --fig-bg: #11241a; --fig-line: #2e6a47; --fig-key: #86d9a6; }
:root[data-theme="dark"] :is(.entry-content, .post_content) .n-fig__box--orange { --fig-bg: #2a1d10; --fig-line: #85592c; --fig-key: #f2b47c; }

/* 題（箱の中の文字より大きく）・札（箱の中の小さな名前）・注（補足） */
:is(.entry-content, .post_content) .n-fig__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--fig-key, var(--c-text));
}

:is(.entry-content, .post_content) .n-fig__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--fig-key, var(--c-text));
}

:is(.entry-content, .post_content) .n-fig__note {
  font-size: 14px;
  color: var(--c-text-sub);
}

/* 矢印（文字を添えるときは中に書く。下に出る） */
:is(.entry-content, .post_content) .n-fig__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text-sub);
  text-align: center;
}

:is(.entry-content, .post_content) .n-fig__arrow::before {
  content: "▼";
  content: "▼" / "";
  font-size: 16px;
}

:is(.entry-content, .post_content) .n-fig__arrow--back::before {
  content: "▲";
  content: "▲" / "";
}

/* 行きと帰りの矢印を組にする（狭い図では横に並べ、広い図では縦に重ねる） */
:is(.entry-content, .post_content) .n-fig__arrows {
  display: flex;
  justify-content: center;
  gap: 24px;
}

/* 手順（番号付き） */
:is(.entry-content, .post_content) ol.n-fig__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: n-fig-step;
}

:is(.entry-content, .post_content) ol.n-fig__steps > li {
  position: relative;
  margin: 0;
  padding-left: 58px;
  counter-increment: n-fig-step;
}

:is(.entry-content, .post_content) ol.n-fig__steps > li::before {
  content: counter(n-fig-step);
  content: counter(n-fig-step) / "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--fig-line, var(--c-line));
  border-radius: 50%;
  background: var(--c-bg);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-text);
}

/* 例の札（丸い枠の語を並べる） */
:is(.entry-content, .post_content) ul.n-fig__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

:is(.entry-content, .post_content) ul.n-fig__tags > li {
  margin: 0;
  padding: 2px 12px;
  border: 1px solid var(--fig-line, var(--c-line));
  border-radius: 999px;
  background: var(--c-bg);
  font-size: 14px;
}

:is(.entry-content, .post_content) ul.n-fig__tags > li::before {
  content: none;
}

@container (min-width: 480px) {
  :is(.entry-content, .post_content) .n-fig__row {
    flex-direction: row;
    align-items: stretch;
  }

  :is(.entry-content, .post_content) .n-fig__row > :not(.n-fig__arrow, .n-fig__arrows) {
    flex: 1 1 0;
    min-width: 0;
  }

  :is(.entry-content, .post_content) .n-fig__row > .n-fig__arrows {
    flex-direction: column;
    gap: 16px;
  }

  :is(.entry-content, .post_content) .n-fig__row > .n-fig__arrow::before,
  :is(.entry-content, .post_content) .n-fig__row > .n-fig__arrows > .n-fig__arrow::before {
    content: "━━▶";
    content: "━━▶" / "";
  }

  :is(.entry-content, .post_content) .n-fig__row > .n-fig__arrow--back::before,
  :is(.entry-content, .post_content) .n-fig__row > .n-fig__arrows > .n-fig__arrow--back::before {
    content: "◀━━";
    content: "◀━━" / "";
  }
}

/* =========================================================
   20. クロスヘア生成ツール（FPSマウスの /valorant-crosshair-generator/。2026-09-28）
   ---------------------------------------------------------
   記事本文の <div> の中に置いていた <style> を移したもの（<style> は <div> の中に置けず、HTML の検査でエラーになる）。
   中身は移す前と同じで、どれも #vcg-app の中にしか効かない。追従プレビューの置き場所は 18 節、振る舞いは記事本文の JS。
   もとは本文（content.css より後）にあったので、この節は末尾に置く。前へ動かすと 18 節との優先順が変わる。
   ========================================================= */
#vcg-app {
  --vcg-ink: #101820;
  --vcg-ink-2: #17232d;
  --vcg-paper: #ece8df;
  --vcg-paper-2: #f7f4ed;
  --vcg-line: #d7d2c8;
  --vcg-red: #ff4655;
  --vcg-cyan: #48e6df;
  --vcg-muted: #6d777d;
  --vcg-radius: 4px;
  --vcg-sticky-offset: calc(var(--swl-fix_headerH, 70px) + var(--swl-adminbarH, 0px) + 8px);
  color: var(--vcg-ink);
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  isolation: isolate;
  margin: 0 auto;
  max-width: 1280px;
  text-align: left;
}
#vcg-app, #vcg-app * { box-sizing: border-box; }
#vcg-app.is-preview-open { position: relative; z-index: 1000000; }
#vcg-app button, #vcg-app input, #vcg-app select, #vcg-app textarea { font: inherit; }
#vcg-app button { margin: 0; }
#vcg-app .vcg-shell {
  background: var(--vcg-paper);
  border: 1px solid #cfc9bd;
  box-shadow: 0 24px 70px rgba(16, 24, 32, .14);
  container-name: vcg-shell;
  container-type: inline-size;
  overflow: visible;
  position: relative;
}
#vcg-app .vcg-shell::before {
  background-image: linear-gradient(rgba(16,24,32,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(16,24,32,.025) 1px, transparent 1px);
  background-size: 24px 24px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
#vcg-app .vcg-unsaved i, #vcg-app .vcg-code-valid i { background: var(--vcg-cyan); border-radius: 50%; box-shadow: 0 0 0 4px rgba(72,230,223,.12); height: 6px; width: 6px; }
#vcg-app .vcg-workspace {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 369px minmax(0, 1fr);
  padding: 30px clamp(18px, 3.8vw, 50px) 52px;
  position: relative;
  z-index: 1;
}
#vcg-app .vcg-preview-panel, #vcg-app .vcg-card {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--vcg-line);
  border-radius: var(--vcg-radius);
  box-shadow: 0 8px 24px rgba(16,24,32,.045);
}
#vcg-app .vcg-preview-panel {
  align-self: start;
  background: #f8f6f1;
  display: grid;
  grid-template-columns: 132px minmax(0,1fr);
  height: 132px;
  overflow: hidden;
  padding: 0;
  position: sticky;
  top: var(--vcg-sticky-offset);
  z-index: 20;
}
#vcg-app .vcg-main { display: grid; gap: 20px; min-width: 0; }
#vcg-app .vcg-card { padding: clamp(20px, 3vw, 32px); scroll-margin-top: 18px; }
#vcg-app .vcg-panel-head, #vcg-app .vcg-section-head { align-items: center; display: flex; justify-content: space-between; }
#vcg-app .vcg-kicker {
  color: var(--vcg-red);
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  margin-bottom: 2px;
}
#vcg-app .vcg-panel-title { color: var(--vcg-ink); font-size: 20px; font-weight: 900; letter-spacing: -.02em; line-height: 1.35; margin: 0; }
#vcg-app .vcg-segmented, #vcg-app .vcg-mini-segment, #vcg-app .vcg-filter, #vcg-app .vcg-profile-tabs { display: flex; }
#vcg-app .vcg-segmented { border: 1px solid var(--vcg-line); margin: 0; }
#vcg-app .vcg-segmented button {
  background: #fff;
  border: 0;
  color: #7b858a;
  cursor: pointer;
  font-size: 7px;
  font-weight: 800;
  min-width: 22px;
  padding: 3px 4px;
}
#vcg-app .vcg-segmented button + button { border-left: 1px solid var(--vcg-line); }
#vcg-app .vcg-segmented button.is-active { background: var(--vcg-ink); color: #fff; }
#vcg-app .vcg-stage {
  background: #18232c;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size: 8px 8px;
  height: 132px;
  overflow: hidden;
  position: relative;
}
#vcg-app .vcg-reticle { height: 0; left: 50%; position: absolute; top: 50%; width: 0; z-index: 6; }
#vcg-app .vcg-line-part, #vcg-app .vcg-dot-part { background: var(--part-color); position: absolute; }
#vcg-app .vcg-line-part { box-shadow: 0 0 0 var(--outline-size) rgba(0,0,0,var(--outline-opacity)); }
#vcg-app .vcg-line-part--left { right: var(--part-gap); top: calc(var(--part-thickness) / -2); }
#vcg-app .vcg-line-part--right { left: var(--part-gap); top: calc(var(--part-thickness) / -2); }
#vcg-app .vcg-line-part--top { bottom: var(--part-gap-v); left: calc(var(--part-thickness) / -2); }
#vcg-app .vcg-line-part--bottom { left: calc(var(--part-thickness) / -2); top: var(--part-gap-v); }
#vcg-app .vcg-dot-part { box-shadow: 0 0 0 var(--outline-size) rgba(0,0,0,var(--outline-opacity)); left: 50%; top: 50%; transform: translate(-50%,-50%); }
#vcg-app .vcg-reticle.is-moving .vcg-line-part--left[data-movement="1"] { animation: vcg-move-left .72s ease-in-out infinite alternate; }
#vcg-app .vcg-reticle.is-moving .vcg-line-part--right[data-movement="1"] { animation: vcg-move-right .72s ease-in-out infinite alternate; }
#vcg-app .vcg-reticle.is-moving .vcg-line-part--top[data-movement="1"] { animation: vcg-move-top .72s ease-in-out infinite alternate; }
#vcg-app .vcg-reticle.is-moving .vcg-line-part--bottom[data-movement="1"] { animation: vcg-move-bottom .72s ease-in-out infinite alternate; }
@keyframes vcg-move-left { to { transform: translateX(calc(var(--movement-distance) * -1)); } }
@keyframes vcg-move-right { to { transform: translateX(var(--movement-distance)); } }
@keyframes vcg-move-top { to { transform: translateY(calc(var(--movement-distance) * -1)); } }
@keyframes vcg-move-bottom { to { transform: translateY(var(--movement-distance)); } }
#vcg-app .vcg-preview-meta { display: grid; gap: 3px; min-width: 0; padding: 5px 7px; }
#vcg-app .vcg-preview-topline { align-items: center; display: flex; justify-content: space-between; }
#vcg-app .vcg-live-label { align-items: center; color: #778188; display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 7px; font-weight: 900; gap: 4px; letter-spacing: .08em; }
#vcg-app .vcg-live-label i { background: #31d6c4; border-radius: 50%; box-shadow: 0 0 6px rgba(49,214,196,.55); height: 5px; width: 5px; }
#vcg-app input[type="range"] { accent-color: var(--vcg-red); cursor: pointer; margin: 7px 0 0; width: 100%; }
#vcg-app .vcg-current-summary { align-items: center; display: grid; gap: 0 6px; grid-template-columns: 8px minmax(0,1fr); min-width: 0; }
#vcg-app .vcg-current-summary > span { border: 1px solid rgba(0,0,0,.2); border-radius: 50%; grid-row: 1 / span 2; height: 8px; width: 8px; }
#vcg-app .vcg-current-summary strong, #vcg-app .vcg-current-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vcg-app .vcg-current-summary strong { color: var(--vcg-ink); font-size: 9px; line-height: 1.2; }
#vcg-app .vcg-current-summary small { color: #828b90; font-size: 7px; line-height: 1.2; }
#vcg-app .vcg-preview-actions { align-items: stretch; display: flex; gap: 4px; }
#vcg-app .vcg-preview-actions button { align-items: center; background: #fff; border: 1px solid var(--vcg-line); color: #5f6a70; cursor: pointer; display: inline-flex; font-size: 7px; font-weight: 800; gap: 4px; height: 36px; justify-content: center; padding: 0 6px; }
#vcg-app .vcg-preview-actions button:first-child { flex: 1; }
#vcg-app .vcg-preview-actions button:last-child { font-size: 12px; width: 23px; }
#vcg-app .vcg-preview-actions button[aria-pressed="true"] { background: var(--vcg-red); border-color: var(--vcg-red); color: #fff; }
#vcg-app .vcg-preview-actions button:disabled { cursor: not-allowed; opacity: .42; }
#vcg-app .vcg-preview-actions button:focus-visible { border-color: var(--vcg-red); outline: 2px solid rgba(255,70,85,.22); }
#vcg-app .vcg-preview-modal {
  align-items: center;
  background: rgba(8,16,22,.78);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 99999;
}
#vcg-app .vcg-preview-modal__window { background: #f8f6f1; border: 1px solid #d9d3c8; box-shadow: 0 24px 80px rgba(0,0,0,.38); max-width: 560px; padding: 12px; width: 100%; }
#vcg-app .vcg-preview-modal__head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; }
#vcg-app .vcg-preview-modal__head strong { color: var(--vcg-ink); font-size: 12px; }
#vcg-app .vcg-preview-modal__head button { align-items: center; background: #fff; border: 1px solid var(--vcg-line); color: var(--vcg-ink); cursor: pointer; display: flex; font-size: 20px; height: 32px; justify-content: center; line-height: 1; width: 32px; }
#vcg-app .vcg-preview-modal__head button:hover, #vcg-app .vcg-preview-modal__head button:focus-visible { border-color: var(--vcg-red); color: var(--vcg-red); outline: none; }
#vcg-app .vcg-preview-modal__stage { background: #18232c; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 16px 16px; height: min(58vw,360px); max-height: 360px; min-height: 240px; overflow: hidden; position: relative; }
#vcg-app .vcg-reticle--large { transform: scale(3); }
#vcg-app .vcg-preview-modal__window > p { color: #68747a; font-size: 9px; margin: 9px 2px 0; text-align: center; }
#vcg-app .vcg-count, #vcg-app .vcg-unsaved, #vcg-app .vcg-code-valid { color: #7b858a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; letter-spacing: .08em; }
#vcg-app .vcg-unsaved, #vcg-app .vcg-code-valid { align-items: center; display: flex; gap: 8px; }
#vcg-app .vcg-section-note { color: #7b858a; font-size: 10px; margin: 8px 0 19px; }
#vcg-app .vcg-preset-tools { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 16px; }
#vcg-app .vcg-filter { border: 1px solid var(--vcg-line); flex-wrap: wrap; }
#vcg-app .vcg-filter button { background: transparent; border: 0; color: #758087; cursor: pointer; font-size: 9px; font-weight: 900; letter-spacing: .04em; min-width: 54px; padding: 8px 12px; }
#vcg-app .vcg-filter button + button { border-left: 1px solid var(--vcg-line); }
#vcg-app .vcg-filter button.is-active { background: var(--vcg-ink); color: #fff; }
#vcg-app .vcg-search { flex: 0 1 180px; position: relative; }
#vcg-app .vcg-search input { background: #f8f6f1; border: 1px solid var(--vcg-line); border-radius: 0; color: var(--vcg-ink); font-size: 10px; height: 34px; outline: none; padding: 0 30px 0 10px; width: 100%; }
#vcg-app .vcg-search input:focus { border-color: var(--vcg-red); }
#vcg-app .vcg-search i { border: 1px solid #7c868c; border-radius: 50%; height: 9px; pointer-events: none; position: absolute; right: 11px; top: 10px; width: 9px; }
#vcg-app .vcg-search i::after { background: #7c868c; content: ""; height: 1px; position: absolute; right: -4px; top: 8px; transform: rotate(45deg); width: 5px; }
#vcg-app .vcg-preset-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0,1fr)); }
#vcg-app .vcg-preset {
  align-items: stretch;
  background: #f8f6f1;
  border: 1px solid var(--vcg-line);
  color: var(--vcg-ink);
  cursor: pointer;
  display: grid;
  grid-template-columns: 62px 1fr;
  min-height: 72px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
#vcg-app .vcg-preset:hover, #vcg-app .vcg-preset:focus-visible { border-color: var(--vcg-red); box-shadow: 0 5px 15px rgba(16,24,32,.08); outline: none; transform: translateY(-1px); }
#vcg-app .vcg-preset.is-active { border-color: var(--vcg-red); box-shadow: inset 0 -2px var(--vcg-red); }
#vcg-app .vcg-preset--placeholder { border-color: transparent; cursor: default; pointer-events: none; visibility: hidden; }
#vcg-app .vcg-preset__visual { background: #18232c; display: grid; overflow: hidden; place-items: center; position: relative; }
#vcg-app .vcg-preset__visual::before { background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 8px 8px; content: ""; inset: 0; position: absolute; }
#vcg-app .vcg-preset__reticle { height: 0; left: 50%; position: absolute; top: 50%; width: 0; }
#vcg-app .vcg-preset__copy { min-width: 0; padding: 11px 9px; }
#vcg-app .vcg-preset__copy span { color: var(--vcg-red); display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 7px; font-weight: 900; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
#vcg-app .vcg-preset__copy strong { display: block; font-size: 10px; line-height: 1.4; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vcg-app .vcg-preset__copy small { color: #80898e; display: block; font-size: 8px; line-height: 1.4; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vcg-app .vcg-empty { background: #f8f6f1; color: #7b858a; font-size: 14px; margin: 0; padding: 22px; text-align: center; }
#vcg-app .vcg-pager { align-items: center; display: flex; gap: 5px; justify-content: center; margin-top: 18px; }
#vcg-app .vcg-pager button { align-items: center; background: #fff; border: 1px solid var(--vcg-line); color: #667178; cursor: pointer; display: inline-flex; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; font-weight: 800; height: 30px; justify-content: center; min-width: 30px; padding: 0 8px; }
#vcg-app .vcg-pager button.is-active { background: var(--vcg-ink); border-color: var(--vcg-ink); color: #fff; }
#vcg-app .vcg-pager button:hover:not(:disabled), #vcg-app .vcg-pager button:focus-visible { border-color: var(--vcg-red); color: var(--vcg-red); outline: none; }
#vcg-app .vcg-pager button.is-active:hover, #vcg-app .vcg-pager button.is-active:focus-visible { color: #fff; }
#vcg-app .vcg-pager button:disabled { cursor: not-allowed; opacity: .35; }
#vcg-app .vcg-accordion { border-top: 1px solid var(--vcg-line); margin-top: 20px; }
#vcg-app .vcg-accordion:last-child { border-bottom: 1px solid var(--vcg-line); }
#vcg-app .vcg-accordion summary { align-items: center; cursor: pointer; display: flex; font-size: 12px; font-weight: 900; justify-content: space-between; list-style: none; padding: 16px 2px; }
#vcg-app .vcg-accordion summary::-webkit-details-marker { display: none; }
#vcg-app .vcg-accordion summary b { color: var(--vcg-red); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; margin-right: 10px; }
#vcg-app .vcg-accordion summary > i { height: 12px; position: relative; width: 12px; }
#vcg-app .vcg-accordion summary > i::before, #vcg-app .vcg-accordion summary > i::after { background: var(--vcg-ink); content: ""; left: 0; position: absolute; top: 6px; height: 1px; width: 12px; }
#vcg-app .vcg-accordion summary > i::after { transform: rotate(90deg); transition: transform .15s; }
#vcg-app .vcg-accordion[open] summary > i::after { transform: rotate(0); }
#vcg-app .vcg-accordion__body { padding: 2px 2px 22px; }
#vcg-app .vcg-profile-tabs { background: #f0ede6; gap: 3px; margin: 2px 0 18px; padding: 3px; width: fit-content; }
#vcg-app .vcg-profile-tabs button { background: transparent; border: 0; color: #7b858a; cursor: pointer; font-size: 9px; font-weight: 900; padding: 7px 15px; }
#vcg-app .vcg-profile-tabs button.is-active { background: #fff; box-shadow: 0 1px 5px rgba(16,24,32,.09); color: var(--vcg-ink); }
#vcg-app .vcg-control-section + .vcg-control-section { border-top: 1px dashed var(--vcg-line); margin-top: 18px; padding-top: 18px; }
#vcg-app .vcg-control-title { align-items: center; color: #57636a; display: flex; font-size: 9px; font-weight: 900; gap: 9px; letter-spacing: .12em; margin: 0 0 12px; text-transform: uppercase; }
#vcg-app .vcg-control-title::after { background: var(--vcg-line); content: ""; flex: 1; height: 1px; }
#vcg-app .vcg-control-grid { display: grid; gap: 14px 20px; grid-template-columns: repeat(2,minmax(0,1fr)); }
#vcg-app .vcg-control { min-width: 0; }
#vcg-app .vcg-control--wide { grid-column: 1 / -1; }
#vcg-app .vcg-control__top { align-items: center; display: flex; gap: 8px; justify-content: space-between; margin-bottom: 6px; min-height: 26px; }
#vcg-app .vcg-control__top label, #vcg-app .vcg-toggle-label { color: #5d696f; font-size: 10px; font-weight: 700; }
/* バーの値は読むだけの <output> ではなく数値ボックス。**バーと数値のどちらからでも動かせる。**
   以前は 9px の文字だったが、打ち込む欄なので 16px（入力欄の段）・高さ 26px にした（17 節の上書きも同じ値）。 */
#vcg-app input.vcg-control__value { background: #fff; border: 1px solid var(--vcg-line); border-radius: 0; color: var(--vcg-ink); flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; font-weight: 800; height: 26px; padding: 0 2px 0 6px; text-align: right; width: 74px; }
#vcg-app input.vcg-control__value:focus { border-color: var(--vcg-red); outline: none; }
#vcg-app input.vcg-control__value:focus-visible { border-color: var(--vcg-red); outline: 2px solid var(--vcg-red); outline-offset: 1px; }
#vcg-app .vcg-control select { appearance: none; background: #f8f6f1 linear-gradient(45deg,transparent 50%,#6f797f 50%) calc(100% - 12px) 14px/4px 4px no-repeat; border: 1px solid var(--vcg-line); border-radius: 0; color: var(--vcg-ink); font-size: 10px; height: 34px; outline: none; padding: 0 28px 0 10px; width: 100%; }
#vcg-app .vcg-control select:focus { border-color: var(--vcg-red); }
#vcg-app .vcg-color-row { align-items: center; display: grid; gap: 8px; grid-template-columns: 1fr 42px; }
#vcg-app .vcg-color-row input[type="color"] { background: #fff; border: 1px solid var(--vcg-line); cursor: pointer; height: 34px; padding: 3px; width: 42px; }
#vcg-app .vcg-toggle-control { align-items: center; display: flex; justify-content: space-between; min-height: 34px; }
#vcg-app .vcg-switch { cursor: pointer; display: inline-flex; flex: none; position: relative; }
#vcg-app .vcg-switch input { height: 1px; opacity: 0; position: absolute; width: 1px; }
#vcg-app .vcg-switch span { background: #c7cdcf; display: block; height: 18px; position: relative; transition: background .15s; width: 34px; }
#vcg-app .vcg-switch span::after { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); content: ""; height: 14px; left: 2px; position: absolute; top: 2px; transition: transform .15s; width: 14px; }
#vcg-app .vcg-switch input:checked + span { background: var(--vcg-red); }
#vcg-app .vcg-switch input:checked + span::after { transform: translateX(16px); }
#vcg-app .vcg-switch input:focus-visible + span { outline: 2px solid var(--vcg-cyan); outline-offset: 2px; }
#vcg-app .vcg-control.is-disabled { opacity: .38; pointer-events: none; }
#vcg-app .vcg-code textarea {
  background: var(--vcg-ink-2);
  border: 1px solid #263641;
  border-left: 3px solid var(--vcg-red);
  border-radius: 0;
  color: #e8edef;
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.75;
  margin-top: 7px;
  min-height: 116px;
  outline: none;
  padding: 15px;
  resize: vertical;
  width: 100%;
}
#vcg-app .vcg-code textarea:focus { border-color: var(--vcg-cyan); border-left-color: var(--vcg-red); box-shadow: 0 0 0 2px rgba(72,230,223,.12); }
#vcg-app .vcg-code textarea.is-error { border-color: var(--vcg-red); }
#vcg-app .vcg-code-label { color: #6c777d; display: block; font-size: 9px; font-weight: 900; letter-spacing: .06em; margin-top: 19px; text-transform: uppercase; }
#vcg-app .vcg-code-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 12px; }
#vcg-app .vcg-button { align-items: center; border: 1px solid var(--vcg-ink); cursor: pointer; display: flex; font-size: 10px; font-weight: 900; justify-content: space-between; min-height: 42px; padding: 0 15px; position: relative; }
#vcg-app .vcg-button--primary { background: var(--vcg-red); border-color: var(--vcg-red); color: #fff; }
#vcg-app .vcg-button--secondary { background: transparent; color: var(--vcg-ink); }
#vcg-app .vcg-button:hover, #vcg-app .vcg-button:focus-visible { box-shadow: inset 0 -3px rgba(0,0,0,.2); outline: none; }
#vcg-app .vcg-button b { font-size: 15px; font-weight: 400; }
#vcg-app .vcg-code-message { color: #7c868b; font-size: 9px; margin: 9px 0 0; }
#vcg-app .vcg-code-message.is-error { color: #d92f40; font-weight: 700; }
#vcg-app .vcg-code-message.is-success { color: #187a70; font-weight: 700; }
#vcg-app .vcg-code-valid.is-error { color: #d92f40; }
#vcg-app .vcg-code-valid.is-error i { background: var(--vcg-red); box-shadow: 0 0 0 4px rgba(255,70,85,.12); }
#vcg-app .vcg-tip { align-items: center; background: #f3f0e9; border-left: 2px solid var(--vcg-cyan); display: flex; gap: 12px; margin-top: 18px; padding: 12px 14px; }
#vcg-app .vcg-tip > span { align-items: center; border: 1px solid #879196; border-radius: 50%; color: #68747a; display: flex; flex: none; font-family: Georgia,serif; font-size: 10px; font-style: italic; height: 18px; justify-content: center; width: 18px; }
#vcg-app .vcg-tip p { color: #6e797f; font-size: 9px; line-height: 1.6; margin: 0; }
#vcg-app .vcg-tip strong { color: var(--vcg-ink); display: block; font-size: 10px; }
#vcg-app .vcg-sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0 0 0 0); white-space: nowrap; }
#vcg-app [hidden] { display: none !important; }
@container vcg-shell (max-width: 980px) {
  #vcg-app .vcg-workspace { grid-template-columns: minmax(0,1fr); }
  #vcg-app .vcg-preview-panel { justify-self: center; position: sticky; top: var(--vcg-sticky-offset); width: min(369px,100%); }
}
@container vcg-shell (max-width: 720px) {
  #vcg-app .vcg-preset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  #vcg-app .vcg-workspace { grid-template-columns: 1fr; }
  #vcg-app .vcg-preview-panel { justify-self: center; position: sticky; top: var(--vcg-sticky-offset); width: min(369px,100%); }
  #vcg-app .vcg-preset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  #vcg-app { --vcg-sticky-offset: calc(var(--logo_size_sp, 48px) + var(--swl-adminbarH, 0px) + 2px); }
  #vcg-app .vcg-workspace { padding: 18px 10px 34px; }
  #vcg-app .vcg-preview-panel { grid-template-columns: 132px minmax(0,1fr); height: 132px; padding: 0; }
  #vcg-app .vcg-card { padding: 17px; }
  #vcg-app .vcg-stage { height: 132px; }
  #vcg-app .vcg-preset-tools { align-items: stretch; flex-direction: column; }
  #vcg-app .vcg-filter { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: 100%; }
  #vcg-app .vcg-filter button { min-width: 0; padding: 8px 2px; white-space: nowrap; }
  #vcg-app .vcg-search { flex-basis: auto; }
  #vcg-app .vcg-preset-grid { grid-template-columns: 1fr; }
  #vcg-app .vcg-control-grid, #vcg-app .vcg-code-actions { grid-template-columns: 1fr; }
  #vcg-app .vcg-control--wide { grid-column: auto; }
  #vcg-app .vcg-preview-modal { padding: 10px; }
  #vcg-app .vcg-preview-modal__stage { min-height: 210px; }
  #vcg-app .vcg-reticle--large { transform: scale(2.5); }
}
@media (prefers-reduced-motion: reduce) {
  #vcg-app *, #vcg-app *::before, #vcg-app *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}