/* 드로잉 화면 — 캔버스가 주인공.
   위: 컷 이동·굵기·생성 / 왼쪽: 그림 도구·실행취소 / 아래: 생성 결과 관련 */
body.draw {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden; padding: 0;
}

/* ── 위 ── */
body.draw #top {
  position: static; height: auto;
  padding: 6px 8px; gap: 6px;
  display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
body.draw #top .pick {
  min-width: 0; max-width: 30vw; font-weight: 600; font-variant-numeric: tabular-nums;
  border-color: var(--accent); color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 5px 8px; flex: none;
}
body.draw #top .ico { padding: 5px 9px; flex: none; }
#home {
  text-decoration: none; color: var(--fg); flex: none;
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; line-height: 1.4;
}
body.draw #top button, body.draw #top select { flex: none; }
body.draw #top #gen { padding: 6px 14px; font-size: 15px; }
body.draw .status { min-width: 0; font-size: 11px; white-space: nowrap; }

/* 굵기 슬라이더 — 아이콘 + 슬라이더 한 덩이 */
.sz { display: flex; align-items: center; gap: 4px; flex: none; font-size: 13px; }
.sz input[type=range] { width: 78px; }

.line {
  padding: 4px 10px; font-size: 12px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.line:empty { display: none; }

/* ── 가운데: 왼쪽 툴바 + 캔버스 ── */
#body { flex: 1; min-height: 0; display: flex; }

#left {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 6px; background: var(--panel); border-right: 1px solid var(--line);
  overflow-y: auto; flex: none;
}
#left button { padding: 9px 10px; font-size: 16px; line-height: 1; }
#left .sep { height: 1px; background: var(--line); margin: 3px 0; }
#tEraser.temp { border-color: var(--warn); color: var(--warn); box-shadow: 0 0 0 2px rgba(255,182,72,.25); }

/* 곱하기 토글 — 도구가 아니라 도구에 거는 성질이라 버튼이 아니라 체크칸으로 둔다 */
#tMul {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  padding: 5px 4px; border: 1px solid var(--line); border-radius: 8px;
  background: #232323; cursor: pointer; user-select: none; font-size: 15px; line-height: 1;
}
#tMul input { width: 14px; height: 14px; margin: 0; }
#tMul.on { border-color: var(--accent); color: var(--accent); background: #1d2836; }

#stage {
  flex: 1; min-width: 0; position: relative; padding: 22px 16px 16px;
  display: flex; align-items: center; justify-content: center;
  background: #202020; overflow: hidden;
}

/* 판을 다 쓴다 — 종이는 캔버스 안에 그려진다(작가 지시, 9-5). */
#frame { position: relative; line-height: 0; width: 100%; height: 100%; }
#pad {
  touch-action: none;              /* 브라우저 스크롤/줌 차단 — 핀치는 직접 처리 */
  /* 흰 종이·테두리·바깥 회색은 이제 **캔버스가 그린다**(buildBackdrop).
     엘리먼트에 흰 배경을 주면 작업 공간까지 하얘진다. */
  background: transparent;
  display: block;
  width: 100%; height: 100%;
}
#pad.moving { cursor: move; }

/* 비율 조절 손잡이 */
#grip {
  /* 자리는 placeOverlays 가 종이 모서리로 잡아 준다. */
  position: absolute; margin-left: -13px; margin-top: -13px;
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--accent); border: 2px solid #0d1b2a;
  touch-action: none; cursor: nwse-resize;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
#grip::after {
  content: ''; position: absolute; inset: 6px 6px auto auto;
  width: 10px; height: 10px;
  border-right: 2px solid #0d1b2a; border-bottom: 2px solid #0d1b2a;
}
#sizeTag {
  position: absolute; left: 0; top: -20px;
  color: #ddd; background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 4px;
  line-height: 1.5; white-space: nowrap;
}

/* ── 아래: 생성 결과 ── */
#tools {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: var(--panel); border-top: 1px solid var(--line);
  flex-wrap: nowrap; overflow-x: auto;
}
#tools button { padding: 7px 10px; flex: none; }
#tools input[type=range] { width: 76px; flex: none; }
#tools select { flex: none; padding: 6px 8px; }
#tools .op { display: flex; align-items: center; gap: 4px; flex: none; }
#tools .hist { display: flex; align-items: center; gap: 2px; flex: none; }
#tools .hist .ico { padding: 7px 8px; }
#tools .hist .small { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
#autoBakeRow { display: flex; align-items: center; gap: 4px; flex: none; }
#autoBakeRow input { width: 16px; height: 16px; }

.hint { padding: 4px 10px; }
.hint:empty { display: none; }

.picklist { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.picklist button {
  text-align: left; font-size: 13px; padding: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.picklist button.on { border-color: var(--accent); color: var(--accent); }

/* 세로로 좁으면 지문·힌트를 접는다 */
@media (max-height: 560px) {
  .line, .hint { display: none; }
}
/* 가로로 좁으면 위 굵기 슬라이더를 줄인다 */
@media (max-width: 820px) {
  .sz input[type=range] { width: 54px; }
  body.draw #top .pick { max-width: 24vw; }
}

/* 컷 상세 편집 */
#info .sheet { max-height: 88vh; overflow-y: auto; }
#info label { font-size: 12px; color: var(--dim); margin-top: 4px; }
#info textarea { -webkit-user-select: text; user-select: text; }


/* 색상 — 왼쪽 패널의 전경색 한 칸 */
#swatch {
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #000, 0 1px 4px rgba(0,0,0,.5);
}
#colorPop {
  position: fixed; left: 60px; bottom: 12px; z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
#colorPop[hidden] { display: none; }
#wheel { touch-action: none; border-radius: 50%; }
#colorPop .row { display: flex; align-items: center; gap: 8px; }

/* 도구 크기 — 도구를 고르면 잠깐 떴다가 사라지는 오버레이 */
#sizePop {
  position: fixed; left: 60px; z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 12px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
#sizePop[hidden] { display: none; }
#sizePop input[type=range] { width: 190px; }
#sizeVal { min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }

/* 레이어 패널 — 떠 있는 미니 패널. 끌어서 옮기고, 접으면 제목줄만 남는다. */
#layerPanel {
  position: fixed; top: calc(var(--top) + 8px); right: 8px; z-index: 26;
  width: 172px; max-height: 70vh;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 5px; display: flex; flex-direction: column; gap: 5px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
#layerPanel[hidden] { display: none; }
#layerPanel.folded #layerList { display: none; }
/* 머리줄이 곧 손잡이이자 접기 버튼이다 — 스크롤 오버레이와 같은 규칙 */
#layerHead {
  display: flex; align-items: center; gap: 3px; font-size: 12px;
  padding: 3px 5px; border-radius: 6px; cursor: move; touch-action: none;
  background: #262626; user-select: none;
}
#layerHead button { padding: 2px 6px; font-size: 12px; line-height: 1; }
#layerPanel.folded #layerList { display: none; }
#layerList {
  display: flex; flex-direction: column-reverse; gap: 3px;
  overflow-y: auto; min-height: 0;
}
.lyr {
  display: flex; gap: 5px; align-items: center;
  background: #232323; border: 1px solid var(--line); border-radius: 7px; padding: 3px 4px;
}
.lyr.on { border-color: var(--accent); background: #1d2836; }
.lyr img { width: 20px; height: 26px; object-fit: contain; background: #f2f2f2; border-radius: 3px; flex: none; }
.lyr .meta { flex: 1; min-width: 0; }
.lyr .nm { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyr.on .nm { font-weight: 600; color: var(--accent); }
/* 끄는 거리가 짧으면 값이 뭉텅뭉텅 뛴다. 폭은 그대로 두되 잡을 곳을 키운다. */
.lyr input[type=range] {
  -webkit-appearance: none; appearance: none; background: none;
  width: 100%; height: 18px; margin: 0; touch-action: none;
}
.lyr input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: #4a4a4a;
}
.lyr input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5px;
  border-radius: 50%; background: var(--accent); border: 1px solid #0d1b2a;
}
.lyr .pc { float: right; color: var(--dim); font-weight: 400; font-variant-numeric: tabular-nums; }
/* 지우기는 줄의 왼쪽 끝, 표시/숨김은 오른쪽 끝 — 정반대로 떼어 놓는다.
   붙여 두면 숨기려다 지운다. 지우기는 평소엔 흐리게 두고 눌러야 보인다. */
.lyr .del {
  flex: none; padding: 2px 4px; font-size: 11px; opacity: .35;
  border-color: transparent; background: none;
}
.lyr .del:hover, .lyr .del:active { opacity: 1; border-color: var(--danger, #c0392b); }
.lyr .vis { flex: none; padding: 2px 5px; font-size: 12px; margin-left: 2px; }

/* 도구 크기 원 — 지금 붓이 얼마나 굵은지 보여 준다. 입력은 절대 가로채지 않는다. */
#brushRing {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
  border-radius: 50%; border: 1px solid rgba(0,0,0,.7);
  box-shadow: 0 0 0 1px rgba(255,255,255,.75);
}
#brushRing[hidden] { display: none; }
#brushRing.erase { border-style: dashed; }

/* 디노이즈 — 컷마다 손이 자주 가는 값이라 상단에 둔다 */
.dn { display: flex; align-items: center; gap: 5px; flex: none; }
.dn input[type=range] { width: 92px; }
.dn #denoiseVal { min-width: 28px; font-variant-numeric: tabular-nums; }
@media (max-width: 820px) { .dn input[type=range] { width: 62px; } .dn span:first-child { display: none; } }

/* 컷 상세 안의 콘티 생성 설정 */
#info .sheet { width: min(560px, 94vw); }
#info hr { border: none; border-top: 1px solid var(--line); margin: 12px 0 2px; }
#info select, #info input[type=number] { width: 100%; padding: 6px 8px; }
#gParams { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
#gParams .p { display: flex; align-items: center; gap: 8px; }
#gParams .p .nm { flex: none; width: 132px; font-size: 12px; }
#gParams .p input[type=range] { flex: 1; }
#gParams .p .v { flex: none; width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
#gParams .p select, #gParams .p input[type=text] { flex: 1; padding: 5px 7px; }
#gParams:empty::after { content: '이 워크플로우에는 조절할 값이 없습니다.'; color: var(--dim); font-size: 12px; }

#info .ck { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
#info .ck input { width: 16px; height: 16px; }

/* 스타일 LoRA — 이름은 길고 서로 비슷해서 그림으로 고르는 게 빠르다 */
#stylePop {
  position: fixed; left: 56px; top: calc(var(--top) + 8px); z-index: 32;
  width: min(420px, 74vw); max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
#stylePop[hidden] { display: none; }
#styleStrip, #promptStrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.sty {
  padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent;
  background: #232323; display: flex; flex-direction: column; gap: 0;
}
.sty.on { border-color: var(--accent); }
.sty img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: #1a1a1a; display: block; }
.sty .nm {
  font-size: 10px; padding: 3px 4px; line-height: 1.25; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sty .noimg { aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 11px; }
#styleStrip:empty::after { content: '이 베이스에 정리해 둔 스타일이 없습니다. 컷 상세(📝)에서 넣으세요.'; color: var(--dim); font-size: 12px; }

.stylelist { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.stylelist .row2 { display: flex; align-items: center; gap: 6px; }
.stylelist img { width: 30px; height: 40px; object-fit: cover; border-radius: 4px; background: #1a1a1a; flex: none; }
.stylelist input[type=text] { flex: 1; min-width: 0; padding: 4px 6px; }
.stylelist input[type=number] { width: 66px; padding: 4px 6px; }
.stylelist:empty::after { content: '아직 없습니다.'; color: var(--dim); font-size: 12px; }

/* 화풍 프롬프트 — 카탈로그 검색 결과는 서술이 길어 한 줄로 줄여 보여 준다 */
#promptStrip:empty::after { content: '골라 둔 화풍이 없습니다. 컷 상세(📝) → 화풍 에서 넣으세요.'; color: var(--dim); font-size: 12px; }
.picklist .row2 { display: flex; align-items: center; gap: 6px; }
.picklist .row2 .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picklist .row2 button { flex: none; width: auto; padding: 4px 10px; }

/* 컷 상세 — 요소가 많아 접어 둔다. 저장은 맨 위에 고정. */
#info .head { position: sticky; top: 0; z-index: 2; background: var(--panel); padding-bottom: 6px; }
#info .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 4px; }
#info .tab { border: none; background: none; color: var(--dim); padding: 7px 12px; border-radius: 7px 7px 0 0; }
#info .tab.on { color: var(--accent); background: #1d2836; box-shadow: inset 0 -2px 0 var(--accent); }
#info details { border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; margin-top: 6px; }
#info details[open] { padding-bottom: 8px; }
#info summary { cursor: pointer; font-size: 12px; color: var(--fg); list-style: none; }
#info summary::-webkit-details-marker { display: none; }
#info summary::before { content: '▸ '; color: var(--dim); }
#info details[open] > summary::before { content: '▾ '; }
#info section[hidden] { display: none; }

/* 스타일 강도 — 썸네일을 고른 뒤 그 자리에서 맞춘다 */
#styleStr { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
#styleStr[hidden] { display: none; }
#styleStr input[type=range] { flex: 1; }
#styleStrVal { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* 캔버스 맞춤 — 캔버스 오른쪽 위 모서리에 얹는다 */
#fitBtn {
  position: fixed; right: 10px; top: calc(var(--top) + 8px); z-index: 24;
  padding: 7px 10px; font-size: 15px; line-height: 1;
  background: rgba(35,35,35,.9); border: 1px solid var(--line); border-radius: 9px;
}

/* ── 스크롤 배치 미리보기 ─────────────────────── */
/* 그리는 자리를 가리면 안 된다 — 좁고, 접히고, 필요할 때만 뜬다. */
#scrollPop {
  /* 오른쪽은 레이어 패널 자리, 맨 왼쪽은 도구 툴바 자리다. 그 사이에 놓는다. */
  position: fixed; left: 52px; top: calc(var(--top) + 8px); z-index: 26;
  width: 140px; max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--panel, #1c1c1c); border: 1px solid #333; border-radius: 8px;
  padding: 6px; gap: 4px;
}
/* 머리줄이 곧 손잡이이자 접기 버튼이다 — 작은 아이콘 두 개를 겨누는 것보다 낫다 */
#scrollHead {
  display: flex; align-items: center; gap: 5px; font-size: 12px;
  padding: 3px 4px; border-radius: 6px; cursor: move; touch-action: none;
  background: #262626; user-select: none;
}
#scrollHead b { flex: none; }
#scrollInfo { flex: none; font-variant-numeric: tabular-nums; color: var(--dim); }
#scrollPop.folded #scrollStrip { display: none; }
#scrollPop.folded #scrollStrip { display: none; }
#scrollStrip { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
/* 컷 사이를 벌려 둔다 — 병합 결과에서 컷이 끊기는 자리가 여기서도 보여야 한다 */
/* flex 컬럼에서는 기본이 shrink 다 — 그대로 두면 컷이 세로로 눌려 비율이 죽는다 */
.scut { position: relative; flex: none; border: 1px solid #333; border-radius: 4px; background: #111; }
.scut.cur { border-color: var(--accent); }
.scut img { width: 100%; display: block; border-radius: 3px; }
.scut .no {
  position: absolute; left: 2px; top: 2px; font-size: 10px; line-height: 1;
  padding: 2px 4px; border-radius: 3px; background: rgba(0,0,0,.65); color: #fff;
}
.scut .empty { display: block; padding: 12px 4px; text-align: center; color: var(--dim); font-size: 10px; }
#hUse.on { border-color: var(--accent); color: var(--accent); }

/* ── 빠른 프롬프트 ───────────────────────────── */
#quickPop {
  position: fixed; left: 52px; right: 8px; top: calc(var(--top) + 8px); z-index: 34;
  max-width: 720px; max-height: 78vh; display: flex; flex-direction: column; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
#quickPop[hidden] { display: none; }
#quickPop .head { align-items: center; gap: 8px; }
#quickTabs { flex-wrap: wrap; gap: 4px; }
#quickTabs .tab { padding: 4px 10px; font-size: 12px; }
#quickGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px; overflow-y: auto; min-height: 0; flex: 1;
}
.qcard {
  padding: 3px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #1c1c1c; border: 1px solid var(--line); border-radius: 8px;
}
.qcard.on { border-color: var(--accent); background: #1d2836; }
.qcard svg { width: 100%; height: auto; display: block; }
.qcard .nm { font-size: 10.5px; line-height: 1.2; text-align: center; }
#quickPreview {
  min-height: 16px; color: var(--dim); word-break: break-word;
  border-top: 1px solid var(--line); padding-top: 5px;
}

/* 붙여 고정한 패널 — 기준 패널에 맞닿은 쪽 모서리를 각지게 해서 "붙었다" 를 보여 준다.
   끌고 있는 동안 붙을 자리에 들어오면 테두리가 강조된다. */
#layerPanel.docked, #scrollPop.docked { border-color: #3a4b6b; }
#layerPanel.docked { border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-color: var(--accent); }
#scrollPop.docked { border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-left-color: var(--accent); }
/* 패널끼리 붙인 경우 — 맞닿은 위쪽을 각지게 해서 한 덩어리로 보이게 */
#layerPanel.docked.tied, #scrollPop.docked.tied {
  border-top-left-radius: 3px; border-top-right-radius: 3px;
  border-top-color: var(--accent); border-left-color: var(--line);
}
#layerPanel.willdock, #scrollPop.willdock {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(91,140,255,.35), 0 8px 28px rgba(0,0,0,.5);
}

/* 빠른 프롬프트 미리보기 — 넣기 전에 손으로 고칠 수 있어야 한다 */
#quickPreview {
  width: 100%; resize: vertical; min-height: 46px;
  background: #161616; color: var(--fg); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 8px; line-height: 1.45;
}
#quickPolish.busy { opacity: .6; pointer-events: none; }

/* ── 인물별 영역 마킹 ─────────────────────────── */
/* 그림 위에 겹친다. 마킹 모드가 아닐 때는 손을 안 타야 그리기가 막히지 않는다. */
#markLayer {
  /* 자리·크기는 placeOverlays 가 **종이 자리**로 잡아 준다. 캔버스가 작업 공간
     전체가 됐으므로 inset:0 으로 두면 종이 아닌 데까지 덮어 좌표가 어긋난다. */
  position: absolute; left: 0; top: 0; right: auto; bottom: auto;
  pointer-events: none; touch-action: none; z-index: 3;
}
#markLayer[hidden] { display: none; }
body.marking #markLayer { pointer-events: auto; cursor: crosshair; }
#markLayer .mbox { fill: none; stroke-dasharray: 5 4; stroke-width: 1.5; opacity: .55; }

/* 왼쪽 위 컴팩트 칩 — 인물 수만큼. 누르면 그 인물 자리를 두를 준비가 된다. */
#castChips {
  /* 캔버스 밖 — 도구줄 옆 세로 줄. 그림 위에 얹으면 마킹할 자리를 가린다(작가 지시). */
  align-self: flex-start;
  margin: 6px 2px 0 2px;
  display: flex; flex-direction: column; gap: 3px;
  flex: none;
}
#castChips[hidden] { display: none; }
#castChips button {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 6px; font-size: 11px; line-height: 1.5; border-radius: 6px;
  background: rgba(20,20,20,.82); border: 1px solid #444; color: #ddd;
}
#castChips button .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
#castChips button.arm { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
#castChips button.none { opacity: .55; }
#castChips button .cnt {
  background: rgba(255,255,255,.22); border-radius: 999px;
  padding: 0 4px; font-size: 10px; margin-left: 2px;
}
#castChips button[data-markreset] { opacity: .8; }

/* 신체 파츠 고르개 */
#partSheet {
  position: fixed; left: 56px; right: 8px; top: calc(var(--top) + 8px); z-index: 36;
  max-width: 520px; max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.55);
}
#partSheet[hidden] { display: none; }
#partGrid { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
#partGrid button { padding: 6px 11px; font-size: 13px; border-radius: 999px; }
#partGrid button.set { border-color: var(--accent); color: var(--accent); }

/* 빠른 프롬프트 안의 인물 줄 */
#castRow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
#castRow button { padding: 4px 9px; font-size: 12px; border-radius: 999px; }
#castRow .cast.on { font-weight: 700; }
#castRow .add { border-style: dashed; }
#castRow .sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }

.mdraw { border-color: var(--accent) !important; color: var(--accent); }

/* 상호작용 — 행위자·피행위자를 먼저 고르고 무엇을 하는지 고른다.
   조합을 전부 늘어놓으면 사람 넷에 열두 줄이라 고를 수가 없다. */
#linkBox { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
#linkBox[hidden] { display: none; }
#linkNote { color: var(--dim); }
.lrow { display: flex; align-items: center; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
.lrow .lab { color: var(--dim); font-size: 12px; width: 54px; flex: none; }
.lrow button { padding: 4px 12px; border-radius: 999px; font-weight: 600; }
/* 부위 고르개 — 안 고르면 사람 자체를 가리킨다 */
.partsel { padding: 3px 6px; font-size: 12px; max-width: 120px; }
#linkActs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#linkActs button { padding: 4px 9px; font-size: 12px; border-radius: 999px; }
#linkActs button:disabled { opacity: .35; }
#linkList { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.litem {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  background: #1e1e1e; border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px;
}
.litem .arrow { color: var(--dim); }

/* 엔티티 프롬프트 바 — 인물·사물 프롬프트를 버튼 하나로 덮어쓴다(작가 지시, 9-7) */
#entRow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 2px 10px 4px; }
#entRow:empty { display: none; }
#entRow .ent { background: #141414; border: 1px solid #444; border-radius: 12px;
  padding: 2px 10px; font-size: 12px; cursor: pointer; }
#entRow .ent.on { background: #243244; box-shadow: 0 0 0 1px currentColor inset; }
#entRow .add, #entRow .save { background: #141414; border: 1px dashed #444;
  border-radius: 12px; padding: 2px 8px; font-size: 12px; color: #888; cursor: pointer; }

/* 공유 프롬프트 패널 — 끌어다 놓은 단추는 모든 컷에 적용된다(작가 지시, 9-8) */
#entShared { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin: 2px 10px 4px; padding: 3px 8px; border: 1px dashed #3a3a40; border-radius: 8px;
  min-height: 22px; font-size: 12px; }
#entShared.over { border-color: #4a9eff; background: rgba(74, 158, 255, .08); }
#entShared .lbl { color: #777; font-size: 11px; }
#entShared .hintTxt { color: #555; font-size: 11px; }
#entShared .ent { border: 1px solid; border-radius: 12px; padding: 2px 10px;
  font-size: 12px; cursor: pointer; }
/* 꺼 둔 공유 — 목록엔 남되 컷에는 안 들어간다. 점선으로 「지금은 아님」을 보인다. */
#entShared .ent.off { border-style: dashed; text-decoration: line-through; }

/* 레이어 다중 선택 — 이동 도구로 같이 움직일 레이어들(작가 지시, 9-8) */
.lyr.sel { box-shadow: inset 0 0 0 2px #5ab0ff; }

/* 시스템 › 포즈 정리 — 이 화면에는 포즈 정리만 있다(작가 지시, 9-1).
   지우지 않고 감추기만 한다: 3D 인형 판이 그림판 자리를 읽어 칸을 나눈다. */
body.poseOnly { background: #0f0f11; }
body.poseOnly > *:not(#pose3d) { visibility: hidden !important; }
body.poseOnly #pose3d { background: #0f0f11; }