/* =========================================================
   이숲치과 공통 보강 스타일 (2026)
   - 모바일 하단 고정 상담 바
   - 카카오톡 상담 버튼
   기존 dist/style.css 는 건드리지 않고 이 파일에서만 덧씌웁니다.
   ========================================================= */

:root {
    --es-kakao: #FEE500;
    --es-kakao-text: #191600;
    --es-naver: #03C75A;
    --es-mbar-h: 64px;
}

/* ---------- 카카오톡 버튼 (CTA·헤더·드로어 공용) ---------- */
.no-cta__btn--kakao { background: var(--es-kakao); color: var(--es-kakao-text); }
.no-btn.es-btn-kakao { background: var(--es-kakao); border-color: var(--es-kakao); color: var(--es-kakao-text); }
.no-btn.es-btn-kakao:hover { background: #f5dc00; border-color: #f5dc00; }
.es-kakao-icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- 모바일 하단 고정 바 ---------- */
.es-mbar { display: none; }

@media (max-width: 767px) {
    .es-mbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 998;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 6px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 -4px 18px rgba(0, 0, 0, .08);
        transform: translateY(0);
        transition: transform .25s ease;
    }
    .es-mbar.is-hidden { transform: translateY(110%); }

    .es-mbar__btn {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        height: 48px; border-radius: 12px;
        font-size: 15px; font-weight: 700; letter-spacing: -.01em;
        white-space: nowrap;
    }
    .es-mbar__btn i { font-size: 15px; }
    .es-mbar__btn--tel { background: var(--clr-primary-50); color: var(--clr-primary-900); }
    .es-mbar__btn--kakao { background: var(--es-kakao); color: var(--es-kakao-text); }
    .es-mbar__btn--book { background: var(--es-naver); color: #fff; }

    /* 바에 가려지지 않도록 페이지 하단 여백 + 맨위로 버튼 위치 조정 */
    body.has-es-mbar { padding-bottom: calc(var(--es-mbar-h) + env(safe-area-inset-bottom)); }
    body.has-es-mbar .no-gototop { inset-block-end: calc(var(--es-mbar-h) + 14px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   진료 페이지 보강 블록 (2026)
   es-pg-split : 사진 + 설명
   es-pg-check : 이런 분께 권해요
   es-pg-steps : 진료 과정 (번호)
   es-pg-note  : 치료 전 알아두세요
   ========================================================= */
.es-pg { word-break: keep-all; }
.es-pg-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--clr-primary-main); }
.es-pg-title { margin-top: 10px; font-size: 36px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: var(--clr-text-base); }
.es-pg-lead { margin-top: 14px; font-size: 17px; line-height: 1.8; color: var(--clr-text-desc); }
.es-pg-center { text-align: center; }
.es-pg-center .es-pg-lead { max-width: 720px; margin-left: auto; margin-right: auto; }

.es-pg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.es-pg-split.--reverse > figure { order: 2; }
.es-pg-split figure { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--clr-gray-100); }
.es-pg-split img { width: 100%; height: 100%; object-fit: cover; display: block; }
.es-pg-split p + p { margin-top: 12px; }

.es-pg-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.es-pg-check li {
    position: relative; padding: 22px 24px 22px 60px; border-radius: 16px;
    background: var(--clr-base-white); border: 1px solid var(--clr-gray-200);
    font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--clr-text-base);
}
.es-pg-check li::before {
    content: ""; position: absolute; left: 22px; top: 24px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--clr-primary-main) 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 5L19 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.es-pg-check li small { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--clr-text-desc); }

.es-pg-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 40px; counter-reset: esstep; }
.es-pg-steps li {
    position: relative; padding: 28px 24px; border-radius: 18px; background: var(--clr-base-white);
    border: 1px solid var(--clr-gray-200); counter-increment: esstep;
}
.es-pg-steps li::before {
    content: "STEP " counter(esstep, decimal-leading-zero);
    display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--clr-primary-main);
}
.es-pg-steps h3 { margin-top: 10px; font-size: 19px; font-weight: 700; line-height: 1.4; }
.es-pg-steps p { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--clr-text-desc); }

.es-pg-note { margin-top: 40px; padding: 28px 30px; border-radius: 18px; background: var(--clr-base-background-light, #f3f1eb); }
.es-pg-note h3 { font-size: 19px; font-weight: 700; }
.es-pg-note ul { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.es-pg-note li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.7; color: var(--clr-text-desc); }
.es-pg-note li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--clr-primary-main); }

.es-pg-bg { background: var(--clr-base-background-light, #f3f1eb); }
.es-pg-photo { margin: 0 0 8px; border-radius: 20px; overflow: hidden; aspect-ratio: 21 / 9; }
.es-pg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1023px) {
    .es-pg-split { grid-template-columns: 1fr; gap: 32px; }
    .es-pg-split.--reverse > figure { order: 0; }
    .es-pg-title { font-size: 30px; }
}
@media (max-width: 767px) {
    .es-pg-title { font-size: 25px; }
    .es-pg-lead { font-size: 16px; }
    .es-pg-check { grid-template-columns: 1fr; margin-top: 28px; }
    .es-pg-check li { font-size: 16px; padding: 18px 18px 18px 54px; }
    .es-pg-check li::before { left: 18px; top: 20px; }
    .es-pg-steps { margin-top: 28px; }
    .es-pg-note { padding: 22px 20px; }
    .es-pg-photo { aspect-ratio: 16 / 10; }
}