.guides-index {
  max-width: 840px;
  margin: clamp(80px, 12vh, 128px) auto 0;
}

.guides-group + .guides-group { margin-top: 80px; }

.guides-group h2 {
  margin-bottom: 16px;
  color: var(--text);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.guides-group ul { list-style: none; }

.guides-group li { border-top: 1px solid var(--hair-2); }
.guides-group li:last-child { border-bottom: 1px solid var(--hair-2); }

.guides-main .guides-group a {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: baseline;
  padding: 20px 0 22px;
  border-bottom: 0;
}

.guides-main .guides-group a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

.guide-name {
  color: var(--text);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.guide-description {
  color: var(--text-2);
  font-size: var(--t-body);
  line-height: 1.55;
}

.guides-main .guides-group a:hover .guide-name,
.guides-main .guides-group a:focus-visible .guide-name { text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 640px) {
  .guides-index { margin-top: var(--s-checkin); }
  .guides-group + .guides-group { margin-top: var(--s-checkin); }
  .guides-main .guides-group a { grid-template-columns: 1fr; gap: 7px; padding: 18px 0 22px; }
}