/* The three reference pages - 서비스 소개, 분석 기준, 개인정보처리방침 - share
   one wide-screen frame: their section menu on the left, the page itself on
   the right. Below the breakpoint the wrapper generates no box and the menu is
   hidden, so every smaller window lays out exactly as it did before. */
.info-split { display: contents; }
.info-split__nav { display: none; }

@media (min-width: 1024px) {
  .info-split {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    column-gap: clamp(24px, 2.6vw, 48px);
    align-items: start;
    /* One measure for all three pages (1124px = the 개인정보처리방침 page), so
       the section menu always starts at the same x. Narrower windows fall back
       to the full shell width, which is identical on the three pages anyway. */
    width: min(1124px, 100%);
    margin-inline: auto;
  }

  .info-split__nav {
    position: sticky;
    top: 24px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: calc(100vh - 48px);
    overflow: auto;
    margin-top: 40px;
    padding: 2px 14px 10px 0;
    border-right: 1px solid rgba(111, 155, 176, .22);
  }

  .info-split__nav a {
    display: block;
    padding: 9px 10px 9px 12px;
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
    color: #93a7b1;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 620;
    line-height: 1.4;
    letter-spacing: -.02em;
    text-decoration: none;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
  }

  .info-split__nav a:hover {
    color: #dcebee;
    background: rgba(57, 102, 117, .14);
  }

  .info-split__nav a[aria-current="page"] {
    border-left-color: #31d9d8;
    background: rgba(57, 102, 117, .18);
    color: #eaf7f8;
    font-weight: 750;
  }

  .info-split__nav a:focus-visible {
    outline: 1px solid #3ecad0;
    outline-offset: -1px;
  }
}