1111111<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>조직도 생성기</title>
<style>
  :root{
    --bg:#eef1f6; --panel:#ffffff; --line:#c7d0e0; --ink:#12203a; --muted:#59637a;
    --brand:#1f5fa8; --brand-2:#2b7fd6; --accent:#0c6ea8;
    --hq:#1c3f6e; --hq-ink:#ffffff;
    --box:#ffffff; --box-line:#9db0cc; --box-head:#e8eefb; --box-head-ink:#16305a;
    --leader:#12305c; --badge:#fff7e0; --badge-line:#e2c574; --badge-ink:#6b4e0a;
    --sum-head:#1c3f6e;
    --box-w:210px; --box-font:13px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{font-family:"맑은 고딕","Malgun Gothic",system-ui,sans-serif;background:var(--bg);color:var(--ink);}
  /* ===== toolbar ===== */
  #bar{position:sticky;top:0;z-index:50;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
    padding:8px 12px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 6px rgba(20,40,80,.06)}
  #bar .grow{flex:1}
  #title{font-size:18px;font-weight:800;border:1px solid transparent;background:transparent;color:var(--ink);
    padding:4px 8px;border-radius:8px;min-width:220px}
  #title:focus{outline:none;border-color:var(--line);background:#f7f9ff}
  button.btn{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);
    padding:7px 11px;border-radius:9px;font-size:13px;font-weight:700;display:inline-flex;gap:5px;align-items:center}
  button.btn:hover{background:#f2f6ff;border-color:var(--brand-2)}
  button.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
  button.btn.primary:hover{background:var(--brand-2)}
  .zoom{display:inline-flex;align-items:center;gap:4px}
  .zoom b{font-variant-numeric:tabular-nums;min-width:42px;text-align:center;font-size:13px}
  /* ===== control panel (labels) ===== */
  #labelPanel{position:sticky;top:52px;z-index:40;display:none;gap:10px;align-items:center;flex-wrap:wrap;
    padding:7px 12px;background:#f6f9ff;border-bottom:1px solid var(--line)}
  #labelPanel.on{display:flex}
  #labelPanel .ttl{font-weight:800;font-size:12px;color:var(--muted)}
  #labelPanel label{display:inline-flex;gap:4px;align-items:center;font-size:12.5px;font-weight:700;
    background:#fff;border:1px solid var(--line);border-radius:20px;padding:3px 10px;cursor:pointer;user-select:none}
  #labelPanel label:has(input:checked){background:var(--badge);border-color:var(--badge-line);color:var(--badge-ink)}
  #labelPanel input{accent-color:var(--brand)}
  /* ===== stage ===== */
  #stageWrap{overflow:auto;height:calc(100vh - 54px)}
  #stage{transform-origin:0 0;position:relative;min-width:100%;min-height:100%;padding:24px}
  #canvas{position:relative;width:2400px;height:1400px}
  /* 배경 그리드(관리자 편집 시): 10px 미세 + 50px 굵은 눈금 → 정렬 가이드 */
  #canvas.grid-on{background-image:
    linear-gradient(to right, rgba(90,110,150,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(90,110,150,.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(90,110,150,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(90,110,150,.12) 1px, transparent 1px);
    background-size:10px 10px,10px 10px,50px 50px,50px 50px}
  body.capturing #canvas.grid-on{background-image:none}
  #chartTitle{position:absolute;left:0;top:0;text-align:center;font-size:22px;font-weight:900;
    color:var(--ink);white-space:nowrap;pointer-events:none;padding:2px 12px;border-radius:8px;z-index:4}
  body[data-role="admin"] #chartTitle{pointer-events:auto;cursor:grab}
  body[data-role="admin"] #chartTitle:hover{background:rgba(43,127,214,.10);outline:1px dashed var(--brand-2)}
  body.capturing #chartTitle{outline:none!important}
  /* ===== boxes ===== */
  .box{position:absolute;width:var(--box-w);background:var(--box);border:1.5px solid var(--box-line);border-radius:10px;
    box-shadow:0 2px 8px rgba(20,40,80,.10);overflow:visible;z-index:2}
  .box.hq{width:var(--box-w);border-color:var(--hq);box-shadow:0 3px 12px rgba(20,40,80,.20)}
  .box .bhead{background:var(--box-head);color:var(--box-head-ink);font-weight:800;font-size:13.5px;
    padding:6px 24px;border-radius:8px 8px 0 0;cursor:grab;display:flex;justify-content:center;gap:6px;align-items:center;position:relative;text-align:center}
  .box.hq .bhead{background:var(--hq);color:var(--hq-ink);border-radius:8px 8px 0 0;font-size:14.5px}
  .box .bhead .cnt{position:absolute;right:7px;top:50%;transform:translateY(-50%);
    font-size:11px;font-weight:800;opacity:.85;background:rgba(255,255,255,.35);
    border-radius:10px;padding:1px 7px;white-space:nowrap}
  .box.hq .bhead .cnt{background:rgba(255,255,255,.20)}
  .box .body{padding:3px 0}
  .box.hq .hqlead{padding:3px 10px;font-size:var(--box-font);font-weight:800;text-align:center}
  .prow{position:relative;padding:var(--row-pad,3px) 10px;font-size:var(--box-font);line-height:1.28;border-top:1px dashed #eef1f7;text-align:center}
  .prow:first-child{border-top:none}
  .prow .role{color:var(--muted);font-weight:700;font-size:11.5px;margin-right:3px}
  .prow.lead .nm{font-weight:800;color:var(--leader)}
  .prow .nm{font-weight:600}
  .box.hq .body{padding:5px 10px;font-size:12.5px;color:#33507e;text-align:center}
  /* ===== CEO / custom / committee boxes ===== */
  .box.ceo{width:auto;min-width:150px;border-color:#0d2a52;border-width:2px}
  .box.ceo .bhead{background:#0d2a52;color:#fff;font-size:16px;justify-content:center;flex-direction:row;align-items:baseline;gap:14px;text-align:center}
  .box.ceo .bhead .nm{font-weight:900;font-size:16px;color:#fff}
  .box.ceo .bhead .rl{font-weight:900;font-size:16px;color:#fff}
  /* 위원회 등 = 본부/팀처럼 색 있는 박스(색상 선택) + 글자크기·행간 설정 반영 */
  .box.custom .bhead{color:#fff;font-weight:800}      /* 배경색은 렌더에서 committeeColor 인라인 */
  .box.custom .body{padding:3px 0}
  .box.custom .cline{padding:var(--row-pad,3px) 10px;font-size:var(--box-font);line-height:1.28;
    text-align:center;border-top:1px dashed #eef1f7;color:var(--ink);font-weight:600}
  .box.custom .cline:first-child{border-top:none}
  .box.custom .tools{right:6px}
  .box .tools{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;gap:4px;align-items:center}
  .box .tools button{all:unset;cursor:pointer;font-size:11px;opacity:.85;padding:0 2px}
  .box .tools button:hover{opacity:1}
  /* ===== 위원회 스택(좌/우, 여러 위원회가 세로로 붙어 하나의 보라색 박스) ===== */
  .committee-stack{position:absolute;z-index:2;border-radius:10px;overflow:hidden;background:#fff;
    box-shadow:0 1px 5px rgba(0,0,0,.14)}   /* 테두리색은 렌더에서 committeeColor 인라인 */
  .committee-stack .committee + .committee .chead{border-top:1px solid rgba(255,255,255,.45)}
  .committee .chead{position:relative;padding:7px 24px;color:#fff;font-weight:800;
    font-size:var(--box-font);line-height:1.28;text-align:center;cursor:grab}
  body[data-role=viewer] .committee .chead{cursor:default}
  .committee .chead .ctools{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;gap:5px}
  .committee .chead .ctools button{all:unset;cursor:pointer;font-size:11px;opacity:.9;color:#fff}
  .committee .chead .ctools button:hover{opacity:1}
  .committee .cbody{background:#fff}
  .committee .cmember{padding:var(--row-pad,3px) 10px;font-size:var(--box-font);line-height:1.28;
    text-align:center;color:var(--ink);font-weight:600;border-top:1px dashed #eef1f7}
  .committee .cmember:first-child{border-top:none}
  .committee-stack .committee-resizer{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:ew-resize;z-index:7}
  .committee-stack .committee-resizer:hover{background:linear-gradient(90deg,transparent,rgba(107,74,158,.35))}
  .cwire-handle{position:absolute;z-index:9;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;cursor:grab}
  .cwire-handle:hover{background:rgba(107,74,158,.20);outline:2px solid #6b4a9e;outline-offset:-2px}
  body.capturing .cwire-handle,body.capturing .committee-resizer,body.capturing .committee .ctools{display:none!important}
  /* ===== per-box resize handle ===== */
  .box-resizer{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:ew-resize;z-index:7;border-radius:0 8px 8px 0}
  .box-resizer:hover{background:linear-gradient(90deg,transparent,rgba(43,127,214,.30))}
  /* ===== page layout controls / frame ===== */
  select.pgsel{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);
    padding:6px 8px;border-radius:9px;font-size:13px;font-weight:700}
  #pageFrame{position:absolute;z-index:0;border:2px dashed #b06a2a;border-radius:6px;
    background:rgba(176,106,42,.045);pointer-events:none}
  #pageFrame .pf-label{position:absolute;left:0;top:-24px;font-size:12px;font-weight:800;color:#9c520f;
    white-space:nowrap;pointer-events:auto;cursor:grab;background:rgba(255,255,255,.82);padding:2px 8px;border-radius:6px;
    border:1px solid #e0c19a}
  #pageFrame .pf-resizer{position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;background:#fff;
    border:2px solid #b06a2a;border-radius:4px;cursor:nwse-resize;pointer-events:auto}
  body.capturing #pageFrame{display:none!important}
  /* 전체화면 = 페이지(용지) 미리보기 */
  .fs-page{position:relative;overflow:hidden;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.25);margin:0 auto}
  /* ===== connector endpoint drag hit-area (선 연결점 이동) — 동그라미 없이 투명, 호버 시만 표시 ===== */
  .whandle{position:absolute;z-index:9;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
    background:transparent;border:none;cursor:grab}
  .whandle:hover{background:rgba(43,127,214,.20);outline:2px solid var(--brand-2);outline-offset:-2px}
  body.capturing .whandle,body.capturing .box-resizer{display:none!important}
  /* 대표–본부 연결선 상하 드래그 핸들 */
  .ceobus-handle{position:absolute;z-index:9;cursor:ns-resize;background:transparent;border-radius:4px}
  .ceobus-handle:hover{background:rgba(43,127,214,.18);outline:1px dashed var(--brand-2)}
  body.capturing .ceobus-handle{display:none!important}
  /* ===== floating badges (outside box) ===== */
  .badge{position:absolute;z-index:5;background:transparent;border:none;color:var(--ink);
    font-size:12px;font-weight:700;padding:0;white-space:nowrap;cursor:grab;box-shadow:none;line-height:1.3}
  .badge:active{cursor:grabbing}
  .badge .bk{opacity:.7;font-weight:700;margin-right:2px}
  /* ===== connectors ===== */
  #wires{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1}
  #wires path{stroke:var(--box-line);stroke-width:1.6;fill:none}
  /* ===== summary panels ===== */
  .sum{position:absolute;z-index:6;background:#fff;border:1.5px solid var(--hq);border-radius:10px;
    box-shadow:0 3px 12px rgba(20,40,80,.16);min-width:120px;overflow:hidden}
  .sum .shead{background:var(--sum-head);color:#fff;font-weight:800;font-size:13px;padding:6px 10px;cursor:grab;
    display:flex;justify-content:space-between;align-items:center;gap:8px}
  .sum table{border-collapse:collapse;width:100%;font-size:12px;table-layout:fixed}
  .sum th,.sum td{border:1px solid #d6deec;padding:3px 6px;text-align:center;overflow:hidden;
    white-space:normal;word-break:break-all}
  .sum th{position:relative}
  /* 표 전체 좌우 너비 조절 핸들(우측 끝) */
  .sum-resizer{position:absolute;top:0;right:0;width:9px;height:100%;cursor:ew-resize;z-index:8}
  .sum-resizer:hover{background:linear-gradient(90deg,transparent,rgba(43,127,214,.35))}
  /* 표 안 열 너비 조절 핸들(각 헤더칸 우측) */
  .sum .col-rz{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:9}
  .sum .col-rz:hover{background:rgba(43,127,214,.40)}
  body.capturing .sum-resizer,body.capturing .sum .col-rz{display:none!important}
  .sum th{background:#eef3fb;color:#1c3f6e;font-weight:800}
  .sum td.l{text-align:left;font-weight:700}
  .sum tr.tot td{background:#f3f6fd;font-weight:800}
  .sum tr.etc td.l{color:#8a5a1e}
  .sum td input.sum-in{width:100%;box-sizing:border-box;padding:2px 3px;border:1px solid #e3e8f2;border-radius:5px;
    font:inherit;text-align:center;background:#fbfdff;color:#12203a}
  .sum tr.etc td input.sum-in{background:#fffdf6}
  .sum td input.sum-in:focus{outline:none;border-color:var(--brand-2);background:#fff}
  .sum td input.sum-in::-webkit-outer-spin-button,.sum td input.sum-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  body.capturing .sum td input.sum-in{border:none;background:none;-webkit-appearance:none;appearance:none}
  /* ===== empty state ===== */
  #empty{position:absolute;left:50%;top:120px;transform:translateX(-50%);text-align:center;color:var(--muted)}
  #empty .big{font-size:40px}
  #empty h2{margin:10px 0 6px;color:var(--ink)}
  /* ===== settings panel ===== */
  #stylePanel{position:sticky;top:52px;z-index:40;display:none;gap:18px;align-items:center;flex-wrap:wrap;
    padding:8px 12px;background:#f3f0fb;border-bottom:1px solid var(--line)}
  #stylePanel.on{display:flex}
  #stylePanel .grp{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;font-weight:700;color:#3a2f5a}
  #stylePanel input[type=range]{width:120px;accent-color:#6b4a9e}
  #stylePanel select{font-size:12.5px;padding:3px 6px;border:1px solid var(--line);border-radius:7px}
  #stylePanel .sw{width:20px;height:20px;border-radius:6px;border:1px solid #0003;cursor:pointer}
  #stylePanel .sw.sel{outline:2px solid #6b4a9e;outline-offset:1px}
  /* ===== role ===== */
  body[data-role="viewer"] .admin-only{display:none!important}
  #btnRole.admin{background:#1d6a52;border-color:#1d6a52;color:#fff}
  /* ===== fullscreen overlay ===== */
  #fs{position:fixed;inset:0;background:#f4f6fb;z-index:250;display:none;flex-direction:column}
  #fs.on{display:flex}
  #fsbar{display:flex;gap:8px;align-items:center;padding:8px 14px;background:#0d2a52;color:#fff;flex-wrap:wrap}
  #fsbar .t{font-weight:800;font-size:15px}
  #fsbar .grow{flex:1}
  #fsbar button{cursor:pointer;border:1px solid #ffffff55;background:#ffffff1a;color:#fff;padding:6px 12px;border-radius:8px;font-weight:700;font-size:13px}
  #fsbar button:hover{background:#ffffff33}
  #fsview{flex:1;overflow:auto;position:relative}
  #fsstage{transform-origin:0 0;position:relative;padding:24px}
  /* ===== modal ===== */
  #modal{position:fixed;inset:0;background:rgba(15,25,45,.45);z-index:300;display:none;align-items:center;justify-content:center}
  #modal.on{display:flex}
  #modal .card{background:#fff;border-radius:14px;padding:18px;width:min(460px,92vw);box-shadow:0 12px 40px rgba(0,0,0,.3)}
  #modal h3{margin:0 0 10px;font-size:16px}
  #modal label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin:8px 0 3px}
  #modal input,#modal textarea{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit}
  #modal textarea{min-height:120px;resize:vertical}
  #modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
  /* toast */
  #toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);opacity:0;
    background:#12203a;color:#fff;padding:9px 16px;border-radius:10px;font-size:13px;font-weight:700;
    transition:.25s;z-index:200;pointer-events:none}
  #toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
  /* ===== 로그인(내부용 가짜) ===== */
  #login{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#16305a,#2b7fd6)}
  #login.on{display:flex}
  #login .card{background:#fff;border-radius:16px;padding:30px 26px;width:min(360px,92vw);box-shadow:0 24px 70px rgba(0,0,0,.45)}
  #login h2{margin:0 0 4px;font-size:20px;text-align:center;color:var(--ink)}
  #login .sub{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:20px}
  #login input{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px;font:inherit;margin-bottom:11px}
  #login input:focus{outline:none;border-color:var(--brand-2)}
  #login .lgbtn{width:100%;padding:12px;border:none;border-radius:9px;background:var(--brand);color:#fff;font-weight:800;font-size:15px;cursor:pointer}
  #login .lgbtn:hover{background:var(--brand-2)}
  #login .err{color:#c0392b;font-size:12.5px;text-align:center;min-height:18px;margin-top:9px;font-weight:700}

  /* 공용 오버레이 모달(비밀번호 변경 / 저장공간 관리) */
  .ov-modal{position:fixed;inset:0;background:rgba(15,25,45,.45);z-index:320;display:none;align-items:center;justify-content:center;padding:16px}
  .ov-modal.on{display:flex}
  .ov-modal .card{background:#fff;border-radius:14px;padding:18px 20px;width:min(430px,94vw);box-shadow:0 16px 50px rgba(0,0,0,.32)}
  .ov-modal h3{margin:0 0 12px;font-size:16px}
  .ov-modal label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:9px 0 3px}
  .ov-modal input{width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;font:inherit;box-sizing:border-box}
  .ov-modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:15px}
  .sbar{height:12px;border-radius:7px;background:#e7ecf1;overflow:hidden;margin-top:12px;border:1px solid var(--line)}
  .sb-fill{height:100%;background:linear-gradient(90deg,#1f9e78,#15795e);transition:width .3s}
  .sb-fill.warn{background:linear-gradient(90deg,#e0a92e,#c07a12)}
  .sb-fill.danger{background:linear-gradient(90deg,#e0592e,#b3311a)}
  /* ===== 회원현황 뷰 ===== */
  #membersArea{display:none;padding:18px;max-width:1120px;margin:0 auto}
  body.view-members #membersArea{display:block}
  body.view-members #stageWrap{display:none}
  body.view-members #labelPanel,body.view-members #stylePanel{display:none!important}
  body.view-members .chart-only{display:none!important}
  .mem-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 12px rgba(20,40,80,.10)}
  .mem-table th,.mem-table td{border:1px solid #dce3ef;padding:6px 9px;text-align:center}
  .mem-table th{background:var(--hq);color:#fff;font-weight:800}
  .mem-table input,.mem-table select{width:100%;border:1px solid transparent;background:transparent;padding:4px;font:inherit;text-align:center;color:var(--ink)}
  .mem-table input:focus,.mem-table select:focus{outline:none;border-color:var(--brand-2);background:#f7f9ff}
  /* ===== print ===== */
  @media print{
    @page{size:A2 landscape;margin:8mm}
    #bar,#labelPanel,#toast{display:none!important}
    #stageWrap{overflow:visible;height:auto}
    #stage{transform:none!important}
    .box{box-shadow:none}
    .whandle,.box-resizer,.cwire-handle,.committee-resizer,.committee .ctools{display:none!important}
    #canvas{background-image:none!important}
  }
</style>

<div id="bar">
  <input id="title" value="2026년 조직도" />
  <span class="chart-only" id="snapDateLbl" style="display:none;font-weight:800;font-size:12.5px;color:var(--muted)">조직도 날짜</span>
  <select class="pgsel chart-only" id="snapDate" style="display:none" title="조직도 생성일자(업데이트 날짜) 선택"></select>
  <input type="file" id="rawFiles" accept=".xlsx,.xls" multiple hidden />
  <button class="btn primary admin-only chart-only" id="btnUpload" title="직원현황 엑셀 파일을 선택하면 그 파일로 조직도를 구성합니다 (여러 파일을 고르고 파일명에 2026_06_31 같은 날짜가 있으면 날짜별로 등록)">📤 직원현황 업로드</button>
  <button class="btn admin-only chart-only" id="btnAddNode" title="본부/팀 추가 + 위원회(좌/우) 추가·삭제·구성원 관리">＋ 조직 추가</button>
  <button class="btn admin-only chart-only" id="btnDelNode" title="본부·팀·추가 조직 삭제/복원">🗑 조직 삭제</button>
  <button class="btn admin-only chart-only" id="btnLabels">🏷 부가정보</button>
  <button class="btn admin-only chart-only" id="btnStyle">⚙ 표시설정</button>
  <button class="btn admin-only chart-only" id="btnRelayout" title="자동 정렬로 되돌립니다">🧭 자동정렬</button>
  <button class="btn admin-only chart-only" id="btnSample" title="가상 데이터로 미리보기">🧪 샘플</button>
  <span class="grow"></span>
  <span class="zoom chart-only">
    <button class="btn" id="zOut">−</button><b id="zVal">100%</b><button class="btn" id="zIn">＋</button>
  </span>
  <button class="btn primary chart-only" id="btnFull">⛶ 전체화면</button>
  <button class="btn admin-only chart-only" id="btnXlsx">📗 엑셀</button>
  <button class="btn admin-only" id="btnMembers" title="로그인 계정 관리">👥 회원현황</button>
  <button class="btn admin-only" id="btnStorage" title="저장공간·데이터 관리(삭제)" style="display:none">🗄 저장공간</button>
  <button class="btn" id="btnPasswd" title="내 비밀번호 변경" style="display:none">🔑 비밀번호</button>
  <button class="btn" id="btnUser">로그아웃</button>
</div>

<div id="labelPanel">
  <span class="ttl">박스 밖에 표시할 부가정보 (드래그로 이동):</span>
  <span id="labelToggles"></span>
</div>

<div id="stylePanel">
  <span class="grp">박스 너비 <input type="range" id="stW" min="170" max="340" step="5"/><b id="stWv">210</b></span>
  <span class="grp">글자 크기 <input type="range" id="stF" min="11" max="17" step="1"/><b id="stFv">13</b></span>
  <span class="grp" style="border-left:2px solid #cbb8e6;padding-left:12px">제목 글자 <input type="range" id="stTF" min="14" max="44" step="1"/><b id="stTFv">22</b></span>
  <span class="grp">제목 글자색 <button class="btn" id="btnTitleColor" style="padding:5px 10px">🎨</button><span id="titleColorDot" class="sw" style="width:22px;height:22px;margin-left:5px"></span></span>
  <span class="grp">제목 상자색 <button class="btn" id="btnTitleBg" style="padding:5px 10px">🎨</button><span id="titleBgDot" class="sw" style="width:22px;height:22px;margin-left:5px"></span></span>
  <span class="grp">박스 안 표시
    <select id="stFmt">
      <option value="posName">직위 + 성명 (팀장·단장은 직책)</option>
      <option value="nameOnly">성명</option>
      <option value="deptOnly">부서만 (성명 없이)</option>
    </select>
  </span>
  <span class="grp">행간 <input type="range" id="stRow" min="0" max="8" step="1"/><b id="stRowv">3</b></span>
  <span class="grp">대표–본부 간격 <input type="range" id="stTop" min="140" max="440" step="10"/><b id="stTopv">214</b></span>
  <span class="grp">대표–본부 연결선 <input type="range" id="stBus" min="8" max="440" step="2"/><b id="stBusv">18</b></span>
  <span class="grp">부가정보 간격 <input type="range" id="stGap" min="30" max="100" step="2"/><b id="stGapv">46</b></span>
  <span class="grp">본부 색 <button class="btn" id="btnHqColor" style="padding:5px 10px">🎨 색 선택</button><span id="hqColorDot" class="sw" style="width:22px;height:22px;margin-left:5px"></span></span>
  <span class="grp">팀 색 <button class="btn" id="btnTeamColor" style="padding:5px 10px">🎨 색 선택</button><span id="teamColorDot" class="sw" style="width:22px;height:22px;margin-left:5px"></span></span>
  <span class="grp">위원회 색 <button class="btn" id="btnCommColor" style="padding:5px 10px">🎨 색 선택</button><span id="commColorDot" class="sw" style="width:22px;height:22px;margin-left:5px"></span></span>
  <span class="grp">인원현황표
    <label style="display:inline-flex;gap:3px;align-items:center;font-weight:700;cursor:pointer"><input type="checkbox" id="shHq"/>본부별</label>
    <label style="display:inline-flex;gap:3px;align-items:center;font-weight:700;cursor:pointer"><input type="checkbox" id="shGo"/>사무직</label>
    <label style="display:inline-flex;gap:3px;align-items:center;font-weight:700;cursor:pointer"><input type="checkbox" id="shGp"/>생산직</label>
    <label style="display:inline-flex;gap:3px;align-items:center;font-weight:700;cursor:pointer"><input type="checkbox" id="shFac"/>공장별</label>
  </span>
</div>

<div id="modal"><div class="card">
  <h3 id="mdTitle">편집</h3>
  <div id="mdBody"></div>
  <div class="row">
    <button class="btn" id="mdCancel">취소</button>
    <button class="btn primary" id="mdOk">확인</button>
  </div>
</div></div>

<div id="stageWrap">
  <div id="stage">
    <div id="canvas">
      <div id="chartTitle"></div>
      <svg id="wires"></svg>
      <div id="empty">
        <div class="big">🏢</div>
        <h2>직원현황 엑셀을 업로드하세요</h2>
        <div>본부·부서·직급·직책 기준으로 조직도를 자동 생성합니다.<br/>박스는 드래그로 옮기고, 부가정보는 켜서 원하는 위치에 배치할 수 있습니다.</div>
      </div>
    </div>
  </div>
</div>

<div id="membersArea">
  <div style="display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap">
    <h2 style="margin:0;font-size:18px">👥 회원현황 (로그인 계정)</h2>
    <span id="memCount" style="color:var(--muted);font-size:13px"></span>
    <span style="flex:1"></span>
    <button class="btn" id="memAdd">＋ 계정 추가</button>
    <button class="btn" id="memDown">📥 엑셀 다운로드</button>
    <button class="btn" id="memUp">📤 엑셀 업로드</button>
    <input type="file" id="memFile" accept=".xlsx,.xls" hidden/>
    <button class="btn primary" id="memBack">← 조직도</button>
  </div>
  <div id="membersList"></div>
  <div style="font-size:11.5px;color:var(--muted);margin-top:10px">여기 등록된 <b>지정 인원만</b> 로그인할 수 있습니다. 아이디=사번, 권한=관리자(편집)/열람자(보기). 엑셀 머리글: <b>아이디 · 성명 · 권한</b>(선택: 비밀번호). 업로드는 아이디 기준 <b>업서트</b>(기존 유지, 새 계정 추가)이며, 비밀번호 칸이 비면 기존 비번을 유지합니다. 조직도에 표시되는 직원 명단(부가정보)은 이 계정 목록이 아니라 <b>Rawdata 엑셀</b>에서 옵니다.</div>
</div>

<div id="login">
  <div class="card">
    <h2>관리본부 조직도</h2>
    <div class="sub">로그인 허가된 인원만 접속할 수 있습니다.</div>
    <input id="lgId2" placeholder="아이디 (사번)" autocomplete="username"/>
    <input id="lgPw2" type="password" placeholder="비밀번호" autocomplete="current-password"/>
    <button class="lgbtn" id="lgBtn">로그인</button>
    <div class="err" id="lgErr"></div>
    <div style="margin-top:12px;font-size:11px;color:var(--muted)">관리자에게 발급받은 계정으로 로그인하세요.</div>
  </div>
</div>

<!-- 본인 비밀번호 변경 모달 -->
<div id="pwModal" class="ov-modal">
  <div class="card">
    <h3>🔑 비밀번호 변경</h3>
    <label>현재 비밀번호</label><input id="pwCur" type="password" autocomplete="current-password"/>
    <label>새 비밀번호 (4자 이상)</label><input id="pwNew" type="password" autocomplete="new-password"/>
    <label>새 비밀번호 확인</label><input id="pwNew2" type="password" autocomplete="new-password"/>
    <div id="pwMsg" style="font-size:12.5px;min-height:18px;color:#c0392b;margin-top:6px"></div>
    <div class="row"><button class="btn" id="pwCancel">취소</button><button class="btn primary" id="pwOk">변경하기</button></div>
  </div>
</div>

<!-- 저장공간 / 데이터 관리 모달(관리자) -->
<div id="stModal" class="ov-modal">
  <div class="card" style="width:min(540px,94vw)">
    <h3>🗄 저장공간 · 데이터 관리</h3>
    <div id="stSummary" style="font-size:12.5px;color:var(--muted);line-height:1.6">측정 중…</div>
    <div class="sbar"><div id="sbFill" class="sb-fill" style="width:0.4%"></div></div>
    <div id="sbText" style="font-size:11.5px;color:var(--muted);margin-top:4px"></div>
    <div style="border-top:1px solid var(--line);margin:14px 0 0;padding-top:12px;display:flex;flex-direction:column;gap:9px">
      <button class="btn" id="stClearData" style="text-align:left">🗑 조직도 데이터 전체 삭제 <span style="color:var(--muted);font-weight:500">(히스토리 포함 · 계정 유지)</span></button>
      <button class="btn" id="stClearAudit" style="text-align:left">📜 변경 이력 비우기 <span style="color:var(--muted);font-weight:500">(작성자 기록만 삭제)</span></button>
      <button class="btn" id="stWipe" style="text-align:left;border-color:#e0b4b4;color:#a23">⚠️ 전체 초기화 <span style="color:var(--muted);font-weight:500">(모든 데이터+타 계정 삭제, 관리자 보존)</span></button>
    </div>
    <div style="font-size:11px;color:var(--muted);margin-top:10px">삭제는 되돌릴 수 없습니다. 조직도는 로컬 Rawdata 엑셀로 언제든 다시 구성할 수 있습니다.</div>
    <div class="row"><button class="btn primary" id="stClose">닫기</button></div>
  </div>
</div>

<div id="fs">
  <div id="fsbar">
    <span class="t" id="fsTitle">조직도</span>
    <span class="fspg-lbl" style="font-size:12px;font-weight:700;color:#334">용지</span>
    <select class="pgsel" id="fsPgSize" title="용지 크기(가로) — 선택 시 미리보기 배율 자동 적용" style="color:#12203a"><option value="A3">A3 가로</option><option value="A4">A4 가로</option></select>
    <span class="grow"></span>
    <span class="zoom" style="gap:6px"><button id="fsZOut">−</button><b id="fsZv" style="min-width:44px;text-align:center">100%</b><button id="fsZIn">＋</button></span>
    <button id="fsPdf">📄 PDF 저장</button>
    <button id="fsImg">🖼 이미지 저장</button>
    <button id="fsPrint">🖨 인쇄</button>
    <button id="fsClose">✕ 닫기</button>
  </div>
  <div id="fsview"><div id="fsstage"></div></div>
</div>

<div id="toast"></div>

<script src="https://fastly.jsdelivr.net/npm/xlsx-js-style@1.2.0/dist/xlsx.bundle.js"></script>
<script src="https://fastly.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script>
/* =========================================================================
   조직도 생성기 — 단일 파일 (내부 PC용, localStorage)
   입력: 직원현황.xlsx (16컬럼)  →  자동 조직도 + 수동조정 + 부가정보 라벨 + 집계표
   ========================================================================= */
const LS_KEY = 'orgchart-v1';
const COLS = ['No','본부명','부서명','성명','직위명','직급명','직책명','직군명','사원구분명','직무명','재직상태명','성별','그룹입사일','현직급승진일','나이','메일주소'];

/* 직급/직책 정렬 우선순위 (작을수록 위) */
const RANK_ORDER = ['사장','부사장','전무','상무','이사','수석','책임','선임','주임','사원'];
const TITLE_ORDER = ['사장','부사장','전무','상무','본부장','소장','원장','단장','실장','센터장','공장장','지점장','팀장','파트장','그룹장'];
const LEADER_KW = TITLE_ORDER; // 직책명이 이 중 하나면 리더로 취급
const HQ_LEAD_KW = ['사장','부사장','전무','상무','본부장','소장','원장','단장','센터장']; // 본부 대표

/* 부가정보로 켤 수 있는 항목: 근속년수·나이·직무·성별·현직급 체류기간 (박스 밖, 값만 표시) */
const LABEL_FIELDS = ['직급','근속년수','나이','직무','성별','현직급체류기간'];
const LABEL_SHORT = {}; // 값만 표시(접두 라벨 없음)

/* ------- 상태 ------- */
let emp = [];               // 직원 배열 (원본 행)
let ui = defaultUI();
function defaultUI(){ return { title:'2026년 조직도', pos:{}, boxW:{}, wireAnchor:{}, labels:{enabled:{}, off:{}}, sumPos:{}, zoom:1,
  style:{ boxW:210, fontPx:13, lineFmt:'posName', accent:'#1c3f6e', teamColor:'#1c3f6e', committeeColor:'#6b4a9e', hqTop:214, badgeGap:46, ceoBus:18, rowPad:3,
          titleFont:22, titleColor:'', titleBg:'none' },
  page:{ size:'A3', orient:'landscape' }, pageFrame:null, showFrame:true, titlePos:null, hidden:{}, sumEdits:{}, sumColW:{}, sumHidden:{},
  ceo:{ role:'사장', name:'O O O', auto:true }, customBoxes:[],
  committees:{left:[],right:[]}, committeePos:{left:null,right:null}, committeeW:{left:0,right:0}, committeeWire:{left:null,right:null} }; }

/* ------- 저장/로드 ------- */
let saveT=null, pendingDetail='', worklogVersion=0;
/* 저장: 관리자만 서버(D1)에 조직도 전체 상태를 PUT(디바운스). 열람자의 save() 호출은 무시됨. */
function save(detail){ if(detail) pendingDetail=detail; if(!isAdmin()) return; clearTimeout(saveT); saveT=setTimeout(persistNow,400); }
async function persistNow(){
  clearTimeout(saveT); saveT=null;
  if(!isAdmin()) return;
  const detail=pendingDetail; pendingDetail='';
  try{ const r=await api('orgchart',{ method:'PUT', body:JSON.stringify({ state:{emp,ui,snapshots,snapDate}, baseVersion:worklogVersion, detail:detail||'조직도 저장' }) }); if(r&&r.version) worklogVersion=r.version; }
  catch(e){ toast('저장 실패: '+((e&&e.message)||'')); }
}
/* 로드: 서버에서 조직도 상태를 받아 applyState */
async function loadOrg(){ let o=null; try{ const r=await api('orgchart'); o=r&&r.state; worklogVersion=(r&&r.version)||0; }catch(e){ o=null; } applyState(o); }
function applyState(o){
  try{
    o=o||{};
    emp = Array.isArray(o.emp)?o.emp:[];
    snapshots = (o.snapshots && typeof o.snapshots==='object')?o.snapshots:{};
    snapDate = o.snapDate||'';
    if(snapDate && snapshots[snapDate]) emp=snapshots[snapDate].slice();
    const d=defaultUI();
    ui = Object.assign(d, o.ui||{});
    ui.labels = Object.assign({enabled:{},off:{}}, ui.labels||{});
    ui.style = Object.assign(d.style, ui.style||{});
    // 표시형식: posName(직위+성명, 팀장·단장 등 리더는 직책) | nameOnly(성명) | deptOnly(부서만)
    if(!['posName','nameOnly','deptOnly'].includes(ui.style.lineFmt)) ui.style.lineFmt='posName';
    if(typeof ui.style.teamColor!=='string') ui.style.teamColor=ui.style.accent||'#1c3f6e';
    if(typeof ui.style.hqTop!=='number') ui.style.hqTop=214;
    if(typeof ui.style.badgeGap!=='number') ui.style.badgeGap=46;
    delete ui.style.hqColor;   // 본부마다 다른색 옵션 제거
    ui.page = Object.assign({size:'A3',orient:'landscape'}, ui.page||{});
    ui.page.orient='landscape';   // 방향 선택 폐지 — 무조건 가로
    if(!['A3','A4'].includes(ui.page.size)) ui.page.size='A3';
    if(!ui.pageFrame || !ui.pageFrame.w) ui.pageFrame=null;
    ui.showFrame=true;            // 페이지 틀은 항상 표시(가운데 정렬·화면 맞춤)
    ui.ceo = Object.assign(d.ceo, ui.ceo||{});
    if(!ui.boxW || typeof ui.boxW!=='object') ui.boxW={};
    if(!ui.wireAnchor || typeof ui.wireAnchor!=='object') ui.wireAnchor={};
    delete ui.wireOff;   // 구 자유드래그 오프셋 → 앵커 방식으로 대체
    if(!Array.isArray(ui.customBoxes)) ui.customBoxes=[];
    if(typeof ui.style.ceoBus!=='number') ui.style.ceoBus=18;   // 대표–본부 연결선 위치(px)
    if(typeof ui.style.rowPad!=='number') ui.style.rowPad=3;    // 박스 안 행간(px)
    if(typeof ui.style.committeeColor!=='string') ui.style.committeeColor='#6b4a9e';   // 위원회 색
    // 위원회: 전용 구조로 분리(좌/우 스택). 구 customBoxes의 committee 종류를 이전
    if(!ui.committees || typeof ui.committees!=='object') ui.committees={left:[],right:[]};
    if(!Array.isArray(ui.committees.left)) ui.committees.left=[];
    if(!Array.isArray(ui.committees.right)) ui.committees.right=[];
    if(!ui.committeePos || typeof ui.committeePos!=='object') ui.committeePos={left:null,right:null};
    if(!ui.committeeW || typeof ui.committeeW!=='object') ui.committeeW={left:0,right:0};
    if(!ui.committeeWire || typeof ui.committeeWire!=='object') ui.committeeWire={left:null,right:null};
    if(Array.isArray(ui.customBoxes)){
      const oldC=ui.customBoxes.filter(cb=>(cb.kind||'committee')==='committee' && cb.title);
      if(oldC.length){
        // 캔버스 중앙 추정(구 위원회 x 중앙값) 기준으로 좌/우 배정
        const xs=oldC.map(c=>c.x||0).sort((a,b)=>a-b); const mid=xs.length?(xs[0]+xs[xs.length-1])/2:200;
        oldC.forEach(cb=>{
          const side=(cb.x||0) <= mid ? 'left':'right';
          ui.committees[side].push({id:cb.id||('cm'+Math.random().toString(36).slice(2)), title:cb.title, members:(cb.lines||[]).slice(), color:cb.color});
          if(!ui.committeePos[side]) ui.committeePos[side]={x:cb.x||40, y:cb.y||112};
          if(cb.w) ui.committeeW[side]=cb.w;
        });
        ui.customBoxes=ui.customBoxes.filter(cb=>(cb.kind||'committee')!=='committee');
      }
    }
    if(!ui.sumHidden || typeof ui.sumHidden!=='object') ui.sumHidden={};   // 숨긴 인원현황표
    if(!ui.hidden || typeof ui.hidden!=='object') ui.hidden={};  // 삭제(숨김) 조직 id 집합
    if(ui.titlePos && typeof ui.titlePos!=='object') ui.titlePos=null;  // 제목 수동 위치
    if(!ui.sumEdits || typeof ui.sumEdits!=='object') ui.sumEdits={};   // 집계표 셀 수기 override {표키:{행키:{열:값}}}
    if(!ui.sumColW || typeof ui.sumColW!=='object') ui.sumColW={};      // 집계표 열 너비 {표키:[px…]}
    if(ui.pageFrame && ui.pageFrame.w){ ui.pageFrame.x=Math.max(0,ui.pageFrame.x||0); ui.pageFrame.y=Math.max(0,ui.pageFrame.y||0); }  // 음수 좌표 틀 교정
    if(ui.gradeEtc && typeof ui.gradeEtc==='object'){                    // 구 gradeEtc(기타행 전용) → sumEdits로 이전
      for(const k in ui.gradeEtc){ ui.sumEdits[k]=ui.sumEdits[k]||{}; ui.sumEdits[k]['기타']=ui.gradeEtc[k]; }
      delete ui.gradeEtc;
    }
  }catch(e){}
}

/* ------- 유틸 ------- */
const $=s=>document.querySelector(s);
function toast(m){ const t=$('#toast'); t.textContent=m; t.classList.add('on'); clearTimeout(toast._t); toast._t=setTimeout(()=>t.classList.remove('on'),1900); }
function esc(s){ return String(s==null?'':s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
function rankIdx(r){ const i=RANK_ORDER.indexOf((r||'').trim()); return i<0?99:i; }
function titleIdx(t){ const i=TITLE_ORDER.indexOf((t||'').trim()); return i<0?99:i; }
function isLeader(t){ t=(t||'').trim(); return t && LEADER_KW.some(k=>t.includes(k)); }
function boxId(hq,dept){ return hq+'
'+dept; }
function empId(e){ return String(e.No!=null&&e.No!==''? e.No : (e.__id||(e.__id=Math.random().toString(36).slice(2)))); }

function today(){ return new Date(); }
function parseDate(v){
  if(v==null||v==='') return null;
  if(v instanceof Date) return v;
  if(typeof v==='number'){ // 엑셀 serial
    const d=new Date(Date.UTC(1899,11,30)); d.setUTCDate(d.getUTCDate()+Math.round(v)); return d;
  }
  const s=String(v).trim().replace(/[.]/g,'-').replace(/\//g,'-');
  const m=s.match(/(\d{4})-(\d{1,2})-(\d{1,2})/); if(m) return new Date(+m[1],+m[2]-1,+m[3]);
  const d=new Date(s); return isNaN(d)?null:d;
}
function calcTenure(v){ const d=parseDate(v); if(!d) return ''; let y=(today()-d)/(365.25*864e5); return (y<0?0:Math.floor(y))+'년'; }
function labelValue(e,field){
  if(field==='직급') return e['직급명']!=null? String(e['직급명']) : '';        // 직급명 데이터
  if(field==='근속년수') return calcTenure(e['그룹입사일']);                 // 현재날짜 − 그룹입사일
  if(field==='현직급체류기간') return calcTenure(e['현직급승진일']);          // 현재날짜 − 현직급승진일
  if(field==='나이'){ const n=e['나이']; return n?String(n).replace(/[^0-9]/g,'')+'세':''; }
  if(field==='직무') return e['직무명']!=null? String(e['직무명']) : '';      // 직무명 데이터
  if(field==='성별') return e['성별']!=null? String(e['성별']) : '';
  if(field==='그룹입사일'||field==='현직급승진일'){ const d=parseDate(e[field]); return d? `${d.getFullYear()}.${String(d.getMonth()+1).padStart(2,'0')}`:''; }
  return e[field]!=null? String(e[field]) : '';
}

/* =========================================================================
   그룹핑: 본부 → 부서(팀) → 인원(정렬)
   ========================================================================= */
function buildGroups(){
  const hqMap=new Map();                         // 본부명 -> {hq, depts:Map, all:[]}
  for(const e of emp){
    if((e['재직상태명']||'').trim() && !/재직/.test(e['재직상태명'])) continue; // 퇴직 등 제외(값 있고 재직 아니면)
    if(/사장|대표|CEO/i.test((e['직책명']||'')+(e['직위명']||''))) continue; // 최고책임자는 CEO 노드로 표현
    const hq=(e['본부명']||'(미지정 본부)').trim();
    const dept=(e['부서명']||'(직속)').trim();
    if(!hqMap.has(hq)) hqMap.set(hq,{hq,depts:new Map(),all:[]});
    const H=hqMap.get(hq); H.all.push(e);
    if(!H.depts.has(dept)) H.depts.set(dept,[]);
    H.depts.get(dept).push(e);
  }
  const sortPeople=arr=>arr.slice().sort((a,b)=>{
    const la=isLeader(a['직책명'])?0:1, lb=isLeader(b['직책명'])?0:1;
    if(la!==lb) return la-lb;
    if(la===0){ const t=titleIdx(a['직책명'])-titleIdx(b['직책명']); if(t) return t; }
    const r=rankIdx(a['직급명'])-rankIdx(b['직급명']); if(r) return r;
    return String(a['성명']||'').localeCompare(String(b['성명']||''),'ko');
  });
  const isHqLead=t=>{ t=(t||'').trim(); return t && HQ_LEAD_KW.some(k=>t.includes(k)); };
  const hqs=[];
  for(const H of hqMap.values()){
    // 본부 직속(부서 미지정) 인원 분리 → 그 중 최상위 리더를 본부 대표(본부장 등)로
    const directRaw = H.depts.get('(직속)') || [];
    const direct = sortPeople(directRaw);
    let hqLead=null, directRest=direct;
    const li = direct.findIndex(e=>isHqLead(e['직책명']));
    if(li>=0){ hqLead=direct[li]; directRest=direct.filter((_,i)=>i!==li); }
    const depts=[];
    for(const [dept,people] of H.depts){
      if(dept==='(직속)') continue;
      depts.push({dept, people:sortPeople(people), count:people.length});
    }
    hqs.push({hq:H.hq, depts, count:H.all.length, hqLead, direct:directRest});
  }
  // 삭제(숨김) 처리: 본부 숨김이면 컬럼 전체 제외, 팀 숨김이면 해당 팀만 제외
  const hidden=ui.hidden||{};
  const visible=[];
  for(const H of hqs){
    if(hidden[boxId(H.hq,'__HQ__')]) continue;
    H.depts=H.depts.filter(d=>!hidden[boxId(H.hq,d.dept)]);
    visible.push(H);
  }
  return visible;
}
/* 숨김 무시하고 전체 그룹(삭제 관리 모달용) */
function fullGroups(){ const h=ui.hidden; ui.hidden={}; const g=buildGroups(); ui.hidden=h; return g; }

/* =========================================================================
   자동 레이아웃: 본부별 세로 컬럼
   ========================================================================= */
let COL_W=210;
const COL_GAP=96, TOP=214, HQ_H=34, BOX_GAP=26, ROW_H=22, BHEAD_H=30, BPAD=6, BADGE_W=66;
function boxHeight(n){ if(ui.style.lineFmt==='deptOnly') return BHEAD_H+BPAD; return BHEAD_H + BPAD + n*rowUnit() + BPAD; }
function hqBoxHeight(H){ if(ui.style.lineFmt==='deptOnly') return HQ_H; return HQ_H + (H.hqLead?20:0) + (H.direct.length? H.direct.length*rowUnit()+BPAD:0); }
function enabledLabelCount(){ return LABEL_FIELDS.filter(f=>ui.labels.enabled[f]).length; }
/* 부가정보 항목별 가로 간격(px). 표시설정에서 조절 가능(최소화 가능) */
function badgeGap(){ return ui.style.badgeGap||46; }
let baseLayout={};   // boxId -> {x,y,type}
let orgOffsetX=0;    // 조직도(트리)를 페이지 프레임 가로 중앙으로 이동시키는 오프셋
let _frameWasNull=false;
function computeLayout(hqs){
  baseLayout={};
  COL_W=ui.style.boxW||210;
  const topY=ui.style.hqTop||TOP;   // 대표–본부 세로간격(조절 가능)
  // 부가정보 라벨을 켠 만큼 컬럼 간격을 벌려 다음 본부를 침범하지 않게 함
  const nlab=enabledLabelCount();
  const gap = nlab>0 ? (12 + nlab*badgeGap() + 24) : COL_GAP;
  let x=40;
  let maxBottom=topY;
  const cols=[];
  for(const H of hqs){
    let y=topY;
    baseLayout[boxId(H.hq,'__HQ__')]={x,y,type:'hq'};
    y+=hqBoxHeight(H)+BOX_GAP;
    for(const d of H.depts){
      baseLayout[boxId(H.hq,d.dept)]={x,y,type:'dept'};
      y+=boxHeight(d.people.length)+BOX_GAP;
    }
    cols.push({hq:H.hq,x});
    maxBottom=Math.max(maxBottom,y);
    x+=COL_W+gap;
  }
  // ── 조직도(트리) 가로 가운데 정렬 ──
  // 트리를 페이지 프레임 가로 중앙으로 이동(하단 표는 별도 위치라 영향 없음).
  // 오프셋은 '자연 위치' 기준으로 매 렌더 새로 계산 → 드리프트 없음(프레임 폭은 높이기준이라 가로이동에 불변).
  orgOffsetX=0;
  const f=pageFrame();
  _frameWasNull=!f;   // 최초 렌더(박스 없음)엔 프레임 계산 불가 → render 후 1회 재렌더로 정렬
  if(f){
    const treeW=(x-gap)-40;                      // 컬럼 전체 가로 폭
    const off=Math.round((f.x+f.w/2) - (40+treeW/2));   // 프레임 중앙 − 트리 자연중앙
    if(off>0){ orgOffsetX=off; for(const k in baseLayout) baseLayout[k].x+=off; x+=off; cols.forEach(c=>c.x+=off); }
  }
  return {rightEdge:x, bottom:maxBottom, cols};
}
function posOf(id){ return ui.pos[id] || baseLayout[id] || {x:0,y:0}; }
/* 박스별 개별 너비(없으면 공통 COL_W). 팀별 네모 크기 조정용 */
function bw(id){ return (ui.boxW && ui.boxW[id]) || COL_W; }
/* 배경 그리드 스냅: 작은 단위(간결한 정렬 유지 + 유동성). 이동·리사이즈에 적용 */
const GRID=10;
function snap(v){ return Math.round(v/GRID)*GRID; }

/* =========================================================================
   렌더
   ========================================================================= */
let curHqs=[];
function applyStyleVars(){
  document.documentElement.style.setProperty('--box-w',(ui.style.boxW||210)+'px');
  document.documentElement.style.setProperty('--box-font',(ui.style.fontPx||13)+'px');
  document.documentElement.style.setProperty('--row-pad',rowPad()+'px');
  document.documentElement.style.setProperty('--hq', ui.style.accent||'#1c3f6e');
  document.documentElement.style.setProperty('--sum-head', ui.style.accent||'#1c3f6e');
}
function rowPad(){ return (ui.style.rowPad!=null)?ui.style.rowPad:3; }   // 행간(px)
function rowUnit(){ return 16 + 2*rowPad(); }   // 인원 한 줄 높이(레이아웃 계산용, 행간 반영)
/* 본부색: 본부명 기준(모든 본부 박스 공통). 팀색: 부서명 기준.
   단 부서명이 본부명과 같으면 본부색을 우선 적용. */
function hqBaseColor(){ return ui.style.accent||'#1c3f6e'; }
function teamBaseColor(dept){
  if(curHqs.some(h=>h.hq===dept)) return hqBaseColor();   // 부서명==본부명 → 본부색 우선
  return ui.style.teamColor||ui.style.accent||'#1c3f6e';
}
function committeeColor(){ return ui.style.committeeColor||'#6b4a9e'; }   // 위원회 색
/* 추가 박스 종류(본부/팀/위원회)별 기본 색 + 라벨 */
const KIND_LABEL={hq:'본부',team:'팀',committee:'위원회'};
function kindColor(k){ return k==='hq'?hqBaseColor() : k==='team'?(ui.style.teamColor||ui.style.accent||'#1c3f6e') : committeeColor(); }
function boxKind(cb){ return cb.kind||'committee'; }
function boxColorFor(cb){ return cb.color || kindColor(boxKind(cb)); }
function render(){
  applyStyleVars();
  $('#chartTitle').textContent = ui.title||'';
  $('#title').value = ui.title||'';
  const canvas=$('#canvas');
  canvas.classList.toggle('grid-on', isAdmin() && emp.length>0);   // 배경 그리드는 관리자 편집 중에만
  // remove old boxes/badges/sums (keep wires + title + empty)
  [...canvas.querySelectorAll('.box,.badge,.sum')].forEach(n=>n.remove());
  if(!emp.length){ $('#empty').style.display=''; $('#wires').innerHTML=''; renderCustomBoxes(); renderCommittees(); return; }
  $('#empty').style.display='none';

  curHqs=buildGroups();
  const lay=computeLayout(curHqs);

  const frag=document.createDocumentFragment();
  frag.appendChild(makeCeoBox(lay));
  curHqs.forEach((H,i)=>{
    frag.appendChild(makeHqBox(H,i));
    for(const d of H.depts) frag.appendChild(makeDeptBox(H.hq,d,i));
  });
  canvas.appendChild(frag);
  renderCustomBoxes();
  renderCommittees();
  drawWires();
  renderWireHandles();
  renderCommitteeWireHandles();
  renderCeoBusHandle();
  renderBadges();
  renderSummaries(lay);
  renderPageFrame();     // 배치 가능 영역(용지) 안내
  positionTitle();       // 제목 위치(수동값 또는 프레임 중앙)
  // canvas 크기 맞춤
  fitCanvas();
  if(_frameWasNull && emp.length){ _frameWasNull=false; requestAnimationFrame(render); }   // 최초 1회 재렌더로 가운데 정렬
}
/* 제목 위치: 수동 지정값 우선, 없으면 페이지 프레임(용지) 상단 중앙 */
/* 제목 네모칸 글자 크기·글자 색·상자 색 적용(측정 전에 호출해야 가운데 정렬 정확) */
function applyTitleStyle(){
  const t=$('#chartTitle'); if(!t) return;
  const s=ui.style||{};
  t.style.fontSize=(s.titleFont||22)+'px';
  t.style.color=s.titleColor||'var(--ink)';
  if(s.titleBg && s.titleBg!=='none'){
    t.style.background=s.titleBg;
    t.style.border='1px solid rgba(0,0,0,.18)';
    t.style.boxShadow='0 1px 4px rgba(0,0,0,.14)';
    t.style.padding='5px 16px';
  } else {
    t.style.background=''; t.style.border=''; t.style.boxShadow=''; t.style.padding='';
  }
}
function positionTitle(){
  const t=$('#chartTitle'); if(!t) return;
  t.textContent=ui.title||'';
  applyTitleStyle();
  if(!emp.length){ t.style.left='40px'; t.style.top='8px'; return; }
  if(ui.titlePos && typeof ui.titlePos.x==='number'){ t.style.left=ui.titlePos.x+'px'; t.style.top=ui.titlePos.y+'px'; return; }
  const f=pageFrame() || contentBBox();
  const tw=t.offsetWidth||220, th=t.offsetHeight||30;
  if(f){
    t.style.left=Math.round(f.x + f.w/2 - tw/2)+'px';
    const ceoY=(posOf('__CEO__')||{}).y;                       // 대표 박스 위쪽에 배치(겹침 방지)
    const top = (typeof ceoY==='number') ? Math.max(Math.round(f.y)+4, Math.round(ceoY - th - 12)) : Math.round(f.y)+10;
    t.style.top=top+'px';
  } else { t.style.left='40px'; t.style.top='8px'; }
}

function personLine(e,i){
  const fmt=ui.style.lineFmt||'posName';
  const lead=isLeader(e['직책명']);
  let inner;
  if(fmt==='nameOnly'){
    inner=`<span class="nm">${esc(e['성명']||'')}</span>`;
  }else{
    // posName: 직위 + 성명 (단, 팀장 등 리더는 직위 대신 직책)
    const pre = lead ? (e['직책명']||'') : (e['직위명']||'');
    inner=`${pre?`<span class="role">${esc(pre)}</span>`:''}<span class="nm">${esc(e['성명']||'')}</span>`;
  }
  return `<div class="prow ${lead?'lead':''}" data-eid="${esc(empId(e))}" data-row="${i}">${inner}</div>`;
}
function makeCeoBox(lay){
  const id='__CEO__'; const base={x:Math.max((lay.rightEdge-orgOffsetX)/2-90,80)+orgOffsetX, y:44};
  const p=ui.pos[id]||base; if(!ui.pos[id]) baseLayout[id]=base; else baseLayout[id]=base;
  const el=document.createElement('div'); el.className='box ceo'; el.dataset.id=id;
  el.style.left=p.x+'px'; el.style.top=p.y+'px';
  el.innerHTML=`<div class="bhead" data-drag><span class="rl">${esc(ui.ceo.role||'')}</span><span class="nm">${esc(ui.ceo.name||'')}</span></div>`;
  if(ui.boxW['__CEO__']) el.style.width=ui.boxW['__CEO__']+'px';
  el.addEventListener('dblclick',e=>{ if(!isAdmin()||e.target.closest('.box-resizer'))return; editCeo(); });
  addBoxResizer(el,'__CEO__');   // 대표이사 박스도 크기 조정 가능
  makeDraggable(el);
  return el;
}
function makeHqBox(H,idx){
  const id=boxId(H.hq,'__HQ__'); const p=posOf(id);
  const el=document.createElement('div'); el.className='box hq'; el.dataset.id=id;
  el.style.left=p.x+'px'; el.style.top=p.y+'px';
  const col=hqBaseColor();
  const deptOnly = ui.style.lineFmt==='deptOnly';
  const leadHtml = (!deptOnly && H.hqLead)? `<div class="hqlead" style="background:${tint(col)};color:${col}">${esc(H.hqLead['직책명']||'')} ${esc(H.hqLead['성명']||'')}</div>`:'';
  let drows='';
  if(!deptOnly) H.direct.forEach((e,i)=>drows+=personLine(e,i));
  el.innerHTML=`<div class="bhead" data-drag style="background:${col}"><span>${esc(H.hq)}</span><span class="cnt">${H.count}명</span></div>`+
               leadHtml + (drows?`<div class="body">${drows}</div>`:'');
  if(ui.boxW[id]) el.style.width=ui.boxW[id]+'px';
  addBoxResizer(el,id);
  makeDraggable(el);
  return el;
}
function makeDeptBox(hq,d,idx){
  const id=boxId(hq,d.dept); const p=posOf(id);
  const el=document.createElement('div'); el.className='box'; el.dataset.id=id;
  el.style.left=p.x+'px'; el.style.top=p.y+'px';
  const col=teamBaseColor(d.dept);
  const deptOnly = ui.style.lineFmt==='deptOnly';
  let rows=''; if(!deptOnly) d.people.forEach((e,i)=>rows+=personLine(e,i));
  el.innerHTML=`<div class="bhead" data-drag style="background:${tint(col)};color:${col}"><span>${esc(d.dept)}</span><span class="cnt">${d.count}명</span></div>`+
               (deptOnly?'':`<div class="body">${rows}</div>`);
  if(ui.boxW[id]) el.style.width=ui.boxW[id]+'px';
  addBoxResizer(el,id);
  makeDraggable(el);
  return el;
}
/* 박스 우측 리사이즈 핸들: 팀별 네모 너비 조절(관리자). 더블클릭=기본 너비 복원 */
function addBoxResizer(el,id){
  const rz=document.createElement('div'); rz.className='box-resizer admin-only'; rz.title='드래그: 박스 너비 조절 / 더블클릭: 기본';
  el.appendChild(rz);
  rz.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin()) return; ev.preventDefault(); ev.stopPropagation();
    const startW=el.offsetWidth, sx=ev.clientX, z=ui.zoom||1;
    try{ rz.setPointerCapture(ev.pointerId); }catch(_){}
    const f=activeFrame();
    const move=e=>{ let nw=snap(startW+(e.clientX-sx)/z); nw=Math.max(120,Math.min(520,nw));
      if(f) nw=Math.max(120, Math.min(nw, Math.round(f.x+f.w-posOf(id).x)));   // 틀 밖으로 넓어지지 않게
      ui.boxW[id]=nw; el.style.width=nw+'px'; drawWires(); renderWireHandles(); moveBadgesFor(id,posOf(id)); };
    const up=()=>{ try{ rz.releasePointerCapture(ev.pointerId); }catch(_){} document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); fitCanvas(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
  rz.addEventListener('dblclick',e=>{ e.stopPropagation(); if(!isAdmin())return; delete ui.boxW[id]; el.style.width=''; drawWires(); moveBadgesFor(id,posOf(id)); save(); fitCanvas(); });
}
/* 헤더 배경 틴트(밝게) */
function tint(hex){
  const m=hex.replace('#',''); const r=parseInt(m.slice(0,2),16),g=parseInt(m.slice(2,4),16),b=parseInt(m.slice(4,6),16);
  const mix=(c)=>Math.round(c+(255-c)*0.82);
  return `rgb(${mix(r)},${mix(g)},${mix(b)})`;
}
/* ---- 커스텀 박스(위원회 등) ---- */
function renderCustomBoxes(){
  const canvas=$('#canvas');
  [...canvas.querySelectorAll('.box.custom')].forEach(n=>n.remove());
  (ui.customBoxes||[]).forEach(cb=>{
    const el=document.createElement('div'); el.className='box custom'; el.dataset.cid=cb.id; el.dataset.kind=boxKind(cb);
    el.style.left=(cb.x||120)+'px'; el.style.top=(cb.y||60)+'px';
    const col=boxColorFor(cb);          // 종류별 색(본부/팀/위원회), 개별 지정(cb.color) 우선
    const useTint = boxKind(cb)==='team';                 // 팀은 헤더를 틴트(연한 색)+진한 글씨 = 기존 팀 박스와 동일
    const headBg = useTint?tint(col):col, headInk = useTint?col:'#fff';
    el.style.borderColor=col;
    const lines=(cb.lines||[]).map(l=>`<div class="cline">${esc(l)}</div>`).join('');
    const tools = isAdmin()? `<span class="tools"><button data-color title="색 선택">🎨</button><button data-edit title="편집">✎</button><button data-del title="삭제">✕</button></span>`:'';
    el.innerHTML=`<div class="bhead" data-drag style="background:${headBg};color:${headInk}"><span>${esc(cb.title||'조직')}</span>${tools}</div>`+
                 (lines?`<div class="body">${lines}</div>`:'');   // 내용 줄 없으면 이름만(멤버 표시 선택)
    if(cb.w) el.style.width=cb.w+'px';
    if(isAdmin()){
      el.querySelector('[data-color]').onclick=e=>{e.stopPropagation();
        openColorPicker(KIND_LABEL[boxKind(cb)]+' 색 선택', col, c=>{ cb.color=c; save(); render(); }); };
      el.querySelector('[data-edit]').onclick=e=>{e.stopPropagation();editCustom(cb.id);};
      el.querySelector('[data-del]').onclick=e=>{e.stopPropagation(); if(confirm('이 박스를 삭제할까요?')){ ui.customBoxes=ui.customBoxes.filter(x=>x.id!==cb.id); save(); render(); }};
    }
    addCustomResizer(el,cb);   // 위원회 등 추가 박스도 크기 조정 가능
    makeCustomDraggable(el,cb);
    canvas.appendChild(el);
  });
}
function makeCustomDraggable(el,cb){
  const h=el.querySelector('[data-drag]');
  h.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin()) return; ev.preventDefault();
    const sx=ev.clientX, sy=ev.clientY, ox=cb.x||120, oy=cb.y||60, z=ui.zoom||1;
    try{ h.setPointerCapture(ev.pointerId); }catch(_){} el.style.zIndex=22;
    const f=activeFrame();
    const move=e=>{ const c=clampXY(snap(ox+(e.clientX-sx)/z), snap(oy+(e.clientY-sy)/z), el.offsetWidth, el.offsetHeight, f); cb.x=c.x; cb.y=c.y; el.style.left=cb.x+'px'; el.style.top=cb.y+'px'; };
    const up=()=>{ try{ h.releasePointerCapture(ev.pointerId); }catch(_){} el.style.zIndex=''; document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); fitCanvas(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
}
/* 커스텀(위원회 등) 박스 너비 리사이즈 핸들. 더블클릭=기본 너비 */
function addCustomResizer(el,cb){
  const rz=document.createElement('div'); rz.className='box-resizer admin-only'; rz.title='드래그: 박스 너비 조절 / 더블클릭: 기본';
  el.appendChild(rz);
  rz.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin()) return; ev.preventDefault(); ev.stopPropagation();
    const startW=el.offsetWidth, sx=ev.clientX, z=ui.zoom||1;
    try{ rz.setPointerCapture(ev.pointerId); }catch(_){}
    const f=activeFrame();
    const move=e=>{ let nw=snap(startW+(e.clientX-sx)/z); nw=Math.max(120,Math.min(520,nw));
      if(f) nw=Math.max(120, Math.min(nw, Math.round(f.x+f.w-(cb.x||120))));   // 틀 밖으로 넓어지지 않게
      cb.w=nw; el.style.width=nw+'px'; };
    const up=()=>{ try{ rz.releasePointerCapture(ev.pointerId); }catch(_){} document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); fitCanvas(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
  rz.addEventListener('dblclick',e=>{ e.stopPropagation(); if(!isAdmin())return; delete cb.w; el.style.width=''; save(); fitCanvas(); });
}

/* ---- 위원회 스택(좌/우) : 구성원 없으면 제목만, 여러 개면 세로로 붙어 하나의 보라색 박스 ---- */
const CM_DEFW=200;
function committeeStackW(side){ return (ui.committeeW && ui.committeeW[side]) || CM_DEFW; }
function committeeAutoPos(side){
  const w=committeeStackW(side);
  const cy=(baseLayout['__CEO__']&&baseLayout['__CEO__'].y)||112;   // 대표 박스와 같은 높이에 나란히
  const f=(emp.length)?pageFrame():null;
  if(!f) return {x: side==='left'?40:420, y:cy};
  return side==='left' ? {x:Math.round(f.x+8), y:cy} : {x:Math.round(f.x+f.w-w-8), y:cy};
}
function committeePos(side){ return (ui.committeePos&&ui.committeePos[side]) || committeeAutoPos(side); }
function renderCommittees(){
  const canvas=$('#canvas');
  [...canvas.querySelectorAll('.committee-stack')].forEach(n=>n.remove());
  ['left','right'].forEach(side=>{
    const list=(ui.committees&&ui.committees[side])||[];
    if(!list.length) return;
    const pos=committeePos(side), w=committeeStackW(side);
    const stack=document.createElement('div'); stack.className='committee-stack'; stack.dataset.side=side;
    stack.style.left=pos.x+'px'; stack.style.top=pos.y+'px'; stack.style.width=w+'px';
    stack.style.border='2px solid '+committeeColor();
    list.forEach(cm=>{
      const col=cm.color||committeeColor();
      const c=document.createElement('div'); c.className='committee'; c.dataset.cid=cm.id;
      const members=(cm.members||[]).filter(s=>String(s).trim());
      const tools=isAdmin()?`<span class="ctools"><button data-mng title="위원회 관리(구성원 추가/삭제)">✎</button><button data-delc title="이 위원회 삭제">✕</button></span>`:'';
      c.innerHTML=`<div class="chead" data-cdrag style="background:${col}">${esc(cm.title||'위원회')}${tools}</div>`+
        (members.length?`<div class="cbody">${members.map(m=>`<div class="cmember">${esc(m)}</div>`).join('')}</div>`:'');
      stack.appendChild(c);
    });
    if(isAdmin()){
      const rz=document.createElement('div'); rz.className='committee-resizer admin-only'; rz.title='드래그: 너비 조절 / 더블클릭: 기본';
      stack.appendChild(rz); addCommitteeResizer(rz,stack,side);
      stack.querySelectorAll('[data-mng]').forEach(b=> b.onclick=e=>{e.stopPropagation(); openOrgAdd();});
      stack.querySelectorAll('[data-delc]').forEach((b,i)=> b.onclick=e=>{e.stopPropagation();
        const cm=list[i]; if(cm && confirm(`'${cm.title}' 위원회를 삭제할까요?`)){ ui.committees[side]=list.filter(x=>x.id!==cm.id); save(); render(); } });
      makeCommitteeDraggable(stack,side);
    }
    canvas.appendChild(stack);
  });
}
function makeCommitteeDraggable(stack,side){
  const other = side==='left' ? 'right' : 'left';
  stack.querySelectorAll('[data-cdrag]').forEach(h=>{
    h.addEventListener('pointerdown',ev=>{
      if(ev.button!==0||!isAdmin()) return; ev.preventDefault();
      const p=committeePos(side); const sx=ev.clientX, sy=ev.clientY, ox=p.x, oy=p.y, z=ui.zoom||1;
      const w0=ui.committeeWire[side]?{...ui.committeeWire[side]}:null;
      // 반대편 위원회 스택(있을 때만) — 함께 대칭 이동
      const otherList=(ui.committees&&ui.committees[other])||[];
      const otherStack=document.querySelector(`.committee-stack[data-side="${other}"]`);
      const hasOther=otherList.length && otherStack;
      const op=hasOther?committeePos(other):null; const oox=op?op.x:0, ooy=op?op.y:0;
      const ow0=(hasOther&&ui.committeeWire[other])?{...ui.committeeWire[other]}:null;
      try{ h.setPointerCapture(ev.pointerId); }catch(_){} stack.style.zIndex=22;
      const f=activeFrame();
      const move=e=>{ const c=clampXY(snap(ox+(e.clientX-sx)/z), snap(oy+(e.clientY-sy)/z), stack.offsetWidth, stack.offsetHeight, f);
        const dx=c.x-ox, dy=c.y-oy;
        ui.committeePos[side]={x:c.x,y:c.y}; stack.style.left=c.x+'px'; stack.style.top=c.y+'px';
        if(w0){ ui.committeeWire[side]={x:w0.x+dx, y:w0.y+dy}; }   // 연결선도 스택 따라 이동
        if(hasOther){   // 반대편: 세로(Y)는 같은 높이로, 가로(X)는 좌우 대칭으로 함께 이동
          const oc=clampXY(snap(oox-dx), snap(ooy+dy), otherStack.offsetWidth, otherStack.offsetHeight, f);
          ui.committeePos[other]={x:oc.x,y:oc.y}; otherStack.style.left=oc.x+'px'; otherStack.style.top=oc.y+'px';
          if(ow0){ ui.committeeWire[other]={x:ow0.x+(oc.x-oox), y:ow0.y+(oc.y-ooy)}; }
        }
        drawWires(); renderCommitteeWireHandles(); };
      const up=()=>{ try{ h.releasePointerCapture(ev.pointerId); }catch(_){} stack.style.zIndex=''; document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); fitCanvas(); };
      document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
    });
  });
}
function addCommitteeResizer(rz,stack,side){
  rz.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin()) return; ev.preventDefault(); ev.stopPropagation();
    const startW=stack.offsetWidth, sx=ev.clientX, z=ui.zoom||1, p=committeePos(side);
    try{ rz.setPointerCapture(ev.pointerId); }catch(_){}
    const f=activeFrame();
    const move=e=>{ let nw=snap(startW+(e.clientX-sx)/z); nw=Math.max(120,Math.min(420,nw));
      if(f) nw=Math.max(120,Math.min(nw,Math.round(f.x+f.w-p.x)));
      ui.committeeW[side]=nw; stack.style.width=nw+'px'; drawWires(); renderCommitteeWireHandles(); };
    const up=()=>{ try{ rz.releasePointerCapture(ev.pointerId); }catch(_){} document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); fitCanvas(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
  rz.addEventListener('dblclick',e=>{ e.stopPropagation(); if(!isAdmin())return; ui.committeeW[side]=0; stack.style.width=''; save(); render(); });
}
/* 위원회 연결선: 대표–본부 중앙 수직선(cx)에서 스택 접점까지 수평선. 접점(자유 이동) = committeeWire[side] */
function committeeAttachPoint(side){
  const stack=document.querySelector(`.committee-stack[data-side="${side}"]`);
  const list=(ui.committees&&ui.committees[side])||[]; if(!list.length||!stack) return null;
  const wire=ui.committeeWire&&ui.committeeWire[side];
  if(wire && typeof wire.x==='number') return {x:wire.x, y:wire.y};
  const p=committeePos(side), w=committeeStackW(side), h=stack.offsetHeight||40;
  return { x: side==='left' ? p.x+w : p.x, y: p.y+h/2 };   // 중앙 향한 변의 중앙
}
function committeeWirePathStr(cx){
  let d='';
  ['left','right'].forEach(side=>{
    const a=committeeAttachPoint(side); if(!a) return;
    d+=`M${cx},${a.y} L${a.x},${a.y} `;   // 중앙 수직선 → 위원회 접점(수평)
  });
  return d;
}
function renderCommitteeWireHandles(){
  const canvas=$('#canvas');
  [...canvas.querySelectorAll('.cwire-handle')].forEach(n=>n.remove());
  if(!isAdmin() || !curHqs.length) return;
  ['left','right'].forEach(side=>{
    const a=committeeAttachPoint(side); if(!a) return;
    const h=document.createElement('div'); h.className='cwire-handle admin-only'; h.dataset.side=side;
    h.style.left=a.x+'px'; h.style.top=a.y+'px'; h.title='드래그: 위원회 연결선 자유 이동';
    attachCommitteeWireDrag(h,side); canvas.appendChild(h);
  });
}
function attachCommitteeWireDrag(h,side){
  h.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin()) return; ev.preventDefault(); ev.stopPropagation();
    const canvas=$('#canvas'); const z=ui.zoom||1;
    try{ h.setPointerCapture(ev.pointerId); }catch(_){} h.style.cursor='grabbing';
    const other = side==='left' ? 'right' : 'left';
    const cx = (typeof ceoBusGeom==='function' && curHqs.length) ? ceoBusGeom().cx : null;
    const otherH = canvas.querySelector(`.cwire-handle[data-side="${other}"]`);
    const move=e=>{ const rect=canvas.getBoundingClientRect();
      const mx=snap((e.clientX-rect.left)/z), my=snap((e.clientY-rect.top)/z);
      ui.committeeWire[side]={x:mx,y:my}; h.style.left=mx+'px'; h.style.top=my+'px';
      // 반대쪽도 같이: 같은 높이(y) + 중앙선(cx) 기준 대칭 x
      if(cx!=null){ const ox=snap(2*cx-mx); ui.committeeWire[other]={x:ox,y:my};
        if(otherH){ otherH.style.left=ox+'px'; otherH.style.top=my+'px'; } }
      drawWires(); };
    const up=()=>{ try{ h.releasePointerCapture(ev.pointerId); }catch(_){} h.style.cursor=''; document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
  h.addEventListener('dblclick',e=>{ e.stopPropagation(); if(!isAdmin())return; ui.committeeWire.left=null; ui.committeeWire.right=null; save(); render(); toast('연결선 위치 초기화'); });
}
/* ---- 위원회 관리 모달(좌/우 · 위원회 추가/삭제 + 구성원 추가/삭제) ---- */
/* ---- 조직 추가 통합 모달: 본부/팀 추가 + 위원회(좌/우) 추가·삭제·구성원 관리 ---- */
function openOrgAdd(){
  openModal('조직 추가', orgAddHtml(), ()=>true);
  wireOrgAdd();
}
function orgAddHtml(){
  return `<div style="border:1px solid var(--line);border-radius:9px;padding:10px;margin-bottom:14px;background:#fafbff">
      <div style="font-weight:800;margin-bottom:6px">본부 / 팀 추가</div>
      <label>종류</label><select id="cbK">${KIND_OPTS}</select>
      <label>이름</label><input id="cbT" placeholder="예: 신규본부 / 신규팀"/>
      <label>내용 (한 줄에 하나 · 없어도 됨 — 팀장/팀원 등)</label><textarea id="cbL" placeholder="팀장 O O O&#10;팀원 △ △ △"></textarea>
      <button class="btn primary" id="cbAdd" style="margin-top:8px;padding:5px 12px">＋ 본부/팀 추가</button>
    </div>
    <div style="font-weight:800;margin-bottom:4px">위원회 추가 / 삭제 (좌 · 우)</div>
    ${committeeMgrHtml()}`;
}
function wireOrgAdd(){
  const k=$('#cbK'); if(k) k.value='team';
  const add=$('#cbAdd'); if(add) add.onclick=()=>{
    const t=$('#cbT').value.trim(); if(!t){ toast('이름을 입력하세요'); return; }
    const kind=$('#cbK').value, lines=$('#cbL').value.split('\n').map(s=>s.trim()).filter(Boolean);
    ui.customBoxes.push({id:'cb'+Date.now(), kind, title:t, lines, x:140, y:60});
    save(); render(); $('#cbT').value=''; $('#cbL').value=''; toast(`${KIND_LABEL[kind]||'조직'} 추가됨`);
  };
  wireCommitteeMgr();
}
const SIDE_LABEL={left:'왼쪽',right:'오른쪽'};
function committeeMgrHtml(){ return `<div id="commMgr">${committeeInner()}</div>`; }
function committeeInner(){
  const sideBlock=(side)=>{
    const list=(ui.committees&&ui.committees[side])||[];
    let cards=list.map(cm=>{
      const members=(cm.members||[]);
      const mrows=members.map((m,mi)=>`<div style="display:flex;gap:6px;align-items:center;margin:3px 0">
          <input class="cm-member" data-side="${side}" data-cid="${esc(cm.id)}" data-mi="${mi}" value="${esc(m)}" placeholder="예: 위원장 홍길동" style="flex:1"/>
          <button class="btn" data-act="delmember" data-side="${side}" data-cid="${esc(cm.id)}" data-mi="${mi}" style="padding:3px 8px">✕</button>
        </div>`).join('');
      return `<div style="border:1px solid var(--line);border-radius:9px;padding:9px;margin:8px 0;background:#fafbff">
        <div style="display:flex;gap:6px;align-items:center">
          <input class="cm-title" data-side="${side}" data-cid="${esc(cm.id)}" value="${esc(cm.title||'')}" placeholder="위원회 이름" style="flex:1;font-weight:800"/>
          <button class="btn danger" data-act="delcomm" data-side="${side}" data-cid="${esc(cm.id)}" style="padding:4px 10px">위원회 삭제</button>
        </div>
        <div style="font-size:11.5px;color:var(--muted);margin:6px 0 2px">구성원 (없으면 제목만 표시)</div>
        ${mrows||'<div style="font-size:12px;color:var(--muted);padding:2px 0">구성원 없음</div>'}
        <button class="btn" data-act="addmember" data-side="${side}" data-cid="${esc(cm.id)}" style="padding:4px 10px;margin-top:5px">＋ 구성원 추가</button>
      </div>`;
    }).join('');
    return `<div style="flex:1;min-width:250px">
      <div style="font-weight:800;margin-bottom:4px">${SIDE_LABEL[side]} 위원회</div>
      ${cards||'<div style="font-size:12px;color:var(--muted);padding:6px 0">아직 없음</div>'}
      <button class="btn primary" data-act="addcomm" data-side="${side}" style="padding:5px 12px">＋ ${SIDE_LABEL[side]}에 위원회 추가</button>
    </div>`;
  };
  return `<div style="font-size:12px;color:var(--muted);margin-bottom:6px">위원회는 좌/우로 나뉘어 표시되고, 같은 쪽 위원회는 세로로 붙어 하나의 보라색 박스가 됩니다.</div>
    <div style="display:flex;gap:16px;max-height:58vh;overflow:auto">${sideBlock('left')}${sideBlock('right')}</div>`;
}
function wireCommitteeMgr(){
  const body=$('#commMgr'); if(!body) return;
  const rerender=()=>{ save(); render(); body.innerHTML=committeeInner(); wireCommitteeMgr(); };
  // 텍스트 입력은 포커스 유지 위해 즉시 데이터만 갱신 + 차트 반영(모달은 재빌드 안 함)
  body.querySelectorAll('.cm-title').forEach(inp=> inp.oninput=()=>{
    const cm=findCommittee(inp.dataset.side, inp.dataset.cid); if(cm){ cm.title=inp.value; save(); renderCommittees(); drawWires(); } });
  body.querySelectorAll('.cm-member').forEach(inp=> inp.oninput=()=>{
    const cm=findCommittee(inp.dataset.side, inp.dataset.cid); if(cm){ cm.members[+inp.dataset.mi]=inp.value; save(); renderCommittees(); drawWires(); renderCommitteeWireHandles(); } });
  body.querySelectorAll('[data-act]').forEach(btn=> btn.onclick=()=>{
    const side=btn.dataset.side, cid=btn.dataset.cid, act=btn.dataset.act;
    ui.committees[side]=ui.committees[side]||[];
    if(act==='addcomm'){ ui.committees[side].push({id:'cm'+Date.now()+Math.floor(Math.random()*99), title:'새 위원회', members:[]}); }
    else if(act==='delcomm'){ const cm=findCommittee(side,cid); if(cm && !confirm(`'${cm.title}' 위원회를 삭제할까요?`)) return; ui.committees[side]=ui.committees[side].filter(x=>x.id!==cid); }
    else { const cm=findCommittee(side,cid); if(!cm) return;
      if(act==='addmember'){ cm.members=cm.members||[]; cm.members.push(''); }
      else if(act==='delmember'){ cm.members.splice(+btn.dataset.mi,1); } }
    rerender();
  });
}
function findCommittee(side,cid){ return ((ui.committees&&ui.committees[side])||[]).find(c=>c.id===cid); }

/* ---- 커넥터 라인: (사장→본부) + (본부→부서) ---- */
/* 연결점 = 팀명 네모칸(.bhead, 색칠된 헤더) 기준 7곳:
   윗변 좌/우 꼭지점, 아랫변 좌/우 꼭지점, 윗변 중앙, 좌/우 측변 중앙.
   선 끝(연결부)을 드래그하면 가장 가까운 접점으로 스냅. (동그라미 핸들 없음) */
const WIRE_ANCHORS = ['top-center','top-left','top-right','left','right','bottom-left','bottom-right'];
const WIRE_ANCHOR_LABEL = {'top-center':'윗변 중앙','top-left':'윗변 왼쪽 꼭지점','top-right':'윗변 오른쪽 꼭지점','left':'왼쪽 변 중앙','right':'오른쪽 변 중앙','bottom-left':'아랫변 왼쪽 꼭지점','bottom-right':'아랫변 오른쪽 꼭지점'};
function anchorOf(id){ return (ui.wireAnchor && ui.wireAnchor[id]) || 'top-center'; }
/* 팀명 헤더칸 높이(실제 DOM 측정, 없으면 기본 헤더 높이) */
function headerH(id){ const b=document.querySelector(`.box[data-id="${cssEsc(id)}"] .bhead`); return b? b.offsetHeight : BHEAD_H; }
/* 접점 후보 7곳(팀명 헤더칸 기준) */
function anchorCandidates(id){
  const p=posOf(id), W=bw(id), Hh=headerH(id);
  return {
    'top-left':    {x:p.x,       y:p.y},
    'top-center':  {x:p.x+W/2,   y:p.y},
    'top-right':   {x:p.x+W,     y:p.y},
    'left':        {x:p.x,       y:p.y+Hh/2},
    'right':       {x:p.x+W,     y:p.y+Hh/2},
    'bottom-left': {x:p.x,       y:p.y+Hh},
    'bottom-right':{x:p.x+W,     y:p.y+Hh},
  };
}
function wireAnchorPoint(hq,dept){
  const id=boxId(hq,dept); const a=anchorOf(id);
  const c=anchorCandidates(id)[a]||anchorCandidates(id)['top-center'];
  return {x:c.x, y:c.y, a, id};
}
/* 본부 아래(hx,hy)에서 접점까지 직교(엘보) 경로 */
function wirePath(hx,hy,pt){
  if(pt.a.indexOf('top')===0){                  // 윗변: 접점 위 수평 버스 → 수직 진입
    const busY = pt.y - 18;
    return `M${hx},${hy} L${hx},${busY} L${pt.x},${busY} L${pt.x},${pt.y} `;
  }
  // 측변/아랫변: 접점 높이로 내려와 수평 진입
  return `M${hx},${hy} L${hx},${pt.y} L${pt.x},${pt.y} `;
}
function drawWires(){
  const svg=$('#wires'); let d='';
  if(curHqs.length){
    const g=ceoBusGeom(); const cx=g.cx, cy=g.cy, busY=g.busY;
    for(const H of curHqs){ const hid=boxId(H.hq,'__HQ__'); const hp=posOf(hid); const hx=hp.x+bw(hid)/2; d+=`M${cx},${cy} L${cx},${busY} L${hx},${busY} L${hx},${hp.y} `; }
    // 위원회 스택(좌/우) → 대표–본부 중앙 수직선(cx)에서 수평 연결(접점 자유 이동)
    d+=committeeWirePathStr(cx);
  }
  for(const H of curHqs){
    const hid=boxId(H.hq,'__HQ__'); const hp=posOf(hid);
    const hx=hp.x+bw(hid)/2, hy=hp.y+hqBoxHeight(H);
    for(const dep of H.depts){
      const pt=wireAnchorPoint(H.hq,dep.dept);
      d+=wirePath(hx,hy,pt);
    }
  }
  svg.innerHTML=`<path d="${d}"/>`;
}
/* 대표–본부 수평 연결선(버스)의 y좌표 + 가로 범위 계산 */
function ceoBusGeom(){
  const ceoEl=document.querySelector('.box.ceo'); const cp=posOf('__CEO__');
  const cw=ceoEl?ceoEl.offsetWidth:140, chh=ceoEl?ceoEl.offsetHeight:52;
  const cx=cp.x+cw/2, cy=cp.y+chh, busY=cy+(ui.style.ceoBus||18);
  let minX=cx, maxX=cx;
  for(const H of curHqs){ const hid=boxId(H.hq,'__HQ__'); const hp=posOf(hid); const hx=hp.x+bw(hid)/2; minX=Math.min(minX,hx); maxX=Math.max(maxX,hx); }
  return {cx,cy,busY,minX,maxX};
}
/* 대표–본부 연결선 상하 드래그 핸들(관리자) — 선을 직접 잡아 위아래로 자유 이동 */
function renderCeoBusHandle(){
  const canvas=$('#canvas');
  [...canvas.querySelectorAll('.ceobus-handle')].forEach(n=>n.remove());
  if(!isAdmin() || !curHqs.length) return;
  const g=ceoBusGeom();
  const h=document.createElement('div'); h.className='ceobus-handle admin-only';
  h.style.left=(g.minX-6)+'px'; h.style.top=(g.busY-6)+'px'; h.style.width=(g.maxX-g.minX+12)+'px'; h.style.height='12px';
  h.title='드래그: 대표–본부 연결선 상하 이동';
  attachCeoBusDrag(h, g.cy);
  canvas.appendChild(h);
}
function attachCeoBusDrag(h, cy){
  h.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin())return; ev.preventDefault(); ev.stopPropagation();
    const startBus=ui.style.ceoBus||18, sy=ev.clientY, z=ui.zoom||1;
    try{h.setPointerCapture(ev.pointerId);}catch(_){}
    const move=e=>{ let nb=Math.max(4, Math.round(startBus+(e.clientY-sy)/z));
      ui.style.ceoBus=nb; drawWires();
      const g=ceoBusGeom(); h.style.top=(g.busY-6)+'px';
      const s=$('#stBus'); if(s) s.value=Math.min(440,nb); const v=$('#stBusv'); if(v) v.textContent=nb;
    };
    const up=()=>{ try{h.releasePointerCapture(ev.pointerId);}catch(_){} document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
}
/* 연결점 드래그 핸들(관리자): 선 끝에 투명 히트영역 → 드래그하면 가장 가까운 접점으로 이동 */
function renderWireHandles(){
  const canvas=$('#canvas');
  [...canvas.querySelectorAll('.whandle')].forEach(n=>n.remove());
  if(!isAdmin() || !curHqs.length) return;
  for(const H of curHqs){
    for(const dep of H.depts){
      const pt=wireAnchorPoint(H.hq,dep.dept);
      const h=document.createElement('div'); h.className='whandle admin-only'; h.dataset.wid=pt.id;
      h.style.left=pt.x+'px'; h.style.top=pt.y+'px';
      h.title='드래그: 선 연결점 이동(헤더칸 8방향 꼭지점/중앙으로 스냅)';
      attachWireDrag(h, pt.id);
      canvas.appendChild(h);
    }
  }
}
function attachWireDrag(h, id){
  h.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin()) return; ev.preventDefault(); ev.stopPropagation();
    const canvas=$('#canvas'); const z=ui.zoom||1;
    try{ h.setPointerCapture(ev.pointerId); }catch(_){} h.style.cursor='grabbing';
    const move=e=>{
      const rect=canvas.getBoundingClientRect();
      const mx=(e.clientX-rect.left)/z, my=(e.clientY-rect.top)/z;
      const cand=anchorCandidates(id); let best=null,bd=Infinity;
      for(const k in cand){ const dx=cand[k].x-mx, dy=cand[k].y-my, d2=dx*dx+dy*dy; if(d2<bd){bd=d2;best=k;} }
      if(best && best!==anchorOf(id)){
        ui.wireAnchor[id]=best; drawWires();
        const pt=cand[best]; h.style.left=pt.x+'px'; h.style.top=pt.y+'px';
      }
    };
    const up=()=>{ try{ h.releasePointerCapture(ev.pointerId); }catch(_){} h.style.cursor=''; document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); toast('연결점: '+WIRE_ANCHOR_LABEL[anchorOf(id)]); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
}

/* ---- 부가정보 라벨(배지): 박스 밖 우측, 각 인원 행마다 ---- */
function renderBadges(){
  const canvas=$('#canvas');
  const enabled=LABEL_FIELDS.filter(f=>ui.labels.enabled[f]);
  if(!enabled.length) return;
  const empById={}; emp.forEach(e=>empById[empId(e)]=e);
  document.querySelectorAll('.box:not(.hq) .prow').forEach(row=>{
    const box=row.closest('.box'); const bp=posOf(box.dataset.id);
    const eid=row.dataset.eid, e=empById[eid]; if(!e) return;
    const rowTop = row.offsetTop; // relative to box
    enabled.forEach((f,fi)=>{
      const val=labelValue(e,f); if(val==='') return;
      const key=eid+'
'+f; const off=ui.labels.off[key]||{dx:0,dy:0};
      const bx=bp.x+bw(box.dataset.id)+8 + fi*badgeGap();   // 기본: 박스 우측 밖, 항목별 가로 정렬(간격 조절)
      const by=bp.y+rowTop;
      const b=document.createElement('div'); b.className='badge'; b.dataset.key=key;
      b.style.left=(bx+off.dx)+'px'; b.style.top=(by+off.dy)+'px';
      b.textContent=val;   // 값만(배경·테두리·접두라벨 없음)
      makeBadgeDraggable(b);
      canvas.appendChild(b);
    });
  });
}

/* ---- 집계표 ----
   4종: 본부별 / 사무직 직급별 / 생산직 직급별 / 공장별.
   직급별 표는 직급 코드 표기 + '기타' 행 수기수정(합계 자동). */
function renderSummaries(lay){
  const canvas=$('#canvas');
  const baseY=lay.bottom+40;
  const defs=sumDefs();
  const posX={hq:40, gradeOffice:440, gradeProd:780, factory:1120};
  ['hq','gradeOffice','gradeProd','factory'].forEach(key=>{
    const d=defs[key]; if(!d || d.hideIfEmpty) return;
    if(ui.sumHidden && ui.sumHidden[key]) return;   // 표시설정에서 숨김
    canvas.appendChild(sumTableEl(key,d,posX[key],baseY));
  });
}
/* 4종 집계표 정의(자동 인원). 각 표는 2개 수치열 + 자동 합계열, '기타' 행 포함. */
function sumDefs(){
  const hq=aggHq(), fac=aggFactory();
  const withEtc=rows=>[...rows,{rowKey:'기타',label:'기타',o:0,p:0,정규:0,계약:0}];
  return {
    hq:{title:'본부별 인원',header:'본부',cols:[{field:'o',label:'사무직'},{field:'p',label:'생산직'}],
        auto:withEtc(hq.rows.map(x=>({rowKey:x.k,label:x.k,o:x.o,p:x.p})))},
    gradeOffice:{title:'사무직 직급별 인원',header:'직급',cols:[{field:'정규',label:'정규직'},{field:'계약',label:'계약직'}],auto:gradeRows(true)},
    gradeProd:{title:'생산직 직급별 인원',header:'직급',cols:[{field:'정규',label:'정규직'},{field:'계약',label:'계약직'}],auto:gradeRows(false)},
    factory:{title:'공장별 인원',header:'공장',cols:[{field:'o',label:'사무직'},{field:'p',label:'생산직'}],
        auto:withEtc(fac.rows.map(x=>({rowKey:x.k,label:x.k,o:x.o,p:x.p}))), hideIfEmpty:fac.rows.length===0}
  };
}
function gradeRows(officeWanted){
  const all=aggGrade(officeWanted);
  const rows=all.filter(r=>r.k!=='기타').map(x=>({rowKey:x.k,label:x.k,정규:x.정규,계약:x.계약}));
  const etc=all.find(r=>r.k==='기타')||{정규:0,계약:0};
  rows.push({rowKey:'기타',label:'기타',정규:etc.정규,계약:etc.계약});
  return rows;
}
/* 셀 유효값: 수기 override(ui.sumEdits) 있으면 그 값, 없으면 자동값 */
function ovVal(key,rowKey,field,auto){
  const o=ui.sumEdits&&ui.sumEdits[key]&&ui.sumEdits[key][rowKey];
  return (o&&o[field]!=null)?(+o[field]||0):(+auto||0);
}
/* 집계표 렌더: 모든 수치 셀을 관리자면 input(자동값 기본, 수기 override 가능),
   행 합계·열 합계·총합은 override 반영해 자동 계산 */
function sumTableEl(key,def,defX,baseY){
  const cols=def.cols, fields=cols.map(c=>c.field);
  const ncol=cols.length+2;                                   // 라벨 + 수치열들 + 합계
  const widths=(ui.sumColW&&ui.sumColW[key]&&ui.sumColW[key].length===ncol)
    ? ui.sumColW[key].slice() : defSumColW(key,ncol);
  const p=ui.sumPos[key]||{x:defX,y:baseY};
  const el=document.createElement('div'); el.className='sum'; el.dataset.sum=key;
  el.style.left=p.x+'px'; el.style.top=p.y+'px';
  const colTot={}; fields.forEach(f=>colTot[f]=0); let grand=0, bodyRows='';
  def.auto.forEach(r=>{
    let rsum=0;
    const cells=cols.map(c=>{ const v=ovVal(key,r.rowKey,c.field,r[c.field]); rsum+=v; colTot[c.field]+=v;
      return `<td>${isAdmin()?`<input class="sum-in" data-rk="${esc(r.rowKey)}" data-f="${c.field}" type="number" min="0" value="${v}">`:v}</td>`; }).join('');
    grand+=rsum;
    bodyRows+=`<tr class="${r.rowKey==='기타'?'etc':''}" data-rk="${esc(r.rowKey)}"><td class="l">${esc(r.label)}</td>${cells}<td class="rsum">${rsum}</td></tr>`;
  });
  const cg=`<colgroup>${widths.map(w=>`<col style="width:${w}px">`).join('')}</colgroup>`;
  const head=`<tr><th>${esc(def.header)}</th>${cols.map(c=>`<th>${esc(c.label)}</th>`).join('')}<th>합계</th></tr>`;
  const totCells=fields.map(f=>`<td class="tsum" data-f="${f}">${colTot[f]}</td>`).join('');
  const totRow=`<tr class="tot"><td class="l">합계</td>${totCells}<td class="tgrand">${grand}</td></tr>`;
  el.innerHTML=`<div class="shead" data-drag><span>${esc(def.title)}</span><span>⠿</span></div><table>${cg}${head}${bodyRows}${totRow}</table>`;
  applySumCols(el,widths);
  makeSumDraggable(el);
  el.querySelectorAll('.sum-in').forEach(inp=>{
    inp.addEventListener('pointerdown',e=>e.stopPropagation());   // 드래그와 분리
    inp.addEventListener('input',()=>{
      const rk=inp.dataset.rk, f=inp.dataset.f, v=+inp.value||0;
      ui.sumEdits=ui.sumEdits||{}; ui.sumEdits[key]=ui.sumEdits[key]||{}; ui.sumEdits[key][rk]=ui.sumEdits[key][rk]||{};
      ui.sumEdits[key][rk][f]=v;
      recalcSumTable(el,fields); save();
    });
  });
  attachSumResizer(el,key,widths);                             // 표 전체 좌우 너비
  const ths=[...el.querySelectorAll('table tr:first-child th')];
  ths.forEach((th,i)=>{ if(i<ncol-1) attachSumColRz(el,key,th,i,widths); }); // 마지막 열은 표 리사이저가 담당
  return el;
}
/* 표별 기본 열 너비(px): [라벨, 수치…, 합계]. 직급별은 라벨이 길어 넓게 */
function defSumColW(key,ncol){
  const labelW=/^grade/.test(key)?122:92;
  const w=[labelW]; for(let i=1;i<ncol;i++) w.push(54); return w;
}
/* colgroup 열 너비 적용 + 표 전체폭(.sum)을 합에 맞춤 */
function applySumCols(el,widths){
  const cols=el.querySelectorAll('colgroup col');
  widths.forEach((w,i)=>{ if(cols[i]) cols[i].style.width=w+'px'; });
  el.style.width=(widths.reduce((a,w)=>a+w,0)+2)+'px';
}
/* 표 전체 좌우 너비 조절: 모든 열을 비율대로 확대/축소 */
function attachSumResizer(el,key,widths){
  const rz=document.createElement('div'); rz.className='sum-resizer admin-only'; rz.title='드래그: 표 전체 너비';
  el.appendChild(rz);
  rz.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin())return; ev.preventDefault(); ev.stopPropagation();
    const startW=el.offsetWidth, sx=ev.clientX, z=ui.zoom||1, base=widths.slice();
    const baseSum=base.reduce((a,w)=>a+w,0);
    try{rz.setPointerCapture(ev.pointerId);}catch(_){}
    const move=e=>{ let nw=startW+(e.clientX-sx)/z; nw=Math.max(120,Math.min(760,nw));
      const f=nw/startW; const nwid=base.map(w=>Math.max(24,Math.round(w*f)));
      widths.splice(0,widths.length,...nwid); ui.sumColW[key]=widths.slice(); applySumCols(el,widths); };
    const up=()=>{ try{rz.releasePointerCapture(ev.pointerId);}catch(_){} document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); fitCanvas(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
  rz.addEventListener('dblclick',e=>{ e.stopPropagation(); if(!isAdmin())return; delete ui.sumColW[key]; save(); render(); });
}
/* 열 하나 너비 조절(헤더칸 우측 핸들) */
function attachSumColRz(el,key,th,idx,widths){
  const rz=document.createElement('div'); rz.className='col-rz admin-only'; rz.title='드래그: 이 열 너비';
  th.appendChild(rz);
  rz.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin())return; ev.preventDefault(); ev.stopPropagation();
    const startW=widths[idx], sx=ev.clientX, z=ui.zoom||1;
    try{rz.setPointerCapture(ev.pointerId);}catch(_){}
    const move=e=>{ widths[idx]=Math.max(24,Math.round(startW+(e.clientX-sx)/z)); ui.sumColW[key]=widths.slice(); applySumCols(el,widths); };
    const up=()=>{ try{rz.releasePointerCapture(ev.pointerId);}catch(_){} document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); fitCanvas(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
}
/* input 값으로 행합계·열합계·총합 즉시 갱신(재렌더 없이 포커스 유지) */
function recalcSumTable(el,fields){
  const colTot={}; fields.forEach(f=>colTot[f]=0); let grand=0;
  el.querySelectorAll('tr[data-rk]').forEach(tr=>{
    let rsum=0;
    fields.forEach(f=>{ const inp=tr.querySelector('.sum-in[data-f="'+f+'"]'); const v=inp?(+inp.value||0):0; rsum+=v; colTot[f]+=v; });
    const rs=tr.querySelector('.rsum'); if(rs) rs.textContent=rsum;
    grand+=rsum;
  });
  fields.forEach(f=>{ const t=el.querySelector('.tsum[data-f="'+f+'"]'); if(t) t.textContent=colTot[f]; });
  const g=el.querySelector('.tgrand'); if(g) g.textContent=grand;
}
function isOffice(e){ return !/생산/.test(e['직군명']||''); }
function aggHq(){
  const m=new Map();
  for(const e of emp){ const hq=(e['본부명']||'(미지정)').trim(); if(!m.has(hq)) m.set(hq,{o:0,p:0}); const v=m.get(hq); isOffice(e)?v.o++:v.p++; }
  const rows=[...m.entries()].map(([k,v])=>({k,o:v.o,p:v.p,t:v.o+v.p}));
  const tot=rows.reduce((a,r)=>({o:a.o+r.o,p:a.p+r.p,t:a.t+r.t}),{o:0,p:0,t:0});
  return {rows,tot};
}
/* 공장별: 사무직/생산직/합계 (직군명으로 카운트) */
function aggFactory(){
  const m=new Map();
  for(const e of emp){ const d=(e['부서명']||'').trim(); if(!/공장/.test(d)) continue; if(!m.has(d)) m.set(d,{o:0,p:0}); const v=m.get(d); isOffice(e)?v.o++:v.p++; }
  const rows=[...m.entries()].map(([k,v])=>({k,o:v.o,p:v.p,t:v.o+v.p}));
  const tot=rows.reduce((a,r)=>({o:a.o+r.o,p:a.p+r.p,t:a.t+r.t}),{o:0,p:0,t:0});
  return {rows,tot};
}
/* ---- 직급 코드 매핑: 직위명(우선)·직급명에서 직급 추출 → 코드 ---- */
const RANK_WORDS=['수석','책임','선임','주임','사원'];
const RANK_CODE={수석:'S2',책임:'S1',선임:'J3',주임:'J2',사원:'J1'};
function rankWord(e){
  // 직위명의 '엔지니어/매니저' 등 접미는 무시하고 직급 키워드만 추출, 없으면 직급명
  const a=String(e['직위명']||''); for(const w of RANK_WORDS) if(a.includes(w)) return w;
  const b=String(e['직급명']||''); for(const w of RANK_WORDS) if(b.includes(w)) return w;
  return '';
}
/* 한 사람의 직급 표시 라벨 + 정렬순서.
   별정직(직책명=별정) → 별정(직급) 별도 행 / 리더(팀장·단장 등) → 직책_M(직급) / 일반 → 코드(직급) */
function gradeInfo(e){
  const role=String(e['직책명']||'').trim();
  const rw=rankWord(e);
  const ri=rw?RANK_WORDS.indexOf(rw):9;
  if(role.includes('별정')) return {label:'별정('+(rw||'기타')+')', order:300+ri};
  if(isLeader(role))       return {label:role+'_M('+(rw||String(e['직급명']||'').trim())+')', order:100+titleIdx(role)*2+ri*0.1};
  if(rw && RANK_CODE[rw])  return {label:RANK_CODE[rw]+'('+rw+')', order:200+ri};
  return {label:'기타', order:990};
}
/* 직군(사무직/생산직)별 직급 집계: {정규,계약} (사원구분명 기준, 정규 외=계약) */
function aggGrade(officeWanted){
  const m=new Map();
  for(const e of emp){
    if(/사장|대표|CEO/i.test(String(e['직책명']||'')+String(e['직위명']||''))) continue;   // 대표는 CEO 노드로 별도
    if(isOffice(e)!==officeWanted) continue;
    const gi=gradeInfo(e);
    if(!m.has(gi.label)) m.set(gi.label,{정규:0,계약:0,order:gi.order});
    const v=m.get(gi.label); const gb=String(e['사원구분명']||'');
    if(gb.includes('정규')) v.정규++; else v.계약++;    // 정규직 외(계약·별정 등)는 계약직 열로
  }
  return [...m.entries()].map(([k,v])=>({k,정규:v.정규,계약:v.계약,order:v.order}))
    .sort((a,b)=>a.order-b.order||a.k.localeCompare(b.k,'ko'));
}

/* =========================================================================
   드래그
   ========================================================================= */
/* 페이지 틀(용지 영역): 표시 중일 때만 배치 경계로 사용 */
function activeFrame(){ return (isAdmin() && ui.showFrame!==false && emp.length) ? pageFrame() : null; }
/* (x,y)를 틀 안으로 제한 — 요소(w×h)가 틀 4변 밖으로 못 나가게.
   (틀은 computeFrameAuto/프레임드래그에서 이미 0 이상으로 유지되므로 좌/상단도 틀선까지 도달) */
function clampXY(x,y,w,h,f){
  if(!f) return {x:Math.round(x),y:Math.round(y)};
  return { x:Math.round(Math.max(f.x, Math.min(x, f.x+f.w-w))),
           y:Math.round(Math.max(f.y, Math.min(y, f.y+f.h-h))) };
}
function makeDraggable(el){
  const h=el.querySelector('[data-drag]');
  h.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin()) return;
    ev.preventDefault();
    const id=el.dataset.id; const start=posOf(id);
    const sx=ev.clientX, sy=ev.clientY; const z=ui.zoom||1;
    try{ h.setPointerCapture(ev.pointerId); }catch(_){} el.style.zIndex=20;
    const f=activeFrame();
    const move=e=>{
      const c=clampXY(snap(start.x+(e.clientX-sx)/z), snap(start.y+(e.clientY-sy)/z), el.offsetWidth, el.offsetHeight, f);
      ui.pos[id]={x:c.x,y:c.y};
      el.style.left=ui.pos[id].x+'px'; el.style.top=ui.pos[id].y+'px';
      moveBadgesFor(id, ui.pos[id]);
      drawWires();
      renderWireHandles();
    };
    const up=e=>{ try{ h.releasePointerCapture(ev.pointerId); }catch(_){} el.style.zIndex=''; document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); fitCanvas(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
}
function moveBadgesFor(id,p){
  // 박스 이동 시 그 박스에 속한 배지 위치 갱신
  const box=document.querySelector(`.box[data-id="${cssEsc(id)}"]`); if(!box) return;
  const enabled=LABEL_FIELDS.filter(f=>ui.labels.enabled[f]); if(!enabled.length) return;
  box.querySelectorAll('.prow').forEach(row=>{
    const eid=row.dataset.eid; const rowTop=row.offsetTop;
    enabled.forEach((f,fi)=>{
      const key=eid+'
'+f; const b=document.querySelector(`.badge[data-key="${cssEsc(key)}"]`); if(!b) return;
      const off=ui.labels.off[key]||{dx:0,dy:0};
      b.style.left=(p.x+bw(id)+8+fi*badgeGap()+off.dx)+'px';
      b.style.top=(p.y+rowTop+off.dy)+'px';
    });
  });
}
function makeBadgeDraggable(b){
  b.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin()) return; ev.preventDefault(); ev.stopPropagation();
    const key=b.dataset.key; const off=ui.labels.off[key]||{dx:0,dy:0};
    const sx=ev.clientX, sy=ev.clientY; const z=ui.zoom||1;
    try{ b.setPointerCapture(ev.pointerId); }catch(_){} b.style.zIndex=30;
    const f=activeFrame();
    const base=parseFloat(b.style.left)-off.dx, baseT=parseFloat(b.style.top)-off.dy;
    const move=e=>{ const c=clampXY(base+off.dx+(e.clientX-sx)/z, baseT+off.dy+(e.clientY-sy)/z, b.offsetWidth, b.offsetHeight, f);
      ui.labels.off[key]={dx:Math.round(c.x-base), dy:Math.round(c.y-baseT)};
      b.style.left=c.x+'px'; b.style.top=c.y+'px'; };
    const up=e=>{ try{ b.releasePointerCapture(ev.pointerId); }catch(_){} b.style.zIndex=''; document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
}
function makeSumDraggable(el){
  const h=el.querySelector('[data-drag]'); const key=el.dataset.sum;
  h.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin()) return; ev.preventDefault();
    const start=ui.sumPos[key]||{x:parseFloat(el.style.left),y:parseFloat(el.style.top)};
    const sx=ev.clientX, sy=ev.clientY; const z=ui.zoom||1;
    try{ h.setPointerCapture(ev.pointerId); }catch(_){} el.style.zIndex=25;
    const f=activeFrame();
    const move=e=>{ const c=clampXY(snap(start.x+(e.clientX-sx)/z),snap(start.y+(e.clientY-sy)/z), el.offsetWidth, el.offsetHeight, f);
      ui.sumPos[key]={x:c.x,y:c.y};
      el.style.left=ui.sumPos[key].x+'px'; el.style.top=ui.sumPos[key].y+'px'; };
    const up=e=>{ try{ h.releasePointerCapture(ev.pointerId); }catch(_){} el.style.zIndex=''; document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); fitCanvas(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
}
function cssEsc(s){ return (window.CSS&&CSS.escape)?CSS.escape(s):String(s).replace(/["\\]/g,'\\$&'); }

/* canvas 크기 자동 확장 */
function fitCanvas(){
  const canvas=$('#canvas'); let maxR=1200, maxB=800;
  canvas.querySelectorAll('.box,.committee-stack,.sum,.badge,#pageFrame,#chartTitle').forEach(n=>{
    maxR=Math.max(maxR, n.offsetLeft+n.offsetWidth+120);
    maxB=Math.max(maxB, n.offsetTop+n.offsetHeight+120);
  });
  canvas.style.width=maxR+'px'; canvas.style.height=maxB+'px';
}
/* 화면(뷰포트)을 페이지 프레임 중앙에 맞춤 — 좌측 치우침 방지.
   콘텐츠가 화면보다 좁으면 #stage 좌측 패딩으로 가운데, 넓으면 스크롤로 중앙. */
function centerViewOnFrame(){
  const wrap=$('#stageWrap'), stage=$('#stage'); if(!wrap||!stage) return;
  const f=pageFrame(); const z=ui.zoom||1;
  if(!f){ stage.style.paddingLeft='24px'; return; }
  const fc=f.x+f.w/2, half=wrap.clientWidth/2;
  const P=half/z - fc;                              // 프레임 중앙을 화면 중앙에 두는 좌측 패딩
  if(P>24){ stage.style.paddingLeft=P+'px'; wrap.scrollLeft=0; }
  else { stage.style.paddingLeft='24px'; wrap.scrollLeft=Math.max(0,(24+fc)*z-half); }
  wrap.scrollTop=Math.max(0,(24+f.y)*z-20);
}
/* 페이지 틀을 화면(뷰포트)에 맞춰 자동 배율(가로·세로 모두 들어오게) + 가운데 정렬. */
function fitViewToFrame(){
  const wrap=$('#stageWrap'); const f=pageFrame();
  if(!wrap||!f){ centerViewOnFrame(); return; }
  const pad=56;
  const availW=Math.max(200, wrap.clientWidth-pad), availH=Math.max(200, wrap.clientHeight-pad);
  let z=Math.min(availW/f.w, availH/f.h);
  z=Math.min(2, Math.max(.2, Math.round(z*100)/100));
  ui.zoom=z; applyZoom();
  centerViewOnFrame();
  save();
}

/* =========================================================================
   엑셀 업로드(직원현황 파싱) — 버튼은 handleRawFiles(다중 파일 지원)로 통일.
   (구 onFile 단일 업로드 함수는 handleRawFiles/finishRawLoad로 대체되어 제거)
   ========================================================================= */

/* =========================================================================
   부가정보 토글 패널
   ========================================================================= */
function buildLabelToggles(){
  const wrap=$('#labelToggles'); wrap.innerHTML='';
  LABEL_FIELDS.forEach(f=>{
    const id='lb_'+f;
    const lab=document.createElement('label');
    lab.innerHTML=`<input type="checkbox" id="${id}" ${ui.labels.enabled[f]?'checked':''}/> ${esc(f)}`;
    lab.querySelector('input').addEventListener('change',ev=>{
      ui.labels.enabled[f]=ev.target.checked; save();
      render();   // 컬럼 간격 재계산 위해 전체 재렌더
    });
    wrap.appendChild(lab);
  });
}

/* =========================================================================
   줌
   ========================================================================= */
function applyZoom(){ $('#stage').style.transform=`scale(${ui.zoom})`; $('#zVal').textContent=Math.round(ui.zoom*100)+'%'; }
function setZoom(z){ ui.zoom=Math.min(2,Math.max(.4,Math.round(z*100)/100)); applyZoom(); centerViewOnFrame(); save(); }

/* =========================================================================
   회원 / 로그인(내부용 가짜) + 회원현황 + 뷰 전환
   ========================================================================= */
let currentUser=null;
let currentView='chart';   // 'chart' | 'members'

/* 백엔드 API 호출(같은 출처, 세션 쿠키 동봉). 일시적 5xx/네트워크 오류는 자동 재시도(401 등 결정적 오류는 즉시 실패). */
async function api(path, opts){
  opts=Object.assign({ credentials:'same-origin', headers:{'Content-Type':'application/json'} }, opts||{});
  let lastErr=null;
  for(let attempt=0; attempt<3; attempt++){
    try{
      const res=await fetch('/api/'+path, opts);
      let data=null; try{ data=await res.json(); }catch(e){}
      if(res.ok) return data;
      if([502,503,504].includes(res.status) && attempt<2){ await new Promise(r=>setTimeout(r,400*(attempt+1))); continue; }
      throw new Error((data&&data.error)||('HTTP '+res.status));
    }catch(e){ lastErr=e; if(attempt<2 && e && /Failed to fetch|NetworkError|load failed/i.test(e.message||'')){ await new Promise(r=>setTimeout(r,400*(attempt+1))); continue; } throw e; }
  }
  throw lastErr||new Error('요청 실패');
}

function isAdmin(){ return !!(currentUser && currentUser.role==='관리자'); }
function applyRole(){
  document.body.dataset.role = isAdmin()?'admin':'viewer';
  const b=$('#btnUser'); if(b) b.textContent = currentUser ? `${currentUser.name||currentUser.email} · 로그아웃` : '로그아웃';
  const bm=$('#btnMembers'); if(bm) bm.style.display = isAdmin()?'':'none';
  const bp=$('#btnPasswd'); if(bp) bp.style.display = currentUser?'':'none';
  const bs=$('#btnStorage'); if(bs) bs.style.display = isAdmin()?'':'none';
}
/* 로그인 화면 */
function showLogin(){ currentUser=null; document.body.dataset.role='viewer'; stopPolling(); $('#login').classList.add('on');
  const e=$('#lgErr'); if(e) e.textContent=''; const p=$('#lgPw2'); if(p) p.value='';
  setTimeout(()=>{ const i=$('#lgId2'); if(i) i.focus(); },40); }
function hideLogin(){ $('#login').classList.remove('on'); }
async function attemptLogin(){
  const id=$('#lgId2').value.trim(), pw=$('#lgPw2').value;
  const err=$('#lgErr'); err.textContent='로그인 중…';
  try{
    const data=await api('login',{ method:'POST', body:JSON.stringify({ email:id, password:pw }) });
    if(!data||!data.user){ err.textContent='접근 권한이 없는 계정입니다. 관리자에게 문의하세요.'; return; }
    currentUser=data.user; err.textContent=''; hideLogin(); await enterApp(); toast(`${currentUser.name||currentUser.email}님 환영합니다`);
  }catch(e){ err.textContent=(e&&e.message)||'아이디 또는 비밀번호가 올바르지 않습니다.'; }
}
async function logout(){ if(!confirm('로그아웃할까요?')) return; try{ await api('logout',{method:'POST'}); }catch(e){} currentUser=null; setView('chart'); showLogin(); }
/* 시작: 세션 쿠키 있으면 자동 입장(/api/me), 없으면 로그인 화면 */
async function initAuth(){
  try{ const d=await api('me'); if(!d||!d.user) throw 0; currentUser=d.user; await enterApp(); }
  catch(e){ render(); showLogin(); }
}
async function enterApp(){
  applyRole();
  await loadOrg();
  buildLabelToggles(); buildStylePanel(); syncPageControls(); applyZoom(); rebuildDateSelect(); attachTitleDrag();
  setView('chart'); render(); setTimeout(fitViewToFrame,60);
  startPolling();
  if(isAdmin()) refreshStorage();
}

/* ---- 실시간 폴링: 관리자 편집 중이 아니면 서버 최신 버전 자동 반영(열람자에게 관리자 변경 전파) ---- */
let pollT=null, pollPaused=false;
function startPolling(){ stopPolling(); pollT=setInterval(pollOrg, 12000); }
function stopPolling(){ if(pollT){ clearInterval(pollT); pollT=null; } }
async function pollOrg(){
  if(!currentUser || pollPaused) return;
  if(isAdmin() && saveT) return;                       // 내 저장 대기 중이면 스킵
  const ae=document.activeElement;
  if(isAdmin() && ae && /INPUT|SELECT|TEXTAREA/.test(ae.tagName)) return;  // 입력 중 보호
  try{
    const r=await api('orgchart');
    const v=(r&&r.version)||0;
    if(v===worklogVersion) return;                     // 변경 없음
    worklogVersion=v; applyState(r&&r.state);
    if(currentView==='members') renderMembers(); else { render(); setTimeout(fitViewToFrame,40); }
    if(isAdmin()) refreshStorage();
  }catch(e){}
}
/* 뷰 전환(조직도 / 회원현황) */
function setView(v){
  currentView = (v==='members' && isAdmin()) ? 'members' : 'chart';
  document.body.classList.toggle('view-members', currentView==='members');
  if(currentView==='members') renderMembers(); else render();
}
/* 로그인 계정 관리(관리자 전용). 아이디(사번)·성명·권한(관리자/열람자)·비밀번호(변경 시만). 서버 API. */
let accounts=[];
async function renderMembers(){
  const area=$('#membersList'); if(!area) return;
  area.innerHTML='<div style="color:var(--muted);padding:10px">불러오는 중…</div>';
  try{ const d=await api('members'); accounts=(d.members||[]).map(m=>Object.assign({},m)); }
  catch(e){ area.innerHTML='<div style="color:#c0392b;padding:10px">'+esc((e&&e.message)||'불러오기 실패')+'</div>'; return; }
  drawAccounts();
}
function drawAccounts(){
  const area=$('#membersList'); if(!area) return;
  let h=`<table class="mem-table"><tr><th>아이디(사번)</th><th>성명</th><th>권한</th><th>비밀번호(변경 시만)</th><th>삭제</th></tr>`;
  accounts.forEach((m,i)=>{
    h+=`<tr>`
     +`<td><input data-i="${i}" data-k="email" value="${esc(m.email||'')}" placeholder="사번/아이디" ${m.__new?'':'readonly'}/></td>`
     +`<td><input data-i="${i}" data-k="name" value="${esc(m.name||'')}" placeholder="성명"/></td>`
     +`<td><select data-i="${i}" data-k="role"><option ${m.role==='관리자'?'selected':''}>관리자</option><option ${m.role!=='관리자'?'selected':''}>열람자</option></select></td>`
     +`<td><input data-i="${i}" data-k="pw" type="text" value="" placeholder="${m.__new?'초기 비밀번호(필수)':'변경 시 입력'}"/></td>`
     +`<td><button class="btn" data-del="${i}" style="padding:3px 9px">✕</button></td></tr>`;
  });
  area.innerHTML=h+`</table>`;
  area.querySelectorAll('input,select').forEach(el=>{ el.onchange=()=>saveAccountRow(+el.dataset.i); });
  area.querySelectorAll('[data-del]').forEach(b=>{ b.onclick=()=>delAccount(+b.dataset.del); });
  const c=$('#memCount'); if(c) c.textContent=`총 ${accounts.length}명`;
}
async function saveAccountRow(i){
  const area=$('#membersList'); const get=k=>{ const el=area.querySelector(`[data-i="${i}"][data-k="${k}"]`); return el?el.value.trim():''; };
  const m=accounts[i]; if(!m) return;
  const email=get('email').toLowerCase(), name=get('name'), role=get('role'), pw=get('pw');
  if(!email){ toast('아이디(사번)를 입력하세요'); return; }
  if(m.__new && !pw){ toast('신규 계정은 초기 비밀번호가 필요합니다'); return; }
  const body={ email, name, role }; if(pw) body.password=pw;
  try{
    await api('members',{ method:'PUT', body:JSON.stringify(body) });
    m.email=email; m.name=name; m.role=role; delete m.__new;
    const pwEl=area.querySelector(`[data-i="${i}"][data-k="pw"]`); if(pwEl) pwEl.value='';
    const emEl=area.querySelector(`[data-i="${i}"][data-k="email"]`); if(emEl) emEl.readOnly=true;
    if(currentUser && email===currentUser.email){ currentUser.role=role; currentUser.name=name; applyRole(); }
    toast('저장되었습니다');
  }catch(e){ toast('저장 실패: '+((e&&e.message)||'')); }
}
async function delAccount(i){
  const m=accounts[i]; if(!m) return;
  if(m.__new){ accounts.splice(i,1); drawAccounts(); return; }
  if(currentUser && m.email===currentUser.email){ toast('본인 계정은 삭제할 수 없습니다'); return; }
  if(!confirm(`계정 '${m.name||m.email}'을(를) 삭제할까요?`)) return;
  try{ await api('members/'+encodeURIComponent(m.email),{ method:'DELETE' }); accounts.splice(i,1); drawAccounts(); toast('삭제되었습니다'); }
  catch(e){ toast('삭제 실패: '+((e&&e.message)||'')); }
}
function memAdd(){ accounts.push({ email:'', name:'', role:'열람자', __new:true }); drawAccounts();
  const area=$('#membersList'); const el=area&&area.querySelector(`[data-i="${accounts.length-1}"][data-k="email"]`); if(el) el.focus(); }
function memExport(){
  if(typeof XLSX==='undefined'){ toast('엑셀 라이브러리 로드 실패'); return; }
  const aoa=[['아이디','성명','권한']];
  accounts.forEach(m=>aoa.push([m.email||'', m.name||'', m.role||'열람자']));
  const ws=XLSX.utils.aoa_to_sheet(aoa); ws['!cols']=[{wch:14},{wch:12},{wch:8}];
  const wb=XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb,ws,'계정목록');
  XLSX.writeFile(wb,'조직도_계정목록.xlsx');
}
async function memImport(f){
  if(typeof XLSX==='undefined'){ toast('엑셀 라이브러리 로드 실패'); return; }
  const HMAP={'아이디':'email','아이디(사번)':'email','사번':'email','이메일':'email','성명':'name','이름':'name','권한':'role','비밀번호':'password'};
  const rd=new FileReader();
  rd.onload=async e=>{ try{
    const wb=XLSX.read(e.target.result,{type:'array'}); const ws=wb.Sheets[wb.SheetNames[0]];
    const rows=XLSX.utils.sheet_to_json(ws,{defval:''});
    const list=rows.map(r=>{ const o={}; for(const k of Object.keys(r)){ const kk=HMAP[String(k).trim()]; if(kk) o[kk]=String(r[k]).trim(); } return o; }).filter(m=>m.email);
    if(!list.length){ toast("'아이디' 열이 있는 데이터가 필요합니다"); return; }
    let ok=0;
    for(const m of list){ const body={ email:String(m.email).toLowerCase(), name:m.name||'', role:(m.role==='관리자'?'관리자':'열람자') }; if(m.password) body.password=m.password;
      try{ await api('members',{ method:'PUT', body:JSON.stringify(body) }); ok++; }catch(_){}
    }
    toast(`${ok}명 반영 완료`); renderMembers();
  }catch(err){ toast('엑셀 오류: '+err.message); } };
  rd.readAsArrayBuffer(f);
}

/* =========================================================================
   날짜별 조직도 스냅샷 (Rawdata 폴더 / 다중 업로드)
   ========================================================================= */
let snapshots={};   // "YYYY-MM-DD" -> emp[]
let snapDate='';
function dateFromName(name){
  const m=String(name).match(/(20\d{2})[_.\-](\d{1,2})[_.\-](\d{1,2})/);
  if(!m) return null;
  return `${m[1]}-${String(+m[2]).padStart(2,'0')}-${String(+m[3]).padStart(2,'0')}`;
}
function empFromWorkbook(wb){
  const ws=wb.Sheets[wb.SheetNames[0]];
  const rows=XLSX.utils.sheet_to_json(ws,{defval:'',raw:true});
  const norm=rows.map(r=>{ const o={}; for(const k of Object.keys(r)) o[String(k).trim()]=r[k]; return o; })
                 .filter(r=>(r['성명']!=null && String(r['성명']).trim()!==''));
  return norm.length?norm:null;
}
function snapDatesDesc(){ return Object.keys(snapshots).sort().reverse(); }   // 최신 먼저
function rebuildDateSelect(){
  const sel=$('#snapDate'); if(!sel) return;
  const ds=snapDatesDesc();
  sel.innerHTML = ds.length ? ds.map(d=>`<option value="${d}">${d}</option>`).join('') : `<option value="">(날짜 없음)</option>`;
  if(snapDate && snapshots[snapDate]) sel.value=snapDate;
  const show = ds.length>0;
  sel.style.display = show?'':'none';
  const lbl=$('#snapDateLbl'); if(lbl) lbl.style.display = show?'':'none';
}
function loadSnapDate(d){ if(!snapshots[d]) return; snapDate=d; emp=snapshots[d].slice(); detectCeo(); save(); render(); setTimeout(fitViewToFrame,40); toast(`${d} 조직도`); }
/* Rawdata 버튼 = 직원현황 엑셀 파일 선택 → 그 파일로 조직도 구성.
   여러 파일을 고르고 파일명에 날짜(YYYY_MM_DD)가 있으면 날짜별 스냅샷으로도 등록. */
function connectRawdata(){ $('#rawFiles').click(); }
function handleRawFiles(files){
  files=[...files]; if(!files.length) return;
  if(typeof XLSX==='undefined'){ toast('엑셀 라이브러리 로드 실패(오프라인?)'); return; }
  toast('파일 읽는 중…');
  let pending=files.length, count=0, latest='', lastArr=null, lastName='';
  files.forEach(f=>{
    const d=dateFromName(f.name);
    const rd=new FileReader();
    rd.onload=e=>{
      try{ const wb=XLSX.read(e.target.result,{type:'array',cellDates:true}); const arr=empFromWorkbook(wb);
        if(arr){ lastArr=arr; lastName=f.name; if(d){ snapshots[d]=arr; count++; if(d>latest) latest=d; } } }catch(_){}
      if(--pending===0) finishRawLoad(count, latest, lastArr, lastName);
    };
    rd.readAsArrayBuffer(f);
  });
}
/* 날짜 있는 파일 → 스냅샷 등록(최신 선택). 날짜 없는 파일 → 그 파일로 바로 조직도 구성. */
function finishRawLoad(count, latest, lastArr, lastName){
  if(!lastArr){ toast('성명 컬럼이 있는 직원현황 엑셀을 읽지 못했습니다'); return; }
  if(count){ finishSnapLoad(count, latest); return; }
  emp=lastArr; detectCeo();
  ui.pos={}; ui.sumPos={}; ui.labels.off={}; ui.pageFrame=null; ui.titlePos=null; ui.hidden={}; ui.sumEdits={};
  const d=dateFromName(lastName); if(d){ snapshots[d]=lastArr; snapDate=d; }
  save(); rebuildDateSelect(); render(); setTimeout(fitViewToFrame,40);
  toast(`조직도 구성 완료 (직원 ${emp.length}명)`);
}
function finishSnapLoad(count, latest){
  if(!count){ toast('파일명이 YYYY_MM_DD 형식인 엑셀을 찾지 못했습니다'); return; }
  if(latest){ snapDate=latest; emp=snapshots[latest].slice(); detectCeo();
    ui.pos={}; ui.sumPos={}; ui.labels.off={}; ui.pageFrame=null; ui.titlePos=null; ui.hidden={}; ui.sumEdits={}; }
  save(); rebuildDateSelect(); render(); setTimeout(fitViewToFrame,40);
  toast(`${count}개 날짜의 조직도를 불러왔습니다 (최신: ${latest})`);
}

/* =========================================================================
   범용 모달
   ========================================================================= */
let modalOk=null;
function openModal(title, bodyHtml, onOk){
  $('#mdTitle').textContent=title; $('#mdBody').innerHTML=bodyHtml; modalOk=onOk;
  $('#modal').classList.add('on');
  const first=$('#mdBody').querySelector('input,textarea'); if(first) setTimeout(()=>first.focus(),30);
}
function closeModal(){ $('#modal').classList.remove('on'); modalOk=null; }

/* =========================================================================
   사장 / 커스텀 박스 편집 (관리자)
   ========================================================================= */
function editCeo(){
  openModal('최고책임자(사장) 편집',
    `<label>직책</label><input id="ceoRole" value="${esc(ui.ceo.role||'')}"/>
     <label>성명</label><input id="ceoName" value="${esc(ui.ceo.name||'')}"/>`,
    ()=>{ ui.ceo.role=$('#ceoRole').value; ui.ceo.name=$('#ceoName').value; ui.ceo.auto=false; save(); render(); return true; });
}
const KIND_OPTS=`<option value="hq">본부 (본부색)</option><option value="team">팀 (팀색)</option>`;
function editCustom(id){
  const cb=ui.customBoxes.find(x=>x.id===id); if(!cb) return;
  openModal('조직 편집',
    `<label>종류</label><select id="cbK">${KIND_OPTS}</select>
     <label>이름</label><input id="cbT" value="${esc(cb.title||'')}"/>
     <label>내용 (한 줄에 하나 · 없어도 됨)</label><textarea id="cbL">${esc((cb.lines||[]).join('\n'))}</textarea>`,
    ()=>{ cb.kind=$('#cbK').value; cb.title=$('#cbT').value.trim()||cb.title; cb.lines=$('#cbL').value.split('\n').map(s=>s.trim()).filter(Boolean); save(); render(); return true; });
  setTimeout(()=>{ const k=$('#cbK'); if(k) k.value=boxKind(cb); },10);
}
/* ---- 제목 편집 / 이동 ---- */
function editTitle(){
  openModal('제목 편집',
    `<label>조직도 제목</label><input id="ttlIn" value="${esc(ui.title||'')}"/>`,
    ()=>{ ui.title=$('#ttlIn').value; $('#title').value=ui.title; $('#fsTitle').textContent=ui.title; save(); render(); return true; });
}
function attachTitleDrag(){
  const t=$('#chartTitle'); if(!t||t._wired) return; t._wired=true;
  t.addEventListener('dblclick',()=>{ if(!isAdmin())return; editTitle(); });
  t.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin())return; ev.preventDefault();
    const start=(ui.titlePos&&typeof ui.titlePos.x==='number')?{...ui.titlePos}:{x:t.offsetLeft,y:t.offsetTop};
    const sx=ev.clientX, sy=ev.clientY, z=ui.zoom||1;
    try{t.setPointerCapture(ev.pointerId);}catch(_){} t.style.cursor='grabbing';
    const f=activeFrame();
    const move=e=>{ const c=clampXY(snap(start.x+(e.clientX-sx)/z), snap(start.y+(e.clientY-sy)/z), t.offsetWidth, t.offsetHeight, f); ui.titlePos={x:c.x,y:c.y}; t.style.left=ui.titlePos.x+'px'; t.style.top=ui.titlePos.y+'px'; };
    const up=()=>{ try{t.releasePointerCapture(ev.pointerId);}catch(_){} t.style.cursor=''; document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); fitCanvas(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
}

/* ---- 조직 삭제 / 복원 (본부·팀·추가 박스) ---- */
function openDeleteOrg(){
  if(!emp.length){ toast('먼저 데이터를 불러오세요'); return; }
  openModal('조직 삭제 / 복원', delOrgHtml(), ()=>true);
  wireDelOrg();
}
function delOrgHtml(){
  const g=fullGroups();
  const row=(id,label,hiddenNow,kind)=>`<div style="display:flex;align-items:center;gap:8px;padding:5px 4px;border-bottom:1px solid #eef1f7">
     <span style="flex:1;${hiddenNow?'opacity:.45;text-decoration:line-through':''}">${esc(label)}</span>
     <button class="btn ${hiddenNow?'':'primary'}" data-act="${kind==='custom'?'delcustom':(hiddenNow?'restore':'del')}" data-id="${esc(id)}" style="padding:4px 10px">${hiddenNow?'복원':'삭제'}</button></div>`;
  let rows='';
  if((ui.customBoxes||[]).length){ rows+=`<div style="font-weight:800;margin:4px 0 2px;color:var(--muted)">추가한 조직(본부/팀/위원회)</div>`;
    ui.customBoxes.forEach(cb=> rows+=row(cb.id, `［${KIND_LABEL[boxKind(cb)]}］ `+(cb.title||'조직'), false, 'custom')); }
  rows+=`<div style="font-weight:800;margin:10px 0 2px;color:var(--muted)">본부 · 팀</div>`;
  g.forEach(H=>{
    rows+=row(boxId(H.hq,'__HQ__'), '［본부］ '+H.hq, !!ui.hidden[boxId(H.hq,'__HQ__')], 'auto');
    H.depts.forEach(d=> rows+=row(boxId(H.hq,d.dept), '　└ '+d.dept, !!ui.hidden[boxId(H.hq,d.dept)], 'auto'));
  });
  return `<div style="max-height:52vh;overflow:auto">${rows}</div>
    <div style="font-size:11.5px;color:var(--muted);margin-top:8px">본부를 삭제하면 그 아래 팀도 함께 숨겨집니다. 삭제는 화면·인쇄·내보내기에서 제외될 뿐, 인원수 집계에는 남습니다. 본부·팀은 언제든 복원할 수 있어요(추가 조직은 영구 삭제).</div>`;
}
function wireDelOrg(){
  $('#mdBody').querySelectorAll('[data-act]').forEach(b=>{
    b.onclick=()=>{
      const id=b.dataset.id, act=b.dataset.act;
      if(act==='delcustom'){ if(!confirm('이 추가 조직을 삭제할까요? (복원 불가)')) return; ui.customBoxes=ui.customBoxes.filter(x=>x.id!==id); }
      else if(act==='del') ui.hidden[id]=true;
      else delete ui.hidden[id];
      save(); render();
      $('#mdBody').innerHTML=delOrgHtml(); wireDelOrg();
    };
  });
}

/* =========================================================================
   표시설정 패널
   ========================================================================= */
/* 다양한 색상(hue×명도) — 본부/팀 색 팝업에 그리드로 표시. 헤더는 흰 글씨라 중간~진한 톤 위주. */
const COLOR_SWATCHES=[
  '#b23b3b','#c0392b','#8a2f2a','#a83232','#d35400','#c0651a','#8a5a1e','#7a4a12',
  '#b8860b','#a67c00','#6f7a12','#4f7a1e','#2e7d32','#1d6a52','#0f766e','#127d6e',
  '#2a6f8a','#1f6f9e','#1c5fa8','#1c3f6e','#25408b','#3a3f9e','#4b3fa0','#6b4a9e',
  '#7a3f8a','#8a2f6a','#a83277','#8a2f4a','#b23b6b','#7a3b52','#5a5f6e','#3a3f6e',
  '#455a64','#37474f','#4e5d6c','#2f3a4a','#5a4632','#6a4a2a','#3a4a3a','#2a3a4a',
  '#111827','#374151','#6d4c41','#00695c','#283593','#4527a0','#ad1457','#00838f'
];
function buildStylePanel(){
  $('#stW').value=ui.style.boxW; $('#stWv').textContent=ui.style.boxW;
  $('#stF').value=ui.style.fontPx; $('#stFv').textContent=ui.style.fontPx;
  $('#stFmt').value=['posName','nameOnly','deptOnly'].includes(ui.style.lineFmt)?ui.style.lineFmt:'posName';
  $('#stTop').value=ui.style.hqTop||214; $('#stTopv').textContent=ui.style.hqTop||214;
  $('#stBus').value=Math.min(440,ui.style.ceoBus||18); $('#stBusv').textContent=ui.style.ceoBus||18;
  $('#stRow').value=rowPad(); $('#stRowv').textContent=rowPad();
  $('#stGap').value=ui.style.badgeGap||46; $('#stGapv').textContent=ui.style.badgeGap||46;
  // 제목 네모칸: 글자 크기 / 글자 색 / 상자 색
  $('#stTF').value=ui.style.titleFont||22; $('#stTFv').textContent=ui.style.titleFont||22;
  const tcDot=$('#titleColorDot'); if(tcDot) tcDot.style.background=ui.style.titleColor||'#12203a';
  const tbDot=$('#titleBgDot'); if(tbDot){ const bg=ui.style.titleBg; if(!bg||bg==='none'){ tbDot.style.background='repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 10px 10px'; tbDot.title='없음(투명)'; } else { tbDot.style.background=bg; tbDot.title=bg; } }
  $('#stTF').oninput=e=>{ ui.style.titleFont=+e.target.value; $('#stTFv').textContent=e.target.value; applyTitleStyle(); positionTitle(); save(); };
  $('#btnTitleColor').onclick=()=>openColorPicker('제목 글자 색', ui.style.titleColor||'#12203a', c=>{ ui.style.titleColor=c; save(); buildStylePanel(); render(); });
  $('#btnTitleBg').onclick=()=>openColorPicker('제목 상자 색 (없음 = 투명)', (ui.style.titleBg&&ui.style.titleBg!=='none')?ui.style.titleBg:'#ffffff', c=>{ ui.style.titleBg=(c==='none'?'none':c); save(); buildStylePanel(); render(); }, true);
  // 인원현황표 4종 표시/숨김 체크박스(체크=표시)
  const shMap={shHq:'hq',shGo:'gradeOffice',shGp:'gradeProd',shFac:'factory'};
  Object.entries(shMap).forEach(([cid,key])=>{ const c=$('#'+cid); if(!c) return;
    c.checked=!(ui.sumHidden&&ui.sumHidden[key]);
    c.onchange=()=>{ ui.sumHidden=ui.sumHidden||{}; if(c.checked) delete ui.sumHidden[key]; else ui.sumHidden[key]=true; save(); render(); };
  });
  // 본부/팀 색: 색상 선택 창(팝업) 버튼 + 현재색 미리보기 점
  const hqDot=$('#hqColorDot'); if(hqDot) hqDot.style.background=hqBaseColor();
  const teamDot=$('#teamColorDot'); if(teamDot) teamDot.style.background=(ui.style.teamColor||ui.style.accent||'#1c3f6e');
  const commDot=$('#commColorDot'); if(commDot) commDot.style.background=committeeColor();
  $('#btnHqColor').onclick=()=>openColorPicker('본부 색 선택', hqBaseColor(), c=>{ ui.style.accent=c; save(); buildStylePanel(); render(); });
  $('#btnTeamColor').onclick=()=>openColorPicker('팀 색 선택', (ui.style.teamColor||ui.style.accent||'#1c3f6e'), c=>{ ui.style.teamColor=c; save(); buildStylePanel(); render(); });
  $('#btnCommColor').onclick=()=>openColorPicker('위원회 색 선택 (전체 공통)', committeeColor(), c=>{ ui.style.committeeColor=c; ['left','right'].forEach(s=>((ui.committees&&ui.committees[s])||[]).forEach(cm=>delete cm.color)); save(); buildStylePanel(); render(); });
  // 박스 너비 전체 조정: 개별 조정값(ui.boxW)을 비워 항상 전 박스에 반영
  $('#stW').oninput=e=>{ ui.style.boxW=+e.target.value; $('#stWv').textContent=e.target.value; ui.boxW={}; applyStyleVars(); render(); save(); };
  $('#stF').oninput=e=>{ ui.style.fontPx=+e.target.value; $('#stFv').textContent=e.target.value; applyStyleVars(); render(); save(); };
  $('#stFmt').onchange=e=>{ ui.style.lineFmt=e.target.value; save(); render(); };
  $('#stTop').oninput=e=>{ ui.style.hqTop=+e.target.value; $('#stTopv').textContent=e.target.value; render(); save(); };
  $('#stBus').oninput=e=>{ ui.style.ceoBus=+e.target.value; $('#stBusv').textContent=e.target.value; drawWires(); renderCeoBusHandle(); save(); };
  $('#stRow').oninput=e=>{ ui.style.rowPad=+e.target.value; $('#stRowv').textContent=e.target.value; applyStyleVars(); render(); save(); };
  $('#stGap').oninput=e=>{ ui.style.badgeGap=+e.target.value; $('#stGapv').textContent=e.target.value; render(); save(); };
}
/* 색상 선택 팝업: 프리셋 스와치 + 사용자 지정(color input) */
function openColorPicker(title,current,onPick,allowNone){
  current=(current||'#1c3f6e');
  const noneSw = allowNone? `<span class="sw pick" data-c="none" title="없음(투명)" style="display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;border:1px solid #0003;cursor:pointer;background:repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 10px 10px;font-weight:900;color:#c0392b">✕</span>`:'';
  const sws=noneSw+COLOR_SWATCHES.map(c=>`<span class="sw pick" data-c="${c}" title="${c}" style="display:inline-block;width:26px;height:26px;border-radius:6px;border:1px solid #0003;cursor:pointer;background:${c};${current.toLowerCase()===c.toLowerCase()?'outline:3px solid #6b4a9e;outline-offset:2px':''}"></span>`).join('');
  openModal(title,
    `<label>기본 색상 (${COLOR_SWATCHES.length}색)</label><div style="display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px;max-height:40vh;overflow:auto">${sws}</div>
     <label>직접 선택(사용자 지정)</label>
     <div style="display:flex;align-items:center;gap:10px">
       <input type="color" id="cpColor" value="${current}" style="width:58px;height:40px;padding:0;border:1px solid var(--line);border-radius:8px;cursor:pointer"/>
       <span id="cpVal" style="font-weight:700">${esc(current)}</span>
     </div>
     <div style="font-size:11.5px;color:var(--muted);margin-top:8px">스와치를 클릭하면 바로 적용됩니다. 직접 선택은 아래 확인을 누르세요.</div>`,
    ()=>{ onPick($('#cpColor').value); return true; });
  setTimeout(()=>{
    $('#mdBody').querySelectorAll('.sw.pick').forEach(s=>{ s.onclick=()=>{ onPick(s.dataset.c); closeModal(); }; });
    const col=$('#cpColor'); if(col) col.oninput=()=>{ $('#cpVal').textContent=col.value; };
  },20);
}

/* =========================================================================
   페이지(용지) 레이아웃 — A4/A3 배치 영역 + 내보내기 꽉 채움
   ========================================================================= */
const PAGE_MM={A4:[210,297], A3:[297,420]};
const PAGE_MARGIN_MM=6;                       // 최소 여백
function pageDims(){
  let [w,h]=PAGE_MM[ui.page.size]||PAGE_MM.A3;
  if(ui.page.orient==='landscape'){ const a=Math.max(w,h),b=Math.min(w,h); w=a; h=b; }
  else { const a=Math.min(w,h),b=Math.max(w,h); w=a; h=b; }
  const m=PAGE_MARGIN_MM;
  return {w,h, uw:w-2*m, uh:h-2*m, m};
}
function pageAspect(){ const d=pageDims(); return d.uw/d.uh; }
/* 실제 콘텐츠(박스·집계·배지) 경계 */
function contentBBox(){
  const canvas=$('#canvas'); let x0=1e9,y0=1e9,x1=-1e9,y1=-1e9,found=false;
  canvas.querySelectorAll('.box,.committee-stack,.sum,.badge').forEach(n=>{
    found=true;
    x0=Math.min(x0,n.offsetLeft); y0=Math.min(y0,n.offsetTop);
    x1=Math.max(x1,n.offsetLeft+n.offsetWidth); y1=Math.max(y1,n.offsetTop+n.offsetHeight);
  });
  if(!found) return null;
  return {x:x0,y:y0,w:x1-x0,h:y1-y0};
}
/* 콘텐츠를 용지 비율(무왜곡)로 감싼 자동 프레임(중앙 정렬) */
function computeFrameAuto(){
  const bb=contentBBox(); if(!bb) return null;
  const R=pageAspect(), pad=40;   // 상단 제목이 대표 박스를 안 가리도록 여유 확보
  let fw=bb.w+pad*2, fh=bb.h+pad*2;
  if(fw/fh > R) fh=fw/R; else fw=fh*R;      // 작은 쪽을 늘려 용지 비율 맞춤(안 잘림)
  const cx=bb.x+bb.w/2, cy=bb.y+bb.h/2;
  let fx=Math.round(cx-fw/2), fy=Math.round(cy-fh/2);
  // 틀이 캔버스 원점(0,0) 밖(음수)으로 넘치면 안쪽으로 이동 → 내용이 좌/상단 틀선까지 닿고 내보내기도 안 잘림
  if(fx<0) fx=0; if(fy<0) fy=0;
  return {x:fx, y:fy, w:Math.round(fw), h:Math.round(fh)};
}
/* 현재 프레임: 수동 저장값 우선, 없으면 자동. 항상 0 이상으로 정규화(음수 좌표 방지) */
function pageFrame(){
  let f=(ui.pageFrame && ui.pageFrame.w) ? ui.pageFrame : computeFrameAuto();
  if(f && (f.x<0 || f.y<0)) f={x:Math.max(0,f.x), y:Math.max(0,f.y), w:f.w, h:f.h};
  return f;
}
/* 배치 가능 영역(프레임) 렌더 — 관리자 편집 시 안내용, 드래그/리사이즈 가능 */
function renderPageFrame(){
  const canvas=$('#canvas');
  const old=canvas.querySelector('#pageFrame'); if(old) old.remove();
  if(!(isAdmin() && ui.showFrame!==false && emp.length)) return;
  const f=pageFrame(); if(!f) return;
  const el=document.createElement('div'); el.id='pageFrame';
  el.style.left=f.x+'px'; el.style.top=f.y+'px'; el.style.width=f.w+'px'; el.style.height=f.h+'px';
  el.innerHTML=`<div class="pf-label">📐 배치 가능 영역 · ${ui.page.size} ${ui.page.orient==='landscape'?'가로':'세로'} — 이 영역이 내보내기/인쇄에 꽉 차게 출력됩니다 (드래그: 이동)</div><div class="pf-resizer" title="드래그: 영역 크기(용지 비율 고정)"></div>`;
  canvas.appendChild(el);
  attachFrameDrag(el);
}
function attachFrameDrag(el){
  if(!(ui.pageFrame && ui.pageFrame.w)) ui.pageFrame=computeFrameAuto();   // 조작 시 값 고정
  const lbl=el.querySelector('.pf-label'), rz=el.querySelector('.pf-resizer');
  lbl.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin())return; ev.preventDefault(); ev.stopPropagation();
    const cur={...ui.pageFrame}, sx=ev.clientX, sy=ev.clientY, z=ui.zoom||1;
    try{lbl.setPointerCapture(ev.pointerId);}catch(_){}
    const move=e=>{ ui.pageFrame={x:Math.max(0,snap(cur.x+(e.clientX-sx)/z)), y:Math.max(0,snap(cur.y+(e.clientY-sy)/z)), w:cur.w, h:cur.h};
      el.style.left=ui.pageFrame.x+'px'; el.style.top=ui.pageFrame.y+'px'; };
    const up=()=>{ try{lbl.releasePointerCapture(ev.pointerId);}catch(_){} document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); fitCanvas(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
  rz.addEventListener('pointerdown',ev=>{
    if(ev.button!==0||!isAdmin())return; ev.preventDefault(); ev.stopPropagation();
    const cur={...ui.pageFrame}, sx=ev.clientX, z=ui.zoom||1, R=cur.w/cur.h;
    try{rz.setPointerCapture(ev.pointerId);}catch(_){}
    const move=e=>{ let nw=Math.max(240, snap(cur.w+(e.clientX-sx)/z)), nh=Math.round(nw/R);
      ui.pageFrame={x:cur.x,y:cur.y,w:nw,h:nh}; el.style.width=nw+'px'; el.style.height=nh+'px'; };
    const up=()=>{ try{rz.releasePointerCapture(ev.pointerId);}catch(_){} document.removeEventListener('pointermove',move); document.removeEventListener('pointerup',up); save(); fitCanvas(); };
    document.addEventListener('pointermove',move); document.addEventListener('pointerup',up);
  });
}
function syncPageControls(){
  const el=$('#fsPgSize'); if(el) el.value=ui.page.size;   // 용지 크기는 전체화면에서만 선택
}

/* =========================================================================
   내보내기 (이미지 / PDF / 엑셀)
   ========================================================================= */
/* region={x,y,w,h}(캔버스 좌표)만 캡처. 없으면 전체 캔버스.
   전체를 렌더한 뒤 region을 잘라내어(오프셋/영역초과에도 안전) 반환 */
async function captureRegion(region){
  if(typeof html2canvas==='undefined'){ toast('이미지 라이브러리 로드 실패(오프라인?)'); return null; }
  const stage=$('#stage'); const prev=stage.style.transform; stage.style.transform='none';
  document.body.classList.add('capturing');   // 핸들·프레임·그리드 숨김
  const canvas=$('#canvas'); const scale=2;
  const full=await html2canvas(canvas,{backgroundColor:'#ffffff',scale,useCORS:true,
    width:canvas.offsetWidth,height:canvas.offsetHeight,windowWidth:canvas.offsetWidth+80});
  document.body.classList.remove('capturing');
  stage.style.transform=prev;
  if(!region) return full;
  const out=document.createElement('canvas');
  out.width=Math.max(1,Math.round(region.w*scale)); out.height=Math.max(1,Math.round(region.h*scale));
  const ctx=out.getContext('2d'); ctx.fillStyle='#ffffff'; ctx.fillRect(0,0,out.width,out.height);
  ctx.drawImage(full, Math.round(region.x*scale), Math.round(region.y*scale), out.width, out.height, 0,0, out.width, out.height);
  return out;
}
function dl(blobOrUrl,name){ const a=document.createElement('a'); a.download=name; a.href=(typeof blobOrUrl==='string')?blobOrUrl:URL.createObjectURL(blobOrUrl); a.click(); setTimeout(()=>{ if(typeof blobOrUrl!=='string') URL.revokeObjectURL(a.href); },1000); }
async function exportPng(){ if(!emp.length){toast('먼저 데이터를 불러오세요');return;} toast('이미지 생성 중…'); const cvs=await captureRegion(pageFrame()); if(!cvs)return; cvs.toBlob(b=>dl(b,(ui.title||'조직도')+`_${ui.page.size}.png`),'image/png'); }
async function exportPdf(){
  if(!emp.length){toast('먼저 데이터를 불러오세요');return;}
  if(!window.jspdf){ toast('PDF 라이브러리 로드 실패(오프라인?)'); return; }
  toast('PDF 생성 중…'); const cvs=await captureRegion(pageFrame()); if(!cvs)return;
  const img=cvs.toDataURL('image/jpeg',0.95); const d=pageDims();
  const {jsPDF}=window.jspdf; const pdf=new jsPDF({orientation:ui.page.orient, unit:'mm', format:ui.page.size.toLowerCase()});
  pdf.addImage(img,'JPEG', d.m, d.m, d.uw, d.uh, undefined,'FAST');   // 프레임=용지 비율 → 무왜곡 꽉 채움
  pdf.save((ui.title||'조직도')+`_${ui.page.size}.pdf`);
}
/* 인쇄: 캡처 이미지를 용지 크기에 꽉 채워 단일 페이지 인쇄(팝업차단 회피 iframe) */
async function printPage(){
  if(!emp.length){toast('먼저 데이터를 불러오세요');return;}
  toast('인쇄 준비 중…'); const cvs=await captureRegion(pageFrame()); if(!cvs)return;
  const img=cvs.toDataURL('image/png'); const d=pageDims();
  const ifr=document.createElement('iframe'); ifr.style.cssText='position:fixed;right:0;bottom:0;width:0;height:0;border:0';
  document.body.appendChild(ifr); const doc=ifr.contentWindow.document; doc.open();
  doc.write(`<html><head><style>@page{size:${ui.page.size} ${ui.page.orient};margin:${d.m}mm}html,body{margin:0;padding:0}img{width:${d.uw}mm;height:${d.uh}mm;display:block}</style></head><body><img src="${img}"></body></html>`);
  doc.close();
  const go=()=>{ try{ ifr.contentWindow.focus(); ifr.contentWindow.print(); }catch(_){} setTimeout(()=>ifr.remove(),1500); };
  const im=doc.querySelector('img'); if(im && !im.complete){ im.onload=go; im.onerror=go; } else setTimeout(go,250);
}
function exportXlsxData(){
  if(typeof XLSX==='undefined'){ toast('엑셀 라이브러리 로드 실패'); return; }
  if(!emp.length){toast('먼저 데이터를 불러오세요');return;}
  const hqs=buildGroups();
  const aoa=[[ui.title||'조직도 명단']];
  aoa.push(['본부','부서','구분','직책','직급','성명','직위','직군','근속','나이','메일']);
  const push=(hq,dept,e)=>aoa.push([hq,dept, isLeader(e['직책명'])?'리더':'', e['직책명']||'', e['직급명']||'', e['성명']||'', e['직위명']||'', e['직군명']||'', calcTenure(e['그룹입사일']), e['나이']||'', e['메일주소']||'']);
  for(const H of hqs){ if(H.hqLead) push(H.hq,'(직속)',H.hqLead); H.direct.forEach(e=>push(H.hq,'(직속)',e)); for(const d of H.depts) d.people.forEach(e=>push(H.hq,d.dept,e)); }
  const ws=XLSX.utils.aoa_to_sheet(aoa);
  ws['!merges']=[{s:{r:0,c:0},e:{r:0,c:10}}];
  ws['!cols']=[{wch:16},{wch:16},{wch:6},{wch:10},{wch:8},{wch:12},{wch:8},{wch:8},{wch:7},{wch:6},{wch:22}];
  styleSheet(ws,aoa,1);
  // 집계 시트(화면 4종 표와 동일 — 수기 override 반영)
  const s2=[]; const defs=sumDefs();
  const block=key=>{
    const d=defs[key]; if(!d || d.hideIfEmpty) return;
    if(s2.length) s2.push([]);
    s2.push([d.title]); s2.push([d.header, ...d.cols.map(c=>c.label), '합계']);
    const colTot=d.cols.map(()=>0); let grand=0;
    d.auto.forEach(r=>{ let rs=0; const vals=d.cols.map((c,i)=>{ const v=ovVal(key,r.rowKey,c.field,r[c.field]); rs+=v; colTot[i]+=v; return v; }); grand+=rs; s2.push([r.label,...vals,rs]); });
    s2.push(['합계',...colTot,grand]);
  };
  ['hq','gradeOffice','gradeProd','factory'].forEach(block);
  const ws2=XLSX.utils.aoa_to_sheet(s2); ws2['!cols']=[{wch:16},{wch:9},{wch:9},{wch:9}];
  const wb=XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb,ws,'조직명단'); XLSX.utils.book_append_sheet(wb,ws2,'집계');
  XLSX.writeFile(wb,(ui.title||'조직도')+'.xlsx');
}
function styleSheet(ws,aoa,headerRow){
  const R=aoa.length, C=aoa[headerRow].length;
  for(let r=0;r<R;r++)for(let c=0;c<C;c++){ const a=XLSX.utils.encode_cell({r,c}); let cell=ws[a]; if(!cell){cell=ws[a]={t:'s',v:''};}
    cell.s={border:{top:{style:'thin',color:{rgb:'C7D0E0'}},bottom:{style:'thin',color:{rgb:'C7D0E0'}},left:{style:'thin',color:{rgb:'C7D0E0'}},right:{style:'thin',color:{rgb:'C7D0E0'}}},alignment:{vertical:'center',wrapText:true}};
    if(r===0){ cell.s.font={bold:true,sz:14,color:{rgb:'12203A'}}; cell.s.alignment={horizontal:'left'}; }
    else if(r===headerRow){ cell.s.fill={fgColor:{rgb:'1C3F6E'}}; cell.s.font={bold:true,color:{rgb:'FFFFFF'}}; cell.s.alignment={horizontal:'center'}; }
  }
}

/* =========================================================================
   전체화면 보기 (발표용) + 내보내기
   ========================================================================= */
let fsZoom=1;
function openFull(){
  if(!emp.length){toast('먼저 데이터를 불러오세요');return;}
  syncPageControls();
  $('#fs').classList.add('on');
  renderFsPreview();
}
/* 전체화면 = 실제 출력 페이지(용지) 미리보기: 프레임 영역만 잘라 흰 페이지로 표시 */
function renderFsPreview(){
  const canvas=$('#canvas'); const st=$('#fsstage'); st.innerHTML='';
  const f=pageFrame();
  const clone=canvas.cloneNode(true);
  clone.classList.remove('grid-on');
  clone.querySelectorAll('.tools,.ctools,.whandle,.cwire-handle,.box-resizer,.committee-resizer,#pageFrame').forEach(n=>n.remove());  // 편집버튼·핸들·프레임 제거
  clone.id='fsCanvas';
  let cw, ch;
  if(f){
    const page=document.createElement('div'); page.className='fs-page';
    page.style.width=f.w+'px'; page.style.height=f.h+'px';
    clone.style.position='absolute'; clone.style.left=(-f.x)+'px'; clone.style.top=(-f.y)+'px';
    page.appendChild(clone); st.appendChild(page);
    cw=f.w; ch=f.h;
  } else {
    st.appendChild(clone); cw=canvas.offsetWidth; ch=canvas.offsetHeight;
  }
  st.style.width=cw+'px'; st.style.height=ch+'px';
  $('#fsTitle').textContent=(ui.title||'조직도')+`  ·  ${ui.page.size} ${ui.page.orient==='landscape'?'가로':'세로'}`;
  const vw=$('#fsview').clientWidth-48, vh=$('#fsview').clientHeight-48;
  fsZoom=Math.max(.1, Math.min(1, Math.min(vw/(cw||1), vh/(ch||1))));
  fsApplyZoom();
}
function fsApplyZoom(){
  const st=$('#fsstage'), view=$('#fsview');
  const w=st.offsetWidth*fsZoom, h=st.offsetHeight*fsZoom;
  const offX=Math.max(0,(view.clientWidth-w)/2), offY=Math.max(0,(view.clientHeight-h)/2);   // 뷰포트 가운데 정렬
  st.style.transformOrigin='0 0';
  st.style.transform=`translate(${offX}px,${offY}px) scale(${fsZoom})`;
  $('#fsZv').textContent=Math.round(fsZoom*100)+'%';
}
function closeFull(){ $('#fs').classList.remove('on'); }

/* =========================================================================
   가상(샘플) 데이터
   ========================================================================= */
function sampleData(){
  const give=['민준','서연','도윤','하은','지호','수빈','현우','예은','준서','유진','성민','지훈','다은','태양','보라','규현','세헌','광수','영성','종률','상철','정희','한신','치현','재민','한봄','문선','기홍','현근','유상'];
  const sur='김이박최정강조윤장임한오서신권황안송전홍';
  let gi=0, si=0, no=0; const rows=[];
  const nm=()=> sur[(si++)%sur.length]+give[(gi++)%give.length];
  const date=(y,m,d)=>`${y}-${String(m).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
  const add=(hq,dept,pos,rank,role,jgun,y,age)=>{ no++; rows.push({No:no,본부명:hq,부서명:dept,성명:nm(),직위명:pos,직급명:rank,직책명:role,직군명:jgun,사원구분명:'정규직',직무명:'일반',재직상태명:'재직',성별:no%3?'남':'여',그룹입사일:date(y,(no%12)+1,(no%27)+1),현직급승진일:date(Math.min(y+3,2024),(no%12)+1,(no%27)+1),나이:age,메일주소:`user${no}@company.com`}); };
  add('','','','','사장','',2000,60);                                   // 사장 → CEO 노드
  const team=(hq,dept,leadRole,jgun,n)=>{ add(hq,dept,'과장','책임',leadRole,jgun,2010,47); const ranks=['수석','책임','선임','선임','선임','책임']; for(let i=1;i<n;i++){ const rk=ranks[i%ranks.length]; add(hq,dept,{수석:'수석',책임:'과장',선임:'대리'}[rk],rk,'',jgun,2012+i,32+i*2);} };
  add('경영지원본부','(직속)','부사장','수석','부사장','사무직',2005,55);  // 본부장(직속)
  team('경영지원본부','경영기획팀','팀장','사무직',5);
  team('경영지원본부','재무회계팀','팀장','사무직',6);
  team('경영지원본부','인사총무팀','팀장','사무직',4);
  add('BX사업본부','(직속)','상무','수석','본부장','사무직',2006,53);
  team('BX사업본부','유통영업팀','팀장','사무직',7);
  team('BX사업본부','특판영업팀','팀장','사무직',4);
  team('BX사업본부','마케팅팀','팀장','사무직',4);
  team('제조본부','익산공장','공장장','생산직',7);
  team('제조본부','영동공장','공장장','생산직',7);
  team('제조본부','생산지원팀','팀장','생산직',5);
  team('기술연구소','선행연구팀','팀장','사무직',5);
  team('기술연구소','복합제품연구팀','팀장','사무직',4);
  team('영업본부','대전지점','지점장','사무직',5);
  team('영업본부','부산지점','지점장','사무직',6);
  return rows;
}
function detectCeo(){
  if(!ui.ceo.auto) return;   // 관리자가 직접 편집한 경우 유지
  const c=emp.find(e=>/사장|대표|CEO/i.test((e['직책명']||'')+(e['직위명']||'')));
  if(c) ui.ceo={role:c['직책명']||c['직위명']||'사장', name:c['성명']||'', auto:true};
  else ui.ceo={role:'사장', name:'O O O', auto:true};   // 데이터에 없으면 편집용 기본값
}
function loadSample(){
  emp=sampleData(); detectCeo();
  ui.pos={}; ui.sumPos={}; ui.labels.off={}; ui.pageFrame=null;
  ui.customBoxes=[];
  ui.committees={ left:[{id:'cm1',title:'경영자문위원회',members:['위원장 O O O','위원 △ △ △']}],
                  right:[{id:'cm2',title:'인사위원회',members:['위원장 O O O','간사 □ □ □']}] };
  ui.committeePos={left:null,right:null}; ui.committeeW={left:0,right:0}; ui.committeeWire={left:null,right:null};
  ui.titlePos=null; ui.hidden={}; ui.sumEdits={};
  save(); render(); setTimeout(fitViewToFrame,40); toast('가상(샘플) 데이터로 조직도를 구성했습니다');
}

/* =========================================================================
   저장공간 / 데이터 관리 (관리자) + 본인 비밀번호 변경
   ========================================================================= */
let lastStats=null;
function fmtBytes(n){ n=n||0; if(n<1024) return n+' B'; if(n<1048576) return (n/1024).toFixed(1)+' KB'; if(n<1073741824) return (n/1048576).toFixed(2)+' MB'; return (n/1073741824).toFixed(2)+' GB'; }
async function refreshStorage(){
  if(!isAdmin()) return;
  try{ const s=await api('stats'); lastStats=s;
    const used=s.appstateBytes||0, limit=s.limitBytes||(5*1024*1024*1024), pct=Math.min(100, used/limit*100);
    const fill=$('#sbFill'); if(fill){ fill.style.width=Math.max(0.4,pct).toFixed(2)+'%'; fill.className='sb-fill'+(pct>85?' danger':pct>60?' warn':''); }
    const t=$('#sbText'); if(t) t.textContent=`${fmtBytes(used)} / 5 GB (${pct.toFixed(4)}%)`;
  }catch(e){ const t=$('#sbText'); if(t) t.textContent='측정 실패'; }
}
function openStorage(){
  const u=lastStats?(lastStats.appstateBytes||0):0;
  $('#stSummary').innerHTML=lastStats
    ? `현재 사용량 <b>${fmtBytes(u)}</b> / 5 GB · 변경 이력 <b>${lastStats.auditCount||0}건</b> · 로그인 계정 <b>${lastStats.userCount||0}개</b><br>조직도는 이미지가 없어 용량이 매우 작습니다(무료 D1 한도 5GB).`
    : '측정 중…';
  $('#stModal').classList.add('on'); refreshStorage();
}
function closeStorage(){ $('#stModal').classList.remove('on'); }
async function stClearData(){
  if(!confirm('⚠️ 조직도 데이터와 히스토리(날짜별 스냅샷)를 서버에서 모두 삭제할까요?\n\n· 로그인 계정은 유지됩니다.\n· 되돌릴 수 없습니다 — 로컬 Rawdata 엑셀 백업을 먼저 확인하세요.')) return;
  try{ await api('orgchart/clear',{method:'POST'}); worklogVersion=0; applyState(null); render(); setTimeout(fitViewToFrame,40); refreshStorage(); toast('조직도 데이터를 모두 삭제했습니다'); }
  catch(e){ toast('삭제 실패: '+((e&&e.message)||'')); }
}
async function stClearAudit(){
  if(!confirm('변경 이력(작성자 기록)을 모두 삭제할까요?\n(조직도 데이터는 영향 없습니다.)')) return;
  try{ await api('audit/clear',{method:'POST'}); refreshStorage(); toast('변경 이력을 비웠습니다'); }
  catch(e){ toast('삭제 실패: '+((e&&e.message)||'')); }
}
async function stWipe(){
  if(!confirm('⚠️⚠️ 전체 초기화\n\n조직도 데이터·히스토리·변경이력·다른 로그인 계정을 모두 삭제합니다.\n(본인=관리자 계정 1개만 남습니다.)\n\n정말 진행할까요?')) return;
  const t=prompt('되돌릴 수 없습니다. 진행하려면 "삭제" 를 입력하세요.'); if(t!=='삭제'){ toast('취소되었습니다'); return; }
  try{ await api('wipe',{method:'POST'}); worklogVersion=0; applyState(null); render(); setTimeout(fitViewToFrame,40); refreshStorage(); toast('전체 초기화 완료(관리자 계정만 보존)'); }
  catch(e){ toast('초기화 실패: '+((e&&e.message)||'')); }
}
function openPw(){ $('#pwCur').value=''; $('#pwNew').value=''; $('#pwNew2').value=''; $('#pwMsg').textContent=''; $('#pwModal').classList.add('on'); setTimeout(()=>$('#pwCur').focus(),30); }
function closePw(){ $('#pwModal').classList.remove('on'); }
async function submitPw(){
  const cur=$('#pwCur').value, n1=$('#pwNew').value, n2=$('#pwNew2').value, msg=$('#pwMsg'); msg.style.color='#c0392b';
  if(n1.length<4){ msg.textContent='새 비밀번호는 4자 이상이어야 합니다.'; return; }
  if(n1!==n2){ msg.textContent='새 비밀번호가 일치하지 않습니다.'; return; }
  try{ await api('password',{method:'POST',body:JSON.stringify({current:cur,password:n1})}); msg.style.color='var(--brand,#15795e)'; msg.textContent='변경되었습니다.'; setTimeout(closePw,900); }
  catch(e){ msg.textContent=(e&&e.message)||'변경 실패'; }
}

/* =========================================================================
   초기화 / 이벤트
   ========================================================================= */
function init(){
  buildLabelToggles();
  buildStylePanel();
  syncPageControls();
  applyZoom();
  attachTitleDrag();
  rebuildDateSelect();

  // 드래그 중에는 폴링 일시정지(관리자 배치 편집 보호)
  document.addEventListener('pointerdown',()=>{ pollPaused=true; });
  document.addEventListener('pointerup',()=>{ setTimeout(()=>{ pollPaused=false; },800); });
  // 창 닫기 직전, 관리자 저장 대기분 flush(keepalive)
  window.addEventListener('beforeunload',()=>{ if(isAdmin() && saveT){ try{ fetch('/api/orgchart',{method:'PUT',credentials:'same-origin',keepalive:true,headers:{'Content-Type':'application/json'},body:JSON.stringify({state:{emp,ui,snapshots,snapDate},baseVersion:worklogVersion,detail:'조직도 저장(종료)'})}); }catch(_){} } });

  $('#btnUpload').onclick=connectRawdata;
  // 로그인 / 회원 / 날짜 스냅샷
  $('#lgBtn').onclick=attemptLogin;
  $('#lgId2').addEventListener('keydown',e=>{ if(e.key==='Enter') $('#lgPw2').focus(); });
  $('#lgPw2').addEventListener('keydown',e=>{ if(e.key==='Enter') attemptLogin(); });
  $('#btnUser').onclick=logout;
  $('#btnPasswd').onclick=openPw;
  $('#pwCancel').onclick=closePw;
  $('#pwOk').onclick=submitPw;
  $('#pwModal').addEventListener('click',e=>{ if(e.target.id==='pwModal') closePw(); });
  $('#btnStorage').onclick=openStorage;
  $('#stClose').onclick=closeStorage;
  $('#stModal').addEventListener('click',e=>{ if(e.target.id==='stModal') closeStorage(); });
  $('#stClearData').onclick=stClearData;
  $('#stClearAudit').onclick=stClearAudit;
  $('#stWipe').onclick=stWipe;
  $('#btnMembers').onclick=()=>setView(currentView==='members'?'chart':'members');
  $('#memBack').onclick=()=>setView('chart');
  $('#memAdd').onclick=memAdd;
  $('#memDown').onclick=memExport;
  $('#memUp').onclick=()=>$('#memFile').click();
  $('#memFile').onchange=e=>{ const f=e.target.files[0]; if(f) memImport(f); e.target.value=''; };
  $('#rawFiles').onchange=e=>{ handleRawFiles(e.target.files); e.target.value=''; };
  $('#snapDate').onchange=e=>{ loadSnapDate(e.target.value); };
  $('#btnRelayout').onclick=()=>{ if(!emp.length){toast('먼저 업로드하세요');return;} if(confirm('박스·집계표·라벨·제목·페이지 영역을 자동정렬로 되돌릴까요?')){ ui.pos={}; ui.sumPos={}; ui.sumColW={}; ui.labels.off={}; ui.pageFrame=null; ui.titlePos=null; ui.boxW={}; save(); render(); setTimeout(fitViewToFrame,40); toast('자동정렬 완료'); } };
  $('#btnLabels').onclick=()=>$('#labelPanel').classList.toggle('on');
  $('#btnStyle').onclick=()=>$('#stylePanel').classList.toggle('on');
  $('#btnAddNode').onclick=()=>openOrgAdd();
  $('#btnDelNode').onclick=()=>openDeleteOrg();
  $('#btnSample').onclick=()=>{ if(confirm('가상(샘플) 데이터로 새로 구성할까요? (현재 배치 초기화)')) loadSample(); };
  $('#btnXlsx').onclick=()=>exportXlsxData();
  $('#btnFull').onclick=()=>openFull();
  // 용지(A3/A4) 선택은 전체화면 안에서만 — 선택 시 미리보기 배율 자동 적용(무조건 가로)
  $('#fsPgSize').onchange=e=>{ ui.page.size=e.target.value; ui.page.orient='landscape'; ui.pageFrame=null; save(); syncPageControls(); render(); renderFsPreview(); };
  $('#zIn').onclick=()=>setZoom((ui.zoom||1)+.1);
  $('#zOut').onclick=()=>setZoom((ui.zoom||1)-.1);
  $('#title').addEventListener('input',e=>{ ui.title=e.target.value; $('#chartTitle').textContent=ui.title; $('#fsTitle').textContent=ui.title; save(); });
  // 모달
  $('#mdCancel').onclick=closeModal;
  $('#mdOk').onclick=()=>{ if(!modalOk||modalOk()!==false) closeModal(); };
  $('#modal').addEventListener('click',e=>{ if(e.target.id==='modal') closeModal(); });
  // 전체화면
  $('#fsClose').onclick=closeFull;
  $('#fsPdf').onclick=exportPdf;
  $('#fsImg').onclick=exportPng;
  $('#fsPrint').onclick=()=>printPage();
  $('#fsZIn').onclick=()=>{ fsZoom=Math.min(2,fsZoom+.1); fsApplyZoom(); };
  $('#fsZOut').onclick=()=>{ fsZoom=Math.max(.2,fsZoom-.1); fsApplyZoom(); };
  document.addEventListener('keydown',e=>{ if(e.key==='Escape'){ if($('#modal').classList.contains('on')) closeModal(); else if($('#fs').classList.contains('on')) closeFull(); } });
  let rz; window.addEventListener('resize',()=>{ clearTimeout(rz); rz=setTimeout(fitViewToFrame,120); });

  // 인증: 세션 쿠키 있으면 자동 입장(/api/me), 없으면 로그인 화면
  initAuth();
}
init();
</script>