/* 스크롤 인디케이터 — 오른쪽 세로 레일. 섹션 위치마다 빈 사각, 스크롤을 따라 초록 사각이 내려간다 */
.ix{position:fixed;right:22px;top:50%;translate:0 -50%;z-index:45;height:min(56vh,520px);width:14px;opacity:0;visibility:hidden;transform:translateX(12px);transition:opacity .6s cubic-bezier(.2,0,0,1),transform .6s cubic-bezier(.2,0,0,1),visibility 0s .6s}
/* 처음엔 숨김 → 스크롤하면 딤드(흐리게)로 나타남. 마우스를 올릴 때만 선명하게 */
.ix.show{visibility:visible;opacity:.32;transform:none;transition:opacity .6s cubic-bezier(.2,0,0,1),transform .6s cubic-bezier(.2,0,0,1)}
.ix.show:hover,.ix.show:focus-within{opacity:1;transition-duration:.25s}
.ix .rail{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.18);translate:-50% 0}
.ix .fill{position:absolute;left:50%;top:0;width:1px;height:100%;background:#fff;translate:-50% 0;transform-origin:50% 0;transform:scaleY(var(--p,0))}
.ix ol{list-style:none}
.ix li{position:absolute;left:50%;translate:-50% -50%}
.ix button{all:unset;cursor:pointer;display:block;width:9px;height:9px;border:1px solid rgba(255,255,255,.55);background:#0E0E0D;transition:background .3s,border-color .3s,transform .35s cubic-bezier(.2,0,0,1)}
.ix li.done button{background:#fff;border-color:#fff}
.ix li.on button{transform:scale(1.35)}
.ix button:focus-visible{outline:1px solid #fff;outline-offset:3px}
.ix .lb{position:absolute;right:22px;top:50%;translate:0 -50%;white-space:nowrap;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;color:#fff;opacity:0;transform:translateX(8px);transition:opacity .3s,transform .4s cubic-bezier(.2,0,0,1);pointer-events:none}
.ix li:hover .lb{opacity:1;transform:none}
/* 현재 섹션 이름은 늘 띄우지 않는다 — 본문 글자와 겹쳐서(10/19). 마우스를 올릴 때만 */
/* 스크롤을 따라 움직이는 사각 */
.ix .cur{position:absolute;left:50%;width:14px;height:14px;background:#00C277;translate:-50% -50%;top:calc(var(--p,0) * 100%);transition:top .12s linear}
.ix .num{position:absolute;left:50%;top:calc(100% + 18px);translate:-50% 0;font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace;color:rgba(255,255,255,.6);white-space:nowrap}
@media (max-width:900px){.ix{display:none}}
@media (prefers-reduced-motion:reduce){.ix *{transition:none!important}}

/* 초록 면 위 — 검정으로 */
.ix.ink .rail{background:rgba(10,10,10,.25)}.ix.ink .fill{background:#0A0A0A}
.ix.ink button{border-color:rgba(10,10,10,.6);background:transparent}.ix.ink li.done button{background:#0A0A0A;border-color:#0A0A0A}
.ix.ink .cur{background:#0A0A0A;outline:2px solid #00C277}.ix.ink .lb,.ix.ink .num{color:#0A0A0A}