:root {
    /* ページ全体の下地。メインコンテンツ（白の.surface）以外はこの薄いグレーが見える
       （参考: SWELLの--color_bg = #f5f5f5） */
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface-hover: #f5f7fa;
    --surface-sunken: #f7f8fa;
    --border: #e3e6ea;
    --border-strong: #c7ccd4;
    --text: #1c2530;
    --text-muted: #667080;
    /* 補足・注釈の文字色。白地で 4.67:1 あり、WCAG AAの基準（4.5:1）を満たす。
       ここを薄くすると、11〜12pxで出している注意書きが読めなくなるため下げないこと。 */
    --text-faint: #6b7583;
    /* 図面の寸法補助線・破線・軸線など、線と図形にだけ使う薄いグレー。
       文字ではないためコントラスト基準の対象外。主線や寸法値と見分けがつくよう、
       --text-faint とは別に薄いまま据え置く。 */
    --line-faint: #97a0ac;
    --accent: #1955c0;
    --accent-strong: #143f8f;
    --accent-soft: #eaf1fc;
    --danger: #b3261e;
    --danger-soft: #fbeceb;

    /* ---- 照査結果の色 ----
       判定は青ではなく緑にする。青はリンク・選択中・主要ボタンにも使っており、
       同じ色でOKも表すと「操作できるもの」と「合否」の区別が付かない。
       いずれも背景色との組み合わせでWCAG AA（4.5:1）を満たす値にしてある。 */
    --judge-ok: #146b3a;         /* 5.91:1 on --judge-ok-soft */
    --judge-ok-soft: #e9f6ee;
    --judge-ng: #9b2620;         /* 6.80:1 on --judge-ng-soft */
    --judge-ng-soft: #fbeceb;
    --judge-warn: #8a5a00;       /* 5.41:1 on --judge-warn-soft */
    --judge-warn-soft: #fff4d6;
    --judge-none: #5c6672;       /* 5.15:1 on --judge-none-soft */
    --judge-none-soft: #eef1f5;

    /* フッター（参考: SWELLのフッター配色 #393E46 / #FDFDFD） */
    --footer-bg: #393e46;
    --footer-text: #fdfdfd;
    --footer-text-muted: rgba(253, 253, 253, 0.72);

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 10px rgba(16, 24, 40, 0.05);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* ---- 文字サイズの段階 ----
       サイズを足すときは、まずこの6段階から選ぶ。ここに無い値が必要になったときだけ
       直接remで書く（図面SVGのラベルのように、画面の文字とは別の縮尺で決まるものは
       この段階に乗せず、px指定のままでよい）。
       段階を増やすと「どれを使うか」を毎回考えることになるため、安易に足さないこと。 */
    --fs-xs: 0.72rem;      /* 11.5px バッジ・補助ラベル */
    --fs-sm: 0.78rem;      /* 12.5px 注釈・補足 */
    --fs-base: 0.85rem;    /* 13.6px 画面の標準 */
    --fs-md: 0.95rem;      /* 15.2px 読ませる本文（案内ページ） */
    --fs-lg: 1.125rem;     /* 18px   小見出し */
    --fs-xl: 1.625rem;     /* 26px   ページタイトル */
    /* ---- 画面幅の区切り（ブレークポイント） ----
       新しく分岐を足すときは、まずこの3つから選ぶ。

         600px以下   … スマートフォン。1カラムにし、ヘッダーのリンクを畳む
         900px以下   … タブレット・小さいノート。2カラムを1カラムに落とす
         1280px以上  … ワイド画面

       いまは 560 / 640 / 700 / 1000 / 1080 / 1343 / 1440px も混じっている。
       いずれも個別の事情があって足されたものだが、560・600・640 のように近い値が
       並ぶと、どの幅で何が起きるか追いにくい。既存を一度に揃えると影響が広いため、
       **これ以上増やさない** ところから始める。触った箇所から上の3つへ寄せていく。 */

    --header-height: 64px;
    --tabs-height: 49px;
    /* 開発環境の管理バーの高さ。本番では出力されないため 0px のままで、
       固定ヘッダーの位置計算（下の calc）は従来と同じ結果になる。 */
    --admin-bar-height: 0px;
    /* サイト全体（サイドバー＋メイン）の最大幅。参考: 一般的なブログテーマの1296px。
       これを超えるワイド画面では左右に均等な余白を作り、コンテンツを中央に寄せる */
    --shell-max-width: 1296px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
html, body { height: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", Meiryo, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "tnum" 1;
}

a { color: var(--accent); text-decoration: none; }

/* ---------- Top header ---------- */

body { padding-top: calc(var(--admin-bar-height) + var(--header-height) + var(--tabs-height)); }

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    /* 本体（.app-shell）の中央寄せに合わせ、ワイド画面ではヘッダー内容も同じ幅に揃える */
    padding: 0 max(var(--space-6), calc((100% - var(--shell-max-width)) / 2));
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: fixed;
    top: var(--admin-bar-height);
    left: 0;
    right: 0;
    z-index: 30;
}

.site-header-left { display: flex; align-items: center; gap: var(--space-5); }

/* ---- 開発環境の管理バー ----------------------------------------------------
   staging・ローカルでのみ body に .has-admin-bar が付き、画面最上部へ固定表示する。
   本番では Layout.php がこのHTML自体を出力せず --admin-bar-height も 0px のままなので、
   公開サイトのレイアウトには影響しない。
   解析・問い合わせの確認は本番だけで行うため、リンク先は本番の管理画面に絞っている。 */
body.has-admin-bar { --admin-bar-height: 34px; }

.admin-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--admin-bar-height);
    /* サイトヘッダー（z-index: 30）より前面に置く */
    z-index: 40;
    background: #1d2327;
    color: #f0f0f1;
    font-size: 0.75rem;
    /* 画面が狭いときはバーの中だけ横スクロールさせ、リンクを折り返さない */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.admin-bar::-webkit-scrollbar { display: none; }

.admin-bar-inner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 100%;
    padding: 0 var(--space-4);
    white-space: nowrap;
    width: max-content;
    min-width: 100%;
}

/* いまどの環境を開いているか（バーの左端） */
.admin-bar-env {
    font-weight: 700;
    color: #ffc83d;
    padding-right: var(--space-2);
}

.admin-bar-group {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* グループのラベル。「公開サイト」は本番へ飛ぶため、押す前に気づけるよう色を変える。 */
.admin-bar-label {
    color: #a7aaad;
    margin-left: var(--space-3);
    padding-left: var(--space-4);
    border-left: 1px solid #3c434a;
}

.admin-bar-link {
    color: #f0f0f1;
    text-decoration: none;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
}

.admin-bar-link:hover,
.admin-bar-link:focus-visible {
    background: #2c3338;
    text-decoration: underline;
}

/* 今日の実績。リンクの文字より一段落として、数字だと分かる程度に添える */
.admin-bar-stat {
    margin-left: var(--space-2);
    padding: 1px 6px;
    border-radius: 999px;
    background: #2c3338;
    color: #c3c4c7;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}

/* 本番の計測除外がONかOFFかを示す小さな札。除外できていない状態（OFF）は
   自分のアクセスが本番の集計に混ざるため、目に留まる色にする。 */
.admin-bar-flag {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.04em;
}
.admin-bar-flag.is-on { background: #1f5c3d; color: #9fe0bd; }
.admin-bar-flag.is-off { background: #7a4a10; color: #ffd479; }

/* 未読件数。0件のときは中身を空にして hidden で隠す（Admin::badge）。
   display を指定しているため、hidden 属性だけでは消えない。明示的に打ち消す。 */
.admin-bar-stat[hidden],
.admin-bar-badge[hidden],
.admin-bar-flag[hidden] { display: none; }

.admin-bar-badge {
    display: inline-block;
    min-width: 16px;
    margin-left: var(--space-1);
    padding: 0 5px;
    border-radius: 999px;
    background: #d63638;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* 本番の公開サイトへのリンクだけ色を変える（開発環境から出ることを示す） */
.admin-bar-group:last-child .admin-bar-label,
.admin-bar-group:last-child .admin-bar-link { color: #ff9f9f; }

/* ---- 管理画面のデータ切り替え ------------------------------------------------
   管理画面は開発環境にしか置かず、本番DBと開発DBをラジオボタンで切り替えて見る。
   どちらを見ているか取り違えると本番の投稿を既読にしてしまうため、常に表示して
   本番を選んでいる間は色で警告する。 */
.admin-db-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-sunken);
    font-size: var(--fs-base);
}

.admin-db-switch.is-production {
    border-color: #e3a0a0;
    background: var(--danger-soft);
}

.admin-db-switch-title {
    font-weight: 700;
    color: var(--text-muted);
}

.admin-db-switch.is-production .admin-db-switch-title { color: var(--danger); }

.admin-db-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
}

.admin-db-switch-note {
    color: var(--text-muted);
    margin-left: auto;
}

.admin-db-switch.is-production .admin-db-switch-note {
    color: var(--danger);
    font-weight: 700;
}

/* ローカル開発環境であることを示すバッジ（公開サイトでは出力されない） */
.env-badge {
    color: #d92b2b;
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text);
}
.brand:hover { text-decoration: none; }

/* マークの高さは社名＋タグラインの2行分に合わせ、ロゴ全体の上下の重心を揃える */
.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-lg);
    background: var(--accent);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-name-row { display: flex; align-items: baseline; gap: var(--space-2); }
.brand-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.005em; }
.brand-tagline { font-size: 0.7rem; font-weight: 500; color: var(--text-faint); white-space: nowrap; }

.site-header-nav { display: flex; align-items: center; gap: var(--space-4); }

/* サイト内検索（虫眼鏡→入力欄→候補リスト） */
.site-search { position: relative; display: flex; align-items: center; }
.site-search-toggle {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: 30px; padding: 0 8px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: none; color: var(--text-muted); cursor: pointer;
    font-family: inherit; white-space: nowrap;
}
/* 他のヘッダーリンクと文字の大きさ・太さを揃える */
.site-search-toggle-text { font-size: var(--fs-base); font-weight: 600; }
.site-search-toggle:hover { color: var(--text); background: var(--surface-hover); }
.site-search.is-open .site-search-toggle { color: var(--accent-strong); border-color: var(--border); background: var(--surface-hover); }
.site-search-toggle .nav-icon { color: currentColor; }
.site-search-field { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: 320px; }
.site-search-field[hidden] { display: none; }
.site-search-input {
    width: 100%; padding: 7px 10px; font-size: 0.82rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
.site-search-input:focus { outline: none; border-color: var(--accent); }
.site-search-results {
    list-style: none; margin: 4px 0 0; padding: 4px;
    max-height: 60vh; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); box-shadow: var(--shadow);
}
.site-search-results[hidden] { display: none; }
.site-search-result a {
    display: flex; flex-direction: column; gap: 1px;
    padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none;
}
.site-search-result.is-active a { background: var(--surface-hover); }
.site-search-result-title { font-size: 0.82rem; font-weight: 600; }
.site-search-result-group { font-size: 0.7rem; color: var(--text-faint); }
.site-search-empty { padding: 8px; font-size: var(--fs-sm); color: var(--text-faint); }

/* ---------- ヘッダーのメニュー（狭い画面のみ） ----------

   600px以下ではヘッダーのテキストリンクを畳んでいるため、その受け皿として置く。
   広い画面ではリンクが直接見えているので、ボタンごと出さない。
   パネルの位置と重なり順は、隣の検索パネル（.site-search-field）と揃えてある。 */

.site-menu { display: none; position: relative; align-items: center; }

.site-menu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: none; color: var(--text-muted); cursor: pointer;
}
.site-menu-toggle:hover { color: var(--text); background: var(--surface-hover); }
.site-menu.is-open .site-menu-toggle {
    color: var(--accent-strong); border-color: var(--border); background: var(--surface-hover);
}

.site-menu-panel {
    position: fixed;
    top: calc(var(--admin-bar-height) + var(--header-height));
    left: var(--space-4);
    right: var(--space-4);
    z-index: 60;
    max-height: calc(100vh - var(--admin-bar-height) - var(--header-height) - var(--space-6));
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.site-menu-panel nav { display: flex; flex-direction: column; }

.site-menu-item {
    /* 指で押す前提なので、A-5の最小（24px）ではなく44pxを確保する */
    display: flex; align-items: center; min-height: 44px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text); text-decoration: none;
    font-size: var(--fs-base); font-weight: 500;
}
.site-menu-item:hover, .site-menu-item:focus-visible { background: var(--surface-hover); }

.site-menu-sep {
    display: block; height: 1px; margin: var(--space-2) var(--space-3);
    background: var(--border);
}

.header-user { display: flex; align-items: center; gap: var(--space-2); }
.header-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: var(--fs-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.header-user-name { font-size: var(--fs-base); font-weight: 600; color: var(--text); }

.header-link {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
}
.header-link:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.header-link-primary {
    background: var(--accent);
    color: #fff;
}
.header-link-primary:hover { background: var(--accent-strong); color: #fff; }

/* ---------- Header tabs (category nav) ---------- */

.header-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: var(--tabs-height);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    /* ヘッダーと同様、ワイド画面ではタブ列も本体と同じ幅に揃える */
    padding: 0 max(var(--space-6), calc((100% - var(--shell-max-width)) / 2));
    position: fixed;
    top: calc(var(--admin-bar-height) + var(--header-height));
    left: 0;
    right: 0;
    z-index: 29;
}

.header-tabs-links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    overflow-x: auto;
    /* タブが収まらないとき（「開発中を含む」表示時など）にスクロールバーが出ると、
       固定高さのバー内でタブが押し上げられて見苦しいため、バーは非表示にする。
       スクロール自体はトラックパッド・タッチ・ホイール（Layout.phpのJSで縦→横変換）で可能 */
    scrollbar-width: none;
}
.header-tabs-links::-webkit-scrollbar { display: none; }

/* タブ列がはみ出しているとき、スクロールできる側の端に白のフェードを重ねて
   「続きがある」ことを示す（is-scroll-*クラスはLayout.phpのJSが付け外しする）。
   left/rightには.header-tabsのpaddingと同じ式を使い、タブ列の端に揃える */
.header-tabs::before,
.header-tabs::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 1px;
    width: 44px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 1;
}
.header-tabs::before {
    left: max(var(--space-6), calc((100% - var(--shell-max-width)) / 2));
    background: linear-gradient(to right, var(--surface) 20%, rgba(255, 255, 255, 0));
}
.header-tabs::after {
    right: max(var(--space-6), calc((100% - var(--shell-max-width)) / 2));
    background: linear-gradient(to left, var(--surface) 20%, rgba(255, 255, 255, 0));
}
.header-tabs.is-scroll-left::before { opacity: 1; }
.header-tabs.is-scroll-right::after { opacity: 1; }

/* カテゴリは12件あり、タブ列の幅は本体と同じ--shell-max-width（1296px）で頭打ちになる。
   余白を詰めないと、画面をどれだけ広げても最後の「便利ツール」がはみ出して切れてしまう。
   アイコンと文字サイズは保ったまま、左右の余白とアイコン〜文字の間隔だけを詰めて収める */
.header-tab {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}
.header-tab:hover { color: var(--text); background: var(--surface-hover); text-decoration: none; }
.header-tab.is-active { color: var(--accent-strong); border-bottom-color: var(--accent); font-weight: 600; }
.header-tab.is-active .nav-icon { color: var(--accent-strong); }
.header-tab.is-filtered-out { display: none; }

.nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-faint); }

/* 画面が本体幅（--shell-max-width）＋左右の余白より狭くなると、その余白の分だけタブが
   収まらなくなる。1280px級のノートPCでも12件すべて出せるよう、この幅では余白を詰める
   （600px以下ではさらに下のメディアクエリで同じ値を指定している） */
@media (max-width: 1343px) {
    .header-tabs { padding: 0 var(--space-4); }
    .header-tabs::before { left: var(--space-4); }
    .header-tabs::after { right: var(--space-4); }
}

.app-shell {
    min-height: calc(100vh - var(--admin-bar-height) - var(--header-height) - var(--tabs-height));
    /* ワイド画面ではコンテンツを中央に寄せ、左右に均等な余白を作る */
    max-width: var(--shell-max-width);
    margin: 0 auto;
    /* コンテンツ領域は白。左右にはみ出した余白はページ下地（--bg）のグレーが見える */
    background: var(--surface);
}

.site-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    font-size: var(--fs-sm);
}
/* 親がflexなので、min-heightだけで当たり判定が24pxになる（WCAG 2.2 SC 2.5.8） */
.site-breadcrumb a { color: var(--text-muted); text-decoration: none; display: flex; align-items: center; min-height: 24px; }
.site-breadcrumb a:hover { color: var(--accent-strong); text-decoration: underline; }
.site-breadcrumb-sep { color: var(--text-faint); }
.site-breadcrumb-current { color: var(--text-muted); }

.app-content {
    padding: var(--space-8) var(--space-10) 60px;
}

/* ---------- 入力データの保存・読み取りボタン（入力画面下部） ---------- */

/* 「計算する」ボタンと同じ行（.wizard-nav-submit内）に置き、縦罫線で区切る */
.tool-data-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-right: var(--space-4);
    margin-right: var(--space-4);
    border-right: 1px solid var(--border);
}
/* 計算実行ボタンのないツール（リアルタイム計算系）では単独の行として置く */
.tool-data-actions-standalone {
    display: flex;
    border-right: none;
    padding-right: 0;
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

/* 保存・読み取りのボタン（src/ToolActions.php が出力する）。
   アイコンと文字を横に並べる。狭い画面では文字を畳んでアイコンだけにする。 */
.tool-data-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.tool-data-icon { flex: none; }

/* ---------- トップページ: 表示フィルタ ---------- */

/* 絞り込み（表示するアプリ）と表示形式を左右に並べる。狭い画面では折り返す */
.tool-nav-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-4);
}
.tool-nav-controls .tool-nav-filter { margin-bottom: 0; }
.tool-nav-filter {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.tool-nav-filter-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.tool-nav-filter-buttons {
    display: flex;
    padding: 3px;
    border-radius: 9px;
    background: var(--surface-sunken);
    gap: 2px;
}
.tool-nav-filter-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    padding: 6px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.tool-nav-filter-btn:hover { color: var(--text); }
.tool-nav-filter-icon { width: 12px; height: 12px; fill: currentColor; flex: 0 0 auto; }
.tool-nav-filter-btn.is-active {
    background: var(--surface);
    color: var(--accent-strong);
    box-shadow: 0 1px 3px rgba(16, 32, 50, .12);
}

#tool-catalog[data-filter="available"] .tool-tile-disabled { display: none; }
#tool-catalog[data-filter="available"] .tool-category[data-has-available="0"] { display: none; }

/* ---------- Footer ---------- */

/* 参考サイト（SWELL）に倣い、フッターは全幅のダーク帯とし、
   内容はリンク列・コピーライトとも中央寄せで縦に積む */
.site-footer { background: var(--footer-bg); color: var(--footer-text); }

/* 上段：ツールカテゴリ・新着・サイト情報の3カラム */
.site-footer-widgets {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
    max-width: var(--shell-max-width);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6) var(--space-6);
}
.site-footer-widget { flex: 1; min-width: 0; }
.site-footer-widget-title {
    position: relative;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-5);
    padding-bottom: var(--space-3);
    color: var(--footer-text);
}
/* 見出しの下線。参考サイトに倣い、カラム幅いっぱいの細線に、左側だけ明るい線を重ねる */
.site-footer-widget-title::after,
.site-footer-widget-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
}
.site-footer-widget-title::after { width: 100%; background: rgba(199, 199, 199, 0.5); }
.site-footer-widget-title::before { width: 40%; background: var(--footer-text); z-index: 1; }

.site-footer-widget-list { list-style: none; margin: 0; padding: 0; }
.site-footer-widget-list li { margin-bottom: var(--space-3); }
.site-footer-widget-list a { font-size: var(--fs-base); color: var(--footer-text-muted); }
.site-footer-widget-list a:hover { color: var(--footer-text); }
.site-footer-widget-date { display: block; font-size: var(--fs-xs); color: rgba(253, 253, 253, 0.5); }
/* ツールカテゴリは項目数が多く縦に長くなるため2列に分ける（上から下→右の列の順に並ぶ） */
.site-footer-widget-categories .site-footer-widget-list {
    columns: 2;
    column-gap: var(--space-5);
}
.site-footer-widget-categories .site-footer-widget-list li { break-inside: avoid; }

/* 下段：リンク列とコピーライト */
.site-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-6) var(--space-6);
    /* フッター内容も本体と同じ幅で中央に揃える */
    max-width: var(--shell-max-width);
    margin: 0 auto;
    border-top: 1px solid rgba(253, 253, 253, 0.15);
}

.site-footer-copyright { font-size: 0.75rem; color: var(--footer-text-muted); }

.site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }
.site-footer-links a { font-size: 0.82rem; color: var(--footer-text); }
.site-footer-links a:hover { opacity: 0.7; }

.center-panel {
    display: flex;
    justify-content: center;
    padding-top: var(--space-10);
}

/* ---------- Page header ---------- */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
}

.page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--space-1); }
.page-subtitle { color: var(--text-muted); margin: 0; font-size: 0.88rem; }

/* ---------- Hero ---------- */

/* 全幅のメインビジュアル。関連サイト（宅地造成の地盤技術）のトップと同様に、
   画面いっぱいの背景＋中央寄せのタイトル・説明・CTAボタンで構成する。
   背景は現場写真（バックホウ）をゆっくりズームさせ、その上に無彩色のスクリム＋設計図グリッドを
   重ねて白文字のコントラストを確保する（色被りさせず写真の色をそのまま活かす）。
   中央寄せコンテナ（.app-shell）の外・カテゴリタブの直下に出力される（Layout.phpの$heroHtml） */
.site-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 高さは参考サイト（関連サイトのメインビジュアル）と同じ画面幅の30%。
       画面が広いほど高くなる（1280pxで384px、1920pxで576px）。
       狭い画面では本文が収まる384pxを下限とする */
    min-height: max(384px, 30vw);
    padding: var(--space-6);
    /* 写真の読み込み前に見える下地 */
    background: #2a2a2a;
    color: #fff;
}

/* 背景写真のスライドショー。5枚を一定時間ごとにクロスフェードで切り替えつつ、
   表示中はゆっくり拡大させる（いわゆるケンバーンズ効果）。
   1枚あたりの表示時間 6s × 5枚 = 30s で一周する。
   枚数を増減した場合は --slide-count と --slide-cycle、@keyframesの割合を合わせて直すこと */
.site-hero-slides {
    --slide-count: 5;
    --slide-duration: 6s;
    --slide-cycle: calc(var(--slide-duration) * var(--slide-count));
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.site-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    opacity: 0;
    /* 1周期ぶん前倒しして、読み込み直後から1枚目のフェードインが始まるようにする */
    animation:
        site-hero-fade var(--slide-cycle) linear infinite,
        site-hero-zoom var(--slide-cycle) linear infinite;
    animation-delay: calc(var(--slide-index) * var(--slide-duration) - var(--slide-cycle));
}

/* 1周期(30s)のうち0-20%（=6s）が自分の表示時間。前後1.5s(5%)でクロスフェードする */
@keyframes site-hero-fade {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    20%  { opacity: 1; }
    25%  { opacity: 0; }
    100% { opacity: 0; }
}

/* 写真の上に重ねる無彩色のスクリム。白文字の可読性を確保する */
.site-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        /* 設計図グリッド（方眼）。戻す場合はこの2行のコメントを外す
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 32px), */
        radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.72) 100%);
    pointer-events: none;
}

/* 表示中(0-25%)だけ拡大し、フェードアウト後の見えない区間で元のスケールに戻す。
   OS側の「アニメーションを表示しない」設定でも動かす（prefers-reduced-motionでは止めない） */
@keyframes site-hero-zoom {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.1); }
    100% { transform: scale(1.1); }
}

/* 背景写真・スクリム（::before/::after）より前面に出す */
.site-hero-text { position: relative; z-index: 1; max-width: 720px; }

/* Solo Work Labの頭文字（S/O/L/O）に対応する4語をタイトルの上に横並びで表示する。
   4語の頭文字とタイトルのSoloの各文字を同じ色にして、語と文字の対応が見て分かるようにする */
.site-hero-acronym {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin: 0 0 var(--space-2);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.65);
}
.site-hero-acronym span::first-letter { font-weight: 800; }
.site-hero-title .brand-letter { font-weight: 800; }

/* 4語の頭文字と、タイトルのSoloの各文字を同じ色で対応づける */
.site-hero-acronym span:nth-child(1)::first-letter,
.site-hero-title .brand-letter-1 { color: #7db2ff; }
.site-hero-acronym span:nth-child(2)::first-letter,
.site-hero-title .brand-letter-2 { color: #6fd8c2; }
.site-hero-acronym span:nth-child(3)::first-letter,
.site-hero-title .brand-letter-3 { color: #ffd479; }
.site-hero-acronym span:nth-child(4)::first-letter,
.site-hero-title .brand-letter-4 { color: #ff9f87; }

.site-hero-title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
}

/* タグライン（サブタイトル）はタイトルの下の行に中央寄せで置く */
.site-hero-title small {
    flex-basis: 100%;
    margin-top: var(--space-2);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.88);
}

.site-hero-title ruby {
    ruby-position: under;
}

.site-hero-title rt {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.65);
    text-align: start;
}

.site-hero-desc {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    max-width: 640px;
    margin: var(--space-3) auto 0;
}

.site-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-5);
    padding: 14px 44px;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--accent-strong);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transition: background 0.15s, transform 0.15s;
}
.site-hero-cta:hover {
    background: var(--accent-soft);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ヒーローのCTAから飛んだとき、固定ヘッダーに一覧の先頭が隠れないようにする */
#tool-catalog { scroll-margin-top: calc(var(--admin-bar-height) + var(--header-height) + var(--tabs-height) + var(--space-4)); }

/* マイページのメール確認まわり */
.account-inline-form { margin: 0 0 var(--space-3); }
.account-details { margin: 0 0 var(--space-4); }
.account-details summary { cursor: pointer; color: var(--text-muted); font-size: 0.9rem; }
.account-details > form { margin-top: var(--space-3); }

/* ---------- 料金プラン ---------- */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0;
}
.plan-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}
.plan-name { margin: 0 0 var(--space-3); font-size: 1.05rem; }
.plan-price { margin: 0 0 var(--space-2); }
.plan-amount { font-size: 1.8rem; font-weight: 700; color: var(--text); }
.plan-interval { color: var(--text-muted); font-size: 0.9rem; }
.plan-note { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--fs-base); }
.plan-benefits { margin: 0 0 var(--space-4); padding-left: 1.2em; color: var(--text); }
.plan-benefits li { margin-bottom: var(--space-2); }

/* ---------- マイページ ---------- */
.account-section-title {
    margin: var(--space-6) 0 var(--space-3);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}
.account-section-title:first-of-type { margin-top: var(--space-4); }
/* 項目名と値を2列で並べる。狭い画面では縦積みにする */
.account-list {
    display: grid;
    grid-template-columns: 10em 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-4);
}
.account-list dt { color: var(--text-muted); font-size: 0.9rem; }
.account-list dd { margin: 0; }
@media (max-width: 600px) {
    .account-list { grid-template-columns: 1fr; gap: var(--space-1); }
    .account-list dd { margin-bottom: var(--space-3); }
}

/* ---------- ヘッダー右側の会員導線 ---------- */
/* 会員機能が有効な環境でだけ出力される（src/Layout.php の Membership::isEnabled()）。
   本番では要素ごと存在しないため、ここのCSSも効かない */
.site-header-account {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
.header-link-cta {
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}
.header-link-cta:hover { background: var(--accent-strong); color: #fff; text-decoration: none; }

@media (max-width: 900px) {
    /* 狭い画面ではヘッダーが窮屈なので、CTAだけ残して文字リンクは畳む */
    .site-header-account .header-link:not(.header-link-cta) { display: none; }
}

/* ---------- Tool listing ---------- */

/* カテゴリの識別色。見出しの縦バーとタイル左端のラインに使い、
   スクロール中でもタイル単体で所属の系統が分かるようにする。
   カテゴリごとに12色使うと賑やかになりすぎるため、内容の近い4系統にまとめ、
   彩度を落とした色を割り当てる。
   カスタムプロパティは子孫に継承されるので、セクションに定義すればタイルにも届く。
   トップページはカテゴリごとのセクション（id）にまとまっているのでidで指定できるが、
   ツールページ下部の関連アプリはカテゴリをまたいで並ぶため、タイル自身に付けた
   data-category-slugでも同じ色を拾えるようにしている。カテゴリページのラッパーにも
   同じ属性が付いており、そこから色を受け取る。
   なおヘッダーのカテゴリタブにも同じ属性が付いているが、これはトップページの
   スクロール連動でタブとカテゴリを対応づけるためのもので、タブは色分けしない。
   カテゴリを追加したときはここにも1組足すこと（未定義なら既定の青になる） */

/* 構造物の設計（青系） */
#retaining-wall,
[data-category-slug="retaining-wall"] { --category-accent: #3a5f96; } /* 擁壁工 */
#foundation-work,
[data-category-slug="foundation-work"] { --category-accent: #3a5f96; } /* 基礎工 */
#culvert-structures,
[data-category-slug="culvert-structures"] { --category-accent: #3a5f96; } /* カルバート・その他構造物 */
#structural-mechanics,
[data-category-slug="structural-mechanics"] { --category-accent: #3a5f96; } /* 構造力学・断面 */

/* 地盤の解析・調査（緑系） */
#ground-analysis,
[data-category-slug="ground-analysis"] { --category-accent: #4d7c5a; } /* 地盤解析 */
#ground-improvement,
[data-category-slug="ground-improvement"] { --category-accent: #4d7c5a; } /* 地盤改良 */
#investigation-testing,
[data-category-slug="investigation-testing"] { --category-accent: #4d7c5a; } /* 調査・試験 */

/* 仮設・施工まわり（土色系） */
#temporary-works,
[data-category-slug="temporary-works"] { --category-accent: #94734a; } /* 仮設工 */
#pavement,
[data-category-slug="pavement"] { --category-accent: #94734a; } /* 舗装工 */
#drainage,
[data-category-slug="drainage"] { --category-accent: #94734a; } /* 雨水・排水 */

/* 作図・補助ツール（グレー系） */
#drafting,
[data-category-slug="drafting"] { --category-accent: #6b7280; } /* 作図 */
#utility-tools,
[data-category-slug="utility-tools"] { --category-accent: #6b7280; } /* 便利ツール */

/* カテゴリの切れ目が分かるよう、見出しの上に区切り線を引き、
   前後の余白を広げてタイル群をグループとして見せる */
.tool-category {
    margin-bottom: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
    scroll-margin-top: calc(var(--admin-bar-height) + var(--header-height) + var(--tabs-height) + var(--space-4));
}
/* 先頭のカテゴリは、上の絞り込みUIとの間に線が重なるので引かない */
.tool-category:first-child {
    padding-top: 0;
    border-top: 0;
}

.tool-category-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* 見出しの左にアクセント色の縦バーを添えて、カテゴリの始まりを目立たせる */
.tool-category-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    padding-left: var(--space-3);
    border-left: 4px solid var(--category-accent, var(--accent));
}
.tool-category-count { font-size: var(--fs-sm); color: var(--text-faint); font-weight: 600; }

/* トップページの見出しは、そのカテゴリのページへの入口も兼ねる。
   見出しらしさを保つため、既定では下線を出さずホバー時だけ出す */
.tool-category-link { color: inherit; text-decoration: none; }
.tool-category-link:hover { color: var(--accent-strong); text-decoration: underline; }
/* 「〇〇の一覧へ →」は見出し行の右端に寄せる（画面が狭いときは折り返して左に付く） */
.tool-category-more {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.tool-category-more:hover { color: var(--accent-strong); text-decoration: underline; }

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
}

.tool-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    padding-left: calc(var(--space-4) - 3px);
    border: 1px solid var(--border);
    border-left: 4px solid var(--category-accent, var(--accent));
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    /* A4横（297×210）と同じ縦横比。列幅が同じなので全タイルの高さもそろう。
       この高さに内容が収まるよう、余白を詰め、説明の行数を制限している
       （収まりきらない場合はその分だけ縦に伸びる） */
    aspect-ratio: 297 / 210;
    /* グリッドの既定（align-self: stretch）だと行の高さまで引き伸ばされ、
       縦横比が効かなくなるため解除する */
    align-self: start;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.tool-tile-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
    pointer-events: none;
    user-select: none;
}

.tool-tile:hover {
    border-color: var(--accent-strong);
    /* ホバー時も左端はカテゴリ色のままにする */
    border-left-color: var(--category-accent, var(--accent-strong));
    box-shadow: var(--shadow);
    text-decoration: none;
}

.tool-tile-disabled {
    background: #eceef2;
    border-color: var(--border);
    border-left: 4px solid #c7ccd4;
    color: var(--text-faint);
    box-shadow: none;
    cursor: default;
    opacity: 0.75;
}
.tool-tile-disabled .tool-tile-title { color: var(--text-faint); }
.tool-tile-disabled .tool-tile-desc { color: var(--text-faint); }
.tool-tile-disabled:hover {
    border-color: var(--border);
    border-left-color: #c7ccd4;
    box-shadow: none;
}

/* アイコンはタイルの右上に重ねているため、ツール名にはその逃げの余白を持たせる。
   ツール名の高さを2行ぶんで固定しているのは、1行のツール名でも説明の開始位置が
   アイコンの下端より下になるようにするため（そうしないと説明がアイコンに潜り込む）。
   説明はアイコンより下にくるので幅いっぱい使える */
.tool-tile-title {
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.005em;
    padding-right: 62px;
    min-height: calc(2 * 1.6em);
}
/* 説明は4行まで。これを超える文言はタイル上では省略する（全文は各アプリのページにある）。
   4行に収めているのは、A4横の高さからツール名・状態の行を引いた残りがこの行数のため */
.tool-tile-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    flex-grow: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* 足元の「開く →」。タイルの下端へ寄せる（開発中のアプリでは中身が無く、高さも出ない） */
.tool-tile-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: auto;
}

.tool-tile-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
}
.tool-tile-arrow { transition: transform 0.12s ease; }

/* ---------- トップページの表示形式（タイル／一覧） ----------
   マークアップはタイルと共通で、#tool-catalogのdata-viewだけで並べ方を変える。
   一覧でもアイコン・カテゴリ色の左罫・状態バッジは残し、1行に収まるよう
   ツール名の逃げ（アイコンぶんの余白）を外して説明を1行に詰める。 */
#tool-catalog[data-view="list"] .tool-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}
#tool-catalog[data-view="list"] .tool-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "icon title foot"
        "icon desc  foot";
    align-items: center;
    column-gap: var(--space-4);
    row-gap: 1px;
    /* タイルのA4横比は一覧では高すぎるので解除する */
    aspect-ratio: auto;
    padding: 10px var(--space-4);
    padding-left: calc(var(--space-4) - 3px);
}
#tool-catalog[data-view="list"] .tool-tile-icon {
    grid-area: icon;
    /* タイルでは右上に重ねているが、一覧では行頭に置く */
    position: static;
    top: auto;
    right: auto;
    width: 46px;
    height: 46px;
}
#tool-catalog[data-view="list"] .tool-tile-title {
    grid-area: title;
    padding-right: 0;
    min-height: 0;
}
#tool-catalog[data-view="list"] .tool-tile-desc {
    grid-area: desc;
    -webkit-line-clamp: 1;
    flex-grow: 0;
    font-size: var(--fs-sm);
}
#tool-catalog[data-view="list"] .tool-tile-foot {
    grid-area: foot;
    margin-top: 0;
    justify-content: flex-end;
    gap: var(--space-3);
    white-space: nowrap;
}
#tool-catalog[data-view="list"] .tool-tile:hover { background: var(--surface-sunken); }
#tool-catalog[data-view="list"] .tool-tile-disabled:hover { background: #eceef2; }

/* 幅が狭いときは列の間を詰める。足元は「開く →」だけなので、下の段へ回さなくても収まる */
@media (max-width: 700px) {
    #tool-catalog[data-view="list"] .tool-tile {
        column-gap: var(--space-3);
        padding: 9px var(--space-3);
        padding-left: calc(var(--space-3) - 3px);
    }
    #tool-catalog[data-view="list"] .tool-tile-icon { width: 38px; height: 38px; }
}

.tool-tile:hover .tool-tile-arrow { transform: translateX(2px); }

/* ---------- Category pages ---------- */

/* カテゴリ専用ページ（category/<slug>/）。ラッパーのdata-category-slugから
   --category-accent を受け取り、見出しの縦バーとタイルの左端に同じ色を使う */
.category-page-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.category-page-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    padding-left: var(--space-3);
    border-left: 4px solid var(--category-accent, var(--accent));
}
.category-page-count { font-size: var(--fs-sm); color: var(--text-faint); font-weight: 600; }
.category-page-lead {
    font-size: 0.88rem;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 0 var(--space-6);
}
.category-page-empty {
    font-size: 0.88rem;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
}

/* 本文末尾の他カテゴリへの導線（ヘッダーのタブが横スクロールで隠れる場合の受け皿） */
/* 本文の末尾まで読んだ人の次の移動先。罫線1本だと本文の続きに見えて素通りされるため、
   地色を敷いた枠にして、別のまとまりだと分かるようにする。
   ヘッダーのタブと同じ行き先だが、タブは横スクロールで隠れることがある。 */
.category-page-others {
    margin-top: var(--space-10);
    padding: var(--space-5) var(--space-6) var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}
.category-page-others-title { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--space-3); }
.category-page-others-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
.category-page-others-list a { font-size: var(--fs-base); color: var(--accent); text-decoration: none; }
.category-page-others-list a:hover { color: var(--accent-strong); text-decoration: underline; }
/* カテゴリの並びとは別の行き先なので、罫線で区切って1行だけ置く。
   当たり判定は他のリンクと同じく24pxを確保する（WCAG 2.2 SC 2.5.8）。 */
.category-page-others-top {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.category-page-others-top a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--accent);
}
.category-page-others-top a:hover { color: var(--accent-strong); text-decoration: underline; }

/* ---------- Panels & forms ---------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    max-width: 440px;
    width: 100%;
    box-shadow: var(--shadow);
}
.panel h1 { font-size: 1.2rem; margin: 0 0 var(--space-5); }

/* ---------- Tool two-column layout (input + live drawing) ---------- */

.tool-sticky-header {
    padding-top: var(--space-4);
    margin-top: calc(var(--space-4) * -1);
}

.tool-page-header { margin-bottom: var(--space-4); }
.tool-page-header h1 { font-size: 1.5rem; margin: 0 0 4px; }
.tool-page-header p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

.tool-layout {
    display: grid;
    grid-template-columns: minmax(420px, 620px) 1fr;
    gap: var(--space-5);
    align-items: start;
}
.tool-layout .panel { max-width: none; }

.tool-input-panel { padding: var(--space-5); }

/* 入力欄は全ツール共通で1列に統一する（構造図作成ツールのみ、項目数が多く縦スクロールを
   避けたいステップで2列に詰める例外を設けている。下の.main-2col-drawing-wideの指定を参照）。
   1列でも入力欄が横に間延びしないよう、最大幅を設ける。 */
.form-grid.form-grid-compact {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: var(--space-3) var(--space-4);
}
.form-grid-compact .form-group { margin-bottom: 0; }
.form-grid-compact label {
    font-size: var(--fs-xs);
    margin-bottom: 3px;
    line-height: 1.25;
    min-height: 1.8em;
}
.form-grid-compact input[type="number"],
.form-grid-compact select {
    padding: 4px 7px;
    font-size: var(--fs-sm);
}
.tool-input-panel .btn { margin-top: var(--space-4); padding: 8px 20px; }

/* ---------- Wizard ---------- */

.wizard-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-5);
    position: sticky;
    top: calc(var(--admin-bar-height) + var(--header-height) + var(--tabs-height));
    z-index: 15;
    /* 追従表示中に下の内容を透かさないよう、コンテンツ領域と同じ白で塗る */
    background: var(--surface);
    padding: var(--space-2) 0;
}

.wizard-crumb-group { display: contents; }
.wizard-crumb-group[hidden] { display: none; }

/* display指定はhidden属性のdisplay:noneより優先されてしまうため、hidden時は明示的に隠す
   （準拠基準の切り替えで使わない章のパンくずを消すのに必要） */
.wizard-crumb[hidden] { display: none; }
.wizard-crumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}
.wizard-crumb:hover { background: var(--surface-hover); color: var(--text); }
.wizard-crumb.is-active { color: var(--accent-strong); background: var(--accent-soft); }

.wizard-crumb-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    flex-shrink: 0;
}
.wizard-crumb.is-active .wizard-crumb-num { background: var(--accent); color: #fff; }

.wizard-crumb-sep { color: var(--text-faint); font-size: 0.9rem; }

/* <fieldset>はブラウザ既定でmin-width:min-contentが適用され、内部に幅の広い要素（テーブル等）
   があると親コンテナの幅を無視して突き破ってしまうため、明示的に無効化する。
   また、ブラウザ既定のfieldset枠線・余白（groove border等）も明示的に解除する。 */
.wizard-step { min-width: 0; border: 0; margin: 0; padding: 0; }

.tool-center { max-width: 1300px; margin: 0 auto; }

.tool-single-col { max-width: 700px; margin: 0 auto; }
.tool-single-col .panel { max-width: none; }

.main-2col {
    display: grid;
    grid-template-columns: minmax(480px, 640px) minmax(320px, 560px);
    gap: var(--space-5);
    align-items: start;
}

.wizard-step-body {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 340px);
    gap: var(--space-5);
    align-items: start;
}
.wizard-step-body .form-grid-compact { grid-template-columns: 1fr; }

.wizard-step-body-full { grid-template-columns: 1fr; }
.wizard-step-body-full .form-grid-compact { grid-template-columns: 1fr; max-width: 420px; }

@media (max-width: 700px) {
    .wizard-step-body { grid-template-columns: 1fr; }
}
.main-2col .panel { max-width: none; min-width: 0; }

.wizard-sketch {
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    margin-bottom: var(--space-4);
}
.wizard-sketch-svg { width: 100%; height: auto; max-height: 280px; display: block; }
.wizard-sketch-svg .sketch-fill { fill: var(--surface); stroke: var(--text); stroke-width: 1.3; }
.wizard-sketch-svg .sketch-soil { fill: #f2ead2; stroke: #b7a468; stroke-width: 1; }
.wizard-sketch-svg .sketch-ground { fill: #f2ead2; stroke: #b7a468; stroke-width: 1; }
.wizard-sketch-svg .sketch-ground-line { stroke: #b7a468; stroke-width: 1.2; fill: none; }
.wizard-sketch-svg .sketch-ext { stroke: var(--line-faint); stroke-width: 0.75; }
.wizard-sketch-svg .sketch-ref-dash { stroke: var(--line-faint); stroke-width: 0.75; stroke-dasharray: 3 2; }
.wizard-sketch-svg .sketch-dim { stroke: var(--accent-strong); stroke-width: 1; fill: none; }
.wizard-sketch-svg .sketch-leader { stroke: var(--accent-strong); stroke-width: 1; }
.wizard-sketch-svg .sketch-dim-thin { stroke: var(--line-faint); stroke-width: 0.75; }
.wizard-sketch-svg .sketch-arc { fill: none; stroke: var(--accent-strong); stroke-width: 1; }
.wizard-sketch-svg .sketch-rebar-dot { fill: var(--text); stroke: none; }
.wizard-sketch-svg .sketch-rebar { stroke: var(--text); stroke-width: 1.6; fill: none; }
.wizard-sketch-svg .sketch-fill-alt { fill: var(--surface-sunken); stroke: var(--line-faint); stroke-width: 1; }
.wizard-sketch-svg .sketch-outline-strong { stroke: var(--text); stroke-width: 1.8; fill: none; }
.wizard-sketch-svg .sketch-arrow { fill: var(--accent-strong); }
.wizard-sketch-svg .sketch-label { font-size: 12px; font-weight: 700; fill: var(--accent-strong); font-family: -apple-system, "Segoe UI", sans-serif; }
.wizard-sketch-svg .sketch-label-sm { font-size: 10px; font-weight: 700; fill: var(--accent-strong); }

@media (max-width: 900px) {
    .main-2col { grid-template-columns: 1fr; max-width: 560px; }
    .drawing-panel { position: static; }
}

.wizard-step-title { font-size: 1rem; margin: 0 0 var(--space-4); }
.wizard-step-hint { font-size: var(--fs-base); color: var(--text-muted); margin: 0 0 var(--space-4); }
.wizard-step-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-4); }
.row-count-field { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); color: var(--text-muted); }
.row-count-field input { width: 64px; padding: 6px 8px; }

.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}
.wizard-nav .btn:only-child { margin-left: auto; }
/* display指定はブラウザ標準の[hidden] { display: none }より優先されるため、hidden属性が
   効くように明示的に打ち消す（計算結果ビューで「計算する」ボタンを隠す用途） */
.wizard-nav[hidden] { display: none; }

.drawing-panel { position: sticky; top: calc(var(--admin-bar-height) + var(--header-height) + var(--tabs-height) + var(--space-4)); padding: var(--space-5); }

.drawing-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.drawing-panel-header h2 { font-size: 1rem; margin: 0; }
.drawing-panel-note { font-size: 0.75rem; color: var(--text-faint); }
/* 見出し行に3Dプレビューの起動ボタンを置く場合は、上下中央でそろえて注記を下の行に出す */
.drawing-panel-header:has(#column-3d-open) { align-items: center; margin-bottom: 4px; }
p.drawing-panel-note { margin: 0 0 var(--space-3); }

.wall-drawing { width: 100%; max-width: 620px; margin: 0 auto; }
/* 擁壁各種（L型・逆L型・逆T型・重力式）: 断面図の見出し行（見出し＋3Dプレビュー起動ボタン） */
.lw-preview-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); margin-bottom: 4px;
}
.lw-preview-title { font-size: 0.8rem; margin: 0; }
.lw-preview-subtitle { font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
/* 擁壁各種: 3Dモデル（モーダル内） */
.wall-3d {
    /* 図面と同じA4横（297×210）の比率で見せる。画面が低いときは高さ側で頭打ちにし、
       幅を縮めて比率を保つ（モーダルは max-height: 80vh のため、はみ出させない）。 */
    width: 100%; max-width: calc(62vh * 297 / 210); margin: 0 auto; aspect-ratio: 297 / 210;
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    background: var(--surface-sunken);
}
.lw-3d-toggles { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-3); }
.lw-3d-toggles .checkbox-option { font-size: 0.75rem; min-height: 0; }
.wall-3d canvas { display: block; cursor: grab; touch-action: none; }
.wall-3d canvas.is-dragging { cursor: grabbing; }
.wall-drawing-svg { width: 100%; height: auto; display: block; }
.wall-drawing-placeholder {
    color: var(--text-faint);
    font-size: var(--fs-base);
    text-align: center;
    padding: 70px 0;
}

.wall-drawing-svg .concrete-fill { fill: var(--surface-sunken); stroke: var(--text); stroke-width: 1.5; }
.wall-drawing-svg .soil-hatch-bg { fill: #f2ead2; }
.wall-drawing-svg .soil-hatch-line { stroke: #b7a468; stroke-width: 2; }
/* 地層を色分けして塗る断面図（山留め工など）。.ground-drawing-svg と同じ配色を用いる */
.wall-drawing-svg .layer-fill-a { fill: #f2ead2; }
.wall-drawing-svg .layer-fill-b { fill: #ece4d0; }
/* 土質による塗り分け（砂質土＝砂色、粘性土＝青みのグレー） */
.wall-drawing-svg .layer-fill-sand { fill: #f2ead2; }
.wall-drawing-svg .layer-fill-clay { fill: #d5dee3; }
.wall-drawing-svg .soil-fill { fill: url(#soil-hatch); stroke: #b7a468; stroke-width: 1; }
.wall-drawing-svg .ground-fill { stroke: none; opacity: 0.7; }
.wall-drawing-svg .ground-line { stroke: var(--text-muted); stroke-width: 1.5; }
.wall-drawing-svg .ref-dash { stroke: var(--line-faint); stroke-width: 1; stroke-dasharray: 4 3; }
.wall-drawing-svg .dim-ext { stroke: var(--line-faint); stroke-width: 1; }
.wall-drawing-svg .dim-line { stroke: var(--accent-strong); stroke-width: 1; }
.wall-drawing-svg .dim-label { font-size: 11px; fill: var(--accent-strong); font-weight: 600; }
.wall-drawing-svg .dim-arrow { fill: var(--accent-strong); }
.wall-drawing-svg .soil-hatch-bg2 { fill: #ece4f2; }
.wall-drawing-svg .gwl-line { stroke: #2b7fd6; stroke-width: 1.5; stroke-dasharray: 6 3; }
.wall-drawing-svg .gwl-mark { fill: #2b7fd6; stroke: none; }
/* 浅層改良の改良体。土と区別できるよう濃い緑で塗る（上に載る寸法・値は下敷き付きで描く） */
.wall-drawing-svg .improve-hatch-bg { fill: #3f7d5f; }
.wall-drawing-svg .improve-hatch-dot { fill: #2b5e46; }
.wall-drawing-svg .improve-fill { fill: url(#improve-hatch); stroke: #23503b; stroke-width: 1.2; }
/* 支持地盤は、根入れ部分の土（soil-hatch-bg）より濃くして層の違いを見せる */
.wall-drawing-svg .soil-hatch-bg-bearing { fill: #e0cf9c; }
/* 濃く塗った改良体・支持地盤の上に置く文字 */
.wall-drawing-svg .improve-label { font-size: 10px; fill: #ffffff; font-weight: 600; }
.wall-drawing-svg .soil-label { font-size: 10px; fill: #6f6244; font-weight: 600; }
.wall-drawing-svg .dim-label-sub { font-size: 10px; fill: var(--text-faint); font-weight: 600; }
/* ブロック積み擁壁: 裏込め材・砕石等（透水性の粒状材料）を表す点模様 */
.wall-drawing-svg .gravel-bg { fill: #e6e1d5; }
.wall-drawing-svg .gravel-dot { fill: #9a917c; }
.wall-drawing-svg .gravel-fill { fill: url(#gravel-dots); stroke: #9a917c; stroke-width: 1; }
/* RC単純床版橋: 横断面図（舗装・歩道・高欄・配筋）と平面図（支承線・斜め支間） */
.wall-drawing-svg .pavement-fill { fill: #ded9d2; stroke: var(--line-faint); stroke-width: 1; }
.wall-drawing-svg .sidewalk-fill { fill: #c9cfd6; stroke: none; }
.wall-drawing-svg .railing-line { stroke: var(--text-muted); stroke-width: 1.8; }
.wall-drawing-svg .rebar-dot { fill: var(--text); stroke: var(--surface); stroke-width: 0.6; }
.wall-drawing-svg .rebar-line { stroke: var(--text); stroke-width: 1.4; }
.wall-drawing-svg .support-line { stroke: var(--accent-strong); stroke-width: 2.2; }
.wall-drawing-svg .dim-line-alt { stroke: var(--accent-strong); stroke-width: 1; stroke-dasharray: 5 3; }
.wall-drawing-svg .drawing-title { font-size: 12px; fill: var(--text); font-weight: 700; }
.wall-drawing-svg .drawing-note { font-size: 10px; fill: var(--text-muted); font-weight: 600; }
/* 集水桝: 平面図の内空（空洞）と、桝内の滞水 */
.wall-drawing-svg .plan-void-fill { fill: var(--surface); stroke: var(--line-faint); stroke-width: 1; }
.wall-drawing-svg .water-fill { fill: #cfe4f7; stroke: none; }
/* 擁壁の上載荷重: 背面地表面に載る等分布荷重を、荷重線と下向きの矢印で示す */
.wall-drawing-svg .load-line { fill: none; stroke: #b8362c; stroke-width: 1.4; }
.wall-drawing-svg .load-arrow { stroke: #b8362c; stroke-width: 1.1; }
.wall-drawing-svg .load-arrow-head { fill: #b8362c; }
.wall-drawing-svg .load-label { font-size: 11px; font-weight: 700; fill: #b8362c; }
.wall-drawing-svg .load-label-inset { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
/* 背面ハンチのラベルなど、地盤のハッチングの上に置く寸法ラベル（背景色で縁取りして読めるようにする） */
.wall-drawing-svg .dim-label-inset { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }

.boring-log-drawing { width: 100%; max-width: 480px; margin: 0 auto; }
.boring-log-svg .boring-tick { stroke: var(--line-faint); stroke-width: 1; }
.boring-log-svg .boring-layer-line { stroke: var(--text-muted); stroke-width: 1; }
.boring-log-svg .boring-soil-label { font-size: 10px; fill: var(--text-muted); }
.boring-log-svg .boring-axis-label { font-size: 10px; fill: var(--text-muted); font-weight: 600; }
.boring-log-svg .boring-axis { stroke: var(--line-faint); stroke-width: 1; }
.boring-log-svg .boring-grid { stroke: var(--border); stroke-width: 1; }
.boring-log-svg .boring-n-line { fill: none; stroke: var(--accent-strong); stroke-width: 1.2; }
.boring-log-svg .boring-n-dot { fill: var(--accent-strong); stroke: var(--surface); stroke-width: 1; }
.boring-log-svg .boring-n-label { font-size: 9px; fill: var(--text-muted); }
.boring-log-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-3); font-size: 0.75rem; color: var(--text-muted); }
.boring-log-legend-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

@media (max-width: 900px) {
    .tool-layout { grid-template-columns: 1fr; }
}

.form-group { margin-bottom: var(--space-4); }
.form-group[hidden] { display: none; }
.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.radio-group { display: flex; gap: var(--space-4); align-items: center; min-height: 38px; }
.radio-option {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin: 0 !important;
    font-size: var(--fs-base) !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    cursor: pointer;
}
/* display指定（!important付き）はブラウザ標準の[hidden] { display: none }より優先されるため、
   hidden属性が効くように明示的に打ち消す（設計基準に応じて検討ケースの選択肢を隠す用途） */
.radio-option[hidden] { display: none !important; }
.radio-option input[type="radio"] { width: auto; margin: 0; }
.form-grid-compact .radio-group { min-height: 32px; }
.form-grid-compact .radio-option { font-size: var(--fs-sm) !important; }

.checkbox-option {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    min-height: 38px;
    font-size: var(--fs-base) !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    cursor: pointer;
}
.checkbox-option input[type="checkbox"] { width: auto; margin: 0; }
.form-grid-compact .checkbox-option { min-height: 32px; font-size: var(--fs-sm) !important; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4) var(--space-5);
}
/* display指定はブラウザ標準の[hidden] { display: none }より優先されるため、hidden属性が
   効くように明示する（.form-groupと同じ扱い） */
.form-grid[hidden] { display: none; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
textarea { resize: vertical; min-height: 140px; }
/* 数値入力欄のスピナー（上下の矢印）は出さない。桁数の多い実数を直接入力する欄が大半で、
   矢印を1回押すと最小桁が動いてしまい、気づかないうちに条件が変わる事故のほうが多いため。
   type="number" のままなので、スマホの数値キーボードやstepによる検証はそのまま効く。
   値の増減はキーボードの上下キーで行える（ホイールでの増減はLayout.phpのスクリプトで止めている）。 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-note { font-size: var(--fs-sm); color: var(--text-faint); margin-top: var(--space-1); }
/* 入力欄の下に出る説明。「基準によって安全率が変わる」など設計判断に関わる内容を
   書いているため、単なる注釈（.form-note・.doc-note）より一段濃い色にする。 */
.field-note { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--space-1) 0 0; }
.form-honeypot { position: absolute; left: -9999px; top: -9999px; }
.form-success {
    padding: var(--space-5);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    font-size: 0.9rem;
}
select:disabled,
select option:disabled { color: var(--text-faint); }

.field-error { color: var(--danger); font-size: var(--fs-sm); margin-top: var(--space-1); min-height: 1.1em; }
.field-required { color: var(--danger); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--accent);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.12s ease;
}
.btn:hover { background: var(--accent-strong); color: #ffffff; text-decoration: none; }

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: none;
}
.btn-secondary:hover { background: var(--surface-hover); color: var(--text); }

.tool-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

.alert {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-5);
    font-size: var(--fs-base);
}
.alert-error { background: var(--danger-soft); border: 1px solid #f0b8b4; color: #9b2620; }
.alert-success { background: var(--accent-soft); border: 1px solid #b7c9f8; color: var(--accent-strong); }
.alert-info { background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-muted); }
.alert-warning { background: #fdf3d9; border: 1px solid #ecd28a; color: #7a5c05; }
#fem-error-panel { white-space: pre-line; }

/* ---------- Result table ---------- */

.result-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-6);
}
.result-table th, .result-table td {
    text-align: left;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-base);
}
.result-table th { color: var(--text-muted); font-weight: 500; width: 55%; }

/* 3列以上のkey-valueではない表（見出しが複数列に均等に並ぶ表）は、
   th width:55%の重複指定がぶつかって列幅が偏るため、固定等分レイアウトにする */
.result-table-fixed { table-layout: fixed; }
.result-table-fixed th { width: auto; text-align: center; }
.result-table-fixed th, .result-table-fixed td { text-align: center; border-right: 1px solid var(--border); }
.result-table-fixed th:last-child, .result-table-fixed td:last-child { border-right: none; }

/* 多列のデータ表（層別一覧など）。th width:55%が全thに効いて列幅が偏るのを打ち消し、
   ラベル列だけ広く、数値列は等幅にして読みやすくする */
.result-table-data { table-layout: fixed; }
.result-table-data th, .result-table-data td { width: auto; text-align: right; padding: 8px 6px; }
.result-table-data thead th { text-align: center; color: var(--text-muted); font-weight: 600; }
.result-table-data tbody th { text-align: left; }
.result-table-data td:first-child, .result-table-data th:first-child { text-align: left; }
.result-table-data th, .result-table-data td { border-right: 1px solid var(--border); }
.result-table-data th:last-child, .result-table-data td:last-child { border-right: none; }

/* 結果一覧（ケース・照査項目＋X/Y方向×発生応力・許容値・判定）。
   ラベル2列を広めに取り、数値6列は等幅に揃える */
.ci-summary-table { table-layout: fixed; }
.ci-summary-table th, .ci-summary-table td {
    width: auto; text-align: center; padding: 8px 4px; font-size: 0.82rem;
    border-right: 1px solid var(--border);
}
.ci-summary-table th:last-child, .ci-summary-table td:last-child { border-right: none; }
.ci-summary-table thead th { color: var(--text-muted); font-weight: 600; }
.ci-summary-table tbody th { text-align: left; font-weight: 500; }
.ci-summary-table .ci-na { color: var(--text-faint); }
/* ケース列・照査項目列。残り6列は自動的に等幅になる */
.ci-summary-table col.ci-col-case { width: 9%; }
.ci-summary-table col.ci-col-item { width: 19%; }

/* 横に広い表（多層データ入力・結果一覧等）は、ページ全体を横スクロールさせず
   表自身の中だけでスクロールさせる */
.table-scroll { overflow-x: auto; margin-top: var(--space-4); }
.table-scroll .result-table { margin-top: 0; white-space: nowrap; }
.table-scroll .result-table th { width: auto; text-align: center; }
/* 行数・列数の多い表は横罫線だけだと列がズレて見えるため、縦罫線も入れて格子状にする */
.table-scroll .result-table th, .table-scroll .result-table td { border-right: 1px solid var(--border); }
.table-scroll .result-table th:last-child, .table-scroll .result-table td:last-child { border-right: none; }

/* 横スクロールなしで収まるよう、文字サイズ・入力欄幅を小さめにする（7列のN値測定点表を想定） */
.layer-input-table th, .layer-input-table td { padding: 3px 3px; text-align: center; font-size: 0.75rem; }
/* input[type="number"] の width:100% (詳細度: 属性+要素) に負けないよう、要素+クラスで指定する */
input.layer-input { width: 56px; padding: 4px 3px; font-size: 0.75rem; }
select.layer-input { width: 76px; padding: 4px 2px; font-size: var(--fs-xs); }
.field-note-inline { display: block; font-size: 0.65rem; color: var(--text-faint); font-weight: 400; }

.status-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
/* OKは緑。青にすると、リンク・選択中・主要ボタンと同じ意味領域になってしまう。 */
.status-ok { background: var(--judge-ok-soft); color: var(--judge-ok); }
.status-ng { background: var(--judge-ng-soft); color: var(--judge-ng); }
.status-warn { background: var(--judge-warn-soft); color: var(--judge-warn); }

.hidden { display: none; }

/* ---------- Tool version info & changelog modal ---------- */

.tool-version-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 2px 0 var(--space-3);
}
.tool-version-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: var(--fs-xs);
    font-weight: 700;
}
.tool-version-date { font-size: 0.75rem; color: var(--text-faint); }
.tool-version-history-btn {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.75rem;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}
.tool-version-history-btn:hover { color: var(--accent-strong); }

.modal-open { overflow: hidden; }
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 31, 0.45);
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    z-index: 100;
}
.modal-overlay[hidden] { display: none; }
.modal-overlay:not([hidden]) { display: flex; }
.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.modal-close {
    border: none;
    background: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--text-faint);
    cursor: pointer;
    padding: 4px;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: var(--space-4) var(--space-5); overflow-y: auto; }
/* 図面や3Dモデルなど、横に広い内容を入れるモーダル */
.modal.modal-wide { max-width: 900px; }

/* 縦長の図（躯体＋改良長など）でも、プレビューが画面からはみ出さないようにする。
   SVGは縦横比を保つため、高さで頭打ちにすると幅が自動で縮む。 */
.drawing-panel .ground-drawing-svg { max-height: 68vh; width: auto; max-width: 100%; margin: 0 auto; }

/* リアルタイムプレビューのタブ（図が複数あるツールで、1枚を大きく見せる） */
.preview-tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--border); margin-bottom: var(--space-3); }
.preview-tab {
    appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-3); margin-bottom: -1px;
    font-size: var(--fs-base); font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.preview-tab:hover { color: var(--text); }
.preview-tab.is-active { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }

/* 関連ツールへ連動（計算結果から他ツールへ引き継ぐモーダルの中身） */
.tool-link-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.tool-link-item {
    display: block; padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); text-decoration: none; color: inherit;
}
.tool-link-item:hover { border-color: var(--accent-strong); background: var(--surface-sunken); }
.tool-link-item-label { display: block; font-weight: 700; color: var(--accent-strong); }
.tool-link-item-desc { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.changelog-list { margin: 0; }
.changelog-list dt { font-size: var(--fs-base); font-weight: 700; color: var(--text); margin: var(--space-3) 0 2px; }
.changelog-list dt:first-child { margin-top: 0; }
.changelog-list dd { margin: 0 0 0 0; font-size: 0.82rem; color: var(--text-muted); }

/* ---------- Ads ---------- */

.ad-slot {
    margin: var(--space-6) 0;
    text-align: center;
    /* AdSenseがまれに枠より広い内部要素を生成してページ全体を横に引き伸ばすことが
       あるため、枠からはみ出した分は切り落とす（正常なレスポンシブ広告には影響しない） */
    overflow-x: clip;
}

/* フッターと同様、色と罫線は本体と同じ幅の内側だけに乗せ、左右の余白はグレーのままにする */
.ad-slot-footer { text-align: center; }
.ad-slot-footer .ad-slot {
    margin: 0 auto;
    max-width: var(--shell-max-width);
    padding: var(--space-3) var(--space-5);
    background: var(--surface-sunken);
    border-top: 1px solid var(--border);
}

/* ---------- Static doc pages ---------- */

/* 本文の幅は800px（一般的なブログテーマの本文幅と同程度）を上限とする。
   中央寄せにするとヘッダー・タブ列・パンくず（いずれも--shell-max-width基準）と
   左端がずれて見えるため、左寄せにしてそれらと左端を揃える */
/* 案内ページ（規約・ポリシー・使い方など）は読ませるためのページなので、
   情報密度を優先するツール画面とは別に、本文を大きく・濃くしている。
   見出しと本文のサイズ差も広げて、長い文書でも構造が目で追えるようにする。 */
.doc-page { max-width: 800px; margin: 0; line-height: 1.85; }
.doc-title { font-size: var(--fs-xl); font-weight: 700; line-height: 1.4; margin: 0 0 var(--space-6); }
.doc-page h2 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.5; margin: var(--space-8) 0 var(--space-3); }
.doc-page p { font-size: var(--fs-md); color: var(--text); margin: 0 0 var(--space-3); }
.doc-page ul { font-size: var(--fs-md); color: var(--text); margin: 0 0 var(--space-3); padding-left: 1.4em; }
.doc-page li { margin: 0 0 var(--space-2); }
.doc-note { font-size: var(--fs-sm); color: var(--text-faint); }
/* ポリシー・規約の末尾に置く制定日・改定日。本文と地続きに見えないよう罫線で区切る */
.doc-revision { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--border); }
/* 本文は本体幅いっぱいに広げるが、フォームの入力欄まで横に間延びさせない */
.doc-page form { max-width: 480px; }

.doc-table-wrap { overflow-x: auto; margin: var(--space-4) 0 var(--space-5); }


/* 案内ページの表。以前は同じセレクタの定義が2組あり、後の組が指定していない
   プロパティ（vertical-align・white-space）だけ前の組が生き残るという読みにくい
   状態だった。実際に効いていた値をそのまま1組へまとめてある。 */
.doc-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: 0.88rem; }
.doc-table th, .doc-table td { border: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.doc-table th { width: 9em; white-space: nowrap; background: var(--surface-sunken); color: var(--text-muted); font-weight: 700; }
.doc-table td { color: var(--text-muted); }

.doc-profile { text-align: center; margin: 0 0 var(--space-6); }
.doc-avatar { display: block; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--space-3); border: 1px solid var(--border); }
.doc-profile-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.doc-profile-role { font-size: 0.82rem; color: var(--text-faint); }

/* ---------- 404 page ---------- */

/* 本文の幅・左寄せは固定ページ（.doc-page）と揃える */
.notfound { max-width: 800px; }
.notfound-status {
    display: inline-block; margin: 0 0 var(--space-3);
    padding: 2px 8px; border-radius: var(--radius-sm);
    background: var(--accent-soft); color: var(--accent-strong);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
}
.notfound-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 var(--space-3); }
.notfound-lead { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 var(--space-5); }
.notfound-actions { margin: 0 0 var(--space-10); }
.notfound-home {
    display: inline-block; padding: 9px 18px; border-radius: var(--radius);
    background: var(--accent); color: var(--surface);
    font-size: var(--fs-base); font-weight: 600; text-decoration: none;
}
.notfound-home:hover { background: var(--accent-strong); }
.notfound-section { margin: 0 0 var(--space-8); }
.notfound-section:last-child { margin-bottom: 0; }
.notfound-section-title { font-size: var(--fs-md); font-weight: 700; margin: 0 0 var(--space-3); }

/* 本文に置く検索欄（404ページ）。入力欄と候補の見た目はヘッダーの虫眼鏡と共通で、
   候補リストだけ入力欄の直下に重ねる（開いたときに下のカテゴリ一覧を押し下げないため） */
.site-search-inline { position: relative; max-width: 480px; }
.site-search-inline .site-search-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
}

.notfound-categories {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-2);
}
.notfound-category {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); text-decoration: none;
}
.notfound-category:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.notfound-category-name { font-size: var(--fs-base); font-weight: 600; }
.notfound-category-count { margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint); }

.notfound-links {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
}
.notfound-links a { font-size: var(--fs-base); font-weight: 600; }
.notfound-links a:hover { text-decoration: underline; }

/* ---------- Responsive: tablet ---------- */

@media (max-width: 900px) {
    .app-content { padding: var(--space-6) var(--space-6) 48px; }

    .site-hero { padding: var(--space-6); }
    /* この幅ではA4横の縦横比を保てる列幅が取れないため、内容なりの高さに戻し、
       行ごとに高さをそろえる。高さの制約が無くなるので説明の行数制限も外す */
    .tool-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 1fr; }
    .tool-tile { aspect-ratio: auto; align-self: stretch; }
    .tool-tile-desc { display: block; -webkit-line-clamp: none; overflow: visible; }
    /* 一覧は行の高さをそろえたいので、ここでも行数を制限する（幅が狭いぶん2行まで）。
       displayも指定し直さないと、上のblockが残ってline-clampが効かない */
    #tool-catalog[data-view="list"] .tool-tile-desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}

/* ---------- Responsive: mobile ---------- */

@media (max-width: 600px) {
    :root { --header-height: 52px; }

    .site-header { padding: 0 var(--space-4); }
    /* ヘッダーが52pxに縮み、タグラインも隠れるためマークも一回り小さくする */
    .brand-mark { width: 30px; height: 30px; font-size: var(--fs-md); }
    .brand-name { font-size: var(--fs-md); }
    .brand-tagline { display: none; }
    /* 狭い画面ではテキストリンクを畳むが、検索（虫眼鏡）だけは残す */
    .site-header-nav .header-link { display: none; }
    .site-header-nav { gap: 0; }
    /* 畳んだテキストリンクの受け皿。この幅でだけメニューを出す */
    .site-menu { display: flex; }

    /* 幅が足りないので、検索は虫眼鏡だけにする（用途はアイコンで伝わる） */
    .site-search-toggle-text { display: none; }
    .site-search-toggle { width: 30px; padding: 0; }
    /* 虫眼鏡の真下だと画面左にはみ出すため、画面幅いっぱいに置き直す */
    .site-search-field {
        position: fixed;
        top: calc(var(--admin-bar-height) + var(--header-height));
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
    }

    .header-tabs { padding: 0 var(--space-4); }
    .header-tabs::before { left: var(--space-4); }
    .header-tabs::after { right: var(--space-4); }

    /* ツール名＋キーワードの長いタイトルが幅を圧迫しすぎないよう、狭い画面では縮める */
    .tool-page-header h1 { font-size: 1.2rem; }

    /* フッターの3カラムは横に並べず縦積みにする */
    .site-footer-widgets {
        flex-direction: column;
        gap: var(--space-6);
        padding: var(--space-6) var(--space-4) var(--space-5);
    }
    .app-content { padding: var(--space-5) var(--space-4) 40px; }

    /* 保存・読み取りは文字を畳んでアイコンだけにする。横幅を空けて「計算する」を
       広く取るためで、畳んでも aria-label があるので読み上げは変わらない。 */
    .tool-data-btn .tool-data-btn-label { display: none; }
    .tool-data-btn { padding-left: var(--space-3); padding-right: var(--space-3); }
    .tool-data-actions {
        justify-content: center;
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }
    .main-2col-scroll-form .wizard-nav-submit .btn { min-width: 0; }

    .wizard-breadcrumb { display: none; }

    .site-hero {
        min-height: 320px;
        padding: var(--space-6) var(--space-4);
    }
    .site-hero-title { font-size: 1.75rem; }
    .site-hero-title small { font-size: 1rem; }
    .site-hero-acronym { gap: var(--space-3); font-size: var(--fs-xs); }
    .site-hero-desc { font-size: 0.9rem; }
    .site-hero-cta { width: 100%; }

    /* 画面の狭い端末では通信量とバッテリーを抑えるため、写真の切り替えをやめて
       1枚目だけを静止画として出す。2枚目以降はそもそも読み込まない
       （index.phpのスクリプトが同じ幅で判定している。変更するときは両方揃えること） */
    .site-hero-slide { display: none; }
    .site-hero-slide:first-child {
        display: block;
        opacity: 1;
        animation: none;
    }

    .page-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

    .tool-category-header { flex-wrap: wrap; }
    .tool-grid { grid-template-columns: 1fr; }
    .tool-tile { min-height: 0; padding-right: 72px; }
    .tool-tile-icon { top: 16px; right: 14px; width: 48px; height: 48px; }

    .panel { padding: var(--space-6) var(--space-5); max-width: 100%; }
    .center-panel { padding-top: var(--space-6); padding-left: var(--space-4); padding-right: var(--space-4); }

    .form-grid { grid-template-columns: 1fr; }

    .site-footer-inner { flex-direction: column; align-items: flex-start; padding: var(--space-4) var(--space-4) var(--space-5); }
    .site-footer-links { flex-wrap: wrap; gap: var(--space-4); }

    .result-table th, .result-table td { padding: 8px 2px; font-size: 0.82rem; }
    .result-table th { width: 60%; }
}

/* ---------- Detailed result panel headings ---------- */

.panel h2 { font-size: 1rem; margin: 0 0 var(--space-3); }
.panel h3 { font-size: 0.88rem; font-weight: 700; margin: var(--space-6) 0 var(--space-2); }
.panel h3:first-of-type { margin-top: var(--space-4); }

/* ---------- Report preview ---------- */

.report-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

/* 出力ボタンと目次を画面上部へ貼り付ける（長い帳票でも、スクロールの途中から
   印刷・Word出力・章の移動ができるようにする）。目次をツールバーの中へ入れる作業は
   report-paged.js が行う。用紙が収まらない狭い画面では、上部を占有すると読む場所が
   なくなるため貼り付けない。 */
@media (min-width: 900px) {
    .report-toolbar {
        position: sticky;
        top: calc(var(--admin-bar-height) + var(--header-height) + var(--tabs-height));
        z-index: 20;
        /* 背景を敷かないと、下を流れる帳票が透けて重なって見える。
           敷く色は本文領域（.app-shell）と同じ白にする。ページ下地の --bg（グレー）だと、
           白い本文の中でこのツールバーだけが灰色の帯として浮いて見えた。
           下を流れる帳票との境目は、タブ帯（.header-tabs）と同じ細い罫線で示す。 */
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: var(--space-4) 0 var(--space-3);
        margin-bottom: var(--space-4);
    }
}

/* ツールバーへ移したあとの目次。ボタンと同じ行に入り込まないよう、必ず次の行へ送る */
.report-toolbar .report-toc-panel {
    flex-basis: 100%;
    max-width: none;
    margin: 0;
}

/* 目次から章へ飛んだときに、見出しが追従ヘッダーの裏へ隠れないようにする。
   ヘッダーの実寸は report-paged.js が --report-sticky-height へ入れる（読み込み前でも
   破綻しないよう既定値を持たせる）。 */
@media (min-width: 900px) {
    .report-section {
        scroll-margin-top: calc(
            var(--admin-bar-height) + var(--header-height) + var(--tabs-height)
            + var(--report-sticky-height, 200px) + var(--space-3)
        );
    }
}

/* 帳票の出力ボタン（印刷・Word出力）。左の「計算結果に戻る」と離して右側へまとめる。 */
.report-toolbar-actions { display: flex; gap: var(--space-3); }

.report-sheet {
    position: relative;
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 18mm 16mm;
    box-sizing: border-box;
}

.report-header { text-align: center; margin-bottom: var(--space-8); border-bottom: 2px solid var(--text); padding-bottom: var(--space-4); }
.report-header h1 { font-size: 1.4rem; margin: 0; }

.report-section { margin-bottom: var(--space-6); position: relative; }
.report-section h2 { font-size: var(--fs-md); font-weight: 700; margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.report-section p { font-size: var(--fs-base); line-height: 1.7; color: var(--text); margin: 0 0 var(--space-3); }
.report-section h3 { font-size: var(--fs-base); font-weight: 700; margin: var(--space-4) 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
/* 留意事項などで本文中に直接置く箇条書き。指定がないと本文（p）より大きく表示されるため、pに揃える。
   数式の記号説明（.report-formula-vars ul）は入れ子の位置にあるため、子セレクタでこの指定から除外される。 */
.report-section > ul, .report-section > ol { font-size: var(--fs-base); line-height: 1.7; color: var(--text); margin: 0 0 var(--space-3); padding-left: 1.4em; }
.report-section > ul > li, .report-section > ol > li { margin-bottom: var(--space-1); }

.report-footer { border-top: 1px solid var(--border); padding-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-faint); position: relative; }
.report-footer p { margin: 0 0 var(--space-1); }

/* 帳票の目次（本文冒頭・ツールバー直下に表示。印刷時は非表示） */
.report-toc-panel {
    max-width: 210mm;
    margin: 0 auto var(--space-4);
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.report-toc-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 var(--space-1);
}
.report-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
    font-size: 0.8rem;
}
.report-toc a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 3px 0;
}
.report-toc a:hover { color: var(--accent-strong); }
/* いま読んでいる章。太字にすると文字幅が変わって目次の折り返しが動くため、
   色と下線（レイアウトに影響しないinsetの影）で示す。 */
.report-toc a.is-current {
    color: var(--accent-strong);
    box-shadow: inset 0 -2px 0 currentColor;
}

/* ---------- 計算式（KaTeX） ---------- */

.report-diagram {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    break-inside: avoid;
    text-align: center;
}
/* 図の説明文。図の枠内に入れておき、印刷時に図とキャプションが分断されないようにする */
.report-section p.report-figure-note {
    margin: var(--space-3) 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

.report-formula {
    margin: var(--space-3) 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    break-inside: avoid;
}
.report-formula-display { display: block; overflow-x: auto; padding: var(--space-1) 0; }
.report-formula-vars { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); }
.report-formula-vars-label { font-weight: 600; color: var(--text); }
.report-formula-vars ul { margin: var(--space-1) 0 0; padding-left: 1.2em; }
.report-formula-vars li { margin-bottom: 2px; }

@page { size: A4 portrait; margin: 16mm 14mm; }

/* 帳票（.report-sheet）内の表は、画面表示・印刷のどちらでも横スクロールさせない
   （帳票は用紙1枚の見た目を再現するものであり、スクロールしないと読めない・
   スクロールしたまま印刷すると列が途切れる、では計算書として成立しないため）。
   幅が足りない分は折り返し・フォント縮小で用紙内に収める。 */
.report-sheet .table-scroll { overflow-x: visible; }
.report-sheet .table-scroll .result-table { white-space: normal; font-size: 0.75rem; }
.report-sheet .table-scroll .result-table th, .report-sheet .table-scroll .result-table td { padding: 3px 4px; }

/* ---------- 帳票のページ分割プレビュー（Paged.js） ---------- */

/* 印刷時にブラウザが入れる日付・URLの消し方を案内する一文。画面のみ */
/* ツールバーの中に置くが、ボタンの幅を奪わないよう必ず次の行へ送る */
.report-print-hint {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-faint);
}

/* 組版できた帳票はページごとに用紙として並べる。ライブラリを読み込めなかった場合や
   組版に失敗した場合は、この要素自体が作られず、従来の1枚続きの表示が残る。 */
/* 画面と印刷でレイアウトの型（display）を変えない。印刷のたびに組み直しが起きると、
   Paged.jsが配置したページがずれる。用紙どうしの間隔はmarginで作る。 */
.report-paged .pagedjs_page {
    margin: 0 auto var(--space-5);
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

@media print {
    /* 組版済みのページをそのまま印刷する。用紙の余白はページの内側にあるので、
       ブラウザ側の余白は report-paged.js が @page margin:0 で打ち消している。 */
    body.report-is-paged .report-paged .pagedjs_page { margin: 0; border: none; box-shadow: none; }
    /* 1枚続きの帳票向けの改ページ指定は、組版済みのページの中では効かせない
       （章の切れ目で物理ページが余計に増えてしまう）。 */
    body.report-is-paged .report-section + .report-section,
    body.report-is-paged .report-section:last-of-type { break-before: auto; }
    .report-print-hint { display: none !important; }
}

@media print {
    body { padding-top: 0 !important; }
    .site-header, .header-tabs, .site-footer, .report-toolbar, .report-toc-panel, .ad-slot, .ad-slot-footer, .share-bar, .share-rail, .admin-bar { display: none !important; }
    .app-content { padding: 0 !important; }
    .report-sheet { box-shadow: none; border: none; width: auto; min-height: auto; padding: 0; }
    .report-formula, .report-diagram, .result-table, tr { break-inside: avoid; }
    .report-section h2, .report-section h3 { break-after: avoid; }
    .report-section + .report-section { break-before: page; }
    /* 留意事項（常に最後のセクション）を単独の最終ページにする */
    .report-section:last-of-type { break-before: page; break-after: avoid; }
}

@media (max-width: 600px) {
    .report-sheet { padding: var(--space-6); min-height: auto; }
}

/* ---------- FEM地盤変形解析 ---------- */

.ground-drawing { width: 100%; max-width: 620px; margin: 0 auto; }
.ta-live-summary { margin-bottom: var(--space-4); }
.ta-live-summary .result-table { margin: 0; }
.ta-standard-candidate:not(:empty) { margin: var(--space-3) 0; padding: var(--space-3); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ta-standard-candidate .result-table { margin: var(--space-2) 0; }
.ground-drawing-svg { width: 100%; height: auto; display: block; }
.ground-drawing-placeholder {
    display: flex; align-items: center; justify-content: center;
    min-height: 220px; color: var(--text-faint); font-size: var(--fs-base); text-align: center;
}
.ground-drawing-svg .embankment-fill { fill: #e7ddc6; stroke: #a68f5c; stroke-width: 1.2; }
.ground-drawing-svg .layer-fill-a { fill: #f2ead2; }
.ground-drawing-svg .layer-fill-b { fill: #ece4d0; }
.ground-drawing-svg .layer-fill-camclay { fill: #aab5a4; }
.ground-drawing-svg .layer-fill-liquefied { fill: #a3c1d1; }
.ground-drawing-svg .layer-line { stroke: #b7a468; stroke-width: 1; }
.ground-drawing-svg .ground-line { stroke: var(--text-muted); stroke-width: 1.5; }
.ground-drawing-svg .domain-line { stroke: var(--text); stroke-width: 1.3; }
.ground-drawing-svg .roller-mark { stroke: var(--accent-strong); stroke-width: 1; fill: none; }
.ground-drawing-svg .gwl-line { stroke: #2b7fd6; stroke-width: 1.5; stroke-dasharray: 6 3; }
.ground-drawing-svg .gwl-mark { fill: #2b7fd6; stroke: none; }
.ground-drawing-svg .probe-mark { fill: #c0392b; stroke: #fff; stroke-width: 1; }
.ground-drawing-svg .dim-ext { stroke: var(--line-faint); stroke-width: 1; }
.ground-drawing-svg .dim-line { stroke: var(--accent-strong); stroke-width: 1; }
.ground-drawing-svg .dim-label { font-size: 11px; fill: var(--accent-strong); font-weight: 600; }
.ground-drawing-svg .dim-arrow { fill: var(--accent-strong); }
.ground-drawing-svg .dim-label-sub { font-size: 10px; fill: var(--text-faint); font-weight: 600; }

#fem-progress-panel { margin: var(--space-4) 0 var(--space-6); }
.fem-progress-label { font-size: var(--fs-base); color: var(--text-muted); margin-bottom: var(--space-2); }
.fem-progress-track { height: 10px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.fem-progress-bar { height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width 0.2s ease; }

.main-2col.main-2col-single { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }

.fem-scale-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--fs-base); }
.fem-scale-controls-label { color: var(--text-muted); }
.fem-scale-value-input { width: 80px; padding: 6px 8px; }

.fem-deformed-wrap { max-width: 720px; margin: var(--space-4) auto 0; }
.fem-deformed-drawing { width: 100%; }
.fem-deformed-drawing svg { width: 100%; height: auto; display: block; }
.fem-deformed-drawing .mesh-original { stroke: var(--line-faint); stroke-width: 0.6; fill: none; }
.fem-deformed-drawing .mesh-deformed { stroke: var(--accent-strong); stroke-width: 0.8; fill: none; }
.fem-deformed-drawing .fem-scale-label { font-size: 11px; fill: var(--text-muted); }

.fem-contour-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: var(--space-4);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.fem-contour-item { text-align: center; }
.fem-contour-title { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--space-2); }
.fem-contour-canvas { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); display: block; }
.fem-contour-legend { height: 12px; border-radius: 3px; margin-top: var(--space-2); position: relative; }

/* ---------- アクセス解析ダッシュボード ---------- */

.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); }

.status-muted { background: var(--surface-sunken); color: var(--text-muted); }

/* 60秒ごとの自動更新中は集計部分を少し薄くして、取り直していることを示す。
   差し替えは一瞬で終わるため、動きは付けずに濃さだけ変える。 */
#analytics-live.is-updating { opacity: 0.55; }

.analytics-status-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}
.analytics-toggle-form { margin: 0; }

.analytics-period-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: var(--space-4) 0 var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}
.analytics-period-link {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid var(--border);
}
.analytics-period-link:hover { background: var(--surface-hover); }
.analytics-period-link.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.analytics-custom-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    font-size: 0.8rem;
}
.analytics-custom-form input[type="date"] { padding: 5px 6px; font-size: 0.8rem; }

.analytics-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0;
}
.analytics-summary-card { max-width: none; padding: var(--space-5); }
.analytics-summary-label { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
.analytics-summary-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.analytics-summary-change { font-size: 0.75rem; color: var(--text-faint); margin-top: var(--space-1); }

.analytics-chart-panel { max-width: none; margin-bottom: var(--space-5); }
.analytics-page .panel { max-width: none; margin-bottom: var(--space-5); }
.analytics-chart-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.analytics-chart-header h2 { margin: 0; font-size: 1rem; }
.analytics-legend { display: flex; align-items: center; gap: 5px; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; }

.analytics-chart { width: 100%; overflow-x: auto; }
.analytics-svg { width: 100%; height: auto; display: block; min-width: 520px; }
.analytics-grid-line { stroke: var(--border); stroke-width: 1; }
.analytics-axis-label { font-size: 10px; fill: var(--text-faint); }
.analytics-area-pv { fill: var(--accent-soft); opacity: 0.7; }
.analytics-line-pv { stroke: var(--accent); stroke-width: 2; }
.analytics-area-calc { fill: #e6f6ec; opacity: 0.7; }
.analytics-line-calc { stroke: #1f9d55; stroke-width: 2; }
.analytics-bar-svg { min-width: 480px; }
.analytics-bar-rect { fill: var(--accent); }
.analytics-bar-label { font-size: 11px; fill: var(--text); }
.analytics-bar-value { font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }

.analytics-empty { color: var(--text-faint); font-size: var(--fs-base); padding: var(--space-4) 0; }

/* アクセス明細（1件ずつの閲覧ログ）。100件ずつでも縦に伸びすぎないよう高さを決めて中でスクロールさせ、
   見出し行はスクロールしても残るようstickyにする（背景を明示しないと行が透けて重なる）。 */
.analytics-log-scroll { max-height: 420px; overflow: auto; }
.analytics-log-scroll .result-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
}
.analytics-log-scroll .result-table td { font-variant-numeric: tabular-nums; }
/* 明細の種別。推移グラフのPV（青）・計算回数（緑）と同じ色使いにして、
   グラフと表のどちらを見ても同じものを指していると分かるようにする。 */
.analytics-kind {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.6;
    white-space: nowrap;
}
.analytics-kind-pv { background: var(--accent-soft); color: var(--accent-strong); }
.analytics-kind-calc { background: #e6f6ec; color: #17703c; }
/* 帳票はページ閲覧の一種だが、計算のあとの出口として区別できるよう別の色にする */
.analytics-kind-report { background: #fdf0e0; color: #8a5216; }
.analytics-pager {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}
.analytics-pager-status { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.analytics-pager button[disabled] { opacity: 0.45; cursor: default; }

@media (max-width: 700px) {
    .analytics-custom-form { margin-left: 0; width: 100%; }
    .analytics-summary-grid { grid-template-columns: repeat(2, 1fr); }
}
.fem-contour-legend-labels { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--text-faint); margin-top: 2px; }

/* ---------- 梁の断面力計算 ---------- */

.beam-loadlist { display: grid; gap: var(--space-3); }
.beam-loadcard { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); background: var(--surface-sunken); }
.beam-loadcard-head { margin-bottom: var(--space-2); }
.beam-loadcard-head b { font-size: var(--fs-base); color: var(--accent-strong); }

.beam-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.beam-result-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--surface-sunken); }
.beam-result-card span { display: block; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; }
.beam-result-card strong { display: block; margin-top: 2px; font-size: 0.9rem; font-variant-numeric: tabular-nums; }

.beam-drawing { max-width: 900px; }
.beam-drawing-svg .beam-band-title { font-size: 12px; font-weight: 700; fill: var(--accent-strong); }
.beam-drawing-svg .beam-line { stroke: var(--accent-strong); stroke-width: 3; }
.beam-drawing-svg .beam-axis-line { stroke: var(--border-strong); stroke-width: 1; }
.beam-drawing-svg .beam-support { fill: #dfe8f1; stroke: var(--accent-strong); stroke-width: 1.2; }
.beam-drawing-svg .beam-support-dot { fill: var(--accent-strong); }
.beam-drawing-svg .beam-fixed-support { stroke: var(--accent-strong); stroke-width: 3; }
.beam-drawing-svg .beam-load-line { stroke: #b8362c; stroke-width: 1.8; }
.beam-drawing-svg .beam-load-arrow { fill: #b8362c; }
.beam-drawing-svg .beam-load-label { font-size: 10.5px; font-weight: 700; fill: #b8362c; }
.beam-drawing-svg .beam-udl-line { stroke: #1769aa; stroke-width: 1.6; }
.beam-drawing-svg .beam-udl-arrow-line { stroke: #1769aa; stroke-width: 1.1; }
.beam-drawing-svg .beam-udl-arrow { fill: #1769aa; }
.beam-drawing-svg .beam-udl-label { font-size: 10.5px; font-weight: 700; fill: #1769aa; }
.beam-drawing-svg .beam-reaction-line { stroke: #1a7a4c; stroke-width: 1.8; }
.beam-drawing-svg .beam-reaction-arrow { fill: #1a7a4c; }
.beam-drawing-svg .beam-reaction-label { font-size: 10.5px; font-weight: 700; fill: #1a7a4c; text-anchor: middle; }
.beam-drawing-svg .beam-moment-arc { fill: none; stroke: #7a4fa0; stroke-width: 1.6; }
.beam-drawing-svg .beam-moment-label { font-size: 10.5px; font-weight: 700; fill: #7a4fa0; text-anchor: middle; }
.beam-drawing-svg .beam-note-label { font-size: 11px; fill: var(--text-faint); }
.beam-drawing-svg .beam-sfd-area { fill: rgba(23, 105, 170, 0.12); stroke: none; }
.beam-drawing-svg .beam-sfd-line { stroke: #1769aa; stroke-width: 1.8; }
.beam-drawing-svg .beam-bmd-area { fill: rgba(184, 54, 44, 0.1); stroke: none; }
.beam-drawing-svg .beam-bmd-line { stroke: #b8362c; stroke-width: 1.8; }
.beam-drawing-svg .beam-extrema-label { font-size: 10.5px; font-weight: 800; fill: #7a2018; text-anchor: middle; }
.beam-drawing-svg .beam-probe-dot { fill: var(--danger); stroke: #fff; stroke-width: 0.8; }
.beam-drawing-svg .beam-probe-index { font-size: 9px; font-weight: 800; fill: var(--danger); text-anchor: middle; }
/* 変形図。破線が変形前の梁軸、実線が変形後の梁軸（変形量は縦方向のみ誇張して描く） */
.beam-drawing-svg .beam-defl-base { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 5 4; }
.beam-drawing-svg .beam-defl-line { stroke: #7a4fa0; stroke-width: 2; }
.beam-drawing-svg .beam-defl-node { fill: #7a4fa0; }
.beam-drawing-svg .beam-defl-marker { stroke: #7a4fa0; stroke-width: 1; stroke-dasharray: 3 3; }

/* たわみ入力欄の「一般鋼材から選ぶ」 */
.beam-section-pickrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: 6px; }
.beam-section-current { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 700; }

/* 一般鋼材の選択モーダル（2Dフレーム解析の「一般鋼材から選ぶ」でも共用する） */
.beam-section-controls { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-3); }
.beam-section-controls .form-group { margin: 0; min-width: 220px; }
.beam-section-controls input[type="search"] { width: 100%; }
.beam-section-list { margin-top: var(--space-3); }
.beam-section-group { margin-bottom: var(--space-5); }
.beam-section-group[hidden] { display: none; }
.beam-section-group h3 { margin: 0 0 var(--space-2); font-size: var(--fs-base); color: var(--accent-strong); }
.beam-section-group-note { margin: 0 0 var(--space-2); }
.beam-section-table { font-variant-numeric: tabular-nums; }
.beam-section-table td:not(:first-child), .beam-section-table th:not(:first-child) { text-align: right; }
.beam-section-table th:first-child { text-align: left; }
.beam-section-table td:last-child, .beam-section-table th:last-child { text-align: center; width: 1%; white-space: nowrap; }
.beam-section-table tr[hidden] { display: none; }
.beam-section-table .btn { padding: 3px 12px; font-size: 0.75rem; min-height: 0; }
.beam-section-table .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.beam-section-empty { font-size: 0.82rem; color: var(--text-muted); }

@media (max-width: 560px) {
    .beam-result-grid { grid-template-columns: 1fr; }
    .beam-section-controls { flex-direction: column; gap: var(--space-3); }
    .beam-section-controls .form-group { min-width: 0; width: 100%; }
}

/* ---------- 2Dフレーム解析（面内） ---------- */

/* 表示する図の切り替え */
.frame-view-toggles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.frame-view-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 4px 10px; font-size: 0.75rem; font-weight: 700;
    background: var(--surface-sunken); cursor: pointer;
}
.frame-view-toggle input { margin: 0; }
.frame-view-toggle:has(input:checked) { border-color: var(--accent-strong); color: var(--accent-strong); }

.frame-drawing { max-width: 900px; }
.frame-drawing-svg .frame-member-line { stroke: var(--text); stroke-width: 2.4; }
.frame-drawing-svg .frame-node-dot { fill: var(--surface); stroke: var(--text); stroke-width: 1.6; }
.frame-drawing-svg .frame-node-label { font-size: 11px; font-weight: 800; fill: var(--text); text-anchor: middle; }
.frame-drawing-svg .frame-member-badge { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; opacity: 0.92; }
.frame-drawing-svg .frame-member-label { font-size: 10.5px; font-weight: 800; fill: var(--accent-strong); text-anchor: middle; }

/* 支点記号 */
.frame-drawing-svg .frame-support-base { stroke: var(--accent-strong); stroke-width: 2.2; }
.frame-drawing-svg .frame-support-hatch { stroke: var(--accent-strong); stroke-width: 1; }
.frame-drawing-svg .frame-support-tri { fill: #dfe8f1; stroke: var(--accent-strong); stroke-width: 1.2; }
.frame-drawing-svg .frame-support-roller { fill: var(--surface); stroke: var(--accent-strong); stroke-width: 1.2; }

/* 荷重（断面力図の色と混ざらないよう、荷重だけ橙系にする） */
.frame-drawing-svg .frame-load-line { stroke: #c2610c; stroke-width: 1.8; }
.frame-drawing-svg .frame-load-arrow { fill: #c2610c; }
.frame-drawing-svg .frame-load-label { font-size: 10px; font-weight: 700; fill: #c2610c; }
.frame-drawing-svg .frame-udl-area { fill: rgba(194, 97, 12, 0.10); stroke: none; }
.frame-drawing-svg .frame-udl-line { stroke: #c2610c; stroke-width: 1.6; }
.frame-drawing-svg .frame-udl-arrow-line { stroke: #c2610c; stroke-width: 1; }
.frame-drawing-svg .frame-udl-arrow { fill: #c2610c; }
.frame-drawing-svg .frame-udl-label { font-size: 10px; font-weight: 700; fill: #c2610c; }
.frame-drawing-svg .frame-moment-arc { fill: none; stroke: #c2610c; stroke-width: 1.8; }
.frame-drawing-svg .frame-moment-arrow { fill: #c2610c; }
.frame-drawing-svg .frame-moment-label { font-size: 10px; font-weight: 700; fill: #c2610c; }

/* 断面力図。モーメントは引張側へ張り出すように描く */
.frame-drawing-svg .frame-diag-line { stroke-width: 1.6; }
.frame-drawing-svg .frame-diag-area { stroke: none; }
.frame-drawing-svg .frame-diag-label { font-size: 9.5px; font-weight: 800; }
.frame-drawing-svg .frame-diag-moment.frame-diag-line { stroke: #b8362c; }
.frame-drawing-svg .frame-diag-moment.frame-diag-area { fill: rgba(184, 54, 44, 0.14); }
.frame-drawing-svg text.frame-diag-moment { fill: #7a2018; }
.frame-drawing-svg .frame-diag-shear.frame-diag-line { stroke: #1769aa; }
.frame-drawing-svg .frame-diag-shear.frame-diag-area { fill: rgba(23, 105, 170, 0.14); }
.frame-drawing-svg text.frame-diag-shear { fill: #114b78; }
.frame-drawing-svg .frame-diag-axial.frame-diag-line { stroke: #1a7a4c; }
.frame-drawing-svg .frame-diag-axial.frame-diag-area { fill: rgba(26, 122, 76, 0.14); }
.frame-drawing-svg text.frame-diag-axial { fill: #0f5c39; }
.frame-drawing-svg .frame-deform-line { stroke: #7a4fa0; stroke-width: 2; stroke-dasharray: none; }

/* 凡例 */
.frame-drawing-svg .frame-legend-label { font-size: 10.5px; font-weight: 700; fill: var(--text-muted); }
.frame-drawing-svg .frame-legend-load { stroke: #c2610c; stroke-width: 2.4; }
.frame-drawing-svg .frame-legend-moment { stroke: #b8362c; stroke-width: 2.4; }
.frame-drawing-svg .frame-legend-shear { stroke: #1769aa; stroke-width: 2.4; }
.frame-drawing-svg .frame-legend-axial { stroke: #1a7a4c; stroke-width: 2.4; }
.frame-drawing-svg .frame-legend-deform { stroke: #7a4fa0; stroke-width: 2.4; }


/* 図の拡大表示（A4横）と画像保存 */
.drawing-panel-tools { display: flex; align-items: center; gap: var(--space-3); }
/* 拡大ボタンは目立たせる（既定の.btnより一回り大きい青） */
.frame-zoom-btn { padding: 12px 28px; font-size: 1rem; font-weight: 700; }
/* 背の高いボタンが入るため、見出しの行はベースラインではなく中央でそろえる */
.drawing-panel-header:has(.frame-zoom-btn) { align-items: center; flex-wrap: wrap; gap: var(--space-2); }
/* 用紙の高さ（幅×210/297）に見出し・ツールバー・注記のぶんを足しても画面に収まるよう、
   モーダルの幅そのものを抑える。こうしないと縦スクロールしないと保存ボタンや注記に届かない。 */
.modal.modal-zoom { max-width: min(96vw, calc((94vh - 220px) * 297 / 210), 1500px); max-height: 94vh; }
.frame-zoom-toolbar {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3);
}
.frame-zoom-toolbar .frame-view-toggles { margin-bottom: 0; }
/* A4横（297:210）の用紙。図はこの比率に収めて中央へ置く */
.frame-zoom-sheet {
    width: 100%; aspect-ratio: 297 / 210;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden;
}
.frame-zoom-sheet svg { width: 100%; height: 100%; display: block; }

@media (max-width: 700px) {
    .frame-zoom-toolbar { flex-direction: column; align-items: stretch; }
}

/* 行の追加・削除（行数指定ではなく、表に行を足したり消したりする） */
.frame-row-actions { align-items: center; gap: var(--space-3); }
.frame-row-actions [data-row-count] { font-variant-numeric: tabular-nums; }
.frame-row-actions .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.frame-row-delcell { width: 1%; text-align: center; }
.frame-row-del {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-muted);
    width: 24px; height: 24px; line-height: 1; font-size: 15px; font-weight: 700;
    cursor: pointer; padding: 0;
}
.frame-row-del:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.frame-row-del:disabled { opacity: 0.3; cursor: not-allowed; }

/* 入力表 */
.frame-section-table .frame-name-input { min-width: 150px; }
.frame-load-table th, .frame-load-table td { white-space: nowrap; }
.frame-support-legend { margin-top: var(--space-3); }
.frame-support-legend .field-note { margin: 2px 0; }

/* 結果表：最大値の位置xを値の下に小さく添える */
.frame-member-table .frame-pos { display: block; font-size: 0.68rem; color: var(--text-faint); }

/* ---------- ボックスカルバートの設計 ---------- */

/* 断面図で水位のラベルが躯体の線に重なっても読めるようにする下敷き */
.wall-drawing-svg .cv-label-bg { fill: var(--surface); opacity: 0.85; }

/* 荷重図・断面力図（計算結果ページと帳票で共用） */
.culvert-diagram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0;
}
.culvert-diagram-svg { width: 100%; height: auto; display: block; }
.culvert-diagram-svg .cv-frame { fill: none; stroke: var(--border-strong); stroke-width: 1.4; stroke-dasharray: 5 3; }
.culvert-diagram-svg .cv-body { fill: var(--surface-sunken); stroke: var(--text); stroke-width: 1.2; }
.culvert-diagram-svg .cv-bmd-area { fill: rgba(184, 54, 44, 0.10); stroke: none; }
.culvert-diagram-svg .cv-bmd-line { fill: none; stroke: #b8362c; stroke-width: 1.6; }
.culvert-diagram-svg .cv-sfd-area { fill: rgba(23, 105, 170, 0.12); stroke: none; }
.culvert-diagram-svg .cv-sfd-line { fill: none; stroke: #1769aa; stroke-width: 1.6; }
.culvert-diagram-svg .cv-load-line { stroke: #1769aa; stroke-width: 1.1; fill: none; }
.culvert-diagram-svg .cv-load-area { fill: rgba(23, 105, 170, 0.10); stroke: none; }
.culvert-diagram-svg .cv-load-arrow { fill: #1769aa; }
.culvert-diagram-svg .cv-load-label { font-size: 10px; font-weight: 700; fill: #1769aa; }
.culvert-diagram-svg .cv-reaction-line { stroke: #1a7a4c; stroke-width: 1.1; fill: none; }
.culvert-diagram-svg .cv-reaction-arrow { fill: #1a7a4c; }
.culvert-diagram-svg .cv-reaction-label { font-size: 10px; font-weight: 700; fill: #1a7a4c; }
.culvert-diagram-svg .cv-label { font-size: 12px; font-weight: 700; fill: var(--accent-strong); }
.culvert-diagram-svg .cv-extrema { font-size: 10.5px; font-weight: 800; fill: #7a2018; }
.culvert-diagram-svg .cv-note { font-size: 10px; fill: var(--text-muted); }

/* ---------- RCの断面計算 ---------- */

.rc-section-drawing { max-width: 560px; }
.rc-section-drawing-svg .rc-concrete-fill { fill: #c6cad0; stroke: #5b6470; stroke-width: 1.4; }
.rc-section-drawing-svg .rc-rebar-tension,
.rc-section-drawing-svg .rc-rebar-compression { fill: #1a1a1a; stroke: #fff; stroke-width: 0.7; }

/* ---------- 地盤圧密（一次元解析）の検討 ---------- */
.cs-drawing { max-width: 620px; }
.ground-drawing-svg .cs-layer-nonsettling { fill: #d7d2c8; }
.ground-drawing-svg .cs-layer-consolidating { fill: #c9d6c2; }
.ground-drawing-svg .cs-layer-immediate { fill: #e8dba3; }
.ground-drawing-svg .cs-surcharge-fill { fill: #b8362c; opacity: 0.55; }
.ground-drawing-svg .cs-structure-fill { fill: #1769aa; opacity: 0.45; stroke: #1769aa; stroke-width: 1; }
.cs-result-summary { margin-bottom: var(--space-4); }
.cs-summary-table th, .cs-summary-table td { font-variant-numeric: tabular-nums; }
.cs-total-row th { font-variant-numeric: tabular-nums; border-top: 2px solid var(--border); }
.cs-plot-legend { display: flex; gap: var(--space-4); font-size: var(--fs-sm); margin-top: var(--space-2); }
.cs-scale-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; font-size: var(--fs-base); }
.cs-scale-controls-label { color: var(--text-muted); }
.cs-scale-value-input { width: 80px; padding: 6px 8px; }
.ground-drawing-svg .cs-settled-line { fill: none; }
.curve-count-input { width: 5em; }
.layer-cell-disabled { background: var(--surface-sunken); }
.layer-cell-disabled .layer-input:disabled, .layer-cell-disabled .layer-input:read-only { background: transparent; color: var(--text-faint); }
.cs-layer-curve-block { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.cs-layer-curve-block:last-child { border-bottom: none; }
.cs-layer-curve-block h4 { margin-bottom: var(--space-2); }
.cs-layer-curve-block h5 { margin: var(--space-3) 0 var(--space-2); font-size: 0.9rem; color: var(--text-muted); }
.cs-curve-table th, .cs-curve-table td { font-variant-numeric: tabular-nums; padding: 2px 8px; }
.cs-curve-table { margin-bottom: var(--space-2); }
/* e-logP曲線・mv-logP曲線・B.K.Hough図表: 全て同一のviewBox寸法（460x280）で描画し、
   CSS上の表示幅も統一することで、図同士のフォントサイズ・線の太さの見え方を揃える。
   dim-label-sub/dim-extはground-drawing-svg/wall-drawing-svgでも使うSVG共通の目盛・軸線
   スタイルのため、ここにもスコープを追加して同じ見た目で使う。 */
.ground-drawing-svg .dim-ext, .wall-drawing-svg .dim-ext, .cs-curve-svg .dim-ext, .sgd-chart-svg .dim-ext { stroke: var(--line-faint); stroke-width: 1; }
.ground-drawing-svg .dim-label-sub, .wall-drawing-svg .dim-label-sub, .cs-curve-svg .dim-label-sub, .sgd-chart-svg .dim-label-sub { font-size: 10px; fill: var(--text-faint); font-weight: 600; }
.cs-curve-chart { max-width: 460px; }
.cs-curve-svg { width: 100%; height: auto; display: block; }
.cs-curve-svg .cs-curve-grid { stroke: var(--border); stroke-width: 0.6; }
.cs-curve-svg .cs-curve-line { stroke: var(--accent-strong); stroke-width: 1.6; }
.cs-curve-svg .cs-curve-marker { fill: var(--danger); stroke: #fff; stroke-width: 1; }
.cs-curve-svg .cs-curve-marker-label { font-size: 10px; fill: var(--danger); font-weight: 700; }
.cs-curve-svg .cs-hough-line { stroke: var(--line-faint); stroke-width: 1; }
.cs-curve-svg .cs-hough-label { font-size: 10px; fill: var(--text-faint); font-weight: 600; }
.cs-curve-svg .cs-hough-line-selected { stroke: var(--danger); stroke-width: 2; }
.cs-curve-svg .cs-hough-label-selected { font-size: 10px; fill: var(--danger); font-weight: 700; }

/* 盛土に伴う地盤変形解析（簡便法） */
.sgd-drawing { max-width: 620px; }
.ground-drawing-svg .sgd-settle-line { stroke: var(--accent-strong); stroke-width: 2; }
.ground-drawing-svg .sgd-uplift-line { stroke: var(--danger); stroke-width: 2; }
.ground-drawing-svg .sgd-horiz-arrow { stroke: #2e8b57; stroke-width: 1.5; }
.ground-drawing-svg .sgd-horiz-arrowhead { fill: #2e8b57; stroke: none; }
.ground-drawing-svg .sgd-interp-line { stroke: var(--line-faint); stroke-width: 1.5; stroke-dasharray: 5 3; }
.ground-drawing-svg .sgd-point-mark { fill: var(--line-faint); stroke: #fff; stroke-width: 1; }
.sgd-plot-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-sm); margin-top: var(--space-2); }
.sgd-legend-settle { color: var(--accent-strong); }
.sgd-legend-uplift { color: var(--danger); }
.sgd-legend-horiz { color: #2e8b57; }
.sgd-legend-dashed { color: var(--text-faint); }
.sgd-result-summary { margin-bottom: var(--space-4); }
.sgd-summary-table th, .sgd-summary-table td { font-variant-numeric: tabular-nums; }
.sgd-scale-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; font-size: var(--fs-base); }
.sgd-scale-controls-label { color: var(--text-muted); }
.sgd-scale-value-input { width: 80px; padding: 6px 8px; }
.sgd-chart { max-width: 620px; margin-bottom: var(--space-3); }
.sgd-chart-svg { width: 100%; height: auto; display: block; }
.sgd-chart-svg .sgd-chart-grid { stroke: var(--border); stroke-width: 0.6; }
.sgd-chart-svg .sgd-chart-zero-line { stroke: var(--text-muted); stroke-width: 1; }
.sgd-chart-svg .sgd-settle-line { stroke: var(--accent-strong); stroke-width: 2; }
.sgd-chart-svg .sgd-uplift-line { stroke: var(--danger); stroke-width: 2; }
.sgd-chart-svg .sgd-horiz-chart-line { stroke: #2e8b57; stroke-width: 2; }

/* 双曲線法による沈下予測 */
.hsp-chart { max-width: 620px; margin-bottom: var(--space-2); }
.hsp-chart-svg { width: 100%; height: auto; display: block; }
.hsp-chart-svg .hsp-chart-grid { stroke: var(--border); stroke-width: 0.6; }
.hsp-chart-svg .hsp-curve-line { stroke: var(--accent-strong); stroke-width: 2; }
.hsp-chart-svg .hsp-fit-line { stroke: var(--accent-strong); stroke-width: 1.6; }
/* 最終沈下量S∞の漸近線・残留沈下量の注記は、実測値（緑）や予測曲線（青）と
   取り違えないよう警告色（赤系）で描く */
.hsp-chart-svg .hsp-asymptote { stroke: var(--danger); stroke-width: 1.2; stroke-dasharray: 6 4; }
.hsp-chart-svg .hsp-asymptote-label { font-size: 10px; fill: var(--danger); font-weight: 700; }
.hsp-chart-svg .hsp-measured-mark { fill: #2e8b57; stroke: #fff; stroke-width: 1; }
.hsp-chart-svg .hsp-origin-mark { fill: var(--danger); stroke: #fff; stroke-width: 1; }
.hsp-chart-svg .hsp-marker-line { stroke: var(--line-faint); stroke-width: 1; stroke-dasharray: 4 3; }
.hsp-chart-svg .hsp-marker-mark { fill: var(--accent); stroke: #fff; stroke-width: 1; }
.hsp-chart-svg .hsp-marker-label { font-size: 10px; fill: var(--accent); font-weight: 700; }
.hsp-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-2); }

/* 開水路の水理計算: 水深と流量の関係（H-Q曲線） */
.och-chart { max-width: 620px; margin-top: var(--space-2); }
.och-chart-svg { width: 100%; height: auto; display: block; }
.och-chart-svg .och-chart-grid { stroke: var(--border); stroke-width: 0.6; }
.och-chart-svg .och-chart-curve { stroke: var(--accent-strong); stroke-width: 2; }
.och-chart-svg .och-chart-tick { font-size: 10px; fill: var(--text-muted); }
.och-chart-svg .och-chart-axis-label { font-size: 11px; fill: var(--text-muted); font-weight: 600; }
.och-chart-svg .och-chart-marker-line { stroke: var(--line-faint); stroke-width: 1; stroke-dasharray: 4 3; }
.och-chart-svg .och-chart-marker { fill: #2b7fd6; stroke: #fff; stroke-width: 1; }
.och-chart-svg .och-chart-marker-label { font-size: 10px; fill: #2b7fd6; font-weight: 700; }
/* 記号と説明が別々に折り返さないよう、1項目を1つのフレックスアイテムにまとめる */
.hsp-legend-item { white-space: nowrap; }
.hsp-legend-measured { color: #2e8b57; font-weight: 700; }
.hsp-legend-origin { color: var(--danger); font-weight: 700; }
.hsp-legend-curve { color: var(--accent-strong); font-weight: 700; }
.hsp-legend-asymptote { color: var(--danger); font-weight: 700; }
.hsp-result-summary { margin-bottom: var(--space-4); }
.hsp-summary-table th, .hsp-summary-table td { font-variant-numeric: tabular-nums; }
/* 最終沈下量・残留沈下量など、設計判断に直接使う行を強調する */
.hsp-summary-table tr.hsp-summary-key td { font-weight: 700; color: var(--accent-strong); }
.hsp-origin-row th, .hsp-origin-row td { background: var(--accent-soft); }
.hsp-input-table { max-width: 420px; }
.hsp-input-table input.layer-input { width: 92px; }
.hsp-paste-block { margin: 0 0 var(--space-4); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.hsp-paste-block summary { cursor: pointer; font-size: var(--fs-base); color: var(--accent); font-weight: 600; }
.hsp-paste-input { width: 100%; margin: var(--space-2) 0; padding: var(--space-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; }
.hsp-error { margin: 0 0 var(--space-3); padding: 10px 12px; border: 1px solid #efb0aa; border-radius: 8px; background: #fff4f2; color: #8e2119; font-size: var(--fs-base); }

/* L型擁壁の構造図作成 */
/* 「L型擁壁の設計計算」から遷移してきた場合のみ表示する戻りリンク */
.lwd-back-nav { margin: 0 0 var(--space-3); }
.lwd-error { margin: 0 0 var(--space-4); padding: 12px 14px; border: 1px solid #efb0aa; border-radius: 11px; background: #fff4f2; color: #8e2119; white-space: pre-line; font-size: var(--fs-base); }
.lwd-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12) !important; }
/* A4横プレビューをできるだけ大きく見せるため、入力側の列幅を切り詰めてプレビュー側に
   余った幅を回す（.main-2colの既定はプレビュー側もmax 560pxまでしか広がらないため）。
   また、フルHD(1920x1080)程度の画面なら縦スクロールなしで1画面に収まるよう、高さは
   JS（lwd-ui.jsのfitViewportHeight）がビューポート残り高さに合わせて明示的に指定し、
   はみ出した分は各パネル内部でスクロールさせる（align-items:stretchで両パネルの高さを揃える）。 */
.main-2col-drawing-wide { grid-template-columns: minmax(460px, 560px) minmax(420px, 1fr); align-items: stretch; }
/* このツールに限り上限を広げてA4プレビューをより大きく表示する
   （全体は.app-shellのmax-widthが上限になる）。 */
.tool-center-drawing-wide { max-width: 1600px; }
.main-2col-drawing-wide .wizard-panel { overflow-y: auto; min-height: 0; }
.main-2col-drawing-wide .drawing-panel { position: static; min-height: 0; }
/* 入力欄は基本的に1列（他ツールと統一感のある見た目）。ただし項目数が多い
   「基本寸法」「鉄筋」の2ステップのみ、縦スクロールが出ないよう2列に詰める。 */
.main-2col-drawing-wide .wizard-step-body-full .form-grid-compact { max-width: none; }
.main-2col-drawing-wide .wizard-step[data-step="1"] .form-grid-compact,
.main-2col-drawing-wide .wizard-step[data-step="3"] .form-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.main-2col-drawing-wide .form-group-wide { grid-column: 1 / -1; }
/* 入力項目数が多いステップ（鉄筋など）でもパネル内スクロールが要らないよう、
   縦方向の余白・行間を詰める（他ツールと見た目の統一感は保ちつつ、このツールに限り
   密度を上げる）。 */
.main-2col-drawing-wide .wizard-panel { padding: 16px 20px; }
.main-2col-drawing-wide .wizard-step-title { margin-bottom: 8px; }
/* 全ステップを縦スクロールで連続表示するため、章の区切りとして間隔を空ける
   （wizard-panel自身が独立してスクロールする専用レイアウトのため密度は詰めたまま）。 */
.main-2col-drawing-wide .wizard-step:not(:first-of-type) { margin-top: var(--space-6); }
.main-2col-drawing-wide .form-grid-compact { row-gap: 6px; }
.main-2col-drawing-wide .form-grid-compact label { min-height: 0; margin-bottom: 1px; }
.main-2col-drawing-wide .field-note { margin-top: 1px; font-size: 0.68rem; line-height: 1.25; }
@media (max-width: 1080px) {
    .main-2col-drawing-wide { grid-template-columns: 1fr; height: auto !important; }
    .main-2col-drawing-wide .wizard-panel, .main-2col-drawing-wide .drawing-panel { overflow-y: visible; height: auto !important; }
}
.lwd-preview-card { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; min-height: 0; }
.lwd-preview-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; flex: 0 0 auto; }
.lwd-preview-head h2 { font-size: 1rem; margin: 0; }
.lwd-preview-tools { display: flex; align-items: center; gap: 6px; }
.lwd-icon-btn { width: 34px; min-height: 34px; padding: 0; font-size: 1.1rem; }
.lwd-fit-btn { padding: 6px 10px; font-size: var(--fs-sm); }
.lwd-zoom-value { min-width: 44px; color: var(--text-muted); text-align: center; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.lwd-drawing-summary { display: flex; flex-wrap: wrap; gap: 7px; font-size: 0.75rem; margin-left: auto; }
.lwd-drawing-summary span { display: inline-flex; gap: 5px; padding: 4px 8px; border-radius: 7px; background: var(--surface-sunken); color: var(--text-muted); }
.lwd-drawing-summary b { color: var(--text); }
.lwd-preview-viewport {
    position: relative; width: 100%; flex: 1 1 auto; min-height: 240px;
    overflow: hidden; border: 1px solid var(--border); border-radius: 10px;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, .3) 25%, transparent 25%),
        var(--surface-sunken);
    background-size: 20px 20px;
    cursor: grab; touch-action: none;
}
.lwd-preview-viewport.is-dragging { cursor: grabbing; }
.lwd-preview-paper { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-origin: center center; user-select: none; }
/* 拡大率はJSがSVG要素のwidthを直接書き換えて実現する（transform:scale()を使うと拡大時に
   ぼやけるため）。ここでのwidth/heightは初回描画前の初期値。余白なく最大限まで表示する。 */
/* flex-shrink:0が無いと、拡大時にJSで指定したwidthより親要素(inset:0で常に
   ビューポート全幅)が優先され、ズームしても実際の表示サイズが変わらなくなる。 */
.lwd-preview-paper svg { display: block; flex-shrink: 0; width: 100%; height: auto; background: #fff; box-shadow: 0 3px 13px rgba(16, 32, 50, .18); }
.lwd-preview-error { width: 100%; height: 100%; display: grid; place-items: center; margin: auto; padding: 30px; background: #fff; color: var(--danger); text-align: center; font-weight: 700; }
.lwd-status-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted); flex: 0 0 auto; }
.lwd-output-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
/* 拡大表示（A4横）。図はこの比率に収めて中央へ置く */
.lwd-zoom-sheet {
    width: 100%; aspect-ratio: 297 / 210;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden;
}
.lwd-zoom-sheet svg { width: 100%; height: 100%; display: block; }
/* 出力ボタンは少し目立たせるが、サイトの基調色（青）に揃える。
   形式によって優劣はないので、DXF・JWW・PDF・XMLとも同じ見た目にする
   （以前はPDFだけ塗りつぶしで、そこだけ強く見えていた）。 */
.lwd-btn-export { font-weight: 800; }
.lwd-btn-export-dxf, .lwd-btn-export-pdf, .bl-btn-export {
    border-color: var(--accent); background: var(--accent-soft, #eaf1fc); color: var(--accent-strong);
}
.lwd-btn-export-dxf:hover:not(:disabled),
.lwd-btn-export-pdf:hover:not(:disabled),
.bl-btn-export:hover:not(:disabled) { background: #dbe8fa; }
@media (max-width: 700px) {
    .lwd-output-bar { flex-direction: column; align-items: stretch; }
    .lwd-drawing-summary { margin-left: 0; }
}

/* ---------- ウィザードの1枚もの縦スクロール化（試験導入: L型擁壁の安定計算・構造計算） ----------
   全ステップを縦に並べて表示し、ページ送りではなくスクロールで読み進める形式。
   パンくずは引き続きステップの目印として残し、スクロール位置に応じて現在地をJSでハイライトする
   （結果表示中は計算結果のステップのみを表示する、既存の挙動は維持）。 */
/* 第1列を700px固定にすると中間幅（タブレット〜ノートPC）で右の断面図パネルが
   画面からはみ出すため、狭い画面では入力列側を縮める */
.main-2col-scroll-form { grid-template-columns: minmax(480px, 700px) minmax(320px, 1fr); }
.main-2col-scroll-form .wizard-panel { max-width: 700px; }
.main-2col-scroll-form .wizard-step:not(:first-of-type) {
    margin-top: var(--space-8);
}
.main-2col-scroll-form .wizard-step[data-step="calculate"] { margin-top: 0; }
.main-2col-scroll-form .wizard-nav-submit {
    justify-content: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}
.main-2col-scroll-form .wizard-nav-submit .btn { min-width: 240px; padding: 13px 32px; font-size: 1rem; margin-left: 0; }
/* 同じ行に置く保存・読み取り等の補助ボタンは「計算する」より控えめな通常サイズにする */
.main-2col-scroll-form .wizard-nav-submit .tool-data-actions .btn {
    min-width: 0;
    padding: 10px 22px;
    font-size: var(--fs-base);
}
@media (max-width: 900px) {
    .main-2col-scroll-form { grid-template-columns: 1fr; }
    .main-2col-scroll-form .wizard-panel { max-width: 100%; }
}

/* ---------- トップページ: 最近使ったツール ---------- */

/* 中身はブラウザの localStorage から組み立てるため、履歴が無いときは枠ごと出ない
   （hidden をJSが外す）。サーバー側は一覧データを渡すだけ。 */
.recent-tools {
    margin: 0 0 var(--space-6);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}
.recent-tools[hidden] { display: none; }
.recent-tools-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.recent-tools-title { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
.recent-tools-clear {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    cursor: pointer;
    text-decoration: underline;
}
.recent-tools-clear:hover { color: var(--accent-strong); }

.recent-tools-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}
.recent-tools-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-2) 0 var(--space-3);
}
/* ピン留めしたものは先頭に並ぶ。枠線でも分かるようにする */
.recent-tools-item.is-pinned { border-color: var(--accent); }
.recent-tools-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: var(--fs-base);
    color: var(--text);
}
.recent-tools-link:hover { color: var(--accent-strong); text-decoration: underline; }
.recent-tools-icon { flex: none; }
/* 星は装飾ではなく操作。指で押せる大きさを確保する（WCAG 2.2 SC 2.5.8） */
.recent-tools-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-faint);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.recent-tools-pin.is-on { color: var(--accent); }
.recent-tools-pin:hover { color: var(--accent-strong); }
.recent-tools-note {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
/* ---------- カテゴリページ: 形式別の比較表 ---------- */

/* 形式ごとに照査できる項目が違うため、タイルだけでは選べない。
   列が多く狭い画面では収まらないので、表だけを横スクロールさせる
   （ページ本体は横スクロールさせない）。 */
/* 表のすぐ下にタイルが続くと、どこまでが表の話なのか分からなくなる。
   リード文から表までより広く空けて、別のまとまりだと分かるようにする。 */
.category-compare { margin: var(--space-8) 0 var(--space-10); }
.category-compare-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 var(--space-4);
}
.category-compare-scroll { overflow-x: auto; }
.category-compare-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.category-compare-table caption {
    text-align: left;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-2);
}
.category-compare-table th,
.category-compare-table td {
    border: 1px solid var(--border);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
}
.category-compare-table thead th {
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-weight: 700;
    white-space: nowrap;
}
/* 行の見出し＝ツール名。ここだけリンクなので、折り返しても読めるよう幅を確保する */
.category-compare-table tbody th {
    width: 15em;
    font-weight: 700;
}
.category-compare-table tbody th a { text-decoration: underline; text-underline-offset: 2px; }
.category-compare-note {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ---------- 狭い画面: 操作の行を画面下端に貼り付ける ---------- */

/* 入力欄が縦に長いツールでは、「計算する」も保存・読み取りもフォームの末尾にあり、
   スマートフォンではL型擁壁で約4,958px下だった。入力の途中で保存したい・計算したいと
   思っても、そこまで送らないと押せない。

   操作の行を position: sticky で画面下端に貼り付ける。行は入れ子の位置を変えずそのまま
   使うので、ボタンを増やしたり別のDOMへ複製したりはしない（idの重複を避けるため）。
   貼り付いた行は自分の親（フォーム）の中でだけ効くので、フォームを抜けると一緒に流れる。

   横幅は、パネルの左右の余白ぶん外へ広げて画面の端まで届かせる。余白の値はパネルの
   padding と揃える必要があるため --tool-bar-bleed に持たせて、狭い画面と作図系で
   それぞれ上書きする。 */
.wizard-panel { --tool-bar-bleed: var(--space-8); }
.main-2col-drawing-wide .wizard-panel { --tool-bar-bleed: 20px; }

@media (max-width: 900px) {
    .wizard-panel .wizard-nav-submit,
    .wizard-panel .tool-data-actions-standalone {
        position: sticky;
        bottom: 0;
        z-index: 15;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        margin-left: calc(-1 * var(--tool-bar-bleed));
        margin-right: calc(-1 * var(--tool-bar-bleed));
        padding: var(--space-3) var(--tool-bar-bleed);
        /* iPhoneのホームバーに重ならないようにする */
        padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 12px rgb(0 0 0 / 7%);
    }
    .wizard-panel .wizard-nav-submit { margin-top: var(--space-6); }
    .wizard-panel .tool-data-actions-standalone { margin-top: var(--space-5); }
    /* 貼り付いた行の中では、保存・読み取りは幅を取らず、「計算する」に残りを渡す */
    .wizard-panel .wizard-nav-submit .tool-data-actions { margin: 0; flex: none; }
    .wizard-panel .wizard-nav-submit > .btn { flex: 1; min-width: 0; }
}

@media (max-width: 600px) {
    .wizard-panel { --tool-bar-bleed: var(--space-5); }
}

/* 円弧すべりの計算: 地層パーツ・トライアル格子の自由リスト（追加・削除・並べ替え） */
#ssa-progress-panel { margin: var(--space-4) 0 var(--space-6); }
.ssa-part-list, .ssa-grid-list { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-3) 0; }
.ssa-part-card, .ssa-grid-card { border: 1px solid var(--border); border-radius: 10px; padding: var(--space-4); background: var(--surface-sunken); }
.ssa-part-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.ssa-part-card-title { font-weight: 700; }
.ssa-part-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* 選択中のパーツ（プレビューのパーツ図に拡大表示され、全体図でもハイライトされる） */
.ssa-part-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
/* 全体図・パーツ図を縦に2つ並べても画面内に収まるよう、プレビューの余白は最小限にする。
   各図は16:9のSVG（viewBox 640x360）。枠の最大幅は、利用できる高さから
   ssa-ui.jsが算出して--ssa-frame-max-wに設定する（画面の高さに応じて縮む）。 */
.drawing-panel .ssa-preview-title { font-size: 0.8rem; margin: 6px 0 4px; }
.drawing-panel .ssa-preview-title:first-of-type { margin-top: 0; }
.ssa-preview-subtitle { font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
#drawing-panel { padding: var(--space-4); }
#drawing-panel .drawing-panel-header { margin-bottom: 6px; }
#ssa-drawing, #ssa-part-drawing { max-width: var(--ssa-frame-max-w, 620px); }
/* 入力欄は全ツール1列が基本だが、挿入点X・Yは対になる値のため例外的に横に並べる。
   （.form-grid.form-grid-compactと同じ詳細度のため、後述のこの指定が優先される） */
.form-grid.ssa-form-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 頂点行の操作ボタン（この下に挿入 / この頂点を削除） */
.ssa-point-actions { white-space: nowrap; }
.ssa-point-actions .btn { padding: 2px 7px; font-size: var(--fs-xs); min-height: 0; }
.ssa-point-actions .btn:disabled { opacity: 0.35; cursor: default; }
.ssa-overall-row { background: var(--surface-sunken); font-weight: 600; }

/* N値からの土質定数推定 */
.nvs-result-summary { margin-bottom: var(--space-4); }
.nvs-summary-table th, .nvs-summary-table td { font-variant-numeric: tabular-nums; }
/* φ・c・kv・Vsなど、設計にそのまま用いる値の行を強調する */
.nvs-summary-table tr.nvs-key-row td { font-weight: 700; color: var(--accent-strong); }
/* 推定式の比較表のうち、入力条件で選んだ採用式の行・列を色で示す */
.nvs-adopted-row th, .nvs-adopted-row td { background: var(--accent-soft); }
.nvs-adopted-col { background: var(--accent-soft); }
.nvs-adopted-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 700; }
.nvs-formula-expr { font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs); }
.nvs-notice-list { margin: 0; padding-left: 1.2em; }
/* 層ごとの結果は列数が多いため、文字を詰めて横スクロールで見せる */
.nvs-layer-result-table { font-size: var(--fs-sm); }
.nvs-layer-result-table th, .nvs-layer-result-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nvs-input-table { max-width: 560px; }
.nvs-input-table input.layer-input { width: 92px; }
.nvs-input-table select.layer-input { width: 96px; }
.nvs-paste-block { margin: 0 0 var(--space-4); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.nvs-paste-block summary { cursor: pointer; font-size: var(--fs-base); color: var(--accent); font-weight: 600; }
.nvs-paste-input { width: 100%; margin: var(--space-2) 0; padding: var(--space-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; }
/* 深度分布図（N値・強度・Vs）は横に並べ、幅が足りないときは折り返す */
.nvs-chart-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); }
.nvs-chart { flex: 1 1 200px; min-width: 190px; max-width: 300px; }
.nvs-chart-svg { width: 100%; height: auto; display: block; }
.nvs-chart-svg .nvs-chart-grid { stroke: var(--border); stroke-width: 0.6; }
.nvs-chart-svg .nvs-chart-frame { fill: none; stroke: var(--border); stroke-width: 1; }
.nvs-chart-svg .nvs-chart-tick { font-size: 9px; fill: var(--text-muted); }
.nvs-chart-svg .nvs-chart-axis-label { font-size: 9px; fill: var(--text-muted); font-weight: 700; }
.nvs-chart-svg .nvs-chart-value { font-size: 9px; fill: var(--text); }
.nvs-chart-svg .nvs-chart-layer-line { stroke: var(--line-faint); stroke-width: 0.8; }
.nvs-chart-svg .nvs-chart-gw { stroke: #2f7fbf; stroke-width: 1.2; stroke-dasharray: 5 3; }
.nvs-chart-svg .nvs-chart-gw-label { font-size: 9px; fill: #2f7fbf; font-weight: 700; }
/* 土質区分ごとの色分け（凡例の .nvs-legend-* と同じ色を使う） */
.nvs-chart-svg .nvs-bar-sandy { fill: rgba(214, 168, 74, 0.75); }
.nvs-chart-svg .nvs-bar-gravel { fill: rgba(124, 138, 152, 0.75); }
.nvs-chart-svg .nvs-bar-clay { fill: rgba(106, 150, 106, 0.75); }
.nvs-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
/* 記号と説明が別々に折り返さないよう、1項目を1つのフレックスアイテムにまとめる */
.nvs-legend-item { white-space: nowrap; }
.nvs-legend-sandy { color: #d6a84a; }
.nvs-legend-gravel { color: #7c8a98; }
.nvs-legend-clay { color: #6a966a; }
/* 「地層数」のラベルが2行に折り返さないようにする */
.nvs-layer-count-field { white-space: nowrap; }
/* 層の入力表の直後の注記と、続く「地下水位の考慮」欄の間隔を空ける */
.nvs-table-note { margin-bottom: var(--space-5); }

/* ---------- 地盤反力・応力分散の図（直接基礎・浅層改良で共用） ---------- */

/* 計算結果ページの地盤反力のモデル図（底面の反力度分布と許容支持力度の比較） */
.swl-diagram-block { max-width: 520px; margin: var(--space-3) auto var(--space-4); }
.swl-diagram-svg { width: 100%; height: auto; display: block; }
.swl-diagram-svg .swl-body { fill: var(--surface-sunken); stroke: var(--text); stroke-width: 1.3; }
.swl-diagram-svg .swl-reaction-area { fill: rgba(26, 122, 76, 0.14); stroke: none; }
.swl-diagram-svg .swl-reaction-line { stroke: #1a7a4c; stroke-width: 1.6; fill: none; }
.swl-diagram-svg .swl-reaction-thin { stroke: #1a7a4c; stroke-width: 1; fill: none; }
.swl-diagram-svg .swl-reaction-arrow { fill: #1a7a4c; }
.swl-diagram-svg .swl-reaction-label { font-size: 10px; font-weight: 700; fill: #1a7a4c; }
/* 反力度が負となる範囲（浮き上がり側）は、接地している範囲と区別して赤系で示す */
.swl-diagram-svg .swl-reaction-area-neg { fill: rgba(184, 54, 44, 0.14); stroke: none; }
.swl-diagram-svg .swl-neg-line { stroke: #b8362c; stroke-width: 1.6; fill: none; }
.swl-diagram-svg .swl-neg-label { font-size: 10px; font-weight: 700; fill: #b8362c; }
.swl-diagram-svg .swl-load-line { stroke: #1769aa; stroke-width: 1.3; fill: none; }
.swl-diagram-svg .swl-load-arrow { fill: #1769aa; }
.swl-diagram-svg .swl-load-label { font-size: 10px; font-weight: 700; fill: #1769aa; }
.swl-diagram-svg .swl-allow-line { stroke: #7a2018; stroke-width: 1.2; stroke-dasharray: 6 3; fill: none; }
.swl-diagram-svg .swl-allow-label { font-size: 10px; font-weight: 700; fill: #7a2018; }
.swl-diagram-svg .swl-note { font-size: 10px; fill: var(--text-muted); }
/* 合力の作用線（底面まで延ばして偏心を示す） */
.swl-diagram-svg .swl-action-line { stroke: #1769aa; stroke-width: 1; stroke-dasharray: 5 3; }
/* 浅層改良の応力分散図: 地盤・改良体・分散線 */
.swl-diagram-svg .swl-soil-fill { fill: #f2ead2; stroke: none; }
/* 改良体の下の支持地盤。断面図プレビューの支持地盤と同じ濃さにする */
.swl-diagram-svg .swl-soil-bearing-fill { fill: #e0cf9c; stroke: none; }
.swl-diagram-svg .swl-improve-fill { fill: #3f7d5f; stroke: #23503b; stroke-width: 1.2; }
.swl-diagram-svg .swl-spread-line { stroke: var(--line-faint); stroke-width: 1; stroke-dasharray: 5 3; fill: none; }
/* 改良体（濃い緑）の中を通る分散線は明るい色にする */
.swl-diagram-svg .swl-spread-line-body { stroke: rgba(255, 255, 255, 0.8); stroke-width: 1; stroke-dasharray: 5 3; fill: none; }
/* 破断線（高さが図に収まらない躯体の、省略した位置を示すジグザグ） */
.swl-diagram-svg .swl-cut-mask { fill: var(--surface); }
.swl-diagram-svg .swl-break-line { fill: none; stroke: var(--text); stroke-width: 1.2; }
/* 分布の線・荷重の矢印と重なっても値が読めるようにする下敷き */
.swl-diagram-svg .swl-label-bg { fill: var(--surface); opacity: 0.85; }

/* 躯体形状の節点入力（基礎形状ステップ内の表。計算には使わず図の描画だけに使う） */
.shape-node-block { margin-top: var(--space-5); }
.shape-node-title { font-size: 0.9rem; margin: 0 0 var(--space-2); }
.shape-node-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.shape-node-head .field-note-inline { display: inline; }
/* th{width:55%}が全thに効いて列幅が偏るため、削除ボタンと点番号の幅を決めて等分にする */
.shape-node-table { max-width: 380px; table-layout: fixed; }
.shape-node-table th, .shape-node-table td { width: auto; }
.shape-node-table th:first-child, .shape-node-table td:first-child,
.shape-node-table th:nth-child(2), .shape-node-table td:nth-child(2) { width: 36px; }
/* 寸法線・基準線は断面図（.wall-drawing-svg）と同じ見た目に揃える */
.swl-diagram-svg .dim-ext { stroke: var(--line-faint); stroke-width: 1; }
.swl-diagram-svg .dim-line { stroke: var(--accent-strong); stroke-width: 1; }
.swl-diagram-svg .dim-label { font-size: 11px; fill: var(--accent-strong); font-weight: 600; }
.swl-diagram-svg .dim-arrow { fill: var(--accent-strong); }
.swl-diagram-svg .ref-dash { stroke: var(--line-faint); stroke-width: 1; stroke-dasharray: 4 3; }

/* ---------- DWG・DXF・JWWの相互変換 ---------- */

.cfc-drop {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    transition: border-color .15s, background .15s;
}
.cfc-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.cfc-drop-lead { margin: 0 0 2px; font-size: var(--fs-base); }
.cfc-drop-sub { margin: 0 0 var(--space-3); font-size: 0.75rem; color: var(--text-faint); }

.cfc-file-list-wrap { margin-top: var(--space-3); }
.cfc-file-list { display: flex; flex-direction: column; gap: 4px; }
.cfc-file-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-size: 0.8rem;
}
.cfc-file-row:hover { background: var(--surface-hover); }
.cfc-file-row.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.cfc-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfc-file-state { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; }
.cfc-file-state.is-done { color: var(--accent); font-weight: 700; }
.cfc-file-state.is-error { color: var(--danger); font-weight: 700; }
.cfc-file-actions { display: flex; gap: 4px; }

.cfc-badge {
    display: inline-block;
    padding: 1px 0;
    width: 46px;
    text-align: center;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #ffffff;
    background: var(--text-muted);
}
.cfc-badge-dwg { background: #8a5a2b; }
.cfc-badge-dxf { background: #1955c0; }
.cfc-badge-jww { background: #1f7a5a; }
.cfc-badge-sfc { background: #0f766e; }
.cfc-badge-p21 { background: #6d28d9; }
.cfc-badge-sxf { background: #475569; }

.cfc-run-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.cfc-run-row .btn { min-width: 130px; }

.cfc-notes { font-size: var(--fs-sm); color: var(--text-muted); }
.cfc-notes h3 { font-size: 0.82rem; color: var(--text); margin: var(--space-4) 0 var(--space-1); }
.cfc-notes h3:first-child { margin-top: var(--space-2); }
.cfc-notes ul { margin: 0; padding-left: 1.2em; }
.cfc-notes li { margin-bottom: 2px; }

.cfc-preview-file { font-size: 0.75rem; color: var(--text-muted); }
.cfc-preview-viewport {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-sunken);
    min-height: 320px;
    height: clamp(320px, 46vh, 560px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cfc-preview-viewport svg { width: 100%; height: 100%; }
.cfc-preview-placeholder { margin: 0; font-size: 0.8rem; color: var(--text-faint); }

.cfc-summary { margin-top: var(--space-3); }
.cfc-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2px var(--space-3);
    font-size: var(--fs-sm);
}
.cfc-summary-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 2px 0;
    border-bottom: 1px dotted var(--border);
}
.cfc-summary-list span { color: var(--text-muted); }
.cfc-summary-list b { font-variant-numeric: tabular-nums; }

.cfc-warnings { margin-top: var(--space-3); font-size: 0.75rem; color: var(--text-muted); }
.cfc-warnings h3 { font-size: 0.8rem; color: var(--text); margin: 0 0 var(--space-1); }
.cfc-warnings ul { margin: 0; padding-left: 1.2em; }
.cfc-warnings li { margin-bottom: 2px; }

@media (max-width: 900px) {
    .cfc-file-row { grid-template-columns: 46px minmax(0, 1fr) auto; }
    .cfc-file-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ---------- PDFコンバーター ---------- */

.pdc-drop {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    transition: border-color .15s, background .15s;
}
.pdc-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.pdc-drop-lead { margin: 0 0 2px; font-size: var(--fs-base); }
.pdc-drop-sub { margin: 0 0 var(--space-3); font-size: 0.75rem; color: var(--text-faint); }

.pdc-file-list-wrap { margin-top: var(--space-3); margin-bottom: var(--space-5); }
.pdc-file-list { display: flex; flex-direction: column; gap: 4px; }
.pdc-file-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.8rem;
}
.pdc-file-row.is-error { border-color: #efb0aa; background: var(--danger-soft); }
/* 元ファイルを見分ける色。ページカードの下に出るファイル名と同じ色を使う */
.pdc-file-mark { width: 10px; height: 10px; border-radius: 50%; }
.pdc-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdc-file-state { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; }
.pdc-file-state.is-error { color: var(--danger); font-weight: 700; }
.pdc-icon-btn { width: 28px; min-width: 28px; padding: 0; font-size: 0.8rem; line-height: 1; }

.pdc-filename-row { display: flex; align-items: center; gap: 6px; }
.pdc-filename-row input { flex: 1; min-width: 0; }
.pdc-filename-ext { font-size: 0.8rem; color: var(--text-muted); }
.pdc-inline-field { display: flex; align-items: center; gap: 6px; }
.pdc-inline-field input { flex: 1; min-width: 0; }
.pdc-check { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 400; }
.pdc-check input { width: auto; margin: 0; }

.pdc-run-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.pdc-run-row .btn { min-width: 190px; }

.pdc-progress { margin-bottom: var(--space-2); }
.pdc-progress-bar { height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.pdc-progress-bar span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .2s; }

.pdc-result:not(:empty) { margin-top: var(--space-3); }
.pdc-result-title { font-size: 0.82rem; margin: 0 0 var(--space-1); }
.pdc-result-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.pdc-result-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 3px 0;
    border-bottom: 1px dotted var(--border);
}
.pdc-result-name { color: var(--text-muted); }
.pdc-result-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdc-result-warn { flex-basis: 100%; color: var(--danger); font-size: 0.75rem; }

.pdc-notes { font-size: var(--fs-sm); color: var(--text-muted); }
.pdc-notes h3 { font-size: 0.82rem; color: var(--text); margin: var(--space-4) 0 var(--space-1); }
.pdc-notes h3:first-child { margin-top: var(--space-2); }
.pdc-notes ul { margin: 0; padding-left: 1.2em; }
.pdc-notes li { margin-bottom: 3px; }

/* ページの一覧（右側） */
.pdc-pages-info { font-size: 0.75rem; color: var(--text-muted); }
.pdc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--space-2); }
.pdc-toolbar-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
.pdc-selection-info { margin-left: auto; font-size: 0.75rem; font-weight: 700; color: var(--accent); }

.pdc-pages-viewport {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-sunken);
    padding: var(--space-3);
    height: clamp(360px, 58vh, 720px);
    overflow-y: auto;
    transition: border-color .15s, background .15s;
}
/* ファイルを一覧へ直接ドロップして差し込めることを示す */
.pdc-pages-viewport.is-drop-active { border-color: var(--accent); background: var(--accent-soft); }
.pdc-pages-placeholder { margin: 0; font-size: 0.8rem; color: var(--text-faint); text-align: center; padding: var(--space-8) 0; }

.pdc-page-grid { display: grid; grid-template-columns: repeat(auto-fill, 124px); gap: var(--space-2); justify-content: start; }
.pdc-page-card {
    position: relative;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center;
    cursor: grab;
    user-select: none;
}
.pdc-page-card:hover { border-color: var(--border-strong); }
.pdc-page-card.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.pdc-page-card.is-selected .pdc-page-label::before { content: '✓ '; color: var(--accent); font-weight: 700; }
.pdc-page-card.is-dragging { opacity: .4; }
/* ドロップしたときに差し込まれる位置を示す縦棒 */
.pdc-page-card.is-insert-before::before,
.pdc-page-card.is-insert-after::after {
    content: '';
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
}
.pdc-page-card.is-insert-before::before { left: -6px; }
.pdc-page-card.is-insert-after::after { right: -6px; }

.pdc-page-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 132px;
    background: #ffffff;
    border: 1px solid var(--border);
    overflow: hidden;
}
.pdc-page-thumb.is-loading { background: repeating-linear-gradient(45deg, #f2f4f7, #f2f4f7 6px, #e9edf2 6px, #e9edf2 12px); }
.pdc-page-thumb img { max-width: 100%; max-height: 100%; }
/* 90度・270度の回転時は、回す前の画像に対する制限を入れ替えて枠内に収める */
.pdc-page-thumb.is-rot-90 img,
.pdc-page-thumb.is-rot-270 img { max-width: 130px; max-height: 110px; }

.pdc-zoom-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .92);
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}
.pdc-zoom-btn:hover { border-color: var(--accent); color: var(--accent); }

.pdc-page-label { margin-top: 3px; font-size: 0.75rem; color: var(--text); font-variant-numeric: tabular-nums; }
.pdc-page-rot { margin-left: 4px; font-size: 0.65rem; color: var(--text-faint); }
.pdc-page-source { font-size: 0.65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 拡大表示のモーダル */
.pdc-zoom-modal { max-width: 1100px; max-height: 92vh; }
.pdc-zoom-body { display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--surface-sunken); }
.pdc-zoom-stage { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 320px; }
.pdc-zoom-image { max-width: 100%; max-height: calc(92vh - 200px); background: #ffffff; box-shadow: var(--shadow); }
.pdc-zoom-loading { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.pdc-zoom-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
}
.pdc-zoom-label { font-size: var(--fs-sm); color: var(--text-muted); }

@media (max-width: 900px) {
    .pdc-run-row .btn { min-width: 0; flex: 1; }
    .pdc-pages-viewport { height: clamp(320px, 60vh, 560px); }
    .pdc-selection-info { margin-left: 0; flex-basis: 100%; }
}

/* ---------- HEIC→JPG・PNG変換ツール ---------- */

.hec-drop {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    transition: border-color .15s, background .15s;
}
.hec-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.hec-drop-lead { margin: 0 0 2px; font-size: var(--fs-base); }
.hec-drop-sub { margin: 0 0 var(--space-3); font-size: 0.75rem; color: var(--text-faint); }

.hec-file-list-wrap { margin-top: var(--space-3); margin-bottom: var(--space-5); }
.hec-file-list { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; }
.hec-file-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.8rem;
}
.hec-file-row.is-error { border-color: #efb0aa; background: var(--danger-soft); }
.hec-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hec-file-state { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hec-file-state.is-error { color: var(--danger); font-weight: 700; }
.hec-file-actions { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.hec-icon-btn { width: 28px; min-width: 28px; padding: 0; font-size: 0.8rem; line-height: 1; }

.hec-check { display: flex; align-items: flex-start; gap: 6px; font-size: 0.82rem; font-weight: 400; line-height: 1.4; }
.hec-check input { width: auto; margin: 2px 0 0; flex: 0 0 auto; }
.hec-radio-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.hec-radio-col { display: flex; flex-direction: column; gap: 4px; }
.hec-inline-field { display: flex; align-items: center; gap: 6px; }
.hec-inline-field input { flex: 1; min-width: 0; }
.hec-filename-row { display: flex; align-items: center; gap: 6px; }
.hec-filename-row input { flex: 1; min-width: 0; }
.hec-unit { font-size: 0.8rem; color: var(--text-muted); }

.hec-run-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.hec-run-row .btn { min-width: 210px; }

.hec-progress { margin-bottom: var(--space-2); }
.hec-progress-bar { height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.hec-progress-bar span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .2s; }

.hec-summary { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.hec-notes { font-size: var(--fs-sm); color: var(--text-muted); }
.hec-notes h3 { font-size: 0.82rem; color: var(--text); margin: var(--space-4) 0 var(--space-1); }
.hec-notes h3:first-child { margin-top: var(--space-2); }
.hec-notes ul { margin: 0; padding-left: 1.2em; }
.hec-notes li { margin-bottom: 3px; }

/* 右側の写真一覧 */
.hec-cards-info { font-size: 0.75rem; color: var(--text-muted); }
.hec-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--space-2); }
.hec-toolbar-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
.hec-selection-info { margin-left: auto; font-size: 0.75rem; font-weight: 700; color: var(--accent); }
.hec-cards-viewport {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-sunken);
    padding: var(--space-3);
    height: clamp(360px, 62vh, 760px);
    overflow-y: auto;
}
.hec-cards-placeholder { margin: 0; font-size: 0.8rem; color: var(--text-faint); text-align: center; padding: var(--space-8) 0; }
.hec-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); }
.hec-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.hec-card:hover { border-color: var(--border-strong); }
.hec-card.is-error { border-color: #efb0aa; }
.hec-card.is-working { border-color: var(--accent); }
.hec-card.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.hec-card.is-selected .hec-card-name::before { content: '✓ '; color: var(--accent); font-weight: 700; }
.hec-card-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.hec-card-thumb img,
.hec-card-preview { max-width: 100%; max-height: 100%; display: block; }
.hec-card-mark { font-size: 0.75rem; color: var(--text-faint); }
/* 一覧で回した向きは、まず表示だけ回して見せる（画素は保存時に回す）。
   90度・270度では縦横が入れ替わるため、枠からはみ出さないよう上限を入れ替える。 */
.hec-card-thumb.is-rot-90 img, .hec-card-thumb.is-rot-90 .hec-card-preview { transform: rotate(90deg); }
.hec-card-thumb.is-rot-180 img, .hec-card-thumb.is-rot-180 .hec-card-preview { transform: rotate(180deg); }
.hec-card-thumb.is-rot-270 img, .hec-card-thumb.is-rot-270 .hec-card-preview { transform: rotate(270deg); }
.hec-card-thumb.is-rot-90 img, .hec-card-thumb.is-rot-90 .hec-card-preview,
.hec-card-thumb.is-rot-270 img, .hec-card-thumb.is-rot-270 .hec-card-preview {
    max-width: 138px;
    max-height: 100%;
}
/* 変換前のプレビューであることを、変換後の結果と見分けられるようにする */
.hec-card-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(23, 59, 112, .78);
    color: #ffffff;
    font-size: 0.65rem;
    letter-spacing: .02em;
}
.hec-card-body { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; }
.hec-card-name { margin: 0; font-size: var(--fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hec-card-meta { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hec-card-note { margin: 2px 0 0; font-size: 0.7rem; color: var(--text-faint); }
.hec-card-error { margin: 0; font-size: var(--fs-xs); color: var(--danger); }
.hec-card-body .btn { margin-top: 6px; }

.hec-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 0; }
.hec-tag { font-size: 0.65rem; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.hec-tag.is-ok { border-color: #b6dfc9; background: #eef8f2; color: #1a7a4e; }
.hec-tag.is-warn { border-color: #e6c98f; background: #fdf6e7; color: #8a6212; }
.hec-tag.is-muted { color: var(--text-faint); }

@media (max-width: 900px) {
    .hec-run-row .btn { min-width: 0; flex: 1; }
    .hec-cards-viewport { height: clamp(320px, 60vh, 560px); }
}

/* ---------- SNS共有ボタン（各アプリのコンテンツ末尾・広告の直前） ---------- */

.share-bar {
    margin: var(--space-8) 0;
}
.share-bar-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.share-bar-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.share-bar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.4;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.share-icon { width: 16px; height: 16px; flex-shrink: 0; }
/* アイコンは既定でブランド色、ホバー時はブランド色を背景に敷いて白抜きにする */
.share-btn-facebook .share-icon { color: #1877f2; }
.share-btn-x .share-icon { color: #000000; }
.share-btn-line .share-icon { color: #06c755; }
.share-btn-copy .share-icon { color: var(--text-muted); }
.share-btn:hover .share-icon { color: inherit; }
/* 追従バーのボタンにも同じ配色クラスを付けているため、ホバー時の反転をまとめて効かせる */
.share-rail-btn:hover .share-icon { color: inherit; }
.share-btn-facebook:hover { background: #1877f2; border-color: #1877f2; color: #ffffff; }
.share-btn-x:hover { background: #000000; border-color: #000000; color: #ffffff; }
.share-btn-line:hover { background: #06c755; border-color: #06c755; color: #ffffff; }
.share-btn-copy:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.share-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* コピー直後の一時表示。文字数が変わってもボタン幅が跳ねないよう最小幅を確保する */
.share-btn-copy .share-btn-label { min-width: 8em; text-align: left; }
.share-btn-copy.is-copied { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.share-btn-copy.is-copied .share-icon { color: var(--accent-strong); }

@media (max-width: 600px) {
    .share-bar { margin: var(--space-6) 0 var(--space-4); }
    .share-bar-inner { padding: var(--space-4); }
    /* 幅の足りない画面では、タイトルの下にボタン列を回り込ませて折り返させる */
    .share-bar-buttons { flex: 1 1 100%; min-width: 0; }
    .share-btn { flex: 1 1 auto; justify-content: center; }
    .share-btn-copy { flex-basis: 100%; }
    .share-btn-copy .share-btn-label { min-width: 0; text-align: center; }
}

/* 画面左端の追従バー（アイコンのみ）。ボタンの配色は上の .share-btn-* をそのまま共用する */
/* ページ先頭へ戻るボタン。少しスクロールすると右下にうっすら出る。
   本文の邪魔をしないよう既定は半透明にし、ポインタを載せたときとフォーカス時だけ濃くする。
   重なり順はヘッダー（29〜30）より下、モーダル（1000）より下。 */
.back-to-top {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 28;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    box-shadow: var(--shadow);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.15s, border-color 0.15s;
}

.back-to-top.is-visible { opacity: 0.5; }

.back-to-top:hover,
.back-to-top:focus-visible {
    opacity: 1;
    color: var(--text);
    border-color: var(--text-muted);
}

.back-to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 画面が狭いときは指に近い位置へ寄せ、少し小さくする */
@media (max-width: 600px) {
    .back-to-top {
        right: var(--space-3);
        bottom: var(--space-3);
        width: 40px;
        height: 40px;
    }
}

/* 操作バーを貼り付けているページでは、その上へ逃がす。
   バーの高さぶん（約72px）持ち上げないと「計算する」の右端に重なる。 */
@media (max-width: 900px) {
    body:has(.wizard-nav-submit) .back-to-top,
    body:has(.tool-data-actions-standalone) .back-to-top {
        bottom: calc(var(--space-3) + 80px);
    }
}

@media print {
    .back-to-top { display: none; }
}

.share-rail {
    position: fixed;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    /* コンテンツ幅（--shell-max-width）の左に、バー36px＋余白が収まる画面でだけ表示する。
       それより狭い画面ではコンテンツに重なってしまうため、末尾の共有バーだけにする */
    display: none;
    flex-direction: column;
    gap: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
@media (min-width: 1440px) {
    .share-rail { display: flex; }
}
.share-rail.is-visible { opacity: 1; visibility: visible; }
.share-rail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.share-rail-btn .share-icon { width: 17px; height: 17px; }
.share-rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* コピー結果の知らせ方。追従バーは文字を出せないため、リンクのアイコンをチェックに差し替える */
.share-icon-check { display: none; }
.is-copied .share-icon-check { display: block; }
.is-copied .share-icon-link { display: none; }
.share-btn-copy.is-failed { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.share-btn-copy.is-failed .share-icon { color: var(--danger); }

/* ---------- Technical guide (計算方法と適用範囲：ツールページ下部の技術解説) ---------- */

.tool-technical-guide {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-8);
    margin: var(--space-8) 0 0;
}
.tool-technical-guide h2 {
    font-size: 1.05rem;
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}
.tool-technical-guide h3 {
    font-size: 0.92rem;
    font-weight: 700;
    margin: var(--space-6) 0 var(--space-2);
    padding-left: var(--space-3);
    border-left: 3px solid var(--accent);
}
.tool-technical-guide h3:first-of-type { margin-top: 0; }
.tool-technical-guide p {
    font-size: var(--fs-base);
    color: var(--text);
    margin: 0 0 var(--space-2);
}
.tool-technical-guide ul {
    margin: 0 0 var(--space-2);
    padding-left: 1.4em;
}
.tool-technical-guide li {
    font-size: var(--fs-base);
    margin-bottom: var(--space-1);
}

/* ---------- Feedback form (ご意見・不具合のご報告：ツールページのSNS共有ボタン直下) ---------- */

.feedback-block { margin: var(--space-8) 0 var(--space-10); }
.feedback-details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.feedback-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    /* デフォルトの三角マーカーを消し、右端の矢印（::after）に置き換える */
    list-style: none;
    position: relative;
    padding-right: var(--space-10);
}
.feedback-summary::-webkit-details-marker { display: none; }
.feedback-summary:hover { background: var(--surface-hover); border-radius: var(--radius); }
.feedback-summary::after {
    content: '';
    position: absolute;
    right: var(--space-5);
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--text-faint);
    border-bottom: 2px solid var(--text-faint);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.feedback-details[open] .feedback-summary::after { transform: rotate(-135deg); margin-top: -2px; }
.feedback-details[open] .feedback-summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.feedback-summary-title { font-size: 0.92rem; font-weight: 700; color: var(--text); }
.feedback-summary-hint { font-size: var(--fs-sm); color: var(--text-faint); }

.feedback-body { padding: var(--space-5); }
.feedback-lead { font-size: var(--fs-base); color: var(--text-muted); margin: 0 0 var(--space-5); }
.feedback-form { max-width: 560px; }
.feedback-form .form-success { margin-bottom: var(--space-4); }
.feedback-note { font-size: 0.75rem; color: var(--text-faint); margin: var(--space-1) 0 0; }

.feedback-fieldset { border: none; padding: 0; margin: 0 0 var(--space-4); }
.feedback-legend {
    padding: 0;
    margin-bottom: var(--space-2);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}
.feedback-radios { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.feedback-radio,
.feedback-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-base);
    color: var(--text);
    cursor: pointer;
}
.feedback-radio input,
.feedback-checkbox input { margin: 0; cursor: pointer; }
.feedback-include-values { margin-bottom: var(--space-5); }

.feedback-form textarea { min-height: 120px; resize: vertical; }
.feedback-form input[type="file"] { font-size: 0.82rem; color: var(--text-muted); }
#swl-feedback-error[hidden],
#swl-feedback-success[hidden] { display: none; }
#swl-feedback-error { min-height: 0; margin-bottom: var(--space-4); font-size: 0.82rem; }

@media (max-width: 640px) {
    .feedback-summary { padding: var(--space-4); padding-right: var(--space-8); }
    .feedback-summary::after { right: var(--space-4); }
    .feedback-body { padding: var(--space-4); }
}

/* ---------- Related tools (関連するアプリ：ツールページの報告フォーム直下) ---------- */

.related-tools {
    margin: var(--space-10) 0 var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
}
.related-tools-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    padding-left: var(--space-3);
    border-left: 4px solid var(--accent);
}
.related-tools-lead {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: var(--space-2) 0 var(--space-5);
}

/* 常に4列。トップページのタイルより1枚あたりが狭くなるため、
   アイコンと余白を小さくした専用のタイルにしている */
.related-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.related-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-4);
    padding-left: calc(var(--space-4) - 3px);
    padding-right: 62px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--category-accent, var(--accent));
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.related-tile:hover {
    border-color: var(--accent-strong);
    border-left-color: var(--category-accent, var(--accent-strong));
    box-shadow: var(--shadow);
    text-decoration: none;
}

.related-tile-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
}

.related-tile-category {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--category-accent, var(--accent));
}
.related-tile-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    /* 4枚の高さを揃えるため、タイトルは2行ぶんの高さを確保する */
    min-height: calc(2 * 1.55em);
    line-height: 1.55;
}
.related-tile-desc {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-muted);
    flex-grow: 1;
    /* 説明はツールによって長さの差が大きいため3行で打ち切る */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.related-tile-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
}
.related-tile-arrow { transition: transform 0.12s ease; }
.related-tile:hover .related-tile-arrow { transform: translateX(2px); }

@media (max-width: 1000px) {
    .related-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .related-tools-grid { grid-template-columns: 1fr; }
    /* 1列のときは高さを揃える必要がないので、余白を詰める */
    .related-tile-title { min-height: 0; }
    .related-tile-desc { -webkit-line-clamp: 2; }
}

/* ---------- Feedback admin list (analytics/feedback.php) ---------- */

.fb-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
}
.fb-item.is-unread { border-left: 3px solid var(--accent); }
.fb-item-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-size: 0.82rem;
}
.fb-item-id { font-weight: 700; color: var(--text-faint); }
.fb-item-date { color: var(--text-muted); white-space: nowrap; }
.fb-item-category { font-weight: 600; }
.fb-item-tool { color: var(--text-muted); }
.fb-item-excerpt { color: var(--text-faint); flex: 1 1 12em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-item-badge {
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: var(--fs-xs);
    font-weight: 600;
}
.fb-item-mail { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.fb-mail-sent { color: var(--text-faint); }
.fb-mail-failed, .fb-mail-pending { color: var(--danger); }
.fb-item-body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--border); }
.fb-item-heading { font-size: var(--fs-base); font-weight: 700; margin: var(--space-4) 0 var(--space-2); }
.fb-item-text {
    margin: 0;
    padding: var(--space-3);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.fb-item-ua { word-break: break-all; font-size: var(--fs-sm); }
.fb-item-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }

/* 画面には出さず、読み上げにだけ渡す文字（表の「操作」列の見出しなど） */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- ボーリング柱状図作成 ----------
   入力項目が多く表も横に長いため、左右2列ではなく1列に並べ、プレビューは
   最後のステップ（5）に置いている。表は列数が多いので横スクロールを許し、
   プレビューはA3縦なので縦スクロールを許す（L型擁壁の構造図作成はA4横1枚に
   収まるので、そちらのビューポートは overflow:hidden）。 */
/* パネルの既定は max-width:440px（.panel）。1列構成では窮屈なので広げるが、
   横に間延びしても読みにくいので800pxで止め、中央に置く。 */
.bl-panel { max-width: 800px; margin-left: auto; margin-right: auto; }

/* 入力欄の既定は最大420px（.form-grid.form-grid-compact）。パネル内は636px
   （700 − .panel の左右padding 32×2）あるので、その幅いっぱいに1つずつ並べる。 */
.bl-panel .form-grid-compact {
    max-width: none;
    grid-template-columns: 1fr;
    column-gap: var(--space-6, 24px);
}
/* 調査名・調査位置・調査期間など長い項目は行いっぱいに広げる */
.bl-panel .form-group-wide { grid-column: 1 / -1; }
.bl-panel .form-grid-compact input[type="text"],
.bl-panel .form-grid-compact input[type="number"] { width: 100%; }
/* 度分秒・年月日の並びは、欄が広がっても間延びしないよう左に寄せる */
.bl-panel .bl-dms, .bl-panel .bl-period { justify-content: flex-start; }
.bl-panel .wizard-step-title { margin-top: var(--space-6); }
.bl-panel .bl-tab-panel > .wizard-step-title:first-child { margin-top: 0; }

/* 出力ボタンの色は .lwd-btn-export-dxf などとまとめて指定している（上の方を参照） */
.bl-btn-export { font-weight: 800; }

/* ステップの行き来。左に戻る、右に次へ。 */
.bl-step-nav { display: flex; justify-content: space-between; align-items: center;
               gap: var(--space-4); margin-top: var(--space-6);
               padding-top: var(--space-5); border-top: 1px solid var(--border); }
.bl-step-nav .btn { padding: 8px 20px; }
.bl-step-nav .bl-step-nav-spacer { flex: 0 0 auto; }

/* データの出し入れは入力のいちばん上に置く */
.bl-data-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                   margin-bottom: var(--space-5); padding-bottom: var(--space-4);
                   border-bottom: 1px solid var(--border); }
.bl-data-actions .btn { padding: 6px 14px; font-size: 0.82rem; }
.bl-data-note { font-size: 0.75rem; color: var(--text-muted); }
/* XML取り込みの結果は、移動先のプレビューの先頭に出す */
.bl-preview-notice { margin: 0; padding: 9px 13px; border-radius: 8px;
                     background: var(--accent-soft, #eaf1fc); color: var(--accent-strong);
                     font-size: 0.8rem; line-height: 1.5; }
.bl-preview-notice[hidden] { display: none; }
.bl-preview-card { display: flex; flex-direction: column; gap: var(--space-3); }
/* HTMLのhidden属性はUA側の display:none なので、上の display:flex に負けてしまう。
   隠すときは確実に消す（これが無いと全ステップの下にプレビューが出続ける）。 */
.bl-tab-panel[hidden] { display: none; }
.bl-dms { display: flex; align-items: center; gap: 4px; }
.bl-dms input { width: 4.5em; }
.bl-dms span { color: var(--text-muted); font-size: var(--fs-base); }
.bl-period { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.bl-period input { width: 3em; }
.bl-period .bl-era { width: 4em; }
.bl-period span { color: var(--text-muted); font-size: 0.8rem; }
.bl-period .bl-tilde { padding: 0 4px; }

.bl-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
/* 模様と記事はモーダルで編集するようにしたので、表の列はボタン1つぶんで足りる。
   それでも標準貫入試験は数字の列が多いため、最小幅を持たせて横スクロールで見る。 */
#bl-spt { min-width: 560px; }
/* 表のセルからモーダルを開くボタン */
.bl-cell-btn { width: 100%; min-height: 26px; padding: 3px 6px; text-align: left;
               border: 1px solid var(--border); border-radius: 5px; background: var(--surface);
               color: var(--text); font-size: 0.75rem; line-height: 1.3; cursor: pointer;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-cell-btn:hover { border-color: var(--accent); color: var(--accent-strong); }
.bl-cell-btn.is-empty { color: var(--text-faint); }
.bl-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bl-table th, .bl-table td { border-bottom: 1px solid var(--border); padding: 4px 5px; text-align: left; vertical-align: top; }
.bl-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-sunken); font-weight: 700; white-space: nowrap; line-height: 1.2; }
.bl-table tbody tr:last-child td { border-bottom: 0; }
.bl-table input, .bl-table select, .bl-table textarea { width: 100%; min-width: 0; padding: 3px 5px; font-size: var(--fs-sm); }
.bl-table textarea { resize: vertical; min-height: 2.6em; }
.bl-table select[multiple] { min-height: 4.2em; }
.bl-table .bl-col-num { width: 5.5em; }
.bl-table .bl-col-s { width: 6em; }
.bl-table .bl-col-xs { width: 3.6em; }
.bl-table .bl-col-del { width: 2em; }
/* 記事は文章が入るので広く取り、模様の選択は選択肢が読める最小限にとどめる */
.bl-table .bl-col-remarks { width: 34%; }
.bl-table .bl-col-m { width: 11%; }
.bl-table-empty { color: var(--text-muted); text-align: center; padding: 12px; }
.bl-row-del { width: 22px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 5px;
              background: var(--surface); color: var(--text-muted); cursor: pointer; line-height: 1; }
.bl-row-del:hover { border-color: var(--danger); color: var(--danger); }
.bl-table-actions { display: flex; gap: 8px; margin: 8px 0 var(--space-5); }
.bl-table-actions .btn { padding: 5px 12px; font-size: 0.8rem; }

.bl-sheet-nav { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted); flex: 0 0 auto; }
.bl-sheet-buttons { display: flex; gap: 5px; flex-wrap: wrap; }
.bl-sheet-btn { padding: 3px 10px; font-size: 0.75rem; }
.bl-sheet-btn.is-active { border-color: var(--accent); background: var(--accent-soft, #eaf1fc); color: var(--accent-strong); font-weight: 700; }

/* A3縦は縦に長いので、ビューポート内でスクロールして見る。
   1列構成では親の高さが決まらないため、画面の高さを基準に与える。 */
#bl-preview-viewport { overflow: auto; cursor: default; flex: 0 0 auto;
                       height: 80vh; min-height: 460px; }
#bl-preview-paper { position: static; display: block; padding: 8px; text-align: center; }
#bl-preview-paper svg { margin: 0 auto; }

/* ---------- ボーリング柱状図作成：モーダル ----------
   模様（主模様・補助記号）は種類が多く、記事は長い文章になるため、
   表のセルに直接置かず、この窓を開いて選ぶ・書く。 */
.bl-modal[hidden] { display: none; }
.bl-modal { position: fixed; inset: 0; z-index: 1000; display: flex;
            align-items: center; justify-content: center; padding: var(--space-5); }
.bl-modal-backdrop { position: absolute; inset: 0; background: rgba(16, 32, 50, .45); }
.bl-modal-panel { position: relative; background: var(--surface); border-radius: var(--radius-lg);
                  box-shadow: 0 12px 40px rgba(16, 32, 50, .3); width: min(760px, 100%);
                  max-height: 86vh; display: flex; flex-direction: column; }
.bl-modal-head { display: flex; align-items: center; justify-content: space-between;
                 gap: var(--space-4); padding: var(--space-5) var(--space-6);
                 border-bottom: 1px solid var(--border); }
.bl-modal-head h3 { margin: 0; font-size: 1rem; }
.bl-modal-close { border: 0; background: none; font-size: 1.3rem; line-height: 1;
                  color: var(--text-muted); cursor: pointer; padding: 2px 6px; }
.bl-modal-close:hover { color: var(--text); }
.bl-modal-body { padding: var(--space-5) var(--space-6); overflow-y: auto; }
.bl-modal-note { margin: 0 0 var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }
.bl-modal-foot { display: flex; justify-content: flex-end; gap: var(--space-3);
                 padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); }
.bl-modal-foot .btn { padding: 7px 20px; }
.bl-modal-body textarea { width: 100%; min-height: 12em; font-size: var(--fs-base); line-height: 1.6; }

/* 模様の一覧。名前だけでは選べないので、実際の模様を並べて見せる。 */
.bl-pattern-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                   gap: var(--space-3); }
.bl-pattern-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
                   border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
                   background: var(--surface); }
.bl-pattern-item:hover { border-color: var(--accent); }
.bl-pattern-item.is-on { border-color: var(--accent); background: var(--accent-soft, #eaf1fc); }
.bl-pattern-item input { margin: 0; flex: 0 0 auto; }
.bl-pattern-item svg { flex: 0 0 auto; border: 1px solid var(--border); background: #fff; }
.bl-pattern-item span { font-size: var(--fs-sm); line-height: 1.25; }

/* ---------- お知らせ・更新情報（トップページの枠と更新履歴ページ /updates/） ---------- */

/* 種別タグの色。カテゴリの識別色と同じく、彩度を落として並べても賑やかになりすぎない
   色にしている。背景は薄く、文字だけで種別を読み取れる濃さにする */
.update-item-tag-new { background: var(--accent-soft); color: var(--accent-strong); }
.update-item-tag-feature { background: #e9f2ec; color: #35624a; }
.update-item-tag-improve { background: #eef1f5; color: #4a5666; }
.update-item-tag-fix { background: var(--danger-soft); color: var(--danger); }
.update-item-tag-notice { background: #f4efe7; color: #7a5c37; }

/* 更新情報の一覧。トップページの枠と更新履歴ページで同じ見た目を使う */
.update-list { list-style: none; margin: 0; padding: 0; }

.update-item {
    display: grid;
    /* 左に日付＋種別タグ、右に見出しと概要。日付とタグが折り返さない幅を確保する */
    grid-template-columns: 168px minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border);
    scroll-margin-top: calc(var(--admin-bar-height) + var(--header-height) + var(--tabs-height) + var(--space-4));
}
.update-item:first-child { border-top: 0; padding-top: 0; }
.update-item:last-child { padding-bottom: 0; }

.update-item-meta { display: flex; align-items: center; gap: var(--space-2); }
.update-item-date {
    font-size: var(--fs-sm);
    color: var(--text-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.update-item-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.update-item-body { min-width: 0; }
.update-list .update-item-title { font-size: 0.88rem; font-weight: 600; color: var(--accent); }
.update-list a.update-item-title:hover { color: var(--accent-strong); text-decoration: underline; }
.update-list span.update-item-title { color: var(--text); }
.update-item-version {
    margin-left: 6px;
    font-size: var(--fs-xs);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.update-list .update-item-desc {
    margin: 2px 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* ---- トップページの枠 ---- */

/* アプリ一覧より上に置くが、主役はあくまでアプリ一覧なので、
   タイルと同じ枠・角丸・影にとどめて必要以上に目立たせない */
.site-updates {
    margin: 0 0 var(--space-8);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.site-updates-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-4);
    padding-left: var(--space-3);
    border-left: 4px solid var(--accent);
}
/* 枠の中は最新数件だけの要約なので、長い概要は2行で切る（続きは更新履歴ページで読む） */
.site-updates .update-item-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.site-updates-foot {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    text-align: right;
}
.site-updates-more { font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.site-updates-more:hover { text-decoration: underline; }

/* ---- 更新履歴ページ ---- */

.updates-count { font-size: 0.8rem; color: var(--text-faint); margin: 0 0 var(--space-6); }

.updates-month-nav {
    margin: 0 0 var(--space-8);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-sunken);
}
.updates-month-nav-title { font-size: var(--fs-base); font-weight: 700; margin: 0 0 var(--space-2); }
.doc-page .updates-month-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
}
.updates-month-nav li { margin: 0; }
.updates-month-nav a { font-size: 0.82rem; font-weight: 600; }
.updates-month-nav a:hover { text-decoration: underline; }

.updates-month {
    margin: 0 0 var(--space-8);
    scroll-margin-top: calc(var(--admin-bar-height) + var(--header-height) + var(--tabs-height) + var(--space-4));
}
.doc-page .updates-month-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--space-3);
    padding-left: var(--space-3);
    border-left: 4px solid var(--accent);
}
.updates-month-count { font-size: 0.75rem; font-weight: 400; color: var(--text-faint); }

.updates-back { margin: var(--space-8) 0 0; }
.doc-page .updates-back a { font-size: var(--fs-base); font-weight: 600; }
.updates-back a:hover { text-decoration: underline; }

/* フッターの「新着・更新ツール」から更新履歴ページへ */
.site-footer-widget-more {
    display: inline-block;
    margin-top: var(--space-1);
    font-size: 0.8rem;
    color: var(--footer-text-muted);
}
.site-footer-widget-more:hover { color: var(--footer-text); text-decoration: underline; }

@media (max-width: 600px) {
    .site-updates { padding: var(--space-4); }
    .site-updates-title { font-size: 1rem; margin-bottom: var(--space-3); }
    /* 狭い画面では日付・タグを1行目に、見出しと概要を2行目に置く */
    .update-item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .updates-month-nav { padding: var(--space-3) var(--space-4); }
}

/* ---------- iOSの自動ズーム対策（狭い画面のみ） ----------

   iOS Safariは font-size が16px未満の入力欄にフォーカスすると画面を勝手に拡大し、
   指で戻すまで拡大されたままになる。桁の多い数値をいくつも入れていく画面では
   入力のたびに起きるため、狭い画面でだけ16pxへ上げて止める。
   （viewportに maximum-scale=1 を書く手もあるが、それはピンチズーム自体を禁じることに
   なり、図面を拡大して確認したい利用者を締め出すので採らない）

   同じ入力欄へ font-size を当てている指定が .form-grid-compact・.bl-table・
   ペースト欄などファイル各所にあり、位置と詳細度の両方で勝つ必要がある。そのため
   セレクタを個別に並べたうえで、このブロックをファイルの末尾に置いている。
   入力欄の font-size を新しく足すときは、ここより後ろに書かないこと。 */

@media (max-width: 600px) {
    input[type="text"], input[type="email"], input[type="password"], input[type="number"],
    input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
    select, textarea,
    .form-grid-compact input[type="number"], .form-grid-compact select,
    .site-search-input,
    .analytics-custom-form input[type="date"],
    .hsp-paste-input, .nvs-paste-input,
    .feedback-form input[type="file"],
    .bl-table input, .bl-table select, .bl-table textarea,
    .bl-modal-body textarea,
    input.layer-input, select.layer-input {
        font-size: 16px;
    }

    /* 16pxにすると既定の幅では桁が収まらないため、表の中の入力欄は幅も広げる。
       あふれた分は .table-scroll（overflow-x: auto）が受けるので、ページ全体が
       横スクロールすることはない。 */
    input.layer-input { width: 72px; }
    select.layer-input { width: 104px; }
    .hsp-input-table input.layer-input, .nvs-input-table input.layer-input { width: 104px; }
    .nvs-input-table select.layer-input { width: 112px; }
    .layer-input-table th, .layer-input-table td { font-size: var(--fs-base); }
}

/* ---------- 小さすぎる操作要素の当たり判定 ----------

   WCAG 2.2 の達成基準 2.5.8（ターゲットのサイズ・最小）は24×24pxを求めている。
   文字だけのリンクやボタンは行の高さぶんしか無く、20px前後にとどまっていた。

   文字サイズや余白を変えると周りのレイアウトが動くため、inline-flex で最小の
   高さだけを確保する。見た目の位置は変わらず、押せる範囲が上下に広がる。
   （inline-block や inline のままでは min-height が効かない） */

.tool-version-history-btn,
.site-updates-more,
.tool-category-more,
.site-footer-widget-more,
.update-item-title {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* フッターのリンクは項目が密に並ぶ場所で、行の高さぶん（20〜21px）しか無かった。
   ここも24pxを確保する。そのぶんフッターは縦に伸びるが、指で押す場所なので優先する。 */
.site-footer-widget-list a,
.site-footer-links a,
.category-page-others-list a,
.updates-back a,
.notfound-links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* ---------- 総合判定 ----------

   照査項目が縦に並ぶ結果表では、途中の1件がNGでも見落とす。表の手前に全体の合否を
   置いて、まずここだけ見れば済むようにする。色（緑・赤）だけに頼らず、
   「総合判定 OK / NG」という文字と、NGなら項目名も出す。 */

.overall-judgment {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border-left: 4px solid;
    font-size: var(--fs-base);
}
.overall-judgment.is-ok {
    background: var(--judge-ok-soft);
    border-left-color: var(--judge-ok);
    color: var(--judge-ok);
}
.overall-judgment.is-ng {
    background: var(--judge-ng-soft);
    border-left-color: var(--judge-ng);
    color: var(--judge-ng);
}
.overall-judgment-badge { font-weight: 700; white-space: nowrap; }
.overall-judgment-note { color: var(--text); }
.overall-judgment-note strong { color: var(--judge-ng); }

/* ---------- 適用範囲の要約（入力の手前） ----------

   詳しい説明は技術解説（#tool-guide）にあるが、そこはページのかなり下で、入力欄より
   後ろにあたる。「対象外の条件」を入力し終えてから知ることになるのを避けるため、
   要約だけを手前に出す。目立たせすぎるとフォームまでの距離が伸びるので、
   罫線と地色だけの控えめな見た目にとどめる。 */

.tool-scope {
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    font-size: var(--fs-base);
}
.tool-scope-block + .tool-scope-block { margin-top: var(--space-3); }

.tool-scope-label {
    display: inline-block;
    margin-bottom: var(--space-1);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
}
.tool-scope-label-can { color: var(--judge-ok); }
.tool-scope-label-cannot { color: var(--judge-warn); }

.tool-scope-list { margin: 0; padding-left: 1.3em; color: var(--text); }
.tool-scope-list li { margin-bottom: 3px; line-height: 1.7; }
.tool-scope-list li::marker { color: var(--text-faint); }

/* 本文中のツール名は、そのツールへのリンクにしている（Tools::linkToolNames）。
   サイト全体ではリンクに下線を引いていないが、この枠は地色が沈んでいて色だけでは
   気づきにくいため、ここでは下線を出す。 */
.tool-scope-list a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.tool-scope-list a:hover { text-decoration-color: var(--accent); }

.tool-scope-more { margin: var(--space-3) 0 0; font-size: var(--fs-sm); }

@media (max-width: 600px) {
    .tool-scope { padding: var(--space-3); }
}