@charset "utf-8";
/* ==========================================================================
   mobile.css — 모바일(≤991px) 규칙 (기획서 §2-1)
   - 텍스트 크기는 원본처럼 992px 이하에서, 레이아웃은 991px 이하에서 전환
   ========================================================================== */

/* M 전환: 폰트 ------------------------------------------------------------- */
@media (max-width: 992px) {
    :root { --fs-h2: 24px; --fs-h3: 20px; --fs-h4: 18px; --section-y: 56px; }
    .section-label { font-size: 14px; }
    .section-title,
    .section-title-l { line-height: 1.45; }
    .section-head { margin-bottom: 24px; }
    .section-desc { font-size: 15px; }

}

/* MO: 레이아웃 ------------------------------------------------------------- */
@media (max-width: 991px) {
    :root {
        --header-h: 60px;   /* 모바일 로고바 60px 고정 (전화는 메뉴 하단 · 플로팅 버튼) */
        --pad-x: 15px;
    }

    /* PC 전용 영역 숨김 */
    .pc-only, .pc-only-inline { display: none !important; }
    [id] { scroll-margin-top: calc(var(--header-h) + 16px); }   /* 앵커 이동 시 로고바에 가리지 않도록 */

    /* 메인 비주얼 */
    .main-visual .visual-bg { height: 480px; }
    .main-visual .visual-text { margin-top: -110px; padding: 0 20px; }
    .visual-text__eyebrow { margin-bottom: 10px; font-size: 12px; letter-spacing: 2px; }
    .visual-text__ko,
    .main-visual .visual-text__ko { font-size: 30px; }
    .main-visual__cta { top: calc(50% + 30px); gap: 22px; }
    .main-visual__buttons { gap: 8px; }
    .main-visual__cta .btn { height: 48px; padding: 0 20px; font-size: 15px; }
    .main-visual__buttons .btn-primary { height: 52px; padding: 0 24px; font-size: 16px; }
    /* 신뢰 정보: 좁은 화면에서는 줄바꿈되므로 세로선 대신 간격으로 구분 */
    .trust-line { column-gap: 14px; }
    .trust-line li { gap: 4px; padding: 0; font-size: 12px; }
    .trust-line li + li::before { display: none; }
    .trust-line li::after { width: 12px; height: 12px; }
    .slider__dots { bottom: 22px; }

    /* 플로팅 */
    .floating { right: 14px; bottom: 20px; }
    .floating__btn { width: 52px; height: 52px; }

    /* 푸터 */
    .site-footer__cta-inner { flex-direction: column; align-items: stretch; gap: 22px; padding-top: 32px; padding-bottom: 32px; }
    .site-footer__cta::before { right: -120px; width: 240px; height: 240px; border-width: 36px; }
    .site-footer__cta-title { font-size: 21px; }
    .site-footer__cta-desc { font-size: 14px; }
    /* 진행 3단계: 좁은 화면은 연결선 없이 작은 알약 3개 */
    .cta-steps { row-gap: 6px; margin-top: 16px; }
    .cta-steps li { gap: 6px; height: 30px; padding: 0 10px 0 5px; font-size: 12px; }
    .cta-steps li + li { margin-left: 10px; }
    .cta-steps li + li::before { left: -11px; width: 10px; }
    .cta-steps__no { width: 20px; height: 20px; font-size: 11px; }
    .site-footer__cta-actions { width: 100%; gap: 8px; }
    .site-footer__cta-btn { height: 52px; font-size: 16px; }
    .site-footer__cta-tel { height: 48px; font-size: 17px; }
    .site-footer__main { grid-template-columns: 1fr; gap: 36px; padding: 40px 0 32px; }
    .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
    .site-footer__col-title { margin-bottom: 12px; }
    .site-footer__col ul { gap: 8px; }
    .site-footer__col a { font-size: 14px; }
    .site-footer__biz { flex-direction: column; gap: 2px; }
    .site-footer__biz li + li::before { display: none; }
    .site-footer__bottom { padding-bottom: 120px; }   /* 플로팅 버튼에 가리지 않도록 */

    /* KBEI · 다이어그램 */
    .kbei { padding: 24px 0; }
    .kbei--bg { background-image: var(--bg-mo); }
    .kbei__frame { border-radius: var(--radius-sm); }
    .kbei__caption { font-size: 13px; }
    .house-diagram { padding: 24px 0; }

    /* 고객 후기 섹션: 숫자 3칸 → 추천 후기 → 작은 후기 가로 넘기기 */
    .rv__head { flex-direction: column; align-items: stretch; gap: 20px; margin-bottom: 24px; }
    .rv__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 0; border-radius: 14px; background: #fff; }
    .rv__stat { padding: 0 8px; text-align: center; }
    .rv__stat:last-child { padding-right: 8px; }
    .rv__stat dt { font-size: 11px; line-height: 1.3; }
    .rv__stat dd { flex-wrap: wrap; justify-content: center; gap: 2px; }
    .rv__stat strong { font-size: 24px; letter-spacing: -.5px; }
    .rv__stat span { font-size: 12px; }
    .rv__stat .rv__stars { display: none; }
    .rv__body { grid-template-columns: 1fr; gap: 12px; }
    .rv__featured { gap: 24px; padding: 30px 22px 24px; border-radius: 16px; }
    .rv__featured::before { top: -10px; right: 12px; font-size: 140px; }
    .rv__quote p { font-size: 18px; }
    .rv__list,
    .rv__rest {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        gap: 10px;
        margin: 0 calc(-1 * var(--pad-x));
        padding: 0 var(--pad-x) 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--pad-x);
        scrollbar-width: none;
    }
    .rv__list::-webkit-scrollbar,
    .rv__rest::-webkit-scrollbar { display: none; }
    .rv__rest { margin-top: 10px; }
    .rv-card { padding: 22px 20px 18px; border-radius: 16px; scroll-snap-align: start; }
    .rv__list.is-more { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
    .rv__gallery { margin-top: 36px; }
    .rv__actions { flex-direction: column; gap: 8px; margin-top: 28px; }
    .rv__actions .btn { width: 100%; height: 50px; }
    .marquee__track { gap: 3px; }
    .marquee__item img { width: 200px; height: 150px; }

    /* 고객센터 · 청소문의 */
    .customer-center { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
    .cc-card { padding: 26px 20px; }
    .cc-card__title { font-size: 18px; }
    .cc-card__action--tel { font-size: 22px; }
    .inquiry-section__grid { grid-template-columns: 1fr; gap: 28px; }
    .inquiry-section__map { min-height: 0; aspect-ratio: 700 / 611; border-radius: 12px; }   /* 기존 모바일 지도 이미지 비율 */
    .inquiry-section__form { padding: 28px 20px; border-radius: 16px; }
    .inquiry-form__title { font-size: 22px; }
    .inquiry-form__head { margin-bottom: 22px; padding-bottom: 18px; }

    /* 메인 */
    .intro { padding-top: 36px; }
    .intro__grid { grid-template-columns: 1fr; gap: 24px; }
    .intro__text { padding-bottom: 0; }
    .intro__eyebrow { font-size: 17px; }
    .intro__title { margin-top: 14px; font-size: 30px; letter-spacing: -.5px; }
    .intro__bar { width: 48px; margin: 24px 0 20px; border-top-width: 5px; }
    .intro__desc { font-size: 15px; }
    .intro__image { width: 48%; max-width: 220px; margin: 0 auto; }
    /* 핵심 서비스 카드: 세로로 3장, 카드는 [사진 | 글] 가로형 */
    .service-types { grid-template-columns: 1fr; gap: 10px; }
    .service-type { flex-direction: row; border-radius: 14px; }
    /* 사진은 칸을 채우기만 하고 카드 높이에 관여하지 않음 → 3장 높이 동일 (원본 비율이 달라 제각각이던 문제) */
    .service-type__image { position: relative; flex: none; width: 38%; max-width: 300px; height: auto; min-height: 170px; }
    .service-type__image img { position: absolute; inset: 0; }
    .service-type__body { padding: 16px; }
    .service-type__title { margin-top: 4px; }
    .service-type__items { margin-top: 4px; font-size: 13px; }
    .service-type__point { margin-top: 8px; font-size: 12px; }
    .service-type__more { padding-top: 10px; font-size: 13px; }

    /* 부가 서비스 띠 */
    .service-extras { grid-template-columns: 1fr; gap: 4px; padding: 16px 18px 6px; border-radius: 14px; }
    .service-extras__title { font-size: 16px; }
    .service-extra { flex-wrap: wrap; gap: 12px; padding: 14px 0; }
    .service-extra__icon { width: 40px; height: 40px; border-radius: 12px; }
    .service-extra__icon::after { inset: 10px; }
    .service-extra__text { flex-basis: calc(100% - 52px); }
    .service-extra__name { font-size: 16px; }
    .service-extra__items { font-size: 13px; }
    .service-extra__btn { width: 100%; height: 40px; }
    .service-needs { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px 18px; border-radius: 14px; }   /* 위 부가 서비스 띠와 같은 여백 */
    .service-needs__title { font-size: 16px; }
    .service-needs__list { grid-template-columns: 1fr; gap: 6px; }
    .service-needs__list li { min-height: 44px; padding: 10px 14px; font-size: 14px; }
    .points__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .point { padding: 20px 12px; border-radius: 14px; }
    .point img { width: 80px; height: 80px; }
    .point__title { margin-top: 10px; font-size: 14px; }
    .point__desc { font-size: 12px; }

    /* 서브 페이지 상단 */
    .page-hero { padding: 36px 0 32px; }
    .page-hero--photo { min-height: 260px; padding: 0 0 28px; background-image: var(--bg-mo); }
    .breadcrumb ol { font-size: 13px; }
    .page-hero__title { margin-top: 10px; font-size: 30px; }
    .page-hero__desc { margin-top: 6px; font-size: 15px; }
    .page-hero__badges { margin: 14px 0 0; }
    .page-tabs { top: var(--header-h); }   /* 모바일 로고바 바로 아래 고정 */
    .page-tabs__link { padding: 14px 10px; font-size: 15px; }
    .page-tabs__link.is-current::after { left: 10px; right: 10px; }

    /* 서비스 상세 */
    .svc-intro__grid { grid-template-columns: 1fr; gap: 24px; }
    .svc-intro__body { margin-top: 16px; }
    .svc-intro__body p { font-size: 15px; line-height: 1.75; }
    .svc-intro__image { border-radius: var(--radius-sm); }
    .svc-features { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
    .svc-feature { padding: 22px 20px 20px; border-radius: 14px; }
    .svc-feature::before { top: 10px; right: 14px; font-size: 44px; }
    .svc-feature::after { margin-bottom: 12px; }
    .svc-feature__title { font-size: 16px; }
    .svc-feature__text { font-size: 14px; }
    .check-list { grid-template-columns: 1fr; gap: 8px; }
    .check-list li { padding: 14px 16px 14px 48px; font-size: 15px; }
    .check-list li::before { top: 15px; left: 16px; }

    /* 프로세스: 세로 목록 [번호 | 제목·설명] */
    .steps { grid-template-columns: 1fr; gap: 0; }
    .steps::before { top: 24px; bottom: 24px; left: 23px; right: auto; border-top: 0; border-left: 2px dashed var(--brand-line); }
    .step { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: 0 0 20px; text-align: left; }
    .step:last-child { padding-bottom: 0; }
    .step__no { grid-row: span 2; width: 48px; height: 48px; font-size: 15px; }
    .step__title { margin-top: 2px; font-size: 16px; }
    .step__desc { margin-top: 2px; padding: 0; font-size: 14px; }
    .steps--wrap { gap: 0; }
    .steps--wrap::before { display: block; }
    .steps--wrap .step { padding: 0 0 20px; border: 0; border-radius: 0; }
    .svc-extras { gap: 10px; margin-top: 32px; }
    .svc-extra { grid-template-columns: 1fr; gap: 12px; padding: 20px; border-radius: var(--radius-sm); }
    .svc-extra__title { padding-top: 0; font-size: 16px; }
    .svc-extra__chips li { padding: 6px 12px; font-size: 13px; }

    .zone-cleaning__diagram { margin-bottom: 0; }
    .svc-cta { flex-direction: column; align-items: flex-start; padding: 28px 22px; border-radius: var(--radius-sm); }
    .svc-cta__title { font-size: 20px; }
    .svc-cta__desc { font-size: 14px; }
    .svc-cta__actions { flex-wrap: wrap; gap: 12px 18px; }
    .svc-cta__btn { height: 48px; padding: 0 22px; font-size: 15px; }
    .svc-cta__tel { font-size: 20px; }
    .svc-reviews__head { flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
    .svc-reviews__stats li { align-items: flex-start; }
    .svc-reviews__stats strong { font-size: 24px; }
    .svc-reviews__list { grid-template-columns: 1fr; gap: 10px; }
    /* 함께 찾는 서비스: 가로 스크롤 */
    .related-list {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 72%;
        gap: 12px;
        margin: 0 calc(-1 * var(--pad-x));
        padding: 0 var(--pad-x) 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--pad-x);
        scrollbar-width: none;
    }
    .related-list::-webkit-scrollbar { display: none; }
    .related-list > li { scroll-snap-align: start; }
    .related-card__image { height: 130px; }

    /* 상담신청 · 후기 · 에러 */
    .contact-steps { padding-top: 32px; }
    .steps--compact .step__no { width: 40px; height: 40px; font-size: 14px; }
    .steps--compact::before { top: 20px; bottom: 20px; left: 19px; }
    .steps--compact .step { grid-template-columns: 40px 1fr; padding-bottom: 14px; }
    .faq__q { padding: 16px 44px 16px 18px; font-size: 15px; }
    .faq__q::after { right: 20px; }
    .faq__a { padding: 0 18px 18px 44px; font-size: 14px; }
    .partners__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .partners__item { height: 80px; padding: 14px 18px; }
    .partners__item img { max-height: 40px; }
    .error-page { padding: 80px 0; }
    .error-page__links { margin-top: 40px; }
    .error-page__groups { grid-template-columns: 1fr; gap: 10px; }
}

/* S: ≤767 ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .modal { padding-top: 40px; }
    .modal__body { padding: 30px 20px; }
    .inquiry-modal__headline { font-size: 22px; }
    .inquiry-modal__notice { padding: 20px; }

    /* 주소 검색 레이어: 전체 화면 */
    .postcode-layer { padding: 0; }
    .postcode-layer__panel { max-width: none; height: 100%; border-radius: 0; }
    .form-address__btn { height: 50px; padding: 0 14px; }

    /* 상담 폼: 한 줄에 한 항목 */
    .form-row,
    .form-row--size { grid-template-columns: 1fr; }
    .form-input { height: 50px; }
    .inquiry-form__submit { height: 54px; font-size: 16px; }
}