/* ============================================================
   색 모음 - 여기 값만 바꾸면 설문 전체에 적용됩니다.
   같은 색이 반응형 구간마다 여러 번 나오므로, 아래 이름을 쓰면
   한 곳만 고쳐도 됩니다. 바꾼 뒤에는 각 페이지의 style.css?v= 숫자를
   올려야 브라우저가 새 파일을 받습니다.
   ============================================================ */
:root {
	--aging-title-bg:      #ece5de;   /* 섹션 제목 바 배경 */
	--aging-title-fg:      #626262;   /* 섹션 제목 바 글자 */

	--aging-row-bg:        #fffaf3;   /* 문항 줄 배경 */

	--aging-num-bg:        #fff0df;   /* 숫자 동그라미 (안 고른 것) */
	--aging-num-border:    #c0ab99;   /* 숫자 동그라미 테두리 */
	--aging-picked-bg:     #E2FF6F;   /* 고른 숫자 배경 */
	--aging-picked-fg:     #626262;   /* 고른 숫자 글자 */

	--aging-btn-bg:        #fff0df;   /* 이전·다음 버튼 배경 */
	--aging-btn-border:    #c0ab99;   /* 이전·다음 버튼 테두리 */
	--aging-btn-fg:        #1f1711;   /* 이전·다음 버튼 글자 */
	--aging-btn-hover-bg:  #D8D19C;   /* 버튼에 마우스 올렸을 때 배경 */
	--aging-btn-hover-fg:  #332d27;   /* 버튼에 마우스 올렸을 때 글자 */

	--aging-nav-bg:        #fffaf3;   /* 하단 이동 바 배경 */
	--aging-nav-border:    #b87745;   /* 하단 이동 바 테두리 */
	--aging-nav-fg:        #332d27;   /* 하단 이동 바 글자 */

	--aging-tip-bg:        #E2FF6F;   /* 툴팁 배경 */
	--aging-tip-fg:        #626262;   /* 툴팁 글자 */
	--aging-tip-border:    #99CC00;   /* 툴팁 테두리 */
}

	@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);

	@media all and (min-width:300px){ 
		body { font-family:'Nanum Gothic', ng; font-size: 50px; background-color:#ffffff; margin: 0px} 
		#guide { padding:10px; margin:10px; border:1px solid #e3e3e3; line-height: 57px;}
		#left_space { padding-left:20%;}
		input[type=radio] + label {	padding: 17px; }
		#pre_btn { display:inline-block; width:250px; padding:30px 0px 30px 0px; margin:5px; background-color:var(--aging-btn-bg); border:2px solid var(--aging-btn-border); color:var(--aging-btn-fg); border-radius:50px 0px 0px 50px;}
		#now_btn { display:inline-block; width:250px; padding:30px 0px 30px 0px; margin:5px;}
		#nxt_btn { display:inline-block; width:250px; padding:30px 0px 30px 0px; margin:5px; background-color:var(--aging-btn-bg); border:2px solid var(--aging-btn-border); color:var(--aging-btn-fg); border-radius:0px 50px 50px 0px;}
		.question1 { display:block; padding:5px; background-color:var(--aging-row-bg); border:1px solid #e3e3e3; line-height: 50px;}
		.question2 { display:block; padding:5px; background-color:#FFFFFF; border:1px solid #e3e3e3; line-height: 50px;}
		.tooltiplayer { font-size: 20px; }
		#foot_line { display:block; width:940px; border-radius:5px; padding:5px; margin:auto; color:#676767; text-align:center; font-size: 26px;}
		#nav_line { text-align:center; padding:20px 0px 20px 0px; border-radius:20px; background-color:var(--aging-nav-bg); border:2px solid var(--aging-nav-border); color:var(--aging-nav-fg);}
		.sel_line { text-align:center; padding:5px; font-size: 26px; border-radius:5px;}
	}
	@media all and (min-width:700px){ 
		body { font-family:'Nanum Gothic', ng; font-size: 40px; background-color:#ffffff; margin: 0px}
		#guide { padding:10px; margin:10px; border:1px solid #e3e3e3; line-height: 47px;}
		#left_space { padding-left:30%;}
		input[type=radio] + label {	padding: 13px 15px; }
		#pre_btn { display:inline-block; width:250px; padding:20px 0px 20px 0px; margin:5px; background-color:var(--aging-btn-bg); border:2px solid var(--aging-btn-border); color:var(--aging-btn-fg); border-radius:40px 0px 0px 40px;}
		#now_btn { display:inline-block; width:250px; padding:20px 0px 20px 0px; margin:5px;}
		#nxt_btn { display:inline-block; width:250px; padding:20px 0px 20px 0px; margin:5px; background-color:var(--aging-btn-bg); border:2px solid var(--aging-btn-border); color:var(--aging-btn-fg); border-radius:0px 40px 40px 0px;}
		.question1 { display:block; padding:5px; background-color:var(--aging-row-bg); border:1px solid #e3e3e3; line-height: 40px;}
		.question2 { display:block; padding:5px; background-color:#FFFFFF; border:1px solid #e3e3e3; line-height: 40px;}
		.tooltiplayer { font-size: 19px; }
		#foot_line { display:block; width:940px; border-radius:5px; padding:5px; margin:auto; color:#676767; text-align:center; font-size: 22px;}
		#nav_line { text-align:center; padding:15px 0px 15px 0px; border-radius:15px; background-color:var(--aging-nav-bg); border:2px solid var(--aging-nav-border); color:var(--aging-nav-fg);}
		.sel_line { text-align:center; padding:10px; font-size: 30px; border-radius:15px;}
	}
	@media all and (min-width:1000px){
		body { font-family:'Nanum Gothic', ng; font-size: 20px; background-color:#ffffff; margin: 0px}
		#guide { padding:10px; margin:10px; border:1px solid #e3e3e3; line-height: 27px;}
		#left_space { padding-left:50%;}
		input[type=radio] + label {	padding: 4px 12px; }
		#pre_btn { display:inline-block; width:250px; padding:15px 0px 15px 0px; margin:5px; background-color:var(--aging-btn-bg); border:2px solid var(--aging-btn-border); color:var(--aging-btn-fg); border-radius:20px 0px 0px 20px;}
		#now_btn { display:inline-block; width:250px; padding:15px 0px 15px 0px; margin:5px;}
		#nxt_btn { display:inline-block; width:250px; padding:15px 0px 15px 0px; margin:5px; background-color:var(--aging-btn-bg); border:2px solid var(--aging-btn-border); color:var(--aging-btn-fg); border-radius:0px 20px 20px 0px;}
		.question1 { display:block; padding:5px; background-color:var(--aging-row-bg); border:1px solid #e3e3e3; line-height: 30px;}
		.question2 { display:block; padding:5px; background-color:#FFFFFF; border:1px solid #e3e3e3; line-height: 30px;}
		.tooltiplayer { font-size: 17px; }
		#foot_line { display:block; width:940px; border-radius:5px; padding:5px; margin:auto; color:#676767; text-align:center; font-size: 16px;}
		#nav_line { text-align:center; padding:10px 0px 10px 0px; border-radius:10px; background-color:var(--aging-nav-bg); border:2px solid var(--aging-nav-border); color:var(--aging-nav-fg);}
		.sel_line { text-align:center; padding:5px; font-size: 20px; border-radius:10px;}
	}

	table{ width:940px; margin: auto; border: 0px;}
	#score_table2 tr td, th { border:1px solid #e3e3e3; padding:5px; text-align:center;}
	#score_table tr td, th { border:1px solid #e3e3e3; padding:5px;}

	#blank_line { display:inline-block; background-color:#FFFFFF; padding:5px;}
	#blank_center { display:block; background-color:#FFFFFF; padding:5px; text-align:center;}

	/* 서브 배너와 첫 섹션 제목 바 사이 여백 (한 줄 정도) */
	#content { padding-top: 30px; }

	#title_line { border-radius:10px; padding:8px 5px; background-color:var(--aging-title-bg); text-align:center; color:var(--aging-title-fg); font-weight:700;}
	#title_subline { border-radius:5px; padding:1px 1px 1px 10px; background-color:#D6FFAC; color:#676767;}

	#header { display:inline-block; width:100%; background-color:#FFFFFF; padding:0px; text-align:center;}
	#header_in { display:inline-block; width:940px ; border-radius:5px; padding:5px; margin:auto; background-color:#FFFFFF; color:#676767;  font-size: 14px; text-align:left;}
	#footer { display:block; width:100%; background-color:#FFFFFF; padding:0px; text-align:center; background-color:#E1E1E1; }
	#footer_in { display:block; width:940px; border-radius:5px; padding:5px; margin:auto; color:#676767; text-align:center;}

	#pre_btn:hover { background-color:var(--aging-btn-hover-bg);color:var(--aging-btn-hover-fg);}
	#nxt_btn:hover { background-color:var(--aging-btn-hover-bg);color:var(--aging-btn-hover-fg);}

	.q_in1 { display:inline-block; width:500px; vertical-align:middle; text-indent: -40px; padding:0 0 0 35px; margin:3px 3px 3px 20px; border:0px solid #e3e3e3;}
	.q_in2 { display:inline-block; width:330px; vertical-align:middle; padding:0 0 0 15px; margin:3px; border:0px solid #e3e3e3; }
	.q_in3 { display:inline-block; padding:5px; margin:3px; border:1px solid #e3e3e3; background-color:#EBEBEB; border-radius:5px;}
	.q_in4 { display:block; vertical-align:middle; padding:0 0 0 10px; margin:3px; border:0px solid #e3e3e3; }
	.q_in5 { display:block; vertical-align:middle; padding:0 0 0 40px; margin:3px; border:0px solid #e3e3e3; }
	.q_in6 { display:block; vertical-align:middle; text-indent: -45px; padding:0 0 0 80px; margin:3px; border:0px solid #e3e3e3; }

	input[type=radio] {
		display:none;
	}
	 
	input[type=radio] + label {
		display:inline-block;
		margin:-2px;
		border-radius: 25px;
		margin-bottom: 0;
		line-height: 25px;
		color: #333;
		text-align: center;
		text-shadow: 0 1px 1px rgba(255,255,255,0.75);
		vertical-align: middle;
		cursor: pointer;
		border: 2px solid #000000;
		border-color: #e6e6e6 #e6e6e6 #bfbfbf;
		border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
		border-bottom-color: #e0b789;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		background-color:var(--aging-num-bg);
	}
	 
	input[type=radio]:checked + label {
		background-image: none;
		outline: 0;
		-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
		-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
		box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
		background-color:var(--aging-picked-bg);
		color:var(--aging-picked-fg);
		font-weight:700;
	}


	#tooltiplayer { display: none; }
	.tooltip_text{ display: none; }
	.tooltiplayer { 
		pointer-events: none;
		opacity: 0;
		display: inline-block;
		padding: 7px 15px;
		border-radius: 25px;
		/* 툴팁은 문항 표보다 HTML 앞에 있어, z-index 가 없으면
		   나중에 나오는 문항 줄이 위로 올라와 가린다. */
		z-index: 9999;
		/* 툴팁은 #content 밖에 있어 다른 글꼴을 물려받는다.
		   문항과 같아 보이도록 사이트 공통 글꼴을 명시한다. */
		font-family: "Open Sans", "나눔바른고딕", NanumBarunGothic, ng, "맑은 고딕", "Malgun Gothic", 돋움, Dotum, "앱플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", AppleGothic, Helvetica, sans-serif;
		/* JS 가 화면 좌표로 위치를 잡으므로 여백이 있으면 그만큼 어긋난다. */
		margin: 0;
		color: var(--aging-tip-fg);
		text-align: center;
		vertical-align: middle; 
		font-stretch: condensed;
		text-decoration: none;
		text-transform: uppercase;
		box-shadow: 0 4px 12px rgba(53,45,36,0.25);
		background: var(--aging-tip-bg);
		border: 2px solid var(--aging-tip-border);
	}
	.arrow {
		display:block;
		opacity: 1;
		width: 5px;
		height: 8px;
		overflow: hidden;
		position: absolute;
		left: 55%;
		margin-left: 0px;
		bottom: -10px;
		background: var(--aging-tip-bg);
		border: 1px solid var(--aging-tip-border);
	}

	#sn_box {display:block; padding:0px; margin:0px; text-align:center;}
	#sns_box {
		display:inline-block;
		width: 15%;
		height: auto;
		margin: 10px;
		padding: 5px 5px;
		margin-bottom: 0;
		text-shadow: 0 1px 1px rgba(255,255,255,0.75);
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
		background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
		background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
		background-image: -o-linear-gradient(top,#fff,#e6e6e6);
		background-image: linear-gradient(to bottom,#fff,#e6e6e6);
		background-repeat: repeat-x;
		border: 2px solid #e6e6e6;
		border-radius: 5px;
		border-color: #e6e6e6 #e6e6e6 #e6e6e6;
		border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
		border-bottom-color: #e6e6e6;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	}
	#nav_box3 {
		display:inline-block;
		width: 45%;
		height: auto;
		margin: 5px;
		padding: 5px;
		margin-bottom: 0;
		text-shadow: 0 1px 1px rgba(255,255,255,0.75);
		text-align: center;
		line-height: 40px;
		vertical-align: middle;
		cursor: pointer;
		background-image: -moz-linear-gradient(top,#fff,#e0b789);
		background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#fff0df));
		background-image: -webkit-linear-gradient(top,#fff,#e0b789);
		background-image: -o-linear-gradient(top,#fff,#e0b789);
		background-image: linear-gradient(to bottom,#fff,#e0b789);
		background-repeat: repeat-x;
		border: 2px solid #e0b789;
		border-radius: 25px;
		border-color: #e0b789 #e0b789 #e0b789;
		border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
		border-bottom-color: #e0b789;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	}

	#nav_box4 {
		display:inline-block;
		width: 45%;
		height: auto;
		margin: 5px;
		padding: 5px;
		margin-bottom: 0;
		text-shadow: 0 1px 1px rgba(255,255,255,0.75);
		text-align: center;
		line-height: 40px;
		vertical-align: middle;
		background-image: -moz-linear-gradient(top,#fff,#fff0df);
		background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#fff0df));
		background-image: -webkit-linear-gradient(top,#fff,#fff0df);
		background-image: -o-linear-gradient(top,#fff,#fff0df);
		background-image: linear-gradient(to bottom,#fff,#fff0df);
		background-repeat: repeat-x;
		border: 2px solid #c0ab99;
		border-radius: 25px;
		border-color: #c0ab99 #c0ab99 #c0ab99;
		border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
		border-bottom-color: #c0ab99;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	}

	#nav_box3:hover {
		background-image: none;
		outline: 0;
		-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
		-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
		box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
		background-color:var(--aging-picked-bg);
		color:var(--aging-picked-fg);
	}