/* 바이탈 시술 설명: 수술 정보·핵심·상태별 과정·권하는 경우·회복·자주 묻는 말. 문구 근거는 원장 답변. */
.vx{--ink:#1A1B16;--sub:#56554F;--line:#E5E3DE;--ivory:#F3F0EB;--brown:#3D170C;--wrap:min(86vw,1480px);--gut:clamp(20px,5.6vw,80px);--sp:clamp(76px,10.5vw,168px);--t2:clamp(28px,3.75vw,54px);--t3:clamp(21px,2.05vw,30px);--t4:clamp(18px,1.55vw,22px);--b:clamp(16px,1.3vw,19px);--s:clamp(14px,1vw,15px);
  display:block;padding:var(--sp) max(var(--gut),calc((100% - var(--wrap))/2));background:#fff;color:var(--ink);font-family:Pretendard,'Noto Sans KR',sans-serif;box-sizing:border-box}
.vx *,.vx *::before{box-sizing:border-box}
.vx h2{font-size:var(--t2);font-weight:700;line-height:1.28;letter-spacing:-.028em;margin:0;color:inherit}
.vx h3{font-size:var(--t3);font-weight:600;line-height:1.4;letter-spacing:-.02em;margin:0;color:var(--ink)}
.vx p,.vx li,.vx dd{font-size:var(--b);line-height:1.75;letter-spacing:-.01em;margin:0;color:var(--sub);word-break:keep-all}
:where(.vx) :where(ul,ol,dl){list-style:none;margin:0;padding:0}
.vx .vx-fine{font-size:var(--s);color:var(--sub);margin-top:clamp(20px,2vw,28px);line-height:1.6}

/* 수술 정보 칸 */
.vx.vx-strip{padding-top:0;padding-bottom:clamp(24px,3vw,40px)}
.vx-cells{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border-bottom:1px solid var(--ink);margin-top:clamp(36px,4vw,56px)}
.vx-cell{padding:clamp(22px,2.2vw,32px) clamp(16px,1.8vw,28px);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-width:0}
.vx-cell:first-child{border-left:0;padding-left:0}
.vx-k{font-size:var(--s);color:var(--sub);line-height:1.4}
.vx-v{font-size:var(--t4);font-weight:600;line-height:1.4;letter-spacing:-.02em;color:var(--ink);word-break:keep-all}
.vx-strip .vx-fine{margin-top:14px}

/* 어떤 수술 */
.vx-2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.vx .vx-lead{font-size:clamp(18px,1.6vw,23px);line-height:1.7;color:var(--ink);font-weight:500}
.vx-terms{margin-top:clamp(32px,3.6vw,52px);border-top:1px solid var(--ink)}
.vx-term{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:16px;padding:clamp(16px,1.6vw,22px) 0;border-bottom:1px solid var(--line)}
.vx-term dt{font-size:var(--b);font-weight:600;color:var(--ink);line-height:1.6;word-break:keep-all}

/* 핵심 */
.vx.vx-points{background:var(--ivory)}
.vx-pts{margin-top:clamp(36px,4.5vw,64px);border-top:1px solid var(--ink)}
.vx-pt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(12px,5vw,80px);padding:clamp(26px,3vw,44px) 0;border-bottom:1px solid #D9D5CD}
.vx-pt h3{word-break:keep-all}
.vx .vx-pt p{color:#44433E}

/* 상태별 과정 */
.vx-case{margin-top:clamp(36px,4.5vw,64px);padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--ink)}
.vx-case-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
.vx-c{font-family:Genos,Pretendard,sans-serif;font-size:clamp(19px,1.65vw,24px);letter-spacing:.015em;color:var(--brown);font-weight:500}
.vx-steps{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(24px,2.6vw,36px)}
.vx-steps li{position:relative;padding-top:48px;min-width:0}
.vx-steps li::before{content:"";position:absolute;left:0;right:calc(-1*clamp(16px,2vw,32px));top:15px;border-top:1px dashed #BDB8AE}
.vx-steps li:last-child::before{right:0}
.vx-n{position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--brown);color:#fff;font-family:Genos,Pretendard,sans-serif;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:1}
/* 그림이 있으면 그림 → 번호 → 문장 */
.vx-steps.has-img li{padding-top:0;display:flex;flex-direction:column}
.vx-steps.has-img li::before{display:none}
.vx-steps.has-img img{display:block;width:100%;height:auto;aspect-ratio:752/496;object-fit:cover;background:var(--ivory)}
.vx-steps.has-img .vx-n{position:static;margin:16px 0 10px;flex:none}

/* 권하는 경우 */
.vx.vx-fit{padding:0;display:grid;grid-template-columns:1fr 1fr}
.vx-half{padding:var(--sp) clamp(24px,5vw,80px);background:var(--ivory)}
.vx-half:first-child{padding-left:max(var(--gut),calc((100vw - var(--wrap))/2))}
.vx-half:last-child{padding-right:max(var(--gut),calc((100vw - var(--wrap))/2))}
.vx-half ul{margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--ink)}
.vx .vx-half li{padding:clamp(16px,1.6vw,22px) 0;border-bottom:1px solid #D9D5CD;color:var(--ink)}
.vx-half.vx-dark{background:var(--brown);color:#fff}
.vx-dark h2{color:#fff}
.vx-dark ul{border-top-color:rgba(255,255,255,.55)}
.vx .vx-half.vx-dark li{color:#fff;border-bottom-color:rgba(255,255,255,.2)}

/* 회복 */
.vx-tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,4.5vw,64px);border-top:1px solid var(--ink)}
.vx-tl li{padding:clamp(22px,2.2vw,32px) clamp(16px,1.8vw,28px) clamp(10px,1vw,16px);border-left:1px solid var(--line)}
.vx-tl li:first-child{border-left:0;padding-left:0}
.vx-when{display:block;font-size:var(--t4);font-weight:600;color:var(--brown);line-height:1.4;margin-bottom:12px;word-break:keep-all}
.vx-pre{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,80px);margin-top:clamp(36px,4.5vw,64px);border-top:1px solid var(--ink)}
.vx-pre-i{padding:clamp(20px,2vw,28px) 0;border-bottom:1px solid var(--line)}
.vx .vx-pre-i h3{font-size:var(--t4);margin-bottom:8px}

/* 자주 묻는 말 · 링크 */
.vx.vx-qa{background:var(--ivory)}
.vx-qs{margin-top:clamp(36px,4.5vw,64px);border-top:1px solid var(--ink)}
.vx-q{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(12px,5vw,80px);padding:clamp(24px,2.6vw,38px) 0;border-bottom:1px solid #D9D5CD}
.vx .vx-q h3{font-size:var(--t4);word-break:keep-all}
.vx .vx-q p{color:#44433E}
.vx.vx-links{padding-top:clamp(56px,6vw,88px);padding-bottom:clamp(56px,6vw,88px)}
.vx .vx-links h2,.vx-links h2{font-size:var(--t3)}
.vx-ls{display:flex;flex-wrap:wrap;gap:0 clamp(24px,3vw,48px);margin-top:18px;border-top:1px solid var(--ink)}
.vx .vx-ls li{padding:16px 0}
.vx-ls a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;font-weight:500}

@media(max-width:1100px){
  .vx-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vx-cell,.vx-cell:first-child{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .vx-cell:nth-child(-n+2){border-top:0}
  .vx-2,.vx-pt,.vx-q{grid-template-columns:1fr}
  .vx-steps:not(.has-img){grid-template-columns:1fr;gap:0}
  .vx-steps:not(.has-img) li{padding:0 0 24px 46px;min-height:54px}
  .vx-steps:not(.has-img) li::before,.vx-steps:not(.has-img) li:last-child::before{left:15px;right:auto;top:30px;bottom:0;border-top:0;border-left:1px dashed #BDB8AE}
  .vx-steps:not(.has-img) li:last-child::before{display:none}
  .vx-steps.has-img{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vx.vx-fit{grid-template-columns:1fr}
  .vx-half,.vx-half:first-child,.vx-half:last-child{padding:clamp(56px,10vw,96px) var(--gut)}
  .vx-tl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vx-tl li,.vx-tl li:first-child{border-left:0;padding-left:0;padding-right:16px}
  .vx-pre{grid-template-columns:1fr}
}
@media(max-width:560px){
  .vx-tl{grid-template-columns:1fr}
  .vx-term{grid-template-columns:1fr;gap:4px}
  .vx-steps.has-img{grid-template-columns:1fr}
}