footer#customer .p { display: none; } footer#customer .m { display: block; } footer#customer { padding: 37px; /* 앱(웹뷰)에서 하단 safe-area(홈 인디케이터) 영역까지 푸터 회색을 채운다. 비-노치·모바일웹은 env()=0 이라 37px 그대로. 앱이 하단 인셋을 안 칠할 때만 커진다(하단 이질감 해소). */ padding-bottom: calc(37px + env(safe-area-inset-bottom)); background-color: #F7F7F7; text-align: center; color: black; width: 100%; } footer#customer .footer-content { margin: 0 15px; } footer#customer .footer-content .sns { display: flex; justify-content: space-between; } footer#customer .footer-title { font-size: 12px; font-weight: 700; line-height: 17px; margin-bottom: 30px; } footer#customer .footer-content .sns { text-align: center; max-width: 415px; margin: auto; } footer#customer .footer-content .sns li img { width: 52px; } footer#customer .footer-content .sns p { font-size: 10px; font-weight: 400; line-height: 15px; margin-top: 8px; width: 55px; word-break: keep-all; } footer#customer .footer-company { font-size: 10px; font-weight: 500; line-height: 17px; margin-top: 32px; } footer#customer .footer-company .footer-customer-center { font-size: 12px; font-weight: 700; line-height: 18px; } footer#customer .footer-company .footer-terms { font-weight: 700; } /* tablet */ @media screen and (min-width: 576px) { footer#customer .p { display: none; } footer#customer .m { display: block; } footer#customer { padding: 58px; background-color: #F7F7F7; color: black; } footer#customer .footer-title { font-size: 20px; line-height: 29px; margin-bottom: 69px; } footer#customer .footer-content .sns li img { width: 83px; } footer#customer .footer-content .sns p { font-size: 16px; line-height: 23px; margin-top: 12px; width: 83px; } footer#customer .footer-company { font-size: 16px; line-height: 23px; margin-top: 41px; } footer#customer .footer-company .footer-customer-center { font-size: 20px; line-height: 29px; } } /* pc */ @media screen and (min-width: 858px) { footer#customer .p { display: block; } footer#customer .m { display: none; } footer#customer { padding: 40px 0; background-color: #333333; color: white; text-align: unset; } footer#customer .p { display: flex; flex-direction: row; max-width: 810px; margin: auto; } footer#customer .footer-title { font-size: 14px; line-height: 20px; margin-bottom: 16px; } footer#customer .footer-content { margin: 0 19px 0 0; } footer#customer .footer-content .sns { width: 250px; } footer#customer .footer-content .sns li img { width: 36px; } footer#customer .footer-content .sns p { font-size: 10px; line-height: 14px; margin-top: 8px; width: 55px; word-break: keep-all; } footer#customer .footer-company { margin-top: 0; font-size: 10px; line-height: 14px; font-weight: 400; text-align: right; } footer#customer .footer-company .footer-customer-center { font-size: 14px; line-height: 20px; } footer#customer p { color: white; } footer#customer a { color: white; } } /* #439: 예약 폼 페이지는 로 모바일/태블릿 푸터(.m)를 숨긴다. (레이아웃 데코레이트가 콘텐츠 속성을 병합하므로 여기에 건다 — th:with 는 body 까지 안 내려감) PC 푸터(.p)·플로팅 Ask AI/채팅 버튼은 그대로. 3단 선택자라 위 미디어쿼리의 .m{display:block} 보다 우선. */ html.gl-no-footer-m footer#customer .m { display: none; } /* #439: .m 을 숨긴 상태에서 footer 자체의 padding(37px) 이 빈 띠로 남지 않도록. PC(≥858px, .p 노출) 는 건드리지 않는다. */ @media screen and (max-width: 857.98px) { html.gl-no-footer-m footer#customer { padding: 0; } }