.ui-surface--decide, .decide{
  border:2px solid var(--role-go);background:var(--surface);
  border-radius:var(--r-lg);padding:14px}
.ui-surface--decide>.ttl, .decide .ttl{
  font-size:var(--fs-md);font-weight:600;color:var(--role-go);margin-bottom:var(--sp-2)}

.ui-surface--input{
  border:1.5px solid var(--role-neutral-line);background:var(--surface);
  border-radius:var(--r-lg);padding:14px}
.ui-surface--input>.ttl{
  font-size:var(--fs-md);font-weight:600;color:var(--text);margin-bottom:var(--sp-2)}

.ui-surface--read{
  border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-lg);padding:14px}
.ui-surface--read>.ttl{
  font-size:var(--fs-md);font-weight:600;color:var(--muted);margin-bottom:var(--sp-2)}

.ui-surface--mark{background:var(--gray-l);box-shadow:inset 3px 0 0 var(--role-go)}

.ui-req{margin-left:var(--sp-2);font-size:var(--fs-xs);font-weight:600;color:var(--role-go);
  white-space:nowrap;vertical-align:1px}
.ui-req--opt{color:var(--muted);font-weight:400}

.ui-btn,
.nextbtn, .hbtn,
.compare-popup-handoff, .compare-popup-fix, .popup-lines-all, .popup-line-btn,
.row-act, .bulk-handoff, .compare-handoff-btn, .compare-open,
.morebtn, .row-lines-more,
#stationPageControls button, .compare-col .rm, .compare-metric-remove, .badge.link{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;position:relative;
  border:1px solid transparent;border-radius:var(--r-md);
  min-height:36px;padding:var(--sp-2) 14px;
  font:inherit;font-size:var(--fs-md);font-weight:600;line-height:var(--lh-tight);
  white-space:nowrap;text-align:center;text-decoration:none;cursor:pointer;
  background:var(--surface);color:var(--text);
  transition:background .15s,border-color .15s,color .15s}

.ui-btn:focus-visible,
.nextbtn:focus-visible, .hbtn:focus-visible,
.compare-popup-handoff:focus-visible, .compare-popup-fix:focus-visible,
.popup-lines-all:focus-visible, .popup-line-btn:focus-visible,
.row-act:focus-visible, .bulk-handoff:focus-visible, .compare-handoff-btn:focus-visible,
.compare-open:focus-visible, .morebtn:focus-visible, .row-lines-more:focus-visible,
#stationPageControls button:focus-visible,
.compare-col .rm:focus-visible, .compare-metric-remove:focus-visible, .badge.link:focus-visible{
  outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}

.ui-btn{--btn-c:var(--role-neutral-line);--btn-ch:var(--line2);--btn-cw:var(--gray-l);--btn-tx:var(--text)}

.ui-btn--go, .ui-btn--go-line, .ui-btn--go-text,
.nextbtn, .hbtn.pri,
.compare-popup-handoff, .popup-line-handoff, .row-handoff, .bulk-handoff, .compare-handoff-btn,
.popup-lines-all, .morebtn{
  --btn-c:var(--role-go);--btn-ch:var(--role-go-hover);--btn-cw:var(--role-go-weak);--btn-tx:var(--role-go)}

.ui-btn--read, .ui-btn--read-line, .ui-btn--read-text,
.compare-open, .compare-popup-fix, .popup-line-cmp, .row-compare, .nextbtn.outline,
.row-lines-more{
  --btn-c:var(--role-read);--btn-ch:var(--role-read-hover);--btn-cw:var(--role-read-weak);--btn-tx:var(--role-read)}

.ui-btn--senpai, .ui-btn--senpai-line, .ui-btn--senpai-text{
  --btn-c:var(--role-senpai);--btn-ch:var(--role-senpai-hover);--btn-cw:var(--role-senpai-weak);
  --btn-tx:var(--good-d)}

.ui-btn--danger, .ui-btn--danger-line, .ui-btn--danger-text,
.compare-metric-remove{
  --btn-c:var(--role-danger);--btn-ch:var(--role-danger);--btn-cw:var(--role-danger-weak);
  --btn-tx:var(--role-danger)}

.ui-btn--go, .ui-btn--read,
.nextbtn, .hbtn.pri,
.compare-popup-handoff, .popup-line-handoff, .row-handoff, .compare-handoff-btn,
.compare-open{
  background:var(--btn-c);border-color:var(--btn-c);color:#fff}
.ui-btn--go:hover, .ui-btn--read:hover,
.nextbtn:hover, .hbtn.pri:hover,
.compare-popup-handoff:hover, .popup-line-handoff:hover, .row-handoff:hover,
.compare-handoff-btn:hover, .compare-open:hover{
  background:var(--btn-ch);border-color:var(--btn-ch);color:#fff}

.ui-btn--go-line, .ui-btn--read-line, .ui-btn--senpai-line, .ui-btn--danger-line,
.compare-popup-fix, .popup-line-cmp, .row-compare, .popup-lines-all, .bulk-handoff,
.nextbtn.outline{
  background:var(--surface);border-color:var(--btn-c);border-width:1.5px;color:var(--btn-tx)}
.ui-btn--go-line:hover, .ui-btn--read-line:hover, .ui-btn--senpai-line:hover, .ui-btn--danger-line:hover,
.compare-popup-fix:hover, .popup-line-cmp:hover, .row-compare:hover, .popup-lines-all:hover,
.bulk-handoff:hover, .nextbtn.outline:hover{
  background:var(--btn-cw);border-color:var(--btn-c);color:var(--btn-tx)}

.ui-btn--go-text, .ui-btn--read-text, .ui-btn--senpai-text, .ui-btn--danger-text,
.morebtn, .row-lines-more{
  background:none;border-color:transparent;color:var(--btn-tx);font-weight:600}
.ui-btn--go-text:hover, .ui-btn--read-text:hover, .ui-btn--senpai-text:hover, .ui-btn--danger-text:hover,
.morebtn:hover, .row-lines-more:hover{
  background:var(--btn-cw);color:var(--btn-tx)}

.ui-btn--neutral,
.hbtn, #stationPageControls button, .compare-col .rm, .badge.link{
  background:var(--surface);border-color:var(--role-neutral-line);color:var(--text);box-shadow:var(--sh-1)}
.ui-btn--neutral:hover,
.hbtn:hover, #stationPageControls button:hover:not(:disabled), .compare-col .rm:hover, .badge.link:hover{
  background:var(--gray-l);border-color:var(--line2);color:var(--text)}
.compare-metric-remove{background:var(--surface);border-color:var(--role-neutral-line);color:var(--muted)}
.compare-metric-remove:hover{background:var(--role-danger-weak);border-color:var(--role-danger);color:var(--role-danger)}

.ui-btn--lg,
.nextbtn{min-height:36px;padding:var(--sp-2) 20px;font-size:var(--fs-base);line-height:18px}
.ui-btn--lg::after, .nextbtn::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:var(--tap-min);pointer-events:auto}

.ui-btn--sm,
.popup-line-btn, .row-act, .bulk-handoff, .compare-handoff-btn,
#stationPageControls button, .compare-col .rm, .compare-metric-remove,
.row-lines-more, .badge.link{
  min-height:28px;padding:var(--sp-1) 10px;font-size:var(--fs-xs);border-radius:var(--r-sm)}
.ui-btn--sm,
.popup-line-btn, .row-act, .bulk-handoff, .compare-handoff-btn,
#stationPageControls button, .compare-col .rm, .compare-metric-remove,
.row-lines-more, .badge.link{position:relative}
.ui-btn--sm::after,
.popup-line-btn::after, .row-act::after, .compare-handoff-btn::after,
#stationPageControls button::after, .compare-col .rm::after, .compare-metric-remove::after,
.badge.link::after{
  content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:var(--tap-min);pointer-events:auto}

.ui-btn--block,
.compare-popup-handoff, .compare-popup-fix, .popup-lines-all, .compare-handoff-btn, .compare-open,
.route-card .nextbtn{width:100%}

.ui-btn.is-on,
#stationPageControls button.active,
.compare-popup-handoff.on, .popup-line-handoff.on, .row-handoff.on, .bulk-handoff.on,
.compare-handoff-btn.on, .compare-popup-fix.on, .popup-line-cmp.on, .row-compare.on,
.popup-lines-all.on{
  background:var(--btn-cw);border-color:var(--btn-c);color:var(--btn-tx)}
#stationPageControls button.active{background:var(--role-go);border-color:var(--role-go);color:#fff}
.ui-btn--read-line.is-on,
.compare-popup-fix.on, .popup-line-cmp.on, .row-compare.on{
  background:var(--role-read);border-color:var(--role-read);color:#fff}

.ui-btn.is-blocked, .bulk-handoff.is-blocked, .bulk-handoff.is-disabled{
  background:var(--gray-l);border-color:var(--line2);color:var(--hint);box-shadow:none}
.ui-btn.is-blocked:hover, .bulk-handoff.is-blocked:hover, .bulk-handoff.is-disabled:hover{
  background:var(--gray-l);border-color:var(--line2);color:var(--hint)}
.ui-btn:disabled, .compare-open:disabled, #stationPageControls button:disabled{
  background:var(--gray-l);border-color:var(--line2);color:var(--hint);
  box-shadow:none;cursor:not-allowed}


.ui-chip,
.pill, .compare-metric-choice, .pool-color-filter-btn, .row-line-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;position:relative;
  border:1px solid var(--role-neutral-line);border-radius:var(--r-full);
  min-height:28px;padding:var(--sp-1) 11px;
  font:inherit;font-size:var(--fs-sm);font-weight:500;line-height:var(--lh-tight);
  white-space:nowrap;cursor:pointer;
  background:var(--surface);color:var(--text);box-shadow:var(--sh-1);
  transition:background .15s,border-color .15s,color .15s}
.ui-chip:focus-visible,
.pill:focus-visible, .compare-metric-choice:focus-visible,
.pool-color-filter-btn:focus-visible, .row-line-chip:focus-visible{
  outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
.ui-chip::after,
.pill::after, .compare-metric-choice::after, .pool-color-filter-btn::after, .row-line-chip::after{
  content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:var(--tap-min);pointer-events:auto}

.ui-chip{--chip-c:var(--role-read);--chip-cw:var(--role-read-weak)}
.ui-chip--go{--chip-c:var(--role-go);--chip-cw:var(--role-go-weak)}
.ui-chip--senpai, .senpai-pill{--chip-c:var(--role-senpai);--chip-cw:var(--role-senpai-weak)}
.pill, .compare-metric-choice, .pool-color-filter-btn, .row-line-chip{
  --chip-c:var(--role-read);--chip-cw:var(--role-read-weak)}

.ui-chip:hover,
.pill:hover, .compare-metric-choice:hover, .pool-color-filter-btn:hover, .row-line-chip:hover{
  border-color:var(--chip-c);background:var(--chip-cw);color:var(--chip-c)}
.ui-chip.is-on,
.pill.on, .compare-metric-choice.on, .row-line-chip.on{
  background:var(--chip-c);border-color:var(--chip-c);color:#fff;box-shadow:none}
.senpai-pill{color:var(--good-d);font-weight:600;border-color:var(--role-senpai)}

.ui-chip--x,
.hpx, .focuschip{
  display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);background:var(--surface);
  border-radius:var(--r-full);padding:3px 10px;font:inherit;font-size:var(--fs-sm);cursor:pointer;
  color:var(--text)}
.ui-chip--x span, .hpx span{color:var(--hint);font-size:var(--fs-xs)}
.ui-chip--x:hover, .hpx:hover{border-color:var(--role-danger);color:var(--role-danger)}
.ui-chip--x:hover span, .hpx:hover span{color:var(--role-danger)}
.ui-chip--x:focus-visible, .hpx:focus-visible, .focuschip:focus-visible{
  outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
.ui-chip--clear, .hpx-clear{border-color:var(--role-danger);color:var(--role-danger);font-weight:600}
.ui-chip--clear:hover, .hpx-clear:hover{background:var(--role-danger-weak)}


.ui-seg, .sort-pills{
  display:inline-flex;background:var(--gray-l);border:1px solid var(--line2);
  border-radius:var(--r-md);padding:2px;gap:2px}
.ui-seg-item, .sort-pill{
  background:transparent;border:none;border-radius:var(--r-sm);
  min-height:28px;padding:var(--sp-1) 10px;
  font:inherit;font-size:var(--fs-sm);font-weight:500;line-height:var(--lh-tight);
  color:var(--muted);white-space:nowrap;cursor:pointer;
  transition:background .15s,color .15s}
.ui-seg-item:hover, .sort-pill:hover{color:var(--text);background:var(--surface)}
.ui-seg-item.is-on, .ui-seg-item.active, .sort-pill.active{
  background:var(--surface);color:var(--brand);font-weight:700;box-shadow:var(--sh-1)}
.ui-seg-item:focus-visible, .sort-pill:focus-visible{
  outline:var(--focus-width) solid var(--focus-color);outline-offset:-1px}


.ui-tag,
.badge, .tag, .src, .pref-tag, .time-tag, .route-badge, .opt-badge, .stepval,
.compare-trend-badge, .pool-drawer-tab-count, .row-senpai-badge{
  display:inline-flex;align-items:center;gap:3px;
  border:0;border-radius:var(--r-xs);padding:2px var(--sp-2);
  font-size:var(--fs-xs);font-weight:600;line-height:var(--lh-tight);
  white-space:nowrap;vertical-align:1px;
  background:var(--gray-l);color:var(--muted)}

.ui-tag--read, .badge, .src.g, .route-badge.a, .compare-trend-badge.better{
  background:var(--brand-l);color:var(--brand)}
.route-badge.b{background:transparent;color:var(--brand);padding-left:0}
.ui-tag--go, .stepval.is-on, .step.on .stepval{background:var(--accent-l);color:var(--accent)}
.ui-tag--senpai, .src.s, .tag.go, .compare-trend-badge.in{background:var(--good-l);color:var(--good-d)}
.ui-tag--mid, .tag.mid{background:var(--mid-l);color:var(--mid-d)}
.ui-tag--danger, .tag.over, .compare-trend-badge.over, .time-tag.tag-over{
  background:var(--red-l);color:var(--red)}
.ui-tag--best, .compare-trend-badge.better{background:var(--best-l);color:var(--best)}

.route-badge.recommend{background:var(--accent-l);color:var(--accent)}
.opt-badge{background:var(--gray-l);color:var(--muted)}
.row-senpai-badge{background:var(--good-l);color:var(--good-d);border-radius:var(--r-full)}
.pool-drawer-tab-count{background:var(--brand-l);color:var(--brand);border-radius:var(--r-full)}
.route-badge.muted{background:var(--gray-l);color:var(--muted)}


.ui-iconbtn,
.hp-close, .pool-remove, .compare-close, .station-detail-close, .focuschip .x{
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:28px;height:28px;flex:none;
  border:1px solid transparent;border-radius:var(--r-sm);background:none;
  font:inherit;font-size:var(--fs-md);line-height:1;color:var(--muted);cursor:pointer;padding:0;
  transition:background .15s,color .15s,border-color .15s}
.ui-iconbtn:hover,
.hp-close:hover, .pool-remove:hover, .compare-close:hover, .station-detail-close:hover{
  background:var(--gray-l);color:var(--text)}
.ui-iconbtn:focus-visible,
.hp-close:focus-visible, .pool-remove:focus-visible, .compare-close:focus-visible,
.station-detail-close:focus-visible, .focuschip .x:focus-visible{
  outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
.ui-iconbtn::after,
.hp-close::after, .pool-remove::after, .compare-close::after, .station-detail-close::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--tap-min);height:var(--tap-min)}
.ui-iconbtn--danger:hover, .pool-remove:hover, .focuschip .x:hover{
  background:var(--role-danger-weak);color:var(--role-danger)}
.ui-iconbtn--sm, .focuschip .x{width:20px;height:20px;font-size:var(--fs-sm);border-radius:var(--r-full)}
.ui-iconbtn--sm::after, .focuschip .x::after{content:none}
.ui-iconbtn--onsurface, .compare-close, .station-detail-close{
  background:var(--surface);border-color:var(--line2)}


.ui-help, .q, .help-btn{
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:18px;height:18px;flex:none;padding:0;margin-left:4px;
  border:1px solid var(--line-strong);border-radius:var(--r-full);
  background:var(--surface);color:var(--muted);
  font:inherit;font-size:var(--fs-xs);font-weight:700;line-height:1;
  cursor:pointer;vertical-align:1px;
  transition:background .15s,color .15s,border-color .15s}
.ui-help:hover, .q:hover, .help-btn:hover, .help-btn.active{
  border-color:var(--accent);background:var(--accent-l);color:var(--accent)}
.ui-help:focus-visible, .q:focus-visible, .help-btn:focus-visible{
  outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
.ui-help::after, .q::after, .help-btn::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--tap-min);height:var(--tap-min)}

.ui-popover, .pop, .help-popover{
  position:absolute;z-index:var(--z-popover);max-width:290px;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:var(--sp-3);font-size:var(--fs-sm);color:var(--text);display:none}
.ui-popover.is-open, .help-popover.visible{display:block;animation:uiPopIn .18s ease-out}
@keyframes uiPopIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ui-popover-title, .pop .pt, .help-popover h4{
  margin:0 0 var(--sp-1);font-size:var(--fs-md);font-weight:600;color:var(--brand)}
.ui-popover-body, .pop .px, .help-popover p{margin:0;color:var(--muted);line-height:var(--lh-base)}


.ui-input, .ui-select, .txtin, .ff-select, .linesearch input{
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  min-height:32px;padding:6px var(--sp-2);
  font:inherit;font-size:var(--fs-md);color:var(--text);background:var(--surface);
  box-shadow:var(--sh-1)}
.ui-select, .ff-select{cursor:pointer;padding-right:var(--sp-3)}
.ui-input:focus, .ui-select:focus, .txtin:focus, .ff-select:focus, .linesearch input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-l)}
.ui-input:focus-visible, .ui-select:focus-visible, .txtin:focus-visible,
.ff-select:focus-visible, .linesearch input:focus-visible{
  outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
.hpc-body .ui-select, .hpc-body select{
  border:1px solid var(--line-strong);border-radius:var(--r-sm);min-height:28px;
  padding:var(--sp-1) var(--sp-2);font:inherit;font-size:var(--fs-sm);
  color:var(--text);background:var(--surface);cursor:pointer}
.txtin{width:74px;text-align:right;font-size:var(--fs-base)}

.ui-ticks{position:relative;height:15px;font-size:var(--fs-xs);color:var(--hint)}
.ui-ticks span{position:absolute;white-space:nowrap}

.ui-figure{font-weight:600;font-size:var(--fs-2xl);line-height:1}
.ui-figure-unit{font-size:var(--fs-lg);font-weight:600}

.ui-range, input[type=range]{accent-color:var(--accent);width:160px}
.ui-range:focus-visible, input[type=range]:focus-visible{
  outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}

.ui-check, .chk{display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-md);cursor:pointer;position:relative}
.ui-check .mk, .chk .mk{width:16px;height:16px;flex:none;border-radius:var(--r-xs);
  border:1.5px solid var(--line-strong);background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;
  color:transparent;font-size:var(--fs-xs);transition:background .15s,border-color .15s}
.ui-check.is-on .mk, .chk.on .mk{background:var(--accent);border-color:var(--accent);color:#fff}
.ui-check:focus-visible, .chk:focus-visible, .rad:focus-visible, .mcard:focus-visible{
  outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset);
  border-radius:var(--r-xs)}
.ui-check .pc, .chk .pc{color:var(--hint);font-size:var(--fs-xs);margin-left:auto}

.ui-chip-check{border:1px solid var(--role-neutral-line);border-radius:var(--r-full);
  padding:var(--sp-1) 11px var(--sp-1) var(--sp-2);background:var(--surface);
  box-shadow:var(--sh-1);font-size:var(--fs-sm);
  transition:background .15s,border-color .15s}
.ui-chip-check.on{border-color:var(--role-read);background:var(--role-read-weak)}
.ui-chip-check.on .mk{background:var(--role-read);border-color:var(--role-read)}

.ui-radio, .rad{display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-md);cursor:pointer;user-select:none;position:relative}
.ui-radio .mk, .rad .mk{width:16px;height:16px;flex:none;border-radius:var(--r-full);
  border:1.5px solid var(--line-strong);background:var(--surface);position:relative;
  display:inline-flex;align-items:center;justify-content:center}
.ui-radio.is-on .mk, .rad.on .mk{border-color:var(--accent)}
.ui-radio.is-on .mk::after, .rad.on .mk::after{content:'';width:8px;height:8px;border-radius:var(--r-full);
  background:var(--accent);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.ui-radio .pc, .rad .pc{color:var(--hint);font-size:var(--fs-xs);margin-left:var(--sp-1);font-weight:600}


.ui-chart{position:relative}
.ui-chart-plot{position:relative;display:flex;align-items:flex-end;gap:var(--sp-2)}
.ui-chart-grid{position:absolute;left:0;right:0;border-top:1px solid var(--chart-grid)}
.ui-chart-grid--base{border-top-color:var(--line2)}
.ui-chart-tick{position:absolute;left:-30px;width:24px;text-align:right;
  font-size:var(--fs-xs);color:var(--chart-axis)}
.ui-chart-unit{position:absolute;left:-30px;top:-16px;font-size:var(--fs-xs);color:var(--chart-axis)}
.ui-chart-xlabels{display:flex;gap:var(--sp-2);margin-top:var(--sp-1)}
.ui-chart-xlabels>span{flex:1;text-align:center;font-size:var(--fs-xs);color:var(--muted)}
.ui-chart-slot{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  z-index:1}
.ui-chart-bars{display:flex;align-items:flex-end;gap:2px;width:100%;justify-content:center}
.ui-chart-bar{width:18px;max-width:24px;border-radius:var(--r-xs) var(--r-xs) 0 0;
  background:var(--chart-1);transition:height .2s,opacity .2s}
.ui-chart-bar--s2{background:var(--chart-2)}
.ui-chart-bar.is-off{background:var(--chart-off)}
.ui-chart-bar.is-muted{opacity:.25}
.ui-chart-bar--click{cursor:pointer}
.ui-chart-bar--click:hover{filter:brightness(1.08)}
.ui-chart-bar--click:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:2px}
.ui-chart-slot--click{cursor:pointer}
.ui-chart-slot--click:hover .ui-chart-bar{filter:brightness(1.08)}
.ui-chart-slot--click:focus-visible{outline:var(--focus-width) solid var(--focus-color);
  outline-offset:2px;border-radius:var(--r-xs)}
.ui-chart-ref{position:absolute;top:0;bottom:0;border-left:2px dashed var(--chart-you);
  z-index:2;transition:left .2s}
.ui-chart-ref-label{position:absolute;top:-16px;transform:translateX(-50%);
  font-size:var(--fs-xs);color:var(--chart-you);font-weight:600;white-space:nowrap;
  z-index:2;transition:left .2s}
.ui-chart-shade{position:absolute;top:0;bottom:0;left:0;background:var(--chart-shade);
  opacity:.55;z-index:0}
.ui-chart-legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  font-size:var(--fs-sm);color:var(--muted);margin-top:10px}
.ui-chart-legend-item{display:inline-flex;align-items:center;gap:5px}
.ui-chart-swatch{width:10px;height:10px;border-radius:2px;flex:none;background:var(--chart-1)}
.ui-chart-swatch--s2{background:var(--chart-2)}
.ui-chart-swatch--you{width:0;height:12px;border-radius:0;border-left:2px dashed var(--chart-you)}
.ui-chart-range{flex:1;display:flex;align-items:center;height:15px;position:relative;
  background:var(--surface);border-radius:var(--r-xs);border:1px solid var(--line2)}
.ui-chart-range-real{height:100%;background:var(--chart-1);border-radius:var(--r-xs) 0 0 var(--r-xs)}
.ui-chart-range-span{height:100%;background:var(--chart-2-weak);position:relative;
  border-right:2px solid var(--chart-2)}
.ui-chart-range-label{position:absolute;right:var(--sp-1);top:0;font-size:var(--fs-xs);
  color:var(--text);font-weight:700;line-height:15px;white-space:nowrap}
.ui-chart-rowlabel{width:78px;flex:none;font-size:var(--fs-xs);color:var(--muted);
  font-weight:600;text-align:right}

.ui-note, .note, .hint-note, .area-optional, .ff-note, .pool-empty{
  font-size:var(--fs-xs);color:var(--hint);line-height:var(--lh-base)}
.ui-note--read, .lab{font-size:var(--fs-sm);color:var(--muted)}
.ui-na{color:var(--hint)}
.ui-note--warn, .source-warn, .poi-filter-note{
  font-size:var(--fs-sm);color:var(--mid-d);line-height:var(--lh-base)}
.ui-note--warn, .source-warn{
  background:var(--mid-l);border:1px solid var(--mid-l);border-radius:var(--r-md);
  padding:7px 10px;margin:0 0 10px}

.bprog{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:10px}
.bprog .bprog-t{font-size:var(--fs-md);font-weight:600;color:var(--brand)}
.bprog .seg{display:flex;gap:var(--sp-1)}
.bprog .seg i{position:relative;width:36px;height:8px;border-radius:var(--r-full);background:var(--gray-l)}
.bprog .seg i.done,.bprog .seg i.cur,.bprog .seg i.xseg{cursor:pointer}
.bprog .seg i.done::after,.bprog .seg i.cur::after,.bprog .seg i.xseg::after{
  content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:var(--tap-min)}
.bprog .seg i.done:hover,.bprog .seg i.cur:hover{filter:brightness(1.15)}
.bprog .seg i:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:2px}
.bprog .seg i.done{background:var(--good)}
.bprog .seg i.cur{background:var(--accent)}
.bprog .bprog-now{font-size:var(--fs-sm);color:var(--muted)}
.bprog .seg i.xseg{background:none;border:1.5px dashed var(--line2);width:22px;cursor:pointer}
.bprog .seg i.xseg.on{background:var(--accent-l);border-color:var(--accent)}

.bstep{scroll-margin-top:var(--sp-3)}
.bstep>h3.bh{display:flex;align-items:center;gap:var(--sp-2);margin:0 calc(-1 * var(--sp-2));
  user-select:none;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);transition:background .15s}
.bstep .bnum{width:22px;height:22px;border-radius:var(--r-full);background:var(--gray-l);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:600;flex:none}
.bstep .bttl{color:var(--brand)}
.bstep .bsum{font-size:var(--fs-xs);color:var(--muted);font-weight:400;margin-left:auto;
  text-align:right;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bstep .bopen{font-size:var(--fs-xs);color:var(--hint);flex:none;white-space:nowrap;margin-left:auto}
.bstep .bsum+.bopen{margin-left:0}
.bstep.cur{border-color:var(--accent);outline:1px solid var(--accent);outline-offset:-2px}
.bstep.cur .bnum{background:var(--accent);color:#fff}
.bstep.done>h3.bh{cursor:pointer}
.bstep.done .bnum{background:var(--good);color:#fff}
.bstep.done>h3.bh:hover .bttl{color:var(--accent)}
.bstep.done>h3.bh:focus-visible{outline:var(--focus-width) solid var(--focus-color);
  outline-offset:var(--focus-offset)}
.bstep.locked{opacity:.45;pointer-events:none}
.bstep.locked .bbody{display:none}
.bstep.done.closed .bbody{display:none}
.bstep .bbody{margin-top:var(--sp-3)}
body.bstep-moving{overflow-anchor:none}
.bstep .suumo-table{margin-bottom:var(--sp-3)}

.ui-acc-head, aside .card.acc>h3,
.pane-list-note>summary, .compare-note-detail>summary{
  cursor:pointer;user-select:none;border-radius:var(--r-sm);
  padding:var(--sp-1) var(--sp-2);transition:background .15s}
.ui-acc-head, aside .card.acc>h3{
  margin-left:calc(-1 * var(--sp-2));margin-right:calc(-1 * var(--sp-2))}
.ui-acc-head:hover, aside .card.acc>h3:hover, .bstep.done>h3.bh:hover,
.pane-list-note>summary:hover, .compare-note-detail>summary:hover{background:var(--gray-l)}
.ui-acc-head:focus-visible, aside .card.acc>h3:focus-visible,
.pane-list-note>summary:focus-visible, .compare-note-detail>summary:focus-visible{
  outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
.ui-acc-head{display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);font-weight:600;color:var(--brand)}
aside .card.acc.closed:hover, .bstep.done.closed:hover{background:var(--gray-l)}
.ui-acc-box{border:1px solid var(--line);border-radius:var(--r-lg);margin-top:var(--sp-2);overflow:hidden}
.ui-acc-box>.ui-acc-head{margin:0;padding:var(--sp-2) var(--sp-3);border-radius:0}
.ui-acc-box>.ui-acc-body{padding:0 var(--sp-3) var(--sp-2)}
.ui-acc-box.ui-surface--mark>.ui-acc-head:hover{background:var(--line)}