/* ============================================================
   지기 AI — 콘솔·가입 플로우 공용 스타일
   landing.html / chat.html(도단집 챗봇)과 같은 디자인 계열:
   네이비(--night) + 인디고→바이올렛 그라데이션 + 문 옐로 포인트.
   토큰과 공통 컴포넌트만 담고, 페이지 고유 스타일은 각 페이지 <style>에 둔다.
   ============================================================ */

:root{
  --night:#14142B; --night-soft:#1E1E3E;
  --brand:#4f46e5; --brand-deep:#4338CA; --violet:#7c3aed;
  --moon:#FFD66B;
  --paper:#FAFAF7; --ink:#23233A; --ink-soft:#5B5B74;
  --line:#E7E7EF; --tint:#EEEDFC; --tint-strong:#E2E0FA;
  --grad:linear-gradient(135deg,var(--brand),var(--violet));
}

body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Noto Sans KR','Malgun Gothic',sans-serif;
  color:var(--ink);
  background:var(--paper);
  word-break:keep-all;
}

/* ── 브랜드 마크 (그라데이션 사각 + 상점 아이콘) ── */
.brand-mark{
  width:34px;height:34px;border-radius:10px;background:var(--grad);
  display:inline-grid;place-items:center;color:#fff;flex-shrink:0;font-size:1rem;
}
.brand-mark.lg{width:56px;height:56px;border-radius:16px;font-size:1.5rem}

/* ── 버튼 ── */
.btn-grad{
  background:var(--grad);border:none;color:#fff;font-weight:700;
  box-shadow:0 4px 16px rgba(79,70,229,.35);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn-grad:hover,.btn-grad:focus{color:#fff;transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 6px 20px rgba(79,70,229,.45)}
.btn-grad:disabled{color:#fff;background:var(--grad);opacity:.65;transform:none}
.btn-moon{
  background:var(--moon);border:none;color:var(--night);font-weight:700;
  transition:transform .15s,filter .15s;
}
.btn-moon:hover{color:var(--night);filter:brightness(1.04);transform:translateY(-1px)}

/* ── Bootstrap 브랜드 컬러 재정의 (JS가 생성하는 마크업 포함 전역 적용) ── */
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-deep);--bs-btn-hover-border-color:var(--brand-deep);
  --bs-btn-active-bg:var(--brand-deep);--bs-btn-active-border-color:var(--brand-deep);
  --bs-btn-disabled-bg:var(--brand);--bs-btn-disabled-border-color:var(--brand)}
.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:#C9C7F1;
  --bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);
  --bs-btn-active-bg:var(--brand-deep);--bs-btn-active-border-color:var(--brand-deep)}
.text-primary{color:var(--brand)!important}
.badge.text-bg-primary{background-color:var(--brand)!important}
a{color:var(--brand)}
a:hover{color:var(--brand-deep)}

.form-control,.form-select{border-color:var(--line);border-radius:10px}
.form-control:focus,.form-select:focus{border-color:#B7B3F2;box-shadow:0 0 0 .25rem rgba(79,70,229,.12)}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.form-check-input:focus{border-color:#B7B3F2;box-shadow:0 0 0 .25rem rgba(79,70,229,.12)}

.card{border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 12px rgba(30,30,80,.05)}

/* ── 진행 점 (가입 → 온보딩 공용) ── */
.step-dots{display:flex;gap:8px;justify-content:center}
.step-dots span{width:8px;height:8px;border-radius:50%;background:#DDDCE8;transition:all .25s}
.step-dots span.on{background:var(--grad);width:22px;border-radius:99px}

/* ── 인증 화면 셸 (로그인·가입: 랜딩 히어로와 같은 밤하늘) ── */
.auth-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:2.5rem 1rem;
  background:radial-gradient(900px 520px at 75% -12%, #2B2B5E 0%, var(--night) 58%);
}
.auth-shell{width:100%;max-width:440px}
.auth-brand{
  display:flex;align-items:center;justify-content:center;gap:10px;
  color:#fff;font-weight:900;font-size:1.15rem;margin-bottom:20px;text-decoration:none;
}
.auth-brand:hover{color:#fff}
.auth-card{
  background:#FDFDFE;border:none;border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1);
}
.auth-foot{text-align:center;color:#8A8AB0;font-size:.84rem;margin-top:18px}
.auth-foot a{color:#D8D8EC;font-weight:700}
.auth-foot a:hover{color:#fff}

/* ── 상태 칩 (예약 상태 등 — dashboard.js가 생성) ── */
.status-chip{font-size:.75rem;padding:.2rem .55rem;border-radius:99px;font-weight:600}
.status-confirmed{background:#d1fae5;color:#065f46}
.status-pending{background:#fef3c7;color:#92400e}
.status-cancelled{background:#fee2e2;color:#991b1b}

/* ── 스크롤바 ── */
.soft-scroll::-webkit-scrollbar{width:8px}
.soft-scroll::-webkit-scrollbar-thumb{background:#E2E1F2;border-radius:99px}
.soft-scroll::-webkit-scrollbar-thumb:hover{background:#CFCDEA}

@media (prefers-reduced-motion:reduce){
  .btn-grad:hover,.btn-moon:hover{transform:none}
}