@charset "utf-8";
/* ============================================================
   WORKNEST — 로그인 · 회원가입 · 승인 대기 · 내 정보
   ============================================================ */

.auth-page {
  min-height: calc(100svh - var(--header-h));
  display: grid; place-items: center;
  padding: 50px 20px 70px;
  background:
    radial-gradient(70% 60% at 50% 0%, #F2F6FF 0%, transparent 70%),
    var(--bg);
}

.auth-card {
  width: 100%; max-width: 440px;
  padding: 40px 36px 34px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  text-align: center;
}
.auth-card .symbol { width: 78px; height: auto; margin: 0 auto 18px; }
.auth-card h1 { font-size: 1.55rem; margin-bottom: 9px; }
.auth-card .sub { font-size: .93rem; color: var(--gray); line-height: 1.65; }

.auth-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0 22px; font-size: .78rem; color: var(--gray-3);
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ── 소셜 로그인 버튼 ─────────────────────────────────────── */
.social-list { display: grid; gap: 11px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; padding: 15px 20px; border-radius: 14px;
  font-size: .97rem; font-weight: 700; line-height: 1;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.social-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.social-btn:active { transform: translateY(0); }
.social-btn svg, .social-btn img { width: 19px; height: 19px; flex-shrink: 0; }

.social-google { background: #fff; color: #3C4043; border-color: #DADCE0; }
.social-google:hover { background: #F8F9FA; }

.social-kakao { background: #FEE500; color: rgba(0,0,0,.85); }
.social-kakao:hover { filter: brightness(.97); }

.auth-note {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  font-size: .81rem; color: var(--gray-2); line-height: 1.65;
}
.auth-note a { color: var(--blue); text-decoration: underline; }

.auth-back { display: inline-block; margin-top: 24px; font-size: .87rem; color: var(--gray-2); }
.auth-back:hover { color: var(--blue); }

/* ── 승인 대기 화면 ───────────────────────────────────────── */
.pending-card { max-width: 560px; text-align: left; }
.pending-card .lp-ico {
  width: 58px; height: 58px; margin-bottom: 20px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--amber-soft); color: var(--amber);
}
.pending-card h1 { font-size: 1.42rem; }

.pending-steps { display: grid; gap: 0; margin: 26px 0 6px; }
.pending-step {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.pending-step:last-child { border-bottom: 0; }
.pending-step .ps-n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: .76rem; font-weight: 800;
  background: var(--bg-mute); color: var(--gray-2);
}
.pending-step.is-done .ps-n { background: var(--green); color: #fff; }
.pending-step.is-now  .ps-n { background: var(--blue); color: #fff; }
.pending-step b { display: block; font-size: .95rem; margin-bottom: 2px; }
.pending-step.is-todo b { color: var(--gray-2); }
.pending-step p { font-size: .86rem; color: var(--gray); }

/* ── 내 정보 ──────────────────────────────────────────────── */
.me-grid { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: start; }

.me-card {
  padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; text-align: center;
}
.me-card .avatar {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 15px;
  object-fit: cover; background: var(--brand-gradient);
  display: grid; place-items: center; color: #fff; font-size: 1.5rem; font-weight: 800;
}
.me-card h2 { font-size: 1.15rem; margin-bottom: 4px; }
.me-card .email { font-size: .85rem; color: var(--gray-2); word-break: break-all; }
.me-card .chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.me-meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: .82rem; color: var(--gray-2); display: grid; gap: 6px; }
.me-meta div { display: flex; justify-content: space-between; gap: 10px; }

.me-books { display: grid; gap: 12px; }
.me-book {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
.me-book img { width: 42px; height: 56px; object-fit: cover; border-radius: 4px; box-shadow: var(--shadow-1); }
.me-book .mb-body { flex: 1; min-width: 0; }
.me-book b { display: block; font-size: .96rem; }
.me-book span { font-size: .83rem; color: var(--gray-2); }

@media (max-width: 760px) {
  .me-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 32px 22px 26px; border-radius: var(--r-lg); }
}