/* =============================================================================
   안전보건 조직(hs-org) — 화면·조직도 그리기 (2026-10-09)    접두사 .hso-
   - 위쪽 '조직도 그리기' 규칙(.hso-canvas …)은 화면과 인쇄 보기(#hsPrintHost) 모두에 쓰인다. 크기는 전부 렌더러가 인라인(--hso-*)으로 정한다.
   - 아래쪽 화면 전용 규칙(툴바·패널·목록 보기)은 앱의 Apple 스타일 토큰(--mint 등)을 따른다. 인쇄 문서 모양은 공식 문서(꾸밈 없음).
   ========================================================================== */
.hso-canvas { position: relative; overflow: hidden; background: #fff; color: #404040; text-align: left; letter-spacing: 0; text-size-adjust: none; -webkit-text-size-adjust: none;
  font-family: Pretendard, 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hso-canvas *, .hso-canvas *::before, .hso-canvas *::after { box-sizing: border-box; }
.hso-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: hidden; }
.hso-box { position: absolute; }
.hso-hd { display: flex; flex-direction: column; justify-content: center; text-align: center; border: var(--hso-bw) solid #000; padding: 0 var(--hso-padx); overflow: visible; }
.hso-hd.is-b { font-weight: 700; }
.hso-ln { height: var(--hso-lh); line-height: var(--hso-lh); font-size: var(--hso-fs); white-space: nowrap; font-weight: inherit; }
.hso-bd { display: flex; flex-direction: column; justify-content: center; text-align: center; background: #fff; color: #404040; border: var(--hso-bw) solid #000; border-top: 0; padding: 0 var(--hso-padx); box-shadow: var(--hso-sh) var(--hso-sh) var(--hso-shb) #d2d2d2; }
.hso-nt { color: #595959; }
.hso-s-org > .hso-hd { background: #FF4B19; color: #fff; }
.hso-s-gray > .hso-hd { background: #D0D0D0; color: #595959; }
.hso-s-white > .hso-hd { background: #fff; color: #404040; box-shadow: var(--hso-sh) var(--hso-sh) var(--hso-shb) #d2d2d2; }
.hso-s-white > .hso-bd { box-shadow: var(--hso-sh) var(--hso-sh) var(--hso-shb) #d2d2d2; }
.hso-s-blue > .hso-hd { background: #1F6A8A; color: #fff; }
.hso-k-group > .hso-hd { }
.hso-tb { position: relative; border-left: var(--hso-bw) solid #000; background: #fff; }
.hso-tl, .hso-tv { position: absolute; display: flex; flex-direction: column; justify-content: center; text-align: center; border-right: var(--hso-bw) solid #000; border-bottom: var(--hso-bw) solid #000; color: #3F3F3F; padding: 0 var(--hso-tpad); }
.hso-tl { background: #F2F2F2; }
.hso-tln { height: var(--hso-tlh); line-height: var(--hso-tlh); font-size: var(--hso-tfs); white-space: nowrap; }

/* ---- 화면 전용 ---- */
@media screen {
  .hso-canvas.is-pick .hso-box { cursor: pointer; }
  .hso-box.is-sel { z-index: 2; }
  .hso-box.is-sel > .hso-hd, .hso-box.is-sel > .hso-bd, .hso-box.is-sel > .hso-tb { outline: 0; }
  .hso-box.is-sel::after { content: ''; position: absolute; inset: -3px; border: 2px solid #0a84ff; border-radius: 3px; pointer-events: none; }
  .hso-p.is-selp, .hso-tv.is-selp { background: rgba(10, 132, 255, .16); }
}
.hso-wrap { max-width: 1480px; margin: 0 auto; }
.hso-wrap .btn-sm { min-height: 40px; }
.hso-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 10px; }
.hso-head h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.hso-head .hs-chip { vertical-align: middle; }
.hso-sub { color: var(--ink-2); font-size: 13px; margin: -4px 0 10px; line-height: 1.5; }
.hso-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.hso-bar .hso-sp { flex: 1 1 auto; }
.hso-bar select { min-height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; max-width: 100%; }
.hso-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.hso-seg button { border: 0; background: #fff; color: var(--ink); min-height: 40px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.hso-seg button + button { border-left: 1px solid var(--line-strong); }
.hso-seg button.is-on { background: var(--mint); color: #fff; }
.hso-zoom { display: inline-flex; gap: 4px; align-items: center; }
.hso-zoom .btn { min-width: 40px; padding: 6px 10px; }
.hso-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.hso-body.has-panel { grid-template-columns: minmax(0, 1fr) 360px; }
.hso-stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: auto; padding: 12px; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; max-height: calc(100vh - 210px); min-height: 220px; }
.hso-stage .hso-canvas { margin: 0 auto; }
.hso-stage.is-empty { display: flex; align-items: center; justify-content: center; }
.hso-hint { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 8px 2px; }
.hso-panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 14px; position: sticky; top: 10px; max-height: calc(100vh - 40px); overflow: auto; }
.hso-panel h3 { margin: 0 0 10px; font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hso-panel h4 { margin: 14px 0 6px; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hso-panel .field { margin-bottom: 10px; }
.hso-panel .field input, .hso-panel .field select { width: 100%; }
.hso-sfh .staff-combo-input { width: 100%; min-height: 44px; padding: 9px 11px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); -webkit-appearance: none; appearance: none; }   /* 담당자 상자의 직원 검색칸: 공통 입력칸과 같은 모양 */
.hso-sfh .staff-combo-input:focus { outline: 2px solid var(--mint); outline-offset: 0; border-color: var(--mint); }
.hso-x { border: 0; background: var(--surface-2); width: 40px; height: 40px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); flex: 0 0 auto; }
.hso-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.hso-acts .btn { flex: 0 0 auto; }
.hso-plist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.hso-plist li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.hso-plist li:last-child { border-bottom: 0; }
.hso-plist li.is-selp { background: var(--mint-tint); }
.hso-plist .hso-pw { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.hso-plist .hso-pw b { display: block; overflow-wrap: anywhere; }
.hso-plist .hso-pw i { font-style: normal; color: var(--ink-2); font-size: 12px; display: block; overflow-wrap: anywhere; }
.hso-plist .btn { min-width: 40px; padding: 6px 8px; min-height: 40px; }
.hso-plist .hso-pb { display: flex; gap: 4px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }
.hso-note { background: var(--surface-2); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; line-height: 1.55; margin: 0 0 10px; color: var(--ink-2); }
.hso-warn { background: #fff4d6; color: #7a5200; border: 1px solid #e5c36a; border-radius: var(--radius); padding: 9px 12px; font-size: 13px; margin: 0 0 10px; line-height: 1.5; }

/* ---- 목록(개요) 보기 ---- */
.hso-ol { list-style: none; margin: 0; padding: 0; }
.hso-ol ul { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--line); margin-left: 10px; }
.hso-ol > li { margin: 6px 0; }
.hso-ol li { margin: 4px 0; }
.hso-ol-sec { font-weight: 800; font-size: 13px; color: var(--ink-2); margin: 12px 4px 4px; }
.hso-ol-row { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.hso-ol-row.is-sel { border-color: #0a84ff; box-shadow: 0 0 0 2px rgba(10, 132, 255, .25); }
.hso-ol-t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.hso-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, .35); }
.hso-dot.s-org { background: #FF4B19; } .hso-dot.s-gray { background: #D0D0D0; } .hso-dot.s-white { background: #fff; } .hso-dot.s-blue { background: #1F6A8A; }
.hso-ol-p { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.hso-ol-p span { overflow-wrap: anywhere; }
.hso-ol-p em { font-style: normal; color: var(--ink-2); font-size: 12px; }

/* ---- 버전 이력 ---- */
.hso-hist td, .hso-hist th { white-space: nowrap; }
.hso-hist td.wr { white-space: normal; min-width: 160px; }
.hso-hist tr.is-click { cursor: pointer; }
.hso-hist tr.is-click:hover td { background: var(--mint-tint); }
.hso-diff { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.hso-diff th, .hso-diff td { border-bottom: 1px solid var(--line); padding: 6px 6px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.hso-diff th { color: var(--ink-2); font-size: 12px; }
.hso-modalbox { max-height: 55vh; overflow: auto; }
.hso-aud { font-size: 13px; border-top: 1px solid var(--line); }
.hso-aud li { display: flex; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.hso-aud ul { list-style: none; margin: 0; padding: 0; }
.hso-aud time { color: var(--ink-2); flex: 0 0 auto; }

/* ---- 인쇄 문서(공식 문서 모양 — Apple 스타일 아님) ---- */
.hso-pg { color: #000; }
.hso-pg-head { position: absolute; left: 10mm; right: 10mm; top: 9mm; }
.hso-pg-title { font-size: 15pt; font-weight: 700; line-height: 1.3; margin: 0; padding-bottom: 2mm; border-bottom: 0.35mm solid #000; }
.hso-pg-sub { font-size: 8.5pt; margin: 1.2mm 0 0; color: #333; display: flex; justify-content: space-between; gap: 6mm; }
.hso-pg-foot { position: absolute; left: 10mm; right: 10mm; bottom: 6mm; font-size: 8pt; color: #333; display: flex; justify-content: space-between; gap: 6mm; }
.hso-pg-cont { font-weight: 700; }

/* ---- 좁은 화면 ---- */
@media (max-width: 1099px) {
  .hso-body.has-panel { grid-template-columns: minmax(0, 1fr); }
  .hso-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; max-height: 50vh; border-radius: 16px 16px 0 0; border-width: 1px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .18); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .hso-body.has-sheet { padding-bottom: 50vh; }
  .hso-stage { max-height: none; }
}
@media (max-width: 720px) {
  .hso-head h2 { font-size: 17px; }
  .hso-bar select { flex: 1 1 140px; }
  .hso-plist .hso-pb { max-width: 100%; }
  .hso-plist li { flex-wrap: wrap; }
}

.hso-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hso-ext { display: flex; align-items: center; gap: 8px; margin: 8px 0; min-height: 44px; font-size: 14px; cursor: pointer; }
.hso-ext input { width: 20px; height: 20px; flex: 0 0 auto; }

body.hs-mod-hs-org .hs-wrap { max-width: 1560px; }
#app:has(.hso-wrap) { max-width: 1560px; }
.hso-det { margin: 14px 0 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.hso-det summary { cursor: pointer; font-weight: 700; font-size: 14px; min-height: 40px; display: flex; align-items: center; }
.hso-det[open] summary { margin-bottom: 8px; }