/* top */
.thisCompany {border-radius: 8px; overflow: hidden; background: #F8F8F8; margin-bottom: 40px;}
.companyThumbnail {width: 100%; padding-bottom: 64%; /*background: #fff url("../img/companyThumbnail01.jpg") no-repeat center / cover;*/}
.companyBox {padding: 16px;}
.companyTitle {font-size: 18px; font-weight: 700;}
.companyTxt {font-size: 14px; color: #888; margin: 4px 0 16px;}
.companyinfo {display: flex; align-items: center; gap:4px;}

/* service */
.searchBox {display: flex; align-items: center; gap:8px; margin-bottom: 24px;}

/* .serviceBox {height: calc(100vh - 200px); overflow-y: auto;}
  .serviceBox._height01 {height: calc(100vh - 440px);}
  .serviceBox._height02 {height: calc(100vh - 450px);}
  .serviceBox._heigtAuto {height: auto;} */
.serviceList {display: flex; gap: 16px; margin-bottom: 16px; cursor: pointer; flex-wrap: wrap;}
  .serviceList._noClick {cursor: default;}
  .serviceListThumbnail {min-width: 64px; width: clamp(64px, 15vw, 80px); height: clamp(64px, 15vw, 80px); position: relative; /*background: #fff url("../img/companyThumbnail01.jpg") no-repeat center / cover;*/ border-radius: 4px; flex-shrink: 0;}
    .serviceListThumbnail .payTag {position: absolute; left: 4px; bottom: 4px;}
  .serviceInfo {flex:auto;}
  .serviceTitle {font-size: 16px; font-weight: 500;}
  .serviceTxt {font-size: 12px; margin-top: 4px; margin-bottom: 8px; line-height: 1.4;}
  .serviceCost, .serviceTime {font-size: 18px; font-weight: 700;}
  .serviceDetailBox {padding: 0 24px 24px;}
  .serviceThumbnail {width: 100%; padding-bottom: 60%; /*background: #fff url("../img/companyThumbnail01.jpg") no-repeat center / cover;*/ border-radius: 4px; margin-bottom: 16px;}
  .serviceDetailImg img {width: 100%; height: auto;}
  .userInfo, .userAddress {font-size: 12px; margin-bottom: 4px;}
  .customerMemo {font-size: 12px; margin-top: 4px;}

  .imgBox {position: relative; overflow: hidden;}
    .imgBox img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 100%; width: auto; max-width: none;}

  .payInfo {width: 100%; margin-top: -12px; padding: 8px; background: #FFF1F1; display: flex; align-items: center; font-size: 12px;}


/* mypage */
.myInfo {padding: 12px 0 24px;}
.mypageSec {padding: 24px 0;}
.sectionTitle {font-size: 20px; font-weight: 600; margin-bottom: 16px;}

.nowCount {display: flex; padding: 20px 0; border-radius: 8px; background: #F4F6F6; text-align: center;}
  .nowCount li {flex: 1; opacity: 0.5; filter: grayscale(1); cursor: pointer;}
  .nowCount li.focus {opacity: 1; filter: grayscale(0);}
  .nowCount .count {font-size: 20px; font-weight: 600;}
  .nowCount .countLabel {font-size: 16px; color: #555; margin-top: 8px; line-height: 1;}
.weekBox {margin: 12px 0; position: relative; overflow: visible;}
  .weekBox .weekList {text-align: center; display: flex;}
  .weekBox .weekList li {flex:1; cursor: pointer; padding: 8px; border-radius: 4px; box-sizing: border-box;}
  .weekBox .weekList .day {font-size: 12px; color: #aaa;}
  .weekBox .weekList .date {font-size: 16px; font-weight: 500;}
  .weekBox .weekList li.active {background: linear-gradient(30deg, rgba(0,175,175,1) 0%, rgba(0,155,175,1) 100%); color: #fff;}
  .weekBox .weekList li.active .day {color: #fff;}

  .weekBox .prevBtn, .weekBox .nextBtn {position: absolute; top: calc(50% - 35px); z-index: 2; height: 70px; background: #fff; width: 36px; border-radius: 0; display: none;}
  .weekBox .prevBtn {left: -36px;}
  .weekBox .nextBtn {right: -36px;}

.dotBox {display: flex; justify-content: center; gap:2px; margin-top: 2px; padding-bottom: 2px;}
  .dotBox .dot {width: 4px; height: 4px; border-radius: 4px;}
  .dotBox .dot01 {background: var(--color-primary);}
  .weekBox .weekList li.active .dotBox .dot01 {background: #fff;}
  .dotBox .dot02 {background: #2679F5; display: none;}


.infoList {display: flex; gap:8px; justify-content: space-between; align-items: flex-start; font-size: 14px;}
  .infoList:not(:last-child) {margin-bottom: 12px;}
  .infoList .infoLabel {flex-shrink: 0; width: 100px; line-height: 18px;}
  .infoList .infoContents {flex: auto; text-align: right; color: #888; line-height: 18px;}
  .infoList.noEdit .dfBtn._iconBtn {visibility: hidden;}

.mapIcon img {height: 32px; width: auto;}

#calendarPop {position: fixed; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%); visibility: hidden; max-width: calc(600px - 48px); width: calc(100vw - 48px);}
#calendarPop.open {visibility: visible; z-index: 2}
#calendarPop.open + .calendarPopBg {display: block; position: fixed; height: 100%; background-color: rgba(0,0,0,0.4); backdrop-filter: blur(1px) opacity(1); max-width: 600px; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}

.addressBox {display:none; width:100%; height:300px; position:relative; margin-bottom: 10px; max-height: 50vh;}

.scheduleTable {margin-top: 12px;}
.scheduleTable .row {display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee;}
.scheduleTable .row._head {background: #F4F6F6; color: #888;}
.scheduleTable .row._finish {color: #888;}
.scheduleTable .row span {padding: 8px 10px; font-size: 12px;}

.scheduleTable .row .no {width: 30px; text-align: center;}
.scheduleTable .row .serviceDate {flex: auto;}
.scheduleTable .row .serviceState {width: 60px; text-align: center;}


/* 달력 커스텀 */
.fc .fc-toolbar-title {font-size: 18px;}
.fc-toolbar-chunk .fc-today-button.fc-button.fc-button-primary {display: none;}
.fc .fc-button-primary {background: var(--color-primary); border: 1px solid var(--color-primary);}
.fc .fc-button {padding: 2px;}
.fc .fc-daygrid-day.fc-day-today {background: #F4F6F6;}
.fc .fc-view-harness {font-size: 12px;}

/* notice */
.noticeMain {background: #F4F6F6;}
.csInfo {padding: 16px; background: #F8F8F8; border-radius: 8px; margin: 0 24px;}

.tabs {position: relative; display: flex; border-bottom: 1px solid #E3E3E5; padding: 12px 24px 0;}
  .tab {flex: 1; padding: 10px 16px; cursor: pointer; text-align: center; font-weight: 500; color: #aaa;}
  .tab.active {border-bottom: 1px solid var(--color-primary); color: var(--color-primary);}
.tabContent {display: none; padding: 24px 24px 0;}
  .tabContent.active {display: block;}

/* .postList {height: calc(100vh - 360px); overflow-y: auto;} */
.postList li:not(:last-child) {margin-bottom: 8px;}
.post {display: block; padding: 16px; border-radius: 8px; background: #fff; border: 1px solid #e9e9e9; cursor: pointer; position: relative;}
  .post .postTitle {font-size: 14px; font-weight: 500; padding-right: 32px;}
  .post .postDate {font-size: 12px; color: #888; display: block; margin-top: 8px;}

.post .fixedIcon {display: none;}
.isFixed .post {background: #FFF4F3;}
.isFixed .post .fixedIcon {display: block; position: absolute; right: 16px; top:16px; font-size: 20px;}



/* dialog */
.modalDialog::backdrop {background-color: rgba(0,0,0,0.4); backdrop-filter: blur(1px) opacity(1); max-width: 600px; left: calc(50% - 300px);}
.modalDialog {width: calc(600px - 48px); padding: 24px; border-radius: 8px; border: none; box-shadow: 0 0 5px 0 rgba(0,0,0,0.10); background: #fff;}
.modalDialog .title {font-size: 20px; font-weight: 500; margin-bottom: 12px; text-align: center;}
.modalDialog .contents {font-size: 16px; line-height: 1.4; max-height: 60vh; overflow-y: auto; text-align: center;}
	.modalDialog .contents._txt {font-size: 12px; color: #555; text-align: left;}
.modalDialog .btnWrapper {margin-top: 24px;

}
.modalDialog .btnWrapper .dfBtn {flex: 1;}
.modalDialog .btnWrapper .dfBtn:nth-of-type(n+1) {margin-top: 8px;}

.modalDialog._confrim {text-align: center;}