/* 特殊な操作の初回案内（Issue #4092、枠の位置計算の直し: Issue #4346）。 modalではない重ね——本文は覆わない。目印の実物の上に明るい枠を置き、 枠の外だけをbox-shadowで薄くする。枠はJS側(core/js/elsa_guide.js)が 毎回getBoundingClientRect()をそのまま代入するので、ここでtop/left/width/ heightへtransitionを付けない——付けるとスクロール中に枠が遅れて「元の 位置に残る」症状そのものになる。見た目の明るいリングの太さだけを トークンに持つ。 吹き出しの帯のボタンは、共通ポップアップの帯と同じ姿（28pxのアイコン ボタン、図像は共通トークン）を流用する（docs/architecture.md「共通 ポップアップのボタンも帯に1組だけ」の規則に揃える。新しいpopup command種別は増やさない——このブロックは独立した非modalの重ねである）。 並び（2026-10-03のオーナー決定）: ×は吹き出しの右上に単独で置き、 戻る・次へ（最後の手順だけ完了）は右下の帯にまとめる。 余白・間隔のトークンは`.elsaGuideFrame, .elsaGuideCallout`の1つの規則へ 1か所だけ宣言する。JS側はgetComputedStyle()でこの値を読む。 */ .elsaGuideFrame, .elsaGuideCallout, .elsaGuideDragGhost{ --elsa-guide-frame-ring: 4px; --elsa-guide-callout-gap: 8px; --elsa-guide-callout-edge: 8px; --elsa-guide-callout-inset: 12px; --elsa-guide-callout-band-inset: 8px; --elsa-guide-callout-close-inset: 4px; /* ×の操作面のぶんだけ本文を空ける（文字が×の下へ回らないように）。 */ --elsa-guide-callout-close-room: calc(var(--elsa-guide-callout-close-inset) + var(--elsa-block-action-height, 28px)); /* ドラッグの動き（Issue #4448）。長さ・くり返しの回数はJS側が読む。 */ --elsa-guide-drag-duration: 1200ms; --elsa-guide-drag-repeat: 3; --elsa-guide-drag-pointer-size: 20px; --elsa-guide-drag-opacity: .22; } .elsaGuideFrame{position:fixed;z-index:9500;pointer-events:none;border-radius:6px;box-shadow:0 0 0 var(--elsa-guide-frame-ring) var(--elsa-primary-color,#24333f),0 0 0 9999px rgba(17,24,39,.55)} .elsaGuideCallout{position:fixed;z-index:9501;max-width:min(320px,calc(100vw - 2 * var(--elsa-guide-callout-edge)));background:var(--elsa-surface,#fff);border-radius:8px;box-shadow:0 16px 48px rgba(0,0,0,.28);padding:0} /* トップレイヤーへ載せる（JSが`popover="manual"`を付ける。Issue #4884）ときに、ブラウザ既定の popoverの見た目（中央寄せ・枠線・余白・背景）を消し、上の位置・形だけにする。 */ .elsaGuideFrame[popover], .elsaGuideCallout[popover], .elsaGuideDragGhost[popover]{inset:auto;border:0;padding:0} .elsaGuideFrame[popover], .elsaGuideDragGhost[popover]{background:transparent} /* 目印が一時的に居ないあいだは重ねだけを隠す（JS側は完了にしない）。 */ .elsaGuideFrame[hidden], .elsaGuideCallout[hidden]{display:none} .elsaGuideCalloutBody{padding:var(--elsa-guide-callout-close-room) var(--elsa-guide-callout-close-room) var(--elsa-guide-callout-band-inset) var(--elsa-guide-callout-inset);font-size:.95em;line-height:1.5;color:var(--elsa-text-color,#111827);overflow-wrap:anywhere} .elsaGuideCalloutBand{display:flex;align-items:center;justify-content:flex-end;gap:var(--elsa-guide-callout-band-inset);padding:0 var(--elsa-guide-callout-band-inset) var(--elsa-guide-callout-band-inset)} .elsaGuideCallout button{appearance:none;display:grid;place-items:center;width:var(--elsa-block-action-height,28px);min-width:var(--elsa-block-action-height,28px);height:var(--elsa-block-action-height,28px);min-height:var(--elsa-block-action-height,28px);padding:0;border:0;border-radius:50%;background:var(--elsa-button-default-bg,#d2d2d2);color:var(--elsa-button-default-color,#667085);cursor:pointer;font:inherit;line-height:1} .elsaGuideCalloutClose{position:absolute;top:var(--elsa-guide-callout-close-inset);right:var(--elsa-guide-callout-close-inset)} .elsaGuideCallout button[hidden]{display:none} @media(hover:hover){.elsaGuideCallout button:hover{background:var(--elsa-primary-color,#24333f);color:var(--elsa-primary-contrast,#fff)}} .elsaGuideCallout button:focus-visible{outline:2px solid var(--elsa-primary-color,#24333f);outline-offset:2px} /* ドラッグの案内の実際の動き（Issue #4448。オーナー決定2026-10-06）。 つかむ行の**薄い写し**（実データは1行も動かさない見せかけの箱）が、手の形の 印（共通の`--elsa-icon-move`＝つかんで動かす意味トークン。新しいSVGは 増やさない）を載せたまま、離す先の中心まで動いて離れる。 `--elsa-icon-move`の**値はこのfileで宣言し直す**（Issue #3633と同じ落とし穴。 popup.cssの`--elsa-icon-close`と同じやり方）。CSS変数の相対URLは**その値を `var()`で消費するstylesheetの場所**を基準に解決されるため、base.cssの `url("../php/blocks/icons/move.svg")`をここから消費すると `/core/php/blocks/php/blocks/icons/move.svg`になって404になる（検収の 差し戻し2026-10-06で実測）。宣言は**消費している要素そのもの** （`.elsaGuideDragPointer`）だけへ閉じる——枠や吹き出しへ広げると、案内の中に 描かれる他の共通部品の図像まで巻き込む。移動量 （`--elsa-guide-drag-dx`／`-dy`）だけはJS側が実測して渡す——**どの画面の ドラッグの案内でも同じ動きになるように、動きの形はここ1か所だけが持つ。** `prefers-reduced-motion: reduce`では動きを出さない（JS側も動きを作らず 「もう一度見る」も出さないので、ここは二重の歯止めである）。 */ .elsaGuideDragGhost{position:fixed;z-index:9502;pointer-events:none;color:var(--elsa-primary-color,#24333f)} .elsaGuideDragGhost[hidden]{display:none} .elsaGuideDragGhost::before{content:"";position:absolute;inset:0;border-radius:6px;background:var(--elsa-primary-color,#24333f);opacity:var(--elsa-guide-drag-opacity)} .elsaGuideDragPointer{--elsa-icon-move:url("../icons/move.svg");position:absolute;left:50%;top:50%;width:var(--elsa-guide-drag-pointer-size);height:var(--elsa-guide-drag-pointer-size);margin:calc(-1 * var(--elsa-guide-drag-pointer-size) / 2) 0 0 calc(-1 * var(--elsa-guide-drag-pointer-size) / 2);background:currentColor;-webkit-mask:var(--elsa-icon-move) center / contain no-repeat;mask:var(--elsa-icon-move) center / contain no-repeat} @keyframes elsaGuideDragMove{ 0%{transform:translate(0,0);opacity:0} 12%{transform:translate(0,0);opacity:1} 68%{transform:translate(var(--elsa-guide-drag-dx,0px),var(--elsa-guide-drag-dy,0px));opacity:1} 84%{transform:translate(var(--elsa-guide-drag-dx,0px),var(--elsa-guide-drag-dy,0px));opacity:0} 100%{transform:translate(var(--elsa-guide-drag-dx,0px),var(--elsa-guide-drag-dy,0px));opacity:0} } .elsaGuideDragGhost.is-playing{animation:elsaGuideDragMove var(--elsa-guide-drag-duration) ease-in-out var(--elsa-guide-drag-repeat) both} @media(prefers-reduced-motion:reduce){ .elsaGuideDragGhost{display:none} .elsaGuideDragGhost.is-playing{animation:none} } /* サポート › 使い方の説明文（Issue #4344）。名前の下に2〜3行で添えるだけで、 列は増やさない。説明を持たない案内の行は`.elsaGuideSupportSummary`を出さない ので、これまでと同じ1行のままである。 */ .elsaGuideSupportCaption{display:block} .elsaGuideSupportSummary{display:block;margin-top:4px;font-size:.9em;line-height:1.5;color:var(--elsa-text-muted,#667085);white-space:normal}