.jb-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;padding:28px 32px;border-radius:22px;background:linear-gradient(135deg,#0B1220 0%,#0E1A2E 55%,#0B2440 100%);color:#fff;box-shadow:0 24px 50px -24px rgba(0,40,80,.6);margin-bottom:18px}
.jb-hero.fin{background:linear-gradient(135deg,#0B1A16,#0E2A22 60%,#0B3A2A)}
.jb-glow{position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(0,157,232,.35),transparent 65%);animation:jbG 6s ease-in-out infinite alternate;pointer-events:none}@keyframes jbG{to{transform:translate(-60px,40px) scale(1.15)}}
.jb-ring{position:relative;flex-shrink:0}.jb-ring-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}.jb-ring-c b{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1}.jb-ring-c small{font-size:16px;margin-left:2px;color:#9AD8F7}.jb-ring-c span{font-size:11px;color:#7A8BA3;margin-top:4px}
.jb-hero-t{position:relative;min-width:0}.jb-eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;color:#9AD8F7;font-weight:600}.jb-hero h1{margin:6px 0 18px;font-size:26px;letter-spacing:-.03em}
.jb-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.08);border-radius:14px;overflow:hidden;max-width:620px}.jb-stats>div{background:rgba(11,18,32,.6);padding:12px 16px;display:grid;gap:2px}.jb-stats b{font-size:20px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}.jb-stats small{font-size:13px;color:#7A8BA3;font-weight:500}.jb-stats span{font-size:11px;color:#7A8BA3}
.jb-hero-a{position:relative;display:grid;gap:8px;justify-items:stretch;min-width:190px}.jb-ghost{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:none!important}.jb-ghost:hover{background:rgba(255,255,255,.14)!important}.jb-note{font-size:11px;color:#7A8BA3;text-align:center}
.jb-pipe{display:flex;align-items:center;padding:18px 22px;background:#fff;border:1px solid var(--v-line);border-radius:18px;box-shadow:var(--sh-2);margin-bottom:20px;overflow-x:auto}
.jb-node{display:grid;justify-items:center;gap:6px;min-width:96px;text-align:center}.jb-node .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#F1F3F5;color:#737B89;transition:all .3s}.jb-node b{font-size:13px;color:var(--v-mute);white-space:nowrap}.jb-node em{font-style:normal;font-size:11px;color:var(--v-faint);font-variant-numeric:tabular-nums}
.jb-node.done .ic{background:linear-gradient(180deg,#14A9F0,#0096DF);color:#fff;box-shadow:var(--sh-blue)}.jb-node.done b{color:var(--v-ink)}
.jb-node.part .ic{background:var(--v-blue-ss);color:var(--v-blue-d)}.jb-node.part b{color:var(--v-ink)}
.jb-node.run .ic{background:#fff;color:var(--v-blue);box-shadow:0 0 0 2px var(--v-blue),0 0 0 6px rgba(0,157,232,.15);animation:sgOn 1s infinite alternate}.jb-node.run b{color:var(--v-blue-dd)}
.jb-link{flex:1;min-width:28px;height:3px;border-radius:2px;background:#E6E8EB;position:relative;overflow:hidden;margin-bottom:34px}.jb-link.on{background:#B6E0F7}.jb-link.flow i{position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--v-blue),transparent);width:40%;animation:jbF 1.1s linear infinite}@keyframes jbF{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.jb-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}@media (max-width:1199px){.jb-grid{grid-template-columns:minmax(0,1fr)}.jb-hero{grid-template-columns:auto minmax(0,1fr)}.jb-hero-a{grid-column:1/-1;grid-auto-flow:column;justify-content:start}}
.jb-h{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}.jb-h b{font-size:15px;letter-spacing:-.01em}.jb-h span{font-size:12px;color:var(--v-mute)}
.jb-live{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.jb-lc .lv-ph,.jb-lc .lv-film{display:none}.jb-lc .lv-wait{flex-direction:row;gap:10px}.jb-lc .lv-wait i{width:20px;height:20px;border-width:2px;margin:0}.jb-lc .lv-wait span{display:none}.jb-lc .jb-steps{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}
.jb-lc{position:relative;padding:16px;border-radius:16px;background:#fff;border:1px solid #CDE8F8;box-shadow:0 0 0 4px rgba(0,157,232,.06),var(--sh-2);overflow:hidden}.jb-lc::before{content:'';position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,transparent,var(--v-blue),transparent);animation:jbF 1.6s linear infinite}
.jb-lc-h{display:flex;justify-content:space-between;align-items:center}.jb-time{font-size:12px;color:var(--v-mute);font-variant-numeric:tabular-nums}.jb-lc-t{display:block;font-size:15px;margin:10px 0 14px;letter-spacing:-.01em;text-wrap:balance}
.jb-steps{display:grid;gap:6px}.jb-steps>div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--v-faint)}.jb-steps i{width:16px;height:16px;border-radius:50%;border:1.5px solid #D5D9DE;flex-shrink:0}.jb-steps .done{color:var(--v-ink2)}.jb-steps .done i{background:var(--v-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat;border-color:var(--v-blue)}.jb-steps .run{color:var(--v-blue-dd);font-weight:700}.jb-steps .run i{border:2px solid var(--v-blue);border-top-color:transparent;animation:jbSpin .8s linear infinite}@keyframes jbSpin{to{transform:rotate(360deg)}}
/* 진행 네 묶음 칸(SPEC-FLOW-002 M4): 교수님 차례는 주황 테두리(돌지 않음), 건너뜀은 옅은 점선, 실패는 빨강 */
.jb-steps .prof{color:#8A4A0C;font-weight:700}.jb-steps .prof i{border:2px solid var(--v-orange,#F59E0B)}.jb-steps .skip{color:var(--v-faint);opacity:.75}.jb-steps .skip i{border-style:dashed}.jb-steps .error{color:#B42318;font-weight:700}.jb-steps .error i{border:2px solid #E5484D}
.jb-legend{display:flex;gap:12px;font-size:11px;color:var(--v-mute)}.jb-legend span{display:flex;align-items:center;gap:5px}.jb-legend i{width:10px;height:10px;border-radius:3px;background:#E6E8EB}.jb-legend i.done{background:#34C38F}.jb-legend i.run{background:var(--v-blue)}.jb-legend i.error{background:#F04438}
.jb-board{display:grid;gap:8px}.jb-row{display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}.jb-wk{display:grid;align-content:center;gap:2px;padding-right:6px;min-width:0}.jb-wk b{font-size:13px;color:var(--v-blue-d)}.jb-wk span{font-size:12px;color:var(--v-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-cell{display:grid;gap:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--v-line);background:#FAFBFC;text-align:left;min-width:0;transition:transform .15s var(--ease),box-shadow .2s,border-color .15s}
.jb-cell-h{display:flex;justify-content:space-between;gap:6px;font-size:11px;color:var(--v-faint)}.jb-cell-h em{font-style:normal;font-weight:700}.jb-cell-h .run{color:var(--v-blue-dd);font-weight:700}
.jb-cell-t{font-size:13px;font-weight:600;color:var(--v-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-seg{display:grid;grid-auto-flow:column;gap:3px}.jb-seg i{height:4px;border-radius:2px;background:#E6E8EB}.jb-seg i.done{background:var(--v-blue)}.jb-seg i.run{background:linear-gradient(90deg,var(--v-blue),#B6E0F7);background-size:200% 100%;animation:sk 1s linear infinite}
.jb-cell.wait{opacity:.7}.jb-cell.write,.jb-cell.review{background:#fff;border-color:#9ED3F2;box-shadow:0 0 0 3px rgba(0,157,232,.1)}
.jb-cell.done{background:#fff;cursor:pointer}.jb-cell.done .jb-seg i{background:#34C38F}.jb-cell.done .jb-cell-h span{color:#166B4A;font-weight:600}.jb-cell.done:hover{transform:translateY(-2px);border-color:#9ED3F2;box-shadow:var(--sh-3)}
.jb-cell.error{background:var(--v-red-s);border-color:#F5C2C0}.jb-cell.error .jb-cell-h span{color:#A8232A;font-weight:700}
.jb-cell:disabled{cursor:default}
.jb-feed{list-style:none;margin:0;padding:0;display:grid;gap:0}.jb-feed li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;padding:9px 0;border-top:1px solid var(--v-line);animation:azIn .35s ease both}.jb-feed li:first-child{border-top:0}.jb-feed i{width:8px;height:8px;border-radius:50%;background:var(--v-blue);margin-top:5px}.jb-feed i.g{background:#34C38F}.jb-feed i.o{background:var(--v-orange)}.jb-feed b{display:block;font-size:12px}.jb-feed span{font-size:11px;color:var(--v-mute)}.jb-feed time{font-size:11px;color:var(--v-faint)}
.jb-kv{display:flex;justify-content:space-between;font-size:13px}.jb-kv span{color:var(--v-mute)}
body.on-job .pd{display:none}
.jb-pipe{overflow:visible;flex-wrap:nowrap;padding:16px 18px}.jb-node{min-width:0;flex:0 0 auto;padding:0 2px}.jb-node b{font-size:12px}.jb-link{min-width:12px}
@media (max-width:900px){.jb-node b{white-space:normal;max-width:64px;line-height:1.25}}

.jb-sc{font-weight:700}.jb-sc.g{color:#1E8A5A}.jb-sc.o{color:#B4690E}.jb-sc.r{color:#C2372B}
.sb{display:grid;gap:4px}.sb-card{background:#fff;border:1px solid #F3D9B8;box-shadow:0 0 0 4px rgba(232,140,30,.07),var(--sh-2);border-radius:16px;padding:16px 18px}.sb-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.sb-h b{font-size:15px}.sb-n{font-size:12px;color:var(--v-mute)}.sb-mix{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}.sb-mix span{font-size:12px;padding:3px 9px;border-radius:999px;background:#F3F5F8;color:#4A5563}.sb-secs{display:grid;gap:12px;margin-top:10px}.sb-sec-h{display:flex;gap:8px;align-items:baseline;margin-bottom:6px}.sb-sec-h b{font-size:13px;color:#2459D8}.sb-sec-h span{font-size:12px;color:var(--v-mute)}.sb-sec ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}.sb-sec li{display:grid;grid-template-columns:24px minmax(0,1fr) 100px 84px 130px 24px;gap:8px;align-items:center;padding:4px 6px;border-radius:8px}.sb-sec li:hover{background:#F7F9FB}.sb-sec li em{font-style:normal;font-size:12px;color:var(--v-mute);text-align:right;font-variant-numeric:tabular-nums}.sb-msg{border:1px solid transparent;background:transparent;border-radius:6px;padding:5px 8px;font:inherit;font-size:14px;font-weight:600;min-width:0}.sb-msg:hover,.sb-msg:focus{border-color:#D7DEE6;background:#fff;outline:none}.sb-lay{font-size:12px;color:var(--v-mute);white-space:nowrap}.sb-why{font-size:12px;color:#7A8592;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sb-x{border:0;background:transparent;color:#9AA4B1;cursor:pointer;border-radius:6px;height:24px}.sb-x:hover{background:#FDECEC;color:#C2372B}@media (max-width:900px){.sb-sec li{grid-template-columns:24px minmax(0,1fr) 100px 24px}.sb-lay,.sb-why{display:none}}.sb-sec li>.v-tag{justify-self:start}
/* 스토리보드: 견본과 다른 이유 · 다시 설계 의견 */
.sb-why-h{display:grid;gap:2px;margin:10px 0 2px;padding:8px 12px;border-radius:10px;background:#FFF7EC;font-size:13px;color:#7A4A00;line-height:1.5}.sb-why-h b{font-size:12px;color:#A65A00}.sb-why-h.note{background:#EDF3FF;color:var(--v-blue-dd)}.sb-why-h.note b{color:var(--v-blue-dd)}
/* 디자인 시안 확인 카드 */
.pv-stage{display:grid;grid-template-columns:minmax(0,1fr) 148px;gap:12px;margin-top:12px}.pv-big{aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#F3F5F8;position:relative}.pv-wait{position:absolute;inset:0;display:grid;place-items:center;color:var(--v-mute);font-size:13px}
.pv-thumbs{display:grid;gap:8px;align-content:start;max-height:100%;overflow-y:auto}.pv-thumbs button{position:relative;width:144px;aspect-ratio:16/9;overflow:hidden;border-radius:6px;border:2px solid transparent;padding:0;background:#F3F5F8;cursor:pointer}.pv-thumbs button.on{border-color:var(--v-blue)}.pv-thumbs em{position:absolute;right:5px;bottom:3px;font-style:normal;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);border-radius:4px;padding:0 4px}
.pv-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}.pv-note{flex:1;min-width:220px;border:1px solid var(--v-line,#DDE2E8);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px}.pv-hint{font-size:12px;color:var(--v-mute);margin-top:8px}
@media (max-width:900px){.pv-stage{grid-template-columns:1fr}.pv-thumbs{grid-auto-flow:column;grid-auto-columns:144px;overflow-x:auto}}
/* 생성 진행 화면: 스토리보드 제목 카드·섹션 진행 표시 */
.lv-st{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--v-blue-d,#2459D8);white-space:nowrap}
.lv-plan{position:absolute;inset:0;display:grid;align-content:center;gap:.7em;padding:6% 8%;background:linear-gradient(135deg,#fff 0,#F5F8FF 100%);animation:lvin .45s cubic-bezier(.2,.8,.2,1);word-break:keep-all}
.lv-plan em{font-style:normal;font-size:.62em;font-weight:600;color:#5B6475}.lv-plan b{font-size:1.25em;line-height:1.3;color:#0E1116;letter-spacing:-.02em}
.lv-plan span{display:flex;align-items:center;gap:.5em;font-size:.62em;color:var(--v-blue-d,#2459D8);font-weight:600}.lv-plan span i{width:.9em;height:.9em;border-radius:50%;border:2px solid #CDEBFB;border-top-color:var(--v-blue,#009DE8);animation:lvs 1s linear infinite}
.lv-film button.todo{background:#fff;border-style:dashed}.lv-ft{display:grid!important;gap:1px;align-content:start;padding:4px 5px;width:100%;height:100%;box-sizing:border-box;text-align:left;font-size:11px!important;line-height:1.25;color:#5B6475!important;overflow:hidden}
.lv-ft b{font-size:11px;color:#2459D8}
@media (prefers-reduced-motion:reduce){.lv-plan,.lv-plan span i{animation:none}
/* 동작 줄이기(B-5): 돌림표는 멈춘 점선 고리(곁의 '… 중' 낱말과 함께 작업 중), 흐르는 막대·카드 윗줄은 멈춘 채움 */
.jb-lc:not(.still) .jb-steps .run i,.lv:not(.still) .lv-wait i,.lv:not(.still) .lv-secs li.cur i,.lv:not(.still) .lv-plan span i{border-style:dotted;border-color:var(--v-blue,#009DE8)}
.jb-link.flow i{width:100%;transform:none;background:var(--v-blue);opacity:.35}
.jb-lc::before{background:var(--v-blue);opacity:.5}}
/* 작업 카드에서도 섹션 진행 문구와 제목 카드 줄은 보여줌(단계 표시는 카드 아래 단계와 겹쳐 숨김) */
.jb-lc .lv-film{display:flex}.jb-lc .lv-ph{display:flex;margin-bottom:-2px}.jb-lc .lv-ph>span{display:none}.jb-lc .lv-st{margin-left:0}

/* 실시간 미리보기: 고른 장 보기 · 키보드 포커스 */
.lv:focus{outline:none}.lv:focus-visible{box-shadow:0 0 0 2px var(--v-blue);border-radius:10px}
.lv-follow{margin-left:8px;border:0;border-radius:999px;background:#fff;color:var(--v-blue-dd);font:inherit;font-size:.9em;font-weight:700;padding:2px 10px;cursor:pointer}
/* 좁은 화면(휴대폰): 진행 화면 머리는 한 줄씩, 단계 줄은 옆으로 밀어 보기 */
@media (max-width:640px){.jb-hero{grid-template-columns:minmax(0,1fr);padding:22px 18px;gap:18px}.jb-pipe{overflow-x:auto}}
/* 진행 화면 휴대폰: 숫자 칸은 2×2, 버튼은 줄바꿈(한 줄로 늘어서 오른쪽이 잘리지 않게) */
@media (max-width:640px){.jb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.jb-hero-a{display:flex;flex-wrap:wrap;min-width:0}.jb-hero-a .v-btn{flex:1 1 auto}.jb-hero-a .jb-note{flex-basis:100%}}
/* 1주차 견본 확인 — 시안 준비 중 카드·주차 스토리보드 */
.sp-wait{display:grid;gap:12px}
.sp-step{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--v-ink2)}
.sp-step b{font-size:14px;color:var(--v-ink)}
.sp-step span:last-child{color:var(--v-mute)}
.sp-boards{display:grid;gap:10px;margin-top:12px}
.sp-sub{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:0 2px}
.sp-sub b{font-size:14px}
.sp-sub span{font-size:12.5px;color:var(--v-mute)}
/* 내용 확인 화면(SPEC-CF-001) — 디자인 없이 내용만: 흰 카드·회색 선, 교시는 접힌 요약으로 시작 */
.ct{display:grid;gap:16px;align-content:start}
.ct-top{display:grid;gap:12px;padding:22px 24px;background:#fff;border:1px solid var(--v-line);border-radius:18px;box-shadow:var(--sh-2)}
.ct-top-t{display:grid;gap:4px}.ct-top-t h1{margin:0;font-size:24px;letter-spacing:-.02em}.ct-top-t p{margin:2px 0 0;font-size:15px;color:var(--v-ink2)}.ct-top-t p b{color:var(--v-ink)}
.ct-top-t>span{font-size:13px;color:var(--v-mute);line-height:1.5;word-break:keep-all}.ct-top-t .ct-proxy{color:#8A4A0C}
.ct-top-a{display:flex;flex-wrap:wrap;gap:8px}.ct-top-a .v-btn{white-space:normal;text-align:left;height:auto;min-height:38px}
.ct-msg{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:var(--v-blue-s);color:var(--v-blue-dd);font-size:13.5px;font-weight:600;line-height:1.45;word-break:keep-all}.ct-msg span{flex:1;min-width:0}.ct-msg.soft{background:#FFF7EC;color:#7A4A00;font-weight:500}
.ct-fixing{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:#F5F9FF;border:1px solid #CDE3FB;font-size:13px;color:var(--v-ink2);line-height:1.5;word-break:keep-all}
.ct-list{display:grid;gap:12px}
.ct-lc{background:#fff;border:1px solid var(--v-line);border-radius:16px;box-shadow:var(--sh-2);overflow:hidden}.ct-lc.open{border-color:#CDE8F8}
.ct-lh{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px;cursor:pointer}.ct-lh:focus-visible{outline:2px solid var(--v-blue);outline-offset:-2px}
.ct-lh b{font-size:15px;min-width:0;overflow-wrap:anywhere}.ct-lh .ct-sum{margin-left:auto;font-size:12.5px;color:var(--v-mute);white-space:nowrap}.ct-chev{display:inline-flex;color:var(--v-mute)}
.ct-lb{display:grid;gap:10px;padding:0 18px 12px}
.ct-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--v-mute);padding:8px 0;border-top:1px solid var(--v-line)}
.ct-sl{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--v-line);border-radius:12px;background:#FCFCFD}.ct-sl.rev{border-color:#B7E4CC;background:#F7FCF9}
/* 작성 화면(SPEC-FLOW-002 M1): 안 쓴 장 틀은 점선·흐린 바탕, 진행 화면의 '쓰는 것 보기' 줄 */
.ct-sl.todo{border-style:dashed;background:#F6F8FB}.ct-sl.todo .ct-title{color:var(--v-mute)}.jb-lw{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 2px;font-size:12px;color:var(--v-mute);font-variant-numeric:tabular-nums}
/* 장 틀(SPEC-FLOW-002 A안 2026-11-05): 디자인 전 흰 16:9 빈 장 — 글 크기는 틀 넓이(cqw)를 따라 줄고 늘어 좁은 화면에서도 가로 스크롤 없음, 넘치는 글은 틀 안에서 잘림(넘침은 .ct-over 줄로 알림) */
.sf{position:relative;width:100%;max-width:720px;aspect-ratio:16/9;background:#fff;border:1px solid #D5DBE3;border-radius:6px;box-shadow:0 1px 3px rgba(16,24,40,.08);overflow:hidden;container-type:inline-size;color:#1F2937;box-sizing:border-box}
.sf-in{position:absolute;inset:0;display:flex;flex-direction:column;gap:2.2cqw;padding:4.2cqw 5cqw}
.sf-t{flex:none;font-weight:800;font-size:3.6cqw;line-height:1.25;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sf-b{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:3cqw}.sf-b.two{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.sf-x{min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:1.4cqw;font-size:2.2cqw;line-height:1.45;color:#374151;word-break:keep-all;overflow-wrap:anywhere}
.sf-x ul,.sf-x ol{margin:0;padding-left:1.3em;display:grid;gap:.7cqw}.sf-q{font-weight:700;color:#1F2937}
.sf-tb{border-collapse:collapse;width:100%;table-layout:fixed;font-size:.8em}.sf-tb th,.sf-tb td{border:1px solid #D5DBE3;padding:.5cqw .8cqw;text-align:left;vertical-align:top;overflow:hidden}.sf-tb th{background:#F3F5F8}
.sf-v{min-height:0;min-width:0;display:grid;grid-auto-rows:minmax(0,1fr);gap:1.5cqw} /* 자리 칸: 세로로 고르게 나눔, 열 수는 배치가 style로(row·grid) */
/* 내용에 맞춘 배치(사용자 2026-11-05, app-content ContentUI.frameLayout): 글 크기 sz-l·m·s, 배치 p-* — 몸통(.sf-b)이 제목 아래를 다 채우고 글은 가운데, 자리는 남은 칸을 채움 */
.sf.sz-l .sf-x{font-size:2.8cqw}.sf.sz-l .sf-x ul,.sf.sz-l .sf-x ol{gap:1.6cqw}.sf.sz-s .sf-x{font-size:1.75cqw}
.sf.p-text .sf-x,.sf.p-table .sf-x,.sf.p-side .sf-x,.sf.p-col .sf-x{justify-content:center;justify-content:safe center} /* 넘치면 가운데가 아니라 위부터(safe) */
.sf.p-side .sf-b.two{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.sf.p-quiz .sf-x{justify-content:space-evenly}.sf.p-quiz .sf-x ol{gap:1.4cqw}
.sf.p-stack .sf-b,.sf.p-row .sf-b,.sf.p-grid .sf-b{display:flex;flex-direction:column} /* 글 위 · 자리 아래 */
.sf.p-stack .sf-x,.sf.p-row .sf-x,.sf.p-grid .sf-x{flex:0 1 auto;max-height:58%}.sf.p-stack .sf-v,.sf.p-row .sf-v,.sf.p-grid .sf-v{flex:1 1 0}
.sf-ph{align-self:stretch;justify-self:stretch;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6cqw;padding:1.2cqw;border:1.5px dashed #A9B4C2;border-radius:1cqw;background:#F7F9FB;text-align:center;font-size:1.6cqw;line-height:1.35;color:#64748B;word-break:keep-all;overflow-wrap:anywhere}
.sf-ph b{font-size:1.8cqw;color:#475467}.sf-ph.dg{border-color:#9ED3F2;background:#F3FAFE}.sf-ph.dg b{color:var(--v-blue-dd)}
.sf.k-cover .sf-b,.sf.k-divider .sf-b{align-items:center}.sf.k-cover .sf-x,.sf.k-divider .sf-x{justify-content:center}
.sf.k-cover .sf-t{font-size:5cqw;-webkit-line-clamp:3}.sf.k-cover .sf-b:not(.two) .sf-x{text-align:center;align-items:center}.sf.k-cover ul,.sf.k-divider ul{list-style:none;padding:0;color:#64748B}
.sf.k-divider .sf-t{font-size:4.4cqw;padding-left:2cqw;border-left:.8cqw solid var(--v-blue,#009DE8)}.sf.k-divider ul{padding-left:2.8cqw}
.sf-badge{position:absolute;top:6px;right:6px;z-index:1;padding:1px 7px;border-radius:999px;background:rgba(238,241,245,.94);color:#475467;font-size:10.5px;font-weight:700;line-height:1.6;letter-spacing:.01em;pointer-events:none} /* '디자인 전' — 틀 안 오른쪽 위 모서리 */
.sf.bd .sf-t{padding-right:13cqw} /* 모서리 표시와 제목이 겹치지 않게 */
.sf.todo{border-style:dashed;background:#FCFDFE;box-shadow:none}.sf.todo .sf-t{color:var(--v-mute)}
.sf-wait{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);padding:.8cqw 2.4cqw;border-radius:999px;background:var(--v-blue-s,#E6F5FD);color:var(--v-blue-dd,#0369A1);font-size:2cqw;font-weight:700;white-space:nowrap}
.sf-zone{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1.5px dashed #F2B47A;border-radius:.8cqw;background:rgba(255,244,232,.7);pointer-events:none} /* 교수자 자리(HYCU: 교수자 영상이 들어갈 곳) — 위치·크기는 1920×1080 비율로(app-content SlideFrame) */
.sf-zone span{font-size:1.8cqw;font-weight:700;color:var(--v-orange-d,#C46A12);white-space:nowrap}
.ct-row{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,38%,420px);gap:12px;column-gap:64px;align-items:stretch} /* 장마다 한 줄: 왼쪽 글 카드 · 오른쪽 장 틀 — 틀 칸 넓이는 모든 줄이 같아 틀이 세로로 줄 맞춤, 16:9 틀 높이(약 135~236px)가 보통 글 카드 높이와 비슷 · 두 칸 사이 64px 틈에 잇는 표시(.ct-flow) */
.ct-sl.ed{border-color:#9ED3F2;background:#fff;box-shadow:0 0 0 3px rgba(0,157,232,.08)} /* 고치는 장 하나(장마다 고치기) */
.ct-row>.ct-sl{display:flex;flex-direction:column}.ct-foot{margin-top:auto} /* 줄 높이만큼 늘어난 카드 — 의견·저장 단추 줄은 카드 바닥에 */
.ct-row>.ct-sl:only-child{grid-column:1/-1}.ct-pv{display:grid;align-content:start;min-width:0;position:relative;container-type:inline-size} /* 틀은 칸 위쪽 — 글 카드와 윗선이 같음 · 칸 넓이 = 틀 넓이(100cqw)라 잇는 표시를 틀 세로 가운데에 놓을 수 있음 */
.ct-flow{position:absolute;right:100%;top:28.125cqw;width:64px;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;animation:ct-flow-in .45s ease-out both} /* 글 → 장 잇는 표시: 두 칸 사이 틈, 틀(16:9 = 높이 56.25cqw)의 세로 가운데 · 처음 한 번만 부드럽게 나타남 */
.ct-flow-i{width:28px;height:28px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;background:var(--v-blue-s);color:var(--v-blue);border:1px solid #D3E0FB;font-size:15px;font-weight:700;line-height:1;transition:background-color .2s,color .2s}
.ct-flow-t{max-width:58px;text-align:center;font-size:11px;line-height:1.35;color:var(--v-mute);word-break:keep-all}
.ct-flow.on .ct-flow-i{background:var(--v-blue);color:#fff;border-color:var(--v-blue)}.ct-flow.on .ct-flow-t{color:var(--v-blue-dd);font-weight:700} /* 고치는 중: 고친 글이 오른쪽 장에 바로 보인다는 강조 */
@keyframes ct-flow-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ct-flow{animation:none}.ct-flow-i{transition:none}}
@media (max-width:900px){.ct-row{grid-template-columns:minmax(0,1fr)}} /* 좁은 화면: 글 카드 아래에 장 틀 */
@media (max-width:900px){.ct-row{row-gap:44px}.ct-flow{right:auto;left:min(50cqw,360px);top:-36px;width:auto;flex-direction:row;gap:6px;transform:translateX(-50%)}.ct-flow-i{transform:rotate(90deg)}.ct-flow-t{max-width:none;white-space:nowrap}} /* 좁은 화면: 글 카드와 장 틀 사이에 아래 화살표(→를 90도 돌린 ↓), 틀(최대 720px) 가운데 위 */
.ct-sl-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}.ct-sl-h em{font-style:normal;font-weight:800;font-size:13px;color:var(--v-ink)}
.ct-kind{border:1px solid var(--v-line);border-radius:6px;padding:3px 6px;font:inherit;font-size:12px;background:#fff}
.ct-ops{display:flex;flex-wrap:wrap;gap:2px}.ct-ops .ct-del{color:#B42318}
.ct-over{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#7A4A00;background:#FFF7EC;border-radius:8px;padding:6px 10px;line-height:1.45;word-break:keep-all}
.ct-body{display:grid;gap:6px;min-width:0}.ct-title{font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.ct-pts{margin:0;padding-left:18px;display:grid;gap:3px;font-size:14px;line-height:1.5;color:var(--v-ink2);overflow-wrap:anywhere}.ct-pts .ct-add{list-style:none;margin-left:-18px}
.ct-in{width:100%;box-sizing:border-box;border:1px solid var(--v-line);border-radius:8px;padding:6px 9px;font:inherit;font-size:14px;background:#fff}.ct-in:focus{outline:none;border-color:var(--v-blue);box-shadow:0 0 0 3px rgba(0,157,232,.12)}.ct-in.t{font-weight:700;font-size:15px}
textarea.ct-in{resize:vertical;line-height:1.5}
.ct-dg,.ct-img{font-size:13px;line-height:1.5;color:var(--v-ink2);overflow-wrap:anywhere}.ct-dg em{font-style:normal;font-weight:700;color:var(--v-blue-dd);margin-right:6px}.ct-img{color:#166B4A}.ct-img span{color:var(--v-mute)}
.ct-tw{overflow-x:auto}.ct-tb{border-collapse:collapse;font-size:13px;min-width:100%}.ct-tb th,.ct-tb td{border:1px solid var(--v-line);padding:5px 8px;text-align:left;vertical-align:top}.ct-tb th{background:#F3F5F8;font-weight:700}
.ct-quiz{display:grid;gap:3px;font-size:13.5px;line-height:1.5;padding:8px 10px;border-radius:8px;background:#F5F7FA}.ct-quiz ol{margin:0;padding-left:20px}
.ct-more summary{cursor:pointer;font-size:12.5px;color:var(--v-blue-dd);font-weight:600}.ct-notes{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--v-ink2);white-space:pre-wrap;overflow-wrap:anywhere}
.ct-det{display:grid;gap:2px;font-size:13px;margin-top:6px;color:var(--v-ink2)}.ct-notes-e{display:grid;gap:4px}.ct-notes-e em{font-style:normal;font-size:12px;color:var(--v-mute)}
.ct-cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.ct-cmp>div{display:grid;gap:4px;align-content:start;padding:8px 10px;border-radius:8px;background:#fff;border:1px solid var(--v-line);min-width:0}
.ct-cmp>div:first-child{color:var(--v-mute)}.ct-cmp>div:first-child ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5}.ct-cmp em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--v-mute)}
.ct-acts,.ct-note-b,.ct-note-in{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.ct-note-in .ct-in{flex:1;min-width:180px}
.ct-hint{font-size:12px;color:var(--v-mute);word-break:keep-all}.ct-done{font-size:12.5px;color:#166B4A}
.ct-note{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;background:#FFF7EC;color:#7A4A00;font-size:13px;line-height:1.45}.ct-note span{flex:1;min-width:0;overflow-wrap:anywhere}
.ct-empty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--v-mute);padding:8px 0}
.ct-lf{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 18px;border-top:1px solid var(--v-line);background:#FAFBFC}
.ct-wait{padding:14px 18px;background:#fff;border:1px solid #F3D9B8;border-radius:16px;box-shadow:0 0 0 4px rgba(232,140,30,.07),var(--sh-2)}.ct-wait .jb-h{margin:0;flex-wrap:wrap}
.jb-cell.content{background:#FFF9F0;border-color:#F3D9B8;cursor:pointer}.jb-cell.content .jb-cell-h span{color:#8A4A0C;font-weight:700}
@media (max-width:640px){.ct-top{padding:18px 16px}.ct-top-a .v-btn{flex:1 1 100%;justify-content:center}.ct-lh{padding:12px 14px}.ct-lh .ct-chev{margin-left:auto}.ct-lh .ct-sum{margin-left:0;flex-basis:100%;white-space:normal;order:3}.ct-lb{padding:0 12px 10px}.ct-sl{padding:10px}.ct-cmp{grid-template-columns:minmax(0,1fr)}.ct-lf{padding:10px 12px}.ct-lf .v-btn{flex:1 1 auto;justify-content:center}}
.ht>.ct-msg{margin:12px 14px 4px}.ct-lc>.ct-msg{margin:0 14px 10px}
/* 진행 모션(SPEC-MOTION-001 M3): 상태 꼬리표(모양+낱말)·회색 차분한 안내·예상 시간·멈춘 모양 — 반복 움직임은 work일 때만 */
.jb-tag{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.1);color:#E2E8F0;font-weight:700}
.jb-hero.mo-human .jb-tag{background:rgba(245,181,68,.18);color:#FCD9A0}.jb-hero.mo-error .jb-tag{background:rgba(240,68,56,.22);color:#FECACA}
.jb-hero.mo-slow .jb-tag,.jb-hero.mo-stall .jb-tag,.jb-hero.mo-paused .jb-tag,.jb-hero.mo-canceled .jb-tag{background:rgba(148,163,184,.2);color:#CBD5E1}
.jb-calm{display:flex;align-items:flex-start;gap:8px;margin:-10px 0 14px;padding:8px 12px;border-radius:10px;font-size:13px;line-height:1.5;word-break:keep-all;background:rgba(148,163,184,.14);color:#CBD5E1}
.jb-calm svg{flex-shrink:0;margin-top:2px}.jb-calm em{display:block;font-style:normal;font-size:12px;color:#94A3B8}
.jb-calm.human{background:rgba(245,181,68,.14);color:#FCD9A0}
.jb-calm.sm{margin:8px 0 0;background:#F3F4F6;color:#475467}.jb-calm.sm em{color:#667085}
.jb-stats b.jb-stage{font-size:15px;line-height:1.3;white-space:normal;word-break:keep-all}
.jb-stats b.jb-stage .jb-stage-more{display:block;font-size:12px;font-weight:500;color:#94A3B8;margin-top:2px} /* 지금 단계 둘째 줄: 다른 교시 수(M7b) */
.jb-eta b{font-size:13px;font-weight:600;color:#94A3B8}
.jb-lc.still::before{display:none}.jb-lc.still .jb-steps .run i{animation:none;border-color:var(--v-blue)}
.jb-lc.mo-slow,.jb-lc.mo-stall{border-color:#D5D9DE;box-shadow:var(--sh-2)}
.lv.still .lv-wait i,.lv.still .lv-plan span i,.lv.still .lv-secs .cur i{animation:none}
.jb-cell.still .jb-seg i.run{animation:none}
.jb-cell.mo-human{border:1.5px dashed #E8A13A;box-shadow:none}
.jb-cell.mo-slow,.jb-cell.mo-stall{background:repeating-linear-gradient(135deg,#F3F4F6 0 6px,#E7E9ED 6px 12px);border-color:#C9CED6;box-shadow:none}
.jb-cell-h .calm{color:#475467;font-weight:700}.jb-cell-h span svg{vertical-align:-1px;margin-right:2px}
.ct-wait .jb-h>svg,.sb .jb-h>svg{align-self:center;flex-shrink:0;color:#B4690E}
.ct-fixing.still{background:#F5F6F8;border-color:#E2E5EA}
/* 내용 초안 섹션 목록: 다 쓴 섹션 이름·첫 줄, 지금 쓰는 섹션, 남은 자리 */
.lv-secs{display:grid;gap:8px}.lv-secs-h{display:flex;align-items:baseline;gap:8px}.lv-secs-h b{font-size:14px;color:var(--v-blue-dd)}.lv-secs-h span{font-size:12px;color:var(--v-mute)}
.lv-secs ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lv-secs li{display:grid;gap:2px;min-width:0;padding:8px 10px;border-radius:10px;background:#F7F9FC;border:1px solid #E6ECF3;font-size:12.5px;line-height:1.45;color:var(--v-ink2);word-break:keep-all;animation:lvin .35s ease}
.lv-secs li b{font-size:13px;color:var(--v-ink)}.lv-secs li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-secs li.x{background:#FFF4F2;border-color:#F5C2C0}.lv-secs li.x span{color:#A8232A;font-weight:600}
.lv-secs li.cur{background:#fff;border-color:#9ED3F2}.lv-secs li.cur b{display:flex;align-items:center;gap:6px}
.lv-secs li.cur i{width:12px;height:12px;border-radius:50%;border:2px solid #CDEBFB;border-top-color:var(--v-blue,#009DE8);animation:lvs 1s linear infinite;flex-shrink:0}.lv.still .lv-secs li.cur i{border-color:#C9CED6}
.lv-secs li.todo{min-height:14px;background:#fff;border-style:dashed}.lv-secs li.more{background:none;border:0;padding:2px 10px;color:var(--v-mute)}
@media (min-width:641px){.jb-stats:has(>div:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}} /* 예상 시간 칸을 숨기면 세 칸으로 */