/* ===== 프로젝트 톤(그린/화이트) 일치 ===== */
:root{
  --page-bg:#f8f8f8;         /* 앱 기본 배경 */
  --panel-bg:#ffffff;        /* 카드 배경 */
  --panel-border:#dbdbdb;    /* 카드/인풋 보더 */
  --text:#222222;            /* 본문 텍스트 */
  --muted:#666666;           /* 서브 텍스트 */
  --accent:#69732c;          /* 포커스 녹색 */
  --accent-strong:#7d9200;   /* 버튼/강조 녹색 (요청색) */
  --accent-ring: rgba(105,115,44,.30);
  --shadow: 0 10px 24px rgba(0,0,0,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body.login-page{
  margin:0;
  background:var(--page-bg);
  color:var(--text);
  font-family: "Pretendard", "Pretendard-Regular", -apple-system, system-ui,
               "Apple SD Gothic Neo", "Noto Sans KR", Roboto, "Segoe UI", Arial, sans-serif;
}

/* 전체 센터링 */
.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px 16px;
}

/* 카드 */
.card{
  width:100%;
  max-width:420px;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:12px;
  padding:22px 22px 26px; /* 상단 여백 살짝 줄여 로고 배지와 균형 */
  box-shadow:var(--shadow);
}

/* === 로고 배지: 섹션 상단 중앙 + 버튼색 배경 === */
.logo-row{
  display:flex;
  justify-content:center;
  margin:4px 0 16px; /* 카드 상단과 폼 사이 간격 */
}

.logo-badge{
  background: var(--accent-strong);      /* 버튼과 동일한 색 */
  border-radius: 12px;
  padding: 16px 16px;                     /* 로고 주위 여백 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(125,146,0,.22); /* 은은한 깊이감 */
}

.brand-logo{
  width:146px;
  height:18px;
  display:block;
  user-select:none;
}

/* 필드 */
.field{ margin-bottom:14px; }

label{
  display:block;
  margin:8px 0 6px;
  color:var(--muted);
  font-size:12px;
}

/* 인풋 – 앱 테이블/검색 인풋과 결 맞춤 */
input[type="text"],
input[type="password"]{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--panel-border);
  background:#fff;
  color:var(--text);
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder{ color:#8a8a8a; }
input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* 버튼 – 프로젝트 그린 계열 */
.btn-primary{
  width:100%;
  margin-top:14px;
  padding:12px 14px;
  border:none;
  border-radius:10px;
  background:var(--accent-strong);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition: transform .08s ease, filter .12s ease, opacity .15s ease;
}
.btn-primary:hover{ filter: brightness(1.03); }
.btn-primary:active{ transform: scale(0.985); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

/* 상태 메시지 – 앱의 회색 보더/라운드와 조화 */
.alert, .info{
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  margin-bottom:10px;
}
.alert{
  background:#fff4f4;
  border:1px solid #f3c4c4;
  color:#a02323;
}
.info{
  background:#f5fbf2;
  border:1px solid #cfe8c4;
  color:#2b5d1a;
}

/* 접근성: 모션 최소화 환경 */
@media (prefers-reduced-motion: reduce){
  .btn-primary, input{ transition:none; }
}

.btn-secondary{ width:100%; margin-top:10px; padding:12px 14px; border:1px solid var(--panel-border); border-radius:10px; background:#fff; color:var(--text); font-weight:700; cursor:pointer; }
.btn-secondary:hover{ filter:brightness(1.02); }
.btn-secondary:active{ transform:scale(0.985); }