/* =================================================================== JebyPJT 로그인 — 공용 골격 (규격서 2026-08-20 기준) 4제품(RPA·SIM·STG·WQM)이 이 파일 하나를 공유한다. 테마는 로 갈아끼운다. (B만 data-mode="night|day" 추가) 외부 자원 참조 0건 — 전부 이 파일 안에서 끝난다. =================================================================== */ :root{ --font:"Pretendard","Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,"Segoe UI",sans-serif; /* 신호등 계보색 — 기본값(밝은 바탕용). 테마별로 재정의한다 */ --ok:#2E7D4F; --caution:#C98A1E; --ng:#B8352C; --okBg:#EAF6EF; --ngBg:#FDEDEC; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ min-height:100dvh; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%; display:flex; flex-direction:column; overflow-x:hidden; } /* ---- 무대 -------------------------------------------------------- */ .stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:32px 16px calc(32px + env(safe-area-inset-bottom,0px)); } .card{ width:100%; max-width:var(--card-w); background:var(--surface); border:var(--card-border,1px solid var(--line)); border-radius:var(--r-card); box-shadow:var(--shadow); overflow:hidden; } .card-body{padding:var(--pad-lg,32px 32px 28px)} /* ---- 장식 띠(테마별) ------------------------------------------------ A: 없음(높이 0) · B: 신호등 3색 띠 · C 계열: 안전 빗금 띠 */ .accent-strip{height:0} .accent-strip span{display:none} /* ---- 브랜드 각인 --------------------------------------------------- */ .brand{display:flex; align-items:center; gap:var(--brand-gap,14px)} .brand.center{flex-direction:column; text-align:center} .brand .mark{flex:0 0 auto; display:block} .wordmark{font-size:var(--wm-size,28px); font-weight:800; letter-spacing:-.02em; color:var(--brand-ink); line-height:1} .wordmark i{font-style:normal; color:var(--accent-ink)} .tagline{margin:5px 0 0; font-size:var(--tag-size,12px); font-weight:700; color:var(--ink3); letter-spacing:.03em} .brand.center .tagline{margin-top:4px} .rule{height:1px; background:var(--line2); margin:24px 0 20px; border:0} /* 주/야 전환 단추 — B안 전용 (다른 테마엔 마크업 자체가 없다) */ .modebtn{ margin-left:auto; flex:0 0 auto; width:46px; height:46px; border-radius:var(--r-field); background:var(--steel,var(--line2)); border:1px solid var(--line); color:var(--ink2); cursor:pointer; display:flex; align-items:center; justify-content:center; } .modebtn:hover{border-color:var(--accent); color:var(--accent)} .modebtn:focus-visible{outline:none; box-shadow:var(--focus)} .modebtn .sun{display:none} [data-mode="day"] .modebtn .sun{display:block} [data-mode="day"] .modebtn .moon{display:none} /* ---- 제품 이름 슬롯(가변) — 테마별 모양은 CSS로만 바뀐다 ------------- */ .proj{margin:var(--proj-margin,24px 0 22px)} .proj.plain{text-align:center} .proj.panel{ display:flex; align-items:center; gap:14px; background:var(--proj-bg,transparent); color:var(--proj-ink,var(--ink)); border-left:var(--proj-border-left,none); border-radius:var(--r-field); padding:var(--proj-pad,0); } .proj .sign{flex:0 0 auto} .proj .txt{min-width:0} .proj .eyebrow{ display:inline-block; font-size:var(--eyebrow-size,11px); font-weight:800; letter-spacing:.12em; color:var(--eyebrow-color,var(--accent-ink)); background:var(--eyebrow-bg,transparent); border-radius:var(--r-chip); padding:var(--eyebrow-pad,0); margin-bottom:5px; } .proj h1{ margin:0; font-size:var(--proj-h1-size,22px); font-weight:800; letter-spacing:-.02em; color:var(--proj-h1-color,var(--ink)); line-height:1.28; word-break:keep-all; } .proj p{margin:6px 0 0; font-size:13px; color:var(--ink3); font-weight:500} .leadin{ margin:0 0 20px; font-size:13px; color:var(--ink2); font-weight:600; padding-left:11px; border-left:3px solid var(--accent); } /* ---- 입력 ---------------------------------------------------------- */ .field{margin:0 0 var(--field-gap,16px)} .field label{ display:block; font-size:12.5px; font-weight:800; color:var(--ink2); letter-spacing:.03em; margin:0 0 7px; } .field .hint{display:block; margin:6px 0 0; font-size:11.5px; color:var(--ink3); font-weight:600} .inputwrap{position:relative; display:block} input[type=text],input[type=password]{ width:100%; height:var(--h-field); padding:0 14px; font:inherit; font-size:16px; font-weight:600; color:var(--ink); background:var(--field-bg); border:var(--field-border-w,1px) solid var(--line); border-radius:var(--r-field); transition:border-color .12s, box-shadow .12s, background .12s; } input::placeholder{color:var(--ink3); font-weight:500} input:hover{border-color:var(--line2)} input:focus{outline:none; background:var(--field-bg-focus,var(--field-bg)); border-color:var(--accent); box-shadow:var(--focus)} .has-toggle input{padding-right:66px} .toggle{ position:absolute; top:50%; right:6px; transform:translateY(-50%); height:44px; min-width:54px; padding:0 12px; font:inherit; font-size:12.5px; font-weight:800; color:var(--ink2); background:var(--toggle-bg,transparent); border:var(--toggle-border,0); border-radius:var(--r-chip); cursor:pointer; } .toggle:hover{color:var(--accent); border-color:var(--accent)} .toggle:focus-visible{outline:none; box-shadow:var(--focus)} /* ---- 옵션 줄 --------------------------------------------------------- */ .optrow{display:flex; align-items:center; gap:10px; margin:4px 0 15px; padding:var(--optrow-pad,0); background:var(--optrow-bg,transparent); border-radius:var(--r-field)} .optrow input[type=checkbox]{ width:20px; height:20px; margin:0; accent-color:var(--accent); flex:0 0 auto; cursor:pointer; } .optrow input[type=checkbox]:focus-visible{outline:none; box-shadow:var(--focus)} .optrow label{font-size:13.5px; font-weight:700; color:var(--ink2); cursor:pointer} /* ---- 오류 자리 -------------------------------------------------------- */ .err{margin:0 0 13px; min-height:20px; font-size:13px; font-weight:800; color:var(--ng)} .err:not(:empty){ background:var(--ngBg); border:1px solid var(--ng); border-radius:var(--r-field); padding:10px 13px; min-height:0; } /* ---- 버튼 -------------------------------------------------------------- */ .btn{ display:block; width:100%; height:var(--h-btn); font:inherit; font-size:16px; font-weight:800; letter-spacing:-.01em; border-radius:var(--r-field); cursor:pointer; border:2px solid transparent; transition:background .12s, border-color .12s, color .12s, filter .12s; } .btn:focus-visible{outline:none; box-shadow:var(--focus)} .btn:disabled{opacity:.6; cursor:not-allowed} .btn-primary{background:var(--btn-primary-bg); color:var(--btn-primary-text); border-color:var(--btn-primary-border)} .btn-primary:hover{background:var(--btn-primary-bg-hover); filter:var(--btn-primary-hover-filter,none)} .btn-primary:active{filter:brightness(.94)} .btn-secondary{ background:var(--btn-secondary-bg,transparent); color:var(--btn-secondary-text,var(--ink2)); border-color:var(--btn-secondary-border,var(--line2)); margin-top:11px; height:var(--h-btn-secondary,48px); font-size:15px; } .btn-secondary:hover{background:var(--btn-secondary-bg-hover,var(--line2)); color:var(--btn-secondary-text-hover,var(--accent)); border-color:var(--accent)} .btn-secondary .keyicon{vertical-align:-3px; margin-right:8px} .divider{ display:flex; align-items:center; gap:11px; margin:20px 0 11px; font-size:10.5px; font-weight:800; color:var(--ink3); letter-spacing:.13em; } .divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line2)} /* ---- 안내 자리 ----------------------------------------------------------- */ .notice{margin:16px 0 0} .notice:empty{display:none} .notice .box{ background:var(--okBg); border:1px solid var(--ok); border-radius:var(--r-field); padding:13px 15px; font-size:13.5px; font-weight:800; color:var(--ok-ink,var(--ok)); } .notice .box small{display:block; margin-top:5px; font-weight:600; color:var(--ink2); font-size:12.5px} /* ---- 보안 표시 ----------------------------------------------------------- */ .secure{ display:flex; align-items:flex-start; gap:8px; margin:22px 0 0; padding-top:16px; border-top:1px solid var(--line2); font-size:12px; font-weight:700; color:var(--ink3); line-height:1.5; } .secure svg{flex:0 0 auto; color:var(--ok); margin-top:1px} .copyright{margin:12px 0 0; text-align:center; font-size:11px; font-weight:700; color:var(--ink3); letter-spacing:.06em} /* ---- 좁은 화면(360px 포함, 가로 스크롤 0) --------------------------------- */ @media (max-width:400px){ .card-body{padding:var(--pad-sm,22px 18px 20px)} .wordmark{font-size:calc(var(--wm-size,28px) - 3px)} .proj h1{font-size:calc(var(--proj-h1-size,22px) - 2px)} .stage{padding:18px 10px} .proj.panel{padding:var(--proj-pad-sm,12px)} } html.ui-phone input[type=text], html.ui-phone input[type=password], html.ui-phone .btn{ min-height:44px; } html.ui-phone .toggle{height:44px;} html.ui-phone{overflow-x:hidden;} @media (prefers-reduced-motion:reduce){*{transition:none !important}} /* =================================================================== 테마 A — 신뢰·정통형 (SIM) =================================================================== */ html[data-theme="a"]{ --jb-blue:#1447D6; --jb-blue-dk:#0F37A8; --jb-blue-lt:#E8EFFE; --jb-navy:#0B1A3A; --ok:#2E7D4F; --caution:#C98A1E; --ng:#B8352C; --okBg:#EAF6EF; --ngBg:#FDEDEC; --ink:#14181C; --ink2:#4A555F; --ink3:#78848D; --line:#D8DEE4; --line2:#EDF0F3; --bg:#F1F4F8; --surface:#FFFFFF; --brand-ink:var(--jb-navy); --accent:var(--jb-blue); --accent-ink:var(--jb-blue); --field-bg:#FFFFFF; --field-bg-focus:#FFFFFF; --r-card:12px; --r-field:8px; --r-chip:999px; --h-field:52px; --h-btn:52px; --h-btn-secondary:46px; --card-w:400px; --focus:0 0 0 3px rgba(20,71,214,.28); --shadow:0 1px 2px rgba(11,26,58,.06), 0 10px 28px rgba(11,26,58,.10); --pad-lg:36px 32px 28px; --pad-sm:28px 20px 24px; --btn-primary-bg:var(--jb-blue); --btn-primary-bg-hover:var(--jb-blue-dk); --btn-primary-text:#fff; --btn-primary-border:var(--jb-blue); --btn-secondary-bg:#fff; --btn-secondary-text:var(--jb-blue); --btn-secondary-border:#B9CBF5; --btn-secondary-bg-hover:var(--jb-blue-lt); --btn-secondary-text-hover:var(--jb-blue-dk); --eyebrow-color:var(--jb-blue); --eyebrow-bg:var(--jb-blue-lt); --eyebrow-pad:4px 11px; } html[data-theme="a"] .proj p{margin-top:6px} /* =================================================================== 테마 B — 현장·다크형 (STG) · 야간 기본 / 주간(햇빛) 전환 =================================================================== */ html[data-theme="b"]{ --bg:#0B0E11; --panel:#161C22; --steel:#1E262E; --ink:#F2F6F9; --ink2:#A9B6C2; --ink3:#7A8794; --line:#2B353F; --line2:#39454F; --ok:#3ECF8E; --caution:#F5B923; --ng:#FF6B5E; --okBg:rgba(62,207,142,.14); --ngBg:rgba(255,107,94,.13); --ok-ink:var(--ok); --accent:#F5B923; --accent-dk:#D89C0B; --accent-ink:var(--accent); --brand-ink:var(--ink); --surface:var(--panel); --field-bg:#0E1318; --field-bg-focus:#0E1318; --r-card:6px; --r-field:5px; --r-chip:4px; --h-field:56px; --h-btn:60px; --h-btn-secondary:54px; --card-w:420px; --focus:0 0 0 3px rgba(245,185,35,.45); --shadow:0 24px 60px rgba(0,0,0,.55); --pad-lg:30px 28px 26px; --pad-sm:24px 18px 22px; --field-border-w:2px; --btn-primary-bg:var(--ok); --btn-primary-bg-hover:var(--ok); --btn-primary-hover-filter:brightness(1.08); --btn-primary-text:#04150C; --btn-primary-border:var(--ok); --btn-secondary-bg:transparent; --btn-secondary-text:var(--ink2); --btn-secondary-border:var(--line2); --btn-secondary-bg-hover:transparent; --btn-secondary-text-hover:var(--accent); --optrow-pad:12px 14px; --optrow-bg:var(--steel); --proj-pad:16px 18px; --proj-pad-sm:12px 14px; --proj-bg:var(--steel); --proj-ink:var(--ink); --proj-border-left:5px solid var(--accent); --eyebrow-color:var(--accent); --eyebrow-bg:transparent; --eyebrow-pad:0; --toggle-bg:var(--steel); --toggle-border:1px solid var(--line); } html[data-theme="b"][data-mode="day"]{ --bg:#E9EDF1; --panel:#FFFFFF; --steel:#F1F4F7; --ink:#000000; --ink2:#2B343C; --ink3:#5A666F; --line:#8E9AA5; --line2:#C3CCD4; --ok:#1B6B41; --caution:#8A5D00; --ng:#B0201A; --okBg:rgba(27,107,65,.10); --ngBg:rgba(176,32,26,.08); --accent:#9A6A00; --accent-dk:#7A5300; --field-bg:#FFFFFF; --field-bg-focus:#FFFFFF; --focus:0 0 0 3px rgba(154,106,0,.35); --shadow:0 6px 22px rgba(20,30,40,.16); --btn-primary-text:#fff; } html[data-theme="b"] .accent-strip{height:6px; display:flex} html[data-theme="b"] .accent-strip span{display:block; flex:1} html[data-theme="b"] .accent-strip .s-ok{background:var(--ok)} html[data-theme="b"] .accent-strip .s-ca{background:var(--caution)} html[data-theme="b"] .accent-strip .s-ng{background:var(--ng)} /* =================================================================== 테마 C — 산업·안전형 (RPA) — 안전 노랑 + 먹빛 =================================================================== */ html[data-theme="c"]{ --safety:#F2B705; --safety-dk:#D19E00; --graphite:#1F2429; --graphite2:#333B43; --concrete:#E7E4DE; --concrete2:#F4F2EE; --amber-ink:#8A6A00; --ok:#2E7D4F; --caution:#C98A1E; --ng:#B8352C; --okBg:#EDF5F0; --ngBg:#FBEDEC; --ok-ink:#1C5537; --ink:#14181C; --ink2:#454E56; --ink3:#6E7A83; --line:#C9C4BA; --line2:#E2DED6; --bg:var(--concrete); --surface:#FFFFFF; --brand-ink:var(--graphite); --accent:var(--safety); --accent-ink:var(--amber-ink); --field-bg:var(--concrete2); --field-bg-focus:#fff; --r-card:3px; --r-field:3px; --r-chip:2px; --h-field:54px; --h-btn:54px; --h-btn-secondary:48px; --card-w:410px; --card-border:2px solid var(--graphite); --focus:0 0 0 3px rgba(31,36,41,.30); --shadow:0 2px 0 var(--line), 0 14px 34px rgba(31,36,41,.16); --pad-lg:28px 26px 24px; --pad-sm:22px 17px 20px; --field-border-w:2px; --btn-primary-bg:var(--safety); --btn-primary-bg-hover:var(--safety-dk); --btn-primary-text:var(--graphite); --btn-primary-border:var(--safety-dk); --btn-secondary-bg:#fff; --btn-secondary-text:var(--graphite); --btn-secondary-border:var(--graphite); --btn-secondary-bg-hover:var(--graphite); --btn-secondary-text-hover:#fff; --proj-bg:var(--graphite); --proj-ink:#fff; --proj-pad:16px 18px; --proj-pad-sm:14px; --proj-h1-color:#fff; --eyebrow-color:var(--safety); --eyebrow-bg:transparent; --eyebrow-pad:0; --eyebrow-size:10.5px; } html[data-theme="c"] .accent-strip{height:10px; background:repeating-linear-gradient(135deg, var(--safety) 0 14px, var(--graphite) 14px 28px)} /* =================================================================== 테마 C-teal — 산업 계열 변형 (WQM) — 강철 청록 (구조는 C와 동일, 점색만 교체) =================================================================== */ html[data-theme="c-teal"]{ --steel-teal:#0E8B95; --steel-teal-dk:#0A6970; --teal-ink:#0B5960; --graphite:#1F2429; --graphite2:#333B43; --concrete:#E7E4DE; --concrete2:#F4F2EE; --ok:#2E7D4F; --caution:#C98A1E; --ng:#B8352C; --okBg:#EDF5F0; --ngBg:#FBEDEC; --ok-ink:#1C5537; --ink:#14181C; --ink2:#454E56; --ink3:#6E7A83; --line:#C9C4BA; --line2:#E2DED6; --bg:var(--concrete); --surface:#FFFFFF; --brand-ink:var(--graphite); --accent:var(--steel-teal); --accent-ink:var(--teal-ink); --field-bg:var(--concrete2); --field-bg-focus:#fff; --r-card:3px; --r-field:3px; --r-chip:2px; --h-field:54px; --h-btn:54px; --h-btn-secondary:48px; --card-w:410px; --card-border:2px solid var(--graphite); --focus:0 0 0 3px rgba(14,139,149,.35); --shadow:0 2px 0 var(--line), 0 14px 34px rgba(31,36,41,.16); --pad-lg:28px 26px 24px; --pad-sm:22px 17px 20px; --field-border-w:2px; --btn-primary-bg:var(--steel-teal); --btn-primary-bg-hover:var(--steel-teal-dk); --btn-primary-text:#fff; --btn-primary-border:var(--steel-teal-dk); --btn-secondary-bg:#fff; --btn-secondary-text:var(--graphite); --btn-secondary-border:var(--graphite); --btn-secondary-bg-hover:var(--graphite); --btn-secondary-text-hover:#fff; --proj-bg:var(--graphite); --proj-ink:#fff; --proj-pad:16px 18px; --proj-pad-sm:14px; --proj-h1-color:#fff; --eyebrow-color:var(--steel-teal); --eyebrow-bg:transparent; --eyebrow-pad:0; --eyebrow-size:10.5px; } html[data-theme="c-teal"] .accent-strip{height:10px; background:repeating-linear-gradient(135deg, var(--steel-teal) 0 14px, var(--graphite) 14px 28px)}