/* 장르 반주(스타일러) 패널(arranger_panel.js) — 편집기 화면 안 **자기 자리**(9단계 · 전에는 오른쪽에 떠서 피아노롤 440px 를 덮었다 —
   유저 "그 창이 피아노롤을 가리는데 가려진 부분 진행이 안 보여"). 색·간격 = tokens.css(편집기와 같은 테마)
   상자 #ws-main = [#work-col(편집 영역 + MML 줄) · .arr-panel] · 붙일 쪽은 공용 Workspace(workspace.js)가 #ws-main 에 data-arr-dock 로 적는다
   (웹 = 오른쪽 · 앱 = 왼쪽·오른쪽·아래 — desktop/dock.js) · 폭·높이 = --arr-w·--arr-h(끌어 바꾼 값 — 교정기 MML 패널과 같은 규칙) */
#ws-main { display: flex; flex: 1; min-height: 0; overflow: hidden; position: relative; }
#work-col { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
#ws-main[data-arr-dock="bottom"] { flex-direction: column; }
#ws-main[data-arr-dock="left"],
#ws-main[data-arr-dock="right"]  { --arr-w-eff: min(var(--arr-w, 440px), 70%); }
#ws-main[data-arr-dock="bottom"] { --arr-h-eff: min(var(--arr-h, 300px), 70%); }
#ws-main[data-arr-dock="left"]   > .arr-panel { order: -1; }
#ws-main[data-arr-dock="right"]  > .arr-panel,
#ws-main[data-arr-dock="bottom"] > .arr-panel { order: 1; }
#ws-main[data-arr-dock="left"]   > .arr-panel:not(.collapsed),
#ws-main[data-arr-dock="right"]  > .arr-panel:not(.collapsed) { width: var(--arr-w-eff); }
#ws-main[data-arr-dock="bottom"] > .arr-panel:not(.collapsed) { height: var(--arr-h-eff); }
#ws-main > .arr-panel.collapsed { width: var(--ws-tab, 48px); }
#ws-main[data-arr-dock="bottom"] > .arr-panel.collapsed { width: auto; height: var(--ws-tab, 48px); }
/* 폭 손잡이(공용 .dock-resizer — workspace.js 가 #ws-main 에 둔다) — 패널이 닫혔거나 접혔으면 숨긴다 */
#ws-main[data-arr-dock="left"]   > .dock-resizer { top: 0; bottom: 0; left:  calc(var(--arr-w-eff) - 3px); width: 6px; cursor: col-resize; }
#ws-main[data-arr-dock="right"]  > .dock-resizer { top: 0; bottom: 0; right: calc(var(--arr-w-eff) - 3px); width: 6px; cursor: col-resize; }
#ws-main[data-arr-dock="bottom"] > .dock-resizer { left: 0; right: 0; bottom: calc(var(--arr-h-eff) - 3px); height: 6px; cursor: row-resize; }
#ws-main:has(> .arr-panel:not(.open)) > .dock-resizer,
#ws-main:has(> .arr-panel.collapsed) > .dock-resizer { display: none; }
#ws-main > .dock-resizer:hover { background: var(--accent); opacity: .35; }
.arr-panel {
  flex: 0 0 auto;
  display: none;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-1);
  color: var(--ink-0);
  font-size: var(--fs-label);
}
.arr-panel.open { display: flex; }
.arr-panel[data-ws-side="right"]  { border-left: 1px solid var(--line); }
.arr-panel[data-ws-side="left"]   { border-right: 1px solid var(--line); }
.arr-panel[data-ws-side="bottom"] { border-top: 1px solid var(--line); }
/* 제목줄(늘 보임 · 앱에서는 잡고 끌어 붙일 쪽을 바꾼다) + 내용(이것만 굴러가고 다시 그려진다 — arranger_panel.js render) */
.arr-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); flex-shrink: 0;
            border-bottom: 1px solid var(--line); }
[data-shell="desktop"] .arr-head { cursor: grab; }
.arr-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3);
            padding-bottom: 120px; }        /* 떠 있는 '이동' 창(nav_panel) 위로 끝까지 올려 볼 수 있게 */
/* ── 아래에 붙였을 때 = 세 칸 나란히(10단계 · 유저 "도킹을 밑에 했을 때 레이아웃을 거기에 맞춰서") — 앱 전용(웹은 오른쪽만 · 왼쪽은 오른쪽과 같은 세로) ──
   세로 패널을 그대로 눕히지 않는다(교정기 모드 패널 아래 = 가로 띠와 같은 원칙 — desktop/theme.css ⑦-b).
   실측(2026-10-09 · 블루문 편곡 뒤 · 1500x300): 옛 배치는 내용 801px 중 259px(32%)만 보였다 — 기본 설정 칸이 폭 430/1500 만 쓰고
   코드 고르기·‹편곡하기›·결과는 스크롤해야 보였다.
   왼쪽 = 기본 설정 + ‹편곡하기›(늘 보임) · 가운데(가장 넓게) = 코드 고치기 · 오른쪽 = 구간 + 결과 · 칸마다 따로 굴러간다.
   ★내용 칸의 자식은 DOM 상 평평한 형제다(arranger_panel.js render) — 격자 이름 칸으로 놓아 DOM 을 안 옮긴다(교정기와 같은 방식).
   ★곡을 읽기 전(단추 하나뿐)은 격자를 안 쓴다 — :has(> #arr-chords).
   ★줄 높이는 칸끼리 같이 쓴다 — 1fr 줄에 걸친 칸은 줄 크기 계산에서 빠지므로(CSS Grid 규칙) 왼쪽·가운데·오른쪽이 서로 높이를 안 뺏는다 */
#ws-main[data-arr-dock="bottom"] > .arr-panel { container-type: inline-size; }
#ws-main[data-arr-dock="bottom"] .arr-body:has(> #arr-chords) {
  display: grid; overflow: hidden; padding-bottom: var(--space-3);
  grid-template-columns: minmax(300px, 1fr) minmax(380px, 1.5fr) minmax(300px, 1fr);
  grid-template-rows: max-content fit-content(45%) minmax(0, 1fr) max-content;
  grid-template-areas:
    "msg  msg msg"
    "set  chd sec"
    "set  chd res"
    "foot chd res";
  column-gap: var(--space-3); row-gap: var(--space-2);
}
#ws-main[data-arr-dock="bottom"] .arr-body > .arr-msg      { grid-area: msg; }
#ws-main[data-arr-dock="bottom"] .arr-body > .arr-basics   { grid-area: set; }
#ws-main[data-arr-dock="bottom"] .arr-body > #arr-chords   { grid-area: chd; }
#ws-main[data-arr-dock="bottom"] .arr-body > #arr-sections { grid-area: sec; }
#ws-main[data-arr-dock="bottom"] .arr-body > .arr-foot     { grid-area: foot; }
#ws-main[data-arr-dock="bottom"] .arr-body > .arr-result   { grid-area: res; }
#ws-main[data-arr-dock="bottom"] .arr-body:has(> #arr-chords) > :is(.arr-basics, #arr-chords, #arr-sections, .arr-result) { min-height: 0; overflow-y: auto; }
/* 패널이 좁으면(최소 창 900px 부근) 두 칸 — 왼쪽 = 기본 설정 + ‹편곡하기› · 오른쪽 = 코드 → 구간 → 결과. 폭 기준은 창이 아니라 패널 자신 */
@container (max-width: 1100px) {
  #ws-main[data-arr-dock="bottom"] .arr-body:has(> #arr-chords) {
    grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.6fr);
    grid-template-rows: max-content fit-content(60%) max-content minmax(0, 1fr) max-content;
    grid-template-areas:
      "msg  msg"
      "set  chd"
      "set  sec"
      "set  res"
      "foot res";
  }
}
.arr-title { font-weight: 700; font-size: var(--fs-body); }
.arr-beta { color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 6px; }
/* 도구 줄 '스타일러' 단추 안 Beta 딱지(22) — 단추 글색(강조 단추 = 진한 글)을 따라가는 테두리 · 글과 딱지가 한 줄(도구 줄 글자 한 줄 — 0.4.2-14) */
#btn-arranger { white-space: nowrap; }
.arr-beta-tag { display: inline-block; margin-left: 5px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px;
                font-size: var(--fs-meta); font-weight: 400; line-height: 1; letter-spacing: .02em; vertical-align: 1px; opacity: .85; }
/* New 딱지·말풍선(22-d — arranger_panel.js buttonLabel · showNewTip) — 교정기(corrector.css .new-badge·.new-tip)와 같은 모양 ·
   '스타일러' 단추가 강조색 바탕(.accent)이라 딱지는 뒤집은 색 · 테마 토큰만 */
.arr-new-badge { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 9px; background: var(--on-accent); color: var(--accent);
                 font-size: var(--fs-meta); font-weight: 700; line-height: 1.2; letter-spacing: .02em; vertical-align: 1px; }
/* 층: 맨 위 줄(100) 위 · MML 편집 창(1000)·메뉴(9000)·이동 판(9500) 아래 — 뒤에 뜬 창을 덮지 않게(22-d 검토) */
.arr-new-tip { position: fixed; z-index: 900; width: 300px; padding: 12px 14px; border-radius: 8px; box-sizing: border-box;
               background: var(--bg-2); color: var(--ink-0); border: 1px solid var(--accent); box-shadow: var(--shadow-md);
               font-size: var(--fs-body); line-height: 1.5; }
.arr-new-tip::before { content: ""; position: absolute; top: -7px; left: calc(var(--arr-new-tip-arrow, 50%) - 6px); width: 12px; height: 12px;
                       background: var(--bg-2); border-left: 1px solid var(--accent); border-top: 1px solid var(--accent); transform: rotate(45deg); }
.arr-new-tip-title { font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.arr-new-tip-body { color: var(--ink-1); }
.arr-new-tip-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.arr-new-tip-btns button { padding: 5px 12px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--bg-3); color: var(--ink-0);
                           cursor: pointer; font-size: var(--fs-body); }
.arr-new-tip-btns button:hover { background: var(--bg-4); }
.arr-new-tip-btns .arr-new-tip-go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.arr-new-tip-btns .arr-new-tip-go:hover { background: var(--accent); opacity: .88; }
.arr-close { background: none; border: none; color: var(--ink-1); font-size: 20px; cursor: pointer; }
/* 접기 단추(공용 .ws-collapse-btn — 화살표·접힌 탭 이름은 Workspace 가 그린다) */
#arr-collapse { margin-left: auto; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-1);
                cursor: pointer; padding: 0 6px; min-height: 22px; font-size: var(--fs-label); }
/* 접힌 패널 = 가장자리 탭 하나(교정기 패널과 같은 규칙 — 서랍을 닫아도 손잡이와 이름표는 남는다) */
.arr-panel.collapsed > .arr-body { display: none; }
.arr-panel.collapsed > .arr-head { padding: 0; border-bottom: none; height: 100%; }
.arr-panel.collapsed > .arr-head > :not(#arr-collapse) { display: none; }
.arr-panel.collapsed > .arr-head > #arr-collapse { width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: var(--bg-2); }
.arr-box { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--space-2); background: var(--bg-2); }
.arr-box > summary { cursor: pointer; font-weight: 600; }
.arr-row { display: flex; align-items: center; gap: var(--space-2); margin: 4px 0; }
/* 선택 칸이 줄 폭보다 줄어들 수 있게 — 줄(flex)의 기본 최소 폭은 '글자 폭'이라, 좁은 칸(아래 배치 왼쪽 352px · 오른쪽 최소 폭 300px)에서
   '악보 길이' 같은 긴 선택 칸이 칸 밖으로 나가 가로 스크롤 막대가 생겼다(2026-10-09 실측 · 1280x800 아래) */
.arr-row > .arr-select { min-width: 0; }
.arr-label { min-width: 64px; color: var(--ink-2); }
.arr-select, .arr-num {
  background: var(--bg-3);
  color: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  font-size: var(--fs-label);
  max-width: 100%;
}
.arr-num { width: 48px; }
.arr-parts { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.arr-part { display: inline-flex; align-items: center; gap: 4px; }
.arr-note { color: var(--ink-2); margin: 4px 0; line-height: 1.4; }
.arr-msg { padding: 6px 8px; border-radius: var(--r-sm); background: var(--bg-3); }
.arr-error { background: rgba(231, 76, 60, .18); color: var(--ink-0); }
.arr-btn {
  background: var(--bg-3);
  color: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  cursor: pointer;
  font-size: var(--fs-label);
}
.arr-btn:hover { background: var(--bg-4); }
.arr-go { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 600; }
.arr-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* 반마디 칸 줄(.arr-strip·.arr-cell)은 뺐다 — 코드 칸은 편집기 눈금자 '코드' 줄 한 곳(2026-10-05 3단계 · mml_editor.js drawChordLane) */
.arr-picker { margin-top: 6px; padding: 6px; border: 1px dashed var(--line); border-radius: var(--r-sm); }
.arr-pick-btns, .arr-pick-direct { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.arr-chord-typed { width: 9em; }
.arr-chord-typed-bad { color: rgb(231, 76, 60); font-size: var(--fs-label); }
.arr-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.arr-sec-range { min-width: 76px; }
.arr-over { color: #e74c3c; font-weight: 700; }
.arr-fit { color: var(--ink-2); }
.arr-players, .arr-checks { margin: 4px 0 6px 18px; }
.arr-players li, .arr-checks li { margin: 2px 0; }