/* ===== Tokens ===== */
:root {
  --orange: #ff7a1a;
  --orange-strong: #ef6400;
  --orange-soft: #fff2e8;
  --orange-glow: rgba(255, 122, 26, .22);
  --sky: #38bdf8;
  --sky-strong: #0ea5e9;
  --sky-deep: #0369a1;
  --sky-soft: #e9f6fe;
  --bg: #f2f6fa;
  --surface: #fff;
  --surface-2: #f6f9fc;
  --line: #e4ebf2;
  --line-strong: #d3dde7;
  --text: #0e1a2b;
  --text-2: #3a4a5f;
  --muted: #7b8ba0;
  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 9px;
  --sh-1: 0 1px 2px rgba(14, 26, 43, .05);
  --sh-2: 0 1px 2px rgba(14, 26, 43, .04), 0 8px 24px rgba(14, 26, 43, .06);
  --sh-3: 0 30px 80px rgba(14, 26, 43, .20), 0 6px 18px rgba(14, 26, 43, .08);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --sb-w: 264px;
  --row-h: 52px;
  --font: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(56, 189, 248, .14), transparent 60%),
    radial-gradient(700px 360px at 20% -15%, rgba(255, 122, 26, .10), transparent 60%),
    var(--bg);
  display: flex;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input { font: inherit; color: inherit; }
.num, .tnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--sky-strong); outline-offset: 2px; }

/* ===== Sidebar ===== */
.sb {
  width: var(--sb-w);
  flex: none;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 16px 16px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; }
.brand-logo { width: 42px; height: 42px; border-radius: 13px; box-shadow: 0 6px 16px var(--orange-glow); }
.brand-text b { display: block; font-size: 17px; letter-spacing: .03em; }
.brand-text span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.nav { position: relative; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.nav-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--muted); padding: 16px 12px 6px; }
.nav-ind {
  position: absolute; left: 0; right: 0; top: 0; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--orange) 0%, #ff9a4d 100%);
  box-shadow: 0 8px 22px var(--orange-glow);
  transition: transform .42s var(--ease), height .42s var(--ease), opacity .2s;
  pointer-events: none;
}
.nav-item {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 8px;
  height: 52px; padding: 0 12px; border-radius: 14px; text-align: left;
  transition: background .2s, color .25s;
}
.nav-item:hover:not(.is-active) { background: var(--surface-2); }
.nav-item b { display: block; font-size: 13.5px; font-weight: 600; }
.nav-item small { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; transition: color .25s; }
.ni-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mk); margin-left: 4px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk) 18%, transparent); }
.ni-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ni-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .25s; }
.ni-badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px;
  color: var(--sky-deep); background: var(--sky-soft); transition: background .25s, color .25s;
}
.ni-pill {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: #fff; background: var(--sky-strong);
}
.ni-pill:empty, .ni-pill[data-n="0"] { background: var(--line); color: var(--muted); }
.nav-item.is-active { color: #fff; }
.nav-item.is-active small, .nav-item.is-active .ni-count { color: rgba(255, 255, 255, .85); }
.nav-item.is-active .ni-badge { background: rgba(255, 255, 255, .25); color: #fff; }
.nav-item.is-active .ni-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
.sb-foot { font-size: 11px; color: var(--muted); line-height: 1.7; padding: 14px 10px 0; border-top: 1px solid var(--line); }
.sb-foot b { color: var(--text-2); font-weight: 600; }
.contact-email { user-select: all; overflow-wrap: anywhere; }
.compact-contact { display: none; }
.mock-tag { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 99px; background: var(--orange-soft); color: var(--orange-strong); font-weight: 600; }

/* ===== Main ===== */
.main { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; padding: 26px 28px 0; }
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.top h1 { margin: 0; font-size: 26px; letter-spacing: .01em; display: flex; align-items: center; gap: 10px; }
.top h1 .h-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mk); }
.top h1 .h-badge { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--sky-soft); color: var(--sky-deep); }
.top p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.units { display: flex; gap: 14px; align-items: center; }
.seg-wrap { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.seg { position: relative; display: flex; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; box-shadow: var(--sh-1); }
.seg button { position: relative; z-index: 1; height: 28px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--text-2); transition: color .25s; }
.seg button.on { color: #fff; }
.seg-thumb { position: absolute; top: 3px; bottom: 3px; border-radius: 99px; background: var(--sky-strong); box-shadow: 0 4px 12px rgba(14, 165, 233, .3); transition: left .35s var(--ease), width .35s var(--ease); }

.search { position: relative; margin-top: 20px; }
.search input {
  width: 100%; height: 54px; padding: 0 56px 0 52px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--sh-2); font-size: 15px; outline: none;
  transition: border-color .2s, box-shadow .25s;
}
.search input:focus { border-color: var(--orange); box-shadow: 0 0 0 5px var(--orange-glow), var(--sh-2); }
.search input::placeholder { color: #9aa8b8; }
.search-ic { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input:focus ~ kbd, .search input:not(:placeholder-shown) ~ kbd { opacity: 0; }
.search kbd { transition: opacity .2s; }
.search kbd { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 600 12px var(--font); color: var(--muted); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 7px; padding: 2px 8px; background: var(--surface-2); }

.filters { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.filter-toggles { display: none; }
.filter-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px;
  border-radius: 99px; border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text-2); transition: background .2s, border-color .2s, color .2s;
}
.filter-toggle.on { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-strong); }
.filter-toggle[aria-expanded="true"] { background: var(--sky-soft); border-color: var(--sky); color: var(--sky-deep); }
.filter-toggle b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--orange-strong); color: #fff; font-size: 11px; }
.filter-toggle[aria-expanded="true"] b { background: var(--sky-deep); }
.filter-toggle b:empty { display: none; }
.filter-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.filter-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.chip-heading { display: flex; align-items: center; justify-content: space-between; min-height: 28px; gap: 8px; font-size: 12px; color: var(--muted); }
.chip-heading .link-btn { padding: 4px 8px; }
.chips {
  position: relative; display: flex; flex-wrap: wrap; gap: 8px; padding: 4px;
  max-height: 80px; overflow: hidden;
}
.chips.expanded { max-height: min(30vh, 240px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; overscroll-behavior: contain; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px;
  border-radius: 99px; border: 1px solid var(--line); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--text-2); max-width: 100%; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.chip:hover { border-color: var(--line-strong); }
.chip:active { transform: scale(.95); }
.chip small { font-weight: 500; color: var(--muted); font-size: 11px; }
.chip .c-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mk); }
.chip.on { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-strong); }
.chip.on small { color: var(--orange-strong); }

.ranges { display: flex; gap: 8px; flex-wrap: wrap; }
.range {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 11px 0 13px;
  border-radius: 99px; border: 1px solid var(--line); background: var(--surface);
  font-size: 12.5px; color: var(--muted); transition: border-color .2s, background .2s;
}
.range b { color: var(--text-2); font-weight: 600; margin-right: 2px; }
.range .pm { font-weight: 700; color: var(--text-2); }
.range input[data-pct] { width: 38px; }
.range input { width: 50px; height: 26px; border: 0; border-radius: 8px; background: var(--surface-2); text-align: center; outline: none; font-variant-numeric: tabular-nums; transition: background .2s, box-shadow .2s; }
.range input:focus { background: #fff; box-shadow: 0 0 0 2px var(--sky); }
.range.on { border-color: var(--sky); background: var(--sky-soft); }
.range.on input { background: #fff; }

/* ===== Results ===== */
.results {
  flex: 1; min-height: 0; margin-top: 14px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sh-2); overflow: hidden;
}
.results-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.results-head b { font-size: 18px; color: var(--text); margin-right: 4px; font-variant-numeric: tabular-nums; }
.rh-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.excl { padding: 2px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.excl:empty, .af-list:empty { display: none; }
.af-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.af {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 11px; border-radius: 99px;
  background: var(--sky-soft); color: var(--sky-deep); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  animation: fadeUp .3s var(--ease) both; transition: background .2s;
}
.af:hover { background: #d6eefd; }
.af svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; opacity: .7; }
.link-btn { font-size: 12.5px; font-weight: 600; color: var(--orange-strong); padding: 6px 12px; border-radius: 99px; transition: background .2s; }
.link-btn:hover { background: var(--orange-soft); }

.tbl { flex: 1; min-height: 0; overflow: auto; position: relative; }
.thead, .row { display: grid; grid-template-columns: var(--cols); align-items: center; min-width: var(--minw); width: 100%; }
.thead {
  position: sticky; top: 0; z-index: 2; height: 48px; padding: 0 10px;
  background: rgba(246, 249, 252, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.th {
  display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 8px;
  font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; text-align: left;
  transition: color .2s;
}
.th.n { justify-content: flex-end; text-align: right; }
.th .lb { display: flex; flex-direction: column; line-height: 1.25; white-space: normal; word-break: keep-all; }
.th small { font-weight: 500; font-size: 10.5px; opacity: .8; }
.th:hover { color: var(--text-2); }
.th .arr { width: 10px; opacity: 0; transition: opacity .2s, transform .25s var(--ease); }
.th.sorted { color: var(--orange-strong); }
.th.sorted .arr { opacity: 1; }
.th.desc .arr { transform: rotate(180deg); }
.tbody { position: relative; }
.row {
  position: absolute; left: 0; right: 0; height: var(--row-h); padding: 0 10px;
  border-bottom: 1px solid #eef3f7; cursor: pointer; outline: none;
  transition: background .18s;
}
.row::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--orange); transform: scaleY(0); transition: transform .25s var(--ease);
}
.row:hover, .row:focus-visible { background: linear-gradient(90deg, var(--orange-soft), rgba(255, 242, 232, 0) 70%); }
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); }
.row.in { animation: rowIn .45s var(--ease) both; animation-delay: var(--d); }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } }
.td { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td.n { text-align: right; font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--text-2); }
.td.model { font-weight: 600; font-size: 14px; }
.na { color: #c3cdd8; }
.tag-mk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.tag-mk i { width: 8px; height: 8px; border-radius: 50%; background: var(--mk); }
.tag-s { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 2px 9px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); }
.add {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; margin-left: auto;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--spring);
}
.add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.add:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: scale(1.08); }
.add.on { background: var(--sky-soft); border-color: var(--sky); color: var(--sky-deep); }
.empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted); text-align: center; animation: fadeUp .4s var(--ease) both; }
.empty svg { width: 64px; height: 64px; fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.empty b { color: var(--text-2); font-size: 15px; }

/* ===== Card stack ===== */
.scrim {
  position: fixed; inset: 0; z-index: 20; background: rgba(14, 26, 43, .26); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
.scrim.on { opacity: 1; pointer-events: auto; }
/* 閉じるときはカードの退場と同じ速度で背景を戻す（背景が先に鮮明になるとカードが沈んで見える） */
.scrim:not(.on) { transition-duration: .34s; transition-timing-function: cubic-bezier(.4, 0, 1, 1); }
.card {
  position: fixed; z-index: 30; top: 14px; right: 14px; bottom: 14px; width: var(--w, 620px); max-width: calc(100vw - 28px);
  display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-3);
  overflow: hidden; transform: translateX(calc(100% + 40px)); transform-origin: right center;
  transition: transform .52s var(--ease), filter .35s, width .45s var(--ease);
}
.card.is-in[data-depth="0"] { transform: none; }
.card.is-in[data-depth="1"] { transform: translateX(-44px) scale(.96); filter: brightness(.97); }
.card.is-in[data-depth="2"] { transform: translateX(-88px) scale(.92); filter: brightness(.94); }
.card.is-out { transform: translateX(calc(100% + 40px)); transition-duration: .34s; transition-timing-function: cubic-bezier(.4, 0, 1, 1); }
.card-cover { position: absolute; inset: 0; z-index: 5; display: none; cursor: pointer; background: rgba(255, 255, 255, .25); }
.card[data-depth="1"] .card-cover, .card[data-depth="2"] .card-cover { display: block; }
.card-head {
  flex: none; padding: 20px 24px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mk, var(--orange)) 11%, #fff), #fff 90%);
}
.ch-row { display: flex; align-items: center; gap: 8px; }
.ch-row .sp { flex: 1; }
.mk-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 99px; background: var(--mk); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.base-badge { height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 99px; background: var(--sky-soft); color: var(--sky-deep); font-size: 11.5px; font-weight: 700; }
.x-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(14, 26, 43, .05); transition: background .2s, transform .35s var(--ease); }
.x-btn:hover { background: rgba(14, 26, 43, .1); transform: rotate(90deg); }
.x-btn svg { width: 16px; height: 16px; stroke: var(--text-2); stroke-width: 2.2; stroke-linecap: round; }
.card-head h2 { margin: 12px 0 4px; font-size: 24px; letter-spacing: .01em; }
.card-head .sub { margin: 0; color: var(--muted); font-size: 13px; }
.ch-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn {
  height: 38px; padding: 0 16px; border-radius: 99px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; border: 1px solid var(--line); background: var(--surface);
  transition: background .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.btn:active { transform: scale(.96); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { border-color: var(--line-strong); }
.btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 6px 16px var(--orange-glow); }
.btn.primary:hover { background: var(--orange-strong); }
.btn.sky { background: var(--sky-soft); border-color: transparent; color: var(--sky-deep); }
.btn.sky:hover { background: #d9effd; }
.btn.done { background: var(--sky-soft); border-color: var(--sky); color: var(--sky-deep); box-shadow: none; }
.card-body { flex: 1; overflow-y: auto; padding: 20px 24px 28px; }
.card-body > * { animation: fadeUp .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 140ms); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }
.card.still .card-body > * { animation: none; }
.card.still .chart .line { animation: none; stroke-dashoffset: 0; }
.card.still .chart .area { animation: none; opacity: 1; }
.sec { margin-top: 24px; }
.sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13.5px; }
.sec h3::before { content: ""; width: 6px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, var(--orange), var(--sky)); }
.sec h3 small { font-weight: 500; color: var(--muted); font-size: 11.5px; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { padding: 12px 13px; border-radius: 14px; background: var(--surface-2); border: 1px solid #edf2f7; }
.tile span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.tile b { display: block; margin-top: 4px; font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tile b small { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.tile.hl { background: var(--orange-soft); border-color: #ffe0c7; }
.cond { margin-top: 12px; display: flex; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--sky-soft); color: var(--sky-deep); font-size: 12.5px; line-height: 1.6; }
.cond svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; }

.dim { border-radius: 16px; border: 1px solid var(--line); background: #fff; padding: 14px; display: grid; place-items: center; min-height: 160px; }
.dim img { max-width: 100%; max-height: 300px; }
.dim .err { color: var(--muted); font-size: 12.5px; text-align: center; }

.chart { position: relative; border-radius: 16px; border: 1px solid var(--line); padding: 10px 6px 4px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: #eef3f7; }
.chart .axis text { fill: var(--muted); font-size: 10.5px; font-family: var(--font); }
.chart .line { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.1s .35s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart .area { opacity: 0; animation: fadeIn .8s .7s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.chart .hover-dot { fill: #fff; stroke: var(--orange); stroke-width: 2.5; opacity: 0; transition: opacity .15s; }
.chart .hover-line { stroke: var(--sky); stroke-dasharray: 3 3; opacity: 0; }
.chart.hot .hover-dot, .chart.hot .hover-line { opacity: 1; }
.chart-tip { position: absolute; pointer-events: none; padding: 6px 10px; border-radius: 9px; background: var(--text); color: #fff; font-size: 11.5px; white-space: nowrap; opacity: 0; transform: translate(-50%, -120%); transition: opacity .15s; }
.chart.hot .chart-tip { opacity: 1; }
.chart-cap { font-size: 11.5px; color: var(--muted); margin: 6px 4px 2px; }

.cands { display: flex; flex-direction: column; gap: 8px; }
.cand {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; text-align: left;
  padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff;
  transition: border-color .2s, box-shadow .25s, transform .25s var(--ease);
}
.cand:hover { border-color: #ffd2b0; box-shadow: 0 8px 22px rgba(255, 122, 26, .12); transform: translateY(-1px); }
.cand .rank { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; background: var(--orange-soft); color: var(--orange-strong); }
.cand .rank.mk { background: color-mix(in srgb, var(--mk) 14%, #fff); color: var(--mk); }
.cand b { font-size: 13.5px; }
.cand small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.cand .go { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; transition: transform .25s var(--ease), stroke .2s; }
.cand:hover .go { transform: translateX(3px); stroke: var(--orange); }
.dchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.dchip { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dchip.up { background: var(--orange-soft); color: var(--orange-strong); }
.dchip.down { background: var(--sky-soft); color: var(--sky-deep); }
.note { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin: 10px 2px 0; }
.none { padding: 14px; border-radius: 14px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; }

.specs { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.specs details + details { border-top: 1px solid var(--line); }
.specs summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 600; font-size: 13px; cursor: pointer; background: var(--surface-2); }
.specs summary::-webkit-details-marker { display: none; }
.specs summary svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2.4; transition: transform .3s var(--ease); }
.specs details[open] summary svg { transform: rotate(180deg); }
.kv { display: grid; grid-template-columns: 150px 1fr; }
.kv dt, .kv dd { margin: 0; padding: 9px 16px; border-top: 1px solid #f0f4f8; font-size: 12.5px; line-height: 1.55; }
.kv dt { color: var(--muted); }
.kv dd { color: var(--text); font-variant-numeric: tabular-nums; }
.kv dd small { margin-left: 3px; color: var(--muted); }
.src { margin-top: 18px; font-size: 11.5px; color: var(--muted); }

/* ===== Compare ===== */
.cmp-tools { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; user-select: none; }
.toggle input { display: none; }
.toggle i { width: 36px; height: 21px; border-radius: 99px; background: var(--line-strong); position: relative; transition: background .25s; }
.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform .3s var(--spring); }
.toggle input:checked + i { background: var(--sky-strong); }
.toggle input:checked + i::after { transform: translateX(15px); }
.temp-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 12px 9px 14px; border-radius: 12px; background: var(--orange-soft); color: var(--orange-strong); font-size: 12.5px; font-weight: 600; }
.temp-bar .sp { flex: 1; }
.cmp-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 16px; }
.cmp { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-size: 13px; }
.cmp thead th:first-child { width: 150px; }
.base-badge, .mini, .mk-badge { white-space: nowrap; flex: none; }
.cmp th, .cmp td { padding: 10px 14px; border-bottom: 1px solid #eef3f7; text-align: left; vertical-align: top; }
.cmp thead th { position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid var(--line); width: 210px; }
.cmp tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-wrap .cmp { min-width: max-content; }
.cmp thead th:first-child { left: 0; z-index: 3; background: var(--surface-2); }
.cmp tr.grp th { background: #fff; color: var(--text); font-weight: 700; font-size: 12px; padding-top: 14px; letter-spacing: .04em; }
.cmp tr.grp td { background: #fff; }
.cmp td.base { background: color-mix(in srgb, var(--orange) 5%, #fff); }
.cmp td.diff-t { background: var(--sky-soft); }
.cmp .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp .v small { font-weight: 500; color: var(--muted); margin-left: 2px; font-size: 11px; }
.cmp .t { font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cmp .dchip { display: inline-block; margin-top: 4px; }
.colh { display: flex; flex-direction: column; gap: 6px; }
.colh-top { display: flex; align-items: center; gap: 6px; }
.colh-top .sp { flex: 1; }
.colh .mk-badge { height: 22px; font-size: 11px; padding: 0 9px; }
.colh .model { font-size: 14px; font-weight: 700; text-align: left; transition: color .2s; }
.colh .model:hover { color: var(--orange-strong); }
.colh small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.mini { font-size: 11px; font-weight: 600; color: var(--sky-deep); padding: 3px 9px; border-radius: 99px; background: var(--sky-soft); transition: background .2s; }
.mini:hover { background: #d9effd; }
.mini-x { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: background .2s; }
.mini-x:hover { background: var(--surface-2); color: var(--text); }
.mini-x svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.hide-same tr.same { display: none; }
.print-only { display: none; }
.print-btn { height: 32px; padding: 0 14px; font-size: 12.5px; }

/* ===== Tray / toast / fly ===== */
.tray {
  position: fixed; z-index: 15; bottom: 22px; left: calc(var(--sb-w) + (100vw - var(--sb-w)) / 2);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; width: max-content;
  max-width: calc(100vw - var(--sb-w) - 32px);
  border-radius: 99px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px);
  border: 1px solid var(--line); box-shadow: var(--sh-3);
  transform: translate(-50%, calc(100% + 60px)); transition: transform .55s var(--spring);
}
.tray.show { transform: translate(-50%, 0); }
/* Keep the scroll viewport above the tray; padding inside .tbl can hide its last row under the header. */
body:has(.tray.show) .main { height: calc(100vh - 84px); }
.tray.pop { animation: pop .45s var(--spring); }
@keyframes pop { 40% { transform: translate(-50%, 0) scale(1.06); } }
.tray-items { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.tray-item { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 99px; background: var(--surface-2); font-size: 12px; font-weight: 600; max-width: 150px; animation: fadeUp .35s var(--ease) both; }
.tray-item i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mk); }
.tray-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray .btn { height: 36px; }
.tray .btn, .tray-clear { flex: none; }
.tray-clear { font-size: 12px; color: var(--muted); padding: 0 8px; }
.tray-clear:hover { color: var(--text); }
.fly { position: fixed; z-index: 60; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; box-shadow: 0 4px 12px rgba(14, 26, 43, .25); }
.toast {
  position: fixed; z-index: 70; top: 20px; left: 50%; padding: 10px 18px; border-radius: 99px;
  background: var(--text); color: #fff; font-size: 13px; font-weight: 500; box-shadow: var(--sh-3);
  transform: translate(-50%, -150%); opacity: 0; transition: transform .45s var(--spring), opacity .3s;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }

/* ===== Narrow screens ===== */
@media (max-width: 1080px) {
  :root { --sb-w: 76px; }
  .brand-text, .nav-item .ni-main, .nav-item .ni-count, .nav-item .ni-badge, .nav-label, .sb-foot { display: none; }
  .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .main { padding: 20px 18px 0; }
  .top { flex-wrap: wrap; align-items: flex-start; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .tray { left: 50%; bottom: 12px; max-width: calc(100vw - 24px); gap: 8px; padding: 8px; }
  .tray .btn { padding: 0 12px; }
  .tray-clear { padding: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* Production specifications and accessible navigation */
.brand-logo { object-fit: contain; background: #fff; border-radius: 5px; box-shadow: none; }
.header-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.share-btn { height: 34px; font-size: 12px; }
#boot { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 16px; background: #f2f6fa; padding: 24px; text-align: center; }
.value-legend { font-size: 11px; color: var(--muted); margin: 10px 20px 0; }
.value-state { display: inline-block; font-size: 10px; font-weight: 600; line-height: 1.5; padding: 0 4px; border-radius: 4px; margin-left: 3px; vertical-align: middle; }
.value-state.converted { background: var(--sky-soft); color: var(--sky-deep); }
.value-state.review { background: #fff0d7; color: #8b4a00; }
.td .value-state.review { font-size: 0; }
.td .value-state.review::after { content: '!'; font-size: 10px; }
.class-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.class-tags span { padding: 2px 8px; border: 1px solid var(--line); background: white; border-radius: 99px; color: var(--text-2); font-size: 11px; }
.candidate-warning { color: #805000 !important; background: #fff7e7; padding: 4px 8px; border-radius: 6px; font-size: 12px; }
.sec h4 { font-size: 12px; margin: 14px 0 8px; color: var(--text-2); }
.cand > svg { width: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.source-box p { line-height: 1.7; margin: 6px 0; }
.source-links { display: flex; flex-wrap: wrap; gap: 12px; }
.source-links a, .sb-foot a { color: var(--sky-deep); text-underline-offset: 3px; }
.loading { padding: 20px; color: var(--muted); }
.range { min-height: 36px; height: auto; max-width: 100%; flex-wrap: wrap; }
.range select { border: 0; color: var(--sky-deep); background: var(--sky-soft); font: inherit; font-size: 11px; width: 56px; height: 25px; border-radius: 6px; }
.range.invalid { border-color: #b45309; background: #fff7ed; }
.range input[data-lo], .range input[data-hi] { width: 58px; }
.card-head .sub { overflow-wrap: anywhere; }
@media(max-width:1080px) {
  .compact-contact { display: block; font-size: 10px; text-align: center; padding: 10px 0 0; color: var(--sky-deep); text-underline-offset: 3px; }
  .nav-item { height: 62px; min-height: 62px; gap: 1px; align-content: center; }
  .nav-item::after { content: attr(data-short); font-size: 8px; line-height: 12px; color: inherit; }
  .nav-item .ni-pill { display: none; }
  .header-tools { gap: 8px; }
}
/* Phones in either orientation. 100vh runs under the browser toolbar there, which hides the end of the list. */
@media (max-width: 600px), (max-height: 500px) {
  .sb, .main { height: 100dvh; }
  body:has(.tray.show) .main { height: calc(100dvh - 84px); }
  .main { overflow-y: auto; }
  .top, .search, .filters { flex-shrink: 0; }
  .results { min-height: 260px; flex-shrink: 0; }
  .filter-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters:not([data-open="chips"]) .chip-filter, .filters:not([data-open="ranges"]) .ranges { display: none; }
  .chip-heading { display: none; }
  .chips, .chips.expanded { max-height: min(38vh, 280px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-height: 500px) {
  .main { padding-top: 8px; }
  .top { flex-wrap: nowrap; align-items: center; }
  .top p { display: none; }
  .search { margin-top: 8px; }
  .search input { height: 40px; }
  .filters, .results { margin-top: 8px; }
  .results { min-height: 200px; }
  .results-head { padding: 6px 12px; }
  .value-legend { margin-top: 4px; }
}
@media(max-width:600px) {
  .main { padding: 16px 12px 0; }
  body:has(.tray.show) .main { height: calc(100dvh - 76px); }
  .top h1 { font-size: 23px; gap: 6px; }
  .seg-wrap { gap: 5px; }
  .units { gap: 8px; flex-wrap: wrap; }
  .seg button { padding: 0 9px; }
  .range { padding: 5px 8px; gap: 3px; }
  .range b { font-size: 11px; }
  .range input { width: 44px; }
  .range select { width: 48px; }
  .range input[data-lo], .range input[data-hi] { width: 48px; }
  .value-legend { margin: 8px 12px 0; font-size: 10px; }
  .card-head { padding: 16px; max-height: 44vh; overflow-y: auto; }
  .card-body { padding: 16px; }
  .ch-actions .btn { padding: 0 12px; font-size: 12px; }
  .cmp-tools, .temp-bar { flex-wrap: wrap; }
}

.thead > [role="columnheader"] { height: 100%; min-width: 0; }

.curve-points { margin-top: 12px; font-size: 12px; }.curve-points summary { cursor: pointer; color: var(--sky-deep); }.curve-points table { width: 100%; border-collapse: collapse; margin-top: 8px; }.curve-points th,.curve-points td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }

.cmp .condition-text { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* ===== 比較表の印刷（最前面が比較カードのときだけ。3製品までA4縦、4製品以上はA4横） ===== */
@page cmp { size: A4 portrait; margin: 10mm 10mm 12mm; }
@page cmp-wide { size: A4 landscape; margin: 10mm 10mm 12mm; }
@media print {
  html:has(body > .cmp-card[data-depth="0"]:not(.is-out)), body:has(> .cmp-card[data-depth="0"]:not(.is-out)) { display: block; height: auto; overflow: visible; background: #fff; }
  body:has(> .cmp-card[data-depth="0"]:not(.is-out)) > :not(.cmp-card[data-depth="0"]:not(.is-out)) { display: none !important; }
  .cmp-card { page: cmp; position: static; display: block; width: auto !important; max-width: none; transform: none !important; filter: none; box-shadow: none; border-radius: 0; overflow: visible; transition: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .cmp-card[data-print="wide"] { page: cmp-wide; }
  .cmp-card .card-head { padding: 0 0 2mm; background: none; border-bottom: 0; }
  .cmp-card .card-head h2 { margin: 2mm 0 1mm; font-size: 14pt; }
  .cmp-card .card-head .sub { font-size: 8.5pt; color: #444; }
  .cmp-card .candidate-warning { margin: 2mm 0 0; padding: 1.2mm 2mm; font-size: 8pt; }
  .cmp-card .ch-row, .cmp-card .temp-bar, .cmp-card .cmp-tools, .cmp-card .mini, .cmp-card .mini-x, .cmp-card .card-cover { display: none !important; }
  .cmp-card .print-only { display: block; }
  .print-head { display: flex !important; align-items: center; gap: 3mm; }
  .print-head img { height: 9mm; }
  .print-head b { display: block; font-size: 11pt; }
  .print-head span { font-size: 8pt; color: #555; }
  .cmp-card .card-body { padding: 0; overflow: visible; }
  .cmp-card .card-body > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cmp-card .cmp-wrap { overflow: visible; border: 0; border-radius: 0; }
  .cmp-card .cmp { min-width: 0 !important; font-size: 8.5pt; line-height: 1.35; }
  .cmp-card .cmp thead th { width: auto; border-top: .5pt solid #b8c4d0; }
  .cmp-card .cmp thead th:first-child { width: 30mm; }
  .cmp-card .cmp th, .cmp-card .cmp td { position: static !important; padding: 1mm 2mm; border-bottom: .5pt solid #dde4eb; overflow-wrap: anywhere; }
  .cmp-card .cmp .v { display: inline; }
  .cmp-card .cmp .dchip, .cmp-card .cmp td > .value-state { margin: 0 0 0 1.5mm; }
  .cmp-card .colh .model { display: none; }
  .cmp-card .print-model { font-size: 9pt; }
  .cmp-card .nowrap { white-space: nowrap; }
  .cmp-card .cmp tbody th { font-size: 8pt; white-space: normal; }
  .cmp-card .cmp tr { break-inside: avoid; }
  .cmp-card .cmp tr.grp { break-after: avoid; }
  .cmp-card .cmp tr.grp th { padding-top: 2.5mm; font-size: 8.5pt; }
  .cmp-card .cmp .t { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 7.5pt; }
  .cmp-card .cmp .v small, .cmp-card .colh small { font-size: 7pt; }
  .cmp-card .dchip { font-size: 7pt; padding: .3mm 1.5mm; }
  .cmp-card .value-state { font-size: 6.5pt; }
  .cmp-card .colh { gap: 1mm; }
  .cmp-card .colh .mk-badge { height: auto; padding: .3mm 2mm; font-size: 7pt; }
  .cmp-card .colh .base-badge { height: auto; padding: .3mm 2mm; font-size: 7pt; }
  .cmp-card .note { font-size: 7.5pt; margin-top: 2mm; }
  .print-foot { margin: 1.5mm 2px 0; font-size: 7.5pt; color: #555; line-height: 1.5; }
}