/* ============================================================
   common.css — 교회 홈페이지 공통 스타일
   디자인 토큰 + 기본 리셋 + 공통 컴포넌트(admin/공개 공용)
   팔레트: 깊은 슬레이트블루(신뢰) + 절제된 골드(강조)
   ============================================================ */

:root{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f0f2f5;
  --ink:#1f2a37;
  --muted:#6b7280;
  --line:#e6e8ec;
  --primary:#2f4858;
  --primary-700:#24323d;
  --accent:#b5894e;
  --accent-soft:#f4ecdd;
  --danger:#b3261e;
  --ok:#1f7a4d;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.06);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,
    "Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:inherit;font-weight:600;font-size:14px;
  padding:9px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  cursor:pointer;transition:.15s ease;white-space:nowrap;
}
.btn:hover{background:var(--surface-2);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-700);}
.btn-danger{background:#fff;border-color:#e7c3c0;color:var(--danger);}
.btn-danger:hover{background:#fbeceb;}
.btn-ghost{border-color:transparent;background:transparent;color:var(--muted);}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);}
.btn-sm{padding:5px 10px;font-size:13px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ---------- 폼 ---------- */
.field{margin-bottom:16px;}
.field > label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.field .hint{font-size:12px;color:var(--muted);margin-top:4px;}
input[type=text],input[type=password],input[type=date],input[type=number],
input[type=url],input[type=email],select,textarea{
  width:100%;font:inherit;font-size:14px;color:var(--ink);
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);transition:.15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(47,72,88,.12);
}
textarea{min-height:120px;resize:vertical;line-height:1.6;}
.check{display:flex;align-items:center;gap:8px;font-size:14px;}
.check input{width:18px;height:18px;accent-color:var(--primary);}

/* ---------- 뱃지 ---------- */
.badge{
  display:inline-block;font-size:12px;font-weight:600;
  padding:2px 9px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);
}
.badge-accent{background:var(--accent-soft);color:#8a6526;}
.badge-ok{background:#e6f4ec;color:var(--ok);}
.badge-danger{background:#fbeceb;color:var(--danger);}

/* ---------- 카드 ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
}

/* ---------- 표 ---------- */
.table{width:100%;border-collapse:collapse;font-size:14px;}
.table th{
  text-align:left;font-size:12px;font-weight:600;color:var(--muted);
  text-transform:none;padding:10px 14px;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;}
.table tr:last-child td{border-bottom:none;}
.table tr:hover td{background:#fafbfc;}

/* ---------- 유틸 ---------- */
.muted{color:var(--muted);}
.row{display:flex;align-items:center;gap:10px;}
.right{margin-left:auto;}
.empty{padding:48px 20px;text-align:center;color:var(--muted);}
.thumb{width:46px;height:46px;border-radius:8px;object-fit:cover;background:var(--surface-2);border:1px solid var(--line);}