/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 10 2026 | 00:59:19 */
/* ============================
   prevent.css
   스케일링·치주치료 전체 스타일
   접두사: perio- / scal-
   의존: common-style.css / common-components.css
         implant.css (treatment-*) / general.css (car-stage-*, device-*)
============================ */


/* ======================================================
   치주질환 진행 단계 (perio-stage)
   general.css car-stage 패턴 재사용 + 페이지 전용 래퍼
   ====================================================== */
.perio-stage-inner {
    position: relative;
    z-index: 2;
    padding-top: var(--one-space-r);
    padding-bottom: var(--one-space-r);
}

/* 2단 그리드: 타이틀(좌) + 카드(우) */
.perio-stage-wrap {
    display: grid;
    grid-template-columns: 25% minmax(0, 1fr);
    gap: var(--one-space-r);
}

/* 좌: sticky 타이틀 */
.perio-stage-hd {
    display: flex;
    flex-direction: column;
    gap: var(--one-gap-lg);
    position: sticky;
    top: 100px;      /* GNB 높이 — 실제 값으로 조정 */
    align-self: start;
}

.perio-stage-hd .hd2 { line-height: 1.35; }
.perio-stage-hd > .ft-body { color: var(--gray-color02); line-height: var(--one-lh-lg); }

/* 우: 카드 리스트 */
.perio-stage-list {
    display: flex;
    flex-direction: column;
    gap: var(--one-gap-lg);
}

/* 카드 — car-stage-card 패턴 동일 적용 */
.perio-stage-card {
    display: flex;
    align-items: center;
    gap: var(--one-gap-xl);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
    /* 배경 이미지: WP에서 perio-stage-card--N 클래스에 background-image 직접 지정 */
    background-color: #fff;
    background-size: cover;
    background-position: center right;
	padding: var(--one-gap-xl) var(--one-gap-r);
}

/* 카드별 배경 이미지 훅 — WP에서 URL 직접 지정 */
 .perio-stage-card--1 { background-image: url('/wp-content/uploads/2026/06/perio-sc-bg.jpg'); }
.perio-stage-card--2 { background-image: url('/wp-content/uploads/2026/06/perio-rp-bg.jpg'); }
 .perio-stage-card--3 { background-image: url('/wp-content/uploads/2026/06/perio-fo-bg.jpg'); }
.perio-stage-card--4 { background-image: url('/wp-content/uploads/2026/06/perio-im-bg.jpg'); }

.perio-stage-left,
.car-stage-arrow,
.perio-stage-right { position: relative; z-index: 1; }

.perio-stage-card > .perio-stage-left { margin-left: var(--one-space-s); }
.perio-stage-card > .car-stage-arrow  { flex-shrink: 0; }
.perio-stage-card > .perio-stage-right {
    padding: var(--one-space-s) 22% var(--one-space-s) 0;
}

/* 좌: 단계 정보 — car-stage-left 동일 구조 */
.perio-stage-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--one-gap-lg);
    /* border-right/padding-right 없음 — car-stage-arrow가 구분 역할 */
}

.perio-stage-name { line-height: 1.2; margin: 0; }
.perio-stage-left > .ft-body { color: var(--gray-color02); line-height: var(--one-lh-lg); }

/* 우: 치료 정보 — car-stage-right 동일 구조 */
.perio-stage-right {
    flex: 1.1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--one-gap-xl);
    padding-left: var(--one-gap-xl);
}


.perio-stage-right .hd3 { line-height: 1.2; margin: 0; }
.perio-stage-right > .ft-body { color: var(--gray-color02); line-height: var(--one-lh-lg); }

/* 우측 콘텐츠 래퍼 (car-treat-content 역할) */
.perio-treat-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--one-gap-lg);
}

/* 섹션 배경 — caries stage 섹션과 동일한 분위기 */
.sec-perio-stage {
    background: #ecf3fb;
}


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

    /* 단계: 1열 전환, sticky 해제 */
    .perio-stage-wrap { grid-template-columns: 1fr; }
    .perio-stage-hd   { position: static; top: auto; align-self: auto; }

    /* 카드: 세로 전환 + 배경 이미지 blend (car-stage-card 패턴 동일) */
    .perio-stage-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--one-gap-lg);
    padding-top: 30%;
    background-position: right 0% top;
    background-size: auto 90%;
    background-repeat: no-repeat;
    }

    /* 모바일에서 텍스트 흰색 (배경 어두워져서) */

    .perio-stage-card > .perio-stage-left {
        margin-left: var(--one-gap-r);
        margin-top: var(--one-gap-r);
        margin-right: var(--one-gap-r);
    }

    .perio-stage-left { padding-right: 0; border-right: none; border-bottom: 1px solid var(--sub-color01); padding-bottom: var(--one-gap-xl); }
    .car-stage-arrow  { display: none; }
    .perio-stage-right { padding-left: 0; }
    .perio-stage-card > .perio-stage-right { padding: 0 var(--one-gap-r) var(--one-gap-r); }
}


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

    .perio-stage-card { padding: var(--one-gap-r); }
}


/* ======================================================
   예방치료 — 기본 예방관리 카드 (prev-basic)
   2x2 그리드 / 아이콘 + 제목 + 설명 + 태그
   ====================================================== */
.prev-basic-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--one-gap-lg);
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: var(--one-space-s);
}

.prev-basic-card {
    display: flex;
    gap: var(--one-gap-lg);
    padding: var(--one-space-s);
    border-radius: 16px;
    background: #f9f9f9;
}

.prev-basic-icon {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 12px;
    background: var(--sub-color01);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
}

.prev-basic-card .p-tit { display: block; margin-bottom: var(--one-gap-sm); }
.prev-basic-card .ft-body { color: var(--gray-color02); line-height: var(--one-lh-lg); flex: 1; }

.prev-basic-tag {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--gray-color03);
    font-size: 12px;
    font-weight: 600;
    color: var(--main-color);
    margin-top: var(--one-gap-lg);
    white-space: nowrap;
}

/* 섹션 내 소제목 */
.sec-hd-sm {
    margin-top: var(--one-space-r);
    margin-bottom: var(--one-gap-xl);
}

.sec-hd-sm .cp-txt { margin-bottom: var(--one-gap-sm); }
.sec-hd-sm .hd3 { line-height: 1.2; }


/* ======================================================
   예방치료 — 페리오 스파 케어 (prev-spa)
   프리미엄 차별화 섹션
   ====================================================== */
.prev-spa-wrap {
    position: relative;
    margin-top: var(--one-gap-xl);
    border-radius: 24px;
    background-color: #fff;
	background: url('/wp-content/uploads/2026/06/perio-spa-bg.jpg') no-repeat center / cover;
    overflow: hidden;
    padding: var(--one-space-r);
}

/* PREMIUM 배지 */
.prev-spa-badge {
    position: absolute;
    top: var(--one-gap-xl);
    right: var(--one-gap-xl);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(0,0, 0, 0.2);
    /* color: #fff; */
    font-size: var(--one-caption);
    font-weight: 800;
    letter-spacing: 0.12em;
}
/* 내부 2단 레이아웃 */
.prev-spa-inner {
	width:65%;
    gap: var(--one-space-r);
    align-items: flex-start;
}

/* 본문 (좌) */
.prev-spa-body { flex: 1; min-width: 0; }
.prev-spa-body .cp-txt { margin-bottom: var(--one-gap-sm); }

/* 이미지 (우) */
.prev-spa-visual {
    flex: 0 0 40%;
    align-self: stretch;
}



.prev-spa-title {
    line-height: 1.2;
    margin-bottom: var(--one-gap-xl);
}

.prev-spa-body > .ft-body {
    line-height: var(--one-lh-lg);
    margin-bottom: var(--one-space-s);
}

/* 4단계 스텝 */

.prev-spa-steps {
	    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--one-gap-r);
}
.prev-spa-step {
    display: flex;
    align-items: flex-start;
    gap: var(--one-gap-r);
    padding: var(--one-gap-lg);
    border-radius: 12px;
    background: #ffffff91;
    backdrop-filter: blur(4px);
}


.prev-spa-step-num {
    flex-shrink: 0;
    font-size: var(--one-caption);
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.6;
}

.prev-spa-step .p-tit {  display: block; margin-bottom: 4px; }
.prev-spa-step .ft-body {  font-size: var(--one-caption); line-height: var(--one-lh-lg); }

/* 하단 인포 */
.prev-spa-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--one-gap-lg);
    padding-top: var(--one-gap-xl);
    border-top: 1px solid rgba(255,255,255,0.2);
}

.prev-spa-info-item {
    display: flex;
    align-items: center;
    gap: var(--one-gap-sm);
    font-size: var(--one-caption);
    font-weight: 500;
}

.prev-spa-info-item svg { flex-shrink: 0; opacity: 0.7; }


/* ======================================================
   예방치료 — 정기검진 (prev-checkup)
   좌: 주기 / 우: 검진 항목
   ====================================================== */
.prev-checkup-wrap {
    align-items: stretch;
    margin-top: var(--one-space-s);
}

/* 좌: 주기 안내 */
.prev-checkup-period {
    display: flex;
    align-items: flex-start;
	padding-top: 80px;
}

.prev-checkup-period-inner {
    width: 100%;
    padding:var(--one-gap-sm) 0 var(--one-gap-sm) var(--one-space-s) ;
    border-radius: 20px;
    /* background: var(--main-color); */
    /* background: url('/wp-content/uploads/2026/06/perio-cycle-bg.jpg') no-repeat center / cover; */
    text-align: center;
}

.prev-checkup-period-inner .cp-txt {
/*     letter-spacing: 0.5em; */
    /* color: rgba(255,255,255,0.7); */
    margin-bottom: var(--one-gap-sm);
    display: block;
}
.prev-checkup-cycle {
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: var(--one-gap-sm);
}

.prev-checkup-period-inner > .ft-body {
/*     color: rgba(255,255,255,0.75); */
    margin-bottom: var(--one-gap-xl);
/*     padding-bottom: var(--one-gap-xl); */
/*     border-bottom: 1px solid rgba(255,255,255,0.2); */
}

.prev-checkup-cycle-note {
    display: flex;
    flex-direction: column;
    gap: var(--one-gap-sm);
    text-align: left;
}

.prev-checkup-cycle-note .ft-body {
/*     color: rgba(255,255,255,0.75); */
    font-size: var(--one-caption);
	text-align: center;
}

/* .prev-checkup-cycle-note strong { color: #fff; } */

/* 우: 검진 항목 */
.prev-checkup-content {
    width: 70%;
    min-width: 0;
    padding-left: var(--one-space-xl);
}

.prev-checkup-list {
    display: flex;
    flex-direction: column;
    gap: var(--one-gap-lg);
    list-style: none;
    padding: 0; margin: 0;
}

.prev-checkup-item {
    display: flex;
    align-items: flex-start;
    gap: var(--one-gap-lg);
    padding: var(--one-gap-xl);
    border-radius: 14px;
    border: 1px solid var(--gray-color03);
    background: #fff;
}


.prev-checkup-item .p-tit {
    display: flex;
    margin-bottom: 4px;
    flex-direction: column;
    gap: var(--one-gap-lg);
    align-items: flex-start;
}
.prev-checkup-item .p-tit > span {
	    background: var(--gray-color03);
    font-weight: 500;
    font-size: 0.8em;
    padding: 0.2em 1em 0.15em;
    border-radius: 50em;
    color: var(--gray-color02);
}
.prev-checkup-item .ft-body { color: var(--gray-color02); line-height: var(--one-lh-lg); }


/* ======================================================
   예방치료 — NHIS 구강검진 (prev-nhis)
   ====================================================== */
.prev-nhis-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 24px;
    overflow: hidden;
}

/* 1행: 이미지 — 투명 배경 PNG용 (배경 없음) */
.prev-nhis-img-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.prev-nhis-img-row > img {
    display: block;
    object-fit: contain;
}

/* 2행: 내용 컨텐츠 */
.prev-nhis-content {
    display: flex;
    flex-direction: column;
    gap: var(--one-space-s);
    padding: var(--one-space-s);
}

/* 검진 자격 3개 인포 */
.prev-nhis-info {
    display: flex;
    align-items: center;
    justify-content: center;
}
.prev-nhis-info-item {
    display: flex;
    align-items: center;
    gap: var(--one-gap-r);
    padding: var(--one-gap-xl);
    background: #d8ecfebf;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 21em;
    width: 21em;
    border-radius: 50%;
    margin-left: -3em;
}
.prev-nhis-info-item:nth-child(even){
	    background: #75bfff75;
    z-index: 1;
}
.prev-nhis-info-item .p-tit { display: block; margin-bottom: var(--one-gap-sm); }
.prev-nhis-info-item .ft-body { color: var(--gray-color02); line-height: var(--one-lh-lg); }

/* 검진 항목 */
.prev-nhis-items {
    padding: var(--one-gap-xl);
    background: #f9f9f9;
    border-radius: 14px;
}

.prev-nhis-items-title {
    font-size: var(--one-p-tit);
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: var(--one-gap-lg);
}

.prev-nhis-item-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--one-gap-r);
    list-style: none;
    padding: 0; margin: 0;
}

.prev-nhis-item-list li {
    display: flex;
    align-items: center;
    gap: var(--one-gap-sm);
    font-size: var(--one-body);
    color: var(--one-txt-color);
}

.prev-nhis-item-list li svg { flex-shrink: 0; color: var(--main-color); }

/* CTA */
.prev-nhis-cta {
    padding-top: var(--one-gap-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--one-gap-xl);
}
.prev-nhis-cta .btn-primary {color: var(--white-color) ;}
.prev-nhis-cta .ft-body { color: var(--gray-color02); }


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

    /* 기본 예방관리: 2열 */
    .prev-basic-list { grid-template-columns: repeat(2, 1fr); }

    /* 페리오 스파: 세로 전환 (이미지가 하단으로) */
    .prev-spa-inner { flex-direction: column; width:100%;}
    .prev-spa-visual { flex: none; width: 100%; }
    .prev-spa-steps { grid-template-columns: repeat(2, 1fr); }

    /* 정기검진: 세로 전환 */
    .prev-checkup-wrap {
			gap: var(--one-space-s);
		}
    .prev-checkup-period { flex: none; width: 100%; padding-top:0; }

    /* NHIS: 1열 */
    .prev-nhis-info { flex-direction: column; }
    .prev-nhis-item-list { grid-template-columns: repeat(2, 1fr); }
}


/* ======================================================
   예방치료 반응형 — 모바일 (max-width: 639px)
   ====================================================== */
@media all and (max-width: 639px) {
	
	 .perio-stage-card--1 { background-image: url('/wp-content/uploads/2026/06/mo-perio-sc-bg.jpg'); }
.perio-stage-card--2 { background-image: url('/wp-content/uploads/2026/06/mo-perio-rp-bg.jpg'); }
 .perio-stage-card--3 { background-image: url('/wp-content/uploads/2026/06/mo-perio-fo-bg.jpg'); }
.perio-stage-card--4 { background-image: url('/wp-content/uploads/2026/06/mo-perio-im-bg.jpg'); }
	.sec-hd-sm {
		text-align: center;
	}
	.prev-basic-tag {
		margin-top: var(--one-gap-r);
	}
    /* 기본 예방관리: 1열 */
    .prev-basic-list { grid-template-columns: 1fr; }
    .prev-basic-card { padding: var(--one-gap-lg); }

    /* 페리오 스파 */
	.prev-nhis-content {
		padding: 0;
	}
    .prev-spa-wrap {
		padding: var(--one-space-s);
	}
    .prev-spa-steps { grid-template-columns: 1fr; }
    .prev-spa-badge { top: var(--one-gap-r); right: var(--one-gap-r); }
	.prev-checkup-content {
		width: 100%;
		padding-left: 0;
	}
    /* NHIS */
	.prev-nhis-info {
		flex-wrap: wrap;
	}
	.prev-nhis-info-item {padding : 3.5vw;}
    .prev-nhis-item-list { grid-template-columns: 1fr; }
    .prev-nhis-wrap { padding: 0; }
.prev-nhis-info-item {
    height: 65vw;
    width: 65vw;
    margin: -3vw 0;
}
	.prev-nhis-info-item:first-child {
		margin-top: 0;
	}
	.prev-checkup-period-inner {
		padding: var(--one-gap-sm) 0;
	}
}