@charset "utf-8";


/*============================================================*/
/* 요양시설 - 목록 */
/*============================================================*/
.facility-list .total {margin-bottom: 2rem; font-size: 1.4rem; font-family: 'NanumSquareRoundBold'; font-weight: 500;}
.facility-list .total strong {color: var(--col-theme);}

.facility-list ul {display: flex; flex-wrap: wrap; gap: 2rem;}
.facility-list > ul > li {width: calc(50% - 1rem);}
.facility-list li.no-data {width: 100%;}

.facility-list li .thumb {position: relative; width: 100%; aspect-ratio: 163/172; margin-bottom: 1.5rem; border-radius: .8rem; background-position: center top; background-size: cover; background-repeat: no-repeat; overflow: hidden;}
.facility-list li .thumb img {opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; transition: var(--trans-25);}

.facility-list li .txt h4 {font-family: 'NanumSquareRoundBold'; font-weight: 700;}
.facility-list li .txt p {margin-top: .4rem; color: #666; font-size: 1.2rem;}

@media (hover: hover) and (pointer: fine) {
    .facility-list li a:hover .thumb img {transform: translate(-50%, -50%) scale(1.15);}
}


/*============================================================*/
/* 요양시설 - 상세 */
/*============================================================*/
/* 공통 */
.facility-info .info {padding: 1.6rem 0; border-bottom: 1px solid var(--col-bd-gray);}
.facility-info .info .title {margin-bottom: 1.2rem; font-size: 1.8rem; font-family: 'NanumSquareRoundExtraBold'; font-weight: 500; word-break: break-all;}

.facility-info .info dl {display: flex; word-break: break-all;}
.facility-info .info dt {flex: 0 0 auto;}
.facility-info .info dt::after {content: ":"; margin: 0 .4rem;}
.facility-info .info dd {padding-right: 1rem;}

/* 썸네일 */
.facility-info .thumb {position: relative; width: 100%; aspect-ratio: 375/230; overflow: hidden;}
.facility-info .thumb img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; transition: var(--trans-25);}

/* 제목 - 즐겨찾기 체크 */
.facility-info .info .title-wrap {position: relative;}
.facility-info .info .title-wrap .title {padding-right: 5rem;}

.check-bookmark {position: absolute; top: -0.6rem; right: 0;}
.check-bookmark [type="checkbox"]:checked + label,
.check-bookmark [type="checkbox"]:not(:checked) + label {width: 3.8rem; aspect-ratio: 1; padding: 0; line-height: 1;}
.check-bookmark [type="checkbox"]:checked + label:before,
.check-bookmark [type="checkbox"]:not(:checked) + label:before,
.check-bookmark [type="checkbox"]:checked + label:after,
.check-bookmark [type="checkbox"]:not(:checked) + label:after {top: 50%; left: 50%; transform: translate(-50%,-50%); width: 3.8rem;}
.check-bookmark [type="checkbox"]:checked + label:before,
.check-bookmark [type="checkbox"]:not(:checked) + label:before {background: url("/img/page/bookmark.png") center/contain no-repeat; border: 0; transition: var(--trans-25);}
.check-bookmark [type="checkbox"]:checked + label:after,
.check-bookmark [type="checkbox"]:not(:checked) + label:after {background: url("/img/page/bookmark_check.png") center/contain no-repeat; border: 0;}
@media (hover: hover) and (pointer: fine) {
    .check-bookmark:hover [type="checkbox"]:checked + label:before,
    .check-bookmark:hover [type="checkbox"]:not(:checked) + label:before {background: url("/img/page/bookmark_check.png") center/contain no-repeat;}
}

/* 제목 */
.facility-info .info .des-list {display: flex; flex-wrap: wrap;}
.facility-info .info .des-list > * {width: 100%;}
.facility-info .info .des-list .w50 {width: calc(50%)}
.facility-info .info.name dl {font-size: 1.4rem;}
.facility-info .info.name dl + dl {margin-top: 1.2rem;}
.facility-info .info.name dt {margin-top: -0.1rem; font-family: 'NanumSquareRoundBold'; font-weight: 500;}
.facility-info .info.name a {color: #0C79FF; text-decoration: underline; text-underline-offset: .4rem;}

/* 위치 */
.facility-info .info .addr {display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;}
.facility-info .info .addr p {font-size: 1.4rem; word-break: break-all;}
.facility-info .info .addr button {position: relative; padding-left: 1.6rem; color: var(--col-darkgray); font-size: 1.4rem; transition: var(--trans-25);}
.facility-info .info .addr button::before {content: ""; position: absolute; top: 0.2rem; left: 0; width: 1rem; aspect-ratio: 10/12; background: url("/img/icon_copy_gray.svg") center/contain no-repeat; transition: var(--trans-25);}
@media (hover: hover) and (pointer: fine) {
    .facility-info .info .addr button:hover {color: var(--col-theme);}
    .facility-info .info .addr button:hover::before {background: url("/img/icon_copy_blue.svg") center/contain no-repeat;}
}

/* 운영시간 */
.facility-info .info.operate dl {font-size: 1.4rem;}
.facility-info .info.operate dl + dl {margin-top: .8rem;}
.facility-info .info.operate dd {font-family: 'NanumSquareRoundBold'; font-weight: 500;}

/* 상세 이미지 슬라이드 */
.detail-slide .swiper-pagination {position: relative; margin-top: 1.7rem;}
.detail-slide .swiper-pagination-bullet-active {background: var(--col-theme);}

/* 본인부담금 */
.facility-info .info.price .num {font-family: 'NanumSquareRoundBold'; font-weight: 500;}
.facility-info .info.price .num strong {color: var(--col-theme); font-family: 'NanumSquareRoundExtraBold'; font-weight: 500; font-size: 113%;}
.facility-info .info.price p {margin-top: 1rem; font-size: 1.4rem;}

/* 번호 */
.facility-info .info.button .container {display: flex;}
.facility-info .info.button a {flex: 1 0 0; display: flex; justify-content: center; align-items: center; height: 5rem; text-align: center; font-family: 'NanumSquareRoundBold'; font-weight: 500;}


/*============================================================*/
/* 요양시설 - 지도 */
/*============================================================*/
.map-container,
.map-container .root_daum_roughmap,
.map-container .root_daum_roughmap .wrap_map {height: 100%;}
.map-container .root_daum_roughmap .wrap_controllers {display: none;}


/*============================================================*/
/* 내 정보, 정보 수정 */
/*============================================================*/
.profile {text-align: center;}
.profile .img {position: relative; width: 10.8rem; aspect-ratio: 108/111; margin: 0 auto; background: var(--col-wt); border: 1px solid var(--col-bd-gray); border-radius: 50%; overflow: hidden;}
.profile .img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; transition: var(--trans-25);}
.profile .name {display: flex; justify-content: center; align-items: baseline; margin: 1.6rem 0; color: var(--col-darkgray); font-family: 'NanumSquareRoundBold'; font-weight: 500;}
.profile .name strong {color: var(--col-bk); font-family: 'NanumSquareRoundExtraBold'; font-weight: 500; font-size: 170%;}
.profile .sub {font-size: 1.4rem; word-break: break-all;}

.profile ul {display: flex; margin-top: 3.2rem;}
.profile ul li {flex: 1 0 0; background-position: center top; background-size: 3.6rem; background-repeat: no-repeat;}
.profile ul li.notice {background-image: url("/img/page/icon_notice.png")}
.profile ul li.qna {background-image: url("/img/page/icon_qna.png")}
.profile ul li.modify {background-image: url("/img/page/icon_setting.png")}
.profile ul li a {display: block; width: 100%; height: 100%; padding-top: calc(3.6rem + 1.6rem); color: var(--col-darkgray); font-size: 1.4rem; font-family: 'NanumSquareRoundBold'; font-weight: 500; transition: var(--trans-25);}

.mypage-list {margin-top: 3.6rem;}
.mypage-list ul {border-top: 1px solid var(--col-bd-gray);}
.mypage-list li {border-bottom: 1px solid var(--col-bd-gray);}
.mypage-list li a,
.mypage-list li button {position: relative; display: block; width: 100%; padding: 1.8rem 2.4rem 1.8rem 0; text-align: left; line-height: 1;}
.mypage-list li a::after,
.mypage-list li button::after {content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1.4rem; aspect-ratio: 15/18; background: url("/img/icon_arrow_right_gray.svg") center/contain no-repeat;}
.mypage-list li a div,
.mypage-list li button div {font-family: 'NanumSquareRoundBold'; font-weight: 500; transition: var(--trans-25);}
.mypage-list li a p,
.mypage-list li button p {margin-top: .6rem; color: var(--col-darkgray); font-size: 1.4rem;}


/* 정보 수정 */
.modify-list {margin-top: 3.6rem;}
.modify-list {border-top: 1px solid var(--col-bd-gray);}
.modify-list dl {position: relative; display: flex; width: 100%; padding: 1.8rem 0; border-bottom: 1px solid var(--col-bd-gray); text-align: left;}
.modify-list dt {flex: 0 0 auto; font-family: 'NanumSquareRoundBold'; font-weight: 500; transition: var(--trans-25);}
.modify-list dd {word-break: break-all;}
.modify-list .id dt:after,
.modify-list .name dt:after {content: ":"; margin: 0 .4rem;}

.modify-list .pw {justify-content: space-between;}



/*============================================================*/
/* 영수증 등록/촬영 */
/*============================================================*/
.pageShoot {position: relative; width: 100dvw; height: 100dvh; overflow: hidden;}
.pageShoot .shoot-screen {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
.pageShoot .btn-wrap {position: fixed; bottom: 2rem; right: 2rem; display: flex; gap: 2rem; z-index: 100;}



/*============================================================*/
/* 영수증 - 작성, 상세 */
/*============================================================*/
/* 썸네일 */
.receipt-info .thumb {position: relative; width: 100%; max-width: 375px; aspect-ratio: 375/428; margin: 0 auto 2.4rem; border-bottom: 1px solid var(--col-bd-gray); overflow: hidden;}

/* 반려 사유 */
.reject {display: flex; gap: 1rem; margin-bottom: 1.6rem;}
.reject span {display: flex; justify-content: center; align-items: center; min-width: 4.6rem; height: 2.4rem; background: var(--col-red); color: var(--col-wt); font-size: 1.2rem; font-family: 'NanumSquareRoundBold'; font-weight: 500; line-height: 1;}
.reject p {margin-top: 0.3rem; color: var(--col-red); font-size: 1.4rem; font-family: 'NanumSquareRoundBold'; font-weight: 500; word-break: break-all;}

/* 정보 입력 */
.receipt-info dl {display: flex; align-items: center; gap: 1rem;}
.receipt-info dl + dl {margin-top: 1.4rem;}
.receipt-info dt {flex: 0 0 auto; min-width: 8.4rem; font-size: 1.4rem;}
.receipt-info dd {flex: 1 0 0; font-family: 'NanumSquareRoundBold'; font-weight: 500;}
.receipt-info dl input {height: 4.6rem; border: 1px solid var(--col-bd-gray); padding: 1.4rem;}

.receipt-info .card {margin-top: 2.2rem; padding-top: 2.2rem; border-top: 1px solid var(--col-bd-gray);}

/* 상품 입력 */
.tb-receipt .head,
.tb-receipt .body .item {display: flex; gap: .6rem;}
.tb-receipt .head,
.tb-receipt .body,
.tb-receipt .total {padding: 1.4rem 0;}
.tb-receipt .body .item {font-family: 'NanumSquareRoundBold'; font-weight: 500;}
.tb-receipt .body .item + .item {margin-top: 1rem;}
.tb-receipt .name {width: 47%; text-align: left;}
.tb-receipt .num {width: 16%; text-align: center;}
.tb-receipt .price {width: 37%; text-align: right;}

.tb-receipt .head {border-top: 1px solid var(--col-bd-gray);}
.tb-receipt .head .name,
.tb-receipt .head .num,
.tb-receipt .head .price {padding: 0 .8rem;}
.tb-receipt .body {border-top: 1px solid var(--col-bd-gray); border-bottom: 1px solid var(--col-bd-gray);}

.tb-receipt input {height: 3.6rem; border: 1px solid var(--col-bd-gray); padding: .8rem 1rem;}
.tb-receipt .name input {text-align: left;}
.tb-receipt .num input {text-align: center;}
.tb-receipt .price input {text-align: right;}

.tb-receipt .total {border-bottom: 1px solid var(--col-bd-gray);}
.tb-receipt .total dt {font-size: 1.6rem; font-family: 'NanumSquareRoundBold'; font-weight: 700;}
.tb-receipt .total dd,
.tb-receipt .total input {text-align: right; color: var(--col-theme); font-size: 1.8rem; font-family: 'NanumSquareRoundExtraBold'; font-weight: 700;}


/* 사진 등록 */
.detail-img {padding-top: 1rem;}
.detail-img p {text-align: right; font-size: 1.4rem; font-family: 'NanumSquareRoundBold'; font-weight: 500;}

.fileUpload {position: relative; width: 100%; padding: 2rem 1.4rem; border: 1px solid var(--col-bd-gray); text-align: left; font-family: 'NanumSquareRoundBold'; font-weight: 700; overflow: hidden; cursor: pointer;}
.fileUpload::after {content: ""; position: absolute; top: 50%; right: 1.2rem; transform: translateY(-50%); width: 1.6rem; aspect-ratio: 1; background: url("/img/plus_gray.svg") center/contain no-repeat;}
.fileUpload input[type="file"] {opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: auto; height: auto; cursor: pointer;}
.fileUpload span {pointer-events: none;}

.detail-img .thumbnails {display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem;}
.detail-img .thumbnails .detailImg {position: relative; width: calc(33.33% - .6rem); aspect-ratio: 1; background: #F5F5F5; border: 1px solid var(--col-bd-gray); overflow: hidden;}
.detail-img .thumbnails .detailImg img {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; object-fit: scale-down;}
.detail-img .thumbnails .detailImg .btn-delete {position: absolute; top: .5rem; right: .5rem; width: 3rem; aspect-ratio: 1; border-radius: 50%; background: var(--col-red) url("/img/delete_wt.svg") center/2.2rem no-repeat; z-index: 1;}


/* 메모 */
.user-memo {position: relative;}
.user-memo .label {position: absolute; top: 1rem; left: 1.4rem; font-family: 'NanumSquareRoundBold'; font-weight: 500;}
.receipt-info textarea {padding: 4rem 1.4rem 1.4rem; border: 1px solid var(--col-bd-gray); font-size: 1.4rem;}
.receipt-info textarea::-webkit-scrollbar {width: 10px;}
.receipt-info textarea::-webkit-scrollbar-thumb {background-color: var(--col-gray); border: 2px solid var(--col-wt); border-radius: 100px; cursor: pointer;}



/*============================================================*/
/* 영수증 - 목록 */
/*============================================================*/
/* 필터 */
.receipt-filter input {width: 18rem; height: 4.2rem; padding: 0 1.4rem; border: 1px solid var(--col-bd-gray);}

/* 리스트 */
.receipt-list {border-bottom: 1px solid var(--col-bd-gray);}
.receipt-list .no-data {display: flex; justify-content: center; align-items: center; text-align: center; height: 300px; font-family: 'NanumSquareRoundBold'; font-weight: 500;}

.receipt-list li + li {border-top: 1px solid var(--col-bd-gray);}
.receipt-list li a {display: flex; gap: 1.5rem; padding: .8rem .6rem;}
.receipt-list li .thumb {flex: 0 0 auto; position: relative; width: 9.3rem; aspect-ratio: 93/91; background: #F5F5F5; overflow: hidden;}
.receipt-list li .thumb img {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; object-fit: cover;}

.receipt-list li .name {font-family: 'NanumSquareRoundExtraBold'; font-weight: 700;}
.receipt-list li dl {display: flex; font-size: 1.4rem;}
.receipt-list li dl + dl {margin-top: .6rem;}
.receipt-list li dt {flex: 0 0 auto; position: relative; font-family: 'NanumSquareRoundBold'; font-weight: 500;}
.receipt-list li dt::after {content: ":"; margin: 0 0.2rem;}

.receipt-list .reject {position: relative; margin: 0;}
.receipt-list .reject::before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(247,247,247,60%); z-index: 1; pointer-events: none;}
.receipt-list .reject::after {content: "반려"; position: absolute; top: .6rem; left: .6rem; display: inline-block; padding: .2rem 1rem; background: var(--col-red); color: var(--col-wt); font-size: 1.4rem; font-family: 'NanumSquareRoundBold'; font-weight: 500; z-index: 1;}



/*============================================================*/
/* 리스트 관리 */
/*============================================================*/
.risk-chart {position: relative; width: 100%; aspect-ratio: 343/315; padding: 3rem; background: #F1F5F9;}
.risk-chart .chart {width: 100%; height: 100%;}
.risk-chart .chart-title {position: absolute; bottom: 1rem; left: 1rem; color: var(--col-darkgray); font-size: 1.2rem;}

.tb-legend {margin-top: 2rem;}
.tb-legend tr th,
.tb-legend tr td {border: 0; border-bottom: 1px solid var(--col-bd-gray);}
.tb-legend tr th {background: none; font-size: 1.5rem;}
.tb-legend tr td {text-align: right; font-size: 1.4rem;}
.color-box-container {text-align: left; font-weight: 500; line-height: 1.25}
.legend-color {display: inline-block; width: .6rem; aspect-ratio: 1; border-radius: 50%; margin-right: 1rem; margin-bottom: 0.2rem;}
.legend-text {margin-right: 8px;}



/*============================================================*/
/* 리스트 관리 : 2025-04-26 새로운 버전 */
/*============================================================*/
.top-logo {position: relative; padding: 0.9rem 0; background: #1FC3FF; text-align: center;}
.top-logo h3 {color: #FFF3C4; font-family: 'Pretendard'; font-size: 3.2rem; font-weight: 800; font-style: italic; line-height: 1;}
.top-logo .com {position: absolute; top: 50%; right: 2rem; transform: translateY(-50%);}

.top-btn {padding: 2rem 0;}
.top-btn p {margin-bottom: 1.4rem; text-align: center; font-family: 'Pretendard'; font-weight: 500; font-style: italic;}
.top-btn .btn-list {display: flex; justify-content: center; align-items: center; gap: .4rem;}
.top-btn .btn-list a {display: flex; justify-content: center; align-items: center; min-width: 8.8rem; height: 3.3rem; padding: 0 1rem; background: #F2F2F2;}

/* 아코디언 */
.accordion-list li h3 {position: relative; padding: 2rem 1rem; border-bottom: 1px solid var(--col-bd-gray); cursor: pointer;}
.accordion-list li h3::before {content: ""; display: inline-block; width: .6rem; aspect-ratio: 1; border-radius: 50%; margin-right: 1rem; margin-bottom: 0.2rem;}
.accordion-list li h3::after {content: ""; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 12px; aspect-ratio: 12/8; background: url("../img/select_gray.svg") center/contain no-repeat; transition: all 0.3s ease-in-out;}
.accordion-list li:nth-child(1) h3::before {background: #0EC8BA;}
.accordion-list li:nth-child(2) h3::before {background: #189CF1;}
.accordion-list li:nth-child(3) h3::before {background: #6578EE;}
.accordion-list li:nth-child(4) h3::before {background: #A17FF0;}
.accordion-list li:nth-child(5) h3::before {background: #E784C5;}
.accordion-list li:nth-child(6) h3::before {background: #F89A57;}
.accordion-list li:nth-child(7) h3::before {background: #FFD651;}

.accordion-list li.active h3 {font-weight: 600;}
.accordion-list li.active h3::after {transform: rotate(180deg);}
.accordion-list li.active .answer {max-height: none; padding: 2.2rem 0; border-bottom: 1px solid var(--col-bd-gray);}

.accordion-list li .answer {max-height: 0; cursor: pointer; overflow: hidden; transition: max-height 0.3s ease;}

.accordion-list .icon-title {display: flex; align-items: center; gap: .3rem;}
.accordion-list .icon-title h4 {font-size: 1.5rem; font-weight: 600;}

/* 아코디언 내용 */
.main-container.open {height: calc(100dvh - var(--ft-height) - 7.7rem);}
.progress-box.open {display: block; padding-top: 2rem;}

.graph-item {margin-bottom: 1.8rem; text-align: center;}
.graph-item .donut-wrap {position: relative; width: 100%; max-width: 260px; aspect-ratio: 1; margin: 2rem auto 0;}
.graph-item .donut-wrap canvas {width: 100%; height: 100%;}
.graph-item .donut-wrap p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #777; font-size: 14px; font-weight: 600;}
.graph-item .donut-wrap p strong {color: var(--col-bk); font-size: 180%;}

.graph-item .ratio {display: inline-block; margin-top: 3rem; padding: 1rem 2rem; text-align: center; border-radius: 2rem; background: #09317D; color: #fff; font-size: 1.5rem; line-height: 1;}

.grid-item {display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;}
.grid-item .g100 {grid-column: 1/4;}

.box-item {padding: 1.2rem; background: #fff; border: 1px solid rgba(241,241,241,0.8); border-radius: .8rem; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);}
.accordion-list .box-item .icon-title {margin-bottom: 1rem;}
.box-item dl {display: flex; justify-content: space-between; gap: 2rem; font-size: 14px;}
.box-item dl + dl {margin-top: .6rem;}
.box-item dt {flex: 0 0 auto; font-weight: 300;}
.box-item dd {display: flex; align-items: flex-end; gap: 1rem; text-align: right;}
.box-item dd .price {word-break: break-all;}
.box-item dd .unit {flex: 0 0 auto;}
.box-item dl.total {margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--col-bd-gray);}
.box-item dl.total dt {font-weight: 700;}
.box-item dl.total dd {color: var(--col-red); font-weight: 700;}

.progress-box {display: none; position: fixed; bottom: 7.2rem; left: 2rem; right: 2rem; background: #fff;}
.progress-box .inner {display: flex; align-items: center; gap: 1rem; padding: 1.4rem; background: #F5F5F5; border-radius: .8rem; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.15);}
.progress-box p {position: relative; font-family: 'Pretendard'; font-weight: 500;}
.progress-box p::before {content: ""; display: inline-block; width: 1px; height: 1rem; margin-right: 1rem; background: #A6A6A6;}

@media (max-width: 576px) {
    .box-item {grid-column: 1/4;}
}