/* ==========================================================================
   이지케어텍 조직도 — 톤앤매너: 블루 카드 UI
   조직도 유형 4종: diagram(다이어그램) / tree(트리) / card(카드) / compact(요약)
   라이트 · 다크
   ========================================================================== */
:root{
  --sans:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","맑은 고딕","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --display:var(--sans);
  --r:14px; --r2:10px; --r3:8px;
  --rail:3px;

  --paper:#F4F7F6; --sheet:#FFFFFF; --sunk:#F0F4F3;
  --ink:#14201E; --ink-2:#48524F; --muted:#78827F;
  --rule:#EBF0EF; --rule-2:#DFE7E5;
  --accent:#0B7F74; --accent-ink:#096A62; --on-accent:#FFFFFF;
  --accent-soft:#E6F5F2; --accent-soft2:#F3FAF8;
  --grad:linear-gradient(102deg,#0B7F74 0%,#16A697 100%);
  --shadow:0 1px 2px rgba(21,38,74,.05),0 10px 26px -14px rgba(21,38,74,.28);
  --shadow2:0 2px 6px rgba(21,38,74,.07),0 18px 40px -20px rgba(21,38,74,.32);
  --h1:#0B7F74; --h2:#5B5BD6; --h3:#2D7FB8; --h4:#7C5CE0;
  --h5:#2D8CF0; --h6:#5C7099; --h7:#0F8A6A; --h8:#C0741F;
}
:root[data-mode="dark"]{
  --paper:#0A100F; --sheet:#141A19; --sunk:#1A2220;
  --ink:#E9F0EE; --ink-2:#BCC7C4; --muted:#7E8A87;
  --rule:#202826; --rule-2:#313B39;
  --accent:#3FD0BE; --accent-ink:#6BDECF; --on-accent:#07120F;
  --accent-soft:#123029; --accent-soft2:#0F241F;
  --grad:linear-gradient(102deg,#0A5A52 0%,#118A7C 100%);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px -14px rgba(0,0,0,.7);
  --shadow2:0 2px 6px rgba(0,0,0,.5),0 18px 40px -20px rgba(0,0,0,.75);
  --h1:#3FD0BE; --h2:#9A9AEE; --h3:#63B4E8; --h4:#AC93F0;
  --h5:#6FB6F5; --h6:#94A6C4; --h7:#4FC2A0; --h8:#E0A45C;
}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]){
    --paper:#0A100F; --sheet:#141A19; --sunk:#1A2220;
    --ink:#E9F0EE; --ink-2:#BCC7C4; --muted:#7E8A87;
    --rule:#202826; --rule-2:#313B39;
    --accent:#3FD0BE; --accent-ink:#6BDECF; --on-accent:#07120F;
    --accent-soft:#123029; --accent-soft2:#0F241F;
    --grad:linear-gradient(102deg,#0A5A52 0%,#118A7C 100%);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px -14px rgba(0,0,0,.7);
    --shadow2:0 2px 6px rgba(0,0,0,.5),0 18px 40px -20px rgba(0,0,0,.75);
    --h1:#3FD0BE; --h2:#9A9AEE; --h3:#63B4E8; --h4:#AC93F0;
    --h5:#6FB6F5; --h6:#94A6C4; --h7:#4FC2A0; --h8:#E0A45C;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* ================= 헤더 (흰 바 · A안 2026-09-05) =================
   바에는 색을 쓰지 않는다. 색은 로고와 강조(숫자·선택된 항목)에만 둔다.
   그라디언트(--grad)는 흰 글자가 얹히는 곳에만 남는다 —
   히어로 · 대표이사 상자 · 서랍 머리 · 주요 버튼. */
header{position:sticky;top:0;z-index:30;background:var(--sheet);
  border-bottom:1px solid var(--rule-2);
  box-shadow:0 8px 18px -16px rgba(20,30,60,.5)}
.bar{max-width:1400px;margin:0 auto;padding:12px 26px;display:flex;gap:7px;align-items:center}
.mark{display:flex;flex-direction:column;line-height:1.2;flex:none;color:var(--ink);
  position:relative;padding-left:34px}
/* GA TEAM 심볼 — 자리를 옮길 때 이 규칙 하나만 고친다 */
.mark::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:27px;height:27px;border-radius:7px;background-size:cover;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAMT0lEQVR42t1bfVAU5xn/Pbt3e3fcwcGNZxGIoAYSBatFh0GTTIBJYmqDOo5cZtKmk6S1MU6bZGKd9I9O/MgfJqO1qc2gTtM2U5O04TqNTr6qdoRMozBWGIQEEaOCcoZwBOTguLu9j7d/4G529w7uA1SSZ4aB3XuXfX+/5/vZPcJEUlfHw+EIA4CwbRtvyrGsJkaV4GgVx3ELkaIIZhNulnAc3wEOH4PQgK976689vWNMi0UrNBn4nIPb0kaZZTPHcU9yHLdQMJsgen2YieAl0ZtNCHp94Di+g3juQGAg+ObApk2jE5GgJoCBhO3bOHHHjrD14O5qIu4VY7p54VRA30rwWiJuYLoQDoovXNuw8UNh2zZe3L49AiI2AQGMQMQyD+zZy+n456dzQ7eaAC0R4YD4u2s1G7dKGGW3kYHX1fEAkHlgj9NotTw/ncBvF3gACHp9CHp94A3Clrx//eVdEDHU1fFgjACABwAUF/NwOMKZc9L3Gq2Wp6bD5G+n1mNJJBgCbxSKLet/ZBlx/PQoiot5OJ2MUFfDw+EMWw/urjZlpB/5LoLXugRFWPWVdU98iLo6nsBA1te2Wfn0zMFvu78nHBPCDPpgIOtSzS88HAiMmSw/n8mbnjbwRiOCXh8EkwFBQXgGRIzwt93mTD93eirFzbdC80YjwBMQZuO/GS6EyP8DzupD1XcdvEp4kgqAQn3EUMkRo8qpbn6mg5e1r9yzIIBx9KAOHK2a6eXtlIArta4Vhh/qpvOGSiIzrRnyXcdCQSZ9dssJmwj8DdGl6v9KIKLXB8FswoqCefRQbgHKZ2Wj1GaXP28ZdNNFzxBO9PXigysXWSr3e2TuAtpashxXxkaw6exJ5h0aTtrsY7SChWR74/eRqYJfUTCPXlpSrgI9kVwa9WD3Z2eSIiJNp6fz65+Qj2u72rGrtYlZDEYaDfhZsuAFQYC6F5iCub9e+TAdrqxOCDwAzLdkYH95FfaW3U+J3mtJ9hzV8cM5+QAALXi90The6CQIHgB0qWheMvlDFaupYnZu1LqGfhc6rg+iZ2wE+WnpsAsG1BQUqdbUFBRhQUYWrf3P4biWUDErJ4rEFXlzqbH3CtMbjQj6/SmHCF0qZg8Ae8vujwJf29WOP55rlTWjDHy/bTlFz5Usw+aixfL6UpsdhypW0+MNH7HJzF95jZKUxt4r41Wd35+U2aumSKn6vFaj6+rfx46T9azie7m46thIVx0baf3CEpKuHQsF2a7WJrau/n01kNm5eKyomBI1f60biL5AXLOfdIyWSp5/aUl5FPjG7svMZsui/eVV8vn95VWwGIyqnTW7+6JIeHXpyqh1E5m/1g2Cfv+E2p0yAVrwkvaVAc/Z3YXG7stMMJvA0gxRpqw9l6bTU7O7j9V2tavWrclfMKmmkyFHafbST9IETFSwPJRboDp++/J5ea13aBjO7i5VTNDm67FQkAHAHz5rVp2/1x4NZpk9m+ZbMuTjF1tPoaHfpSJHbzZBFMWEfT6hIDhZtVY+K1tZ4KDZ3afS8AunP2FvXz5PkrkrwQiGbzYlBkS0DLrl9FlstamsZCwUZFqyj7h7mUGnk4PvfEsGlmfZqbH3CjNnWWUiknEJXTLgBbMJmYJBPr7oGZJTotbPtRlDGzRj+bQ5ywrv0LBsJUrzbxl0wzs0jDbdVzGzwU2JAbFSktIk3WIg7jUWgzEu+FiiNf+mgT4AQNvYMGsZdKssUpr8phIMOaV24zUqkmaSkdGAnynjwkTS0O+Cd2hYzgZa8z/m6pYnOhIZUi2xPMtOHr+PUiFBl2yHpvTb8lnZCV2rjAtRbnUjLrS7+1Xlrdb8lW61r+cc21y0mDRuwGBMvtNMqhQWb7AvEVBqs8t+G0+0cSEZ8/eERDxWVEwGnQ6BUAgGnS4qMOtTbLN1yWhfMJtwzNWtKmdfLlxKL5z+JKnObiwUZMvs2fTjeXepWmSpu9Oaf8XsXMTqObRucGbIzZJ1gaS7wWZ3nyoI1RQU4ZG5CyhZ8Icrq1FTUIT95VVYZs8mAAgQmDbVJioVs3Lgj4Qp5SCYjOw826Q63l9elRAJSvCx4kDQ78cyezYl2lpr3cDI8SxWUTRtMUBpBbVd7aoubX95FRbb7LSv51zMaY05y4pn8xdGdXbvu7ohFTLeoeGo6O84dRRt3mGVi92tM1FnyMdeLlwqp1jJDaS1oigmlBEo++8HIkhRau95kKo1G1bOAyS5w5yOWOtaBt2Q5gESAUceWCdbwKVRD+7/6F0WNgkEAEaOl4kIen1YkTeX6lauinn/TWdPsptmAZJsPnmcXV1aHqXVeEFL0vxzzf9Vgdea/7+v9QAAMowmFqvWPzPkZi2D7iiXqZidi7X2PHK6LsUNihymKLtam9gzTSegDIzx5MXWU9h88jgL+v2q9KXsFQCgYeDaNyl4At9+pbMl5vkj7t6ELGBKLhBrcluVnYcFGVnaqTCkqXD9yIAcI2Ll7leLy6imoAi1Xe3Yc+FsXA1Kvv5s/kJalGlDx/VB1PZfjowNe+imx4B4PYA0C9AGRcnkY42xgl7fN5+bTQkFsmlvh6dDRgN+hoBfRYh0XgIXS6S21pxlTbxAm8JE6KYREJMQKB5XxTHpWyU3nQBJ89rRmNZsJdCiKN5SEnS3SvNKdwCAsEkgZV6P5fPxJjypTICmlQBzlhVr7XlyFMtPS0fP2Mh4B+f3o35kgDnmFESVyIFQCEfcvUzStCiKeHLREmpzf4W2sWEmnVueZScAiNXkiKKIn+QXUadnCKk0QdNCwIEl99BkBU+sIkUmq6uddrU2Mami21lShpZBNzY0HpW1KlV5jlNHVZ2eBH5nSRka+l146n/1t8cCXvu8BSf6XQiEQnh0biFKbXbUdrWjZ2wEHr8fi212lNrsaOh34eNrPchPS0efOP60qO7Lbia91rr5zhJVPf/p132q6q9u5SrcfbxOBr88y047S8pufwxodvexZnefNNamUthxzNUtDz8yjOMB8ES/C+90fa5+kGk2wR8JU5k9W1U2P55/Fz79ui/qXu8sq6QNjUeZ0jJmRBDUPqJWlrP5aenj7XNJGZ4ouFuOBW92d+Ktni7G+0T20F3jMaKh34WK2bmozi3A1o7TKrIujXpQarPj14VLaFGmTT4335KBDN0UAqDJyLhpi/JxZL4lQ/7JFkxyxSc1UkoreDZ/ISnT5G/aGsebr6LFqJidi5ZBt3xuKuBvehqU/L22qx37es7JRHn8PuIBKDOEpFEJ6L6ec/L/OTPkZi+2nqJXl64EADzWXM++b7aSNC9MFfy0EJDM83lp0zBb0eYdxrqceXJ3KLWu7yyrpFKbHY45BSSRIggCnK5LzKDTUadnaDz/m6emefmY4/iOSCS8KFUCDAwUBFi6Xh/1WbZgkjWqHGPfmAfIKVICL4oi3r1yAaU2O9blzINyMiwIAt7q6Ypyt2RigBY8Ec7rktWiVliagSHgR+0Xn6Hj+iDavMNMivDHXN24w5we87pDPedx1TuCdsUcQRAEHHH3svyuduoZG8Hha5eRLZjk0lhZ7LR5h9mh3i/owvXBlMDLJOQ4/7SbNwhbgim+Kyi1tNL1ysdUHr+PeJ/IlOWv9LeR45k/EiYjx8es8hLp9hIthScCD4726kBoCHp9W1IFriyLlZsSRXG8mFE/rVFtRNAcJ9veJrJuQvAACHSKY0KknuP4Dv0UX2CUuriZJJOCJ5znRsLHuS/XPD1GPHcgKe0n8CrarezpkwWvy8zgGMe90bF6/SgHxigwEHwz6PXFfb4mv4c3w2Uy8AAQuu6JGCzGg2CMODid3MCmTaOcnq/Gd0DigQcA4rgNbUtXeWucTm7cjqUvSk6SEeJp/nabfCLgdZkZXMgzsuf8feu2SpjHCWCM4HRyqKmJ5L3313+Qjq9RkpDqS4gzDXx4ZPSDznvWrJGwguhGM0TE4HCEhe3bud71Tz0KYJ/ebErI378N4AEg5BnZ03nv2mph+3YODkdY+vJk9DdHbxCS+88//5LT634lGITCydLbTIn2IZ+four8zAwudN0TIY7b0Hnf2veU+ORaSJMcGYgYGCPXhp+9rg/4y0IBcSsYLijT20xIc1FdXYw6PzQyuoX3MmvnfWvfQ10dL+NTFUMTieLb1nd+9AeDKFofYBw9yOt0i8PBUB4IhbeThFiAwXEXGWOdxHMfhK5fbvpi9XMBLRat/B9alp6hOR7/iwAAAABJRU5ErkJggg==")}
.mark .k{font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);font-weight:700}
.mark .n{font-size:17px;font-weight:800;letter-spacing:-.02em}
/* .find 는 .tools 밖에 있다 — 좁은 화면에서 로고 옆(첫 줄)으로 올리기 위해서다.
   넓은 화면에서는 .find 가 auto 여백으로 밀려 예전과 같은 자리(유형 버튼 왼쪽)에 선다. */
.tools{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.seg{display:flex;background:var(--sunk);border-radius:999px;padding:3px;gap:2px}
.seg button{padding:5px 13px;font-size:12px;color:var(--ink-2);border-radius:999px;font-weight:600;
  transition:background .15s,color .15s;white-space:nowrap}
.seg button:hover{background:var(--rule)}
.seg button[aria-pressed="true"]{background:var(--sheet);color:var(--accent);
  box-shadow:0 1px 2px rgba(20,30,60,.12)}
.tb{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;color:var(--ink-2);
  background:var(--sunk);transition:background .15s,color .15s}
.tb:hover{background:var(--rule);color:var(--ink)}
.tb[aria-pressed="false"]{background:transparent;color:var(--muted)}
/* 주요 동작 하나만 색을 채운다 */
.tb.pri{background:var(--accent);color:var(--on-accent)}
.tb.pri:hover{background:var(--accent-ink);color:var(--on-accent)}
.find{position:relative;margin-left:auto;flex:none}
.find input{width:196px;padding:6px 12px 6px 29px;border:0;border-radius:999px;
  background:var(--sunk);color:var(--ink);font-size:12.5px;font-family:var(--sans);
  box-shadow:inset 0 0 0 1px var(--rule-2)}
.find input::placeholder{color:var(--muted)}
.find input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.find svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:13px;height:13px;
  stroke:var(--muted);fill:none;stroke-width:2}

/* ----- 검색 자동완성 목록 ----- */
.ac{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:330px;max-width:78vw;
  max-height:352px;overflow-y:auto;padding:5px;
  background:var(--sheet);border:1px solid var(--rule-2);border-radius:var(--r2);
  box-shadow:var(--shadow2);text-align:left}
.ac[hidden]{display:none}
.aci{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r3);cursor:pointer}
.aci.on,.aci:hover{background:var(--accent-soft)}
.aci .ic{flex:0 0 auto;font-size:10px;font-weight:800;line-height:1;padding:4px 6px;border-radius:999px;
  background:var(--sunk);color:var(--muted)}
.aci .ic.p{background:var(--accent-soft);color:var(--accent-ink)}
.aci .tx{min-width:0;display:flex;flex-direction:column;gap:1px}
.aci .tx b{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aci .tx i{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aci mark{background:transparent;color:var(--accent-ink);font-weight:800;padding:0;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px;
  text-decoration-color:var(--accent)}

/* ----- 검색 결과로 이동했을 때의 강조 ----- */
@keyframes ocflash{
  0%{box-shadow:0 0 0 0 var(--accent)}
  35%{box-shadow:0 0 0 5px var(--accent-soft)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
.flash{animation:ocflash 1.9s ease-out 1;border-color:var(--accent)!important}

/* ----- 좌석(배치도) 연동 ----- */
.mrow .ct .seatv{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:600;color:var(--ink)}
.seatb{font-size:10.5px;font-weight:700;line-height:1.7;padding:1px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap;transition:background .15s,color .15s}
.seatb:hover{background:var(--accent);color:var(--on-accent)}
.seatpanel{margin:2px 0 8px;padding:11px 12px 12px;border-radius:var(--r2);
  background:var(--sunk);border:1px solid var(--rule-2)}
.seatpanel + .mrow{border-top:1px solid var(--rule)}
.seatpanel .sh{font-size:11.5px;color:var(--ink-2);margin-bottom:8px}
.seatpanel .sh b{color:var(--accent-ink);font-weight:800}
.seatpanel .sh i{font-style:normal;color:var(--muted)}
.seatpanel .sh .sno{font-weight:800;color:var(--accent-ink);background:var(--accent-soft);
  border-radius:5px;padding:0 6px;margin-left:2px;letter-spacing:.02em}
.smap{display:block;width:100%;height:auto;max-height:220px;background:var(--sheet);
  border-radius:var(--r3);border:1px solid var(--rule)}
.smap .rm{fill:var(--rule);stroke:var(--rule-2);stroke-width:.8}
.smap .st{fill:var(--sheet);stroke:var(--rule-2);stroke-width:.7}
.smap .st.o{fill:var(--rule-2);stroke:none}
.smap .st.hit{fill:var(--accent);stroke:var(--accent-ink);stroke-width:1.2}
.smap .pin{fill:none;stroke:var(--accent);stroke-width:1.8;opacity:.5}
/* 큰 도면(팝업) — 배치도 화면과 같은 그림: 방 이름 · 팀 배지 · 좌석 이름 */
.smap .snm{fill:#1B2437;text-anchor:middle;font-weight:600;paint-order:stroke;
  stroke:rgba(255,255,255,.75);stroke-width:.4;pointer-events:none}
.smap .snm.me{fill:#FFFFFF;stroke:none}
.smap .rml{fill:var(--muted);text-anchor:middle;font-weight:700;letter-spacing:-.01em}
.smap .pil{fill:var(--accent-ink);text-anchor:middle;font-weight:800}
.smap .mel{fill:var(--accent-ink);text-anchor:middle;font-weight:800;paint-order:stroke;
  stroke:var(--sheet);stroke-width:2}
.seatpanel .sgo{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:700;
  color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:999px;padding:3px 12px;cursor:pointer}
.seatpanel .sgo:hover{background:var(--accent);color:var(--on-accent)}
.seatpanel .shint{margin-top:6px;font-size:10.5px;color:var(--muted);line-height:1.5}

/* 배치도 팝업 — 그 층 도면을 크게 띄우고 본인 좌석을 강조한다 */
#smw{position:fixed;inset:0;z-index:96;display:none;align-items:center;justify-content:center;
  background:rgba(12,18,32,.55);backdrop-filter:blur(2px);padding:24px}
#smw.on{display:flex}
#smw .card{position:relative;background:var(--sheet);border-radius:var(--r);box-shadow:var(--shadow2);
  padding:18px 18px 14px;width:min(1100px,96vw);max-height:92vh;overflow:auto}
#smw .x{position:absolute;top:8px;right:10px;width:30px;height:30px;border:0;background:transparent;
  font-size:22px;line-height:1;color:var(--muted);cursor:pointer;border-radius:8px}
#smw .x:hover{background:var(--sunk);color:var(--ink)}
#smh .t{font-size:16px;font-weight:800;color:var(--ink)}
#smh .p{font-size:12.5px;color:var(--ink-2);margin-top:2px}
#smh .p b{color:var(--ink)}
#smh .p .d{color:var(--muted)}
#smh .p .sid{margin-left:6px;font-size:11px;font-weight:700;color:var(--accent-ink);
  background:var(--accent-soft);border-radius:999px;padding:1px 8px}
#smb{margin-top:12px}
#smb .smap{max-height:min(74vh,760px)}
.zw{display:none;gap:5px;align-items:center}
/* 기능 묶음 — 배율 / 보기 / 내보내기를 얇은 구분선으로 나눈다 */
.tgrp{display:flex;gap:6px;align-items:center}
.zw,.tgrp{position:relative;padding-left:10px}
.zw::before,.tgrp::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:17px;background:var(--rule-2)}
.tb.ic{padding:6px 10px;font-size:13px;line-height:1;min-width:32px;
  display:inline-flex;align-items:center;justify-content:center}
/* 아이콘 + 글자 버튼(내려받기) · 아이콘만 있는 버튼(인쇄) */
.tb.ico{display:inline-flex;align-items:center;gap:5px}
.tb svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tb.ic svg{width:15px;height:15px}
body[data-layout="diagram"] .zw{display:flex}

/* ================= 본문 공통 ================= */
main{max-width:1400px;margin:0 auto;padding:0 26px 60px}
#document,#tree,#compact,#diagram{display:none}
body[data-layout="card"] #document{display:block}

body[data-layout="compact"] #compact{display:block}
body[data-layout="diagram"] #diagram{display:block}
body[data-layout="diagram"] main{max-width:none;padding:0}
body[data-layout="diagram"] .masthead{display:none}

/* 히어로 */
.masthead{margin:22px 0 20px;padding:26px 28px;border-radius:18px;background:var(--grad);color:#fff;
  box-shadow:var(--shadow2);position:relative;overflow:hidden}
.masthead::after{content:"";position:absolute;right:-70px;top:-90px;width:280px;height:280px;border-radius:50%;
  background:rgba(255,255,255,.08)}
.eyebrow{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;font-weight:700}
.masthead h1{margin:9px 0 0;font-size:clamp(24px,3.2vw,33px);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.mrow{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin-top:20px;position:relative;z-index:1}
.fig{background:rgba(255,255,255,.16);border-radius:12px;padding:10px 16px;display:flex;flex-direction:column;gap:2px;min-width:96px}
.fig .v{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.fig .l{font-size:11px;opacity:.86;font-weight:600}
.ceo{margin-left:auto;background:rgba(255,255,255,.94);color:var(--accent-ink);border-radius:12px;
  padding:10px 18px;text-align:right;display:flex;flex-direction:column;justify-content:center}
.ceo .r{font-size:10.5px;letter-spacing:.1em;font-weight:700;opacity:.7}
.ceo .cn{font-size:19px;font-weight:800;margin-top:2px;letter-spacing:-.02em}

/* ================= 유형 1 · 카드 ================= */
.sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(390px,1fr));gap:16px;align-items:start}
@media (max-width:860px){ .sheets{grid-template-columns:1fr} }
.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);
  overflow:hidden;transition:box-shadow .18s,transform .18s}
.sheet:hover{box-shadow:var(--shadow2)}
.shead{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:13px;align-items:center;
  padding:16px 18px;cursor:pointer;border-bottom:1px solid var(--rule)}
.shead::before{content:attr(data-ic);grid-column:1;grid-row:1/span 3;align-self:start;
  width:44px;height:44px;border-radius:12px;
  background:color-mix(in srgb,var(--hue,var(--accent)) 13%,transparent);color:var(--hue,var(--accent));
  display:grid;place-items:center;font-size:17px;font-weight:800}
.shead .idx{grid-column:2;grid-row:1;font-size:10.5px;letter-spacing:.1em;color:var(--muted);font-weight:700}
.shead h2{grid-column:2;grid-row:2;margin:2px 0 0;font-size:17px;font-weight:800;letter-spacing:-.025em;line-height:1.25;word-break:keep-all}
.shead .cnt{grid-column:3;grid-row:1/span 2;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;
  padding:4px 11px;font-size:11.5px;font-weight:700;white-space:nowrap}
.shead .cnt b{font-weight:800;font-variant-numeric:tabular-nums}
.shead .cnt i{font-style:normal;font-weight:600}
.shead .lead{grid-column:2/span 2;grid-row:3;display:flex;align-items:center;gap:7px;margin-top:6px;font-size:12.5px;color:var(--ink-2)}
.shead .lead b{font-weight:700;color:var(--ink)}
.shead .lead span{color:var(--muted)}
.shead:hover h2{color:var(--hue,var(--accent))}

.sbody{padding:12px 18px 16px}
.grp{margin-bottom:12px}
.grp:last-child{margin-bottom:0}
.ghead{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r3);
  background:var(--sunk);cursor:pointer}
.ghead .t{font-size:13px;font-weight:700;letter-spacing:-.01em;word-break:keep-all}
.ghead .p{font-size:11.5px;color:var(--muted)}
.ghead .n{margin-left:auto;font-size:11.5px;color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}
.ghead:hover .t{color:var(--accent)}
.glabel{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;
  margin-bottom:7px}
.rows{display:grid;grid-template-columns:1fr;gap:1px;margin-top:6px}
.row{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:var(--r3);font-size:12.5px;
  cursor:pointer;transition:background .13s}
.row:hover{background:var(--accent-soft2)}
.row .t{word-break:keep-all;color:var(--ink);font-weight:600;flex:0 1 auto;min-width:0}
.row .dots{flex:1;min-width:10px;border-bottom:1px dotted var(--rule-2)}
.row .n{font-size:11px;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:1px 7px;
  font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .l{font-size:11.5px;color:var(--muted);min-width:50px;text-align:right;white-space:nowrap}
.row.hit{background:var(--accent-soft)}
.row.hit .t{font-weight:800}

/* 단일 부서 */
.sheets > .solo{grid-column:1/-1}
.solo{margin-top:2px}
.solo > .glabel{margin-bottom:10px}
.solo .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.solo .unit{background:var(--sheet);border:1px solid var(--rule);border-left:var(--rail) solid var(--hue,var(--accent));
  border-radius:var(--r2);padding:13px 15px;box-shadow:var(--shadow);cursor:pointer;transition:box-shadow .16s}
.solo .unit:hover{box-shadow:var(--shadow2)}
.solo .unit .t{font-size:14px;font-weight:800;letter-spacing:-.015em;word-break:keep-all}
.solo .unit .p{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:6px}
.solo .unit .p b{color:var(--ink-2);font-weight:700}
.solo .unit .v{font-size:16px;font-weight:800;margin-top:6px;color:var(--hue,var(--accent));font-variant-numeric:tabular-nums}
.solo .unit .v i{font-style:normal;font-size:10.5px;color:var(--muted);margin-left:3px;font-weight:600}

/* ================= 유형 2 · 트리 ================= */
#tree{padding-bottom:10px;display:none;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:14px;align-items:start}
body[data-layout="tree"] #tree{display:grid}
.tcard{margin:0;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);
  padding:14px 18px 18px}
.tcard > .tt{display:flex;align-items:center;gap:10px;padding-bottom:11px;margin-bottom:6px;border-bottom:1px solid var(--rule)}
.tcard > .tt .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:13px;font-weight:800;
  background:color-mix(in srgb,var(--hue,var(--accent)) 13%,transparent);color:var(--hue,var(--accent))}
.tcard > .tt h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em}
.tcard > .tt .who{font-size:12px;color:var(--muted)}
.tcard > .tt .cnt{margin-left:auto;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;
  padding:3px 10px;font-size:11.5px;font-weight:700}
.tl,.tl li{list-style:none}
.tl{margin:0;padding:0}
.tl .tl{margin-left:15px;padding-left:16px;position:relative}
.tl .tl::before{content:"";position:absolute;left:0;top:0;bottom:var(--stub,16px);width:1px;background:var(--rule-2)}
.tn{position:relative;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r3);
  cursor:pointer;transition:background .13s}
.tn:hover{background:var(--accent-soft2)}
.tl .tl > li > .tn::before{content:"";position:absolute;left:-16px;top:50%;width:13px;height:1px;background:var(--rule-2)}
.tn .dot{width:7px;height:7px;border-radius:50%;background:var(--hue,var(--accent));flex:none;opacity:.55}
.tn.lv0 .dot{width:9px;height:9px;opacity:1}
.tn .t{font-weight:700;font-size:13.5px;word-break:keep-all}
.tn.lv0 .t{font-size:14.5px;font-weight:800}
.tn .who{font-size:11.5px;color:var(--muted)}
.tn .who b{color:var(--ink-2);font-weight:700}
.tn .dots{flex:1;min-width:12px;border-bottom:1px dotted var(--rule-2);margin:0 2px;transform:translateY(-2px)}
.tn .n{font-size:11px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);
  border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums}
.tn.hit{background:var(--accent-soft)}
.tn .av{width:24px;height:24px;margin:0;flex:none}

/* ================= 유형 3 · 요약 ================= */
#compact{padding-bottom:10px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.ccard{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);
  padding:16px 18px;cursor:pointer;transition:box-shadow .18s,transform .18s}
.ccard:hover{box-shadow:var(--shadow2);transform:translateY(-1px)}
.ccard .ch{display:flex;align-items:flex-start;gap:12px}
.ccard .ic{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;font-size:16px;font-weight:800;
  background:color-mix(in srgb,var(--hue,var(--accent)) 13%,transparent);color:var(--hue,var(--accent))}
.ccard .tt{flex:1;min-width:0}
.ccard .tt .nm2{font-size:15.5px;font-weight:800;letter-spacing:-.02em;word-break:keep-all}
.ccard .tt .who{font-size:11.5px;color:var(--muted);margin-top:2px}
.ccard .tt .who b{color:var(--ink-2);font-weight:700}
.ccard .cnt{flex:none;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:3px 10px;
  font-size:11px;font-weight:700;white-space:nowrap}
.ccard .cl{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.75;word-break:keep-all}
.ccard .cl b{color:var(--ink-2);font-weight:600}
.ccard.hit{border-color:var(--accent)}

/* 공통 상태 */
.dim{opacity:.3}
mark{background:var(--accent-soft);color:var(--accent-ink);font-weight:800;border-radius:3px;padding:0 2px}

footer{max-width:1400px;margin:0 auto;padding:6px 26px 34px;font-size:11.5px;color:var(--muted);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
/* 아래쪽은 한 줄 — 왼쪽 데이터 기준 · 가운데 저작권 · 오른쪽 계정 (좁은 화면에서만 접힌다) */
.copy{order:2;width:auto;text-align:center;padding-top:0;margin:0 auto;border-top:0;
  font-size:11px;color:var(--muted);letter-spacing:.02em;white-space:nowrap}
footer #foot{order:1}
footer .who{order:3;margin-left:auto}
@media (max-width:900px){
  footer{justify-content:center;text-align:center}
  .copy{order:3;width:100%;margin-top:4px}
  footer .who{order:2;margin-left:0}
}

/* ================= 유형 4 · 다이어그램 ================= */
/* --hh 는 chart.js 가 실제 헤더 높이로 채운다 (헤더 줄 수가 화면 폭에 따라 달라진다) */
#dwrap{overflow:auto;height:calc(100vh - var(--hh,53px));cursor:grab;background:var(--paper)}
#dwrap.drag{cursor:grabbing}
#dcanvas{transform-origin:0 0;padding:36px 40px 60px;display:inline-block;min-width:100%}
.dn{display:flex;flex-direction:column;align-items:center}
.dbox{position:relative;background:var(--sheet);border:1px solid var(--rule-2);border-radius:var(--r2);
  padding:9px 15px;min-width:140px;text-align:center;line-height:1.32;box-shadow:var(--shadow);
  transition:box-shadow .16s,border-color .16s}
.dbox .t{font-weight:800;font-size:12.5px;letter-spacing:-.015em;word-break:keep-all;color:var(--ink)}
.dbox .p{font-size:11px;color:var(--ink-2);margin-top:2px;white-space:nowrap}
.dbox .p em{font-style:normal;color:var(--muted)}
.av{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 6px;
  border:2px solid var(--sheet);box-shadow:0 0 0 1px var(--rule-2);background:var(--sunk)}
.av.sm{width:26px;height:26px;margin:0;flex:none}
.dstack .av{width:24px;height:24px;margin:0}
.dbox .c{position:absolute;top:-8px;right:-8px;font-size:9.5px;font-weight:700;
  background:var(--hue,var(--accent));color:#fff;border-radius:999px;padding:1.5px 7px;
  box-shadow:0 2px 6px -2px rgba(21,38,74,.5)}
.dbox.l0{background:var(--grad);border-color:transparent;padding:13px 30px;min-width:210px;border-radius:13px}
.dbox.l0 .t{color:#fff;font-size:16px}
.dbox.l0 .p{color:#fff;opacity:.82}
/* 최상단 상자 윗줄 회사명 — 아랫줄(대표이사)보다 작게 */
.dbox .co{font-weight:700;font-size:12.5px;letter-spacing:-.015em;word-break:keep-all;color:var(--ink-2)}
.dbox .co.solo{font-weight:600;font-size:10.5px;color:var(--muted)}
.dbox.l0 .co{color:#fff;font-size:13px;opacity:.88;margin-bottom:1px}
.dbox.l0 .p em{color:#fff;opacity:.7}
.dbox.l0 .c{background:#fff;color:#096A62;box-shadow:0 2px 6px -2px rgba(10,40,36,.45)}  /* 배경이 항상 흰색이라 다크에서도 같은 잉크색 */
.dbox.l0 .av{border-color:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.dbox.l1{border-top:3px solid var(--hue,var(--accent));padding-top:9px;min-width:158px}
.dbox.l1 .t{font-size:13.5px}
.dbox.l2{background:var(--sunk)}
.dbox.l2 .t{font-size:12px}
/* 가로줄(버스) 위의 단위는 계층이 같으므로 상자도 같게 그린다 — 본부·연구소·사업총괄이
   경영전략본부와 같은 모양이 된다(지침 4절 14: 크기가 계층을 말한다).
   하위 없는 팀(.tm)은 팀 상자 그대로 둔다. 스택 안의 l2(경영전략본부의 팀들)도 건드리지 않는다. */
.dbus > .dn > .dbox.l2:not(.tm){background:var(--sheet);padding-top:9px;min-width:158px;
  border-top:3px solid var(--hue,var(--accent))}
.dbus > .dn > .dbox.l2:not(.tm) .t{font-size:13.5px}
.dbox.l3{padding:6px 12px;min-width:0}
.dbox.l3 .t{font-size:11.5px;font-weight:700}
.dbox.l3 .p{font-size:10.5px}
.dbox.spine{border:1px solid var(--accent);min-width:180px;background:var(--accent-soft2)}
.dbox.spine .t{font-size:14px;color:var(--accent-ink)}
.dstem{width:1px;background:var(--rule-2);flex:none}
.dbus{display:flex;align-items:flex-start;gap:26px;position:relative;padding-top:20px}
.dbus::before{content:"";position:absolute;top:0;height:1px;background:var(--rule-2);left:var(--l,25%);right:var(--r,25%)}
.dbus > .dn{position:relative}
.dbus > .dn::before{content:"";position:absolute;top:-20px;left:50%;width:1px;height:20px;background:var(--rule-2)}
/* 가로줄에 서지만 팀인 상자 — 스택의 팀 상자와 같은 크기·정렬로 그린다 */
.dbox.tm{min-width:164px;padding:7px 12px;text-align:left;background:var(--sheet);
  display:flex;align-items:flex-start;gap:8px}
.dbox.tm > .av{order:1;flex:none;width:24px;height:24px;margin:0;margin-top:1px}
.dbox.tm > .bd{order:2;flex:1 1 auto;min-width:0}
.dbox.tm > .c{order:3;flex:none;position:static;margin:0;background:none;color:var(--muted);
  padding:0;font-size:10.5px;box-shadow:none;line-height:1.5}
.dbox.tm .t{font-size:12px}
.dbox.tm .p{font-size:10.5px;white-space:normal}
.dstack{--gap:14px;--drop:8px;
  position:relative;margin-top:var(--gap);padding-left:18px;display:flex;flex-direction:column;gap:7px;align-self:stretch}
/* 세로 레일 */
.dstack::before{content:"";position:absolute;left:0;top:calc(-1 * (var(--gap) - var(--drop)));
  height:var(--rail-h,calc(100% - var(--gap)));width:1px;background:var(--rule-2)}
/* 상위 상자 밑 중앙 → 레일까지 꺾임선 (오른쪽 세로 + 아래쪽 가로) */
.dstack::after{content:"";position:absolute;left:0;top:calc(-1 * var(--gap));
  width:var(--stem-x,0);height:var(--drop);pointer-events:none;
  border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.dstack[style*="--stem-x:0"]::after,.dstack:not([style*="--stem-x"])::after{display:none}
.dstack > .si{position:relative}
.dstack > .si::before{content:"";position:absolute;left:-18px;top:50%;width:18px;height:1px;background:var(--rule-2)}
/* 소속이 다른 단위(대표이사 직속 등) — 앞의 부서들과 여백으로 띄우고 연결선을 점선으로 */
.dstack > .si.xsep{margin-top:24px}
.dstack > .si.xsep::before{background:none;height:0;border-top:1px dashed var(--rule-2)}
/* 2열은 진짜 두 개의 스택으로 나눈다 — 각 열이 자기 레일을 갖는다 */
.dcols{display:flex;align-items:flex-start;gap:20px;align-self:stretch}
.dcols > .dstack{flex:1 1 0;min-width:0;align-self:auto}
/* 상위 상자가 레일보다 왼쪽에 있을 때(오른쪽 열) 꺾임선을 좌우 반전 */
.dstack.rev::after{left:calc(-1 * var(--stem-x));border-right:0;border-left:1px solid var(--rule-2)}
/* 이름이 두 줄이 돼도 부서장 줄이 이름과 같은 왼쪽 기준선에서 시작하도록 flex 로 잡는다
   (float 로 두면 아바타 높이를 넘어간 줄만 왼쪽 끝으로 튀어나갔다) */
.dstack .dbox{width:100%;text-align:left;min-width:164px;
  display:flex;align-items:flex-start;gap:8px}
.dstack .dbox > .av{order:1;flex:none;align-self:flex-start;margin-top:1px}
.dstack .dbox > .bd{order:2;flex:1 1 auto;min-width:0}
.dstack .dbox > .c{order:3;flex:none;position:static;float:none;margin:0;background:none;color:var(--muted);
  padding:0;font-size:10.5px;box-shadow:none;line-height:1.5}
.dstack .dbox .p{white-space:normal}
.si.grp > .dstack{--gap:9px;--drop:5px;margin-top:var(--gap);padding-left:14px}
.si.grp > .dstack > .si::before{left:-14px;width:14px}

/* ================= 상호작용 ================= */
.av{cursor:zoom-in}
body.nophoto .av{display:none!important}
.dbox{cursor:pointer}
.dbox:hover{border-color:var(--hue,var(--accent));box-shadow:var(--shadow2)}
.nm{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}

#lb{position:fixed;inset:0;z-index:95;background:rgba(12,18,32,.72);backdrop-filter:blur(3px);
  display:none;place-items:center;padding:24px}
#lb.on{display:grid}
#lb .card{background:var(--sheet);border-radius:18px;padding:22px;text-align:center;max-width:380px;box-shadow:var(--shadow2)}
#lb .card .c{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;text-align:left;
  margin-top:12px;font-size:12px;line-height:1.7}
#lb .card .c > span{color:var(--muted);white-space:nowrap}
#lb .card .c a{color:var(--accent-ink);word-break:break-all}
#lb .card .c .none{grid-column:1 / -1;color:var(--muted)}
#lb .ini.big{width:min(288px,72vw);height:min(288px,72vw);border-radius:16px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);font-weight:800;font-size:96px;margin:0 auto}
#lb img{width:min(288px,72vw);height:min(288px,72vw);object-fit:cover;border-radius:16px;
  background:var(--sunk);display:block;border:0;box-shadow:none;margin:0 auto}
#lb .n{font-size:20px;font-weight:800;margin-top:15px;letter-spacing:-.02em}
#lb .p{font-size:12.5px;color:var(--muted);margin-top:3px}
#lb .c{font-size:12px;color:var(--ink-2);margin-top:14px;line-height:1.95;border-top:1px solid var(--rule);
  padding-top:13px;text-align:left}
#lb .c a{color:var(--accent-ink)}
#lb .c span{color:var(--muted);display:inline-block;min-width:50px}

#dr{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:90;background:var(--sheet);
  transform:translateX(101%);transition:transform .22s ease;display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -30px rgba(12,24,60,.6)}
#dr.on{transform:none}
#drh{padding:18px 22px 16px;background:var(--grad);color:#fff;position:relative}
#drh .path{font-size:10.5px;letter-spacing:.08em;opacity:.85;font-weight:600}
#drh h3{margin:6px 0 0;font-size:21px;font-weight:800;letter-spacing:-.025em}
#drh .sub{margin-top:5px;font-size:12.5px;opacity:.9}
#drh .x{position:absolute;top:14px;right:14px;font-size:19px;color:#fff;line-height:1;padding:2px 8px;
  border-radius:999px;background:rgba(255,255,255,.18)}
#drh .x:hover{background:rgba(255,255,255,.32)}
#drsub{padding:12px 20px;display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--rule);background:var(--sunk)}
#drsub button{border-radius:999px;padding:4px 11px;font-size:12px;color:var(--accent-ink);background:var(--accent-soft);font-weight:600}
#drsub button:hover{background:var(--accent);color:#fff}
#drl{overflow:auto;padding:8px 12px 26px;flex:1}
.mrow{border-radius:var(--r3);padding:10px 10px;display:flex;gap:11px;align-items:flex-start}
.mrow:hover{background:var(--accent-soft2)}
.mrow.hit{background:var(--accent-soft)}
.mrow .avw,.mrow .av,.mrow .ph0{cursor:zoom-in}
.mrow + .mrow{border-top:1px solid var(--rule)}
.mrow .av{width:36px;height:36px;flex:none;margin:1px 0 0}
.mrow .ph0{width:36px;height:36px;flex:none;border-radius:50%;background:var(--accent-soft);
  display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--accent-ink);margin-top:1px}
body.nophoto .mrow .ph0{display:none}
.mrow .bd{flex:1;min-width:0}
.mrow .l1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mrow .l1 b{font-size:14px;font-weight:800}
.mrow .l1 .po{font-size:11.5px;color:var(--muted)}
.mrow .l1 .tag{font-size:10px;font-weight:700;background:var(--accent);color:#fff;border-radius:999px;padding:1px 7px}
.mrow .l1 .tag.alt{background:transparent;color:var(--muted);border:1px solid var(--rule);font-weight:600}
.mrow.dupm .l1 b{font-weight:700}
.mrow.dupm{opacity:.86}
.mrow .ct{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 10px;align-items:baseline;
  margin-top:5px;font-size:11.5px;color:var(--ink-2);line-height:1.65}
.mrow .ct > span{color:var(--muted);white-space:nowrap;font-size:11px}
.mrow .ct > b{font-weight:600;color:var(--ink)}
.mrow .ct a{color:var(--accent-ink);text-decoration:none;word-break:break-all}
.mrow .ct a:hover{text-decoration:underline}
.mrow .ct .none{grid-column:1 / -1;color:var(--muted)}
.mrow .ct a{color:var(--accent-ink)}
.mrow .ct span{color:var(--muted);display:inline-block;min-width:48px}
.drempty{padding:34px 16px;text-align:center;color:var(--muted);font-size:13px}
#ptitle{display:none}
#scrim{position:fixed;inset:0;z-index:88;background:rgba(12,20,38,.3);display:none}
#scrim.on{display:block}


/* ---------- 유형 · 엑셀 ----------
   원본 엑셀의 열폭·행높이를 픽셀로 환산해 절대 좌표로 찍는다.
   .sNN 은 원본 styles.xml 의 서식 번호 그대로다 — 내려받는 .xlsx 와 같은 화면. */
#excel{display:none}
body[data-layout="excel"] #excel{display:block;padding:10px 0 24px}
body[data-layout="excel"] .masthead{display:none}
body[data-layout="excel"] main{max-width:none;padding:0 12px}
.xpage{position:relative;width:100%;margin:0 auto;padding:10px;background:#fff;
  border:1px solid var(--rule-2);border-radius:var(--r3);box-shadow:var(--shadow);
  overflow:hidden;height:calc(100vh - 178px);min-height:420px}
.xsheet{position:relative;transform-origin:top left}
.xerr{padding:24px;color:var(--muted);font-size:13px}
.xlogo{position:absolute;object-fit:contain}
.xc{position:absolute;box-sizing:border-box;overflow:hidden;color:#000;line-height:1.18;
  white-space:pre-line;word-break:keep-all;display:flex;align-items:center;
  justify-content:center;text-align:center;font-size:10pt}
.xc.box{cursor:default}
.xc[data-n]{cursor:pointer}
.xc[data-n]:hover{outline:2px solid var(--accent);outline-offset:-2px}
.xc mark{background:#FFE68A;color:inherit;padding:0}
.xc.dim{opacity:.35}
.xc.hit{outline:2px solid var(--accent);outline-offset:-2px}
/* 연결선 — 원본의 hair 테두리 */
.s2,.s5,.s12{border-bottom:1px solid #808080}
.s5,.s6,.s7{border-right:1px solid #808080}
.s11,.s12{border-left:1px solid #808080}
/* 제목 · 날짜 · 인원수 */
.s1{font-size:18pt;font-weight:800;justify-content:flex-start;border-bottom:1px solid #808080}
.s3{font-size:10pt;justify-content:flex-start}
.s4,.s6{font-size:9pt;font-weight:700;color:#0051A3;justify-content:flex-start;align-items:flex-end}
.s16,.s8{font-size:8pt;justify-content:flex-start;align-items:flex-end}
/* 상자 — 테두리는 원본의 thin(검정) */
.s17,.s18,.s19,.s20,.s21,.s22,.s23,.s24,.s25,.s26,.s27,.s28,.s29,.s30{border:1px solid #000}
.s17{background:#D9D9D9;font-size:9pt;font-weight:700}
.s18{background:#0051A3;color:#fff;font-size:11pt;font-weight:700}
.s19,.s20{font-size:9pt;background:#fff}
.s24,.s25{font-size:9pt;font-weight:700;background:#fff}
.s21,.s26{background:#404040;color:#fff;font-weight:700}
.s22{background:#1F3864;color:#fff;font-weight:700}
.s23,.s27,.s28{background:#D9D9D9}
.s29,.s30{background:#808080;color:#fff}
@media (max-width:720px){.xpage{height:auto;min-height:0}}

@media print{
  header,footer,#dr,#lb,#scrim,#newver{display:none!important}
  html,body{background:#fff!important;margin:0;color:#111}
  main{max-width:none;padding:0}
  .sheet,.tcard,.ccard,.solo .unit,.grp,.mrow{break-inside:avoid}
  .sheet,.tcard,.ccard{box-shadow:none;border:1px solid #D5DBE6;border-radius:8px}
  /* 종이 폭을 살리기 위해 문서형은 2열을 유지한다(예전엔 1열로 강제해 절반이 비었다) */
  /* 문서·트리·요약: 격자(grid)는 한 줄의 높이를 가장 큰 카드에 맞춰 빈 곳이 크게 생긴다.
     인쇄에서는 다단(column)으로 바꿔 카드가 위에서부터 차곡차곡 채워지게 한다. */
  .sheets,.cgrid{display:block!important;column-count:2;column-gap:9mm}
  body[data-layout="tree"] #tree{display:block!important;column-count:2;column-gap:9mm}
  body[data-layout="excel"] #excel{display:block!important;padding:0}
  body[data-layout="excel"] main{padding:0}
  body[data-layout="excel"] .xpage{max-width:none;min-height:0;aspect-ratio:auto;
    border:0;border-radius:0;box-shadow:none;padding:0;background:#fff;overflow:visible}
  .sheet,.tcard,.ccard{break-inside:avoid;page-break-inside:avoid;
    -webkit-column-break-inside:avoid;margin:0 0 8px!important;width:100%}
  .sheet .sbody,.tcard{padding:10px 12px!important}
  .shead{padding:10px 12px!important}
  .masthead{background:#fff!important;color:#111;box-shadow:none;border:1px solid #D5DBE6;margin:0 0 8px;
    padding:12px 16px!important}
  .masthead::after{display:none}
  .masthead .eyebrow,.masthead h1,.masthead .fig .v,.masthead .fig .l{color:#111}
  .masthead h1{font-size:22px!important}
  .masthead .fig,.masthead .ceo{background:#F3F5F9;color:#111}
  .row,.tn{font-size:10.5px}
  a{color:#111!important;text-decoration:none}
  /* 다이어그램: JS 가 고른 방향·배율로 한 장에 맞추고 가운데 놓는다 */
  #dwrap{width:var(--pw,auto);height:var(--ph,auto)!important;overflow:hidden!important;
    margin:0 auto!important;background:#fff!important;border:0!important}
  #diagram{background:#fff!important}
  #ptitle{display:block!important;text-align:center;font-size:12px;font-weight:800;color:#111;margin:0 0 8px}
  #ptitle span{font-weight:500;color:#555;margin-left:8px;font-size:10.5px}
  /* 인쇄에서는 캔버스가 내용에 딱 붙게 만든다 — 화면의 min-width:100% 를 그대로 두면
     빈 여백까지 종이에 실려 조직도가 작아지고 한쪽으로 쏠린다. */
  #dcanvas{margin:0!important;padding:8px!important;min-width:0!important;width:max-content!important;
    transform-origin:0 0;transform:scale(var(--pk,1))!important;
    display:inline-block!important;background:#fff!important}
  .dbox{box-shadow:none!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================= 확장 프로그램 로딩 오버레이 ================= */
#state{position:fixed;inset:0;z-index:70;background:var(--paper);display:grid;place-items:center;padding:24px}
#state.off{display:none}
#state .scard{background:var(--sheet);border-radius:18px;box-shadow:var(--shadow2);padding:30px 34px;
  text-align:center;max-width:380px}
#state .sp{width:30px;height:30px;margin:0 auto 16px;border-radius:50%;border:3px solid var(--accent-soft);
  border-top-color:var(--accent);animation:spin .8s linear infinite}
#state .sp[hidden]{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
#state .st{font-size:17px;font-weight:800;letter-spacing:-.02em}
#state .sm{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.65}
#state .abtn{width:auto;margin-top:16px;padding:10px 20px;background:var(--grad);color:#fff;
  border-radius:var(--r2);font-size:13px;font-weight:700}

/* ================= 접근성 · 검색 · 반응형 보강 ================= */
.av.ini{display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);
  font-weight:800;font-size:13px;cursor:default;border:2px solid var(--sheet);box-shadow:0 0 0 1px var(--rule-2)}
.av.ini.sm{font-size:11px}
.dstack .av.ini{font-size:11px}
.dbox.hit{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow2)}
[data-n]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r3)}
.tn:focus-visible,.row:focus-visible{background:var(--accent-soft2)}

@media (max-width:1100px){
  .bar{padding:10px 16px;gap:10px}
  .find input{width:150px}
  .mark .n{font-size:15px}
  .tb{padding:5px 10px;font-size:11.5px}
  .seg button{padding:5px 10px;font-size:11.5px}
}
@media (max-width:720px){
  .bar{flex-wrap:wrap;gap:8px}
  /* ① 검색칸을 로고 옆 첫 줄로 — 한 줄이 준다 */
  .find{flex:1 1 118px;min-width:0;margin-left:0}
  .find input{width:100%}
  .tools{width:100%;margin-left:0;justify-content:flex-start;gap:4px}
  /* ② 기능 버튼은 아이콘만 — 세 줄이 두 줄로 준다.
     PPT·엑셀은 아이콘이 같아 글자를 남긴다(둘을 구분할 수 없게 된다) */
  #zfw .lb,#zfa .lb,#photo .lb,#addhome .lb{display:none}
  /* 손가락으로 누르는 화면이라 아이콘·누름면을 키운다 */
  #zfw,#zfa,#photo,#addhome{gap:0;padding:8px 10px;min-width:38px;justify-content:center}
  .tb.ico{padding:7px 9px}
  .tb svg{width:18px;height:18px}
  .tb.ic{padding:8px 10px;min-width:38px;font-size:15px}
  .tb.ic svg{width:18px;height:18px}
  .zw,.tgrp{padding-left:6px;gap:4px}
  .seg button{padding:5px 9px;font-size:11px}
  main{padding:0 14px 48px}
  .masthead{padding:20px 18px;border-radius:14px}
  #dr{width:100%}
}

/* 서랍 아바타 — 사진 없거나 로드 실패 시 이니셜 노출 */
.avw{position:relative;width:36px;height:36px;flex:none;margin-top:1px;display:block}
.avw .ph0{position:absolute;inset:0;margin:0}
.avw .av{position:absolute;inset:0;width:36px;height:36px;margin:0}
body.nophoto .avw{display:none}
#lb img{image-rendering:auto}


/* ================= 새 버전 알림 ================= */
#newver{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);z-index:120;
  display:none;align-items:center;gap:12px;background:var(--grad);color:#fff;border-radius:999px;
  padding:10px 12px 10px 18px;box-shadow:0 12px 30px -10px rgba(21,38,74,.55);font-size:13px;font-weight:600;
  opacity:0;transition:opacity .2s,transform .2s}
#newver.on{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
#newver button{border:0;border-radius:999px;padding:6px 14px;font:inherit;font-weight:700;cursor:pointer;
  background:rgba(255,255,255,.94);color:var(--accent-ink)}
#newver .x{background:transparent;color:#fff;padding:6px 8px;font-weight:700;opacity:.85}
@media print{#newver{display:none!important}}

/* ================= 총무팀 서비스 포털 링크 =================
   배치도·챗봇에는 lib/gaportal.js 가 같은 모양을 주입한다.
   모양을 바꾸면 그 파일도 함께 고친다(세 서비스가 같아 보여야 한다). */
#gaportal{position:fixed;left:14px;bottom:14px;z-index:88;
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  background:var(--sheet);color:var(--ink-2);border:1px solid var(--rule-2);
  box-shadow:0 6px 18px -10px rgba(20,30,60,.45);
  font-size:12px;font-weight:700;line-height:1;letter-spacing:-.01em;
  transition:box-shadow .15s,transform .15s,color .15s}
#gaportal:hover{color:var(--accent-ink);box-shadow:0 10px 24px -10px rgba(20,30,60,.5);transform:translateY(-1px)}
#gaportal svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
@media (max-width:520px){#gaportal{left:10px;bottom:10px;padding:7px 11px;font-size:11.5px}}
@media print{#gaportal{display:none!important}}

/* ================= 아이디어 제안 ================= */
#ifab{position:fixed;right:22px;bottom:22px;z-index:90;display:inline-flex;align-items:center;gap:7px;
  padding:11px 16px;border:0;border-radius:999px;cursor:pointer;font-size:12.5px;font-weight:800;
  color:#fff;background:linear-gradient(102deg,#3562E3,#5B93F7);box-shadow:0 6px 20px rgba(53,98,227,.34)}
#ifab:hover{filter:brightness(1.06)}
#ifab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
#ifab.off{display:none}
#iscrim{position:fixed;inset:0;z-index:96;background:rgba(16,24,40,.34);display:none}
#iscrim.on{display:block}
#ipanel{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:97;background:var(--sheet);
  box-shadow:var(--shadow2);display:none;flex-direction:column}
#ipanel.on{display:flex}
#ipanel .ih{position:relative;padding:18px 52px 14px 20px;background:linear-gradient(102deg,#3562E3,#5B93F7);color:#fff}
#ipanel .ih b{font-size:17px;font-weight:800;display:block}
#ipanel .isub{font-size:11.5px;color:rgba(255,255,255,.86)}
#ix{position:absolute;top:12px;right:12px;width:30px;height:30px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font-size:18px;line-height:1}
#ix:hover{background:rgba(255,255,255,.3)}
.itabs{display:flex;gap:6px;padding:12px 16px 8px;border-bottom:1px solid var(--rule)}
.itabs button{border:1px solid var(--rule-2);background:var(--sheet);color:var(--ink-2);cursor:pointer;
  font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px}
.itabs button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
#ilist{flex:1;overflow:auto;padding:10px 16px 16px}
.icard{border:1px solid var(--rule);border-radius:var(--r2);padding:12px 13px;margin-bottom:9px;background:var(--sheet)}
.icard .ihead{display:flex;align-items:flex-start;gap:10px}
.icard .ittl{flex:1;font-size:13px;font-weight:800;color:var(--ink);line-height:1.45}
.icard .imeta{margin-top:5px;font-size:11px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.ivote{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:46px;
  padding:5px 6px;border:1px solid var(--rule-2);border-radius:10px;background:var(--sheet);cursor:pointer}
.ivote b{font-size:13px;font-weight:800;color:var(--ink)}
.ivote span{font-size:9.5px;color:var(--muted)}
.ivote.on{background:var(--accent);border-color:var(--accent)}
.ivote.on b,.ivote.on span{color:var(--on-accent)}
.idel{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:11px;padding:2px 4px}
.idel:hover{color:var(--accent-ink)}
#iform{border-top:1px solid var(--rule);padding:12px 16px 16px;background:var(--sunk)}
#iform input[type=text]{width:100%;border:1px solid var(--rule-2);border-radius:9px;
  padding:9px 11px;font:inherit;font-size:12.5px;background:var(--sheet);color:var(--ink)}
.irow{display:flex;align-items:center;gap:8px;margin-top:8px}
.ianon{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.ipost{margin-left:auto;border:0;border-radius:999px;padding:8px 18px;cursor:pointer;
  font-size:12px;font-weight:800;color:var(--on-accent);background:var(--accent)}
.ipost:disabled{opacity:.5;cursor:default}
.imsg{margin-top:7px;font-size:11px;color:var(--muted);min-height:15px}
.imsg.err{color:#C0392B}
@media (max-width:720px){ #ifab span{display:none} #ifab{padding:13px} }
@media print{ #ifab,#ipanel,#iscrim{display:none!important} }

/* ================= 바로가기 추가 안내 시트 (2026-09-05) =================
   즐겨찾기 추가는 브라우저가 자바스크립트로 못 하게 막아 두었다.
   그래서 이 버튼은 '추가해 주는' 버튼이 아니라 '어디를 누르면 되는지 알려 주는' 버튼이다. */
.shscrim{position:fixed;inset:0;z-index:88;background:rgba(12,22,20,.42);backdrop-filter:blur(2px)}
.shsheet{position:fixed;z-index:89;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(430px,calc(100vw - 32px));max-height:min(86vh,720px);overflow:auto;
  background:var(--sheet);border-radius:18px;box-shadow:var(--shadow2)}
.shsheet[hidden],.shscrim[hidden]{display:none}
.shh{background:var(--grad);color:#fff;padding:18px 20px 16px;display:flex;align-items:flex-start;gap:12px}
.shh .shi{width:34px;height:34px;border-radius:9px;flex:none;background-size:cover}
.shh b{font-size:15.5px;font-weight:800;letter-spacing:-.02em;display:block}
.shh i{font-style:normal;font-size:11.5px;opacity:.88;display:block;margin-top:3px;line-height:1.5}
.shx{margin-left:auto;flex:none;width:26px;height:26px;border-radius:999px;color:#fff;
  background:rgba(255,255,255,.18);font-size:17px;line-height:1}
.shx:hover{background:rgba(255,255,255,.32)}
.shb{padding:18px 20px 6px}
.shb .shwhat{font-size:12px;color:var(--muted);margin:0 0 13px;line-height:1.6}
.shstep{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px}
.shstep .no{flex:none;width:21px;height:21px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent-ink);font-size:11.5px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.shstep .tx{font-size:13px;color:var(--ink);line-height:1.62}
.shstep .tx b{font-weight:800}
.shstep .tx em{font-style:normal;display:inline-flex;align-items:center;gap:4px;
  background:var(--sunk);border:1px solid var(--rule-2);border-radius:7px;
  padding:1px 7px;font-size:12px;font-weight:700;color:var(--ink)}
.shstep .tx small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.shstep svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.shnote{margin:4px 0 0;padding:10px 12px;border-radius:10px;background:var(--sunk);
  font-size:11.5px;color:var(--ink-2);line-height:1.65}
.shf{display:flex;gap:8px;align-items:center;padding:14px 20px 18px}
.shurl{flex:1;min-width:0;font-family:var(--mono);font-size:11px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shcopy{flex:none;padding:8px 14px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-size:12px;font-weight:700}
.shcopy:hover{background:var(--accent-ink)}
@media (max-width:520px){
  .shsheet{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;border-radius:18px 18px 0 0}
}
@media print{.shsheet,.shscrim{display:none!important}}
.shinst{padding:10px 20px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-size:13.5px;font-weight:800}
.shinst:hover{background:var(--accent-ink)}
.shinst[disabled]{opacity:.6;cursor:default}


/* 사내 메일 인증 화면 — 블루 카드 톤앤매너 */
#auth{position:fixed;inset:0;z-index:80;background:var(--paper);display:grid;place-items:center;padding:24px}
#auth.off{display:none}
.acard{width:min(410px,100%);background:var(--sheet);border-radius:18px;box-shadow:var(--shadow2);overflow:hidden}
.acard .ah{background:var(--grad);color:#fff;padding:22px 26px 20px}
.acard .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;opacity:.85}
.acard h1{margin:8px 0 5px;font-size:23px;font-weight:800;letter-spacing:-.025em;line-height:1.2}
.acard .lead{margin:0;font-size:12.5px;opacity:.9;line-height:1.6}
.abody{padding:22px 26px 24px}
.astep{display:none} .astep.on{display:block}
.acard label{display:block;font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:7px;font-weight:700}
.idbox{display:flex;align-items:stretch;border:1px solid var(--rule-2);border-radius:var(--r2);background:var(--sheet);overflow:hidden}
.idbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.idbox input{flex:1;min-width:0;border:0;background:none;color:var(--ink);padding:12px 13px;font-size:15px;
  font-family:var(--sans);outline:none}
.idbox .dm{display:flex;align-items:center;padding:0 13px;background:var(--sunk);border-left:1px solid var(--rule);
  font-size:13px;color:var(--muted);white-space:nowrap;font-weight:600}
.codebox{width:100%;padding:14px 13px;border:1px solid var(--rule-2);border-radius:var(--r2);background:var(--sheet);
  color:var(--ink);font-family:var(--mono);font-size:26px;letter-spacing:12px;text-align:center;font-weight:500}
.codebox:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.abtn{width:100%;margin-top:15px;padding:13px 16px;background:var(--grad);color:#fff;border-radius:var(--r2);
  font-size:14px;font-weight:700;box-shadow:0 8px 20px -12px rgba(40,80,190,.9)}
.abtn[disabled]{opacity:.55;cursor:progress}
.alink{margin-top:14px;display:flex;gap:14px;font-size:12px;color:var(--muted)}
.alink button{text-decoration:underline;text-underline-offset:3px;color:var(--muted);font-size:12px}
.alink button:hover{color:var(--accent-ink)}
.amsg{margin-top:13px;font-size:12.5px;min-height:19px;line-height:1.5}
.amsg.err{color:#D93B3B} .amsg.ok{color:var(--accent-ink)}
:root[data-mode="dark"] .amsg.err{color:#F2857C}
.asent{font-size:13px;color:var(--ink-2);margin:0 0 20px;line-height:1.65}
.asent b{font-weight:700;color:var(--ink)}
.afoot{margin-top:24px;padding-top:14px;border-top:1px solid var(--rule);font-size:11px;color:var(--muted);
  line-height:1.85;text-align:center}
.who{font-size:11px;color:var(--muted)}
.who button{text-decoration:underline;text-underline-offset:2px;color:var(--muted);margin-left:8px}