@charset "utf-8";
/* ==========================================================================
   콘텐츠 이용 의견 조사 팝업 (/common/commonContentSurveyPopup.jsp 전용)
   - sub.css(?20260311) 에 남아 있는 1라운드 .content_survey_* / .cs_* 규칙(최대 0,3,0)을
     #contentSurveyPop / #contentSurveyDim ID 선택자로 덮어씀(로드 순서·캐시와 무관하게 우선).
     구 규칙이 지정한 속성은 아래에서 모두 다시 지정함(PC·767px 이하 모두).
   - 색상(사이트 기존 값 재사용)
     #fcb038 : 주황(배경·강조선) - common.css .header nav li:hover, sub.css/main.css #gnb hover
     #e8520f : 진한 주황(흰 배경 위 글자) - sub.css .list_wrap .tit strong, main.css .list_wrap h2 strong
     #fff9ef : 선택 보기 배경 / #f5f5f5 : 보기 배경 / #e8e8e8 : 구분 배지 배경 / #e5e5e5 : 구분선
   - 주황(#fcb038) 위 글자는 대비 확보를 위해 흰색 대신 #222 사용
   ========================================================================== */

/* 딤 */
#contentSurveyDim {display: none;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: #000;opacity: 0.5;filter: alpha(opacity=50);z-index: 9998;}

/* 팝업 (스크롤 컨테이너 : contentArticle.jsp 에서 $("#contentSurveyPop").scrollTop(0)) */
#contentSurveyPop {display: none;background-color: #fff;width: 860px;max-width: calc(100% - 40px);max-height: 90%;overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;border: 0;border-radius: 20px;-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);position: fixed;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);z-index: 9999;-webkit-box-sizing: border-box;box-sizing: border-box;text-align: left;color: #222;}
#contentSurveyPop * {-webkit-box-sizing: border-box;box-sizing: border-box;}
#contentSurveyPop .content_survey_pop_in {position: relative;padding: 36px 40px 36px 40px;}

/* 화면낭독 전용 텍스트 */
#contentSurveyPop .cs_blind {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}

/* 닫기(X) */
#contentSurveyPop .cs_close {position: absolute;right: 28px;top: 28px;width: 40px;height: 40px;line-height: normal;padding: 0;margin: 0;border: 0;border-radius: 50%;font-size: 0;color: #222;font-weight: 400;text-align: center;background-color: transparent;cursor: pointer;}
#contentSurveyPop .cs_close .cs_close_ico {position: absolute;left: 50%;top: 50%;width: 24px;height: 24px;margin: -12px 0 0 -12px;}
#contentSurveyPop .cs_close .cs_close_ico:before,
#contentSurveyPop .cs_close .cs_close_ico:after {content: "";position: absolute;left: 0;top: 11px;width: 24px;height: 2px;background-color: #222;}
#contentSurveyPop .cs_close .cs_close_ico:before {-webkit-transform: rotate(45deg);transform: rotate(45deg);}
#contentSurveyPop .cs_close .cs_close_ico:after {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
#contentSurveyPop .cs_close:hover {background-color: #f5f5f5;}

/* 로고·제목·안내문 */
#contentSurveyPop .cs_logo {margin: 0 0 14px 0;padding: 0;line-height: 0;}
#contentSurveyPop .cs_logo img {width: auto;height: 36px;border: 0;}
#contentSurveyPop .cs_tit {font-size: 30px;color: #222;font-weight: 700;line-height: 1.3;letter-spacing: -1px;border: 0;padding: 0;margin: 0 0 12px 0;}
#contentSurveyPop .cs_tit .cs_point {color: #e8520f;}
#contentSurveyPop .cs_desc {font-size: 16px;color: #444;line-height: 1.6;margin: 0 0 12px 0;padding: 0;}
#contentSurveyPop .cs_desc .cs_point {color: #e8520f;font-weight: 700;}

/* 구분(콘텐츠 효과성 / 응답자 정보) */
#contentSurveyPop .cs_section {margin: 0;padding: 11px 0 4px 0;border-top: 1px solid #e5e5e5;}
#contentSurveyPop .cs_sec_tit {display: inline-block;font-size: 15px;color: #333;font-weight: 700;line-height: 1.4;margin: 0 0 14px 0;padding: 5px 14px;background-color: #e8e8e8;border-radius: 14px;}

/* 문항 */
#contentSurveyPop .cs_question {border: 0;margin: 0;padding: 0;min-width: 0;}
#contentSurveyPop .cs_question .cs_qq {display: block;position: relative;width: 100%;font-size: 16px;color: #222;font-weight: 700;line-height: 1.5;padding: 0 0 0 32px;margin: 0;border: 0;white-space: normal;}
#contentSurveyPop .cs_num {position: absolute;left: 0;top: 0;display: inline-block;width: 24px;height: 24px;line-height: 24px;border-radius: 50%;background-color: #fcb038;color: #222;font-size: 13px;font-weight: 700;text-align: center;}
#contentSurveyPop .cs_req {color: #e8520f;}
#contentSurveyPop .cs_question .cs_aa {display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;flex-wrap: wrap;font-size: 14px;color: #333;font-weight: 400;padding: 8px 0 10px 14px;margin: 0 -3px;}

/* 보기 : native radio 를 보기 안쪽 왼쪽에 그대로 노출(키보드·포커스 유지), label 을 알약 버튼으로
   - .cs_aa(flex, align-items 기본 stretch)가 .cs_opt 를 같은 줄 최대 높이로 늘림
     → .cs_opt 도 flex 로 만들어 label 이 .cs_opt 높이를 꽉 채우게 함(같은 줄 알약 높이 동일)
     → label 자체도 flex + 세로 가운데 정렬로 글자를 알약 세로 중앙에 둠
     → radio(top:50% of .cs_opt) 와 알약 중앙(.cs_opt 상하 padding 동일)이 같은 세로 중앙선
   - PC 860px 기준 효과성 1칸 = (780 + 6 - 14) / 5 = 154.4px, 글자 영역 = 154.4 - 6 - 4 - 40 = 104.4px
     (「전혀 그렇지 않다」 14px 한 줄 약 95~98px) */
#contentSurveyPop .cs_opt {display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-align: stretch;-webkit-align-items: stretch;align-items: stretch;position: relative;margin: 0;padding: 3px;white-space: normal;-ms-flex: 0 0 20%;-webkit-flex: 0 0 20%;flex: 0 0 20%;max-width: 20%;}
#contentSurveyPop .cs_aa_gender .cs_opt {-ms-flex: 0 0 auto;-webkit-flex: 0 0 auto;flex: 0 0 auto;max-width: none;}
#contentSurveyPop .cs_aa_age .cs_opt {-ms-flex: 0 0 33.3333%;-webkit-flex: 0 0 33.3333%;flex: 0 0 33.3333%;max-width: 33.3333%;}
#contentSurveyPop .cs_opt input {position: absolute;left: 13px;top: 50%;width: 16px;height: 16px;margin: -8px 0 0 0;padding: 0;vertical-align: middle;z-index: 1;cursor: pointer;opacity: 1;-webkit-appearance: radio;-moz-appearance: radio;appearance: auto;accent-color: #e8520f;}
#contentSurveyPop .cs_opt label {display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-align: center;-webkit-align-items: center;align-items: center;-ms-flex: 1 1 auto;-webkit-flex: 1 1 auto;flex: 1 1 auto;min-width: 0;position: relative;min-height: 42px;padding: 10px 8px 10px 32px;margin: 0;font-size: 14px;color: #333;font-weight: 400;line-height: 1.4;vertical-align: middle;text-align: left;word-break: keep-all;background-color: #f5f5f5;border: 2px solid #f5f5f5;border-radius: 21px;cursor: pointer;-webkit-transition: background-color 0.15s, border-color 0.15s;transition: background-color 0.15s, border-color 0.15s;}
#contentSurveyPop .cs_aa_gender .cs_opt label {white-space: nowrap;}
#contentSurveyPop .cs_opt label:hover {border-color: #fcb038;}
/* 선택 상태 : 배경 + 진한 테두리 + 굵은 글자 (색 외 구분) */
#contentSurveyPop .cs_opt input:checked + label {background-color: #fff9ef;border-color: #e8520f;color: #222;font-weight: 700;}
/* 포커스 : 보기 전체 테두리 + radio 자체 outline */
#contentSurveyPop .cs_opt input:focus {outline: 2px solid #000;outline-offset: 2px;}
#contentSurveyPop .cs_opt input:focus + label {outline: 3px solid #000;outline-offset: 2px;}

/* 응답자 정보 2단 (성별 | 연령) */
#contentSurveyPop .cs_resp_row {display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-align: start;-webkit-align-items: flex-start;align-items: flex-start;}
#contentSurveyPop .cs_resp_row .cs_col_gender {-ms-flex: 0 0 44%;-webkit-flex: 0 0 44%;flex: 0 0 44%;max-width: 44%;padding-right: 20px;}
#contentSurveyPop .cs_resp_row .cs_col_age {-ms-flex: 1 1 auto;-webkit-flex: 1 1 auto;flex: 1 1 auto;min-width: 0;padding-left: 20px;border-left: 1px solid #e5e5e5;}

/* 제출하기 */
#contentSurveyPop .cs_btn_area {text-align: center;padding: 16px 0 0 0;margin: 0;}
#contentSurveyPop .cs_submit {display: inline-block;width: auto;min-width: 220px;height: 52px;line-height: 52px;padding: 0 36px;margin: 0;border: 0;border-radius: 26px;font-size: 18px;color: #222;font-weight: 700;text-align: center;background-color: #fcb038;cursor: pointer;-webkit-box-shadow: 0 4px 10px rgba(252, 176, 56, 0.35);box-shadow: 0 4px 10px rgba(252, 176, 56, 0.35);}
#contentSurveyPop .cs_submit .cs_arrow {display: inline-block;margin-left: 8px;}
#contentSurveyPop .cs_submit:hover {-webkit-box-shadow: 0 4px 14px rgba(232, 82, 15, 0.45);box-shadow: 0 4px 14px rgba(232, 82, 15, 0.45);}

/* 버튼 포커스 */
#contentSurveyPop .cs_close:focus,
#contentSurveyPop .cs_submit:focus {outline: 3px solid #000;outline-offset: 2px;}

/* ==========================================================================
   모바일 (sub.css 와 같은 기준 767px)
   ========================================================================== */
@media (max-width: 767px) {
	#contentSurveyPop {width: calc(100% - 20px);max-width: none;max-height: 85%;border-radius: 16px;}
	#contentSurveyPop .content_survey_pop_in {padding: 22px 16px 22px 16px;}
	#contentSurveyPop .cs_close {right: 12px;top: 12px;width: 40px;height: 40px;line-height: normal;font-size: 0;}
	#contentSurveyPop .cs_logo {margin-bottom: 10px;}
	#contentSurveyPop .cs_logo img {height: 28px;}
	#contentSurveyPop .cs_tit {font-size: 22px;padding: 0;margin-bottom: 8px;}
	#contentSurveyPop .cs_desc {font-size: 14px;margin-bottom: 16px;}
	#contentSurveyPop .cs_section {padding-top: 16px;}
	#contentSurveyPop .cs_sec_tit {font-size: 14px;margin-bottom: 10px;}
	#contentSurveyPop .cs_question .cs_qq {font-size: 14px;padding-left: 28px;}
	#contentSurveyPop .cs_num {width: 22px;height: 22px;line-height: 22px;font-size: 12px;}
	#contentSurveyPop .cs_question .cs_aa {font-size: 13px;padding: 8px 0 14px 0;margin: 0 -3px;}
	/* 효과성 보기 : 3개씩 줄바꿈 (480px 이하 2개씩) */
	#contentSurveyPop .cs_opt {padding: 3px;-ms-flex: 0 0 33.3333%;-webkit-flex: 0 0 33.3333%;flex: 0 0 33.3333%;max-width: 33.3333%;}
	#contentSurveyPop .cs_opt input {left: 13px;}
	/* 정렬은 PC 규칙(.cs_opt·label flex + 세로 가운데) 그대로 상속 */
	#contentSurveyPop .cs_opt label {min-height: 38px;padding: 8px 8px 8px 30px;font-size: 13px;border-radius: 19px;}
	/* 성별 보기 : 글자 길이만큼 차지 + 남는 폭 분배, 「응답하지 않음」 줄바꿈 방지(320px 이하는 보기 단위로 다음 줄) */
	#contentSurveyPop .cs_aa_gender .cs_opt {-ms-flex: 1 1 auto;-webkit-flex: 1 1 auto;flex: 1 1 auto;max-width: none;}
	#contentSurveyPop .cs_aa_gender .cs_opt label {white-space: nowrap;}
	/* 응답자 정보 1단 */
	#contentSurveyPop .cs_resp_row {display: block;}
	#contentSurveyPop .cs_resp_row .cs_col_gender,
	#contentSurveyPop .cs_resp_row .cs_col_age {max-width: none;width: 100%;padding: 0;border-left: 0;}
	#contentSurveyPop .cs_btn_area {padding-top: 10px;}
	#contentSurveyPop .cs_submit {min-width: 180px;height: 46px;line-height: 46px;font-size: 16px;}
}
@media (max-width: 480px) {
	#contentSurveyPop .cs_aa_score .cs_opt,
	#contentSurveyPop .cs_aa_age .cs_opt {-ms-flex: 0 0 50%;-webkit-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}
}