/* 최종 기획안 읽기 개선(2026-09-09) — 접기·한눈에 보기·컨셉 격자·간소 카드·타임라인·시놉시스 탭.
 * 단일책임: 이 라운드가 새로 만든 표면의 스타일만. `.frame-block` 등 기존 골격은 전역으로 다시 칠하지 않는다
 *   (여기서 덮으면 에피소드 드로어·다른 문서까지 따라 움직인다 — 전부 `.final-output` 또는 새 클래스 안에서만).
 * 토큰은 tokens.css. 키·모델명·원문 없음.
 * 한국어 줄바꿈: 새 텍스트 컨테이너는 어절 경계에서만 끊는다(기본 word-break 는 '밥상'→'밥/상'으로 깨뜨린다). */

/* ── 한눈에 보기 ── */
.fp-glance {
  margin-top: var(--sp-md);
  padding: var(--sp-md);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--parchment);
  display: flex; flex-direction: column; gap: var(--sp-xs);
}
.fp-glance-meta { margin: 0; font-size: var(--fs-fine); color: var(--ink-48); letter-spacing: var(--ls-fine); }
.fp-glance-logline {
  margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); font-weight: 600;
  word-break: keep-all; overflow-wrap: anywhere;
}
.fp-glance-rows { display: flex; flex-direction: column; gap: var(--sp-xs); margin-top: var(--sp-xxs); }
.fp-glance-chips { display: flex; flex-wrap: wrap; gap: var(--sp-xxs); }
.fp-chip {
  display: inline-flex; align-items: center; padding: 3px var(--sp-xs);
  font-size: var(--fs-fine); line-height: 1.35; color: var(--ink-80);
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  word-break: keep-all; overflow-wrap: anywhere;
}
.fp-chip--more { color: var(--ink-48); }
.fp-glance-status .fp-chip { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
/* 인물 칩은 버튼이다(누르면 인물 탭의 그 인물) — 시각은 다른 칩과 같고 호버·포커스만 더 갖는다. */
.fp-chip--btn { font: inherit; cursor: pointer; }
.fp-chip--btn:hover { color: var(--ink); border-color: var(--divider-soft); }
.fp-chip--btn:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

/* ── 구획 탭(작품 · 이야기 · 인물 · 회차) ──
 * 접기(<details>) 대신 한 번에 한 구획만 보인다(2026-09-22 오너 지시). 탭 바는 문서 안에서 sticky.
 * ⚠️ Ctrl+F: 숨긴 패널은 hidden="until-found" 다. glass.css 의 `[hidden]{display:none!important}` 가 그 값을 눌러 찾기가 죽던
 *   자리인데, 아래 특이도(0,2,0) 규칙이 되살린다 — 브라우저가 찾기 매치에 beforematch 를 쏘면 JS(finalPlanTabs)가 그 탭을 연다.
 *   until-found 를 모르는 브라우저는 일반 hidden 을 받으므로 이 규칙에 안 걸린다(활성 탭만 찾힌다). */
/* 변수는 콘텐츠 열에 건다 — 피드 모달 읽기전용 열람은 .final-output 없이 모달 본문에 바로 그리므로(.final-output 에 걸면 그쪽에서 top 이 auto 가 된다 — 실측). */
.section-nav-content { --fp-tabs-h: 48px; --fp-sticky-top: 0px; }
.fp-tabs {
  position: sticky; top: var(--fp-sticky-top); z-index: 4;
  display: flex; gap: var(--sp-xxs); align-items: center; min-height: var(--fp-tabs-h);
  padding: var(--sp-xs) 0; margin-bottom: var(--sp-xs);
  background: transparent; border-bottom: 1px solid transparent;
  overflow-x: auto; scrollbar-width: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
/* 붙었을 때만 배경 — 평소의 불투명 띠는 우주 배경 위에서 "깔린 배경" 으로 보였다(오너 2026-09-22). 입력줄(.wiz-composer)과 같은 반투명+블러 — 제어층 글라스만. */
.fp-tabs.is-stuck { background: rgba(9, 9, 9, 0.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom-color: var(--hairline); }
.btn.fp-tab { gap: 6px; border-color: transparent; color: var(--ink-48); }
.btn.fp-tab[aria-selected="true"] { color: var(--ink); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.fp-tab-n { font-size: var(--fs-fine); color: var(--ink-48); font-variant-numeric: tabular-nums; }
.fp-panels { display: block; min-width: 0; } /* gap 없는 래퍼 — 숨긴 패널이 부모 gap 을 먹지 않게(finalPlanTabs) */
.fp-panel { display: flex; flex-direction: column; gap: var(--sp-lg); }
.fp-panel[hidden="until-found"] { display: block !important; content-visibility: hidden; }
/* 목차·'회차에서 보기' 가 섹션으로 뛸 때 붙어 있는 탭 바(그리고 새 셸 상단바) 밑으로 머리가 들어가지 않게. */
.fp-panel > .frame-block { scroll-margin-top: calc(var(--fp-sticky-top) + var(--fp-tabs-h) + var(--sp-sm)); }
/* 좌 패널 문서 목차의 탭 묶음 머리(sectionNav 가 group 으로 세운다) — 항목보다 작고 뜨었고 흐리게(아이브로우), 항목은 들여쓴다.
 * 같은 크기·같은 색이면 머리와 항목이 한 줄로 읽힌다(오너 신고 2026-09-22 "구분이 안돼"). */
.section-nav-group { margin-top: var(--sp-md); padding: 0 8px 4px; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; color: var(--ink-48); }
.section-nav-group:first-child { margin-top: 0; }
.section-nav-group ~ .btn.section-nav-btn { padding-left: 18px; }

/* ── 시놉시스 탭 ── */
.fp-syn-tabs { display: flex; gap: var(--sp-xxs); padding: var(--sp-sm) var(--sp-md) 0; }
.btn.fp-syn-tab { border-color: transparent; color: var(--ink-48); }
.btn.fp-syn-tab.is-active {
  color: var(--ink); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ── 컨셉 사실 격자 ── */
.fp-concept { padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-md); }
.fp-facts { margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-xs) var(--sp-lg); }
@media (min-width: 720px) { .fp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp-fact { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-sm); align-items: baseline; }
.fp-fact-key { margin: 0; font-size: var(--fs-fine); font-weight: 600; color: var(--ink-48); letter-spacing: var(--ls-fine); }
.fp-fact-val, .fp-concept-longval {
  margin: 0; font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--ink);
  word-break: keep-all; overflow-wrap: anywhere;
}
.fp-concept-long { display: flex; flex-direction: column; gap: var(--sp-xxs); }
.fp-concept-long .fp-concept-longval { color: var(--ink-80); }
.fp-concept-rest { padding: 0; border-top: 1px solid var(--hairline); padding-top: var(--sp-sm); }

/* ── 인물: 명부 + 시트 한 장 ──
 * 명부 한 줄 = [이름][역할][등장 회차 스트립][N화]. 스트립은 회차마다 칸 하나(나오면 채움) — "1화, 2화, … 50화" 나열을 대체한다.
 * 칸은 클릭 대상이 아니다(80회차면 한 칸이 8px — 터치 목표가 못 된다). 회차로 가는 길은 시트 머리의 '회차에서 보기' 한 버튼. */
.fp-cast { padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-md); }
.fp-cast .char-card { margin: 0; }
.fp-roster { display: flex; flex-direction: column; gap: 2px; }
.fp-roster-row {
  display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(3rem, 6rem) minmax(0, 1fr) 3rem; gap: var(--sp-sm); align-items: center;
  width: 100%; min-height: 40px; padding: 6px var(--sp-sm); font: inherit; text-align: left;
  color: var(--ink-80); background: transparent; border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fp-roster-row:hover { background: var(--surface-1); color: var(--ink); }
.fp-roster-row.is-active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--ink); }
.fp-roster-row:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }
.fp-roster-name { font-size: var(--fs-caption); font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }
.fp-roster-role { font-size: var(--fs-fine); color: var(--ink-48); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-roster-n { font-size: var(--fs-fine); color: var(--ink-48); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-strip { display: grid; grid-template-columns: repeat(var(--fp-strip-n, 1), minmax(0, 1fr)); gap: 1px; height: 14px; min-width: 0; }
.fp-strip-cell { min-width: 0; background: var(--surface-2); border-radius: 1px; }
.fp-strip-cell.is-on { background: var(--accent); }
.fp-cast-detail { display: flex; flex-direction: column; gap: var(--sp-sm); }
.fp-cast-detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-xs); }
.fp-cast-meta { margin: 0; font-size: var(--fs-caption); color: var(--ink-80); word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .fp-roster-row { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: var(--sp-xxs); }
  .fp-strip { grid-column: 1 / -1; }
}

/* ── 회차: 인물 필터 ── */
.fp-tl-filter { display: flex; flex-wrap: wrap; gap: var(--sp-xxs); padding: var(--sp-xs) var(--sp-md) 0; }
.btn.fp-tl-filter-chip { gap: 6px; }
.btn.fp-tl-filter-chip.is-active { color: var(--ink); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.fp-tl-filter-n { font-size: var(--fs-fine); color: var(--ink-48); font-variant-numeric: tabular-nums; }

/* ── 트리트먼트 타임라인 ── */
.fp-tl { padding: var(--sp-sm) var(--sp-md) var(--sp-md); }
.fp-tl-group { margin-top: var(--sp-md); }
.fp-tl-group:first-child { margin-top: 0; }
.fp-tl-branch { font-size: var(--fs-fine); font-weight: 600; color: var(--accent); margin-bottom: var(--sp-xxs); }
.fp-tl-ghead {
  position: sticky; top: calc(var(--fp-sticky-top) + var(--fp-tabs-h)); z-index: 1; /* 탭 바(sticky) 바로 밑에 붙는다 */
  padding: var(--sp-xxs) 0; margin-bottom: var(--sp-xs);
  font-size: var(--fs-fine); font-weight: 600; color: var(--ink-48); letter-spacing: var(--ls-fine);
  background: var(--canvas); border-bottom: 1px solid var(--hairline);
}
.fp-tl-row {
  display: grid; grid-template-columns: 3.2rem 1fr auto; gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-xs) var(--sp-xs) 0;
  border-bottom: 1px solid var(--hairline);
}
.fp-tl-row:last-child { border-bottom: none; }
/* 행 끝 버튼 둘 — [수정] · [에피소드]. 늘 보이되 본문보다 한 단 옅게(호버에만 보이면 터치에서 없는 버튼이다). */
.fp-tl-actions { display: flex; align-items: flex-start; gap: var(--sp-xxs); }
.fp-tl-actions .btn { color: var(--ink-48); }
.fp-tl-actions .btn:hover, .fp-tl-actions .btn:focus-visible { color: var(--ink); }
/* 편집 중 — 본문·버튼 자리를 폼이 차지한다(회차 번호는 남긴다). */
.fp-tl-row.is-editing > .fp-tl-body, .fp-tl-row.is-editing > .fp-tl-actions { display: none; }
.fp-tl-edit {
  grid-column: 2 / -1; min-width: 0;
  display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-xs) var(--sp-sm); align-items: start;
}
.fp-tl-edit-label { padding-top: 11px; font-size: var(--fs-fine); color: var(--ink-48); } /* 필드 안쪽 여백(10px)에 첫 줄을 맞춘다 */
.fp-tl-edit-input { width: 100%; min-width: 0; resize: vertical; field-sizing: content; min-height: 2.6em; font-family: inherit; line-height: var(--lh-body); }
.fp-tl-edit-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--sp-xs); }
@media (max-width: 810px) {
  .fp-tl-edit { grid-template-columns: 1fr; }
  .fp-tl-edit-label { padding-top: 0; }
}
.fp-tl-ep { font-size: var(--fs-fine); font-weight: 700; color: var(--accent); padding-top: 2px; }
.fp-tl-body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-xxs); }
.fp-tl-event, .fp-tl-cliff {
  margin: 0; font-size: var(--fs-caption); line-height: var(--lh-body);
  word-break: keep-all; overflow-wrap: anywhere;
}
.fp-tl-event { color: var(--ink); }
.fp-tl-cliff { color: var(--ink-48); }
.fp-tl-cliff::before { content: '⚡ '; }
.fp-tl-susp {
  align-self: flex-start; padding: 2px var(--sp-xs);
  font-size: var(--fs-fine); line-height: 1.35; color: var(--ink-80);
  background: var(--surface-1); border: 1px dashed var(--divider-soft); border-radius: var(--r-xs);
  word-break: keep-all; overflow-wrap: anywhere;
}
.fp-tl-chars { display: flex; flex-wrap: wrap; gap: var(--sp-xxs); }
.fp-tl-chip {
  padding: 1px 6px; font-size: var(--fs-fine); line-height: 1.4; color: var(--ink-48);
  background: var(--surface-1); border-radius: var(--r-pill); white-space: nowrap;
}
.fp-tl-chip--more { color: var(--ink-48); opacity: 0.8; }

/* 인쇄 — 숨긴 탭은 JS 가 연다(beforeprint). 탭 바·네비·필터 같은 조작 표면은 종이에 필요 없다. */
@media print {
  .fp-tabs, .fp-tl-filter, .fp-tl-actions, .fp-cast-go, .final-copy-btn, .section-nav, .fp-syn-tabs { display: none !important; }
  .fp-panel[hidden] { display: flex !important; content-visibility: visible; }
  /* 인물 필터로 숨긴 회차도 종이에는 다 나간다 — 칩 줄은 위에서 숨기므로 필터가 걸린 줄 알 길이 없다(2026-09-29 감사).
   * glass.css 의 [hidden]{display:none!important}(0,1,0) 을 클래스+속성(0,2,0)으로 이긴다. 값은 화면 규칙과 같게(행=grid·그룹=block). */
  .fp-tl-row[hidden] { display: grid !important; }
  .fp-tl-group[hidden] { display: block !important; }
}