.studio-app .studio-editor-page,
.studio-app .studio-editor-layout,
.studio-app .studio-editor-workspace,
.studio-app .studio-editor-workspace > [role="tabpanel"] { min-width: 0; }

.studio-app .studio-editor-loading { min-height: 240px; padding-block: 56px; color: var(--muted); }
.studio-app .studio-editor-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line-strong); }
.studio-app .studio-editor-tabs button { position: relative; min-width: 112px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 650; }
.studio-app .studio-editor-tabs button[aria-selected="true"] { color: var(--ink); }
.studio-app .studio-editor-tabs button[aria-selected="true"]::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--signal); content: ""; }

.studio-app .studio-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); gap: 64px; align-items: start; padding-top: 40px; }
.studio-app .studio-editor-heading { padding-bottom: 36px; border-bottom: 1px solid var(--line-strong); }
.studio-app .studio-editor-heading h1 { margin: 0; font-size: clamp(38px, 5vw, 62px); line-height: 1.05; letter-spacing: -0.045em; }
.studio-app .studio-editor-heading > p:last-child { max-width: 780px; margin: 18px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
.studio-app .studio-editor-section { padding: 48px 0; border-bottom: 1px solid var(--line); }
.studio-app .studio-editor-section-heading { margin-bottom: 24px; }
.studio-app .studio-editor-section-heading .studio-eyebrow { margin-bottom: 8px; }
.studio-app .studio-editor-section-heading h2,
.studio-app .studio-document-status-rail h2,
.studio-app .studio-preview-error h2 { margin: 0; font-size: 25px; letter-spacing: -0.03em; }

.studio-app .studio-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.studio-app .studio-field,
.studio-app .studio-ordered-item > label,
.studio-app .studio-relation-item > label { display: grid; min-width: 0; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 650; }
.studio-app .studio-field--wide { grid-column: 1 / -1; }
.studio-app .studio-field input,
.studio-app .studio-field select,
.studio-app .studio-field textarea,
.studio-app .studio-ordered-item input,
.studio-app .studio-ordered-item textarea,
.studio-app .studio-relation-item input,
.studio-app .studio-relation-item select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; font-weight: 450; line-height: 1.55; }
.studio-app .studio-field textarea,
.studio-app .studio-ordered-item textarea { min-height: 112px; resize: vertical; }
.studio-app .studio-field .studio-markdown-field { min-height: 420px; font-family: "IBM Plex Mono", monospace; font-size: 13px; }

/* 칸 아래 한 줄 설명. 라벨과 같은 격자 안에 들어가므로 별도 여백을 두지 않는다. */
.studio-app .studio-field > small { color: var(--faint); font-size: 12px; font-weight: 450; line-height: 1.6; }

/* 여러 개를 고르는 목록(주제 등). 작업본 목록의 유형 선택과 같은 모양을 쓴다. */
.studio-app .studio-choice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.studio-app .studio-choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; align-items: center; min-height: 60px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.studio-app .studio-choice input { width: 20px; min-width: 20px; min-height: 20px; padding: 0; }
.studio-app .studio-choice span { font-size: 15px; font-weight: 550; }
.studio-app .studio-choice small { grid-column: 2; color: var(--faint); font-family: "IBM Plex Mono", monospace; font-size: 11px; }

/* 편집 화면 하단의 저장 줄. 버튼과 그 옆의 상태 한 줄. */
.studio-app .studio-editor-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 32px 0 0; }
.studio-app .studio-editor-footer .studio-primary-button,
.studio-app .studio-editor-footer .studio-secondary-button { margin: 0; }
.studio-app .studio-editor-footer .studio-field-note { flex: 1 1 260px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* 체크박스 묶음(변경 유형 등). `.studio-field-grid` 를 쓰면 legend 가 한 칸을 차지해 줄이 어긋난다. */
.studio-app .studio-checkbox-set { margin: 34px 0 0; padding: 0; border: 0; }
.studio-app .studio-checkbox-set legend { padding: 0 0 14px; color: var(--muted); font-size: 12px; font-weight: 650; }
.studio-app .studio-checkbox-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 24px; }
.studio-app .studio-checkbox-set legend { grid-column: 1 / -1; }
.studio-app .studio-checkbox-set .studio-field--checkbox { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.studio-app .studio-checkbox-set .studio-field--checkbox input { width: 20px; min-width: 20px; min-height: 20px; padding: 0; }
.studio-app .studio-checkbox-set .studio-field--checkbox span { font-size: 15px; font-weight: 500; }

.studio-app .studio-ordered-list,
.studio-app .studio-resolution-fields { min-width: 0; margin: 34px 0 0; padding: 0; border: 0; }
.studio-app .studio-ordered-list legend,
.studio-app .studio-resolution-fields legend { margin-bottom: 14px; font-size: 17px; font-weight: 700; }
.studio-app .studio-ordered-list > p { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.studio-app .studio-ordered-item,
.studio-app .studio-relation-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); }
.studio-app .studio-item-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-app .studio-item-actions button,
.studio-app .studio-add-item,
.studio-app .studio-document-status-rail button { min-height: 44px; padding-inline: 13px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); color: var(--ink); font-weight: 650; }
.studio-app .studio-item-actions button:disabled,
.studio-app .studio-add-item:disabled { opacity: 0.45; }
.studio-app .studio-add-item { margin-top: 12px; }
.studio-app .studio-resolution-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.studio-app .studio-resolution-fields legend { grid-column: 1 / -1; }

.studio-app .studio-document-status-rail { position: sticky; top: 28px; min-width: 0; padding: 24px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.studio-app .studio-document-status-rail .studio-eyebrow { margin-bottom: 8px; }
.studio-app .studio-editor-status { margin: 20px 0; font-weight: 700; }
.studio-app .studio-editor-status--dirty,
.studio-app .studio-editor-status--conflict,
.studio-app .studio-editor-conflict { color: #8f2f27; }
.studio-app .studio-editor-status--clean { color: #166748; }
.studio-app .studio-document-status-rail dl { display: grid; gap: 12px; margin: 0 0 20px; }
.studio-app .studio-document-status-rail dl div { display: flex; justify-content: space-between; gap: 16px; }
.studio-app .studio-document-status-rail dt { color: var(--muted); font-size: 12px; }
.studio-app .studio-document-status-rail dd { margin: 0; font-size: 13px; }
.studio-app .studio-document-status-rail button { width: 100%; border-color: var(--signal); background: var(--signal); color: #fff; }
.studio-app .studio-document-status-rail button:disabled { border-color: var(--line-strong); background: var(--paper); color: var(--muted); }
.studio-app .studio-document-status-rail > p:last-child { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.studio-app .studio-asset-panel { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.studio-app .studio-asset-panel .studio-eyebrow { margin-bottom: 8px; }
.studio-app .studio-asset-panel h3 { margin: 0 0 10px; font-size: 19px; letter-spacing: -0.02em; }
.studio-app .studio-asset-panel > p { max-width: 640px; margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.studio-app .studio-asset-panel-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 18px; }
.studio-app .studio-asset-kind-field { display: grid; min-width: 0; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 650; }
.studio-app .studio-asset-kind-field select { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
.studio-app .studio-asset-panel-actions button { min-height: 44px; padding-inline: 13px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); color: var(--ink); font-weight: 650; }
.studio-app .asset-picker ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.studio-app .asset-picker button { min-height: 36px; padding-inline: 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; }
/* Declared after `.asset-picker button` on purpose: the pill rule above also
   matches this form's submit button, and both selectors carry the same
   specificity, so only source order tells them apart. */
/* `minmax(0, 1fr)` and the row's `min-width: 0` are both load bearing, for the
   reason `.studio-editor-layout` already needs the same pair: a grid track and
   a flex container both default to an automatic minimum of their min-content
   size, so at 360px the search row sized itself to 366px inside a 328px column
   and pushed the submit button off-screen (document scrollWidth 382). */
/* Picker 자체의 옵션이지 문서의 입력 칸이 아니다 — `studio-field` 를 쓰면 편집기의 칸 목록에
   섞여 들어간다. 모양은 그 칸들과 같게 두고 이름만 분리한다. */
.studio-app .asset-picker-option { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 650; }
.studio-app .asset-picker-option input { width: 18px; min-width: 18px; min-height: 18px; padding: 0; }
.studio-app .asset-picker-search { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 650; }
.studio-app .asset-picker-search div { display: flex; min-width: 0; gap: 8px; }
.studio-app .asset-picker-search input { min-width: 0; flex: 1; min-height: 44px; padding-inline: 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); color: var(--ink); font-size: 14px; }
.studio-app .asset-picker-search button { min-height: 44px; padding-inline: 16px; border-radius: 5px; font-size: 13px; font-weight: 650; }
.studio-app .asset-picker ul:not(:empty) { margin-top: 12px; }
.studio-app .studio-error,
.studio-app .studio-asset-picker-empty { margin: 0; color: var(--muted); font-size: 13px; }
.studio-app .studio-instant-preview { min-width: 0; overflow: clip; border: 1px solid var(--line); }
.studio-app .studio-instant-preview .public-record-embedded { width: 100%; max-width: none; margin: 0; padding: clamp(24px, 5vw, 56px); }
.studio-app .studio-preview-error { padding: 48px 0; border-bottom: 1px solid var(--line); }
.studio-app .studio-preview-error ul { margin: 20px 0 0; padding-left: 20px; color: #8f2f27; line-height: 1.7; overflow-wrap: anywhere; }

@media (max-width: 1024px) {
  .studio-app .studio-editor-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .studio-app .studio-document-status-rail { position: static; }
}

@media (max-width: 767px) {
  .studio-app .studio-editor-heading { padding-bottom: 28px; }
  .studio-app .studio-editor-tabs { gap: 18px; }
  .studio-app .studio-editor-tabs button { flex: 1; min-width: 0; }
  .studio-app .studio-editor-layout { padding-top: 28px; }
  .studio-app .studio-field-grid,
  .studio-app .studio-resolution-fields { grid-template-columns: minmax(0, 1fr); }
  .studio-app .studio-field--wide,
  .studio-app .studio-resolution-fields legend { grid-column: auto; }
  .studio-app .studio-item-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .studio-app .studio-instant-preview .public-record-embedded { padding: 22px 16px; }
}

/* 게시까지의 단계. 순서가 있는 길이라 번호를 붙인다 — 장식이 아니라 밟아야 하는 차례다. */
.studio-app .studio-editor-flow ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.studio-app .studio-editor-flow li { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.studio-app .studio-editor-flow li + li::before { content: "→"; margin-right: 4px; color: var(--faint); }
.studio-app .studio-editor-flow span { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 999px; background: var(--line); color: var(--muted); font-size: 11px; font-weight: 650; }

/* 게시를 막는 항목. 고치는 자리에서 보이지 않으면 작성자는 별도 화면과 편집기를 오가며
   어느 칸이었는지 기억해야 한다. */
.studio-app .studio-editor-validation { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--danger, #b4232a); border-radius: 6px; background: var(--paper); }
.studio-app .studio-editor-validation--stale { border-color: var(--line-strong); opacity: 0.72; }
.studio-app .studio-editor-validation-title { margin: 0 0 10px; color: var(--danger, #b4232a); font-size: 13px; font-weight: 700; }
.studio-app .studio-editor-validation--stale .studio-editor-validation-title { color: var(--muted); }
.studio-app .studio-editor-validation ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.studio-app .studio-editor-validation li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink); }
.studio-app .studio-editor-validation li span { min-width: 30px; color: var(--danger, #b4232a); font-size: 11px; font-weight: 700; }
.studio-app .studio-editor-validation li[data-severity="WARNING"] span { color: var(--muted); }
.studio-app .studio-editor-validation code { color: var(--faint); font-size: 11px; }

/*
  칸 아래에 붙는 지적. 검증 결과를 화면 맨 위 한 덩어리로 모아 두는 대신 그 칸 옆에 두면,
  작성자는 `/topicId` 같은 경로를 읽고 어느 칸인지 스스로 찾을 필요가 없다.

  `.studio-field` 는 세로 흐름이므로 별도의 배치가 필요 없다 — 입력 바로 다음 줄에 놓인다.
*/
.studio-app .studio-field-notice { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; }
.studio-app .studio-field-notice--error { color: var(--danger, #b4232a); }
.studio-app .studio-field-notice--warning { color: var(--muted); }
.studio-app .studio-editor-unplaced-issues { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.studio-app .studio-editor-unplaced-issues li { font-size: 12px; color: var(--danger, #b4232a); }
.studio-app .studio-editor-unplaced-issues li[data-severity="WARNING"] { color: var(--muted); }
.studio-app .studio-editor-unplaced-issues code { color: var(--faint); font-size: 11px; }

/*
  저장과 게시는 되돌릴 수 있는 정도가 다르다 — 하나는 초안을 남기고, 하나는 공개한다. 둘이
  맞붙어 있으면 누르려던 것을 지나쳐 누르기 쉬우므로 사이를 벌린다.
*/
.studio-app .studio-document-status-rail button + button { margin-top: 10px; }
/* 게시만 강조한다. 저장은 되돌릴 수 있으므로 같은 무게로 부를 이유가 없다. */
.studio-app .studio-document-status-rail button:not(.studio-primary-button) { border-color: var(--line-strong); background: var(--paper); color: var(--ink); }