/* SienaCore - base stylesheet.
   システム全体で使う最小限のスタイル。
   これからの画面の土台になる。 */

:root {
    /* Brand palette - SienaCore ロゴ由来(紺=Siena / 明るい青=Core)。
       Stripe風: 白基調・淡い影・角丸・たっぷり余白。 */
    --color-navy: #1c2536;          /* 見出しの濃いスレート */
    --color-navy-deep: #131a27;
    --color-blue: #2f6bed;          /* 主役の青(ボタン・アクティブ・リンク) */
    --color-blue-hover: #2558d6;
    --color-blue-soft: #eef3fe;     /* アクティブ項目の淡い青の塗り */

    --color-bg: #ffffff;
    --color-bg-soft: #f6f8fc;       /* 画面背景(ほんのり寒色) */
    --color-surface: #ffffff;
    --color-text: #1c2536;          /* 濃いスレート(本文) */
    --color-text-muted: #667085;    /* 補助テキスト */
    --color-accent: #2f6bed;        /* = brand blue */
    --color-accent-hover: #2558d6;
    --color-border: #e6e9f0;        /* やわらかいボーダー */

    /* アクセント用グラデーション(チャート等) */
    --brand-gradient: linear-gradient(135deg, #2f6bed 0%, #5b8def 100%);

    /* 影(フラットで非常に控えめ) */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08);
    --shadow-focus: 0 0 0 3px rgba(47, 107, 237, 0.18);

    /* Type scale */
    --font-system: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Meiryo", sans-serif;
    --fs-1: 2.5rem;
    --fs-2: 1.5rem;
    --fs-3: 1.125rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg-soft);
    color: var(--color-text);
    font-family: var(--font-system);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
}

/* サイドメニュー画面のときはコンテナ幅を解除して画面いっぱいに */
.container:has(.app) {
    max-width: none;
    padding: 0;
}

/* ===== Welcome screen ===== */
.welcome {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-5);
    margin-top: var(--space-6);
    text-align: center;
}

.welcome__logo {
    width: 96px;
    height: auto;
    margin-bottom: var(--space-4);
}

.welcome__title {
    font-size: var(--fs-1);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    letter-spacing: -0.02em;
}

.welcome__lead {
    font-size: var(--fs-3);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-5);
}

.welcome__status {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin: 0;
}

.welcome__db {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-family: ui-monospace, "SF Mono", Consolas, "Courier New", monospace;
}

.welcome__signed-in {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.welcome__hello {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-body);
}

.welcome__login-link {
    display: inline-block;
    margin-top: var(--space-4);
    text-decoration: none;
}

/* ===== Login card ===== */
.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin: var(--space-6) auto 0;
    max-width: 420px;
    text-align: center;
}

.login-card__logo {
    width: 96px;
    height: auto;
    margin-bottom: var(--space-4);
}

.login-card__title {
    font-size: var(--fs-2);
    font-weight: 600;
    margin: 0 0 var(--space-4);
}

.login-card__error {
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: #fdecea;
    border: 1px solid #f5c6c0;
    border-radius: var(--radius-sm);
    color: #a02323;
    font-size: var(--fs-small);
}

.login-card__hint {
    margin: var(--space-4) 0 0;
    color: var(--color-text-muted);
    font-size: var(--fs-small);
}

/* ===== Forms ===== */
.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: left;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-row__label {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.form-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    font-family: inherit;
    background: var(--color-bg);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(44, 95, 124, 0.15);
}

/* ===== Buttons ===== */
.btn {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s ease, border-color 0.1s ease;
    text-decoration: none;
}

.btn--primary {
    background: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
}

.btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.btn--secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn--secondary:hover {
    background: var(--color-bg-soft);
}

/* ===== Generic card (used for sections after welcome) ===== */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-top: var(--space-4);
}

.card__title {
    font-size: var(--fs-2);
    font-weight: 600;
    margin: 0 0 var(--space-4);
}

.card__empty {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    margin: 0 0 var(--space-4);
}

/* ===== Companies list ===== */
.companies-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.companies-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.companies-list__item:last-child {
    border-bottom: none;
}

.companies-list__name {
    font-weight: 500;
}

.companies-list__meta {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
}

/* ===== Company create form ===== */
.company-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.company-form__title {
    font-size: var(--fs-3);
    font-weight: 600;
    margin: 0 0 var(--space-2);
}

.company-form__error {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: #fdecea;
    border: 1px solid #f5c6c0;
    border-radius: var(--radius-sm);
    color: #a02323;
    font-size: var(--fs-small);
}

.form-input--narrow {
    width: 100px;
}

/* ===== Small button + logout form layout ===== */
.btn--small {
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-small);
}

.welcome__logout-form {
    margin: 0;
}

/* ===== App layout (sidebar + main, after login) ===== */
.app {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    background: var(--color-bg-soft);
}

.app__main {
    padding: var(--space-5) var(--space-5);
    overflow-y: auto;
}

/* Sidebar */
.sidebar {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    padding: var(--space-3) 0;
}

.sidebar__top {
    padding: 0 var(--space-3);
    margin-bottom: var(--space-4);
}

.sidebar__footer {
    margin-top: auto;
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.sidebar__footer-logo {
    width: 96px;
    height: auto;
    opacity: 0.6;
}

/* Company picker (dropdown at top of sidebar) */
.company-picker {
    position: relative;
}

.company-picker__current {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    font-family: inherit;
    font-size: var(--fs-body);
    cursor: pointer;
}

.company-picker__current:hover {
    background: var(--color-bg);
}

.company-picker__name {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.company-picker__caret {
    color: var(--color-text-muted);
    margin-left: var(--space-2);
}

.company-picker__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

.company-picker[data-open="true"] .company-picker__menu {
    display: flex;
    flex-direction: column;
}

.company-picker__item {
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--fs-small);
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    border-bottom: 1px solid var(--color-border);
}

.company-picker__item:last-child {
    border-bottom: none;
}

.company-picker__item:hover {
    background: var(--color-bg-soft);
}

.company-picker__item--active {
    background: var(--color-bg-soft);
    font-weight: 500;
}

.company-picker__item--add {
    color: var(--color-accent);
}

.company-picker__logout {
    margin: 0;
}

.company-picker__item--logout {
    color: var(--color-text-muted);
}

/* Menu items */
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu__item {
    margin: 0;
}

.menu__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--fs-body);
    border-left: 3px solid transparent;
}

.menu__link:hover {
    background: var(--color-bg-soft);
}

.menu__item--active .menu__link {
    background: var(--color-bg-soft);
    border-left-color: var(--color-accent);
    font-weight: 500;
    color: var(--color-accent);
}

/* Page header (above content in app area) */
.page-header {
    margin-bottom: var(--space-5);
}

.page-header__title {
    font-size: var(--fs-1);
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Stub page */
.stub-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-5);
    text-align: center;
}

.stub-card__title {
    font-size: var(--fs-2);
    font-weight: 600;
    margin: 0 0 var(--space-3);
    color: var(--color-text);
}

.stub-card__lead {
    color: var(--color-text-muted);
    margin: 0;
}

/* ===== Sub navigation (for /settings/* etc.) ===== */
.subnav {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
}

.subnav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-2);
}

.subnav__item {
    margin: 0;
}

.subnav__link {
    display: inline-block;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--fs-body);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}

.subnav__link:hover {
    color: var(--color-text);
}

.subnav__item--active .subnav__link {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    font-weight: 500;
}

.subpage {
    /* place for the active subpage's content */
}

/* ===== Alerts ===== */
.alert {
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
}

.alert--ok {
    background: #e8f4ec;
    border: 1px solid #b6dec3;
    color: #1d6f3a;
}

.alert--error {
    background: #fdecea;
    border: 1px solid #f5c6c0;
    color: #a02323;
}

/* ===== Settings form ===== */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 460px;
}

.form-actions {
    margin-top: var(--space-2);
    display: flex;
    gap: var(--space-2);
}

/* ===== Data list (editable rows) ===== */
.data-list {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.data-list__header,
.data-list__row {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) 120px 120px 170px;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

form.data-list__row {
    margin: 0;
}

.data-list__row:last-child {
    border-bottom: none;
}

.data-list__header {
    background: var(--color-bg-soft);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    font-weight: 500;
}

.data-list__row {
    position: relative;
}

.data-list__col--name { text-align: left; }
.data-list__col--num { text-align: right; }
.data-list__col--actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.data-list__col--readonly { color: var(--color-text-muted); }

.form-input--cell {
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-small);
}

.form-input--narrow-num {
    width: 100%;
    text-align: right;
}

.btn--danger {
    color: #a02323;
    border-color: transparent;
}

.btn--danger:hover {
    background: #fdecea;
    border-color: #f5c6c0;
}

/* ===== Data add form ===== */
.data-add-form {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.data-add-form__title {
    font-size: var(--fs-3);
    font-weight: 600;
    margin: 0 0 var(--space-3);
}

.data-add-form__row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 160px auto;
    gap: var(--space-3);
    align-items: end;
}

.data-add-form__action {
    /* button bottom-aligned with form-row inputs */
}

/* ===== PL table ===== */
.page-header__sub {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--fs-small);
}

.card__sub {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--fs-small);
}

.pl-table-wrap {
    overflow-x: auto;
}

.pl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.pl-table th,
.pl-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.pl-table th {
    background: var(--color-bg-soft);
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: right;
}

.pl-table th.pl-table__name {
    text-align: left;
}

.pl-table__name {
    text-align: left;
    min-width: 160px;
    position: sticky;
    left: 0;
    background: var(--color-surface);
}

.pl-table__name--indent {
    padding-left: var(--space-4);
    color: var(--color-text-muted);
}

.pl-table__num {
    text-align: right;
    min-width: 90px;
}

.pl-table__total {
    background: var(--color-bg-soft);
    font-weight: 500;
}

.pl-table__row--item td {
    color: var(--color-text-muted);
}

.pl-table__row--sum {
    border-top: 1px solid var(--color-border);
}

.pl-table__row--sum td {
    font-weight: 500;
}

.pl-table__row--subtotal {
    background: #f5f1ea;
}

.pl-table__row--subtotal td {
    font-weight: 600;
}

.pl-table__row--total {
    background: var(--color-accent);
    color: #ffffff;
}

.pl-table__row--total td {
    color: #ffffff;
    font-weight: 600;
}

.pl-table__row--total .pl-table__name {
    background: var(--color-accent);
    color: #ffffff;
}

.pl-table__row--total .pl-table__total {
    background: var(--color-accent-hover);
}

/* ===== Basic master (KPI) variants ===== */
.data-list--basic .data-list__header,
.data-list--basic .data-list__row,
.data-list--basic form.data-list__row {
    grid-template-columns: minmax(160px, 2fr) 100px 140px 170px;
}

.data-list__col--unit {
    text-align: left;
}

.data-add-form__row--basic {
    grid-template-columns: 1fr 120px 160px auto;
}

/* ===== 12-month value editor ===== */
.values-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
}

@media (max-width: 900px) {
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.values-grid__cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.values-grid__label {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

/* ===== Master with formula (5-col) ===== */
.data-list .data-list__header,
.data-list .data-list__row,
.data-list form.data-list__row {
    grid-template-columns: minmax(150px, 1.6fr) minmax(180px, 2fr) 110px 110px 200px;
}
.data-list--basic .data-list__header,
.data-list--basic .data-list__row,
.data-list--basic form.data-list__row {
    grid-template-columns: minmax(160px, 2fr) 100px 140px 170px;
}

.data-list__col--formula {
    text-align: left;
}

/* add form: extend the row */
.data-add-form__row {
    grid-template-columns: minmax(180px, 1.4fr) minmax(180px, 1.6fr) 140px auto;
}

/* ===== Dashboard ===== */
.kpi-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.kpi-card--primary {
    border-left: 4px solid var(--color-accent);
}

.kpi-card--gross {
    background: #f5f1ea;
    border-color: #e8d9b8;
}

.kpi-card--accent {
    background: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
}

.kpi-card--accent .kpi-card__label,
.kpi-card--accent .kpi-card__sub {
    color: rgba(255, 255, 255, 0.85);
}

.kpi-card__label {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.kpi-card__value {
    margin: 0;
    font-size: var(--fs-1);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.kpi-card__unit {
    font-size: var(--fs-3);
    margin-left: var(--space-1);
    font-weight: 500;
    opacity: 0.75;
}

.kpi-card__sub {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

/* KPI list (小さい一覧) */
.kpi-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-2);
}

.kpi-list__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.kpi-list__name {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
}

.kpi-list__value {
    font-weight: 500;
    font-size: var(--fs-body);
}

.kpi-list__per {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: var(--fs-small);
    margin-left: var(--space-1);
}

/* Quick links cards */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.quick-links__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.1s ease, background 0.1s ease;
}

.quick-links__card:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-soft);
}

.quick-links__title {
    font-weight: 500;
    color: var(--color-accent);
}

.quick-links__sub {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

/* ===== Card header row with action ===== */
.card__header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 var(--space-4);
    gap: var(--space-3);
}

.card__header-row .card__title {
    margin: 0;
}

/* ===== 6a 多年計画関連の追加 ===== */
.form-row--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.form-row--inline > .form-row__label {
    flex: 0 0 120px;
}

.form-row__inline-text {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
}

.card__sub-title {
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-1);
}

.card__sub-title:first-of-type {
    margin-top: var(--space-3);
}

.pl-table__th-sub {
    font-size: 0.75em;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* =====================================================================
   事業計画・前提入力・ダッシュボード・KPI月別 の画面(段階7-24 デザイン整え)
   既存トークンに統一。落ち着いた配色・カード・角丸・余白の作法を踏襲する。
   ===================================================================== */

.plan,
.inputs,
.dashboard,
.kpi-detail {
    max-width: none;   /* 画面いっぱいに使う(本文は app__main の幅に追従) */
}

/* --- 画面ヘッダー(タイトル + 年度切替 + 書き出し) --- */
.plan__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.plan__title {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    margin-right: auto;
}

.plan__year-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.plan__year {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.plan__exports {
    display: inline-flex;
    gap: var(--space-2);
    flex-basis: 100%;
    justify-content: flex-end;
}

.plan__note {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    margin: var(--space-2) 0 0;
    flex-basis: 100%;
}

.plan__note a,
.card__empty a {
    color: var(--color-accent);
}

/* --- 数字の表(PL/CF/明細) --- */
.plan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body);
}

.plan-table caption {
    caption-side: top;
    text-align: left;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    padding: var(--space-3) 0 var(--space-2);
}

.plan-table thead th {
    text-align: left;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
}

.plan-table th,
.plan-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-weight: 400;
}

.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td {
    border-bottom: none;
}

.plan-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 小計・合計の強調 */
.plan-table__subtotal th,
.plan-table__subtotal td {
    font-weight: 600;
    background: var(--color-bg-soft);
}

.plan-table__total th,
.plan-table__total td {
    font-weight: 700;
    color: var(--color-accent);
    border-top: 2px solid var(--color-accent);
    background: var(--color-bg-soft);
}

.plan-table--sub {
    margin-top: var(--space-4);
}

/* 表中の入力欄(KPI月別)は詰めて表示 */
.plan-table input.form-input {
    max-width: 200px;
    padding: var(--space-1) var(--space-2);
    text-align: right;
}

/* --- ダッシュボードのカードグリッド --- */
.dashboard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.dashboard__card {
    margin-top: 0;
}

.dashboard__card .card__title {
    font-size: var(--fs-3);
    margin-bottom: var(--space-1);
}

.dashboard__card .card__title a {
    color: var(--color-text);
    text-decoration: none;
}

.dashboard__card .card__title a:hover {
    color: var(--color-accent);
}

.dashboard__year {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

/* --- 入力フォームを少し詰める(ラベル横並び) --- */
.inputs .company-form .form-row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
}

.inputs .company-form .form-row__label {
    flex: 0 0 150px;
    text-align: right;
}

.inputs .company-form .form-input,
.inputs .company-form select.form-input {
    flex: 1;
    max-width: 360px;
}

.inputs .company-form .btn {
    align-self: flex-start;
}

/* --- 狭い画面(スマホ)では1カラムに --- */
@media (max-width: 720px) {
    .app {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .plan__title {
        margin-right: 0;
        flex-basis: 100%;
    }

    .plan__exports {
        justify-content: flex-start;
    }

    .inputs .company-form .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .inputs .company-form .form-row__label {
        flex-basis: auto;
        text-align: left;
    }
}

/* =====================================================================
   段階7-25 Stripe風の仕上げ。SienaCoreロゴの紺×青を基準に、淡い影・角丸・
   余白・グラデーションのアクセントで洗練させる(上書きとして最後に適用)。
   ===================================================================== */

/* --- ボタン: 主役は明るいブランド青、控えめな影とホバーで浮く --- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease,
        border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
    background: var(--color-blue);
    border-color: var(--color-blue);
    box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
    background: var(--color-blue-hover);
    border-color: var(--color-blue-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--secondary {
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.btn--secondary:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-blue);
    color: var(--color-navy);
}

/* --- カード: やわらかいボーダー + 淡い影 + 角丸 --- */
.card,
.welcome {
    border-color: var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card__title {
    color: var(--color-navy);
}

/* --- 入力欄: 角丸とブランド色のフォーカスリング --- */
.form-input {
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus {
    border-color: var(--color-blue);
    box-shadow: var(--shadow-focus);
}

/* --- アプリ外枠・サイドメニュー --- */
.app {
    background: var(--color-bg-soft);
}

.sidebar {
    box-shadow: var(--shadow-sm);
    position: relative;
}

/* サイドメニュー最上部にブランドのグラデーション帯(Stripe的アクセント) */
.sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-gradient);
}

/* サイドメニューのロゴ(クリックでホームへ) */
.sidebar__brand {
    display: block;
    padding: var(--space-3) var(--space-3) var(--space-2);
    text-align: center;
}

.sidebar__brand-logo {
    width: 132px;
    height: auto;
}

.company-picker__current {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.company-picker__current:hover {
    border-color: var(--color-blue);
}

.menu__link {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-right: var(--space-2);
}

.menu__item--active .menu__link {
    color: var(--color-navy);
    border-left-color: var(--color-blue);
    background: var(--color-blue-soft);
}

/* --- 画面タイトルは紺 --- */
.plan__title {
    color: var(--color-navy);
    letter-spacing: -0.01em;
}

/* --- 合計行はブランド青(アクセント)で締める --- */
.plan-table__total th,
.plan-table__total td {
    color: var(--color-blue);
    border-top-color: var(--color-blue);
}

/* --- ダッシュボードのカードはホバーで持ち上がる --- */
.dashboard__card {
    transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.dashboard__card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-blue);
}

/* --- ログイン画面: Stripe風の1枚カード(上にグラデーション帯) --- */
.welcome__logo,
.login-card__logo {
    filter: drop-shadow(0 2px 6px rgba(16, 42, 69, 0.08));
}

.login-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding-top: var(--space-6);
    margin-top: var(--space-6);
}

.login-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--brand-gradient);
}

.login-card__logo {
    width: 150px;
}

.login-card__title {
    color: var(--color-navy);
}

.login-form .btn--primary {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

/* ホームのウェルカムカードにもブランドの帯 */
.welcome {
    position: relative;
    overflow: hidden;
}

.welcome::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--brand-gradient);
}

.welcome__title {
    color: var(--color-navy);
}

.welcome__login-link {
    box-shadow: var(--shadow-sm);
}

/* =====================================================================
   SienaFlow と統一(フラットな Stripe 調)。上書きとして最後に適用。
   ・上部のグラデーション帯をやめてフラットに
   ・サイドメニューはアイコン付き + アクティブは角丸の淡い青ピル
   ・ボタンは持ち上げず落ち着いた塗り、カードは淡い影
   ===================================================================== */

/* グラデーション帯を撤去(フラットなクリーン面に) */
.sidebar::before,
.login-card::before,
.welcome::before {
    display: none;
}

/* サイドメニュー: 余白とロゴ */
.sidebar {
    padding: var(--space-2) 0 var(--space-3);
}

.sidebar__brand {
    padding: var(--space-4) var(--space-4) var(--space-3);
    text-align: left;
}

.sidebar__brand-logo {
    width: 120px;
}

.sidebar__top {
    padding: 0 var(--space-3);
}

/* メニュー項目: アイコン + ラベルの横並び、角丸ピル */
.menu {
    padding: var(--space-1) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-left: none;
    border-radius: var(--radius-sm);
    margin: 0;
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 500;
}

.menu__link:hover {
    background: var(--color-bg-soft);
}

.menu__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--color-text-muted);
}

.menu__item--active .menu__link {
    background: var(--color-blue-soft);
    color: var(--color-blue);
    border-left: none;
    font-weight: 600;
}

.menu__item--active .menu__icon {
    color: var(--color-blue);
}

/* メニュー準備中の文言 */
.menu__placeholder {
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    list-style: none;
}

/* 会社切替: 落ち着いた角丸ボタン */
.company-picker__current {
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.company-picker__current:hover {
    background: var(--color-bg);
    border-color: var(--color-blue);
}

/* ボタン: 持ち上げずフラットに(SienaFlow の塗りボタンに合わせる) */
.btn {
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.btn--primary {
    box-shadow: none;
}

.btn--primary:hover {
    transform: none;
    box-shadow: none;
    background: var(--color-blue-hover);
    border-color: var(--color-blue-hover);
}

.btn--secondary {
    box-shadow: none;
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn--secondary:hover {
    background: var(--color-bg-soft);
    color: var(--color-text);
}

/* カード: フラットで淡い影、少し大きめの角丸 */
.card,
.welcome,
.login-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.login-card {
    padding-top: var(--space-5);
}

/* 見出し色をスレートに統一 */
.card__title,
.plan__title,
.page-header__title,
.welcome__title,
.login-card__title {
    color: var(--color-navy);
}

/* 合計行のアクセントは新しい青に */
.plan-table__total th,
.plan-table__total td {
    color: var(--color-blue);
    border-top-color: var(--color-blue);
}

/* ダッシュボードのカード: ホバーは控えめに浮く */
.dashboard__card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--color-border);
}

/* =====================================================================
   旧準拠の共通土台 (2026-06-18)
   旧 Ordix のデザイン言語(ライト・青・角丸)に合わせた共通部品。
   サイドバーのサブメニュー / タブ / モーダル / 高密度テーブル / セクションカード。
   既存スタイルへの追記のみ(非破壊)。
   ===================================================================== */

/* --- サイドバー: サブメニュー(役割分離) --- */
.menu__link--parent {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.menu__arrow {
    margin-left: auto;
    font-size: 10px;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}

.menu__item--group.is-open > .menu__link--parent .menu__arrow {
    transform: rotate(90deg);
}

.submenu {
    list-style: none;
    margin: 2px 0 4px;
    padding: 0;
    display: none;
}

.menu__item--group.is-open > .submenu {
    display: block;
}

.submenu__link {
    display: block;
    padding: 7px 12px 7px 40px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    margin: 1px 0;
}

.submenu__link:hover {
    background: var(--color-bg-soft);
    color: var(--color-text);
}

.submenu__item--active .submenu__link {
    background: var(--color-blue-soft);
    color: var(--color-blue);
    font-weight: 600;
}

/* --- タブ(旧 .tab-bar/.tab-btn 相当: 下線アクティブ) --- */
.tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-border);
}

.tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    text-decoration: none;
}

.tab-btn:hover {
    color: var(--color-blue);
}

.tab-btn.is-active {
    color: var(--color-blue);
    border-bottom-color: var(--color-blue);
    font-weight: 600;
}

/* --- モーダル(中央オーバーレイ) --- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
}

.modal-overlay.is-open {
    display: flex;
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
    animation: modalIn 0.18s ease;
}

.modal--large {
    max-width: 880px;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.modal__title {
    margin: 0;
    font-size: 1.125rem;
    color: var(--color-navy);
    font-weight: 700;
}

.modal__close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
}

.modal__close:hover {
    color: var(--color-text);
}

.modal__body {
    padding: var(--space-4);
}

.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* --- 高密度テーブル(横スクロール + 左列固定): 旧 design_system 相当 --- */
.dense-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.dense-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

.dense-table th,
.dense-table td {
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    padding: 6px 8px;
    height: 32px;
    white-space: nowrap;
    text-align: right;
}

.dense-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-weight: 600;
    z-index: 10;
}

.dense-table th:first-child,
.dense-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--color-surface);
    text-align: left;
    border-right: 2px solid var(--color-border);
    z-index: 11;
    min-width: 200px;
}

.dense-table thead th:first-child {
    z-index: 20;
    background: var(--color-bg-soft);
}

.dense-table tbody tr:hover td {
    background: var(--color-bg-soft);
}

.dense-table tbody tr:hover td:first-child {
    background: var(--color-surface);
}

/* --- セクションカード(見出し付き枠) --- */
.section-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.section-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    font-weight: 600;
    color: var(--color-navy);
}

.section-card__body {
    padding: 0 18px 18px;
}

/* 開始残高: 貸借一致チェックのバナー */
.ob-check {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    font-size: 0.95rem;
}

.ob-check b {
    margin-left: 4px;
}

.ob-check[data-balanced="true"] #ob-status {
    color: #0a7c42;
    font-weight: 600;
}

.ob-check[data-balanced="false"] #ob-status {
    color: #c0392b;
    font-weight: 600;
}

/* =====================================================================
   旧Ordix準拠の見た目 微調整 (2026-06-18)
   会計表らしさ(桁揃え)・表のヘッダ/行ホバー・メニュー/タブのアクセント。
   追記のみ・テンプレ非改変(非破壊)。
   ===================================================================== */

/* 数字は等幅で桁を揃える(会計表の基本) */
.plan-table .num,
.plan-table .num input,
.dense-table td,
.dense-table input,
.ob-check b {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* 表のヘッダは淡い面に置いて視線を落ち着かせる(旧の高密度表に寄せる) */
.plan-table thead th {
    background: var(--color-bg-soft);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 本文行はホバーでうっすら反応(行を追いやすく) */
.plan-table tbody tr:hover td,
.plan-table tbody tr:hover th {
    background: rgba(47, 107, 237, 0.05);
}

/* 小計・合計行は自前の塗り/色を保つ(ホバーで崩さない) */
.plan-table tbody tr.plan-table__subtotal:hover td,
.plan-table tbody tr.plan-table__subtotal:hover th,
.plan-table tbody tr.plan-table__total:hover td,
.plan-table tbody tr.plan-table__total:hover th {
    background: var(--color-bg-soft);
}

/* 合計行はブランド青で締める(上罫線＋太字) */
.plan-table__total th,
.plan-table__total td {
    font-weight: 700;
    border-top: 2px solid var(--color-blue);
}

/* メニュー: アクティブのサブ項目に左アクセント(旧の選択強調に寄せる) */
.submenu__item--active .submenu__link {
    box-shadow: inset 2px 0 0 var(--color-blue);
}

/* タブ: アクティブ下線を少し太く(旧 tab-btn の主張) */
.tab-btn.is-active {
    border-bottom-width: 3px;
}

/* 注記は行間を少し広げて読みやすく */
.plan__note,
.card__empty {
    line-height: 1.55;
}

/* 入力セル(グリッド)はフォーカスで淡い青の枠(旧の編集表に寄せる) */
.form-input--cell:focus,
.dense-table input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(47, 107, 237, 0.35);
    background: rgba(47, 107, 237, 0.04);
}

/* セクションカードの見出し下にうっすら区切り(旧 section-header 風・控えめ) */
.card > .card__title:first-child {
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

/* 単票の入力フォームは読みやすい幅に(表・グリッドは全幅のまま) */
.company-form {
    max-width: 760px;
}

/* === P10 AI機能まわりの軽い見た目調整(旧Ordix準拠・非破壊の追記) === */

/* AIの利用回数や案内の注記。控えめに。 */
.modal .plan__note,
.documents .plan__note {
    color: var(--color-text-soft);
}

/* 生成結果・会社概要の本文ブロックは読みやすい行間と余白に */
.section-card[style*="pre-wrap"],
.section-card > div[style*="pre-wrap"] {
    line-height: 1.7;
}

/* AI入力アシスタントの指示textareaは縦に余裕を持たせる */
.modal textarea.form-input {
    min-height: 76px;
    resize: vertical;
}

/* 出力セクション選択(チェックボックス群)のfieldsetを淡く */
.company-form fieldset {
    background: var(--color-bg-soft);
}

/* 生成結果カードの見出しはブランド色で区切る(旧の節見出し風) */
.card .section-card .company-form__title {
    border-left: 3px solid var(--color-primary, #2f6bed);
    padding-left: 8px;
    margin-bottom: 6px;
}

/* =====================================================================
   土台UI仕上げ v2 (2026-06-20) — 一貫性と「作業の流れで迷わない」UI
   旧Ordix準拠の構造は変えず、視認性・現在地・余白・操作感を磨く追記のみ(非破壊)。
   ===================================================================== */

/* --- 1) サイドバーは常に見える(スクロールしても流れない) --- */
@media (min-width: 721px) {
    .sidebar {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        overflow-y: auto;
    }
}

/* --- 2) ナビ: アイコンと文字をきれいに整列、現在地は丸ピルで明確に --- */
.menu {
    padding: var(--space-1) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.menu__link,
.menu__link--parent {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    border-left: none;          /* 旧の左罫線は丸ピルに置き換え */
    color: var(--color-text);
    line-height: 1.3;
}
.menu__link:hover,
.menu__link--parent:hover {
    background: var(--color-bg-soft);
}
.menu__label {
    flex: 1 1 auto;
    min-width: 0;
}
/* 現在地(トップレベル) */
.menu__item--active .menu__link {
    background: var(--color-blue-soft);
    color: var(--color-blue);
    font-weight: 600;
    border-left: none;
}
/* 開いている親(=このセクションにいる)を淡く強調して文脈を示す */
.menu__item--group.is-open > .menu__link--parent {
    color: var(--color-navy);
    font-weight: 600;
}
/* サブメニューは親の下に少しインデントして帰属を示す */
.submenu {
    margin: 2px 0 4px;
    padding-left: 8px;
    border-left: 2px solid var(--color-border);
    margin-left: 18px;
}
.submenu__link {
    padding: 7px 10px 7px 16px;
    border-radius: 8px;
}
.submenu__item--active .submenu__link {
    background: var(--color-blue-soft);
    color: var(--color-blue);
    font-weight: 600;
}
/* グループ間にほんの少し余白を入れて「かたまり」に見せる */
.menu__item--group {
    margin-top: 2px;
}

/* --- 3) キーボード操作のフォーカスを必ず見えるように(アクセシビリティ) --- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.menu__link:focus-visible,
.submenu__link:focus-visible,
.tab-btn:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* 選択ハイライトもブランド色に */
::selection {
    background: rgba(47, 107, 237, 0.18);
}

/* --- 4) ページ見出しのリズムを統一(タイトル下に細い罫線で「見出し領域」を明示) --- */
.plan__header {
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.plan__title {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
/* 見出し直下の説明は読みやすい幅・色に */
.plan__header .plan__note {
    flex-basis: 100%;
    margin: 4px 0 0;
    color: var(--color-text-muted);
}

/* --- 5) カード見出しと余白の一貫性 --- */
.card {
    padding: var(--space-4) var(--space-5);
}
.card__title {
    font-size: 1.15rem;
    letter-spacing: -0.005em;
}

/* --- 6) 空状態を「次の一手が分かる」やさしい見た目に --- */
.card__empty {
    padding: var(--space-4);
    background: var(--color-bg-soft);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    text-align: center;
}

/* --- 7) ボタン: 高さを揃え、押した瞬間の手応えを少しだけ --- */
.btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn--small {
    min-height: 30px;
}
.btn:active {
    transform: translateY(0);
    filter: brightness(0.97);
}

/* --- 8) 表: ヘッダを少し締めて、行間と区切りを上品に --- */
.plan-table thead th,
.dense-table thead th {
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
}
.plan-table tbody tr:hover td,
.plan-table tbody tr:hover th {
    background: rgba(47, 107, 237, 0.035);
}

/* --- 9) 本文と余白: 主要コンテンツの上下にゆとり --- */
.app__main {
    padding: var(--space-5) var(--space-6);
}
@media (max-width: 720px) {
    .app__main {
        padding: var(--space-4) var(--space-3);
    }
}

/* 全体のスクロールを滑らかに */
html {
    scroll-behavior: smooth;
}

/* --- 検算ページ: 信号灯バッジ/バナー(2026-06-20) --- */
.verify-banner {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 600;
    margin: var(--space-3) 0 var(--space-2);
}
.verify-banner--ok {
    background: #e7f6ee;
    color: #0a7c42;
    border: 1px solid #b6e3c9;
}
.verify-banner--ng {
    background: #fdecea;
    color: #a02323;
    border: 1px solid #f5c6c0;
}
.verify-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.verify-badge--ok { background: #e7f6ee; color: #0a7c42; }
.verify-badge--ng { background: #fdecea; color: #a02323; }
.verify-badge--skip { background: var(--color-bg-soft); color: var(--color-text-muted); }

/* --- はじめに(初回ウィザード)の手順リスト 2026-06-20 --- */
.start-steps { list-style: none; margin: 0; padding: 0; }
.start-step {
    display: flex;
    gap: 14px;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}
.start-step:first-child { border-top: none; }
.start-step__mark {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}
.start-step.is-done .start-step__mark { background: #e7f6ee; color: #0a7c42; }
.start-step__title { font-weight: 600; color: var(--color-navy); margin-bottom: 2px; }
.start-step__desc { color: var(--color-text-muted); margin: 0 0 8px; font-size: 0.9rem; }

/* =====================================================================
   モバイル微調整 (2026-06-24)
   - ボタンの帯(plan__exports 等)を折り返す(増えたボタンが画面外に溢れない)
   - 横長の表は、囲っているカードの中で横スクロール(画面全体が横に広がって
     崩れるのを防ぐ。表の列ズレを避けるため display は変えずカード側で吸収)
   ===================================================================== */
.plan__exports { flex-wrap: wrap; }

@media (max-width: 720px) {
    .plan__header,
    .dash-head { flex-wrap: wrap; }

    .card { overflow-x: auto; }

    .plan__exports .btn,
    .dash-head .btn { white-space: nowrap; }
}

/* ---- 折りたたみメニュー(ヘッダのボタン過多を整理する details ドロップダウン) 2026-07-02 ---- */
.menu-dd { position: relative; display: inline-block; }
.menu-dd > summary { list-style: none; cursor: pointer; user-select: none; }
.menu-dd > summary::-webkit-details-marker { display: none; }
.menu-dd[open] > summary .btn { background: var(--color-bg-soft); }
.menu-dd__panel {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(30, 41, 59, .14);
  padding: 6px; min-width: 240px; z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
}
.menu-dd__panel a {
  display: block; padding: 8px 10px; border-radius: 7px;
  text-decoration: none; color: inherit; font-size: .9em; white-space: nowrap;
}
.menu-dd__panel a:hover { background: var(--color-bg-soft); }
.menu-dd__hint { padding: 2px 10px 6px; color: #9ca3af; font-size: .75em; }
@media (max-width: 720px) { .menu-dd__panel { right: auto; left: 0; } }

/* ---- 美観の底上げ(2026-07-04) ---- */
/* 横に長い財務表・KPI表で、いま見ている行がひと目でわかるように */
.plan-table tbody tr:hover td,
.plan-table tbody tr:hover th,
.dense-table tbody tr:hover td,
.dense-table tbody tr:hover th {
    background: #eef3fd;
}
/* キーボード操作でも、いまどこにいるか見えるように */
.btn:focus-visible,
a:focus-visible,
.form-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
/* 数字セルは表の種類を問わず等幅数字で桁を揃える */
.dense-table .num,
.dense-table input.form-input--cell {
    font-variant-numeric: tabular-nums;
}

/* 画面タイトルの大きさを全画面で統一(2.5remと1.75remの2系統が混在していた) */
.page-header__title {
    font-size: 1.75rem;
}

/* マイナスの金額は全ての財務表で赤く(会計の定石。黒字と紛れない) */
.plan-table td.num.neg,
.dense-table td.num.neg,
td.num.neg {
    color: #dc2626;
}

/* 財務表の行ラベル(科目名)は1文字ずつ縦に折らない(表は横スクロールで逃がす) */
.plan-table tbody th,
.plan-table thead th:first-child {
    white-space: nowrap;
}