:root{ /* 2026-09-21 3차 리빌드(30번 항목 직후): "1순위(가독성/통일성)+3순위(화려함)를 같이" 요청에 따라 쿨그레이 배경 + 채도를 낮춘 코발트블루 브랜드 컬러로 전면 리빌드. --muted/--amber/--line은 WCAG AA 대비율(4.5:1 / 4.5:1 / 시인성 개선)을 계산해서 확보한 값이다. --steel(브랜드, UI 크롬 전반)과 --pass(합격 상태 전용, 초록 유지)는 29번 항목에서 처음 분리한 패턴을 그대로 계승 — 브랜드가 바뀌어도 "초록=합격" 관례는 유지한다. 반경 스케일(--radius-sm/md/lg/pill)도 이번에 추가해 새 컴포넌트(벤토 카드·글래스 카드)에 일관되게 사용한다. */ --bg:#F4F5F7; --surface:#FFFFFF; --ink:#16181D; --muted:#5F6473; --steel:#3D5A80; --steel-dark:#2C4260; --steel-soft:#E3E9F1; --pass:#2F7350; --pass-soft:#E1F0E7; --fail:#C4432E; --fail-soft:#FBE6E1; --amber:#966018; --amber-soft:#F5E8D6; --line:#BFC4CD; --radius:8px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px; --card-shadow:0 1px 2px rgba(22,24,29,.05), 0 6px 18px rgba(22,24,29,.06); --glass-radius:18px; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} /* 2026-09-23(10): 맨 끝까지 스크롤한 뒤 더 당기면 페이지 전체가 튕기며(러버밴드) 상단 고정 바까지 같이 밀려 움직였다(iOS 사파리, 맥 트랙패드). 문서 전체의 튕김을 끈다 — 모달 안 스크롤은 기존 contain 설정 유지. 안드로이드 크롬의 "당겨서 새로고침"도 함께 꺼지므로 새로고침은 대시보드의 새로고침 버튼을 쓴다. */ html,body{overscroll-behavior-y:none;} /* 2026-09-23(10): 모바일에서 로그인 입력칸을 누르면 키보드가 올라오며 화면이 밀려, 로그인 화면(고정 레이어) 아래로 뒤쪽 앱 화면(이중점검 입력칸 등)이 드러났다. 로그인 화면이 떠 있는 동안에는 뒤쪽 앱을 보이지 않게(visibility — 레이아웃은 유지해서 로그인 직후 탭 표시기 등의 위치 계산에 영향 없음) 하고, 드러나는 바탕도 로그인 화면과 같은 검정으로 채운다. */ /* 협력사 공유 화면(share-mode)은 로그인 화면을 .hidden 없이 display:none으로만 숨기므로 제외한다. */ html:not(.share-mode):has(#loginScreen:not(.hidden)), html:not(.share-mode):has(#loginScreen:not(.hidden)) body{background:#07090d !important;} html:not(.share-mode) body:has(#loginScreen:not(.hidden)) > *:not(#loginScreen):not(.login-transition-overlay):not(.login-motion):not(#toast){visibility:hidden;} /* read-only vendor share view: hide the entire normal app, show only #shareView */ /* the photo lightbox and the toast live at body level (outside #shareView) but must still work on the vendor share page — without these exceptions clicking a photo or copying the link would silently do nothing there */ html.share-mode body > *:not(#shareView):not(#photoLightbox):not(#toast){display:none !important;} html.share-mode body{padding-bottom:0;} .share-view{min-height:100vh;padding:0 0 40px;} .share-view.hidden{display:none !important;} .share-view-header{ display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--surface); border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5; } .share-logo{width:36px;height:36px;object-fit:contain;flex-shrink:0;} .share-header-text{flex:1;min-width:0;} .share-brand-title{font-weight:800;font-size:14.5px;color:var(--ink);} .share-brand-sub{font-size:11.5px;color:var(--muted);margin-top:1px;letter-spacing:.04em;} .share-view-header .modal-x-close{flex-shrink:0;} .share-view-body{max-width:640px;margin:0 auto;padding:18px 16px 10px;} .share-view-footer-actions{max-width:640px;margin:0 auto;padding:0 16px 30px;} .notice-actions{display:flex;gap:8px;margin-bottom:16px;} .notice-actions .btn-ghost{ flex:1;display:flex;align-items:center;justify-content:center;gap:6px;width:auto; } .notice-actions .btn-ghost svg{width:15px;height:15px;flex-shrink:0;} .share-notice{ background:var(--steel-soft);color:var(--steel);border-radius:12px;padding:10px 14px; font-size:12px;font-weight:600;margin-bottom:16px;line-height:1.5; } .share-state{text-align:center;padding:80px 24px;color:var(--muted);font-size:13.5px;} .share-state svg{width:34px;height:34px;margin-bottom:12px;color:#B6BAC4;} /* ---------- formal "부적합 발생 통보서" notice document (share-view) ---------- */ .notice-doc{ background:#fff;border:1.5px solid var(--ink);border-radius:4px;overflow:hidden; box-shadow:var(--card-shadow); } .notice-head{ display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1.5px solid var(--ink); flex-wrap:wrap; } .notice-logo{height:26px;width:auto;object-fit:contain;flex-shrink:0;} .notice-head-title{ font-size:17px;font-weight:800;color:var(--ink);letter-spacing:.04em;flex:1;min-width:150px; } .notice-head-meta{ display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);padding-left:12px; } .nh-row{display:flex;gap:8px;font-size:11px;color:var(--muted);} .nh-row span:first-child{font-weight:700;color:var(--ink);min-width:44px;} .notice-table{width:100%;border-collapse:collapse;font-size:12.5px;} .notice-table th, .notice-table td{ border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:middle; } .notice-table th{ background:var(--surface);color:var(--muted);font-weight:700;width:78px;white-space:nowrap; } .notice-table td{color:var(--ink);position:relative;} .notice-stamp{ display:inline-block;margin-left:10px;padding:2px 10px;border:2px solid var(--fail);border-radius:4px; color:var(--fail);font-weight:800;font-size:11.5px;letter-spacing:.06em;transform:rotate(-4deg); vertical-align:middle; } .notice-stamp.rwk{border-color:var(--amber);color:var(--amber);} .notice-defect-types{padding:12px 16px;border-bottom:1px solid var(--line);} .ndt-label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:8px;} .ndt-list{display:flex;flex-wrap:wrap;gap:6px;} .ndt-pill{ padding:4px 10px;border-radius:20px;border:1px solid var(--line);font-size:11.5px;color:var(--muted); background:var(--surface); } .ndt-pill.active{border-color:var(--fail);color:var(--fail);background:var(--fail-soft);font-weight:700;} .notice-req{ padding:10px 16px;font-size:12px;color:var(--ink);background:var(--bg);border-bottom:1px solid var(--line); line-height:1.6; } .notice-content{padding:14px 16px 16px;} .notice-content-title{font-size:12.5px;font-weight:800;color:var(--fail);margin-bottom:8px;} .notice-content-text{font-size:13px;color:var(--ink);line-height:1.6;white-space:pre-wrap;margin-bottom:10px;} .notice-footer{ padding:10px 16px;font-size:10.5px;color:var(--muted);border-top:1px dashed var(--line);text-align:center; } .notice-supplement{margin-top:16px;} .notice-supplement-title{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px;} @media (max-width:480px){ .notice-head{flex-direction:column;align-items:flex-start;} .notice-head-meta{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:8px;width:100%;} .notice-table th{width:64px;font-size:11px;} } body{ background:var(--bg); color:var(--ink); font-family:'Noto Sans KR',system-ui,sans-serif; font-size:15px; line-height:1.5; -webkit-tap-highlight-color:transparent; min-height:100vh; padding-bottom:78px; /* 2026-09-22 추가: 특히 모바일 기기에서 작은 글자(JetBrains Mono 등 고정폭 폰트 혼용 구간)가 기기별 폰트 렌더러 차이로 흐릿하거나 겹쳐 보이는 문제를 줄이기 위한 전역 안티앨리어싱 힌트. */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .mono{font-family:'JetBrains Mono','Noto Sans KR',monospace;} button, input, select, textarea{font-family:inherit;font-size:inherit;color:inherit;} button{cursor:pointer;} h1,h2,h3{margin:0;font-weight:700;} /* ---------- Top bar ---------- */ .topbar{ position:sticky;top:0;z-index:20; background:var(--surface); color:var(--ink); border-bottom:1px solid var(--line); display:flex;align-items:center; padding:12px 112px 12px 18px; gap:12px; } .brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1;} .brand > div{min-width:0;} .brand-mark{ height:34px;width:auto;flex-shrink:0;display:block; cursor:pointer;transition:transform .12s;border-radius:6px; } .brand-mark:active{transform:scale(.92);} .brand-mark:focus-visible{outline:2px solid var(--steel);outline-offset:2px;} .brand-text{font-weight:800;font-size:15.5px;letter-spacing:.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;} .brand-sub{font-size:11.5px;color:var(--muted);font-weight:500;display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* 2026-09-19 후속: 타이틀 옆 시스템 전환 화살표 — 드롭다운 메뉴가 이 줄을 기준으로 절대위치로 뜨도록 position:relative를 추가(레이아웃에는 영향 없음, 새 포지셔닝 컨텍스트만 생김). */ .brand-title-row{position:relative;display:flex;align-items:center;gap:4px;min-width:0;} .brand-switch-btn{ flex-shrink:0;width:20px;height:20px;border:none;background:transparent;color:var(--muted); display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;padding:0; } .brand-switch-btn svg{width:15px;height:15px;} .brand-switch-btn:active{transform:scale(.9);background:var(--steel-soft);} .brand-switch-menu{ position:absolute;top:calc(100% + 8px);left:0;z-index:25; background:var(--surface);border:1px solid var(--line);border-radius:12px; padding:6px;box-shadow:0 8px 24px rgba(22,24,29,.18);min-width:230px; } .brand-switch-menu.hidden{display:none;} .brand-switch-item{ display:block;width:100%;text-align:left;padding:9px 10px;border:none;background:transparent; color:var(--ink);font-size:12.5px;font-weight:700;border-radius:8px;cursor:pointer; white-space:nowrap; } .brand-switch-item:active{background:var(--steel-soft);} .profile-badge{ position:absolute;top:50%;right:18px;transform:translateY(-50%); width:38px;height:38px;border-radius:50%;border:none;background:var(--steel);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px; flex-shrink:0;box-shadow:0 2px 6px rgba(61,90,128,.3); } #orgChartBtn.profile-badge{ right:64px; } .profile-badge svg{width:19px;height:19px;} /* ---------- Bottom navigation ---------- */ /* ---------- Bottom nav — floating "liquid glass" pill (iOS 26 스타일) ---------- 예전엔 화면 하단에 딱 붙는 불투명 바였는데, 화면 위에 살짝 띄워진 반투명 유리 알약 모양으로 바꿨다. 뒤 콘텐츠가 blur를 통해 살짝 비치고, 위쪽에 은은한 하이라이트를 얹어서 빛이 유리 표면에 맺힌 느낌을 낸다. 선택된 탭 아래에는 물방울처럼 둥글고 광택이 도는 인디케이터가 있는데, 이건 고정 위치가 아니라 js(main.js의 positionTabIndicator)가 현재 활성 탭 버튼의 실제 위치/너비를 측정해서 그 자리로 부드럽게 흘러가듯 이동시킨다 — 탭 버튼들이 전부 flex:1(균등폭)+min-width:0 이라 폰트 로딩 등으로 폭이 흔들릴 요소가 없고(이전 조직도 버그처럼 좌표 측정이 타이밍에 흔들리는 구조가 아님), 관리자 전용 탭이 보였다 안 보였다 해서 폭이 바뀌는 경우까지 ResizeObserver로 자동 재계산한다. */ .bottom-nav{ position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30; transform:translateX(-50%); width:calc(100% - 28px);max-width:460px; display:flex;align-items:center;gap:0; padding:7px;border-radius:28px;overflow:hidden; background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); border:1px solid rgba(255,255,255,.6); box-shadow:0 12px 32px rgba(22,24,29,.22), 0 2px 6px rgba(22,24,29,.1), inset 0 1px 0 rgba(255,255,255,.75); } /* 유리 표면 위쪽에 빛이 스치는 듯한 은은한 광택 오버레이 */ .bottom-nav::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 45%); } .tab-indicator{ position:absolute;top:7px;left:0;bottom:7px;width:0; border-radius:20px;z-index:0;pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); box-shadow:0 3px 10px rgba(61,90,128,.25), inset 0 1px 1px rgba(255,255,255,.95), inset 0 -2px 3px rgba(61,90,128,.1); transition:transform .4s cubic-bezier(.34,1.56,.64,1), width .4s cubic-bezier(.34,1.56,.64,1); } .bottom-nav .tab-btn{ position:relative;z-index:1; flex:1 1 0;min-width:0; border:none;background:transparent;color:#5F6473; display:flex;flex-direction:column;align-items:center;gap:2px; padding:8px 2px;font-size:10.5px;font-weight:600;white-space:nowrap; border-radius:20px;transition:color .25s; } .bottom-nav .tab-btn svg{width:20px;height:20px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);} .bottom-nav .tab-btn span{overflow:hidden;text-overflow:ellipsis;max-width:100%;} .bottom-nav .tab-btn.active{color:var(--steel-dark);} .bottom-nav .tab-btn.active svg{transform:scale(1.08);} /* 하단 탭이 화면에 붙는 바가 아니라 살짝 띄워진 알약 모양으로 바뀌면서 차지하는 공간이 늘어난 만큼(패딩+간격+안전영역), 본문이 그 밑에 가려지지 않도록 여백을 넉넉히 잡는다. */ main{max-width:1100px;margin:0 auto;padding:18px 14px calc(96px + env(safe-area-inset-bottom));} /* 2026-09-19 후속: 이중점검 "검사 기록 저장" 하단 플로팅 버튼 — 하단 탭(bottom-nav) 바로 위에 항상 떠 있다가, 원본 버튼(#submitBtn)이 실제로 화면에 보이면(끝까지 스크롤) 사라진다. bottom 값은 js/input-tab.js의 setupFloatingSaveBtn()이 bottom-nav의 실제 높이를 재서 매번 다시 계산해 인라인 스타일로 넣어준다(여기 기본값은 그 계산이 아직 안 됐을 때의 폴백). 원본 버튼과 똑같은 색/모양을 쓰되 살짝 떠 있는 느낌을 주기 위해 그림자를 더 준다. */ .floating-save-btn{ position:fixed;left:50%;transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom) + var(--nav-h, 66px) + 10px); /* 2026-09-23(5): 탭바(.bottom-nav)와 같은 기준 */ z-index:29; /* bottom-nav(30)보다 한 단계 아래 — 겹쳐도 하단 탭이 항상 위 */ width:calc(100% - 28px);max-width:460px; /* 2026-09-19 후속(버그 수정): 원래 var(--mono-ink)를 썼는데, 이 커스텀 속성은 #tab-input.mono-input 안에서만 정의돼 있다(아래 "MONOCHROME INPUT PAGE" 섹션 참고). 이 버튼은