/* [추가] 연혁(Timeline) 스타일 */
    .timeline-item {
      padding: 0 0 20px 20px;
      border-left: 2px solid #e0e0e0; /* 회색 세로선 */
      position: relative;
    }
    .timeline-item::before {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50px;
      left: -8px;
      top: 0;
      background: #fff;
      border: 2px solid var(--color-primary); /* 녹색 점 */
    }
    .timeline-date {
      font-size: 14px;
      color: var(--color-secondary);
      font-weight: 700;
      margin-bottom: 5px;
    }
    .timeline-content h4 {
      font-size: 16px;
      font-weight: 600;
      margin: 0 0 5px 0;
    }
    .timeline-content p {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
    :root {
      /* 핵심 컬러 정의 */
      --color-primary: #2E7D32;   /* Forest Green (신뢰, 친환경) */
      --color-secondary: #FF8F00; /* Solar Orange (태양, 에너지) */
      --color-dark: #1b1b1b;
      --color-light: #f6f9ff;
    }

    /* 1. 기본(본문)은 프리텐다드 유지 */
    body, p, span, a, input, button {
      font-family: "Pretendard Variable", "Pretendard", -apple-system, sans-serif;
      letter-spacing: -0.5px;
      line-height: 1.6;
    }

    /* 2. [수정] 제목(Headings)과 로고에는 '지마켓 산스' 적용 */
    h1, h2, h3, h4, h5, h6, .logo h1 {
      font-family: "GmarketSans", sans-serif; /* 여기가 핵심 */
      font-weight: 700;       /* 굵게(Bold) */
      letter-spacing: -0.5px;
    }
    
    /* 특히 메인 카피(Hero)는 더 굵게(Medium 이상) */
    #hero h1 {
      font-weight: 700; 
      line-height: 1.3; /* 제목 줄 간격은 살짝 좁게 */
    }
    a { text-decoration: none; color: var(--color-primary); }
    a:hover { color: var(--color-secondary); }

        
   
    /* --- 히어로 섹션 (메인 화면) --- */
    #hero {
      width: 100%;
      height: 100vh;
      /* 배경 이미지: 무료 이미지 사이트(Unsplash)에서 태양광 패널 사진 링크 사용 */
      background: url("https://images.unsplash.com/photo-1509391366360-2e959784a276?q=80&w=2072&auto=format&fit=crop") top center;
      background-size: cover;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* 사진 어둡게 처리 (글씨 잘 보이게) */
    #hero:before {
      content: "";
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
    }
    #hero .container {
      position: relative;
      text-align: center;
      padding-top: 20px;
    }
    #hero h1 {
      margin: 0;
      font-size: 48px;
      font-weight: 700;
      line-height: 1.2;
      color: #fff;
    }
    #hero h1 span { color: var(--color-secondary); }
    #hero h2 {
      color: #eee;
      margin: 15px 0 0 0;
      font-size: 24px;
    }


    /* --- 공통 섹션 스타일 --- */
    section { padding: 60px 0; overflow: hidden; }
    .section-title { padding-bottom: 30px; text-align: center; }
    .section-title h2 {
      font-size: 14px;
      font-weight: 500;
      padding: 0;
      line-height: 1px;
      margin: 0 0 5px 0;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #aaaaaa;
      font-family: "Poppins", sans-serif;
    }
    .section-title p {
      margin: 0;
      margin: 0;
      font-size: 36px;
      font-weight: 700;
      text-transform: uppercase;
      font-family: "Poppins", sans-serif;
      color: var(--color-dark);
    }
    .section-title p span { color: var(--color-primary); }

    /* --- 진행률 (Features) --- */
    .counts { padding: 70px 0 60px; }
    .counts .count-box {
      padding: 30px 30px 25px 30px;
      width: 100%;
      position: relative;
      text-align: center;
      background: #f6f9fe;
      border-radius: 4px;
    }
    .counts .count-box i {
      position: absolute;
      top: -25px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24px;
      background: var(--color-primary);
      color: #fff;
      padding: 12px;
      border-radius: 50px;
      width: 50px;
      height: 50px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
    .counts .count-box span {
      font-size: 36px;
      display: block;
      font-weight: 700;
      color: var(--color-dark);
      margin-top: 10px;
    }
    .counts .count-box p {
      padding: 0;
      margin: 0;
      font-family: "Noto Sans KR", sans-serif;
      font-size: 14px;
    }

    /* 진행바 스타일 */
    .progress { height: 25px; margin-top: 20px; background-color: #e9ecef; border-radius: 5px; }
    .progress-bar { 
      background-color: var(--color-primary); 
      font-weight: bold; 
      line-height: 25px;
    }


    /* 모바일 대응 */
    @media (max-width: 1500px) {
      #hero h1 { font-size: 28px; line-height: 36px; }
      #hero h2 { font-size: 18px; line-height: 24px; margin-bottom: 30px; }

    }
    
  
    /* --- [추가] 스크롤 위치 보정 (헤더에 가려짐 방지) --- */
    section {
      scroll-margin-top: 80px; /* 헤더 높이(약 70px)보다 조금 더 여유 있게 설정 */
    }
    

    /* --- [추가] 푸터 디자인 고도화 --- */
    #footer {
      background: black;
      padding: 0 0 30px 0;
      color: #fff;
      font-size: 14px;
    }
    #footer .footer-top {
      background: #151515; /* 살짝 밝은 검정 */
      border-bottom: 1px solid #222;
      padding: 60px 0 30px 0;
    }
    #footer .footer-top h3 {
      font-size: 28px;
      margin: 0 0 20px 0;
      padding: 2px 0 2px 0;
      line-height: 1;
      font-weight: 700;
      font-family: "GmarketSans", sans-serif;
    }
    #footer .footer-top h3 span { color: var(--color-secondary); }
    #footer .footer-top h4 {
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      position: relative;
      padding-bottom: 12px;
      margin-bottom: 20px;
    }
    #footer .footer-links ul { list-style: none; padding: 0; margin: 0; }
    #footer .footer-links ul i { padding-right: 2px; color: var(--color-primary); font-size: 18px; line-height: 1; }
    #footer .footer-links ul li { padding: 10px 0; display: flex; align-items: center; }
    #footer .footer-links ul a { color: #fff; transition: 0.3s; display: inline-block; line-height: 1; }
    #footer .footer-links ul a:hover { color: var(--color-secondary); }


    /* =======================================================
   [추가] 회원가입 페이지 (signup.html) 전용 스타일
   ======================================================= */

/* 1. 컨테이너 및 안내 박스 */
.signup-container {
  max-width: 600px;
  margin: 100px auto 60px; /* 헤더 높이만큼 띄움 */
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.info-box {
  background-color: #f8f9fa;
  border-left: 4px solid var(--color-primary); /* 메인 녹색 */
  padding: 15px;
  margin-bottom: 25px;
  border-radius: 4px;
}
.info-text { font-size: 14px; color: #555; margin-bottom: 5px; }
.info-text:before { content: "• "; color: var(--color-primary); font-weight: bold; }
.contact-info { margin-top: 10px; font-size: 13px; color: #888; font-weight: 500; }

/* 2. 입력 폼 공통 스타일 */
.rules-field { margin-bottom: 20px; }
.rules-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}
.required:after { content: " *"; color: #dc3545; }

/* 입력창 디자인 (부트스트랩 느낌 + 커스텀) */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  transition: all 0.3s;
  font-family: "Pretendard", sans-serif;
}
input:focus, select:focus {
  border-color: var(--color-secondary); /* 오렌지색 포커스 */
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 143, 0, 0.1);
}
input[readonly] { background-color: #f1f3f4; cursor: default; }

/* 3. 분할 입력 박스 (주민번호, 전화번호 등) */
.split-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash { color: #aaa; font-weight: bold; }



.btn-edit {
  background-color: #fff;
  color: #555;
  border: 1px solid #ddd;
  padding: 0 15px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

button[type="submit"] {
  width: 100%;
  padding: 15px;
  background-color: var(--color-primary); /* 메인 녹색 */
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
  transition: background 0.3s;
}
button[type="submit"]:hover { background-color: #1b5e20; }
button[type="submit"]:disabled { background-color: #ccc; cursor: not-allowed; }

/* 5. 라디오 버튼 (개인/단체) */
.type-selector {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
}
input[type="radio"] {
  accent-color: var(--color-primary); /* 녹색 라디오 버튼 */
  width: 18px;
  height: 18px;
}

/* 6. 에러 메시지 */
.field-error {
  color: #dc3545;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 500;
  min-height: 18px;
}

/* 7. 은행 섹션 & 약관 동의 */
.bank-section {
  background: #fdfdfd;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 25px;
}
.bank-section h3 { font-size: 16px; margin-bottom: 10px; font-weight: bold; }

.agreement-box {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.check-item { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.term-link { color: #555; text-decoration: underline; cursor: pointer; }
.term-link:hover { color: var(--color-primary); }

/* 8. 팝업 모달 (센터 모달) */
.center-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
}
.center-modal .modal-contents {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 5px 30px rgba(0,0,0,0.3);
  animation: modalPop 0.3s ease-out;
}


/* 9. 카카오 버튼 (완료 화면용) */
.kakao-link-btn {
  display: block;
  background-color: #FEE500;
  color: #000;
  text-decoration: none;
  padding: 12px;
  border-radius: 6px;
  font-weight: bold;
  margin-top: 15px;
  text-align: center;
}
/* =======================================================
   [추가] 모달 이름 충돌 해결 (약관 팝업 전용)
   ======================================================= */

/* 기존 .modal 대신 .custom-popover 라는 이름을 씁니다 */
.custom-popover {
  display: none; /* 기본적으로 숨김 */
  position: absolute; /* 마우스 위치 따라다녀야 함 */
  z-index: 10000; /* 제일 위에 뜨도록 */
  background-color: transparent;
}

/* 팝업 내용 박스 스타일 */
.custom-popover .modal-contents {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  width: 300px;
  font-size: 13px;
  text-align: left;
  position: relative;
}

/* 모바일에서는 화면 중앙에 뜨게 */
@media (max-width: 1500px) {
  .custom-popover {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); /* 어두운 배경 */
    align-items: center;
    justify-content: center;
  }
  .custom-popover.show {
    display: flex !important; /* 모바일에서 켤 때 flex로 */
  }
  .custom-popover .modal-contents {
    width: 90%;
    max-width: 350px;
  }
}

/* 화살표 (말풍선 꼬리) */
.modal-arrow {
  position: absolute;
  width: 15px; height: 15px;
  background: #fff;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  transform: rotate(45deg);
  z-index: 10001;
}

/* style.css 맨 아래에 추가하거나 덮어쓰기 */

/* PC에서도 입력창과 버튼이 한 줄에 조화롭게 배치되도록 수정 */
.rules-field .split-box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* 입력창 너비 최적화 */
.rules-field input, .rules-field select {
  flex: 1; /* 가용한 공간을 채움 */
  min-width: 0; /* flex 박스 내부 찌그러짐 방지 */
}

/* 버튼 너비 고정 */
.rules-field button {
  white-space: nowrap;
  min-width: 80px;
  height: 45px; /* 입력창 높이와 통일 */
}

/* 주소 입력창 정렬 */
.address-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- [재구축] 가입 페이지 전용: 귀여운 에너지 스타일 --- */
.signup-wrapper {
  max-width: 700px;
  margin: 80px auto;
  padding: 40px 20px;
  background: #ffffff;
  border-radius: 30px; /* 더 둥글게 */
  box-shadow: 0 10px 40px rgba(46, 125, 50, 0.1); /* 녹색 그림자 */
}

.gate-card {
  border: 2px solid #f1f1f1;
  border-radius: 20px;
  padding: 30px;
  transition: 0.3s;
  cursor: pointer;
  background: #fff;
}
.gate-card:hover { border-color: var(--color-primary); transform: translateY(-5px); }

/* 입력창 귀엽게 */
.form-floating > .form-control, .form-floating > .form-select {
  border-radius: 15px;
  border: 2px solid #eee;
}
.form-control:focus { border-color: var(--color-primary); box-shadow: none; }

/* 버튼들 */
.btn-kakao { background: #FEE500; border: none; border-radius: 12px; font-weight: bold; padding: 15px; width: 100%; }
.btn-email { background: #f8f9fa; border: 2px solid #eee; border-radius: 12px; font-weight: bold; padding: 15px; width: 100%; }
.btn-submit-main { background: var(--color-primary); color: #fff; border-radius: 15px; padding: 18px; font-size: 18px; font-weight: 700; border: none; width: 100%; }

/* 단계별 이모지 */
.step-emoji { font-size: 40px; margin-bottom: 20px; display: block; }

/* [수정] 이메일 게이트 전용 스타일 (높이 맞춤) */
.email-gate-group {
  display: flex; /* 옆으로 나란히 */
  box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* 살짝 띄워서 예쁘게 */
  border-radius: 15px;
}

.email-gate-group .form-control {
  height: 55px !important; /* 높이 강제 고정 */
  border-radius: 15px 0 0 15px !important; /* 왼쪽만 둥글게 */
  border: 2px solid #eee;
  border-right: none; /* 버튼과 닿는 면은 선 제거 */
}
.email-gate-group .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: none;
  z-index: 2; /* 포커스 시 위로 올라오게 */
}

.email-gate-group .btn {
  height: 55px !important; /* 높이 강제 고정 */
  border-radius: 0 15px 15px 0 !important; /* 오른쪽만 둥글게 */
  min-width: 100px; /* 버튼이 너무 찌그러지지 않게 */
  font-weight: bold;
}

/* =========================================
   [NEW] 모바일 앱 스타일 & 바텀 시트
   ========================================= */

/* 1. 화면 중앙 고정 (PC/모바일 동일 경험) */
.mobile-view-container {
  max-width: 500px; /* 아이폰 Max 너비 정도 */
  margin: 0 auto;
  background-color: #fff;
  min-height: 100vh;
  box-shadow: 0 0 20px rgba(0,0,0,0.05); /* 은은한 그림자 */
  position: relative;
  overflow-x: hidden; /* 가로 스크롤 방지 */
}

.signup-content {
  padding: 30px 20px 100px 20px; /* 하단 여백 충분히 */
}

/* 2. 바텀 시트 (밑에서 올라오는 모달) */
.bottom-sheet-overlay {
  display: none; /* 평소엔 숨김 */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9990;
  max-width: 500px; /* 모바일 컨테이너 폭에 맞춤 */
  margin: 0 auto; /* 중앙 정렬 */
}

.bottom-sheet {
  position: fixed;
  bottom: -100%; /* 화면 아래에 숨겨둠 */
  left: 0; right: 0;
  max-width: 500px; /* 모바일 컨테이너 폭에 맞춤 */
  margin: 0 auto; /* 중앙 정렬 */
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  z-index: 9999;
  transition: bottom 0.3s ease-in-out;
  box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
  max-height: 80vh; /* 화면의 80%까지만 */
  overflow-y: auto;
}

.bottom-sheet.show {
  bottom: 0; /* 위로 올라옴 */
}


.sheet-title { font-weight: bold; font-size: 18px; }

/* 3. 은행 직접 입력창 (평소엔 숨김) */
#bankDirectInput {
  display: none;
  margin-top: 10px;
}

/* [수정] 우편번호 검색창 UI (버튼 크기 맞춤) */
.postcode-group {
  display: flex;
  width: 100%;
  gap: 0; /* 틈새 없음 */
}
.postcode-group input {
  flex: 1; /* 남은 공간 다 차지 */
  border-radius: 15px 0 0 15px !important;
  height: 55px; /* 높이 고정 */
}
.postcode-group button {
  width: 80px; /* 버튼 너비 고정 */
  height: 55px; /* 높이 고정 */
  border-radius: 0 15px 15px 0 !important;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* [수정] 모달 약관 텍스트 (가독성 개선) */
#termContent {
  white-space: pre-wrap;
  font-size: 15px !important; /* 글자 크기 확대 (기존 13px -> 15px) */
  color: #333;
  line-height: 1.6; /* 줄 간격 넓게 */
  padding-bottom: 30px;
}

/* [추가] 유효성 검사 메시지 스타일 (빨강/녹색) */
.msg-box { font-size: 13px; margin-top: 5px; font-weight: 600; }
.msg-error { color: #dc3545; } 
.msg-success { color: #198754; }

/* [추가] 빈 값 경고용 빨간 테두리 */
.is-invalid-field { border: 2px solid #dc3545 !important; background-color: #fff8f8; }

/* [추가] 상단 타이틀 스타일 */
/* [수정 7] 상단 타이틀 스타일 (녹색 계열) */
.form-title {
  font-family: 'GmarketSans'; font-weight: 800; font-size: 24px;
  /* 기존 오렌지->핑크에서 녹색->청록 계열로 변경 */
  background: linear-gradient(to right, #2E7D32, #26A69A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}

/* [추가 6] 약관 동의 안 했을 때 라벨 빨간색 처리 */
.text-danger-label {
  color: #dc3545 !important;
  font-weight: bold;
}

/* [모달 흔들림 방지] 스크롤바 공간을 항상 예약해둠 */
    html {
      scrollbar-gutter: stable;
    }

/* 2. [추가] 모달이 열릴 때 본문(푸터)이 밀리는 것 방지 */
body.modal-open {
  padding-right: 0 !important;
}

/* 3. [추가] 혹시 헤더가 다시 흔들리면 이것도 추가 (지금 안 흔들리면 굳이 필요 없음) */
.modal-open .fixed-top {
  padding-right: 0 !important;
}

/* --- 건립현황 단계(Steps) 디자인 --- */
.step-container {
  margin-top: 20px;
  position: relative;
  border-top: 2px solid #e9ecef;
  padding-top: 20px;
}
.step-item {
  position: relative;
  text-align: center;
  font-size: 0.85rem;
  color: #aaa;
  font-weight: 600;
  width: 20%; /* 5단계니까 20%씩 */
}
.step-item::before {
  content: '';
  position: absolute;
  top: -26px; /* 선 위에 동그라미 위치 */
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #e9ecef;
  border-radius: 50%;
  border: 2px solid #fff;
  z-index: 1;
}
/* 활성화된 단계 (색칠) */
.step-item.active { color: var(--color-primary); }
.step-item.active::before { background: var(--color-primary); }
/* 현재 진행 중인 단계 (반짝임) */
.step-item.current::before { 
    transform: translateX(-50%) scale(1.3); 
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2);
}

/* =======================================================
   * 정관/규약 뷰어 (Rules Page) 전용 스타일 (v2)
   ======================================================== */

/* 1. 상단 검색바 & 탭 */
.sticky-nav-area {
    position: sticky;
    top: 60px; /* 헤더 높이만큼 띄움 */
    z-index: 900;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #eee;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* 2. 조항 카드 디자인 */
.article-card {
    background: white; 
    border: 1px solid #e9ecef; 
    border-radius: 12px;
    padding: 20px 25px; 
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* 3. 조항 제목 (녹색, 굵게) */
.article-title { 
    color: #009961; 
    font-weight: 800; 
    font-size: 1.15rem; 
    display: block; 
    margin-bottom: 8px; 
}

/* 4. 조항 본문 (줄바꿈 처리) */
.article-content { 
    font-size: 1rem; 
    line-height: 1.6; 
    color: #333; 
    font-weight: 400; 
    word-break: keep-all; 
}

/* 5. [신규] 제N장 (크고 시원하게) */
.chapter-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: #2c3e50;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid #009961;
    background: #f8f9fa; /* 배경 살짝 줌 */
    padding: 15px;
    border-radius: 8px;
}

/* 6. [신규] 부칙 (구분감 있게) */
.addenda-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #555;
    margin-top: 50px;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 5px solid #6c757d;
}

/* 7. 아코디언 */
.accordion-button:not(.collapsed) { background-color: #e8f5e9; color: #009961; }
.archive-badge { font-size: 0.7rem; padding: 4px 8px; background: #6c757d; color: white; border-radius: 4px; margin-left: 8px; }


/* =======================================================
   * [NEW] 통합 헤더 & 네비게이션 (여기서부터 복사하세요)
   ======================================================== */

/* 1. 헤더 배경 (검은색으로 통일) */
#header {
  background: rgba(0, 0, 0, 0.9) !important;
  transition: all 0.5s;
  z-index: 997;
  padding: 15px 0;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

#header .logo h1 a {
  color: #fff !important;
  text-decoration: none;
}

#header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* 2. 모바일 화면 (1499px 이하): 검은 배경 + 흰 글씨 + 구분선 */
@media (max-width: 1499px) {
  #navbar ul { display: none; } /* 평소엔 숨김 */

  /* 햄버거 버튼 아이콘 */
  .mobile-nav-toggle {
    display: block !important;
    font-size: 28px;
    cursor: pointer;
    margin-left: 15px;
    color: #fff;
  }

  /* 메뉴 박스 디자인 (검은색 테마) */
  #navbar.active ul {
    display: block !important;
    position: fixed;
    top: 80px; 
    right: 15px;
    /* ★ 배경 검은색 (투명도 95%) */
    background-color: rgba(20, 20, 20, 0.95); 
    padding: 0; /* 패딩 제거 (구분선 꽉 채우기 위해) */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    z-index: 9999;
    min-width: 220px;
    overflow: hidden; /* 둥근 모서리 삐져나옴 방지 */
    border: 1px solid #333; /* 외곽선 살짝 */
  }

  #navbar.active li {
    display: block;
    text-align: right;
    /* ★ 메뉴 밑줄 (구분선) 추가 */
    border-bottom: 1px solid #333; 
    margin: 0;
  }
  #navbar.active li:last-child { border-bottom: none; } /* 마지막 줄은 선 제거 */
  
  #navbar.active a {
    display: block;
    padding: 15px 20px; /* 터치하기 좋게 영역 넓힘 */
    color: #fff; /* ★ 글자 흰색 */
    font-size: 15px;
    text-decoration: none;
  }
  
  /* 모바일 호버/터치 시 배경색 변경 */
  #navbar.active a:hover {
    color: var(--color-secondary);
    background-color: #000; 
  }
}


/* =======================================================
   [수정 1] 로고: 모바일에서 절대 줄바꿈 금지 & 자동 크기 조절
   ======================================================= */
.logo h1 {
  white-space: nowrap;  /* 줄바꿈 금지 */
  font-size: clamp(16px, 4vw, 24px) !important; /* 화면 폭에 따라 글자 크기 자동 조절 (최소 16px ~ 최대 24px) */
}
  


/* 4. 버튼 그룹 (로그인/가입) */


/* 5. 모바일 푸터 가운데 정렬 */
@media (max-width: 1500px) {
  #footer .footer-top .row > div {
    text-align: center;
    margin-bottom: 30px;
  }
  #footer .footer-links ul li {
    justify-content: center;
  }
  #footer .footer-newsletter div {
    text-align: center;
  }
}

/* 수정 전: (테두리 설정이 없거나 투명해서 안 보임) */

/* 수정 후: 오렌지색 테두리와 배경 투명 명시 */
.get-started-btn {
  color: #fff;
  border-radius: 4px;
  padding: 8px 25px;
  white-space: nowrap;
  transition: 0.3s;
  font-size: 14px;
  display: inline-block;
  border: 2px solid var(--color-secondary); /* 오렌지색 테두리 강제 */
  background: transparent; /* 배경 투명 */
  font-weight: 600;
  margin-left: 15px;
}

.get-started-btn:hover {
  background: var(--color-secondary); /* 마우스 올리면 오렌지색 채움 */
  color: #fff;
}

/* =======================================================
   [수정] 협력단체 (Partners) 카드 디자인
   ======================================================= */
.clients {
  padding: 60px 0;
  background-color: #f9f9f9; /* 배경색 살짝 줌 */
}

.clients .partner-card {
  background: #fff;
  border-radius: 15px; /* 둥근 모서리 */
  padding: 20px;
  height: 120px; /* 높이 고정 */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* 은은한 그림자 */
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* 마우스 올렸을 때 효과 (위로 살짝 뜨면서 그림자 진해짐) */
.clients .partner-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(46, 125, 50, 0.15); /* 녹색 그림자 */
  border-color: var(--color-primary);
}

/* 로고 이미지 스타일 */
.clients .partner-card img {
  max-width: 90%;
  max-height: 70px;
  filter: grayscale(100%); /* 평소엔 흑백 */
  opacity: 0.7;
  transition: 0.3s;
}

/* 호버 시 컬러 복구 */
.clients .partner-card:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}

/* 로고 없을 때 텍스트 스타일 */
.clients .partner-text {
  font-weight: 700;
  color: #555;
  font-size: 15px;
  text-align: center;
  word-break: keep-all;
  line-height: 1.4;
}
.clients .partner-card:hover .partner-text {
  color: var(--color-primary);
}

/* 모달 디자인 개선 */
#partnerDetailModal .modal-contents {
    border-radius: 20px; /* 모달 둥글게 */
    overflow: hidden;
}

/* =======================================================
   [추가] FAQ 카드형 아코디언 디자인
   ======================================================= */
.faq .faq-list {
  padding: 0;
  list-style: none;
}

/* 질문 카드 하나 (박스) */
.faq .faq-list li {
  background: #fff;
  border-radius: 12px;       /* 둥근 모서리 */
  margin-bottom: 15px;       /* 카드 사이 간격 */
  padding: 20px 25px;        /* 내부 여백 */
  border: 1px solid #f0f0f0; /* 아주 연한 테두리 */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.03); /* 은은한 그림자 */
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 마우스 올렸을 때 (살짝 위로 뜸 + 녹색 테두리) */
.faq .faq-list li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(46, 125, 50, 0.1);
  border-color: var(--color-primary); /* 녹색 */
}

/* 질문 텍스트 영역 */
.faq .question-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "GmarketSans", sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: #333;
}

/* 질문 앞의 Q 아이콘 */
.faq .q-icon {
  color: var(--color-primary);
  font-weight: 900;
  margin-right: 10px;
  font-size: 20px;
}

/* 우측 화살표 아이콘 (애니메이션용) */
.faq .toggle-icon {
  font-size: 16px;
  color: #999;
  transition: transform 0.3s;
}

/* 답변 영역 (숨겨져 있다가 나옴) */
.faq .answer-block {
  margin-top: 0;
  padding-top: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.6;
  border-top: 1px solid transparent; /* 평소엔 선 없음 */
  transition: all 0.3s;
}

/* [활성화 상태] 답변이 열렸을 때 스타일 */
.faq .faq-list li.active {
  border-color: var(--color-primary);
  background-color: #fcffff; /* 아주 연한 녹색 배경 */
}

.faq .faq-list li.active .toggle-icon {
  transform: rotate(180deg); /* 화살표 뒤집기 */
  color: var(--color-primary);
}

.faq .faq-list li.active .answer-block {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee; /* 답변 위에 구분선 생김 */
}

/* [주소 입력창] 수정 모드일 때만 보임 */
.addr-edit-group {
    display: none; /* 기본 숨김 */
}
.addr-edit-group input {
    margin-bottom: 5px;
}

/* [모달] 커스텀 디자인 */
.custom-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}
.custom-modal-box {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: popUp 0.2s ease-out;
}
.custom-modal-btn-group {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.btn-modal {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    min-width: 80px;
}
.btn-modal-yes { background: #2E7D32; color: #fff; }
.btn-modal-no { background: #eee; color: #333; }

/* 감자 신청 한도 텍스트 */
.limit-text {
    font-size: 0.85rem;
    color: #e65100;
    font-weight: bold;
    margin-top: 5px;
}


/* [추가] 생일 축하 배너 */
#birthdayBanner {
    background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
    color: #d81b60; padding: 15px; border-radius: 15px;
    text-align: center; margin-bottom: 20px;
    font-weight: bold; cursor: pointer; display: none;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    animation: bounce 2s infinite;
}

/* =========================================
   애니메이션 키프레임 (Animations)
   ========================================= */

/* 1. 모달 팝업 효과 (작아졌다 커짐) */
@keyframes modalPop {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 2. 생일 배너 바운스 효과 (위아래로 통통 튐) */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* [추가] 게시판 스타일 */
.board-tab-btn { border: none; background: transparent; padding: 10px 20px; font-weight: 600; color: #aaa; border-bottom: 3px solid transparent; }
.board-tab-btn.active { color: #333; border-bottom-color: #2E7D32; }
.board-list-item { border-bottom: 1px solid #eee; padding: 15px 10px; cursor: pointer; transition: 0.2s; }
.board-list-item:hover { background: #f9f9f9; }
.board-badge { font-size: 0.75rem; padding: 3px 6px; border-radius: 4px; margin-right: 8px; }
.badge-notice { background: #e3f2fd; color: #1565c0; }
.badge-exec { background: #fce4ec; color: #c2185b; }

/* =======================================================
   NAVBAR 정리본 (모바일 토글 클래스 2종 호환)
   - index.html: #navbar.active
   - rules.html: #navbar.navbar-mobile
   ======================================================= */

/* 공통: 기본 구조 */
#navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}



/* 모바일(1499px 이하): 햄버거 + 우측 상단 드롭다운 */
@media (max-width: 1499px) {
  /* 기본은 숨김 */
  #navbar ul { 
    display: none; 
  }

  /* 햄버거 아이콘 보이기 */
  .mobile-nav-toggle {
    display: inline-block !important;
    font-size: 28px;
    cursor: pointer;
    color: #fff;
    line-height: 1;
  }

  /* 열림 상태: active / navbar-mobile 둘 다 같은 의미로 처리 */
  #navbar.active ul,
  #navbar.navbar-mobile ul {
    display: block !important;
    position: fixed;
    top: 80px;
    right: 15px;
    z-index: 9999;

    min-width: 220px;
    padding: 0;
    margin: 0;

    background-color: rgba(20, 20, 20, 0.95);
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
  }

  #navbar.active li,
  #navbar.navbar-mobile li {
    display: block;
    text-align: right;
    border-bottom: 1px solid #333;
  }
  #navbar.active li:last-child,
  #navbar.navbar-mobile li:last-child {
    border-bottom: none;
  }

  #navbar.active a,
  #navbar.navbar-mobile a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }

  #navbar.active a:hover,
  #navbar.navbar-mobile a:hover {
    color: var(--color-secondary);
    background-color: #000;
  }
}

@media (min-width: 1500px) {
  #navbar ul { display: flex; gap: 30px; }
  #navbar a { color: #fff; font-size: 16px; font-weight: 500; }
  #navbar a:hover { color: var(--color-secondary); }
  .mobile-nav-toggle { display: none !important; }
}
/* [복구] HERO 버튼 스타일 (조합원 가입하기) */
#hero .btn-get-started {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 4px;
  transition: 0.5s;
  margin-top: 30px;
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
}

#hero .btn-get-started:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}