:root{color-scheme:dark;--bg:#0b0f0d;--panel:#151a17;--line:#2b352f;--ink:#f1f6f3;--muted:#a8b5ad;--accent:#32dc7c;--warm:#ffd281;--ph:#868686;--panel2:#171e1a;--panel-empty:#171d19;--panel-bar:#151917;--panel-mute:#1b231e;--accent-ink:#123823;--accent-quiet:#0f281a;--raise:#1b2721;--r-card:16px;--r-block:14px;--r-bar:0;--dim:rgba(0,0,0,.5);--gap-card:16px}/* 기준 = 라이브 실측(docs) */ /* 🔴 11차-122 형 ⑦: "이 혜택 1 혜택이 이렇게 나와 있는 칸도 상하 여백이 있어야 되는데 너무 붙어 있잖아. 아 근데 이런 거 내가 하나하나 얘길 해야 되냐. 글로벌로 뭔가 똑같이 적용이 돼야 되는 거 아니냐?" 🔴 실측(01): 같은 층의 반복 카드인데 사이 간격이 넷 다 달랐다 — 혜택 2px · 상품 16px · 자료 칸 16px · 섹션 16px. → --gap-card 하나에서 나오게 한다. 한 자리를 고치면 다 같이 바뀐다. 🟡 2·3조 화면은 아직 이 토큰을 안 쓴다 — 쓰게 하려면 main 을 거쳐 내린다(그 조 파일이다). */ /* 11차-58: --raise 가 목업 화면(body.mockup)에서 미정의였다 — 정의가 dist/proto/pyeonseong-final.css:7 의 `body.proto-shell, .pyeon` 안에만 갇혀 있었다. var(--raise) 에 대체값이 없으면 그 선언이 통째로 무효가 되어 배경이 투명으로 떨어진다. 실측(1036×760): 01·02·05 모두 getComputedStyle(:root)["--raise"] === "" 였다. 쓰는 곳 22군데(host.css 11 · request.css 6 · script.css 4 · mockup.css 1)가 세 조에 걸쳐 있어 각 파일을 고치는 대신 :root 한 줄로 살린다. 값은 프로토가 쓰던 것 그대로. */ *{box-sizing:border-box}body.mockup{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif}button,input,textarea,select{font:inherit}button,a,input,textarea,select,summary{outline-offset:4px}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.workspace{max-width:none;margin:auto;padding:26px 30px 60px}.page-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;min-height:44px}.page-title small{font-size:12px;letter-spacing:.16em;color:var(--accent)}.page-title h1{font-size:30px;font-weight:750;margin:5px 0;line-height:1.65}.page-title p{color:var(--muted);margin:0}.badge{white-space:nowrap;font-size:13px;border:1px solid var(--line);border-radius:30px;padding:5px 12px;color:var(--muted)}h2{font-size:18px;font-weight:700;margin:0 0 14px}h3{font-size:16px;font-weight:700;margin:8px 0}p{margin:8px 0}.muted,.help{color:var(--muted);font-size:14px}.primary,.secondary{border-radius:8px;padding:10px 16px;border:1px solid var(--line);background:#203029;color:var(--ink);font-weight:650;line-height:1.4}/* 🔴 11차-77(2조 실측): 글자색이 토큰이 아니라 #082716 하드코딩이었다. --accent-ink 는 :root 에 정의만 있고 공통에서 0번 쓰이고 있었다(죽은 토큰). 03(.pyeon)만 var(--accent-ink)를 써서 달랐다 — .pyeon 이 덮개가 아니라 「제대로 쓰는 쪽」이었다. 값의 근거는 14 §1-1 라이브 실측(#123823)이고 #082716 은 어디서 왔는지 모르는 값이다. */ .primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.primary:hover{background:#64eba1}.secondary:hover{background:#2b4034}.panel,.fold{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;margin:16px 0} /* 11차-56 형 07-5: "오른쪽 패널은 밑으로 내려 있는 거야. 얘만 내려간 거야. 잡아라. 이거 글로벌로 똑같이." .panel 의 위 여백 16 을 우측 열 첫 패널이 그대로 먹고, .editor-grid{align-items:start} 라 끌어올려 주지 않았다. 그래서 화면마다 국소로 margin-top:0 을 붙여 왔고(.rq-side · .hs-side …) 07 만 그 수리가 없어 내려가 있었다. 실측(1036×760, 본문 첫 패널과의 차이): 01·02·05 = 0 · 07 = 16 · 06 은 3열이라 구조가 다르다. 격자 첫 줄은 본문·우측이 같은 높이에서 시작한다 — 한 벌로 여기서 잡는다. 🔴 본문 쪽도 같이 잡히지만 이미 0 이라 안 움직인다(위 실측). 국소 수리들은 각 조가 걷는다(24 G12). */ .editor-grid>.panel,.editor-grid>*>.panel:first-child{margin-top:0}.fold{padding:0}.fold summary{padding:15px 18px;cursor:pointer;font-size:15px;color:#cbdbd0;font-weight:650}.fold-content{padding:0 18px 20px}.notice{background:#1d3025;color:#d3e8da;border:1px solid #31513d;border-radius:10px;padding:14px 18px;font-size:14px;margin:14px 0}.notice.warning{background:#332b1d;border-color:#675337;color:#ffe1a8}.statusbar{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:16px 0;font-size:14px}.statusbar b{color:var(--accent)}.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}/* 11차-15: .plan-cards 는 기본 규칙이 아예 없어 grid 가 아니었다(1000px 질의 안에도 칸 수만 있고 display:grid 가 없다). 그래서 06 연출 화면이 카드 1줄 1장 = 이미지 962×1710 로 늘어져 세로 12,127px 가 됐다. 열 수는 폭이 정하게 둔다 */.plan-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}.plan-cards figure{margin:0}.plan-cards figure img{display:block;width:100%;height:auto;border-radius:8px}/* 11차-17 D2: 카드마다 채운 버튼을 두지 않고 카드 전체를 누르게 한다(24 B2) */.plan-card{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;font:inherit}.plan-card:hover{border-color:var(--accent)}.plan-cards figcaption{margin-top:8px;font-size:13px;color:var(--muted)}.preview-panel,.inspector,.timeline{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}@media(max-width:1000px){.workspace{padding:20px}.editor-grid,.direction-layout,.script-layout,.host-layout,.export-grid{grid-template-columns:1fr}.sticky{position:static}.inspector{max-width:none}.preview-stage{height:350px}.statusbar{flex-wrap:wrap}.page-title{align-items:flex-start}.page-title h1{font-size:26px}.playbar{flex-wrap:wrap}.plan-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}/* 11차-8: .project-card 규칙이 @media(max-width:600px) 안에 갇혀 있어 601px 이상에서 카드 테두리·안쪽 여백이 없고 이동 버튼이 카드 밖으로 떨어졌다. 최상위로 올린다 */.project-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px;overflow:hidden}.project-card article{border:0!important;box-shadow:none!important}.project-card>.primary{margin-top:12px}.project-card .source-part img{height:140px;object-fit:cover}/* 11차-10: 아래 세 덩이(.request-layout · .home-projects · .final-placeholder)가 @media(max-width:600px) 안에 갇혀 있었다. *//* 601px 이상에서 2단 배치가 통째로 죽어 있었고, 그 안에 중첩된 @media(max-width:1000px)도 600px 이하에서만 사는 죽은 코드였다. *//* naver-main 판정으로 최상위로 올리고, 중첩됐던 1000px 질의는 원래 의도대로 최상위 1000px 질의로 옮긴다(좁은 폭 1열은 필요한 규칙이다). *//* 11차-12: 값이 270·24 여서 14 기준(우측 330 · 사이 18)과 달랐다. 지금은 쓰는 화면이 없지만 이름이 request- 라 붙이면 우측이 60px 좁아진 채 통과한다(naver-main 판정) */.request-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.request-layout .source-part{margin-bottom:20px}/* 11차-10: 실서비스 저장본 dist/before/home.html 의 "grid gap-4 sm:grid-cols-[repeat(auto-fill,minmax(420px,1fr))]" 그대로. 열 수는 폭이 정한다(24 A1) */.home-projects{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}/* 11차-36: 빈 상태 박스 — 라이브 #171d19 · 테두리 1px · r16 */.final-placeholder{height:320px;background:var(--panel-empty);border:1px solid var(--line);border-radius:var(--r-card);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#c2d7c9;text-align:center;margin-bottom:18px}.final-placeholder small{color:var(--muted);font-size:13px;margin-top:10px}@media(max-width:1000px){.request-layout{grid-template-columns:1fr}}@media(max-width:600px){.project-card>.primary{width:100%}.workspace{padding:14px}.page-title .badge{display:none}} .studio-brand button{background:none;color:var(--ink);border:0}.studio-brand span{font-size:12px;color:var(--muted);margin-left:7px}.journey button{flex:1;white-space:nowrap;background:none;border:0;color:var(--muted);font-size:13px;padding:12px 9px;border-bottom:2px solid transparent}.mockup[data-page^="editing"] .editor-grid{align-items:stretch}.mockup[data-page^="editing"] .inspector{overflow:auto}.mockup[data-page^="editing"] .preview-panel{display:flex;flex-direction:column}.mockup[data-page^="editing"] .preview-stage{height:auto;flex:1;min-height:0}.mockup[data-page^="editing"] .preview-stage img{height:calc(100% - 28px)}.mockup[data-page^="editing"] .timeline{margin-top:10px}/* 🔴 11차-114 형: "헤드 타이틀 바로 밑에 시작하는 점과 헤드 타이틀 간격이 이게 일정하지가 않네. 다 통일 시켜야 되는데" 12px → 22px. 정본은 위 .page-title{margin-bottom:22px} 이고 여섯 화면이 그걸 쓴다 — 덮개를 값에 맞춘다. ⚠️ 아래 .mockup[data-page="editing"] .page-title{flex:none;…;margin-top:0} 은 다른 규칙이다(2조). 안 건드린다. */ .mockup[data-page^="editing"] .page-title{margin-bottom:22px}.mockup[data-page^="editing"] .page-title h1{font-size:25px}.mockup[data-page^="editing"] .page-title p{font-size:14px}@media(max-width:1000px){.mockup[data-page^="editing"] .inspector{height:auto;max-height:none}} /* 상단바 — 원본(로고·주메뉴·테마·계정·로그아웃) 복원 */ .studio-brand{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; margin:-10px 0 0;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px} .brand-left,.brand-right{display:flex;align-items:center;gap:14px;min-width:0} .brand-home{background:none;border:0;color:inherit;cursor:pointer;padding:0;white-space:nowrap} .studio-brand b{color:var(--accent);font-size:19px} .global-nav{display:flex;gap:2px} .global-nav button{background:none;border:0;color:var(--muted);cursor:pointer;padding:5px 9px;border-radius:7px;font-size:13px} .global-nav button:hover{background:rgba(255,255,255,.07);color:#e7f5ec} .theme-toggle{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden} .theme-toggle button{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px 10px;font-size:12px} .theme-toggle button.on{background:#183525;color:#7eecac} .linklike{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px} .account{color:var(--muted);white-space:nowrap} .account small{opacity:.65} /* 프로젝트 이름 — 원본 방송 정보 팝업 자리. ChatGPT/Claude 처럼 상단에 둔다 */ .project-bar{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 0 10px} .project-name{background:none;border:0;color:inherit;cursor:pointer;padding:0;display:flex;align-items:baseline;gap:6px} .project-name b{font-size:17px;font-weight:700} .project-name span{color:var(--muted);font-size:15px} .project-name i{color:var(--muted);font-style:normal;font-size:11px} .project-name:hover b{color:var(--accent)} .project-meta{color:var(--muted);font-size:12px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} /* 제작 단계 내비 — 원본처럼 상태(확정 완료·현재 단계·예정 단계)와 잠금을 표시 */ .journey{display:flex;overflow:auto;border-bottom:1px solid var(--line);margin:0 0 18px;gap:0} .journey button{display:flex;flex-direction:column;gap:3px;align-items:flex-start;white-space:nowrap; padding:9px 14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);cursor:pointer} .journey button em{font-style:normal;font-size:13px;font-weight:600} .journey button small{font-size:10.5px;opacity:.7;display:flex;align-items:center;gap:3px} .journey button.done em{color:#b9d6c4} .journey button.done small::before{content:"✓";color:var(--accent)} .journey button.now{background:#183525;color:#7eecac;border-bottom-color:var(--accent)} .journey button.now em{font-weight:750} .journey button.locked{opacity:.45;cursor:not-allowed} .journey button.locked small::before{content:"🔒"} .journey button.viewing{box-shadow:inset 0 0 0 1px var(--line)} .journey button:hover:not(.locked){background:rgba(255,255,255,.05)} /* ── 06 영상 편집 — 원본 구조로 재작성 ───────────────────────── */ /* 화면 탭: 구간 검토 / 컷 작업 / 최종 영상 (원본 3탭) */ /* 내보내기는 섹션이 아니라 기능 버튼으로 자리 잡는다 (지시 5) */ .export-btn{margin-left:auto;padding:9px 16px;border:1px solid var(--line);border-radius:9px; background:none;color:#c7d8cc;cursor:pointer;font-size:13.5px;display:inline-flex;gap:6px;align-items:center} .export-btn:hover{background:rgba(255,255,255,.07);color:#e7f5ec} /* 타임라인: 원본 트랙 구성 + 확대/축소. 폭이 시간에 비례한다 */ .mockup[data-page="editing"] .timeline{margin-top:18px;padding:16px} .timeline header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap} .timeline header h2{margin:0 0 3px;font-size:16px} .tl-tools{display:flex;gap:6px;flex-wrap:wrap} .tl-tools button{padding:5px 11px;border:1px solid var(--line);border-radius:7px;background:none;color:var(--muted);cursor:pointer;font-size:12px} .tl-tools button:hover{background:rgba(255,255,255,.07);color:#e7f5ec} .tl-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 6px;font-size:12.5px;color:var(--muted)} .tl-status b{color:#e7f5ec} .tl-status progress{width:150px;height:6px} .tl-scroll{overflow-x:auto;padding-bottom:6px} .tl-inner{position:relative;min-width:100%} /* 🔴 11차-119 — 아래 열한 규칙은 `[data-page="editing"]` 에 걸려 있었는데 **editing 은 이 클래스들을 하나도 안 쓴다**(`.tl-*` 를 쓴다). 브라우저에 물어 확인했다 — `document.querySelectorAll(셀렉터).length` 가 전부 0. 🔴 거꾸로 이 클래스를 쓰는 `editing-cut` 은 `data-page="editing-cut"` 이라 **하나도 못 받았다.** 그래서 컷 그림이 원본 1008×1792 로 늘어져 **화면 세로가 16,572px** 이 됐다(다른 2조 화면은 900~1,177px). 🔴 「넓힌다(^=)」가 아니라 **「옮긴다」**다 — editing 에 미치는 영향이 0 이라 판단할 것이 없다. 🔴 `grep` 으로는 안 잡힌다: 규칙도 있고 클래스도 있는데 **서로 안 만난다.** */ .mockup[data-page="editing-cut"] .track{margin:8px 0;gap:10px} .mockup[data-page="editing-cut"] .track>strong{width:54px;font-size:12px;color:var(--muted);flex:none} .mockup[data-page="editing-cut"] .ruler{display:flex;flex:1;font-size:10.5px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:3px} .mockup[data-page="editing-cut"] .ruler span{flex:none;border-left:1px solid var(--line);padding-left:3px} .seg-block{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 10px;font-size:11.5px; background:#1b3527;border:1px solid var(--accent);border-radius:5px;color:#b9e8cb;white-space:nowrap;overflow:hidden} .mockup[data-page="editing-cut"] .track-area{height:28px} .mockup[data-page="editing-cut"] .clip-strip{gap:3px;overflow:visible} .mockup[data-page="editing-cut"] .clip{flex:none;min-width:22px;overflow:hidden;padding:0;position:relative} .mockup[data-page="editing-cut"] .clip img{width:100%;height:var(--cliph,44px);object-fit:cover;display:block} /* 🔴 11차-119 — 규칙을 옮기자 이 라벨이 **말없이** 31~35px 잘렸다(넘침 자가 「말없이 가로 잘림」으로 잡았다). 컷 칸이 12px 이라 「컷 1 · 1.57초」는 애초에 안 들어간다. **말줄임을 붙여 잘린 것을 말하게 한다** — 형 지적 패턴은 「밖으로 삐져나가는 것」과 「말없이 잘리는 것」이지 말줄임이 아니다(overflow-lib 주석). 🟡 전체 글은 `title` 속성에 있다(hover 로 보인다). */ .mockup[data-page="editing-cut"] .clip span{position:absolute;left:0;right:0;bottom:0;font-size:10px;padding:1px 3px; text-overflow:ellipsis; background:rgba(0,0,0,.55);white-space:nowrap;overflow:hidden} .mockup[data-page="editing-cut"] .clip.selected{outline:2px solid var(--accent);outline-offset:-2px} .mockup[data-page="editing-cut"] .audio-track{flex:1;height:28px} /* 🔴 11차-119 — 아래 셋은 **규칙이 아예 없었다**(덮는 게 아니라 없는 것을 만드는 것이라 A11 에 안 걸린다). 셋 다 `editing-cut` 한 화면에서만 쓰는 클래스다. 캡처가 잡았다: `preview-tabs` 「현재 결과새 결과 비교저장된 이미지 미리보기」 — 탭 글자가 붙어 한 덩이로 읽혔다 `action-tabs` 「배치다시 만들기대사」 — 같은 병 `upload` [비교 화면 열기] 버튼 위에 「직접 만든 파일로 교체」가 겹쳤다 🟡 「읽을 수 있다」까지만 한다(plan-2 판정) — 모양을 editing 과 똑같이 맞추지 않는다. */ .mockup[data-page="editing-cut"] .preview-tabs, .mockup[data-page="editing-cut"] .action-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px} .mockup[data-page="editing-cut"] .preview-tabs>*, .mockup[data-page="editing-cut"] .action-tabs>*{flex:none;font-size:13px;padding:5px 10px; border:1px solid var(--line);border-radius:8px;background:none;color:var(--muted)} .mockup[data-page="editing-cut"] .preview-tabs>.active, .mockup[data-page="editing-cut"] .action-tabs>.active{color:var(--ink);border-color:var(--accent)} .mockup[data-page="editing-cut"] .upload{display:block;margin-top:10px;font-size:var(--fs-min);color:var(--muted)} .mockup[data-page="editing-cut"] .upload input{display:block;margin-top:6px} @media(max-width:1000px){.mockup[data-page="editing"] .editor-grid{grid-template-columns:1fr} .subtitle-panel{max-height:340px}} /* 좌우 패널 높이를 맞춘다 (지시 14) */ .mockup[data-page="editing"] .editor-grid{align-items:stretch} .mockup[data-page="editing"] .subtitle-panel, .mockup[data-page="editing"] .preview-panel{height:560px} .mockup[data-page="editing"] .preview-panel{display:flex;flex-direction:column} .mockup[data-page="editing"] .preview-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center} /* 🔴🔴 11차-125 — 「옛 GNB 정리」 아홉 줄을 걷었다. plan-2 가 찾고 main·dev-2 가 실측했다. 그 규칙들은 **코덱스 원본의 상단 GNB** 를 잡으려고 쓴 것인데 그 GNB 는 진작 없어졌다. 🔴 그런데 셀렉터가 `… header` 라서 **그 자리에 새로 생긴 header 둘을 잡고 있었다**:
제목 줄
🔴 11차-125 A 에서 만든 「어디에 넣을까요」 모달 머리 실측(브라우저에 `querySelectorAll` 로 물었다): header{height:56px} → 제목 줄 높이를 잡고 있었다 header *:not(.pop *){12.5px} → 🔴 **모달 제목 h2 가 12.5px** — 제목이 본문 크기였다 header > *{height:auto} → h1 이 y 18 로 밀렸다 .order-last · .ml-2 · .shrink-0.rounded-xl → 🟢 0건(죽은 규칙) 🔴 그리고 첫 줄이 `.mockup[data-page="editing"]` 로 **본문 없이 끊겨** 있어서 바로 다음 규칙과 한 셀렉터로 붙어 있었다(`… editing"] .mockup[data-page="editing"] header .order-last`). 그래서 그 규칙만 우연히 0건이었다 — **고쳐서 살리지 않고 같이 걷는다.** 🔴 오늘 축: **「죽은 규칙이 죽지 않고 다른 것을 잡는다.」** 잡던 요소가 사라지면 규칙도 죽는 줄 알지만 셀렉터가 넓으면 그 자리에 새로 생긴 요소를 잡는다. 이름이 같으면(`header`) 갈아탄다. 🔴 에러도 빨간불도 없다 — 「초록으로 낡는 자」의 CSS 판이다. */ /* ── 타임라인 — 미니멀 재설계 (지시 16·17) ──────────────────────── 글자는 구간 제목만. 클립은 장면만 보여준다. 확대는 슬라이더. */ .tl{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-top:14px;overflow:hidden} .tl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:8px 12px;border-bottom:1px solid var(--line)} .tl-ops{display:flex;gap:6px} .tl-ops button{width:28px;height:28px;border:1px solid var(--line);border-radius:7px;background:none; color:var(--muted);cursor:pointer;font-size:12px;line-height:1} .tl-ops button:hover{background:rgba(255,255,255,.07);color:#e7f5ec} .tl-ops button[disabled]{opacity:.35;cursor:not-allowed} .tl-zoom{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px} .tl-zoom input{width:132px;accent-color:var(--accent)} .tl-scroll{overflow-x:auto;overflow-y:hidden} .tl-body{position:relative;width:calc(100% * var(--zoom));min-width:100%;padding:0 0 10px} .tl-ruler{position:relative;height:20px;border-bottom:1px solid var(--line);margin-left:72px} .tl-ruler span{position:absolute;top:0;font-size:9.5px;color:var(--muted);padding-left:3px; border-left:1px solid var(--line);height:100%;line-height:20px;font-variant-numeric:tabular-nums} .tl-ruler span.minor{border-left-color:rgba(255,255,255,.07)} .tl-head{position:absolute;top:0;bottom:8px;left:0;width:1px;background:#ff6b5a;z-index:6; margin-left:72px;pointer-events:none} .tl-head i{position:absolute;top:-1px;left:-4px;width:9px;height:9px;border-radius:50%;background:#ff6b5a} .tl-row{display:flex;align-items:center;gap:0;margin-top:6px} .tl-lane{position:relative;flex:1;height:26px;background:#0d1711;border-radius:4px} .tl-lane-clips{height:40px} .tl-lane-wave{height:20px} .tl-lane>*{position:absolute;top:2px;bottom:2px;border:0;padding:0;cursor:pointer} /* 🔴 11차-111 research 눈 06-5 — 구간 1 라벨이 **말줄임 없이 뚝 끊겼다.** 실측: 글 454px · 칸 124px — **330px 이 통째로 잘려** 「1. 소닉슬립 모션베드 전동」에서 끝났다. `overflow:hidden` 인데 `text-overflow:clip` 이라 잘렸다는 표시조차 없었다(형 27건의 「잘려서 뜻을 잃음」). → 한 줄로 두고 말줄임을 준다. 칸이 좁아도 **잘렸다는 것**은 보인다. */ .tl-seg{background:#18291f;border:1px solid rgba(126,236,172,.35) !important;border-radius:4px; display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .tl-seg > *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .tl-seg span{font-size:10.5px;color:#a9d8bd;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tl-seg[aria-pressed="true"]{border-color:var(--accent) !important} .tl-banner{background:#3a2c14;border:1px solid #c9922f !important;border-radius:4px} .tl-dircut{background:#1d2740;border:1px solid #5b7cc4 !important;border-radius:4px} .tl-grip{position:absolute;top:0;bottom:0;width:6px;background:#c9922f;opacity:.9;cursor:ew-resize} .tl-grip-l{left:0;border-radius:4px 0 0 4px}.tl-grip-r{right:0;border-radius:0 4px 4px 0} .tl-clip{border-radius:3px;overflow:hidden;background:#0a1410; box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.09)} .tl-clip img{width:100%;height:100%;object-fit:cover;display:block} .tl-clip[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent);z-index:3} .tl-lane-wave span{background:repeating-linear-gradient(90deg,rgba(126,236,172,.55) 0 1px,transparent 1px 3px); border-radius:2px;pointer-events:none} /* 🔴 위와 같은 뿌리다(11차-125) — 이 둘도 옛 GNB 버튼을 잡던 것인데 지금은 제목 줄과 모달 닫기 버튼을 잡고 있었다(실측 3건). 같이 걷는다. 🔴 「같은 일을 하는 자리가 몇 군데인가」(7-4): plan-2 가 142~157 을 세었는데 여기 208~210 이 더 있었다 — grep 으로 한 번 더 훑어서 찾았다. */ /* ══ 06 영상 편집 ══════════════════════════════════════════════ 타이포: 최소 12 · 메타 12 · 본문/버튼 13 · 제목 15 · 화면 제목 20 (지시 3) */ .mockup[data-page="editing"]{--fs-min:12px;--fs-meta:12.5px;--fs-base:13px;--fs-panel:15px} .ico{width:16px;height:16px;flex:none} .ico-sm{width:13px;height:13px} /* ── 타이틀 줄 (지시 14·15) ── */ .mockup[data-page="editing"] .page-title{display:flex;align-items:flex-end;justify-content:space-between; gap:16px;margin-top:14px;margin-left:0;margin-right:0} /* 🔴 margin-bottom 을 여기서 선언하지 않는다 — 제목 줄 아래 간격은 공통 .page-title 이 정한다(A11). 단축 margin 으로 적으면 0 도 「선언」이라 공통을 덮는다(2026-09-20 실측: ③가 0px 이 됐다). */ .mockup[data-page="editing"] .page-title h1{font-size:20px;font-weight:700;margin:0} .title-sub{margin:4px 0 0;font-size:var(--fs-meta);color:var(--muted)} /* 11차-52(32 §2-1): 제목 줄 오른쪽 = [프로젝트명(잘림)] [주 행동]. 주 행동이 제일 오른쪽이다. 좁은 폭에서 긴 프로젝트명이 버튼을 밀어내면 안 된다 — 줄어드는 건 프로젝트명 쪽이다. 형이 06에서 「버튼 글자가 삐져나간다」를 이미 지적하셨다. 1036 에서 재야 걸린다. */ /* 🔴 11차-72(2조 실측): flex:1 1 auto + text-align:right 라 **박스가 남은 폭을 다 먹고** 글자만 오른쪽 끝으로 갔다 — 05 는 h1 끝에서 575px, 06 은 306px 떨어져 「센터 정렬」로 보였다. 02·07 은 각자 .hs-proj · .fn-proj 로 0 1 auto 를 덮어 멀쩡했다(그래서 grep 으로는 안 보였다). text-align:right 는 그대로 둔다 — 박스가 글자만큼이면 그게 뜻을 갖는다. */ .title-proj{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:13px;font-weight:600;color:var(--muted);text-align:right} /* 🔴 11차-128 형: "규칙이 없으니까 너무 별로네 … 다른 애들도 다 동일하게 있어야지." 제목 줄 상태 한 자리. 값은 data-steps 에서 나온다(shell.js) — 화면마다 따로 적지 않는다. */ /* 🔴 11차-136 형 ⑱: 잎 요소 높이를 한 벌로 — `.title-state` 만 22 였다. 실측(모양으로 찾았다 · 이름으로는 한 벌도 안 모인다): 같은 부류가 전부 **h24** 다 — 03 `.no`·`.hero` · 06 `.ptag`·`.cand-tag`. `.title-state` 하나만 22. 🟢 `min-height` 가 아니라 **패딩**으로 올린다 — `line-height:1` 과 짝이라 계산이 한 자리에 모인다 (12 + 5×2 + 테두리 2 = 24). 🔴 화면별로 덮지 않는다 — 03·05·06 이 **같은 규칙 하나**를 쓴다(A11 · 덮는 데 0건 확인). */ .title-state{flex:none;font-size:12px;font-weight:650;line-height:1;padding:5px 9px;border-radius:999px; border:1px solid var(--line);color:var(--muted);background:var(--panel2)} .title-state[data-state="now"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)} .title-state[data-state="done"]{color:#b9e8cb;border-color:#31513d;background:var(--accent-quiet)} .page-title .title-l{flex:1 1 auto;min-width:0} .page-title .rq-head-r>button,.page-title .sc-head-r>button,.page-title .fn-head-r>button{flex:none} .export-wrap{position:relative} .export-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:10px; border:1px solid rgba(126,236,172,.35);background:#183525;color:#7eecac;cursor:pointer; font-size:var(--fs-base);font-weight:650} .export-btn:hover{background:#1d4430} /* ── 3열: 목록 · 미리보기 · 속성 (지시 18) ── */ .mockup[data-page="editing"] .editor-grid{display:grid; grid-template-columns:minmax(210px,300px) minmax(280px,1fr) minmax(230px,290px); gap:12px;align-items:stretch;margin:0 0 12px} .col-list,.col-preview,.col-props{height:580px;display:flex;flex-direction:column;min-width:0; border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden} /* 좌: 목록 */ .list-tabs{display:flex;gap:18px;padding:12px 16px 0;border-bottom:1px solid var(--line)} .list-tabs button{padding:0 0 9px;border:0;border-bottom:2px solid transparent;background:none; color:var(--muted);cursor:pointer;font-size:var(--fs-base);font-weight:600} .list-tabs button.active{color:#7eecac;border-bottom-color:var(--accent)} .list-search{padding:10px 14px 8px} .list-search input{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:8px; background:#0d1711;color:inherit;font-size:var(--fs-meta)} .list-body{flex:1;min-height:0;overflow:auto;padding:0 8px 10px} .seg-head{position:sticky;top:0;z-index:2;display:flex;align-items:baseline;gap:8px;margin:0;padding:7px 8px; background:#101c15;border-bottom:1px solid var(--line);font-size:var(--fs-min);font-weight:700;color:#a9d8bd; white-space:nowrap;overflow:hidden} .seg-head b{overflow:hidden;text-overflow:ellipsis;min-width:0} .seg-head small{flex:none;margin-left:auto;font-weight:500;color:var(--muted);font-size:var(--fs-min)} .row{display:grid;grid-template-columns:44px 1fr;gap:4px 10px;align-items:start;width:100%;text-align:left; padding:8px;border:1px solid transparent;border-radius:8px;background:none;color:inherit;cursor:pointer} .row:hover{background:rgba(255,255,255,.05)} .row.selected{background:#152a1e;border-color:var(--accent)} .row-time{font-size:var(--fs-min);color:var(--accent);font-variant-numeric:tabular-nums;padding-top:2px} .row-text{font-size:var(--fs-base);line-height:1.5} .row-text i{color:var(--muted);font-style:normal} .row-clip{grid-template-columns:44px 62px 1fr auto;align-items:center} .row-clip img,.row-swatch{width:62px;height:36px;border-radius:5px;display:block;object-fit:cover} .row-swatch.tag-banner-bg{background:linear-gradient(135deg,#c9922f,#8a6318)} .row-body b{display:block;font-size:var(--fs-base);font-weight:600} .row-body small{display:block;font-size:var(--fs-min);color:var(--muted);margin-top:2px} .row-tag{font-size:var(--fs-min);padding:2px 7px;border-radius:999px;white-space:nowrap} .tag-video,.tag-lip{background:rgba(126,236,172,.14);color:#8fe0b3} .tag-dir{background:rgba(91,124,196,.2);color:#9db4e6} .tag-banner{background:rgba(201,146,47,.18);color:#e0b563} /* 가운데: 미리보기 (탭 없음 — 선택이 곧 미리보기, 지시 19) */ .col-preview .stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center; background:#08100c;margin:14px;border-radius:10px;padding:10px} .col-preview .stage img{max-height:100%;max-width:100%;object-fit:contain;border-radius:6px} .vbar{display:flex;align-items:center;gap:12px;padding:0 14px 14px} .vbtns{display:flex;gap:6px;align-items:center} .vbtn{width:30px;height:30px;flex:none;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:8px;background:none;color:#c7d8cc;cursor:pointer} .vbtn:hover{background:rgba(255,255,255,.08);color:#e7f5ec} .vbtn-main{width:34px;height:34px;background:#183525;border-color:rgba(126,236,172,.4);color:#7eecac} .vtime{font-size:var(--fs-min);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .vtime b{color:#e7f5ec}.vtime i{margin:0 4px;font-style:normal;opacity:.5} #v-scrub{flex:1;min-width:60px;accent-color:var(--accent)} /* 우: 속성 패널 — 선택한 것의 속성만 (지시 13·18) */ .col-props{padding:0} .props-top{padding:14px 14px 10px;border-bottom:1px solid var(--line)} .props-kind{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-min);padding:3px 9px; border-radius:999px;background:rgba(126,236,172,.14);color:#8fe0b3;margin-bottom:8px} .props-kind.banner{background:rgba(201,146,47,.18);color:#e0b563} .props-kind.seg{background:rgba(255,255,255,.08);color:#c7d8cc} .props-top h2{margin:0;font-size:var(--fs-panel);font-weight:700} .props-top p{margin:5px 0 0;font-size:var(--fs-min);color:var(--muted)} .props-body{flex:1;min-height:0;overflow:auto;padding:12px 14px} .props-tabs{display:flex;gap:4px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none} .props-tabs button{flex:none;white-space:nowrap;padding:5px 9px;border:1px solid var(--line);border-radius:7px; background:none;color:var(--muted);cursor:pointer;font-size:var(--fs-min)} .props-tabs button.on{background:#183525;border-color:var(--accent);color:#7eecac} .props-body label{display:block;font-size:var(--fs-min);color:#c7d8cc;margin:0 0 10px} .props-body input[type=text],.props-body input[type=number]{width:100%;margin-top:5px;padding:7px 9px; border:1px solid var(--line);border-radius:7px;background:#0d1711;color:inherit;font-size:var(--fs-base)} .field2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .props-foot{padding:12px 14px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap} .props-foot button{flex:1;min-width:84px;padding:9px 10px;border-radius:8px;border:1px solid var(--line); background:none;color:#d6e6db;cursor:pointer;font-size:var(--fs-base)} .props-foot button.main{background:#2f8f5b;border-color:#3fbd79;color:#fff;font-weight:600} .props-foot button:hover{filter:brightness(1.12)} .props-empty{padding:20px 16px;font-size:var(--fs-meta);color:var(--muted);line-height:1.6} /* ── 타임라인 ── */ .tl{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden} .tl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px; border-bottom:1px solid var(--line)} .tl-left,.tl-right{display:flex;align-items:center;gap:9px;flex:none;position:relative} .tlb{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--line); border-radius:8px;background:none;color:#c7d8cc;cursor:pointer;font-size:var(--fs-meta);white-space:nowrap} .tlb:hover:not([disabled]){background:rgba(255,255,255,.08);color:#e7f5ec} .tlb[disabled]{opacity:.3;cursor:not-allowed} .tlb.ico-only{width:30px;padding:0;justify-content:center} .tlb-play{width:32px;padding:0;justify-content:center;background:#183525;border-color:rgba(126,236,172,.4);color:#7eecac} .tl-clock{font-size:var(--fs-min);color:var(--muted);font-variant-numeric:tabular-nums} .tl-clock b{color:#e7f5ec}.tl-clock i{margin:0 4px;font-style:normal;opacity:.5} .tl-div{width:1px;height:18px;background:var(--line)} .tl-ops{display:flex;gap:5px;flex:none} .tl-zoom{display:flex;align-items:center;gap:8px;color:var(--muted)} .tl-zoom input{width:120px;accent-color:var(--accent)} .tl-scroll{overflow-x:auto;overflow-y:hidden} .tl-body{position:relative;width:calc(100% * var(--zoom));min-width:100%;padding:0 0 12px} .tl-ruler{position:relative;height:22px;border-bottom:1px solid var(--line);margin-left:72px} .tl-ruler span{position:absolute;top:0;font-size:var(--fs-min);color:var(--muted);padding-left:4px; border-left:1px solid var(--line);height:100%;line-height:22px;font-variant-numeric:tabular-nums} .tl-head{position:absolute;top:0;bottom:10px;left:0;width:1px;background:#ff6b5a;z-index:8;margin-left:72px;pointer-events:none} .tl-head i{position:absolute;top:-1px;left:-4px;width:9px;height:9px;border-radius:50%;background:#ff6b5a} .tl-row{display:flex;align-items:center;margin-top:7px} .tl-lane{position:relative;flex:1;height:30px;background:#0d1711;border-radius:5px} .tl-lane-dir{height:38px} .tl-lane-clips{height:54px} .tl-lane-wave{height:28px;background:#0a1410} .tl-lane>*{position:absolute;top:2px;bottom:2px;border:0;padding:0;cursor:pointer} .tl-seg{background:#18291f;box-shadow:inset 0 0 0 1px rgba(126,236,172,.3);border-radius:5px; display:flex;align-items:center;overflow:hidden} .tl-seg span{font-size:var(--fs-min);color:#a9d8bd;padding:0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tl-seg[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent)} /* 클립: 썸네일을 반복해 채운다 — 한 장을 늘리지 않는다 (지시 13) */ .tl-clip,.tl-dircut{border-radius:4px;overflow:hidden;background-repeat:repeat-x;background-position:left center; background-size:auto 100%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)} .tl-dircut{box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(91,124,196,.75)} .tl-clip[aria-pressed="true"],.tl-dircut[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent);z-index:4} .tl-banner{background:linear-gradient(135deg,#3a2c14,#241a0c);box-shadow:0 0 0 1px #c9922f;border-radius:4px; display:flex;align-items:center;justify-content:center;overflow:hidden} .tl-banner span{font-size:var(--fs-min);color:#e0b563;white-space:nowrap;overflow:hidden;padding:0 8px} .tl-banner[aria-pressed="true"]{box-shadow:0 0 0 2px #f0c163} .tl-grip{position:absolute;top:0;bottom:0;width:5px;background:#c9922f;cursor:ew-resize} .tl-grip-l{left:0}.tl-grip-r{right:0} .tl-lane-wave .wave{position:absolute;inset:2px 0;background-repeat:repeat-x;background-size:auto 100%; background-position:left center;pointer-events:none} /* 3열은 최대한 버틴다. 정말 좁아질 때만 속성 패널이 아래로 내려간다. */ @media(max-width:820px){.mockup[data-page="editing"] .editor-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .col-props{grid-column:1 / -1;height:auto;max-height:320px}} @media(max-width:620px){.mockup[data-page="editing"] .editor-grid{grid-template-columns:1fr} .col-list{height:320px}} .props-note{margin:0 0 10px;font-size:var(--fs-min);color:var(--muted);line-height:1.6} .props-note b{color:#d6e6db} .kinds{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px} .kind{padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:none;color:var(--muted); cursor:pointer;font-size:var(--fs-min)} .kind.on{background:#183525;border-color:var(--accent);color:#7eecac} .props-body textarea{width:100%;margin-top:5px;padding:8px 9px;border:1px solid var(--line);border-radius:7px; background:#0d1711;color:inherit;font-size:var(--fs-meta);line-height:1.6;resize:vertical;font-family:inherit} .cnt{display:block;text-align:right;color:var(--muted);font-size:var(--fs-min);margin-top:4px} .script{margin:0 0 10px;padding:10px 12px;border-left:2px solid var(--accent);background:#0d1711; border-radius:0 7px 7px 0;font-size:var(--fs-base);line-height:1.6} /* 후보(영상 이력·이미지)는 장면이 보여야 고를 수 있다 — 썸네일을 키운다 (지시 4) */ .cands{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px} .cand{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:9px; overflow:hidden;background:#0a1410;cursor:pointer} /* 🔴 11차-116 — 립싱크 결과는 영상이라 `