@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Inter:wght@400;700&display=swap');

:root{
  --primary:#005aff; --primary-hover:#004bd5; --primary-background:#e5f5ff;
  --text-primary:#1f2937; --text-secondary:#989898; --text-icon:#656c87; --border:#e5e7eb;
  --font-jp:'Noto Sans JP',system-ui,-apple-system,sans-serif;
  --font-en:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; font-family:var(--font-jp); color:var(--text-primary); -webkit-font-smoothing:antialiased; }

/* ---- token scope (.cx) ---- */
.cx{
  --c-primary:#0b57c4; --c-primary-hover:#0847a1; --c-primary-bg:#e9f1fd; --c-primary-fg:#fff;
  --c-accent:#2f8f5b; --c-accent-bg:#e6f4ec;
  --c-text:#1f2937; --c-text-2:#656c87; --c-text-3:#989898;
  --c-border:#e5e7eb; --c-bg:#fff; --c-surface:#f7f8f9; --c-muted:#f3f3f3; --c-hover:#f5f5f5;
  --c-danger:#ff3366; --c-danger-bg:#ffe3ea; --c-warn:#d98a00; --c-warn-bg:#fff4dc;
  --c-ok:#1c9d5a; --c-ok-bg:#e6f6ed;
  --c-radius:8px; --c-radius-lg:14px;
  --c-shadow-1:0 2px 6px rgba(0,0,0,.10); --c-shadow-2:0 6px 14px rgba(0,0,0,.10); --c-shadow-3:0 12px 28px rgba(0,0,0,.14);
  font-family:var(--font-jp); color:var(--c-text);
}
.cx-app{ width:100vw; height:100vh; overflow:hidden; background:var(--c-surface); }

/* ---- buttons ---- */
.cx-btn{ font-family:var(--font-jp); font-size:14px; font-weight:700; border:0; border-radius:var(--c-radius);
  padding:10px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; line-height:1; text-decoration:none;
  transition:background .18s,box-shadow .18s,border-color .18s; white-space:nowrap; }
.cx-btn.pri{ background:var(--c-primary); color:#fff; box-shadow:var(--c-shadow-1); }
.cx-btn.pri:hover{ background:var(--c-primary-hover); }
.cx-btn.out{ background:#fff; color:var(--c-text); border:1px solid var(--c-border); }
.cx-btn.out:hover{ background:var(--c-surface); }
.cx-btn.ghost{ background:transparent; color:var(--c-text-2); }
.cx-btn.ghost:hover{ background:var(--c-hover); color:var(--c-text); }
.cx-btn.danger{ background:var(--c-danger); color:#fff; }
.cx-btn.warn{ background:#fff; color:var(--c-warn); border:1px solid #e7c48c; }
.cx-btn.lg{ padding:13px 20px; font-size:15px; }
.cx-btn.sm{ padding:7px 12px; font-size:13px; }
.cx-btn.block{ width:100%; justify-content:center; }

/* ---- chips ---- */
.cx-chip{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:6px; font-size:12px; font-weight:700; line-height:1.5; }
.cx-chip .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.cx-chip.primary{ background:var(--c-primary-bg); color:var(--c-primary); }
.cx-chip.ok{ background:var(--c-ok-bg); color:var(--c-ok); }
.cx-chip.warn{ background:var(--c-warn-bg); color:var(--c-warn); }
.cx-chip.danger{ background:var(--c-danger-bg); color:var(--c-danger); }
.cx-chip.muted{ background:var(--c-muted); color:var(--c-text-2); }
.cx-chip.accent{ background:var(--c-accent-bg); color:var(--c-accent); }
.cx-chip.plain{ background:transparent; padding:3px 4px; }

/* ---- app shell ---- */
.cx-shell{ display:grid; grid-template-rows:auto 1fr; height:100%; }
.cx-shell > *:nth-child(2){ min-height:0; }
.cx-header{ height:56px; background:#fff; border-bottom:1px solid var(--c-border); display:flex; align-items:center; gap:16px; padding:0 18px; flex-shrink:0; z-index:5; }
.cx-header .brand{ display:flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none; color:var(--c-text); }
.cx-header .brand .mk{ width:30px; height:30px; border-radius:8px; background:var(--c-primary); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px; }
.cx-header .brand b{ font-size:15px; font-weight:700; white-space:nowrap; }
.cx-header .brand .sep{ width:1px; height:20px; background:var(--c-border); margin:0 4px; }
.cx-header .brand span.theme{ font-size:14px; color:var(--c-text-2); font-weight:500; white-space:nowrap; }
.cx-header .spacer{ flex:1; }
.cx-search{ display:flex; align-items:center; gap:8px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:10px; padding:8px 12px; width:300px; }
.cx-search input{ border:0; background:0; outline:0; font-family:var(--font-jp); font-size:13px; flex:1; color:var(--c-text); }
.cx-icon-btn{ width:36px; height:36px; border-radius:8px; border:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--c-text-2); position:relative; }
.cx-icon-btn:hover{ background:var(--c-hover); }
.cx-icon-btn .dotbadge{ position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--c-danger); }
.cx-avatar{ width:34px; height:34px; border-radius:9px; background:var(--c-accent); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:14px; }
.cx-userchip{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--c-text); }

.cx-body{ display:grid; grid-template-columns:236px 1fr; min-height:0; }
.cx-side{ background:#fff; border-right:1px solid var(--c-border); padding:12px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.cx-side .grp{ font-size:11px; font-weight:700; color:var(--c-text-3); margin:14px 8px 4px; letter-spacing:.04em; }
.cx-nav{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--c-text); cursor:pointer; text-decoration:none; }
.cx-nav:hover{ background:var(--c-hover); }
.cx-nav.active{ background:var(--c-primary-bg); color:var(--c-primary); font-weight:700; }
.cx-nav .ic{ width:18px; text-align:center; color:var(--c-text-3); font-size:14px; }
.cx-nav.active .ic{ color:var(--c-primary); }
.cx-nav .cnt{ margin-left:auto; font-size:11px; color:#fff; background:var(--c-danger); border-radius:9999px; padding:1px 7px; font-weight:700; }

.cx-main{ overflow-y:auto; padding:24px 28px 56px; min-width:0; }

/* ---- page header / breadcrumb ---- */
.cx-crumb{ font-size:12px; color:var(--c-text-3); margin-bottom:8px; }
.cx-crumb a{ color:var(--c-text-2); }
.cx-page-h{ display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.cx-page-h h1{ font-size:22px; font-weight:700; }
.cx-page-h .sub{ font-size:12.5px; color:var(--c-text-2); }
.cx-page-h .ph-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

/* ---- cards ---- */
.cx-card{ background:#fff; border:1px solid var(--c-border); border-radius:var(--c-radius-lg); }
.cx-card.pad{ padding:20px; }
.cx-card.flush{ overflow:hidden; }
.cx-card-h{ padding:14px 18px; border-bottom:1px solid var(--c-border); display:flex; align-items:center; gap:10px; }
.cx-card-h h3{ font-size:14.5px; font-weight:700; }
.cx-card-h .more{ margin-left:auto; font-size:12px; color:var(--c-primary); cursor:pointer; }
.cx-card-h .hint{ margin-left:auto; font-size:12px; color:var(--c-text-3); }
.cx-card-b{ padding:18px; }

/* ---- stat tiles ---- */
.cx-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cx-stat{ background:#fff; border:1px solid var(--c-border); border-radius:var(--c-radius-lg); padding:16px 18px; position:relative; overflow:hidden; }
.cx-stat::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c-primary); }
.cx-stat.ok::before{ background:var(--c-ok); } .cx-stat.warn::before{ background:var(--c-warn); } .cx-stat.danger::before{ background:var(--c-danger); }
.cx-stat .lab{ font-size:12px; color:var(--c-text-2); margin-bottom:10px; }
.cx-stat .val{ font-size:24px; font-weight:700; line-height:1; font-feature-settings:"tnum"; }
.cx-stat .val small{ font-size:13px; font-weight:700; color:var(--c-text-3); margin-left:3px; }
.cx-stat .delta{ font-size:11.5px; font-weight:700; margin-top:8px; color:var(--c-text-3); }
.cx-stat .delta.up{ color:var(--c-ok); } .cx-stat .delta.down{ color:var(--c-danger); }

/* ---- tables ---- */
.cx-tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
.cx-tbl thead th{ text-align:left; font-size:12px; font-weight:700; color:var(--c-text-2); padding:11px 14px; background:var(--c-surface); border-bottom:1px solid var(--c-border); white-space:nowrap; }
.cx-tbl tbody td{ padding:11px 14px; border-bottom:1px solid var(--c-border); vertical-align:middle; }
.cx-tbl.click tbody tr{ cursor:pointer; }
.cx-tbl.click tbody tr:hover td{ background:var(--c-hover); }
.cx-tbl .strong{ font-weight:700; }
.cx-tbl .right{ text-align:right; font-feature-settings:"tnum"; }
.cx-tbl .mut{ color:var(--c-text-3); }
.cx-tbl a{ font-weight:600; }
.cx-tbl tr.total td{ background:#eef3fb; font-weight:800; }

/* ---- key-value ---- */
.cx-kv{ display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:13px; }
.cx-kv dt{ color:var(--c-text-2); font-weight:500; white-space:nowrap; }
.cx-kv dd{ color:var(--c-text); font-weight:600; text-align:right; }

/* ---- progress bar ---- */
.cx-bar{ height:8px; border-radius:5px; background:var(--c-muted); overflow:hidden; }
.cx-bar > i{ display:block; height:100%; background:var(--c-primary); border-radius:5px; }
.cx-bar.ok > i{ background:var(--c-ok); } .cx-bar.warn > i{ background:var(--c-warn); }

/* ---- grids ---- */
.cx-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cx-grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

/* ============================================================
   拡張コンポーネント（共通トークン参照）
   ============================================================ */
/* tabs */
.cx-tabs{ display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--c-border); }
.cx-tab{ padding:10px 15px; font-size:13px; font-weight:700; color:var(--c-text-2); cursor:pointer; text-decoration:none; border:1px solid transparent; border-bottom:0; border-radius:9px 9px 0 0; white-space:nowrap; position:relative; top:1px; }
.cx-tab:hover{ background:var(--c-hover); color:var(--c-text); }
.cx-tab.active{ background:#fff; color:var(--c-primary); border-color:var(--c-border); }
.cx-tabpanel{ background:#fff; border:1px solid var(--c-border); border-top:0; border-radius:0 0 var(--c-radius-lg) var(--c-radius-lg); padding:22px; }

/* judge bar */
.cx-judge{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.cx-jb{ border:1px solid var(--c-border); border-left-width:4px; border-radius:10px; padding:12px 14px; background:#fff; }
.cx-jb .t{ font-size:12px; color:var(--c-text-2); font-weight:700; margin-bottom:6px; }
.cx-jb .v{ font-size:16px; font-weight:700; }
.cx-jb .why{ font-size:11px; color:var(--c-text-3); margin-top:5px; line-height:1.5; }
.cx-jb.req{ border-left-color:var(--c-danger); } .cx-jb.req .v{ color:var(--c-danger); }
.cx-jb.alert{ border-left-color:var(--c-warn); } .cx-jb.alert .v{ color:var(--c-warn); }
.cx-jb.no{ border-left-color:var(--c-ok); } .cx-jb.no .v{ color:var(--c-ok); }
.cx-jb.info{ border-left-color:var(--c-primary); } .cx-jb.info .v{ color:var(--c-primary); }

/* forms */
.cx-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.cx-form.cols4{ grid-template-columns:repeat(4,1fr); }
.cx-form .full{ grid-column:1 / -1; }
.cx-field label{ display:block; font-size:12px; font-weight:700; color:var(--c-text-2); margin-bottom:6px; }
.cx-field .unit{ font-weight:500; color:var(--c-text-3); margin-left:6px; font-size:11px; }
.cx-field .req{ color:var(--c-danger); margin-left:4px; }
.cx-field .help{ font-size:11px; color:var(--c-text-3); margin-top:5px; line-height:1.5; }
.cx-input{ width:100%; height:42px; padding:0 12px; border:1px solid var(--c-border); border-radius:var(--c-radius); font-family:var(--font-jp); font-size:13.5px; color:var(--c-text); outline:0; background:#fff; transition:border-color .18s,box-shadow .18s; }
.cx-input:focus{ border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(11,87,196,.12); }
select.cx-input{ height:42px; }
textarea.cx-input{ height:auto; min-height:60px; padding:10px 12px; resize:vertical; line-height:1.6; }
.cx-input.calc{ background:var(--c-surface); font-weight:700; }
.cx-input.right{ text-align:right; }

/* note */
.cx-note{ background:var(--c-primary-bg); border:1px solid #d3e3fb; border-radius:10px; padding:11px 14px; font-size:12.5px; line-height:1.7; color:var(--c-text); }
.cx-note.warn{ background:var(--c-warn-bg); border-color:#f0dca8; }
.cx-note.danger{ background:var(--c-danger-bg); border-color:#f4c2cf; }

/* vertical timeline list */
.cx-tl{ list-style:none; padding:0; margin:0; }
.cx-tl li{ position:relative; padding:0 0 15px 22px; }
.cx-tl li::before{ content:''; position:absolute; left:3px; top:3px; width:11px; height:11px; border-radius:50%; background:var(--c-text-3); border:2px solid #fff; box-shadow:0 0 0 1px var(--c-border); z-index:1; }
.cx-tl li:not(:last-child)::after{ content:''; position:absolute; left:8px; top:13px; bottom:0; width:2px; background:var(--c-border); }
.cx-tl li.done::before{ background:var(--c-ok); }
.cx-tl li.cur::before{ background:var(--c-primary); }
.cx-tl .tt{ font-size:13px; font-weight:700; }
.cx-tl .tm{ font-size:11.5px; color:var(--c-text-3); margin-top:2px; }

/* misc */
.cx-sep{ border:0; border-top:1px solid var(--c-border); margin:18px 0; }
.cx-sub{ background:#fff; border:1px solid var(--c-border); border-radius:12px; padding:16px 18px; }
.cx-sub.muted{ background:var(--c-surface); }
.cx-sub > h4{ font-size:13px; font-weight:700; margin:0 0 12px; color:var(--c-text-2); }
.cx-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cx-toolbar .sp{ flex:1; }
.cx-fchip{ border:1px solid var(--c-border); background:#fff; border-radius:9999px; padding:5px 12px; font-size:12px; font-weight:600; color:var(--c-text-2); cursor:pointer; }
.cx-fchip:hover{ border-color:var(--c-primary); color:var(--c-primary); }
.cx-banner{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--c-text-2); margin-bottom:12px; }

/* ============================================================
   帳票（A4 紙面イメージ）
   ============================================================ */
.cx-docwrap{ min-height:100vh; background:#586173; padding:0 0 40px; }
.cx-docnav{ position:sticky; top:0; z-index:10; background:#0b1f3f; color:#fff; display:flex; align-items:center; gap:12px; padding:11px 18px; font-size:13px; }
.cx-docnav a{ color:#cfe0ff; text-decoration:none; font-weight:600; }
.cx-docnav b{ font-size:14px; }
.cx-docnav .tag{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:2px 9px; font-size:11px; font-weight:600; }
.cx-docnav .tag.hihi{ background:#7a2230; border-color:#a8404f; color:#ffd9d2; }
.cx-docnav .spacer{ flex:1; }
.cx-docnav .hint{ font-size:11px; color:#9fb4cd; }
.cx-paper{ background:#fff; width:794px; max-width:calc(100% - 32px); margin:24px auto; padding:38px 42px; box-shadow:var(--c-shadow-3); border-radius:2px; }
.cx-paper.l{ width:1040px; }
.cx-ftitle{ text-align:center; font-size:20px; letter-spacing:.36em; font-weight:700; margin:8px 0 16px; }
.cx-fmeta{ display:flex; justify-content:space-between; font-size:11px; color:#444; }
.cx-ft{ width:100%; border-collapse:collapse; font-size:12px; color:#1f2937; }
.cx-ft td,.cx-ft th{ border:1px solid #9aa6b5; padding:5px 8px; vertical-align:middle; }
.cx-ft th{ background:#eef2f7; font-weight:700; text-align:center; }
.cx-ft .lab{ background:#eef2f7; font-weight:700; white-space:nowrap; }
.cx-ft .fill{ background:#fff7e0; }
.cx-ft .num{ text-align:right; font-feature-settings:"tnum"; }
.cx-ft .ctr{ text-align:center; }
.cx-ft .sec td{ background:#dde6f2; font-weight:700; }
.cx-legend{ margin-top:14px; font-size:11px; color:#3a3f4a; line-height:1.7; border-top:1px dashed #aeb6c2; padding-top:9px; }
.cx-stamp-row{ display:flex; gap:8px; justify-content:flex-end; margin-bottom:8px; }
.cx-stamp{ width:80px; border:1px solid #9aa6b5; text-align:center; }
.cx-stamp .lab{ font-size:10px; background:#eef2f7; border-bottom:1px solid #9aa6b5; padding:3px; font-weight:700; }
.cx-stamp .body{ height:44px; }
.cx-hihi{ text-align:right; font-weight:800; color:#7a2230; letter-spacing:.3em; }

/* responsive */
@media (max-width:860px){
  .cx-body{ grid-template-columns:1fr; }
  .cx-side{ display:none; }
  .cx-stats,.cx-form.cols4{ grid-template-columns:repeat(2,1fr); }
  .cx-grid2,.cx-grid3{ grid-template-columns:1fr; }
  .cx-search{ display:none; }
}