/* 買取ぬあ問い合わせデスク。
   画面の作りは NUIR 販売報告管理(sold-board)・イッタクBIZ 管理画面と同じ
   （左メニュー + 本文、角丸カード）。
   見た目の雰囲気は利用者指定のミント基調（上部のミント帯 + 波、白い角丸カード、
   影は淡く、余白は広め）。色は1か所（下のトークン）で切り替えられるようにしてある。 */
:root {
  --accent: #3fc8b4;
  --accent-soft: #6fdccb;
  /* 文字と塗りに使う濃いほう。ミント(#3fc8b4)に白文字だと薄くて読めず、
     ミントの文字も白地で読みにくかったので、ここを濃くしてある
     （帯・タグ・選択中の背景はミントのまま。2026-09-10 利用者「全部緑で見づらい」）。
     旧: #1f9e8c */
  --accent-deep: #0d7a6a;
  --accent-hover: #0a6357;
  --accent-tint: #e8f8f5;
  /* 上部の帯。ヘッダと本文上部で同じものを使う */
  --band: linear-gradient(135deg, #63d7c5 0%, #33bfa9 70%, #22b39d 100%);
  --bg: #f4fbf9;
  --card: #fff;
  --ink: #111111;
  --muted: #6e6e6e;
  /* 枠線。薄すぎるとボタンがボタンに見えないので、輪郭がつく濃さにしてある */
  --line: #dbe6e3;
  --ok: #2f7a4d;
  --red: #b3392f;
  --amber: #9a6700;
  --shadow-sm: 0 2px 8px rgba(31, 158, 140, 0.07);
  --shadow-card: 0 10px 30px rgba(31, 158, 140, 0.1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
button,
input,
select,
textarea {
  font-family: inherit;
}
.num {
  font-variant-numeric: tabular-nums;
}

/* ============ 骨格（左メニュー + 本文） ============ */
/* イッタクBIZ 管理画面(apps/sales/consignment の AdminLayout)と同じ作り。
   広い画面は左に固定メニュー、狭い画面は引き出し(ハンバーガーで開閉)。 */
.shell {
  display: flex;
  min-height: 100svh;
}

.side {
  flex: 0 0 auto;
  width: 232px;
  display: flex;
  flex-direction: column;
  padding: 14px 10px calc(12px + var(--safe-b));
  background: #fff;
  box-shadow: 2px 0 18px rgba(31, 158, 140, 0.06);
  position: sticky;
  top: 0;
  height: 100svh;
  overflow-y: auto;
}
.side .brand {
  position: relative;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-tint), #fff);
}
.side .brand .sub {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
  font-weight: 700;
}
.side .brand .nm {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.sideclose {
  position: absolute;
  top: -4px;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  display: none;
}

.navlist {
  display: grid;
  gap: 2px;
  margin-top: 16px;
}
/* メニューの区切り。8つ並ぶと境目が分からないので、2つのまとまりに分けて名前を付ける。 */
.navgroup {
  margin: 14px 0 2px;
  padding: 0 0.7rem;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.navgroup:first-of-type {
  margin-top: 10px;
}

.navitem {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.navitem svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.navitem:hover {
  background: #f4f6f8;
}
/* いま開いている画面。左に太い線を出して、色だけに頼らず分かるようにする。 */
.navitem[aria-selected="true"] {
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--accent-deep);
}
.navitem:not([aria-selected="true"]) {
  color: #4a4a4a;
}
.navitem .badge {
  margin-left: auto;
  padding: 0 0.38rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
}

.sidefoot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
}
.sidefoot .who {
  padding: 0 8px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ghostbtn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 10px;
  padding: 0.42rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
/* ヘッダはミント1本で固定する（波の飾りは使わない）。 */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--band);
}
.top h1 {
  margin: 0;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.hamburger {
  display: none;
  border: 0;
  background: none;
  color: #fff;
  padding: 4px;
  cursor: pointer;
}
.hamburger svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(17, 17, 17, 0.42);
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 18px calc(28px + var(--safe-b));
}

/* 狭い画面ではメニューを引き出しにする */
@media (max-width: 899px) {
  .side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: 258px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 10px 30px rgba(17, 17, 17, 0.18);
  }
  .side.open {
    transform: none;
  }
  .sideclose {
    display: block;
  }
  .hamburger {
    display: block;
  }
}

/* ============ TOP（入口のアイコンと今日の予定） ============ */
/* ヘッダの補足（TOPでは今日の日付と自分の名前）。本文側に置くと波と重なるのでここに出す。 */
.topsub {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 10px 14px;
  border: 0;
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.tile small {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
}
.tile .ic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-tint), #f2fbf9);
}
.tile .ic svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: var(--accent-deep);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile:active {
  transform: translateY(1px);
}
.tilebadge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 20px;
}
@media (min-width: 620px) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 今日のスタッフ（店舗ごとに1行） */
.duty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid #eef5f3;
  font-size: 0.86rem;
}
.duty:first-child {
  border-top: 0;
}
.duty .st {
  flex: 0 0 4.5em;
  font-weight: 800;
  color: var(--st, var(--ink));
}
.duty .who {
  flex: 1;
  min-width: 0;
  font-weight: 700;
}
.duty .who .none {
  color: var(--muted);
  font-weight: 700;
}
.duty .sh {
  display: inline-block;
  margin-right: 4px;
  padding: 0 0.3rem;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
}
.duty .sh.late {
  background: var(--accent-deep);
}

/* ============ 部品 ============ */
.card {
  background: var(--card);
  border: 0;
  border-radius: 22px;
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
/* 行の中に置いた見出し（例: 問い合わせ一覧）も同じ大きさに揃える。
   直下だけを見ていると、.row に入れた見出しが既定サイズのまま大きく出る。 */
.card h2 {
  margin: 0 0 10px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.card .row h2 {
  margin: 0;
}
.card h2 .sub {
  font-weight: 700;
  color: var(--muted);
  font-size: 0.74rem;
  margin-left: 6px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.row > .grow {
  flex: 1 1 140px;
  min-width: 0;
}
.muted {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.hint {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 700;
  margin-top: 6px;
}

.tin {
  width: 100%;
  border: 1px solid #e3efec;
  border-radius: 14px;
  padding: 0.62rem 0.8rem;
  font-size: 0.95rem;
  outline: none;
  color: var(--ink);
  background: #fbfefd;
}
.tin:focus {
  border-color: var(--accent-soft);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(63, 200, 180, 0.22);
}
textarea.tin {
  min-height: 72px;
  resize: vertical;
  line-height: 1.55;
}
/* 送る文面。そのまま読める高さにしておく（短いと直しづらい）。 */
textarea.tin.msg {
  min-height: 210px;
  margin: 10px 0;
}

/* 文中に置くチェックボックス（「自分の名前を入れる」など）。 */
.chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.chk input {
  accent-color: var(--accent-deep);
  width: 16px;
  height: 16px;
}

.fld {
  display: block;
  min-width: 0;
}
.fld .flabel {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}

/* 枠が薄すぎて押せるものに見えなかったので、線と影を一段濃くした（2026-09-14 利用者）。 */
.btn {
  border: 1px solid #bacfca;
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 0.46rem 1rem;
  font-size: 0.83rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.09);
  white-space: nowrap;
}
/* 本命の操作。1つの行・1つのカードに1つだけにする。
   グラデーションはやめた（小さい白文字が薄く見えるため）。 */
.btn.primary {
  border-color: transparent;
  background: var(--accent-deep);
  color: #fff;
  box-shadow: 0 2px 6px rgba(13, 122, 106, 0.28);
}
.btn.primary:hover {
  background: var(--accent-hover);
}
/* 文字の左に絵を置くボタン。何をするボタンかを絵でも分かるようにする。 */
.btn.withicon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 0.8rem;
}
.btn.withicon svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 二番手。押せるが本命ではないもの（本命の隣に置く） */
.btn.tint {
  border-color: #8ccec1;
  background: var(--accent-tint);
  color: var(--accent-deep);
}
.btn.tint:hover {
  background: #d8f2ec;
}
.btn:hover {
  border-color: var(--accent-deep);
}
.btn.danger {
  border-color: #e7c4c0;
  background: #fdf5f4;
  color: var(--red);
}
.btn:disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: default;
}
/* 上の相場と提示欄がズレたときの知らせ。見落とすと古い金額のまま送ってしまう。 */
.applyrow {
  margin-bottom: 10px;
}
.applyrow .hint {
  color: var(--accent-deep);
  font-weight: 700;
}
/* 押す必要がないときも、いくらで計算されているかは読めるようにしておく。 */
.applyrow .btn:disabled {
  opacity: 0.75;
}
.save {
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--accent-deep);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(13, 122, 106, 0.3);
}
.save:hover {
  background: var(--accent-hover);
}
.save:disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: default;
}
.link {
  border: 0;
  background: none;
  color: var(--accent-deep);
  cursor: pointer;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: underline;
}

/* 操作は文字ではなくアイコンで出す（一覧が文字だらけにならないように）。
   意味は title / aria-label に残してあるので、長押し・ホバー・読み上げで分かる。 */
.iconbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.iconbtn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.iconbtn:hover {
  background: var(--accent-tint);
  border-color: var(--accent-soft);
  color: var(--accent-deep);
}
.iconbtn.primary {
  border-color: #a9ded4;
  background: var(--accent-tint);
  color: var(--accent-deep);
}
.iconbtn.danger:hover {
  background: #fdf5f4;
  border-color: #e7c4c0;
  color: var(--red);
}
.iconbtn.done {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* 操作アイコンを右端に寄せるための余白 */
.spacer {
  flex: 1 1 auto;
}

/* 選択ボタン(店舗・担当・区分) */
.pick {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.pick button {
  flex: 1 1 28%;
  border: 1px solid var(--st, var(--line));
  background: #fff;
  border-radius: 14px;
  padding: 0.6rem 0.3rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--st, var(--muted));
  cursor: pointer;
}
.pick button.on {
  background: var(--st, var(--accent));
  border-color: var(--st, var(--accent));
  color: #fff;
}
.pick.small button {
  flex: 1 1 22%;
  padding: 0.48rem 0.2rem;
  font-size: 0.82rem;
  color: var(--muted);
  border-color: var(--line);
}
.pick.small button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 横スクロールする丸ピル(店舗の絞り込み) */
.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chips button {
  flex: 0 0 auto;
  border: 1px solid var(--st, #dceeea);
  box-shadow: var(--shadow-sm);
  background: #fff;
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--st, var(--muted));
  cursor: pointer;
}
.chips button.on {
  background: var(--st, var(--ink));
  border-color: var(--st, var(--ink));
  color: #fff;
}

.pill {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--accent-tint);
  color: var(--accent-deep);
}
/* 結果は遠目でも見分けたいので、塗って白抜きにする。 */
.pill.won {
  background: #1d7a45;
  color: #fff;
}
.pill.lost {
  background: #a8322a;
  color: #fff;
}
.pill.pending {
  background: #f1f3f5;
  color: #4a4a4a;
  border: 1px solid #dfe4e8;
}
.pill.cancel {
  background: #f1f3f5;
  color: var(--muted);
  text-decoration: line-through;
}
.pill.store {
  background: #fff;
  border: 1px solid var(--st, var(--line));
  color: var(--st, var(--muted));
}
.pill.warn {
  background: #fff8e6;
  color: var(--amber);
}
/* 予約なしで来た人。成約・不成約の色とぶつからないよう、落ち着いた別の色にしてある。 */
.pill.walkin {
  background: #f3ecff;
  color: #6b3fa0;
  border: 1px solid #ddd0f2;
}
/* 前日連絡を送り終えたもの。済んだことが一目で分かればよいので落ち着いた色にする。 */
.pill.done {
  background: var(--accent-tint);
  color: var(--accent-deep);
}
/* 査定課に回しているもの。成約の緑と紛らわしくならないよう別の色にしてある。 */
.pill.ask {
  background: #eef0fb;
  color: #43499b;
  border: 1px solid #ccd2f0;
}

.notice {
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: #fff8e6;
  border: 1px solid #f0dfae;
  color: var(--amber);
  font-size: 0.82rem;
  font-weight: 700;
}
/* 人に確認が要る品物。見落とすとお客様に二度連絡することになるので、注意より一段強く出す。 */
.notice.warn {
  background: #fdf3f2;
  border-color: #e7b4ae;
  color: var(--red);
}
/* 初期パスワードのままの人への帯。どのタブにいても目に入るよう、本文のいちばん上に置く。 */
#pw-warn {
  margin-bottom: 14px;
}
#q-checks {
  margin-bottom: 14px;
}
#q-checks .notice + .notice {
  margin-top: 6px;
}
.notice.ok {
  background: #f2faf5;
  border-color: #9fd3b4;
  color: var(--ok);
}
.notice .act {
  display: block;
  margin-top: 6px;
}

/* 大きめの検索欄（電話を持ちながら打つので、指で押せる大きさにする） */
.searchbox {
  position: relative;
}
.tin.big {
  font-size: 1.02rem;
  padding: 0.8rem 2.2rem 0.8rem 0.9rem;
}
.clearbtn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: #eef0f3;
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
}

/* シフトの区分の編集（店舗ごとに区分と時間を並べる） */
.shpstore {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.shpstore:first-child {
  border-top: 0;
  padding-top: 0;
}
.shpstore > b {
  font-size: 0.84rem;
}
.shplist {
  display: grid;
  gap: 6px;
  margin: 6px 0;
}
.shprow {
  flex-wrap: nowrap;
}

/* 見出しを押すと畳めるカード。使い終わった枠を下げて、続きの作業を上に出す。 */
details.card.acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
details.card.acc > summary::-webkit-details-marker {
  display: none;
}
details.card.acc > summary h2 {
  margin: 0;
  flex: 1 1 auto;
}
details.card.acc > summary::after {
  content: "＋";
  color: var(--accent-deep);
  font-weight: 800;
}
details.card.acc[open] > summary {
  margin-bottom: 10px;
}
details.card.acc[open] > summary::after {
  content: "−";
}

/* 入れてもらわないと先に進めない欄。押して止めたときだけ赤くする。 */
.tin.need {
  border-color: var(--red);
}
.hint.need {
  color: var(--red);
  font-weight: 700;
}

/* 任意項目のたたみ込み（既定は閉じておき、必要なときだけ開く） */
details.opt {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
details.opt summary {
  list-style: none;
  cursor: pointer;
  padding: 0.75rem 0.95rem;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--muted);
}
details.opt summary::-webkit-details-marker {
  display: none;
}
details.opt summary::after {
  content: "＋";
  float: right;
  color: var(--accent-deep);
}
details.opt[open] summary::after {
  content: "−";
}
details.opt .body {
  padding: 0 0.95rem 0.95rem;
  display: grid;
  gap: 10px;
}

/* リンクとして置くボタン（相場プロへ飛ぶ） */
a.btn {
  display: inline-block;
  text-decoration: none;
}
a.btn.souba[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}
/* 一覧の行に置く小さめのボタン（アイコンと並べても行が太らない大きさ）。 */
.btn.sm {
  padding: 0.28rem 0.7rem;
  font-size: 0.76rem;
}
/* お客様の管理番号。数字を読み違えないよう等幅で出す。 */
.btn.sm.code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}
/* もう発行した予約リンク。3人で手分けして返信するので、送り済みが目で分かるようにする。 */
.btn.sm.done {
  border-color: #cdeee7;
  background: var(--accent-tint);
  color: var(--accent-deep);
}
/* 誰がいつ予約リンクを出したか。読み物であって押すものではないので、
   ほかのメタ情報と同じ色にする（緑にすると押せるように見えた）。 */
.linknote {
  color: var(--muted);
  font-weight: 700;
}

/* ============ 来店してからの流れ ============ */
/* 「成約」1つで終わらせず、査定フローの段階を上から順に押して進める。 */
.flow {
  display: grid;
  gap: 6px;
  margin: 6px 0 4px;
}
/* 1行まるごとが label。チェックを入れると済み。 */
.fstep {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.fstep input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent-deep);
  cursor: pointer;
}
.fstep .no {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f1f4f5;
  color: var(--muted);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 800;
}
.fstep .bd {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.fstep .bd b {
  font-size: 0.88rem;
}
.fstep .bd small {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}
/* 済んだ段階 */
.fstep.done {
  background: var(--accent-tint);
  border-color: var(--accent-soft);
}
.fstep.done .no {
  background: var(--accent);
  color: #fff;
}
/* 次に押す段階だけ縁を立てる（どこを押せばいいか迷わないように） */
.fstep.next {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* 品物ごとの提示金額（複数点の予約）。 */
.ritems {
  display: grid;
  gap: 6px;
  margin: 6px 0 10px;
}
.ritem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.ritem .nm {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ritem .nm b {
  font-size: 0.88rem;
}
.ritem .nm small {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}
.ritem .tin {
  flex: 0 0 128px;
}

/* ============ ご来店の予約ページ（お客様が開く画面） ============ */
/* LINEのアプリ内ブラウザで開かれる前提。片手で押せる大きさにする。 */
.bookpage {
  background: var(--bg);
}
.bookhd {
  padding: 18px 18px 16px;
  background: var(--band);
  color: #fff;
}
.bookhd .sub {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  opacity: 0.9;
}
.bookhd h1 {
  margin: 2px 0 0;
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.bookhd .lead {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.92;
}
.bookwrap {
  max-width: 560px;
  margin: 0 auto;
  /* ヘッダーの帯にカードを少し重ねる */
  padding: 0 14px calc(28px + var(--safe-b));
  transform: translateY(-14px);
}
.bookpage .pick button {
  min-height: 46px;
  font-size: 0.95rem;
}
.bookpage .save {
  min-height: 52px;
  font-size: 1rem;
}
/* 選んだ内容・いまの予約。読み飛ばされないよう大きく出す。 */
.bignote {
  margin: 6px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--accent-tint);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.6;
}

/* 手順の番号。どこまで進んだかを見えるようにする。 */
.bookpage .card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}
.stepno {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.blabel {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
}
.bitem h2 {
  margin: 2px 0 8px;
  font-size: 1.06rem;
}
/* お伝えした概算。ここを見に来る人が多いので、数字を大きく出す。 */
/* LINEでお伝えしたのと同じお問い合わせ番号。読み違えないよう等幅で出す。 */
.bcode {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
/* ページのいちばん下。お客様がいつでもポリシーを確認できるようにしておく。 */
.bfoot {
  margin: 18px 0 8px;
  text-align: center;
}
.bfoot a {
  color: var(--accent-deep);
}
/* 古物商の3項目。読み飛ばして構わない表示なので、ポリシーより一段落とす。 */
.blic {
  margin-top: 4px;
  font-size: 0.7rem;
  line-height: 1.6;
}

/* ---- お客様について伺う欄（古物営業法第16条第4号） ---- */
.tlab {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 4px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink);
}
.tlab .req,
.tlab .opt {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
}
.tlab .req {
  color: #fff;
  background: var(--danger, #c8102e);
}
.tlab .opt {
  color: var(--muted);
  background: var(--line, #e6e6e6);
}
.bookpage input.tin {
  min-height: 48px;
  font-size: 1rem;
}

.bquote {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--accent-tint);
}
.bquote .l {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--accent-deep);
}
.bquote .v {
  font-size: 1.02rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* 店舗が1つだけのときは、選ばせずに名前だけ出す */
.bonly {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}
.bookpage select.tin {
  min-height: 48px;
  font-size: 1rem;
  font-weight: 700;
}

/* ---- ご来店日のカレンダー ---- */
.calm + .calm {
  margin-top: 14px;
}
.calm-h {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent-deep);
  margin-bottom: 6px;
}
.calg {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calw {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
  padding-bottom: 2px;
}
.calw.sun,
.cald.sun .d {
  color: #c0574c;
}
.calw.sat,
.cald.sat .d {
  color: #3d72b8;
}
.cald {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 46px;
  padding: 3px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.cald.pad {
  border: 0;
  background: none;
}
.cald .d {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.1;
}
.cald .mk {
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
}
.mk.ok {
  color: var(--accent-deep);
}
.mk.few {
  color: var(--amber);
}
.mk.no {
  color: #bfbfbf;
}
/* 期間外の日。押せないが、日付は見えているほうが迷わない。 */
.cald.out {
  border-color: transparent;
  background: none;
  opacity: 0.32;
  cursor: default;
}
.cald.no {
  background: #fafafa;
  cursor: default;
}
.cald.no .d {
  color: #bfbfbf;
}
.cald.ok,
.cald.few {
  border-color: #cdeee7;
}
.cald.on {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(63, 200, 180, 0.35);
}
.cald.on .d,
.cald.on .mk {
  color: #fff;
}
.calleg {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
}
.calleg i {
  font-style: normal;
  margin-right: 3px;
}

/* ---- お時間 ---- */
.times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.tslot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 52px;
  padding: 6px 4px;
  border: 1px solid #cdeee7;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
.tslot .t {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tslot .e {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
}
.tslot.on {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(63, 200, 180, 0.35);
}
.tslot.on .t,
.tslot.on .e {
  color: #fff;
}

/* ---- 完了 ---- */
.bdone {
  text-align: center;
}
.bcheck {
  width: 52px;
  height: 52px;
  margin: 2px auto 8px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-size: 1.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bdone h2 {
  justify-content: center;
  font-size: 1.02rem;
}

/* ============ 設定の目次 ============ */
/* 縦に続くカードだけでは「何を操作できるのか」が分からないので、先頭に一覧を置く。 */
.setnav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.setitem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.setitem:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.setitem b {
  font-size: 0.92rem;
}
.setitem small {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.45;
}
.setitem .pill {
  margin-top: 3px;
}
/* 目次から飛んだ先を一瞬だけ光らせる（どこに移動したか分かるように）。 */
.card.jumped {
  box-shadow: 0 0 0 2px var(--accent);
}

/* 取り扱いを止めている品目。消さずに薄く出す。 */
.chips button.off {
  color: var(--muted);
  border-color: #eceff1;
  background: #fafafa;
  opacity: 0.72;
}
.row.paused {
  opacity: 0.52;
}
.row.paused .pill {
  background: #f0f0f0;
  color: var(--muted);
}

/* 複数点の内訳（どの品物でいくら出したか）。 */
.qitems {
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.7;
}
/* 概算の記録は1件ずつ枠で囲む。
   区切り線だけだと、下に置いた操作が上下どちらの記録のものか分からなかった
   （2026-09-10 利用者「ボタンがどの行に対してのボタンなのか分かりづらい」）。 */
#q-log-list .it {
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
}
#q-log-list .it:last-child {
  margin-bottom: 0;
}

/* ============ 成約後・本社発送 ============ */
/* 事務作業のチェックを横に並べる。予約の画面と同じ4つ。 */
.shipsteps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 6px 0;
}
.shipsteps .chk {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.shipsteps .chk.on {
  color: var(--accent-deep);
}
.shipsteps input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent-deep);
  cursor: pointer;
}
/* 発送の欄。日付・便・追跡番号を横に並べ、狭い画面では折り返す。 */
.shipform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.shipform .tin {
  padding: 0.42rem 0.6rem;
  font-size: 0.86rem;
}

/* 予約が入ったことの知らせ。TOP のいちばん上に出す。 */
.notice.newbook {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.notice.newbook .act {
  margin-left: auto;
  flex: 0 0 auto;
}

/* 記録は件数が増えるので、1件をできるだけ薄くする。
   写真とメモで縦に伸びて、1画面に2〜3件しか入らなかった（2026-09-11 利用者）。 */
#q-log-list .it .phrow .ph {
  width: 48px;
  height: 48px;
}
/* メモは帯をやめて1行に。1行の注記に帯は重すぎた。 */
#q-log-list .qmemo {
  margin-top: 3px;
  padding: 0;
  background: none;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

/* 操作は状態と混ざらないよう行を分けて右に寄せる。
   枠の中に入っているので、上に区切り線は引かない（枠の外と紛らわしくなる）。 */
.qacts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* 1点ずつの内訳。品物と提示は左、相場は右に寄せて縦に揃える。 */
.qitem {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.qitem > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.qitem .qmk {
  flex: 0 0 auto;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

/* 流れの中に置く買取入力。どの段でこれを打つのかが目で分かるように、
   段のすぐ下に少し下げて並べる。 */
.flowbuy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 4px 32px;
}

/* ============ 店頭の買取入力 ============ */
/* カウンターで立ったまま打つので、入力欄を大きくしてある。 */
.buyitem {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fbfefd;
}
.buyitem + .buyitem {
  margin-top: 0;
}
.buyitem .fld {
  margin-bottom: 8px;
}
.buyitem .tin.big {
  min-height: 46px;
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
}
.buyitem select.tin.big {
  padding-right: 1.6rem;
}
/* 番号で引けた欄に「番号 01」と添える。打った番号が合っていたか見て分かるように。 */
.buyitem .flabel {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.mnote {
  color: var(--accent-deep);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ============ 品物の写真 ============ */
/* LINEで届いた写真を概算に貼る。案件が終わってから2週間で自動的に消える。 */
.phrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ph {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fafafa;
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.ph .x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
/* 記録に添える写真は少し小さく */
.qitems .phrow .ph {
  width: 56px;
  height: 56px;
}
/* 予約の画面に出す写真（見るだけ）。品物ごとの行に入るので小さめ。 */
.ritem .phrow {
  margin-top: 4px;
}
.ritem .phrow .ph {
  width: 52px;
  height: 52px;
}
/* 店頭の買取入力に出す写真。現物と見比べるので、こちらは大きめにする。 */
.buyitem .phrow {
  margin: 4px 0 8px;
}
.buyitem .phrow .ph {
  width: 88px;
  height: 88px;
}

/* 概算提示の記録に添えるメモ。 */
.qmemo {
  margin-top: 4px;
  padding: 5px 8px;
  border-radius: 10px;
  background: var(--accent-tint);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: pre-wrap;
}

/* 発行したログインIDと初期パスワードの控え。読み違えないよう等幅で出す。 */
.issue {
  margin: 0 0 10px;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: var(--accent-tint);
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
}

.error {
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: #fdf5f4;
  border: 1px solid #e7c4c0;
  color: var(--red);
  font-size: 0.82rem;
  font-weight: 700;
}

/* サマリ */
.sum {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sum .s {
  flex: 1 1 22%;
  background: #fff;
  border: 0;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 7px 10px;
  min-width: 0;
}
.sum .s .k {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  font-weight: 800;
}
.sum .s .v {
  font-size: 1.12rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ カレンダー ============ */
.monthbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.monthbar .mlabel {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  min-width: 7.2em;
  text-align: center;
}
.navbtn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent-deep);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.seg {
  display: flex;
  gap: 3px;
  background: #f1f3f5;
  border-radius: 10px;
  padding: 3px;
  margin-left: auto;
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.34rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.seg button.on {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.calhead,
.calgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calhead {
  margin-bottom: 4px;
}
.calhead div {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.calhead div.sat {
  color: #2f6bb0;
}
.calhead div.sun {
  color: var(--red);
}
.day {
  min-height: 74px;
  border: 0;
  box-shadow: var(--shadow-sm);
  background: #fff;
  border-radius: 14px;
  padding: 4px 4px 5px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.day.blank {
  border-color: transparent;
  background: transparent;
  cursor: default;
}
.day.today {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(96, 150, 208, 0.18);
}
.day .dn {
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
}
.day.sun .dn {
  color: var(--red);
}
.day.sat .dn {
  color: #2f6bb0;
}
.day .sd {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
}
.day .sd i {
  flex: 0 0 auto;
  font-style: normal;
  border-radius: 4px;
  padding: 0 0.22rem;
  font-size: 0.6rem;
  color: #fff;
  background: var(--accent);
}
.day .sd i.late {
  background: var(--accent-deep);
}
.day .sd .nm {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 勤務時間は名前の下に小さく出す。早番/遅番だけでは何時か分からないため。 */
.day .sd {
  align-items: flex-start;
}
.day .sd .nm {
  white-space: normal;
}
.day .sd .tm {
  display: block;
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--muted);
}
/* 名前が入りきる幅のときは人数を出さない。狭い画面では逆にする（下のメディアクエリ）。 */
.day .sd .cnt {
  display: none;
  color: var(--muted);
}
.day .rs {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--muted);
}
.day .rs .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}
.day .rs .dot.won {
  background: var(--ok);
}
.day .rs .dot.lost {
  background: var(--red);
}
.day .rs .dot.pending {
  background: var(--accent);
}
.day .rs.warn {
  color: var(--amber);
}
/* 予約がある日はマスごと色を付ける。点と時刻だけでは、月を見わたしたときに
   どの日に予約が入っているか拾えなかった。 */
.day.hasres {
  background: #f2fbf8;
  border: 1px solid var(--accent-soft);
}
.day.hasres.r-won {
  background: #f2faf5;
  border-color: #9ed0b3;
}
.day.hasres.r-lost {
  background: #fdf5f4;
  border-color: #e7bdb8;
}
.day.needstaff {
  background: #fffaf0;
  border-color: #e8c987;
}
.day .rs {
  margin-top: auto;
  padding: 2px 5px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.day .rs .n {
  color: var(--accent-deep);
  white-space: nowrap;
}
.day.r-won .rs .n {
  color: var(--ok);
}
.day.r-lost .rs .n {
  color: var(--red);
}
.day .rs .tms {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-weight: 700;
}
.day .rs .wn {
  margin-left: auto;
}
.callegend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
}
/* スマホ幅では1マスに名前が入らない。名前は日別シートで見てもらい、ここは人数だけ出す。 */
@media (max-width: 519px) {
  .day .sd .nm {
    display: none;
  }
  .day .sd .cnt {
    display: inline;
  }
  .top h1 {
    font-size: 0.95rem;
  }
  /* 数字は4つ横並びだと桁が切れる。2列に落とす。 */
  .sum .s {
    flex: 1 1 44%;
  }
}
@media (min-width: 620px) {
  .day {
    min-height: 96px;
  }
  .day .sd {
    font-size: 0.7rem;
  }
}

/* いまは使わない枠。消さずに残しておき、使えないことが見て分かるようにする。 */
.card.stopped {
  background: #fafbfb;
  box-shadow: none;
  border: 1px dashed var(--line);
}
.card.stopped h2 {
  color: var(--muted);
}

/* ============ シフト登録のカレンダー ============ */
/* 予約カレンダーと同じマス目を使い、入っている日に区分と店舗を出す。
   店舗と区分は上で1つ選んでおき、日を押すとその内容で入る（2026-09-20 利用者）。 */
.day.shon {
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px #a9ded4;
}
/* 区分のチップ。店舗の色は持たないので、選んだものはミントで塗る（既定の黒は強すぎた）。 */
#sh-pattern button.on {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: #fff;
}
/* 区分（A/B/C/F）。店舗の色で塗って、どの店かを色でも分かるようにする。 */
.shmark {
  align-self: flex-start;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--st, var(--accent-deep));
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
}
.shstore {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============ 自分のシフト ============ */
/* 出勤する日を拾うマス目。カレンダーと同じ曜日の並びにして、位置で日を見つけられるようにする。 */
.daypick {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.daypick .pad {
  visibility: hidden;
}
.daypick .d {
  padding: 9px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
}
.daypick .d.sun {
  color: #c0392b;
}
.daypick .d.sat {
  color: #1f6f9e;
}
/* 過ぎた日も押せる（前の月の登録漏れを埋めることがある）。薄くするだけにとどめる。 */
.daypick .d.past {
  opacity: 0.45;
}
.daypick .d.on {
  border-color: transparent;
  background: var(--accent-deep);
  color: #fff;
}
#me-list .it {
  display: flex;
  align-items: center;
  gap: 8px;
}
#me-list .it .bd {
  flex: 1 1 auto;
  min-width: 0;
}
#me-list .it .bd b {
  font-size: 0.9rem;
}
#me-list .it .meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

/* ============ 一覧 ============ */
.list .it {
  border-top: 1px solid #eef5f3;
  padding: 10px 0;
}
.list .it:first-child {
  border-top: 0;
}
.list .it .hd {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.list .it .hd b {
  font-size: 0.92rem;
}
.list .it .sub {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  margin-top: 2px;
}
.list .it .answer {
  white-space: pre-wrap;
  font-size: 0.9rem;
  margin: 5px 0 6px;
}

/* ============ 回答を探す（読み上げる文章なので、ここだけ大きく組む） ============ */
/* 1件ずつを枠で囲う。線1本だと、どこからどこまでが1件か分からない。 */
.list .it.faq {
  border-top: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}
/* いちばん近い1件。電話中はここを読むので、左に帯を出して他と分ける。 */
.list .it.faq.best {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
  background: linear-gradient(180deg, var(--accent-tint) 0%, #fff 42%);
}
.list .it.faq .hd b {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--accent-deep);
}
.pill.best {
  background: var(--accent);
  color: #fff;
}
/* 本文。読み上げる前提なので、行間を広めに取り、段落で切る。 */
.list .it.faq .answer {
  white-space: normal;
  font-size: 0.97rem;
  line-height: 1.95;
  margin: 8px 0 10px;
}
.list .it.faq .answer p {
  /* 段落の中の改行は活かす（箇条書きのように書かれている回答がある） */
  white-space: pre-line;
  margin: 0 0 0.85em;
}
.list .it.faq .answer p:last-child {
  margin-bottom: 0;
}
/* 打った言葉の印。塗りつぶすと読みにくいので、下線＋薄い地色にする。 */
.list .it.faq .answer mark {
  background: #fff3bf;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
  box-shadow: 0 1px 0 #e6c84d inset;
}
.list .it .acts {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.empty {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  padding: 8px 0;
}

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-top: 8px;
}
table.grid th,
table.grid td {
  padding: 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
table.grid th {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

/* ============ 概算 ============ */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* 掛け率が3つとも同じとき（既定の7割）は、金額の箱を1つだけ広く出す。 */
.quote-grid.one {
  grid-template-columns: 1fr;
}
.qbox {
  border: 0;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 11px 6px;
  text-align: center;
  background: #fafbfc;
}
.qbox .k {
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.qbox .v {
  font-size: 1.24rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.qbox.main {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.qbox.main .v {
  color: var(--accent-deep);
}
/* 事例を選び直しているあいだ、いまの相場を連れて回る帯。
   100件を超えると、外した結果を見るのに上まで戻らないといけなかった。 */
.srcbar {
  position: sticky;
  top: var(--topbar-h, 56px);
  z-index: 5;
  margin: 12px -18px 0;
  padding: 8px 18px 7px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.srcbar .row + .row {
  margin-top: 5px;
}
#q-src-market {
  font-size: 0.95rem;
}
.srcnow .muted {
  font-size: 0.8rem;
}

/* 相場のもとにした落札事例。一撃検索と同じく、写真の札を横に並べて見比べる。 */
.srclist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.srcit {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
.srcit.off {
  background: #f6f7f8;
}
.srcit .shot {
  position: relative;
  background: #eef1f2;
}
.srcit img,
.srcit .noimg {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #eef1f2;
}
.srcit .noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.72rem;
}
/* 外したものは写真だけ薄くする。チェックと値段は読めたままにしておく。 */
.srcit.off img,
.srcit.off .noimg {
  opacity: 0.3;
}
.srcit.off .bd {
  color: var(--muted);
}
/* チェックは写真の左上。白い縁を付けて、どんな写真の上でも見えるようにする。 */
.srcit .shot input {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #fff;
  accent-color: var(--accent-deep);
}
/* 写真を押すと会場の落札ページが開く。押せることが分かるように印を出す。 */
.srcit .shot.linked {
  cursor: zoom-in;
}
.srcit .shot.linked::after {
  content: "開く";
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
}
.srcit .rk {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.68rem;
}
.srcit .bd {
  padding: 8px 9px 9px;
}
.srcit .ttl {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 2.1em;
  font-size: 0.76rem;
  line-height: 1.4;
}
.srcit .yen {
  display: block;
  margin-top: 4px;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.srcit .meta {
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 2px;
}

/* 会場ごとの取れ高。件数がいつもより少ないことに気づけるように並べて出す。 */
.venues {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* 店頭査定用の会場リンク。現物を持ったまま片手で押せるよう、大きめの面で並べる。 */
.aucgrid {
  display: grid;
  /* スマホ(幅303pxの枠)でも2列に収まる幅。店頭で持ったまま見るので列を詰める。 */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.auclink {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--auc, var(--line));
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
}
.auclink:active {
  transform: translateY(1px);
}
.auclink .nm {
  font-size: 0.92rem;
  font-weight: 800;
}
.auclink .sb {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.samples {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  display: grid;
  gap: 3px;
}

/* ============ 日別・入力シート ============ */
dialog {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  margin: 0 auto;
  border: 0;
  border-radius: 26px 26px 0 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}
dialog::backdrop {
  background: rgba(17, 17, 17, 0.55);
}
.sheethd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.sheethd h2 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  flex: 1;
  min-width: 0;
}
.sheethd .x {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 1.1rem;
  color: var(--muted);
  cursor: pointer;
}
.sheetbd {
  padding: 14px 16px calc(20px + var(--safe-b));
  overflow-y: auto;
  max-height: calc(92vh - 60px);
  display: grid;
  gap: 12px;
}
.sheetbd h3 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* 日別シートの担当登録 */
.shiftbox {
  border: 0;
  border-radius: 18px;
  padding: 10px 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.shiftbox .st {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--st, var(--ink));
  margin-bottom: 4px;
}
.shiftrow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}
.shiftrow .lab {
  flex: 0 0 3.2em;
  font-size: 0.74rem;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border-radius: 6px;
  text-align: center;
  padding: 0.12rem 0;
}
.shiftrow .lab.late {
  background: var(--accent-deep);
}
.shiftrow .who {
  flex: 1;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
.staffchip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--ink);
}
.staffchip::after {
  content: "×";
  margin-left: 0.35rem;
  color: var(--muted);
  font-weight: 900;
}
.staffchip.add {
  border-style: dashed;
  border-color: var(--accent);
  color: var(--accent-deep);
  background: var(--accent-tint);
}
.staffchip.add::after {
  content: "";
}
.staffchip.none {
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 700;
  cursor: default;
}
.staffchip.none::after {
  content: "";
}

.login-wrap {
  max-width: 380px;
  margin: 14vh auto;
  padding: 0 16px;
}

[hidden] {
  display: none !important;
}