/* [app.css 분할 4/10 · orgwork.css] 조직도 패널 · 작업 패널/워크스페이스
   2026-08-23 리팩터 — 옛 app.css 를 원본 순서 그대로 10조각으로 나눴다.
   캐스케이드가 곧 계약이라 로드 순서를 바꾸면 안 된다:
   app.css → studio.css → rooms.css → orgwork.css → overlays.css → winmodes.css → plus.css → chrome.css → msgx.css → profile.css
   로드 지점: web/index.html, tests/harness/*.html */
/* ── 조직도 패널 — 사내 대화 컬럼과 같은 문법 (상호 배타 열림) ── */
/* ── 조직도도 사내 대화 컬럼과 같은 클립 슬라이드 + FLIP 문법(§4.2) ──
   .org-inner 는 org.js 마크업이 아니라 이 모듈(index.html 단독 소유)이 두른
   고정폭 래퍼다 — orgPop 소유 모듈(org.js)이 인라인 스타일/치수 계산을
   건드리지 않도록 구조만 여기서 만든다. width/min-width 는 트랜지션을 아예
   선언하지 않는다 — orgOpen()의 flipRun()이 mutate() 전후로 #chat rect 를
   동기 측정해 보정하므로 폭은 클래스 토글과 같은 프레임에 순간 변경돼야 한다. */
#orgPop{--org-w:380px;width:var(--org-w);min-width:var(--org-w);display:flex;position:relative;overflow:hidden;
  background:#fbfaff;border-left:1px solid var(--line);   /* 불투명 — 뷰 전환 시 움직이는 표면 (§1.5) */
  transition:opacity var(--motion-dur-view) var(--motion-ease-out),
             transform var(--motion-dur-view) var(--motion-ease-out)}
#orgPop.closed{width:0;min-width:0;border-left:0}
.org-inner{width:var(--org-w);flex:none;display:flex;flex-direction:column;min-width:0;
  transform:translate3d(0,0,0);visibility:visible;
  transition:transform var(--motion-dur-panel) var(--motion-ease-out),visibility 0s}
/* 닫혀도 visibility 유지 — 열기 첫 프레임 전체 재페인트 멈춤 방지 (gw.css 참조) */
#orgPop.closed .org-inner{transform:translate3d(100%,0,0);
  transition:transform var(--motion-dur-exit-panel) var(--motion-ease-in)}
/* orgwin 모드(width:auto!important, 아래 446행대)에서는 안쪽 transform 을 끄고,
   바깥이 창 전폭이므로 고정폭(--org-w)도 풀어 함께 늘어나게 한다(짤림 방지) */
body.orgwin .org-inner{transform:none!important;width:auto;flex:1}
.org-head{display:flex;align-items:center;gap:6px;height:52px;padding:0 20px;flex:none;
  font-size:14px;font-weight:600;color:#3c4160}
.org-top{max-height:44%;overflow-y:auto;padding:0 20px 10px;border-bottom:1px solid var(--line)}
.org-bottom{flex:1;overflow-y:auto;padding:8px 20px}
.org-parent{font-size:11px;font-weight:640;color:#7d8296;letter-spacing:.05em;padding:7px 6px 3px}
.org-dept{display:block;width:100%;text-align:left;border:0;background:0 0;border-radius:8px;
  padding:6px 10px;font-size:12.5px;color:#3a3f57}
.org-dept:hover{background:var(--hover)}
.org-dept.is-on{background:var(--accent-soft);color:var(--accent-deep);font-weight:580}
/* 사원 행은 사내 대화 방 목록(.co-room-it)과 같은 규격으로 맞춘다 */
.org-mem{display:flex;align-items:center;gap:10px;width:100%;border:0;background:0 0;border-radius:11px;
  padding:9px 10px;text-align:left;
  transition:background var(--motion-dur-micro) var(--motion-ease-out),
             transform var(--motion-dur-micro) var(--motion-ease-out)}
.org-mem:hover{background:var(--hover);transform:translateY(-1px)}
.org-mem .m-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#222a49,#0c1127);
  color:#fff;font-size:11px;display:grid;place-items:center;flex:none}
.org-mem .m-name{font-size:13px;font-weight:500;color:#2f3450}
.org-mem .m-name small{font-size:11px;font-weight:400;color:#9298a8;margin-left:5px}
.org-mem .m-sub{font-size:11px;font-weight:400;color:#9298a8}

/* ── 우측 슬라이드 작업 패널 ──────────────────────────────── */
/* ── 오버레이 서랍(§4.3) — 기본=닫힘(exit 토큰), .open=열림(enter 토큰). transition
   자체가 상태별로 바뀌므로 속성마다 따로 지정하지 않는다. will-change 는 CSS 상시
   선언 금지 — workOpen JS(§4.1 ahoAfter 문법)가 움직이는 동안만 부여한다. */
/* 배경 불투명 + 블러 제거 + 그림자는 도착 후 ::after 로 — 슬라이드 중
   backdrop-filter/대형 그림자는 GPU 끔 환경에서 매 프레임 재래스터화돼
   그래픽이 깨진다 (2026-07-29 보스 리포트, §1.5 같은 원리) */
#work{position:fixed;top:var(--menubar-h,0px);right:0;bottom:0;width:var(--work-w);z-index:60;display:flex;flex-direction:column;
  background:#fcfcfe;border-left:1px solid var(--line);
  transform:translate3d(102%,0,0);visibility:hidden;
  pointer-events:none;   /* 타임라인 멈춤 시에도 닫힌 서랍이 클릭을 먹지 않게 (§4.1) */
  transition:transform var(--motion-dur-exit-drawer) var(--motion-ease-in),
             visibility 0s linear var(--motion-dur-exit-drawer)}
#work.open{transform:translate3d(0,0,0);visibility:visible;pointer-events:auto;
  transition:transform var(--motion-dur-drawer) var(--motion-ease-out),visibility 0s}
/* 서랍 그림자 — 슬라이드가 끝난 뒤에만 페이드인, 닫기 시작하면 즉시 제거 */
#work::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  box-shadow:-30px 0 80px #27225d1c;opacity:0;
  transition:opacity var(--motion-dur-micro) var(--motion-ease-out)}
#work.open::after{opacity:1;
  transition:opacity var(--motion-dur-micro) var(--motion-ease-out) var(--motion-dur-drawer)}
.work-head{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ws-title{font-size:13.5px;font-weight:640;color:#3c4160;padding:0 4px}
/* ── 통합 워크스페이스: 활동 피드 | 미리보기 가로 분할 (설계 ARCHITECTURE_WORKSPACE.md) ── */
.ws-split{flex:1;display:flex;min-height:0;overflow:hidden}
.work-body{flex:1;overflow:auto;padding:14px 16px;font-size:13px;min-width:0}
/* 미리보기 열림 = 피드는 고정폭 레일로 좁히고 미리보기가 나머지를 채운다 */
body.work-wide #wsFeed{flex:none;width:var(--ws-feed-w)}
/* 통합 피드 아이템(도구 스텝 + 아티팩트 카드 공통 정렬) */
.ws-it{display:flex;gap:10px;padding:8px 4px;border-bottom:1px dashed var(--line);align-items:flex-start}
.ws-it i{font-style:normal;flex:none;display:inline-flex}
.ws-it .f-txt{flex:1;min-width:0}
.ws-it .f-name{font-weight:600;font-size:12.5px;color:#3c4160;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-it .f-det{color:#8c91a1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 아티팩트 카드 = 클릭 가능(button) */
.ws-art{width:100%;text-align:left;border:0;background:0 0;border-radius:10px;cursor:pointer}
.ws-art:hover{background:var(--hover)}
.ws-art.is-open{background:var(--accent-soft)}
.ws-art .ws-art-open{flex:none;color:var(--dim);font-size:13px;align-self:center;opacity:0;transition:opacity var(--motion-dur-micro)}
.ws-art:hover .ws-art-open,.ws-art.is-open .ws-art-open{opacity:1;color:var(--accent-deep)}
.ws-empty{color:#a2a5b1;text-align:center;margin-top:40px;font-size:12.5px}
/* ── 미리보기 영역 ── */
/* .aho-anim 계약(workspace.js가 ahoShow/ahoHide로 열고 닫는다) — 표면별 --aho-dur/--aho-rise
   오버라이드만 심는다(§4.1). #modal 과 같은 급의 패널이라 같은 토큰(420/280ms, 14px)을 쓴다. */
.ws-preview{flex:1;min-width:0;display:flex;flex-direction:column;border-left:1px solid var(--line);background:#fff;
  --aho-dur:var(--motion-dur-panel);--aho-dur-exit:var(--motion-dur-exit-panel);--aho-rise:14px}
.wsp-head{display:flex;align-items:center;gap:6px;padding:9px 10px 9px 14px;border-bottom:1px solid var(--line)}
.wsp-title{font-size:12.5px;font-weight:600;color:#4a4f66;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsp-body{flex:1;min-height:0;overflow:auto;background:#f6f6fb}
.wsp-frame{width:100%;height:100%;border:0;background:#fff}
.wsp-img{display:block;max-width:100%;margin:14px auto;background:
  linear-gradient(45deg,#eceaf5 25%,transparent 25%,transparent 75%,#eceaf5 75%),
  linear-gradient(45deg,#eceaf5 25%,#fff 25%,#fff 75%,#eceaf5 75%);
  background-size:18px 18px;background-position:0 0,9px 9px}
.wsp-code{margin:0;padding:14px;overflow:auto;font-size:12.5px;line-height:1.55;
  font-family:Consolas,"D2Coding",monospace;white-space:pre;color:#2e3350}
/* 좁은 폭(모바일/축소 창): 2단 분할이 답답 → 미리보기 열리면 피드 숨기고 미리보기 전폭 */
@media (max-width:520px){
  body.work-wide #wsFeed{display:none}
  .ws-preview{border-left:0}
}
/* 시큐어 모드: 미리보기 표면도 초록 톤(iframe 은 시큐어에서 아예 안 뜸 — code 표면에만) */
html.secure .ws-preview,html.secure .wsp-body{background:#f2f9f5}
html.secure .ws-art.is-open{background:var(--accent-soft)}