/**
 * pledge/style.css — 공통 스타일 변수 및 기본 요소
 * 각 PHP 파일의 <head>에서 <link rel="stylesheet" href="style.css"> 로 로드
 * 페이지별 추가 스타일은 <style> 태그로 각 파일에 작성
 */

/* ── CSS 변수 (전역 팔레트) ─────────────────────────────────── */
:root {
  /* 브랜드 컬러 */
  --mn-dark:    #1A3A2A;   /* 사이트 헤더 배경 */
  --mn-green:   #2D6A4F;   /* 주 강조색 */
  --mn-light:   #52B788;   /* 보조 강조색 */
  --mn-pale:    #EAF4EE;   /* 연한 배경 */

  /* 중립 */
  --bg:         #F4F6F2;
  --surface:    #FFFFFF;
  --border:     #E2E4DF;
  --text:       #212529;
  --muted:      #6C757D;

  /* 의미 색상 */
  --danger:     #E63946;
  --warn:       #F1A94E;
  --info:       #1A5490;
  --info-pale:  #EFF6FF;

  /* 타이포 */
  --font: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Mono', monospace;

  /* 레이아웃 */
  --radius:     10px;
  --radius-sm:  6px;
  --wrap-width: 1100px;
}

/* ── 리셋 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── 기본 ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
}

/* ── 공통 레이아웃 ── */
.mn-wrap {
  max-width: var(--wrap-width);
  margin: 0 auto;
  padding: 16px;
}

/* ── 공통 카드 ── */
.mn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
}

/* ── 공통 배지 ── */
.mn-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 600;
}
.mn-badge-green  { background: var(--mn-pale); color: var(--mn-green); }
.mn-badge-warn   { background: #FEF3C7; color: #92400E; }
.mn-badge-danger { background: #FEE2E2; color: var(--danger); }
.mn-badge-muted  { background: #F3F4F6; color: var(--muted); }

/* ── 공통 버튼 ── */
.mn-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 20px;
  border: none;
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s;
}
.mn-btn-primary { background: var(--mn-green); color: #fff; }
.mn-btn-outline { background: none; border: 1px solid var(--border); color: var(--muted); }
.mn-btn:hover   { opacity: .85; }

/* ── 공통 안내 박스 ── */
.mn-info    { background: var(--info-pale);  border: 1px solid #BFDBFE; color: #1E3A5F; }
.mn-warn    { background: #FFFBEB;           border: 1px solid #FDE68A; color: #78350F; }
.mn-danger  { background: #FFF5F5;           border: 1px solid #FECACA; color: #7F1D1D; }
.mn-info, .mn-warn, .mn-danger {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .85rem;
  line-height: 1.8;
  margin-bottom: 12px;
}

/* ── 공통 섹션 제목 ── */
.mn-section-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

/* ── 스크롤바 ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #C0C2BC; }

/* ── 반응형 기준 ── */
@media (max-width: 768px) { .mn-wrap { padding: 12px; } }
@media (max-width: 480px) { .mn-wrap { padding: 8px; } }

/* ── 공통 페이지 헤더 ── */
.mn-page-header {
  background: linear-gradient(135deg, var(--mn-dark) 0%, var(--mn-green) 100%);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 14px;
  color: #fff;
}
.mn-page-header h1 { font-size: 1.2rem; font-weight: 800; margin-bottom: 4px; }
.mn-page-header p  { font-size: .85rem; opacity: .88; line-height: 1.7; }

/* ── 공통 필터 바 ── */
.mn-filter-bar { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.mn-filter-btn {
  padding: 4px 12px; border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--muted);
  font-size: .78rem; text-decoration: none; transition: all .15s;
}
.mn-filter-btn:hover, .mn-filter-btn.on {
  background: var(--mn-green); border-color: var(--mn-green); color: #fff;
}

/* ── 공통 섹션 (접기/펼치기) ── */
.mn-section { border: 1px solid var(--border); border-radius: var(--radius);
              margin-bottom: 8px; overflow: hidden; }
.mn-sec-head {
  padding: 10px 14px; background: #F8FAF8;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none; transition: background .1s;
}
.mn-sec-head:hover { background: #EEF4EE; }
.mn-sec-title { font-size: .9rem; font-weight: 600; flex: 1; }
.mn-sec-cnt {
  font-size: .78rem; background: var(--mn-pale); color: var(--mn-green);
  padding: 2px 8px; border-radius: 10px; font-weight: 600; flex-shrink: 0;
}
.mn-sec-arrow { font-size: .8rem; transition: transform .2s; }
.mn-sec-head.collapsed .mn-sec-arrow { transform: rotate(-90deg); }
.mn-sec-body { display: none; }
.mn-sec-body.open { display: block; }

/* ── 공통 빈 상태 ── */
.mn-empty {
  text-align: center; padding: 40px 20px; color: var(--muted);
}
.mn-empty .mn-empty-icon { font-size: 2.5rem; margin-bottom: 8px; }
.mn-empty p { font-size: .88rem; }
