atmos/os_lib/web_engine/

render.rs

// web_engine/render.rs - draw, scroll, mouse/key event handlers
#![allow(dead_code, unused_variables, unused_imports)]

use crate::kernel::draw;
use crate::kernel::vector_font;

/// 【2026-08-05 診断】`draw()` の中で再レイアウトに費やした tick の累計。
///
/// `draw()` はフォント到着・画像到着を検知して再レイアウトを起こすため、
/// 「描画が重い」のか「再レイアウトが重い」のかが混ざって見えない。
/// 目的: その切り分け。破棄条件: 判断がついたら削除。
pub static RELAYOUT_IN_DRAW_TICKS: core::sync::atomic::AtomicU32 =
    core::sync::atomic::AtomicU32::new(0);

/// 【2026-08-05 診断】前回の `draw()` 終了から今回の開始までの累計 / 最大。
/// `draw()` の**回数**が減る理由を、draw の外側で追う。
/// 前回まとめて出した時刻（tick）。0 なら未出力。
static LAST_DUMP_TICK: core::sync::atomic::AtomicUsize =
    core::sync::atomic::AtomicUsize::new(0);
/// まとめて出す間隔（tick）。5 秒。
const DUMP_INTERVAL_TICKS: usize = 500;

pub static DRAW_GAP_SUM: core::sync::atomic::AtomicUsize =
    core::sync::atomic::AtomicUsize::new(0);
pub static DRAW_GAP_MAX: core::sync::atomic::AtomicUsize =
    core::sync::atomic::AtomicUsize::new(0);
static DRAW_LAST_END: core::sync::atomic::AtomicUsize =
    core::sync::atomic::AtomicUsize::new(0);
use crate::os_lib::css::parse_color;
use alloc::format;
use alloc::string::String;
use alloc::vec::Vec;

use super::draw_helpers::{
    bg_clip_rect, bg_origin_shift, blend_pixel, clip_inside, draw_background_image, draw_border,
    draw_border_with_style, draw_decoration_line, draw_gradation, draw_img_object_fit,
    draw_individual_borders, draw_outline, draw_rotated_rect_filled, draw_skewed_rect_filled, extract_border_color,
    extract_border_style, parse_clip_shape, point_in_rounded_rect,
};
use super::helpers::{extract_url_path, hash_str, parse_font_size, url_encode};
use super::image::{enqueue_image, ImageFetchReq, IMAGE_QUEUE};
use super::video::{
    stop_video_playback, video_playback_thread, VideoPlayState, CURRENT_VIDEO_FRAME, VIDEO_STATE,
};
use super::{
    key_name_for, HyperlinkArea, ASYNC_LOAD, NEXT_ENGINE_ID, SVG_LOAD, SVG_SAVE, SVG_WRAP,
};

/// dblclick と判定する2クリック間の最大 tick 数（タイマは 10ms/tick なので 50 tick = 500ms）。
const DBLCLICK_MAX_TICKS: usize = 50;

/// 【2026-07-28診断】ヒーローテキスト矩形 (x<<48|y<<32|w<<16|h) と文字色。
/// 描画直後と `draw()` 終了時点の 2 地点で同じ矩形を読み返し、
/// 後続の描画が塗り潰しているかを一意に判定するために使う。

/// 【2026-08-02】背景画像がキャッシュから引けなかったことを**パスごとに 1 回だけ**記録する。
///
/// 引けないと `if let Some(img)` が黙って落ちるだけで何も出ず、
/// 「取得できていない」のか「取得できたのにキーが合わない」のかを
/// 切り分けられなかった（`spec/logging_policy.md` L-1）。
fn log_bg_image_miss(path: &str, cache_len: usize, site: &str) {
    static MISS: spin::Mutex<alloc::collections::BTreeSet<alloc::string::String>> =
        spin::Mutex::new(alloc::collections::BTreeSet::new());
    let key = alloc::format!("{}@{}", site, path);
    let mut seen = MISS.lock();
    if seen.insert(key) {
        crate::warn!(
            "[IMG][MISS] 背景画像がキャッシュに無い site={} path={} cache_entries={}",
            site,
            path,
            cache_len
        );
    }
}

impl super::WebEngine {
    /// 計算量: **O(E log E + Σᵢ Wᵢ×Hᵢ)** — E は描画要素数、
    /// Wᵢ×Hᵢ は要素 i の塗り面積。
    ///
    /// - `E log E`: z-index による安定ソート
    /// - **`Σ Wᵢ×Hᵢ` が支配項**。要素「数」ではなく**面積の総和**で決まるため、
    ///   画面を覆う大きな要素（ヒーローの背景・グラデーション）が効く
    ///
    /// 下層の積み上げ（規約は `spec/complexity_annotation.md`）:
    /// `draw_pixel` O(1) → `boxfill` O(W×H) → 要素ループ O(Σ W×H)。
    ///
    /// 実測（sugi-lab.net、E=369、1 フレーム約 243 tick）:
    ///
    /// | 内訳 | tick | 割合 |
    /// |------|------|------|
    /// | グラデーション | 56 | 23% |
    /// | 背景画像 | 35 | 14% |
    /// | 矩形塗り | 13 | 5% |
    /// | clip/opacity の毎ピクセル塗り | 17〜21 | 7% |
    /// | **未特定** | **約 140** | **57%** |
    /// | テキスト・ボーダー・シャドウ・角丸 | 0〜2 | ほぼ 0 |
    ///
    /// テキスト描画が支配的だという直感は**実測で否定**された
    /// （グリフキャッシュが効いている）。詳細は `spec/resource_loading.md`。
    pub fn draw(
        &mut self,
        screen: &draw::Screen,
        win_x: u32,
        win_y: u32,
        win_w: u32,
        win_h: u32,
        top_offset: i32,
    ) {
        let draw_start_tick = crate::kernel::timer::get_ticks();
        // 【2026-08-05 計測】`draw()` の**回数**が減る理由を追う。
        // 1 回の中身ではなく、**前回の終わりから今回の始まりまで**を測る。
        // ここが大きければ、GUI スレッドは draw の外で時間を使っている。
        // 目的: 非同期化時に draw の回数が減る理由の特定。
        // 破棄条件: 特定でき次第削除。
        {
            use core::sync::atomic::Ordering;
            let last = DRAW_LAST_END.load(Ordering::Relaxed);
            if last != 0 {
                let gap = draw_start_tick.wrapping_sub(last);
                DRAW_GAP_SUM.fetch_add(gap, Ordering::Relaxed);
                DRAW_GAP_MAX.fetch_max(gap, Ordering::Relaxed);
            }
        }
        // 【2026-08-05 計測】`draw()` の中には再レイアウトも含まれる。
        // 「描画が重い」のか「再レイアウトが重い」のかを分ける。
        let relayout_before = RELAYOUT_IN_DRAW_TICKS.load(core::sync::atomic::Ordering::Relaxed);
        let theme = &crate::kernel::config::get_config().theme;
        // 【2026-08-03】フォント取得完了はここで確認する。
        //
        // 以前は `parse_and_layout` の内側で確認していたため、
        // レイアウトが動いていないと再レイアウトを起こせなかった。
        // 実測ではフォント 8 本の取得完了が最後のレイアウトより後に起き、
        // **取り込む機会が一度も来なかった**（キャッシュ命中 1 件）。
        //
        // `draw()` は毎フレーム呼ばれるので、ここなら確実に拾える。
        // 再レイアウトは重い（実測約 6 秒）が、フォントが揃うのは
        // 1 ページにつき数回なので許容する。打ち切りはしない。
        let now_tick = crate::kernel::timer::get_ticks();
        // 【2026-08-05】門（`fetch_limit`）が閉じている間に投入された取得要求を
        // 拾い直す。投入時にしかワーカーを起こさない作りなので、
        // これが無いと門が閉じていた分が永久に残る。
        super::fetch_limit::set_draw_stage(2);

        super::font_queue::pump();
        // 【2026-08-05 観測】ワーカーのループが回っているかを見る。
        // 25 フレームに 1 行だけ（L-3: 毎フレームは出さない）。
        {
            use core::sync::atomic::{AtomicU32, Ordering};
            static N: AtomicU32 = AtomicU32::new(0);
            if N.fetch_add(1, Ordering::Relaxed) % 25 == 0 {
                super::font_queue::diag_line();
            }
        }
        super::image::pump();
        if super::font_queue::take_fonts_updated() {
            crate::warn!("[FONT] 取得完了を検知");
            if self.pending_reflow_since == 0 {
                self.pending_reflow_since = now_tick;
            }
            self.pending_reflow_last = now_tick;
        }

        // --- 画像非同期ロード結果のポーリング（ノンブロッキング）---
        if self.poll_image_results() {
            // 【2026-08-05 発見・修正】以前は再描画フラグを立てるだけだった。
            //
            // 寸法を書いていない `<img>` の箱は、画像が届くまで
            // プレースホルダの寸法で確定している。届いた画像を
            // その箱へ描くので、**本来の大きさを無視して引き伸ばされる**。
            // 実測: `App_Store_Badge_US-UK_135x40.svg`（本来 135×40）が
            // 画面外へはみ出すほど大きく描かれていた。
            //
            // 実ブラウザも寸法未指定の画像が届くとリフローする。
            // 同じく再レイアウトして、要素に本来の寸法を持たせる。
            // DOM は組み直す。キャッシュは `is_document_changed` で守られる。
            if self.pending_reflow_since == 0 {
                self.pending_reflow_since = now_tick;
            }
            self.pending_reflow_last = now_tick;
            self.dirty = true;
            self.dirty_reason = "render.rs:image_arrived";
        }

        // --- 溜まった到着をまとめて 1 回の再レイアウトにする ---
        //
        // 【2026-08-05】以前はフォント 1 本・画像 1 枚が届くたびに
        // その場で再レイアウトしていた。1 回が実測 4.6 秒かかるため、
        // 4 並列で次々届くと**そのたびに 4.6 秒**を払っていた
        // （実測: 100 フレーム中 5972 tick、`draw()` の 44%）。
        //
        // 到着が途切れてから `QUIET` だけ待って 1 回にまとめる。
        // ただし届き続ける限り待ち続けると画面が更新されないので、
        // 最初の到着から `MAX_WAIT` を超えたら待たずに実行する。
        {
            /// 到着が途切れたと判断するまでの静穏時間（tick, 10ms 単位）。
            ///
            /// 【2026-08-05 調整】最初 30（0.3 秒）にしたが**まとまらなかった**
            /// （relayout 5972 → 6418 tick で変化なし）。
            /// フォントは 4 並列でそれぞれ数秒かけて届くので、
            /// 到着間隔は 0.3 秒よりずっと長い。
            ///
            /// 再レイアウト 1 回が実測 4.6 秒なので、
            /// **2 秒待って 2 回を 1 回にまとめられれば元が取れる**。
            const QUIET: usize = 200;
            /// 最初の到着から必ず 1 回は反映するまでの上限（6 秒）。
            /// 届き続ける限り待ち続けて画面が更新されない事態を防ぐ。
            const MAX_WAIT: usize = 600;
            if self.pending_reflow_since != 0 {
                let quiet_enough = now_tick.wrapping_sub(self.pending_reflow_last) >= QUIET;
                let waited_enough = now_tick.wrapping_sub(self.pending_reflow_since) >= MAX_WAIT;
                // 【2026-08-05 検証済み・入れていない】
                // 「取得ワーカーが動いている間は再レイアウトしない」を試した。
                // カスケードがヒープの spin ロックで競合しているという読みだったが、
                // `fetch_limit::active() == 0` を条件に足しても
                // **2403 ルールのカスケードは完了しなかった**。
                // 競合説は否定された（`layout.rs` の `fetch_script_text` 参照）。
                if quiet_enough || waited_enough {
                    self.pending_reflow_since = 0;
                    self.pending_reflow_last = 0;
                    // DOM は組み直す。キャッシュは `is_document_changed` で守られる
                    // （`layout.rs` 参照）。
                    self.dom_needs_rebuild = true;
                    // 【2026-08-05】CSS を非同期取得にしたので、
                    // **外部 CSS の抽出結果キャッシュも必ず捨てる**。
                    //
                    // `external_css_cache` は「初回だけ取得して以後は使い回す」
                    // ためのもので、文書が変わらない限り保持される。
                    // 同期取得の頃は初回で CSS が揃っていたので問題なかったが、
                    // 非同期では**初回が空**になり、その空が居座ると
                    // 以後ずっと素の HTML のまま描かれる。
                    let arrive = super::font_queue::STYLE_ARRIVE_TICK
                        .load(core::sync::atomic::Ordering::Acquire);
                    crate::warn!(
                        "[CSSTRACE] 到着による再レイアウト 到着から={}tick",
                        if arrive == 0 {
                            0
                        } else {
                            now_tick.wrapping_sub(arrive)
                        }
                    );
                    // 【2026-08-25 バグ修正】ここで毎回 CSS を捨てていた。
                    // 捨てると `parse_and_layout` が外部 CSS を**全部取り直す**。
                    // フォントや画像が 1 つ届くたびにページ全体を
                    // 取り込み直すことになり、遅いだけでなく、
                    // 取り直しの最中の中途半端な状態が描かれてしまう。
                    //
                    // 空や欠けた結果が居座る問題は、保存する側
                    // （`layout.rs`：全部揃ったときだけ保存）で塞いだ。
                    // よってここは捨てない。欠けていれば
                    // `external_css_cache` は `None` のままなので、
                    // 次の再レイアウトが自然に取り直す。
                    let html = self.last_html.clone();
                    let _t0 = crate::kernel::timer::get_ticks();
                    super::fetch_limit::set_draw_stage(3);

                    self.parse_and_layout(&html, None, top_offset, self.win_w, self.win_h);

                    super::fetch_limit::set_draw_stage(4);
                    RELAYOUT_IN_DRAW_TICKS.fetch_add(
                        crate::kernel::timer::get_ticks().wrapping_sub(_t0) as u32,
                        core::sync::atomic::Ordering::Relaxed,
                    );
                    self.dirty = true;
                    self.dirty_reason = "render.rs:reflow_coalesced";
                }
            }
        }

        // --- CSS アニメーション/トランジションの駆動 ---
        // 進行中のアニメがあれば現在時刻で評価し、算出値を反映して再レイアウトする。
        if self.anim_engine.is_active() {
            self.tick_animations(top_offset);
        }

        // --- scroll-behavior:smooth によるスムーススクロールの駆動 ---
        if self.scroll_anim_active {
            self.tick_scroll_anim();
        }

        // --- `window.scrollTo()`/`window.scrollBy()` の保留分を消費・反映 ---
        // （丸ごと未対応だった。以前は孤立した `SCROLL_Y` static へ書くだけ/
        // `dom_noop`のままで、JS から呼んでも実際の描画位置にも
        // `window.scrollY`にも一切反映されなかった。`.focus()`と同じ
        // JS→レンダラの片方向同期パターンだが、`focused_idx`と違い同一
        // フレーム内の即時反映が不要なため、`draw()`冒頭のこの1箇所だけで
        // 消費すればよい。2026-07-16 発見・実装）。
        {
            let (pending_abs, pending_by) = {
                let mut dom = self.js_runtime.dom.borrow_mut();
                (dom.pending_scroll_abs_y.take(), dom.pending_scroll_by_y.take())
            };
            if pending_abs.is_some() || pending_by.is_some() {
                let base = pending_abs.unwrap_or(self.scroll_y);
                let target = (base + pending_by.unwrap_or(0)).max(0).min(self.max_scroll_y);
                if target != self.scroll_y {
                    self.scroll_y = target;
                    self.js_runtime.fire_scroll(self.scroll_y);
                    self.dirty = true;
                    self.dirty_reason = "render.rs:102";
                }
            }
        }

        // --- 非同期ロードのポーリングチェック（自分のタブ ID の完了結果だけ消費）---
        let mut loaded_result = None;
        {
            let mut lock = ASYNC_LOAD.lock();
            if let Some(pos) = lock
                .requests
                .iter()
                .position(|r| r.owner == self.engine_id && (r.status == 2 || r.status == 3))
            {
                let mut req = lock.requests.remove(pos);
                if req.status == 2 {
                    loaded_result = Some(Ok((req.result_body.unwrap_or_default(), req.result_dom.take())));
                } else {
                    loaded_result = Some(Err(req.error_msg.unwrap_or_default()));
                }
            }
        }

        if let Some(res) = loaded_result {
            self.loading = false;
            match res {
                Ok((body, pre_parsed_dom)) => {
                    crate::warn!("[NET] BROWSER: Load page SUCCESS. body_len={}", body.len());
                    crate::warn!("[GPU] DEBUG: calling parse_and_layout next");
            {
                let _t0 = crate::kernel::timer::get_ticks();
                    self.parse_and_layout(&body, pre_parsed_dom, top_offset, self.win_w, self.win_h);
                RELAYOUT_IN_DRAW_TICKS.fetch_add(
                    crate::kernel::timer::get_ticks().wrapping_sub(_t0) as u32,
                    core::sync::atomic::Ordering::Relaxed,
                );
            }
                    crate::warn!("[GPU] DEBUG: parse_and_layout returned");
                }
                Err(e) => {
                    crate::warn!("[NET] BROWSER: Load page FAILED. err={}", e);
                    let schema = if self.current_is_https {
                        "https://"
                    } else {
                        "http://"
                    };
                    let err_html = alloc::format!(
                        "<html><title>Connection Error</title><body style=\"background-color: #282a36; color: #f8f8f2;\"><h1 style=\"color: #ff5555;\">HTTP Request Failed</h1><p>Failed to connect to {}{}{}</p><p>Error detail: {}</p><hr style=\"color: #6272a4;\"><p><a href=\"/\">Go Home</a></p></body></html>",
                        schema, self.current_host, self.current_path, e
                    );
            {
                let _t0 = crate::kernel::timer::get_ticks();
                    self.parse_and_layout(&err_html, None, top_offset, self.win_w, self.win_h);
                RELAYOUT_IN_DRAW_TICKS.fetch_add(
                    crate::kernel::timer::get_ticks().wrapping_sub(_t0) as u32,
                    core::sync::atomic::Ordering::Relaxed,
                );
            }
                }
            }
        }

        // 1. 全体背景の描画（body/html の background-color を優先、なければデフォルト白）
        let bg = self.page_bg_color.unwrap_or(0xFFFFFFFF);
        screen.boxfill(
            win_x,
            win_y + top_offset as u32,
            win_x + win_w,
            win_y + win_h,
            draw::Color(bg),
        );

        // --- ローディングアニメーションの描画 ---
        if self.loading {
            let lx = win_w / 2;
            let ly = (win_h + top_offset as u32) / 2;

            let mx_rel = self.mouse_x;
            let my_rel = self.mouse_y;

            let dx = mx_rel - lx as i32;
            let dy = my_rel - ly as i32;
            let dist = libm::sqrtf((dx * dx + dy * dy) as f32);

            let pull = if dist < 160.0f32 {
                (160.0f32 - dist) / 160.0f32
            } else {
                0.0f32
            };

            // 近づくほどスピナー中心がマウスへ吸い寄せられる (最大 14 ピクセル)
            let pull_x = (dx as f32 * 0.12f32 * pull) as i32;
            let pull_y = (dy as f32 * 0.12f32 * pull) as i32;

            let cx = (win_x as i32 + lx as i32 + pull_x) as u32;
            let cy = (win_y as i32 + ly as i32 + pull_y) as u32;

            // マウス近接度に応じて回転速度が 1.0倍 〜 2.5倍 に加速
            let speed_mult = 1.0f32 + pull * 1.5f32;
            self.loading_tick = self.loading_tick.wrapping_add(speed_mult as u32);

            // --- Draculaシームレス・カラーシフト (Pink -> Purple -> Cyan -> Green) ---
            let t = (self.loading_tick as f32) * 0.015f32;
            let phase = (t as i32) % 4;
            let ratio = t - libm::floorf(t);

            let c0 = (255f32, 121f32, 198f32); // Pink (#ff79c6)
            let c1 = (189f32, 147f32, 249f32); // Purple (#bd93f9)
            let c2 = (139f32, 233f32, 253f32); // Cyan (#8be9fd)
            let c3 = (80f32, 250f32, 123f32); // Green (#50fa7b)

            let (from, to) = match phase {
                0 => (c0, c1),
                1 => (c1, c2),
                2 => (c2, c3),
                _ => (c3, c0),
            };

            let r_col = from.0 + (to.0 - from.0) * ratio;
            let g_col = from.1 + (to.1 - from.1) * ratio;
            let b_col = from.2 + (to.2 - from.2) * ratio;

            let base_color = ((r_col as u32) << 16) | ((g_col as u32) << 8) | (b_col as u32);
            let inner_color = (((r_col * 0.7f32) as u32) << 16)
                | (((g_col * 0.9f32 + 25f32) as u32) << 8)
                | ((b_col as u32).max(180));

            let draw_dot = |px: u32, py: u32, alpha: u8, color_val: u32| {
                for dy in -3..=3 {
                    for dx in -3..=3 {
                        let dist = dx * dx + dy * dy;
                        if dist <= 9 {
                            let a = if dist <= 4 { alpha } else { alpha / 2 };
                            screen.draw_pixel_alpha(
                                (px as i32 + dx) as u32,
                                (py as i32 + dy) as u32,
                                draw::Color(color_val),
                                a,
                            );
                        }
                    }
                }
            };

            // 1. 外側のサークル (8ドット, 時計回り)
            let r_out = 28.0f32 + libm::sinf(self.loading_tick as f32 * 0.05f32) * 5.0f32;
            for i in 0..8 {
                let angle = (i as f32) * (core::f32::consts::PI / 4.0)
                    + (self.loading_tick as f32 * 0.02f32);
                let dx = libm::cosf(angle) * r_out;
                let dy = libm::sinf(angle) * r_out;

                let active_idx = (self.loading_tick / 4) % 8;
                let distance = (i - active_idx as i32 + 8) % 8;
                let alpha = match distance {
                    0 => 255,
                    1 => 180,
                    2 => 120,
                    3 => 70,
                    _ => 25,
                };

                let dot_x = (cx as f32 + dx) as u32;
                let dot_y = (cy as f32 + dy) as u32;
                draw_dot(dot_x, dot_y, alpha, base_color);
            }

            // 2. 内側のサークル (6ドット, 反時計回り)
            let r_in = 14.0f32 - libm::cosf(self.loading_tick as f32 * 0.07f32) * 3.0f32;
            for i in 0..6 {
                let angle = (i as f32) * (core::f32::consts::PI / 3.0)
                    - (self.loading_tick as f32 * 0.035f32);
                let dx = libm::cosf(angle) * r_in;
                let dy = libm::sinf(angle) * r_in;

                let active_idx = (self.loading_tick / 5) % 6;
                let distance = (i - active_idx as i32 + 6) % 6;
                let alpha = match distance {
                    0 => 230,
                    1 => 160,
                    2 => 100,
                    _ => 20,
                };

                let dot_x = (cx as f32 + dx) as u32;
                let dot_y = (cy as f32 + dy) as u32;
                draw_dot(dot_x, dot_y, alpha, inner_color);
            }

            screen.draw_string_ja_size_bg(
                cx - 75,
                cy + 45,
                "Loading Secure Page...",
                14,
                draw::Color(theme.sysmon_accent),
                draw::Color(bg),
            );
            self.dirty = true;
            self.dirty_reason = "render.rs:285";
            return;
        }

        // 【2026-07-26診断】実機で `.hero` の背景は描画されるのに内部テキストが
        // 見えない件の切り分け。要素の並び順（＝描画順）と座標・背景色・テキストを
        // 先頭から一定数だけ出力し、(a) テキスト要素がそもそも存在するか、
        // (b) 存在するなら座標が可視範囲か、(c) 背景矩形より後に描かれているか、
        // を確定させる。
        {
            static DIAG_ONCE: core::sync::atomic::AtomicBool =
                core::sync::atomic::AtomicBool::new(false);
            // `.hero` の背景色(#ff6b6b)を持つ要素が現れた回＝実サイトのCSSが
            // 実際に適用された回だけを対象にする（CSS 未適用の初回描画で
            // 発火してしまうと欲しい情報が取れないため）。
            let hero_idx = self
                .elements
                .iter()
                .position(|e| e.bg_color == Some(0xFF6B6B) || e.bg_color == Some(0xFFFF6B6B));
            if let Some(hi) = hero_idx {
                if !DIAG_ONCE.swap(true, core::sync::atomic::Ordering::Relaxed) {
                    crate::warn!(
                        "[HERO][DIAG] elements={} hero_idx={} scroll_y={} top_offset={} win_h={}",
                        self.elements.len(),
                        hi,
                        self.scroll_y,
                        top_offset,
                        win_h
                    );
                    // ヒーロー要素とその直後（子要素が続くはず）を出力する。
                    let start = hi.saturating_sub(2);
                    for (i, el) in self.elements.iter().enumerate().skip(start).take(22) {
                        let t: String = el.text.trim().chars().take(18).collect();
                        crate::warn!(
                            "[HERO][DIAG] #{} y={} h={} x={} w={} bg={:?} color=0x{:06x} fs={} text={:?}",
                            i,
                            el.y_offset,
                            el.height,
                            el.x_offset,
                            el.width,
                            el.bg_color,
                            el.color & 0xFFFFFF,
                            el.font_size,
                            t
                        );
                    }
                }
            }
        }

        // 必要な画像を事前にロードしてキャッシュに入れる
        // 【2026-07-31計測】draw が 1 フレーム約 3 秒かかる内訳を切り分ける。
        // `get_ticks` は atomic load なので安価（`get_system_time_us` は
        // `mrs` 2 回＋128bit 除算で、細かく呼ぶと計測対象を歪める）。
        let t_pre = crate::kernel::timer::get_ticks();
        // 【2026-08-05】ここは**毎フレーム**、可視要素すべての URL を
        // `String` で複製していた（`ensure_image_cached` が `&mut self` を
        // 要るので、`self.elements` を借りたまま呼べないため）。
        //
        // だが `ensure_image_cached` は「取得済み」「取得試行済み」なら
        // 何もせず戻る。**その判定を複製の前に持ってくれば、
        // 定常状態では 1 つも複製しなくて済む**。
        // 判定に使う `image_cache` / `image_attempted` の参照は
        // `self.elements` の参照と両立する（どちらも不変借用）。
        //
        // 同じ理由で `background_image_urls` も、まだ入っていないものだけ積む。
        let mut needed_images = alloc::vec::Vec::new();
        let mut bg_urls: alloc::vec::Vec<alloc::string::String> = alloc::vec::Vec::new();
        {
            // 取得を要求する必要があるか（複製する価値があるか）。
            let want = |me: &Self, u: &str| {
                !u.is_empty() && !me.image_cache.contains_key(u) && !me.image_attempted.contains(u)
            };
            for el in &self.elements {
                let el_y = el.y_offset - self.scroll_y + top_offset;
                if el_y + el.height < top_offset || el_y > win_h as i32 {
                    continue;
                }
                if el.is_img && want(self, &el.video_src) {
                    needed_images.push(el.video_src.clone());
                }
                // 背景画像は取得を省略する対象として記録しておく
                // （`ensure_image_cached` が参照する）。
                if let Some(ref bg_img) = el.bg_image {
                    if !self.background_image_urls.contains(bg_img.as_str()) {
                        bg_urls.push(bg_img.clone());
                    }
                    if want(self, bg_img) {
                        needed_images.push(bg_img.clone());
                    }
                }
                for extra in &el.bg_images {
                    if !self.background_image_urls.contains(extra.as_str()) {
                        bg_urls.push(extra.clone());
                    }
                    if want(self, extra) {
                        needed_images.push(extra.clone());
                    }
                }
                if el.is_li && want(self, &el.list_style_image) {
                    needed_images.push(el.list_style_image.clone());
                }
            }
        }
        for u in bg_urls {
            self.background_image_urls.insert(u);
        }
        for img_path in needed_images {
            self.ensure_image_cached(&img_path);
        }

        self.links.clear();

        // CSS `cursor: text` の判定を毎フレーム作り直す（後述のループ内で
        // ホバー中の要素が見つかれば true に立てる。「後勝ち＝最前面寄り」で、
        // z_index 昇順ループの最後にマッチした要素を優先する既存の他の
        // ホバー判定と同じ方針）。
        self.hovered_cursor_is_text = false;

        let t_imgprep = crate::kernel::timer::get_ticks();
        super::draw_helpers::BG_IMG_TICKS.store(0, core::sync::atomic::Ordering::Relaxed);
        super::draw_helpers::GRAD_TICKS.store(0, core::sync::atomic::Ordering::Relaxed);
        crate::kernel::draw::TEXT_DRAW_TICKS.store(0, core::sync::atomic::Ordering::Relaxed);
        super::draw_helpers::IMG_TICKS.store(0, core::sync::atomic::Ordering::Relaxed);
        crate::kernel::draw::BOXFILL_TICKS.store(0, core::sync::atomic::Ordering::Relaxed);
        crate::kernel::draw::SHADOW_TICKS.store(0, core::sync::atomic::Ordering::Relaxed);
        crate::kernel::draw::RRECT_TICKS.store(0, core::sync::atomic::Ordering::Relaxed);
        crate::kernel::draw::PIXBG_TICKS.store(0, core::sync::atomic::Ordering::Relaxed);
        super::draw_helpers::OTHERFILL_TICKS.store(0, core::sync::atomic::Ordering::Relaxed);
        super::draw_helpers::BORDER_TICKS.store(0, core::sync::atomic::Ordering::Relaxed);
        // Sort elements by z_index (stable sort preserves document order within same z)
        let mut sorted_indices: Vec<usize> = (0..self.elements.len()).collect();
        // `(実効 z, ツリー深さ)` の昇順。深さを第 2 キーにするのが要点で、
        // 要素列は祖先が先に積まれるとは限らないため、z だけで並べると
        // 祖先の背景が子孫を塗り潰す（`spec/paint_order.md` 不変条件 I-1）。
        sorted_indices.sort_by_key(|&i| {
            super::paint_order::paint_sort_key(
                self.elements[i].z_index,
                self.elements[i].paint_depth,
            )
        });

        for &ei in &sorted_indices {
            let el = &self.elements[ei];
            let el_start = crate::kernel::timer::get_ticks();


            // visibility: hidden — skip drawing but keep space
            if el.visibility_hidden {
                continue;
            }

            // 位置確定は layout 側で完了（relative/absolute/fixed は content.x/y に反映済み。
            // absolute は最近傍 positioned 祖先基準、fixed は viewport 原点基準）。
            // 描画側は fixed のスクロール非追従のみ扱う（absolute/relative はページと共にスクロール）。
            // サブスクロールコンテナに属する子孫はコンテナ固有の scroll_y も引く。
            let sub_scroll_y = if el.scroll_container_id.is_empty() {
                0
            } else {
                self.scroll_regions
                    .get(&el.scroll_container_id)
                    .copied()
                    .unwrap_or(0)
            };
            let natural_y = el.y_offset + el.transform_ty - self.scroll_y - sub_scroll_y + top_offset;
            let el_y = if el.is_fixed {
                el.y_offset + el.transform_ty + top_offset
            } else if el.is_sticky {
                // 計算本体は純粋モジュールへ切り出した（試験は `test_sticky.rs`）。
                if let Some(top) = el.sticky_top {
                    super::sticky::sticky_top_y(
                        natural_y,
                        top_offset,
                        top,
                        el.sticky_bound_max_y,
                        el.transform_ty,
                        self.scroll_y,
                        sub_scroll_y,
                    )
                } else if let Some(bottom) = el.sticky_bottom {
                    super::sticky::sticky_bottom_y(natural_y, win_h as i32, bottom, el.height)
                } else {
                    natural_y
                }
            } else {
                natural_y
            };
            let el_x = el.x_offset + el.transform_tx;

            if el_y + el.height < top_offset || el_y > win_h as i32 {
                continue;
            }
            // overflow: hidden / scroll のピクセルクリップ
            // 【2026-07-25発見・修正】`el.clip_y1`はクリップ未設定時の既定値として
            // `i32::MAX`（実質「無制限」を表す）が入るが、以前は
            // `el.clip_y1 - self.scroll_y + top_offset`を素の`+`/`-`で計算していた
            // ため、`i32::MAX + top_offset`が符号付き整数オーバーフローを起こし、
            // 巨大な負の値へ折り返っていた。この結果`el_y >= clip_y1`が常に
            // 真になり、実サイトの`overflow:hidden`を持つ要素（nav等）の
            // 子孫テキストがすべて「クリップ範囲外」と誤判定されて描画から
            // 除外される、実サイトのレンダリングを丸ごと壊す重大バグだった。
            // `saturating_add`/`saturating_sub`でオーバーフロー時は
            // `i32::MAX`/`i32::MIN`に飽和させることで解消する。
            let has_overflow_clip = if el.overflow_hidden {
                let clip_y = el.clip_y0.saturating_sub(self.scroll_y).saturating_add(top_offset);
                let clip_y1 = el.clip_y1.saturating_sub(self.scroll_y).saturating_add(top_offset);
                if el_y + el.height <= clip_y || el_y >= clip_y1 {
                    continue;
                }
                if el_x + el.width <= el.clip_x0 || el_x >= el.clip_x1 {
                    continue;
                }
                // 部分重複要素のピクセル精度クリップ（`clip_x1`/`clip_y1`も
                // 未設定時`i32::MAX`のため、上記と同様`saturating_add`で防ぐ）。
                let sx0 = (win_x as i32).saturating_add(el.clip_x0).max(0) as u32;
                let sy0 = (win_y as i32).saturating_add(clip_y).max(0) as u32;
                let sx1 = (win_x as i32).saturating_add(el.clip_x1).max(0) as u32;
                let sy1 = (win_y as i32).saturating_add(clip_y1).max(0) as u32;
                screen.push_clip(sx0, sy0, sx1, sy1);
                true
            } else {
                false
            };

            let draw_y = win_y + el_y as u32;
            // position オフセットを el 参照から隠蔽して以降のコードで透過的に使えるようにする
            let draw_x_base = win_x as i32 + el_x;

            // CSS `cursor: text` の判定（要素カテゴリに関わらず共通の位置確定後に1回だけ行う）。
            if el.cursor_style == "text"
                && self.mouse_y >= draw_y as i32
                && self.mouse_y <= (draw_y + el.height as u32) as i32
                && self.mouse_x >= draw_x_base
                && self.mouse_x <= draw_x_base + el.width
            {
                self.hovered_cursor_is_text = true;
            }

            // CSS transform: scale(X/Y) — transform-origin を基準点に軸ごとに独立してサイズを拡縮。scale=1.0 なら無変換。
            let scale_x = el.transform_scale_x;
            let scale_y = el.transform_scale_y;
            let eff_w = if (scale_x - 1.0f32).abs() < 0.001 {
                el.width
            } else {
                (el.width as f32 * scale_x) as i32
            };
            let eff_h = if (scale_y - 1.0f32).abs() < 0.001 {
                el.height
            } else {
                (el.height as f32 * scale_y) as i32
            };
            // scale ≠ 1 のとき: transform-origin の位置を保つよう draw_x_base / draw_y を再調整。
            // 既定 (0.5, 0.5) は従来どおり中心固定と等価。
            let draw_x_base =
                draw_x_base + ((el.width - eff_w) as f32 * el.transform_origin_x) as i32;
            // 【2026-08-04 発見・修正】ここで無条件に `.max(0)` していた。
            //
            // `draw_y` は `win_y + el_y as u32` で作られており、
            // 画面より上へスクロールアウトした要素では `el_y` が負のため
            // u32 へ折り返している（`draw_y as i32` は負）。
            // そこへ `.max(0)` を掛けると **0 に固定**され、
            // 高さはそのままなので `y=0..height` を塗ってしまう。
            //
            // 実測: 要素 #50（`y_offset=529 h=740`、スクロール後 `el_y=-700`）が
            // `boxfill(100, 0, 1024, 740)` を実行し、**可視領域を丸ごと覆っていた**。
            // `z=10` なので研究カード（`z=5`）の後に塗られ、カードが消えていた。
            //
            // この補正が要るのは `transform: scale()` で寸法が変わったときだけ。
            // 補正量が 0 なら元の値（折り返し済み u32）をそのまま使う。
            // 折り返した値は `boxfill` の `cy0 >= h` で早期 return されるため、
            // 画面外の要素は正しく描かれない。
            let origin_adj = ((el.height - eff_h) as f32 * el.transform_origin_y) as i32;
            let draw_y = if origin_adj == 0 {
                draw_y
            } else {
                (draw_y as i32).wrapping_add(origin_adj) as u32
            };

            if el.is_hr {
                screen.boxfill(
                    draw_x_base as u32,
                    draw_y + 3,
                    win_x + win_w - 40,
                    draw_y + 5,
                    draw::Color(el.color),
                );
            } else if let Some(cid) = el.canvas_ctx_id {
                // 【2026-09-03】`<canvas>` のバッキングストアを画面へ貼る。
                //
                // JS が描いた内容は `os_lib/canvas2d` の registry にある
                // `Surface`（ARGB8888）に入っている。ここで要素の矩形へ
                // 転送することで、初めて画面に出る。
                //
                // 面のサイズと要素のサイズが違う場合は最近傍で拡縮する
                // （CSS で `width`/`height` を指定した canvas は、属性の
                // 解像度と表示サイズが食い違うのが普通）。
                crate::os_lib::canvas2d::with_context(cid, |c| {
                    let sw = c.surface.width as i32;
                    let sh = c.surface.height as i32;
                    if sw <= 0 || sh <= 0 || el.width <= 0 || el.height <= 0 {
                        return;
                    }
                    for dy in 0..el.height {
                        let py = el_y + dy;
                        if py < top_offset || py >= win_h as i32 {
                            continue;
                        }
                        // 最近傍サンプリング。
                        let sy = (dy as i64 * sh as i64 / el.height as i64) as i32;
                        for dx in 0..el.width {
                            let px = el_x + dx;
                            let sx = (dx as i64 * sw as i64 / el.width as i64) as i32;
                            if sx < 0 || sy < 0 || sx >= sw || sy >= sh {
                                continue;
                            }
                            let argb = c.surface.pixels[(sy * sw + sx) as usize];
                            let a = ((argb >> 24) & 0xFF) as u8;
                            if a == 0 {
                                continue;
                            }
                            screen.draw_pixel_alpha(
                                px as u32,
                                py as u32,
                                draw::Color(argb & 0x00FF_FFFF),
                                a,
                            );
                        }
                    }
                });
            } else if el.is_img {
                let img_clip = if el.clip_path.is_empty() {
                    None
                } else {
                    parse_clip_shape(&el.clip_path, el.width, el.height)
                };
                let mut bmp_drawn = false;
                if !el.video_src.is_empty() {
                    // キャッシュから object-fit/object-position を反映して描画する
                    if let Some(img) = self.image_cache.get(&el.video_src) {
                        draw_img_object_fit(
                            screen,
                            img,
                            el,
                            draw_x_base,
                            draw_y as i32,
                            &img_clip,
                        );
                        bmp_drawn = true;
                    }
                }

                if !bmp_drawn {
                    let hash = hash_str(&el.img_alt);
                    let r1 = (hash & 0x7F) + 0x80;
                    let g1 = ((hash >> 8) & 0x7F) + 0x80;
                    let b1 = ((hash >> 16) & 0x7F) + 0x80;
                    let c1 = 0xFF000000 | (r1 << 16) | (g1 << 8) | b1;

                    let r2 = ((hash >> 4) & 0x7F) + 0x60;
                    let g2 = ((hash >> 12) & 0x7F) + 0x60;
                    let b2 = ((hash >> 20) & 0x7F) + 0x60;
                    let c2 = 0xFF000000 | (r2 << 16) | (g2 << 8) | b2;

                    let x0 = (draw_x_base as u32) as i32;
                    let y0 = draw_y as i32;
                    let x1 = (draw_x_base as u32 + el.width as u32) as i32;
                    let y1 = (draw_y + el.height as u32) as i32;

                    if el.border_radius != (0, 0, 0, 0) {
                        screen.draw_rounded_rect_fill(
                            x0,
                            y0,
                            x1,
                            y1,
                            el.border_radius,
                            draw::Color(c1),
                        );
                        screen.draw_rounded_rect_border(
                            x0,
                            y0,
                            x1,
                            y1,
                            el.border_radius,
                            draw::Color(el.border_color.unwrap_or(theme.browser_secondary)),
                            el.border_style.as_str(),
                        );
                    } else {
                        draw_gradation(screen, x0, y0, el.width, el.height, c1, c2);
                        draw_border_with_style(
                            screen,
                            x0,
                            y0,
                            x1,
                            y1,
                            el.border_color.unwrap_or(theme.browser_secondary),
                            el.border_style,
                        );
                    }

                    let label = alloc::format!("[Image: {}]", el.img_alt);
                    screen.draw_string_ja_size_bg(
                        draw_x_base as u32 + 13,
                        draw_y + 9,
                        &label,
                        16,
                        draw::Color(theme.browser_bg),
                        draw::Color(c1),
                    ); // 影
                    screen.draw_string_ja_size_bg(
                        draw_x_base as u32 + 12,
                        draw_y + 8,
                        &label,
                        16,
                        draw::Color(theme.browser_fg),
                        draw::Color(c1),
                    ); // 前景
                }

                let is_mixed = self.current_is_https && el.video_src.starts_with("http://");
                if is_mixed {
                    screen.boxfill(
                        draw_x_base as u32,
                        draw_y,
                        draw_x_base as u32 + 220,
                        draw_y + 20,
                        draw::Color(theme.error_fg),
                    );
                    screen.draw_string_ja_size_bg(
                        draw_x_base as u32 + 4,
                        draw_y + 2,
                        "⚠️ HTTP Mixed Blocked",
                        12,
                        draw::Color(theme.browser_fg),
                        draw::Color(theme.error_fg),
                    );
                }
            } else if el.is_video {
                let v_width = (win_w as i32 - 80).clamp(400, 800);
                let x0 = draw_x_base as u32;
                let y0 = draw_y;
                let x1 = draw_x_base as u32 + v_width as u32;
                let y1 = draw_y + el.height as u32;

                if el.border_radius != (0, 0, 0, 0) {
                    screen.draw_rounded_rect_fill(
                        x0 as i32,
                        y0 as i32,
                        x1 as i32,
                        y1 as i32,
                        el.border_radius,
                        draw::Color(theme.browser_bg),
                    );
                    screen.draw_rounded_rect_border(
                        x0 as i32,
                        y0 as i32,
                        x1 as i32,
                        y1 as i32,
                        el.border_radius,
                        draw::Color(el.border_color.unwrap_or(theme.browser_secondary)),
                        el.border_style.as_str(),
                    );
                } else {
                    screen.boxfill(x0, y0, x1, y1, draw::Color(theme.browser_bg));
                    draw_border_with_style(
                        screen,
                        x0 as i32,
                        y0 as i32,
                        x1 as i32,
                        y1 as i32,
                        el.border_color.unwrap_or(theme.browser_secondary),
                        el.border_style,
                    );
                }

                if self.video_playing {
                    let frame_opt = CURRENT_VIDEO_FRAME.lock().clone();
                    if let Some(frame) = frame_opt {
                        let dst_w = v_width as u32;
                        let dst_h = el.height as u32;
                        for row in 0..dst_h {
                            let src_row = (row * frame.height) / dst_h;
                            for col in 0..dst_w {
                                let src_col = (col * frame.width) / dst_w;
                                let idx = ((src_row * frame.width + src_col) as usize) * 3;
                                if idx + 3 <= frame.rgb_data.len() {
                                    let r = frame.rgb_data[idx];
                                    let g = frame.rgb_data[idx + 1];
                                    let b = frame.rgb_data[idx + 2];
                                    let color = draw::Color(
                                        0xFF000000
                                            | ((r as u32) << 16)
                                            | ((g as u32) << 8)
                                            | (b as u32),
                                    );
                                    screen.draw_pixel(x0 + col, y0 + row, color);
                                }
                            }
                        }
                    } else {
                        // ダウンロードまたはデコード待ちの間は黒画面＋ローディング表示
                        screen.boxfill(x0, y0, x1, y1, draw::Color(theme.video_bar_bg));
                        let cx = x0 + v_width as u32 / 2;
                        let cy = y0 + el.height as u32 / 2;
                        screen.draw_string_ja_size_bg(
                            cx - 50,
                            cy - 10,
                            "Loading Video...",
                            16,
                            draw::Color(theme.fn_bar_key_fg),
                            draw::Color(theme.video_bar_bg),
                        );
                    }
                    self.video_tick = self.video_tick.wrapping_add(1);
                    self.dirty = true; // 次フレーム描画のために再描画要求を立て続ける
                } else {
                    let cx = draw_x_base as u32 + v_width as u32 / 2;
                    let cy = draw_y + el.height as u32 / 2;
                    screen.boxfill(cx - 50, cy - 20, cx + 50, cy + 20, draw::Color(theme.browser_secondary));
                    draw_border_with_style(
                        screen,
                        (cx - 50) as i32,
                        (cy - 20) as i32,
                        (cx + 50) as i32,
                        (cy + 20) as i32,
                        el.border_color.unwrap_or(theme.success_fg),
                        el.border_style,
                    );
                    screen.draw_string_ja_size_bg(
                        cx - 30,
                        cy - 10,
                        "PLAY ▶",
                        16,
                        draw::Color(theme.success_fg),
                        draw::Color(theme.browser_secondary),
                    );
                }

                let bar_y = draw_y + 200;
                screen.boxfill(
                    draw_x_base as u32,
                    bar_y,
                    draw_x_base as u32 + v_width as u32,
                    bar_y + 40,
                    draw::Color(theme.video_bar_bg),
                );
                screen.boxfill(
                    draw_x_base as u32,
                    bar_y,
                    draw_x_base as u32 + v_width as u32,
                    bar_y + 1,
                    draw::Color(theme.video_bar_sep),
                );

                let play_lbl = if self.video_playing { "‖" } else { "▶" };
                screen.draw_string_ja_size_bg(
                    win_x + 55,
                    bar_y + 10,
                    play_lbl,
                    16,
                    draw::Color(theme.video_thumb_fg),
                    draw::Color(theme.video_bar_bg),
                );

                let sb_w = v_width - 320;
                if sb_w > 50 {
                    screen.boxfill(
                        win_x + 80,
                        bar_y + 18,
                        win_x + 80 + sb_w as u32,
                        bar_y + 22,
                        draw::Color(theme.video_bar_sep),
                    );
                    let progress = if self.video_playing {
                        (self.video_tick * 4) % sb_w as u32
                    } else {
                        (sb_w / 3) as u32
                    };
                    screen.boxfill(
                        win_x + 80,
                        bar_y + 18,
                        win_x + 80 + progress,
                        bar_y + 22,
                        draw::Color(theme.video_progress_fg),
                    );
                    screen.boxfill(
                        win_x + 80 + progress - 4,
                        bar_y + 14,
                        win_x + 80 + progress + 4,
                        bar_y + 26,
                        draw::Color(theme.video_thumb_fg),
                    );
                }

                if v_width > 260 {
                    let badge_x = draw_x_base as u32 + v_width as u32 - 240;
                    screen.boxfill(
                        badge_x,
                        bar_y + 8,
                        badge_x + 230,
                        bar_y + 32,
                        draw::Color(theme.privacy_badge_bg),
                    );
                    draw_border(
                        screen,
                        badge_x as i32,
                        (bar_y + 8) as i32,
                        (badge_x + 230) as i32,
                        (bar_y + 32) as i32,
                        theme.video_progress_fg,
                    );
                    screen.draw_string_ja_size_bg(
                        badge_x + 12,
                        bar_y + 12,
                        "🔒 Privacy Shield Active",
                        12,
                        draw::Color(theme.privacy_badge_fg),
                        draw::Color(theme.privacy_badge_bg),
                    );
                }
            } else if el.input_kind == 1 || el.input_kind == 2 {
                // checkbox (input_kind=1) / radio (input_kind=2) の描画。
                // form_values が非空ならチェック状態。box は左寄せの小さな四角/円。
                let checked = !self
                    .form_values
                    .get(&el.element_id)
                    .cloned()
                    .unwrap_or_default()
                    .is_empty();
                let box_sz: u32 = 16;
                let bx0 = draw_x_base as u32;
                let by0 = draw_y + (el.height as u32).saturating_sub(box_sz) / 2;
                let bx1 = bx0 + box_sz;
                let by1 = by0 + box_sz;
                let border_col = theme.form_input_border;
                // accent-color: チェック状態の塗り色を上書きできる（未指定ならテーマ既定色）。
                let fill_col = if checked {
                    el.accent_color.unwrap_or(theme.form_checkbox_checked)
                } else {
                    theme.form_checkbox_unchecked
                };
                if el.input_kind == 2 {
                    // radio: 角丸の強い四角で円を近似。チェック時は中央にドット。
                    screen.draw_rounded_rect_fill(
                        bx0 as i32,
                        by0 as i32,
                        bx1 as i32,
                        by1 as i32,
                        ((box_sz / 2) as i32, (box_sz / 2) as i32, (box_sz / 2) as i32, (box_sz / 2) as i32),
                        draw::Color(fill_col),
                    );
                    screen.draw_rounded_rect_border(
                        bx0 as i32,
                        by0 as i32,
                        bx1 as i32,
                        by1 as i32,
                        ((box_sz / 2) as i32, (box_sz / 2) as i32, (box_sz / 2) as i32, (box_sz / 2) as i32),
                        draw::Color(border_col),
                        "solid",
                    );
                    if checked {
                        let cx = (bx0 + bx1) / 2;
                        let cy = (by0 + by1) / 2;
                        screen.draw_rounded_rect_fill(
                            (cx - 3) as i32,
                            (cy - 3) as i32,
                            (cx + 3) as i32,
                            (cy + 3) as i32,
                            (3, 3, 3, 3),
                            draw::Color(theme.form_input_bg),
                        );
                    }
                } else {
                    // checkbox: 四角。チェック時は中央に塗りつぶしマーク。
                    screen.boxfill(bx0, by0, bx1, by1, draw::Color(fill_col));
                    draw_border_with_style(
                        screen, bx0 as i32, by0 as i32, bx1 as i32, by1 as i32, border_col, super::BorderStyle::Solid,
                    );
                    if checked {
                        screen.boxfill(bx0 + 4, by0 + 4, bx1 - 4, by1 - 4, draw::Color(theme.form_input_bg));
                    }
                }
            } else if el.input_kind == 3 {
                // select の描画: 角丸ボックス + 選択中ラベル + 右端に下向き矢印。
                let bg_col = theme.form_input_bg;
                let border_col = theme.form_input_border;
                let x0 = draw_x_base as u32;
                let y0 = draw_y;
                let x1 = draw_x_base as u32 + el.width as u32;
                let y1 = draw_y + el.height as u32;
                screen.boxfill(x0, y0, x1, y1, draw::Color(bg_col));
                draw_border_with_style(
                    screen, x0 as i32, y0 as i32, x1 as i32, y1 as i32, border_col, super::BorderStyle::Solid,
                );
                // 選択中の value からラベルを解決。
                let cur_val = self
                    .form_values
                    .get(&el.element_id)
                    .cloned()
                    .unwrap_or_default();
                let label = el
                    .select_options
                    .iter()
                    .find(|(v, _)| *v == cur_val)
                    .map(|(_, l)| l.clone())
                    .or_else(|| el.select_options.first().map(|(_, l)| l.clone()))
                    .unwrap_or_default();
                let text_y = y0 + (el.height as u32).saturating_sub(16) / 2;
                screen.push_clip(x0, y0, x1.saturating_sub(18), y1);
                screen.draw_string_ja_size_bg(
                    x0 + 6,
                    text_y,
                    &label,
                    16,
                    draw::Color(theme.form_input_fg),
                    draw::Color(bg_col),
                );
                screen.pop_clip();
                // 下向き矢印（▼）を右端に。
                let arrow_x = x1.saturating_sub(16);
                screen.draw_string_ja_size_bg(
                    arrow_x,
                    text_y,
                    "▼",
                    12,
                    draw::Color(theme.form_input_accent),
                    draw::Color(bg_col),
                );
            } else if el.input_kind == 4 {
                // <progress>/<meter> の描画: トラック（背景）+ 塗りつぶし（比率分の幅）。
                // 比率は layout 側で input_value に文字列化して格納済み（0.0..1.0）。
                let ratio: f32 = el.input_value.parse().unwrap_or(0.0);
                let x0 = draw_x_base as u32;
                let y0 = draw_y;
                let x1 = draw_x_base as u32 + el.width as u32;
                let y1 = draw_y + el.height as u32;
                let track_col = theme.form_input_bg;
                let fill_col = el.accent_color.unwrap_or(theme.form_checkbox_checked);
                screen.boxfill(x0, y0, x1, y1, draw::Color(track_col));
                let fill_x1 = x0 + ((x1 - x0) as f32 * ratio) as u32;
                if fill_x1 > x0 {
                    screen.boxfill(x0, y0, fill_x1, y1, draw::Color(fill_col));
                }
                draw_border_with_style(
                    screen, x0 as i32, y0 as i32, x1 as i32, y1 as i32,
                    theme.form_input_border, super::BorderStyle::Solid,
                );
            } else if el.input_kind == 5 {
                // <input type="range"> の描画: 中央の細いトラック + 現在値位置のつまみ（丸）。
                // min/max は layout 側で select_options に (name, value) として格納済み。
                let get = |k: &str, d: f32| -> f32 {
                    el.select_options
                        .iter()
                        .find(|(n, _)| n == k)
                        .and_then(|(_, v)| v.parse::<f32>().ok())
                        .unwrap_or(d)
                };
                let min = get("min", 0.0);
                let max = get("max", 100.0);
                let cur: f32 = self
                    .form_values
                    .get(&el.element_id)
                    .and_then(|v| v.parse().ok())
                    .unwrap_or((min + max) / 2.0);
                let ratio = if max > min { ((cur - min) / (max - min)).clamp(0.0, 1.0) } else { 0.0 };
                let x0 = draw_x_base as u32;
                let x1 = draw_x_base as u32 + el.width as u32;
                let mid_y = draw_y + el.height as u32 / 2;
                let track_h = 4u32;
                screen.boxfill(x0, mid_y.saturating_sub(track_h / 2), x1, mid_y + track_h / 2, draw::Color(theme.form_input_bg));
                let thumb_r = (el.height as u32 / 2).clamp(6, 10);
                let thumb_x = (x0 + ((x1 - x0) as f32 * ratio) as u32).clamp(x0, x1);
                let thumb_col = el.accent_color.unwrap_or(theme.form_checkbox_checked);
                screen.draw_rounded_rect_fill(
                    (thumb_x.saturating_sub(thumb_r)) as i32,
                    (mid_y.saturating_sub(thumb_r)) as i32,
                    (thumb_x.saturating_add(thumb_r)) as i32,
                    (mid_y.saturating_add(thumb_r)) as i32,
                    (thumb_r as i32, thumb_r as i32, thumb_r as i32, thumb_r as i32),
                    draw::Color(thumb_col),
                );
                draw_border_with_style(
                    screen,
                    (thumb_x.saturating_sub(thumb_r)) as i32,
                    (mid_y.saturating_sub(thumb_r)) as i32,
                    (thumb_x.saturating_add(thumb_r)) as i32,
                    (mid_y.saturating_add(thumb_r)) as i32,
                    theme.form_input_border,
                    super::BorderStyle::Solid,
                );
            } else if el.is_input || el.is_textarea {
                let is_focused = self.focused_id.as_ref() == Some(&el.element_id);
                let bg_col = theme.form_input_bg;
                let border_col = if is_focused { theme.form_input_border_focus } else { theme.form_input_border };

                let x0 = draw_x_base as u32;
                let y0 = draw_y;
                let x1 = draw_x_base as u32 + el.width as u32;
                let y1 = draw_y + el.height as u32;

                if el.border_radius != (0, 0, 0, 0) {
                    screen.draw_rounded_rect_fill(
                        x0 as i32,
                        y0 as i32,
                        x1 as i32,
                        y1 as i32,
                        el.border_radius,
                        draw::Color(bg_col),
                    );
                    screen.draw_rounded_rect_border(
                        x0 as i32,
                        y0 as i32,
                        x1 as i32,
                        y1 as i32,
                        el.border_radius,
                        draw::Color(el.border_color.unwrap_or(border_col)),
                        el.border_style.as_str(),
                    );
                } else {
                    screen.boxfill(x0, y0, x1, y1, draw::Color(bg_col));
                    draw_border_with_style(
                        screen,
                        x0 as i32,
                        y0 as i32,
                        x1 as i32,
                        y1 as i32,
                        el.border_color.unwrap_or(border_col),
                        el.border_style,
                    );
                }

                let mut show_cursor = false;
                let mut cursor_pos = 0;

                let text_val = if is_focused {
                    if self.active_text_box.is_none() && !el.element_id.is_empty() {
                        let val = self
                            .form_values
                            .get(&el.element_id)
                            .cloned()
                            .unwrap_or_default();
                        let restore = if self.focus_caret_owner == el.element_id {
                            Some(self.focus_cursor_pos)
                        } else {
                            None
                        };
                        self.active_text_box =
                            Some(Self::build_text_box(&val, el.is_textarea, restore));
                    }

                    if let Some(ref tb) = self.active_text_box {
                        show_cursor = (self.loading_tick / 15).is_multiple_of(2);
                        if show_cursor {
                            self.dirty = true;
                            self.dirty_reason = "render.rs:1055";
                        }
                        cursor_pos = tb.cursor_pos;
                        tb.text.clone()
                    } else {
                        String::new()
                    }
                } else if !el.element_id.is_empty() {
                    self.form_values
                        .get(&el.element_id)
                        .cloned()
                        .unwrap_or(String::new())
                } else {
                    String::new()
                };

                if el.is_textarea {
                    let lines = Self::wrap_editor_lines(&text_val, el.width, self.editor_wrap);

                    let max_scroll_y = (lines.len() as i32 - (el.height / 20) + 1).max(0);
                    if self.editor_scroll_y > max_scroll_y {
                        self.editor_scroll_y = max_scroll_y;
                    }
                    if self.editor_scroll_y < 0 {
                        self.editor_scroll_y = 0;
                    }

                    let start_line = self.editor_scroll_y as usize;
                    let mut line_y = y0 + 8;

                    let cx0 = x0;
                    let cy0 = y0;
                    let cx1 = x1;
                    let cy1 = y1;
                    screen.push_clip(cx0, cy0, cx1, cy1);

                    if text_val.is_empty() && !el.placeholder.is_empty() {
                        screen.draw_string_ja_size_bg(
                            x0 + 8,
                            y0 + 8,
                            &el.placeholder,
                            16,
                            draw::Color(el.placeholder_color.unwrap_or(theme.editor_dim_fg)),
                            draw::Color(bg_col),
                        );
                    }

                    let has_crlf = if is_focused {
                        self.active_text_box
                            .as_ref()
                            .map(|tb| tb.text.contains("\r\n"))
                            .unwrap_or(false)
                    } else if !el.element_id.is_empty() {
                        self.form_values
                            .get(&el.element_id)
                            .map(|s| s.contains("\r\n"))
                            .unwrap_or(false)
                    } else {
                        false
                    };
                    let has_cr = if is_focused {
                        self.active_text_box
                            .as_ref()
                            .map(|tb| tb.text.contains('\r'))
                            .unwrap_or(false)
                    } else if !el.element_id.is_empty() {
                        self.form_values
                            .get(&el.element_id)
                            .map(|s| s.contains('\r'))
                            .unwrap_or(false)
                    } else {
                        false
                    };

                    let newline_mark = if has_crlf {
                        "↵"
                    } else if has_cr {
                        "←"
                    } else {
                        "↓"
                    };

                    let filename = self
                        .form_values
                        .get("filename")
                        .map(|s| s.as_str())
                        .unwrap_or("Untitled");
                    let end_marker = if filename == "Untitled" {
                        "[EOB]"
                    } else {
                        "[EOF]"
                    };

                    let total_chars = text_val.chars().count();
                    let mut global_char_idx = 0;
                    for i in 0..lines.len() {
                        let (line_text, is_phys_end) = &lines[i];
                        let is_visible = i >= start_line && line_y + 16 <= y1;
                        let draw_x = if self.editor_wrap {
                            x0 + 8
                        } else {
                            (x0 as i32 + 8 - self.editor_scroll_x) as u32
                        };

                        let line_start_idx = global_char_idx;
                        let line_len = line_text.chars().count();
                        let has_newline = *is_phys_end && (line_start_idx + line_len < total_chars);
                        let line_end_idx =
                            line_start_idx + line_len + (if has_newline { 1 } else { 0 });

                        let is_last_line = i == lines.len() - 1;
                        let is_cursor_line = is_focused
                            && ((cursor_pos >= line_start_idx && cursor_pos < line_end_idx)
                                || (is_last_line && cursor_pos == line_end_idx));

                        if is_cursor_line && is_visible {
                            // 下線を描画（テキストエリアの左マージン2pxからスクロールバー手前まで）
                            screen.boxfill(
                                x0 + 2,
                                line_y + 18,
                                x1.saturating_sub(8),
                                line_y + 19,
                                draw::Color(theme.editor_line_highlight),
                            );
                        }

                        let mut cur_x = draw_x;
                        for c in line_text.chars() {
                            if is_focused
                                && global_char_idx == cursor_pos
                                && is_visible
                                && show_cursor
                            {
                                // 縦棒カーソル。半角=青系 / 全角(FEP)=赤系。
                                screen.boxfill(
                                    cur_x,
                                    line_y,
                                    cur_x + 1,
                                    line_y + 16,
                                    draw::Color(el.caret_color.unwrap_or_else(crate::kernel::ime::cursor_color)),
                                );
                            }

                            let cw = crate::kernel::vector_font::get_vector_char_width(c, 16);
                            if is_visible {
                                let (draw_char, char_color) = match c {
                                    ' ' => ('_', draw::Color(theme.editor_dim_fg)),
                                    '\u{3000}' => ('□', draw::Color(theme.editor_dim_fg)),
                                    '\t' => ('⇥', draw::Color(theme.editor_dim_fg)),
                                    _ => (c, draw::Color(theme.form_input_fg)),
                                };
                                let s_char = String::from(draw_char);
                                screen.draw_string_ja_size_bg(
                                    cur_x,
                                    line_y,
                                    &s_char,
                                    16,
                                    char_color,
                                    draw::Color(bg_col),
                                );
                            }
                            cur_x += cw;
                            global_char_idx += 1;
                        }

                        if is_focused && global_char_idx == cursor_pos && is_visible && show_cursor
                        {
                            screen.boxfill(
                                cur_x,
                                line_y,
                                cur_x + 1,
                                line_y + 16,
                                draw::Color(el.caret_color.unwrap_or_else(crate::kernel::ime::cursor_color)),
                            );
                        }

                        if *is_phys_end {
                            if is_visible {
                                screen.draw_string_ja_size_bg(
                                    cur_x,
                                    line_y,
                                    newline_mark,
                                    16,
                                    draw::Color(theme.editor_dim_fg),
                                    draw::Color(bg_col),
                                );
                            }
                            if let Some(mark_ch) = newline_mark.chars().next() {
                                cur_x +=
                                    crate::kernel::vector_font::get_vector_char_width(mark_ch, 16);
                            }
                            if global_char_idx < total_chars {
                                global_char_idx += 1;
                            }
                        }

                        if i == lines.len() - 1 && is_visible {
                            screen.draw_string_ja_size_bg(
                                cur_x,
                                line_y,
                                end_marker,
                                16,
                                draw::Color(theme.editor_dim_fg),
                                draw::Color(bg_col),
                            );
                        }

                        if is_visible {
                            line_y += 20;
                        }
                    }

                    screen.pop_clip();

                    // textarea のスクロールバー（行単位スクロールを px に換算して共通ヘルパーで描画）
                    let content_px = lines.len() as i32 * 20 + 16;
                    screen.draw_vscrollbar(
                        x1.saturating_sub(8),
                        y0 as i32,
                        el.height,
                        content_px,
                        el.height,
                        self.editor_scroll_y * 20,
                    );
                } else {
                    // 単一行 input: テキストとカーソル（縦棒）を描画する。
                    // カーソル色は半角=青系 / 全角(FEP)=赤系。
                    // 単一行ではカーソル行表示（下線）は行わない（マルチライン textarea のみ）。
                    let text_y = y0 + (el.height as u32 - 16) / 2;
                    screen.push_clip(x0, y0, x1, y1);
                    // 値が空なら placeholder 属性のテキストを薄色で表示する（未フォーカス/フォーカス
                    // どちらでも、実際の値が入力されるまで表示し続けるのが標準ブラウザの挙動）。
                    if text_val.is_empty() && !el.placeholder.is_empty() {
                        screen.draw_string_ja_size_bg(
                            x0 + 8,
                            text_y,
                            &el.placeholder,
                            16,
                            draw::Color(el.placeholder_color.unwrap_or(theme.editor_dim_fg)),
                            draw::Color(bg_col),
                        );
                    }
                    let mut cur_x = x0 + 8;
                    let mut idx = 0usize;
                    for c in text_val.chars() {
                        if is_focused && idx == cursor_pos && show_cursor {
                            screen.boxfill(
                                cur_x,
                                text_y,
                                cur_x + 1,
                                text_y + 16,
                                draw::Color(el.caret_color.unwrap_or_else(crate::kernel::ime::cursor_color)),
                            );
                        }
                        let cw = crate::kernel::vector_font::get_vector_char_width(c, 16);
                        screen.draw_string_ja_size_bg(
                            cur_x,
                            text_y,
                            &String::from(c),
                            16,
                            draw::Color(theme.form_input_fg),
                            draw::Color(bg_col),
                        );
                        cur_x += cw;
                        idx += 1;
                    }
                    if is_focused && idx == cursor_pos && show_cursor {
                        screen.boxfill(
                            cur_x,
                            text_y,
                            cur_x + 1,
                            text_y + 16,
                            draw::Color(el.caret_color.unwrap_or_else(crate::kernel::ime::cursor_color)),
                        );
                    }
                    screen.pop_clip();
                }
            } else if el.is_button {
                let is_hovered = self.mouse_y >= draw_y as i32
                    && self.mouse_y <= (draw_y + el.height as u32) as i32
                    && self.mouse_x >= (draw_x_base)
                    && self.mouse_x <= (draw_x_base + el.width);
                let is_focused = !el.element_id.is_empty()
                    && self.focused_id.as_deref() == Some(el.element_id.as_str());
                // :active はホバー中かつマウス左ボタン押下中の要素にのみ適用（実ブラウザの
                // LVHA 順に合わせ hover よりも優先度を高くする）。
                let is_active = is_hovered && self.mouse_btn_left_down;
                // 適用順: base → :focus → :hover → :active（:active を最終上書きとする。
                // カスケード順の厳密な再現ではなく、実用上の即時フィードバックを優先する簡易規則）。
                let base_bg = el.bg_color.unwrap_or(theme.btn_default_bg);
                let bg_col = if is_active {
                    el.active_bg_color.unwrap_or(base_bg)
                } else if is_hovered {
                    el.hover_bg_color.unwrap_or(base_bg)
                } else if is_focused {
                    el.focus_bg_color.unwrap_or(base_bg)
                } else {
                    base_bg
                };
                let base_border = el.border_color.unwrap_or(theme.btn_default_border);
                let border_col = if is_active {
                    el.active_border_color.unwrap_or(base_border)
                } else if is_hovered {
                    el.hover_border_color.unwrap_or(base_border)
                } else if is_focused {
                    el.focus_border_color.unwrap_or(base_border)
                } else {
                    base_border
                };

                let x0 = draw_x_base as u32;
                let y0 = draw_y;
                let x1 = draw_x_base as u32 + el.width as u32;
                let y1 = draw_y + el.height as u32;

                if el.border_radius != (0, 0, 0, 0) {
                    screen.draw_rounded_rect_fill(
                        x0 as i32,
                        y0 as i32,
                        x1 as i32,
                        y1 as i32,
                        el.border_radius,
                        draw::Color(bg_col),
                    );
                    screen.draw_rounded_rect_border(
                        x0 as i32,
                        y0 as i32,
                        x1 as i32,
                        y1 as i32,
                        el.border_radius,
                        draw::Color(border_col),
                        el.border_style.as_str(),
                    );
                } else {
                    screen.boxfill(x0, y0, x1, y1, draw::Color(bg_col));
                    draw_border_with_style(
                        screen,
                        x0 as i32,
                        y0 as i32,
                        x1 as i32,
                        y1 as i32,
                        border_col,
                        el.border_style,
                    );
                }

                let has_icon = el.button_icon > 0;
                let icon_size = 16;
                let icon_spacing = 6;

                let text_w =
                    crate::kernel::vector_font::get_vector_string_width(&el.text, el.font_size)
                        as i32;
                let content_w = text_w
                    + if has_icon {
                        (icon_size + icon_spacing) as i32
                    } else {
                        0
                    };

                let draw_content_x = x0 + ((el.width - content_w).max(0) as u32) / 2;
                let draw_text_y = y0 + ((el.height - el.font_size as i32).max(0) as u32) / 2;

                let mut draw_text_x = draw_content_x;

                if has_icon {
                    let icon_y = y0 + ((el.height - icon_size as i32).max(0) as u32) / 2;
                    let svg_data = match el.button_icon {
                        1 => SVG_SAVE,
                        2 => SVG_LOAD,
                        3 => SVG_WRAP,
                        _ => &[],
                    };
                    if !svg_data.is_empty() {
                        screen.draw_svg_icon(
                            draw_content_x,
                            icon_y,
                            svg_data,
                            icon_size,
                            draw::Color(theme.success_fg),
                        );
                    }
                    draw_text_x += icon_size + icon_spacing;
                }

                screen.draw_string_ja_size_bg(
                    draw_text_x,
                    draw_text_y,
                    &el.text,
                    el.font_size,
                    draw::Color(theme.browser_fg),
                    draw::Color(bg_col),
                );
            } else {
                let is_hovered = self.mouse_y >= draw_y as i32
                    && self.mouse_y <= (draw_y + eff_h as u32) as i32
                    && self.mouse_x >= (draw_x_base)
                    && self.mouse_x <= (draw_x_base + eff_w);
                let is_focused = !el.element_id.is_empty()
                    && self.focused_id.as_deref() == Some(el.element_id.as_str());
                // :active はホバー中かつマウス左ボタン押下中の要素にのみ適用（is_button
                // 分岐と同じ規則）。
                let is_active = is_hovered && self.mouse_btn_left_down;

                // 適用順: base → :focus → :hover → :active（:active を最終上書きとする
                // 簡易規則。詳細は is_button 分岐のコメント参照）。
                let actual_bg_color = if is_active {
                    el.active_bg_color.or(el.bg_color)
                } else if is_hovered {
                    el.hover_bg_color.or(el.bg_color)
                } else if is_focused {
                    el.focus_bg_color.or(el.bg_color)
                } else {
                    el.bg_color
                }
                .map(|c| super::draw_helpers::apply_css_filters_argb(&el.filter, c));
                let actual_color_raw = if is_active {
                    el.active_color.unwrap_or(el.color)
                } else if is_hovered {
                    el.hover_color.unwrap_or(el.color)
                } else if is_focused {
                    el.focus_color.unwrap_or(el.color)
                } else {
                    el.color
                };
                // Apply opacity to color channels
                let actual_color = if el.opacity < 255 {
                    let a = el.opacity as u32;
                    let r = (actual_color_raw >> 16) & 0xFF;
                    let g = (actual_color_raw >> 8) & 0xFF;
                    let b = actual_color_raw & 0xFF;
                    (a << 24) | (r << 16) | (g << 8) | b
                } else {
                    actual_color_raw
                };
                let w = if eff_w > 0 {
                    eff_w
                } else {
                    vector_font::get_vector_string_width(&el.text, el.font_size) as i32
                };

                let x0_rect = (draw_x_base as u32) as i32;
                let y0_rect = draw_y as i32;
                let x1_rect = (draw_x_base as u32 + w as u32) as i32;
                let y1_rect = (draw_y + eff_h as u32) as i32;

                // CSS `backdrop-filter`（グラスモーフィズム Glassmorphism 効果）。
                // 背景要素を反転/ぼかし/色彩強調し、モダンなガラス風ビジュアルを再現。
                if !el.backdrop_filter.is_empty() {
                    let (cx0, cy0, cx1, cy1) = screen
                        .clip
                        .get()
                        .map(|(c0, c1, c2, c3)| (c0 as i32, c1 as i32, c2 as i32, c3 as i32))
                        .unwrap_or((0, 0, screen.width as i32, screen.height as i32));
                    let bx0 = x0_rect.max(cx0);
                    let by0 = y0_rect.max(cy0);
                    let bx1 = x1_rect.min(cx1);
                    let by1 = y1_rect.min(cy1);
                    if bx1 > bx0 && by1 > by0 {
                        crate::os_lib::web_engine::draw_helpers::apply_backdrop_filters_to_screen_rect(
                            screen, bx0, by0, bx1, by1, &el.backdrop_filter,
                        );
                    }
                }

                // Draw outer box-shadow before background with corner radius support.
                // カンマ区切りの複数シャドウ対応: Vec を逆順に走査して先頭のシャドウが一番上に来るようにする。
                for &(ox, oy, _blur, s_color, is_inset) in el.box_shadow.iter().rev() {
                    if !is_inset {
                        screen.draw_shadow_rect_rounded(
                            x0_rect,
                            y0_rect,
                            x1_rect,
                            y1_rect,
                            ox,
                            oy,
                            el.border_radius,
                            draw::Color(s_color),
                        );
                    }
                }

                // clip-path: parse once for background and bg-image drawing
                let clip_s = if el.clip_path.is_empty() {
                    None
                } else {
                    parse_clip_shape(&el.clip_path, w, eff_h)
                };

                // rotate 付き背景: 逆変換サンプリングで回転矩形を描く。
                // rotate ≠ 0 かつ bg_color あり の場合のみ別処理。テキストは非回転。
                let rotate_deg = el.transform_rotate_deg;
                if rotate_deg.abs() > 0.1 {
                    if let Some(bg) = actual_bg_color {
                        let cx = x0_rect + w / 2;
                        let cy = y0_rect + eff_h / 2;
                        draw_rotated_rect_filled(screen, cx, cy, w, eff_h, rotate_deg, bg);
                    }
                }
                let skew_x = el.transform_skew_x;
                let skew_y = el.transform_skew_y;
                if skew_x.abs() > 0.1 || skew_y.abs() > 0.1 {
                    if let Some(bg) = actual_bg_color {
                        let cx = x0_rect + w / 2;
                        let cy = y0_rect + eff_h / 2;
                        draw_skewed_rect_filled(screen, cx, cy, w, eff_h, skew_x, skew_y, bg);
                    }
                }

                if el.border_radius != (0, 0, 0, 0) {
                    // background-clip: border-box 以外なら背景描画だけを内側の box に制限する
                    // (境界線自体はこの後 border-box のまま描くため、border 描画前に pop する)。
                    let bg_clipped = el.bg_clip != "border-box";
                    if bg_clipped {
                        let (cx0, cy0, cx1, cy1) = bg_clip_rect(el, x0_rect, y0_rect, x1_rect, y1_rect);
                        screen.push_clip(cx0, cy0, cx1, cy1);
                    }
                    // clip-path + border-radius の組み合わせ: 両マスクを満たすピクセルのみ描画。
                    if clip_s.is_some() {
                        let bg_col = actual_bg_color
                            .or(el.linear_gradient.as_ref().map(|g| g.stops.first().map_or(0, |s| s.color)))
                            .or(el.radial_gradient.as_ref().map(|g| g.stops.first().map_or(0, |s| s.color)))
                            .or(el.conic_gradient.as_ref().and_then(|stops| stops.first().map(|s| s.color)))
                            .or(el.repeating_linear_gradient.as_ref().and_then(|(colors, _, _)| colors.first().copied()))
                            .or(el.repeating_radial_gradient.as_ref().and_then(|(colors, _)| colors.first().copied()));
                        if let Some(bg) = bg_col {
                            let bg_with_opacity = if el.opacity < 255 {
                                let a = el.opacity as u32;
                                let r = (bg >> 16) & 0xFF;
                                let g = (bg >> 8) & 0xFF;
                                let b = bg & 0xFF;
                                (a << 24) | (r << 16) | (g << 8) | b
                            } else { bg };
                            // 【2026-08-01計測】角丸/クリップ付き背景は
                            // ボックス全体を毎ピクセル判定しながら塗っている。
                            // これが paint の残り 58% の正体かを測る。
                            let _t_rr = crate::kernel::draw::RRectTimer::new();
                            for ry in 0..eff_h {
                                for rx in 0..w {
                                    let in_clip = clip_s.as_ref().map(|cs| clip_inside(cs, rx, ry)).unwrap_or(true);
                                    let in_rr = point_in_rounded_rect(rx, ry, w, eff_h, el.border_radius);
                                    if in_clip && in_rr {
                                        screen.draw_pixel_alpha(
                                            (x0_rect + rx) as u32,
                                            (y0_rect + ry) as u32,
                                            draw::Color(bg_with_opacity),
                                            el.opacity,
                                        );
                                    }
                                }
                            }
                        }
                    } else {
                    // linear-gradient takes priority over solid bg
                    if let Some(grad) = &el.linear_gradient {
                        let c1 = grad.stops.first().map_or(0, |s| s.color);
                        // 【2026-07-28】従来は角丸の有無に関わらず**最初の色停止点の単色**で
                        // 塗っており、linear-gradient が実質グラデーションになっていなかった。
                        // 角丸が無い場合は本物のグラデーションを描く。
                        // （角丸との組み合わせは未対応のまま単色にフォールバックする。）
                        let c2 = grad.stops.last().map_or(c1, |s| s.color);
                        let is_vertical = {
                            // 角度 90/270 付近を横方向、それ以外を縦方向として近似する。
                            // 135deg のような斜めは縦方向で近似（実装が縦横のみ対応のため）。
                            let a = ((grad.angle_deg % 360.0) + 360.0) % 360.0;
                            !((45.0..135.0).contains(&a) || (225.0..315.0).contains(&a))
                        };
                        if el.border_radius == (0, 0, 0, 0) && grad.stops.len() >= 2 && x1_rect > x0_rect && y1_rect > y0_rect {
                            screen.draw_gradient_rect(
                                x0_rect as u32,
                                y0_rect as u32,
                                x1_rect as u32,
                                y1_rect as u32,
                                draw::Color(c1),
                                draw::Color(c2),
                                is_vertical,
                            );
                        } else {
                            screen.draw_rounded_rect_fill(
                                x0_rect,
                                y0_rect,
                                x1_rect,
                                y1_rect,
                                el.border_radius,
                                draw::Color(c1),
                            );
                        }
                    } else if let Some(grad) = &el.radial_gradient {
                        // 角丸との組み合わせは非対応につき、linear-gradient と同様 c1 を単色として使う簡略実装。
                        let c1 = grad.stops.first().map_or(0, |s| s.color);
                        screen.draw_rounded_rect_fill(
                            x0_rect,
                            y0_rect,
                            x1_rect,
                            y1_rect,
                            el.border_radius,
                            draw::Color(c1),
                        );
                    } else if let Some(stops) = &el.conic_gradient {
                        // 角丸との組み合わせは非対応につき、他のグラデーションと同様 先頭色を単色として使う簡略実装。
                        let c1 = stops.first().map_or(0, |s| s.color);
                        screen.draw_rounded_rect_fill(
                            x0_rect,
                            y0_rect,
                            x1_rect,
                            y1_rect,
                            el.border_radius,
                            draw::Color(c1),
                        );
                    } else if let Some((colors, _, _)) = &el.repeating_linear_gradient {
                        // 角丸との組み合わせは非対応につき、他のグラデーションと同様 先頭色を単色として使う簡略実装。
                        let c1 = colors.first().copied().unwrap_or(0);
                        screen.draw_rounded_rect_fill(
                            x0_rect,
                            y0_rect,
                            x1_rect,
                            y1_rect,
                            el.border_radius,
                            draw::Color(c1),
                        );
                    } else if let Some((colors, _)) = &el.repeating_radial_gradient {
                        // 角丸との組み合わせは非対応につき、他のグラデーションと同様 先頭色を単色として使う簡略実装。
                        let c1 = colors.first().copied().unwrap_or(0);
                        screen.draw_rounded_rect_fill(
                            x0_rect,
                            y0_rect,
                            x1_rect,
                            y1_rect,
                            el.border_radius,
                            draw::Color(c1),
                        );
                    } else if let Some(bg) = actual_bg_color {
                        let bg_with_opacity = if el.opacity < 255 {
                            let a = el.opacity as u32;
                            let r = (bg >> 16) & 0xFF;
                            let g = (bg >> 8) & 0xFF;
                            let b = bg & 0xFF;
                            (a << 24) | (r << 16) | (g << 8) | b
                        } else {
                            bg
                        };
                        if rotate_deg.abs() < 0.1 {
                            screen.draw_rounded_rect_fill(
                                x0_rect,
                                y0_rect,
                                x1_rect,
                                y1_rect,
                                el.border_radius,
                                draw::Color(bg_with_opacity),
                            );
                        }
                    }
                    } // end else (no clip_s)
                    // background-attachment: fixed のスクロール打ち消し量（scroll なら常に0）。
                    let bg_attach_shift_y = if el.bg_attachment == "fixed" {
                        self.scroll_y
                    } else {
                        0
                    };
                    // background-origin: position/size の基準 box（既定 padding-box）。
                    let (bg_origin_sx, bg_origin_sy, bg_origin_w, bg_origin_h) =
                        bg_origin_shift(el, eff_w, eff_h);
                    if el.bg_images.len() > 1 {
                        // 複数レイヤー: CSS の重なり順（先頭が最前面）どおりに描くため、
                        // 背面（リスト末尾）から順に描画して先頭を最後に重ねる。
                        // レイヤーごとの size/repeat/position は `bg_layers`（インデックス対応）を使う。
                        for (i, layer_path) in el.bg_images.iter().enumerate().rev() {
                            if self.image_cache.get(layer_path).is_none() {
                                log_bg_image_miss(layer_path, self.image_cache.len(), "layer");
                            }
                            if let Some(img) = self.image_cache.get(layer_path) {
                                let layer_override = el.bg_layers.get(i).copied();
                                draw_background_image(
                                    screen, img, el, x0_rect, y0_rect, eff_w, eff_h, &clip_s,
                                    bg_attach_shift_y, bg_origin_sx, bg_origin_sy, bg_origin_w,
                                    bg_origin_h, layer_override,
                                );
                            }
                        }
                    } else if let Some(ref bg_img_path) = el.bg_image {
                        // 【2026-08-02】キャッシュに無いとき**何も起きず何も出ない**ため、
                        // 「取得できていない」のか「取得できたのにキーが合わない」のかを
                        // 切り分けられなかった。実際 `/img/IMG_6530.jpg` は
                        // 取得・デコード成功しているのに背景が出ていない。
                        // パスごとに 1 回だけ記録する（`spec/logging_policy.md` L-1）。
                        if self.image_cache.get(bg_img_path).is_none() {
                            static MISS: spin::Mutex<alloc::collections::BTreeSet<String>> =
                                spin::Mutex::new(alloc::collections::BTreeSet::new());
                            let mut seen = MISS.lock();
                            if seen.insert(bg_img_path.clone()) {
                                crate::warn!(
                                    "[IMG][MISS] 背景画像がキャッシュに無い path={} cache_keys={}",
                                    bg_img_path,
                                    self.image_cache.len()
                                );
                            }
                        }
                        if let Some(img) = self.image_cache.get(bg_img_path) {
                            draw_background_image(
                                screen, img, el, x0_rect, y0_rect, eff_w, eff_h, &clip_s,
                                bg_attach_shift_y, bg_origin_sx, bg_origin_sy, bg_origin_w,
                                bg_origin_h, None,
                            );
                        }
                    }
                    if bg_clipped {
                        screen.pop_clip();
                    }
                    // Draw inset box-shadow inside border-box if specified
                    for &(ox, oy, blur, s_color, is_inset) in el.box_shadow.iter().rev() {
                        if is_inset {
                            screen.draw_inset_shadow_rect(
                                x0_rect,
                                y0_rect,
                                x1_rect,
                                y1_rect,
                                ox,
                                oy,
                                blur,
                                el.border_radius,
                                draw::Color(s_color),
                            );
                        }
                    }

                    let actual_border_color = if is_active {
                        el.active_border_color.or(el.border_color)
                    } else if is_hovered {
                        el.hover_border_color.or(el.border_color)
                    } else if is_focused {
                        el.focus_border_color.or(el.border_color)
                    } else {
                        el.border_color
                    };
                    if let Some(border_col) = actual_border_color {
                        screen.draw_rounded_rect_border(
                            x0_rect,
                            y0_rect,
                            x1_rect,
                            y1_rect,
                            el.border_radius,
                            draw::Color(border_col),
                            el.border_style.as_str(),
                        );
                    }
                } else {
                    // background-clip: border-box 以外なら背景描画だけを内側の box に制限する
                    // (境界線自体は border-box のまま描くため、border 描画前に pop する)。
                    let bg_clipped = el.bg_clip != "border-box";
                    if bg_clipped {
                        let (cx0, cy0, cx1, cy1) = bg_clip_rect(el, x0_rect, y0_rect, x1_rect, y1_rect);
                        screen.push_clip(cx0, cy0, cx1, cy1);
                    }
                    // linear-gradient / radial-gradient
                    if let Some(grad) = &el.linear_gradient {
                        if rotate_deg.abs() < 0.1 {
                            crate::os_lib::web_engine::draw_helpers::draw_linear_gradient(
                                screen,
                                x0_rect,
                                y0_rect,
                                x1_rect - x0_rect,
                                y1_rect - y0_rect,
                                grad,
                            );
                        }
                    } else if let Some(grad) = &el.radial_gradient {
                        if rotate_deg.abs() < 0.1 {
                            crate::os_lib::web_engine::draw_helpers::draw_radial_gradient(
                                screen,
                                x0_rect,
                                y0_rect,
                                x1_rect - x0_rect,
                                y1_rect - y0_rect,
                                grad,
                            );
                        }
                    } else if let Some(stops) = &el.conic_gradient {
                        if rotate_deg.abs() < 0.1 {
                            crate::os_lib::web_engine::draw_helpers::draw_conic_gradient(
                                screen,
                                x0_rect,
                                y0_rect,
                                x1_rect - x0_rect,
                                y1_rect - y0_rect,
                                stops,
                            );
                        }
                    } else if let Some((colors, cycle, is_vert)) = &el.repeating_linear_gradient {
                        if rotate_deg.abs() < 0.1 {
                            let draw_colors: alloc::vec::Vec<draw::Color> =
                                colors.iter().map(|c| draw::Color(*c)).collect();
                            screen.draw_repeating_linear_gradient_rect(
                                x0_rect as u32,
                                y0_rect as u32,
                                x1_rect as u32,
                                y1_rect as u32,
                                &draw_colors,
                                *cycle,
                                *is_vert,
                            );
                        }
                    } else if let Some((colors, cycle)) = &el.repeating_radial_gradient {
                        if rotate_deg.abs() < 0.1 {
                            let draw_colors: alloc::vec::Vec<draw::Color> =
                                colors.iter().map(|c| draw::Color(*c)).collect();
                            screen.draw_repeating_radial_gradient_rect(
                                x0_rect as u32,
                                y0_rect as u32,
                                x1_rect as u32,
                                y1_rect as u32,
                                &draw_colors,
                                *cycle,
                            );
                        }
                    } else if let Some(bg) = actual_bg_color {
                        let bg_with_opacity = if el.opacity < 255 {
                            let a = el.opacity as u32;
                            let r = (bg >> 16) & 0xFF;
                            let g = (bg >> 8) & 0xFF;
                            let b = bg & 0xFF;
                            (a << 24) | (r << 16) | (g << 8) | b
                        } else {
                            bg
                        };
                        // rotate あり: 既に draw_rotated_rect_filled で描画済み → skip
                        if rotate_deg.abs() < 0.1 {
                            let _t_pix = crate::kernel::draw::PixBgTimer::new();
                            if let Some(ref cs) = clip_s {
                                // clip-path: per-pixel rendering
                                for ry in 0..eff_h {
                                    for rx in 0..w {
                                        if clip_inside(cs, rx, ry) {
                                            screen.draw_pixel_alpha(
                                                (x0_rect + rx) as u32,
                                                (y0_rect + ry) as u32,
                                                draw::Color(bg_with_opacity),
                                                el.opacity,
                                            );
                                        }
                                    }
                                }
                            } else if el.opacity < 255 {
                                // Alpha-blend background
                                for ry in y0_rect as u32..y1_rect as u32 {
                                    for rx in x0_rect as u32..x1_rect as u32 {
                                        screen.draw_pixel_alpha(
                                            rx,
                                            ry,
                                            draw::Color(bg_with_opacity),
                                            el.opacity,
                                        );
                                    }
                                }
                            } else if !el.mix_blend_mode.is_empty()
                                && el.mix_blend_mode != "normal"
                            {
                                // mix-blend-mode: 背景色を既存フレームバッファの色と合成する
                                // 簡略実装（クリップ無し・不透明・角丸無しの経路のみ対応）。
                                let src = (
                                    ((bg >> 16) & 0xFF) as u8,
                                    ((bg >> 8) & 0xFF) as u8,
                                    (bg & 0xFF) as u8,
                                );
                                for ry in y0_rect as u32..y1_rect as u32 {
                                    for rx in x0_rect as u32..x1_rect as u32 {
                                        let dst_c = screen.read_pixel(rx, ry).0;
                                        let dst = (
                                            ((dst_c >> 16) & 0xFF) as u8,
                                            ((dst_c >> 8) & 0xFF) as u8,
                                            (dst_c & 0xFF) as u8,
                                        );
                                        let (r, g, b) =
                                            blend_pixel(&el.mix_blend_mode, src, dst);
                                        screen.draw_pixel(
                                            rx,
                                            ry,
                                            draw::Color(
                                                0xFF000000
                                                    | ((r as u32) << 16)
                                                    | ((g as u32) << 8)
                                                    | (b as u32),
                                            ),
                                        );
                                    }
                                }
                            } else {
                                screen.boxfill(
                                    x0_rect as u32,
                                    y0_rect as u32,
                                    x1_rect as u32,
                                    y1_rect as u32,
                                    draw::Color(bg),
                                );
                            }
                        }
                    }
                    // background-attachment: fixed のスクロール打ち消し量（scroll なら常に0）。
                    let bg_attach_shift_y = if el.bg_attachment == "fixed" {
                        self.scroll_y
                    } else {
                        0
                    };
                    // background-origin: position/size の基準 box（既定 padding-box）。
                    let (bg_origin_sx, bg_origin_sy, bg_origin_w, bg_origin_h) =
                        bg_origin_shift(el, eff_w, eff_h);
                    if el.bg_images.len() > 1 {
                        // 複数レイヤー: CSS の重なり順（先頭が最前面）どおりに描くため、
                        // 背面（リスト末尾）から順に描画して先頭を最後に重ねる。
                        // レイヤーごとの size/repeat/position は `bg_layers`（インデックス対応）を使う。
                        for (i, layer_path) in el.bg_images.iter().enumerate().rev() {
                            if self.image_cache.get(layer_path).is_none() {
                                log_bg_image_miss(layer_path, self.image_cache.len(), "layer");
                            }
                            if let Some(img) = self.image_cache.get(layer_path) {
                                let layer_override = el.bg_layers.get(i).copied();
                                draw_background_image(
                                    screen, img, el, x0_rect, y0_rect, eff_w, eff_h, &clip_s,
                                    bg_attach_shift_y, bg_origin_sx, bg_origin_sy, bg_origin_w,
                                    bg_origin_h, layer_override,
                                );
                            }
                        }
                    } else if let Some(ref bg_img_path) = el.bg_image {
                        if let Some(img) = self.image_cache.get(bg_img_path) {
                            draw_background_image(
                                screen, img, el, x0_rect, y0_rect, eff_w, eff_h, &clip_s,
                                bg_attach_shift_y, bg_origin_sx, bg_origin_sy, bg_origin_w,
                                bg_origin_h, None,
                            );
                        }
                    }
                    if bg_clipped {
                        screen.pop_clip();
                    }
                    // Draw inset box-shadow inside border-box if specified
                    for &(ox, oy, blur, s_color, is_inset) in el.box_shadow.iter().rev() {
                        if is_inset {
                            screen.draw_inset_shadow_rect(
                                x0_rect,
                                y0_rect,
                                x1_rect,
                                y1_rect,
                                ox,
                                oy,
                                blur,
                                el.border_radius,
                                draw::Color(s_color),
                            );
                        }
                    }
                    draw_individual_borders(
                        screen, x0_rect, y0_rect, x1_rect, y1_rect, el, is_hovered, is_focused,
                        is_active,
                    );
                    if let Some(outline_color) = el.outline_color {
                        if el.outline_width > 0 {
                            draw_outline(
                                screen,
                                x0_rect,
                                y0_rect,
                                x1_rect,
                                y1_rect,
                                el.outline_width,
                                el.outline_offset,
                                outline_color,
                                &el.outline_style,
                            );
                        }
                    }
                }

                if el.is_blockquote {
                    let line_x0 = x0_rect as u32;
                    let line_y0 = y0_rect as u32;
                    let line_x1 = (x0_rect + 4) as u32;
                    let line_y1 = y1_rect as u32;
                    screen.boxfill(line_x0, line_y0, line_x1, line_y1, draw::Color(theme.sysmon_accent));
                }

                if !el.text.is_empty()
                    || !el.before_content.is_empty()
                    || !el.after_content.is_empty()
                {
                    let mut text_draw_x = draw_x_base as u32;
                    let list_style_image_cached = if el.is_li && !el.list_style_image.is_empty() {
                        self.image_cache.get(&el.list_style_image)
                    } else {
                        None
                    };
                    if let (true, Some(img)) = (el.is_li, list_style_image_cached) {
                        // list-style-image: 画像がロード済みなら glyph の代わりにアイコンを描く。
                        let size = el.font_size.max(1);
                        let marker_x = if el.list_style_inside {
                            text_draw_x
                        } else {
                            text_draw_x.saturating_sub(size + 4)
                        };
                        crate::os_lib::web_engine::draw_helpers::draw_image_nn_blit(
                            screen, img, marker_x as i32, draw_y as i32, size, size,
                        );
                        if el.list_style_inside {
                            text_draw_x += size + 4;
                        }
                    } else if el.is_li && el.list_style_type != super::ListStyleType::None {
                        // マーカーは既定でテキストと同じ色・サイズを継承する（CSS `color`/`font-size`
                        // の指定に追従）。`::marker{color:...}`/`::marker{font-size:...}` が
                        // 指定されていればそちらを優先する。
                        let marker_color = el.marker_color.unwrap_or(el.color);
                        let marker_font_size = el.marker_font_size.unwrap_or(el.font_size);
                        // decimal/alpha/roman 明示 or 順序リスト（li_num あり）は番号系。それ以外はマーカー文字。
                        let is_ordinal_style = matches!(
                            el.list_style_type,
                            super::ListStyleType::Decimal
                                | super::ListStyleType::UpperAlpha
                                | super::ListStyleType::LowerAlpha
                                | super::ListStyleType::UpperRoman
                                | super::ListStyleType::LowerRoman
                        );
                        let use_number = is_ordinal_style
                            || (el.li_num.is_some() && el.list_style_type == super::ListStyleType::Unset);
                        let bg_color = el.bg_color.unwrap_or_else(|| self.effective_bg_behind(el));
                        let marker_str = if let Some(custom) = &el.marker_content {
                            custom.clone()
                        } else if use_number {
                            let n = el.li_num.unwrap_or(1);
                            match el.list_style_type {
                                super::ListStyleType::UpperAlpha => {
                                    alloc::format!("{}.", super::number_to_alpha(n, true))
                                }
                                super::ListStyleType::LowerAlpha => {
                                    alloc::format!("{}.", super::number_to_alpha(n, false))
                                }
                                super::ListStyleType::UpperRoman => {
                                    alloc::format!("{}.", super::number_to_roman(n, true))
                                }
                                super::ListStyleType::LowerRoman => {
                                    alloc::format!("{}.", super::number_to_roman(n, false))
                                }
                                _ => alloc::format!("{}.", n),
                            }
                        } else {
                            match el.list_style_type {
                                super::ListStyleType::Circle => alloc::string::String::from("◦"),
                                super::ListStyleType::Square => alloc::string::String::from("▪"),
                                _ => alloc::string::String::from("•"), // disc / 未指定
                            }
                        };
                        let marker_w = crate::kernel::vector_font::get_vector_string_width(
                            &marker_str,
                            marker_font_size,
                        ) as u32;
                        // list-style-position: outside（既定）はマーカーを content の外
                        // （左マージン領域）へ、inside は content 内でテキストの直前に描く。
                        let marker_x = if el.list_style_inside {
                            text_draw_x
                        } else {
                            text_draw_x.saturating_sub(marker_w + 4)
                        };
                        screen.draw_string_ja_size_bg(
                            marker_x,
                            draw_y,
                            &marker_str,
                            marker_font_size,
                            draw::Color(marker_color),
                            draw::Color(bg_color),
                        );
                        if el.list_style_inside {
                            text_draw_x += marker_w + 4;
                        }
                    }

                    // ::before / ::after の content を実テキストの前後に合成する。
                    // 既存のレイアウト幅計測は el.text のみを基準にしているため、
                    // 長い content を付けると box をわずかにはみ出す場合があるが、
                    // アイコン/マーカー用途の短い文字列では実用上問題にならない。
                    // 【2026-08-05 発見・修正】`::before` の content を本文と連結して
                    // **1 つのフォントで**描いていた。
                    //
                    // Font Awesome のアイコンは `::before { content:"015";
                    // font-family:"Font Awesome 7 Free" }` で出す。連結してしまうと
                    // 要素本体のフォント（Noto Sans JP）で描かれ、
                    // 私用領域の符号位置に字形が無いため **☐ になる**。
                    // 実測: `#apps` の一覧先頭が ☐ で表示されていた。
                    //
                    // `before_font_family` が本体と違うときだけ分けて描く。
                    // 同じなら従来どおり連結する（1 回の描画で済ませる）。
                    let split_before = !el.before_content.is_empty()
                        && !el.before_font_family.is_empty()
                        && !el
                            .font_family
                            .to_lowercase()
                            .contains(&el.before_font_family.to_lowercase());
                    if split_before {
                        screen.draw_string_family(
                            text_draw_x,
                            draw_y,
                            &el.before_content,
                            el.font_size,
                            draw::Color(el.color),
                            el.font_italic,
                            draw::Color(el.bg_color.unwrap_or_else(|| self.effective_bg_behind(el))),
                            el.letter_spacing,
                            el.word_spacing,
                            &el.before_font_family,
                            el.font_bold,
                        );
                        text_draw_x += crate::kernel::vector_font::get_vector_string_width(
                            &el.before_content,
                            el.font_size,
                        );
                    }
                    let text_with_pseudo = if (el.before_content.is_empty() || split_before)
                        && el.after_content.is_empty()
                    {
                        el.text.clone()
                    } else if split_before {
                        alloc::format!("{}{}", el.text, el.after_content)
                    } else {
                        alloc::format!("{}{}{}", el.before_content, el.text, el.after_content)
                    };

                    // text-overflow: ellipsis support
                    let draw_text = if el.text_overflow_ellipsis && eff_w > 0 {
                        let full_w = crate::kernel::vector_font::get_vector_string_width(
                            &text_with_pseudo,
                            el.font_size,
                        ) as i32;
                        if full_w > eff_w {
                            let ellipsis = "…";
                            let ellipsis_w = crate::kernel::vector_font::get_vector_string_width(
                                ellipsis,
                                el.font_size,
                            ) as i32;
                            let max_w = eff_w - ellipsis_w;
                            let mut truncated = String::new();
                            let mut tw = 0i32;
                            // `direction:rtl` では省略記号は先頭（視覚上の左）に出し、
                            // 末尾側ではなく先頭側の文字を切り詰める（CSS仕様）。
                            if el.text_overflow_rtl {
                                for c in text_with_pseudo.chars().rev() {
                                    let mut cs = String::new();
                                    cs.push(c);
                                    let cw = crate::kernel::vector_font::get_vector_string_width(
                                        &cs,
                                        el.font_size,
                                    ) as i32;
                                    if tw + cw > max_w {
                                        break;
                                    }
                                    truncated.push(c);
                                    tw += cw;
                                }
                                let kept: String = truncated.chars().rev().collect();
                                alloc::format!("{}{}", ellipsis, kept)
                            } else {
                                for c in text_with_pseudo.chars() {
                                    let mut cs = String::new();
                                    cs.push(c);
                                    let cw = crate::kernel::vector_font::get_vector_string_width(
                                        &cs,
                                        el.font_size,
                                    ) as i32;
                                    if tw + cw > max_w {
                                        break;
                                    }
                                    truncated.push(c);
                                    tw += cw;
                                }
                                truncated.push_str(ellipsis);
                                truncated
                            }
                        } else {
                            text_with_pseudo
                        }
                    } else {
                        text_with_pseudo
                    };
                    let bg_color = el.bg_color.unwrap_or_else(|| self.effective_bg_behind(el));
                    // text-shadow: box-shadow と同様、ぼかし(blur)は無視して単純なオフセット
                    // 描画のみ行う（本文の描画前に影を描くことで、本文の不透明背景で
                    // 重なり部分が自然にマスクされる）。カンマ区切りの複数シャドウは
                    // box-shadow と同じく Vec を逆順に走査し、先頭のシャドウが最前面に来るようにする。
                    for &(sx, sy, _blur, s_color) in el.text_shadow.iter().rev() {
                        screen.draw_string_ja_size_ext_bg_ls_ws(
                            (text_draw_x as i32 + sx).max(0) as u32,
                            (draw_y as i32 + sy).max(0) as u32,
                            &draw_text,
                            el.font_size,
                            draw::Color(s_color),
                            el.font_italic,
                            draw::Color(0),
                            el.letter_spacing,
                            el.word_spacing,
                        );
                    }

                    if el.text_stroke_width > 0 {
                        let stroke_color = el.text_stroke_color.unwrap_or(0xFF000000);
                        let sw = el.text_stroke_width.min(4);
                        for dy in -sw..=sw {
                            for dx in -sw..=sw {
                                if dx == 0 && dy == 0 { continue; }
                                screen.draw_string_ja_size_ext_bg_ls_ws(
                                    (text_draw_x as i32 + dx).max(0) as u32,
                                    (draw_y as i32 + dy).max(0) as u32,
                                    &draw_text,
                                    el.font_size,
                                    draw::Color(stroke_color),
                                    el.font_italic,
                                    draw::Color(0),
                                    el.letter_spacing,
                                    el.word_spacing,
                                );
                            }
                        }
                    }

                    // 【2026-07-26診断】ヒーロー見出しが画面に出ない件の切り分け。
                    // 実際に描画呼び出しへ到達しているか、その時点の座標・色を記録する。
                    if draw_text.starts_with("IoTで未来") {
                        crate::warn!(
                            "[HERO][DRAW] x={} y={} fs={} color=0x{:08x} bg=0x{:08x} win_h={} text={:?}",
                            text_draw_x,
                            draw_y,
                            el.font_size,
                            actual_color,
                            bg_color,
                            win_h,
                            draw_text
                        );
                    }


                    // 【2026-08-03】`font-family` を渡して Web フォントを反映する。
                    // 登録済みの family が無ければ既定フォントへフォールバックする。
                    screen.draw_string_family(
                        text_draw_x,
                        draw_y,
                        &draw_text,
                        el.font_size,
                        draw::Color(actual_color),
                        el.font_italic,
                        draw::Color(bg_color),
                        el.letter_spacing,
                        el.word_spacing,
                        &el.font_family,
                        el.font_bold,
                    );
                    // font-weight: bold のシミュレーション（1px右にずらして重ね描き）
                    if el.font_bold {
                        screen.draw_string_family(
                            text_draw_x + 1,
                            draw_y,
                            &draw_text,
                            el.font_size,
                            draw::Color(actual_color),
                            el.font_italic,
                            draw::Color(bg_color),
                            el.letter_spacing,
                            el.word_spacing,
                            &el.font_family,
                            el.font_bold,
                        );
                    }
                    // text-emphasis-style: 各文字の上に傍点/圏点等を描く。
                    if !el.text_emphasis_style.is_empty() {
                        screen.draw_text_emphasis(
                            text_draw_x,
                            draw_y,
                            &draw_text,
                            el.font_size,
                            &el.text_emphasis_style,
                            draw::Color(el.text_emphasis_color.unwrap_or(actual_color)),
                            el.letter_spacing,
                            el.word_spacing,
                        );
                    }
                }

                let decoration_color = el.decoration_color.unwrap_or(actual_color);
                if el.underline {
                    // text-underline-offset は負値も許容するため、u32 の draw_y に符号付きで
                    // 加算する（0未満にクランプ）。
                    let line_y = ((draw_y as i32) + el.font_size as i32 + 2
                        + el.decoration_underline_offset)
                        .max(0) as u32;
                    if line_y < win_y + win_h {
                        draw_decoration_line(
                            screen,
                            draw_x_base as u32,
                            line_y,
                            draw_x_base as u32 + w as u32,
                            &el.decoration_style,
                            decoration_color,
                            el.decoration_thickness as u32,
                        );
                    }
                }

                if el.line_through {
                    let line_y = draw_y + el.font_size / 2 + 1;
                    if line_y < win_y + win_h {
                        draw_decoration_line(
                            screen,
                            draw_x_base as u32,
                            line_y,
                            draw_x_base as u32 + w as u32,
                            &el.decoration_style,
                            decoration_color,
                            el.decoration_thickness as u32,
                        );
                    }
                }

                if el.overline {
                    let line_y = draw_y;
                    if line_y < win_y + win_h {
                        draw_decoration_line(
                            screen,
                            draw_x_base as u32,
                            line_y,
                            draw_x_base as u32 + w as u32,
                            &el.decoration_style,
                            decoration_color,
                            el.decoration_thickness as u32,
                        );
                    }
                }

                if el.is_link && !el.pointer_events_none {
                    self.links.push(HyperlinkArea {
                        href: el.href.clone(),
                        x0: el.x_offset,
                        y0: el.y_offset,
                        x1: el.x_offset + w,
                        y1: el.y_offset + el.height,
                    });
                }
            }

            // --- CSS filter: blur ---
            let blur_radius = crate::os_lib::web_engine::draw_helpers::parse_blur_radius(&el.filter);
            if blur_radius > 0 {
                let x0_rect = draw_x_base;
                let y0_rect = draw_y as i32;
                let x1_rect = x0_rect + el.width;
                let y1_rect = y0_rect + el.height;
                // クリップ領域と交差をとる
                let (cx0, cy0, cx1, cy1) = screen
                    .clip
                    .get()
                    .map(|(c0, c1, c2, c3)| (c0 as i32, c1 as i32, c2 as i32, c3 as i32))
                    .unwrap_or((0, 0, screen.width as i32, screen.height as i32));
                let bx0 = x0_rect.max(cx0);
                let by0 = y0_rect.max(cy0);
                let bx1 = x1_rect.min(cx1);
                let by1 = y1_rect.min(cy1);
                if bx1 > bx0 && by1 > by0 {
                    crate::os_lib::web_engine::draw_helpers::blur_screen_rect(screen, bx0, by0, bx1, by1, blur_radius);
                }
            }

            if has_overflow_clip {
                screen.pop_clip();
            }
            let _ = el_start;
        }

        if self.max_scroll_y > 0 && !self.scrollbar_width_none {
            // ページスクロールバー（共通ヘルパーで描画。`scrollbar-width:none`が
            // ルート要素に指定されている場合は非表示。2026-07-18 発見・実装）
            let bar_track_h = win_h as i32 - top_offset;
            let bar_track_y = (win_y + top_offset as u32) as i32;
            let content_h = self.max_scroll_y + bar_track_h;
            screen.draw_vscrollbar(
                win_x + win_w - 10,
                bar_track_y,
                bar_track_h,
                content_h,
                bar_track_h,
                self.scroll_y,
            );
        }

        // サブスクロールコンテナのスクロールバーを描画。
        for (cid, max_y, cx, cy, cw, ch) in &self.scroll_containers {
            if *max_y <= 0 {
                continue;
            }
            let cur = self.scroll_regions.get(cid).copied().unwrap_or(0);
            let bar_x = win_x as i32 + cx + cw - 10;
            let bar_y = cy - self.scroll_y + top_offset;
            let content_h = max_y + ch;
            screen.draw_vscrollbar(bar_x as u32, bar_y, *ch, content_h, *ch, cur);
        }


        let draw_end_tick = crate::kernel::timer::get_ticks();
        DRAW_LAST_END.store(draw_end_tick, core::sync::atomic::Ordering::Relaxed);
        let elapsed = draw_end_tick.wrapping_sub(draw_start_tick);
        // 【2026-08-05 計測】描画が最適化に値するかを判断する材料。
        // 毎フレーム出すのは規約違反（L-3）なので 25 フレームに 1 行だけ要約する。
        // 目的: 描画コストの把握。破棄条件: 判断がついたら削除。
        {
            use core::sync::atomic::{AtomicU32, Ordering};
            static FRAMES: AtomicU32 = AtomicU32::new(0);
            static TICKS: AtomicU32 = AtomicU32::new(0);
            static MAXT: AtomicU32 = AtomicU32::new(0);
            // 【2026-08-05 計測】最大を更新した回だけ、その 1 回の内訳を出す。
            // 「数十秒かかる `draw()` が存在する」ことは分かったので、
            // その 1 回で何をしていたのかを見る。
            // 目的: 長い draw の正体の特定。破棄条件: 特定でき次第削除。
            let prev_max = MAXT.load(Ordering::Relaxed);
            if elapsed as u32 > prev_max && elapsed > 50 {
                let relayout_this = RELAYOUT_IN_DRAW_TICKS
                    .load(Ordering::Relaxed)
                    .wrapping_sub(relayout_before);
                crate::warn!(
                    "[PERF][DRAW] 最長更新 {}tick（うち再レイアウト {}tick, 要素={}）",
                    elapsed,
                    relayout_this,
                    self.elements.len()
                );
            }
            let n = FRAMES.fetch_add(1, Ordering::Relaxed) + 1;
            TICKS.fetch_add(elapsed as u32, Ordering::Relaxed);
            MAXT.fetch_max(elapsed as u32, Ordering::Relaxed);
            // 【2026-08-05】100 フレームだと 1 ページ読み込みで到達しない回があり
            // （実測 0.5fps 前後）、要約が出ないまま終わる。25 に下げる。
            // 【2026-08-05】要約の間隔は**フレーム数ではなく時間**で決める。
            //
            // 25 フレームごとにしていたが、重い回は 1 ページ読み込みで
            // 25 回も描かない（実測 10 回未満の回があった）。
            // 実機 1 回が数分かかるのに**計測が取れずに終わる**のは無駄。
            // 時間基準なら描画回数によらず必ず出る。
            let last_dump = LAST_DUMP_TICK.load(Ordering::Relaxed);
            let due = last_dump == 0
                || draw_end_tick.wrapping_sub(last_dump) >= DUMP_INTERVAL_TICKS;
            if due {
                LAST_DUMP_TICK.store(draw_end_tick, Ordering::Relaxed);
            }
            if due {
                crate::warn!(
                    "[PERF][DRAW] 要素={} frames={} total={}tick max={}tick relayout={}tick 間隔合計={}tick 間隔最大={}tick 送信待ち={}tick/{}回 再送={}回",
                    self.elements.len(),
                    n,
                    TICKS.load(Ordering::Relaxed),
                    MAXT.load(Ordering::Relaxed),
                    RELAYOUT_IN_DRAW_TICKS.load(Ordering::Relaxed),
                    DRAW_GAP_SUM.load(Ordering::Relaxed),
                    DRAW_GAP_MAX.load(Ordering::Relaxed),
                    crate::kernel::tls::WRITE_WAIT_TICKS.load(Ordering::Relaxed),
                    crate::kernel::tls::WRITE_WAIT_CALLS.load(Ordering::Relaxed),
                    crate::kernel::tls::WRITE_RETX_COUNT.load(Ordering::Relaxed)
                );
                // 関連する計測点を 1 行でまとめて出す（`perf.rs`）。
                super::perf::dump("frame");
            }
        }
        if elapsed > 1 {
            // 【2026-07-31計測】レイアウトは 6 秒まで下がったが、
            // 1 サイクル 26 秒のうち 20 秒がレイアウトの外にある。
            // 描画がその何割かを見るため warn へ上げる。
            crate::apps::browser::log_redraw_reasons();
        }
        self.dirty = false;
    }

    /// 現在のマウス座標 (mouse_x, mouse_y) がいずれかのサブスクロールコンテナの
    /// 表示領域内にあれば、そのコンテナ element_id を返す。
    fn hovered_scroll_container(&self, top_offset: i32) -> Option<String> {
        let mx = self.mouse_x;
        let my = self.mouse_y;
        for (cid, max_y, cx, cy, cw, ch) in &self.scroll_containers {
            if *max_y <= 0 {
                continue;
            }
            let screen_y = cy - self.scroll_y + top_offset;
            if mx >= *cx && mx < cx + cw && my >= screen_y && my < screen_y + ch {
                return Some(cid.clone());
            }
        }
        None
    }

    pub fn scroll(&mut self, dy: i32) {
        let top = self.top_offset;
        self.scroll_with_top(dy, top);
    }

    pub fn scroll_with_top(&mut self, dy: i32, top_offset: i32) {
        // マウスがサブスクロールコンテナの上にあればそちらをスクロール。
        if let Some(cid) = self.hovered_scroll_container(top_offset) {
            let max = self.scroll_containers
                .iter()
                .find(|(id, ..)| *id == cid)
                .map(|(_, m, ..)| *m)
                .unwrap_or(0);
            let entry = self.scroll_regions.entry(cid).or_insert(0);
            let prev = *entry;
            *entry = (*entry + dy).max(0).min(max);
            if *entry != prev {
                self.dirty = true;
                self.dirty_reason = "render.rs:2462";
            }
            return;
        }
        // ページ全体のスクロール。
        let prev = self.scroll_y;
        self.scroll_y = (self.scroll_y + dy).max(0).min(self.max_scroll_y);
        if self.scroll_y != prev {
            self.dirty = true;
            self.dirty_reason = "render.rs:2470";
            // window.scrollY を更新し、scroll リスナを発火（位置が変化したときのみ）。
            self.js_runtime.fire_scroll(self.scroll_y);
        }
    }

    pub fn handle_mouse_click(&mut self, mx: u32, my: u32, top_offset: i32) {
        let x = mx as i32;
        let y = my as i32;

        self.focused_id = None;
        self.dirty = true;
        self.dirty_reason = "render.rs:2481";

        if y < top_offset {
            return;
        }

        for link in &self.links {
            if x >= link.x0 && x <= link.x1 && y >= link.y0 && y <= link.y1 {
                let href = link.href.clone();
                self.navigate_to_href(&href, top_offset);
                break;
            }
        }
    }

    pub fn navigate_to_href(&mut self, href: &str, top_offset: i32) {
        if href.is_empty() {
            return;
        }

        // 同一ページ内アンカーナビ（href="#" / "#section"）。フルリロードせず、
        // 対象 id 要素へスクロールし、location.hash を更新して hashchange を発火する。
        if href.starts_with('#') {
            self.navigate_to_fragment(href);
            return;
        }

        if href.starts_with('/') {
            let host = self.current_host.clone();
            self.load_page(self.current_is_https, &host, href, true, top_offset);
        } else if href.starts_with("http://") || href.starts_with("https://") {
            let is_https = href.starts_with("https://");
            let clean_url = if is_https {
                href.get(8..).unwrap_or("")
            } else {
                href.get(7..).unwrap_or("")
            };

            let parts: Vec<&str> = clean_url.splitn(2, '/').collect();
            let host = parts[0];
            let path = if parts.len() > 1 {
                alloc::format!("/{}", parts[1])
            } else {
                String::from("/")
            };
            self.load_page(is_https, host, &path, true, top_offset);
        } else {
            if href.contains('.') && !href.contains('/') {
                self.load_page(self.current_is_https, href, "/", true, top_offset);
            } else {
                let host = self.current_host.clone();
                let path = alloc::format!("{}/{}", self.current_path.trim_end_matches('/'), href);
                self.load_page(self.current_is_https, &host, &path, true, top_offset);
            }
        }
    }

    /// 同一ページ内アンカーナビ（href が "#..." のリンク）。フルページ再読込を避け、
    /// 1) 対象 id 要素があればその位置へスクロール、2) location.hash を更新、
    /// 3) hashchange イベントを発火する。href="#"（空フラグメント）はページ先頭へ。
    pub(crate) fn navigate_to_fragment(&mut self, href: &str) {
        let frag = href.trim_start_matches('#');
        // 現在URL（hash除去済み）を組み立てる。
        let scheme = if self.current_is_https {
            "https://"
        } else {
            "http://"
        };
        let base = alloc::format!("{}{}{}", scheme, self.current_host, self.current_path);
        let base = match base.split_once('#') {
            Some((before, _)) => String::from(before),
            None => base,
        };
        let old_url = self.current_url_with_hash.clone();
        let new_url = alloc::format!("{}#{}", base, frag);

        // 対象 id を持つ要素へスクロール（先頭フラグメントが空なら最上部）。
        if frag.is_empty() {
            if self.scroll_y != 0 {
                self.scroll_y = 0;
                self.dirty = true;
                self.dirty_reason = "render.rs:2561";
            }
        } else if let Some(el) = self.elements.iter().find(|e| e.element_id == frag) {
            // scroll-margin-top: 固定ヘッダー等の下にターゲットが隠れないよう、
            // 通常のスクロール位置からこの分だけ引く。
            let target = (el.y_offset - el.scroll_margin_top)
                .max(0)
                .min(self.max_scroll_y);
            if self.scroll_y != target {
                if self.scroll_smooth {
                    // scroll-behavior:smooth — 即座にジャンプせず、次フレームから
                    // tick_scroll_anim() でイージング付きに遷移させる。
                    self.scroll_anim_active = true;
                    self.scroll_anim_from = self.scroll_y;
                    self.scroll_anim_to = target;
                    self.scroll_anim_start_ms = self.now_ms();
                    self.dirty = true;
                    self.dirty_reason = "render.rs:2577";
                } else {
                    self.scroll_y = target;
                    self.dirty = true;
                    self.dirty_reason = "render.rs:2580";
                    self.js_runtime.fire_scroll(self.scroll_y);
                }
            }
        }

        // location.hash を更新し hashchange を発火（hash が実際に変わったときのみ）。
        if old_url != new_url {
            self.current_url_with_hash = new_url.clone();
            self.js_runtime.fire_hashchange(&old_url, &new_url);
            self.dirty = true;
            self.dirty_reason = "render.rs:2590";
        }

        // `:target` 疑似クラスの再判定のため、現在のフラグメントを更新して再スタイル/
        // 再レイアウトを要求する（フラグメントが実際に変わった場合のみ）。
        {
            let mut current = crate::os_lib::layout::CURRENT_TARGET_ID.lock();
            if current.as_str() != frag {
                *current = String::from(frag);
                drop(current);
                self.dom_needs_rebuild = true;
            }
        }
    }

    /// `scroll-behavior:smooth` によるスムーススクロールを1フレームぶん進める。
    /// ease-out（`1 - (1-t)^2`）で約300msかけて目標位置まで遷移する。
    /// ホイール/スクロールバードラッグには適用しない（アンカー遷移専用、実ブラウザの
    /// `scrollIntoView`/アンカー遷移のみスムーススクロール対象という挙動に合わせる）。
    fn tick_scroll_anim(&mut self) {
        const DURATION_MS: f32 = 300.0;
        let now = self.now_ms();
        let elapsed = (now - self.scroll_anim_start_ms).max(0.0);
        let t = (elapsed / DURATION_MS).min(1.0);
        let eased = 1.0 - (1.0 - t) * (1.0 - t);
        let from = self.scroll_anim_from as f32;
        let to = self.scroll_anim_to as f32;
        self.scroll_y = libm::roundf(from + (to - from) * eased) as i32;
        self.dirty = true;
        self.dirty_reason = "render.rs:2618";
        if t >= 1.0 {
            self.scroll_y = self.scroll_anim_to;
            self.scroll_anim_active = false;
            self.js_runtime.fire_scroll(self.scroll_y);
        }
    }

    /// URL 文字列を (is_https, host, path) に分解。相対パスは現在の host を使用。
    /// URL を (https か, ホスト, パス) へ分解する。
    ///
    /// 【2026-08-03】**フラグメント（`#id`）を落とすようにした**。
    /// 以前は `#` をパスに含めたまま HTTP 要求に載せており、
    /// `https://example.com/#research` のような URL が正しく扱えなかった。
    /// フラグメントはサーバへ送るものではなく、
    /// 取得後にページ内でスクロールするための指定である。
    pub(crate) fn resolve_url_parts(&self, url: &str) -> (bool, String, String) {
        let url = match url.split_once('#') {
            Some((before, _)) => before,
            None => url,
        };
        if let Some(rest) = url.strip_prefix("https://") {
            if let Some(idx) = rest.find('/') {
                (
                    true,
                    String::from(rest.get(..idx).unwrap_or("")),
                    String::from(rest.get(idx..).unwrap_or("")),
                )
            } else {
                (true, String::from(rest), String::from("/"))
            }
        } else if let Some(rest) = url.strip_prefix("http://") {
            if let Some(idx) = rest.find('/') {
                (
                    false,
                    String::from(rest.get(..idx).unwrap_or("")),
                    String::from(rest.get(idx..).unwrap_or("")),
                )
            } else {
                (false, String::from(rest), String::from("/"))
            }
        } else if let Some(rest) = url.strip_prefix("//") {
            // プロトコル相対URL（`//host/path`）が、`url.starts_with('/')` の
            // 判定に巻き込まれて現在のホスト配下のルート相対パスとして誤解決
            // されるバグだった（`os_lib/js/builtins.rs` の `resolve_url` で
            // 発見・修正済みの同型バグ。こちらは実際のページ描画が使う別系統の
            // URL 解決関数のため個別に修正が必要だった）。現在のスキームを
            // 引き継ぎ、`//` 以降を別ホスト+パスとして扱う。
            if let Some(idx) = rest.find('/') {
                (
                    self.current_is_https,
                    String::from(rest.get(..idx).unwrap_or("")),
                    String::from(rest.get(idx..).unwrap_or("")),
                )
            } else {
                (self.current_is_https, String::from(rest), String::from("/"))
            }
        } else if url.starts_with('/') {
            (
                self.current_is_https,
                self.current_host.clone(),
                String::from(url),
            )
        } else {
            let path = alloc::format!("{}/{}", self.current_path.trim_end_matches('/'), url);
            (self.current_is_https, self.current_host.clone(), path)
        }
    }

    fn url_encode(s: &str) -> String {
        let mut out = String::new();
        for b in s.bytes() {
            match b {
                b'A'..=b'Z' | b'a'..=b'z' | b'0'..=b'9' | b'-' | b'_' | b'.' | b'~' => {
                    out.push(b as char);
                }
                b' ' => {
                    out.push('+');
                }
                _ => {
                    out.push_str(&alloc::format!("%{:02X}", b));
                }
            }
        }
        out
    }

    /// textarea の表示用折返し計算（描画・スクロール上限・キー操作で共通使用）。
    /// `wrap` が無効なら物理行をそのまま返す。
    /// 1 文字ずつ advance 幅を加算する O(n) 実装。
    /// 注意: ここでの行分割はエディタ表示専用で、Web ページ本文の折返し
    /// (flatten_layout / get_string_wrapped_size ペア) とは独立した規則。
    fn wrap_editor_lines(text_val: &str, el_width: i32, wrap: bool) -> Vec<(String, bool)> {
        if !wrap {
            return text_val
                .split('\n')
                .map(|s| (String::from(s), true))
                .collect();
        }
        let max_w = (el_width - 16).max(50) as u32;
        let mut lines = Vec::new();
        for phys_line in text_val.split('\n') {
            if phys_line.is_empty() {
                lines.push((String::new(), true));
                continue;
            }
            let mut current_line = String::new();
            let mut cur_w = 0u32;
            let mut sub_lines = Vec::new();
            for c in phys_line.chars() {
                let cw = crate::kernel::vector_font::get_vector_char_width(c, 16);
                if cur_w + cw > max_w {
                    sub_lines.push(current_line);
                    current_line = String::from(c);
                    cur_w = cw;
                } else {
                    current_line.push(c);
                    cur_w += cw;
                }
            }
            if !current_line.is_empty() {
                sub_lines.push(current_line);
            }
            let sub_len = sub_lines.len();
            for (idx, line) in sub_lines.into_iter().enumerate() {
                let is_phys_end = idx == sub_len - 1;
                lines.push((line, is_phys_end));
            }
        }
        lines
    }

    /// カーソルインデックス（文字ベース）が表示上の何行目（0-indexed）にあるかを計算する。
    fn get_cursor_line_idx(&self, text_val: &str, cursor_pos: usize, el_width: i32) -> usize {
        let wrap = self.editor_wrap;
        if !wrap {
            let mut line_idx = 0;
            for (idx, c) in text_val.chars().enumerate() {
                if idx >= cursor_pos {
                    break;
                }
                if c == '\n' {
                    line_idx += 1;
                }
            }
            return line_idx;
        }

        let max_w = (el_width - 16).max(50) as u32;
        let mut line_idx = 0;
        let mut cur_w = 0u32;

        for (idx, c) in text_val.chars().enumerate() {
            if idx >= cursor_pos {
                break;
            }
            if c == '\n' {
                line_idx += 1;
                cur_w = 0;
                continue;
            }
            let cw = crate::kernel::vector_font::get_vector_char_width(c, 16);
            if cur_w + cw > max_w {
                line_idx += 1;
                cur_w = cw;
            } else {
                cur_w += cw;
            }
        }
        line_idx
    }


    /// フォーカス中入力欄の TextBox を作る。**キャレット位置は `restore` から
    /// 復元する**（同じ要素に留まっている場合のみ呼び出し側が Some を渡す）。
    ///
    /// `parse_and_layout` が `active_text_box` を毎フレーム捨てるため、
    /// この復元が無いと入力のたびにカーソルが末尾へ飛ぶ。
    /// `&self` を取らない関連関数にしてあるのは、呼び出し側が
    /// `self.elements` を借用したまま `self.active_text_box` へ代入できるようにするため。
    fn build_text_box(
        val: &str,
        is_textarea: bool,
        restore: Option<usize>,
    ) -> crate::kernel::text_box::TextBox {
        let mut tb = if is_textarea {
            crate::kernel::text_box::TextBox::with_text_multiline(val)
        } else {
            crate::kernel::text_box::TextBox::with_text(val)
        };
        if let Some(pos) = restore {
            tb.cursor_pos = pos.min(tb.text.chars().count());
        }
        tb
    }

    /// フォーカス中の入力欄の編集中テキストを form_values へ確定させる。
    /// フォーカス移動を伴わない送信（Enter キー等）でも入力値が確実に反映される。
    fn flush_focused_input(&mut self) {
        if let Some(ref fid) = self.focused_id {
            if let Some(ref tb) = self.active_text_box {
                self.form_values.insert(fid.clone(), tb.text.clone());
            }
        }
    }

    pub fn submit_form(&mut self, action: &str, method: &str, top_offset: i32) {
        // 送信直前に編集中テキストを確定（空クエリ送信＝検索ページに戻る不具合の防止）
        self.flush_focused_input();

        // 送信対象の <form> を特定（フォーカス入力の祖先、無ければ最初の form）。
        let form_idx = {
            let dom = self.js_runtime.dom.borrow();
            let from_focus = self
                .focused_id
                .as_ref()
                .and_then(|fid| dom.get_element_by_id(fid))
                .and_then(|i| dom.closest_tag(i, "form"));
            from_focus.or_else(|| dom.first_by_tag("form"))
        };

        // HTML5 制約バリデーション（submit イベントより前に実行）。form に novalidate が
        // 無い場合のみ。最初に違反した要素へフォーカスを移し、invalid イベントを発火して送信中止。
        if let Some(fi) = form_idx {
            let novalidate = self.js_runtime.dom.borrow().has_attr(fi, "novalidate");
            if !novalidate {
                // (field_node_idx, element_id, message) を収集。
                let invalid_fields: Vec<(usize, String, String)> = {
                    let dom = self.js_runtime.dom.borrow();
                    let fields = dom.descendants_by_tags(fi, &["input", "textarea", "select"]);
                    let mut out = Vec::new();
                    for node in fields {
                        // element_id（id 優先、無ければ name）で form_values を引く。
                        let eid = dom
                            .get_attr(node, "id")
                            .filter(|s| !s.is_empty())
                            .or_else(|| dom.get_attr(node, "name"))
                            .unwrap_or_default();
                        let value = if eid.is_empty() {
                            String::new()
                        } else {
                            self.form_values.get(&eid).cloned().unwrap_or_default()
                        };
                        if let Some(msg) = dom.validate_field(node, &value) {
                            out.push((node, eid, msg));
                        }
                    }
                    out
                };
                if let Some((node, eid, msg)) = invalid_fields.into_iter().next() {
                    // invalid イベントを発火（JS がカスタム処理する余地を与える）。
                    self.js_runtime.dispatch_event(node, "invalid");
                    // 最初の不正フィールドへフォーカスを移す。
                    if !eid.is_empty() {
                        self.focused_id = Some(eid.clone());
                        self.dom_needs_rebuild = true; // :focus-within の再判定に必要
                        let cur = self.form_values.get(&eid).cloned().unwrap_or_default();
                        self.active_text_box =
                            Some(crate::kernel::text_box::TextBox::with_text(&cur));
                        self.focus_value = cur;
                    }
                    // 検証メッセージを表示（コンソール出力）。送信は中止し、不正フィールドへフォーカス。
                    crate::warn!("[GPU] Form validation failed [{}]: {}", eid, msg);
                    self.dirty = true;
                    self.dirty_reason = "render.rs:2846";
                    return;
                }
            }
        }

        // <form> へ submit を発火。preventDefault されたら送信をキャンセル（SPA がフォーム送信を
        // JS で乗っ取る定番パターン）。
        if let Some(fi) = form_idx {
            let (_fired, prevented) = self.js_runtime.dispatch_event_with(fi, "submit", &[]);
            if self.js_runtime.dom.borrow().dirty {
                self.dom_needs_rebuild = true;
                self.dirty = true;
                self.dirty_reason = "render.rs:2858";
            }
            if prevented {
                return; // 既定の送信を抑制
            }
        }

        let mut query = String::new();
        let mut first = true;
        // checkbox/radio で未チェック（値が空）のフィールドは送信に含めない（HTML仕様）。
        let unchecked: alloc::collections::BTreeSet<String> = self
            .elements
            .iter()
            .filter(|e| (e.input_kind == 1 || e.input_kind == 2) && !e.element_id.is_empty())
            .filter(|e| {
                self.form_values
                    .get(&e.element_id)
                    .map(|v| v.is_empty())
                    .unwrap_or(true)
            })
            .map(|e| e.element_id.clone())
            .collect();
        for (k, v) in &self.form_values {
            // 未チェックの checkbox/radio はスキップ。
            if v.is_empty() && unchecked.contains(k) {
                continue;
            }
            // パラメータ名は `name` 属性（field_names）。無ければ element_id へフォールバック。
            let param_name = self
                .field_names
                .get(k)
                .cloned()
                .unwrap_or_else(|| k.clone());
            if param_name.is_empty() {
                continue;
            }
            if !first {
                query.push('&');
            }
            let enc_k = Self::url_encode(&param_name);
            let enc_v = Self::url_encode(v);
            query.push_str(&enc_k);
            query.push('=');
            query.push_str(&enc_v);
            first = false;
        }

        let mut target_action = String::from(action);
        if target_action.is_empty() {
            target_action = self.current_path.clone();
        }

        crate::info!(
            "SUBMIT_FORM: {} {} ({} fields)",
            method,
            target_action,
            self.form_values.len()
        );

        if method.eq_ignore_ascii_case("POST") {
            // action URL を解決して POST リクエスト
            let (is_https, host, path) = self.resolve_url_parts(&target_action);
            self.load_page_post(is_https, &host, &path, &query, top_offset);
        } else {
            let separator = if target_action.contains('?') {
                "&"
            } else {
                "?"
            };
            let full_url = alloc::format!("{}{}{}", target_action, separator, query);
            self.navigate_to_href(&full_url, top_offset);
        }
    }

    /// type=reset ボタン押下時の処理。ボタン id から所属 <form> を特定し、配下の
    /// input/textarea/select を HTML 既定値（initial_form_values）へ戻す。DOM 属性も
    /// 同期し、reset イベントを発火してから再レイアウトを要求する。
    pub fn reset_form(&mut self, button_id: &str) {
        // 所属 <form> を特定（ボタンの祖先 form、無ければ最初の form）。
        let form_idx = {
            let dom = self.js_runtime.dom.borrow();
            let from_btn = (!button_id.is_empty())
                .then(|| dom.get_element_by_id(button_id))
                .flatten()
                .and_then(|i| dom.closest_tag(i, "form"));
            from_btn.or_else(|| dom.first_by_tag("form"))
        };
        if let Some(fi) = form_idx {
            self.reset_form_node(fi);
        }
    }

    /// 指定した <form> ノード（node idx）配下のコントロールを初期値へ戻す。
    pub fn reset_form_node(&mut self, fi: usize) {
        // 編集中テキストの確定状態を破棄（reset 後に上書きされるため）。
        self.active_text_box = None;
        self.focus_value = String::new();

        // フォーム配下の全コントロールを (node_idx, element_id) で収集。
        let fields: Vec<(usize, String)> = {
            let dom = self.js_runtime.dom.borrow();
            dom.descendants_by_tags(fi, &["input", "textarea", "select"])
                .into_iter()
                .map(|node| {
                    let eid = dom
                        .get_attr(node, "id")
                        .filter(|s| !s.is_empty())
                        .or_else(|| dom.get_attr(node, "name"))
                        .unwrap_or_default();
                    (node, eid)
                })
                .collect()
        };

        // 各コントロールを初期値へ戻し、DOM 属性も同期。
        for (node, eid) in &fields {
            if eid.is_empty() {
                continue;
            }
            let init = self
                .initial_form_values
                .get(eid)
                .cloned()
                .unwrap_or_default();
            self.form_values.insert(eid.clone(), init.clone());

            // 描画要素種別を引いて DOM 属性の戻し方を分岐。
            let kind = self
                .elements
                .iter()
                .find(|e| &e.element_id == eid)
                .map(|e| e.input_kind)
                .unwrap_or(0);
            let mut dom = self.js_runtime.dom.borrow_mut();
            dom.remove_attr(*node, "_live_value");
            dom.remove_attr(*node, "_live_checked");
            match kind {
                1 | 2 => {
                    // checkbox / radio: 初期値が空なら unchecked。
                    if init.is_empty() {
                        dom.remove_attr(*node, "checked");
                    } else {
                        dom.set_attr(*node, "checked", "");
                    }
                }
                _ => {
                    // text / textarea / select: value 属性を初期値へ。
                    dom.set_attr(*node, "value", &init);
                }
            }
        }

        // フォーカス中フィールドが reset 対象なら表示テキストも初期値へ。
        if let Some(fid) = self.focused_id.clone() {
            if fields.iter().any(|(_, e)| e == &fid) {
                let init = self
                    .initial_form_values
                    .get(&fid)
                    .cloned()
                    .unwrap_or_default();
                let is_ta = self
                    .elements
                    .iter()
                    .find(|e| e.element_id == fid)
                    .map(|e| e.is_textarea)
                    .unwrap_or(false);
                self.active_text_box = Some(if is_ta {
                    crate::kernel::text_box::TextBox::with_text_multiline(&init)
                } else {
                    crate::kernel::text_box::TextBox::with_text(&init)
                });
                self.focus_value = init;
            }
        }

        // reset イベントを発火（JS がカスタム処理する余地を与える）。
        self.js_runtime.dispatch_event(fi, "reset");
        if self.js_runtime.dom.borrow().dirty {
            self.dom_needs_rebuild = true;
        }
        self.dom_needs_rebuild = true;
        self.dirty = true;
        self.dirty_reason = "render.rs:3039";
    }

    /// 指定要素の**背後に実際にある背景色**を返す。
    ///
    /// 【2026-07-26 バグ修正】従来は自前の背景を持たない要素について
    /// `page_bg_color`（ページ全体の背景＝多くの場合白）へフォールバックしていた。
    /// しかしテキスト描画はこの色を「グリフの下地」として使うため、
    /// 実際には色付きの領域（例: `.hero { background-color:#ff6b6b }`）の上に
    /// 乗っている文字でも下地が白として扱われてしまう。
    /// とくにベクタフォントに該当グリフが無くフォールバック描画へ落ちる場合、
    /// `draw_string_*` は下地色で矩形を塗ってから文字を描くため、
    /// **白い矩形を塗った上に白い文字**という完全に不可視な描画になっていた
    /// （実サイトのヒーロー見出しが表示されなかった原因）。
    ///
    /// 対象要素の矩形を内包する要素のうち、背景色を持ち面積が最小のもの
    /// （＝最も内側の背景）を採用する。見つからなければ従来どおりページ背景。
    fn effective_bg_behind(&self, target: &super::RenderElement) -> u32 {
        let tx0 = target.x_offset;
        let ty0 = target.y_offset;
        let tx1 = tx0 + target.width;
        let ty1 = ty0 + target.height;

        let mut best: Option<(i64, u32)> = None;
        for el in &self.elements {
            // 【2026-07-28】グラデーションを持つ要素は、実際に画面へ塗られるのは
            // グラデーション（描画側は単色 bg より優先する）。ここで background-color を
            // 返すと、グリフのアンチエイリアス色が実際の背景と食い違う。
            // 実測: `.hero` は bg-color=#ff6b6b・実塗り=青系グラデで、
            let grad_bg = el
                .linear_gradient
                .as_ref()
                .and_then(|g| g.stops.first().map(|s| s.color));
            let Some(bg) = grad_bg.or(el.bg_color) else {
                continue;
            };
            // 完全に不透明でない背景は下地として信頼できないので採用しない。
            if (bg >> 24) != 0xFF && (bg >> 24) != 0x00 {
                continue;
            }
            let x0 = el.x_offset;
            let y0 = el.y_offset;
            let x1 = x0 + el.width;
            let y1 = y0 + el.height;
            if x0 <= tx0 && y0 <= ty0 && x1 >= tx1 && y1 >= ty1 {
                let area = (x1 - x0) as i64 * (y1 - y0) as i64;
                if best.is_none_or(|(a, _)| area < a) {
                    best = Some((area, bg));
                }
            }
        }
        best.map(|(_, bg)| bg)
            .unwrap_or(self.page_bg_color.unwrap_or(0xFFFFFFFF))
    }

    /// コンテンツ座標 (local_x, local_y) でヒットする最前面の要素 id を返す（id を持つもの）。
    /// マウスイベントのヒットテストに使用。ヒット無しなら None。
    fn hit_test_element_id(&self, local_x: i32, local_y: i32, top_offset: i32) -> Option<String> {
        let hx = local_x - 20;
        let hy = local_y - top_offset + self.scroll_y;
        let mut found: Option<String> = None;
        for (idx, el) in self.elements.iter().enumerate() {
            // Use element_id if present; otherwise generate a synthetic id based on the element index.
            let element_id = if el.element_id.is_empty() {
                format!("_ta_{}", idx)
            } else {
                el.element_id.clone()
            };
            let hit_y = hy >= el.y_offset && hy < el.y_offset + el.height;
            let hit_x = if el.x_offset > 0 || el.width < 1000 {
                hx >= el.x_offset && hx < el.x_offset + el.width
            } else {
                hx >= 0
            };
            if hit_y && hit_x {
                found = Some(element_id); // 後勝ち＝最前面寄り
            }
        }
        found
    }

    pub fn on_mouse(
        &mut self,
        local_x: i32,
        local_y: i32,
        btn_left: bool,
        btn_right: bool,
        wheel: i32,
        top_offset: i32,
    ) {
        crate::debug!(
            "[GPU] TRACE: on_mouse x={}, y={}, btn={}, wheel={}",
            local_x,
            local_y,
            btn_left,
            wheel
        );
        self.mouse_x = local_x;
        self.mouse_y = local_y;
        // `:active` 疑似クラス判定用の現在フレームの押下状態。
        self.mouse_btn_left_down = btn_left;

        // 左ボタンの押下/解放エッジを検出（WM は毎フレーム現在値で on_mouse を呼ぶ）。
        let pressed_edge = btn_left && !self.prev_btn_left;
        let released_edge = !btn_left && self.prev_btn_left;
        self.prev_btn_left = btn_left;

        // mousedown: 押下の瞬間に、ヒット要素へ発火（リスナがある場合のみヒットテスト）。
        if pressed_edge && self.js_runtime.dom.borrow().has_listener("mousedown") {
            if let Some(id) = self.hit_test_element_id(local_x, local_y, top_offset) {
                let node = self.js_runtime.dom.borrow().get_element_by_id(&id);
                if let Some(i) = node {
                    self.js_runtime
                        .dispatch_mouse(i, "mousedown", local_x, local_y);
                }
                self.relayout_if_dom_dirty(top_offset, self.win_w, self.win_h);
            }
        }
        // mouseup: 解放の瞬間に、ヒット要素へ発火。
        if released_edge && self.js_runtime.dom.borrow().has_listener("mouseup") {
            if let Some(id) = self.hit_test_element_id(local_x, local_y, top_offset) {
                let node = self.js_runtime.dom.borrow().get_element_by_id(&id);
                if let Some(i) = node {
                    self.js_runtime
                        .dispatch_mouse(i, "mouseup", local_x, local_y);
                }
                self.relayout_if_dom_dirty(top_offset, self.win_w, self.win_h);
            }
        }
        // contextmenu: 右ボタンの押下エッジで、ヒット要素へ発火（右クリックメニュー）。
        let right_pressed_edge = btn_right && !self.prev_btn_right;
        self.prev_btn_right = btn_right;
        if right_pressed_edge && self.js_runtime.dom.borrow().has_listener("contextmenu") {
            if let Some(id) = self.hit_test_element_id(local_x, local_y, top_offset) {
                let node = self.js_runtime.dom.borrow().get_element_by_id(&id);
                if let Some(i) = node {
                    self.js_runtime
                        .dispatch_mouse_full(i, "contextmenu", local_x, local_y, 2, 0);
                }
                self.relayout_if_dom_dirty(top_offset, self.win_w, self.win_h);
            }
        }
        // dblclick: 押下エッジで、同一要素を一定 tick 以内に2回クリックしたら発火。
        if pressed_edge {
            let now = crate::kernel::timer::get_ticks();
            let hit = self.hit_test_element_id(local_x, local_y, top_offset);
            if let Some(ref id) = hit {
                let is_double = self.last_click_id.as_ref() == Some(id)
                    && now.saturating_sub(self.last_click_tick) <= DBLCLICK_MAX_TICKS;
                if is_double {
                    let has = self.js_runtime.dom.borrow().has_listener("dblclick");
                    if has {
                        let node = self.js_runtime.dom.borrow().get_element_by_id(id);
                        if let Some(i) = node {
                            self.js_runtime
                                .dispatch_mouse(i, "dblclick", local_x, local_y);
                            self.relayout_if_dom_dirty(top_offset, self.win_w, self.win_h);
                        }
                    }
                    // 3連続クリックを2回目+2回目…と誤判定しないようリセット。
                    self.last_click_id = None;
                    self.last_click_tick = 0;
                } else {
                    self.last_click_id = hit.clone();
                    self.last_click_tick = now;
                }
            } else {
                self.last_click_id = None;
            }
        }

        // マウスイベント: ホバー要素の変化で mouseout/mouseover、現在要素へ mousemove を発火。
        // リスナが無いページではヒットテスト自体を省略（毎フレームのコスト回避）。
        let want_mouse_events = {
            let d = self.js_runtime.dom.borrow();
            d.has_listener("mouseover")
                || d.has_listener("mouseout")
                || d.has_listener("mousemove")
                || d.has_listener("mouseenter")
                || d.has_listener("mouseleave")
        };
        if want_mouse_events {
            let hx = local_x - 20;
            let hy = local_y - top_offset + self.scroll_y;
            let mut new_hover: Option<String> = None;
            for el in &self.elements {
                if el.element_id.is_empty() {
                    continue;
                }
                let hit_y = hy >= el.y_offset && hy < el.y_offset + el.height;
                let hit_x = if el.x_offset > 0 || el.width < 1000 {
                    hx >= el.x_offset && hx < el.x_offset + el.width
                } else {
                    hx >= 0
                };
                if hit_y && hit_x {
                    new_hover = Some(el.element_id.clone()); // 後勝ち＝最前面寄り
                }
            }
            if new_hover != self.hovered_id {
                if let Some(old) = self.hovered_id.clone() {
                    let oi = self.js_runtime.dom.borrow().get_element_by_id(&old);
                    if let Some(i) = oi {
                        self.js_runtime
                            .dispatch_mouse(i, "mouseout", local_x, local_y);
                    }
                }
                if let Some(nh) = new_hover.clone() {
                    let ni = self.js_runtime.dom.borrow().get_element_by_id(&nh);
                    if let Some(i) = ni {
                        self.js_runtime
                            .dispatch_mouse(i, "mouseover", local_x, local_y);
                    }
                }
                self.hovered_id = new_hover.clone();
            }
            if let Some(nh) = new_hover {
                let ni = self.js_runtime.dom.borrow().get_element_by_id(&nh);
                if let Some(i) = ni {
                    self.js_runtime
                        .dispatch_mouse(i, "mousemove", local_x, local_y);
                }
            }
            if self.js_runtime.dom.borrow().dirty {
                self.dom_needs_rebuild = true;
                self.dirty = true;
                self.dirty_reason = "render.rs:3264";
            }
        }

        if wheel != 0 {
            // wheel イベントをヒット要素（無ければフォーカス要素）へ発火。
            // preventDefault されたら既定のスクロールを抑制する。
            let mut wheel_prevented = false;
            if self.js_runtime.dom.borrow().has_listener("wheel") {
                if let Some(id) = self.hit_test_element_id(local_x, local_y, top_offset) {
                    let idx = self.js_runtime.dom.borrow().get_element_by_id(&id);
                    if let Some(i) = idx {
                        let (_f, prevented) = self
                            .js_runtime
                            .dispatch_mouse_full(i, "wheel", local_x, local_y, 0, wheel);
                        wheel_prevented = prevented;
                        self.relayout_if_dom_dirty(top_offset, self.win_w, self.win_h);
                    }
                }
            }
            if wheel_prevented {
                return;
            }
            let mut focus_on_textarea = false;
            let mut text_lines_len = 0;
            let mut text_area_h = 200;
            if let Some(ref focused_id) = self.focused_id {
                if let Some(el) = self.elements.iter().find(|e| &e.element_id == focused_id) {
                    if el.is_textarea {
                        focus_on_textarea = true;
                        text_area_h = el.height;
                        if let Some(val) = self.form_values.get(&el.element_id) {
                            text_lines_len =
                                Self::wrap_editor_lines(val, el.width, self.editor_wrap).len();
                        }
                    }
                }
            }

            if focus_on_textarea {
                let max_scroll_y = (text_lines_len as i32 - (text_area_h / 20) + 1).max(0);
                self.editor_scroll_y = (self.editor_scroll_y + wheel).max(0).min(max_scroll_y);
                self.dirty = true;
                self.dirty_reason = "render.rs:3306";
            } else {
                self.scroll_with_top(wheel * 24, top_offset);
            }
        }
        if !btn_left {
            // ボタン離し: 全ドラッグ状態をリセット。
            self.dragging_scrollbar = false;
            self.dragging_sub_scrollbar = None;
        }

        if btn_left {
            // サブスクロールバードラッグ: 開始判定。
            if self.dragging_sub_scrollbar.is_none() && !self.dragging_scrollbar {
                for (cid, max_y, cx, cy, cw, ch) in &self.scroll_containers {
                    if *max_y <= 0 {
                        continue;
                    }
                    let bar_x = cx + cw - 12;
                    let bar_y = cy - self.scroll_y + top_offset;
                    if local_x >= bar_x && local_x <= cx + cw
                        && local_y >= bar_y && local_y < bar_y + ch
                    {
                        self.dragging_sub_scrollbar = Some(cid.clone());
                        break;
                    }
                }
            }
            // サブスクロールバードラッグ: 進行中。
            if let Some(cid) = self.dragging_sub_scrollbar.clone() {
                let meta = self.scroll_containers.iter()
                    .find(|(id, ..)| *id == cid)
                    .cloned();
                if let Some((_cid, max_y, _cx, cy, _cw, ch)) = meta {
                    let content_h = max_y + ch;
                    let thumb_h = ((ch * ch) / content_h).max(20);
                    let bar_y = cy - self.scroll_y + top_offset;
                    let ratio = (local_y - bar_y - thumb_h / 2) as f32
                        / (ch - thumb_h) as f32;
                    let entry = self.scroll_regions.entry(cid).or_insert(0);
                    *entry = (ratio.clamp(0.0, 1.0) * max_y as f32) as i32;
                    self.dirty = true;
                    self.dirty_reason = "render.rs:3347";
                }
                return;
            }

            if !self.dragging_scrollbar && self.max_scroll_y > 0 && local_y >= top_offset {
                // スクロールバー領域（右端12px）をクリックしたかチェック
                if local_x >= (self.win_w as i32 - 12) && local_x <= self.win_w as i32 {
                    self.dragging_scrollbar = true;
                }
            }

            if self.dragging_scrollbar {
                let bar_track_h = self.win_h as i32 - top_offset;
                let content_h = self.max_scroll_y + bar_track_h;
                let thumb_h = ((bar_track_h * bar_track_h) / content_h).max(30);

                let scroll_ratio =
                    (local_y - top_offset - (thumb_h / 2)) as f32 / (bar_track_h - thumb_h) as f32;
                let prev = self.scroll_y;
                self.scroll_y = (scroll_ratio.clamp(0.0, 1.0) * self.max_scroll_y as f32) as i32;
                if self.scroll_y != prev {
                    self.dirty = true;
                    self.dirty_reason = "render.rs:3369";
                }
                return;
            }

            let click_y = local_y - top_offset + self.scroll_y;
            // コンテンツ領域の左端は描画時に x+20 オフセットしているため合わせる
            let click_x = local_x - 20;

            let mut clicked_href = None;
            let mut new_focus = None;
            let mut script_to_run = None;
            let mut form_to_submit = None;
            let mut focused_input = false; // input/textarea をクリックした場合は button を無視
                                           // addEventListener('click') 発火用: ヒットした要素の id を収集（id を持つもの）。
            let mut clicked_ids: Vec<String> = Vec::new();
            // checkbox/radio/select のトグル動作: (id, input_kind, radio_group, input_value, options)
            let mut toggle_action: Option<(String, u8, String, String, Vec<(String, String)>)> =
                None;
            let mut reset_target_id: Option<String> = None;
            // <input type="range"> のクリック位置ジャンプ動作: (id, 新しい値の文字列)。
            // ドラッグには対応せず、クリック位置に応じて値を1回だけ設定する簡略実装。
            let mut range_action: Option<(String, String)> = None;

            for el in &self.elements {
                let hit_y = click_y >= el.y_offset && click_y < el.y_offset + el.height;
                // x_offset が未設定（0）の要素は行全体ヒット可とし、設定済みなら正確な矩形判定
                let hit_x = if el.x_offset > 0 || el.width < 1000 {
                    click_x >= el.x_offset && click_x < el.x_offset + el.width
                } else {
                    click_x >= 0
                };

                if hit_y && hit_x {
                    if !el.element_id.is_empty() {
                        clicked_ids.push(el.element_id.clone());
                    }
                    // <label> テキストのクリック: 関連付けられた input へ動作を転送する。
                    if !el.label_for.is_empty() {
                        let target_id = el.label_for.clone();
                        if let Some(t) = self.elements.iter().find(|e| e.element_id == target_id) {
                            if t.input_kind == 1 || t.input_kind == 2 || t.input_kind == 3 {
                                toggle_action = Some((
                                    t.element_id.clone(),
                                    t.input_kind,
                                    t.radio_group.clone(),
                                    t.input_value.clone(),
                                    t.select_options.clone(),
                                ));
                            } else if t.is_input || t.is_textarea {
                                new_focus = Some(t.element_id.clone());
                                focused_input = true;
                            }
                            break;
                        }
                    }
                    if el.input_kind == 1 || el.input_kind == 2 || el.input_kind == 3 {
                        // checkbox/radio/select: トグル動作をループ後に適用（self の二重借用回避）。
                        toggle_action = Some((
                            el.element_id.clone(),
                            el.input_kind,
                            el.radio_group.clone(),
                            el.input_value.clone(),
                            el.select_options.clone(),
                        ));
                        break;
                    } else if el.input_kind == 5 && !el.element_id.is_empty() {
                        // range: クリック x 位置から min/max/step（select_options 流用）に
                        // 基づいて新しい値を計算する。
                        let get = |k: &str, d: f32| -> f32 {
                            el.select_options
                                .iter()
                                .find(|(n, _)| n == k)
                                .and_then(|(_, v)| v.parse::<f32>().ok())
                                .unwrap_or(d)
                        };
                        let min = get("min", 0.0);
                        let max = get("max", 100.0);
                        let step = get("step", 1.0).max(0.0001);
                        let ratio = ((click_x - el.x_offset) as f32 / (el.width.max(1) as f32))
                            .clamp(0.0, 1.0);
                        let raw = min + (max - min) * ratio;
                        let stepped = (libm::roundf((raw - min) / step) * step + min).clamp(min, max);
                        range_action = Some((el.element_id.clone(), alloc::format!("{}", stepped)));
                        break;
                    } else if el.is_input || el.is_textarea {
                        new_focus = Some(el.element_id.clone());
                        focused_input = true;
                        break; // input にフォーカスしたら他の要素（button等）は無視
                    } else if el.is_video {
                        self.video_playing = !self.video_playing;
                        if self.video_playing {
                            let v_width = (self.win_w as i32 - 80).clamp(400, 800);
                            let mut state = VIDEO_STATE.lock();
                            *state = Some(VideoPlayState {
                                src_url: el.video_src.clone(),
                                x: el.x_offset.max(0) as u32,
                                y: el.y_offset.max(0) as u32,
                                width: v_width as u32,
                                height: el.height as u32,
                                playing: true,
                                stop_request: false,
                            });
                            // 【2026-08-05 バグ修正】`spawn` はヒープ不足で **0 を返す**。
                            // 直前に `playing: true` を立てているので、失敗したまま
                            // 戻さないと「再生スレッドは居ないのに再生中」になり、
                            // 停止も再開もできなくなる。
                            let pid = crate::kernel::scheduler::spawn(
                                video_playback_thread,
                                crate::kernel::scheduler::Priority::High,
                                "video_playback",
                            );
                            if pid == 0 {
                                crate::warn!("[VIDEO] 再生スレッドを起動できません（ヒープ不足）");
                                stop_video_playback();
                            }
                        } else {
                            stop_video_playback();
                        }
                        self.dirty = true;
                        self.dirty_reason = "render.rs:3480";
                        return;
                    } else if el.is_button && !focused_input {
                        script_to_run = Some(el.onclick.clone());
                        if el.is_reset {
                            // type=reset: 送信せず、所属 form を初期値へ戻す。
                            reset_target_id = Some(el.element_id.clone());
                            break;
                        }
                        // フォームアクションが明示されている場合のみ送信
                        if !el.form_action.is_empty() {
                            let method = if el.form_method.is_empty() {
                                String::from("GET")
                            } else {
                                el.form_method.clone()
                            };
                            form_to_submit = Some((el.form_action.clone(), method));
                        } else {
                            // form_action 未指定でも submit type なら現在パスへ送信
                            let method = if el.form_method.is_empty() {
                                String::from("GET")
                            } else {
                                el.form_method.clone()
                            };
                            form_to_submit = Some((self.current_path.clone(), method));
                        }
                        break;
                    }
                }
            }

            // --- details / summary の開閉トグル ---
            let mut details_toggle_id = None;
            for id in &clicked_ids {
                let node = self.js_runtime.dom.borrow().get_element_by_id(id);
                if let Some(idx) = node {
                    let dom = self.js_runtime.dom.borrow();
                    let n = &dom.nodes[idx];
                    if n.tag == "summary" {
                        if let Some(parent_idx) = n.parent {
                            let parent = &dom.nodes[parent_idx];
                            if parent.tag == "details" {
                                let p_id = if parent.id.is_empty() {
                                    alloc::format!("_node_idx_{}", parent_idx)
                                } else {
                                    parent.id.clone()
                                };
                                details_toggle_id = Some(p_id);
                                break;
                            }
                        }
                    }
                }
            }

            if let Some(pid) = details_toggle_id {
                let node = self.js_runtime.dom.borrow().get_element_by_id(&pid);
                if let Some(i) = node {
                    let mut closed_group_siblings = alloc::vec::Vec::new();
                    {
                        let mut dom = self.js_runtime.dom.borrow_mut();
                        if dom.has_attr(i, "open") {
                            dom.remove_attr(i, "open");
                        } else {
                            dom.set_attr(i, "open", "");
                            // `<details name="...">`排他グループ（丸ごと未対応
                            // だった。2026-07-18 発見・実装）。自身を開いたら
                            // 同じグループの他の`<details>`を閉じる。
                            closed_group_siblings = dom.close_details_group_siblings(i);
                        }
                    }
                    for &sibling in &closed_group_siblings {
                        self.js_runtime.dispatch_event_with(
                            sibling,
                            "toggle",
                            &[
                                (alloc::string::String::from("oldState"), crate::os_lib::js::value::Value::str("open")),
                                (alloc::string::String::from("newState"), crate::os_lib::js::value::Value::str("closed")),
                            ],
                        );
                    }
                    self.dirty = true;
                    self.dirty_reason = "render.rs:3561";
                    // `<details>.addEventListener('toggle', ...)`（丸ごと
                    // 未対応だった。開閉状態の切り替え自体は上で属性の
                    // 付け外しとして実装済みだったが、対になるイベント
                    // 発火が無く、JS側から開閉タイミングを検知する定番
                    // パターンが使えなかった。仕様どおり状態変更「後」に
                    // 発火する。2026-07-17 発見・実装）。仕様上の
                    // `ToggleEvent`（`oldState`/`newState`）専用コンストラクタ
                    // は無いため、プレーンな`Event`へ同名プロパティを追加する
                    // 簡略実装で代用する。
                    let new_state = if self.js_runtime.dom.borrow().has_attr(i, "open") {
                        "open"
                    } else {
                        "closed"
                    };
                    let old_state = if new_state == "open" { "closed" } else { "open" };
                    self.js_runtime.dispatch_event_with(
                        i,
                        "toggle",
                        &[
                            (alloc::string::String::from("oldState"), crate::os_lib::js::value::Value::str(old_state)),
                            (alloc::string::String::from("newState"), crate::os_lib::js::value::Value::str(new_state)),
                        ],
                    );
                }
                if self.js_runtime.dom.borrow().dirty {
                    self.dom_needs_rebuild = true;
                }
                return;
            }

            // --- `popovertarget`/`popovertargetaction`（Popover API の宣言的
            // トリガー。丸ごと未対応だった）。`<button popovertarget="id">` の
            // クリックで対象要素の内部専用マーカー属性 `_popover_open` を
            // `popovertargetaction`（"show"/"hide"/既定"toggle"）に応じて
            // 付け外しする。JS 側の `showPopover()`/`hidePopover()`/
            // `togglePopover()`（builtins.rs）と全く同じ状態表現を共有する。
            let mut popover_toggle: Option<(usize, &'static str)> = None;
            for id in &clicked_ids {
                let node = self.js_runtime.dom.borrow().get_element_by_id(id);
                if let Some(idx) = node {
                    let dom = self.js_runtime.dom.borrow();
                    if let Some(target_id) = dom.get_attr(idx, "popovertarget") {
                        if let Some(target_idx) = dom.get_element_by_id(&target_id) {
                            let action = match dom.get_attr(idx, "popovertargetaction").as_deref() {
                                Some("show") => "show",
                                Some("hide") => "hide",
                                _ => "toggle",
                            };
                            popover_toggle = Some((target_idx, action));
                            break;
                        }
                    }
                }
            }
            if let Some((idx, action)) = popover_toggle {
                {
                    let mut dom = self.js_runtime.dom.borrow_mut();
                    let is_open = dom.has_attr(idx, "_popover_open");
                    let open = match action {
                        "show" => true,
                        "hide" => false,
                        _ => !is_open,
                    };
                    if open {
                        dom.set_attr(idx, "_popover_open", "");
                    } else {
                        dom.remove_attr(idx, "_popover_open");
                    }
                }
                self.dirty = true;
                self.dirty_reason = "render.rs:3631";
                if self.js_runtime.dom.borrow().dirty {
                    self.dom_needs_rebuild = true;
                }
                return;
            }

            // --- checkbox / radio / select のトグル適用 + change イベント発火 ---
            if let Some((tid, kind, group, value, options)) = toggle_action {
                if !tid.is_empty() {
                    if kind == 1 {
                        // checkbox: チェック状態を反転（空 <-> value）。
                        let cur = self.form_values.get(&tid).cloned().unwrap_or_default();
                        let next = if cur.is_empty() { value } else { String::new() };
                        self.form_values.insert(tid.clone(), next);
                    } else if kind == 2 {
                        // radio: 同一グループ内の他要素を空にし、自身を value にする。
                        if !group.is_empty() {
                            let group_ids: Vec<String> = self
                                .elements
                                .iter()
                                .filter(|e| {
                                    e.input_kind == 2
                                        && e.radio_group == group
                                        && !e.element_id.is_empty()
                                })
                                .map(|e| e.element_id.clone())
                                .collect();
                            for gid in group_ids {
                                self.form_values.insert(gid, String::new());
                            }
                        }
                        self.form_values.insert(tid.clone(), value);
                    } else if kind == 3 {
                        // select: 現在値の次の option へ循環（簡易ドロップダウン代替）。
                        if !options.is_empty() {
                            let cur = self.form_values.get(&tid).cloned().unwrap_or_default();
                            let cur_idx = options.iter().position(|(v, _)| *v == cur).unwrap_or(0);
                            let next_idx = (cur_idx + 1) % options.len();
                            self.form_values
                                .insert(tid.clone(), options[next_idx].0.clone());
                        }
                    }
                    // change イベントを発火（DOM 値も同期）。
                    let new_val = self.form_values.get(&tid).cloned().unwrap_or_default();
                    let node = self.js_runtime.dom.borrow().get_element_by_id(&tid);
                    if let Some(i) = node {
                        // checkbox/radio の checked、select の value を DOM 属性へ反映。
                        {
                            let mut dom = self.js_runtime.dom.borrow_mut();
                            if kind == 1 || kind == 2 {
                                if new_val.is_empty() {
                                    dom.remove_attr(i, "checked");
                                } else {
                                    dom.set_attr(i, "checked", "");
                                }
                            } else {
                                dom.set_attr(i, "value", &new_val);
                            }
                        }
                        self.js_runtime.dispatch_event(i, "change");
                    }
                    self.dirty = true;
                    self.dirty_reason = "render.rs:3693";
                }
                if self.js_runtime.dom.borrow().dirty {
                    self.dom_needs_rebuild = true;
                }
                return;
            }

            if let Some((tid, new_val)) = range_action {
                self.form_values.insert(tid.clone(), new_val.clone());
                let node = self.js_runtime.dom.borrow().get_element_by_id(&tid);
                if let Some(i) = node {
                    {
                        let mut dom = self.js_runtime.dom.borrow_mut();
                        dom.set_attr(i, "value", &new_val);
                    }
                    self.js_runtime.dispatch_event(i, "input");
                    self.js_runtime.dispatch_event(i, "change");
                }
                self.dirty = true;
                self.dirty_reason = "render.rs:3712";
                if self.js_runtime.dom.borrow().dirty {
                    self.dom_needs_rebuild = true;
                }
                return;
            }

            // フォーカス変更処理
            let old_focus = self.focused_id.clone();
            self.focused_id = new_focus;
            // `document.activeElement`（HTML5。丸ごと未対応だった）が実際の
            // クリック起点フォーカス変更も反映できるよう、JS 側の
            // `DomBridge::focused_idx` にも同期する。
            {
                let didx = match &self.focused_id {
                    Some(fid) => self.js_runtime.dom.borrow().get_element_by_id(fid),
                    None => None,
                };
                self.js_runtime.dom.borrow_mut().focused_idx = didx;
            }

            if old_focus != self.focused_id {
                // `:focus-within` は要素自身の specified_values へ直接反映される
                // （:hover/:focus のような「事前計算した2値を描画時に選ぶ」方式ではなく、
                // style_tree 実行時に一度だけ判定される）ため、フォーカス変更のたびに
                // 再スタイル/再レイアウトを要求する（`:target` の navigate_to_fragment と
                // 同じ理由・同じ方式）。
                self.dom_needs_rebuild = true;
                // 古いフォーカス要素のテキストを保存
                if let Some(ref fid) = old_focus {
                    if let Some(ref tb) = self.active_text_box {
                        self.form_values.insert(fid.clone(), tb.text.clone());
                    }
                }
                // 旧要素: blur を発火し、値が変わっていれば change も発火。
                if let Some(fid) = old_focus.clone() {
                    let node = self.js_runtime.dom.borrow().get_element_by_id(&fid);
                    if let Some(i) = node {
                        let cur = self.form_values.get(&fid).cloned().unwrap_or_default();
                        self.js_runtime.dispatch_event(i, "blur");
                        // focusout: blur のバブリング版（順序は blur の直後）。
                        self.js_runtime.dispatch_event(i, "focusout");
                        if cur != self.focus_value {
                            self.js_runtime.dispatch_event(i, "change");
                        }
                    }
                }
                // 新しいフォーカス要素のテキストをロード。
                // 【2026-09-08 修正】ここは常に `with_text()`（単一行）で作っていたため、
                // <textarea> をクリックして入り直すと multiline フラグが落ち、
                // Tab のタブストップ展開が効かなくなっていた。要素種別を見て作る。
                self.active_text_box = None;
                if let Some(fid) = self.focused_id.clone() {
                    let is_ta = self
                        .elements
                        .iter()
                        .find(|e| e.element_id == fid)
                        .map(|e| e.is_textarea)
                        .unwrap_or(false);
                    let val = self.form_values.get(&fid).cloned().unwrap_or_default();
                    // フォーカス移動なのでキャレットは復元せず末尾から始める。
                    let tb = Self::build_text_box(&val, is_ta, None);
                    self.focus_cursor_pos = tb.cursor_pos;
                    self.focus_caret_owner = fid;
                    self.active_text_box = Some(tb);
                }
                // 新要素: focus を発火し、change 判定用に現在値を記録。
                if let Some(fid) = self.focused_id.clone() {
                    self.focus_value = self.form_values.get(&fid).cloned().unwrap_or_default();
                    let node = self.js_runtime.dom.borrow().get_element_by_id(&fid);
                    if let Some(i) = node {
                        self.js_runtime.dispatch_event(i, "focus");
                        // focusin: focus のバブリング版（focus の直後）。
                        self.js_runtime.dispatch_event(i, "focusin");
                    }
                } else {
                    self.focus_value = String::new();
                }
                if self.js_runtime.dom.borrow().dirty {
                    self.dom_needs_rebuild = true;
                }
                self.dirty = true;
                self.dirty_reason = "render.rs:3782";
            }

            // type=reset ボタン: フォームを初期値へ戻す（送信・遷移は行わない）。
            if let Some(rid) = reset_target_id {
                self.reset_form(&rid);
                if let Some(script) = script_to_run {
                    if !script.is_empty() {
                        // 【2026-08-31 バグ修正】onclick/onreset ハンドラの実行エラーを
                        // 握り潰していた。捕捉されなかった例外があってもログが残らず、
                        // 原因調査の手がかりが消える。layout.rs の同種経路（GPU TRACE）
                        // に合わせて記録する。
                        if let Err(e) = crate::os_lib::js::eval(&script, &mut self.js_runtime) {
                            crate::debug!("[JS] onclick/onreset handler error: {}", e);
                        }
                    }
                }
                self.dirty = true;
                self.dirty_reason = "render.rs:3793";
                return;
            }

            // input にフォーカスしたケースでは送信しない
            if !focused_input {
                if let Some((action, method)) = form_to_submit {
                    self.submit_form(&action, &method, top_offset);
                    // フォーム送信したら同一クリックでのリンク遷移は行わない
                    // (送信が後続の navigate_to_href に上書きされる不具合を防ぐ)
                    if let Some(script) = script_to_run {
                        if !script.is_empty() {
                            // 【2026-08-31 バグ修正】onclick/onreset ハンドラの実行エラーを
                            // 握り潰していた。捕捉されなかった例外があってもログが残らず、
                            // 原因調査の手がかりが消える。layout.rs の同種経路（GPU TRACE）
                            // に合わせて記録する。
                            if let Err(e) = crate::os_lib::js::eval(&script, &mut self.js_runtime) {
                                crate::debug!("[JS] onclick/onreset handler error: {}", e);
                            }
                        }
                    }
                    return;
                }
            }

            // リンク判定（click_x ではなく local_x で保存されている）
            for link in &self.links {
                if click_y >= link.y0
                    && click_y < link.y1
                    && local_x >= link.x0
                    && local_x < link.x1
                {
                    clicked_href = Some(link.href.clone());
                    break;
                }
            }
            if let Some(href) = clicked_href {
                self.navigate_to_href(&href, top_offset);
            }

            if let Some(script) = script_to_run {
                if !script.is_empty() {
                    // 【2026-08-31 バグ修正】onclick/onreset ハンドラの実行エラーを
                    // 握り潰していた。捕捉されなかった例外があってもログが残らず、
                    // 原因調査の手がかりが消える。layout.rs の同種経路（GPU TRACE）
                    // に合わせて記録する。
                    if let Err(e) = crate::os_lib::js::eval(&script, &mut self.js_runtime) {
                        crate::debug!("[JS] onclick/onreset handler error: {}", e);
                    }
                }
            }

            // addEventListener('click') の発火: ヒットした要素 id を順に試し、
            // リスナを持つ最初の要素で発火する（id ベース）。
            for id in &clicked_ids {
                let node = self.js_runtime.dom.borrow().get_element_by_id(id);
                if let Some(idx) = node {
                    if self
                        .js_runtime
                        .dispatch_mouse(idx, "click", local_x, local_y)
                        .0
                    {
                        break;
                    }
                }
            }

            // JS の form.reset() による要求を処理（DOM を初期値へ戻す）。
            self.process_pending_reset();

            // onclick / リスナによる DOM 変更を画面へ反映。
            self.relayout_if_dom_dirty(top_offset, self.win_w, self.win_h);

            // JS の history.back/forward/go() による戻る/進む要求を処理（popstate 発火含む）。
            self.process_pending_nav(top_offset);
            // location 代入 / assign / replace / reload によるナビゲーション要求を処理。
            self.process_pending_location(top_offset);
        } else {
            self.dragging_scrollbar = false;
            self.dragging_sub_scrollbar = None;
        }
    }

    pub fn on_key(&mut self, keycode: u8, _pressed: bool, ascii: Option<char>) {
        if !_pressed {
            return;
        }

        // フォーカス要素に keydown を発火（バブリング）。preventDefault されたら既定の編集を抑制。
        if let Some(fid) = self.focused_id.clone() {
            let node = self.js_runtime.dom.borrow().get_element_by_id(&fid);
            if let Some(idx) = node {
                let key_name = match ascii {
                    Some(c) => {
                        let mut s = String::new();
                        s.push(c);
                        s
                    }
                    None => String::from(key_name_for(keycode)),
                };
                let (_fired, prevented) = self.js_runtime.dispatch_key(idx, "keydown", &key_name);
                self.relayout_if_dom_dirty(self.top_offset, self.win_w, self.win_h);
                // keydown リスナが history.back/forward/go() を呼んだ場合の戻る/進むを処理。
                if self.process_pending_nav(self.top_offset) {
                    return;
                }
                self.process_pending_reset();
                // keydown リスナが location 代入等で遷移要求を出した場合を処理。
                if self.process_pending_location(self.top_offset) {
                    return;
                }
                if prevented {
                    return; // 既定動作（文字入力・送信）を抑制
                }
                // keypress: 文字を生成するキー（ascii あり）のみ、keydown の直後に発火。
                // 修飾のみのキーや矢印キーでは発火しない（仕様準拠の簡易版）。
                if ascii.is_some() {
                    let (_f, kp_prevented) =
                        self.js_runtime.dispatch_key(idx, "keypress", &key_name);
                    self.relayout_if_dom_dirty(self.top_offset, self.win_w, self.win_h);
                    if kp_prevented {
                        return;
                    }
                }
            }
        }

        let mut focus_on_textarea = false;
        let mut textarea_el = None;
        if let Some(ref focused_id) = self.focused_id {
            if let Some(el) = self.elements.iter().find(|e| &e.element_id == focused_id) {
                if el.is_textarea {
                    focus_on_textarea = true;
                    textarea_el = Some(el.clone());
                }
            }
        }

        // フォーカス中の input(テキスト) で Enter → フォーム送信。
        // textarea は改行入力のため対象外。送信先はページ内の送信ボタン
        // (form_action を持つ is_button) から解決する。
        if keycode == 0x1C && !focus_on_textarea && self.focused_id.is_some() {
            self.flush_focused_input();
            let submit = self
                .elements
                .iter()
                .find(|e| e.is_button && !e.form_action.is_empty())
                .map(|e| {
                    let m = if e.form_method.is_empty() {
                        String::from("GET")
                    } else {
                        e.form_method.clone()
                    };
                    (e.form_action.clone(), m)
                });
            if let Some((action, method)) = submit {
                let top = self.top_offset;
                self.submit_form(&action, &method, top);
                return;
            }
        }

        // 共通テキストボックスでの編集処理
        if let Some(ref focused_id) = self.focused_id {
            if self.active_text_box.is_none() {
                let val = self
                    .form_values
                    .get(focused_id)
                    .cloned()
                    .unwrap_or_default();
                let is_ta = self
                    .elements
                    .iter()
                    .find(|e| &e.element_id == focused_id)
                    .map(|e| e.is_textarea)
                    .unwrap_or(false);
                let restore = if &self.focus_caret_owner == focused_id {
                    Some(self.focus_cursor_pos)
                } else {
                    None
                };
                self.active_text_box = Some(Self::build_text_box(&val, is_ta, restore));
            }
            let mut handled = false;
            let mut text_changed = false;
            let mut cursor_pos = 0;
            let mut new_text = String::new();
            if let Some(ref mut tb) = self.active_text_box {
                let outcome = tb.handle_key_outcome(keycode, ascii);
                if outcome != crate::kernel::text_box::KeyOutcome::Ignored {
                    self.form_values.insert(focused_id.clone(), tb.text.clone());
                    self.dirty = true;
                    self.dirty_reason = "render.rs:3969";
                    handled = true;
                    text_changed =
                        outcome == crate::kernel::text_box::KeyOutcome::TextChanged;
                    cursor_pos = tb.cursor_pos;
                    new_text = tb.text.clone();
                }
            }
            if handled {
                // キャレット位置を退避しておく。次の relayout で TextBox が
                // 捨てられても、作り直すときにここから復元する。
                self.focus_cursor_pos = cursor_pos;
                self.focus_caret_owner = focused_id.clone();
                // DOM の value 属性へ反映し（JS の el.value 用）、input イベントを発火。
                // relayout は &mut self で focused_id 借用と競合するため、フラグで次描画に委ねる。
                // 矢印キー等の**カーソル移動だけ**では value は変わっていない。
                // それでも set_attr + input を撃つと DOM が dirty になり、
                // 再レイアウトで編集状態が壊れる（note の ↑ が効かない不具合）。
                if text_changed {
                    let didx = self.js_runtime.dom.borrow().get_element_by_id(focused_id);
                    if let Some(i) = didx {
                        self.js_runtime
                            .dom
                            .borrow_mut()
                            .set_attr(i, "value", &new_text);
                        self.js_runtime.dispatch_event(i, "input");
                        if self.js_runtime.dom.borrow().dirty {
                            self.dom_needs_rebuild = true;
                        }
                        self.dirty = true;
                        self.dirty_reason = "render.rs:3988";
                    }
                }
                if focus_on_textarea {
                    if let Some(ref el) = textarea_el {
                        let text_val = self
                            .form_values
                            .get(focused_id)
                            .cloned()
                            .unwrap_or(String::new());
                        let cursor_line = self.get_cursor_line_idx(&text_val, cursor_pos, el.width);

                        let visible_lines = ((el.height - 16) / 20).max(1);
                        let scroll_y = self.editor_scroll_y;

                        if (cursor_line as i32) < scroll_y {
                            self.editor_scroll_y = cursor_line as i32;
                        } else if (cursor_line as i32) >= scroll_y + visible_lines {
                            self.editor_scroll_y = cursor_line as i32 - visible_lines + 1;
                        }

                        // スクロール上限の再計算
                        let lines_len =
                            Self::wrap_editor_lines(&text_val, el.width, self.editor_wrap).len();
                        let max_scroll_y = (lines_len as i32 - visible_lines + 1).max(0);
                        self.editor_scroll_y = self.editor_scroll_y.min(max_scroll_y).max(0);
                    }
                }
                return;
            }
        }

        if keycode == 0x48 {
            // Up
            self.scroll_with_top(-24, self.top_offset);
        } else if keycode == 0x50 {
            // Down
            self.scroll_with_top(24, self.top_offset);
        }
    }

    /// 離鍵（keyup）をフォーカス要素へ発火する。押下系の既定動作（文字入力・スクロール等）は
    /// 行わず、JS リスナへの通知のみを担う。keyup リスナが history.back 等を呼んだ場合も処理する。
    pub fn on_key_up(&mut self, keycode: u8, ascii: Option<char>) {
        if let Some(fid) = self.focused_id.clone() {
            let node = self.js_runtime.dom.borrow().get_element_by_id(&fid);
            if let Some(idx) = node {
                let key_name = match ascii {
                    Some(c) => {
                        let mut s = String::new();
                        s.push(c);
                        s
                    }
                    None => String::from(key_name_for(keycode)),
                };
                let _ = self.js_runtime.dispatch_key(idx, "keyup", &key_name);
                self.relayout_if_dom_dirty(self.top_offset, self.win_w, self.win_h);
                self.process_pending_reset();
                self.process_pending_nav(self.top_offset);
                self.process_pending_location(self.top_offset);
            }
        }
    }
}