html {
    font-size: 16px;
}

:root{
    /* 색상 */
    --main-color: #2196F3; 
    --sub-color: #12c2b4; 
    --bg-color: #F7F9FD; 
    --gray-color: #5D5D5D;
    --btn-color: #C3C3C3;
    --red-color: #F44336;

    /* 그림자 */
    --box-shadow: 0px 2px 5px rgba(180, 180, 180, 0.6);
    --red-shadow: 0px 4px 10px rgba(74, 0, 0, 0.1);
}

ul, li{
    list-style: none;
}


/*컨텐츠 기본사이즈*/
.wrap{
    max-width:960px;
    width:100%;
    margin:auto;
    padding-top: 72px;
    min-height: 411px;
    /*border: 1px solid #ddd;*/
}
.container{
    width:100%;
    height:auto;
    /*min-height: calc(100vh - 80px);*/ 
    margin:auto;
    padding: 1.5rem;
    margin-bottom: 90px;
    padding-bottom: 120px;

}

@media(max-width:768px) {
  .container {
    padding: 1rem;
    padding-bottom: 120px;
  }
}
@media(max-width:480px) {
    .container {
    padding: 0.75rem; 
    padding-bottom: 120px;
    }
}


input, select{
    outline: none;
    border: none;
}

input, button, select {
    height: 52px;
    border: none;
}
input, button, textarea{
    width: 100%;
    color: #4D4D4D;
    border: none;
    border-radius: 12px; 
}
input, textarea, select {
    background: #F8F8F8;
}
textarea{
    height: 62px;
    padding: 12px;
    resize: none; /* 크기 못줄이게 */
}
input, select{
    text-indent: 12px;
}
select{
  appearance: none;           /* 기본 브라우저 스타일 제거 */
  -webkit-appearance: none;
  -moz-appearance: none;
    background-image: url(/common/img/common/select_btn.svg);
    background-repeat: no-repeat;
    background-position: right 1rem center;
  background-size: 12px auto; /* 화살표 크기 조절 */
  padding-right: 2rem;        /* 화살표 영역 확보 */
  border-radius: 12px;
}
select>option{
    padding-left :12px;
}
input, textarea {
    background: #F8F8F8;
    line-height: 145%;
}
input::placeholder,
textarea::placeholder{
    font-size: 0.87rem;
    color: #BABABA;
}

.disabled{
    background-color: #E8E8E8;
}

input.disabled::placeholder{
    color: #9f9f9f;
}

.opt_minibox{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/*인풋창 상단 제목*/
.info_t{
    font-size: 0.87rem;
    margin-bottom: 0.5rem;
    color: #8F8F8F;
    font-weight: 500;
}


/*체크박스*/
input[type="checkbox"]{
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 5px;
    border: 1px solid var(--main-color);
}

input[type="checkbox"]:checked{
    background: url(/common/img/common/checkbox.svg) no-repeat;
    border: none;
}

/*버튼*/
.btn_wrap{
    gap: 0.5rem;
}

.btn1{
    margin-top: 1.2rem;
    /*margin-bottom: 2rem;*/
    background: var(--main-color);
    color: #fff;
    font-size: 0.87rem;
    font-weight: 500;
    height: 60px;
    cursor: pointer;
}
.btn1:hover{
    background: #1a8ae3;
}

/* 가로너비 꽉 찬 메인색 배경 버튼 */
.full_btn {
  background: #1e90ff;
  color: white;
  border: none;
  height: 52px;
  border-radius: 12px;
  cursor: pointer;
}
.full_btn:hover{
    background: #1a8ae3;
}


.btn2{
    background-color: #F2F3F5;
    margin-top: 1.2rem;
    height: 60px;
}
.btn2:active{
    background-color: var(--gray-color);
    color: #fff;
}






.flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}



.dashed{
    color: #6E6E6E;
    font-weight: 500;
    /*margin: 0 10px;*/
}




/* 선택필터 */

/* 서브페이지 선택 필터 */
.b_scro{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.opt_obj input[type="radio"] {
    display: none;
}
.opt_obj input[type="radio"] + span {
    display: inline-block;
    width: auto;
    height: 2.85rem;
    line-height: 2.85rem;
    padding: 0 19px;
    background: #FAFAFA;
    border: 1px solid #FAFAFA;
    border-radius: 50px;
    color: #808080;
    text-align: center;
    cursor: pointer;
}
.opt_obj input[type="radio"]:checked + span {
    background: #fff;
    border: 1px solid #AFD6FF;
    color: var(--main-color);
}



/* toast 토스트 모달창 */
.toast {
    width: calc(100% - 3rem);
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--main-color);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  column-gap: 6px;
  z-index: 9999;
  transition: opacity .5s ease, bottom .3s ease;
}
.toast.show {
  opacity: 1;
  visibility: visible;
  bottom: 100px;
}
.toast_success {
  background: var(--main-color);
}
.toast_delete {
  background: #3B3B3B; /* 빨간색 배경 */
}
.toast img{
    width: 22px;
    height: 22px;
}




/* 탭 */
.tab_menu {
  display: flex;
}
.tab {
    height: 4rem;
  background: none;
  border: none;
  color: #B4B4B4;
  border-bottom: 2px solid #f4f4f4;
  cursor: pointer;
  border-radius: 0;
}
.tab.active {
  color: var(--main-color);
  border-bottom: 3px solid var(--main-color);
  font-weight: 700;
}



/* 리스트 */
/* 정산리스트 settlement_list , 포인트 조회 point_view 페이지에서 공통적으로 사용 */
.list_form {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list_form li {
  padding: 1.5rem 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.set_tit {
    font-size: 1.07rem;
  font-weight: 500;
  color: #4D4D4D;
}
.set_date {
    font-size: .93rem;
    color: #a9a9a9;
    margin-top: 0.3rem;
}
.status_label {
    font-size: .93rem;
    color: #A9A9A9;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #EAEAEA;
    background: #f5f5f5;
    white-space: nowrap;
    letter-spacing: -1px;
}


/* 파일업로드(공통) */

/* 이미지 업로드*/
.upload_file {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 아이콘과 텍스트 사이 간격 */
  padding: 16px;
  background-color: #eef6ff;
  border: 1px solid #d0e8ff;
  border-radius: 12px;
  font-size: 16px;
  color: #bbb;
  cursor: pointer;
  font-weight: 500;
}
.upload_file img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}



/*파일 업로드 후*/
.file_upload_wrap {
  width: 100%;
    box-sizing: border-box;
}

.add_file {
    width: 100%;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    margin-bottom: 0.5rem;
    min-width: 0; /* 💥 줄어들 수 있게 꼭 필요 */
}

/* 파일명 출력 박스 */
.file_list {
    display: flex;
    flex: 1; /* 💥 버튼 제외하고 남은 공간 차지 */
    min-width: 0; /* 💥 flex: 1만으로는 부족 */
    padding: 1rem;
    height: 50px;
    border: 1px solid #E9E9E9;
    border-radius: 15px;
    width: 100%;
}

.file_name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.87rem;
    height: 20px;
}

.deletebtn {
    width: 50px;
    height: 50px;
    background-color: #F6F6F6;
    border: 1px solid #E9E9E9;
    flex-shrink: 0; /* 💡 줄어들지 않도록 */
}

.deletebtn img {
    width: 15px;
}






/*제목*/
.page_tit{
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 800;
    color: #4C4C4C;
}

.h3title{
     font-size: 1.25rem;
    text-align: center;
    font-weight: 800;
    color: #4C4C4C;
}


/*최상단 이전/제목*/
.top {
  position: relative;
  width: 100%;
  max-width: 960px;
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back_btn {
  position: absolute;
  left: 1rem;
  top: 19px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.h3title {
  font-size: 18px;
  font-weight: bold;
  color: #444;
}
.top .h3title{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/*최상단 아래 제목(가운데 배치)*/
.title{
    margin: 3rem 0;
    text-align: center;
    word-break: keep-all;
}
.title p:first-child{
    font-weight: 700;
    font-size: 1.5rem;
    color: #4C4C4C;
    margin-bottom: 0.65rem;
}
.title p:nth-of-type(2){
    font-weight: 500;
    color: #9A9A9A;
}

@media (max-width:480px){
    /*최상단 이전/제목*/
    .top .h3title {
        font-size: 1.13rem;
    }
    /*최상단 아래 제목*/
    .title p:nth-of-type(1) {
        font-size: 1.25rem;
    }
    .title p:nth-of-type(2) {
        font-size: 0.87rem;
    }
}



/*input 하단 설명글*/
.guide_text{
    margin-top: 0.5rem;
    font-size: 0.81rem;
    color: #5D5D5D;
    word-break: keep-all;
}


/*구인구직 태그*/
.tag_hire,
.tag_seek {
    display: inline-block;
    padding: 4px 6px;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    font-size: .87rem;
}
.tag_seek {
    background-color: var(--sub-color);
}
.tag_hire {
    background-color: var(--main-color);
}


/* 노하우공유 */
.point{
    display: flex;
    align-items: center;
    column-gap: 0.3rem;
}
.point img{
    width: 18px;
}
.point p{
    color: var(--sub-color);
    font-size: 0.94rem;
}



/*프로필 이미지*/
.profile_img{
    margin: 0 auto;
    border-radius: 50%;
}
.profile_img img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    cursor: pointer;
}



/* 정산하기 버튼 */
.settlement_btn{
    width: auto;
    height: auto;
    display: inline-block;
    padding: 8px 13px;
    font-size: .93rem;
    border: 1px solid #AFD6FF;
    border-radius: 50px;
    color: var(--main-color);
    transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
    flex-shrink: 0;  
    white-space: nowrap;    
}
.settlement_btn:hover{
    border: 1px solid var(--main-color);
    background: var(--main-color);
    color: #fff;
}




/*모달창 배경 어둡게*/
.smog {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    z-index: 10;
    display: none;
    z-index: 9999;
}

/* 모달창 공통 css */
.modal, .receipt_modal {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 가로 중앙 정렬 */
    width: 100%;
    max-width: 960px;
    padding: 1rem;
    border-radius: 15px 15px 0 0;
    background-color: #fff;
    display: none;
    z-index: 99999999;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
}
.receipt_modal .opt_minibox{
    height: 40vh;
    overflow-y: auto;
}

/* 영수증 업로드 모달창 */
.receipt_modal select{
    width: 100%;
}

/* 게시판 더보기 모달창 */
.modal_more{
    padding-left: 0;
    padding-right: 0;
}
.modal_more hr{
    border: 1px solid #F2F2F2;
}
.modal_btn{
    text-align: center;
    /*padding: 0.5rem 0;*/
}
.modal_btn button{
    margin: 0.5rem 0;
}
.modal_btn button:last-child{
    color: #FE4932;
    /*margin-bottom: 0;*/
}

/* 모달창 바 형태 */
.downline{
  background: #D9D9D9;
  width: 44px;
  height: 4px;
  margin: 0 auto; /* 가로 중앙 정렬 */
  border-radius: 4px; 
}





/*  데이터피커 */
/* datepicker Style */
.ui-datepicker { width: 270px; padding: 0; display: none; border: 0; margin-top: 10px;}
.ui-widget.ui-widget-content { border: 0; border-radius: 3px; overflow: hidden; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.3) }
.ui-datepicker .ui-widget-header { position: relative; border: 0; background: var(--main-color); color: #fff; border-radius: 0; }
.ui-datepicker select.ui-datepicker-month{
    margin-right: 5px !important;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 70px; height: 26px; line-height: 26px; background: rgba(0,0,0,0.15) url(/common/img/tour/arrow-button.png) 100% -27px no-repeat; margin: 0 4px; padding: 0 6px; border: 0; border-radius: 3px; color: #fff; font-size: 13px; font-weight: bold; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; /* 화살표 없애기 */ }
.ui-datepicker select.ui-datepicker-month:hover, .ui-datepicker select.ui-datepicker-year:hover { background: rgba(0,0,0,0.3) url(/common/img/tour/arrow-button.png) 100% -27px no-repeat; }
.ui-datepicker select::-ms-expand {
display: none; /* 화살표 없애기 for IE10, 11*/
}
.wrap .ui-datepicker .ui-datepicker-title { line-height: 1.8em; text-align: center; margin: 0px 2.3em; font-size:13px; font-weight:bold; letter-spacing:0; }
.wrap .ui-datepicker-title .ui-datepicker-year option, .ui-datepicker-title .ui-datepicker-month option { background: #fff; color: #333; }
.wrap .ui-datepicker-title .ui-datepicker-year { }
.wrap .ui-datepicker-title .ui-datepicker-month { }
.wrap .ui-datepicker .ui-datepicker-calendar { position: relative; width: 260px; padding-top: 100px; margin: 0 auto; }
.wrap .ui-datepicker-calendar thead tr { position: absolute; top: -24px; left: 5px; right: 5px; }
.wrap .ui-datepicker-calendar thead th { float: left; display: block; padding: 0; width: 14.2857%; color: #fff; font-size:11px; letter-spacing:1px; opacity: 0.6 }
.wrap .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 5px; width: 1.8em; height: 1.8em; text-indent: -9999px; cursor: pointer }
.wrap .ui-datepicker .ui-datepicker-prev { left: 5px; }
.wrap .ui-datepicker .ui-datepicker-prev.ui-state-hover { background: rgba(0,0,0,0.1); border: 0; }
.wrap .ui-datepicker .ui-datepicker-prev .ui-icon { background: url(/common/img/tour/arrow-button.png) 0 0 no-repeat; }
.wrap .ui-datepicker .ui-datepicker-next { right: 5px; }
.wrap ui-datepicker .ui-datepicker-next.ui-state-hover { background: rgba(0,0,0,0.1); border: 0; }
.wrap .ui-datepicker .ui-datepicker-next .ui-icon { background: url(/common/img/tour/arrow-button.png) -16px 0 no-repeat; }
.wrap .ui-datepicker .ui-state-default { display: block; border: 0; border-radius: 15px; width: 30px; height: 30px; line-height: 30px; padding: 0; margin: 4px auto; font-size: 12px; text-align: center; background: #fff; font-weight: normal; color: #333; box-sizing: border-box; }
.wrap .ui-datepicker .ui-state-default.ui-state-hover { background: rgba(0,0,0,0.05); }
.wrap .ui-datepicker-today .ui-state-default { color: var(--main-color); font-weight: bold; }
.wrap .ui-datepicker-current-day .ui-state-default { background: var(--main-color) !important; color: #fff; font-weight: bold; }
.wrap .ui-datepicker-buttonpane { overflow: hidden; border-top: 1px solid #eee; }
.wrap .ui-datepicker-buttonpane button[data-handler="today"] { background: var(--main-color) !important; opacity: 0.75; }
.wrap .ui-datepicker-buttonpane button[data-handler="hide"] { }
.wrap .ui-datepicker td span, .ui-datepicker td a {
    text-align: center !important;
    border: none !important;
    border-radius: 6px;
}
.ui-datepicker td span, .ui-datepicker td a {
    padding: 8px !important;
}
/* ie add Style */
.ui-datepicker td, .ui-datepicker th { border: 0 }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; cursor: pointer; width: auto; margin: 0.5em 0.2em 0.4em; padding: 0.2em 0.6em 0.3em; overflow: visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
.ui-corner-all { border-radius: 3px; }
.ui-icon { display: block; width: 16px; height: 16px; }
.ui-datepicker td {
    border: 0;
    padding: 6px;
}
/* mobile Responsive */
 @media screen and (max-width:480px) {
.ui-datepicker { width: 270px !important; left: 50% !important; margin-left: -135px !important; }
}


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    background: #fff !important;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #e4eff4 !important;
    color: #5f7d94 !important;
    border-radius: 50px;
}
ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background: var(--main-color) !important;
}
.ui-datepicker .ui-datepicker-title {
    display: flex;
    align-items: center;
    gap: 8px;
}





/* 텍스트 에디터 480이하 가로스크롤 해결 */
.sun-editor {
    overflow-x: hidden;
}
.sun-editor .se-btn-tray {
    display: flex;
    flex-wrap: wrap;
}
.sun-editor .se-btn-module-border {
    border: none !important;
}
.sun-editor .se-btn-select {
    align-items: center;
}


/* 투어생성/정산서관리 페이지
    가이드 퀵메뉴 */
.quick_guide{
    position: fixed;
    bottom: 120px;
    right: 20px;
    z-index: 9999;

    /*display: none;*/

}
.quick_guide img{
    width: 56px;
    height: 56px;
    cursor: pointer;
    box-shadow: var(--box-shadow);
    border-radius: 50%;
}