/* 제작진 스튜디오(#424) — 3D 사무실 위에 겹치는 이름표 · 말풍선 · 패널. 색과 글꼴은 공통 토큰을 쓴다. */
.sf { position: relative; height: max(560px, calc(100vh - 210px)); border-radius: 12px; overflow: hidden;
  background: var(--stage-bg); border: 1px solid var(--line); margin-top: 12px; color: var(--stage-ink); font: 14px/1.6 var(--sans) }
.sf-stage, .sf-canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.sf-canvas { display: block; touch-action: none; cursor: grab }
.sf-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden }
.sf-btn { font: 600 13px var(--sans); color: var(--stage-ink); background: var(--stage-raise); border: 1px solid var(--stage-line); border-radius: 6px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px }
.sf-btn:hover, .sf-btn:focus-visible { border-color: var(--auto); outline: none }
.sf-btn.go { background: var(--auto); color: var(--stage-on-accent); border-color: var(--auto) }
.sf-btn:disabled { opacity: .55; cursor: default }
.sf-muted { color: var(--stage-dim); font-size: 12.5px; margin: 0 }

.sf-top { position: absolute; z-index: 3; top: 10px; left: 12px; right: 12px; display: flex; gap: 10px; align-items: center; pointer-events: none }
.sf-top > * { pointer-events: auto }
.sf-now { flex: 1; min-width: 0; background: var(--stage-glass); border: 1px solid var(--stage-line); border-radius: 8px; padding: 6px 12px;
  display: flex; gap: 10px; align-items: baseline; font-size: 13px }
.sf-now .who { white-space: nowrap }
.sf-now .line { color: var(--stage-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.sf-hint { position: absolute; z-index: 2; top: 54px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 12px; color: var(--stage-ink-2);
  background: var(--stage-glass); padding: 3px 12px; border-radius: 99px; pointer-events: none; white-space: nowrap }

.sf-bottom { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 10px 14px; display: flex; gap: 10px; align-items: center;
  background: linear-gradient(transparent, var(--stage-bg) 60%) }
.sf-track { position: relative; flex: 1; height: 26px; cursor: pointer; min-width: 80px }
.sf-track .sf-rail { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: var(--stage-line) }
.sf-track .sf-fill { position: absolute; left: 0; top: 11px; height: 4px; border-radius: 2px; background: var(--auto) }
.sf-track i { position: absolute; top: 7px; width: 3px; height: 12px; border-radius: 1px; transform: translateX(-1px) }
.sf-track i.m-ok { background: var(--ok) } .sf-track i.m-rev { background: var(--stage-warn) } .sf-track i.m-meet { background: var(--stage-meet) }
.sf-clock { font-variant-numeric: tabular-nums; color: var(--stage-dim); font-size: 12.5px; white-space: nowrap }
.sf-legend { display: flex; gap: 10px; font-size: 12px; color: var(--stage-dim); white-space: nowrap }
.sf-legend b { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px }
.sf-legend b.m-ok { background: var(--ok) } .sf-legend b.m-rev { background: var(--stage-warn) } .sf-legend b.m-meet { background: var(--stage-meet) }
.sf.demo [data-replay] { display: none }
.sf .sf-side h2, .sf .sf-side h3 { line-height: 1.3; text-wrap: initial }
.sf.replaying .sf-now { border-color: var(--stage-meet) }

.sf-tag { position: absolute; left: 0; top: 0; z-index: 1; white-space: nowrap; font-size: 12px; font-weight: 600; pointer-events: auto; cursor: pointer;
  padding: 1px 7px; border-radius: 99px; background: var(--stage-glass); border: 1px solid var(--stage-line); display: flex; gap: 5px; align-items: center }
.sf-tag .dot { width: 7px; height: 7px; border-radius: 50% }
/* 명패 아래 결과물 한 줄(#463) — 「키프레임 10장 · 4장 확인 필요」. 누르면 그 단계 화면 */
.sf-tag.has-out { flex-wrap: wrap; row-gap: 0; border-radius: 8px; max-width: 220px; white-space: normal }
.sf-tag .out { display: block; flex-basis: 100%; margin-top: 1px; font-size: 10.5px; font-weight: 500; color: var(--ink-2); text-decoration: none }
.sf-tag .out:hover { color: var(--ink); text-decoration: underline }
.sf-tag .out[data-attention] { color: var(--human) }
.sf-tag .dots { color: var(--auto); letter-spacing: 1px; animation: sf-blink 1.2s infinite }
@keyframes sf-blink { 50% { opacity: .3 } }
.sf-bubble { position: absolute; left: 0; top: 0; z-index: 2; max-width: 270px; padding: 7px 10px; border-radius: 10px; pointer-events: none;
  background: var(--bubble); color: var(--bubble-ink); font-size: 12.5px; line-height: 1.5; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: opacity .3s }
.sf-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; border: 6px solid transparent; border-top-color: inherit; border-bottom: 0; transform: translateX(-50%) }
.sf-bubble { border-top-color: var(--bubble) }
.sf-bubble[data-kind="note"] { background: var(--bubble-note); border-top-color: var(--bubble-note) }
.sf-bubble[data-kind="meet"] { background: var(--bubble-meet); border-top-color: var(--bubble-meet) }
.sf-bubble[data-kind="ok"] { background: var(--bubble-ok); border-top-color: var(--bubble-ok) }
.sf-bubble[data-kind="bad"] { background: var(--bubble-bad); border-top-color: var(--bubble-bad) }
.sf-bubble .sf-chip[data-tone="ok"] { background: rgba(31,157,107,.2) } .sf-bubble .sf-chip[data-tone="meet"] { background: rgba(124,77,206,.18) } .sf-bubble .sf-chip[data-tone="bad"] { background: rgba(214,51,108,.2) }
.sf-bubble .sf-chip, .sf-side .sf-chip { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 99px; margin-right: 5px; background: rgba(0,0,0,.09) }

.sf-side { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(400px, 100%); background: var(--stage-panel); border-left: 1px solid var(--stage-line);
  transform: translateX(102%); transition: transform .25s ease; display: grid; grid-template-rows: auto auto 1fr }
.sf-side.open { transform: none }
.sf-side header { padding: 14px 18px 12px; display: grid; gap: 2px; border-bottom: 1px solid var(--stage-line); position: relative }
.sf .sf-side h2 { margin: 0; font: 800 19px var(--sans); display: flex; gap: 10px; align-items: center; color: var(--stage-ink) }
.sf-side .chip { min-width: 30px; height: 30px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; font: 800 13px var(--sans); color: var(--stage-on-accent) }
.sf-side .x { position: absolute; top: 12px; right: 12px }
.sf-side .sub { color: var(--stage-dim); font-size: 13px }
.sf-tabs { display: flex; gap: 4px; padding: 8px 14px; border-bottom: 1px solid var(--stage-line) }
.sf-tabs button { font: 500 13px var(--sans); color: var(--stage-dim); background: none; border: 0; padding: 5px 10px; border-radius: 6px; cursor: pointer }
.sf-tabs button[aria-selected="true"] { color: var(--stage-ink); background: var(--stage-raise) }
.sf-body { overflow-y: auto; padding: 14px 16px 28px; display: grid; gap: 10px; align-content: start; min-height: 0 }
.sf-card { background: var(--stage-raise); border: 1px solid var(--stage-line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; font-size: 13px }
.sf-card .k { font-size: 11.5px; color: var(--stage-dim) }
.sf-card .ev { color: var(--stage-dim); font-size: 11.5px }
.sf-card.warn { border-color: rgba(224,164,88,.6) }
.sf-card summary { cursor: pointer; display: grid; gap: 2px }
.sf-card summary small { color: var(--stage-dim) }
.sf-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px }
.sf-tl, .sf-rounds, .sf-notes, .sf-mems { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 6px }
.sf-tl li { display: grid; grid-template-columns: 78px auto 1fr; gap: 6px; font-size: 12.5px; align-items: baseline }
.sf-tl time { color: var(--stage-dim); font-size: 11.5px; font-variant-numeric: tabular-nums }
.sf-tl b { font-weight: 600; white-space: nowrap }
.sf-tl .k-note b, .sf-tl .k-error b { color: var(--stage-warn) } .sf-tl .k-approve b { color: var(--ok) } .sf-tl .k-say b { color: var(--stage-meet) }
.sf-rounds li { font-size: 12.5px } .sf-rounds ul { margin: 2px 0 0 16px; padding: 0; color: var(--stage-ink-2) }
.sf-notes li { font-size: 12.5px; line-height: 1.55 } .sf-notes li.block { border-left: 3px solid var(--stage-warn); padding-left: 7px }
.sf-notes small { color: var(--stage-dim) }
.sf-mems > li.sf-mem { display: block; grid-template-columns: none }
.sf-mem .h > * { width: auto; writing-mode: horizontal-tb }
.sf-mem { border-top: 1px solid var(--stage-line); padding-top: 6px } .sf-mem:first-child { border-top: 0; padding-top: 0 }
.sf-mem .h { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px }
.sf-mem time { color: var(--stage-dim); font-size: 11.5px; margin-left: auto }
.sf-mem p { margin: 3px 0 0; font-size: 13px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }
.sf-mem p:hover { -webkit-line-clamp: unset }
.sf-mem .sf-chip.short { background: rgba(94,200,190,.18); color: var(--auto) } .sf-mem .sf-chip.long { background: rgba(224,164,88,.2); color: var(--stage-warn) }
.sf-mem.gone { opacity: .6 }
.sf-chat { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; padding-right: 4px }
.sf .spin { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sf-spin .8s linear infinite; vertical-align: -2px }
@keyframes sf-spin { to { transform: rotate(360deg) } }

.sf-meetbar { position: absolute; z-index: 4; left: 50%; bottom: 52px; transform: translateX(-50%); width: min(760px, calc(100% - 24px)); display: none;
  background: var(--stage-glass); border: 1px solid var(--stage-meet); border-radius: 10px; padding: 10px 12px }
.sf-meetbar.open { display: block }
.sf-meetbar .pick, .sf-meetbar .live { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.sf-meetbar [hidden] { display: none }
.sf-meetbar .sf-muted { flex-basis: 100% }
.sf-meetbar input { flex: 1; min-width: 180px; font: 13px var(--sans); background: var(--stage-input); color: var(--stage-ink); border: 1px solid var(--stage-line); border-radius: 6px; padding: 7px 10px }

/* 크게 보기 — 화면 가득 */
.sf.wide { position: fixed; inset: 0; z-index: 60; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; border: 0 }
html.sf-wide-on, html.sf-wide-on body { overflow: hidden }

/* 보기 전환 — 스튜디오 · 목록 */
.viewbar { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; margin: 4px 0 0 }
.viewbar button { font: 600 13px var(--sans); border: 0; background: none; color: var(--dim); padding: 5px 14px; border-radius: 6px; cursor: pointer }
.viewbar button[aria-pressed="true"] { background: var(--raise); color: var(--ink) }
.viewnote { color: var(--dim); font-size: 12.5px; margin: 6px 0 0 }

@media (max-width: 760px) {
  .sf { height: 72vh; min-height: 460px }
  .sf-legend, .sf-hint { display: none }
  .sf-side { width: 100% }
  .sf-tag { font-size: 11px; padding: 0 6px }
  .sf-bubble { max-width: 200px; font-size: 12px }
}
@media (prefers-reduced-motion: reduce) { .sf-side { transition: none } .sf-tag .dots, .sf .spin { animation: none } }

/* 규칙에 걸린 일을 알아챈 사람의 「!」(#440) — 이름표 바로 위. 누르면 걸림 카드 */
.sf-bang { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--stage-ink);
  display: grid; place-items: center; padding: 0; font: 800 13px/1 var(--sans); color: var(--bg); cursor: pointer;
  background: var(--danger); box-shadow: 0 2px 6px rgb(0 0 0 / .35); pointer-events: auto; z-index: 3;
  animation: sf-bang 1.6s ease-in-out infinite; }
.sf-bang[data-tone="warn"] { background: var(--human); color: var(--bg); }
.sf-bang.fixing { animation: sf-bang-fix 1s linear infinite; }
.sf-bang[hidden] { display: none; }
/* 크기(scale)로 뛰게 하면 위치(transform)의 이동 값까지 곱해져 「!」가 옆자리로 밀렸다 — 둘레 빛으로 깜빡인다 */
@keyframes sf-bang { 0%, 100% { box-shadow: 0 0 0 0 rgb(217 83 79 / .6), 0 2px 6px rgb(0 0 0 / .35); }
  50% { box-shadow: 0 0 0 7px rgb(217 83 79 / 0), 0 2px 6px rgb(0 0 0 / .35); } }
@keyframes sf-bang-fix { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .sf-bang, .sf-bang.fixing { animation: none; } }
/* 규칙 책장의 표(#440 S3) — 처리할 걸림이 있으면 빨간 테두리 */
.sf-tag.sf-shelf { font: 700 12px var(--sans); color: var(--stage-ink); border-color: var(--human); }
.sf-tag.sf-shelf.hot { border-color: var(--danger); box-shadow: 0 0 0 2px rgb(217 83 79 / .35); }