/* Layout: 社名ヘッダー（ロゴ＋赤い斜めライン）→ タブ（入力／集計／マスタ）→ 一列の作業票。数字は等幅で揃える。 */
:root {
  --paper: #f3f5f9;
  --sheet: #ffffff;
  --ink: #1b2440;
  --ink-soft: #5e6781;
  --rule: #dde2ec;
  --rule-strong: #c2c9d8;
  --navy: #202f57;
  --navy-soft: #e5e9f3;
  --red: #e30613;
  --red-soft: #fde8e9;
  --ok: #2d7a4e;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10141e; --sheet: #182033; --ink: #e7eaf2; --ink-soft: #9aa3ba;
    --rule: #283149; --rule-strong: #3a4562; --navy: #93a8e0; --navy-soft: #222c47;
    --red: #ff4a52; --red-soft: #3b1d22; --ok: #6cc08f; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #10141e; --sheet: #182033; --ink: #e7eaf2; --ink-soft: #9aa3ba;
  --rule: #283149; --rule-strong: #3a4562; --navy: #93a8e0; --navy-soft: #222c47;
  --red: #ff4a52; --red-soft: #3b1d22; --ok: #6cc08f; color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--sheet); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--sheet); border-bottom: 1px solid var(--rule); }
.wrap { max-width: 820px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.brand { display: flex; align-items: center; gap: 12px; padding-block: 10px 6px; }
.logo { width: 40px; height: 48px; border-radius: 6px; background: #fff; padding: 2px; object-fit: contain; flex: none; }
.brand-text { min-width: 0; }
.brand-text .co { font-size: 11px; color: var(--ink-soft); letter-spacing: .08em; }
.brand-text h1 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: .04em; color: var(--navy); line-height: 1.25; }
.slash { height: 4px; background: var(--red); clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 6px 100%); margin: 0 0 2px; }
.tabs { display: flex; }
.tabs a { flex: 1; text-align: center; padding: 9px 4px 10px; text-decoration: none; color: var(--ink-soft); font-weight: 500; border-bottom: 3px solid transparent; }
.tabs a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--navy); font-weight: 700; }

main.wrap { padding-block: 18px 56px; display: grid; gap: 18px; }
.notice { background: var(--red-soft); border-radius: 10px; padding: 10px 14px; font-size: 13px; }

.card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 16px; display: grid; gap: 14px; min-width: 0; }
.card h2 { margin: 0; font-size: 16px; font-weight: 700; }
.card h2 small { font-weight: 400; color: var(--ink-soft); font-size: 12px; margin-left: 6px; }
.lbl { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .06em; }
select, input[type=text] {
  border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); padding: 8px 10px; min-width: 0;
}
select { padding-right: 28px; }
.field { display: grid; gap: 6px; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav .cur { flex: 1; text-align: center; font-weight: 700; font-size: 17px; }
.nav .cur small { color: var(--ink-soft); font-weight: 500; margin-left: 4px; font-size: 13px; }
.iconbtn { border: 1px solid var(--rule-strong); background: transparent; border-radius: 8px; height: 36px; min-width: 36px; padding: 0 10px; cursor: pointer; }
.iconbtn:hover { background: var(--navy-soft); }

.people { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { border: 1px solid var(--rule-strong); background: transparent; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.pchip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--sheet); font-weight: 700; }

.line { border: 1px solid var(--rule); border-left: 4px solid var(--navy); border-radius: 10px; padding: 12px; display: grid; gap: 10px; background: var(--paper); }
.line-head { display: flex; align-items: center; gap: 8px; }
.line-head .no { font-family: var(--font-num); font-size: 12px; color: var(--ink-soft); }
.line-head select { flex: 1; }
.times { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.times select { font-family: var(--font-num); }
.dur { margin-left: auto; font-family: var(--font-num); font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.dur b { color: var(--ink); font-weight: 600; }
.who { display: grid; gap: 6px; }
.who-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.who-row label { display: inline-flex; align-items: center; gap: 6px; min-width: 6em; cursor: pointer; }
.who-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--navy); }
.who-row.split { background: var(--sheet); border-radius: 8px; padding: 6px 8px; }
.who-row .note { font-size: 12px; color: var(--ink-soft); }
.linkbtn { background: none; border: 0; color: var(--ink-soft); cursor: pointer; font-size: 13px; padding: 4px; }
.linkbtn:hover { color: var(--red); }
.addbtn { border: 1px dashed var(--rule-strong); background: transparent; border-radius: 10px; padding: 10px; cursor: pointer; color: var(--navy); font-weight: 700; }
.addbtn:hover { background: var(--navy-soft); }

.totals { display: grid; gap: 4px; border-top: 1px solid var(--rule); padding-top: 10px; font-size: 14px; }
.totals .r { display: flex; justify-content: space-between; gap: 12px; }
.totals .r.sum { font-weight: 700; border-top: 1px dashed var(--rule); padding-top: 6px; margin-top: 2px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.primary { background: var(--navy); color: var(--sheet); border: 0; border-radius: 8px; padding: 10px 22px; font-weight: 700; cursor: pointer; }
.primary:disabled { opacity: .45; cursor: not-allowed; }
.ghost { background: transparent; border: 1px solid var(--rule-strong); border-radius: 8px; padding: 9px 16px; cursor: pointer; }
.msg { font-size: 13px; color: var(--ink-soft); }
.msg.err { color: var(--red); }

.entry { border-top: 1px solid var(--rule); padding-top: 12px; display: grid; gap: 6px; font-size: 14px; }
.entry:first-of-type { border-top: 0; padding-top: 0; }
.entry-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.entry-head b { font-size: 15px; }
.entry-head .ninku { margin-left: auto; font-family: var(--font-num); color: var(--navy); font-weight: 600; }
.entry ul { margin: 0; padding-left: 1.2em; color: var(--ink-soft); }
.entry .ops { display: flex; gap: 4px; }
.empty { text-align: center; color: var(--ink-soft); padding: 22px 12px; border: 1px dashed var(--rule-strong); border-radius: 10px; font-size: 14px; }
.empty a { color: var(--navy); font-weight: 700; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--paper); border-radius: 10px; padding: 3px; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 7px 4px; cursor: pointer; font-size: 14px; color: var(--ink-soft); }
.seg button[aria-pressed="true"] { background: var(--sheet); color: var(--navy); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; white-space: normal; }
th { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
td.n { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
td.ot { color: var(--red); }
tr.total td { font-weight: 700; border-top: 2px solid var(--navy); border-bottom: 0; }
.bar { height: 6px; background: var(--navy-soft); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--navy); }

.master-grid { display: grid; gap: 18px; }
.mlist { display: grid; gap: 2px; }
.mrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.mrow:last-child { border-bottom: 0; }
.mrow .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mrow.off .nm { color: var(--ink-soft); text-decoration: line-through; }
.addrow { display: flex; gap: 8px; }
.addrow input { flex: 1; }

.brand { flex-wrap: wrap; }
.me { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; justify-content: flex-end; }
.me-name { font-weight: 700; }
.role { font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--rule-strong); color: var(--ink-soft); white-space: nowrap; }
.role.admin { border-color: var(--red); color: var(--red); }
.role.manager { border-color: var(--navy); color: var(--navy); }
.login { max-width: 400px; width: 100%; margin: 12px auto 0; justify-items: center; text-align: center; }
.login-logo { width: 88px; height: 106px; background: #fff; border-radius: 10px; padding: 4px; object-fit: contain; }
.login-form { display: grid; gap: 6px; width: 100%; text-align: left; }
.login-form label { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-top: 6px; }
.login-form input { border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); padding: 10px 12px; width: 100%; }
.login-form .primary { margin-top: 12px; padding-block: 12px; }
.fine { font-size: 11px; color: var(--ink-soft); margin: 0; }
.empform { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.empform .wide { grid-column: 1 / -1; }
.empform input, .empform select { width: 100%; }
.formmsg { margin: 0; }
.acc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); flex-wrap: wrap; }
select.mini { padding: 3px 24px 3px 6px; font-size: 12px; }
.linkbtn.strong { color: var(--navy); font-weight: 700; }
.editor { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0 10px; border-bottom: 1px solid var(--rule); }
.editor input { flex: 1 1 120px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); padding: 7px 10px; min-width: 0; }
.entry .by { font-size: 12px; color: var(--ink-soft); }
.line-head { flex-wrap: wrap; }
.sigbox { display: grid; gap: 8px; background: var(--paper); border-radius: 10px; padding: 10px; }
.sigpad { width: 100%; max-width: 600px; aspect-ratio: 600 / 220; height: auto; background: #fff; border: 1px solid var(--rule-strong); border-radius: 8px; touch-action: none; cursor: crosshair; }
.sigbox input { border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--sheet); padding: 8px 10px; max-width: 600px; }
.sigview { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sigview img { height: 48px; background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 2px; }
.linktext { display: block; font-family: var(--font-num); font-size: 12px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; user-select: all; }
.signsum { display: grid; gap: 6px; font-size: 15px; }
.signsum .lbl { display: inline-block; min-width: 6em; }
.done { background: var(--navy-soft); color: var(--navy); font-weight: 700; border-radius: 10px; padding: 14px; text-align: center; }
.sendbox .lbl { margin-top: 4px; }
.mailtext { margin: 0; white-space: pre-wrap; font-family: var(--font-body); font-size: 13px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 10px; user-select: all; overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: 3em 1fr; gap: 8px; align-items: center; font-size: 13px; }
a.linkish { text-decoration: none; display: inline-flex; align-items: center; }
.subhead { font-size: 13px; font-weight: 700; color: var(--navy); margin-top: 6px; }
.daytable { max-height: 520px; overflow-y: auto; border: 1px solid var(--rule); border-radius: 8px; }
.daytable thead th { position: sticky; top: 0; background: var(--sheet); }
.daytable tr.off td { color: var(--ink-soft); }
.daytable tr.sun td.dt { color: var(--red); }
.daytable tr.sat td.dt { color: var(--navy); }
.sitefields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.sf { display: grid; gap: 3px; font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.sf input, .sf textarea { font-weight: 400; color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); padding: 8px 10px; width: 100%; font-size: 14px; }
.sf textarea { resize: vertical; font-family: inherit; }
.siteeditor { display: grid; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.siteeditor .empform input, .siteeditor .empform select { border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); padding: 8px 10px; }
.siteinfo { display: grid; grid-template-columns: 9em 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.siteinfo dt { color: var(--ink-soft); font-size: 12px; font-weight: 700; padding-top: 2px; }
.siteinfo dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sv { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.sv.pre { white-space: pre-wrap; display: block; }
a.maplink { color: var(--navy); font-weight: 700; font-size: 13px; }
.siteopen { padding: 10px 12px; background: var(--paper); border-radius: 8px; margin: 4px 0 8px; }
.sitedetails { background: var(--paper); border-radius: 10px; padding: 8px 12px; }
.sitedetails summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--navy); }
.sitedetails .siteinfo { margin-top: 8px; }
@media (max-width: 480px) { .siteinfo { grid-template-columns: 1fr; } .siteinfo dt { padding-top: 6px; } }
.siteinfowrap { display: grid; gap: 12px; }
.files { display: grid; gap: 6px; }
.filelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fileitem { display: flex; align-items: center; gap: 8px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 10px; min-width: 0; }
.ficon { font-size: 10px; font-weight: 700; color: var(--sheet); background: var(--red); border-radius: 4px; padding: 1px 5px; flex: none; }
.fname { flex: 1; min-width: 0; color: var(--navy); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsize { font-size: 12px; color: var(--ink-soft); font-family: var(--font-num); flex: none; }
.fileinput { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upbtn { display: inline-block; border: 1px dashed var(--rule-strong); border-radius: 8px; padding: 8px 12px; color: var(--navy); font-weight: 700; cursor: pointer; font-size: 13px; justify-self: start; }
.upbtn:hover { background: var(--navy-soft); }
.fileinput:focus-visible + .upbtn, .upbtn:focus-within { outline: 2px solid var(--navy); }
.viewer { position: fixed; inset: 0; z-index: 50; background: var(--paper); display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.vhead { display: flex; align-items: center; gap: 8px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background: var(--sheet); border-bottom: 1px solid var(--rule); }
.vname { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.primary.small { padding: 6px 14px; font-size: 13px; }
.viewer > .msg { padding: 4px 16px 0; }
.vbody { flex: 1; overflow: auto; padding: 12px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 12px; justify-items: center; align-content: start; }
.vpage, .vimg { width: 100%; max-width: 1000px; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
button.fname { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; }
tr.subtotal td { color: var(--ink-soft); font-size: 13px; border-bottom: 1px dashed var(--rule-strong); }
.listhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ghost.small { padding: 6px 12px; font-size: 13px; }
.logpick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.logpick select { flex: 1 1 220px; }
.logsum { font-size: 14px; color: var(--ink-soft); }
.logsum b { color: var(--navy); font-family: var(--font-num); }
td.wrap { white-space: normal; text-align: left; min-width: 6em; }
tr.daystart td { border-top: 2px solid var(--rule-strong); }
td.dt { font-family: var(--font-num); white-space: nowrap; font-size: 13px; }
.seg.two { grid-template-columns: 1fr 1fr; }
.range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.range input { flex: 1 1 140px; min-width: 0; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); padding: 8px 10px; font-family: var(--font-num); }
.line-head select { flex: 1 1 140px; }
.notein { width: 100%; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--sheet); padding: 7px 10px; font-size: 14px; }
.entry .rem { color: var(--ink); font-size: 13px; }
.mgroup { font-size: 12px; font-weight: 700; color: var(--navy); padding-top: 10px; letter-spacing: .04em; }
.mrow .sub { font-size: 12px; color: var(--ink-soft); }
.addrow select { flex: 0 1 40%; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.flash { background: var(--navy-soft); color: var(--navy); font-weight: 700; border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.listhead + .msg + .entry { border-top: 0; padding-top: 0; }

.signrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.signrows li { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.sr-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sr-sub { font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }