@charset "UTF-8";
/* =====================================================================
   Loopulse Auth Reskin — SSO 로그인 / 회원가입 / ID·PW 찾기 공개 페이지
   ---------------------------------------------------------------------
   DESIGN.md(Loopulse 디자인 시스템) 토큰을 단일 기준으로,
   기존 구형(AdminLTE/waves) auth 스타일을 청량한 에메랄드↔블루 톤으로 통일.
   style.css 이후 로드되어 오버라이드한다. (inline 배경 등은 !important 로 차단)
   ===================================================================== */
:root {
  --lp-blue:#2563eb; --lp-blue-d:#1d4ed8; --lp-sky:#3b82f6;
  --lp-neon:#059669; --lp-neon-d:#047857; --lp-mint:#10b981;
  --lp-ink:#0f2e3d; --lp-tx2:#1a3a4a; --lp-tx3:#4d6b78; --lp-tx4:#90aab6;
  --lp-line:#e1ebf0; --lp-border:rgba(20,120,140,.09);
  --lp-grad:linear-gradient(to right,#059669,#2563eb);   /* ★근간 브랜드 */
  --lp-grad-sq:linear-gradient(135deg,#2563eb,#059669);
  --lp-page:linear-gradient(160deg,#e8fff7 0%,#e6fbff 50%,#eef4ff 100%);
  --lp-r-sm:10px; --lp-r-md:16px; --lp-r-pill:20px;
  --lp-sh-sm:0 2px 10px rgba(0,160,180,.07);
  --lp-sh-md:0 22px 50px -16px rgba(20,90,140,.22);
  --lp-font:'Pretendard','Pretendard Variable','Malgun Gothic',system-ui,-apple-system,sans-serif;
}

/* ── 페이지 베이스 : 배경 이미지(inline) 제거 → 청량 그라데이션 ───────── */
body[themebg-pattern="theme1"] {
  background:var(--lp-page) !important;
  background-attachment:fixed !important;
  font-family:var(--lp-font) !important;
  color:var(--lp-ink);
  min-height:100vh;
}
.login-block, .login-block * { font-family:var(--lp-font); }

/* ── 인증 카드 : 글래스모피즘/180px 띄움 제거 → 솔리드 화이트 카드 ─────── */
.login-block { margin:0 auto !important; }
.login-block .auth-box {
  max-width:430px;
  margin:64px auto 40px !important;
  padding:44px 40px 48px !important;
  border-radius:var(--lp-r-md) !important;
  background:#ffffff !important;
  border:1px solid var(--lp-border) !important;
  box-shadow:var(--lp-sh-md) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.join-block .auth-box {
  max-width:760px;
  margin-top:48px !important;
  padding:40px 44px 44px !important;
}
.join-block .auth-box.service_box { max-width:1130px !important; }
.login-block .find_box {
  margin:48px auto 40px !important;
  padding:44px 36px 44px !important;
}

/* ── 로고 / 카피 ──────────────────────────────────────────────────── */
.login-block .logo { text-align:center; margin-bottom:26px !important; }
.login-block .logo > img { width:142px; height:auto; }

/* Loopulse 브랜드 락업 : ∞ 마크 + Loopulse 워드마크 + DPP PLATFORM 캡션 */
.lp-brand { display:inline-flex; flex-direction:column; align-items:center; gap:11px; }
.lp-brand-row { display:inline-flex; align-items:center; gap:12px; }
.lp-brand-mk {
  width:52px; height:52px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.lp-brand-mk img { width:100%; height:100%; object-fit:contain; display:block; }
.lp-brand-wm {
  font-family:var(--lp-font); font-size:25px; font-weight:800;
  letter-spacing:-.015em; color:var(--lp-ink); line-height:1;
}
.lp-brand-sub {
  font-family:var(--lp-font); font-size:12px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  background:var(--lp-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--lp-blue);
}
.logo_detail {
  padding-top:12px; font-family:var(--lp-font);
  font-size:13px; font-weight:700; letter-spacing:.04em;
  background:var(--lp-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--lp-blue);
}
.login_f_text > p { color:var(--lp-tx4); font-size:13px; letter-spacing:.02em; }
.login_find a { color:var(--lp-tx3); font-weight:600; }
.login_find a:hover { color:var(--lp-blue); text-decoration:none; }

/* ── 입력 필드 ────────────────────────────────────────────────────── */
.login_box input,
.find_box .input,
.form-cont .input,
.login-block .input,
.login-block input[type="text"],
.login-block input[type="password"] {
  width:100%; height:48px; padding:12px 16px;
  border:1px solid var(--lp-line) !important;
  border-radius:var(--lp-r-sm) !important;
  font-size:15px; color:var(--lp-ink); background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.login_box input:focus,
.find_box .input:focus,
.form-cont .input:focus,
.login-block input:focus {
  outline:none;
  border-color:var(--lp-blue) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12) !important;
}
.login_box input::placeholder, .input::placeholder, .login-block input::placeholder { color:var(--lp-tx4); }

/* ── 버튼 : 주 액션 = 브랜드 그라데이션 / 보조 = 화이트+보더 ─────────── */
/* 주요 액션 버튼만 48px (인풋 내부 인라인 버튼 bg_btn/line_btn/중복확인/기업인증 제외) */
.login-block .btn:not(.bg_btn):not(.line_btn):not(.duplication_btn):not(.gln_auth_btn) {
  min-height:48px; line-height:1.2; font-size:15px; border-radius:var(--lp-r-sm) !important;
}
/* 인풋 내부 인라인 버튼(기업인증/중복확인/파일찾기)은 원래 절대배치 크기 유지 — min-height 누수 차단 */
.form-cont .form-btn-box button,
.form-cont ul li p button { min-height:0 !important; height:auto; font-size:14px; border-radius:6px !important; }
.btn-login,
.login-block .btn-primary {
  background:var(--lp-grad) !important; border:0 !important; color:#fff !important;
  font-weight:700 !important; letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(37,99,235,.22) !important;
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.btn-login:hover,
.login-block .btn-primary:hover {
  transform:translateY(-2px); filter:brightness(1.03); color:#fff !important;
  box-shadow:0 10px 26px rgba(5,150,105,.26) !important;
}
.btn-login:active, .login-block .btn-primary:active { transform:translateY(0); }

.btn-white,
.btn-line,
.login-block .btn-line {
  background:#fff !important; border:1.5px solid #cfe0e6 !important; color:var(--lp-tx2) !important;
  font-weight:600 !important;
}
.btn-white:hover,
.btn-line:hover,
.login-block .btn-line:hover {
  border-color:var(--lp-blue) !important; color:var(--lp-blue) !important; background:#f4faff !important;
}

/* ── 회원 유형 선택(selectRole) ───────────────────────────────────── */
.join_select ul li {
  border-radius:var(--lp-r-md);
  border:1px solid var(--lp-border);
  box-shadow:var(--lp-sh-sm);
}
.join_select ul li::before { border-radius:var(--lp-r-md); background:var(--lp-grad) !important; }
.join_select ul li strong { color:var(--lp-ink); }
.join_select ul li span { font-family:var(--lp-font); color:var(--lp-tx4); }
.join_select ul li button {
  background:#eef5f8; color:var(--lp-tx2); border-radius:var(--lp-r-sm); font-weight:700;
}
.join_select ul li:hover { box-shadow:var(--lp-sh-md); transform:translateY(-2px); }
.join_select ul li:hover button { background:var(--lp-grad) !important; color:#fff; }

/* ── 가입 스텝 진행바 ─────────────────────────────────────────────── */
.step_box ul { background:#fff; border-radius:var(--lp-r-md); box-shadow:var(--lp-sh-sm); }
.step_box ul li span { font-family:var(--lp-font); color:var(--lp-tx4); }
.step_box ul li p { color:var(--lp-tx3); font-size:15px; }
.step_box ul li.on { background:var(--lp-grad) !important; box-shadow:0 6px 18px rgba(37,99,235,.20) !important; }
.step_box ul li.on .inner { border-radius:10px; }
.step_box ul li.on p { color:var(--lp-blue) !important; font-weight:700; }

/* ── 입력 폼 영역(formAdmin/formMember) ───────────────────────────── */
.form-cont { border-top:2px solid var(--lp-ink) !important; }
.form-cont .top > strong { color:var(--lp-ink); }
.form-cont .top > span > em,
.form-cont ul li p .tit em { color:var(--lp-blue) !important; }
.form-cont ul li p .tit { color:var(--lp-tx2); }
.form-cont ul li p button.bg_btn {
  background:var(--lp-blue) !important; color:#fff !important;
  border-radius:var(--lp-r-sm) !important; box-shadow:0 3px 10px rgba(37,99,235,.30) !important;
}
.form-cont ul li p button.bg_btn:hover { background:var(--lp-blue-d) !important; border-color:var(--lp-blue-d) !important; }
.form-cont ul li p button.line_btn:hover { background:var(--lp-blue) !important; border-color:var(--lp-blue) !important; color:#fff !important; }

/* ── 찾기 탭(findId/findPw) ───────────────────────────────────────── */
.find_box .tab li a { color:var(--lp-tx3); font-weight:600; }
.find_box .tab li.on a { color:var(--lp-blue); }

/* ── 서비스 선택(selectService) : 안내/요금 카드 ──────────────────── */
.service_box strong.tit, .service_cont strong.tit { color:var(--lp-ink); }
.service_cont { border-top:1px solid var(--lp-border); }
.guide_box { border-radius:var(--lp-r-md); border:1px solid var(--lp-border); box-shadow:var(--lp-sh-sm); }
.guide_box ul li.guide_last { background:#eef7f4; color:var(--lp-neon-d); border-radius:var(--lp-r-pill); }

.cost_list > li { border-radius:var(--lp-r-md); border:1px solid var(--lp-border); box-shadow:var(--lp-sh-sm); }
.cost_list > li .cont_top strong { color:var(--lp-ink); font-family:var(--lp-font); }
.cost_list > li button { border-radius:var(--lp-r-pill); background:#eef5f8; color:var(--lp-tx2); font-weight:700; }
.cost_list > li:hover { transform:translateY(-3px); box-shadow:var(--lp-sh-md); }
.cost_list > li:hover button { background:var(--lp-grad) !important; color:#fff; }
/* 요금 카드 3종(cost1/cost2/cost3)을 무료(cost1) 카드와 완전히 동일하게 통일 */
/* 기본·호버 보더: cost1 초록 그라데이션 (cost2 청록 / cost3 보라 제거) */
.cost_list > li.cost1::before,
.cost_list > li.cost2::before,
.cost_list > li.cost3::before { background:linear-gradient(90deg,#059669,#2563eb) !important; border-radius:var(--lp-r-md) !important; }
/* 버튼: 호버·선택 시 브랜드 그라데이션 (3종 동일) */
.cost_list > li.cost1:hover button,
.cost_list > li.cost2:hover button,
.cost_list > li.cost3:hover button,
.cost_list > li.cost1.active button,
.cost_list > li.cost2.active button,
.cost_list > li.cost3.active button { background:var(--lp-grad) !important; color:#fff !important; }
/* 구독명(.top): 호버·선택 시 cost1 초록 그라데이션 텍스트 (3종 동일) */
.cost_list > li.cost1:hover .top,
.cost_list > li.cost2:hover .top,
.cost_list > li.cost3:hover .top,
.cost_list > li.cost1.active .top,
.cost_list > li.cost2.active .top,
.cost_list > li.cost3.active .top {
  background:linear-gradient(90deg,#059669,#2563eb) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
/* 선택(active) 보더: 표시 + 브랜드 그라데이션 (cost1 기준, 3종 동일) */
.cost_list > li.cost1.active::before,
.cost_list > li.cost2.active::before,
.cost_list > li.cost3.active::before { opacity:1; background:var(--lp-grad) !important; border-radius:var(--lp-r-md); padding:2px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }

/* ── 가입 완료(formComplete) ──────────────────────────────────────── */
.join_done { border-radius:var(--lp-r-md); border:1px solid var(--lp-border); box-shadow:var(--lp-sh-sm); }
.join_done strong { color:var(--lp-ink); }
.join_done p span { color:var(--lp-blue); }

/* ── 기업명 자동완성 드롭다운 : 48px 인풋에 맞춰 위치/스타일 보정 ───────── */
/* top 은 non-important — bootstrap-autocomplete(Popper) 인라인 위치와 충돌 방지 */
.login-block .card .card-block .dropdown-menu {
  top: 50px;
  margin:0; padding:5px;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-sm);
  box-shadow:0 12px 30px rgba(20,90,140,.16);
  z-index:1100;
  max-height:264px; overflow-y:auto;
}
.login-block .card .card-block a.dropdown-item,
.login-block .card .card-block .dropdown-menu > a {
  padding:9px 12px; border-radius:7px; font-size:14px; color:var(--lp-tx2); line-height:1.4;
}
.login-block .card .card-block a.dropdown-item:hover,
.login-block .card .card-block .dropdown-menu > a:hover,
.login-block .card .card-block a.dropdown-item.active {
  background:#eef5ff; color:var(--lp-blue);
}

/* ── 언어 전환 칩 : #4680ff → 브랜드 블루 (headLogin inline style 덮어쓰기) ─ */
.lang-current { background-color:var(--lp-blue) !important; border-color:var(--lp-blue) !important; }
.lang-dropdown a:hover { background:#eef5ff !important; color:var(--lp-blue) !important; }
.lang-dropdown a.active { color:var(--lp-blue) !important; }

/* ── 기업 검색 모달 (회원가입 소속 회사 선택) ───────────────────────── */
.lp-modal { display:none; position:fixed; inset:0; z-index:3000; }
.lp-modal.show { display:block; }
.lp-modal-dim { position:absolute; inset:0; background:rgba(15,46,61,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.lp-modal-box {
  position:relative; width:min(560px,92vw); margin:9vh auto 0; background:#fff;
  border-radius:16px; box-shadow:0 30px 70px -18px rgba(15,46,61,.5); overflow:hidden;
}
.lp-modal-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--lp-line); }
.lp-modal-head strong { font-size:17px; color:var(--lp-ink); font-weight:800; }
.lp-modal-close { border:0; background:transparent; font-size:24px; line-height:1; color:var(--lp-tx4); cursor:pointer; padding:0 2px; }
.lp-modal-close:hover { color:var(--lp-ink); }
.lp-modal-search { display:flex; gap:8px; padding:16px 22px 12px; }
.lp-modal-search input {
  flex:1; height:44px; padding:10px 14px; border:1px solid var(--lp-line);
  border-radius:10px; font-size:14px; font-family:var(--lp-font); color:var(--lp-ink);
}
.lp-modal-search input:focus { outline:none; border-color:var(--lp-blue); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.lp-modal-search .btn {
  flex:0 0 auto; width:84px; min-height:44px; height:44px; border:0; border-radius:10px;
  background:var(--lp-grad); color:#fff; font-weight:700; font-size:14px; cursor:pointer; margin:0;
}
.lp-modal-search .btn:hover { filter:brightness(1.04); }
.lp-modal-body { padding:0 22px 20px; max-height:48vh; overflow-y:auto; }
.lp-comp-table { width:100%; border-collapse:collapse; }
.lp-comp-table th {
  position:sticky; top:0; background:#f3f9fc; color:var(--lp-tx3);
  font-size:12px; font-weight:700; text-align:left; padding:10px 12px; letter-spacing:.02em;
}
.lp-comp-table td { padding:11px 12px; font-size:14px; color:var(--lp-tx2); border-bottom:1px solid #eef3f5; }
.lp-comp-table tr.comp-row { cursor:pointer; transition:background .12s; }
.lp-comp-table tr.comp-row:hover td { background:#eef5ff; color:var(--lp-blue); }
.lp-modal-empty { padding:34px 12px; text-align:center; color:var(--lp-tx4); font-size:14px; }