/* 좌측 레일 시안 비교판 (11차-131 · 형이 고르시는 판)
   🔴 이 파일은 **시안 전용**이다. 여기서 정한 값이 곧바로 서비스 화면에 가지 않는다 —
      형이 고르신 한 벌만 dist/mockup.css 로 옮긴다.
   🔴 토큰(--bg·--ink·--muted·--line·--accent)은 mockup.css 것을 그대로 쓴다.
      사본을 두지 않으려고 mockup.css 를 먼저 링크한다(값을 두 자리에 두지 않는다).
   🔴 레일 마크업은 실제 셸(shell.js)이 아니라 **정적 사본**이다 — 목적이 「이런 식으로 되겠구나」이고
      셸을 부르면 data-steps·화면 배선이 따라와 시안 넷을 한 장에 못 놓는다.
      ⚠️ 그래서 이 판의 클래스(.rt-*)는 실제 레일(.snav-*)과 이름이 다르다. 섞이지 않는다. */

.rt-body{margin:0;padding:24px 16px 72px;background:var(--bg);color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif}
.rt-head{max-width:920px;margin:0 auto 28px}
.rt-head h1{margin:0 0 14px;font-size:22px;letter-spacing:-.02em}
.rt-quote{margin:0 0 14px;padding:14px 16px;border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;background:var(--raise,rgba(255,255,255,.04))}
.rt-quote p{margin:0 0 10px;color:var(--muted);font-size:14px}
.rt-quote p:last-child{margin:0}
.rt-quote b{color:var(--ink)}
.rt-note{margin:0;color:var(--muted);font-size:13.5px}
.rt-note b{color:var(--ink)}

.rt-card{max-width:920px;margin:0 auto 22px;padding:18px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel,rgba(255,255,255,.02))}
.rt-h h2{margin:0 0 6px;font-size:17px}
.rt-h p{margin:0 0 16px;color:var(--muted);font-size:13.5px}
.rt-h p b{color:var(--ink)}
.rt-pair{display:flex;flex-wrap:wrap;gap:18px}
.rt-pair figure{margin:0}
.rt-pair figcaption,.rt-tg figcaption{margin-top:8px;color:var(--muted);font-size:12px;text-align:center}

/* ── 레일 사본 ───────────────────────────────── */
/* 🔴 높이를 420px 로 박았더니 7칸 + 머리 + 발치가 안 들어가 **발치가 단계 줄을 덮었다**
   (캡처로 잡았다 — 넘침 자는 가로만 재서 초록이었다). 내용만큼 늘어나게 둔다. */
.rt-rail{width:232px;min-height:460px;display:flex;flex-direction:column;
  padding:16px 12px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);
  font-size:13.5px;overflow:hidden}
.rt-rail.is-col{width:64px;padding-left:8px;padding-right:8px;align-items:stretch}
.rt-top{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.rt-foot{flex:none;margin-top:22px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px}
.rt-ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

.rt-brand{display:flex;align-items:center;gap:8px;margin:0 4px 22px}
.rt-logo{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:9px;
  background:var(--accent);color:var(--accent-ink,#06130c);font-size:15px;font-weight:900;line-height:1}
.rt-bn{font-weight:800;letter-spacing:-.03em}
.rt-home{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;
  color:var(--accent);font-weight:700}
.is-col .rt-home{justify-content:center;padding:6px 0}
.rt-proj{flex:none;margin:10px 4px 0;padding:7px 8px;line-height:1.4;border-radius:8px;color:var(--muted);font-size:12.5px;
  background:rgba(255,255,255,.04);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-acct{display:flex;align-items:center;gap:8px}
.is-col .rt-acct{justify-content:center}
.rt-av{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;
  background:rgba(255,255,255,.1);font-size:12px;font-weight:700}
.rt-who{color:var(--muted);font-size:12.5px}
.rt-tog{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:32px;
  border:0;border-radius:8px;background:rgba(255,255,255,.05);color:var(--muted);
  font:inherit;font-size:12.5px;cursor:default}
.is-col .rt-tog{width:32px;align-self:center}

/* 단계 — 동그라미 + 이어진 선 */
.rt-steps{list-style:none;margin:22px 0 0;padding:0;counter-reset:rt}
.rt-s{position:relative;display:flex;align-items:center;gap:10px;min-height:34px;padding-left:2px}
.rt-s::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;
  background:var(--line);opacity:1}
.rt-s:last-child::before{display:none}
.rt-dot{position:relative;display:grid;place-items:center;width:24px;height:24px;flex:none;
  box-sizing:border-box;border-radius:50%;border:2px solid var(--line);background:var(--bg);
  color:var(--muted);font-size:11.5px;font-weight:700}
.rt-nm{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-done .rt-dot{border-color:var(--accent);background:var(--accent);color:var(--accent-ink,#06130c)}
.rt-done::before{background:var(--accent);opacity:.55}
.rt-now .rt-dot{border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 0 3px rgba(54,221,131,.18)}
.rt-now .rt-nm{color:var(--ink);font-weight:700}
.is-col .rt-s{justify-content:center;padding-left:0}
.is-col .rt-s::before{left:50%;margin-left:-1px}

/* ㉰ 세로 진행 막대 — 동그라미가 없다 */
.rt-steps.rt-bar{position:relative;margin-left:6px;padding-left:14px}
.rt-steps.rt-bar::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;
  border-radius:99px;background:var(--line)}
.rt-steps.rt-bar::after{content:"";position:absolute;left:0;top:4px;width:4px;height:14%;
  border-radius:99px;background:var(--accent)}
/* 🔴 처음엔 칸마다 빈 줄이 남아 여섯 줄이 허전했다(규칙 4-1: 빈 상태를 같이 본다).
   → 안 지난 칸은 **막대 위 눈금**으로만 말한다. 줄을 차지하지 않는다. */
.rt-bar .rt-s{position:relative;min-height:26px;padding:0}
.rt-bar .rt-s::before{content:"";display:block;position:absolute;left:-14px;top:50%;
  width:10px;height:2px;border-radius:2px;background:var(--line);opacity:1}
.rt-bar .rt-done::before,.rt-bar .rt-now::before{background:var(--accent)}
.rt-bar .rt-now::before{width:14px;left:-14px;height:3px}
.rt-bar .rt-now .rt-nm{color:var(--ink);font-weight:700}
/* 🔴 접으면 막대만 남아 「지금 어디쯤인가」를 못 읽었다 — 지금 칸 번호를 남긴다 */
.is-col .rt-steps.rt-bar{margin:22px auto 0;padding:0 0 0 14px;width:auto;align-self:center}
.is-col .rt-bar .rt-s{justify-content:flex-start}
.is-col .rt-bar .rt-now::after{content:"1";display:grid;place-items:center;
  width:22px;height:22px;margin-left:2px;border-radius:50%;border:2px solid var(--accent);
  box-sizing:border-box;color:var(--accent);font-size:11px;font-weight:700}

/* ㉯ 덩어리 갈라 보이기 — 🔴 「끝까지 민 안」이다.
   처음엔 구분선을 --line(1px)으로 뒀더니 「지금」과 구별이 안 갔다(캡처로 잡았다 · 여백 차이도 30px뿐).
   🔴 시안이 안 갈리면 형이 고르실 것이 없다. 그래서 여백을 「지금」의 두 배로 키우고
      덩어리마다 옅은 바탕을 깔아 **층이 눈에 보이게** 했다. */
.rt-mod{padding:12px 8px;margin-bottom:16px;border-radius:10px;background:rgba(255,255,255,.035)}
.rt-mod:last-child{margin-bottom:0}
.rt-mod-grow{flex:1 1 auto;min-height:0}
.rt-mod .rt-brand,.rt-mod .rt-steps{margin-top:0;margin-bottom:0}
.rt-mod .rt-proj{margin-left:0;margin-right:0}
.is-col .rt-mod{padding:10px 0}

/* ㉮ 토글 자리에 로고 */
.rt-tog-logo{background:none;padding:0;min-height:0}
.rt-tog-logo .rt-logo{width:32px;height:32px}

/* 접기 버튼 세 꼴 */
.rt-tgrow{display:flex;flex-wrap:wrap;gap:22px}
.rt-tg{margin:0}
.rt-tgbox{display:grid;place-items:center;width:92px;height:46px;border:1px solid var(--line);
  border-radius:10px;background:rgba(255,255,255,.04);color:var(--muted)}
.rt-tgbox .rt-ic{width:20px;height:20px}
.rt-kbd{padding:3px 8px;border:1px solid var(--line);border-radius:6px;
  font-size:12px;font-weight:700;color:var(--ink)}
.rt-foot-note{max-width:920px;margin:26px auto 0;color:var(--muted);font-size:13.5px}
.rt-foot-note b{color:var(--accent)}

/* 🔴 형은 폰으로 보신다 — 좁으면 레일 둘이 세로로 쌓이고 가로 스크롤이 나지 않는다 */
@media (max-width:560px){
  .rt-body{padding:18px 16px 60px}
  .rt-pair{gap:14px}
}

/* 🔴 ㉰ 는 이름이 지금 칸 하나뿐이라 「몇 번째인가」를 알 수 없었다 — 그 한 칸에 1 / 7 을 붙인다.
   형 물음이 「지금 어디쯤인가」라서(토스 Easy to answer) 그 답을 한 자리에 모은다.
   🔴 한 번 걸렸다: HTML 에서 「요청서」를 치환했더니 **시안 넷 전부**에 붙었다(그 낱말이 넷 다에 있다).
      전수 치환 전에 범위를 봐야 했다 — 여기서 ㉰ 만 켠다.
   🔴 그리고 이 주석을 기계로 끼워 넣다가 여는 표시를 빠뜨려 CSS 를 통째로 깨뜨렸다.
      증상이 조용했다 — 에러도 없고 display:none 이 그냥 안 먹었다.
      🔴 고치면서 또 깨뜨렸다: 주석 본문에 여는 표시를 **글자로** 적었더니 그 자리에서 닫혀 버렸다.
         CSS 주석은 중첩이 안 된다 — 주석 안에 그 기호를 쓰지 않는다.
      → CSS 를 스크립트로 고치면 주석 짝과 중괄호 수를 센다. */
.rt-of{display:none;margin-left:6px;color:var(--muted);font-size:11.5px;font-weight:600;font-style:normal}
.rt-bar .rt-of{display:inline}

/* 🔴 ㉰ 펼침에서 칸이 26px 씩이라 7칸 뒤로 빈 자리가 크게 남았다(규칙 4-1: 빈 상태를 같이 본다).
   막대를 칸 끝이 아니라 **레일 끝까지** 잇는다 — 진행 막대는 원래 전체를 재는 물건이다. */
.rt-v-c .rt-steps.rt-bar{flex:1 1 auto}