/* =============================================================================
   개선활동 > 안전혁신DAY — 활동일지 작성 화면(sidf-) · 발표 모드(sidp-)   (2026-10-21)   js/sid-form.js · js/sid-present.js 와 한 쌍
   - 작성 화면은 휴대폰 390px 한 컬럼이 기준(터치 44px 이상), 860px 이상에서만 개선 전 | 개선 후를 나란히 둔다.
   - 발표 모드는 프로젝터·대형 화면용: 어두운 바탕 + vmin 단위의 큰 글씨, 세로 화면(휴대폰)에서는 위아래로 쌓고 스크롤된다.
   - 접두사 sidf- / sidp- 만 쓰고 공통 부품(.hs-card · .btn · .field · .hs-fb-*)은 건드리지 않는다(사진 상자 안쪽은 .sidf-photos 아래에서만 키운다).
   - 화면 전용이다 — 인쇄(공식 일지)는 css/sid-print.css.
   ========================================================================== */

/* ───────────── 작성 화면 ───────────── */
.sidf-wrap { max-width: 980px; margin: 0 auto; }
.sidf-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0 0 12px; }
.sidf-card > h3 { margin: 0 0 8px; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sidf-count { font-size: 13px; font-weight: 700; color: var(--mint-ink); }
.sidf-warn { color: #b42318; font-weight: 800; }

/* ① 헤더 요약 */
.sidf-head-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sidf-date { font-size: 18px; }
.sidf-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0 0 6px; }
.sidf-dl > div { min-width: 0; }
.sidf-dl dt { font-size: 12.5px; color: var(--ink-2); font-weight: 700; margin: 0 0 2px; }
.sidf-dl dt label { font: inherit; }
.sidf-lead { grid-column: 1 / -1; }
.sidf-dl dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.sidf-dl dd i { font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.sidf-dl select { width: 100%; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 8px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; }
.sidf-dl select:focus { outline: 2px solid var(--mint); outline-offset: 0; border-color: var(--mint); }
.sidf-sig { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
#sidfSig .banner { margin: 8px 0 0; }

/* ② 참석 */
.sidf-att { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sidf-att-row { border-bottom: 1px solid var(--line); }
.sidf-att-row:last-child { border-bottom: 0; }
.sidf-att-row.is-absent { background: #fff8e6; }
.sidf-chk { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; cursor: pointer; }
.sidf-chk input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--mint); }
.sidf-chk b { font-size: 15.5px; }
.sidf-chk i { margin-left: auto; text-align: right; font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.sidf-none { padding-left: 2px; padding-right: 2px; }
.sidf-reason { padding: 0 12px 10px 46px; }
.sidf-reason input { width: 100%; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; background: #fff; font: inherit; font-size: 16px; }
.sidf-reason input:focus { outline: 2px solid var(--mint); outline-offset: 0; border-color: var(--mint); }

/* ③ 활동시간 */
.sidf-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }   /* 1fr 은 minmax(auto,1fr) 라 datetime-local 의 최소 폭(약 247px)보다 줄지 못해 휴대폰에서 카드 밖으로 넘쳤다 */
.sidf-row2 .field { margin-bottom: 8px; min-width: 0; }
.sidf-row2 input { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 480px) { .sidf-row2 { grid-template-columns: minmax(0, 1fr); } }   /* 좁은 휴대폰은 시작·종료를 위아래로 */
.sidf-total { margin-top: 10px; font-weight: 800; color: var(--mint-ink); }
.sidf-total.is-bad { color: #b42318; }

/* ④ 금일 활동 실적 — 개선활동 카드 */
.sidf-item { scroll-margin-top: 72px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px; margin: 0 0 14px; background: #fff; }
.sidf-item-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sidf-item-h b { font-size: 16px; }
.sidf-saved { margin-left: auto; font-size: 12.5px; color: var(--ink-2); }
.sidf-saved.is-ok { color: #17653a; font-weight: 700; }
.sidf-saved.is-err { color: #b42318; font-weight: 700; }
.sidf-item-h .btn { min-height: 44px; }
.sidf-ba { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sidf-arrow { text-align: center; font-size: 22px; line-height: 1; color: var(--ink-2); }
.sidf-arrow::before { content: '↓'; }
.sidf-side { min-width: 0; border-radius: 10px; padding: 10px; border: 1px solid var(--line); }
.sidf-before { background: #fffaf0; border-color: #ecd9a3; }
.sidf-after { background: #f2faf5; border-color: #b6dfc4; }
.sidf-side-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sidf-tag { display: inline-block; padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: 14px; border: 1px solid transparent; }
.sidf-tag-b { background: #fff4d6; color: #7a5200; border-color: #e5c36a; }
.sidf-tag-a { background: #e6f6ec; color: #17653a; border-color: #86cda0; }
.sidf-need { margin-left: auto; font-size: 12.5px; font-weight: 700; }
.sidf-need.is-ok { color: #17653a; }
.sidf-need.is-miss { color: #b42318; }
.sidf-side .field { margin: 10px 0 0; }
.sidf-add { min-height: 52px; font-size: 16px; font-weight: 800; border-style: dashed; }
/* 사진 상자(공통 filesBox) 안쪽만 휴대폰에서 누르기 쉽게: [사진 촬영][사진 선택] 두 단추를 한 줄에 크게 */
.sidf-photos .hs-fb-bar { gap: 8px; }
.sidf-photos .hs-fb-bar .btn { flex: 1 1 0; min-height: 48px; justify-content: center; padding: 0 12px; font-size: 15px; font-weight: 700; }
.sidf-photos .hs-fb-count { flex: 1 1 100%; }
.sidf-photos .hs-fb-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.sidf-photos .hs-fb-x { width: 32px; height: 32px; }
/* 휴대폰·터치 화면: 사진 삭제 × 의 누르는 영역을 44×44px 로 — 눈에 보이는 동그라미는 32px 그대로(padding 6px + background-clip) */
@media (pointer: coarse), (max-width: 600px) {
  .sidf-photos .hs-fb-x { top: 0; right: 0; width: 44px; height: 44px; padding: 6px; background-clip: content-box; font-size: 20px; }
}

/* ⑦ 5S */
.sidf-s5 > summary { cursor: pointer; font-weight: 800; font-size: 16px; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.sidf-s5 > summary small { font-weight: 400; color: var(--ink-2); }
.sidf-s5b { padding-top: 6px; }
.sidf-s5l { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 8px 0 6px; }
.sidf-segrow { display: flex; gap: 8px; }
.sidf-seg { flex: 1 1 0; min-height: 46px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.sidf-seg.is-on { background: var(--mint-tint); border: 2px solid var(--mint); color: var(--mint-ink); }
.sidf-seg.is-on::before { content: '✓ '; }

/* ⑧ 마일리지 */
.sidf-mile-v { display: flex; align-items: baseline; gap: 4px; }
.sidf-mile-v b { font-size: 30px; line-height: 1.1; color: var(--mint-ink); }
.sidf-mile-v span { font-size: 14px; color: var(--ink-2); }
.sidf-mile-na { color: var(--ink-2); font-size: 14px; }

/* 제출 준비 · 하단 바 */
.sidf-ready { border-radius: var(--radius); padding: 11px 12px; margin: 0 0 8px; font-size: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.sidf-ready.is-ok { background: #e6f6ec; border-color: #86cda0; color: #17653a; }
.sidf-ready.is-miss { background: #fff8e6; border-color: #e0b93d; color: #5c4500; }
.sidf-ready-h { font-weight: 800; }
.sidf-ready ul { margin: 6px 0 0; padding-left: 18px; }
.sidf-ready li { margin: 2px 0; }
.sidf-jump { background: none; border: 0; padding: 4px 0; min-height: 32px; font: inherit; color: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
.sidf-bar { position: sticky; bottom: 0; z-index: 6; display: flex; gap: 10px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, #fff 80%, rgba(255, 255, 255, 0)); }
.sidf-bar .btn { flex: 1 1 0; min-height: 52px; font-size: 16px; font-weight: 800; }
.sidf-bar .btn-primary { flex: 1.5 1 0; }
.sidf-danger { margin: 6px 0 20px; text-align: center; }
.sidf-linkbtn { background: none; border: 0; padding: 10px 12px; min-height: 44px; color: #b42318; font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; }
.sidf-miss { margin: 0; padding-left: 20px; line-height: 1.7; }

@media (min-width: 860px) {
  .sidf-dl { grid-template-columns: repeat(4, 1fr); }
  .sidf-lead { grid-column: auto; }
  .sidf-sig { grid-template-columns: repeat(2, 1fr); }
  .sidf-ba { grid-template-columns: 1fr 36px 1fr; align-items: start; gap: 6px; }
  .sidf-arrow { padding-top: 140px; font-size: 26px; }
  .sidf-arrow::before { content: '→'; }
  .sidf-bar .btn { max-width: 260px; }
  .sidf-bar { justify-content: center; }
}
@media (max-width: 420px) {
  .sidf-card { padding: 12px; }
  .sidf-item { padding: 10px; }
  .sidf-side { padding: 8px; }
}

/* ───────────── 발표 모드 (프로젝터 · 대형 화면) ───────────── */
.sidp { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain; touch-action: manipulation;
  background: #0b0f14; color: #f5f7fa; font-family: Pretendard, 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif; line-height: 1.35; -webkit-text-size-adjust: 100%; }
.sidp *, .sidp *::before, .sidp *::after { box-sizing: border-box; }
.sidp:focus { outline: none; }
.sidp.is-idle { cursor: none; }
.sidp.is-idle .sidp-bar { opacity: 0; pointer-events: none; }
.sidp-top { flex: 0 0 auto; display: flex; align-items: baseline; gap: 2vmin; padding: 1.6vmin 3vmin; padding-top: calc(1.6vmin + env(safe-area-inset-top)); }
.sidp-brand { font-weight: 800; font-size: clamp(16px, 2.6vmin, 34px); color: #6fd0d3; white-space: nowrap; }
.sidp-meta { font-weight: 700; font-size: clamp(15px, 2.8vmin, 36px); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidp-pos { margin-left: auto; font-size: clamp(14px, 2.2vmin, 28px); color: #aeb8c4; white-space: nowrap; }
.sidp-prog { flex: 0 0 auto; height: 4px; background: #1f2a36; }
.sidp-prog i { display: block; height: 100%; width: 0; background: #41a8ab; transition: width .2s linear; }
.sidp-note { flex: 0 0 auto; padding: .8vmin 3vmin; background: #4a3a12; color: #ffd479; border-bottom: 1px solid #6b5420; font-size: clamp(13px, 2vmin, 24px); font-weight: 700; text-align: center; }
.sidp-note[hidden] { display: none; }
.sidp-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 2vmin 3vmin; }
.sidp-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 1.2vmin 3vmin; padding-bottom: calc(1.2vmin + env(safe-area-inset-bottom)); background: #121923; border-top: 1px solid #243040; transition: opacity .25s; }
.sidp-sp { flex: 1 1 auto; }
.sidp-count { min-width: 5em; text-align: center; font-weight: 800; font-size: clamp(16px, 2.4vmin, 30px); font-variant-numeric: tabular-nums; }
.sidp-btn { min-height: 48px; padding: 0 18px; border: 1px solid #3a4a5e; border-radius: 12px; background: #1b2634; color: #f5f7fa; font: inherit; font-size: clamp(15px, 2vmin, 22px); font-weight: 800; cursor: pointer; }
.sidp-btn:hover { background: #26374a; }
.sidp-btn:focus-visible { outline: 3px solid #6fd0d3; outline-offset: 2px; }
.sidp-btn:disabled { opacity: .35; cursor: default; }
.sidp-btn-p { background: #41a8ab; border-color: #41a8ab; color: #04201f; }
.sidp-btn-p:hover { background: #55bdc0; }
.sidp-msg { margin: auto; padding: 24px; text-align: center; font-size: clamp(18px, 3vmin, 36px); }
.sidp-msg .sidp-btn { margin-top: 14px; }
.sidp-sub { font-size: .7em; color: #aeb8c4; }

/* 개선활동 1건 = 한 화면: 개선 전 | → | 개선 후 */
.sidp-ba { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 2vmin; }
.sidp-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 1.2vmin; }
.sidp-h { margin: 0; text-align: center; font-size: clamp(18px, 3.4vmin, 44px); font-weight: 800; padding: .6vmin 0; border-radius: 1.2vmin; }
.sidp-b .sidp-h { background: #4a3a12; color: #ffd479; }
.sidp-a .sidp-h { background: #12402a; color: #7ee2a8; }
.sidp-arrow { align-self: center; color: #41a8ab; font-size: clamp(28px, 6vmin, 80px); font-weight: 800; line-height: 1; }
.sidp-arrow::before { content: '→'; }
.sidp-ph { flex: 1 1 0; min-height: 0; display: grid; gap: 1vmin; padding: 1vmin; background: #05080b; border-radius: 1.2vmin; }
.sidp-g1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.sidp-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.sidp-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.sidp-g9 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.sidp-ph-none { place-items: center; color: #7d8a99; font-size: clamp(14px, 2.4vmin, 30px); }
.sidp-img { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: .8vmin; background: transparent; overflow: hidden; cursor: zoom-in; }
.sidp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sidp-img:focus-visible { outline: 3px solid #6fd0d3; }
.sidp-img.is-bad { display: grid; place-items: center; color: #7d8a99; font-size: clamp(13px, 2vmin, 24px); cursor: default; }
.sidp-tx { flex: 0 0 auto; max-height: 30%; overflow: auto; margin: 0; text-align: center; font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; }
.sidp-t1 { font-size: clamp(22px, 4.4vmin, 64px); }
.sidp-t2 { font-size: clamp(20px, 3.6vmin, 52px); }
.sidp-t3 { font-size: clamp(18px, 2.9vmin, 42px); }
.sidp-t4 { font-size: clamp(16px, 2.3vmin, 34px); }
.sidp-empty { color: #7d8a99; font-weight: 500; }

/* 팀 전환 슬라이드 · 마지막 요약 */
.sidp-title { margin: auto; text-align: center; }
.sidp-t-kick { font-size: clamp(18px, 3.2vmin, 40px); font-weight: 800; color: #6fd0d3; letter-spacing: .08em; }
.sidp-title h1 { margin: 2vmin 0; font-size: clamp(34px, 11vmin, 150px); line-height: 1.1; font-weight: 800; overflow-wrap: anywhere; }
.sidp-t-date { font-size: clamp(20px, 4vmin, 54px); font-weight: 700; color: #cfd8e3; }
.sidp-t-sub { margin-top: 1.4vmin; font-size: clamp(18px, 3.4vmin, 44px); }
.sidp-t-ord { margin-top: 3vmin; font-size: clamp(14px, 2.2vmin, 28px); color: #7d8a99; }
.sidp-sum { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4vmin; }
.sidp-sbox { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 1.4vmin; padding: 2.4vmin; border-radius: 1.6vmin; background: #131b25; border: 1px solid #243040; }
.sidp-sbox h2 { margin: 0; font-size: clamp(20px, 3.4vmin, 46px); color: #6fd0d3; }
.sidp-sbody { flex: 1 1 auto; min-height: 0; overflow: auto; font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; }
.sidp-none { font-size: 1.2em; color: #7ee2a8; }

/* 사진 확대 (발표 덮개 안에서만) */
.sidp-zoom { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .95); cursor: zoom-out; }
.sidp-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sidp-zoom-n { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: rgba(0, 0, 0, .6); font-size: clamp(14px, 2vmin, 24px); font-weight: 700; }
.sidp-zoom-n:empty { display: none; }

/* 세로 화면(휴대폰 · 세로 모니터): 개선 전 위 / 개선 후 아래로 쌓고, 넘치면 스크롤 */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .sidp-stage { overflow-y: auto; }
  .sidp-ba { display: flex; flex-direction: column; flex: none; gap: 1.2vmin; }
  .sidp-ph { flex: none; height: 38vh; }
  .sidp-arrow { align-self: center; font-size: clamp(26px, 6vmin, 48px); }
  .sidp-arrow::before { content: '↓'; }
  .sidp-tx { max-height: none; }
  .sidp-sum { display: flex; flex-direction: column; flex: none; }
  .sidp-sbox { flex: none; }
  .sidp-bar { flex-wrap: wrap; gap: 8px; }
  .sidp-sp { display: none; }
  .sidp-btn { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .sidp-prog i, .sidp-bar { transition: none; } }