:root {
  --orange: #ff7a1a; --ink: #2a1b12; --ink-2: #6e6259; --paper: #fffaf5; --cream: #fff1e3; --peach: #ffd9bd; --line: #f1e3d6; --red: #c8381e; --red-bg: #fde3dc;
  --card: #ffffff; --ok: #1f7a3d; --we: #9a3c00; --cov-ok: #cfe8d6; --cov-over: #f3c99c; --on-ink: #fffaf5; --shade: rgba(42, 27, 18, .4);
  --r: 14px; --font: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f6ebe1; --ink-2: #bfae9f; --paper: #1d1612; --cream: #2c221b; --peach: #6b3f1f; --line: #3a2e25; --red: #ff7b5c; --red-bg: #4a2219;
    --card: #251c17; --ok: #7fd49a; --we: #ffb079; --cov-ok: #2f5a3c; --cov-over: #7a5229; --on-ink: #1d1612; --shade: rgba(0, 0, 0, .6); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #f6ebe1; --ink-2: #bfae9f; --paper: #1d1612; --cream: #2c221b; --peach: #6b3f1f; --line: #3a2e25; --red: #ff7b5c; --red-bg: #4a2219;
  --card: #251c17; --ok: #7fd49a; --we: #ffb079; --cov-ok: #2f5a3c; --cov-over: #7a5229; --on-ink: #1d1612; --shade: rgba(0, 0, 0, .6); color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 1.6; }
button, input, select, textarea { font: inherit; color: inherit; }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); border-bottom: 2px solid var(--line); }
.shop { font-weight: 900; font-size: 18px; }
.week { display: flex; align-items: center; gap: 4px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ghost { background: none; border: 0; min-width: 44px; min-height: 44px; font-size: 24px; cursor: pointer; border-radius: 999px; }
.ghost:hover { background: var(--cream); }
.tabs { display: flex; gap: 6px; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); overflow-x: auto; }
.tabs button { flex: none; border: 0; background: var(--cream); font-weight: 900; padding: 10px 18px; min-height: 44px; border-radius: 999px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }
main { padding-block: 0 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); max-width: 1100px; margin: 0 auto; }
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0 14px; }
.hint { color: var(--ink-2); font-size: 14px; margin: 4px 0; }
.btn { border: 0; background: var(--orange); color: var(--ink); font-weight: 900; min-height: 46px; padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.btn.ink { background: var(--ink); color: var(--on-ink); }
.btn.ghost { background: var(--cream); font-size: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.status { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.status .ok { color: var(--ok); font-weight: 900; }

/* 希望 */
.who { font-weight: 900; display: flex; align-items: center; gap: 8px; }
.who select, .wishlist select { min-height: 44px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); padding: 4px 8px; }
.wishlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 560px; }
.wishlist li { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; background: var(--card); border: 2px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.wishlist li.off { background: var(--cream); }
.wishlist .tm { display: flex; align-items: center; gap: 6px; }
.wishlist li.off .tm { opacity: .4; }
.rest { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; }
.rest input { width: 20px; height: 20px; accent-color: var(--orange); }
.we { color: var(--we); }
.saved { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px); transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 10px 18px; border-radius: 999px; font-weight: 700; }

/* 組む */
.grid-wrap { overflow-x: auto; border: 2px solid var(--line); border-radius: var(--r); background: var(--card); }
.grid { border-collapse: separate; border-spacing: 4px; min-width: 720px; width: 100%; table-layout: fixed; }
.grid th { font-weight: 900; font-size: 15px; }
.grid th small { display: block; font-size: 12px; color: var(--ink-2); font-weight: 700; }
.grid th.nm { text-align: left; width: 72px; padding-left: 6px; }
.grid thead th:first-child { width: 72px; }
.cell { width: 100%; min-height: 58px; border: 2px dashed var(--line); background: var(--card); border-radius: 10px; font-size: 13px; line-height: 1.3; font-variant-numeric: tabular-nums; cursor: pointer; padding: 4px 2px; }
.cell:hover { border-color: var(--orange); }
.cell.on { border-style: solid; border-color: var(--peach); background: var(--peach); font-weight: 900; font-size: 14px; }
.cell.on.late { background: var(--orange); border-color: var(--orange); }
.cell.nowish:not(.on) { background: repeating-linear-gradient(135deg, var(--card), var(--card) 6px, var(--cream) 6px, var(--cream) 12px); border-style: solid; }
.cell .wish { color: var(--ink-2); font-size: 12px; }
.gaps th { font-size: 13px; text-align: left; padding-left: 6px; }
.gaps td { vertical-align: top; }
.cov { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line); gap: 1px; }
.cov i { flex: 1; background: var(--cov-ok); }
.cov i.short { background: var(--red); }
.cov i.over { background: var(--cov-over); }
.sh { display: block; white-space: pre-line; color: var(--red); font-weight: 900; font-size: 12px; margin-top: 4px; }
.fine { display: block; color: var(--ok); font-size: 12px; font-weight: 700; margin-top: 4px; }
.legend { font-size: 13px; color: var(--ink-2); margin: 8px 0 18px; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.lg.short { background: var(--red); } .lg.late { background: var(--orange); }
.sumt { border-collapse: collapse; width: 100%; max-width: 560px; font-size: 15px; font-variant-numeric: tabular-nums; }
.sumt th, .sumt td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; }
.sumt th:first-child { text-align: left; }
.sumt tr.over td { color: var(--red); font-weight: 900; }
.sendbox { margin-top: 20px; background: var(--cream); border-radius: var(--r); padding: 16px; max-width: 560px; }
.sendbox textarea { width: 100%; border: 2px solid var(--line); border-radius: 10px; padding: 10px; background: var(--card); margin: 8px 0; }

/* 設定 */
.card { background: var(--card); border: 2px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 14px; max-width: 760px; }
.card h2 { margin: 0 0 10px; font-size: 18px; }
.card label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; margin-bottom: 10px; max-width: 320px; }
.card input { min-height: 44px; border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--paper); }
.staff { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.staff th { font-size: 13px; text-align: left; color: var(--ink-2); }
.staff td { padding: 4px 4px 4px 0; }
.staff input { width: 100%; }
.x { background: none; border: 0; color: var(--red); font-weight: 700; min-height: 44px; cursor: pointer; }
.needday { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.needrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.needrow input { width: 84px; }
.needrow input.n { width: 64px; }
.add { background: none; border: 0; color: var(--we); font-weight: 900; min-height: 40px; cursor: pointer; padding: 0; }

dialog { background: var(--card); color: var(--ink); border: 0; border-radius: 20px; padding: 20px; width: min(420px, calc(100vw - 32px)); }
dialog::backdrop { background: var(--shade); }
dialog h2 { margin: 0 0 12px; font-size: 18px; }
dialog .row { display: flex; gap: 12px; }
dialog .row.end { justify-content: flex-end; margin-top: 14px; }
dialog label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; flex: 1; }
dialog input { min-height: 48px; border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 18px; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (max-width: 560px) {
  .wishlist li { grid-template-columns: 1fr auto; }
  .wishlist .tm { grid-column: 1 / -1; grid-row: 2; }
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.cell.on.late { color: #2a1b12; }

/* 勤怠 */
.day { display: flex; align-items: center; gap: 4px; font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; }
.day b { min-width: 8.5em; text-align: center; }
.attlist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; max-width: 760px; }
.attlist li { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; align-items: center; background: var(--card); border: 2px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.attlist li.off { background: var(--cream); }
.who2 { display: flex; flex-direction: column; }
.who2 small { color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.attlist .tm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.attlist input { width: 76px; min-height: 44px; border: 2px solid var(--line); border-radius: 10px; padding: 4px 8px; background: var(--paper); font-variant-numeric: tabular-nums; }
.attlist input.n { width: 56px; }
.brk { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink-2); margin-left: 6px; }
.res { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 14px; font-weight: 700; }
.muted { color: var(--ink-2); }
.warn { color: var(--red); font-weight: 900; }
.acts { margin-left: auto; display: flex; gap: 12px; }

/* 給料 */
.payt { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 15px; font-variant-numeric: tabular-nums; }
.payt th, .payt td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.payt th:first-child { text-align: left; }
.payt thead th { font-size: 13px; color: var(--ink-2); }
.payt tbody tr { cursor: pointer; }
.payt tbody tr:hover, .payt tr.sel { background: var(--cream); }
.payt tfoot th, .payt tfoot td { font-weight: 900; border-bottom: 0; }
.lnk { background: none; border: 0; padding: 0; font-weight: 900; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-left: 6px; vertical-align: 2px; }
.slip { margin-top: 18px; scroll-margin-top: 80px; }
.paper { background: var(--card); border: 2px solid var(--line); border-radius: var(--r); padding: 18px; max-width: 900px; }
.paper header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; border-bottom: 3px solid var(--ink); padding-bottom: 8px; margin-bottom: 12px; }
.paper h2 { margin: 0; font-size: 20px; }
.paper header p { margin: 0; font-weight: 700; }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cols h3 { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
.ln { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 15px; font-variant-numeric: tabular-nums; }
.ln b { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.ln.tot { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 900; margin-top: 4px; }
.ln input { width: 96px; min-height: 40px; border: 2px solid var(--orange); border-radius: 8px; padding: 2px 8px; text-align: right; background: var(--paper); font-weight: 900; }
.net { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; background: var(--cream); border-radius: 10px; padding: 12px 16px; margin: 14px 0 6px; }
.net span { font-weight: 900; }
.net b { font-size: 28px; font-variant-numeric: tabular-nums; }
.warns { margin: 0 0 12px; padding: 10px 12px 10px 28px; background: var(--red-bg); color: var(--red); border-radius: 10px; font-weight: 700; font-size: 14px; }
.paper .row { display: flex; gap: 8px; margin-top: 8px; }
.sendtext { width: 100%; margin-top: 8px; border: 2px solid var(--line); border-radius: 10px; padding: 10px; background: var(--paper); font-size: 14px; }
.tblwrap { overflow-x: auto; }
.staff { min-width: 760px; }
.chk { width: 22px; height: 22px; min-height: 0 !important; accent-color: var(--orange); }
.card select { min-height: 44px; border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--paper); }
@media (max-width: 560px) {
  .payt { min-width: 0; font-size: 14px; }
  .payt .opt { display: none; }
  .payt th, .payt td { padding: 10px 4px; }
}
@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; }
  .attlist li { grid-template-columns: 1fr; }
  .res { grid-column: 1; }
}
.staff td.bad input { border-color: var(--red); background: var(--red-bg); }
.staff select { min-height: 44px; border: 2px solid var(--line); border-radius: 10px; padding: 4px 6px; background: var(--paper); }
.staff { min-width: 1040px; }
/* 組む期間（週・半月・1か月） */
.top { flex-wrap: wrap; row-gap: 8px; }
.seg { display: inline-flex; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; margin-right: 6px; }
.seg button { min-height: 40px; padding: 0 12px; border: 0; background: var(--paper); font: inherit; font-weight: 900; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.seg button + button { border-left: 2px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.wishlist li.wk { margin-top: 10px; }
.grid.rows { min-width: 0; table-layout: auto; }
.grid.rows th.dt { text-align: left; width: 58px; padding-left: 6px; white-space: nowrap; }
.grid.rows th.dt small { display: inline; margin-left: 4px; }
.grid.rows tr.wk > * { border-top: 2px solid var(--line); padding-top: 8px; }
.grid.rows .cell { min-height: 44px; font-size: 13px; }
.grid.rows td.gapc { min-width: 104px; }
.grid.rows .gapc .sh, .grid.rows .gapc .fine { font-size: 12px; }
@media (max-width: 560px) {
  .top .week { width: 100%; justify-content: space-between; }
  .grid.rows .cell { font-size: 12px; padding: 2px; }
  .grid.rows td.gapc { min-width: 84px; }
}
.seg button, [data-weeklabel] { white-space: nowrap; }
.grid.rows thead th { white-space: nowrap; font-size: 14px; }
.grid.rows td.gapc { width: 220px; }
@media (max-width: 560px) {
  .grid.rows thead th { font-size: 12px; }
  .grid.rows td.gapc { width: auto; }
  .seg button { padding: 0 10px; }
}
/* 打刻（スタッフ） */
.clock { display: grid; justify-items: center; gap: 6px; text-align: center; background: var(--card); border: 2px solid var(--line); border-radius: var(--r); padding: 20px 16px; max-width: 560px; }
.clock .now { font-size: 56px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.clock small { color: var(--ink-2); font-weight: 700; font-size: 15px; }
.pbtns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; width: 100%; margin-top: 10px; }
.pbtn { min-height: 76px; border: 0; border-radius: 16px; font-size: 22px; font-weight: 900; cursor: pointer; background: var(--peach); color: var(--ink); }
.pbtn.in, .pbtn.out { background: var(--ink); color: var(--on-ink); }
.pbtn:disabled { opacity: .5; }
.pmsg { min-height: 1.6em; margin: 4px 0 0; font-weight: 900; }
.done { font-weight: 900; color: var(--ok); }
.h2 { font-size: 18px; margin: 20px 0 8px; }
.plog { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 560px; }
.plog li { display: grid; grid-template-columns: 96px 64px 1fr; gap: 8px; align-items: center; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; font-variant-numeric: tabular-nums; }
.okp { color: var(--ok); font-weight: 700; font-size: 14px; }
.ngp { color: var(--red); font-weight: 900; font-size: 14px; }
.rqform { max-width: 560px; margin-top: 20px; }
.rqform label { display: grid; gap: 4px; font-weight: 700; }
.rqform input, .rqform select, .rqform textarea { min-height: 44px; border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--paper); width: 100%; box-sizing: border-box; }
.rqgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.myreq { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.myreq li { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 6px; font-size: 14px; }
.myreq .st { font-weight: 900; }
.myreq .wait .st { color: var(--we); } .myreq .ok .st { color: var(--ok); } .myreq .ng .st { color: var(--red); }
/* 勤怠（店長）：修正の申請 */
.reqs { max-width: 760px; margin-bottom: 12px; border-color: var(--orange); }
.reqlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.reqlist li { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 10px; font-variant-numeric: tabular-nums; }
.reqlist .new { font-weight: 900; color: var(--we); }
.reqlist .why { color: var(--ink-2); font-size: 14px; }
.reqlist .acts { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.src { color: var(--ink-2); font-size: 12px; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }

/* ---------- ホーム・レシート・1年 ---------- */
.h2 { font-size: 22px; font-weight: 900; margin: 8px 0 12px; }
.todo { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.todo li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--card); border: 2px solid var(--orange); border-radius: var(--r); padding: 12px 14px; }
.todo li.done { border-color: var(--line); }
.todo li div { display: flex; flex-direction: column; }
.todo li span { color: var(--ink-2); font-size: 14px; }
.todo .mk { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--orange); display: grid; place-items: center; font-style: normal; font-weight: 900; }
.todo li.done .mk { background: var(--ok); border-color: var(--ok); color: var(--on-ink); }
.kpi h2 { font-size: 16px; }
.kgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.kgrid .k { background: var(--cream); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.kgrid .k span { font-size: 13px; color: var(--ink-2); font-weight: 700; }
.kgrid .k b { font-size: 18px; white-space: nowrap; }
.kgrid .k.last { background: var(--ink); color: var(--on-ink); }
.kgrid .k.last span { color: inherit; opacity: .8; }
.books-in { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.rlist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.rlist li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 150px 120px; gap: 10px; align-items: center; background: var(--card); border: 2px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.rlist li.wait { border-color: var(--orange); background: var(--cream); }
.rlist li.none { display: block; color: var(--ink-2); }
.rs { display: flex; flex-direction: column; min-width: 0; }
.rs small { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.ra { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.rlist select { min-height: 44px; border: 2px solid var(--line); border-radius: 10px; padding: 4px 8px; background: var(--paper); width: 100%; }
.okd { color: var(--ok); font-weight: 900; font-size: 14px; text-align: center; }
.rqform { max-width: none; }
.rqgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rqgrid label { max-width: none; margin: 0; }
.rqgrid input, .rqgrid select { width: 100%; }
.bsum { position: sticky; top: 90px; }
.bsum .big { font-size: 30px; font-weight: 900; margin: 0; font-variant-numeric: tabular-nums; }
.bars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.bars li i { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--orange); min-width: 4px; }
.bars li:nth-child(n+2) i { background: var(--peach); }
.yh { font-size: 18px; }
.yt td input { width: 120px; min-height: 40px; border: 2px solid var(--orange); border-radius: 8px; padding: 2px 8px; text-align: right; background: var(--paper); font-weight: 900; }
.yt tbody tr { cursor: default; }
.yt tbody tr:hover { background: none; }
.yt td.minus { color: var(--red); font-weight: 900; }
.year-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.year-in .card { max-width: none; margin: 0; }
[data-gensen] { margin-top: 16px; max-width: 900px; }
.kl { display: grid; grid-template-columns: 1fr auto; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.kl dt, .kl dd { margin: 0; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.kl dd { font-weight: 900; text-align: right; }
.kl dt:first-child, .kl dt:first-child + dd { font-weight: 900; }
@media (max-width: 860px) {
  .books-in, .year-in { grid-template-columns: minmax(0, 1fr); }
  .bsum { position: static; order: -1; }
  .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kgrid .k.last { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .todo li { grid-template-columns: 32px minmax(0, 1fr); }
  .todo li .btn { grid-column: 2; justify-self: start; }
  .rlist li { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .rlist li > select, .rlist li > .btn, .rlist li > .okd { grid-column: 2 / -1; }
  .rqgrid { grid-template-columns: minmax(0, 1fr); }
}
.rlist .btn { white-space: nowrap; padding-inline: 14px; }
[data-etax] { margin-top: 16px; max-width: 900px; }
[data-etax] .rqgrid { align-items: end; }
[data-etax] h3 { margin-top: 18px; }
[data-etax] .chkl { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 44px; }
[data-etax] .chkl .chk { width: 20px; height: 20px; margin: 0; }

/* 写真（レシート・売上伝票） */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.thumb { width: 52px; height: 52px; padding: 0; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); cursor: zoom-in; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.none { cursor: default; border: 0; background: none; }
.shot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.shot label.btn { position: relative; cursor: pointer; }
.shot > img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 2px solid var(--line); }
dialog.photo { max-width: min(92vw, 720px); }
dialog.photo img { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto 12px; border-radius: 8px; }
.denpyo { max-width: 760px; margin-bottom: 16px; }
.denpyo .dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 12px; align-items: end; }
.denpyo .shot { margin: 0; }
.dlist { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.dlist li { display: grid; grid-template-columns: 52px 60px minmax(0, 1fr); gap: 12px; align-items: center; }
.dlist li b { text-align: right; }
.howto { margin: 0 0 14px; background: var(--card); border: 2px solid var(--line); border-radius: var(--r); padding: 10px 14px; max-width: 760px; }
.howto summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.howto .yt { position: relative; aspect-ratio: 16 / 9; margin-top: 10px; }
.howto iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
@media (max-width: 560px) {
  .denpyo .dgrid { grid-template-columns: 1fr; }
}
/* 入口（ログイン）と、店長・スタッフの出し分け */
.login { display: grid; place-items: start center; padding: 40px 0; }
.login form { width: min(100%, 420px); display: grid; gap: 14px; }
.login h1 { margin: 0 0 4px; font-size: 26px; }
.login label { display: grid; gap: 6px; }
.login input, .login select { min-height: 48px; border: 2px solid var(--line); border-radius: 10px; padding: 6px 12px; background: var(--paper); font: inherit; }
.top .me { font-weight: 700; color: var(--ink-2); font-size: 14px; }
.top [data-logout] { margin-left: auto; min-height: 40px; padding-inline: 14px; }
.pwrow { display: grid; grid-template-columns: 120px 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pwrow input { min-height: 44px; border: 2px solid var(--line); border-radius: 10px; padding: 4px 10px; background: var(--paper); min-width: 0; }
@media (max-width: 560px) {
  .pwrow { grid-template-columns: minmax(0, 1fr) auto; }
  .pwrow input { grid-column: 1; }
}