/* =============================================================================
   안전혁신DAY — 목록 · 상세 · 서명 카드 · 설정 스타일 (2026-10-20)   js/modules/innovation-day.js 와 한 쌍
   접두사 .sid-* . 공통 부품(.hs-*)은 css/hs.css. 작성 화면은 css/sid-form.css, 공식 인쇄는 css/sid-print.css (여기서는 인쇄를 건드리지 않는다).
   목록은 DOM 한 벌을 CSS 로만 바꾼다 — 1024px 이상 = 표(머리 줄 + 한 줄 행), 그보다 좁으면 = 카드(활동일자·상태 / Family / 개선 전→후 / 작성자·건수·서명 2칸).
   (2026-10-24) 개선활동은 일지의 전부를 세로로 보인다(.sid-it) + 항목마다 자율개선 전환 상태(.sid-imp) — PC 는 오른쪽, 휴대폰은 글 아래.
   ========================================================================== */

/* ---- 필터 ---- */
.sid-filters select { flex: 0 1 132px; min-width: 0; }
.sid-filters input[type="search"] { flex: 1 1 200px; }
.sid-sum { margin: 4px 2px 8px; }
.sid-chks { display: flex; flex-wrap: wrap; gap: 4px 14px; flex: 1 1 100%; }
.sid-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 700; cursor: pointer; }
.sid-chk input { width: 20px; height: 20px; margin: 0; }

/* ---- 목록: 표(PC) ---- */
.sid-grid { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.sid-head, .sid-row { display: grid; grid-template-columns: 96px 104px minmax(200px, 1fr) 64px 44px 96px 96px 72px; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sid-head { background: var(--surface-2); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.sid-row { color: inherit; text-decoration: none; }
.sid-row:last-child { border-bottom: 0; }
.sid-row.sid-multi { align-items: start; }   /* 개선활동이 여러 건이라 키가 큰 행은 나머지 칸을 위쪽에 붙인다(1건 행은 예전처럼 가운데) */
.sid-row:hover, .sid-row:focus-visible { background: var(--mint-tint); outline: none; }
.sid-row:focus-visible { box-shadow: inset 0 0 0 2px var(--mint); }
.sid-c { position: relative; min-width: 0; font-size: 14px; }
/* 열 이름: PC 는 머리 줄이 알려 주므로 화면에서는 숨기되 화면 낭독기에는 남긴다 */
.sid-c small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sid-a-date b, .sid-a-fam b { display: block; overflow-wrap: anywhere; }
.sid-a-date i, .sid-a-fam i { display: block; font-style: normal; font-size: 12px; color: var(--ink-2); }
.sid-a-ba { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }   /* 개선활동이 여러 건이면 세로로 이어 붙인다 — 행 높이가 건수만큼 자연스럽게 늘어난다(자르지 않는다) */
.sid-it { display: flex; align-items: flex-start; gap: 8px; }
.sid-it + .sid-it { padding-top: 8px; border-top: 1px dashed var(--line); }
.sid-it-body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }   /* 사진 줄 아래에 글 — 가운데 열(약 280px)에서 사진 두 장과 글이 한 줄로 경쟁하지 않게 */
.sid-it-no { font-size: 11.5px; font-weight: 700; color: var(--mint-ink); }
/* 개선활동별 자율개선 전환 상태(오른쪽) — 전환완료는 눌러서 그 자율개선으로 이동, 미전환은 표시만 */
.sid-imp { flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 2px; text-align: center; }
.sid-imp-l { font-size: 11px; color: var(--ink-2); }
.sid-imp-b { position: relative; display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sid-imp.is-done .sid-imp-b { border-color: #b7e0c5; background: #e7f6ec; color: #17653a; }
.sid-imp-lk { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sid-imp-lk::after { content: ''; position: absolute; inset: -10px -6px; }   /* 눈에 보이는 크기는 작게, 누르는 영역은 넉넉하게 */
.sid-imp-lk:hover, .sid-imp-lk:focus-visible { box-shadow: 0 0 0 2px var(--mint); outline: none; }
.sid-ba-img { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.sid-th { margin: 0; width: 76px; }
.sid-th img, .sid-th-no { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); box-sizing: border-box; }
.sid-th-no { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; color: var(--ink-2); }
.sid-th figcaption { margin-top: 2px; font-size: 11px; text-align: center; color: var(--ink-2); }
.sid-arrow { flex: 0 0 auto; font-size: 18px; font-weight: 800; color: var(--mint-ink); }
.sid-ba-tx { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.sid-ba-tx p { margin: 0 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sid-ba-tx b { margin-right: 3px; color: var(--mint-ink); }
.sid-sg { font-size: 13px; font-weight: 700; color: var(--ink-2); overflow-wrap: anywhere; }
.sid-sg.is-ok { color: #17653a; }
.sid-sg.is-wait { color: #b45309; }

/* ---- 목록: 카드(휴대폰·태블릿) ---- */
@media (max-width: 1023px) {
  .sid-head { display: none; }
  .sid-row { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "date date date st" "fam fam fam fam" "ba ba ba ba" "au cn mt inn"; gap: 8px 10px; padding: 12px; }
  .sid-a-date { grid-area: date; }
  .sid-a-st { grid-area: st; justify-self: end; }
  .sid-a-fam { grid-area: fam; }
  .sid-a-ba { grid-area: ba; flex-direction: column; }
  .sid-a-au { grid-area: au; }
  .sid-a-cn { grid-area: cn; }
  .sid-a-mt { grid-area: mt; }
  .sid-a-in { grid-area: inn; }
  .sid-ba-img { width: 100%; }
  /* 휴대폰: 개선활동마다 세로(개선 N → 전→후 사진 → 글 → 자율개선 상태) */
  .sid-it { flex-direction: column; align-items: stretch; gap: 6px; }
  .sid-imp { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 8px; padding-top: 0; }
  .sid-th { flex: 1 1 0; width: auto; }
  .sid-th-no { aspect-ratio: 4 / 3; }
  .sid-c small { position: static; width: auto; height: auto; clip: auto; overflow: visible; display: block; font-size: 11px; color: var(--ink-2); }
  .sid-filters select, .sid-filters input[type="search"] { min-height: 44px; }   /* 휴대폰 터치 크기(필터 선택·검색칸이 기본 40px 이던 것) */
}

/* ---- 상세 ---- */
.sid-detail { max-width: 920px; margin: 0 auto; }
.sid-actions .btn { min-height: 44px; }
.sid-kv { margin: 0; }
.sid-kv-r { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sid-kv-r:last-child { border-bottom: 0; }
.sid-kv dt { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.sid-kv dd { margin: 0; overflow-wrap: anywhere; line-height: 1.55; }
.sid-kv i { margin-left: 3px; font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.sid-ba2 { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 8px; align-items: start; }
.sid-ba2 > .sid-arrow { align-self: center; text-align: center; font-size: 22px; }
.sid-side-t { margin-bottom: 6px; font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.sid-side-t.is-after { color: var(--mint-ink); }
.sid-phs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.sid-ph { min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.sid-ph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sid-nophoto { padding: 22px 8px; border: 1px dashed var(--line-strong); border-radius: 8px; text-align: center; font-size: 13px; color: var(--ink-2); }
.sid-tx { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
/* 개선활동 → 자율개선 바로 등록(2026-11-17) */
.sid-i2i { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.sid-i2i-btns { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.sid-i2i-st { font-size: 12.5px; color: var(--ink-2); }
.sid-i2i-warn { font-size: 12.5px; font-weight: 700; color: #7a5200; }
@media (max-width: 640px) {
  .sid-ba2 { grid-template-columns: minmax(0, 1fr); }
  .sid-ba2 > .sid-arrow { transform: rotate(90deg); }
  .sid-kv-r { grid-template-columns: minmax(0, 1fr); }
}

.sid-need { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sid-list .btn-sm, .sid-detail .btn-sm { min-height: 44px; }   /* 휴대폰 터치 크기 */

/* ---- 서명 카드 ---- */
.sid-sign .hs-card-h .hs-small { flex: 1 1 100%; font-weight: 400; }
.sid-remind { margin-left: auto; }
.sid-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.sid-slot { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.sid-slot-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sid-slot-who { margin-bottom: 8px; }
.sid-slot-who i { margin-left: 6px; font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.sid-sig { display: flex; align-items: center; justify-content: center; min-height: 72px; margin: 6px 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.sid-sig img { max-width: 100%; max-height: 110px; }
.sid-op { margin-top: 6px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sid-nbrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 10px; }
.sid-nb { padding: 3px 9px; border: 1px solid; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.sid-nb.is-ok { background: #e6f6ec; color: #17653a; border-color: #86cda0; }
.sid-nb.is-no { background: #fff4d6; color: #7a5200; border-color: #e5c36a; }
.sid-nbd { font-size: 12px; color: var(--ink-2); }
@media (max-width: 720px) { .sid-slots { grid-template-columns: minmax(0, 1fr); } }

/* ---- 새 일지 대화상자 · 설정 ---- */
.sid-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.sid-radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 700; }
.sid-radio input { margin: 0; }
.sid-radio input:checked + span { color: var(--mint-ink); }
.sid-fixed { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-weight: 700; }
.sid-set { max-width: 720px; margin: 0 auto; }
.sid-hist { margin: 0 0 12px; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }