/* =====================================================================
   토리샵 ERP 인증 화면 (로그인 / 회원가입)

   이 두 화면은 base.html 을 상속하지 않는다. 셸(사이드바/헤더)이 없고,
   erp.theme.css 의 로그인 블록(.login-container/.login-card/.form-input …)과
   이름이 충돌하기 때문이다. 테마를 아예 로드하지 않으므로 여기 값이 최종값이다.
   (auth/invite.html 은 아직 상속 구조 + login.css 를 쓴다 — 그쪽은 건드리지 않았다)

   ⚠ prefers-reduced-motion 가드를 두지 않는다. 레퍼런스가 접근성을 고려해
   넣었다가 도로 뺀 결정이다 — Windows 접근성에서 "애니메이션 효과"를 꺼 둔
   환경이 흔한데, 가드가 있으면 이 화면의 정체성인 배경 모션이 통째로 사라진다.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    /* 라틴·숫자는 Inter, 한글은 맑은 고딕. ERP 본문 방침과 같다.
       -webkit-font-smoothing 은 건드리지 않는다(한글이 번진다). */
    font-family: 'Inter', 'Malgun Gothic', '맑은 고딕', -apple-system,
                 'Segoe UI', system-ui, sans-serif;
    background: #050f1e;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    /* 레퍼런스는 overflow:hidden 이지만 회원가입 카드는 입력이 6개라 노트북에서
       잘린다. 가로만 막고 세로는 연다. */
    overflow-x: hidden;
    overflow-y: auto;
}

/* ── 배경 1: 3겹 radial (brand 210° 계열로 옮겼다. 참고의 Ant 팔레트 아님) ── */
.bg-canvas {
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 70% 60% at 15% 50%, rgba(59,155,241,0.22) 0%, transparent 70%),
        radial-gradient(ellipse 60% 55% at 85% 15%, rgba(124,92,214,0.20) 0%, transparent 65%),
        radial-gradient(ellipse 50% 45% at 55% 85%, rgba(45,190,160,0.12) 0%, transparent 60%),
        #050f1e;
}

/* ── 배경 2: 48px 격자 (정지) ── */
.bg-grid {
    position: fixed; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(59,155,241,0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,155,241,0.09) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* ── 배경 3: orb 3개 ── */
.orb {
    position: fixed; border-radius: 50%; filter: blur(60px);
    z-index: 0; pointer-events: none;
    animation: orbFloat linear infinite;
}
.orb-1 { width:600px; height:600px; background:rgba(29,127,224,0.28); top:-180px; left:-200px; animation-duration:22s; }
.orb-2 { width:500px; height:500px; background:rgba(124,92,214,0.24); bottom:-100px; right:-150px; animation-duration:28s; animation-delay:-10s; }
.orb-3 { width:380px; height:380px; background:rgba(45,190,160,0.16); top:35%; left:50%; animation-duration:18s; animation-delay:-5s; }
@keyframes orbFloat {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(30px,-40px) scale(1.05); }
    66%  { transform: translate(-20px,20px) scale(0.97); }
    100% { transform: translate(0,0) scale(1); }
}

/* ── 배경 4: 파티클 (크기·색·좌표는 auth-aurora.js 가 인라인으로 준다) ── */
.particles { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.particle  { position: absolute; border-radius: 50%; animation: particleDrift linear infinite; }
@keyframes particleDrift {
    0%   { transform: translateY(110vh) scale(0.3); opacity: 0; }
    8%   { opacity: 1; }
    85%  { opacity: 0.85; }
    100% { transform: translateY(-60px) scale(1); opacity: 0; }
}

/* ── 카드 ── */
.auth-wrap {
    position: relative; z-index: 1;
    width: 420px; max-width: calc(100vw - 32px);
    margin: auto;
    animation: fadeUp 0.6s ease both;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 카드만 흰색(지시, 2026-08-27) — 어두운 배경에 로고를 흰 칩으로 얹으니
   칩이 따로 놀아 어색했다. 배경(오로라)은 그대로 두고 카드 속만 라이트로 뒤집는다.
   아래 폼·메시지·자동완성 색이 전부 이 결정에 묶여 있다 — 카드 색을 되돌리면
   같이 되돌려야 한다. */
.auth-card {
    background: #fff;
    border: 1px solid rgba(255,255,255,0.6);
    /* 처음엔 ERP 전체 방침대로 각지게(0) 뒀는데, 흰 카드로 바꾼 뒤 라운드를
       달라고 해서(지시, 2026-08-27) 이 화면만 둥글린다. 입력칸·버튼·메시지도
       같이 둥글려야 결이 맞는다 — 카드만 둥글면 속이 따로 논다. */
    border-radius: 16px;
    padding: 40px 36px 36px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

/* ── 로고 ── */
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; }
/* 카드가 흰색이라 남색 워드마크가 그대로 읽힌다 — 흰 칩이 필요 없어졌다.
   크기도 40px 가 작다고 해서 64px 로 키웠다(지시). */
.auth-logo img   { height: 64px; width: auto; object-fit: contain; }
.auth-logo-sub   { font-size: 11px; font-weight: 600; color: #7c8aa0; letter-spacing: 1.6px; text-transform: uppercase; }
.auth-divider    { width: 40px; height: 2px; background: linear-gradient(90deg, transparent, #3b9bf1, transparent); }

/* ── 폼 ── */
.form-item { margin-bottom: 16px; }
.form-item-label {
    display: block; margin-bottom: 7px;
    font-size: 11px; font-weight: 600; color: #5b6b82;
    /* 한글 라벨이라 uppercase·넓은 letter-spacing 을 쓰지 않는다.
       레퍼런스의 그 처리는 영문 전용(User ID / Password)이었다. */
    letter-spacing: 0;
}
.input-affix-wrapper {
    display: flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 12px;
    background: #f8fafc;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.input-affix-wrapper.focused,
.input-affix-wrapper:focus-within {
    border-color: #1d7fe0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(29,127,224,0.12);
}
.input-prefix { color: #9aa8bd; font-size: 13px; }
.form-input {
    flex: 1; min-width: 0; height: 100%;
    background: transparent; border: 0; outline: none;
    color: #1e293b; font-size: 13px; font-family: inherit;
}
.form-input::placeholder { color: #a3b0c2; }
.form-input:disabled { opacity: .6; }

/* 사업자등록증 파일 input — 브라우저 기본 버튼은 색을 못 먹인다(셰도우 DOM).
   ::file-selector-button 만 테마에 맞춰 다시 그린다. */
.input-affix-wrapper-file { height: auto; padding: 8px 12px; }
.form-input-file { color: #5b6b82; font-size: 12px; }
.form-input-file::file-selector-button {
    margin-right: 10px; padding: 6px 12px; border: 1px solid rgba(29,127,224,0.35);
    border-radius: 4px; background: rgba(29,127,224,0.08); color: #1a67c0;
    font-size: 12px; cursor: pointer; transition: background .2s;
}
.form-input-file::file-selector-button:hover { background: rgba(29,127,224,0.16); }

/* 브라우저 자동완성 — 저장된 비밀번호가 있는 브라우저에서만 나서 **운영에서만**
 * 보였던 문제. 로컬은 저장된 것이 없어 멀쩡했다 — 그래서 늦게 발견됐다.
 *
 * Chrome 은 자동완성 칸을 `background-color` 가 아니라 **inset box-shadow** 로
 * 칠한다. 그래서 `background: transparent` 로는 절대 못 덮는다. 같은 방식으로
 * 덮어써야 한다. 색은 래퍼 배경과 똑같이 맞춘다 —
 *   쉴 때   #f8fafc  (.input-affix-wrapper)
 *   포커스  #fff     (:focus-within 규칙)
 * ⚠ 페이지가 열리면 아이디 칸에 포커스가 가 있다. 화면에서 색을 뽑아 검증할 때
 *   포커스 색을 '기본값'으로 잘못 잡기 쉽다.
 *
 * 글자색은 `color` 가 아니라 `-webkit-text-fill-color` 로 잡는다.
 * 자동완성 상태에서는 color 가 무시된다.
 *
 * transition 을 길게 두는 것은 오래 쓰는 우회책이다. Chrome 이 첫 페인트에
 * 자기 색(연노랑)을 한 번 칠하는데, 그 전환을 늦춰 눈에 안 띄게 한다. */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgb(248, 250, 252) inset !important;
    box-shadow: 0 0 0 1000px rgb(248, 250, 252) inset !important;
    -webkit-text-fill-color: #1e293b !important;
    caret-color: #1e293b;
    transition: background-color 100000s ease-in-out 0s;
}
/* 포커스가 가면 래퍼가 흰색이 된다. 그때는 덮는 색도 같이 맞춘다 —
   안 맞추면 포커스한 칸만 회색으로 남아 더 도드라진다. */
.input-affix-wrapper:focus-within .form-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset !important;
    box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset !important;
}

/* ── 메시지 (jQuery slideDown 이 display:block 으로 연다 → flex 금지) ── */
.error-message, .success-message {
    display: none;
    margin-bottom: 14px; padding: 9px 12px;
    font-size: 12px; border-radius: 8px;
}
.error-message   { color: #c0393b; background: rgba(255,77,79,0.07);  border: 1px solid rgba(255,77,79,0.28); }
.success-message { color: #157a57; background: rgba(45,190,160,0.09); border: 1px solid rgba(45,190,160,0.32); }
.error-message i, .success-message i { margin-right: 6px; }

/* ── 버튼 ── */
.btn-login {
    position: relative; overflow: hidden;
    display: block; width: 100%; height: 44px; margin-top: 8px;
    background: linear-gradient(135deg, #1d7fe0, #1a67c0);
    border: 0; border-radius: 8px;
    color: #fff; font-size: 14px; font-weight: 600; font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(29,127,224,0.35);
    transition: opacity .2s, transform .1s, box-shadow .2s;
}
.btn-login:hover   { opacity: .92; box-shadow: 0 6px 28px rgba(29,127,224,0.5); }
.btn-login:active  { transform: scale(0.985); }
.btn-login:disabled{ opacity: .6; cursor: default; }
/* shimmer — keyframes 가 아니라 transition + :hover 라 호버당 한 번 지나간다 */
.btn-login::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left .4s;
}
.btn-login:not(:disabled):hover::after { left: 150%; }

/* 스피너 — login.js/signup.js 가 버튼에 .loading 을 붙였다 뗀다 */
.loading-spinner { display: none; }
.btn-login.loading .loading-spinner { display: inline-block; animation: spin .7s linear infinite; }
.btn-login.loading > i:not(.loading-spinner) { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 회원가입 전용 ── */
.signup-toggle-row { margin-bottom: 16px; }
.signup-toggle-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #33415e; cursor: pointer; }
.signup-toggle-label input { accent-color: #1d7fe0; }
.signup-toggle-hint  { margin-top: 5px; font-size: 11px; line-height: 1.6; color: #7c8aa0; }
.signup-company-fields { padding-top: 4px; }

/* ── 하단 링크 ── */
/* ── 체험 계정 안내 ──
   로그인 버튼과 경쟁하지 않도록 채운 파랑 대신 옅은 배경 + 테두리 버튼을 쓴다.
   진짜 계정이 있는 사람의 눈을 뺏으면 안 된다. */
.demo-box {
    margin-top: 20px; padding: 14px 16px;
    background: #f5f9ff; border: 1px solid #d6e6fb; border-radius: 10px;
}
.demo-title { font-size: 13px; font-weight: 700; color: #14509b; }
.demo-title i { margin-right: 6px; }
.demo-desc  { margin: 6px 0 10px; font-size: 12px; line-height: 1.55; color: #5a6b81; }
.demo-cred  {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    padding: 8px 10px; margin-bottom: 10px;
    background: #fff; border: 1px dashed #c3dbf7; border-radius: 6px;
    font-size: 12px; color: #5a6b81;
}
/* 아이디/비번은 보고 따라 칠 수 있어야 하니 고정폭으로 */
.demo-cred b { color: #14509b; font-family: 'Consolas', 'Menlo', monospace; letter-spacing: .2px; }
.btn-demo {
    display: block; width: 100%; height: 38px;
    background: #fff; border: 1px solid #1d7fe0; border-radius: 8px;
    color: #1a67c0; font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background .15s, box-shadow .15s;
}
.btn-demo:hover { background: #eef5ff; box-shadow: 0 2px 10px rgba(29,127,224,.18); }
.btn-demo i     { margin-right: 6px; }
.demo-note   { margin: 9px 0 0; font-size: 11px; line-height: 1.5; color: #8496ab; }
.demo-note a { color: #1a67c0; text-decoration: none; }
.demo-note a:hover { text-decoration: underline; }

.auth-footer { margin-top: 22px; text-align: center; }
.auth-footer a { font-size: 12px; color: #1a67c0; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.auth-copy { margin-top: 10px; font-size: 11px; color: #93a1b5; }