/* ============================================================
   fx-auth.css  ·  KLS은행 로그인 / 회원가입
   팔레트 (fx-home.css와 동일 토큰) · 네오뱅크 바이올렛 무드
   ============================================================ */
:root{
  --violet:#6D5BFF; --violet-soft:#8E7CFF; --violet-deep:#5A45E8;
  --violet-bright:#7C5CFF; --accent:#9C6BFF;
  --purple:#6D5BFF; --purple-soft:#8E7CFF; --purple-lt:#F2F0FB;   /* legacy 별칭 */
  --navy:#1A1A2E; --navy-dark:#14142B;
  --lavender:#F1EEFF; --bg:#F6F4FF; --surface:#FFFFFF; --border:#E9E5FB;
  --text:#16162B; --text-body:#2B2B38; --text-sub:#56566B;
  --up:#F23645; --down:#2F6BFF; --info:#2F6BFF;
  --grad:linear-gradient(135deg,#6D5BFF 0%,#9C6BFF 100%);
  --grad-cta:linear-gradient(135deg,#6D5BFF 0%,#5A45E8 100%);
  --grad-hero:linear-gradient(120deg,#6D5BFF 0%,#7C5CFF 45%,#9C6BFF 100%);
  --radius:20px; --radius-sm:14px;
  --shadow-sm:0 4px 14px rgba(26,26,46,.07);
  --shadow:0 12px 30px rgba(109,91,255,.16);
  --shadow-lg:0 24px 56px rgba(109,91,255,.22);
  --container:1200px; --t:160ms; --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
.auth-main{
  background:
    radial-gradient(720px 360px at 10% 8%,rgba(109,91,255,.10),transparent 60%),
    radial-gradient(620px 340px at 92% 14%,rgba(59,130,246,.08),transparent 60%),
    radial-gradient(560px 320px at 80% 96%,rgba(251,113,133,.06),transparent 60%),
    var(--bg);
  min-height:calc(100vh - 112px); /* 헤더 높이만큼 제외 */
  display:flex;align-items:flex-start;justify-content:center;
  padding:56px 24px;
  color:var(--text-body);
}
.auth-wrap{
  width:100%;max-width:1100px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;
}

/* ===== 좌측 소개 (상단 고정 배치, 움직임 없음) ===== */
.auth-intro{padding-right:8px;align-self:start;}
.intro-logo{
  display:inline-block;font-size:28px;font-weight:800;
  letter-spacing:-.5px;color:var(--violet);margin-bottom:18px;
}
.intro-mark{
  width:64px;height:64px;border-radius:18px;
  background:var(--grad);
  color:#fff;font-size:30px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
  margin-bottom:28px;
}
.intro-title{
  font-size:38px;line-height:1.25;font-weight:800;
  color:var(--text);letter-spacing:-1px;margin:0 0 18px;
}
.intro-desc{font-size:16px;line-height:1.7;color:var(--text-sub);margin:0 0 38px;}

.intro-feature{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;}
.intro-feature li{display:flex;align-items:center;gap:16px;}
.feat-ico{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  background:var(--lavender);border:1px solid var(--border);color:var(--violet);
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:var(--shadow-sm);
}
.feat-text{display:flex;flex-direction:column;}
.feat-text strong{font-size:15px;font-weight:700;color:var(--text);}
.feat-text span{font-size:13px;color:var(--text-sub);margin-top:2px;}

/* ===== 우측 카드 ===== */
.auth-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow);
  width:100%;max-width:480px;justify-self:end;
}

/* 탭 + 슬라이드 알약 */
.auth-tabs{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  background:var(--lavender);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:5px;margin-bottom:28px;
}
.tab-pill{
  position:absolute;top:5px;left:5px;bottom:5px;width:calc(50% - 5px);
  background:var(--violet);border-radius:9px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t) var(--ease);
  z-index:0;
}
.auth-tabs[data-active="register"] .tab-pill{transform:translateX(100%);}
.tab-btn{
  position:relative;z-index:1;border:0;background:transparent;cursor:pointer;
  padding:12px 0;font-size:15px;font-weight:700;color:var(--text-sub);
  transition:color var(--t) var(--ease);font-family:inherit;
}
.tab-btn.is-active{color:#fff;}

/* 패널 전환 (폼은 즉시 교체) */
.panel{display:none;}
.panel.is-active{display:block;animation:fade .22s var(--ease);}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ===== 필드 공통 ===== */
.field{margin-bottom:16px;}
.field>label{
  display:block;font-size:13.5px;font-weight:600;
  color:var(--text);margin-bottom:8px;
}
.input-box{
  display:flex;align-items:center;gap:10px;
  background:var(--lavender);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:0 14px;height:52px;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);
}
.input-box:focus-within{
  border-color:var(--violet);background:#fff;
  box-shadow:0 0 0 3px rgba(109,91,255,.15);
}
.in-ico{font-size:15px;opacity:.5;flex-shrink:0;}
.input-box input,
.input-box select{
  flex:1;border:0;background:transparent;outline:none;
  font-size:14.5px;color:var(--text);font-family:inherit;height:100%;
}
.input-box input::placeholder{color:#9AA2B5;}
.input-box select{cursor:pointer;}
.input-box input[readonly]{color:var(--text-sub);cursor:default;}
.pw-toggle{
  border:0;background:transparent;cursor:pointer;font-size:15px;
  opacity:.5;flex-shrink:0;
}
.pw-toggle:hover{opacity:.85;}

/* 로그인 메타 */
.login-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin:4px 0 18px;
}
.checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;}
.checkbox input{
  width:17px;height:17px;accent-color:var(--violet);cursor:pointer;
}
.checkbox span{font-size:13.5px;color:var(--text-sub);}

/* JWT 안내 박스 */
.jwt-note{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--lavender);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:22px;
}
.jwt-ico{font-size:15px;line-height:1.4;}
.jwt-note strong{display:block;font-size:13.5px;color:var(--violet);font-weight:700;}
.jwt-note span{font-size:12.5px;color:var(--text-sub);line-height:1.5;}

/* 버튼 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;border-radius:var(--radius-sm);
  cursor:pointer;border:1px solid transparent;font-family:inherit;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);
}
.btn-primary{
  background:var(--grad-cta);
  color:#fff;box-shadow:var(--shadow);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);}
.btn-block{width:100%;height:54px;}

/* 전환 링크 */
.switch-line{
  text-align:center;font-size:13.5px;color:var(--text-sub);margin:22px 0 0;
}
.switch-link{
  border:0;background:transparent;cursor:pointer;
  color:var(--violet);font-weight:700;font-size:13.5px;font-family:inherit;
}
.switch-link:hover{text-decoration:underline;}

/* ===== 회원가입 폼 ===== */
.reg-form .field{margin-bottom:14px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.input-box.has-btn{padding-right:6px;}
.inline-btn{
  flex-shrink:0;border:0;cursor:pointer;font-family:inherit;
  background:var(--violet);color:#fff;
  font-size:12.5px;font-weight:700;
  padding:9px 14px;border-radius:8px;white-space:nowrap;
  transition:filter var(--t) var(--ease),background var(--t) var(--ease);
}
.inline-btn:hover{filter:brightness(1.06);}
.inline-btn.ghost{
  background:var(--lavender);color:var(--violet);
  border:1px solid var(--border);
}

/* 주소 */
.addr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.addr-head label{font-size:13.5px;font-weight:600;color:var(--text);}
.addr-block{
  background:var(--lavender);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px;margin-bottom:10px;
}
.addr-tag{
  display:inline-block;font-size:11.5px;font-weight:700;
  color:var(--violet);background:var(--lavender);
  padding:3px 10px;border-radius:6px;margin-bottom:10px;
}
.addr-block .input-box{background:#fff;margin-bottom:8px;}
.addr-block .input-box:last-child{margin-bottom:0;}
.addr-row{display:flex;gap:8px;}
.addr-row .input-box{margin-bottom:8px;}
.input-box.sm{width:130px;flex-shrink:0;}
.input-box.grow{flex:1;}

/* 스크롤 영역(회원가입이 길어질 때) */
.panel-register{max-height:none;}

/* ===== 필드 힌트 / 필수 태그 ===== */
.field-hint{display:block;font-size:12px;color:var(--text-sub);margin-top:6px;line-height:1.5;}
.req-tag{
  display:inline-block;font-size:11px;font-weight:700;color:#fff;
  background:var(--violet);border-radius:5px;padding:1px 7px;margin-left:6px;vertical-align:middle;
}

/* ===== 신분증 OCR 업로더 ===== */
.idcard-uploader{display:flex;flex-direction:column;gap:8px;}
.idcard-drop{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:100%;cursor:pointer;font-family:inherit;
  background:var(--lavender);border:1.5px dashed rgba(109,91,255,.4);
  border-radius:var(--radius-sm);padding:22px 16px;text-align:center;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.idcard-drop:hover{border-color:var(--violet);background:#fff;}
.idcard-ico{font-size:30px;}
.idcard-text{font-size:13.5px;font-weight:700;color:var(--text);}
.idcard-hint{font-size:11.5px;color:var(--text-sub);}
.idcard-status{
  font-size:12.5px;border-radius:9px;padding:9px 12px;line-height:1.5;
}
.idcard-status.is-loading{background:var(--lavender);color:var(--violet);}
.idcard-status.is-ok{background:#E9F7EF;color:#1E7B45;}
.idcard-status.is-error{background:#FDECEC;color:var(--up);}

/* ===== 개인정보 약관 박스 ===== */
.terms-box{
  background:var(--lavender);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px;height:160px;overflow-y:auto;margin-bottom:10px;
}
.terms-box:focus-within,.terms-box:focus{
  border-color:var(--violet);box-shadow:0 0 0 3px rgba(109,91,255,.15);outline:none;
}
.terms-text{
  margin:0;font-family:inherit;white-space:pre-wrap;word-break:break-word;
  font-size:12.5px;line-height:1.65;color:var(--text-sub);
}
.terms-agree{margin-top:4px;}
.terms-agree span{color:var(--text);font-weight:600;font-size:13px;}

/* 비활성 버튼 */
.btn-primary:disabled{
  background:#C7CCD9;box-shadow:none;cursor:not-allowed;transform:none;
}
.btn-primary:disabled:hover{transform:none;box-shadow:none;}

/* ===== 반응형 ===== */
@media (max-width:920px){
  .auth-wrap{grid-template-columns:1fr;gap:36px;max-width:480px;}
  .auth-intro{padding-right:0;text-align:center;position:static;top:auto;}
  .intro-mark{margin-left:auto;margin-right:auto;}
  .intro-feature li{justify-content:center;text-align:left;}
  .auth-card{justify-self:center;}
}
@media (max-width:520px){
  .auth-main{padding:32px 16px;}
  .auth-card{padding:24px 20px;}
  .grid-2{grid-template-columns:1fr;}
  .intro-title{font-size:30px;}
  .input-box.sm{width:110px;}
}

/* 회원가입 신분증 카메라 모달 */
.auth-camera-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.78);}
.auth-camera-modal[hidden]{display:none;}
.auth-camera-panel{width:min(520px,100%);color:#fff;}
.auth-camera-stage{position:relative;overflow:hidden;border-radius:14px;background:#111;aspect-ratio:3 / 4;}
.auth-camera-video{width:100%;height:100%;object-fit:cover;display:block;}
.auth-id-guide-frame{position:absolute;left:8%;right:8%;top:50%;aspect-ratio:1.586 / 1;transform:translateY(-50%);border:3px solid #fff;border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.38);}
.auth-id-guide-frame::before{content:"";position:absolute;inset:-9px;border:1px solid rgba(255,255,255,.65);border-radius:18px;}
.auth-camera-help{margin:12px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.88);text-align:center;}
.auth-camera-actions{display:flex;gap:8px;margin-top:14px;}
.auth-camera-actions .btn{flex:1;}
/* auth-overflow-fix: 회원가입/로그인 폼이 모바일에서 카드 밖으로 삐져나오지 않도록 보정 */
.auth-card,
.panel,
.reg-form,
.field,
.input-box,
.addr-row,
.addr-block { min-width: 0; }
.auth-card { overflow: hidden; }
.input-box input,
.input-box select { min-width: 0; width: 100%; }
@media (max-width:520px){
  .auth-main{padding:24px 12px;}
  .auth-card{padding:22px 16px;border-radius:18px;}
  .input-box.has-btn{height:auto;min-height:52px;align-items:stretch;flex-wrap:wrap;padding:8px;}
  .input-box.has-btn input{height:36px;}
  .input-box.has-btn .inline-btn{width:100%;}
  .addr-row{flex-direction:column;gap:8px;}
  .input-box.sm{width:100%;}
}