@charset "UTF-8"; /* ============================================================================ 2026 로그인 화면 리뉴얼 전용 CSS //20260812 ohy todo 26-0811-0050 ---------------------------------------------------------------------------- 사용 화면 - /erp/erp/erplogin/pc/erplogin_ibcenter_new.jsp (로그인) - /erp/erp/erplogin_error/errorlogin_ibcenter_new.jsp (로그인 실패) 기존 로그인 화면(erplogin_ibcenter.jsp 등)은 이 파일을 부르지 않으므로 여기를 아무리 고쳐도 기존 화면 회귀는 없음. 두 화면 모두 공통 CSS(reset/common/contents)를 안 부르고 이 파일 하나만 쓴다. 그래서 맨 위에 최소한의 reset 을 직접 넣어두었음. 색·크기는 전부 아래 :root 토큰으로만 정의할 것. (한 줄만 고쳐서 되돌릴 수 있게 하기 위함. 리터럴로 박으면 나중에 못 되돌림) ========================================================================== */ /* ---------------------------------------------------------------- 폰트 */ /* format('woff2-variations') 로 쓰면 크롬이 src 를 통째로 스킵해서 폰트가 아예 안 받아짐. 가변폰트라도 format('woff2') 로 선언할 것. local('Pretendard') 를 앞에 두면 static 한 벌로 전 굵기를 때워 볼드가 죽음. */ @font-face { font-family: 'Pretendard'; font-weight: 45 920; font-style: normal; font-display: swap; src: url('/css/font/pretendard/PretendardVariable.woff2') format('woff2'); } /* ---------------------------------------------------------------- 토큰 */ :root { /* 색 : 파랑 계열 */ --lg-primary : #0f56d7; /* 로그인 버튼 / 링크 */ --lg-primary-strong : #0b45ae; /* 버튼 hover */ --lg-accent : #1a73ff; /* 로고 IB, 헤드라인 강조 */ --lg-primary-weak : #e8f0ff; /* 포커스 링 / 연한 면 */ /* 색 : 무채 계열 */ --lg-navy : #16243d; /* 제목, 푸터 배경 */ --lg-text : #33415c; /* 본문 */ --lg-muted : #7b8aa3; /* 보조 설명, placeholder */ --lg-line : #e4eaf3; /* 카드 안 구분선 */ --lg-border : #d8e1ee; /* 인풋 테두리 */ --lg-card : #ffffff; --lg-bg-1 : #f7fafd; /* 페이지 배경 위 */ --lg-bg-2 : #e9f0f9; /* 페이지 배경 아래 */ --lg-foot-tx : #8d9bb2; /* 푸터 글자 */ /* 색 : 경고 (로그인 실패 / Caps Lock) */ --lg-warn-bg : #fff4f4; --lg-warn-line : #f7d4d4; --lg-warn-tx : #cc3b3b; /* 레이아웃 */ --lg-top-h : 104px; /* 상단 날짜줄 높이 */ --lg-visual-pl : 80px; /* 좌측(브랜드) 영역 왼쪽 여백 */ --lg-panel-w : 560px; /* 우측(로그인) 영역 폭. 20260812 처음 640px 이었는데 카드가 넓어 보인다고 해서 줄임 */ --lg-panel-pr : 48px; /* 우측 영역 오른쪽 여백 */ --lg-panel-gap : 28px; /* 로그인카드 ↔ 공지띠 간격 */ --lg-foot-h : 90px; /* 좌측 브랜드 크기 */ --lg-logo-size : 52px; /* IB CENTER 로고. 20260812 처음 40px */ --lg-logo-sub-size : 17px; /* Integrated Business Center. 20260812 처음 15px */ --lg-trust-ico : 56px; /* 하단 배지 아이콘 가로폭. 20260812 처음 38px */ /* 배경 이미지(파티클 웨이브) — 눈으로 보고 조정하는 값 w = 그림 크기(키울수록 웨이브가 커짐) / l = 좌우 / b = 상하(음수면 아래로) */ --lg-bg-img-w : 1400px; /* 20260812 처음 1120px */ --lg-bg-img-l : -40px; --lg-bg-img-b : -180px; /* 20260812 처음 -60px. 그림을 키운 만큼 아래로 내려서 높이를 맞춤 */ /* 카드 */ --lg-card-radius : 10px; --lg-card-pt : 44px; --lg-card-pr : 52px; --lg-card-pb : 40px; --lg-card-pl : 52px; --lg-card-shadow : 0 2px 4px rgba(22,36,61,.04), 0 14px 34px rgba(22,36,61,.09); /* 입력/버튼 */ --lg-input-h : 58px; --lg-input-radius : 6px; --lg-btn-h : 60px; --lg-font : 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', sans-serif; } /* ---------------------------------------------------------------- reset */ .lgw, .lgw * { box-sizing: border-box; font-family: var(--lg-font); } .lgw h1, .lgw h2, .lgw h3, .lgw p, .lgw ul, .lgw li, .lgw dl, .lgw dt, .lgw dd { margin: 0; padding: 0; } .lgw ul, .lgw li { list-style: none; } .lgw a { color: inherit; text-decoration: none; } .lgw img { border: 0; vertical-align: middle; } .lgw input, .lgw button { font-size: 100%; color: inherit; } .lgw button { cursor: pointer; border: 0; background: none; padding: 0; } /* ---------------------------------------------------------------- 전체 틀 */ /* body 에 .lgw 를 직접 건다. (JSP 가 로 찍음) */ body.lgw { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--lg-text); background-color: var(--lg-bg-1); background-image: linear-gradient(160deg, var(--lg-bg-1) 0%, var(--lg-bg-2) 100%); -webkit-font-smoothing: antialiased; } /* 로그인 화면은 form 이 전체를 감싼다. form 이 flex 사슬을 끊지 않게 함 */ .lgw > form { margin: 0; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } /* 상단 : 날짜 */ .lgw-top { flex: 0 0 auto; height: var(--lg-top-h); display: flex; align-items: center; justify-content: flex-end; padding-top: 0; padding-right: var(--lg-panel-pr); padding-bottom: 0; padding-left: var(--lg-visual-pl); } .lgw-today { font-size: 14px; color: var(--lg-muted); letter-spacing: -0.01em; } /* 본문 : 좌(브랜드) + 우(로그인) */ .lgw-main { flex: 1 1 auto; display: flex; align-items: flex-start; min-height: 0; } /* ---------------------------------------------------------------- 좌측 브랜드 */ .lgw-visual { position: relative; flex: 1 1 auto; min-width: 0; /* flex 아이템 가로 넘침 방지 */ align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding-top: 14px; padding-right: 40px; padding-bottom: 60px; padding-left: var(--lg-visual-pl); overflow: hidden; } /* 파티클 웨이브 배경. 클릭 막지 않게 pointer-events:none --------------------------------------------------------------------------- 박스는 좌측 영역 전체로 두고, 이미지를 박스 아래쪽에 붙인 뒤 --lg-bg-img-w 로 크기만, --lg-bg-img-b 로 높낮이만 조절한다. (박스 크기 = 이미지 크기로 묶어두면 크기를 키울 때 웨이브가 같이 위로 올라가서 두 값을 번갈아 만져야 했음) 원본 login_bg.png 는 1254x1254 정사각이고 웨이브는 그 중간 띠에만 있어서, 그림 아래쪽 약 30% 는 투명 여백이다. 그래서 bottom 을 음수로 내려깐다. */ .lgv-bg { position: absolute; left: var(--lg-bg-img-l); right: 0; top: 0; bottom: var(--lg-bg-img-b); background-image: url('/images/login/login_bg2.png'); background-repeat: no-repeat; background-position: left bottom; background-size: var(--lg-bg-img-w) auto; opacity: .95; pointer-events: none; z-index: 0; } .lgv-head, .lgv-trust { position: relative; z-index: 1; } /* 로고 */ .lgv-logo { font-size: var(--lg-logo-size); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--lg-navy); } .lgv-logo .ib { color: var(--lg-accent); margin-right: 10px; } .lgv-logo-sub { margin-top: 10px; font-size: var(--lg-logo-sub-size); font-weight: 500; letter-spacing: 0.01em; color: #55647c; } /* 헤드라인 */ .lgv-copy { margin-top: 62px; font-size: 34px; font-weight: 700; line-height: 1.45; letter-spacing: -0.03em; color: var(--lg-navy); } .lgv-copy .pt { color: var(--lg-accent); } .lgv-desc { margin-top: 22px; font-size: 15px; font-weight: 400; line-height: 1.75; color: #5d6b81; } /* 하단 신뢰 배지 2개 */ .lgv-trust { display: flex; align-items: flex-start; gap: 60px; } .lgv-trust-item { display: flex; align-items: flex-start; gap: 14px; max-width: 380px; } /* 원본이 200x133 (가로형) 이라 정사각으로 박으면 세로로 늘어나 찌그러진다. 가로폭만 주고 height 는 auto 로 비율을 지킬 것 */ .lgv-trust-item img { width: var(--lg-trust-ico); height: auto; flex: 0 0 var(--lg-trust-ico); } .lgv-trust-tit { font-size: 15px; font-weight: 700; color: var(--lg-navy); } .lgv-trust-txt { margin-top: 5px; font-size: 13px; font-weight: 400; line-height: 1.5; color: #6b7a91; } /* ---------------------------------------------------------------- 우측 로그인 */ .lgw-panel { flex: 0 0 var(--lg-panel-w); width: var(--lg-panel-w); padding-top: 0; padding-right: var(--lg-panel-pr); padding-bottom: 40px; padding-left: 0; } /* 로그인 카드 */ .lgp-card { background-color: var(--lg-card); border-radius: var(--lg-card-radius); box-shadow: var(--lg-card-shadow); overflow: hidden; } .lgc-body { padding-top: var(--lg-card-pt); padding-right: var(--lg-card-pr); padding-bottom: var(--lg-card-pb); padding-left: var(--lg-card-pl); } .lgc-title { display: flex; align-items: center; font-size: 27px; font-weight: 700; letter-spacing: -0.02em; color: var(--lg-navy); } .lgc-title::before { content: ''; width: 4px; height: 24px; margin-right: 14px; border-radius: 2px; background-color: var(--lg-primary); } .lgc-sub { margin-top: 14px; font-size: 15px; font-weight: 400; color: var(--lg-muted); } .lgc-sub.lgc-sub-2l { /* 20260918 ohy 두 줄 부제 (비밀번호 변경) */ line-height: 1.6; } /* 입력 */ .lgc-field { margin-top: 26px; } .lgc-label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: #45536d; } .lgc-inputbox { position: relative; } .lgc-inputbox .ico { position: absolute; top: 50%; left: 20px; margin-top: -10px; width: 20px; height: 20px; color: #9aa8bd; pointer-events: none; } .lgw input.lgc-input { display: block; width: 100%; height: var(--lg-input-h); border: 1px solid var(--lg-border); border-radius: var(--lg-input-radius); background-color: #fff; font-size: 15px; color: var(--lg-navy); padding-top: 0; padding-right: 56px; padding-bottom: 0; padding-left: 52px; outline: 0; transition: border-color .15s, box-shadow .15s; } .lgw input.lgc-input::placeholder { color: #a8b4c6; } .lgw input.lgc-input:focus { border-color: var(--lg-primary); box-shadow: 0 0 0 3px var(--lg-primary-weak); } /* 비밀번호 보기 토글 */ .lgc-eye { position: absolute; top: 50%; right: 18px; margin-top: -12px; width: 24px; height: 24px; color: #9aa8bd; } .lgc-eye:hover { color: var(--lg-primary); } /* svg 에 width/height 속성을 안 줬으므로 여기서 크기를 잡아준다. (안 잡으면 브라우저 기본값 300x150 으로 퍼짐) */ .lgc-eye svg { display: block; width: 22px; height: 22px; margin: 1px auto 0 auto; } .lgc-eye .off { display: none; } .lgc-eye.is-on .on { display: none; } .lgc-eye.is-on .off { display: block; } /* Caps Lock 안내 */ .lgc-caps { display: none; margin-top: 10px; padding-top: 9px; padding-right: 14px; padding-bottom: 9px; padding-left: 14px; border: 1px solid var(--lg-warn-line); border-radius: var(--lg-input-radius); background-color: var(--lg-warn-bg); font-size: 13px; color: var(--lg-warn-tx); } /* 아이디 저장 / 아이디·비밀번호 찾기 */ .lgc-util { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; } .lgc-save { display: flex; align-items: center; font-size: 14px; color: #45536d; cursor: pointer; user-select: none; } .lgw input.lgc-check { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0 8px 0 0; border: 1px solid #c3cede; border-radius: 3px; background-color: #fff; cursor: pointer; position: relative; flex: 0 0 18px; } .lgw input.lgc-check:checked { border-color: var(--lg-primary); background-color: var(--lg-primary); } .lgw input.lgc-check:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .lgc-find { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--lg-primary); cursor: pointer; } .lgc-find:hover { text-decoration: underline; } .lgc-find .arr { margin-left: 6px; font-size: 15px; line-height: 1; } /* 로그인 버튼 */ .lgw button.lgc-submit { display: block; width: 100%; height: var(--lg-btn-h); margin-top: 26px; border-radius: var(--lg-input-radius); background-color: var(--lg-primary); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #fff; transition: background-color .15s; } .lgw button.lgc-submit:hover { background-color: var(--lg-primary-strong); } /* 20260917 ohy todo 26-0813-0013 주 버튼 아래 세로로 이어 붙는 보조 버튼 (비밀번호 변경 [30일 뒤에 변경하기]). 색은 팝업의 lgc-submit-sub 를 같이 쓴다 */ .lgw button.lgc-submit.lgc-submit-under { height: 52px; margin-top: 10px; font-size: 15px; font-weight: 600; } /* 카드 하단 보안 안내 */ .lgc-secure { display: flex; align-items: center; border-top: 1px solid var(--lg-line); padding-top: 20px; padding-right: var(--lg-card-pr); padding-bottom: 20px; padding-left: var(--lg-card-pl); } .lgc-secure-ico { flex: 0 0 34px; width: 34px; height: 34px; margin-right: 14px; border-radius: 50%; background-color: #f1f5fa; color: #8b9ab1; display: flex; align-items: center; justify-content: center; } .lgc-secure-txt { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--lg-muted); } .lgc-secure-link { flex: 0 0 auto; margin-left: 16px; font-size: 13px; font-weight: 600; color: var(--lg-primary); } .lgc-secure-link:hover { text-decoration: underline; } /* 부가 링크 (회원가입 등, 예시안엔 없지만 필요하면 켜서 쓸 자리) */ .lgc-etc { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; font-size: 13px; color: var(--lg-muted); } .lgc-etc a:hover { color: var(--lg-primary); text-decoration: underline; } /* 20260918 ohy todo 26-0918-0005 회원가입 링크 - 아이디/비밀번호 찾기(.lgc-find) 와 같은 굵기·색 */ .lgc-etc { gap: 8px; font-size: 14px; } .lgc-etc a.lgc-join { display: inline-flex; align-items: center; font-weight: 600; color: var(--lg-primary); cursor: pointer; } .lgc-etc a.lgc-join .arr { margin-left: 6px; font-size: 15px; line-height: 1; } /* ---------------------------------------------------------------- 공지사항 띠 */ .lgp-notice { display: flex; align-items: center; height: 68px; margin-top: var(--lg-panel-gap); padding-top: 0; padding-right: 26px; padding-bottom: 0; padding-left: 26px; border-radius: var(--lg-card-radius); background-color: var(--lg-card); box-shadow: 0 2px 4px rgba(22,36,61,.04), 0 8px 20px rgba(22,36,61,.06); cursor: pointer; } .lgn-label { display: flex; align-items: center; flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--lg-primary); } .lgn-label .ico { width: 18px; height: 18px; margin-right: 8px; } .lgn-bar { flex: 0 0 auto; width: 1px; height: 16px; margin-top: 0; margin-right: 20px; margin-bottom: 0; margin-left: 20px; background-color: var(--lg-line); } .lgn-subject { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--lg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lgp-notice:hover .lgn-subject { text-decoration: underline; } .lgn-date { flex: 0 0 auto; margin-left: 20px; font-size: 13px; color: var(--lg-muted); } .lgn-arr { flex: 0 0 auto; margin-left: 14px; font-size: 15px; color: #b3bfd0; } /* ---------------------------------------------------------------- 푸터 */ .lgw-foot { flex: 0 0 auto; height: var(--lg-foot-h); display: flex; align-items: center; padding-top: 0; padding-right: var(--lg-panel-pr); padding-bottom: 0; padding-left: var(--lg-visual-pl); background-color: var(--lg-navy); font-size: 13px; color: var(--lg-foot-tx); } /* ---------------------------------------------------------------- 로그인 실패 */ .lgc-error { margin-top: 22px; padding-top: 16px; padding-right: 18px; padding-bottom: 16px; padding-left: 18px; border: 1px solid var(--lg-warn-line); border-radius: var(--lg-input-radius); background-color: var(--lg-warn-bg); } .lgc-error-tit { display: flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--lg-warn-tx); } .lgc-error-tit .ico { width: 16px; height: 16px; margin-right: 8px; } .lgc-error-txt { margin-top: 8px; font-size: 13px; line-height: 1.65; color: #8b6a6a; } .lgc-error-txt strong { color: var(--lg-warn-tx); } /* ---------------------------------------------------------------- 비밀번호 변경 */ /* change_pw_ibcenter_new.jsp 의 파란 안내 박스. 20260918 화면 세로 넘침으로 JSP 에서 뺌(규칙은 .lgc-help 로) */ .lgc-note { margin-top: 22px; padding-top: 16px; padding-right: 18px; padding-bottom: 16px; padding-left: 18px; border: 1px solid #d6e3fb; border-radius: var(--lg-input-radius); background-color: #f2f7ff; } .lgc-note-tit { display: flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--lg-primary); } .lgc-note-tit .ico { width: 16px; height: 16px; margin-right: 8px; } .lgc-note-txt { margin-top: 8px; font-size: 13px; line-height: 1.7; color: #5b6c88; } /* 20260918 ohy 입력칸 아래 보조 문구 (비밀번호 규칙). 안내 박스(.lgc-note) 대신 쓴다 */ .lgc-help { margin-top: 8px; font-size: 13px; line-height: 1.5; color: #5b6c88; } /* ---------------------------------------------------------------- 팝업 (아이디/비밀번호 찾기) */ /* 팝업 창은 좌측 브랜드 없이 흰 화면 하나로 꽉 채운다. body.lgw 의 flex 세로배치를 여기서 되돌리는 것에 주의 */ body.lgw-pop { display: block; min-height: 0; background-color: #fff; background-image: none; } .lgw-pop > form { display: block; } .lgpop-hd { display: flex; align-items: center; justify-content: space-between; height: 64px; padding-top: 0; padding-right: 24px; padding-bottom: 0; padding-left: 28px; border-bottom: 1px solid var(--lg-line); } .lgpop-tit { display: flex; align-items: center; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--lg-navy); } .lgpop-tit::before { content: ''; width: 4px; height: 18px; margin-right: 12px; border-radius: 2px; background-color: var(--lg-primary); } .lgw button.lgpop-close { width: 32px; height: 32px; font-size: 26px; line-height: 1; color: #9aa8bd; } .lgw button.lgpop-close:hover { color: var(--lg-navy); } .lgpop-body { padding-top: 22px; padding-right: 28px; padding-bottom: 30px; padding-left: 28px; } /* 눈 아이콘이 없는 칸은 오른쪽 여백을 줄인다 */ .lgw input.lgc-input-noeye { padding-right: 20px; } .lgpop-btns { display: flex; gap: 10px; margin-top: 26px; } .lgw .lgpop-btns button.lgc-submit { flex: 1 1 50%; margin-top: 0; } /* 보조 버튼(아이디 찾기) - 주 버튼과 구분되게 연한 면으로 */ .lgw button.lgc-submit-sub { background-color: #eef2f8; color: var(--lg-navy); } .lgw button.lgc-submit-sub:hover { background-color: #e2e9f4; } .lgpop-help { margin-top: 26px; padding-top: 16px; padding-right: 18px; padding-bottom: 16px; padding-left: 18px; border-radius: var(--lg-input-radius); background-color: #f6f8fc; } .lgpop-help-tit { font-size: 13px; font-weight: 700; color: #45536d; } .lgpop-help ul { margin-top: 8px; } .lgpop-help li { position: relative; padding-left: 11px; font-size: 13px; line-height: 1.8; color: var(--lg-muted); } .lgpop-help li::before { content: ''; position: absolute; left: 0; top: 10px; width: 3px; height: 3px; border-radius: 50%; background-color: #b3bfd0; } .lgpop-help-tel { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e6ebf3; font-size: 13px; color: #45536d; } /* ---------------------------------------------------------------- 반응형 */ /* 1440 미만 : 좌측 여백과 카드 폭을 줄인다 */ @media (max-width: 1439px) { :root { --lg-visual-pl : 48px; --lg-panel-w : 500px; --lg-panel-pr : 32px; --lg-logo-size : 46px; --lg-trust-ico : 48px; --lg-bg-img-w : 1200px; } .lgv-copy { font-size: 30px; } } /* 1180 미만 : 좌측 브랜드를 접고 로그인 카드만 가운데 */ @media (max-width: 1179px) { .lgw-visual { display: none; } .lgw-main { justify-content: center; } .lgw-panel { flex: 0 1 500px; width: 500px; max-width: 100%; padding-right: 24px; padding-left: 24px; } .lgw-top, .lgw-foot { padding-right: 24px; padding-left: 24px; } .lgw-foot { justify-content: center; } } @media (max-width: 600px) { :root { --lg-card-pr : 24px; --lg-card-pl : 24px; } .lgc-secure { padding-right: 24px; padding-left: 24px; } } /* ---------------------------------------------------------------- 회원가입 / 회원정보 수정 */ /* 20260918 ohy todo 26-0918-0005 userregistration_ibcenter_new.jsp 로그인 카드 토큰을 그대로 쓰되 입력칸이 많아 높이·간격만 --lgr-* 로 따로 줄였다. 폭은 고정(반응형 없음). 화면은 세로로 길어 페이지 스크롤이 생기는 것을 허용한다 */ :root { --lgr-wrap-w : 1280px; /* 카드 + 안내 전체 폭 */ --lgr-card-w : 880px; /* 입력 카드 폭 */ --lgr-aside-w : 380px; /* 우측 안내 폭. 20260918 처음 300 → 좁다고 해서 넓힘 */ --lgr-input-h : 46px; --lgr-gap-x : 24px; /* 격자 가로 간격 */ --lgr-gap-y : 18px; /* 격자 세로 간격 */ --lgr-btn-h : 52px; } /* 상단 : 좌측 로고 + 우측 날짜 */ .lgr-top { width: var(--lgr-wrap-w); margin-right: auto; margin-left: auto; justify-content: space-between; padding-right: 0; padding-left: 0; } .lgr-brand { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--lg-navy); } .lgr-brand .ib { color: var(--lg-accent); margin-right: 5px; } /* 본문 : 가운데 정렬, 좌 입력 카드 + 우 안내 */ .lgr-main { justify-content: center; padding-bottom: 48px; } .lgr-wrap { display: flex; align-items: flex-start; gap: 20px; width: var(--lgr-wrap-w); min-width: var(--lgr-wrap-w); } .lgr-card { flex: 0 0 var(--lgr-card-w); width: var(--lgr-card-w); } .lgr-card .lgc-body { padding-bottom: 36px; } .lgr-aside { flex: 0 0 var(--lgr-aside-w); width: var(--lgr-aside-w); position: sticky; top: 20px; } /* 제목 왼쪽 색 막대는 이 화면에선 안 쓴다 (20260917 지적 : 제목 표시용 색 막대 금지) */ .lgw-reg .lgc-title::before { display: none; } /* 섹션 제목 */ .lgr-sec { margin-top: 30px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--lg-line); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--lg-navy); } /* 2열 격자 (본인인증 한 줄만 두 칸) */ .lgr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--lgr-gap-x); row-gap: var(--lgr-gap-y); } .lgr-field { min-width: 0; } .lgr-col2 { grid-column: span 2; } .lgr-col3 { grid-column: span 2; } .lgr-field .lgc-label { margin-bottom: 7px; font-size: 13px; } .lgw-reg .req { margin-left: 3px; color: var(--lg-warn-tx); font-weight: 700; } /* 입력칸 : 로그인보다 낮게, 왼쪽 아이콘이 없으므로 여백도 줄임 */ .lgr-ctl { display: flex; align-items: center; gap: 8px; } .lgw-reg input.lgc-input { flex: 1 1 auto; min-width: 0; height: var(--lgr-input-h); padding-right: 14px; padding-left: 14px; font-size: 14px; } .lgw-reg input.lgc-input.lgr-haseye { padding-right: 46px; } .lgw-reg .lgc-inputbox .lgc-eye { right: 12px; } .lgw select.lgc-select { flex: 1 1 auto; min-width: 0; height: var(--lgr-input-h); padding-top: 0; padding-right: 36px; padding-bottom: 0; padding-left: 14px; border: 1px solid var(--lg-border); border-radius: var(--lg-input-radius); background-color: #fff; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; font-size: 14px; color: var(--lg-navy); appearance: none; -webkit-appearance: none; outline: 0; } .lgw select.lgc-select:focus { border-color: var(--lg-primary); box-shadow: 0 0 0 3px var(--lg-primary-weak); } .lgw select.lgc-select.lgr-w120 { flex: 0 0 120px; } .lgw-reg input.lgc-input.lgr-w140 { flex: 0 0 140px; } /* 읽기 전용 값 (회원정보 수정의 아이디) */ .lgr-static { flex: 1 1 auto; height: var(--lgr-input-h); line-height: var(--lgr-input-h); padding-right: 14px; padding-left: 14px; border-radius: var(--lg-input-radius); background-color: #f3f6fb; font-size: 14px; font-weight: 600; color: var(--lg-navy); } /* 칸 옆 작은 버튼 (중복확인 / 인증번호 보내기 / 본인확인 / 비밀번호 변경) */ .lgw button.lgr-inbtn { flex: 0 0 auto; height: var(--lgr-input-h); padding-top: 0; padding-right: 16px; padding-bottom: 0; padding-left: 16px; border: 1px solid var(--lg-primary); border-radius: var(--lg-input-radius); background-color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--lg-primary); transition: background-color .15s; } .lgw button.lgr-inbtn:hover { background-color: var(--lg-primary-weak); } .lgw button.lgr-inbtn.lgr-inbtn-fill { background-color: var(--lg-primary); color: #fff; } .lgw button.lgr-inbtn.lgr-inbtn-fill:hover { background-color: var(--lg-primary-strong); } .lgr-timer { flex: 0 0 auto; min-width: 64px; font-size: 13px; font-weight: 600; color: var(--lg-warn-tx); } .lgr-timer.is-ok { color: var(--lg-primary); } /* 성별 : 라디오를 알약 두 개로 */ .lgr-seg { gap: 0; height: var(--lgr-input-h); border: 1px solid var(--lg-border); border-radius: var(--lg-input-radius); background-color: #fff; padding: 3px; } .lgr-seg-item { flex: 1 1 50%; height: 100%; cursor: pointer; } .lgr-seg-item input { display: none; } .lgr-seg-item span { display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 4px; font-size: 14px; font-weight: 500; color: var(--lg-muted); transition: background-color .15s, color .15s; } .lgr-seg-item input:checked + span { background-color: var(--lg-primary); font-weight: 600; color: #fff; } /* 버튼 줄 : 가입하기(주) + 취소(보조) */ .lgr-btns { display: flex; gap: 10px; margin-top: 34px; } .lgw .lgr-btns button.lgc-submit { flex: 1 1 auto; height: var(--lgr-btn-h); margin-top: 0; font-size: 16px; } .lgw .lgr-btns button.lgc-submit.lgc-submit-sub { flex: 0 0 160px; } .lgr-links { margin-top: 16px; text-align: center; font-size: 13px; } .lgr-links a { font-weight: 600; color: var(--lg-primary); } .lgr-links a:hover { text-decoration: underline; } /* 안내 카드 (우측 사이드) */ .lgr-tip { padding-top: 22px; padding-right: 24px; padding-bottom: 24px; padding-left: 24px; } .lgr-tip-tit { display: flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--lg-navy); } .lgr-tip-tit svg { width: 18px; height: 18px; margin-right: 8px; color: var(--lg-primary); } .lgr-tip ul { margin-top: 12px; } .lgr-tip li { position: relative; margin-top: 6px; padding-left: 11px; font-size: 13px; line-height: 1.7; color: var(--lg-muted); } .lgr-tip li::before { content: ''; position: absolute; left: 0; top: 10px; width: 3px; height: 3px; border-radius: 50%; background-color: #b3bfd0; } .lgr-tip li strong { color: #45536d; }