/* =============================================================
   원고관리 — 맥 고밀도. 범위: #manuscript-content 안쪽 + 이 화면이 여는 작은 창(#ms-status-modal · #ms-writer-modal) ·
   상태 메뉴(.ms-status-drop, body 직속이라 html body > .ms-status-drop). 값은 ui-tokens.css 에서만.
   제목 한 줄(제목 · 작업월 · 요약 · 흰 도구 단추) · 도구 한 줄(유형 · 상태 분할 단추 · 검색) · 맥 표(어두운 머리 → 흰 머리) ·
   유형은 이름만 · 상태는 색 점 + 이름 · 행 단추는 글자 · 맨 위 새 원고 입력 줄(사용자 A안: 표 안에서 바로 입력)은 연한 파랑 바탕 ·
   상태 · 관리 칸은 오른쪽에 붙어 늘 보임 · 채운 파랑은 [등록] 하나.
   AI 창(맘카페 AI 원고 · 프롬프트 관리 · 학습 및 튜닝)은 이 파일 범위 밖(다음 단계).
   마크업: ws-manuscript.js _msBuildShell · _msRenderTable · _msBuildInputRowHtml · _msBuildEditRow · 창 함수.
   되돌리기: index.tsx 의 이 파일 <link> 한 줄 + 위 마크업.
   ============================================================= */
html #manuscript-content.ms-page{ background:var(--ui-bg); color:var(--ui-text-1) }
html #manuscript-content .ms-mac, html #manuscript-content .ms-mac *{ font-family:var(--ui-font) }
html #manuscript-content .ms-mac{ padding:4px 16px 32px }
html #manuscript-content .hidden{ display:none !important }
html #manuscript-content .ms-sp{ flex:1 }
html #manuscript-content .ms-dim{ color:var(--ui-text-2) }
html #manuscript-content .ms-none{ color:var(--ui-text-3) }

/* 머리 */
html #manuscript-content .ms-head{ display:flex; align-items:center; gap:10px; min-height:36px; margin:4px 0 8px; white-space:nowrap }
html #manuscript-content .ms-head h2{ margin:0; font-size:var(--ui-text-title2); font-weight:var(--ui-weight-bold); color:var(--ui-text-1) }
html #manuscript-content .ms-head-btns{ margin-left:0 !important; gap:8px !important }
html #manuscript-content .ms-sum, html #manuscript-content .ms-foot{ display:flex; align-items:center; gap:14px; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #manuscript-content .ms-kv{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap }
html #manuscript-content .ms-kv b{ color:var(--ui-text-1); font-weight:var(--ui-weight-semibold); font-variant-numeric:tabular-nums }

/* 단추 · 입력 */
html #manuscript-content .ms-btn, html #ms-writer-modal .ms-btn{ display:inline-flex; align-items:center; justify-content:center; height:var(--ui-control); padding:0 12px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-body); font-weight:var(--ui-weight-regular); white-space:nowrap; cursor:default }
html #manuscript-content .ms-btn.sm{ height:var(--ui-control-sm); padding:0 10px; font-size:var(--ui-text-footnote) }
html #manuscript-content .ms-btn.pri, html #ms-writer-modal .ms-btn.pri{ background:var(--ui-accent); color:var(--ui-on-accent); box-shadow:none; font-weight:var(--ui-weight-semibold) }
html #manuscript-content .ms-btn.pri:hover, html #ms-writer-modal .ms-btn.pri:hover{ background:var(--ui-accent-hover) }
html #manuscript-content .ms-btn:disabled{ opacity:.55 }
html #manuscript-content .ms-pop{ height:var(--ui-control); padding:0 24px 0 8px; border:0; border-radius:var(--ui-radius-control); background-color:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-body); cursor:default }
html #manuscript-content .ms-in, html #ms-writer-modal .ms-in{ width:100%; min-width:0; height:24px; padding:0 6px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-field); color:var(--ui-text-1); font-size:var(--ui-text-footnote) }
html #ms-writer-modal .ms-in{ height:var(--ui-control); font-size:var(--ui-text-body) }
html #manuscript-content .ms-sel{ padding:0 14px 0 5px; min-width:44px; background-position:right 2px center }
html #manuscript-content .ms-ta{ height:24px; padding:4px 6px; resize:none; line-height:1.3 }
html #manuscript-content .ms-in:focus, html #manuscript-content .ms-pop:focus-visible, html #manuscript-content .ms-btn:focus-visible, html #manuscript-content .ms-search:focus, html #manuscript-content .ms-status-badge.clickable:focus-visible, html #ms-writer-modal .ms-in:focus{ outline:none; box-shadow:var(--ui-focus-ring) }
html #manuscript-content .ms-in::placeholder{ color:var(--ui-text-3) }
html #manuscript-content .ms-dot, html #ms-status-modal .ms-dot, html body > .ms-status-drop .ms-dot{ display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--ui-text-3) }

/* 도구 줄: 분할 단추 두 묶음 · 검색 */
html #manuscript-content .ms-tools{ display:flex; align-items:center; gap:8px; margin:0 0 8px; flex-wrap:wrap }
html #manuscript-content .ms-seg{ display:inline-flex; padding:2px; gap:2px; border-radius:var(--ui-radius-control); background:var(--ui-fill) }
html #manuscript-content .ms-seg button{ height:22px; padding:0 10px; border:0; border-radius:calc(var(--ui-radius-control) - 2px); background:transparent; color:var(--ui-text-1); font-size:var(--ui-text-footnote); white-space:nowrap; cursor:default }
html #manuscript-content .ms-seg button.ms-af{ background:var(--ui-surface); box-shadow:var(--ui-elev-control); font-weight:var(--ui-weight-semibold) }
html #manuscript-content .ms-search{ width:200px; height:26px; padding:0 10px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-fill); color:var(--ui-text-1); font-size:var(--ui-text-footnote) }
html #manuscript-content .ms-search::placeholder{ color:var(--ui-text-3) }

/* 표 */
html #manuscript-content .ms-list{ border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); overflow:hidden }
html #manuscript-content .ms-scroll{ overflow-x:auto }
html #manuscript-content .ms-tbl, html #ms-writer-modal .ms-tbl{ width:100%; border-collapse:collapse; font-size:var(--ui-text-body); font-variant-numeric:tabular-nums }
html #manuscript-content .ms-tbl th, html #ms-writer-modal .ms-tbl th{ height:28px; padding:0 7px; border-bottom:var(--ui-hairline) solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text-2); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); text-align:left; white-space:nowrap }
html #manuscript-content .ms-tbl td, html #ms-writer-modal .ms-tbl td{ height:var(--ui-row); padding:0 7px; border-bottom:var(--ui-hairline) solid var(--ui-line); white-space:nowrap; vertical-align:middle }
html #manuscript-content .ms-tbl tbody tr:last-child > td, html #ms-writer-modal .ms-tbl tbody tr:last-child > td{ border-bottom:0 }
html #manuscript-content .ms-tbl .c{ text-align:center } html #manuscript-content .ms-tbl .r, html #ms-writer-modal .ms-tbl .r{ text-align:right }
@media (hover:hover){ html #manuscript-content .ms-row:hover > td{ background:var(--ui-fill-subtle) } }
html #manuscript-content .ms-no{ width:24px; color:var(--ui-text-3); font-size:var(--ui-text-footnote) }
html #manuscript-content .ms-req{ color:var(--ui-text-1) }
html #manuscript-content .ms-dl{ color:var(--ui-text-2) }
html #manuscript-content .ms-dl.ms-dl-warn{ color:var(--ui-warning); font-weight:var(--ui-weight-semibold) }
html #manuscript-content .ms-dl.ms-dl-over{ color:var(--ui-danger); font-weight:var(--ui-weight-semibold) }
html #manuscript-content .ms-col-count{ width:56px }
html #manuscript-content .ms-num{ font-weight:var(--ui-weight-semibold) }
html #manuscript-content .ms-img-o{ color:var(--ui-text-1); font-weight:var(--ui-weight-semibold) }
html #manuscript-content td.ms-col-project{ max-width:210px }
html #manuscript-content .ms-proj{ display:block; overflow:hidden; text-overflow:ellipsis; font-weight:var(--ui-weight-semibold) }
html #manuscript-content .ms-writer{ display:block; margin-top:-2px; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #manuscript-content td.ms-memo-cell{ max-width:130px }
html #manuscript-content .ms-memo{ display:block; overflow:hidden; text-overflow:ellipsis; color:var(--ui-text-2) }
html #manuscript-content .ms-link, html #ms-writer-modal .ms-link{ padding:0 3px; border:0; background:none; color:var(--ui-accent-text); font-size:var(--ui-text-footnote); text-decoration:none; white-space:nowrap; cursor:default }
html #manuscript-content .ms-link:hover, html #ms-writer-modal .ms-link:hover{ text-decoration:underline }
html #manuscript-content .ms-link.danger, html #ms-writer-modal .ms-link.danger{ color:var(--ui-danger) }
html #manuscript-content .ms-acts{ white-space:nowrap }
html #manuscript-content .ms-tbl td.ms-acts, html #manuscript-content .ms-tbl th:last-child, html #manuscript-content .ms-inline-row > td:last-child{ position:sticky; right:0; z-index:1; width:76px; min-width:76px; background:var(--ui-surface) }
/* 상태 칸도 오른쪽에 붙여 둔다 — 좁은 창에서 표가 옆으로 밀려도 상태 · 관리는 늘 보임 */
html #manuscript-content .ms-tbl td.ms-stcell, html #manuscript-content .ms-tbl th:nth-last-child(2), html #manuscript-content .ms-inline-row > td:nth-last-child(2){ position:sticky; right:76px; z-index:1; background:var(--ui-surface); box-shadow:inset var(--ui-hairline) 0 0 var(--ui-line) }
html #manuscript-content .ms-inline-row > td:nth-last-child(2){ background:linear-gradient(var(--ui-accent-tint),var(--ui-accent-tint)) var(--ui-surface) }
html #manuscript-content .ms-row-deleted td.ms-acts, html #manuscript-content .ms-row-deleted td.ms-stcell{ opacity:1 }
html #manuscript-content .ms-row-deleted td.ms-stcell > *{ opacity:.45 }
html #manuscript-content .ms-inline-row > td:last-child{ background:linear-gradient(var(--ui-accent-tint),var(--ui-accent-tint)) var(--ui-surface) }
@media (hover:hover){ html #manuscript-content .ms-row:hover > td.ms-acts, html #manuscript-content .ms-row:hover > td.ms-stcell{ background:linear-gradient(var(--ui-fill-subtle),var(--ui-fill-subtle)) var(--ui-surface) } }
html #manuscript-content .ms-empty, html #ms-writer-modal .ms-empty{ height:auto !important; padding:36px 0 !important; text-align:center; color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
html #manuscript-content .ms-empty.err{ color:var(--ui-danger) }
html #manuscript-content .ms-foot{ min-height:30px; padding:0 12px; border-top:var(--ui-hairline) solid var(--ui-line); flex-wrap:wrap }
html #manuscript-content .ms-foot .k{ color:var(--ui-text-3) }

/* 상태: 점 + 이름. 누를 수 있으면 작은 ▾ */
html #manuscript-content .ms-status-badge, html #ms-writer-modal .ms-status-badge{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 6px; border-radius:var(--ui-radius-control); background:transparent; color:var(--ui-text-1); font-size:var(--ui-text-footnote); white-space:nowrap }
html #manuscript-content .ms-status-badge::before, html #ms-writer-modal .ms-status-badge::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--ui-text-3) }
html #manuscript-content .ms-status-badge.clickable{ cursor:default }
html #manuscript-content .ms-status-badge.clickable::after{ content:""; width:5px; height:5px; margin:-3px 0 0 1px; border-right:1.5px solid var(--ui-text-2); border-bottom:1.5px solid var(--ui-text-2); transform:rotate(45deg) }
html #manuscript-content .ms-status-badge.clickable:hover{ background:var(--ui-fill) }
html #manuscript-content .ms-st-orange::before, html #manuscript-content .ms-dot.ms-st-orange, html #ms-status-modal .ms-dot.ms-st-orange, html body > .ms-status-drop .ms-dot.ms-st-orange{ background:var(--ui-warning-dot) !important }
html #manuscript-content .ms-st-green::before, html #ms-writer-modal .ms-st-green::before, html #manuscript-content .ms-dot.ms-st-green, html #ms-status-modal .ms-dot.ms-st-green, html body > .ms-status-drop .ms-dot.ms-st-green{ background:var(--ui-success) !important }
html #manuscript-content .ms-type{ color:var(--ui-text-1) }

/* 새 원고 입력 줄 · 고치는 줄 */
html #manuscript-content .ms-inline-row > td{ height:36px; padding:0 4px; background:var(--ui-accent-tint) }
html #manuscript-content .ms-inline-row > td:first-child{ padding-left:8px }
html #manuscript-content .ms-plus{ display:inline-block; color:var(--ui-accent-text); font-weight:var(--ui-weight-semibold); font-size:var(--ui-text-body) }
html #manuscript-content .ms-inline-row .ms-in[type="number"]{ width:56px }
html #manuscript-content .ms-inline-row .ms-in[type="date"]{ width:106px }
html #manuscript-content .ms-inline-row td:nth-child(4) .ms-in{ width:104px }
html #manuscript-content .ms-inline-row td:nth-child(8) .ms-in{ min-width:110px }
html #manuscript-content .ms-inline-row td:nth-child(9) .ms-in{ min-width:84px }
html #manuscript-content .ms-inline-row .ms-ta{ min-width:80px; width:100% }
html #manuscript-content .ms-guide-in{ display:flex; flex-direction:column; gap:4px; min-width:112px; padding:4px 0 }
html #manuscript-content .ms-files{ display:flex; flex-direction:column; gap:3px }
html #manuscript-content .ms-files label{ display:flex; align-items:center; gap:4px; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #manuscript-content .ms-files input[type="file"]{ max-width:150px; font-size:var(--ui-text-caption) }
html #manuscript-content .ms-files small{ font-size:var(--ui-text-caption); color:var(--ui-text-3) }
html #manuscript-content .ms-edit-acts{ display:inline-flex; gap:4px }

/* 좁은 노트북 */
@media (min-width:768px) and (max-width:1280px){
  html #manuscript-content .ms-tbl th, html #manuscript-content .ms-tbl td{ padding:0 6px }
  html #manuscript-content td.ms-col-project{ max-width:170px } html #manuscript-content td.ms-memo-cell{ max-width:130px }
  html #manuscript-content .ms-head{ flex-wrap:wrap }
}

/* 휴대폰: 머리 · 도구 줄 접기, 표는 옆으로 밀기(입력 줄도 같은 칸이라 표 그대로 둔다) */
@media (max-width:767px){
  html #manuscript-content .ms-mac{ padding:4px 12px 32px }
  html #manuscript-content .ms-head{ flex-wrap:wrap; white-space:normal }
  html #manuscript-content .ms-head h2{ flex:1 }
  html #manuscript-content .ms-head .ms-sp{ display:none }
  html #manuscript-content .ms-sum{ order:3; flex:1 1 100%; flex-wrap:wrap; gap:4px 12px }
  html #manuscript-content .ms-head-btns{ order:4; flex:1 1 100%; flex-wrap:wrap }
  html #manuscript-content .ms-head-btns .ms-btn{ flex:1; height:var(--ui-control-mobile) }
  html #manuscript-content .ms-tools{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px }
  html #manuscript-content .ms-tools .ms-sp{ display:none }
  html #manuscript-content .ms-seg{ flex:none }
  html #manuscript-content .ms-seg button{ height:28px }
  html #manuscript-content .ms-search{ flex:none; width:160px; height:32px }
  html #manuscript-content .ms-tbl td{ height:var(--ui-row-mobile) }
  html #manuscript-content .ms-link{ padding:8px 4px }
}

/* 상태 메뉴(맥 메뉴) */
html body > .ms-status-drop{ position:absolute; z-index:9999; display:flex; flex-direction:column; min-width:120px; padding:5px; border:0; border-radius:var(--ui-radius-card); background:var(--ui-surface); box-shadow:var(--ui-elev-popover); font-family:var(--ui-font) }
html body > .ms-status-drop .ms-status-drop-item{ display:flex; align-items:center; gap:8px; height:26px; padding:0 10px 0 6px; border:0; border-radius:var(--ui-radius-row); background:none; color:var(--ui-text-1); font-size:var(--ui-text-body); font-weight:var(--ui-weight-regular); text-align:left; cursor:default }
html body > .ms-status-drop .ms-status-drop-item:hover, html body > .ms-status-drop .ms-status-drop-item:focus-visible{ outline:none; background:var(--ui-accent); color:var(--ui-on-accent) }
html body > .ms-status-drop .ms-ck{ width:12px; font-size:var(--ui-text-footnote) }

/* 작은 창(상태 변경 · 작가 관리): 맥 시트 */
html #ms-status-modal.ms-ov, html #ms-writer-modal.ms-ov{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:16px; font-family:var(--ui-font) }
html #ms-status-modal .ms-ov-bg, html #ms-writer-modal .ms-ov-bg{ position:absolute; inset:0; background:var(--ui-scrim) }
html #ms-status-modal .ms-sheet, html #ms-writer-modal .ms-sheet{ position:relative; display:flex; flex-direction:column; width:100%; max-width:520px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); border-radius:var(--ui-radius-sheet); background:var(--ui-bg); box-shadow:var(--ui-elev-sheet); overflow:hidden }
html #ms-status-modal .ms-sheet.sm{ max-width:300px }
html #ms-status-modal .ms-sheet-hd, html #ms-writer-modal .ms-sheet-hd{ flex:none; display:flex; align-items:center; min-height:44px; padding:6px 8px 6px 16px; background:var(--ui-surface); border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #ms-status-modal .ms-sheet-hd h3, html #ms-writer-modal .ms-sheet-hd h3{ flex:1; margin:0; font-size:var(--ui-text-title3); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #ms-status-modal .ms-sheet-bd, html #ms-writer-modal .ms-sheet-bd{ overflow-y:auto; padding:12px 16px 16px }
html #ms-status-modal .ms-sheet-sub, html #ms-writer-modal .ms-sheet-sub{ margin:0 0 6px; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2) }
html #ms-writer-modal .ms-addrow{ display:flex; gap:8px; margin-bottom:14px }
html #ms-writer-modal .ms-grp{ border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); overflow:hidden }
html #ms-status-modal .ms-pick{ display:flex; flex-direction:column; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); overflow:hidden }
html #ms-status-modal .ms-pick button{ display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border:0; border-bottom:var(--ui-hairline) solid var(--ui-line); background:none; color:var(--ui-text-1); font-size:var(--ui-text-body); text-align:left; cursor:default }
html #ms-status-modal .ms-pick button:last-child{ border-bottom:0 }
html #ms-status-modal .ms-pick button:hover{ background:var(--ui-fill-subtle) }
html #ms-status-modal .ms-pick button.on{ font-weight:var(--ui-weight-semibold) }
html #ms-status-modal .ms-pick .ms-ck{ margin-left:auto; color:var(--ui-accent-text) }
html #ms-status-modal .ms-x, html #ms-writer-modal .ms-x{ position:relative; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:transparent; cursor:default }
html #ms-status-modal .ms-x::before, html #ms-status-modal .ms-x::after, html #ms-writer-modal .ms-x::before, html #ms-writer-modal .ms-x::after{ content:""; position:absolute; left:8px; top:13.5px; width:12px; height:1.5px; border-radius:1px; background:var(--ui-text-2); transform:rotate(45deg) }
html #ms-status-modal .ms-x::after, html #ms-writer-modal .ms-x::after{ transform:rotate(-45deg) }
html #ms-status-modal .ms-x:hover, html #ms-writer-modal .ms-x:hover{ background:var(--ui-fill) }
html #ms-writer-modal .ms-dim{ color:var(--ui-text-2) }
@media (max-width:767px){
  html #ms-status-modal.ms-ov, html #ms-writer-modal.ms-ov{ padding:0; align-items:flex-end }
  html #ms-status-modal .ms-sheet, html #ms-writer-modal .ms-sheet{ max-width:none; max-height:90vh; max-height:90dvh; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0; padding-bottom:env(safe-area-inset-bottom) }
  html #ms-writer-modal .ms-in, html #ms-writer-modal .ms-btn{ height:var(--ui-control-mobile) }
}