/* 숏츠 제작 화면. 모든 선택자는 .shorts- 접두. 색 값은 one OS 토큰(ink · hairline · cobalt · action-red)과 맞춘다.
   규칙: 명조 · 이모지 · 아이콘 · 인용 막대 금지. 둥근 카드 · 알약 칩 대신 얇은 선과 여백. 글자 박스는 글자 폭 + 좌우 같은 여백, 자간 +0.03em. */
@font-face { font-family: 'Pretendard'; src: local('Pretendard'), url('/assets/fonts/Pretendard-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: local('Pretendard Medium'), url('/assets/fonts/Pretendard-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: local('Pretendard SemiBold'), url('/assets/fonts/Pretendard-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: local('Pretendard Bold'), url('/assets/fonts/Pretendard-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }

.shorts-root {
  --shorts-canvas: #f5f5f7;
  --shorts-panel: #ffffff;
  --shorts-ink: #15181e;
  --shorts-ink-2: #454d5b;
  --shorts-ink-3: #5f6877;
  --shorts-mute: #86868b;
  --shorts-line: #e7eaf0;
  --shorts-line-2: #d3d8e0;
  --shorts-fill: #eff1f5;
  --shorts-cobalt: #324fdb;
  --shorts-cobalt-tint: #f3f7ff;
  --shorts-red: #b42318;
  --shorts-red-tint: #ffece9;
  --shorts-green: #1f7a4d;
  --shorts-amber: #8a5a00;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--shorts-ink);
  background: var(--shorts-canvas);
  letter-spacing: .03em;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* 전역(html · body) 규칙과 min-height 는 두지 않는다. 로컬 index.html 이 따로 준다(one OS 호스트 페이지를 바꾸지 않게). */
.shorts-root *, .shorts-root *::before, .shorts-root *::after { box-sizing: border-box; }
/* 자간 +0.03em 을 글자 크기마다 다시 계산한다(상속되면 14px 기준 px 값으로 굳는다) */
.shorts-root, .shorts-root * { letter-spacing: .03em; }
.shorts-root button, .shorts-root input, .shorts-root select, .shorts-root textarea { font: inherit; letter-spacing: inherit; color: inherit; }

/* 머리띠 */
.shorts-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 32px 14px; border-bottom: 1px solid var(--shorts-line); background: var(--shorts-panel); flex-wrap: wrap; }
.shorts-brand { font-weight: 700; font-size: 17px; }
.shorts-brand small { font-weight: 500; color: var(--shorts-ink-3); font-size: 12px; margin-left: 10px; }
.shorts-topmeta { display: flex; gap: 18px; align-items: baseline; color: var(--shorts-ink-3); font-size: 12.5px; flex-wrap: wrap; }
.shorts-topmeta b { color: var(--shorts-ink); font-weight: 600; }
.shorts-topmeta select { border: 0; border-bottom: 1px solid var(--shorts-line-2); background: transparent; padding: 2px 4px; font-weight: 600; color: var(--shorts-ink); }
.shorts-band { background: #fff7e6; color: var(--shorts-amber); border-bottom: 1px solid #f1dfb8; padding: 8px 32px; font-size: 12.5px; font-weight: 600; }

/* 뼈대 */
.shorts-body { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: calc(100vh - 60px); }
.shorts-rail { border-right: 1px solid var(--shorts-line); background: var(--shorts-panel); padding: 24px 0; }
.shorts-rail ol { list-style: none; margin: 0; padding: 0; }
.shorts-step { display: grid; grid-template-columns: 28px 1fr; gap: 0 4px; width: 100%; text-align: left; background: none; border: 0; padding: 11px 24px; cursor: pointer; color: var(--shorts-ink-2); border-top: 1px solid transparent; }
.shorts-step .shorts-step-n { font-variant-numeric: tabular-nums; color: var(--shorts-mute); font-weight: 600; }
.shorts-step .shorts-step-name { font-weight: 500; }
.shorts-step .shorts-step-state { grid-column: 2; font-size: 11.5px; color: var(--shorts-ink-3); }
.shorts-step:hover:not([disabled]) { background: var(--shorts-fill); }
.shorts-step.is-current { color: var(--shorts-ink); }
.shorts-step.is-current .shorts-step-name { font-weight: 700; }
.shorts-step.is-current .shorts-step-n { color: var(--shorts-ink); }
.shorts-step.is-current { box-shadow: inset 0 -1px 0 var(--shorts-line), inset 0 1px 0 var(--shorts-line); background: var(--shorts-canvas); }
.shorts-step[disabled] { cursor: default; color: #b4b9c3; }
.shorts-step[disabled] .shorts-step-state { color: #b4b9c3; }
.shorts-step .is-short { display: none; }
.shorts-step-later { display: none; }
.shorts-step .shorts-step-state { white-space: nowrap; }
.shorts-rail-note { padding: 18px 24px 0; font-size: 11.5px; color: var(--shorts-ink-3); border-top: 1px solid var(--shorts-line); margin-top: 14px; }

.shorts-main { padding: 28px 40px 80px; max-width: 1120px; width: 100%; }
.shorts-h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; line-height: 1.35; }
.shorts-lead { color: var(--shorts-ink-3); margin: 0 0 22px; font-size: 13px; }
.shorts-sec { margin: 34px 0 0; }
.shorts-sec > h2 { font-size: 15px; font-weight: 700; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--shorts-ink); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.shorts-sec > h2 small { font-weight: 500; font-size: 12px; color: var(--shorts-ink-3); }
.shorts-note { font-size: 12px; color: var(--shorts-ink-3); margin: 8px 0 0; }
.shorts-msg { margin: 0 0 18px; padding: 10px 0; border-top: 1px solid var(--shorts-red); border-bottom: 1px solid var(--shorts-red); color: var(--shorts-red); font-size: 13px; }
.shorts-msg.is-ok { color: var(--shorts-green); border-color: var(--shorts-green); }
.shorts-busy { color: var(--shorts-cobalt); font-size: 13px; padding: 10px 0; }

/* 줄 목록(표 대신 격자 — 좁은 화면에서 쌓인다) */
.shorts-rows { border-top: 0; }
.shorts-row { display: grid; gap: 4px 18px; padding: 11px 0; border-bottom: 1px solid var(--shorts-line); align-items: baseline; }
.shorts-row.is-head { color: var(--shorts-ink-3); font-size: 11.5px; font-weight: 600; padding: 8px 0; }
.shorts-row > * { min-width: 0; overflow-wrap: anywhere; }
.shorts-row .shorts-k { display: none; }
.shorts-row.is-off { color: var(--shorts-ink-3); }
.shorts-sub { display: block; font-size: 12px; color: var(--shorts-ink-3); }
.shorts-num { font-variant-numeric: tabular-nums; }

/* 이름-값 2열 격자(가운뎃점 나열 대신) */
.shorts-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 18px; margin: 6px 0; font-size: 12.5px; border-top: 1px solid var(--shorts-line); }
.shorts-kv dt, .shorts-kv dd { margin: 0; padding: 5px 0; border-bottom: 1px solid var(--shorts-line); }
.shorts-kv dt { color: var(--shorts-ink-3); }
.shorts-kv dd { color: var(--shorts-ink); overflow-wrap: anywhere; }
.shorts-cond { display: block; }
.shorts-account .shorts-kv { margin: 0 0 6px; }

/* 상태 글자(알약 대신 글자색 + 굵기) */
.shorts-st { font-weight: 700; white-space: nowrap; }
.shorts-st.is-up { color: var(--shorts-cobalt); }
.shorts-st.is-down { color: var(--shorts-red); }
.shorts-st.is-flat { color: var(--shorts-ink-2); }
.shorts-st.is-unknown { color: var(--shorts-mute); }
.shorts-st.is-ok { color: var(--shorts-green); }
.shorts-st.is-no { color: var(--shorts-red); }
.shorts-tag { display: inline-block; font-size: 11px; color: var(--shorts-ink-3); border-bottom: 1px solid var(--shorts-line-2); padding: 0 1px; margin-right: 8px; white-space: nowrap; }
.shorts-ev { font-size: 11.5px; color: var(--shorts-ink-3); cursor: help; text-decoration: underline dotted var(--shorts-line-2); text-underline-offset: 3px; }

/* 판정 */
.shorts-verdict { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 40px; padding: 18px 0 6px; }
.shorts-verdict-big { font-size: 30px; font-weight: 700; line-height: 1.2; }
.shorts-verdict-why { margin-top: 8px; color: var(--shorts-ink-2); }
.shorts-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--shorts-line); }
.shorts-groups > div { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--shorts-line); }
.shorts-groups .shorts-st { font-size: 18px; display: block; }

/* 해설 */
.shorts-narr p { margin: 8px 0; max-width: 72ch; }
.shorts-narr ol { margin: 6px 0 0; padding-left: 20px; }
.shorts-narr li { margin: 4px 0; max-width: 72ch; }

/* 관문 */
.shorts-gate { margin-top: 36px; padding: 20px 0 4px; border-top: 2px solid var(--shorts-ink); }
.shorts-gate h2 { font-size: 15px; margin: 0 0 4px; font-weight: 700; }
.shorts-gate-who { font-size: 12px; color: var(--shorts-ink-3); margin-bottom: 14px; }
.shorts-choices { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--shorts-line); border-bottom: 1px solid var(--shorts-line); margin: 8px 0 14px; }
.shorts-choice { display: flex; gap: 8px; align-items: baseline; padding: 10px 22px 10px 0; cursor: pointer; }
.shorts-choice input { accent-color: var(--shorts-ink); }
.shorts-fields { display: flex; gap: 22px; flex-wrap: wrap; margin: 8px 0 12px; }
.shorts-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--shorts-ink-3); }
.shorts-field input[type=number], .shorts-field input[type=text], .shorts-input { border: 0; border-bottom: 1px solid var(--shorts-ink-3); background: transparent; padding: 4px 2px; font-size: 15px; color: var(--shorts-ink); width: 88px; border-radius: 0; }
.shorts-input.is-wide, .shorts-field input.is-wide { width: min(100%, 420px); font-size: 14px; }
.shorts-textarea { width: 100%; max-width: 720px; min-height: 78px; border: 1px solid var(--shorts-line-2); background: var(--shorts-panel); padding: 10px 12px; border-radius: 0; resize: vertical; }
.shorts-input:focus, .shorts-textarea:focus, .shorts-field input:focus { outline: none; border-color: var(--shorts-cobalt); }
.shorts-ref { font-size: 12.5px; color: var(--shorts-ink-2); margin: 6px 0; }
.shorts-issues { margin: 10px 0 14px; padding: 0; list-style: none; }
.shorts-issues li { padding: 6px 0; border-bottom: 1px solid var(--shorts-line); color: var(--shorts-red); font-size: 13px; }

/* 버튼: 글자 폭 + 좌우 같은 여백, 각진 모서리 */
.shorts-btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--shorts-ink); background: var(--shorts-panel); color: var(--shorts-ink); cursor: pointer; font-weight: 600; font-size: 13px; line-height: 1.4; border-radius: 0; text-decoration: none; white-space: nowrap; }
.shorts-btn:hover:not([disabled]) { background: var(--shorts-fill); }
.shorts-btn.is-primary { background: var(--shorts-ink); color: #fff; }
.shorts-btn.is-primary:hover:not([disabled]) { background: #2b3038; }
.shorts-btn.is-quiet { border-color: var(--shorts-line-2); font-weight: 500; }
.shorts-btn.is-danger { border-color: var(--shorts-red); color: var(--shorts-red); }
.shorts-btn[disabled] { opacity: .4; cursor: default; }
.shorts-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.shorts-link { color: var(--shorts-cobalt); text-decoration: none; border-bottom: 1px solid currentColor; cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; padding: 0; font-weight: 600; }

/* 펼침 */
.shorts-root details > summary { cursor: pointer; list-style: none; }
.shorts-root details > summary::-webkit-details-marker { display: none; }
.shorts-more { color: var(--shorts-ink-3); font-size: 12px; }
.shorts-root details[open] .shorts-more-open { display: none; }
.shorts-detail { padding: 8px 0 4px; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 16px; font-size: 13px; }
.shorts-detail dt { color: var(--shorts-ink-3); font-size: 12px; }
.shorts-detail dd { margin: 0; }
.shorts-detail ul, .shorts-detail ol { margin: 0; padding-left: 18px; }

/* 스냅샷 선택 */
.shorts-files { display: grid; gap: 0; }

/* AI 요청 */
.shorts-ai { border-top: 1px solid var(--shorts-line); padding: 14px 0; }
.shorts-flow { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 12.5px; color: var(--shorts-mute); margin: 8px 0; }
.shorts-flow span.is-done { color: var(--shorts-ink-2); }
.shorts-flow span.is-now { color: var(--shorts-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.shorts-account { font-size: 12.5px; color: var(--shorts-ink-2); padding: 10px 0; border-top: 1px solid var(--shorts-line); border-bottom: 1px solid var(--shorts-line); }

/* 콘티 */
.shorts-timeline { display: flex; width: 100%; border: 1px solid var(--shorts-ink); height: 46px; margin: 14px 0 6px; }
.shorts-timeline > div { border-right: 1px solid var(--shorts-ink); padding: 4px 6px; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; line-height: 1.35; }
.shorts-timeline > div:last-child { border-right: 0; }
.shorts-timeline .is-hook { background: var(--shorts-cobalt-tint); }
.shorts-timeline .is-cta { background: var(--shorts-fill); }
.shorts-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--shorts-ink-3); }
.shorts-scene { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--shorts-line); }
.shorts-frame { width: 92px; height: 164px; border: 1px solid var(--shorts-ink-3); padding: 6px; font-size: 10.5px; line-height: 1.4; color: var(--shorts-ink-2); overflow: hidden; background: var(--shorts-panel); position: relative; }
.shorts-frame b { display: block; font-size: 11px; color: var(--shorts-ink); margin-bottom: 4px; }
.shorts-scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.shorts-scene-grid .is-full { grid-column: 1 / -1; }
.shorts-lab { display: block; font-size: 11.5px; color: var(--shorts-ink-3); }
.shorts-scene h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.shorts-scene .shorts-input { width: 100%; font-size: 13.5px; }
.shorts-scene .shorts-input.is-sec { width: 64px; }

.shorts-list-plain { margin: 6px 0; padding: 0; list-style: none; }
.shorts-list-plain li { padding: 7px 0; border-bottom: 1px solid var(--shorts-line); font-size: 13px; display: flex; gap: 12px; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.shorts-list-plain li.is-err { color: var(--shorts-red); }
.shorts-list-plain li.is-fix { color: var(--shorts-green); }
.shorts-list-plain li.is-acked { color: var(--shorts-ink-3); }

/* 넓은 화면 열 구성 */
.shorts-cols-signal { grid-template-columns: 44px 170px 64px minmax(0, 1fr) 96px; }
.shorts-cols-metric { grid-template-columns: minmax(0, 1.1fr) 132px minmax(0, 2fr); }
.shorts-cols-week { grid-template-columns: 96px 92px repeat(4, 64px) minmax(0, 1fr); }
.shorts-cols-month { grid-template-columns: 96px repeat(3, 64px) minmax(0, 1fr); }
.shorts-cols-prop { grid-template-columns: 30px minmax(0, 1fr) 150px 80px; }
.shorts-cols-slot { grid-template-columns: 40px 64px minmax(0, 1.6fr) 120px 150px minmax(0, 1fr); }
.shorts-cols-file { grid-template-columns: minmax(0, 1fr) auto; }
.shorts-cols-hist { grid-template-columns: 52px minmax(0, 1fr) 120px auto; }

/* 좁은 화면(390px 등): 단계 표시는 위로, 줄 목록은 쌓기 */
/* 10-30 5단계 초안 */
.shorts-draft { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 8px; }
.shorts-draft-player video { display: block; width: 270px; height: 480px; background: #0d0f12; object-fit: contain; }
.shorts-draft-blocked { box-sizing: border-box; width: 270px; min-height: 480px; padding: 18px 16px; border: 1px solid var(--shorts-line); display: flex; flex-direction: column; gap: 6px; }
.shorts-draft-blocked b { font-size: 14px; letter-spacing: 0.03em; }
.shorts-draft-blocked .shorts-issues { margin: 0; }
.shorts-veil { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 48px; min-height: 64px; background: var(--shorts-fill); border: 1px solid var(--shorts-line-2); color: var(--shorts-mute); font-size: 12px; letter-spacing: 0.03em; }
.shorts-booking-media .shorts-veil { width: 96px; height: 171px; }
.shorts-frame .shorts-veil { min-height: 0; height: 100%; }
.shorts-draft-info .shorts-sec { margin-top: 18px; }

/* 10-30 예약 소스(one OS 예약에서 받은 영상 · 사진) */
.shorts-booking { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 4px 0 18px; margin: 0 0 22px; border-bottom: 1px solid var(--shorts-line-2); }
.shorts-booking-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shorts-booking-menu { font-size: 17px; letter-spacing: 0.01em; }
.shorts-booking-consent { margin-top: 10px; }
.shorts-booking-consent p { margin: 0; font-size: 13px; }
.shorts-booking-consent .is-warn { color: var(--shorts-amber); font-weight: 600; }
.shorts-booking-consent .shorts-choices { margin: 6px 0 8px; }
.shorts-booking-media { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; max-width: 432px; }   /* 영상 · 사진이 많으면 4개씩 줄을 바꾼다 */
.shorts-booking-media figure { margin: 0; width: 96px; }
.shorts-booking-media a { display: block; }
.shorts-booking-media video, .shorts-booking-media img { display: block; width: 96px; height: 171px; object-fit: cover; background: var(--shorts-fill); border: 1px solid var(--shorts-line-2); }
.shorts-booking-media figcaption { font-size: 12px; color: var(--shorts-ink-3); padding-top: 5px; }
.shorts-booking-media figcaption b { color: var(--shorts-ink); }
.shorts-fit { color: var(--shorts-amber); }
.shorts-fit.is-ready { color: var(--shorts-green); font-weight: 600; }
.shorts-thumbs { display: flex; gap: 8px; margin-top: 8px; }
.shorts-thumbs figure { margin: 0; }
.shorts-thumbs img { display: block; width: 45px; height: 80px; object-fit: cover; border: 1px solid var(--shorts-line-2); }
.shorts-thumbs figcaption { font-size: 11px; color: var(--shorts-ink-3); padding-top: 2px; }
.shorts-frame.has-media { padding: 0; display: flex; background: var(--shorts-ink); border-color: var(--shorts-ink); }
.shorts-frame.has-media img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block; }
.shorts-frame.has-media img + img { border-left: 1px solid rgba(255, 255, 255, 0.7); }
.shorts-frame.has-media b { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 4px 6px; font-size: 10.5px; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); }

@media (max-width: 860px) {
  .shorts-booking { grid-template-columns: 1fr; }
  .shorts-draft { grid-template-columns: 1fr; }
  .shorts-top { padding: 14px 16px 10px; }
  .shorts-band { padding: 8px 16px; }
  .shorts-body { grid-template-columns: 1fr; }
  .shorts-rail { border-right: 0; border-bottom: 1px solid var(--shorts-line); padding: 6px 0; }
  .shorts-rail ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .shorts-rail li.is-later { display: none; }
  .shorts-step-later { display: flex; align-items: center; padding: 8px 6px; font-size: 11px; color: #b4b9c3; line-height: 1.3; }
  .shorts-step .is-long { display: none; }
  .shorts-step .is-short { display: inline; }
  .shorts-step { padding: 8px 6px; grid-template-columns: 1fr; font-size: 12.5px; }
  .shorts-step .shorts-step-state { grid-column: 1; font-size: 10.5px; }
  .shorts-step .shorts-step-name { line-height: 1.3; }
  .shorts-rail-note { display: none; }
  .shorts-main { padding: 20px 16px 64px; }
  .shorts-h1 { font-size: 20px; }
  .shorts-verdict { grid-template-columns: 1fr; gap: 14px; }
  .shorts-verdict-big { font-size: 24px; }
  .shorts-row { grid-template-columns: 1fr !important; gap: 2px; }
  .shorts-row.is-head { display: none; }
  .shorts-row .shorts-k { display: inline; font-size: 11px; color: var(--shorts-ink-3); margin-right: 6px; }
  .shorts-scene { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .shorts-frame { width: 64px; height: 114px; font-size: 9.5px; }
  .shorts-scene-grid { grid-template-columns: 1fr; }
  .shorts-detail { grid-template-columns: 1fr; gap: 2px; }
  .shorts-detail dd { margin-bottom: 8px; }
  .shorts-timeline > div { font-size: 9.5px; padding: 3px; }
  .shorts-groups .shorts-st { font-size: 15px; }
}

/* 소스 올리기 탭 · 부족 → 대안 (11-02) */
.shorts-rail-side { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--shorts-line); }
.shorts-src { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-top: 1px solid var(--shorts-line); }
.shorts-src-poster { border: 1px solid var(--shorts-line-2); padding: 0; background: var(--shorts-fill); width: 132px; height: 234px; cursor: pointer; display: block; }
.shorts-src-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shorts-src-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.shorts-src-note { margin: 0; font-weight: 600; }
.shorts-strip { display: flex; gap: 4px; }
.shorts-strip img { width: 44px; height: 78px; object-fit: cover; border: 1px solid var(--shorts-line-2); display: block; }
.shorts-src-view video { width: 220px; max-width: 100%; display: block; background: #000; margin-top: 6px; }
.shorts-src-view .shorts-photo-full { width: 260px; max-width: 100%; display: block; margin-top: 6px; }
.shorts-addbox { border-top: 1px solid var(--shorts-line-2); padding: 14px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.shorts-upform { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.shorts-file { font-size: 13px; }
.shorts-progress { display: flex; align-items: center; gap: 10px; }
.shorts-progress[hidden], .shorts-replace[hidden], .shorts-upform [hidden] { display: none; }
.shorts-meter { width: 220px; height: 6px; accent-color: var(--shorts-cobalt); }
.shorts-srcedit { display: flex; flex-direction: column; gap: 6px; }
.shorts-srcrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 0; border-top: 1px solid var(--shorts-line); }
.shorts-srcthumb { width: 27px; height: 48px; object-fit: cover; border: 1px solid var(--shorts-line-2); }
.shorts-inl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--shorts-ink-3); }
.shorts-gap { border-top: 1px solid var(--shorts-line-2); padding: 14px 0; }
.shorts-gap-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: 8px; }
.shorts-gap-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.shorts-gap-cols > div { min-width: 0; padding-left: 10px; border-left: 2px solid transparent; }
.shorts-gap-cols > div.is-chosen { border-left-color: var(--shorts-cobalt); }
.shorts-gap-cols p { margin: 4px 0; }
@media (max-width: 760px) {
  .shorts-src { grid-template-columns: 1fr; }
  .shorts-src-poster { width: 96px; height: 171px; }
  .shorts-gap-cols { grid-template-columns: 1fr; gap: 16px; }
}
/* 11-10 예약 영상 프로젝트 — 건너뛴 1~3단계(평가 · 제안 · 소스 계획) 흐리게 */
.shorts-step.is-skipped { opacity: .45; }
.shorts-step.is-skipped .shorts-step-state { color: var(--shorts-ink-3); }

/* 11-11 6단계 피드백 수정(예약 영상 프로젝트) */
.shorts-fb { margin-top: 20px; }
.shorts-fb .shorts-textarea { width: 100%; min-height: 72px; }
.shorts-fb-last { border: 1px solid var(--shorts-line); border-radius: 8px; padding: 10px 12px; margin: 8px 0 12px; }
.shorts-fb-last p { margin: 0 0 6px; }

/* 11-11 배경음악 줄 */
.shorts-music { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 14px; }
.shorts-music audio { height: 32px; max-width: 260px; }

/* 11-11 예약 영상 제안(키워드) */
.shorts-prop { border: 1px solid var(--shorts-line); border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.shorts-prop h3 { margin: 0 0 8px; font-size: 15px; }
.shorts-prop h3 small { font-weight: 400; color: var(--shorts-ink-2, inherit); }