i.label.data01 {
    background-color: #6AB0FFFF;
}

i.label.data02 {
    background-color: #FFB730FF;
}

i.label.data03 {
    background-color: #6A79F8FF;
}

i.label.data04 {
    background-color: #84C98CFF;
}

i.label.data09 {
    background-color: #F86A6AFF;
}

.valid-err {
    color: #e11d48;
    font-size: 15px;
    margin-top: 6px;
    display: none;
}

/* ui-datepicker */
.ui-datepicker {
    z-index: 91 !important;
}

.ui-datepicker input,
.ui-datepicker select {
    height: auto !important;
    line-height: normal !important;
    padding: 2px 4px !important;
    width: auto !important;
    background: inherit !important;
    border: none !important;
    border-radius: 0 !important;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

.ui-datepicker .ui-state-highlight {
    background: var(--primaryColor) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url("/img/ui-icons_444444_256x240-a951530bb2fdd5fae5865476bfbbd19e.png");
}
.ui-widget-header .ui-icon {
    background-image: url("/img/ui-icons_444444_256x240-a951530bb2fdd5fae5865476bfbbd19e.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
    background-image: url("/img/ui-icons_555555_256x240-63636c83f28ba5da870077bb2c5324d4.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
    background-image: url("/img/ui-icons_ffffff_256x240-60628ad536a34fc9e4616d60a94b7b68.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
    background-image: url("/img/ui-icons_777620_256x240-07d56c6f4ce9edc572f7007d98b6afe5.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url("/img/ui-icons_cc0000_256x240-ee0bb72b1e4a6aa399dd9f4962e2b1fe.png");
}
.ui-button .ui-icon {
    background-image: url("/img/ui-icons_777777_256x240-336f407c5e5102c0f129c25a3fb1b6dc.png");
}

.pop_viewer .pop_layer .pop_con {
    height: calc(100% - 12.3333vw);
    gap: 4vw;
}

/* 인증번호 입력 — 입력칸 안 오른쪽에 남은 시간 (safety-wrk 와 동일) */
.input_wrapper input.certno {
    padding-right: 20.2667vw;
    font-size: var(--t4);
    letter-spacing: 0.5vw;
}

.input_wrapper .timer {
    position: absolute;
    top: 50%;
    right: var(--inputPadding);
    transform: translateY(-50%);
    color: var(--red);
}

/* ==========================================================================
 * 첫 출근 승인 — 첫 출근일 변경 (현장관리자 앱)
 * - 375px 기준 vw (1px = 0.26667vw), 본문 15px 이상 · 터치 영역 44px 이상
 * - 웹과 같은 구성: 요약 카드 + 질문형 3단계 (1 첫 출근일 → 2 출근한 날 → 3 시간 · 저장)
 * - 색: 파랑(--primaryColor) = 선택한 첫 출근일 · 다음 버튼, 노랑(--secondaryColor) = 승인일 · 주의
 * - design.css 는 퍼블 원본이라 수정하지 않고 이 파일(custom.css)에만 추가
 * - 목록 · 헤더 · 하단 시트는 stx 공통(st-*) 사용, 목록 전용 스타일은 화면(firstGtwkMngmView.html) style 에 있음
 * ========================================================================== */

/* ----- 첫 출근일 변경 화면 (전체 화면) ----- */
.fdaw_sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;   /* stx 헤더 · 하단 바 위 */
    flex-direction: column;
    background: #fff;
    font-size: 4vw;
    line-height: 1.5;
    color: #191F28;
}
.fdaw_sheet.on { display: flex; }
.fdaw_sheet button { font-family: inherit; }

/* 헤더 — 목록 화면과 같은 st-dtlbar(뒤로 · 제목) + 아래 진행 막대 */
.fdaw_sheet .fdaw_head {
    flex: none;
    position: relative;
    padding-top: env(safe-area-inset-top, 0px);   /* 아이폰 상단(시계 · 노치) 아래부터 — 전체 화면이라 stx 헤더 여백을 못 받음 */
    background: #fff;
}
.fdaw_progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #F2F4F6; }
.fdaw_progress i { display: block; height: 3px; background: var(--primaryColor, #005CFC); transition: width .2s; }

.fdaw_sheet .fdaw_icon_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11.7333vw;
    height: 11.7333vw;
    padding: 0;
    border: 0;
    background: transparent;
    color: #333D4B;
}
.fdaw_sheet .fdaw_icon_btn:disabled { color: #D1D6DB; }

.fdaw_sheet .fdaw_body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 3.2vw;
    padding: 3.2vw 5.3333vw 3.2vw;
}
.fdaw_sheet .fdaw_body > * { flex: none; }

/* 하단 버튼 — 회색 [취소 · 이전] + 파랑 [다음], 홈 바에 가리지 않게 아래 여백 */
.fdaw_sheet .fdaw_foot {
    flex: none;
    display: flex;
    gap: 2.1333vw;
    padding: 2.6667vw 5.3333vw calc(5.3333vw + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -1px 0 #F2F4F6;
}
.fdaw_sheet .fdaw_foot button {
    height: 14.9333vw;
    padding: 0 2.1333vw;
    border: 0;
    border-radius: 3.7333vw;
    font-size: 4.5333vw;
    font-weight: 700;
    white-space: nowrap;
}
.fdaw_sheet .fdaw_foot button.prev { flex: 1; background: #F2F4F6; color: #4E5968; }
.fdaw_sheet .fdaw_foot button.next { flex: 2.3; background: var(--primaryColor, #005CFC); color: #fff; }
.fdaw_sheet .fdaw_foot button.next:disabled { background: #D1D6DB; }

/* 요약 카드 — 모든 단계에서 '현재 → 변경' 과 등록될 출근 수 */
.fdaw_sum_card { display: flex; flex-direction: column; gap: 1.0667vw; padding: 2.6667vw 3.7333vw; border-radius: 3.7333vw; background: #F2F4F6; }
.fdaw_sum_row { display: flex; align-items: center; justify-content: space-between; gap: 2.1333vw; }
.fdaw_sum_nm { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 3.7333vw; color: #4E5968; }
.fdaw_sum_nm strong { font-size: 4.2667vw; font-weight: 800; color: #191F28; }
.fdaw_sum_cnt { flex: none; padding: 0.8vw 2.4vw; border-radius: 999px; background: #fff; font-size: 3.4667vw; font-weight: 700; color: #333D4B; }
.fdaw_sum_dt { display: flex; align-items: center; flex-wrap: wrap; gap: 1.0667vw 2.1333vw; }
.fdaw_sum_dt .org { font-size: 3.7333vw; color: #6B7684; }
.fdaw_sum_dt .org b { font-size: 4.2667vw; font-weight: 700; }
.fdaw_sum_dt .new { font-size: 3.7333vw; font-weight: 600; color: var(--primaryColor, #005CFC); }
.fdaw_sum_dt .new b { font-size: 5.3333vw; font-weight: 800; }
.fdaw_sum_dt svg { flex: none; width: 4.2667vw; height: 4.2667vw; color: #8B95A1; }

/* 단계 제목 — 번호(1 / 3) + 질문 + 설명 */
.fdaw_step_head { display: flex; flex-direction: column; gap: 1.0667vw; }
.fdaw_step_no { font-size: 3.7333vw; font-weight: 700; color: var(--primaryColor, #005CFC); }
.fdaw_step_head h2 { margin: 0; font-size: 5.8667vw; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em; color: #191F28; }
.fdaw_step_head p { margin: 0; font-size: 4vw; color: #4E5968; }
.fdaw_step_head p b { color: #191F28; }
.fdaw_step_head p:empty { display: none; }

/* 1단계 — 빠른 선택 (출근기록일 초록 점 · 승인일 노란 점) */
.fdaw_chips { display: flex; gap: 2.1333vw; overflow-x: auto; }
.fdaw_chips button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 1.6vw;
    height: 11.7333vw;
    padding: 0 3.2vw;
    border: 1px solid #E5E8EB;
    border-radius: 3.2vw;
    background: #fff;
    font-size: 4vw;
    font-weight: 600;
    color: #333D4B;
    white-space: nowrap;
}
.fdaw_chips button.on { border-color: var(--primaryColor, #005CFC); background: #E8F1FF; color: #0047C7; }
.fdaw_chips i { width: 2.1333vw; height: 2.1333vw; border-radius: 50%; }
.fdaw_chips i.rec { background: #1BA35B; }
.fdaw_chips i.appr { background: var(--secondaryColor, #ffb240); }

/* 달력 — 범례 없이 칸 아래 글자로 표시 (첫 출근 · 등록 · 출근 · 승인 · 오늘) */
.fdaw_cal_nav { display: flex; align-items: center; justify-content: space-between; height: 10.1333vw; }
.fdaw_cal_nav strong { font-size: 4.5333vw; font-weight: 800; }
.fdaw_cal_grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.fdaw_wk { padding: 0.5333vw 0 1.0667vw; font-size: 3.4667vw; font-weight: 600; color: #8B95A1; }
.fdaw_wk.sun { color: #E42939; }
.fdaw_wk.sat { color: #3182F6; }
.fdaw_day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2667vw;
    height: 12.8vw;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.fdaw_day .num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10.6667vw;
    height: 10.6667vw;
    border-radius: 50%;
    font-size: 4.5333vw;
    font-weight: 600;
    color: #191F28;
}
.fdaw_day .tag { height: 2.9333vw; font-size: 2.9333vw; font-weight: 700; line-height: 2.9333vw; color: #6B7684; white-space: nowrap; }
.fdaw_day.sun .num { color: #E42939; }
.fdaw_day.sat .num { color: #3182F6; }
.fdaw_day:not(:disabled):active .num { background: #F2F4F6; }
.fdaw_day.out .num { font-weight: 500; color: #9EA6B0; }                      /* 고를 수 없는 날 — 읽히는 회색 */
.fdaw_day.pick .num { font-weight: 700; box-shadow: inset 0 0 0 1.5px #D1D6DB; } /* 2단계 — 고를 수 있는 날 */
.fdaw_day.today .num { box-shadow: inset 0 0 0 1.5px #B0B8C1; }
.fdaw_day.appr .num { background: #FFF3DF; }                                   /* 승인일 — 노랑 포인트 */
.fdaw_day.rec .tag { color: #1B8A4E; }
.fdaw_day.appr .tag { color: #8A5A00; }
.fdaw_day.chk .num { background: #1BA35B; color: #fff; font-weight: 800; box-shadow: none; }
.fdaw_day.chk .tag { color: #1B8A4E; }
.fdaw_day.sel .num { background: var(--primaryColor, #005CFC); color: #fff; font-weight: 800; box-shadow: none; }
.fdaw_day.sel .tag { color: var(--primaryColor, #005CFC); }

/* 1단계 — 안내 (상자 없이 줄로) */
.fdaw_notice { padding-top: 2.6667vw; border-top: 1px solid #F2F4F6; }
.fdaw_notice_list { display: flex; flex-direction: column; gap: 1.6vw; margin: 0; padding: 0; list-style: none; font-size: 4vw; line-height: 1.45; color: #4E5968; }
.fdaw_notice_list li { display: flex; align-items: flex-start; gap: 1.6vw; }
.fdaw_notice_list li > svg { flex: none; width: 4.8vw; height: 4.8vw; margin-top: 0.5333vw; }
.fdaw_notice_list li > span { flex: 1; min-width: 0; }
.fdaw_notice_list li strong { font-weight: 700; color: #191F28; }
.fdaw_notice_list li.ok > svg { color: #1BA35B; }
.fdaw_notice_list li.info > svg { color: #8B95A1; }

/* 날짜 뱃지 — 첫 출근일(연파랑, 고정) · 고른 날(연초록, × 로 빼기) */
.fdaw_sec_tit { flex: none; font-size: 4vw; font-weight: 700; color: #333D4B; }
.fdaw_dt_badges { display: flex; flex-wrap: wrap; gap: 2.1333vw; }
.fdaw_dt_badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5333vw;
    height: 11.7333vw;
    padding: 0 1.0667vw 0 3.2vw;
    border-radius: 3.2vw;
    background: #E3F6EA;
    font-size: 4vw;
    font-weight: 700;
    color: #0B7A3E;
    white-space: nowrap;
}
.fdaw_dt_badge.first { gap: 1.6vw; padding-right: 3.2vw; background: #E8F1FF; color: #0047C7; }
.fdaw_dt_badge small { font-size: 3.2vw; font-weight: 700; }
.fdaw_dt_badge .btnFdawDtDel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 9.6vw;
    height: 9.6vw;
    padding: 0;
    border: 0;
    border-radius: 2.1333vw;
    background: transparent;
    color: #0B7A3E;
}
.fdaw_dt_badge .btnFdawDtDel:active { background: rgba(11, 122, 62, .12); }
.fdaw_none { margin: 0; font-size: 4vw; color: #6B7684; }

/* 2단계 — 고른 날 (한 줄, 많으면 옆으로 밀어서 보기) */
.fdaw_pick { display: flex; align-items: center; gap: 2.6667vw; padding-top: 3.2vw; border-top: 1px solid #F2F4F6; }
.fdaw_pick .fdaw_dt_badges { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; }

/* 3단계 — 출근 등록할 날 · 출퇴근 시간 · 근무 시간 · 주의 */
.fdaw_step3 { display: flex; flex-direction: column; gap: 4.2667vw; }
.fdaw_step3_dt, .fdaw_step3_tm { display: flex; flex-direction: column; gap: 2.1333vw; }
.fdaw_step3_tm { gap: 3.2vw; }
.fdaw_tm_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6667vw; }
.fdaw_tm { display: flex; flex-direction: column; gap: 1.6vw; }
.fdaw_tm > label { display: flex; align-items: center; gap: 1.6vw; font-size: 4vw; font-weight: 700; color: #333D4B; white-space: nowrap; }
/* 시간 상자 — 누르면 폰 기본 시간 선택(휠)이 뜸, 상자에는 큰 숫자만 */
.fdaw_tm_box { display: flex; align-items: center; justify-content: center; height: 16vw; padding: 0 1.6vw; border-radius: 3.7333vw; background: #F2F4F6; }
.fdaw_tm_box select {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 13.8667vw;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2.6667vw;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 6.9333vw;
    font-weight: 800;
    color: #191F28;
    text-align: center;
    text-align-last: center;
}
.fdaw_tm_box select:focus { outline: 2px solid var(--primaryColor, #005CFC); outline-offset: -2px; background: #fff; }
.fdaw_tm_box > span { font-size: 6.4vw; font-weight: 800; color: #8B95A1; }
.fdaw_next { display: none; padding: 0.5333vw 1.6vw; border-radius: 1.6vw; background: #FFF3DF; font-size: 3.2vw; font-weight: 800; color: #8A5A00; }
.fdaw_shift { display: flex; flex-direction: column; gap: 1.6vw; }
.fdaw_shift p { margin: 0; }
.fdaw_shift_work { display: flex; align-items: center; justify-content: space-between; gap: 2.6667vw; padding: 3.2vw 3.7333vw; border: 1px solid #E5E8EB; border-radius: 3.2vw; font-size: 4vw; color: #4E5968; }
.fdaw_shift_work strong { display: inline-flex; align-items: center; gap: 1.6vw; font-size: 4.8vw; font-weight: 800; color: #191F28; }
.fdaw_shift_work em { padding: 0.5333vw 1.6vw; border-radius: 1.6vw; background: #FFF3DF; font-size: 3.2vw; font-style: normal; font-weight: 800; color: #8A5A00; }
.fdaw_shift_hint { padding: 0 1.0667vw; font-size: 3.7333vw; line-height: 1.45; color: #6B7684; }
.fdaw_warn { display: flex; align-items: flex-start; gap: 2.6667vw; padding: 3.2vw 3.7333vw; border-radius: 3.7333vw; background: #FFF3DF; font-size: 4vw; line-height: 1.5; color: #6B4600; }
.fdaw_warn i { flex: none; width: 2.1333vw; height: 2.1333vw; margin-top: 1.8667vw; border-radius: 50%; background: var(--secondaryColor, #ffb240); }

/* ----- 저장 확인 — st-sheet(하단 시트) 안의 요약 · 경고만 지정, 첫 출근일 변경 화면 위에 표시 ----- */
#fdawCfm { z-index: 310; }
#fdawCfm .st-sheet__title { line-height: 1.4; }
.fdaw_cfm_list { display: flex; flex-direction: column; gap: 2.6667vw; margin: 0 0 3.2vw; padding: 3.7333vw 4.2667vw; border-radius: 3.7333vw; background: #F2F4F6; font-size: 4.2667vw; }
.fdaw_cfm_list div { display: flex; justify-content: space-between; gap: 3.2vw; }
.fdaw_cfm_list dt { flex: none; color: #4E5968; }
.fdaw_cfm_list dd { margin: 0; text-align: right; font-weight: 700; }
/* 경고 — 출근 등록이 있을 때만 */
.fdaw_cfm_warn { display: none; align-items: center; gap: 2.6667vw; margin-bottom: 3.2vw; padding: 3.2vw 3.7333vw; border: 0.4vw solid #F3B4B4; border-radius: 3.7333vw; background: #FFF1F1; color: #D61111; }
.fdaw_cfm_warn.on { display: flex; }
.fdaw_cfm_warn svg { flex-shrink: 0; width: 5.8667vw; height: 5.8667vw; }
.fdaw_cfm_warn p { margin: 0; }
.fdaw_cfm_warn strong { font-size: 4.2667vw; font-weight: 700; color: #B30F0F; }

/* ==========================================================================
 * 안전교육 상세 — 참석자 명단 · 대리 서명할 사람 찾기 바텀시트 (현장관리자 앱)
 * - 375px 기준 vw, 본문 15px 이상 · 터치 영역 44px 이상
 * - 모두 .edu_sheet 아래에만 걸린다(같은 id 를 쓰는 다른 화면에 영향 없음)
 * ========================================================================== */
.pop_bg.edu_sheet {
    /* inset 대신 네 방향 — 오래된 웹뷰 대비. z-index 는 design.css 의 .pop_bg 값 그대로 */
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    width: auto; height: auto; max-width: none; margin: 0;
    align-items: flex-end; justify-content: stretch;
    padding: 0; background: rgba(0, 0, 0, .4);
    overflow: hidden; overscroll-behavior: contain;
}
/* 시트가 열려 있는 동안 뒤 화면이 같이 스크롤되지 않게(JS 없이 — 기존 코드가 style 에 display:flex 를 넣는다) */
html:has(.pop_bg.edu_sheet[style*="flex"]), body:has(.pop_bg.edu_sheet[style*="flex"]) { overflow: hidden; }
/* 대상자 찾기는 명단 위에 같은 크기로 겹친다 — 어둡게 두 번 깔리지 않게 */
.pop_bg.edu_sheet.pop_select_candidate { background: transparent; }

.edu_sheet .es-panel {
    display: flex; flex-direction: column;
    width: 100%; max-width: 100%; box-sizing: border-box;
    /* 위 16vw + 아이폰 상단(노치 · 상태바) 만큼 비운다 */
    height: calc(100% - 16vw - env(safe-area-inset-top, 0px));
    min-width: 0; margin: 0; padding: 0;
    background: #fff; border-radius: 5.3333vw 5.3333vw 0 0;
    box-shadow: 0 -2.1333vw 6.4vw rgba(0, 0, 0, .12);
    animation: esSheetUp .28s cubic-bezier(.2, .8, .2, 1);
    overflow: hidden;
}
@keyframes esSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* 머리 : (←) 제목 · 한 줄 설명 · ✕ */
.edu_sheet .es-top { flex: none; display: flex; align-items: flex-start; gap: 1.6vw; padding: 5.8667vw 3.2vw 0 5.3333vw; }
.edu_sheet .es-ttl { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.8vw; }
.edu_sheet .es-ttl h2, .edu_sheet .es-ttl p { word-break: keep-all; overflow-wrap: anywhere; }
.edu_sheet .es-ttl h2 { margin: 0; font-size: 5.3333vw; font-weight: 800; line-height: 8.5333vw; color: #191F28; }
.edu_sheet .es-ttl p { margin: 0; font-size: 4vw; color: #6B7684; }
.edu_sheet a.btn_close.es-ic {
    position: static; overflow: visible; background-image: none;
    flex: none; width: 10.6667vw; height: 8.5333vw; display: flex; align-items: center; justify-content: center;
    font-size: 0; color: transparent; text-indent: 0; background: none; border: 0;
}
.edu_sheet a.btn_close.es-ic--back { width: 9.6vw; margin-left: -2.1333vw; }
.edu_sheet .es-ic svg { width: 6.4vw; height: 6.4vw; }

/* 인원 카드 — #cntWork · #cntAttend 는 기존 JS 가 채운다 */
.edu_sheet .es-card { flex: none; display: flex; margin: 4.8vw 5.3333vw 1.6vw; border-radius: 4.2667vw; background: #F2F6FF; box-shadow: inset 0 0 0 1px #DCE6FB; }
.edu_sheet .es-card__c { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3.7333vw 0 3.2vw; }
.edu_sheet .es-card__c + .es-card__c { box-shadow: -1px 0 0 #D1DCF2; }
.edu_sheet .es-card__k { font-size: 4.2667vw; font-weight: 600; color: #4E5968; }
.edu_sheet .es-card__v { font-size: 8vw; font-weight: 800; line-height: 1.2; color: #191F28; }
.edu_sheet .es-card__v strong { font-weight: 800; }
.edu_sheet .es-card__v small { margin-left: 2px; font-size: 4.8vw; font-weight: 700; vertical-align: baseline; position: static; line-height: inherit; }
.edu_sheet .es-card__v--on { color: #005CFC; }

/* 검색 (대상자 찾기) */
.edu_sheet .es-search { flex: none; display: flex; gap: 2.1333vw; padding: 5.8667vw 5.3333vw 2.1333vw; }
.edu_sheet .es-search input {
    flex: 1 1 0; min-width: 0; height: 13.8667vw; box-sizing: border-box; margin: 0;
    padding: 0 4.2667vw 0 11.7333vw; border: 0; border-radius: 3.2vw; font-size: 4.5333vw; color: #191F28;
    background: #F2F4F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238B95A1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 4.2667vw 50%;
}
.edu_sheet .es-search input::placeholder { color: #8B95A1; }
/* TBM 명단 검색칸과 같게 — 누르는 중엔 파란 테두리 · 오른쪽 × (누르면 input 이벤트로 전체 다시 조회) */
.edu_sheet .es-search input:focus { outline: none; background-color: #fff; box-shadow: inset 0 0 0 2px #005CFC; }
.edu_sheet .es-search input::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none; width: 5.3333vw; height: 5.3333vw; margin: 0 -2px 0 2.1333vw; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23333D4B' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") no-repeat center / 4.8vw;
}
.edu_sheet .es-search button {
    flex: none; height: 13.8667vw; padding: 0 4.8vw; margin: 0; border: 0; border-radius: 3.2vw;
    background: #E3ECFD; font-size: 4.5333vw; font-weight: 800; color: #0047C7;
}

.edu_sheet .es-note { margin: 1.0667vw 0 2px; font-size: 4vw; color: #6B7684; }
.edu_sheet .es-note[hidden] { display: none; }

/* 목록 — table 을 한 사람 한 줄로 */
.edu_sheet .es-list {
    flex: 1 1 0; min-height: 0; min-width: 0; padding: 0 5.3333vw;
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* 목록 끝에서 뒤 화면으로 스크롤이 넘어가지 않게 */
}
.edu_sheet .es-list table, .edu_sheet .es-list tbody { display: block; width: 100%; border: 0; border-collapse: collapse; }
.edu_sheet .es-list colgroup, .edu_sheet .es-list thead { display: none; }
.edu_sheet .es-list tr { display: block; }
/* design.css 의 td 높이 · 줄높이 · 세로정렬을 풀어야 이름과 구분이 붙는다 */
.edu_sheet .es-list td { display: block; width: auto; height: auto; min-height: 0; padding: 0; border: 0; background: none; text-align: left; line-height: 1.4; vertical-align: middle; }
.edu_sheet .es-list tr.row {
    position: relative; display: grid; align-items: center; column-gap: 3.7333vw; row-gap: 2px;
    grid-template-rows: auto auto; align-content: center;
    height: auto; min-height: 18.1333vw; padding: 2.6667vw 0; box-sizing: border-box; border-bottom: 1px solid #F2F4F6;
}
/* 서명 칸 — 두 줄 높이의 가운데, 오른쪽 끝 */
.edu_sheet #eduAttendeeTbody tr.row td:nth-child(3), .edu_sheet #eduWorkerTbody tr.row td:nth-child(4) {
    align-self: center; display: flex; align-items: center; justify-content: flex-end;
}
.edu_sheet .es-list td.name {
    grid-area: name; align-self: end; min-width: 0;
    font-size: 4.8vw; font-weight: 700; color: #191F28;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.edu_sheet .es-list img.sign {
    display: block; width: 20.2667vw; height: 10.1333vw; box-sizing: border-box; padding: 0.8vw 1.6vw;
    object-fit: contain; object-position: center; border-radius: 2.1333vw; background: #F7F8FA; box-shadow: inset 0 0 0 1px #EEF0F3;
    margin: 0; max-width: none; max-height: none; vertical-align: top; float: none;
}

/* 명단 : 구분 · 이름 · 서명 */
.edu_sheet #eduAttendeeTbody tr.row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name sign" "type sign"; }
.edu_sheet #eduAttendeeTbody tr.row td:nth-child(1) { grid-area: type; align-self: start; font-size: 4vw; color: #6B7684; }
.edu_sheet #eduAttendeeTbody tr.row td:nth-child(3) { grid-area: sign; }

/* 대상자 찾기 : 선택 · 구분 · 이름 · 서명 */
.edu_sheet #eduWorkerTbody tr.row { grid-template-columns: 6.9333vw minmax(0, 1fr) auto; grid-template-areas: "chk name sign" "chk type sign"; }
.edu_sheet #eduWorkerTbody tr.row td:nth-child(1) { grid-area: chk; position: static; }
.edu_sheet #eduWorkerTbody tr.row td:nth-child(2) { grid-area: type; align-self: start; font-size: 4vw; color: #6B7684; }
.edu_sheet #eduWorkerTbody tr.row td:nth-child(4) { grid-area: sign; }
/* 체크박스는 줄 전체를 덮어 어디를 눌러도 체크 — 보이는 상자는 td::before */
.edu_sheet #eduWorkerTbody tr.row input[type="checkbox"] {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0;
    opacity: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.edu_sheet #eduWorkerTbody tr.row td:nth-child(1)::before {
    content: ""; display: block; width: 6.9333vw; height: 6.9333vw; box-sizing: border-box;
    border-radius: 1.8667vw; background: #fff; box-shadow: inset 0 0 0 2px #B0B8C1;
}
.edu_sheet #eduWorkerTbody tr.row:has(input:checked) td:nth-child(1)::before {
    box-shadow: none;
    background: #005CFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center;
}
/* :has() 를 모르는 웹뷰(iOS 15.3 이하 · 크롬 104 이하) — 체크 표시가 안 보이므로 진짜 체크박스를 보여 준다 */
@supports not selector(:has(*)) {
    .edu_sheet #eduWorkerTbody tr.row input[type="checkbox"] {
        position: static; width: 6.9333vw; height: 6.9333vw; opacity: 1;
        -webkit-appearance: checkbox; appearance: auto; accent-color: #005CFC;
    }
    .edu_sheet #eduWorkerTbody tr.row td:nth-child(1)::before { display: none; }
}

/* 서명이 없어 고를 수 없는 사람 — 기존 JS 가 체크박스를 disabled 로 그린다 */
.edu_sheet #eduWorkerTbody tr.row:has(input:disabled) { opacity: .5; }
.edu_sheet #eduWorkerTbody tr.row:has(input:disabled) input { cursor: default; }
.edu_sheet #eduWorkerTbody tr.row:has(input:disabled) td:nth-child(1)::before { background: #F2F4F6; box-shadow: inset 0 0 0 2px #E5E8EB; }
.edu_sheet #eduWorkerTbody tr.row:has(input:disabled) td:nth-child(4) img { display: none; }
.edu_sheet #eduWorkerTbody tr.row:has(input:disabled) td:nth-child(4)::after { content: "서명 없음"; font-size: 4vw; font-weight: 700; color: #8B95A1; }
.edu_sheet #eduWorkerTbody tr.row[data-atnd-type-cd="SM"]:has(input:disabled) td:nth-child(4)::after { content: "대리 서명 불가"; }

/* 빈 목록 — 기존 문구 대신 */
.edu_sheet .es-list td.empty { display: block; padding: 18.6667vw 0 0; font-size: 0; text-align: center; }
.edu_sheet .es-list td.empty::before { display: block; font-size: 4.8vw; font-weight: 700; color: #191F28; }
.edu_sheet .es-list td.empty::after { display: block; margin-top: 1.6vw; font-size: 4vw; color: #6B7684; }
.edu_sheet #eduAttendeeTbody td.empty::before { content: "아직 서명한 사람이 없어요"; }
.edu_sheet #eduAttendeeTbody td.empty::after { content: "대리 서명으로 참석자를 추가할 수 있어요"; }
.edu_sheet #eduWorkerTbody td.empty::before { content: "추가할 사람이 없어요"; }
.edu_sheet #eduWorkerTbody td.empty::after { content: "이미 참석했거나 대상자가 없어요"; }

/* 아래 버튼 */
.edu_sheet .es-btm { flex: none; display: flex; gap: 2.1333vw; padding: 3.2vw 4.8vw calc(4.2667vw + env(safe-area-inset-bottom, 0px)); }
.edu_sheet .es-btn {
    flex: 1 1 0; min-width: 0; height: 15.4667vw; margin: 0; border: 0; border-radius: 3.2vw;
    font-size: 4.8vw; font-weight: 700; opacity: 1; filter: none;
}
.edu_sheet .es-btn--gray { background: #F2F4F6; color: #333D4B; }
.edu_sheet .es-btn--blue { flex-grow: 1.25; background: #005CFC; color: #fff; font-size: 5.0667vw; font-weight: 800; }
/* 아무도 안 골랐으면 등록 버튼을 눌리지 않게 — 기존 JS 는 알럿 뒤에 찾기 시트를 닫아 버린다 */
.pop_select_candidate:not(:has(#eduWorkerTbody input:checked)) #btnRegWorker {
    pointer-events: none; background: #E5E8EB; color: transparent; font-size: 0;
}
.pop_select_candidate:not(:has(#eduWorkerTbody input:checked)) #btnRegWorker::before {
    content: "사람을 골라 주세요"; font-size: 4.8vw; font-weight: 700; color: #8B95A1;
}
/* 서명 뒤 — 기존 JS 가 disabled 를 건다. 글자는 CSS 로 바꿔 보여준다 */
.edu_sheet #gtwkSignBtn:disabled { background: #F2F4F6; color: transparent; font-size: 0; position: relative; }
.edu_sheet #gtwkSignBtn:disabled::before { content: "✓ 서명했어요"; font-size: 5.0667vw; font-weight: 800; color: #8B95A1; }