/* 스튜디오 — 세 단계(설계 187): ① 입력 · ② 연출(설계 171 작업 공간) · ③ 결과. 색은 토큰만.
   ② 연출 = 위 막대 · 캐스팅 판 · 줄 목록 · 연기 악보 · 조절 판.
   폭 단계(§5): S 듣기 · 가벼운 수정(줄 목록 → 악보, 조절 판은 바닥 시트, 아래 고정 줄)
              M 두 판 모두 레일, 펼치면 가운데 위에 겹친다(서랍)
              L 줄 목록은 레일 · 서랍, 조절 판은 오른쪽 열(접으면 레일)
              XL · 2XL 줄 목록 │ 악보 │ 조절 판, 두 판 모두 접으면 레일(가운데가 넓어진다)
   접은 상태(html.ws-l-off · ws-r-off)와 닫은 예시 띠(html.ws-pro)는 <head> 의 스크립트가 그리기 전에 단다 */

/* 처음 모드 띠 — 예시 대본 · 닫기 */
.ws-guide{background:var(--stage);color:var(--on-stage)}
.ws-guide-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-block:12px}
.ws-guide-list{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.ws-guide-list::-webkit-scrollbar{display:none}
.ws-guide-btn{flex:none;min-height:var(--tap);padding:6px 14px;border-radius:var(--r-pill);font-size:13px;white-space:nowrap}
.ws-guide-btn[aria-pressed="true"],.ws-guide-btn[aria-pressed="true"]:hover{background:var(--on-stage);color:var(--stage)}
html.ws-pro .ws-guide{display:none}
/* 띠가 보이는 동안은 작업 공간을 그만큼 줄여 재생 막대가 첫 화면 안에 들게 한다 */
html:not(.ws-pro) .ws{--guide-h:68px}

/* 단계(설계 187 §1) — 위에 단계 탭 · 되돌리기, 단계마다 한 화면, 아래에 이전 · 다음.
   보이는 단계는 html.st-at-1~3(머리 스크립트가 주소의 #입력 · #연출 · #결과 를 읽어 그리기 전에 단다). 없으면 ② 연출 */
.ws-page{padding-block:16px 24px;display:flex;flex-direction:column;gap:10px}
.st-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.st-tabs{display:flex;gap:6px;min-width:0}
.st-tab{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:6px 14px 6px 8px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);color:var(--text);font:inherit;font-size:14px;text-align:left;white-space:nowrap;cursor:pointer}
.st-tab:hover{background:var(--hover)}
.st-tab b{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--hover);font-size:12px}
.st-tab span{display:flex;flex-direction:column;line-height:1.25}
.st-tab small{font-size:11px;font-weight:400;color:var(--muted)}
html:not(.st-at-1):not(.st-at-3) #st-tab-2,html.st-at-1 #st-tab-1,html.st-at-3 #st-tab-3{border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent-deep);font-weight:700}
html:not(.st-at-1):not(.st-at-3) #st-tab-2 b,html.st-at-1 #st-tab-1 b,html.st-at-3 #st-tab-3 b{background:var(--accent);color:var(--on-accent)}
.st-hist{display:flex;align-items:center;gap:6px;margin-left:auto}
/* 감정 강화 (베타, 이슈 202) — 켜면 감정 LoRA 판으로 만든다 */
/* 엔진(이슈 202 · 263) — 표준 · 감정 강화 · 프리미엄 중 하나. 옆 단추와 같은 높이의 한 덩어리, 고른 칸만 강조색 */
.st-engine{display:inline-flex;align-items:stretch;min-height:var(--tap);border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--card);overflow:hidden}
.st-engine label{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.st-engine label+label{border-left:1px solid var(--line)}
.st-engine label:hover{background:var(--hover)}
.st-engine label:has(input:checked){background:var(--accent-soft);color:var(--accent-deep)}
.st-engine label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.st-engine input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.st-hist .btn{min-width:var(--tap);gap:4px}
.st-last{font-size:12px;color:var(--muted);white-space:nowrap}
.st-bar .ws-status{margin:0}
.st-panel{display:none}
html:not(.st-at-1):not(.st-at-3) #st-2,html.st-at-1 #st-1,html.st-at-3 #st-3{display:grid;grid-template-columns:minmax(0,1fr)}
.st-input,.st-result{gap:16px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.st-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.st-h{margin:0;font-size:17px;font-weight:800}
.st-acts{display:flex;flex-wrap:wrap;gap:8px}
.st-foot{display:flex;justify-content:space-between;gap:10px}
/* 단계 이동 — 지금 단계에서 갈 수 있는 것만. 이전은 왼쪽, 다음은 오른쪽 */
.st-go{display:none}
/* 예시 띠가 열려 있으면 다시 열기 단추는 필요 없다 */
.st-ex-open{display:none}
/* 프로젝트 이름 · 저장 상태(이슈 219) */
.st-proj{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.st-proj-title{flex:0 1 auto;min-width:0;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-save.is-bad{color:var(--bad)}
.st-vers .gnav-menu{left:0;right:auto;width:min(360px,calc(100vw - 32px));max-height:min(60vh,480px);overflow-y:auto}
.st-vers.is-end .gnav-menu{left:auto;right:0}
.st-vers-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.st-vers-list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:8px 10px;border-top:1px solid var(--gn-line)}
.st-vers-list .st-vers-name{flex:1 1 auto;min-width:0;font-weight:700;overflow-wrap:break-word}
.st-vers-list .st-vers-meta{flex-basis:100%;font-size:12px;color:var(--gn-fg);opacity:.75}
.st-vers-menu .st-vers-list a,.st-vers-menu .st-vers-list button{width:auto;min-height:var(--tap);padding:4px 8px;font-size:13px}
.ws-pro .st-ex-open{display:inline-flex}
.st-go-next{margin-left:auto}
.st-at-1 .st-go[data-on="1"],.st-at-2 .st-go[data-on="2"],.st-at-3 .st-go[data-on="3"]{display:inline-flex}

/* ① 입력 — 큰 편집 칸(16줄 이상) · 형식 표시 · 나눠질 줄 */
.st-in-edit,.st-in-prev{display:flex;flex-direction:column;gap:10px;min-width:0}
.st-src{width:100%;min-height:calc(16 * 1.7em + 26px);font-size:15px;line-height:1.7;resize:vertical;background:var(--paper)}
.st-fmt{padding:2px 10px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-deep);font-size:12px;font-weight:700}
.st-fmt.is-bad{background:var(--bad-bg);color:var(--bad)}
.st-prev{min-height:6rem;max-height:30rem;overflow:auto;padding:4px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.st-prev[aria-busy="true"]{opacity:.6}
.st-prev .alert{margin:6px}
.st-prev-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.st-prev-list li{display:grid;grid-template-columns:1.8em 5em minmax(0,1fr);gap:8px;padding:6px;font-size:13px;line-height:1.5;border-bottom:1px solid var(--line)}
.st-prev-list li:last-child{border-bottom:0}
.st-prev-list b{color:var(--accent-deep);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ③ 결과 — 위에 만들기 · 듣기 · 받기, 줄마다 테이크 나란히, 내보내기(JSON · 텍스트) */
.st-res-body{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.st-res-takes,.st-res-out{display:flex;flex-direction:column;gap:10px;min-width:0}
.st-takes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.st-take-row{display:grid;grid-template-columns:1.6em minmax(0,1fr);gap:6px 8px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.st-take-row.is-changed{box-shadow:inset 3px 0 0 var(--warn)}
.st-take-list{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
.st-take-list .ws-take{background:var(--card)}
.st-out{max-height:28rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.6}
.st-out[aria-busy="true"]{opacity:.6}
@media (min-width:1024px){
  .st-res-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* 작업 공간 틀 */
.ws{position:relative;display:grid;grid-template-columns:minmax(0,1fr);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;--lane:22px;--word-h:var(--tap)}
.ws>*{min-width:0}
.ws-page [data-c="1"]{--rc:var(--series-1)}.ws-page [data-c="2"]{--rc:var(--series-4)}.ws-page [data-c="3"]{--rc:var(--series-2)}
.ws-page [data-c="4"]{--rc:var(--series-3)}.ws-page [data-c="5"]{--rc:var(--series-5)}.ws-page [data-c="6"]{--rc:var(--series-6)}
.ws-grow{flex:1 1 auto}
.ws-h{font-size:13px;font-weight:700;color:var(--muted)}
.ws-note{color:var(--muted)}

/* 작은 단추 · 칩 */
.ws-chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:4px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);background:var(--card);color:var(--text);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.ws-chip:hover{background:var(--hover)}
.ws-chip[aria-pressed="true"]{border-color:var(--rc,var(--accent));background:var(--accent-soft);color:var(--accent-deep);font-weight:700}
.ws-chip kbd{font-family:var(--mono);font-size:11px;color:var(--faint)}
.ws-chip[aria-pressed="true"] kbd{color:inherit}
.ws-emo[aria-pressed="true"],.ws-emo[aria-pressed="true"]:hover{border-color:var(--e-bar);background:var(--e-bg);color:var(--e-fg)}
.ws-chips{display:flex;flex-wrap:wrap;gap:6px}
.ws-top-btn{min-height:var(--tap);padding:6px 14px}
.ws-slider{display:grid;grid-template-columns:4.5em minmax(0,1fr) 4.2em;align-items:center;gap:8px;font-size:13px}
.ws-slider input{width:100%;min-height:var(--tap);margin:0;accent-color:var(--accent)}
.ws-slider output{font-family:var(--mono);font-size:12px;text-align:right}
.ws-slider.is-off{opacity:.5}
.ws-lab{color:var(--muted)}

/* 위 막대 — 작품 이름 · 출연진(배역 칩) · 바뀐 줄 · 받기 · 바뀐 줄 만들기 */
.ws-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--hover)}
.ws-title{font-size:17px;font-weight:800}
.ws-cast{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0}
.ws-cast::-webkit-scrollbar{display:none}
.ws-role{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:3px 12px 3px 3px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);background:var(--card);color:var(--text);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.ws-role:hover{background:var(--hover)}
.ws-role img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 22%;box-shadow:0 0 0 2px var(--rc)}
.ws-role b{color:var(--rc)}
.ws-role span{color:var(--muted)}
.ws-role[aria-expanded="true"],.ws-role[aria-expanded="true"]:hover{border-color:var(--accent);background:var(--accent-soft)}
.ws-est{font-size:13px;color:var(--muted)}
.ws-status{flex-basis:100%;font-size:13px;color:var(--muted)}
.ws-lock{margin-left:6px;padding:0 6px;border-radius:var(--r-pill);background:var(--hover);color:var(--muted);font-size:11px;font-weight:400}
.ws-status:empty{display:none}
.ws-status.is-bad{color:var(--bad)}
.ws-status.is-ok{color:var(--ok)}

/* 캐스팅 판 — 위 막대 바로 아래. 얼굴 카드는 한 줄로 옆으로 민다 */
.ws-casting{display:flex;flex-direction:column;gap:12px;padding:14px;border-bottom:1px solid var(--line);background:var(--paper)}
.ws-casting-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ws-name{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.ws-name .input{width:9em;min-height:var(--tap);padding:6px 10px}
.ws-faces{display:grid;grid-auto-flow:column;grid-auto-columns:7.5rem;gap:10px;overflow-x:auto;padding-bottom:4px}
.ws-face{display:flex;flex-direction:column;padding:0;border:2px solid transparent;border-radius:var(--r);background:var(--card);color:var(--text);
  font:inherit;text-align:left;overflow:hidden;cursor:pointer}
.ws-face img,.ws-face .ws-face-art{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;display:block}
.ws-face-art{background:var(--stage-2);fill:var(--stage-line)}
.ws-face-body{display:flex;flex-direction:column;padding:6px 8px;font-size:13px;line-height:1.35}
.ws-face-body small{font-size:11px;color:var(--muted)}
.ws-face[aria-pressed="true"]{border-color:var(--accent)}
.ws-face.is-soon{cursor:default;border:2px dashed var(--line-strong)}
.ws-tune{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:6px 20px;padding:12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card)}
.ws-tune>.ws-h{grid-column:1/-1}
.ws-tune-row{display:flex;align-items:center;gap:10px;font-size:13px}

/* 줄 목록 */
.ws-lines{position:relative;border-bottom:1px solid var(--line)}
.ws-panel{display:flex;flex-direction:column;gap:10px;padding:12px 14px;min-height:0}
.ws-phead{display:flex;align-items:center;gap:8px}
.ws-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ws-ln{display:grid;grid-template-columns:1.6em minmax(0,1fr) 8px;gap:8px;width:100%;min-height:var(--tap);padding:8px;border:1px solid transparent;
  border-radius:var(--r);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.ws-ln:hover{background:var(--hover)}
.ws-ln[aria-current="true"],.ws-ln[aria-current="true"]:hover{border-color:var(--accent);background:var(--accent-soft)}
.ws-ln.is-playing{box-shadow:inset 3px 0 0 var(--accent)}
.ws-ln-n{font-family:var(--mono);font-size:12px;color:var(--faint);padding-top:2px}
.ws-ln-body{display:flex;flex-direction:column;min-width:0}
.ws-ln-who{font-size:12px;font-weight:700;color:var(--rc)}
.ws-ln-t{font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ws-dot{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--e-bar);vertical-align:1px}
.ws-changed{width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--warn);visibility:hidden}
.ws-ln.is-changed .ws-changed{visibility:visible}
.ws-empty{padding:12px 8px;font-size:13px;color:var(--muted)}
.ws-paste{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.ws-paste textarea{resize:vertical;font-size:13px}
.ws-paste-acts{display:flex;flex-wrap:wrap;gap:8px}

/* 가운데 — 연기 악보. 단어 칸 폭은 글자 수에 비례하고 늘이지 않는다. 긴 줄은 여러 단으로 접혀 마지막 단이 짧게 끝난다 */
.ws-center{display:flex;flex-direction:column;gap:10px;padding:12px 14px;overflow:auto}
.ws-score-head{scroll-margin-top:var(--gn-h);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ws-score{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.ws-lanes{display:grid;grid-template-rows:repeat(3,var(--lane)) var(--word-h);font-size:11px;color:var(--muted)}
.ws-lanes span{display:flex;align-items:center;border-bottom:1px dashed var(--line)}
.ws-words{display:flex;flex-wrap:wrap;row-gap:14px;align-content:flex-start}
.ws-w{flex:none;width:calc(var(--n) * 1.02em + 14px);display:grid;grid-template-rows:repeat(3,var(--lane)) var(--word-h);font-size:16px}
.ws-c{display:flex;align-items:center;padding-left:4px;font-size:11px;white-space:nowrap;border-bottom:1px dashed var(--line)}
.ws-c b{position:relative;z-index:1;font-weight:700}
.ws-c b+b{margin-left:6px}
.ws-c-emo.is-on{background:var(--e-bg);color:var(--e-fg)}
.ws-c-dyn{color:var(--e-fg);background:linear-gradient(to top,color-mix(in srgb,var(--e-bar) 40%,transparent) calc(var(--x,0) * 100%),transparent 0)}
.ws-c-sp.is-on{background:var(--accent-soft);color:var(--accent-deep)}
.ws-c-mk{color:var(--accent-deep)}
.ws-c-mk.is-wedge{position:relative;cursor:pointer}
.ws-c-mk.is-wedge::before{content:"";position:absolute;inset:3px 0;background:var(--accent-line);
  clip-path:polygon(0 calc(50% - var(--a) * 50%),100% calc(50% - var(--b) * 50%),100% calc(50% + var(--b) * 50%),0 calc(50% + var(--a) * 50%))}
.ws-c-mk.is-sel::before{background:color-mix(in srgb,var(--accent) 45%,transparent)}
/* 꺾쇠 양 끝 손잡이 — 끌거나 방향키로 시작 · 끝 단어를 옮긴다. S 는 조절 판의 시작 · 끝 단어로 고친다 */
.ws-hd{position:absolute;top:0;bottom:0;z-index:2;width:10px;padding:0;border:0;border-radius:var(--r-sm);background:var(--accent);
  cursor:ew-resize;touch-action:none}
.ws-hd[data-end="from"]{left:0}.ws-hd[data-end="to"]{right:0}
.ws-hd:hover{background:var(--accent-deep)}
.ws-hd:focus-visible{outline:2px solid var(--text);outline-offset:1px}
.ws-c-mk.is-wedge b:first-child{padding-left:12px}
.ws-word{min-height:var(--word-h);padding:0 4px;border:0;border-left:1px solid var(--line);background:none;color:var(--text);font:inherit;
  text-align:left;white-space:nowrap;cursor:pointer}
.ws-word:hover{background:var(--hover)}
.ws-word[aria-pressed="true"],.ws-word[aria-pressed="true"]:hover{background:var(--warn-bg);color:var(--warn)}
.ws-markup summary{display:flex;align-items:center;min-height:var(--tap);font-size:13px;color:var(--muted);cursor:pointer}
.ws-markup .code{white-space:pre-wrap;overflow-wrap:anywhere;padding:10px 12px;font-size:12px}

/* 조절 판 */
.ws-takes-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.ws-takes{display:flex;flex-direction:column;gap:6px}
/* 버전 한 줄: 이름 · 정보 · 듣기 · 선택. 좁으면 단추가 다음 줄로 */
.ws-take{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.ws-take.is-on{border-color:var(--ok);background:var(--ok-bg)}
.ws-take b{font-size:13px}
.ws-take b{white-space:nowrap}
.ws-take small{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted)}
.ws-take .ws-chip{justify-content:center;white-space:nowrap}
.ws-del{align-self:flex-start;color:var(--muted)}
.ws-line-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ws-ramp:not([hidden]){display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--accent-line);border-radius:var(--r);background:var(--paper)}

/* 재생(③ 결과) */
.ws-play{min-height:var(--tap);padding:6px 16px}
.ws-play[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-deep)}
.ws-time{font-family:var(--mono);font-size:13px;color:var(--muted)}

/* 레일 · 접기 단추 — 넓은 단계에서만 */
.ws-rail{display:none;writing-mode:vertical-rl;align-items:center;justify-content:flex-start;gap:6px;width:40px;height:100%;padding:14px 0;border:0;
  background:var(--hover);color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.ws-rail:hover{color:var(--text)}
.ws-fold-btn{display:none;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);flex:none;padding:0;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);color:var(--muted);font:inherit;font-size:18px;line-height:1;cursor:pointer}
.ws-fold-btn:hover{background:var(--hover);color:var(--text)}

/* S — 듣기 · 가벼운 수정. 단계 탭은 위 고정 줄, 조절 판은 바닥 시트(악보가 위에 보이게 낮게), 이전 · 다음은 아래 고정 줄 */
@media (max-width:639px){
  .st-beta-chip{display:none}  /* 두 줄에 맞춘다 — 켜고 끄기 단추 이름은 그대로(이슈 236) */
  .st-bar .ws-top-btn,.st-engine label{padding-inline:10px}
  .st-bar{position:sticky;top:var(--gn-h);z-index:40;margin-inline:calc(var(--gutter) * -1);padding:8px var(--gutter);background:var(--paper);
    border-bottom:1px solid var(--line)}
  .st-tabs{flex:1 1 auto}
  .st-tab{flex:1 1 0;justify-content:center;padding-inline:6px}
  .st-tab small,.st-hist-l,.st-last{display:none}
  .ws-insp.sheet{max-height:62vh}
  .ws-w{min-width:var(--tap)}
  .ws-time{flex:none}
  .ws-hd{display:none}
  .ws-c-mk.is-wedge b:first-child{padding-left:0}
}
@media (min-width:640px){
  .ws-insp.sheet{position:relative;z-index:auto;max-height:none;padding:0;overflow:visible;background:none;color:inherit;border-radius:0;
    box-shadow:none;transform:none;visibility:visible;transition:none}
  .ws-insp>.sheet-head,.ws-insp-btn{display:none}
  /* 작업 공간은 첫 화면 높이에 맞춘다 — 메뉴 · 예시 띠 · 단계 줄 · 아래 이전 · 다음(M 은 고정 줄)만큼 뺀다 */
  .ws{height:calc(100dvh - var(--gn-h) - var(--guide-h,0px) - var(--st-chrome));min-height:34rem;grid-template-rows:auto auto minmax(0,1fr);
    grid-template-columns:var(--lw) minmax(0,1fr) var(--rw);grid-template-areas:"top top top" "cast cast cast" "lines center insp";
    --lw:40px;--rw:40px;--st-chrome:180px}
  .ws-top{grid-area:top}.ws-casting{grid-area:cast}.ws-lines{grid-area:lines}.ws-center{grid-area:center}.ws-insp{grid-area:insp}
  .ws-lines{border-bottom:0;border-right:1px solid var(--line)}
  .ws-insp{border-left:1px solid var(--line);position:relative}
  .ws-panel{height:100%;overflow:auto}
  .ws-fold-btn{display:inline-flex}
  /* 레일로 남은 판: 레일만 보이고, 펼치면 가운데 위에 겹친다(서랍) */
  .ws-lines>.ws-rail,.ws-insp>.ws-rail{display:flex}
  .ws-lines>.ws-panel,.ws-insp>.ws-panel{display:none}
  .ws.is-l-open .ws-lines>.ws-panel,.ws.is-r-open .ws-insp>.ws-panel{display:flex;position:absolute;top:0;bottom:0;z-index:6;width:min(20rem,80vw);
    background:var(--card);box-shadow:var(--shadow-pop)}
  .ws.is-l-open .ws-lines>.ws-panel{left:0}
  .ws.is-r-open .ws-insp>.ws-panel{right:0}
}
@media (min-width:1024px){
  /* 조절 판은 열로 선다(접으면 레일) */
  .ws{--rw:280px;--st-chrome:166px}
  html.ws-r-off .ws{--rw:40px}
  html:not(.ws-r-off) .ws-insp>.ws-rail{display:none}
  html:not(.ws-r-off) .ws-insp>.ws-panel{display:flex;position:static;width:auto;box-shadow:none}
}
@media (min-width:1440px){
  .ws{--lw:240px;--rw:300px}
  html.ws-l-off .ws{--lw:40px}
  html:not(.ws-l-off) .ws-lines>.ws-rail{display:none}
  html:not(.ws-l-off) .ws-lines>.ws-panel{display:flex;position:static;width:auto;box-shadow:none}
}
@media (min-width:1920px){.ws{--lw:280px;--rw:340px}}

/* 로그인 전(이슈 169) — 같은 작업 공간을 예시로 채워 흐리게 깔고 가입 카드를 겹친다. 배경은 inert 라 누르거나 고를 수 없다 */
.studio-shell.is-locked{filter:blur(1.2px) saturate(1.15);opacity:.92;user-select:none;pointer-events:none}
.studio-shell.is-locked .ws-dot{animation:vsTeaser 7.2s ease-in-out infinite;animation-delay:calc(var(--i) * 1.2s)}
.teaser{position:absolute;inset:var(--gn-h) 0 auto 0;display:flex;justify-content:center;padding:48px var(--gutter) 0;z-index:5}
.teaser-card{width:min(100%,32.5rem);display:flex;flex-direction:column;gap:16px;padding:28px;box-shadow:var(--shadow-pop)}
.teaser-title{font-size:clamp(22px,3.2vw,30px);line-height:1.35;margin:0}
.teaser-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.teaser-list li{display:flex;flex-direction:column;gap:2px}
.teaser-list span{color:var(--muted);font-size:14px}
.teaser-free{margin:0;font-size:14px}
.teaser form{margin:0}
.teaser-go{width:100%}
/* L 이상 — 카드를 오른쪽에 두어 가운데의 악보가 보이게 */
@media (min-width:1024px){.teaser{max-width:var(--wrap);margin:0 auto;justify-content:flex-end;padding-top:120px}.teaser .teaser-card{width:min(100%,25rem);padding:24px}}