/* ==========================================================================
   기부금영수증 신청 [홈택스 발급] - 화면 디자인 전용 CSS
   - 기준 사이즈 : 가로 1080px
   - 반응형 구간 : PC(1080px~) / 태블릿(768px~1079px) / 모바일(~767px)
   - 메인 색상   : #2dbac4 (청록)
   - 클래스 앞머리 "dr-" = donation receipt (다른 페이지 CSS와 충돌 방지용)
   - [교회 발급] 페이지와 같은 디자인 틀을 사용합니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 기본 초기화
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{background:#fff;color:#000;font-family:'Noto Sans KR','Noto Sans CJK KR','Malgun Gothic','맑은 고딕',sans-serif;font-size:16px;line-height:1.5;}
input,select,textarea,button{font-family:inherit;color:inherit;}

/* 전체 감싸는 영역 (최대 1080px, 가운데 정렬) */
.dr-wrap{width:100%;max-width:1080px;margin:0 auto;overflow:hidden;}

/* --------------------------------------------------------------------------
   2. 상단 비주얼 (배경 이미지 : images/top_img.jpg)
   -------------------------------------------------------------------------- */
.dr-hero{display:flex;align-items:center;justify-content:center;height:191px;padding:0 10px 9px 0;border-bottom:3px solid #2dbac4;background:#222 url(/user/module/donationOut/skin001/images/top_img.jpg) no-repeat center center;background-size:cover;}
.dr-hero h2{font-size:45px;font-weight:900;line-height:1;color:#fff;letter-spacing:-0.5px;}
/* "홈택스 발급" 뱃지 */
.dr-hero .dr-badge{display:inline-block;width:112px;height:41px;margin:6px 0 0 15px;border-radius:4px;background:#2dbac4;font-size:18.5px;font-weight:700;line-height:38px;color:#fff;text-align:center;}

/* --------------------------------------------------------------------------
   3. 섹션 공통 (작성항목·기부자 / 개인정보수집동의)
      - 왼쪽 : 섹션 제목(.dr-sec-tit)  /  오른쪽 : 내용(.dr-sec-body)
      - 섹션 아래 청록색 구분선 3px
   -------------------------------------------------------------------------- */
.dr-sec{display:flex;align-items:flex-start;padding:0 6px 0 40px;border-bottom:3px solid #2dbac4;}
.dr-sec-tit{flex:0 0 200px;width:200px;min-width:0;font-size:35px;font-weight:700;line-height:1;color:#2dbac4;letter-spacing:-1.5px;white-space:nowrap;}
.dr-sec-body{flex:1;min-width:0;}

/* 섹션 1 왼쪽 제목 2개 (작성항목 / 기부자) */
.dr-sec-tits{flex:0 0 200px;width:200px;}
.dr-sec-tits .dr-sec-tit{display:block;width:auto;}
.dr-sec-tits .t2{margin-top:166px;}   /* "기부자" 제목 위치 */

.dr-sec.s1{padding-top:47px;padding-bottom:82px;}   /* 작성항목 · 기부자 */
.dr-sec.s3{padding-top:80px;padding-bottom:88px;}   /* 개인정보수집동의 */

/* --------------------------------------------------------------------------
   4. 입력 행 공통
      - .dr-row : 한 줄 (라벨 + 입력영역)
      - .dr-lbl : 항목명 / .req : 필수 표시 아이콘(청록 체크)
      - .dr-fld : 입력영역
   -------------------------------------------------------------------------- */
.dr-row{display:flex;align-items:flex-start;}
.dr-lbl{flex:0 0 150px;font-size:18px;font-weight:500;line-height:24px;color:#000;letter-spacing:-0.3px;white-space:nowrap;}
.dr-lbl .req{display:inline-block;width:12px;height:12px;margin-left:5px;vertical-align:0;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232dbac4' d='M12 1l2.6 2.2 3.4-.4 1 3.3 3 1.6-1 3.3 1 3.3-3 1.6-1 3.3-3.4-.4L12 23l-2.6-2.2-3.4.4-1-3.3-3-1.6 1-3.3-1-3.3 3-1.6 1-3.3 3.4.4z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M7.5 12.3l3 3 6-6'/%3E%3C/svg%3E") no-repeat center/contain;}
.dr-fld{flex:1;min-width:0;}

/* 입력칸 공통 : 밑줄형 */
.dr-in{display:block;width:100%;min-width:0;height:34px;padding:0 5px;border:0;border-bottom:1px solid #ccc;border-radius:0;background:transparent;font-size:14px;color:#333;outline:none;}
.dr-in:focus{border-bottom-color:#2dbac4;}
.dr-in::placeholder{color:#999;opacity:1;}
.dr-in.center{text-align:center;}   /* 가운데 정렬 입력칸 (이름) */
.w400{max-width:400px;}             /* 입력칸 최대 너비 400px */
.w150{max-width:150px;}             /* 입력칸 최대 너비 150px */

/* --------------------------------------------------------------------------
   5. 섹션 1 : 작성항목 · 기부자
   -------------------------------------------------------------------------- */
/* 이름 */
.s1 .r-name .dr-lbl{padding-top:10px;}
.s1 .r-name .dr-in{height:31px;margin-top:3px;padding-bottom:10px;}

/* 주민등록번호 : 앞 6자리 - 뒤 7자리 */
.s1 .r-jumin{margin-top:11px;}
.s1 .r-jumin .dr-lbl{padding-top:10px;}
.dr-jumin{display:flex;align-items:flex-end;}
.dr-jumin .dr-in{flex:0 0 90px;width:90px;height:34px;}
.dr-jumin .dash{flex:0 0 11px;padding-bottom:8px;font-size:14px;line-height:14px;text-align:center;}

/* 개인정보의 수집·이용에 관한 동의서 (고유식별정보) */
.dr-consent{margin:22px 0 0 150px;max-width:570px;}
.dr-consent .tit{font-size:19px;font-weight:500;line-height:24px;color:#2dbac4;letter-spacing:-0.75px;}
.dr-consent .txt{margin-top:10px;padding:10px 4px 11px 3px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;font-size:13px;line-height:19.6px;color:#000;letter-spacing:-0.4px;word-break:keep-all;}
.dr-consent .chk{margin-top:15px;}
.dr-consent .chk .dr-chk span{font-size:14px;font-weight:700;letter-spacing:-0.3px;}

/* 연락처 : 앞자리(select) - 중간(4자리) - 끝(4자리) */
.s1 .r-tel{margin-top:14px;}
.s1 .r-tel .dr-lbl{padding-top:3px;}
.dr-tel{display:flex;align-items:flex-end;width:100%;max-width:405px;height:28px;}
.dr-tel .dr-sel{position:relative;flex:0 0 128px;}
.dr-tel select{display:block;width:100%;height:28px;padding:0 20px 4px 46px;border:0;border-bottom:1px solid #ccc;border-radius:0;background:transparent;font-size:14px;color:#000;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.dr-tel .dr-sel:after{content:"";position:absolute;right:4px;top:9px;width:5px;height:5px;border-right:2px solid #000;border-bottom:2px solid #000;transform:rotate(45deg);pointer-events:none;}   /* select 화살표 */
.dr-tel .dash{flex:0 0 11px;padding-bottom:3px;font-size:14px;line-height:28px;text-align:center;}
.dr-tel .dr-in{flex:1;height:28px;}

/* 교인번호(ID) : 입력칸 + 안내문(회색) */
.s1 .r-member{margin-top:12px;}
.s1 .r-member .dr-lbl{padding-top:9px;}
.dr-member{display:flex;align-items:flex-start;}
.dr-member .dr-in{flex:0 0 150px;width:150px;height:34px;}
.dr-member .note{flex:0 0 132px;width:132px;margin:2px 0 0 115px;font-size:12.5px;line-height:15px;color:#777;letter-spacing:-0.3px;word-break:break-all;}

/* 교구 */
.s1 .r-church{margin-top:12px;}
.s1 .r-church .dr-lbl{padding-top:10px;}
.s1 .r-church .dr-in{height:33px;}

/* --------------------------------------------------------------------------
   6. 체크박스 (기본 체크박스 모양을 숨기고 디자인으로 표시)
      - 미선택 : 회색 체크 / 선택(checked) : 청록 체크
   -------------------------------------------------------------------------- */
.dr-chk{display:inline-flex;align-items:center;line-height:20px;cursor:pointer;}
.dr-chk input{position:relative;flex:0 0 auto;width:17px;height:17px;margin:0 6px 0 0;border:2px solid #d6d6d6;border-radius:2px;background:#fff;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.dr-chk input:after{content:"";position:absolute;left:4px;top:0;width:5px;height:9px;border-right:2px solid #d6d6d6;border-bottom:2px solid #d6d6d6;transform:rotate(40deg);}
.dr-chk input:checked,
.dr-chk input:checked:after{border-color:#009688;}
.dr-chk span{font-size:15px;color:#000;}
.dr-chk.bold span{font-size:16px;font-weight:700;letter-spacing:-0.1px;}   /* 동의 문구용 굵은 글씨 */

/* --------------------------------------------------------------------------
   7. 개인정보수집동의 섹션
      - .dr-sub : 소제목(청록)
      - .dr-box : 약관 내용 박스 (고정 높이 + 박스 안 스크롤)
   -------------------------------------------------------------------------- */
.s3 .dr-sec-body{flex:0 0 685px;max-width:685px;margin-left:149px;}
.dr-sub{margin-top:2px;padding-left:1px;font-size:19px;font-weight:700;line-height:20px;color:#2dbac4;letter-spacing:-0.25px;}
.dr-sub.sub2{margin-top:46px;}

.dr-box{margin-top:16px;padding:15px 10px 0 5px;border-top:1px solid #9b9b9b;border-bottom:1px solid #9b9b9b;overflow-y:scroll;font-size:13px;line-height:20px;color:#333;word-break:keep-all;scrollbar-width:thin;scrollbar-color:#b7bbc7 #ebecf0;}
.dr-box::-webkit-scrollbar{width:8px;}
.dr-box::-webkit-scrollbar-track{background:#ebecf0;}
.dr-box::-webkit-scrollbar-thumb{background:#b7bbc7;}
.dr-box.b1{height:237px;}   /* 개인정보 수집 및 이용 */
.dr-box.b2{height:152px;}   /* 개인정보 취급 위탁 */
.dr-box dt{font-size:14px;font-weight:700;color:#000;}
.dr-box dd{color:#333;}
.dr-box .lead{margin-bottom:17px;font-size:14px;font-weight:700;line-height:21px;color:#000;}

/* 동의 체크 영역 */
.dr-agree{margin-top:17px;}    /* 개인정보 수집 및 이용에 동의 */
.dr-agree2{margin-top:17px;}   /* 개인정보 취급 위탁에 동의 */
.dr-agree3{margin-top:5px;}    /* 전체동의 */

/* --------------------------------------------------------------------------
   8. 확인 버튼
   -------------------------------------------------------------------------- */
.dr-btn-area{padding:59px 0 123px;text-align:center;}
.dr-btn-ok{display:inline-block;vertical-align:top;width:242px;height:55px;padding-bottom:0;border:0;border-radius:0;background:#2dbac4;font-size:17px;font-weight:700;color:#fff;cursor:pointer;}

/* ==========================================================================
   반응형 1 : 태블릿 (1079px 이하)
   - 섹션 제목을 위로, 내용을 아래로 배치
   ========================================================================== */
@media all and (max-width:1079px){
	.dr-sec{flex-direction:column;align-items:stretch;padding:0 30px;}
	.dr-sec.s1,
	.dr-sec.s3{padding-top:45px;padding-bottom:50px;}
	.dr-sec-tit{flex:none;margin-bottom:30px;}
	.dr-sec-body{width:100%;}
	.s3 .dr-sec-body{flex:none;width:100%;max-width:none;margin-left:0;}

	/* 작성항목 / 기부자 제목 : 위아래로 붙여서 표시 */
	.dr-sec-tits{flex:none;width:auto;margin-bottom:30px;}
	.dr-sec-tits .dr-sec-tit{margin-bottom:0;}
	.dr-sec-tits .t2{margin-top:10px;}

	.dr-box{padding-right:12px;}
}

/* ==========================================================================
   반응형 2 : 모바일 (767px 이하)
   - 라벨 위 / 입력칸 아래, 입력칸은 화면 너비에 맞춤
   ========================================================================== */
@media all and (max-width:767px){
	/* 상단 비주얼 */
	.dr-hero{flex-wrap:wrap;height:auto;min-height:130px;padding:30px 16px 33px;}
	.dr-hero h2{font-size:30px;}
	.dr-hero .dr-badge{width:auto;height:32px;margin-left:12px;padding:0 12px;font-size:14px;line-height:32px;}

	/* 섹션 */
	.dr-sec{padding:0 16px;}
	.dr-sec.s1,
	.dr-sec.s3{padding-top:35px;padding-bottom:40px;}
	.dr-sec-tit{margin-bottom:22px;font-size:26px;}
	.dr-sec-tits{margin-bottom:22px;}
	.dr-sec-tits .t2{margin-top:8px;}

	/* 입력 행 : 세로 배치 */
	.dr-row{display:block;height:auto !important;margin-top:0 !important;}
	.dr-row + .dr-row,
	.dr-consent + .dr-row{margin-top:22px !important;}
	.dr-lbl{display:block;margin-bottom:6px;padding-top:0 !important;font-size:16px;}
	.w400,
	.w150{max-width:none;}
	.s1 .r-name .dr-in{height:36px;margin-top:0;padding-bottom:0;}

	/* 주민등록번호 */
	.dr-jumin .dr-in{flex:1;width:auto;}
	.dr-jumin .dash{flex:0 0 16px;padding-bottom:12px;}

	/* 고유식별정보 동의서 */
	.dr-consent{margin:26px 0 0 0;max-width:none;}
	.dr-consent .tit{font-size:16px;line-height:22px;}

	/* 연락처 */
	.dr-tel{max-width:none;height:auto;}
	.dr-tel .dr-sel{flex:0 0 96px;}
	.dr-tel select{height:36px;padding-left:28px;}
	.dr-tel .dr-sel:after{top:13px;}
	.dr-tel .dr-in{height:36px;}
	.dr-tel .dash{padding-bottom:0;line-height:36px;}

	/* 교인번호(ID) : 입력칸 아래 안내문 */
	.dr-member{display:block;}
	.dr-member .dr-in{width:100%;}
	.dr-member .note{width:auto;margin:6px 0 0 0;font-size:12px;line-height:16px;word-break:keep-all;}

	/* 개인정보 */
	.dr-sub{font-size:17px;}
	.dr-sub.sub2{margin-top:40px;}
	.dr-box.b1{height:260px;}
	.dr-box.b2{height:auto;max-height:240px;padding-bottom:12px;}
	.dr-chk.bold span{font-size:15px;}

	/* 확인 버튼 */
	.dr-btn-area{padding:40px 16px 30px;}
	.dr-btn-ok{width:100%;max-width:242px;height:50px;}
}