/* =============================================================
   신규입사자 온보딩이 여는 창 — 맥 시트 (사용자 2026-10-31 "1")
   ① 구글시트 설정(#onboarding-sheets-modal)  ② 접근권한 설정(#onboarding-managers-modal)
   ③ 명함 디자인 선택(#ob-namecard-modal)  ④ 탁상용 캘린더 요청 안내(#ob-supply-guide-modal, ③ 고른 뒤 뜨는 창)
   흰 시트 · 둥근 모서리 · 얇은 그림자, 색 아이콘 · 큰 테두리 상자 → 회색 소제목 · 흰 묶음 · 머리카락 선.
   채운 파랑은 창마다 하나(저장 · 소모품요청으로 이동). 휴대폰은 아래에서 올라오는 시트.
   누르면 하는 일 · 저장 · 체크 · 명함 선택은 그대로.
   ============================================================= */
@media screen{
/* ---------- 공통 시트 ---------- */
html :is(#onboarding-sheets-modal,#onboarding-managers-modal,#ob-namecard-modal,#ob-supply-guide-modal){ background:var(--ui-scrim) !important }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal,#ob-namecard-modal,#ob-supply-guide-modal) > div{ padding:0 !important; border:0 !important; border-radius:var(--ui-radius-sheet) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-sheet) !important; font-family:var(--ui-font); color:var(--ui-text-1) }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal) > div{ display:flex; flex-direction:column; overflow:hidden !important }
html #onboarding-sheets-modal > div{ max-width:600px !important }
html #onboarding-managers-modal > div{ max-width:520px !important }
html #ob-namecard-modal > div{ max-width:600px !important }
html #ob-supply-guide-modal > div{ max-width:420px !important }
/* 머리: 큰 제목 · 색 아이콘 · 회색 띠 → 17px 제목, 닫기는 회색 동그라미 */
html :is(#onboarding-sheets-modal,#onboarding-managers-modal) > div > .flex:first-child, html :is(#ob-namecard-modal,#ob-supply-guide-modal) > div > .flex:first-child{ margin:0 !important; padding:14px 18px 4px !important; border:0 !important; background:transparent !important }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal,#ob-namecard-modal,#ob-supply-guide-modal) h3{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal,#ob-namecard-modal,#ob-supply-guide-modal) h3 > i{ display:none !important }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal,#ob-namecard-modal,#ob-supply-guide-modal) > div > .flex:first-child > button{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--ui-fill) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-body) !important; line-height:1 }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal,#ob-namecard-modal,#ob-supply-guide-modal) > div > .flex:first-child > button:hover{ background:var(--ui-fill-hover) !important; color:var(--ui-text-1) !important }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal) > div > p{ margin:0 !important; padding:0 18px 10px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; line-height:var(--ui-leading) }
/* 본문은 창 안에서만 스크롤, 아래 단추 줄은 고정 */
html :is(#onboarding-sheets-modal,#onboarding-managers-modal) > div > [id$="-body"]{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:1px 18px 4px !important; scrollbar-gutter:stable }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal) > div > [id$="-body"] > * + *{ margin-top:12px !important }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal) > div > .flex:last-child{ margin:0 !important; padding:10px 18px 14px !important; box-shadow:inset 0 .5px var(--ui-line) }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal) > div > .flex:last-child > button{ height:28px !important; padding:0 16px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; box-shadow:none !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important; min-width:72px }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal) > div > .flex:last-child > button:hover{ background:var(--ui-accent-hover) !important }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal) > div > .flex:last-child > button > i{ display:none !important }

/* ---------- ① 구글시트 설정: 부서 = 회색 소제목 + 흰 묶음, 시트 한 줄 = 제목 / 주소 ---------- */
html #onboarding-sheets-modal #onboarding-sheets-body > div{ padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important }
html #onboarding-sheets-modal #onboarding-sheets-body > div > .flex:first-child{ margin:0 0 4px !important; padding:0 2px !important }
html #onboarding-sheets-modal #onboarding-sheets-body > div > .flex:first-child > span{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #onboarding-sheets-modal #onboarding-sheets-body > div > .flex:first-child > span > i{ display:none !important }
html #onboarding-sheets-modal #onboarding-sheets-body > div > .flex:first-child > button{ color:var(--ui-accent) !important; font-size:var(--ui-text-footnote) !important }
html #onboarding-sheets-modal #onboarding-sheets-body [id^="ob-sheets-"]{ border-radius:var(--ui-radius-group); box-shadow:0 0 0 .5px var(--ui-line); background:var(--ui-surface); overflow:hidden }
html #onboarding-sheets-modal #onboarding-sheets-body [id^="ob-sheets-"] > * + *{ margin-top:0 !important }
html #onboarding-sheets-modal #onboarding-sheets-body [id^="ob-sheets-"] > div[data-dept]{ min-height:44px; padding:5px 8px 5px 12px !important; border-radius:0 !important; background:transparent !important; box-shadow:inset 0 -.5px var(--ui-line) }
html #onboarding-sheets-modal #onboarding-sheets-body [id^="ob-sheets-"] > div[data-dept]:last-child{ box-shadow:none }
html #onboarding-sheets-modal #onboarding-sheets-body [id^="ob-sheets-"] > div[data-dept] > i{ color:var(--ui-success) !important; font-size:var(--ui-text-footnote) !important }
html #onboarding-sheets-modal #onboarding-sheets-body [id^="ob-sheets-"] > div[data-dept] .truncate:not(input){ font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #onboarding-sheets-modal #onboarding-sheets-body [id^="ob-sheets-"] input[type="url"]{ height:20px; margin-top:1px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #onboarding-sheets-modal #onboarding-sheets-body [id^="ob-sheets-"] input[type="url"]:focus{ outline:0; color:var(--ui-text-1) !important; box-shadow:inset 0 -1px var(--ui-accent) !important }
html #onboarding-sheets-modal #onboarding-sheets-body [id^="ob-sheets-"] > div[data-dept] > button{ width:24px; height:24px; border-radius:var(--ui-radius-control); color:var(--ui-text-3) !important }
html #onboarding-sheets-modal #onboarding-sheets-body [id^="ob-sheets-"] > div[data-dept] > button:hover{ background:var(--ui-fill) !important; color:var(--ui-danger) !important }
html #onboarding-sheets-modal #onboarding-sheets-body [id^="ob-sheets-"] > .text-center{ padding:12px 0 !important; color:var(--ui-text-3) !important; font-size:var(--ui-text-footnote) !important }

/* ---------- ② 접근권한 설정: 부서 = 회색 소제목 + 흰 묶음, 사람 = 맥 체크칸 칩(고른 사람만 파란 체크) ---------- */
html #onboarding-managers-modal #onboarding-managers-body > div{ padding:10px 12px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:0 0 0 .5px var(--ui-line); background:var(--ui-surface) !important }
html #onboarding-managers-modal #onboarding-managers-body > div > span{ margin-bottom:8px !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #onboarding-managers-modal #onboarding-managers-body > div > .flex{ gap:6px !important }
html #onboarding-managers-modal #onboarding-managers-body label{ height:26px; gap:6px !important; padding:0 10px 0 8px !important; border:0 !important; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important }
html #onboarding-managers-modal #onboarding-managers-body label:hover{ background:var(--ui-fill-hover) !important }
html #onboarding-managers-modal #onboarding-managers-body label:has(input:checked){ background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; font-weight:var(--ui-weight-semibold) !important }
html #onboarding-managers-modal #onboarding-managers-body label input[type="checkbox"]{ accent-color:var(--ui-accent) }

/* ---------- ③ 명함 디자인 선택: 두꺼운 테두리 · 보라 고리 → 얇은 선, 고른 카드만 파란 고리 ---------- */
html #ob-namecard-modal > div > .p-6{ padding:4px 18px 16px !important }
html #ob-namecard-modal > div > .p-6 > p:first-child{ margin-bottom:10px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #ob-namecard-modal .grid{ gap:12px !important }
html #ob-namecard-modal [id^="nc-card-"]{ border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:0 0 0 .5px var(--ui-line) !important; transition:box-shadow var(--ui-dur-fast) var(--ui-ease) }
html #ob-namecard-modal [id^="nc-card-"]:hover{ box-shadow:0 0 0 1px var(--ui-line-control), var(--ui-elev-raised) !important }
html #ob-namecard-modal [id^="nc-card-"].border-indigo-500{ box-shadow:0 0 0 2px var(--ui-accent) !important }
html #ob-namecard-modal [id^="nc-card-"] > .p-3{ padding:8px !important; border-top:0 !important; box-shadow:inset 0 .5px var(--ui-line) }
html #ob-namecard-modal [id^="nc-card-"] > .p-3 > span{ font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #ob-namecard-modal [id^="nc-card-"].border-indigo-500 > .p-3 > span{ color:var(--ui-accent-text) !important; font-weight:var(--ui-weight-semibold) !important }
html #ob-namecard-modal [id^="nc-card-"] > .p-3 span.rounded-full{ padding:0 !important; background:transparent !important; color:var(--ui-accent-text) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #ob-namecard-modal > div > .p-6 > p:last-child{ margin-top:10px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }

/* ---------- ④ 캘린더 요청 안내: 파랑 · 노랑 상자 → 회색 묶음 · 주의 글자, 번호는 회색 동그라미 ---------- */
html #ob-supply-guide-modal > div > .p-6{ padding:4px 18px 16px !important }
html #ob-supply-guide-modal > div > .p-6 > .bg-indigo-50{ margin-bottom:12px !important; padding:8px 12px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface-alt) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important }
html #ob-supply-guide-modal > div > .p-6 > .bg-indigo-50 > i{ display:none !important }
html #ob-supply-guide-modal > div > .p-6 > .bg-indigo-50 .font-bold{ font-weight:var(--ui-weight-semibold) !important }
html #ob-supply-guide-modal .space-y-3 > * + *{ margin-top:10px !important }
html #ob-supply-guide-modal .space-y-3 .w-7.h-7{ width:20px !important; height:20px !important; margin-top:1px; background:var(--ui-fill) !important }
html #ob-supply-guide-modal .space-y-3 .w-7.h-7 > span{ font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-2) !important }
html #ob-supply-guide-modal .space-y-3 p.text-sm{ font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #ob-supply-guide-modal .space-y-3 p.text-xs{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #ob-supply-guide-modal > div > .p-6 > .bg-amber-50{ margin-top:12px !important; padding:0 !important; border:0 !important; background:transparent !important; color:var(--ui-warning) !important; font-size:var(--ui-text-footnote) !important }
html #ob-supply-guide-modal > div > .p-6 > .bg-amber-50 > i{ display:none !important }
html #ob-supply-guide-modal > div > .p-6 > .bg-amber-50 .font-bold{ font-weight:var(--ui-weight-semibold) !important }
html #ob-supply-guide-modal > div > .p-6 > .mt-6{ justify-content:flex-end; gap:8px !important; margin-top:16px !important }
html #ob-supply-guide-modal > div > .p-6 > .mt-6 > button{ flex:0 0 auto !important; height:28px !important; padding:0 14px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-callout) !important }
html #ob-supply-guide-modal > div > .p-6 > .mt-6 > button.bg-gray-100{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important }
html #ob-supply-guide-modal > div > .p-6 > .mt-6 > button.bg-gray-100:hover{ background:var(--ui-fill-hover) !important }
html #ob-supply-guide-modal > div > .p-6 > .mt-6 > button.bg-blue-600{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; box-shadow:none !important; font-weight:var(--ui-weight-semibold) !important }
html #ob-supply-guide-modal > div > .p-6 > .mt-6 > button.bg-blue-600 > i{ display:none !important }
}
/* ---------- 휴대폰: 아래에서 올라오는 시트 ---------- */
@media screen and (max-width:768px){
html :is(#onboarding-sheets-modal,#onboarding-managers-modal,#ob-namecard-modal,#ob-supply-guide-modal){ align-items:flex-end !important; padding:0 !important }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal,#ob-namecard-modal,#ob-supply-guide-modal) > div{ width:100% !important; max-width:none !important; max-height:88vh !important; margin:0 !important; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 !important; overflow-y:auto }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal) > div{ overflow-y:hidden }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal,#ob-namecard-modal,#ob-supply-guide-modal) > div > .flex:first-child > button{ width:30px; height:30px }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal) > div > .flex:last-child{ padding-bottom:calc(14px + env(safe-area-inset-bottom)) !important }
html :is(#onboarding-sheets-modal,#onboarding-managers-modal) > div > .flex:last-child > button{ width:100%; height:44px !important }
html #ob-supply-guide-modal > div > .p-6{ padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important }
html #ob-supply-guide-modal > div > .p-6 > .mt-6 > button{ flex:1 1 0 !important; height:44px !important }
html #onboarding-managers-modal #onboarding-managers-body label{ height:34px }
html #ob-namecard-modal > div > .p-6{ padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important }
}