/* =============================================================
   신규입사자 온보딩 — 맥 고밀도형 (사용자 2026-10-31 "1")
   범위: #onboarding-content 안쪽만(목록 화면). 여는 창(구글시트 · 접근권한 · 명함 선택)은 다음 차례.
   이니셜 동그라미 숨김(금지 규칙) · 색 머리 띠 → 회색 소제목 · 큰 입력 상자 → 한 줄 28px.
   채운 파랑 없음(화면당 1개 규칙: 줄마다 있던 '저장' · '명함 디자인 선택'은 흰 단추).
   누르면 하는 일 · 저장 · 업로드 · 체크는 그대로.
   ============================================================= */
@media screen{
/* ---------- 머리 ---------- */
html #onboarding-content > .container > .bg-white{ padding:16px 20px 20px !important; border:0 !important; border-radius:var(--ui-radius-card) !important; box-shadow:var(--ui-elev-raised) !important; background:var(--ui-surface) !important }
html #onboarding-content > .container > .bg-white > .flex:first-child{ margin:0 0 4px !important; padding:0 !important; border:0 !important; background:transparent !important; min-height:0 !important }
html #onboarding-content h2{ font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important; letter-spacing:var(--ui-tracking-tight) }
html #onboarding-content h2 + #onboarding-pending-badge{ min-width:18px; height:18px; padding:0 5px !important; border-radius:var(--ui-radius-pill) !important; background:var(--ui-danger) !important; color:var(--ui-on-accent) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important; line-height:18px; text-align:center }
html #onboarding-content > .container > .bg-white > .flex:first-child i.fa-user-plus{ display:none !important }
html #onboarding-content > .container > .bg-white > .flex:first-child button{ height:28px !important; padding:0 12px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; color:var(--ui-text-1) !important; box-shadow:var(--ui-elev-control) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important; display:inline-flex; align-items:center }
html #onboarding-content > .container > .bg-white > .flex:first-child button:hover{ background:var(--ui-fill-hover) !important }
html #onboarding-content > .container > .bg-white > .flex:first-child button > i{ margin-right:6px !important; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #onboarding-content #onboarding-description{ margin:0 0 12px !important; padding:0 !important; border:0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }

/* 진행중 · 완료 · 전체 → 세그먼트 */
html #onboarding-content > .container > .bg-white > .flex.mb-4:not(:first-child){ display:inline-flex !important; gap:0 !important; margin:0 0 12px !important; padding:2px !important; border-radius:var(--ui-radius-control); background:var(--ui-fill) !important }
html #onboarding-content [id^="ob-filter-"]{ height:24px; padding:0 14px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:transparent !important; color:var(--ui-text-1) !important; box-shadow:none !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #onboarding-content [id^="ob-filter-"].font-semibold{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important }

/* ---------- 사람 카드 ---------- */
html #onboarding-content #onboarding-list{ padding:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important }
html #onboarding-content #onboarding-list > .space-y-3 > * + *{ margin-top:12px !important }
html #onboarding-content #onboarding-list > .space-y-3 > div{ padding:10px 12px 8px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:0 0 0 .5px var(--ui-line) !important; background:var(--ui-surface) !important }
html #onboarding-content #onboarding-list .bg-gradient-to-br{ display:none !important }
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child{ gap:8px !important }
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child span.font-bold{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child span.text-gray-400{ margin-left:6px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child .text-\[11px\]{ margin-top:2px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
/* 진행중 · 완료 → 점 + 글자, 근로계약 2차 날짜 → 회색 글자(지난 날짜는 빨강 글자) */
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child span.rounded-full{ display:inline-flex; align-items:center; gap:5px; margin-left:8px !important; padding:0 !important; background:transparent !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child span.rounded-full:is(.bg-yellow-100,.bg-green-100)::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ui-warning) }
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child span.rounded-full.bg-green-100::before{ background:var(--ui-success) }
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child span.rounded-full.bg-indigo-100{ color:var(--ui-text-2) !important }
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child span.rounded-full.bg-red-100{ color:var(--ui-danger) !important }
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child span.rounded-full > i{ display:none !important }
/* 접기 · 삭제 */
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child > .flex:last-child button.bg-gray-100{ height:24px; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child > .flex:last-child button.bg-gray-100 > i{ color:var(--ui-text-2) }
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child > .flex:last-child button[title="삭제"]{ width:24px; height:24px; border-radius:var(--ui-radius-control); color:var(--ui-text-3) !important }
html #onboarding-content #onboarding-list > .space-y-3 > div > .flex:first-child > .flex:last-child button[title="삭제"]:hover{ background:var(--ui-fill) !important; color:var(--ui-danger) !important }

/* ---------- 체크리스트 묶음 ---------- */
html #onboarding-content [id^="ob-checklist-body-"]{ margin-top:10px !important }
html #onboarding-content [id^="ob-checklist-body-"] > * + *{ margin-top:10px !important }
html #onboarding-content [id^="ob-checklist-body-"] > div{ border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:0 0 0 .5px var(--ui-line); overflow:hidden }
html #onboarding-content [id^="ob-checklist-body-"] > div > .flex:first-child{ height:28px; padding:0 12px !important; background:var(--ui-surface-alt) !important; box-shadow:inset 0 -.5px var(--ui-line) }
html #onboarding-content [id^="ob-checklist-body-"] > div > .flex:first-child > span{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #onboarding-content [id^="ob-checklist-body-"] > div > .flex:first-child > span:first-child{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > :not([hidden]) ~ :not([hidden]){ border-top:0 !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div{ flex-direction:row !important; align-items:center !important; gap:10px !important; min-height:32px; padding:2px 12px !important; box-shadow:inset 0 -.5px var(--ui-line) }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div:last-child{ box-shadow:none }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex:first-child{ width:150px !important; gap:8px !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex:first-child > i{ font-size:var(--ui-text-footnote) }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex:first-child > i.text-green-500{ color:var(--ui-success) !important }
/* 안 한 항목: 칠한 회색 동그라미 → 빈 고리(맥 미리 알림 모양) */
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex:first-child > i.text-gray-300{ width:12px; height:12px; border-radius:50%; color:transparent !important; box-shadow:inset 0 0 0 1.5px var(--ui-text-3) }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex:first-child > i.text-gray-300::before{ content:none }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex:first-child > span{ font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important; white-space:nowrap }

/* 입력칸: 회색 상자 → 한 줄 28px 칸 + 흰 '저장' */
html #onboarding-content [id^="ob-cell-"]{ padding:0 !important; border-radius:0 !important; background:transparent !important }
html #onboarding-content [id^="ob-cell-"] > .flex{ gap:6px !important; max-width:420px }
html #onboarding-content [id^="ob-cell-"] input[type="text"]{ height:24px !important; padding:0 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important }
html #onboarding-content [id^="ob-cell-"] input[type="text"]::placeholder{ color:var(--ui-text-3) }
html #onboarding-content [id^="ob-cell-"] input[type="text"]:focus{ outline:0; box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
html #onboarding-content [id^="ob-cell-"] button.bg-blue-500{ height:24px; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #onboarding-content [id^="ob-cell-"] button.bg-blue-500:hover{ background:var(--ui-fill-hover) !important }
html #onboarding-content [id^="ob-cell-"] span.flex-1{ flex:0 1 auto !important; padding:0 !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important }
html #onboarding-content [id^="ob-cell-"] button[title="수정"]{ width:24px; height:24px; border-radius:var(--ui-radius-control); color:var(--ui-text-3) !important }
html #onboarding-content [id^="ob-cell-"] button[title="수정"]:hover{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important }
html #onboarding-content [id^="ob-cell-"] .border-dashed{ padding:0 !important; border:0 !important; background:transparent !important; color:var(--ui-text-3) !important; font-size:var(--ui-text-callout) !important }

/* 체크 · 파일 · 명함 */
html #onboarding-content [id^="ob-checklist-body-"] .divide-y label.select-none{ font-size:var(--ui-text-callout) !important; gap:8px !important }
/* 체크 줄은 왼쪽 이름과 같은 글자가 한 번 더 나오던 것 → 체크칸만(누르는 범위 · 동작 그대로) */
html #onboarding-content [id^="ob-checklist-body-"] .divide-y label.select-none > span:first-of-type{ display:none !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y label.select-none input[type="checkbox"]{ width:14px; height:14px; accent-color:var(--ui-accent) }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y label.select-none > span.text-green-600{ color:var(--ui-text-2) !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y label.select-none > a{ color:var(--ui-accent) !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y label.bg-blue-50{ height:24px; padding:0 10px !important; border-radius:var(--ui-radius-row) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y label.bg-blue-50 > i{ color:var(--ui-text-2) }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y label.bg-blue-50 + span{ color:var(--ui-text-3) !important; font-size:var(--ui-text-footnote) !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y a.text-blue-600{ color:var(--ui-accent) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y label[for]:not(.bg-blue-50){ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex-1 > div.inline-flex.text-green-600{ color:var(--ui-success) !important; font-weight:var(--ui-weight-regular) !important; font-size:var(--ui-text-callout) !important }
html #onboarding-content [id^="ob-namecard-wrap-"] > div{ padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important }
html #onboarding-content [id^="ob-namecard-wrap-"] > div > .flex{ justify-content:flex-start !important; flex-wrap:wrap; gap:6px 12px !important }
html #onboarding-content [id^="ob-namecard-wrap-"] > div > .flex > .flex:first-child > i{ display:none !important }
html #onboarding-content [id^="ob-namecard-wrap-"] span:is(.text-gray-500,.text-green-700){ color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important }
html #onboarding-content [id^="ob-namecard-wrap-"] span.bg-green-100{ padding:0 !important; background:transparent !important; color:var(--ui-success) !important; font-size:var(--ui-text-footnote) !important }
html #onboarding-content [id^="ob-namecard-wrap-"] button.bg-indigo-500{ height:24px; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #onboarding-content [id^="ob-namecard-wrap-"] button.bg-indigo-500 > i{ display:none !important }
html #onboarding-content [id^="ob-namecard-wrap-"] button.bg-indigo-500 + *, html #onboarding-content [id^="ob-namecard-wrap-"] > div > button.mt-2{ margin-top:0 !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y [id^="ob-namecard-wrap-"] :is(button,a):not(.bg-indigo-500){ color:var(--ui-accent) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #onboarding-content [id^="ob-namecard-wrap-"] > div:has(> button.mt-2){ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px }

/* 진행률: 얇은 선 + 오른쪽 숫자 */
html #onboarding-content #onboarding-list > .space-y-3 > div > .w-full.rounded-full{ height:3px !important; margin-top:10px !important; background:var(--ui-fill) !important }
html #onboarding-content #onboarding-list > .space-y-3 > div > .w-full.rounded-full > div{ height:3px !important; background:var(--ui-accent) !important }
html #onboarding-content #onboarding-list > .space-y-3 > div > .w-full.rounded-full > div.bg-green-500{ background:var(--ui-success) !important }
html #onboarding-content #onboarding-list > .space-y-3 > div > .w-full.rounded-full + div{ margin-top:4px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
}
@media screen and (max-width:768px){
html #onboarding-content > .container > .bg-white{ padding:12px !important }
html #onboarding-content > .container > .bg-white > .flex:first-child{ flex-wrap:wrap; gap:8px }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div{ min-height:44px; padding:4px 12px !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex:first-child{ width:128px !important; flex-shrink:0; gap:6px !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex:first-child > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--ui-text-footnote) !important }
/* 실제 데이터 확인(휴대폰): 파일 이름이 두 줄 + '파일 교체'가 셋째 줄 → 이름 한 줄 '…' + 교체 같은 줄 */
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex-1 > .flex-col{ flex-direction:row !important; align-items:center !important; gap:8px !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex-1 > .flex-col > a{ display:block !important; min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--ui-text-footnote) !important }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex-1 > .flex-col > a > i{ margin-right:4px }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y > div > .flex-1 > .flex-col > label[for]{ flex-shrink:0; white-space:nowrap }
/* 명함 줄: '중앙로고/형'처럼 꺾이던 것 → 위 줄 '디자인 · 선택완료', 아래 줄 단추들(한 줄씩 안 꺾임) */
html #onboarding-content [id^="ob-namecard-wrap-"] > div > .flex{ flex-direction:column; align-items:flex-start !important; gap:4px !important }
html #onboarding-content [id^="ob-namecard-wrap-"] > div > .flex > .flex{ flex-wrap:wrap; gap:4px 10px !important }
html #onboarding-content [id^="ob-namecard-wrap-"] :is(span,a,button){ white-space:nowrap }
html #onboarding-content [id^="ob-namecard-wrap-"] span:is(.text-gray-500,.text-green-700){ font-size:var(--ui-text-footnote) !important }
/* 저장된 값(이메일 등)은 휴대폰에서 마우스 올림이 없으니 자르지 않음: 작은 글자, 넘치면 다음 줄 */
html #onboarding-content [id^="ob-cell-"] span.flex-1{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; word-break:break-all; font-size:var(--ui-text-footnote) !important; line-height:1.3 }
html #onboarding-content [id^="ob-cell-"] input[type="text"]{ height:32px !important }
html #onboarding-content [id^="ob-cell-"] button.bg-blue-500{ height:32px }
html #onboarding-content [id^="ob-checklist-body-"] .divide-y label.bg-blue-50 + span{ display:none }
}