/* Chewstep 공용 — 로그인 UI + 모달 (홈/데모 공통) */
:root{ --cs-brand:#0e9f6e; --cs-brand-deep:#0a7d57; --cs-brand-tint:#e9f7f1;
  --cs-ink:#0b0d10; --cs-soft:#6b7280; --cs-line:#e7e9ee;
  --cs-font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Segoe UI","Malgun Gothic","Noto Sans KR",sans-serif; }

.cs-login-btn{ font:700 14px/1 var(--cs-font); color:#fff; background:linear-gradient(145deg,var(--cs-brand),var(--cs-brand-deep));
  border:none; border-radius:12px; padding:10px 18px; cursor:pointer; }
.cs-login-btn:hover{ filter:brightness(1.03); }
.cs-user{ display:flex; align-items:center; gap:9px; font-family:var(--cs-font); }
.cs-ava{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
.cs-ava-ph{ display:grid; place-items:center; background:var(--cs-brand-tint); color:var(--cs-brand-deep); font-weight:800; font-size:14px; }
.cs-uname{ font-size:14px; font-weight:700; color:var(--cs-ink); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-logout{ font-size:12.5px; font-weight:600; color:var(--cs-soft); background:#fff; border:1px solid var(--cs-line); border-radius:10px; padding:7px 12px; cursor:pointer; }
.cs-logout:hover{ color:var(--cs-ink); }

.cs-modal{ position:fixed; inset:0; z-index:1000; background:rgba(11,13,16,.45); display:none; align-items:center; justify-content:center; padding:20px; }
.cs-modal.open{ display:flex; }
.cs-modal-card{ position:relative; width:100%; max-width:360px; background:#fff; border-radius:20px; padding:30px 24px 20px;
  box-shadow:0 30px 60px -12px rgba(16,24,40,.3); font-family:var(--cs-font); word-break:keep-all; }
.cs-modal-x{ position:absolute; top:12px; right:14px; border:none; background:none; font-size:26px; color:#9aa2ad; cursor:pointer; line-height:1; }
.cs-modal-title{ font-size:19px; font-weight:800; color:var(--cs-ink); letter-spacing:-.02em; }
.cs-modal-sub{ font-size:13px; color:var(--cs-soft); margin:9px 0 20px; line-height:1.6; }
.cs-modal-sub b{ color:var(--cs-brand-deep); }
.cs-oauth{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; font:700 15px/1 var(--cs-font);
  border-radius:12px; padding:14px; cursor:pointer; margin-bottom:10px; border:1px solid transparent; transition:transform .15s; }
.cs-oauth:hover{ transform:translateY(-1px); }
.cs-oauth span{ font-weight:900; font-size:16px; }
.cs-kakao{ background:#FEE500; color:#3a1d1d; }
.cs-google{ background:#fff; color:#1f2937; border:1px solid var(--cs-line); }
.cs-modal-note{ font-size:11px; color:#9aa2ad; text-align:center; margin-top:8px; line-height:1.5; }

/* 이메일 로그인 폼 */
.cs-eform{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.cs-inp{ width:100%; font:500 15px/1.2 var(--cs-font); color:var(--cs-ink); background:#fff;
  border:1px solid var(--cs-line); border-radius:12px; padding:13px 14px; outline:none; transition:border-color .15s, box-shadow .15s; }
.cs-inp::placeholder{ color:#aab1bb; }
.cs-inp:focus{ border-color:var(--cs-brand); box-shadow:0 0 0 3px rgba(14,159,110,.12); }
.cs-email{ background:linear-gradient(145deg,var(--cs-brand),var(--cs-brand-deep)); color:#fff; margin-bottom:0; }
.cs-oauth:disabled{ opacity:.6; cursor:default; transform:none; }
.cs-emsg{ font-size:12.5px; line-height:1.5; min-height:1px; text-align:center; }
.cs-emsg.err{ color:#d9534f; }
.cs-emsg.ok{ color:var(--cs-brand-deep); }
.cs-divider{ display:flex; align-items:center; gap:10px; margin:14px 0; color:#aab1bb; font-size:12px; }
.cs-divider::before,.cs-divider::after{ content:""; flex:1; height:1px; background:var(--cs-line); }