/* ═══════════════════════════════════════════════════════════════════ 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 동일. 아래만 집마다 다르다 ════════ */ /* ─────────────────────────────────────────────────────────────────── 변주부 · rpt 「지원단 보고서」 — 일일 안전활동 보고서 표지 + 접수 도장 · 머리 = 보고서 표지(제목 · 보고일/관리번호 표제란 · 인주 접수 도장 · 괘선 두 줄) · 몸통 = 보고서 칸. 라벨은 왼쪽 세로 괘선 안, 입력은 위아래 1px 괘선 사이 · 카드 오른쪽 8px 단색 띠 · 라틴 글꼴 Source Serif 4 = 표지 제목의 인쇄 세리프 · 강조색 = 석판 남회색 · 도장만 인주(--seal, --ng 와 다름) ─────────────────────────────────────────────────────────────────── */ html[data-app="rpt"]{ --f-lat:"Source Serif 4","Noto Sans KR",serif; --bg:#D8DEE4; --surface:#F4F1EA; --field-bg:transparent; --ink:#1A2229; --ink2:#4A5560; --ink3:#5C6570; --line:#C4C0B6; --acc:#3B5266; --acc-ink:#2C3F50; --acc-soft:#E4EAF0; --btn-bg:#3B5266; --btn-ink:#FFFFFF; --ok:#2E7D4F; --ng:#B8352C; --okBg:#E9F4ED; --ngBg:#FBECEA; --focus:0 0 0 3px rgba(59,82,102,.30); --brass:#8A6E1C; --mark-cut:var(--surface); --card-w:448px; --seal:#B3261E; --cover:#EFEBE3; } @media (prefers-color-scheme:dark){ html[data-app="rpt"]:not([data-mode="light"]){ --f-lat:"Source Serif 4","Noto Sans KR",serif; --bg:#0E1318; --surface:#171E26; --field-bg:transparent; --ink:#E6EDF3; --ink2:#A8B6C2; --ink3:#8A96A3; --line:#2A3540; --acc:#9DB4C8; --acc-ink:#B4C6D6; --acc-soft:#1C2730; --btn-bg:#9DB4C8; --btn-ink:#0E1318; --ok:#3ECF8E; --ng:#FF6B5E; --okBg:rgba(62,207,142,.13); --ngBg:rgba(255,107,94,.13); --focus:0 0 0 3px rgba(157,180,200,.34); --brass:#C9A227; --mark-cut:var(--surface); --card-w:448px; --seal:#E5544B; --cover:#171E26; } } html[data-app="rpt"][data-mode="dark"]{ --f-lat:"Source Serif 4","Noto Sans KR",serif; --bg:#0E1318; --surface:#171E26; --field-bg:transparent; --ink:#E6EDF3; --ink2:#A8B6C2; --ink3:#8A96A3; --line:#2A3540; --acc:#9DB4C8; --acc-ink:#B4C6D6; --acc-soft:#1C2730; --btn-bg:#9DB4C8; --btn-ink:#0E1318; --ok:#3ECF8E; --ng:#FF6B5E; --okBg:rgba(62,207,142,.13); --ngBg:rgba(255,107,94,.13); --focus:0 0 0 3px rgba(157,180,200,.34); --brass:#C9A227; --mark-cut:var(--surface); --card-w:448px; --seal:#E5544B; --cover:#171E26; } /* ── 무대 · 오른쪽 8px 단색 띠 ─────────────────────────────────────── */ html[data-app="rpt"] .card{border:1px solid var(--line)} html[data-app="rpt"].ui-phone .card{border:0} html[data-app="rpt"] .card::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:8px; background:var(--acc); pointer-events:none} /* ── 표지(머리) ───────────────────────────────────────────────────── */ html[data-app="rpt"] .cover{ background:var(--cover); color:var(--ink); padding:16px 24px 0 16px} html[data-app="rpt"] .cover-top{display:flex; align-items:center; gap:8px} html[data-app="rpt"] .cover-top .mark{color:var(--ink)} html[data-app="rpt"] .cover .wordmark{font-size:16px; color:var(--ink)} html[data-app="rpt"] .cover .modebtn{ margin-left:auto; width:40px; height:40px; border:1px solid var(--line); color:var(--ink2); background:transparent} html[data-app="rpt"] .cover .modebtn:hover{color:var(--ink); border-color:var(--acc)} html[data-app="rpt"] .cover-face{margin-top:16px} html[data-app="rpt"] .cover .eyebrow{ display:block; font-family:var(--f-lat); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--acc); line-height:1.2} html[data-app="rpt"] .cover h1{ margin:8px 0 0; font-family:var(--f-lat); font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--ink); word-break:keep-all} html[data-app="rpt"] .cover-meta{ display:flex; align-items:center; gap:8px; margin-top:16px; min-height:56px} html[data-app="rpt"] .meta-cell{ flex:1 1 0; min-width:0; padding:4px 8px 4px 0} html[data-app="rpt"] .meta-cell + .meta-cell{ border-left:1px solid var(--line); padding-left:8px} html[data-app="rpt"] .meta-cell span{ display:block; font-family:var(--f-lat); font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--ink3); line-height:1.2} html[data-app="rpt"] .meta-cell b{ display:block; margin-top:2px; font-family:var(--f-lat); font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden} html[data-app="rpt"] .seal{ flex:0 0 auto; width:56px; height:56px; margin-left:8px; display:flex; align-items:center; justify-content:center; border:2px solid var(--seal); border-radius:50%; box-shadow:inset 0 0 0 1px var(--seal); color:var(--seal); background:transparent; font-family:var(--f-lat); font-size:13px; font-weight:700; letter-spacing:.16em; transform:rotate(-13deg); line-height:1} html[data-app="rpt"] .cover-rules{ margin:8px 0 0; height:5px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink)} /* ── 보고서 칸(몸통) ──────────────────────────────────────────────── */ html[data-app="rpt"] .paper{padding:24px 24px 16px 16px; background:var(--surface)} html[data-app="rpt"] .lead{margin:0 0 16px; font-size:13px; color:var(--ink2); word-break:keep-all} html[data-app="rpt"] .lead b{color:var(--acc-ink); font-weight:700} html[data-app="rpt"] .field{ display:grid; grid-template-columns:80px 1fr; column-gap:8px; align-items:stretch; margin:0 0 16px} html[data-app="rpt"] .field label{ display:flex; align-items:center; justify-content:center; padding:0 8px; border-left:1px solid var(--line); border-right:1px solid var(--line); background:var(--acc-soft); font-family:var(--f-lat); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--acc-ink); text-align:center} html[data-app="rpt"] .field .inputwrap{grid-column:2; grid-row:1} html[data-app="rpt"] .field .hint{grid-column:2; grid-row:2} html[data-app="rpt"] input[type=text],html[data-app="rpt"] input[type=password]{ height:52px; padding:0 8px; background:var(--field-bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-left:0; border-right:0; font-weight:500} html[data-app="rpt"] .has-toggle input{padding-right:74px} html[data-app="rpt"] input:hover{border-top-color:var(--ink2); border-bottom-color:var(--ink2)} html[data-app="rpt"] input:focus{ border-top-color:var(--acc); border-bottom-color:var(--acc); box-shadow:inset 0 1px 0 0 var(--acc), inset 0 -1px 0 0 var(--acc)} html[data-app="rpt"] .hint{display:block; margin:6px 0 0; font-size:12px; color:var(--ink3)} html[data-app="rpt"] .toggle{ border:1px solid var(--line); background:var(--surface); color:var(--ink2)} html[data-app="rpt"] .toggle:hover{border-color:var(--acc); color:var(--acc-ink)} html[data-app="rpt"] .optrow{margin:0 0 16px} html[data-app="rpt"] .optrow label{font-size:13px; font-weight:600; color:var(--ink2)} /* ── 오류 · 안내 ──────────────────────────────────────────────────── */ html[data-app="rpt"] .err{ margin:0 0 16px; padding:8px 16px; font-size:13px; font-weight:700; color:var(--ng); background:var(--ngBg); border-left:3px solid var(--ng)} html[data-app="rpt"] .notice{margin:16px 0 0} html[data-app="rpt"] .notice .box{ background:var(--okBg); border-left:3px solid var(--ok); padding:8px 16px; font-size:13px; font-weight:700; color:var(--ok)} /* ── 단추 ─────────────────────────────────────────────────────────── */ html[data-app="rpt"] .btn-primary{background:var(--btn-bg); color:var(--btn-ink)} html[data-app="rpt"] .btn-primary:hover{filter:brightness(1.08)} html[data-app="rpt"] .divider{ display:flex; align-items:center; gap:8px; margin:16px 0 8px; font-family:var(--f-lat); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3)} html[data-app="rpt"] .divider::before,html[data-app="rpt"] .divider::after{ content:""; flex:1; height:1px; background:var(--line)} html[data-app="rpt"] .btn-secondary{ border:1px solid var(--line); color:var(--acc-ink); background:transparent} html[data-app="rpt"] .btn-secondary:hover{border-color:var(--acc)} /* ── 발밑 ─────────────────────────────────────────────────────────── */ html[data-app="rpt"] .secure{ display:flex; align-items:flex-start; gap:8px; margin:16px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--ink3); line-height:1.5; word-break:keep-all} html[data-app="rpt"] .secure svg{flex:0 0 auto; color:var(--acc-ink); margin-top:1px} html[data-app="rpt"] .copyright{ margin:8px 0 0; text-align:center; font-family:var(--f-lat); font-size:11px; font-weight:600; letter-spacing:.18em; color:var(--ink3)} html[data-app="rpt"].ui-phone .cover{padding:16px 24px 0 16px} html[data-app="rpt"].ui-phone .cover h1{font-size:22px} html[data-app="rpt"].ui-phone .cover-meta{height:48px; min-height:48px; max-height:48px; margin-top:8px} html[data-app="rpt"].ui-phone .meta-cell{padding:4px 0} html[data-app="rpt"].ui-phone .meta-cell span{font-size:11px; letter-spacing:.08em} html[data-app="rpt"].ui-phone .meta-cell b{font-size:11px; margin-top:0} html[data-app="rpt"].ui-phone .seal{ width:40px; height:40px; font-size:11px; letter-spacing:.08em; margin-left:0} html[data-app="rpt"].ui-phone .paper{padding:16px 24px 16px 16px} html[data-app="rpt"].ui-phone .field{grid-template-columns:64px 1fr; margin:0 0 8px} html[data-app="rpt"].ui-phone .field label{font-size:11px; letter-spacing:.08em; padding:0 4px}