/*!
 * Element 기본 스타일 예외 CSS
 * @author Aaron Jo
 * @date 2015
 */
/* @charset "ISO-8859-1"; */
@charset "utf-8";

/* CSS Document */

/***********************************************************
** 기본 폰트, 배경 색상 설정
***********************************************************/
* {
    --bg-color: transparent;
    --fg-color: #333;
}
* {
    background: var( --bg-color );
    color: var( --fg-color );
}


/***********************************************************
** iOS  (스크롤 이슈, 스크롤 완료시 일정시간 스크롤 이벤트 기다리는 문제 해결)
** http://ssamo.info/2019/08/14/%EB%B0%94%EB%8B%A5%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%A7%89%EA%B8%B0/
** https://velog.io/@chading/iOS-%EC%82%AC%ED%8C%8C%EB%A6%AC-%EC%8A%A4%ED%81%AC%EB%A1%A4-%ED%9A%A8%EA%B3%BC%EB%A5%BC-%EC%A1%B0%EC%A0%95%ED%95%B4%EB%B3%B4%EC%9E%90
** https://developer.apple.com/forums/thread/123084
***********************************************************/
body { -webkit-overflow-scrolling: initial; }
body.is-scroll-hidden { height: 100%; overflow: hidden; }


/***********************************************************
** iPhoneX  (탈모폰 하단 가상 버튼 영역에 Element 겹치는 문제 offset)
** iPhoneX, 아이폰X 안전영역(Safe Area) 대응 사례 공유 (https://wit.nts-corp.com/2019/10/24/5731)
** https://medium.com/@punkyoon/iphone-x%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%9B%B9%EB%B7%B0-%EC%84%A4%EC%A0%95-e236325b7c26
***********************************************************/
/* iOS 11.2 이상 */
body { padding-bottom: calc(env(safe-area-inset-bottom) + 0rem) !important; }
/* padding: env(safe-area-inset-top) + 0rem 0 env(safe-area-inset-bottom) + 0rem; */
/* iOS 11.0 버전 */
body { padding-bottom: calc(constant(safe-area-inset-bottom) + 0rem) !important; }
/* padding: constant(safe-area-inset-top) + 0rem 0 constant(safe-area-inset-bottom) + 0rem; */


/***********************************************************
** <select>  (Remove selected blue highlight on IE)
***********************************************************/
select:focus::-ms-value {
    background-color: white; color:#000;
}


/***********************************************************
** <select>  (Remove Select arrow on IE)
** In case if it is IE10 then using below css3 it is possible
***********************************************************/
select {
    min-width: 100px;
}


/***********************************************************
** <select>  (Remove Select arrow on IE)
** In case if it is IE10 then using below css3 it is possible
***********************************************************/
select::-ms-expand {
    display: none;
}

/* 새로운 화살표 추가 */
/*
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(이미지 경로) no-repeat 95% 50%;
}
*/


/***********************************************************
** <input>  (remove X 박스 in IE)
** @ 참고하기
   콜론 두개(::)를 사용한 의사선택자를 사용하는 것보다 (IE 10 이상은 2개가 먹힘)
   콜론 하나(:)를 사용하는 것이 호환성 측면에서 더 우수하며 구 IE를 지원할 수 있습니다.
***********************************************************/
input[type="text"]::-ms-clear,
input[type="number"]::-ms-clear,
input[type="email"]::-ms-clear,
input[type="search"]::-ms-clear,
input[type="password"]::-ms-clear,
input[type="tel"]::-ms-clear,
input[type="url"]::-ms-clear {
    display:none;
}


/***********************************************************
** <input> (자동 완성 해제)
***********************************************************/

/* chrome <form> 태그 autofill (문자열 자동설정) 해제방법
   [참고] 그냥 <form> 태그 사용하지 마!!!!!! ajax 이용해서 post 로 데이터 전달해!!!!!!!!!!!!!!!!

   1.
    <form autocomplete="off">
    <input ... autocomplete="off">
   2.
    $('input[name=[password]').attr('autocomplete', 'off);
   3.
        $('input:-webkit-autofill').each(function() {
          var text = $(this).val();
          var name = $(this).attr('name');
          $(this).after(this.outerHTML).remove();
          $('input[name=' + name + ']').val(text);
        });
   4.
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0) {
      var _interval = window.setInterval(function() {
        var autofills = $('input:-webkit-autofill');
        if (autofills.length > 0) {
          window.clearInterval(_interval);
          autofills.each(function() {
            var clone = $(this).clone(true, true);
            $(this).after(clone).remove();
          });
        }
      }, 20);
    }
*/


/***********************************************************
** <input>  (자동 완성 배경색상)
***********************************************************/

/*
1) autofill 속성에 의해 색상이 칠해져서 내가 정의한 색상이 먹히질 않는다.
color: #333 !important;
background-color: #fff !important;
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
-webkit-text-fill-color: #333 !important;
transition: background-color 5000s ease-in-out 0s;
2) 별루...
-webkit-transition-delay: 9999s;
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
3) 별루...
-webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  color: #333 !important;
  background-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #333 !important;
  transition: background-color 5000s ease-in-out 0s;
}