@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
:root {
  --ui-font: "Noto Sans KR", sans-serif;
  --body-font: "Gowun Batang", serif;
  --body-size: 15px;
  --body-line-height: 1.75;

  --page-width: 560px;
  --page-height: 792px;
  --book-width: 1120px;
  --margin-top: 69px;
  --margin-right: 61px;
  --margin-bottom: 67px;
  --margin-left: 61px;

  --page-bg: #fff;
  --app-bg: #e9e8e4;
  --ink: #202020;
  --muted: #767676;
  --line: #d7d5cf;
  --info-bg: rgba(45,45,45,.065);
  --secret-bg: rgba(35,35,35,.038);
  --roll-bg: rgba(0,0,0,.012);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; color: var(--ink); background: var(--app-bg); font-family: var(--ui-font); }
button, input, select { font: inherit; }
button { color: inherit; }

.view { display: none; min-height: 100vh; }
.view--active { display: block; }

/* Import */
.import { width: min(620px, calc(100% - 40px)); margin: 0 auto; padding: 84px 0; }
.import__heading { margin-bottom: 44px; }
.import__heading h1 { margin: 0 0 10px; font-size: 34px; font-weight: 600; letter-spacing: -.04em; }
.import__heading p { margin: 0; color: var(--muted); line-height: 1.7; }
.file-picker { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid #343434; background: #fff; cursor: pointer; }
.file-picker:hover { background: #f6f6f4; }
.file-picker input { display: none; }
.muted { margin: 12px 0 0; color: var(--muted); font-size: 13px; }

/* Toolbar */
.toolbar { height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); background: #f5f4f1; }
.toolbar__button { border: 0; padding: 5px 6px; background: transparent; color: #666; cursor: pointer; }
.toolbar__button.is-active { color: #111; text-decoration: underline; text-underline-offset: 5px; }
.toolbar__center { justify-self: center; }
.toolbar__title { font-size: 13px; letter-spacing: .08em; }
.toolbar__right { justify-self: end; display: flex; gap: 10px; }

/* 3-pane editor */
.editor-shell { height: 100vh; overflow: hidden; }
.workspace { height: calc(100vh - 52px); display: grid; grid-template-columns: 156px minmax(0, 1fr) 270px; }
.pages-panel, .settings-panel { min-width: 0; background: #f4f3f0; overflow: auto; }
.pages-panel { border-right: 1px solid var(--line); padding: 18px 12px; }
.settings-panel { border-left: 1px solid var(--line); padding: 18px 16px 40px; }
.panel-heading { margin-bottom: 12px; font-size: 12px; font-weight: 700; color: #444; }
.panel-unit { font-weight: 400; color: #999; }
.settings-section + .settings-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid #ddd; }

.page-list { display: grid; gap: 5px; }
.page-list__item { width: 100%; height: 31px; border: 0; border-left: 2px solid transparent; background: transparent; text-align: left; padding: 0 10px; color: #777; cursor: pointer; font-size: 12px; }
.page-list__item:hover { background: rgba(0,0,0,.035); }
.page-list__item.is-current { border-left-color: #333; color: #111; font-weight: 600; background: rgba(0,0,0,.04); }

.channel-list { display: grid; border-top: 1px solid #ddd; }
.channel-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 36px; border-bottom: 1px solid #ddd; font-size: 12px; cursor: pointer; }
.channel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-count { color: #aaa; font-size: 11px; }

.setting-field { display: grid; gap: 7px; margin-bottom: 13px; }
.setting-field > span { font-size: 11px; color: #666; }
.setting-field select, .setting-field input, .margin-grid input { height: 34px; min-width: 0; padding: 0 9px; border: 1px solid #bbb; background: #fff; color: #222; }
.setting-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.margin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.margin-grid label { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 5px; font-size: 11px; color: #777; }
.text-button { border: 0; background: transparent; padding: 6px 0; color: #777; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.edit-help p { margin: 0; color: #888; font-size: 11px; line-height: 1.65; }

/* Preview */
.preview-column { min-width: 0; display: grid; grid-template-rows: minmax(0,1fr) 34px; background: var(--app-bg); }
.preview-stage { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.book { display: flex; flex: 0 0 auto; width: var(--book-width); height: var(--page-height); background: var(--page-bg); box-shadow: 0 2px 5px rgba(0,0,0,.08), 0 12px 36px rgba(0,0,0,.12); transform-origin: center center; }
.page { position: relative; flex: 0 0 var(--page-width); width: var(--page-width); height: var(--page-height); padding: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left); overflow: hidden; background: var(--page-bg); font-family: var(--body-font); font-size: var(--body-size); line-height: var(--body-line-height); }
#leftPage { border-right: 1px solid #dedcd6; }
#leftPage::after { content: ""; position: absolute; inset: 0 -15px 0 auto; width: 30px; pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,.015), rgba(0,0,0,.075), rgba(0,0,0,.015), transparent); }
.statusbar { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; }
.turn-zone { position: absolute; top: 0; bottom: 0; width: 54px; z-index: 5; border: 0; background: transparent; cursor: pointer; }
.turn-zone--left { left: 0; }
.turn-zone--right { right: 0; }
.turn-zone span { opacity: 0; color: #777; font-size: 44px; font-weight: 200; transition: opacity 120ms ease; }
.turn-zone:hover span { opacity: .32; }

/* Dialogue */
.dialogue-line { margin: 0; break-inside: avoid; }
.dialogue-line.has-speaker { margin-top: 1.15em; }
.page > .dialogue-line.has-speaker:first-child { margin-top: 0; }
.dialogue-line.is-continuation { margin-top: .38em; }
.log-speaker { margin-bottom: .24em; color: #444; font-family: var(--ui-font); font-size: .78em; font-weight: 700; }
.log-text { white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; }
body.layout-stacked .dialogue-line { display: block; }
body.layout-inline .dialogue-line { display: grid; grid-template-columns: 5.8em minmax(0,1fr); column-gap: 1.15em; align-items: start; }
body.layout-inline .dialogue-line .log-speaker { margin: 0; padding-top: .05em; }

/* Chatter */
.dialogue-line.is-chatter { opacity: .5; }
.dialogue-line.is-chatter .log-speaker { font-weight: 600; }

/* Info / secret */
.special-block { width: 92%; margin: 1.12em auto; padding: 1.2em 1.4em; border: 1px solid rgba(0,0,0,.085); break-inside: avoid; }
.special-block__label { margin-bottom: .8em; color: #666; font-family: var(--ui-font); font-size: .69em; font-weight: 600; letter-spacing: .1em; }
.special-message + .special-message { margin-top: 1.05em; padding-top: 1em; border-top: 1px solid rgba(0,0,0,.07); }
.special-block--info { background: var(--info-bg); }
.special-block--secret { background: var(--secret-bg); border-color: rgba(0,0,0,.11); }
.secret-item { margin-top: .55em; }
.secret-item:first-of-type { margin-top: 0; }
.secret-item--roll .roll-block { width: 100%; margin-top: .25em; }

/* Roll */
.roll-entry { margin-top: .4em; margin-bottom: .85em; break-inside: avoid; }
.roll-entry.has-speaker { margin-top: 1em; }
.roll-entry > .log-speaker { margin-bottom: .28em; }
.roll-block { width: 100%; margin: .45em 0 .7em; padding: .6em .8em; display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: .65em; align-items: center; border-left: 1px solid rgba(0,0,0,.16); background: var(--roll-bg); font-family: var(--ui-font); font-size: .72em; line-height: 1.45; color: #555; break-inside: avoid; }
.roll-block__content { min-width: 0; font: inherit; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roll-final-result { font: inherit; color: inherit; font-weight: 700; white-space: nowrap; }

/* Fonts */
.font-batang { font-family: "Gowun Batang", serif; }
.font-sans { font-family: "Noto Sans KR", sans-serif; }
.font-galmuri { font-family: "Galmuri11", sans-serif; }
.font-hand { font-family: "Gaegu", cursive; }

/* Edit mode */
.editable-text { border-radius: 1px; }
body.is-editing .editable-text { cursor: text; outline: 1px dashed rgba(0,0,0,.13); outline-offset: 2px; }
body.is-editing .editable-text:focus { outline: 1px solid rgba(0,0,0,.35); background: rgba(255,255,255,.45); }

@media (max-width: 1000px) {
  .workspace { grid-template-columns: 0 minmax(0,1fr) 240px; }
  .pages-panel { display: none; }
}

@media (max-width: 760px) {
  .toolbar { height: 48px; padding: 0 10px; }
  .workspace { height: calc(100vh - 48px); grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr); }
  .settings-panel { display: none; }
  .preview-column { grid-column: 1; }
  .book { width: var(--page-width); }
  #rightPage { display: none; }
  #leftPage { border-right: 0; }
  #leftPage::after { display: none; }
  .turn-zone { width: 25%; }
  .turn-zone span { display: none; }
}

/* 이름 위 / 대사 아래에서는
   연속 대사의 빈 이름칸을 숨김 */
body.layout-stacked
.dialogue-line.is-continuation
.log-speaker {
  display: none;
}
/* 이전 페이지에서 이어지는 정보/은닉 박스 */
.special-block.is-continuation {
  margin-top: 0;

  /*
    라벨이 없어졌으므로
    일반 박스의 큰 위 여백도 줄인다.
  */
  padding-top: 0.55em;
}

.editable-text {
  cursor: text;
  outline: none;
}

.editable-text:focus {
  background: rgba(0, 0, 0, 0.025);
}

/* Selected text formatting */
.selection-toolbar { display: grid; gap: 10px; }
.selection-toolbar__row { display: grid; grid-template-columns: 34px 34px 42px; gap: 7px; align-items: center; }
.format-button { width: 34px; height: 32px; border: 1px solid #bbb; background: #fff; cursor: pointer; }
.format-button:hover { background: #f0efec; }
.format-button:disabled, .format-color:disabled, .selection-format-section select:disabled, .selection-format-section input:disabled { opacity: .45; cursor: default; }
.format-color { width: 42px; height: 32px; padding: 2px; border: 1px solid #bbb; background: #fff; cursor: pointer; }
.selection-setting-field { margin-bottom: 0; }
.selection-format-help { margin: 0; color: #888; font-size: 10.5px; line-height: 1.55; }
body:not(.is-editing) .selection-format-section { opacity: .58; }
.editable-text strong { font-weight: 700; }
.editable-text em { font-style: italic; }

/* Custom pages */
.page-actions {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #ddd;
}

.page-action-button {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid #bdbbb5;
  background: #fff;
  color: #555;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.page-action-button:hover {
  background: #efeee9;
}

.page-action-button--file {
  display: flex;
  align-items: center;
}

.page-action-button--file input {
  display: none;
}

.page-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
}

.page-list__row:not(.is-custom) {
  grid-template-columns: minmax(0, 1fr);
}

.page-list__row.is-custom .page-list__item {
  color: #555;
}

.page-list__delete {
  width: 25px;
  height: 25px;
  border: 0;
  background: transparent;
  color: #aaa;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.page-list__delete:hover {
  color: #333;
  background: rgba(0,0,0,.04);
}

.page.page--custom-image {
  padding: 0;
}

.custom-image-page {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

.custom-image-page img {
  width: 100%;
  height: 100%;
  display: block;
}

.custom-page-editor {
  min-height: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

body.is-editing .custom-page-editor:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
}

/* Split text fragments are editable too */
body.is-editing .editable-text[data-fragment="true"] {
  cursor: text;
}


/* Character editor */
.speaker-list { display: grid; gap: 7px; }
.speaker-row { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 7px; align-items: center; }
.speaker-swatch { width: 10px; height: 10px; border: 1px solid rgba(0,0,0,.16); border-radius: 50%; }
.speaker-name-input { width: 100%; height: 32px; min-width: 0; padding: 0 8px; border: 1px solid #bbb; background: #fff; color: #222; }
.speaker-help { margin: 8px 0 0; color: #888; font-size: 10px; line-height: 1.55; }
body.speaker-colors-gray .log-speaker { color: #666 !important; }


/* Collapsible page number list: action buttons stay visible */
.panel-heading--toggle {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}

.panel-heading__arrow {
  font-size: 11px;
  color: #888;
  transition: transform 120ms ease;
}

.page-section.is-collapsed #pageSectionBody {
  display: none;
}

.page-section.is-collapsed .panel-heading__arrow {
  transform: rotate(180deg);
}

/* 추가 버튼은 페이지 번호 목록과 별개라 접혀도 항상 보인다. */
.page-section .page-actions {
  margin-top: 10px;
  margin-bottom: 12px;
  padding-top: 0;
  border-top: 0;
}

.speaker-list {
  display: none !important;
}

/* PDF page */
.page.page--custom-pdf {
  padding: 0;
}

.custom-pdf-page {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

.custom-pdf-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Floating page images */
.floating-image-section { position: relative; }
.floating-image-button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #bbb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 11px;
  cursor: pointer;
}
.floating-image-button:hover { background: #efeee9; }
.floating-image-button input { display: none; }
.floating-image-help {
  margin: 8px 0 0;
  color: #888;
  font-size: 10px;
  line-height: 1.55;
}

body.is-editing .page.is-active-page {
  outline: 2px solid rgba(0,0,0,.20);
  outline-offset: -2px;
}

.floating-image-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.floating-image-object {
  position: absolute;
  min-width: 8%;
  user-select: none;
  touch-action: none;
  pointer-events: none;
}

.floating-image-object img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

body.is-editing .floating-image-object {
  pointer-events: auto;
  cursor: move;
  outline: 1px dashed rgba(0,0,0,.38);
}

.floating-image-delete,
.floating-image-resize {
  display: none;
}

body.is-editing .floating-image-delete {
  position: absolute;
  top: -11px;
  right: -11px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #aaa;
  border-radius: 50%;
  background: #fff;
  color: #444;
  font-size: 15px;
  line-height: 18px;
  cursor: pointer;
  display: block;
}

body.is-editing .floating-image-resize {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 13px;
  height: 13px;
  border: 1px solid #777;
  background: #fff;
  cursor: nwse-resize;
  display: block;
  touch-action: none;
}


/* 편집 중 Enter로 만든 빈 줄도 본문 높이로 확실히 유지 */
body.is-editing .editable-text br {
  line-height: inherit;
}


/* Custom page drag & drop */
.page-list__row.is-custom {
  cursor: grab;
}

.page-list__row.is-custom:active {
  cursor: grabbing;
}

.page-list__row.is-dragging {
  opacity: .45;
}

.page-list__row {
  position: relative;
}

.page-list__row.is-drop-before::before,
.page-list__row.is-drop-after::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  height: 2px;
  background: #555;
  z-index: 2;
}

.page-list__row.is-drop-before::before { top: -1px; }
.page-list__row.is-drop-after::after { bottom: -1px; }


/* =========================================================
   Clip mode
   ========================================================= */
[hidden] { display: none !important; }

.toolbar__center {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mode-switch {
  display: flex;
  align-items: center;
  border-left: 1px solid #d4d2cc;
  padding-left: 12px;
}

.mode-switch__button {
  border: 0;
  background: transparent;
  padding: 5px 8px;
  color: #888;
  font-size: 12px;
  cursor: pointer;
}

.mode-switch__button.is-active {
  color: #111;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.clip-workspace {
  height: calc(100vh - 52px);
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  min-width: 0;
  background: var(--app-bg);
}

.clip-source-panel,
.clip-settings-panel {
  min-width: 0;
  overflow: auto;
  background: #f4f3f0;
  padding: 18px 14px 28px;
}

.clip-source-panel { border-right: 1px solid var(--line); }
.clip-settings-panel { border-left: 1px solid var(--line); }

.clip-search {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #bbb;
  background: #fff;
  color: #222;
  margin-bottom: 10px;
}

.clip-source-list {
  display: grid;
  gap: 1px;
  max-height: calc(100vh - 230px);
  overflow: auto;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: #ddd;
}

.clip-source-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  padding: 8px 7px;
  align-items: start;
  background: #f8f7f4;
  cursor: pointer;
}

.clip-source-row:hover { background: #fff; }
.clip-source-row input { margin-top: 3px; }
.clip-source-row__body { min-width: 0; display: grid; gap: 3px; }
.clip-source-row__meta { color: #555; font-size: 10.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-source-row__text { color: #777; font-size: 10.5px; line-height: 1.45; word-break: keep-all; }

.clip-primary-button,
.clip-secondary-button,
.clip-danger-button,
.clip-file-button {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #bbb;
  background: #fff;
  color: #444;
  font-size: 11px;
  cursor: pointer;
}

.clip-primary-button { margin-top: 8px; border-color: #555; color: #111; font-weight: 700; }
.clip-secondary-button { margin-top: 8px; }
.clip-danger-button { border-color: #c7baba; color: #8c5555; }
.clip-primary-button:hover,
.clip-secondary-button:hover,
.clip-file-button:hover { background: #efeee9; }
.clip-file-button { display: flex; align-items: center; justify-content: center; }
.clip-file-button input { display: none; }

.clip-preview-column {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 48px;
}

.clip-preview-wrap {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  overflow: hidden;
}

.clip-stage {
  position: relative;
  width: min(920px, 100%);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #d8d7d2;
  border: 1px solid #c8c6bf;
  box-shadow: 0 12px 38px rgba(0,0,0,.14);
}

.clip-stage__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clip-stage__standing {
  position: absolute;
  z-index: 2;
  bottom: 0;
  max-height: 92%;
  max-width: 54%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
}

.clip-stage__standing.is-left { left: 4%; transform: translateX(0); }
.clip-stage__standing.is-center { left: 50%; transform: translateX(-50%); }
.clip-stage__standing.is-right { right: 4%; transform: translateX(0); }

.clip-dialogue-box {
  position: absolute;
  z-index: 4;
  left: 5%;
  right: 5%;
  bottom: 5%;
  min-height: 22%;
  padding: 18px 22px;
  background: rgba(20,20,20,.80);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-family: var(--ui-font);
}

.clip-dialogue-speaker { min-height: 1.4em; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.clip-dialogue-text { white-space: pre-wrap; font-size: 15px; line-height: 1.65; word-break: keep-all; }

.clip-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-top: 1px solid var(--line);
  background: #f4f3f0;
  color: #666;
  font-size: 11px;
}

.clip-player-controls button {
  border: 0;
  background: transparent;
  color: #555;
  cursor: pointer;
}
.clip-player-controls button:disabled { opacity: .35; cursor: default; }

.clip-settings-section + .clip-settings-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

.clip-expression-assets { display: grid; gap: 5px; margin-top: 9px; }
.clip-assets-empty { color: #999; font-size: 10px; padding: 7px 0; }
.clip-expression-asset {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 25px;
  gap: 7px;
  align-items: center;
  min-height: 39px;
  border-bottom: 1px solid #ddd;
  font-size: 11px;
}
.clip-expression-asset img { width: 32px; height: 32px; object-fit: contain; background: #fff; }
.clip-expression-asset button { border: 0; background: transparent; color: #aaa; cursor: pointer; font-size: 16px; }

.clip-scene-list { display: grid; gap: 3px; max-height: 240px; overflow: auto; }
.clip-scene-row { display: grid; grid-template-columns: minmax(0, 1fr) 25px; align-items: stretch; }
.clip-scene-row.is-current { background: rgba(0,0,0,.055); }
.clip-scene-row__main { min-width: 0; border: 0; background: transparent; display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 5px; padding: 7px 4px; text-align: left; cursor: pointer; }
.clip-scene-row__number { color: #aaa; font-size: 10px; }
.clip-scene-row__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; font-size: 10.5px; }
.clip-scene-row__delete { border: 0; background: transparent; color: #aaa; cursor: pointer; font-size: 15px; }
.clip-scene-textarea { width: 100%; resize: vertical; min-height: 90px; padding: 8px; border: 1px solid #bbb; background: #fff; color: #222; font: 12px/1.55 var(--ui-font); }
.clip-settings-section.is-disabled { opacity: .45; pointer-events: none; }

@media (max-width: 1100px) {
  .clip-workspace { grid-template-columns: 240px minmax(0,1fr) 260px; }
}

@media (max-width: 820px) {
  .clip-workspace { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr); }
  .clip-source-panel, .clip-settings-panel { display: none; }
  .clip-preview-wrap { padding: 12px; }
}


/* Export */
.export-actions { display: grid; gap: 7px; }
.export-button { width: 100%; min-height: 34px; border: 1px solid #aaa; background: #fff; color: #333; font-size: 11px; cursor: pointer; }
.export-button:hover:not(:disabled) { background: #efeee9; }
.export-button:disabled { opacity: .45; cursor: wait; }
.export-status { min-height: 1.4em; margin: 8px 0 0; color: #555; font-size: 11px; line-height: 1.4; }
.export-help { margin: 4px 0 0; color: #888; font-size: 10px; line-height: 1.55; }
.export-capture-host { position: fixed; left: -100000px; top: 0; z-index: -1; visibility: visible; pointer-events: none; background: #fff; }
.export-capture-host .export-render-page { transform: none !important; box-shadow: none !important; border: 0 !important; }
.export-capture-host .editable-text { outline: none !important; background: transparent !important; cursor: default !important; }
.export-capture-host .custom-page-editor:empty::before { content: none !important; }
.export-capture-host .floating-image-object { outline: none !important; }
.export-capture-host .floating-image-delete,
.export-capture-host .floating-image-resize { display: none !important; }