/* =============================================================================
   안전작업허가서 — 당일 최초 가스측정 · 작업중 측정 · 연장 전자승인 · 종료 전자서명 (2026-10-12)
   접두사 .wpl-*  (js/wp-live*.js). 화면 전용 — 공식 출력 양식(.wp-doc)은 건드리지 않는다.
   모바일 우선(375/390/430): 터치 칸 44px 이상, 가로 넘침 없음, 모달은 공통 .modal-tall(본문만 스크롤) 사용.
   ========================================================================== */

/* ---- 배지: 새 상태 closing + 단계(phase)별 색 (기존 .wp-badge.s-<status> 위에 얹는다) ---- */
.wp-badge.s-closing{background:#fff1d6;color:#8a4b00;border-color:#e0a85a;}
.wp-badge.ph-WAIT_INITIAL{background:#fff1d6;color:#8a4b00;border-color:#e0a85a;}
/* 2026-10-30: 승인중 배지에 미승인 담당자(예: '안전관리자 · 공사담당자 승인중')가 들어가 길어질 수 있다 — 글자가 잘리지 않게 폭을 글자에 맞춘다.
   좁은 화면(휴대폰)에서는 허가번호 옆에 들어가지 않으면 배지가 아랫줄 오른쪽으로 내려가고(카드 머리줄 줄바꿈), 그래도 넘치면 띄어쓰기에서만 줄바꿈한다(‘승인중’ 같은 낱말은 끊지 않음). */
.wp-card-h{flex-wrap:wrap;row-gap:4px;}
.wp-card-h .wp-no{white-space:nowrap;}
.wp-card-h .wp-badge{margin-left:auto;}
.wp-badge.ph-APPROVING{white-space:normal;word-break:keep-all;text-align:center;line-height:1.3;max-width:100%;border-radius:14px;}
.wp-badge.ph-EXT_PENDING{background:#e7f0ff;color:#1a4a8a;border-color:#7aa5d8;}
.wp-badge.ph-CLOSING{background:#fff1d6;color:#8a4b00;border-color:#e0a85a;}
.wp-badge.ph-WORKING{background:#e5f6e8;color:#1c6b2e;border-color:#6cbf7f;}

/* ---- 패널 공통 ---- */
.wpl-panel h3{margin:0 0 6px;font-size:16px;}
.wpl-lead{margin:2px 0 10px;font-size:13.5px;line-height:1.5;color:var(--ink-2);}
.wpl-sub{margin-top:4px;font-size:12.5px;font-weight:400;line-height:1.45;}
.wpl-kv{display:flex;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:14px;}
.wpl-kv span{flex:0 0 40%;color:var(--ink-2);}
.wpl-kv b{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
.wpl-h4{margin:14px 0 8px;font-size:14px;}
.wpl-h4 span{font-weight:400;font-size:12.5px;color:var(--ink-2);}
.wpl-empty{margin:6px 0;font-size:13.5px;color:var(--ink-2);}
.wpl-limits{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2);}
.wpl-btns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;}
.wpl-btns .btn{flex:1 1 150px;min-height:48px;white-space:normal;line-height:1.25;}
@media (min-width:640px){ .wpl-btns .btn{flex:0 1 auto;min-width:200px;} }

/* ---- 안내 상자 ---- */
.wpl-ok,.wpl-block,.wpl-info{border-radius:var(--radius);padding:10px 12px;margin:8px 0;font-size:14px;line-height:1.5;overflow-wrap:anywhere;}
.wpl-ok{background:#e5f6e8;border:1px solid #6cbf7f;color:#1c6b2e;font-weight:700;}
.wpl-block{background:var(--red-tint);border:1px solid var(--red);color:var(--red-ink);}
.wpl-block b{display:block;}
.wpl-block div{font-weight:600;}
.wpl-info{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-weight:500;}
.wpl-warnbox{border:2px solid var(--red);background:var(--red-tint);color:var(--red-ink);border-radius:var(--radius);padding:12px;line-height:1.55;white-space:normal;}
.wpl-warnbox div{margin-top:6px;font-weight:700;}
.wpl-warnline{margin-top:8px;padding:8px 10px;border-radius:6px;background:var(--red-tint);color:var(--red-ink);border:1px solid var(--red);font-size:13px;font-weight:700;line-height:1.45;}
.wpl-voidline{margin-top:6px;font-size:12.5px;color:var(--ink-2);}

/* ---- 가스 측정 이력 카드 ---- */
.wpl-recs,.wpl-exts{display:flex;flex-direction:column;gap:10px;}
.wpl-rec{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--white);}
.wpl-rec.warn{border:2px solid var(--red);background:#fffaf8;}
.wpl-rec.void{background:var(--surface-2);color:var(--ink-2);}
.wpl-rec.void .wpl-vals b,.wpl-rec.void .wpl-rec-p{text-decoration:line-through;}
.wpl-rec-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:14px;}
.wpl-rec-p{margin:4px 0 6px;font-size:14px;font-weight:700;overflow-wrap:anywhere;}
.wpl-rec-m{margin-top:6px;font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere;}
.wpl-tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid var(--line-strong);white-space:nowrap;}
.wpl-tag.t-INITIAL{background:#e7f0ff;color:#1a4a8a;border-color:#7aa5d8;}
.wpl-tag.t-WORK{background:#e5f6e8;color:#1c6b2e;border-color:#6cbf7f;}
.wpl-tag.t-EXTENSION{background:#fff1d6;color:#8a4b00;border-color:#e0a85a;}
.wpl-tag.t-void{background:#ececec;color:#555;}
.wpl-vals{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
@media (min-width:520px){ .wpl-vals{grid-template-columns:repeat(4,1fr);} }
.wpl-v{position:relative;display:flex;align-items:baseline;gap:4px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);min-width:0;}
.wpl-v span{font-size:12.5px;color:var(--ink-2);font-weight:700;}
.wpl-v b{font-size:19px;font-variant-numeric:tabular-nums;}
.wpl-v i{font-size:12px;font-style:normal;color:var(--ink-2);}
.wpl-v.bad{background:var(--red-tint);border:2px solid var(--red);color:var(--red-ink);}
.wpl-v.bad span,.wpl-v.bad i{color:var(--red-ink);}
.wpl-v em{margin-left:auto;font-style:normal;font-size:15px;}
.wpl-panel .wpl-voidbtn.btn{margin-top:8px;min-height:44px;padding:6px 16px;}

/* ---- 연장 카드 ---- */
.wpl-ext{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--white);}
.wpl-ext.st-requested{border:2px solid #7aa5d8;}
.wpl-ext.st-rejected,.wpl-ext.st-cancelled{background:var(--surface-2);}
.wpl-ext-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;font-size:15px;}
.wpl-ext-m{margin-top:4px;font-size:13px;color:var(--ink-2);overflow-wrap:anywhere;}
.wpl-es{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid var(--line-strong);white-space:nowrap;}
.wpl-es.es-requested{background:#e7f0ff;color:#1a4a8a;border-color:#7aa5d8;}
.wpl-es.es-approved{background:#e5f6e8;color:#1c6b2e;border-color:#6cbf7f;}
.wpl-es.es-rejected{background:var(--red-tint);color:var(--red-ink);border-color:var(--red);}
.wpl-es.es-cancelled{background:#ececec;color:#555;}
.wpl-sgs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 2px;}
.wpl-sg{border:1px solid var(--line);border-radius:var(--radius);padding:8px;text-align:center;min-width:0;}
.wpl-sg.ok{border-color:#6cbf7f;background:#f3fbf4;}
.wpl-sg.turn{border:2px solid #7aa5d8;background:#f2f7ff;}
.wpl-sg-r{font-weight:800;font-size:13px;margin-bottom:4px;}
.wpl-sg-st{font-weight:800;font-size:13px;color:#1b7a34;margin-bottom:4px;}
.wpl-sg-st.wait{color:#b25e00;}
.wpl-sg img{display:block;margin:0 auto 4px;max-width:100%;height:46px;object-fit:contain;background:#fff;border:1px solid var(--line);}
.wpl-sg-m{font-size:12px;color:var(--ink-2);line-height:1.4;overflow-wrap:anywhere;}
.wpl-closesig{margin-top:10px;}
.wpl-closesig img{display:block;max-width:240px;width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:6px;}

/* ---- 모달 공통 ---- */
.wpl-modal{max-width:480px;}
.wpl-body{white-space:normal;padding-bottom:10px;}
.wpl-btnrow{flex-direction:row;gap:8px;}
.wpl-btnrow .btn{flex:1 1 0;width:auto;min-width:0;min-height:48px;white-space:normal;line-height:1.25;}
.wpl-btnrow .btn-primary,.wpl-btnrow .btn-danger{flex-grow:1.6;}
.wpl-body .wpl-info{margin-top:0;}
.wpl-body .field>label{display:block;}
.wpl-req{font-style:normal;font-size:11.5px;font-weight:700;color:var(--red-ink);margin-left:4px;}
.wpl-ferr{margin:4px 0 6px;color:var(--red-ink);font-weight:700;font-size:13.5px;line-height:1.4;}
.wpl-body .wpl-serr{margin:8px 0 0;}
.wpl-more{margin:4px 0 10px;}
.wpl-more summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;font-size:14px;}
.wpl-more textarea{width:100%;font-size:16px;padding:10px;border:1px solid var(--line-strong);border-radius:var(--radius);}
.wpl-body input[type=time]{width:100%;min-height:50px;font-size:18px;padding:8px 10px;}

/* ---- 가스 입력 모달: 큰 숫자칸 ---- */
.wpl-ngrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-bottom:10px;}
.wpl-nf label{display:block;font-weight:800;font-size:15px;margin-bottom:4px;}
.wpl-nf label i{font-style:normal;font-weight:600;font-size:12.5px;color:var(--ink-2);}
.wpl-body input.wpl-num{width:100%;min-height:54px;font-size:22px;font-weight:700;text-align:right;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);font-variant-numeric:tabular-nums;}
.wpl-nhint{margin-top:3px;font-size:12px;color:var(--ink-2);min-height:15px;}
.wpl-body input.wpl-num::placeholder{font-size:14px;font-weight:400;color:#9a9aa0;}
.wpl-body input.wpl-num:focus{outline:2px solid var(--mint);outline-offset:0;border-color:var(--mint);}

/* ---- 서명 모달 ---- */
.wpl-sum{background:var(--surface-2);border-radius:var(--radius);padding:8px 12px;margin-bottom:10px;}
.wpl-sum-r{display:flex;gap:10px;padding:3px 0;font-size:13.5px;line-height:1.45;}
.wpl-sum-r span{flex:0 0 76px;color:var(--ink-2);}
.wpl-sum-r b{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-weight:700;}
.wpl-st{margin:0 0 10px;font-size:14px;line-height:1.55;}
.wpl-ngrid2{display:grid;grid-template-columns:1fr;gap:0 10px;}
@media (min-width:480px){ .wpl-ngrid2{grid-template-columns:1fr 1fr;} }
.wpl-consent{display:flex;align-items:flex-start;gap:10px;min-height:48px;padding:10px 12px;margin:2px 0 8px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;cursor:pointer;font-size:14px;line-height:1.45;}
.wpl-consent input{flex:0 0 auto;width:22px;height:22px;margin:0;}
.wpl-saved{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin:8px 0;}
.wpl-sv-h{font-weight:800;font-size:14px;margin-bottom:6px;}
.wpl-sv-img{min-height:40px;font-size:13px;color:var(--ink-2);}
.wpl-sv-img img{display:block;max-width:100%;max-height:110px;border:1px solid var(--line);border-radius:8px;background:#fff;}
.wpl-saved .btn-block{min-height:48px;margin-top:8px;}
.wpl-sv-none{font-size:13px;color:var(--ink-2);line-height:1.5;}
.wpl-sv-or{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:13px;margin:12px 0 2px;}
.wpl-sv-or::before,.wpl-sv-or::after{content:'';flex:1;height:1px;background:var(--line);}
.wpl-padhead{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin:10px 0 4px;}
.wpl-padlabel{font-weight:700;font-size:14px;}
.wpl-modal .wpl-padhead .btn-sm{min-height:44px;padding:4px 16px;}
.wpl-padbox{position:relative;width:100%;aspect-ratio:2/1;border:2px dashed var(--line-strong);border-radius:var(--radius);background:#fff;margin:4px 0 6px;}
.wpl-pad{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;border-radius:inherit;}
.wpl-padhint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b7b7bd;font-size:18px;pointer-events:none;}
.wpl-note{margin:6px 0;font-size:12.5px;line-height:1.5;color:var(--ink-2);}

@media print{ .wpl-panel,.wpl-wrap{display:none !important;} }

/* 2026-10-13: 작업 중 '지금 할 일' 묶음(작업종료 · 연장 서명 · 연장 요청)과 그 아래 '관리' 구분 */
.wp-doing{display:flex;flex-direction:column;gap:8px;border:2px solid #7aa5d8;background:#f2f7ff;border-radius:var(--radius);padding:10px;}
.wp-doing-h{font-weight:800;font-size:13px;color:#1d4f91;}
.wp-mgmt-h{font-size:12px;color:var(--ink-2);margin:6px 2px 0;}

/* 2026-10-14: 사번 로그인 안내(공통 서명 링크 화면) · 저장된 서명 없음 안내 버튼 */
.wpl-sv-none{margin:2px 0 8px;}
.wpl-saved .wpl-sv-login,.wpl-saved .wpl-sv-reg{min-height:44px;margin-top:4px;}
.wpl-emplogin{margin-left:6px;vertical-align:middle;}
.wpl-loginmodal{max-width:420px;}
.wp-ag-who{margin:6px 0 8px;}

/* ---- 2026-10-16: 최초측정 3 Point · 위험지역 가스점검 · 공사업체 '현재 단계' ---- */
.wpl-pts{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;}
.wpl-pt-chip{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:800;border:1px solid var(--red);background:var(--red-tint);color:var(--red-ink);white-space:nowrap;}
.wpl-pt-chip.ok{border-color:#6cbf7f;background:#e5f6e8;color:#1c6b2e;}
.wpl-pt{margin:10px 0;padding:8px 10px 4px;border:1px solid var(--line-strong);border-radius:var(--radius);min-width:0;}
.wpl-pt legend{padding:0 6px;font-size:14.5px;font-weight:800;}
.wpl-pt legend i{font-style:normal;font-weight:600;color:var(--ink-2);margin-left:4px;}
.wpl-pt .wpl-ngrid{margin:4px 0 6px;}
.wpl-gasmodal3 .wpl-pt .wpl-num{height:48px;font-size:19px;}
.wpl-hazard h3 .wpl-req,.wpl-hazard h3 em{font-style:normal;margin-left:6px;}
.wpl-next{border:2px solid #7aa5d8;background:#f7faff;}
.wpl-next.ro{border:1px solid var(--line);background:var(--surface-2);}
.wpl-next .wpl-info{background:var(--white);}