/* service/commercial/hospital.html - 페이지 전용 보정
 * 원본 반입 CSS(css/style-4.css)가 com__section 계열, service__swiper-vertical, service__review
 * 를 이미 정의한다. 이 파일은 반응형 잔여 격차와 라이브러리 결핍 보정만 최소로 담는다
 * (R5 - 전면 재작성 금지).
 *
 * COMMON 이슈 임시 완화(이 페이지 스코프만, guardrails.md service/index.html 발견 건과 동일 증상) -
 * css/style-4.css 전체에 body opacity 0 전환 규칙이 있다(원본 lenis/gsap 페이지-로드 리빌 게이트,
 * 전 페이지 공통). 재구현 JS(main.js)가 아직 이 게이트를 풀지 않아 정적 재현 시 body 가 영구
 * opacity 0 으로 남아 전체 화면이 백지로 렌더된다. main.js 의 site-wide 배선이 필요하므로
 * notes 에 COMMON 요청함. 이 페이지는 요청 전까지 최소 완화만 적용.
 */
body { opacity: 1 !important; }

/* COMMON 결핍(R12(9) 시간축 등장/리빌 - main.js 에 IntersectionObserver 배선이 아직 없다) -
 * 원본 CSS 는 .animate-element(.view 없음) 상태에서 섹션 본문에 opacity:0/visibility:hidden 을
 * 걸고, 원본 JS(gsap/lenis 번들, R19 재구현 대상 아님)가 스크롤 진입 시 .view 클래스를 붙여
 * .animate-element.view 규칙(fadeInUp 애니메이션, 섹션별 실측 지연·이징 포함)으로 리빌한다.
 * main.js 가 아직 이 관찰자를 배선하지 않아 정적 재현 시 .view 가 영구히 안 붙어 본문이 로드
 * 직후부터 안 보이는 상태로 남는다(R12(9) ecoworks 실사고와 동일 증상, site-wide). 근본대응은
 * main.js 공통 IntersectionObserver 배선(COMMON 요청, notes 참조)이며, 이 페이지는 요청 전까지
 * service/commercial/retail.html 선례와 동일하게 HTML 마크업에 .view 클래스를 정적으로 포함해
 * 최종 리빌 상태(반입 CSS 의 실측 fadeInUp 애니메이션·지연·이징 그대로)를 노출한다(발명 없음 -
 * 반입 CSS 규칙을 그대로 트리거만 함).
 */

/* com__section-07(Customer Review) 캐러셀은 원본이 swiper 라이브러리를 쓴다(analyze.json
 * interactions.slider: lib=swiper, slideCount=4, swipeHint=true, auto 전환 없음).
 * 미러에 swiper 라이브러리 스크립트 자체가 캡처되어 있지 않아(웹팩 번들 내부로 추정, 원본
 * script 태그 미노출) 자체 재구현(scroll-snap 대체) 대신 원본 라이브러리 반입을 시도했으나
 * 소스 부재로 반입 불가 - notes 에 COMMON 요청(swiper 라이브러리 미수집, 재미러 필요)으로
 * 에스컬레이션한다. 이 페이지는 최소한의 열람성(가로 스크롤 열람)만 CSS 로 보정하고, 원본
 * 반입 CSS(swiper-slide 폭, 이미지 규칙)는 그대로 둔다 - swiper 라이브러리 기본 골격
 * (flex 배치, overflow 처리 등)이 반입 CSS 에 없어 이 부분만 보강한다.
 */
.com__section-07 .swiper {
    overflow: hidden;
    width: 100%;
}
.com__section-07 .swiper-wrapper {
    display: flex;
    gap: 20rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.com__section-07 .swiper-slide {
    flex: 0 0 auto;
    width: 310rem;
    scroll-snap-align: start;
}
@media all and (max-width: 767px) {
    .com__section-07 .swiper-slide {
        width: 70%;
    }
}

/* 커스텀 패스(브레드크럼) 마지막 항목("병원")의 hover 서브메뉴(관공서/공장/상가)가 원본 CSS
 * ()의 중앙
 * 정렬 때문에 태블릿(768) 폭에서 문서 우측 밖으로 살짝 넘친다(마지막 li 가 우측 끝에 붙어
 * justify-content:flex-end 로 배치되는 원본 레이아웃 특성 + 서브메뉴 폭이 이 페이지만 92px로
 * 상대적으로 넓어서 발생, R3 문서 가로 overflow 0 요구 위반). 원본 CSS 파일(style-4.css) 은
 * 공통 자산이라 수정 범위 밖 - 이 페이지 스코프에서만 서브메뉴 정렬 기준을 우측 정렬로 보정한다
 * (표시 위치만 미세 조정, 크기/콘텐츠는 원본 그대로).
 */
@media all and (max-width: 1023px) {
    .path-custom ol > li:last-child > ul {
        left: auto;
        right: 0;
        transform: none;
    }
}

/* com__section-05 h3 좌우의 장식용 따옴표 svg(원본 CSS: h3 svg:nth-child(4){position:absolute;
 * right:-30rem;})가 h3 우측 바깥으로 30px 튀어나가도록 설계되어 있다. wrap-medium 좌우 여백이
 * 1340px 이하에서 20px 로 줄어드는데(원본 반입 CSS), svg 돌출폭(30px)이 이 여백보다 커서 태블릿
 * (768) 폭에서 문서 우측 밖으로 10px 넘친다(R3 문서 가로 overflow 0 요구 위반). 디자인 의도(좌우
 * 장식 따옴표)는 유지하되 여백이 좁아지는 구간에서만 튀어나오는 폭을 여백 안쪽으로 맞춘다.
 */
@media all and (max-width: 1023px) {
    .com__section-05 .service__contents-wr h3 svg:nth-child(4) {
        right: -16rem;
    }
    .com__section-05 .service__contents-wr h3 svg:nth-child(1) {
        left: -16rem;
    }
}