.guide-page {
  background: #f4f7f6;
  color: #263b41;
  font-size: 14px;
}

.guide-page .site-version,
.guide-page .app-version-label,
.guide-page .topbar-title-v2 {
  font-size: 12px;
}

.guide-page .topbar h1 {
  max-width: min(52vw, 380px);
}

.guide-page .topbar h1::after {
  display: none;
}

.guide-primary-link,
.guide-start-button,
.guide-dialog-foot a {
  border-color: #0f766e;
  background: #0f766e;
  color: #fff;
}

.guide-primary-link:hover,
.guide-primary-link:focus-visible,
.guide-start-button:hover,
.guide-start-button:focus-visible,
.guide-dialog-foot a:hover,
.guide-dialog-foot a:focus-visible {
  border-color: #0b625c;
  background: #0b625c;
  color: #fff;
}

.guide-shell {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
  padding: 22px 0 34px;
}

.guide-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 18px;
  border-bottom: 1px solid #ccd8d6;
}

.guide-intro-copy {
  max-width: 760px;
}

.guide-kicker {
  margin: 0 0 3px;
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}

.guide-intro h2,
.guide-section-heading h2 {
  margin: 0;
  color: #17282d;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0;
}

.guide-intro p:last-child {
  margin: 8px 0 0;
  color: #52656c;
  font-size: 15px;
  line-height: 1.7;
}

.guide-intro p:last-child strong {
  color: #2b4147;
  font-weight: 900;
}

.guide-start-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 15px;
  border: 1px solid #0f766e;
  border-radius: 7px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(15, 118, 110, .16);
}

.guide-start-button span {
  font-size: 17px;
}

.guide-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid #d7e0df;
}

.guide-flow-step {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 9px;
  border: 1px solid #d4dedc;
  border-radius: 7px;
  background: #fff;
}

.guide-icon {
  display: block;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  color: #38545b;
  fill: currentColor;
}

.guide-flow-step span {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: #2d4147;
  line-height: 1.25;
}

.guide-flow-step small {
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}

.guide-flow-step strong {
  color: #2d4147;
  font-size: 13px;
  font-weight: 900;
}

.guide-flow-step em {
  color: #78898e;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.guide-flow-arrow {
  color: #809398;
  font-size: 16px;
  font-weight: 900;
}

.guide-index,
.guide-basics,
.guide-tips,
.guide-faq {
  padding: 28px 0 0;
}

.guide-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.guide-section-heading > p {
  max-width: 560px;
  margin: 0;
  color: #697a80;
  font-size: 13px;
  line-height: 1.6;
}

.guide-finder {
  display: grid;
  grid-template-columns: auto minmax(280px, 470px) minmax(220px, 1fr);
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-top: 1px solid #d5dfde;
  border-bottom: 1px solid #d5dfde;
  background: #fff;
}

.guide-finder label {
  color: #263f45;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.guide-finder-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
}

.guide-finder input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid #bfcfcd;
  border-radius: 6px;
  background: #fff;
  color: #243b41;
  font: inherit;
  font-size: 14px;
}

.guide-finder input:focus {
  border-color: #0f766e;
  outline: 3px solid rgba(15, 118, 110, .13);
}

.guide-finder button {
  min-height: 42px;
  padding: 7px 11px;
  border: 1px solid #bfcfcd;
  border-radius: 6px;
  background: #eef4f2;
  color: #355057;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.guide-finder button:hover,
.guide-finder button:focus-visible {
  border-color: #7ba9a4;
  background: #e3efec;
  outline: none;
}

.guide-finder button[hidden] {
  display: none;
}

.guide-finder > p {
  margin: 0;
  color: #6c7d82;
  font-size: 12px;
  line-height: 1.55;
}

.guide-search-empty {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid #d5dfde;
  background: #fff;
  color: #596c72;
  font-size: 13px;
  text-align: center;
}

.guide-search-empty[hidden],
.guide-index-group[hidden],
.guide-index-item[hidden] {
  display: none;
}

.guide-index-group + .guide-index-group {
  margin-top: 20px;
}

.guide-index-group h3 {
  margin: 0 0 7px;
  padding-left: 8px;
  border-left: 3px solid #77a9a2;
  color: #52656c;
  font-size: 13px;
  line-height: 1.4;
}

.guide-index-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.guide-index-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  min-height: 94px;
  border: 1px solid #d3dddd;
  border-radius: 7px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(23, 33, 38, .035);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.guide-index-item:hover,
.guide-index-item:focus-visible {
  border-color: #8ab8b3;
  box-shadow: 0 4px 13px rgba(23, 78, 74, .09);
  outline: none;
  transform: translateY(-1px);
}

.guide-index-icon {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #e1e8e7;
  background: #f2f7f5;
  color: #245850;
}

.guide-index-icon .guide-icon {
  width: 27px;
  height: 27px;
}

.guide-index-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
}

.guide-index-copy strong {
  color: #1e3036;
  font-size: 15px;
  line-height: 1.35;
}

.guide-index-copy small {
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.guide-index-copy span {
  color: #63747a;
  font-size: 13px;
  line-height: 1.6;
}

.guide-index-open {
  color: #71878b;
  font-size: 25px;
  line-height: 1;
}

.guide-parts-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
  padding: 0 14px;
  border-top: 1px solid #d5dfde;
  border-bottom: 1px solid #d5dfde;
  background: #fff;
}

.guide-parts-map article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  min-width: 0;
  padding: 15px 0;
  border-bottom: 1px solid #e1e8e7;
}

.guide-parts-map article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.guide-part-icon {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9e4e1;
  border-radius: 7px;
  background: #f1f7f5;
  color: #245850;
}

.guide-part-icon .guide-icon {
  width: 27px;
  height: 27px;
}

.guide-parts-map article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.guide-parts-map strong {
  color: #20373d;
  font-size: 14px;
  line-height: 1.35;
}

.guide-parts-map small {
  color: #425b62;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.guide-parts-map p {
  margin: 2px 0 0;
  color: #68797e;
  font-size: 13px;
  line-height: 1.7;
}

.guide-tips ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guide-tip;
}

.guide-tips li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 10px;
  padding: 12px;
  border-left: 3px solid #5b9c93;
  background: #fff;
  counter-increment: guide-tip;
}

.guide-tips li::before {
  grid-row: 1 / span 2;
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e3f0ed;
  color: #0f766e;
  content: counter(guide-tip);
  font-size: 12px;
  font-weight: 900;
}

.guide-tips strong {
  color: #22373d;
  font-size: 14px;
}

.guide-tips span {
  color: #65757b;
  font-size: 13px;
  line-height: 1.65;
}

.guide-faq-list {
  border-top: 1px solid #d2dcdb;
}

.guide-faq details {
  border-bottom: 1px solid #d2dcdb;
  background: #fff;
}

.guide-faq summary {
  position: relative;
  padding: 13px 42px 13px 15px;
  color: #263b41;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
}

.guide-faq summary::-webkit-details-marker {
  display: none;
}

.guide-faq summary::after {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  color: #0f766e;
  content: "+";
  font-size: 19px;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
}

.guide-faq details[open] summary::after {
  content: "−";
}

.guide-faq details p {
  margin: -3px 0 0;
  padding: 0 15px 14px;
  color: #5d6f75;
  font-size: 13px;
  line-height: 1.7;
}

.guide-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
  padding: 18px 0;
  border-top: 1px solid #cfdad8;
  border-bottom: 1px solid #cfdad8;
}

.guide-end > div {
  display: grid;
  gap: 2px;
}

.guide-end strong {
  color: #23373d;
  font-size: 16px;
}

.guide-end span {
  color: #68787e;
  font-size: 13px;
}

.guide-site-footer {
  margin-top: 8px;
}

html.guide-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.guide-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.guide-dialog {
  width: min(920px, calc(100vw - 2rem));
  max-width: 920px;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid #bfcac9;
  border-radius: 8px;
  background: #fff;
  color: #1d2d32;
  box-shadow: 0 24px 70px rgba(15, 32, 38, .28);
  overflow: hidden;
}

.guide-dialog::backdrop {
  background: rgba(22, 34, 39, .58);
}

.guide-dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 2rem);
}

.guide-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 9px 10px 9px 16px;
  border-bottom: 1px solid #d7dfde;
  background: #f7faf9;
}

.guide-dialog-head > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.guide-dialog-head span {
  display: grid;
  min-width: 0;
}

.guide-dialog-head small {
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}

.guide-dialog-head strong {
  color: #1c3036;
  font-size: 18px;
  line-height: 1.3;
}

.guide-dialog-head button {
  display: inline-flex;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
  border: 1px solid #c8d3d2;
  border-radius: 6px;
  background: #fff;
  color: #42565c;
  font-size: 22px;
  line-height: 1;
}

.guide-dialog-head button:hover,
.guide-dialog-head button:focus-visible {
  border-color: #7f9c98;
  background: #edf5f3;
  outline: none;
}

.guide-dialog-scroll {
  min-height: 0;
  padding: 18px 20px 22px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.guide-dialog-scroll .guide-lead {
  margin: 0 0 15px;
  color: #40545b;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.75;
}

.guide-dialog-scroll .guide-lead strong {
  color: #223a40;
  font-weight: 900;
}

.guide-dialog-scroll figure {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 18px;
  padding: 8px;
  border: 1px solid #d6dfde;
  border-radius: 7px;
  background: #f8faf9;
}

.guide-dialog-scroll figure.guide-figure-wide {
  width: 100%;
}

.guide-dialog-scroll figure.guide-figure-wide img {
  width: 100%;
}

.guide-dialog-scroll figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid #e2e7e6;
  background: #fff;
}

.guide-image-stage {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.guide-image-stage-wide {
  max-width: none;
}

.guide-image-highlight {
  position: absolute;
  top: 29%;
  height: 33%;
  border: 3px solid #d97706;
  border-radius: 7px;
  background: rgba(255, 247, 237, .13);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 3px 8px rgba(120, 53, 15, .25);
  pointer-events: none;
}

.guide-image-highlight.is-ai-build {
  left: 6.5%;
  width: 21.5%;
}

.guide-image-highlight.is-text-import {
  left: 28.5%;
  width: 22.5%;
}

.guide-image-highlight.is-ai-structure-check {
  left: 50.5%;
  width: 21.5%;
}

.guide-image-highlight.is-ai-performance-check {
  left: 72.5%;
  width: 21%;
}

.guide-image-highlight b {
  position: absolute;
  top: -12px;
  right: -10px;
  display: flex;
  width: 23px;
  height: 23px;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #b45309;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(80, 38, 10, .25);
}

.guide-image-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 9px;
}

.guide-image-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4b5f65;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.guide-image-key b {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #b45309;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.guide-image-label {
  position: absolute;
  left: 10px;
  z-index: 1;
  padding: 5px 9px;
  border: 2px solid #fff;
  border-radius: 5px;
  background: #0f766e;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  box-shadow: 0 2px 6px rgba(18, 62, 58, .22);
  pointer-events: none;
}

.guide-image-label.is-search-filter {
  top: 10px;
}

.guide-image-label.is-search-results {
  top: 58%;
}

.guide-figure-action-inline {
  margin-bottom: 16px;
}

.guide-dialog-scroll figcaption {
  margin-top: 7px;
  color: #6c7b80;
  font-size: 12px;
  line-height: 1.65;
}

.guide-dialog-scroll h3 {
  margin: 20px 0 7px;
  color: #263b41;
  font-size: 15px;
  font-weight: 900;
}

.guide-dialog-scroll ol,
.guide-dialog-scroll ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 24px;
  color: #4f6268;
  font-size: 13px;
  line-height: 1.7;
}

.guide-dialog-scroll li::marker {
  color: #0f766e;
  font-weight: 900;
}

.guide-dialog-scroll aside {
  margin-top: 18px;
  padding: 10px 12px;
  border-left: 3px solid #d69a32;
  background: #fff9eb;
}

.guide-dialog-scroll aside strong {
  color: #7c5819;
  font-size: 13px;
}

.guide-dialog-scroll aside p {
  margin: 2px 0 0;
  color: #655c48;
  font-size: 13px;
  line-height: 1.7;
}

.guide-detail-split {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.guide-detail-split.guide-detail-split-check {
  grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
}

.guide-detail-split.guide-detail-split-compact {
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
}

.guide-detail-split > figure {
  width: 100%;
  margin: 0;
}

.guide-detail-copy {
  min-width: 0;
}

.guide-detail-copy > h3:first-child,
.guide-detail-columns > div > h3:first-child {
  margin-top: 0;
}

.guide-context,
.guide-result {
  padding: 2px 0 2px 11px;
  border-left: 3px solid #69a59d;
}

.guide-context + h3,
.guide-result + h3 {
  margin-top: 17px;
}

.guide-result {
  margin-top: 17px;
  border-left-color: #7a98a0;
}

.guide-context strong,
.guide-result strong {
  color: #28464b;
  font-size: 13px;
}

.guide-context p,
.guide-result p {
  margin: 3px 0 0;
  color: #5d7076;
  font-size: 13px;
  line-height: 1.7;
}

.guide-detail-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 17px;
}

.guide-dialog-foot {
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px;
  border-top: 1px solid #d7dfde;
  background: #f7faf9;
}

.guide-dialog-foot a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 6px 13px;
  border: 1px solid #0f766e;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.guide-example-text {
  padding: 10px 12px;
  border: 1px solid #d5dfde;
  border-radius: 6px;
  background: #f4f7f6;
  color: #3e5258;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  line-height: 1.65;
}

.guide-mini-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}

.guide-mini-flow span {
  padding: 10px 7px;
  border: 1px solid #d1dcda;
  border-radius: 6px;
  background: #f7faf9;
  color: #3f555b;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.guide-mini-flow b {
  color: #829397;
}

.guide-status-explain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.guide-status-explain > div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-left: 4px solid;
}

.guide-status-explain strong {
  font-size: 13px;
}

.guide-status-explain span {
  color: #64747a;
  font-size: 12px;
  line-height: 1.6;
}

.guide-status-explain .is-error {
  border-color: #c2410c;
  background: #fff2ed;
}

.guide-status-explain .is-note {
  border-color: #d09a34;
  background: #fff9ea;
}

.guide-compare-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.guide-compare-list div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #d8e0df;
  border-radius: 6px;
}

.guide-compare-list dt {
  color: #294249;
  font-size: 13px;
  font-weight: 900;
}

.guide-compare-list dd {
  margin: 0;
  color: #5f7076;
  font-size: 12px;
  line-height: 1.6;
}

.guide-share-visual {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.guide-share-visual div {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid #d4dedc;
  border-radius: 7px;
  background: #f8faf9;
  text-align: center;
}

.guide-share-visual strong {
  color: #2d454b;
  font-size: 13px;
}

.guide-share-visual span {
  color: #6c7b80;
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .guide-page .topbar {
    gap: 8px;
  }

  .guide-page .topbar-brand {
    align-items: center;
  }

  .guide-page .topbar h1 {
    max-width: 56vw;
    font-size: 21px;
  }

  .guide-page .topbar-actions {
    justify-content: flex-start;
  }

  .guide-shell {
    width: min(100% - 20px, 720px);
    padding-top: 10px;
  }

  .guide-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    padding: 14px 0;
  }

  .guide-intro h2,
  .guide-section-heading h2 {
    font-size: 19px;
  }

  .guide-start-button {
    width: 100%;
  }

  .guide-flow {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 12px 0;
  }

  .guide-flow-arrow {
    display: none;
  }

  .guide-flow-step {
    justify-content: flex-start;
  }

  .guide-index,
  .guide-basics,
  .guide-tips,
  .guide-faq {
    padding-top: 22px;
  }

  .guide-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .guide-finder {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 11px 12px;
  }

  .guide-index-list,
  .guide-tips ol {
    grid-template-columns: 1fr;
  }

  .guide-end {
    align-items: flex-start;
    flex-direction: column;
  }

  .guide-dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .guide-dialog-shell {
    max-height: calc(100dvh - 1rem);
  }

  .guide-dialog-head {
    min-height: 56px;
    padding: 7px 7px 7px 11px;
  }

  .guide-dialog-head strong {
    font-size: 17px;
  }

  .guide-dialog-scroll {
    padding: 13px 13px 18px;
    scrollbar-gutter: auto;
  }

  .guide-dialog-scroll .guide-lead {
    font-size: 15px;
  }

  .guide-status-explain,
  .guide-share-visual {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .guide-detail-split,
  .guide-detail-split.guide-detail-split-check,
  .guide-detail-split.guide-detail-split-compact,
  .guide-detail-columns {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .guide-detail-split > figure {
    width: fit-content;
    margin: 0 auto;
  }

  .guide-detail-columns > div + div {
    padding-top: 2px;
    border-top: 1px solid #e0e7e6;
  }
}

@media (max-width: 480px) {
  .guide-page .site-logo-link {
    width: 96px;
  }

  .guide-page .topbar h1 {
    max-width: 58vw;
    font-size: 18px;
  }

  .guide-page .topbar-title-sub-in {
    font-size: 12px;
  }

  .guide-page .app-version-label {
    display: none;
  }

  .guide-page .topbar-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .guide-page .feedback-button {
    min-width: 0;
    min-height: 40px;
    padding: 6px 4px;
    font-size: 12px;
    text-align: center;
  }

  .guide-index-item {
    min-height: 92px;
  }

  .guide-index-copy {
    padding: 9px 9px;
  }

  .guide-index-copy strong {
    font-size: 14px;
  }

  .guide-index-copy span {
    font-size: 13px;
  }

  .guide-parts-map {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }

  .guide-parts-map article:nth-last-child(-n + 2) {
    border-bottom: 1px solid #e1e8e7;
  }

  .guide-parts-map article:last-child {
    border-bottom: 0;
  }

  .guide-mini-flow {
    grid-template-columns: 1fr;
  }

  .guide-mini-flow b {
    line-height: 1;
    text-align: center;
    transform: rotate(90deg);
  }

  .guide-compare-list div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .guide-dialog-foot a {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-index-item {
    transition: none;
  }
}