/* ══════════════════════════════════════════════════════════
   flow (임시) — 플로우 이관 시험 메뉴 (js/flow-temp.js, .flw-)
   공용 부품(.oc-btn · .oc-in · .oc-seg · .oc-chip)을 쓰고 여기엔 배치·카드만.
   ══════════════════════════════════════════════════════════ */
.flw-wrap{padding:20px 24px 48px;max-width:1280px;}
.flw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.flw-head h2{font-size:20px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px;}
.flw-head-actions{display:flex;gap:6px;flex-wrap:wrap;}
.flw-tag{font-size:11px;font-weight:600;color:#a16207;background:#fcf1dc;border-radius:999px;padding:2px 8px;}
.flw-notice{background:#fcf1dc;color:#7c4a03;border-radius:8px;padding:14px 16px;font-size:13px;}
.flw-empty{color:var(--text3);font-size:13px;text-align:center;padding:40px 12px;}
.flw-empty.sm{padding:16px 8px;font-size:12px;}
.flw-muted{color:var(--text3);font-size:12px;}

.flw-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start;}
.flw-side{position:sticky;top:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px;max-height:calc(100vh - 120px);overflow:auto;}
.flw-side-q{width:100%;margin-bottom:8px;}
.flw-pitem{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text);}
.flw-pitem:hover{background:var(--surface2);}
.flw-pitem.on{background:var(--accent-light);color:var(--accent);font-weight:600;}
.flw-pitem-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.flw-pitem-n{font-size:11px;color:var(--text3);}

.flw-main{min-width:0;}
.flw-phead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:12px;}
.flw-phead h3{font-size:17px;font-weight:700;margin:0 0 4px;}
.flw-pmeta{font-size:12px;color:var(--text2);}
.flw-pdesc{font-size:13px;color:var(--text2);margin-top:6px;white-space:pre-wrap;}

.flw-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.flw-chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);cursor:pointer;}
.flw-sec{font-size:12px;font-weight:600;color:var(--text2);margin:14px 0 8px;}

.flw-post{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:12px;}
.flw-post-h{display:flex;align-items:center;gap:10px;}
.flw-post-who{flex:1;min-width:0;font-size:13px;}
.flw-when{font-size:12px;color:var(--text3);}
.flw-when a{color:var(--text3);}
.flw-corp{font-size:11px;color:var(--text2);background:var(--surface2);border-radius:4px;padding:1px 6px;font-weight:400;}
.flw-post-act{display:flex;align-items:center;gap:6px;}
.flw-pin{font-size:11px;color:#a16207;background:#fcf1dc;border-radius:999px;padding:2px 8px;}
.flw-post-t{font-size:15px;font-weight:700;margin:10px 0 6px;}
.flw-body{font-size:13px;line-height:1.65;overflow-wrap:anywhere;}
.flw-body p{margin:0 0 4px;}
.flw-body ul,.flw-body ol{margin:2px 0 6px;padding-left:20px;}
.flw-body img{max-width:min(320px,100%);max-height:320px;border-radius:6px;border:1px solid var(--border);margin:4px 4px 0 0;cursor:zoom-in;vertical-align:top;}
.flw-body a{color:var(--accent);}
.flw-sys{font-size:12px;color:var(--text3);padding:6px 4px;border-bottom:1px dashed var(--border);margin-bottom:8px;}

.flw-imgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.flw-imgs img{width:96px;height:96px;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:zoom-in;}
.flw-imgs.sm img{width:64px;height:64px;}
.flw-imgs.grid img{width:120px;height:120px;}
.flw-files{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.flw-file{display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;color:var(--text);text-decoration:none;max-width:100%;}
.flw-file:hover{background:var(--surface2);}
.flw-file-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.flw-task{background:var(--surface2);border-radius:8px;padding:10px 12px;margin:8px 0;display:flex;flex-direction:column;gap:6px;font-size:13px;}
.flw-task-row{display:flex;align-items:center;gap:10px;}
.flw-task-row.top{align-items:flex-start;}
.flw-task-l{width:64px;flex:none;font-size:12px;color:var(--text2);}
.flw-st-row{display:flex;flex-wrap:wrap;gap:4px;}
.flw-st{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;cursor:pointer;color:var(--text2);background:var(--surface);border:1px solid var(--border);white-space:nowrap;}
span.flw-st{cursor:default;}
.flw-st.on.req{background:#e8eefc;color:#1d4ed8;border-color:transparent;}
.flw-st.on.ing{background:#e3f6e9;color:#15803d;border-color:transparent;}
.flw-st.on.fb{background:#fcf1dc;color:#a16207;border-color:transparent;}
.flw-st.on.done{background:#e9e7fd;color:#5b21b6;border-color:transparent;}
.flw-st.on.hold{background:#ececec;color:#52525b;border-color:transparent;}
.flw-subs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
.flw-subs li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.flw-sub-st{font-family:inherit;font-size:12px;height:24px;border:1px solid var(--border);border-radius:6px;background:var(--surface);padding:0 4px;}
.flw-done{color:var(--text3);text-decoration:line-through;}

.flw-cmts{border-top:1px solid var(--border);margin-top:12px;padding-top:10px;}
.flw-cmts-h{font-size:12px;color:var(--text2);margin-bottom:6px;}
.flw-cmt{display:flex;gap:8px;padding:6px 0;}
.flw-cmt-b{flex:1;min-width:0;font-size:13px;}
.flw-cmt-t{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px;}
.flw-x{all:unset;cursor:pointer;color:var(--text3);font-size:11px;margin-left:6px;}
.flw-x:hover{color:#c81e1e;}
.flw-cmt-in{display:flex;gap:6px;margin-top:6px;align-items:flex-start;}
/* ui-kit 의 textarea.oc-in(min-height 76) 보다 구체적으로 — 댓글 칸은 한 줄로 시작 */
.flw-cmt-in textarea.oc-in{flex:1;height:32px;min-height:32px;padding:6px 10px;resize:vertical;line-height:1.5;}

.flw-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.flw-tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:13px;}
.flw-tbl th{height:32px;text-align:left;font-size:12px;font-weight:500;color:var(--text2);background:var(--surface2);padding:0 10px;white-space:nowrap;}
.flw-tbl td{padding:10px;border-top:1px solid var(--border);vertical-align:middle;}
.flw-tbl td.nw{white-space:nowrap;}
.flw-tbl-wrap{overflow-x:auto;border-radius:8px;}
.flw-tbl tr.sub td{background:color-mix(in srgb,var(--surface2) 40%,var(--surface));}
.flw-tbl a{color:var(--accent);}
.flw-filetab{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:4px 16px 16px;}

.flw-modal{width:min(520px,92vw);display:flex;flex-direction:column;gap:10px;}
.flw-modal h3{font-size:16px;font-weight:700;margin:0 0 4px;}
.flw-modal label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text2);}
.flw-modal label.flw-chk{flex-direction:row;}
.flw-modal textarea.oc-in{height:auto;padding:8px 10px;resize:vertical;}
.flw-np-task{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.flw-modal-f{display:flex;justify-content:flex-end;gap:6px;border-top:1px solid var(--border);padding-top:12px;margin-top:4px;}
.flw-imp-out{font-size:13px;display:flex;flex-direction:column;gap:4px;}

@media (max-width: 860px){
  .flw-wrap{padding:16px;}
  .flw-layout{grid-template-columns:1fr;}
  .flw-side{position:static;max-height:220px;}
  .flw-phead{flex-direction:column;}
}