@charset "UTF-8";
@import "/fonts/fonts.css";

@media screen and (max-width: 1366px) {

   #detail-parking,
   #company-list,
   #search-list {
      max-width: none;
   }
}



/* 커스텀 오버레이
========================================================================== */
#map {
   width: 100%;
   height: 100%;
   touch-action: manipulation;
   /* 이 값으로 변경 */
   -webkit-user-drag: none;
}

.wrap {
   position: absolute;
   left: var(--pxm140);
   bottom: var(--pxm30);
   min-width: var(--px250);
   text-align: left;
   overflow: hidden;
   font-size: 12px;
   font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;
   line-height: 1.5;
   border: var(--px03) solid var(--black);
   border-radius: var(--px08);
   box-shadow: 0 var(--px05) 0 0 #55555550;
}

.wrap * {
   padding: 0;
   margin: 0;
}

.wrap .info {
   border-radius: var(--px05);
   overflow: hidden;
   background: #fff;
}


.info .title {
   padding: var(--px05) var(--px10);
   background: var(--blue);
   color: var(--white);
   border-bottom: 1px solid var(--border);
   font-size: var(--fs18);
   font-weight: 600;
   align-content: center;
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   align-items: center;
}


.info .body {
   position: relative;
   overflow: hidden;
}

.info .desc {
   position: relative;
   margin: var(--px10) var(--px20) var(--px15);
   display: flex;
   flex-direction: column;
   align-items: center;
}

.desc .ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 500;
}

.desc .fee {
   font-size: var(--fs18);
}

.fee strong {
   font-weight: 700;
}


.desc .jibun {
   font-size: var(--fs15);
   color: #888;
}

.desc .jibun strong {
   font-weight: 700;
}

.info .img {
   position: absolute;
   top: 6px;
   left: 5px;
   width: 73px;
   height: 71px;
   border: 1px solid #ddd;
   color: #888;
   overflow: hidden;
   display: none;
}


.info .link {
   color: #5085BB;
}



/* 검색하기
========================================================================== */
.parking-list-wrapper {
   background-color: #fff;
   position: fixed;
   top: 7.25rem;
   z-index: 300;
   min-width: 21.875rem;
   max-width: 37.5rem;
   width: 100%;
   max-height: calc(100vh - 7.25rem);
   overflow-y: auto;
}

.parking-list-table {
   width: 100%;
   border-collapse: collapse;
}

.parking-list-table tr {
   height: var(--px90);
}

.parking-list-table th,
.parking-list-table td {
   padding: 0;
   border-bottom: var(--px01) solid var(--border);
   align-content: center;
   width: 80%;
}

.parking-list-table td:nth-child(1) {
   padding-left: var(--px30);
}

.parking-list-table td:nth-child(2) {
   text-align: center;
}

.parking-list-table th {
   background-color: var(--bg_gray);
   text-align: left;
   font-weight: 600;
   text-align: center;
}

.choice-btn,
.delete-btn {
   color: #fff;
   border: none;
   padding: var(--px10) var(--px30);
   border-radius: 3px;
   cursor: pointer;
}

.parking-list-table .company-name {
   font-weight: 600;
   font-size: var(--fs18);
}

.parking-list-table .address {
   font-size: var(--fs15);
   color: #888;
}


/* 근처 주차장 List
========================================================================== */
.company-list-wrapper {
   background-color: #fff;
   position: fixed;
   bottom: 0;
   z-index: 100;
   width: 100%;
   min-width: 21.875rem;
   max-width: 37.5rem;
   height: var(--px280);
   max-height: calc(100vh - 7.25rem);
   overflow-y: auto;
   padding: var(--px20) var(--px20);
   border-top: var(--px01) solid var(--border);
}

.company-list-wrapper.expanded {
   height: calc(100vh - 7.25rem);
   overflow: auto;
}

.view-top {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   height: var(--px60);
   align-items: center;
}

.view-top .view-btn {
   display: flex;
   flex-direction: row;
   gap: var(--px10);
}

.view-btn>button {
   font-size: var(--fs16);
   color: #888;
}

.view-btn>.active {
   color: var(--black);
   font-weight: 600;
}

.view-btn {
   position: relative;
   display: flex;
}

.view-btn button::after {
   content: '';
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: var(--px01);
   height: var(--px15);
   background-color: #ddd;
   margin-left: var(--px05);
}

.view-btn button:last-of-type::after {
   content: none;
}

.view-foot {
   width: 100%;
   margin: var(--px20) 0;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   border-bottom: var(--px01) solid var(--border);
   padding-bottom: var(--px20);
}

.view-foot>a {
   width: 100%;
   display: flex;
   flex-direction: row;
   gap: var(--px15);
}

.view-foot .info-no {
   width: 10%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   !i;!;
}

.view-foot .info-no span {
   font-weight: 800;
   font-size: var(--fs12);
   background-color: #2e6ae2;
   padding: var(--px05) var(--px08);
   border-radius: var(--px100);
   color: #fff;
}

.view-foot:last-of-type {
   border-bottom: 0;
   padding-bottom: 0;
}

.view-foot .view-info {}

.view-foot .view-info .info-name {
   font-size: var(--fs18);
   font-weight: 600;
   display: flex;
   flex-direction: row;
   align-items: center;
   margin: var(--px05) 0;
}

.info-name>span {
   border-radius: var(--px15);
   padding: var(--px02) var(--px10);
   background-color: var(--bg_8);
   margin: 0 var(--px03);
   font-size: var(--fs16);
   min-width: 147px;
   text-align: center;
}

.info-name>span.distance {
   font-weight: 600;
   min-width: 64px;
   text-align: center;
}

.info-name>span>strong {
   font-weight: 600;
}

.view-foot .view-info .info-fee {
   font-size: var(--fs18);
   font-weight: 600;
   display: flex;
   flex-direction: row;
   gap: var(--px08);
}

.info-fee>span {
   font-size: var(--fs15);
   color: #888;
}

.info-fee>span>strong {
   font-weight: 600;
}

.view-foot>button {
   padding: var(--px10) var(--px30);
   align-self: center;
}

/* List 표시 / 숨김 BUTTON
========================================================================== */
.view_offset {
   position: fixed;
   z-index: 80;
   bottom: var(--px280);
   margin: var(--px15) 0;
   display: flex;
   width: 100%;
   min-width: 21.875rem;
   max-width: 37.5rem;
   flex-direction: row;
   gap: var(--px20);
   justify-content: center;
}

.view_offset>button {
   display: none;
   background-color: #0c2b99;
   padding: var(--px10) var(--px30);
   font-size: var(--fs15);
   font-weight: 500;
   border-radius: var(--px30);
   color: #fff;
}

.view_offset {
   transition: bottom 0.3s ease;
}

.view_offset>button.active {
   display: block;
}


/* 주차장 정보 상세보기
========================================================================== */
.detail-view {
   background-color: #fff;
   position: fixed;
   top: 7.25rem;
   z-index: 200;
   min-width: 21.875rem;
   max-width: 37.5rem;
   width: 100%;
   max-height: calc(100vh - 7.25rem);
   min-height: calc(100vh - 7.25rem);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
}

.detail-warp {
   padding: var(--px13);
   gap: var(--px20);
   display: flex;
   flex-direction: column;
   min-height: calc(100vh - (7.25rem + 6.25rem));
   max-height: calc(100vh - (7.25rem + 6.25rem));
   overflow-y: auto;
}

.detail-info {
   margin-top: var(--px25);
}

.detail-info ul {
   display: flex;
   flex-direction: column;
   gap: var(--px10);
   width: 100%;
}

.detail-info ul>li {
   width: 100%;
   display: flex;
   flex-direction: row;
   gap: var(--px20);
}

.detail-info ul>li .info-name {
   font-size: var(--fs18);
   font-weight: 600;
   width: var(--px80);
   flex: 0 0 var(--px80);
}

.detail-fee > h4 {
   font-weight: 600;
   text-align: center;
   margin: var(--px10) 0;
   font-size: var(--fs22);
}

.detail-info ul>li .info-value {
   font-size: var(--fs18);
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
   overflow: hidden;
}

.detail-info ul>li .memo {
   text-overflow: unset;
   white-space: normal;
}

.detail-btn {
   background-color: #fff;
   height: var(--px100);
   min-height: var(--px100);
   bottom: 0;
   z-index: 500;
   position: sticky;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   gap: var(--px20);
}
.detail-btn::before {
   content: '';
   position: absolute;
   top: -50px;
   left: 0;
   right: 0;
   height: 50px;  /* 그라데이션의 높이 */
   background: linear-gradient(to bottom, transparent, #fff);
   pointer-events: none;
}

.detail-btn > button{
   width: var(--px150);
   padding: var(--px10) 0;
   border: 1px solid var(--border);
   border-radius: var(--px05);
   font-size: var(--fs16);
   font-weight: 500;
}

.detail-btn > .navi-btn {
   background-color: var(--main);
   color: #fff;
   border: var(--px02) solid var(--main);
}



/* Review
========================================================================== */
.detail-review {

}

.detail-review > h4 {
   font-weight: 600;
   text-align: center;
   margin: var(--px10) 0;
   font-size: var(--fs22);
}

.detail-review .review_wrap:nth-child(2) {
   padding-top: var(--px20);
   border-top: var(--px01) solid var(--border);
}

.detail-review .review_wrap{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: var(--px05);
   margin: var(--px10) 0;
   padding-bottom: var(--px20);
   border-bottom: var(--px01) solid var(--border);
}

.detail-review .review_wrap > .review_content{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   gap: var(--px10);
}

.detail-review .review_wrap > .review_content .review_info {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   gap: var(--px10);
}

.review_info > .review_name {
   font-weight: 600;
   font-size: var(--fs16);
   min-width: 29px;
}
.review_info > .review_car {
   font-size: var(--fs16);
   padding: 0 var(--px15);
   background-color: var(--bg_gray);
   border-radius: var(--px15);
   font-weight: 600;
   min-width: 58px;
   text-align: center;
}
.review_info > .review_date {
   font-size: var(--fs12);
}
.review_info > .star {

min-width: 90px;
}

.review_info > .star > i{
   cursor: none;
   width: 1.0rem;
}

.review_text .blind {

}

.review_text .blind i {
   filter: opacity(0.2);
   width: 1.0rem;
   margin: 0;
   margin-right: var(--px05);
}

.review_text .blind > span {
   color: #d1d1d1;
   display: flex;
}

.review_delete {
   padding: var(--px10);
   text-align: center;
   margin-top: -26px;
}
.review_text span{
    font-size: 16px;
}
.review_delete > i{
   margin-top: 0;
   cursor: pointer;

}


.detail-review .review_wrap > .review_content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   gap: var(--px10);
}