/* Right-side dot rail (desktop 2xl+) */
    .sag-dot-rail{
      position: fixed;
      top: 90px; /* Keep the rail and its labels below the site's sticky header. */
      bottom: 15px;
      right: 10px;
      width: 14px;
      z-index: 60; /* keep above global header (z-50) */
      pointer-events: auto;
      --label-max: 220px;
      --rail-trigger-width: 96px;
      --rail-open-width: 280px;
    }
    .sag-dot-rail:focus{ outline: none; }

    /* Keep a usable entry strip, then bridge the whole label area while open.
       JavaScript bounds both widths to the empty gutter outside the content. */
    .sag-dot-rail::before{
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: calc(-1 * var(--rail-trigger-width));
      right: 0;
      background: transparent;
    }
    .sag-dot-rail:hover::before,
    .sag-dot-rail:focus-within::before{
      left: calc(-1 * var(--rail-open-width));
    }

    /* Vertical track is intentionally hidden (requested) */
    .sag-dot-track{ display:none; }

    .sag-dot{
      position:absolute;
      left:50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      border-radius: 9999px;
      background: rgba(255,255,255,0.55);
      border: 1px solid rgba(255,255,255,0.20);
      cursor: pointer;
      padding: 0;
      line-height: 0;
    }

    /* Small hit target bridges the gap to a visible label. */
    .sag-dot::before{
      content: "";
      position: absolute;
      top: 50%;
      left: -24px;
      width: 38px;
      height: 34px;
      transform: translateY(-50%);
      background: transparent;
    }
    .sag-dot:hover,
    .sag-dot:focus-visible{
      background: rgba(255,255,255,0.90);
      border-color: rgba(255,255,255,0.40);
      outline: none;
    }
    .sag-dot.is-active{
      background: rgba(255,255,255,0.95);
      border-color: rgba(255,255,255,0.55);
      width: 10px;
      height: 10px;
    }

    /* Labels: square box, show one on dot hover, show all on rail hover (including expanded hover zone) */
    .sag-dot-label{
      position: absolute;
      right: 20px;
      top: calc(50% + var(--label-shift, 0px));
      transform: translateY(-50%);
      white-space: nowrap;
      max-width: var(--label-max, 220px);
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      font-weight: 900;
      color: rgba(255,255,255,0.95);
      background: rgba(0,0,0,0.70);
      border: 1px solid rgba(255,255,255,0.18);
      /* 기본 패딩은 이전(작은) 크기로 */
      padding: 6px 10px;
      /* 체감 크기만 살짝 키움(글자 크기 유지) */
      min-height: 28px;
      min-width: min(92px, var(--label-max, 220px));
      display: inline-flex;
      align-items: center;
      border-radius: 0; /* square box */
      box-shadow: 0 8px 18px rgba(0,0,0,0.35);

      opacity: 0;
      visibility: hidden;
      pointer-events: auto; /* Hidden labels use visibility:hidden and cannot intercept clicks. */
      transition: opacity .12s ease, transform .12s ease, visibility .12s ease, background .12s ease, border-color .12s ease;
    }

    /* Single label on dot hover */
    .sag-dot:hover .sag-dot-label,
    .sag-dot:focus-visible .sag-dot-label{
      opacity: 1;
      visibility: visible;
      transform: translateY(-50%) translateX(-2px);
      background: rgba(0,0,0,0.82);
      border-color: rgba(255,255,255,0.32);
    }

    /* All labels on rail hover (covers pseudo hover zone too) */
    .sag-dot-rail:hover .sag-dot-label{
      opacity: 1;
      visibility: visible;
      transform: translateY(-50%) translateX(-2px);
    }

    /* Ultra-dense fallback: showing all labels would overlap, so keep only focused/hovered ones visible. */
    .sag-dot-rail.is-ultra-dense:hover .sag-dot-label{
      opacity: 0;
      visibility: hidden;
      transform: translateY(-50%);
    }
    .sag-dot-rail.is-ultra-dense:hover .sag-dot:hover .sag-dot-label,
    .sag-dot-rail.is-ultra-dense:hover .sag-dot:focus-visible .sag-dot-label,
    .sag-dot-rail.is-ultra-dense:hover .sag-dot.is-hovered .sag-dot-label,
    .sag-dot-rail.is-ultra-dense:hover .sag-dot.is-active .sag-dot-label{
      opacity: 1;
      visibility: visible;
      transform: translateY(-50%) translateX(-2px);
    }

    /* JS가 계산한 "가장 가까운" 항목 롤오버(겹침/오인식 방지) */
    .sag-dot.is-hovered{
      background: rgba(255,255,255,0.90);
      border-color: rgba(255,255,255,0.45);
      width: 10px;
      height: 10px;
    }
    .sag-dot.is-hovered .sag-dot-label{
      background: rgba(0,0,0,0.88);
      border-color: rgba(255,255,255,0.45);
    }

    /* Hover effect for corresponding title box */
    .sag-dot-rail:hover .sag-dot:hover .sag-dot-label,
    .sag-dot-rail:hover .sag-dot:focus-visible .sag-dot-label,
    .sag-dot-rail:hover .sag-dot.is-hovered .sag-dot-label{
      background: rgba(0,0,0,0.88);
      border-color: rgba(255,255,255,0.45);
    }

    /* Active section label 강조(rail hover 시에도 적용) */
    .sag-dot.is-active .sag-dot-label{
      border-color: rgba(255,255,255,0.40);
    }
    .sag-dot-rail:hover .sag-dot.is-active .sag-dot-label{
      background: rgba(0,0,0,0.82);
      border-color: rgba(255,255,255,0.55);
    }
  
/* Match the original desktop-only rail; keep the inline TOC on narrow screens. */
.sag-dot-rail { display: none; }
@media (min-width: 1536px) { .sag-dot-rail { display: block; } }
.sag-dot-label { line-height: 1.4; }
.sag-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }