:root {
  --bg: #f6f3ee; --panel: #fffdf9; --ink: #2a2622; --muted: #7a7168; --line: #e4ddd2;
  --accent: #a0412d; --accent-ink: #fff; --accent-soft: #f5e4de;
  --ok: #2f6b4f; --ok-soft: #e3f0e8; --err: #a12a2a; --err-soft: #f8e1e1; --warn-soft: #fbf0d6;
  --radius: 10px;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}
:root[data-theme=dark] {
  --bg: #1c1a18; --panel: #252220; --ink: #ece6dd; --muted: #a59b90; --line: #3a3531;
  --accent: #e0846b; --accent-ink: #1c1a18; --accent-soft: #3d2a24;
  --ok: #8cc9a8; --ok-soft: #22352b; --err: #f09a9a; --err-soft: #3d2424; --warn-soft: #3a3220;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.7; font-size: 0.9375rem; }
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; letter-spacing: .02em; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
p.lead { color: var(--muted); margin: 0 0 1.5rem; }
.wrap { max-width: 980px; margin: 0 auto; padding: 24px 16px 80px; }
.narrow { max-width: 440px; margin: 8vh auto; padding: 0 16px; }

/* header */
.top { display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); font-family: var(--serif); font-size: 1rem; }
.top nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.top nav a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--muted); font-size: 0.875rem; }
.top nav a:hover { background: var(--bg); color: var(--ink); }
.top nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.me { position: relative; margin-left: auto; }
.me summary { cursor: pointer; list-style: none; font-size: 0.875rem; color: var(--muted); padding: 6px 10px; border-radius: 8px; }
.me summary::after { content: " ▾"; }
.me-menu { position: absolute; right: 0; top: 110%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.me-menu a, .me-menu .linkish { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 0.875rem; }
.me-menu a:hover, .me-menu .linkish:hover { background: var(--bg); }
.mockbar { background: var(--warn-soft); text-align: center; font-size: 0.8125rem; padding: 6px 12px; border-bottom: 1px solid var(--line); }

/* parts */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat { font-size: 2rem; font-weight: 700; line-height: 1.2; }
.stat small { font-size: .9rem; font-weight: 400; color: var(--muted); margin-left: 4px; }
.muted { color: var(--muted); }
.small { font-size: 0.8125rem; }
.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; background: var(--ok-soft); color: var(--ok); }
.flash.error, .error-box { background: var(--err-soft); color: var(--err); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; }
.badge { display: inline-block; font-size: 0.75rem; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge.final { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.blocked, .badge.error { background: var(--err-soft); color: var(--err); border-color: transparent; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: 12px 0 12px 44px; border-bottom: 1px dashed var(--line); }
.steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); font-weight: 700; }
.steps li.done::before { content: "✓"; background: var(--ok-soft); color: var(--ok); border-color: transparent; }

/* forms */
label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: 0.875rem; }
label .muted { font-weight: 400; }
input[type=text], input[type=search], input[type=password], input[type=url], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 6px; }
button, .btn { display: inline-block; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button.primary, .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.danger { color: var(--err); }
button:disabled { opacity: .6; cursor: wait; }
button.small, .btn.small { padding: 6px 12px; font-size: 0.8125rem; }
.linkish { background: none; border: 0; padding: 0; font-weight: 400; color: var(--accent); cursor: pointer; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { margin: 0; font-weight: 400; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-size: 0.875rem; background: var(--bg); }
.seg input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.8125rem; }
.table-scroll { overflow-x: auto; }

/* draft */
.paper { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; white-space: pre-wrap; font-family: var(--serif); font-size: 1rem; line-height: 2; }
.editor { font-family: var(--serif); font-size: 1rem; line-height: 2; min-height: 60vh; background: var(--panel); padding: 20px 24px; }
.split { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.split aside { position: sticky; top: 16px; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } .split aside { position: static; } .paper { padding: 18px; } }
.profile-text { white-space: pre-wrap; font-size: 0.875rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 0.875rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.chip { display: inline-block; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; margin: 2px; font-size: 0.8125rem; }
.overlay { position: fixed; inset: 0; background: rgba(20,16,12,.55); display: grid; place-items: center; z-index: 50; }
.overlay[hidden] { display: none; }
.overlay .box { background: var(--panel); padding: 28px 32px; border-radius: 14px; text-align: center; max-width: 360px; margin: 16px; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 14px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
pre.creds { background: var(--bg); border: 1px solid var(--line); padding: 12px; border-radius: 8px; overflow-x: auto; font-size: 0.8125rem; }
.progress { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.progress > div { height: 100%; background: var(--accent); transition: width .5s; }
@media (max-width: 720px) {
  .top { gap: 8px 12px; padding: 8px 12px; }
  .top nav { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .top nav a { white-space: nowrap; }
}

/* ---- 一元管理 ---- */
.num { font-variant-numeric: tabular-nums; }
.me .role { font-size: 0.6875rem; border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 6px; }
.subnav { display: flex; gap: 4px; padding: 6px 20px; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.subnav a { padding: 4px 10px; border-radius: 6px; text-decoration: none; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.subnav a.on { color: var(--accent); font-weight: 600; background: var(--panel); }
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 16px; }
.tile { display: grid; gap: 4px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; color: var(--ink); }
.tile:hover, .tile:focus-visible { border-color: var(--accent); outline: none; }
table.matrix td.c, table.matrix th:not(:first-child) { text-align: center; width: 6.5em; white-space: nowrap; }
table.matrix tr.group td { background: var(--bg); font-weight: 600; font-size: 0.8125rem; color: var(--muted); }
table.matrix input { width: 18px; height: 18px; }
.cti-pop { position: fixed; top: 16px; right: 16px; z-index: 60; width: min(360px, calc(100vw - 32px)); background: var(--panel); border: 2px solid var(--accent); border-radius: 14px; padding: 16px 18px; box-shadow: 0 16px 40px rgba(0,0,0,.25); display: grid; gap: 6px; }
.cti-pop.ng { border-color: var(--err); }
.cti-head { font-size: 0.75rem; color: var(--muted); letter-spacing: .05em; }
.cti-name { font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.cti-phone { font-variant-numeric: tabular-nums; }
.cti-card { margin-top: 3px; opacity: .9; }
.cti-ng { background: var(--err-soft); color: var(--err); font-weight: 700; border-radius: 8px; padding: 6px 10px; }
.cti-memo { font-size: 0.8125rem; white-space: pre-wrap; background: var(--bg); border-radius: 8px; padding: 6px 10px; max-height: 9em; overflow: auto; }
.cti-pop .row { margin-top: 6px; }

/* ---- 店舗・キャスト ---- */
.wrap.wide { max-width: 1280px; }
.how { display: grid; gap: 6px; font-size: 0.8125rem; }
.swatch { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); vertical-align: -2px; margin-right: 6px; }
.swatch.mirror, table.castgrid td.mirror, table.castgrid th.mirror { background: var(--accent-soft); }
table.castgrid { min-width: 100%; border-collapse: separate; border-spacing: 0; }
table.castgrid th, table.castgrid td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
table.castgrid th { position: sticky; top: 0; background: var(--panel); z-index: 2; color: var(--ink); font-size: 0.875rem; }
table.castgrid .sticky { position: sticky; left: 0; background: var(--panel); z-index: 1; border-right: 1px solid var(--line); }
table.castgrid th.sticky { z-index: 3; }
table.castgrid input[type=text] { width: 11em; padding: 6px 8px; background: transparent; border-color: transparent; }
table.castgrid td input[type=text]:hover { border-color: var(--line); }
table.castgrid td input[type=text]:focus { background: var(--panel); border-color: var(--accent); }
table.castgrid td.sticky input { font-weight: 700; }
table.castgrid tr.newrow td { background: var(--bg); }
table.castgrid tr.newrow td.sticky input, table.castgrid tr.newrow td input { border: 1px dashed var(--line); background: var(--panel); }
table.castgrid tr.inactive td { opacity: .5; }
table.castgrid .offmark { display: inline-block; width: 6.5em; color: var(--muted); font-size: 0.8125rem; padding-left: 8px; }
table.castgrid td .linkish { margin-left: 4px; }
.storelist { display: grid; gap: 8px; }
.storerow { display: grid; grid-template-columns: 1.5em minmax(120px, 1fr) 6em 44px minmax(150px, 220px) auto; gap: 8px; align-items: center; }
.storerow.mirror { padding-left: 20px; }
.storerow.add { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.storerow .arrow { color: var(--muted); text-align: center; }
@media (max-width: 640px) { .storerow { grid-template-columns: 1.5em 1fr; } .storerow select, .storerow button, .storerow input[name=code] { grid-column: 2; } }

/* ---- 書類管理 ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.chip-link { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--panel); font-size: 0.875rem; }
.chip-link.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.chip-link.alert .num { color: var(--err); font-weight: 700; }
.badge.warn { background: var(--warn-soft); border-color: transparent; color: var(--ink); }
a.badge { text-decoration: none; }
.issues h2 { margin-bottom: 6px; }
.issues.error { border-color: var(--err); }
.issues.ok { border-color: var(--ok); }
.issues ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; font-size: 0.875rem; }
.issues li { padding: 4px 10px; border-radius: 6px; }
.issues li.error { background: var(--err-soft); color: var(--err); }
.issues li.warn { background: var(--warn-soft); }
.issues li.info { background: var(--bg); color: var(--muted); }
.docsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 44%); gap: 16px; align-items: start; }
.docsplit aside { position: sticky; top: 16px; }
@media (max-width: 900px) { .docsplit { grid-template-columns: 1fr; } .docsplit aside { position: static; order: -1; } }
.docsplit details > summary { cursor: pointer; font-weight: 700; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; margin-top: 8px; }
.fld.wide { grid-column: 1 / -1; }
.fld label { margin: 8px 0 3px; font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.fld input, .fld select, .fld textarea { padding: 7px 9px; }
.fld.unsure input, .fld.unsure select, .fld.unsure textarea { background: var(--warn-soft); border-color: #d9a300; }
.fld .multi { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.fld .multi .check { margin: 0; font-size: 0.875rem; color: var(--ink); }
.savebar { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; background: var(--bg); padding: 10px 0; border-top: 1px solid var(--line); }
.viewer { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.viewer img { display: block; width: 100%; cursor: zoom-in; }
.viewer.zoom img { width: 220%; max-width: none; cursor: zoom-out; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.thumb { all: unset; box-sizing: border-box; width: 84px; cursor: pointer; text-align: center; font-size: 0.6875rem; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--bg); text-decoration: none; }
.thumb:focus-visible, .thumb:hover { border-color: var(--accent); }
.thumb img { display: block; width: 100%; height: 64px; object-fit: cover; }
.thumb span { display: block; padding: 2px 4px; }
.thumb.file { display: grid; place-items: center; height: 84px; }
.dockinds { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 16px; }
.dockind { margin: 0; display: grid; gap: 10px; align-content: start; }
.dockind.need { border-color: var(--err); }
.dockind h2 { margin: 0; }
table.roster th, table.roster td { font-size: 0.8125rem; padding: 8px; }
@media print {
  .side, .subnav, .noprint, .cti-pop, .flash { display: none !important; }
  body { background: #fff; color: #000; font-size: 0.6875rem; }
  .wrap { max-width: none; padding: 0; }
  .card { border: 0; padding: 0; }
  table.roster th, table.roster td { border: 1px solid #000; font-size: 0.625rem; padding: 4px; }
}

/* ---- 並び替え ---- */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover, th.sortable:focus-visible { color: var(--accent); outline: none; }
th.sortable .arrow { display: inline-block; width: 1em; font-size: 0.6875rem; color: var(--accent); }

/* ---- 色（個人設定） ---- */
:root[data-accent=blue] { --accent: #2a5f9e; --accent-soft: #e0eaf6; }
:root[data-accent=green] { --accent: #2f6b4f; --accent-soft: #e0efe6; }
:root[data-accent=purple] { --accent: #6a4a9c; --accent-soft: #ebe4f5; }
:root[data-accent=pink] { --accent: #b3406f; --accent-soft: #f7e2ea; }
:root[data-accent=ink] { --accent: #3d3833; --accent-soft: #e9e4dc; }
:root[data-theme=dark][data-accent=blue] { --accent: #8db8ee; --accent-soft: #22303f; }
:root[data-theme=dark][data-accent=green] { --accent: #8cc9a8; --accent-soft: #22352b; }
:root[data-theme=dark][data-accent=purple] { --accent: #b9a2e6; --accent-soft: #2e2740; }
:root[data-theme=dark][data-accent=pink] { --accent: #ee93b6; --accent-soft: #3d2430; }
:root[data-theme=dark][data-accent=ink] { --accent: #d8d0c4; --accent-soft: #38332e; }
:root[data-theme=dark] { color-scheme: dark; }
html { font-size: 16px; }
html[data-size=s] { font-size: 14.5px; }
html[data-size=l] { font-size: 17.5px; }
html[data-size=xl] { font-size: 19.5px; }
html[data-corner=square] { --radius: 3px; }
html[data-corner=square] button, html[data-corner=square] .btn, html[data-corner=square] input, html[data-corner=square] select, html[data-corner=square] textarea { border-radius: 3px; }
html[data-density=compact] .card { padding: 12px 14px; margin-bottom: 10px; }
html[data-density=compact] th, html[data-density=compact] td { padding: 5px 8px; }
html[data-density=compact] .wrap { padding-top: 14px; }
html[data-density=compact] body { line-height: 1.5; }
html[data-density=compact] p.lead { margin-bottom: .8rem; }
html[data-density=comfy] .card { padding: 26px; margin-bottom: 22px; }
html[data-density=comfy] th, html[data-density=comfy] td { padding: 14px 10px; }

/* ---- 左のメニュー ---- */
.layout { display: grid; grid-template-columns: var(--side-w, 208px) minmax(0, 1fr); min-height: 100vh; }
html[data-menu=narrow] .layout { --side-w: 156px; }
html[data-menu=wide] .layout { --side-w: 260px; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; background: var(--panel); border-right: 1px solid var(--line); z-index: 10; }
.side .brand { padding: 0 6px; white-space: nowrap; flex-shrink: 0; }
.side nav { display: grid; gap: 2px; align-content: start; }
.side nav a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--muted); font-size: .9375rem; border-left: 3px solid transparent; }
.side nav a:hover { background: var(--bg); color: var(--ink); }
.side nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; border-left-color: var(--accent); }
.side-foot { margin-top: auto; display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 12px; font-size: .875rem; }
.side-foot .who { padding: 0 6px 6px; font-weight: 600; }
.side-foot .who .role { font-size: .6875rem; font-weight: 400; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.side-foot a, .side-foot .linkish { display: block; width: 100%; text-align: left; padding: 6px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: .875rem; }
.side-foot a:hover, .side-foot .linkish:hover { background: var(--bg); color: var(--ink); }
.side-foot a.on { color: var(--accent); font-weight: 700; }
.side-foot form { margin: 0; }
.content { min-width: 0; }
@media (max-width: 820px) {
  .layout { display: block; }
  .side { position: sticky; height: auto; flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .side nav { display: flex; gap: 2px; }
  .side nav a { white-space: nowrap; padding: 6px 10px; border-left: 0; }
  .side-foot { margin: 0 0 0 auto; display: flex; align-items: center; border-top: 0; padding-top: 0; white-space: nowrap; }
  .side-foot .who { display: none; }
  .cti-pop { top: 60px; }
}
/* 着信ポップアップの位置（個人設定） */
.cti-pop.pos-br { top: auto; bottom: 16px; }
.cti-pop.pos-tl { right: auto; left: 16px; }
.cti-pop.pos-bl { top: auto; bottom: 16px; right: auto; left: 16px; }
.cti-pop.pos-center { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); padding: 28px 32px; box-shadow: 0 0 0 100vmax rgba(20,16,12,.45), 0 16px 40px rgba(0,0,0,.3); }
.cti-pop.pos-center .cti-name { font-size: 2rem; }

/* ---- 個人設定の画面 ---- */
.menu-edit { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 460px; }
.menu-edit li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); cursor: grab; }
.menu-edit li.dragging { opacity: .4; }
.menu-edit li .name { flex: 1; font-weight: 600; }
.menu-edit li .grip { color: var(--muted); }
.menu-edit li button { padding: 2px 10px; font-size: .875rem; }
.menu-edit li .check { margin: 0; font-size: .8125rem; align-items: center; }
.menu-edit li .check input { margin: 0; }
.swatches span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--sw); margin-right: 6px; vertical-align: -1px; }
.setrow { display: grid; grid-template-columns: 11em 1fr; gap: 6px 16px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.setrow:last-of-type { border-bottom: 0; }
.setrow > .name { font-weight: 600; font-size: .875rem; }
@media (max-width: 640px) { .setrow { grid-template-columns: 1fr; } }

/* ---- ボード ---- */
:root { --bd-w: #f4a261; --bd-w-soft: #fdebd8; --bd-w-ink: #7a3d0c; --bd-d: #4f8fd6; --bd-d-soft: #dfeaf9; --bd-d-ink: #17406f; --bd-live: #2f9e6f; --bd-shift: rgba(160, 65, 45, .07); --bd-now: #e03131; --bd-hime: #c2338a; }
:root[data-theme=dark] { --bd-w-soft: #4a321c; --bd-w-ink: #ffd9b0; --bd-d-soft: #1f3552; --bd-d-ink: #cfe3ff; --bd-live: #5fd3a0; --bd-shift: rgba(255, 255, 255, .06); --bd-now: #ff6b6b; --bd-hime: #ff8fd0; }
.wrap.full { max-width: none; padding: 20px 20px 80px; }
.bd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bd-clock { display: flex; align-items: baseline; gap: 10px; color: var(--muted); }
.bd-clock strong { font-size: 1.9rem; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bd-tabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px; }
.bd-tabs a { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.bd-tabs a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bd-sample { font-size: .78rem; color: var(--muted); background: var(--warn-soft); border-radius: 6px; padding: 3px 10px; margin-left: auto; }
.bd-store, .bd-total { padding: 16px 18px; }
.bd-storehead { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.bd-title { font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.bd-total { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.bd-code { font-size: .72rem; font-weight: 700; letter-spacing: .06em; background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 2px 8px; }
.bd-kpis { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.bd-kpi { display: grid; line-height: 1.25; }
.bd-kpi .k { font-size: .7rem; color: var(--muted); }
.bd-kpi strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.bd-kpis.big .bd-kpi strong { font-size: 1.6rem; }
.bd-kpi small { font-size: .7rem; font-weight: 400; color: var(--muted); margin-left: 2px; }
.bd-info { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 12px; }
.pill { font-size: .78rem; padding: 2px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.pill.live { background: var(--bd-live); border-color: transparent; color: #fff; font-weight: 700; }
.pill.free { color: var(--ink); font-weight: 600; }
.pill.absent { color: var(--err); border-color: var(--err); }
.pill.drv { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.bd-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.bd-grid { min-width: 1080px; }
.bd-row { display: grid; grid-template-columns: 150px 1fr; border-bottom: 1px solid var(--line); min-height: 58px; }
.bd-row:last-child { border-bottom: 0; }
.bd-who { position: sticky; left: 0; z-index: 3; background: var(--panel); border-right: 1px solid var(--line); padding: 7px 10px; display: grid; align-content: center; gap: 2px; }
.bd-who .nm { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.bd-who .nm strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bd-who .nm span { white-space: nowrap; flex: none; }
.bd-who .nm span { font-size: .72rem; color: var(--muted); }
.bd-who .st { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.bd-who .st b { color: var(--ink); }
.bd-who .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.bd-row.live .dot { background: var(--bd-live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-live) 25%, transparent); }
.bd-row.live .st b { color: var(--bd-live); }
.bd-row.free .dot { background: var(--accent); }
.bd-row.off .bd-who strong, .bd-row.absent .bd-who strong, .bd-row.off .st b { color: var(--muted); }
.bd-row.absent .st b { color: var(--err); }
.bd-track { position: relative; }
.bd-axis { min-height: 26px; position: sticky; top: 0; z-index: 4; background: var(--bg); }
.bd-axis .bd-who { background: var(--bg); }
.bd-axis .tick { position: absolute; top: 4px; font-size: .72rem; color: var(--muted); padding-left: 4px; font-variant-numeric: tabular-nums; }
.gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); opacity: .6; }
.bd-shift { position: absolute; top: 6px; bottom: 6px; background: var(--bd-shift); border-radius: 8px; }
.bd-row.absent .bd-shift { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--err-soft) 6px 12px); }
.bd-slip { position: absolute; top: 8px; bottom: 8px; min-width: 0; padding: 3px 8px; border-radius: 8px; border: 0; border-left: 4px solid var(--bd-w); background: var(--bd-w-soft); color: var(--bd-w-ink); text-align: left; overflow: hidden; display: grid; align-content: center; font-weight: 400; line-height: 1.3; z-index: 1; }
.bd-slip.d { border-left-color: var(--bd-d); background: var(--bd-d-soft); color: var(--bd-d-ink); }
.bd-slip .l1, .bd-slip .l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.bd-slip .l1 b { margin-right: 6px; font-size: .86rem; }
.bd-slip .l2 { font-size: .7rem; opacity: .85; }
.bd-slip .hime, .bd-legend .hime { font-style: normal; font-weight: 700; font-size: .68rem; background: var(--bd-hime); color: #fff; border-radius: 4px; padding: 0 4px; margin-right: 5px; }
.bd-slip.done { opacity: .5; filter: saturate(.5); }
.bd-slip.live { box-shadow: 0 0 0 2px var(--bd-live); z-index: 2; }
.bd-slip.cancel { background: repeating-linear-gradient(135deg, var(--bg) 0 6px, var(--panel) 6px 12px); color: var(--muted); border-left-color: var(--muted); text-decoration: line-through; opacity: .7; }
.bd-slip:hover, .bd-slip:focus-visible, .bd-slip.sel { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; z-index: 3; }
.bd-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bd-now); z-index: 2; pointer-events: none; }
.bd-legend { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; }
.bd-legend .lg { display: inline-block; width: 16px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lg.w { background: var(--bd-w-soft); border-left: 4px solid var(--bd-w); } .lg.d { background: var(--bd-d-soft); border-left: 4px solid var(--bd-d); }
.lg.done { background: var(--line); } .lg.cancel { background: repeating-linear-gradient(135deg, var(--bg) 0 3px, var(--muted) 3px 4px); } .lg.now { width: 2px; height: 14px; background: var(--bd-now); }
.bd-drawer { position: fixed; right: 16px; bottom: 16px; width: min(340px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 16px 40px rgba(0,0,0,.22); z-index: 40; }
.bd-drawer h2 { margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.bd-close { position: absolute; top: 8px; right: 8px; border: 0; background: none; font-size: 1.3rem; padding: 2px 10px; color: var(--muted); }
.bd-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tag { font-size: .75rem; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.tag.w { background: var(--bd-w-soft); color: var(--bd-w-ink); border-color: transparent; } .tag.d { background: var(--bd-d-soft); color: var(--bd-d-ink); border-color: transparent; }
.tag.hime { background: var(--bd-hime); color: #fff; border-color: transparent; } .tag.st-live { background: var(--bd-live); color: #fff; border-color: transparent; }
.bd-memo { font-size: .82rem; background: var(--bg); border-radius: 8px; padding: 6px 10px; margin-top: 4px; }
@media (max-width: 820px) { .wrap.full { padding: 14px 10px 80px; } .bd-row { grid-template-columns: 118px 1fr; } .bd-who .nm { display: grid; gap: 0; } .bd-sample { margin-left: 0; } }
/* ボード：表示の形の切り替え（カード・状態別） */
.bd-views { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: 10px; }
.bd-views button { border: 0; border-radius: 0; padding: 6px 14px; font-size: .85rem; background: var(--panel); color: var(--muted); }
.bd-views button.on { background: var(--ink); color: var(--panel); }
.bd-cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); align-items: start; }
#bd-root.multi.v-cards .bd-storehead .bd-kpis { gap: 4px 16px; }
.bd-card { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--panel); display: grid; gap: 4px; align-content: start; }
.bd-card.live { border-left-color: var(--bd-live); background: color-mix(in srgb, var(--bd-live) 7%, var(--panel)); }
.bd-card.free { border-left-color: var(--accent); }
.bd-card.off, .bd-card.absent { opacity: .62; }
.bd-card .hd { display: flex; align-items: baseline; gap: 8px; }
.bd-card .hd strong { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-card .sh { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.bd-card .stt { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; white-space: nowrap; }
.bd-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.bd-card.live .dot { background: var(--bd-live); } .bd-card.live .stt b { color: var(--bd-live); }
.bd-card.free .dot { background: var(--accent); } .bd-card.absent .stt b { color: var(--err); }
.bd-card .sub { font-size: .78rem; color: var(--muted); }
.bd-card.live .sub { color: var(--bd-live); font-weight: 700; font-size: .9rem; }
.chips2 { display: grid; gap: 3px; }
.bd-chip { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--bd-w); background: var(--bd-w-soft); color: var(--bd-w-ink); border-radius: 6px; padding: 3px 8px; font-size: .8rem; font-weight: 400; min-width: 0; }
.bd-chip.d { border-left-color: var(--bd-d); background: var(--bd-d-soft); color: var(--bd-d-ink); }
.bd-chip b { font-size: .88rem; }
.bd-chip .kd { font-size: .68rem; font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; line-height: 1.4; }
.bd-chip .hime { font-style: normal; font-weight: 700; font-size: .68rem; background: var(--bd-hime); color: #fff; border-radius: 4px; padding: 0 4px; }
.bd-chip .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-chip .yen { font-size: .75rem; opacity: .8; }
.bd-chip.done { opacity: .5; filter: saturate(.5); }
.bd-chip.live { box-shadow: 0 0 0 2px var(--bd-live); }
.bd-chip.cancel { background: var(--bg); color: var(--muted); border-left-color: var(--muted); text-decoration: line-through; }
.bd-chip:hover, .bd-chip:focus-visible, .bd-chip.sel { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
.bd-strip { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 14px; }
.bd-mini { margin: 0; padding: 10px 14px; display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
.bd-mini strong { font-size: 1.15rem; }
.bd-kanban { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.bd-col.before { grid-template-columns: 1fr 1fr; align-items: start; } .bd-col.before h2 { grid-column: 1 / -1; }
@media (max-width: 1500px) { .bd-kanban { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bd-col.before { grid-template-columns: 1fr; } }
.bd-col { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 8px; align-content: start; }
.bd-col h2 { margin: 0 2px 2px; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.bd-col h2 .n { font-size: .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0 9px; }
.bd-col.live { border-top: 4px solid var(--bd-live); } .bd-col.free { border-top: 4px solid var(--accent); } .bd-col.before { border-top: 4px solid var(--bd-d); } .bd-col.off { border-top: 4px solid var(--line); }
@media (max-width: 1100px) { .bd-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bd-kanban { grid-template-columns: 1fr; } }

/* ---- 目標と逆算 ---- */
.gl-top { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.gl-top .card { margin: 0; }
.gl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 22px; align-content: center; }
.gl-kpis > div { display: grid; line-height: 1.35; align-content: start; }
.gl-kpis .k { font-size: .75rem; color: var(--muted); }
.gl-kpis strong { font-size: 1.55rem; }
.gl-kpis strong small { font-size: .75rem; font-weight: 400; color: var(--muted); margin-left: 2px; }
.gl-kpis strong.ok { color: var(--ok); }
.warn { color: var(--err); font-weight: 700; }
.gl-table th.r, .gl-table td.r, table th.r, table td.r { text-align: right; }
.gl-table td { vertical-align: middle; padding-top: 7px; padding-bottom: 7px; white-space: nowrap; }
.gl-table .sep { border-left: 1px solid var(--line); padding-left: 14px; }
.gl-table .big { font-size: 1.25rem; color: var(--accent); }
.gl-table tr.sat td:first-child { color: #2a6fc9; } .gl-table tr.sun td:first-child { color: #d6453d; }
.gl-table tr.cur td { background: var(--accent-soft); }
.gl-table thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.gl-bar { display: inline-block; width: 90px; height: 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; vertical-align: middle; position: relative; }
.gl-bar.wide { width: 100%; }
.gl-bar i { display: block; height: 100%; background: var(--accent); }
.gl-bar i.over { background: var(--err); }
.gl-bar:not(.wide)::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--muted); }
@media (max-width: 820px) { .gl-top { grid-template-columns: 1fr; } }
.bd-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.bd-dates .btn { padding: 6px 14px; font-size: .9rem; }
.bd-dates .btn.on { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.bd-day { font-size: 1.15rem; margin-left: 6px; display: inline-flex; align-items: center; gap: 8px; }
.bd-empty { color: var(--muted); text-align: center; padding: 40px 20px; }
.bd-guide { display: grid; gap: 2px; border-top: 1px dashed var(--line); padding-top: 5px; margin-top: 2px; }
.gline { display: flex; align-items: baseline; gap: 6px; font-size: .78rem; white-space: nowrap; overflow: hidden; }
.gline .kd { font-size: .66rem; font-weight: 700; border-radius: 4px; padding: 0 5px; background: var(--bd-w-soft); color: var(--bd-w-ink); flex: none; }
.gline.d .kd { background: var(--bd-d-soft); color: var(--bd-d-ink); }
.gline b { font-size: .9rem; }
.gline .tx { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.gline.ng b, .gline.ng .tx { color: var(--muted); opacity: .8; }
/* ボード：目標までに必要な数字（いつも上に出す）と、予約時間の確定 */
.bd-need { position: sticky; top: 0; z-index: 20; display: grid; gap: 4px; margin: 0 -4px 12px; padding: 4px; background: var(--bg); }
.bd-need:empty { display: none; }
.need-row { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 7px 14px; text-decoration: none; color: var(--ink); }
.need-row:hover { border-color: var(--accent); }
.need-row .ni { display: grid; line-height: 1.25; }
.need-row .ni.grow { flex: 1; min-width: 120px; max-width: 260px; gap: 4px; }
.need-row .k { font-size: .68rem; color: var(--muted); white-space: nowrap; }
.need-row b { font-size: 1.05rem; white-space: nowrap; }
.need-row .sub { font-size: .68rem; color: var(--muted); }
.need-row .ni.hot b, .need-row .ni.hot .sub { color: var(--err); }
.need-row .ni.ok b { color: var(--ok); }
.bd-confirm { position: fixed; right: 16px; top: 64px; z-index: 45; width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 96px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.bd-confirm h2 { margin: 0 0 2px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.bd-confirm h2 .n { font-size: .8rem; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0 9px; }
.bd-confirm p { margin: 0 0 8px; }
#cf-done .cf-item { background: var(--ok-soft); }
.cf-toggle { padding: 6px 14px; font-size: .85rem; border-radius: 999px; }
.cf-toggle.late { border-color: var(--err); color: var(--err); background: var(--err-soft); }
.cf-toggle.on { outline: 2px solid var(--accent); }
.bd-chip .cf { font-size: .64rem; font-weight: 700; border-radius: 4px; padding: 0 4px; border: 1px dashed currentColor; opacity: .8; flex: none; }
.bd-chip .cf.ok { border: 0; background: var(--bd-live); color: #fff; opacity: 1; }
.bd-chip .cf.late { border: 0; background: var(--err); color: #fff; opacity: 1; }
.bd-cfbox { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; display: grid; gap: 6px; }
.bd-cfbox.ok { background: var(--ok-soft); border-style: solid; border-color: transparent; }
.bd-cfbox input[type=text] { width: 5em; padding: 5px 8px; font-weight: 700; font-size: 1.05rem; text-align: center; }
.bd-cfbox input[type=text]:disabled { border-color: transparent; background: transparent; color: var(--ink); opacity: 1; }
.cf-list { display: grid; gap: 4px; align-content: start; }
.cf-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-left: 4px solid var(--bd-w); border-radius: 8px; padding: 4px 10px; background: var(--panel); font-size: .85rem; min-width: 0; }
.cf-item.d { border-left-color: var(--bd-d); }
.cf-item.late { background: var(--err-soft); border-color: var(--err); }
.cf-check { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: .8rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.cf-check input { width: 20px; height: 20px; }
.cf-item input[type=text] { width: 4.6em; padding: 3px 6px; font-weight: 700; font-size: .95rem; text-align: center; background: var(--panel); }
.cf-item input[type=text]:disabled { border-color: transparent; background: transparent; color: var(--ink); opacity: 1; }
.cf-item .who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cf-item .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.cf-item .kd { font-size: .68rem; font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-right: 5px; }
.cf-item .hime { font-style: normal; font-weight: 700; font-size: .68rem; background: var(--bd-hime); color: #fff; border-radius: 4px; padding: 0 4px; margin-right: 5px; }
.cf-item .wait { font-size: .8rem; white-space: nowrap; font-weight: 600; }
.cf-item.late .wait { color: var(--err); }
@media (max-width: 640px) { .cf-item { flex-wrap: wrap; } .bd-need { position: static; } }
.storerow input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }

/* ---- ボード：店舗の色（--sc）と、大きめのカード ---- */
.bd-card, .bd-chip, .bd-slip, .bd-conf, .cf-item, .need-row, .bd-mini, .bd-title, .bd-drawer, .bd-guide { --sc: var(--accent); }
.bd-code { background: color-mix(in srgb, var(--sc) 16%, var(--panel)); color: var(--sc); }
.need-row { border-left-color: var(--sc); }
.bd-mini { border-left: 4px solid var(--sc); }
.bd-card { border-left: 5px solid var(--sc); padding: 8px 10px; gap: 5px; }
.bd-card.live { border-left-color: var(--sc); }
.bd-card.free { border-left-color: var(--sc); }
.bd-card .hd strong { font-size: 1.05rem; }
.bd-card .sh { font-size: .75rem; }
.bd-card .stt { color: var(--err); font-weight: 700; }
.bd-card.live .sub { font-size: .9rem; }
.bd-card.small { padding: 5px 10px; opacity: .7; }
.bd-card.small .hd strong { font-size: .88rem; }
.bd-guide { display: flex; gap: 6px; flex-wrap: wrap; border-top: 0; padding-top: 0; margin-top: 0; }
.gp { display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; background: var(--bg); white-space: nowrap; }
.gp .kd { font-size: .7rem; font-weight: 800; color: var(--sc); }
.gp.d .kd { background: var(--sc); color: #fff; border-radius: 4px; padding: 0 4px; }
.gp b { font-size: .86rem; }
.gp .mx { font-size: .72rem; color: var(--muted); }
.gp.now { border-color: var(--bd-live); background: color-mix(in srgb, var(--bd-live) 12%, var(--panel)); }
.gp.now b { color: var(--bd-live); }
.gp.ng { opacity: .45; } .gp .x { font-weight: 700; }
/* 伝票の色：店舗の色で、待ち合わせは薄く・デリバリーは濃く */
.bd-chip, .bd-slip { border-left: 4px solid var(--sc); background: color-mix(in srgb, var(--sc) 15%, var(--panel)); color: var(--ink); }
.bd-chip.d, .bd-slip.d { border-left-color: var(--sc); background: var(--sc); color: #fff; }
.bd-chip { padding: 3px 8px; font-size: .8rem; gap: 6px; flex-wrap: wrap; row-gap: 2px; }
.bd-chip b { font-size: .88rem; }
.bd-chip .kd { font-size: .68rem; }
.bd-chip .tx { flex: 1 1 5em; }
.bd-chip .cf.ok, .bd-chip .cf.late { border: 0; }
.bd-chip.d .cf:not(.ok):not(.late) { color: #fff; }
.bd-chip.cancel { background: var(--bg); color: var(--muted); border-left-color: var(--muted); }
.bd-more { border: 0; background: none; padding: 0; text-align: left; font-size: .75rem; font-weight: 400; color: var(--muted); text-decoration: underline dotted; }
.bd-movednote { font-size: .75rem; color: var(--bd-live); font-weight: 700; }
.tag.w { background: color-mix(in srgb, var(--sc) 15%, var(--panel)); color: var(--ink); border: 1px solid var(--sc); } .tag.d { background: var(--sc); color: #fff; }
.cf-item { border-left-color: var(--sc); } .cf-item.d { border-left-color: var(--sc); }
.lgw, .lgd { display: inline-block; font-size: .7rem; border-radius: 4px; padding: 0 5px; border: 1px solid var(--muted); } .lgd { background: var(--muted); color: var(--panel); }
/* 状態別：5つめの列（予約時間確定） */
.bd-kanban { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bd-col.before { grid-template-columns: 1fr; }
.bd-col.conf { border-top: 4px solid var(--bd-live); }
.bd-col h2.sub2 { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); }
.bd-conf { display: grid; gap: 2px; width: 100%; text-align: left; border: 1px solid var(--line); border-left: 5px solid var(--sc); border-radius: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--sc) 12%, var(--panel)); color: var(--ink); font-weight: 400; }
.bd-conf.d { background: var(--sc); color: #fff; border-color: var(--sc); }
.bd-conf .l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bd-conf .l1 b { font-size: 1.35rem; }
.bd-conf .left { font-size: .85rem; font-weight: 700; }
.bd-conf .l2 { display: flex; align-items: center; gap: 6px; font-size: .9rem; min-width: 0; }
.bd-conf .l2 strong { font-size: 1rem; }
.bd-conf .kd { font-size: .7rem; font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
.bd-conf .hime { font-style: normal; font-weight: 700; font-size: .68rem; background: var(--bd-hime); color: #fff; border-radius: 4px; padding: 0 4px; }
.bd-conf.d .bd-code { background: #fff; }
.bd-conf:hover, .bd-conf:focus-visible, .bd-conf.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 1100px) { .bd-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bd-kanban { grid-template-columns: 1fr; } }
.bd-card .res { margin-left: auto; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.bd-card .res.has { background: var(--sc); color: #fff; }
.bd-card .res.none { border: 1px dashed var(--line); color: var(--muted); font-weight: 400; }
.bd-noslip { border: 1px dashed var(--line); border-radius: 6px; padding: 3px 8px; font-size: .78rem; color: var(--muted); text-align: center; background: var(--bg); }
.bd-card:has(.bd-noslip) { background: var(--panel); }

/* ---- 伝票の小さいウィンドウ（編集） ---- */
.bd-drawer.edit { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.bd-drawer.edit h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
#sl-form { display: grid; gap: 7px; }
.sl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl-row > label:first-child { width: 4.6em; margin: 0; font-size: .78rem; color: var(--muted); flex: none; }
.sl-row label.in { margin: 0 0 0 4px; font-size: .78rem; color: var(--muted); }
.sl-row input[type=text], .sl-row select, .sl-row textarea { padding: 5px 8px; font-size: .9rem; width: auto; flex: 1; min-width: 0; }
.sl-row #sl-start { flex: none; width: 5em; font-weight: 700; font-size: 1.05rem; text-align: center; }
.sl-row .yenin { flex: none; width: 6em; text-align: right; }
.sl-row .seg span { padding: 3px 11px; font-size: .82rem; }
.sl-opts { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.sl-opts label { margin: 0; font-weight: 400; }
.sl-opts input { position: absolute; opacity: 0; }
.sl-opts span { display: inline-block; font-size: .76rem; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); cursor: pointer; }
.sl-opts input:checked + span { background: var(--sc); border-color: var(--sc); color: #fff; font-weight: 700; }
.sl-opts input:focus-visible + span { outline: 2px solid var(--accent); }
.sl-row.money span { display: grid; gap: 1px; } .sl-row.money i { font-style: normal; font-size: .66rem; color: var(--muted); }
.sl-row.total input { flex: none; width: 8em; font-size: 1.2rem; font-weight: 800; text-align: right; }
.sl-alert { margin: 0; font-size: .8rem; padding: 4px 10px; border-radius: 6px; background: var(--warn-soft); }
.sl-alert.late { background: var(--err-soft); color: var(--err); font-weight: 700; }
.sl-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; position: sticky; bottom: -18px; background: var(--panel); padding: 8px 0; }
.sl-foot .primary { margin-left: auto; padding: 8px 28px; }
.bd-add { border: 0; background: none; padding: 0; text-align: left; font-size: .74rem; font-weight: 400; color: var(--sc); cursor: pointer; }
.bd-add:hover { text-decoration: underline; }
.bd-chip .cf.ht { border: 1px dashed currentColor; background: none; }
.bd-chip .cf.ht.late { border: 0; background: var(--err); color: #fff; }
.cf-item .wait.ht { color: var(--muted); } .cf-item .wait.ht.late { color: var(--err); }
.bd-kanban { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, .8fr); }
.bd-col.before { grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 1500px) { .bd-kanban { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bd-col.before { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .bd-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bd-kanban { grid-template-columns: 1fr; } }
.bd-mini { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; padding: 10px 16px; }
.bd-mini .bd-title { font-size: 1rem; }
.bd-strip { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
@media (max-width: 640px) { .bd-strip { grid-template-columns: 1fr; } }
.sl-row > label:first-child { width: 5.2em; white-space: nowrap; }
.sl-row input.yenin { flex: none; width: 6em; text-align: right; }
.sl-row.money { align-items: flex-end; }
.sl-row.money > label:first-child { align-self: center; }
.sl-row > label:first-child { width: 5.2em; white-space: nowrap; }
.sl-row input.yenin { flex: none; width: 6em; text-align: right; }
.sl-row.money { align-items: flex-end; }
.sl-row.money > label:first-child { align-self: center; }
.bd-chip .l2 { flex: 1 1 100%; display: flex; gap: 8px; font-size: .76rem; min-width: 0; white-space: nowrap; }
.bd-chip .l2 .cu { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.bd-chip .l2 .wh { opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.bd-chip .l2 .wh::before { content: "📍"; font-size: .7em; margin-right: 2px; }

/* ---- 伝票のウィンドウ（別ウィンドウ） ---- */
body.slipwin { background: var(--panel); min-height: 100vh; }
.sw-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: var(--sc); color: #fff; }
.sw-head strong { font-size: 1.25rem; }
.sw-store { font-size: .78rem; font-weight: 700; background: rgba(255,255,255,.22); border-radius: 6px; padding: 1px 8px; }
.sw-kind { margin-left: auto; font-size: .85rem; font-weight: 700; }
.sw-body { padding: 12px 16px 0; }
.slipwin #sl-form { display: grid; gap: 9px; }
.slipwin label { margin: 0 0 2px; font-size: .74rem; font-weight: 600; color: var(--muted); }
.slipwin input[type=text], .slipwin select, .slipwin textarea { padding: 6px 9px; font-size: .92rem; }
.slipwin select:focus, .slipwin input:focus, .slipwin textarea:focus { outline-color: var(--sc); }
.sw-grid { display: grid; gap: 8px; }
.sw-grid.g3 { grid-template-columns: 5.5em 1fr 9em; } .sw-grid.g4 { grid-template-columns: 1fr 1fr 1.5fr 6.5em; } .sw-grid.g5 { grid-template-columns: repeat(5, 1fr); }
.sw-grid.gp { grid-template-columns: 7em 1fr; } .sw-grid.ga { grid-template-columns: 1fr 6em; margin-top: 8px; }
#sl-start { font-weight: 800; font-size: 1.1rem; text-align: center; }
.slipwin .r { text-align: right; }
.sw-box { border: 1px solid var(--line); border-left: 4px solid var(--sc); border-radius: 8px; padding: 9px 10px; background: color-mix(in srgb, var(--sc) 7%, var(--panel)); display: grid; gap: 6px; }
.sg { position: relative; }
.sw-sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 8; list-style: none; margin: 2px 0 0; padding: 4px; background: var(--panel); border: 1px solid var(--sc); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.2); max-height: 260px; overflow-y: auto; }
.sw-sug button { display: grid; width: 100%; text-align: left; border: 0; background: none; padding: 5px 8px; border-radius: 6px; font-weight: 400; gap: 0; }
.sw-sug button:hover { background: color-mix(in srgb, var(--sc) 14%, var(--panel)); }
.sw-sug strong { font-size: .9rem; } .sw-sug span { font-size: .74rem; color: var(--muted); }
.slipwin .sl-opts input:checked + span { background: var(--sc); border-color: var(--sc); }
.sw-total { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.sw-total label { margin: 0; font-size: .85rem; } .sw-total input { width: 9em; font-size: 1.35rem; font-weight: 800; }
.sw-checks { display: flex; gap: 18px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.sw-checks .cf-check { font-size: .9rem; color: var(--ink); }
.sw-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 0 12px; background: var(--panel); border-top: 1px solid var(--line); }
.sw-foot .linkish { margin-right: auto; } .sw-foot .primary { background: var(--sc); border-color: var(--sc); color: #fff; padding: 9px 30px; }
.bd-chip .l3 { font-size: .72rem; } .bd-chip .pk { font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; } .bd-chip .bn { overflow: hidden; text-overflow: ellipsis; }
.ms-table input[type=text] { padding: 5px 8px; } .ms-table td { padding: 3px 4px; vertical-align: middle; } .ms-table .c-minutes, .ms-table .c-price, .ms-table .c-code { width: 8.5em; } .ms-table .c-flag { width: 4em; text-align: center; } .ms-table .c-flag input { width: 18px; height: 18px; }
@media (max-width: 520px) { .sw-grid.g3, .sw-grid.g4, .sw-grid.g5 { grid-template-columns: 1fr 1fr; } }
.sw-grid.g2 { grid-template-columns: 1fr 1fr; }
.sw-contact { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.sw-contact > label:first-child { margin: 0; white-space: nowrap; }
.sw-contact input[type=text] { width: 5em; text-align: center; font-weight: 700; padding: 4px 6px; }
.bd-back { font-size: .78rem; font-weight: 700; color: var(--sc); }
.bd-back::before { content: "↩ "; }
.bd-back.home { color: var(--muted); } .bd-back.home::before { content: "🏠 "; }
.bd-chip .bring { background: #ffd43b; color: #3b2f00; border-radius: 5px; padding: 1px 7px; font-size: .78rem; font-weight: 700; align-items: center; white-space: normal; }
.bd-chip .bring b { font-size: .68rem; background: #3b2f00; color: #ffd43b; border-radius: 4px; padding: 0 5px; flex: none; }
.bd-prep { display: grid; gap: 4px; margin-bottom: 10px; } .bd-prep:empty { display: none; }
.prep-row { display: flex; align-items: center; gap: 10px; background: #fff3bf; color: #3b2f00; border: 1px solid #f0c000; border-left: 5px solid var(--sc); border-radius: 10px; padding: 6px 12px; font-size: .92rem; }
.prep-row b.num { font-size: 1.05rem; } .prep-row .tx { flex: 1; } .prep-row .what { background: #ffd43b; border-radius: 4px; padding: 0 5px; }
.prep-row button { padding: 3px 14px; font-size: .82rem; background: #3b2f00; color: #fff3bf; border-color: #3b2f00; }
.bd-chip .bring.ok { background: var(--ok-soft); color: var(--ok); } .bd-chip .bring.ok b { background: var(--ok); color: #fff; }
.prep-row b.num { white-space: nowrap; }
.prep-row .why { display: block; font-size: .78rem; font-weight: 700; }
.prep-row.urgent { background: var(--err-soft); border-color: var(--err); color: var(--err); }
.prep-row.urgent .what { background: var(--err); color: #fff; }
.prep-row.urgent button { background: var(--err); border-color: var(--err); color: #fff; }
.bd-prep { margin: 0 0 14px; }
.bd-donebtn { padding: 6px 14px; font-size: .85rem; border-radius: 8px; margin-left: 6px; color: var(--muted); }
.bd-donebtn.on { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.bd-card.off { opacity: .85; }
.bd-card .stt.offm { color: var(--muted); font-weight: 400; }
.bd-rec { border: 0; background: none; padding: 0; text-align: right; font-size: .7rem; font-weight: 400; color: var(--muted); cursor: pointer; justify-self: end; }
.bd-rec:hover { text-decoration: underline; color: var(--ink); }
.bd-rec.closed { color: var(--sc); font-weight: 700; font-size: .78rem; justify-self: start; }
.bd-endask { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 5px; flex-wrap: wrap; }
.bd-endask .tx { flex: 1; min-width: 0; }
.bd-endask button { padding: 1px 10px; font-size: .74rem; font-weight: 600; border-radius: 999px; }
.bd-endask input { width: 4.6em; padding: 2px 6px; font-size: .85rem; font-weight: 700; text-align: center; }
.bd-recrow { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.bd-recrow .bd-rec.closed { margin-right: auto; }
.bd-recrow.editing, .bd-endask.editing { justify-content: flex-start; border-top: 1px dashed var(--line); padding-top: 5px; }

/* ---- シフト ---- */
.sf-top { display: grid; grid-template-columns: minmax(260px, 340px) minmax(300px, 420px) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 8px; }
.sf-top .card { margin: 0; }
.sf-send textarea { font-size: .95rem; line-height: 1.6; }
.sf-log { display: flex; flex-direction: column; min-height: 0; }
.sf-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-height: 420px; overflow-y: auto; align-content: start; }
.sf-results li { display: flex; gap: 10px; align-items: flex-start; border-left: 4px solid var(--ok); background: var(--ok-soft); border-radius: 8px; padding: 6px 10px; font-size: .86rem; }
.sf-results li.ng { border-left-color: var(--err); background: var(--err-soft); }
.sf-results li.done { border-left-color: var(--line); background: var(--bg); color: var(--muted); }
.sf-results .mark { font-weight: 800; white-space: nowrap; color: var(--ok); } .sf-results .ng .mark { color: var(--err); } .sf-results .done .mark { color: var(--muted); }
.sf-results .tx { flex: 1; min-width: 0; } .sf-results .src { display: block; font-size: .78rem; opacity: .85; white-space: pre-wrap; }
.sf-results .when { white-space: nowrap; } .sf-results form { margin: 0; } .sf-results button { padding: 2px 10px; }
.sf-store h2 { display: flex; align-items: center; gap: 8px; }
.sf-grid th, .sf-grid td { padding: 3px 4px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sf-grid th { white-space: nowrap; } .sf-grid th a { color: var(--ink); text-decoration: none; display: block; } .sf-grid th a:hover { color: var(--accent); }
.sf-grid th .n { display: block; font-size: .7rem; font-weight: 400; color: var(--muted); }
.sf-grid th.sat a { color: #2a6fc9; } .sf-grid th.sun a { color: #d6453d; }
.sf-grid .who { text-align: left; font-weight: 700; white-space: nowrap; position: sticky; left: 0; background: var(--panel); z-index: 1; padding-right: 12px; }
.sf-grid td input { width: 100%; min-width: 6em; text-align: center; padding: 5px 4px; background: transparent; border-color: transparent; font-variant-numeric: tabular-nums; }
.sf-grid td input:hover { border-color: var(--line); } .sf-grid td input:focus { background: var(--panel); border-color: var(--sc); }
.sf-grid td.on input { background: color-mix(in srgb, var(--sc) 15%, var(--panel)); font-weight: 700; }
.sf-grid td.tent input { background: var(--warn-soft); }
.sf-grid .today { box-shadow: inset 2px 0 0 var(--sc), inset -2px 0 0 var(--sc); }
.bd-shiftng { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: baseline; background: var(--err-soft); color: var(--err); border: 1px solid var(--err); border-radius: 10px; padding: 7px 14px; margin-bottom: 10px; text-decoration: none; font-size: .86rem; }
.bd-shiftng em { font-style: normal; margin-left: auto; font-weight: 700; text-decoration: underline; }
@media (max-width: 900px) { .sf-top { grid-template-columns: 1fr; } }
.sf-filter { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.sf-filter input { width: 12em; padding: 6px 10px; } .sf-filter select { width: auto; padding: 6px 10px; }
.sf-grid th.sortable .d { display: block; cursor: pointer; } .sf-grid th .n a { display: inline; color: var(--accent); text-decoration: underline; }
.sf-grid th.who.sortable { cursor: pointer; }
.sf-grid .who .oth { display: block; font-size: .7rem; font-weight: 400; color: var(--muted); }
.sf-grid td.note { min-width: 14em; } .sf-grid td.note input { text-align: left; min-width: 13em; border-color: var(--line); background: var(--panel); font-size: .85rem; }
.sf-grid th.note { text-align: left; }
.sf-results li.ng:has(.danger) { border-left-color: #f0a000; background: var(--warn-soft); } .sf-results li.ng:has(.danger) .mark { color: #9a6700; }
.bd-orphan { display: grid; gap: 4px; margin-bottom: 10px; } .bd-orphan:empty { display: none; }
.orphan-row { display: flex; align-items: center; gap: 10px; background: var(--err-soft); color: var(--err); border: 1px solid var(--err); border-left: 5px solid var(--sc); border-radius: 10px; padding: 6px 12px; font-size: .9rem; flex-wrap: wrap; }
.orphan-row b { background: var(--err); color: #fff; border-radius: 4px; padding: 0 7px; font-size: .78rem; white-space: nowrap; }
.orphan-row .tx { flex: 1; min-width: 0; } .orphan-row button { padding: 3px 14px; font-size: .82rem; }
.sf-results li { flex-wrap: wrap; } .sf-results .tx { flex: 1 1 100%; order: 3; } .sf-results .when { margin-left: auto; }
.sf-send { display: flex; flex-direction: column; } .sf-send textarea { flex: 1; min-height: 300px; }
.sf-needt { width: 100%; border-collapse: separate; border-spacing: 4px; margin-bottom: 8px; }
.sf-needt th, .sf-needt td { border: 0; padding: 0; text-align: center; }
.sf-needt thead th { font-size: .8rem; color: var(--ink); } .sf-needt thead th span { display: block; font-size: .7rem; font-weight: 400; color: var(--muted); }
.sf-needt thead th.sat, .sf-needt thead th.sat span { color: #2a6fc9; } .sf-needt thead th.sun, .sf-needt thead th.sun span { color: #d6453d; }
.sf-needt td { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 2px; line-height: 1.25; }
.sf-needt td strong { font-size: 1.5rem; } .sf-needt td span { font-size: .72rem; color: var(--muted); } .sf-needt td em { display: block; font-style: normal; font-size: .7rem; font-weight: 700; }
.sf-needt td.short { background: var(--err-soft); border-color: var(--err); } .sf-needt td.short em { color: var(--err); }
.sf-needt td.ok { background: var(--ok-soft); border-color: transparent; } .sf-needt td.ok em { color: var(--ok); }
@media (max-width: 1300px) { .sf-top { grid-template-columns: 1fr 1fr; } .sf-need { grid-column: 1 / -1; } }
@media (max-width: 900px) { .sf-top { grid-template-columns: 1fr; } }
.sf-trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px 22px; }
.sf-trends h3 { margin: 0 0 6px; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.sf-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.sf-kpis > div { display: grid; line-height: 1.3; align-content: start; }
.sf-kpis .k { font-size: .7rem; color: var(--muted); } .sf-kpis strong { font-size: 1.45rem; } .sf-kpis strong small { font-size: .7rem; font-weight: 400; color: var(--muted); margin-left: 2px; }
.sf-kpis strong.bad { color: var(--err); } .sf-kpis .small { font-size: .68rem; }
.sf-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 150px; align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 34px; position: relative; }
.sf-bars .col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.sf-bars .bar { width: 72%; background: var(--sc); border-radius: 4px 4px 0 0; min-height: 2px; }
.sf-bars .v { font-size: .68rem; color: var(--muted); }
.sf-bars .r { position: absolute; bottom: -17px; font-size: .66rem; color: var(--muted); } .sf-bars .r.hi { color: var(--err); font-weight: 700; }
.sf-bars .m { position: absolute; bottom: -32px; font-size: .64rem; color: var(--muted); white-space: nowrap; }
.sf-wd { margin-top: 6px; font-size: .78rem; } .sf-wd th, .sf-wd td { padding: 3px 4px; text-align: center; border-bottom: 1px solid var(--line); } .sf-wd th:first-child { text-align: left; color: var(--muted); font-weight: 400; white-space: nowrap; }
.sf-wd td.hi { color: var(--err); font-weight: 700; }
.sf-needbox { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; } .sf-needbox summary { cursor: pointer; font-weight: 700; font-size: .88rem; }
.sf-needbox .sf-needt td strong { font-size: 1.15rem; } .sf-needbox .sf-needt td { padding: 4px 2px; }
.sf-send .kbd { display: block; font-size: .62rem; font-weight: 400; opacity: .85; }
.sf-grid th .hc { display: block; margin: 3px 2px 2px; padding: 3px 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); line-height: 1.2; font-weight: 400; }
.sf-grid th .hc b { font-size: 1.25rem; font-weight: 800; color: var(--ink); } .sf-grid th .hc i { font-style: normal; font-size: .7rem; color: var(--muted); }
.sf-grid th .hc em { display: block; font-style: normal; font-size: .68rem; font-weight: 700; }
.sf-grid th .hc.short { background: var(--err-soft); border-color: var(--err); } .sf-grid th .hc.short em { color: var(--err); }
.sf-grid th .hc.ok { background: var(--ok-soft); border-color: transparent; } .sf-grid th .hc.ok em { color: var(--ok); }
.sf-grid td { position: relative; }
.sf-del { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; padding: 0; line-height: 1; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: .8rem; font-weight: 700; opacity: .35; }
.sf-grid td:hover .sf-del, .sf-del:focus-visible { opacity: 1; color: var(--err); border-color: var(--err); }
.sf-tag { display: inline-block; margin-left: 6px; font-size: .66rem; font-weight: 700; border-radius: 999px; padding: 0 7px; vertical-align: 1px; white-space: nowrap; }
.sf-tag.none { background: var(--err); color: #fff; } .sf-tag.one { background: #f0a000; color: #fff; }
.sf-grid td input { min-width: 4.6em; } .sf-grid th .hc { margin: 3px 1px 2px; }
.sf-grid .who { box-shadow: 1px 0 0 var(--line); }
.sf-next { display: block; font-size: .72rem; font-weight: 700; color: var(--sc); text-decoration: none; white-space: nowrap; } .sf-next:hover { text-decoration: underline; }
.sf-grid td.up input { background: #dbe9ff; color: #123a73; } .sf-grid td.comp input { background: #e8dcfb; color: #40207a; }
:root[data-theme=dark] .sf-grid td.up input { background: #1f3552; color: #cfe3ff; } :root[data-theme=dark] .sf-grid td.comp input { background: #33264d; color: #e2d3ff; }
.sf-grid td.on input { padding-right: 24px; min-width: 6.4em; }
.sf-grid td:not(.note) input { font-size: .8rem; padding-top: 4px; padding-bottom: 4px; }
.sf-pick { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); z-index: 6; display: flex; gap: 3px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.18); white-space: nowrap; }
.sf-pick button { padding: 2px 9px; font-size: .74rem; font-weight: 700; border-radius: 6px; }
.sf-pick button.on { background: var(--ink); color: var(--panel); border-color: var(--ink); }

/* シフトのマス：マウスを乗せたときだけ「変更・削除」を薄く出す */
.sf-del { display: none; }
.sf-act { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1px; opacity: 0; pointer-events: none; transition: opacity .12s; }
.sf-act button { padding: 0 4px; font-size: .62rem; line-height: 1.35; font-weight: 700; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.sf-grid td:hover .sf-act, .sf-act:focus-within { opacity: .55; pointer-events: auto; }
.sf-act button:hover, .sf-act button:focus-visible { color: var(--ink); border-color: var(--ink); }
.sf-act button.del:hover, .sf-act button.del:focus-visible { color: var(--err); border-color: var(--err); }
.sf-act:hover { opacity: 1 !important; }
.sf-grid td input:focus ~ .sf-act { display: none; }
.sf-grid td.on input { padding-right: 34px; min-width: 7em; }

/* 長いシフトも切れないように：右の余白をやめ、変更・削除はマスの下の縁に出す */
.sf-grid td.on input { padding-right: 2px; padding-left: 2px; min-width: 6.6em; letter-spacing: -.01em; }
.sf-act { right: auto; left: 50%; top: 100%; transform: translate(-50%, -45%); flex-direction: row; gap: 2px; z-index: 5; white-space: nowrap; }
/* 変更・削除：マウスを乗せた時に、マスの上に重ねて出す */
.sf-act { top: 50%; transform: translate(-50%, -50%); gap: 4px; }
.sf-grid td:hover .sf-act, .sf-act:focus-within { opacity: .9; }
.sf-act button { font-size: .68rem; padding: 1px 6px; }

/* シフト回収：シフトの表では名前の下の行に。ボードのカードにも出す */
.sf-grid .who .sf-tag { display: block; width: max-content; margin: 2px 0 0; }
.bd-collect { align-self: center; font-size: .64rem; font-weight: 700; border-radius: 999px; padding: 0 7px; background: #f0a000; color: #fff; white-space: nowrap; }

/* 横にはみ出さないように：ボードの各列・カード */
.bd-kanban > *, .bd-col > *, .bd-card, .bd-card > *, .chips2 > * { min-width: 0; }
.bd-col { padding: 8px; }
.bd-card { padding: 7px 8px; overflow: hidden; }
.bd-card .hd { flex-wrap: wrap; gap: 3px 6px; }
.bd-card .hd .res { margin-left: auto; }
.bd-card .sub, .bd-guide, .bd-back, .bd-noslip { overflow-wrap: anywhere; }
.bd-card a, .bd-card button { max-width: 100%; }
.bd-chip { overflow: hidden; }
.bd-chip > * { min-width: 0; max-width: 100%; }
@media (max-width: 1500px) {
  .bd-card .hd strong { font-size: .98rem; } .bd-card .sh { font-size: .7rem; }
  .bd-chip { font-size: .76rem; padding: 3px 6px; gap: 4px; }
}
/* シフトの表：2週間分を横幅に収める */
.sf-grid { width: 100%; table-layout: fixed; }
.sf-grid th.who, .sf-grid td.who { width: 8.5em; white-space: normal; overflow-wrap: anywhere; padding-right: 6px; }
.sf-grid th.note, .sf-grid td.note { width: 9em; min-width: 0; } .sf-grid td.note input { min-width: 0; width: 100%; font-size: .78rem; }
.sf-grid th, .sf-grid td { padding: 3px 2px; overflow: hidden; }
.sf-grid td:not(.note):not(.who) { overflow: visible; }
.sf-grid td input, .sf-grid td.on input { min-width: 0; padding-left: 1px; padding-right: 1px; }
.sf-grid th { white-space: normal; font-size: .78rem; } .sf-grid th .d { white-space: nowrap; }
.sf-grid th .hc b { font-size: 1.05rem; } .sf-grid th .hc i, .sf-grid th .hc em { font-size: .62rem; }
.sf-grid .who .sf-next { white-space: normal; }
@media (max-width: 1500px) { .sf-grid th { font-size: .7rem; } .sf-grid th.who, .sf-grid td.who { width: 7.5em; } .sf-grid th.note, .sf-grid td.note { width: 7em; } }

/* シフト回収のメモ */
button.sf-tag { border: 0; cursor: pointer; line-height: 1.5; } button.sf-tag:hover, .bd-collect:hover { filter: brightness(.92); }
.sf-memo, .bd-memo { display: block; max-width: 100%; border: 0; background: none; padding: 0; margin: 1px 0 0; text-align: left; font-size: .68rem; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-decoration: underline dotted; }
.sf-memo[hidden], .bd-memo[hidden] { display: none; }
.sf-memo:hover, .bd-memo:hover { color: var(--ink); }
button.bd-collect { border: 0; cursor: pointer; line-height: 1.5; }
.bd-memo { flex: 1 1 100%; min-width: 0; margin: 0; }
.memo-dlg { border: 1px solid var(--line); border-radius: 12px; padding: 16px; width: min(440px, 92vw); background: var(--panel); color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.memo-dlg::backdrop { background: rgba(0,0,0,.35); }
.memo-dlg h3 { margin: 0 0 8px; font-size: 1rem; } .memo-dlg textarea { width: 100%; font-size: .9rem; } .memo-dlg .row { display: flex; gap: 8px; margin-top: 10px; }

/* シフト回収が無い人の「備考」ボタン（目立たせない） */
button.sf-tag.memo, button.bd-collect.memo { background: transparent; color: var(--muted); border: 1px dashed var(--line); font-weight: 400; }
button.sf-tag.memo:hover, button.bd-collect.memo:hover { color: var(--ink); border-color: var(--ink); filter: none; }

.memo-tip { position: fixed; z-index: 200; max-width: min(360px, 90vw); padding: 8px 11px; border-radius: 8px; background: var(--ink); color: var(--panel); font-size: .82rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 8px 24px rgba(0,0,0,.28); pointer-events: none; }

.memo-dlg .row .danger { margin-left: auto; color: var(--err); border-color: var(--err); background: transparent; } .memo-dlg .row .danger[hidden] { display: none; }
.prep-row.end input { width: 4.8em; padding: 2px 6px; font-size: .9rem; font-weight: 700; text-align: center; }

/* シフト回収にメモがあるとき：タグの文字をメモの一部に変える */
.sf-grid .who .sf-tag.has { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.bd-collect.has { max-width: 11em; overflow: hidden; text-overflow: ellipsis; text-align: left; }

/* 色分け：シフト回収＝オレンジ／シフト回収の備考あり＝青／通常の備考あり＝グレー */
button.sf-tag.one.has, button.bd-collect.has { background: #2f7fd1; color: #fff; }
button.sf-tag.memo.on, button.bd-collect.memo.on { background: #6b7280; color: #fff; border: 1px solid #6b7280; font-weight: 700; }
button.sf-tag.memo.on:hover, button.bd-collect.memo.on:hover { color: #fff; border-color: #6b7280; filter: brightness(.92); }

/* 状態別：上がり・欠勤は下の段へ。いちばん人数の多い列を2列分の幅にする */
.bd-kanban { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bd-col.before { grid-template-columns: none; }
.bd-col.wide { grid-column: span 2; display: block; columns: 2; column-gap: 8px; }
.bd-col.wide > h2 { column-span: all; margin-bottom: 8px; }
.bd-col.wide > .bd-card { break-inside: avoid; margin-bottom: 8px; }
.bd-col.off { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.bd-col.off > h2 { grid-column: 1 / -1; }
@media (max-width: 1100px) { .bd-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bd-kanban { grid-template-columns: 1fr; } .bd-col.wide { grid-column: auto; columns: 1; } }

/* シフト：店舗のタブと、縦に詰めた表 */
.sf-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.sf-tab { padding: 6px 16px; border-radius: 999px; font-weight: 700; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.sf-tab.on { background: var(--sc); border-color: var(--sc); color: #fff; } .sf-tab.on .bd-code { background: rgba(255,255,255,.25); color: #fff; }
.sf-trends section[hidden], .sf-store[hidden] { display: none; }
.sf-trends { grid-template-columns: 1fr; }
.sf-store > h2 { display: none; }
.sf-grid th, .sf-grid td { padding: 1px 2px; }
.sf-grid td:not(.note) input { padding-top: 2px; padding-bottom: 2px; font-size: .78rem; }
.sf-grid td.who { font-size: .86rem; line-height: 1.25; padding-top: 2px; padding-bottom: 2px; }
.sf-grid th.who, .sf-grid td.who { width: 11em; }
.sf-grid .who .sf-tag { margin-top: 1px; font-size: .62rem; line-height: 1.4; }
.sf-grid .who .sf-tag.memo { display: inline-block; margin: 0 0 0 5px; padding: 0 5px; vertical-align: 1px; }
.sf-grid .who .sf-memo { display: inline-block; max-width: 5.5em; margin: 0 0 0 4px; vertical-align: -2px; font-size: .64rem; }
.sf-grid .who .sf-next { font-size: .66rem; } .sf-grid .who .oth { font-size: .64rem; }
.sf-grid tbody tr:hover td { background: color-mix(in srgb, var(--sc) 6%, var(--panel)); }
@media (max-width: 1500px) { .sf-grid th.who, .sf-grid td.who { width: 9.5em; } }

.sf-grid td:not(.note) input { height: 22px; min-height: 0; padding: 0 1px; line-height: 20px; }
.sf-grid td.who { padding-top: 1px; padding-bottom: 1px; }
.sf-grid .who .oth:empty { display: none; }

/* 店舗タブは表のすぐ上・中央に。シフト回収は名前の横に */
.sf-tabs { justify-content: center; margin: 4px 0 8px; }
.sf-grid .who .sf-tag, .sf-grid .who .sf-tag.has { display: inline-block; width: auto; max-width: 6.5em; margin: 0 0 0 5px; vertical-align: -3px; }
.sf-grid .who .sf-tag.memo { vertical-align: 1px; }
.sf-grid td.who { white-space: nowrap; overflow: hidden; }
.sf-grid .who .sf-next, .sf-grid .who .oth { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* SGK（出勤後掲載） */
.sf-sgk { margin-left: 5px; padding: 0 6px; font-size: .62rem; font-weight: 700; line-height: 1.5; border-radius: 4px; border: 0; background: #7a3fc4; color: #fff; cursor: pointer; vertical-align: 1px; }
.sf-sgk:hover { filter: brightness(.9); }
.sf-grid td.sgk input, .sf-grid td.on.sgk input { background: transparent; border: 1px dashed #7a3fc4; color: #7a3fc4; }
.memo-sgk { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .85rem; } .memo-sgk input { width: auto; }
.prep-row.sgk { background: #f1e8fb; border-color: #7a3fc4; color: #3d1f66; flex-wrap: wrap; }
.prep-row.sgk b { background: #7a3fc4; color: #fff; border-radius: 4px; padding: 0 7px; font-size: .8rem; }
.prep-row.sgk .tx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prep-row.sgk .why2 { font-size: .76rem; margin-right: 4px; }
.prep-row.sgk button.sgk-name { background: #fff; color: #3d1f66; border: 1px solid #7a3fc4; font-weight: 700; padding: 2px 12px; }
.prep-row.sgk button.sgk-name:hover { background: #7a3fc4; color: #fff; }
:root[data-theme=dark] .prep-row.sgk { background: #2c2140; color: #e6d8ff; } :root[data-theme=dark] .prep-row.sgk button.sgk-name { background: transparent; color: #e6d8ff; }

/* 案内の目安：最短の時間と、シフトの種類（受付／UP／完） */
.bd-guide .gk { align-self: center; font-size: .68rem; font-weight: 700; border-radius: 4px; padding: 0 6px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.bd-guide .gk.k1 { background: #dbe9ff; color: #123a73; border-color: transparent; } .bd-guide .gk.k2 { background: #e8dcfb; color: #40207a; border-color: transparent; }

/* 姫予約のみの出勤 */
.sf-grid td.hime input, .sf-grid td.on.hime input { background: #fde0ee; color: #a01558; }
:root[data-theme=dark] .sf-grid td.hime input { background: #4a1f36; color: #ffc9e2; }
.bd-hime { align-self: center; font-size: .64rem; font-weight: 700; border-radius: 4px; padding: 0 6px; background: #d6348a; color: #fff; white-space: nowrap; }

/* 遅刻・早退・当欠・無欠 */
.bd-card .sh .upk { margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: .72rem; font-weight: 800; background: #2f6fd0; color: #fff; }
.bd-card .sh .upk.k2 { background: #7a3fc4; }
.bd-att { align-self: center; font-size: .64rem; font-weight: 700; border-radius: 4px; padding: 0 6px; background: #e8590c; color: #fff; white-space: nowrap; }
.bd-attrow { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.bd-attb { padding: 0 7px; font-size: .64rem; line-height: 1.6; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 400; }
.bd-attb:hover { color: var(--ink); border-color: var(--ink); }
.bd-attb.on { background: #e8590c; border-color: #e8590c; color: #fff; font-weight: 700; }
.sf-grid td[data-st]::before { content: attr(data-st); position: absolute; left: 1px; top: 0; z-index: 2; font-size: .56rem; font-weight: 800; line-height: 1.3; padding: 0 3px; border-radius: 3px; background: #e8590c; color: #fff; pointer-events: none; }
.sf-grid td.abs input, .sf-grid td.on.abs input { background: var(--err-soft); color: var(--err); text-decoration: line-through; }
.sf-grid td.abs[data-st]::before { background: var(--err); }
.att-kpis { display: flex; gap: 26px; flex-wrap: wrap; margin: 4px 0 12px; } .att-kpis .k { display: block; font-size: .72rem; color: var(--muted); } .att-kpis strong { font-size: 1.4rem; }
.att-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .att-cols { grid-template-columns: 1fr; } }
table.att { width: 100%; border-collapse: collapse; font-size: .85rem; } table.att th, table.att td { padding: 3px 8px; border-bottom: 1px solid var(--line); text-align: center; }
table.att th { font-size: .74rem; color: var(--muted); } table.att td.nm { text-align: left; font-weight: 700; }
table.att td.hit { font-weight: 800; color: #e8590c; } table.att td.bad { color: var(--err); }
.att-tag { display: inline-block; margin-right: 3px; padding: 0 7px; border-radius: 999px; font-size: .7rem; font-weight: 700; background: #e8590c; color: #fff; } .att-tag.bad { background: var(--err); }

/* SGK はボードの売上の下・右寄せで小さく */
.prep-row.sgk { width: fit-content; max-width: 100%; margin-left: auto; padding: 4px 10px; gap: 8px; }
.prep-row.sgk .tx { justify-content: flex-end; flex: 0 1 auto; }
.prep-row.sgk .why2 { display: none; }
.sf-stpick button.on { background: #e8590c; border-color: #e8590c; color: #fff; }
.sf-act { gap: 2px; } .sf-act button { padding: 1px 4px; }

/* ドライバーの表 */
table.dv { width: 100%; border-collapse: collapse; } table.dv th { text-align: left; font-size: .76rem; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line); }
table.dv td { padding: 2px 4px; border-bottom: 1px solid var(--line); } table.dv td.c { text-align: center; width: 4em; } table.dv td.c input { width: auto; }
table.dv input[type=text] { width: 100%; padding: 4px 6px; background: transparent; border-color: transparent; font-size: .88rem; } table.dv input[type=text]:hover { border-color: var(--line); } table.dv input[type=text]:focus { background: var(--panel); border-color: var(--accent); }
table.dv td:first-child input { font-weight: 700; } table.dv tr.offrow { opacity: .55; }

table.dv td.n { width: 6.5em; } table.dv td.n input { text-align: right; }

/* ドライバーのマイページ（スマホの幅で使う）と、店側の連絡画面 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.mypage { margin: 0 auto; max-width: 520px; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.my-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; background: var(--accent); color: #fff; } .my-head strong { font-size: 1.1rem; }
.my-prev { margin-left: auto; font-size: .68rem; background: rgba(255,255,255,.22); border-radius: 999px; padding: 1px 9px; }
.my-msg { margin: 0; padding: 8px 16px; background: var(--warn-soft); font-size: .85rem; }
.my-main { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 10px 12px 0; }
.my-tab { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 8px; overflow-y: auto; padding-bottom: 10px; } .my-tab[hidden] { display: none; }
.my-chat { flex: 1; min-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.dm { display: flex; flex-direction: column; max-width: 82%; } .dm.me { align-self: flex-end; align-items: flex-end; } .dm.you { align-self: flex-start; }
.dm .bub { padding: 8px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); overflow-wrap: anywhere; white-space: pre-wrap; }
.dm.me .bub { background: var(--accent); border-color: var(--accent); color: #fff; } .dm.me .bub a { color: #fff; }
.dm .bub img { display: block; max-width: 220px; max-height: 260px; border-radius: 8px; } .dm .tm { font-size: .64rem; color: var(--muted); margin: 2px 4px 0; }
.my-canned { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; flex: none; } .my-canned .cn { flex: none; padding: 5px 12px; border-radius: 999px; font-size: .8rem; }
.my-send { display: flex; gap: 6px; align-items: center; flex: none; } .my-send input[type=text] { flex: 1; min-width: 0; }
.my-send > button:first-child, .my-img { flex: none; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; font-size: 1.1rem; }
.my-nav { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.my-nav button { position: relative; border: 0; border-radius: 0; background: none; padding: 12px 4px; font-weight: 700; color: var(--muted); } .my-nav button.on { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.my-nav i, .dk-who .un { font-style: normal; display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--err); color: #fff; font-size: .68rem; line-height: 18px; text-align: center; }
.my-task { display: grid; gap: 4px; padding: 10px 12px; border-left: 5px solid var(--accent); } .my-task.done { opacity: .55; border-left-color: var(--line); } .my-task.go { border-left-color: var(--ok); }
.my-task .hd { display: flex; align-items: baseline; gap: 8px; } .my-task .kd { background: var(--ink); color: var(--panel); border-radius: 4px; padding: 0 7px; font-size: .78rem; font-weight: 700; } .my-task .hd strong { font-size: 1.1rem; }
.my-task .stt { margin-left: auto; font-size: .76rem; color: var(--muted); } .my-task.go .stt { color: var(--ok); font-weight: 700; } .my-task .ln { overflow-wrap: anywhere; } .my-task .pl { font-weight: 700; }
.my-task .bt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .my-task .bt button { padding: 12px; font-size: 1rem; }
.my-wish { display: grid; gap: 6px; } .my-wish h2 { margin: 0 0 2px; font-size: 1rem; } .my-wish .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .my-wish label { font-size: .78rem; color: var(--muted); margin: 0; }
.my-shift, .dk-shift { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: 6px; }
.my-shift .stt, .dk-shift .stt { font-size: .72rem; border-radius: 999px; padding: 0 8px; background: var(--warn-soft); } .my-shift.fixed .stt, .dk-shift.fixed .stt { background: var(--ok); color: #fff; font-weight: 700; }
.my-shift .mm, .dk-shift .mm { flex-basis: 100%; } .my-shift button { margin-left: auto; }
.my-note { display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: 6px; } .my-note.new { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.dk { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; } @media (max-width: 900px) { .dk { grid-template-columns: 1fr; } }
.dk-list { padding: 6px; display: grid; gap: 2px; max-height: 78vh; overflow-y: auto; }
.dk-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; } .dk-who:hover { background: var(--bg); } .dk-who.on { background: var(--accent-soft, var(--bg)); box-shadow: inset 3px 0 0 var(--accent); }
.dk-who .tg { font-size: .66rem; border-radius: 4px; padding: 0 5px; background: var(--bg); border: 1px solid var(--line); } .dk-who .tg.go { background: var(--ok); color: #fff; border-color: transparent; }
.dk-who .ws { font-style: normal; font-size: .66rem; border-radius: 999px; padding: 0 6px; background: #f0a000; color: #fff; } .dk-who .un { margin-left: auto; }
.dk-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; } @media (max-width: 1300px) { .dk-main { grid-template-columns: 1fr; } }
.dk-chatbox { display: flex; flex-direction: column; gap: 8px; } .dk-chatbox .my-chat { height: 52vh; flex: none; } .dk-chatbox h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dk-side { display: grid; gap: 14px; } .dk-task { display: grid; grid-template-columns: 8em 7em 1fr; gap: 6px; margin-bottom: 10px; } .dk-task #t-place, .dk-task #t-memo { grid-column: 1 / -1; } .dk-task button { grid-column: 1 / -1; }
.dk-side .my-task { padding: 6px 10px; border: 1px solid var(--line); border-left-width: 5px; border-radius: 8px; margin-bottom: 6px; } .dk-shift input { width: 4.6em; text-align: center; padding: 3px 4px; }
table.dv td.nmc { display: flex; align-items: center; gap: 6px; } table.dv td.nmc a { white-space: nowrap; }
.dk-task { grid-template-columns: 1fr 1fr; } .dk-task #t-cast { grid-column: 1 / -1; }

/* 指示：女性ごとの 乗車完了・降車完了 */
.my-task .pax { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px dashed var(--line); }
.my-task .pax .pi { flex: 1; min-width: 0; display: grid; gap: 1px; } .my-task .pax .pi strong { font-size: 1.02rem; } .my-task .pax .rt { font-size: .86rem; overflow-wrap: anywhere; }
.my-task .pax button.primary { padding: 12px 16px; font-size: .98rem; min-width: 7.5em; } .my-task .pax button.off { background: var(--ok); border-color: var(--ok); }
.my-task .pax.on { background: color-mix(in srgb, var(--ok) 8%, transparent); } .my-task .pax.off { opacity: .6; } .my-task .pax .dn { font-size: .8rem; font-weight: 700; color: var(--muted); }
.dk-side .my-task .pax button.primary { padding: 5px 10px; font-size: .8rem; min-width: 0; }
.dk-task fieldset.pax { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px 8px; margin: 0; } .dk-task fieldset.pax legend { font-size: .72rem; color: var(--muted); padding: 0 4px; }
.dk-task #t-cast { grid-column: auto; }

.dk-task .wide { grid-column: 1 / -1; }

/* ===== ドライバー連絡：LINE のPC版に近い見た目（左に一覧・右にトーク）。小さい縦長の窓では、一覧かトークのどちらか1つを出す ===== */
body.barewin { margin: 0; background: var(--bg); }
.tkapp { --tk-green: #06c755; --tk-me: #8de055; --tk-bg: #8caad6; display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100dvh - 48px); min-height: 420px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.tkapp.win { height: 100dvh; border: 0; border-radius: 0; }
.tk-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.tk-lhead { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .tk-lhead strong { flex: 1; font-size: 1.02rem; }
.tk-rows { flex: 1; overflow-y: auto; }
.tk-who { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "av nm at" "av pv un"; column-gap: 10px; align-items: center; padding: 9px 12px; color: var(--ink); text-decoration: none; }
.tk-who:hover { background: var(--bg); } .tk-who.on { background: color-mix(in srgb, var(--tk-green) 12%, var(--panel)); }
.tk-who .av { grid-area: av; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #b7c3d4; color: #fff; font-weight: 800; font-size: 1.05rem; }
.tk-who.in .av { background: var(--tk-green); }
.tk-who .nm { grid-area: nm; display: flex; align-items: center; gap: 5px; min-width: 0; } .tk-who .nm strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-who .pv { grid-area: pv; font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-who .at { grid-area: at; font-size: .68rem; color: var(--muted); justify-self: end; }
.tk-who .un { grid-area: un; justify-self: end; font-style: normal; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--tk-green); color: #fff; font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center; }
.tk-who .tg { flex: none; font-size: .62rem; border-radius: 4px; padding: 0 5px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } .tk-who .tg.in { background: var(--tk-green); border-color: transparent; color: #fff; font-weight: 700; } .tk-who .tg.go { background: #f0a000; border-color: transparent; color: #fff; }
.tk-who .ws { flex: none; font-style: normal; font-size: .62rem; border-radius: 999px; padding: 0 6px; background: #e8590c; color: #fff; }
.tk-who [hidden] { display: none; }
.tk-tools { padding: 8px 12px; border-top: 1px solid var(--line); } .tk-tools form { display: flex; gap: 8px; align-items: center; }
.tk-room { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--tk-bg); } .tk-room.empty { align-items: center; justify-content: center; background: var(--bg); }
.tk-rhead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); } .tk-rhead .ti { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; } .tk-rhead .ti strong { font-size: 1.05rem; } .tk-rhead .ti .small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-back { display: none; font-size: 1.6rem; line-height: 1; text-decoration: none; color: var(--ink); padding: 0 6px; }
.tk-tabs { display: flex; background: var(--panel); border-bottom: 1px solid var(--line); } .tk-tabs button { flex: 1; border: 0; border-radius: 0; background: none; padding: 8px 4px; font-size: .86rem; font-weight: 700; color: var(--muted); } .tk-tabs button.on { color: var(--tk-green); box-shadow: inset 0 -3px 0 var(--tk-green); }
.tk-tabs i { font-style: normal; margin-left: 5px; padding: 0 6px; border-radius: 999px; background: #e8590c; color: #fff; font-size: .66rem; } .tk-tabs i[hidden] { display: none; }
.tk-err { margin: 0; padding: 6px 14px; background: var(--err-soft); color: var(--err); font-size: .82rem; }
.tk-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; } .tk-pane[hidden] { display: none; }
#pane-task, #pane-shift { background: var(--bg); overflow-y: auto; padding: 12px; gap: 10px; display: block; } #pane-task[hidden], #pane-shift[hidden] { display: none; }
.tk-chat { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 7px; background: var(--tk-bg); }
.tk-day { align-self: center; font-size: .68rem; color: #fff; background: rgba(0,0,0,.22); border-radius: 999px; padding: 1px 12px; margin: 4px 0; }
.tk-empty { align-self: center; color: #fff; font-size: .82rem; margin: 20px 0; }
.tk-row { display: flex; align-items: flex-end; gap: 5px; max-width: 86%; } .tk-row.me { align-self: flex-end; } .tk-row.you { align-self: flex-start; }
.tk-bub { padding: 7px 12px; border-radius: 18px; background: #fff; color: #111; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.tk-row.me .tk-bub { background: var(--tk-me); } .tk-bub a { color: #0b57d0; }
.tk-bub.img { padding: 3px; border-radius: 12px; background: #fff; } .tk-bub.img img { display: block; max-width: 220px; max-height: 260px; border-radius: 10px; }
.tk-bub.task { display: grid; gap: 4px; border-radius: 12px; background: #fff; border-left: 5px solid #f0a000; } .tk-row.me .tk-bub.task { background: #fff; }
.tk-bub.task .tt { font-size: .68rem; font-weight: 800; color: #b06a00; } .tk-open { justify-self: start; padding: 2px 12px; font-size: .78rem; border-radius: 999px; border: 1px solid #f0a000; background: #fff7e6; color: #8a5200; }
.tk-meta { display: flex; flex-direction: column; font-size: .62rem; line-height: 1.25; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.35); white-space: nowrap; flex: none; } .tk-row.me .tk-meta { align-items: flex-end; }
.tk-send { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; background: var(--panel); border-top: 1px solid var(--line); flex: none; }
.tk-send textarea { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; padding: 8px 4px; font-size: .92rem; line-height: 1.4; max-height: 120px; box-shadow: none; } .tk-send textarea:focus { outline: none; box-shadow: none; }
.tk-send .ic, .my-send .my-img, .my-send > button:first-child { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.15rem; padding: 0; } .tk-send .ic:hover { background: var(--bg); }
.tk-send .send, .my-send .send { flex: none; border: 0; border-radius: 999px; padding: 8px 16px; background: var(--tk-green); color: #fff; font-weight: 700; }
.my-task .nav { display: inline-block; width: max-content; margin-top: 3px; padding: 2px 10px; border-radius: 999px; border: 1px solid #2f7fd1; color: #2f7fd1; background: transparent; font-size: .78rem; font-weight: 700; text-decoration: none; }
.my-task .tft { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--line); padding-top: 4px; }
.dk-office { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; } .dk-office .row { gap: 6px; } .dk-office input { flex: 1; }
#pane-task .dk-task { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
#pane-task .my-task { background: var(--panel); margin-bottom: 8px; } #pane-task .my-task .pax button.primary { padding: 6px 12px; font-size: .84rem; min-width: 0; }
/* 小さい縦長の窓：一覧かトークのどちらかだけを、窓いっぱいに出す */
@media (max-width: 760px) {
  .tkapp { grid-template-columns: 1fr; border: 0; border-radius: 0; }
  .tkapp.has-cur .tk-list { display: none; } .tkapp:not(.has-cur) .tk-room { display: none; }
  .tk-back { display: block; } .tk-row { max-width: 92%; }
  .dk-task fieldset.pax { grid-template-columns: 1fr; }
}
@media (max-width: 760px) { .tkapp:not(.win) { height: calc(100dvh - 120px); } }
/* マイページのトークも同じ見た目に */
body.mypage { --tk-green: #06c755; --tk-me: #8de055; --tk-bg: #8caad6; } body.mypage .my-head { background: #2b3a55; }
body.mypage #tab-chat { margin: -10px -12px 0; padding-bottom: 0; gap: 0; } body.mypage #tab-chat .tk-chat { min-height: 200px; }
body.mypage .my-canned { background: var(--tk-bg); padding: 4px 10px 8px; } body.mypage .my-canned .cn { background: #fff; border: 0; color: #111; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
body.mypage .my-send { padding: 8px 10px; background: var(--panel); border-top: 1px solid var(--line); } body.mypage .my-send input[type=text] { border: 0; background: transparent; box-shadow: none; }
body.mypage .my-nav button.on { color: var(--tk-green); box-shadow: inset 0 3px 0 var(--tk-green); }

.tk-canned { display: flex; gap: 6px; overflow-x: auto; padding: 4px 10px 8px; background: var(--tk-bg); flex: none; }
.tk-canned .cn { flex: none; padding: 4px 12px; border-radius: 999px; font-size: .8rem; background: #fff; border: 0; color: #111; box-shadow: 0 1px 1px rgba(0,0,0,.1); }

.tk-who .at { display: flex; align-items: center; gap: 4px; }
.tk-who .pw { padding: 0 5px; font-size: .8rem; line-height: 1.5; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); opacity: 0; } .tk-who:hover .pw, .tk-who .pw:focus-visible { opacity: 1; } .tk-who .pw:hover { color: var(--ink); border-color: var(--ink); }

.tk-who .tg.ride { background: #2f7fd1; border-color: transparent; color: #fff; font-weight: 700; } .my-task .nohw { font-size: .68rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--muted); }
.my-task .tft { flex-wrap: wrap; }

/* 一覧：タグは名前の下の行に（文字が重ならないように） */
.tk-who { grid-template-areas: "av nm at" "av tgs un" "av pv pv"; row-gap: 1px; align-items: center; }
.tk-who .nm { min-width: 0; } .tk-who .tgs { grid-area: tgs; display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; } .tk-who .tgs:empty { display: none; }
.tk-who .at { white-space: nowrap; } .tk-who .pv { min-width: 0; }
.tk-rhead { flex-wrap: wrap; row-gap: 2px; } .tk-rhead .ti { flex: 1 1 8em; overflow: hidden; } .tk-rhead > .small, .tk-rhead > a { white-space: nowrap; flex: none; }
.tk-row { min-width: 0; } .tk-bub { min-width: 0; }
.tk-unread { align-self: stretch; text-align: center; font-size: .68rem; color: #fff; background: rgba(0,0,0,.28); padding: 2px 0; margin: 4px -12px; }

.my-task .hw { font-size: .66rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--muted); white-space: nowrap; }
.my-task .hw.on { background: #d6453d; border-color: #d6453d; color: #fff; font-weight: 800; }

/* 名前の横の車番と色 */
.tkapp .car { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.tkapp .car i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); flex: none; } .tkapp .car .cl { font-weight: 400; font-size: .7rem; color: var(--muted); }
.tk-who .pv:empty { display: none; }

/* 勤務と給与 */
.my-nav { grid-template-columns: repeat(5, 1fr); } .my-nav button { font-size: .86rem; padding: 12px 2px; }
.my-meter h2, .my-sum h2 { margin: 0 0 6px; font-size: 1rem; } .my-meter .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .my-meter label { font-size: .76rem; color: var(--muted); margin: 0; } .my-meter .row { gap: 6px; flex-wrap: nowrap; } .my-meter input { min-width: 0; flex: 1; font-size: 1.05rem; }
.my-sum { display: grid; gap: 3px; margin-top: 8px; } .my-sum .big { font-size: 1.7rem; }
.my-work, .dk-work { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-top: 6px; position: relative; }
.my-work .stt, .dk-work .stt { position: absolute; right: 10px; top: 8px; font-size: .7rem; border-radius: 999px; padding: 0 8px; background: var(--warn-soft); } .my-work.ok .stt, .dk-work.ok .stt { background: var(--ok); color: #fff; font-weight: 700; position: static; }
.my-work .tot { font-weight: 700; }
#pane-work { background: var(--bg); overflow-y: auto; padding: 12px; display: block; } #pane-work[hidden] { display: none; }
.dk-wsum { font-weight: 700; padding: 6px 2px; }
.dk-work { grid-template-columns: 1fr; } .dk-work .g { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .dk-work input { width: 4.6em; text-align: center; padding: 3px 4px; } .dk-work input.mt { width: 6.5em; }
.dk-work .pay { font-weight: 700; } .dk-workadd { margin-top: 12px; } .dk-workadd .row { gap: 6px; } .dk-workadd input { width: auto; }

.dk-work .req { font-size: .78rem; background: var(--warn-soft); border-radius: 6px; padding: 2px 8px; }

/* ボード：配車状況（売上の下） */
.bd-disp { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 8px 10px; margin: 0 0 12px; } .bd-disp[hidden] { display: none; }
.dp-hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; } .dp-hd a { margin-left: auto; }
.dp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.dp-card { display: grid; gap: 2px; text-align: left; padding: 6px 9px; border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 9px; background: var(--bg); font-weight: 400; min-width: 0; }
.dp-card:hover { border-color: var(--ink); } .dp-card.ride { border-left-color: #2f7fd1; background: color-mix(in srgb, #2f7fd1 8%, var(--panel)); } .dp-card.go { border-left-color: #f0a000; } .dp-card.free { border-left-color: #06c755; }
.dp-top { display: flex; align-items: center; gap: 6px; min-width: 0; } .dp-top strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-top .car { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; background: var(--panel); white-space: nowrap; } .dp-top .car i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); }
.dp-top .st { margin-left: auto; flex: none; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 0 8px; background: #06c755; color: #fff; } .dp-card.ride .st { background: #2f7fd1; } .dp-card.go .st { background: #f0a000; }
.dp-top .un { flex: none; font-style: normal; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--err); color: #fff; font-size: .66rem; line-height: 18px; text-align: center; }
.dp-task { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: .78rem; overflow-wrap: anywhere; } .dp-task.none { color: var(--muted); }
.dp-task .kd { background: var(--ink); color: var(--panel); border-radius: 4px; padding: 0 6px; font-size: .7rem; } .dp-task .hw { background: #d6453d; color: #fff; border-radius: 4px; padding: 0 5px; font-size: .64rem; font-weight: 700; }
.dp-task .px.on { font-weight: 700; color: #2f7fd1; } .dp-task .px.off { color: var(--muted); text-decoration: line-through; }

/* ドライバー設定の表：項目ごとに仕切り線 */
table.dv { border: 1px solid var(--line); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
table.dv th { background: var(--bg); font-weight: 700; color: var(--ink); padding: 7px 8px; border-bottom: 2px solid var(--line); }
table.dv th + th, table.dv td + td { border-left: 1px solid var(--line); }
table.dv td { padding: 3px 6px; } table.dv tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg) 55%, var(--panel)); } table.dv tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
table.dv tbody tr:last-child td { border-bottom: 0; }

table.dv tr.dirty td { background: var(--warn-soft) !important; } table.dv td.act { white-space: nowrap; width: 1%; } table.dv td.act .sv:disabled { opacity: .35; }
table.dv .pend { display: block; font-size: .7rem; font-weight: 700; color: #e8590c; text-align: right; } table.dv .pendby { margin: 0 6px; color: #e8590c; }

/* カメラ */
.cam-ov { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.86); display: grid; place-items: center; padding: 12px; }
.cam-box { display: grid; gap: 10px; width: min(560px, 100%); } .cam-box video, .cam-box canvas { width: 100%; max-height: 72dvh; object-fit: contain; background: #000; border-radius: 12px; } .cam-box [hidden] { display: none; }
.cam-bar { display: flex; justify-content: center; gap: 12px; } .cam-bar button { padding: 12px 22px; font-size: 1rem; border-radius: 999px; border: 0; background: #fff; color: #111; font-weight: 700; }
.cam-bar .cam-shot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.35); min-width: 7em; } .cam-bar .cam-send { background: #06c755; color: #fff; min-width: 7em; }
.my-send > button:first-child, .my-send #my-cam, .my-send .my-img { flex: none; width: 36px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.12rem; padding: 0; }
.tk-send button.ic { border: 0; }

/* 端末の承認 */
.devalert { display: block; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--err); color: #fff; font-weight: 700; text-decoration: none; } .devalert:hover { filter: brightness(.93); }
table.dev td { padding: 6px 8px; vertical-align: top; } table.dev input[type=text] { border-color: var(--line); background: var(--panel); min-width: 9em; } table.dev tr.pending td { background: var(--warn-soft) !important; }
.dst { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 1px 9px; white-space: nowrap; } .dst.pending { background: #e8590c; color: #fff; } .dst.approved { background: var(--ok); color: #fff; } .dst.blocked { background: var(--ink); color: var(--panel); }
/* 「保存」がまだ押せない時（何も直していない時）は、待ち中の印（ぐるぐる）ではなく、ふつうの矢印にする */
table.dv td.act .sv:disabled, .my-meter button:disabled, .my-task .pax button:disabled { cursor: default; }

.bindf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 30em; } .bindf select { width: auto; padding: 3px 6px; } .bindf .b-staff { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; } .bindf [hidden] { display: none; }
table.pt td { padding: 6px 8px; vertical-align: middle; } table.pt td.url code { font-size: .74rem; overflow-wrap: anywhere; margin-right: 6px; } table.pt .pf input { border-color: var(--line); background: var(--panel); width: 9.5em; }
body.castpage .my-head { background: #1c1c1e; } .my-prev { text-decoration: none; color: #fff; }
.my-shift.now { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }

body.castpage .my-head { background: #ff6f9c; }

/* ---- スマホの幅：管理画面の整え（表は横にすべらせる・見出しは折らない・ボタンの文字は縦に割らない） */
@media (max-width: 720px) {
  main.wrap { padding-left: 12px; padding-right: 12px; }
  main h1 { font-size: 1.3rem; } main .lead { font-size: .86rem; }
  main .card { padding: 14px 12px; }
  main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main table th { white-space: nowrap; }
  main table td { min-width: 4.2em; } main table td:has(> input[type=checkbox]:only-child), main table td:empty { min-width: 0; }
  main table td input:not([type=checkbox]):not([type=radio]), main table td select { min-width: 6.5em; }
  main table td a, main table td button, main table .num { white-space: nowrap; }
  button, .btn, a.button { white-space: nowrap; }
  main form .row, main .toolbar { flex-wrap: wrap; }
  input[type=date], input[type=search], input[type=text], select { max-width: 100%; }
  .side .brand { flex: none; }
  main table td:last-child:not(:has(button, a, input, select)) { min-width: 9em; }
  .sf-tab { white-space: normal; }
  .sw-foot { flex-wrap: wrap; gap: 8px; } .sw-foot .linkish { flex: 1 1 100%; order: 3; text-align: center; } .sw-foot button:not(.linkish) { flex: 1; }
}

/* 右下の枠（どのページでも出したままにする編集画面） */
.kdock { position: fixed; right: 12px; bottom: 12px; z-index: 70; width: min(440px, calc(100vw - 24px)); height: min(680px, calc(100dvh - 90px)); background: var(--panel); border: 2px solid var(--accent); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; }
.kdock .hd { display: flex; gap: 6px; align-items: center; padding: 6px 10px; background: var(--accent); color: #fff; flex: none; } .kdock .hd strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kdock iframe { flex: 1; border: 0; width: 100%; background: var(--bg); } .kdock.min { height: auto; width: min(340px, calc(100vw - 24px)); } .kdock.min iframe { display: none; } .kdock.min .hd strong { cursor: pointer; }
.rv-tag { display: inline-block; font-size: .8rem; font-weight: 700; border-radius: 999px; padding: 1px 9px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.rv-tag.on { background: var(--err); color: #fff; border-color: var(--err); } .rv-tag.fut { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 注意のお客様：店出禁＝強い赤／要注意＝オレンジ／女の子NG＝黄色 */
.ngm { display: inline-block; border-radius: 5px; padding: 0 7px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.ngm.ban { background: #d00000; color: #fff; } .ngm.care { background: #f76707; color: #fff; } .ngm.girl { background: #ffd43b; color: #222; }
.lv-ban { background: rgba(208,0,0,.4) !important; box-shadow: inset 6px 0 0 #d00000; } .lv-care { background: rgba(247,103,7,.2) !important; box-shadow: inset 6px 0 0 #f76707; } .lv-girl { background: rgba(255,212,59,.26) !important; box-shadow: inset 6px 0 0 #ffd43b; }
.cti-pop.lv-ban { border: 4px solid #d00000; } .cti-pop.lv-care { border: 4px solid #f76707; } .cti-pop.lv-girl { border: 4px solid #ffd43b; }
.ngbar { border-radius: 8px; padding: 6px 10px; font-weight: 700; margin: 0 0 6px; } .ngbar.ban { background: #d00000; color: #fff; } .ngbar.care { background: #f76707; color: #fff; } .ngbar.girl { background: #ffd43b; color: #222; }
.ng-opts label span { font-weight: 700; padding: 4px 14px; } .ng-opts input:checked + span.ban { background: #d00000; border-color: #d00000; color: #fff; } .ng-opts input:checked + span.care { background: #f76707; border-color: #f76707; color: #fff; }
/* 説明文：ふだんは隠す（個人設定の「説明文を表示する」で出せる。文そのものは残してある） */
html[data-help="0"] .help { display: none !important; }

/* 左のメニュー：種類ごとのまとまり（見出しを押すと、開け閉めできる） */
.side .mg { display: grid; gap: 2px; }
.side .mg + .mg { margin-top: 6px; }
.side .mg-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; border: 0; background: none; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-align: left; cursor: pointer; border-radius: 6px; }
.side .mg-head:hover { background: var(--bg); color: var(--ink); }
.side .mg-head::before { content: "▾"; font-size: .9em; width: 1em; }
.side .mg.shut .mg-head::before { content: "▸"; }
.side .mg-n { display: none; margin-left: auto; font-weight: 400; }
.side .mg.shut .mg-n { display: inline; }
.side .mg-items { display: grid; gap: 2px; }
.side .mg-sub { font-size: .7rem; color: var(--muted); font-weight: 700; letter-spacing: .04em; padding: 8px 10px 2px; border-top: 1px dashed var(--line); margin-top: 4px; }
.side .mg-sub:first-child { border-top: 0; margin-top: 0; padding-top: 2px; }
.side .mg.shut .mg-items { display: none; }
.side .mg.cur .mg-head { color: var(--ink); }
@media (max-width: 820px) {      /* せまい画面：メニューは横1列。見出しを押すと、その中身がとなりに開く */
  .side .mg { display: flex; align-items: center; gap: 2px; flex: none; }
  .side .mg + .mg { margin-top: 0; }
  .side .mg-head { width: auto; white-space: nowrap; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; }
  .side .mg:not(.shut) .mg-head { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
  .side .mg-items { display: flex; gap: 2px; }
  .side .mg.shut .mg-items { display: none; }
  .side .mg-n { display: none !important; }
}

/* メニューの未読の数 */
.side nav a { position: relative; }
.side .mn-un { display: inline-block; min-width: 1.5em; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #e03131; color: #fff; font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.5; vertical-align: middle; }
.side .mn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e03131; margin-left: 6px; }
.side .mn-un[hidden], .side .mn-dot[hidden] { display: none; }

/* 媒体ごとの色（チャット・口コミ・ネット予約・ボードで共通） */
.k-heaven { --mc: #e8590c; } .k-girlsheaven { --mc: #d6336c; } .k-jobheaven { --mc: #5f3dc4; } .k-fj { --mc: #c92a2a; } .k-dj { --mc: #1864ab; } .k-jps { --mc: #7048e8; } .k-dtown { --mc: #0b7285; } .k-kuchikomi { --mc: #2b8a3e; } .k-vanilla { --mc: #b07d00; } .k-mensvanilla { --mc: #495057; } .k-cocoa { --mc: #8d5524; } .k-hajifu { --mc: #ae3ec9; } .k-orenokaze { --mc: #087f5b; } .k-fenix { --mc: #364fc7; } .k-relaxi { --mc: #1098ad; } .k-line { --mc: #06a94d; } .k-ekichika { --mc: #d9480f; } .k-hokkorin { --mc: #c2255c; } .k-manzoku { --mc: #5c940d; } .k-foodle { --mc: #7b5e00; } .k-mesrank { --mc: #3b5bdb; }
.msrc { display: inline-block; flex: none; font-size: .68rem; font-weight: 700; line-height: 1.5; border-radius: 4px; padding: 0 6px; color: #fff; background: var(--mc, #5c6ac4); white-space: nowrap; }
.mrow { border-left: 4px solid var(--mc, transparent); }
.tk-who.mrow .av { background: var(--mc, #b7c3d4); }

/* 入・切のスイッチ（どの画面でも同じ見た目） */
input[type=checkbox].sw { appearance: none; -webkit-appearance: none; width: 52px; height: 28px; border-radius: 999px; background: #8b8f99; position: relative; cursor: pointer; flex: none; margin: 0; border: 0; transition: background .15s; vertical-align: middle; }
input[type=checkbox].sw::before { content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 20px; border-radius: 999px; background: #eef1f6; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
input[type=checkbox].sw:checked { background: #3b82f6; }
input[type=checkbox].sw:checked::before { left: 22px; background: #dbe6ff; }
input[type=checkbox].sw:disabled { opacity: .5; cursor: not-allowed; }
input[type=checkbox].sw:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* ---- スマホの幅で、画面が横にはみ出さないように（2026-10-10 全画面チェック） */
@media (max-width: 820px) {
  .sf-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bd-strip > *, .bd-mini, .bd-total, .bd-mini *, .bd-total * { min-width: 0; max-width: 100%; }
  .bd-kpis { flex-wrap: wrap; }
  main .btn, main button { max-width: 100%; white-space: normal; }
  main .row > * { min-width: 0; overflow-wrap: anywhere; }
  .hp-out, .hp-out * { overflow-wrap: anywhere; }
}
@media (max-width: 640px) {
  .sf-trends > section { min-width: 0; }
  .sf-kpis { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .sf-bars .col .v, .sf-bars .col .m { font-size: .6rem; }
}
.ngm { max-width: 100%; }
@media (max-width: 640px) { .ngm { white-space: normal; overflow-wrap: anywhere; } }

/* ---- 着信の一覧：1件1行（横にずれない。長い名前は「…」） */
.cl-list { display: grid; }
.cl-day { background: var(--bg); font-weight: 700; font-size: .82rem; padding: 5px 8px; border-radius: 6px; margin: 8px 0 2px; }
.cl-day:first-child { margin-top: 0; }
.cl-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; min-width: 0; font-size: .9rem; }
.cl-row .cl-at { flex: none; font-size: .8rem; color: var(--muted); width: 6.6em; }
.cl-row .bd-code { flex: none; }
.cl-row .cl-ph { flex: none; }
.cl-row .cl-who { flex: 1 1 auto; min-width: 3em; overflow: hidden; text-overflow: ellipsis; }
.cl-row .cl-who .ngm { white-space: nowrap; }
.cl-row .cl-act { flex: none; display: flex; gap: 4px; align-items: center; }
.cl-row .cl-act form { margin: 0; }
.cl-row .cl-act button { padding: 3px 10px; }
.cl-row.open { background: color-mix(in srgb, var(--err) 6%, transparent); }
.cl-row.lv-ban { box-shadow: inset 4px 0 0 #d00000; } .cl-row.lv-care { box-shadow: inset 4px 0 0 #f76707; } .cl-row.lv-girl { box-shadow: inset 4px 0 0 #ffd43b; }
@media (max-width: 480px) { .cl-row { gap: 6px; font-size: .84rem; } .cl-row .cl-at { width: auto; } }
.cl-row .bd-code { background: var(--sc); color: #fff; min-width: 3.2em; text-align: center; }
/* ---- シフトの履歴 */
.sf-hhead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0 0 6px; }
.sf-hnav { margin-left: auto; display: flex; gap: 4px; }
.sf-results li.op { border-left-color: var(--accent); background: var(--bg); } .sf-results .op .mark { color: var(--accent); }
#sf-hpast { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
/* ---- シフトの入力の窓（出勤・退勤を分けて選ぶ） */
.sf-edit { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); padding: 10px 12px; display: grid; gap: 8px; min-width: 260px; }
.sf-edit .hd { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sf-edit .tm { display: flex; align-items: flex-end; gap: 6px; }
.sf-edit .tm label { display: grid; gap: 2px; margin: 0; font-size: .75rem; font-weight: 600; color: var(--muted); }
.sf-edit .tm select { width: 6.4em; padding: 6px 8px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.sf-edit .tm .to { padding-bottom: 8px; color: var(--muted); }
.sf-edit .kd { display: flex; gap: 4px; }
.sf-edit .kd button { min-width: 3.2em; font-weight: 700; }
.sf-edit .kd button.on { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.sf-edit .row { gap: 6px; }
.sf-results .bd-code { flex: none; background: var(--sc); color: #fff; }
.sf-pend { border: 1px solid var(--err); border-radius: 10px; padding: 6px 8px; margin-bottom: 10px; display: grid; gap: 6px; } .sf-pend > strong { color: var(--err); }
/* ---- ドライバー連絡：今日の出勤／休み のタブ */
.tk-ltabs { display: flex; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.tk-ltabs button { flex: 1; padding: 6px 8px; border-radius: 999px; font-size: .85rem; }
.tk-ltabs button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tk-ltabs button b { margin-left: 4px; }
.tg.tk-time { font-weight: 700; font-size: .8rem; }
.tk-rhead .ti .tg { margin-left: 6px; font-size: .78rem; border-radius: 4px; padding: 1px 7px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } .tk-rhead .ti .tg.in { background: var(--tk-green); border-color: transparent; color: #fff; font-weight: 700; }
/* ---- ドライバーシフトの表 */
.ds-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ds-head h1 { margin: 0; }
.ds-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; color: var(--muted); }
.ds-legend .ds-c { display: inline-block; min-width: 2.6em; text-align: center; border-radius: 6px; padding: 1px 6px; font-weight: 700; margin-left: 8px; }
.ds-c.wish { border: 1px dashed #4f8fd6; color: #2f6fb6; background: color-mix(in srgb, #4f8fd6 10%, var(--panel)); }
.ds-c.fixed { background: var(--ok); color: #fff; }
.ds-c.off { background: var(--line); color: var(--muted); }
.ds-scroll { max-height: calc(100vh - 220px); overflow: auto; }
.ds-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.ds-grid th, .ds-grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 3px; text-align: center; vertical-align: middle; }
.ds-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); font-size: .8rem; white-space: nowrap; padding: 6px 4px; }
.ds-grid thead th .w { color: var(--muted); font-weight: 400; }
.ds-grid thead th.sat .d { color: #2a6fc9; } .ds-grid thead th.sun .d { color: #d6453d; }
.ds-grid th.today, .ds-grid td.today { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.ds-grid .who { position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: left; white-space: nowrap; padding: 6px 10px; min-width: 8.5em; display: table-cell; }
.ds-grid thead .who { z-index: 3; }
.ds-grid .who strong { display: block; } .ds-grid .who .small { display: block; }
.ds-nw { display: inline-block; font-size: .66rem; font-weight: 700; color: #fff; background: #4f8fd6; border-radius: 999px; padding: 0 6px; margin-top: 2px; }
.ds-cell { width: 100%; min-width: 6.4em; min-height: 40px; display: grid; place-items: center; gap: 0; padding: 3px 4px; border-radius: 8px; border: 1px solid transparent; background: none; font-weight: 400; font-size: .82rem; line-height: 1.25; color: var(--muted); font-variant-numeric: tabular-nums; }
.ds-cell:hover, .ds-cell:focus-visible { border-color: var(--accent); }
.ds-cell.fixed { background: var(--ok); color: #fff; } .ds-cell.fixed b { font-size: .86rem; }
.ds-cell.wish { border: 1px dashed #4f8fd6; color: #2f6fb6; background: color-mix(in srgb, #4f8fd6 10%, var(--panel)); }
.ds-cell.wish .lb { font-size: .64rem; font-weight: 700; }
.ds-cell.off { background: var(--line); color: var(--muted); } .ds-cell.off i { font-style: normal; font-size: .62rem; }
.ds-grid tfoot td, .ds-grid tfoot th { position: sticky; bottom: 0; background: var(--bg); font-size: .78rem; }
.sf-edit .ds-info { color: var(--muted); }
.my-shift.off .stt, .dk-shift.off .stt { background: var(--line); color: var(--muted); } .my-shift.off .num, .dk-shift.off .num { color: var(--muted); }

/* ---- ドライバーのマイページ：シフトのカレンダー */
.dm-calbox { display: grid; gap: 8px; }
.dm-calh { display: flex; align-items: center; justify-content: space-between; } .dm-calh strong { font-size: 1.05rem; } .dm-calh button { padding: 4px 16px; }
.dm-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dm-cal .wd { text-align: center; font-size: .7rem; color: var(--muted); }
.dm-day { min-width: 0; min-height: 62px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 2px 3px; display: flex; flex-direction: column; align-items: stretch; gap: 0; text-align: left; font-weight: 400; font-size: clamp(.55rem, 2.5vw, .68rem); line-height: 1.25; overflow: hidden; color: var(--ink); }
.dm-day span { display: block; white-space: nowrap; overflow: hidden; letter-spacing: -.02em; }
.dm-day b { font-size: .8rem; } .dm-day.sun b { color: #d6336c; } .dm-day.sat b { color: #1c7ed6; }
.dm-day.none { visibility: hidden; } .dm-day:disabled { opacity: .45; cursor: default; }
.dm-day.today { box-shadow: 0 0 0 2px var(--tk-green, var(--accent)); }
.dm-day .k { font-weight: 700; font-size: .62rem; }
.dm-day.wish { background: var(--warn-soft); border-color: #d9a300; border-style: dashed; } .dm-day.wish .k { color: #9a6700; }
.dm-day.fixed { background: var(--ok-soft); border-color: var(--ok); } .dm-day.fixed .k { color: var(--ok); }
.dm-day.off { background: var(--line); } .dm-day.off .k { color: var(--muted); font-size: .8rem; }
.dm-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; color: var(--muted); }
.dm-k { display: inline-block; padding: 0 7px; border-radius: 6px; font-weight: 700; color: var(--ink); border: 1px solid var(--line); }
.dm-k.wish { background: var(--warn-soft); border: 1px dashed #d9a300; } .dm-k.fixed { background: var(--ok-soft); border-color: var(--ok); } .dm-k.off { background: var(--line); }
.dm-h { font-size: 1rem; margin: 6px 0 0; }
.dm-ov { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; }
.dm-sheet { width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto; background: var(--panel); color: var(--ink); border-radius: 18px 18px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); display: grid; gap: 10px; }
.dm-sheet h2 { margin: 0; font-size: 1.05rem; } .dm-sheet p { margin: 0; }
.dm-now { padding: 8px 12px; border-radius: 10px; font-weight: 700; background: var(--warn-soft); } .dm-now.fixed { background: var(--ok-soft); color: var(--ok); } .dm-now.off { background: var(--line); color: var(--muted); }
.dm-form { display: grid; gap: 8px; }
.dm-tm { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: end; }
.dm-tm label { display: grid; gap: 3px; font-size: .78rem; color: var(--muted); margin: 0; } .dm-tm select { font-size: 1.05rem; padding: 10px 8px; } .dm-tm .to { padding-bottom: 12px; }
.dm-err { color: var(--err); font-weight: 700; }
.dm-btns { display: flex; gap: 8px; flex-wrap: wrap; } .dm-btns > * { flex: 1; min-width: 0; padding: 11px 6px; }
.dm-btns .danger-ish { color: var(--err); border-color: var(--err); background: transparent; }
/* ドライバーシフト：月ごとの休ませた回数 */
.ds-offs { display: grid; gap: 1px; margin-top: 3px; }
.ds-off { display: block; font-size: .68rem; font-weight: 400; white-space: nowrap; color: #a12a2a; } .ds-off b { font-size: .8rem; } .ds-off i { font-style: normal; color: var(--muted); }
.ds-off.zero { color: var(--muted); }
:root[data-theme="dark"] .ds-off:not(.zero) { color: var(--err); }
/* ドライバー連絡：上を詰める・小窓で見切れない・入力欄をそろえる */
main:has(> .tkapp:not(.win)) { padding-top: 8px; padding-bottom: 8px; }
main:has(> .tkapp:not(.win)) > #dp-props:not(:empty) { margin-bottom: 8px; }
body.barewin:has(.tkapp.win) { padding: 0; }
.tk-lhead strong { white-space: nowrap; }
body.barewin .tk-send textarea { height: auto; min-height: 0; padding: 8px 4px; font-size: .92rem; border: 0; }
body.barewin .tk-send { align-items: center; }
.tk-lhead > * { white-space: nowrap; flex: none; } .tk-lhead strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 給与明細：店が渡す・本人が見る */
.dk-slipbox { display: grid; gap: 6px; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.dk-slipbox .row { display: flex; gap: 6px; align-items: center; } .dk-slipbox select { width: auto; flex: 1; min-width: 0; } .dk-slipbox p { margin: 0; }
.dk-slip { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--bg); font-size: .86rem; } .dk-slip button { margin-left: auto; }
.my-slip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; text-align: left; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); margin-bottom: 6px; }
.my-slip .num { font-weight: 800; font-size: 1.05rem; text-align: right; } .my-slip .go { text-align: right; color: var(--accent); font-size: .84rem; }
.dm-sheet .my-sum { margin: 0; } .dm-sheet .my-work { margin: 0; }
.tk-lhead { flex-wrap: wrap; row-gap: 4px; } .tk-lhead strong { flex: 1 0 auto; overflow: visible; }
/* トークの上の名前の行：名前は縦に折らない。せまい時は、出勤の時間を次の行に出す */
.tk-rhead .ti { flex-wrap: wrap; align-items: center; row-gap: 4px; overflow: visible; }
.tk-rhead .ti strong { white-space: nowrap; flex: none; }
.tk-rhead .ti .tg { margin-left: 0; }
.dv-disp { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: .78rem; white-space: nowrap; font-weight: 400; }
/* 個人設定：メッセージの通知音 */
.msg-kinds { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-left: 4px; }
.msg-sounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.msg-sounds .ms { display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 6px 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-weight: 400; font-size: .86rem; cursor: pointer; }
.msg-sounds .ms:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--bg); }
.msg-sounds .ms .nm { flex: 1; min-width: 0; } .msg-sounds .ms b { color: var(--muted); font-weight: 700; margin-right: 2px; }
.msg-sounds .ms-play { flex: none; padding: 2px 9px; }
.msg-vol { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .msg-vol input[type=range] { width: min(280px, 60vw); padding: 0; } .msg-vol output { min-width: 3em; font-weight: 700; }
/* 通知の設定（管理者） */
.nt-grid { width: 100%; border-collapse: collapse; font-size: .88rem; } .nt-grid th, .nt-grid td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.nt-grid thead th { font-size: .78rem; color: var(--muted); white-space: nowrap; } .nt-grid th.nm { white-space: nowrap; font-weight: 700; } .nt-grid td.c { text-align: center; }
.nt-grid select { width: auto; max-width: 13em; padding: 4px 6px; } .nt-grid input[type=text] { min-width: 9em; padding: 4px 8px; }
.nt-grid .sw { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; white-space: nowrap; font-size: .8rem; }
.nt-vol { display: flex; align-items: center; gap: 6px; } .nt-vol input[type=range] { width: 110px; padding: 0; } .nt-vol output { min-width: 3em; font-size: .8rem; font-weight: 700; }
.nt-common .nt-vol input[type=range] { width: min(280px, 60vw); }
/* キャンセルの伝票：履歴 */
.cx-hist td, .cx-hist th { white-space: nowrap; } .cx-hist td.small:nth-last-child(2) { white-space: normal; min-width: 12em; }
.cx-act { display: inline-block; font-size: .76rem; font-weight: 700; border-radius: 999px; padding: 0 9px; background: var(--line); color: var(--ink); }
.cx-act.cancel { background: #fff3bf; color: #7a5b00; } .cx-act.restore { background: var(--ok-soft); color: var(--ok); } .cx-act.del_request { background: #ffe8cc; color: #a34700; } .cx-act.del_ok { background: var(--err); color: #fff; } .cx-act.del_ng { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
/* セラピスト連絡：検索・次回出勤 */
.tk-search { padding: 8px 12px; border-bottom: 1px solid var(--line); } .tk-search input { width: 100%; }
.tk-sres { flex: 1; overflow-y: auto; padding: 4px 0 10px; } .tk-sres .sh { font-size: .74rem; font-weight: 700; color: var(--muted); padding: 8px 12px 4px; } .tk-sres p { padding: 0 12px; margin: 0; }
.tk-sr { display: grid; gap: 2px; padding: 8px 12px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } .tk-sr:hover { background: var(--bg); }
.tk-sr .hd { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; } .tk-sr .tx { font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; } .tk-sr mark { background: #ffe066; color: #111; border-radius: 2px; padding: 0 1px; }
.tk-rhead .ti .tg.nx { background: #e7f5ff; border-color: #a5d8ff; color: #1864ab; font-weight: 700; }
.tk-hit { outline: 3px solid #ffd43b; outline-offset: 2px; border-radius: 12px; transition: outline-color .4s; }
.tk-rhead .ti .tg.nx.tent { background: #fff9db; border-color: #ffe066; color: #7a5b00; } .tk-rhead .ti .tg.nx.none { background: var(--bg); border-color: var(--line); color: var(--muted); font-weight: 400; }
.tk-stabs button .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sc); margin-right: 4px; vertical-align: 1px; }
/* 口コミ：評価の点の色・店のタブ */
.rv-rate { background: var(--ok-soft); color: var(--ok); font-weight: 700; } .rv-rate.low { background: #c92a2a; color: #fff; } .rv-rate.mid { background: #ffd43b; color: #5c4400; }
.rv-stabs { border: 0; padding: 0 0 8px; max-width: 640px; } .rv-stabs button .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sc); margin-right: 4px; vertical-align: 1px; }
/* 口コミ全体の色：3点以下＝赤・3.5点以下＝黄 */
.card.rv.rv-low { background: #ffe3e3; border-color: #ff8787; } .card.rv.rv-mid { background: #fff9db; border-color: #ffd43b; }
:root[data-theme="dark"] .card.rv.rv-low { background: #3d2424; border-color: #a12a2a; } :root[data-theme="dark"] .card.rv.rv-mid { background: #3a3220; border-color: #9a6700; }
/* 顧客・利用履歴：着信と同じ1行の並び */
.cl-row.cl-head { border-bottom: 2px solid var(--line); font-weight: 700; padding-top: 2px; padding-bottom: 2px; }
.cu-list .cu-nm { flex: 1 1 10em; min-width: 6em; overflow: hidden; text-overflow: ellipsis; } .cu-list .cl-ph { width: 9.5em; } .cu-list .cu-n { flex: none; width: 3em; text-align: right; }
.cu-list .cu-last { flex: none; width: 7.5em; } .cu-list .cu-memo { flex: 1 1 8em; min-width: 3em; overflow: hidden; text-overflow: ellipsis; color: var(--muted); } .cu-list .cl-act { width: 4em; justify-content: flex-end; }
.us-list .cl-row > span { flex: none; overflow: hidden; text-overflow: ellipsis; }
.us-list .us-tm { width: 3.4em; } .us-list .us-cast { width: 6.5em; } .us-list .us-cu { flex: 1 1 8em !important; min-width: 5em; } .us-list .cl-ph { width: 8.5em; }
.us-list .us-nom { width: 5.6em; } .us-list .us-kind { flex: 1 1 7em !important; min-width: 3em; } .us-list .us-min { width: 4.6em; text-align: right; } .us-list .us-op { flex: 1 1 7em !important; min-width: 3em; color: var(--muted); }
.us-list .us-tot { width: 6.2em; text-align: right; } .us-list .us-med { width: 5em; } .us-list .us-st { width: 6.4em; } .us-list .cl-act { width: 3.6em; justify-content: flex-end; }
.us-list .cl-row.us-cancel { opacity: .55; } .us-list .cl-row.us-cancel .us-tot b { text-decoration: line-through; }
.nm-tag { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 0 8px; background: var(--bg); border: 1px solid var(--line); } .nm-tag.n-hon { background: #ffe3ec; color: #a61e4d; border-color: #fcc2d7; } .nm-tag.n-pan { background: #e7f5ff; color: #1864ab; border-color: #a5d8ff; }
@media (max-width: 1100px) { .us-list .us-med, .us-list .cl-ph, .us-list .us-op { display: none; } .cu-list .cu-memo { display: none; } }
@media (max-width: 760px) { .us-list .cl-row, .cu-list .cl-row { flex-wrap: wrap; row-gap: 2px; } .us-list .cl-head, .cu-list .cl-head { display: none; }
  .us-list .cl-row > span, .cu-list .cl-row > span { width: auto !important; flex: 0 1 auto !important; } .us-list .us-cu, .cu-list .cu-nm { flex: 1 1 8em !important; } .us-list .cl-act, .cu-list .cl-act { margin-left: auto; } }
/* 店のタブ（共通） */
.st-tabs { flex-wrap: wrap; border-bottom: 0; padding: 4px 0 8px; } .st-tabs button { flex: 0 1 auto; min-width: 3.6em; white-space: nowrap; padding: 5px 12px; }
.tk-list .st-tabs { padding: 6px 10px; border-bottom: 1px solid var(--line); } .tk-list .st-tabs button { padding: 4px 8px; min-width: 0; font-size: .8rem; }
.st-tabs button .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sc); margin-right: 4px; vertical-align: 1px; } .st-tabs button b { font-weight: 700; }
/* ヘブンのネット予約：1件ずつの並び。今の状態は色の付いた札、変える時は選んで「変える」 */
#hr-list { display: grid; gap: 0; } .hr-row { border-bottom: 1px solid var(--line); padding: 8px 6px; display: grid; gap: 4px; } .hr-row.miss { display: none; } .hr-row[hidden] { display: none; }
.hr-row.low { opacity: .55; } .hr-l1, .hr-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .hr-l2 { padding-left: 2px; }
.hr-row .bd-code { background: var(--sc); color: #fff; min-width: 3.2em; text-align: center; } .hr-when { min-width: 12.5em; } .hr-girl { min-width: 5em; } .hr-cu { min-width: 9em; } .hr-course { flex: 1 1 10em; min-width: 6em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hr-amt { min-width: 6em; text-align: right; }
.hr-stt { font-weight: 800; font-size: .86rem; border-radius: 999px; padding: 2px 12px; background: var(--line); color: var(--ink); white-space: nowrap; }
.hr-stt.tmp { background: #ffd43b; color: #5c4400; } .hr-stt.prc { background: #a5d8ff; color: #0b3d6b; } .hr-stt.fix { background: #2f9e44; color: #fff; } .hr-stt.cmp { background: #868e96; color: #fff; } .hr-stt.dead { background: #c92a2a; color: #fff; }
.hr-chg { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0; } .hr-chg select { width: auto; font-size: .82rem; padding: 3px 6px; } .hr-act { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hr-memo { padding-left: 2px; white-space: pre-wrap; } .hr-why { border: 2px solid var(--err); border-radius: 8px; padding: 6px 8px; }
.card.nr.off { display: none; }
/* 伝票：時間の欄が「最短」のボタンにつぶされないように */
.sw-grid.g3 { grid-template-columns: 10.5em minmax(0, 1fr) 9em; } #sl-start { min-width: 4.6em; flex: 1 1 4.6em; } #sl-fast { flex: none; white-space: nowrap; }
@media (max-width: 520px) { .sw-grid.g3 { grid-template-columns: 1fr 1fr; } }
.sl-daterow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; } .sl-daterow input[type=date] { width: auto; font-weight: 700; } .sl-daterow label { margin: 0; }
.sw-head .sw-date { font-weight: 800; font-size: 1.02rem; }

/* メニュー：見出しを押すと、中身が右に出る（広い画面）。2026-10-10 */
@media (min-width: 821px) {
  .side .mg + .mg { margin-top: 2px; }
  .side .mg-head { padding: 10px 12px; font-size: .9375rem; font-weight: 600; letter-spacing: 0; color: var(--muted); border-left: 3px solid transparent; border-radius: 8px; }
  .side .mg-head::before, .side .mg.shut .mg-head::before { content: none; display: none; }
  .side .mg-head { white-space: nowrap; }
  .side .mg-head::after { content: "›"; margin-left: auto; font-size: 1.15em; line-height: 1; opacity: .6; }
  .side .mg .mn-dot { margin-left: 6px; }
  .side .mg.cur .mg-head { background: var(--accent-soft); color: var(--accent); font-weight: 700; border-left-color: var(--accent); }
  .side .mg.fly .mg-head { background: var(--bg); color: var(--ink); }
  .side .mg.cur.fly .mg-head { background: var(--accent-soft); color: var(--accent); }
  .side .mg.fly .mg-head::after { opacity: 1; }
  .side .mg-n, .side .mg.shut .mg-n { display: none; }
  .side .mg .mg-items, .side .mg.shut .mg-items { display: none; }
  .side .mg.fly .mg-items { display: grid; gap: 2px; position: fixed; z-index: 2000; min-width: 230px; max-width: 320px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
  .side .mg.fly .mg-items::before { content: attr(data-label); padding: 4px 12px 6px; font-size: .75rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
  .side .mg.fly .mg-items a { white-space: nowrap; }
}

/* 左のメニュー（はみ出して開く小窓）が、ページの中身の下にもぐらないように */
.side { z-index: 30; }
.sl-hnote { margin: 4px 0 6px; font-size: .85rem; padding: 6px 10px; border-radius: 8px; background: var(--warn-soft); border-left: 4px solid #e0a800; white-space: pre-wrap; } .sl-hnote b { display: block; }
.sl-map { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 2px 0 6px; font-size: .9rem; }
.sl-mapbox { flex-basis: 100%; height: 260px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line, #ddd); } .sl-mapbox iframe { width: 100%; height: 100%; border: 0; }
.dm-wrap { display: grid; grid-template-columns: 1fr 280px; gap: 12px; } .dm-map { height: calc(100vh - 170px); min-height: 360px; border-radius: 10px; border: 1px solid var(--line, #ddd); background: var(--soft, #f4f4f4); } .dm-list { display: grid; gap: 6px; align-content: start; } .dm-list .card { padding: 8px 10px; } .dm-old { opacity: .55; }
@media (max-width: 800px) { .dm-wrap { grid-template-columns: 1fr; } .dm-map { height: 60vh; } }