/* ================================================================
   rw-login.css — 로그인 화면(common/member/login/index.jsp) 전용. 출처 kbz-prototype/assets/login.css

   그 화면이 불러 오는 순서 — 아래로 갈수록 이긴다:
     base.css    토큰 · 리셋 · 타이포   (네 화면 공통)
     form.css    폼 부품 — 모달 안의 칸은 후기 작성 화면과 같은 부품이다
     login.css   ← 이 파일
     kbd.css     화면 키보드         (프로토타입 전용 장치)

   목차
      1. 바탕 · 여러 곳이 쓰는 조각
      2. (프로토타입의 후기 작성 페이지 전용 부분 - 로그인 화면은 쓰지 않아 뺐다)
      3. 로그인 게이트 — kbz.co.kr/login 라이브 규격 이식
      4. 로그인 폼
      5. 로그인 버튼과 링크
      6. 아래 띠 — 미이용사 안내
      7. 본인 확인 모달 — 계약 현장이 다 찼을 때
      8. 띠 안의 사진과 링크
   ================================================================ */


/* ── 1. 바탕 · 여러 곳이 쓰는 조각 ────────────────────────────────────────── */


/* 이 화면의 바탕만 여기서 정한다 — 글꼴·글자색·줄높이는 assets/base.css */
body{background:#FBFBFB;cursor:default}
h1,h2,h3,h4{font-family:var(--font-title);line-height:1.24;letter-spacing:-0.03em;font-weight:800}
.tnum{font-variant-numeric:tabular-nums}
.inner{max-width:1120px;margin:0 auto;padding:0 30px;width:100%}
.acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:30px}
.title-lg{font-family:var(--font-title);font-size:38px;color:var(--main-black);letter-spacing:-.035em}
.title-md{font-family:var(--font-title);font-size:30px;color:var(--main-black);letter-spacing:-.03em}
.center{text-align:center}

/* ── 3. 로그인 게이트 — kbz.co.kr/login 라이브 규격 이식 ────────────────────────────────────────── */


/* =========================================================
   1) 로그인 게이트 — kbz.co.kr/login 라이브 규격 이식
   ---------------------------------------------------------
   배경 : linear-gradient(#DCEEFF 21.75%, transparent 61.64%) + #F4F5F6
   폼   : 폭 280 고정. 라벨칸 130 + 입력칸 180 이 280 을 넘겨 줄이 접히므로
          라벨이 위, 입력칸이 아래로 내려간다 (세로 간격 5px).
   입력 : padding 16/12 · radius 4 · 테두리 #CDD1D5
          본문 Wanted Sans 17/22 · 자간 -0.43px · 플레이스홀더 #6D7882
   CTA  : 파란 알약이 아니라 검정 블록 — padding 30 · radius 12 ·
          hover 시 radius 300 + 파란 radial 그라디언트
   ========================================================= */
.lg-bg{display:flex;width:100%;min-height:100vh;padding:96px 0 0;flex-direction:column;justify-content:center;align-items:center;
  background:linear-gradient(rgba(var(--color-sky-rgb),1) 21.75%, rgba(var(--color-white-rgb),0) 61.64%), var(--sub-w-gray)}
@supports(min-height:100dvh){.lg-bg{min-height:100dvh}}
.lg-frame{display:flex;max-width:100%;max-height:900px;justify-content:center;align-items:center;gap:40px;flex:1 0 0;align-self:stretch}
.lg-group{display:flex;padding:0 30px;justify-content:center;align-items:center;gap:60px;flex:1 0 0}
@media(max-width:340px){.lg-group{padding:0 20px}}
.lg-list{display:flex;flex-direction:column;align-items:center;gap:30px}
.lg-contents{display:flex;max-width:600px;flex-direction:column;align-items:center;gap:10px;align-self:stretch}
.lg-title{display:flex;place-content:center;align-items:center;gap:2px;align-self:stretch;flex-wrap:wrap}
/* 피그마 partition-conetents-head : Wanted Sans Bold 30 / 자간 -5% / 줄높이 120%
   (contents-title 높이 72 = 36 × 2줄). 899·532 에서 26 / 24 로 줄어든다. */
.lg-title-txt{width:100%;color:var(--main-navy);text-align:center;font-family:var(--font-body);font-size:30px;font-weight:700;line-height:1.2;letter-spacing:-1.5px}
@media(max-width:899px){.lg-title-txt{font-size:26px;letter-spacing:-1.3px}}
@media(max-width:532px){.lg-title-txt{font-size:24px;letter-spacing:-1.2px}}

/* ── 4. 로그인 폼 ────────────────────────────────────────── */

#login-form{display:flex;width:280px;flex-direction:column;gap:30px}
.lg-input-group{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.lg-row{display:flex;width:280px;max-width:280px;align-items:center;align-content:center;gap:5px 10px;flex-wrap:wrap}
.lg-row-title{display:flex;width:130px;height:19px;align-items:center;gap:5px;flex-shrink:0}
/* 피그마 partition-banner-contents : 18/400 · 줄높이 1.4 · 자간 -0.36px */
.lg-row-title label{color:var(--main-black);font-size:18px;font-weight:400;line-height:1.4;letter-spacing:-.36px;white-space:nowrap}
@media(max-width:532px){.lg-row-title label{font-size:16px}}
.lg-input{display:flex;min-width:180px;flex-direction:column;align-items:flex-start;gap:3px;flex:1 0 0}
.lg-input-wrap{display:flex;padding:16px 12px;justify-content:space-between;align-items:center;align-self:stretch;border-radius:4px;border:1px solid var(--ds-border-subtle);background:var(--main-white);transition:border-color .15s}
.lg-input-wrap:focus-within{border-color:var(--main-blue)}
.lg-input-wrap.is-err{border-color:var(--danger);box-shadow:0 0 0 3px rgba(var(--danger-rgb),.09)}
.lg-input-wrap input{display:block;min-width:20px;flex:1 0 0;overflow:hidden;border:0;outline:0;background:none;text-overflow:ellipsis;
  /* Body/Regular = typo/font/type(Pretendard) 17 / 줄높이 22 / 자간 -0.43 */
  color:var(--main-black);font-family:var(--font-pretendard);font-size:17px;font-style:normal;font-weight:400;line-height:22px;letter-spacing:-.43px}
.lg-input-wrap input::placeholder{color:var(--sub-d-gray)}
/* 피그마 icon_size 20×20 · Color/Icon/gray-light = --ds-text-disabled (#8A949E) */
.lg-eye{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:10px;padding:0;border:0;background:none;color:var(--ds-text-disabled);cursor:pointer}
/* 색은 CSS 가 정하고 svg 는 모양만 낸다 — <img> 로 두면 파일에 박힌 색을 못 덮는다.
   그래서 mask 로 실루엣만 떠서 currentColor 를 입힌다. */
.lg-eye i{display:block;width:20px;height:20px;background:currentColor;
  -webkit-mask:url("../../images/review/hide.svg") center/contain no-repeat;
          mask:url("../../images/review/hide.svg") center/contain no-repeat}
.lg-eye[aria-pressed="true"] i{-webkit-mask-image:url("../../images/review/show.svg");mask-image:url("../../images/review/show.svg")}
.lg-eye:hover{color:var(--main-black)}
.lg-eye:focus-visible{outline:2px solid var(--main-blue);outline-offset:2px;border-radius:3px}
/* 오류는 칸마다 바로 아래에 붙는다 (라이브 .input_message_atomic) */
.lg-msg{display:none;font-size:12px;line-height:1.5}
.lg-msg.danger{display:block;color:var(--danger-text);font-size:12px;font-weight:600;line-height:1.5}

/* ── 5. 로그인 버튼과 링크 ────────────────────────────────────────── */

.lg-btn-group{display:flex;flex-direction:column;align-items:center;gap:5px;align-self:stretch}
/* 피그마 CTA button : p-30 · radius 12 · #131416 · max-w 300 (실측 280×89) */
.review-page .lg-cta{position:relative;display:flex;max-width:300px;padding:30px;align-items:center;align-self:stretch;border-radius:12px;background:var(--main-black);
  border:0;box-shadow:none;overflow:hidden;cursor:pointer;font-family:inherit;z-index:1}
.review-page .lg-cta:focus-visible{outline:2px solid var(--main-blue);outline-offset:3px}
/* 글자칸은 오른쪽 48px 을 비워 화살표 자리를 남긴다 (피그마 btn name pr-48) */
.lg-cta .btn-name{display:flex;flex-direction:column;align-items:flex-start;gap:5px;flex:1 0 0;min-width:0;padding-right:48px}
.lg-cta .btn-name b{color:var(--main-white);font-family:var(--font-body);font-size:24px;font-weight:700;line-height:normal;text-align:left;white-space:nowrap}
@media(max-width:532px){.lg-cta .btn-name b{font-size:20px}}
/* 화살표는 흐름에 끼우지 않고 오른쪽 32px 에 띄운다 (피그마 main_banner_btn) */
/* 라이브 .btn-icon 과 같은 규격 : 24×24 · 오른쪽 끝에서 32px · 세로 가운데 */
.lg-cta .arrow{position:absolute;right:32px;top:50%;transform:translateY(-50%);z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--main-white)}
.lg-cta .arrow svg{position:relative;width:24px;height:24px;display:block}
/* hover : 라이브 .partition-7-btns .btn::after 그대로.
   오른쪽 위에 걸친 378px 원이 scale(0) → scale(1) 로 부풀어 오른다.
   버튼 모양(radius 12)과 바탕색은 그대로다. */
.lg-cta::after{content:"";position:absolute;width:378px;height:378px;border-radius:50%;
  right:-213px;top:-122px;transform:scale(0);opacity:0;z-index:0;pointer-events:none;
  transition:transform .3s,opacity .3s;
  background:radial-gradient(49.14% 96.61% at 51.11% 100%, rgb(0,98,196) 45%, rgba(0,67,134,0) 100%)}
.review-page .lg-cta:hover::after{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){.lg-cta::after{transition:opacity .3s}.review-page .lg-cta:hover::after{transform:scale(1)}}
/* 피그마 footer-tab : Wanted Sans 16/400 · 자간 -0.16px. group-list 간격이 30px 인데
   .lg-btn-group 의 gap 5px 가 이미 붙으므로 25px 만 더한다 */
.lg-link{max-width:500px;align-self:stretch;margin-top:25px;color:var(--sub-d-gray);text-align:center;cursor:pointer;
  font-size:16px;font-weight:400;line-height:normal;letter-spacing:-.16px}
.lg-link a:hover{color:var(--main-black)}

/* ── 6. 아래 띠 — 미이용사 안내 ────────────────────────────────────────── */


/* ===== 로그인 화면 하단 이벤트 띠 (피그마 partition-06) =====
   바닥 흰색 + backdrop-blur 50. padding 25 에 안쪽 높이 50 → 띠 자체는 100px.
   사진은 흐름에 끼우지 않고 띠 오른쪽에 띄워 위로 65px 삐져나온다. */
/* .lg-bg 가 align-items:center 라 그냥 두면 띠가 내용 너비로 줄어든다 — 화면 폭을 꽉 채운다 */
.lg-promo{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;background:var(--main-white);backdrop-filter:blur(50px)}
.lg-promo-inner{position:relative;display:flex;flex-direction:column;gap:15px;height:50px;align-items:flex-start;justify-content:center;max-width:600px;width:100%;padding:0 30px}
@media(max-width:532px){.lg-promo-inner{padding:0}}
.lg-promo-txt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:450px;width:100%;line-height:normal;word-break:keep-all}
/* contents-marque : Wanted Sans SemiBold 16 (691 아래 14) · Black #272B2F */
.lg-promo-txt .sm{color:#272B2F;font-family:var(--font-body);font-size:16px;font-weight:600;line-height:normal;white-space:nowrap}
/* contents-marque-header : Wanted Sans Bold 24 · 자간 -1.2px (899→22, 691→18) */
.lg-promo-txt .bg{color:var(--main-blue);font-family:var(--font-body);font-size:24px;font-weight:700;line-height:normal;letter-spacing:-1.2px}
@media(max-width:899px){.lg-promo-txt .bg{font-size:22px;letter-spacing:-1.1px}}
@media(max-width:691px){.lg-promo-txt .sm{font-size:14px}.lg-promo-txt .bg{font-size:18px;letter-spacing:-.9px}}

/* ── 7. 본인 확인 모달 — 계약 현장이 다 찼을 때 ────────────────────────────────────────── */

/* =========================================================
   계약 현장이 다 찼을 때 뜨는 모달
   ---------------------------------------------------------
   작성 화면의 모달(피그마 3617:35909)과 같은 껍데기를 쓴다. 같은 일을 하는
   창이 화면마다 달라 보이면 같은 창인지 알아보지 못한다.
   다만 시각 배지는 두지 않는다 — 로그인 전이라 누구의 후기인지 모르는 채이고,
   모르는 사람의 시각을 적으면 남의 기록을 보여 주는 셈이 된다.
   ========================================================= */
.lg-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.lg-modal[hidden]{display:none}
.lg-modal-dim{position:absolute;inset:0;background:rgba(39,43,47,.8);animation:lgFade .18s ease}
/* min-width:0 이 없으면 flex 아이템의 자동 최소폭이 max-width 를 이겨 상자가 화면 밖으로 밀린다 */
.lg-modal-box{position:relative;display:flex;flex-direction:column;width:100%;max-width:350px;min-width:0;
  max-height:calc(100vh - 40px);overflow:auto;border-radius:8px;background:var(--main-white);
  animation:lgRise .22s cubic-bezier(.22,1,.36,1)}
@keyframes lgFade{from{opacity:0}to{opacity:1}}
@keyframes lgRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lg-modal-dim,.lg-modal-box{animation:none}}
.lg-modal-body{padding:20px}
.lg-modal-box h3{color:var(--main-black);font-family:var(--font-body);font-size:30px;font-weight:700;
  letter-spacing:-1.5px;line-height:normal;word-break:keep-all}
.lg-modal-box .lg-modal-note{margin-top:14px;color:var(--ds-text-subtle);font-family:var(--font-body);
  font-size:16px;font-weight:400;line-height:1.5;letter-spacing:-.32px;word-break:keep-all}
/* 입력 칸은 작성 화면의 것을 그대로 옮겼다 — 같은 모달이므로 같은 칸이어야 한다 */
.ask-fields{margin-top:20px}
.lg-modal-acts .p .ic{flex:none;display:flex;width:24px;height:24px;align-items:center;justify-content:center}
.lg-modal-acts .p .ic svg{width:20px;height:20px;display:block}
.lg-modal-acts{display:flex;align-items:stretch;margin-top:auto;background:var(--main-blue)}
.lg-modal-acts button{display:flex;align-items:center;justify-content:center;gap:4px;
  padding:16px clamp(12px,4vw,24px);border:0;cursor:pointer;
  font-family:var(--font-pretendard);font-size:clamp(17px,5.2vw,22px);font-weight:600;
  line-height:28px;letter-spacing:-.26px;white-space:nowrap}
.lg-modal-acts .s{flex:none;width:clamp(86px,26vw,120px);background:var(--main-white);color:var(--main-black);
  border-top:1px solid rgba(var(--color-black-rgb),.1)}
.lg-modal-acts .s:hover{background:#F4F5F6}
.lg-modal-acts .p{flex:1 0 0;min-width:0;background:var(--main-blue);color:var(--main-white)}
.lg-modal-acts .p:hover{background:#0E4CAA}
@media(max-width:380px){.lg-modal-box h3{font-size:26px;letter-spacing:-1.3px}}

/* ── 8. 띠 안의 사진과 링크 ────────────────────────────────────────── */


/* 사진은 background 로 둔다 — 파일이 없으면 깨진 아이콘 없이 그냥 비어 보인다 */
.lg-promo-img{display:block;position:absolute;right:0;top:-65px;width:115px;height:140px;background:url("../../images/review/login-cta.png") center bottom/contain no-repeat}
@media(max-width:532px){.lg-promo-img{top:-24px;width:81px;height:99px}}
/* 460 아래에선 사진을 비운다 — 문구가 두 줄 다 사진 자리까지 와서, 같이 두면 글자가 사진에 깔린다.
   사진은 곁들인 그림이고 문구가 이 띠의 용건이라 그림을 접는다.

   접고 남은 자리는 글자가 메운다. 그림을 치웠는데 오른쪽이 비면 접은 값이 없다 —
   큰 줄이 띠 폭을 끝까지 쓰도록 화면 폭에 맞춰 글자를 키운다.
   18px 일 때 큰 줄의 글자 폭이 295, 화살표가 차지하는 폭이 18, 반올림 여유가 4 라
   글자크기 = 18 × (안쪽폭 − 22) ÷ 295 이고, 안쪽폭은 화면폭에서 좌우 여백 50 을 뺀 값이다.
   화살표 그림은 24 칸에 그려졌지만 오른쪽 9 가 빈 칸이라, 그 몫을 음수 여백으로 걷어내야
   글자가 아니라 획이 끝에 닿는다 — 눈은 칸이 아니라 획을 본다.
   작은 줄도 같은 식으로 제 폭을 채운다. 큰 줄만 채우면 작은 줄 끝이 한참 남아 덜 찬 것으로 보인다 —
   크기 차이가 줄어드는 대신 굵기와 색이 위아래를 가른다.
   자간은 px 로 두면 커진 글자에 안 맞아 비율(-.05em = 18px 의 -.9px)로 바꾼다.
   그래도 접힐 만큼 좁으면 잘리지 않게 높이는 고정을 풀고 최소값으로만 둔다 */
@media(max-width:459px){
  .lg-promo-img{display:none}
  .lg-promo-inner{height:auto;min-height:50px}
  .lg-promo-txt .bg{font-size:calc(6.1vw - 4.39px);letter-spacing:-.05em}
  .lg-promo-txt .bg .go{margin-right:-9px}
  .lg-promo-txt .sm{font-size:calc(5.224vw - 2.821px)}
}
/* 360 아래는 좌우 여백 25 가 글자보다 아까워진다 — 16 으로 줄이고 그만큼 글자를 더 키운다 */
@media(max-width:360px){
  .lg-promo{padding:25px 16px}
  .lg-promo-txt .bg{font-size:calc(6.1vw - 3.29px)}
  .lg-promo-txt .sm{font-size:calc(5.224vw - 1.881px)}
}
/* 띠 전체가 누르는 자리다 — 글자만 링크처럼 꾸미면 어디를 눌러야 할지 흐려진다.
   안쪽 사진이 right/top 으로 붙어 있어 여백을 주면 사진이 밀린다. 자리는 그대로
   두고 hover 배경만 box-shadow 로 바깥까지 번지게 한다 */
a.lg-promo-inner{text-decoration:none;color:inherit;cursor:pointer;border-radius:8px;
  transition:background .15s,box-shadow .15s}
a.lg-promo-inner:hover{background:rgba(var(--color-blue-rgb),.05);
  box-shadow:0 0 0 10px rgba(var(--color-blue-rgb),.05)}
a.lg-promo-inner:focus-visible{outline:2px solid var(--main-blue);outline-offset:2px}
/* 갈 곳이 있다는 표시 — 문구 끝에 붙여 한 줄로 읽히게 한다 */
.lg-promo-txt .bg .go{display:inline-flex;vertical-align:-4px;margin-left:2px;transition:transform .15s}
.lg-promo-txt .bg .go svg{width:20px;height:20px;display:block}
a.lg-promo-inner:hover .go{transform:translateX(3px)}
@media(max-width:691px){.lg-promo-txt .bg .go svg{width:17px;height:17px}
  .lg-promo-txt .bg .go{vertical-align:-3px}}