/* ============================================================
   AVANCÉ 공통 스타일
   - 디자인 토큰(색상/폰트)과 로그인 화면 계열에서 함께 쓰는
     버튼/입력창 등 컴포넌트 스타일을 모아둔 파일입니다.
   - 페이지별 고유 레이아웃은 각 html의 <style> 안에 둡니다.
   ============================================================ */

:root{
  --ink:#211F1C;
  --sidebar:#1B1917;
  --stone:#E4DFD3;
  --stone-line: rgba(33,31,28,0.12);
  --stone-line-dark: rgba(251,250,247,0.12);
  --paper:#FBFAF7;
  --umber:#6E4B34;
  --umber-dark:#553A28;
  --brass:#A88B5E;
  --brass-light:#C8AD7F;
  --signal:#B8433A;
  --ok:#4A7A5E;

  --font-mark:'Josefin Sans', sans-serif;
  --font-display:'Noto Serif KR', serif;
  --font-body:'Pretendard', -apple-system, sans-serif;
}

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

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

body{
  font-family:var(--font-body);
  color:var(--ink);
}

/* ---------- 공통: 카카오 로그인 버튼 ---------- */
.kakao-btn{
  border:none;
  border-radius:2px;
  background:#FEE500;
  color:#211F1C;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  transition:filter 0.15s ease, transform 0.15s ease;
}
.kakao-btn:hover{ filter:brightness(0.96); }
.kakao-btn:disabled{ opacity:0.6; cursor:progress; }
.kakao-btn svg{ width:18px; height:18px; }

/* ---------- 공통: 기본 버튼 ---------- */
.btn{
  border:none; border-radius:2px;
  font-family:var(--font-body); font-weight:600; font-size:13.5px;
  padding:11px 20px; cursor:pointer;
  transition:background 0.15s ease, filter 0.15s ease;
}
.btn-primary{ background:var(--umber); color:var(--paper); }
.btn-primary:hover{ background:var(--umber-dark); }
.btn-primary:disabled{ background:rgba(33,31,28,0.15); cursor:not-allowed; }

/* ---------- 공통: 입력 필드 ---------- */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:12px; letter-spacing:0.02em; }
.field input{
  border:1px solid var(--stone-line);
  border-radius:2px;
  padding:13px 14px;
  font-size:14px;
  font-family:var(--font-body);
  background:transparent;
  color:inherit;
  transition:border-color 0.15s ease;
}
.field input:focus-visible{ outline:none; border-color:var(--umber); }

/* ---------- 공통: 라이브 뱃지 ---------- */
.live-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border:1px solid rgba(251,250,247,0.3);
  border-radius:999px; font-size:12.5px; color:rgba(251,250,247,0.9);
}
.live-pill .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--signal);
  animation: dot-breathe 1.8s ease-in-out infinite;
}
@keyframes dot-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

/* ---------- 공통: 토글 스위치 ---------- */
.switch{ position:relative; width:38px; height:22px; flex-shrink:0; display:inline-block; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background:rgba(33,31,28,0.18); border-radius:999px;
  transition:background 0.15s ease;
}
.slider::before{
  content:""; position:absolute; width:16px; height:16px;
  left:3px; top:3px; background:var(--paper); border-radius:50%;
  transition:transform 0.15s ease;
}
.switch input:checked + .slider{ background:var(--umber); }
.switch input:checked + .slider::before{ transform:translateX(16px); }