@charset "UTF-8";
/* ============================================================
   DFMS 로그인 리뉴얼 v2 (풀스크린 영상 배경 + 중앙 다크 글래스 카드)
   — .lgn-* 스코프 전용. dfms 호스트에서만 사용(login.jsp 서버측 분기).
   배경 영상: https://resrce.dvms.co.kr/videos/video3.mp4
   (영상 로드 실패 시 poster=login_hero.jpg → 그마저 없으면 그라디언트 폴백)
   ============================================================ */
:root{
  --lgn-ink:#F9F5EC;                       /* 본문 밝은 글자 */
  --lgn-dim:rgba(214,228,246,.72);         /* 보조 글자 */
  --lgn-cyan:#6FD4FF;                      /* 포인트(시안 네온 블루) */
  --lgn-cyan-deep:#3EA6E8;
  --lgn-card-bg:rgba(9,15,30,.74);         /* 카드 반투명 다크 */
  --lgn-card-line:rgba(126,182,240,.32);   /* 카드 테두리 */
  --lgn-input-bg:rgba(6,11,24,.55);
  --lgn-input-line:rgba(132,170,220,.35);
  --lgn-night-1:#0B1526;                   /* 영상 폴백 그라디언트 */
  --lgn-night-2:#12233F;
  --lgn-night-3:#1B3B63;
}

body.lgn-body{margin:0;background:var(--lgn-night-1);overflow-x:hidden;}

.lgn-page{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:24px;
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif;
  color:var(--lgn-ink);-webkit-font-smoothing:antialiased;box-sizing:border-box;
}
@supports (min-height:100dvh){ .lgn-page{min-height:100dvh;} }
.lgn-page *{box-sizing:border-box;}

/* ── 풀스크린 배경(영상 + 폴백 이미지/그라디언트 + 어둡게 셰이드) ── */
.lgn-bg{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  /* 영상 로딩 전 표시 이미지(자체 자산, 원본: kdei.kr/assets/videos/video3.jpg) → 실패 시 그라디언트 폴백 */
  background-image:
    url('/_assets/images/login_video_poster.jpg'),
    linear-gradient(160deg,var(--lgn-night-1) 0%,var(--lgn-night-2) 55%,var(--lgn-night-3) 100%);
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}
.lgn-video{
  position:absolute;top:50%;left:50%;
  width:100%;height:100%;min-width:100%;min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;
  /* 재생 시작 전에는 숨김(뒤의 poster/배경이미지가 보임) → playing 시 페이드인 */
  opacity:0;transition:opacity .9s ease;
}
.lgn-video.is-live{opacity:1;}
.lgn-shade{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, rgba(5,10,22,.28) 0%, rgba(5,10,22,.62) 100%),
    linear-gradient(180deg, rgba(5,10,22,.35) 0%, rgba(5,10,22,.15) 45%, rgba(5,10,22,.55) 100%);
}
/* 접근성: 동작 축소 선호 시 영상 정지 대신 숨김(포스터/그라디언트 유지) */
@media (prefers-reduced-motion: reduce){
  .lgn-video{display:none;}
}

/* ── 중앙 카드 (반투명 다크 글래스) ── */
.lgn-card{
  position:relative;z-index:1;
  width:min(400px,100%);
  margin:auto;                      /* 페이지 세로 중앙(하단 info 는 아래 고정) */
  padding:34px 36px 30px;
  background:var(--lgn-card-bg);
  border:1px solid var(--lgn-card-line);
  border-radius:16px;
  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(8,14,28,.4),
    inset 0 1px 0 rgba(160,205,255,.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
}

/* 상단 캡션(아이브로우) */
.lgn-eyebrow{
  margin:0 0 18px;padding-bottom:14px;
  border-bottom:1px solid rgba(126,182,240,.22);
  font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--lgn-dim);text-align:center;white-space:nowrap;
}

/* 브랜드(로고 + 워드마크) */
.lgn-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:24px;}
.lgn-logo{
  height:56px;width:auto;display:block;margin-bottom:10px;
  filter:drop-shadow(0 4px 14px rgba(111,212,255,.35));
}
/* ⚠ 공통 번들(common_header 등)이 이 파일보다 늦게 로드되어 h1/b 타이포를
   덮어쓰므로(h1 22px, b 14px/vertical-align:top) 명시도를 올려 고정한다. */
.lgn-card .lgn-title{
  /* ⚠ letter-spacing 은 마지막 글자 뒤에도 붙기 때문에, 가운데 정렬된 워드마크는
     자간의 절반만큼 왼쪽으로 치우친다. 자간과 같은 값의 padding-left 로 보정한다.
     자간을 바꾸면 padding-left 도 같은 값으로 맞출 것(아래 반응형 단계들도 동일). */
  margin:0;font-size:30px;font-weight:800;letter-spacing:4px;padding-left:4px;line-height:1.2;
  color:#fff;text-shadow:0 2px 14px rgba(111,212,255,.35);
}
.lgn-card .lgn-title b{
  color:var(--lgn-cyan);font-weight:800;
  /* ⚠ letter-spacing:inherit 가 반드시 있어야 한다.
     공통 CSS 의 전체 선택자가 이 <b> 에도 '직접' 자간을 지정한다
     (dpms: design_renewal.css 의 `* { letter-spacing:-0.2px }`,
      dfms: common.css 의 `* { letter-spacing:-0.5px }`).
     직접 선언은 상속보다 항상 우선하므로, 이 줄이 없으면 부모 h1 의 자간(4px)이
     <b> 에만 적용되지 않아 P(F) 뒤 자간이 통째로 사라진다 → P|M 이 4px 붙어 보인다.
     inherit 로 두면 반응형 단계별 자간(4px/3px/2.5px)을 그대로 따라간다. */
  font-size:inherit;line-height:inherit;vertical-align:baseline;letter-spacing:inherit;
  /* 글자 사이 '보이는' 간격 균일화.
     letter-spacing 은 글자 사이를 똑같이 벌리지만, 글자마다 타고난 좌우 여백이
     달라 실제 잉크 간격은 어긋난다. Chrome 실측(120px 로 4배 렌더 후 30px 환산):
       D|F 6.75px   F|M 6.25px   M|S 6.25px
     M 은 감쌀 요소가 없어 M|S 를 못 건드리므로, D|F 만 M|S(6.25px)에 맞춘다.
     F|M 은 이미 M|S 와 같아 보정하지 않는다 — DPMS 는 가운데 글자가 P 라
     margin-right:.0083em 이 필요하다(글자가 다르면 값도 다르니 복사하지 말 것).
     차이값이라 letter-spacing 이 몇이든 유효 → 반응형 전 단계 공용(px 아닌 em).
     ⚠ 눈대중 금지. 1px 단위 픽셀 스캔은 안티앨리어싱 때문에 차이가 2~4배로
        과장돼 보인다(그래서 4배로 렌더해 쟀다). 값을 바꿀 땐 같은 방법으로 재측정할 것. */
  margin-left:-.0167em;   /* D|F 6.75 -> 6.25px */
  margin-right:0;         /* F|M 6.25px — 보정 불필요 */
}
.lgn-sub{margin:6px 0 0;font-size:12px;letter-spacing:.4px;color:var(--lgn-dim);}

/* ── 입력 필드 ── */
.lgn-field{margin-bottom:16px;}
.lgn-label{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:.3px;
  color:var(--lgn-ink);margin:0 0 7px;
}
.lgn-input{position:relative;}
.lgn-input .lgn-ic{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:rgba(150,190,235,.75);font-size:15px;pointer-events:none;
}
.lgn-input input{
  width:100%;height:48px;max-width:100%;
  padding:0 14px 0 40px;
  border:1px solid var(--lgn-input-line);border-radius:9px;
  background:var(--lgn-input-bg);
  font-size:15px;color:var(--lgn-ink);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.lgn-input input::placeholder{color:rgba(160,185,215,.5);}
.lgn-input input:focus{
  outline:none;border-color:var(--lgn-cyan);
  background:rgba(8,16,32,.72);
  box-shadow:0 0 0 3px rgba(111,212,255,.18),0 0 14px rgba(111,212,255,.25);
}
/* 브라우저 자동완성 다크 유지(webkit) */
.lgn-input input:-webkit-autofill{
  -webkit-text-fill-color:var(--lgn-ink);
  -webkit-box-shadow:0 0 0 1000px #0A1424 inset;
  caret-color:var(--lgn-ink);
  transition:background-color 9999s ease-out 0s;
}

/* 아이디 저장 · 자동 로그인 (체크박스 2개가 좌측에 나란히)
   ⚠ justify-content 는 flex-start 다 — space-between 이면 체크박스가 둘일 때 카드 좌우 끝으로
     갈라져 한 묶음으로 읽히지 않는다(하나일 때는 어느 쪽이든 좌측이라 차이가 없다). */
.lgn-row{display:flex;align-items:center;justify-content:flex-start;margin:2px 0 22px;gap:18px;flex-wrap:wrap;}
.lgn-check{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--lgn-dim);cursor:pointer;margin:0;}
.lgn-check input{width:15px;height:15px;accent-color:var(--lgn-cyan-deep);cursor:pointer;}

/* 레거시(dlts/dpms 호스트) 로그인 폼의 체크박스 간격.
   그 마크업은 common.css(.check-box .check — DLTS·DPMS 공유 파일이라 손댈 수 없다) 를 쓰는데
   .check-box 가 block 이라 '아이디 저장'·'자동 로그인' 이 붙어 버린다 → 간격만 여기서 준다. */
.login-check .check-box + .check-box{margin-left:18px;}

/* ── 로그인 버튼(네온 시안 글로우) ── */
.lgn-btn{
  width:100%;height:50px;max-width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid rgba(170,225,255,.85);border-radius:9px;cursor:pointer;
  background:linear-gradient(180deg,#8ADCFF 0%,#49AEEA 100%);
  color:#06263F;
  font-size:15px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;
  box-shadow:
    0 0 18px rgba(96,196,255,.5),
    0 8px 22px rgba(20,90,150,.45),
    inset 0 1px 0 rgba(255,255,255,.55);
  transition:box-shadow .15s,filter .15s,transform .05s;
}
.lgn-btn:hover{
  filter:brightness(1.06);
  box-shadow:
    0 0 26px rgba(111,212,255,.65),
    0 8px 22px rgba(20,90,150,.5),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.lgn-btn:active{transform:translateY(1px);}
.lgn-btn .fa{font-size:14px;}

/* SECURE ACCESS 캡션 */
.lgn-secure{
  margin:12px 0 0;text-align:center;
  font-size:10.5px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  color:rgba(111,212,255,.85);
}
.lgn-secure .fa{font-size:10px;margin-right:5px;}

/* 하단 링크(아이디/비밀번호 찾기) */
.lgn-links{
  /* 링크 3개(아이디 찾기·비밀번호 찾기·협력업체 회원가입) — 좁은 폭에서는 줄을 넘긴다 */
  display:flex;align-items:center;justify-content:center;gap:8px 22px;flex-wrap:wrap;
  margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(126,182,240,.18);
  font-size:12.5px;
}
.lgn-links a{color:var(--lgn-dim);text-decoration:underline;text-underline-offset:3px;}
.lgn-links a:hover{color:var(--lgn-cyan);}

/* ── 페이지 하단 회사 정보(카드 밖, 은은하게) ── */
.lgn-info{
  position:relative;z-index:1;
  list-style:none;margin:22px 0 0;padding:0;
  text-align:center;
}
.lgn-info li{font-size:11px;color:rgba(190,208,232,.5);line-height:1.7;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.lgn-info li span:not(:last-child)::after{content:"|";margin:0 6px;color:rgba(190,208,232,.3);}

/* ── 반응형 ── */
@media (max-width:480px){
  .lgn-page{padding:18px 14px;padding-bottom:calc(14px + env(safe-area-inset-bottom));}
  .lgn-card{padding:28px 22px 24px;border-radius:14px;}
  .lgn-eyebrow{font-size:10px;letter-spacing:1.6px;white-space:normal;}
  .lgn-logo{height:48px;}
  .lgn-card .lgn-title{font-size:26px;letter-spacing:3px;padding-left:3px;}
  /* 터치 크기 + iOS 자동확대 방지(16px) */
  .lgn-input input{height:50px;font-size:16px;}
  .lgn-btn{height:52px;}
  .lgn-links{gap:14px;font-size:12px;}
  .lgn-info li{font-size:10px;}
}

/* 낮은 높이(가로 모드): 여백 축소로 스크롤 최소화 */
@media (max-height:560px){
  .lgn-page{padding:12px 16px;}
  .lgn-card{padding:22px 28px 20px;}
  .lgn-eyebrow{margin-bottom:12px;padding-bottom:10px;}
  .lgn-brand{margin-bottom:14px;}
  .lgn-logo{height:40px;margin-bottom:6px;}
  .lgn-card .lgn-title{font-size:22px;}
  .lgn-field{margin-bottom:11px;}
  .lgn-row{margin-bottom:14px;}
  .lgn-links{margin-top:12px;padding-top:10px;}
  .lgn-info{margin-top:12px;}
}

/* ============================================================
   아이디 / 비밀번호 찾기 카드 (.lgn-card.is-find)
   - 로그인 카드와 같은 다크 글래스 언어를 그대로 쓰고,
     상단 브랜드만 축소(로고 56 → 34, 타이틀 30 → 20)한다.
   - login.jsp(인플레이스 전환) 와 login_sch.jsp(단독/모달) 가 공유.
   ⚠ display 를 지정한 요소는 hidden 속성만으로 안 숨는다(팀규칙 #1-1)
     → 아래 [hidden] 짝 규칙을 반드시 함께 유지한다.
   ============================================================ */
.lgn-card.is-find .lgn-logo{height:34px;margin-bottom:6px;}
.lgn-card.is-find .lgn-title{font-size:20px;letter-spacing:3px;padding-left:3px;}
.lgn-card.is-find .lgn-sub{display:none;}
.lgn-card.is-find .lgn-brand{margin-bottom:16px;}

/* 세그먼트 컨트롤 — 탭(아이디/비밀번호)과 전달수단(문자/이메일) 양쪽에 같은 컴포넌트를 쓴다 */
.lgn-seg{
  display:flex;gap:4px;margin:0 0 14px;padding:3px;
  background:var(--lgn-input-bg);
  border:1px solid var(--lgn-input-line);border-radius:999px;
}
.lgn-seg[hidden]{display:none;}
.lgn-seg-i{
  flex:1;min-width:0;padding:8px 4px;
  border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.2px;
  color:var(--lgn-dim);transition:background .15s,color .15s;
}
.lgn-seg-i:hover{color:var(--lgn-ink);}
.lgn-seg-i.is-on{
  background:var(--lgn-cyan);color:#06263F;
  box-shadow:0 0 12px rgba(111,212,255,.35);
}
.lgn-seg-i:focus-visible{outline:2px solid var(--lgn-cyan);outline-offset:1px;}

/* 탭 패널 / 안내문 */
.lgn-pane[hidden]{display:none;}
.lgn-desc{
  margin:0 0 14px;font-size:12px;line-height:1.55;
  color:rgba(214,228,246,.62);
}
.lgn-desc b{color:var(--lgn-ink);font-weight:600;}
.lgn-field[hidden]{display:none;}

/* 한글 라벨 버튼 — 기존 .lgn-btn 의 대문자 변환/넓은 자간만 완화 */
.lgn-btn.is-ko{
  text-transform:none;letter-spacing:1.2px;font-size:14.5px;
}

/* 결과 패널 — 서버 message 가 여러 줄이라 pre-line 유지 */
.lgn-result{
  margin:14px 0 0;padding:11px 13px;border-radius:9px;
  font-size:12.5px;line-height:1.55;white-space:pre-line;
}
.lgn-result[hidden]{display:none;}
.lgn-result.ok{
  background:rgba(46,158,98,.16);border:1px solid rgba(46,158,98,.45);color:#8FE0B4;
}
.lgn-result.err{
  background:rgba(217,83,79,.16);border:1px solid rgba(217,83,79,.45);color:#F3A9A6;
}

/* 로그인으로 돌아가기 */
.lgn-back{
  margin:16px 0 0;padding-top:14px;text-align:center;font-size:12.5px;
  border-top:1px solid rgba(126,182,240,.18);
}
.lgn-back a{color:var(--lgn-dim);text-decoration:underline;text-underline-offset:3px;}
.lgn-back a:hover{color:var(--lgn-cyan);}
/* 단독/모달로 열린 login_sch.jsp 는 돌아갈 로그인 카드가 없다 */
.lgn-card[data-standalone] .lgn-back{display:none;}

/* login_sch.jsp(모달 iframe) 용 축약 배치 — 배경 영상 없이 그라디언트 폴백만 쓴다 */
.lgn-page.is-embed{min-height:0;padding:14px;}
.lgn-page.is-embed .lgn-card{
  margin:0 auto;padding:18px 20px 16px;border-radius:12px;box-shadow:none;
}
.lgn-page.is-embed .lgn-eyebrow{display:none;}
.lgn-page.is-embed .lgn-logo{height:28px;}
.lgn-page.is-embed .lgn-brand{margin-bottom:12px;}

@media (max-width:480px){
  .lgn-card.is-find .lgn-logo{height:30px;}
  .lgn-card.is-find .lgn-title{font-size:18px;letter-spacing:2.5px;padding-left:2.5px;}
  .lgn-seg-i{font-size:12px;}
  .lgn-desc{font-size:11.5px;}
}

@media (max-height:560px){
  .lgn-card.is-find .lgn-logo{height:26px;margin-bottom:4px;}
  .lgn-card.is-find .lgn-title{font-size:17px;}
  .lgn-card.is-find .lgn-brand{margin-bottom:10px;}
  .lgn-seg{margin-bottom:10px;}
  .lgn-desc{margin-bottom:10px;}
  .lgn-back{margin-top:10px;padding-top:9px;}
}