/* 셸 자신의 것: 레일의 두 기둥. 토큰·레일 골격·1단(메뉴 레일)의 열림 규칙은 console.css의
   것을 그대로 쓰고, 여기는 RailMode가 #rail에 적는 menu/tool 속성의 결과만 말한다 —
   handbook 메뉴 레일+툴 레일의 번역. 도구를 등록한 문이 아직 없어(용례 대기) 기본 화면은
   메뉴 기둥뿐이다: 속이 비면 펼쳐지지 않는다. */

/* 메뉴 기둥이 숨는 유일한 경우: 접힌 드로어에서 도구(>1)가 기둥을 대신할 때. */
#rail[menu="hide"] #railNav { display:none; }

/* 툴 레일 — 기본은 없음. */
#railTool { display:none; }

/* 접힌 기둥이 툴 레일이 된 모습: 메뉴 기둥과 같은 자리·같은 리듬(아이콘 기둥). */
#rail[tool="collapse"] #railTool,
body:not([nav="open"]) #rail[tool="expand"] #railTool {
  display:flex; flex-direction:column; align-items:stretch;
  gap:var(--magi-sys-space-50); min-height:0; overflow:hidden auto;
}

/* 접힌 툴 기둥의 피크(손끝이 레일 위): 라벨이 붙도록 기둥이 잠시 넓어진다 — 오버레이라
   본문을 밀지 않는다. */
body:not([nav="open"]) #rail[tool="expand"] {
  width:15rem;
  /* 그림자가 아니라 헤어라인 — 운영은 레일에 box-shadow를 쓰지 않는다(스크림이 요소다). */
  border-right:1px solid var(--magi-ref-outlineVariant);
}
body:not([nav="open"]) #rail[tool="expand"] #railTool .words { display:block; }
body:not([nav="open"]) #rail[tool="collapse"] #railTool .words { display:none; }

/* 열린 드로어: 툴 레일은 펼쳐진 메뉴 레일(20rem) 오른쪽의 둘째 기둥이다(머리 = 문의
   이름·문장). 그때만 드로어가 그만큼 더 넓어진다 — 도구 없는 문(오늘 전부)은 운영과
   같은 20rem 한 기둥이다. */
body[nav="open"]:has(#rail[tool="expand"]) { --magi-comp-rail-now:34rem; }
body[nav="open"] #rail[tool="expand"] #railTool {
  display:flex; flex-direction:column; gap:var(--magi-sys-space-50);
  position:absolute; left:20rem; right:0; top:0; bottom:0;
  padding:calc(var(--magi-sys-space-150) + env(safe-area-inset-top)) var(--magi-sys-space-200) var(--magi-sys-space-200);
  border-left:1px solid var(--magi-ref-outlineVariant);
  overflow:hidden auto; overscroll-behavior:contain;
}

/* 도구 항목은 메뉴 문과 같은 마크업(.raili)이라 모양이 공짜다 — 버튼이라는 것만 다르다. */
#railTool .raili.tooli { background:none; border:0; cursor:pointer; text-align:inherit; }

/* ← 메뉴 레일로 — 접힌 툴 기둥의 첫 항목. */
#railToolClose { margin:0 auto; }

/* 둘째 기둥의 머리: 어느 문의 속인지, 그리고 그 문이 무엇을 위한 것인지 한 줄. */
.railpanel-head {
  font:600 var(--md-sys-typescale-title-small-size)/1.4 var(--magi-ref-display);
  color:var(--magi-ref-fg);
}
.railpanel-sub {
  font:var(--md-sys-typescale-label-small-size)/1.5 var(--magi-ref-mono);
  color:var(--magi-ref-muted); margin-bottom:var(--magi-sys-space-150);
}