@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;500;700&display=swap');

/* ==========================================================================
   안내 페이지 공통 — 임플란트·충치 안내 페이지가 함께 쓴다
   마크업: /_inc/implant/info_hero.php (메인 + 제목·소개) , /_inc/implant/info_steps.php (STEP 단계 목록)
   공통 모양: .ii-hero · .ii-intro · .ii-title(가운데 제목 + 그라데이션 선) · .ii-subtitle(섹션 소제목) · .ii-brace(어두운 사진 배경 + { } 문구) · .ii-steps
   .ii-target(시술 대상 01~04, /_inc/implant/info_target.php) · .ii-orbit(큰 원 둘레 01~04, /_inc/implant/info_orbit.php) · .ii-merit(원형 사진 장점, /_inc/implant/info_merit.php)
   사용: sub312 · sub318 · sub511 · sub512 · sub513 · sub514 · sub517 · sub520
   ========================================================================== */
.ii-hero, .ii-intro, .ii-brace, .ii-steps {font-family:"Noto Sans KR",sans-serif;letter-spacing:-.03em;text-align:center;box-sizing:border-box;}
.ii-hero *, .ii-intro *, .ii-brace *, .ii-steps * {box-sizing:border-box;word-break:keep-all;}
.ii-hero :where(h2,h3,p), .ii-intro :where(h2,p), .ii-brace :where(h2,p), .ii-steps :where(h2,h3,p,ol) {margin:0;padding:0;list-style:none;}
.ii-hero h2, .ii-intro h2, .ii-brace h2, .ii-steps h2, .ii-steps h3 {text-align:center;}

.ii-eng {font-size:clamp(10px,1.04vw,20px);font-weight:300;letter-spacing:.45em;color:#fff;}
.ii-eng--gray {font-size:clamp(9px,.73vw,14px);letter-spacing:.3em;color:#999;}

/* 메인 */
.ii-hero {display:flex;flex-direction:column;justify-content:center;min-height:clamp(200px,24.5vw,470px);padding:40px 20px 60px;background:#6f7597 no-repeat center / cover;}
@media screen and (min-width:1521px) { .ii-hero {padding-top:110px;justify-content:flex-start;} } /* PC 헤더가 겹쳐 뜨는 만큼 */
.ii-hero .ii-hero__title {margin-top:.3em;font-size:clamp(22px,2.81vw,54px);font-weight:700;line-height:1.25;color:#fff;}
.ii-hero__sub {margin-top:.9em !important;font-size:clamp(13px,1.3vw,25px);font-weight:300;color:#fff;}

/* 제목 (가운데 + 그라데이션 선) */
.ii-title {font-size:clamp(26px,2.29vw,44px);font-weight:300;line-height:1.3;color:#333;}
.ii-title b {font-weight:700;color:#222;}
.ii-title::after {content:"";display:block;width:100px;height:4px;margin:.8em auto 0;border-radius:2px;background:linear-gradient(90deg,#1f4f9a,#5aaddf);}
.ii-intro {max-width:1100px;margin:0 auto;padding:clamp(56px,5.7vw,110px) 20px clamp(56px,4.2vw,80px);}
.ii-intro .ii-title {margin-top:.4em;}
.ii-intro__desc {margin-top:clamp(28px,2.4vw,46px) !important;font-size:clamp(13px,.83vw,16px);font-weight:300;line-height:1.75;color:#888;}

/* 어두운 사진 배경 + 좌우 { } 문구 */
.ii-brace {padding:clamp(56px,4.2vw,80px) 20px clamp(60px,6vw,115px);background:#666 no-repeat center / cover;color:#fff;}
.ii-brace__head {position:relative;display:inline-block;padding:0 clamp(40px,4.7vw,90px);}
.ii-brace__head::before, .ii-brace__head::after {position:absolute;top:50%;font-family:"Noto Serif KR",serif;font-size:clamp(70px,6.8vw,130px);font-weight:300;line-height:1;color:#fff;transform:translateY(-55%);}
.ii-brace__head::before {content:"{";left:0;}
.ii-brace__head::after {content:"}";right:0;}
.ii-brace .ii-brace__title {font-family:"Noto Serif KR",serif;font-size:clamp(21px,2.08vw,40px);font-weight:500;line-height:1.35;color:#fff;}
.ii-brace mark {padding:0 .15em;background:#1d4a92;color:#fff;}

/* 원형 그림 + STEP 단계 목록 */
.ii-steps {max-width:1320px;margin:0 auto;padding:clamp(60px,5.2vw,100px) 20px clamp(70px,6.3vw,120px);}
.ii-steps .ii-steps__title {margin-top:.4em;font-size:clamp(26px,2.4vw,46px);font-weight:300;color:#222;}
.ii-steps__title b {font-weight:700;}
.ii-steps__title::after {content:"";display:block;width:24px;height:24px;margin:.6em auto 0;background:linear-gradient(to top right,transparent calc(50% - 1px),#222 calc(50% - 1px),#222 calc(50% + 1px),transparent calc(50% + 1px));} /* "\" 방향 사선 */
.ii-steps__list {display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,3.1vw,60px) !important;}
.ii-steps__list li {display:flex;flex-direction:column;align-items:center;}
.ii-steps__list img {display:block;width:88% !important;max-width:280px;height:auto;}
.ii-steps__list strong {display:inline-block;margin-top:clamp(20px,1.8vw,35px);padding:.25em .8em;border-radius:.5em;background:#333;font-size:clamp(14px,1.2vw,23px);font-weight:700;color:#fff;letter-spacing:0;}
.ii-steps__list h3 {margin-top:.6em;font-size:clamp(16px,1.35vw,26px);font-weight:500;color:#222;}
.ii-steps__list p {align-self:stretch;min-height:11em;margin-top:clamp(14px,1.3vw,25px) !important;padding:0 12px;border-left:1px solid #ddd;font-size:clamp(12.5px,.94vw,18px);font-weight:300;line-height:1.65;color:#666;}
.ii-steps__list li:last-child p {border-right:1px solid #ddd;}
.ii-steps__list h3 + p {margin-top:.6em !important;min-height:7em;}

/* 섹션 소제목 (가운데 + "\" 사선) — sub511 충치치료 시기 / sub512 레진&인레이 … */
.ii-subtitle {margin:.4em 0 0;font-family:"Noto Sans KR",sans-serif;font-size:clamp(26px,2.4vw,46px);font-weight:300;line-height:1.3;letter-spacing:-.03em;color:#222;text-align:center !important;}
.ii-subtitle b {font-weight:700;}
.ii-subtitle::after {content:"";display:block;width:24px;height:24px;margin:.6em auto 0;background:linear-gradient(to top right,transparent calc(50% - 1px),#222 calc(50% - 1px),#222 calc(50% + 1px),transparent calc(50% + 1px));}

/* 청록 배경 + 큰 원 둘레 01~04 — /_inc/implant/info_orbit.php , sub514 · sub517
   PC : 원본(1900px) 시안의 원 영역을 1210 × 760 무대로 두고, 화면이 좁아지면 --u(1px 이하)로 무대 전체를 같은 비율로 줄인다. */
.ii-orbit {position:relative;overflow:hidden;padding:clamp(40px,5.2vw,100px) 20px clamp(40px,4.2vw,80px);background:#4f7b7e url('/img/sub/common/orbit_bg.jpg') no-repeat center / cover;font-family:"Noto Sans KR",sans-serif;letter-spacing:-.03em;text-align:center;color:#fff;}
.ii-orbit *, .ii-orbit *::before, .ii-orbit *::after {box-sizing:border-box;word-break:keep-all;}
.ii-orbit :where(h2,p,ol) {margin:0;padding:0;list-style:none;}
.ii-orbit__stage {--u:min(1px, calc((100vw - 40px) / 1210));position:relative;width:calc(1210 * var(--u));height:calc(760 * var(--u));margin:0 auto;}
.ii-orbit__ring {position:absolute;left:calc(132 * var(--u));top:calc(10 * var(--u));width:calc(730 * var(--u));height:calc(730 * var(--u));border:1px solid rgba(255,255,255,.55);border-radius:50%;}
.ii-orbit .ii-orbit__title {position:absolute;z-index:1;left:calc(313 * var(--u));top:calc(191 * var(--u));display:flex;flex-direction:column;justify-content:center;width:calc(368 * var(--u));height:calc(368 * var(--u));border-radius:50%;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.25);font-size:max(20px, calc(40 * var(--u)));font-weight:300;line-height:1.3;color:#333;}
.ii-orbit__title b {font-weight:700;color:#222;}
/* 왼쪽 그림: tooth = 원 왼쪽 아래 치아 / person = 섹션 바닥에 붙는 인물 */
.ii-orbit img.ii-orbit__img {position:absolute;z-index:2;max-width:none;height:auto;}
.ii-orbit--tooth .ii-orbit__img {left:calc(15 * var(--u));top:calc(415 * var(--u));width:calc(243 * var(--u));filter:drop-shadow(0 10px 14px rgba(0,0,0,.25));}
.ii-orbit--person {padding-bottom:0;}
.ii-orbit--person .ii-orbit__stage {height:calc(817 * var(--u));}
.ii-orbit--person .ii-orbit__img {z-index:0;left:calc(-297 * var(--u));bottom:0;width:calc(764 * var(--u));}
/* 번호 원 옆 "／" 사선 + 가로선, 그 아래 ○ 문구 */
.ii-orbit__item {position:absolute;z-index:1;width:calc((1197 - var(--x)) * var(--u));left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));height:calc(150 * var(--u));text-align:left;}
.ii-orbit__item--1 {--x:775;--y:16;--nx:-85;}
.ii-orbit__item--2 {--x:864;--y:210;--nx:-72;}
.ii-orbit__item--3 {--x:864;--y:403;--nx:-72;}
.ii-orbit__item--4 {--x:777;--y:597;--nx:-87;}
.ii-orbit__item::before {content:"";position:absolute;left:0;top:0;width:calc(48 * var(--u));height:calc(48 * var(--u));background:linear-gradient(to bottom right,transparent calc(50% - .6px),rgba(255,255,255,.7) calc(50% - .6px),rgba(255,255,255,.7) calc(50% + .6px),transparent calc(50% + .6px));}
.ii-orbit__item::after {content:"";position:absolute;left:calc(48 * var(--u));right:0;top:0;border-top:1px solid rgba(255,255,255,.7);}
.ii-orbit img.ii-orbit__num {position:absolute;left:calc(var(--nx) * var(--u));top:calc(29 * var(--u));width:calc(96 * var(--u));max-width:none;height:auto;}
.ii-orbit__item p {position:absolute;left:calc((940 - var(--x)) * var(--u));right:calc(-1 * clamp(0px, (100vw - 1250px) / 2, 90px)); /* 무대 밖 여백이 있을 때만 오른쪽으로 넓힘 */top:calc(24 * var(--u));font-size:max(13px, calc(18 * var(--u)));font-weight:400;line-height:1.35;color:#fff;}
.ii-orbit__item p::before {content:"";position:absolute;left:calc(-33 * var(--u));top:.4em;width:max(9px, calc(13 * var(--u)));height:max(9px, calc(13 * var(--u)));border:2px solid #fff;border-radius:50%;}

@media screen and (max-width:860px) {
	/* 원 제목 → 번호 목록 (tooth: 원 옆에 치아 / person: 목록 아래 인물) */
	.ii-orbit {padding:50px 20px 56px;background-image:var(--bg-m);background-position:center top;}
	.ii-orbit__stage {--u:1px;display:flex;flex-direction:column;width:auto;max-width:440px;height:auto !important;}
	.ii-orbit__ring {display:none;}
	.ii-orbit .ii-orbit__title {position:relative;left:auto;top:auto;width:190px;height:190px;margin:0 auto;font-size:23px;}
	.ii-orbit--tooth .ii-orbit__img {left:calc(50% - 150px);top:95px;width:88px;}
	.ii-orbit--person {padding-bottom:0;}
	.ii-orbit--person img.ii-orbit__img {order:9;position:static;width:min(340px,86%);margin:30px auto 0;}
	.ii-orbit__list {margin-top:40px !important;border-top:1px solid rgba(255,255,255,.5);}
	.ii-orbit__item {position:relative;left:auto;top:auto;width:auto;height:auto;display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.5);}
	.ii-orbit__item::before, .ii-orbit__item::after, .ii-orbit__item p::before {display:none;}
	.ii-orbit img.ii-orbit__num {position:static;flex:none;width:54px;}
	.ii-orbit__item p {position:static;font-size:15px;line-height:1.5;}
	.ii-orbit__item p br {display:none;}
}

/* 시술 대상 (어두운 사진 배경 + 사선 줄무늬 상자 01~04) — /_inc/implant/info_target.php , sub513 · sub514 */
.ii-target {--sky:#45b7e0;padding:clamp(60px,7.4vw,140px) 20px clamp(60px,7vw,135px);background:#3e5160 no-repeat center / cover;font-family:"Noto Sans KR",sans-serif;letter-spacing:-.03em;text-align:center;color:#fff;}
.ii-target *, .ii-target *::before, .ii-target *::after {box-sizing:border-box;word-break:keep-all;}
.ii-target :where(p,ol) {margin:0;padding:0;list-style:none;}
.ii-target .ii-target__title {color:#fff;}
.ii-target .ii-target__title::after {background:linear-gradient(to top right,transparent calc(50% - 1px),#fff calc(50% - 1px),#fff calc(50% + 1px),transparent calc(50% + 1px));margin-top:.9em;}
.ii-target__title small {display:block;margin-top:.5em;font-size:clamp(14px,1.15vw,22px);font-weight:300;letter-spacing:-.02em;color:#fff;}
.ii-target__lead {margin-top:clamp(20px,1.8vw,34px) !important;font-family:"Nanum Myeongjo",serif;font-size:clamp(20px,2.1vw,40px);color:#fff34a;letter-spacing:-.02em;}
.ii-target__list {display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;margin:clamp(20px,1.6vw,30px) auto 0 !important;padding:clamp(30px,2.9vw,56px) clamp(10px,1vw,20px) clamp(40px,3.6vw,70px) !important;border:14px solid transparent;border-image:repeating-linear-gradient(-45deg,rgba(69,183,224,.75) 0 2px,transparent 2px 5px) 14;background:rgba(40,60,75,.25);}
.ii-target__list li {padding:0 10px;}
.ii-target__list li + li {border-left:1px dashed rgba(255,255,255,.6);}
.ii-target__list span {display:inline-block;padding-bottom:.35em;border-bottom:1px solid #fff;font-size:clamp(20px,1.46vw,28px);font-weight:400;color:#fff;}
.ii-target__list p {margin-top:1em !important;font-size:clamp(14px,1.04vw,20px);line-height:1.35;color:#fff;}
.ii-target__list em {font-style:normal;color:var(--sky);}

@media screen and (max-width:860px) {
	/* 시술 대상: 2 × 2 */
	.ii-target__list {grid-template-columns:1fr 1fr;row-gap:28px;border-width:10px;border-image-slice:10;}
	.ii-target__list li:nth-child(odd) {border-left:0;}
	.ii-target__list p br {display:none;}
}
@media screen and (max-width:420px) {
	/* 아주 좁은 화면: 한 줄에 하나 */
	.ii-target__list {grid-template-columns:1fr;}
	.ii-target__list li {border-left:0 !important;}
	.ii-target__list li + li {padding-top:24px;border-top:1px dashed rgba(255,255,255,.6);}
}

@media screen and (max-width:860px) {
	.ii-hero .pc, .ii-intro .pc, .ii-brace .pc {display:none;}
	.ii-brace__head {padding:0 34px;}
	.ii-steps__list {grid-template-columns:1fr 1fr;row-gap:36px;}
	.ii-steps__list p {min-height:0 !important;padding:0 6px;border:0 !important;}
	.ii-steps__list p br {display:none;} /* 좁은 칸에서는 강제 줄바꿈 대신 자연스럽게 */
}

/* 시술 대상 6개 (3칸 × 2줄) — sub520 턱관절치료 */
.ii-target--6 .ii-target__list {grid-template-columns:repeat(3,1fr);row-gap:clamp(40px,4.2vw,80px);max-width:920px;}
.ii-target--6 .ii-target__list li:nth-child(3n+1) {border-left:0;}
@media screen and (max-width:860px) {
	.ii-target--6 .ii-target__list {grid-template-columns:1fr 1fr;row-gap:28px;}
	.ii-target--6 .ii-target__list li:nth-child(n) {border-left:1px dashed rgba(255,255,255,.6);}
	.ii-target--6 .ii-target__list li:nth-child(odd) {border-left:0;}
}
@media screen and (max-width:420px) {
	.ii-target--6 .ii-target__list {grid-template-columns:1fr;}
}

/* 원형 사진 + 01~0N 장점 — /_inc/implant/info_merit.php , sub517(5개) · sub520(4개)
   --n : 항목 수 (한 칸 약 288px) */
.ii-merit {padding:clamp(60px,5.2vw,100px) 20px clamp(70px,7.3vw,140px);background:#f7f7f7;font-family:"Noto Sans KR",sans-serif;letter-spacing:-.03em;text-align:center;}
.ii-merit *, .ii-merit *::before, .ii-merit *::after {box-sizing:border-box;word-break:keep-all;}
.ii-merit :where(h3,p,ol) {margin:0;padding:0;list-style:none;}
.ii-merit__list {display:grid;grid-template-columns:repeat(var(--n),1fr);column-gap:clamp(10px,1.1vw,22px);max-width:calc(var(--n) * 288px);margin:clamp(40px,3.6vw,68px) auto 0 !important;}
.ii-merit__list li {display:flex;flex-direction:column;align-items:center;}
.ii-merit img {display:block;width:100%;max-width:268px;height:auto;border-radius:50%;}
.ii-merit__num {display:block;margin-top:clamp(18px,2vw,38px);padding-bottom:.3em;border-bottom:2px solid #ddd;min-width:1.5em;font-size:clamp(26px,2vw,38px);font-weight:700;line-height:1.1;color:#333;letter-spacing:-.02em;}
.ii-merit__list h3 {margin-top:clamp(14px,1.2vw,22px);font-size:clamp(16px,1.15vw,22px);font-weight:700;color:#333;}
.ii-merit__list p {margin-top:.9em !important;font-size:clamp(13px,.9vw,17px);font-weight:300;line-height:1.55;color:#777;}
@media screen and (max-width:1100px) {
	/* 5개: 태블릿에서 3칸 + 2칸(가운데) */
	.ii-merit--5 .ii-merit__list {display:flex;flex-wrap:wrap;justify-content:center;row-gap:44px;max-width:760px;}
	.ii-merit--5 .ii-merit__list li {width:calc((100% - 2 * clamp(10px,1.1vw,22px)) / 3);}
}
@media screen and (max-width:600px) {
	/* 모바일: 2칸 (홀수면 마지막은 가운데) */
	.ii-merit__list {display:flex;flex-wrap:wrap;justify-content:center;column-gap:14px;row-gap:34px;}
	.ii-merit__list li {width:calc((100% - 14px) / 2) !important;}
	.ii-merit img {width:86%;}
	.ii-merit__list p br {display:none;}
}