:root {
  --bg: #2c2c2c;
  --bg-2: #1e1e1e;
  --field: #383838;
  --hover: #3d3d3d;
  --line: #3d3d3d;
  --text: #f5f5f5;
  --dim: #a0a0a0;
  --faint: #6f6f6f;
  --accent: #0d99ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font: 12px/1.4 Inter, system-ui, "Noto Sans KR", sans-serif; background: var(--bg-2); color: var(--text); }
body { display: grid; grid-template: "bar bar bar" 40px "side stage props" 1fr / 240px 1fr 260px; }
button { font: inherit; }
svg { display: block; }

/* ── 상단 바 ── */
#topbar { grid-area: bar; display: flex; align-items: center; gap: 2px; padding: 0 8px 0 12px; background: var(--bg); border-bottom: 1px solid #000; z-index: 3; }
#topbar .logo { margin-right: 10px; font-size: 13px; letter-spacing: .2px; }
#topbar button { background: none; color: var(--text); border: 0; border-radius: 5px; height: 28px; padding: 0 9px; cursor: pointer; }
#topbar button.icon { width: 28px; padding: 0; display: grid; place-items: center; }
#topbar button:hover { background: var(--hover); }
#topbar button.active { background: rgba(13, 153, 255, .25); color: #6cc4ff; }
#topbar button:disabled { opacity: .35; cursor: default; background: none; }
#topbar select { background: var(--field); color: var(--text); border: 1px solid transparent; border-radius: 5px; height: 26px; padding: 0 4px; font: inherit; }
#topbar select:hover { border-color: #555; }
.sep { width: 1px; height: 18px; background: #4a4a4a; margin: 0 6px; }
.spacer { flex: 1; }
#status { color: var(--dim); font-variant-numeric: tabular-nums; margin: 0 4px; }
#mcp-status { color: #4ade80; margin: 0 8px; }
#save-status { color: var(--faint); font-size: 11px; margin: 0 4px; }
#save-status.warn { color: #fbbf24; }

/* ── 하단 플로팅 도구 모음 ── */
#tools { position: fixed; bottom: 16px; left: calc(240px + (100vw - 500px) / 2); transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; background: #1e1e1e; border: 1px solid #000; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); z-index: 3; }
#tools .tg { position: relative; display: flex; align-items: center; }
#tools .tg-main { width: 34px; height: 34px; display: grid; place-items: center; background: none; color: var(--text); border: 0; border-radius: 6px; cursor: pointer; padding: 0; }
#tools .tg-main:hover { background: #383838; }
#tools .tg-main.active { background: var(--accent); color: #fff; }
#tools .tg-caret { width: 14px; height: 34px; margin-left: -2px; display: grid; place-items: center; background: none; color: var(--dim); border: 0; border-radius: 6px; cursor: pointer; padding: 0; }
#tools .tg-caret:hover, #tools .tg.open .tg-caret { background: #383838; color: var(--text); }
#tools .tg-menu { position: absolute; bottom: calc(100% + 12px); left: 0; min-width: 210px; padding: 6px; background: #1e1e1e; border: 1px solid #000; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); z-index: 5; }
#tools .tg-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 10px 0 6px; background: none; color: var(--text); border: 0; border-radius: 6px; cursor: pointer; text-align: left; font-weight: 600; }
#tools .tg-item:hover { background: var(--accent); color: #fff; }
#tools .tg-item .chk { width: 14px; flex: none; text-align: center; }
#tools .tg-item.active .chk::before { content: "✓"; }
#tools .tg-item .ic { flex: none; display: grid; place-items: center; }
#tools .tg-item .nm { flex: 1; white-space: nowrap; }
#tools .tg-item kbd { font: inherit; font-weight: 400; color: var(--dim); margin-left: 16px; }
#tools .tg-item:hover kbd { color: #d8efff; }

/* ── 좌측 레이어 ── */
#layers { grid-area: side; background: var(--bg); border-right: 1px solid #000; overflow: auto; }
#layers h2, #props h2 { margin: 0; padding: 0 12px; height: 40px; display: flex; align-items: center; font-size: 12px; color: var(--text); font-weight: 600; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 1; }
#layer-list { list-style: none; margin: 0; padding: 4px 0; }
#layer-list li { position: relative; user-select: none; -webkit-user-select: none; display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 12px; cursor: pointer; color: #d6d6d6; }
#layer-list li .caret { width: 14px; flex: none; color: var(--dim); display: grid; place-items: center; }
#layer-list li .ic { flex: none; color: var(--dim); display: grid; place-items: center; }
#layer-list li .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#layer-list li button { background: none; border: 0; color: var(--dim); cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; opacity: 0; padding: 0; }
#layer-list li button:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
#layer-list li:hover button, #layer-list li button.on { opacity: 1; }
#layer-list li.hidden .nm, #layer-list li.hidden .ic { opacity: .4; }
#layer-list li:hover { background: var(--hover); }
#layer-list li.selected { background: rgba(13, 153, 255, .28); color: #fff; }
#layer-list li.selected .ic, #layer-list li.selected .caret { color: #9bd6ff; }

/* ── 우측 디자인 패널 ── */
#props { grid-area: props; background: var(--bg); border-left: 1px solid #000; overflow: auto; padding-bottom: 24px; }
#props h3 { margin: 0; padding: 12px 12px 6px; font-size: 11px; color: var(--text); font-weight: 600; }
#props-body > div:not(.row):not(.grid):not(#align-row) { border-top: 1px solid var(--line); }
#props-body > h3 { border-top: 1px solid var(--line); }
#props-empty { padding: 16px 12px; color: var(--faint); }
#props .row { display: flex; align-items: center; gap: 6px; padding: 3px 12px; }
#props .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 12px; }
#props .hint { margin: 6px 12px 8px; color: var(--faint); font-size: 11px; line-height: 1.5; }
#props #align-row { padding: 6px 8px; gap: 0; border-bottom: 1px solid var(--line); }
#props #align-row button { flex: 1; height: 28px; display: grid; place-items: center; background: none; color: var(--text); border: 0; border-radius: 5px; cursor: pointer; padding: 0; }
#props #align-row button:hover { background: var(--hover); }

/* 숫자 입력: 라벨을 접두사로 가진 Figma 식 필드 */
#props label { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 11px; height: 28px; padding: 0 8px; background: var(--field); border: 1px solid transparent; border-radius: 5px; cursor: ew-resize; user-select: none; }
#props label:hover { border-color: #555; }
#props label:focus-within { border-color: var(--accent); }
#props label.inline { flex: 1; min-width: 0; }
#props label.check { background: none; border: 0; padding: 0; gap: 6px; cursor: pointer; color: var(--text); }
#props label.check:hover { border: 0; }
#props label input { flex: 1; min-width: 0; width: 100%; background: none; border: 0; outline: 0; color: var(--text); font: inherit; padding: 0; cursor: text; }
#props label input[type=checkbox] { flex: none; width: auto; accent-color: var(--accent); }
#props input[type=text], #props select, #props textarea { background: var(--field); color: var(--text); border: 1px solid transparent; border-radius: 5px; font: inherit; padding: 0 8px; height: 28px; min-width: 0; }
#props input[type=text] { flex: 1; width: 100%; }
#props select { flex: 1; }
#props textarea { width: 100%; height: auto; padding: 6px 8px; resize: vertical; }
#props input[type=text]:hover, #props select:hover, #props textarea:hover { border-color: #555; }
#props input[type=text]:focus, #props select:focus, #props textarea:focus { outline: 0; border-color: var(--accent); }
#props input:disabled { opacity: .4; }
#props input[type=color] { width: 28px; height: 28px; padding: 0; border: 1px solid #555; border-radius: 5px; background: none; flex: none; cursor: pointer; }
#props input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
#props input[type=color]::-webkit-color-swatch { border: 0; border-radius: 3px; }
#props input[type=checkbox] { accent-color: var(--accent); }
#props #p-image-reset { background: var(--field); color: var(--text); border: 0; border-radius: 5px; height: 28px; padding: 0 10px; cursor: pointer; }
#props #p-image-reset:hover { background: #4a4a4a; }

/* ── 캔버스 ── */
#stage { grid-area: stage; position: relative; background: #e5e5e5; }
.text-edit { position: absolute; margin: 0; padding: 0; border: 0; outline: 1px solid var(--accent); background: transparent; resize: none; overflow: hidden; white-space: pre; transform-origin: center; z-index: 2; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* 레이어 드래그 앤 드롭 표시 */
#layer-list li.drop-above::after, #layer-list li.drop-below::after { content: ""; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--accent); border-radius: 1px; pointer-events: none; }
#layer-list li.drop-above::after { top: -1px; }
#layer-list li.drop-below::after { bottom: -1px; }
#layer-list li.drop-into { outline: 1px solid var(--accent); outline-offset: -1px; background: rgba(13, 153, 255, .18); }
#layers.drop-root { box-shadow: inset 0 0 0 1px var(--accent); }
#props button.wide { flex: 1; height: 28px; background: var(--field); color: var(--text); border: 0; border-radius: 5px; cursor: pointer; padding: 0 6px; }
#props button.wide:hover { background: #4a4a4a; }
#props button.wide[hidden] { display: none; }
#g-stops .row { gap: 6px; }
#g-stops input[type=number] { flex: 1; min-width: 0; height: 28px; background: var(--field); color: var(--text); border: 1px solid transparent; border-radius: 5px; padding: 0 8px; font: inherit; }
#g-stops input[type=number]:focus { outline: 0; border-color: var(--accent); }
#g-stops button.wide { flex: none; width: 28px; padding: 0; }
#g-stops button.wide:disabled { opacity: .35; cursor: default; }
#styles-lib { padding-bottom: 8px; }
#styles-lib input.st-size { width: 64px; flex: none; height: 28px; background: var(--field); color: var(--text); border: 1px solid transparent; border-radius: 5px; padding: 0 8px; font: inherit; }
#styles-lib button.wide { flex: none; width: 28px; padding: 0; }

/* 페이지 목록 */
#pages { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
#pages .pages-head { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--line); }
#pages .pages-head h2 { all: unset; font-size: 12px; font-weight: 600; }
#pages .pages-head button { background: none; color: var(--text); border: 0; border-radius: 5px; width: 24px; height: 24px; cursor: pointer; }
#pages .pages-head button:hover { background: var(--hover); }
#page-list { list-style: none; margin: 0; padding: 4px 0 0; max-height: 160px; overflow: auto; }
#page-list li { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px 0 12px; cursor: pointer; color: #d6d6d6; user-select: none; }
#page-list li .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-list li:hover { background: var(--hover); }
#page-list li.current { background: rgba(13, 153, 255, .28); color: #fff; }
#page-list li button { background: none; border: 0; color: var(--dim); cursor: pointer; width: 22px; height: 22px; border-radius: 4px; opacity: 0; padding: 0; }
#page-list li:hover button { opacity: 1; }
#page-list li button:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
#g-stops input.st-alpha { flex: none; width: 52px; }

/* 채우기/선 레이어 목록 */
#props .layers { padding: 0 0 2px; }
#props .layer { display: grid; grid-template-columns: 1fr auto auto auto auto auto; gap: 4px; align-items: center; padding: 3px 12px; }
#props .layer.hidden { opacity: .45; }
#props .layer select { grid-column: 1 / 4; height: 28px; }
#props .layer input[type=number] { width: 100%; min-width: 0; height: 28px; background: var(--field); color: var(--text); border: 1px solid transparent; border-radius: 5px; padding: 0 6px; font: inherit; }
#props .layer input[type=color] { width: 28px; height: 28px; }
#props .layer button { width: 24px; height: 24px; padding: 0; background: none; color: var(--dim); border: 0; border-radius: 4px; cursor: pointer; }
#props .layer button:hover { background: var(--hover); color: var(--text); }
#props .layer button:disabled { opacity: .3; cursor: default; }
#props .layer .sub { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; }
#props button.wide.eye { flex: none; width: 36px; }
#props .fmt-row { gap: 4px; }
#props button.wide.fmt { flex: none; width: 30px; }
#props button.wide.fmt.on { background: var(--accent); color: #fff; }
#props #fmt-color-clear { flex: 1; }

/* 문서 메뉴 */
#doc-menu { position: fixed; top: 40px; left: 60px; min-width: 240px; max-height: 60vh; overflow: auto; padding: 6px; background: #1e1e1e; border: 1px solid #000; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); z-index: 6; }
#doc-menu ul { list-style: none; margin: 0; padding: 0; }
#doc-menu li { display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 6px 0 10px; border-radius: 6px; cursor: pointer; color: var(--text); }
#doc-menu li:hover { background: var(--hover); }
#doc-menu li.current { background: rgba(13, 153, 255, .28); }
#doc-menu li .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#doc-menu li button { width: 24px; height: 24px; padding: 0; background: none; color: var(--dim); border: 0; border-radius: 4px; cursor: pointer; opacity: 0; }
#doc-menu li:hover button { opacity: 1; }
#doc-menu li button:hover { background: rgba(255, 255, 255, .12); color: var(--text); }
#doc-menu .doc-new { width: 100%; margin-top: 4px; height: 30px; background: none; color: var(--text); border: 0; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; cursor: pointer; }
#doc-menu .doc-new:hover { background: var(--hover); }

/* 오른쪽 클릭 메뉴 */
#ctx-menu { position: fixed; min-width: 170px; max-height: calc(100vh - 8px); overflow-y: auto; padding: 3px; font-size: 10px; background: #1e1e1e; border: 1px solid #000; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); z-index: 20; }
#ctx-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 17px; padding: 0 6px; background: none; color: var(--text); border: 0; border-radius: 4px; cursor: pointer; text-align: left; font: inherit; font-size: inherit; }
#ctx-menu button:hover:not(:disabled) { background: var(--accent); color: #fff; }
#ctx-menu button:disabled { color: var(--faint); cursor: default; }
#ctx-menu kbd { font: inherit; color: var(--dim); }
#ctx-menu button:hover:not(:disabled) kbd { color: #d8efff; }
#ctx-menu hr { border: 0; border-top: 1px solid var(--line); margin: 2px 0; }
/* 레이어 이름 바꾸기 */
#layer-list li input.rename { flex: 1; min-width: 0; height: 22px; background: var(--bg-2); color: var(--text); border: 1px solid var(--accent); border-radius: 4px; padding: 0 4px; font: inherit; outline: 0; }

/* ───────── 패널 정리 (상태별 표시, 구역, 한 줄 레이아웃) ───────── */
/* display 를 지정한 규칙이 hidden 속성을 이기지 않게 한다: 숨긴 것은 반드시 숨겨진다 */
[hidden] { display: none !important; }

#props .sec { border-top: 1px solid var(--line); padding-bottom: 6px; }
#props .sec-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 0; }
#props .sec-head h3 { flex: 1; cursor: pointer; user-select: none; }
#props .sec-head h3::before { content: "▾"; display: inline-block; width: 12px; color: var(--faint); font-size: 9px; }
#props .sec.collapsed .sec-head h3::before { content: "▸"; }
#props .sec.collapsed > :not(.sec-head) { display: none !important; }
#props #paint-props { border-top: 0 !important; }
#props #paint-props > .sec:first-child { border-top: 1px solid var(--line); }

#props button.mini { flex: none; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; background: none; color: var(--dim); border: 0; border-radius: 5px; cursor: pointer; font-size: 13px; }
#props button.mini:hover { background: var(--hover); color: var(--text); }
#props button.mini.off { opacity: .35; }

/* 뒤에 % 가 붙는 좁은 숫자 칸 */
#props label.pct { flex: none; width: 62px; gap: 2px; padding: 0 6px; cursor: text; }
#props label.pct.grow { flex: 1; width: auto; }
#props label.pct input { text-align: right; }
#props label.check.fx { flex: 1; }
#props .grid.three { grid-template-columns: 1fr 1fr 1fr; padding-top: 2px; }
#props select { min-width: 0; }

/* 그라디언트 정지점: 색 | 위치 | 알파 | 삭제 */
#props .stop-head, #g-stops .row { display: grid; grid-template-columns: 28px 1fr 1fr 26px; gap: 6px; align-items: center; padding: 2px 12px; }
#props .stop-head { color: var(--faint); font-size: 10px; padding-top: 4px; }
#g-stops input[type=number], #g-stops input.st-alpha { width: 100%; min-width: 0; flex: initial; max-width: none; }
#g-stops button.wide { width: 26px; height: 26px; background: none; color: var(--dim); }
#g-stops button.wide:hover:not(:disabled) { background: var(--hover); color: var(--text); }

/* 쌓은 채우기/선 레이어: 색 | 종류 | 알파 | 보기 | 위로 | 삭제 (한 줄) */
#props .layers:empty { display: none; }
#props .layers { margin: 0 8px 4px; padding: 2px 0; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, .02); }
#props .layer { display: grid; grid-template-columns: 28px minmax(0, 1fr) 52px 22px 22px 22px; gap: 4px; align-items: center; padding: 3px 6px; }
#props .layer select { grid-column: auto; height: 28px; }
#props .layer input[type=number] { text-align: right; }
#props .layer .sub { grid-column: 2 / -1; display: flex; gap: 6px; align-items: center; color: var(--faint); font-size: 11px; }
#props .layer .sub input[type=number] { width: 56px; }
#props .paint-base { padding-top: 2px; }

/* 상단 바의 접이식 메뉴 */
#topbar .pop { position: relative; }
#topbar .pop-menu { position: absolute; top: 34px; left: 0; min-width: 170px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: #1e1e1e; border: 1px solid #000; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); z-index: 6; }
#topbar .pop-menu button { justify-content: flex-start; width: 100%; text-align: left; }
#topbar .pop-menu button::before { content: ""; display: inline-block; width: 16px; }
#topbar .pop-menu button.active { background: none; color: var(--text); }
#topbar .pop-menu button.active::before { content: "✓"; color: var(--accent); }
#topbar .pop-menu button:hover { background: var(--hover); }
#topbar .pop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 28px; padding: 0 9px 0 25px; color: var(--text); }

/* ───────── 색/그라디언트 편집 팝업 ───────── */
#props .ppop { position: fixed; z-index: 60; width: 248px; padding: 8px 0 10px; background: var(--bg); border: 1px solid #000; border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }
#props .ppop .pp-head { display: flex; align-items: center; gap: 4px; padding: 0 8px 6px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
#props .ppop .pp-head select { flex: none; width: 96px; height: 28px; }
#props .ppop .pp-head .spacer { flex: 1; }
#props .ppop .pp-bar { position: relative; height: 22px; margin: 12px 18px 16px; border-radius: 5px; cursor: copy;
  background: var(--g), repeating-conic-gradient(#888 0 25%, #bbb 0 50%) 0 0 / 10px 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
#props .ppop .pp-stop { position: absolute; top: -6px; width: 16px; height: 16px; margin-left: -8px; padding: 0; border: 2px solid #fff; border-radius: 4px; background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); cursor: ew-resize; }
#props .ppop .pp-stop.on { border-color: var(--accent); box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--accent); z-index: 1; }
#props .ppop .pp-sv { position: relative; height: 150px; margin: 8px 12px; border-radius: 6px; cursor: crosshair; touch-action: none; }
#props .ppop .pp-thumb { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); pointer-events: none; }
#props .ppop input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: calc(100% - 24px); height: 12px; margin: 10px 12px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; }
#props .ppop input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
#props .ppop input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
#props .ppop input[type=range]::-moz-range-track { background: transparent; }
#props .ppop .pp-hue { background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
#props .ppop .pp-alpha { background: linear-gradient(to right, transparent, var(--c)), repeating-conic-gradient(#888 0 25%, #bbb 0 50%) 0 0 / 8px 8px; }
#props .ppop .pp-row { display: flex; gap: 6px; padding: 2px 12px; align-items: center; }
#props .ppop .pp-row input[type=text] { flex: 1; min-width: 0; height: 28px; background: var(--field); color: var(--text); border: 1px solid transparent; border-radius: 5px; padding: 0 8px; font: inherit; text-transform: uppercase; }
#props .ppop .pp-row input[type=text]:focus { outline: 0; border-color: var(--accent); }
#props .ppop .pp-label { padding: 8px 12px 4px; color: var(--faint); font-size: 10px; }
#props .ppop .pp-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
#props .ppop .pp-swatches:empty::after { content: '아직 없음'; color: var(--faint); font-size: 11px; }
#props button.pp-sw { flex: none; width: 22px; height: 22px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 5px; cursor: pointer; }
#g-stops .row.on { background: rgba(13, 153, 255, .12); }
#g-stops .row.stop button.pp-sw { width: 24px; height: 24px; }
#props button.swatch { flex: none; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 5px; cursor: pointer; }
#props .ppop .pp-title { color: var(--text); font-size: 12px; font-weight: 600; }
#props .ppop .pp-stop { top: 3px; }

/* ───────── 위치 / 레이아웃 / 모양 구역 ───────── */
#props .sub-label { padding: 6px 12px 2px; color: var(--dim); font-size: 11px; }
#props #pos-props #align-row { padding: 2px 8px 4px; border-bottom: 0; }
#props .sec .grid { padding-top: 3px; padding-bottom: 3px; }
#props button.mini.on { background: rgba(13, 153, 255, .2); color: var(--accent); }
#props-body > .sec:first-child { border-top: 0; }

/* ───────── 패널 맨 위: 객체 종류 + 컴포넌트/마스크/불리언/편집 ───────── */
#props #obj-head { display: flex; align-items: center; gap: 2px; padding: 8px 8px 8px 12px; border-top: 0; }
#props #obj-kind { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 12px; font-weight: 600; }
#props #obj-head button.mini:disabled { opacity: .3; cursor: default; background: none; }
#props #h-bool-wrap { position: relative; display: flex; align-items: center; }
#props #h-bool-wrap button.caret { width: 14px; }
#props #h-bool-menu { position: absolute; z-index: 40; top: 30px; right: 0; min-width: 170px; padding: 4px; background: var(--bg); border: 1px solid #000; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
#props #h-bool-menu button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; height: 28px; padding: 0 8px; background: none; color: var(--text); border: 0; border-radius: 5px; font: inherit; cursor: pointer; }
#props #h-bool-menu button:hover { background: var(--accent); color: #fff; }
#props #h-bool-menu kbd { color: var(--faint); font: inherit; font-size: 10px; }
#props #h-bool-menu button:hover kbd { color: #fff; }

/* ───────── 로그인 화면 ───────── */
#auth { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg-2); }
#auth-form { width: min(340px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 22px; background: var(--bg); border: 1px solid #000; border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, .5); }
#auth-form h1 { margin: 0; font-size: 22px; color: var(--text); }
#auth-form .auth-sub { margin: 0 0 6px; color: var(--dim); font-size: 12px; }
#auth-form input { height: 36px; padding: 0 10px; background: var(--field); color: var(--text); border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 13px; }
#auth-form input:focus { outline: 0; border-color: var(--accent); }
#auth-error { min-height: 16px; color: #f87171; font-size: 12px; }
#auth-submit { height: 36px; background: var(--accent); color: #fff; border: 0; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
#auth-submit:disabled { opacity: .6; cursor: default; }
#auth-toggle { background: none; border: 0; color: var(--dim); font: inherit; font-size: 12px; cursor: pointer; padding: 6px; }
#auth-toggle:hover { color: var(--text); }
#btn-user { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────── 창(버전 기록, 공유) ───────── */
.modal-back { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(0, 0, 0, .5); }
.modal { width: min(520px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 48px)); display: flex; flex-direction: column; background: var(--bg); color: var(--text); border: 1px solid #000; border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, .6); font-size: 12px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-x { width: 28px; height: 28px; background: none; color: var(--dim); border: 0; border-radius: 6px; cursor: pointer; }
.modal-x:hover { background: var(--hover); color: var(--text); }
.modal-body { padding: 12px 16px 16px; overflow: auto; }
.modal-note { margin: 0 0 10px; color: var(--dim); line-height: 1.5; }
.modal-row { display: flex; gap: 6px; margin-bottom: 6px; }
.modal-row input { flex: 1; min-width: 0; }
.modal input, .modal select { height: 30px; padding: 0 8px; background: var(--field); color: var(--text); border: 1px solid transparent; border-radius: 6px; font: inherit; }
.modal input:focus, .modal select:focus { outline: 0; border-color: var(--accent); }
.modal button { height: 30px; padding: 0 10px; background: var(--field); color: var(--text); border: 0; border-radius: 6px; font: inherit; cursor: pointer; white-space: nowrap; }
.modal button:hover { background: var(--hover); }
.modal button.primary { background: var(--accent); color: #fff; }
.modal-error { min-height: 16px; color: #f87171; margin-bottom: 4px; }
.modal-list { list-style: none; margin: 0; padding: 0; }
.modal-list li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.modal-list li.empty { color: var(--faint); }
.modal-list .grow { flex: 1; min-width: 0; }
.modal-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-list .meta { color: var(--faint); font-size: 11px; margin-top: 2px; }
.badge { flex: none; padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); color: var(--dim); font-size: 10px; white-space: nowrap; }
#doc-menu li .badge { margin-right: 4px; }
#doc-menu { min-width: 300px; }

/* Figma 식 조작: 숫자 칸(식 입력·끌기), 빠른 실행 창, 프레임 크기 목록, 패널 숨기기 */
#props label input.num { background: none; border: 0; padding: 0; height: auto; }
body.scrubbing, body.scrubbing * { cursor: ew-resize !important; user-select: none !important; }
body.ui-hidden #layers, body.ui-hidden #props, body.ui-hidden #topbar, body.ui-hidden #tools { display: none; }
#palette { position: fixed; top: 18%; left: 50%; transform: translateX(-50%); width: min(520px, 90vw); background: #1e1e1e; border: 1px solid #000; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .6); z-index: 40; overflow: hidden; }
#palette input { display: block; width: 100%; height: 44px; padding: 0 16px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; font-size: 14px; outline: 0; box-sizing: border-box; }
#palette .list { max-height: 50vh; overflow-y: auto; padding: 6px; }
#palette button { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; height: 30px; padding: 0 10px; background: none; color: var(--text); border: 0; border-radius: 6px; cursor: pointer; text-align: left; font: inherit; }
#palette button.on, #palette button:hover { background: var(--accent); color: #fff; }
#palette kbd { font: inherit; color: var(--dim); }
#palette button.on kbd, #palette button:hover kbd { color: #d8efff; }
#palette .none { padding: 14px 10px; color: var(--dim); }
#frame-presets { padding: 8px; border-bottom: 1px solid var(--line); }
#frame-presets .hint { color: var(--dim); font-size: 11px; padding: 2px 4px 6px; }
#frame-presets h4 { margin: 8px 4px 4px; font-size: 11px; font-weight: 600; color: var(--dim); }
#frame-presets button { display: flex; justify-content: space-between; gap: 12px; width: 100%; height: 26px; padding: 0 8px; background: none; color: var(--text); border: 0; border-radius: 5px; cursor: pointer; font: inherit; text-align: left; }
#frame-presets button:hover { background: var(--hover); }
#frame-presets button em { font-style: normal; color: var(--dim); }
#toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); padding: 8px 14px; background: #1e1e1e; color: #fff; border: 1px solid #000; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); z-index: 45; font-size: 12px; pointer-events: none; }

/* 앱 대화창 (alert/confirm/prompt 대체) */
.modal.dialog { width: min(380px, calc(100vw - 32px)); }
.dialog .modal-body { padding: 16px; }
.dialog-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.dialog-msg { margin: 0 0 12px; line-height: 1.55; white-space: pre-line; word-break: break-word; }
.dialog-input { width: 100%; box-sizing: border-box; margin-bottom: 12px; }
.dialog-btns { display: flex; justify-content: flex-end; gap: 6px; }
.dialog-btns button { min-width: 64px; }
.dialog-choices { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; margin-bottom: 12px; }
.dialog-choices button { text-align: left; }
#page-list li.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
#page-list li.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }