/* features/simcs-action — 유사호출부호 조치 배지·작성 폼 (2026-09-04 신설 · v2 같은 날: 다중선택·일괄 폼·내 편명 강조)
   alert-history 행(.ah-ev, grid) 안에 grid-column 전체를 차지하는 한 덩어리로 들어간다.
   ⚠ 색·치수 토큰은 호스트(css/theme.css)를 따르되 폴백을 함께 쓴다 (모듈화 규약). */

/* ⚠ 2026-09-05 — 이 화면의 본문 글자 하한을 **12px**로 올렸다(사용자 지시 「쉽게 확인」).
   종전에는 배지·머리·폼·칩이 전부 --fs-xs(10px)였다. 한글은 같은 px에서 라틴보다 판독이
   어렵고, 이 화면을 매일 보는 사람은 항공사 안전담당자·운영자다. 목록 밀도는 그대로 두되
   **읽는 것**(상태·조치 내용·안내)만 키운다. */
.sa-row{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:2px}
/* ⭐ 2026-09-06 — 머리(대행/소속) + 조치율 막대 + 상태 칩을 **한 줄**로 흘린다
   (사용자 지시 「두 줄로 줄여줘」 — 위 필터 줄과 합쳐 머리는 두 줄이다).
   ⛔ 고정 배치가 아니다: 좁으면 wrap이 칩 묶음째 다음 줄로 내린다(요소가 잘리지 않는다). */
.sa-top{display:flex; flex-wrap:wrap; align-items:center; gap:2px 14px}
.sa-top .sa-head{padding:5px 2px 4px 0}
.sa-top .sa-stbar{margin:0}
.sa-head{padding:5px 2px 4px; font-size:12px; color:var(--text-secondary,#475569); line-height:1.6}
/* 로그인 안내 한 줄 — 조용하되 읽히게 (유입 동선이 여기 하나다) */
.sa-invite{padding:7px 9px; border-radius:var(--radius-sm,6px);
  background:var(--bg-sunken,#f6f8fa); border:1px dashed var(--border-medium,#cbd5e1);
  color:var(--text-secondary,#475569)}

/* ── 조치율 막대 + 상태 칩 (2026-09-05) ─────────────────────────────────── */
/* ⭐ 2026-09-06 v11 — 조치율 막대를 **칩과 같은 줄** 맨 앞에 넣는다(사용자 지시 「심플하게」).
   종전엔 막대 한 줄 + 칩 한 줄이라 좁은 서랍에서 두 줄을 먹었다. 막대 옆 글자(완료 N / 당사 M)는
   바로 옆 칩이 같은 수를 말하고 있어 지웠다 — 뜻은 title에 남는다. */
.sa-prog{display:inline-flex; align-items:center; gap:6px; margin:0 4px 0 0; font-size:12px; cursor:help}
.sa-prog-bar{flex:0 0 56px; height:7px; border-radius:999px; overflow:hidden;
  background:var(--bg-sunken,#e2e8f0)}
.sa-prog-bar i{display:block; height:100%; background:var(--status-ok,#15803d)}
.sa-prog b{color:var(--status-ok,#15803d); font-variant-numeric:tabular-nums}
.sa-stbar{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:2px 0 6px}
/* ⓘ — 머리줄에서 걷어낸 설명(조우 수 기준·집계 문턱·내려받기 위치)을 담은 아이콘 */
.sa-info{margin-left:2px; cursor:help; color:var(--text-tertiary,#94a3b8); font-size:12px}
.sa-info:hover,.sa-info:focus{color:var(--accent-cyan,#0369a1)}
.sa-stchip{height:26px; width:auto; padding:0 10px; cursor:pointer; font-family:inherit;
  font-size:12px; white-space:nowrap; color:var(--text-secondary,#475569);
  background:var(--bg-sunken,#f6f8fa); border:1px solid var(--border-subtle,#e2e8f0);
  border-radius:999px}
.sa-stchip b{font-variant-numeric:tabular-nums}
.sa-stchip:hover{border-color:var(--accent-cyan,#0284c7)}
.sa-stchip[disabled]{opacity:.45; cursor:default}
/* 강조색 위의 글자는 --text-inverse 다 — 다크에서 --accent-cyan 이 밝은 하늘색이 되어
   흰 글자로는 안 읽힌다(실측 대비 2.14, 2026-09-19). 라이트에서는 종전과 같은 흰색. */
.sa-stchip.on{color:var(--text-inverse,#fff); background:var(--accent-cyan,#0284c7); border-color:var(--accent-cyan,#0284c7)}
.sa-stchip.on b{color:var(--text-inverse,#fff)}

/* 행 첫 칸의 조치 상태 — alert-history .ah-kc 자리(종류 배지가 있던 곳) */
.sa-kc{min-width:52px; text-align:center}
.sa-kc.sa-none{background:var(--bg-sunken,#f6f8fa); color:var(--text-secondary,#475569);
  border:1px dashed var(--border-medium,#cbd5e1)}
.sa-kc.sa-planned{background:rgba(217,119,6,.16); color:var(--status-warn,#b45309)}
.sa-kc.sa-done{background:rgba(21,128,61,.16); color:var(--status-ok,#15803d)}
.sa-kc.sa-na{background:var(--bg-sunken,#f6f8fa); color:var(--text-tertiary,#64748b)}
/* 조치 대상 아님(유사도 60~84) — 「참고」. 흐리게 두되 **감추지 않는다** */
.sa-kc.sa-kc-off{background:none; color:var(--text-tertiary,#94a3b8); font-weight:400;
  border:1px dotted var(--border-medium,#cbd5e1)}

/* 덮어쓰기 이력 (2026-09-05) — 「누가 언제 무엇을 지웠나」 */
.sa-hist-box{flex:1 0 100%; margin:4px 0 2px; padding:6px 8px; font-size:12px;
  background:var(--bg-sunken,#f6f8fa); border-left:3px solid var(--border-medium,#cbd5e1);
  border-radius:0 var(--radius-sm,6px) var(--radius-sm,6px) 0}
.sa-hist-row + .sa-hist-row{margin-top:6px; padding-top:6px; border-top:1px dashed var(--border-subtle,#e2e8f0)}
.sa-hist-t{display:block; font-size:11px; color:var(--text-tertiary,#64748b)}
.sa-hist-p{white-space:pre-wrap; word-break:break-word; line-height:1.5}
.sa-head.sa-bad{color:var(--status-warn,#b45309)}
.sa-dim{color:var(--text-tertiary,#64748b); font-weight:400}
/* 글자처럼 보이는 버튼 — 「미작성 9」·「선택 해제」 */
.sa-lnk{height:auto; width:auto; padding:0 2px; margin:0; border:0; background:none; cursor:pointer; font:inherit;
  color:inherit; text-decoration:underline dotted; text-underline-offset:2px}
.sa-lnk.on{color:var(--accent-cyan,#0369a1); text-decoration-style:solid}
.sa-toast{margin:2px 0 5px; padding:5px 9px; border-radius:var(--radius-sm,6px); font-size:12px;
  background:rgba(21,128,61,.12); color:var(--status-ok,#15803d)}

/* 선택 바 — 목록 위 sticky(팝업 아님). 선택이 있을 때만 강조 테두리 */
.sa-bar{position:sticky; top:0; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin:2px 0 6px; padding:6px 9px; font-size:12px;
  background:var(--bg-surface-elevated,#fff); border:1px solid var(--border-subtle,#e2e8f0); border-radius:var(--radius-sm,6px)}
.sa-bar.on{border-color:var(--accent-cyan,#0284c7)}
.sa-all{display:inline-flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap}
.sa-all input,.sa-ck{width:15px; height:15px; margin:0; cursor:pointer; accent-color:var(--accent-cyan,#0284c7)}
.sa-batch-open{height:28px; width:auto; padding:0 13px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:700;
  color:var(--text-inverse,#fff); background:var(--accent-cyan,#0284c7); border:1px solid var(--accent-cyan,#0284c7); border-radius:var(--radius-sm,6px); white-space:nowrap}
.sa-batch-open[disabled]{opacity:.55; cursor:default}

/* 관리자 대행 (2026-09-04) — «누가 썼나»가 눈에 남아야 한다(조치는 항공사 책임 기록) */
.sa-act,.sa-act-row{height:22px; width:auto; max-width:190px; font-family:inherit; font-size:var(--fs-xs,10px);
  padding:0 4px; color:inherit; background:var(--bg-surface-elevated,#fff);
  border:1px solid var(--accent-cyan,#0284c7); border-radius:var(--radius-sm,6px); cursor:pointer}
/* ⭐ 2026-09-06 v11 — 대행 셀렉트가 관리자 머리줄의 **주 컨트롤**이 됐다(설명 글자를 ⓘ로 내린 뒤).
   10px는 이 화면 본문 하한(12px)보다 작아 혼자 흐렸다 — 행 안의 .sa-act-row는 그대로 둔다. */
.sa-act{height:24px; font-size:12px}
.sa-byadm{padding:0 5px; border-radius:3px; font-size:var(--fs-xs,10px); font-weight:700;
  background:rgba(2,132,199,.12); color:var(--accent-cyan,#0369a1)}
.sa-byadm-dot{margin-left:3px}
.sa-warn-inline{color:var(--status-warn,#b45309)}
/* 관리자가 대행 항공사를 골랐을 때의 «그 항공사 기준» 수 — 전체 쌍 기준과 나란히 둔다 */
.sa-scope{color:var(--accent-cyan,#0369a1)}
/* 관리자에게만 보이는 «상대 항공사 조치 내용» — 내 것과 구분되게 한 단 들여 흐리게 */
.sa-plan-other{padding-left:8px; border-left:2px solid var(--border-medium,#cbd5e1); color:var(--text-secondary,#475569)}

/* 행 앞 체크박스 자리 — alert-history .ah-lead(폭 고정)에 들어간다 */
.ah-lead .sa-ck{display:block}

/* 내 편명 강조 — 「JNA210 ↔ TWB510」에서 내 것만 굵고 진하게, 상대는 보통 */
.sa-me{color:var(--accent-cyan,#0369a1); font-weight:800}
.sa-other{font-weight:500; color:var(--text-secondary,#475569)}
.sa-arrow{color:var(--text-tertiary,#64748b); font-weight:400}

/* 상태 배지 — 색과 글자를 항상 같이 낸다(색만으로 구분하지 않는다) */
.sa-badge{display:inline-block; padding:1px 7px; border-radius:999px; font-size:11.5px; font-weight:700;
  line-height:18px; white-space:nowrap; border:1px solid transparent; cursor:default}
.sa-none   {background:var(--bg-sunken,#f6f8fa); color:var(--text-secondary,#475569); border-color:var(--border-medium,#cbd5e1); border-style:dashed}
.sa-planned{background:rgba(217,119,6,.14);  color:var(--status-warn,#b45309)}
.sa-done   {background:rgba(21,128,61,.14);  color:var(--status-ok,#15803d)}
.sa-na     {background:var(--bg-sunken,#f6f8fa); color:var(--text-tertiary,#64748b)}
.sa-mine   {box-shadow:0 0 0 1px var(--accent-cyan,#0284c7) inset}
/* 상대 항공사 — 흐리게(내 것과 한눈에 구분). v4부터 «내용»도 보이지만 작성자 이름은 안 온다 */
.sa-peer   {opacity:.72; font-weight:600}
.sa-nomem  {font-style:italic}
/* ⭐ v4(2026-09-06) — 조치 대상이 아닌 항공사(외항사·군용). 색만으로 구분하지 않도록 글자도
   「조치 대상 아님」이라 적는다. 점선 테두리 = «여기에 쓸 것이 없다»를 상태 배지와 구분 */
.sa-foreign{background:transparent; color:var(--text-tertiary,#64748b);
  border-color:var(--border-subtle,#e2e8f0); border-style:dotted; font-weight:600; opacity:.85}
/* 상대 항공사의 조치 내용 — 내 것보다 한 단 흐리게, 왼쪽 선으로 «남의 기록»을 표시 */
.sa-peer-plan{color:var(--text-secondary,#475569); border-left:2px solid var(--border-medium,#cbd5e1);
  padding-left:7px; margin-top:2px}

.sa-edit{height:24px; width:auto; padding:0 10px; cursor:pointer; font-family:inherit; font-size:12px;
  color:var(--accent-cyan,#0369a1); background:var(--bg-surface-elevated,#fff);
  border:1px solid var(--accent-cyan,#0284c7); border-radius:var(--radius-sm,6px); white-space:nowrap}
.sa-edit:hover{background:var(--bg-hover,#eef3fa)}
.sa-plan-view{flex:1 0 100%; font-size:12px; color:var(--text-primary,#0f172a); line-height:1.45;
  white-space:pre-wrap; word-break:break-word}

/* 작성 폼 — 행 안(단건) 또는 목록 위(일괄)에 접혀 들어간다. ⛔ 팝업으로 띄우지 않는다 */
.sa-form{flex:1 0 100%; margin-top:4px; padding:7px 8px; background:var(--bg-surface-elevated,#fff);
  border:1px solid var(--accent-cyan,#0284c7); border-radius:var(--radius-sm,6px); cursor:default}
.sa-form-batch{margin:0 0 8px}
.sa-fh{font-size:12px; color:var(--text-secondary,#475569); margin-bottom:5px}
.sa-st{display:flex; flex-wrap:wrap; gap:4px 14px; margin-bottom:6px; font-size:12.5px}
.sa-st label{display:inline-flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap}
.sa-st input{width:auto; margin:0}                    /* 호스트 전역 input 규칙 되돌리기 */
.sa-chips{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-bottom:5px; font-size:var(--fs-xs,10px)}
.sa-chip{height:24px; width:auto; padding:0 10px; cursor:pointer; font-family:inherit; font-size:11.5px;
  color:var(--text-secondary,#475569); background:var(--bg-sunken,#f6f8fa);
  border:1px solid var(--border-subtle,#e2e8f0); border-radius:999px; white-space:nowrap}
.sa-chip:hover{border-color:var(--accent-cyan,#0284c7); color:var(--accent-cyan,#0369a1)}
.sa-chip-rec{border-style:dashed}
.sa-plan{width:100%; box-sizing:border-box; min-height:60px; resize:vertical; font-family:inherit;
  font-size:12.5px; line-height:1.45; padding:5px 7px; color:inherit;
  background:var(--bg-sunken,#f6f8fa); border:1px solid var(--border-medium,#cbd5e1); border-radius:var(--radius-sm,6px)}
.sa-plan:focus{outline:none; border-color:var(--accent-cyan,#0284c7)}
/* 적용 대상 — 몇 건에 쓰는지 마지막까지 보이게. 덮어쓰기·실패 건은 색으로 */
.sa-targets{margin:5px 0; font-size:12px}
.sa-targets summary{cursor:pointer; color:var(--text-secondary,#475569)}
.sa-targets ul{margin:3px 0 0; padding-left:16px; max-height:120px; overflow-y:auto}
.sa-targets li{line-height:1.6}
.sa-targets li.sa-ow{color:var(--status-warn,#b45309)}
.sa-targets li.sa-fail{color:var(--status-danger,#c2261f)}
.sa-owtag{padding:0 5px; border-radius:3px; background:rgba(217,119,6,.14); color:var(--status-warn,#b45309); font-weight:700}
.sa-warn{margin:4px 0; font-size:12px; color:var(--status-warn,#b45309)}
.sa-warn.sa-bad{color:var(--status-danger,#c2261f)}
.sa-btns{display:flex; align-items:center; gap:6px; margin-top:5px; flex-wrap:wrap}
.sa-btns button{height:26px; width:auto; padding:0 12px; cursor:pointer; font-family:inherit; font-size:12px;
  border:1px solid var(--border-medium,#cbd5e1); border-radius:var(--radius-sm,6px);
  background:var(--bg-surface-elevated,#fff); color:inherit}
.sa-btns .sa-save{background:var(--accent-cyan,#0284c7); color:var(--text-inverse,#fff); border-color:var(--accent-cyan,#0284c7); font-weight:700}
.sa-btns .sa-save[disabled]{opacity:.6; cursor:wait}
.sa-cnt{margin-left:auto; font-size:var(--fs-xs,10px); color:var(--text-tertiary,#64748b); font-family:var(--font-mono,monospace)}
.sa-err{flex:1 0 100%; font-size:12px; color:var(--status-danger,#c2261f)}

/* ⤓ CSV 내려받기 (C5-4 후반, 2026-09-04) — 머리줄 오른쪽 끝. 목록 조작(전체선택·선택 바)과
   섞이지 않게 머리줄(.sa-head)에만 둔다. */
.sa-dl-wrap { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; }
.sa-dl-days { font: inherit; font-size: var(--fs-xs, 10px); padding: 1px 3px; width: auto; }
.sa-dl { font: inherit; font-size: var(--fs-xs, 10px); padding: 2px 7px; width: auto; cursor: pointer;
         border: 1px solid var(--border-subtle, #e2e8f0); border-radius: var(--radius-sm, 6px);
         background: var(--bg-surface, #fff); color: var(--text-secondary, #475569); }
.sa-dl:hover { background: var(--bg-hover, #eef2f6); }

/* ══ v5(2026-09-06) — 보기 범위 콤보 · 조치 팝업 ═══════════════════════════════
   사용자 확정: 「기본은 본인 항공사, 콤보로 전체보기 · 조치는 팝업에서」.
   ⛔ 팝업은 **조치만** 한다 — 목록·재생·지도는 뒤 화면 몫이다. */
.sa-scope-sel{height:24px; padding:0 4px; margin-left:6px; font:inherit; font-size:12px; width:auto;
  color:var(--text-primary,#0f172a); background:var(--bg-surface-elevated,#fff);
  border:1px solid var(--accent-cyan,#0284c7); border-radius:var(--radius-sm,6px); cursor:pointer}

/* 읽기 전용(다른 항공사 사건) — 배지는 그대로 두되 «쓸 수 없다»가 보이게 흐리고 커서를 바꾸지 않는다 */
.sa-badge.sa-peer{cursor:default}

/* 팝업 — 배경 */
.sa-modal-ov{position:fixed; inset:0; z-index:2000; background:rgba(15,23,42,.45);
  display:flex; align-items:center; justify-content:center; padding:16px}
.sa-modal{width:min(560px,100%); max-height:min(86vh,720px); display:flex; flex-direction:column;
  background:var(--bg-surface-elevated,#fff); color:var(--text-primary,#0f172a);
  border-radius:14px; box-shadow:var(--shadow-sm,0 8px 30px rgba(0,0,0,.25)); overflow:hidden}
.sa-modal-h{display:flex; align-items:center; gap:8px; padding:11px 13px; font-size:13.5px;
  border-bottom:1px solid var(--border-subtle,#e2e8f0)}
.sa-modal-x{margin-left:auto; width:auto; padding:0 4px; background:none; border:0; cursor:pointer;
  font-size:17px; line-height:1; color:var(--text-tertiary,#64748b)}
.sa-modal-b{flex:1; overflow:auto; padding:11px 13px 13px}
/* 팝업 안에서는 폼이 «내용 전체»다 — 행 안에 끼어 있을 때 쓰던 테두리·여백을 걷는다 */
.sa-modal-b .sa-form{margin:0; padding:0; border:0; background:none}

/* ⭐ 어느 사건에 쓰는가 — 인라인 폼이 갖고 있던 맥락을 팝업 머리로 옮긴 자리 */
.sa-mc{padding:8px 10px; margin-bottom:9px; border-radius:var(--radius-sm,6px);
  background:var(--bg-sunken,#f6f8fa); border:1px solid var(--border-subtle,#e2e8f0)}
.sa-mc-who{font-size:14px; font-weight:700; letter-spacing:.2px}
.sa-mc-sub{margin-top:2px; font-size:11.5px; color:var(--text-tertiary,#64748b)}
.sa-mc-enc{margin-left:5px; padding:0 6px; border-radius:999px; font-size:11px; font-weight:700;
  background:var(--accent-cyan,#0284c7); color:#fff}

/* 상대 항공사 조치 — 팝업 안에서 함께 본다(작성자 이름은 서버가 벗겼다) */
.sa-mpeer{margin-bottom:9px; padding:7px 9px; border-left:2px solid var(--border-medium,#cbd5e1);
  background:var(--bg-sunken,#f6f8fa); border-radius:0 var(--radius-sm,6px) var(--radius-sm,6px) 0}
.sa-mpeer-h{font-size:11px; font-weight:700; color:var(--text-tertiary,#64748b); margin-bottom:3px}
.sa-mpeer-r{font-size:12px; line-height:1.5; margin-top:2px}
.sa-mpeer-p{white-space:pre-wrap; word-break:break-word}

/* 좁은 화면 — 하단 시트 (사용자 확정: 모바일에서 손이 닿는 자리) */
@media (max-width:760px){
  .sa-modal-ov{align-items:flex-end; padding:0}
  .sa-modal{width:100%; max-height:92vh; border-radius:14px 14px 0 0}
  .sa-modal-b{padding-bottom:calc(13px + var(--sa-b,0px))}   /* 홈 인디케이터 안전영역 */
}

/* 조치 유형 (2026-09-12, 수정/76) — 상태 라디오 아래 한 줄 select · 보기에서는 [유형] 꼬리표 */
.sa-type-row{ margin:6px 0 4px; font-size:var(--fs-sm); }
.sa-type-row select{ width:auto; min-width:150px; margin-left:6px; }
.sa-typetag{ color:var(--accent,#1d5fae); margin-right:2px; }

/* 한 줄 모드 — 행 버튼 칸의 조치 작성 (2026-09-12, 수정/87) */
.ah-btns .sa-edit-inline{ margin-right:6px; white-space:nowrap; }