/* =============================================================================
   STOP활동 (2026-10-09)   js/stop-*.js 와 한 쌍. 접두사 .stop-* (화면) · .stp-* (인쇄 문서)
   화면은 앱 토큰(--mint 등)과 공통 css/hs.css 를 쓰고, 인쇄 문서는 흑백 공식 문서 모양(Apple 스타일 아님).
   ========================================================================== */
.stop-seq { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .2px; }
.stop-req { display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 700; color: #b42318; }
.stop-hot { color: #b42318; font-weight: 800; }
.stop-danger { color: #b42318; border-color: #f0a8a1; }
.stop-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--mint-tint); color: var(--mint-ink); border: 1px solid transparent; white-space: nowrap; }
.stop-tag-g { background: #fff4d6; color: #7a5200; }

/* ---- 직원 검색 입력칸(직원별 이력) — 공통 입력칸 모양(.field input)과 같게: 44px · 1px 선 · 둥근 모서리 · 16px(iOS 확대 방지) ---- */
#stpSearch .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; }
#stpSearch .staff-combo-input:focus { outline: 2px solid var(--mint); outline-offset: 0; border-color: var(--mint); }

/* ---- 필터 ---- */
.stop-filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 8px; }
.stop-fr { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 0 0 8px; }
.stop-fr:last-child { margin-bottom: 0; }
.stop-fr-end { justify-content: space-between; align-items: center; }
.stop-fl { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); flex: 1 1 150px; min-width: 0; }
.stop-fl input, .stop-fl 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; font-weight: 400; width: 100%; min-width: 0; }
.stop-dates { display: flex; align-items: center; gap: 6px; }
.stop-dates i { font-style: normal; color: var(--ink-2); }
.stop-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: #fff; }
.stop-seg button { border: 0; background: transparent; padding: 0 14px; min-height: 40px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.stop-seg button.is-on { background: var(--mint); color: #fff; }

/* ---- 목록 ---- */
.stop-list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* 목록을 다시 불러오는 동안만 흐리게 — STOP 목록 상자(#stpList)에만. 전역 .is-loading 에 걸지 않는다(다른 업무 화면의 같은 이름 클래스를 흐리게 하지 않음). */
#stpList.is-loading { opacity: .55; transition: opacity .12s; }
.stop-rowh, .stop-row { display: grid; grid-template-columns: minmax(150px, 1.05fr) minmax(120px, .9fr) minmax(150px, 1fr) minmax(0, 2.2fr) minmax(90px, .7fr); gap: 4px 12px; align-items: center; padding: 10px 14px; }
.stop-rowh { background: var(--surface-2); font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding-top: 8px; padding-bottom: 8px; }
.stop-row { border-top: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 14px; }
.stop-row:hover { background: var(--mint-tint); }
.stop-row:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
.stop-row.is-void { opacity: .62; }
.stop-row.is-void .stop-c-text { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .35); }
.stop-c { min-width: 0; }
.stop-c-id { display: flex; flex-direction: column; gap: 2px; }
.stop-when { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.stop-c-who b { display: block; font-size: 15px; }
.stop-c-who i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stop-c-type { display: flex; flex-wrap: wrap; gap: 4px; }
.stop-c-text { color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; overflow-wrap: anywhere; }
.stop-c-text em { font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.stop-c-by { font-size: 13px; color: var(--ink-2); }
.stop-by-l { display: none; }

/* ---- 상세 ---- */
.stop-dls { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0; }
.stop-dl { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.stop-dl.is-wide { grid-column: 1 / -1; }
.stop-dl dt { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.stop-dl dd { margin: 0; overflow-wrap: anywhere; line-height: 1.5; }
.stop-voidban { margin-bottom: 12px; line-height: 1.55; }
.stop-hist { list-style: none; margin: 0; padding: 0; }
.stop-hist li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.stop-hist li:last-child { border-bottom: 0; }
.stop-hist-m { flex: 1 0 100%; font-size: 12.5px; color: var(--ink-2); }

/* ---- 반복위반 ---- */
.stop-rbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 6px; }
.stop-rb { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 10px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.stop-rb-l { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.stop-rb b { font-size: 26px; line-height: 1.1; }
.stop-rb b small { font-size: 13px; font-weight: 700; margin-left: 2px; color: var(--ink-2); }
.stop-rb-r { font-size: 12px; color: var(--ink-2); }
.stop-rb.is-hot { background: #fdecea; border-color: #f0a8a1; }
.stop-rb.is-hot b, .stop-rb.is-hot b small { color: #b42318; }
.stop-rep-h { font-size: 13px; font-weight: 700; margin: 8px 0 0; color: var(--ink-2); }
.stop-rep-n { margin: 6px 0 2px; display: flex; flex-wrap: wrap; gap: 6px; }
.stop-flag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fdecea; color: #a1281d; border: 1px solid #f0a8a1; font-size: 12.5px; font-weight: 800; }
.stop-flag-t { background: #fff4d6; color: #7a5200; border-color: #e5c36a; }
.stop-rep { margin-top: 10px; }
.stop-rep:empty { display: none; }
.stop-typenote { margin: 8px 2px 0; color: var(--ink-2); }
.stop-emp-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.stop-emp-n { font-size: 20px; }
.stop-total { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 0; color: var(--ink-2); }
.stop-total b { font-size: 34px; line-height: 1; color: var(--ink); }
.stop-typetbl { margin-top: 10px; }
.stop-typetbl tr.is-hot td { background: #fff7ed; }
.stop-inc { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; min-height: 40px; }
.stop-inc input { width: 20px; height: 20px; }
.stop-rep-row { cursor: pointer; }
.stop-rep-row:hover td, .stop-rep-row:focus td { background: var(--mint-tint); }

/* ---- 발급 폼 ---- */
.stop-form .field { margin-bottom: 14px; }
.stop-form textarea { width: 100%; resize: vertical; }
.stop-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stop-chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.stop-chip.is-on { background: var(--mint); border-color: var(--mint); color: #fff; }
.stop-chip:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.stop-ph { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 8px; }
.stop-ph:empty { display: none; }
.stop-phc { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.stop-phc img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stop-phx { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .65); color: #fff; font-size: 20px; line-height: 1; padding: 0; cursor: pointer; }
.stop-addph { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.stop-addph.is-off { opacity: .5; cursor: not-allowed; }
.stop-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.stop-file:disabled { cursor: not-allowed; }
.stop-sub .btn { min-height: 46px; }

/* ---- 유형 관리 ---- */
.stop-types { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stop-trow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.stop-trow:last-child { border-bottom: 0; }
.stop-trow.is-off .stop-tn b { color: var(--ink-2); text-decoration: line-through; }
.stop-tn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stop-ta { display: flex; gap: 6px; flex-wrap: wrap; }
.stop-ta .btn { min-height: 40px; min-width: 44px; }

/* ---- 좁은 화면 ---- */
@media (max-width: 860px) {
  .stop-rowh { display: none; }
  .stop-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'id by' 'who who' 'type type' 'text text'; padding: 12px 14px; gap: 5px 10px; }
  .stop-c-id { grid-area: id; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .stop-c-by { grid-area: by; text-align: right; }
  .stop-by-l { display: inline; font-size: 12px; }
  .stop-c-who { grid-area: who; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .stop-c-who b, .stop-c-who i { display: inline; }
  .stop-c-type { grid-area: type; }
  .stop-c-text { grid-area: text; }
  .stop-dls { grid-template-columns: minmax(0, 1fr); }
  .stop-dl { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .hs-mod-hs-stop .btn-sm { min-height: 44px; padding-left: 14px; padding-right: 14px; }
  .hs-mod-hs-stop .hs-fb-x { width: 40px; height: 40px; font-size: 24px; top: 2px; right: 2px; }
}
@media (max-width: 430px) {
  .stop-rb b { font-size: 22px; }
  .stop-rb { padding: 8px 4px 6px; }
  .stop-dl { grid-template-columns: 82px minmax(0, 1fr); gap: 8px; }
  .stop-seg { width: 100%; }
  .stop-seg button { flex: 1 1 0; padding: 0 4px; }
  .stop-fr-end { flex-direction: column; align-items: stretch; }
  .stop-fr-end .btn { width: 100%; min-height: 44px; }
  .stop-fl { flex: 1 1 100%; }
  .stop-sub { flex-direction: column; align-items: stretch; }
  .stop-sub .btn { width: 100%; }
  .stop-dates input { flex: 1 1 0; }
}

/* =============================================================================
   인쇄 문서 (공식 사내문서 모양: 흑백 · 표 · 맑은 고딕)  — #hsPrintHost 안에서만
   ========================================================================== */
#hsPrintHost .stp-doc { height: 100%; display: flex; flex-direction: column; font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 10.5pt; color: #000; }
#hsPrintHost .stp-doc.s-small { font-size: 9pt; }
#hsPrintHost .stp-doc.s-tiny { font-size: 8pt; }
#hsPrintHost .stp-main { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
#hsPrintHost .stp-no { text-align: right; font-size: 9.5pt; margin-bottom: 3mm; }
#hsPrintHost .stp-title { margin: 0 0 6mm; text-align: center; font-size: 22pt; font-weight: 800; letter-spacing: 2px; padding-bottom: 3mm; border-bottom: 2px solid #000; }
#hsPrintHost .stp-title-s { font-size: 17pt; margin-bottom: 5mm; }
#hsPrintHost .stp-voidnote { border: 1px solid #000; padding: 2mm 3mm; margin: 0 0 4mm; font-size: 9.5pt; font-weight: 700; }
#hsPrintHost .stp-void { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-24deg); font-size: 96pt; font-weight: 900; letter-spacing: 12px; color: rgba(0, 0, 0, .12); border: 8px solid rgba(0, 0, 0, .12); padding: 0 8mm; pointer-events: none; z-index: 2; white-space: nowrap; }
#hsPrintHost .stp-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
#hsPrintHost .stp-t th, #hsPrintHost .stp-t td { border: 1px solid #000; padding: 2.2mm 3mm; text-align: left; vertical-align: middle; line-height: 1.45; overflow-wrap: anywhere; }
#hsPrintHost .stp-t th { width: 28mm; background: #ececec; font-weight: 700; text-align: center; padding-left: 1mm; padding-right: 1mm; }
#hsPrintHost .stp-t td.stp-tall { height: 26mm; vertical-align: top; }
#hsPrintHost .stp-sm { font-size: .85em; }
#hsPrintHost .stp-phh { margin: 5mm 0 2mm; font-weight: 700; font-size: 10pt; }
#hsPrintHost .stp-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
#hsPrintHost .stp-ph figure { margin: 0; border: 1px solid #000; }
#hsPrintHost .stp-ph img { display: block; width: 100%; height: 47mm; object-fit: contain; background: #fff; max-width: 100%; }
#hsPrintHost .stp-ph.is-big img { height: 62mm; }
#hsPrintHost .stp-ch { margin: 4mm 0 2mm; padding: 1.5mm 3mm; background: #ececec; border: 1px solid #000; font-weight: 700; }
#hsPrintHost .stp-p { margin: 0 0 1.2mm; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
#hsPrintHost .stp-ph figcaption { font-size: 8.5pt; text-align: center; border-top: 1px solid #000; padding: 1mm 0; }
#hsPrintHost .stp-foot { flex: 0 0 auto; padding-top: 4mm; }
#hsPrintHost .stp-sign { width: 100%; border-collapse: collapse; table-layout: fixed; }
#hsPrintHost .stp-sign th, #hsPrintHost .stp-sign td { border: 1px solid #000; text-align: center; padding: 1.5mm; }
#hsPrintHost .stp-sign th { background: #ececec; font-weight: 700; font-size: 10pt; }
#hsPrintHost .stp-sign td { height: 20mm; vertical-align: bottom; }
#hsPrintHost .stp-sign td span { font-size: 8.5pt; color: #555; }
#hsPrintHost .stp-note { margin-top: 3mm; font-size: 8pt; color: #333; text-align: center; }
#hsPrintHost .stp-t + .stp-ph { margin-top: 4mm; }