.navigation-lesson .lesson-phase {
  margin: 0 0 12px;
  color: #687b65;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.navigation-lesson > section {
  padding-bottom: 28px;
  border-bottom: 1px solid #d5ded4;
}
.navigation-lesson h3 {
  margin-top: 30px;
  font-size: 1.12rem;
}
.navigation-lesson .lesson-figure {
  margin: 26px 0;
  overflow: hidden;
  border: 1px solid #c7d5cb;
  border-radius: 14px;
  background: #fffdf7;
  break-inside: avoid;
}
.lesson-figure > img,
.lesson-figure > svg {
  display: block;
  width: 100%;
  height: auto;
}
.lesson-figure figcaption {
  padding: 18px 22px;
  border-top: 1px solid #d5ded4;
  font-size: 0.86rem;
  line-height: 1.55;
}
.lesson-figure figcaption strong {
  color: #8f4b2b;
}
.lesson-coordinate {
  display: grid;
  gap: 6px;
  padding: 20px 24px;
  margin: 20px 0;
  border-radius: 10px;
  background: #193f44;
  color: #fffdf7;
  font-variant-numeric: tabular-nums;
}
.lesson-coordinate strong {
  font-size: clamp(1rem, 2.2vw, 1.35rem);
}
.lesson-coordinate span {
  font-size: 0.82rem;
  color: #cde0d6;
}
.position-steps {
  padding: 18px 22px 0;
}
.position-steps [role="group"] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.position-steps button {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #aebfb3;
  border-radius: 7px;
  background: #fffdf7;
  color: #244e45;
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.position-steps button[aria-pressed="true"] {
  color: #fffdf7;
  background: #265b4d;
}
.position-steps button:focus-visible {
  outline: 3px solid #b77737;
  outline-offset: 3px;
}
.navigation-lesson .position-steps p {
  font-size: 0.86rem;
  margin: 14px 0 18px;
  min-height: 4.6em;
}
.position-example [data-position-layer] {
  transition: opacity 350ms ease;
}
.position-example [data-position-layer].is-muted {
  opacity: 0;
}
.lesson-table-wrap {
  overflow-x: auto;
  border: 1px solid #c7d5cb;
  border-radius: 10px;
  margin: 24px 0;
}
.lesson-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  text-align: left;
}
.lesson-table caption {
  padding: 16px;
  text-align: left;
  font-weight: 700;
  background: #e6eee7;
}
.lesson-table td,
.lesson-table th {
  padding: 14px 16px;
  border-top: 1px solid #d5ded4;
  vertical-align: top;
}
.lesson-table th {
  font-weight: 650;
}
.lesson-table td:first-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.navigation-lesson .lesson-link {
  display: inline-block;
  padding: 10px 0;
  color: #864320;
  font-weight: 650;
}
@media (min-width: 1001px) {
  .navigation-page .detail-layout > nav {
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
@media (max-width: 600px) {
  .position-steps,
  .lesson-figure figcaption {
    padding-left: 14px;
    padding-right: 14px;
  }
  .position-steps button {
    flex: 1;
    padding-inline: 8px;
  }
  .position-steps button span {
    display: block;
  }
  .navigation-lesson .position-steps p {
    min-height: 7.8em;
  }
  .lesson-table td,
  .lesson-table th {
    padding: 12px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .position-example [data-position-layer] {
    transition: none;
  }
}
@media print {
  .position-steps {
    display: none;
  }
  .position-example [data-position-layer].is-muted {
    opacity: 1;
  }
  .position-example [data-position-layer="ruler-lat"],
  .position-example [data-position-layer="ruler-lon"] {
    display: none;
  }
}