{##}
{% extends 'layout/layout_kc.html' %}
{% block content %}
{% autoescape false %}
{#
__THEME_URL_COMMON : 공통 경로
__THEME_URL : 테마경로
#}
<style>
	.section_login {
    width: 100%;
		max-width: 500px;
		margin: 0 auto;
    padding: 50px 9.3vw 150px;
    box-sizing: border-box;
	}
	.section_login .title{
		padding-bottom:17px;
		text-align: center;
		position:relative;
	}
	.section_login .title .head {
		font-weight:bold;
		font-size:30px;
		line-height:40px;
		color:#202122;
	}
	.section_login .title .comm{float:right;color:#8c98af;letter-spacing: -1px;font-size:15px;line-height:14px;}
	.section_login .input_frame {
		padding-bottom: 9px;
	}
	.section_login .input_frame input{
		display: block;
    width: 100%;
    padding: 20px;
    background-color: #F2F6FA;
    border-radius: 20px;
    border: 1px solid #C3CFDB;
    box-sizing: border-box;
    outline: none;
    font-size: 15px;
    font-weight: 600;
    color: #3D4147;
    letter-spacing: 0;
    height: 66px;
	}
	.fl.custom_chk1 {
    margin-left: 5.8vw;
		flex: none;
	}
	.btn_frame {
    display: flex;
    align-items: center;
		margin-top: 11px;
	}
	.section_login .input_frame input:focus {
		outline:none;
		border:1px solid #000;	
	}
	.section_login .btn_frame .login_btn{
    display: flex;
		align-items: center;
		justify-content: center;
    width: 100%;
    height: 66px;
    border: 0;
    border-radius: 20px;
    background-color: #1786F1;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    max-width: 48.8vw;
    letter-spacing: 0;
	}
	.loginState {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
	.custom_chk1 input[type=checkbox] {
		display: none;
	}
	.custom_chk1 input[type=checkbox] + label{
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: #A0A9B4;
    cursor: pointer;
	}
	.custom_chk1 input[type=checkbox] + label span{
		position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
		border: 2px solid #B5D5EE;
		border-radius: 6px;
    background: url("{{__THEME_URL}}/img_kc/v1/chk_lightblue.svg") no-repeat center / auto;
		box-sizing: border-box;
	}
	.custom_chk1 input[type=checkbox]:checked + label span{
		background-image: url("{{__THEME_URL}}/img_kc/v1/chked_yello.svg");
		background-color: #0161D1;
		border-color: #0161D1;
	}
	.custom_chk1 input[type=checkbox]:checked + label {
    font-weight: 700;
	}
	.section_login .lostfound{
		display: flex;
    justify-content: center;
    width: 100%;
		color:#8c98af;
	}
	.section_login .lostfound a{
    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: #494E53;
    letter-spacing: 0;
	}
	.section_login .lostfound a + a {
    margin-left: min(6.98vw,30px);
	}
	.section_login .lostfound a:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    box-sizing: border-box;
    background: #1786F1;
    border-radius: 50%;
    margin-right: 6px;
    position: absolute;
    left: -10px;
    top: 49%;
    transform: translateY(-50%);
	}
	.section_login .lostfound a:last-child {
    font-weight: bold;
    color: #005FCD;
	}
	input::placeholder {
	  color: #a4abc0;
	}
	.btn_Sns{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	.btn_Sns a {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
		font-size: min(3.26vw,14px);
    letter-spacing: 0;
    color: #2F3337;
    line-height: 20px;
	}
	.area {
		width: 100%;
		margin-top: 40px;
    border-top: 1px dashed #0161D1;
    padding: 0;
	}
	.area ul {
    display: flex;
    align-items: center;
		justify-content: space-between;
	}
	.area strong{
    display: block;
    margin-bottom: 8px;
    line-height: 30px;
    letter-spacing: 0;
    text-align: center;
    color: #B8BBBD;
    font-size: 14px;
    font-weight: bold;
    margin-top: 38px;
    margin-bottom: 13px;
	}
	.area li {
		padding:0;
		box-sizing: border-box;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	.btn_Sns [class^="icon"] {
		border-radius: 50%;
    width: 56px;
    height: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
	}
	.iconK {
		background: #F9E000;
	}
	.iconN {
		background: #03C75A;
	}

	@media screen and (max-width: 410px) {
		.btn_Sns a {
			word-break: keep-all;
		}
	}
	@media screen and (max-width: 370px) {
		.btn_Sns [class^="icon"] {
			width: 45px;
			height: 45px;
			margin-right: 8px;
		}
		.btn_Sns [class^="icon"] img {
			width: 16px;
			height: 16px;
		}
	}
	@media screen and (max-width: 320px) {
		.section_login .lostfound a {
			font-size: 15px;
		}
	}
</style>
<main>
	<section class="section_login">
		<div class="title">
			<span class="head">로그인</span>
		</div>
		<form name='frmLogin' method='post' action='login_check.php'>
			<input type="hidden" name="token" value="{{token}}">
			<div class="input_frame">
				<input type="text" name='id' placeholder="아이디" id="ID" required>
			</div>
			<div class="input_frame">
				<input type="password" placeholder="비밀번호" name='pwd' id="passwd" required>
			</div>
			<div class="btn_frame">
				<button type="submit" class="login_btn">로그인</button>
				<div class="fl custom_chk1">
					<input type="checkbox" id="idCookie" name="rememberme">
					<label for="idCookie"><span class="chk"></span>아이디 저장</label>
				</div>
			</div>
			<div class="loginState idCookie">
				<div class="lostfound">
					<a href='/home/find/?tab=1'>아이디찾기</a>
					<a href='/home/find/?tab=2'>비밀번호찾기</a>
					<a href="/home/join">회원가입</a>
				</div>
			</div>
		</form>

		<div class="area">
			<strong>SNS 계정 간편 로그인</strong>
			<ul>
				<li class="item">
					<div class="btn_Sns">
						<div style='display:none;'>
							<a href="#" id="naver_id_login">네이버</a>
						</div>
						<a href="#" class="nlogin_naver" onclick="document.getElementById('naver_id_login_anchor').click()">
							<div class="iconN"><img src="{{__THEME_URL}}/img_kc/v1/ico_naver.svg"></div><span class="btn_name">네이버로 1초<br>로그인/회원가입</span>
						</a>
					</div>
				</li>
				<li class="item">
					<div class="btn_Sns">
						<div style='display:none;'>
							<a href="#" id="naver_id_kakao">카카오</a>
						</div>
						<a href="#" class="nlogin_kakao" onclick="javascript:loginWithKakao();">
							<div class="iconK"><img src="{{__THEME_URL}}/img_kc/v1/ico_kakao.svg"></div><span class="btn_name">카카오로 1초<br>로그인/회원가입</span>
						</a>
					</div>
				</li>
			</ul>
		</div>
	</section>
</main>


<!--네이버로그인-->
<form name="frmNaver" id="frmNaver" method="post" action="naver_check.php">
	<input type="hidden" name="token" id="token" value="{{token}}">
	<input type="hidden" name="naver_name" value="">
	<input type="hidden" name="naver_mail" value="">
	<input type="hidden" name="naver_profile_image" value="">
</form>

<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js"></script>
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3-min.js"></script>
<script type="text/javascript">
	document.domain = "korea-kcac.com";
	var naver_id_login = new naver_id_login("Sqq6LQDK1FbZpRXy0ov0", "https://korea-kcac.com/home/login/naver_callback.php");
	var state = naver_id_login.getUniqState();
	naver_id_login.setButton("green", 3, 00);
	naver_id_login.setDomain("https://korea-kcac.com/");
	naver_id_login.setState(state);
	naver_id_login.setPopup();
	naver_id_login.init_naver_id_login();
</script>
<!--네이버로그인-->

<!--카카오로그인-->
<form name="frmKakao" id="frmKakao" method="post" action="kakao_check.php">
	<input type="hidden" name="token" id="token" value="{{token}}">
	<input type="hidden" name="kakao_name" value="">
	<input type="hidden" name="kakao_mail" value="">
	<input type="hidden" name="kakao_profile_image" value="">
</form>

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
	document.domain = "korea-kcac.com";
	Kakao.init('51fb83db46bcb62487d3704c6147510f');

	function loginWithKakao() {
		Kakao.Auth.login({
			success: function(authObj) {
				Kakao.API.request({
					url: '/v2/user/me',
					success: function(res) {
						//alert(res.kakao_account.email);
						document.all["kakao_mail"].value = res.kakao_account.email;
						document.all["kakao_name"].value = res.properties.nickname;
						document.all["kakao_profile_image"].value = res.properties.thumbnail_image;
						$("#frmKakao").submit();
					},
					fail: function(error) {
					}
				});
			},
			fail: function(err) {
			}
		});
	};
</script>
<!--카카오로그인-->

<!-- idCookie -->
<script>
	$(document).ready(function () {
		// 저장된 쿠키값을 가져와서 ID 칸에 넣어준다. 없으면 공백으로 들어감.
		var userInputId = getCookie("userInputId");
		$("input[name='id']").val(userInputId);

		if ($("input[name='id']").val() != "") { // 그 전에 ID를 저장해서 처음 페이지 로딩 시, 입력 칸에 저장된 ID가 표시된 상태라면,
			$("#idCookie").attr("checked", true); // ID 저장하기를 체크 상태로 두기.
		}

		$("#idCookie").change(function () { // 체크박스에 변화가 있다면,
			if ($("#idCookie").is(":checked")) { // ID 저장하기 체크했을 때,
				var userInputId = $("input[name='id']").val();
				setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관
			} else { // ID 저장하기 체크 해제 시,
				deleteCookie("userInputId");
			}
		});

		// ID 저장하기를 체크한 상태에서 ID를 입력하는 경우, 이럴 때도 쿠키 저장.
		$("input[name='id']").keyup(function () { // ID 입력 칸에 ID를 입력할 때,
			if ($("#idCookie").is(":checked")) { // ID 저장하기를 체크한 상태라면,
				var userInputId = $("input[name='id']").val();
				setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관
			}
		});
	});

	function setCookie(cookieName, value, exdays) {
		var exdate = new Date();
		exdate.setDate(exdate.getDate() + exdays);
		var cookieValue = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toGMTString());
		document.cookie = cookieName + "=" + cookieValue;
	}

	function deleteCookie(cookieName) {
		var expireDate = new Date();
		expireDate.setDate(expireDate.getDate() - 1);
		document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString();
	}

	function getCookie(cookieName) {
		cookieName = cookieName + '=';
		var cookieData = document.cookie;
		var start = cookieData.indexOf(cookieName);
		var cookieValue = '';
		if (start != -1) {
			start += cookieName.length;
			var end = cookieData.indexOf(';', start);
			if (end == -1) end = cookieData.length;
			cookieValue = cookieData.substring(start, end);
		}
		return unescape(cookieValue);
	}

</script>
<!-- idCookie -->


{% endautoescape %}
{% endblock %}