.tb-guide,
.tb-guide-index {
  --tb-border: #dfe3e8;
  --tb-ink: #17202a;
  --tb-muted: #65717e;
  --tb-accent: #315b85;
  color: var(--tb-ink);
  font-family: Arial, Helvetica, sans-serif;
}

.tb-guide-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 12px;
  border: 1px solid var(--tb-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(31, 45, 61, 0.07);
  -webkit-overflow-scrolling: touch;
}

.tb-guide-scroll:focus-visible {
  outline: 3px solid rgba(49, 91, 133, 0.35);
  outline-offset: 3px;
}

.tb-guide .grid-container {
  width: max-content;
  min-width: 100%;
}

.tb-guide .waffle {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  max-width: none;
}

.tb-guide .waffle td {
  box-sizing: border-box;
}

.tb-guide .waffle img {
  display: block;
  max-width: 100%;
  height: auto;
}

.tb-guide .softmerge-inner {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-guide-index ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-guide-index a {
  display: flex;
  min-height: 92px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 18px 20px;
  border: 1px solid var(--tb-border);
  border-radius: 12px;
  color: var(--tb-ink);
  background: #fff;
  box-shadow: 0 5px 18px rgba(31, 45, 61, 0.06);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.tb-guide-index a:hover,
.tb-guide-index a:focus-visible {
  border-color: #9aafc3;
  box-shadow: 0 9px 26px rgba(31, 45, 61, 0.12);
  transform: translateY(-2px);
}

.tb-guide-index span {
  color: var(--tb-accent);
  font-size: 1.08rem;
  font-weight: 700;
}

.tb-guide-index small {
  color: var(--tb-muted);
  font-size: 0.82rem;
}

@media (max-width: 680px) {
  .tb-guide-scroll {
    margin-inline: -12px;
    width: calc(100% + 24px);
    border-radius: 8px;
  }
}