/* =============================================================================
   안전보건 경영방침·목표·세부추진계획 (hsp, 2026-10-09)   js/hsp-*.js · modules/hs-policy.js 와 한 쌍
   접두사 .hsp-*  (공통 .hs-* 는 css/hs.css).  1) 화면(Apple 스타일 · 앱 토큰 사용)  2) 공식 출력 문서(.hsp-pg — 공식 사내문서 서식, Apple 스타일 아님)
   ========================================================================== */

/* ---------- 목록 카드 ---------- */
.hsp-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hsp-card { display: flex; flex-direction: column; gap: 8px; min-height: 148px; padding: 16px; border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.hsp-card:hover, .hsp-card:focus-visible { border-color: var(--mint); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.hsp-year { font-size: 24px; letter-spacing: -.01em; }
.hsp-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.hsp-card-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 4px 12px; margin: 2px 0 0; font-size: 13px; }
.hsp-card-meta dt { color: var(--ink-2); font-size: 12px; }
.hsp-card-meta dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.hsp-card-st { font-size: 13px; margin-top: auto; }
.hsp-sl em { font-style: normal; font-weight: 800; margin-left: 4px; }
.hsp-od-b { display: block; }
.hsp-stl { display: inline-flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.hsp-od { color: #b42318; font-weight: 700; font-style: normal; font-size: 12.5px; }

/* ---------- 진행 막대 ---------- */
.hsp-bar { display: flex; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 6px 0; }
.hsp-bar i { display: block; height: 100%; }
.hsp-bar-done { background: var(--mint); }
.hsp-bar-doing { background: #7db4ee; }
.hsp-sum .hs-stats { margin-bottom: 8px; }
.hsp-od-line { color: #b42318; font-weight: 700; }
.hsp-gbars { display: grid; gap: 10px; margin-top: 12px; }
.hsp-gb-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.hsp-gb-h b { min-width: 0; overflow-wrap: anywhere; }
.hsp-doclink { margin-left: auto; font-size: 13px; }
.hsp-yearsel { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.hsp-yearsel select { min-height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; background: #fff; color: var(--ink); font: inherit; }

/* ---------- 문서 화면 머리 ---------- */
.hsp-head-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.hsp-head h2 { font-size: 20px; overflow-wrap: anywhere; }
.hsp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.hsp-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; margin: 0 0 12px; padding: 12px 14px; background: var(--surface-2); border-radius: 14px; }
.hsp-info dt { font-size: 12px; color: var(--ink-2); }
.hsp-info dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.hsp-info dd i { font-style: normal; font-weight: 400; color: var(--ink-2); margin-left: 4px; font-size: 12.5px; }

/* ---------- 용지 모양 카드(방침 · 목표) ---------- */
.hsp-paper { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 22px; margin: 0 0 14px; }
.hsp-quote { text-align: center; font-size: 18px; margin: 16px 0 10px; letter-spacing: .02em; }
.hsp-quote:first-child { margin-top: 4px; }
.hsp-policy { border: 1px solid var(--line-strong); border-radius: 12px; padding: 16px 18px; text-align: center; font-size: 16px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.hsp-req { color: #b42318; }
.hsp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 목표 · 세부추진계획(읽기) ---------- */
.hsp-g { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; margin: 0 0 12px; background: #fff; }
.hsp-g-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hsp-g-h h4 { margin: 0; font-size: 16px; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.hsp-g-no { background: var(--mint-tint); color: var(--mint-ink); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.hsp-g-st { font-size: 13px; }
.hsp-g-d { margin: 6px 0 8px; font-size: 14px; color: var(--ink-2); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.hsp-noplan { padding: 8px 2px; font-size: 13px; }
.hsp-pt { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 13.5px; }
.hsp-pt-r { display: grid; grid-template-columns: minmax(150px, 2.2fr) minmax(70px, 1fr) minmax(60px, .9fr) minmax(112px, 1.3fr) minmax(60px, .9fr) minmax(70px, 1fr) minmax(74px, .8fr) minmax(70px, 1.2fr); gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.hsp-pt-w .hsp-pt-r { grid-template-columns: minmax(150px, 2.2fr) minmax(70px, 1fr) minmax(60px, .9fr) minmax(112px, 1.3fr) minmax(60px, .9fr) minmax(70px, 1fr) minmax(74px, .8fr) minmax(70px, 1.2fr) 64px; }
.hsp-pt-r:last-child { border-bottom: 0; }
.hsp-pt-r > span { min-width: 0; overflow-wrap: anywhere; }
.hsp-pt-h { background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 700; }
.hsp-pt-r.is-od { background: #fffaf5; }
.hsp-pt-act { text-align: right; }
.hsp-pt-act .btn { min-height: 36px; }

/* ---------- 하단 날짜 · 책임자 서명 ---------- */
.hsp-sign { margin-top: 22px; text-align: right; padding-top: 14px; border-top: 1px solid var(--line); }
.hsp-sign-date { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.hsp-sign-line { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; font-size: 15px; }
.hsp-sign-line span:first-child { color: var(--ink-2); }
.hsp-sign-box { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; min-height: 56px; border-bottom: 1px solid var(--line-strong); padding: 0 6px; }
.hsp-sign-box em { color: var(--ink-2); font-size: 13px; font-style: normal; }
.hsp-sign-img { max-height: 70px; max-width: 220px; }
.hsp-sign-meta { margin-top: 6px; }

/* ---------- 이력 표 ---------- */
.hsp-hist .hs-table tr.is-cur td { background: var(--mint-tint); }
.hsp-reason { min-width: 180px; overflow-wrap: anywhere; }

/* ---------- 편집 ---------- */
.hsp-form { margin: 0 0 14px; }
.hsp-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.hsp-ro { min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.hsp-owner-host { max-width: 520px; }
.hsp-owner-title { max-width: 520px; }
.hsp-form .field textarea { resize: vertical; }
.hsp-gc { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; margin: 0 0 12px; background: var(--surface-2); }
.hsp-gc-h, .hsp-pc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.hsp-gc-h b { font-size: 15px; }
.hsp-mini { display: inline-flex; gap: 4px; }
.hsp-mini .btn { min-width: 44px; min-height: 40px; }
.hsp-del { color: #b42318; }
.hsp-sub-h { font-weight: 800; font-size: 13.5px; margin: 10px 0 6px; }
.hsp-sub-h span { color: var(--ink-2); font-weight: 600; margin-left: 4px; }
.hsp-pc { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; margin: 0 0 10px; }
.hsp-pc-n { font-size: 13px; font-weight: 800; color: var(--mint-ink); }
.hsp-pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.hsp-wide { grid-column: 1 / -1; }
.hsp-own { min-height: 44px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hsp-own-n { font-weight: 700; }
.hsp-lockexec { font-size: 12.5px; line-height: 1.5; background: var(--surface-2); border-radius: 10px; padding: 8px 10px; color: var(--ink-2); }
.hsp-addp { margin-top: 2px; min-height: 40px; }
.hsp-addg { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hsp-bottom { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 14px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 -2px 12px rgba(0, 0, 0, .06); }
.hsp-bottom .btn { min-height: 44px; }
.hsp-bottom .btn-primary { min-width: 96px; }
.hsp-more { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.hsp-dirty { color: #b45309; font-weight: 700; }
.hsp-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.hsp-seg button { flex: 1 1 80px; min-height: 44px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; }
.hsp-seg button.is-on { background: var(--mint); border-color: var(--mint); color: #fff; }
.hsp-em-t { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.hsp-flt { margin-top: 0; }
.hsp-prep { padding: 40px; text-align: center; color: #555; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 900px) {
  .hsp-pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hsp-pt-r, .hsp-pt-w .hsp-pt-r { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 10px 12px; }
  .hsp-pt-h { display: none; }
  .hsp-pt-r > span[data-label]::before { content: attr(data-label); display: inline-block; min-width: 64px; color: var(--ink-2); font-size: 12px; margin-right: 6px; }
  .hsp-pt-task b { font-size: 15px; }
  .hsp-pt-act { text-align: left; }
  .hsp-pt-act .btn { min-height: 44px; width: 100%; }
  .hsp-paper { padding: 14px 12px 18px; }
  .hsp-sign { text-align: left; }
  .hsp-sign-line { justify-content: flex-start; }
  .hsp-bottom { padding: 8px 10px; gap: 8px; }
  .hsp-bottom .btn { flex: 1 1 calc(50% - 8px); }
  .hsp-bottom .hsp-dirty { flex: 1 1 100%; font-size: 12px; line-height: 1.2; }
  .hsp-head h2 { font-size: 18px; }
  .hsp-acts .btn { flex: 1 1 calc(50% - 8px); min-height: 44px; }
  .hsp-quote { font-size: 16px; }
  .hsp-policy { font-size: 15px; padding: 12px; }
}
@media (max-width: 480px) {
  .hsp-pc-grid { grid-template-columns: minmax(0, 1fr); }
  .hsp-mini .btn { min-width: 44px; }
  .hsp-year { font-size: 22px; }
}

/* =============================================================================
   공식 출력 문서 — A4 세로. 쪽 상자 #hsPrintHost .hs-page.hsp-pg 와, 높이를 재는 숨은 상자 .hsp-measure.hsp-pg 에 같이 적용된다.
   서식: 본문 바탕체(없으면 명조/세리프), 제목 고딕, 두 줄 선, 표는 얇은 검은 선. 색은 검정·회색만.
   ========================================================================== */
.hsp-measure { position: absolute; left: -10000px; top: 0; width: 170mm; visibility: hidden; pointer-events: none; }
.hsp-measure, .hsp-measure * { box-sizing: border-box; }
.hsp-measure .hsp-mm { height: 100mm; width: 1px; }
.hsp-pg .hsp-in, .hsp-pg .hsp-pf { font-family: "Batang", "바탕", "BatangChe", "Nanum Myeongjo", "Noto Serif KR", "Noto Serif CJK KR", "AppleMyungjo", serif; color: #111; }
.hsp-pg .hsp-in { display: flow-root; width: 100%; font-size: 11pt; line-height: 1.5; }
.hsp-pg .hsp-p-head { text-align: center; padding: 6mm 0 8mm; }
.hsp-pg .hsp-p-head h1 { margin: 0; font-family: "Gulim", "굴림", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; font-size: 30pt; font-weight: 500; letter-spacing: .32em; text-indent: .32em; line-height: 1.3; }
.hsp-pg .hsp-p-sub { display: flex; justify-content: space-between; margin-top: 7mm; padding: 1.6mm 1mm; border-top: 1.4pt solid #111; border-bottom: .5pt solid #111; font-size: 10.5pt; }
.hsp-pg .hsp-p-label { text-align: center; font-family: "Gulim", "굴림", "Malgun Gothic", sans-serif; font-weight: 700; font-size: 12.5pt; letter-spacing: .08em; padding-bottom: 3mm; }
.hsp-pg .hsp-p-label2 { padding-top: 5mm; }
.hsp-pg .hsp-p-policy { padding: 0 6mm; }
.hsp-pg .hsp-pp-first { padding-top: 4mm; }
.hsp-pg .hsp-pp-last { padding-bottom: 7mm; }
.hsp-pg .hsp-p-policy p { margin: 0; text-align: center; font-weight: 700; font-size: 15pt; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.hsp-pg .hsp-p-goal { display: flex; gap: 3mm; padding: 0 4mm 3.5mm; font-size: 13pt; line-height: 1.6; }
.hsp-pg .hsp-p-gn { flex: 0 0 8mm; text-align: right; }
.hsp-pg .hsp-p-gt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }
.hsp-pg .hsp-p-gt p { margin: .5mm 0 0; font-size: 11pt; line-height: 1.55; color: #333; }
.hsp-pg .hsp-p-none { padding: 3mm 4mm; font-size: 10.5pt; color: #444; }
.hsp-pg .hsp-p-sign { padding-top: 12mm; }
.hsp-pg .hsp-p-date { text-align: center; font-size: 13pt; margin-bottom: 13mm; }
.hsp-pg .hsp-p-sigrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8mm 6mm; }
.hsp-pg .hsp-p-sg { display: flex; align-items: flex-end; gap: 2.5mm; font-size: 12pt; white-space: nowrap; }
.hsp-pg .hsp-p-lbl { white-space: normal; overflow-wrap: anywhere; max-width: 110mm; }   /* 직책(최대 40자)이 길어도 서명란이 넘치지 않게 줄바꿈 */
.hsp-pg .hsp-p-nm { letter-spacing: .1em; min-width: 14mm; }
.hsp-pg .hsp-p-ul { position: relative; display: inline-block; width: 30mm; height: 9mm; border-bottom: .5pt solid #555; }
.hsp-pg .hsp-p-img { position: absolute; left: 0; bottom: .6mm; height: 15mm; width: auto; max-width: 40mm; object-fit: contain; }
.hsp-pg .hsp-p-h2 { margin: 0; padding: 1mm 0 5mm; font-family: "Gulim", "굴림", "Malgun Gothic", sans-serif; font-size: 17pt; font-weight: 700; letter-spacing: .12em; border-bottom: 1.4pt solid #111; }
.hsp-pg .hsp-p-h2 small { font-size: 10pt; font-weight: 400; letter-spacing: 0; margin-left: 3mm; }
.hsp-pg .hsp-p-h3 { margin: 0; padding: 5mm 0 2mm; font-family: "Gulim", "굴림", "Malgun Gothic", sans-serif; font-size: 11.5pt; font-weight: 700; }
.hsp-pg .hsp-t { width: 170mm; border-collapse: collapse; table-layout: fixed; font-size: 8.5pt; line-height: 1.35; }
.hsp-pg .hsp-t th, .hsp-pg .hsp-t td { border: .75pt solid #111; padding: 1.2mm 1.4mm; text-align: left; vertical-align: middle; overflow-wrap: anywhere; word-break: keep-all; }
.hsp-pg .hsp-t th { background: #efefef; text-align: center; font-weight: 700; font-size: 8.5pt; }
.hsp-pg .hsp-t td.c { text-align: center; }
.hsp-pg .hsp-pf { position: absolute; left: 20mm; right: 20mm; bottom: 8mm; font-size: 8pt; color: #333; border-top: .5pt solid #777; padding-top: 1.4mm; line-height: 1.45; }
.hsp-pg .hsp-pf-r { display: flex; justify-content: space-between; gap: 6mm; }
.hsp-pg .hsp-pf-s { color: #666; }
.hsp-pg .hsp-pf-n { margin-top: .6mm; font-weight: 700; color: #000; font-size: 8.5pt; }

/* ---------- 누르는 칸은 높이 40px 이상(모바일 기준) ---------- */
body.hs-mod-hs-policy .btn-sm, body.hs-mod-hs-policy .hs-subtabs button { min-height: 40px; }
body.hs-mod-hs-policy .hsp-doclink { display: inline-flex; align-items: center; min-height: 40px; }

/* ---------- 2026-10-13 게시 문서(PDF·이미지) 방식 — 상세에서 올려 둔 공식 문서를 크게 ---------- */
.hsp-docv { padding: 0; overflow: hidden; margin: 0 0 14px; }
.hsp-docv-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.hsp-docv-name { min-width: 0; display: flex; flex-direction: column; }
.hsp-docv-name b { overflow-wrap: anywhere; font-size: 14.5px; }
.hsp-docv-name i { font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.hsp-docv-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.hsp-docv-body { background: #fff; padding: 10px; }
.hsp-docv-frame { display: block; width: 100%; height: 78vh; min-height: 520px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.hsp-docv-imgwrap { display: block; text-align: center; cursor: zoom-in; }
.hsp-docv-img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 6px; }
.hsp-docv-hint { margin: 6px 2px 0; }
.hsp-memo { margin: 0 0 12px; padding: 0 4px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.hsp-acts-b { margin: 0 0 14px; }
.hsp-legacy { margin: 12px 0 14px; padding: 10px 14px; }
.hsp-legacy > summary { cursor: pointer; font-weight: 700; color: var(--ink-2); min-height: 40px; display: flex; align-items: center; }
.hsp-post .hsp-pc1, .hsp-post .hsp-pc2 { padding: 12px 14px 14px; margin: 0 0 14px; }
.hsp-post .hsp-prev { margin-top: 12px; }
@media (max-width: 640px) {
  .hsp-docv-frame { height: 70vh; min-height: 420px; }
  .hsp-docv-bar { padding: 10px; }
  .hsp-docv-btns .btn { flex: 1 1 auto; }
}
.hsp-docv-btns .btn { text-decoration: none; }