@charset "utf-8";

.popup {
	position: fixed; /*팝업 전체를 콘텐츠보다 위로 띄움*/
    /*dimmed 영역이 콘텐츠가 길어질때 같이 길어지게 하기 위해 relative대신 fixed 사용. fixed는 뷰포트, 즉 현재 보이는 브라우저 화면 사이즈를 기준으로 하기 때문에 스크롤을 내려도 딤드 레이어가 노출됨*/
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 210;
}

.popup_layer {
	position: relative; /*z-index는 반드시 position:relative 속성 필요*/
	width: 300px;
	min-height: 150px; /*min-height로 되어있어서 텍스트가 길어짐에 따라 높이가 커짐*/
	padding-bottom: 50px; /*텍스트를 온전히 보이게 하기 위해 버튼 부분을 padding으로 밀어줌*/
	background: #fff;
	z-index: 210; /*dimmed보다 z-index 높힘*/
}

.text_area {
	padding: 50px 30px 30px;
	text-align: center
}

.btn_area {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50px;
	overflow: hidden; /*float 해제*/
}

.btn {
	float: left;
	width: 50%;
	height: 100%;
	font-size: 15px;
	font-weight: bold;
	border: 0;
	background: pink;
    /*button태그의 기본 속성 : box-sizing:border-box;
    따라서 기본적으로 width값 안에 border영역까지 포함됨*/
}

.btn.no {
	background: lightblue;
}

.popup_dimmed {
	position: absolute; /*띄워줌*/
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #000;
	opacity: 0.3;
	z-index: 200;
}