/* 共通の意味トークン。モックと実装の既存変数はここへ接続する。 */
:root {
  --estate-background:#f5f3ee;
  --estate-background-alt:#eceee7;
  --estate-surface:#fffefa;
  --estate-text:#203c33;
  --estate-muted:#56635c;
  --estate-border:#dedfd5;
  --estate-primary:#245744;
  --estate-primary-hover:#183e31;
  --estate-primary-soft:#e7eee6;
  --estate-accent:#94733b;
  --estate-font:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --estate-space-sm:8px;
  --estate-space-md:16px;
  --estate-space-lg:24px;
  --estate-space-xl:32px;
  --estate-radius:14px;
  --estate-radius-large:20px;
  --estate-shadow:0 4px 20px rgba(35,55,43,.045);
  --paper:var(--estate-background); --color-bg:var(--estate-background);
  --paper-2:var(--estate-background-alt); --color-bg-alt:var(--estate-background-alt);
  --card:var(--estate-surface); --color-surface:var(--estate-surface);
  --ink:var(--estate-text); --color-text:var(--estate-text);
  --muted:var(--estate-muted); --color-text-muted:var(--estate-muted);
  --line:var(--estate-border); --color-border:var(--estate-border);
  --brand:var(--estate-primary); --color-primary:var(--estate-primary);
  --brand-deep:var(--estate-primary-hover); --color-primary-hover:var(--estate-primary-hover);
  --brand-tint:var(--estate-primary-soft); --color-primary-light:var(--estate-primary-soft);
  --brass:var(--estate-accent);
  --sans:var(--estate-font); --font-sans:var(--estate-font);
  --serif:var(--estate-font); --font-serif:var(--estate-font);
  --r-m:var(--estate-radius); --radius-md:var(--estate-radius);
  --r-l:var(--estate-radius-large); --radius-xl:var(--estate-radius-large);
  --sh-1:var(--estate-shadow); --shadow-sm:var(--estate-shadow);
}
body { background:var(--paper); color:var(--ink); }
.rail,.app-sidebar { background:#183e31; }
.rail .logo { letter-spacing:.06em; }
.rail a.on { background:#345849; }
.rail a.on::before { background:#d2b77c; }
.card { background:var(--card); border-color:var(--line); box-shadow:var(--sh-1); }
.btn { transition:background .15s,box-shadow .15s; }
.btn.primary,.btn-primary { background:var(--brand); box-shadow:0 4px 12px #24574420; }
.btn:focus-visible,a:focus-visible,select:focus-visible { outline:3px solid #94733b; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .btn { transition:none; } }

.btn.primary:hover,.btn-primary:hover { background:var(--estate-primary-hover); }
input:focus-visible,textarea:focus-visible { outline:3px solid var(--estate-accent); outline-offset:3px; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }

/* 詳細規格：値は用途で選び、画面側で同じ色を再定義しない。 */
:root {
 --estate-white:#ffffff; --estate-text-inverse:#ffffff;
 --estate-border-strong:#a4b0a5; --estate-disabled-bg:#e8eae4; --estate-disabled-text:#68736b;
 --estate-success:#226345; --estate-success-soft:#e7f1e9;
 --estate-warning:#805719; --estate-warning-soft:#fbf1db;
 --estate-danger:#a23630; --estate-danger-soft:#faeae7;
 --estate-info:#365f87; --estate-info-soft:#eaf0f7;
 --estate-accent-soft:#f3eddc; --estate-overlay:rgba(16,35,27,.48);
 --estate-type-caption:12px; --estate-type-small:14px; --estate-type-body:16px;
 --estate-type-subtitle:20px; --estate-type-title:28px; --estate-type-display:40px;
 --estate-leading-body:1.7; --estate-leading-heading:1.35;
 --estate-weight-normal:400; --estate-weight-medium:500; --estate-weight-bold:700;
 --estate-space-1:4px; --estate-space-2:8px; --estate-space-3:12px;
 --estate-space-4:16px; --estate-space-5:20px; --estate-space-6:24px;
 --estate-space-8:32px; --estate-space-10:40px; --estate-space-12:48px; --estate-space-16:64px;
 --estate-radius-small:8px; --estate-radius-pill:999px;
 --estate-shadow-raised:0 12px 32px rgba(24,62,49,.12);
 --estate-shadow-dialog:0 24px 64px rgba(24,62,49,.22);
 --estate-control-small:36px; --estate-control-height:44px; --estate-control-large:52px;
 --estate-content-width:1280px; --estate-reading-width:720px;
 --estate-duration-fast:150ms; --estate-duration-normal:220ms; --estate-easing:cubic-bezier(.2,.7,.2,1);
 --estate-z-sticky:100; --estate-z-menu:200; --estate-z-dialog:1000; --estate-z-toast:1100;
 --line-strong:var(--estate-border-strong); --color-border-strong:var(--estate-border-strong);
 --ok:var(--estate-success); --ok-soft:var(--estate-success-soft);
 --warn:var(--estate-warning); --warn-soft:var(--estate-warning-soft);
 --bad:var(--estate-danger); --bad-soft:var(--estate-danger-soft);
 --info:var(--estate-info); --info-soft:var(--estate-info-soft);
 --color-success:var(--estate-success); --color-success-light:var(--estate-success-soft);
 --color-warning:var(--estate-warning); --color-warning-light:var(--estate-warning-soft);
 --color-danger:var(--estate-danger); --color-danger-light:var(--estate-danger-soft);
 --color-info:var(--estate-info); --color-info-light:var(--estate-info-soft);
}
/* 新規コンポーネントは et- 名前空間で既存画面と衝突させない。 */
.et-title{font-size:clamp(24px,3vw,var(--estate-type-display));line-height:var(--estate-leading-heading);font-weight:700;letter-spacing:.02em}
.et-subtitle{font-size:var(--estate-type-subtitle);line-height:1.4;font-weight:700}
.et-caption{font-size:var(--estate-type-caption);color:var(--estate-muted)}
.et-number{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.et-stack{display:grid;gap:var(--estate-space-4)}
.et-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--estate-space-3)}
.et-card{background:var(--estate-surface);border:1px solid var(--estate-border);border-radius:var(--estate-radius-large);padding:var(--estate-space-6);box-shadow:var(--estate-shadow)}
.et-card__header{padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--estate-border)}
.et-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border:1px solid var(--estate-border-strong);border-radius:var(--estate-radius-small);background:var(--estate-surface);color:var(--estate-text);font:500 14px/1.4 var(--estate-font);cursor:pointer;transition:background var(--estate-duration-fast) var(--estate-easing)}
.et-button:hover{background:var(--estate-primary-soft)}
.et-button--primary{background:var(--estate-primary);border-color:var(--estate-primary);color:white}
.et-button--primary:hover{background:var(--estate-primary-hover)}
.et-button--danger{background:var(--estate-danger);border-color:var(--estate-danger);color:white}
.et-button--danger:hover{background:#812a25}
.et-button--ghost{border-color:transparent;background:transparent}
.et-button--small{min-height:36px;padding:6px 12px}
.et-button--large{min-height:52px;padding:14px 24px}
.et-button:active:not(:disabled){box-shadow:inset 0 2px 4px #0002}
.et-button:disabled{background:var(--estate-disabled-bg);color:var(--estate-disabled-text);border-color:var(--estate-border);cursor:not-allowed}
.et-button:focus-visible,.et-field:focus-visible,.et-check:focus-visible,.et-nav a:focus-visible{outline:3px solid var(--estate-accent);outline-offset:3px}
.et-label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.et-required{font-size:12px;color:var(--estate-danger);margin-left:8px}
.et-field{display:block;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--estate-border-strong);border-radius:8px;background:var(--estate-white);color:var(--estate-text);font:400 16px/1.5 var(--estate-font)}
.et-field::placeholder{color:var(--estate-muted)}
.et-field:hover:not(:disabled){border-color:var(--estate-primary)}
.et-field[aria-invalid="true"]{border:2px solid var(--estate-danger)}
.et-field:disabled,.et-field[readonly]{background:var(--estate-disabled-bg)}
.et-help{font-size:12px;color:var(--estate-muted);margin-top:6px}
.et-error{font-size:14px;color:var(--estate-danger);margin-top:6px}
.et-check{width:20px;height:20px;accent-color:var(--estate-primary);vertical-align:middle}
.et-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--estate-background-alt);color:var(--estate-muted)}
.et-badge--success,.et-alert--success{background:var(--estate-success-soft);color:var(--estate-success)}
.et-badge--warning,.et-alert--warning{background:var(--estate-warning-soft);color:var(--estate-warning)}
.et-badge--danger,.et-alert--danger{background:var(--estate-danger-soft);color:var(--estate-danger)}
.et-badge--info,.et-alert--info{background:var(--estate-info-soft);color:var(--estate-info)}
.et-alert{padding:16px 20px;border:1px solid currentColor;border-radius:12px;font-size:14px}
.et-table-wrap{overflow-x:auto;border:1px solid var(--estate-border);border-radius:14px}
.et-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.et-table th{background:var(--estate-background-alt);color:var(--estate-muted);font-weight:700}
.et-table th,.et-table td{padding:14px 16px;border-bottom:1px solid var(--estate-border);white-space:nowrap}
.et-table tr:last-child td{border-bottom:0}.et-table tbody tr:hover{background:var(--estate-primary-soft)}
.et-table .et-numeric{text-align:right;font-variant-numeric:tabular-nums}
.et-nav{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--estate-border)}
.et-nav a{padding:12px 16px;color:var(--estate-muted);border-bottom:3px solid transparent}
.et-nav a[aria-current="page"]{color:var(--estate-primary);font-weight:700;border-color:var(--estate-accent)}
.et-nav a:hover{background:var(--estate-primary-soft)}
.et-empty{text-align:center;padding:48px 24px;border:1px dashed var(--estate-border-strong);border-radius:20px;background:var(--estate-background)}
.et-empty p{color:var(--estate-muted);margin:12px 0 20px}
.et-skeleton{height:16px;background:var(--estate-background-alt);border-radius:8px;margin:12px 0}
.et-dialog{width:min(560px,calc(100% - 32px));padding:32px;background:var(--estate-surface);border:1px solid var(--estate-border);border-radius:20px;box-shadow:var(--estate-shadow-dialog);color:var(--estate-text)}
.et-dialog::backdrop{background:var(--estate-overlay)}
.et-dialog .et-row{justify-content:flex-end;margin-top:24px}
.et-progress{accent-color:var(--estate-primary);width:100%;height:12px}
@media(max-width:767px){.et-card{padding:20px}.et-button--small{min-height:44px}.et-dialog{padding:24px}.et-title{font-size:28px}}
@media(prefers-reduced-motion:reduce){.et-button{transition:none}}

/* キーボード操作時のフォーカスを真鍮色で明示する */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--estate-accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}