@charset "utf-8";
/* ==========================================================================
   default.css — 기본 스타일 (토큰 · 리셋 · 공통 컴포넌트 · 페이지, PC 기준)
   화면 폭별 규칙은 desktop.css / mobile.css, 등장 효과는 animation.css

   목차
   1. 토큰            7. 모바일 메뉴      13. KBEI · 다이어그램
   2. 리셋            8. 플로팅 버튼      14. 후기 섹션
   3. 타이포          9. 모달             15. 고객센터 · 청소문의
   4. 레이아웃       10. 상담 폼          16. 메인 페이지
   5. 버튼 · 구분선  11. 푸터             17. 서브 페이지 · 서비스 상세
   6. 헤더 · GNB     12. 비주얼 · 슬라이더 18. 상담신청 · 후기 · 에러
   ========================================================================== */

/* 1. 토큰 (기획서 §3) ------------------------------------------------------ */
:root {
    --brand: #1C7AD2;
    --brand-tel-icon: #4A8FD0;
    --text-strong: #000;
    --text-title: #212121;
    --text-sub-dark: #5B5B5B;
    --text-sub: #656565;
    --text-body: #66666C;      /* 대비 5.6:1 (기존 #8D8D93 3.3:1) */
    --text-muted: #767676;     /* 대비 4.5:1 */
    --text-light: #767676;
    --divider-pipe: #868686;
    --line-dark: #222;
    --line-dash: rgba(0, 0, 0, .05);
    --line-light: #EDEDED;
    --line-faint: rgba(0, 0, 0, .06);
    --line-heavy: rgba(0, 0, 0, .05);
    --line-box: #E6E6E6;
    --gallery-border: #EEE;
    --bg-white: #FFF;
    --bg-soft: rgba(252, 252, 252, .7);
    --overlay-visual: rgba(0, 0, 0, .5);
    --overlay-bottom: rgba(5, 5, 5, .1);
    --dropdown-bg: #282828;
    --dropdown-text: rgba(255, 255, 255, .6);
    --dropdown-hover-bg: var(--brand);
    --required: #F24B4B;

    --font-base: Pretendard, "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", "Noto Sans", sans-serif;

    --container: 1180px;
    --container-wide: 1200px;
    --container-narrow: 1170px;
    --pad-x: 10px;
    --header-h: 174px;
    --visual-h: 703px;

    --ease: cubic-bezier(.25, .8, .25, 1);

    /* 디자인 시스템 — 제목 크기 · 모서리 · 여백 · 그림자 */
    --brand-dark: #1565B0;   /* hover · 흰 배경 대비 5.97 */
    --brand-soft: #DCEBFA;   /* 연파랑 면 — 틴트 배경(--bg-tint)과 구분되도록 (대비 1.13) */
    --brand-ink: #0F5AA0;    /* 연파랑 면 위 파랑 글자 · 아이콘 (대비 5.79) — 작은 글자는 --brand(4.41) 대신 사용 */
    --brand-rgb: 28, 122, 210;   /* rgba(var(--brand-rgb), α) — 포커스 링 · 그림자 */
    --brand-hover-soft: #E8F1FB; /* 흰 버튼 hover 면 */
    --brand-line: #C8DDF3;       /* 단계 점선 */
    --accent-light: #7CC4FF;     /* 어두운 비주얼 위 강조 점 */
    --bg-tint: #F4F7FA;          /* 섹션 배경 (푸른 기 회색) */
    --bg-tint-alt: #F5F8FB;      /* 푸터 · 모바일 메뉴 */
    --line-tint: #E3E8EE;        /* 틴트 위 테두리 · 구분선 */
    --fs-h2: 36px;
    --fs-h3: 28px;
    --fs-h4: 22px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --section-y: 100px;
    --shadow-card: 0 10px 30px rgba(0, 0, 0, .06);
    --shadow-hover: 0 18px 40px rgba(0, 0, 0, .1);
}

/* 2. 리셋 ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    padding-top: var(--header-h);
    background: var(--bg-white);
    color: var(--text-body);
    font: 400 16px/1.6 var(--font-base);
    word-break: keep-all;
    overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: top; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
hr { margin: 0; border: 0; }
[hidden] { display: none !important; }
body.is-locked { overflow: hidden; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: absolute;
    top: -100px; left: 16px;
    z-index: 2000;
    padding: 8px 16px;
    background: var(--brand);
    color: #fff;
}
.skip-link:focus { top: 8px; }

/* 3. 타이포 (기획서 §3-2) -------------------------------------------------- */
.em { color: var(--brand); font-weight: 700; }
b, strong { font-weight: 700; }

.section { padding: var(--section-y) 0; }
.section-head { margin-bottom: 40px; }
.section-head--center { text-align: center; }
.section-label { color: var(--brand); font-size: 18px; font-weight: 700; line-height: 1.2; }
.section-title { margin-top: 10px; color: var(--text-strong); font-size: var(--fs-h2); font-weight: 700; line-height: 1.3; }
.section-title-l { margin-top: 10px; color: var(--text-strong); font-size: var(--fs-h2); font-weight: 700; line-height: 1.3; }
.section-desc { margin-top: 12px; color: var(--text-sub-dark); font-size: 18px; }
[id] { scroll-margin-top: 120px; }
.section-head--light .section-label,
.section-head--light .section-title-l { color: #fff; }

.page-title { color: var(--brand); font-size: 64px; font-weight: 700; line-height: 1.2; }
.page-title__sub { color: var(--text-body); font-size: 16px; font-weight: 700; }
.block-heading { color: var(--text-strong); font-size: 30px; font-weight: 700; line-height: 1.2; }
.block-heading__suffix { font-size: 24px; }
.block-sub { color: var(--text-body); font-size: 18px; font-weight: 700; }

/* 4. 레이아웃 (기획서 §2) -------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

/* 5. 버튼 · 구분선 (기획서 §3-3, §3-4) ------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: color .2s, border-color .2s, background-color .2s;
}
.btn-pill-brand {
    height: 48px;
    padding: 14px 24px;
    border-radius: 9999px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
}
.btn-pill-brand--sm { height: 36px; padding: 8px 16px; }
/* 버튼 3종: 주 버튼(btn-primary) · 보조 버튼(btn-outline-round, btn-ghost-light) · 텍스트 링크(link-arrow) */
.btn-primary {
    height: 56px;
    padding: 0 32px;
    border-radius: 9999px;
    background: var(--brand);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(var(--brand-rgb), .3);
}
.btn-outline-round {
    height: 46px;
    padding: 0 26px;
    border: 1px solid #CFCFCF;
    border-radius: 9999px;
    color: var(--text-title);
    font-size: 14px;
    font-weight: 600;
}
.btn-ghost-light {
    height: 56px;
    padding: 0 30px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 9999px;
    background: rgba(0, 0, 0, .28);   /* 밝은 사진 위에서도 보이도록 */
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--text-title); font-size: 15px; font-weight: 600; }
.link-arrow::after { content: "→"; transition: transform .2s; }
.line-heavy   { border-top: 3px solid var(--line-heavy); }
.line-split   { border-top: 2px solid var(--line-light); }
.line-card    { border-top: 1px solid var(--line-faint); }
.line-section { border-top: 1px solid var(--line-dark); }
.line-dash    { border-top: 2px dashed var(--line-dash); }

/* 6. 헤더 · GNB (기획서 §4-1, §4-2) ---------------------------------------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; }

:root { --phone-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.icon-phone {
    display: inline-block;
    width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask: var(--phone-mask) center / contain no-repeat;
            mask: var(--phone-mask) center / contain no-repeat;
}
.icon-phone--lg { width: 30px; height: 30px; }
/* 상담문의 아이콘 — 헤드셋 (머리띠 + 양쪽 이어컵 + 마이크, 글자색을 따름) */
.icon-headset {
    display: inline-block;
    flex: none;
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-3a9 9 0 0 1 18 0v3'/%3E%3Cpath d='M3 14a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M21 14a2 2 0 0 0-2-2h-1a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2z'/%3E%3Cpath d='M21 17v1a4 4 0 0 1-4 4h-4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-3a9 9 0 0 1 18 0v3'/%3E%3Cpath d='M3 14a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M21 14a2 2 0 0 0-2-2h-1a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2z'/%3E%3Cpath d='M21 17v1a4 4 0 0 1-4 4h-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* PC 상단 전화바 79px */
.topbar { height: 79px; overflow: hidden; background: var(--brand); color: #fff; transition: height .3s var(--ease), opacity .3s; }
.site-header.is-scrolled .topbar { height: 0; opacity: 0; }
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: var(--container);
    height: 100%;
    margin: 0 auto;
    padding: 14px var(--pad-x);
}
.topbar__tel { font-size: 24px; line-height: 1.2; }
.topbar__hours { display: flex; flex-direction: column; font-size: 16px; line-height: 1.6; }

/* PC GNB 바 95px */
.gnb-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 95px;
    /* 배경은 화면 전체, 내용(로고 · 상담문의)은 본문(.container)과 같은 좌우 선에 맞춤. 좁은 화면은 최소 40px */
    padding: 0 max(40px, calc((100% - var(--container)) / 2 + var(--pad-x)));
    background: #fff;
    transition: height .3s var(--ease), box-shadow .3s;
}
/* 스크롤 후: 경계선 1px + 그림자로 본문과 구분 (border 대신 box-shadow 라 높이 변화 없음) */
.site-header.is-scrolled .gnb-bar { height: 76px; box-shadow: 0 1px 0 var(--line-box), 0 6px 20px rgba(0, 0, 0, .08); }
.gnb-bar__logo { flex: none; }
.gnb-bar__logo img {
    width: 168px;
    height: auto;
    transition: width .3s var(--ease);
}

.site-header.is-scrolled .gnb-bar__logo img {
    width: 148px;
    height: auto;
}
.gnb-bar__cta { flex: none; gap: 7px; }

.gnb { position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%); }
.gnb__list { display: flex; height: 100%; }
.gnb__item { position: relative; display: flex; align-items: center; }
/* 롤오버 시 라벨이 바뀌어도(HOME → 홈) 폭이 변하지 않도록 고정폭 */
.gnb__link { display: block; width: 100px; padding: 0; text-align: center; color: var(--text-strong); font-size: 16px; white-space: nowrap; }
.gnb__label {
    display: inline-block;
    padding: 7px 0;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transition: color .2s;
}
.gnb__item.is-active .gnb__link { color: var(--text-title); font-weight: 700; }
.gnb__item.is-active .gnb__label { border-bottom-color: var(--brand); }
.gnb__item:hover .gnb__label,
.gnb__item:focus-within .gnb__label { color: var(--brand); }

.gnb__dropdown {
    position: absolute;
    top: 63px; left: 0;
    z-index: 10;            /* 옆 메뉴 항목(활성 녹색선)보다 위에 표시 */
    min-width: 160px;
    background: var(--dropdown-bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.gnb__item:hover .gnb__dropdown,
.gnb__item:focus-within .gnb__dropdown { opacity: 1; visibility: visible; transform: none; }
.gnb__dropdown a { display: block; padding: 10px 20px; color: var(--dropdown-text); font-size: 13px; white-space: nowrap; }
.gnb__dropdown a:hover,
.gnb__dropdown a:focus-visible { background: var(--dropdown-hover-bg); color: #fff; }

/* MO 로고바 60px 고정 — [메뉴 44×44 | 로고 | 상담 아이콘 44×44] 좌우 대칭 */
.logobar {
    position: relative;
    z-index: 2;   /* 메뉴 시트보다 위: 열려도 메뉴(X) 버튼이 보임 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 6px;   /* 좌우 버튼이 화면 끝에서 같은 거리 */
    background: #fff;
    transition: box-shadow .3s;
}
.site-header.is-scrolled .logobar,
.is-menu-open .logobar { box-shadow: 0 1px 0 var(--line-box), 0 6px 20px rgba(0, 0, 0, .08); }

/* 메뉴 버튼: 누르는 영역 44×44, 보이는 선 22px. 열리면 X */
.logobar__menu { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; transition: background-color .2s; }
.logobar__menu:active { background: #F1F4F8; }
.logobar__menu:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }
.logobar__menu-icon { position: relative; display: block; width: 22px; height: 16px; }
.logobar__menu-icon span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--text-title); transition: transform .25s var(--ease), opacity .2s, top .25s var(--ease); }
.logobar__menu-icon span:nth-child(1) { top: 0; }
.logobar__menu-icon span:nth-child(2) { top: 7px; }
.logobar__menu-icon span:nth-child(3) { top: 14px; }
.logobar__menu[aria-expanded="true"] .logobar__menu-icon span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.logobar__menu[aria-expanded="true"] .logobar__menu-icon span:nth-child(2) { opacity: 0; }
.logobar__menu[aria-expanded="true"] .logobar__menu-icon span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

.logobar__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.logobar__logo img { display: block; width: 120px; height: auto; }
/* 상담 버튼: 메뉴 버튼과 같은 44×44 누름 영역, 안쪽에 연녹색 원 + 녹색 헤드셋 (행동 버튼임을 색으로 구분) */
.logobar__cta { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }
.logobar__cta::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--brand-soft); transition: background-color .2s; }
.logobar__cta .icon-headset { position: relative; width: 20px; height: 20px; color: var(--brand-ink); }
.logobar__cta:active::before { background: #C5DCF2; }
.logobar__cta:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }

/* 7. 모바일 메뉴 — 로고바 아래, 오른쪽에서 들어오는 전체 화면 시트 ---------- */
.mobile-menu { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 998; }   /* 헤더(999) 바로 아래 */
.mobile-menu__panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
}
.mobile-menu__list { padding: 8px 0; }
.mobile-menu__item { border-bottom: 1px solid var(--line-box); }
.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 0 20px;
    color: var(--text-strong);
    font-size: 18px;
    font-weight: 700;
    text-align: left;
}
.mobile-menu__hover { margin-left: 8px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.mobile-menu__caret {
    flex: none;
    width: 9px; height: 9px;
    margin-right: 4px;
    border-right: 2px solid var(--text-sub);
    border-bottom: 2px solid var(--text-sub);
    transform: rotate(45deg) translateY(-3px);
    transition: transform .2s;
}
.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__caret { transform: rotate(-135deg) translate(-2px, -1px); }
.mobile-menu__toggle.is-current-group,
.mobile-menu__link.is-current { color: var(--brand); }
.mobile-menu__sub { padding: 0 20px 14px; }
.mobile-menu__sublink {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    color: var(--text-sub-dark);
    font-size: 16px;
}
.mobile-menu__sublink.is-current { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.mobile-menu__sublink.is-current::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--brand-ink); }

/* 하단: 전화 · 카톡 (엄지가 닿는 위치) */
.mobile-menu__contact { margin-top: auto; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); background: var(--bg-tint-alt); }
.mobile-menu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-menu__action { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.mobile-menu__action--tel { background: var(--brand); color: #fff; }
.mobile-menu__action--tel .icon-phone { width: 20px; height: 20px; }
.mobile-menu__action--kakao { background: #FEE500; color: #191919; }
.mobile-menu__hours { margin-top: 12px; color: var(--text-body); font-size: 13px; line-height: 1.6; text-align: center; }
.mobile-menu__hours b { color: var(--text-strong); font-size: 15px; }

/* 메뉴가 열린 동안 플로팅 버튼 숨김 (하단 버튼과 겹침) */
.is-menu-open .floating { display: none; }

/* 8. 플로팅 버튼 (기획서 §4-4) --------------------------------------------- */
.floating { position: fixed; right: 24px; bottom: 32px; z-index: 99; display: flex; flex-direction: column; gap: 10px; }
.floating__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; height: 60px;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
    transition: transform .2s;
}
.floating__btn--tel { background: var(--brand); color: #fff; }
.floating__btn--tel .icon-phone { width: 24px; height: 24px; }
.floating__btn--kakao { background: #FEE500; color: #191919; }
.floating__label {
    position: absolute;
    top: 50%; right: 72px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #222;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(6px, -50%);
    transition: opacity .2s, transform .2s, visibility .2s;
    pointer-events: none;
}

/* 9. 모달 (기획서 §4-5) ---------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 1200; overflow-y: auto; padding: 80px 16px 40px; }
.modal__dim { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); }
.modal__dialog { position: relative; width: 100%; max-width: 550px; margin: 0 auto; border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 55px;
    padding: 0 20px;
    border-bottom: 1px solid #EEE;
}
.modal__title { color: var(--text-strong); font-size: 14px; font-weight: 400; }
.modal__close { position: relative; width: 24px; height: 24px; }
.modal__close::before,
.modal__close::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 22px; height: 1px;
    background: var(--text-title);
}
.modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.modal__body { padding: 50px; }
.inquiry-modal__headline { color: var(--brand); font-size: 28px; font-weight: 700; line-height: 1.3; }
.inquiry-modal__notice {
    margin: 24px 0 32px;
    padding: 30px;
    border-radius: 20px;
    background: #F5F5F5;
    color: var(--text-sub-dark);
    font-size: 15px;
}
.inquiry-modal__tel { margin-top: 10px; font-size: 22px; font-weight: 700; }
/* 전화 아이콘(녹색 원) + 번호 — 누르면 전화 연결 */
.inquiry-modal__tel a { display: inline-flex; align-items: center; gap: 10px; color: var(--text-strong); transition: color .2s; }
.inquiry-modal__tel .icon-phone { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); -webkit-mask: none; mask: none; position: relative; }
.inquiry-modal__tel .icon-phone::after { content: ""; position: absolute; inset: 8px; background: #fff; -webkit-mask: var(--phone-mask) center / contain no-repeat; mask: var(--phone-mask) center / contain no-repeat; }

/* 10. 상담 폼 (기획서 §4-7) ------------------------------------------------ */
.inquiry-form { display: flex; flex-direction: column; width: 100%; }
.inquiry-form__head { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line-box); }
.inquiry-form__title { color: var(--text-strong); font-size: 26px; font-weight: 700; line-height: 1.3; }
.inquiry-form__desc { margin-top: 6px; color: var(--text-sub); font-size: 15px; }
.modal .inquiry-form__head { display: none; }   /* 모달은 자체 제목 사용 */

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.form-row--size { grid-template-columns: minmax(0, 1fr) 130px; }
.form-group { margin-bottom: 18px; }
.form-label { display: inline-block; margin-bottom: 8px; color: var(--text-title); font-size: 15px; font-weight: 600; }
.form-label.is-required::after { content: "•"; margin-left: 3px; color: var(--required); }
.form-input {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #DCDCDC;
    border-radius: 10px;
    background: #fff;
    color: var(--text-title);
    font-size: 16px;
    transition: border-color .2s, box-shadow .2s;
}
.form-input::placeholder { color: #9A9AA0; }
.form-input:hover { border-color: #BDBDBD; }
.form-input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.form-input.is-invalid { border-color: var(--required); }
.form-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(242, 75, 75, .15); }

/* 평 단위 표시 */
.form-affix { position: relative; }
.form-affix .form-input { padding-right: 40px; }
.form-affix__unit { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--text-sub); font-size: 15px; pointer-events: none; }

/* 주소 — [주소 칸 | 주소 검색] + 상세주소 */
.form-address { display: flex; gap: 8px; }
.form-address .form-input { flex: 1; min-width: 0; }
.form-address .form-input[readonly] { cursor: pointer; }
.form-address__btn {
    flex: none;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--brand);
    border-radius: 10px;
    background: #fff;
    color: var(--brand-dark);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}
.form-address__btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .25); }
.form-address__detail { margin-top: 8px; }

/* 주소 검색 레이어 (상담 모달보다 위) */
.postcode-layer { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.postcode-layer__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s; }
.postcode-layer__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    height: min(560px, calc(100vh - 32px));
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s, transform .2s;
}
.postcode-layer.is-open .postcode-layer__dim,
.postcode-layer.is-open .postcode-layer__panel { opacity: 1; transform: none; }
.postcode-layer__head { display: flex; align-items: center; justify-content: space-between; flex: none; height: 54px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line-box); }
.postcode-layer__title { color: var(--text-strong); font-size: 16px; font-weight: 700; }
.postcode-layer__close { position: relative; width: 32px; height: 32px; }
.postcode-layer__close::before,
.postcode-layer__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; border-radius: 2px; background: var(--text-title); }
.postcode-layer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.postcode-layer__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.postcode-layer__body { flex: 1; min-height: 0; }

/* 청소형태 선택 칩 */
.form-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.form-chip { position: relative; cursor: pointer; }
.form-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.form-chip span {
    display: block;
    padding: 9px 16px;
    border: 1px solid #DCDCDC;
    border-radius: 9999px;
    background: #fff;
    color: var(--text-sub-dark);
    font-size: 14px;
    line-height: 1.4;
    transition: color .2s, border-color .2s, background-color .2s;
}
.form-chip:hover span { border-color: var(--brand); color: var(--brand); }
.form-chip input:checked + span { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 600; }
.form-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .25); }
.form-chips.is-invalid .form-chip span { border-color: var(--required); }

/* 개인정보 동의 */
.form-agree { padding: 16px 18px; border-radius: 10px; background: #F7F7F7; }
.form-check { display: flex; align-items: center; gap: 10px; color: var(--text-title); font-size: 15px; cursor: pointer; }
.form-check b { color: var(--brand-dark); font-weight: 600; }
.form-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.form-check.is-invalid span { color: var(--required); }
.form-terms-toggle { margin: 8px 0 0 30px; }
.form-terms-toggle summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-sub);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    list-style: none;
}
.form-terms-toggle summary::-webkit-details-marker { display: none; }
.form-terms-toggle summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg); transition: transform .2s; }
.form-terms-toggle[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.form-terms {
    height: 160px;
    margin-top: 10px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--line-box);
    border-radius: 8px;
    background: #fff;
    color: var(--text-sub-dark);
    font-size: 13px;
    line-height: 1.6;
}
.form-terms__title { margin-top: 6px; font-weight: 600; }

.form-error { margin-top: 6px; color: var(--required); font-size: 13px; line-height: 1.4; }
.form-error:empty { display: none; }
.form-agree .form-error { margin-left: 30px; }

.form-message {
    margin-bottom: 14px;
    padding: 14px 16px;
    border-left: 3px solid var(--brand);
    border-radius: 8px;
    background: #EEF5FC;
    color: var(--text-title);
    font-size: 14px;
}
.form-message.is-error { border-left-color: var(--required); background: #FFF1F1; color: #C23434; }

.inquiry-form__submit {
    width: 100%;
    height: 58px;
    margin-top: auto;
    border-radius: 9999px;
    background: var(--brand);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: background-color .2s, opacity .2s;
}
.inquiry-form__submit:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .3); }
.inquiry-form__submit:disabled { opacity: .6; cursor: progress; }

/* 자동입력 방지 칸 — 화면 밖으로 */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 접수 완료 화면: 폼 내용을 숨기고 안내만 */
.inquiry-form.is-done > :not(.inquiry-form__done) { display: none; }
.inquiry-form__done { display: flex; flex-direction: column; align-items: center; margin: auto 0; padding: 24px 0; text-align: center; outline: 0; }
.inquiry-form__done-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 30px no-repeat;
}
.inquiry-form__done-title { margin-top: 20px; color: var(--text-strong); font-size: 24px; font-weight: 700; }
.inquiry-form__done-desc { margin-top: 8px; color: var(--text-sub-dark); font-size: 16px; line-height: 1.7; }
.inquiry-form__done-steps { display: grid; gap: 8px; width: 100%; max-width: 380px; margin: 24px 0; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--brand-soft); counter-reset: done; text-align: left; }
.inquiry-form__done-steps li { color: var(--text-sub-dark); font-size: 14px; counter-increment: done; }
.inquiry-form__done-steps li::before { content: counter(done) ". "; color: var(--brand-ink); font-weight: 800; }
.inquiry-form__done-steps b { margin-right: 6px; color: var(--text-strong); }
.inquiry-form__done-tel { margin-bottom: 20px; color: var(--text-body); font-size: 14px; }
.inquiry-form__done-tel a { color: var(--brand); font-weight: 700; }

/* 11. 푸터 (기획서 §4-6) --------------------------------------------------- */
.site-footer { background: var(--bg-tint-alt); color: var(--text-sub); font-size: 14px; line-height: 1.6; }
.site-footer a { transition: color .2s; }

/* 상단 CTA 띠 */
/* [제목 · 설명 · 진행 3단계] | [무료 상담 신청 / 전화] — 대각선 그라데이션 + 은은한 원 장식 */
.site-footer__cta { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--brand) 0%, var(--brand-ink) 100%); color: #fff; }
.site-footer__cta::before,
.site-footer__cta::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.site-footer__cta::before { top: -140px; right: 18%; width: 320px; height: 320px; border: 48px solid rgba(255, 255, 255, .06); }
.site-footer__cta::after { bottom: -90px; left: -60px; width: 220px; height: 220px; background: rgba(255, 255, 255, .05); }
.site-footer__cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 44px; padding-bottom: 44px; }
.site-footer__cta-title { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -.5px; }
.site-footer__cta-desc { margin-top: 6px; color: rgba(255, 255, 255, .85); font-size: 15px; }

/* 진행 3단계: 번호 원 + 글자, 단계 사이 화살표 */
.cta-steps { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; margin-top: 22px; }
.cta-steps li { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 7px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 9999px; background: rgba(255, 255, 255, .08); font-size: 14px; font-weight: 600; line-height: 1; }
/* 단계 사이 연결선: 알약 사이 빈칸(19px)을 잇는 선 */
.cta-steps li + li { margin-left: 19px; }
.cta-steps li + li::before { content: ""; position: absolute; top: 50%; left: -20px; width: 19px; height: 1px; background: rgba(255, 255, 255, .55); }
/* 번호: 줄 높이 영향 없이 원 정중앙 (고정폭 숫자). 글꼴상 숫자가 0.7px 위로 떠서 padding-top 1px 로 보정 */
.cta-steps__no { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; padding-top: 1px; border-radius: 50%; background: #fff; color: var(--brand-ink); font-size: 12px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

/* 행동: 주 버튼(흰 바탕) 위, 전화(반투명 테두리) 아래 — 같은 폭 */
.site-footer__cta-actions { display: grid; gap: 10px; flex: none; width: 260px; }
.site-footer__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    border-radius: 9999px;
    background: #fff;
    color: var(--brand-ink);
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
    transition: background-color .2s, color .2s;
}
.site-footer__cta-arrow { transition: transform .2s; }
.site-footer__cta-tel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 9999px; font-size: 18px; font-weight: 700; letter-spacing: .3px; transition: background-color .2s, border-color .2s; }
.site-footer__cta-tel .icon-phone { width: 18px; height: 18px; }

/* 브랜드 · 메뉴 */
.site-footer__main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); gap: 60px; padding: 64px 0 52px; }
.site-footer__logo img { display: block; width: 164px; height: auto; }
.site-footer__slogan { margin-top: 14px; color: var(--text-title); font-size: 16px; font-weight: 600; }
.site-footer__contact { display: grid; gap: 6px; margin-top: 24px; }
.site-footer__contact div { display: flex; gap: 14px; }
.site-footer__contact dt { flex: none; width: 56px; color: var(--text-muted); }
.site-footer__contact dd { color: var(--text-title); }
.site-footer__contact div:first-child dd { color: var(--brand); font-size: 18px; font-weight: 700; line-height: 1.35; }
.site-footer__sns { display: flex; gap: 10px; margin-top: 26px; }
.sns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -.2px;
    transition: transform .2s, box-shadow .2s;
}
.sns--kakao { background: #FEE500; color: #191919; }
.sns--blog { background: #03C75A; color: #fff; }

.site-footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.site-footer__col-title { margin-bottom: 18px; color: var(--text-strong); font-size: 13px; font-weight: 800; letter-spacing: 1.5px; }
.site-footer__col ul { display: grid; gap: 10px; }
.site-footer__col a { color: var(--text-sub); font-size: 15px; }

/* 하단 법적 정보 */
.site-footer__bottom { padding: 26px 0 40px; border-top: 1px solid #E2E7EC; font-size: 13px; }
.site-footer__policy { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 12px; }
.site-footer__policy a { color: var(--text-sub-dark); }
.site-footer__policy b { color: var(--text-title); }
.site-footer__biz { display: flex; flex-wrap: wrap; color: var(--text-body); }
.site-footer__biz li + li::before { content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 12px; background: #CFD6DE; vertical-align: 0; }
.site-footer__copy { margin-top: 10px; color: var(--text-light); font-size: 12px; letter-spacing: .3px; }

/* 12. 비주얼 · 슬라이더 (기획서 M1, §6-1) ---------------------------------- */
.visual-bg {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--visual-h);
    background: #ddd center / cover no-repeat;
}
/* 사진 전체가 아니라 글자 주변만 어둡게 */
.visual-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .15)); }
.visual-text {
    position: relative;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 7px;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}
.visual-text__ko { font-size: 60px; font-weight: 700; line-height: 1.25; letter-spacing: -1px; }
.visual-text__eyebrow { margin-bottom: 14px; color: rgba(255, 255, 255, .9); font-size: 18px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; }

/* 메인 비주얼 — 높이 600px, 한국어 핵심 문구 + 상담 버튼 + 신뢰 배지 */
.main-visual { position: relative; }
.main-visual .visual-bg { height: 600px; }
.main-visual .visual-text { margin-top: -120px; }   /* 아래 버튼 · 배지 자리 */
.main-visual .visual-text__ko { font-size: 54px; }
.main-visual__cta { position: absolute; left: 0; right: 0; top: calc(50% + 50px); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 34px; padding: 0 20px; }
.main-visual__buttons { display: flex; align-items: center; justify-content: center; gap: 12px; }
/* 주 버튼을 더 크게 — 첫 행동이 '무료 견적 받기'로 분명하도록 */
.main-visual__buttons .btn-primary { height: 60px; padding: 0 38px; font-size: 17px; box-shadow: 0 10px 28px rgba(var(--brand-rgb), .45); }

/* 신뢰 정보: 버튼처럼 보이지 않도록 상자 없이 '체크 + 글자' 한 줄, 항목 사이 세로선 */
.trust-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 6px; }
.trust-line li { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 16px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.trust-line li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; transform: translateY(-50%); background: currentColor; opacity: .35; }
.trust-line li::after { content: ""; order: -1; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.main-visual__badges { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.main-visual__badges li::after { background: var(--accent-light); }

.slider { position: relative; overflow: hidden; }
.slider__track { display: flex; }
.slider__slide { flex: 0 0 100%; min-width: 0; }
.slider__slide img { display: block; width: 100%; }
.slider__dots { position: absolute; left: 0; right: 0; bottom: 35px; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* 멈춤/재생 버튼 (슬라이더 · 시공 사진 흐름) — 일시정지 ‖ / 재생 ▶ */
.pause-btn { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .35); }
.pause-btn::before,
.pause-btn::after { content: ""; position: absolute; top: 9px; width: 3px; height: 10px; border-radius: 1px; background: #fff; }
.pause-btn::before { left: 10px; }
.pause-btn::after { right: 10px; }
.pause-btn.is-paused::before { top: 8px; left: 11px; width: 0; height: 0; border-radius: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #fff; background: none; }
.pause-btn.is-paused::after { display: none; }
.pause-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.slider__dots .pause-btn { margin-left: 8px; }
.slider__dot {
    width: 12px; height: 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .5);
    transition: width .3s var(--ease), background-color .3s;
}
.slider__dot.is-active { width: 36px; background: #fff; }

.main-visual-mo,
.sub-visual__mo { padding: 5px 10px; }
.sub-visual__mo img { display: block; width: 100%; }

/* 13. KBEI · 하우스 다이어그램 (기획서 §4-8 A·B) --------------------------- */
.kbei { padding: 40px 0; }
.kbei__frame { border-radius: var(--radius-lg); overflow: hidden; }
.kbei__caption { margin-top: 16px; color: var(--text-sub-dark); font-size: 16px; text-align: center; }
.kbei__caption strong { color: var(--text-strong); }
.kbei--bg { background: var(--bg-pc) center / cover no-repeat; }
.kbei img { display: block; width: 100%; }
.house-diagram { padding: 10px 0; }
.house-diagram.section { padding: var(--section-y) 0; }
.house-diagram__image img { display: block; width: 100%; }
/* 모바일: 구역 카드 가로 스크롤 */
.zone-scroll {
    display: flex;
    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;
}
.zone-scroll::-webkit-scrollbar { display: none; }
.zone-mini { flex: 0 0 64%; scroll-snap-align: start; }
.zone-mini img { display: block; width: 100%; aspect-ratio: 357 / 244; border-radius: var(--radius-sm); object-fit: cover; }
.zone-mini__name { margin-top: 10px; color: var(--text-strong); font-size: 16px; font-weight: 700; }
.zone-mini__items { margin-top: 2px; color: var(--text-body); font-size: 13px; }

/* 14. 후기 섹션 (기획서 M8) ------------------------------------------------ */
/* 고객 후기 섹션 (.rv) — 숫자 먼저 → 추천 후기 + 작은 후기 → 시공 현장 */
.rv { background: var(--bg-tint); }
.rv__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.rv__stats { display: flex; flex: none; }
.rv__stat { padding: 0 28px; text-align: right; }
.rv__stat + .rv__stat { border-left: 1px solid #DCE3EA; }
.rv__stat:last-child { padding-right: 0; }
.rv__stat dt { color: var(--text-body); font-size: 13px; }
.rv__stat dd { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; margin-top: 2px; }
.rv__stat strong { color: var(--brand); font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -1px; }
.rv__stat span { color: var(--text-sub-dark); font-size: 15px; font-weight: 600; }
.rv__stat .rv__stars { margin-left: 4px; color: #FFB400; font-size: 13px; letter-spacing: 1px; }

/* 추천 후기(왼쪽 큰 인용) | 작은 후기 2×2 */
.rv__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; }
.rv__featured {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    margin: 0;
    padding: 44px 40px 36px;
    border-radius: var(--radius-lg);
    background: var(--brand);
    color: #fff;
    overflow: hidden;
}
.rv__featured::before { content: "\201C"; position: absolute; top: -18px; right: 24px; color: rgba(255, 255, 255, .14); font-family: Georgia, serif; font-size: 220px; line-height: 1; pointer-events: none; }
.rv__quote { position: relative; margin: 0; }
.rv__quote p { font-size: 24px; font-weight: 600; line-height: 1.6; letter-spacing: -.3px; }
.rv__person { display: flex; align-items: center; gap: 12px; margin: 0; }
.rv__person b { display: block; font-size: 16px; }
.rv__person small { display: block; margin-top: 2px; font-size: 13px; opacity: .8; }
.rv__avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: 16px; font-weight: 700; }

.rv__list,
.rv__rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rv__rest { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.rv-card { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 26px 26px 22px; border: 1px solid var(--line-tint); border-radius: var(--radius-lg); background: #fff; }
.rv-card__text { position: relative; padding-top: 22px; color: var(--text-title); font-size: 15px; line-height: 1.7; }
.rv-card__text::before { content: "\201C"; position: absolute; top: -6px; left: -2px; color: var(--brand); font-family: Georgia, serif; font-size: 40px; line-height: 1; }
.rv__person--sm { gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-box); color: var(--text-strong); }
.rv__person--sm b { font-size: 14px; }
.rv__person--sm small { color: var(--text-body); opacity: 1; }
.rv__person--sm .rv__avatar { width: 36px; height: 36px; background: var(--brand-soft); color: var(--brand-ink); font-size: 14px; }

/* 실제 시공 현장 */
.rv__gallery { margin-top: 56px; }
.rv__gallery-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--text-strong); font-size: 16px; font-weight: 700; }
.rv__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .15); }
.rv .marquee { margin-top: 0; }

.rv__actions { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.rv__actions .btn-outline-round { height: 56px; padding: 0 30px; background: #fff; font-size: 16px; }

.review-card { display: flex; flex-direction: column; min-height: 260px; padding: 26px 28px; border-radius: var(--radius-lg); background: #fff; }
.review-card__stars { color: #FFB400; font-size: 16px; letter-spacing: 2px; line-height: 1; }
.review-card__body { margin: 14px 0 20px; color: var(--text-sub-dark); font-size: 16px; line-height: 1.7; }
.review-card__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-box); }
.review-card__name { color: var(--text-strong); font-size: 15px; font-weight: 700; }
.review-card__loc { margin-top: 2px; color: var(--text-body); font-size: 13px; }

.marquee { position: relative; margin-top: 20px; overflow: hidden; }
.marquee .pause-btn { position: absolute; right: 10px; bottom: 10px; z-index: 1; }
.marquee__track { display: flex; gap: 7px; width: max-content; }
.marquee__item img { width: 240px; height: 180px; border-radius: var(--radius-sm); object-fit: cover; }

/* 15. 고객센터 · 청소문의 (기획서 §4-8 C, M10) ----------------------------- */
.customer-center { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.cc-card { display: flex; flex-direction: column; align-items: center; padding: 36px 28px 32px; border: 1px solid var(--line-box); border-radius: var(--radius-lg); background: #fff; text-align: center; }
.cc-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; font-size: 12px; font-weight: 800; }
.cc-card__icon--tel { background: var(--brand-soft); color: var(--brand-ink); }
.cc-card__icon--tel .icon-phone { width: 26px; height: 26px; }
.cc-card__icon--kakao { background: #FEE500; color: #191919; }
.cc-card__icon--blog { background: #03C75A; color: #fff; }
.cc-card__title { margin-top: 18px; color: var(--text-strong); font-size: 20px; font-weight: 700; }
.cc-card__desc { margin: 8px 0 20px; color: var(--text-body); font-size: 14px; line-height: 1.6; }
.cc-card__action {
    display: inline-flex;
    align-items: center;
    height: 44px;
    margin-top: auto;
    padding: 0 22px;
    border: 1px solid var(--line-box);
    border-radius: 9999px;
    color: var(--text-title);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .2s, color .2s;
}
.cc-card__action--tel { padding: 0; border: 0; color: var(--brand); font-size: 24px; font-weight: 800; }
.cc-card__action.is-disabled { border-color: transparent; background: #F3F3F3; color: var(--text-muted); }

.inquiry-section__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; }
.inquiry-section__map { position: relative; display: block; min-height: 640px; overflow: hidden; border-radius: 20px; }
.inquiry-section__form {
    display: flex;
    padding: 40px;
    border: 1px solid var(--line-box);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}
/* 정적 지도 이미지 — 카카오맵을 불러오지 못했을 때 그대로 보임 */
.inquiry-section__map > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 카카오맵 — 보기 전용(클릭 · 드래그 · 확대 막음, inert 로 키보드 포커스도 막음) */
.inquiry-section__map-canvas { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #F2F2F2; opacity: 0; transition: opacity .3s; pointer-events: none; user-select: none; }
.inquiry-section__map.is-map-ready .inquiry-section__map-canvas { opacity: 1; }
/* 누를 수 없는 확대·축소·초기화 버튼 숨김 (카카오 로고 · 축척은 유지) — 카카오 CSS 가 나중에 로드되므로 !important */
.inquiry-section__map-canvas .root_daum_roughmap .wrap_btn_zoom { display: none !important; }
.inquiry-section__map-badge { position: absolute; right: 16px; bottom: 16px; z-index: 2; padding: 8px 14px; border-radius: 9999px; background: #fff; color: var(--text-title); font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }

/* 16. 메인 페이지 (기획서 §5) ---------------------------------------------- */
/* 인트로 — 왼쪽 문구(HTML) · 오른쪽 인물(사진 아래가 섹션 아래 끝에 닿도록) */
.intro { padding-top: 50px; }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) 450px; align-items: end; gap: 40px; }
.intro__text { align-self: center; padding-bottom: 40px; }
.intro__eyebrow { color: var(--text-title); font-size: 30px; line-height: 1.4; }
.intro__title { margin-top: 26px; color: var(--text-strong); font-size: 58px; font-weight: 700; line-height: 1.3; letter-spacing: -1.5px; }
.intro__title .em { font-weight: 700; }
.intro__bar { width: 80px; margin: 40px 0 36px; border-top: 8px solid var(--text-strong); }
.intro__desc { color: var(--text-title); font-size: 24px; line-height: 1.7; }
.intro__image img { display: block; width: 100%; height: auto; }

/* 핵심 서비스 사진 카드 — 같은 크기 3장 */
.service-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-types > li { display: flex; }
.service-type {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--line-box);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
    text-align: left;
    transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.service-type__image { display: block; height: 240px; overflow: hidden; }
.service-type__image--dim img { filter: brightness(.85); }   /* 밝은 배경 사진이 카드 흰색과 구분되도록 */
.service-type__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.service-type__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 24px; }
.service-type__tag { color: var(--brand-dark); font-size: 13px; font-weight: 800; letter-spacing: 1.5px; }
.service-type__title { margin-top: 8px; color: var(--text-strong); font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }
.service-type__items { margin-top: 8px; color: var(--text-body); font-size: 15px; line-height: 1.6; }
.service-type__point { align-self: flex-start; margin-top: 14px; padding: 4px 10px; border-radius: 9999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 13px; font-weight: 600; }
.service-type__more { margin-top: auto; padding-top: 22px; color: var(--text-title); font-size: 14px; font-weight: 600; }
.service-type__more::after { content: " →"; }

/* 부가 서비스 띠 — [아이콘 | 이름 · 항목 | 견적 문의] 2줄 */
.service-extras { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 20px; padding: 10px 28px; border: 1px solid var(--line-box); border-radius: var(--radius-lg); background: #fff; }
.service-extras__title { color: var(--text-strong); font-size: 18px; font-weight: 700; line-height: 1.4; }
.service-extras__list { display: grid; }
.service-extra { display: flex; align-items: center; gap: 18px; padding: 16px 0; }
.service-extra + .service-extra { border-top: 1px solid var(--line-box); }
.service-extra__icon { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--brand-soft); position: relative; }
.service-extra__icon::after { content: ""; position: absolute; inset: 12px; background: var(--brand-ink); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.service-extra__icon--build { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z'/%3E%3C/svg%3E"); }
.service-extra__icon--life { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='2' width='18' height='20' rx='2'/%3E%3Cpath d='M3 7h18'/%3E%3Ccircle cx='12' cy='14' r='5'/%3E%3Cpath d='M7 4.5h.01M10 4.5h.01'/%3E%3C/svg%3E"); }
.service-extra__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; flex: 1; min-width: 0; }
.service-extra__tag { color: var(--brand-dark); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
.service-extra__name { color: var(--text-strong); font-size: 17px; font-weight: 700; }
.service-extra__items { flex-basis: 100%; color: var(--text-body); font-size: 14px; }
.service-extra__btn { flex: none; height: 40px; padding: 0 18px; border: 1px solid var(--brand); border-radius: 9999px; background: #fff; color: var(--brand-dark); font-size: 14px; font-weight: 600; transition: background-color .2s, color .2s; }

/* 추천 대상 체크리스트 */
/* 위 '함께 맡기면 좋은 서비스' 띠와 같은 틀: [제목 200px | 내용], 좌우 여백 28px, 테두리 1px */
.service-needs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 20px; padding: 24px 28px; border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--brand-soft); }
.service-needs__title { color: var(--text-strong); font-size: 18px; font-weight: 700; line-height: 1.4; }
/* 5개 항목: 2열 정렬 (3줄), 각 항목은 같은 높이의 흰 줄 */
.service-needs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.service-needs__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* 홀수 개면 마지막 항목은 한 줄 전체 */
.service-needs__list li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: var(--radius-sm); background: #fff; color: var(--text-title); font-size: 15px; line-height: 1.4; }
.service-needs__list li::before {
    content: "";
    flex: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* 차별화 POINT — 아이콘 + 제목 + 한 줄 설명 */
.points { background: var(--bg-tint); }
.points__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.point { padding: 32px 28px; border-radius: var(--radius-lg); background: #fff; text-align: center; }
.point img { width: 120px; height: 120px; margin: 0 auto; }
.point__title { margin-top: 16px; color: var(--text-title); font-size: 18px; font-weight: 700; line-height: 1.5; }
.point__desc { margin-top: 6px; color: var(--text-body); font-size: 15px; line-height: 1.6; }


/* 17. 서브 페이지 · 서비스 상세 (기획서 §6 ~ §9) -------------------------- */
/* 페이지 상단 */
.page-hero { position: relative; padding: 64px 0 56px; background: var(--bg-tint); }
.page-hero--photo { display: flex; align-items: flex-end; min-height: 400px; padding: 0 0 56px; background: #333 var(--bg-pc) center / cover no-repeat; color: #fff; }
.page-hero--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .6) 100%); }
.page-hero__inner { position: relative; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-body); font-size: 14px; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; opacity: .7; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-hero--photo .breadcrumb ol { color: rgba(255, 255, 255, .85); }
.page-hero__title { margin-top: 14px; color: var(--text-strong); font-size: 48px; font-weight: 700; line-height: 1.2; letter-spacing: -1px; }
.page-hero__desc { margin-top: 10px; color: var(--text-sub-dark); font-size: 20px; }
/* 서브 상단 신뢰 정보 — 메인과 같은 '체크 + 글자' 한 줄 (.trust-line), 왼쪽 정렬 */
.page-hero__badges { justify-content: flex-start; margin: 20px -16px 0; color: var(--text-sub-dark); }
.page-hero__badges li { font-size: 13px; }
.page-hero__badges li::after { background: var(--brand); }
.page-hero--photo .page-hero__badges { color: rgba(255, 255, 255, .9); }
.page-hero--photo .page-hero__badges li::after { background: var(--accent-light); }
.page-hero--photo .page-hero__title { color: #fff; }
.page-hero--photo .page-hero__desc { color: rgba(255, 255, 255, .9); }

/* 같은 분류 탭 */
.page-tabs { position: sticky; top: 76px; z-index: 50; border-bottom: 1px solid var(--line-box); background: #fff; }   /* 76px: 스크롤 후 PC 헤더 높이 */
.page-tabs__list { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
/* 가로로 더 넘길 수 있을 때 오른쪽 끝을 흐리게 (common.js 가 is-more 지정) */
.page-tabs__list.is-more { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.page-tabs__list::-webkit-scrollbar { display: none; }
.page-tabs__link { position: relative; display: block; padding: 18px 14px; color: var(--text-body); font-size: 16px; white-space: nowrap; transition: color .2s; }
.page-tabs__link.is-current { color: var(--text-strong); font-weight: 700; }
.page-tabs__link.is-current::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--brand); }

/* 소개 */
.svc-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.svc-intro__body { margin-top: 24px; }
.svc-intro__body p { color: var(--text-sub-dark); font-size: 17px; line-height: 1.8; }
.svc-intro__body .em { font-weight: 500; }   /* 강조가 많아 굵기는 낮추고 색으로만 */
.svc-intro__image { border-radius: var(--radius-lg); overflow: hidden; }
.svc-intro__image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-features { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
/* 특징 카드 — 연한 배경 + 자동 번호(CSS 카운터) + 제목 위 짧은 녹색 막대 */
.svc-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 26px 26px;
    border-radius: var(--radius-lg);
    background: var(--bg-tint);
    counter-increment: svc-feature;   /* 형제 카드끼리 01, 02, 03 … */
    overflow: hidden;
    transition: background-color .25s, transform .25s var(--ease);
}
/* 오른쪽 위 연한 큰 번호 */
.svc-feature::before {
    content: counter(svc-feature, decimal-leading-zero);
    position: absolute;
    top: 12px; right: 18px;
    color: var(--brand);
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    opacity: .1;
    pointer-events: none;
}
/* 제목 위 짧은 녹색 막대 (제목이 없는 카드는 설명 위) */
.svc-feature::after {
    content: "";
    order: -1;
    flex: none;
    width: 24px; height: 3px;
    margin-bottom: 14px;
    border-radius: 3px;
    background: var(--brand);
}
.svc-feature__title { display: block; margin-bottom: 8px; padding-right: 56px; color: var(--text-strong); font-size: 18px; font-weight: 700; }
.svc-feature__text { color: var(--text-body); font-size: 15px; line-height: 1.7; }

/* 필요한 곳 — 체크 목록 */
/* 왼쪽 위 브랜드 연녹색 → 오른쪽 아래 연한 하늘빛 (대각선) */
.svc-needs { background: var(--brand-soft) linear-gradient(135deg, var(--brand-soft) 0%, #E4ECF8 100%); }
.check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.check-list li {
    position: relative;
    padding: 18px 20px 18px 54px;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-title);
    font-size: 16px;
    line-height: 1.6;
}
.check-list li::before {
    content: "";
    position: absolute;
    top: 20px; left: 20px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* 프로세스 — 단계 흐름 */
.steps { position: relative; display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.steps::before { content: ""; position: absolute; top: 28px; left: calc(50% / var(--steps, 4)); right: calc(50% / var(--steps, 4)); border-top: 2px dashed var(--brand-line); }
.steps--wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps--wrap::before { display: none; }
.steps--wrap .step { padding: 24px 20px; border: 1px solid var(--line-box); border-radius: var(--radius-lg); }
.step { position: relative; text-align: center; }
.step__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border: 2px solid var(--brand);
    border-radius: 50%;
    background: #fff;
    color: var(--brand);
    font-size: 18px;
    font-weight: 800;
}
.step:last-child .step__no { background: var(--brand); color: #fff; }
.step__title { display: block; margin-top: 16px; color: var(--text-strong); font-size: 18px; font-weight: 700; }
.step__desc { margin-top: 6px; padding: 0 6px; color: var(--text-body); font-size: 15px; line-height: 1.6; }

/* 권장 주기 · 선택 옵션 · 작업 범위 */
.svc-extras { display: grid; gap: 12px; margin-top: 56px; }
.svc-extra { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; padding: 22px 28px; border-radius: var(--radius-lg); background: var(--bg-tint); }
.svc-extra__title { padding-top: 6px; color: var(--brand); font-size: 17px; font-weight: 700; }
.svc-extra__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-extra__chips li { padding: 7px 14px; border: 1px solid var(--line-box); border-radius: 9999px; background: #fff; color: var(--text-sub-dark); font-size: 14px; line-height: 1.5; }
.svc-extra__chips--labeled li b { margin-right: 6px; color: var(--text-strong); }
.svc-extra .em { color: var(--text-strong); font-weight: 600; }

/* 구역별 청소 (주거형) */
.zone-cleaning { background: #fff; }
.svc-process + .zone-cleaning { padding-top: 0; }
.zone-cleaning__diagram { margin-bottom: 56px; }
.zone-cleaning__diagram img { display: block; width: 100%; }
.zone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.zone-card { border: 1px solid var(--line-box); border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.zone-card__photo img { display: block; width: 100%; aspect-ratio: 357 / 220; object-fit: cover; }
.zone-card__body { padding: 22px 24px 24px; }
.zone-card__no { color: var(--brand-dark); font-size: 14px; font-weight: 800; }
.zone-card__name { margin-top: 4px; color: var(--text-strong); font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }
.zone-card__list { margin-top: 12px; }
.zone-card__list li { position: relative; padding-left: 14px; color: var(--text-sub-dark); font-size: 15px; line-height: 1.8; }
.zone-card__list li::before { content: ""; position: absolute; top: 12px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.zone-card__more summary { margin-top: 8px; color: var(--brand-dark); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.zone-card__more summary::-webkit-details-marker { display: none; }
.zone-card__more[open] summary { display: none; }
.zone-card__more .zone-card__list { margin-top: 0; }

/* 상담 박스 */
.svc-cta-wrap { padding: 0 0 var(--section-y); }
.svc-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 44px 48px; border-radius: var(--radius-lg); background: var(--brand); color: #fff; }
.svc-cta__title { font-size: 26px; font-weight: 700; line-height: 1.35; }
.svc-cta__desc { margin-top: 6px; color: rgba(255, 255, 255, .85); font-size: 16px; }
.svc-cta__actions { display: flex; align-items: center; gap: 24px; flex: none; }
.svc-cta__btn { height: 56px; padding: 0 30px; border-radius: 9999px; background: #fff; color: var(--brand-dark); font-size: 16px; font-weight: 700; }
.svc-cta__tel { font-size: 24px; font-weight: 800; }

/* 후기 · 함께 찾는 서비스 */
.svc-reviews { background: var(--bg-tint); }
.svc-reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.svc-reviews__stats { display: flex; gap: 32px; }
.svc-reviews__stats li { display: flex; flex-direction: column; align-items: flex-end; }
.svc-reviews__stats span { color: var(--text-body); font-size: 13px; }
.svc-reviews__stats strong { color: var(--brand); font-size: 32px; font-weight: 800; line-height: 1.2; }
.svc-reviews__stats small { margin-left: 2px; font-size: 16px; }
.svc-reviews__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.review-card--line { min-height: 0; border: 1px solid var(--line-box); }
.svc-reviews__more { margin-top: 24px; }

.related-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.related-list > li { display: flex; }
.related-card { display: flex; flex-direction: column; width: 100%; padding-bottom: 24px; border-radius: var(--radius-lg); background: #fff; overflow: hidden; box-shadow: var(--shadow-card); transition: transform .3s var(--ease), box-shadow .3s; }
.related-card__image { display: block; height: 200px; overflow: hidden; }
.related-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.related-card__group { margin: 20px 24px 0; color: var(--brand-dark); font-size: 13px; font-weight: 700; }
.related-card__title { margin: 4px 24px 14px; color: var(--text-strong); font-size: 20px; font-weight: 700; }
.related-card .link-arrow { margin: auto 24px 0; }

/* 18. 상담신청 · 후기 페이지 · 에러 ---------------------------------------- */
.contact-steps { padding: 56px 0 0; }
.steps--compact::before { top: 24px; }
.steps--compact .step__no { width: 48px; height: 48px; font-size: 16px; }
.steps--compact .step__title { margin-top: 12px; font-size: 17px; }
.steps--compact .step__desc { font-size: 14px; }

.faq { background: var(--bg-tint); }
.faq__list { display: grid; gap: 10px; max-width: 880px; margin: 0 auto; }
.faq__item { border: 1px solid var(--line-box); border-radius: var(--radius-sm); background: #fff; }
.faq__q {
    position: relative;
    padding: 20px 56px 20px 24px;
    color: var(--text-strong);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before { content: "Q."; margin-right: 8px; color: var(--brand); font-weight: 800; }
.faq__q::after { content: ""; position: absolute; top: 50%; right: 26px; width: 8px; height: 8px; margin-top: -6px; border: solid var(--text-body); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.faq__item[open] .faq__q::after { margin-top: -2px; transform: rotate(-135deg); }
.faq__a { padding: 0 24px 22px 54px; color: var(--text-sub-dark); font-size: 15px; line-height: 1.8; }

.partners { background: #fff; }
.partners__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.partners__item { display: flex; align-items: center; justify-content: center; height: 120px; padding: 20px 36px; border: 1px solid var(--line-box); border-radius: var(--radius-sm); }
/* 로고 원본이 흰색(녹색 배경용) → 회색으로 표시 */
.partners__item img { display: block; max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; filter: brightness(0); opacity: .45; transition: opacity .2s; }

/* 약관 · 개인정보처리방침 */
.legal__body { max-width: 880px; margin: 0 auto; color: var(--text-sub-dark); font-size: 15px; line-height: 1.8; }
.legal__body h2 { margin: 40px 0 12px; color: var(--text-strong); font-size: 19px; font-weight: 700; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p + p,
.legal__body p + table,
.legal__body table + p { margin-top: 10px; }
.legal__body ul { display: grid; gap: 6px; margin-top: 8px; }
.legal__body li { position: relative; padding-left: 14px; }
.legal__body li::before { content: ""; position: absolute; top: 12px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.legal__body table { width: 100%; margin-top: 10px; border-collapse: collapse; border-top: 2px solid var(--text-strong); font-size: 14px; }
.legal__body th,
.legal__body td { padding: 10px 12px; border-bottom: 1px solid var(--line-box); text-align: left; vertical-align: top; }
.legal__body th { background: #F7F7F7; color: var(--text-strong); font-weight: 600; white-space: nowrap; }
.legal__body a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }

.error-page { padding: 120px 0; text-align: center; }
.error-page__text { margin: 16px 0 32px; }
.error-page__actions { display: flex; justify-content: center; gap: 10px; }
.error-page__consult { height: 56px; padding: 0 30px; font-size: 16px; }
.error-page__links { margin-top: 56px; }
.error-page__links-title { color: var(--text-strong); font-size: 15px; font-weight: 700; }
.error-page__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 900px; margin: 18px auto 0; text-align: left; }
.error-page__group { padding: 20px; border: 1px solid var(--line-box); border-radius: var(--radius-sm); }
.error-page__group-title { color: var(--brand-dark); font-size: 14px; font-weight: 700; }
.error-page__links ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.error-page__links a { display: block; padding: 8px 16px; border: 1px solid var(--line-box); border-radius: 9999px; color: var(--text-sub-dark); font-size: 14px; transition: border-color .2s, color .2s; }