@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/eunchurn/NanumSquareNeo@0.0.6/nanumsquareneovar.css);
@import url(https://cdn.jsdelivr.net/gh/eunchurn/NanumSquareNeo@0.0.6/nanumsquareneo.css);
@import url(//cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css);
@font-face { font-family: 'yg-jalnan'; src: url('//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face {font-family: 'GmSansL'; src: url('//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'GmSansM'; src: url('//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'GmSansB'; src: url('//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal;}

*{box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; outline:none; -webkit-tap-highlight-color : rgba(0,0,0,0); /*user-select: none;*/ -webkit-touch-callout: none;}

html,
body {background:var(--body_bg);}
html, body {width: 100% !important; height:auto; margin: 0 !important; padding: 0 !important; overscroll-behavior-y: none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0; }
body {font-family: var(--neo); font-size: 14px; letter-spacing: 0em; color: var(--default_color); line-height: 150%; -webkit-text-size-adjust: none;  -webkit-appearance: none;}
body		{overflow-y:overlay;overflow-x: hidden;}
body:: {-ms-overflow-style: none;}
body::-webkit-scrollbar {background: transparent; width:5px; height:5px; border-radius:15px;}
body::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); border-radius:15px; }

input, textarea, option, select {font-size:13px; font-family:var(--neo); line-height:1.1; margin:0px; -webkit-text-size-adjust:none;  -webkit-appearance:none;}
textarea {line-height:150%;}
input[type="submit"],
input[type="button"],
input[type="select"],
input[type="textarea"] {}
ul, li	 {list-style:none;}
textarea	{resize: none;}
caption,
legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
textarea {overflow-y:overlay;}
textarea:: {-ms-overflow-style: none;}
textarea::-webkit-scrollbar {background: transparent; width:10px; height:10px; border-radius:15px;}
textarea::-webkit-scrollbar-thumb {background:rgba(0,0,0,0); border-radius:15px;  transition:all .3s;}
textarea:hover::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); transition:all .3s;}


:root[user-theme="light"] {
	--df_frm_line:#e9e9e9;
	--df_frm_bg:#fff;
	--df_frm_bg_set:#fff;
	--df_frm_color:##ef0000;
	--df_frm_hd:rgba(0,0,0,0.3);
	--df_frm_bg_slide:#fafafa;
	--df_frm_bg_focus:#fff;
	--df_frm_btn:#006ce1;
	--df_frm_btn_hover:#002771;
}

:root[user-theme="dark"] {
	--df_frm_line:rgba(255,255,255,0.1);
	--df_frm_bg:rgba(0,0,0,0.6);
	--df_frm_bg_set:rgba(0,0,0,0.0);
	--df_frm_color:#ff5555;
	--df_frm_hd:rgba(255,255,255,0.3);
	--df_frm_bg_slide:rgba(0,0,0,0.3);
	--df_frm_bg_focus:rgba(0,0,0,0.7);
	--df_frm_btn:#006ce1;
	--df_frm_btn_hover:#002771;
}


input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="tel"] {width: 100%;  height: 60px; border: 1px solid var(--df_frm_line); background: var(--df_frm_bg); color: var(--df_frm_color); border-radius: 7px; transition: all .3;}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus {outline: none; border-color: var(--mem_stx); }

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="url"]::placeholder,
input[type="tel"]::placeholder {color: var(--df_frm_hd); font-size: 11px;}

input[type="button"],
input[type="submit"] {width: 100%; height: 70px; background:var(--df_frm_btn); font-weight:500; line-height:1; font-size:14px; text-align:center; color:#fff; cursor:pointer; transition:all .2s; border-radius:7px; border:0;}
input[type="button"]:hover,
input[type="submit"]:hover {background:var(--df_frm_btn_hover);}




input[type="radio"] { position:absolute; width:0 !important; height:0 !important; padding: 0; margin:0; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
input[type="radio"] + label { display: inline-block; position: relative; padding-left:25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } 
input[type="radio"] + label:before { content: ''; position:absolute; top:50%; left:0; transform: translateY(-50%); width:17px; height:17px; text-align: center; background: #ddd; border:0; border-radius: 100%; transition:all .1s;}
input[type="radio"] + label:active:before,
input[type="radio"]:checked + label:active:before {}
input[type="radio"]:checked + label:before	{background: #0088de; transition:all .1s;}
input[type="radio"]:checked + label:after		{content: '';position:absolute; top:4px; left:5px; transform: rotate(45deg); width:5px; height:5px; border:1px solid rgba(255,255,255,0.7); border-width:0 1px 1px 0; transition:all .1s;}
input[type="radio"]:disabled + label:before	{background:#999; }

input[type="date"]	{position:relative; padding:11px 10px; width:100%; height:40px; border:1px solid var(--df_frm_line); border-radius:5px;}
input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-inner-spin-button	{display:none;}
input[type="date"]::-webkit-calendar-picker-indicator	{position:absolute; top:0; left:0; width:100%; height:100%; background:transparent; color:transparent; cursor:pointer; z-index:1;}
input[type="date"]::before	{content:attr(data-placeholder); width:100%;}
input[type="date"]::after  {content: '\f274'; font-family: "Font Awesome 5 Free"; font-weight: 700; font-size:15px; color:var(--default_tdown); transition:all .1s; position:absolute; top:50%; right:10px; transform: translateY(-50%);}
input[type="date"]:active::after,
input[type="date"]:hover::after  {color:#000; transition:all .1s;}
input[type="date"]:valid::before	{display:none;}
input[data-placeholder]::before	{position:absolute; top:0; left:0; padding:11px 0 0 10px; background:#fff; color:#999; font-size:12px;}

input[type="checkbox"] { position:absolute; width:0 !important; height:0 !important; padding: 0; margin:0; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
input[type="checkbox"] + label { display: inline-block; position: relative; padding-left:25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;  font-size:12px;} 
input[type="checkbox"] + label:before { content: ''; position:absolute; top:50%; left:0; transform: translateY(-50%); width:17px; height:17px; text-align: center; background: #ddd; border-radius:3px; border:0; transition:all .1s;}
input[type="checkbox"] + label:after		{content: '';position:absolute; top:calc(50% - 1px); left:5px; transform: translateY(-50%) rotate(45deg); width:5px; height:5px; border:1px solid rgba(255,255,255,1); border-width:0 1px 1px 0; opacity: 0;}
input[type="checkbox"] + label:active:before,
input[type="checkbox"]:checked + label:active:before {}
input[type="checkbox"]:checked + label:before	{background: red; transition:all .1s;}
input[type="checkbox"]:checked + label:after		{opacity: 1;}
input[type="checkbox"]:disabled + label:before	{background:#ddd; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input:focus {outline:none;/*background-color: white !important; border:1px solid #2d2d2d !important;*/}
textarea {width: 100%;  height: 150px; padding:10px; border: 1px solid var(--df_frm_line); background: var(--df_frm_bg); color: var(--df_frm_color); border-radius: 7px; transition: all .3;}

textarea:focus {outline:none;/*background-color: white !important; border:1px solid #2d2d2d !important;*/}

select::-ms-expand { display: none;}
select	{outline:none;width: 100%; height:40px; padding:10px; background: #ffffff url('/images/sel_arr.gif') no-repeat right 13px center; border: 1px solid #999; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; position:relative;}
/* 🚀 1. 터치 딜레이 제거 및 웹 브라우저 특성 지우기 */
a, button, .mode_btn, .pop_layer_show {
	/* 브라우저에게 "더블탭 줌 안 쓸 거니까 300ms 기다리지 말고 즉시 클릭 실행해!" 라고 명령 */
	touch-action: manipulation; 
	
	/* 터치했을 때 생기는 웹 특유의 보기 싫은 회색 깜빡임 상자 제거 */
	-webkit-tap-highlight-color: transparent; 
	
	/* 텍스트나 버튼을 길게 꾹 눌렀을 때 텍스트가 블록 지정되면서 멈칫하는 현상 완전 차단 */
	-webkit-user-select: none; 
	user-select: none;
}

/* 🚀 2. 네이티브 앱처럼 터치하는 즉시 반응하는 시각적 피드백 */
a:active, button:active, .mode_btn:active, .pop_layer_show:active {
	opacity: 0.6; /* 손가락이 닿는 즉시 살짝 투명해짐 */
	transition: none !important; /* 서서히 변하지 않고 즉각적으로 팍! 변하게 함 */
}
a { -webkit-tap-highlight-color:transparent;}
a:link, a:visited, a:active, a:hover {text-decoration: none; /*outline:none;*/}

.loading{width:100%; height: 100vh; height: 100dvh; position:fixed; left:0px; top:0px; background:transparent; z-index:1000000000;}
.loading .ld_bx {position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: -40px; max-width:250px; width:100%; text-align:center;}
.loading .ld_bx .logo {display:inline-block; width:100%; margin-bottom:15px;}
.loading .ld_bx .logo img,
.loading .ld_bx .logo svg {width:55px; display:none;}
.loading .ld_bx .logo svg {fill: var(--logo_fill);}
.loading .ld_bx i {display:inline-block; animation: spin 2s linear infinite; color:var(--default_color); font-size:30px; }

@keyframes spin {
	from	{transform: rotate(0);}
	to		{transform: rotate(360deg);}
}