@charset "utf-8";
@import 'reset.css';

/* *************************************************************************************
*
* 전체 공통 checkbox, radio, select 등
* 
* **************************************************************************************/
html {font-size: 10px; font-weight: normal; font-family: 'pretendard';}
body {min-width: 320px; color: #000; font-size: 1.6rem; line-height: 1.3; background: linear-gradient(to bottom, #e6f2fe 70%, #fcf2e9);}
body.ov-hidden {overflow: hidden;}
.wrap {position: relative; overflow: hidden;}
caption {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px;}
.blind {position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px;}
.elps {width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.elps2 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.tal {text-align: left !important;}
a {display: inline-block;}
button {line-height: 1;}

/*input, select, textarea, label*/
input::placeholder, textarea::placeholder {font-size: 1.6rem; color: #888; font-weight:400;}
input[type="text"] {box-sizing: border-box;}
input[type="number"] {-moz-appearance: textfield;}
input::-webkit-inner-spin-button {-webkit-appearance: none;}
input::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0px 1000px white inset !important;}
select::-ms-expand {display:none; /*for IE10,11*/}
select {background-color: var(--theme-bg); background-image:url("../images/common/select_arr.svg"); background-position:center right 1.5rem; background-size: 1.2rem; background-repeat: no-repeat;  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}
label {display: inline-block; vertical-align: middle;}

/*checkbox, radio 커스텀*/
input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; display: inline-block; width: 2.6rem; height: 2.6rem; vertical-align: middle; background-image:url("../images/common/check_base.svg"); background-size: 2.2rem; background-position: center; background-repeat: no-repeat; cursor: pointer;}
input[type="checkbox"]:checked {background-image: url("../images/common/check_on.svg");}
input[type="radio"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; display: inline-block; width: 2.6rem; height: 2.6rem; vertical-align: middle; background-image:url("../images/common/radio_base.svg"); background-size: 2.2rem; background-position: center; background-repeat: no-repeat; cursor: pointer;}
input[type="radio"]:checked {background-image:url("../images/common/radio_on.svg");}

/*접근성 focus*/
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline: 2px dashed var(--focus-color); transition: none !important;}
.swiper-slide > a:focus-visible {border: 2px dashed var(--focus-color); outline: none;}

/* *************************************************************************************
*
* 공통 color, border-radius
* 
* **************************************************************************************/
:root {
    --primary-color:#4c83f2;
    --secondary-color: #FD5E36;

    --label-bake: #f1e7df;
    --label-food: #ffcdd6;
    --label-cafe: #ceede4;
    --label-hotel: #d4d7e9;
    --label-tour: #f1e7df;
    --label-town: #ecf8f1;
    --label-gym: #bae9f5;
    --label-culture: #ffcea9;
    --label-dead: #888;
    --label-end: #FD5E36;
    --label-ing: #5288f5;
	
    --border-gray-color: #dbdbdb;
    --bg-gray: #f1f1f1;

    --border-radius-base: 3rem;

    --focus-color: #000942;
}
  
@media all and (max-width:1400px){
	html {font-size: 9px;}
    :root {
        --border-radius-base: 2rem;
    }
}

@media all and (max-width:1024px){
    * {-webkit-tap-highlight-color: transparent;}
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline: none;}
}

@media all and (max-width:480px){
    html {font-size: 8px;}
    select {background-position: center right 1rem;}
}