/* 필드 단위 직접 수정(2026-09-25 — 원문 편집 반려 뒤 다시 지음) — 컨셉 사실 칸·캐릭터 카드·한 칸짜리 섹션·회차 씬이 같은 폼을 쓴다.
 * 칸에는 값만 들어간다 — 라벨은 칸 왼쪽(좁으면 위)에 읽기로 선다. 구분선·섹션 머리·```json 메타 블록은 어디에도 안 나온다. */

/* 연필 — 섹션 머리 오른쪽, 복사 아이콘 앞(margin-left:auto 가 둘을 한데 민다 — 머리는 space-between 이라 없으면 연필이 가운데 뜬다). */
.frame-block-head .final-edit-btn { margin-left: auto; }
.btn.final-edit-btn { border-color: transparent; color: var(--ink-48); }
.btn.final-edit-btn:hover, .btn.final-edit-btn:focus-visible { color: var(--ink); background: var(--surface-2); }

/* 편집 중 — 남길 것(.frame-block-head · .fe-keep)만 두고 본문 자리를 폼이 차지한다. */
.fe-host.is-editing > :not(.frame-block-head):not(.fe-keep):not(.fe-form) { display: none; }

.fe-form {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-xs) var(--sp-sm); align-items: start;
  padding: var(--sp-md); min-width: 0;
  /* 열 때 scrollIntoView(nearest)가 붙어 있는 상단바·구획 탭 밑으로 머리를 넣지 않게(변수는 기획안 문서에만 있다 — 드로어는 0). */
  scroll-margin-top: calc(var(--fp-sticky-top, 0px) + var(--fp-tabs-h, 0px) + var(--sp-sm));
  scroll-margin-bottom: var(--sp-sm);
}
.fe-label { padding-top: 11px; font-size: var(--fs-fine); color: var(--ink-48); word-break: keep-all; } /* 칸 안쪽 여백(10px)에 첫 줄을 맞춘다 */
.fe-label.sr-only + .fe-input { grid-column: 1 / -1; } /* 한 칸짜리 폼 — 라벨은 스크린리더에만, 칸이 한 줄을 다 쓴다 */
.fe-input {
  width: 100%; min-width: 0; resize: vertical; field-sizing: content; min-height: 2.6em;
  font-family: inherit; font-size: var(--fs-caption); line-height: var(--lh-body);
  word-break: keep-all; overflow-wrap: anywhere; /* 한국어는 어절에서 끊는다 — 긴 영문·URL 만 어디서든 */
}
/* 한 줄 칸은 크기 손잡이가 없다 — 늘려도 Enter 가 저장이라 쓸 데가 없다(필드 높이는 field-sizing 이 맞춘다). */
.fe-input:not(.fe-input--multi) { resize: none; }
/* 긴 글(시놉시스·회차 장면)이 화면을 통째로 밀어내지 않게 — 저장 버튼이 늘 가까이 있다. */
.fe-input--multi { min-height: 6em; max-height: 60vh; }
/* 폼 안 소제목(캐릭터 '외형') — 읽기 카드의 묶음 머리와 같은 자리·같은 톤. */
.fe-group { grid-column: 1 / -1; margin-top: var(--sp-xs); font-size: var(--fs-fine); font-weight: 600; color: var(--ink-48); }
.fe-error { grid-column: 1 / -1; margin: 0; font-size: var(--fs-fine); color: var(--danger); }
/* 긴 폼(캐릭터 카드·회차 섹션)은 저장·취소가 화면 아래로 밀려난다 — 스크롤하는 동안 화면 아래에 붙는다.
 *   배경은 폼이 앉은 카드 색(--fe-bg · 호스트별로 아래에서 준다)이라 붙어도 떠 보이지 않는다. 위는 상단바가 가리지만 아래는 가리는 것이 없다. */
.fe-actions {
  grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--sp-xs);
  position: sticky; bottom: 0; z-index: 1; padding-block: var(--sp-xs); background: var(--fe-bg, var(--canvas));
}
.char-card { --fe-bg: var(--parchment); }
body.shell-v2 :is(.final-output, .feed-episode-reading) .frame-block { --fe-bg: var(--surface-1); }
body.shell-v2 #episodesView .ep-drawer .frame-block { --fe-bg: var(--epr-panel); }
@media (max-width: 810px) {
  .fe-form { grid-template-columns: 1fr; }
  .fe-label { padding-top: 0; }
  body.shell-v2 :is(.fe-actions .btn, .btn.final-edit-btn) { min-height: 44px; }
  body.shell-v2 .btn.final-edit-btn { min-width: 44px; }
  /* 캐릭터 카드 안 폼 — 셸·문서·섹션·명부·카드·폼 여섯 겹의 안쪽 여백이 겹쳐 390 에서 칸이 218px 였다(실측 체인: 15+20+15+15+12+15).
   *   고치는 동안만 섹션·명부 두 겹을 걷고(카드가 섹션 폭을 다 쓴다), 카드가 이미 여백을 가지니 폼은 좌우 0. */
  :is(.final-charwrap, .fp-cast):has(.char-card.is-editing) { padding-inline: 0; }
  .char-card.is-editing { padding: var(--sp-sm); }
  .char-card .fe-form { padding: var(--sp-sm) 0 0; }
}
@media print { .final-edit-btn { display: none !important; } }

/* ── 캐릭터 카드 ───────────────────────────────────────────────── */
/* 카드 머리(.char-card-head)는 justify-content:space-between 이라 연필을 그냥 마지막 자식으로만 붙이면
   이름·역할·연필 세 요소가 균등 간격으로 벌어진다 — auto margin 으로 연필만 오른쪽 끝으로 밀어
   이름·역할은 붙어있고 연필만 따로 떨어지게 한다(섹션 머리의 .final-edit-btn 규칙과 같은 의도). */
.char-card-head .final-edit-btn { margin-left: auto; }

/* ── 컨셉 사실 칸 ──────────────────────────────────────────────────────── */


/* ── 회차 씬 ───────────────────────────────────────────────────────────── */
/* 씬 카드 머리(.epr-scene-head)는 .frame-block-head 가 아니라서 fe-keep 클래스로 남는다(episodeSheetScene.js). */
.epr-scene-head .final-edit-btn { margin-left: auto; }