/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 09 2026 | 08:15:27 */
/* ============================
   Main page only
   공통 CSS/JS 수정 없이 메인 전용 클래스만 선언
============================ */

/* S01 Smart Slider shortcode area */
.sec-main-visual {
    width: 100%;
    overflow: hidden;
}

/* ============================
   S02 Stat
============================ */
.sec-main-stat {
    background: var(--main-color);
}

/* con-inner-lg 의 상하 기본 패딩을 수치 바 전용으로 재정의 */
.sec-main-stat .con-inner-lg {
    padding-top: 0;
    padding-bottom: 0;
}

.sec-main-stat-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 34px 0;
    list-style: none;
}

.sec-main-stat-item {
    position: relative;
    text-align: center;
    color: #fff;
}

/* PC: 오른쪽 구분선 — 마지막 자식 제외 */
.sec-main-stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 34px;
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-50%);
}

.sec-main-stat-item .hd3,
.sec-main-stat-item .cp-txt {
    color: #fff;
}

.sec-main-stat-item .cp-txt {
    margin-top: 6px;
    opacity: 0.85;
}

/* ============================
   S03 Reason (sticky + grid)
============================ */
.sec-main-reason {
    background: #fff;
}

/* .con-inner 위에 grid 레이아웃 추가 */
.sec-main-reason-inner {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--one-space-r);
    align-items: flex-start;
}

.sec-main-reason-head {
    padding-top: var(--one-space-s);
}

.sec-main-reason-head .sec-hd {
    padding-bottom: var(--one-space-s);
}

.sec-main-reason-head .ft-body {
    margin-top: var(--one-gap-lg);
}

/* 흰 배경 위에서 secondary 버튼을 명시적으로 흰 배경 처리 */
.sec-main-reason-btn {
    margin-top: var(--one-space-s);
}

.sec-main-reason-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--one-gap-lg);
}

.sec-main-reason-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 18em;
    padding: var(--one-space-s);
    background: #f9f9f9;
    border: 1px solid rgba(0, 60, 114, 0.08);
    border-radius: 24px;
    overflow: hidden;
}

.sec-main-reason-card .txt-wrap {
    position: relative;
    z-index: 2;
    max-width: 620px;
}

.sec-main-reason-card .cp-txt {
    margin-bottom: var(--one-gap-sm);
    font-weight: 700;
    letter-spacing: 0.28em;
}

.sec-main-reason-card .ft-body {
    margin-top: var(--one-gap-sm);
    color: var(--gray-color02);
}

.sec-main-reason-icon {
    position: relative;
    z-index: 2;
    width: 54px;
    height: 54px;
    margin-right: var(--one-gap-xl);
    border-radius: 50%;
    background: rgba(0, 60, 114, 0.1);
    flex-shrink: 0;
}

.sec-main-reason-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid var(--main-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* 배경 데코 숫자 */
.sec-main-reason-num {
    position: absolute;
    right: 28px;
    bottom: -20px;
    z-index: 1;
    color: var(--main-color);
    font-size: 118px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.08em;
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

/* ============================
   S04 Treatment (bento grid — 임플란트 와이드 정방형)

   PC 레이아웃 (grid-template-areas):
   ┌──────────┬──────┐
   │          │  c2  │ ← 정방형
   │  c1(임플) ├──────┤
   │  정방형   │  c3  │ ← 정방형
   ├─────┬────┴──────┤
   │ c4  │ c5  │ c6  │ ← 정방형 × 3
   └─────┴─────┴─────┘

   핵심 설계:
   - grid-template-areas: nth-child auto-placement 의존 완전 제거
     → WP 렌더링 환경(wpautop, 태그 삽입)에 무관하게 레이아웃 고정
   - .sec-treatment-01~06 고유 클래스로 카드 위치 명시
   - aspect-ratio: 1/1 → 소형 카드 정방형
     → 그리드 행 높이 = 열 너비 → 대형 카드도 자연스럽게 정방형(2×2)
============================ */
.sec-main-treatment {
    background: var(--sub-color02);
}

/* PC: 3열 / template-areas로 배치 확정 */
.sec-main-treatment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "c1 c1 c2"
        "c1 c1 c3"
        "c4 c5 c6";
    gap: var(--one-gap-lg);
}

/* 카드 기본 — 정방형 비율 */
.sec-main-treatment-card {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #b8c7cf;
    box-shadow: 0 18px 44px rgba(0, 60, 114, 0.06);
    transform: translateZ(0);
    cursor: pointer;
    aspect-ratio: 1 / 1;
}

/* ── 카드 위치: 고유 클래스로 확정 ── */
.sec-treatment-01 {
    grid-area: c1;
    aspect-ratio: auto; /* 대형 카드: 그리드 행·열이 크기 결정 */
}
.sec-treatment-02 { grid-area: c2; }
.sec-treatment-03 { grid-area: c3; }
.sec-treatment-04 { grid-area: c4; }
.sec-treatment-05 { grid-area: c5; }
.sec-treatment-06 { grid-area: c6; }

/* Stretched-link */
.sec-main-treatment-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    text-decoration: none;
}

.sec-main-treatment-link:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: -4px;
}

/* 이미지 자리 */
.sec-main-treatment-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #b8c7cf 0%, #dce8f2 100%);
    overflow: hidden;
}

.sec-main-treatment-img span {
    position: absolute;
    left: 50%;
    top: 50%;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    transform: translate(-50%, -50%);
}

/* ── Overlay: 카드 전체 / 하단 flex 정렬 ── */
.sec-main-treatment-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 22px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.08) 52%,
        transparent 100%
    );
    transition: background 0.35s ease;
}

.sec-main-treatment-overlay.txt-wrap {
    color: #fff;
}

/* 대형 카드: 패딩 키움 */
.sec-treatment-01 .sec-main-treatment-overlay {
    padding: 30px 34px;
}

/* ── Expand (라벨+설명+버튼): 기본 숨김 / 호버 시 fade-up ── */
.sec-main-treatment-expand {
    flex: 0 0 auto;
    margin-bottom: var(--one-gap-lg);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.28s ease, transform 0.32s ease;
}

.sec-main-treatment-expand .cp-txt {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 700;
    letter-spacing: 0.22em;
    margin-bottom: var(--one-gap-sm);
}

.sec-main-treatment-expand .ft-body {
    display: block;
    color: rgba(255, 255, 255, 0.86);
    margin-top: var(--one-gap-sm);
    margin-bottom: var(--one-gap-lg);
}

/* ── 타이틀: 항상 하단 고정 ── */
.sec-main-treatment-title {
    flex: 0 0 auto;
    color: #fff;
    line-height: var(--one-lh-lg);
}

.sec-main-treatment-overlay .hd3,
.sec-main-treatment-overlay .p-tit {
    color: #fff;
}

/* ── 자세히 보기: 배경 없음 ── */
.sec-main-treatment-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--one-caption);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.48);
    padding-bottom: 2px;
}

.sec-main-treatment-more::after {
    content: "→";
    display: inline-block;
    font-size: 0.9em;
    line-height: 1;
    transition: transform 0.22s ease;
}

/* ── 호버·포커스: 카드 전체 어둡게 + expand 노출 ── */
.sec-main-treatment-card:hover .sec-main-treatment-overlay,
.sec-main-treatment-card:focus-within .sec-main-treatment-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.65) 45%,
        rgba(0, 0, 0, 0.38) 100%
    );
}

.sec-main-treatment-card:hover .sec-main-treatment-expand,
.sec-main-treatment-card:focus-within .sec-main-treatment-expand {
    opacity: 1;
    transform: translateY(0);
}

.sec-main-treatment-card:hover .sec-main-treatment-more::after,
.sec-main-treatment-card:focus-within .sec-main-treatment-more::after {
    transform: translateX(4px);
}

/* ============================
   S05 Doctor (PC: horizontal / TAB·MO: grid)
============================ */
.sec-main-doctor {
    background: #fff;
    /* overflow:hidden 제거 — CSS sticky 동작에 영향 없음
       overflow가 있으면 position:sticky 가 동작하지 않을 수 있음 */
}

/* PC: 좌우 분할 flex 컨테이너
   head: 왼쪽 sticky 고정 / track: 오른쪽 세로 카드 나열 */
.sec-main-doctor-pin {
    display: flex;
    align-items: flex-start;
}

/* 왼쪽 헤드: CSS sticky — GSAP 불필요, 리플로우 없음 */
.sec-main-doctor-head {
    width: 35%;
    align-self: flex-start;
	padding : 100px var(--one-space-s) 0 0 !important;
	
}

.sec-main-doctor-head .ft-body {
    margin-top: var(--one-gap-lg);
}

.sec-main-doctor-head .btn-secondary {
    margin-top: var(--one-space-s);
}

/* 오른쪽 스테이지: stage/track 가로 구조 불필요 → 세로 카드 그리드 */
.sec-main-doctor-stage {
     width: 65%;
    min-width: 0;
    overflow: visible;   /* 가로 클리핑 불필요 */
    padding: var(--one-space-s) 0;
}

/* 세로 트랙: 2열 그리드로 카드 나열 */
.sec-main-doctor-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--one-gap-lg);
    will-change: auto;   /* transform 제거 */
}

.sec-main-doctor-card {
    width: 70%;
    overflow: hidden;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0, 60, 114, 0.1);
    margin-left: 30%;
}

/* 이미지 자리: aspect-ratio로 비율 유지 */
.sec-main-doctor-img {
    position: relative;
    width: 100%;
    height: auto;
}

.sec-main-doctor-img span,
.sec-main-equipment-img span,
.sec-main-location-map span {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    transform: translate(-50%, -50%);
}

.sec-main-doctor-body {
    padding: 26px;
}

.sec-main-doctor-body .cp-txt,
.sec-main-doctor-body .ft-body {
    margin-top: var(--one-gap-xs);
}

.sec-main-doctor-body .ft-body {
    color: var(--gray-color02);
}

/* ============================
   S06 Review
============================ */
.sec-main-review {
    background: var(--sub-color02);
}

/* ============================
   S07 Equipment (교차 2단 레이아웃)
============================ */
.sec-main-equipment {
    background: #fff;
}

.sec-main-equipment-list {
    display: grid;
    gap: var(--one-space-r);
}

/* PC: 2단 grid */
.sec-main-equipment-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--one-gap-xl);
    align-items: center;
}

/* 이미지 자리: aspect-ratio로 비율 유지 */
.sec-main-equipment-img {
    position: relative;
    aspect-ratio: 560 / 360;
    background: #546e7a;
    border-radius: 14px;
    overflow: hidden;
}

.sec-main-equipment-body .ft-body {
    margin: var(--one-gap-lg) 0;
    color: var(--gray-color02);
}

/* ============================
   S08 Location
============================ */
.sec-main-location {
    background: var(--sub-color02);
}

/* PC: 정보(좌) + 지도(우) */
.sec-main-location-box {
    display: grid;
    grid-template-columns: 0.9fr 1.5fr;
    gap: var(--one-space-r);
    align-items: center;
}

.sec-main-location-info {
    padding: var(--one-space-s) 0;
}

.sec-main-location-info .hd2 {
    margin-bottom: var(--one-gap-lg);
}

/* 주소 + 진료시간 그리드 */
.sec-main-location-list {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 12px 16px;
    margin: var(--one-space-s) 0 0;
}

.sec-main-location-list dt {
    font-weight: 700;
    color: var(--main-color);
}

.sec-main-location-list dd {
    margin: 0;
    color: var(--one-txt-color);
}

/* 지도 링크 버튼 그룹 */
.sec-main-location-btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--one-gap-sm);
    margin-top: var(--one-space-s);
}

/* 연한 배경 위 버튼: 흰 배경 명시 */
.sec-main-location-btns .btn-secondary {
    background: #fff;
}

/* 대표 전화번호 */
.sec-main-location-tel {
    margin-top: var(--one-space-s);
    font-size: 36px;
    line-height: 1;
    font-weight: 700;
    color: var(--main-color);
}

.sec-main-location-tel a {
    color: inherit;
    text-decoration: none;
}

/* CSS 데모 지도 */
.sec-main-location-map {
    position: relative;
    aspect-ratio: 760 / 420;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0)),
        repeating-linear-gradient(0deg, #e7eef5 0 2px, transparent 2px 72px),
        repeating-linear-gradient(90deg, #d9e5ef 0 2px, transparent 2px 90px),
        #f2f7fb;
    overflow: hidden;
}

.sec-main-location-map::before {
    content: "";
    position: absolute;
    left: 48%;
    top: 42%;
    width: 28px;
    height: 28px;
    background: var(--main-color);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

.sec-main-location-map::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 58px;
    background: rgba(0, 90, 170, 0.28);
    transform: translateX(-50%);
}

.sec-main-location-map span {
    z-index: 2;
    color: var(--main-color);
}
.sec-main-location-box address {
	display: flex;
	align-items: center;
	font-style : normal;
}
/* ============================
   S09 CTA
============================ */
.sec-main-cta {
    background: var(--main-color);
}

/* con-inner 하위 txt-wrap 텍스트 색상 반전 */
.sec-main-cta .txt-wrap,
.sec-main-cta .hd2,
.sec-main-cta .cp-txt {
    color: #fff;
}

/* txt-wrap 과 버튼 그룹 사이 여백 */
.sec-main-cta .txt-wrap {
    margin-bottom: var(--one-space-s);
}

.sec-main-cta-btns {
    display: flex;
    justify-content: center;
    gap: var(--one-gap-lg);
}

/* CTA 내 버튼 색상 반전 */
.sec-main-cta .btn-primary {
    background: #fff;
    color: var(--main-color);
}

.sec-main-cta .btn-secondary {
    color: #fff;
    border-color: #fff;
}

.sec-main-cta .btn-secondary:hover {
    background: #fff;
    color: var(--main-color);
}

/* ============================
   반응형 — 태블릿 (max-width: 1024px)
============================ */
@media all and (max-width: 1024px) {

    /* S02 Stat: 2×2 그리드
       수정: nth-child(4)::after 도 숨김 추가
       (오른쪽 열 마지막 항목 구분선 제거) */
    .sec-main-stat-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 0;
    }

    .sec-main-stat-item:nth-child(2)::after,
    .sec-main-stat-item:nth-child(4)::after {
        display: none;
    }

    /* S03 Reason: sticky 해제 → 단열 */
    .sec-main-reason-inner,
    .sec-main-location-box {
        display: block;
    }

    .sec-main-reason-head {
        padding-top: 0;
        margin-bottom: var(--one-space-s);
    }

    .sec-main-reason-card {
        min-height: 16em;
    }

    .sec-main-reason-num {
        font-size: 88px;
    }

    /* S04 Treatment: 태블릿 2열
       ┌──────┬──────┐
       │ c1(임플) full │
       ├──────┼──────┤
       │  c2  │  c3  │
       ├──────┼──────┤
       │  c4  │  c5  │
       ├──────┴──────┤
       │   c6 full   │
       └─────────────┘
       touch 디바이스: expand 항상 노출 */
    .sec-main-treatment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "c1 c1"
            "c2 c3"
            "c4 c5"
            "c6 c6";
    }

    /* 대형·전폭 카드: 2:1 비율 */
    .sec-treatment-01,
    .sec-treatment-06 { aspect-ratio: 2 / 1; }

    /* touch 디바이스: expand 항상 노출 */
    .sec-main-treatment-expand { opacity: 1; transform: none; }
    .sec-main-treatment-overlay {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.38) 50%,
            rgba(0, 0, 0, 0.10) 100%
        );
    }

    /* S05 Doctor: 태블릿 — sticky 해제, 1열 세로 나열 */
    .sec-main-doctor-pin {
        display: block;
    }

    .sec-main-doctor-head {
        width: 100%;
		padding: 0 !important;
        margin-bottom: var(--one-space-s);
    }

    .sec-main-doctor-stage {
		width:100%;
        padding: 0;
    }

    .sec-main-doctor-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sec-main-doctor-card {
        width: 100%;
		margin-left : 0;
    }

    /* S07 Equipment: 단열 + 이미지 순서 보정
       수정: display:block → flex + order 로 이미지 항상 위에 */
    .sec-main-equipment-item {
        display: flex;
        flex-direction: column;
    }

    /* 왼쪽 아이템: DOM 순서 이미지→텍스트 그대로 유지 */
    .sec-main-equipment-item-left .sec-main-equipment-img {
        margin-bottom: var(--one-gap-xl);
    }

    /* 오른쪽 아이템: DOM 순서 텍스트→이미지를 CSS order로 이미지 먼저 */
    .sec-main-equipment-item-right .sec-main-equipment-img {
        order: -1;
        margin-bottom: var(--one-gap-xl);
    }

    .sec-main-equipment-item-right .sec-main-equipment-body {
        order: 1;
    }

    /* S08 Location: 단열 (지도→정보 순) */
    .sec-main-location-map {
        margin-bottom: var(--one-gap-xl);
    }
}

/* ============================
   반응형 — 모바일 (max-width: 639px)
============================ */
@media all and (max-width: 639px) {

    /* S02 Stat: 전체 구분선 제거 */
    .sec-main-stat-list {
        padding: 28px 0;
    }

    .sec-main-stat-item::after {
        display: none;
    }

    /* S03 Reason: 카드 세로형 */
    .sec-main-reason-card {
        display: block;
        min-height: 14em;
        padding: var(--one-space-s) var(--one-gap-lg);
        border-radius: 18px;
    }

    .sec-main-reason-icon {
        margin-right: 0;
        margin-bottom: var(--one-gap-lg);
    }

    .sec-main-reason-num {
        right: 18px;
        bottom: -12px;
        font-size: 64px;
    }

    /* S04 Treatment: 모바일 1열 / 타이틀 + 버튼만 */
    .sec-main-treatment-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "c1" "c2" "c3" "c4" "c5" "c6";
    }

    /* 모바일: 전체 카드 4:3 비율 (1:1은 너무 길어 UX 저하) */
    .sec-main-treatment-card,
    .sec-treatment-01,
    .sec-treatment-06 { aspect-ratio: 4 / 3; }

    /* 라벨·설명 숨김, 타이틀+버튼만 표시 */
    .sec-main-treatment-expand .cp-txt,
    .sec-main-treatment-expand .ft-body { display: none; }
    .sec-main-treatment-expand { margin-bottom: var(--one-gap-sm); }
    .sec-main-treatment-overlay { padding: 20px 24px; }

    /* S05 Doctor: 1열 */
    .sec-main-doctor-track {
        grid-template-columns: 1fr;
    }

    .sec-main-doctor-card {
        border-radius: 18px;
    }

    /* S08 Location */
    .sec-main-location-list {
        grid-template-columns: 58px 1fr;
    }

    .sec-main-location-tel {
        font-size: 28px;
    }

    /* S09 CTA: 버튼 세로 */
    .sec-main-cta-btns {
        flex-direction: column;
    }
}