/* 이미지 편집기 화면. 색과 글꼴은 CSS 변수로 두어 테마를 바꿀 수 있게 합니다. */

:root {
	--bg: #0a0e1f;
	--bg2: #05070f;
	--card: #111938;
	--line: #23306a;
	--text: #e8ecf7;
	--muted: #8da0d6;
	--gold: #f5c542;
	--gold-ink: #1d1600;
	--bar: 44px;
	--opts-h: 46px;
	--rail: 68px;
	--side: 292px;
}

* { box-sizing: border-box; }

/* display 를 정한 클래스(.og · .seg 등)가 브라우저 기본 [hidden] 을 이기므로 여기서 못박습니다. */
[hidden] { display: none !important; }

html, body {
	height: 100%;
	margin: 0;
	background: var(--bg2);
	color: var(--text);
	font: 13px/1.5 Pretendard, "맑은 고딕", system-ui, sans-serif;
	overflow: hidden;
}

/* minmax(0, 1fr) 이라야 캔버스가 커도 격자 칸이 밀려나지 않습니다(ui-spec.md 1장). */
.app {
	display: grid;
	height: 100%;
	grid-template-columns: var(--rail) minmax(0, 1fr) var(--side);
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	grid-template-areas:
		"top    top    top"
		"opts   opts   opts"
		"rail   stage  side"
		"status status status";
}

.mono { font-family: ui-monospace, Consolas, monospace; color: var(--muted); }

/* 위 막대 */
.top {
	grid-area: top;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 12px;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: baseline; gap: 8px; }
.logo { font-family: "Press Start 2P", monospace; font-size: 12px; color: var(--gold); }
.brand-sub { color: var(--muted); font-size: 12px; }
.tb { display: flex; align-items: center; gap: 6px; }
.tb label { display: flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }

#docName {
	width: 120px;
	height: 26px;
	padding: 0 8px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--bg);
	color: var(--text);
	font: inherit;
}

#docName:focus { border-color: var(--gold); outline: none; }

.btn {
	height: 30px;
	padding: 0 10px;
	background: var(--card);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 4px;
	font: inherit;
	cursor: pointer;
}

.btn:hover:not(:disabled) { border-color: var(--gold); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sq { width: 30px; padding: 0; }
.btn.sm { height: 24px; padding: 0 8px; font-size: 12px; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

select {
	height: 30px;
	padding: 0 8px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--bg);
	color: var(--text);
	font: inherit;
}

input[type="range"] { width: 110px; accent-color: var(--gold); }
input[type="checkbox"] { accent-color: var(--gold); }

/* 도구별 옵션 막대 — PC 에서 언제나 한 줄입니다(기획서 3.4). 넘치면 `더보기` 로 접습니다. */
.opts {
	grid-area: opts;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px 18px;
	/* 높이를 못박습니다. 최소 높이만 두면 칸이 가장 높은 도구(텍스트 · 펜 등)에서 막대가 1px 커져, 도구를 바꿀
	   때마다 작업 영역 높이가 바뀌고 캔버스를 다시 잡아(맞춤 배율도 바뀜) 화면이 깜빡였습니다(2026-10-02).
	   위아래 여백 없이 가운데 맞춤으로 칸을 세웁니다. 줄이 나뉘는 좁은 화면만 높이를 풉니다(아래 860px). */
	height: var(--opts-h);
	padding: 0 14px;
	overflow: hidden;
	background: var(--card);
	border-bottom: 1px solid var(--line);
}

.og { flex: none; }
.flyout.opt-more { display: grid; gap: 10px; min-width: 200px; padding: 10px 12px; }
.flyout.open-menu { min-width: 260px; }

/* 워터마크 위치 — 9칸과 가로 · 세로 오프셋(기획서 4.7). 칸 단추는 변형 패널의 기준점(.anchor)을 그대로 씁니다. */
.flyout.wm-place { width: 260px; gap: 10px; padding: 10px 12px; }
.wm-place-row { display: flex; align-items: flex-start; gap: 10px; }
.wm-place label { display: flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.wm-place input[type="range"] { flex: 1; width: auto; }
.wm-place output { min-width: 44px; color: var(--text); font-family: ui-monospace, Consolas, monospace; text-align: right; }
.wm-place-foot { display: flex; justify-content: flex-end; }
.om-t { display: grid; gap: 2px; }
.om-t small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.flyout.opt-more .og { display: flex; }

.og { display: flex; align-items: center; gap: 8px; }
.og label { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.og output { min-width: 34px; color: var(--text); font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.og.tail { margin-left: auto; }
.hint { color: var(--muted); font-size: 12px; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 28px;
	padding: 0 10px;
	border: 0;
	border-right: 1px solid var(--line);
	background: var(--bg);
	color: var(--muted);
	font: inherit;
	cursor: pointer;
}

.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); font-weight: 700; }
.seg .ico { display: block; line-height: 0; }
.seg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 색 칸: 누르면 색 선택 창이 열립니다. 브라우저 기본 색 선택은 브라우저마다 달라 쓰지 않습니다. */
.swatch {
	width: 30px;
	height: 24px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 3px;
	box-shadow: inset 0 0 0 2px var(--bg);
	cursor: pointer;
}

.swatch:hover, .swatch[aria-expanded="true"] { border-color: var(--gold); }

/* 떠 있는 메뉴 · 창 */
.flyout {
	position: fixed;
	z-index: 30;
	display: grid;
	gap: 2px;
	min-width: 156px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--card);
	box-shadow: 4px 4px 0 #000;
}

.flyout > button {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 0;
	border-radius: 3px;
	background: none;
	color: var(--text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.flyout > button:hover { background: var(--bg); }
.flyout > button[aria-current="true"] { color: var(--gold); font-weight: 700; }
.flyout > button kbd { margin-left: auto; font: 10px ui-monospace, Consolas, monospace; opacity: .6; }
.flyout .ico { display: block; line-height: 0; }
.flyout svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 색 선택 창은 다른 떠 있는 메뉴보다 위에 둡니다(ui-spec.md 9장 CSS 주의). */
.flyout.cpick { z-index: 31; width: 252px; gap: 8px; padding: 8px 10px 10px; }

.cp-tabs { display: flex; border-bottom: 1px solid var(--line); }
.cp-tabs button {
	flex: 1;
	padding: 6px 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--muted);
	font: inherit;
	cursor: pointer;
}

.cp-tabs button[aria-selected="true"] { border-bottom-color: var(--gold); color: var(--gold); font-weight: 700; }
.cp-pane { display: grid; gap: 8px; }
.cp-sub { color: var(--muted); font-size: 11px; }
.cp-grid[data-empty="1"]::before { content: "아직 없습니다"; grid-column: 1 / -1; color: var(--muted); font-size: 11px; }

.cp-sv { position: relative; height: 150px; border-radius: 3px; cursor: crosshair; touch-action: none; }
.cp-sv-knob, .cp-hue-knob { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 1px #000; pointer-events: none; }
.cp-sv-knob { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; }

.cp-hue {
	position: relative;
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
	cursor: pointer;
	touch-action: none;
}

.cp-hue-knob { top: -2px; width: 6px; height: 16px; margin-left: -3px; border-radius: 2px; }
.cp-row { display: flex; align-items: center; gap: 6px; }
.cp-preview { display: flex; flex: none; width: 40px; height: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; }
.cp-preview i { flex: 1; }
.cp-foot { justify-content: flex-end; }
#cpHex { width: 84px; min-width: 0; height: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); color: var(--text); font: 12px ui-monospace, Consolas, monospace; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 700; }
.btn.gold:hover:not(:disabled) { background: #ffd65e; }
.close-btn { border-color: var(--muted); }
.close-btn:hover:not(:disabled) { border-color: #e0707c; background: #3a1622; color: #fff; }

/* 확인 대화 상자(#dlg). 작업 화면 전체를 덮어 뒤를 누르지 못하게 합니다. */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(5, 7, 15, .6); }
.modal[hidden] { display: none; }
.modal-box {
	display: grid;
	gap: 12px;
	width: min(440px, calc(100vw - 32px));
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--card);
	box-shadow: 6px 6px 0 #000;
}
.modal-box h2 { margin: 0; font-size: 15px; color: var(--text); }
.modal-box p { margin: 0; color: var(--muted); line-height: 1.5; }
.modal-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* 대화 상자의 입력 칸(이름 받기 등). */
.dlg-field { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.dlg-field input {
	flex: 1;
	height: 30px;
	padding: 0 8px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--bg);
	color: var(--text);
	font: inherit;
}
.dlg-field input:focus { border-color: var(--gold); outline: none; }

.cp-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.cp-grid button {
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 2px;
	cursor: pointer;
}

.cp-grid button:hover, .cp-grid button:focus-visible, .cp-grid button[aria-pressed="true"] {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
}

/* 도구 줄 */
.rail {
	grid-area: rail;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 6px;
	background: var(--bg);
	border-right: 1px solid var(--line);
	overflow-y: auto;
}

.tool {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 3px;
	padding: 7px 2px 6px;
	border: 1px solid transparent;
	border-radius: 3px;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: 11px;
	cursor: pointer;
}

.tool .ico { display: block; line-height: 0; }
.tool svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* 여러 종류를 묶은 도구: 오른쪽 아래 삼각형으로 메뉴가 있음을 알립니다. */
.tool .more {
	position: absolute;
	right: 4px;
	bottom: 4px;
	border-left: 5px solid transparent;
	border-bottom: 5px solid currentColor;
	opacity: .7;
}

.tool:hover { color: var(--text); background: var(--card); }
.tool[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); font-weight: 700; }
.tool kbd { font: 9px ui-monospace, Consolas, monospace; opacity: .6; }
.tool:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* 작업 영역 */
.stage { grid-area: stage; position: relative; background: var(--bg2); overflow: hidden; }

/* 커서는 stage.js 가 상태(끄는 중 · Space · 도구)를 보고 인라인으로 정합니다. */
.canvas-wrap {
	position: absolute;
	inset: 0;
	touch-action: none;
}

.canvas-wrap.dropping { box-shadow: inset 0 0 0 2px var(--gold); }
.canvas-wrap canvas { position: absolute; inset: 0; }
#ov { pointer-events: none; }

/* 오른쪽 패널 — 레이어(위, 늘 보임) + 탭(변형 · 보정 · 작업 기록). 패널 전체가 스크롤되지 않고 고른 탭의
   내용만 남은 높이 안에서 스크롤됩니다. 그래야 탭을 바꿔도 레이어 목록이 제자리에 있습니다(ui-spec.md 7장). */
.side {
	grid-area: side;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	background: var(--bg);
	border-left: 1px solid var(--line);
}

.sec { border-bottom: 1px solid var(--line); }
.side-fixed { flex: none; }

.sec-head {
	margin: 0;
	padding: 11px 14px 6px;
	color: var(--text);
	font-size: 13px;
	font-weight: 700;
}

.side-tabs { display: flex; flex: none; border-bottom: 1px solid var(--line); }
.side-tabs button {
	flex: 1;
	padding: 9px 0 7px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--muted);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.side-tabs button[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.side-tabs button:hover { color: var(--text); }
.side-pane { flex: 1; min-height: 0; overflow-y: auto; padding-top: 8px; }

/* 작업 기록 — 맨 위가 처음 상태, 맨 아래가 최근 작업입니다. 지금 자리는 금색, 되돌린 뒤의 항목은 흐립니다. */
.hi-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.hi-list button {
	width: 100%;
	padding: 5px 8px;
	border: 1px solid transparent;
	border-radius: 3px;
	background: none;
	color: var(--text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.hi-list button:hover { background: var(--card); }
.hi-list button[aria-current="step"] { border-color: var(--gold); color: var(--gold); }
.hi-list .undone { color: var(--muted); opacity: .55; }

.sec-body { display: grid; gap: 10px; padding: 4px 14px 14px; }
/* 패널이 272px 로 좁아져도 라벨이 두 줄로 깨지지 않게 합니다(기획서 3.4). */
.sec-body .row { display: flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.seg button { white-space: nowrap; }
.sec-body .row input[type="range"] { flex: 1; width: auto; }
.sec-body output { min-width: 34px; color: var(--text); font-family: ui-monospace, Consolas, monospace; text-align: right; }
.sec-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

/* 크기 칸 — 1280 · 1440 폭에서 줄이 넘치지 않게 숫자 칸을 60px 로 못박습니다(기획서 3.4). */
.sec-body input[type="number"] {
	width: 60px;
	height: 26px;
	padding: 0 6px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--bg);
	color: var(--text);
	font: 12px ui-monospace, Consolas, monospace;
	/* 위아래 화살표를 숨깁니다. 60px 칸에서 화살표가 숫자를 가리고, 1px 씩 올리는 쓰임도 거의 없습니다.
	   키보드의 ↑ · ↓ 로 올리고 내리는 것은 그대로 됩니다. Firefox 는 appearance 로 숨깁니다. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.sec-body input[type="number"]::-webkit-inner-spin-button,
.sec-body input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ratio-lock {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--bg);
	color: var(--muted);
	font-size: 11px;
	cursor: pointer;
}

.ratio-lock[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.size-row { gap: 6px; }

/* 기준점 3×3 — 이미지가 놓일 자리이고 캔버스는 그 반대쪽으로 늘어납니다. */
.anchor-row { align-items: flex-start; gap: 10px; }
.anchor { display: grid; grid-template-columns: repeat(3, 22px); gap: 2px; flex: none; }
.anchor button {
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: var(--bg);
	color: var(--muted);
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
}

.anchor button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.anchor-row .sec-note { white-space: normal; }
.chk { display: flex; align-items: center; gap: 7px; }

/* 레이어 목록 — 맨 위 줄이 맨 앞 레이어입니다.
   열을 minmax(0, 1fr) 로 못박습니다. 그냥 두면 열이 가장 긴 이름(파일명)만큼 넓어져 이름의 말줄임이
   걸리지 않고 목록에 가로 스크롤이 생깁니다.
   높이는 줄 다섯 개까지입니다. 그 이상은 목록 안에서 스크롤해, 아래 탭(변형 · 보정 · 작업 기록)의 자리를 남깁니다.
   줄 높이를 못박아 두어야 "다섯 줄" 이 정확히 맞습니다(썸네일 34px + 위아래 여백 · 테두리). */
.ly-list {
	--ly-row-h: 44px;
	--ly-gap: 2px;
	--ly-rows: 5;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ly-gap);
	max-height: calc(var(--ly-row-h) * var(--ly-rows) + var(--ly-gap) * (var(--ly-rows) - 1));
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.ly-row {
	display: flex;
	align-items: center;
	height: var(--ly-row-h);
	gap: 8px;
	padding: 4px 6px;
	border: 1px solid transparent;
	border-radius: 3px;
	cursor: pointer;
}

.ly-row:hover { background: var(--card); }
.ly-row.on { background: var(--card); border-color: var(--gold); }
.ly-row.dragging { opacity: .4; }
.ly-row.over { border-top: 2px solid var(--gold); }
/* 레이어 줄을 끌어 삭제 · 복제 단추 위에 올리면 놓을 자리임을 보입니다(layers.js bindDropButton). */
#lyDel.drop-delete { border-color: #e5484d; background: #e5484d; color: #fff; }
#lyDup.drop-target { border-color: var(--gold); background: var(--gold); color: var(--gold-ink); }

.ly-eye {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: none;
	color: var(--muted);
	opacity: .55;
	cursor: pointer;
}

/* 뜬 눈(보임) · 빗금 친 눈(숨김). 숨긴 쪽은 흐리게 두어 목록에서 한눈에 갈립니다. */
.ly-eye svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ly-eye[aria-pressed="true"] { color: var(--gold); opacity: 1; }
.ly-eye:hover { background: var(--bg); opacity: 1; }

/* 연결 칸(기획서 4.19) — 비어 있으면 테두리만, 묶음에 들면 사슬. 선택 레이어의 묶음은 금색, 다른 묶음은 흐리게. */
.ly-link {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px dashed transparent;
	border-radius: 3px;
	background: none;
	color: var(--muted);
	cursor: pointer;
}
.ly-row:hover .ly-link:not(:disabled):not(.on) { border-color: var(--line); }
.ly-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ly-link.on { opacity: .45; }
.ly-link.on.cur { color: var(--gold); opacity: 1; }
.ly-link:not(:disabled):hover { background: var(--bg); opacity: 1; }
.ly-link:disabled { cursor: default; }

.ly-thumb {
	flex: none;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: conic-gradient(#2a3252 25%, #1a2140 0 50%, #2a3252 0 75%, #1a2140 0) 0 0 / 10px 10px;
}

.ly-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: var(--text);
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 배경 레이어 이름은 기울여 보입니다(포토샵과 같음). 이름을 바꿔도 어느 것이 배경인지 보입니다. */
.ly-name.bg { font-style: italic; }

.ly-rename { flex: 1; height: 24px; min-width: 0; padding: 0 6px; border: 1px solid var(--gold); border-radius: 3px; background: var(--bg); color: var(--text); font: inherit; }
.ly-lock { padding: 0 2px; border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.ly-actions { gap: 6px; }
.ly-actions .btn { flex: 1; }

/* 텍스트 입력 칸 — 글자 자리에 겹쳐 둡니다. 캔버스에서 키를 직접 받으면 한글 조합이 안 됩니다.
   칸의 글자는 투명하게 두고 커서와 선택 영역만 보입니다. 글자는 캔버스의 텍스트 레이어가 보입니다(그림자 ·
   글꼴 높이까지 결과와 같습니다). 칸의 글자까지 보이면 두 벌이 몇 px 어긋나 레이어가 두 겹으로 보였습니다. */
.text-input {
	position: fixed;
	z-index: 26;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;                         /* 테두리는 덮개가 그립니다(돌린 · 늘린 글자도 따라갑니다, tools/text.js) */
	background: transparent;
	color: transparent;
	-webkit-text-fill-color: transparent;
	white-space: pre;                  /* 줄은 Enter 로만 바뀝니다. 칸 폭이 글자 폭과 같아 자동 줄바꿈이 끼면 커서가 어긋납니다 */
	resize: none;
	outline: none;
	caret-color: var(--gold);
}
.text-input::selection { background: rgba(245, 197, 66, .35); }

/* 캡션 — 칸은 상태 표시줄에 있고 입력창은 작업 영역 위에 겹칩니다(기획서 4.16). */
.cap-chip {
	max-width: 220px;
	height: 22px;
	padding: 0 8px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--bg2);
	color: var(--text);
	font: inherit;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
}

.cap-chip.empty { color: var(--muted); }
.cap-chip:hover:not(:disabled) { border-color: var(--gold); }
.cap-chip:disabled { opacity: .45; cursor: default; }

.cap-panel {
	position: fixed;
	z-index: 28;
	display: grid;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--card);
	box-shadow: 4px 4px 0 #000;
}

.cap-row { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.cap-row textarea, .cap-row input[type="text"] {
	flex: 1;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--bg);
	color: var(--text);
	font: inherit;
	resize: vertical;
}

.cap-foot { justify-content: space-between; }

/* 상태 표시줄 */
.status {
	grid-area: status;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: nowrap;
	height: var(--bar);
	padding: 0 12px;
	background: var(--bg);
	border-top: 1px solid var(--line);
	color: var(--muted);
	white-space: nowrap;
}

#stHint, .st-msg { overflow: hidden; text-overflow: ellipsis; }
/* 도구 안내는 넓은 화면에서 옵션 막대 끝에 있습니다. 노트북 구간에서만 이리로 옮겨 옵니다(기획서 3.4). */
#stHint { display: none; }
.st-msg.error { color: #ff8a8a; }
/* 기록 수 — 누르면 작업 기록 탭이 열립니다. 글자처럼 보이되 마우스를 올리면 단추임이 드러납니다. */
.st-hist { padding: 0 4px; border: 0; border-radius: 3px; background: none; font: inherit; cursor: pointer; }
.st-hist:hover { background: var(--card); color: var(--text); }
.st-hist:empty { display: none; }
.mono.warn { color: var(--gold); }
.sec-body .lbl { min-width: 34px; }
.st-zoom { display: flex; align-items: center; gap: 6px; margin-left: auto; }
#zoomLabel { min-width: 48px; text-align: center; }

/* ── 화면 폭 · 높이에 따른 배치 (기획서 3.4) ──────────────────────────────
   노트북에서 모자란 것은 폭보다 높이입니다. 막대를 낮추고 작업 영역에 높이를 몰아 줍니다.
   기본(넓은 화면)은 폭 1440 이상이고 높이 820 초과입니다. */

.tb-end { margin-left: auto; }
#sideBtn { display: none; }

/* 노트북 — 막대를 낮추고 레일은 아이콘만, 패널은 272px */
@media (max-width: 1439px), (max-height: 820px) {
	:root { --bar: 35px; --opts-h: 35px; --rail: 52px; --side: 272px; }
	.top { padding: 3px 10px; }
	.opts { padding: 0 10px; }
	.btn { height: 26px; }
	.btn.sq { width: 26px; }
	.seg button { height: 24px; padding: 0 8px; }
	select { height: 26px; }
	.swatch { height: 22px; }
	.tool { padding: 5px 2px 4px; }
	.tool span:not(.ico) { display: none; }       /* 이름은 툴팁으로 갑니다 */
	.tool kbd { font-size: 8px; }
	.rail { padding: 5px 4px; }
	.status { height: 24px; }
	/* 도구 안내는 상태 표시줄로 옮깁니다. */
	.og.tail { display: none; }
	#stHint { display: inline; }
}

/* 좁은 노트북 · 줄인 창 — 패널을 작업 영역 위에 겹치는 서랍으로 */
@media (min-width: 861px) and (max-width: 1279px) {
	.app { grid-template-columns: var(--rail) minmax(0, 1fr); }
	.app {
		grid-template-areas:
			"top    top"
			"opts   opts"
			"rail   stage"
			"status status";
	}
	.side {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 25;
		width: var(--side);
		box-shadow: -6px 0 0 rgba(0, 0, 0, .35);
	}
	.stage { position: relative; }
	.side[hidden] { display: none; }
	#sideBtn { display: inline-flex; }
}

/* 아주 낮은 높이 — 여백을 한 번 더 줄이고 패널 섹션을 접습니다 */
@media (max-height: 599px) {
	:root { --bar: 32px; --opts-h: 32px; }
	.sec-body { gap: 7px; padding: 2px 12px 10px; }
	.ly-list { --ly-rows: 3; }
}

/* 태블릿 · 휴대폰 — 세로로 쌓습니다 */
@media (max-width: 860px) {
	.app {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
		grid-template-areas: "top" "opts" "rail" "stage" "side" "status";
	}
	.rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
	.tool { min-width: 46px; }
	.side { border-left: 0; border-top: 1px solid var(--line); max-height: 40vh; }
	/* 패널이 화면의 40% 뿐이라 레이어만으로 차서 탭 내용이 안 보일 수 있습니다. 여기서는 패널 전체가 스크롤됩니다. */
	.side { overflow-y: auto; }
	.side-pane { flex: none; overflow: visible; }
	.opts { flex-wrap: wrap; overflow: visible; height: auto; min-height: var(--opts-h); padding-block: 4px; }

	/* 위 막대는 줄을 나눕니다. 첫 줄은 로고와 저장 · 닫기라, 어느 폭에서도 저장 · 닫기가 화면 안
	   오른쪽 위에 있습니다(기획서 4.17). 나머지 칸은 다음 줄로 내려가고 글자가 세로로 꺾이지 않습니다. */
	.top { flex-wrap: wrap; row-gap: 4px; column-gap: 8px; padding: 4px 8px; }
	.top .btn, .top label, .brand { white-space: nowrap; }
	.brand-sub, .btn-t, #fullBtn { display: none; }
	.tb-end { order: 1; }
	/* 저장 · 닫기 뒤에서 줄을 바꿉니다. 비워 두면 뒤의 칸이 첫 줄의 남은 자리로 올라옵니다. */
	.top::after { content: ""; flex-basis: 100%; order: 2; }
	.tb:not(.tb-end) { order: 3; flex-wrap: wrap; row-gap: 4px; }
	#docName { width: 96px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }