/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 09 2026 | 04:02:00 */
/* ============================
   implant.css  v2
   임플란트 클리닉 섹션 전체 스타일
============================ */

/* ── 개요 ── */
.treatment-intro-wrap { gap: var(--one-space-r); align-items: center; padding: var(--one-space-r) 0 0; }
.treatment-intro-visual { flex: 0 0 45%; min-width: 0; }
.treatment-intro-img { width: 100%; border-radius: 20px; overflow: hidden; background: #B0BEC5; }
.treatment-intro-img > .img-ph,
.treatment-intro-img > img { width: 100%; height: auto; }
.treatment-intro-body { flex: 1; min-width: 0; }
.treatment-intro-body .cp-txt {letter-spacing: 0.5em; margin-bottom: var(--one-gap-sm);}
.treatment-intro-body .hd2 { margin: var(--one-gap-sm) 0 var(--one-gap-xl); line-height: var(--one-lh-lg); }
.treatment-intro-body .ft-body { color: var(--gray-color02); line-height: var(--one-lh-lg); }
.treatment-intro-body .ft-body + .ft-body { margin-top: var(--one-gap-lg); }

/* ── 비교표 ── */
.treatment-compare { display: flex; align-items: stretch; margin-top: var(--one-space-s); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,60,114,.12); }
.treatment-compare-item { flex: 1; display: flex; flex-direction: column; gap: var(--one-gap-xl); padding: var(--one-space-s); background: #f6f7f9; }
.treatment-compare-item.is-highlight { flex: 1.15; background: var(--main-color); position: relative; }
.treatment-compare-head { padding-bottom: var(--one-gap-lg); border-bottom: 1px solid rgba(0,0,0,.08); }
.treatment-compare-item.is-highlight .treatment-compare-head { border-bottom-color: rgba(255,255,255,.2); }
.treatment-compare-label { display: block; font-size: var(--one-body); font-weight: 700; color: var(--gray-color01); letter-spacing: .02em; }
.treatment-compare-item.is-highlight .treatment-compare-label { color: rgba(255,255,255,.75); }
.treatment-compare-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--one-gap-r); flex: 1; }
.treatment-compare-points li { display: flex; align-items: flex-start; gap: var(--one-gap-sm); font-size: var(--one-body); color: var(--gray-color02); line-height: var(--one-lh-r); }
.treatment-compare-points .is-minus::before { content: '✗'; flex-shrink: 0; font-size: 14px; color: #ccc; font-weight: 700; margin-top: 1px; }
.treatment-compare-points .is-plus::before { content: '✓'; flex-shrink: 0; font-size: 14px; color: #fff; font-weight: 700; margin-top: 1px; }
.treatment-compare-item.is-highlight .treatment-compare-points li { color: rgba(255,255,255,.9); }
.treatment-compare-vs { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; background: #fff; border-left: 1px solid var(--sub-color01); border-right: 1px solid var(--sub-color01); font-size: var(--one-caption); font-weight: 800; color: var(--main-color); letter-spacing: .05em; }

/* ── CHECK POINT ── */
.treatment-point-section { background: var(--sub-color02); }
.treatment-point-section .sec-hd {  }
.treatment-point-wrap { gap: var(--one-space-r); align-items: stretch; padding-bottom: var(--one-space-r); }
.treatment-point-visual { flex: 0 0 44%; min-width: 0; }
.treatment-point-img-wrap { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; width: 100%; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; background: #B0BEC5; }
.treatment-point-img { grid-area: 1/1; margin: 0; opacity: 0; transition: opacity .55s ease; position: relative; }
.treatment-point-img.is-active { opacity: 1; }
.treatment-point-img > .img-ph,
.treatment-point-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.treatment-point-list-wrap { flex: 1; min-width: 0; }
.treatment-point-list { height: 100%; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.treatment-point-item { position: relative; padding: var(--one-gap-xl) 0; border-bottom: 1px solid var(--sub-color03); cursor: pointer; flex: 1; }
.treatment-point-item:first-child { border-top: 1px solid var(--sub-color03); }
.treatment-point-item-inner { display: flex; align-items: flex-start; gap: var(--one-gap-lg); }
.treatment-point-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--sub-color01); color: var(--main-color); font-size: var(--one-caption); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease; }
.treatment-point-item.is-active .treatment-point-num { background: var(--main-color); color: #fff; }
.treatment-point-item-body { flex: 1; min-width: 0; }
.treatment-point-item-body .p-tit { display: block; margin-bottom: var(--one-gap-xs); transition: color .25s ease; }
.treatment-point-item.is-active .treatment-point-item-body .p-tit { color: var(--main-color); }
.treatment-point-item-body .ft-body { color: var(--gray-color02); line-height: var(--one-lh-lg); }
.treatment-point-progress { position: absolute; bottom: -1px; left: 0; height: 2px; width: 0; background: var(--main-color); display: block; }
.treatment-point-item.is-active .treatment-point-progress { animation: pointProgress 4s linear forwards; }
@keyframes pointProgress { from { width: 0; } to { width: 100%; } }

/* ── 시술 과정 ── */
.treatment-process-section { }
.treatment-process-section .sec-hd { padding-top: var(--one-space-r); }
.treatment-step-list { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--one-gap-lg); list-style: none; padding: var(--one-gap-xl) 0 var(--one-space-r); margin: 0; }
.treatment-step-item { display: flex; flex-direction: column; gap: var(--one-gap-lg); }
.treatment-step-visual { position: relative; }
.treatment-step-num { position: absolute; top: var(--one-gap-r); right: var(--one-gap-r); z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: var(--main-color); color: #fff; font-size: var(--one-caption); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.treatment-step-img-box { width: 100%; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; background: #c5d5e4; position: relative; }
.treatment-step-img-box > .img-ph,
.treatment-step-img-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.treatment-step-body .p-tit { display: block; margin-bottom: var(--one-gap-xs); text-align: center; }
.treatment-step-body .ft-body { color: var(--gray-color02); font-size: var(--one-caption); line-height: var(--one-lh-lg); text-align: center; }

/* ── 대상 환자 ── */
.treatment-target-wrap { gap: var(--one-space-r); align-items: flex-start; padding: var(--one-space-r) 0; }
.treatment-target-hd { flex: 0 0 28%; min-width: 0; position: sticky; top: 120px; }
.treatment-target-hd .hd2 { line-height: var(--one-lh-lg); margin-top: var(--one-gap-sm); }
.treatment-target-list { flex: 1; display: grid; grid-template-columns: 1fr; gap: var(--one-gap-lg); list-style: none; padding: 0; margin: 0; }
.treatment-target-card {
    display: flex;
    align-items: flex-start;
    gap: var(--one-gap-lg);
    padding: var(--one-gap-xl) var(--one-space-s);
    background: #f9f9f9;
    border-radius: 16px;
}

.treatment-target-body .p-tit {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--one-gap-sm);
    gap: var(--one-gap-sm);
}
.treatment-target-body .p-tit > span {
    font-weight: 900;
    font-size: 1.2em;
    opacity: 0.2;
    line-height: 1.3;
}

.treatment-target-body { flex: 1; min-width: 0; }
.treatment-target-body .ft-body { color: var(--gray-color02); line-height: var(--one-lh-lg); }

/* ── 비교 카드 (column 스택 / 이미지 교차) ── */
/* COMPARISON/OR 텍스트 스크롤 애니메이션 시 좌우 스크롤바 방지 */
.sec-navi-compare,
.sec-bone-method { overflow-x: hidden; }

.navi-compare-wrap { display: flex; flex-direction: column; gap: 0; }
.navi-compare-card { display: flex; flex-direction: row; background: #fff; overflow: hidden; border: 1px solid var(--gray-color03); border-radius: 20px; }
.navi-compare-card.is-highlight {  }
.navi-compare-card.is-reversed { flex-direction: row-reverse; }
.navi-compare-img { flex: 0 0 42%; position: relative; background: #c5d5e4; overflow: hidden; }
.navi-compare-card.is-highlight .navi-compare-img { background: #b0c4d8; }
.navi-compare-img > .img-ph { position: absolute; inset: 0; }
.navi-compare-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.navi-compare-body { flex: 1; display: flex; flex-direction: column; gap: var(--one-gap-lg); padding: var(--one-space-s); min-width: 0; }
.navi-compare-body .hd3 { line-height: 1.2; }
.navi-compare-body > .ft-body { color: var(--gray-color02); line-height: var(--one-lh-lg); }
.navi-compare-info { flex: 1; background: var(--sub-color02); border-radius: 12px; padding: var(--one-gap-xl); }
.navi-compare-info.is-highlight { background: var(--sub-color01); }
.navi-compare-info > .p-tit { display: flex; align-items: center; gap: var(--one-gap-sm); margin-bottom: var(--one-gap-lg); position: relative; }

.navi-compare-info .lst-dot li { color: var(--one-txt-color); }

/* COMPARISON 워터마크 — 사용자 수정본 유지 */
.navi-compare-vs {
    flex-shrink: 0;
    width: 100%;
    height: 7.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.navi-compare-vs span {
    /* 스타일 → common-components.css .txt-watermark 로 이전 */
}

/* 반응형 — 태블릿 */
@media all and (max-width: 1024px) {
    .navi-compare-card,
    .navi-compare-card.is-reversed { flex-direction: column; }
    .navi-compare-img { width: 100%; flex: none; aspect-ratio: 16/9; }
}
@media all and (max-width: 639px) {
    .navi-compare-body { padding: var(--one-gap-lg); }
    .navi-compare-info { padding: var(--one-gap-lg); }
    .navi-compare-img { aspect-ratio: 4/3; }
}

/* ── 의식하진정요법 4단계 ── */
.sed-step-list { grid-template-columns: repeat(4,1fr); }
@media all and (max-width: 1024px) { .sed-step-list { grid-template-columns: repeat(2,1fr); } }
@media all and (max-width: 639px)  { .sed-step-list { grid-template-columns: repeat(2,1fr); } }

/* ── sed-notice ── */
.sed-notice-wrap { gap: var(--one-gap-xl); align-items: stretch; }
.sed-notice-col { flex: 1; min-width: 0; background: #f9f9f9; border-radius: 20px; padding: var(--one-space-s); }
.sed-notice-head { margin-bottom: var(--one-gap-xl); }
.sed-notice-badge { display: inline-flex; align-items: center; gap: var(--one-gap-sm); border-radius: 20px; font-size: var(--one-p-tit); font-weight: 700; }
.sed-notice-badge--before { color: #E65100; }
.sed-notice-badge--after { color: var(--main-color); }
.sed-notice-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--one-gap-lg); }
.sed-notice-list li { display: flex; align-items: flex-start; gap: var(--one-gap-r); font-size: var(--one-body); color: var(--one-txt-color); line-height: var(--one-lh-lg); }
.sed-notice-list li::before { content: '✓'; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--main-color); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.sed-notice-col:first-child .sed-notice-list li::before { background: #E65100; }
@media all and (max-width: 639px) { .sed-notice-col { padding: var(--one-gap-lg); } }


/* ── 반응형 태블릿 ── */
@media all and (max-width: 1024px) {
    .treatment-intro-visual { flex: none; width: 100%; max-width: 400px; margin: 0 auto; }
    .treatment-point-visual { flex: none; width: 100%; max-width: 440px; margin: 0 auto; }
    .treatment-step-list { grid-template-columns: repeat(3,1fr); }
    .treatment-target-hd { position: static; flex: none; width: 100%; text-align: center; }
    .treatment-target-list { grid-template-columns: repeat(2,1fr); }
}

/* ── 반응형 모바일 ── */
@media all and (max-width: 639px) {
    .treatment-compare { flex-direction: column; }
    .treatment-compare-vs { width: 100%; height: 44px; border: none; border-top: 1px solid var(--sub-color01); border-bottom: 1px solid var(--sub-color01); }
    .treatment-point-img-wrap { aspect-ratio: 4/3; }
    .treatment-step-list { grid-template-columns: repeat(2,1fr); }
    .treatment-step-body .p-tit { font-size: var(--one-caption); }
    .treatment-target-list { grid-template-columns: 1fr; }

}