/* ═══════════════════════════════════════════════════════════════════ JB Tech 로그인 · 공통부 v0.5 — 네 집(stg·wqm·sim·rpa) 동일 바이트 ─────────────────────────────────────────────────────────────────── 공통부는 「구조 · 동작 · 접근성」만 정한다. 색 · 질감 · 배치 · 타이포는 이 안에 한 줄도 없다 → 전부 아래 변주부. 변주부가 반드시 정의해야 하는 토큰: --bg --surface --field-bg --ink --ink2 --ink3 --line --acc --acc-ink --acc-soft --btn-bg --btn-ink --ok --ng --okBg --ngBg --focus --brass --mark-cut --card-w 밝기 = 집 = ═══════════════════════════════════════════════════════════════════ */ :root{ --f-ko:"Noto Sans KR",Pretendard,"Malgun Gothic","Apple SD Gothic Neo",system-ui,-apple-system,"Segoe UI",sans-serif; --h-field:52px; --h-btn:54px; --h-btn2:46px; --card-w:420px; --brass:#B7952A; --mark-cut:#FFFFFF; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ min-height:100dvh; display:flex; flex-direction:column; overflow-x:hidden; background:var(--bg); color:var(--ink); font-family:var(--f-ko); font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; } .stage{ flex:1; display:flex; align-items:center; justify-content:center; position:relative; padding:28px 16px calc(28px + env(safe-area-inset-bottom,0px)); } .card{position:relative; width:100%; max-width:var(--card-w); background:var(--surface); overflow:hidden} form{margin:0} h1{margin:0} p{margin:0} /* ── 입력 기본형 (테두리·여백·색은 변주부가 준다) ─────────────────── */ input[type=text],input[type=password]{ width:100%; height:var(--h-field); padding:0 12px; font:inherit; font-size:16px; color:var(--ink); background:var(--field-bg); border:0; border-radius:0; -webkit-appearance:none; appearance:none; transition:border-color .12s, box-shadow .12s, background-color .12s; } input::placeholder{color:var(--ink3); opacity:1} input:focus{outline:none} .inputwrap{position:relative; display:block} .has-toggle input{padding-right:74px} .toggle{position:absolute; top:50%; right:7px; transform:translateY(-50%); height:36px; min-width:58px; padding:0 10px; font-size:12.5px; font-weight:700} .optrow{display:flex; align-items:center; gap:10px} .optrow input[type=checkbox]{width:20px; height:20px; margin:0; flex:0 0 auto; cursor:pointer; accent-color:var(--acc)} .optrow label{cursor:pointer} /* ── 단추 기본형 ──────────────────────────────────────────────────── */ button{font:inherit; color:inherit; cursor:pointer; border:0; background:none} .btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:var(--h-btn); font-size:16px; font-weight:800; transition:filter .12s, border-color .12s, color .12s, background-color .12s} .btn:disabled{opacity:.6; cursor:not-allowed} .btn-secondary{height:var(--h-btn2); font-size:14.5px; font-weight:700} /* ── 오류 · 안내 자리 (비어 있으면 자리도 없다) ──────────────────── */ .err:empty{display:none} .notice:empty{display:none} /* ── 회사 표시 · 밝기 단추 ────────────────────────────────────────── */ .mark{display:block; flex:0 0 auto} .wordmark{display:inline-flex; gap:.2em; align-items:baseline; line-height:1; font-weight:900; letter-spacing:-.02em} .wordmark i{font-style:normal; font-weight:800; color:var(--brass)} .modebtn{display:flex; align-items:center; justify-content:center; padding:0; flex:0 0 auto} .modebtn .i{display:none} html[data-mode="auto"] .modebtn .i-auto, html[data-mode="light"] .modebtn .i-sun, html[data-mode="dark"] .modebtn .i-moon{display:block} /* ── 초점 · 접근성 ────────────────────────────────────────────────── */ button:focus-visible,a:focus-visible,input:focus-visible{outline:none; box-shadow:var(--focus)} input[type=checkbox]:focus-visible{outline:2px solid var(--acc); outline-offset:2px; box-shadow:none} .sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} /* ── 폰 / 컴퓨터 (자 = 900px · jeby-login.js 의 applyUiMode 가 붙인다) ── */ .phone-only{display:none} .pc-only{display:none} html.ui-phone .phone-only{display:block} html.ui-pc .pc-only{display:block} html.ui-phone .stage{align-items:stretch; justify-content:stretch; padding:0 0 env(safe-area-inset-bottom,0px)} html.ui-phone .card{max-width:none; min-height:100dvh; border-radius:0} html.ui-phone .btn{min-height:52px} html.ui-phone input[type=text],html.ui-phone input[type=password]{min-height:48px} html.ui-phone .toggle{height:44px; min-height:44px} html.ui-phone[data-app] .modebtn{min-width:44px; min-height:44px; width:44px; height:44px} @media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}} /* ════════ 여기까지 공통부 — 네 집 SHA-256 동일. 아래만 집마다 다르다 ════════ */ /* ─────────────────────────────────────────────────────────────────── 변주부 · sup 「투입인력관리」 — 근무표·달력 세계 · 카드 머리 = 밝은 종이 위 2026년 5월 근무표 전폭 도해(요일 머리 · 주말/공휴일 눌린 칸 · 현장 색 칩 · ½ · 「오늘」 황동 테두리) + 달력 월 표기 · 몸통 = 근무표 장부: 왼쪽 이름표 열 + 오른쪽 칸 · 초점 시 행 전체 황동 테두리(달력 고른 칸) · 강조 = 황동 하나 · 숫자 = IBM Plex Mono · 어두움 한 벌(3블록) · 이 조각은 공통부(1~94행 · 여섯 집 동일) 바로 아래(95행부터 끝까지)를 통째로 대체한다 — 1~94 그대로 두고 이 조각 전문을 이어 붙이면 94+151=245줄 — 공통부는 손대지 않는다 ─────────────────────────────────────────────────────────────────── */ html[data-app="sup"]{ --f-num:"IBM Plex Mono",Consolas,"Courier New",monospace; --bg:#EDEFF1; --surface:#FFFFFF; --field-bg:#FFFFFF; --off:#F4F6F8; --ink:#171C21; --ink2:#4B555E; --ink3:#5F6972; --line:#D3D8DD; --acc:#B7952A; --acc-ink:#7A6114; --acc-soft:#F4EFDF; --btn-bg:#1F262C; --btn-ink:#FFFFFF; --ok:#2E7D4F; --ng:#B8352C; --okBg:#EAF6EF; --ngBg:#FDEDEC; --brass:#7A6114; --mark-cut:var(--surface); --focus:0 0 0 3px rgba(183,149,42,.32); --card-w:440px; --shadow:0 1px 0 rgba(23,28,33,.06), 0 16px 40px rgba(23,28,33,.12); --s4:#2E7274; --s5:#4A579A; --s6:#7A548A; --s7:#A0503A; } @media (prefers-color-scheme:dark){ html[data-app="sup"]:not([data-mode="light"]){ --bg:#0F1317; --surface:#171C21; --field-bg:#0F1317; --off:#12171C; --ink:#EDF0F2; --ink2:#B2BAC2; --ink3:#8A949E; --line:#2A3238; --acc:#C9A227; --acc-ink:#D9B44A; --acc-soft:#242A2F; --btn-bg:#C9A227; --btn-ink:#171C21; --ok:#3ECF8E; --ng:#FF6B5E; --okBg:rgba(62,207,142,.14); --ngBg:rgba(255,107,94,.13); --brass:#C9A227; --mark-cut:var(--surface); --focus:0 0 0 3px rgba(201,162,39,.40); --shadow:0 20px 50px rgba(0,0,0,.5); --s4:#82CFD0; --s5:#A9B3F2; --s6:#D2A8E0; --s7:#F2A58A; } } html[data-app="sup"][data-mode="dark"]{ --bg:#0F1317; --surface:#171C21; --field-bg:#0F1317; --off:#12171C; --ink:#EDF0F2; --ink2:#B2BAC2; --ink3:#8A949E; --line:#2A3238; --acc:#C9A227; --acc-ink:#D9B44A; --acc-soft:#242A2F; --btn-bg:#C9A227; --btn-ink:#171C21; --ok:#3ECF8E; --ng:#FF6B5E; --okBg:rgba(62,207,142,.14); --ngBg:rgba(255,107,94,.13); --brass:#C9A227; --mark-cut:var(--surface); --focus:0 0 0 3px rgba(201,162,39,.40); --shadow:0 20px 50px rgba(0,0,0,.5); --s4:#82CFD0; --s5:#A9B3F2; --s6:#D2A8E0; --s7:#F2A58A; } /* ── 무대 · 카드 ──────────────────────────────────────────────────── */ [data-app="sup"] body{word-break:keep-all} [data-app="sup"] .card{border:1px solid var(--line); border-radius:4px; box-shadow:var(--shadow)} [data-app="sup"].ui-phone .card{border:0; border-radius:0; box-shadow:none} /* ── 머리 · 이달 근무표 ───────────────────────────────────────────── */ [data-app="sup"] .head{padding:16px 24px; background:var(--surface); border-bottom:1px solid var(--line)} [data-app="sup"] .head-top{display:flex; align-items:center; gap:12px; height:40px} [data-app="sup"] .head-top .mark{color:var(--ink); --brass:#C9A227} [data-app="sup"] .head-top .wordmark{font-size:16px; color:var(--ink)} [data-app="sup"] .head-top .modebtn{margin-left:auto; width:40px; height:40px; border:1px solid var(--line); border-radius:3px; color:var(--ink3); background:transparent} [data-app="sup"] .head-top .modebtn:hover{color:var(--ink); border-color:var(--ink3)} [data-app="sup"] .title{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:8px 0 16px} [data-app="sup"] .title .txt{min-width:0} [data-app="sup"] .eyebrow{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--acc-ink); line-height:16px} [data-app="sup"] .eyebrow::before{content:""; width:8px; height:8px; background:var(--acc); flex:0 0 auto} [data-app="sup"] .title h1{margin-top:4px; font-size:26px; font-weight:900; letter-spacing:-.03em; line-height:32px; color:var(--ink)} [data-app="sup"] .mtag{flex:0 0 auto; text-align:right; font-family:var(--f-num); line-height:1; padding-bottom:4px} [data-app="sup"] .mtag i{display:block; font-style:normal; font-size:12px; font-weight:500; letter-spacing:.08em; color:var(--ink3); line-height:16px} [data-app="sup"] .mtag b{display:block; margin-top:4px; font-size:22px; font-weight:600; color:var(--ink); line-height:24px; font-variant-numeric:tabular-nums} [data-app="sup"] .mtag b em{font-style:normal; font-family:var(--f-ko); font-size:14px; font-weight:700; color:var(--ink2); margin-left:2px} [data-app="sup"] .cal{display:block; width:100%; height:auto; font-family:var(--f-num); font-variant-numeric:tabular-nums} [data-app="sup"] .cal .c-off rect{fill:var(--off)} [data-app="sup"] .cal .c-line path{stroke:var(--line); stroke-width:1; fill:none} [data-app="sup"] .cal .c-dow text{font-family:var(--f-ko); font-size:9.5px; font-weight:700; fill:var(--ink2)} [data-app="sup"] .cal .c-dow .sun{fill:var(--ng)} [data-app="sup"] .cal .c-num text{font-size:9.5px; font-weight:500; fill:var(--ink)} [data-app="sup"] .cal .c-num .out{fill:var(--ink3); opacity:.7} [data-app="sup"] .cal .c-num .sun{fill:var(--ng)} [data-app="sup"] .cal .c-num .today{fill:var(--acc-ink); font-weight:600} [data-app="sup"] .cal .c-chip .bg{fill:var(--sc); opacity:.14} [data-app="sup"] .cal .c-chip .bar{fill:var(--sc)} [data-app="sup"] .cal .c-chip text{font-family:var(--f-ko); font-size:9px; font-weight:700; fill:var(--sc)} [data-app="sup"] .cal .c-chip .half{font-family:var(--f-num); font-weight:600; fill:var(--acc-ink)} [data-app="sup"] .cal .c-today{fill:none; stroke:var(--acc); stroke-width:1.5} [data-app="sup"] .lead{margin:16px 0 0; font-size:14px; line-height:20px; color:var(--ink2)} /* ── 몸통 · 근무표 장부 ───────────────────────────────────────────── */ [data-app="sup"] .ledger{padding:24px; background:var(--surface)} [data-app="sup"] .rows{border:1px solid var(--line); border-radius:3px; overflow:hidden} [data-app="sup"] .field{display:grid; grid-template-columns:96px 1fr; position:relative} [data-app="sup"] .rows .field + .field{border-top:1px solid var(--line)} [data-app="sup"] .field label{grid-row:1 / 3; display:flex; align-items:center; padding:0 16px; background:var(--off); border-right:1px solid var(--line); font-size:14px; font-weight:700; color:var(--ink2); line-height:20px} [data-app="sup"] .field .inputwrap{grid-column:2} [data-app="sup"] input[type=text],[data-app="sup"] input[type=password]{ height:48px; padding:0 16px; border:0; border-radius:0; background:var(--field-bg)} [data-app="sup"].ui-phone input[type=text],[data-app="sup"].ui-phone input[type=password]{height:48px} [data-app="sup"] .has-toggle input{padding-right:80px} [data-app="sup"] input:focus{box-shadow:none} [data-app="sup"] .field:focus-within{outline:2px solid var(--acc); outline-offset:-2px; z-index:1} [data-app="sup"] .field:focus-within label{color:var(--acc-ink); background:var(--acc-soft)} [data-app="sup"] .hint{grid-column:2; display:block; height:24px; padding:0 16px 8px; font-size:12px; line-height:16px; color:var(--ink3); background:var(--field-bg)} [data-app="sup"] .toggle{right:8px; height:32px; min-width:56px; padding:0 8px; font-size:12px; font-weight:700; border:1px solid var(--line); border-radius:3px; background:var(--surface); color:var(--ink2)} [data-app="sup"].ui-phone .toggle{height:40px; min-height:40px} [data-app="sup"] .toggle:hover{border-color:var(--acc); color:var(--acc-ink)} [data-app="sup"] .optrow{margin:16px 0 0} [data-app="sup"] .optrow label{font-size:14px; font-weight:500; color:var(--ink2); line-height:20px} /* ── 오류 · 안내 (칩과 같은 꼴 — 왼쪽 색 띠) ───────────────────────── */ [data-app="sup"] .err{margin:16px 0 0; padding:8px 16px; border-left:3px solid var(--ng); border-radius:0 3px 3px 0; background:var(--ngBg); color:var(--ng); font-size:14px; font-weight:700; line-height:20px} [data-app="sup"] .notice{margin:16px 0 0} [data-app="sup"] .notice .box{padding:8px 16px; border-left:3px solid var(--ok); border-radius:0 3px 3px 0; background:var(--okBg); color:var(--ok); font-size:14px; font-weight:700; line-height:20px} /* ── 단추 ─────────────────────────────────────────────────────────── */ [data-app="sup"] .btn-primary{margin-top:16px; height:56px; border-radius:3px; background:var(--btn-bg); color:var(--btn-ink); font-weight:900} [data-app="sup"] .btn-primary:hover{filter:brightness(1.12)} [data-app="sup"] .divider{display:flex; align-items:center; gap:8px; margin:16px 0 8px; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--ink3); line-height:16px} [data-app="sup"] .divider::before,[data-app="sup"] .divider::after{content:""; flex:1; height:1px; background:var(--line)} [data-app="sup"] .btn-secondary{height:48px; font-size:14px; border:1px solid var(--line); border-radius:3px; color:var(--ink2); background:transparent} [data-app="sup"] .btn-secondary:hover{border-color:var(--acc); color:var(--acc-ink)} /* ── 발밑 · 표제란 ────────────────────────────────────────────────── */ [data-app="sup"] .tblock{border-top:1px solid var(--line); background:var(--off)} [data-app="sup"] .tbrow{display:grid; grid-template-columns:1fr 1fr 1fr} [data-app="sup"] .tc{padding:8px 16px; border-right:1px solid var(--line); min-width:0} [data-app="sup"] .tc:last-child{border-right:0} [data-app="sup"] .tc > span{display:block; font-size:12px; font-weight:500; color:var(--ink3); line-height:16px} [data-app="sup"] .tc > b{display:block; font-size:14px; font-weight:700; color:var(--ink); line-height:20px; white-space:nowrap} [data-app="sup"] .tc b .num{font-family:var(--f-num); font-weight:600} [data-app="sup"] .secure{display:flex; align-items:flex-start; gap:8px; padding:8px 16px; border-top:1px solid var(--line); font-size:12px; line-height:16px; color:var(--ink3)} [data-app="sup"] .secure svg{flex:0 0 auto; color:var(--ok)} [data-app="sup"] .copyright{padding:8px 16px; border-top:1px solid var(--line); text-align:right; font-family:var(--f-num); font-size:12px; font-weight:600; letter-spacing:.24em; color:var(--ink3); line-height:16px}