@charset "utf-8";
:root { 
    --hero-bg-pc: url(/pages/implant/images/sub_visual_pc.png); 
    --hero-bg-mo: url(/pages/implant/images/sub_visual_mo.png); 
    --hero-gap: 2em; 
    
    --feature-font-size: clamp(20px, 1.4vw, 3.2rem); 
    --advantage-font-size: clamp(18px, 2.8vw, 3.8rem); }

/* ── Surgery PC ── */
.surgery_container { position: relative; height: 700vh; }
.surgery { position: sticky; top: 0; height: 100vh; background-image: url(../images/bg_surgery_pc.png); background-repeat: no-repeat; background-size: cover; background-position: center bottom; z-index: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.surgery .section_inner { max-width: 1280px; width: 100%; margin: 0 auto; padding-inline: 2rem; --section-padding-block: 60px; }
.surgery .section_title_wrap { text-align: center; margin-bottom: 4rem; position: relative; height: 14rem; }
.surgery .section_title_wrap .section_title { position: absolute; left: 50%; transition: opacity 0.3s ease, transform 0.3s ease; width: max-content; opacity: 0 !important; transform: translate(-50%, 1rem) !important; }
.surgery .section_title_wrap .section_title.on { opacity: 1 !important; transform: translate(-50%, 0) !important; }
.surgery .surgery_wrap { display: flex; align-items: center; font-size: clamp(17px, 2.2vw, 3rem); }
.surgery .surgery_left { display: flex; flex-direction: column; width: 8.7em; justify-content: center; align-items: center; }
.surgery .surgery_layer { opacity: 0; transform: translateY(2rem); transition: opacity 0.3s ease, transform 0.3s ease; position: relative; width: 100%; display: flex; justify-content: center; align-items: center; }
.surgery .surgery_layer:nth-of-type(1) { z-index: 3; }
.surgery .surgery_layer:nth-of-type(2) { margin-top: -4.8em; z-index: 2; }
.surgery .surgery_layer:nth-of-type(3) { margin-top: -1.4em; z-index: 1; }
.surgery .surgery_layer.on { opacity: 1; transform: translateY(0); }
.surgery .surgery_layer.off { opacity: 1; transform: translateY(0); }
.surgery .layer_img { width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.surgery_layer:nth-of-type(1) .layer_img { aspect-ratio: 233/215; width: 7.8em; }
.surgery_layer:nth-of-type(2) .layer_img { aspect-ratio: 160/148; width: 5.35em; }
.surgery_layer:nth-of-type(3) .layer_img { aspect-ratio: 140/320; width: 4.7em; }
.surgery_layer .layer_img img { width: 100%; }
.surgery .layer_popup { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 0; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; white-space: nowrap; }
.surgery .surgery_layer:nth-of-type(1) .layer_popup { transform: translate(-3%, -50%); }
.surgery .surgery_layer:nth-of-type(2) .layer_popup { transform: translate(-9%, -46%); }
.surgery .surgery_layer:nth-of-type(3) .layer_popup { transform: translate(-8%, -50%); }
.surgery .surgery_layer.on .layer_popup { opacity: 1; pointer-events: auto; }
.surgery .surgery_layer.off .layer_popup { opacity: 0; }
.surgery .point_dot { --size: .8em; width: var(--size); height: var(--size); border-radius: 50%; background: #1657E9; flex-shrink: 0; animation: ripple-dot 1.5s ease-out infinite; }
@keyframes ripple-dot { 0% { box-shadow: 0 0 0 0 rgb(66 122 248 / 68%); } 100% { box-shadow: 0 0 0 1.2em rgba(22,87,233,0); } }
.surgery .point_line { height: 0.08em; background: #1554E5; flex-shrink: 0; }
.surgery .surgery_layer:nth-of-type(1) .point_line { width: 5em; }
.surgery .surgery_layer:nth-of-type(2) .point_line { width: 4.6em; }
.surgery .surgery_layer:nth-of-type(3) .point_line { width: 6.8em; }
.surgery .surgery_card { background: #fff; border-radius: 0.5em; border: 0.1em solid #165AED; box-shadow: 0.4em 0.4em 1em rgba(135,183,237,0.3); width: max-content; white-space: normal; overflow: hidden; letter-spacing: -0.08em; }
.surgery .surgery_card_title { font-size: .9em; font-weight: 500; color: #000C26; line-height: 1.4; background: var(--gradient-03); color: rgba(255,255,255,.8); padding: .7em .8em; }
.surgery .surgery_card_title strong { color: #fff; font-size: 1.3em; }
.surgery .surgery_card_desc { font-size: 1em; line-height: 1.3; font-weight: 700; padding: .6em .8em; }
.surgery .surgery_center { display: flex; flex-direction: column; align-items: center; gap: 0; opacity: 0; transform: translateY(2rem); transition: opacity 0.3s ease, transform 0.3s ease; margin-left: 4em; }
.surgery .surgery_center.on { opacity: 1; transform: translateY(0); }
.surgery .bubble { width: 4.5em; height: 4.5em; border-radius: 50%; background: #1657E9; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 1.1em; font-weight: 700; }
.surgery .bubble:nth-of-type(1) { border: .1em solid rgba(0,0,0,0.20); background: rgba(15,35,130,0.90); }
.surgery .bubble:nth-of-type(3) { border: .1em solid rgba(0,0,0,0.15); background: rgba(15,50,180,0.90); }
.surgery .bubble:nth-of-type(5) { border: .1em solid rgba(0,0,0,0.1); background: rgba(22,90,237,0.90); }
.surgery .bubble_plus { font-size: 1.6em; font-weight: 700; color: #2969EF; line-height: 1.2; }
.surgery .surgery_right { display: flex; align-items: center; gap: 0; opacity: 0; transform: translateY(1rem); transition: opacity 0.3s ease, transform 0.3s ease; }
.surgery .surgery_right.on { opacity: 1; transform: translateY(0); }
.surgery .surgery_right .surgery_card { width: calc(652/800 * 100%); margin-left: -2em; }
.surgery .surgery_right .surgery_card_desc { font-size: 1em; font-weight: 500; padding: 1.1em 1.3em; line-height: 1.4; text-wrap: balance; word-break: keep-all; }
.surgery .surgery_arc { width: 6.7em; height: auto; flex-shrink: 0; }

/* ── Result ── */
.result { --gradient-type: var(--gradient-02); background: linear-gradient(180deg, #002370 0%, #00184D 50%, #000C26 100%); color: #fff; letter-spacing: -0.04em; gap: 5em; }
.result .text_box { margin: 3rem 0 5rem; }
.result .feature_wrap { --gradient-type: var(--gradient-03); font-size: var(--feature-font-size); color: var(--font-color); display: flex; justify-content: center; align-items: center; gap: .5em; }
.result .feature_item--main { --size: 7.7em; font-size: 1.1em; width: var(--size); height: var(--size); border-radius: 50%; background: linear-gradient(180deg, #E8F4FF 0%, #C9E5FF 50%, #AFD9FF 100%); outline: .3rem solid #AFD9FF; outline-offset: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .4rem; animation: ripple-circle 1.5s ease-out infinite; transform: scale(.9); }
.result .feature_item--main .feature_label { line-height: 1.4; font-weight: 800; text-align: center; }
@keyframes ripple-circle { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6), 0 0 0 0 rgba(255,255,255,0.3); } 100% { box-shadow: 0 0 0 2.5rem rgba(255,255,255,0), 0 0 0 4.5rem rgba(255,255,255,0); } }
.result .result_feature { display: flex; justify-content: center; align-items: center; gap: .3em; border-radius: 1000px; border: .5rem dotted #55AEFF; padding: .8em; }
.result .feature_arrow { width: 2em; aspect-ratio: 2/1; background: url(../images/icon_result_arrow.svg) no-repeat center / contain; }
.result .feature_plus { font-size: 2em; font-weight: 700; color: #75BEFF; }
.result .feature_item { position: relative; width: 7.5em; aspect-ratio: 1/1; border-radius: 999px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .3em; z-index: 0; background: transparent; }
.result .feature_item::before { content: ""; position: absolute; inset: -.6rem; border-radius: 50%; background: linear-gradient(180deg, rgba(175,217,255,1) 0%, rgba(85,174,255,1) 100%); z-index: -1; }
.result .feature_item::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; z-index: -1; }
.result .feature_icon { display: block; width: 2.5em; aspect-ratio: 1/1; background-position: center; background-repeat: no-repeat; background-size: contain; }
.result .feature_item:nth-of-type(1) .feature_icon { background-image: url(../images/icon_result_01.svg); }
.result .feature_item:nth-of-type(2) .feature_icon { background-image: url(../images/icon_result_02.svg); }
.result .feature_item:nth-of-type(3) .feature_icon { background-image: url(../images/icon_result_03.svg); }
.result .feature_label { text-align: center; font-weight: 700; line-height: 1.2; }

/* ── Advantage ── */
.advantage_list { font-size: var(--advantage-font-size); width: calc(1240/1280*100%); margin: 5rem auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; }
.advantage_item { background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: .8em; }
.advantage_item:nth-of-type(1) { background-image: url(../images/img_advantage_01.png); }
.advantage_item:nth-of-type(2) { background-image: url(../images/img_advantage_02.png); }
.advantage_card { display: flex; justify-content: space-between; align-items: center; text-align: center; flex-direction: column; width: 100%; aspect-ratio: 600/340; padding-block: .8em; }
.advantage_card_tile { color: #FEF3D5; font-weight: 800; text-shadow: .4rem .4rem 1.2rem rgba(0,0,0,0.48); }
.advantage_card_label { font-size: clamp(15px, 2vw, .8em); display: grid; grid-template-columns: 1fr .4fr; align-items: center; justify-content: space-between; padding: .2em .4em; background: #fff; border-radius: 100px; font-weight: 800; width: 9em; line-height: 1.6; }
.advantage_card_label span { font-size: .8em; font-weight: 700; color: #fff; background: var(--gradient-03); border-radius: 4em; padding-inline: .2em; }
.advantage_item:nth-of-type(1) .advantage_card_content { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.advantage_item:nth-of-type(2) .advantage_card_content { display: flex; justify-content: center; align-items: center; gap: .4em; }
.advantage_card_content img { width: auto; }
.advantage_item:nth-of-type(1) .advantage_card_content img { height: 2.3em; margin: 0 auto; }
.advantage_item:nth-of-type(2) .advantage_card_content img { height: 2.8em; }

/* ── PC (1440px) ── */
@media screen and (max-width: 1440px) {
.result .feature_wrap { flex-direction: column; gap: 1em; }
.result .feature_arrow { transform: rotate(90deg); }
}

/* ── 태블릿 (1024px) ── */
@media screen and (max-width: 1024px) {
.surgery { background-image: url(../images/bg_surgery_tb.png); background-position: 20% bottom; }
.result .section_inner { gap: 8em; }
.advantage_list { width: calc(270/320 * 100%); gap: 1em; grid-template-columns: 1fr; }
.advantage_card { aspect-ratio: 320/200; }
}

/* ── 모바일 (767px) ── */
@media screen and (max-width: 767px) {
#surgeryMobileContainer { position: relative; height: 500vh; background: #C7E4FF; }
.surgery_mobile_sticky { position: sticky; top: 0; height: calc(100svh + var(--header-height)); background: url(../images/bg_surgery_mo.png) no-repeat center bottom / cover; display: flex; flex-direction: column; overflow: hidden; }
.surgery_mobile_sticky .section_inner { position: relative; flex: 1; }
.mo_step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.mo_step.on { opacity: 1; pointer-events: auto; }
.surgery_slide { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.surgery_slide .section_title { margin-bottom: 3rem; }
#moStep3 .slide_visual { display: flex; justify-content: center; align-items: center; gap: 5em; aspect-ratio: 320/190; }
.slide_img { width: 40%; max-width: 18rem; flex-shrink: 0; }
.slide_img img { width: 100%; display: block; }
.slide_connector { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); display: flex; align-items: center; white-space: nowrap; }
#moStep1 .slide_connector {transform: translate(-7%, -40%);}
.slide_dot { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #1657E9; flex-shrink: 0; animation: ripple-dot 1.5s ease-out infinite; z-index: 99; }
.slide_line { width: 3rem; height: .2rem; background: #1657E9; flex-shrink: 0; }
.slide_label { display: inline-flex; align-items: center; background: var(--gradient-03); color: #fff; font-size: 2.2rem; font-weight: 700; padding: .4em .6em; border-radius: 100px; }
.slide_num { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #fff; color: #1657E9; display: inline-flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: 800; flex-shrink: 0; margin-right: 1rem; }
.slide_visual--bubbles { gap: 3rem; }
.slide_bubbles { display: flex; flex-direction: column; align-items: center; gap: 0; }
.slide_bubbles .bubble_plus { font-size: 4rem; }
.mo_stack { position: relative; width: calc(100/375 * 100%); aspect-ratio: 10/23; flex-shrink: 0; }
.mo_stack_layer { position: absolute; left: 50%; transform: translateX(-50%); }
.mo_stack_layer img { width: 100%; display: block; }
.mo_stack--crown { width: 100%; bottom: 59.5%; z-index: 3; }
.mo_stack--abutment { width: 71%; bottom: 59%; z-index: 2; }
.mo_stack--fixture { width: 68%; bottom: 0; z-index: 1; }
.mo_step.on .mo_stack--new { animation: moStackDrop 0.4s ease 0.2s both; }
@keyframes moStackDrop { from { transform: translateX(-50%) translateY(-1.5rem); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
#moStep3.on .section_title, .mo_step.on .surgery_card { animation: moSlideUp 0.45s ease both; }
.mo_step.on .surgery_card { animation-delay: 0.05s; }
@keyframes moSlideUp { from { transform: translateY(1.8rem); } to { transform: translateY(0); } }
.surgery_mobile .surgery_card { background: #fff; border-radius: 1.6rem; border: 0.3rem solid #165AED; box-shadow: none; width: 100%; white-space: normal; overflow: hidden; letter-spacing: normal; margin-top: 3rem; aspect-ratio: 320/162; }
#moStep3 .surgery_card { display: flex; justify-content: center; align-items: center; }
.surgery_mobile .surgery_card_title { font-size: 2rem; font-weight: 500; line-height: 1.4; background: var(--gradient-03); color: rgba(255,255,255,.8); padding: .5em .9em; text-align: center; }
.surgery_mobile .surgery_card_title strong { color: #fff; font-size: 1.3em; }
.surgery_mobile .surgery_card_desc { font-size: 18px; line-height: 1.4; font-weight: 500; text-align: center; word-break: keep-all; letter-spacing: -0.04em; }
.surgery_mobile .surgery_card_desc:not(#moStep3 .surgery_card_desc) { padding-top: 1em; }
.surgery_mobile .bubble { width: 6em; border-radius: 100px; background: #1657E9; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 2rem; font-weight: 700; padding-block: .7em; }
.surgery_mobile .bubble:nth-of-type(1) { border: .2rem solid rgba(0,0,0,0.1); background: rgba(22,90,237,0.90); }
.surgery_mobile .bubble:nth-of-type(3) { border: .2rem solid rgba(0,0,0,0.15); background: rgba(15,50,180,0.90); }
.surgery_mobile .bubble:nth-of-type(5) { border: .2rem solid rgba(0,0,0,0.20); background: rgba(15,35,130,0.90); }
.surgery_mobile .bubble_plus { font-size: 3rem; font-weight: 700; color: #2969EF; line-height: 1.2; }
.result .result_feature { flex-direction: column; width: 90%; border-radius: 1.5em; }
.result .feature_item { flex-direction: row; aspect-ratio: 230/94; width: 100%; border-radius: .75em; gap: 1em; }
.result .feature_item::before, .result .feature_item::after { border-radius: .75em; }
.result .feature_label { text-align: left; }
.advantage_card { aspect-ratio: 270/120; display: grid; grid-template-columns: 1fr 1fr; }
.advantage_item:nth-of-type(1) { background-image: url(../images/img_advantage_01_mo.png); }
.advantage_item:nth-of-type(2) { background-image: url(../images/img_advantage_02_mo.png); }
.advantage_item:nth-of-type(1) .advantage_card_content img, .advantage_item:nth-of-type(2) .advantage_card_content img { height: 3em; }
.advantage_item:nth-of-type(1) .advantage_card_content { display: flex; gap: .4em; justify-content: center; align-items: center; }
.advantage_card_label { grid-column: span 2; margin: 0 auto; }
}