/* 営業リスト自動作成の体験版。色は common/base.css のトークンだけを使う */
.sl { max-width: 1280px; margin: 0 auto; padding: 20px var(--gutter) 56px; }

/* 作業の流れ（1→2→3→4） */
.sl-steps { display: flex; align-items: center; gap: 8px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; width: fit-content; max-width: 100%; margin: 0 auto 22px; box-shadow: var(--shadow-s); }
.sl-steps button { display: flex; align-items: center; gap: 8px; padding: 7px 16px 7px 8px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.sl-steps button:disabled { cursor: default; opacity: .55; }
.sl-steps button:not(:disabled):hover { background: var(--sunken); color: var(--ink); }
.sl-steps .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); font-size: 13px; }
.sl-steps button[aria-current="step"] { background: var(--brand); color: #fff; }
.sl-steps button[aria-current="step"] .n { background: var(--accent); color: #fff; }
.sl-steps button.done .n { background: var(--ok-soft); color: var(--ok); }
.sl-steps-line { width: 16px; height: 2px; background: var(--line-2); flex: none; }

.scr-head { max-width: 780px; margin-bottom: 18px; }
.scr-head h2 { font-size: 24px; font-weight: 800; line-height: 1.4; }
.scr-lead { margin-top: 6px; color: var(--ink-2); line-height: 1.85; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 18px; min-width: 0; box-shadow: var(--shadow-s); }
.panel h3 { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.muted { color: var(--ink-3); font-size: 13px; line-height: 1.75; }
.btn-big { min-height: 50px; padding: 0 26px; font-size: 16px; border-radius: 12px; }
.scr-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.done-msg { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; max-width: 640px; }
.ex-note { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-2); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* 1. 集める */
.col-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.col-side, .col-main { display: grid; gap: 16px; min-width: 0; }
.kv { margin: 0; display: grid; gap: 10px; }
.kv > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: 13.5px; align-items: start; }
.kv dt { color: var(--ink-3); font-size: 12.5px; padding-top: 2px; }
.kv dd { margin: 0; }
.kv dd.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.kv .sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.robots { margin-top: 12px; border-top: 1px dashed var(--line-2); padding-top: 10px; font-size: 12.5px; }
.robots summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.robots pre { margin: 8px 0 6px; padding: 9px 11px; background: var(--paper); border-radius: var(--r-s); font: 12px/1.7 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.robots p { color: var(--ink-3); line-height: 1.7; }
.robots .dis, .pg-code .dis { color: var(--bad); }
.setup-btns { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.setup-btns .btn-big { flex: 1; min-width: 150px; }

.cnt { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cnt-i { padding: 8px 4px 7px; border-radius: var(--r-m); background: var(--paper); border: 1px solid var(--line); text-align: center; }
.cnt-i b { display: block; font-size: 21px; font-weight: 800; line-height: 1.2; }
.cnt-i span { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; line-height: 1.35; margin-top: 2px; }
.cnt-i.retries b { color: var(--warn); } .cnt-i.blocked b { color: var(--bad); }
.cnt-clock { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-2); }
.cnt-clock b { font-size: 20px; color: var(--ink); }

.live-panel { padding-bottom: 14px; scroll-margin-top: 10px; }
.live-head { display: flex; align-items: center; justify-content: space-between; }
.bw { border: 1px solid var(--line-2); border-radius: var(--r-m); overflow: hidden; background: var(--surface); }
.bw-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--sunken); border-bottom: 1px solid var(--line); }
.bw-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: none; }
.bw-url { margin-left: 6px; flex: 1; min-width: 0; padding: 3px 10px; background: var(--surface); border-radius: 999px; font: 12px/1.5 ui-monospace, Consolas, monospace; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-body { height: 300px; overflow: hidden; padding: 14px 16px; }
.bw-empty { color: var(--ink-3); font-size: 14px; display: grid; place-items: center; height: 100%; text-align: center; line-height: 1.8; padding: 0 12px; }
.bw.is-error .bw-bar, .bw.is-error .bw-body { background: var(--warn-soft); }
.bw.is-blocked .bw-bar, .bw.is-blocked .bw-body { background: var(--bad-soft); }
.bw-cap { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; min-height: 46px; }
.live-bar { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.live-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .12s linear; }
.pg-brand { font-size: 12px; font-weight: 800; color: var(--accent-deep); letter-spacing: .02em; padding-bottom: 8px; border-bottom: 2px solid var(--accent); margin-bottom: 10px; }
.pg-h { font-size: 17px; font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; line-height: 1.4; }
.pg-h small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.pg-code { margin: 0; padding: 10px 12px; background: var(--paper); border-radius: var(--r-s); font: 13px/1.8 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.pg-area { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pg-area b { min-width: 72px; }
.pg-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pg-card { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-m); min-width: 0; }
.pg-card.lock { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }
.pg-th { flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep); font-size: 9.5px; font-weight: 700; display: grid; place-items: center; text-align: center; line-height: 1.2; overflow: hidden; }
.pg-nm { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pg-tbl th, .pg-tbl td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; word-break: break-all; }
.pg-tbl th { width: 134px; background: var(--paper); font-weight: 700; font-size: 12.5px; word-break: normal; }
.mess { border-bottom: 2px dotted var(--warn); }
.nil { color: var(--ink-3); }
.pg-stop { height: 200px; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; color: var(--ink-2); }
.pg-stop .ico { width: 34px; height: 34px; }
.pg-stop b { font-size: 26px; font-weight: 800; }
.is-error .pg-stop { color: var(--warn); }
.is-blocked .pg-stop { color: var(--bad); }
.is-blocked .pg-stop b { font-size: 20px; }

.runlog { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow-y: auto; display: grid; align-content: start; gap: 2px; font-size: 13px; }
.runlog li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 5px 9px; border-radius: 6px; line-height: 1.55; }
.runlog li.empty { display: block; color: var(--ink-3); }
.runlog time { color: var(--ink-3); font-size: 12px; padding-top: 1px; }
.runlog li.warn { background: var(--warn-soft); color: var(--warn); }
.runlog li.err { background: var(--bad-soft); color: var(--bad); }

/* 2. そろえてまとめる */
.seg-wrap { margin-bottom: 14px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-s); max-width: 100%; }
.seg button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 22px; border-radius: 10px; font-weight: 700; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.seg button small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.seg button:hover { background: var(--sunken); }
.seg button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.seg button[aria-pressed="true"] small { color: var(--on-brand-2); }
.seg-note { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.75; max-width: 800px; min-height: 48px; }
.tidy-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.tidy-side { display: grid; gap: 16px; min-width: 0; }
.tbl-panel { padding: 0; overflow: hidden; }
.tbl-wrap { overflow: auto; max-height: 540px; }
.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.tbl th { position: sticky; top: 0; z-index: 2; background: var(--brand); color: #fff; font-weight: 700; text-align: left; padding: 8px 10px; white-space: nowrap; }
.tbl td { padding: 7px 10px; border-top: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.tbl-panel .tbl td { max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
.tbl td.chg { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.tbl tr.dup td, .tbl tr.mrg td { background: var(--accent-soft); }
.tbl tr.dup td.chg { background: var(--accent-soft); }
.tbl .gap { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: 11.5px; font-weight: 700; }
.tbl tr.dup .gap, .tbl tr.mrg .gap { background: var(--surface); }
.tbl .c-name { font-weight: 700; }
.tbl .chip { margin-left: 6px; height: 20px; font-size: 11px; }
.case { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 10px; font-size: 13px; }
.case p { line-height: 1.6; }
.case ul { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 3px; }
.case li { display: flex; gap: 10px; padding: 3px 8px; border-radius: 5px; background: var(--paper); font-size: 12.5px; }
.case li .id { color: var(--ink-3); flex: none; }
.case .why { color: var(--ink-2); font-size: 12.5px; }
.case-merged { background: var(--accent-soft); border-color: var(--line-2); }
.case-merged li { background: var(--surface); }
.fld { display: grid; gap: 4px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.fld input { width: 100%; min-width: 0; height: 42px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 400; }
.try-out { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-m); background: var(--ok-soft); }
.try-h { font-size: 12.5px; font-weight: 800; color: var(--ok); margin-bottom: 4px; }
.try-out dl { margin: 0; display: grid; gap: 3px; }
.try-out dl > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; font-size: 13.5px; }
.try-out dt { color: var(--ink-3); font-size: 12px; padding-top: 1px; }
.try-out dd { margin: 0; font-weight: 700; word-break: break-all; }
.try-out dd.bad { color: var(--bad); }
.try-out dd.nil { color: var(--ink-3); font-weight: 400; }

/* 3. 前回と比べる */
.cmp-top { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.cmp-run { display: grid; gap: 12px; }
.cmp-run .bw-cap { margin: 0; min-height: 22px; }
.cmp-reuse { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.cmp thead th { color: var(--ink-3); font-size: 12.5px; }
.cmp tbody th { text-align: left; font-weight: 600; color: var(--ink-2); }
.cmp td { font-weight: 700; }
.cmp td.now { color: var(--accent-deep); background: var(--accent-soft); }
.cmp td.nil { color: var(--ink-3); font-weight: 400; }
.diff-panel { margin-bottom: 16px; }
.diff-empty { padding: 18px 4px; }
.diff-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dt { padding: 10px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--paper); }
.dt b { display: block; font-size: 26px; font-weight: 800; line-height: 1.2; }
.dt span { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.dt.k-0 b { color: var(--ok); } .dt.k-1 b { color: var(--ink-3); } .dt.k-2 b { color: var(--warn); } .dt.k-3 b { color: var(--bad); }
.diff-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.diff-rows li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border-radius: var(--r-m); border: 1px solid var(--line); }
.diff-rows li .chip { justify-content: center; }
.diff-rows li b { font-size: 14.5px; }
.diff-rows .sub { margin-left: 8px; font-size: 12.5px; color: var(--ink-3); }
.diff-rows p { margin-top: 2px; font-size: 13.5px; color: var(--ink-2); line-height: 1.65; word-break: break-all; }
.diff-rows .arr { color: var(--accent-deep); font-weight: 800; }
.diff-rows li.k-0 .chip { background: var(--ok-soft); color: var(--ok); }
.diff-rows li.k-1 .chip { background: var(--sunken); color: var(--ink-2); }
.diff-rows li.k-2 .chip { background: var(--warn-soft); color: var(--warn); }
.diff-rows li.k-3 .chip { background: var(--bad-soft); color: var(--bad); }
.notify { margin: 0; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); font: 13px/1.8 ui-monospace, Consolas, "Yu Gothic UI", monospace; white-space: pre-wrap; word-break: break-all; }

/* 4. Excelに出す */
.ex-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; box-shadow: var(--shadow-s); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile { padding: 12px 14px; border-radius: var(--r-m); background: var(--paper); border: 1px solid var(--line); }
.tile b { display: block; font-size: 26px; line-height: 1.2; font-weight: 800; }
.tile span { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.tile.ok b { color: var(--ok); } .tile.warn b { color: var(--warn); } .tile.brand b { color: var(--brand-2); } .tile.none b { color: var(--ink-2); }
.ex-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sheet { margin-top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-s); }
.sheet-bar { display: flex; gap: 2px; padding: 8px 10px 0; background: var(--sunken); overflow-x: auto; }
.sheet-bar button { padding: 8px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); border-radius: 8px 8px 0 0; white-space: nowrap; }
.sheet-bar button[aria-selected="true"] { background: var(--surface); color: var(--ok); box-shadow: inset 0 3px 0 var(--ok); }
.sheet-bar button:not([aria-selected="true"]):hover { background: var(--line); }
.sheet-tools { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip { height: 32px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface); }
.fchip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.sheet-tools input { flex: 1; min-width: 180px; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 16px; background: var(--surface); }
.sheet-count { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.sheet-note { margin: 0; padding: 8px 14px 0; }
.sheet-wrap { max-height: 520px; margin-top: 8px; }
.sheet-tbl th { background: #1f3a5f; }
.sheet-tbl td { font-size: 12.5px; }
.sheet-tbl td.wrap { white-space: normal; min-width: 260px; max-width: 460px; }
.sheet-tbl th.rowh { position: static; background: var(--paper); color: var(--ink); width: 220px; }
.sheet-tbl tr:nth-child(even) td { background: var(--paper); }
.sheet-tbl td.c-new { background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.sheet-tbl td.c-chg { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.sheet-tbl td.c-end { background: var(--sunken); color: var(--ink-2); font-weight: 700; }
.sheet-tbl td.c-gap { background: var(--accent-soft); color: var(--accent-deep); }
.sheet-tbl td.c-warn { background: var(--bad-soft); color: var(--bad); }
.sheet-tbl tr.warnrow td { background: var(--warn-soft); }
.sheet-tbl td.empty-cell { text-align: center; padding: 30px; color: var(--ink-3); }

@media (max-width: 1100px) {
  .col-grid, .cmp-top { grid-template-columns: minmax(0, 1fr); }
  .tidy-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sl { padding-top: 14px; }
  .sl-steps { gap: 2px; padding: 4px; width: 100%; justify-content: space-between; margin-bottom: 18px; }
  .sl-steps button { flex-direction: column; gap: 2px; padding: 5px 2px; font-size: 11px; flex: 1; border-radius: 14px; white-space: normal; text-align: center; line-height: 1.3; }
  .sl-steps-line { width: 6px; }
  .scr-head h2 { font-size: 20px; }
  .scr-lead { font-size: 14px; line-height: 1.8; }
  .panel { padding: 14px; border-radius: var(--r-m); }
  .btn-big { width: 100%; }
  .scr-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .kv > div { grid-template-columns: 78px minmax(0, 1fr); }
  .cnt { gap: 4px; }
  .cnt-i b { font-size: 18px; }
  .cnt-i span { font-size: 10.5px; }
  .bw-body { height: 270px; padding: 12px; }
  .pg-cards { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pg-cards .pg-card:nth-child(n+5) { display: none; }
  .pg-tbl th { width: 104px; }
  .pg-stop { height: 170px; }
  .runlog { max-height: 190px; }
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1; padding: 7px 4px; font-size: 13.5px; min-width: 0; }
  .seg-note { font-size: 13px; min-height: 66px; }
  .tbl-wrap { max-height: 420px; }
  .tbl td { padding: 6px 8px; }
  .tbl th { padding: 7px 8px; }
  .tbl .c-name { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
  .tbl th:first-child { z-index: 3; left: 0; }
  .tbl tr.dup .c-name, .tbl tr.mrg .c-name { background: var(--accent-soft); }
  .diff-rows li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .diff-rows li .chip { justify-self: start; }
  .ex-box { padding: 14px; }
  .tile b { font-size: 22px; }
  .ex-btns .btn { width: 100%; }
  .sheet-tools input { min-width: 0; width: 100%; flex: none; }
}

/* 押せない条件（エリア・業種）は、ボタンに見えない文字で出す */
.kv dd.plain-list { color: var(--ink-2); font-weight: 600; }
.fixed-note { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.run2-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.run2-btns .btn-big { flex: 1; min-width: 200px; }
@media (max-width: 640px) { .run2-btns .btn-ghost { width: 100%; } }