@charset "UTF-8";
/* ============================================================
   협력업체 회원가입(/signup.jsp) — login_v2.css(.lgn-*) 위에 얹는 화면 전용 규칙.
   색·입력·버튼은 로그인 화면 것을 그대로 쓰고, 긴 폼에 필요한 것만 더한다.
   ⚠ display 를 지정한 요소를 hidden 으로 토글하려면 [hidden] 짝 규칙이 필요하다(팀규칙 #1-1).
   ============================================================ */

/* 폼이 길어 로그인 카드(400px)보다 넓게, 위에서부터 흐르게 둔다(세로 중앙이면 위가 잘린다). */
.lgn-card.su-card{width:min(480px,100%);margin:12px auto;}
.lgn-card.su-card[hidden]{display:none;}
.su-brand{margin-bottom:12px;}
.su-brand .lgn-logo{height:38px;margin-bottom:6px;}
.lgn-card.su-card .lgn-title{font-size:22px;letter-spacing:3px;padding-left:3px;}

.su-title{margin:0 0 8px;text-align:center;font-size:18px;font-weight:700;color:var(--lgn-ink);}
.su-sec{
  margin:22px 0 12px;padding-bottom:6px;
  border-bottom:1px solid rgba(126,182,240,.22);
  font-size:13px;font-weight:700;letter-spacing:.4px;color:var(--lgn-cyan);
}
.su-sec small{margin-left:6px;font-size:11px;font-weight:400;color:var(--lgn-dim);}
.su-req{color:#FF9B9B;}

/* 입력 + 우측 작은 버튼(확인·중복확인) */
.su-inline{display:flex;gap:8px;align-items:stretch;}
.su-inline > .lgn-input{flex:1 1 auto;min-width:0;}
.su-sbtn{
  flex:0 0 auto;min-width:82px;padding:0 12px;
  border:1px solid rgba(111,212,255,.6);border-radius:9px;cursor:pointer;
  background:rgba(111,212,255,.12);color:var(--lgn-cyan);
  font-family:inherit;font-size:13px;font-weight:700;
}
.su-sbtn:hover{background:rgba(111,212,255,.22);}
.su-sbtn:disabled{opacity:.5;cursor:default;}

/* 필드 아래 안내·결과 */
.su-hint{margin:6px 0 0;font-size:11.5px;line-height:1.5;color:rgba(214,228,246,.6);}
.su-hint.is-ok{color:#7CE3A8;}
.su-hint.is-err{color:#FF9B9B;}
.lgn-input input.is-err{border-color:#FF8A8A;box-shadow:0 0 0 3px rgba(255,120,120,.16);}

/* 직책 | 담당업무 두 칸 — 좁으면 한 칸씩 */
.su-row2{display:flex;gap:10px;}
.su-row2 > .lgn-field{flex:1 1 0;min-width:0;}
@media (max-width:480px){ .su-row2{display:block;} }

/* 희망 권역 칩(복수 선택) */
.su-chips{display:flex;flex-wrap:wrap;gap:8px;}
.su-chip{position:relative;cursor:pointer;}
.su-chip input{position:absolute;opacity:0;pointer-events:none;}
.su-chip span{
  display:inline-block;padding:7px 14px;border-radius:999px;
  border:1px solid var(--lgn-input-line);background:var(--lgn-input-bg);
  font-size:13px;color:var(--lgn-dim);transition:background .15s,color .15s,border-color .15s;
}
.su-chip input:checked + span{background:var(--lgn-cyan);border-color:var(--lgn-cyan);color:#06263F;font-weight:700;}
.su-chip input:focus-visible + span{outline:2px solid var(--lgn-cyan);outline-offset:1px;}

.su-textarea{
  width:100%;max-width:100%;padding:10px 14px;resize:vertical;min-height:72px;
  border:1px solid var(--lgn-input-line);border-radius:9px;
  background:var(--lgn-input-bg);color:var(--lgn-ink);
  font-family:inherit;font-size:14px;line-height:1.5;
}
.su-textarea::placeholder{color:rgba(160,185,215,.5);}
.su-textarea:focus{outline:none;border-color:var(--lgn-cyan);box-shadow:0 0 0 3px rgba(111,212,255,.18);}

/* 제출 결과(오류) */
.su-msg{margin:0 0 12px;padding:10px 12px;border-radius:8px;font-size:12.5px;line-height:1.5;
        background:rgba(255,110,110,.12);border:1px solid rgba(255,138,138,.45);color:#FFC2C2;}
.su-msg[hidden]{display:none;}

.su-back{margin:18px 0 0;text-align:center;font-size:12.5px;}
.su-back a{color:var(--lgn-dim);}
.su-back a:hover{color:var(--lgn-cyan);}

/* 신청 완료 카드 */
.su-done{text-align:center;margin:auto;}
.su-done-ic{
  width:60px;height:60px;margin:4px auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(124,227,168,.15);border:1px solid rgba(124,227,168,.6);color:#7CE3A8;font-size:26px;
}
.su-done .lgn-desc{text-align:center;}
.lgn-btn.su-done-btn{margin-top:10px;text-decoration:none;}