/* ==========================================================================
   TTBOX — 로그인 화면(login.php 전용)
   좌: 브랜드 패널(창고라이브 흐름) / 우: 로그인 폼.
   아이디·비밀번호 찾기(memberfind/memberpsfind)는 ttbox_auth.css 를 그대로 쓴다.
   ========================================================================== */

:root{
  --lg-g:#0d4a3a;
  --lg-g2:#07382c;
  --lg-lime:#c8f24a;
  --lg-ink:#13201c;
  --lg-muted:#68746f;
  --lg-line:#dfe7e3;
  --lg-bg:#f5f8f6;
}

html,body{ height:auto; }
.lg-page, .lg-page *, .lg-page *::before, .lg-page *::after{ box-sizing:border-box; }
body{
  margin:0;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Noto Sans KR',Arial,sans-serif;
  color:var(--lg-ink);
  background:var(--lg-bg);
  -webkit-font-smoothing:antialiased;
}
#header{ display:none; }
a{ text-decoration:none; color:inherit; }

.lg-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr);
}

/* ── 좌: 브랜드 패널 ─────────────────────────────────────────── */
.lg-brand{
  position:relative; overflow:hidden;
  background:linear-gradient(145deg,var(--lg-g2),var(--lg-g));
  color:#fff;
  padding:46px clamp(38px,6vw,92px);
  display:flex; flex-direction:column;
}
.lg-brand::after{
  content:''; position:absolute;
  width:520px; height:520px; right:-220px; bottom:-210px;
  border:1px solid rgba(255,255,255,.09); border-radius:50%;
  box-shadow:0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.02);
}
.lg-logo{
  position:relative; z-index:1;
  font-weight:950; font-size:26px; letter-spacing:-1px;
}
.lg-logo span{ color:var(--lg-lime); }
.lg-hero{ position:relative; z-index:1; margin:auto 0; max-width:720px; }
.lg-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:900; letter-spacing:1.5px;
  color:var(--lg-lime); margin-bottom:22px;
}
.lg-eyebrow::before{ content:''; width:30px; height:2px; background:var(--lg-lime); }
.lg-hero h1{
  font-size:clamp(40px,4.5vw,68px); line-height:1.12; letter-spacing:-3.4px;
  margin:0 0 22px; font-weight:950; word-break:keep-all;
}
.lg-hero > p{
  font-size:18px; line-height:1.75; color:rgba(255,255,255,.78);
  margin:0; max-width:650px; word-break:keep-all;
}
.lg-benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:38px; }
.lg-benefit{
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06);
  border-radius:16px; padding:18px 16px; backdrop-filter:blur(5px);
}
.lg-benefit b{ display:block; font-size:14px; margin-bottom:7px; }
.lg-benefit span{ font-size:12px; line-height:1.55; color:rgba(255,255,255,.64); }
.lg-flow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:30px; }
.lg-flow span{
  font-size:11px; font-weight:850; padding:8px 10px; border-radius:9px;
  background:#fff; color:var(--lg-g);
}
.lg-flow i{ font-style:normal; color:var(--lg-lime); font-weight:900; }
.lg-subnote{ margin-top:22px; font-size:12px; color:rgba(255,255,255,.56); }

/* ── 우: 로그인 폼 ───────────────────────────────────────────── */
.lg-side{
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:44px;
}
.lg-box{ width:min(100%,470px); }

/* 로그인 후 돌아갈 페이지가 있을 때만 노출 */
.lg-return{
  display:flex; gap:12px; align-items:center;
  border:1px solid #dce9e3; background:#f5faf7;
  border-radius:16px; padding:15px 17px; margin-bottom:26px;
}
.lg-return__icon{
  width:42px; height:42px; flex:0 0 auto; border-radius:12px;
  background:var(--lg-g); color:#fff;
  display:grid; place-items:center; font-size:18px;
}
.lg-return b{ display:block; font-size:13px; margin-bottom:4px; }
.lg-return span{ font-size:12px; color:var(--lg-muted); line-height:1.5; }

.lg-box h2{ font-size:34px; letter-spacing:-1.7px; margin:0 0 9px; font-weight:900; }
.lg-lead{ color:var(--lg-muted); font-size:14px; margin:0 0 27px; }

.lg-field{ margin-bottom:15px; }
.lg-field label{ display:block; font-size:12px; font-weight:850; margin-bottom:8px; }
.lg-field input{
  width:100%; height:54px;
  border:1px solid var(--lg-line); border-radius:12px;
  padding:0 15px; font-size:14px; font-family:inherit; color:var(--lg-ink);
  background:#fff; outline:none; transition:.2s;
}
.lg-field input::placeholder{ color:#a3aca7; }
.lg-field input:focus{ border-color:var(--lg-g); box-shadow:0 0 0 3px rgba(13,74,58,.08); }

.lg-utility{
  display:flex; justify-content:flex-end; gap:12px;
  font-size:12px; color:var(--lg-muted); margin:-2px 0 20px;
}
.lg-utility a:hover{ color:var(--lg-g); }

.lg-btn{
  display:flex; align-items:center; justify-content:center;
  height:56px; width:100%;
  border:0; border-radius:12px;
  font-size:15px; font-weight:900; font-family:inherit; cursor:pointer;
  transition:transform .18s, box-shadow .18s, background .18s;
}
.lg-btn:hover{ transform:translateY(-1px); }
.lg-btn--primary{ background:var(--lg-g); color:#fff; box-shadow:0 10px 22px rgba(13,74,58,.16); }
.lg-btn--primary:hover{ background:var(--lg-g2); }
.lg-btn--outline{ background:#fff; border:1px solid #cfd9d4; color:var(--lg-g); }
.lg-btn--outline:hover{ background:#f5faf7; }
.lg-btn--supplier{ margin-top:10px; background:#eef5f1; color:var(--lg-g); font-size:14px; }
.lg-btn--supplier:hover{ background:#e3efe8; }

.lg-divider{
  display:flex; align-items:center; gap:12px;
  color:#9aa39f; font-size:11px; margin:25px 0;
}
.lg-divider::before, .lg-divider::after{ content:''; height:1px; background:var(--lg-line); flex:1; }
.lg-signup-title{ text-align:center; font-size:13px; font-weight:850; margin-bottom:12px; }
.lg-signup{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.lg-plus{ margin-top:24px; border-top:1px solid var(--lg-line); padding-top:20px; }
.lg-plus b{ font-size:11px; color:var(--lg-g); letter-spacing:.8px; }
.lg-plus p{ font-size:12px; line-height:1.6; color:var(--lg-muted); margin:7px 0 0; }

.lg-intro{
  display:block; width:100%; text-align:center; margin-top:20px;
  background:none; border:0; padding:0; cursor:pointer;
  font-size:12px; color:var(--lg-g); font-weight:800; font-family:inherit;
}
.lg-intro:hover{ text-decoration:underline; }
.lg-legal{ text-align:center; font-size:10px; color:#a0aaa5; margin-top:28px; }

/* ── 반응형 ──────────────────────────────────────────────────── */
@media (max-width:900px){
  .lg-page{ display:block; }
  .lg-brand{ min-height:auto; padding:30px 24px 34px; }
  .lg-hero{ margin:48px 0 0; }
  .lg-hero h1{ font-size:42px; }
  .lg-benefits{ grid-template-columns:1fr; }
  .lg-side{ padding:38px 22px; }
}
@media (max-width:520px){
  .lg-brand{ padding:24px 20px 30px; }
  .lg-hero{ margin-top:36px; }
  .lg-eyebrow{ margin-bottom:16px; }
  .lg-hero h1{ font-size:36px; letter-spacing:-2px; }
  .lg-hero > p{ font-size:15px; }
  .lg-benefits{ display:none; }
  .lg-flow{ margin-top:24px; }
  .lg-flow span{ font-size:10px; padding:7px 8px; }
  .lg-subnote{ display:none; }
  .lg-side{ padding:32px 20px 40px; }
  .lg-box h2{ font-size:29px; }
  .lg-signup{ grid-template-columns:1fr; }
  .lg-return{ padding:13px; }
}