/* =============================================================================
   화재예방 · 비상사태 시나리오 — 목록 · 상세 · 자위소방대 편성 관리 (2026-10-20 신규) — js/fire-scenario.js · -view.js · -units.js
   - 접두어 fscn-. 구조와 색은 css/fire.css 의 .fire-* (표 · 필터 · 배지 · 상세 · 감사 목록)와 app.css 변수를 그대로 쓴다.
   - 목록: PC 표 → 모바일(≤820px) 카드. 누르는 곳 44px 이상. 작성 화면은 css/fire-scenario-form.css, 인쇄 문서는 css/fire-scenario-print.css.
   - 2026-10-21: 단계 유형 Badge(.fscn-tp · .fscn-tp-setup/response/inject/none — 작성·상세 공용)와 상세의 단계별 상황 / 시나리오 Timeline(.fscn-tl · .fscn-tv-*)을 이 파일이 가진다.
   - 이 파일은 css/fire.css 뒤 · css/theme-apple.css 앞에 불러온다. 맨 아래 @media screen 블록이 화면 전용 Apple 톤이다.
   ========================================================================== */

/* ── 목록: 위 도구줄 ── */
.fscn-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:10px;}
.fscn-bar-note{flex:1 1 280px;min-width:0;margin:0;font-size:14px;line-height:1.55;color:var(--ink-2);}
.fscn-bar-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.fscn-bar-btns:empty{display:none;}
.fscn-bar-btns .btn{text-decoration:none;}

/* ── 목록: 표(PC) ── */
.fscn-table .fire-tr{grid-template-columns:minmax(130px,2fr) 100px minmax(70px,1fr) minmax(80px,1.2fr) 78px 64px 78px 88px;gap:8px;}
@media (min-width:1100px){
  .fscn-table .fire-tr{grid-template-columns:minmax(200px,2.4fr) 112px minmax(110px,1.2fr) minmax(140px,1.6fr) 92px 84px 92px 112px;gap:10px;}
}
.fscn-c-title .fire-tt{margin-right:4px;}
.fscn-ver{min-height:20px;padding:0 6px;font-size:12px;vertical-align:1px;}
.fscn-c-type .fire-badge{white-space:normal;text-align:center;line-height:1.25;}
.fscn-c-cause{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.fscn-c-st{text-align:right;}
.fscn-c-st small{margin-top:2px;}
.fscn-lab{display:none;}

/* ── 상세 ── */
.fire-d-top.fscn-top .fire-adm{flex:1 1 auto;justify-content:flex-end;}
.fscn-d .fire-sec h3{font-size:17px;}
.fscn-dl dt{flex-basis:96px;}
.fscn-pw{white-space:pre-wrap;overflow-wrap:anywhere;}
.fscn-no{display:flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border:1px solid var(--mint);border-radius:50%;background:var(--mint-tint);color:var(--mint-ink);font-size:13.5px;font-weight:800;line-height:1;}
/* 단계 유형 Badge — SHS.fireScn.tl.badge (작성 · 상세 공용). 유형 이름 글자를 항상 같이 그린다(색만으로 구분하지 않는다).
   색은 기존 토큰만: 설정상황=파랑(--ap-blue · --mint-tint) · 대응=초록(다른 업무 화면의 '완료·정상' 배지와 같은 값) · 주입상황=주황~빨강(--red-*) · 유형 미지정=회색 점선 */
.fscn-tp{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:24px;padding:1px 10px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:13px;font-weight:800;line-height:1.3;white-space:nowrap;vertical-align:middle;}
.fscn-tp-setup{background:var(--mint-tint);color:var(--ap-blue);border-color:var(--ap-blue-focus);}
.fscn-tp-response{background:#e6f6ec;color:#17653a;border-color:#86cda0;}
.fscn-tp-inject{background:var(--red-tint);color:var(--red-ink);border-color:var(--red);}
.fscn-tp-none{border-style:dashed;}
/* 2. 단계별 상황 / 시나리오 — Timeline 하나. 카드 맨 윗줄 = 번호 + 유형 Badge + 제목(모바일은 제목이 다음 줄). 유형이 섞여도 한 목록 */
.fscn-time{display:inline-flex;align-items:center;min-height:24px;padding:1px 9px;border:1px solid var(--line-strong);border-radius:5px;background:var(--surface-2);font-size:13px;font-weight:800;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums;}
.fscn-d .fscn-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.fscn-d .fscn-tv{margin:0;padding:0;min-width:0;}
.fscn-tv-c{position:relative;min-width:0;padding:10px 14px 11px;border:1px solid var(--line);border-left:4px solid var(--line-strong);border-radius:10px;background:var(--surface);}
.fscn-tv-setup>.fscn-tv-c{border-left-color:var(--ap-blue);}
.fscn-tv-response>.fscn-tv-c{border-left-color:#17653a;}
.fscn-tv-inject>.fscn-tv-c{border-left-color:var(--red-ink);}
.fscn-tv-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;}
.fscn-tv-t{flex:1 1 12em;min-width:0;font-size:16px;font-weight:800;line-height:1.45;overflow-wrap:anywhere;}
.fscn-tv-d{margin-top:8px;font-size:15.5px;line-height:1.65;}
.fscn-tv-mr{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere;}
.fscn-tv-m{min-width:0;}
.fscn-tv-m b,.fscn-tv-n b{margin-right:4px;font-weight:700;color:var(--ink);}
.fscn-tv-n{margin-top:6px;font-size:14px;line-height:1.6;color:var(--ink-2);}
.fscn-legacy{padding:8px 12px;font-size:13.5px;font-weight:600;line-height:1.5;}
@media (min-width:821px){   /* PC: 번호를 카드 왼쪽 줄(rail)에 두고 세로선으로 잇는다 */
  .fscn-d .fscn-tl{gap:0;}
  .fscn-d .fscn-tv{position:relative;padding:0 0 12px 44px;}
  .fscn-d .fscn-tv:last-child{padding-bottom:0;}
  .fscn-d .fscn-tv:not(:last-child)::before{content:"";position:absolute;left:15px;top:41px;bottom:-5px;width:2px;background:var(--line);}
  .fscn-tv-h .fscn-no{position:absolute;left:-48px;top:6px;width:32px;height:32px;font-size:14px;}
}
/* 조직별 임무 */
.fscn-roles{list-style:none;margin:0;padding:0;}
.fscn-role{padding:10px 0;border-top:1px solid var(--line);}
.fscn-role:first-child{border-top:0;padding-top:0;}
.fscn-role.is-off{opacity:.65;}
.fscn-role-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-bottom:6px;}
.fscn-role-h b{font-size:16px;overflow-wrap:anywhere;}
.fscn-orglink{margin:10px 0 0;font-size:14px;color:var(--ink-2);}
.fscn-orglink a{color:var(--mint-ink);font-weight:700;}
/* 표(장비 · 연락처) — 모바일에서는 행이 카드로 바뀐다 */
.fscn-vtbl-w{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.fscn-vtbl{width:100%;border-collapse:collapse;font-size:14.5px;}
.fscn-vtbl th{padding:8px 10px;border-bottom:1px solid var(--line-strong);background:var(--surface-2);font-size:13.5px;font-weight:800;text-align:left;color:var(--ink-2);white-space:nowrap;}
.fscn-vtbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere;}
.fscn-cthead{margin:0 0 8px;}
.fscn-cthead .btn{text-decoration:none;}
.fscn-vnote{margin:8px 0 0;}
/* 평가 포인트 */
.fscn-vchk{list-style:none;margin:0;padding:0;}
.fscn-vchk li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.6;overflow-wrap:anywhere;}
.fscn-vchk li:first-child{border-top:0;}
.fscn-vchk li::before{content:"";flex:0 0 18px;width:18px;height:18px;margin-top:3px;border:2px solid var(--line-strong);border-radius:4px;background:#fff;}
/* 첨부자료 */
.fscn-files + .fscn-files{margin-top:18px;}

/* ── 자위소방대 편성 관리 ── */
.fscn-uadd{margin:0 0 14px;padding:12px 12px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);}
.fscn-uadd .field{margin-bottom:10px;}
.fscn-ulist{list-style:none;margin:0;padding:0;}
.fscn-unit{display:flex;align-items:flex-start;gap:10px 12px;padding:12px 0;border-top:1px solid var(--line);}
.fscn-unit:first-child{border-top:0;}
.fscn-unit .fscn-no{margin-top:1px;}
.fscn-unit-main{flex:1 1 220px;min-width:0;}
.fscn-unit-name{font-size:16.5px;overflow-wrap:anywhere;}
.fscn-unit-mis{margin-top:3px;font-size:14.5px;line-height:1.6;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;}
.fscn-unit-btns{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px;}
.fscn-unit-btns .fire-ib:disabled{opacity:.4;cursor:default;}
.fscn-unit.is-edit{flex-wrap:wrap;}
.fscn-unit.is-edit .fscn-unit-main{flex:1 1 100%;}
.fscn-unit.is-edit .field{margin-bottom:8px;}
.fscn-unit.is-off .fscn-unit-name{color:var(--ink-2);}
.fscn-uoff{margin:14px 0 0;}
.fscn-empty-act{margin-top:12px;}
.fscn-units .fire-grid2{align-items:start;}

/* ── 모바일 ── */
@media (max-width:820px){
  .fscn-bar-btns{width:100%;}
  .fscn-bar-btns .btn{flex:1 1 100%;}
  .fscn-table .fire-tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"title title st" "type place place" "cause cause cause" "cdate who edate";align-items:start;}
  .fscn-c-title{grid-area:title;} .fscn-c-st{grid-area:st;text-align:right;} .fscn-c-type{grid-area:type;}
  .fscn-c-place{grid-area:place;color:var(--ink-2);} .fscn-c-cause{grid-area:cause;color:var(--ink-2);-webkit-line-clamp:3;}
  .fscn-c-cdate{grid-area:cdate;} .fscn-c-who{grid-area:who;text-align:center;} .fscn-c-edate{grid-area:edate;text-align:right;}
  .fscn-c-cdate,.fscn-c-who,.fscn-c-edate{font-size:13px;color:var(--ink-2);}
  .fscn-lab{display:inline;color:var(--ink-2);}
  .fscn-dl dt{flex-basis:80px;}
  .fscn-tv-c{padding:10px 12px 11px;}
  .fscn-tv-t{flex-basis:100%;}   /* 번호 + 유형 Badge 가 카드 맨 앞, 제목은 그 다음 줄 */
  .fscn-vtbl-w{overflow:visible;}
  .fscn-vtbl,.fscn-vtbl tbody,.fscn-vtbl tr,.fscn-vtbl td{display:block;}
  .fscn-vtbl thead{display:none;}
  .fscn-vtbl tr{margin-bottom:8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;}
  .fscn-vtbl td{display:flex;gap:10px;padding:3px 0;border:0;}
  .fscn-vtbl td::before{content:attr(data-label);flex:0 0 76px;font-size:13.5px;font-weight:700;color:var(--ink-2);}
  .fscn-vtbl td.is-empty{display:none;}
  .fscn-cthead .btn{width:100%;}
  .fscn-unit{flex-wrap:wrap;}
  .fscn-unit-btns{flex:1 1 100%;justify-content:flex-start;}
  .fscn-unit-btns .btn{min-height:44px;}
}
@media (max-width:430px){
  .fscn-d .fire-d-title{font-size:20px;}
  .fscn-unit-btns .btn{flex:1 1 calc(50% - 6px);}
}

/* ── 화면 전용 Apple 톤(theme-apple-field.css 의 .fire-* 덮어쓰기와 같은 값) — 인쇄에는 적용하지 않는다 ── */
@media screen{
  .fscn-uadd{border-radius:var(--ap-r-lg);border-color:transparent;background:var(--ap-parch);}
  .fscn-tv-c{border-radius:var(--ap-r-md);}
  .fscn-vtbl th{background:var(--ap-parch);font-weight:600;color:var(--ap-ink-60);}
  .fscn-vtbl td,.fscn-vchk li,.fscn-role,.fscn-unit{border-color:var(--ap-divider);}
  .fscn-no{font-weight:600;}
  .fscn-time,.fscn-tv-t,.fscn-role-h b{font-weight:600;}
  .fscn-tp{font-weight:600;}
  .fscn-orglink a{color:var(--ap-blue);font-weight:600;}
  .fscn-d .fscn-tv:not(:last-child)::before{background:var(--ap-hair);}
}
@media screen and (max-width:820px){
  .fscn-vtbl tr{border-radius:var(--ap-r-lg);border-color:var(--line);}
}

@media (min-width:821px){ .fscn-table .fire-th>span:last-child{text-align:right;} }   /* 상태 열 머리글을 값(오른쪽 정렬)과 맞춘다 */