: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）を満たす。
       ここを薄くすると、小さな字の注意書き（画面は 14px、帳票は 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指定のままでよい）。
       段階を増やすと「どれを使うか」を毎回考えることになるため、安易に足さないこと。

       画面の文字は 14px を下限にする（2026-09-30、なべちゃんの指示「最低14px、主要見出しは16px」）。
       そのため xs・sm・base は同じ 14px にしてある。名前は「何の文字か」の目印として残しており、
       補助・注釈と本文の違いは大きさではなく色（--text-muted・--text-faint）と太さで付ける。
       14px 未満の値を画面の文字に書かないこと（直書きの rem・px も同じ）。見出し（h1〜h3）は 16px 以上。
       例外は図の中の文字（SVG）と帳票の紙面（.report-sheet・.report-paged。下で元の段階へ戻している）だけ。 */
    --fs-xs: 0.875rem;     /* 14px   バッジ・補助ラベル・印 */
    --fs-sm: 0.875rem;     /* 14px   注釈・補足 */
    --fs-base: 0.875rem;   /* 14px   画面の標準 */
    --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; }
/* ブラウザ既定の small（一回り小さく）は 14px を割るので、画面の文字の下限にそろえる。帳票の紙面は既定のまま */
small { font-size: var(--fs-sm); }
:is(.report-sheet, .report-paged) small { font-size: smaller; }

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

/* ヘッダー（ロゴの帯＋カテゴリのタブ）を画面上部に貼り付けて追従させるのは、トップページ
   だけ（body.has-fixed-header。Layout.php の render_header() の $fixedHeader）。ほかの
   ページではヘッダーは本文と一緒に上へ流れ、ツールのページでは計算ステップのパンくず
   （.wizard-breadcrumb）から下が追従する。

   --fixed-top は「画面上部に貼り付いているものの下端」。追従する要素の top と、アンカーで
   飛んだときの scroll-margin-top は、ヘッダーの高さを直接足さずにこれを使う。
   :root ではなく body で定義しているのは、管理バーの高さ（--admin-bar-height）を
   body.has-admin-bar が body で上書きするため。:root で組むと 0px のまま固まる。 */
body {
    --fixed-top: var(--admin-bar-height);
    padding-top: var(--fixed-top);
}
body.has-fixed-header { --fixed-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);
    /* 流れるときも relative にしておく。検索とメニューのパネル（z-index: 60）を、下の
       追従するパンくずや帳票のツールバーより前に出すため、ヘッダーごと重なり順を持たせる。
       メニューと狭い画面の検索のパネルは、ここを基準に位置を決めている */
    position: relative;
    z-index: 30;
}
body.has-fixed-header .site-header {
    position: fixed;
    top: var(--admin-bar-height);
    left: 0;
    right: 0;
}

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

/* ---- 開発環境の管理バー ----------------------------------------------------
   開発環境でのみ 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: var(--fs-xs); font-weight: 500; color: var(--text-faint); white-space: nowrap; }

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

/* サイト内検索（虫眼鏡→入力欄→候補リスト） */
.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: var(--fs-base);
    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: var(--fs-base); font-weight: 600; }
.site-search-result-group { font-size: var(--fs-xs); color: var(--text-faint); }
.site-search-empty { padding: 8px; font-size: var(--fs-sm); color: var(--text-faint); }

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

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

/* position は付けない。パネルの位置の基準をヘッダー（.site-header）にするため */
.site-menu { display: none; 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);
}

/* ヘッダーの下罫線（1px）のすぐ下に、画面幅いっぱいで出す。以前は画面に対して fixed で
   置いていたが、ヘッダーが流れるページでは、少しスクロールしてから開くとヘッダーから離れ、
   開いたままスクロールするとパネルだけが残った。ヘッダーを基準にすれば一緒に動く */
.site-menu-panel {
    position: absolute;
    top: calc(100% + 1px);
    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 10px;
    border-radius: var(--radius-sm);
    /* リンクが並びきらないと日本語は途中で折り返し、2行に割れて読みにくくなる。
       折り返さずに済む幅は下のメディアクエリで確保する */
    white-space: nowrap;
}
.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));
    /* 流れるときも relative にしておく（端のフェード ::before / ::after の位置の基準） */
    position: relative;
    z-index: 29;
}
/* トップページでだけヘッダーと一緒に貼り付ける（上の「Top header」） */
body.has-fixed-header .header-tabs {
    position: fixed;
    top: calc(var(--admin-bar-height) + var(--header-height));
    left: 0;
    right: 0;
}

.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); }
    /* 文字を 14px にしたら 1280px で 12px はみ出した（2026-09-30）。タブの左右の余白を 1px ずつ詰めて収める */
    .header-tab { padding-left: 7px; padding-right: 7px; }
}

.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: var(--fs-xs);
    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: var(--fs-sm);
    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.62); }
/* ツールカテゴリは項目数が多く縦に長くなるため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: var(--fs-sm); 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: var(--fs-base); 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; }

/* サイト名の英名（Soil ＆ Concrete）をタイトルの上に置く。頭文字の S・C と、タイトルの「土」「コンクリート」を
   同じ色にして、語の対応が見て分かるようにする。2026-09 にサイト名を Solo Work Lab から変えたとき、
   Solo の4文字に4語を対応づけていた飾りをこの形に作り直した（manage による横断変更、なべちゃんが案Aを選んだ） */
.site-hero-acronym {
    display: flex;
    justify-content: center;
    gap: 0.5em;
    margin: 0 0 var(--space-2);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.65);
}
.site-hero-acronym .hero-initial,
.site-hero-title .brand-letter { font-weight: 800; }

/* 英名の頭文字と、タイトルの「土」「コンクリート」を同じ色で対応づける。
   「土」の青は、狭い幅で 11.5px になる英名の S が写真の上で 4.5:1 を取れるよう #7db2ff から明るくした（390px で 4.15 だった） */
.site-hero-acronym .hero-initial-1,
.site-hero-title .brand-letter-1 { color: #93c2ff; }
.site-hero-acronym .hero-initial-2,
.site-hero-title .brand-letter-2 { color: #6fd8c2; }

/* サイト名は「土とコンクリートの／設計計算ツール集」の境目でだけ折る（狭い幅で語の途中で折れないように） */
.site-hero-title .nb,
.brand-name .nb { display: inline-block; }

.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-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から飛んだとき、固定ヘッダーに先頭が隠れないようにする。
   CTAの飛び先は #pickup-banner だが、#tool-catalog もヘッダーのタブから飛べるので両方に要る */
#tool-catalog,
#pickup-banner { scroll-margin-top: calc(var(--fixed-top) + var(--space-4)); }

/* ---------- 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: #8e6e47; } /* 仮設工 */
#pavement,
[data-category-slug="pavement"] { --category-accent: #8e6e47; } /* 舗装工 */
#drainage,
[data-category-slug="drainage"] { --category-accent: #8e6e47; } /* 雨水・排水 */

/* 作図・補助ツール（グレー系） */
#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(--fixed-top) + 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);
}

/* 見出しの左にアクセント色の縦バーを添えて、カテゴリの始まりを目立たせる。
   サイズはカテゴリページの見出し（.category-page-title）と同じにする。
   同じ「擁壁工」がページをまたいで同じ大きさで出るようにするため。 */
.tool-category-title {
    font-size: 1.3rem;
    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-base); 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: var(--fs-sm);
    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: var(--fs-base);
    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: var(--fs-base);
    font-weight: 600;
    color: var(--accent);
}
.tool-tile-arrow { transition: transform 0.12s ease; }

/* ---------- トップページのピックアップバナー（立場から探す） ----------
   「最近使ったツール」とタイル一覧の間に置く、利用者の立場ごとの入口。
   カードの骨格はtool-tileに寄せつつ、アイコンを丸バッジにして種類の違いを出している。 */
.pickup-banner { margin: 0 0 var(--space-6); }
/* 下に続くカテゴリ見出し（.tool-category-title）と同じ大きさにする。
   どちらもトップページの章の見出しなので、片方だけ小さいと段落ちして見える */
.pickup-banner-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 var(--space-3); }
/* 2行2列。1行4列へ戻すときは、この grid-template-columns を
   repeat(auto-fit, minmax(220px, 1fr)) に差し替え、下の .pickup-card の
   min-height を 180px に戻す（狭い画面の1列指定はどちらでもそのまま使える）。 */
.pickup-banner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
.pickup-card {
    position: relative;
    /* 写真の拡大（:hover）と角丸は切る。clip はスクロールの入れ物にならないので、下の aspect-ratio は
       中身が入りきらないとき（狭い画面で見出しが2行になったとき）だけ縦に伸びる（hidden だと「見る →」が切れた）。
       clip を知らないブラウザは hidden のまま */
    overflow: hidden;
    overflow: clip;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* 写真が主役なので16:9で切り出す。列幅が同じなので全カードの高さもそろう。
       高さで見せたいときは aspect-ratio を消して min-height: 200px に戻す。 */
    aspect-ratio: 16 / 9;
    /* グリッドの既定（align-self: stretch）だと行の高さまで引き伸ばされ、
       縦横比が効かなくなるため解除する（.tool-tile と同じ） */
    align-self: start;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-sunken);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.pickup-card:hover {
    border-color: var(--accent-strong);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
}

/* 背景写真。写真を置いたカードだけ has-photo が付き、白文字＋スクリムに切り替わる。
   写真が未配置のカードは上の下地の色のままで、レイアウトは変わらない。 */
.pickup-card-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 人物や機械が入るため、中央よりやや上を残して切り出す */
    object-position: center 45%;
    transition: transform 0.3s ease;
}
/* 写真の上に重ねるスクリム。site-hero と同じ考え方で、白文字の可読性を確保する */
.pickup-card.has-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    /* 文字が下段に寄ったので、上は写真を見せ、下だけしっかり暗くする */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.34) 45%, rgba(0, 0, 0, 0.82) 100%);
    pointer-events: none;
}
.pickup-card.has-photo {
    /* 写真の読み込み前に見える下地 */
    background: #2a2a2a;
    border-color: transparent;
    color: #fff;
}
.pickup-card.has-photo:hover { border-color: var(--accent-strong); background: #2a2a2a; }
.pickup-card.has-photo:hover .pickup-card-photo { transform: scale(1.04); }
/* 写真・スクリムより前面に出す */
.pickup-card.has-photo > *:not(.pickup-card-photo) { position: relative; z-index: 1; }
.pickup-card.has-photo .pickup-card-icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.pickup-card.has-photo .pickup-card-desc { color: rgba(255, 255, 255, 0.88); }
.pickup-card.has-photo .pickup-card-action { color: #fff; }

.pickup-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    flex: 0 0 auto;
}
.pickup-card-icon-svg { width: 22px; height: 22px; }
/* 見出し以降は下段へまとめて寄せる（margin-top:auto を見出しに置くことで、
   見出し・説明・「見る →」がひとかたまりで下に付き、上は写真だけになる）。
   見出しを大きくしているのは、読ませるためではなく「自分のことだ」と
   一目で気づいてもらうため。 */
.pickup-card-title {
    margin-top: auto;
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.pickup-card-desc { font-size: var(--fs-base); color: var(--text-muted); }
.pickup-card-foot { display: flex; justify-content: flex-end; }
.pickup-card-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--accent);
}
.pickup-card:hover .pickup-card-action .tool-tile-arrow { transform: translateX(2px); }

/* ---------- トップページの表示形式（タイル／一覧） ----------
   マークアップはタイルと共通で、#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; }
/* リード文は文字が小さいぶん、色は薄くしない。--text-muted だと白地に対して 5.0:1 しかなく、
   12.8pxの文字では読みづらい。--text にすると 14.4:1 になる（h1とはサイズで区別される）。 */
.tool-page-header p { font-size: var(--fs-sm); color: var(--text); 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);
    /* ツールのページではヘッダーが上へ流れ、ここから下が画面の上端に貼り付いて追従する
       （上の「Top header」）。wizard.js はこの top を読んで、プレビューと各ステップの
       位置をパンくずの下へずらしている */
    position: sticky;
    top: var(--fixed-top);
    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); }
/* 入力欄の先頭に置くファイル取り込みの行。計算結果ビューではhidden属性で隠すため、
   display:flex を [hidden] で打ち消せるようにしておく（クラス側のdisplay指定は
   ブラウザ既定の [hidden]{display:none} より強く、これが無いとhiddenが効かない）。 */
.wizard-import-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-4); }
.wizard-import-bar[hidden] { display: none; }

/* 表の中の名称（液状化判定の地層名）。長い名前が1行に伸びて他の列を押し出さないよう、
   インラインブロックにして折り返させる（表のauto幅ではセルのmax-widthが効かない）。
   .table-scroll .result-table の white-space: nowrap をここだけ戻す必要がある。 */
.lq-layer-name { display: inline-block; min-width: 7em; max-width: 14em; white-space: normal; overflow-wrap: break-word; }

.row-count-field { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); color: var(--text-muted); white-space: nowrap; }
/* ↑ nowrap：「地層数」「切梁の段数」の文字が1字幅まで縮んで「地／層／数」と縦に折れていた（山留め・FEM など 15 本。2026-09-30 の全ツールの UX 監査） */
.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; }
/* 狭い画面では結果画面のボタン（戻る・関連ツールへ連動・帳票出力）が横に並びきらず、ボタンの中で
   語が途中で折れる（「帳票出／力」）。ボタンごと次の行へ送り、行の残りの幅に伸ばす。
   画面下に貼り付く入力画面の帯（.wizard-nav-submit）は 900px 以下で別に組むので外す */
@media (max-width: 575px) {
    .wizard-nav:not(.wizard-nav-submit) { flex-wrap: wrap; }
    /* 1つで行の幅を超える長いボタン（「開水路の水理計算で確認する →」の 320px）は中で折れるので、折れた行も中央にそろえる */
    .wizard-nav:not(.wizard-nav-submit) > .btn { flex: 1 1 auto; text-align: center; }
}

.drawing-panel { position: sticky; top: calc(var(--fixed-top) + var(--space-4)); padding: var(--space-5); }

.drawing-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    /* 見出しと右の注記・ボタンが1行に入りきらないときは、注記・ボタンを途中で折らずに次の行の右へ送る
       （右カラムが狭い 920〜1140px では、見出しとボタンの両方が2行に折れていた） */
    flex-wrap: wrap;
    column-gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.drawing-panel-header h2 { font-size: 1rem; margin: 0; }
.drawing-panel-header > .drawing-panel-note,
.drawing-panel-header > .btn { white-space: nowrap; margin-left: auto; }
.drawing-panel-note { font-size: var(--fs-sm); 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: 1rem; margin: 0; }
.lw-preview-subtitle { font-weight: 400; color: var(--text-muted); font-size: var(--fs-sm); }
/* 擁壁各種: 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; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
.lw-3d-toggles .checkbox-option { font-size: var(--fs-sm); min-height: 0; flex: 0 0 auto; white-space: nowrap; }
.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; }
/* 余白を詰めて文字を大きくした画面の図（data-fit-text。public/js/svg-fit.js）では、文字が図に対して大きくなり、土のハッチ・
   土圧の塗り・寸法線に掛かりやすい（L型擁壁の底版厚H2の文字は寸法より長く、下へ垂れて土圧の塗りとすべり面に掛かった）。
   図の中の文字をみな縁取って下地から浮かせる（縁取りの色は図の地と同じなので、地の上では見えない）。
   枠の幅で 1:1 に描く画面のグラフ（data-fit-chart）も、値の文字が曲線や点に掛かるので同じにする */
[data-fit-text] svg text,
[data-fit-chart] svg text { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
/* 濃い塗りの上の白い文字（浅層改良の「改良体」・柱状改良の寸法・舗装の表層）には縁取りを付けない。白い文字に白い縁取りが
   重なって字の形が潰れ、白い塊に見えた */
[data-fit-text] svg text.improve-label,
[data-fit-text] svg text[fill="#fff"],
[data-fit-text] svg text[fill="#ffffff"],
[data-fit-text] svg text[fill^="rgba(255, 255, 255"] { stroke: none; }
/* 余白を詰めると縦長の図は枠の幅いっぱいに広がって高くなる（ボックスカルバートは 1280px で 335 → 533px）。
   右カラムに概要を持たないパネルでも、図の高さはおおむね直す前の大きさにとどめる（縦横比は viewBox のまま中央で縮む）。
   高さで縮んだぶんは svg-fit.js が文字で補う。概要を持つパネルは上の 285px が先に効く */
.drawing-panel [data-fit-text] > svg { max-height: min(400px, 60vh); }
/* 画面の図では、図の下の長い注記を SVG の外の箇条に出す（集水桝の basin-drawing.js。SVG の中では図の幅いっぱいに広がり、文字を大きくできない） */
.drawing-fit-notes { margin: var(--space-2) 0 0; padding: 0 0 0 1.1em; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.drawing-fit-notes li + li { margin-top: 2px; }

.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); }
/* タワークレーン基礎の断面図の地層の名前（書式が当たらず 16px の黒で描かれ、基礎の輪郭に掛かっていた）。色は土の塗りの上で濃さの比 5.8 以上 */
#foundation-drawing .boring-soil-label { font-size: 12px; fill: #4a5361; font-weight: 600; }
.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: var(--fs-sm); 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: var(--fs-base);
    font-weight: 600;
    color: var(--text-muted);
}

.radio-group { display: flex; flex-wrap: wrap; gap: var(--space-2) 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;
    /* 押せる範囲を 24px 以上にする（ブラウザ既定のラジオは 13px しかない） */
    min-height: 24px;
    padding: 2px 0;
    /* 列に収まらない長い選択肢（「石油系素材の透水マットを使用する」など、括弧の無いもの）は、語の途中ではなく文節で折る
       （auto-phrase は Chromium 系だけ。ほかのブラウザは字の区切りで折れる。2026-09-30 の全ツールの UX 監査） */
    word-break: auto-phrase;
}
/* 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 label の min-height（1.8em）のほうが詳細度で勝つので、ここで 24px を指定し直す */
.form-grid-compact .radio-option { font-size: var(--fs-sm) !important; min-height: 24px; }
/* 選択肢の補足（「芯かぶり（コンクリート表面から鉄筋中心まで）」の括弧の中）を小さな字の2行目に出す。
   説明図の横の狭い列（220〜274px）では、括弧つきの1行が語の途中で折れていた（「鉄筋中心ま／で」）。
   描くのは src/Layout.php の swl_radio_label()（全ツールの選択肢） */
.radio-option:has(.radio-option-sub) { align-items: flex-start; }
.radio-option:has(.radio-option-sub) input[type="radio"] { margin-top: 2px; }
/* 補足そのものが列に収まらないとき（768〜1024px の「本数の少ない＝ピッチの広い配筋を優先」、5px 足りない）は、
   文節で折って2行の長さをそろえる（auto-phrase は Chromium 系だけ。ほかは字の区切りで折れる） */
.radio-option-sub { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); line-height: 1.4; word-break: auto-phrase; text-wrap: balance; }
/* 狭い画面では横に並べきれず、選択肢の語が途中で折れる（「直接入／力」）。1行ずつにする */
@media (max-width: 575px) {
    .radio-group { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .radio-option { width: 100%; }
}

.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;
    /* 列に収まらない長い文言（「石油系素材の透水マットを使用する」）は文節で折る（.radio-option と同じ） */
    word-break: auto-phrase;
}
.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; }

/* ---- 入力項目の注釈（ラベルの横の「？」とツールチップ） ----
   注釈を入力欄の下に並べると、長いものは十数行になり入力画面が間延びする。ラベルの横に「？」を置き、
   押す・マウスを載せる・キーボードで移ったときだけ出す。組み立てと対象の条件は public/js/field-help.js の冒頭。
   JS が走るまでは注釈を先に隠す（出てから消えると入力欄が上へずれる）。has-field-help は Layout.php の
   <head> の先頭で付け、field-help.js が読めなければ外れる。走り終えると field-help-ready が付いて解ける。
   **この条件（ラベルで始まる .form-group の直下の、id の無い p.field-note）は JS と同じにすること。** */
.has-field-help:not(.field-help-ready) .form-group > label:first-child ~ p.field-note:not([id]) { display: none; }
/* ラベルの余白・最小の高さ（.form-grid-compact など）はそのまま使い、「？」は1行目の文字の並びに合わせる */
.field-help-row { display: flex; align-items: baseline; gap: 2px; }
.field-help-row > label { min-width: 0; }
.field-help {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 16px;
    padding: 0;
    /* 上下を詰めて、ラベルの行の高さを押し広げない。広げると、2列に並べた画面（構造図作成など）で
       「？」のある列だけ入力欄が下がる */
    margin: -3px 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}
/* 押せる範囲を 24px 四方にする（WCAG 2.5.8）。見た目の丸は小さいまま */
.field-help::after { content: ""; position: absolute; inset: -4px -3px; }
.field-help-mark {
    display: block;
    box-sizing: border-box;
    /* 印の字も 14px を下限にする（:root の文字の段階）。丸は字に合わせて 20px */
    width: 20px;
    height: 20px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}
.field-help:hover .field-help-mark,
.field-help[aria-expanded="true"] .field-help-mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.field-help:focus-visible { outline: none; }
.field-help:focus-visible .field-help-mark { outline: 2px solid var(--accent); outline-offset: 2px; }
.field-help-tip { display: none; }
/* popover（top layer）で出す。UA の既定（inset: 0; margin: auto; 枠線・余白）を打ち消し、位置は JS が決める */
.field-help-tip.is-open {
    display: block;
    position: fixed;
    inset: auto;
    z-index: 1000;
    box-sizing: border-box;
    width: max-content;
    height: auto;
    max-width: min(400px, calc(100vw - 16px));
    margin: 0;
    padding: 10px 12px;
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.16), 0 1px 3px rgba(16, 24, 40, 0.08);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1.7;
    text-align: left;
}
/* .main-2col-drawing-wide .field-note（詰めた注釈）より強くして、どの画面でも同じ大きさで読ませる */
.form-group .field-help-tip > .field-note { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.form-group .field-help-tip > .field-note + .field-note { margin-top: var(--space-2); }
@media print {
    .field-help { display: none; }
}
.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%; }
/* 55%（と狭い画面の 60%）は、見出しと値の2列の表の行見出しのためのもの。3列以上の表（列見出しの行・行見出しつきの数値表）にも効くと、
   1列目が紙面の半分を取り、ほかの列の見出しが「その／時点／の根／切り」「固定／端曲／げモ」と縦に折れていた
   （山留めの支保工の配置・ボックスカルバートの断面力・U型水路の側壁の断面力など。2026-09-30 の全ツールの UX 監査）。3列以上の表では幅を中身に任せる */
.result-table thead th,
.result-table:has(tr > :nth-child(3)) th { width: auto; }

/* 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: var(--fs-base);
    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; word-break: auto-phrase; }
.ci-summary-table tbody th { text-align: left; font-weight: 500; word-break: auto-phrase; }
/* 照査の向き（σmin ≧ ft など）。項目名の下に折らずに添える */
.ci-summary-cond { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.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%; }
/* 画面の水平抵抗の表（ケース列なし）。項目名の7字が1行に入る幅 */
.ci-summary-table col.ci-col-item-wide { width: 24%; }

/* 横に広い表（多層データ入力・結果一覧等）は、ページ全体を横スクロールさせず
   表自身の中だけでスクロールさせる */
.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: var(--fs-sm); }
/* input[type="number"] の width:100% (詳細度: 属性+要素) に負けないよう、要素+クラスで指定する */
input.layer-input { width: 56px; padding: 4px 3px; font-size: var(--fs-sm); }
select.layer-input { width: 76px; padding: 4px 2px; font-size: var(--fs-xs); }
/* 舗装の材料（「表層・基層：加熱アスファルト混合物」など長い選択肢）は、76px では「表層・基」で切れて
   どの材料か読めなかった。列の残りの幅いっぱいに広げる（CBR 逆算・TA 舗装） */
select.layer-input.pavement-material-select { width: 100%; min-width: 11em; }
/* 塔状クレーン基礎の検討ケースの表：390px で1列目が3字幅に潰れ「作 / 業 / 時」と縦に並んだ */
.tcf-case-table tr > :first-child { white-space: nowrap; }
/* 名称を入れる欄（液状化判定の地層名など）。数値欄の幅では読めないので広げ、左寄せにする */
input.layer-input-name { width: 128px; text-align: left; }
.field-note-inline { display: block; font-size: var(--fs-xs); color: var(--text-faint); font-weight: 400; }

/* ---------- 横スクロールする表の枠 ---------- */
/* 枠に tabindex="0" role="region" aria-label を出してある。中にフォーカスできる要素が
   無い表（結果一覧など）は、これが無いとキーボードで横へ送れず3列目以降が読めない
   （WCAG 2.1.1）。フォーカスがどこにあるか見えないと迷子になるので、枠を描く。 */
.table-scroll:focus-visible,
.doc-table-wrap:focus-visible,
.article-table-scroll:focus-visible,
.category-compare-scroll:focus-visible,
.bl-table-wrap:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* 「まだ続く」側にだけ影を出す。横に溢れているかはCSSでは分からないので、
   public/js/table-scroll.js が is-scroll-left / is-scroll-right を付け外しする。

   **影を background（グラデーション）で出さないこと。** 祖先に背景画像があると
   manage の contrast.sh が枠の中の文字を測らなくなり（contrast.mjs の bgOf）、
   2Dフレーム解析の1ページで 596 か所が検査から静かに漏れた（2026-09-22 に実測）。
   検査は「OK」と出るので、漏れていること自体が報告に出ない。box-shadow なら測れる。 */
.table-scroll.is-scroll-left,
.doc-table-wrap.is-scroll-left,
.article-table-scroll.is-scroll-left,
.category-compare-scroll.is-scroll-left,
.bl-table-wrap.is-scroll-left {
    box-shadow: inset 16px 0 13px -13px rgba(16, 24, 40, 0.35);
}
.table-scroll.is-scroll-right,
.doc-table-wrap.is-scroll-right,
.article-table-scroll.is-scroll-right,
.category-compare-scroll.is-scroll-right,
.bl-table-wrap.is-scroll-right {
    box-shadow: inset -16px 0 13px -13px rgba(16, 24, 40, 0.35);
}
.table-scroll.is-scroll-left.is-scroll-right,
.doc-table-wrap.is-scroll-left.is-scroll-right,
.article-table-scroll.is-scroll-left.is-scroll-right,
.category-compare-scroll.is-scroll-left.is-scroll-right,
.bl-table-wrap.is-scroll-left.is-scroll-right {
    box-shadow: inset 16px 0 13px -13px rgba(16, 24, 40, 0.35),
                inset -16px 0 13px -13px rgba(16, 24, 40, 0.35);
}

.status-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    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: var(--fs-sm); color: var(--text-faint); }
.tool-version-history-btn {
    border: none;
    background: none;
    padding: 0;
    font-size: var(--fs-sm);
    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); }
/* 図の真上に置く上下を詰めたタブ（階段擁壁の中詰なし／中詰あり。右カラムの図と計算結果の概要を 1920×940 に収めるため） */
.preview-tabs-compact { margin-bottom: var(--space-1); }
.preview-tabs[hidden] { display: none; }   /* 中詰め土が無いときに JS が隠す（display: flex が hidden を上書きしていた） */
.preview-tabs-compact .preview-tab { padding: var(--space-1) var(--space-3); }
/* 狭い画面で折れるときは括弧の前で折る（「階段下段／側」と語の途中で折れた） */
.preview-tab-sub { display: inline-block; }

/* 関連ツールへ連動（計算結果から他ツールへ引き継ぐモーダルの中身） */
.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); }
/* POSTで移動する連動先（条件をGETに載せられないツール）はbuttonで出すため、
   ボタン既定の見た目を消してリンクと同じに揃える */
button.tool-link-item { appearance: none; -webkit-appearance: none; width: 100%; font: inherit; text-align: left; cursor: pointer; }
.tool-link-item-label { display: block; font-weight: 700; color: var(--accent-strong); }
.tool-link-item-desc { display: block; margin-top: 2px; font-size: var(--fs-sm); 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: var(--fs-base); 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);
}

/* 開発環境で枠の位置と大きさを確かめるためのプレースホルダ。本番では出力されない。
   幅・高さは<ins>と同じインラインstyleで指定されるため、ここでは中身の見た目だけ整える */
/* 開発環境だけに出る広告枠の代わり。どこに・どの種類の広告が・どれくらいの高さで入るのかが
   一目で分かるように、位置と種類を枠の中に書く（本番では出力されない）。
   クラス名に ad- を使わないのは、広告ブロッカーに隠されると位置の確認ができなくなるため。 */
.ad-placeholder, .slot-preview-frame {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--space-3);
    min-height: 100px;
    background: var(--surface-sunken);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
}
.ad-placeholder-label, .slot-preview-label { font-weight: 700; }
.ad-placeholder-meta, .slot-preview-meta { font-size: var(--fs-xs); color: #666f7c; }
.slot-preview { margin: var(--space-6) 0; text-align: center; }

/* 計算結果の直後（2カラムを抜けた位置、技術解説の手前）に置く横長の枠。
   「帳票出力」ボタンの誤クリックを避けるため、上に広めの余白を取る */
.ad-slot-result {
    /* 「計算する」「帳票出力」のボタンと近づくと誤クリックを招くため、
       上に広めの余白と区切り線を入れて、ツールの操作面と視覚的に切り離す */
    margin: var(--space-10) 0 var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
}
.ad-slot-result .ad-slot { margin: 0; }

/* 技術解説の中ほどに挟む記事内広告。前後の段落と間隔を空け、地の文と続けて読ませない */
.ad-slot-guide { margin: var(--space-8) 0; }
.ad-slot-guide .ad-slot { margin: 0; }

/* トップ・カテゴリのカード一覧の間に置く横長の枠。
   カードのグリッドには混ぜない（ツールと見分けがつかず、誤クリックを招くため） */
.ad-slot-list { margin: var(--space-8) 0; }
.ad-slot-list .ad-slot { margin: 0; }

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

/* 本文の幅は800px（一般的なブログテーマの本文幅と同程度）を上限とする。
   中央寄せにするとヘッダー・タブ列・パンくず（いずれも--shell-max-width基準）と
   左端がずれて見えるため、左寄せにしてそれらと左端を揃える */
/* 案内ページ（規約・ポリシー・使い方など）は読ませるためのページなので、
   情報密度を優先するツール画面とは別に、本文を大きく・濃くしている。
   見出しと本文のサイズ差も広げて、長い文書でも構造が目で追えるようにする。 */
/* 案内ページの本文幅。app-contentは画面幅いっぱいに広がるため、margin:0 だと
   左に寄って右側が大きく空く。読み幅は保ったまま中央に置く。 */
.doc-page { max-width: 800px; margin-inline: auto; 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: var(--fs-base); 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: ヘッダーの詰まり ----------------------------------
   ヘッダーのテキストリンクは折り返さない（.header-link の white-space: nowrap）ため、
   並びきらなくなる前に畳む。幅は1920pxで各要素を実測して決めた。
   ロゴ＋リンク5つ＋検索＋右上のボタンで1266px、タグラインを畳むと1179px必要。 */

@media (max-width: 1340px) {
    /* まずタグラインを畳む。リンクより先に譲れるのはここだけ */
    .brand-tagline { display: none; }
}

@media (max-width: 1240px) {
    /* タグラインを畳んでも足りないので、テキストリンクをメニューへ移す。
       検索（虫眼鏡＋文字）はこの幅ではまだ収まるので残す */
    .site-header-nav .header-link { display: none; }
    .site-menu { display: flex; }
}

/* ---------- 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); }
    /* タグラインとテキストリンクは、これより広い幅で既に畳んである */
    .site-header-nav { gap: 0; }

    /* 幅が足りないので、検索は虫眼鏡だけにする（用途はアイコンで伝わる） */
    .site-search-toggle-text { display: none; }
    .site-search-toggle { width: 30px; padding: 0; }
    /* 虫眼鏡の真下だと画面左にはみ出すため、画面幅いっぱいに置き直す。
       基準をヘッダー（.site-header）にして、メニューのパネルと同じ位置に出す
       （.site-search の relative を外すと、いちばん近い基準がヘッダーになる） */
    .site-search { position: static; }
    .site-search-field {
        position: absolute;
        top: calc(100% + 1px);
        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 { 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; }
    .pickup-banner-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: var(--fs-base); }
    .result-table th { width: 60%; }
}

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

.panel h2 { font-size: 1rem; margin: 0 0 var(--space-3); }
.panel h3 { font-size: 1rem; 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: var(--fixed-top);
        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(--fixed-top)
            + 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;
}
/* 帳票の紙面は、画面の文字の下限（14px。:root の文字の段階）より前の段階のまま組む。
   紙面の字を大きくすると改ページの位置が変わり、A4 に収めた表や図が次のページへ送られるため
   （2026-09-30、帳票を対象から外す案をなべちゃんに出し、異論は無かった）。
   Paged.js が組んだページは、全部が .report-sheet に包まれるわけではない（包まれない部分に画面の 14px が効き、
   ボックスカルバートで 26 → 24 ページに変わった）ので、組版の入れ物（report-paged.js が作る .report-paged）にも効かせる */
.report-sheet,
.report-paged {
    --fs-xs: 0.72rem;
    --fs-sm: 0.78rem;
    --fs-base: 0.85rem;
}
/* 画面の側で 14px へ上げた部品のうち、帳票の紙面にも出るものは、紙面では前の大きさに戻す */
:is(.report-sheet, .report-paged) .status-badge { font-size: 0.75rem; }
:is(.report-sheet, .report-paged) .field-note-inline { font-size: 0.65rem; }
:is(.report-sheet, .report-paged) .boring-log-legend { font-size: 0.75rem; }
:is(.report-sheet, .report-paged) .nvs-adopted-badge { font-size: 0.68rem; }
:is(.report-sheet, .report-paged) :is(.ci-summary-table th, .ci-summary-table td) { font-size: 0.82rem; }
@media (max-width: 600px) {
    :is(.report-sheet, .report-paged) :is(.result-table th, .result-table td) { font-size: 0.82rem; }
}

.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: var(--fs-xs);
    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: var(--fs-sm);
}
.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; }
/* 狭い画面では式が枠より広くなり（L型擁壁の帳票で 390px のとき 16 のうち 11）、右端で切れて壊れた式に見えた。
   横に送れる側の端に影を出す。影（scroll）は枠に固定、覆い（local）は中身と一緒に流れるので、
   中身が収まっているときと送り切った側では覆いが影を隠す。覆いの色は .report-formula の背景と同じにする。印刷には出さない */
@media screen {
    .report-formula-display {
        background:
            linear-gradient(to right, var(--surface-sunken) 30%, rgb(247 248 250 / 0%)) left / 32px 100% no-repeat local,
            linear-gradient(to left, var(--surface-sunken) 30%, rgb(247 248 250 / 0%)) right / 32px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 25%), rgb(0 0 0 / 0%)) left / 14px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 25%), rgb(0 0 0 / 0%)) right / 14px 100% no-repeat scroll;
    }
}
.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枚の見た目を再現するものであり、スクロールしないと読めない・
   スクロールしたまま印刷すると列が途切れる、では計算書として成立しないため）。
   幅が足りない分は折り返し・フォント縮小で用紙内に収める。
   Paged.js が章をページをまたいで分けると、続きのページには .report-sheet の枠が付かない。
   そこに載った表にも効くよう、ページの中身（.pagedjs_page_content）でも同じ指定にする。 */
.report-sheet .table-scroll,
.pagedjs_page_content .table-scroll { overflow-x: visible; }
.report-sheet .table-scroll .result-table,
.pagedjs_page_content .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,
.pagedjs_page_content .table-scroll .result-table th, .pagedjs_page_content .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, #erfem-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; }
/* 液状化判定の計算結果は、深度ごと・層ごとの表がどちらも列数が多い。1カラムの既定幅（900px）
   では表が横スクロールに入ってしまうため、この画面だけ中央寄せの幅を広げる。
   入力欄の1カラム幅（.main-2col-scroll-form .wizard-panel の700px）も一緒に外す。 */
.main-2col.main-2col-single.lq-result-wide { max-width: 1220px; }
.main-2col-scroll-form.main-2col-single.lq-result-wide .wizard-panel { max-width: none; }
/* 狭い画面では他のページと同じ幅（560px）に戻す。上の指定と同じ詳細度のため、
   打ち消しは必ずこの位置（後）に書く。前に書くとメディアクエリの側が負ける。 */
@media (max-width: 900px) {
    .main-2col.main-2col-single.lq-result-wide { max-width: 560px; }
}

.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); }
/* 倍率の入力欄。フォーム共通の input[type="number"] { width: 100% } は属性セレクタを含むぶん
   詳細度が高く、クラスだけでは負けて欄が横いっぱいに伸びる。要素名を付けて詳細度を合わせる。 */
input.fem-scale-value-input { width: 80px; flex: 0 0 auto; 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; }
/* 山留め弾塑性法の結果画面の分布図（tools/earth-retaining-elastoplastic/diagram.php。横に送れる枠 .table-scroll の中）。
   狭い画面で枠の幅まで縮めると文字が 4〜5.5px になったので、620px より縮めず、横に送って読む（帳票の図は .report-diagram の中で、ここは効かない） */
.table-scroll > .erp-diagram { display: block; width: 100%; min-width: 620px; height: auto; }
.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; }

/* ---------- 解説記事（読み物） ----------
   姉妹サイト「宅地造成の地盤技術」と体裁をそろえる。寸法・行間・色は、同サイトの記事
   （https://manual-of-takuchizosei.com/fill-backfill-difference/）の計算値を実測して合わせた。
   本文16px／行間1.8／色#333、カラムは 本文758px＋サイドバー356px（間46px）で全体1160px。
   アプリの画面（--fs-* の6段階）とは別系統になるため、記事だけの値をここにまとめる。 */

.article-page {
    --art-font: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --art-text: #333;
    --art-rule: #dde0e5;
    --art-fill: #f4f5f7;
    --art-fill-border: #eceef1;
    max-width: 1160px;
    margin: 0 auto;
    font-family: var(--art-font);
    color: var(--art-text);
}

/* align-items は既定（stretch）のままにする。start にするとサイドバーの高さが中身ぶんで
   止まり、その中の sticky が動ける範囲を失って追従しなくなる。 */
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 758px) 356px;
    gap: 46px;
}
/* 記事の面だけを白地にして、読むところをはっきりさせる（外側はページ地色のまま）。
   左右のpaddingを24pxずつ取ることで、本文の実効幅は710pxになる（758−48）。 */
.article-main {
    min-width: 0;
    padding: var(--space-8) var(--space-6) var(--space-10);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.article-header { margin-bottom: 40px; }
/* カテゴリはバッジで出す。記事の分類が一目で分かるようにする。 */
.article-category { margin: 0 0 12px; font-size: 14px; }
.article-category a {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    line-height: 1.6;
}
.article-category a:hover { background: var(--accent-strong); }
.article-title { font-size: 28px; line-height: 1.5; font-weight: 700; margin: 0 0 12px; }
.article-dates { display: flex; gap: 16px; margin: 0 0 24px; font-size: 14px; color: var(--text-muted); }
.article-lead { font-size: 16px; line-height: 1.8; margin: 0; }
/* リード文が複数段落のとき、一息で読める塊に見えるよう間を空ける */
.article-lead + .article-lead { margin-top: 24px; }
/* リード文の冒頭に置く共感の箇条書き。ここで「自分のことだ」と分かってもらう */
.article-lead-list {
    margin: 0 0 24px;
    padding: 20px 24px 20px 44px;
    background: var(--art-fill);
    border: 1px solid var(--art-fill-border);
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.8;
    list-style: disc;
}
.article-lead-list li + li { margin-top: 8px; }

/* 本文の目次。リード文の直後に置き、畳めるようにする（姉妹サイトと同じ）。
   サイドバーの目次は追従用で、こちらは記事を読み始める前に全体を見渡すためのもの。 */
.article-toc-inline {
    margin: 0 0 40px;
    padding: 20px 24px;
    background: var(--art-fill);
    border: 1px solid var(--art-fill-border);
}
.article-toc-inline-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 16px; font-weight: 700; cursor: pointer; list-style: none;
}
.article-toc-inline-title::-webkit-details-marker { display: none; }
.article-toc-inline-title::after { content: '−'; margin-left: auto; color: var(--text-faint); font-weight: 400; }
.article-toc-inline:not([open]) > .article-toc-inline-title::after { content: '＋'; }
.article-toc-inline-list { margin: 12px 0 0; padding-left: 1.6em; font-size: 16px; line-height: 1.9; }
.article-toc-inline-list li { margin-bottom: 4px; }
.article-toc-inline-list li::marker { color: var(--text-faint); }

/* 各h2の節の終わりに置く「目次へ戻る」。長い記事で現在地に戻れるようにする。 */
.article-back-to-toc { margin: 0 0 40px; text-align: right; font-size: 14px; }
.article-back-to-toc a { color: var(--text-muted); }

/* 記事の広告。節の切れ目に置くので、前後の余白は本文の段落より広く取る。
   目次の直後と本文の終わりは記事の外（.article-body の外）にあるため、ここでまとめて余白を決める。 */
.ad-slot-article, .slot-preview-article { margin: 40px 0; }
.ad-slot-article-top, .slot-preview-article-top { margin: 0 0 40px; }
.ad-slot-article-bottom, .slot-preview-article-bottom { margin: 48px 0 0; }
.ad-slot-article .ad-slot, .slot-preview-article .slot-preview { margin: 0; }

.article-body { font-size: 16px; line-height: 1.8; }
.article-body > *:first-child { margin-top: 0; }
/* h2は白抜き。姉妹サイトの見出しと同じ扱いにする */
.article-h2 {
    font-size: 22.4px;
    line-height: 1.4;
    font-weight: 700;
    color: #fff;
    background: #000;
    padding: 23.52px 31.36px;
    margin: 56px 0 44.8px;
    border-radius: 0;
    /* 目次から飛んだとき、画面上部に貼り付いているもの（--fixed-top）の下に見出しが潜らないようにする */
    scroll-margin-top: calc(var(--fixed-top) + var(--space-4));
}
.article-h3 {
    font-size: 20.8px;
    line-height: 1.4;
    font-weight: 700;
    margin: 62.4px 0 41.6px;
    padding-bottom: 10.4px;
    border-bottom: 2px solid var(--art-rule);
}
.article-p { margin: 0 0 32px; }
.article-list { margin: 0 0 32px; padding-left: 1.5em; }
.article-list li { margin-bottom: 8px; }
/* 原稿がバッククォートで書いてくる寸法や式（「d ＝ h － a」など）。地の文と区別が
   つくよう薄い下地を敷く。日本語混じりなので等幅は英数字にだけ効けばよい。 */
.article-body code, .article-lead code, .article-table code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.94em;
    padding: 2px 6px;
    background: var(--art-fill);
    border: 1px solid var(--art-fill-border);
    border-radius: 4px;
}
/* 記事本文中のアプリ名は自動でリンクになる。地の文に埋もれないよう下線を出す
   （サイト全体ではリンクに下線を引いていないが、文章の中では色だけでは気づきにくい）。 */
.article-body a, .article-lead a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.article-body a:hover, .article-lead a:hover { text-decoration-color: var(--accent); }

.article-note {
    margin: 0 0 32px;
    padding: 20px 24px;
    background: var(--art-fill);
    border: 1px solid var(--art-fill-border);
    border-left: 3px solid var(--accent);
}

.article-table-scroll { overflow-x: auto; margin: 0 0 32px; }
.article-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.8; }
.article-table caption { text-align: left; padding-bottom: 8px; font-size: 14px; color: var(--text-muted); }
.article-table th, .article-table td { border: 1px solid var(--art-rule); padding: 9px 12px; text-align: left; vertical-align: top; }
/* 狭い画面で列が 2 字幅に潰れ、「最大／曲げ／モー／メン／ト」のように語の途中で縦に折れていた（2026-09-30、manage の ux-survey.sh の表の検査。
   manage/tasks/assigned/solo-work-lab_ux-survey-crushed-table-columns.md）。文節でだけ折るようにすると、列の最小幅が最も長い文節の幅になり、
   収まらない表は外側の .article-table-scroll で横に送れる（auto-phrase は Chromium 系だけ。ほかのブラウザは従来どおり） */
.article-table th, .article-table td { word-break: auto-phrase; }
.article-table thead th { background: var(--art-fill); font-weight: 700; white-space: nowrap; }
.article-table tbody th { background: var(--art-fill); font-weight: 700; }

.article-references, .article-tools, .article-others { margin-top: 56px; }
.article-references-title, .article-tools-title, .article-others-title {
    font-size: 20.8px; font-weight: 700; margin: 0 0 20px; padding-bottom: 10.4px; border-bottom: 2px solid var(--art-rule);
}
.article-references .article-list, .article-others-list { font-size: 16px; line-height: 1.8; }
.article-others-list { margin: 0; padding-left: 1.5em; }
.article-others-list li { margin-bottom: 8px; }
.article-back { margin-top: 40px; font-size: 16px; }

/* ---- サイドバー ----
   追従するのは目次だけ。カテゴリはページと一緒に流れて、上へ抜けていく。
   目次に地色を敷いてあるので、下を通り過ぎるカテゴリは隠れる。 */
.article-sidebar { min-width: 0; }
/* サイドバーの並びは「カテゴリ → 目次」。目次を後ろに置くことで、スクロールで
   カテゴリが先に上へ抜け、固定された目次と重ならない。 */
.article-toc {
    position: sticky;
    top: calc(var(--fixed-top) + var(--space-4));
    max-height: calc(100vh - var(--fixed-top) - var(--space-6));
    overflow-y: auto;
    z-index: 1;
    margin: 32px 0 0;
    padding: 20px 24px;
    background: var(--art-fill);
    border: 1px solid var(--art-fill-border);
}
.article-toc-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.article-toc-list { margin: 0; padding-left: 1.4em; }
.article-toc-list li { margin-bottom: 8px; line-height: 1.7; }
.article-toc-list li::marker { color: var(--text-faint); }
.article-toc-list a { display: block; font-size: 14px; font-weight: 700; line-height: 1.7; padding-left: 8px; border-left: 2px solid transparent; }
/* いま読んでいる節。色だけだと気づきにくいので、左の縦線を添える。 */
.article-toc-list a.is-current { border-left-color: var(--accent); color: var(--accent-strong); }

/* サイドバーのカテゴリ。記事の分類として出すので、記事が無い分野はグレーアウトして
   リンクにしない（押しても記事の無いページに着くだけのため）。 */
.article-side-block { margin: 0; }
.article-side-title {
    font-size: 16px; font-weight: 700; margin: 0 0 14px; padding-bottom: 6px;
    border-bottom: 2px solid var(--art-text);
}
.article-side-list { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.7; }
.article-side-list li { display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.article-side-list li.is-current > a { font-weight: 700; color: var(--art-text); }
.article-side-list li.is-empty { color: var(--text-faint); }
.article-side-count {
    margin-left: auto; padding: 1px 8px; border-radius: 999px;
    /* 地色（--art-fill）の上では --text-faint が 4.28 で本文の基準に届かないため、ここだけ濃くする */
    background: var(--art-fill); color: #666f7c; font-size: 14px;
}
.article-side-more { margin: 16px 0 0; font-size: 14px; }

@media (max-width: 1180px) {
    /* サイドバーを保ったまま、本文カラムだけ詰める */
    .article-page { max-width: 100%; }
    .article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
    .article-main { padding-right: 0; }
}

@media (max-width: 900px) {
    /* 1カラムに落とす。並びは「目次 → 本文 → カテゴリ」。サイドバーごと前へ出すと、
       本文に着くまでにカテゴリ12件を越えることになるため、目次だけを前へ回す。
       display:contents で入れ子をたたみ、目次とカテゴリを直接グリッドの項目にする。 */
    .article-page { max-width: 720px; }
    .article-layout { grid-template-columns: 1fr; }
    .article-sidebar { display: contents; }
    /* 本文の先頭に目次があるので、狭い画面ではサイドバーの目次を出さない（同じものが2つ並ぶ） */
    .article-toc { display: none; }
    .article-main { order: 0; }
    .article-side-block { order: 1; margin-top: 40px; }
    .article-title { font-size: 24px; }
    .article-h2 { font-size: 20px; padding: 16px 20px; margin: 40px 0 28px; }
    .article-h3 { font-size: 18px; margin: 36px 0 24px; }
}

/* 記事の一覧（/articles/ とカテゴリページ下部で共用）。
   一覧はアプリのタイルと並ぶため、サイト共通の寸法（--fs-*）のままにする。 */
.article-index-group { margin-bottom: 48px; }
.article-index-category { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }
/* アイキャッチを図版に使ったタイル。OGP用に焼いた画像をそのまま流用する。 */
.article-card-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4);
}
.article-card { margin: 0; }
.article-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}
.article-card-link:hover { border-color: var(--accent); }
.article-card-thumb { display: block; background: var(--surface-sunken); }
.article-card-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.article-card-body { display: block; padding: var(--space-4); }
.article-card-link:hover .article-card-body { background: var(--surface-hover); }
.article-card-title { display: block; font-weight: 600; font-size: var(--fs-base); margin-bottom: 4px; line-height: 1.6; }
.article-card-desc { display: block; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; }
.article-card-date { display: block; margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--text-faint); }

/* アプリのタイル（と広告）から十分に離す。同じ面に続けて置くと、記事がタイルの一部に見える。
   ここには記事そのものを並べず、その分野の記事一覧への入口だけを置く。 */
.category-articles {
    margin-top: 56px;
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}
.category-articles-title { font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.category-articles-lead { margin: 0; font-size: var(--fs-base); color: var(--text-muted); line-height: 1.8; }
.category-articles-more { margin: var(--space-4) 0 0; font-size: var(--fs-base); }

/* ---------- 土留（山留め工）の設計（有限要素法） ---------- */

/* 掘削段階の切り替え。段階が増えても折り返して収まるようにする */
.erfem-stage-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); }
.erfem-stage-tab {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.erfem-stage-tab:hover { border-color: var(--accent); color: var(--text); }
.erfem-stage-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* 山留め壁の変位・断面力図。4枚を横に並べると軸の数字が読めない大きさになるため、
   2枚ずつ2段に置く。狭い画面では1枚ずつに落とす。 */
.erfem-wall-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-3);
}
.erfem-wall-chart { min-width: 0; }
.erfem-wall-chart svg { width: 100%; height: auto; display: block; }
@media (max-width: 700px) {
    .erfem-wall-charts { grid-template-columns: 1fr; }
}

/* 断面力図で使っている線の凡例 */
.erfem-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); }
.erfem-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.erfem-chart-legend i { width: 22px; height: 0; border-top: 2px dashed currentColor; display: inline-block; }
.erfem-legend-excavation { color: #8a5a12; }
.erfem-legend-strut { color: #1f7a4d; }

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

.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: var(--fs-base);
    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: var(--fs-sm);
}
.analytics-custom-form input[type="date"] { padding: 5px 6px; font-size: var(--fs-sm); }

.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: var(--fs-sm); 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: var(--fs-base); 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: var(--fs-sm);
    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: var(--fs-sm); 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: var(--fs-xs); 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: 1rem; 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: var(--fs-sm); min-height: 0; }
.beam-section-table .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.beam-section-empty { font-size: var(--fs-base); 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: var(--fs-sm); 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横）と画像保存 */
/* 注記とボタンが1行に入りきらないときは、途中で折らずにボタンを次の行の右へ送る（見出し行の注記・ボタンと同じ） */
.drawing-panel-tools {
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
    gap: var(--space-2) var(--space-3); margin-left: auto;
}
.drawing-panel-tools > * { white-space: nowrap; }
/* 拡大ボタンは目立たせる（既定の.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: var(--fs-xs); 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; }
/* 層の名前は層の塗りと同じ色で縁取る。薄い層では地下水位の線や境の線が字に触れるので、字の周りだけ線を消す（画面の図の白い縁取りより優先）。
   色は塗りの上で濃さの比 5.1 以上（--text-faint では 3.1） */
.ground-drawing-svg text.cs-layer-name { fill: #4a5361; paint-order: stroke; stroke-width: 3px; stroke-linejoin: round; }
.ground-drawing-svg text.cs-layer-name-nonsettling { stroke: #d7d2c8; }
.ground-drawing-svg text.cs-layer-name-consolidating { stroke: #c9d6c2; }
.ground-drawing-svg text.cs-layer-name-immediate { stroke: #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); }
/* 薄い地色の上に載るので、--text-faint（4.39）では本文の基準に届かない */
.layer-cell-disabled .layer-input:disabled, .layer-cell-disabled .layer-input:read-only { background: transparent; color: #666f7c; }
.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; }
/* 枠の幅で 1:1 に描いた画面のグラフ（data-fit-chart）は、文字が画面上の大きさそのものになるので 11.5px にする */
.cs-curve-svg.cs-curve-fit text { font-size: 11.5px; }
.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: #2a7f50; }   /* 文字は線（#2e8b57）より少し濃くする。#2e8b57 は白地で 4.25 で 4.5 に届かなかった（contrast.sh） */
.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; }
/* 枠の幅で 1:1 に描いた画面のグラフ（data-fit-chart）は、文字が画面上の大きさそのものになるので 11.5px にする */
.sgd-chart-svg.sgd-chart-fit text { font-size: 11.5px; }
.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; }
/* 枠の幅で 1:1 に描いた画面のグラフ（data-fit-chart）は、文字が画面上の大きさそのものになるので 11.5px にする */
.hsp-chart-svg.hsp-chart-fit text { font-size: 11.5px; }
.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; }
/* 枠の幅で 1:1 に描いた画面のグラフ（data-fit-chart）は、文字が画面上の大きさそのものになるので 11.5px 以上にする */
.och-chart-svg.och-chart-fit .och-chart-tick,
.och-chart-svg.och-chart-fit .och-chart-marker-label { font-size: 11.5px; }
.och-chart-svg.och-chart-fit .och-chart-axis-label { font-size: 12px; }
.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: #2a7f50; font-weight: 700; }   /* 文字は印（#2e8b57）より少し濃くする（白地で 4.94。#2e8b57 は 4.25） */
.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: var(--fs-sm); }
.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型擁壁の構造図作成 */
/* 他のツールから条件を引き継いで遷移してきた場合のみ出す戻りリンク */
/* .lwd-back-nav は構造図ツール、.tool-back-nav は src/ToolReturn.php が出す共通のもの */
.lwd-back-nav,
.tool-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: var(--fs-xs); 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: var(--fs-sm); font-variant-numeric: tabular-nums; }
.lwd-drawing-summary { display: flex; flex-wrap: wrap; gap: 7px; font-size: var(--fs-sm); 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;
}
/* 行の見出し＝形式名。アプリ名より短いので、幅は「大型ブロック積み擁壁」が2行に折れない程度でよい */
.category-compare-table tbody th {
    width: 11em;
    font-weight: 700;
}
/* 同じ形式に複数のアプリがある（一般用と宅地用）。アプリ名は長く、狭い画面では1件が
   2行に折り返るため、頭に「・」を出す。これが無いと、折り返しなのか次のアプリなのかが
   見分けられない。「・」の分だけ字下げして、折り返した行が頭にそろわないようにする。 */
.category-compare-apps {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 14em;
}
.category-compare-apps li {
    padding-left: 1em;
    text-indent: -1em;
}
.category-compare-apps li::before { content: "・"; }
.category-compare-apps li + li { margin-top: var(--space-1); }
.category-compare-apps 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: 1rem; 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: var(--fs-sm); }
#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: var(--fs-xs); 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: var(--fs-sm); }
/* 深度分布図（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: var(--fs-sm); 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: var(--fs-sm);
}
.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: var(--fs-xs);
    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: 1rem; 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: var(--fs-sm); 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: var(--fs-sm); 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: var(--fs-sm); color: var(--text-muted); }
.cfc-warnings h3 { font-size: 1rem; 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: var(--fs-sm); 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: var(--fs-sm);
}
.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: var(--fs-sm); 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: var(--fs-sm); 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: var(--fs-base); 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: var(--fs-base); 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: var(--fs-sm); }

.pdc-notes { font-size: var(--fs-sm); color: var(--text-muted); }
.pdc-notes h3 { font-size: 1rem; 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: var(--fs-sm); 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: var(--fs-sm); 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: var(--fs-sm); 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: var(--fs-sm);
    line-height: 1;
    cursor: pointer;
}
.pdc-zoom-btn:hover { border-color: var(--accent); color: var(--accent); }

.pdc-page-label { margin-top: 3px; font-size: var(--fs-sm); color: var(--text); font-variant-numeric: tabular-nums; }
.pdc-page-rot { margin-left: 4px; font-size: var(--fs-xs); color: var(--text-faint); }
.pdc-page-source { font-size: var(--fs-xs); 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: var(--fs-base); 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) {
    /* 2つのボタンを1行に押し込むと（flex: 1）、390px で「すべてのページを保存」が語の途中で折れた。
       入りきらないときはボタンごと次の行へ送り、行の残りの幅に伸ばす（結果画面の .wizard-nav と同じ） */
    .pdc-run-row .btn { min-width: 0; flex: 1 1 auto; }
    .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: var(--fs-sm); color: var(--text-muted); }

.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: var(--fs-sm);
}
.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: var(--fs-sm); line-height: 1; }

.hec-check { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-base); 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: var(--fs-sm); 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: 1rem; 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: var(--fs-sm); 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: var(--fs-sm); 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: var(--fs-sm); color: var(--text-muted); 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: var(--fs-sm); 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: var(--fs-xs);
    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: var(--fs-xs); 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: var(--fs-xs); 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: 1rem;
    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: #1771e6; border-color: #1771e6; color: #ffffff; }
.share-btn-x:hover { background: #000000; border-color: #000000; color: #ffffff; }
.share-btn-line:hover { background: #04873a; border-color: #04873a; 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 {
    /* 目次から飛んだとき、画面上部に貼り付いているもの（--fixed-top）の下に見出しが潜らないようにする */
    scroll-margin-top: calc(var(--fixed-top) + var(--space-4));
    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: 1rem;
    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);
}
/* 長い箇条を段落に分けたもの（render_technical_guide に配列で渡した箇条）。段落の間は本文の段落と同じだけ空け、最後は箇条の間隔に任せる */
.tool-technical-guide li > .guide-item-para:last-child { margin-bottom: 0; }

/* ---------- 参考文献の入手先リンク ----------
   参考にした基準書を読者が手に取れるようにするためのもの。出すのは解説記事の
   「参考にした基準・資料」と、ツールの「使用基準・参考文献…」の2か所だけ（src/ReferenceLinks.php）。
   参考文献の文言と地続きに見えると引用の一部と紛れるので、リンクだと分かる形に囲む。
   地色を敷いてサイトのリンク色を使い、灰色の枠だけの状態よりは見えるようにする。
   ただし本文より前へ出さない（字は本文より小さいまま、色も accent-strong まで）。 */
.ref-buy {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 9px;
    border: 1px solid var(--accent-soft);
    border-radius: 999px;
    background: var(--accent-soft);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--accent-strong);
    white-space: nowrap;
}
.ref-buy:hover, .ref-buy:focus-visible {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.article-references-note,
.tool-technical-guide .guide-reference-note {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* ---------- 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; }
/* 狭い画面では文節で折る（390px で「ご報 / 告」と語の途中で折れた） */
.feedback-summary-title { font-size: 0.92rem; font-weight: 700; color: var(--text); word-break: auto-phrase; }
.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: var(--fs-sm); 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: var(--fs-base);
    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; }
/* ファイル欄は既定の幅が文字の大きさで決まり、狭い画面（16px にする 600px 以下）では親より広くなってページが横に送れた */
.feedback-form input[type="file"] { font-size: var(--fs-base); color: var(--text-muted); max-width: 100%; }
#swl-feedback-error[hidden],
#swl-feedback-success[hidden] { display: none; }
#swl-feedback-error { min-height: 0; margin-bottom: var(--space-4); font-size: var(--fs-base); }

@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: var(--fs-base);
    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: var(--fs-xs);
    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: var(--fs-sm);
    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: var(--fs-base);
}
.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: var(--fs-base);
    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: var(--fs-base); }
.bl-data-note { font-size: var(--fs-sm); 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: var(--fs-sm); 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: var(--fs-sm); }
.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: var(--fs-sm); 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; font-size: var(--fs-sm); }
.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: var(--fs-sm); }

.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: var(--fs-sm); }
.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(--fixed-top) + 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: var(--fs-xs);
    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: var(--fs-sm);
    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: var(--fs-base); font-weight: 600; white-space: nowrap; }
.site-updates-more:hover { text-decoration: underline; }

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

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

/* アプリでの絞り込み。JavaScriptが無くてもボタンで送れる通常のフォーム */
.updates-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-sunken);
}
.updates-filter label { font-size: var(--fs-base); font-weight: 700; }
.updates-filter select {
    flex: 1 1 18rem;
    min-width: 0;
    max-width: 100%;
}
.updates-filter-status {
    font-size: var(--fs-base);
    margin: 0 0 var(--space-6);
}
.updates-filter-status a { font-weight: 600; }
.updates-filter-status a:hover { text-decoration: underline; }

/* 複数のアプリにまたがる更新で、対象を1つずつ並べる */
.doc-page .update-item-tools,
.update-item-tools {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
}
.update-item-tools li { margin: 0; }
.update-item-tools a {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.4;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent);
}
.update-item-tools a:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.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: var(--fs-base); font-weight: 600; }
.updates-month-nav a:hover { text-decoration: underline; }

.updates-month {
    margin: 0 0 var(--space-8);
    scroll-margin-top: calc(var(--fixed-top) + 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: var(--fs-sm); 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: var(--fs-sm);
    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; }
    input.layer-input-name { width: 150px; }
    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); }
}

/* ---------- 擁壁の一括計算（L型・重力式に共通） ----------

   擁壁を1タイプずつ表に並べ、全体に共通する条件は表の外（折りたたみ）に置く。
   形式ごとに列は違う（L型は配筋の列と部材の判定があり、重力式は無筋なので両方とも無い）が、
   見た目の作りは共通のため、この1か所で両方をまかなう。表は横スクロールさせない方針。
   本文の幅は --shell-max-width（1296px）で頭打ちになり、パネルの内側で表に使えるのは
   1150pxしかない。列・文字を増やすときは、実画面で収まることを必ず確かめること
   （数値の入力欄1列でおよそ62px、判定の内訳1行でおよそ25px増える）。 */

.wall-batch-common { max-width: none; padding: 0; margin-bottom: var(--space-5); }
.wall-batch-common-summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    cursor: pointer;
    list-style: none;
}
.wall-batch-common-summary::-webkit-details-marker { display: none; }
.wall-batch-common-summary::before {
    content: '▾';
    color: var(--text-faint);
    transition: transform 0.15s;
}
.wall-batch-common:not([open]) .wall-batch-common-summary::before { transform: rotate(-90deg); }
.wall-batch-common-title { font-size: 1rem; font-weight: 700; }
.wall-batch-common-note { font-size: var(--fs-xs); color: var(--text-muted); }

/* 共通条件のグループは項目数がまちまち（基礎幅は1項目、許容値は10項目）。
   グリッドで並べると行の高さが最も高いグループに揃い、短いグループの下が大きく空いて
   全体が縦に伸びる。段組み（columns）にして、グループを上から詰めて流し込む。 */
.wall-batch-common-groups {
    columns: 240px 4;
    column-gap: var(--space-5);
    padding: 0 var(--space-6) var(--space-6);
}
.wall-batch-common-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4) var(--space-4);
    min-width: 0;
    /* グループが段の境目で分断されないようにする */
    break-inside: avoid;
    margin: 0 0 var(--space-5);
}
.wall-batch-common-group legend {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-muted);
    padding: 0 var(--space-2);
}
.wall-batch-common-grid { max-width: none; }

.wall-batch-table-panel { max-width: none; }
.wall-batch-table-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.wall-batch-table-title { margin: 0; font-size: 1rem; }
.wall-batch-row-actions { display: flex; align-items: center; gap: var(--space-3); }

/* 列見出しは項目名と単位を2段にする。行の高さは変わらず、単位のぶんの列幅も増えない。
   項目名は折り返してよい（.table-scroll の nowrap を打ち消す）。「竪壁主鉄筋径」の
   ような長い名前でも、折り返せば列幅は入力欄の幅のままで済み、表全体は広がらない。 */
.wall-batch-table th { vertical-align: bottom; }
.wall-batch-th-name { display: block; white-space: normal; }
.wall-batch-th-unit { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-faint); }
.wall-batch-th-del { width: 28px; }
.wall-batch-delcell { width: 28px; }
.wall-batch-no { color: var(--text-muted); }

/* 基礎幅の自動計算中は編集できない（値は送信する必要があるので readOnly にしている） */
.wall-batch-cell-auto .layer-input:read-only { background: transparent; color: var(--text-faint); }

/* 「形状の詳細」。3行の要約を出すボタンで、押すとモーダルが開く。
   設定の有無で行数が変わっても高さがそろうよう、各行に最小の高さを持たせる */
.wall-batch-shape-btn {
    display: block;
    width: 100%;
    padding: 2px 6px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text);
    text-align: left;
}
.wall-batch-shape-btn:hover { border-color: var(--accent-strong); }
.wall-batch-shape-lines {
    display: block;
    font-size: var(--fs-xs);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.wall-batch-shape-lines span { display: block; white-space: nowrap; min-height: 1.35em; }

/* 判定は「安定（転倒・偏心・滑動）」「部材（竪壁・底版）」の内訳を縦に並べ、NGだけを目立たせる */
.wall-batch-judgecell, .wall-batch-qmax, .wall-batch-totalcell { white-space: nowrap; }
.wall-batch-judge {
    display: inline-block;
    font-size: var(--fs-xs);
    line-height: 1.35;
    text-align: left;
}
.wall-batch-judge span { display: block; white-space: nowrap; }
.wall-batch-judge .wall-batch-ok { color: var(--text-muted); }
.wall-batch-judge .wall-batch-ng { color: var(--judge-ng); font-weight: 700; }
.wall-batch-judge-none { color: var(--text-faint); }
.wall-batch-qmax { font-variant-numeric: tabular-nums; }
/* 合力が底面中央の2/3の範囲の外にあるときの「算定範囲外」。列幅を広げないよう判定セルと同じ小さい字にする */
.wall-batch-qmax-note { font-size: var(--fs-xs); color: var(--judge-warn); font-weight: 700; }
/* 基礎幅の自動計算で条件を満たす幅が見つからなかった行の、基礎幅の欄 */
.wall-batch-cell-warn { background: var(--judge-warn-soft); }
.wall-batch-cell-warn .layer-input:read-only { color: var(--judge-warn); font-weight: 700; }
/* 表の下に出す「条件を満たす幅が見つからなかった擁壁」の案内。表の下端に接しないよう間を空ける */
.wall-batch-notice { margin-top: var(--space-4); }

.wall-batch-total-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
}
.wall-batch-total-more { font-size: var(--fs-xs); color: var(--accent-strong); text-decoration: underline; }
.wall-batch-total-btn:hover .wall-batch-total-more { text-decoration: none; }

.wall-batch-input-error { border-color: var(--danger); }
.wall-batch-row-error > td { background: var(--danger-soft); }

.wall-batch-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}
.wall-batch-detail-head { font-weight: 700; margin: 0 0 var(--space-3); }
.wall-batch-detail-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* 「形状の詳細」モーダル: 左に寸法のポンチ絵、右に入力欄。
   記号（H3・T2・T3・f1・法担ぎ）は図が無いと何を指すのか分からないため、
   単体ツールのウィザードと同じ図を入力欄の隣に置く。 */
.wall-batch-shape-body {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(240px, 1fr);
    gap: var(--space-5);
    align-items: start;
}
.wall-batch-shape-sketches { display: grid; gap: var(--space-3); }
.wall-batch-shape-fields { min-width: 0; }
@media (max-width: 700px) {
    .wall-batch-shape-body { grid-template-columns: 1fr; }
}

/* 表のすぐ上に置く「寸法記号の意味」。列見出しのH1・T1・H2・Bが何を指すのかは
   図が無いと分からないため、折りたたまずに常に出しておく。 */
.wall-batch-sketch-block {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-top: var(--space-4);
}
.wall-batch-sketch-title {
    margin: 0;
    font-size: 1rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.wall-batch-sketch-block .wizard-sketch { max-width: 260px; margin: 0; }

/* ---- 断面図の下に出す計算結果の概要（L型擁壁） ----
   入力するそばからブラウザ側（WebAssembly）で計算して出す。判定と主要な数値だけを
   載せ、照査の内訳・帳票は「計算結果詳細」でサーバー側の計算を正として表示する。
   プレビューのパネルはstickyで、フルHDでは断面図と合わせて画面に収める必要があるため、
   文字も行間も本文より一段小さくしている。 */
.lw-live-result {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}
.lw-live-result .lw-preview-head { margin-bottom: var(--space-2); }
.lw-live-status { font-size: var(--fs-xs); font-weight: 700; }
.lw-live-status-ok { color: var(--judge-ok); }
.lw-live-status-ng { color: var(--judge-ng); }
.lw-live-note {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.45;
}
.lw-live-auto {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.4;
}
.lw-live-heading {
    margin: var(--space-2) 0 2px;
    font-size: var(--fs-xs);
    font-weight: 700;
}
.lw-live-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-xs);
    line-height: 1.35;
}
.lw-live-table + .lw-live-table { margin-top: 4px; }
/* 項目名は折り返す。値と判定の列は折り返さない（折り返さない項目名が長いと、判定の印がパネルの右端からはみ出す。
   文字を 14px にした 2026-09-30 に、調整池・重力式・もたれ式の概要で 1920px でもはみ出した） */
.lw-live-table th {
    padding: 1px var(--space-2) 1px 0;
    font-weight: 400;
    text-align: left;
    color: var(--text-muted);
}
.lw-live-table td { padding: 1px 0; }
.lw-live-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* 狭い画面でも、値は折らない（折ると「4.19 ≧ / 1.50」「照査不要（水 / 平力なし）」と値と許容値が別の行に分かれた）。
   括弧つきの長い値（もたれ式の「最大 σ = 0.06 N/mm2（天端から 1.240 m）」は 320px で画面の右へはみ出した）だけ、
   描く側で .lw-live-value-wrap を付けて語の切れ目で折る */
@media (max-width: 575px) {
    .lw-live-value-wrap { white-space: normal; }
}
.lw-live-judge { width: 3.2em; text-align: right; }
/* 概要の判定バッジは行数が多いため、本文中のものより小さくする */
.lw-live-table .status-badge { padding: 0 6px; font-size: var(--fs-xs); }
/* 応力度の3項目は1行にまとめる。満たさないものだけ色を変えて拾えるようにする。 */
.lw-live-table td.lw-live-stress { padding: 0 0 3px; }
.lw-live-stress-item {
    display: inline-block;
    margin-right: var(--space-3);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.lw-live-stress-item.is-ng { color: var(--judge-ng); font-weight: 700; }
/* 概要を下に置くパネルでは、断面図と概要を合わせてフルHDの画面内に収める。
   SVGはviewBoxを持つため、高さを抑えると図全体が中央で縮んで収まる。 */
/* 横に長い断面（雨水調整池・U型水路）は、図の入れ物の style で --fit-max-h を低くして収める（文字を大きくした図は縦に伸び、285px では収まらなかった） */
.drawing-panel:has(#live-result) .wall-drawing-svg { max-height: var(--fit-max-h, 285px); }
/* 階段擁壁の入力中は、中詰なし／中詰ありのタブのぶん図を 250px に抑えて 1920×940 に収める（結果表示中は下半分が短い凡例に替わるので 285px のまま） */
.drawing-panel:has(#wall-drawing-tabs:not([hidden])):has(#sidebar-result-panel[hidden]) .wall-drawing-svg { max-height: 250px; }
/* 見出しの行に3Dプレビューの起動ボタンを載せる（「断面図」の見出しを別に立てない）。 */
.drawing-panel-header-actions { align-items: center; margin-bottom: var(--space-2); }
/* 概要から詳細・関連ツールへ進む導線。左カラム下部の同じボタンと対になる。 */
.lw-live-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.lw-live-actions[hidden] { display: none; }
.lw-live-actions .btn { flex: 1; white-space: nowrap; }

/* ---- 計算結果を表示している間の図（L型擁壁） ----
   断面図に重ねる土圧・地盤反力・すべり面と、部材の断面。
   重ね描きは結果があるときだけ入るため、入力中の断面図は素のまま。 */
/* 土圧の分布は1つの台形として1色で塗る（上端が上載荷重ぶん、下端はそれに土ぶんを
   足した幅）。土ぶんと上載荷重ぶんを濃淡や境界線で分けると、2つの図形が重なって
   見えてしまうため分けない。内訳の数値は凡例に出す。 */
.wall-result-overlay .ep-fill-soil { fill: rgba(37, 99, 235, 0.20); stroke: #2563eb; stroke-width: 1; }
.wall-result-overlay .ep-arrow { stroke: #2563eb; stroke-width: 1; }
.wall-result-overlay .ep-resultant { stroke: #1d4ed8; stroke-width: 1.8; }
/* 竪壁の部材計算に使う土圧。安定計算の土圧（青）と重なることがあるので色を変える */
.wall-result-overlay .stem-ep-fill { fill: rgba(217, 119, 6, 0.24); stroke: #d97706; stroke-width: 1; }
.wall-result-overlay .stem-ep-arrow { stroke: #d97706; stroke-width: 1; }
.wall-result-overlay .stem-ep-resultant { stroke: #b45309; stroke-width: 1.8; }
.wall-result-overlay .stem-ep-base { stroke: #d97706; stroke-width: 1.4; stroke-dasharray: 4 2; }
.wall-result-overlay .reaction-fill { fill: rgba(21, 128, 61, 0.18); stroke: #15803d; stroke-width: 1; }
.wall-result-overlay .reaction-arrow { stroke: #15803d; stroke-width: 1; }
.wall-result-overlay .reaction-resultant { stroke: #166534; stroke-width: 1.8; }
/* すべり面は安定計算・竪壁の部材計算とも同じ赤。平行な2本で、違うのは起点だけ */
.wall-result-overlay .slip-line,
.wall-result-overlay .slip-line-stem { stroke: #b91c1c; stroke-width: 1.4; stroke-dasharray: 6 3; }
.wall-result-overlay .slip-arc,
.wall-result-overlay .slip-arc-stem { fill: none; stroke: #b91c1c; stroke-width: 1; }
/* もたれ式擁壁だけが持つ2つ。壁面地盤反力は背面地盤が壁を前面側へ押し返す力で、
   土圧とは向きが逆になる。照査断面は躯体の水平断面5か所を示す線。 */
.wall-result-overlay .wall-reaction-fill { fill: rgba(124, 58, 237, 0.18); stroke: #7c3aed; stroke-width: 1; }
.wall-result-overlay .wall-reaction-arrow { stroke: #7c3aed; stroke-width: 1; }
/* U字断面（U型擁壁・階段擁壁・U型水路・雨水調整池）だけが持つ、内空側から側壁を
   押し返す荷重。背面の土圧に抵抗する向きに働くので色を分ける。 */
.wall-result-overlay .inner-soil-fill { fill: rgba(13, 148, 136, 0.20); stroke: #0d9488; stroke-width: 1; }
.wall-result-overlay .inner-water-fill { fill: rgba(14, 165, 233, 0.22); stroke: #0ea5e9; stroke-width: 1; }
/* 背面の静水圧と、底版下面の揚圧力。土圧・地盤反力と区別できるよう水色にする。 */
.wall-result-overlay .inner-soil-arrow { stroke: #0d9488; stroke-width: 1; }
.wall-result-overlay .inner-water-arrow { stroke: #0ea5e9; stroke-width: 1; }
.wall-result-overlay .water-fill { fill: rgba(14, 165, 233, 0.22); stroke: #0ea5e9; stroke-width: 1; }
.wall-result-overlay .uplift-fill { fill: rgba(14, 165, 233, 0.16); stroke: #0ea5e9; stroke-width: 1; }
.wall-result-overlay .uplift-arrow { stroke: #0ea5e9; stroke-width: 1; }
.wall-result-overlay .section-line { stroke: #64748b; stroke-width: 1; stroke-dasharray: 3 2; }
.wall-result-overlay .section-line-ng { stroke: #b91c1c; stroke-width: 1.6; }
.wall-result-overlay .ep-label { font-size: 9.5px; fill: var(--text); font-weight: 600; }
.wall-result-overlay .ep-label-sub { font-size: 9px; fill: var(--text-muted); }

/* 断面図に重ねた図の凡例。色見本・名前・値の3列でそろえる。 */
.lw-legend { list-style: none; margin: 0; padding: 0; }
.lw-legend-item {
    display: grid;
    grid-template-columns: 14px 6.4em 1fr;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    line-height: 1.5;
}
.lw-legend-swatch { display: block; height: 9px; border-radius: 2px; }
.lw-legend-swatch.is-soil { background: rgba(37, 99, 235, 0.20); border: 1px solid #2563eb; }
.lw-legend-swatch.is-stem { background: rgba(217, 119, 6, 0.24); border: 1px solid #d97706; }
.lw-legend-swatch.is-reaction { background: rgba(21, 128, 61, 0.22); border: 1px solid #15803d; }
.lw-legend-swatch.is-slip { height: 0; border-top: 2px dashed #b91c1c; }
.lw-legend-swatch.is-wall-reaction { background: rgba(124, 58, 237, 0.20); border: 1px solid #7c3aed; }
.lw-legend-swatch.is-section { height: 0; border-top: 2px dashed #64748b; }
/* 検討ケースが複数あるツールで、断面図を並べたときの見出し */
.wall-drawing-caption { margin: 14px 0 2px; font-size: var(--fs-base); font-weight: 600; color: #475569; }
.wall-drawing-caption:first-child { margin-top: 0; }
.lw-legend-swatch.is-inner-soil { background: rgba(13, 148, 136, 0.20); border: 1px solid #0d9488; }
.lw-legend-swatch.is-inner-water { background: rgba(14, 165, 233, 0.22); border: 1px solid #0ea5e9; }
.lw-legend-swatch.is-water { background: rgba(14, 165, 233, 0.22); border: 1px solid #0ea5e9; }
.lw-legend-swatch.is-uplift { background: rgba(14, 165, 233, 0.16); border: 1px solid #0ea5e9; }
.lw-legend-swatch.is-moment { background: rgba(147, 51, 234, 0.20); border: 1px solid #9333ea; }
.lw-legend-name { color: var(--text-muted); }
.lw-legend-value { font-variant-numeric: tabular-nums; }

.lw-rc-sections { display: flex; flex-direction: column; gap: var(--space-2); }
.rc-section-svg { width: 100%; height: auto; display: block; }
.rc-section-svg .concrete-fill { fill: var(--surface-sunken); stroke: var(--text); stroke-width: 1.2; }
.rc-section-svg .rebar-dot { fill: #b91c1c; }
.rc-section-svg .rc-dim { stroke: var(--text-muted); stroke-width: 1; }
.rc-section-svg .rc-title { font-size: 10px; fill: var(--text); font-weight: 700; }
.rc-section-svg .rc-dim-label { font-size: 9px; fill: var(--text-muted); }
.rc-section-svg .rc-spec { font-size: 10px; fill: var(--text); font-weight: 600; }
.rc-section-svg .rc-spec-sub { font-size: 9px; fill: var(--text-muted); }
.rc-section-svg .rc-stress { font-size: 9.5px; fill: var(--text-muted); }
.rc-section-svg .rc-stress.is-ng { fill: var(--judge-ng); font-weight: 700; }
/* L型擁壁は部材の断面を枠の幅に合わせて1:1で描く（tools/l-shaped-retaining-wall/assets/result-diagrams.js の rcSection）ので、
   文字は画面上の大きさで書く。ほかのツールの部材の断面（縮めて描く）はこの class を持たない */
.rc-section-fit .rc-title,
.rc-section-fit .rc-spec { font-size: 12px; }
.rc-section-fit .rc-spec-sub,
.rc-section-fit .rc-stress,
.rc-section-fit .rc-dim-label { font-size: 11.5px; }

/* ============================================================
   本サイトの概要（pages/about）
   初めて来た人へ利点を伝えるページなので、他のdoc-pageより装飾を強くする。
   色・角丸・余白は既存の変数だけで組み、このページ専用の色は増やさない。
   ============================================================ */
/* カードを2列に並べるので、他の案内ページより広く取る。中央寄せは .doc-page 側で効く。 */
.about-page { max-width: 1000px; }

.about-lede {
    font-size: 1.06rem;
    line-height: 1.9;
    padding: var(--space-4);
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
}

/* 「こんなときに使えます」。悩みを見出しに、答えを色付きの行にする。 */
.about-cases,
.about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-5);
}
.about-case,
.about-feature {
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.about-case > p,
.about-feature > p { margin: 0 0 var(--space-2); }
.about-case > p:last-child,
.about-feature > p:last-child { margin-bottom: 0; }

.about-case-title,
.about-feature-title {
    margin: 0 0 var(--space-2);
    font-size: 1.02rem;
    line-height: 1.6;
}
/* 悩みの見出しには鉤括弧的な目印を付け、答えと見分けやすくする */
.about-case-title { padding-left: 1.5em; text-indent: -1.5em; }
.about-case-title::before { content: "？"; color: var(--accent); font-weight: 700; margin-right: 0.5em; }
.about-feature-title::before { content: "◆"; color: var(--accent); margin-right: 0.5em; }

.about-case-answer {
    padding: var(--space-2) var(--space-3);
    background: var(--judge-ok-soft);
    border-radius: var(--radius);
    color: var(--judge-ok);
    font-weight: 600;
}

/* 主な対象を1枚の枠で見せる。立場の文言は for_personas() から起こしている。 */
.about-target {
    margin: var(--space-4) 0 var(--space-5);
    padding: var(--space-4);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.about-target-line { margin: 0; }

/* 無料の理由。読み飛ばされやすいので、行頭を強調して要点だけ拾えるようにする。 */
.about-reasons {
    list-style: none;
    margin: var(--space-3) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.about-reasons > li {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    line-height: 1.85;
}
.about-reasons strong { color: var(--accent-strong); }

/* アプリ一覧への導線 */
.about-cta { margin: var(--space-5) 0; text-align: center; }
.about-cta-button {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}
.about-cta-button:hover,
.about-cta-button:focus-visible { background: var(--accent-strong); color: #fff; }

@media (max-width: 700px) {
    .about-cases,
    .about-features { grid-template-columns: 1fr; }
}

/* ---------- 近隣ボーリングデータの取得 ---------- */
/* 左に「地点と範囲」「結果と詳細」の2枚、右に地図（2行ぶんを占めて画面に貼り付く）。
   1列のときは「地点と範囲 → 地図 → 結果と詳細」の順にする（DOM の順ではなく領域で並べる）。 */
.nb-layout {
    display: grid;
    grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
    grid-template-areas: "top map" "list map";
    grid-template-rows: auto 1fr;
    gap: var(--space-5);
    align-items: start;
}
.nb-layout .panel { max-width: none; min-width: 0; padding: var(--space-5); }
.nb-side-top { grid-area: top; }
.nb-side-list { grid-area: list; }
.nb-map-card {
    grid-area: map;
    position: sticky;
    top: calc(var(--fixed-top) + var(--space-4));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: calc(100vh - var(--fixed-top) - var(--space-8));
    min-height: 420px;
}
.nb-map { flex: 1 1 auto; min-height: 0; border: 1px solid var(--border); border-radius: 10px; z-index: 0; }
/* .panel h2（margin の上が 0）より強くする */
.nb-panel .nb-step { margin-top: var(--space-6); }

.nb-address-row { display: flex; gap: var(--space-2); }
.nb-address-row input { flex: 1 1 auto; min-width: 0; }
.nb-credit-line a { color: var(--accent); }
.nb-candidates { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 4px; }
.nb-candidate {
    width: 100%; text-align: left; padding: 7px 10px; font-size: var(--fs-base);
    background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer;
}
.nb-candidate:hover, .nb-candidate:focus-visible { background: var(--accent-soft); border-color: var(--accent); }

.nb-radius-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.nb-radius { position: relative; }
.nb-radius input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nb-radius span {
    display: inline-block; padding: 6px 12px; font-size: var(--fs-base);
    border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer;
}
.nb-radius span:hover { background: var(--surface-hover); }
.nb-radius input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.nb-radius input:focus-visible + span { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.nb-summary { margin: 0 0 var(--space-2); font-size: var(--fs-base); color: var(--text-muted); }
.nb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 360px; overflow-y: auto; }
.nb-item {
    width: 100%; display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; grid-template-areas: "no title badge" "no meta badge";
    column-gap: var(--space-2); align-items: center; text-align: left; padding: 7px 10px;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-base);
}
.nb-item:hover { background: var(--surface-hover); }
.nb-item:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.nb-item.is-selected { border-color: var(--judge-warn); background: var(--judge-warn-soft); }
.nb-item-no { grid-area: no; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nb-item-title { grid-area: title; overflow-wrap: anywhere; }
.nb-item-meta { grid-area: meta; font-size: var(--fs-sm); color: var(--text-muted); }
.nb-badge { grid-area: badge; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.nb-badge-xml { background: var(--accent-soft); color: var(--accent-strong); }
.nb-badge-none { background: var(--judge-none-soft); color: var(--judge-none); }

.nb-detail { font-size: var(--fs-base); }
.nb-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--space-3); margin: 0 0 var(--space-3); }
.nb-dl dt { color: var(--text-muted); }
.nb-dl dd { margin: 0; overflow-wrap: anywhere; }
.nb-detail-note { margin: 0 0 var(--space-2); }
.nb-file-label { display: block; margin-bottom: 2px; color: var(--text-muted); }
#nb-file-select { width: 100%; margin-bottom: var(--space-3); }
.nb-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.nb-actions .btn:disabled { opacity: 1; background: var(--judge-none-soft); color: var(--judge-none); border-color: var(--border); cursor: progress; }

.nb-notes { font-size: var(--fs-base); line-height: 1.7; }
.nb-notes ul { margin: 0; padding-left: 1.2em; }
.nb-notes li + li { margin-top: 4px; }
.nb-source p { margin: 0 0 var(--space-2); font-weight: 600; }

/* 地図の印（L.divIcon）。一覧と同じ番号を入れる。白い縁と影で、寄った地図の上でも埋もれないようにする */
/* leaflet.css が後から .leaflet-marker-icon { display: block } を当てるので、中央寄せは中の span で行う。
   大きさ（iconSize）の内側に枠を収めないと、位置（iconAnchor）が枠の分だけずれる */
.nb-pin { box-sizing: border-box; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(16, 24, 40, .55), 0 2px 5px rgba(16, 24, 40, .35); color: #fff; font-weight: 700; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
.nb-pin span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.nb-pin-xml { background: #1955c0; }
.nb-pin-none { background: #5c6672; }
.nb-pin.is-selected { background: #8a5a00; border-width: 3px; font-size: 14px; }
.nb-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); }
.nb-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.nb-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--border-strong); }
.nb-dot-center { background: #b3261e; }
.nb-dot-xml { background: #1955c0; }
.nb-dot-none { background: #5c6672; }
.nb-dot-selected { background: #8a5a00; }

@media (max-width: 900px) {
    .nb-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "map" "list"; grid-template-rows: auto; }
    .nb-map-card { position: static; height: 62vh; min-height: 320px; }
    .nb-list { max-height: none; }
}
@media (max-width: 600px) {
    .nb-layout .panel { padding: var(--space-4); }
    .nb-address-row { flex-direction: column; }
}
/* 地図の出典表示。leaflet.css の既定（半透明の白地・#0078A8）では、地図の地色によって 4.5:1 を割りうるので、下地を濃くして色も濃くする。
   下地を完全に不透明（#fff）にすると、axe-core（contrast.sh）の判定がこのページ全体で止まる（2026-09-28 に実測。1 か所しか測らなくなる）ので、わずかに透かす */
/* 字は leaflet.css の既定（12px）から、画面の文字の下限（14px）へ上げる */
.nb-map.leaflet-container .leaflet-control-attribution { background: rgba(255, 255, 255, .94); font-size: var(--fs-sm); }
.nb-map.leaflet-container .leaflet-control-attribution a { color: var(--accent-strong); }