/* 신호 추적 — 세로 퍼널 + 우측 고정 근거 뷰어.
   걸음·표·칩 모양은 research.css 를 그대로 쓴다. 이 파일이 더하는 것은 둘뿐 —
   ① 걸음 덩어리를 뒤로 갈수록 좁히는 퍼널 기하  ② 뷰어를 모달이 아니라 「고정 단」으로 두는 것.
   새 색·새 글자 크기는 만들지 않는다(mi-base.css 토큰과 타입 4단 그대로). */

.pg-funnel { --vw-w: min(560px, 42vw); --tb: 41px; }   /* --tb = 헤더 높이, funnel.js 가 실측해 덮는다 */

/* ── ① 퍼널 기하 — 폭이 곧 남은 양 ─────────────────────────────────── */
/* funnel.js 가 «걸음 머리 + 그 뒤 내용» 을 .fn-st 로 감싸고 --nw 를 0 → 22% 로 준다.
   22% 를 넘기면 열한 칸 대조표·판정표가 깨진다 — 여기가 상한이다. */
.pg-funnel .fn-st { margin-right: var(--nw, 0); padding-bottom: 2px; }
.pg-funnel .fn-st + .fn-st { margin-top: 14px; }
/* 좁아진 오른쪽 끝을 눈에 보이게 — 걸음마다 계단이 진다 */
.pg-funnel .fn-st > .sh.step { border-right: 2px solid var(--line); padding-right: 9px; }
.pg-funnel .fn-st .tbl-x, .pg-funnel .fn-st .tbl { max-width: 100%; }

/* ── ② 뷰어를 오른쪽 고정 단으로 ───────────────────────────────────── */
.pg-funnel .shell { padding-right: calc(var(--vw-w) + 26px); }
.pg-funnel .vw { display: flex; top: var(--tb); width: var(--vw-w); box-shadow: none; }
.pg-funnel .vw.full { top: 24px; width: auto; box-shadow: -8px 0 30px rgba(17,19,24,.08); }
.pg-funnel .vw-scrim.open { display: none; }
.pg-funnel .vw-rest { padding: 22px 18px; color: var(--ink-3); font-size: var(--fs-body); }
.pg-funnel .vw-rest b { display: block; color: var(--ink); font-size: var(--fs-title); margin-bottom: 7px; }
.pg-funnel .vw-rest ul { margin: 10px 0 0; padding-left: 17px; line-height: 1.75; }

/* 걸음 목차(research.js WF)는 헤더 밑에 붙는다 */
.pg-funnel .wf-rail { top: calc(var(--tb) + 14px); }

/* 화면이 좁으면 고정 단을 포기하고 원래대로 열리는 패널로 돌아간다 */
@media (max-width: 1180px) {
  .pg-funnel .shell { padding-right: 28px; }
  .pg-funnel .vw { display: none; }
  .pg-funnel .vw.open { display: flex; width: min(620px, 52vw); box-shadow: -8px 0 30px rgba(17,19,24,.08); }
  .pg-funnel .vw-scrim.open { display: block; }
}
@media (max-width: 760px) {
  .pg-funnel .fn-st { margin-right: 0; }
  .pg-funnel .fn-st > .sh.step { border-right: 0; padding-right: 0; }
}

/* ── 예시 한 건(?item=demo) 전용 ─────────────────────────────────────────
   rider 산출물에 근거 참조가 아직 없어서, 근거 뷰어를 지금도 확인할 수 있게 DB 실측으로 손수 짠 한 건.
   여기 쓰는 색은 --pt 두 곳(현재 위치 · 신호 dot)과 --opp(아무도 팔지 않는 빈 칸)뿐 — DS 규칙 그대로. */
.fn-sig { position: sticky; top: var(--tb); z-index: 4; background: #fff;
          border-bottom: 1px solid var(--line); padding: 11px 0 10px; margin-bottom: 18px;
          display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fn-sig .sd { width: 9px; height: 9px; border-radius: 50%; background: var(--pt); flex: none; align-self: center; }
.fn-sig .sid { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-title); font-weight: 800; }
.fn-sig .snm { font-size: var(--fs-title); font-weight: 800; }
.fn-sig .sp { flex: 1; }
.fn-sig .smeta { font-size: var(--fs-cap); color: var(--ink-3); }

.fn { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0 22px; align-items: start; }
.fn-rail { position: sticky; top: calc(var(--tb) + 57px); align-self: start; }
.fn-rail .rk { font-size: var(--fs-cap); font-weight: 800; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 8px; }
.fn-rail a { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 6px; align-items: baseline;
             padding: 5px 0 5px 9px; border-left: 2px solid var(--line-2);
             font-size: var(--fs-cap); color: var(--ink-3); text-decoration: none; }
.fn-rail a .n { font-weight: 800; font-variant-numeric: tabular-nums; }
.fn-rail a .t { font-weight: 700; }
.fn-rail a:hover { background: var(--hover); color: var(--ink); }
.fn-rail a.on { color: var(--ink); border-left-color: var(--pt); }
.fn-rail a.gt { color: var(--ink-4); border-left-style: dashed; }
.fn-rail a.gt .n { font-weight: 400; }
.fn-main { min-width: 0; }

.st { margin-right: var(--nw, 0); border: 1px solid var(--line); border-radius: 8px;
      padding: 12px 14px 13px; background: #fff; scroll-margin-top: calc(var(--tb) + 65px); }
.st.aux { border-style: dashed; background: var(--hover); }
.st-h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.st-h .no { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-title); font-weight: 800;
            color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-h h2 { font-size: var(--fs-title); font-weight: 800; margin: 0; letter-spacing: -.01em; }
.st .does { margin: 0; font-size: var(--fs-body); color: var(--ink-2); }
.st .does b { color: var(--ink); font-weight: 800; }
.st .sub { font-size: var(--fs-cap); color: var(--ink-3); margin: 7px 0 0; }
.ev-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: 9px;
          padding-top: 8px; border-top: 1px solid var(--line-2); }
.ev-row .ev-k { font-size: var(--fs-cap); font-weight: 800; letter-spacing: .06em; color: var(--ink-3); flex: none; }

.fn-link { margin-right: var(--nw, 0); height: 12px; border-left: 1px solid var(--line); margin-left: 20px; }
.gate { margin-right: var(--nw, 0); display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
        border: 1px dashed var(--ink-4); border-radius: 7px; padding: 7px 12px; background: var(--hover);
        scroll-margin-top: calc(var(--tb) + 65px); }
.gate .gk { font-size: var(--fs-cap); font-weight: 800; letter-spacing: .07em; color: var(--ink-2); flex: none; }
.gate .gc { font-size: var(--fs-body); color: var(--ink-2); min-width: 0; }
.gate .gd { font-size: var(--fs-cap); color: var(--ink-3); font-weight: 700; margin-left: auto; }
.revise { margin-right: var(--nw, 0); border-left: 2px solid var(--ink-4); background: var(--hover);
          padding: 8px 12px; font-size: var(--fs-cap); color: var(--ink-2); }
.revise b { color: var(--ink); }
.fn-out { margin-right: var(--nw, 0); border-radius: 8px; padding: 11px 14px; background: var(--ink); color: #fff; }
.fn-out b { font-size: var(--fs-title); }
.fn-out span { font-size: var(--fs-cap); opacity: .72; margin-left: 8px; }

.gapt { width: 100%; border-collapse: collapse; margin-top: 9px; font-size: var(--fs-cap); }
.gapt th, .gapt td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line-2); }
.gapt th { color: var(--ink-3); font-weight: 800; letter-spacing: .04em; }
.gapt td.n { font-variant-numeric: tabular-nums; font-weight: 800; text-align: right; width: 52px; }
.gapt tr.zero td, .gapt tr.zero td.n { color: var(--opp); }
.gapt .bar { display: block; height: 5px; background: var(--ink-4); border-radius: 2px; min-width: 1px; }
.gapt tr.zero .bar { background: var(--opp); }

.fn-note { border: 1px solid var(--line); border-left: 3px solid var(--ink-4); border-radius: 0 7px 7px 0;
           padding: 9px 13px; margin: 0 0 16px; font-size: var(--fs-cap); color: var(--ink-2); }
.fn-note b { color: var(--ink); }

@media (max-width: 760px) {
  .fn { grid-template-columns: 1fr; }
  .fn-rail { display: none; }
  .st, .gate, .revise, .fn-out, .fn-link { margin-right: 0; }
}

/* 걸음 목차가 LNB 2depth 로 올라가면 화면 안 목차 칸은 걷는다 */
.pg-funnel .fn.no-rail, .pg-funnel .wf.no-rail { grid-template-columns: minmax(0, 1fr); gap: 0; }