/*
 * fp-univ.css — FP-UNIV Design System
 *
 * Replaces: no-responsive-main.css, themes.css, spring.css, sidebar-collapse.css,
 *           bootstrap.min.css, bootstrap-nonresponsive.css
 *
 * Sections:
 *   1. Design Tokens & Reset
 *  1b. Bootstrap Compat (grid, forms, tables, buttons, modals, nav, dropdowns, etc.)
 *  1c. Layout Patterns (design system: layout-2col, card, form-stack, etc.)
 *   2. Layout
 *   3. Sidebar
 *   4. Sidebar Collapse
 *   5. Navbar
 *   6. Blocks & Cards
 *   7. Forms
 *   8. Tables
 *   9. Buttons
 *  10. Dashboard
 *  11. Page-specific
 *  12. Customers List
 *  13. Utilities & Print
 */

/* =================================================================
   1. DESIGN TOKENS & RESET
   ================================================================= */

:root {
    /* ブランドカラー史:
       1. pre-bc3ac9056: 緑 (#5aad7a / #478c63 / #edf5ef)
       2. bc3ac9056 (2026-04-23): teal (#41C9B4) — WCAG 1.4.3 (1.94:1) 違反のため不採用
       3. 緑系へ revert
       4. wizard の青系トークン (H 198°-210°) と全社統一 ← 現在
       teal は廃止。wizard で確立した青 (--brand-dark #1F5D7A は AAA 7.27:1) を
       全社のブランド色として root に昇格、wizard scope の上書きは削除した。
       FP電卓モーダル / FAB hover / モード切替 / 年代バー等のロゴ派生シアン
       (#2595B1 / #176D82) は別系統のアクセント色として独立スコープで維持。 */
    --brand: #3A8DB1;      /* H 198° / S 49% / L 46% — 装飾アクセント (非テキスト) */
    --brand-dark: #1F5D7A; /* H 202° / S 59% / L 30% — AAA 7.27:1 on white, テキスト可 */
    --brand-light: #eaf2f8;/* H 210° — 提案書 PDF と統一されたサーフェス淡青 */
    /* フォーカスリング (WCAG 2.4.7 Focus Visible / 1.4.11 Non-text Contrast)
       halo は box-shadow で外側に重ねるため既存 border と干渉しない。
       brand-dark 由来の半透明。45% で背景白に対し十分な視認性。
       use: `outline: none; box-shadow: var(--focus-ring);` on :focus-visible */
    --focus-ring: 0 0 0 3px rgba(31, 93, 122, 0.45);
    --focus-ring-info: 0 0 0 3px rgba(52, 152, 219, 0.45); /* wiz-btn-fetch 系 (info 色) */
    --focus-ring-neutral: 0 0 0 3px rgba(52, 74, 61, 0.35); /* wiz-btn-export 系 (neutral) */
    --gray-50: #fafbfc;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #868e96;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --text: var(--gray-800);
    --text-muted: var(--gray-600);
    --border: var(--gray-200);
    --info: #3498db;
    --warning: #f39c12;
    --danger: #e74c3c;
    --mangaichi: rgba(255, 218, 185, 0.6);
    --mangaichi-dark: #7a3d2a;
    --mangaichi-border: #e0a89e;
    --mangaichi-accent: #c0392b;
    /* フローナビ カラー */
    --flow-income: #3498db;     --flow-income-bg: #ebf5fb;
    --flow-disposable: #27ae60; --flow-disposable-bg: #eafaf1;
    --flow-spending: #e67e22;   --flow-spending-bg: #fef5e7;
    --flow-saving: #16a085;     --flow-saving-bg: #e8f8f5;
    --flow-asset: #8e44ad;      --flow-asset-bg: #f5eef8;
    --sidebar-w: 220px;
    --input-bg: #fffde7;
    --sidebar-collapsed-w: 60px;
    --radius: 6px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    overflow-y: overlay;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #344a3d;
    font-size: 13px;
    background-color: #fff;
    margin: 0;
}

:focus { outline: 0 !important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small {
    font-weight: 300;
    color: #777;
}
h1, h2, h3 { margin-bottom: 15px; }
h4 { font-weight: bold; line-height: 1.6em; }
h5 { font-weight:bold; font-size:15px;}
b, strong { font-weight: 600; }
p { line-height: 1.6; }
article p { font-size: 16px; line-height: 1.8; }
ul, ol { padding-left: 30px; }
label { font-weight: 600; }
blockquote {
    margin: 20px 0;
    padding: 30px 60px 30px 20px;
    position: relative;
    width: 100%;
    border-left-width: 3px;
    border-color: #ebf2ee;
}
blockquote:before {
    display: block; content: "\201D"; font-family: serif;
    font-size: 96px; position: absolute; right: 10px; top: -30px; color: #ebf2ee;
}

/* Links — brand green */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
.text-primary, .text-primary:hover, a, a:hover, a:focus { color: var(--brand); }
.text-danger, .text-danger:hover, a.text-danger, a.text-danger:hover, a.text-danger:focus { color: var(--danger); }
.text-warning, .text-warning:hover, a.text-warning, a.text-warning:hover, a.text-warning:focus { color: #e67e22; }
.text-success, .text-success:hover, a.text-success, a.text-success:hover, a.text-success:focus { color: #27ae60; }
.text-info, .text-info:hover, a.text-info, a.text-info:hover, a.text-info:focus { color: var(--info); }
.text-muted, .text-muted:hover, a.text-muted, a.text-muted:hover, a.text-muted:focus { color: #999; }


/* =================================================================
   1b. BOOTSTRAP 3 COMPAT
   Minimal subset of Bootstrap 3.1.1 rules actually used by views.
   ================================================================= */

/* ── Grid ── */
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }
.container::after { display: table; clear: both; content: ""; }
.row { margin-left: -15px; margin-right: -15px; }
.row::after { display: table; clear: both; content: ""; }
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,
.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,
.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,
.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 {
    position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px;
}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,
.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 { float: left; }
.col-xs-1  { width: 8.33333%; }
.col-xs-2  { width: 16.66667%; }
.col-xs-3  { width: 25%; }
.col-xs-4  { width: 33.33333%; }
.col-xs-5  { width: 41.66667%; }
.col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.33333%; }
.col-xs-8  { width: 66.66667%; }
.col-xs-9  { width: 75%; }
.col-xs-10 { width: 83.33333%; }
.col-xs-11 { width: 91.66667%; }
.col-xs-12 { width: 100%; }
.col-xs-pull-0  { right: auto; }
.col-xs-pull-6  { right: 50%; }
.col-xs-pull-12 { right: 100%; }
.col-xs-push-0  { left: auto; }
.col-xs-push-6  { left: 50%; }
.col-xs-push-12 { left: 100%; }
.col-xs-offset-0  { margin-left: 0; }
.col-xs-offset-1  { margin-left: 8.33333%; }
.col-xs-offset-2  { margin-left: 16.66667%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-4  { margin-left: 33.33333%; }
.col-xs-offset-6  { margin-left: 50%; }
@media (min-width: 768px) {
    .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,
    .col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 { float: left; }
    .col-sm-1  { width: 8.33333%; }
    .col-sm-2  { width: 16.66667%; }
    .col-sm-3  { width: 25%; }
    .col-sm-4  { width: 33.33333%; }
    .col-sm-5  { width: 41.66667%; }
    .col-sm-6  { width: 50%; }
    .col-sm-7  { width: 58.33333%; }
    .col-sm-8  { width: 66.66667%; }
    .col-sm-9  { width: 75%; }
    .col-sm-10 { width: 83.33333%; }
    .col-sm-11 { width: 91.66667%; }
    .col-sm-12 { width: 100%; }
    .col-sm-offset-0 { margin-left: 0; }
    .col-sm-offset-1 { margin-left: 8.33333%; }
    .col-sm-offset-2 { margin-left: 16.66667%; }
    .col-sm-offset-3 { margin-left: 25%; }
    .col-sm-offset-4 { margin-left: 33.33333%; }
    .col-sm-offset-6 { margin-left: 50%; }
}
@media (min-width: 992px) {
    .container { width: 970px; }
    .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
    .col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 { float: left; }
    .col-md-1  { width: 8.33333%; }
    .col-md-2  { width: 16.66667%; }
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.33333%; }
    .col-md-5  { width: 41.66667%; }
    .col-md-6  { width: 50%; }
    .col-md-7  { width: 58.33333%; }
    .col-md-8  { width: 66.66667%; }
    .col-md-9  { width: 75%; }
    .col-md-10 { width: 83.33333%; }
    .col-md-11 { width: 91.66667%; }
    .col-md-12 { width: 100%; }
    .col-md-offset-0 { margin-left: 0; }
    .col-md-offset-1 { margin-left: 8.33333%; }
    .col-md-offset-2 { margin-left: 16.66667%; }
    .col-md-offset-3 { margin-left: 25%; }
    .col-md-offset-4 { margin-left: 33.33333%; }
    .col-md-offset-6 { margin-left: 50%; }
}
@media (min-width: 1200px) {
    .container { width: 1170px; }
    .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,
    .col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 { float: left; }
    .col-lg-1  { width: 8.33333%; }
    .col-lg-2  { width: 16.66667%; }
    .col-lg-3  { width: 25%; }
    .col-lg-4  { width: 33.33333%; }
    .col-lg-5  { width: 41.66667%; }
    .col-lg-6  { width: 50%; }
    .col-lg-7  { width: 58.33333%; }
    .col-lg-8  { width: 66.66667%; }
    .col-lg-9  { width: 75%; }
    .col-lg-10 { width: 83.33333%; }
    .col-lg-11 { width: 91.66667%; }
    .col-lg-12 { width: 100%; }
    .col-lg-offset-0 { margin-left: 0; }
    .col-lg-offset-2 { margin-left: 16.66667%; }
    .col-lg-offset-3 { margin-left: 25%; }
}

/* ── Forms ── */
.form-group { margin-bottom: 15px; }
.form-group::after { display: table; clear: both; content: ""; }
.form-control {
    display: block; width: 100%; height: 34px; padding: 6px 12px;
    font-size: 14px; line-height: 1.42857; color: #555;
    background-color: #fff; background-image: none;
    border: 1px solid #ccc; border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); }
.form-control::-webkit-input-placeholder { color: #999; }
.form-control:-ms-input-placeholder { color: #999; }
.form-control::placeholder { color: #999; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    cursor: not-allowed; background-color: #eee; opacity: 1;
}
select.form-control { -webkit-appearance: none; appearance: none; }
textarea.form-control { height: auto; }
.form-horizontal .control-label { text-align: right; padding-top: 7px; margin-bottom: 0; }
.form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }
.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
.form-inline .input-group { display: inline-table; vertical-align: middle; }
.form-inline .btn { vertical-align: middle; }
.input-group { position: relative; display: table; border-collapse: separate; }
.input-group .form-control { position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0; }
.input-group .form-control,
.input-group-addon,
.input-group-btn { display: table-cell; }
.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) { border-radius: 0; }
.input-group-addon, .input-group-btn { width: 1%; white-space: nowrap; vertical-align: middle; }
.input-group-addon {
    padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1;
    color: #555; text-align: center; background-color: #eee; border: 1px solid #ccc; border-radius: 4px;
}
.input-group-addon:first-child { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-addon:last-child { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group .form-control:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .form-control:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-btn { position: relative; font-size: 0; white-space: nowrap; }
.input-group-btn > .btn { position: relative; }
.input-group-btn:first-child > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-btn:last-child > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; }
.radio, .checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; }
.radio label, .checkbox label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: 400; cursor: pointer; }
.radio input[type="radio"], .checkbox input[type="checkbox"] { position: absolute; margin-left: -20px; margin-top: 4px; }
.radio-inline, .checkbox-inline { display: inline-block; padding-left: 20px; margin-bottom: 0; vertical-align: middle; font-weight: 400; cursor: pointer; }
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-top: 0; margin-left: 10px; }
.has-success .help-block, .has-success .control-label { color: #3c763d; }
.has-warning .help-block, .has-warning .control-label { color: #8a6d3b; }
.has-error .help-block, .has-error .control-label { color: #a94442; }

/* ── Tables ── */
.table { width: 100%; max-width: 100%; margin-bottom: 20px; }
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td { padding: 8px; line-height: 1.42857; vertical-align: top; border-top: 1px solid #ddd; }
.table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #ddd; }
.table > caption + thead > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td { border-top: 0; }
.table > tbody + tbody { border-top: 2px solid #ddd; }
.table-condensed > thead > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td { padding: 5px; }
.table-bordered { border: 1px solid #ddd; }
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td { border: 1px solid #ddd; }
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td { border-bottom-width: 2px; }
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th { background-color: #f9f9f9; }
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th { background-color: #f5f5f5; }
.table-responsive { min-height: .01%; overflow-x: auto; }
@media (max-width: 767px) {
    .table-responsive { width: 100%; margin-bottom: 15px; overflow-y: hidden; border: 1px solid #ddd; }
}

/* ── Buttons ── */
.btn {
    display: inline-block; margin-bottom: 0; font-weight: 400;
    text-align: center; vertical-align: middle; cursor: pointer;
    background-image: none; border: 1px solid transparent;
    white-space: nowrap; padding: 6px 12px; font-size: 14px;
    line-height: 1.42857; border-radius: 4px;
    -webkit-user-select: none; user-select: none;
}
.btn:hover, .btn:focus { color: #333; text-decoration: none; }
.btn:active, .btn.active { outline: 0; background-image: none; box-shadow: inset 0 3px 5px rgba(0,0,0,.125); }
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { cursor: not-allowed; pointer-events: none; opacity: .65; }
.btn-default { color: #333; background-color: #fff; border-color: #ccc; }
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active { color: #333; background-color: #e6e6e6; border-color: #adadad; }
.btn-primary { color: #fff; background-color: #428bca; border-color: #357ebd; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { color: #fff; background-color: #3071a9; border-color: #285e8a; }
.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active { color: #fff; background-color: #449d44; border-color: #398439; }
.btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; }
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active { color: #fff; background-color: #31b0d5; border-color: #269abc; }
.btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active { color: #fff; background-color: #ec971f; border-color: #d58512; }
.btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active { color: #fff; background-color: #c9302c; border-color: #ac2925; }
.btn-link { color: #428bca; font-weight: 400; cursor: pointer; border-radius: 0; }
.btn-link, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link { background-color: transparent; box-shadow: none; }
.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { border-color: transparent; }
.btn-link:hover, .btn-link:focus { color: #2a6496; text-decoration: underline; background-color: transparent; }
.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; }
.btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.btn-block { display: block; width: 100%; }
.btn-group { position: relative; display: inline-block; vertical-align: middle; }
.btn-group > .btn { position: relative; float: left; }
.btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active { z-index: 2; }
.btn-group-xs > .btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }

.top_caution{
    margin-bottom:0!important;
}

/* ── Modals ── */
.modal-open { overflow: hidden; }
.modal { display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; }
.modal.fade .modal-dialog { transform: translate(0,-25%); transition: transform .3s ease-out; }
.modal.in .modal-dialog { transform: translate(0,0); }
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }
.modal-dialog { position: relative; width: auto; margin: 10px; }
@media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } .modal-lg { width: 900px; } }
.modal-content { position: relative; background-color: #fff; border: none; border-radius: var(--radius, 12px); box-shadow: 0 20px 60px rgba(0,0,0,.15); background-clip: padding-box; outline: 0; overflow: hidden; }

/* 共通モーダル（fp-modal） — modaal代替 */
.fp-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,.4);
    z-index: 10000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.fp-modal-container {
    position: relative;
    width: 90vw;
    max-width: 960px;
    margin: 5vh auto;
    background: #fff;
    border-radius: var(--radius, 12px);
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    overflow: hidden;
}
.fp-modal-close {
    position: absolute;
    top: 10px; right: 12px;
    z-index: 2;
    border: none;
    background: #fff;
    width: 32px; height: 32px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    font-size: 20px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.fp-modal-close:hover { background: #f0f0f0; }
.fp-modal-body { padding: 20px; }
.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.in { opacity: .5; }
.modal-header { padding: 15px; border-bottom: 1px solid #e5e5e5; }
.modal-header::after { display: table; clear: both; content: ""; }
.modal-header .close { margin-top: -2px; }
.modal-title { margin: 0; line-height: 1.42857; }
.modal-body { position: relative; padding: 15px; }
.modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; }
.modal-footer::after { display: table; clear: both; content: ""; }
.modal-footer .btn + .btn { margin-left: 5px; margin-bottom: 0; }
.modal-sm { width: 300px; }

/* ── Nav / Tabs ── */
.nav { margin-bottom: 0; padding-left: 0; list-style: none; }
.nav::after { display: table; clear: both; content: ""; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; }
.nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #eee; }
.nav > li.disabled > a { color: #777; }
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus { color: #777; text-decoration: none; cursor: not-allowed; background-color: transparent; }
.nav > li.active > a, .nav > li.active > a:hover, .nav > li.active > a:focus { cursor: default; }
.nav-tabs { border-bottom: 1px solid #ddd; }
.nav-tabs > li { float: left; margin-bottom: -1px; }
.nav-tabs > li > a { margin-right: 2px; line-height: 1.42857; border: 1px solid transparent; border-radius: 4px 4px 0 0; }
.nav-tabs > li > a:hover { border-color: #eee #eee #ddd; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #555; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default;
}
.nav-pills > li { float: left; }
.nav-pills > li > a { border-radius: 4px; }
.nav-pills > li + li { margin-left: 2px; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #fff; background-color: #428bca; }
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* ── Dropdowns ── */
.dropdown, .dropup { position: relative; }
.dropdown-toggle:focus { outline: 0; }
.dropdown-menu {
    position: absolute; top: 100%; left: 0; z-index: 1000;
    display: none; float: left; min-width: 160px; padding: 5px 0;
    margin: 2px 0 0; list-style: none; font-size: 14px;
    background-color: #fff; border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px; box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
}
.dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857; color: #333; white-space: nowrap; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #fff; text-decoration: none; background-color: #428bca; }
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { color: #777; }
.dropdown-menu > .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }
.dropdown-menu-right { right: 0; left: auto; }
.open > .dropdown-menu { display: block; }
.open > a { outline: 0; }
.dropup .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 1px; }
.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }
.dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857; color: #777; }

/* ── Alerts ── */
.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.alert h4 { margin-top: 0; color: inherit; }
.alert > p, .alert > ul { margin-bottom: 0; }
.alert > p + p { margin-top: 5px; }
.alert-dismissible { padding-right: 35px; }
.alert-dismissible .close { position: relative; top: -2px; right: -21px; color: inherit; }
.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

/* ── Labels / Badges ── */
.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; }
.label:empty { display: none; }
a.label:hover, a.label:focus { color: #fff; text-decoration: none; cursor: pointer; }
.label-default { background-color: #777; }
.label-default[href]:hover, .label-default[href]:focus { background-color: #5e5e5e; }
.label-primary { background-color: #428bca; }
.label-success { background-color: #5cb85c; }
.label-info { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger { background-color: #d9534f; }
.badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: 700; color: #fff; line-height: 1; vertical-align: baseline; white-space: nowrap; text-align: center; background-color: #777; border-radius: 10px; }
.badge:empty { display: none; }

/* ── Utilities ── */
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-nowrap { white-space: nowrap; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.clearfix::after { display: table; clear: both; content: ""; }
.hidden { display: none !important; visibility: hidden !important; }
.invisible { visibility: hidden; }
.show { display: block !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.collapse { display: none; }
.collapse.in { display: block; }
tr.collapse.in { display: table-row; }
tbody.collapse.in { display: table-row-group; }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height .35s ease; }
.fade { opacity: 0; transition: opacity .15s linear; }
.fade.in { opacity: 1; }
.img-responsive { display: block; max-width: 100%; height: auto; }

/* Responsive visibility (Bootstrap 3) */
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 767px) { .visible-xs { display: block !important; } .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important; } .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; } .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .visible-lg { display: block !important; } .hidden-lg { display: none !important; } }

/* ── Tooltips ── */
.tooltip { position: absolute; z-index: 1070; display: block; visibility: visible; font-size: 12px; line-height: 1.4; opacity: 0; }
.tooltip.in { opacity: .9; }
.tooltip.top { margin-top: -3px; padding: 5px 0; }
.tooltip.right { margin-left: 3px; padding: 0 5px; }
.tooltip.bottom { margin-top: 3px; padding: 5px 0; }
.tooltip.left { margin-right: 3px; padding: 0 5px; }
.tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; text-decoration: none; background-color: #000; border-radius: 4px; }
.tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; }
.tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; }
.tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000; }
.tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000; }
.tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-top-color: transparent; border-bottom-color: #000; }

/* ── Misc Components ── */
.close { float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .2; }
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; opacity: .5; }
button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; }
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.05); }
.well-sm { padding: 9px; border-radius: 3px; }
.well-lg { padding: 24px; border-radius: 6px; }
.panel { margin-bottom: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.panel-body { padding: 15px; }
.panel-body::after { display: table; clear: both; content: ""; }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid #ddd; border-radius: 3px 3px 0 0; }
.panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; }
.panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-radius: 0 0 3px 3px; }
.panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; }
.panel-primary > .panel-heading { color: #fff; background-color: #428bca; border-color: #357ebd; }
.breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; }
.breadcrumb > li { display: inline-block; }
.breadcrumb > li + li::before { content: "/\00a0"; padding: 0 5px; color: #ccc; }
.breadcrumb > .active { color: #777; }
.pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; }
.pagination > li { display: inline; }
.pagination > li > a, .pagination > li > span {
    position: relative; float: left; padding: 6px 12px; line-height: 1.42857;
    text-decoration: none; color: #428bca; background-color: #fff; border: 1px solid #ddd; margin-left: -1px;
}
.pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.pagination > li:last-child > a, .pagination > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus { color: #2a6496; background-color: #eee; border-color: #ddd; }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { z-index: 2; color: #fff; background-color: #428bca; border-color: #428bca; cursor: default; }
.pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus,
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus { color: #777; background-color: #fff; border-color: #ddd; cursor: not-allowed; }
.pager { padding-left: 0; margin: 20px 0; list-style: none; text-align: center; }
.pager::after { display: table; clear: both; content: ""; }
.pager li { display: inline; }
.pager li > a, .pager li > span { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; border-radius: 15px; }
.pager li > a:hover, .pager li > a:focus { text-decoration: none; background-color: #eee; }
.pager .disabled > a, .pager .disabled > span { color: #777; background-color: #fff; cursor: not-allowed; }
.list-group { margin-bottom: 20px; padding-left: 0; }
.list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; }
.list-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.list-group-item:last-child { margin-bottom: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { z-index: 2; color: #fff; background-color: #428bca; border-color: #428bca; }
a.list-group-item:hover, a.list-group-item:focus { text-decoration: none; background-color: #f5f5f5; }
.media { overflow: hidden; zoom: 1; }
.media-body { overflow: hidden; zoom: 1; }
.media-object { display: block; }
.media-heading { margin: 0 0 5px; }
.media > .pull-left { margin-right: 10px; }
.media > .pull-right { margin-left: 10px; }
.media-list { padding-left: 0; list-style: none; }

/* ── Popover (used by some plugins) ── */
.popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padding: 1px; font-size: 14px; font-weight: 400; line-height: 1.42857; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0,0,0,.2); border-radius: 6px; box-shadow: 0 5px 10px rgba(0,0,0,.2); }
.popover.top { margin-top: -10px; }
.popover.right { margin-left: 10px; }
.popover.bottom { margin-top: 10px; }
.popover.left { margin-left: -10px; }
.popover-title { margin: 0; padding: 8px 14px; font-size: 14px; font-weight: 400; line-height: 18px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; }
.popover-content { padding: 9px 14px; }
.popover > .arrow, .popover > .arrow::after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; }
.popover > .arrow { border-width: 11px; }
.popover > .arrow::after { border-width: 10px; content: ""; }
.popover.top > .arrow { bottom: -11px; left: 50%; margin-left: -11px; border-top-color: rgba(0,0,0,.25); border-bottom-width: 0; }
.popover.top > .arrow::after { bottom: 1px; margin-left: -10px; border-top-color: #fff; border-bottom-width: 0; }
.popover.right > .arrow { top: 50%; left: -11px; margin-top: -11px; border-right-color: rgba(0,0,0,.25); border-left-width: 0; }
.popover.right > .arrow::after { left: 1px; bottom: -10px; border-right-color: #fff; border-left-width: 0; }
.popover.bottom > .arrow { top: -11px; left: 50%; margin-left: -11px; border-bottom-color: rgba(0,0,0,.25); border-top-width: 0; }
.popover.bottom > .arrow::after { top: 1px; margin-left: -10px; border-bottom-color: #fff; border-top-width: 0; }
.popover.left > .arrow { top: 50%; right: -11px; margin-top: -11px; border-left-color: rgba(0,0,0,.25); border-right-width: 0; }
.popover.left > .arrow::after { right: 1px; bottom: -10px; border-left-color: #fff; border-right-width: 0; }

/* END Bootstrap Compat */

/* =================================================================
  1c. LAYOUT PATTERNS (new design system)
   ================================================================= */

/* Two-column form layout */
.layout-2col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
}
.layout-2col > .full-width { grid-column: 1 / -1; }

/* Split layout (tighter gap) */
.layout-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Search bar layout */
.layout-search-bar { display: flex; gap: 8px; align-items: center; }

/* Widget grid: 2 cols mobile, 4 cols desktop */
.widget-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 992px) { .widget-grid { grid-template-columns: repeat(4, 1fr); } }

/* Form stack: label + field in grid */
.form-stack .field {
    display: grid; grid-template-columns: 180px 1fr; gap: 0 12px;
    align-items: start; padding: 14px 15px; border-bottom: 1px solid #eee;
}
.form-stack .field > label { padding-top: 7px; font-weight: 600; font-size: 13px; color: var(--gray-700); }
.form-stack .field-body { min-width: 0; }

/* Card component */
.card {
    background: #fff; border: 1px solid #dae8e0; border-radius: var(--radius);
    box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 20px;
}
.card-header {
    background: #fff; border-bottom: 2px solid var(--brand); padding: 12px 18px;
}
.card-header h2 { margin: 0; font-size: 15px; color: var(--gray-800); font-weight: 700; }
.card-body { padding: 0; }

/* Data table shorthand */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 8px 10px; border: 1px solid var(--border); font-size: 13px; }
.data-table th { background: var(--gray-50); font-weight: 600; }
.data-table tbody tr:hover { background: var(--gray-50); }

/* Input row (horizontal inputs inside a field) */
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row > * { flex: 1; min-width: 0; }

/* Notice */
.notice {
    border-radius: var(--radius); padding: 18px 22px; margin: 16px 0;
    background: #f0faf3; border-left: 4px solid var(--brand);
}
.notice h2 { font-size: 16px; font-weight: 700; color: #2d6a4f; margin: 0 0 8px; }
.notice h2 i, .notice h2 .lucide-icon { color: var(--brand); margin-right: 6px; }

/* Help text */
.help { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Field actions (submit area) */
.field-actions {
    padding: 20px; text-align: center;
}

/* Utilities */
.d-flex { display: flex; }
.d-grid { display: grid; }
.align-center { align-items: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }
.ml-auto { margin-left: auto; }
.float-start { float: left; }
.float-end { float: right; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }

@media (max-width: 768px) {
    .layout-2col, .layout-split { grid-template-columns: 1fr; }
    .form-stack .field { grid-template-columns: 1fr; }
    .form-stack .field > label { padding-bottom: 4px; }
}

/* END Layout Patterns */


/* =================================================================
   2. LAYOUT
   ================================================================= */

#page-container,
#main-container,
#page-content + footer { min-width: 320px; }

#page-container {
    width: 100%; padding: 0; margin: 0 auto;
    overflow-x: hidden;
    background-color: #344a3d;
    transition: background-color 0.2s ease-out;
}

#sidebar, #sidebar-alt {
    width: 0; position: absolute; overflow: hidden;
    background-color: #f7f8fa;
}
#sidebar-alt { right: 0; }

#sidebar, #sidebar-alt, #main-container,
.header-fixed-top header, .header-fixed-bottom header,
.footer-fixed #page-content + footer {
    transition: all 0.2s ease-out;
}

#page-content {
    padding: 10px 5px 1px;
    background-color: #f8f9fa;
}

#page-content + footer,
.style-alt #page-content + footer,
#page-container > footer {
    padding: 9px 10px;
    font-size: 11px;
    background-color: #fff;
    border-top: 1px solid #dbe1e8;
    color: #888;
}
#page-container > footer a { color: #888; }

/* Fixed Header */
#page-container.header-fixed-top { padding: 50px 0 0; }
#page-container.header-fixed-bottom { padding: 0 0 50px; }

/* Sidebar + Static Header */
.sidebar-visible-xs #sidebar { width: 200px; }
.sidebar-visible-xs #main-container { margin-left: 200px; margin-right: -200px; }

/* Sidebar + Fixed Header */
.header-fixed-top #sidebar, .header-fixed-bottom #sidebar { position: fixed; left: 0; top: 0; bottom: 0; }
.header-fixed-top .sidebar-content, .header-fixed-bottom .sidebar-content { padding-bottom: 50px; }
.sidebar-visible-xs.header-fixed-top header.navbar-fixed-top,
.sidebar-visible-xs.header-fixed-bottom header.navbar-fixed-bottom { left: 200px; right: -200px; }

/* Alt Sidebar */
.sidebar-alt-visible-xs #sidebar-alt { width: 200px; }
.sidebar-alt-visible-xs #main-container { margin-right: 200px; margin-left: -200px; }
.header-fixed-top #sidebar-alt, .header-fixed-bottom #sidebar-alt { position: fixed; right: 0; top: 0; bottom: 0; }

/* Fixed Footer */
.footer-fixed #page-content + footer { position: fixed; bottom: 0; right: 0; left: 0; z-index: 999; }
.footer-fixed #page-content { padding-bottom: 41px; }

/* Desktop (>=992px) */
@media screen and (min-width: 992px) {
    #login-alt-container { display: block; }

    .sidebar-no-animations #sidebar, .sidebar-no-animations #sidebar-alt {
        transition: opacity 0.5s linear, background-color 0.2s ease-out;
    }
    .sidebar-no-animations #main-container,
    .sidebar-no-animations.header-fixed-top header.navbar-fixed-top,
    .sidebar-no-animations.header-fixed-bottom header.navbar-fixed-bottom,
    .sidebar-no-animations.footer-fixed #page-content + footer { transition: none; }

    .sidebar-visible-xs #sidebar, .sidebar-alt-visible-xs #sidebar-alt { width: 0; }
    .sidebar-visible-xs #main-container, .sidebar-alt-visible-xs #main-container { margin-left: 0; margin-right: 0; }
    .sidebar-visible-xs.header-fixed-top header.navbar-fixed-top,
    .sidebar-visible-xs.header-fixed-bottom header.navbar-fixed-bottom,
    .sidebar-alt-visible-xs.header-fixed-top header.navbar-fixed-top,
    .sidebar-alt-visible-xs.header-fixed-bottom header.navbar-fixed-bottom,
    .sidebar-visible-xs.footer-fixed #page-content + footer,
    .sidebar-alt-visible-xs.footer-fixed #page-content + footer { right: 0; left: 0; }

    #sidebar, #sidebar-alt,
    .sidebar-partial #sidebar, .sidebar-alt-partial #sidebar-alt { width: 0; opacity: 0.2; }
    .sidebar-partial #sidebar, .sidebar-alt-partial #sidebar-alt { width: 65px; }

    .sidebar-partial #sidebar:hover, .sidebar-visible-lg #sidebar,
    .sidebar-visible-lg.sidebar-partial #sidebar,
    .sidebar-alt-partial #sidebar-alt:hover, .sidebar-alt-visible-lg #sidebar-alt,
    .sidebar-alt-visible-lg.sidebar-alt-partial #sidebar-alt { width: 200px; opacity: 1; }

    .sidebar-partial #main-container { margin-left: 65px; }
    .sidebar-partial #sidebar:hover + #main-container,
    .sidebar-visible-lg #main-container { margin-left: 200px; }

    .sidebar-partial.footer-fixed #main-container #page-content + footer,
    .sidebar-partial.header-fixed-top header.navbar-fixed-top,
    .sidebar-partial.header-fixed-bottom header.navbar-fixed-bottom { left: 65px; }
    .sidebar-partial #sidebar:hover + #main-container header.navbar-fixed-top,
    .sidebar-partial #sidebar:hover + #main-container header.navbar-fixed-bottom,
    .sidebar-partial #sidebar:hover + #main-container #page-content + footer,
    .sidebar-visible-lg.header-fixed-top header.navbar-fixed-top,
    .sidebar-visible-lg.header-fixed-bottom header.navbar-fixed-bottom,
    .sidebar-visible-lg.footer-fixed #main-container #page-content + footer { left: 200px; }

    .sidebar-alt-partial #main-container { margin-right: 65px; }
    .sidebar-alt-partial #sidebar-alt:hover ~ #main-container,
    .sidebar-alt-visible-lg #main-container { margin-right: 200px; }
}

@media screen and (min-width: 1280px) {
    .header-fixed-top .sidebar-content, .header-fixed-bottom .sidebar-content { padding-bottom: 0; }
    article p { font-size: 19px; line-height: 1.9; }
}


/* =================================================================
   3. SIDEBAR
   ================================================================= */

.sidebar-content { width: 200px; color: #fff; }
.sidebar-section { padding: 10px; }

/* Brand */
.sidebar-brand, .sidebar-title {
    height: 50px; line-height: 50px; padding: 0 10px; margin: 0;
    font-weight: 300; font-size: 18px; display: block;
    color: #fff; background: rgba(255,255,255,0.9);
}
a.sidebar-brand:hover, a.sidebar-brand:focus,
a.sidebar-title:hover, a.sidebar-title:focus {
    background-color: var(--brand); color: #fff; text-decoration: none;
}

/* FP-UNIV light sidebar overrides */
#sidebar .sidebar-brand { color: #333; background: #fff; border-bottom: 1px solid #e8eaed; }
#sidebar .sidebar-header {
    color: var(--gray-500); font-weight: 600;
    padding: 24px 20px 6px; border-left: none;
    margin: 0; line-height: 12px; background: transparent;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-top: 1px solid #e8eaed;
}
#sidebar .sidebar-header:first-of-type { border-top: none; }
#sidebar .sidebar-header:first-child { margin-top: 0; }
#sidebar .sidebar-header + .sidebar-section { padding-top: 0; padding-bottom: 0; }
.sidebar-header .sidebar-header-title {
    color: var(--gray-500); font-size: 10px; text-transform: uppercase; font-weight: 700;
}
.sidebar-header-options { float: right; display: inline-block; }
.sidebar-header-options > a, .sidebar-nav .sidebar-header-options a {
    float: right; margin: 0; padding: 0; min-height: 0; line-height: inherit;
    display: block; min-width: 18px; text-align: center; color: #fff; opacity: 0.3;
}
.sidebar-header-options a.active, .sidebar-header-options a:hover, .sidebar-header-options a:focus,
.sidebar-nav .sidebar-header-options a.active, .sidebar-nav .sidebar-header-options a:hover, .sidebar-nav .sidebar-header-options a:focus {
    background: none; color: #fff; opacity: 1;
}

/* Navigation */
.sidebar-nav { list-style: none; margin: 0; padding: 10px 0 0; }
.sidebar-nav a { display: block; color: #444; padding: 0 10px; min-height: 35px; line-height: 35px; }
#sidebar .sidebar-nav > li > a {
    color: #444; padding: 0 20px 0 17px; min-height: 42px; line-height: 42px; font-size: 13.5px;
    border-left: 3px solid transparent;
}
.sidebar-nav a:hover, .sidebar-nav a.open, .sidebar-nav li.active > a {
    color: #333; text-decoration: none; background: rgba(0,0,0,0.04);
}
#sidebar .sidebar-nav > li.active > a {
    background-color: #f0f1f3; color: var(--brand);
    border-left: 3px solid var(--brand); padding-left: 17px;
}
.sidebar-nav a.active {
    border-left: 3px solid var(--brand); padding-left: 17px;
    background: rgba(0,0,0,0.06);
}
.sidebar-nav a.active, .sidebar-nav ul a.active, .sidebar-nav ul a.active:hover {
    border-left-color: var(--brand);
}

.sidebar-nav a > .sidebar-nav-icon { margin-right: 10px; }
.sidebar-nav a > .sidebar-nav-indicator {
    float: right; line-height: inherit; margin-left: 4px; transition: all 0.15s ease-out;
}
.sidebar-nav a > .sidebar-nav-icon, .sidebar-nav a > .sidebar-nav-indicator {
    display: inline-block; opacity: 0.5; width: 18px; font-size: 14px; text-align: center;
}
.sidebar-nav a:hover > .sidebar-nav-icon, .sidebar-nav a:hover > .sidebar-nav-indicator,
.sidebar-nav a.active > .sidebar-nav-icon, .sidebar-nav a.active > .sidebar-nav-indicator,
.sidebar-nav a.open > .sidebar-nav-icon, .sidebar-nav a.open > .sidebar-nav-indicator,
.sidebar-nav li.active > a > .sidebar-nav-icon, .sidebar-nav li.active > a > .sidebar-nav-indicator { opacity: 1; }

.sidebar-nav a.active > .sidebar-nav-indicator, .sidebar-nav a.open > .sidebar-nav-indicator,
.sidebar-nav li.active > a > .sidebar-nav-indicator { transform: rotate(-90deg); }

.sidebar-nav ul { list-style: none; padding: 0; margin: 0; display: none; background: rgba(0,0,0,0.03); }
.sidebar-nav li.active > ul { display: block; }
.sidebar-nav ul a { margin: 0; font-size: 12px; padding-left: 15px; min-height: 32px; line-height: 32px; }
.sidebar-nav ul a.active, .sidebar-nav ul a.active:hover {
    border-left: 5px solid var(--brand); padding-left: 10px;
}

/* Lucide icons in sidebar */
.sidebar-lucide { width: 16px; height: 16px; vertical-align: middle; display: inline-block; }
.sidebar-nav .sidebar-lucide { margin-right: 8px; }

/* Admin section */
.sidebar-admin-section { background: #eef0f3; }
.sidebar-admin-section ~ li { background: #f0f2f5; }
.sidebar-admin-section ~ li:hover { background: #e8eaee; }
.sidebar-admin-section ~ .sidebar-header:not(.sidebar-admin-section) { background: transparent; }
.sidebar-admin-section ~ .sidebar-header:not(.sidebar-admin-section) ~ li { background: transparent; }

/* Toggle sections */
.sidebar-toggle { cursor: pointer; }
.sidebar-toggle-indicator {
    float: right; font-size: 9px; color: #bbb;
    transition: transform 0.2s ease; width: 14px; height: 14px; margin-top: 1px;
}
.sidebar-toggle.open .sidebar-toggle-indicator { transform: rotate(90deg); }
.sidebar-toggle-items { display: none; list-style: none; }
.sidebar-toggle-items > ul { list-style: none; padding: 0; margin: 0; }
.sidebar-toggle-items.open { display: block; }
.sidebar-toggle-items.open > ul { display: block !important; }
.sidebar-toggle-items > ul > li > a {
    font-size: 13.5px !important; min-height: 42px !important; line-height: 42px !important;
    padding: 0 20px 0 17px !important;
}

/* Locked menu items */
.menu-locked a { opacity: 0.4 !important; }
.menu-locked a:hover { opacity: 0.55 !important; }
.menu-lock-icon { float: right; margin-top: 3px; font-size: 12px; color: #bbb; }

/* Plan badges */
.menu-plan-badge {
    display: inline-block; font-size: 8.5px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px; margin-left: 5px;
    vertical-align: middle; line-height: 1.4; letter-spacing: 0.5px; border: 1px solid;
}
.menu-plan-badge--pro { color: var(--brand); border-color: rgba(39,174,96,0.35); background: rgba(39,174,96,0.08); }
.menu-plan-badge--biz { color: var(--brand); border-color: rgba(39,174,96,0.35); background: rgba(39,174,96,0.08); }
.sidebar-header-title .menu-plan-badge { font-size: 8px; padding: 0 4px; vertical-align: text-top; }

/* Company logo */
img.company_logo { max-height: 32px; max-width: 200px; margin: 6px; }


/* =================================================================
   4. SIDEBAR COLLAPSE
   ================================================================= */

.sidebar-collapse-toggle {
    display: none; padding: 8px 16px; cursor: pointer;
    text-align: right; color: #999; transition: color 0.15s;
}
.sidebar-collapse-toggle:hover { color: #333; }
.sidebar-collapse-icon-open { display: none; }

@media screen and (min-width: 992px) {
    .sidebar-collapse-toggle { display: block; }

    /* Collapsed state */
    .sidebar-visible-lg.sidebar-collapsed #sidebar { width: var(--sidebar-collapsed-w); overflow: visible; }
    .sidebar-visible-lg.sidebar-collapsed #main-container { margin-left: var(--sidebar-collapsed-w); }
    .sidebar-collapsed #sidebar .sidebar-content { width: var(--sidebar-collapsed-w); }

    .sidebar-collapsed .sidebar-collapse-icon-close { display: none; }
    .sidebar-collapsed .sidebar-collapse-icon-open { display: inline-block; }

    .sidebar-collapsed #sidebar .sidebar-header-title,
    .sidebar-collapsed #sidebar .sidebar-header-options,
    .sidebar-collapsed #sidebar .sidebar-toggle-indicator,
    .sidebar-collapsed #sidebar .menu-lock-icon,
    .sidebar-collapsed #sidebar .menu-plan-badge,
    .sidebar-collapsed #sidebar .sidebar-brand strong { display: none !important; }

    /* Toggle items: show as icon-only in collapsed state */
    .sidebar-collapsed #sidebar .sidebar-toggle-items,
    .sidebar-collapsed #sidebar .sidebar-toggle-items.open { display: block !important; list-style: none; }
    .sidebar-collapsed #sidebar .sidebar-toggle-items > ul { display: block !important; }

    .sidebar-collapsed #sidebar .sidebar-nav > li > a,
    .sidebar-collapsed #sidebar .sidebar-toggle-items li > a {
        display: block; text-align: center; padding: 0;
        height: 44px; line-height: 44px;
        color: transparent; overflow: hidden; font-size: 0;
    }
    .sidebar-collapsed #sidebar .sidebar-nav > li > a > svg.lucide,
    .sidebar-collapsed #sidebar .sidebar-toggle-items li > a > svg.lucide {
        color: #666; width: 20px; height: 20px; vertical-align: middle; margin-right: 0;
    }
    .sidebar-collapsed #sidebar .sidebar-nav > li.active > a,
    .sidebar-collapsed #sidebar .sidebar-nav a.active {
        border-left: none; padding-left: 0;
    }
    .sidebar-collapsed #sidebar .sidebar-nav > li.active > a > svg.lucide {
        color: var(--brand);
    }

    .sidebar-collapsed #sidebar a.sidebar-brand {
        display: block; text-align: center; padding: 2px 0;
        text-align: center;
        color: transparent; overflow: hidden;
    }
    .sidebar-collapsed #sidebar a.sidebar-brand .company_logo { max-width: 34px; }
    .sidebar-collapsed #sidebar a.sidebar-brand > svg.lucide { color: #666; }

    .sidebar-collapsed #sidebar .sidebar-header {
        padding: 0; margin: 0; height: 1px;
        border-top: 1px solid #ddd; overflow: hidden;
    }
    .sidebar-collapsed #sidebar .sidebar-collapse-toggle { text-align: center; padding: 8px 0; }

    /* Hover expand */
    .sidebar-visible-lg.sidebar-collapsed #sidebar:hover {
        width: var(--sidebar-w); position: absolute; z-index: 9999;
        min-height: 100vh; box-shadow: 2px 0 8px rgba(0,0,0,0.12);
        background: #fff;
    }
    .sidebar-collapsed #sidebar:hover .sidebar-content { width: var(--sidebar-w); }

    .sidebar-collapsed #sidebar:hover .sidebar-brand strong,
    .sidebar-collapsed #sidebar:hover .menu-lock-icon,
    .sidebar-collapsed #sidebar:hover .menu-plan-badge { display: inline !important; }
    .sidebar-collapsed #sidebar:hover .sidebar-toggle-items { display: block !important; }
    .sidebar-collapsed #sidebar:hover .sidebar-toggle-items > ul { display: block !important; }
    .sidebar-collapsed #sidebar:hover .sidebar-toggle-indicator { transform: rotate(90deg); }

    .sidebar-collapsed #sidebar:hover .sidebar-nav > li > a,
    .sidebar-collapsed #sidebar:hover .sidebar-toggle-items li > a {
        text-align: left !important; padding: 0 20px !important;
        height: 44px !important; line-height: 44px !important;
        font-size: 13.5px !important; color: #444 !important; overflow: visible !important;
    }
    .sidebar-collapsed #sidebar:hover .sidebar-toggle-items > ul {
        background: transparent !important;
    }
    .sidebar-collapsed #sidebar:hover .sidebar-nav > li > a > svg.lucide,
    .sidebar-collapsed #sidebar:hover .sidebar-toggle-items li > a > svg.lucide {
        display: inline-block !important; margin: 0 8px 0 0 !important;
    }

    .sidebar-collapsed #sidebar:hover a.sidebar-brand {
        text-align: left; color: #333; overflow: visible;
    }
    .sidebar-collapsed #sidebar:hover a.sidebar-brand .company_logo { max-width: none; }

    .sidebar-collapsed #sidebar:hover .sidebar-header {
        padding: 0; margin: 0; height: 1px; overflow: hidden; border-top: 1px solid #ddd;
    }
    .sidebar-collapsed #sidebar:hover .sidebar-collapse-toggle { text-align: right; padding: 8px 16px; }
}

@media (max-width: 991px) {
    .sidebar-collapse-toggle { display: none !important; }
}


/* =================================================================
   5. NAVBAR
   ================================================================= */

header.navbar-default, header.navbar-inverse {
    padding: 0; margin: 0; min-width: 320px; border: none;
}
header.navbar-default.navbar-fixed-top { border-bottom: 1px solid #ebf2ee; }
header.navbar-inverse.navbar-fixed-top { border-bottom-color: #344a3d; }
header.navbar-inverse.navbar-fixed-bottom { border-top-color: #344a3d; }

.navbar.navbar-default { background-color: #fafcfb; }
.navbar.navbar-inverse { background-color: #577162; }
.navbar-fixed-top, .navbar-fixed-bottom { border-width: 0; }

.navbar-default .navbar-nav > li > a { color: #344a3d; }
.navbar-inverse .navbar-nav > li > a { color: #fff; }

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus { color: #fff; background-color: var(--brand); }

.nav.navbar-nav-custom { float: left; margin: 0; }
.nav.navbar-nav-custom > li { min-height: 50px; float: left; }
.nav.navbar-nav-custom > li > a {
    min-width: 50px; padding: 5px 7px; line-height: 40px;
    text-align: center; color: #344a3d; position: relative;
}
.nav.navbar-nav-custom > li > a .label-indicator {
    position: absolute; top: 0; right: 0; border-radius: 0; font-weight: 600;
}
.navbar-inverse .nav.navbar-nav-custom > li > a { color: #fff; }
.nav.navbar-nav-custom > li.open > a,
.nav.navbar-nav-custom > li > a:hover,
.nav.navbar-nav-custom > li > a:focus { background-color: var(--brand); color: #fff; }
.nav.navbar-nav-custom > li > a > img {
    width: 40px; height: 40px; border: 2px solid #fff; border-radius: 20px; vertical-align: top;
}

/* Header avatar */
.header_avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 20px; }
.header_avatar img { width: 100%; object-fit: cover; }
.header-right { padding-top: 9px; }

/* Content Header & Breadcrumb */
.content-header {
    background-color: #fff; border-top: 1px solid #ebf2ee; border-bottom: 1px solid #dae8e0;
}
.content-header h1, .content-header h2 { margin: 0; font-size: 26px; line-height: 32px; }
.content-header small { font-size: 17px; }
.header-section { padding: 30px 10px; }
.header-section h1 i { font-size: 56px; float: right; margin: 0 0 0 10px; color: #ebf2ee; line-height: 64px; }
.content-header, .content-top { margin: -10px -5px 10px; }
.content-top { background-color: #fff; border-bottom: 1px solid #dae8e0; }

.breadcrumb { background-color: #fff; }
.breadcrumb i { font-size: 14px; }
.breadcrumb-top {
    margin: -10px -5px 10px; padding: 7px 10px;
    border-top: 1px solid #ebf2ee; border-bottom: 1px solid #dae8e0; font-size: 12px;
}
.content-header + .breadcrumb-top, .breadcrumb-top + .content-header { margin-top: -11px; }
.breadcrumb > li + li:before { content: "\203a"; }
.breadcrumb > li + li.hover_tooltip:before { content: ""; }

/* Navbar Search */
.navbar-form { margin: 7px 0; }
.navbar-form-custom { padding: 0; width: 100px; float: left; height: 50px; }
.navbar-form-custom .form-control {
    padding: 10px; margin: 0; height: 50px; font-size: 15px; background: transparent; border: none; z-index: 2000;
}
.navbar-form-custom .form-control:hover, .navbar-form-custom .form-control:focus { background-color: #fff; }
.navbar-form-custom .form-control:focus {
    position: absolute; top: 0; left: 0; right: 0; font-size: 18px; padding: 10px 20px;
}
.navbar-inverse .navbar-form-custom .form-control { color: #fff; }
.navbar-inverse .navbar-form-custom .form-control:hover,
.navbar-inverse .navbar-form-custom .form-control:focus { background: #000; color: #fff; }

/* Navbar tabs */
.navbar-default .nav-tabs > li > a { font-size: 1.2em; border: solid 1px #666; }
.navbar-default .nav-tabs > li.active > a {
    background-color: #8cad9e !important; color: #fff; font-weight: bold;
    border: solid 2px #344a3d; border-bottom: #fff solid 2px;
}
.navbar-default .nav-tabs > li > a:hover { border: solid 2px #344a3d; }


/* =================================================================
   6. BLOCKS & CARDS
   ================================================================= */

.block {
    margin: 0 0 10px; padding: 20px 15px 1px;
    background-color: #fff; border: 1px solid #dae8e0;
}
.block.full { padding: 20px 15px; }
.block .block-content-full { margin: -20px -15px -1px; }
.block .block-content-mini-padding { padding: 8px; }
.block.full .block-content-full { margin: -20px -15px; }

.block-title {
    margin: -20px -15px 20px; background-color: #fafcfb;
    border-bottom: 1px solid #ebf2ee;
}
.block-title h1, .block-title h2, .block-title h3,
.block-title h4, .block-title h5, .block-title h6 {
    display: inline-block; font-size: 16px; line-height: 1.4;
    margin: 0; padding: 10px 16px 7px; font-weight: normal;
}
.block-title h1 small, .block-title h2 small, .block-title h3 small,
.block-title h4 small, .block-title h5 small, .block-title h6 small {
    font-size: 13px; color: #777; font-weight: normal;
}
.block-title h1, .block-title h2, .block-title h3 { padding-left: 15px; padding-right: 15px; }

.block-title .nav-tabs, .block-options { min-height: 40px; line-height: 38px; }
.block-title .nav-tabs { padding: 3px 1px 0; border-bottom: none; margin-bottom: -2px; }
.block-title .nav-tabs > li > a { border-bottom: none; margin-bottom: 0; }
.block-title .nav-tabs > li > a:hover { background: none; }
.block-title .nav-tabs > li.active > a,
.block-title .nav-tabs > li.active > a:hover,
.block-title .nav-tabs > li.active > a:focus {
    border-color: #ebf2ee; border-bottom-color: #fff; background-color: #fff;
}

.block-options { margin: 0 6px; line-height: 37px; }
.block-options .label { display: inline-block; padding: 6px; vertical-align: middle; font-size: 13px; }
.block-options .btn { padding-right: 8px; padding-left: 8px; min-width: 30px; text-align: center; }

.block-top { margin: -20px -15px 20px; border-bottom: 1px dotted #dbe1e8; }
.block-section { margin-bottom: 20px; }
.block.block-fullscreen {
    position: fixed; top: 5px; bottom: 5px; left: 5px; right: 5px;
    z-index: 1031; margin-bottom: 0; overflow-y: auto;
}

/* Widgets */
.widget { background-color: #fff; margin-bottom: 10px; }
.widget .widget-extra-full, .widget .widget-extra { position: relative; padding: 15px; }
.widget .widget-extra { padding-top: 1px; padding-bottom: 1px; }
.widget .widget-image, .widget .widget-icon { width: 64px; height: 64px; }
.widget .widget-icon {
    display: inline-block; line-height: 64px; text-align: center;
    font-size: 28px; color: #fff; border-radius: 32px;
}
.widget-simple { padding: 15px; }
.widget-simple:before, .widget-simple:after { content: " "; display: table; }
.widget-simple:after { clear: both; }
.widget-simple .widget-image, .widget-simple .widget-icon { margin: 0 15px; }
.widget-simple .widget-content { font-size: 18px; margin: 12px 0; }
.widget-simple .widget-content small { display: block; margin-top: 7px; font-size: 13px; font-weight: 400; }

@media screen and (min-width: 1280px) {
    .widget-simple .widget-content { font-size: 14px; }
    .widget-simple .widget-image, .widget-simple .widget-icon { margin: 0 12px; }
}

/* Scroll-to-top */
#to-top {
    display: none; position: fixed; bottom: 6px; left: 5px; border-radius: 3px;
    padding: 0 12px; font-size: 28px; text-align: center; color: #fff;
    background-color: #000; opacity: 0.1;
}
#to-top:hover { color: #fff; background-color: var(--brand); text-decoration: none; opacity: 1; }


/* =================================================================
   7. FORMS
   ================================================================= */
fieldset{
    border-radius: 3px;
    border-color:rgb(239, 239, 239);
}

fieldset legend {
    width: auto;
    padding: 0 8px;
    margin: 0;
    border-bottom: 0;
    font-size: 1.5em;
    font-weight: bold;
    color: darkblue;
    float: none;
}
input[type="file"] { padding-top: 7px; }
input[type="text"].form-control, input[type="password"].form-control,
input[type="email"].form-control, textarea.form-control { -webkit-appearance: none; }

.form-control {
    font-size: 13px; padding: 6px 8px; max-width: 100%; margin: 1px 0;
    color: #344a3d; border-color: #dae8e0;
}
.form-control:focus { border-color: var(--brand-dark, #1F6E63); }
input:focus, select:focus, textarea:focus { background-color: #fdffbb; }
input:focus, select:focus { border: solid 1px var(--brand-dark, #1F6E63); }

.help-block { color: #777; font-weight: 400; }
.input-group { margin-top: 1px; margin-bottom: 1px; }
.input-group .form-control { margin-top: 0; }
.input-group-addon { min-width: 45px; text-align: center; background-color: #fff; border-color: #dae8e0; }

.form-bordered { margin: -15px -15px -1px; }
.form-bordered fieldset legend { margin: 0; padding-left: 20px; padding-right: 20px; }
.form-bordered .form-group { margin: 0; border: none; padding: 15px; border-bottom: 1px dashed #ebf2ee; }
.form-bordered .form-group.form-actions {
    background-color: #fafcfb; border-bottom: none;
    border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
}
.form-bordered .help-block { margin-bottom: 0; }

.has-success .form-control, .has-success .input-group-addon { border-color: var(--brand-dark, #1F6E63); background-color: #fff; }
.has-success .form-control:focus { border-color: #166638; }
.has-success .help-block, .has-success .control-label, .has-success .input-group-addon,
.has-success .checkbox, .has-success .checkbox-inline, .has-success .radio, .has-success .radio-inline { color: var(--brand); }
.has-warning .form-control, .has-warning .input-group-addon { border-color: #e67e22; background-color: #fff; }
.has-warning .form-control:focus { border-color: #b3621b; }
.has-warning .help-block, .has-warning .control-label { color: #e67e22; }
.has-error .form-control, .has-error .input-group-addon { border-color: var(--danger); background-color: #fff; }
.has-error .form-control:focus { border-color: #c0392b; }
.has-error .help-block, .has-error .control-label { color: var(--danger); }

.has-success .form-control, .has-warning .form-control, .has-error .form-control { box-shadow: none; }
.required { border: solid 2px #ff9489 !important; }

/* Wizard */
.wizard-steps { border-bottom: 1px solid #ebf2ee; margin-bottom: 20px; }
.form-bordered .wizard-steps { margin-bottom: 0; }
.wizard-steps .row { margin: 0; }
.wizard-steps .row div { padding: 15px 0; font-size: 15px; text-align: center; }
.wizard-steps span {
    display: inline-block; width: 100px; height: 100px; line-height: 100px;
    border: 1px solid var(--brand); border-radius: 50px;
}
.wizard-steps div.done span, .wizard-steps div.active span { background-color: var(--brand); color: #fff; }
.wizard-steps div.done span { opacity: 0.25; }
.wizard-steps div.active span { opacity: 1; }

/* Switch */
.switch { margin: 1px 0; position: relative; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span {
    position: relative; display: inline-block; width: 54px; height: 28px;
    border-radius: 28px; background-color: #f9f9f9; border: 1px solid #ddd;
    transition: background-color 0.35s;
}
.switch span:after {
    content: ""; position: absolute; left: 7px; top: 7px; bottom: 7px; width: 12px;
    background-color: #fff; border: 1px solid #ddd; border-radius: 24px;
    box-shadow: 1px 0 3px rgba(0,0,0,0.05); transition: all 0.15s ease-out;
}
.switch input:checked + span:after { left: 26px; width: 24px; top: 1px; bottom: 1px; border: none; box-shadow: -2px 0 3px rgba(0,0,0,0.1); }
.switch input:checked + span { background-color: #eee; }
.switch-default span { border-color: #dae8e0; }
.switch-default input:checked + span { background-color: #dae8e0; }
.switch-primary span { border-color: var(--brand); }
.switch-primary input:checked + span { background-color: var(--brand); }

input[type=text]:disabled, input[type=number]:disabled, select:disabled { background: #eee !important; }


/* =================================================================
   8. TABLES
   ================================================================= */

table { border-collapse: collapse; }
table thead tr { background-color: var(--brand); font-size: 12px; }
.table.table-vcenter th, .table.table-vcenter td { vertical-align: middle; }
.table thead > tr > th { font-weight: 600; }
.table thead > tr > th > small { font-weight: 400; font-size: 75%; }
.table thead > tr > th, .table thead > tr > td,
.table tfoot > tr > th, .table tfoot > tr > td { padding-top: 14px; padding-bottom: 14px; }
.table tfoot > tr > th, .table tfoot > tr > td { background-color: #fafcfb; }

.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th,
.table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td,
.table tbody + tbody,
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border-color: #ebf2ee; }

.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #ebf2ee; }
.table-hover > tbody > tr:hover > td.inputted { background-color: #8cad9e !important; color: #fff; }

/* Second-level table */
table.table-second-level thead tr { background-color: var(--brand-light); }
table.table-second-level .table-second-group { background-color: rgba(202,190,158,0.43); }
.table-second-level thead th { font-weight: bold !important; }
.table-second-level thead th, .table-second-level thead td { color: #344a3d !important; vertical-align: top !important; }
.table-second-level thead > tr > th, .table-second-level thead > tr > td {
    vertical-align: top !important; padding-bottom: 6px !important; padding-top: 6px !important;
}

/* Mini head */
table thead.mini-head tr, table thead.mini-head th, table thead.mini-head td {
    background: #fafcfb !important; color: #344a3d !important; font-weight: bolder !important; padding: 6px;
}
table thead.mini-head th span { font-weight: normal !important; }

/* Table responsive */
.table-responsive { width: 100%; overflow: auto; }
.table-responsive table { table-layout: fixed !important; }
.table-responsive table thead tr td { width: 80px !important; text-align: center; }
.table-responsive table tbody tr td { text-align: right; }
.normal-table tr td { text-align: left !important; }
.table-responsive table thead tr th { width: 200px !important; }

/* Row color classes */
table tr.t0, table tr.t0 .col1, table tr.t0 .col2, table th.t0 { background-color: #ddd; }
table tr.t1, table tr.t1 .col1, table tr.t1 .col2, table th.t1 { background-color: #ffa500; }
table tr.t2, table tr.t2 .col1, table tr.t2 .col2, table th.t2 { background-color: #a4d1dd; }
table tr.t3, table tr.t3 .col1, table tr.t3 .col2, table th.t3 { background-color: #ffd3d3; }
table tr.t4, table tr.t4 .col1, table tr.t4 .col2, table th.t4 { background-color: #aad178; }
table tr.t5, table tr.t5 .col1, table tr.t5 .col2, table th.t5 { background-color: #fdffbb; }
span.edu_1 { background: #ffd3d3; } span.edu_2 { background: #fdffbb; }
span.edu_3 { background: #a4d1dd; } span.edu_4 { background: #c6ff94; }
span.edu_5 { background: #d6d6d6; } span.edu_6 { background: #ffd3d3; }
span.edu_7 { background: #ff9489; } span.edu_8 { background: #c6ff94; }
span.edu_9 { background: #a4d1dd; }

td small { color: #777; }
td b { display: inline-block; }
td small span { display: block; text-align: center; }


/* =================================================================
   9. BUTTONS
   ================================================================= */

.btn { margin: 1px 0; background-color: #fff; }
/* 判別可能性を維持しつつ disabled と認識させるため 0.55 に統一 (旧 0.4 は過度に薄く可読性低下) */
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: 0.55; cursor: not-allowed; }
.block-options .btn, .input-group .btn, .modal-content .btn { margin-top: 0; margin-bottom: 0; }

.btn-default { background-color: #f0f5f2; border-color: #dae8e0; color: #344a3d; }
.btn-default:hover { background-color: #ebf2ee; border-color: #c2cfc7; }
.btn-default:focus, .btn-default:active, .btn-default.active,
.open .btn-default.dropdown-toggle { background-color: #8cad9e; border-color: #dfe5e1; color: #fff; }

.btn-primary { background-color: #5ccc8b; border-color: var(--brand); color: #fff; }
.btn-primary.btn-alt { color: var(--brand); }
.nav > li > .btn-primary:hover, .btn-primary:focus, .btn-primary:hover { background-color: var(--brand); border-color: #15b357; color: #fff; }
.btn-primary:active, .btn-primary.active, .open .btn-primary.dropdown-toggle { background-color: var(--brand); border-color: var(--brand); color: #fff; }

.btn-danger { background-color: #ef8a80; border-color: var(--danger); color: #fff; }
.btn-danger:hover { background-color: var(--danger); border-color: #9c3428; color: #fff; }
.btn-danger:focus, .btn-danger:active, .btn-danger.active,
.open .btn-danger.dropdown-toggle { background-color: var(--danger); border-color: var(--danger); color: #fff; }

.btn-warning { background-color: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover { background-color: var(--warning); border-color: #b3730c; color: #fff; }

.btn-success { background-color: #aad178; border-color: #7db831; color: #fff; }
.btn-success:hover { background-color: #7db831; border-color: #578022; color: #fff; }

.btn-info { background-color: #7abce7; border-color: var(--info); color: #fff; }
.btn-info:hover { background-color: var(--info); border-color: #2875a8; color: #fff; }

.btn-link, .btn-link:hover, .btn-link:focus { color: var(--brand); }
.btn-link.btn-icon { color: #999; }

/* Action button — reusable icon+text style */
.btn-action {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    border-radius: var(--radius); border: none; cursor: pointer;
    background: var(--brand); color: #fff;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    line-height: 1.3; white-space: nowrap; text-decoration: none !important;
}
.btn-action:hover, .btn-action:focus {
    background: var(--brand-dark); color: #fff;
    box-shadow: 0 2px 8px rgba(39,174,96,0.25);
    transform: translateY(-1px);
}
.btn-action:active { transform: translateY(0); box-shadow: none; }
.btn-action svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-action.btn-action-sm { padding: 6px 12px; font-size: 12px; gap: 5px; }
.btn-action.btn-action-sm svg { width: 14px; height: 14px; }
.btn-action.btn-action-outline {
    background: #fff; color: var(--brand); border: 1px solid var(--brand);
}
.btn-action.btn-action-outline:hover {
    background: var(--brand-light); box-shadow: none; transform: none;
}
.btn-link.btn-icon:hover, .btn-link.btn-icon:focus { text-decoration: none; }

.btn-xs, .btn-group-xs > .btn { padding: 2px 5px; font-size: 14px; line-height: 1.5; border-radius: 3px; }

input.active { border: solid 2px var(--brand); }

.nav > li > a.btn-danger:hover, .nav > li > a.btn-danger:focus { background-color: var(--danger); border-color: var(--danger); }


/* =================================================================
   10. DASHBOARD
   ================================================================= */

/* Color Rhythm Layers — alternating background bands for visual grouping */
.dash-layer { margin: 0 -5px; padding: 20px 19px; }
.dash-layer-gray { background: #f0f1f4; }
.dash-layer-brand { background: linear-gradient(135deg, #eaf7ef 0%, #ddf0e4 100%); }
.dash-layer-gray .dash-kpi-grid { margin: 0; }
.dash-layer-gray .dash-bottom-row { padding: 0; }

/* Dashboard Compact Header */
.dash-header {
    background: #fff;
    border-bottom: none;
    margin: 14px 14px 0 !important; padding: 0 !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e5e5;
    border-left: 3px solid var(--brand);
}
.dash-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; min-height: 0;
}
.dash-header .dash-welcome { display: flex; align-items: center; gap: 12px; }
.dash-welcome-logo { flex-shrink: 0; }
.dash-logo-icon { width: 36px; height: 36px; }
.dash-logo-icon.dash-logo-custom { border-radius: 6px; background: #f5f5f5; padding: 3px; }
.dash-user-name { font-size: 16px; font-weight: 600; color: #333; margin-right: 10px; }
.dash-plan-badge {
    display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 10px;
    border-radius: 3px; background: var(--brand-light); color: var(--brand);
    letter-spacing: 0.5px; vertical-align: middle;
}
.dash-plan-badge .btn {
    color: var(--brand); font-size: 11px; padding: 0 0 0 6px;
    border: 0; background: none; vertical-align: baseline; opacity: 0.7;
}
.dash-plan-badge .btn:hover { opacity: 1; }
.dash-header-right { display: flex; align-items: center; gap: 16px; }
.dash-header-right .dash-quote {
    max-width: 400px;
}
.dash-header-right .dash-quote-text {
    font-size: 12px; line-height: 1.6; color: #888; font-style: italic;
}
.dash-header-right .dash-quote-source {
    font-size: 10px; color: #aaa; display: block; margin-top: 2px; text-align: right;
}
.dash-date { font-size: 12px; color: #999; white-space: nowrap; }

/* Integrate bar_menu into compact header on tablet/mobile */
@media (max-width: 991px) {
    #bar_menu {
        background: transparent !important; box-shadow: none !important;
        position: fixed; top: 0; right: 0; z-index: 1001;
        padding: 18px 16px; color: #555;
        border-radius: 0;
    }
    .dash-header-inner { padding-right: 56px; }
    .dash-header-right .dash-quote { max-width: 240px; }
}

/* KPI Compact Strip */
.dash-kpi-strip {
    display: flex; align-items: center; gap: 0;
    margin: 14px 14px 0; padding: 0;
    background: #fff; border-radius: var(--radius);
    border: 1px solid #e0e3e8; box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.dash-kpi-item {
    flex: 1; display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; text-decoration: none !important; color: #333;
    transition: background 0.15s; position: relative;
    border-right: 1px solid #f0f0f0;
}
a.dash-kpi-item:hover { background: #f8fafb; }
.dash-kpi-item:last-child { border-right: none; }
.dash-kpi-divider {
    width: 1px; height: 28px; background: #ddd; flex-shrink: 0; margin: 0 2px;
}
.dash-kpi-item-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dash-kpi-item-icon [data-lucide], .dash-kpi-item-icon svg.lucide {
    width: 16px; height: 16px; color: #2e7d32;
}
.dash-kpi-item-value {
    font-size: 20px; font-weight: 700; color: #2c3e50; line-height: 1;
    letter-spacing: -0.5px;
}
.dash-kpi-item-label {
    font-size: 10px; color: #888; font-weight: 500; white-space: nowrap;
}
.dash-kpi-item-trend {
    font-size: 10px; font-weight: 600; white-space: nowrap;
}
.dash-kpi-item-trend.is-up { color: #27ae60; }
.dash-kpi-item-trend.is-down { color: #e74c3c; }
.dash-kpi-item-trend [data-lucide], .dash-kpi-item-trend svg.lucide {
    width: 10px; height: 10px; vertical-align: -1px;
}

/* Quick Action Cards (rich, illustration-based) */
.dash-actions-section {
    margin: 18px 14px 0; padding: 0;
}
.dash-actions-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.dash-action-card {
    display: flex; flex-direction: column; justify-content: space-between;
    background: #fff; border-radius: 10px;
    border: 1.5px solid #d5e5da; overflow: hidden;
    text-decoration: none !important; color: #333; cursor: pointer;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
    position: relative;
}
.dash-action-card:hover {
    border-color: var(--brand);
    box-shadow: 0 4px 16px rgba(31, 93, 122, 0.15); /* brand-dark 半透明 */
    transform: translateY(-2px);
}
.dash-action-card-content {
    padding: 18px 18px 12px;
}
.dash-action-card-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
}
.dash-action-card-icon [data-lucide], .dash-action-card-icon svg.lucide {
    width: 18px; height: 18px; color: #2e7d32;
}
.dash-action-card-title {
    font-size: 14px; font-weight: 700; color: #2c3e50; line-height: 1.3;
    margin-bottom: 4px;
}
.dash-action-card-desc {
    font-size: 11px; color: #7f8c8d; line-height: 1.4;
}
.dash-action-card-illust {
    height: 80px;
    background-size: contain; background-repeat: no-repeat; background-position: right bottom;
    opacity: 0.7;
    margin: 0 8px;
    transition: opacity 0.18s;
}
.dash-action-card:hover .dash-action-card-illust { opacity: 0.9; }

/* Invite Card (within sidebar) */
.dash-invite-card {
    background: #fff; border-radius: var(--radius); padding: 18px;
    border: 1px solid #c8e6d0;
    background: linear-gradient(135deg, #fafffe 0%, #f0f9f3 100%);
}
.dash-invite-card-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: #333; margin-bottom: 8px;
}
.dash-invite-card-header [data-lucide], .dash-invite-card-header svg.lucide {
    width: 18px; height: 18px; color: var(--brand);
}
.dash-invite-card-desc {
    font-size: 12px; color: #777; line-height: 1.5; margin-bottom: 12px;
}
.dash-invite-card-actions {
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.dash-invite-social {
    width: 34px; height: 34px; border-radius: 50%;
    background: #f0f1f4; display: flex; align-items: center; justify-content: center;
    color: #666; transition: background 0.15s, color 0.15s;
}
.dash-invite-social:hover { background: var(--brand-light); color: var(--brand); }
.dash-invite-social [data-lucide], .dash-invite-social svg.lucide,
.dash-invite-social .fab { width: 16px; height: 16px; font-size: 16px; }
.dash-invite-card-copy {
    display: flex; gap: 6px;
}
.dash-invite-card-copy .dash-invite-url {
    flex: 1; width: auto; font-size: 11px;
}

/* KPI Grid (legacy) */
.dash-kpi-section-label {
    font-size: 11px; font-weight: 600; color: #888; letter-spacing: 0.5px;
    text-transform: uppercase; margin-bottom: 8px;
}
.dash-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin: 14px 14px 0; padding: 0;
}
.dash-kpi-grid.dash-kpi-3col { grid-template-columns: repeat(3, 1fr); margin: 0; }
.dash-kpi-card {
    background: #fff; border-radius: var(--radius); padding: 18px 16px 16px;
    text-align: center; text-decoration: none !important; color: #333;
    transition: box-shadow 0.15s, transform 0.15s;
    border: 1px solid #e0e3e8;
    position: relative;
}
a.dash-kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.dash-kpi-icon {
    margin-bottom: 8px;
}
.dash-kpi-icon [data-lucide], .dash-kpi-icon svg.lucide {
    width: 22px; height: 22px; color: var(--brand); opacity: 0.7;
}
.dash-kpi-card .dash-kpi-value {
    font-size: 28px; font-weight: 700; color: #2c3e50; line-height: 1.1;
    letter-spacing: -0.5px;
}
.dash-kpi-card .dash-kpi-label {
    font-size: 13px; color: var(--gray-800); margin-top: 6px; letter-spacing: 0.3px;
    font-weight: 700;
}
.dash-kpi-trend { font-size: 11px; margin-top: 8px; font-weight: 600; }
.dash-kpi-trend.is-up { color: #27ae60; }
.dash-kpi-trend.is-down { color: #e74c3c; }

/* Recent Plans */
.dash-recent {
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
    margin: 18px 14px 0; overflow: hidden;
    border: 1px solid #e0e3e8;
}
.dash-recent-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
}
.dash-recent-header h3 {
    margin: 0; font-size: 14px; font-weight: 700; color: #333;
    display: flex; align-items: center; gap: 8px;
}
.dash-recent-header h3::before {
    content: ''; display: inline-block; width: 3px; height: 16px;
    background: var(--brand); border-radius: 2px; flex-shrink: 0;
}
.dash-recent-link { font-size: 12px; color: var(--brand); font-weight: 500; }
.dash-recent-link:hover { text-decoration: underline; }
.dash-recent .table { font-size: 13px; margin-bottom: 0; }
.dash-recent .table td, .dash-recent .table th { padding: 10px 20px; border-top: 1px solid #f0f0f0; }
.dash-recent .table tbody tr { transition: background 0.12s; }
.dash-recent .table tbody tr:hover { background: #f8fafb; }
.dash-recent .table thead tr { background: #f8f9fa; }
.dash-recent .table thead tr th {
    color: #666; font-size: 11px; font-weight: 600;
    letter-spacing: 0.3px;
    border-bottom: 1px solid #e5e5e5; border-top: none;
}
.dash-recent .table tbody td a { color: #333; font-weight: 500; }
.dash-recent .table tbody td a:hover { color: var(--brand); }

/* Status badges */
.dash-badge {
    display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px;
    border-radius: 3px; letter-spacing: 0.3px; white-space: nowrap;
}
.dash-badge-green { background: #e8f5ec; color: #27ae60; }
.dash-badge-gray { background: #f0f1f4; color: #999; }
.dash-badge-red { background: #fde8e8; color: #c0392b; }
.dash-badge-yellow { background: #fff8e1; color: #e67e22; }

/* Quick Action Cards */
.dash-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0; }
.dash-card {
    display: flex; align-items: center; background: #fff; border-radius: var(--radius);
    padding: 14px 16px; border: 1px solid #e5e5e5;
    transition: box-shadow 0.15s, transform 0.15s;
    text-decoration: none !important; color: #333; cursor: pointer;
}
.dash-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); border-color: #d0d0d0; }
.dash-card-icon { font-size: 20px; color: var(--brand); width: 36px; flex-shrink: 0; }
.dash-card-icon [data-lucide], .dash-card-icon svg.lucide { width: 20px; height: 20px; color: var(--brand); }
.dash-card-body { min-width: 0; }
.dash-card-title { font-size: 13px; font-weight: 600; color: #333; line-height: 1.3; }
.dash-card-desc { font-size: 11px; color: #999; margin-top: 2px; }

/* KPI Row (legacy - kept for backward compat) */
.dash-kpi-row { display: flex; border-bottom: 1px solid #eee; }
.dash-kpi {
    flex: 1; text-align: center; padding: 18px 12px;
    text-decoration: none !important; transition: background 0.15s;
}
.dash-kpi:hover { background: #f8f9fa; }
.dash-kpi + .dash-kpi { border-left: 1px solid #eee; }

/* Stats Search */
.dash-search-field {
    position: relative !important; margin: 12px 20px;
}
.dash-search-icon {
    position: absolute !important; left: 13px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 18px !important; color: #aaa; pointer-events: none !important; z-index: 2 !important;
    bottom: auto !important;
}
.dash-search-icon i, .dash-search-icon svg {
    width: 15px !important; height: 15px !important; color: inherit !important; display: block !important;
}
.dash-search-field input {
    width: 100% !important; height: 38px !important; padding: 0 14px 0 38px !important;
    border: 1px solid #e0e0e0 !important; border-radius: 6px !important; font-size: 13px !important;
    color: #333 !important; background: #f8f9fa !important; outline: none !important; box-sizing: border-box !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: block !important;
}
.dash-search-field input::placeholder { color: #bbb; }
.dash-search-field input:focus {
    border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(39,174,96,0.1) !important;
    background: #fff !important;
}
.dash-search-field input:focus ~ .dash-search-icon,
.dash-search-field:focus-within .dash-search-icon { color: var(--brand); }

/* Invite Banner */
.dash-layer-brand .dash-invite { margin: 0; }
.dash-invite {
    background: #fff; border-radius: var(--radius); padding: 16px 20px;
    border: 1px solid #c8e6d0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.dash-invite-text { flex: 1; min-width: 200px; font-size: 13px; color: #333; }
.dash-invite-text strong { font-weight: 600; }
.dash-invite-text h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #333; }
.dash-invite-text p { margin: 0; font-size: 12px; color: #777; }
.dash-invite-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-invite-actions a { color: #888; font-size: 20px; transition: color 0.15s; }
.dash-invite-actions a:hover { color: #333; }
.dash-invite-url {
    font-size: 12px; padding: 6px 10px; border: 1px solid #ddd;
    border-radius: 4px; width: 280px; max-width: 100%; color: #555; background: #fafafa;
}
.dash-invite-copy {
    font-size: 12px; padding: 6px 12px; border: 1px solid #ddd;
    border-radius: 4px; background: #fff; color: #555; cursor: pointer;
    transition: background 0.15s; white-space: nowrap;
}
.dash-invite-copy:hover { background: #f5f5f5; }
.dash-invite-toast { font-size: 12px; color: var(--brand); font-weight: 600; opacity: 0; transition: opacity 0.3s; }
.dash-invite-toast.show { opacity: 1; }

/* Widget Title (bottom widgets) */
.dash-widget-header {
    background: #fff !important; padding: 14px 18px !important;
    border-bottom: 1px solid #e5e5e5;
}
.dash-widget-header h3 {
    margin: 0; font-size: 14px; font-weight: 700; color: #333;
    display: flex; align-items: center; gap: 8px;
}
.dash-widget-header h3::before {
    content: ''; display: inline-block; width: 3px; height: 16px;
    background: var(--brand); border-radius: 2px; flex-shrink: 0;
}
.dash-widget-header h3 a { font-size: 12px; font-weight: 400; color: var(--brand); }
.dash-widget-header + .widget-extra { padding: 16px 18px; }
.dash-widget-header + .widget-extra .table { font-size: 13px; }
.dash-widget-header + .widget-extra .table td, .dash-widget-header + .widget-extra .table th { padding: 8px 6px; }

/* Bottom widget cards */
#dash-proposal-stats, #dash-proposal-stats .widget, .dash-widget-header ~ .widget-extra { overflow: hidden; }
.row > .col-md-6 > .widget { border-radius: var(--radius); box-shadow: none; border: 1px solid #e5e5e5; overflow: hidden; }
.row > .col-md-6 > .widget .dash-widget-header { border-radius: var(--radius) var(--radius) 0 0; }

.dash-bottom-row { display: flex; gap: 14px; padding: 20px 14px 0; }
.dash-bottom-row > .col-md-6, .dash-bottom-row > .col-md-7, .dash-bottom-row > .col-md-5 { width: auto; float: none; padding: 0; }
.dash-bottom-row > .col-md-7 { flex: 7; }
.dash-bottom-row > .col-md-5 { flex: 5; }


/* =================================================================
   11. PAGE-SPECIFIC
   ================================================================= */

/* Page unified header */
.page-unified-header { background: #fff; border-bottom: 2px solid var(--brand); padding: 18px 24px; }
.page-unified-header h1 {
    font-size: 18px; font-weight: 700; color: #333; margin: 0;
    display: flex; align-items: center; gap: 10px;
}
.page-unified-header h1 svg.lucide { color: var(--brand); width: 20px; height: 20px; }
.page-unified-header .page-desc { font-size: 13px; color: #888; font-weight: 400; margin-left: 30px; }

/* Instruction boxes */
.instruction {
    padding: 12px; background-color: #ebf2ee; border-radius: var(--radius);
    margin-bottom: 1em; margin-top: 6px; line-height: 2em;
}
.instruction textarea { width: 60% !important; height: 160px; }
.instruction:hover { height: auto; }

/* Wizard background images */
.bg_family { background: url("/img/wizard/family.png") no-repeat; background-size: contain; background-position: right; }
.bg_insurance { background: url("/img/wizard/insurance.png") no-repeat; background-size: contain; background-position: right; }
.bg_income { background: url("/img/wizard/income.png") no-repeat; background-size: contain; background-position: right; }
.bg_pension { background: url("/img/wizard/pension.png") no-repeat; background-size: contain; background-position: right; }
.bg_education { background: url("/img/wizard/education.png") no-repeat; background-size: contain; background-position: right; }
.bg_living { background: url("/img/wizard/living.png") no-repeat; background-size: contain; background-position: right; }
.bg_home { background: url("/img/wizard/home.png") no-repeat; background-size: contain; background-position: right; }
.bg_transport { background: url("/img/wizard/transport.png") no-repeat; background-size: contain; background-position: right; }
.bg_dream { background: url("/img/wizard/dream.png") no-repeat; background-size: contain; background-position: right; }
.bg_loan { background: url("/img/wizard/loan.png") no-repeat; background-size: contain; background-position: right; }
.bg_account { background: url("/img/wizard/account.png") no-repeat; background-size: contain; background-position: right; }

/* Profile page */
.user_icon { height: 80px; }

/* Content header media */
.content-header-media { position: relative; overflow: hidden; border-top-color: #222; }
.content-header-media .header-section {
    z-index: 200; position: absolute; top: 0; left: 0; right: 0; color: #fff;
    background: rgba(0,0,0,0.6); height: 100%;
}
.content-header-media small, .content-header-media i { color: #ddd; }

/* Tab content */
#tab-content h3 a { margin-left: 12px; }
#tab-content h3 a img { margin-right: 2px; }
#tab-content h3 .label { margin-left: 9px; font-size: .8em; padding: 6px 12px; opacity: .6; }
#tab-content h3 .label:hover { opacity: 1; }

/* Tab lists */
.tab_list.nav-tabs > li.active a {
    border-bottom: none; border-color: #8cad9e !important;
    background: #8cad9e !important; color: #fff;
}
.tab_list.nav-tabs > li:first-child > a { margin-left: 0; }
.tab_list.nav-tabs > li > a { border: 1px solid #ddd; border-bottom: none; background: #f8f8f8; height: 40px; }
ul.nav.nav-tabs.tab_list {
    top: 47px; border-bottom: solid 1px #8cad9e !important;
    margin-bottom: -1px; padding-top: 7px;
}
.tab_list.nav-tabs > li > a { border-bottom: solid 1px #8cad9e !important; margin-bottom: -1px; }

/* Analysis tabs — styled in wizard.css */
#analysis_tab_list > li:first-child > a { margin-left: 0; }
/* #analysis_result_area border — handled by #analysis_contents in wizard.css */

/* Static menu (wizard pills) */
#static_menu { padding-top: 6px; }
#static_menu .wizard.active, #static_menu .wizard:hover {
    background-color: #8cad9e !important; color: #fff !important; font-weight: bold;
}
#static_menu .nav-pills { border-bottom: solid 1px #8cad9e !important; margin-bottom: -1px; }
#static_menu .nav-pills li a.wizard, #static_menu .nav-pills li a.btn-default {
    background-color: #f8f8f8; color: var(--brand); border: solid 1px #ddd !important;
    border-bottom: none !important; font-weight: bold;
}
#static_menu .nav-pills li a.wizard span { margin-right: 3px; font-family: serif; font-weight: normal; }
#static_menu .nav-pills > li > a { border-radius: 4px 4px 0 0; }

/* Insurance / boxgroup */
div#insurance, div.boxgroup {
    background-color: #f1e5c9; border: solid 2px var(--brand); border-top-color: #f1e5c9;
}

/* Tab panel */
.tab-panel .tab-content.block { border-color: #ddd !important; }

/* Count target */
.count_target > .panel-default { background: rgb(194 194 194 / 10%) !important; }
.count_target { box-shadow: 0 6px 6px -5px rgba(0,0,0,0.3); background: #fff; margin-bottom: 1.5em !important; }

/* Tool boxes */
.tool_box, .loan_tool_box { background: linear-gradient(300deg, #e5e5e5, #b0b0b0); }
.tool_box input, .loan_tool_box input { background: #fff !important; }
.tool_box:before, .loan_tool_box:before {
    content: "PRO Tool"; margin-right: 1em; font-weight: bold; font-style: italic;
    font-family: serif; color: #fff; font-size: 1.2em; margin-top: 4px;
}

/* Securities */
.securities_ratio label { color: #999; font-weight: normal; font-size: .8em; margin-right: 3px; }
.init_balance input[type=text], .securities_cell input[type=text],
.securities_cell input[type=number] { width: 80px; }
.init_balance.securities_ratio { border-left: solid 1px #fff; }

/* Login */
#login-background {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    background: linear-gradient(180deg, #dce3e8 0%, #e8edef 30%, #f0f2f4 60%, #f5f5f5 100%);
    overflow: hidden;
}
#login-background img {
    height: auto;
    opacity: 0.15;
}
#login-alt-container { display: none; }
#login-container {
    max-width: 460px; margin: 60px auto;
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md);
    overflow: hidden; position: relative; z-index: 1;
}
#login-container .login-title {
    padding: 28px 24px 20px; background: #fff; text-align: center;
    border-bottom: 2px solid var(--brand);
}
#login-container .login-title h1 { font-size: 22px; font-weight: 700; color: #333; margin: 0; }
#login-container .login-title h1 i { color: #999; }
#login-container .login-title h1 small { font-size: 14px; color: #888; display: block; margin-top: 6px; font-weight: 400; }
#login-container > .block { border: none; padding: 28px 32px; margin: 0; box-shadow: none; background: #fff; }
#login-container footer { padding: 16px 24px; border-top: 1px solid #eee; }

/* Login Form - Modern */
.login-form { }
.login-form-title { font-size: 15px; font-weight: 700; color: #333; margin: 0 0 18px; }
#login-container .login-field {
    position: relative !important; margin-bottom: 14px;
}
#login-container .login-field .login-icon {
    position: absolute !important; left: 14px !important; top: 0 !important; bottom: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 18px !important; color: #bbb !important; pointer-events: none; z-index: 2;
    margin: 0 !important; padding: 0 !important;
}
#login-container .login-field .login-icon i,
#login-container .login-field .login-icon svg {
    width: 18px !important; height: 18px !important; color: inherit !important;
    display: block !important; position: static !important;
}
#login-container .login-field > input,
#login-container .login-field > select {
    width: 100% !important; height: 48px !important; padding: 0 14px 0 44px !important;
    border: 1px solid #ddd !important; border-radius: var(--radius) !important; font-size: 14px !important;
    color: #333 !important; background: #fafafa !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none !important; box-sizing: border-box !important;
}
#login-container .login-field > input:focus,
#login-container .login-field > select:focus {
    border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(39,174,96,0.1) !important;
    background: #fff !important;
}
#login-container .login-field > input::placeholder { color: #bbb !important; }
.login-field-row { display: flex; gap: 10px; }
.login-field-row .login-field { flex: 1; }
.login-field-row .login-field:first-child > input { padding-left: 44px; }
.login-field-row .login-field:last-child > input { padding-left: 14px; }
.login-field-row .login-field > input { height: 48px; }

/* Login buttons */
.login-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 48px; padding: 0 20px; border: none;
    border-radius: var(--radius); font-size: 14px; font-weight: 600;
    text-align: center; cursor: pointer; transition: all 0.15s;
    text-decoration: none !important; margin-bottom: 10px;
    box-sizing: border-box;
}
.login-btn-primary {
    background: var(--brand); color: #fff;
}
.login-btn-primary:hover { background: var(--brand-dark); color: #fff; }
.login-btn-google {
    background: #fff; color: #333; border: 1px solid #ddd;
}
.login-btn-google:hover { background: #f8f8f8; color: #333; border-color: #bbb; }
.login-btn-google .google-logo { margin-right: 10px; flex-shrink: 0; vertical-align: middle; }

/* Divider */
.login-divider {
    display: flex; align-items: center; margin: 18px 0;
    font-size: 12px; color: #aaa;
}
.login-divider::before, .login-divider::after {
    content: ''; flex: 1; height: 1px; background: #eee;
}
.login-divider span { padding: 0 12px; }

/* Links */
.login-links {
    display: flex; justify-content: center; gap: 20px;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid #f0f0f0;
}
.login-links a { font-size: 13px; color: #888; transition: color 0.15s; }
.login-links a:hover { color: var(--brand); }

/* Register hero */
.login-register-hero { text-align: center; margin-bottom: 18px; }
.login-register-badge {
    display: inline-block; background: var(--brand-light); color: var(--brand);
    font-weight: 700; font-size: 16px; padding: 6px 18px;
    border-radius: 20px; margin-bottom: 6px;
}
.login-register-hero p { font-size: 14px; color: #555; margin: 4px 0 8px; font-weight: 600; }

/* Option groups (radio, select) */
.login-option-group {
    background: #f8f9fa; border-radius: var(--radius);
    padding: 14px 16px; margin-bottom: 14px;
}
.login-option-label { font-size: 12px; font-weight: 700; color: #555; margin-bottom: 8px; display: block; }
.login-radio-row { display: flex; gap: 16px; }
.login-radio { font-size: 13px; color: #555; font-weight: 400; cursor: pointer; }
.login-radio input { margin-right: 4px; accent-color: var(--brand); }
.login-select-wrap { margin-bottom: 6px; }
.login-select {
    width: 100%; height: 40px; padding: 0 12px; border: 1px solid #ddd;
    border-radius: var(--radius); font-size: 13px; background: #fff; color: #333;
    box-sizing: border-box;
}
.login-safe-note {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--brand-light); border-radius: var(--radius);
    padding: 12px 14px; margin-top: 10px;
}
.login-safe-note > i,
.login-safe-note > svg {
    width: 20px !important; height: 20px !important; color: var(--brand); flex-shrink: 0; margin-top: 1px;
}
.login-safe-note-title { font-size: 12px; font-weight: 700; color: #333; line-height: 1.4; }
.login-safe-note-desc { font-size: 11px; color: #666; line-height: 1.5; margin-top: 2px; }

/* Year/month inputs */
.year_input { width: 45px; }
.month_input { width: 25px; }

/* Delete column */
.delete_td { width: 20px; text-align: right; }

/* Highcharts */
.highcharts-container { overflow: visible !important; }
.datalabelInside {
    font-size: 12px; font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    border: solid 1px #ddd; padding: 2px; background: #fff;
}

/* Help entry */
.help_entry {
    position: fixed; z-index: 1000; border: solid 8px; padding: 0;
    margin-left: 20px; margin-right: 20px; width: calc(100% - 40px);
    background: #fff; max-width: 500px;
}

/* Analysis sheet — スタイル専用クラス .analysis-output が分析出力ラッパー全経路に付く:
   - 結果画面 (my/index.php, share/index.php, invoice/index.php)
   - ウィザード分析タブ (wizard/form.php — JS 用に id="analysis_sheet" も併設)
   - 設定画面のインライン分析 (template_scripts.php の .analyze_content にも付与)
   ID #analysis_sheet は JS 参照専用に残してあり、CSS はこのクラスに統一。 */
.analysis-output input, .analysis-output select { font-weight: bold; }
.analysis-output input, .analysis-output select, .analysis-output textarea { border: 1px solid darkgray; background-color: lightgoldenrodyellow !important; }
.analysis-output .table { margin-bottom: 0; }
.analysis-output .table tfoot > tr > td { padding: 7px; }
.analysis-output table th { background-color: #fafcfb; }

/* #cmt_list */
#cmt_list { display: none; }
div#cmt_list.affix { right: 0; top: 0; }

/* Comment area */
.cmt_area { border: solid 3px #666 !important; margin-bottom: 32px; }

/* All check box */
.all_check_box { color: #111; left: 19px; padding: 1em; position: absolute; bottom: 0; }

/* Wizard table heads — :not(.analysis-output *) で分析出力テーブルを除外。
   結果画面と同じ素の状態にし、.analysis-output table th が specificity 競争なく勝てるようにする。 */
#wizard table:not(.analysis-output *) thead tr th { font-size: 12px !important; color: #111 !important; background: var(--brand-light); }

/* Cashflow */
.cashflow_area .detail_sheet { height: auto !important; }

/* Error page */
#error-container { padding: 120px 20px; position: relative; }
#error-container h1 { font-size: 96px; color: #fff; margin-bottom: 40px; }
#error-container h2 { color: #ccc; margin-bottom: 40px; line-height: 1.4; }

/* #images */
#images img { max-width: 150px; }
#images a { overflow: hidden; width: 120px; height: 100px; display: block; float: left; margin: 6px; }

/* Autosize */
.autosize { height: 7em; line-height: 1.5em; }
.important { font-size: 1.4em; }
li.fa_lg_btn { font-size: 1.2em; }
.no-border { border: none !important; }
h3 a { float: right; }

/* Remove field */
a.remove_field { vertical-align: middle; }
a.remove_field i:hover, a.remove_field i:focus { color: red; }


/* =================================================================
   12b. PLAN LIST (userplan/list)
   ================================================================= */

/* Filter select (reusable) */
.cl-filter-select {
    border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px;
    font-size: 13px; background: #fff; cursor: pointer; color: var(--text);
}
.cl-filter-select:hover { border-color: var(--gray-400); }

/* Asset toggle button */
.cl-asset-toggle-btn {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px;
    font-size: 13px; background: #fff; cursor: pointer; color: var(--text);
    transition: background .15s, border-color .15s;
}
.cl-asset-toggle-btn:hover { border-color: var(--gray-400); background: var(--gray-50); }
.cl-asset-toggle-btn i { width: 14px; height: 14px; }
.cl-asset-toggle-btn .cl-asset-toggle-arrow { transition: transform .2s; }
.cl-asset-toggle-btn.active { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
.cl-asset-toggle-btn.active .cl-asset-toggle-arrow { transform: rotate(180deg); }

/* Plan table — asset columns hidden by default */
.cl-plan-table .cl-asset-col { display: none; }
.cl-plan-table.show-assets .cl-asset-col { display: table-cell; }

/* Simulation cell stays hidden */
.simulation_cell { display: none; }

/* =================================================================
   12. UTILITIES & PRINT
   ================================================================= */

/* Lucide generic */
.lucide-icon { width: 18px; height: 18px; vertical-align: middle; display: inline-block; }

/* Themed backgrounds (spring) */
.themed-color { color: var(--brand); }
.themed-border { border-color: var(--brand); }
.themed-background { background-color: var(--brand); }
.themed-color-dark { color: #344a3d; }
.themed-border-dark { border-color: #344a3d; }
.themed-background-dark { background-color: #344a3d; }

/* Themed named variants */
.themed-color-spring { color: var(--brand) !important; }
.themed-border-spring { border-color: var(--brand) !important; }
.themed-background-spring { background-color: var(--brand) !important; }
.themed-color-dark-spring { color: #344a3d !important; }
.themed-border-dark-spring { border-color: #344a3d !important; }
.themed-background-dark-spring { background-color: #344a3d !important; }

/* Other theme color classes (keep for compatibility) */
.themed-color-default { color: var(--brand) !important; }
.themed-border-default { border-color: var(--brand) !important; }
.themed-background-default { background-color: var(--brand) !important; }
.themed-color-dark-default { color: #344a3d !important; }
.themed-border-dark-default { border-color: #344a3d !important; }
.themed-background-dark-default { background-color: #344a3d !important; }

/* Full overlay */
.full-overlay {
    position: fixed; left: 0; top: 20%; width: 100%; height: 50%;
    background: rgba(100,100,100,.6); z-index: 2147483647;
    text-align: center; vertical-align: middle; right: 0;
    display: flex; align-items: center; justify-content: center;
}

/* Vertical text */
.vertical { writing-mode: vertical-rl; text-orientation: upright; }

/* Protected rows */
tr.protected { opacity: .3; }

/* Helper margins/padding */
.push-bit { margin-bottom: 10px !important; }
.push { margin-bottom: 15px !important; }
.push-top-bottom { margin-top: 40px; margin-bottom: 40px; }
.display-none { display: none; }
.remove-margin { margin: 0 !important; }
.remove-margin-bottom { margin-bottom: 0 !important; }
.remove-padding { padding: 0 !important; }
.remove-radius { border-radius: 0 !important; }
.remove-box-shadow { box-shadow: none !important; }
.remove-transition { transition: none !important; }
.list-li-push li { margin-bottom: 10px; }

/* Removing shadows and radius */
.navbar-form-custom .form-control:hover, .navbar-form-custom .form-control:focus,
.navbar-form, .navbar-collapse, .form-control, .form-control:focus,
.has-success .form-control:focus, .has-warning .form-control:focus, .has-error .form-control:focus,
.popover, .progress, .progress-bar, .btn.active, .open .btn.dropdown-toggle, .panel { box-shadow: none; }

.navbar-form-custom .form-control, .navbar, .dropdown-menu,
.tooltip-inner, .breadcrumb, .alert.alert-alt { border-radius: 0; }

/* Navs */
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus,
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus,
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { color: #fff; background-color: var(--brand); }

.nav > li i { font-size: 14px; }
.nav > li > a:hover, .nav > li > a:focus { background-color: #fafcfb; }
.nav-tabs { border-bottom-color: #ebf2ee; }
.nav-tabs > li { margin-bottom: 0; }
.nav-tabs > li > a { padding-left: 7px; padding-right: 7px; margin-bottom: -1px; }
.nav-tabs > li > a:hover { border-color: #ebf2ee; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #344a3d; border-color: #ebf2ee; border-bottom-color: transparent;
}
.nav .caret, .nav a:hover .caret, .nav a:focus .caret { border-top-color: var(--brand); border-bottom-color: var(--brand); }

/* Dropdown */
.dropdown-menu {
    padding: 0; font-size: 13px; border-color: #dbe1e8;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.dropdown-menu > li > a { padding: 6px 10px; }
.dropdown-menu i { opacity: 0.2; line-height: 17px; }
.dropdown-menu a:hover i { opacity: 0.5; }
.dropdown-menu .divider { margin: 2px 0; padding: 0 !important; background-color: #f0f0f0; }
li.dropdown-header {
    padding: 5px 10px; color: #344a3d; background-color: #fafcfb;
    border-top: 1px solid #ebf2ee; border-bottom: 1px solid #ebf2ee;
}
.dropdown-menu li:first-child.dropdown-header { border-top: none; border-top-left-radius: 3px; border-top-right-radius: 3px; }
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -3px; margin-left: 0; }
.dropdown-submenu:hover > .dropdown-menu { display: block; }

/* Pagination */
.pagination > li > a, .pagination > li > span {
    color: var(--brand); margin-left: 5px; margin-right: 5px; border: none !important; border-radius: 25px !important;
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover { background-color: var(--brand); }
.pager > li > a, .pager > li > span { border-color: #ebf2ee; }
.pager > li > a:hover, .pagination > li > a:hover { background-color: var(--brand); border-color: var(--brand); color: #fff; }

/* Modals */
.modal-content { border-radius: 3px; }
.modal-header { padding: 15px 15px 14px; border-bottom: 1px solid #eee; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.modal-title { font-weight: 300; }
.modal-body { padding: 20px 15px; }
.modal-body .nav-tabs { margin: 0 -15px 15px; padding: 0 5px !important; }
.modal-footer {
    margin-top: 0; padding: 14px 15px 15px; border-top: 1px solid #eee;
    background-color: #f9f9f9; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
}

/* Tooltip */
.tooltip { z-index: 1051; }
.tooltip.in { opacity: 1; }
.tooltip-inner { padding: 4px 6px; background-color: #000; color: #fff; }
.tooltip.top .tooltip-arrow, .tooltip.top-left .tooltip-arrow, .tooltip.top-right .tooltip-arrow { border-top-color: #000; }
.tooltip.right .tooltip-arrow { border-right-color: #000; }
.tooltip.left .tooltip-arrow { border-left-color: #000; }
.tooltip.bottom .tooltip-arrow, .tooltip.bottom-left .tooltip-arrow, .tooltip.bottom-right .tooltip-arrow { border-bottom-color: #000; }

/* Popover */
.popover-title { background: none; border: none; font-size: 17px; font-weight: 600; }

/* Progress Bars */
.progress, .progress-bar { height: 20px; line-height: 20px; }
.progress-bar-danger { background-color: var(--danger); }
.progress-bar-warning { background-color: var(--warning); }
.progress-bar-success { background-color: #2ecc71; }
.progress-bar-info { background-color: var(--info); }

/* Alerts */
.alert { border-top-width: 0; border-right-width: 2px; border-bottom-width: 0; border-left-width: 2px; }
.alert-danger { color: var(--danger); background-color: #ffd1cc; border-color: #ffb8b0; }
.alert-warning { color: #e67e22; background-color: #ffe4cc; border-color: #ffd6b2; }
.alert-success { color: var(--brand); background-color: #daf2e4; border-color: #b8e5cb; }
.alert-info { color: var(--info); background-color: #dae8f2; border-color: #b8d2e5; }
.close { text-shadow: none; }
.alert.alert-alt { margin: 0 0 2px; padding: 5px; font-size: 12px; border-width: 0; border-left-width: 2px; }
.alert-danger.alert-alt { border-color: var(--danger); }
.alert-warning.alert-alt { border-color: #e67e22; }
.alert-success.alert-alt { border-color: var(--brand); }
.alert-info.alert-alt { border-color: var(--info); }

/* Labels, Badges */
.label, .badge { font-weight: normal; font-size: 90%; }
.label { padding: 1px 4px; }
.badge { background: rgba(0,0,0,0.3); padding: 3px 6px; }
.label-danger { background-color: var(--danger); }
.label-warning { background-color: #e67e22; }
.label-success { background-color: var(--brand); }
.label-info { background-color: #2980b9; }
.label-primary { background-color: var(--brand); }
.label-default { background-color: #999; }

/* Panels */
.panel { margin-bottom: 20px; }
.panel-heading { padding: 5px; }
.panel-title { font-size: 14px; }
.panel-default > .panel-heading { background-color: #f9f9f9; }
.panel-group { margin-bottom: 5px !important; }

/* Code */
code { border: 1px solid #fad4df; margin: 1px 0; display: inline-block; }
.btn code { display: inline; margin: 0; }

/* Well */
.well { background-color: #f9f9f9; border: 1px solid #eee; }

/* Bottom margin */
p, .table, .alert, .carousel { margin-bottom: 20px; }

/* NProgress */
#nprogress .bar { background-color: var(--brand); }
#nprogress .peg { box-shadow: 0 0 10px var(--brand), 0 0 5px var(--brand); }
#nprogress .spinner-icon { border-top-color: var(--brand); border-left-color: var(--brand); }

/* Mobile */
@media screen and (max-width: 768px) {
    #page-content { padding: 0; }
    .block.full { padding: 0 !important; }
    .setting_menu li { width: 16%; }
    .setting_menu li:nth-child(7) { margin-left: 0; }
    .setting_menu li span { display: block; font-size: 8px; }
    .setting_menu li a { font-size: 12px; padding: 5px; height: 50px; }
    .nav > li > a:hover:before, .nav > li > a:focus:before, .nav > li > a.active:before { border: none !important; }
    #analysis_contents { padding: 0; }
}

/* =================================================================
   12. CUSTOMERS LIST
   ================================================================= */

.cl-page-header {
    background: #fff;
    margin: 14px 14px 0; padding: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e5e5;
    border-left: 3px solid var(--brand);
}
.cl-page-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
}
.cl-page-title { display: flex; align-items: center; gap: 12px; }
.cl-page-title h2 { font-size: 16px; font-weight: 600; color: #333; margin: 0; }
.cl-page-actions { display: flex; align-items: center; gap: 10px; }

.cl-search-bar {
    background: #fff; border-radius: var(--radius);
    margin: 14px 14px 0; padding: 0;
    border: 1px solid #e5e5e5;
}
.cl-search-main {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px 4px 0;
}
.cl-search-main .dash-search-field { flex: 1; margin: 8px 0 8px 12px; }
.cl-filter-toggle {
    background: none; border: 1px solid #e0e0e0; border-radius: 6px;
    padding: 7px 12px; font-size: 12px; color: #666; cursor: pointer;
    display: flex; align-items: center; gap: 4px; white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.cl-filter-toggle:hover { border-color: var(--brand); color: var(--brand); }
.cl-filter-toggle.active {
    border-color: var(--brand); color: #fff; background: var(--brand);
}
.cl-filter-toggle svg { width: 14px; height: 14px; }
.cl-sort-toggle { display: flex; align-items: center; padding-right: 8px; }
.cl-sort-toggle a { color: #666; display: flex; }
.cl-sort-toggle a:hover { color: var(--brand); }
.cl-sort-toggle svg { width: 18px; height: 18px; }

.cl-filters {
    border-top: 1px solid #f0f0f0;
    padding: 12px 18px 14px;
}
.cl-filters-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
}
.cl-filter-item label {
    display: block; font-size: 11px; font-weight: 600; color: #888;
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px;
}
.cl-filter-input {
    width: 100%; height: 34px; padding: 0 10px;
    border: 1px solid #e0e0e0; border-radius: 5px; font-size: 13px;
    color: #333; background: #f8f9fa; outline: none; box-sizing: border-box;
    transition: border-color 0.15s;
}
.cl-filter-input:focus { border-color: var(--brand); background: #fff; }
select.cl-filter-input { padding-right: 24px; }
.cl-filters-actions { margin-top: 12px; text-align: right; }
.cl-filters-actions a {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 500;
    color: #e74c3c; background: #fef2f2; border: 1px solid #fecaca;
    text-decoration: none; transition: background 0.15s, border-color 0.15s;
}
.cl-filters-actions a:hover { background: #fee2e2; border-color: #f87171; text-decoration: none; color: #c0392b; }
.cl-filters-actions a svg { width: 13px; height: 13px; }

/* Legend */
.cl-legend {
    margin: 10px 14px 0; padding: 8px 14px;
    display: flex; flex-wrap: wrap; gap: 16px;
    font-size: 12px; color: #999;
    background: #fafbfc; border-radius: var(--radius);
    border: 1px solid #f0f0f0;
}
.cl-legend-item {
    display: inline-flex; align-items: center; gap: 4px;
}
.cl-legend-item svg { width: 13px; height: 13px; flex-shrink: 0; }
.cl-legend-item i[data-lucide="external-link"],
.cl-legend-item i[data-lucide="external-link"] ~ svg { color: var(--info); }
.cl-legend-item i[data-lucide="log-in"],
.cl-legend-item i[data-lucide="log-in"] ~ svg { color: #2e7d32; }
.cl-legend-item i[data-lucide="lock"],
.cl-legend-item i[data-lucide="lock"] ~ svg { color: #aaa; }
.cl-legend-label { font-weight: 600; color: #555; }
.cl-legend-desc { color: #aaa; }
@media (max-width: 600px) {
    .cl-legend { flex-direction: column; gap: 6px; }
}

/* Table wrap */
.cl-table-wrap { margin: 0 14px 14px; }

/* Table */
.cl-table { font-size: 14px; margin-bottom: 0; background: #fff; border-radius: var(--radius); overflow: hidden; }
.cl-table thead tr { background: var(--brand); }
.cl-table thead tr th {
    font-size: 12px; font-weight: 600; color: #fff;
    letter-spacing: 0.3px; border-bottom: none; padding: 10px 16px;
}
.cl-table td { padding: 10px 16px; border-top: 1px solid #f0f0f0; vertical-align: middle; }
.cl-table tbody tr { transition: background 0.12s; }
.cl-table tbody tr:hover { background: #f0f7f2; }
.cl-table tbody td a { color: #333; font-weight: 500; }
.cl-table tbody td a:hover { color: var(--brand); }
.cl-table svg { width: 14px; height: 14px; }
.cl-table .ps-chart svg { width: 130px; height: 130px; }

/* Row types */
.cl-clickable-row { cursor: pointer; }
.cl-template-row { background: #f7f8fa; border-left: 3px solid var(--brand); }
tr.lock { background: #f9f8f6; }
tr.lock td:first-child { position: relative; }

/* Cell helpers */
.cl-code {
    font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; color: #888;
    background: #f0f1f4; padding: 2px 6px; border-radius: 3px;
}
.cl-customer-name {
    display: inline-flex; align-items: center; gap: 5px;
    font-weight: 500; line-height: 1.4;
}
.cl-icon-muted { color: #ccc; flex-shrink: 0; }
.cl-icon-lock { color: #bbb; width: 12px !important; height: 12px !important; flex-shrink: 0; }
.cl-icon-link {
    color: var(--info); opacity: 0.6; margin-left: 4px;
    transition: opacity 0.15s;
}
.cl-icon-link:hover { opacity: 1; }
.cl-adviser-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 600;
    background: #e8f5e9; color: #2e7d32;
    padding: 1px 7px; border-radius: 10px;
    margin-left: 6px; text-decoration: none;
    transition: background 0.15s;
}
.cl-adviser-badge svg { width: 11px; height: 11px; }
.cl-adviser-badge:hover { background: #c8e6c9; color: #1b5e20; text-decoration: none; }
/* Row Actions */
.cl-row-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 4px;
}
.cl-row-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 6px;
    color: #aaa; background: #f5f6f8; text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.cl-row-action svg { width: 15px; height: 15px; }
.cl-row-action:hover { background: #e8f5e9; color: var(--brand); }
.cl-row-action[title="データリンク"] { color: #7ab8d0; background: #eef7fb; }
.cl-row-action[title="データリンク"]:hover { color: #2196F3; background: #e3f2fd; }
.cl-row-action[title="メール送信"] { color: #8bc4a0; background: #eef7f1; }
.cl-row-action[title="メール送信"]:hover { color: var(--brand); background: #e8f5e9; }
.cl-row-action-delete { margin-left: 8px; }
.cl-row-action-delete a:hover, .cl-row-action-delete .btn:hover { color: #e74c3c; }
.cl-plan-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--brand); font-weight: 500; font-size: 12px;
}
.cl-plan-link:hover { text-decoration: underline; }
.cl-email {
    font-size: 12px; color: #666 !important; word-break: break-all;
}
.cl-email:hover { color: var(--brand) !important; }
.cl-memo {
    font-size: 13px; color: #777; max-width: 300px;
}
.cl-memo-cell {
    cursor: text; min-height: 20px; padding: 2px 4px; border-radius: 4px;
    white-space: pre-wrap; word-break: break-word;
    transition: background 0.15s;
}
.cl-memo-cell:hover { background: #f0f4f8; }
.cl-memo-textarea {
    width: 100%; min-height: 60px; padding: 6px 8px; border: 1px solid var(--brand); border-radius: 4px;
    font-size: 13px; color: #333; background: #fff; resize: vertical;
    font-family: inherit; line-height: 1.5;
    outline: none; box-shadow: 0 0 0 2px rgba(76,175,80,0.15);
}
.cl-memo-saving { opacity: 0.6; pointer-events: none; }
.cl-actions { text-align: center; }
.cl-mobile-code { margin-bottom: 2px; }

/* Empty / welcome states */
.cl-empty-msg { text-align: center; padding: 24px 16px !important; color: #999; }
.cl-welcome-msg { padding: 48px 16px !important; }
.cl-welcome-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cl-welcome-inner p { margin: 0; color: #666; font-size: 14px; }
.cl-welcome-icon { width: 40px !important; height: 40px !important; color: #ccc; margin-bottom: 8px; }

@media (max-width: 991px) {
    .cl-page-header-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .cl-filters-grid { grid-template-columns: 1fr 1fr; }
    .cl-search-main { flex-wrap: wrap; }
    .cl-search-main .dash-search-field { min-width: 200px; }
    .cl-toggle-body { padding-left: 18px; }
}
@media (max-width: 600px) {
    .cl-filters-grid { grid-template-columns: 1fr; }
}

/* Breadcrumb */
.cl-breadcrumb {
    margin: 10px 14px 0; padding: 8px 14px;
    font-size: 13px; color: #888;
    background: #fafbfc; border-radius: var(--radius);
    border: 1px solid #f0f0f0;
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.cl-breadcrumb a { color: #555; text-decoration: none; }
.cl-breadcrumb a:hover { color: var(--brand); }
.cl-breadcrumb-sep { color: #ccc; margin: 0 2px; }

/* Guide Card */
.cl-guide-card {
    margin: 14px 14px 20px; padding: 16px 20px;
    background: #f0faf3; border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    display: flex; align-items: flex-start; gap: 12px;
}
.cl-guide-card-icon { flex-shrink: 0; color: var(--brand); }
.cl-guide-card-icon svg { width: 20px; height: 20px; }
.cl-guide-card-title { font-size: 14px; font-weight: 600; color: #2d6a4f; margin-bottom: 4px; }
.cl-guide-card-body p { margin: 0; font-size: 13px; color: #555; line-height: 1.6; }
.cl-guide-card-actions { flex-shrink: 0; margin-left: auto; align-self: center; }

/* Flow Card (連携フロー) */
.cl-flow-card {
    margin: 0 14px 20px;
    background: #fff;
    border-radius: var(--radius, 8px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
    border: 1px solid #e5e5e5;
    padding: 20px 24px;
}
.cl-flow-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 18px;
}
.cl-flow-card__title svg { width: 18px; height: 18px; color: var(--brand, #2e7d32); }
.cl-flow-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.cl-flow-step {
    flex: 1;
    text-align: center;
    padding: 0 8px;
}
.cl-flow-step__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8f5e9;
    color: var(--brand, #2e7d32);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}
.cl-flow-step__icon svg { width: 20px; height: 20px; }
.cl-flow-step__label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}
.cl-flow-step__desc {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
}
.cl-flow-arrow {
    display: flex;
    align-items: center;
    padding-top: 12px;
    color: #bbb;
    flex-shrink: 0;
}
.cl-flow-arrow svg { width: 18px; height: 18px; }

/* Form Card */
.cl-form-card {
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow-sm); border: 1px solid #e5e5e5;
    overflow: hidden; margin-bottom: 20px;
}
.cl-form-card-title {
    font-size: 15px; font-weight: 600; color: #333;
    padding: 12px 18px;
    border-bottom: 2px solid var(--brand);
    border-left: 3px solid var(--brand);
    background: #fff;
}
.cl-form-card .form-group {
    border-bottom: 1px solid #f0f0f0;
    padding: 14px 18px;
    margin: 0;
}
.cl-form-card .form-group:last-child { border-bottom: none; }

/* Card Description (below title) */
.cl-form-card-desc {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 18px; font-size: 12px; color: #888;
    background: #fafbfc; border-bottom: 1px solid #f0f0f0;
}
.cl-form-card-desc svg { width: 14px; height: 14px; flex-shrink: 0; color: #aaa; }

/* Field Hint — inline under input */
.cl-field-hint {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: #999; margin-top: 6px; line-height: 1.5;
}
.cl-field-hint svg { width: 13px; height: 13px; flex-shrink: 0; color: #bbb; }
.cl-field-hint a { color: var(--brand); }

/* Field Description — prominent, above input */
.cl-field-desc {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: #555; margin-bottom: 8px; line-height: 1.5;
}
.cl-field-desc svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--brand); }

/* Field Note — info/warning box */
.cl-field-note {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px; line-height: 1.5; padding: 7px 10px;
    border-radius: 5px;
}
.cl-field-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.cl-field-note-info { background: #f0f7ff; color: #336; }
.cl-field-note-info svg { color: #4a90d9; }
.cl-field-note-info a { color: var(--brand); }
.cl-field-note-warn { background: #fff8f0; color: #8b5e3c; }
.cl-field-note-warn svg { color: #e6a817; }

/* Optional Badge */
.cl-optional-badge {
    display: inline-block; font-size: 10px; font-weight: 600;
    color: #aaa; background: #f5f5f5; border-radius: 3px;
    padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}

/* Sub-field (e.g. secondary email) */
.cl-field-sub { padding-top: 4px; }
.cl-field-sub-label {
    display: block; font-size: 12px; font-weight: 600; color: #666; margin-bottom: 4px;
}

/* Field Links row */
.cl-field-links {
    display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px;
}
.cl-field-links a {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--brand); text-decoration: none;
}
.cl-field-links a:hover { text-decoration: underline; }

/* Invite Box */
.cl-invite-box {
    margin-top: 10px; padding: 14px;
    background: #fafbfc; border: 1px solid #eee; border-radius: 6px;
}
.cl-invite-box-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: #555; margin-bottom: 10px;
}
.cl-invite-box label { font-size: 12px; color: #666; margin-bottom: 2px; }

/* Toggle Section */
.cl-toggle-section {
    border-bottom: 1px solid #f0f0f0;
}
.cl-toggle-section:last-of-type { border-bottom: none; }
.cl-toggle-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; cursor: pointer;
    transition: background 0.15s;
}
.cl-toggle-header:hover { background: #fafbfc; }
.cl-toggle-header-left {
    display: flex; align-items: center; gap: 10px;
}
.cl-toggle-icon { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }
.cl-toggle-title { font-size: 14px; font-weight: 600; color: #333; }
.cl-toggle-header-right {
    display: flex; align-items: center; gap: 8px;
}
.cl-toggle-chevron {
    width: 18px; height: 18px; color: #aaa;
    transition: transform 0.25s ease;
}
.cl-toggle-section.is-open .cl-toggle-chevron { transform: rotate(180deg); }
.cl-toggle-status {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; padding: 2px 8px;
    border-radius: 10px;
}
.cl-toggle-status svg { width: 12px; height: 12px; }
.cl-toggle-status-on { background: #e8f5e9; color: #2e7d32; }
.cl-toggle-status-off { background: #fff3e0; color: #e65100; }
.cl-toggle-body {
    display: none; padding: 4px 18px 16px calc(25% + 18px);
}
.cl-toggle-section.is-open .cl-toggle-body { display: block; }
.cl-toggle-body .cl-field-desc { font-size: 12px; color: #777; margin-bottom: 6px; }
.cl-toggle-body .cl-field-note { margin-top: 8px; margin-bottom: 0; }
.cl-toggle-body .cl-field-sub { margin-top: 8px; }
.cl-toggle-body .cl-field-links { margin-top: 8px; margin-bottom: 6px; }
.cl-toggle-body .form-control { margin-bottom: 0; }
.cl-toggle-body .cl-invite-box { margin-top: 8px; padding: 10px; }
.cl-toggle-body .cl-share-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f0f0; }
.cl-toggle-body .cl-field-links { margin-top: 12px; margin-bottom: 10px; }
.cl-toggle-body .cl-btn { margin-top: 10px; }

/* Stacked Inputs (address) */
.cl-stacked-inputs { display: flex; flex-direction: column; gap: 6px; }

/* Inline Action Buttons */
.cl-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 600; line-height: 1.4;
    text-decoration: none; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    border: 1.5px solid transparent;
}
.cl-btn:hover { transform: translateY(-1px); text-decoration: none; }
.cl-btn:active { transform: translateY(0); }
.cl-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.cl-btn[disabled] { opacity: 0.5; pointer-events: none; }

/* Outline (primary action within a section) */
.cl-btn-outline {
    background: #fff; color: var(--brand);
    border-color: var(--brand);
}
.cl-btn-outline:hover { background: #f0faf3; color: var(--brand); }

/* Small variant */
.cl-btn-sm { padding: 5px 10px; font-size: 12px; }
.cl-btn-sm svg { width: 14px; height: 14px; }

/* Input with inline action button */
.cl-input-with-action {
    display: flex; align-items: center; gap: 6px;
}
.cl-input-with-action .form-control { flex: 1; }

/* Secondary (navigation / proxy login) */
.cl-btn-secondary {
    background: #f8f9fa; color: #555;
    border-color: #ddd;
}
.cl-btn-secondary:hover { background: #eef0f2; color: #333; border-color: #ccc; }

/* Form Submit */
.cl-form-submit {
    text-align: center; padding: 20px;
    background: linear-gradient(135deg, #2d6a4f 0%, #27ae60 100%);
    border-radius: var(--radius); margin-bottom: 20px;
    color: #fff;
}
.cl-form-submit p { margin: 0 0 10px; font-size: 13px; opacity: 0.9; }
.cl-form-submit .btn-action {
    background: #fff; color: var(--brand); border: none;
    font-weight: 700; padding: 10px 32px; border-radius: 6px;
    font-size: 15px; transition: background 0.15s, transform 0.15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.cl-form-submit .btn-action:hover { background: #f0faf3; transform: translateY(-1px); }
.cl-form-submit .btn-action svg { width: 16px; height: 16px; }

/* Avatar Upload */
.cl-avatar-upload img {
    margin-top: 24px;
    margin-bottom: 12px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    max-width: 100%;
    object-fit: cover;
    border: #e5e7ea solid 6px;
    position: initial !important;
}

/* Flyer Avatar (rectangular, matching PDF 34:40 ratio) */
.cl-flyer-avatar img {
    margin-top: 24px;
    margin-bottom: 12px;
    border-radius: 4px;
    width: 100px;
    height: 118px;
    max-width: 100%;
    object-fit: cover;
    position: initial !important;
}

/* Flyer Company (logo + name inline) */
.cl-flyer-company {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 12px;
}
.cl-flyer-company-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}
.cl-flyer-company-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* Step List (help/instruction cards) */
.cl-step-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cl-step-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}
.cl-step-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.cl-step-item:first-child {
    padding-top: 0;
}
.cl-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.cl-step-body h4 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px;
}
.cl-step-body p {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* Print */
@media print {
    body { _zoom: 0.68; }
    .gallery, .btn, #jump, .instruction, .remove_field, #compare { display: none; }
    .navbar-default, #page-content { background-color: #fff; padding: 0; }
    .setting_confirm, .result_elm { display: block !important; }
    .required_money_chart, .highcharts-container { width: 100% !important; }
}

/* Lucide global icon alignment (replaces FA's built-in vertical centering) */
svg.lucide {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    display: inline-block;
}
.btn svg.lucide { vertical-align: -0.125em; }

/* Lucide spin animation (FA fa-spin replacement) */
.lucide-spin { animation: lucide-spin 1s linear infinite; }
@keyframes lucide-spin { to { transform: rotate(360deg); } }

/* =================================================================
   14. ANALYSIS MENU
   ================================================================= */

/* --- Sticky Navigation Bar --- */
.analysis-sticky-bar {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: var(--space-sm) var(--space-md) var(--space-sm);
    margin: 0 calc(-1 * var(--space-md));
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    transition: box-shadow 0.2s;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}
.analysis-sticky-bar.is-stuck {
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--gray-200);
}

/* --- Sticky Scenario Summary --- */
.analysis-sticky-scenario {
    width: 100%;
    font-size: 11px;
    color: #666;
    line-height: 1.4;
}
.analysis-sticky-scenario:empty { display: none; }
.sticky-scenario__line {
    margin-right: 10px;
}
.sticky-scenario__line.is-mangaichi { color: #e74c3c; }

/* --- Pin Info Panel (分析ハブ) --- */
.analysis-pin-panel {
    position: sticky;
    top: 8px;
    z-index: 200;
    float: right;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
    padding: 10px 16px;
    font-size: 13px;
    min-width: 200px;
    margin-left: 16px;
}
.analysis-pin-panel__info {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #999;
}
.analysis-pin-panel.is-pinned .analysis-pin-panel__info {
    color: #333;
}
.analysis-pin-panel__icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.4;
}
.analysis-pin-panel.is-pinned .analysis-pin-panel__icon {
    opacity: 1;
}
.analysis-pin-panel__date {
    font-weight: 600;
    white-space: nowrap;
}
.analysis-pin-panel.is-pinned .analysis-pin-panel__date {
    color: #e67e22;
}
.analysis-pin-panel__event {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    margin-left: 4px;
}
.analysis-pin-panel__event:empty { display: none; }
.analysis-pin-panel__unpin {
    background: none;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    padding: 0;
    margin-left: 8px;
    flex-shrink: 0;
}
.analysis-pin-panel__unpin:hover { background: #eee; color: #333; }
.analysis-pin-panel:not(.is-pinned) .analysis-pin-panel__unpin { display: none; }
.analysis-pin-panel__nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.analysis-pin-panel__link {
    padding: 3px 8px;
    border-radius: 4px;
    color: #555;
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
    transition: background 0.15s;
}
.analysis-pin-panel__link:hover {
    background: var(--gray-100);
    color: #333;
    text-decoration: none;
}
/* --- Floating Action Buttons (右下固定) --- */
/* FAB stack (縦積みピル型) */
body.print-editor-active .fab-stack-item { display: none !important; }
.fab-stack-item {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: #374151;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: width .2s ease, border-radius .2s ease, padding .2s ease, box-shadow .2s ease, justify-content .2s ease;
}
.fab-stack-item > span {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity .15s ease, max-width .2s ease;
}
.fab-stack-item:hover { text-decoration: none; color: #111827; }
.fab-stack-item i,
.fab-stack-item svg,
.fab-stack-item svg.lucide { width: 18px; height: 18px; color: #6b7280; flex-shrink: 0; }
.fab-stack-item:hover svg { color: #4361ee; }

/* FP電卓 FAB の hover アイコン色は、モーダル内のブランドカラー
   (fp_calculator.css の #2595B1 / ロゴ派生シアン) と揃える。
   FAB は #fp-calc-modal / #fp_calculator_area の外側にあり var(--brand) を
   継承できないため、ここに直書きする。 */
.fab-stack-item--calc:hover svg,
.fab-stack-item--calc:hover svg.lucide { color: #2595B1; }

/* アクセント（重要機能のみ色付き） */
.fab-stack-item--report {
    background: #d9534f;
    border-color: #d9534f;
    color: #fff;
}
.fab-stack-item--report svg,
.fab-stack-item--report svg.lucide { color: #fff; }
.fab-stack-item--report:hover { background: #c9302c; border-color: #c9302c; color: #fff; }
.fab-stack-item--report:hover svg,
.fab-stack-item--report:hover svg.lucide { color: #fff; }

.fab-stack-item--ai {
    background: #5b6abf;
    border-color: #5b6abf;
    color: #fff;
}
.fab-stack-item--ai svg,
.fab-stack-item--ai svg.lucide { color: #fff; }
.fab-stack-item--ai:hover { background: #4856a8; border-color: #4856a8; color: #fff; }
.fab-stack-item--ai:hover svg,
.fab-stack-item--ai:hover svg.lucide { color: #fff; }

/* アドバイザー連携時の統合チャット（AIアシスタントの位置を代替） */
.fab-stack-item--chat {
    background: #43a047;
    border-color: #43a047;
    color: #fff;
}
.fab-stack-item--chat svg,
.fab-stack-item--chat svg.lucide { color: #fff; }
.fab-stack-item--chat:hover { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.fab-stack-item--chat:hover svg,
.fab-stack-item--chat:hover svg.lucide { color: #fff; }

/* 展開モード（スタックホバー時） */
body.fab-stack-expanded .fab-stack-item {
    width: 170px;
    padding: 0 14px;
    gap: 10px;
    justify-content: flex-start;
    border-radius: 0;
    box-shadow: none;
}
body.fab-stack-expanded .fab-stack-item > span {
    opacity: 1;
    max-width: 140px;
}
body.fab-stack-expanded .fab-stack-item--first {
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
body.fab-stack-expanded .fab-stack-item--last {
    border-radius: 10px 10px 0 0;
}
body.fab-stack-expanded .fab-stack-item--only {
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.fab-stack-item__badge {
    display: inline-block;
    margin-left: 4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #e53935;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* --- AI Chat Core（両パネル共通: ai_chat/panel.php と adviser_chat/panel.php） --- */
/* 無料プラン用の体験回数バッジ（「体験あと N 回」「体験は終了済み」） */
.ai-chat-trial-info {
    display: block;
    font-size: 11px;
    color: #f57f17;
    margin-top: 2px;
}
.ai-chat-trial-info.ai-chat-trial-ended { color: #999; }

/* モードバッジ（ガイド/入力アシスト/トラブル対応/分析・相談） */
.ai-chat-mode-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 6px;
    align-self: flex-start;
}
.ai-chat-mode-guide        { background: #e3f2fd; color: #1565c0; }
.ai-chat-mode-assist       { background: #e8f5e9; color: #2e7d32; }
.ai-chat-mode-troubleshoot { background: #fff3e0; color: #e65100; }
.ai-chat-mode-analysis     { background: #f3e5f5; color: #7b1fa2; }

/* quick_update 確認ダイアログ */
.ai-chat-quick-update {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 8px;
    font-size: 13px;
}
.ai-chat-quick-update-title {
    font-weight: 600;
    color: #f57f17;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-chat-quick-update-desc { color: #666; margin-bottom: 8px; }
.ai-chat-quick-update-warning {
    font-size: 11px;
    color: #e65100;
    background: #fff3e0;
    padding: 6px 10px;
    border-radius: 4px;
    margin: 6px 0;
}
.ai-chat-quick-update-actions { display: flex; gap: 8px; }
.ai-chat-btn-apply {
    background: #5b6abf;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
}
.ai-chat-btn-apply:hover { background: #4a59a8; }
.ai-chat-btn-apply:disabled { opacity: .6; cursor: not-allowed; }
.ai-chat-btn-skip {
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    color: #666;
}
.ai-chat-btn-skip:hover { background: #f5f5f5; }

/* --- Mode Switcher (Segment Control) --- */
.analysis-mode-switcher {
    display: inline-flex;
    gap: 4px;
}
.analysis-mode-switcher label {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border: 1.5px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9em;
    color: #555;
    background: #fff;
    transition: all 0.15s;
    white-space: nowrap;
}
/* hover / active 色は FP電卓モーダルと共通の「ロゴ派生シアン」アクセント。
   `--brand` (root #3A8DB1 青系) とは別の意味づけ (シアン家族) で、シミュレー
   ションモード切替という重要な選択を際立たせる。fp_calculator.css スコープ外
   のため var() は使わずリテラル直書き (FAB hover と同じ運用)。
   active 塗り #176D82 は白文字に対し 5.91:1 で WCAG AA ✅ */
.analysis-mode-switcher label:hover {
    background: #EDF9FD;
    border-color: #B6E2EC;
}
.analysis-mode-switcher label:has(input:checked) {
    background: #176D82;
    color: #fff;
    border-color: #176D82;
}
.analysis-mode-switcher input[type="radio"] {
    display: none;
}

/* --- CF label (now inside analysis-nav) --- */
.analysis-nav .analysis-cf-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1em;
    border: 2px solid var(--brand);
    color: var(--brand-dark);
    background: var(--brand-light);
    transition: background 0.15s, box-shadow 0.15s;
}
.analysis-nav .analysis-cf-label:has(input:checked) {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(39,174,96,0.3);
}
.analysis-nav .analysis-cf-label input[type="radio"] {
    display: none;
}

/* --- Category Groups: Flat wrap --- */
.analysis-nav {
    margin-bottom: 12px;
    position: sticky; top: 10px; z-index: 5;
    background: #fff; padding: 8px 0;
}
.analysis-nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.analysis-cat-group {
    margin-bottom: 8px;
}
.analysis-cat-header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    padding: 2px 0;
    margin-bottom: 4px;
}
.analysis-cat-header svg { width: 13px; height: 13px; }
.analysis-cat-header.cat-income { color: #3498db; }
.analysis-cat-header.cat-expense { color: #e67e22; }
.analysis-cat-header.cat-loan { color: #27ae60; }
.analysis-cat-header.cat-insurance { color: #e74c3c; }
.analysis-cat-header.cat-asset { color: #8e44ad; }

/* --- Analysis Tabs --- */
/* ================================================================
   Analysis Flow Navigation v3 — fieldset スタイル
   ① 収入計画 → ② 可処分所得 →┬→ ③a 支出計画
                               └→ ③b 貯蓄・投資計画 → ④ 資産
   ================================================================ */
.analysis-flow {
    position: sticky; top: 0; z-index: 3;
    background: #fff; padding: 10px 0 6px;
    border-bottom: 2px solid var(--gray-200);
}
.analysis-flow__main {
    display: flex; align-items: center; justify-content: center; gap: 0;
    position: relative;
}
.analysis-flow__feedback-svg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; overflow: visible;
}
.analysis-flow__split {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.analysis-flow__split-row {
    display: flex; align-items: center; gap: 0;
}
/* 分岐エリア（SVG + split を横並び） */
.analysis-flow__fork-area {
    display: flex; align-items: center; gap: 0;
}
.analysis-flow__fork-svg {
    width: 32px; height: 60px; flex-shrink: 0;
}
/* 矢印コネクタ */
.analysis-flow-arrow {
    display: flex; align-items: center; padding: 0 5px;
    color: var(--gray-400); flex-shrink: 0;
}
.analysis-flow-arrow svg { width: 18px; height: 18px; }
/* fieldsetグループ（複数項目） */
.analysis-flow-group {
    display: flex; flex-direction: row; align-items: center;
    border: 1.5px solid var(--gray-300); border-radius: 4px;
    padding: 4px 6px; position: relative;
    background: var(--gray-50); gap: 6px;
}
.analysis-flow-group__legend {
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--gray-500); padding: 0 2px; line-height: 1;
    white-space: nowrap;
}
.analysis-flow-group__items {
    display: flex; gap: 3px; flex-wrap: wrap;
}
.analysis-flow-group[data-group="income"]  { border-color: color-mix(in srgb, var(--flow-income) 40%, transparent); }
.analysis-flow-group[data-group="spending"]{ border-color: color-mix(in srgb, var(--flow-spending) 40%, transparent); }
.analysis-flow-group[data-group="asset"]   { border-color: color-mix(in srgb, var(--flow-asset) 40%, transparent); }
.analysis-flow-group[data-group="income"]  .analysis-flow-group__legend { color: var(--flow-income); }
.analysis-flow-group[data-group="spending"] .analysis-flow-group__legend { color: var(--flow-spending); }
.analysis-flow-group[data-group="asset"]   .analysis-flow-group__legend { color: var(--flow-asset); }
/* 項目ボタン */
.analysis-flow-btn {
    padding: 5px 11px; border-radius: 3px;
    background: #fff; border: 1px solid var(--gray-300);
    cursor: pointer; font-size: 11.5px; font-weight: 500;
    color: var(--gray-700); transition: all 0.12s ease;
    white-space: nowrap; user-select: none;
}
.analysis-flow-btn:hover {
    background: var(--gray-100); border-color: var(--gray-500);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
.analysis-flow-btn.is-selected { font-weight: 600; color: #fff; }
[data-group="income"]  .analysis-flow-btn.is-selected { background: var(--flow-income);  border-color: var(--flow-income); }
[data-group="spending"] .analysis-flow-btn.is-selected { background: var(--flow-spending); border-color: var(--flow-spending); }
[data-group="asset"]   .analysis-flow-btn.is-selected { background: var(--flow-asset);   border-color: var(--flow-asset); }
/* 単一項目ボタン（可処分所得・貯蓄投資） */
.analysis-flow-single {
    padding: 7px 14px; border-radius: 4px;
    background: var(--gray-50); border: 1.5px solid var(--gray-300);
    cursor: pointer; font-size: 12px; font-weight: 600;
    color: var(--gray-700); transition: all 0.12s ease;
    white-space: nowrap; user-select: none;
}
.analysis-flow-single:hover {
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.14);
    transform: translateY(-1px);
}
.analysis-flow-single.is-selected { font-weight: 700; }
/* 可処分所得 */
.analysis-flow-single[data-group="disposable"] {
    border-color: var(--gray-300); color: var(--gray-700);
    background: #fff; border-width: 1px;
    font-size: 12px; font-weight: 500;
}
.analysis-flow-single[data-group="disposable"]:hover {
    background: var(--gray-100); border-color: var(--gray-500);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.analysis-flow-single[data-group="disposable"].is-selected {
    background: var(--flow-disposable); border-color: var(--flow-disposable);
    color: #fff; font-weight: 600;
}
/* 貯蓄・投資計画 */
.analysis-flow-single[data-group="saving"] {
    border-color: color-mix(in srgb, var(--flow-saving) 40%, transparent); color: var(--flow-saving);
}
.analysis-flow-single[data-group="saving"]:hover {
    background: var(--flow-saving-bg);
}
.analysis-flow-single[data-group="saving"].is-selected {
    background: var(--flow-saving-bg); border-color: var(--flow-saving);
}

/* =============================================================
   analysis-flow: スクロール時コンパクトモード
   is-compact が付くと、グループ枠・矢印・分岐SVGを畳み、
   全項目を単一行チップに圧縮して高さを削減する
   ============================================================= */
.analysis-flow { transition: padding 0.2s ease; }
.analysis-flow.is-compact { padding: 4px 0; }
.analysis-flow.is-compact .analysis-flow__main {
    flex-wrap: wrap; justify-content: flex-start; gap: 3px 6px;
    padding: 0 8px;
}
.analysis-flow.is-compact .analysis-flow-arrow,
.analysis-flow.is-compact .analysis-flow__fork-svg,
.analysis-flow.is-compact .analysis-flow__feedback-svg,
.analysis-flow.is-compact .analysis-flow-group__legend {
    display: none;
}
.analysis-flow.is-compact .analysis-flow__fork-area {
    display: contents;
}
.analysis-flow.is-compact .analysis-flow__split {
    display: contents;
}
.analysis-flow.is-compact .analysis-flow__split-row {
    display: contents;
}
.analysis-flow.is-compact .analysis-flow-group {
    display: contents;
}
.analysis-flow.is-compact .analysis-flow-group__items {
    display: contents;
}
.analysis-flow.is-compact .analysis-flow-btn,
.analysis-flow.is-compact .analysis-flow-single {
    padding: 3px 8px; font-size: 11px; font-weight: 500;
    border-radius: 10px; line-height: 1.4;
}
/* カテゴリ色を左ボーダーで簡易表示 */
.analysis-flow.is-compact .analysis-flow-group[data-group="income"]  .analysis-flow-btn { border-left: 3px solid var(--flow-income); }
.analysis-flow.is-compact .analysis-flow-group[data-group="spending"] .analysis-flow-btn { border-left: 3px solid var(--flow-spending); }
.analysis-flow.is-compact .analysis-flow-group[data-group="asset"]   .analysis-flow-btn { border-left: 3px solid var(--flow-asset); }
.analysis-flow.is-compact .analysis-flow-single[data-group="disposable"] { border-left: 3px solid var(--flow-disposable, #16a085); }
.analysis-flow.is-compact .analysis-flow-single[data-group="saving"]     { border-left: 3px solid var(--flow-saving, #27ae60); }
.analysis-flow.is-compact .analysis-flow-btn:hover,
.analysis-flow.is-compact .analysis-flow-single:hover {
    transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* --- Hero Card (initial empty state) --- */
.analysis-hero-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px 24px; text-align: center;
    color: var(--gray-400);
}
.analysis-hero-card__icon { width: 48px; height: 48px; color: var(--gray-300); margin-bottom: 12px; }
.analysis-hero-card__title { font-size: 16px; font-weight: 600; color: var(--gray-500); margin-bottom: 8px; }
.analysis-hero-card__desc { font-size: 13px; color: var(--gray-400); }


/* --- Detail Category Groups (visible headers) --- */

/* --- Analysis Nav Section (below CF content) --- */
.analysis-nav-section {
    clear: right;
    margin-top: 0;
    padding: 0;
    border-top: 1px solid var(--gray-200);
    position: sticky;
    top: -110px;
    z-index: 100;
    background: #fff;
}
.analysis-nav-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.4em;
    font-weight: 700;
    color: var(--gray-800);
    padding: var(--space-xs) 0;
    margin-bottom: var(--space-sm);
    border-bottom: 2px solid var(--gray-200);
}


/* --- Result Section (sub-section headers) --- */
.result-section {
    margin-bottom: var(--space-lg);
}
.result-section.cf-section {
    margin-top: var(--space-lg);
}

/* --- Collapse result_view clearfix spacing (result_elm are moved to detail area) --- */
.result_view > p {
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

/* --- Detail Layout: ライフイベント左固定 + 分析結果右 --- */
.detail-layout { display: flex; gap: 0; min-height: 400px; }
.detail-layout__left {
    flex: 0 0 auto; max-width: 50%;
    overflow-x: hidden; overflow-y: auto;
    max-height: calc(100vh - 20px);
    border-right: 1px solid var(--gray-200); padding-right: 8px;
    position: sticky; top: 10px; align-self: flex-start;
    transition: max-width 0.25s ease, padding 0.25s ease;
}
/* Toggle button */
.detail-layout__toggle {
    flex: 0 0 24px; display: flex; align-items: flex-start; justify-content: center;
    padding-top: 8px; border: none; background: #f0f0f0;
    cursor: pointer; border-radius: 0; transition: background 0.15s;
}
.detail-layout__toggle:hover { background: #e0e0e0; }
.detail-layout__toggle svg { transition: transform 0.25s; }
/* Collapsed state */
.detail-layout.is-collapsed .detail-layout__left {
    flex: 0 0 40px; max-width: 40px; padding-right: 0;
    border-right: none;
}
.detail-layout.is-collapsed .detail-layout__toggle svg { transform: rotate(180deg); }
/* Collapsed: hide everything except index numbers */
.detail-layout.is-collapsed .le-stage__header { font-size: 10px; padding: 2px 4px; text-align: center; white-space: nowrap; }
.detail-layout.is-collapsed .le-stage__col-headers { display: none; }
.detail-layout.is-collapsed .le-row__year,
.detail-layout.is-collapsed .le-row__month,
.detail-layout.is-collapsed .le-event__title,
.detail-layout.is-collapsed .le-event__cost,
.detail-layout.is-collapsed .le-edu-detail,
.detail-layout.is-collapsed .le-row__balances { display: none; }
.detail-layout.is-collapsed .le-event { justify-content: center; }
.detail-layout.is-collapsed .le-event__index {
    font-size: 11px; cursor: pointer; position: relative;
}
/* Tooltip on hover (collapsed) */
.detail-layout.is-collapsed .le-event[title]:hover::after {
    content: attr(title);
    position: absolute; left: 100%; top: 0; margin-left: 8px;
    background: #333; color: #fff; padding: 4px 8px;
    border-radius: 4px; font-size: 11px; white-space: nowrap;
    z-index: 100; pointer-events: none;
}
.detail-layout__right { flex: 1 1 0; min-width: 0; padding-left: 8px; }
.detail-layout__result { flex: 1 1 0; min-width: 0; padding-top: 4px; }

.analysis_result_contents > :last-child { margin-bottom: 0; }

/* --- Mode switch fade animation --- */
.analysis_result_contents.mode-transition,
.detail-layout__result.mode-transition {
    animation: mode-fade-in 0.3s ease-in;
}
@keyframes mode-fade-in {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

/* --- Tax Simulator (可処分所得分析) --- */
.tax_simulator_area { }
.tax-profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.4em;
    font-weight: 700;
    color: var(--gray-800);
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-md);
    border-bottom: 2px solid var(--gray-200);
}
.tax-section-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: var(--gray-600);
}
/* KPI Cards */
.tax-kpi-row {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: 24px;
}
.tax-kpi-card {
    flex: 1 1 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: #fafafa;
    text-align: center;
}
.tax-kpi-card__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 2px;
}
.tax-kpi-card__label small { color: var(--gray-400); }
/* 金額+単位セルを 1 行に固定する共通クラス。
   AnalysisFormat.applyAmountNoBreak() で末尾が「数字+単位」のセルに自動付与される。 */
.no-break-amount { white-space: nowrap; }
.tax-kpi-card__value {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--gray-800);
}
.tax-kpi-card--danger { border-left: 3px solid #e74c3c; }
.tax-kpi-card--danger .tax-kpi-card__value { color: #e74c3c; }
.tax-kpi-card--primary { border-left: 3px solid #3498db; background: #f0f7fd; }
.tax-kpi-card--primary .tax-kpi-card__value { color: #3498db; font-size: 1.3em; }
.tax-kpi-card--success { border-left: 3px solid var(--success); }
.tax-kpi-card--success .tax-kpi-card__value { color: var(--success); }
/* ふるさと納税は本年単年のため、生涯サマリー4枚と区別する: 左マージンで分離 + dashed border */
.tax-kpi-card--furusato {
    margin-left: var(--space-md);
    border: 1px dashed #27ae60;
    border-left-width: 3px;
    background: #f0faf4;
}
.tax-kpi-card--furusato .tax-kpi-card__label { color: #27ae60; }
.tax-kpi-card--furusato .tax-kpi-card__value { color: #27ae60; }
/* 分析対象コンパクト表示 */
.saving-targets { font-size: 12px; color: var(--gray-500); margin-bottom: var(--space-md); }
.saving-target-item { margin-right: 12px; }
.saving-target-category { font-weight: 600; color: var(--gray-600); }
.saving-target-names { color: var(--gray-400); }
/* Graph section */
.tax-graph-section { margin-bottom: var(--space-md); }
.graph-note {
    font-size: 0.8em;
    color: var(--gray-500);
    text-align: right;
    margin-top: var(--space-xs);
}
/* Detail row: table + panel */
.tax-detail-row {
    display: flex;
    gap: var(--space-md);
}
.tax-detail-row__left { flex: 7 1 0; min-width: 0; }
.tax-detail-row__right {
    flex: 5 1 0;
    min-width: 0;
    position: sticky;
    top: 10px;
    align-self: flex-start;
}
/* History table — 右側パネル(.tax-detail-panel)と上端ラインを揃えるため同等の枠を持たせる */
.tax-history-detail {
    padding: var(--space-md);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow-x: auto;
}
.tax-history-detail table { font-size: 12px; white-space: nowrap; }
.tax-history-note { font-size: 0.8em; color: var(--gray-600); margin-bottom: var(--space-sm); }
.is-separate-living-sample { display: inline-block; width: 20px; height: 11px; background-color: #ddd; }
tr.is-separate-living { background-color: #ddd; }
tr.is-selected-year { background-color: #e8f4fd !important; }
/* Tax history decade (now uses fp-accordion) */
.tax-decade__ages { font-weight: 400; font-size: 12px; color: var(--gray-500); }
.fp-accordion__body .table { margin-bottom: 0; }
.disposal_income { cursor: pointer; text-decoration: underline; font-size: 1.15em; }
.disposal_income:hover { opacity: 0.7; }
/* Detail panel */
.tax-detail-panel {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: var(--space-md);
}
.tax-detail-panel__title {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--gray-200);
}
/* --- fp-accordion: reusable accordion component --- */
.fp-accordion { margin-top: var(--space-sm); }
.fp-accordion__header {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
    color: var(--gray-700);
    background: #f5f7fa;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.fp-accordion__header:hover {
    background: #edf0f5;
    border-color: var(--gray-300);
}
.fp-accordion__header > .lucide:first-child {
    width: 14px; height: 14px;
    flex-shrink: 0;
    color: var(--gray-400);
    transition: transform 0.2s;
}
.fp-accordion__header:not(.is-collapsed) > .lucide:first-child {
    transform: rotate(90deg);
}
.fp-accordion__header small { font-weight: 400; color: var(--gray-500); }
.fp-accordion__body { padding: 4px 0; }
/* Saving history table */
.saving-history-table { font-size: 0.85em; }
.saving-history-table thead th {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 0.9em;
    padding: 4px 6px;
}
.saving-history-table td {
    white-space: nowrap;
    padding: 3px 6px;
}
.saving-history-table td:first-child { text-align: center; }
/* フロー/ストックの視覚的区別 */
.saving-history-table .saving-kind--stock { background-color: #f3f7fb; }
.saving-history-table thead th.saving-kind--stock { background-color: #e7eef6; }
.saving-history-table tr:hover td.saving-kind--stock { background-color: #e7eef6; }
/* セクション境界の縦ボーダー */
.saving-history-table .saving-kind--flow + .saving-kind--stock,
.saving-history-table th.saving-kind--flow + th.saving-kind--stock,
.saving-history-table td.saving-kind--flow + td.saving-kind--stock,
.saving-history-table .saving-divider-after + th,
.saving-history-table .saving-divider-after + td { border-left: 1px solid #95a5a6; }
/* カラムグループ開閉 */
.saving-col-group {
    cursor: pointer;
    user-select: none;
}
.saving-chevron {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    transition: transform 0.15s;
}
.saving-col-group.is-open .saving-chevron {
    transform: rotate(90deg);
}
.saving-col-sum {
    background: #f9fafb;
}
.saving-lock-icon {
    width: 12px;
    height: 12px;
}
.saving-year-summary td {
    font-weight: bold;
    background: #f5f7fa;
    border-bottom: 2px solid #dee2e6;
}
/* Education table: year header toggle */
.edu-year-header { cursor: pointer; }
.edu-year-header:hover td { background: #f5f7fa; }
.edu-year-toggle { margin-left: 8px; }
.edu-year-toggle svg { transition: transform 0.2s; color: var(--gray-400); }
.edu-year-toggle svg.is-expanded { transform: rotate(90deg); }
.text-bold { font-weight: bold; }
/* DC/iDeCo/小規模企業共済 分析レイアウト */
.dc-analysis { font-size: 13px; }
.dc-analysis table th { text-align: left; }
.dc-analysis table td { text-align: right; }
.dc-analysis > div { margin-bottom: 16px; width: 100%; }
/* 横スクロールが必要なブロック（履歴テーブル等）のみに overflow を付与 */
.dc-analysis__scroll { overflow-x: auto; }
.dc-analysis .webix_view { width: 100%; }
.dc-section__title { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.dc-subsection__title { font-size: 15px; font-weight: 600; border-left: 3px solid #3498db; padding-left: 8px; margin: 32px 0 10px; }
.dc-subsection__title:first-child { margin-top: 0; }
.dc-subsection__title small { font-weight: 400; color: var(--gray-500); font-size: 12px; }
.dc-subsub__title { font-size: 13px; font-weight: 600; margin-top: 16px; margin-bottom: 6px; }
/* グループ化カスタム凡例（任意のチャートで利用可） */
.grouped_legend_box { display: inline-flex; gap: 16px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 12px; background: #fafbfc; margin-top: 8px; margin-left: auto; float: right; clear: both; }
.grouped-legend__col { display: grid; grid-template-columns: repeat(2, auto); gap: 2px 12px; min-width: 120px; align-content: start; }
.grouped-legend__col .grouped-legend__group-title { grid-column: 1 / -1; }
.grouped-legend__col[data-group="現金"] { grid-template-columns: auto; }
.grouped-legend__group-title { font-weight: 600; font-size: 11px; color: #666; border-bottom: 1px solid #e0e0e0; padding-bottom: 2px; margin-bottom: 2px; }
.grouped_legend_box label { margin: 0; padding: 2px 0; cursor: pointer; }
.dc-summary-row { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.dc-summary-row__table { flex: 1 1 340px; min-width: 0; }
.dc-summary-row__chart { flex: 1 1 340px; min-width: 0; }
.dc-tax-row { display: flex; gap: 16px; }
.dc-tax-row__graph { flex: 1 1 0; min-width: 0; }
.dc-tax-row__table { flex: 1 1 0; min-width: 0; }
.dc-receive-table th { width: 80px; }
.dc-chart-pair { display: flex; gap: 16px; }
.dc-chart-pair > div { flex: 1 1 0; min-width: 0; }
.dc-summary-pair { display: flex; gap: 16px; margin-bottom: 20px; }
.dc-summary-pair > .dc-summary-table { flex: 1; margin-bottom: 0; }
.dc-summary-table { font-size: 13px; margin-bottom: 20px; }
.dc-summary-table th { font-weight: 600; }
.dc-summary-table small { font-size: 11px; color: var(--gray-500); }
.dc-summary-sub { padding-left: 20px; font-weight: 400; color: var(--gray-600); }
.dc-emphasis-value { font-size: 15px; }
/* KPI横断比較テーブル */
/* KPIカードナビゲーション */
.dc-kpi-nav { display: flex; gap: 12px; margin-bottom: 20px; }
.dc-kpi-card { flex: 1; max-width: 320px; background: #f8f9fa; border-radius: 8px; padding: 12px 16px; border: 2px solid #e8e8e8; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.dc-kpi-card:hover { border-color: #3498db; }
.dc-kpi-card.active { border-color: #3498db; box-shadow: 0 0 0 1px rgba(52,152,219,0.2); background: #fff; }
.dc-kpi-card__title { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--gray-800); }
.dc-kpi-card__row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.dc-kpi-card__label { font-size: 12px; color: var(--gray-500); }
.dc-kpi-card__value { font-size: 14px; font-weight: 600; }
.dc-kpi-panel { display: none; }
.dc-kpi-panel.active { display: block; }
/* 集計期間 */
.dc-period-info { font-size: 12px; color: var(--gray-500); margin-bottom: 12px; }
.dc-retirement-summary { overflow: hidden; margin-bottom: 16px; }
.dc-retirement-graph { margin-bottom: 16px; }
.dc-retirement-income-table { font-size: 13px; table-layout: fixed; width: 100%; border: 1px solid #e0e0e0; border-collapse: separate; border-spacing: 0; }
.dc-retirement-income-table thead th { text-align: center; }
.dc-retirement-income-table td { text-align: right; }
.dc-retirement-income-table tfoot th { text-align: right; }
.dc-retirement-income-table col.col-no { width: 30px; }
.dc-retirement-income-table col.col-date { width: 75px; }
.dc-retirement-income-table col.col-age { width: 40px; }
.dc-retirement-income-table col.col-summary { width: 80px; }
.dc-retirement-income-table td:nth-child(4) { text-align: left; }
.dc-retirement-income-table col.col-amount { width: 100px; }
.dc-retirement-income-table col.col-service { width: 120px; }
.dc-retirement-income-table col.col-deduction { width: 100px; }
.dc-retirement-income-table col.col-taxable { width: 90px; }
.dc-retirement-income-table col.col-income-tax { width: 85px; }
.dc-retirement-income-table col.col-residence-tax { width: 85px; }
.dc-retirement-income-table col.col-tax-total { width: 85px; }
.dc-retirement-income-table col.col-net { width: 100px; }
.dc-retirement-income-table .retirement_tax_detail { white-space: normal; }
.dc-retirement-income-table tfoot th { font-weight: 600; }
.dc-retirement-income-table .dc-interval-row { vertical-align: middle; padding-bottom: 10px; text-align: left; }
.dc-interval-arrow { font-size: 2em; vertical-align: middle; margin-right: 8px; }
.dc-tax-group { border-left: 2px solid #ccc; border-right: 2px solid #ccc; }
.dc-tax-group-left { border-left: 2px solid #ccc; }
.dc-tax-group-right { border-right: 2px solid #ccc; }
.dc-detail-toggle { font-size: 12px; font-weight: 400; color: var(--gray-500); text-decoration: none; }
.dc-detail-toggle:hover { color: #3498db; text-decoration: none; }
.dc-detail-toggle.is-open { color: #3498db; }
/* 産休育休分析 */
.ikukyu-analysis-area .tax-kpi-row { margin-bottom: 12px; }
.ikukyu-analysis-area .fp-accordion { margin-top: 6px; }
.ikukyu-analysis-area .fp-accordion__body { padding: 4px 0 0; }
.ikukyu-table { table-layout: auto; font-size: 12px; }
.ikukyu-table thead tr { font-size: 11px; }
.ikukyu-table thead > tr > th { padding-top: 6px; padding-bottom: 6px; white-space: nowrap; }
.ikukyu-table tbody > tr > td { padding: 3px 5px; vertical-align: middle; }
.ikukyu-income-detail, .ikukyu-benefit-detail, .ikukyu-si-detail { white-space: normal; }
.ikukyu-gap-row td { padding: 2px 5px !important; background: transparent; border: none; }
.ikukyu-total-row th { background: #f5f7f6; border-top: 2px solid var(--gray-300); padding: 6px 5px; }
.dc-member-section .fp-tabs { margin-top: 12px; }
/* 貯蓄分析 */
.saving-target-list { text-align: left; }
.saving-target-item { margin-bottom: 4px; }
.saving-target-category { font-weight: 600; margin-right: 6px; }
.saving-target-names { color: var(--gray-600); font-size: 12px; }
/* 資金フロー図（水平レイアウト） */
.dc-analysis > .saving-flow { overflow: visible; margin-bottom: 12px; }
.saving-flow { margin: 0; padding: 12px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e8e8e8; }
.saving-flow__header { font-size: 13px; font-weight: 600; margin-bottom: 10px; display: none; }
.saving-flow__date { color: var(--info); }
.saving-flow__empty { text-align: center; color: var(--gray-400); font-size: 13px; padding: 16px 0; }
/* 水平フローの行 */
.saving-flow__row { display: none; align-items: stretch; gap: 0; }
/* 左: 月間収支 */
.saving-flow__origin-col { display: flex; align-items: center; flex-shrink: 0; }
.saving-flow__origin {
    text-align: center; padding: 4px 14px;
    background: #f0f7fd; border: 1px solid var(--info); border-radius: 6px; min-width: 90px;
}
.saving-flow__origin--deficit { background: #fef0f0; border-color: var(--danger); }
.saving-flow__origin-label { font-size: 11px; color: #666; }
.saving-flow__origin-val { font-size: 15px; font-weight: 700; }
/* コネクタSVG（起点→分岐） */
.saving-flow__connector-svg { flex-shrink: 0; display: block; }
/* 中: 分岐（縦並び） */
.saving-flow__branch-col { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.saving-flow__branch {
    padding: 4px 10px; border: 1px solid #ddd; border-radius: 5px;
    background: #fff; border-left: 3px solid var(--brand); min-width: 170px;
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px;
}
.saving-flow__branch--wide { min-width: 190px; }
.saving-flow__branch--deficit { border-left-color: var(--danger); background: #fef0f0; }
.saving-flow__branch-head { font-size: 10px; color: #666; text-align: left; }
.saving-flow__branch-val { font-size: 12px; font-weight: 600; text-align: right; margin-left: auto; }
.saving-flow__branch .saving-flow__sub { flex: 0 0 100%; width: 100%; }
/* ④のサブフロー */
.saving-flow__sub { margin-top: 4px; border-top: 1px solid #eee; padding-top: 3px; }
.saving-flow__sub-row {
    display: flex; justify-content: space-between;
    font-size: 9px; padding: 1px 0; color: #555;
}
.saving-flow__sub-row--result { font-weight: 600; color: var(--brand-dark); }
/* 矢印SVG（分岐→テーブル） */
.saving-flow__arrow-svg { flex: 1; min-width: 50px; display: block; }
/* 右: 口座テーブル */
.saving-flow__table-col { flex-shrink: 1; min-width: 0; overflow-x: auto; }
.saving-flow-table { border-collapse: separate; border-spacing: 0; font-size: 10px; white-space: nowrap; }
.saving-flow-table th, .saving-flow-table td { padding: 4px 6px; border-right: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); text-align: right; }
.saving-flow-table th:first-child, .saving-flow-table td:first-child { border-left: 1px solid var(--gray-200); }
.saving-flow-table thead tr:first-child th { border-top: 1px solid var(--gray-200); }
.saving-flow-table th { background: var(--gray-100); font-weight: 600; color: var(--gray-700); text-align: center; font-size: 9px; }
.saving-flow-table td:first-child, .saving-flow-table th:first-child {
    text-align: left; font-weight: 600; color: var(--gray-700);
    background: var(--gray-50); position: sticky; left: 0; z-index: 2;
}
.saving-flow-table th:first-child { z-index: 3; }
.saving-flow-table .col-total-contrib {
    position: sticky; right: var(--col-balance-width, 80px); z-index: 2; background: #f8f9fa;
}
.saving-flow-table .col-total-balance {
    position: sticky; right: 0; z-index: 2; background: #f8f9fa;
}
.saving-flow-table th.col-total-contrib, .saving-flow-table th.col-total-balance { z-index: 3; background: var(--gray-100); }
.saving-flow-table tr.acct-bank td.acct-sec-cell { color: var(--gray-300); text-align: center; }
.saving-flow-table .val-pos { color: var(--info); }
.saving-flow-table .val-neg { color: var(--danger); }
.saving-flow-table .val-zero { color: var(--gray-400); }
.saving-flow-table tr.acct-inactive { opacity: 0.4; }
.saving-flow-table .col-total { font-weight: 700; }
.saving-flow-table tr.acct-inv td:first-child { color: #2563eb; }
/* 銘柄列の開閉 */
.saving-flow-table.funds-collapsed .col-fund { display: none; }
.saving-flow-table .col-other { font-weight: 600; background: #fff8e1; border-left: 2px dashed #d4b656 !important; border-right: 2px dashed #d4b656 !important; color: #8a6d1a; }
.saving-flow-table th.col-other { background: #fdecc8; color: #6b5410; }
.saving-flow-table th.col-fund { max-width: 72px; min-width: 56px; vertical-align: bottom; }
.saving-flow-table th.col-fund .col-fund__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 1.15;
    font-size: 9px;
}
.saving-flow-table td.col-fund { max-width: 72px; }
.saving-flow__toggle-funds {
    font-size: 9px; padding: 2px 8px; border: 1px solid var(--gray-300); border-radius: 3px;
    background: #fff; cursor: pointer; margin-bottom: 4px; color: var(--gray-600);
}
.saving-flow__toggle-funds:hover { background: var(--gray-50); color: var(--brand-dark); }
/* 投資関連カラムのテキスト色 */
.saving-theme--invest { color: #2563eb; }
.saving-theme--invest.text-danger { color: #dc3545; }
/* 残高計カラムの強調 */
td.saving-highlight { font-weight: 700; background-color: #f8f9fa; }

/* fp-tabs: reusable tab component */
.fp-tabs { display: flex; gap: 2px; border-bottom: 2px solid #e0e0e0; margin-bottom: 8px; }
.fp-tab {
    padding: 6px 14px; border: 1px solid #ddd; border-bottom: none;
    background: #f5f5f5; cursor: pointer; font-size: 13px; border-radius: 4px 4px 0 0;
    color: #666; transition: background 0.15s, color 0.15s; user-select: none;
}
.fp-tab:hover { background: #eee; color: #333; }
.fp-tab.active { background: #fff; color: #333; font-weight: 600; border-bottom: 2px solid #fff; margin-bottom: -2px; }
.fp-tab__sub { display: block; font-size: 10px; font-weight: 400; color: var(--gray-500); line-height: 1.2; margin-top: 1px; }
.fp-tab img { height: 20px; width: 20px; vertical-align: middle; object-fit: contain; }
.fp-tab-panel { display: none; padding-top: var(--space-sm); }
.fp-tab-panel.active { display: block; }
.education-tab-note { font-size: 12px; color: var(--gray-500); margin-bottom: 8px; }
/* Education table: group separators & header alignment */
.profile_age_last { border-right: 2px solid var(--gray-300) !important; }
/* テーブルグループ仕切り線（共通） */
.border-both { border-left: 2px solid var(--gray-300) !important; border-right: 2px solid var(--gray-300) !important; }
.border-left { border-left: 2px solid var(--gray-300) !important; }
.border-right { border-right: 2px solid var(--gray-300) !important; }
.edu-table th { text-align: center; }
/* Education family table: column separators */
.edu-family-table th + th,
.edu-family-table td + td { border-left: 2px solid var(--gray-300) !important; }
.edu-table td.text-right,
.edu-table th.text-right { text-align: right; }
/* Condition row */
.tax-condition-row { display: flex; gap: var(--space-md); }
.tax-condition-col--narrow { flex: 0 0 30%; }
.tax-condition-col--wide { flex: 1 1 auto; }
/* --- Analysis footer CTA --- */
.analysis-footer-cta {
    text-align: center;
    padding: var(--space-xl) 0;
    margin-top: var(--space-lg);
}
.result-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 700;
    color: var(--gray-700);
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
    border-bottom: 2px solid var(--gray-200);
}

/* --- CF Table Header & Controls --- */
.cf-table-header {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    background: #f8f9fb;
    border-radius: var(--space-xs);
    border-left: 3px solid #8bb8d9;
}
.cf-table-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
}
.cf-table-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.8em;
    font-weight: 500;
}
.cf-table-select {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: #fff;
    vertical-align: middle;
}
.cf-table-actions {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}
.cf-table-actions .btn {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
}
.cf-table-icon-btn {
    padding: 4px 6px;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--gray-300);
}
.cf-table-icon-btn i,
.cf-table-icon-btn svg { width: 14px; height: 14px; }
.cf-table-divider-vert {
    width: 1px; height: 18px; background: #d0d6dc; margin: 0 2px;
    align-self: center;
}

/* --- Plan Badges --- */
.plan-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}
.plan-badge.badge-pro  { background: #eaf4fe; color: #2980b9; }
.plan-badge.badge-biz  { background: #fdf2e9; color: #d35400; }
.plan-badge.badge-light { background: #eafaf1; color: #27ae60; }

/* --- Empty State --- */
.analysis-empty-state {
    text-align: center;
    padding: 24px;
    color: var(--gray-500);
    background: linear-gradient(180deg, var(--gray-50) 0%, #fff 100%);
    border-radius: 12px;
    border: 1.5px dashed var(--gray-300);
}
.analysis-empty-state .empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    color: var(--gray-300);
}
.analysis-empty-state h4 {
    font-size: 1.15em;
    color: var(--gray-600);
    margin-bottom: 24px;
    font-weight: 600;
}
.analysis-empty-steps {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}
.analysis-empty-steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    color: var(--gray-600);
    padding: 12px 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    min-width: 90px;
}
.analysis-empty-steps .step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85em;
    color: #fff;
}

/* --- fp_result_sheet: 全体に統一余白 --- */
.fp_result_sheet {
    padding: 0 15px;
}

/* --- Result Group Section --- */
.fp_result_sheet fieldset.result_group {
    border: 1.5px solid var(--gray-200) !important;
    border-radius: 12px;
    padding: 24px !important;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.fp_result_sheet fieldset.result_group > legend {
    font-size: 2em !important;
    border: none;
    font-weight: 800 !important;
    color: var(--gray-800);
    padding: 0 8px;
}

/* --- Analysis result article --- */
.result-article {
    padding: var(--space-sm) var(--space-xs);
}
/* Float leak prevention for all result sections */
.result_elm::after { content: ""; display: table; clear: both; }

/* --- Expense Analysis Section --- */
.expense-section { margin-bottom: var(--space-md); }
.expense-subsection__title {
    font-size: 15px; font-weight: 600; color: var(--gray-700);
    margin: 12px 0 6px; padding-left: 8px;
    border-left: 3px solid #e67e22;
}
.expense-section__inflation {
    font-size: 13px; margin-bottom: var(--space-sm);
}
.expense-section__inflation-value {
    font-size: 16px; font-weight: 700;
}
.expense-section__graph { margin-bottom: var(--space-md); }
.expense-columns { display: flex; gap: 16px; margin-bottom: var(--space-md); }
.expense-columns__item { flex: 1 1 50%; min-width: 0; }
.expense-section__block { margin-bottom: var(--space-md); }
.expense-details {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 2px solid var(--gray-200);
}
.expense-details__header {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-500);
    margin: 0 0 16px;
    letter-spacing: 0.5px;
}
.expense-details .expense-columns__item,
.expense-details .expense-section__block {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 12px 16px;
}
.expense-details .expense-columns { margin-bottom: 12px; }
.expense-details .expense-section__block { margin-bottom: 12px; }
.expense-details .expense-section__block:last-child { margin-bottom: 0; }
.expense-object-list {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid var(--gray-200);
}
.expense-object-group { margin-bottom: 12px; }
.expense-object-group:last-child { margin-bottom: 0; }
.expense-object__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 6px;
}
.expense-object-group table { border-collapse: collapse; width: 100%; }
@media screen {
    .expense-object-group thead th { width: auto !important; }
}
.expense-object-group thead th { text-align: center; background: #f5f7fa; }
.expense-object-group tbody th,
.expense-object-group tr:not(:first-child) > th { text-align: left; white-space: nowrap; }
.expense-object-group td { font-size: 13px; }
.expense-section__note { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
.expense-kpi-notes { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: var(--space-md); font-size: 13px; color: var(--gray-600); }
.expense-kpi-note { display: inline-flex; align-items: center; gap: 4px; }
.tax-kpi-card__note { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

/* --- Utility classes --- */
.valign-top { vertical-align: top; }
.icon-sm { width: 14px; height: 14px; }
.education-category-col { width: 90px; }
.table-borderless, .table-borderless td, .table-borderless th { border: none !important; }

/* Education Analysis */
.education-section { margin-bottom: var(--space-md); font-size: 13px; }
.education-subsection__title {
    font-size: 15px; font-weight: 600; color: var(--gray-700);
    margin: 16px 0 8px; padding-left: 8px;
    border-left: 3px solid #e67e22;
}
.education-subsection__title small { font-weight: 400; color: var(--gray-500); font-size: 12px; }
.education-graph { margin-bottom: var(--space-md); }
.education-section .table { font-size: 13px; }
.education-section .table th { font-size: 12px; padding: 4px 6px; }
.education-section .table td { padding: 4px 6px; }
.education-details { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--gray-200); }
.edu-family-table .school_title { font-size: 12px; }
.edu-family-table .school_meisai td { font-size: 12px; padding: 2px 4px; }
.edu-family-table .education-category-col { font-size: 13px; font-weight: 600; white-space: nowrap; vertical-align: top; }

/* --- Disabled contents modal improvement --- */
.analysis-disabled-contents {
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
}
.analysis-disabled-contents .disabled-title {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--gray-800);
}
.analysis-disabled-contents .disabled-desc {
    font-size: 1em;
    color: var(--gray-600);
    margin-bottom: 16px;
}
.analysis-disabled-contents .disabled-benefit {
    font-size: 0.95em;
    color: var(--gray-700);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* --- Analysis Card Buttons (wizard tabs) --- */
.analysis-card-btn-wrap {
    margin: 10px 0;
}
.analysis-card-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 560px;
    padding: var(--space-md);
    border: 1.5px solid var(--brand);
    border-left: 4px solid var(--brand);
    border-radius: 10px;
    background: linear-gradient(135deg, #f0faf4 0%, #fff 100%);
    cursor: pointer;
    text-align: left;
    box-shadow: 0 2px 6px rgba(39,174,96,0.08);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.15s;
}
.analysis-card-btn:hover {
    border-color: var(--brand-dark);
    box-shadow: 0 4px 14px rgba(39,174,96,0.18);
    background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%);
    transform: translateY(-1px);
}
.analysis-card-btn:active {
    background: var(--brand-light);
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(39,174,96,0.12);
}
.analysis-card-btn-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 2px 6px rgba(39,174,96,0.25);
}
.analysis-card-btn-icon svg { width: 22px; height: 22px; }
.analysis-card-btn-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.analysis-card-btn-title {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--gray-900);
}
.analysis-card-btn .analysis-card-desc {
    font-size: 0.9em;
    color: var(--gray-700);
    line-height: 1.5;
}
.analysis-card-btn-arrow {
    flex-shrink: 0;
    color: var(--brand);
    transition: transform 0.15s;
}
.analysis-card-btn:hover .analysis-card-btn-arrow { transform: translateX(3px); }
.analysis-card-btn-arrow svg { width: 18px; height: 18px; }

/* Uniform card sizing */
.analysis-card-btn-wrap { max-width: 560px; }
.analysis-card-btn-wrap.is-expanded { max-width: none; }
.analysis-card-btn { min-height: 80px; }

/* Plan-specific accents */
.analysis-card-btn.plan-free {
    border-color: var(--brand);
    border-left-color: var(--brand);
}
.analysis-card-btn.plan-free .analysis-card-btn-icon {
    background: var(--brand);
}
.analysis-card-btn.plan-pro {
    border-color: #3498db;
    border-left-color: #3498db;
    background: linear-gradient(135deg, #eef6fd 0%, #fff 100%);
}
.analysis-card-btn.plan-pro .analysis-card-btn-icon {
    background: #3498db;
    box-shadow: 0 2px 6px rgba(52,152,219,0.25);
}
.analysis-card-btn.plan-pro:hover {
    border-color: #2980b9;
    box-shadow: 0 4px 14px rgba(52,152,219,0.18);
    background: linear-gradient(135deg, #d6eaf8 0%, #fff 100%);
}
.analysis-card-btn.plan-pro .analysis-card-btn-arrow { color: #3498db; }
.analysis-card-btn.plan-biz {
    border-color: #e67e22;
    border-left-color: #e67e22;
    background: linear-gradient(135deg, #fef5ec 0%, #fff 100%);
}
.analysis-card-btn.plan-biz .analysis-card-btn-icon {
    background: #e67e22;
    box-shadow: 0 2px 6px rgba(230,126,34,0.25);
}
.analysis-card-btn.plan-biz:hover {
    border-color: #d35400;
    box-shadow: 0 4px 14px rgba(230,126,34,0.18);
    background: linear-gradient(135deg, #fdebd0 0%, #fff 100%);
}
.analysis-card-btn.plan-biz .analysis-card-btn-arrow { color: #e67e22; }

/* Plan badge enlargement */
.analysis-card-btn .plan-badge {
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 5px;
    vertical-align: middle;
}

/* --- Draggable detail sheets --- */
.cashflow_area .detail_sheet {
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    background-color: #fff !important;
}
.cashflow_area .detail_sheet > .pull-right {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 4px 8px;
    font-size: 0.85em;
    color: #999;
    text-align: right;
    display: block;
    width: 100%;
}

/* Analysis result area — full width */
.analyze_result { width: 100%; }

/* --- 結果サマリー カードレイアウト --- */

.summary-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Individual card — horizontal label | value layout */
.summary-card {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e0e4e8;
    background: #fff;
}
.summary-card__label {
    align-items: flex-start;
    padding-top: 12px;
}
.summary-card:first-child {
    border-top: 1px solid #e0e4e8;
}

/* Left label column */
.summary-card__label {
    flex: 0 0 140px;
    width: 140px;
    padding: 10px 12px;
    background: #f5f7fa;
    border-left: 4px solid #8cad9e;
    border-right: 1px solid #e4e8ed;
    font-weight: 600;
    font-size: 13px;
    color: #3c4a5a;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

/* Accent colours per section */
.summary-card--event    .summary-card__label { border-left-color: #3498db; }
.summary-card--deficit  .summary-card__label { border-left-color: #e05a5a; }
.summary-card--asset    .summary-card__label { border-left-color: #5aaa6e; }
.summary-card--loan     .summary-card__label { border-left-color: #e09a3a; }
.summary-card--insurance .summary-card__label { border-left-color: #8c6bbd; }

/* Right value column */
.summary-card__value {
    flex: 1;
    min-width: 0;
    padding: 8px 14px;
}

/* Typography inside cards — all values use same base size */
.summary-card {
    font-size: 14px;
    line-height: 1.5;
}
/* Reset all PHP-generated size overrides to unified size */
.summary-card b,
.summary-card .main_item,
.summary-card .main_item b,
.summary-card .number_area,
.summary-card .main_item .number_area {
    font-size: 1.15em;
    font-weight: bold;
}
.summary-card small {
    font-size: 0.85em;
    font-weight: normal;
}

/* Detail button stays at top-right */
.summary-card__value {
    position: relative;
}
.summary-card__value > .pull-right {
    position: sticky;
    top: 10px;
    float: right;
}

/* Tables inside cards */
.summary-card table {
    margin-bottom: 0;
    font-size: inherit;
}
.summary-card table td {
    padding: 2px 6px;
}

/* Promotion area */
.summary-promotion {
    padding: 8px 0;
}

/* Responsive: stack label above value on narrow screens */
@media (max-width: 767px) {
    .summary-card {
        flex-direction: column;
    }
    .summary-card__label {
        flex: none;
        min-width: 0;
        padding: 8px 14px;
    }
    .summary-card__value {
        padding: 8px 14px;
    }
}

/* --- 分析結果・折りたたみ --- */
.analyze_result .loading {
    margin-top: 2em;
    margin-bottom: 2em;
}
.toggle_analyze .fas {
    transition: transform 0.3s;
}
.analyze_result .alert {
    margin: 1rem;
}
.analyze_result {
    background-color: #fff;
    border: 2px solid #8cad9e;
    position: relative;
    padding: 20px 10px 20px;
}
/* 分析結果ツールバー（折りたたみ + 閉じる） */
.analyze_result__toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: #e0f0e2;
    padding: 5px 12px;
    position: sticky;
    top: 0;
    z-index: 5;
}
.toggle_analyze {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    padding: 3px 10px;
    color: #6a9a7a;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}
.toggle_analyze:hover {
    color: #333;
    background-color: #cde5d1;
}
.analyze_result__close {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 10px;
    color: #999;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}
.analyze_result__close:hover {
    color: #c0392b;
    background-color: #fde8e8;
}

/* カード拡張型: ボタンと結果を1つのカードにまとめる */
.analysis-card-btn-wrap.is-expanded .analysis-card-btn {
    border: none;
    border-bottom: 1px solid #d5e5da;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}
.analysis-card-btn-wrap.is-expanded .analysis-card-btn:hover {
    transform: none;
    box-shadow: none;
}
.analysis-card-btn-wrap.is-expanded .analysis-card-btn-arrow {
    transform: none !important;
}
.analysis-card-btn-wrap.is-expanded {
    border: 1.5px solid var(--brand);
    border-left: 4px solid var(--brand);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(39,174,96,0.10);
    overflow: hidden;
    background: #fff;
}
.analysis-card-btn-wrap.is-expanded .analyze_result {
    border: none;
    border-radius: 0;
    padding: 0;
    background: #fff;
}
.analysis-card-btn-wrap.is-expanded .analyze_content {
    padding: 20px 12px;
}
.analysis-card-btn-wrap.is-expanded .toggle_analyze {
    border-radius: 0;
}
/* Plan-specific expanded wrap colors */
.analysis-card-btn-wrap.is-expanded:has(.plan-pro) {
    border-color: #3498db;
    border-left-color: #3498db;
    box-shadow: 0 2px 12px rgba(52,152,219,0.10);
}
.analysis-card-btn-wrap.is-expanded:has(.plan-biz) {
    border-color: #e67e22;
    border-left-color: #e67e22;
    box-shadow: 0 2px 12px rgba(230,126,34,0.10);
}

/* --- Result Box Section Headers (h6) --- */
.result_box h6 {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--gray-800);
    margin-top: 16px;
    margin-bottom: 10px;
    line-height: 1.6;
}
/* Legend checkboxes row inside h6 */
.result_box h6 > .pull-right {
    font-size: 0.85em;
    font-weight: 500;
    margin-left: auto;
    float: none;
}
.result_box h6 > .pull-right label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0 2px;
    vertical-align: middle;
    cursor: pointer;
}

/* --- Cashflow Legend Box alignment --- */
.cashflow_legend_box.legend_box {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 6px 8px;
    font-size: 0.82em !important;
    padding: 0 10px !important;
    margin-top: 12px;
    overflow: hidden;
}
.cashflow_legend_box.legend_box fieldset {
    border: 1px solid #ddd !important;
    padding: 4px 10px 8px !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}
.cashflow_legend_box.legend_box fieldset:first-of-type {
    flex: 1 1 0;
    min-width: 0;
}
.cashflow_legend_box.legend_box fieldset:last-of-type {
    flex: 0 0 auto;
}
.cashflow_legend_box.legend_box fieldset:last-of-type .cf-legend-flow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 4px;
    max-width: 230px;
}
.cf-legend-cols {
    display: flex;
    flex-direction: row;
    gap: 4px 12px;
    align-items: flex-start;
}
.cf-legend-col {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2px;
    align-content: flex-start;
}
.cf-legend-col--balance { flex: 0 0 auto; }
.cf-legend-col--income  { flex: 1 1 0; min-width: 0; }
.cf-legend-col--expense { flex: 1 1 0; min-width: 0; }
.cashflow_legend_box.legend_box fieldset legend {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--gray-700);
    padding: 0 6px;
    margin-bottom: 2px;
}
.cashflow_legend_box.legend_box table {
    width: 100%;
}
.cashflow_legend_box.legend_box table td {
    white-space: nowrap;
    padding: 1px 4px;
    vertical-align: middle;
    line-height: 1.3;
}
.cf-legend-flow { display: flex; flex-wrap: wrap; gap: 2px 0; }
.cf-legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0; width: 100%; }
.cf-legend-row label { padding: 2px 6px; }
.cf-legend-flow > label { padding: 2px 6px; }
.legend_box label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
}
.legend_box .color_box {
    width: 10px;
    height: 10px;
    min-width: 10px;
    vertical-align: middle;
}
.legend_box input[type="checkbox"] {
    display: none;
}
.legend_box label { transition: opacity 0.15s; }
.legend_box label.is-legend-hidden { opacity: 0.4; }
.legend_box label.is-legend-hidden:hover { opacity: 0.7; }

.analysis-card-caution {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
}

/* Modal opener variant (asset selector) — card style matching analysis-card-btn */
.analysis-card-btn-modal {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 560px;
    padding: var(--space-md);
    border: 1.5px solid var(--brand);
    border-left: 4px solid var(--brand);
    border-radius: 10px;
    background: linear-gradient(135deg, #f0faf4 0%, #fff 100%);
    cursor: pointer;
    text-align: left;
    color: var(--gray-900);
    box-shadow: 0 2px 6px rgba(39,174,96,0.08);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.15s;
    margin: 10px 0;
    text-decoration: none;
}
.analysis-card-btn-modal .analysis-card-btn-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 2px 6px rgba(39,174,96,0.25);
}
.analysis-card-btn-modal .analysis-card-btn-icon svg { width: 22px; height: 22px; }
.analysis-card-btn-modal .analysis-card-btn-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.analysis-card-btn-modal .analysis-card-btn-title {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--gray-900);
}
.analysis-card-btn-modal .analysis-card-desc {
    font-size: 0.9em;
    color: var(--gray-700);
    line-height: 1.5;
    font-weight: 400;
}
.analysis-card-btn-modal .analysis-card-btn-arrow {
    flex-shrink: 0;
    color: var(--brand);
    transition: transform 0.15s;
}
.analysis-card-btn-modal .analysis-card-btn-arrow svg { width: 18px; height: 18px; }
.analysis-card-btn-modal:hover {
    border-color: var(--brand-dark);
    box-shadow: 0 4px 14px rgba(39,174,96,0.18);
    background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--gray-900);
}
.analysis-card-btn-modal:hover .analysis-card-btn-arrow { transform: translateX(3px); }

/* Modal card plan variants */
.analysis-card-btn-modal.plan-pro {
    border-color: #3498db;
    border-left-color: #3498db;
    background: linear-gradient(135deg, #eef6fd 0%, #fff 100%);
}
.analysis-card-btn-modal.plan-pro .analysis-card-btn-icon {
    background: #3498db;
    box-shadow: 0 2px 6px rgba(52,152,219,0.25);
}
.analysis-card-btn-modal.plan-pro:hover {
    border-color: #2980b9;
    box-shadow: 0 4px 14px rgba(52,152,219,0.18);
    background: linear-gradient(135deg, #d6eaf8 0%, #fff 100%);
}
.analysis-card-btn-modal.plan-pro .analysis-card-btn-arrow { color: #3498db; }
.analysis-card-btn-modal.plan-biz {
    border-color: #e67e22;
    border-left-color: #e67e22;
    background: linear-gradient(135deg, #fef5ec 0%, #fff 100%);
}
.analysis-card-btn-modal.plan-biz .analysis-card-btn-icon {
    background: #e67e22;
    box-shadow: 0 2px 6px rgba(230,126,34,0.25);
}
.analysis-card-btn-modal.plan-biz:hover {
    border-color: #d35400;
    box-shadow: 0 4px 14px rgba(230,126,34,0.18);
    background: linear-gradient(135deg, #fde3cd 0%, #fff 100%);
}
.analysis-card-btn-modal.plan-biz .analysis-card-btn-arrow { color: #e67e22; }

@media (prefers-reduced-motion: reduce) {
    .analysis-mode-switcher label,
    .analysis-nav-item,
    .analysis-primary-row .analysis-cf-label,
    .analysis-card-btn,
    .analysis-card-btn-modal {
        transition: none;
    }
}

/* ============================================
   Nenkin Teikibin Color Scheme
   ねんきん定期便カラースキーム
   ============================================ */

:root {
    --teikibin-primary: #2c5282;
    --teikibin-secondary: #4a6fa5;
    --teikibin-header-bg: #ebf2f8;
    --teikibin-header-bg-dark: #d4e2ef;
    --teikibin-border: #b0c4d8;
    --teikibin-light-bg: #f7fafc;
    --teikibin-accent: #2b6cb0;
    --teikibin-text: #2d3748;
    --teikibin-total-border: #2b6cb0;
    --teikibin-input-border: #cbd5e0;
    --teikibin-input-focus: #4299e1;
}

/* Past enrollment form section */
.past_kanyu_form {
    border: 1px solid #cbd5e0 !important;
    border-radius: 8px;
    padding: 20px 20px 16px !important;
    margin-top: 8px;
    background: #f8fafc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.past_kanyu_form > legend.arrow2 {
    padding: 0;
    margin: 0 0 0 40px;
    border: none;
    background: transparent;
    transform: none;
    width: 36px;
    height: 18px;
    overflow: visible;
    line-height: 0;
    font-size: 0;
}
.past_kanyu_form > legend.arrow2::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-right: 1.5px solid #cbd5e0;
    border-top: 1.5px solid #cbd5e0;
    border-left: none;
    border-bottom: none;
    transform: rotate(-45deg);
    background: #f8fafc;
    position: relative;
    top: -2px;
    left: 8px;
}
.past_kanyu_form > legend.arrow2 > .teikibin_form_legend_label {
    display: none;
}

/* Override inline margin-top:-10px on h6 inside past_kanyu_form */
.past_kanyu_form > h6 {
    margin-top: 0 !important;
    margin-bottom: 10px;
    font-size: 13px;
    color: #4a5568;
}
.past_kanyu_form > h6 small {
    font-size: 13px;
}
.past_kanyu_form > hr {
    border-color: #e2e8f0;
    margin: 10px 0;
}

/* Teikibin form wrapper */
.teikibin_form {
    padding: 0;
    margin-bottom: 16px;
}
.teikibin_form > .row {
    margin-left: 0;
    margin-right: 0;
}
.teikibin_form > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 12px;
}
.teikibin_form > .row > [class*="col-"]:last-child {
    padding-right: 0;
    padding-left: 12px;
}

.teikibin_form h4 {
    color: var(--teikibin-primary);
    font-size: 14px;
    font-weight: 700;
    border-bottom: 2px solid var(--teikibin-accent);
    padding-bottom: 8px;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}

/* Table overrides inside teikibin_form */
.teikibin_form .teikibin {
    color: var(--teikibin-text);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--teikibin-border);
}

.teikibin_form .teikibin th,
.teikibin_form .teikibin td {
    border-width: 0 0 1px 1px !important;
    border-style: solid !important;
    border-color: var(--teikibin-border) !important;
}
.teikibin_form .teikibin tr:last-child th,
.teikibin_form .teikibin tr:last-child td {
    border-bottom-width: 0 !important;
}
.teikibin_form .teikibin th:first-child,
.teikibin_form .teikibin td:first-child {
    border-left-width: 0 !important;
}

.teikibin_form .teikibin th {
    background: linear-gradient(180deg, var(--teikibin-header-bg) 0%, var(--teikibin-header-bg-dark) 100%) !important;
    color: var(--teikibin-primary);
    font-size: 11.5px;
    font-weight: 600;
    padding: 8px 6px !important;
    line-height: 1.4;
    text-align: center !important;
    vertical-align: middle !important;
}

.teikibin_form .teikibin td {
    padding: 7px 6px !important;
    font-size: 13px;
    background-color: #fff;
    text-align: center !important;
    vertical-align: middle !important;
}

.teikibin_form .teikibin td:empty {
    background-color: #f0f4f8;
}

.teikibin_form .teikibin .inactive {
    background-color: #f0f4f8 !important;
}

/* Input sizing — override wizard.css/themes.css .month[type="number"]{width:45px} */
.teikibin_form .teikibin .kanyu_months {
    width: 72px;
    text-align: right;
    padding: 4px 4px;
    font-size: 13px;
    border: 1px solid var(--teikibin-input-border);
    border-radius: 4px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.profile_pension_area .teikibin_form .month[type="number"] {
    width: 72px;
    max-width: none;
}
.teikibin_form .past_pension_month_form td {
    white-space: nowrap;
}
.teikibin_form .past_pension_month_form th {
    font-size: 11px;
    padding: 4px 3px !important;
}

.teikibin_form .teikibin .amount {
    width: 100px;
    text-align: right;
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid var(--teikibin-input-border);
    border-radius: 4px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.teikibin_form .teikibin input {
    color: #2d3748;
    background-color: var(--input-bg);
}

/* Editable input highlight — site-wide wizard */
.setting_area input[type="text"],
.setting_area input[type="number"],
.setting_area select {
    background-color: var(--input-bg);
}

.teikibin_form .teikibin input:focus {
    border-color: var(--teikibin-input-focus);
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
    outline: none;
}

/* Bold total cell */
.teikibin_form .teikibin td[style*="border:3px"] {
    border: 2px solid var(--teikibin-total-border) !important;
    background: var(--teikibin-light-bg);
    font-weight: 700;
    font-size: 15px;
}

/* "最近の月別状況" table */
.teikibin_form .recent_kanyu_table {
    color: var(--teikibin-text);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--teikibin-border);
}
.teikibin_form .recent_kanyu_table th,
.teikibin_form .recent_kanyu_table td {
    border-width: 0 0 1px 1px !important;
    border-style: solid !important;
    border-color: var(--teikibin-border) !important;
}
.teikibin_form .recent_kanyu_table tr:last-child th,
.teikibin_form .recent_kanyu_table tr:last-child td {
    border-bottom-width: 0 !important;
}
.teikibin_form .recent_kanyu_table th:first-child,
.teikibin_form .recent_kanyu_table td:first-child {
    border-left-width: 0 !important;
}
.teikibin_form .recent_kanyu_table th {
    background: linear-gradient(180deg, var(--teikibin-header-bg) 0%, var(--teikibin-header-bg-dark) 100%) !important;
    color: var(--teikibin-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 4px !important;
    text-align: center !important;
    vertical-align: middle !important;
}
.teikibin_form .recent_kanyu_table td {
    padding: 4px 4px !important;
    font-size: 12px;
    background-color: #fff;
}
.teikibin_form .recent_kanyu_table tr:nth-child(even) td {
    background-color: var(--teikibin-light-bg);
}
.teikibin_form .recent_kanyu_table .kanyu_date {
    font-size: 11px;
    white-space: nowrap;
    color: var(--teikibin-secondary);
    font-weight: 500;
    text-align: center;
}
/* 最終行の基準日フォーム（令和/年/月）を1列に */
.teikibin_form .recent_kanyu_table tr:last-child td:first-child {
    white-space: nowrap;
}
.teikibin_form .recent_kanyu_table select {
    font-size: 12px;
    padding: 3px 4px;
    border: 1px solid var(--teikibin-input-border);
    border-radius: 4px;
    transition: border-color 0.2s;
}
.teikibin_form .recent_kanyu_table select:focus {
    border-color: var(--teikibin-input-focus);
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.15);
    outline: none;
}
.teikibin_form .recent_kanyu_table input {
    width: 55px;
    text-align: right;
    font-size: 12px;
    padding: 3px 5px;
    border: 1px solid var(--teikibin-input-border);
    border-radius: 4px;
    transition: border-color 0.2s;
}
.teikibin_form .recent_kanyu_table input:focus {
    border-color: var(--teikibin-input-focus);
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.15);
    outline: none;
}

/* Dropdown for date (gengo/year/month) at bottom of teikibin */
.teikibin_form select.create_gengo,
.teikibin_form select.create_year,
.teikibin_form select.create_month {
    font-size: 13px;
    padding: 4px 6px;
    border: 1px solid var(--teikibin-input-border);
    border-radius: 4px;
    color: var(--teikibin-primary);
    transition: border-color 0.2s;
}
.teikibin_form select.create_gengo:focus,
.teikibin_form select.create_year:focus,
.teikibin_form select.create_month:focus {
    border-color: var(--teikibin-input-focus);
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.15);
    outline: none;
}

/* Section 3 amount table — slightly larger inputs */
.teikibin_form .expected_amount_area .teikibin .amount {
    width: 80px;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 6px;
}

/* Over50 type expected amounts table */
.teikibin_form .expected_amount_area.over50 > .teikibin {
    width: 100%;
}
.teikibin_form .expected_amount_area.over50 .teikibin th {
    font-size: 11px;
    white-space: normal;
    word-break: keep-all;
}

/* Over50 inner sub-table (報酬比例部分/定額部分/経過的加算部分) */
.teikibin_form .expected_amount_area.over50 .teikibin td table {
    width: 100%;
    border: none;
    box-shadow: none;
}
.teikibin_form .expected_amount_area.over50 .teikibin td table tr {
    display: flex;
    flex-direction: column;
    padding: 2px 0;
}
.teikibin_form .expected_amount_area.over50 .teikibin td table td {
    display: block;
    border: none !important;
    background: transparent !important;
    padding: 0 2px !important;
    text-align: left !important;
    white-space: nowrap;
    font-size: 12px;
}
.teikibin_form .expected_amount_area.over50 .teikibin td table td.uchiwake {
    font-size: 9px;
    color: var(--teikibin-secondary);
    padding-bottom: 1px !important;
}
.teikibin_form .expected_amount_area.over50 .teikibin td table .amount {
    width: 70px;
}

/* Span-based totals (auto-calculated) */
.teikibin_form .kokumin_nenkin_months,
.teikibin_form .kosei_nenkin_months,
.teikibin_form .nenkin_kanyu_months,
.teikibin_form .jukyu_sikaku_months,
.teikibin_form .total_amount,
.teikibin_form span[class*="total_expected_amount"] {
    font-weight: 700;
    font-size: 15px;
    color: var(--teikibin-accent);
}

/* ============================================
   Selectable option — 共通の選択状態UI
   ============================================ */
.selectable-option {
    padding: 6px 10px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}
.selectable-option.is-active {
    background-color: #ebf5ff;
    border-left-color: #3182ce;
}
.selectable-option:not(.is-active) {
    opacity: 0.45;
}
.selectable-option:not(.is-active):hover {
    opacity: 0.75;
    background-color: #f7fafc;
}

/* ============================================
   iPad / Tablet responsive (768px - 1199px)
   年金タブ iPad対応
   ============================================ */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    /* 受給設定テーブル: 基本金額セル内レイアウト改善 */
    .profile_pension_area .pension_title {
        width: 80px;
        font-size: 12px;
    }
    .jukyu_config_tr .base_amount_setting table {
        width: 100%;
    }
    .jukyu_config_tr .base_amount_setting tr {
        display: flex;
        flex-direction: column;
    }
    .jukyu_config_tr .base_amount_setting tr td {
        padding: 4px 8px !important;
        width: 100%;
    }
    .jukyu_config_tr .base_amount_setting label {
        font-size: 12px;
        white-space: nowrap;
    }
    .jukyu_config_tr td select.start_age {
        width: 80px;
    }

    /* 万が一列 */
    .mangaichi {
        font-size: 11px;
        min-width: 70px;
    }

    /* ねんきん定期便テーブル: 左右の列幅調整 */
    .teikibin_form > .row > .col-md-7 {
        width: 55%;
    }
    .teikibin_form > .row > .col-md-5 {
        width: 45%;
    }
    .teikibin_form .teikibin th {
        font-size: 10.5px;
        padding: 5px 3px !important;
    }
    .teikibin_form .teikibin td {
        font-size: 12px;
        padding: 5px 3px !important;
    }
    .teikibin_form .teikibin .kanyu_months {
        width: 60px;
        font-size: 12px;
        padding: 3px 3px;
    }
    .teikibin_form .teikibin .amount {
        width: 75px;
        font-size: 12px;
        padding: 3px 4px;
    }

    /* 最近の月別状況テーブル */
    .teikibin_form .recent_kanyu_table th {
        font-size: 10px;
        padding: 3px 2px !important;
    }
    .teikibin_form .recent_kanyu_table td {
        font-size: 11px;
        padding: 2px 2px !important;
    }
    .teikibin_form .recent_kanyu_table input {
        width: 45px;
        font-size: 11px;
    }
    .teikibin_form .recent_kanyu_table select {
        font-size: 11px;
    }
}

/* =============================================
   Empty State Cards (Q11 貯蓄・投資)
   ============================================= */
.empty-state-card {
    border: 1.5px dashed #d0d7de;
    border-radius: 6px;
    padding: 10px 14px;
    text-align: left;
    background: #f8f9fa;
    margin: 4px 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.empty-state-card__icon {
    flex-shrink: 0;
}
.empty-state-card__icon svg {
    width: 20px;
    height: 20px;
    color: #8ca0b3;
}
.empty-state-card__title {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin: 0;
}
.empty-state-card__desc {
    font-size: 12px;
    color: #888;
    margin: 2px 0 0;
    line-height: 1.4;
}
.empty-state-card__hint {
    font-size: 11px;
    color: #8ca0b3;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
}
.empty-state-card__hint svg {
    width: 12px;
    height: 12px;
}
.empty-state-card__action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #5c8ab5;
    text-decoration: none;
    padding: 4px 12px;
    border: 1px solid #5c8ab5;
    border-radius: 16px;
    margin-left: auto;
    flex-shrink: 0;
    transition: background-color 0.15s, color 0.15s;
}
.empty-state-card__action:hover {
    background-color: #5c8ab5;
    color: #fff;
    text-decoration: none;
}
.empty-state-card__action svg {
    width: 12px;
    height: 12px;
}

/* Scheme descriptions for DC/iDeCo */
.scheme-description {
    font-size: 12px;
    color: #888;
    margin: -8px 0 8px 15px;
    padding-left: 5px;
    line-height: 1.5;
}

/* Accordion for financial_group (Q11) */
.financial_group__header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-radius: 4px;
    transition: background-color 0.15s;
}
.financial_group__header:hover {
    background-color: #f5f5f5;
}
.financial_group__header .accordion-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    color: #999;
    transition: transform 0.2s;
}
.financial_group__header.collapsed .grand_total_balance {
    font-weight: 600;
}
.financial_group__badge {
    font-size: 12px;
    font-weight: normal;
    color: #fff;
    background: #5c8ab5;
    border-radius: 12px;
    padding: 2px 10px;
    margin-left: 6px;
    white-space: nowrap;
}
.financial_group__badge .grand_total_balance {
    color: #fff;
}

/* ==============================================
   Count badge (Dom_manager::get_count_badge)
   Q11 init_balance「2口座 · 計 ¥XXX万」等で使用。
   Phase 1 で .financial_group__badge の手書き表記を置換した統一ヘルパー。
   Phase 3 で Q1-Q10 のタブキャプション件数にも流用予定。
   shape は四角寄り (border-radius: 4px) で他 wizard pill 群とトーンを合わせる。
   ============================================== */
.count-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 13px;
    font-weight: normal;
    color: #fff;
    background: var(--brand, #3A8DB1);
    border-radius: 4px;
    padding: 2px 10px;
    margin-left: 8px;
    white-space: nowrap;
    line-height: 1.4;
}
/* アコーディオンヘッダ内では右端に寄せて、4 セクションのバッジを縦に揃える */
.cl-accordion-header .count-badge,
.financial_group__header .count-badge {
    margin-left: auto;
}
.count-badge__num {
    font-weight: 600;
}
.count-badge__unit {
    opacity: 0.9;
}
.count-badge__sep {
    margin: 0 2px;
    color: rgba(255, 255, 255, 0.5);
}
.count-badge__sum {
    font-weight: 600;
    font-size: 14px;
}
.count-badge__sum .grand_total_balance {
    color: #fff;
}

/* インライン件数表記 (Dom_manager::get_inline_counts)
   Q11 schedule_list のタブキャプション「銀2 · 証1」等で使用。 */
.inline-counts {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}
.inline-count {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.inline-count__label {
    color: #888;
}
.inline-count__num {
    font-weight: 600;
    color: #555;
}
.inline-counts__sep {
    color: #ccc;
    margin: 0 2px;
}
/* .setting_count (青いタブキャプションバッジ) の中で使われた場合の色コントラスト確保。
   白文字 pill 上で灰色が潰れないように反転。 */
.setting_count .inline-count__label {
    color: rgba(255, 255, 255, 0.8);
}
.setting_count .inline-count__num {
    color: #fff;
}
.setting_count .inline-counts__sep {
    color: rgba(255, 255, 255, 0.4);
}
/* Q11 Step guide */
.q11-steps {
    display: flex;
    gap: 16px;
    margin: 10px 0;
}
.q11-steps__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 14px;
}
.q11-steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: #5c8ab5;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-top: 1px;
}
.q11-steps__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.q11-steps__content b {
    font-size: 13px;
    color: #333;
}
.q11-steps__detail {
    font-size: 11px;
    color: #888;
    line-height: 1.4;
}

/* Cash flow guide diagram (Q11 Section 2) */
.cashflow-guide {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cashflow-guide__row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cashflow-guide__box {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.cashflow-guide__box--income {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}
.cashflow-guide__box--expense {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}
.cashflow-guide__box--surplus {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.cashflow-guide__box--deficit {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}
.cashflow-guide__box--action {
    background: #fff;
    color: #333;
    border: 2px solid #5c8ab5;
    position: relative;
}
.cashflow-guide__arrow {
    font-size: 14px;
    color: #999;
    font-weight: bold;
}

@media print {
    .financial_group__body {
        display: block !important;
    }
    .financial_group__header .accordion-icon {
        display: none;
    }
}

/* --- Empty Profile Summary --- */
.empty-profile-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    margin: 8px 0 12px;
    background: #f8f9fa;
    border: 1px dashed #ccc;
    border-radius: 6px;
    cursor: pointer;
    color: #888;
    font-size: 14px;
    transition: background 0.15s, border-color 0.15s;
}
.empty-profile-summary:hover {
    background: #eef6ff;
    border-color: #4a9eff;
    color: #555;
}
.empty-profile-summary i[data-lucide] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.empty-profile-summary__action {
    margin-left: auto;
    font-size: 12px;
    color: #4a9eff;
    white-space: nowrap;
}

/* --- Account Schedule Profile Tabs (sticky) --- */
.Account_wizard .tab-panel > .tab_list {
    position: sticky;
    top: 46px;
    z-index: 10;
    background: #fff;
    border-bottom: 2px solid #ddd;
    margin-bottom: 0;
    padding-top: 4px;
}

/* --- Wizard: Add button — tinted fill (brand-light bg + brand-dark border/text) --- */
/* 使用頻度の高い副次アクション。白地の取得(wiz-btn-fetch)/出力(wiz-btn-export) と */
/* 視覚的に区別するため tinted fill。主操作(brand-dark 塗り)より一段軽い重み。 */
/* Bootstrap の色クラス (.btn-danger 等) への依存は 2026-04-23 に除去。意味論クラス単独で視覚が決まる。 */
#wizard .add_field_profile,
#wizard .master_add_btn,
#wizard .dropdown-toggle.add_field_profile,
.fp-modal-overlay .add_field_profile,
.fp-modal-overlay .master_add_btn,
.fp-modal-overlay .dropdown-toggle.add_field_profile {
    background-color: var(--brand-light, #eaf2f8) !important;
    border: 1px solid var(--brand-dark, #1F6E63) !important;
    color: var(--brand-dark, #1F6E63) !important;
    font-weight: 600;
    box-shadow: none !important;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
#wizard .add_field_profile:hover,
#wizard .master_add_btn:hover,
#wizard .dropdown-toggle.add_field_profile:hover,
#wizard .add_field_profile:focus-visible,
#wizard .master_add_btn:focus-visible,
#wizard .dropdown-toggle.add_field_profile:focus-visible,
#wizard .btn-group.open > .dropdown-toggle.add_field_profile,
.fp-modal-overlay .add_field_profile:hover,
.fp-modal-overlay .master_add_btn:hover,
.fp-modal-overlay .dropdown-toggle.add_field_profile:hover,
.fp-modal-overlay .add_field_profile:focus-visible,
.fp-modal-overlay .master_add_btn:focus-visible,
.fp-modal-overlay .dropdown-toggle.add_field_profile:focus-visible,
.fp-modal-overlay .btn-group.open > .dropdown-toggle.add_field_profile {
    background-color: #d4e6e2 !important; /* brand-light より一段濃い tint (AA 4.7:1 on brand-dark) */
    border-color: var(--brand-dark, #1F6E63) !important;
    color: var(--brand-dark, #1F6E63) !important;
}
/* キーボード Tab 時のみ halo。マウスクリック時の残留フォーカスはデフォルト outline 抑制。 */
#wizard .add_field_profile:focus-visible,
#wizard .master_add_btn:focus-visible,
#wizard .dropdown-toggle.add_field_profile:focus-visible,
.fp-modal-overlay .add_field_profile:focus-visible,
.fp-modal-overlay .master_add_btn:focus-visible,
.fp-modal-overlay .dropdown-toggle.add_field_profile:focus-visible {
    outline: none !important;
    box-shadow: var(--focus-ring) !important;
}
#wizard .add_field_profile:focus:not(:focus-visible),
#wizard .master_add_btn:focus:not(:focus-visible),
#wizard .dropdown-toggle.add_field_profile:focus:not(:focus-visible),
.fp-modal-overlay .add_field_profile:focus:not(:focus-visible),
.fp-modal-overlay .master_add_btn:focus:not(:focus-visible),
.fp-modal-overlay .dropdown-toggle.add_field_profile:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
/* 押下時: hover の濃い tint より更に一段深い + inset 影 */
#wizard .add_field_profile:active,
#wizard .master_add_btn:active,
#wizard .dropdown-toggle.add_field_profile:active,
.fp-modal-overlay .add_field_profile:active,
.fp-modal-overlay .master_add_btn:active,
.fp-modal-overlay .dropdown-toggle.add_field_profile:active {
    background-color: #b9d5cf !important; /* #d4e6e2 (hover) より一段深い */
    border-color: var(--brand-dark, #1F6E63) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}
#wizard .add_field_profile i,
#wizard .master_add_btn i,
#wizard .dropdown-toggle.add_field_profile i,
.fp-modal-overlay .add_field_profile i,
.fp-modal-overlay .master_add_btn i,
.fp-modal-overlay .dropdown-toggle.add_field_profile i {
    color: inherit !important;
}
#wizard .dropdown-toggle.add_field_profile .caret {
    border-top-color: var(--brand-dark, #1F6E63) !important;
}

/* --- Wizard: Modal trigger (generic btn) — outlined (white bg, 追加系と区別) --- */
/* モーダル起動は「次画面を開く」セマンティクスなので追加系と分離、outlined をデフォルト視覚とする。 */
/* `.btn` スコープで絞ることで、analysis-card-btn-modal / compare-actions__btn など */
/* 独自視覚を持つカード型モーダルオープナー (`btn` クラス非保持) を自動除外する。 */
/* wiz-btn-fetch 等の !important 付きカテゴリクラスが併用されていればそちらが優先。 */
#wizard .wiz-modal-trigger.btn {
    background-color: #fff;
    border: 1px solid var(--brand-dark, #1F6E63);
    color: var(--brand-dark, #1F6E63);
    font-weight: 600;
    box-shadow: none;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
#wizard .wiz-modal-trigger.btn:hover,
#wizard .wiz-modal-trigger.btn:focus-visible {
    background-color: var(--brand-light, #eaf2f8);
    border-color: var(--brand-dark, #1F6E63);
    color: var(--brand-dark, #1F6E63);
}
#wizard .wiz-modal-trigger.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
#wizard .wiz-modal-trigger.btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
#wizard .wiz-modal-trigger.btn:active {
    background-color: #d4e6e2; /* brand-light より一段濃い tint */
    border-color: var(--brand-dark, #1F6E63);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
#wizard .wiz-modal-trigger.btn i {
    color: inherit;
}

/* --- Panel内「口座を追加」— 他の追加ボタンと同じ緑色 --- */
#wizard .panel-body_2 > div > .add_field_profile {
    font-size: 12px;
    padding: 4px 12px;
    margin-left: 24px;
    margin-bottom: 12px;
}

/* --- Wizard button categories (provisional styling, priority tuning TBD) --- */
/* ②-a Export (local download): neutral outlined — non-destructive, secondary */
.wiz-btn-export {
    background-color: #fff !important;
    border: 1px solid #c2cfc7 !important;
    color: #344a3d !important;
    font-weight: 500;
    box-shadow: none !important;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
/* :focus-visible のみでフォーカスリングを出す。マウスクリック時の残留フォーカスは :focus:not(:focus-visible) で既定 outline 抑制。 */
.wiz-btn-export:hover,
.wiz-btn-export:focus-visible {
    background-color: #f0f5f2 !important;
    border-color: #8cad9e !important;
    color: #344a3d !important;
}
.wiz-btn-export:focus-visible {
    outline: none !important;
    box-shadow: var(--focus-ring-neutral) !important;
}
.wiz-btn-export:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
/* 押下時: hover より一段深い bg + inset 影で押し込み感 */
.wiz-btn-export:active {
    background-color: #e3ebe7 !important;
    border-color: #6d8f80 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
.wiz-btn-export i,
.wiz-btn-export svg {
    color: inherit !important;
}

/* ②-b Fetch (external → form field overwrite): outlined info — notable, affects data */
.wiz-btn-fetch {
    background-color: #fff !important;
    border: 1px solid var(--info, #3498db) !important;
    color: #1e6091 !important; /* ~5.9:1 on white, WCAG AA */
    font-weight: 500;
    box-shadow: none !important;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.wiz-btn-fetch:hover,
.wiz-btn-fetch:focus-visible {
    background-color: #e8f3fc !important;
    border-color: #1e6091 !important;
    color: #1e6091 !important;
}
.wiz-btn-fetch:focus-visible {
    outline: none !important;
    box-shadow: var(--focus-ring-info) !important;
}
.wiz-btn-fetch:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
.wiz-btn-fetch:active {
    background-color: #d6e9f7 !important;
    border-color: #155d8b !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
.wiz-btn-fetch i,
.wiz-btn-fetch svg {
    color: inherit !important;
}

/* ③ External link (navigate outside current screen): link-style + external-link icon */
.wiz-btn-external {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: var(--brand-dark, #1F6E63) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-weight: 500;
    box-shadow: none !important;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.wiz-btn-external:hover,
.wiz-btn-external:focus-visible {
    background-color: var(--brand-light, #eaf2f8) !important;
    border-color: var(--brand-dark, #1F6E63) !important;
    color: var(--brand-dark, #1F6E63) !important;
    text-decoration: none !important;
}
.wiz-btn-external:focus-visible {
    outline: none !important;
    box-shadow: var(--focus-ring) !important;
}
.wiz-btn-external:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
.wiz-btn-external:active {
    background-color: #d4e6e2 !important; /* brand-light より一段濃い tint */
    border-color: var(--brand-dark, #1F6E63) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
.wiz-btn-external i,
.wiz-btn-external svg {
    color: inherit !important;
}

/* ============================================================
   Wizard button categories: unified disabled state
   ------------------------------------------------------------
   - :disabled は <button> 要素のみ対象。<a> 要素では [aria-disabled="true"] を使う。
   - pointer-events: none で hover/active 状態を抑制 (キーボード操作時の :focus-visible halo は
     disabled button だと発火しない仕様。[aria-disabled] 付き <a> では発火可能だがまれ)
   - opacity 0.55 + saturate(0.6) でブランド色を薄めつつ判別可能性を維持
   - 旧 `.btn.disabled { opacity: 0.4 }` (L1438) より読み取り性が高い
   ============================================================ */
#wizard .btn-primary:disabled,
#wizard .btn-primary[disabled],
#wizard .btn-primary[aria-disabled="true"],
#wizard .add_field_profile:disabled,
#wizard .add_field_profile[disabled],
#wizard .add_field_profile[aria-disabled="true"],
#wizard .master_add_btn:disabled,
#wizard .master_add_btn[disabled],
#wizard .master_add_btn[aria-disabled="true"],
#wizard .dropdown-toggle.add_field_profile:disabled,
#wizard .dropdown-toggle.add_field_profile[disabled],
#wizard .dropdown-toggle.add_field_profile[aria-disabled="true"],
#wizard .wiz-modal-trigger.btn:disabled,
#wizard .wiz-modal-trigger.btn[disabled],
#wizard .wiz-modal-trigger.btn[aria-disabled="true"],
.wiz-btn-fetch:disabled,
.wiz-btn-fetch[disabled],
.wiz-btn-fetch[aria-disabled="true"],
.wiz-btn-export:disabled,
.wiz-btn-export[disabled],
.wiz-btn-export[aria-disabled="true"],
.wiz-btn-external:disabled,
.wiz-btn-external[disabled],
.wiz-btn-external[aria-disabled="true"] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    filter: saturate(0.6);
}


/* --- Q11: Dim tabs without settings --- */
.Account_wizard .tab_list li a:not([class]) {
    /* Tabs without setting_count span are dimmed */
}
.Account_wizard .tab_list li a .setting_count {
    /* wizard.css の共通スタイルを継承 */
}

/* --- Q11: Tighten empty profile fieldset --- */
.Account_wizard fieldset:has(.empty-profile-summary:not([style*="display:none"])):not(:has(.profile-detail-body[style*="block"])) {
    margin-bottom: 4px;
    padding-bottom: 0;
}
.Account_wizard fieldset:has(.empty-profile-summary:not([style*="display:none"])):not(:has(.profile-detail-body[style*="block"])) legend {
    margin-bottom: 0;
}

/* --- アドバイザー検索 --- */
.adviser-card {
    background: #fff;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.adviser-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.adviser-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 16px 8px;
}
.adviser-card__header .adviser-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e5e7ea;
    flex-shrink: 0;
}
.adviser-card__header .adviser-name {
    font-size: 1.15em;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.4;
}
.adviser-card__header .adviser-company {
    font-size: 0.92em;
    color: #7a8a9a;
}
.adviser-card__badges {
    padding: 4px 16px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.adviser-card__badges .badge-contact {
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #5b9bd5;
    padding: 3px 10px;
    font-size: 0.88em;
    color: #5b9bd5;
    background: #eef5fb;
}
.adviser-card__tabs {
    padding: 0 16px;
    border-bottom: 1px solid #e8e8e8;
}
.adviser-card__tabs .nav-tabs {
    border-bottom: none;
    margin: 0;
}
.adviser-card__tabs .nav-tabs > li > a {
    font-size: 0.92em;
    padding: 7px 12px;
    color: #6c7a8a;
}
.adviser-card__tabs .nav-tabs > li.active > a {
    color: #2c3e50;
    font-weight: 600;
}
.adviser-card__body {
    padding: 14px 16px;
    max-height: 220px;
    overflow-y: auto;
    min-height: 200px;
    font-size: 1em;
    line-height: 1.8;
    color: #444;
}
.adviser-card__body p {
    margin: 0 0 0.8em;
    overflow-wrap: break-word;
}
.adviser-card__body .table {
    font-size: 0.95em;
}
.adviser-card__footer {
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafbfc;
}
.adviser-card__footer .sns-links {
    display: flex;
    align-items: center;
    gap: 6px;
}
.adviser-card__footer .sns-links .sns-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f2f5;
    color: #555;
    transition: background 0.2s, color 0.2s;
}
.adviser-card__footer .sns-links .sns-link:hover {
    background: #e0e4e8;
    color: #333;
    text-decoration: none;
}
.adviser-card__footer .sns-links .sns-link svg {
    width: 18px;
    height: 18px;
}
.sns-icon-svg {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}
.adviser-card__footer .btn-request {
    font-size: 0.95em;
    padding: 8px 20px;
    border-radius: 6px;
    min-height: 36px;
}

.adviser-grid {
    display: flex;
    flex-wrap: wrap;
}
.adviser-grid > [class*="col-"] {
    display: flex;
}
.adviser-grid .adviser-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.adviser-grid .adviser-card__body {
    flex: 1;
}

.adviser-search-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #f8f9fa;
    padding: 12px 0;
    border-bottom: 1px solid #e0e4e8;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.adviser-search-bar select,
.adviser-search-bar input {
    padding: 7px 12px;
    border: 1px solid #ccd3db;
    border-radius: 4px;
    font-size: 14px;
    min-height: 36px;
}
.adviser-search-bar .btn {
    padding: 8px 20px;
    font-size: 14px;
    min-height: 36px;
    border-radius: 6px;
}

.cl-adviser-content {
    margin: 0 14px 20px;
}

/* --- アドバイザーセクション --- */
.adviser-section {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e5e5;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.adviser-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--brand);
}
.adviser-section__title svg {
    width: 20px;
    height: 20px;
    color: var(--brand);
    flex-shrink: 0;
}
.adviser-section__desc {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin: 0 0 16px;
}

/* アドバイザーテーブル */
.adviser-table {
    font-size: 14px;
    margin-bottom: 0;
}
.adviser-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}
.adviser-status--ok {
    background: #e8f5e9;
    color: #2e7d32;
}
.adviser-status--pending {
    background: #fff3e0;
    color: #e65100;
}
.adviser-btn-delete {
    padding: 6px 14px;
    font-size: 13px;
    min-height: 32px;
    border-radius: 6px;
}

/* お知らせ */
.adviser-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.7;
    color: #6d4c00;
}
.adviser-notice svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #f9a825;
}

/* リクエストフォーム */
.adviser-request-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.adviser-request-input {
    padding: 8px 14px;
    border: 1px solid #ccd3db;
    border-radius: 6px;
    font-size: 14px;
    min-height: 38px;
    min-width: 180px;
}
.adviser-request-or {
    font-size: 13px;
    color: #999;
}
.adviser-request-form .msg {
    display: block;
    width: 100%;
    font-size: 13px;
    color: var(--brand);
    margin-top: 4px;
}

/* ガイド（ステップ） */
.adviser-guide {
    background: #f8faf9;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 14px;
}
.adviser-guide__steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.adviser-guide__step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}
.adviser-guide__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}
.adviser-guide__step-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.adviser-guide__step-title {
    font-weight: 600;
    color: #333;
}
.adviser-guide__step-desc {
    font-size: 13px;
    color: #777;
    line-height: 1.5;
}
.adviser-guide__highlight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 14px;
    font-size: 13px;
    color: #2e7d32;
    line-height: 1.6;
}
.adviser-guide__highlight svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
.adviser-guide__note {
    font-size: 13px;
    color: #777;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid #e8ebe9;
}

/* 免責 */
.adviser-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: #999;
}
.adviser-disclaimer svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #ccc;
}

/* ボタン共通 */
.cl-adviser-content .btn {
    padding: 8px 20px;
    font-size: 14px;
    min-height: 38px;
    border-radius: 6px;
}
.cl-adviser-content .btn svg {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    margin-right: 4px;
}

/* --- アドバイザーリクエスト確認モーダル --- */
.adviser-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.adviser-modal {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}
.adviser-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #eee;
}
.adviser-modal__header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}
.adviser-modal__header h3 svg {
    width: 20px;
    height: 20px;
    color: var(--brand);
}
.adviser-modal__close {
    font-size: 24px;
    color: #aaa;
    text-decoration: none;
    line-height: 1;
}
.adviser-modal__close:hover {
    color: #333;
    text-decoration: none;
}
.adviser-modal__body {
    padding: 20px 24px;
}
.adviser-modal__adviser-card {
    background: #f8faf9;
    border: 1px solid #e0e8e3;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.6;
}
.adviser-modal__explain {
    margin-bottom: 16px;
}
.adviser-modal__explain p {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px;
}
.adviser-modal__explain ul {
    margin: 0;
    padding-left: 20px;
}
.adviser-modal__explain li {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
}
.adviser-modal__message label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.adviser-modal__message textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 14px;
    border: 1px solid #ccd3db;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
    box-sizing: border-box;
}
.adviser-modal__message textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(46,125,50,0.1);
}
.adviser-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #eee;
}
.adviser-modal__footer .btn {
    min-height: 38px;
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 6px;
}
.adviser-modal__result {
    padding: 16px 24px;
}
.adviser-modal__success {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}
.adviser-modal__success svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.adviser-modal__error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fbe9e7;
    color: #c62828;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}
.adviser-modal__error svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* --- アドバイザー顧客一覧: メッセージ表示 --- */
.adviser-msg-cell {
    max-width: 250px;
}
.adviser-msg-bubble {
    background: #f0f4f8;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #444;
    word-break: break-word;
}

/* --- ダッシュボード: アドバイザー相談通知 --- */
.dash-adviser-alert {
    display: flex;
    gap: 16px;
    margin: 14px 14px 0;
    padding: 18px 22px;
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
    border: 1px solid #ffe082;
    border-left: 4px solid #f9a825;
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(249,168,37,0.12);
    animation: dash-alert-in 0.4s ease-out;
}
@keyframes dash-alert-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.dash-adviser-alert__icon {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9a825;
    border-radius: 50%;
    color: #fff;
}
.dash-adviser-alert__icon svg {
    width: 22px;
    height: 22px;
}
.dash-adviser-alert__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #e53935;
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.dash-adviser-alert__body {
    flex: 1;
    min-width: 0;
}
.dash-adviser-alert__title {
    font-size: 15px;
    font-weight: 700;
    color: #6d4c00;
    margin-bottom: 10px;
}
.dash-adviser-alert__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.dash-adviser-alert__item {
    background: rgba(255,255,255,0.7);
    border-radius: 6px;
    padding: 10px 14px;
}
.dash-adviser-alert__user {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}
.dash-adviser-alert__msg {
    margin-top: 4px;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}
.dash-adviser-alert__btn {
    padding: 8px 20px;
    font-size: 14px;
    min-height: 38px;
    border-radius: 6px;
}
.dash-adviser-alert__btn svg {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    margin-right: 4px;
}

/* =========================================
   チャット / メッセージ機能
   ========================================= */

/* --- メッセージ一覧ページ --- */
.chat-page {
    margin: 0 14px 20px;
}
.chat-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}
.chat-empty svg {
    width: 48px;
    height: 48px;
    color: #ccc;
    margin-bottom: 16px;
}
.chat-empty p {
    font-size: 15px;
    margin: 0 0 6px;
}

/* 検索バー */
.chat-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: var(--radius);
    padding: 10px 16px;
    margin-bottom: 10px;
}
.chat-search svg {
    width: 18px;
    height: 18px;
    color: #aaa;
    flex-shrink: 0;
}
.chat-search__input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
}

/* 会話リスト */
.chat-conv-list {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e5e5;
    overflow: hidden;
}
.chat-conv-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.chat-conv-item:hover {
    background: #f8faf9;
    text-decoration: none;
    color: inherit;
}
.chat-conv-item:last-child {
    border-bottom: none;
}
.chat-conv-item--unread {
    background: #f0f7ff;
}
.chat-conv-item__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e8edf2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #8899aa;
}
.chat-conv-item__avatar svg {
    width: 22px;
    height: 22px;
}
.chat-conv-item__body {
    flex: 1;
    min-width: 0;
}
.chat-conv-item__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.chat-conv-item__name {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-conv-item__time {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
}
.chat-conv-item__preview {
    font-size: 13px;
    color: #777;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 未読バッジ */
.chat-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: #e53935;
    color: #fff;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- 会話画面 --- */
.chat-conversation {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 400px;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-messages__empty {
    text-align: center;
    color: #aaa;
    padding: 40px 0;
    font-size: 14px;
}

/* メッセージバブル */
.chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}
.chat-msg--mine {
    align-self: flex-end;
    align-items: flex-end;
}
.chat-msg--theirs {
    align-self: flex-start;
    align-items: flex-start;
}
.chat-msg__bubble {
    padding: 10px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
}
.chat-msg--mine .chat-msg__bubble {
    background: var(--brand);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg--theirs .chat-msg__bubble {
    background: #f0f2f5;
    color: #333;
    border-bottom-left-radius: 4px;
}
.chat-msg__meta {
    font-size: 11px;
    color: #aaa;
    margin-top: 3px;
    padding: 0 4px;
}

/* 入力エリア */
.chat-input {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e5e5e5;
    background: #fafbfc;
    border-radius: 0 0 var(--radius) var(--radius);
}
.chat-input__textarea {
    flex: 1;
    border: 1px solid #ccd3db;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    max-height: 120px;
    overflow-y: auto;
}
.chat-input__textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(46,125,50,0.1);
}
.chat-input__send {
    width: 42px;
    height: 42px;
    border: none;
    background: var(--brand);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.chat-input__send:hover {
    background: #256d27;
}
.chat-input__send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.chat-input__send svg {
    width: 20px;
    height: 20px;
}

/* --- インラインチャットパネル --- */
.chat-panel-overlay {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 380px;
    max-height: 500px;
    z-index: 9999;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.chat-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.chat-panel__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.chat-panel__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-panel__expand,
.chat-panel__close {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
}
.chat-panel__expand:hover,
.chat-panel__close:hover {
    color: #fff;
    text-decoration: none;
}
.chat-panel__expand svg {
    width: 16px;
    height: 16px;
}
.chat-panel__messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    min-height: 120px;
}
.chat-panel__input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #e5e5e5;
    background: #fafbfc;
}
.chat-panel__textarea {
    flex: 1;
    border: 1px solid #ccd3db;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.5;
    resize: none;
    max-height: 80px;
}
.chat-panel__textarea:focus {
    outline: none;
    border-color: var(--brand);
}
.chat-panel__send {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--brand);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.chat-panel__send svg {
    width: 16px;
    height: 16px;
}
.chat-panel__error {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

/* サイドバーメッセージバッジ */
.sidebar-msg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e53935;
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
    line-height: 1;
}

@keyframes msg-notif-bounce {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}

/* モーダル共通 */
.cl-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cl-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    animation: cl-modal-in 0.2s ease;
}
@keyframes cl-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.cl-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 0;
}
.cl-modal__title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin: 0;
}
.cl-modal__close {
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px;
    color: #999;
    line-height: 1;
}
.cl-modal__close:hover { color: #333; }
.cl-modal__close svg.lucide { width: 20px; height: 20px; }
.cl-modal__body { padding: 16px 20px; }
.cl-modal__desc {
    font-size: 14px;
    color: #555;
    margin: 0 0 16px;
    line-height: 1.6;
}
.cl-modal__field { margin-bottom: 4px; }
.cl-modal__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}
.cl-modal__textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s;
}
.cl-modal__textarea:focus {
    outline: none;
    border-color: var(--brand, #4361ee);
    box-shadow: 0 0 0 3px rgba(67,97,238,0.1);
}
.cl-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 20px 18px;
}
.cl-modal__footer .btn {
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
}

/* アドバイザー承認バー（会話ページ上部） */
.chat-adviser-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
}
.chat-adviser-bar__info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
}
.chat-adviser-bar__info svg.lucide { width: 18px; height: 18px; color: #666; }
.chat-adviser-bar__actions { display: flex; gap: 8px; flex-shrink: 0; }
.chat-adviser-bar__actions .btn { display: inline-flex; align-items: center; gap: 4px; }
.chat-adviser-bar__actions .btn svg.lucide { width: 14px; height: 14px; }
@media (max-width: 600px) {
    .chat-adviser-bar { flex-direction: column; align-items: stretch; }
    .chat-adviser-bar__actions { justify-content: flex-end; }
}

/* メッセージボタン（adviser一覧用） */
.btn-chat {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 6px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-chat svg {
    width: 14px;
    height: 14px;
}

/* =========================================
   オンボーディングガイド
   ========================================= */
.onboarding-guide {
    background: #fff;
    border-radius: 8px;
    padding: 28px 32px 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border-left: 4px solid #1bbae1;
}
.onboarding-guide h3 {
    margin: 0 0 6px;
    font-size: 1.15em;
    font-weight: 600;
    color: #333;
}
.onboarding-guide .onboarding-sub {
    color: #888;
    font-size: .9em;
    margin-bottom: 22px;
}
.onboarding-steps {
    display: flex;
    gap: 0;
    align-items: stretch;
}
.onboarding-step {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 16px 18px;
    border-radius: 8px;
    background: #f8f9fa;
    position: relative;
    transition: background .2s, box-shadow .2s;
    text-decoration: none !important;
    color: inherit !important;
    cursor: default;
}
.onboarding-step.is-active {
    background: #e8f7fc;
    box-shadow: 0 0 0 2px #1bbae1;
    cursor: pointer;
}
.onboarding-step.is-active:hover {
    background: #d6f0f8;
}
.onboarding-step.is-done {
    background: #f0faf0;
}
.onboarding-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95em;
    flex-shrink: 0;
    margin-right: 14px;
    background: #dde1e6;
    color: #888;
}
.onboarding-step.is-active .onboarding-step-num {
    background: #1bbae1;
    color: #fff;
}
.onboarding-step.is-done .onboarding-step-num {
    background: #27ae60;
    color: #fff;
}
.onboarding-step-body {
    flex: 1;
    min-width: 0;
}
.onboarding-step-title {
    font-weight: 600;
    font-size: .95em;
    color: #333;
    margin-bottom: 2px;
}
.onboarding-step.is-upcoming .onboarding-step-title {
    color: #aaa;
}
.onboarding-step-desc {
    font-size: .82em;
    color: #888;
    line-height: 1.4;
}
.onboarding-arrow {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #ccc;
    font-size: 1.2em;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .onboarding-steps {
        flex-direction: column;
        gap: 8px;
    }
    .onboarding-arrow {
        display: none;
    }
    .onboarding-guide {
        padding: 20px 16px 16px;
    }
}

/* --- メッセージ送信不可画面 --- */
.chat-denied {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e5e5;
    text-align: center;
    padding: 48px 32px 40px;
    max-width: 560px;
    margin: 0 auto;
}
.chat-denied__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: #fef3f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-denied__icon svg {
    width: 32px;
    height: 32px;
    color: #d32f2f;
}
.chat-denied__title {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 12px;
}
.chat-denied__reason {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin: 0 0 24px;
}
.chat-denied__help {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
    text-align: left;
}
.chat-denied__help p {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin: 0 0 8px;
}
.chat-denied__help ul {
    margin: 0;
    padding-left: 20px;
}
.chat-denied__help li {
    font-size: 13px;
    line-height: 1.8;
    color: #666;
}
.chat-denied__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.chat-denied__actions .btn {
    padding: 8px 20px;
    font-size: 14px;
    min-height: 38px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chat-denied__actions .btn svg {
    width: 16px;
    height: 16px;
}

/* =========================================
   プラン通知バー（ヘッダー）
   ========================================= */
.plan-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    line-height: 1.6;
}
.plan-notice-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.plan-notice-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.plan-notice-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-size: .8em;
    padding: 2px 10px;
    border-radius: 4px;
    white-space: nowrap;
    color: #fff;
}
.plan-notice-badge svg {
    width: 14px;
    height: 14px;
}
.plan-notice-badge--trial    { background: #1bbae1; }
.plan-notice-badge--free     { background: #95a5a6; }
.plan-notice-badge--expired  { background: #e74c3c; }
.plan-notice-badge--campaign { background: #e67e22; }
.plan-notice-badge--benefit  { background: #27ae60; }
.plan-notice-days {
    font-size: .9em;
    color: #555;
    padding: 1px 8px;
    background: #eef7fa;
    border-radius: 3px;
}
.plan-notice-urgent {
    font-weight: 700;
    color: #e74c3c;
    font-size: .9em;
    padding: 1px 8px;
    background: #fdecea;
    border-radius: 3px;
}
.plan-notice-current {
    font-size: 1.3em;
    font-weight: 700;
    color: #1bbae1;
    letter-spacing: .02em;
}
.plan-notice-sub {
    display: block;
    width: 100%;
    font-size: .82em;
    color: #999;
    margin-top: -2px;
}
.plan-notice-switch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: #f0f8ff;
    border: 1px solid #d0e8f5;
    border-radius: 6px;
    padding: 8px 12px;
}
.plan-notice-switch-label {
    font-size: .82em;
    font-weight: 600;
    color: #1bbae1;
    white-space: nowrap;
}
.plan-notice-switch-label svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}
.plan-notice-form {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.plan-notice-form select {
    padding: 4px 8px;
    border: 1px solid #ccd3db;
    border-radius: 4px;
    font-size: 13px;
}
.plan-notice-form .btn svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}
@media (max-width: 767px) {
    .plan-notice {
        flex-direction: column;
        align-items: flex-start;
    }
    .plan-notice-right {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* === Split View パネル内: col-md-*をフル幅に（パネル幅が狭いため） === */
.split-view-panel .col-md-1,
.split-view-panel .col-md-2,
.split-view-panel .col-md-3,
.split-view-panel .col-md-4,
.split-view-panel .col-md-5,
.split-view-panel .col-md-6,
.split-view-panel .col-md-7,
.split-view-panel .col-md-8,
.split-view-panel .col-md-9,
.split-view-panel .col-md-10,
.split-view-panel .col-md-11 {
    width: 100%;
    float: none;
}
.split-view-panel .col-md-offset-1,
.split-view-panel .col-md-offset-2,
.split-view-panel .col-md-offset-3,
.split-view-panel .col-md-offset-4,
.split-view-panel .col-md-offset-6 {
    margin-left: 0;
}
/* float解除後の高さ追従 */
.split-view-panel .row {
    overflow: hidden;
}
.split-view-panel .row::after {
    content: "";
    display: table;
    clear: both;
}

/* Split View パネル内の比較UI調整 */
.split-view-panel .cmp-cards {
    grid-template-columns: 1fr;
}
.split-view-panel .cmp-card-values {
    flex-direction: column;
    gap: 8px;
}
.split-view-panel .cmp-charts {
    flex-direction: column;
}
.split-view-panel .cmp-chart-area {
    height: 220px;
}
.split-view-panel .cmp-th-label,
.split-view-panel .cmp-td-label {
    min-width: 80px;
    width: 80px;
}
.split-view-panel .cmp-table {
    font-size: 11px;
}
.split-view-panel .cmp-td-val {
    padding: 4px 6px;
}

/* === タブレット・スマホ: 750px以下 === */
@media (max-width: 750px) {
    .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
    .col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11 {
        width: 100%;
        float: none;
    }
    .col-md-offset-1,.col-md-offset-2,.col-md-offset-3,
    .col-md-offset-4,.col-md-offset-6 {
        margin-left: 0;
    }
    .row {
        overflow: hidden;
    }
    .row::after {
        content: "";
        display: table;
        clear: both;
    }

    .split-view-panels {
        flex-direction: column;
    }
    .split-view-panel {
        max-height: none;
        flex: none !important;
        width: 100%;
    }
    .split-view-divider {
        width: 100%;
        height: 4px;
        cursor: row-resize;
    }
    .split-view-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .split-view-selector {
        flex: 1 1 100%;
    }
    .cmp-cards {
        grid-template-columns: 1fr;
    }
    .cmp-charts {
        flex-direction: column;
    }
}

/* =============================================
   Webix table preview (fade + expand)
   ============================================= */
.webix-toolbar { text-align: right; margin-bottom: 4px; }
.webix-toolbar .btn { font-size: 12px; padding: 4px 10px; border-radius: 6px; }
.content-preview { position: relative; margin-bottom: 16px; }
.content-preview__content {
    max-height: 240px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.content-preview.is-expanded .content-preview__content { max-height: none; }
.content-preview__fade {
    position: absolute;
    bottom: 32px; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
}
.content-preview.is-expanded .content-preview__fade { display: none; }
.content-preview__toggle {
    display: block; width: 100%;
    text-align: center;
    background: #f8f9fa; border: 1px solid #e0e0e0;
    padding: 6px; cursor: pointer; font-size: 12px;
    border-radius: 0 0 4px 4px;
}
.content-preview__toggle:hover { background: #eee; }

/* =============================================
   Sortable drag-and-drop UI
   ============================================= */

/* ソートハンドルアイコン */
.sort-handle {
    cursor: grab;
    color: #a0aec0;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
    vertical-align: middle;
    margin-right: 4px;
}
.sort-handle:hover {
    opacity: 1;
    color: #4a5568;
}
.sort-handle:active {
    cursor: grabbing;
}

/* ドラッグ中の要素（cloneベースのhelper） */
.ui-sortable-helper {
    opacity: 0.85;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transform: rotate(1deg);
    z-index: 1000;
    cursor: grabbing !important;
}
.sort-dragging,
.sort-dragging td {
    background-color: #fff !important;
    color: #333 !important;
}
.sort-dragging span,
.sort-dragging a {
    color: #333 !important;
}
/* 出金順リストのテキスト色 — テーマ色の継承を防止 */
#withdrawing_priority .sortable td,
#withdrawing_priority .sortable span {
    color: #333;
}
.ui-sortable-helper .sort-handle {
    opacity: 1;
    color: #4a5568 !important;
}

/* ドロップ先プレースホルダー */
.ui-sortable-placeholder {
    visibility: visible !important;
    background: #ebf4ff;
    border: 2px dashed #5b9bd5;
    border-radius: 8px;
    margin-bottom: 1.5em;
    min-height: 50px;
}

/* ==============================================
   Accordion & Section Headers
   ============================================== */

/* アコーディオン共通 */
.cl-accordion { margin-bottom: 12px; overflow: visible; }
.cl-accordion-header {
    cursor: pointer;
    padding: 12px 16px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.cl-accordion-header:hover { background: #f8f8f8; }
.cl-accordion-icon { width: 16px; height: 16px; transition: transform 0.2s; flex-shrink: 0; }
.cl-accordion.is-open .cl-accordion-icon { transform: rotate(90deg); }
.cl-accordion-body { padding: 12px 16px 16px; overflow: visible; }

/* ウィザード内セクションヘッダー（太めのスタイル） */
.wiz-section-header {
    padding: 14px 18px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: var(--brand-light, #eaf2f8);
    border-bottom: 1px solid #c8e5df;
    border-radius: var(--radius, 6px);
    gap: 10px !important;
}
.cl-accordion.is-open .wiz-section-header {
    border-radius: var(--radius, 6px) var(--radius, 6px) 0 0;
}
.wiz-section-header:hover {
    background: #e3efe6 !important;
}

/* 設定オプションのセクション（やや控えめ） */
.cl-form-card .cl-accordion-header {
    padding: 12px 16px;
}

/* カテゴリ折りたたみ（教育費マスタ等） */
.cat-section { margin-bottom: 12px; border: 1px solid #e8e8e8; border-radius: 4px; }
.cat-header { background: #f5f5f5; padding: 8px 12px; font-weight: bold; font-size: 13px; border-bottom: 1px solid #e8e8e8; cursor: pointer; }
.cat-body { padding: 8px; }

/* === CF Graph + Side Panel Layout === */
.cf-layout { display: flex; gap: 0; container-type: inline-size; }
.cf-layout__graph { flex: 6 1 0; min-width: 200px; overflow: hidden; }
.cf-layout__side { flex: 4 1 0; min-width: 200px; overflow: hidden; }
@container (max-width: 700px) {
    .cf-layout { flex-direction: column; }
    .cf-layout__graph, .cf-layout__side { flex: none; width: 100%; }
    .cf-layout__divider { display: none; }
}
.cf-layout__divider {
    width: 6px; cursor: col-resize; background: #e8e8e8; flex-shrink: 0;
    position: relative; z-index: 10; transition: background 0.15s;
}
.cf-layout__divider:hover, .cf-layout__divider.active { background: #aaa; }
.cf-layout__divider::after {
    content: ''; position: absolute; top: 50%; left: 1px;
    width: 4px; height: 32px; transform: translateY(-50%);
    border-left: 1px solid #999; border-right: 1px solid #999;
}
.cf-layout { display: flex; gap: 12px; }
.cf-layout__graph { flex: 7 1 0; min-width: 0; }
.cf-layout__side { flex: 4 1 0; min-width: 300px; }
/* 家族情報パネル（常時表示） */
.cf-family-panel { border-bottom: 1px solid #e0e0e0; padding: 4px 12px; background: #fafbfc; }
.cf-family-panel__selector { padding: 4px 8px; border-radius: 4px; transition: background .2s, box-shadow .2s; display: flex; align-items: center; gap: 6px; }
.cf-family-panel__selector select { max-width: 320px; flex: 1 1 auto; }
.cf-family-panel__selector.is-pinned { background: #fff3e0; box-shadow: inset 3px 0 0 #e67e22; }
.cf-family-panel__toggle {
    flex-shrink: 0; background: none; border: 1px solid #ccc; border-radius: 4px;
    cursor: pointer; padding: 3px 6px; color: #888; line-height: 1;
    display: inline-flex; align-items: center; transition: background .15s, color .15s;
}
.cf-family-panel__toggle:hover { background: #eee; color: #333; }
.cf-family-panel.is-open .cf-family-panel__toggle { background: #e8f0ea; color: #5a8a6a; border-color: #b5ccbb; }
.cf-family-panel__body {
    font-size: 12px; overflow: hidden;
    max-height: 0; opacity: 0; padding: 0;
    transition: max-height .25s ease, opacity .2s ease, padding .2s ease;
}
.cf-family-panel.is-open .cf-family-panel__body {
    max-height: 200px; opacity: 1; padding: 6px 0 2px;
}
.cf-family-panel__row { margin-bottom: 3px; display: flex; gap: 6px; align-items: baseline; }
.cf-family-panel__label { font-weight: 600; color: #666; min-width: 48px; flex-shrink: 0; font-size: 11px; }
.cf-family-panel__member { display: block; line-height: 1.6; white-space: nowrap; }
.cf-family-panel__member--head { font-weight: 600; }
.cf-family-panel__member--separate { color: #27ae60; }
.cf-family-panel__member small { color: #888; font-size: 10px; }
.cf-family-panel__event { color: var(--brand-dark); font-size: 11px; margin-left: 4px; }
/* CF チャート上部統一ツールバー
   旧: rangeSelector(SVG) + .cf-chart-expand-btn(absolute) + Highcharts contextButton(SVG) の 3 系統
   新: HTML 1 行ツールバーに統合。左=表示期間 / 右=表示範囲+アクション */
.cf-chart-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 6px 10px; margin-bottom: 4px;
    background: #f7f9fa; border: 1px solid #e5eaef; border-radius: 4px;
    font-size: 12px;
}
.cf-chart-toolbar__group { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.cf-chart-toolbar__group--actions { gap: 8px; }
.cf-chart-toolbar__label {
    color: #666; font-weight: 600; font-size: 11px;
    white-space: nowrap; letter-spacing: 0.02em;
}
/* 背景色 !important は fp-univ.css:2144 の `.analysis-output input` (0,1,1) が
   lightgoldenrodyellow を !important で指定しているため、それを上書きする
   ための不可避な対抗。`input.cf-chart-toolbar__date` で (0,2,1) に specificity を
   上げてさらに !important で勝たせる。ツールバーは編集フィールドではなく
   ズーム操作 UI なので、黄色ハイライトは適用しない。
   また `.analysis-output input { font-weight: bold }` (2143 行) も打ち消す。 */
input.cf-chart-toolbar__date {
    /* yyyy-mm (7 文字) の表示に必要な幅。入力は _autoFormatYM() で数字のみから整形される */
    width: 78px; height: 24px; padding: 2px 6px;
    border: 1px solid #ccc; border-radius: 3px;
    background: #fff !important;
    font-size: 11px; color: #333; line-height: 1;
    font-family: inherit;
    font-weight: normal;
    text-align: center;
}
input.cf-chart-toolbar__date:focus { outline: none; border-color: #5b9bd5; box-shadow: 0 0 0 2px rgba(91,155,213,0.15); }
input.cf-chart-toolbar__date:disabled { background: #f0f0f0 !important; color: #999; cursor: not-allowed; }
/* 不正値フィードバック: _onDateChange() が 600ms 付け外し */
input.cf-chart-toolbar__date--error {
    border-color: #e74c3c;
    background: #fff5f5 !important;
    transition: border-color 0.12s, background 0.12s;
}
.cf-chart-toolbar__sep { color: #999; font-size: 11px; }
.cf-chart-toolbar__buttons { display: inline-flex; }
.cf-chart-toolbar__buttons button {
    background: #fff; border: 1px solid #ccc; border-right-width: 0;
    color: #555; font-size: 11px; line-height: 1;
    padding: 4px 8px; height: 24px; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.cf-chart-toolbar__buttons button:first-child { border-radius: 3px 0 0 3px; }
.cf-chart-toolbar__buttons button:last-child { border-radius: 0 3px 3px 0; border-right-width: 1px; }
.cf-chart-toolbar__buttons button:hover:not(:disabled) { background: #e6e9ff; color: #333; }
.cf-chart-toolbar__buttons button.is-active {
    background: #5b9bd5; color: #fff; font-weight: 600; border-color: #4a86bd;
}
.cf-chart-toolbar__buttons button:disabled { color: #aaa; cursor: not-allowed; background: #f5f5f5; }

/* Datetime_highcharts (分析グラフ) 上部 月/年 切替トグル
   Datetime_highcharts::render() が出力。Datetime_chart_grain_controller (analysis_controllers.js) が制御。
   配色は CF (.cf-chart-toolbar) と同じビジュアル言語。 */
.dt-chart-toolbar {
    display: flex; justify-content: flex-end;
    margin-bottom: 4px;
}
.dt-chart-toolbar__buttons { display: inline-flex; }
.dt-chart-toolbar__buttons button {
    background: #fff; border: 1px solid #ccc; border-right-width: 0;
    color: #555; font-size: 11px; line-height: 1;
    padding: 4px 10px; height: 22px; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.dt-chart-toolbar__buttons button:first-child { border-radius: 3px 0 0 3px; }
.dt-chart-toolbar__buttons button:last-child  { border-radius: 0 3px 3px 0; border-right-width: 1px; }
.dt-chart-toolbar__buttons button:hover:not(:disabled) { background: #e6e9ff; color: #333; }
.dt-chart-toolbar__buttons button.is-active {
    background: #5b9bd5; color: #fff; font-weight: 600; border-color: #4a86bd;
}
.cf-chart-toolbar__divider-vert {
    width: 1px; height: 18px; background: #d0d6dc; margin: 0 2px;
}
.cf-chart-toolbar__icon {
    background: #fff; border: 1px solid #ccc; border-radius: 3px;
    width: 26px; height: 24px; padding: 0; cursor: pointer; color: #666;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.cf-chart-toolbar__icon:hover { background: #f0f0f0; color: #333; }
.cf-chart-toolbar__icon svg { display: block; }
/* メニュードロップダウン (body 直下に append される) */
.cf-chart-toolbar__menu {
    list-style: none; margin: 0; padding: 4px 0;
    background: #fff; border: 1px solid #ccc; border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 140px; font-size: 12px;
}
.cf-chart-toolbar__menu li {
    padding: 6px 14px; cursor: pointer; color: #333; line-height: 1.4;
}
.cf-chart-toolbar__menu li:hover { background: #f0f4f8; }
/* 旧 .cf-chart-expand-btn の絶対配置スタイルは廃止。.cf-chart-toolbar__icon に統合。
   後方互換のため class セレクタ自体は残す（DOM で併用しているため） */
.cf-chart-expand-btn {}
.cf-chart-expand-btn:hover {}
.cf-side-tabs { display: flex; gap: 2px; border-bottom: 2px solid #e0e0e0; margin-bottom: 8px; }
.cf-side-tab {
    padding: 6px 10px; border: 1px solid #ddd; border-bottom: none;
    background: #f5f5f5; cursor: pointer; font-size: 12px; border-radius: 4px 4px 0 0;
    color: #666; transition: background 0.15s, color 0.15s;
}
.cf-side-tab:hover { background: #eee; color: #333; }
.cf-side-tab.active { background: #fff; color: #333; font-weight: 600; border-bottom: 2px solid #fff; margin-bottom: -2px; }
.cf-side-panels { overflow: hidden; }
.cf-side-panel { display: none; }
.cf-side-panel.active { display: block; }
.cf-panel__header {
    font-size: 12px; color: #444; padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-xs);
    display: flex; align-items: center; gap: var(--space-sm);
    background: #f5f7fa; border-radius: 4px; border-left: 3px solid #5b9bd5;
}
.cf-panel__header .cursor_point { font-weight: 600; color: #333; }
.cf-panel__header .mode_switcher {
    font-size: 12px; padding: 2px 6px;
    border: 1px solid #ccc; border-radius: 3px; background: #fff;
}
.cf-side-panel .financial_chart { width: 100% !important; float: none !important; display: flex; justify-content: center; }
.cf-side-panel .highcharts-container { width: 100% !important; }

/* CF Layout Toggle Button (in section title) */
.cf-layout-toggle {
    margin-left: auto;
    padding: 4px 8px; border: 1px solid #ddd;
    background: #f5f5f5; cursor: pointer; border-radius: 4px;
    color: #666; transition: background 0.15s, color 0.15s;
    display: flex; align-items: center;
}
.cf-layout-toggle:hover { background: #eee; color: #333; }
.cf-layout-toggle svg { width: 14px; height: 14px; }
.cf-toggle-collapse { display: none; }

/* CF Layout Expanded Mode */
.cf-layout--expanded { flex-direction: column; }
.cf-layout--expanded .cf-layout__divider { display: none; }
.cf-layout--expanded .cf-layout__graph { flex: none; width: 100%; }
.cf-layout--expanded .cf-layout__side {
    flex: none; width: 100%; min-width: unset; margin-top: 0;
    position: sticky; bottom: 0; z-index: 100;
    background: #fff;
    border-top: 2px solid #e0e0e0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    max-height: 50vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cf-layout--expanded .cf-family-panel {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    border-bottom: 1px solid #e0e0e0;
    border-right: none;
    padding: 4px 10px;
    overflow-y: visible;
    font-size: 11px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
/* 全幅モード: セレクタを左、家族情報を右に横並び */
.cf-layout--expanded .cf-family-panel__selector { flex-shrink: 0; }
.cf-layout--expanded .cf-family-panel__body {
    max-height: none; opacity: 1; padding: 0;
    transition: none;
    flex: 1 1 auto;
    display: flex;
    gap: 16px;
    font-size: 11px;
    overflow: hidden;
}
.cf-layout--expanded .cf-family-panel__row { margin-bottom: 0; white-space: nowrap; }
.cf-layout--expanded .cf-family-panel__member { display: inline; margin-right: 8px; }
/* 全幅モード: トグルボタンのアイコンを切替（minimize） */
.cf-layout--expanded .cf-family-panel__toggle { display: none; }
.cf-layout--expanded .cf-side-tabs { display: none; }
.cf-layout--expanded .cf-side-panels {
    flex: 1 1 auto; min-width: 0; min-height: 0;
    display: flex; gap: var(--space-md);
    padding: 4px 8px;
    overflow: hidden;
}
.cf-layout--expanded .cf-side-panel { display: block !important; flex: 1 1 0; min-width: 0; overflow-y: auto; }
.cf-layout--expanded .cf-side-panel[data-cf-panel="transition"] { display: none !important; }

/* CF Layout Expanded - Responsive */
@media (max-width: 1024px) {
    .cf-layout--expanded .cf-side-panels { flex-direction: column; gap: var(--space-sm); }
    .cf-layout--expanded .cf-side-panel { flex: none; width: 100%; }
}
@media (max-width: 768px) {
    .cf-layout--expanded .cf-layout__side { max-height: 50vh; }
    .cf-layout--expanded .cf-family-panel { flex-wrap: wrap; }
    .cf-layout--expanded .cf-side-panels { gap: var(--space-xs); }
}

/* CF graph range selector & navigator */
.highcharts-range-input > .highcharts-label-box { fill: #fffde7; stroke: #ccc; rx: 3; ry: 3; }
.highcharts-navigator-mask-inside { fill: rgba(91,155,213,0.08); }
.highcharts-navigator-outline { stroke: #e6e6e6; stroke-width: 1; }

/* Asset Allocation 2-column layout */
.aa-layout { display: flex; gap: 4px; align-items: flex-start; }
.aa-layout__col { flex: 1 1 50%; min-width: 0; overflow: hidden; }
.aa-layout .financial_chart { aspect-ratio: 1 / 1; height: auto !important; }
.aa-layout .highcharts-container { max-width: 100% !important; height: 100% !important; }
.aa-switcher { display: flex; gap: 10px; padding: 4px 8px; font-size: 12px; justify-content: center; min-height: 28px; }
.aa-switcher label { cursor: pointer; white-space: nowrap; }
.aa-col-title { text-align: center; font-size: 12px; font-weight: 600; padding: 4px 0; color: #555; min-height: 28px; display: flex; align-items: center; justify-content: center; }

/* 金融資産内訳: 円グラフ直下の銘柄別テーブル */
.financial_portfolio_table { margin-top: 8px; overflow-x: auto; }
.financial_portfolio_table table.portfolio-detail-table {
    width: 100%; font-size: 12px; border-collapse: collapse;
}
.portfolio-detail-table th, .portfolio-detail-table td {
    padding: 4px 6px; border-bottom: 1px solid #eee; line-height: 1.3; vertical-align: middle;
}
.portfolio-detail-table__name { text-align: left; word-break: break-all; }
.portfolio-detail-table__value, .portfolio-detail-table__pct { text-align: right; white-space: nowrap; }
.portfolio-detail-table__swatch {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 2px; margin-right: 6px; vertical-align: middle;
}
.portfolio-detail-table__total td {
    font-weight: 600; border-top: 2px solid #ccc; border-bottom: none;
}

/* --- Pension Analysis --- */
.pension_analysis_area .diagonal { height: 100%; width: 100%; border-top: solid gray 1px; }
.pension_analysis_area .rightDown { transform: matrix(1, 0.75, 0, 1, 0, 15); }
.pension_analysis_area tfoot .emph { font-size: var(--fs-emphasis-xl); font-weight: bold; }
.pension_analysis_area .emph { font-size: var(--fs-emphasis-lg); font-weight: bold; }
.pension_analysis_area .table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    border-radius: 6px; overflow: hidden;
    border: 1px solid #e0e0e0;
}
.pension_analysis_area .table th {
    font-size: 13px; font-weight: 600; padding: 7px 8px;
    vertical-align: middle !important; text-align: center;
}
.pension_analysis_area .table td {
    font-size: 13px; padding: 6px 8px;
    vertical-align: middle !important; text-align: center;
    border-bottom: 1px solid #eee;
}
.pension_analysis_area .table td + td,
.pension_analysis_area .table th + th { border-left: none; }
.pension_analysis_area .table tr:hover td { background-color: #f0f7ff; }
.pension_analysis_area .unselected { opacity: 0.5; }
.pension_analysis_area .insured_months { min-width: 60px; }
.pension_analysis_area .average_hoshu_tr td { min-width: 100px; }
.pension_analysis_area .minus { color: red; }
.pension_analysis_area .changed { font-weight: bold; background-color: lightgoldenrodyellow !important; }
.pension_analysis_area td.disabled { background-color: #eee; }
.pension_analysis_area .table .table { border: none; box-shadow: none; border-radius: 0; }
/* Pension section layout */
.pension-section { margin-bottom: var(--space-md); }
.pension-section + .pension-section {
    border-top: 2px solid var(--gray-300);
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
}
/* Loan Analysis */
.loan-detail-row { display: flex; gap: var(--space-md); }
.loan-detail-row__main { flex: 1 1 50%; min-width: 0; }
.loan-detail-row__side { flex: 1 1 50%; min-width: 0; }
.loan-graph-row { display: flex; gap: var(--space-sm); }
.loan-graph-row__balance { flex: 2 1 0; min-width: 0; }
.loan-graph-row__ratio { flex: 1 1 0; min-width: 0; }
.loan-subsub__title {
    font-size: 13px; font-weight: 600; color: var(--gray-600);
    padding: 4px 0 4px 8px; margin: var(--space-sm) 0 var(--space-xs);
    border-left: 2px solid var(--gray-300);
}
.loan-repayment-section { margin-top: var(--space-md); }
.loan-result_detail { font-size: 13px; }
.loan-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.loan-title-row .loan-section__title { margin-bottom: 0; padding: 0; }
.loan-pdf-group {
    display: inline-flex; align-items: center; gap: 8px;
    background: #f5f7fa; border: 1px solid var(--gray-200);
    border-radius: 6px; padding: 4px 10px;
}
.loan-pdf-group .btn { font-size: 12px; padding: 4px 10px; border-radius: 4px; color: #fff; }
.loan-pdf-monthly-opt { font-size: 11px; color: var(--gray-600); cursor: pointer; margin: 0; }
.loan-pdf-monthly-disabled { color: var(--gray-400); font-size: 11px; }
.loan-table-toolbar { text-align: right; margin-bottom: 4px; }
.loan_result_detail .repayment_table { font-size: 13px; }
.loan-th-index { min-width: 40px; }
.loan-th-date { min-width: 90px; }
.loan-th-interest { min-width: 45px; }
.loan-th-balance { min-width: 70px; }
/* 合算コンテキスト: タブ内では不要要素非表示 */
.loan-tab-panel .loan_name,
.loan-tab-panel .loan-toolbar { display: none; }
.loan-summary-section { font-size: 13px; margin-top: var(--space-lg); }
.loan-section__note { font-size: 12px; color: var(--gray-500); font-weight: 400; }
.loan-summary-row { display: flex; gap: var(--space-md); margin-bottom: var(--space-md); }
.loan-summary-row__left { flex: 4 1 0; min-width: 0; }
.loan-summary-row__right { flex: 8 1 0; min-width: 0; }
.loan-subsection__title {
    font-size: 15px; font-weight: 600; color: var(--gray-700);
    padding: 6px 0 6px 10px; margin: var(--space-md) 0 var(--space-sm);
    border-left: 3px solid #5b9bd5;
}
.pension-section__title, .loan-section__title, .re-section__title, .need-capital-section__title {
    font-size: 17px; font-weight: 700; color: var(--gray-800);
    padding: 8px 0; margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--gray-200);
}
.loan-section__title + .loan-section__title,
.pension-section + .pension-section,
.loan-section + .loan-section,
.re-section + .re-section { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--gray-200); }
.pension-subsection__title, .re-subsection__title {
    font-size: 15px; font-weight: 600; color: var(--gray-700);
    margin: 16px 0 8px;
    padding-left: 8px;
    border-left: 3px solid #5b9bd5;
}

/* --- 必要保障額分析 --- */
.need-capital-section { margin-top: var(--space-xl); }
.need-capital-section:first-child { margin-top: 0; }
.need-capital-section + .need-capital-section {
    padding-top: var(--space-xl);
    border-top: 1px solid var(--gray-200);
}
.need-capital-condition-table { width: 100%; border-collapse: collapse; }
.need-capital-condition-table th {
    width: 180px; padding: 8px 12px; background: var(--gray-50);
    font-weight: 600; font-size: 13px; color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200); vertical-align: top;
}
.need-capital-condition-table td { padding: 8px 12px; border-bottom: 1px solid var(--gray-200); }
.need-capital-insurance-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.need-capital-insurance-table th {
    padding: 6px 8px; background: var(--gray-50); font-weight: 600;
    border-bottom: 1px solid var(--gray-200); white-space: nowrap;
}
.need-capital-insurance-table td { padding: 6px 8px; border-bottom: 1px solid var(--gray-100); white-space: nowrap; }
.need-capital-graph-layout { display: flex; gap: var(--space-md); }
.need-capital-graph-layout__chart { flex: 2; min-width: 0; }
.need-capital-graph-layout__events { flex: 1; min-width: 200px; }
.need-capital-selector {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 14px; font-weight: 600; color: var(--danger, #e74c3c);
    margin-bottom: var(--space-sm);
}
.need-capital-selector select { width: 80px; }
.need-capital-subsection { margin-top: var(--space-xl); }
.need-capital-subsection__title {
    font-size: 15px; font-weight: 600; color: var(--gray-800);
    border-left: 3px solid #5b9bd5; padding-left: 8px;
    margin-bottom: var(--space-sm);
}
.need-capital-month-display {
    -webkit-appearance: none; appearance: none;
    opacity: 1; color: inherit; background: transparent; border: none;
}
.nc-coverage-kpi { margin-bottom: var(--space-md); }
.nc-coverage-kpi__inputs {
    display: flex; gap: var(--space-lg); align-items: center;
    margin-bottom: var(--space-sm); font-size: 13px;
}
.nc-coverage-kpi__inputs label { display: flex; align-items: center; gap: 4px; }
.nc-margin-input {
    width: 80px; padding: 4px 8px; border: 1px solid var(--gray-300);
    border-radius: 4px; font-size: 13px; text-align: right;
}
.nc-coverage-kpi__cards { margin-top: var(--space-sm); }
.re-subsection__title small { font-size: 12px; color: var(--gray-500); font-weight: 400; }
.re-indicator-row { display: flex; gap: 16px; }
.re-indicator-row__table { flex: 0 0 35%; }
.re-indicator-row__graphs { flex: 1 1 0; min-width: 0; }
.value_right_table td { text-align: right; }
.re-section { margin-top: 24px; }

/* Account Analysis (Deposit / MRF / Securities) */
.account-analysis { font-size: 13px; }
.account-section__title {
    font-size: 17px; font-weight: 700; color: var(--gray-800);
    padding-bottom: 8px; margin: 12px 0 20px;
    border-bottom: 2px solid var(--gray-200);
}
.account-section__title small { font-size: 12px; font-weight: 400; }
.account-subsection__title {
    font-size: 15px; font-weight: 600; color: var(--gray-700);
    margin: 12px 0 8px; padding-left: 8px;
    border-left: 3px solid #5b9bd5;
}
.account-period { font-size: 12px; color: var(--gray-500); font-weight: 400; margin-left: 8px; }
.account-section + .account-section { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--gray-200); }
.account-graph-block { margin-top: 12px; }
.account-graph-label { font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 2px; }
.account-graph-desc { display: block; font-size: 11px; color: var(--gray-500); margin-bottom: 6px; }
.account-balance-row { display: flex; gap: 12px; }
.account-balance-row__graph { flex: 1 1 50%; min-width: 0; }
.account-balance-row__pies { flex: 1 1 50%; min-width: 0; display: flex; gap: 8px; }
.account-balance-row__pies > div { flex: 1 1 0; min-width: 0; }
.account-dual-graph-row { display: flex; gap: 16px; }
.account-dual-graph-row__left,
.account-dual-graph-row__right { flex: 1 1 50%; min-width: 0; }
.account-summary-table { font-size: 13px; border-collapse: separate; border-spacing: 0; width: 100%; }
.account-summary-table th,
.account-summary-table td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--gray-200); vertical-align: middle; }
.account-summary-table th { font-size: 12px; font-weight: 600; color: var(--gray-600); white-space: nowrap; }
.account-summary-table .account-summary-table__name { text-align: left; }
/* サマリーテーブル: KPIカード */
.account-kpi-cards { display: flex; gap: 16px; margin-bottom: 8px; }
.account-kpi-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; padding: 12px 20px; min-width: 140px; }
.account-kpi-card__label { font-size: 13px; font-weight: 700; color: var(--gray-800); margin-bottom: 4px; }
.account-kpi-card__value { font-size: 18px; font-weight: 700; }
/* サマリーテーブル: 行スタイル */
.account-summary-table tbody tr[data-key] { cursor: pointer; transition: background 0.1s; }
.account-summary-table tbody tr[data-key]:hover { background: var(--gray-100); }
.account-summary-table tbody tr.is-active { background: #e8f0fa; box-shadow: inset 3px 0 0 #3498db; }
.account-summary-table tbody tr.is-active:hover { background: #dce8f4; }
.account-summary-table tr.is-total td { font-weight: 700; border-top: 2px solid var(--gray-400); }
/* サマリーテーブル: 個別銘柄行（初期非表示） */
.account-item-row { display: none; }
/* サマリーテーブル: 個別銘柄トグル行 */
.account-items-toggle { cursor: pointer; }
.account-items-toggle__cell { text-align: center !important; font-size: 12px; color: var(--gray-500); padding: 4px 8px !important; }
.account-items-toggle__cell::before { content: "\25B6 "; font-size: 8px; }
.account-items-toggle.is-expanded .account-items-toggle__cell::before { content: "\25BC "; }
.account-items-toggle:hover { background: var(--gray-100); }
/* サマリーテーブル: ⑥最終残高と損益計の間のボーダー */
.account-summary-table__border-right { border-right: 2px solid var(--gray-300) !important; }
/* サマリーテーブル: 横スクロールラッパー */
.account-summary-table-wrap { overflow-x: auto; }
/* サマリーテーブル: 列展開トグル（②③④ヘッダ） */
.account-col-toggle { cursor: pointer; position: relative; white-space: nowrap; }
.account-col-toggle::after { content: " \25B6"; font-size: 8px; color: var(--gray-400); vertical-align: middle; }
.account-col-toggle.is-expanded::after { content: " \25BC"; }
.account-col-toggle:hover { background: var(--gray-100); }
.account-col-toggle.is-expanded { text-align: center; border-bottom: none; }
/* サマリーテーブル: 合計セル（折りたたみ時表示、展開時非表示） */
.account-col-parent { }
/* サマリーテーブル: サブカラム（初期非表示） */
.account-sub-col { display: none; font-size: 11px; }
th.account-sub-col { color: var(--gray-500); font-weight: 500; background: #f8f9fa; }
td.account-sub-col { background: #fcfcfd; }
/* サマリーテーブル: 2段目ヘッダ行（初期非表示） */
.account-summary-head2 { display: none; }
/* サマリーテーブル: 損益計セル内展開 */
.account-pnl-toggle { cursor: pointer; }
.account-pnl-toggle::after { content: " \25B6"; font-size: 8px; color: var(--gray-400); vertical-align: middle; }
.account-pnl-toggle.is-expanded::after { content: " \25BC"; }
.account-pnl-toggle:hover { background: var(--gray-100); }
.account-pnl-detail { display: none; margin-top: 4px; border-top: 1px solid var(--gray-200); padding-top: 4px; }
.account-pnl-toggle.is-expanded .account-pnl-detail { display: block; }
.account-pnl-detail__item { display: flex; justify-content: space-between; padding: 1px 0; font-size: 11px; color: var(--gray-600); white-space: nowrap; }
.account-pnl-detail__label { margin-right: 8px; }
.account-hidden { display: none; }
.detail_elm.hide { display: none; }
.securities_selector_target .utilisation { display: none; }
/* 詳細パネル: サマリーの選択結果を囲むパネル */
.account-detail-panel { background: #fafbfc; border: 1px solid var(--gray-200); border-radius: 6px; padding: 16px 20px; margin-top: 16px; }
/* Account: プルダウンスタイル */
.account-analysis select,
.account-analysis .securities_selector select {
    font-size: 13px; padding: 4px 8px;
    border: 1px solid var(--gray-300); border-radius: 4px;
    background: #fff; color: var(--gray-700);
    margin-bottom: 8px;
}
.account-analysis .deposit_summary { padding: 0; }
.account-analysis .summary_table { font-size: 13px; }
.account-analysis .all_summary_table { margin-bottom: 12px; }
.account-analysis .webix_table_wrapper { margin-top: 12px; }
/* Account: サマリーテーブル */
.account-analysis .deposit_analysis_summary { font-size: 12px; }
.account-analysis .deposit_analysis_summary td.summary,
.account-analysis .deposit_analysis_summary th.summary {
    font-size: 14px; font-weight: 700; color: var(--gray-800);
}
.account-analysis .summary_table .uchiwake_title { padding-left: 16px; }
/* Account: テーブルヘッダー配置 */
.account-analysis th { text-align: center; }
.account-analysis th.fixed,
.account-analysis td.fixed { text-align: left; }
.pension-detail__label {
    font-size: 13px; font-weight: 600; color: var(--gray-700);
    margin: 10px 0 4px;
}
.pension-profile-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; margin-bottom: var(--space-sm);
}
.pension-alert {
    font-size: 0.8em; color: #92400e;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px;
    padding: 6px 10px; margin-bottom: var(--space-md);
}
/* Multi-person pension summary */
.pension-multi__graph { margin-bottom: var(--space-md); }
.pension-multi__table { margin-bottom: var(--space-lg); }
/* 合算セクションと個別詳細の区切り */
.pension-multi > .pension-subsection__title {
    border-top: 2px solid var(--gray-300);
    border-left: none;
    padding-top: var(--space-lg);
    padding-left: 0;
    margin-top: var(--space-lg);
    font-size: 16px;
}
.pension-member-section {
    border: 1px solid var(--gray-200); border-radius: 8px;
    padding: 12px 16px; margin-bottom: var(--space-md);
}
.pension-member-section__graph { margin-bottom: var(--space-sm); }
/* 埋め込み時（summary.php内）のテキストサイズ縮小 */
.pension-member-section .pension_analysis_area { font-size: 12px; }
.pension-member-section .pension-section__title {
    font-size: 15px; font-weight: 700;
    border-bottom: 2px solid var(--gray-300);
    padding-bottom: 6px; margin-bottom: 10px;
}
.pension-member-section .pension-subsection__title {
    font-size: 13px; font-weight: 600;
    margin-left: 8px;
}
.pension-member-section .pension-cond-cards { font-size: 11px; }
.pension-member-section .pension-cond-card__title { font-size: 12px; }
.pension-member-section__empty { color: var(--gray-500); padding: 8px 16px; }
.pension-summary-tbl__profile-row td { font-weight: 600; background: #f8f9fa; }
.pension-summary-tbl__category { padding-left: 12px !important; }
.pension-summary-tbl__detail { padding-left: 12px !important; }
@media screen {
    .pension-summary-tbl__amount-col,
    .pension-summary-tbl__period { width: auto !important; }
}
.pension-summary-row { display: flex; gap: 12px; margin-bottom: var(--space-md); }
.pension-summary-row > div { flex: 1 1 50%; min-width: 0; }
.pension-table-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--gray-200); border-radius: 4px;
    margin-bottom: var(--space-sm);
}
.pension-amount-right { text-align: right; }
/* 支給年金サマリーカード */
.pension-summary-card {
    background: #fff; border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 8px 12px; margin-bottom: var(--space-md);
}
.pension_analysis_area .pension-summary-card .table {
    margin-bottom: 0; border: none; box-shadow: none;
    border-radius: 0; border-collapse: collapse;
}
.pension_analysis_area .pension-summary-card .table td,
.pension_analysis_area .pension-summary-card .table th {
    border-left: none; border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--gray-200);
}
.pension_analysis_area .pension-summary-card .table thead th { border-bottom: 2px solid var(--gray-300); }
/* サマリーテーブル整形（.pension_analysis_area 前置で .pension_analysis_area .table th を上書き） */
.pension_analysis_area .pension-summary-table th,
.pension_analysis_area .pension-summary-table td {
    font-size: 13px; padding: 8px 10px;
    text-align: center; vertical-align: middle;
}
/* 金額セルは右寄せを維持 */
.pension_analysis_area .pension-summary-table td.pension-amount-right { text-align: right; }
.pension-summary-table tbody th { font-weight: 600; white-space: nowrap; }
.pension-arrow { color: var(--gray-400); font-size: 14px; width: 30px; }
.pension-summary-table tfoot th { font-size: 12px; font-weight: 600; }
.pension-summary-table tfoot td small { font-size: 11px; color: var(--gray-500); }
.pension-total-row { background: #f0f7ff; }
.pension-total-row th, .pension-total-row td { font-weight: 700; }
.pension-lifetime-row { background: #f8f9fb; }
.pension-lifetime-row td { font-weight: 700; }
/* 受給権変遷テーブル（老齢／遺族 共通） */
.pension_analysis_area .pension_sikyu_log,
.pension_analysis_area .izoku_pension_sikyu_log {
    border-collapse: collapse; border: none;
}
.pension_analysis_area .pension_sikyu_log th,
.pension_analysis_area .pension_sikyu_log td,
.pension_analysis_area .izoku_pension_sikyu_log th,
.pension_analysis_area .izoku_pension_sikyu_log td {
    border: none; border-bottom: 1px solid var(--gray-200);
    font-size: 11px; padding: 4px 6px;
}
/* per-family 詳細テーブルのヘッダ統一（B 案: #fafcfb / weight 500 / gray-700）
   wizard.css の `#wizard .themed-background th,td { background/border-color: brand* !important }`
   を id-specificity + !important で打ち消す。border-color も合わせて gray-200 に揃える。 */
#wizard .pension_analysis_area .themed-background,
#wizard .pension_analysis_area .themed-background th,
#wizard .pension_analysis_area .themed-background td {
    background: #fafcfb !important;
    color: var(--gray-700) !important;
    font-weight: 500 !important;
    border-color: var(--gray-200) !important;
}
/* themed-background を持たない算定条件カード内テーブルヘッダも統一トーンへ */
.pension_analysis_area .pension-cond-card__params .table th {
    background: #fafcfb; color: var(--gray-700); font-weight: 500;
}
/* 数値カラム右寄せ（pension_analysis_area .table td の center を上書き） */
.pension_analysis_area .pension_sikyu_log tbody td,
.pension_analysis_area .izoku_pension_sikyu_log tbody td { text-align: right; }
/* 加入月数履歴 / 死亡時加入月数: table-bordered を外し横罫線のみ + グループ列の縦区切り
   列構成: [date|age] | 1号(基礎/付加) | 一般厚生 | 公務員共済 | 標準報酬(月額/賞与額) | 3号 | 船員 | 合算 | 受給資格 */
.pension_analysis_area .pension_summary {
    border-collapse: collapse; border: none;
}
.pension_analysis_area .pension_summary th,
.pension_analysis_area .pension_summary td {
    border: none; border-bottom: 1px solid var(--gray-200);
    padding: 6px 8px; font-size: 12px;
}
/* グループ列の縦区切り */
/* 1段目ヘッダ: [空] | 1号 | 2号 | 3号 | 船員 | 合算 | 受給資格 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr.themed-background:first-child > th:nth-child(1),  /* [空] → 1号 (基礎の左) */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr.themed-background:first-child > th:nth-child(2),  /* 1号 → 2号 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr.themed-background:first-child > th:nth-child(3),  /* 2号 → 3号 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr.themed-background:first-child > th:nth-child(4),  /* 3号 → 船員 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr.themed-background:first-child > th:nth-child(5),  /* 船員 → 合算 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr.themed-background:first-child > th:nth-child(6),  /* 合算 → 受給資格 */
/* 2段目ヘッダ: 基礎 | 付加 | 一般厚生 | 公務員共済 | 標準報酬月額 | 標準賞与額 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr.themed-background:nth-child(2) > th:nth-child(2),  /* 付加 (1号 終端) */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr.themed-background:nth-child(2) > th:nth-child(3),  /* 一般厚生 終端 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr.themed-background:nth-child(2) > th:nth-child(4),  /* 公務員共済 終端 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr.themed-background:nth-child(2) > th:nth-child(6),  /* 標準賞与額 (2号 終端) */
/* 加入月数集計行 (toggle 行: 先頭 td が colspan=2) */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr:not(.themed-background) > td:nth-child(1),   /* toggle → 1号基礎 (基礎の左) */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr:not(.themed-background) > td:nth-child(3),   /* 1号付加 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr:not(.themed-background) > td:nth-child(4),   /* 一般厚生 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr:not(.themed-background) > td:nth-child(5),   /* 公務員共済 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr:not(.themed-background) > td:nth-child(7),   /* 標準賞与額 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr:not(.themed-background) > td:nth-child(8),   /* 3号 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr:not(.themed-background) > td:nth-child(9),   /* 船員 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr:not(.themed-background) > td:nth-child(10),  /* 合算 */
/* 加入履歴詳細行 (.pension_kanyu_log の各 tr: 12 列フル) */
.pension_analysis_area .pension_summary > tbody.pension_kanyu_log > tr > td:nth-child(2),   /* age → 1号基礎 (基礎の左) */
.pension_analysis_area .pension_summary > tbody.pension_kanyu_log > tr > td:nth-child(4),   /* 1号付加 */
.pension_analysis_area .pension_summary > tbody.pension_kanyu_log > tr > td:nth-child(5),   /* 一般厚生 */
.pension_analysis_area .pension_summary > tbody.pension_kanyu_log > tr > td:nth-child(6),   /* 公務員共済 */
.pension_analysis_area .pension_summary > tbody.pension_kanyu_log > tr > td:nth-child(8),   /* 標準賞与額 */
.pension_analysis_area .pension_summary > tbody.pension_kanyu_log > tr > td:nth-child(9),   /* 3号 */
.pension_analysis_area .pension_summary > tbody.pension_kanyu_log > tr > td:nth-child(10),  /* 船員 */
.pension_analysis_area .pension_summary > tbody.pension_kanyu_log > tr > td:nth-child(11)   /* 合算 */
{
    border-right: 1px solid var(--gray-300);
}
/* 2段目ヘッダ「基礎」セルの左端: 上のヘッダ rowspan/colspan の関係で nth-child(1) に border-left を付与 */
.pension_analysis_area .pension_summary > tbody:first-of-type > tr.themed-background:nth-child(2) > th:nth-child(1) {
    border-left: 1px solid var(--gray-300);
}
/* 算定条件カード内サブテーブル (kosei_cond / kiso_cond): 横罫線のみ + 2003年/2009年 区切り */
.pension_analysis_area .pension-cond-card__params .table {
    border-collapse: collapse; border: none;
}
.pension_analysis_area .pension-cond-card__params .table th,
.pension_analysis_area .pension-cond-card__params .table td {
    border: none; border-bottom: 1px solid var(--gray-200);
    padding: 4px 6px; font-size: 11px;
}
/* 4 列構成 (前期 colspan2 ｜ 後期 colspan2) の境界 = 2 列目の右端 */
.pension_analysis_area .pension-cond-card__params .table tr > th:nth-child(2),
.pension_analysis_area .pension-cond-card__params .table tr > td:nth-child(2) {
    border-right: 1px solid var(--gray-300);
}
.pension_sikyu_log .shokei { background: #f8fbff; font-weight: 600; }
.pension_sikyu_log th:last-child,
.pension_sikyu_log td:last-child { font-weight: 700; background: #f0f7ff; }
/* グループ列の縦区切り */
/* 老齢: 期間｜老齢基礎｜一般厚生｜公務員厚生・私学共済｜計 */
.pension_sikyu_log thead tr:nth-child(1) > th:nth-child(2),  /* 期間 → 老齢基礎 */
.pension_sikyu_log thead tr:nth-child(1) > th:nth-child(3),  /* 老齢基礎 → 老齢厚生 */
.pension_sikyu_log thead tr:nth-child(1) > th:nth-child(4),  /* 老齢厚生（→ 計の前）*/
.pension_sikyu_log thead tr:nth-child(2) > th:nth-child(1),  /* 一般厚生 */
.pension_sikyu_log thead tr:nth-child(2) > th:nth-child(2),  /* 公務員厚生・私学共済（→ 計の前）*/
.pension_sikyu_log thead th.shokei,
.pension_sikyu_log thead th.uchiwake:has(+ .shokei),
.pension_sikyu_log tbody td.shokei,
.pension_sikyu_log tbody td.uchiwake:has(+ .shokei),
.pension_sikyu_log tbody tr > td:nth-child(2),                      /* 期間 → 老齢基礎 (body) */
/* 遺族: 期間｜遺族基礎｜遺族厚生・共済｜寡婦年金｜計（各グループ末尾は 受給権者 列）*/
.izoku_pension_sikyu_log thead tr:nth-child(1) > th:nth-child(2),  /* 期間 → 遺族基礎 */
.izoku_pension_sikyu_log thead tr:nth-child(1) > th:nth-child(3),  /* 遺族基礎 */
.izoku_pension_sikyu_log thead tr:nth-child(1) > th:nth-child(4),  /* 遺族厚生・共済 */
.izoku_pension_sikyu_log thead tr:nth-child(1) > th:nth-child(5),  /* 寡婦年金（→ 計の前）*/
.izoku_pension_sikyu_log thead tr:nth-child(2) > th.shokei + th,   /* 受給権者（thead の境界）*/
.izoku_pension_sikyu_log tbody td.shokei + td,                      /* 受給権者（tbody の境界）*/
.izoku_pension_sikyu_log tbody tr > td:nth-child(2) {               /* 期間 → 遺族基礎 (body) */
    border-right: 1px solid var(--gray-300) !important;
}
/* 詳細表示時の uchiwake/shokei 行ヘッダ (thead 3 行目) と body 行先頭の「基礎」列に左ボーダー
   (期間が rowspan=3 のため、3 段目ヘッダと body 行は nth-child(1) が「基本(基礎)」になる) */
.pension_sikyu_log thead tr:nth-child(3) > th:nth-child(1),
.izoku_pension_sikyu_log thead tr:nth-child(2) > th:nth-child(1),
.izoku_pension_sikyu_log thead tr:nth-child(3) > th:nth-child(1) {
    border-left: 1px solid var(--gray-300);
}
/* 算定条件セクション */
.pension-conditions {
    margin-top: var(--space-md); padding-top: var(--space-md);
    border-top: 1px solid var(--gray-200);
}
/* 算定条件フローステップ */
.pension-conditions > .fp-accordion,
.pension-conditions > .pension-kanyu-block { position: relative; margin-bottom: var(--space-md); }
.pension-conditions > .fp-accordion::after,
.pension-conditions > .pension-kanyu-block::after {
    content: '▼';
    display: block;
    text-align: center;
    color: var(--gray-400);
    font-size: 16px;
    margin-top: 6px;
    letter-spacing: 4px;
}
/* 加入月数履歴の見出し（旧: アコーディオンヘッダー） */
.pension-cond-subtitle {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13px; font-weight: 600; color: var(--gray-700);
    margin-bottom: var(--space-sm);
}
/* 直接指定バッジ */
.pension-cond-card__badge--direct {
    background: #fff3cd; color: #856404;
}
/* 算定条件カード */
.pension-cond-cards { display: flex; gap: 12px; flex-wrap: nowrap; margin-top: var(--space-sm); overflow-x: auto; }
.pension-cond-card {
    flex: 1 1 0; min-width: 200px;
    border: 1px solid var(--gray-200); border-radius: 8px;
    background: #fff; overflow: hidden;
}
.pension-cond-card__header {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 8px 12px; background: #f5f7fa;
    border-bottom: 1px solid var(--gray-200);
}
.pension-cond-card__title { font-weight: 600; font-size: 13px; color: var(--gray-800); }
.pension-cond-card__kuriage { font-size: 11px; color: var(--gray-500); }
.pension-cond-card__body { padding: 8px 12px; }
.pension-cond-card__method {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px; flex-wrap: wrap;
}
.pension-cond-card__label { font-size: 11px; color: var(--gray-500); }
.pension-cond-card__badge {
    font-size: 11px; padding: 2px 8px;
    background: #e8f0fe; color: #1a73e8;
    border-radius: 10px; white-space: nowrap;
}
.pension-cond-card__term { font-size: 11px; color: var(--gray-500); }
.pension-cond-card__separator { text-align: center; margin: 4px 0; }
.pension-cond-card__amounts {
    background: #f8f9fb; border-radius: 4px; padding: 4px 8px; margin-bottom: 8px;
}
.pension-cond-card__amount-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; padding: 2px 0;
}
.pension-cond-card__amount-label { color: var(--gray-600); }
.pension-cond-card__amount-value { font-weight: 600; }
.pension-cond-card__params { font-size: 12px; }
.pension-cond-card__params .table { margin-bottom: 0; border: none; box-shadow: none; }
.pension-note { list-style: none; font-size: 0.85em; color: var(--gray-600); padding-left: 0; margin-top: var(--space-sm); }
.kanyu-rireki-toggle {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 4px 8px; font-size: 12px; font-weight: 600;
    color: var(--gray-700); background: #f5f7fa;
    border: 1px solid var(--gray-200); border-radius: 4px; user-select: none;
}
.kanyu-rireki-toggle:hover { background: #edf0f5; border-color: var(--gray-300); }
.kanyu-rireki-toggle > .lucide:first-child {
    width: 14px; height: 14px; flex-shrink: 0;
    color: var(--gray-400); transition: transform 0.2s;
}
.kanyu-rireki-toggle:not(.is-collapsed) > .lucide:first-child { transform: rotate(90deg); }

/* --- Insurance Analysis --- */
.ins-analysis { font-size: 13px; }
.ins-header {
    font-size: 17px; font-weight: 700; color: var(--gray-800);
    padding-bottom: 8px; margin-bottom: 12px;
    border-bottom: 2px solid var(--gray-300);
}
.ins-header__name { margin-right: 8px; }
.ins-header__type { font-size: 13px; font-weight: 400; color: var(--gray-500); }
.ins-layout { display: flex; gap: 16px; margin-bottom: 16px; }
.ins-layout__left { flex: 1 1 45%; min-width: 0; }
.ins-layout__right { flex: 1 1 55%; min-width: 0; }
.ins-subsection__title {
    font-size: 15px; font-weight: 600; color: var(--gray-700);
    padding-left: 10px; margin: 24px 0 8px;
    border-left: 3px solid #5b9bd5;
}
.ins-summary-table { font-size: 13px; margin-bottom: 8px; }
.ins-summary-table th { width: 100px; font-weight: 600; color: var(--gray-600); vertical-align: top; }
.ins-summary-table td { vertical-align: top; }
.ins-summary-table pre { margin: 0; font-size: 12px; white-space: pre-wrap; }
.ins-total-section { margin-bottom: 24px; }
.ins-total-section .table { font-size: 13px; }
/* 保険テーブルのヘッダ: 分析画面では結果画面の他テーブルと同系色に揃える */
.ins-total-section .ins_payment_table th.ins-head,
.ins-total-section .ins_cancel_refund_table th.ins-head {
    background-color: #fafcfb;
    color: var(--gray-800);
    font-weight: 600;
}
/* 年・年齢カラムは内容が短い (4桁 / "xx/xx/xx") のでコンテンツ幅に畳む。
   分析画面でのみ適用 (PDF は report-patch.css 側で別制御)。 */
.ins-total-section .ins-year-col,
.ins-total-section .ins-age-col {
    white-space: nowrap;
    font-size: 12px;
    padding-left: 6px;
    padding-right: 6px;
}
/* 契約列 (ins-policy-col) の width:1%/min-width:70px を分析画面では無効化し、
   残り幅を契約列で均等分担させる。ins-policy-col のレガシー制約は提案書 PDF 向けで、
   分析画面では bootstrap の width:100% テーブルに対して細列貼り付きとなるため解除。 */
.ins-total-section .ins_payment_table .ins-policy-col,
.ins-total-section .ins_cancel_refund_table .ins-policy-col {
    width: auto;
    min-width: 0;
    white-space: normal;
}
.ins-policy-col { width: 1%; white-space: nowrap; min-width: 70px; }
.ins-icon-legend {
    display: flex; gap: 12px; font-size: 12px; color: var(--gray-500);
    margin-bottom: 4px;
}
.ins-icon-legend span { white-space: nowrap; }
.ins-accordion { margin-top: 8px; }
.ins-die-profile-group { margin: 12px 0 16px 12px; }
.ins-die-profile-group__title {
    font-size: 13px; font-weight: 600; color: var(--gray-600);
    margin-bottom: 6px; padding-left: 8px;
    border-left: 2px solid var(--gray-300);
}
.ins-graph-section { margin-bottom: 12px; }
.ins-data-section { margin-top: 16px; }
.ins-mangaichi-detail { margin-top: 8px; }
.ins-mangaichi-detail__header { margin-bottom: 6px; }
.ins-mangaichi-detail__label { font-size: 14px; font-weight: 600; color: var(--gray-700); display: block; }
.ins-mangaichi-detail__selector { font-size: 12px; color: #e74c3c; display: block; margin-top: 4px; }
.ins-mangaichi-detail__selector select { font-size: 12px; padding: 1px 3px; }
.ins-mangaichi-detail__summary { font-weight: 700; font-size: 14px; margin-bottom: 4px; }

/* Life Event Analysis */
.le-table { font-size: 12px; }
.le-stage { margin-bottom: 8px; }
.le-stage__header {
    position: sticky; top: 0; z-index: 2;
    padding: 4px 8px;
    font-size: 12px; font-weight: 600; color: #fff;
    /* FP電卓モーダル / モード切替ボタンと共通の「ロゴ派生シアン」アクセント。
       fp_calculator.css スコープ外のため var() は使わずリテラル直書き。
       白文字に対し WCAG AA 5.91:1 ✅ (旧 #5b9bd5 は 2.93:1 で違反だった) */
    background: #176D82;
    border-radius: 3px;
    margin-bottom: 2px;
}
.le-stage__empty { padding: 4px 8px; color: var(--gray-400); }
.le-row {
    display: flex;
    border-bottom: 1px solid var(--gray-100);
    padding: 3px 0;
    transition: background 0.15s;
}
.le-row:hover { background: #e8f4fd; }
.le-row.is-danger { background: #fff5f5; }
.le-row.is-danger .le-event__index { --event-index-color: #e74c3c; border-color: var(--event-index-color); }
.le-row__year {
    flex: 0 0 55px;
    font-weight: 600;
    padding-left: 8px;
    color: var(--gray-700);
}
.le-row__month {
    flex: 0 0 30px;
    color: var(--gray-500);
}
.le-row__events { flex: 1 1 0; min-width: 0; }
.le-event {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    padding: 1px 0;
}
.le-event__index {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    /* default は年代バーと同じシアン濃で揃える。is-danger 行だけ #e74c3c に
       上書き (.le-row.is-danger 経由) */
    border: 1px solid var(--event-index-color, #176D82); color: #333;
    font-size: 10px; font-weight: 600;
    flex-shrink: 0;
}
.le-event__title {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.le-event__cost {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--gray-700);
    white-space: nowrap;
}
.le-edu-detail { width: 100%; margin-top: 2px; }
.edu-detail-toggle {
    color: var(--gray-500); text-decoration: none; display: inline-flex; align-items: center; gap: 2px;
    font-size: 11px;
}
.edu-detail-toggle:hover { color: var(--gray-700); }
.edu-detail-toggle i, .edu-detail-toggle svg { transition: transform 0.15s; }
.edu-detail-toggle.is-open i, .edu-detail-toggle.is-open svg { transform: rotate(90deg); }
.le-edu-table { font-size: 11px; margin: 4px 0; }
.le-edu-table th, .le-edu-table td { padding: 2px 4px !important; }
.le-edu-subtotal { float: right; }
/* Highchartsイベントフラグ */
.highcharts-flags-series .highcharts-point.is-danger-flag path { stroke: #e74c3c; }
/* FpEvents フラグホバーラベル */
.fp-event-flag-label {
    display: none;
    position: absolute;
    z-index: 10001;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    pointer-events: none;
}
.fp-event-flag-label.is-danger {
    border-color: #e74c3c;
    color: #e74c3c;
}
/* イベント表ハイライト（ホバー時 / グラフフラグホバー時 共通） */
.le-row:has(.le-event.is-highlighted) {
    background: #e8f4fd;
}
/* イベント表ピン留め（行全体に適用） */
.le-row:has(.le-event.is-pinned) {
    background: #fff3e0;
    box-shadow: inset 3px 0 0 #e67e22;
}
.le-event__index { position: relative; }
.le-event .le-event__index .pin-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -85%);
    margin: 0;
    pointer-events: none;
    z-index: 1;
}
.le-event .pin-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
}
/* 右パネルテーブルのピン留めハイライト */
tr.is-pinned-year {
    background: #fff3e0 !important;
}
tr .pin-icon {
    font-size: 11px;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
/* CFテーブル ピン留め列ハイライト
   wizard.css §5730 が `.analysis-output .webix_hcell` に webix skin 上書きの
   例外として background-color !important / font-weight:600 を当てている
   (docs/design-system.md §10 参照)。ヘッダ側のハイライト/太字調整は同じ
   scope (.analysis-output .webix_hcell.<class>) で上書きする。body cell は
   wizard.css が background を触っていないので !important 不要。 */
.cf-year-header {
    cursor: pointer;
}
.analysis-output .webix_hcell.cf-year-header {
    font-weight: normal;          /* wizard.css の 600 を specificity で上書き。世帯主のみ <b> で bold */
}
.cf-year-header b {
    font-weight: 700;
}
.analysis-output .webix_hcell.cf-year-header:hover {
    background-color: rgba(230, 126, 34, 0.08) !important;  /* wizard.css の bg !important と競合するため */
}
/* body cell — flat.css が `.webix_cell { background: inherit }` を後から
   読み込むため、specificity を上げて上書きする (!important 不要) */
.analysis-output .webix_cell.cf-pinned-col {
    background-color: rgba(230, 126, 34, 0.08);
}
.analysis-output .webix_hcell.cf-pinned-header {
    /* wizard.css の緑 (--brand-light #e8f5e9) 上に半透明オレンジを重ねると
       灰緑になってしまうため、opaque な淡オレンジで置き換える。 */
    background-color: #fdeedc !important;
}
.cf-pinned-header.cf-pinned-header--year {
    box-shadow: inset 0 -2px 0 #e67e22;
}
.cf-pinned-header .pin-icon {
    font-size: 12px;
}
/* ピンカーソル（ピン留め可能な全箇所共通）
   設計: 他のカーソル変更が優先されるよう !important は付けない。
   - 同要素に inline `style="cursor:..."` がある場合 (例: webix cssFormat の
     `cursor:pointer`、ドラッグ可能要素の `cursor:grab` 等) はそちらが勝つ。
   - Webix datatable は列/行リサイズ予兆時に `_viewobj.style.cursor` を
     `col-resize` / `row-resize` に書き換える。下の [style*="resize"] ルールで
     子のピンカーソルを `inherit` に切り替え、親のリサイズカーソルを優先させる。 */
.le-event[data-index],
.cf-year-header,
.pin-cursor,
.pin-cursor * { cursor: url('/img/pin.png') 17 36, pointer; }

/* Webix リサイズ予兆カーソル中はピンを抑止 (ancestor の inline style を検知) */
[style*="col-resize"] .cf-year-header,
[style*="row-resize"] .cf-year-header,
[style*="col-resize"] .pin-cursor,
[style*="row-resize"] .pin-cursor { cursor: inherit; }
/* セクションタイトルのピン情報（旧: analysis-pin-barに移行済み） */
.le-row__balances {
    display: flex; gap: 0;
    flex: 0 0 auto;
    font-size: 10px; color: var(--gray-500);
    align-items: flex-start;
}
.le-balance {
    width: 50px; text-align: right; white-space: nowrap;
}
/* Stage header column headers */
.le-stage__header {
    display: flex; justify-content: space-between; align-items: center;
}
.le-stage__col-headers {
    display: flex; gap: 0; font-size: 10px; font-weight: 400; opacity: 0.8;
}
.le-col-header {
    width: 50px; text-align: right;
    display: flex; flex-direction: column; align-items: flex-end;
    line-height: 1.2;
}
.le-col-header small { font-size: 8px; opacity: 0.7; }

/* === Floating Report Panel === */
.report-floating-panel {
    position: fixed;
    top: 80px;
    right: 40px;
    width: 600px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--shadow-lg), var(--shadow-sm);
    z-index: 10050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: width 0.2s, height 0.2s;
}
.report-floating-panel.is-minimized {
    max-height: none;
    height: auto;
}
.report-floating-panel.is-minimized .report-floating-panel__body,
.report-floating-panel.is-minimized .report-floating-panel__resize {
    display: none;
}
.report-floating-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #ffffff;
    color: #1f2937;
    cursor: move;
    user-select: none;
    flex-shrink: 0;
    border-radius: 10px 10px 0 0;
    border-bottom: 3px solid #d9534f;
}
.report-floating-panel__header svg.lucide {
    color: #d9534f;
}
.report-floating-panel.is-minimized .report-floating-panel__header {
    border-radius: 10px;
}
.report-floating-panel__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
}
.report-floating-panel__controls {
    display: flex;
    gap: 4px;
}
.report-floating-panel__btn {
    background: none;
    border: none;
    color: #d9534f;
    font-size: 16px;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.report-floating-panel__btn:hover {
    background: rgba(217,83,79,0.1);
}
.report-floating-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 200px;
}
.report-floating-panel__body .report_config {
    margin: 0;
    padding: 0;
}
.report-floating-panel__body .report_config .alert {
    font-size: 12px;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.report-floating-panel__body .report_menu_table {
    font-size: 12px;
}
.report-floating-panel__body .report_menu_table td,
.report-floating-panel__body .report_menu_table th {
    padding: 4px 6px;
}
.report-floating-panel__body textarea {
    font-size: 13px;
}
.report-floating-panel__resize {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, #ccc 50%);
    border-radius: 0 0 10px 0;
    z-index: 3;
}
.report-floating-panel__resize-edge {
    position: absolute;
    top: 48px;
    bottom: 8px;
    width: 8px;
    cursor: ew-resize;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.report-floating-panel__resize-edge--left { left: 0; }
.report-floating-panel__resize-edge--right { right: 0; }
.report-floating-panel__resize-edge::before {
    content: "";
    width: 3px;
    height: 36px;
    border-radius: 2px;
    background: #cbd5e1;
    background-image: radial-gradient(circle, #94a3b8 1px, transparent 1.2px);
    background-size: 3px 6px;
    background-repeat: repeat-y;
    background-color: transparent;
    transition: background-color 0.15s;
}
.report-floating-panel__resize-edge:hover {
    background: rgba(217, 83, 79, 0.08);
}
.report-floating-panel__resize-edge:hover::before {
    background-image: radial-gradient(circle, #d9534f 1.2px, transparent 1.4px);
}
.report-floating-panel.is-minimized .report-floating-panel__resize-edge { display: none; }

/* --- 提案書設定パネル: カード化レイアウト --- */
.report-config-title-field {
    margin-bottom: 14px;
}
.report-config-title-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
}
.report-floating-panel__body input[type="text"].report_config {
    padding: 8px 12px;
    font-size: 13px;
    height: auto;
}
.report-floating-panel__body input[type="text"].report_config::placeholder {
    color: #aaa;
}

.report-section-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.report-section-card {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.report-section-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--gray-200);
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.report-section-card__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #64748b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.report-section-card__title {
    flex: 1;
    min-width: 0;
}
.report-section-card__all {
    font-size: 11px;
    font-weight: 400;
    color: #555;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}
.report-section-card__all input {
    margin-right: 2px;
    vertical-align: middle;
}
.report-section-card__body {
    padding: 10px 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px 14px;
    align-items: center;
}
.report-section-card__body--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.report-section-card__body--inline > .report-section-card__analysis-status {
    flex-basis: 100%;
}
.report-section-card__body > label {
    margin: 0;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
}
.report-section-card__required {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 10px 3px 6px;
    font-size: 12px;
    font-weight: normal;
    color: #555;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    cursor: default;
}
.report-section-card__required-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #94a3b8;
    border-radius: 8px;
    line-height: 1.4;
}
.report-section-card__comment {
    grid-column: 1 / -1;
    margin-top: 8px;
}
.report-section-card__break {
    grid-column: 1 / -1;
    height: 0;
}
.report-section-card__comment > b {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
}
.report-section-card__analysis-status {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--gray-50, #f8fafc);
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    position: relative;
}
.report-section-card__analysis-heading {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--gray-700, #334155);
}
.report-section-card__analysis-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.report-section-card__analysis-table th,
.report-section-card__analysis-table td {
    padding: 4px 8px;
    border: 1px solid var(--gray-200, #e2e8f0);
    text-align: left;
    vertical-align: middle;
}
.report-section-card__analysis-table th {
    background: var(--gray-100, #f1f5f9);
    font-weight: 600;
    color: var(--gray-700, #334155);
    white-space: nowrap;
}
.report-section-card__analysis-table td {
    background: #fff;
    color: var(--gray-700, #334155);
}
.report-section-card__analysis-name {
    font-weight: 600;
    white-space: nowrap;
}
.report-section-card__analysis-table tr.is-pending td {
    background: #fffbeb;
}
.report-section-card__analysis-pending-cell {
    color: #b45309;
}
.report-section-card__analysis-pending-label {
    font-weight: 600;
    margin-right: 6px;
}
.report-section-card__analysis-link {
    margin-left: 4px;
}
/* チェック OFF 時：提案書に出力されない旨を視覚的に示す */
.report-section-card__analysis-status-wrap.is-excluded .report-section-card__analysis-status {
    opacity: 0.45;
    filter: grayscale(0.6);
}
.report-section-card__analysis-status-wrap.is-excluded .report-section-card__analysis-status::after {
    content: "提案書には出力されません";
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 10px;
    font-weight: 600;
    color: #991b1b;
    background: #fee2e2;
    padding: 1px 6px;
    border-radius: 3px;
    opacity: 1;
}
/* 全プロファイル未分析 → 提案書非出力の明示メッセージ */
.report-section-card__analysis-excluded-note {
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 11px;
    color: #7c2d12;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    line-height: 1.5;
}

.report-config-footer {
    position: sticky;
    bottom: -16px;
    margin: 16px -16px -16px -16px;
    padding: 10px 16px 12px;
    background: #fff;
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 8px rgba(0,0,0,0.04);
    z-index: 2;
}
.report-config-footer__notice {
    font-size: 11px;
    margin-bottom: 8px;
    line-height: 1.4;
}
.report-config-footer__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.report-config-footer__secondary {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.report-config-footer__primary {
    margin-left: auto;
}
/* セカンダリボタンは小さく目立たない見た目に上書き */
.report-config-footer__secondary .btn {
    padding: 4px 10px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
.report-config-footer__secondary .btn:hover {
    background: #e5e7eb !important;
}
/* メインPDFボタンを強調 */
.report-config-footer__primary .btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: #d9534f !important;
    border-color: #c9302c !important;
    box-shadow: 0 4px 12px rgba(217,83,79,0.35) !important;
}
.report-config-footer__primary .btn:hover {
    background: #c9302c !important;
}
.report-config-footer__primary .btn i {
    margin-right: 4px;
}

/* --- 不動産譲渡所得分析 --- */
.joto-analysis { font-size: 13px; }
.joto-table { white-space: nowrap; border-collapse: separate; border-spacing: 0; }
.joto-table thead th { text-align: center; font-size: 12px; font-weight: 600; padding: 4px 6px; border-bottom: 2px solid #ddd; }
.joto-table tbody td { padding: 4px 6px; border-bottom: 1px solid #eee; }
.joto-table tfoot th { padding: 6px; border-top: 2px solid #ddd; font-weight: 700; font-size: 13px; }
.joto-detail-btn {
    float: right; border: none; background: none; cursor: pointer;
    font-size: 11px; color: var(--gray-500); padding: 0 2px;
    display: inline-flex; align-items: center; gap: 2px;
}
.joto-detail-btn:hover { color: var(--gray-700); }
.joto-detail-btn svg { transition: transform 0.2s; }
.joto-table.show-detail .joto-detail-btn svg { transform: rotate(90deg); }
.joto-uchiwake-btn {
    border: none; background: none; cursor: pointer;
    font-size: 11px; color: var(--gray-500); padding: 0 2px;
    display: inline-flex; align-items: center; gap: 2px;
}
.joto-uchiwake-btn:hover { color: var(--gray-700); }
.joto-uchiwake-btn svg { transition: transform 0.2s; }
.joto-uchiwake-btn.is-open svg { transform: rotate(90deg); }
.joto-detail { display: none; }
.joto-table.show-detail .joto-detail { display: table-cell; }

/* Medical Limit (高額療養費限度額分析) */
.medical-limit-subsection__title {
    font-size: 15px; font-weight: 600; color: var(--gray-800);
    border-left: 3px solid #5b9bd5; padding-left: 8px;
    margin-bottom: var(--space-sm);
}
.medical-limit-layout { display: block; }
.medical-limit-col-term { width: 160px; min-width: 160px; max-width: 160px; white-space: nowrap; }
.medical-limit-term-link {
    font-size: inherit; font-weight: 600; color: var(--gray-800);
    text-decoration: none; cursor: pointer;
}
.medical-limit-term-link::after { content: ' \25B8'; }
.medical-limit-term-link.is-open::after { content: ' \25BE'; }
.medical-limit-term-link:hover { color: #3498db; text-decoration: none; }
.medical-limit-term-link.is-open { color: #3498db; }
.medical-limit-term-hint { font-size: 12px; font-weight: 400; color: var(--gray-500); }
.medical-limit-expand-panel {
    background: #f8f9fa; border: 1px solid #dee2e6;
    border-radius: 4px; padding: 16px; margin: 4px 0;
}
.medical-limit-expand-row > td { border: none; padding: 0 var(--space-xl); }
.medical-limit-kubun-cell { display: flex; align-items: baseline; gap: 8px; }
.medical-limit-kubun-cell__name { white-space: nowrap; }
.medical-limit-kubun-cell__members { font-size: 12px; color: var(--gray-500); }
.medical-limit-insurance-section { margin-bottom: var(--space-lg); }
.medical-limit-insurance-section:last-child { margin-bottom: 0; }
.medical-limit-insurance-section__title {
    font-size: 14px; font-weight: 600; color: var(--gray-800);
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: var(--space-xs); margin-bottom: var(--space-sm);
}
.medical-limit-insurance-section__title br { display: none; }
.medical-limit-toggle-row > td { padding-bottom: var(--space-lg); background: #f0f4f8; }
.medical-limit-toggle-row:hover > td,
.medical-limit-expand-row:hover > td { background: transparent; }
.medical-limit-expand-panel .analizer_premium {
    min-width: auto; padding: 10px 20px; font-size: 13px;
}
.medical-limit-expand-panel .medical_expense_table { font-size: 12px; }
.medical-limit-expand-panel .medical_expense_table th { font-size: 11px; }
.medical-limit-expand-panel .medical_expense_table input { font-size: 12px; }
.medical_expense_table .grand_total,
.medical_expense_table .net_grand_total,
.medical_expense_table .target_grand_total,
.medical_expense_table .net_target_grand_total {
    vertical-align: middle; font-weight: bold;
}
.medical_expense_table input.nyuin,
.medical_expense_table input.gairai,
.medical_expense_table input.net_nyuin,
.medical_expense_table input.net_gairai { width: 100%; text-align: right; }
.medical-limit-col-rate { width: 60px; }
.medical-limit-col-limit { width: 100px; }
.medical-limit-summary-table { margin-top: var(--space-md); }
.medical-limit-summary-table thead th { font-size: 12px; font-weight: 600; }
.medical-limit-summary-table thead th br { display: none; }
.medical-limit-summary-table th { text-align: left; }
.medical-limit-summary-table td { font-size: var(--fs-emphasis-md); text-align: right; }
.medical-limit-summary-table small { font-size: var(--fs-xs); }
.medical-limit-summary__refund-header { display: flex; align-items: center; gap: var(--space-sm); }
.medical-limit-summary__net-row td,
.medical-limit-summary__net-row th { font-weight: bold; }
.medical-limit-kubun-table .answer { font-weight: bold; color: #3498db; }

/* =============================================
   Q11 統一インベントリ (Phase A)  .q11-inv__*
   ============================================= */
:root {
    --q11-inv-cash:    #6b8e7a;
    --q11-inv-bank:    #4a7ca8;
    --q11-inv-trust:   #b8784a;
    --q11-inv-pension: #8569a3;
}
.q11-inv {
    border: 1px solid #e1e6ec;
    border-radius: 6px;
    background: #fff;
    margin: 4px 0 16px;
    overflow: visible;
    position: relative; /* .q11-inv__loading の絶対配置基準 */
}

/* ---- 読み込み中オーバーレイ ----
   .q11-inv 全域を覆って初期化完了まで「読み込み中…」を表示。
   解除トリガは `.q11-inv__scroll.is-filter-ready`（既存の table opacity:0 → 1
   ゲートと同じ signal）。:has() で連動させて JS 側に変更を加えない。
   (Chrome 105+/Safari 15.4+/Firefox 121+ をサポート対象とする前提)。 */
.q11-inv__loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: #6c757d;
    font-size: 13px;
    border-radius: 6px; /* 親 .q11-inv の角丸に揃える */
    transition: opacity 200ms ease-out, visibility 0s linear 200ms;
}
.q11-inv__loading-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.q11-inv:has(> .q11-inv__scroll.is-filter-ready) > .q11-inv__loading {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.q11-inv__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: #f4f7fa;
    border-bottom: 1px solid #e1e6ec;
    flex-wrap: wrap;
}
.q11-inv__toolbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.q11-inv__filter-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.q11-inv__filter-label {
    font-size: 12px;
    color: #6a7a8a;
    font-weight: 600;
}
.q11-inv__filter-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin: 0;
    cursor: pointer;
    user-select: none;
    font-weight: 400;
    color: #455a6e;
}
.q11-inv__filter-check input[type="checkbox"] {
    margin: 0;
}

/* ====================================================================
   .sticky-cols-table: sticky 列を持つテーブルの border-collapse 由来 flicker
   を構造的に解消する汎用 helper class。
   ----
   `position: sticky` + `border-collapse: collapse` の組合せは、CSS 仕様レベル
   で「scroll 中にサブピクセル paint で隣接セル間の border 色がチラチラ覗く」
   挙動を起こす（Chrome/Safari/Firefox いずれでも発生）。border が cell 共有の
   layout に乗っていることが根因なので、`border-collapse: separate` + 単方向
   border に切替えて根絶する。
   ----
   適用先（横スクロール + sticky 列を持つ全テーブル）:
   - .q11-inv__table（口座一覧表）
   - .securities_investment_table（MRF / DC スケジュール表）
   ----
   border 色 #d6e0e9 は `--brand-border` のフォールバック値と一致。 */
/* `#wizard` 冠で specificity を ID 級に上げる。wizard.css に
   `.securities_investment_table { border-collapse: collapse }` が同特異度で
   存在し source order で勝つので、ID 特異度で確実に上書きする。 */
#wizard .sticky-cols-table {
    border-collapse: separate;
    border-spacing: 0;
}
/* セル既定: 右 + 下のみで 1px 罫線（隣接セルと合算で 1px 維持）。
   ID 特異度を持たないため、wizard.css の `#wizard table th` (1,1,2) には
   負ける。後段で `#wizard .sticky-cols-table > * > tr > th` 等で打ち消す。 */
.sticky-cols-table > thead > tr > th,
.sticky-cols-table > thead > tr > td,
.sticky-cols-table > tbody > tr > th,
.sticky-cols-table > tbody > tr > td,
.sticky-cols-table > tfoot > tr > th,
.sticky-cols-table > tfoot > tr > td {
    border: 0;
    border-right: 1px solid var(--brand-border, #d8dee4);
    border-bottom: 1px solid var(--brand-border, #d8dee4);
}
/* `#wizard table th:not(.analysis-output *)` (1,1,2) と
   `#wizard table:not(...) thead tr th` (1,1,4) を確実に上書きするための
   ID 特異度版。Q11 / schedule 両方で確実に勝つ。 */
#wizard .sticky-cols-table > thead > tr > th,
#wizard .sticky-cols-table > thead > tr > td,
#wizard .sticky-cols-table > tbody > tr > th,
#wizard .sticky-cols-table > tbody > tr > td,
#wizard .sticky-cols-table > tfoot > tr > th,
#wizard .sticky-cols-table > tfoot > tr > td {
    border: 0;
    border-right: 1px solid var(--brand-border, #d8dee4);
    border-bottom: 1px solid var(--brand-border, #d8dee4);
}
/* 上端: 最初の行に top border を補完（thead 1 行目 → 無ければ tbody 1 行目） */
#wizard .sticky-cols-table > thead > tr:first-child > th,
#wizard .sticky-cols-table > thead > tr:first-child > td,
#wizard .sticky-cols-table:not(:has(thead)) > tbody:first-child > tr:first-child > th,
#wizard .sticky-cols-table:not(:has(thead)) > tbody:first-child > tr:first-child > td {
    border-top: 1px solid var(--brand-border, #d8dee4);
}
/* 左端: 最初のセルに left border を補完 */
#wizard .sticky-cols-table > thead > tr > th:first-child,
#wizard .sticky-cols-table > thead > tr > td:first-child,
#wizard .sticky-cols-table > tbody > tr > th:first-child,
#wizard .sticky-cols-table > tbody > tr > td:first-child,
#wizard .sticky-cols-table > tfoot > tr > th:first-child,
#wizard .sticky-cols-table > tfoot > tr > td:first-child {
    border-left: 1px solid var(--brand-border, #d8dee4);
}

/* `.fixed` 列の sticky 化（legacy `Account_wizard._set_scroll_table` 経由で
   左 N 列に付与される class）。main.css の同等ルールが Q11 ページではロード
   されないので、`.sticky-cols-table` スコープで補う。
   - 個別 cell に inline `left: <px>` が JS で書き込まれるので CSS では未指定
   - tbody の sticky cell は不透明背景が必須（横スクロール時に下層が透ける）
   - thead `.scroll_header` は wizard.css line 6469 で別途 sticky 指定済み
   - `#wizard` 冠で specificity を上げる：`.q11-inv__editor-content .table >
     tbody > tr > td { background-color: transparent }` (fp-univ.css L10360,
     特異度 0,2,4) が editor 内の table セル bg を強制的に透明にしてしまうため、
     ID 級に揃えて押し勝つ。 */
#wizard .sticky-cols-table .fixed {
    position: sticky;
    z-index: 2;
    background-color: #fff;
}
#wizard .sticky-cols-table thead .fixed {
    /* thead の sticky cell は tbody の上に来てほしいので z-index を 1 段上げる */
    z-index: 3;
}
/* schedule 表の `tr.investment_schedule` は action-buy/sell の row bg を持つが、
   sticky cell にはその上に opaque な独自 bg を載せて下層が透けないようにする。
   `.fixed` 全体に一貫適用しておくと、将来 sticky 列数が変わっても破綻しない。 */
#wizard .securities_investment_table tr.investment_schedule > td.fixed {
    background-color: #f5f8fc;
}

/* col-collapse で隠した列の cell に付与される marker class。
   cell 自身は display:cell として layout に残す（layout から外すと bank-
   header-empty の colspan'd slack 吸収が body 行と乖離して sticky 右 cells が
   左ズレする）。一方、内部 content の高さが row に寄与しないよう、padding 0 +
   font-size 0 + line-height 0 で潰し、子要素は display:none で完全に消す。 */
.q11-inv__cell--col-hidden {
    padding: 0 !important;
    border-width: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
}
.q11-inv__cell--col-hidden > * {
    display: none !important;
}

/* --- テーブル本体 --- */
.q11-inv__table {
    margin-bottom: 0;
    /* fixed layout: editor 行(colspan)の form の自然幅が他列を引っ張らないようにする。
       width:100% は Bootstrap .table から継承。fixed layout 下では各列幅は
       thead の th width / securities_cell width 指定が決定する。 */
    table-layout: fixed;
}
.q11-inv__table > thead > tr > th {
    font-size: 11px;
    font-weight: 600;
    color: #6a7a8a;
    background: #fafbfc;
    border-bottom: 1px solid #e1e6ec;
    white-space: nowrap;
    vertical-align: middle;
}
/* 列幅は colgroup の % 指定が支配（init_balance.php 参照）。
   th 個別の width 指定は colgroup のない他テーブル用に残置。 */
.q11-inv__th-type    { width: 72px; }
.q11-inv__th-bank-account { width: 280px; }
.q11-inv__th-cash    { width: 180px; }
.q11-inv__th-total   { width: 100px; }
.q11-inv__th-schedule { width: 120px; }
.q11-inv__th-end     { width: 80px; }

/* ========== 2D 横スクロール + 左右 sticky ==========
   銘柄が増えて全カラム合計 (col_total_units) が container 幅を越えると、
   `.q11-inv__scroll` が横スクロールに切替わる。
   - テーブル本体は inline `min-width: <unit 合計>px` を持ち、container 幅を
     割っても各カラムが unit 値を下回らない（銘柄列 120px を確保）。
   - 左 sticky: type (72px) + 機関/口座 (280px) = 352px が左占有
   - 右 sticky: 計 (100px) + 引き出し開始 (80px) + 解約 (80px) = 260px が右占有
   - sticky offset は inline 単位 px と一致させる（scroll モード時に table = min-width
     なので各列実 px = unit 値、offset と合致）。container 幅 > min-width のとき
     はスクロールが発生しないので offset の px 値が実 px と多少ズレても見た目に
     影響しない。
   - sticky cell には不透明背景が必要（下を流れる cell が透けないように）。 */
.q11-inv__scroll {
    overflow-x: auto;
    /* thead を上 sticky するために vertical 方向の scroll container にする。
       - 親が overflow-y: visible のままだと sticky thead は scroll container の
         先頭に貼り付くものの、scroll container 自体が window scroll で上方へ
         移動するため「ページをスクロールすると thead も流れる」状態になる。
       - max-height で内側スクロールに切替えると、container 内の table がここに
         張り付くようになり thead が常時可視になる。
       - バッファ値 (`100vh - X`) は wizard nav 高さに対する余白。X が大きいほど
         一覧の縦方向が圧迫されるので、実際のクロム高さに合わせて攻めに設定。 */
    overflow-y: auto;
    max-height: calc(100vh - 120px);
    /* sticky の visual を切れ味よく見せるため scrollbar を細く */
    scrollbar-width: thin;
}
/* 旧 `.q11-inv__scroll.has-open-editor` (editor 開時に max-height を none へ
   切替えて外部スクロール化) は撤去。
   理由: max-height を外す瞬間に qs.scrollTop が外部 scroll に畳み込まれて
   コンテンツが瞬間ジャンプし、その直後の smooth scrollIntoView と組み合わさ
   って「上に行き過ぎ → 戻る」の 2 段階知覚を生んでいた。
   現在は editor を qs 内部スクロール内で展開し、scrollIntoView で qs を
   内部 scroll してジャンプ無しの 1 段階 smooth scroll に統合。 */
/* ===== 銘柄フィルタ適用前の flicker 抑制 =====
   PHP は銘柄列を全て visible で出力するが、Securities_filter は jQuery DOMReady
   内で構築されるため「初回 paint で全列見える → JS が走って非対象列を畳む」
   間に視覚的な flicker が発生する。container を初期 opacity:0 にしておき、
   AccountTableController が _applyColumnCollapse を実行しきった後に
   `.is-filter-ready` を付けて短時間フェードイン。
   `.refresher_btn` 経由の partial reload も同じ仕組みで一度ダーク → フェード。
   フィルタ初期化が失敗した場合の safety として 500ms タイムアウトで強制表示。
   blank 時間を最小化するため AccountTableController ctor 内で _setupSecuritiesFilter
   を最先頭に移動済み（旧 totalizer 後だと ~130ms の blank が見えていた）。 */
.q11-inv__scroll:not(.is-filter-ready) > .q11-inv__table {
    opacity: 0;
}
.q11-inv__scroll > .q11-inv__table {
    transition: opacity 80ms ease-out;
}
/* ===== 上 sticky: thead を 1 ブロックとして固定 =====
   thead 要素自体を sticky にすることで、3 段ヘッダの行高を JS / CSS 変数で
   ハードコードする必要がない（過去試行 f1b1ba2fc → revert の理由を回避）。
   z-index 11 で tbody の左右 sticky cell（z-index 2-3）より確実に上へ。
   thead 内の left/right sticky th の z-index は thead が作る stacking context 内で
   相対評価されるため、対 tbody での順序は thead 全体の z-index 11 が支配する。 */
.q11-inv__table > thead {
    position: sticky;
    top: 0;
    z-index: 11;
}

/* ===== 横スクロール時に「左側で必ず見えていてほしい」要素を sticky に =====
   colspan 行（owner band / 追加行 / member-footer）は左右 sticky 列の slot を
   colspan で覆ってしまうので、行内コンテンツが scroll で左へ流れて見切れる。
   行の中身そのものに position:sticky; left を当てて scroll container 左端に
   貼り付ける。
   - 所有者帯の名前ラベル: td padding 12px に揃える
   - inline 「口座を追加」ボタン: type 列 (72px) の右隣に出すので left:80px
   - member footer の追加ボタン群: td padding 12px に揃える */
.q11-inv__owner {
    position: sticky;
    left: 12px;
}
/* bank の add row（単一 btn）/ trust の add row（複数 btn を inline-add-group で
   包む）/ empty bank の placeholder cell — いずれも td が type 列の右隣から
   始まり、内部の natural 位置は type_col_width + td padding(10px)。type 列幅は
   `_applyColumnCollapse` の再分配で変動するため、sticky offset も同じ var に
   揃える（hardcode 80px だと filter on で type 94 の時に 24px 滑る）。 */
.q11-inv__add-row-inline > td.q11-inv__add-cell > .btn,
.q11-inv__add-row-inline > td.q11-inv__add-cell > .q11-inv__inline-add-group,
.q11-inv__empty-row-cell > .btn {
    position: sticky;
    left: calc(var(--q11-sticky-left-bank, 72px) + 10px);
}
/* empty-row-cell は Bootstrap デフォルト padding (.table-condensed 5px) のままだと
   sticky offset (var + 10px) と padding (5px) で 5px ズレるので、add-cell に揃えて
   10px に統一する。 */
.q11-inv__table .q11-inv__empty-row-cell {
    padding-left: 10px;
}
.q11-inv__member-footer-actions {
    position: sticky;
    left: 12px;
}
/* 左 sticky 1: type 列 */
.q11-inv__table > thead > tr > th.q11-inv__th-type,
.q11-inv__table > tbody > tr > td.q11-inv__cell-type {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: #fff;
}
/* 左 sticky 2: 機関名/口座名 列（bank-account/account どちらの class でも）
   left offset は type 列幅と一致させる必要があるが、_applyColumnCollapse の
   再分配で type 幅が unit 値（72px）から伸縮するため、JS が実 col 幅を
   var(--q11-sticky-left-bank) にセットして追従する。fallback は unit 値。 */
.q11-inv__table > thead > tr > th.q11-inv__th-bank-account,
.q11-inv__table > tbody > tr > td.q11-inv__cell-bank-account,
.q11-inv__table > tbody > tr > td.q11-inv__cell-account {
    position: sticky;
    left: var(--q11-sticky-left-bank, 72px);
    z-index: 2;
    background-color: #fff;
}
/* 右 sticky 1: 計 列 — schedule + end の合計幅を JS が更新 */
.q11-inv__table > thead > tr > th.q11-inv__th-total,
.q11-inv__table > tbody > tr > td.q11-inv__cell-total,
.q11-inv__table > tfoot > tr > td.q11-inv__cell-total {
    position: sticky;
    right: var(--q11-sticky-right-total, 200px);
    z-index: 2;
    background-color: #fff;
}
/* 右 sticky 2: スケジュール 列 — end 列幅を JS が更新 */
.q11-inv__table > thead > tr > th.q11-inv__th-schedule,
.q11-inv__table > tbody > tr > td.q11-inv__cell-schedule,
.q11-inv__table > tfoot > tr > td.q11-inv__cell-schedule {
    position: sticky;
    right: var(--q11-sticky-right-sched, 80px);
    z-index: 2;
    background-color: #fff;
}
/* 右 sticky 3: 解約 列 */
.q11-inv__table > thead > tr > th.q11-inv__th-end,
.q11-inv__table > tbody > tr > td.q11-inv__cell-end {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: #fff;
}
/* 行 hover 時、sticky 列の不透明背景を hover 色に置き換える（普通の cell と統一感） */
.q11-inv__table.table-hover > tbody > tr:hover > td.q11-inv__cell-type,
.q11-inv__table.table-hover > tbody > tr:hover > td.q11-inv__cell-bank-account,
.q11-inv__table.table-hover > tbody > tr:hover > td.q11-inv__cell-account,
.q11-inv__table.table-hover > tbody > tr:hover > td.q11-inv__cell-total,
.q11-inv__table.table-hover > tbody > tr:hover > td.q11-inv__cell-schedule,
.q11-inv__table.table-hover > tbody > tr:hover > td.q11-inv__cell-end {
    background-color: #f5f5f5;
}

/* スケジュール / 解約 セル: per-account の値なので bank header / editor / add
   行では空セル。chip と日付の見た目を整える。 */
.q11-inv__table .q11-inv__cell-schedule,
.q11-inv__table .q11-inv__cell-end {
    text-align: center;
    font-size: 12px;
    color: #455a6e;
    vertical-align: middle;
    white-space: nowrap;
}
.q11-inv__th-balance-group {
    font-weight: 600;
    color: #455a6e;
    background: #eef3f8;
    border-bottom: 1px solid #d6deea;
    /* タイトル + 月セレクタを含むので中央より左寄せの方が自然 */
    text-align: left;
    padding-left: 12px;
}
/* 有価証券ヘッダ行 — マスタボタンを含むので通常の行高に戻し、左寄せでラベル+ボタンが
   左から自然に並ぶようにする */
.q11-inv__th-securities-group {
    font-size: 11px;
    font-weight: 500;
    color: #5a6a7a;
    background: #f4f7fa;
    border-bottom: 1px solid #e1e6ec;
    text-align: left;
    line-height: 1.3;
    padding-left: 12px;
}
.q11-inv__th-securities-label {
    margin-right: 6px;
    color: #455a6e;
}
.q11-inv__th-securities-sub {
    /* セル内の上下 2 段（評価額/うち元本）の意味をここで 1 回だけ明示。
       各セルの placeholder に頼らずヒエラルキーが伝わる。 */
    margin-right: 8px;
    font-size: 10px;
    color: #8a96a3;
    font-weight: 400;
}
.q11-inv__th-securities-group .btn {
    padding: 1px 8px;
    font-size: 10px;
    line-height: 1.4;
}
.q11-inv__table .securities_cell {
    /* table-layout:fixed 下の銘柄列幅。row3 の th がこの幅で各銘柄列を確定する。 */
    width: 120px;
    min-width: 80px;
    max-width: 120px;
    white-space: nowrap;
}
/* ===== 銘柄ヘッダボタン (.securities_edit_btn) =====
   3 段ヘッダ最下段の <th class="securities_cell"> に設置されるマスタ起動ボタン。
   要件:
     - 銘柄名が長くても row 高が膨らみすぎないよう 2 行で打ち切り (line-clamp)
     - th 高は他段との整合性を保つため top 寄せ
     - クリック可能であることが分かるようにホバー時の subtle background / border */
thead .q11-inv__table .securities_cell,
.q11-inv__table thead .securities_cell {
    vertical-align: top;
}
.q11-inv__table .securities_cell .securities_edit_btn {
    /* line-clamp 用に -webkit-box を使う（block 互換でセル幅いっぱい広がる） */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 4px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: left;
    line-height: 1.3;
    font-size: 12px;
    color: inherit;
    cursor: pointer;
    /* th の親で white-space:nowrap が掛かっているので、ボタン内では折返し許可 */
    white-space: normal;
    word-break: break-all;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.q11-inv__table .securities_cell .securities_edit_btn:hover,
.q11-inv__table .securities_cell .securities_edit_btn:focus {
    background: rgba(85, 110, 145, 0.10);
    border-color: rgba(85, 110, 145, 0.32);
    outline: none;
}
.q11-inv__table .securities_cell .securities_edit_btn:active {
    background: rgba(85, 110, 145, 0.16);
}
/* 編集アイコン (lucide pencil) はラベル文字より少し控えめに */
.q11-inv__table .securities_cell .securities_edit_btn [data-lucide] {
    width: 11px;
    height: 11px;
    margin-right: 2px;
    opacity: 0.55;
    vertical-align: -1px;
}
.q11-inv__table .securities_cell .securities_edit_btn:hover [data-lucide] {
    opacity: 0.85;
}
/* placeholder は「値ではない」ことを視覚的に強調（薄色+小さめ）。
   横幅節約のため input 内に placeholder で意味を提示する場面が多いため、
   入力済み値（黒太字）との差をしっかり付けて誤認を防ぐ。
   閲覧モードでは BalancePrincipalPair / view-mode 機構が placeholder を
   "0" 等の本来の値表現として利用するため、italic は外して通常字に。 */
.q11-inv__table input::placeholder {
    color: #b8c0c8;
    font-size: 11px;
    opacity: 1; /* Firefox 既定の opacity を打ち消す */
}
/* trust/MRF 行の 評価額/うち元本 セル：上段が主役、下段（うち元本=.sub_form2）は補足。
   ヘッダ（有価証券（評価額／うち元本））でセル内 2 段の意味を明示しつつ、
   見た目でも「上=主、下=副」と即座に区別できるようにする。 */
.q11-inv__table .securities_ratio .sub_form2 {
    color: #8a96a3;
    font-size: 11px;
    font-style: italic;
}
.q11-inv__table .securities_ratio .sub_form2 input {
    color: #6a7785;
    font-style: italic;
    font-size: 11px;
}
/* 有価証券列の input は省スペース */
.q11-inv__table .securities_ratio input[type=text] {
    width: 68px;
}
.q11-inv__table > tbody > tr.q11-inv__row > td {
    vertical-align: middle;
    padding: 6px 8px;
}
.q11-inv__table > tbody > tr.q11-inv__row:hover > td {
    background-color: #f8fafc;
}
/* fp-univ.css:1399 のグローバル `.table-hover .inputted:hover` (#8cad9e 濃緑 + 白文字) は
   Q11 統一テーブルでは強すぎる（行 hover の #f8fafc から急に濃い緑へジャンプして
   視線が引かれすぎる）。Q11 スコープで一段薄い sage tint に再定義し、
   文字色は default のまま読みやすさを維持する。 */
.q11-inv__table.table-hover > tbody > tr:hover > td.inputted {
    background-color: #d6e6dd !important;
    color: inherit !important;
}
/* editor 開時に AccountTableController._toggleEditor が `scrollIntoView` で
   親行を viewport 上部へ smooth scroll する。ページ上部の wizard nav 等の
   固定ヘッダ領域を避けて、その下に親行が並ぶよう scroll-margin-top を確保。 */
.q11-inv__row {
    scroll-margin-top: 80px;
}

.q11-inv__cell-type,
.q11-inv__cell-bank {
    border-right: 1px solid #eef1f4;
}

/* 所有者セクション見出し行（所有者カラム廃止に伴い、所有者ごとにフル幅の帯を挟む）
   band 内に「+ 銀行 / + 証券会社」の機関追加ボタンを内包するため、左右 2 カラム
   レイアウトを取れるよう flex 化。
   控えめなトーン: 表本体と地続きに見える程度の薄背景＋細い罫線。所有者の縦帯
   (tbody[profile] の左 inset shadow) と組み合わせて領域を示すので、band 単独で
   主張する必要はない。 */
.q11-inv__table > tbody.q11-inv__tbody-owner > tr.q11-inv__owner-section > td {
    background: #f4f7fb;
    border-top: 1px solid #d6deea;
    border-bottom: 1px solid #d6deea;
    padding: 5px 12px;
    font-weight: 500;
    color: #4a5a6e;
}
/* メンバーエリア最下部の追加ボタン群（owner band から footer に移管）。
   「追加先要素の直下」という他画面の慣習に合わせて、bank/trust/DC の最後尾に配置。
   _insertNewInstitutionTbody は新 tbody をこの footer 直前に挿入する。
   bottom padding は次の所有者 owner band との視覚的セパレーションを兼ねて広めに取る。 */
.q11-inv__table > tbody.q11-inv__tbody-member-footer > tr.q11-inv__member-footer-row > td {
    background: #fafbfd;
    border-top: 1px dashed #d6deea;
    border-bottom: 1px solid #c8d4e3;
    padding: 8px 12px 22px;
}
.q11-inv__member-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.q11-inv__member-footer-actions .btn {
    background: #fff;
    border: 1px solid #c9d3df;
    color: #455a6e;
    font-size: 11px;
    padding: 3px 10px;
    line-height: 1.4;
}
.q11-inv__member-footer-actions .btn:hover {
    background: #f0f5fa;
    border-color: #9fb1c5;
}
/* trust 機関配下のインライン追加ボタン群（+ 課税口座 / + NISA(つみたて) / + NISA(成長)）。
   種別軸を 3 ボタンに分割した結果、ボタン同士の間隔を抑え 1 行に納める。 */
.q11-inv__inline-add-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.q11-inv__inline-add-group .btn {
    font-size: 11px;
    padding: 3px 10px;
    line-height: 1.4;
}
/* owner band の「○○に加入」DC 切替ボタン。
   bank/trust 追加ボタン（`.add_field_profile`）と同じ brand-tinted な見た目に揃える。
   `.add_field_profile` クラス自体は global click handler (wizard/index.php) が AJAX POST を
   起動して DC の local kanyu トグルと衝突するため付与できないので、
   ここで `.add_field_profile` のルール群（fp-univ.css:5851 以降）を mirror して当てる。
   未加入時のみ表示、クリックで該当 DC tbody を表示 + editor 展開 + kanyu=1 にする。 */
#wizard .q11-inv__add-dc-btn {
    background-color: var(--brand-light, #eaf2f8) !important;
    border: 1px solid var(--brand-dark, #1F6E63) !important;
    color: var(--brand-dark, #1F6E63) !important;
    font-weight: 600;
    box-shadow: none !important;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
#wizard .q11-inv__add-dc-btn:hover,
#wizard .q11-inv__add-dc-btn:focus-visible {
    background-color: #d4e6e2 !important;
    border-color: var(--brand-dark, #1F6E63) !important;
    color: var(--brand-dark, #1F6E63) !important;
}
#wizard .q11-inv__add-dc-btn:focus-visible {
    outline: none !important;
    box-shadow: var(--focus-ring) !important;
}
#wizard .q11-inv__add-dc-btn:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
#wizard .q11-inv__add-dc-btn:active {
    background-color: #b9d5cf !important;
    border-color: var(--brand-dark, #1F6E63) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}
#wizard .q11-inv__add-dc-btn i {
    color: inherit !important;
}
/* 未加入の DC/iDeCo 行は表から隠す（owner band のボタンが entry point となる）。
   表示切替は kanyu_form の change イベントで行い、DB 状態（kanyu.valid）と
   表の display 状態を一致させる。 */
.q11-inv__tbody-dc--unenrolled {
    display: none;
}
/* 加入/未加入 のドロップダウンは UI からは隠す（POST 対象として DOM には残す）。
   表示状態は「行の display 切替」で表現するため、editor 内のフォームは不要。
   未加入に戻す動作は表側の削除ボタン (.q11-inv__remove-dc-btn) で行う。 */
.q11-inv__dc-kanyu {
    display: none;
}

/* ===== Q11 操作ロック中の視覚表示 =====
   1 つの追加/削除アクションが処理中（refresh 完了 or DC ローカル切替完了）まで
   他の追加/削除ボタンを「使えない」と分かる見た目にする。
   実際の click ブロックは JS の capture-phase listener が担当。 */
.q11-inv.is-q11-locked .q11-inv__member-footer-actions .btn,
.q11-inv.is-q11-locked .q11-inv__inline-add-group .btn,
.q11-inv.is-q11-locked .q11-inv__add-cell .btn,
.q11-inv.is-q11-locked .q11-inv__empty-row-cell .btn,
.q11-inv.is-q11-locked .q11-inv__add-dc-btn,
.q11-inv.is-q11-locked .q11-inv__remove-dc-btn,
.q11-inv.is-q11-locked .q11-inv__row-del .remove_field,
.q11-inv.is-q11-locked .q11-inv__bank-del .remove_field {
    opacity: 0.45;
    cursor: not-allowed;
}
.q11-inv__table > tbody.q11-inv__tbody-owner:first-of-type > tr.q11-inv__owner-section > td {
    border-top: 0;
}
/* 所有者ごとの縦帯：owner band → その所有者の bank/trust/DC tbody の各先頭セル
   左端に inset shadow を入れ、列方向に連なる「この所有者の領域」サイドバーを表現。
   現金行 (.q11-inv__tbody-cash) は profile 属性を持たないので帯は付かない。 */
.q11-inv__table > tbody[profile] > tr:first-child > td:first-child,
.q11-inv__table > tbody[profile] > tr:first-child > th:first-child {
    box-shadow: inset 4px 0 0 #c8d4e3;
}
.q11-inv__cell-cash {
    background-color: color-mix(in srgb, var(--q11-inv-cash) 5%, transparent);
}
/* 口座名カラム ↔ 残高（現金等価）カラム間の縦仕切り。
   - 通常の deposit/MRF 行・cash 行: td.q11-inv__cell-cash の左端
   - 機関ヘッダ行（rowspan の右側 colspan セル）: td.q11-inv__cell-bank-header-empty の左端
   - ヘッダ行の「現金等価」th: th.q11-inv__th-cash の左端
   2px solid #d8dee4 — 計カラムの両端ボーダーと同じスタイルで統一（旧 3px #b8c4d3 は
   強調されすぎだったので、列セパレータ全般を控えめなトーンに揃える）。 */
.q11-inv__table > thead th.q11-inv__th-cash,
.q11-inv__table > tbody > tr > td.q11-inv__cell-cash,
.q11-inv__table > tbody > tr > td.q11-inv__cell-bank-header-empty {
    border-left: 2px solid #d8dee4;
}
/* tfoot 「計」行の cash 合計セル（colspan=3 + cash + securities... + total）。
   class が付いていないので nth-child でターゲット。 */
.q11-inv__table > tfoot > tr > td:nth-child(2) {
    border-left: 2px solid #d8dee4;
}
.q11-inv__table > tfoot > tr > td {
    font-weight: 700;
    font-size: 13px;
    background: #e3eaf3;
    color: #2c3e50;
    border-top: 3px solid #93a4ba;
    border-bottom: 2px solid #93a4ba;
    padding: 8px 8px;
}
/* 右端「計」列も tfoot と同じ強調で「合計の縦・横の交差」を視覚化。
   tbody/tfoot 共通で適用したいので q11-inv__cell-total を直接スタイリング。
   両端 (left + right) にボーダーを引き、引き出し開始 / 解約 列との境界も明示。
   `#wizard` 冠で specificity を上げ、wizard.css の包括 rule (`#wizard table td`
   系) に確実に勝つ。横スクロール時に sticky 列の右ボーダーが消えるように見える
   のは、この override が効いていなかったため弱い 0.8px が他セルの border と
   合算されてかすれていた。 */
#wizard .q11-inv__table .q11-inv__cell-total {
    font-weight: 600;
    background: #f4f7fa;
    border-left: 2px solid #d8dee4;
    border-right: 2px solid #d8dee4;
}
/* 計列 thead もボディと同じ両端ボーダーで連続感を出す。
   wizard.css の `#wizard table th` (1,1,2) 包括 rule に勝つため、
   `#wizard table.q11-inv__table` 冠で specificity を 1,2,4 に上げる。 */
#wizard table.q11-inv__table > thead > tr > th.q11-inv__th-total {
    border-left: 2px solid #d8dee4;
    border-right: 2px solid #d8dee4;
}
/* 種別列右（種別 ↔ 機関口座 の境界）も計列と同じ 2px gray スタイルに揃える。
   wizard.css の包括 rule (`border: solid 1px var(--brand-border, #d8dee4)` —
   青系 1px) を上書きして「他の主要セパレータ」と統一感を出す。 */
#wizard table.q11-inv__table > thead > tr > th.q11-inv__th-type {
    border-right: 2px solid #d8dee4;
}
.q11-inv__table > tfoot > tr > td.q11-inv__cell-total {
    /* tfoot 末尾セル（grand total）は更にコントラストを上げる */
    background: #eaf0f5;
}
/* editor 行（行内インライン展開）が panel_item を抱えている場合に panel-heading 内に
   表示される従来の total_balance バッジは、テーブル右端の「計」列と重複するので非表示。
   asset/saving.php や asset/mrf.php の view を直接削るのは他用途への影響を避けるため、
   q11-inv 文脈にスコープして CSS で隠す。
   `.Account_wizard .panel-title .total_balance { display: inline-flex }` と
   specificity が同点だと負ける（cascade 順序差）ので 4 クラス指定で勝つ。 */
.q11-inv .q11-inv__editor-cell .panel-heading .total_balance {
    display: none;
}

/* --- owner cell --- */
.q11-inv__owner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #455a6e;
}
/* user_icon のデフォルトは 80px。Q11 内の所有者ラベルは行ごとに 1 つ並ぶので
   小さめ（20px）に。ヘッダ上部の filter checkbox / add-owner はクリック領域が
   広い方が押しやすいので 28px のまま残す。 */
.q11-inv__owner .user_icon {
    height: 20px !important;
    width: auto !important;
    vertical-align: middle;
    margin: 0 2px 0 0;
}
.q11-inv__filter-check .user_icon,
.q11-inv__add-owner .user_icon {
    height: 28px !important;
    width: auto !important;
    vertical-align: middle;
    margin: 0 2px 0 0;
}

/* DC/iDeCo の「未加入に戻す」削除ボタン。
   銀行/証券 (.remove_field) と見た目を揃える（赤系 #c0392b、opacity 0.6 ベース）。
   wizard.css の `#wizard td .remove_field` と同等の指定をクラス独自で適用。 */
.q11-inv__remove-dc-btn {
    color: #c0392b !important;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.q11-inv__remove-dc-btn:hover,
.q11-inv__remove-dc-btn:focus {
    opacity: 1;
    color: red !important;
    text-decoration: none;
}

/* 削除アイコンのサイズを他画面 (panel-heading 24px) と揃える。
   Delete_btn::render が <i style="width:2em;height:2em"> を生成し、lucide で
   SVG 化された後も inline style でサイズが固定されてしまう。
   #wizard .panel-heading .remove_field svg は 24px に上書き済みだが、Q11 の
   行内削除（td .remove_field）は override が無く 32px (=2em) のままだった。
   Q11 専用クラスに絞って 24px に揃える（他画面の `td .remove_field` は据え置き）。 */
.q11-inv__row-del .delete-icon,
.q11-inv__bank-del .delete-icon,
.q11-inv__remove-dc-btn .delete-icon {
    width: 24px !important;
    height: 24px !important;
}

/* --- 公的年金セクション（Q3 ①）の階層表示 ---
   「１．公的年金」h5 配下の「年金加入実績 / 受給設定 / 年金分析」を視覚的に
   1 段下げて、後続の「２．小規模企業共済」「３．付加年金…」とトップレベル
   の対比が出るようにする。 */
.wiz-public-pension__body {
    padding-left: 14px;
    border-left: 3px solid #e3e8ef;
    margin: 4px 0 44px;
}
.wiz-public-pension__subtitle {
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
    margin: 18px 0 8px;
    padding: 4px 0 4px 8px;
    border-left: 3px solid #4a90a4;
}
/* 任意上乗せ年金（小規模共済 / 付加年金）の各セクションの下余白。
   公的年金 body の margin-bottom と揃え、トップレベルセクション間の
   呼吸を確保する。 */
.profile_pension_area > .wiz-extra-pension-section {
    margin-bottom: 28px;
}

/* --- 掛金中心の任意上乗せ年金セクション（小規模企業共済 / 付加年金=国民年金基金） ---
   Q3 年金タブ（pension/tab.php）配下。`q11-` プレフィックスを使わない自己完結スタイルで、
   profile_pension_area 内に panel-default + kanyu_form トグルの素直な構造で並ぶ。 */
.extra-pension-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.extra-pension-list__group {
    display: flex;
    flex-direction: column;
}
.extra-pension-list__profile-head {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #455a6e;
    padding: 0 4px;
    margin-bottom: 4px;
}
.extra-pension-list__profile-head .user_icon {
    height: 20px !important;
    width: auto !important;
    vertical-align: middle;
}
.extra-pension-list__profile-name {
    line-height: 1;
}
.extra-pension-list__items > .schedule + .schedule {
    margin-top: 4px;
}
/* extra-pension-item: panel-* と組み合わせる Bootstrap panel ラッパー。
   開閉トグルは廃止し、加入時は body 常時開放、未加入時は body を非表示にする。
   panel-heading のテキスト色は global panel-heading 規則に従う。 */
.extra-pension-item .panel-heading {
    padding: 6px 10px;
}
.extra-pension-item .panel-title {
    font-size: 13px;
    line-height: 1.4;
}
.extra-pension-item .panel-body {
    padding: 8px 10px;
}

/* --- type badge: 背景＋文字色＋アイコン＋テキストの 4 つで type を表現するチップ。
   旧仕様の左 3px カラー帯は撤去（情報冗長性を減らし、アクセントは「状態」専用に集約）。 */
.q11-inv__type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
}
.q11-inv__type-badge[data-type="cash"]  { color: var(--q11-inv-cash);    background: color-mix(in srgb, var(--q11-inv-cash) 12%, transparent); }
.q11-inv__type-badge[data-type="bank"]  { color: var(--q11-inv-bank);    background: color-mix(in srgb, var(--q11-inv-bank) 12%, transparent); }
.q11-inv__type-badge[data-type="trust"] { color: var(--q11-inv-trust);   background: color-mix(in srgb, var(--q11-inv-trust) 12%, transparent); }
.q11-inv__type-badge[data-type="dc"]    { color: var(--q11-inv-pension); background: color-mix(in srgb, var(--q11-inv-pension) 12%, transparent); }
.q11-inv__type-icon {
    width: 12px;
    height: 12px;
}

/* 口座未登録 (empty bank/trust) placeholder row */
.q11-inv__empty-row-cell {
    color: #8ca0b3;
    font-size: 12px;
    background: repeating-linear-gradient(
        135deg,
        #fafbfc,
        #fafbfc 4px,
        #f4f6f8 4px,
        #f4f6f8 8px
    );
}
.q11-inv__empty-note {
    display: block;
    font-style: italic;
    margin-bottom: 4px;
}

.q11-inv__rate {
    display: block;
    font-size: 11px;
    color: #8ca0b3;
    margin-top: 2px;
    white-space: nowrap;
}
.q11-inv__rate > span {
    display: inline;
    white-space: nowrap;
}
.q11-inv__currency-note {
    display: block;
    font-size: 10px;
    color: #b0b8c0;
    margin-top: 2px;
}
/* 閲覧モードでは編集者向けの注記なので非表示 */
#wizard .q11-inv.is-view .q11-inv__currency-note {
    display: none !important;
}
.q11-inv__cell-disabled {
    background: repeating-linear-gradient(
        135deg,
        #f4f6f8,
        #f4f6f8 4px,
        #eef1f4 4px,
        #eef1f4 8px
    );
}

/* --- 追加セクション --- */
.q11-inv__add-section {
    padding: 12px 16px 16px;
    border-top: 1px solid #eef1f4;
    background: #fbfcfd;
}
.q11-inv__add-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #5a6a7a;
    margin-bottom: 10px;
}
.q11-inv__add-row {
    margin-bottom: 8px;
}
.q11-inv__add-row:last-child {
    margin-bottom: 0;
}
.q11-inv__add-owner {
    font-size: 12px;
    font-weight: 500;
    color: #455a6e;
    margin-bottom: 4px;
}

/* --- 行インライン展開 (Phase B) --- */
/* ソートハンドル（行頭、上下ドラッグ） */
.q11-inv__sort-handle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    color: #93a3b8;
    cursor: ns-resize;
}
.q11-inv__sort-handle .sort-handle {
    width: 14px;
    height: 14px;
}
.q11-inv__sort-handle:hover { color: #5a6a7a; }

/* 口座名クリックで editor 開閉。表側で唯一のクリック可能領域なので、
   pill 状のホバー/active 背景でアフォーダンスを強調する。 */
.q11-inv__account-toggle {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background-color 0.12s ease;
}
.q11-inv__account-toggle:hover {
    background: #eaf1f8;
}
/* 展開中は薄く着色して「今開いている口座」状態を継続表示。
   親行の `.is-expanded` で type/account 列が薄く色付けされる効果と組み合わせて
   「この行を開いている」が viewport 内で常に読める。 */
.q11-inv__account-toggle[aria-expanded="true"] {
    background: #dbe5f0;
}
.q11-inv__account-toggle[aria-expanded="true"]:hover {
    background: #cfdcec;
}
.q11-inv__account-toggle:hover .q11-inv__expand-indicator {
    transform: translateX(2px);
    color: #2a5b8e;
}
.q11-inv__account-toggle[aria-expanded="true"]:hover .q11-inv__expand-indicator {
    transform: rotate(90deg) translateX(2px);
}
.q11-inv__account-toggle:focus { outline: 2px solid #b8c5d8; outline-offset: 1px; }
.q11-inv__expand-indicator {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: #5a6a7a;
    transition: transform 0.15s ease, color 0.12s ease;
}
.q11-inv__account-toggle[aria-expanded="true"] .q11-inv__expand-indicator {
    transform: rotate(90deg);
}

/* B3: 親行が is-expanded のとき、親行と editor 行の境界 border を消して
   「同じブロック」に見せる。親 row の下 border / editor cell の上 border を撤去。 */
.q11-inv__table > tbody > tr.q11-inv__row.is-expanded > td {
    border-bottom: 0;
}
.q11-inv__row.is-expanded + .q11-inv__editor-row > td.q11-inv__editor-cell {
    border-top: 0;
}

.q11-inv__editor-row > td.q11-inv__editor-cell {
    /* editor cell は背面の neutral 領域。editor content (.q11-inv__editor-content)
       が中央に「白いパネル」として乗る形に。
       親行の縦ガイド線（box-shadow inset 4px）はそのまま継続させ、
       editor は親行配下の詳細設定領域として認識させる。
       padding は内側 sticky child (.q11-inv__editor-cell > *) に移管。td 側に
       padding を残すと sticky child の natural 位置が padding 分内側にずれ、
       width:scrollW-typeColW でも scroll container の右端を padding 分超過し、
       overflow-x クリップで右側コンテンツ (例: 投資逆算ボタン) が見切れる。 */
    padding: 0;
    background: #e3eaf3 !important;  /* table-hover による上書きを防ぐ */
    box-shadow: inset 4px 0 0 var(--q11-inv-cash);
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #c8d4e3;
    position: relative;
}
/* table-hover の tr:hover が editor 行の背景を変えるのを防ぐ */
.q11-inv__table.table-hover > tbody > tr.q11-inv__editor-row:hover > td,
.q11-inv__table.table-hover > tbody > tr.q11-inv__editor-row:hover > td.q11-inv__editor-cell {
    background-color: #e3eaf3 !important;
}
.q11-inv__editor-row:hover { background: transparent !important; }
/* 計列の spacer cell（deposit / MRF 行で total を持たない代わりの empty cell）
   bank header の total cell との連続性を保つため、左右 border は計列の標準と
   同じ #d8dee4 を当てる。 */
.q11-inv__table > tbody > tr > td.q11-inv__cell-total-spacer {
    background: #f4f7fa;
}
/* editor 行の左端に種別カラーのバー。
   td に inset box-shadow を乗せても、内側の `.q11-inv__editor-content`（白パネル、
   sticky で td 全幅を覆う）に隠されるため、白パネル自身に inset shadow を付ける。
   既存の panel drop-shadow と多重指定で combined。
   DC は wrapper が `.schedule`（transparent）なので td 側の rule で透過表示できる。 */
.q11-inv__tbody-bank .q11-inv__editor-row .q11-inv__editor-content {
    box-shadow: inset 4px 0 0 var(--q11-inv-bank), 0 1px 2px rgba(60, 78, 102, 0.05);
}
.q11-inv__tbody-trust .q11-inv__editor-row .q11-inv__editor-content {
    box-shadow: inset 4px 0 0 var(--q11-inv-trust), 0 1px 2px rgba(60, 78, 102, 0.05);
}
.q11-inv__tbody-dc .q11-inv__editor-row .q11-inv__editor-content {
    box-shadow: inset 4px 0 0 var(--q11-inv-pension), 0 1px 2px rgba(60, 78, 102, 0.05);
}
.q11-inv__editor-row:hover { background: transparent; }
/* editor 行の td は colspan=N+5 で type col 以外の全カラム (~table 全幅 - 72px)
   を覆う。table が viewport より広い時、editor は td 自然位置 (x=type col 右端)
   から table 右端まで伸びてしまい、右側が viewport から見切れる。
   editor cell の直接の child を position:sticky で type col の右に固定し、
   width を viewport - type col 分に制限して常に visible 領域内に収める。
   `--q11-sticky-left-bank` は AccountTableController が type col 幅で書き出す
   (StickyCols / フィルタ再分配で更新済)。`--q11-scroll-cw` は scroll container の
   visible width (`.q11-inv__scroll` の clientWidth と viewport 交差の小さい方)。
   !important は third-party CSS による width 上書き防止。 */
.q11-inv__editor-cell > * {
    position: sticky !important;
    left: var(--q11-sticky-left-bank, 72px) !important;
    width: calc(var(--q11-scroll-cw, 100%) - var(--q11-sticky-left-bank, 72px)) !important;
    max-width: 100% !important;
    box-sizing: border-box;
    /* td から移管した内側 padding (上記 .q11-inv__editor-cell コメント参照) */
    padding: 12px 14px 14px 32px;
}
.q11-inv__editor-cell .panel { margin-bottom: 0; }
.q11-inv__editor-cell .panel-group { margin-bottom: 0; }
/* editor 側の削除ボタンは表側に移動済み。panel-heading の pull-right（= delete_btn）を非表示 */
.q11-inv__editor-cell .panel-heading .pull-right { display: none; }

/* --- 新 editor トーン（saving.php / mrf.php からは panel chrome 撤去済み）---
   親行から下りた子コンテンツとして読めるよう、Q11 の variable system に揃えた
   セクション区切り + フィールドグリッド。 */
/* editor content = 白いパネル（card 風）。editor cell の背景 (#e3eaf3) の上に
   乗ることで「行の詳細設定パネル」として明確に分離する。 */
.q11-inv__editor-content {
    background: #ffffff;
    border: 1px solid #d6deea;
    padding: 12px 18px 16px;
    box-shadow: 0 1px 2px rgba(60, 78, 102, 0.05);
}
.q11-inv__editor-content > input[type="hidden"] { display: none; }
/* DC editor は `.schedule` / `.q11-inv__dc-body` wrapper を経由する。これらは
   透過 / padding 0 で、内側の `.q11-inv__editor-content` がパネルとして機能。 */
.q11-inv__editor-cell .schedule,
.q11-inv__editor-cell .q11-inv__dc-body {
    background: transparent;
    padding: 0;
    margin: 0;
}
.q11-inv__editor-section {
    padding: 16px 0 18px;
}
.q11-inv__editor-section:first-child {
    padding-top: 4px;
}
.q11-inv__editor-section:last-child {
    padding-bottom: 6px;
}
.q11-inv__editor-section + .q11-inv__editor-section {
    border-top: 1px solid #d6deea;
}
/* section title はフィールドラベル (12px) より大きく、editor 内の階層を作る。 */
.q11-inv__editor-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #344a3d;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.4;
}
.q11-inv__editor-section-title small {
    font-weight: 400;
    font-size: 11px;
    color: #8a96a3;
    margin-left: 0;
}
.q11-inv__editor-section-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.q11-inv__editor-section-note {
    display: block;
    font-size: 11px;
    color: #6a7a8a;
    margin: 0 0 8px;
}
.q11-inv__editor-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
}
.q11-inv__editor-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.q11-inv__editor-field-label {
    font-size: 12px;
    font-weight: 600;
    color: #455a6e;
    white-space: nowrap;
}
.q11-inv__editor-actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #d6deea;
}
/* DC / iDeCo editor の wrapper（dc_tbody.php の `<div class="schedule"> > <div class="q11-inv__dc-body">`）
   は背景・padding を持たない（透過）。bank/trust editor との見た目の違いは
   inner table（DC operation / 受給設定 / iDeCo 加入リスト）が Bootstrap の
   `table-bordered` / `table-condensed` で白背景＋枠線を持っていることに起因する。
   inner table の背景を透過にして editor 全体を #f6f8fb トーンに統一。 */
.q11-inv__editor-content .table,
.q11-inv__editor-content table.table-condensed,
.q11-inv__editor-content table.table-bordered,
.q11-inv__editor-content table.table-hover {
    background-color: transparent;
    margin-bottom: 6px;
}
.q11-inv__editor-content .table > tbody > tr,
.q11-inv__editor-content .table > thead > tr,
.q11-inv__editor-content .table > tfoot > tr {
    background-color: transparent;
}
.q11-inv__editor-content .table > tbody > tr > td,
.q11-inv__editor-content .table > tbody > tr > th,
.q11-inv__editor-content .table > thead > tr > td,
.q11-inv__editor-content .table > thead > tr > th {
    background-color: transparent;
}
/* table-bordered の border 色を editor トーンに */
.q11-inv__editor-content table.table-bordered,
.q11-inv__editor-content table.table-bordered > tbody > tr > td,
.q11-inv__editor-content table.table-bordered > tbody > tr > th,
.q11-inv__editor-content table.table-bordered > thead > tr > td,
.q11-inv__editor-content table.table-bordered > thead > tr > th {
    border-color: #d6deea;
}
/* table-hover の hover 色を editor トーンに */
.q11-inv__editor-content .table-hover > tbody > tr:hover > td,
.q11-inv__editor-content .table-hover > tbody > tr:hover > th {
    background-color: rgba(216, 226, 238, 0.5);
}

.q11-inv__kanyu-note {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    color: #8a96a3;
    background: #eef1f4;
    border-radius: 3px;
}
.q11-inv__row[data-kanyu="0"] .q11-inv__cell-cash,
.q11-inv__row[data-kanyu="0"] td[securities] {
    opacity: 0.45;
}

/* rowspan された種別/計セルは縦中央ではなく上揃えで先頭口座と高さを揃える */
.q11-inv__table > tbody.q11-inv__tbody-bank > tr > td.q11-inv__cell-type,
.q11-inv__table > tbody.q11-inv__tbody-bank > tr > td.q11-inv__cell-total,
.q11-inv__table > tbody.q11-inv__tbody-trust > tr > td.q11-inv__cell-type,
.q11-inv__table > tbody.q11-inv__tbody-trust > tr > td.q11-inv__cell-total,
.q11-inv__table > tbody.q11-inv__tbody-dc > tr > td.q11-inv__cell-type,
.q11-inv__table > tbody.q11-inv__tbody-dc > tr > td.q11-inv__cell-total {
    vertical-align: top;
    padding-top: 10px;
}

/* ===== 銀行/証券会社ヘッダ行 =====
   機関名 + 口座名 カラムを colspan=2 で統合し、各 deposit/MRF も同じ幅で表示。
   ヘッダ行は機関名のみのコンパクトな帯（個別口座より一段「親」感を出す）。 */
.q11-inv__row--bank-header > td {
    background: #fafbfd;
    border-bottom: 1px solid #e6ecf2;
    padding-top: 6px;
    padding-bottom: 6px;
}
.q11-inv__row--bank-header > td.q11-inv__cell-bank-account {
    /* 機関名 input + 削除ボタンが入るセル（機関/口座統一カラム） */
    padding: 4px 8px;
}
.q11-inv__cell-bank-header-empty {
    /* 機関名ヘッダ行の右側（cash + securities 領域）。空にしておく */
    background: #fafbfd;
    border-bottom: 1px solid #e6ecf2;
}
/* 機関名行（bank/trust ヘッダ）の機関/口座統一カラム。
   旧仕様では type 連動色の左ボーダーを常時表示していたが、同じ行の type badge が
   既に色＋テキストで type を表現しており冗長。常時アクセントは badge と
   editor-cell（state）のみに絞り、ここではボーダー無し。 */
.q11-inv__cell-bank-account {
    /* 常時 border-left は撤去。hover / is-expanded 時のみ box-shadow で動的表現。 */
}
/* 各 deposit/MRF の口座名行は機関名行の配下と分かるよう左にインデント。
   chevron 含めた toggle ターゲットを 1.4em 内側に押し下げて階層を表現する。 */
.q11-inv__cell-account {
    padding-left: 22px;
}

/* ===== 行の状態表現（hover / editor 開閉）======================
   常時 type 色の border-left は不要（badge で表現済み）なので、左端アクセントを
   「状態の合図」に再配置する。
   - hover: 灰色で薄め — 注目している行の視覚フィードバック
   - is-expanded: type 連動色 — editor が開いている行の identifier
   配置先は口座名/機関名カラムの左端（type 列は rowspan で個別行に紐づかないため）。
   幅は editor 行の左帯と同じ 4px に揃え、parent 行 → editor 行で縦ラインが連続して
   見えるようにする。 */
.q11-inv__row:hover > .q11-inv__cell-account,
.q11-inv__row:hover > .q11-inv__cell-bank-account {
    box-shadow: inset 4px 0 0 rgba(60, 78, 102, 0.16);
}
.q11-inv__tbody-cash .q11-inv__row.is-expanded > .q11-inv__cell-bank-account,
.q11-inv__tbody-cash .q11-inv__row.is-expanded > .q11-inv__cell-account {
    box-shadow: inset 4px 0 0 var(--q11-inv-cash);
}
.q11-inv__tbody-bank .q11-inv__row.is-expanded > .q11-inv__cell-bank-account,
.q11-inv__tbody-bank .q11-inv__row.is-expanded > .q11-inv__cell-account {
    box-shadow: inset 4px 0 0 var(--q11-inv-bank);
}
.q11-inv__tbody-trust .q11-inv__row.is-expanded > .q11-inv__cell-bank-account,
.q11-inv__tbody-trust .q11-inv__row.is-expanded > .q11-inv__cell-account {
    box-shadow: inset 4px 0 0 var(--q11-inv-trust);
}
.q11-inv__tbody-dc .q11-inv__row.is-expanded > .q11-inv__cell-bank-account,
.q11-inv__tbody-dc .q11-inv__row.is-expanded > .q11-inv__cell-account {
    box-shadow: inset 4px 0 0 var(--q11-inv-pension);
}
.q11-inv__bank-head {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.q11-inv__bank-input {
    /* 機関名カラム+口座名カラムを colspan=2 で統合した結果、cell 幅が
       広がったので input は flex で 100% に伸ばす（max-width 撤去）。 */
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 3px 6px;
    font-size: 12px;
    height: 26px;
}
.q11-inv__bank-del {
    flex: 0 0 auto;
    margin-left: auto; /* 他のフォーム同様、削除ボタンはセル右端へ */
}
.q11-inv__bank-del .btn {
    padding: 2px 6px;
}

/* --- 現金等価セル（残高 + 利息情報） ---
   flex で「金額 input | 単位 select/span」を右揃え。input と単位それぞれの幅を
   固定して、行間でも縦のラインが揃うように。 */
.q11-inv__cash-amount {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
    width: 100%;
}
.q11-inv__cash-amount input.balance,
.q11-inv__cash-amount input.cash {
    width: 80px !important;
    text-align: right;
    flex: 0 0 auto;
}
.q11-inv__cash-amount select.currency_form,
.q11-inv__cash-amount span.q11-inv__cash-unit,
.q11-inv__cash-amount > span[currency] {
    flex: 0 0 72px;
    width: 72px;
    min-width: 72px;
    text-align: left;
}
.q11-inv__cell-cash .q11-inv__rate {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #8a96a3;
    white-space: nowrap;
}
/* 現金等価ヘッダの subtitle「（預金・元本保証型商品）」— 通常タイトルより小さく muted */
.q11-inv__th-cash-sub {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #8a96a3;
    line-height: 1.3;
    margin-top: 2px;
    white-space: nowrap;
}

/* --- 口座行アクション（chevron + info + delete を口座名セル内で横並び） --- */
.q11-inv__row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.q11-inv__account-info {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
/* trust 行 (NISA / 課税口座) は badge ("新NISA(つみたて投資枠)" 等) が長くなる
   ことがあるため、口座名 input は次行に wrap させて 2 行レイアウトに。
   grid で col1=chevron, col2=badge/input にして、badge と input の左端を
   縦に揃える。 */
[data-type="trust"] .q11-inv__account-info {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 6px;
    row-gap: 3px;
    align-items: center;
    white-space: normal;
}
[data-type="trust"] .q11-inv__account-info > .q11-inv__expand-indicator {
    grid-column: 1;
    grid-row: 1;
}
[data-type="trust"] .q11-inv__account-info > .label {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
}
[data-type="trust"] .q11-inv__account-info > .q11-inv__account-name-input {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
}
.q11-inv__row-del {
    flex: 0 0 auto;
}
.q11-inv__row-del .btn {
    padding: 1px 5px;
    font-size: 11px;
}
/* スケジュール件数 chip — editor 内に埋もれた拠出/売却スケジュールが行内に
   見えない問題への対応。設定済みの行に「📅 拠出 2 / 売却 1」のような件数だけ
   出して、編集モード時のみ click で editor を開く動線を提供する。閲覧モードでは
   情報提示のみ（クリックは効かない）。chip は専用の `q11-inv__cell-schedule`
   カラムに配置（口座名カラムを圧迫しないため）。 */
.q11-inv__schedule-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    line-height: 1.4;
    padding: 1px 8px;
    border-radius: 10px;
    background: #eef3f8;
    color: #455a6e;
    border: 1px solid #d6deea;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.q11-inv__schedule-chip:hover {
    background: #dde6f1;
    border-color: #b9c6d6;
}
.q11-inv__schedule-chip-icon {
    width: 11px;
    height: 11px;
}
/* 閲覧モードでは pointer 化せず、情報提示のみ（hover で title tooltip は出る） */
.q11-inv.is-view .q11-inv__schedule-chip {
    cursor: default;
}

/* 引き出し可能年月 inline 表示 — 旧 q11-inv__cell-start 列を廃止して
   現金等価セル内 small text に格納。
   値が無いときは label ごと隠す (`:has(:empty)` で span の空判定)。値があれば
   "引出可能 YYYY/MM～" の形で「この時点以降」を示す ～ を末尾に付ける（CSS
   ::after で生成、synchronizer の `.html(text)` 上書きで消えないようにするため
   pseudo-element 経由）。
   内部 <span name> はラベルと同じ行に出すため明示的に inline 指定（他の所で
   `td span[name]` 等が block 化されている場合の保険）。 */
.q11-inv__cash-available {
    display: block;
    font-size: 10px;
    color: #8a96a3;
    margin-top: 2px;
    white-space: nowrap;
}
.q11-inv__cash-available:has(.q11-inv__cash-available-value:empty) {
    display: none;
}
.q11-inv__cash-available-value {
    display: inline;
}
.q11-inv__cash-available-value:not(:empty)::after {
    content: "～";
}

/* gear ボタン (q11-inv__row-edit-btn) — editor toggle の primary affordance。
   削除ボタンの隣、口座名 input より右に配置。chevron は state indicator として
   左に残置。 */
.q11-inv__row-edit-btn {
    flex: 0 0 auto;
    margin-left: auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6a7a8a;
    cursor: pointer;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.q11-inv__row-edit-btn:hover {
    background: #e3eaf3;
    color: #344a3d;
}
.q11-inv__row-edit-btn[aria-expanded="true"] {
    background: #d8e2ee;
    color: #344a3d;
}
.q11-inv__row-edit-btn .lucide,
.q11-inv__row-edit-btn svg {
    width: 16px;
    height: 16px;
}
.q11-inv__row-del + .q11-inv__row-edit-btn,
.q11-inv__row-edit-btn + .q11-inv__row-del {
    margin-left: 0;
}
/* gear ボタン直前の row-del は margin-left:auto で右寄せ確保不要に */
.q11-inv__row-edit-btn ~ .q11-inv__row-del {
    margin-left: 4px;
}
/* 閲覧モードでは gear ボタンも非表示（編集系 UI なので） */
#wizard .q11-inv.is-view .q11-inv__row-edit-btn {
    display: none !important;
}
/* 口座名 input — 機関名の `q11-inv__bank-input` と同じトーン。flex で残り幅を埋める。
   editor 行内（詳細設定）でのみ使われ、表側の口座名は `.q11-inv__account-name-display`
   span で表示する（クリックで editor を開く動線。有価証券マスタと統一）。 */
.q11-inv__account-name-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #dae8e0;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 13px;
    font-weight: normal;
    background: #fff;
}
/* editor 先頭の口座名行 — section title より上、ラベル無しで input をタイトル的に置く。
   セクション枠の外側に出すことで「この editor 全体は この口座 の設定」と読ませる。
   幅は表側の現金等価カラム (180px) と揃える程度に抑え、editor 全幅まで伸ばさない
   （タイトルとして読ませる目的なのでフォーム幅は控えめでよい）。 */
.q11-inv__editor-name-row {
    margin: 0 0 6px;
}
.q11-inv__editor-name-row .q11-inv__account-name-input {
    width: 220px;
    max-width: 100%;
    font-size: 15px;
    font-weight: 700;
    padding: 4px 8px;
    color: #344a3d;
}
/* 口座名表示 span（表側）— 親 `.q11-inv__account-toggle` の pill 背景で
   クリック可能性を示すので、span 自体は装飾せず文字だけを綺麗に置く。
   空のときは placeholder を薄字で表示。 */
.q11-inv__account-name-display {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.q11-inv__account-name-display:empty::before {
    content: "口座名未設定";
    opacity: .45;
    font-style: italic;
}
/* trust の grid layout 上では input と同じ位置（col2 / row2）に配置 */
[data-type="trust"] .q11-inv__account-info > .q11-inv__account-name-display {
    grid-column: 2;
    grid-row: 2;
}

/* --- 各金融機関 tbody 末尾の「口座を追加」行 --- */
.q11-inv__add-row-inline > td.q11-inv__add-cell {
    padding: 6px 10px;
    background: #fafbfd;
    border-top: 1px dashed #d6deea;
    text-align: left;
}
.q11-inv__add-row-inline:hover > td.q11-inv__add-cell {
    background: #f4f7fb;
}
.q11-inv__add-cell .btn {
    padding: 3px 10px;
    font-size: 12px;
}

/* --- 閲覧/編集モード slider switch（section-level）---
   `.q11-inv` の外に置く section header bar。テーブル制御と分離して
   セクション全体の状態を示す。 */
/* セクション見出し「１．口座設定」と編集/閲覧トグルを 1 行に並べる。
   Account_wizard::get_master_form の heredoc が emit する：
     <div class="wiz-section-title q11-inv-section-title">
       <span class="q11-inv-section-title__label">１．口座設定</span>
       <label class="q11-inv__mode-switch">…</label>
     </div>
   見出し行に重ねることでテーブル直前の専用バーを撤去できる。 */
.wiz-section-title.q11-inv-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.q11-inv-section-title__label {
    flex: 1 1 auto;
}
/* 見出し直後に並ぶ注釈。例:「１．口座設定<small>初期残高と運用スケジュール…</small>」
   見出し本文より一段抑えたトーンで、本文と区別しつつ視認性は維持する。 */
.q11-inv-section-title__note {
    margin-left: 8px;
    font-size: 12px;
    font-weight: normal;
    color: #6c7a89;
}
/* slider switch 本体：checkbox を視覚的に隠して track/thumb で表現する。
   両ラベル（編集 / 閲覧）が常に見え、現在の側を thumb の位置で示す。 */
.q11-inv__mode-switch {
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.q11-inv__mode-switch-input {
    /* 視覚的に隠すが focus は保つ */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.q11-inv__mode-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #e3eaf3;
    border: 1px solid #c8d4e3;
    border-radius: 999px;
    padding: 0;
    height: 28px;
    overflow: hidden;
    transition: background-color 0.18s ease;
}
.q11-inv__mode-switch-label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: #6a7a8a;
    line-height: 26px;
    transition: color 0.18s ease;
    min-width: 72px;
}
.q11-inv__mode-switch-label .lucide,
.q11-inv__mode-switch-label svg {
    width: 13px;
    height: 13px;
}
/* thumb：track 内をスライドする active 表示。デフォルト（unchecked = 編集モード）は左側 */
.q11-inv__mode-switch-thumb {
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 2px;
    width: calc(50% - 2px);
    height: calc(100% - 4px);
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(60, 78, 102, 0.2);
    transition: transform 0.18s ease, background-color 0.18s ease;
}
/* checked = 閲覧モード → thumb 右側 */
.q11-inv__mode-switch-input:checked ~ .q11-inv__mode-switch-track .q11-inv__mode-switch-thumb {
    transform: translateX(100%);
}
/* active 側のラベル色を強調 */
.q11-inv__mode-switch-input:not(:checked) ~ .q11-inv__mode-switch-track .q11-inv__mode-switch-label--edit {
    color: #344a3d;
}
.q11-inv__mode-switch-input:checked ~ .q11-inv__mode-switch-track .q11-inv__mode-switch-label--view {
    color: #344a3d;
}
/* focus-visible で track にアウトラインを出してアクセシビリティ確保 */
.q11-inv__mode-switch-input:focus-visible ~ .q11-inv__mode-switch-track {
    box-shadow: 0 0 0 2px rgba(60, 134, 207, 0.3);
}
.q11-inv__mode-switch:hover .q11-inv__mode-switch-track {
    background: #d8e2ee;
}

/* --- 閲覧モード（is-view）---
   編集系 UI（追加/削除/chevron/editor 行）を CSS のみで隠し、input/select は
   POST 値として残しつつ「編集不可テキスト風」に整える。HTML 構造・name 属性は
   両モードで同一（toggle は class 付替えのみ）。 */
.q11-inv.is-view .add_field_profile,
.q11-inv.is-view .q11-inv__add-dc-btn,
.q11-inv.is-view .remove_field,
.q11-inv.is-view .q11-inv__remove-dc-btn,
.q11-inv.is-view .q11-inv__bank-del,
.q11-inv.is-view .q11-inv__row-del,
.q11-inv.is-view .q11-inv__expand-indicator,
.q11-inv.is-view .q11-inv__editor-row,
.q11-inv.is-view .q11-inv__add-row-inline,
.q11-inv.is-view .q11-inv__inline-add-group,
.q11-inv.is-view .q11-inv__tbody-member-footer {
    display: none !important;
}
/* 入力欄は border/background を消してテキスト風に。値は POST されるので残す。
   範囲は `.q11-inv__table` 内に限定（toggle ボタンや master 編集 modal の
   form を巻き込まない）。
   セレクタに `#wizard` を前置して特異度を ID + クラスに上げてあるのは、
   wizard.css:124 の `#wizard input { background-color: lightgoldenrodyellow !important; }`
   と fp-univ.css:1311 の `input:focus { background-color: #fdffbb; }` を
   両方確実に override するため。!important は td.inputted (aliceblue) や
   form-control 等の他ルールも一括で潰すために併用。 */
#wizard .q11-inv.is-view .q11-inv__table input,
#wizard .q11-inv.is-view .q11-inv__table input:focus,
#wizard .q11-inv.is-view .q11-inv__table input:hover {
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 2px !important;
    pointer-events: none !important;
    color: inherit !important;
    cursor: default !important;
    outline: 0 !important;
}
#wizard .q11-inv.is-view .q11-inv__table select,
#wizard .q11-inv.is-view .q11-inv__table select:focus,
#wizard .q11-inv.is-view .q11-inv__table select:hover {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 2px !important;
    pointer-events: none !important;
    color: inherit !important;
    cursor: default !important;
    outline: 0 !important;
}
#wizard .q11-inv.is-view .q11-inv__table select::-ms-expand { display: none; }
/* td.inputted（値あり aliceblue ハイライト）は閲覧モードでは透明に。
   さらに `.table-hover > tbody > tr:hover > td.inputted` (fp-univ.css:1399) が
   行 hover で background:#8cad9e + color:#fff を当ててくるため、:hover 状態にも
   明示で color: inherit を効かせて「白文字が透明背景に消える」現象を防ぐ。 */
#wizard .q11-inv.is-view .q11-inv__table td.inputted,
#wizard .q11-inv.is-view .q11-inv__table > tbody > tr:hover > td.inputted {
    background-color: transparent !important;
    color: inherit !important;
}
/* 「うち元本」(.sub_form2) は閲覧モードでは隠す（評価額のみで一覧性を高める）。
   `<br/>` も合わせて消さないと空行ができる。 */
#wizard .q11-inv.is-view .q11-inv__table .securities_ratio .sub_form2,
#wizard .q11-inv.is-view .q11-inv__table .securities_ratio > br {
    display: none !important;
}
/* 「金額空白＝0」として表示する共通仕様。
   2 箇所で同じ見た目を担保するため、機構は違っても視覚的には同一になる：
   ─ A. 表側 input（閲覧モード）
        AccountTableController._refreshViewModePlaceholders が view 中だけ
        input.balance / input.cash の placeholder を "0" に差替え、edit に戻る際に
        元の placeholder を復元。placeholder の色を inherit にしてテキストと同じ色で
        表示する。
        ⚠️ 範囲は input.balance / input.cash に限定。bank_name など他の input は
        placeholder をデフォルトのグレー色のまま残し、機関名未入力を「グレーアウト
        placeholder（"銀行名" / "証券会社名"）」として表現する。
   ─ B. スケジュール側 span（MRF / DC operation の read-only mirror）
        本表 input と同 name の <span class="schedule-balance-display"> が
        synchronizer で値同期される。値が空のときは span が :empty になるので
        ::before で "0" を出して「単位だけが浮く」現象を回避する。
   投資対象フィルタで非対象列は隠せるので、空白で出るより 0 を出した方が一覧性が
   高い、という同じ思想に基づく。 */
#wizard .q11-inv.is-view .q11-inv__table input.balance::placeholder,
#wizard .q11-inv.is-view .q11-inv__table input.cash::placeholder {
    color: inherit !important;
    opacity: 1 !important;
}
#wizard .q11-inv.is-view .q11-inv__table input.balance::-webkit-input-placeholder,
#wizard .q11-inv.is-view .q11-inv__table input.cash::-webkit-input-placeholder {
    color: inherit !important;
    opacity: 1 !important;
}
#wizard .q11-inv.is-view .q11-inv__table input.balance::-moz-placeholder,
#wizard .q11-inv.is-view .q11-inv__table input.cash::-moz-placeholder {
    color: inherit !important;
    opacity: 1 !important;
}
.schedule-balance-display:empty::before {
    content: "0";
    color: inherit;
}

/* 閲覧モード時の残高展開表示。
   編集モード: <input>500</input> <span>00USD</span>  （input は borderless だが
   "500 00USD" のように見えて読みにくい、特に "00" prefix）
   閲覧モード: input + 単位ラベルを hide し、JS が inject した
                <span class="q11-inv__balance-view-display"> に
                展開済み数値（toLocaleString） + クリーンな単位 (例 "50,000 USD")
                を表示する。実装は q11_balance_view_display.js。 */
.q11-inv__balance-view-display {
    display: none;
}
.q11-inv.is-view .q11-inv__table input.balance,
.q11-inv.is-view .q11-inv__table input.cash,
.q11-inv.is-view .q11-inv__table input[name$="[principal]"] {
    display: none !important;
}
.q11-inv.is-view .q11-inv__table input.balance ~ span[currency],
.q11-inv.is-view .q11-inv__table input.balance ~ select,
.q11-inv.is-view .q11-inv__table input.cash ~ span[currency],
.q11-inv.is-view .q11-inv__table input.cash ~ select,
.q11-inv.is-view .q11-inv__table input[name$="[principal]"] ~ span[currency],
.q11-inv.is-view .q11-inv__table input[name$="[principal]"] ~ select {
    display: none !important;
}
.q11-inv.is-view .q11-inv__table .q11-inv__balance-view-display {
    display: inline;
    color: inherit;
}
/* 元本 (principal) は balance が空のあいだ readonly + グレーアウト。
   「投資した実額がある以上は評価額が空のはずがない」という論理から、
   balance 単独空 + principal 入力 という不整合状態の発生を防ぐ。
   実装は BalancePrincipalPair.sync()。`#wizard input { background-color:
   lightgoldenrodyellow !important }` (wizard.css) より優先する specificity が
   必要なので #wizard プレフィックスで覆う。 */
#wizard input[name$='[principal]'][readonly] {
    background-color: #f1f3f5 !important;
    color: #8a96a3 !important;
    cursor: not-allowed;
}
/* 口座名クリック（editor 開閉）を無効化 */
.q11-inv.is-view .q11-inv__account-toggle {
    cursor: default;
    pointer-events: none;
}