* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background: #f7f8fa; color: #182635; font-size: 14px; }
a { color: #cf201c; text-decoration: none; }
.app { display: flex; min-height: 100vh; }
.sidebar { width: 210px; background: #182635; color: #cbd5e1; display: flex; flex-direction: column; flex-shrink: 0; }
.brand { padding: 18px 16px; font-size: 15px; font-weight: 700; color: #fff; border-bottom: 1px solid #2b3b4e; line-height: 1.4; }
.sidebar nav { flex: 1; padding: 8px 0; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 11px 16px; color: #cbd5e1; font-size: 13px; }
.sidebar nav a:hover { background: #223245; color: #fff; }
.sidebar nav a.active { background: #cf201c; color: #fff; }
.sidebar .icon { width: 18px; text-align: center; }
.sidebar-footer { padding: 14px 16px; border-top: 1px solid #2b3b4e; font-size: 12px; }
.sidebar-footer .muted { color: #7d8fa3; margin: 2px 0 8px; }
.sidebar-footer .logout { color: #93b4f5; font-size: 12px; }
.main { flex: 1; min-width: 0; }
.topbar { background: #fff; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e4e8ed; }
.company-name { font-weight: 700; }
.company-switch select { padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; }
.topbar-right { color: #626e7c; font-size: 13px; }
.content { padding: 24px; }
h1 { font-size: 20px; margin-bottom: 18px; }
h2 { font-size: 15px; margin: 22px 0 10px; }
.flash { margin: 0 0 16px; padding: 10px 16px; border-radius: 8px; font-size: 13px; }
.flash-success { background: #def7ec; color: #21735b; }
.flash-error { background: #fde8e8; color: #ac2927; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: #fff; border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.kpi .label { font-size: 12px; color: #626e7c; margin-bottom: 6px; }
.kpi .value { font-size: 22px; font-weight: 700; }
.kpi .value.blue { color: #cf201c; } .kpi .value.dark { color: #182635; }
.kpi .sub { font-size: 11px; margin-top: 4px; }
.card { background: #fff; border-radius: 10px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.05); margin-bottom: 20px; overflow-x: auto; }
.card h2 { margin-top: 0; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 8px 10px; background: #f8fafc; color: #626e7c; font-weight: 600; border-bottom: 1px solid #e4e8ed; white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; }
td.num, th.num { text-align: right; }
tr:hover td { background: #f8fafc; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge-red { background: #fde8e8; color: #ac2927; }
.badge-orange { background: #fef3c7; color: #8b5c13; }
.badge-green { background: #def7ec; color: #21735b; }
.badge-gray { background: #e5e7eb; color: #4b5563; }
.badge-blue { background: #dbeafe; color: #1e4fa3; }
form.stack { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
label.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #374151; }
input[type=text], input[type=date], input[type=number], input[type=email], input[type=password], input[type=file], input[type=month], select, textarea {
  padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; font-family: inherit; background: #fff; }
textarea { resize: vertical; }
.hint { font-size: 11px; color: #626e7c; font-weight: 400; }
.btn { display: inline-block; padding: 9px 18px; border-radius: 6px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; background: #cf201c; color: #fff; }
/* 押せないボタンは見た目でも分かるようにする（メール未連携時の送信ボタンなど） */
.btn:disabled, .btn[disabled] { background: #c8cdd4; color: #f4f5f7; cursor: not-allowed; }
.btn:hover { background: #ae1916; }
.btn-secondary { background: #fff; color: #374151; border: 1px solid #cbd5e1; }
.btn-danger { background: #dc2626; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.recon-grid { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.recon-item { padding: 10px 12px; border: 1px solid #e4e8ed; border-radius: 8px; margin-bottom: 8px; display: block; color: inherit; }
.recon-item:hover { border-color: #cf201c; }
.recon-item.selected { border-color: #cf201c; background: #fff0ed; }
.candidate { border: 1px solid #e4e8ed; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.score { font-weight: 700; color: #cf201c; }
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #182635; }
.login-box { background: #fff; border-radius: 12px; padding: 36px; width: 380px; }
.login-box h1 { text-align: center; }
.login-box .demo { margin-top: 18px; font-size: 11px; color: #626e7c; background: #f8fafc; padding: 10px 12px; border-radius: 8px; line-height: 1.7; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 20px;
  background: #fff; color: #3c4043; border: 1px solid #dadce0; font-weight: 600; text-decoration: none; }
.btn-google:hover { background: #f8faff; border-color: #c6d3e8; }
.or-sep { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: #94a3b8; font-size: 12px; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: #e4e8ed; }
.ocr-panel { background: #fff0ed; border: 1px solid #f2dcd5; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; font-size: 13px; }
.ocr-panel .conf-low { color: #ac2927; font-weight: 700; }
.ocr-panel .conf-ok { color: #21735b; font-weight: 700; }
.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid #e4e8ed; flex-wrap: wrap; }
.tabs a { padding: 8px 16px; font-size: 13px; color: #626e7c; border-bottom: 2px solid transparent; }
.tabs a.active { color: #cf201c; border-bottom-color: #cf201c; font-weight: 600; }
.filter-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.muted { color: #626e7c; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.progress-track { background:#e5e7eb; border-radius:999px; height:8px; overflow:hidden; }
.progress-bar { background:#cf201c; height:100%; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label.field.missing { color: #ac2927; }
label.field.missing > input, label.field.missing > select, label.field.missing > textarea { border-color: #f2b8b5; background: #fff7f7; }
@media (max-width: 760px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; align-items: center; position: sticky; top: 0; z-index: 100; }
  .brand { padding: 10px 12px; font-size: 12px; border-bottom: none; white-space: nowrap; }
  .brand img.ow-logo { width: 112px; }
  .sidebar nav { display: flex; overflow-x: auto; padding: 0; }
  .sidebar nav a { flex-direction: column; gap: 2px; padding: 8px 10px; font-size: 10px; white-space: nowrap; }
  .sidebar .icon { width: auto; font-size: 17px; }
  .sidebar-footer { display: none; }
  .topbar { padding: 10px 14px; }
  .content { padding: 14px; }
  h1 { font-size: 17px; margin-bottom: 12px; }
  .dash-grid, .recon-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  form.stack { max-width: none; }
  table { font-size: 12px; }
  .btn { padding: 12px 18px; }
  input, select, textarea { font-size: 16px !important; }
}

/* Compatibility for standalone document classes and line editor hooks. */
.sheet { width:210mm; min-height:280mm; margin:20px auto; background:#fff; padding:18mm 16mm; position:relative; }
.toolbar { text-align:center; padding:12px; background:#182635; }
.toolbar button { padding:10px 28px; font-size:14px; border:none; border-radius:6px; background:#1a56db; color:#fff; cursor:pointer; font-weight:600; }
h1.dt { text-align:center; font-size:26px; letter-spacing:16px; text-indent:16px; margin-bottom:8mm; font-weight:600; }
.dh { display:flex; justify-content:space-between; margin-bottom:6mm; }
.pn { font-size:17px; border-bottom:1px solid #1a1a1a; padding:0 8px 4px 2px; min-width:90mm; }
.meta { text-align:right; font-size:12px; line-height:1.9; }
.own { text-align:right; font-size:12px; line-height:1.8; margin-bottom:6mm; }
.own .on { font-size:15px; font-weight:600; }
.sr { margin-bottom:4mm; font-size:13px; }
.tb { display:inline-block; border:2px solid #1a1a1a; padding:3mm 10mm; font-size:15px; margin-bottom:6mm; }
.tb strong { font-size:22px; margin-left:8mm; }
table.it { width:100%; border-collapse:collapse; margin-bottom:4mm; }
table.it th { background:#182635; color:#fff; padding:2.4mm 2mm; font-size:12px; font-weight:600; }
table.it td { border-bottom:1px solid #bbb; padding:2.2mm 2mm; }
.num { text-align:right; } .ctr { text-align:center; }
.sums { width:70mm; margin-left:auto; margin-bottom:6mm; }
.sums div { display:flex; justify-content:space-between; padding:1.6mm 2mm; }
.sums .g { border-top:2px solid #1a1a1a; font-weight:700; font-size:15px; }
.box { border:1px solid #999; padding:3mm; margin-bottom:4mm; font-size:12px; line-height:1.8; }
.box .bl { font-weight:700; font-size:11px; color:#555; }
.stamp { position:absolute; right:16mm; top:60mm; width:22mm; height:22mm; border:1px solid #999; color:#999; font-size:10px; text-align:center; padding-top:2mm; }

.lr { vertical-align: middle; }
.la { text-align: right; font-variant-numeric: tabular-nums; }
.lnk { border: none; background: none; color: #cf201c; cursor: pointer; padding: 0; font-size: 13px; font-family: inherit; }

/* Shared class names stay compatible with all existing pages. */
body { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; line-height: 1.65; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #385f9b; outline-offset: 3px; }
.sidebar { width: 224px; background: #fff; color: #182635; border-right: 1px solid #e4e8ed; padding: 24px 14px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 8px 4px 24px; color: #182635; border: 0; }
.brand img { width: 43px; height: 43px; }
.brand img.ow-logo { width: 172px; height: auto; max-width: 100%; display: block; border-radius: 4px; }
.login-story .brand { flex-direction: column; align-items: flex-start; gap: 12px; }
.login-story .brand img.ow-logo { width: 230px; }
.login-story .brand-caption { color: #76695e; font-size: 12px; }
.wordmark { font-size: 22px; letter-spacing: .01em; line-height: 1.3; font-weight: 800; }
.wm-money { color: #1f3a5f; } .wm-dock { color: #2f9e6e; }
.brand-caption { display: block; font-size: 10px; font-weight: 400; letter-spacing: .04em; }
.sidebar nav a { min-height: 48px; margin: 3px 0; border-radius: 10px; padding: 12px; color: #626e7c; }
.sidebar nav a:hover { background: #f7f8fa; color: #182635; }
.sidebar nav a.active { background: #fff0ed; color: #cf201c; font-weight: 700; }
.sidebar-footer { border-top: 1px solid #e4e8ed; padding: 18px 10px 0; }
.sidebar-footer .muted { color: #626e7c; }
.sidebar-footer .logout { color: #cf201c; display: inline-block; padding: 10px 0; }
.topbar { min-height: 77px; padding: 16px 36px; gap: 12px; }
.topbar > * { min-width: 0; }
.company-switch select { max-width: 100%; }
.content { max-width: 1340px; margin: auto; padding: 32px 36px 48px; }
h1 { font-size: 28px; letter-spacing: -.04em; margin-bottom: 24px; }
h2 { font-size: 17px; }
.card, .kpi { border: 1px solid #e4e8ed; border-radius: 16px; box-shadow: none; padding: 22px; margin-bottom: 24px; }
.kpi { margin-bottom: 0; min-width: 0; }
.kpi .value { font-size: 27px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kpi .value.blue { color: #182635; }
.kpi .sub { margin-top: 8px; }
.kpi-row { gap: 14px; margin-bottom: 26px; }
.btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-family: inherit; text-align: center; }
.btn-secondary:hover, .btn-google:hover { background: #f7f8fa; color: #182635; border-color: #aeb8c3; }
.btn-danger:hover { background: #ae1916; }
.btn-sm { min-height: 40px; }
input[type=text], input[type=date], input[type=number], input[type=email], input[type=password], input[type=file], input[type=month], select, textarea { min-height: 48px; border-radius: 9px; color: #182635; max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }
.progress-bar { background: #182635; }
.hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff4ee; border: 1px solid #f2dcd5; border-radius: 16px; padding: 28px; margin-bottom: 26px; }
.hero h2 { margin: 0 0 8px; font-size: 23px; }
.hero p { color: #765e53; }
.hero .btn { flex-shrink: 0; }
.section-caption { color: #626e7c; margin: -4px 0 18px; font-size: 12px; }
.login-wrap { display: grid; grid-template-columns: 1fr 1fr; background: #fff; align-items: stretch; }
.login-story { background: #f4f0ec; padding: 56px 12%; display: flex; flex-direction: column; justify-content: center; }
.login-story h2 { font-size: 40px; line-height: 1.6; letter-spacing: -.05em; margin: 56px 0 20px; }
.login-story h2 span { color: #cf201c; }
.login-story p { color: #76695e; }
.login-box { width: 100%; max-width: 440px; padding: 48px 36px; align-self: center; justify-self: center; }
.login-box h1 { font-size: 25px; text-align: left; margin-bottom: 8px; }
.mobile-nav { display: none; }
.receipts-table td { overflow-wrap: anywhere; }
.receipts-table .receipt-detail a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1150px) { .content { padding: 28px 24px; } .dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .sidebar { display: none; }
  body:has(.mobile-menu[open]) .sidebar { display: flex; flex-direction: column; align-items: stretch; position: fixed; inset: 0 0 calc(76px + env(safe-area-inset-bottom)); width: 100%; overflow-y: auto; z-index: 100; padding: 18px; }
  .sidebar nav { display: block; overflow: visible; }
  .sidebar nav a { flex-direction: row; font-size: 13px; gap: 12px; }
  .sidebar-footer { display: block; }
  .mobile-nav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset: auto 0 0; z-index: 110; background: #fff; border-top: 1px solid #e4e8ed; padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); }
  .mobile-nav > a, .mobile-menu summary, .mobile-nav > span { min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #626e7c; font-size: 11px; cursor: pointer; }
  .mobile-nav .icon { font-size: 22px; line-height: 1.2; }
  .mobile-nav .active, .mobile-menu[open] summary { color: #cf201c; font-weight: 700; background: #fff0ed; border-radius: 10px; }
  .mobile-menu summary { list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-nav > span { opacity: .5; cursor: default; }
  .topbar { padding: 12px 18px; min-height: 65px; flex-wrap: wrap; }
  .topbar-right { font-size: 11px; }
  .content { padding: 24px 18px calc(104px + env(safe-area-inset-bottom)); }
  h1 { font-size: 24px; margin-bottom: 20px; }
  .card { padding: 18px; }
  .kpi { padding: 16px 12px; }
  .kpi .value { font-size: 23px; }
  .hero { display: block; padding: 22px; }
  .hero h2 { font-size: 21px; }
  .hero .btn { margin-top: 18px; width: 100%; }
  .filter-row form { width: 100%; }
  .filter-row input, .filter-row select { width: 100%; min-width: 0; }
  .receipts-card { padding: 0; border: 0; background: transparent; overflow: visible; }
  .receipts-table, .receipts-table tbody { display: block; }
  .receipts-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .receipts-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; background: #fff; border: 1px solid #e4e8ed; border-radius: 16px; padding: 18px; margin-bottom: 14px; }
  .receipts-table td { display: block; border: 0; padding: 0; min-width: 0; }
  .receipts-table td::before { content: attr(data-label); display: block; font-size: 10px; color: #626e7c; font-weight: 400; margin-bottom: 2px; }
  .receipts-table .receipt-vendor { font-weight: 700; font-size: 15px; }
  .receipts-table .receipt-memo { grid-column: 1 / -1; }
  .receipts-table .receipt-detail { text-align: right; }
  .receipts-table td[colspan] { grid-column: 1 / -1; }
  .login-wrap { grid-template-columns: 1fr; }
  .login-story { padding: 28px 24px; }
  .login-story .brand { padding-bottom: 0; }
  .login-story h2 { font-size: 27px; margin: 24px 0 12px; }
  .login-box { padding: 28px 24px 40px; }
}

/* Prototype 2: shared primitives retain all existing page selectors. */
.page-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.page-head h1 { margin:0; line-height:1.4; }
.page-head p { margin-top:8px; color:#626e7c; font-size:13px; }
.eyebrow { font-size:10px; letter-spacing:.18em; color:#626e7c; margin-bottom:8px; }
.stat-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.stat { background:#fff; border:1px solid #e4e8ed; border-radius:12px; padding:18px 20px; }
.stat small { color:#626e7c; font-size:11px; }
.stat strong { display:block; font-size:26px; margin-top:6px; }
.format-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; }
.format-card { display:flex; flex-direction:column; justify-content:space-between; gap:20px; border:1px solid #e4e8ed; border-radius:12px; padding:22px; }
.format-card strong { font-size:17px; }
.format-card .btn { width:100%; }
.empty { padding:32px; text-align:center; color:#626e7c; }
.badge { border-radius:6px; padding:3px 9px; }
.badge-green { background:#edf7f1; }
.badge-orange { background:#fff4dc; }
.tabs { margin-bottom:24px; }
.tabs a { min-height:48px; display:inline-flex; align-items:center; }
.card td { padding:16px 10px; }
.card th { padding:12px 10px; font-weight:500; }
.pz { line-height:1.55; overflow-wrap:anywhere; }
.on { font-weight:600; }
.ologo { max-width:150px; max-height:60px; object-fit:contain; }
.oseal { width:21mm; object-fit:contain; }
@media(max-width:1000px) { .format-grid { grid-template-columns:1fr; } }
@media(max-width:760px) {
 .page-head { align-items:start; flex-direction:column; }
 .stat-row { gap:8px; } .stat { padding:12px 10px; } .stat strong { font-size:21px; }
 .card td { padding:12px 8px; } .receipts-table td { padding:0; }
 .tabs a { padding:10px; }
}

/* Form sections and shared controls. */
.lnk:hover { color:#ae1916; text-decoration:underline; }
.check { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
/* Google連携で「いま何が許可されているか」を一目で分かるようにする */
.perm-list { list-style:none; margin:0; padding:0; font-size:13px; }
.perm-list li { padding:9px 0; border-bottom:1px solid #f1f5f9; line-height:1.7; }
.perm-list li:last-child { border-bottom:0; }
.perm-ok { color:#21735b; font-weight:700; margin-right:6px; }
.perm-ng { color:#ac2927; font-weight:700; margin-right:6px; }
.check input[type=checkbox] { flex-shrink:0; }
.bulkbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.sec { font-size:14px; margin:0; padding:0 0 10px; border-bottom:1px solid #e4e8ed; }
.form-section { min-width:0; display:flex; flex-direction:column; gap:14px; padding:16px; border:1px solid #e4e8ed; border-left:3px solid #cf201c; border-radius:8px; background:#fafbfc; }
.form-section .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-section .field { min-width:0; }
.partner-detail { overflow:visible; }
.partner-actions { position:sticky; bottom:0; z-index:10; padding:14px 16px; background:#fff; border:1px solid #e4e8ed; border-radius:10px; box-shadow:0 -3px 12px rgba(24,38,53,.07); }
.partner-form input, .partner-form select, .partner-form textarea { scroll-margin-bottom:180px; }

.layout-choices .filter-row { gap:8px; }
.layout-choices h2:not(:first-child) { padding-top:18px; border-top:1px solid #e4e8ed; }
.saved-choices { padding:12px; background:#f7f8fa; border:1px solid #e4e8ed; border-radius:10px; }
.saved-choices .btn:not(.btn-secondary) { box-shadow:0 0 0 3px #fde8e8; }
#cols { min-width:650px; }
#cols select, #cols input { width:100%; }
#cols .column-number { text-align:center; color:#374151; font-weight:700; font-variant-numeric:tabular-nums; background:radial-gradient(circle at center,#edf0f4 16px,transparent 17px); }
#cols .icon-button { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; width:36px; height:36px; padding:0; border:1px solid #cbd5e1; border-radius:8px; color:#374151; background:#fff; font-size:17px; text-decoration:none; }
#cols .icon-button:hover { background:#edf0f4; border-color:#94a3b8; }
#cols .icon-button-danger { border-color:#f2b8b5; background:#fff7f7; }
#cols .icon-button-danger:hover { background:#fde8e8; border-color:#cf201c; }
.icon-button-danger::before { content:'×'; font-size:22px; }
.delete-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.column-add { margin:0; padding:14px; background:#f8fafc; border:1px solid #e4e8ed; border-top:0; border-radius:0 0 10px 10px; }
.column-add select { flex:1; min-width:0; }

.import-steps { list-style:none; counter-reset:import-step; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.import-steps li { counter-increment:import-step; padding:16px; border:1px solid #e4e8ed; border-radius:10px; background:#f8fafc; font-size:13px; line-height:1.8; }
.import-steps li::before { content:counter(import-step,decimal-leading-zero); display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin-bottom:10px; border-radius:50%; background:#182635; color:#fff; font-size:12px; font-weight:700; }
.upload-field { min-width:0; padding:14px; border:1px dashed #aeb8c3; border-radius:10px; background:#f8fafc; }
.upload-field input[type=file] { width:100%; min-width:0; padding:10px; }
.upload-field input::file-selector-button { margin-right:10px; padding:8px 12px; border:1px solid #cbd5e1; border-radius:6px; background:#f7f8fa; color:#182635; font:inherit; cursor:pointer; }
.upload-field input::file-selector-button:hover { background:#edf0f4; }
.import-table { min-width:1120px; }
.import-table td { vertical-align:top; }
.import-table th:nth-child(3), .import-table th:nth-child(4) { min-width:200px; }
.import-table th:nth-child(5) { min-width:170px; }
.import-table input { padding:10px 12px; }
.import-table input + input { margin-top:8px !important; }
.import-table tr:has(input[name=partner_name]) td { background:#fff9ef; border-bottom-color:#f2e4ce; }
.import-table tr:has(input[name=partner_name]) td:first-child { box-shadow:inset 3px 0 #cf201c; }
.import-table .badge-blue { background:#fff4dc; color:#8b5c13; }

.send-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 24px; font-size:13px; }
.send-details > div { min-width:0; padding-left:12px; border-left:2px solid #e4e8ed; }
.send-details dt { color:#626e7c; font-size:11px; margin-bottom:5px; }
.send-details dd { overflow-wrap:anywhere; }
.bulk-mail-table { min-width:850px; }
.bulk-mail-table tr.ng td { background:#fafbfc; color:#626e7c; }
.bulk-mail-table .send-reason { min-width:220px; max-width:360px; padding:10px 12px; border-left:3px solid #cf201c; border-radius:4px; background:#fff0ed; line-height:1.8; overflow-wrap:anywhere; }
@media(max-width:760px) {
  .form-section { padding:12px; }
  .form-section .form-grid, .import-steps, .send-details { grid-template-columns:minmax(0,1fr); }
  .partner-actions { bottom:calc(76px + env(safe-area-inset-bottom)); padding:10px; gap:8px; }
  .partner-actions .btn { flex:1; padding:10px 8px; }
  #cols .icon-button { width:44px; height:44px; }
  .column-add select { flex-basis:100%; }
  .import-steps li { position:relative; padding:14px 14px 14px 58px; min-height:60px; }
  .import-steps li::before { position:absolute; left:14px; top:14px; margin:0; }
  .saved-choices .btn, .preset-choices .btn { max-width:100%; overflow-wrap:anywhere; }
}

/* Receipt capture, optional entry and review. */
.capture-primary { padding:22px; border:1px solid #f2b8b5; border-radius:12px; background:#fff0ed; }
.capture-primary input[type=file] { width:100%; margin:10px 0; padding:10px; background:#fff; }
.capture-primary input::file-selector-button { min-height:56px; padding:14px 22px; margin-right:12px; border:0; border-radius:9px; background:#cf201c; color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.capture-primary input::file-selector-button:hover { background:#ae1916; }
.capture-primary .hint { color:#765e53; line-height:1.8; }
.capture-secondary { padding:14px; border:1px solid #e4e8ed; border-radius:10px; background:#fafbfc; }
.capture-secondary input[type=file] { width:100%; font-size:12px; }
.capture-secondary input::file-selector-button { min-height:40px; padding:8px; margin-right:8px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:#374151; font:inherit; cursor:pointer; }
.capture-card .or-sep { margin:0; }
/* 撮影・選択をひとつの列にまとめた登録画面 */
.rc-btn { display:block; cursor:pointer; }
.rc-btn .t { display:block; font-weight:700; }
.rc-btn input[type=file] { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }
.rc-btn.capture-primary { position:relative; text-align:center; }
.rc-btn.capture-primary .t { display:inline-block; min-height:56px; line-height:56px; padding:0 26px; border-radius:12px; background:#cf201c; color:#fff; font-size:16px; }
.rc-btn.capture-primary:hover .t { background:#ae1916; }
.rc-btn.capture-primary.is-full .t { background:#9ca3af; }
.rc-btn.capture-primary.is-busy .t { opacity:.6; }
.rc-btn.capture-primary .hint { display:block; margin-top:10px; }
.rc-btn.capture-secondary { position:relative; }
.rc-btn.capture-secondary .t { font-size:14px; color:#1e4fa3; text-decoration:underline; text-underline-offset:3px; }
.rc-btn.capture-secondary .hint { display:block; margin-top:4px; }
.rc-queue { padding:12px; border:1px solid #e4e8ed; border-radius:12px; background:#fff; }
.rc-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.rc-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:10px; }
.rc-item { position:relative; border:1px solid #e4e8ed; border-radius:10px; overflow:hidden; background:#f7f8fa; }
.rc-item img, .rc-item .rc-pdf { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }
.rc-item .rc-pdf { display:flex; align-items:center; justify-content:center; font-weight:800; color:#6b7280; }
.rc-item .rc-cap { display:block; font-size:11px; color:#6b7280; padding:4px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-item .rc-rm { position:absolute; top:4px; right:4px; width:28px; height:28px; border:0; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; font-size:16px; line-height:28px; text-align:center; cursor:pointer; padding:0; }
.receipt-confirm { overflow:visible; }
.receipt-confirm .optional-badge { font-size:13px; vertical-align:middle; }
.receipt-confirm > .flash-success { padding:18px; border:1px solid #c8e6d5; line-height:1.9; }
.receipt-confirm > .flash-success > strong { display:block; font-size:17px; }
.receipt-confirm .stack { gap:20px; }
.receipt-confirm .form-section { padding:20px; gap:16px; }
.receipt-confirm .form-section .hint { font-size:12px; }
.receipt-payment { border-left-color:#182635; }
.receipt-mixed { padding:16px; background:#fff; border:1px solid #cbd5e1; border-radius:10px; }
.receipt-result:empty { display:none; }
.receipt-result:not(:empty) { margin-top:12px; padding:14px 16px; border:1px solid currentColor; border-left-width:4px; border-radius:8px; background:#fff; font-size:14px; font-weight:700; line-height:1.8; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.receipt-save-actions { padding-top:18px; border-top:1px solid #e4e8ed; align-items:stretch; }
.receipt-save-actions .btn { width:100%; }
.receipt-save-actions .btn:not(.btn-secondary) { min-height:56px; font-size:16px; }
.receipt-save-actions > a { display:inline-flex; align-items:center; min-height:44px; margin:auto; }
.duplicate-warning { padding:22px; border:1px solid #edcf93; border-left:5px solid #b45309; background:#fff4dc; color:#8b5c13; line-height:1.9; }
.duplicate-warning strong { font-size:17px; }
.duplicate-warning:has(+ .duplicate-card .badge-red) { border-color:#f2b8b5; border-left-color:#cf201c; background:#fde8e8; color:#ac2927; }
.duplicate-card table { table-layout:fixed; }
.duplicate-card th, .duplicate-card td { overflow-wrap:anywhere; white-space:normal; }
.duplicate-card .badge { white-space:normal; }
.duplicate-card tr:has(.badge-red) { background:#fff7f7; }
.duplicate-card tr:has(.badge-red) td:first-child { box-shadow:inset 3px 0 #cf201c; }
.duplicate-card td:last-child a { display:inline-flex; align-items:center; min-height:44px; }
.duplicate-card form { padding:20px 0 0; border-top:2px solid #e4e8ed; }
.duplicate-card .check { align-items:flex-start; padding:16px; border:1px solid #cbd5e1; border-radius:10px; background:#fafbfc; line-height:1.9; }
.duplicate-card .check input { width:20px; height:20px; margin-top:3px; accent-color:#cf201c; }
.duplicate-card > .hint { font-size:12px; line-height:1.9; color:#8b5c13; }
.commuter-list table { table-layout:fixed; }
.commuter-list th, .commuter-list td { overflow-wrap:anywhere; white-space:normal; }
.commuter-list td:has(> strong) { font-size:18px; color:#182635; }
.commuter-list tr:has(.badge-gray) td { background:#f1f3f5; color:#626e7c; border-bottom-color:#dce1e7; }
.commuter-list tr:has(.badge-gray) td:first-child { box-shadow:inset 3px 0 #94a3b8; }
.commuter-list .badge-gray { border:1px solid #aeb8c3; }
.commuter-list .lnk { min-height:44px; min-width:44px; }
.commuter-list td[colspan] { padding:30px 16px; text-align:center; background:#fafbfc; border:1px dashed #cbd5e1; }
.commuter-empty-action { display:none; }
.commuter-list:has(td[colspan]) table > tbody > tr:first-child { display:none; }
.commuter-list:has(td[colspan]) .commuter-empty-action { display:flex; width:fit-content; margin:16px auto 0; }
#commuter-add { scroll-margin-top:24px; }
.receipt-approval h2 { padding-bottom:12px; border-bottom:1px solid #e4e8ed; }
.receipt-approval .approval-requirement { padding:16px; border-radius:10px; border:1px solid #c8e6d5; border-left:4px solid #21735b; font-weight:600; line-height:1.8; }
.receipt-approval .approval-requirement.flash-error { background:#fff4dc; color:#8b5c13; border-color:#edcf93; border-left-color:#b45309; }
.receipt-approval > p.muted { padding:16px; background:#f7f8fa; border:1px solid #e4e8ed; border-radius:10px; line-height:1.9; }
.receipt-approval > p .hint { display:block; margin-top:8px; font-size:12px; }
.receipt-approval form.stack { max-width:none; }
@media(max-width:760px) {
  .capture-primary, .receipt-confirm .form-section { padding:14px; }
  .capture-primary input::file-selector-button { display:block; width:100%; margin:0 0 8px; }
  .receipt-confirm input, .receipt-confirm select { width:100%; min-width:0; }
  .duplicate-card table, .duplicate-card tbody, .commuter-list table, .commuter-list tbody { display:block; }
  .duplicate-card tr, .commuter-list tr { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:16px 0; border-bottom:1px solid #e4e8ed; }
  .duplicate-card tr:first-child, .commuter-list tr:first-child { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); }
  .duplicate-card td, .commuter-list td { display:block; border:0; padding:0; max-width:100%; }
  .duplicate-card td:nth-child(3), .duplicate-card td:nth-child(6), .commuter-list td:has(> strong), .commuter-list td[colspan] { flex-basis:100%; }
  .duplicate-card td:last-child, .commuter-list td:last-child:not([colspan]) { margin-left:auto; }
  .commuter-list tr:has(.badge-gray) { background:#f1f3f5; padding:14px; border-left:3px solid #94a3b8; border-radius:10px; }
  .commuter-list tr:has(.badge-gray) td:first-child, .duplicate-card tr:has(.badge-red) td:first-child { box-shadow:none; }
  .commuter-list tr:has(td[colspan]) { border:0; }
  .commuter-list td[colspan] { padding:24px 12px; }
  .duplicate-card .actions .btn, .receipt-approval .actions .btn { width:100%; }
}


/* ===== 第1段階: 素人にも読みやすい大きさ・余白・言葉（Codex提案を土台に） =====
   文字を大きく（本文16px・補足13px・表14px）、押すものは48px以上、カードは角丸16px。
   色は既存のブランド（紺 #182635・赤 #cf201c）のまま。 */
:root { --kc-text: #182635; --kc-muted: #586675; --kc-border: #dce2e8; --kc-bg: #f4f6f8; --kc-primary: #cf201c; --kc-primary-soft: #fff1ee; }
body { font-size: 16px; line-height: 1.75; background: var(--kc-bg); }
h1 { font-size: clamp(24px, 2.5vw, 30px); line-height: 1.4; }
h2 { font-size: 18px; line-height: 1.4; }
h3 { font-size: 16px; }
p { line-height: 1.75; }
.muted { color: var(--kc-muted); }
.hint { font-size: 13px; line-height: 1.7; color: var(--kc-muted); }
.section-caption { font-size: 13px; }
.eyebrow { font-size: 11px; }
table { font-size: 14px; }
th { font-size: 13px; }
.card td { padding: 14px 10px; }
.badge { font-size: 13px; padding: 4px 12px; line-height: 1.5; white-space: normal; }
.flash { font-size: 15px; padding: 14px 18px; line-height: 1.7; border: 1px solid transparent; }
.flash-success { border-color: #cfe2d5; }
.flash-error { border-color: #e6c0c0; }
.kpi .label { font-size: 15px; }
.kpi .value { font-size: clamp(26px, 3vw, 34px); line-height: 1.3; }
.kpi .sub { font-size: 13px; margin-top: 10px; }
.btn { min-height: 48px; padding: 12px 22px; font-size: 15px; border-radius: 10px; white-space: normal; }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
label.field { font-size: 15px; gap: 8px; }
input[type=text], input[type=date], input[type=number], input[type=email], input[type=password], input[type=file], input[type=month], select, textarea { font-size: 16px; padding: 11px 12px; min-height: 48px; border-color: #a6b2be; }
.check { font-size: 15px; }
.tabs a { font-size: 15px; }
.topbar-right { font-size: 14px; }
.company-switch select { font-size: 15px; }
.recon-item, .candidate { font-size: 15px; }
.ocr-panel { font-size: 15px; }
form.stack { max-width: 640px; }
/* メニュー: 4グループに折りたたむ */
.sidebar nav a { font-size: 15px; min-height: 48px; }
.sidebar nav .icon { width: 22px; font-size: 16px; }
.nav-group { border-top: 1px solid var(--kc-border); margin-top: 8px; padding-top: 6px; }
.nav-group summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--kc-muted); letter-spacing: .04em; cursor: pointer; border-radius: 10px; list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: '＋'; font-weight: 400; color: #94a3b8; }
.nav-group[open] summary::after { content: '−'; }
.nav-group summary:hover { background: #f7f8fa; color: var(--kc-text); }
.nav-count { display: inline-block; min-width: 22px; padding: 0 7px; margin-left: auto; margin-right: 8px; border-radius: 999px; background: #edf0f3; color: #495766; font-size: 11px; text-align: center; line-height: 20px; }
.nav-group__items { padding-bottom: 6px; }
.sidebar nav a.active { background: var(--kc-primary-soft); color: var(--kc-primary); }
@media (max-width: 760px) {
  body { font-size: 15px; }
  table { font-size: 13px; }
  .card td { padding: 12px 8px; }
  .kpi .value { font-size: 24px; }
  .sidebar nav a { font-size: 15px; }
  .nav-group summary { font-size: 14px; }
}

/* ===== 第2段階: 役割別ホームの部品 ===== */
.staff-content { max-width: 780px; }
.capture { position: relative; padding: 32px; background: #fff; }
.capture-mark { width: 52px; height: 52px; display: grid; place-items: center; background: var(--kc-primary-soft); color: var(--kc-primary); border-radius: 14px; font-size: 26px; margin-bottom: 18px; }
.capture h2 { font-size: 24px; margin-bottom: 8px; }
.capture p { color: var(--kc-muted); margin-bottom: 22px; }
.btn--hero { min-height: 64px; font-size: 18px; padding: 14px 32px; min-width: 300px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.section-heading h2 { margin: 0; }
.status-list, .task-list { list-style: none; padding: 0; margin: 0; }
.status-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--kc-border); }
.status-list li:first-child { border-top: 0; padding-top: 0; }
.status-list strong { display: block; font-size: 16px; }
.status-list strong a { color: var(--kc-text); text-decoration: none; }
.status-list strong a:hover { color: var(--kc-primary); }
.status-list small { color: var(--kc-muted); font-size: 14px; }
.status-right { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.status-right b { font-variant-numeric: tabular-nums; font-size: 16px; }
.summary-foot { margin-top: 14px; font-size: 14px; color: var(--kc-muted); }
.task-list li { display: flex; gap: 12px; padding: 18px 0; border-top: 1px solid var(--kc-border); }
.task-list li:first-child { border-top: 0; padding-top: 0; }
.task-number { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; background: #edf0f3; border-radius: 50%; font-size: 14px; font-weight: 700; color: #495766; }
.task-list h3 { font-size: 17px; margin: 0; }
.task-list p { font-size: 14px; color: var(--kc-muted); margin: 4px 0 12px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-kpis .kpi .label { font-size: 15px; }
@media (max-width: 1000px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .capture { padding: 22px; } .capture h2 { font-size: 21px; }
  .btn--hero { width: 100%; min-width: 0; }
  .home-kpis { grid-template-columns: minmax(0, 1fr); }
  .status-list li { align-items: flex-start; }
}

/* ===== 第3段階: 領収書の確認画面 ===== */
.steps { display: flex; gap: 14px; flex-wrap: wrap; color: var(--kc-muted); font-size: 14px; margin-bottom: 18px; }
.steps strong { color: var(--kc-text); }
.steps > *:not(:last-child)::after { content: '›'; margin-left: 14px; color: #aeb8c3; }
.confirm-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
.receipt-stage { background: #e9edf0; border-radius: 16px; padding: 20px; }
.receipt-stage .card { margin: 0; }
.confirm-card { margin: 0; overflow: visible; }
.confirm-card > .badge { margin-bottom: 14px; }
.readout { margin: 0 0 18px; }
.readout div { padding: 14px 0; border-bottom: 1px solid var(--kc-border); }
.readout dt { color: var(--kc-muted); font-size: 14px; }
.readout dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; }
.readout .amount { font-size: 30px; font-variant-numeric: tabular-nums; }
.readout .hint { font-weight: 400; }
.optional-fields { border-top: 1px solid var(--kc-border); padding-top: 4px; }
.optional-fields > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }
.optional-fields > summary::-webkit-details-marker { display: none; }
.optional-fields > summary::after { content: '＋'; color: #94a3b8; font-weight: 400; }
.optional-fields[open] > summary::after { content: '−'; }
.optional-fields > .stack { padding: 6px 0 18px; }
.optional-fields .form-section { border: 0; padding: 0; background: transparent; }
.confirm-card .btn--hero { width: 100%; margin-top: 10px; }
@media (max-width: 900px) {
  .confirm-grid { display: flex; flex-direction: column; gap: 20px; }
  .receipt-stage { order: 2; }
}

/* ===== 海外拠点: 口座・送金・通帳 ===== */
.fx-kpis .kpi .value { font-size: 22px; letter-spacing: -0.01em; word-break: break-all; }
.fx-acct-list { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--kc-border, #e4e8ed); font-size: 13px; }
.fx-acct-list li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.fx-acct-list b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 8px; }
.fx-node { flex: 1 1 180px; min-width: 160px; background: #f7f9fb; border: 1px solid #e4e8ed; border-radius: 14px; padding: 14px 16px; }
.fx-node--jp { background: #fff7f5; border-color: #f3d3cc; }
.fx-node__title { font-size: 13px; color: #626e7c; margin-bottom: 4px; }
.fx-node__value { font-size: 20px; font-weight: 700; word-break: break-all; }
.fx-node__sub { font-size: 12px; color: #626e7c; margin-top: 4px; line-height: 1.5; }
.fx-arrow { flex: 0 1 190px; min-width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px 4px; }
.fx-arrow__line { font-size: 28px; color: #2f9e6e; line-height: 1; }
.fx-arrow__label { font-size: 12px; color: #182635; line-height: 1.45; }
.fx-arrow__label b { display: block; font-size: 14px; }
.fx-arrow__label span { display: block; }
.fx-arrow__label small { display: block; color: #626e7c; }
@media (max-width: 720px) { .fx-flow { flex-direction: column; } .fx-arrow__line { transform: rotate(90deg); } .fx-node, .fx-arrow { min-width: 0; } }
.pb-grid th, .pb-grid td { text-align: center; padding: 6px 4px; font-size: 13px; }
.pb-grid td:first-child, .pb-grid th:first-child { text-align: left; white-space: nowrap; }
.pb-cell { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; font-weight: 700; text-decoration: none; }
.pb-cell--none { color: #94a3b8; }
.pb-cell--ok { background: #e6f6ee; color: #1f7a4d; }
.pb-cell--diff { background: #fdecea; color: #cf201c; }
.pb-cell--nobal { background: #f1f5f9; color: #475569; }


/* ===== 経営ダッシュボード: 5つの視点のグラフ ===== */
.section-title { font-size: 18px; margin: 8px 0 14px; letter-spacing: -.02em; }
.persp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 24px; }
.persp { margin-bottom: 0; min-width: 0; }
.persp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.persp-head h2 { margin: 0; font-size: 16px; }
.persp-tag { color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.persp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 12px; }
.persp-kpis > div { background: #f7f9fb; border-radius: 12px; padding: 10px 12px; min-width: 0; }
.persp-kpis small { display: block; font-size: 11px; color: #626e7c; margin-bottom: 2px; }
.persp-kpis b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.25; }
.persp .hint { margin-top: 10px; }
.donut-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.donut-svg { width: 150px; flex-shrink: 0; }
.donut-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.legend { list-style: none; margin: 0; padding: 0; font-size: 12px; flex: 1; min-width: 150px; }
.legend li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 6px; align-items: center; padding: 3px 0; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.legend small { color: #626e7c; width: 34px; text-align: right; }
.gauge-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.chart-empty { color: #626e7c; font-size: 13px; padding: 20px 0; text-align: center; }
/* 桁数に応じた数字の大きさ。JS（uiScript）でもはみ出しを見て一段ずつ縮める */
.fit { font-variant-numeric: tabular-nums; }
.persp-kpis > div { container-type: inline-size; }
@media (max-width: 760px) {
  .persp-grid { grid-template-columns: 1fr; } .donut-svg { width: 130px; } .persp-kpis b { font-size: 16px; }
}


/* ===== Codex提案: 一般向けの配色・部品・数字サイズ（ブランド緑を主要操作に、赤は危険操作だけ） ===== */
/* Office WASABI（旧 Money Dock By WASABI）：既存 STYLE のテンプレート文字列内、末尾へ追記する。 */
:root {
  --md-brand-navy: #1f3a5f;
  --md-brand-green: #2f9e6e;
  --md-bg: #f5f7f6;
  --md-surface: #ffffff;
  --md-surface-soft: #edf3f1;
  --md-text: #203247;
  --md-muted: #586875;
  --md-border: #dce5e1;
  --md-input-border: #81938c;
  --md-primary: #237a55; /* ブランド緑の濃色：白い通常文字の可読性を確保 */
  --md-primary-hover: #195e41;
  --md-primary-soft: #e8f4ed;
  --md-success: #216b4b;
  --md-success-soft: #e8f4ed;
  --md-warning: #80520b;
  --md-warning-soft: #fff4da;
  --md-danger: #b42332;
  --md-danger-hover: #901c28;
  --md-danger-soft: #fff0f1;
  --md-focus: #1f3a5f;
  --md-radius: 20px;
  --md-shadow: 0 3px 16px rgb(31 58 95 / 4%);
  /* 既存部品が参照する変数も置換 */
  --kc-text: var(--md-text);
  --kc-muted: var(--md-muted);
  --kc-border: var(--md-border);
  --kc-bg: var(--md-bg);
  --kc-primary: var(--md-primary);
  --kc-primary-soft: var(--md-primary-soft);
}
/* 帳票の mm 単位レイアウト・印刷には適用しない。 */
@media screen {
  body { background: var(--md-bg); color: var(--md-text); font-size: 16px; line-height: 1.7; }
  a, .lnk, .sidebar-footer .logout { color: var(--md-primary); }
  .lnk:hover { color: var(--md-primary-hover); }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--md-focus); outline-offset: 3px;
  }
  .main, .content, .card, .stat, .candidate > *, .confirm-grid > * { min-width: 0; }
  .content { padding: 32px clamp(16px, 3vw, 40px) 48px; }
  .content h1 { color: var(--md-brand-navy); font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -.025em; }
  .card, .kpi, .stat, .format-card {
    background: var(--md-surface); border: 1px solid var(--md-border);
    border-radius: var(--md-radius); box-shadow: var(--md-shadow); padding: 24px;
  }
  .card { overflow-x: auto; }
  .confirm-card, .receipt-confirm { overflow: visible; }
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
  .home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .label, .kpi .sub, .stat small, .muted, .hint, .section-caption, .page-head p { color: var(--md-muted); }
  .kpi .label { font-size: 14px; }
  .kpi .sub, .stat small { font-size: 13px; }
  .kpi .value.blue, .kpi .value.dark { color: var(--md-brand-navy); }
  .kpi, .stat, .readout > div, .fx-node { container-type: inline-size; }
  /* 文字数は CSS で取得できない。既定は幅連動＋全桁を残す折り返し。 */
  .kpi .value, .fx-kpis .kpi .value, .stat strong, .readout .amount, .fx-node__value, .number {
    display: block; min-width: 0; max-width: 100%;
    font-size: 2rem; font-size: clamp(1rem, 10cqi, 2.25rem);
    font-weight: 700; line-height: 1.35; letter-spacing: -.02em;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: normal; word-break: normal; overflow-wrap: anywhere;
  }
  /* サーバーが付ける長さ区分。既存クラスはそのまま併用する。 */
  :is(.kpi .value, .stat strong, .readout .amount, .fx-node__value, .number)[data-number-length="medium"] {
    font-size: 1.5rem; font-size: clamp(1rem, 8cqi, 1.75rem);
  }
  :is(.kpi .value, .stat strong, .readout .amount, .fx-node__value, .number)[data-number-length="long"] {
    font-size: 1rem; font-size: clamp(1rem, 6cqi, 1.25rem);
  }
  /* JS は属性だけ変更する。nonce 付き CSS 内で完結し style 属性は不要。 */
  :is(.kpi .value, .stat strong, .readout .amount, .fx-node__value, .number)[data-fit-step="0"] { font-size: 2.25rem; }
  :is(.kpi .value, .stat strong, .readout .amount, .fx-node__value, .number)[data-fit-step="1"] { font-size: 2rem; }
  :is(.kpi .value, .stat strong, .readout .amount, .fx-node__value, .number)[data-fit-step="2"] { font-size: 1.75rem; }
  :is(.kpi .value, .stat strong, .readout .amount, .fx-node__value, .number)[data-fit-step="3"] { font-size: 1.5rem; }
  :is(.kpi .value, .stat strong, .readout .amount, .fx-node__value, .number)[data-fit-step="4"] { font-size: 1.25rem; }
  :is(.kpi .value, .stat strong, .readout .amount, .fx-node__value, .number)[data-fit-step="5"] { font-size: 1rem; }
  :is(.kpi .value, .stat strong, .readout .amount, .fx-node__value, .number).number-measuring { white-space: nowrap; }
  .fx-acct-list li, .status-list li { flex-wrap: wrap; }
  .fx-acct-list b, .status-right { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .btn { min-height: 48px; min-width: 48px; max-width: 100%; padding: 12px 22px; border: 1px solid transparent;
    border-radius: 14px; background: var(--md-primary); color: #fff; line-height: 1.5; overflow-wrap: anywhere; }
  .btn:hover { background: var(--md-primary-hover); color: #fff; }
  .btn-secondary, .btn-google { background: var(--md-surface); color: var(--md-brand-navy); border-color: var(--md-input-border); }
  .btn-secondary:hover, .btn-google:hover { background: var(--md-surface-soft); color: var(--md-brand-navy); border-color: var(--md-brand-navy); }
  .btn-danger { background: var(--md-danger); color: #fff; }
  .btn-danger:hover { background: var(--md-danger-hover); }
  .btn-sm { min-height: 44px; padding: 10px 14px; }
  .btn--hero { min-height: 56px; min-width: 0; }
  .btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { background: #e3e8e5; color: #59685f; border-color: #d0d9d3; cursor: not-allowed; box-shadow: none; }
  .badge { border-radius: 999px; padding: 5px 12px; font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
  .badge-green, .flash-success { background: var(--md-success-soft); color: var(--md-success); }
  .badge-orange, .import-table .badge-blue, .duplicate-warning, .receipt-approval .approval-requirement.flash-error {
    background: var(--md-warning-soft); color: var(--md-warning); }
  .badge-red, .flash-error { background: var(--md-danger-soft); color: var(--md-danger); }
  .badge-gray { background: var(--md-surface-soft); color: var(--md-muted); }
  .sidebar { width: 240px; background: var(--md-surface); border-color: var(--md-border); }
  .brand { color: var(--md-brand-navy); }
  .brand img { flex-shrink: 0; object-fit: contain; } /* 元の丸いマークを変形しない */
  .sidebar nav a { border-radius: 14px; color: var(--md-muted); }
  .sidebar nav a:hover { background: var(--md-surface-soft); color: var(--md-text); }
  .sidebar nav a.active { background: var(--md-primary-soft); color: var(--md-primary); box-shadow: inset 3px 0 var(--md-primary); }
  .topbar { background: var(--md-surface); border-color: var(--md-border); }
  .tabs { gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding: 4px 4px 8px; border: 0; }
  .tabs a { flex-shrink: 0; justify-content: center; min-height: 48px; border: 0; border-radius: 999px; padding: 10px 20px; background: var(--md-surface); color: var(--md-muted); }
  .tabs a.active { color: var(--md-brand-navy); background: #e5edf5; box-shadow: inset 0 -3px var(--md-brand-navy); }
  .content input:not([type=checkbox]):not([type=radio]), .content select, .content textarea, .company-switch select {
    min-height: 48px; border-color: var(--md-input-border); border-radius: 12px; font-size: 16px; }
  .check { min-height: 44px; }
  input[type=checkbox], input[type=radio], .duplicate-card .check input { accent-color: var(--md-primary); }
  .hero, .ocr-panel, .capture-primary, .fx-node--jp { background: var(--md-primary-soft); border-color: var(--md-border); border-radius: var(--md-radius); }
  .hero p, .capture-primary .hint, .login-story p { color: var(--md-muted); }
  .login-story { background: var(--md-primary-soft); }
  .login-story h2 span, .score { color: var(--md-primary); }
  .capture-mark { border-radius: 50%; }
  .capture-primary input::file-selector-button { background: var(--md-primary); border-radius: 12px; }
  .capture-primary input::file-selector-button:hover { background: var(--md-primary-hover); }
  .capture-secondary input::file-selector-button { min-height: 44px; }
  .recon-item:hover, .recon-item.selected { border-color: var(--md-primary); }
  .recon-item.selected { background: var(--md-primary-soft); }
  .progress-bar { background: var(--md-brand-green); }
  .saved-choices .btn:not(.btn-secondary) { box-shadow: 0 0 0 3px var(--md-primary-soft); }
  .import-table tr:has(input[name=partner_name]) td:first-child { box-shadow: inset 3px 0 var(--md-warning); }
  .bulk-mail-table .send-reason { border-color: var(--md-warning); background: var(--md-warning-soft); color: var(--md-warning); }
  #cols .icon-button { width: 44px; height: 44px; }
  #cols .icon-button-danger { color: var(--md-danger); }
  .content table { width: 100%; font-size: 14px; }
  .content th, .content .card th { padding: 12px; background: var(--md-surface-soft); color: var(--md-muted); font-weight: 600; }
  .content td, .content .card td { padding: 16px 12px; border-bottom-color: var(--md-border); }
  .content td.num, .content th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .content tr:hover td { background: var(--md-surface-soft); }
  .table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px; }
  .table-scroll table { min-width: 640px; } /* 任意のラッパー。既存専用 min-width は維持 */
}
@media screen and (max-width: 760px) {
  body { font-size: 16px; }
  .content { padding: 24px 16px calc(112px + env(safe-area-inset-bottom)); }
  .card, .kpi, .stat { padding: 20px; border-radius: 18px; }
  .kpi-row, .home-kpis, .stat-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .candidate { flex-wrap: wrap; }
  .sidebar { display: none; }
  body:has(.mobile-menu[open]) .sidebar { width: 100%; padding: 20px; inset: 0 0 calc(84px + env(safe-area-inset-bottom)); }
  .mobile-nav { background: var(--md-surface); border-color: var(--md-border); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mobile-nav > a, .mobile-menu summary, .mobile-nav > span { min-width: 0; min-height: 64px; font-size: 12px; color: var(--md-muted); text-align: center; overflow-wrap: anywhere; }
  .mobile-nav .active, .mobile-menu[open] summary { color: var(--md-primary); background: var(--md-primary-soft); border-radius: 14px; }
  .partner-actions { bottom: calc(84px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  /* 既存の先頭行隠し／ラベル未保証のカード化を解除。先頭データを失わない。 */
  .content .duplicate-card table, .content .commuter-list table { display: table; table-layout: auto; min-width: 640px; }
  .content .duplicate-card tbody, .content .commuter-list tbody { display: table-row-group; }
  .content :is(.duplicate-card, .commuter-list) tr,
  .content :is(.duplicate-card, .commuter-list) tr:first-child {
    display: table-row; position: static; width: auto; height: auto; padding: 0;
    overflow: visible; clip-path: none;
  }
  .content :is(.duplicate-card, .commuter-list) td { display: table-cell; padding: 16px 12px; }
  .content .commuter-list:has(td[colspan]) table > tbody > tr:first-child { display: table-row; }
  .duplicate-card, .commuter-list { max-width: 100%; overflow-x: auto; }
  /* 領収書もまず横スクロール。全セルにラベルを保証できた表だけ opt-in。 */
  .content .receipts-card { padding: 16px; background: var(--md-surface); border: 1px solid var(--md-border); overflow-x: auto; }
  .content .receipts-table { display: table; min-width: 640px; }
  .content .receipts-table tbody { display: table-row-group; }
  .content .receipts-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .content .receipts-table tr { display: table-row; }
  .content .receipts-table td { display: table-cell; padding: 16px 12px; }
  .content .receipts-table td::before { content: none; }
  .content .receipts-table[data-mobile-cards] { display: block; min-width: 0; }
  .content .receipts-table[data-mobile-cards] tbody { display: block; }
  .content .receipts-table[data-mobile-cards] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .content .receipts-table[data-mobile-cards] tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; border-color: var(--md-border); }
  .content .receipts-table[data-mobile-cards] td { display: block; padding: 0; text-align: left; }
  .content .receipts-table[data-mobile-cards] td[data-label]::before { content: attr(data-label); display: block; color: var(--md-muted); font-size: 13px; }
}


/* ===== 調整: バッジは折り返さない。スマホの表はカードの中で横スクロール（列を潰さない） ===== */
@media screen { .badge { white-space: nowrap; } .legend b { white-space: nowrap; } }
@media screen and (max-width: 760px) {
  .card > table:not([data-mobile-cards]), .card > div > table:not([data-mobile-cards]) { min-width: 560px; }
  .card > table.pb-grid { min-width: 0; }
  .persp .legend { min-width: 0; }
  /* 購入依頼の一覧: スマホでは1件ずつカードに */
  .pr-table[data-mobile-cards] { display: block; min-width: 0; }
  .pr-table[data-mobile-cards] tbody { display: block; }
  .pr-table[data-mobile-cards] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pr-table[data-mobile-cards] tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--md-border, #e4e8ed); }
  .pr-table[data-mobile-cards] td { display: block; padding: 0; text-align: left; border: 0; }
  .pr-table[data-mobile-cards] td:empty { display: none; }
  .pr-table[data-mobile-cards] td[data-label]::before { content: attr(data-label); display: block; color: var(--md-muted, #626e7c); font-size: 13px; }
  .pr-table[data-mobile-cards] form.stack { min-width: 0 !important; }
}


/* ===== 入力エラーを入力欄に結びつける ===== */
.is-invalid, .content .is-invalid { border-color: var(--md-danger, #b42332) !important; box-shadow: 0 0 0 3px var(--md-danger-soft, #fff0f1); }
label.field:has(.is-invalid) { color: var(--md-danger, #b42332); }
.field-error { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--md-danger, #b42332); line-height: 1.5; }
.field-error::before { content: '⚠ '; }


/* ===== 勤怠の申請 ===== */
.req-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.req-form { max-width: none; background: #f7f9fb; border: 1px solid var(--md-border, #dce5e1); border-radius: 16px; padding: 18px; gap: 10px; }
.req-form h3 { margin: 0; font-size: 16px; }
.req-form .btn { margin-top: 4px; }


/* ===== 銀行明細の仕分け候補 ===== */
.cand-form { display: grid; gap: 6px; min-width: 240px; }
.cand-form select, .cand-form input[type=text] { min-height: 40px !important; font-size: 14px !important; }
.cand-why { font-size: 12px; line-height: 1.5; }
.cand-opts { display: flex; gap: 12px; flex-wrap: wrap; }
.cand-opts .check { min-height: auto; font-size: 12px; }
.cand-form .btn { justify-self: start; }


/* ===== 取引先候補のチップ（領収書の登録・編集） ===== */
.partner-cands { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-weight: 400; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--md-border, #dce5e1); background: #fff; color: var(--md-text, #203247); font: inherit; font-size: 13px; cursor: pointer; }
.chip small { color: var(--md-muted, #586875); font-size: 11px; }
.chip--strong { border-color: var(--md-primary, #237a55); background: var(--md-primary-soft, #e8f4ed); }
.chip:hover { border-color: var(--md-primary, #237a55); }
.chip--picked { background: var(--md-primary, #237a55); color: #fff; } .chip--picked small { color: #dbeee3; }
/* 購入依頼: 承認の段階（上長 ✓ → 経理管理者 ● → HD管理者 ○） */
.pr-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.pr-steps li { display: flex; flex-direction: column; position: relative; padding-left: 20px; min-width: 96px; color: #626e7c; }
.pr-steps li + li::before { content: '→'; position: absolute; left: -12px; top: 0; color: #b6bec8; }
.pr-step-mark { position: absolute; left: 0; top: 0; width: 16px; text-align: center; font-weight: 700; }
.pr-steps .pr-step-label { font-weight: 600; }
.pr-steps li small { font-size: 12px; color: #7a8592; }
.pr-steps li.is-done { color: #21735b; } .pr-steps li.is-done .pr-step-mark { color: var(--md-success, #21735b); }
.pr-steps li.is-current { color: #8b5c13; } .pr-steps li.is-current .pr-step-mark { color: #d97706; }
.pr-steps li.is-rejected { color: #ac2927; } .pr-steps li.is-rejected .pr-step-mark { color: #cf201c; }
.pr-steps li.is-skipped { opacity: .55; text-decoration: line-through; } .pr-steps li.is-skipped small { text-decoration: none; }
.pr-step-note { font-style: italic; }
/* 社員カルテ: 記録の時系列と、読み取った要約 */
.hr-timeline { list-style: none; margin: 16px 0 0; padding: 0; border-left: 2px solid var(--md-border, #e4e8ed); }
.hr-timeline li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 0 0 16px 14px; position: relative; }
.hr-timeline li::before { content: ''; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--md-primary, #237a55); }
.hr-timeline .hr-when { color: #626e7c; font-size: 13px; padding-top: 2px; }
.hr-timeline .hr-body > div:not(.hint) { margin-top: 4px; white-space: pre-line; }
.hr-summary { font-size: 13px; margin-top: 6px; } .hr-summary ul { margin: 2px 0 8px 18px; padding: 0; } .hr-summary table { margin: 2px 0 8px; font-size: 13px; }
@media screen and (max-width: 760px) { .hr-timeline li { grid-template-columns: 1fr; gap: 4px; } }
/* 業務報告 管理者の確認画面（Codex の設計案 rv-* を組み込み。カードの色帯＋文字バッジ、スマホでは操作をカードの下に） */
.rv-heading, .rv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rv-heading { margin: 0 0 14px; }
.rv-muted, .rv-meta { color: var(--md-muted, #586875); font-size: 13px; }
.rv-summary { padding: 20px; }
.rv-summary .kpi-row { margin-bottom: 16px; }
.rv-table { width: 100%; border-collapse: collapse; text-align: left; }
.rv-table th, .rv-table td { padding: 12px; border-bottom: 1px solid var(--md-border, #dce5e1); vertical-align: top; }
.rv-table th { font-size: 13px; color: var(--md-muted, #586875); font-weight: 600; }
.rv-table tr:last-child td { border-bottom: 0; }
.rv-section { margin-top: 28px; }
.rv-report { border-left: 6px solid var(--md-primary, #237a55) !important; padding: 22px; margin-bottom: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 24px; }
.rv-report-red { border-left-color: var(--md-danger, #b42332) !important; }
.rv-report-yellow { border-left-color: #d97706 !important; }
.rv-card-head { align-items: flex-start; gap: 8px; }
.rv-copy { margin: 16px 0; }
.rv-copy dt { font-size: 13px; font-weight: 700; margin-top: 12px; }
.rv-copy dd { margin: 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-actions { border-left: 1px solid var(--md-border, #dce5e1); padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.rv-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 14px; border: 1px solid var(--md-input-border, #81938c); border-radius: 10px; background: #fff; color: var(--md-text, #203247); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; text-align: center; width: 100%; box-sizing: border-box; }
.rv-button:hover { background: var(--md-surface-soft, #edf3f1); }
.rv-primary { color: #fff; background: var(--md-primary, #237a55); border-color: var(--md-primary, #237a55); }
.rv-primary:hover { background: var(--md-primary-hover, #195e41); }
.rv-danger { color: var(--md-danger, #b42332); border-color: var(--md-danger, #b42332); }
.rv-return summary { list-style: none; } .rv-return summary::-webkit-details-marker { display: none; }
.rv-return summary::after { content: ' ＋'; } .rv-return[open] summary::after { content: ' −'; }
.rv-return form { margin-top: 12px; } .rv-return label { display: block; font-size: 13px; margin-bottom: 6px; }
.rv-return textarea { width: 100%; min-height: 100px; resize: vertical; box-sizing: border-box; } .rv-return button { margin-top: 8px; }
.rv-empty { padding: 24px; color: var(--md-muted, #586875); }
@media (max-width: 700px) {
  .rv-report { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; }
  .rv-actions { border-left: 0; border-top: 1px solid var(--md-border, #dce5e1); padding: 16px 0 0; }
  .rv-table thead { display: none; }
  .rv-table, .rv-table tbody, .rv-table tr, .rv-table td { display: block; width: 100%; box-sizing: border-box; }
  .rv-table tr { padding: 12px 0; border-bottom: 1px solid var(--md-border, #dce5e1); } .rv-table tr:last-child { border-bottom: 0; }
  .rv-table td { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; border: 0; padding: 4px 0; overflow-wrap: anywhere; }
  .rv-table td[data-label]::before { content: attr(data-label); font-size: 13px; font-weight: 600; color: var(--md-muted, #586875); }
  .rv-table td:not([data-label]) { display: block; }
  .rv-card-head { display: block; } .rv-card-head .badge { margin-top: 8px; }
}
/* 業務報告: 承認の流れ（提出 → 確認 → 経営確認） */
.br-flow { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.br-flow li { position: relative; padding-left: 20px; color: #626e7c; display: flex; flex-direction: column; }
.br-flow li::before { content: '○'; position: absolute; left: 0; top: 0; font-weight: 700; }
.br-flow li.is-done { color: #21735b; } .br-flow li.is-done::before { content: '✓'; }
.br-flow li.is-current { color: #8b5c13; font-weight: 600; } .br-flow li.is-current::before { content: '●'; color: #d97706; }
.br-flow li + li::after { content: '→'; position: absolute; left: -14px; top: 0; color: #b6bec8; }
.br-flow small { font-size: 12px; color: #7a8592; font-weight: 400; }
/* 印刷・PDF: 画面の枝葉を消して本文だけ */
@media print {
  .sidebar, .topbar, .mobile-nav, .tabs, .no-print, .flash, .actions, form.br-form button { display: none !important; }
  .content, .main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; page-break-inside: avoid; }
  body { background: #fff !important; font-size: 12px; }
  .print-view h1 { font-size: 20px; } .print-view h2 { font-size: 15px; } .print-view h3 { font-size: 13px; margin: 8px 0 2px; }
  a { color: inherit; text-decoration: none; }
}
/* 業務報告: 行を足していく表。狭い画面では横スクロール */
.br-grid { min-width: 720px; }
.br-grid th { font-size: 12px; white-space: nowrap; }
.br-grid td { padding: 6px 6px; vertical-align: top; }
.br-grid input, .br-grid select, .br-grid textarea { min-height: 38px; padding: 6px 8px; font-size: 14px; width: 100%; box-sizing: border-box; }
.br-grid textarea { resize: vertical; }
.badge-blue { background: #dbeafe; color: #1e40af; }
/* 一覧は列を潰さず、狭い画面ではカードの中で横スクロール（760px以下はカード表示） */
.pr-table { min-width: 720px; }
.pr-table td[data-label="誰"], .pr-table td[data-label="金額"] { white-space: nowrap; }



/* Existing page containers and JavaScript hooks also have explicit style definitions. */
.access-grid { width:100%; }
.role-grid { display:grid; gap:12px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.br-autosave { min-height:1em; }
.fx-kpi { min-width:0; }
.print-only-head { break-after:avoid; }
.rv-page-inline { min-width:0; }
.rv-week { flex-wrap:wrap; }
.tax-split > summary, .wk-help > summary { cursor:pointer; }
.rowchk, .pick { accent-color:var(--md-primary); }
.del, .mv { cursor:pointer; }

/* Portal 3: scoped components; existing page selectors are retained. */
:root { color-scheme: light; --md-hero:#edf5ec; --md-space:8px; --md-radius-sm:12px; --md-sidebar:224px; }
.pt-muted { color:var(--md-muted);font-size:12px }
.pt-link { color:var(--md-primary);font-size:12px;font-weight:600 }
.pt-logo { width:144px;height:auto }
.pt-topbar { display:flex;gap:18px;align-items:center;padding:18px 28px;background:#ffffffdb;border-bottom:1px solid var(--md-border) }
.pt-search { display:flex;align-items:center;gap:8px;flex:1;min-width:0;background:#f8faf9;border:1px solid var(--md-border);border-radius:24px;padding:0 14px }
.pt-search input { width:100%;border:0;background:transparent;font-size:12px;padding:11px 0;outline-offset:0 }
.pt-search button { border:0;background:transparent;padding:0;min-width:26px }
.pt-user { display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12px }
.pt-avatar { border-radius:50%;background:#e6eee8;color:var(--md-primary);width:36px;height:36px;display:grid;place-items:center;font-weight:700 }
.pt-user small { display:block;font-size:10px;color:var(--md-muted) }
.pt-bell { position:relative;border:0;background:transparent;font-size:20px;padding:4px 8px }
.pt-bell b { position:absolute;right:0;top:0;background:var(--md-primary);color:white;font-size:9px;border:2px solid white;border-radius:50%;width:20px;height:20px;line-height:16px }
.pt-chat b, .nav-badge, .mn-badge { background:#e02424 !important; color:#fff; font-weight:800; }
.nav-badge { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:11px; display:inline-grid; place-items:center; }
.mn-badge { position:absolute; top:4px; right:calc(50% - 22px); min-width:18px; height:18px; padding:0 5px; border-radius:999px; font-size:10px; display:inline-grid; place-items:center; border:2px solid #fff; }
.gc-toast { position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:300; max-width:min(92vw, 360px); background:#182635; color:#fff; border-radius:16px; padding:12px 16px; box-shadow:0 12px 32px rgb(0 0 0 / 25%); text-decoration:none; display:none; flex-direction:column; gap:4px; font-size:13px; }
.gc-toast.show { display:flex; animation:gcIn .25s ease; }
.gc-toast strong { font-size:13px; }
.gc-toast span { color:#cbd5e1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@keyframes gcIn { from { transform:translateY(12px); opacity:0 } to { transform:none; opacity:1 } }
@media (min-width:761px) { .gc-toast { bottom:20px; } }
.ow-celebrate { position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; background:rgba(24,38,53,.55); animation:gcIn .3s ease; }
.ow-celebrate .box { background:#fff; border-radius:24px; padding:28px 28px 22px; max-width:min(92vw,420px); text-align:center; box-shadow:0 20px 60px rgb(0 0 0 / 30%); position:relative; overflow:hidden; }
.ow-celebrate img { width:120px; height:auto; animation:owBounce .9s ease infinite; }
.ow-celebrate h2 { margin:10px 0 6px; font-size:20px; }
.ow-celebrate p { margin:0 0 14px; color:var(--md-muted, #5b6b7b); font-size:14px; line-height:1.7; }
.ow-celebrate .conf { position:absolute; top:-10px; width:8px; height:14px; border-radius:2px; animation:owFall 2.4s linear infinite; }
@keyframes owBounce { 0%,100% { transform:translateY(0) } 40% { transform:translateY(-18px) scale(1.05) } }
@keyframes owFall { to { transform:translateY(420px) rotate(540deg); opacity:.2 } }
.ow-install { position:fixed; left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:299; background:#182635; color:#fff; border-radius:16px; padding:12px 14px; display:none; gap:10px; align-items:flex-start; font-size:13px; line-height:1.6; box-shadow:0 12px 32px rgb(0 0 0 / 25%); }
.ow-install.show { display:flex; }
.ow-install img { width:40px; height:auto; flex-shrink:0; }
.ow-install .btn { padding:6px 12px; min-height:34px; font-size:13px; }
.ow-install button.x { background:none; border:0; color:#cbd5e1; font-size:18px; cursor:pointer; padding:0 4px; }
.pt-greeting { display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--md-muted);margin-bottom:18px }
.pt-greeting strong { color:var(--md-primary);font-weight:500 }
.pt-hero { position:relative;isolation:isolate;display:grid;grid-template-columns:1.12fr 1fr;overflow:hidden;background:var(--md-hero);border-radius:24px;min-height:280px;margin-bottom:22px }
.pt-hero-copy { padding:32px;align-self:center;z-index:1 }
.pt-hero .pt-logo { width:164px;margin-bottom:20px }
.pt-hero h1 { font-size:clamp(22px,2.15vw,32px);line-height:1.65;letter-spacing:.02em;color:#244d3b;font-weight:700 }
.pt-hero p { font-size:12px;color:#50685b;margin-top:12px }
.pt-hero-art { width:100%;height:100%;object-fit:cover;min-height:280px;mix-blend-mode:multiply }
.pt-entries { display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:24px }
.pt-entry { display:block;background:white;border:1px solid var(--md-border);border-radius:var(--md-radius);padding:20px 22px;box-shadow:var(--md-shadow);position:relative }
.pt-entry-top { display:flex;align-items:center;gap:14px;margin-bottom:12px }
.pt-entry-icon { display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#e8f4ed;color:var(--md-primary);font-size:29px }
.pt-entry:nth-child(2) .pt-entry-icon { background:#f4f1e5;color:#7b6837 }
.pt-entry:nth-child(3) .pt-entry-icon { background:#ecf2e4;color:#526d35 }
.pt-entry h2 { font-size:22px;color:#284f3e }
.pt-entry p { font-size:12px;color:var(--md-muted);line-height:1.85 }
.pt-arrow { margin-left:auto;color:var(--md-primary);border:1px solid #d5e5da;border-radius:50%;width:28px;height:28px;text-align:center;line-height:25px }
.pt-columns { display:grid;grid-template-columns:1.1fr 1fr;gap:20px;margin-bottom:22px }
.pt-card { background:white;border:1px solid var(--md-border);border-radius:var(--md-radius);padding:22px;box-shadow:var(--md-shadow);min-width:0 }
.pt-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px }
.pt-heading h2 { display:flex;align-items:center;gap:8px }
.pt-heading .pt-link { white-space:nowrap }
.pt-tiles { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px }
.pt-tile { display:flex;align-items:center;flex-direction:column;justify-content:flex-start;text-align:center;gap:8px;font-size:10px;padding:12px 4px;border:1px solid #e4ece7;border-radius:12px;line-height:1.65;min-height:98px;background:linear-gradient(#fff,#f8fbf9) }
.pt-tile span { font-size:23px;color:var(--md-primary);height:31px }
.pt-tasks { margin-bottom:22px }
.pt-task-list { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px }
.pt-task a { background:#f8faf8;border:1px solid #e3eae3;border-radius:12px;padding:16px;display:flex;gap:12px;align-items:center;height:100% }
.pt-task b { display:block;font-size:12px }
.pt-task small { display:block;font-size:10px;color:var(--md-muted);margin-top:4px }
.pt-task-count { font-size:25px;font-weight:600;color:var(--md-primary);white-space:nowrap }
.pt-task-count small { display:inline;font-size:10px }
.pt-task .pt-arrow { flex-shrink:0;width:24px;height:24px;line-height:21px }
.pt-footer { text-align:center;font-size:10px;color:var(--md-muted);margin-top:28px }
.pt-login { display:grid;grid-template-columns:1.1fr 1fr;min-height:100dvh;background:white }
.pt-login-story { padding:60px 9%;background:var(--md-hero);display:flex;flex-direction:column;justify-content:center }
.pt-login-story .pt-logo { width:190px;margin-bottom:32px }
.pt-login-story h2 { font-size:32px;line-height:1.7;color:#244d3b }
.pt-login-story p { font-size:13px;margin:18px 0;color:var(--md-muted) }
.pt-login-story img.pt-hero-art { height:auto;min-height:0;max-height:350px;object-fit:contain;margin-top:18px;border-radius:20px }
.pt-login-panel { display:flex;align-items:center;justify-content:center;padding:40px }
.pt-login-form { max-width:360px;width:100% }
.pt-login-form h1 { font-size:28px;margin:12px 0 }
.pt-login-form>p { color:var(--md-muted);font-size:12px;margin-bottom:26px }
.pt-login-form label { display:block;font-size:12px;font-weight:600;margin:18px 0 }
.pt-login-form input { display:block;width:100%;margin-top:8px;min-height:48px }
.pt-empty { font-size:13px;color:var(--md-muted);padding:12px 0 }
@media (min-width: 761px) and (max-width: 1120px) {
.pt-topbar { flex-wrap:wrap;gap:10px }
.pt-search { flex-basis:50% }
.pt-columns { grid-template-columns:1fr }
.pt-hero-copy { padding:24px }
.pt-task-list { grid-template-columns:1fr }
.pt-entry { padding:16px }
.pt-entries { gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) }
}
@media (max-width: 760px) {
.pt-topbar { padding:14px 16px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;background:#fff }
.pt-user { grid-column:1;grid-row:1 }
.pt-user small { font-size:10px }
.pt-bell { grid-column:2;grid-row:1;justify-self:end }
.pt-search { grid-column:1/-1;grid-row:3;width:100%;padding:0 12px }
.pt-search input { font-size:11px;min-height:44px }
.pt-greeting { font-size:10px;display:block;margin-bottom:12px }
.pt-greeting strong { display:block;font-size:12px;margin-bottom:2px }
.pt-hero { min-height:206px;grid-template-columns:1fr;margin-bottom:16px }
.pt-hero-copy { padding:22px 18px;width:100% }
.pt-hero .pt-logo { width:114px;margin-bottom:14px }
.pt-hero h1 { font-size:20px;line-height:1.7;position:relative;z-index:1 }
.pt-hero p { font-size:10px;position:relative;z-index:1 }
.pt-hero>.pt-hero-art { position:absolute;right:-36px;bottom:0;width:195px;height:150px;min-height:0;opacity:.22;z-index:-1;object-fit:cover }
.pt-entries { display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:8px;margin-bottom:14px }
.pt-entry { flex:1 0 76%;scroll-snap-align:start;padding:16px }
.pt-entries:has(>.pt-entry:only-child) .pt-entry { flex-basis:100% }
.pt-entry-top { gap:12px;margin-bottom:8px }
.pt-entry-icon { width:44px;height:44px;font-size:25px;border-radius:14px }
.pt-entry h2 { font-size:20px }
.pt-entry p { font-size:11px }
.pt-columns { grid-template-columns:1fr;gap:16px;margin-bottom:16px }
.pt-card { padding:18px 16px;border-radius:18px }
.pt-heading { margin-bottom:12px }
.pt-heading h2 { font-size:15px }
.pt-heading .pt-link { font-size:10px }
.pt-tiles { gap:7px }
.pt-tile { font-size:10px;padding:10px 3px;min-height:97px }
.pt-task-list { grid-template-columns:1fr;gap:8px }
.pt-task a { padding:13px }
.pt-task a>div { flex:1 }
.pt-task-count { font-size:23px }
.pt-tasks { margin-bottom:16px }
.pt-login { grid-template-columns:1fr;min-height:100dvh }
.pt-login-story { padding:24px }
.pt-login-story .pt-logo { width:130px;margin-bottom:18px }
.pt-login-story h2 { font-size:23px }
.pt-login-story p { font-size:11px;margin:10px 0 0 }
.pt-login-story img.pt-hero-art { height:120px;margin-top:10px;object-position:center;object-fit:cover }
.pt-login-panel { padding:28px 24px 40px }
.pt-login-form h1 { font-size:25px }
}

@media screen {
  body { font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; font-size:14px; line-height:1.65; }
  .sidebar { width:var(--md-sidebar); height:100dvh; position:sticky; top:0; padding:28px 16px 16px; }
  /* 項目が多いグループ（経理19件など）を開いても最後まで届くように、メニュー部分だけを縦スクロールさせる（min-height:0 が無いと flex の子は縮まず溢れる） */
  .sidebar nav { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:4px; scrollbar-width:thin; }
  .sidebar .brand, .sidebar-footer { flex-shrink:0; }
  .sidebar nav a { font-size:12px; white-space:normal; overflow-wrap:anywhere; }
  .sidebar .brand img.ow-logo { width:144px; }
  .sidebar .nav-group > summary { font-size:13px; min-height:44px; }
  .content { padding:22px 28px 30px; max-width:1440px; }
  .pt-topbar { gap:14px; min-height:77px; }
  .pt-topbar .company-switch, .pt-topbar .company-name { max-width:170px; font-size:11px; }
  .pt-topbar .company-switch select { font-size:11px; min-height:44px; }
  .pt-search input { min-width:0; min-height:44px; border:0; background:transparent; }
  .pt-search button { min-height:44px; min-width:32px; color:var(--md-primary); cursor:pointer; font-size:24px; }
  .pt-user { white-space:normal; overflow-wrap:anywhere; }
  .pt-avatar { flex-shrink:0; }
  .pt-bell { display:grid; place-items:center; min-width:44px; min-height:44px; }
  .pt-bell b { width:auto; min-width:20px; padding:0 3px; border-radius:12px; }
  .pt-user .topbar-right { font-size:10px; }
  .pt-logo { display:block; max-width:100%; }
  .pt-entry, .pt-tile, .pt-task a { color:var(--md-text); overflow-wrap:anywhere; }
  .pt-entry { min-width:0; }
  .pt-entry-icon, .pt-arrow { flex-shrink:0; }
  .pt-entry h2, .pt-heading h2 { margin:0; }
  .pt-hero h1 { margin:0; color:#244d3b; font-size:clamp(22px,2.15vw,32px); letter-spacing:.02em; }
  .pt-hero-art { display:block; max-width:100%; }
  .pt-quick { margin-bottom:22px; }
  .pt-task-list > li { min-width:0; }
  .pt-task a > div { min-width:0; }
  .pt-task-list h3 { font-size:13px; margin:0; }
  .pt-task-list p { font-size:12px; color:var(--md-muted); margin-top:4px; }
  .pt-notice-card .wk-notices { margin:0; }
  .pt-notice-card .wk-notices .wk-notice { background:transparent; border:0; border-top:1px solid var(--md-border); border-radius:0; padding:14px 0; color:var(--md-text); }
  .pt-login .pt-login-story .brand { flex-direction:column; align-items:flex-start; padding:0; }
  .pt-login-story .brand .pt-logo { width:190px; height:auto; margin-bottom:12px; }
  .pt-login .pt-login-form { padding:0; border:0; border-radius:0; background:transparent; }
  .pt-login-form .stack { max-width:none; }
  .pt-login-form label.field { display:flex; margin:0; }
  .pt-login-form .pt-muted { margin-top:20px; }
}
@media (min-width:761px) and (max-width:1120px) {
  :root { --md-sidebar:190px; }
  .pt-topbar { flex-wrap:wrap; }
  .content { padding:20px; }
}
@media (max-width:760px) {
  .sidebar { display:none; }
  body:has(.mobile-menu[open]) .sidebar { height:auto; width:100%; }
  body:has(.mobile-menu[open]) .sidebar nav { overflow:visible; }
  .content { padding:16px 16px calc(100px + env(safe-area-inset-bottom)); }
  .pt-topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .pt-topbar .company-switch, .pt-topbar .company-name { grid-column:1/-1; grid-row:2; max-width:100%; }
  .pt-topbar .company-switch select { width:100%; }
  .pt-search input { font-size:16px; }
  .pt-hero h1 { font-size:20px; }
  .pt-notice-card .wk-notices .wk-notice { flex-wrap:wrap; overflow-wrap:anywhere; }
  .pt-task-list { grid-template-columns:minmax(0,1fr); }
  .pt-login-story .brand .pt-logo { width:130px; }
  .pt-login .pt-login-story { display:flex; }
  .pt-login .pt-login-form { max-width:360px; }
}

/* ヒーローの写真スライダー（採用サイトの写真5枚をCSSだけで順にフェード。JS不要） */
.pt-slides { position:relative; overflow:hidden; min-height:280px; background:#dfe9e3; }
.pt-slides img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation: pt-fade 30s infinite; }
.pt-slides img:nth-child(1) { animation-delay:0s } .pt-slides img:nth-child(2) { animation-delay:6s } .pt-slides img:nth-child(3) { animation-delay:12s }
.pt-slides img:nth-child(4) { animation-delay:18s } .pt-slides img:nth-child(5) { animation-delay:24s }
@keyframes pt-fade { 0% { opacity:0 } 4% { opacity:1 } 20% { opacity:1 } 26% { opacity:0 } 100% { opacity:0 } }
.pt-slides::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--md-hero, #eef4f0) 0%, rgba(238,244,240,0) 22%); pointer-events:none; }
.pt-login-story .pt-slides { min-height:0; aspect-ratio: 2 / 1; border-radius:20px; margin-top:18px; }
.pt-login-story .pt-slides::after { display:none; }
@media (prefers-reduced-motion: reduce) { .pt-slides img { animation:none; } .pt-slides img:nth-child(1) { opacity:1; } }
@media (max-width: 760px) { .pt-slides { min-height:170px; } .pt-slides::after { background:linear-gradient(180deg, var(--md-hero, #eef4f0) 0%, rgba(238,244,240,0) 24%); } }
.pt-role-tag { display:inline-block; font-size:11px; letter-spacing:.08em; color:var(--md-primary); background:#fff; border:1px solid var(--md-border); border-radius:999px; padding:3px 10px; margin-bottom:12px; }


/* ===== 元気さを足す: キャラクターのオレンジを差し色に、角丸と影を少し強く ===== */
:root { --md-accent:#ff5a2e; --md-accent-soft:#fff1eb; --md-accent-ink:#b8351a; --md-hero:#eef7ee; }
.pt-hero { background: linear-gradient(120deg, #eef7ee 0%, #f6faf2 55%, #fff1eb 100%); }
.pt-role-tag { color:var(--md-accent-ink); background:var(--md-accent-soft); border-color:#ffd2c2; font-weight:700; }
.pt-hero h1 { color:#1f3a2f; }
.pt-hero h1 em, .pt-hero h1 b { font-style:normal; color:var(--md-accent); }
.pt-entry { transition: transform .15s ease, box-shadow .15s ease; }
.pt-entry:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(31 58 95 / 10%); }
.pt-entries .pt-entry:nth-child(1) .pt-entry-icon { background:#e8f4ed; color:#237a55; }
.pt-entries .pt-entry:nth-child(2) .pt-entry-icon { background:var(--md-accent-soft); color:var(--md-accent-ink); }
.pt-entries .pt-entry:nth-child(3) .pt-entry-icon { background:#fff6d6; color:#8a5a00; }
.pt-heading h2 { position:relative; padding-left:12px; }
.pt-heading h2::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:4px; background:linear-gradient(180deg, var(--md-accent), var(--md-primary)); }
.pt-tile { transition: transform .15s ease, background .15s ease; }
.pt-tile:hover { transform: translateY(-2px); background:var(--md-accent-soft); }
.pt-task-count { color:var(--md-accent-ink); }
.pt-bell b { background:var(--md-accent); }
.pt-greeting strong { color:var(--md-primary); }
.btn:not(.btn-secondary):not(.btn-danger):hover { filter:brightness(1.06); transform:translateY(-1px); }
.badge-orange { background:var(--md-accent-soft); color:var(--md-accent-ink); }
/* キャラクターの置き場所 */
.ow-chara { height:auto; pointer-events:none; user-select:none; }
.ow-chara-side { display:block; width:64px; margin:0 0 10px; opacity:.95; }
.ow-chara-login { position:absolute; right:18px; top:-54px; width:92px; transform:rotate(-6deg); }
.pt-login-form { position:relative; }
.ow-chara-hero { position:absolute; right:40%; bottom:-6px; width:112px; z-index:2; filter:drop-shadow(0 6px 10px rgb(0 0 0 / 15%)); }
.ow-chara-empty { width:72px; vertical-align:middle; margin-right:10px; }
.pt-empty { display:flex; align-items:center; gap:10px; color:var(--md-muted); }
.ow-chara-wiki { position:absolute; right:14px; bottom:-10px; width:120px; }
.ow-chara-bounce { animation: ow-bob 3.2s ease-in-out infinite; }
@keyframes ow-bob { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
@media (prefers-reduced-motion: reduce) { .ow-chara-bounce { animation:none; } }
@media (max-width: 760px) { .ow-chara-hero { right:12px; bottom:4px; width:84px; } .ow-chara-login { width:70px; top:-40px; right:10px; } .ow-chara-wiki { width:84px; right:8px; } }
.pt-holidays ul { list-style:none; margin:0; padding:0; }
.pt-holidays li { display:flex; gap:10px; align-items:center; padding:7px 0; border-top:1px dashed var(--md-border); font-size:14px; }
.pt-holidays li:first-child { border-top:0; }
.pt-holidays .d { font-weight:700; min-width:64px; color:var(--md-accent-ink); }
.pt-holidays .f { min-width:22px; }


.i18n-note { background:#fff7e6; color:#5c4300; border-bottom:1px solid #f4dd9a; font-size:12px; padding:6px 14px; text-align:center; }
.lang-switch select { min-height:36px; font-size:12px; border-radius:999px; padding:0 10px; border:1px solid var(--md-border, #dce5e1); background:#fff; }

/* UI 4: screen-only refinements; preserve print and document layouts. */
@media screen {
  .lang-switch { min-width:0; }
  .lang-switch select { min-height:44px; max-width:100%; font-size:14px; border-radius:var(--md-radius-sm); border-color:var(--md-input-border); }
  .i18n-note { font-size:13px; line-height:1.7; padding:10px 16px; }
}
@media screen and (max-width:760px) {
  .lang-switch select { font-size:16px; min-height:48px; }
}




/* UI 4: screen-only refinements; preserve print and document layouts. */
@media screen {
  .content { padding:28px 32px 40px; }
  .content h1 { font-size:clamp(24px, 2.3vw, 30px); line-height:1.45; letter-spacing:-.02em; overflow-wrap:anywhere; }
  .content h2 { font-size:18px; line-height:1.5; }
  .content h3 { line-height:1.5; }
  .content .hint, .content .section-caption, .pt-muted { font-size:13px; line-height:1.7; color:var(--md-muted); }
  .content .page-head p { font-size:14px; }
  .card, .pt-card, .kpi { padding:24px; border-radius:var(--md-radius); }
  .card, .pt-card, .page-head, .kpi-row { margin-bottom:24px; }
  .kpi { margin-bottom:0; }
  .pt-columns > .pt-card { margin-bottom:0; }
  .kpi .label { margin:0 0 8px; font-size:14px; font-weight:600; }
  .kpi .sub { margin-top:8px; font-size:13px; }
  .kpi .value small, .kpi .value .hint { font-size:14px; font-weight:400; letter-spacing:0; }
  .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .field, .actions > *, .page-head > * { min-width:0; }
  .actions { gap:12px; }
  .btn { border-radius:var(--md-radius-sm); }
  .btn:not(.btn-secondary):not(.btn-danger):hover { filter:none; transform:none; }
  .btn:disabled:hover, .btn[disabled]:hover { background:#e3e8e5; color:#59685f; }
  .badge { line-height:1.5; }
  .flash { border-left-width:4px; border-radius:var(--md-radius-sm); overflow-wrap:anywhere; }
  .flash-success { border-color:var(--md-success); }
  .flash-error { border-color:var(--md-danger); }
  .content :is(p, .hint, .muted, dd) a:not(.btn), .pt-link, .pt-login-form .pt-link {
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  }
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline:3px solid var(--md-focus); outline-offset:3px;
  }
  .pt-search:focus-within { border-color:var(--md-primary); }
  .pt-topbar { display:grid; grid-template-columns:minmax(180px,1fr) minmax(100px,170px) auto 44px minmax(120px,180px); gap:12px; padding:16px 28px; background:var(--md-surface); }
  .pt-topbar .company-name { font-size:13px; overflow-wrap:anywhere; }
  .pt-topbar .company-switch select { font-size:14px; width:100%; }
  .pt-search { padding:0 8px; }
  .pt-search input { font-size:14px; }
  .pt-search button { min-width:44px; min-height:44px; border-radius:50%; }
  .pt-user { font-size:13px; line-height:1.5; }
  .pt-user small, .pt-user .topbar-right { font-size:12px; }
  .pt-bell b { background:var(--md-accent-ink); color:#fff; }
  .pt-greeting { font-size:13px; margin-bottom:16px; }
  .pt-greeting strong { font-size:14px; }
  .pt-hero { margin-bottom:24px; border-radius:var(--md-radius); }
  .pt-hero-copy { padding:28px 32px; }
  .pt-hero p, .pt-entry p, .pt-login-story p { font-size:14px; line-height:1.75; }
  .pt-hero h1 em, .pt-hero h1 b { color:var(--md-accent-ink); }
  .pt-slides { min-height:260px; }
  .ow-chara-hero { right:16px; bottom:8px; width:88px; }
  .pt-heading { flex-wrap:wrap; gap:8px 16px; }
  .pt-heading h2 { font-size:18px; }
  .pt-heading .pt-link, .pt-link { font-size:13px; display:inline-flex; align-items:center; min-height:44px; }
  .pt-tile { font-size:12px; }
  .pt-task-list h3 { font-size:15px; }
  .pt-task-list p { font-size:13px; }
  .pt-empty, .wk-empty { min-height:112px; padding:20px; gap:16px; border:1px dashed var(--md-border); border-radius:var(--md-radius-sm); background:var(--md-surface-soft); font-size:14px; line-height:1.75; overflow-wrap:anywhere; }
  .ow-chara-empty, .wk-empty img { flex-shrink:0; width:64px; margin:0; }
  .ow-chara-login { position:static; display:block; width:72px; margin:0 0 16px auto; transform:none; }
  .tabs { gap:8px; margin-bottom:24px; padding:4px 4px 8px; }
  .tabs a { min-height:44px; padding:10px 16px; border:1px solid var(--md-border); border-radius:999px; font-size:14px; }
  .tabs a.active { background:var(--md-primary-soft); color:var(--md-primary); border-color:var(--md-primary); box-shadow:inset 0 -2px var(--md-primary); font-weight:700; }
}
@media screen and (min-width:761px) and (max-width:1120px) {
  .pt-topbar { grid-template-columns:minmax(0,1fr) auto 44px minmax(120px,180px); }
  .pt-search { grid-column:1/-1; }
}
@media screen and (max-width:760px) {
  .content { padding:20px 16px calc(104px + env(safe-area-inset-bottom)); }
  .content h1 { font-size:24px; }
  .card, .pt-card, .kpi { padding:16px; }
  .card, .pt-card, .page-head, .kpi-row { margin-bottom:20px; }
  .kpi { margin-bottom:0; }
  .form-grid, .form-section .form-grid { grid-template-columns:minmax(0,1fr); }
  .req-forms { grid-template-columns:minmax(0,1fr); }
  .content input:not([type=checkbox]):not([type=radio]), .content select, .content textarea,
  .pt-topbar input, .pt-topbar select, .pt-login input { font-size:16px !important; min-height:48px; }
  .content :is(.btn-sm, .chip, .lnk, .pb-cell), .content summary { min-height:44px; }
  .content :is(.chip, .lnk, .pb-cell) { min-width:44px; }
  .content summary { align-content:center; }
  .pt-topbar { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; gap:8px; padding:12px 16px; }
  .pt-user { grid-column:1; grid-row:1; gap:8px; }
  .pt-user > div { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; min-width:0; }
  .pt-user small, .pt-user .topbar-right { font-size:12px; }
  .pt-bell { grid-column:3; grid-row:1; }
  .pt-topbar .company-name, .pt-topbar .company-switch { grid-column:1; grid-row:2; max-width:100%; font-size:12px; }
  .pt-topbar .lang-switch { grid-column:2; grid-row:1; min-width:0; }
  .pt-topbar .lang-switch select { width:100%; min-width:0; }
  .pt-search { grid-column:2/4; grid-row:2; padding:0 4px; gap:4px; }
  .pt-search input { min-width:0; }
  .pt-user .pt-avatar { display:none; }
  .mobile-nav { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .mobile-nav > a, .mobile-nav > span, .mobile-menu summary { min-height:60px; padding:6px 2px; font-size:11px; line-height:1.4; gap:4px; }
  .mobile-nav .icon { font-size:22px; line-height:24px; }
  .mobile-nav > a.active, .mobile-menu[open] summary { box-shadow:inset 0 3px var(--md-primary); font-weight:700; }
  body:has(.sidebar a[href="/board"].active) .mobile-nav > a[href="/board"],
  body:has(.sidebar a[href="/calendar"].active) .mobile-nav > a[href="/calendar"] { color:var(--md-primary); background:var(--md-primary-soft); border-radius:14px; box-shadow:inset 0 3px var(--md-primary); font-weight:700; }
  .mobile-nav > a[href="/receipt_new"] { background:var(--md-primary); color:#fff; border-radius:var(--md-radius-sm); }
  .mobile-nav > a[href="/receipt_new"].active { box-shadow:inset 0 0 0 2px var(--md-brand-navy); }
  .mobile-nav > span[aria-disabled] { opacity:1; color:var(--md-muted); background:var(--md-surface-soft); border:1px dashed var(--md-input-border); border-radius:var(--md-radius-sm); }
  body:has(.mobile-menu[open]) { overflow:hidden; }
  body:has(.mobile-menu[open]) .sidebar { inset:0 0 calc(76px + env(safe-area-inset-bottom)); height:auto; padding:20px; overscroll-behavior:contain; }
  body:has(.mobile-menu[open]) .sidebar nav { flex:none; overflow:visible; }
  .pt-hero-copy { padding:24px 20px; }
  .pt-hero p { font-size:14px; }
  .pt-slides { min-height:170px; }
  .ow-chara-hero { width:72px; right:12px; bottom:8px; }
  .pt-entry p { font-size:13px; }
  .pt-tile { font-size:12px; }
  .pt-empty, .wk-empty { padding:16px; gap:12px; }
  .content .pr-table[data-mobile-cards] { width:100%; min-width:0; }
  .content .pr-table[data-mobile-cards] tr { gap:12px; padding:16px 0; }
  .content .pr-table[data-mobile-cards] td { min-width:0; max-width:100%; padding:0; border:0; text-align:left; white-space:normal; overflow-wrap:anywhere; }
  .content .pr-table[data-mobile-cards] td[data-label]::before { margin-bottom:4px; font-size:13px; font-weight:600; }
  .content .pr-table[data-mobile-cards] td[data-label=""]::before { content:none; }
  .content .pr-table[data-mobile-cards] td .actions { gap:8px; }
  .content .pr-table[data-mobile-cards] td form { max-width:100%; }
  .content .pr-table[data-mobile-cards] tr:hover td { background:transparent; }
}