.project_wrap { min-width:auto!important; }

/* 로그인 계열 공통 배경.
   loginContractor.html 은 마크업 없이 이 배경만 보여주며 자동 로그인한다 (화면 전체가 브랜드 보라). */
main { width:100%; height:100%; position:relative; background:#4F46E5; }

/* ══════════════════════════════════════════════════════════════════
   좌우 분할 로그인 (#login.login_split)
   좌 = 브랜드 패널 / 우 = 로그인 폼. 900px 이하에서는 브랜드 패널을 숨기고
   폼 상단의 작은 로고(.brand_logo_sm)가 그 역할을 대신한다.
   ────────────────────────────────────────────────────────────────
   ⚠ common.css 첫 규칙이 `* { color:#1E293B }` 다. 자손에 color 를 '직접' 선언하므로
     부모(.login_brand)의 흰색이 상속되지 못하고 자식이 전부 검게 나온다.
     챗 위젯에서 쓴 `:where(...) * { color:inherit }`(명시도 0,0,0) 우회는 여기선 못 쓴다 —
     head.html 로드 순서가 header.css → **login.css** → common.css 라서
     같은 명시도면 나중에 오는 common.css 가 이긴다.
     그래서 브랜드 패널 안의 텍스트 요소는 **하나도 빠짐없이 color 를 직접 지정**한다.
     (아래 em / h2 / i / p / strong / span 규칙. 요소를 추가하면 색도 같이 넣을 것)
   ══════════════════════════════════════════════════════════════════ */

#login.login_split { display:grid; grid-template-columns:1.05fr 1fr; background:none; }

/* ── 좌: 브랜드 패널 ── */
#login.login_split .login_brand {
    /* width/border 를 명시한다 — 이 자리에 <aside> 를 다시 쓰더라도 header.css 의
       전역 `aside { width:230px; border-right:... }` 에 찌그러지지 않게 하는 안전장치 */
    width:auto; border:0;
    position:relative; overflow:hidden; padding:56px 52px; color:#fff;
    display:flex; flex-direction:column; justify-content:space-between;
    background:linear-gradient(155deg,#4F46E5 0%,#4338CA 55%,#312BA5 100%);
}
/* 시안 상 우상단 시안색 광원 + 옅은 격자 (이미지 파일 없이 CSS 로만 만든다) */
#login.login_split .login_brand::before {
    content:''; position:absolute; width:520px; height:520px; right:-160px; top:-160px; border-radius:50%;
    background:radial-gradient(circle,rgba(6,182,212,.35),transparent 65%);
}
#login.login_split .login_brand::after {
    content:''; position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
    background-size:48px 48px;
}
/* 콘텐츠 컬럼 — 넓은 화면에서 패널이 늘어나도 글이 왼쪽 끝에 붙지 않게 가운데로 모은다.
   (1920px 에서는 이 패널이 985px 까지 벌어져, 안 잡아두면 로고·카피가 화면 맨 왼쪽에 고립된다)
   세 요소가 같은 왼쪽 기준선을 공유해야 하므로 각각을 같은 폭의 컬럼으로 만든다. */
#login.login_split .login_brand > * { position:relative; z-index:1; width:100%; max-width:520px; margin-left:auto; margin-right:auto; }

/* 헤드라인 — 문구가 길어져 38px·자간 3px 로는 520px 컬럼을 넘친다. 28px·자간 -.3px 로 맞췄다 */
#login.login_split .brand_copy h2 { font-size:28px; line-height:1.46; font-weight:800; letter-spacing:-.3px; color:#fff; text-align:left; }
#login.login_split .brand_copy h2 i { font-style:normal; color:#67E8F9; }
#login.login_split .brand_copy p { margin-top:14px; max-width:520px; font-size:14.5px; line-height:1.72; text-align:left; color:rgba(255,255,255,.72); }
/* 기능 소개 카드 6개 (2열 3행) — 홈페이지 기능 카드를 축소해 옮긴 것.
   ⚠ common.css 의 `* { color:#1E293B }` 가 자손에 color 를 직접 선언하므로
     strong·span 에 색을 하나도 빠뜨리지 않고 지정해야 한다(상속에 기대면 검게 나온다). */
#login.login_split .brand_feats { margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#login.login_split .brand_feats li { list-style:none; padding:13px 14px; border-radius:12px;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12); }
#login.login_split .brand_feats .ic { display:block; width:19px; height:19px; }
#login.login_split .brand_feats .ic img { width:100%; height:100%; display:block; }
#login.login_split .brand_feats strong { display:block; margin-top:7px; font-size:13.5px; font-weight:700; letter-spacing:-.2px; color:#fff; }
#login.login_split .brand_feats .d { display:block; margin-top:4px; font-size:11.5px; line-height:1.55; color:rgba(255,255,255,.62); }
/* margin 을 다시 선언하지 않는다 — 위 `.login_brand > *` 의 좌우 auto(콘텐츠 컬럼 정렬)를 지운다 */
#login.login_split .brand_note { font-size:12.5px; color:rgba(255,255,255,.5); text-align:left; }

/* ── 로고 락업 (좌 패널 = 흰색 / 폼 상단 = 브랜드색) ── */
#login.login_split .brand_logo { display:flex; align-items:center; gap:10px; font-size:23px; font-weight:800; letter-spacing:-.7px; }
#login.login_split .brand_logo img { width:32px; height:32px; flex-shrink:0; }
#login.login_split .brand_logo em { font-style:normal; }
#login.login_split .login_brand .brand_logo { color:#fff; }
#login.login_split .login_brand .brand_logo em { color:#fff; }        /* `*` 가 직접 칠하므로 상속에 기대면 안 된다 */
#login.login_split .login_brand .brand_logo em span { color:#67E8F9; }
#login.login_split .brand_logo_sm { display:none; margin-bottom:26px; color:#4F46E5; }
#login.login_split .brand_logo_sm em span { color:#06B6D4; }

/* ── 우: 로그인 폼 ── */
#login.login_split .login_panel {
    /* 기본 `main section`(450px 절대중앙 카드)을 되돌린다 */
    width:auto; min-height:auto; padding:48px 24px; border-radius:0; position:static; transform:none;
    background:#fff; display:flex; align-items:center; justify-content:center; overflow-y:auto;
}
#login.login_split .login_form { width:100%; max-width:392px; }
#login.login_split .login_form h3 { font-size:26px; font-weight:800; letter-spacing:-.6px; text-align:left; }
#login.login_split .login_form p.lead { margin-top:9px; font-size:14.5px; text-align:left; color:#64748B; }

#login.login_split .form_list { margin-top:22px; }
#login.login_split .form_list li { margin-top:16px; }
#login.login_split .form_list li:first-child { margin-top:0; }
#login.login_split .form_list label { display:block; margin-bottom:7px; font-size:13px; font-weight:600; color:#334155; }
#login.login_split .input_box { position:relative; }
#login.login_split .input_box input {
    width:100%; height:50px; padding:0 44px; border:1px solid #E2E8F0; border-radius:11px;
    font-size:15px; font-family:inherit; background:#fff; transition:border-color .15s, box-shadow .15s;
}
#login.login_split .input_box input::placeholder { color:#A5B0C0; }
#login.login_split .input_box input:focus { border-color:#4F46E5; box-shadow:0 0 0 4px rgba(79,70,229,.12); }
#login.login_split .input_ico { position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; pointer-events:none; }
#login.login_split .input_ico.mail { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E") no-repeat center/contain; }
#login.login_split .input_ico.lock { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") no-repeat center/contain; }

/* 비밀번호 보기 토글 (기존 iconBox 스프라이트 유지 — input[type] 이 바뀌면 아이콘도 바뀐다) */
#login.login_split .pw_wrap .viewBtn {
    width:38px; min-width:0; height:38px; padding:0; border:0; border-radius:9px; background:none;
    position:absolute; top:50%; right:6px; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center;
}
#login.login_split .pw_wrap .viewBtn:hover { background:#F1F5F9; }
#login.login_split .pw_wrap .viewBtn span { width:20px; height:20px; display:inline-block; background:url('/image/iconBox.svg') no-repeat -60px 0; background-size:80px; }
#login.login_split .pw_wrap input[type='text'] + .viewBtn span { background-position:-40px 0; }

/* '비밀번호 찾기' 를 비밀번호 라벨 오른쪽으로 옮겼다 — 링크 하나가 한 줄을 혼자 쓰던 것을 정리 */
#login.login_split .form_list label { display:flex; align-items:center; justify-content:space-between; }
#login.login_split .form_list label .find_pw { font-size:12.5px; font-weight:400; color:#64748B; }
#login.login_split .form_list label .find_pw:hover { color:#4F46E5; text-decoration:underline; }

#login.login_split .login_btn {
    width:100%; min-width:0; height:52px; margin-top:22px; padding:0; border:0; border-radius:11px;
    font-family:inherit; font-size:15.5px; font-weight:700; color:#fff; background:#4F46E5;
    box-shadow:0 6px 16px rgba(79,70,229,.28); transition:background .15s, box-shadow .15s, transform .06s;
}
#login.login_split .login_btn:hover { background:#4338CA; box-shadow:0 8px 22px rgba(79,70,229,.34); }
#login.login_split .login_btn:active { transform:translateY(1px); }
/* 요청 중 — 중복 클릭 방어로 disabled 가 걸린다 */
#login.login_split .login_btn:disabled { background:#A5B4FC; box-shadow:none; cursor:not-allowed; transform:none; }

/* 거래처 로그인 입구 — 약관 링크와 섞이지 않게 분리한 박스 */
#login.login_split .portal_box {
    margin-top:20px; padding:13px 15px; border:1px solid #E2E8F0; border-radius:11px; background:#F8FAFC;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-size:13px; text-decoration:none; transition:border-color .15s, background .15s;
}
#login.login_split .portal_box:hover { border-color:#C7D2FE; background:#EEF2FF; }
#login.login_split .portal_box .portal_txt { color:#64748B; }
#login.login_split .portal_box .portal_txt b { color:#334155; font-weight:700; }
#login.login_split .portal_box .portal_go { color:#4F46E5; font-weight:700; white-space:nowrap; }

/* 구분선 — 기존 login_line.svg 대신 CSS 선으로 (좁은 화면에서 길이가 안 맞는 문제 해소) */
#login.login_split .sns_login { width:100%; margin:26px 0 16px; display:flex; align-items:center; gap:12px; font-size:12.5px; color:#94A3B8; }
#login.login_split .sns_login::before, #login.login_split .sns_login::after { content:''; flex:1; height:1px; background:#E2E8F0; }

#login.login_split .easy_list { margin-top:0; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
#login.login_split .easy_list li { list-style:none; }
#login.login_split .easy_list li button {
    width:100%; min-width:0; height:46px; padding:0; border:1px solid #E2E8F0; border-radius:11px; background:#fff;
    display:flex; align-items:center; justify-content:center; gap:7px;
    font-family:inherit; font-size:13.5px; font-weight:600; color:#334155;
    transition:background .15s, border-color .15s;
}
#login.login_split .easy_list li button:hover { background:#F8FAFC; border-color:#CBD5E1; }
#login.login_split .easy_list li button .ico { width:20px; height:20px; flex-shrink:0; background-repeat:no-repeat; background-position:center; background-size:contain; }
#login.login_split .easy_list li button.kakao .ico { background-image:url('/image/kakao_M.svg'); }
#login.login_split .easy_list li button.naver .ico { background-image:url('/image/naver_M.svg'); }
#login.login_split .easy_list li button.apple .ico { background-image:url('/image/apple_M.svg'); }

#login.login_split .signup { margin-top:20px; font-size:14px; text-align:center; color:#64748B; }
#login.login_split .signup a { color:#4F46E5; font-weight:700; }

/* 하단 링크 (구매·발주 포털 + JS 로 채워지는 #policyList) — 두 ul 을 한 줄로 이어 붙인다 */
#login.login_split .page_links { margin-top:14px; display:flex; justify-content:center; flex-wrap:wrap; }
#login.login_split .page_list { margin-top:0; display:flex; justify-content:center; gap:0; flex-wrap:wrap; }
#login.login_split .page_list li { list-style:none; position:relative; padding:0 12px; }
#login.login_split .page_list li::after { content:''; display:block; width:1px; height:11px; position:absolute; top:50%; left:0; transform:translateY(-50%); background:#E2E8F0; }
/* 구분선은 '줄 전체의 첫 항목' 하나만 숨긴다.
   `.page_list li:first-child` 로 쓰면 #policyList 의 첫 항목도 함께 숨어
   '구매·발주 포털' 과 '개인정보처리방침' 사이 구분선이 사라진다 */
#login.login_split .page_links > .page_list:first-child > li:first-child::after { display:none; }
#login.login_split .page_list li a { font-size:12.5px; color:#94A3B8; }
/* hover 효과는 '비밀번호 찾기'(.find_pw)와 동일하게 — 색 + 밑줄 */
#login.login_split .page_list li a:hover { color:#4F46E5; text-decoration:underline; }

/* ── 태블릿·모바일: 브랜드 패널을 접고 폼만 ── */
@media only screen and (max-width:900px){
    /* 고정 100vh 를 풀어 폼이 길어지면 페이지가 스크롤되게 한다.
       모바일 브라우저 주소창 때문에 100vh 는 실제보다 커서 하단이 잘린다 → dvh 사용 */
    .project_wrap { height:auto; min-height:100vh; min-height:100dvh; display:block; }
    main { height:auto; }
    #login.login_split { display:block; min-height:100vh; min-height:100dvh; background:#fff; }
    #login.login_split .login_brand { display:none; }
    #login.login_split .brand_logo_sm { display:flex; }
    #login.login_split .login_panel { width:100%; min-height:100vh; min-height:100dvh; padding:40px 24px; display:block; }
    #login.login_split .login_form { max-width:392px; margin:0 auto; }
}
@media only screen and (max-width:480px){
    #login.login_split .login_panel { padding:32px 20px 40px; }
    #login.login_split .brand_logo_sm { margin-bottom:22px; font-size:21px; }
    #login.login_split .brand_logo_sm img { width:29px; height:29px; }
    #login.login_split .login_form h3 { font-size:23px; }
    #login.login_split .login_form p.lead { font-size:13.5px; }
    #login.login_split .input_box input { height:48px; font-size:16px; } /* 16px 미만이면 iOS 사파리가 화면을 확대한다 */
    #login.login_split .login_btn { height:50px; }
    #login.login_split .easy_list li button { height:44px; font-size:12.5px; gap:5px; }
    #login.login_split .easy_list { gap:7px; }
}
/* 아주 좁은 화면(360px 이하)에서는 SNS 버튼의 글자를 접고 아이콘만 남긴다 */
@media only screen and (max-width:360px){
    #login.login_split .easy_list li button { font-size:0; gap:0; }
    #login.login_split .easy_list li button .ico { width:22px; height:22px; }
}
