/* ==========================================================================
   dev-fix.css — 개발이 고친 화면 보정 (2026-10-12 결정)

   퍼블리셔 파일(`common.css`·`components/*`·페이지별 css)은 **퍼블리셔만 고친다.**
   개발 연동·결정 때문에 깨진 화면을 개발이 고쳐야 할 때는 여기에만 적는다 —
   같은 파일을 둘이 고치다 서로의 작업을 덮는 일을 막기 위해서다.

   규칙
   · `layout/base.html`·`base-en.html` 이 **페이지 css 다음, 맨 마지막**에 읽는다.
     같은 명시도면 순서로 이긴다 — `!important` 를 쓰지 않는다.
   · 범위를 페이지 클래스로 좁힌다(`.donate-page`·`.apply-page` …). 전역 규칙은 두지 않는다.
   · 블록마다 이슈·날짜·화면, 왜 필요한지, **퍼블 파일 어디로 옮기면 되는지**를 적는다.
   · 임시 파일이다 — 퍼블리셔가 자기 파일로 흡수하면 그 블록을 지운다.

   🔴 퍼블리셔 — 아래 자리를 손볼 때는 이 파일을 먼저 본다. 여기 규칙이 뒤에서 이긴다.
   ========================================================================== */

/* ── 기부금 영수증 발급 동의 — 일시후원·갈라 신청 (2026-10-12) ─────────────────
   화면설계(시안 2-2) 레이아웃: 주민등록번호 상자 아래 **구분선**, 굵은 제목,
   체크박스, 그 아래 **체크박스 글자에 맞춰 들여 쓴** 작은 안내 문구.
   `.resident-consent` 규칙이 어느 css 에도 없어 제목이 상자에 붙고 안내가 큰 글자로
   왼쪽 끝에서 시작했다. 들여쓰기 2.8rem = 체크박스 2rem + 간격 0.8rem(form.css .custom-checkbox).
   → 옮길 곳: components/form.css (.receipt-resident-panel 근처) */
.donate-page .resident-consent,
.apply-page .resident-consent {
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid var(--border-gray30);
}

.donate-page .resident-consent .form-subtitle,
.apply-page .resident-consent .form-subtitle {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2.4rem;
}

.donate-page .resident-consent .receipt-helper-text,
.apply-page .resident-consent .receipt-helper-text {
  margin: 0.8rem 0 0 2.8rem;
  font-size: 1.6rem;
  color: var(--text-gray90);
}

/* ── 기부금 영수증 기신청 안내 — 일시후원 (2026-10-12) ─────────────────────────
   발급정보가 이미 있는 회원(개인·기업)은 예/아니오 대신 `#receiptOnFileGroup` 안내를 본다.
   화면설계는 「* 기부금 영수증」 제목 **아래**에 안내 세 줄이 오는 세로 배치다 —
   `.form-group.form` 의 가로 배치(왼쪽 16rem 라벨)를 세로로 바꾼다.
   → 옮길 곳: donate.css (.receipt-toggle-group 근처) */
.donate-page .form-group.form.receipt-on-file-group {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}

.donate-page .receipt-on-file-group .form-label {
  width: auto;
  min-height: auto;
}

.donate-page .receipt-on-file-group .receipt-helper {
  margin: 0;
}

/* ── 갈라 신청 — PASS 본인인증 버튼 (2026-10-12) ───────────────────────────────
   일시후원의 같은 버튼(donate.css .btn-auth-action.pass)은 빨간 바탕·흰 글자인데, 갈라 화면은
   campaign.css 만 읽어 윤곽선 버튼으로 나왔다. 같은 값으로 맞춘다.
   → 옮길 곳: campaign.css (.apply-page 블록) */
.apply-page .btn-auth-action.pass {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

/* ── 갈라 신청 — 성별·기부금 영수증 (2026-10-12) ──────────────────────────────
   갈라 신청 화면은 `campaign.css` 만 읽는다. 같은 마크업의 스타일이 `donate.css` 에만 있어
   성별 칸이 위로 붙고(정렬 없음), 「성별」 라벨이 `.apply-page .form-label`(2rem)로 커졌다 —
   다른 라벨은 `<label>` 이라 `.inner-form-box label`(1.8rem)을 받는데 성별만 `<span>` 이다.
   값은 일시후원(`donate.css`)과 같다.
   → 옮길 곳: campaign.css (.apply-page 블록) */
.apply-page .inner-form-group .inner-form-box span.form-label {
  font-size: var(--text-lg);
}

.apply-page .form-field.gender-field {
  flex-direction: row;
  align-items: center;
  min-height: 5.2rem;
}

.apply-page .gender-text {
  font-size: 1.8rem;
  font-weight: 500;
}

.apply-page .receipt-helper {
  margin: 1.6rem 0;
  color: var(--text-gray90);
}

.apply-page .receipt-helper-text {
  color: var(--text-gray90);
  font-size: var(--text-lg);
  margin-top: 1.6rem;
  word-break: keep-all;
}

/* 개인 인증 정보와 이메일을 한 상자에 둔다(gala_apply.html `gala-auth-row`).
   개인으로 인증한 뒤 「기업」으로 바꾸면 숨긴 인증 행 뒤의 기업명이 `.form-group + .form-group`
   간격을 받아 상자 맨 위가 한 칸 더 벌어진다 — 기업명은 늘 상자의 첫 줄이다 */
.apply-page .inner-form-box .gala-auth-row + #groupCorporateName {
  margin-top: 0;
}

/* ── 회원가입 — SNS 가입의 아이디 행 (2026-10-12) ─────────────────────────────
   SNS 가입은 아이디 칸 대신 「네이버 계정으로 자동 생성된 아이디입니다.」 안내만 둔다
   (join/form.html). 칸이 없으니 글이 행 위쪽에 붙는다 — 라벨 높이(5.2rem)에 맞춰 가운데에 둔다.
   → 옮길 곳: login.css (.form-helper 근처) */
.join-section .form-field.join-sns-id-field {
  justify-content: center;
  min-height: 5.2rem;
}

/* ── 자원봉사 신청 팝업 — 탭이 하나일 때 활성 표시 (2026-10-12) ──────────────
   하우스가 개인·기업 중 하나만 받으면 탭이 하나(`is-single`)가 된다. donate.css 는 이때
   빨간 인디케이터를 숨기는데(`.is-single .donate-tab-indicator{display:none}`), 활성 탭 글자는
   흰색이라 연한 바탕 위에서 비활성처럼 보였다. 인디케이터를 탭 전체 너비로 그린다 —
   두 탭일 때의 활성 탭과 같은 모양이다. 두 번째 탭만 남아도(`is-second-active`) 밀리지 않는다.
   → 옮길 곳: donate.css (.vol-popup-body .donate-type-tabs.is-single 근처) */
.vol-popup-body .donate-type-tabs.is-single .donate-tab-indicator {
  display: block;
  width: calc(100% - 3.2rem);
  transform: none;
}

@media (max-width: 768px) {
  /* ── 하우스 양산 — 모바일 지도 마커가 구글 기본 핀을 덮지 못한다 (2026-10-12) ──────
     API 키가 없을 때의 임베드 지도는 구글 핀 위에 우리 마커(.icon-marker)를 포개 덮는다.
     houses.css 모바일 규칙이 마커를 1.4×1.7rem 의 작은 그림(_mo.png)으로 바꾸는데, PC 의
     `translate(-7px, +3px)` 이동은 그대로라 구글 핀(26px 폭)이 옆으로 드러났다. 지도 안쪽은
     구글이 px 로 그리므로 마커도 PC 와 같은 px 크기·그림으로 덮는다(houses.css 697행 주석의 실측값).
     → 옮길 곳: houses.css (@media 768px 의 .location-map .icon-marker) */
  .location-map .icon-marker {
    width: 42px;
    height: 48px;
    background: url("/images/common/logo_google_map_marker.png") no-repeat center/contain;
  }

  .vol-popup-body .donate-type-tabs.is-single .donate-tab-indicator {
    width: calc(100% - 1.6rem);
  }

  .donate-page .form-group.form.receipt-on-file-group {
    gap: 0.8rem;
  }

  .donate-page .resident-consent,
  .apply-page .resident-consent {
    margin-top: 2.4rem;
    padding-top: 2.4rem;
  }

  .donate-page .resident-consent .form-subtitle,
  .apply-page .resident-consent .form-subtitle {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
  }

  .donate-page .resident-consent .receipt-helper-text,
  .apply-page .resident-consent .receipt-helper-text {
    font-size: 1.2rem;
    line-height: 1.4;
  }

  .apply-page .inner-form-group .inner-form-box span.form-label {
    font-size: 1.4rem;
  }

  .apply-page .form-field.gender-field {
    min-height: 4.4rem;
  }

  .apply-page .gender-text,
  .apply-page .receipt-helper-text {
    font-size: 1.4rem;
  }

  .join-section .form-field.join-sns-id-field {
    min-height: auto;
  }
}

/* ── 자원봉사 신청 팝업 — 모바일 표시 높이에 맞춘다 (2026-10-12) ─────────────
   모바일 브라우저 주소창이 열리거나 닫힐 때 바뀌는 실제 표시 영역을 사용한다.
   폼 내부 배치는 건드리지 않고, 외곽 팝업의 최대 높이만 오버레이 안쪽에 제한한다.
   → 옮길 곳: donate.css (DN_04P 모바일 스타일) */
@media (max-width: 768px) {
  #modal-dn_04p.modal-overlay {
    height: 100vh;
    height: 100dvh;
  }

  #modal-dn_04p .vol-popup-container {
    max-height: calc(100vh - 4.8rem);
    max-height: calc(100dvh - 4.8rem);
  }
}

/* ── 마이페이지 정기후원 카드 — 해지 계약의 빈 버튼 칸 (이슈 0000399, 2026-10-12) ──────
   진행 중이 아닌 계약은 「결제 변경」「금액 변경」 대신 「-」를 그린다. 모바일에서 표가 카드로
   접히면 이 칸들이 버튼 줄에 그대로 남아 카드 아래에 「- -」만 보였다. 모바일에서만 셀째 숨긴다
   (PC 표는 열 맞춤 때문에 그대로 둔다).
   → 옮길 곳: login.css (.donation-table td.col-action 모바일 규칙 근처) */
@media (max-width: 768px) {
  #sub-tab-content-regular .donation-table td.col-action:has(> .col-action-none) {
    display: none;
  }
}