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

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

.donate-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;
}

/* ── 갈라 신청 — 개인 「신청자 정보」 (PASS 삭제, 2026-10-15) ────────────────
   개인은 기업명·사업자등록번호를 숨기고 성함부터 그린다. 숨긴 행 뒤의 성함이
   `.form-group + .form-group` 간격을 받아 상자 맨 위가 한 칸 벌어진다 — 성함이 첫 줄이다.
   → 옮길 곳: campaign.css (.apply-page .inner-form-box 근처) */
.apply-page .inner-form-box.is-individual #groupManagerName {
  margin-top: 0;
}

/* ── 갈라 신청 — 기업 사업자등록증 사본 첨부 (2026-10-15) ─────────────────────
   퍼블 원본에 파일 첨부 모양이 없다. 파일명 칸(읽기 전용) + 「파일 첨부」 버튼을 한 줄에 두고
   실제 파일 입력은 버튼(label) 뒤에 숨긴다. 버튼은 `.btn` 의 너비 100% 를 풀어 내용 폭으로 둔다.
   → 옮길 곳: components/form.css (파일 입력 컴포넌트) */
.apply-page .gala-bizcert-field {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.2rem;
}
.apply-page .gala-bizcert-field .form-control {
  flex: 1;
  min-width: 0;
}
.apply-page .gala-bizcert-field .gala-bizcert-btn {
  width: auto;
  flex-shrink: 0;
  cursor: pointer;
}
.apply-page .gala-bizcert-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.apply-page .gala-bizcert-field:focus-within .gala-bizcert-btn {
  border-color: var(--primary);
}
/* 개인 영수증 안내의 「결제자 본인 명의」 굵게 (고객사 2026-10-19).
   base.css 가 strong 을 font-weight: normal 로 지운다 — 이 목록 안에서만 되살린다. */
.apply-page .receipt-warning-list strong {
  font-weight: 700;
}

/* ── 회원가입 — 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 {
    margin-top: 2.4rem;
    padding-top: 2.4rem;
  }

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

  .donate-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;
  }
}

/* ── 마이페이지 정기후원 빈 행 「정기 후원 내역이 없습니다.」 모바일 가운데 정렬 (2026-10-14) ──
   퍼블(3daa010)이 `.donate-none` 규칙을 donate.css 에 넣었으나 마이페이지는 login·mypage css 만
   읽는다. 또 login.css 의 카드 셀 규칙 `td:not(.col-type):not(.col-no):not(.col-action):not([data-label="No"])`
   (명시도 0,5,1) 가 `.donate-none` 을 이겨 display:flex·space-between 으로 글자가 오른쪽에 붙었다.
   테두리는 `.donation-table tr` 카드 규칙으로 이미 나온다 — 정렬·여백만 보정한다.
   → 옮길 곳: login.css (.donation-table 모바일 카드 규칙 근처, 카드 셀 선택자에 :not(.donate-none) 추가) */
@media (max-width: 768px) {
  #sub-tab-content-regular .donation-table td.donate-none {
    justify-content: center;
    text-align: center;
    padding: 2.4rem 1.6rem;
  }
}

/* ── 계정 연동 안내 — SNS 가입 회원에게 보이는 「○○ 계정으로 가입된 회원입니다.」 (2026-10-14) ────
   아이디 자리(.result-box__value, 2.8rem·모바일 2rem 디스플레이 서체)에 아이디 대신 문장을 넣는다.
   그 크기면 모바일에서 두 줄로 접혀 높이 6rem 고정 칸을 넘친다 — 문장일 때만 글자를 줄인다.
   → 옮길 곳: login.css (.result-box__value 근처, 같은 modifier 로) */
.login-card .result-box__value--text {
  font-size: 1.8rem;
}

@media (max-width: 768px) {
  .login-card .result-box__value--text {
    font-size: 1.5rem;
  }
}

/* ── 마이페이지 결제수단 변경 팝업 MP_P_02 (2026-10-15) ──────────────────────────────────
   운영 제보(pay_change_01·02.png): ① 칩 그리드 바로 아래 「결제정보를 입력해주세요.」가 붙어 겹친다 —
   form.css 는 `.payment-tabs-grid + .payment-tab-contents` 에만 3.2rem 을 준다. ② 서명 캔버스가 보이지
   않는다 — form.css 의 캔버스 규칙이 `#signatureCanvas` 아이디에 묶여 있고, 팝업 캔버스는 전역
   form-signature.js 와 이중 바인딩되지 않도록 다른 아이디(`mpP01SignatureCanvas`)를 쓴다. 같은 규칙을
   그 아이디에 준다. (제보 화면의 제목 잘림은 `.modal-scroll-wrap` 이 스크롤된 상태라 규칙이 필요 없다.)
   → 옮길 곳: ① components/form.css (.payment-tabs-grid + * 규칙), ② components/form.css
     (#signatureCanvas 선택자에 .signature-canvas 클래스 추가) */
#modal-mp_p_01 .mpP01-section-title {
  margin-top: 3.2rem;
}

#modal-mp_p_01 #mpP01SignatureCanvas {
  width: 100%;
  height: 12rem;
  box-sizing: border-box;
  cursor: crosshair;
  display: block;
  background-color: rgba(208, 201, 255, 0.2);
  border: 1px solid var(--border-color, #dddddd);
  border-radius: var(--radius-sm, 0.8rem);
  transition: border-color 0.2s ease;
}

#modal-mp_p_01 #mpP01SignatureCanvas:hover {
  border-color: var(--primary, #000000);
}

#modal-mp_p_01 #mpP01SignatureClear {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0;
}

#modal-mp_p_01 #mpP01SignatureClear .icon-reset {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  object-fit: contain;
}

/* ── 정기후원 「반영 대기」 버튼 — 목록·상세 같은 표 비활성 스타일 (Mantis 0000426, 2026-10-15) ──
   퍼블이 `.btn.disabled3`(표 비활성: 회색 글자·회색 테두리)를 만들었지만 표 버튼은 `.btn` 없이
   `.btn-table` 만 쓴다. `.btn` 을 붙이면 너비 100%·높이 5.2rem 이 따라와 버튼이 커지므로
   같은 색·테두리를 표 버튼에 잇는다. 모바일 카드의 `.donation-table td.col-action .btn-table`
   (login.css, 검은 테두리)과 명시도가 같아 이 파일의 순서로 이긴다.
   → 옮길 곳: components/button.css (.btn.disabled3 옆에 `.btn-table.disabled3`) */
.donation-table td .btn-table.disabled3,
.detail-info-table td .btn-table.disabled3 {
  color: var(--text-gray70);
  border-color: var(--border-gray70);
  background-color: transparent;
  cursor: not-allowed;
}

/* ── 갈라 신청 한/영 전환 (2026-10-27) ──────────────────────────────────────
   「참석 신청」 카드 제목 오른쪽의 한국어 / English 전환(?lang=en). 퍼블 원본에 없는 요소라 개발이 그렸다 —
   제목 줄은 이미 flex·space-between 이다(campaign.css). 모바일은 제목이 width 100% 라 전환이 줄지 않게 막는다.
   → 옮길 곳: campaign.css (.apply-page 블록) */
.apply-page .gala-lang-switch {
  display: flex;
  flex-shrink: 0;
  gap: 0.4rem;
}

.apply-page .gala-lang-switch a {
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--border-gray30);
  border-radius: 10rem;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--text-gray70);
  white-space: nowrap;
}

.apply-page .gala-lang-switch a.is-active {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--text-white);
}

/* 영문 「Donation Receipt」는 라벨 칸에서 두 줄로 꺾여 필수 표시(*)가 윗줄 끝에 홀로 남는다 — 한 줄로 둔다.
   본문 <main lang="en"> 일 때만(헤더·푸터는 국문이라 <html lang> 은 ko 다). */
main[lang="en"] .apply-page .receipt-toggle-group .radio-label {
  white-space: nowrap;
}