/* =============================================================================
   화재예방 · 비상사태 시나리오 작성/수정 화면 (js/fire-scenario-form.js · fire-scenario-form2.js) — 접두어 fscf-
   - 공통 부품(.panel .field .btn .banner label.opt)과 css/fire.css(.fire-panel .fire-grid2 .fire-fixed .fire-dl .fire-empty)를 그대로 쓰고, 이 파일은 단계 막대 · 단계 Timeline 카드(유형 선택 포함) · 카드형 반복 항목 · 표→카드 변환만 더한다.
   - 모바일(375 · 390 · 430): 가로 넘침 없음 · 누르는 곳 44px 이상 · 입력칸 16px(iOS 확대 방지, 공통 .field 규칙). 단계 카드는 ≤820px 에서 STEP 번호+유형 Badge 가 맨 윗줄. 표(장비/자원)는 ≤640px 에서 카드로.
   - 색은 app.css 변수만 쓴다(유형 Badge 색 .fscn-tp-* 는 css/fire-scenario.css). css/fire.css 뒤, theme-apple.css 앞에서 불러온다.
   ========================================================================== */
.fscf{min-width:0;}
.fscf-ver{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:999px;background:var(--surface-2);font-size:13px;font-weight:800;color:var(--ink-2);vertical-align:3px;letter-spacing:0;}
.fscf-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.fscf-req{margin-left:2px;color:var(--red-ink);}
.fscf-used{margin-bottom:12px;}
.fscf-fld{position:relative;min-width:0;}
.fscf-cnt{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums;}
.fscf-hint{margin:4px 0 0;}
.fscf-info{margin-top:6px;padding-top:10px;border-top:1px solid var(--line);}

/* ── 단계 막대 ── */
.fscf-stepper{margin:0 0 14px;scroll-margin-top:calc(var(--hdr-h,0px) + 8px);}
.fscf-stepper ol{display:flex;gap:6px;margin:0;padding:0;list-style:none;}
.fscf-stepper li{flex:1 1 0;min-width:0;}
.fscf-st{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:6px 12px 6px 8px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);font:inherit;font-size:14.5px;font-weight:700;color:var(--ink-2);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.fscf-st-n{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;}
.fscf-st-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fscf-st.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.fscf-st.on .fscf-st-n{background:#fff;color:var(--ink);}
.fscf-st:focus-visible,.fscf-fold:focus-visible,.fscf-chip:focus-visible,.fscf-ib:focus-visible{outline:2px solid var(--mint);outline-offset:2px;}
@media (max-width:640px){
  .fscf-stepper li{flex:0 0 auto;}
  .fscf-stepper li.on{flex:1 1 auto;min-width:0;}
  .fscf-st:not(.on){width:44px;min-height:44px;padding:6px;justify-content:center;}
  .fscf-st:not(.on) .fscf-st-t{display:none;}
}

/* ── 카드형 반복 항목(단계 Timeline · 조직 임무) ── */
.fscf-item{min-width:0;margin:0 0 12px;border:1px solid var(--line);border-radius:var(--ap-r-md,12px);background:var(--surface);}
.fscf-ih{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;}
.fscf-item.is-open>.fscf-ih{border-bottom:1px solid var(--line);}
.fscf-ib-body{min-width:0;padding:12px 12px 2px;}
.fscf-no{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:28px;height:28px;padding:0 9px;border-radius:999px;background:var(--surface-2);font-size:13.5px;font-weight:800;white-space:nowrap;}
.fscf-fold{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;min-height:44px;padding:2px 4px 2px 0;border:0;background:none;font:inherit;text-align:left;color:var(--ink);cursor:pointer;}
.fscf-ttl{min-width:0;flex:0 1 auto;font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fscf-ttl.is-empty{font-weight:600;color:var(--ink-2);}
.fscf-sub{min-width:0;flex:1 1 0;font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fscf-caret{flex:0 0 auto;width:8px;height:8px;margin:0 6px 4px auto;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .12s;}
.fscf-step.is-open .fscf-caret{margin-bottom:-2px;transform:rotate(-135deg);}
.fscf-tools{display:flex;gap:6px;flex-wrap:wrap;}
.fscf-org-direct{margin-top:6px;}
@media (max-width:640px){ .fscf-ih{padding-left:10px;}
  .fscf-role>.fscf-ih{flex-wrap:wrap;}   /* 조직 카드: 태그 · 이동/삭제 단추는 윗줄, 조직 이름은 아랫줄에 전체가 보이게 */
  .fscf-role>.fscf-ih .fscf-rname{flex:1 1 100%;order:3;margin:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;}
  .fscf-role>.fscf-ih .fscf-tag{margin-right:auto;} }

/* ── ↑ ↓ 삭제 버튼(44px) · 추가 줄 ── */
.fscf-ops{display:flex;gap:6px;flex:0 0 auto;}
.fscf-ib{min-width:44px;height:44px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);font:inherit;font-size:18px;font-weight:800;line-height:1;color:var(--ink);cursor:pointer;}
.fscf-ib:disabled{opacity:.35;cursor:default;}
.fscf-del{font-size:14px;color:var(--red-ink);border-color:var(--red);}
@media (hover:hover){ .fscf-ib:not(:disabled):hover{background:var(--surface-2);} }
.fscf-add{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:4px 0 2px;}
.fscf-count{margin:0 0 8px;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.fscf-add .fscf-count{margin:0;}
.fscf-count b{color:var(--ink);}
.fscf-empty{margin:0 0 10px;}

/* ── 단계 ② 단계별 상황 / 시나리오(Timeline): 카드 · 유형 Badge · 유형 선택 · 단계 사이 추가 줄 ──
   Badge(.fscn-tp) 의 색·모양은 css/fire-scenario.css 가 정한다 — 여기서는 자리(줄바꿈 금지)만 잡고 새 색을 만들지 않는다. 글자(유형 이름)는 항상 같이 나온다. */
.fscf-lw>.fscf-step{margin-bottom:0;}   /* 카드 사이 간격은 [+ 이 위치에 단계 추가] 줄이 맡는다 */
.fscf-lw>.fscf-step+.fscf-add{margin-top:12px;}
.fscf-lw>.fscf-step+.fscf-step{margin-top:12px;}   /* 단계가 최대 개수(130)라 [+ 이 위치에 단계 추가] 줄이 없을 때도 카드 사이를 띄운다 */
.fscf-step .fscf-ttl{max-width:58%;}   /* 821~1000px 한 줄 배치에서 긴 제목이 시간·담당조직 요약을 밀어내지 않게(요약은 남은 폭을 쓴다) */
.fscf-step>.fscf-ih{gap:10px;}
.fscf-step .fscf-fold{min-height:48px;}
.fscf-step .fscf-no{border:1px solid var(--line-strong);background:var(--surface);letter-spacing:.2px;}
.fscf-tpb{flex:0 0 auto;display:inline-flex;align-items:center;}
.fscf-tpb .fscn-tp,.fscf-tpopt-b .fscn-tp{white-space:nowrap;}
.fscf-tlbn p{margin:0 0 4px;}
.fscf-tlbn p:last-child{margin-bottom:0;}
.fscf-tlops{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.fscf-opg{display:flex;gap:6px;}
.fscf-ib.fscf-tx{min-width:56px;padding:0 12px;font-size:14px;white-space:nowrap;}
.fscf-ib.fscf-mv{display:inline-flex;align-items:center;justify-content:center;gap:4px;}
.fscf-ar{font-size:18px;line-height:1;}
.fscf-bt{display:none;font-size:14px;}   /* '이전' '다음' 글자는 모바일(≤820px)에서만 */
.fscf-ib[aria-disabled="true"]{pointer-events:none;}
/* 단계 사이 [+ 이 위치에 단계 추가] */
.fscf-gap{display:flex;justify-content:center;padding:4px 0;}
.fscf-gapbtn{min-height:36px;padding:0 16px;border:1px dashed var(--line-strong);border-radius:999px;background:transparent;font:inherit;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent;}
@media (hover:hover){ .fscf-gapbtn:hover{border-color:var(--mint);background:var(--mint-tint);color:var(--mint-ink);} }
.fscf-gapbtn:focus-visible{outline:2px solid var(--mint);outline-offset:2px;}
/* 유형 선택(radio 3개): [+ 단계 추가] 창과 카드 펼침 영역이 같은 모양을 쓴다 */
.fscf-pick{margin:4px 0 12px;padding:12px;border:1.5px solid var(--mint);border-radius:var(--ap-r-md,12px);background:var(--mint-tint);}
.fscf-pickfs,.fscf-tpset{min-width:0;margin:0;padding:0;border:0;}
.fscf-tpset{margin-bottom:12px;}
.fscf-pickfs>legend,.fscf-tpset>legend{padding:0;margin:0 0 8px;font-size:14px;font-weight:800;color:var(--ink);}
.fscf-tpnote{margin:0 0 8px;font-weight:700;color:var(--red-ink);}
.fscf-tpgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.fscf-tpopt{display:grid;grid-template-columns:22px minmax(0,1fr);gap:3px 10px;align-items:start;min-width:0;min-height:48px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.fscf-tpopt>input{grid-column:1;grid-row:1 / span 2;width:22px;height:22px;margin:1px 0 0;}
.fscf-tpopt-b{grid-column:2;grid-row:1;min-width:0;display:flex;align-items:center;min-height:24px;}
.fscf-tpopt-h{grid-column:2;grid-row:2;min-width:0;font-size:13px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere;word-break:keep-all;}
.fscf-tpopt.is-on{border-color:var(--mint);background:var(--mint-tint);box-shadow:0 0 0 1px var(--mint);}
.fscf-tpopt:focus-within{outline:2px solid var(--mint);outline-offset:2px;}
@media (hover:hover){ .fscf-tpopt:hover{border-color:var(--mint);} }
.fscf-pickbar{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-top:10px;}
.fscf-pickbar .btn{min-height:44px;}
/* 모바일·태블릿(≤820px): 카드 한 열 · STEP 번호와 유형 Badge 가 맨 윗줄 · [↑ 이전][다음 ↓] 큰 버튼 · 눌러야 하는 곳 44px 이상 · 가로 넘침 없음 */
@media (max-width:820px){
  .fscf-tpgrid{grid-template-columns:minmax(0,1fr);}
  .fscf-step>.fscf-ih{flex-direction:column;align-items:stretch;gap:6px;padding:8px 10px 10px;}
  .fscf-step .fscf-fold{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"no tp . caret" "ttl ttl ttl ttl" "sub sub sub sub";align-items:center;gap:4px 8px;min-height:44px;padding:0;}
  .fscf-step .fscf-no{grid-area:no;}
  .fscf-step .fscf-tpb{grid-area:tp;min-width:0;}
  .fscf-step .fscf-caret{grid-area:caret;justify-self:end;margin:0 6px 4px 0;}
  .fscf-step .fscf-ttl{grid-area:ttl;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.35;}
  .fscf-step .fscf-sub{grid-area:sub;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;}
  .fscf-step .fscf-sub:empty{display:none;}
  .fscf-tlops{flex-wrap:wrap;width:100%;gap:6px;}
  .fscf-opg{flex:1 1 220px;gap:6px;}
  .fscf-opg>.fscf-ib{flex:1 1 0;min-width:0;height:auto;min-height:44px;}
  .fscf-ib.fscf-mv{font-size:15px;}
  .fscf-bt{display:inline;}
  .fscf-gapbtn{min-height:44px;padding:0 18px;font-size:14px;}
  .fscf-gap{padding:2px 0;}
  .fscf-pickbar .btn{flex:0 0 auto;}
}

/* ── 단계 ③ 조직별 임무 ── */
.fscf-actions{margin:0 0 10px;}
.fscf-ext{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;}
.fscf-ext-l{margin-right:2px;font-size:14px;font-weight:800;color:var(--ink-2);}
.fscf-chip{min-height:44px;padding:4px 16px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);font:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;}
.fscf-tag{flex:0 0 auto;padding:2px 10px;border:1px solid var(--mint);border-radius:999px;background:var(--mint-tint);color:var(--mint-ink);font-size:13px;font-weight:800;}
.fscf-tag.ext{border-color:var(--line-strong);background:var(--surface-2);color:var(--ink);}
.fscf-rname{min-width:0;margin-right:auto;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fscf-role.is-off{background:var(--surface-2);}
.fscf-role.is-off .fscf-rname{color:var(--ink-2);}
.fscf-role.is-off textarea{opacity:.7;}
.fscf-part{margin:0 0 4px;}
.fscf-offnote{margin:0 0 8px;}
/* 주요 연락처 */
.fscf-ctrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px 10px;align-items:center;margin:0 0 8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);}
.fscf-ctrow .fscf-fld{margin:0;}
.fscf-ctrow.is-gone{border-color:#E0B93D;background:#FFF8E6;}
.fscf-ctwho{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;min-width:0;overflow-wrap:anywhere;}
.fscf-ctwho span{font-size:14px;color:var(--ink-2);}
.fscf-ctwho em{flex:0 0 100%;font-style:normal;font-size:13px;font-weight:700;color:#7A5C00;}
.fscf-ctlist{max-height:340px;overflow:auto;padding:2px 10px;border:1px solid var(--line);border-radius:10px;-webkit-overflow-scrolling:touch;}
.fscf-ctopt{border-bottom:1px solid var(--line);}
.fscf-tel{font-variant-numeric:tabular-nums;}
.fscf-none{margin:8px 0;}
.fscf-err2{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:8px 0;}
@media (max-width:640px){
  .fscf-ctrow{grid-template-columns:minmax(0,1fr) auto;}
  .fscf-ctwho{grid-column:1;grid-row:1;}
  .fscf-ctrow>.fscf-ib{grid-column:2;grid-row:1;}
  .fscf-ctnote{grid-column:1 / -1;grid-row:2;}
}

/* ── 단계 ④ 장비/자원 표(PC) → 카드(≤640px) · 평가 포인트 · 첨부 ── */
.fscf-tbl{--fscf-cols:minmax(0,1.5fr) 96px minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr);margin:0 0 10px;}
.fscf-thead{display:grid;grid-template-columns:var(--fscf-cols) 150px;gap:8px;padding:6px 10px;border-bottom:2px solid var(--ink);font-size:13.5px;font-weight:800;color:var(--ink-2);}
.fscf-row{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-bottom:1px solid var(--line);}
.fscf-row .fscf-fld{margin-bottom:0;}
.fscf-rbody{order:1;flex:1 1 auto;min-width:0;display:grid;grid-template-columns:var(--fscf-cols);gap:8px;}
.fscf-rhd{order:2;flex:0 0 150px;display:flex;justify-content:flex-end;}
.fscf-rno{display:none;}
.fscf-tbl .fscf-fld>label,.fscf-ev .fscf-fld>label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}   /* PC: 머리줄이 열 이름을 대신(스크린리더는 라벨을 읽는다) */
.fscf-ev{align-items:center;padding:6px 0;}
.fscf-evno{flex:0 0 28px;text-align:center;font-size:14px;font-weight:800;color:var(--ink-2);}
.fscf-evtx{flex:1 1 auto;min-width:0;}
.fscf-box{margin:0 0 14px;}
.fscf-first p{margin:0 0 10px;}
@media (max-width:640px){
  .fscf-thead{display:none;}
  .fscf-row.fscf-res{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0 0 10px;padding:10px 10px 0;border:1px solid var(--line);border-radius:var(--ap-r-md,12px);}
  .fscf-row.fscf-res>.fscf-rhd{order:-1;flex:0 0 auto;}   /* 키보드 순서는 입력칸 먼저, 화면에서는 제목·이동 버튼을 카드 위로 */
  .fscf-rhd{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;}
  .fscf-rno{display:block;font-size:15px;}
  .fscf-rbody{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px;}
  .fscf-rbody>.fscf-fld:nth-child(1),.fscf-rbody>.fscf-fld:nth-child(4),.fscf-rbody>.fscf-fld:nth-child(5){grid-column:1 / -1;}
  .fscf-row.fscf-res .fscf-fld{margin-bottom:12px;}
  .fscf-tbl .fscf-fld>label{position:static;width:auto;height:auto;margin:0 0 5px;overflow:visible;clip:auto;white-space:normal;}
  .fscf-ev{flex-wrap:wrap;}
  .fscf-evtx{flex:1 1 calc(100% - 40px);}
  .fscf-ev .fscf-ops{margin-left:auto;}
}

/* ── 이전/다음 · 저장 막대(항상 보임) ── */
.fscf-nav{display:flex;justify-content:space-between;gap:8px;margin:2px 0 14px;}
.fscf-nav .btn{min-height:48px;}
.fscf-bar{position:sticky;bottom:var(--fscf-bn,0px);z-index:6;display:flex;gap:8px;margin:0 -2px;padding:10px 2px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);}
.fscf-bar .btn{flex:1 1 0;min-width:0;}
@media (max-width:430px){ .fscf-bar .btn{padding:10px 6px;} .fscf-nav .btn{padding:10px 12px;} }