:root {
  --navy-950: #153a5b;
  --navy-800: #254a67;
  --blue-700: #0078b8;
  --blue-600: #0078b8;
  --blue-500: #078ad2;
  --blue-100: #e8f4fa;
  --blue-50: #f4f9fc;
  --slate-700: #3f566b;
  --slate-600: #5b6f80;
  --slate-500: #5b6f80;
  --slate-300: #bfd2de;
  --slate-200: #d9e7ef;
  --slate-100: #edf4f8;
  --white: #ffffff;
  --green-700: #167052;
  --green-100: #e6f5ef;
  --orange-700: #98510d;
  --orange-100: #fff1de;
  --red-700: #a33a3a;
  --red-100: #fdeaea;
  --purple-700: #4f687a;
  --purple-100: #edf4f8;
  --shadow-sm: 0 3px 12px rgba(21, 58, 91, 0.05);
  --shadow-md: 0 10px 28px rgba(21, 58, 91, 0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --content-width: 1180px;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

/* 部品互換確認ページ */
.part-compatibility-hero {
  padding: 30px 0 42px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--blue-50);
}

.part-hero-grid {
  display: grid;
  gap: 24px;
}

.part-hero-grid h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1.3;
}

.part-hero-grid > div > p:last-child {
  max-width: 760px;
  margin: 16px 0 0;
}

.part-hero-copy {
  margin: 18px 0 0;
  color: var(--navy-800);
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  line-height: 1.65;
}

.part-hero-copy strong {
  color: var(--blue-700);
}

.part-hero-grid aside {
  padding: 18px 20px;
  border: 1px solid #e9c9a4;
  border-left: 4px solid var(--orange-700);
  border-radius: 8px;
  background: #fffaf4;
}

.part-hero-grid aside strong,
.part-hero-grid aside p {
  display: block;
  margin: 0;
}

.part-hero-grid aside p {
  margin-top: 5px;
  color: #684621;
  font-size: 14px;
}

.part-compatibility-tool {
  padding: 42px 0 64px;
}

.part-tool-shell {
  max-width: 960px;
  margin-inline: auto;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: var(--white);
}

.part-search-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--slate-200);
  background: var(--blue-50);
}

.part-search-tabs button {
  min-width: 0;
  min-height: 60px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--slate-600);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.part-search-tabs button + button {
  border-left: 1px solid var(--slate-200);
}

.part-search-tabs button[aria-selected="true"] {
  border-bottom-color: var(--blue-700);
  color: var(--navy-950);
  background: var(--white);
}

[data-pc-panel] {
  padding: 28px;
}

.part-search-heading {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.part-search-heading > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--navy-950);
  font-size: 14px;
  font-weight: 800;
}

.part-search-heading h2,
.part-search-heading p {
  margin: 0;
}

.part-search-heading h2 {
  font-size: 1.25rem;
  line-height: 1.45;
}

.part-search-heading p {
  margin-top: 3px;
  color: var(--slate-600);
  font-size: 14px;
}

.compat-search-field {
  max-width: 760px;
  margin: 22px 0 0 49px;
}

.compat-search-field > label {
  display: block;
  margin-bottom: 7px;
  color: var(--navy-800);
  font-size: 14px;
  font-weight: 800;
}

.compat-search-field .search-input-wrap > svg {
  z-index: 1;
}

.compatibility-suggestions {
  max-height: min(420px, 52vh);
}

.suggestion-no-results {
  padding: 18px;
  color: var(--slate-600);
  font-size: 14px;
  text-align: center;
}

[data-pc-part-state],
[data-pc-selected-model],
[data-pc-model-first-state] {
  margin-top: 24px;
}

.selected-part-card,
.selected-model-card {
  border: 1px solid #b9d7e6;
  border-left: 4px solid var(--blue-700);
  border-radius: 8px;
  background: var(--blue-50);
}

.selected-part-card {
  padding: 22px;
}

.selected-record-heading {
  display: grid;
  justify-items: start;
}

.selected-record-heading .badge {
  margin-bottom: 12px;
}

.compat-record-number {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--blue-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.selected-record-heading h3 {
  margin: 4px 0 0;
  font-size: 1rem;
}

.compat-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  margin: 18px 0 0;
}

.compat-facts > div {
  display: grid;
  grid-template-columns: minmax(92px, 0.42fr) 1fr;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--slate-200);
}

.compat-facts dt {
  color: var(--slate-600);
  font-size: 14px;
  font-weight: 700;
}

.compat-facts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--navy-800);
  font-size: 14px;
  font-weight: 800;
}

.compat-note {
  margin: 16px 0 8px;
  color: var(--slate-600);
  font-size: 14px;
}

.record-clear {
  display: block;
  margin-top: 14px;
  padding: 0;
  border: 0;
  color: var(--blue-700);
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.part-model-step {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--slate-200);
}

.part-model-step[hidden] {
  display: none;
}

.confirmed-model-list {
  margin: 24px 0 0 49px;
  padding: 18px;
  border-top: 2px solid var(--navy-950);
  background: #fbfdfe;
}

.confirmed-model-list h3,
.confirmed-model-list p {
  margin: 0;
}

.confirmed-model-list h3 {
  font-size: 1rem;
}

.confirmed-model-list p {
  margin-top: 3px;
  color: var(--slate-600);
  font-size: 14px;
}

.confirmed-model-list > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.confirmed-model-list button {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  text-align: left;
  background: var(--white);
  cursor: pointer;
}

.confirmed-model-list button:hover {
  border-color: var(--blue-500);
}

.confirmed-model-list strong,
.confirmed-model-list span {
  display: block;
  overflow-wrap: anywhere;
}

.confirmed-model-list strong {
  color: var(--blue-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.confirmed-model-list span {
  margin-top: 3px;
  color: var(--slate-600);
  font-size: 14px;
}

.selected-model-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
}

.selected-model-card span,
.selected-model-card strong,
.selected-model-card p,
.selected-model-card small {
  display: block;
}

.selected-model-card span,
.selected-model-card small {
  color: var(--slate-600);
  font-size: 14px;
}

.selected-model-card strong {
  overflow-wrap: anywhere;
  color: var(--blue-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
}

.selected-model-card p {
  margin: 2px 0;
  font-size: 14px;
  font-weight: 700;
}

.selected-model-actions {
  display: grid;
  justify-items: end;
}

.model-confirmed-parts {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--slate-200);
}

.part-list-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.part-list-heading h2 {
  margin: 0;
  font-size: 1.3rem;
}

.part-list-heading > span {
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--blue-700);
  background: var(--blue-100);
  font-size: 14px;
  font-weight: 800;
}

.compat-part-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.compat-part-grid article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
}

.compat-part-grid h3 {
  margin: 4px 0 12px;
  font-size: 1rem;
}

.compat-part-grid dl {
  margin: 0 0 16px;
}

.compat-part-grid dl > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--slate-100);
  font-size: 14px;
}

.compat-part-grid dt {
  color: var(--slate-600);
}

.compat-part-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.compat-part-grid .button {
  width: 100%;
  margin-top: auto;
}

.compatibility-result {
  scroll-margin-top: 100px;
}

.compat-result-card {
  margin: 0 28px 28px;
  padding: 28px;
  border: 1px solid var(--slate-200);
  border-top: 5px solid var(--slate-600);
  border-radius: 10px;
  background: #fbfdfe;
}

.compat-result-card.is-confirmed {
  border-color: #b6ddce;
  border-top-color: var(--green-700);
  background: #f5fbf8;
}

.compat-result-card.is-caution {
  border-color: #edcfa8;
  border-top-color: var(--orange-700);
  background: #fffaf4;
}

.compat-result-card.is-danger {
  border-color: #efc5c5;
  border-top-color: var(--red-700);
  background: #fff8f8;
}

.compat-result-label {
  color: var(--slate-600);
  font-size: 14px;
  font-weight: 800;
}

.compat-status-badge {
  margin-top: 8px;
  color: var(--navy-800);
  background: var(--white);
  border: 1px solid currentColor;
}

.compat-result-card h2 {
  max-width: 760px;
  margin: 14px 0 8px;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.45;
}

.compat-result-card > p {
  margin: 0;
}

.compat-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: var(--white);
}

.compat-pair > span {
  color: var(--slate-500);
  font-size: 1.25rem;
  font-weight: 800;
}

.compat-pair small,
.compat-pair strong,
.compat-pair div > span {
  display: block;
}

.compat-pair small {
  color: var(--slate-600);
  font-size: 14px;
  font-weight: 700;
}

.compat-pair strong {
  overflow-wrap: anywhere;
  color: var(--blue-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1rem, 3vw, 1.25rem);
}

.compat-pair div > span {
  margin-top: 2px;
  color: var(--slate-600);
  font-size: 14px;
}

.compat-evidence,
.replacement-judgment,
.compat-next-action {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--slate-200);
}

.compat-evidence h3,
.replacement-judgment h3,
.compat-next-action strong {
  margin: 0;
  color: var(--navy-950);
  font-size: 1rem;
}

.compat-evidence p,
.replacement-judgment p,
.compat-next-action p {
  margin: 7px 0 0;
  font-size: 14px;
}

.compat-evidence .compat-source-caution {
  margin: 14px 0 10px;
  padding: 11px 13px;
  border-left: 3px solid var(--orange-700);
  color: #684621;
  background: #fffaf4;
}

.compat-evidence dl {
  display: grid;
  gap: 0;
  margin: 16px 0;
}

.compat-evidence dl > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--slate-200);
  font-size: 14px;
}

.compat-evidence dt {
  color: var(--slate-600);
}

.compat-evidence dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.replacement-judgment .badge {
  margin-top: 10px;
}

.compat-safety-note {
  margin-top: 20px !important;
  padding: 14px 16px;
  border-left: 4px solid var(--orange-700);
  color: #684621;
  background: #fffaf4;
  font-size: 14px;
}

.compat-empty-state {
  padding: 22px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: #fbfdfe;
}

.compat-empty-state h3 {
  margin: 12px 0 6px;
  font-size: 1.1rem;
}

.compat-empty-state p,
.compat-empty-state li {
  font-size: 14px;
}

.compat-empty-state p {
  margin: 0;
}

.compat-empty-state ul {
  margin: 12px 0 18px;
  padding-left: 1.4em;
}

.part-guide-grid {
  display: grid;
  gap: 0 24px;
}

.part-guide-grid article {
  padding: 20px 0;
  border-top: 1px solid var(--slate-200);
}

.part-guide-grid article:first-child {
  border-top: 2px solid var(--navy-950);
}

.part-guide-grid h3,
.part-guide-grid p {
  margin: 0;
}

.part-guide-grid h3 {
  font-size: 1rem;
}

.part-guide-grid p {
  margin-top: 6px;
  color: var(--slate-600);
  font-size: 14px;
}

.part-service-note {
  padding: 22px;
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--navy-950);
  border-radius: 8px;
  background: var(--blue-50);
}

.part-service-note h2,
.part-service-note p {
  margin: 0;
}

.part-service-note h2 {
  font-size: 1.1rem;
}

.part-service-note p {
  margin-top: 7px;
  font-size: 14px;
}

@media (min-width: 720px) {
  .part-hero-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.7fr);
    align-items: end;
  }

  .part-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .part-guide-grid article:nth-child(2) {
    border-top: 2px solid var(--navy-950);
  }
}

@media (max-width: 719px) {
  [data-pc-panel] {
    padding: 20px 16px;
  }

  .part-search-tabs button {
    min-height: 56px;
    padding-inline: 8px;
    font-size: 14px;
  }

  .compat-search-field,
  .confirmed-model-list {
    margin-left: 0;
  }

  .compat-facts,
  .confirmed-model-list > div,
  .compat-part-grid {
    grid-template-columns: 1fr;
  }

  .selected-model-card {
    grid-template-columns: 1fr;
  }

  .selected-model-actions {
    justify-items: start;
  }

  .compat-result-card {
    margin: 0 16px 20px;
    padding: 20px 16px;
  }

  .compat-pair {
    grid-template-columns: 1fr;
  }

  .compat-pair > span {
    transform: rotate(90deg);
    justify-self: center;
  }
}

@media (max-width: 390px) {
  .part-compatibility-hero {
    padding: 24px 0 32px;
  }

  .part-compatibility-tool {
    padding: 28px 0 44px;
  }

  .part-tool-shell {
    margin-inline: -4px;
  }

  .part-search-heading {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
  }

  .part-search-heading > span {
    width: 28px;
    height: 28px;
  }

  .selected-part-card,
  .selected-model-card,
  .compat-empty-state {
    padding: 16px;
  }

  .compat-facts > div,
  .compat-part-grid dl > div,
  .compat-evidence dl > div {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .compat-pair {
    padding: 14px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--slate-700);
  background: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  color: var(--navy-950);
}

body.menu-open,
body.dialog-open {
  overflow: hidden;
}

[data-feature-slot][hidden] {
  display: none !important;
}

img,
svg {
  display: block;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

:focus-visible {
  outline: 3px solid #7bb9ef;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 999;
  padding: 10px 14px;
  transform: translateY(-150%);
  border-radius: 8px;
  color: var(--white);
  background: var(--navy-950);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: min(calc(100% - 40px), var(--content-width));
  margin-inline: auto;
}

.narrow-container {
  width: min(calc(100% - 40px), 900px);
  margin-inline: auto;
}

.section {
  padding: 66px 0;
}

.section-soft {
  background: var(--blue-50);
}

.section-heading {
  max-width: 700px;
  margin-bottom: 28px;
}

.section-heading.center {
  margin-inline: auto;
  text-align: center;
}

.section-heading h2,
.content-heading h2 {
  margin: 6px 0 10px;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.35;
  letter-spacing: -0.035em;
}

.section-heading > h2:first-child {
  margin-top: 0;
}

.section-heading p,
.content-heading p {
  margin: 0;
  color: var(--slate-600);
}

.eyebrow {
  margin: 0;
  color: var(--blue-700);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 74px;
  border-bottom: 1px solid rgba(202, 212, 223, 0.8);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 32px), var(--content-width));
  height: 100%;
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.25;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  color: var(--white);
  background: var(--blue-600);
}

.brand-mark svg {
  width: 23px;
  height: 23px;
}

.brand-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-subtitle {
  display: block;
  margin-top: 2px;
  color: var(--slate-600);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.menu-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 19px;
  height: 2px;
  margin: 4px 0;
  border-radius: 2px;
  background: var(--navy-950);
  transition: transform 180ms ease, opacity 180ms ease;
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

.site-nav {
  position: fixed;
  inset: 74px 0 auto;
  display: none;
  padding: 16px 20px 22px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.site-nav.is-open {
  display: block;
}

.site-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--slate-100);
  color: var(--navy-800);
  font-size: 0.91rem;
  font-weight: 700;
}

.site-nav a:last-child {
  border-bottom: 0;
}

.site-nav a::after {
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--slate-500);
  border-right: 1.5px solid var(--slate-500);
  transform: rotate(45deg);
  content: "";
}

.site-nav a[aria-current="page"] {
  color: var(--blue-700);
}

.demo-strip {
  padding: 9px 0;
  border-bottom: 1px solid var(--slate-200);
  color: var(--slate-700);
  background: #edf4f8;
  font-size: 0.77rem;
  font-weight: 700;
  text-align: center;
}

.demo-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.demo-strip svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 52px 0 64px;
  background-color: #f4f9fc;
  background-image: url("images/cadesh-hero-background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hero::before {
  position: absolute;
  top: -280px;
  right: -250px;
  width: 540px;
  height: 540px;
  border: 1px solid rgba(35, 121, 202, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(35, 121, 202, 0.025), 0 0 0 140px rgba(35, 121, 202, 0.02);
  display: none;
  content: "";
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 40px;
}

.hero-copy {
  max-width: 820px;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding: 6px 10px;
  border: 1px solid #cfe1f0;
  border-radius: 999px;
  color: var(--blue-700);
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.73rem;
  font-weight: 800;
}

.hero-label svg {
  width: 15px;
  height: 15px;
}

.hero h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.15rem, 6.8vw, 4rem);
  line-height: 1.22;
  letter-spacing: -0.055em;
}

.hero h1 .accent {
  color: var(--blue-500);
}

.heading-line {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}

.hero-lead {
  max-width: 650px;
  margin: 20px auto 30px;
  color: var(--slate-700);
  font-size: clamp(1rem, 2vw, 1.14rem);
  line-height: 1.85;
  text-align: center;
}

.search-panel {
  position: relative;
  max-width: 760px;
  padding: 16px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.search-form {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
}

.search-input-wrap {
  position: relative;
  grid-column: 1 / -1;
  min-width: 0;
}

.search-input-wrap > svg {
  position: absolute;
  top: 50%;
  left: 17px;
  width: 21px;
  height: 21px;
  transform: translateY(-50%);
  color: var(--blue-600);
  pointer-events: none;
}

.search-input {
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 16px 0 48px;
  border: 1px solid var(--slate-300);
  border-radius: 13px;
  color: var(--navy-950);
  background: var(--white);
  font-size: 16px;
  font-weight: 600;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.search-input::placeholder {
  color: var(--slate-500);
  font-weight: 500;
}

.search-input:focus {
  border-color: var(--blue-500);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(35, 121, 202, 0.12);
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 40;
  width: 100%;
  max-height: min(390px, 56vh);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 12px 28px rgba(21, 58, 91, 0.14);
  overscroll-behavior: contain;
}

.search-suggestions[hidden] {
  display: none;
}

.suggestion-group-label {
  padding: 9px 13px 5px;
  border-top: 1px solid var(--slate-100);
  color: var(--slate-600);
  background: var(--blue-50);
  font-size: 14px;
  font-weight: 800;
}

.suggestion-group-label:first-child {
  border-top: 0;
}

.search-suggestion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  padding: 11px 13px;
  border-top: 1px solid var(--slate-100);
  cursor: pointer;
}

.search-suggestion:hover,
.search-suggestion.is-active {
  background: var(--blue-50);
}

.search-suggestion.is-active {
  box-shadow: inset 3px 0 0 var(--blue-500);
}

.suggestion-type {
  grid-row: 1 / span 2;
  align-self: start;
  min-width: 70px;
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--blue-700);
  background: var(--blue-100);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.suggestion-main {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 9px;
  color: var(--navy-950);
  line-height: 1.45;
}

.suggestion-main strong {
  font-size: 15px;
}

.suggestion-main b {
  color: var(--blue-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}

.search-suggestion small {
  grid-column: 2;
  color: var(--slate-600);
  font-size: 14px;
  line-height: 1.5;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: var(--white);
  background: var(--blue-600);
  box-shadow: 0 4px 12px rgba(0, 120, 184, 0.16);
}

.button-primary:hover {
  background: var(--blue-700);
}

.button-secondary {
  border-color: var(--slate-300);
  color: var(--navy-800);
  background: var(--white);
}

.button-soft {
  color: var(--blue-700);
  background: var(--blue-100);
}

.button svg {
  width: 18px;
  height: 18px;
}

.search-submit {
  min-height: 56px;
}

.hero .search-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.hero .search-input-wrap {
  grid-column: auto;
}

.hero .search-submit {
  min-width: 82px;
  padding-inline: 14px;
}

.search-submit-label-mobile {
  display: inline;
}

.search-submit-label-desktop {
  display: none;
}

.camera-button {
  width: 52px;
  min-width: 52px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--slate-300);
  border-radius: 13px;
  color: var(--blue-700);
  background: var(--blue-50);
  cursor: pointer;
}

.camera-button svg {
  width: 22px;
  height: 22px;
  margin: auto;
}

.search-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
  color: var(--slate-600);
  font-size: 0.76rem;
}

.search-examples > span {
  padding: 5px 1px;
  font-weight: 700;
}

.example-button {
  padding: 5px 9px;
  border: 0;
  border-radius: 8px;
  color: var(--blue-700);
  background: var(--blue-50);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.example-button-text {
  font-family: var(--font);
}

.search-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--slate-200);
}

.search-shortcuts[hidden] {
  display: none;
}

.search-shortcuts button,
.finder-back {
  padding: 0;
  border: 0;
  color: var(--blue-700);
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.search-status {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.privacy-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 2px 0;
  color: var(--slate-500);
  font-size: 0.7rem;
  font-weight: 600;
}

.privacy-note svg {
  width: 14px;
  height: 14px;
}

.quick-grid,
.trust-grid,
.category-grid {
  display: grid;
  gap: 14px;
}

.quick-card {
  position: relative;
  display: flex;
  min-height: 176px;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.quick-card:hover {
  transform: translateY(-2px);
  border-color: #9fc8dd;
  box-shadow: var(--shadow-sm);
}

.quick-icon,
.trust-icon,
.step-icon,
.decision-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-700);
  background: var(--blue-100);
}

.quick-icon svg,
.trust-icon svg,
.step-icon svg,
.decision-icon svg {
  width: 24px;
  height: 24px;
}

.quick-card h3 {
  margin: 18px 0 7px;
  font-size: 1.07rem;
  line-height: 1.45;
}

.quick-card p {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.87rem;
  line-height: 1.7;
}

.quick-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: var(--blue-700);
  background: var(--blue-50);
}

.quick-arrow svg {
  width: 17px;
  height: 17px;
}

.steps {
  display: grid;
  gap: 12px;
  counter-reset: step;
}

.step-card {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: var(--white);
}

.step-icon {
  width: 50px;
  height: 50px;
  color: var(--navy-800);
  background: var(--slate-100);
}

.step-copy small {
  display: block;
  margin-bottom: 3px;
  color: var(--blue-700);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.step-copy strong {
  display: block;
  font-size: 0.94rem;
  line-height: 1.55;
}

.category-card {
  display: flex;
  min-height: 92px;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: var(--white);
}

.category-card.muted {
  color: var(--slate-500);
  background: #fafcfd;
}

.category-card-media {
  display: grid;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  place-items: center;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  background: var(--blue-50);
  overflow: hidden;
}

.category-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-card.muted svg {
  color: var(--slate-400, #9baaba);
}

.category-card strong,
.category-card small {
  display: block;
}

.category-card strong {
  font-size: 0.88rem;
}

.category-card small {
  margin-top: 4px;
  color: var(--slate-500);
  font-size: 0.7rem;
  font-weight: 700;
}

.manufacturer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.manufacturer-card {
  display: grid;
  min-height: 68px;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 14px 16px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: var(--white);
  text-align: center;
}

.manufacturer-card.is-primary {
  border-color: #b7d8e8;
  box-shadow: none;
}

.manufacturer-card.is-planned {
  color: var(--slate-600);
  background: rgba(255, 255, 255, 0.72);
}

.manufacturer-card h3,
.manufacturer-card p {
  margin: 0;
}

.manufacturer-card h3 {
  font-size: 1rem;
}

.manufacturer-card p {
  margin-top: 2px;
  color: var(--slate-500);
  font-size: 0.74rem;
  font-weight: 700;
}

.manufacturer-note {
  display: flex;
  max-width: 760px;
  gap: 9px;
  align-items: flex-start;
  margin: 18px 0 0;
  color: var(--slate-600);
  font-size: 0.8rem;
}

.manufacturer-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--blue-700);
}

.coverage-group + .coverage-group {
  margin-top: 28px;
}

.coverage-group > h3 {
  margin: 0 0 14px;
  font-size: 1rem;
}

.coverage-planned {
  padding-top: 0;
  border-top: 0;
}

.coverage-planned > h3 {
  color: var(--slate-600);
}

.coverage-planned .category-card,
.coverage-planned .manufacturer-card {
  box-shadow: none;
  opacity: 0.72;
}

.coverage-planned .category-grid,
.coverage-planned .manufacturer-grid {
  gap: 14px;
  border-top: 0;
}

.coverage-planned .category-card,
.coverage-planned .manufacturer-card {
  border: 1px solid var(--slate-200);
  border-radius: 16px;
}

.coverage-planned .category-card {
  min-height: 110px;
}

.coverage-planned .manufacturer-card {
  min-height: 96px;
}

.trust-card {
  padding: 22px 0;
  border: 0;
  border-top: 2px solid var(--slate-200);
  border-radius: 0;
}

.trust-card:first-child {
  border-top-color: var(--blue-500);
}

.trust-card h3 {
  margin: 16px 0 7px;
  font-size: 1rem;
}

.trust-card p {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.84rem;
}

.safety-box {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid #dfbd94;
  border-radius: var(--radius-md);
  color: #613f1e;
  background: #fffaf4;
}

.safety-box svg {
  width: 26px;
  height: 26px;
}

.safety-box h2,
.safety-box h3 {
  margin: 0 0 4px;
  color: #493017;
  font-size: 1rem;
}

.safety-box p {
  margin: 0;
  font-size: 0.85rem;
}

.site-footer {
  padding: 42px 0 26px;
  color: #d6e1ee;
  background: var(--navy-950);
}

.footer-grid {
  display: grid;
  gap: 28px;
}

.footer-brand .brand-subtitle {
  color: #9fb2c8;
}

.footer-brand p {
  max-width: 450px;
  margin: 15px 0 0;
  color: #9fb2c8;
  font-size: 0.78rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.77rem;
  font-weight: 700;
}

.footer-links a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(221, 229, 237, 0.14);
  color: #8fa3ba;
  font-size: 0.68rem;
}

.page-hero {
  padding: 28px 0 38px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--blue-50);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 22px;
  color: var(--slate-600);
  font-size: 0.74rem;
  font-weight: 700;
}

.breadcrumb svg {
  width: 13px;
  height: 13px;
}

.breadcrumb a:hover {
  color: var(--blue-700);
}

.compact-search {
  max-width: 760px;
}

.compact-search .search-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

.compact-search .search-input-wrap {
  grid-column: auto;
}

.compact-search .search-input,
.compact-search .search-submit {
  height: 52px;
  min-height: 52px;
}

.page-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
}

.page-title-row h1 {
  margin: 6px 0 0;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.badge-demo {
  color: var(--purple-700);
  background: var(--purple-100);
}

.badge-planned {
  color: var(--slate-600);
  background: var(--slate-100);
}

.badge-self,
.badge-match {
  color: var(--green-700);
  background: var(--green-100);
}

.badge-consult,
.badge-series,
.badge-check {
  color: var(--orange-700);
  background: var(--orange-100);
}

.badge-stop,
.badge-unchecked {
  color: var(--red-700);
  background: var(--red-100);
}

.badge-warranty {
  color: var(--blue-700);
  background: var(--blue-100);
}

.badge-information {
  color: var(--slate-700);
  background: var(--slate-100);
}

.demo-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  padding: 15px 17px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  color: var(--slate-700);
  background: #edf4f8;
  font-size: 0.8rem;
  font-weight: 700;
}

.demo-alert svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 3px;
}

.result-layout,
.model-layout {
  display: grid;
  gap: 24px;
  padding: 32px 0 66px;
}

.main-column {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.mobile-product-summary {
  display: none;
}

.lookup-state {
  max-width: 800px;
}

.lookup-state h2 {
  margin-top: 14px;
}

.lookup-state > p {
  margin: 10px 0 0;
  color: var(--slate-700);
}

.lookup-request {
  display: grid;
  gap: 1px;
  margin: 22px 0 0;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--slate-200);
}

.lookup-request > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) 1fr;
  gap: 12px;
  padding: 13px 15px;
  background: var(--white);
}

.lookup-request dt {
  color: var(--slate-600);
  font-weight: 700;
}

.lookup-request dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800;
}

.safe-guidance {
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
}

.safe-guidance h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.safe-guidance ol {
  margin: 0;
  padding-left: 1.4em;
}

.candidate-select {
  width: 100%;
  margin-top: 12px;
}

.side-column {
  display: grid;
  align-content: start;
  gap: 16px;
}

.content-card {
  padding: 23px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  background: var(--white);
  box-shadow: none;
}

.content-card h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -0.025em;
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.card-header p {
  margin: 5px 0 0;
  color: var(--slate-600);
  font-size: 0.82rem;
}

.product-card {
  padding: 0;
  overflow: hidden;
}

.product-card-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--blue-50);
}

.product-symbol {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #c9dceb;
  border-radius: 14px;
  color: var(--blue-700);
  background: var(--white);
}

.product-symbol svg {
  width: 30px;
  height: 30px;
}

.product-card-header small {
  display: block;
  color: var(--slate-600);
  font-size: 0.72rem;
  font-weight: 700;
}

.product-card-header strong {
  display: block;
  margin-top: 2px;
  font-size: 0.98rem;
}

.definition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

.definition-grid > div {
  min-width: 0;
  padding: 15px 20px;
  border-bottom: 1px solid var(--slate-100);
}

.definition-grid > div:nth-child(odd) {
  border-right: 1px solid var(--slate-100);
}

.definition-grid > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.definition-grid dt {
  color: var(--slate-500);
  font-size: 0.68rem;
  font-weight: 700;
}

.definition-grid dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  font-weight: 800;
}

.decision-card {
  padding: 26px;
  border: 1px solid #acd2c3;
  border-radius: 12px;
  background: linear-gradient(135deg, #edf9f4 0%, #f7fcfa 100%);
  box-shadow: none;
}

.decision-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.decision-icon {
  width: 52px;
  height: 52px;
  color: var(--green-700);
  background: var(--white);
  box-shadow: 0 4px 12px rgba(22, 112, 82, 0.08);
}

.decision-card .status {
  margin: 0 0 3px;
  color: var(--green-700);
  font-size: 0.76rem;
  font-weight: 800;
}

.decision-card h2 {
  margin: 16px 0 9px;
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1.4;
  letter-spacing: -0.035em;
}

.decision-card > p {
  margin: 0;
  color: var(--slate-700);
  font-size: 0.87rem;
}

.summary-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.summary-list > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--slate-100);
}

.summary-list > div:last-child {
  border-bottom: 0;
}

.summary-list dt {
  color: var(--slate-500);
  font-size: 0.73rem;
  font-weight: 700;
}

.summary-list dd {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
}

.check-list,
.judgment-list,
.source-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list {
  display: grid;
  gap: 12px;
  counter-reset: check-item;
}

.check-list li {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  counter-increment: check-item;
}

.check-list li::before {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: var(--green-700);
  background: var(--green-100);
  font-size: 0.72rem;
  font-weight: 800;
  content: counter(check-item);
}

.check-list strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.87rem;
}

.check-list span {
  color: var(--slate-600);
  font-size: 0.79rem;
}

.no-disassembly {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: 11px;
  color: var(--red-700);
  background: var(--red-100);
  font-size: 0.77rem;
  font-weight: 800;
}

.no-disassembly svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.part-highlight {
  display: grid;
  gap: 18px;
}

.part-title-block .part-number {
  display: block;
  margin-bottom: 5px;
}

.part-title-block h3 {
  margin: 0;
  font-size: 1.2rem;
}

.part-number,
.record-code {
  color: var(--blue-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.part-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.part-detail-grid > div {
  padding: 12px;
  border-radius: 11px;
  background: var(--blue-50);
}

.part-detail-grid small,
.part-detail-grid strong {
  display: block;
}

.part-detail-grid small {
  margin-bottom: 4px;
  color: var(--slate-500);
  font-size: 0.65rem;
  font-weight: 700;
}

.part-detail-grid strong {
  font-size: 0.75rem;
}

.compatibility-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 14px;
  border-top: 1px solid var(--slate-100);
}

.judgment-hero {
  margin-bottom: 20px;
  padding: 17px;
  border-radius: 13px;
  background: var(--blue-50);
}

.judgment-hero small {
  display: block;
  margin-bottom: 4px;
  color: var(--slate-500);
  font-size: 0.68rem;
  font-weight: 700;
}

.judgment-hero strong {
  color: var(--blue-700);
  font-size: 1.05rem;
}

.judgment-list {
  display: grid;
  gap: 10px;
}

.judgment-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--slate-100);
  font-size: 0.77rem;
}

.judgment-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.judgment-list span {
  color: var(--slate-600);
}

.judgment-list strong {
  text-align: right;
}

.button-row {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.source-card {
  padding-inline: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.source-list {
  display: grid;
  gap: 11px;
}

.source-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  color: var(--slate-600);
  font-size: 0.75rem;
}

.source-list strong {
  color: var(--navy-800);
  text-align: right;
}

.section-nav {
  padding: 8px 0;
  border: 0;
  border-top: 2px solid var(--navy-950);
  border-bottom: 1px solid var(--slate-200);
  border-radius: 0;
  background: transparent;
}

.section-nav strong {
  display: block;
  padding: 4px 8px 9px;
  font-size: 0.72rem;
}

.section-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 7px 8px;
  border-top: 1px solid var(--slate-100);
  color: var(--slate-700);
  font-size: 0.76rem;
  font-weight: 700;
}

.section-nav svg {
  width: 15px;
  height: 15px;
}

.model-identity {
  display: grid;
  gap: 20px;
}

.model-visual {
  display: grid;
  min-height: 180px;
  place-items: center;
  border-radius: 8px;
  color: var(--navy-800);
  background: var(--blue-50);
}

.model-visual svg {
  width: 130px;
  height: 130px;
}

.model-heading h2 {
  margin: 8px 0 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.model-heading > p {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.84rem;
}

.model-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 17px;
}

.model-facts div {
  padding: 11px 12px;
  border-bottom: 1px solid var(--slate-200);
  border-radius: 0;
  background: transparent;
}

.model-facts small,
.model-facts strong {
  display: block;
}

.model-facts small {
  color: var(--slate-500);
  font-size: 0.65rem;
  font-weight: 700;
}

.model-facts strong {
  margin-top: 2px;
  font-size: 0.78rem;
}

.record-list,
.part-list {
  display: grid;
  gap: 9px;
}

.record-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: var(--white);
}

a.record-row:hover {
  border-color: #a9c9e4;
  background: var(--blue-50);
}

.record-code {
  grid-row: 1 / 3;
  font-size: 0.95rem;
}

.record-main {
  min-width: 0;
}

.record-main strong,
.record-main small {
  display: block;
}

.record-main strong {
  font-size: 0.85rem;
}

.record-main small {
  display: none;
  margin-top: 3px;
  color: var(--slate-600);
  font-size: 0.72rem;
}

.record-row .badge {
  justify-self: start;
}

.record-arrow {
  display: none;
  color: var(--blue-700);
}

.record-arrow svg {
  width: 18px;
  height: 18px;
}

.part-row {
  display: grid;
  gap: 12px;
  padding: 17px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
}

.part-identity {
  min-width: 0;
}

.part-identity h3 {
  margin: 3px 0 0;
  font-size: 0.94rem;
}

.part-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--slate-200);
  color: var(--slate-600);
  font-size: 0.72rem;
  font-weight: 700;
}

.part-meta-status,
.part-meta-context {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.part-meta-context > span {
  overflow-wrap: anywhere;
}

.part-meta-context .source-link {
  white-space: nowrap;
}

.cta-panel {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: var(--radius-md);
  color: var(--white);
  background: var(--navy-800);
}

.cta-panel h2 {
  margin: 0 0 5px;
  color: var(--white);
  font-size: 1.2rem;
}

.cta-panel p {
  margin: 0;
  color: #c5d3e2;
  font-size: 0.8rem;
}

.cta-panel .eyebrow {
  color: #b8d9e8;
}

.site-dialog {
  width: min(calc(100% - 28px), 520px);
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 12px;
  color: var(--navy-950);
  background: transparent;
  box-shadow: var(--shadow-md);
}

.site-dialog::backdrop {
  background: rgba(12, 29, 50, 0.62);
  backdrop-filter: blur(3px);
}

.dialog-panel {
  position: relative;
  padding: 28px;
  background: var(--white);
}

.icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
}

.icon-button svg {
  width: 20px;
  height: 20px;
}

.dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

.dialog-icon {
  display: grid;
  width: 50px;
  height: 50px;
  margin-bottom: 19px;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-700);
  background: var(--blue-100);
}

.dialog-icon svg {
  width: 26px;
  height: 26px;
}

.dialog-panel h2 {
  max-width: calc(100% - 34px);
  margin: 6px 0 10px;
  font-size: 1.4rem;
  line-height: 1.4;
}

.dialog-content {
  color: var(--slate-700);
  font-size: 0.87rem;
}

.dialog-content p {
  margin: 0 0 12px;
}

.dialog-note {
  color: var(--slate-500);
  font-size: 0.74rem;
}

.dialog-actions {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.candidate-card {
  display: grid;
  gap: 4px;
  margin: 15px 0;
  padding: 16px;
  border: 1px solid var(--slate-200);
  border-radius: 13px;
  background: var(--blue-50);
}

.candidate-card .badge {
  width: fit-content;
  margin-bottom: 5px;
}

.candidate-card strong {
  font-family: ui-monospace, monospace;
}

.candidate-card span:last-child {
  color: var(--slate-600);
  font-size: 0.75rem;
}

.finder-progress {
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--slate-600);
  background: var(--blue-50);
  font-size: 14px;
}

.finder-progress strong {
  color: var(--blue-700);
}

.finder-options,
.finder-models {
  display: grid;
  gap: 9px;
  margin: 15px 0;
}

.finder-options button,
.finder-model-card {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  color: var(--slate-700);
  background: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.finder-options button:hover,
.finder-options button:focus-visible,
.finder-model-card:hover,
.finder-model-card:focus-visible {
  border-color: var(--blue-500);
  background: var(--blue-50);
}

.finder-options strong,
.finder-model-card strong {
  color: var(--navy-950);
  font-size: 15px;
}

.finder-options small,
.finder-model-card small {
  color: var(--slate-600);
  font-size: 14px;
}

.finder-model-card b {
  color: var(--blue-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.finder-model-card .badge {
  width: fit-content;
}

.finder-back {
  margin-top: 4px;
}

.dialog-list,
.dialog-steps {
  display: grid;
  gap: 9px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.dialog-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialog-list svg {
  width: 18px;
  height: 18px;
  color: var(--green-700);
}

.dialog-steps {
  counter-reset: dialog-step;
}

.dialog-steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  align-items: center;
  counter-increment: dialog-step;
}

.dialog-steps li::before {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--blue-600);
  font-size: 0.68rem;
  font-weight: 800;
  content: counter(dialog-step);
}

@media (min-width: 600px) {
  .search-form {
    grid-template-columns: minmax(0, 1fr) 56px auto;
  }

  .search-input-wrap {
    grid-column: auto;
  }

  .search-submit {
    min-width: 100px;
  }

  .hero .search-submit {
    min-width: 112px;
  }

  .search-submit-label-mobile {
    display: none;
  }

  .search-submit-label-desktop {
    display: inline;
  }

  .quick-grid,
  .category-grid,
  .manufacturer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .safety-box {
    grid-template-columns: auto 1fr;
  }

  .footer-grid {
    grid-template-columns: 1.3fr 1fr;
    align-items: end;
  }

  .footer-links {
    justify-content: flex-end;
  }

  .model-identity {
    grid-template-columns: 230px 1fr;
    align-items: center;
  }

  .record-row {
    grid-template-columns: 52px minmax(0, 1fr) auto 24px;
    gap: 14px;
  }

  .record-code {
    grid-row: auto;
  }

  .record-main small,
  .record-arrow {
    display: block;
  }

  .part-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .part-meta {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .part-meta-context {
    justify-content: flex-end;
  }

  .dialog-actions,
  .button-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .container,
  .narrow-container {
    width: min(calc(100% - 64px), var(--content-width));
  }

  .hero {
    padding: 66px 0 76px;
  }

  .section {
    padding: 84px 0;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .step-card {
    min-height: 175px;
    grid-template-columns: 1fr;
    align-content: start;
  }

  .step-card:not(:last-child)::after {
    position: absolute;
    top: 49px;
    right: -19px;
    z-index: 2;
    width: 26px;
    height: 1px;
    background: var(--slate-300);
    content: "";
  }

  .decision-card,
  .content-card {
    padding: 30px;
  }

  .product-card {
    padding: 0;
  }

  .part-highlight {
    grid-template-columns: minmax(170px, 0.7fr) 1.3fr;
    align-items: start;
  }

  .dialog-panel {
    padding: 34px;
  }
}

@media (min-width: 960px) {
  .site-header {
    height: 82px;
  }

  .menu-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-nav a {
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    font-size: 0.78rem;
  }

  .site-nav a::after {
    display: none;
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    color: var(--blue-700);
    background: var(--blue-50);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
    gap: 0;
  }

  .quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .category-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .category-grid-current {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .coverage-planned .category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .manufacturer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .manufacturer-grid-current {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .manufacturer-card {
    min-height: 68px;
    grid-template-columns: minmax(0, 1fr);
  }

  .category-card {
    min-height: 92px;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }

  .result-layout,
  .model-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: start;
    gap: 28px;
  }

  .side-column {
    position: sticky;
    top: 106px;
  }

  .model-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
}

.empty-state {
  padding: 24px;
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius-md);
  background: var(--blue-50);
}

.empty-state strong {
  display: block;
  color: var(--navy-950);
  margin-bottom: 7px;
}

.empty-state p {
  margin: 0 0 14px;
  color: var(--slate-600);
}

.source-link {
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.source-link:hover {
  color: var(--navy-950);
}

.part-identity p {
  margin: 7px 0 0;
  max-width: none;
  color: var(--slate-600);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.support-card {
  border-color: #cbdfee;
}

.support-intro,
.support-cost-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  color: var(--slate-700);
}

.support-intro svg,
.support-cost-note svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--blue-700);
}

.support-intro p,
.support-cost-note p {
  margin: 0;
}

.warranty-fieldset {
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

.warranty-fieldset legend {
  width: 100%;
  margin-bottom: 12px;
  color: var(--navy-950);
  font-weight: 700;
}

.warranty-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.warranty-options label {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--slate-700);
  font-weight: 700;
  cursor: pointer;
}

.warranty-options label:has(input:checked) {
  border-color: var(--blue-600);
  background: var(--blue-50);
  color: var(--blue-700);
  box-shadow: 0 0 0 2px rgba(23, 105, 189, 0.1);
}

.warranty-options input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue-600);
}

.support-recommendation {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: #f8fbfd;
}

.support-recommendation-head h3 {
  margin: 10px 0 4px;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.support-recommendation-head p {
  margin: 0;
  color: var(--slate-600);
}

.support-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0 0;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--slate-200);
}

.support-detail-grid > div {
  min-width: 0;
  padding: 13px 15px;
  background: var(--white);
}

.support-detail-grid dt {
  color: var(--slate-500);
  font-size: 0.78rem;
  font-weight: 700;
}

.support-detail-grid dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--navy-950);
  font-weight: 700;
}

.support-actions {
  margin-top: 20px;
}

.support-preparation {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--slate-200);
}

.support-preparation-heading {
  display: flex;
  gap: 13px;
  align-items: center;
}

.support-preparation-heading h3,
.support-preparation-heading p {
  margin: 0;
}

.support-preparation-heading p {
  color: var(--slate-600);
  font-size: 0.9rem;
}

.support-preparation-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-100);
  color: var(--blue-700);
}

.support-preparation-icon svg {
  width: 23px;
  height: 23px;
}

.support-preparation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.support-preparation-list li {
  position: relative;
  padding: 13px 14px 13px 40px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.support-preparation-list li::before {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--slate-300);
  border-radius: 50%;
  content: "";
}

.support-preparation-list li.is-ready::before {
  border-color: var(--green-700);
  background: var(--green-100);
  box-shadow: inset 0 0 0 4px var(--green-100);
}

.support-preparation-list span,
.support-preparation-list strong {
  display: block;
}

.support-preparation-list span {
  color: var(--slate-500);
  font-size: 0.78rem;
}

.support-preparation-list strong {
  margin-top: 2px;
  color: var(--navy-950);
  font-size: 0.9rem;
}

.support-cost-note {
  margin-top: 22px;
  background: var(--orange-100);
}

.support-cost-note svg {
  color: var(--orange-700);
}

@media (max-width: 760px) {
  .warranty-options,
  .support-detail-grid,
  .support-preparation-list {
    grid-template-columns: 1fr;
  }

  .support-recommendation {
    padding: 20px;
  }

  .support-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .support-actions .button {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .section {
    padding: 54px 0;
  }

  .section-heading {
    margin-bottom: 24px;
  }

  .hero {
    padding: 42px 0 54px;
    background-position: 24% center;
  }

  .hero-grid {
    gap: 28px;
  }

  .quick-card {
    min-height: 156px;
    padding: 20px;
  }

  .result-layout,
  .model-layout {
    gap: 16px;
    padding: 24px 0 48px;
  }

  .main-column {
    gap: 16px;
  }

  .content-card,
  .decision-card {
    padding: 20px;
  }

  .mobile-product-summary {
    padding: 0;
  }

  .page-hero {
    padding: 22px 0 28px;
  }

  .page-title-row {
    margin-top: 22px;
  }
}

@media (max-width: 959px) {
  .result-layout > .side-column {
    display: none;
  }

  .mobile-product-summary {
    display: block;
    padding: 0;
    overflow: hidden;
  }

  .result-layout .main-column > .demo-alert { order: 0; }
  .result-layout .mobile-product-summary { order: 1; }
  .result-layout .decision-card { order: 2; }
  .result-layout #checks { order: 3; }
  .result-layout #repair-support { order: 4; }
  .result-layout #overview { order: 5; }
  .result-layout #part { order: 6; }
  .result-layout #decision { order: 7; }
  .result-layout #review-feature-slot { order: 8; }
  .result-layout #source { order: 9; }
}

@media (min-width: 1200px) {
  .manufacturer-grid-current {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .hero {
    min-height: 650px;
    display: grid;
    align-items: center;
  }

  .quick-card {
    min-height: 190px;
    padding: 24px;
  }
}

@media (max-width: 420px) {
  .container,
  .narrow-container {
    width: min(calc(100% - 28px), var(--content-width));
  }

  .header-inner {
    width: calc(100% - 24px);
  }

  .brand-subtitle {
    display: none;
  }

  .hero {
    padding-top: 34px;
    padding-bottom: 46px;
  }

  .search-suggestions {
    max-height: min(300px, 40dvh);
  }

  .hero h1 {
    font-size: 1.45rem;
    letter-spacing: -0.04em;
  }

  .definition-grid {
    grid-template-columns: 1fr;
  }

  .definition-grid > div,
  .definition-grid > div:nth-child(odd) {
    border-right: 0;
    border-bottom: 1px solid var(--slate-100);
  }

  .definition-grid > div:last-child {
    border-bottom: 0;
  }

  .summary-list > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .lookup-request > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .part-detail-grid,
  .model-facts {
    grid-template-columns: 1fr;
  }
}

/* 症状パイロット：既存の低装飾UIに合わせた段階的開示 */
.issue-layout {
  display: grid;
  gap: 22px;
  padding-top: 36px;
  padding-bottom: 72px;
}

.issue-switch {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.issue-switch a {
  padding: 10px 16px;
  color: var(--slate-700);
  font-weight: 700;
}

.issue-switch a.is-active {
  border-bottom: 3px solid var(--blue-600);
  color: var(--navy-900);
}

.symptom-chip-list,
.symptom-maker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.symptom-chip,
.symptom-maker-list a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 15px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  color: var(--navy-900);
  background: var(--white);
  font-weight: 700;
}

.symptom-chip:hover,
.symptom-chip.is-selected,
.symptom-maker-list a:hover {
  border-color: var(--blue-500);
  color: var(--blue-700);
  background: var(--blue-50);
}

.symptom-result > h2 {
  margin: 4px 0 8px;
}

.symptom-context {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.symptom-context span {
  color: var(--slate-600);
}

.symptom-action-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: symptom-step;
}

.symptom-action-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  counter-increment: symptom-step;
}

.symptom-action-list li::before {
  display: grid;
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--blue-600);
  font-size: 0.8rem;
  font-weight: 800;
  content: counter(symptom-step);
}

.symptom-action-list strong,
.symptom-action-list span {
  display: block;
}

.symptom-action-list span {
  color: var(--slate-700);
}

.symptom-next {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.symptom-consult-note {
  margin-top: 20px;
  color: var(--navy-900);
  font-weight: 700;
}

@media (max-width: 600px) {
  .issue-layout {
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .issue-switch a {
    flex: 1;
    padding-inline: 4px;
    font-size: 0.88rem;
    white-space: nowrap;
    text-align: center;
  }

  .symptom-chip-list {
    gap: 8px;
  }

  .symptom-chip {
    min-height: 38px;
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .symptom-context {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* 型番から探す */
.find-model-page {
  background: var(--white);
}

.find-model-intro {
  padding: 30px 0 38px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--blue-50);
}

.find-model-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.find-model-title h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.25;
  letter-spacing: -0.045em;
}

.find-model-title p {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--slate-700);
  line-height: 1.8;
}

.find-model-search-section {
  padding: 36px 0 28px;
}

.find-model-search-box {
  max-width: 900px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--slate-200);
}

.find-model-search-box h2,
.model-filter-heading h2,
.model-results-heading h2,
.label-help-copy h2 {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  line-height: 1.4;
}

.find-model-search-box form {
  margin-top: 18px;
}

.find-model-input-wrap > label {
  display: block;
  margin-bottom: 8px;
  color: var(--navy-950);
  font-size: 0.9rem;
  font-weight: 800;
}

.find-model-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.find-model-input-row .search-input-wrap {
  grid-column: auto;
}

.find-model-input-row .button {
  min-width: 118px;
}

.button-label-mobile {
  display: none;
}

.find-model-example {
  margin: 9px 0 0;
  color: var(--slate-600);
  font-size: 0.875rem;
}

.model-filter-panel {
  max-width: 1000px;
  padding-top: 28px;
}

.model-filter-heading,
.model-results-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.model-filter-heading p,
.model-results-heading p {
  margin: 4px 0 0;
  color: var(--slate-600);
  font-size: 0.875rem;
}

.filter-clear {
  min-height: 44px;
  padding: 7px 0;
  border: 0;
  color: var(--blue-700);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.model-filter-grid {
  display: grid;
  gap: 12px;
  margin-top: 17px;
}

.model-filter-grid label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--navy-950);
  font-size: 0.875rem;
  font-weight: 800;
}

.model-filter-grid select {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 38px 0 13px;
  border: 1px solid var(--slate-300);
  border-radius: 8px;
  color: var(--navy-950);
  background: var(--white);
  font-size: 16px;
  font-weight: 700;
}

.model-filter-grid select:disabled {
  color: var(--slate-500);
  background: var(--slate-100);
}

.active-filter-summary {
  min-height: 28px;
  margin-top: 15px;
  padding-left: 12px;
  border-left: 3px solid var(--blue-600);
  color: var(--slate-700);
  font-size: 0.875rem;
  font-weight: 700;
}

.find-model-results-section {
  padding: 34px 0 76px;
}

.model-results-heading {
  padding-bottom: 18px;
  border-bottom: 2px solid var(--navy-950);
}

.model-results-heading > strong {
  color: var(--blue-700);
  font-size: 1.15rem;
}

.model-result-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.model-result-list[hidden],
.model-pagination[hidden],
.model-no-results[hidden] {
  display: none;
}

.model-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 30px;
}

.model-page-button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--slate-300);
  border-radius: 7px;
  color: var(--navy-950);
  background: var(--white);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.model-page-button:hover:not(:disabled),
.model-page-button:focus-visible {
  border-color: var(--blue-700);
  color: var(--blue-700);
}

.model-page-button[aria-current="page"] {
  border-color: var(--blue-700);
  color: var(--white);
  background: var(--blue-700);
}

.model-page-button:disabled {
  color: var(--slate-500);
  background: var(--slate-100);
  cursor: default;
}

.model-page-direction {
  min-width: 72px;
}

.model-page-ellipsis {
  min-width: 24px;
  color: var(--slate-600);
  text-align: center;
}

.find-model-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--slate-200);
  border-radius: 9px;
  background: var(--white);
}

.find-model-card-top,
.find-model-card-main,
.find-model-card-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.find-model-maker {
  color: var(--slate-600);
  font-size: 0.875rem;
  font-weight: 800;
}

.find-model-card-main {
  margin-top: 14px;
}

.find-model-card-main h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.45rem, 4vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.find-model-card-main p {
  margin: 6px 0 0;
  color: var(--slate-700);
  font-size: 0.9rem;
}

.door-badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #b8d9e9;
  border-radius: 6px;
  color: var(--blue-700);
  background: var(--blue-50);
  font-size: 0.875rem;
  white-space: nowrap;
}

.find-model-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 17px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--slate-100);
  border-bottom: 1px solid var(--slate-100);
  color: var(--slate-600);
  font-size: 0.875rem;
  list-style: none;
}

.find-model-facts li:not(:last-child)::after {
  margin-left: 14px;
  color: var(--slate-300);
  content: "/";
}

.find-model-card-footer {
  margin-top: auto;
  padding-top: 17px;
  align-items: center;
}

.find-model-card-footer > div {
  display: grid;
  gap: 3px;
}

.find-model-card-footer small {
  color: var(--slate-600);
  font-size: 0.875rem;
}

.product-status {
  color: var(--green-700);
  font-size: 0.875rem;
  font-weight: 800;
}

.model-no-results {
  display: grid;
  max-width: 760px;
  justify-items: start;
  margin-top: 20px;
  padding: 28px;
  border: 1px dashed var(--slate-300);
  border-radius: 9px;
  background: var(--blue-50);
}

.model-no-results > svg {
  width: 34px;
  height: 34px;
  color: var(--blue-700);
}

.model-no-results h3 {
  margin: 13px 0 7px;
}

.model-no-results ul {
  margin: 0 0 19px;
  padding-left: 1.4em;
  color: var(--slate-700);
}

.model-label-help {
  padding: 68px 0;
  border-top: 1px solid var(--slate-200);
  background: var(--blue-50);
}

.model-label-help-grid {
  display: grid;
  gap: 28px;
  align-items: center;
}

.label-help-visual {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  border: 1px solid #c9dceb;
  border-radius: 9px;
  color: var(--navy-800);
  background: var(--white);
}

.label-help-visual svg {
  width: min(230px, 76%);
}

.label-help-visual span {
  margin-top: 7px;
  color: var(--slate-600);
  font-size: 0.875rem;
  font-weight: 700;
}

.label-help-copy > p {
  margin: 13px 0 0;
  color: var(--slate-700);
}

.label-help-note {
  margin: 20px 0 16px;
  padding: 17px 0;
  border-top: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
}

.label-help-note p {
  margin: 5px 0 0;
  color: var(--slate-600);
  font-size: 0.875rem;
}

@media (min-width: 680px) {
  .model-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .model-result-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-label-help-grid {
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 679px) {
  .find-model-intro {
    padding: 24px 0 30px;
  }

  .find-model-title .badge {
    order: -1;
  }

  .find-model-input-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .find-model-input-row .button {
    width: auto;
    min-width: 68px;
    padding-inline: 14px;
  }

  .find-model-search-submit .button-label-desktop {
    display: none;
  }

  .find-model-search-submit .button-label-mobile {
    display: inline;
  }

  .find-model-card-footer .button {
    width: 100%;
  }

  .find-model-card-footer {
    display: grid;
  }

  .find-model-card-footer .button {
    margin-top: 8px;
  }

  .model-label-help {
    padding: 52px 0;
  }
}

@media (max-width: 420px) {
  .find-model-search-section {
    padding-top: 28px;
  }

  .find-model-card {
    padding: 18px;
  }

  .find-model-card-main {
    display: grid;
  }

  .door-badge {
    justify-self: start;
  }

  .find-model-facts {
    display: grid;
    gap: 4px;
  }

  .find-model-facts li::after {
    display: none;
  }

  .model-no-results {
    padding: 22px 18px;
  }
}

/* エラーコードから探す */
.error-code-input,
.error-choice-code,
.error-code-group strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}

.error-filter-grid {
  max-width: 1000px;
}

.error-filter-panel {
  padding-top: 0;
}

.error-search-placeholder {
  display: grid;
  max-width: 780px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  margin-top: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--slate-200);
}

.error-search-placeholder[hidden],
.error-choice-list[hidden],
.error-model-helper[hidden] {
  display: none;
}

.error-search-placeholder > svg {
  width: 30px;
  height: 30px;
  color: var(--blue-700);
}

.error-search-placeholder h3,
.error-search-placeholder p {
  margin: 0;
}

.error-search-placeholder p {
  margin-top: 5px;
  color: var(--slate-600);
}

.error-choice-list {
  display: grid;
  gap: 10px;
  max-width: 900px;
  margin-top: 18px;
}

.error-choice-card {
  display: grid;
  width: 100%;
  min-height: 118px;
  grid-template-columns: minmax(90px, 0.28fr) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--slate-200);
  border-radius: 9px;
  color: var(--slate-700);
  background: var(--white);
  text-align: left;
  cursor: pointer;
}

.error-choice-card:hover {
  border-color: #9fc8dd;
  background: var(--blue-50);
}

.error-choice-code {
  color: var(--navy-950);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
}

.error-choice-context {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.error-choice-context strong {
  color: var(--navy-950);
}

.error-choice-context small {
  color: var(--slate-600);
  font-size: 0.875rem;
}

.error-choice-context b {
  color: var(--green-700);
  font-size: 0.875rem;
}

.error-choice-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue-700);
  font-size: 0.875rem;
  font-weight: 800;
  white-space: nowrap;
}

.error-choice-action svg {
  width: 17px;
  height: 17px;
}

.error-model-card .find-model-card-main h3 {
  color: var(--navy-950);
}

.error-applicability-note {
  display: grid;
  gap: 2px;
  padding: 13px 0;
  color: var(--green-700);
}

.error-applicability-note small {
  color: var(--slate-600);
  font-size: 0.875rem;
}

.error-model-helper {
  margin-top: 20px;
  padding: 17px 0;
  border-top: 1px solid var(--slate-200);
}

.error-model-helper p {
  margin: 0 0 3px;
  color: var(--slate-600);
}

.error-code-index-section {
  padding: 32px 0 66px;
  border-top: 1px solid var(--slate-200);
  background: var(--blue-50);
}

.error-code-groups {
  display: grid;
  gap: 16px;
}

.error-index-status {
  margin: 0 0 18px;
  color: var(--slate-600);
  font-size: 0.875rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.error-index-table-wrap {
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: 7px;
  background: var(--white);
}

.error-index-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
}

.error-index-table th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--slate-300);
  color: var(--slate-700);
  background: var(--blue-50);
  font-size: 0.8125rem;
  font-weight: 800;
  text-align: left;
}

.error-index-table th:nth-child(1) { width: 12%; }
.error-index-table th:nth-child(2) { width: 16%; }
.error-index-table th:nth-child(3) { width: 34%; }
.error-index-table th:nth-child(4) { width: 23%; }
.error-index-table th:nth-child(5) { width: 15%; }

.error-index-row td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--slate-200);
  color: var(--slate-700);
  font-size: 0.875rem;
  line-height: 1.55;
  vertical-align: middle;
}

.error-index-item:last-child .error-index-row td {
  border-bottom: 0;
}

.error-index-row:hover td {
  background: #fbfdff;
}

.error-table-code strong {
  color: var(--navy-950);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  line-height: 1;
}

.error-family-note {
  display: block;
  margin-top: 4px;
  color: var(--slate-600);
  font-size: 0.72rem;
  font-weight: 700;
}

.error-table-maker {
  color: var(--navy-800) !important;
  font-weight: 700;
}

.error-table-meaning {
  color: var(--navy-950) !important;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.error-primary-label {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.35;
}

.error-primary-label.is-stop {
  color: var(--red-700);
  background: var(--red-100);
}

.error-primary-label.is-check,
.error-primary-label.is-unplug {
  color: var(--orange-700);
  background: var(--orange-100);
}

.error-primary-label.is-self {
  color: var(--blue-700);
  background: var(--blue-100);
}

.error-table-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  border: 0;
  color: var(--blue-700);
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 800;
  cursor: pointer;
}

.error-table-toggle button:hover,
.error-table-toggle button:focus-visible {
  color: var(--navy-950);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.error-table-toggle button span:last-child {
  font-size: 1.05rem;
  line-height: 1;
}

.error-index-detail-row[hidden] {
  display: none;
}

.error-index-detail-row > td {
  padding: 0;
  border-bottom: 1px solid var(--slate-300);
  background: var(--blue-50);
}

.error-index-item:last-child .error-index-detail-row > td {
  border-bottom: 0;
}

.error-index-row-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 30px;
  padding: 24px 28px 26px;
  border-left: 3px solid var(--blue-600);
}

.error-index-row-detail h3 {
  margin: 0 0 5px;
  font-size: 0.875rem;
}

.error-index-row-detail p,
.error-index-row-detail li {
  margin: 0;
  color: var(--slate-700);
  font-size: 0.875rem;
  line-height: 1.7;
}

.error-index-row-detail ul {
  margin: 0;
  padding-left: 1.2em;
}

.error-detail-meta {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-top: 15px;
  border-top: 1px solid var(--slate-200);
}

.error-detail-meta strong {
  color: var(--navy-950);
}

.error-index-row-detail > .button {
  grid-column: 1 / -1;
  justify-self: start;
}

.error-code-group {
  padding: 20px 0;
  border-top: 2px solid var(--navy-950);
}

.error-code-group h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.error-code-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.error-code-group button {
  display: grid;
  min-width: 120px;
  min-height: 68px;
  justify-items: start;
  padding: 10px 14px;
  border: 1px solid var(--slate-300);
  border-radius: 7px;
  color: var(--navy-950);
  background: var(--white);
  cursor: pointer;
}

.error-code-group button:hover {
  border-color: var(--blue-600);
  background: var(--blue-100);
}

.error-code-group strong {
  font-size: 1.15rem;
}

.error-code-group span {
  color: var(--slate-600);
  font-size: 0.875rem;
}

.error-display-visual {
  position: relative;
  display: grid;
  min-height: 260px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #c9dceb;
  border-radius: 9px;
  color: var(--navy-800);
  background: var(--white);
}

.error-display-visual > div {
  position: absolute;
  z-index: 1;
  display: grid;
  width: 96px;
  height: 74px;
  place-items: center;
  align-content: center;
  border: 1px solid var(--slate-300);
  border-radius: 7px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.error-display-visual > div span {
  color: var(--slate-600);
  font-size: 0.875rem;
}

.error-display-visual > div strong {
  color: var(--blue-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.4rem;
}

.error-display-visual > svg {
  width: min(250px, 86%);
  opacity: 0.55;
}

@media (min-width: 680px) {
  .error-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .error-index-table-wrap {
    overflow: visible;
    border-radius: 5px;
  }

  .error-index-table,
  .error-index-table tbody {
    display: block;
    width: 100%;
  }

  .error-index-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .error-index-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--slate-200);
  }

  .error-index-item:last-child .error-index-row {
    border-bottom: 0;
  }

  .error-index-row td {
    display: block;
    padding: 0;
    border: 0;
  }

  .error-index-row:hover td {
    background: transparent;
  }

  .error-table-code {
    grid-column: 1;
    grid-row: 1;
  }

  .error-family-note {
    display: inline;
    margin: 0 0 0 5px;
  }

  .error-table-maker {
    grid-column: 2;
    grid-row: 1;
  }

  .error-table-meaning {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 2px !important;
  }

  .error-table-response {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .error-table-toggle {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
  }

  .error-index-detail-row {
    display: block;
  }

  .error-index-detail-row > td {
    display: block;
  }

  .error-index-row-detail {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 18px 22px;
  }

  .error-detail-meta,
  .error-index-row-detail > .button {
    grid-column: 1;
  }

  .error-index-row-detail > .button {
    width: 100%;
  }
}

@media (max-width: 679px) {
  .error-choice-card {
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
  }

  .error-choice-context {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .error-choice-action {
    grid-column: 2;
    grid-row: 1;
  }

  .error-search-placeholder {
    grid-template-columns: 1fr;
  }

  .error-code-index-section {
    padding: 28px 0 52px;
  }

}

@media (max-width: 420px) {
  body:has(.find-error-page) {
    min-width: 0;
  }

  .error-choice-card {
    padding: 16px;
  }

  .error-choice-action {
    font-size: 0;
  }

  .error-choice-action svg {
    width: 22px;
    height: 22px;
  }

  .error-code-group button {
    min-width: calc(50% - 5px);
  }
}

/* 一般利用者向けの補足文は、原則として14px以上にそろえる。 */
.eyebrow,
.brand-subtitle,
.demo-strip,
.site-nav a,
.hero-label,
.quick-card p,
.search-examples,
.example-button,
.privacy-note,
.step-copy small,
.category-card small,
.manufacturer-card p,
.manufacturer-note,
.trust-card p,
.safety-box p,
.footer-brand p,
.footer-links,
.footer-bottom,
.breadcrumb,
.badge,
.demo-alert,
.card-header p,
.product-card-header small,
.definition-grid dt,
.definition-grid dd,
.decision-card .status,
.summary-list dt,
.summary-list dd,
.check-list li::before,
.check-list strong,
.check-list span,
.no-disassembly,
.part-number,
.record-code,
.part-detail-grid small,
.part-detail-grid strong,
.judgment-hero small,
.judgment-list li,
.source-list li,
.section-nav strong,
.section-nav a,
.support-detail-grid dt,
.support-preparation-list span,
.model-heading > p,
.model-facts small,
.model-facts strong,
.record-main strong,
.record-main small,
.part-meta,
.dialog-note,
.candidate-card span:last-child,
.dialog-steps li {
  font-size: 0.875rem;
}

.cta-panel .eyebrow,
.cta-panel p,
.decision-card > p {
  font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* 修理か買い替えか */
.repair-replace-page {
  background: #fff;
}

.repair-replace-hero {
  padding: 30px 0 54px;
  background: var(--blue-50);
  border-bottom: 1px solid var(--slate-200);
}

.repair-replace-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 52px;
  align-items: end;
  margin-top: 26px;
}

.repair-replace-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.25rem, 5vw, 3.7rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.repair-replace-copy {
  margin: 0 0 16px;
  color: var(--navy-800);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.6;
}

.repair-replace-copy strong {
  color: var(--blue-700);
}

.repair-replace-hero-grid > div:first-child > p:last-child {
  max-width: 760px;
  margin: 0;
}

.repair-replace-hero-note {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 18px 0 18px 18px;
  border-left: 3px solid var(--blue-500);
}

.repair-replace-hero-note svg {
  width: 22px;
  color: var(--blue-700);
}

.repair-replace-hero-note p {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.875rem;
}

.repair-replace-tool {
  padding: 54px 0 72px;
}

.repair-replace-tool-grid {
  max-width: 1060px;
}

.repair-step-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 34px;
  border-bottom: 1px solid var(--slate-200);
}

.repair-step-progress button {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  cursor: pointer;
}

.repair-step-progress button span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--slate-300);
  border-radius: 50%;
  color: var(--slate-600);
  font-size: 0.8rem;
  font-weight: 700;
}

.repair-step-progress button strong {
  color: var(--slate-600);
  font-size: 0.9rem;
}

.repair-step-progress button[aria-current="step"] {
  border-color: var(--blue-700);
}

.repair-step-progress button[aria-current="step"] span,
.repair-step-progress button.is-complete span {
  border-color: var(--blue-700);
  color: #fff;
  background: var(--blue-700);
}

.repair-step-progress button[aria-current="step"] strong,
.repair-step-progress button.is-complete strong {
  color: var(--navy-950);
}

.repair-replace-form {
  min-width: 0;
}

.repair-step[hidden] {
  display: none !important;
}

.repair-step-heading {
  padding-bottom: 24px;
  border-bottom: 2px solid var(--navy-950);
}

.repair-step-heading-borderless {
  padding-bottom: 0;
  border-bottom: 0;
}

.repair-step-heading > span {
  color: var(--blue-700);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.repair-step-heading h2 {
  margin: 4px 0 4px;
  font-size: clamp(1.65rem, 3vw, 2rem);
}

.repair-step-heading p {
  margin: 0;
  color: var(--slate-600);
}

.repair-question,
.repair-model-search,
.repair-general-product,
.repair-error-input {
  margin: 0;
  padding: 30px 0;
  border: 0;
  border-bottom: 1px solid var(--slate-200);
}

.repair-question legend,
.repair-model-search > label,
.repair-error-input > label {
  display: block;
  margin-bottom: 14px;
  color: var(--navy-950);
  font-weight: 800;
}

.repair-question legend small,
.repair-select-question > span small,
.repair-select-grid label > span small,
.repair-model-search > label small,
.repair-error-input > label small {
  color: var(--slate-600);
  font-size: 0.875rem;
  font-weight: 500;
}

.repair-choice-grid,
.repair-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.repair-choice-grid.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.repair-choice-grid label,
.repair-checkbox-grid label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.repair-choice-grid input,
.repair-checkbox-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.repair-choice-grid label > span,
.repair-checkbox-grid label > span {
  display: flex;
  min-height: 56px;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 12px 44px 12px 14px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  color: var(--slate-700);
  background: #fff;
}

.repair-choice-grid label > span::before,
.repair-checkbox-grid label > span::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border: 1px solid var(--slate-300);
  border-radius: 50%;
  background: #fff;
}

.repair-checkbox-grid label > span::before {
  border-radius: 3px;
}

.repair-choice-grid input:checked + span,
.repair-checkbox-grid input:checked + span {
  border-color: var(--blue-700);
  background: var(--blue-50);
  box-shadow: 0 0 0 1px var(--blue-700);
}

.repair-choice-grid input:checked + span::before,
.repair-checkbox-grid input:checked + span::before {
  border: 4px solid var(--blue-700);
}

.repair-choice-grid input:focus-visible + span,
.repair-checkbox-grid input:focus-visible + span {
  outline: 3px solid #7bb9ef;
  outline-offset: 2px;
}

.repair-choice-grid strong {
  color: var(--navy-950);
}

.repair-choice-grid small {
  padding-right: 18px;
  color: var(--slate-600);
  font-size: 0.8rem;
}

.repair-model-search .search-input-wrap {
  position: relative;
  max-width: 720px;
}

.rr-model-suggestions {
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 360px;
  overflow-y: auto;
}

.rr-model-suggestion {
  display: grid;
  grid-template-columns: 125px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--slate-100);
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.rr-model-suggestion:hover,
.rr-model-suggestion.is-active {
  background: var(--blue-50);
}

.rr-model-suggestion strong {
  color: var(--navy-950);
  font-size: 1rem;
}

.rr-model-suggestion span,
.rr-model-suggestion small {
  color: var(--slate-600);
  font-size: 0.8rem;
}

.form-help {
  margin: 9px 0 0;
  color: var(--slate-600);
  font-size: 0.875rem;
}

.repair-product-confirmed,
.repair-product-unverified {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  max-width: 720px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--green-700);
  background: #fff;
}

.repair-product-unverified {
  display: block;
  border-left-color: var(--slate-500);
  background: var(--blue-50);
}

.repair-product-confirmed h3,
.repair-product-unverified h3 {
  margin: 3px 0;
}

.repair-product-confirmed p,
.repair-product-unverified p {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.875rem;
}

.repair-select-grid,
.repair-question-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.repair-question-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 30px 0;
  border-bottom: 1px solid var(--slate-200);
}

.repair-select-grid label,
.repair-select-question {
  display: grid;
  gap: 8px;
  color: var(--navy-950);
  font-weight: 700;
}

.repair-select-grid select,
.repair-select-question select,
.repair-error-input input,
.money-field input {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  color: var(--navy-950);
  background: #fff;
}

.repair-select-grid select,
.repair-select-question select {
  appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%23153A5B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 17px 17px;
}

.repair-question-safety {
  padding-top: 26px;
  background: linear-gradient(to right, transparent 0, transparent 12px, rgba(253, 234, 234, 0.35) 12px, rgba(253, 234, 234, 0.35) 16px, transparent 16px);
}

.repair-error-input {
  padding-left: 18px;
  border-left: 3px solid var(--blue-500);
}

.money-field {
  max-width: 420px;
  margin-top: 18px;
  padding: 16px;
  background: var(--blue-50);
}

.money-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--navy-950);
  font-weight: 700;
}

.money-field > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.money-field input {
  font-size: 1.2rem;
  font-weight: 800;
  text-align: right;
}

.input-error {
  min-height: 1.4em;
  margin: 5px 0 0;
  color: var(--red-700);
  font-size: 0.875rem;
}

.repair-step-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 28px;
}

.repair-decision-card {
  border: 1px solid var(--slate-200);
  border-left: 5px solid var(--blue-700);
  background: #fff;
}

.repair-decision-card.is-safety { border-left-color: var(--red-700); }
.repair-decision-card.is-compare { border-left-color: var(--orange-700); }
.repair-decision-card.is-repair { border-left-color: var(--green-700); }
.repair-decision-card.is-information { border-left-color: var(--slate-500); }

.repair-decision-summary {
  padding: 28px;
  border-bottom: 1px solid var(--slate-200);
}

.repair-decision-summary .badge {
  margin-bottom: 10px;
}

.repair-decision-summary h2 {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 4vw, 2.35rem);
}

.repair-decision-summary p {
  max-width: 760px;
  margin: 0;
}

.repair-ratio {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #f0d3aa;
  color: var(--orange-700);
  background: var(--orange-100);
}

.repair-ratio strong {
  display: block;
  font-size: 1.1rem;
}

.repair-ratio small {
  color: var(--slate-700);
}

.repair-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.repair-result-block {
  padding: 24px 28px;
  border-bottom: 1px solid var(--slate-200);
}

.repair-result-block:nth-child(odd) {
  border-right: 1px solid var(--slate-200);
}

.repair-result-block h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
}

.repair-result-block ul,
.repair-result-block ol {
  margin: 0;
  padding-left: 1.35em;
}

.repair-result-block li + li {
  margin-top: 7px;
}

.repair-official-context {
  padding: 24px 28px;
  background: var(--blue-50);
}

.repair-official-context h3 {
  margin: 0 0 12px;
}

.repair-context-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  margin: 0 0 18px;
}

.repair-context-list > div {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--slate-200);
}

.repair-context-list dt {
  color: var(--slate-600);
}

.repair-context-list dd {
  margin: 0;
  color: var(--navy-950);
  font-weight: 700;
  text-align: right;
}

.repair-support-inline {
  padding-top: 18px;
  border-top: 1px solid var(--slate-200);
}

.repair-support-inline h4,
.repair-support-inline p {
  margin: 0 0 8px;
}

.repair-warranty-contact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 20px 28px;
}

.repair-warranty-contact h4 {
  margin-top: 8px;
  color: var(--navy-950);
  font-size: 1.15rem;
}

.repair-warranty-contact dl {
  margin: 0;
}

.repair-warranty-contact dl > div {
  padding: 8px 0;
  border-bottom: 1px solid var(--slate-200);
}

.repair-warranty-contact dt {
  color: var(--slate-600);
  font-size: 0.875rem;
}

.repair-warranty-contact dd {
  margin: 2px 0 0;
  color: var(--navy-950);
  font-weight: 700;
}

.repair-warranty-contact .button-row,
.repair-warranty-contact .repair-source-note {
  grid-column: 1 / -1;
}

.repair-source-note {
  color: var(--slate-600);
  font-size: 0.875rem;
}

.repair-source-note a {
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.repair-guide-section {
  padding: 68px 0 84px;
  border-top: 1px solid var(--slate-200);
  background: var(--blue-50);
}

.repair-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  margin-top: 28px;
  border-top: 2px solid var(--navy-950);
}

.repair-guide-grid article {
  padding: 24px 0;
  border-bottom: 1px solid var(--slate-200);
}

.repair-guide-grid h3,
.repair-guide-grid p {
  margin: 0;
}

.repair-guide-grid h3 {
  margin-bottom: 7px;
  font-size: 1.05rem;
}

.repair-guide-grid p {
  color: var(--slate-600);
  font-size: 0.875rem;
}

@media (max-width: 860px) {
  .repair-replace-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .repair-choice-grid,
  .repair-checkbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .repair-question-grid,
  .repair-guide-grid {
    grid-template-columns: 1fr;
  }

  .repair-result-grid {
    grid-template-columns: 1fr;
  }

  .repair-result-block:nth-child(odd) {
    border-right: 0;
  }

  .repair-warranty-contact {
    grid-template-columns: 1fr;
  }

  .repair-warranty-contact .button-row,
  .repair-warranty-contact .repair-source-note {
    grid-column: auto;
  }
}

@media (max-width: 600px) {
  .repair-replace-hero {
    padding: 18px 0 34px;
  }

  .repair-replace-hero-grid {
    margin-top: 18px;
  }

  .repair-replace-hero h1 {
    margin-bottom: 12px;
    font-size: 2.1rem;
  }

  .repair-replace-copy {
    font-size: 1.05rem;
  }

  .repair-replace-hero-note {
    padding: 13px 0 13px 13px;
  }

  .repair-replace-tool {
    padding: 32px 0 52px;
  }

  .repair-step-progress {
    margin-right: -4px;
    margin-left: -4px;
  }

  .repair-step-progress button {
    min-width: 0;
    min-height: 58px;
    flex-direction: column;
    gap: 3px;
    padding: 7px 2px;
  }

  .repair-step-progress button span {
    width: 24px;
    height: 24px;
  }

  .repair-step-progress button strong {
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .repair-step-heading {
    padding-bottom: 18px;
  }

  .repair-question,
  .repair-model-search,
  .repair-general-product,
  .repair-error-input {
    padding: 24px 0;
  }

  .repair-choice-grid,
  .repair-choice-grid.two-columns,
  .repair-checkbox-grid,
  .repair-select-grid,
  .repair-context-list {
    grid-template-columns: 1fr;
  }

  .repair-choice-grid label > span,
  .repair-checkbox-grid label > span {
    min-height: 52px;
  }

  .rr-model-suggestion {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .repair-product-confirmed {
    grid-template-columns: 1fr;
  }

  .repair-step-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .repair-step-actions .button {
    width: 100%;
  }

  .repair-decision-summary,
  .repair-result-block,
  .repair-official-context {
    padding: 20px 18px;
  }

  .repair-result-block {
    border-right: 0;
  }

  .repair-guide-section {
    padding: 48px 0 60px;
  }
}

/* Cadesh text logo: rebalance the original icon-and-text lockup after removing the icon. */
.brand {
  gap: 0;
}

.brand > span {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}

.brand-name {
  font-size: 2.4rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.brand-subtitle {
  margin-top: 0;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.2;
}

.footer-brand .brand-subtitle {
  border-left-color: rgb(255 255 255 / 28%);
}

.footer-brand .brand-name {
  font-size: 1.5rem;
}

@media (max-width: 420px) {
  .brand-name {
    font-size: 1.65rem;
  }

  .brand-subtitle {
    display: block;
  }
}