.route-index {
  position: fixed;
  inset: 0 auto 0 0;
  width: 264px;
  overflow-y: auto;
  background: var(--index-paper);
  padding: 27px 19px 25px;
  scrollbar-width: thin;
}
.guide-name { display: flex; flex-direction: column; justify-content: center; min-height: 70px; margin: 0 10px 22px; color: var(--ink); font-weight: 600; font-size: 19px; line-height: 1.4; text-decoration: none; }
.guide-name span { display: block; font-size: 16px; font-weight: 400; color: var(--secondary); margin-top: 7px; }
.index-group { margin-bottom: 19px; }
.index-group p { padding: 0 12px; margin: 0 0 7px; color: var(--secondary); font-size: 16px; }
.index-group ul { padding: 0; margin: 0; list-style: none; }
.index-group li { padding: 0; margin: 1px 0; }
.index-group a { display: flex; align-items: center; min-height: 46px; padding: 8px 12px; border-radius: 12px; font-size: 16px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.index-group a:hover { background: #e3e7dd; }
.index-group a[aria-current="page"] { background: #d9e6d9; color: #214b38; font-weight: 600; }
.return-to-reading { display: none; }

@media (max-width: 760px) {
  .route-index { position: static; width: 100%; padding: 30px 24px; }
  .guide-name { margin-left: 0; margin-right: 0; }
  .index-group { margin-bottom: 27px; }
  .index-group a { min-height: 48px; padding-left: 14px; }
  .return-to-reading { display: flex; align-items: center; min-height: 48px; margin-top: 16px; }
}