atmos/os_lib/web_engine/

layout.rs

// web_engine/layout.rs - parse_and_layout and flatten_layout impl blocks
#![allow(dead_code, unused_variables, unused_imports)]

use crate::kernel::draw;
use crate::kernel::vector_font;
use alloc::string::String;
use alloc::vec::Vec;

use super::draw_helpers::{extract_border_color, extract_border_style};
use super::helpers::{
    ascii_eq_ignore_case, extract_all_url_paths, extract_list_style, extract_list_style_image,
    extract_list_style_inside, extract_url_path,
    get_base_path,
    parse_bg_position, parse_bg_repeat, parse_bg_size, parse_font_size, parse_object_fit,
    parse_object_position, parse_outline, parse_px_val, parse_text_decoration_shorthand,
    parse_transform, parse_transform_origin, resolve_dom_paths, resolve_relative_path,
};
use super::{HyperlinkArea, RenderElement, MAX_HTML_BYTES, MAX_RENDER_ELEMENTS};
use crate::os_lib::css::parse_color;

/// `line-height`（丸ごと未対応だった単位あり。以前は `px`（絶対値）と裸数値
/// （`font-size`への倍率。仕様どおり子要素へも同じ倍率が継承される）の2種
/// のみ対応で、`%`（`line-height:150%`）/`em`（`line-height:1.5em`）は
/// `t.parse::<f32>()`が単位付き文字列を数値としてパースできず静かに失敗し、
/// `(font_size + 4)`という汎用フォールバック値へ落ちていた（エラーになら
/// ず一見動いているように見えるため気づきにくいバグだった）。`%`/`em`は
/// どちらも意味上「font-sizeへの倍率」で裸数値と等価のため、同じ倍率計算
/// 式へ合流させる。2026-07-17 発見・実装（自己テストのため`parse_and_
/// layout`内のネスト関数からモジュールトップレベルへ移動。ロジック不変）。
pub(crate) fn parse_line_height(s: &str, font_size: u32) -> i32 {
    let t = s.trim();
    if let Some(num) = t.strip_suffix("px") {
        if let Ok(px) = num.trim().parse::<f32>() {
            return px as i32;
        }
    }
    if let Some(num) = t.strip_suffix('%') {
        if let Ok(pct) = num.trim().parse::<f32>() {
            return (font_size as f32 * pct / 100.0) as i32;
        }
    }
    if let Some(num) = t.strip_suffix("em") {
        if let Ok(ratio) = num.trim().parse::<f32>() {
            return (font_size as f32 * ratio) as i32;
        }
    }
    if let Ok(ratio) = t.parse::<f32>() {
        return (font_size as f32 * ratio) as i32;
    }
    (font_size + 4) as i32
}

/// `text-indent`（丸ごと未対応だった単位あり。以前は`px`と裸数値〔`px`
/// 扱い〕のみ対応で、`%`（包含ブロック幅基準）/`em`（font-size基準）は
/// `t.parse::<f32>()`が単位付き文字列を数値としてパースできず静かに
/// 失敗し、インデント無し（0）へフォールバックしていた。古典的な段落
/// インデントの定番`text-indent:2em`や、レスポンシブな`text-indent:5%`
/// が効かなくなっていた（エラーにならず一見正常に描画されるため気づき
/// にくいバグだった）。2026-07-17 発見・実装（自己テストのためモジュール
/// トップレベル関数として新設。呼び出し元は1箇所のみ）。
pub(crate) fn resolve_text_indent(s: &str, container_width: i32, font_size: u32) -> i32 {
    let t = s.trim();
    let px = if let Some(num) = t.strip_suffix("px") {
        num.trim().parse::<f32>().ok()
    } else if let Some(num) = t.strip_suffix('%') {
        num.trim()
            .parse::<f32>()
            .ok()
            .map(|v| v / 100.0 * container_width as f32)
    } else if let Some(num) = t.strip_suffix("em") {
        num.trim().parse::<f32>().ok().map(|v| v * font_size as f32)
    } else {
        t.parse::<f32>().ok()
    };
    px.map(|f| f as i32).unwrap_or(0)
}

/// `box-shadow`/`text-shadow`のオフセット/ぼかし長さトークンを解決する
/// （丸ごと未対応だった単位あり。以前は`px`のみ対応で、`rem`（`box-shadow:
/// 0.5rem 0.5rem 1rem red`のような相対単位指定）は`token.strip_suffix
/// ("px")`に一致せず数値パースにも失敗するため、呼び出し元の位置カウンタ
/// `px_count`が進まないまま静かに無視されていた——エラーにはならず`color`
/// だけ正しく拾われるため、「オフセット0・ぼかし0の見えない影」という
/// 気づきにくい壊れ方をしていた。`em`は要素自身の算出フォントサイズが
/// この関数の引数だけでは解決できないため対象外のまま（`resolve_
/// translate_len`と同じ判断）。2026-07-17 発見・実装（自己テストのため
/// モジュールトップレベル関数として新設。呼び出し元は`box-shadow`/
/// `text-shadow`の2箇所）。
pub(crate) fn parse_shadow_len_tok(token: &str) -> Option<i32> {
    if let Some(n) = token.strip_suffix("px") {
        return n.parse::<f32>().ok().map(|v| v as i32);
    }
    if let Some(n) = token.strip_suffix("rem") {
        return n.parse::<f32>().ok().map(|v| (v * 16.0) as i32);
    }
    None
}

/// `aspect-ratio`（CSS Box Sizing Level 4。`16 / 9`, `4/3`, `1`, `auto 16/9` 等）を解釈する。
pub(crate) fn parse_aspect_ratio(val: &str) -> Option<f32> {
    let s = val.trim().to_lowercase();
    if s.is_empty() || s == "auto" || s == "none" {
        return None;
    }
    let s_ref = if s.starts_with("auto ") {
        s.trim_start_matches("auto ").trim()
    } else {
        s.as_str()
    };
    if let Some((num_str, den_str)) = s_ref.split_once('/') {
        let num: f32 = num_str.trim().parse().ok()?;
        let den: f32 = den_str.trim().parse().ok()?;
        if den != 0.0 {
            return Some(num / den);
        }
    } else if let Ok(v) = s_ref.parse::<f32>() {
        if v > 0.0 {
            return Some(v);
        }
    }
    None
}

/// `border-radius`の1角分の半径値を解決する（丸ごと未対応だった単位あり。
/// 以前は`px`/`%`のみ対応で、`rem`（`border-radius:1rem`のような相対単位
/// 指定）は単位付き文字列のパース失敗で静かに`0`〔角丸無し〕へフォール
/// バックしていた。`box-shadow`/`text-shadow`の`parse_shadow_len_tok`と
/// 同型のバグ。`em`は要素自身の算出フォントサイズがこの関数の引数だけ
/// では解決できないため対象外のまま（`resolve_translate_len`と同じ判断）。
/// 2026-07-17 発見・実装（自己テストのためクロージャからモジュール
/// トップレベル関数へ変更。呼び出し元は1箇所のみ）。
pub(crate) fn resolve_border_radius(s: &str, container_w: i32) -> i32 {
    let s = s.trim();
    if let Some(num) = s.strip_suffix("px") {
        return num.trim().parse::<f32>().map(|v| v as i32).unwrap_or(0);
    }
    if let Some(num) = s.strip_suffix('%') {
        return num
            .trim()
            .parse::<f32>()
            .map(|pct| (pct / 100.0 * container_w as f32) as i32)
            .unwrap_or(0);
    }
    if let Some(num) = s.strip_suffix("rem") {
        return num.trim().parse::<f32>().map(|v| (v * 16.0) as i32).unwrap_or(0);
    }
    s.parse::<f32>().map(|v| v as i32).unwrap_or(0)
}

/// DOM ツリーを走査して全 `<style>` 要素の textContent を連結して返す。
/// 元の HTML 文字列ではなく実際のツリーを見ることで、`document.createElement('style')` 等で
/// 動的に追加された `<style>` 要素のスタイルも取得できる。
fn collect_style_blocks_from_dom(node: &crate::os_lib::dom::Node) -> String {
    let mut out = String::new();
    fn walk(node: &crate::os_lib::dom::Node, out: &mut String) {
        if let crate::os_lib::dom::NodeType::Element { tag_name, .. } = &node.node_type {
            if tag_name == "style" {
                for child in &node.children {
                    if let crate::os_lib::dom::NodeType::Text(t) = &child.node_type {
                        out.push_str(t);
                        out.push('\n');
                    }
                }
                // <style> は子要素として再帰する必要が無い（中身はテキストのみ）。
                return;
            }
        }
        for child in &node.children {
            walk(child, out);
        }
    }
    walk(node, &mut out);
    out
}

/// DOM ツリーを走査して外部 `<link rel="stylesheet" href="...">` の href を集める。
/// href は resolve_dom_paths 済み（絶対パス or 完全URL）。以前はインライン `<style>`
/// しか集めておらず、外部 CSS ファイルを一切取得・適用していなかったため、CSS を
/// 全て外部ファイルに置くサイト（一般的な構成）ではスタイルが丸ごと無視され、
/// 素の HTML 同然の表示になっていた。`rel` に `stylesheet` を含むもの、または
/// `rel` 未指定で href が `.css` で終わるものを対象とする（`preload`/`icon` 等は除外）。
fn collect_external_css_urls(node: &crate::os_lib::dom::Node) -> alloc::vec::Vec<String> {
    let mut out = alloc::vec::Vec::new();
    fn walk(node: &crate::os_lib::dom::Node, out: &mut alloc::vec::Vec<String>) {
        if let crate::os_lib::dom::NodeType::Element {
            tag_name,
            attributes,
            ..
        } = &node.node_type
        {
            if tag_name == "link" {
                let rel = attributes
                    .get("rel")
                    .map(|s| s.to_lowercase())
                    .unwrap_or_default();
                let href = attributes.get("href").cloned().unwrap_or_default();
                let is_css = rel.contains("stylesheet")
                    || (rel.is_empty() && href.to_lowercase().ends_with(".css"));
                if is_css && !href.is_empty() {
                    out.push(href);
                }
            }
        }
        for child in &node.children {
            walk(child, out);
        }
    }
    walk(node, &mut out);
    out
}

/// DOM ツリーを走査して全 `<script>` 要素を集める。`src` 属性があれば
/// (Some(resolved_src), "") を、無ければインライン本文 (None, text) を返す。
/// 以前は生 HTML 文字列を正規表現的にスキャンするだけで、`<script src="...">` の
/// 外部スクリプトは本文が空のため完全に無視されていた（fetch すら行われない）。
fn collect_scripts_from_dom(node: &crate::os_lib::dom::Node) -> alloc::vec::Vec<(Option<String>, String)> {
    let mut out = alloc::vec::Vec::new();
    fn walk(
        node: &crate::os_lib::dom::Node,
        out: &mut alloc::vec::Vec<(Option<String>, String)>,
    ) {
        if let crate::os_lib::dom::NodeType::Element {
            tag_name,
            attributes,
            ..
        } = &node.node_type
        {
            if tag_name == "script" {
                if let Some(src) = attributes.get("src") {
                    if !src.is_empty() {
                        out.push((Some(src.clone()), String::new()));
                        return;
                    }
                }
                let mut text = String::new();
                for child in &node.children {
                    if let crate::os_lib::dom::NodeType::Text(t) = &child.node_type {
                        text.push_str(t);
                    }
                }
                out.push((None, text));
                return;
            }
        }
        for child in &node.children {
            walk(child, out);
        }
    }
    walk(node, &mut out);
    out
}

impl super::WebEngine {
    /// 計算量: **O(H + R×Sel + N×(C×M + K) + N×D)**
    ///
    /// - H: HTML バイト数（パース）
    /// - R×Sel: CSS ルール索引の構築
    /// - N×(C×M + K): `style_tree`（下記参照）
    /// - N×D: `layout_tree`
    ///
    /// 下層の積み上げ（規約は `spec/complexity_annotation.md`）:
    /// `rule_index::active_candidates` O(1+C) → `style_tree` O(R×Sel + N×(C×M+K))
    /// → ここ。
    ///
    /// 実測（sugi-lab.net: N=358, R=2403、計 607 tick ≒ 6 秒）:
    ///
    /// | 段 | tick |
    /// |----|------|
    /// | CSS 取得（キャッシュ命中時） | 23 |
    /// | `style_tree` | 291 |
    /// | `layout_tree` | 60 |
    ///
    /// **`style_tree` の中ではセレクタ照合ではなくノードごとの固定コスト K
    /// （継承マップ等の複製）が支配的**。照合は索引で全体の 2.0% まで落ちている。
    pub fn parse_and_layout(
        &mut self,
        html: &str,
        pre_parsed_dom: Option<crate::os_lib::dom::Node>,
        top_offset: i32,
        win_w: u32,
        win_h: u32,
    ) {
        crate::debug!("[GPU] TRACE: parse_and_layout enter. len={}", html.len());
        {
            let mut head = 200.min(html.len());
            while head > 0 && !html.is_char_boundary(head) {
                head -= 1;
            }
            crate::println!("[CSSDBG] recv HTML len={} head200={:?}", html.len(), html.get(..head).unwrap_or(""));
        }

        // 上限を超える巨大ページは UTF-8 境界で安全に切り捨てる（ヒープ枯渇の予防）。
        let html = if html.len() > MAX_HTML_BYTES {
            let mut cut = MAX_HTML_BYTES;
            while cut > 0 && !html.is_char_boundary(cut) {
                cut -= 1;
            }
            crate::info!("[GPU] WEB_ENGINE: HTML truncated {} -> {} bytes", html.len(), cut);
            html.get(..cut).unwrap_or(html)
        } else {
            html
        };

        crate::debug!("[GPU] TRACE: parse_and_layout allocating self.last_html");
        // 新ページ読込（dom_needs_rebuild）でのみ画像キャッシュを破棄する。
        // JS による textContent/style 変更などのインクリメンタル再レイアウトでは
        // 画像を保持し、毎回の再フェッチ暴走（同じ src の再ダウンロード）を防ぐ。
        let is_new_page = self.dom_needs_rebuild || self.last_html != html;
        // 【2026-08-03】スクロール位置をリセットしてよいのは
        // **文書そのものが変わったとき**だけ。
        //
        // `is_new_page` は `dom_needs_rebuild` でも真になる。しかし
        // `dom_needs_rebuild` は `:target` の再判定やフォント到着など
        // 「同じ文書の作り直し」でも立つ。これでスクロールを 0 に戻すと、
        // `#id` アンカーへスクロールした直後に先頭へ引き戻されてしまう
        // （実測: `[NAV] フラグメントへスクロール #research` は発火するのに
        //  画面は先頭のままだった）。
        let is_document_changed = self.last_html != html;
        self.last_html = String::from(html);
        // 【2026-08-05 修正】キャッシュを捨ててよいのは
        // **文書そのものが変わったとき**だけ。
        //
        // `is_new_page` は `dom_needs_rebuild` でも真になるが、
        // このフラグはフォント／画像の到着による「同じ文書の作り直し」でも立つ。
        // それでキャッシュを消すと、届いた画像が捨てられて無限に取り直しになる
        // （実測: 同じ画像が 2 回デコードされ、`#projects` の画像が
        //  alt テキストのままだった）。
        //
        // 逆にキャッシュを守るために `dom_needs_rebuild` を立てないようにすると、
        // DOM ブリッジが組み直されず**要素の位置が壊れる**
        // （実測: ヒーローのグラデーションが全ページに掛かった）。
        //
        // 正しくは「DOM は組み直す・キャッシュは残す」。両者を分ける。
        if is_document_changed {
            crate::debug!("[GPU] TRACE: parse_and_layout clearing image_cache (new page)");
            self.image_cache = alloc::collections::BTreeMap::new();
            // 共有の置き場も一緒に捨てる（同じ画素を指しているため）。
            super::image::clear_shared_images();
            self.image_attempted = alloc::collections::BTreeSet::new();
            self.scroll_regions = alloc::collections::BTreeMap::new();
            // 【2026-07-24発見・修正】`external_css_cache`はページ遷移開始時
            // （`load_url`/`load_html`）に`None`へリセットされるが、実際の
            // ページ内容が届くまでの待機中に旧ページ（プレースホルダー等）の
            // 内容で毎フレーム`parse_and_layout`が呼ばれ続けるため、実ページの
            // HTMLが届く前に`Some(旧ページのCSS)`で埋まってしまい、実ページの
            // 実際の`<link>`が一度も取得されないまま丸ごとスキップされる重大な
            // バグだった（`is_new_page`（内容変化検知）の度に確実に空へ戻す）。
            self.external_css_cache = None;
        }
        // scroll_containers はページ再レイアウトのたびに再構築する。
        self.scroll_containers = alloc::vec::Vec::new();
        crate::debug!("[GPU] TRACE: parse_and_layout clearing elements");
        self.elements = Vec::new();
        self.links = Vec::new();
        self.page_bg_color = None;
        self.page_text_color = None;
        crate::debug!("[GPU] TRACE: parse_and_layout setting title");
        self.title = String::from("Untitled Page");
        self.focused_id = None;
        self.active_text_box = None;
        self.win_w = win_w;
        self.win_h = win_h;
        self.top_offset = top_offset;

        crate::debug!("[GPU] TRACE: parse_and_layout start");
        // 1. DOM パーサ。
        // DOM ブリッジが既に構築済み（built）かつ JS 変更で dirty な場合、最終的な
        // 描画ツリーはブリッジの to_dom_node() から作る。その場合 parse_html の結果は
        // 破棄されるため、再パース自体を省略して確保コストを削る。
        // ブリッジ未構築 or 新ページ（再構築要求）時のみ HTML を実際にパースする。
        let bridge_is_source = {
            let dom = self.js_runtime.dom.clone();
            let b = dom.borrow();
            b.built && b.dirty && !self.dom_needs_rebuild
        };
        // 【2026-08-05 計測】再レイアウト 1 回が実測 4.6 秒かかる。
        // `style_tree` は 24〜200 tick なので主役ではない。
        // どの段が重いのかを段ごとに測る（推測で手を入れないため）。
        // 目的: 再レイアウトの律速の特定。破棄条件: 特定でき次第削除。
        let t_stage0 = crate::kernel::timer::get_ticks();
        let mut root_node = if bridge_is_source {
            // ブリッジから後で差し替えるので、ここでは空ルートで十分。
            crate::os_lib::dom::Node::empty_root()
        } else if let Some(dom) = pre_parsed_dom {
            dom
        } else {
            crate::os_lib::dom::parse_html(html)
        };
        let t_html_end = crate::kernel::timer::get_ticks();
        crate::debug!(
            "[GPU] TRACE: parse_html done (bridge_source={})",
            bridge_is_source
        );

        // 相対パスの解決（実際に HTML をパースした時のみ意味がある）。
        if !bridge_is_source {
            let base_path = get_base_path(&self.current_path);
            resolve_dom_paths(&mut root_node, &base_path);
        }

        // DOM ブリッジ: 新ページなら再構築。以降は **ブリッジを真実源**として描画ツリーを
        // 生成する（textContent/style/class の変更に加え、createElement/appendChild 等の
        // 動的ノードも反映される）。
        {
            let dom = self.js_runtime.dom.clone();
            let mut b = dom.borrow_mut();
            // 【2026-07-24発見・修正】コメントは「新ページなら再構築」と書いてあった
            // にもかかわらず、実際の条件は`is_new_page`を一切見ていなかった。
            // このため、プレースホルダー（ロード中表示）ページで一度ブリッジが
            // 構築された（`built=true`）後、実ページのHTMLが届いて`root_node`が
            // 正しく最新の内容（例: 365要素）に切り替わっても、`dom_needs_rebuild`
            // が別途明示的に立てられない限りブリッジは古いプレースホルダーの
            // ノード（例: 33ノード）のまま据え置かれていた。結果、`document.body`/
            // `querySelector`等JS側から見えるDOMは常に古いページの内容のままとなり、
            // 実サイトの`js/modern-script.js`が`document.querySelector('.nav-list')`
            // で`null`を受け取り`Cannot read properties of null (reading 'style')`
            // で即座に停止する原因になっていた（レンダリング用ツリーは正しかった
            // ため、この不一致は画面には出ず、JS実行時エラーとしてのみ表れていた）。
            // `external_css_cache`（同セッションで既に発見・修正済み）と全く同じ
            // 「プレースホルダー状態のキャッシュが実ページ到着後も無効化されない」
            // というバグクラスの再発。
            if self.dom_needs_rebuild || !b.built || is_new_page {
                b.build_from(&root_node); // この後 dirty=false
                self.dom_needs_rebuild = false;
                // 新ページ: アニメーション状態を全てリセット。
                self.anim_engine.clear();
                self.anim_specs.clear();
                self.anim_prev_values.clear();
            }
            // JS が DOM を実際に変更した時だけブリッジから全ツリーを再構築する。
            // 静的ページや、JS 変更の無いサイズ変更再レイアウトでは to_dom_node の
            // ツリー全クローン（重い）を省略でき、確保回数を大幅に削減する。
            if b.built && b.dirty {
                root_node = b.to_dom_node();
                // dirty をここでクリア（遅延クリア）。relayout_if_dom_dirty が
                // dirty を消す前に parse_and_layout へ到達できるよう、to_dom_node()
                // 呼び出し後にクリアして無限ループを防ぐ。
                b.dirty = false;
            }
        }

        // 2. CSS スタイリング（<style> ... </style> を抽出して適用）。
        // root_node（ページ初回は静的パース結果、以降は DOM ブリッジ再構築後のツリー）を
        // 直接走査して <style> の textContent を集める。生 HTML 文字列の再スキャンではなく
        // 実際のツリーを見ることで、`document.createElement('style')` 等で動的に追加された
        // <style> 要素のスタイルも反映される（以前は元の HTML 文字列しか見ておらず、
        // 動的なスタイル注入が完全に無視されるバグだった）。
        // インクリメンタル再レイアウトでキャッシュを効かせるため、抽出結果を文字列キーにする
        // 点は従来どおり（同一なら parse_css を丸ごと省略）。
        // 外部 <link rel=stylesheet> の CSS を初回だけ取得してキャッシュする
        // （毎フレームの再取得を防ぐ。詳細は external_css_cache のコメント参照）。
        if self.external_css_cache.is_none() {
            fn dbg_count(node: &crate::os_lib::dom::Node, tag: &str) -> usize {
                let mut n = 0;
                if let crate::os_lib::dom::NodeType::Element { tag_name, .. } = &node.node_type {
                    if tag_name == tag {
                        n += 1;
                    }
                }
                for c in &node.children {
                    n += dbg_count(c, tag);
                }
                n
            }
            crate::println!(
                "[CSSDBG] tags html={} head={} body={} link={} script={} style={}",
                dbg_count(&root_node, "html"),
                dbg_count(&root_node, "head"),
                dbg_count(&root_node, "body"),
                dbg_count(&root_node, "link"),
                dbg_count(&root_node, "script"),
                dbg_count(&root_node, "style"),
            );
            let urls = collect_external_css_urls(&root_node);
            crate::println!("[CSSDBG] external <link> css found: {}", urls.len());
            let mut ext = String::new();
            // 【2026-08-25 バグ修正】1 本でも取れなかったら**保存しない**。
            // 保存条件を厳しくする代わりに、呼び出し側の無条件破棄をやめる。
            let mut all_fetched = true;
            for url in &urls {
                crate::println!("[CSSDBG] fetching external css {}", url);
                if let Some(text) = self.fetch_script_text(url) {
                    crate::println!("[CSSDBG] fetched {} bytes", text.len());
                    let abs_url = self.resolve_page_url(url);
                    let rewritten = super::url_resolve::rewrite_css_urls(&text, &abs_url);
                    // 【2026-07-25発見・修正】TLS読み取りエラー等でCSSが波括弧の
                    // 途中で打ち切られたまま後続CSSと連結されると、閉じられなかった
                    // `{`のせいでパーサーが以降の本物のルールを大量に読み飛ばす
                    // 重大バグだった（`rules.len()`が2000超のはずが122まで激減する
                    // 事例で発見）。バランスの取れた最後のトップレベルルールまでに
                    // 安全側で切り詰めてから連結する。
                    let balanced = super::url_resolve::truncate_to_balanced_css(&rewritten);
                    if balanced.len() != rewritten.len() {
                        // 【2026-08-03 復旧】CSS を途中で切り詰めた事実は
                        // **異常として残す**（`spec/logging_policy.md` L-1）。
                        // 一括でログ整理したとき誤って消してしまい、
                        // 空の if だけが残っていた。
                        // 切り詰めが起きるとルールが丸ごと欠落し、
                        // 「なぜかスタイルが当たらない」という形で表面化する。
                        crate::warn!(
                            "[CSS] 不完全な CSS を切り詰めた url={} {} -> {} バイト",
                            url,
                            rewritten.len(),
                            balanced.len()
                        );
                    }
                    ext.push_str(balanced);
                    ext.push('\n');
                } else {
                    crate::println!("[CSSDBG] fetch FAILED {}", url);
                    all_fetched = false;
                }
            }
            // 【2026-08-05】CSS 非同期化の調査用（R-10: 変更より先に計装）。
            // 「外部 CSS をいくつ見つけて、何バイト取れたか」。
            // 目的: 非同期化時に「取れているのに当たらない」を切り分ける。
            // 破棄条件: 非同期化が入るか、断念が確定したら削除。
            crate::warn!("[CSSTRACE] 抽出 ext_len={}", ext.len());
            // 【2026-08-25 バグ修正】以前はここで**無条件に**保存していた。
            //
            // 非同期取得では初回に間に合わない CSS があり、空や欠けた
            // 結果がそのまま居座る。その対策として呼び出し側
            // （`render.rs` の到着による再レイアウト）が毎回
            // `external_css_cache = None` で捨てていたが、これは
            // **全部取り直す**という意味になる。実際、フォントや画像が
            // 届くたびに外部 CSS を再取得してページを組み直しており、
            // 背景写真と本文フォントが間に合う前に描き直されていた
            // （実測 4 回中 2 回、`total=13` に届かず `total=9` で静止）。
            //
            // 直し方は `cache::write_cache` と同じで、
            // **捨てる側ではなく入れる側を守る**。
            // 全部揃ったときだけ保存すれば、欠けたものは
            // 次の機会に自然に取り直され、揃ったものは使い回される。
            if all_fetched {
                self.external_css_cache = Some(ext);
            } else {
                crate::warn!(
                    "[CSS] 取得できない外部CSSがあるので保存しない（次回取り直す） 総数={}",
                    urls.len()
                );
                self.external_css_cache = None;
            }
        }
        // カスケード順は文書順（<link> は通常 <head>、<style> はその後）に合わせ、
        // 外部 CSS を先、インライン <style> を後に連結する。
        let inline_css = {
            let mut s = self.external_css_cache.clone().unwrap_or_default();
            s.push_str(&collect_style_blocks_from_dom(&root_node));
            s
        };
        crate::warn!(
            "[CSSTRACE] inline_len={} 解析キャッシュ命中={} 既存ルール数={}",
            inline_css.len(),
            self.cached_stylesheet.is_some() && self.cached_css_key == inline_css,
            self.cached_stylesheet.as_ref().map(|s| s.rules.len()).unwrap_or(0)
        );
        let _pk = super::perf::start();
        let key_hit = self.cached_stylesheet.is_some() && self.cached_css_key == inline_css;
        super::perf::add(super::perf::Slot::CssKeyCmp, _pk);
        let stylesheet = if key_hit {
            crate::debug!("[GPU] TRACE: parse_css cache hit");
            match &self.cached_stylesheet {
                Some(s) => s.clone(),
                None => crate::os_lib::css::parse_css(&inline_css),
            }
        } else {
            let vw_before_parse = crate::os_lib::layout::VIEWPORT_HINT_W
                .load(core::sync::atomic::Ordering::Relaxed);
            let _pp = super::perf::start();
            let s = crate::os_lib::css::parse_css(&inline_css);
            super::perf::add(super::perf::Slot::CssParse, _pp);
            let preview: String = inline_css.chars().take(300).collect();
            self.cached_css_key = inline_css;
            self.cached_stylesheet = Some(s.clone());
            s
        };

        // 【2026-08-03 発見・修正】`@font-face` の取り込みを
        // **CSS キャッシュがミスしたときだけ**に限定していた。
        //
        // 「ネットワーク往復を伴うから」という理由で 2026-07-22 に入れた制限だが、
        // その後フォント取得は非同期（`font_queue`）＋キャッシュ優先になり、
        // 前提が崩れていた。結果として:
        //
        // 1. 初回レイアウト: フォントは未取得なので `Pending`（登録できない）
        // 2. 背景スレッドが取得完了してキャッシュへ保存
        // 3. 再レイアウト: **CSS はキャッシュ命中するのでここが呼ばれない**
        //
        // → 取得できているのに**同一ブート内で永久に登録されない**。
        //    実測: 8 本取得成功・`registered=` は 0 件。
        //
        // 毎レイアウト呼んでも安全かつ安価:
        // - 登録済みファミリは `has_custom_font` で即スキップ
        // - 未取得のものは `font_queue` の `seen` で重複投入されない
        // - キャッシュ命中したものだけが実際に登録される
        if !stylesheet.font_faces.is_empty() {
            // 【2026-08-05 計測】`css` 区間が最大 2315tick（23 秒）を占める。
            // この区間には「外部 CSS の同期取得」と「@font-face の登録」の
            // 両方が入っている。どちらが重いのかを分ける。
            // 目的: レイアウトの律速の特定。破棄条件: 特定でき次第削除。
            let t_ff = crate::kernel::timer::get_ticks();
            self.fetch_and_register_font_faces(&stylesheet.font_faces);
            // 【2026-08-05 試して戻した】「全部積んでからまとめて起こす」
            // （`enqueue_kind_deferred` + `spawn_workers`）を試したが**回帰した**。
            //
            // 狙いは、まとめ取得へ載る数を増やすこと
            // （1 本目で起こすと残りが並ぶ前に取得が始まる）。
            // ハンドシェイクは 12 → 11 に減ったが、
            // **フォントも背景写真も届かなくなった**
            // （`total=11`、`[FQDIAG] iters=0 spawn=0` で
            //   ワーカーが一度も起動していない）。
            //
            // 起こす契機を 1 箇所に集めたため、その 1 回が
            // `fetch_limit` の空き待ちに当たると誰も起こし直さない。
            super::perf::add(super::perf::Slot::FontFace, t_ff);
            let ff_ticks = crate::kernel::timer::get_ticks().wrapping_sub(t_ff);
            if ff_ticks > 20 {
                crate::warn!(
                    "[PERF][LAYOUT] font_face登録={}tick 件数={}",
                    ff_ticks,
                    stylesheet.font_faces.len()
                );
            }
        }
        crate::debug!("[GPU] TRACE: parse_css done");
        let t_after_css = crate::kernel::timer::get_ticks();

        // `:focus-within` 判定用: 現在フォーカス中の要素自身とその祖先すべてのノード
        // ポインタアドレスを再計算する（id ではなくノード実体の同一性で判定するため、
        // id を持たない要素も正しく機能する）。
        {
            fn collect_focus_within_path(
                node: &crate::os_lib::dom::Node,
                focused_id: &str,
                path: &mut alloc::vec::Vec<usize>,
            ) -> bool {
                path.push(node as *const _ as usize);
                if let crate::os_lib::dom::NodeType::Element { id, .. } = &node.node_type {
                    if id.as_deref() == Some(focused_id) {
                        return true;
                    }
                }
                for child in &node.children {
                    if collect_focus_within_path(child, focused_id, path) {
                        return true;
                    }
                }
                path.pop();
                false
            }
            let mut set = crate::os_lib::layout::FOCUS_WITHIN_PTRS.lock();
            set.clear();
            if let Some(fid) = &self.focused_id {
                let mut path = alloc::vec::Vec::new();
                if collect_focus_within_path(&root_node, fid, &mut path) {
                    set.extend(path);
                }
            }
        }

        // `:lang()` 判定用: <html lang="..."> の値を文書既定言語として記録する
        // （要素自身に lang 属性が無い場合のフォールバックとして使う）。
        {
            fn find_html_lang(node: &crate::os_lib::dom::Node) -> Option<alloc::string::String> {
                if let crate::os_lib::dom::NodeType::Element {
                    tag_name,
                    attributes,
                    ..
                } = &node.node_type
                {
                    if tag_name == "html" {
                        if let Some(l) = attributes.get("lang") {
                            return Some(l.to_lowercase());
                        }
                    }
                }
                for child in &node.children {
                    if let Some(l) = find_html_lang(child) {
                        return Some(l);
                    }
                }
                None
            }
            let mut doc_lang = crate::os_lib::layout::DOCUMENT_LANG.lock();
            *doc_lang = find_html_lang(&root_node).unwrap_or_default();
        }

        // 【2026-07-31計測】レイアウト 1 回が 32〜40 秒かかる原因を切り分ける。
        // どの段が重いのか推測で手を入れないため、段ごとの tick を測る。
        let t_css_end = crate::kernel::timer::get_ticks();
        let t_style_start = crate::kernel::timer::get_ticks();
        // 【2026-08-05】非同期版で `style_tree` が完了しない件の切り分け。
        // 同期版と**渡る木そのものが違う**のではないかを確かめる。
        // 木が壊れて（循環して）いれば走査は終わらない。
        // 深さは上限を設けて数える（循環していても数え終わる）。
        {
            fn count(n: &crate::os_lib::dom::Node, depth: usize, limit: usize) -> (usize, usize) {
                if depth >= limit {
                    return (1, depth);
                }
                let mut total = 1usize;
                let mut maxd = depth;
                for c in &n.children {
                    let (t, d) = count(c, depth + 1, limit);
                    total += t;
                    if d > maxd {
                        maxd = d;
                    }
                }
                (total, maxd)
            }
            let (nodes, depth) = count(&root_node, 0, 200);
            crate::warn!(
                "[CSSTRACE] カスケード開始 ルール数={} ノード数={} 深さ={}",
                stylesheet.rules.len(),
                nodes,
                depth
            );
        }
        let styled_tree = crate::os_lib::css::style_tree(&root_node, &stylesheet);
        let t_style_end = crate::kernel::timer::get_ticks();
        crate::warn!("[CSSTRACE] カスケード完了");
        // 【2026-08-05】計測はしていたのに**どこにも出していなかった**ため、
        // 手を入れた効果を確かめられなかった（`spec/logging_policy.md` L-4）。
        // 目的: カスケードの高速化の効果測定。1 レイアウトに 1 回だけで毎フレームではない。
        // 破棄条件: style_tree が 100 tick を安定して下回ったら削除する。


        // scroll-behavior: smooth はルート要素（<html>）への指定のみ対応（簡略実装）。
        self.scroll_smooth = styled_tree
            .value("scroll-behavior")
            .map(|v| v.trim().eq_ignore_ascii_case("smooth"))
            .unwrap_or(false);

        // `scrollbar-width: none` はルート要素（<html>）への指定のみ対応（簡略実装。
        // `scroll-behavior`と同じ方式）。2026-07-18 発見・実装。
        self.scrollbar_width_none = styled_tree
            .value("scrollbar-width")
            .map(|v| v.trim().eq_ignore_ascii_case("none"))
            .unwrap_or(false);

        // ルート要素の margin 指定をチェック
        let mut margin_x = 40;
        let mut margin_y = 20;
        if let Some(m) = styled_tree.value("margin") {
            if m == "0" {
                margin_x = 0;
                margin_y = 0;
            }
        }

        // 3. レイアウト構築
        let content_w = (win_w as i32 - (margin_x * 2)).max(400);
        // 置換要素の width/height % 解決用ビューポートヒント
        // (バー類と余白を除いた実コンテンツ領域)
        let viewport_h_hint = (win_h as i32 - top_offset - margin_y * 2).max(100);
        crate::os_lib::layout::set_viewport_hint(content_w, viewport_h_hint);
        let initial_containing_block = crate::os_lib::layout::Dimensions {
            content: crate::os_lib::layout::Rect {
                x: margin_x,
                y: margin_y,
                width: content_w,
                height: 0,
            },
            ..Default::default()
        };
        let t_layout_start = crate::kernel::timer::get_ticks();
        let layout_tree =
            crate::os_lib::layout::layout_tree(&styled_tree, initial_containing_block);
        let t_layout_end = crate::kernel::timer::get_ticks();
        crate::warn!("[CSSTRACE] レイアウト木完了");
        crate::debug!("[GPU] TRACE: layout_tree done");

        // 4. フラットな RenderElement リストへの変換 (レガシー描画部との統合)
        let t_flatten_start = crate::kernel::timer::get_ticks();
        let initial_text_color = self.page_text_color;
        self.flatten_layout(
            &layout_tree,
            "",
            "GET",
            "",
            false,
            false,
            false,
            false,
            initial_text_color,
            16,
            "",
            None,
            "",
            None,
            String::new(),
            1,
            0,
            false,
            false,
        );
        let t_flatten_end = crate::kernel::timer::get_ticks();
        crate::warn!("[CSSTRACE] flatten 完了");
        // 【一時】ヘッダ帯の要素を列挙して、ナビ項目がどの経路で
        // どんな矩形になっているかを見る。特定でき次第削除する。
        crate::warn!(
            "[PERF][LAYOUT] html={} css={} style={} layout={} flatten={} 合計={}tick 要素={}",
            t_html_end.wrapping_sub(t_stage0),
            t_css_end.wrapping_sub(t_html_end),
            t_style_end.wrapping_sub(t_style_start),
            t_layout_end.wrapping_sub(t_layout_start),
            t_flatten_end.wrapping_sub(t_flatten_start),
            t_flatten_end.wrapping_sub(t_stage0),
            self.elements.len()
        );

        // 要素矩形を DOM ブリッジへ反映（getBoundingClientRect / offsetWidth 等が参照）。
        // element_id→node idx の解決に immutable borrow が要るので、先に収集してから書き込む。
        let id_rects: alloc::vec::Vec<(usize, i32, i32, i32, i32, i32, i32, i32, i32)> = {
            let dom = self.js_runtime.dom.borrow();
            // 【2026-08-05】ここは要素 1 個ごとに `get_element_by_id` を呼んでいた。
            //
            // `get_element_by_id` は**全 DOM ノードの線形走査**（しかも各ノードで
            // `is_attached` が親を辿る）。要素は実測 369 個、ノードも同程度あるので
            // O(要素 × ノード × 深さ) になっていた。
            // さらに id を持たない要素では毎回 `format!("_ta_{}", idx)` で
            // **文字列を確保**してから、まず一致しない検索を走らせていた。
            //
            // id → ノード添字の対応を**1 回だけ**作って引く。
            // 計算量は O(要素 × ノード) から O(要素 + ノード) へ。
            let id_map = dom.build_id_index();
            self.elements
                .iter()
                .enumerate()
                .filter_map(|(idx, e)| {
                    let node_idx = if let Some(i) = e.node_idx {
                        Some(i)
                    } else if !e.element_id.is_empty() {
                        id_map.get(e.element_id.as_str()).copied()
                    } else {
                        // textarea だけが `_ta_<idx>` という合成 id を持つ。
                        // 持たない要素で毎回 `format!` するのは無駄なので、
                        // 索引が空でない場合だけ組み立てる。
                        if id_map.is_empty() {
                            None
                        } else {
                            id_map
                                .get(alloc::format!("_ta_{}", idx).as_str())
                                .copied()
                        }
                    };
                    node_idx.map(|i| {
                        (
                            i,
                            e.x_offset,
                            e.y_offset,
                            e.width,
                            e.height,
                            e.border_top_width,
                            e.border_right_width,
                            e.border_bottom_width,
                            e.border_left_width,
                        )
                    })
                })
                .collect()
        };
        {
            let mut dom = self.js_runtime.dom.borrow_mut();
            dom.clear_rects();
            for (i, x, y, w, h, bt, br, bb, bl) in id_rects {
                dom.set_rect(i, x, y, w, h);
                dom.set_border_widths(i, bt, br, bb, bl);
            }
        }

        // getComputedStyle 用に算出スタイル（全 Element ノードの specified_values）を反映。
        // 以前は `id` 属性を持つ要素（または transition/animation を持ち合成 id が
        // 登録された要素）にしか computed_styles が反映されず、`id` の無い要素の
        // `getComputedStyle()` は `n.style`（インライン `style=""` のみ）にしか
        // フォールバックできず、実際にカスケードされたスタイルシート由来の値を
        // 一切反映していなかった（現実の大多数のHTML要素は `id` を持たないため
        // 影響範囲が広い重大な既知ギャップだった）。`dom_idx` は元々
        // DomBridge の pre-order 走査インデックスと1:1で同期していたため、
        // id 文字列経由の間接的な解決を経由せず直接 idx をキーに使うよう修正。
        // 2026-07-18 発見・実装。
        {
            fn collect_styles(
                node: &crate::os_lib::css::StyledNode,
                out: &mut alloc::vec::Vec<(usize, alloc::vec::Vec<(String, String)>)>,
                // anim_out: transition/animation を持つ全要素。
                // id あり → そのまま id を使う。id なし → "_ta_<pos>" の合成 id を DomBridge に登録。
                anim_out: &mut alloc::vec::Vec<(String, alloc::vec::Vec<(String, String)>)>,
                counter: &mut usize,
                dom_nodes: &mut alloc::vec::Vec<crate::os_lib::js::dom_bridge::DomNode>,
            ) {
                // DomBridge の pre-order 走査インデックスと同期するためカウントアップ（テキストノード含む）。
                let dom_idx = *counter;
                *counter += 1;
                if let crate::os_lib::dom::NodeType::Element { id, .. } = &node.node.node_type {
                    let props: alloc::vec::Vec<(String, String)> = node
                        .specified_values
                        .iter()
                        .map(|(k, v)| (k.clone(), v.clone()))
                        .collect();
                    // `transition-property`/`animation-name` はショートハンド無しの個別
                    // ロングハンド指定を検知するための足がかり（`synthesize_transition_shorthand`/
                    // `synthesize_animation_shorthand` と対になる。以前は `transition`/`animation`
                    // ショートハンドの有無しか見ておらず、ロングハンドのみの要素がこの時点で
                    // 追跡対象から除外され、後段の合成ロジックまで到達しなかった）。
                    let has_anim = props.iter().any(|(k, _)| {
                        matches!(
                            k.as_str(),
                            "transition" | "animation" | "transition-property" | "animation-name"
                        )
                    });
                    // computed_styles への反映は id の有無に関わらず常に行う（dom_idx 直接使用）。
                    out.push((dom_idx, props.clone()));
                    if let Some(eid) = id {
                        // 明示 id あり: アニメーション追跡にそのまま使う。
                        if has_anim {
                            anim_out.push((eid.clone(), props));
                        }
                    } else {
                        // 明示 id なし: 合成 id を DomBridge に登録（getBoundingClientRect/id_rects サポート用）。
                        let synthetic = alloc::format!("_ta_{}", dom_idx);
                        if let Some(dn) = dom_nodes.get_mut(dom_idx) {
                            if dn.id.is_empty() {
                                dn.id = synthetic.clone();
                            }
                        }
                        if has_anim {
                            let use_id = dom_nodes.get(dom_idx)
                                .filter(|dn| !dn.id.is_empty())
                                .map(|dn| dn.id.clone())
                                .unwrap_or(synthetic);
                            anim_out.push((use_id, props));
                        }
                    }
                }
                for c in &node.children {
                    collect_styles(c, out, anim_out, counter, dom_nodes);
                }
            }
            let mut collected = alloc::vec::Vec::new();
            let mut anim_collected = alloc::vec::Vec::new();
            let mut _counter = 0usize;
            {
                let mut dom = self.js_runtime.dom.borrow_mut();
                collect_styles(&styled_tree, &mut collected, &mut anim_collected, &mut _counter, &mut dom.nodes);
            }
            {
                let mut dom = self.js_runtime.dom.borrow_mut();
                dom.clear_computed();
                for (i, props) in collected {
                    for (k, v) in props {
                        dom.set_computed_style(i, &k, &v);
                    }
                }
            }

            // --- CSS アニメーション/トランジションの同期 ---
            // anim_collected: transition/animation を持つ全要素（明示 id + 合成 id）。
            self.sync_animations(&anim_collected, &stylesheet);
        }

        // --- サブスクロール領域の同期 ---
        // 1. JS が el.scrollTop を書き込んでいれば scroll_regions へ反映する。
        //    (dom.scroll_tops[idx] → 要素 id → scroll_regions[id])
        {
            let js_tops: alloc::vec::Vec<(String, i32)> = {
                let dom = self.js_runtime.dom.borrow();
                dom.scroll_tops
                    .iter()
                    .filter_map(|(idx, top)| {
                        let id = dom.nodes.get(*idx).map(|n| n.id.clone())?;
                        if id.is_empty() { None } else { Some((id, *top)) }
                    })
                    .collect()
            };
            for (id, top) in js_tops {
                if let Some(entry) = self.scroll_regions.get_mut(&id) {
                    *entry = top;
                }
            }
        }
        // 2. レンダラが把握した scroll_regions / scroll_containers を dom へ反映する。
        //    (scroll_regions[id] → node_idx → dom.scroll_tops)
        //    (scroll_max_y + height → dom.scroll_heights)
        {
            let sync_data: alloc::vec::Vec<(usize, i32, i32)> = {
                let dom = self.js_runtime.dom.borrow();
                self.scroll_containers
                    .iter()
                    .filter_map(|(cid, max_y, _cx, _cy, _cw, ch)| {
                        let idx = dom.get_element_by_id(cid)?;
                        let cur = self.scroll_regions.get(cid).copied().unwrap_or(0);
                        Some((idx, cur, max_y + ch))
                    })
                    .collect()
            };
            let mut dom = self.js_runtime.dom.borrow_mut();
            for (idx, cur, sh) in sync_data {
                dom.scroll_tops.insert(idx, cur);
                dom.scroll_heights.insert(idx, sh);
            }
        }

        // スクロール限界の設定 (ビューポートは win_h - top_offset)
        let content_height = layout_tree.dimensions.margin_box().height + margin_y * 2;
        let viewport_height = (win_h as i32 - top_offset).max(100);
        self.max_scroll_y = (content_height - viewport_height).max(0);

        // position: sticky の可動範囲下限を確定する。
        // スクロールコンテナに属する要素はそのコンテナの content 下端、
        // ページスクロールの要素はドキュメント全体の下端を上限に、height 分引いた値まで。
        // これ以上は「吸着解除」してその位置で止まる（親からはみ出さない）。
        for i in 0..self.elements.len() {
            if !self.elements[i].is_sticky {
                continue;
            }
            let cid = self.elements[i].scroll_container_id.clone();
            let bound_bottom = if cid.is_empty() {
                content_height
            } else if let Some((_, _, _, cy, _, ch)) =
                self.scroll_containers.iter().find(|(id, ..)| *id == cid)
            {
                cy + *ch
            } else {
                content_height
            };
            let height = self.elements[i].height;
            self.elements[i].sticky_bound_max_y = (bound_bottom - height).max(0);
        }
        // scroll_y は**文書が変わったとき**のみ 0 へリセット。
        // 同じ文書の再レイアウト（`:target` 変化・フォント到着・JS 変更）では保持する。
        if is_document_changed {
            self.scroll_y = 0;
        } else {
            self.scroll_y = self.scroll_y.min(self.max_scroll_y);
        }
        self.dirty = true;
        self.dirty_reason = "layout.rs:865";

        crate::info!(
            "WEB_ENGINE: Flatten layout done. generated {} elements.",
            self.elements.len()
        );

        // 現在ページの絶対URLを JS へ反映（fetch/XHR の相対基準 + window/document.location）。
        {
            let scheme = if self.current_is_https {
                "https://"
            } else {
                "http://"
            };
            let page_url = alloc::format!("{}{}{}", scheme, self.current_host, self.current_path);
            self.js_runtime.set_page_url(&page_url);
        }

        // <script> タグの自動実行 (もし現在実行中でなければ)。
        // インライン本文に加え、<script src="..."> の外部スクリプトも
        // 現在のページと同じ HTTP(S) 経路でフェッチしてから実行する。
        if !self.executing_script {
            self.executing_script = true;
            let script_blocks = collect_scripts_from_dom(&root_node);
            crate::debug!("[GPU] TRACE: script blocks count={}", script_blocks.len());
            for (idx, (src, inline)) in script_blocks.iter().enumerate() {
                let script_owned;
                let script: &str = match src {
                    Some(url) => {
                        crate::debug!("[GPU] TRACE: fetching external script idx={} src={}", idx, url);
                        match self.fetch_script_text(url) {
                            Some(text) => {
                                script_owned = text;
                                &script_owned
                            }
                            None => {
                                crate::debug!("[GPU] TRACE: external script fetch failed idx={}", idx);
                                continue;
                            }
                        }
                    }
                    None => inline.as_str(),
                };
                if !script.is_empty() {
                    crate::debug!("[GPU] TRACE: executing script idx={} len={}", idx, script.len());
                    if let Err(e) = crate::os_lib::js::eval(script, &mut self.js_runtime) {
                        crate::debug!("[GPU] TRACE: JS error: {}", e);
                    }
                    crate::debug!("[GPU] TRACE: executed script idx={}", idx);
                }
            }
            self.executing_script = false;

            // インラインスクリプトが DOM を変更していたら、スクリプトを再実行せずに
            // 再レイアウトして変更を反映する。
            // 【2026-07-31】非同期取得したフォントが揃ったら再レイアウトする（R-3）。
            // 非同期化とキャッシュは動いていたが**完了を通知する経路が無く**、
            // 同一ブート内で永久に反映されなかった（実測: cache hit 0 件）。
            // レイアウトは取得完了より先に走るので、完了時に促す必要がある。
            // 【2026-08-03 移設】フォント取得完了の確認はここでは行わない。
            // ここは `parse_and_layout` の内側なので、
            // **レイアウトが動いていないと再レイアウトを起こせない**という
            // 循環になっていた。実測でフォント 8 本の取得完了は
            // 最後のレイアウトより後に起きており、取り込む機会が無かった。
            // 確認はフレーム毎に走る `draw()` の冒頭へ移した。

            self.relayout_if_dom_dirty(top_offset, win_w, win_h);
        }

        // 【2026-08-03】URL のフラグメント（`#id`）があれば、要素が出揃った
        // この時点でその位置までスクロールする。
        //
        // 実ブラウザの標準機能であり、このサイトのナビゲーション
        // （Top / Profile / Smart Home / Datamining）も `#id` リンク。
        // 対象 id がまだ現れていない場合は保持したままにして、
        // 次のレイアウト（フォント到着後の再レイアウト等）で再挑戦する。
        if !self.pending_fragment.is_empty() {
            let frag = self.pending_fragment.clone();
            if self.elements.iter().any(|e| e.element_id == frag) {
                let href = alloc::format!("#{}", frag);
                self.navigate_to_fragment(&href);
                self.pending_fragment.clear();
                crate::warn!("[NAV] フラグメントへスクロール #{}", frag);
            } else {
                // 見つからないこと自体は異常ではない（まだ生成されていない、
                // あるいは存在しない id）。ただし黙って消さない。
                crate::warn!(
                    "[NAV] フラグメントの対象がまだ見つからない #{} elements={}",
                    frag,
                    self.elements.len()
                );
            }
        }

        // 【2026-08-05 計測】flatten 以降にも処理が続く。
        // 上の `[PERF][LAYOUT]` は flatten までしか測っておらず、
        // それだけでは 38〜183 tick と軽い。関数全体との差が
        // 「flatten より後」のコストになる。
        crate::warn!(
            "[PERF][LAYOUT] 関数全体={}tick",
            crate::kernel::timer::get_ticks().wrapping_sub(t_stage0)
        );
    }

    /// `<script src="...">` の外部スクリプトを取得する。`url` は resolve_dom_paths 済みのため、
    /// 絶対パス（同一ホスト）か `scheme://host/path` の完全URLのどちらか。
    /// `url`（`<link href>`等、絶対URLの場合も現在ページ相対パスの場合もある）を
    /// 常に絶対URL文字列へ正規化する。外部CSS自身の`url()`相対参照を、その
    /// CSSファイル自身の場所を基準に解決する（`rewrite_css_urls`）際の
    /// 基点URLとして使う。
    fn resolve_page_url(&self, url: &str) -> String {
        if url.starts_with("http://") || url.starts_with("https://") {
            String::from(url)
        } else {
            let scheme = if self.current_is_https { "https://" } else { "http://" };
            alloc::format!("{}{}{}", scheme, self.current_host, url)
        }
    }

    /// `ensure_image_cached` と同じ規約: 現在のページが `localhost`（アプリのローカルHTML）
    /// なら SylFS から読み、それ以外は実際の HTTP(S) 経由でフェッチする。
    fn fetch_script_text(&self, url: &str) -> Option<String> {
        let _t_fs = super::perf::start();
        let r = self.fetch_script_text_inner(url);
        super::perf::add(super::perf::Slot::FetchScript, _t_fs);
        r
    }

    fn fetch_script_text_inner(&self, url: &str) -> Option<String> {
        if self.current_host == "localhost" {
            // FS は複数スレッドから触られる（`kernel::fs::FS_LOCK` の説明を参照）。
            let _fs_guard = crate::kernel::fs::FS_LOCK.lock();
            let fs = crate::kernel::fs::get_fs();
            return fs
                .read_file(url)
                .map(|(_m, bytes)| String::from_utf8_lossy(&bytes).into_owned());
        }
        // 【2026-09-05 バグ修正】ここは `https://`/`http://` 以外をすべて
        // 「現在のホスト上のパス」として扱っていた。そのため
        // プロトコル相対 URL（`//host/path`）が自ホストへ向き、
        // 実サイトの `//ajax.googleapis.com/.../jquery.min.js` が
        // 自ホストの HTML を返し、それを JS として実行して構文エラーに
        // なっていた（＝**jQuery 本体が読み込まれていなかった**）。
        //
        // 同型の誤りは `js/builtins.rs`・`web_engine/render.rs` でも
        // 個別に直されており、ここが 4 例目。判定を
        // `url_resolve::split_target` に集約して、5 例目が生まれないようにする。
        let (is_https, host, path) = super::url_resolve::split_target(
            url,
            self.current_is_https,
            &self.current_host,
        );
        // 【2026-07-24】この自作TCPスタックは送信データの再送機構を持たず、
        // ネットワーク上でパケット（TLS ClientHello等）が消失すると復旧できず
        // 接続全体が失敗する（`tcp_send_real`自体への再送追加は既存の安定した
        // メインHTML取得経路に悪影響を与えたため断念済み、詳細はTODO.md参照）。
        // 【2026-07-25】以前はここで独自に最大3回の再試行をしていたが、
        // `https_get_binary`/`http_get_binary`側が接続失敗・応答打ち切りの
        // 両方について既に最大3回まで内部で再試行するようになったため、
        // ここでさらに3回重ねると最悪ケースで1リソースあたり最大9回もの
        // 接続試行が発生し、ロード時間を不必要に悪化させていた。二重管理を
        // やめ、呼び出しは1回のみとしリトライは呼び出し先に一本化する。
        // 【2026-07-26】外部CSS/JSもディスクキャッシュを使うようにした。
        // メインHTMLと画像は以前からキャッシュしていたが、この経路だけが
        // 毎回ネットワークへ出ていた。自作TCP/TLSスタックは実測でパケット
        // 消失・タイムアウトが頻発しており、一度取得できたスタイルシートを
        // 再取得しないだけで表示の再現性が上がる。
        // （SylFS に間接ブロックを追加し 1 ファイル上限を約22KB→約85KB へ
        //   拡大したので、49KB の `modern-style.css` も対象になる。
        //   現状バックエンドは RAMDisk のため効果は同一起動内に限られるが、
        //   ページ間の行き来では再取得を避けられる。SDカードが使えるように
        //   なれば起動をまたいで効く。）
        if let Some(cached) = super::cache::read_cache(&host, &path) {
            crate::debug!("[NET] fetch_script_text: cache hit host={} path={}", host, path);
            return Some(String::from_utf8_lossy(&cached).into_owned());
        }

        // 【2026-08-05 試して差し戻した】ここを非同期取得にしたが**回帰した**。
        //
        // 動機は正しかった: レイアウト 1 回 92〜2176 tick のうち、
        // HTML 解析・CSS 解析・レイアウト木構築は合計 57〜183 tick しかなく、
        // **大きな値の正体はここの通信待ち**だった。
        // 非同期にするとレイアウトは 30〜164 tick まで落ちた。
        //
        // だが**ページが素の HTML のまま描かれた**。
        // CSS 自体は取得できており（`[FONT] 背景取得完了 /css/modern-style.css
        // bytes=49077`）、到着通知による再レイアウトも 3 回走っていたのに、
        // スタイルが当たらない。`external_css_cache` と `cached_stylesheet` を
        // 到着時に捨てるようにしても直らなかった。
        //
        // 非同期化には「初回は CSS 無しで描き、届いたら**確実に**当て直す」
        // 経路の作り込みが要る。キューを差し替えるだけでは足りない。
        // 壊れた見た目を残さないため、原因が分かるまで同期のままにする。
        // 設計は `spec/resource_loading.md`（R-1/R-3）にある。
        // 【2026-08-05 三度試して三度とも戻した】非同期取得は**まだ入れられない**。
        //
        // ## 動機（測定として正しい）
        //
        // 段ごとに測ると HTML 解析・CSS 解析・レイアウト木構築は
        // 合計 57〜183 tick しかないのに、`parse_and_layout` 全体は
        // 92〜2176 tick。**差の正体はここの同期通信待ち**。
        // 非同期にするとレイアウトは 35〜432 tick まで落ちる（毎回再現）。
        //
        // ## 経過
        //
        // | 回 | 結果 |
        // |---|---|
        // | 1 | 素の HTML に見えた → **撮影が早かっただけの誤判定**。計装すると `rules=2403` で正しく当たっていた |
        // | 2 | メイン HTML が読めない（`total=3`）→ `fetch_limit` で優先度の門を実装 |
        // | 3 | 門が閉じている間の投入が滞留 → `pump()` で解消。`total=12` まで回復したが**CSS が当たらない** |
        //
        // 3 回目は取得もキャッシュ破棄も動いているのにスタイルが当たらない。
        // 原因は未特定。**見た目が壊れたまま残さない**ため同期に戻す（R-6）。
        //
        // ## 計装を入れて分かったこと（4 回目・原因を絞り込んだ）
        //
        // `[CSSTRACE]` を常設して非同期版を走らせた結果:
        //
        // ```text
        // 非同期投入 host=www.sugi-lab.net path=/css/modern-style.css
        // 抽出 ext_len=0            ← 初回は空（想定どおり）
        // カスケード開始 ルール数=0
        // 到着による再レイアウト（CSS キャッシュ破棄）
        // 抽出 ext_len=124813       ← 届いた CSS を取り直せている
        // 解析キャッシュ命中=false
        // カスケード開始 ルール数=2403   ← 正しくカスケードしている
        // [PERF][LAYOUT] 要素=365        ← スタイル付きの要素も生成されている
        // ```
        //
        // **取得・キャッシュ破棄・再抽出・解析・カスケード・要素生成まで
        // すべて正しく動いている。** それでも画面は素の HTML のまま
        // （待機を 200→330 秒に延ばしても変わらないので**タイミングでもない**）。
        //
        // ## さらに絞り込んだ（5 回目・原因はほぼ確定）
        //
        // 描画側にも要素数を出し、ログの**行番号**で突き合わせた:
        //
        // ```text
        // 103: カスケード開始 ルール数=0
        // 114: [PERF][LAYOUT] ... 要素=365        ← この 365 要素は CSS 無しで作られた
        // 225: カスケード開始 ルール数=2403    ← この後に [PERF][LAYOUT] が無い
        // ```
        //
        // **スタイル付きのレイアウトは開始するが、完了行が出ない。**
        // つまり「描かれていない」のではなく「間に合っていない」。
        // 同じ実行の `[PERF][DRAW] frames=25`（通常は 100 超）も、
        // 実行が終盤だったことを裏づける。
        //
        // → CSS の到着が遅すぎる。フォント 8 本・画像と同じ 8 枠を
        //    奪い合っており、**CSS に優先権が無い**。
        //    `spec/resource_loading.md` の実装順序 4
        //    「キューを 1 本に統合し種別ごとの優先度を持たせる」が
        //    前提条件だと考え、優先度（CSS > フォント > 画像 > JS）を実装した。
        //
        // ## 6 回目・原因を突き止めた
        //
        // 優先度を入れても結果は同じだったので、
        // `style_tree` の前後・レイアウト木・flatten に印を足して測った:
        //
        // ```text
        // [CSSTRACE] カスケード開始 ルール数=2403
        // （「カスケード完了」が出ない）
        // ```
        //
        // **`style_tree` 自体が終わっていない。**
        // 同期版では同じ 2403 ルールが 118〜270 tick で完了する。
        // 違いは、非同期版ではカスケードが**8 本の取得ワーカーと同時に走る**こと。
        //
        // カスケードはノードごとに `BTreeMap` を作る確保の塊で、
        // このヒープは確保のたびに割り込みを止める spin ロックを取る
        // （`kernel/allocator.rs`）。取得ワーカー 8 本と競合すると
        // 桁違いに遅くなり、実行時間内に終わらない。
        //
        // ## 7 回目・競合説も否定された
        //
        // 「取得ワーカーと競合してカスケードが遅い」という読みで、
        // 再レイアウトの条件に `fetch_limit::active() == 0` を足した。
        // **それでもカスケードは完了しなかった。**
        // ヒープ競合は原因ではない。
        //
        // ## 分かっていること（ここまでの確定事項）
        //
        // - CSS の取得・キャッシュ・再抽出・解析（2403 ルール）は正しく動く
        // - 再レイアウトも起きる（`到着による再レイアウト` が出る）
        // - **`style_tree` が完了しない**（`カスケード開始` の後に完了行が無い）
        // - 同じ 2403 ルールでも**同期版なら 13 回すべて完了する**
        // - 待機を 330 秒に延ばしても変わらない（時間切れではない）
        // - 取得ワーカーが止まっていても変わらない（ヒープ競合ではない）
        //
        // ## 8 回目・「ハングする」という読みが**誤りだった**
        //
        // 渡る木を測ると同期版と**完全に同一**だった。
        //
        // ```text
        // 同期:   カスケード開始 ルール数=2403 ノード数=358 深さ=10  → 完了
        // 非同期: カスケード開始 ルール数=2403 ノード数=358 深さ=10  → 完了行が無い
        // ```
        //
        // ログの**行番号**を見ると、その「完了行が無い」開始行は
        // **ログの最終行**だった。つまりハングではなく、
        // **カスケードを始めた瞬間に実行時間が尽きただけ**。
        //
        // 6・7 回目に「`style_tree` が完了しない」「ヒープ競合だ」と
        // 書いたのは誤り。tail だけ見て「後続が無い＝止まった」と
        // 決めつけていた（**ログの末尾は「止まった」の証拠にならない**）。
        //
        // ## 本当の問題: 非同期版は CSS の反映が遅すぎる
        //
        // 同じ実行の `[PERF][DRAW] frames=25`（同期版は 100 超）も、
        // 全体が遅いことを示している。
        // CSS 到着 → 再レイアウト → `@font-face` 発見 → フォント取得 →
        // 再レイアウト、と**直列に**進み、各段に静穏待ち（2 秒）が入る。
        //
        // ## 段ごとに測った（9 回目・数字が出た）
        //
        // ```text
        // [CSSTRACE] 到着 path=/css/modern-style.css 投入から=987tick   ≒ 9.9 秒
        // [CSSTRACE] 到着による再レイアウト 到着から=626tick            ≒ 6.3 秒
        // ```
        //
        // **投入から反映まで合計 16 秒**かかっている。内訳は 2 つ。
        //
        // ### (1) 取得そのものが遅い（987 tick）
        //
        // 49KB の CSS に 10 秒。実効 100KB/s なら 1 秒未満のはず。
        // 差はワーカーの空き待ち（フォント・画像と 8 枠を奪い合う）。
        // 優先度を入れたが、**既に走っているワーカーは止まらない**ので、
        // 重い画像が枠を握っている間は CSS が待たされる。
        //
        // ### (2) 到着してから反映までが遅い（626 tick）
        //
        // 静穏待ちは 2 秒（`QUIET`）なのに 6.3 秒かかっている。
        // 再レイアウトの判定は `draw()` の中でしか行われず、
        // その `draw()` が 200 秒で 25〜50 回しか回っていないため
        // （同期版は 100 回超）、判定の機会自体が少ない。
        //
        // ### 【訂正】「フォントがまだ同期だから」は**誤り**
        //
        // 一度そう結論したが、`fetch_binary_bytes` は
        // 2026-07-30 の時点で既に非同期化されている
        // （キャッシュに無ければ `enqueue_font` して即座に `None` を返す）。
        // コードを読まずに「同期のはずだ」と書いた。
        //
        // ### 【測定済み】`draw()` の「間」も原因ではない
        //
        // 前回の `draw()` 終了から次の開始までを測った:
        //
        // ```text
        // 同期:   frames=125 total=15522tick 間隔合計=746tick 間隔最大=20tick
        // 非同期: frames=50  total=10676tick 間隔合計=943tick 間隔最大=33tick
        // ```
        //
        // **間隔は両方とも極小**（全体の 5% 未満）。
        // GUI スレッドは `draw()` の外で止まっていない。これも外れ。
        //
        // 残るのは「1 回の `draw()` が長い」こと。
        // 両方とも `間隔最大` に対して `max`（1 回の最大）が
        // 2563〜4043 tick = 25〜40 秒あり、
        // **数十秒かかる `draw()` が存在する**。
        // 次に測るならそこ（`max` を記録した 1 回の中で何をしていたか）。
        //
        // ## ここまでで確かなこと
        //
        // - 投入から反映まで 16 秒（内訳 9.9 秒 + 6.3 秒）
        // - 取得の 9.9 秒は枠待ち（優先度を入れても、走行中のワーカーは止まらない）
        // - 反映の 6.3 秒は `draw()` の回数が少ないことに由来する
        // - `draw()` が減る理由は未特定（フォント同期説は誤り）
        //
        // 付随して入れた `fetch_limit`（優先度の門）と `pump()`（滞留の解消）、
        // 到着時の `external_css_cache` 破棄、`[CSSTRACE]` の計装は
        // **それぞれ独立して正しい**ので残してある。
        let result = if is_https {
            crate::kernel::tls::https_get_binary(&host, &path)
        } else {
            crate::kernel::net::http_get_binary(&host, &path)
        };
        match result {
            Ok(bytes) if !bytes.is_empty() => {
                // 空応答はキャッシュしない。一度 0 バイトを書くと
                // 以後は毎回キャッシュ命中して**恒久的に空が返り続ける**。
                super::cache::write_cache(&host, &path, &bytes);
                Some(String::from_utf8_lossy(&bytes).into_owned())
            }
            Ok(_) => {
                crate::warn!("[NET] fetch_script_text: 空応答 host={} path={}", host, path);
                None
            }
            Err(e) => {
                crate::warn!(
                    "[NET] fetch_script_text: 取得失敗 host={} path={} err={}",
                    host, path, e
                );
                None
            }
        }
    }

    /// `fetch_script_text`と同じURL解決規則だが、UTF-8ロッシー変換を行わず
    /// バイト列のまま返す。TTF/OTF等のバイナリ形式はテキスト変換で内容が
    /// 破損する（不正なバイト列がU+FFFDに置換される）ため専用に必要
    /// （`@font-face`の実行時フォント読込用。2026-07-22新設）。
    fn fetch_binary_bytes(&self, url: &str) -> Option<alloc::vec::Vec<u8>> {
        if self.current_host == "localhost" {
            // 同上。フォント取得はワーカースレッドからも走る。
            let _fs_guard = crate::kernel::fs::FS_LOCK.lock();
            let fs = crate::kernel::fs::get_fs();
            return fs.read_file(url).map(|(_m, bytes)| bytes);
        }
        fn split_host_path(rest: &str) -> (String, String) {
            #[allow(clippy::string_slice)]
            match rest.find('/') {
                Some(idx) => (String::from(&rest[..idx]), String::from(&rest[idx..])),
                None => (String::from(rest), String::from("/")),
            }
        }
        let (is_https, host, path) = if let Some(rest) = url.strip_prefix("https://") {
            let (h, p) = split_host_path(rest);
            (true, h, p)
        } else if let Some(rest) = url.strip_prefix("http://") {
            let (h, p) = split_host_path(rest);
            (false, h, p)
        } else {
            (self.current_is_https, self.current_host.clone(), String::from(url))
        };
        // 【2026-07-30】フォントもディスクキャッシュを使う。
        //
        // 実測でキャッシュ利用箇所を全列挙したところ、
        // CSS/JS（`fetch_script_text`）と画像（`image_loader_thread`）は
        // `/cache/browser/` を使っているのに、**フォント取得だけ使っていなかった**。
        // そのため 5.3MB の Noto Sans JP を毎回ダウンロードし直しており、
        // 描画が始まらない直接の要因になっていた（`spec/resource_loading.md`）。
        if let Some(cached) = super::cache::read_cache(&host, &path) {
            crate::warn!(
                "[NET] fetch_binary_bytes: cache hit host={} path={} bytes={}",
                host,
                path,
                cached.len()
            );
            return Some(cached);
        }
        // 【2026-07-30】キャッシュに無ければ**背景で取得を予約して即座に戻る**。
        //
        // 以前はここで同期的にダウンロードしており、5.3MB のフォントで
        // レンダリングが止まっていた。取得を打ち切るのはブラウザの挙動として
        // 誤りなので、**最後まで取得しつつ描画は待たせない**方式へ変える
        // （`spec/resource_loading.md` の R-1/R-2）。
        // 取得完了後はキャッシュに載るので、次のレイアウトで反映される（R-3）。
        // 【2026-08-05 正しく試して悪化・不採用】
        //
        // 「積むだけにして全部積んでから起こす」（`enqueue_kind_deferred`
        // ＋ `spawn_workers`）を、今度は**実コードに当たったことを
        // `grep -c` で確認したうえで**測った。
        //
        // ```text
        // 従来:   TLS握手=2958/12  spawn=4  total=13 ok=13
        // 遅延版: TLS握手=3525/13  spawn=6  total=13 ok=13
        // ```
        //
        // **握手が 12 → 13 に増えて悪化した。**
        // `spawn_workers` が一度に 4 本起こすため、各ワーカーが
        // 1 件ずつ持って別々に接続し、**まとめ取得が成立しにくくなる**。
        // 「全部並べてから起こす」と「並列に起こす」は両立しない。
        //
        // 過去 2 回の同案は置換ミスで実コードに当たっておらず、
        // そこから導いた R-19 は取り下げ済み。これが唯一の有効な観測。
        super::font_queue::enqueue_font(host.clone(), path.clone(), is_https);
        None
    }

    /// `@font-face`で参照されたフォントを実行時に取得・登録する。
    /// 【2026-07-24修正】以前は相対URL（`../webfonts/x.woff2`等。FontAwesome等が
    /// 使う）を「base URL解決未対応」として無条件でスキップしており、
    /// アイコンフォントが一切取得されない既知のバグだった。外部CSSの取得時点
    /// （`rewrite_css_urls`、CSSファイル自身の絶対URLを基準に解決）で
    /// 相対`url()`参照をすべて絶対URLへ書き換え済みにしたため、ここに届く
    /// 時点では（インラインの`<style>`ブロック由来を除き）通常すでに絶対URL
    /// になっている。ここでの`http(s)://`チェックは、`data:`URI等
    /// 非対応形式を安全に弾くガードとして残す。同名familyが既に登録済みなら
    /// ネットワーク往復を避けてスキップする（2026-07-22新設）。
    fn fetch_and_register_font_faces(&self, font_faces: &[crate::os_lib::css::FontFaceDef]) {
        // 【2026-07-26】`@font-face`の取得は同期的にここで行われ、1件の失敗に
        // 約7秒（DNS/TCP/TLSのタイムアウト）かかる。実サイトは Noto Sans JP 4件
        // ＋FontAwesome 6件＝10件の`@font-face`を持つため、ネットワークが不調な
        // ときは**約70秒間、初回描画が始まらない**。フォントはあくまで装飾で
        // あり、取得できなくてもフォールバックフォントでページは読める。
        // 連続失敗が閾値に達したら以降の取得を諦めて描画へ進む（回路遮断器）。
        // これにより最悪ケースの遅延を約70秒から約14秒へ短縮する。
        // 【2026-08-03】連続失敗による打ち切り（`MAX_CONSECUTIVE_FAILURES`）を撤去した。
        //
        // 取得は非同期（`font_queue`）で描画をブロックしないので、
        // 「何本か失敗したから以降は諦める」理由が無い。
        // 打ち切りは本物のブラウザの挙動ではない（`spec/resource_loading.md` R-2）。
        // 実際この打ち切りは過去に Font Awesome 4 本を全部スキップさせていた。
        //
        // 集計用の `fetched_fonts` も参照されていなかったので併せて削除
        // （`cargo clippy` の unused_assignments 警告として出ていた）。

        for ff in font_faces {
            // 【2026-08-05】ウェイトまで見る。family 名だけで判定すると、
            // 同じ family の別ウェイト（Font Awesome の solid 900）が
            // 「登録済み」と誤判定されて一度も取り込まれない。
            if crate::kernel::vector_font::has_custom_font_weighted(&ff.family, ff.weight) {
                continue;
            }
            let Some(url) = &ff.src_url else { continue };
            if !(url.starts_with("http://") || url.starts_with("https://")) {
                continue;
            }
            // 【2026-07-30】サイズ・本数の上限判定は撤去した。
            // 取得は非同期（`font_queue`）になり描画をブロックしないので、
            // 「大きいから諦める」必要が無くなった。
            // 打ち切りはブラウザの挙動として誤り（`spec/resource_loading.md` R-2）。
            let t0 = crate::kernel::timer::get_ticks();
            if let Some(bytes) = self.fetch_binary_bytes(url) {
                let elapsed = crate::kernel::timer::get_ticks().wrapping_sub(t0);
                let ok = crate::kernel::vector_font::register_custom_font_weighted(
                    &ff.family,
                    ff.weight,
                    bytes,
                );
                crate::println!(
                    "[CSSDBG] @font-face '{}' <- {} registered={} elapsed_ticks={}",
                    ff.family, url, ok, elapsed
                );
            } else {
                // 【2026-07-31】非同期化により、ここへ来るのは
                // 「取得失敗」ではなく**「キューへ積んで取得中」**である。
                // 以前はこれを失敗と数えており、`MAX_CONSECUTIVE_FAILURES = 2` の
                // サーキットブレーカーが即発動して**以降のフォントを全部スキップ**
                // していた（実測: Font Awesome 4 本すべてが SKIPPED）。
                // `Pending` は失敗ではない（`font_budget::should_count_as_failure`、
                // 単体試験 3 件で契約を固定）。
                crate::println!(
                    "[CSSDBG] @font-face '{}' <- {} 非同期取得へ投入（描画は待たない）",
                    ff.family, url
                );
            }
        }
    }

    /// DOM ブリッジが dirty なら、スクリプトを再実行せずに再レイアウトして反映する。
    /// クリックリスナや初期スクリプトによる textContent/style/class 変更を画面へ出す。
    pub fn relayout_if_dom_dirty(&mut self, top_offset: i32, win_w: u32, win_h: u32) {
        let dirty = {
            let dom = self.js_runtime.dom.clone();
            // dirty は parse_and_layout → to_dom_node() 後に b.dirty=false でクリアされる。
            // ここで先にクリアすると bridge_is_source 判定が false になり
            // to_dom_node() が呼ばれないため、遅延クリア方式に変更した。
            let d = dom.borrow().dirty;
            d
        };
        if !dirty {
            return;
        }
        let html = self.last_html.clone();
        // executing_script を立ててスクリプト再実行を抑止（apply_overrides 経路で再描画）。
        let was_executing = self.executing_script;
        self.executing_script = true;
        // 【2026-07-27診断】DOM 変更由来の再レイアウト回数を可視化する。
        {
            static N: core::sync::atomic::AtomicU32 = core::sync::atomic::AtomicU32::new(0);
            let n = N.fetch_add(1, core::sync::atomic::Ordering::Relaxed);
            if n < 8 {
                crate::warn!("[LAYOUT][SRC] dom-dirty relayout #{}", n + 1);
            }
        }
        self.parse_and_layout(&html, None, top_offset, win_w, win_h);
        self.executing_script = was_executing;
        self.dirty = true;
        self.dirty_reason = "layout.rs:1190";
    }

    /// アニメーションの算出値を、描画要素へ直接書き込む（軽量再ペイント経路）。
    ///
    /// 対象要素が見つからない、値を解釈できない、対応していないプロパティが
    /// 含まれる場合は `false` を返す。呼び出し側は従来の再レイアウト経路へ
    /// フォールバックすること（**部分適用のまま画面に出さない**ため、
    /// 1 つでも適用できなければフレーム全体をやり直す）。
    fn apply_paint_only_values(&mut self, computed: &[(String, String, String)]) -> bool {
        for (eid, prop, val) in computed {
            let mut applied_any = false;
            let mut failed = false;
            for el in self.elements.iter_mut() {
                if el.element_id != *eid {
                    continue;
                }
                let ok = match prop.trim().to_ascii_lowercase().as_str() {
                    "color" => match crate::os_lib::css::parse_color(val) {
                        Some(c) => {
                            el.color = c;
                            true
                        }
                        None => false,
                    },
                    "background-color" => match crate::os_lib::css::parse_color(val) {
                        Some(c) => {
                            el.bg_color = Some(c);
                            true
                        }
                        None => false,
                    },
                    "opacity" => match val.trim().parse::<f32>() {
                        Ok(f) if f.is_finite() => {
                            el.opacity = (f.clamp(0.0, 1.0) * 255.0) as u8;
                            true
                        }
                        _ => false,
                    },
                    // 【2026-08-02 発見・修正】`transform` は書き込み先
                    // （`el.transform_tx/ty`・`scale`・`rotate`・`skew`）が
                    // **既に存在する**のに、ここで `false` を返して
                    // 全再レイアウト（HTML 再パース＋2403 ルール再カスケード、
                    // 実測約 6 秒）へ落としていた。
                    //
                    // 実サイトの `fadeInUp` 系は `opacity` と `transform: translateY()`
                    // を組みで動かすため、**必ず**この分岐に当たっていた。
                    // 軽量再ペイント経路が用意されているのに一度も使われない状態。
                    //
                    // 通常のレイアウト時と同じ `parse_transform` を使うので、
                    // 解釈は完全に一致する。
                    "transform" => {
                        let (tx, ty, sx, sy, rot, skx, sky) =
                            super::helpers::parse_transform(Some(val.as_str()));
                        el.transform_tx = tx;
                        el.transform_ty = ty;
                        el.transform_scale_x = sx;
                        el.transform_scale_y = sy;
                        el.transform_rotate_deg = rot;
                        el.transform_skew_x = skx;
                        el.transform_skew_y = sky;
                        true
                    }
                    "border-color"
                    | "border-top-color"
                    | "border-right-color"
                    | "border-bottom-color"
                    | "border-left-color"
                    | "outline-color" => match crate::os_lib::css::parse_color(val) {
                        Some(c) => {
                            el.border_color = Some(c);
                            true
                        }
                        None => false,
                    },
                    "text-decoration-color" => match crate::os_lib::css::parse_color(val) {
                        Some(c) => {
                            el.decoration_color = Some(c);
                            true
                        }
                        None => false,
                    },
                    "caret-color" => match crate::os_lib::css::parse_color(val) {
                        Some(c) => {
                            el.caret_color = Some(c);
                            true
                        }
                        None => false,
                    },
                    "accent-color" => match crate::os_lib::css::parse_color(val) {
                        Some(c) => {
                            el.accent_color = Some(c);
                            true
                        }
                        None => false,
                    },
                    // 再ペイント扱いだが直接書き込む先が無いプロパティ
                    // （box-shadow 等）は再レイアウトへ委ねる。
                    _ => false,
                };
                if ok {
                    applied_any = true;
                } else {
                    failed = true;
                }
            }
            if failed || !applied_any {
                return false;
            }
        }
        true
    }

    /// 現在時刻（ms）。カーネルティック（10ms 単位）から算出。
    pub(crate) fn now_ms(&self) -> f32 {
        (crate::kernel::timer::get_ticks() as f32) * 10.0
    }

    /// parse_and_layout 後に呼ばれ、各 id 付き要素の算出スタイルから
    /// `transition` / `animation` 指定を読み取り、アニメーションエンジンへ反映する。
    /// - animation: 新規 @keyframes アニメを登録（同名は重複無視）。
    /// - transition: 監視対象プロパティの値が前回から変化していたらトランジション開始。
    fn sync_animations(
        &mut self,
        collected: &[(String, alloc::vec::Vec<(String, String)>)],
        stylesheet: &crate::os_lib::css::StyleSheet,
    ) {
        // アニメ駆動の再レイアウト中は、補間値が computed に出てくるため
        // トランジション検出も prev 更新も行わない（誤発火・状態汚染の防止）。
        if self.in_anim_relayout {
            return;
        }
        let now = self.now_ms();

        for (eid, props) in collected {
            // プロパティマップ化。
            let mut map: alloc::collections::BTreeMap<&str, &str> =
                alloc::collections::BTreeMap::new();
            for (k, v) in props {
                map.insert(k.as_str(), v.as_str());
            }

            // `transition` ショートハンドが無くても `transition-property`/`-duration`/
            // `-delay`/`-timing-function` の個別ロングハンドだけが指定されているケースに
            // 対応する。以前はショートハンドしか見ておらず、この一般的な書き方（生成された
            // CSS やコンポーネントスタイルでよく使われる）では常に無視されていた。
            // ロングハンドをショートハンド相当の文字列へ合成し、既存の `parse_transition`
            // をそのまま再利用する。
            fn synthesize_transition_shorthand(
                map: &alloc::collections::BTreeMap<&str, &str>,
            ) -> String {
                let Some(prop_list) = map.get("transition-property") else {
                    return String::new();
                };
                let props: alloc::vec::Vec<&str> =
                    prop_list.split(',').map(|s| s.trim()).collect();
                if props.is_empty() || props[0].is_empty() {
                    return String::new();
                }
                fn split_list(v: Option<&str>) -> alloc::vec::Vec<&str> {
                    v.map(|s| s.split(',').map(|s| s.trim()).collect())
                        .unwrap_or_default()
                }
                let durations = split_list(map.get("transition-duration").copied());
                let delays = split_list(map.get("transition-delay").copied());
                let timings = split_list(map.get("transition-timing-function").copied());
                let get_cyclic = |v: &alloc::vec::Vec<&str>, i: usize, default: &str| -> String {
                    if v.is_empty() {
                        String::from(default)
                    } else {
                        String::from(v[i % v.len()])
                    }
                };
                props
                    .iter()
                    .enumerate()
                    .map(|(i, prop)| {
                        alloc::format!(
                            "{} {} {} {}",
                            prop,
                            get_cyclic(&durations, i, "0s"),
                            get_cyclic(&timings, i, "ease"),
                            get_cyclic(&delays, i, "0s"),
                        )
                    })
                    .collect::<alloc::vec::Vec<alloc::string::String>>()
                    .join(", ")
            }
            let transition_str = map
                .get("transition")
                .map(|s| String::from(*s))
                .unwrap_or_else(|| synthesize_transition_shorthand(&map));
            // `transition` と同種のバグ: `animation` ショートハンドが無くても
            // `animation-name`/`-duration`/`-delay`/`-timing-function`/`-iteration-count`/
            // `-direction`/`-fill-mode` の個別ロングハンドだけが指定されているケースに対応する。
            fn synthesize_animation_shorthand(
                map: &alloc::collections::BTreeMap<&str, &str>,
            ) -> String {
                let Some(name_list) = map.get("animation-name") else {
                    return String::new();
                };
                let names: alloc::vec::Vec<&str> =
                    name_list.split(',').map(|s| s.trim()).collect();
                if names.is_empty() || names[0].is_empty() || names[0] == "none" {
                    return String::new();
                }
                fn split_list(v: Option<&str>) -> alloc::vec::Vec<&str> {
                    v.map(|s| s.split(',').map(|s| s.trim()).collect())
                        .unwrap_or_default()
                }
                let durations = split_list(map.get("animation-duration").copied());
                let delays = split_list(map.get("animation-delay").copied());
                let timings = split_list(map.get("animation-timing-function").copied());
                let iterations = split_list(map.get("animation-iteration-count").copied());
                let directions = split_list(map.get("animation-direction").copied());
                let fills = split_list(map.get("animation-fill-mode").copied());
                let play_states = split_list(map.get("animation-play-state").copied());
                let get_cyclic = |v: &alloc::vec::Vec<&str>, i: usize, default: &str| -> String {
                    if v.is_empty() {
                        String::from(default)
                    } else {
                        String::from(v[i % v.len()])
                    }
                };
                names
                    .iter()
                    .enumerate()
                    .map(|(i, name)| {
                        alloc::format!(
                            "{} {} {} {} {} {} {} {}",
                            name,
                            get_cyclic(&durations, i, "0s"),
                            get_cyclic(&timings, i, "ease"),
                            get_cyclic(&delays, i, "0s"),
                            get_cyclic(&iterations, i, "1"),
                            get_cyclic(&directions, i, "normal"),
                            get_cyclic(&fills, i, "none"),
                            get_cyclic(&play_states, i, "running"),
                        )
                    })
                    .collect::<alloc::vec::Vec<alloc::string::String>>()
                    .join(", ")
            }
            let animation_str = map
                .get("animation")
                .map(|s| String::from(*s))
                .unwrap_or_else(|| synthesize_animation_shorthand(&map));

            // --- animation --- カンマ区切りで複数のアニメーションを同時指定できる
            // （例: `animation: fade 1s, bounce 2s infinite;`）ため、全項目を処理する。
            if !animation_str.is_empty() {
                let specs = crate::os_lib::css::parse_animations(&animation_str);
                // `animation-name` が別名へ切り替わった場合、その別名がもう存在しない
                // 古いアニメーションを取り消す（`iterations:infinite` だと自然完了しないため
                // 放置すると永久に走り続けてしまうバグがあった）。
                let current_names: alloc::vec::Vec<alloc::string::String> =
                    specs.iter().map(|s| s.name.clone()).collect();
                self.anim_engine.retain_animation_names(eid, &current_names);
                for spec in specs {
                    if let Some(kf) = stylesheet
                        .keyframes
                        .iter()
                        .find(|k| k.name == spec.name)
                        .cloned()
                    {
                        self.anim_engine.start_animation(eid, spec, kf, now);
                    }
                }
            }

            // --- transition ---
            if !transition_str.is_empty() {
                let specs = crate::os_lib::css::parse_transition(&transition_str);
                let prev = self.anim_prev_values.get(eid).cloned().unwrap_or_default();
                for ts in &specs {
                    // "all" は監視プロパティ群を限定できないので主要プロパティに展開。
                    let target_props: alloc::vec::Vec<String> = if ts.property == "all" {
                        map.keys()
                            .filter(|k| crate::os_lib::css::is_animatable_property(k))
                            .map(|k| String::from(*k))
                            .collect()
                    } else {
                        alloc::vec![ts.property.clone()]
                    };
                    for tp in target_props {
                        if let Some(new_val) = map.get(tp.as_str()) {
                            if let Some(old_val) = prev.get(&tp) {
                                if old_val != new_val {
                                    self.anim_engine.start_transition(
                                        eid,
                                        &tp,
                                        old_val,
                                        new_val,
                                        ts.clone(),
                                        now,
                                    );
                                }
                            }
                        }
                    }
                }
            }

            // 今回の値を prev として保存（次回の変化検出用）。
            let mut snapshot: alloc::collections::BTreeMap<String, String> =
                alloc::collections::BTreeMap::new();
            for (k, v) in props {
                snapshot.insert(k.clone(), v.clone());
            }
            self.anim_prev_values.insert(eid.clone(), snapshot);
            self.anim_specs
                .insert(eid.clone(), (transition_str, animation_str));
        }
    }

    /// レンダラが毎フレーム呼ぶ。進行中のアニメ/トランジションを現在時刻で評価し、
    /// 算出値を DOM ブリッジの style に焼き込んで再描画させる。
    /// 戻り値: アニメーションが進行中で次フレームも再描画が必要なら true。
    pub fn tick_animations(&mut self, top_offset: i32) -> bool {
        if !self.anim_engine.is_active() {
            return false;
        }
        let now = self.now_ms();
        let _active = self.anim_engine.tick(now);
        let computed = self.anim_engine.computed.clone();

        // 【2026-07-28】軽量再ペイント経路。
        // このフレームで変化したのが色・不透明度など**ボックスを変えない**プロパティ
        // だけなら、カスケードもレイアウトもやり直さず算出値を差し替えて再描画する。
        // 実サイトではレイアウト 1 回が 10 秒以上かかるため、これをやらないと
        // 描いたフレームが画面に出る前に次のレイアウトが始まり永久に収束しない。
        //
        // なお CSS アニメーションは本来インラインスタイルを書き換えない（実ブラウザでも
        // `element.style` には現れない）。この経路では DOM ブリッジを一切触らないので、
        // ブリッジの dirty を立てずに済み、`relayout_if_dom_dirty` の連鎖も起きない。
        let paint_applied = if computed.is_empty() {
            false
        } else {
            let scope = super::repaint_scope::scope_for(computed.iter().map(|(_, p, _)| p.as_str()));
            scope == super::repaint_scope::RepaintScope::PaintOnly
                && self.apply_paint_only_values(&computed)
        };

        // 算出値を DOM ブリッジへ反映（軽量経路が使えなかったときのみ）。
        if !computed.is_empty() && !paint_applied {
            let mut dom = self.js_runtime.dom.borrow_mut();
            for (eid, prop, val) in &computed {
                if let Some(idx) = dom.get_element_by_id(eid) {
                    dom.set_style(idx, prop, val);
                }
            }
            // set_style が dirty=true を立てる。その dirty を parse_and_layout 内の
            // to_dom_node() 呼び出しに使うため、ここでは *クリアしない*。
            // to_dom_node() 後に b.dirty=false されるので無限ループも起きない。
            // in_anim_relayout=true により sync_animations は抑止されるため
            // prev 値が汚染されることもない。
        }
        // `animationend`/`transitionend`/`animationstart`（CSSアニメーション/
        // トランジションが自動でライフサイクルイベントを発火する経路が丸ごと
        // 未対応だった。`AnimationEvent`/`TransitionEvent`コンストラクタ自体は
        // 既に実装済みで手動dispatchは可能だったが、実際の開始/完了を検知して
        // 自動発火する仕組みが無かった）。`AnimationEngine::tick()`が検知した
        // ライフサイクルイベントを、要素IDからDOMノードindexへ解決して実際に
        // ディスパッチする。
        let lifecycle_events = self.anim_engine.lifecycle_events.clone();
        for (eid, event_type, name) in &lifecycle_events {
            let idx_opt = self.js_runtime.dom.borrow().get_element_by_id(eid);
            if let Some(idx) = idx_opt {
                let key = if *event_type == "transitionend" {
                    "propertyName"
                } else {
                    "animationName"
                };
                self.js_runtime.dispatch_event_with(
                    idx,
                    event_type,
                    &[(
                        alloc::string::String::from(key),
                        crate::os_lib::js::value::Value::str(name.clone()),
                    )],
                );
            }
        }
        // 【2026-08-02 発見・修正】算出値が 1 つも無いフレームで全再レイアウトしていた。
        //
        // 実測: `animation relayout` が 5 回起きているのに、
        // 「軽量経路が使えなかった理由」を出す診断は **1 回も出なかった**。
        // つまり `computed` が空のまま下の全再レイアウト（HTML 再パース＋
        // 2403 ルールの再カスケード、実測約 6 秒）へ落ちていた。
        //
        // 算出値が無いということは、このフレームでアニメーションが
        // 変える値が何も無いということ。反映すべきものが無いので
        // レイアウトをやり直す理由も無い。
        //
        // ライフサイクルイベント（`animationend` 等）のハンドラが DOM を
        // 変更した場合は、ブリッジの dirty 経由で
        // `relayout_if_dom_dirty` が拾うため取りこぼさない。
        if computed.is_empty() {
            return true;
        }

        // 軽量経路が成立したフレームはここで完了。再描画だけ要求して戻る。
        if paint_applied {
            self.dirty = true;
            self.dirty_reason = "layout.rs:1518";
            return true;
        }

        // アニメーション由来の再レイアウトは、現状 HTML 再パース + 全ルール再カスケードを
        // 伴うため 1 フレームあたりのコストが極めて高い。実測コストが 500ms を超える場合、
        // 再レイアウトが描画を占有して「描いた内容が画面に出る前に次のレイアウトが始まる」
        // 状態に陥る。そこで実測時間の 3 倍のクールダウンを設け、デューティを 25% に抑える。
        // （本来の解はアニメ値の差し替えのみで再ペイントする軽量経路。spec/TODO.md 参照）
        let since = self.now_ms() - self.last_anim_relayout_end_ms;
        match super::anim_budget::should_skip_relayout(self.last_anim_layout_ms, since) {
            Ok(true) => {
                // アニメーションは継続中。値は DOM ブリッジに反映済みなので
                // 次に許可された再レイアウトでまとめて反映される。
                return true;
            }
            Ok(false) => {}
            Err(_) => {
                // 判定不能。エラーは anim_budget 側でログ済み。
                // 間引かない（従来動作）方向にフォールバックし、計測値をリセットする。
                self.last_anim_layout_ms = 0.0;
                self.last_anim_relayout_end_ms = 0.0;
            }
        }

        // 再レイアウト（アニメ値を反映）。in_anim_relayout を立てて sync_animations 抑止。
        let html = self.last_html.clone();
        let was_executing = self.executing_script;
        self.executing_script = true;
        self.in_anim_relayout = true;
        // 【2026-07-27診断】再レイアウトの誘発元を切り分ける。
        // CSS アニメーションが 1 フレームごとに全再レイアウト（2403 ルールで
        // 約 46 秒）を要求していると、描画が完了する前に次の再レイアウトが
        // 始まり、描いた内容が画面に残らない。
        {
            static N: core::sync::atomic::AtomicU32 = core::sync::atomic::AtomicU32::new(0);
            let n = N.fetch_add(1, core::sync::atomic::Ordering::Relaxed);
            if n < 8 {
                crate::warn!("[LAYOUT][SRC] animation relayout #{}", n + 1);
            }
        }
        let t0 = self.now_ms();
        self.parse_and_layout(&html, None, top_offset, self.win_w, self.win_h);
        let end = self.now_ms();
        self.last_anim_layout_ms = end - t0;
        self.last_anim_relayout_end_ms = end;
        self.in_anim_relayout = false;
        self.executing_script = was_executing;
        self.dirty = true;
        self.dirty_reason = "layout.rs:1566";
        true
    }

    /// 現在のページ背景色の明度から、デフォルトの (文字色, リンク色) を返す。
    /// 明るい背景なら濃い文字＋濃い青リンク、暗い背景なら明るい文字＋シアンリンク。
    fn default_text_colors(&self) -> (u32, u32) {
        let bg = self.page_bg_color.unwrap_or(0xFFFFFFFF);
        let r = (bg >> 16) & 0xFF;
        let g = (bg >> 8) & 0xFF;
        let b = bg & 0xFF;
        let luma = (299 * r + 587 * g + 114 * b) / 1000;
        if luma > 140 {
            // 明るい背景
            (0xFF1A1A1A, 0xFF1A5FB4)
        } else {
            // 暗い背景（Dracula 系）
            (0xFFF8F8F2, 0xFF8BE9FD)
        }
    }

    fn flatten_layout(
        &mut self,
        layout: &crate::os_lib::layout::LayoutBox,
        current_form_action: &str,
        current_form_method: &str,
        current_href: &str,
        current_font_bold: bool,
        current_font_italic: bool,
        current_underline: bool,
        current_line_through: bool,
        current_color: Option<u32>,
        current_font_size: u32,
        parent_id: &str,
        list_state: Option<(bool, u32)>,
        parent_tag: &str,
        current_decoration_color: Option<u32>,
        current_decoration_style: String,
        current_decoration_thickness: i32,
        current_decoration_underline_offset: i32,
        current_overline: bool,
        current_pointer_events_none: bool,
    ) {
        // 暴走防止: 病的なページ（巨大／深い入れ子）でも RenderElement の生成数を上限で
        // 打ち切り、ヒープ枯渇を未然に防ぐ。上限到達後は以降の要素を無視する。
        if self.elements.len() >= MAX_RENDER_ELEMENTS {
            return;
        }

        fn extract_hover_color(styled: &crate::os_lib::css::StyledNode, key: &str) -> Option<u32> {
            styled
                .hover_values
                .as_ref()
                .and_then(|h| h.get(key).and_then(|s| crate::os_lib::css::parse_color(s)))
        }

        fn extract_color(
            styled: &crate::os_lib::css::StyledNode,
            key1: &str,
            key2: &str,
        ) -> Option<u32> {
            let val = styled
                .specified_values
                .get(key1)
                .or_else(|| styled.specified_values.get(key2))?;
            // まずそのまま解析
            if let Some(c) = crate::os_lib::css::parse_color(val) {
                // 【2026-07-28】完全透明（アルファ 0）は「背景なし」と等価なので None を返す。
                // `parse_color` は不透明色に必ず 0xFF を立てるため、アルファ 0 は
                // `transparent` / `rgba(...,0)` を明示指定した場合だけを意味する。
                // これを色として返すと、描画側の「アルファ 0x00 は不透明として扱う」
                // 互換規則（`spec/alpha_compositing.md`）に拾われ **不透明な黒**になる。
                // 実際 `.nav-list` が `bg=0x00000000` で右半分を黒く塗り潰していた。
                if (c >> 24) & 0xFF == 0 {
                    return None;
                }
                return Some(c);
            }
            // `background: url(...) #color` / `background: #color url(...)` のような
            // ショートハンドから色トークンだけを取り出す
            for token in val.split_whitespace() {
                if token.starts_with("url(")
                    || token == "no-repeat"
                    || token == "repeat"
                    || token == "repeat-x"
                    || token == "repeat-y"
                    || token == "cover"
                    || token == "contain"
                    || token == "center"
                    || token == "top"
                    || token == "bottom"
                    || token == "left"
                    || token == "right"
                    || token.ends_with("px")
                    || token.ends_with('%')
                {
                    continue;
                }
                if let Some(c) = crate::os_lib::css::parse_color(token) {
                    return Some(c);
                }
            }
            None
        }

        fn extract_hover_color_alt(
            styled: &crate::os_lib::css::StyledNode,
            key1: &str,
            key2: &str,
        ) -> Option<u32> {
            styled.hover_values.as_ref().and_then(|h| {
                h.get(key1)
                    .or_else(|| h.get(key2))
                    .and_then(|s| crate::os_lib::css::parse_color(s))
            })
        }

        fn extract_focus_color(styled: &crate::os_lib::css::StyledNode, key: &str) -> Option<u32> {
            styled
                .focus_values
                .as_ref()
                .and_then(|h| h.get(key).and_then(|s| crate::os_lib::css::parse_color(s)))
        }

        fn extract_focus_color_alt(
            styled: &crate::os_lib::css::StyledNode,
            key1: &str,
            key2: &str,
        ) -> Option<u32> {
            styled.focus_values.as_ref().and_then(|h| {
                h.get(key1)
                    .or_else(|| h.get(key2))
                    .and_then(|s| crate::os_lib::css::parse_color(s))
            })
        }

        fn extract_active_color(styled: &crate::os_lib::css::StyledNode, key: &str) -> Option<u32> {
            styled
                .active_values
                .as_ref()
                .and_then(|h| h.get(key).and_then(|s| crate::os_lib::css::parse_color(s)))
        }

        fn extract_active_color_alt(
            styled: &crate::os_lib::css::StyledNode,
            key1: &str,
            key2: &str,
        ) -> Option<u32> {
            styled.active_values.as_ref().and_then(|h| {
                h.get(key1)
                    .or_else(|| h.get(key2))
                    .and_then(|s| crate::os_lib::css::parse_color(s))
            })
        }

        fn extract_marker_color(styled: &crate::os_lib::css::StyledNode) -> Option<u32> {
            styled
                .specified_values
                .get("x-marker-color")
                .and_then(|s| crate::os_lib::css::parse_color(s))
        }

        fn extract_marker_font_size(styled: &crate::os_lib::css::StyledNode) -> Option<u32> {
            styled
                .specified_values
                .get("x-marker-font-size")
                .and_then(|s| parse_font_size(s))
        }

        fn extract_marker_content(styled: &crate::os_lib::css::StyledNode) -> Option<String> {
            styled.specified_values.get("x-marker-content").cloned()
        }

        fn extract_placeholder_color(styled: &crate::os_lib::css::StyledNode) -> Option<u32> {
            styled
                .specified_values
                .get("x-placeholder-color")
                .and_then(|s| crate::os_lib::css::parse_color(s))
        }

        fn get_text_content(l: &crate::os_lib::layout::LayoutBox) -> String {
            let mut text = String::new();
            match &l.box_type {
                crate::os_lib::layout::BoxType::BlockNode(styled)
                | crate::os_lib::layout::BoxType::InlineNode(styled)
                | crate::os_lib::layout::BoxType::InlineBlockNode(styled) => {
                    if let crate::os_lib::dom::NodeType::Text(t) = &styled.node.node_type {
                        text.push_str(t);
                    }
                }
                _ => {}
            }
            for child in &l.children {
                text.push_str(&get_text_content(child));
            }
            text
        }

        // <select> 配下の <option> を (value, ラベル) で収集する。
        // value 属性が無ければラベルテキストを value として用いる（HTML 仕様準拠）。
        // 戻り値: (options, selected_index)。selected 属性付き option が無ければ先頭を選択。
        fn collect_select_options(
            l: &crate::os_lib::layout::LayoutBox,
        ) -> (alloc::vec::Vec<(String, String)>, usize) {
            let mut opts: alloc::vec::Vec<(String, String)> = alloc::vec::Vec::new();
            let mut selected_idx = 0usize;
            fn walk(
                l: &crate::os_lib::layout::LayoutBox,
                opts: &mut alloc::vec::Vec<(String, String)>,
                selected_idx: &mut usize,
            ) {
                if let crate::os_lib::layout::BoxType::BlockNode(styled)
                | crate::os_lib::layout::BoxType::InlineNode(styled)
                | crate::os_lib::layout::BoxType::InlineBlockNode(styled) = &l.box_type
                {
                    if let crate::os_lib::dom::NodeType::Element {
                        tag_name,
                        attributes,
                        ..
                    } = &styled.node.node_type
                    {
                        if tag_name == "option" {
                            let label = String::from(get_text_content(l).trim());
                            let value = attributes
                                .get("value")
                                .cloned()
                                .unwrap_or_else(|| label.clone());
                            if attributes.contains_key("selected") {
                                *selected_idx = opts.len();
                            }
                            opts.push((value, label));
                            return; // option 配下はラベルとして消費済み
                        }
                    }
                }
                for child in &l.children {
                    walk(child, opts, selected_idx);
                }
            }
            walk(l, &mut opts, &mut selected_idx);
            (opts, selected_idx)
        }

        // <label> 配下に内包された最初の input/select/textarea の id を返す。
        // <label><input id='x'> ...</label> のような暗黙的関連付け用。
        fn find_labelable_descendant_id(l: &crate::os_lib::layout::LayoutBox) -> Option<String> {
            if let crate::os_lib::layout::BoxType::BlockNode(styled)
            | crate::os_lib::layout::BoxType::InlineNode(styled)
            | crate::os_lib::layout::BoxType::InlineBlockNode(styled) = &l.box_type
            {
                if let crate::os_lib::dom::NodeType::Element {
                    tag_name,
                    attributes,
                    ..
                } = &styled.node.node_type
                {
                    if (tag_name == "input" || tag_name == "select" || tag_name == "textarea")
                        && attributes.contains_key("id")
                    {
                        return attributes.get("id").cloned();
                    }
                }
            }
            for child in &l.children {
                if let Some(id) = find_labelable_descendant_id(child) {
                    return Some(id);
                }
            }
            None
        }

        match &layout.box_type {
            crate::os_lib::layout::BoxType::BlockNode(styled)
            | crate::os_lib::layout::BoxType::InlineNode(styled)
            | crate::os_lib::layout::BoxType::InlineBlockNode(styled)
            | crate::os_lib::layout::BoxType::FlexNode(styled)
            | crate::os_lib::layout::BoxType::TableNode(styled)
            | crate::os_lib::layout::BoxType::TableRowGroupNode(styled)
            | crate::os_lib::layout::BoxType::TableRowNode(styled)
            | crate::os_lib::layout::BoxType::TableCellNode(styled) => {
                match &styled.node.node_type {
                    crate::os_lib::dom::NodeType::Element {
                        tag_name,
                        attributes,
                        ..
                    } => {
                        // body/html 要素のページ全体背景色・文字色をキャプチャ
                        if tag_name == "body" || tag_name == "html" {
                            if self.page_bg_color.is_none() {
                                let bg = styled
                                    .specified_values
                                    .get("background-color")
                                    .or_else(|| styled.specified_values.get("background"))
                                    .and_then(|s| crate::os_lib::css::parse_color(s));
                                if bg.is_some() {
                                    self.page_bg_color = bg;
                                }
                            }
                            if self.page_text_color.is_none() {
                                let tc = styled
                                    .specified_values
                                    .get("color")
                                    .and_then(|s| crate::os_lib::css::parse_color(s));
                                if tc.is_some() {
                                    self.page_text_color = tc;
                                }
                            }
                        }

                        let mut next_form_action = String::from(current_form_action);
                        let mut next_form_method = String::from(current_form_method);
                        let mut next_href = String::from(current_href);
                        if tag_name == "form" {
                            if let Some(action) = attributes.get("action") {
                                next_form_action = action.clone();
                            }
                            if let Some(method) = attributes.get("method") {
                                next_form_method = method.clone();
                            }
                        }
                        if tag_name == "a" {
                            if let Some(h) = attributes.get("href") {
                                next_href = h.clone();
                            }
                        }

                        // `border-radius` 系の値は、`%` 指定（例: 正円アバターの定番
                        // `border-radius: 50%`）を要素サイズ（`container_w`）に対する
                        // 割合として解決する必要があるため、要素サイズが確定する
                        // `container_w`/`container_h` 計算後（本関数の下方）まで
                        // 生の CSS 文字列のまま保持しておく（2026-07-14。以前は
                        // ここで即座に px 解析しており `%` は常に「暫定で 0」に
                        // 切り捨てられ、`border-radius: 50%` 等が静かに無効化されて
                        // いたバグを修正）。
                        let border_radius_shorthand =
                            styled.specified_values.get("border-radius").cloned();
                        let border_radius_tl =
                            styled.specified_values.get("border-top-left-radius").cloned();
                        let border_radius_tr =
                            styled.specified_values.get("border-top-right-radius").cloned();
                        let border_radius_br =
                            styled.specified_values.get("border-bottom-right-radius").cloned();
                        let border_radius_bl =
                            styled.specified_values.get("border-bottom-left-radius").cloned();

                        // 継承スタイルコンテキストを計算
                        let mut next_font_bold = current_font_bold;
                        let mut next_font_italic = current_font_italic;
                        let mut next_underline = current_underline;
                        let mut next_line_through = current_line_through;
                        let mut next_overline = current_overline;
                        let mut next_color: Option<u32> = current_color;
                        let mut next_font_size: u32 = current_font_size;
                        let mut next_decoration_color = current_decoration_color;
                        let mut next_decoration_style = current_decoration_style.clone();
                        let mut next_decoration_thickness = current_decoration_thickness;
                        let mut next_decoration_underline_offset = current_decoration_underline_offset;
                        // pointer-events: none は継承する（inherited）。子孫で明示的に auto に
                        // 戻すケース（`pointer-events:auto` による部分的な復元）は非対応の簡略実装。
                        let mut next_pointer_events_none = current_pointer_events_none;
                        if let Some(pe) = styled.value("pointer-events") {
                            let pe_l = pe.trim().to_lowercase();
                            if pe_l == "none" {
                                next_pointer_events_none = true;
                            } else if pe_l == "auto" {
                                next_pointer_events_none = false;
                            }
                        }
                        if let Some(dc) = styled.value("text-decoration-color") {
                            if let Some(c) = crate::os_lib::css::parse_color(dc.trim()) {
                                next_decoration_color = Some(c);
                            }
                        }
                        if let Some(ds) = styled.value("text-decoration-style") {
                            let ds_l = ds.trim().to_lowercase();
                            if matches!(ds_l.as_str(), "solid" | "dotted" | "dashed" | "wavy" | "double") {
                                next_decoration_style = ds_l;
                            }
                        }
                        if let Some(dt) = styled.value("text-decoration-thickness") {
                            let dt_t = dt.trim();
                            if !dt_t.eq_ignore_ascii_case("auto") && !dt_t.eq_ignore_ascii_case("from-font") {
                                next_decoration_thickness = parse_px_val(dt_t).max(1);
                            }
                        }
                        if let Some(uo) = styled.value("text-underline-offset") {
                            let uo_t = uo.trim();
                            if !uo_t.eq_ignore_ascii_case("auto") {
                                next_decoration_underline_offset = parse_px_val(uo_t);
                            }
                        }
                        // `text-decoration-line`（CSS Text Decoration Module Level 3の
                        // ロングハンド。`-color`/`-style`/`-thickness` は既に対応済みだったが
                        // 肝心の `-line` 単体指定だけが完全に無視され、`text-decoration`
                        // ショートハンド経由でしか下線等を付けられなかった）。
                        if let Some(tdl) = styled.value("text-decoration-line") {
                            let (u, lt, ov, is_none, _, _) = parse_text_decoration_shorthand(&tdl);
                            if is_none {
                                next_underline = false;
                                next_line_through = false;
                                next_overline = false;
                            } else {
                                if u {
                                    next_underline = true;
                                }
                                if lt {
                                    next_line_through = true;
                                }
                                if ov {
                                    next_overline = true;
                                }
                            }
                        }
                        if let Some(fw) = styled.value("font-weight") {
                            let fw_l = fw.trim().to_lowercase();
                            if fw_l == "bold"
                                || fw_l == "bolder"
                                || fw_l.parse::<u32>().unwrap_or(400) >= 700
                            {
                                next_font_bold = true;
                            } else if fw_l == "normal" || fw_l.parse::<u32>().unwrap_or(400) < 700 {
                                next_font_bold = false;
                            }
                        }
                        if let Some(fs) = styled.value("font-style") {
                            let fs_l = fs.trim().to_lowercase();
                            if fs_l == "italic" || fs_l == "oblique" {
                                next_font_italic = true;
                            } else if fs_l == "normal" {
                                next_font_italic = false;
                            }
                        }
                        if let Some(td) = styled.value("text-decoration") {
                            let (u, lt, ov, is_none, style, color) =
                                parse_text_decoration_shorthand(&td);
                            if is_none {
                                next_underline = false;
                                next_line_through = false;
                                next_overline = false;
                            } else {
                                if u {
                                    next_underline = true;
                                }
                                if lt {
                                    next_line_through = true;
                                }
                                if ov {
                                    next_overline = true;
                                }
                                if let Some(s) = style {
                                    next_decoration_style = s;
                                }
                                if let Some(c) = color {
                                    next_decoration_color = Some(c);
                                }
                            }
                        }
                        if tag_name == "b" || tag_name == "strong" {
                            next_font_bold = true;
                        }
                        if tag_name == "i" || tag_name == "em" {
                            next_font_italic = true;
                        }
                        if tag_name == "u" {
                            next_underline = true;
                        }
                        if tag_name == "s" || tag_name == "del" || tag_name == "strike" {
                            next_line_through = true;
                        }
                        let effective_color_str = styled
                            .value("-webkit-text-fill-color")
                            .or_else(|| styled.value("color"));
                        if let Some(c_str) = effective_color_str {
                            if let Some(c_val) = parse_color(&c_str) {
                                let is_bg_clip_text = styled.value("background-clip").as_deref().map(str::trim) == Some("text")
                                    || styled.value("-webkit-background-clip").as_deref().map(str::trim) == Some("text");
                                if (c_val >> 24) == 0 && is_bg_clip_text {
                                    if next_color.is_none() {
                                        next_color = Some(0xFF000000);
                                    }
                                } else {
                                    next_color = Some(c_val);
                                }
                            }
                        }
                        if let Some(sz_str) = styled.value("font-size") {
                            if let Some(sz_val) = parse_font_size(&sz_str) {
                                next_font_size = sz_val;
                            }
                        }
                        let aspect_ratio_val = styled
                            .value("aspect-ratio")
                            .and_then(|v| parse_aspect_ratio(&v));

                        let is_hr = tag_name == "hr";
                        let is_img = tag_name == "img";
                        // 【2026-09-03】`<canvas>` の 2D コンテキスト id。
                        //
                        // `getContext("2d")` が呼ばれると JS 側が
                        // `_c2d_id` 属性へ registry の id を書く。ここで拾って
                        // `RenderElement` へ載せ、描画時に `Surface` の内容を
                        // 要素の矩形へ転送する。
                        //
                        // DOM 属性を経由するのは、レイアウトが `StyledNode`
                        // しか見ないため。JS のオブジェクトを直接引くと
                        // 層をまたぐ依存になる。
                        let canvas_ctx_id: Option<u32> = if tag_name == "canvas" {
                            attributes
                                .get("_c2d_id")
                                .and_then(|s| s.trim().parse::<u32>().ok())
                        } else {
                            None
                        };
                        let is_video = tag_name == "video";
                        // <progress>/<meter>（HTML5 ネイティブ進捗/計量バー）。`<img>`/`<video>` と
                        // 同じ「置換要素」として扱い、専用の RenderElement を構築する。
                        // <meter> の low/high/optimum による色分けは非対応（常に同じ色で描画）。
                        let is_progress = tag_name == "progress" || tag_name == "meter";
                        let progress_ratio: f32 = if is_progress {
                            let parse_f32 = |k: &str, default: f32| -> f32 {
                                attributes
                                    .get(k)
                                    .and_then(|v| v.trim().parse::<f32>().ok())
                                    .unwrap_or(default)
                            };
                            let min = if tag_name == "meter" { parse_f32("min", 0.0) } else { 0.0 };
                            let max = parse_f32("max", 1.0);
                            let value = parse_f32("value", min);
                            let range = (max - min).max(0.0001);
                            ((value - min) / range).clamp(0.0, 1.0)
                        } else {
                            0.0
                        };
                        let mut is_input = tag_name == "input";
                        let is_textarea = tag_name == "textarea";
                        let mut is_button = tag_name == "button";
                        let is_select = tag_name == "select";
                        let mut is_reset_btn = false;

                        // input 種別判定: checkbox/radio はトグル要素、submit/button/reset はボタン。
                        let mut input_kind: u8 = 0;
                        if is_input {
                            if let Some(t) = attributes.get("type") {
                                let tl = t.trim().to_lowercase();
                                if tl == "submit" || tl == "button" || tl == "reset" {
                                    is_input = false;
                                    is_button = true;
                                    if tl == "reset" {
                                        is_reset_btn = true;
                                    }
                                } else if tl == "checkbox" {
                                    input_kind = 1;
                                } else if tl == "radio" {
                                    input_kind = 2;
                                } else if tl == "range" {
                                    input_kind = 5;
                                }
                            }
                        }
                        if is_select {
                            input_kind = 3;
                        }
                        // <button type="reset"> も reset ボタンとして扱う。
                        if tag_name == "button" {
                            if let Some(t) = attributes.get("type") {
                                if t.trim().eq_ignore_ascii_case("reset") {
                                    is_reset_btn = true;
                                }
                            }
                        }

                        let mut el_id = String::new();
                        if let Some(id_val) = attributes.get("id") {
                            el_id = id_val.clone();
                        } else if let Some(name_val) = attributes.get("name") {
                            el_id = name_val.clone();
                        }
                        // フォーム送信のパラメータ名は `name` 属性を用いる（element_id とは別物）。
                        // id を持つ入力でも name で送信されるよう element_id → name を記録する。
                        if (is_input || is_textarea) && !el_id.is_empty() {
                            if let Some(name_val) = attributes.get("name") {
                                self.field_names.insert(el_id.clone(), name_val.clone());
                            }
                        }

                        let mut onclick = String::new();
                        if let Some(oc) = attributes.get("onclick") {
                            onclick = oc.clone();
                        }

                        let mut next_parent_id = String::from(parent_id);
                        if !el_id.is_empty() {
                            next_parent_id = el_id.clone();
                        }

                        // --- New CSS features: position, opacity, box-shadow, white-space, text-overflow, linear-gradient ---
                        let position_val = styled
                            .value("position")
                            .unwrap_or_else(|| String::from("static"));
                        // `inset` ショートハンド（top/right/bottom/left の一括指定。CSS Box
                        // Alignment/Positioning。margin と同じ1〜4値の展開規則）。個別の
                        // longhand（top/left/right/bottom）が明示されていればそちらを優先する。
                        let inset_val = styled.value("inset");
                        fn inset_component(shorthand: &str, side: usize) -> Option<&str> {
                            // side: 0=top, 1=right, 2=bottom, 3=left
                            let toks: alloc::vec::Vec<&str> = shorthand.split_whitespace().collect();
                            match toks.len() {
                                1 => toks.first().copied(),
                                2 => match side {
                                    0 | 2 => toks.first().copied(),
                                    _ => toks.get(1).copied(),
                                },
                                3 => match side {
                                    0 => toks.first().copied(),
                                    2 => toks.get(2).copied(),
                                    _ => toks.get(1).copied(),
                                },
                                4 => toks.get(side).copied(),
                                _ => None,
                            }
                        }
                        fn parse_px_i32(v: &str) -> Option<i32> {
                            v.trim()
                                .strip_suffix("px")
                                .unwrap_or(v.trim())
                                .parse::<i32>()
                                .ok()
                        }
                        let pos_top = styled.value("top").and_then(|v| parse_px_i32(&v)).or_else(
                            || inset_val.as_deref().and_then(|s| inset_component(s, 0)).and_then(parse_px_i32),
                        );
                        let pos_left = styled.value("left").and_then(|v| parse_px_i32(&v)).or_else(
                            || inset_val.as_deref().and_then(|s| inset_component(s, 3)).and_then(parse_px_i32),
                        );
                        let pos_right = styled.value("right").and_then(|v| parse_px_i32(&v)).or_else(
                            || inset_val.as_deref().and_then(|s| inset_component(s, 1)).and_then(parse_px_i32),
                        );
                        let pos_bottom = styled.value("bottom").and_then(|v| parse_px_i32(&v)).or_else(
                            || inset_val.as_deref().and_then(|s| inset_component(s, 2)).and_then(parse_px_i32),
                        );
                        // `z-index` は position が static（既定値）以外のときにのみ効果を持つ
                        // 仕様（CSS2.1/CSS3）。以前は position を一切見ておらず、static な
                        // 要素にも `z-index` がそのまま適用されてしまい、意図しない重なり順に
                        // なるバグがあった。
                        let own_z = if position_val == "static" {
                            0
                        } else {
                            styled
                                .value("z-index")
                                .and_then(|v| v.trim().parse::<i32>().ok())
                                .unwrap_or(0)
                        };
                        // 【2026-07-28】祖先の実効 z まで引き上げる。
                        // これをやらないと `section{position:relative;z-index:5}` の
                        // static な子孫（z=0）が section より前に描かれ、直後に
                        // section の背景で丸ごと塗り潰される（実際に踏んだ回帰）。
                        // 仕様と不変条件は `spec/paint_order.md` を参照。
                        let z_index_val = super::paint_order::effective_z(
                            own_z,
                            Some(self.inherited_paint_z),
                        );
                        let is_fixed_pos = position_val == "fixed";
                        let is_sticky_pos = position_val == "sticky";

                        // overflow: hidden/scroll/auto/clip は子孫をこの要素の content box でクリップする。
                        // scroll/auto のときはさらにサブスクロールコンテナとして扱う。
                        // `overflow` ショートハンドは `<overflow-x>`（1値なら両軸に適用）または
                        // `<overflow-x> <overflow-y>`（2値）を受け付ける。
                        let (overflow_x_val, overflow_y_val) = match styled.value("overflow") {
                            Some(v) => {
                                let toks: alloc::vec::Vec<&str> = v.split_whitespace().collect();
                                match toks.as_slice() {
                                    [x, y] => (String::from(*x), String::from(*y)),
                                    [xy] => (String::from(*xy), String::from(*xy)),
                                    _ => (String::new(), String::new()),
                                }
                            }
                            None => (
                                styled.value("overflow-x").unwrap_or_default(),
                                styled.value("overflow-y").unwrap_or_default(),
                            ),
                        };
                        let axis_clips = |v: &str| matches!(v.trim(), "hidden" | "scroll" | "auto" | "clip");
                        let axis_scrolls = |v: &str| matches!(v.trim(), "scroll" | "auto");
                        // 軸ごとに独立してクリップするか判定する。以前は x/y いずれかが該当すれば
                        // 矩形1つ丸ごとをクリップに使っていたため、`overflow-x:hidden;
                        // overflow-y:visible`（またはその逆）のような軸ごとに異なる指定で、
                        // 本来クリップされないはずの軸まで誤ってクリップされてしまうバグがあった。
                        let x_clips = axis_clips(&overflow_x_val);
                        let y_clips = axis_clips(&overflow_y_val);
                        let overflow_clips = x_clips || y_clips;
                        // scroll/auto: 独立スクロール領域を作る（element_id が必要）。
                        let is_scroll_container =
                            axis_scrolls(&overflow_x_val) || axis_scrolls(&overflow_y_val);

                        let opacity_val: u8 = styled
                            .value("opacity")
                            .and_then(|v| {
                                v.trim()
                                    .parse::<f32>()
                                    .ok()
                                    .map(|f| (f.clamp(0.0, 1.0) * 255.0) as u8)
                            })
                            .unwrap_or(255);

                        let _white_space_nowrap = styled
                            .value("white-space")
                            .map(|v| v.trim() == "nowrap")
                            .unwrap_or(false);
                        let _text_overflow_ellipsis = styled
                            .value("text-overflow")
                            .map(|v| v.trim() == "ellipsis")
                            .unwrap_or(false);

                        // Parse box-shadow: `<Xpx> <Ypx> [<Blur>px] [<color>] [inset]` を
                        // 最上位カンマで区切った複数シャドウに対応（box-shadow の値自体に
                        // 括弧を含む余地は無いため、単純な `,` 分割で安全に複数シャドウを
                        // 分離できる）。各セグメントを独立してトークン解析する。
                        // オフセット/ぼかしの長さトークン解決は`parse_shadow_len_tok`
                        // （モジュールトップレベル。丸ごと未対応だった`rem`単位を
                        // 2026-07-17に追加。詳細は同関数のdocコメント参照）を使う。
                        fn parse_one_box_shadow(seg: &str) -> Option<(i32, i32, i32, u32, bool)> {
                            let seg = seg.trim();
                            if seg.is_empty() {
                                return None;
                            }
                            let mut ox = 0i32;
                            let mut oy = 0i32;
                            let mut _blur = 0i32;
                            let mut shadow_color = 0x80000000u32;
                            let mut px_count = 0;
                            let mut is_inset = false;
                            for token in seg.split_whitespace() {
                                if token == "inset" {
                                    is_inset = true;
                                    continue;
                                }
                                if let Some(n) = parse_shadow_len_tok(token) {
                                    match px_count {
                                        0 => {
                                            ox = n;
                                            px_count += 1;
                                        }
                                        1 => {
                                            oy = n;
                                            px_count += 1;
                                        }
                                        2 => {
                                            _blur = n;
                                            px_count += 1;
                                        }
                                        _ => {}
                                    }
                                    continue;
                                }
                                if let Some(c) = parse_color(token) {
                                    shadow_color = c;
                                }
                            }
                            Some((ox, oy, _blur, shadow_color, is_inset))
                        }
                        let mut box_shadow: alloc::vec::Vec<(i32, i32, i32, u32, bool)> =
                            styled.value("box-shadow").map_or_else(alloc::vec::Vec::new, |v| {
                                let v = v.trim().to_lowercase();
                                if v == "none" {
                                    alloc::vec::Vec::new()
                                } else {
                                    // 【2026-08-03 発見・修正】`split(',')` は
                                    // **`rgba(0, 0, 0, 0.1)` の中のカンマでも切ってしまう**。
                                    //
                                    // 実サイトの `.research-card` は
                                    // `box-shadow: 0 2px 10px rgba(0,0,0,0.1)`（影 1 個）だが、
                                    // 実測で `shadows=4` になっていた。壊れた断片が
                                    // 影として解釈され、白いカードが白地の上で
                                    // 輪郭を失っていた。
                                    //
                                    // 括弧の深さを見る既存ヘルパ
                                    // （`css::values::split_top_level_commas`。
                                    //  グラデーションで同じ罠を踏んで作ったもの）を使う。
                                    crate::os_lib::css::split_top_level_commas(&v)
                                        .into_iter()
                                        .filter_map(parse_one_box_shadow)
                                        .collect()
                                }
                            });

                        if box_shadow.is_empty() {
                            if let Some(f) = styled.value("filter") {
                                if let Some(ds) =
                                    crate::os_lib::web_engine::draw_helpers::parse_drop_shadow(&f)
                                {
                                    box_shadow.push(ds);
                                }
                            }
                        }

                        // Parse linear-gradient from background or background-image
                        let linear_gradient = {
                            let bg_val = styled
                                .value("background")
                                .or_else(|| styled.value("background-image"));
                            bg_val.and_then(|v| {
                                let v_lower = v.to_lowercase();
                                if !v_lower.contains("linear-gradient")
                                    || v_lower.contains("repeating-linear-gradient")
                                {
                                    return None;
                                }
                                // `rgba(...)` が引数に入るため、単純な find(')') では
                                // rgba の閉じ括弧を拾って定義が壊れる（実際に踏んだ回帰）。
                                // 入れ子対応の対応括弧探索を使う。
                                let open_paren = v_lower.find("linear-gradient(")? + 15;
                                let inner_start = open_paren + 1;
                                let inner_end =
                                    super::css_units::find_balanced_close(&v, open_paren)?;
                                let inner = v.get(inner_start..inner_end)?;
                                let mut parts = super::css_units::split_top_level_commas(inner).into_iter();
                                let first = parts.next()?.trim();
                                
                                let mut angle_deg = 180.0; // default to bottom
                                let mut is_first_color = true;
                                
                                // 角度や方向の判定
                                let first_lower = first.to_lowercase();
                                if first_lower.starts_with("to ") {
                                    if first_lower == "to top" { angle_deg = 0.0; }
                                    else if first_lower == "to right" { angle_deg = 90.0; }
                                    else if first_lower == "to bottom" { angle_deg = 180.0; }
                                    else if first_lower == "to left" { angle_deg = 270.0; }
                                    else if first_lower == "to top right" || first_lower == "to right top" { angle_deg = 45.0; }
                                    else if first_lower == "to bottom right" || first_lower == "to right bottom" { angle_deg = 135.0; }
                                    else if first_lower == "to bottom left" || first_lower == "to left bottom" { angle_deg = 225.0; }
                                    else if first_lower == "to top left" || first_lower == "to left top" { angle_deg = 315.0; }
                                    is_first_color = false;
                                } else if first_lower.ends_with("deg") {
                                    if let Ok(deg) = first_lower.trim_end_matches("deg").trim().parse::<f32>() {
                                        angle_deg = deg;
                                        is_first_color = false;
                                    }
                                } else if first_lower.ends_with("turn") {
                                    if let Ok(turn) = first_lower.trim_end_matches("turn").trim().parse::<f32>() {
                                        angle_deg = turn * 360.0;
                                        is_first_color = false;
                                    }
                                }
                                
                                let mut raw_stops = alloc::vec::Vec::new();
                                if is_first_color {
                                    raw_stops.push(first);
                                }
                                for p in parts {
                                    raw_stops.push(p.trim());
                                }
                                
                                let mut stops = alloc::vec::Vec::new();
                                for (i, s) in raw_stops.iter().enumerate() {
                                    let mut tokens = s.split_whitespace();
                                    if let Some(c_str) = tokens.next() {
                                        if let Some(c) = parse_color(c_str) {
                                            let mut pos = None;
                                            if let Some(p_str) = tokens.next() {
                                                if p_str.ends_with('%') {
                                                    if let Ok(v) = p_str.trim_end_matches('%').parse::<f32>() {
                                                        pos = Some(v / 100.0);
                                                    }
                                                }
                                            }
                                            stops.push((c, pos));
                                        }
                                    }
                                }
                                
                                if stops.len() < 2 {
                                    return None;
                                }
                                
                                // 位置の自動計算 (省略されている場合)
                                let n = stops.len();
                                if stops[0].1.is_none() { stops[0].1 = Some(0.0); }
                                if stops[n-1].1.is_none() { stops[n-1].1 = Some(1.0); }
                                
                                let mut final_stops = alloc::vec::Vec::new();
                                let mut last_pos = 0.0;
                                for i in 0..n {
                                    if let Some(p) = stops[i].1 {
                                        last_pos = p;
                                    } else {
                                        // Find next specified position
                                        let mut next_pos = 1.0;
                                        let mut next_idx = n - 1;
                                        for j in i+1..n {
                                            if let Some(p) = stops[j].1 {
                                                next_pos = p;
                                                next_idx = j;
                                                break;
                                            }
                                        }
                                        let step = (next_pos - last_pos) / ((next_idx - i + 1) as f32);
                                        last_pos += step;
                                    }
                                    final_stops.push(super::GradientStop {
                                        color: stops[i].0,
                                        position: last_pos,
                                    });
                                }

                                Some(super::LinearGradient {
                                    angle_deg,
                                    stops: final_stops,
                                })
                            })
                        };

                        // Parse radial-gradient(circle, c1, c2) from background/background-image.
                        // 楕円形状・位置指定は非対応で、常に矩形の中心を起点とする簡略実装。
                        let radial_gradient = {
                            let bg_val = styled
                                .value("background")
                                .or_else(|| styled.value("background-image"));
                            bg_val.and_then(|v| {
                                let v_lower = v.to_lowercase();
                                if !v_lower.contains("radial-gradient")
                                    || v_lower.contains("repeating-radial-gradient")
                                {
                                    return None;
                                }
                                let inner_start = v_lower.find("radial-gradient(")? + 17;
                                let inner_end =
                                    v_lower.get(inner_start..)?.find(')')? + inner_start;
                                let inner = v.get(inner_start..inner_end)?;
                                let mut parts = inner.split(',');
                                let first = parts.next()?.trim();
                                
                                let mut shape = super::RadialShape::Ellipse;
                                let mut pos_x = 0.5;
                                let mut pos_y = 0.5;
                                let mut is_first_color = true;
                                
                                let first_lower = first.to_lowercase();
                                if first_lower.contains("circle") || first_lower.contains("ellipse") || first_lower.contains("at ") {
                                    is_first_color = false;
                                    if first_lower.contains("circle") {
                                        shape = super::RadialShape::Circle;
                                    }
                                    if let Some(at_idx) = first_lower.find("at ") {
                                        let pos_str = first_lower.get(at_idx + 3..)?;
                                        let mut pos_tokens = pos_str.split_whitespace();
                                        if let Some(x_str) = pos_tokens.next() {
                                            if x_str == "left" { pos_x = 0.0; }
                                            else if x_str == "right" { pos_x = 1.0; }
                                            else if x_str == "center" { pos_x = 0.5; }
                                            else if x_str.ends_with('%') {
                                                if let Ok(v) = x_str.trim_end_matches('%').parse::<f32>() {
                                                    pos_x = v / 100.0;
                                                }
                                            }
                                        }
                                        if let Some(y_str) = pos_tokens.next() {
                                            if y_str == "top" { pos_y = 0.0; }
                                            else if y_str == "bottom" { pos_y = 1.0; }
                                            else if y_str == "center" { pos_y = 0.5; }
                                            else if y_str.ends_with('%') {
                                                if let Ok(v) = y_str.trim_end_matches('%').parse::<f32>() {
                                                    pos_y = v / 100.0;
                                                }
                                            }
                                        } else {
                                            pos_y = pos_x; // 1つだけ指定された場合の中央寄せなど (厳密な仕様ではないが簡略)
                                        }
                                    }
                                }
                                
                                let mut raw_stops = alloc::vec::Vec::new();
                                if is_first_color {
                                    raw_stops.push(first);
                                }
                                for p in parts {
                                    raw_stops.push(p.trim());
                                }
                                
                                let mut stops = alloc::vec::Vec::new();
                                for (i, s) in raw_stops.iter().enumerate() {
                                    let mut tokens = s.split_whitespace();
                                    if let Some(c_str) = tokens.next() {
                                        if let Some(c) = parse_color(c_str) {
                                            let mut pos = None;
                                            if let Some(p_str) = tokens.next() {
                                                if p_str.ends_with('%') {
                                                    if let Ok(v) = p_str.trim_end_matches('%').parse::<f32>() {
                                                        pos = Some(v / 100.0);
                                                    }
                                                }
                                            }
                                            stops.push((c, pos));
                                        }
                                    }
                                }
                                
                                if stops.len() < 2 {
                                    return None;
                                }
                                
                                let n = stops.len();
                                if stops[0].1.is_none() { stops[0].1 = Some(0.0); }
                                if stops[n-1].1.is_none() { stops[n-1].1 = Some(1.0); }
                                
                                let mut final_stops = alloc::vec::Vec::new();
                                let mut last_pos = 0.0;
                                for i in 0..n {
                                    if let Some(p) = stops[i].1 {
                                        last_pos = p;
                                    } else {
                                        let mut next_pos = 1.0;
                                        let mut next_idx = n - 1;
                                        for j in i+1..n {
                                            if let Some(p) = stops[j].1 {
                                                next_pos = p;
                                                next_idx = j;
                                                break;
                                            }
                                        }
                                        let step = (next_pos - last_pos) / ((next_idx - i + 1) as f32);
                                        last_pos += step;
                                    }
                                    final_stops.push(super::GradientStop {
                                        color: stops[i].0,
                                        position: last_pos,
                                    });
                                }

                                Some(super::RadialGradient {
                                    shape,
                                    pos_x,
                                    pos_y,
                                    stops: final_stops,
                                })
                            })
                        };

                        // Parse conic-gradient(c1, c2, ...) from background/background-image.
                        // 全カラーストップを角度方向へ等間隔配置する（`from`/位置指定は非対応の
                        // 簡略実装、radial-gradient と同じ方針）。以前は先頭2色しか保持できない
                        // `(u32,u32)` だったため3色目以降が丸ごと失われるバグがあった。
                        let conic_gradient = {
                            let bg_val = styled
                                .value("background")
                                .or_else(|| styled.value("background-image"));
                            bg_val.and_then(|v| {
                                let v_lower = v.to_lowercase();
                                if !v_lower.contains("conic-gradient") {
                                    return None;
                                }
                                let inner_start = v_lower.find("conic-gradient(")? + 15;
                                let inner_end =
                                    v_lower.get(inner_start..)?.find(')')? + inner_start;
                                let inner = v.get(inner_start..inner_end)?;
                                let parts: Vec<&str> = inner.split(',').collect();
                                let colors: Vec<u32> = parts
                                    .iter()
                                    .filter_map(|p| parse_color(p.trim()))
                                    .collect();
                                if colors.len() < 2 {
                                    return None;
                                }
                                let n = colors.len();
                                let stops: alloc::vec::Vec<super::GradientStop> = colors
                                    .into_iter()
                                    .enumerate()
                                    .map(|(i, color)| super::GradientStop {
                                        color,
                                        position: i as f32 / (n - 1) as f32,
                                    })
                                    .collect();
                                Some(stops)
                            })
                        };

                        // repeating-linear-gradient(c1 [len], c2 len, ...) / repeating-radial-gradient(...):
                        // 色トークンの中から末尾の px 長さトークンを周期(cycle_px)として使う簡略実装
                        // （角度/形状/位置指定は非対応、px 以外の単位も非対応）。全カラーストップを
                        // 収集し周期内で均等割り補間する（以前は先頭2色のみで3色目以降が失われていた）。
                        fn extract_px_cycle(parts: &[&str]) -> Option<i32> {
                            parts
                                .iter()
                                .rev()
                                .find_map(|p| {
                                    p.trim()
                                        .rsplit(' ')
                                        .next()
                                        .and_then(|tok| tok.strip_suffix("px"))
                                        .and_then(|n| n.parse::<i32>().ok())
                                })
                                .filter(|n| *n > 0)
                        }
                        let repeating_linear_gradient = {
                            let bg_val = styled
                                .value("background")
                                .or_else(|| styled.value("background-image"));
                            bg_val.and_then(|v| {
                                let v_lower = v.to_lowercase();
                                if !v_lower.contains("repeating-linear-gradient") {
                                    return None;
                                }
                                let inner_start = v_lower.find("repeating-linear-gradient(")? + 26;
                                let inner_end =
                                    v_lower.get(inner_start..)?.find(')')? + inner_start;
                                let inner = v.get(inner_start..inner_end)?;
                                let parts: Vec<&str> = inner.split(',').collect();
                                let colors: Vec<u32> = parts
                                    .iter()
                                    .filter_map(|p| parse_color(p.trim().split(' ').next().unwrap_or("")))
                                    .collect();
                                if colors.len() < 2 {
                                    return None;
                                }
                                let cycle = extract_px_cycle(&parts).unwrap_or(20);
                                let dir = parts[0].trim().to_lowercase();
                                let is_vertical =
                                    dir.contains("bottom") || dir == "180deg" || dir == "to bottom";
                                Some((colors, cycle, is_vertical))
                            })
                        };
                        let repeating_radial_gradient = {
                            let bg_val = styled
                                .value("background")
                                .or_else(|| styled.value("background-image"));
                            bg_val.and_then(|v| {
                                let v_lower = v.to_lowercase();
                                if !v_lower.contains("repeating-radial-gradient") {
                                    return None;
                                }
                                let inner_start = v_lower.find("repeating-radial-gradient(")? + 26;
                                let inner_end =
                                    v_lower.get(inner_start..)?.find(')')? + inner_start;
                                let inner = v.get(inner_start..inner_end)?;
                                let parts: Vec<&str> = inner.split(',').collect();
                                let colors: Vec<u32> = parts
                                    .iter()
                                    .filter_map(|p| parse_color(p.trim().split(' ').next().unwrap_or("")))
                                    .collect();
                                if colors.len() < 2 {
                                    return None;
                                }
                                let cycle = extract_px_cycle(&parts).unwrap_or(20);
                                Some((colors, cycle))
                            })
                        };

                        // `visibility: collapse` は本来テーブル行/列専用の特殊な折りたたみ
                        // レイアウト（行/列自体の高さ/幅を無くす）を持つが、この処理系はその
                        // 専用レイアウトを実装していない。以前は `collapse` が文字列として
                        // `"hidden"` と一致しないため何の効果も持たず（可視のまま描画される）、
                        // 完全に無視されていた。テーブル行/列以外の要素では仕様上も
                        // `collapse` は `hidden` と同じ扱いでよいとされているため、
                        // 専用レイアウト非対応を許容しつつ `hidden` と同一視する簡略実装とする
                        // （何もしないよりは大幅に改善、他の多くの簡略実装と同じ妥協水準）。
                        let visibility_hidden = styled
                            .value("visibility")
                            .map(|v| matches!(v.trim(), "hidden" | "collapse"))
                            .unwrap_or(false);

                        // コンテナ背景・ボーダー要素の追加
                        let container_x = layout.dimensions.content.x
                            - layout.dimensions.padding.left
                            - layout.dimensions.border.left;
                        let container_y = layout.dimensions.content.y
                            - layout.dimensions.padding.top
                            - layout.dimensions.border.top;
                        let container_w = layout.dimensions.content.width
                            + layout.dimensions.padding.left
                            + layout.dimensions.padding.right
                            + layout.dimensions.border.left
                            + layout.dimensions.border.right;
                        let container_h = layout.dimensions.content.height
                            + layout.dimensions.padding.top
                            + layout.dimensions.padding.bottom
                            + layout.dimensions.border.top
                            + layout.dimensions.border.bottom;

                        // `border-radius` の `%` 値を要素サイズに対する割合として
                        // 解決する（`border-radius: <h-radii> / <v-radii>` の楕円角
                        // 構文は非対応のため水平半径のみを円弧として使う従来どおりの
                        // 簡略実装。`%` は仕様上コーナーごとに対応する軸（水平半径は
                        // 幅、垂直半径は高さ）に対する割合だが、この実装は水平半径
                        // しか保持しないため常に `container_w` を基準にする）。
                        // `rem`対応は`resolve_border_radius`（モジュールトップレベル。
                        // 丸ごと未対応だった。2026-07-17）参照。
                        let parse_radius = |s: &str| -> i32 { resolve_border_radius(s, container_w) };
                        let mut border_radius = (0, 0, 0, 0);
                        if let Some(s) = &border_radius_shorthand {
                            let h_part = s.split('/').next().unwrap_or(s);
                            let parts: alloc::vec::Vec<&str> = h_part.split_whitespace().collect();
                            if parts.len() == 1 {
                                let v = parse_radius(parts[0]);
                                border_radius = (v, v, v, v);
                            } else if parts.len() == 2 {
                                let v1 = parse_radius(parts[0]);
                                let v2 = parse_radius(parts[1]);
                                border_radius = (v1, v2, v1, v2);
                            } else if parts.len() == 3 {
                                let v1 = parse_radius(parts[0]);
                                let v2 = parse_radius(parts[1]);
                                let v3 = parse_radius(parts[2]);
                                border_radius = (v1, v2, v3, v2);
                            } else if parts.len() >= 4 {
                                border_radius = (
                                    parse_radius(parts[0]),
                                    parse_radius(parts[1]),
                                    parse_radius(parts[2]),
                                    parse_radius(parts[3]),
                                );
                            }
                        }
                        if let Some(s) = &border_radius_tl { border_radius.0 = parse_radius(s); }
                        if let Some(s) = &border_radius_tr { border_radius.1 = parse_radius(s); }
                        if let Some(s) = &border_radius_br { border_radius.2 = parse_radius(s); }
                        if let Some(s) = &border_radius_bl { border_radius.3 = parse_radius(s); }

                        let bg_color = extract_color(styled, "background-color", "background");
                        // 【2026-08-03診断】研究セクション（高さ 990 の要素）の
                        // 背景が `None` になる件。生の算出値を 1 回だけ出す。
                        if bg_color.is_none() && layout.dimensions.content.height > 800 {
                            static ONCE: core::sync::atomic::AtomicU32 =
                                core::sync::atomic::AtomicU32::new(0);
                            if ONCE.fetch_add(1, core::sync::atomic::Ordering::Relaxed) < 4 {
                                crate::warn!(
                                    "[BGDIAG] tag={} h={} background-color={:?} background={:?} class={:?}",
                                    tag_name,
                                    layout.dimensions.content.height,
                                    styled.value("background-color"),
                                    styled.value("background"),
                                    styled.value("x-class-debug")
                                );
                            }
                        }
                        let border_style = extract_border_style(styled);
                        let border_color = if !border_style.is_none() {
                            extract_border_color(styled, 0)
                        } else {
                            None
                        };

                        let border_top_style = styled
                            .value("border-top-style")
                            .or_else(|| styled.value("border-style"))
                            .map(|s| super::BorderStyle::parse(&s))
                            .unwrap_or_default();
                        let border_right_style = styled
                            .value("border-right-style")
                            .or_else(|| styled.value("border-style"))
                            .map(|s| super::BorderStyle::parse(&s))
                            .unwrap_or_default();
                        let border_bottom_style = styled
                            .value("border-bottom-style")
                            .or_else(|| styled.value("border-style"))
                            .map(|s| super::BorderStyle::parse(&s))
                            .unwrap_or_default();
                        let border_left_style = styled
                            .value("border-left-style")
                            .or_else(|| styled.value("border-style"))
                            .map(|s| super::BorderStyle::parse(&s))
                            .unwrap_or_default();

                        let border_top_color = styled
                            .value("border-top-color")
                            .or_else(|| styled.value("border-color"))
                            .and_then(|v| parse_color(&v));
                        let border_right_color = styled
                            .value("border-right-color")
                            .or_else(|| styled.value("border-color"))
                            .and_then(|v| parse_color(&v));
                        let border_bottom_color = styled
                            .value("border-bottom-color")
                            .or_else(|| styled.value("border-color"))
                            .and_then(|v| parse_color(&v));
                        let border_left_color = styled
                            .value("border-left-color")
                            .or_else(|| styled.value("border-color"))
                            .and_then(|v| parse_color(&v));

                        let bg_image = styled
                            .value("background-image")
                            .or_else(|| styled.value("background"))
                            .and_then(|v| extract_url_path(&v));
                        let bg_images = styled
                            .value("background-image")
                            .or_else(|| styled.value("background"))
                            .map(|v| extract_all_url_paths(&v))
                            .unwrap_or_default();
                        // `background`ショートハンドの`<position>/<size>`分解は
                        // カスケード時点（`css::expand_background_shorthand`）で完了済みの
                        // ため、ここでは`background-position`/`-size`/`-repeat`の
                        // longhandをそのまま読むだけでよい。
                        let bg_size_raw = styled.value("background-size");
                        let bg_size = parse_bg_size(bg_size_raw.as_deref());
                        let bg_repeat_raw = styled.value("background-repeat");
                        let (bg_repeat_x, bg_repeat_y) = parse_bg_repeat(bg_repeat_raw.as_deref());
                        let bg_position_raw = styled.value("background-position");
                        let (bg_pos_x, bg_pos_y) = parse_bg_position(bg_position_raw.as_deref());
                        // 複数レイヤー（`background-image: url(a), url(b)`）向けの、レイヤーごとの
                        // size/repeat/position。以前は全レイヤーが `bg_size`/`bg_repeat_*`/
                        // `bg_pos_*`（先頭値のみ）を共有しており、`background-position: left top,
                        // right bottom` のようなレイヤーごとの指定が無視されるバグがあった。
                        // CSS仕様どおり、値の個数がレイヤー数より少なければ先頭から繰り返す。
                        let bg_layers: alloc::vec::Vec<(
                            super::BgSizeMode,
                            super::BgRepeatMode,
                            super::BgRepeatMode,
                            f32,
                            f32,
                        )> = if bg_images.len() > 1 {
                            let sizes: alloc::vec::Vec<&str> = bg_size_raw
                                .as_deref()
                                .map(|v| v.split(',').collect())
                                .unwrap_or_default();
                            let repeats: alloc::vec::Vec<&str> = bg_repeat_raw
                                .as_deref()
                                .map(|v| v.split(',').collect())
                                .unwrap_or_default();
                            let positions: alloc::vec::Vec<&str> = bg_position_raw
                                .as_deref()
                                .map(|v| v.split(',').collect())
                                .unwrap_or_default();
                            (0..bg_images.len())
                                .map(|i| {
                                    let size = if sizes.is_empty() {
                                        bg_size
                                    } else {
                                        parse_bg_size(Some(sizes[i % sizes.len()].trim()))
                                    };
                                    let (rx, ry) = if repeats.is_empty() {
                                        (bg_repeat_x, bg_repeat_y)
                                    } else {
                                        parse_bg_repeat(Some(repeats[i % repeats.len()].trim()))
                                    };
                                    let (px, py) = if positions.is_empty() {
                                        (bg_pos_x, bg_pos_y)
                                    } else {
                                        parse_bg_position(Some(positions[i % positions.len()].trim()))
                                    };
                                    (size, rx, ry, px, py)
                                })
                                .collect()
                        } else {
                            alloc::vec::Vec::new()
                        };
                        let background_blend_mode = styled
                            .value("background-blend-mode")
                            .unwrap_or_default();
                        // `background-clip`/`background-origin`: border-box/padding-box/content-box。
                        // `background-clip: text` は文字マスク合成が必要で非対応のため border-box にフォールバック。
                        fn normalize_bg_box(v: Option<alloc::string::String>) -> alloc::string::String {
                            match v.as_deref().map(str::trim) {
                                Some("padding-box") => alloc::string::String::from("padding-box"),
                                Some("content-box") => alloc::string::String::from("content-box"),
                                _ => alloc::string::String::from("border-box"),
                            }
                        }
                        let bg_clip = normalize_bg_box(
                            styled.value("background-clip")
                                .or_else(|| styled.value("-webkit-background-clip")),
                        );
                        // `background-origin` の既定値は border-box ではなく padding-box（CSS 仕様）。
                        let bg_origin = match styled.value("background-origin").as_deref().map(str::trim)
                        {
                            Some("border-box") => alloc::string::String::from("border-box"),
                            Some("content-box") => alloc::string::String::from("content-box"),
                            _ => alloc::string::String::from("padding-box"),
                        };
                        // `background-attachment: fixed` はスクロールしてもパターンが
                        // ビューポートに固定されて見える効果。`local` はネストしたスクロール
                        // コンテナ内での挙動差異があるが、この処理系では `scroll` と同一視する。
                        let bg_attachment = match styled.value("background-attachment").as_deref().map(str::trim)
                        {
                            Some("fixed") => alloc::string::String::from("fixed"),
                            _ => alloc::string::String::from("scroll"),
                        };
                        // CSS `cursor`: `text` のみ実際のカーソル形状へ反映する（他は非対応で
                        // 既定の矢印にフォールバックするが、値自体は保持する）。
                        let cursor_style = styled
                            .value("cursor")
                            .map(|v| String::from(v.trim()))
                            .unwrap_or_default();
                        let (outline_color, outline_width, outline_style) =
                            match parse_outline(styled) {
                                Some((c, w, s)) => (Some(c), w, s),
                                None => (None, 0, String::from("solid")),
                            };
                        let outline_offset = styled
                            .value("outline-offset")
                            .map(|v| parse_px_val(v.trim()))
                            .unwrap_or(0);

                        // Parse text-shadow: `<Xpx> <Ypx> [<Blur>px] [<color>]` のカンマ区切り
                        // 複数シャドウに対応（box-shadow と同じ理由・同じ方式で最上位カンマ分割）。
                        // `rem`が丸ごと未対応だった同型のバグ（box-shadowと同じ理由。
                        // 詳細は`parse_shadow_len_tok`のdocコメント参照）。同関数を再利用。
                        fn parse_one_text_shadow(seg: &str) -> Option<(i32, i32, i32, u32)> {
                            let seg = seg.trim();
                            if seg.is_empty() {
                                return None;
                            }
                            let mut ox = 0i32;
                            let mut oy = 0i32;
                            let mut blur = 0i32;
                            let mut sh_color = 0x80808080u32;
                            let mut px_count = 0;
                            for token in seg.split_whitespace() {
                                if let Some(n) = parse_shadow_len_tok(token) {
                                    match px_count {
                                        0 => ox = n,
                                        1 => oy = n,
                                        2 => blur = n,
                                        _ => {}
                                    }
                                    px_count += 1;
                                    continue;
                                }
                                if let Some(c) = parse_color(token) {
                                    sh_color = c;
                                }
                            }
                            if px_count == 0 {
                                None
                            } else {
                                Some((ox, oy, blur, sh_color))
                            }
                        }
                        let text_shadow: alloc::vec::Vec<(i32, i32, i32, u32)> = styled
                            .value("text-shadow")
                            .map_or_else(alloc::vec::Vec::new, |v| {
                                let v = v.trim().to_lowercase();
                                if v == "none" {
                                    alloc::vec::Vec::new()
                                } else {
                                    v.split(',').filter_map(parse_one_text_shadow).collect()
                                }
                            });

                        // ::before / ::after content。`display:none` が指定されていれば
                        // 仕様通りボックス自体を生成しない（`content:none` と同じ扱い）。
                        let before_content = if styled.value("x-before-display").as_deref() == Some("none") {
                            String::new()
                        } else {
                            styled.value("x-before-content").unwrap_or_default()
                        };
                        let after_content = if styled.value("x-after-display").as_deref() == Some("none") {
                            String::new()
                        } else {
                            styled.value("x-after-content").unwrap_or_default()
                        };
                        // FontAwesome等のアイコンフォントは、アイコン専用クラス（`.fas`/`.far`/
                        // `.fab`等）で要素自身に`font-family`を指定し、実際のグリフは同じ要素の
                        // `::before{content:"\fXXX"}`から出す、という実装が一般的（`::before`は
                        // 既定で親要素からfont-familyを継承するため、要素自身の指定で足りる）。
                        // `x-before-font-family`（`::before`セレクタへの直接指定、稀）があれば
                        // それを優先し、無ければ要素自身の`font-family`にフォールバックする。
                        // 要素自身の font-family。カンマ区切りのまま渡し、
                        // 描画側が先頭から順に登録済みフォントを探す。
                        let font_family = styled
                            .value("font-family")
                            .map(|v| String::from(v.trim()))
                            .unwrap_or_default();
                        let before_font_family = styled
                            .value("x-before-font-family")
                            .or_else(|| styled.value("font-family"))
                            .and_then(|v| v.split(',').next().map(|s| String::from(s.trim().trim_matches('"').trim_matches('\''))))
                            .unwrap_or_default();

                        // empty-cells: hide — 空セル（子孫がテキストのみ、かつ空白のみ）の
                        // 背景/境界線を非表示にする。`border-collapse:collapse` では常に
                        // 境界線が表示される仕様だが、この簡略実装ではその区別は行わない
                        // （collapse 時の empty-cells 適用除外は非対応、実用上の影響は軽微）。
                        let is_empty_cell_hidden = (tag_name == "td" || tag_name == "th")
                            && styled
                                .value("empty-cells")
                                .map(|v| v.trim().eq_ignore_ascii_case("hide"))
                                .unwrap_or(false)
                            && styled.node.children.iter().all(|c| match &c.node_type {
                                crate::os_lib::dom::NodeType::Text(t) => t.trim().is_empty(),
                                _ => false,
                            });

                        // CSS transform: translate / scale(X/Y) / rotate 簡易パース
                        let (
                            transform_tx,
                            transform_ty,
                            transform_scale_x,
                            transform_scale_y,
                            transform_rotate_deg,
                            transform_skew_x,
                            transform_skew_y,
                        ) = parse_transform(styled.value("transform").as_deref());
                        let (transform_origin_x, transform_origin_y) =
                            parse_transform_origin(styled.value("transform-origin").as_deref());

                        if (bg_color.is_some()
                            || (border_color.is_some() && !border_style.is_none())
                            || tag_name == "blockquote"
                            || bg_image.is_some()
                            || linear_gradient.is_some()
                            || radial_gradient.is_some()
                            || conic_gradient.is_some()
                            || repeating_linear_gradient.is_some()
                            || repeating_radial_gradient.is_some()
                            || !box_shadow.is_empty())
                            && container_w > 0
                            && container_h > 0
                            && tag_name != "head"
                            && tag_name != "title"
                            && tag_name != "meta"
                            && tag_name != "link"
                            && tag_name != "style"
                            && tag_name != "script"
                            && !is_empty_cell_hidden
                        {
                            self.elements.push(RenderElement {
                                text: String::new(),
                                font_size: 0,
                                color: 0,
                                bg_color,
                                hover_bg_color: extract_hover_color_alt(
                                    styled,
                                    "background-color",
                                    "background",
                                ),
                                hover_color: None,
                                hover_border_color: extract_hover_color(styled, "border-color"),
                                filter: styled.value("filter").unwrap_or_default(),
                                mix_blend_mode: styled.value("mix-blend-mode").unwrap_or_default(),
                                backdrop_filter: styled.value("backdrop-filter").unwrap_or_default(),
                                image_rendering: styled.value("image-rendering").unwrap_or_default(),
                                text_stroke_width: extract_text_stroke(styled).0,
                                text_stroke_color: extract_text_stroke(styled).1,
                                marker_color: extract_marker_color(styled),
                                marker_font_size: extract_marker_font_size(styled),
                                marker_content: extract_marker_content(styled),
                                focus_bg_color: extract_focus_color_alt(styled, "background-color", "background"),
                                focus_color: None,
                                focus_border_color: extract_focus_color(styled, "border-color"),
                                active_bg_color: extract_active_color_alt(styled, "background-color", "background"),
                                active_color: None,
                                active_border_color: extract_active_color(styled, "border-color"),
                                border_color,
                                border_style,
                                // 【2026-08-05 発見・修正】`false` の決め打ちだった。
                                //
                                // この要素の `::before` / `::after` の内容は
                                // **この要素自身**の書体で描かれる。にもかかわらず
                                // 太字・斜体を常に無効にしていたため、
                                // `.fas { font-weight: 900 }` のアイコンが
                                // regular(400) の書体で引かれ、字形が無くて
                                // 箱（☐）になっていた。
                                //
                                // 実測: `[FONTPICK] font awesome 7 free|bold=false|
                                // hit=Some("font awesome 7 free|400")`
                                font_bold: styled
                                    .value("font-weight")
                                    .map(|v| {
                                        let t = v.trim().to_lowercase();
                                        t == "bold"
                                            || t == "bolder"
                                            || t.parse::<u32>().unwrap_or(400) >= 700
                                    })
                                    .unwrap_or(false),
                                font_italic: styled
                                    .value("font-style")
                                    .map(|v| {
                                        let t = v.trim().to_lowercase();
                                        t == "italic" || t == "oblique"
                                    })
                                    .unwrap_or(false),
                                underline: false,
                                line_through: false,
                                is_video: false,
                                video_src: String::new(),
                                is_link: false,
                                href: String::new(),
                                is_hr: false,
                                is_img: false,
                                canvas_ctx_id,
                                img_alt: String::new(),
                                is_input: false,
                                is_textarea: false,
                                is_button: false,
                                button_icon: 0,
                                element_id: el_id.clone(),
                                scroll_margin_top: styled.value("scroll-margin-top").map(|v| parse_px_val(&v)).unwrap_or(0),
                                onclick: onclick.clone(),
                                form_action: String::new(),
                                form_method: String::new(),
                                width: container_w,
                                x_offset: container_x,
                                y_offset: container_y,
                                height: container_h,
                                border_radius,
                                is_li: tag_name == "li",
                                li_num: None,
                                is_blockquote: tag_name == "blockquote",
                                border_top_width: layout.dimensions.border.top,
                                border_right_width: layout.dimensions.border.right,
                                border_bottom_width: layout.dimensions.border.bottom,
                                border_left_width: layout.dimensions.border.left,
                                padding_top: layout.dimensions.padding.top,
                                padding_right: layout.dimensions.padding.right,
                                padding_bottom: layout.dimensions.padding.bottom,
                                padding_left: layout.dimensions.padding.left,
                                bg_clip,
                                bg_origin,
                                bg_attachment,
                                cursor_style,
                                border_top_color,
                                border_right_color,
                                border_bottom_color,
                                border_left_color,
                                border_top_style,
                                border_right_style,
                                border_bottom_style,
                                border_left_style,
                                bg_image,
                                bg_images,
                                bg_size,
                                bg_repeat_x,
                                bg_repeat_y,
                                bg_pos_x,
                                bg_pos_y,
                                background_blend_mode,
                                bg_layers,
                                outline_color,
                                outline_width,
                                outline_offset,
                                outline_style,
                                pos_top,
                                pos_left,
                                pos_right,
                                pos_bottom,
                                z_index: z_index_val,
                                paint_depth: self.inherited_paint_depth,
                                is_fixed: is_fixed_pos,
                                is_sticky: is_sticky_pos,
                                sticky_top: if is_sticky_pos { pos_top } else { None },
                                sticky_bottom: if is_sticky_pos { pos_bottom } else { None },
                                box_shadow,
                                linear_gradient,
                                radial_gradient,
                                conic_gradient,
                                repeating_linear_gradient,
                                repeating_radial_gradient,
                                opacity: opacity_val,
                                visibility_hidden,
                                text_shadow,
                                before_content,
                                after_content,
                                font_family,
                                before_font_family,
                                transform_tx,
                                transform_ty,
                                transform_scale_x,
                                transform_scale_y,
                                transform_rotate_deg,
                                transform_skew_x,
                                transform_skew_y,
                                transform_origin_x,
                                transform_origin_y,
                                // `mask-image` はフルサポート（url()による画像マスク等）は非対応だが、
                                // `circle()`/`ellipse()`/`polygon()` 等の図形関数構文は `clip-path` と
                                // 全く同じ `parse_clip_shape` を再利用してマスキングできる。`clip-path`
                                // が無指定のときのみ `mask-image` にフォールバックする（`clip-path` が
                                // 優先、両方指定されるケースは稀なため簡略化）。`mask-image:url(...)`
                                // のような非対応構文は `parse_clip_shape` がどのプレフィックスにも
                                // 一致せず `None` を返すため、単に無視されるだけで安全。
                                clip_path: styled
                                    .value("clip-path")
                                    .or_else(|| styled.value("mask-image"))
                                    .unwrap_or_default(),
                                ..Default::default()
                            });
                        }

                        // 子要素をフラット化
                        // select は option 子要素を独自に収集済みなので通常フラット化をスキップ。
                        let skip_children = is_button || is_input || is_textarea || is_select;
                        if !skip_children {
                            let is_ul = tag_name == "ul";
                            let is_ol = tag_name == "ol";
                            let mut child_list_state = if is_ul {
                                Some((false, 0))
                            } else if is_ol {
                                Some((true, 0))
                            } else {
                                list_state
                            };

                            // overflow クリップ: 子孫の生成インデックス範囲に、この要素の
                            // content box を clip 矩形として後付けする（入れ子は交差）。
                            let clip_rect_for_children: Option<(i32, i32, i32, i32)> =
                                if overflow_clips {
                                    let c = &layout.dimensions.content;
                                    Some((c.x, c.y, c.x + c.width, c.y + c.height))
                                } else {
                                    None
                                };
                            let clip_start_idx = self.elements.len();

                            // <label> の関連付け先 id を算出（for 属性優先、無ければ内包 input）。
                            // この label のサブツリーで生成された要素に後付けし、テキストクリックで
                            // 該当 input をトグル/フォーカスできるようにする。
                            let label_target: Option<String> = if tag_name == "label" {
                                attributes
                                    .get("for")
                                    .cloned()
                                    .filter(|s| !s.is_empty())
                                    .or_else(|| find_labelable_descendant_id(layout))
                            } else {
                                None
                            };

                            for child in &layout.children {
                                let is_child_li = match &child.box_type {
                                    crate::os_lib::layout::BoxType::BlockNode(styled_child)
                                    | crate::os_lib::layout::BoxType::InlineNode(styled_child)
                                    | crate::os_lib::layout::BoxType::InlineBlockNode(
                                        styled_child,
                                    ) => match &styled_child.node.node_type {
                                        crate::os_lib::dom::NodeType::Element {
                                            tag_name: child_tag,
                                            ..
                                        } => child_tag == "li",
                                        _ => false,
                                    },
                                    _ => false,
                                };

                                if is_child_li {
                                    if let Some((is_ol, count)) = child_list_state {
                                        child_list_state = Some((is_ol, count + 1));
                                    }
                                }

                                // 子孫は自分の実効 z を祖先値として引き継ぐ。
                                let saved_paint_z = self.inherited_paint_z;
                                let saved_paint_depth = self.inherited_paint_depth;
                                self.inherited_paint_z = z_index_val;
                                self.inherited_paint_depth =
                                    self.inherited_paint_depth.saturating_add(1);
                                self.flatten_layout(
                                    child,
                                    &next_form_action,
                                    &next_form_method,
                                    &next_href,
                                    next_font_bold,
                                    next_font_italic,
                                    next_underline,
                                    next_line_through,
                                    next_color,
                                    next_font_size,
                                    &next_parent_id,
                                    child_list_state,
                                    tag_name,
                                    next_decoration_color,
                                    next_decoration_style.clone(),
                                    next_decoration_thickness,
                                    next_decoration_underline_offset,
                                    next_overline,
                                    next_pointer_events_none,
                                );
                                self.inherited_paint_z = saved_paint_z;
                                self.inherited_paint_depth = saved_paint_depth;
                            }

                            // 生成された子孫要素にクリップ矩形を適用（既存 clip と交差）。
                            // 軸ごとに独立して適用する: `overflow-x`/`overflow-y` の一方だけが
                            // clip 対象の場合、クリップされない軸の境界は据え置く（両軸まとめて
                            // 適用すると、クリップ不要な軸まで誤ってクリップされてしまうため）。
                            if let Some((cx0, cy0, cx1, cy1)) = clip_rect_for_children {
                                for i in clip_start_idx..self.elements.len() {
                                    let el = &mut self.elements[i];
                                    el.overflow_hidden = true;
                                    if x_clips {
                                        el.clip_x0 = el.clip_x0.max(cx0);
                                        el.clip_x1 = el.clip_x1.min(cx1);
                                    }
                                    if y_clips {
                                        el.clip_y0 = el.clip_y0.max(cy0);
                                        el.clip_y1 = el.clip_y1.min(cy1);
                                    }
                                }
                            }

                            // overflow:scroll/auto → サブスクロールコンテナとして子孫に ID を付与。
                            // 内側に入れ子のスクロールコンテナが存在する子孫は上書きしない
                            // （既に内側コンテナの ID が設定済みのため）。
                            if is_scroll_container {
                                // element_id が空の場合は自動生成（位置ベースの仮 ID）。
                                let cid = if el_id.is_empty() {
                                    let c = &layout.dimensions.content;
                                    alloc::format!("_sc_{}_{}", c.x, c.y)
                                } else {
                                    el_id.clone()
                                };
                                // コンテナ高さを超えるコンテンツ量を scroll_max_y として算出。
                                let c = &layout.dimensions.content;
                                let container_bottom = c.y + c.height;
                                let content_bottom = self.elements[clip_start_idx..]
                                    .iter()
                                    .map(|e| e.y_offset + e.height)
                                    .max()
                                    .unwrap_or(container_bottom);
                                let scroll_max = (content_bottom - container_bottom).max(0);
                                // scroll_regions に初期エントリを作る（存在しなければ 0）。
                                self.scroll_regions.entry(cid.clone()).or_insert(0);
                                // スクロールバー描画・ホバー判定用のメタ情報を登録。
                                self.scroll_containers.push((
                                    cid.clone(),
                                    scroll_max,
                                    c.x,
                                    c.y,
                                    c.width,
                                    c.height,
                                ));
                                // 子孫に scroll_container_id を付与（内側コンテナ済みは除く）。
                                for i in clip_start_idx..self.elements.len() {
                                    let el = &mut self.elements[i];
                                    if el.scroll_container_id.is_empty() {
                                        el.scroll_container_id = cid.clone();
                                    }
                                }
                            }

                            // <label> サブツリーで生成された要素に関連付け先を付与
                            // （内包 input 自体は除外: 自前のトグル動作を持つため）。
                            if let Some(target) = label_target {
                                for i in clip_start_idx..self.elements.len() {
                                    let el = &mut self.elements[i];
                                    if el.label_for.is_empty()
                                        && el.input_kind == 0
                                        && !el.is_input
                                        && !el.is_textarea
                                    {
                                        el.label_for = target.clone();
                                    }
                                }
                            }
                        }

                        if is_hr {
                            self.elements.push(RenderElement {
                                text: String::new(),
                                font_size: 16,
                                color: 0xFF44475A,
                                bg_color: None,
                                hover_bg_color: extract_hover_color_alt(
                                    styled,
                                    "background-color",
                                    "background",
                                ),
                                hover_color: extract_hover_color(styled, "color"),
                                hover_border_color: extract_hover_color(styled, "border-color"),
                                filter: styled.value("filter").unwrap_or_default(),
                                mix_blend_mode: styled.value("mix-blend-mode").unwrap_or_default(),
                                backdrop_filter: styled.value("backdrop-filter").unwrap_or_default(),
                                image_rendering: styled.value("image-rendering").unwrap_or_default(),
                                text_stroke_width: extract_text_stroke(styled).0,
                                text_stroke_color: extract_text_stroke(styled).1,
                                marker_color: extract_marker_color(styled),
                                marker_font_size: extract_marker_font_size(styled),
                                marker_content: extract_marker_content(styled),
                                focus_bg_color: extract_focus_color_alt(styled, "background-color", "background"),
                                focus_color: extract_focus_color(styled, "color"),
                                focus_border_color: extract_focus_color(styled, "border-color"),
                                active_bg_color: extract_active_color_alt(styled, "background-color", "background"),
                                active_color: extract_active_color(styled, "color"),
                                active_border_color: extract_active_color(styled, "border-color"),
                                border_color: None,
                                border_style: super::BorderStyle::Solid,
                                font_bold: false,
                                underline: false,
                                is_video: false,
                                video_src: String::new(),
                                is_link: false,
                                href: String::new(),
                                is_hr: true,
                                is_img: false,
                                canvas_ctx_id,
                                img_alt: String::new(),
                                is_input: false,
                                is_textarea: false,
                                is_button: false,
                                button_icon: 0,
                                element_id: String::new(),
                                onclick: String::new(),
                                form_action: String::new(),
                                form_method: String::new(),
                                width: layout.dimensions.content.width,
                                x_offset: layout.dimensions.content.x,
                                y_offset: layout.dimensions.content.y,
                                height: match aspect_ratio_val {
                                    Some(ratio) if layout.dimensions.content.height <= 0 => {
                                        (layout.dimensions.content.width as f32 / ratio) as i32
                                    }
                                    _ => layout.dimensions.content.height,
                                },
                                aspect_ratio: aspect_ratio_val,
                                border_radius: (0, 0, 0, 0),
                                is_li: false,
                                li_num: None,
                                is_blockquote: false,
                                z_index: self.inherited_paint_z,
                                paint_depth: self.inherited_paint_depth,
                                ..Default::default()
                            });
                        } else if is_img {
                            let alt = attributes
                                .get("alt")
                                .cloned()
                                .unwrap_or(String::from("Image"));
                            let src = attributes.get("src").cloned().unwrap_or(String::new());

                            self.elements.push(RenderElement {
                                text: String::new(),
                                font_size: 16,
                                color: 0xFFF8F8F2,
                                bg_color: None,
                                hover_bg_color: extract_hover_color_alt(
                                    styled,
                                    "background-color",
                                    "background",
                                ),
                                hover_color: extract_hover_color(styled, "color"),
                                hover_border_color: extract_hover_color(styled, "border-color"),
                                filter: styled.value("filter").unwrap_or_default(),
                                mix_blend_mode: styled.value("mix-blend-mode").unwrap_or_default(),
                                backdrop_filter: styled.value("backdrop-filter").unwrap_or_default(),
                                image_rendering: styled.value("image-rendering").unwrap_or_default(),
                                text_stroke_width: extract_text_stroke(styled).0,
                                text_stroke_color: extract_text_stroke(styled).1,
                                marker_color: extract_marker_color(styled),
                                marker_font_size: extract_marker_font_size(styled),
                                marker_content: extract_marker_content(styled),
                                focus_bg_color: extract_focus_color_alt(styled, "background-color", "background"),
                                focus_color: extract_focus_color(styled, "color"),
                                focus_border_color: extract_focus_color(styled, "border-color"),
                                active_bg_color: extract_active_color_alt(styled, "background-color", "background"),
                                active_color: extract_active_color(styled, "color"),
                                active_border_color: extract_active_color(styled, "border-color"),
                                border_color: extract_border_color(styled, 0xFF44475A),
                                border_style: extract_border_style(styled),
                                font_bold: false,
                                underline: false,
                                is_video: false,
                                video_src: src,
                                is_link: false,
                                href: String::new(),
                                is_hr: false,
                                is_img: true,
                                canvas_ctx_id,
                                img_alt: alt,
                                is_input: false,
                                is_textarea: false,
                                is_button: false,
                                button_icon: 0,
                                element_id: el_id,
                                scroll_margin_top: styled.value("scroll-margin-top").map(|v| parse_px_val(&v)).unwrap_or(0),
                                onclick,
                                form_action: String::new(),
                                form_method: String::new(),
                                width: layout.dimensions.content.width,
                                x_offset: layout.dimensions.content.x,
                                y_offset: layout.dimensions.content.y,
                                height: layout.dimensions.content.height,
                                border_radius,
                                is_li: false,
                                li_num: None,
                                is_blockquote: false,
                                // `mask-image` はフルサポート（url()による画像マスク等）は非対応だが、
                                // `circle()`/`ellipse()`/`polygon()` 等の図形関数構文は `clip-path` と
                                // 全く同じ `parse_clip_shape` を再利用してマスキングできる。`clip-path`
                                // が無指定のときのみ `mask-image` にフォールバックする（`clip-path` が
                                // 優先、両方指定されるケースは稀なため簡略化）。`mask-image:url(...)`
                                // のような非対応構文は `parse_clip_shape` がどのプレフィックスにも
                                // 一致せず `None` を返すため、単に無視されるだけで安全。
                                clip_path: styled
                                    .value("clip-path")
                                    .or_else(|| styled.value("mask-image"))
                                    .unwrap_or_default(),
                                object_fit: parse_object_fit(styled.value("object-fit").as_deref()),
                                object_pos_x: parse_object_position(
                                    styled.value("object-position").as_deref(),
                                )
                                .0,
                                object_pos_y: parse_object_position(
                                    styled.value("object-position").as_deref(),
                                )
                                .1,
                                z_index: self.inherited_paint_z,
                                paint_depth: self.inherited_paint_depth,
                                ..Default::default()
                            });
                        } else if is_video {
                            let src = attributes.get("src").cloned().unwrap_or(String::new());
                            self.elements.push(RenderElement {
                                text: String::new(),
                                font_size: 16,
                                color: 0xFFF8F8F2,
                                bg_color: None,
                                hover_bg_color: extract_hover_color_alt(
                                    styled,
                                    "background-color",
                                    "background",
                                ),
                                hover_color: extract_hover_color(styled, "color"),
                                hover_border_color: extract_hover_color(styled, "border-color"),
                                filter: styled.value("filter").unwrap_or_default(),
                                mix_blend_mode: styled.value("mix-blend-mode").unwrap_or_default(),
                                backdrop_filter: styled.value("backdrop-filter").unwrap_or_default(),
                                image_rendering: styled.value("image-rendering").unwrap_or_default(),
                                text_stroke_width: extract_text_stroke(styled).0,
                                text_stroke_color: extract_text_stroke(styled).1,
                                marker_color: extract_marker_color(styled),
                                marker_font_size: extract_marker_font_size(styled),
                                marker_content: extract_marker_content(styled),
                                focus_bg_color: extract_focus_color_alt(styled, "background-color", "background"),
                                focus_color: extract_focus_color(styled, "color"),
                                focus_border_color: extract_focus_color(styled, "border-color"),
                                active_bg_color: extract_active_color_alt(styled, "background-color", "background"),
                                active_color: extract_active_color(styled, "color"),
                                active_border_color: extract_active_color(styled, "border-color"),
                                border_color: extract_border_color(styled, 0xFF6272A4),
                                border_style: extract_border_style(styled),
                                font_bold: false,
                                underline: false,
                                is_video: true,
                                video_src: src,
                                is_link: false,
                                href: String::new(),
                                is_hr: false,
                                is_img: false,
                                canvas_ctx_id,
                                img_alt: String::new(),
                                is_input: false,
                                is_textarea: false,
                                is_button: false,
                                button_icon: 0,
                                element_id: el_id,
                                scroll_margin_top: styled.value("scroll-margin-top").map(|v| parse_px_val(&v)).unwrap_or(0),
                                onclick,
                                form_action: String::new(),
                                form_method: String::new(),
                                width: layout.dimensions.content.width,
                                x_offset: layout.dimensions.content.x,
                                y_offset: layout.dimensions.content.y,
                                height: layout.dimensions.content.height,
                                border_radius,
                                is_li: false,
                                li_num: None,
                                is_blockquote: false,
                                z_index: self.inherited_paint_z,
                                paint_depth: self.inherited_paint_depth,
                                ..Default::default()
                            });
                        } else if is_progress {
                            // input_kind=4 として checkbox/radio/select と同じ仕組みに便乗し、
                            // 比率（0.0..1.0）の文字列表現を input_value に格納する
                            // （RenderElement に新規フィールドを増やさない簡略実装）。
                            self.elements.push(RenderElement {
                                text: String::new(),
                                font_size: 16,
                                color: 0xFFF8F8F2,
                                bg_color: None,
                                hover_bg_color: extract_hover_color_alt(
                                    styled,
                                    "background-color",
                                    "background",
                                ),
                                hover_color: extract_hover_color(styled, "color"),
                                hover_border_color: extract_hover_color(styled, "border-color"),
                                filter: styled.value("filter").unwrap_or_default(),
                                mix_blend_mode: styled.value("mix-blend-mode").unwrap_or_default(),
                                backdrop_filter: styled.value("backdrop-filter").unwrap_or_default(),
                                image_rendering: styled.value("image-rendering").unwrap_or_default(),
                                text_stroke_width: extract_text_stroke(styled).0,
                                text_stroke_color: extract_text_stroke(styled).1,
                                border_color: extract_border_color(styled, 0xFF6272A4),
                                border_style: extract_border_style(styled),
                                is_video: false,
                                video_src: String::new(),
                                is_link: false,
                                href: String::new(),
                                is_hr: false,
                                is_img: false,
                                canvas_ctx_id,
                                img_alt: String::new(),
                                is_input: false,
                                is_textarea: false,
                                is_button: false,
                                input_kind: 4,
                                input_value: alloc::format!("{}", progress_ratio),
                                element_id: el_id,
                                onclick,
                                width: layout.dimensions.content.width,
                                x_offset: layout.dimensions.content.x,
                                y_offset: layout.dimensions.content.y,
                                height: layout.dimensions.content.height,
                                border_radius,
                                z_index: self.inherited_paint_z,
                                paint_depth: self.inherited_paint_depth,
                                ..Default::default()
                            });
                        } else if is_input || is_textarea || is_select {
                            // --- checkbox / radio / select の状態を form_values に初期化 ---
                            let mut radio_group = String::new();
                            let mut input_value = String::new();
                            let mut select_options: alloc::vec::Vec<(String, String)> =
                                alloc::vec::Vec::new();

                            if input_kind == 1 || input_kind == 2 {
                                // checkbox / radio: value 属性（既定 "on"）と checked 初期状態。
                                input_value = attributes
                                    .get("value")
                                    .cloned()
                                    .unwrap_or_else(|| String::from("on"));
                                if input_kind == 2 {
                                    radio_group =
                                        attributes.get("name").cloned().unwrap_or_default();
                                }
                                let checked = attributes.contains_key("checked");
                                let init_v = if checked {
                                    input_value.clone()
                                } else {
                                    String::new()
                                };
                                if !el_id.is_empty() {
                                    self.initial_form_values
                                        .insert(el_id.clone(), init_v.clone());
                                    if !self.form_values.contains_key(&el_id) {
                                        // checked のときのみ value を、未チェックは空文字を格納。
                                        self.form_values.insert(el_id.clone(), init_v);
                                    }
                                }
                            } else if input_kind == 3 {
                                // select: option 一覧を収集し、選択中の value を form_values に格納。
                                let (opts, sel_idx) = collect_select_options(layout);
                                select_options = opts;
                                let init_v = select_options
                                    .get(sel_idx)
                                    .map(|(val, _)| val.clone())
                                    .unwrap_or_default();
                                if !el_id.is_empty() {
                                    self.initial_form_values
                                        .insert(el_id.clone(), init_v.clone());
                                    if !self.form_values.contains_key(&el_id) {
                                        self.form_values.insert(el_id.clone(), init_v);
                                    }
                                }
                            } else if input_kind == 5 {
                                // <input type="range">: min/max/step を select_options に
                                // (name, value) ペアとして格納する（RenderElement に新規
                                // フィールドを増やさず、select 用の Vec<(String,String)> を
                                // 流用する簡略実装。クリックで値を設定するのみでドラッグは非対応）。
                                let min_s =
                                    attributes.get("min").cloned().unwrap_or_else(|| String::from("0"));
                                let max_s = attributes
                                    .get("max")
                                    .cloned()
                                    .unwrap_or_else(|| String::from("100"));
                                let step_s = attributes
                                    .get("step")
                                    .cloned()
                                    .unwrap_or_else(|| String::from("1"));
                                let min_f: f32 = min_s.parse().unwrap_or(0.0);
                                let max_f: f32 = max_s.parse().unwrap_or(100.0);
                                select_options = alloc::vec![
                                    (String::from("min"), min_s),
                                    (String::from("max"), max_s),
                                    (String::from("step"), step_s),
                                ];
                                let default_v = alloc::format!("{}", (min_f + max_f) / 2.0);
                                let init_v = attributes.get("value").cloned().unwrap_or(default_v);
                                if !el_id.is_empty() {
                                    self.initial_form_values
                                        .insert(el_id.clone(), init_v.clone());
                                    if !self.form_values.contains_key(&el_id) {
                                        self.form_values.insert(el_id.clone(), init_v);
                                    }
                                }
                            } else {
                                // text / textarea: value 属性（textarea は子テキスト）を初期値に。
                                let mut val =
                                    attributes.get("value").cloned().unwrap_or(String::new());
                                if val.is_empty() && is_textarea {
                                    val = get_text_content(layout);
                                }
                                if !el_id.is_empty() {
                                    self.initial_form_values.insert(el_id.clone(), val.clone());
                                    if !self.form_values.contains_key(&el_id) {
                                        self.form_values.insert(el_id.clone(), val);
                                    }
                                }
                                // autofocus 属性: ページロード時点でこの入力欄へフォーカス。
                                // (まだどこにもフォーカスが無い場合のみ。DDG 検索ボックス等で有効)
                                if !el_id.is_empty()
                                    && self.focused_id.is_none()
                                    && attributes.contains_key("autofocus")
                                {
                                    self.focused_id = Some(el_id.clone());
                                    // `document.activeElement`（HTML5。丸ごと未対応
                                    // だった）が実際のフォーカス状態を反映できるよう、
                                    // JS 側の `DomBridge::focused_idx` にも同期する。
                                    let didx = self.js_runtime.dom.borrow().get_element_by_id(&el_id);
                                    self.js_runtime.dom.borrow_mut().focused_idx = didx;
                                }
                            }

                            self.elements.push(RenderElement {
                                text: String::new(),
                                font_size: 16,
                                color: 0xFFF8F8F2,
                                bg_color: None,
                                hover_bg_color: extract_hover_color_alt(
                                    styled,
                                    "background-color",
                                    "background",
                                ),
                                hover_color: extract_hover_color(styled, "color"),
                                hover_border_color: extract_hover_color(styled, "border-color"),
                                filter: styled.value("filter").unwrap_or_default(),
                                mix_blend_mode: styled.value("mix-blend-mode").unwrap_or_default(),
                                backdrop_filter: styled.value("backdrop-filter").unwrap_or_default(),
                                image_rendering: styled.value("image-rendering").unwrap_or_default(),
                                text_stroke_width: extract_text_stroke(styled).0,
                                text_stroke_color: extract_text_stroke(styled).1,
                                marker_color: extract_marker_color(styled),
                                marker_font_size: extract_marker_font_size(styled),
                                marker_content: extract_marker_content(styled),
                                focus_bg_color: extract_focus_color_alt(styled, "background-color", "background"),
                                focus_color: extract_focus_color(styled, "color"),
                                focus_border_color: extract_focus_color(styled, "border-color"),
                                active_bg_color: extract_active_color_alt(styled, "background-color", "background"),
                                active_color: extract_active_color(styled, "color"),
                                active_border_color: extract_active_color(styled, "border-color"),
                                border_color: extract_border_color(styled, 0xFF6272A4),
                                border_style: extract_border_style(styled),
                                font_bold: false,
                                underline: false,
                                is_video: false,
                                video_src: String::new(),
                                is_link: false,
                                href: String::new(),
                                is_hr: false,
                                is_img: false,
                                canvas_ctx_id,
                                img_alt: String::new(),
                                // checkbox/radio/select はテキスト編集対象外なので is_input=false。
                                is_input: is_input && input_kind == 0,
                                is_textarea,
                                caret_color: styled.value("caret-color").and_then(|v| parse_color(&v)),
                                accent_color: styled.value("accent-color").and_then(|v| parse_color(&v)),
                                placeholder_color: extract_placeholder_color(styled),
                                placeholder: attributes.get("placeholder").cloned().unwrap_or_default(),
                                is_button: false,
                                input_kind,
                                radio_group,
                                input_value,
                                select_options,
                                button_icon: 0,
                                element_id: el_id,
                                scroll_margin_top: styled.value("scroll-margin-top").map(|v| parse_px_val(&v)).unwrap_or(0),
                                onclick,
                                form_action: String::new(),
                                form_method: String::new(),
                                width: layout.dimensions.content.width,
                                x_offset: layout.dimensions.content.x,
                                y_offset: layout.dimensions.content.y,
                                height: layout.dimensions.content.height,
                                border_radius,
                                is_li: false,
                                li_num: None,
                                is_blockquote: false,
                                z_index: self.inherited_paint_z,
                                paint_depth: self.inherited_paint_depth,
                                ..Default::default()
                            });
                        } else if is_button {
                            let mut text = get_text_content(layout);
                            let class_val =
                                attributes.get("class").cloned().unwrap_or(String::new());
                            let mut icon_id = 0;
                            if class_val == "save_btn" {
                                icon_id = 1;
                            } else if class_val == "load_btn" {
                                icon_id = 2;
                            } else if class_val == "wrap_btn" {
                                icon_id = 3;
                            }

                            if el_id == "wrap_status" {
                                text = if self.editor_wrap {
                                    String::from("Wrap: ON")
                                } else {
                                    String::from("Wrap: OFF")
                                };
                            } else if text.is_empty() {
                                text = attributes
                                    .get("value")
                                    .cloned()
                                    .unwrap_or(String::from("Button"));
                            }
                            self.elements.push(RenderElement {
                                text,
                                font_size: 16,
                                color: 0xFFF8F8F2,
                                bg_color: None,
                                hover_bg_color: extract_hover_color_alt(
                                    styled,
                                    "background-color",
                                    "background",
                                ),
                                hover_color: extract_hover_color(styled, "color"),
                                hover_border_color: extract_hover_color(styled, "border-color"),
                                filter: styled.value("filter").unwrap_or_default(),
                                mix_blend_mode: styled.value("mix-blend-mode").unwrap_or_default(),
                                backdrop_filter: styled.value("backdrop-filter").unwrap_or_default(),
                                image_rendering: styled.value("image-rendering").unwrap_or_default(),
                                text_stroke_width: extract_text_stroke(styled).0,
                                text_stroke_color: extract_text_stroke(styled).1,
                                marker_color: extract_marker_color(styled),
                                marker_font_size: extract_marker_font_size(styled),
                                marker_content: extract_marker_content(styled),
                                focus_bg_color: extract_focus_color_alt(styled, "background-color", "background"),
                                focus_color: extract_focus_color(styled, "color"),
                                focus_border_color: extract_focus_color(styled, "border-color"),
                                active_bg_color: extract_active_color_alt(styled, "background-color", "background"),
                                active_color: extract_active_color(styled, "color"),
                                active_border_color: extract_active_color(styled, "border-color"),
                                border_color: extract_border_color(styled, 0xFF6272A4),
                                border_style: extract_border_style(styled),
                                font_bold: false,
                                underline: false,
                                is_video: false,
                                video_src: String::new(),
                                is_link: false,
                                href: String::new(),
                                is_hr: false,
                                is_img: false,
                                canvas_ctx_id,
                                img_alt: String::new(),
                                is_input: false,
                                is_textarea: false,
                                is_button: true,
                                is_reset: is_reset_btn,
                                button_icon: icon_id,
                                element_id: el_id,
                                scroll_margin_top: styled.value("scroll-margin-top").map(|v| parse_px_val(&v)).unwrap_or(0),
                                onclick,
                                form_action: current_form_action.into(),
                                form_method: current_form_method.into(),
                                width: layout.dimensions.content.width,
                                x_offset: layout.dimensions.content.x,
                                y_offset: layout.dimensions.content.y,
                                height: layout.dimensions.content.height,
                                border_radius,
                                is_li: false,
                                li_num: None,
                                is_blockquote: false,
                                z_index: self.inherited_paint_z,
                                paint_depth: self.inherited_paint_depth,
                                ..Default::default()
                            });
                        }
                    }
                    crate::os_lib::dom::NodeType::Text(text) => {
                        let mut display_text = text.clone();
                        if !parent_id.is_empty() {
                            if let Some(updated_text) = self.dom_contents.get(parent_id) {
                                display_text = updated_text.clone();
                            }
                        }
                        // text-transform（uppercase / lowercase / capitalize）。
                        if let Some(tt) = styled.specified_values.get("text-transform") {
                            display_text =
                                crate::os_lib::css::apply_text_transform(&display_text, tt);
                        }
                        // hyphens: ソフトハイフン(U+00AD, `&shy;`)は、実際に行分割される箇所でだけ
                        // "-" として見せるのが仕様（既定値 manual）だが、この処理系は
                        // 折り返し位置を決めるアルゴリズムにハイフン挿入判定を組み込んでいないため、
                        // 常に非表示にする簡略実装（`hyphens:none` と同じ扱い）。誤った箇所に
                        // ハイフンが出てしまうより、常に非表示の方が実害が小さいとの判断。
                        if display_text.contains('\u{00AD}') {
                            display_text = display_text.replace('\u{00AD}', "");
                        }
                        // tab-size: タブ文字(U+0009)を N 個の半角スペースへ展開する
                        // （実ブラウザのようなタブ位置ストップ計算はせず、単純な固定幅展開）。
                        if display_text.contains('\t') {
                            let tab_size = styled
                                .value("tab-size")
                                .and_then(|v| v.trim().parse::<usize>().ok())
                                .filter(|n| *n > 0)
                                .unwrap_or(8)
                                .min(64);
                            display_text = display_text.replace('\t', &" ".repeat(tab_size));
                        }
                        let is_link = !current_href.is_empty();
                        let (default_text_color, default_link_color) = self.default_text_colors();
                        let default_color = if is_link {
                            default_link_color
                        } else {
                            default_text_color
                        };
                        let mut final_color = current_color.unwrap_or(default_color);
                        if is_link {
                            final_color = default_link_color;
                        }
                        let mut final_bg = None;
                        // 【2026-08-03】テキスト要素へ `font-family` を渡す。
                        //
                        // `RenderElement` の生成箇所は 12 あるが、
                        // `font_family` を設定していたのは 2 箇所だけで、
                        // **本文テキストの要素は空のまま**だった。
                        // そのため Web フォントを取得・登録できても
                        // 描画で選ばれなかった（実測: 使われたのは
                        // アイコンフォントだけ）。
                        //
                        // `font-family` は継承プロパティなので、カスケード済みの
                        // `styled` から引けば子要素でも解決済みの値が得られる。
                        let final_font_family = styled
                            .value("font-family")
                            .map(|v| String::from(v.trim()))
                            .unwrap_or_default();
                        let mut final_size = current_font_size;
                        let mut final_bold = current_font_bold;
                        let mut final_italic = current_font_italic;
                        let mut final_underline = current_underline;
                        let mut final_line_through = current_line_through;
                        let mut final_overline = current_overline;
                        let mut final_decoration_color = current_decoration_color;
                        let mut final_decoration_style = current_decoration_style.clone();
                        let mut final_decoration_thickness = current_decoration_thickness;
                        let mut final_decoration_underline_offset = current_decoration_underline_offset;
                        if let Some(c_str) = styled.specified_values.get("color") {
                            if let Some(c_val) = parse_color(c_str) {
                                final_color = c_val;
                            }
                        }
                        if let Some(bg_val) =
                            extract_color(styled, "background-color", "background")
                        {
                            final_bg = Some(bg_val);
                        }
                        if let Some(sz_str) = styled.specified_values.get("font-size") {
                            if let Some(sz_val) = parse_font_size(sz_str) {
                                final_size = sz_val;
                            }
                        }
                        if let Some(fw_str) = styled.specified_values.get("font-weight") {
                            let fw_l = fw_str.trim().to_lowercase();
                            if fw_l == "bold"
                                || fw_l == "bolder"
                                || fw_l.parse::<u32>().unwrap_or(400) >= 700
                            {
                                final_bold = true;
                            }
                        }
                        // letter-spacing/word-spacing の calc() 解決用の基準幅（% 解決の基準。
                        // letter-spacing/word-spacing は通常 % を取らないため主に
                        // `calc(1px + 1px)` 等の用途）。この時点ではまだ available_w が
                        // 未計算のため、同じフォールバック規則をここでも使う。
                        let ls_ws_base_w = if layout.dimensions.content.width > 0 {
                            layout.dimensions.content.width
                        } else {
                            800
                        };
                        // letter-spacing（文字間 px、負も可）。normal/未指定/不正は 0。
                        // calc()/min()/max()/clamp() にも対応（os_lib::layout の段落高さ計測側
                        // と同期させる必要があるため同じ規則を使う）。
                        let final_ls = match styled.value("letter-spacing") {
                            None => 0i32,
                            Some(s) => {
                                let t = s.trim();
                                if t.is_empty() || t.eq_ignore_ascii_case("normal") {
                                    0
                                } else if t.starts_with("calc(")
                                    || t.starts_with("min(")
                                    || t.starts_with("max(")
                                    || t.starts_with("clamp(")
                                {
                                    crate::os_lib::css::eval_css_math(t, ls_ws_base_w).unwrap_or(0)
                                } else if let Some(num) = t.strip_suffix("px") {
                                    num.trim()
                                        .parse::<f32>()
                                        .ok()
                                        .map(|f| f as i32)
                                        .unwrap_or(0)
                                } else {
                                    t.parse::<f32>().ok().map(|f| f as i32).unwrap_or(0)
                                }
                            }
                        };
                        // word-spacing（半角スペース1文字ごとに加える px、負も可）。normal/未指定/不正は 0。
                        let final_ws = match styled.value("word-spacing") {
                            None => 0i32,
                            Some(s) => {
                                let t = s.trim();
                                if t.is_empty() || t.eq_ignore_ascii_case("normal") {
                                    0
                                } else if t.starts_with("calc(")
                                    || t.starts_with("min(")
                                    || t.starts_with("max(")
                                    || t.starts_with("clamp(")
                                {
                                    crate::os_lib::css::eval_css_math(t, ls_ws_base_w).unwrap_or(0)
                                } else if let Some(num) = t.strip_suffix("px") {
                                    num.trim()
                                        .parse::<f32>()
                                        .ok()
                                        .map(|f| f as i32)
                                        .unwrap_or(0)
                                } else {
                                    t.parse::<f32>().ok().map(|f| f as i32).unwrap_or(0)
                                }
                            }
                        };
                        // text-emphasis-style: "none"/未指定/空は無し。クォート付きカスタム
                        // マークはクォートを剥がして1文字目だけを使う簡略実装。
                        let final_emphasis_style = match styled.value("text-emphasis-style") {
                            None => String::new(),
                            Some(s) => {
                                let t = s.trim();
                                if t.is_empty() || t.eq_ignore_ascii_case("none") {
                                    String::new()
                                } else {
                                    String::from(t.trim_matches(|c| c == '"' || c == '\''))
                                }
                            }
                        };
                        let final_emphasis_color = styled
                            .value("text-emphasis-color")
                            .and_then(|s| crate::os_lib::css::parse_color(&s));
                        if let Some(fs_str) = styled.specified_values.get("font-style") {
                            let fs_l = fs_str.trim().to_lowercase();
                            if fs_l == "italic" || fs_l == "oblique" {
                                final_italic = true;
                            } else if fs_l == "normal" {
                                final_italic = false;
                            }
                        }
                        if let Some(td_str) = styled.specified_values.get("text-decoration") {
                            let (u, lt, ov, is_none, style, color) =
                                parse_text_decoration_shorthand(td_str);
                            if is_none {
                                final_underline = false;
                                final_line_through = false;
                                final_overline = false;
                            } else {
                                if u {
                                    final_underline = true;
                                }
                                if lt {
                                    final_line_through = true;
                                }
                                if ov {
                                    final_overline = true;
                                }
                                if let Some(s) = style {
                                    final_decoration_style = s;
                                }
                                if let Some(c) = color {
                                    final_decoration_color = Some(c);
                                }
                            }
                        }
                        if let Some(tdl) = styled.specified_values.get("text-decoration-line") {
                            let (u, lt, ov, is_none, _, _) = parse_text_decoration_shorthand(tdl);
                            if is_none {
                                final_underline = false;
                                final_line_through = false;
                                final_overline = false;
                            } else {
                                if u {
                                    final_underline = true;
                                }
                                if lt {
                                    final_line_through = true;
                                }
                                if ov {
                                    final_overline = true;
                                }
                            }
                        }
                        if let Some(dc) = styled.specified_values.get("text-decoration-color") {
                            if let Some(c) = parse_color(dc.trim()) {
                                final_decoration_color = Some(c);
                            }
                        }
                        if let Some(ds) = styled.specified_values.get("text-decoration-style") {
                            let ds_l = ds.trim().to_lowercase();
                            if matches!(ds_l.as_str(), "solid" | "dotted" | "dashed" | "wavy" | "double") {
                                final_decoration_style = ds_l;
                            }
                        }
                        if let Some(dt) = styled.specified_values.get("text-decoration-thickness") {
                            let dt_t = dt.trim();
                            if !dt_t.eq_ignore_ascii_case("auto") && !dt_t.eq_ignore_ascii_case("from-font") {
                                final_decoration_thickness = parse_px_val(dt_t).max(1);
                            }
                        }
                        if let Some(uo) = styled.specified_values.get("text-underline-offset") {
                            let uo_t = uo.trim();
                            if !uo_t.eq_ignore_ascii_case("auto") {
                                final_decoration_underline_offset = parse_px_val(uo_t);
                            }
                        }

                        let is_actual_link = is_link;
                        let link_href = String::from(current_href);

                        // text-indent: このテキストノードの最初の行だけを右へずらす簡易実装。
                        // 折返し幅（available_w）自体は変更しないため、vector_font 側の行数
                        // 計算との同期は崩れない（インデント分だけ最初の行の右端が浅く狭まる
                        // 近似になるが、実用上の見た目への影響は小さい）。`%`/`em`が丸ごと
                        // 未対応だったバグの詳細は`resolve_text_indent`のdocコメント参照。
                        let text_indent_px: i32 = styled
                            .value("text-indent")
                            .map(|s| resolve_text_indent(&s, layout.dimensions.content.width, final_size))
                            .unwrap_or(0);

                        // ::first-line: このテキストノードの最初の行（line_index==0）にのみ
                        // color/font-size/font-weight/font-style を上書きする簡易実装。
                        // RenderElement は既に行ごとに分割されているため、::before/::after と
                        // 同じ合成プロパティ経由の値を line_index==0 の時だけ適用すればよい。
                        let fl_color = styled
                            .value("x-first-line-color")
                            .and_then(|s| parse_color(&s));
                        let fl_size = styled
                            .value("x-first-line-font-size")
                            .and_then(|s| parse_font_size(&s));
                        let fl_bold = styled.value("x-first-line-font-weight").map(|s| {
                            let l = s.trim().to_lowercase();
                            l == "bold" || l == "bolder" || l.parse::<u32>().unwrap_or(400) >= 700
                        });
                        let fl_italic = styled.value("x-first-line-font-style").map(|s| {
                            let l = s.trim().to_lowercase();
                            l == "italic" || l == "oblique"
                        });

                        // ::first-letter: このテキストノードの最初の1文字だけを別の RenderElement
                        // として切り出し、color/font-size/font-weight/font-style を上書きする。
                        let flt_color = styled
                            .value("x-first-letter-color")
                            .and_then(|s| parse_color(&s));
                        let flt_size = styled
                            .value("x-first-letter-font-size")
                            .and_then(|s| parse_font_size(&s));
                        let flt_bold = styled.value("x-first-letter-font-weight").map(|s| {
                            let l = s.trim().to_lowercase();
                            l == "bold" || l == "bolder" || l.parse::<u32>().unwrap_or(400) >= 700
                        });
                        let flt_italic = styled.value("x-first-letter-font-style").map(|s| {
                            let l = s.trim().to_lowercase();
                            l == "italic" || l == "oblique"
                        });
                        let has_first_letter_override = flt_color.is_some()
                            || flt_size.is_some()
                            || flt_bold.is_some()
                            || flt_italic.is_some();

                        // white-space / text-overflow / word-break from this node's own CSS
                        let node_white_space_nowrap = styled
                            .specified_values
                            .get("white-space")
                            .map(|v| v.trim() == "nowrap")
                            .unwrap_or(false);
                        let node_white_space_pre_wrap = styled
                            .specified_values
                            .get("white-space")
                            .map(|v| v.trim() == "pre-wrap" || v.trim() == "pre-line")
                            .unwrap_or(false);
                        let node_word_break_all = styled
                            .value("word-break")
                            .map(|v| v.trim() == "break-all" || v.trim() == "break-word")
                            .unwrap_or(false)
                            || styled
                                .value("overflow-wrap")
                                .map(|v| v.trim() == "break-word" || v.trim() == "anywhere")
                                .unwrap_or(false)
                            || styled
                                .value("word-wrap")
                                .map(|v| v.trim() == "break-word" || v.trim() == "anywhere")
                                .unwrap_or(false);
                        let node_text_overflow_ellipsis = styled
                            .specified_values
                            .get("text-overflow")
                            .map(|v| v.trim() == "ellipsis")
                            .unwrap_or(false);
                        // `text-overflow:ellipsis` は `direction:rtl` では省略記号を先頭（視覚上の
                        // 左）に出し、末尾ではなく先頭側の文字を切り詰めるべき（CSS仕様）。
                        // 以前はこの区別が無く、rtl でも常に末尾を切り詰め末尾に "…" を
                        // 付けていたため、rtl テキストの省略位置が仕様と逆になっていた。
                        let node_is_rtl = styled
                            .value("direction")
                            .map(|v| v.trim().eq_ignore_ascii_case("rtl"))
                            .unwrap_or(false);

                        if !display_text.trim().is_empty() {
                            let available_w = if layout.dimensions.content.width > 0 {
                                layout.dimensions.content.width
                            } else {
                                800
                            };
                            let mut current_line = String::new();
                            let mut current_line_w = 0i32;

                            // line-height の解釈
                            let mut line_height = (final_size + 4) as i32;
                            if let Some(lh_str) = styled.value("line-height") {
                                line_height = parse_line_height(&lh_str, final_size);
                            }

                            // white-space: nowrap — emit entire text as one RenderElement
                            if node_white_space_nowrap {
                                let text_w = crate::kernel::vector_font::get_vector_string_width_ls_ws(
                                    &display_text,
                                    final_size,
                                    final_ls,
                                    final_ws,
                                ) as i32;
                                let line_y = layout.dimensions.content.y;
                                self.elements.push(RenderElement {
                                    text: display_text.clone(),
                                    font_family: final_font_family.clone(),
                                    font_size: fl_size.unwrap_or(final_size),
                                    letter_spacing: final_ls,
                                    word_spacing: final_ws,
                                    text_emphasis_style: final_emphasis_style.clone(),
                                    text_emphasis_color: final_emphasis_color,
                                    color: fl_color.unwrap_or(final_color),
                                    bg_color: final_bg,
                                    font_bold: fl_bold.unwrap_or(final_bold),
                                    font_italic: fl_italic.unwrap_or(final_italic),
                                    underline: final_underline,
                                    line_through: final_line_through,
                                    overline: final_overline,
                                    decoration_color: final_decoration_color,
                                    decoration_style: final_decoration_style.clone(),
                                    decoration_thickness: final_decoration_thickness,
                                    decoration_underline_offset: final_decoration_underline_offset,
                                    is_link: is_actual_link,
                                    pointer_events_none: current_pointer_events_none,
                                    href: link_href.clone(),
                                    width: text_w,
                                    x_offset: layout.dimensions.content.x,
                                    y_offset: line_y,
                                    height: line_height,
                                    white_space_nowrap: true,
                                    text_overflow_ellipsis: node_text_overflow_ellipsis,
                                    text_overflow_rtl: node_is_rtl,
                                    z_index: self.inherited_paint_z,
                        paint_depth: self.inherited_paint_depth,
                        ..Default::default()
                                });
                                if is_actual_link {
                                    self.links.push(HyperlinkArea {
                                        href: link_href.clone(),
                                        x0: layout.dimensions.content.x,
                                        y0: line_y,
                                        x1: layout.dimensions.content.x + text_w,
                                        y1: line_y + line_height,
                                    });
                                }
                                // skip normal text rendering
                            } else {
                                // 重要: この折返し規則 ('\n' 強制改行・行頭/行末禁則・改行時に
                                // 先頭文字を即消費) は vector_font::get_string_wrapped_size と
                                // 完全に同一でなければならない。ズレると layout の段落高さと
                                // 行数が食い違い <hr> 等が重なる。変更時は必ず両方を同期すること。
                                let mut line_index = 0;
                                let line_clamp_max: Option<usize> = styled
                                    .value("-webkit-line-clamp")
                                    .or_else(|| styled.value("line-clamp"))
                                    .and_then(|s| s.trim().parse::<usize>().ok());
                                let mut prev_char: Option<char> = None;
                                let mut prev_advance = 0i32;

                                // ::first-letter: 先頭1文字を別 RenderElement として切り出し、
                                // 残りのテキストは通常どおり折返す（先頭文字ぶんだけ x をずらす）。
                                // 注意: 折返し判定に使う文字列から1文字減るため、極めて稀に
                                // os_lib::layout 側の段落高さ計算（元の文字列全体を使う）と
                                // 改行位置が1文字ぶんずれる可能性がある簡略実装（text-indent と同種の近似）。
                                let mut first_letter_x_shift = 0i32;
                                let first_letter_iter_buf;
                                // CSS の ::first-letter は前置の句読点・引用符（例: `"Hello`
                                // の `"H`、`«Bonjour»` の `«B`）を実際の最初の文字と一体で扱う
                                // 仕様（CSS Pseudo-Elements §3.2）のため、先に句読点類を読み飛ばして
                                // fc_str へ蓄積してから実際の最初の文字を1つ加える。
                                fn is_first_letter_leading_punct(c: char) -> bool {
                                    matches!(
                                        c,
                                        '!' | '"' | '#' | '$' | '%' | '&' | '\'' | '(' | ')'
                                            | '*' | '+' | ',' | '-' | '.' | '/' | ':' | ';'
                                            | '<' | '=' | '>' | '?' | '@' | '[' | '\\' | ']'
                                            | '^' | '_' | '`' | '{' | '|' | '}' | '~'
                                            | '¡' | '¿' | '«' | '»'
                                            | '\u{201C}' | '\u{201D}' | '\u{2018}' | '\u{2019}'
                                    )
                                }
                                let wrap_text: &str = if has_first_letter_override {
                                    let mut chars_iter = display_text.chars();
                                    let mut fc_str = String::new();
                                    loop {
                                        let mut probe = chars_iter.clone();
                                        match probe.next() {
                                            Some(c) if is_first_letter_leading_punct(c) => {
                                                fc_str.push(c);
                                                chars_iter = probe;
                                            }
                                            _ => break,
                                        }
                                    }
                                    if let Some(fc) = chars_iter.next() {
                                        let fc_size = flt_size.unwrap_or(final_size);
                                        let fc_color = flt_color.unwrap_or(final_color);
                                        let fc_bold = flt_bold.unwrap_or(final_bold);
                                        let fc_italic = flt_italic.unwrap_or(final_italic);
                                        fc_str.push(fc);
                                        let fc_w = crate::kernel::vector_font::get_vector_string_width(
                                            &fc_str, fc_size,
                                        ) as i32;
                                        let line_y = layout.dimensions.content.y;
                                        self.elements.push(RenderElement {
                                            text: fc_str,
                                    font_family: final_font_family.clone(),
                                            font_size: fc_size,
                                            color: fc_color,
                                            bg_color: final_bg,
                                            font_bold: fc_bold,
                                            font_italic: fc_italic,
                                            underline: final_underline,
                                            line_through: final_line_through,
                                            overline: final_overline,
                                            decoration_color: final_decoration_color,
                                            decoration_style: final_decoration_style.clone(),
                                            decoration_thickness: final_decoration_thickness,
                                            decoration_underline_offset: final_decoration_underline_offset,
                                            is_link: is_actual_link,
                                            pointer_events_none: current_pointer_events_none,
                                            href: link_href.clone(),
                                            width: fc_w,
                                            x_offset: layout.dimensions.content.x + text_indent_px,
                                            y_offset: line_y,
                                            height: line_height,
                                            z_index: self.inherited_paint_z,
                        paint_depth: self.inherited_paint_depth,
                        ..Default::default()
                                        });
                                        first_letter_x_shift = fc_w;
                                        first_letter_iter_buf = String::from(chars_iter.as_str());
                                        &first_letter_iter_buf
                                    } else {
                                        display_text.as_str()
                                    }
                                } else {
                                    display_text.as_str()
                                };

                                let chars = wrap_text.chars().peekable();
                                for c in chars {
                                    if c == '\n' {
                                        if node_white_space_pre_wrap {
                                            // pre-wrap: treat '\n' as an actual newline
                                        } else {
                                            // collapse mode: '\n' inside text that somehow survived tree.rs flattening
                                            // (usually tree.rs flattens it to a space, but if it got here, we still break)
                                        }
                                        let line_y =
                                            layout.dimensions.content.y + line_index * line_height;
                                        self.elements.push(RenderElement {
                                            text: current_line.clone(),
                                        font_family: final_font_family.clone(),
                                            font_size: if line_index == 0 { fl_size.unwrap_or(final_size) } else { final_size },
                                            letter_spacing: final_ls,
                                            word_spacing: final_ws,
                                            text_emphasis_style: final_emphasis_style.clone(),
                                            text_emphasis_color: final_emphasis_color,
                                            color: if line_index == 0 { fl_color.unwrap_or(final_color) } else { final_color },
                                            bg_color: final_bg,
                                            hover_bg_color: extract_hover_color_alt(
                                                styled,
                                                "background-color",
                                                "background",
                                            ),
                                            hover_color: extract_hover_color(styled, "color"),
                                            hover_border_color: extract_hover_color(
                                                styled,
                                                "border-color",
                                            ),
                                            filter: styled.value("filter").unwrap_or_default(),
                                            mix_blend_mode: styled.value("mix-blend-mode").unwrap_or_default(),
                                            backdrop_filter: styled.value("backdrop-filter").unwrap_or_default(),
                                image_rendering: styled.value("image-rendering").unwrap_or_default(),
                                text_stroke_width: extract_text_stroke(styled).0,
                                text_stroke_color: extract_text_stroke(styled).1,
                                            marker_color: extract_marker_color(styled),
                                            marker_font_size: extract_marker_font_size(styled),
                                            marker_content: extract_marker_content(styled),
                                            focus_bg_color: extract_focus_color_alt(styled, "background-color", "background"),
                                            focus_color: extract_focus_color(styled, "color"),
                                            focus_border_color: extract_focus_color(styled, "border-color"),
                                            active_bg_color: extract_active_color_alt(styled, "background-color", "background"),
                                            active_color: extract_active_color(styled, "color"),
                                            active_border_color: extract_active_color(styled, "border-color"),
                                            border_color: None,
                                            border_style: super::BorderStyle::None,
                                            font_bold: if line_index == 0 { fl_bold.unwrap_or(final_bold) } else { final_bold },
                                            font_italic: if line_index == 0 { fl_italic.unwrap_or(final_italic) } else { final_italic },
                                            underline: final_underline,
                                            line_through: final_line_through,
                                            overline: final_overline,
                                            decoration_color: final_decoration_color,
                                            decoration_style: final_decoration_style.clone(),
                                            decoration_thickness: final_decoration_thickness,
                                            decoration_underline_offset: final_decoration_underline_offset,
                                            is_video: false,
                                            video_src: String::new(),
                                            is_link: is_actual_link,
                                            pointer_events_none: current_pointer_events_none,
                                            href: link_href.clone(),
                                            is_hr: false,
                                            is_img: false,
                                canvas_ctx_id: None,
                                            img_alt: String::new(),
                                            is_input: false,
                                            is_textarea: false,
                                            is_button: false,
                                            button_icon: 0,
                                            element_id: String::new(),
                                            onclick: String::new(),
                                            form_action: String::new(),
                                            form_method: String::new(),
                                            width: current_line_w,
                                            x_offset: layout.dimensions.content.x + if line_index == 0 { text_indent_px + first_letter_x_shift } else { 0 },
                                            y_offset: line_y,
                                            height: line_height,
                                            border_radius: (0, 0, 0, 0),
                                            is_li: parent_tag == "li" && line_index == 0,
                                            li_num: if parent_tag == "li" && line_index == 0 {
                                                if let Some((true, count)) = list_state {
                                                    Some(count)
                                                } else {
                                                    None
                                                }
                                            } else {
                                                None
                                            },
                                            list_style_type: extract_list_style(styled),
                                            list_style_inside: extract_list_style_inside(styled),
                                            list_style_image: extract_list_style_image(styled),
                                            is_blockquote: false,
                                            z_index: self.inherited_paint_z,
                        paint_depth: self.inherited_paint_depth,
                        ..Default::default()
                                        });

                                        if is_actual_link {
                                            self.links.push(HyperlinkArea {
                                                href: link_href.clone(),
                                                x0: layout.dimensions.content.x,
                                                y0: line_y,
                                                x1: layout.dimensions.content.x + current_line_w,
                                                y1: line_y + line_height,
                                            });
                                        }

                                        line_index += 1;
                                        // `-webkit-line-clamp`（テキスト中の明示的な`\n`による
                                        // 改行フラッシュ経路）。同種の改行フラッシュがもう1箇所
                                        // （自然な折返しオーバーフロー経路。約80行下）にもあり、
                                        // そちらにしかこのチェックが配線されていなかったため、
                                        // `\n`を含むテキストでは`-webkit-line-clamp`が効かない
                                        // バグだった（2026-07-22発見・修正）。
                                        if let Some(max) = line_clamp_max {
                                            if line_index >= max as i32 {
                                                break;
                                            }
                                        }
                                        current_line.clear();
                                        current_line_w = 0;
                                        prev_char = None;
                                        prev_advance = 0;
                                        continue;
                                    }

                                    let c_str = {
                                        let mut s = String::new();
                                        s.push(c);
                                        s
                                    };
                                    let advance =
                                        crate::kernel::vector_font::get_vector_string_width(
                                            &c_str, final_size,
                                        ) as i32
                                            + final_ls
                                            + if c == ' ' { final_ws } else { 0 };

                                    if current_line_w > 0 && current_line_w + advance > available_w
                                    {
                                        // 行頭禁則
                                        if !node_word_break_all && crate::kernel::vector_font::is_line_start_forbidden(c) {
                                            current_line.push(c);
                                            current_line_w += advance;
                                            prev_char = Some(c);
                                            prev_advance = advance;
                                            continue;
                                        }

                                        // 【2026-09-04】単語の途中では折り返さない。
                                        //
                                        // 従来は 1 文字単位で切っており、英単語が
                                        // 語中で割れていた（ナビ項目 "Papers" が
                                        // 縦一列に潰れる形で現れた）。CSS の既定
                                        // （`overflow-wrap: normal`）では単語は
                                        // 分割せず、収まらなければはみ出す。
                                        //
                                        // 規則は計測側（`vector_font` の
                                        // `get_string_wrapped_size_ext`）と同一に保つ。
                                        // ずれると箱の大きさと文字の位置が食い違う。
                                        if let Some(pc) = prev_char {
                                            if !crate::os_lib::layout::line_break::can_break_between(
                                                pc,
                                                c,
                                                node_word_break_all,
                                            ) {
                                                current_line.push(c);
                                                current_line_w += advance;
                                                prev_char = Some(c);
                                                prev_advance = advance;
                                                continue;
                                            }
                                        }

                                        // 行末禁則
                                        let mut send_prev = false;
                                        if !node_word_break_all {
                                            if let Some(pc) = prev_char {
                                                if crate::kernel::vector_font::is_line_end_forbidden(pc)
                                                {
                                                    send_prev = true;
                                                }
                                            }
                                        }

                                        let actual_w;
                                        let mut next_line = String::new();
                                        let mut next_line_w = 0;

                                        if send_prev {
                                            if let Some(pc) = prev_char {
                                                current_line.pop();
                                                next_line.push(pc);
                                                next_line_w = prev_advance;
                                            }
                                            actual_w = current_line_w - prev_advance;
                                        } else {
                                            actual_w = current_line_w;
                                        }

                                        let line_y =
                                            layout.dimensions.content.y + line_index * line_height;
                                        self.elements.push(RenderElement {
                                            text: current_line.clone(),
                                        font_family: final_font_family.clone(),
                                            font_size: if line_index == 0 { fl_size.unwrap_or(final_size) } else { final_size },
                                            letter_spacing: final_ls,
                                            word_spacing: final_ws,
                                            text_emphasis_style: final_emphasis_style.clone(),
                                            text_emphasis_color: final_emphasis_color,
                                            color: if line_index == 0 { fl_color.unwrap_or(final_color) } else { final_color },
                                            bg_color: final_bg,
                                            hover_bg_color: extract_hover_color_alt(
                                                styled,
                                                "background-color",
                                                "background",
                                            ),
                                            hover_color: extract_hover_color(styled, "color"),
                                            hover_border_color: extract_hover_color(
                                                styled,
                                                "border-color",
                                            ),
                                            filter: styled.value("filter").unwrap_or_default(),
                                            mix_blend_mode: styled.value("mix-blend-mode").unwrap_or_default(),
                                            backdrop_filter: styled.value("backdrop-filter").unwrap_or_default(),
                                image_rendering: styled.value("image-rendering").unwrap_or_default(),
                                text_stroke_width: extract_text_stroke(styled).0,
                                text_stroke_color: extract_text_stroke(styled).1,
                                            marker_color: extract_marker_color(styled),
                                            marker_font_size: extract_marker_font_size(styled),
                                            marker_content: extract_marker_content(styled),
                                            focus_bg_color: extract_focus_color_alt(styled, "background-color", "background"),
                                            focus_color: extract_focus_color(styled, "color"),
                                            focus_border_color: extract_focus_color(styled, "border-color"),
                                            active_bg_color: extract_active_color_alt(styled, "background-color", "background"),
                                            active_color: extract_active_color(styled, "color"),
                                            active_border_color: extract_active_color(styled, "border-color"),
                                            border_color: None,
                                            border_style: super::BorderStyle::None,
                                            font_bold: if line_index == 0 { fl_bold.unwrap_or(final_bold) } else { final_bold },
                                            font_italic: if line_index == 0 { fl_italic.unwrap_or(final_italic) } else { final_italic },
                                            underline: final_underline,
                                            line_through: final_line_through,
                                            overline: final_overline,
                                            decoration_color: final_decoration_color,
                                            decoration_style: final_decoration_style.clone(),
                                            decoration_thickness: final_decoration_thickness,
                                            decoration_underline_offset: final_decoration_underline_offset,
                                            is_video: false,
                                            video_src: String::new(),
                                            is_link: is_actual_link,
                                            pointer_events_none: current_pointer_events_none,
                                            href: link_href.clone(),
                                            is_hr: false,
                                            is_img: false,
                                canvas_ctx_id: None,
                                            img_alt: String::new(),
                                            is_input: false,
                                            is_textarea: false,
                                            is_button: false,
                                            button_icon: 0,
                                            element_id: String::new(),
                                            onclick: String::new(),
                                            form_action: String::new(),
                                            form_method: String::new(),
                                            width: actual_w,
                                            x_offset: layout.dimensions.content.x + if line_index == 0 { text_indent_px + first_letter_x_shift } else { 0 },
                                            y_offset: line_y,
                                            height: line_height,
                                            border_radius: (0, 0, 0, 0),
                                            is_li: parent_tag == "li" && line_index == 0,
                                            li_num: if parent_tag == "li" && line_index == 0 {
                                                if let Some((true, count)) = list_state {
                                                    Some(count)
                                                } else {
                                                    None
                                                }
                                            } else {
                                                None
                                            },
                                            list_style_type: extract_list_style(styled),
                                            list_style_inside: extract_list_style_inside(styled),
                                            list_style_image: extract_list_style_image(styled),
                                            is_blockquote: false,
                                            z_index: self.inherited_paint_z,
                        paint_depth: self.inherited_paint_depth,
                        ..Default::default()
                                        });

                                        if is_actual_link {
                                            self.links.push(HyperlinkArea {
                                                href: link_href.clone(),
                                                x0: layout.dimensions.content.x,
                                                y0: line_y,
                                                x1: layout.dimensions.content.x + actual_w,
                                                y1: line_y + line_height,
                                            });
                                        }

                                        line_index += 1;
                                        if let Some(max) = line_clamp_max {
                                            if line_index >= max as i32 {
                                                break;
                                            }
                                        }
                                        current_line = next_line;
                                        current_line.push(c);
                                        current_line_w = next_line_w + advance;

                                        prev_char = Some(c);
                                        prev_advance = advance;
                                        continue;
                                    }

                                    current_line.push(c);
                                    current_line_w += advance;
                                    prev_char = Some(c);
                                    prev_advance = advance;
                                }

                                if !current_line.is_empty() {
                                    let line_y =
                                        layout.dimensions.content.y + line_index * line_height;
                                    self.elements.push(RenderElement {
                                        text: current_line.clone(),
                                        font_family: final_font_family.clone(),
                                        font_size: final_size,
                                        letter_spacing: final_ls,
                                        word_spacing: final_ws,
                                        text_emphasis_style: final_emphasis_style.clone(),
                                        text_emphasis_color: final_emphasis_color,
                                        color: final_color,
                                        bg_color: final_bg,
                                        hover_bg_color: extract_hover_color_alt(
                                            styled,
                                            "background-color",
                                            "background",
                                        ),
                                        hover_color: extract_hover_color(styled, "color"),
                                        hover_border_color: extract_hover_color(
                                            styled,
                                            "border-color",
                                        ),
                                        filter: styled.value("filter").unwrap_or_default(),
                                        mix_blend_mode: styled.value("mix-blend-mode").unwrap_or_default(),
                                        backdrop_filter: styled.value("backdrop-filter").unwrap_or_default(),
                                image_rendering: styled.value("image-rendering").unwrap_or_default(),
                                text_stroke_width: extract_text_stroke(styled).0,
                                text_stroke_color: extract_text_stroke(styled).1,
                                        marker_color: extract_marker_color(styled),
                                        marker_font_size: extract_marker_font_size(styled),
                                        marker_content: extract_marker_content(styled),
                                        focus_bg_color: extract_focus_color_alt(styled, "background-color", "background"),
                                        focus_color: extract_focus_color(styled, "color"),
                                        focus_border_color: extract_focus_color(styled, "border-color"),
                                        active_bg_color: extract_active_color_alt(styled, "background-color", "background"),
                                        active_color: extract_active_color(styled, "color"),
                                        active_border_color: extract_active_color(styled, "border-color"),
                                        border_color: None,
                                        border_style: super::BorderStyle::None,
                                        font_bold: final_bold,
                                        font_italic: final_italic,
                                        underline: final_underline,
                                        line_through: final_line_through,
                                        overline: final_overline,
                                        decoration_color: final_decoration_color,
                                        decoration_style: final_decoration_style.clone(),
                                        decoration_thickness: final_decoration_thickness,
                                        decoration_underline_offset: final_decoration_underline_offset,
                                        is_video: false,
                                        video_src: String::new(),
                                        is_link: is_actual_link,
                                        pointer_events_none: current_pointer_events_none,
                                        href: link_href.clone(),
                                        is_hr: false,
                                        is_img: false,
                                canvas_ctx_id: None,
                                        img_alt: String::new(),
                                        is_input: false,
                                        is_textarea: false,
                                        is_button: false,
                                        button_icon: 0,
                                        element_id: String::new(),
                                        onclick: String::new(),
                                        form_action: String::new(),
                                        form_method: String::new(),
                                        width: current_line_w,
                                        x_offset: layout.dimensions.content.x + if line_index == 0 { text_indent_px + first_letter_x_shift } else { 0 },
                                        y_offset: line_y,
                                        height: line_height,
                                        border_radius: (0, 0, 0, 0),
                                        is_li: parent_tag == "li" && line_index == 0,
                                        li_num: if parent_tag == "li" && line_index == 0 {
                                            if let Some((true, count)) = list_state {
                                                Some(count)
                                            } else {
                                                None
                                            }
                                        } else {
                                            None
                                        },
                                        is_blockquote: false,
                                        z_index: self.inherited_paint_z,
                        paint_depth: self.inherited_paint_depth,
                        ..Default::default()
                                    });

                                    if is_actual_link {
                                        self.links.push(HyperlinkArea {
                                            href: link_href.clone(),
                                            x0: layout.dimensions.content.x,
                                            y0: line_y,
                                            x1: layout.dimensions.content.x + current_line_w,
                                            y1: line_y + line_height,
                                        });
                                    }
                                }
                            } // end else (non-nowrap)
                        }
                    }
                }
            }
            _ => {
                // 匿名ボックス等、要素を生成しない中間ノードでも子はツリー上 1 段深い。
                // ここで深さを進めないと、祖先より子孫が浅く見えて描画順が逆転する。
                let saved_paint_depth = self.inherited_paint_depth;
                self.inherited_paint_depth = self.inherited_paint_depth.saturating_add(1);
                for child in &layout.children {
                    self.flatten_layout(
                        child,
                        current_form_action,
                        current_form_method,
                        current_href,
                        current_font_bold,
                        current_font_italic,
                        current_underline,
                        current_line_through,
                        current_color,
                        current_font_size,
                        parent_id,
                        list_state,
                        parent_tag,
                        current_decoration_color,
                        current_decoration_style.clone(),
                        current_decoration_thickness,
                        current_decoration_underline_offset,
                        current_overline,
                        current_pointer_events_none,
                    );
                }
                self.inherited_paint_depth = saved_paint_depth;
            }
        }
    }
}

fn extract_text_stroke(styled: &crate::os_lib::css::StyledNode) -> (i32, Option<u32>) {
    let val_str = styled
        .value("text-stroke")
        .or_else(|| styled.value("-webkit-text-stroke"))
        .unwrap_or_default();
    if val_str.is_empty() {
        let width_str = styled.value("-webkit-text-stroke-width").unwrap_or_default();
        let color_str = styled.value("-webkit-text-stroke-color").unwrap_or_default();
        let w = parse_px_val(&width_str);
        let c = parse_color(&color_str);
        return (w, c);
    }
    let mut width = 0;
    let mut color = None;
    for p in val_str.split_whitespace() {
        let w = parse_px_val(p);
        if w > 0 {
            width = w;
        } else if let Some(c) = parse_color(p) {
            color = Some(c);
        }
    }
    (width, color)
}