/* rb2026 — 서브페이지 프레임 (히어로·브레드크럼·서브내비·본문 래퍼·관련 콘텐츠). diva.css 토큰을 쓴다. */
/* ---- 페이지 히어로 ---- */
.dv-phero{position:relative;overflow:hidden;background:var(--dv-cream);color:var(--dv-ink);isolation:isolate;
  padding-top:calc(var(--dv-hdr) + clamp(28px,4vw,56px));padding-bottom:clamp(40px,5vw,72px);min-height:clamp(300px,34vw,440px);display:flex;align-items:flex-end}
.dv-phero-media{position:absolute;inset:0;z-index:-2}
.dv-phero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.dv-phero-media picture{display:contents}   /* hero_m(모바일 사진) <picture> 래퍼 — img 의 100% 가 .dv-phero-media 기준이 되게 */
.dv-phero.has-img{color:#fff}
.dv-phero.has-img::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(34,42,54,.86) 0%,rgba(34,42,54,.68) 42%,rgba(34,42,54,.28) 72%,rgba(34,42,54,.12) 100%),
             linear-gradient(180deg,rgba(34,42,54,.35) 0%,rgba(34,42,54,0) 30%,rgba(34,42,54,.55) 100%)}
.dv-phero-in{width:100%}
.dv-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px;line-height:1.4;color:var(--dv-muted);margin-bottom:clamp(14px,2vw,26px)}
.dv-crumb a,.dv-crumb a:link,.dv-crumb a:visited{color:inherit;text-decoration:none}
.dv-crumb a:hover{color:var(--dv-olive-ink);text-decoration:underline}
.dv-crumb [aria-current]{color:var(--dv-ink);font-weight:600}
.dv-phero.has-img .dv-crumb{color:rgba(255,255,255,.72)}
.dv-phero.has-img .dv-crumb [aria-current]{color:#fff}
.dv-phero.has-img .dv-crumb a:hover{color:#fff}
.dv-phero .dv-kicker{margin-bottom:8px}
.dv-phero.has-img .dv-kicker{color:#F4C9D2}
.dv-ptitle{margin:0;font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:1.18;letter-spacing:-.035em;word-break:keep-all}
.dv-plead{margin:clamp(10px,1.2vw,16px) 0 0;max-width:640px;font-size:clamp(15px,1.15vw,17.5px);line-height:1.7;color:var(--dv-ink-2);word-break:keep-all}
.dv-phero.has-img .dv-plead{color:rgba(255,255,255,.86);text-shadow:0 1px 10px rgba(0,0,0,.35)}
.dv-phero-btns{margin-top:clamp(20px,2.4vw,30px)}
.dv-phero.has-img .dv-btn--ring{border-color:rgba(255,255,255,.85);color:#fff}
.dv-phero.has-img .dv-btn--ring:hover{background:rgba(255,255,255,.12)}
/* ---- 사진 히어로 위 투명 헤더 (2026-09-29, 포시즌 레퍼런스: 히어로 배경·모델이 상단 메뉴바 뒤까지 이어진다) ----
   사진 히어로(.has-img)가 있는 서브페이지는 스페이서를 0 으로 해 히어로가 화면 맨 위부터 시작한다(히어로 padding-top 이 이미 --dv-hdr 를 포함하므로 글 위치는 그대로, 헤더 뒤로 들어간 만큼 min-height 에 보탠다).
   스크롤 16px 전까지 헤더는 메인 기본과 같은 투명·흰 글자·흰 로고 — is-solid 는 diva.js 01 이 메인과 같은 조건으로 토글. 메가메뉴가 열리면 흰 바탕. JS 미동작이면 항상 solid.
   컴팩트 히어로(legacy 본문)·사진 없는 페이지는 그대로. 색 선언은 팔레트 생성기(rb2026_gen_palette_sub.py)가 sub-4 에 복사한다. */
body.dv-sub:has(.dv-phero.has-img) .dv-hdr-spacer{height:0}
.dv-phero.has-img{min-height:calc(clamp(300px,34vw,440px) + var(--dv-hdr))}
body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid){background:transparent;box-shadow:none;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid) a.dv-brand img{filter:brightness(0) invert(1)}
body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid) .dv-nav-item:hover>a.dv-nav-a,
body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid) .dv-nav-item:focus-within>a.dv-nav-a{color:#fff}
body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid) .dv-lang-btn:hover,
body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid) a.dv-tel:hover{background:rgba(255,255,255,.14)}
body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid):has(.dv-nav-item:hover),
body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid):has(.dv-nav-item:focus-within),
body.dv-sub:has(.dv-phero.has-img) .dv-header.is-mega:not(.is-solid){background:rgba(255,255,255,.98);box-shadow:0 1px 0 var(--dv-hairline);color:var(--dv-ink)}
body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid):has(.dv-nav-item:hover) a.dv-brand img,
body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid):has(.dv-nav-item:focus-within) a.dv-brand img,
body.dv-sub:has(.dv-phero.has-img) .dv-header.is-mega:not(.is-solid) a.dv-brand img{filter:none}
body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid):has(.dv-nav-item:hover) .dv-nav-item:hover>a.dv-nav-a,
body.dv-sub:has(.dv-phero.has-img) .dv-header.is-mega:not(.is-solid) .dv-nav-item:focus-within>a.dv-nav-a{color:var(--dv-olive-dp)}
html.dv-no-js body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid){background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--dv-hairline);color:var(--dv-ink)}
html.dv-no-js body.dv-sub:has(.dv-phero.has-img) .dv-header:not(.is-solid) a.dv-brand img{filter:none}
/* ---- 서브내비 (헤더 아래 sticky) ---- */
.dv-root.dv-subnav{overflow:visible}
.dv-subnav{position:sticky;top:var(--dv-hdr);z-index:900;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--dv-hairline)}
.dv-subnav-in{display:flex;align-items:stretch;gap:clamp(14px,2vw,32px);min-height:56px}
.dv-subnav-cat{display:none;align-items:center;gap:10px;flex:none;padding-right:clamp(14px,2vw,32px);border-right:1px solid var(--dv-line);font-weight:700;font-size:14px;color:var(--dv-ink);text-decoration:none;white-space:nowrap}
.dv-subnav-cat i{font-family:var(--dv-serif);font-style:italic;font-weight:400;font-size:15px;color:var(--dv-olive-dp)}
.dv-subnav-list{display:flex;gap:2px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.dv-subnav-list::-webkit-scrollbar{display:none}
.dv-subnav-list li{flex:none;scroll-snap-align:center}
.dv-subnav-list a,.dv-subnav-list a:link,.dv-subnav-list a:visited{position:relative;display:flex;align-items:center;min-height:56px;padding:0 14px;font-size:14.5px;font-weight:500;color:var(--dv-ink-2);text-decoration:none;white-space:nowrap;transition:color .2s}
.dv-subnav-list a::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--dv-olive);transform:scaleX(0);transition:transform .25s var(--dv-ease)}
.dv-subnav-list a:hover{color:var(--dv-olive-ink)}
.dv-subnav-list a.is-active{color:var(--dv-ink);font-weight:700}
.dv-subnav-list a.is-active::after,.dv-subnav-list a:hover::after{transform:scaleX(1)}
@media (min-width:1024px){.dv-subnav-cat{display:flex}}
/* ---- 본문 래퍼 ---- */
.dv-page-body{position:relative;background:#fff}
.dv-page-body--full #bo_list{margin-bottom:0!important}
.dv-page-body #bo_list_total,.dv-page-body .bo_fx:empty{display:none}
.dv-page-body--wrap{max-width:calc(var(--dv-wrap-n) + var(--dv-gut)*2);margin-inline:auto;padding:clamp(36px,4vw,64px) var(--dv-gut) clamp(48px,5vw,80px);font-family:var(--dv-ff);font-size:15px;line-height:1.7;color:var(--dv-ink-2)}
.dv-page-body--wrap #bo_list,.dv-page-body--wrap #bo_w,.dv-page-body--wrap #bo_v{width:auto!important;max-width:none!important;margin:0!important}
.dv-page-body--wrap table{width:100%;border-collapse:collapse}
.dv-page-body--wrap .tbl_head01 th{background:var(--dv-cream);color:var(--dv-ink);font-weight:600;font-size:14px;padding:12px 10px;border-bottom:1px solid var(--dv-line)}
.dv-page-body--wrap .tbl_head01 td{padding:14px 10px;border-bottom:1px solid var(--dv-hairline);font-size:14.5px;vertical-align:middle}
.dv-page-body--wrap .tbl_head01 td a{color:var(--dv-ink)}
.dv-page-body--wrap .empty_table{padding:64px 0!important;text-align:center;color:var(--dv-muted)}
.dv-page-body--wrap .pg_wrap{margin:28px 0 0;text-align:center;font-size:14px}
.dv-page-body--wrap .pg_page,.dv-page-body--wrap .pg_current{display:inline-block;min-width:36px;height:36px;line-height:36px;border-radius:999px;margin:0 2px;padding:0 6px;border:1px solid var(--dv-line)!important;background:#fff!important;color:var(--dv-ink-2)}
.dv-page-body--wrap .pg_current{background:var(--dv-navy)!important;border-color:var(--dv-navy)!important;color:#fff}
.dv-page-body--wrap .btn_bo_user{display:flex;justify-content:flex-end;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.dv-page-body--wrap .btn_bo_user a,.dv-page-body--wrap .btn_b01,.dv-page-body--wrap .btn_b02,.dv-page-body--wrap .btn_submit,.dv-page-body--wrap .btn_cancel{display:inline-flex!important;align-items:center;justify-content:center;height:40px!important;padding:0 18px!important;border-radius:999px!important;border:1px solid var(--dv-navy)!important;background:var(--dv-navy)!important;color:#fff!important;font-family:var(--dv-ff)!important;font-size:14px!important;font-weight:600;line-height:1!important;text-decoration:none;cursor:pointer}
.dv-page-body--wrap .btn_b01,.dv-page-body--wrap .btn_cancel{background:#fff!important;color:var(--dv-ink)!important;border-color:var(--dv-line)!important}
.dv-page-body--wrap input[type=text],.dv-page-body--wrap input[type=password],.dv-page-body--wrap input[type=tel],.dv-page-body--wrap input[type=email],.dv-page-body--wrap select,.dv-page-body--wrap textarea{font-family:var(--dv-ff);font-size:14.5px;border:1px solid var(--dv-line)!important;border-radius:8px!important;background:#fff!important;padding:8px 12px!important;height:auto!important;min-height:42px;box-sizing:border-box}
.dv-page-body--wrap textarea{min-height:180px}
/* ---- 관련 콘텐츠 ---- */
.dv-related .dv-related-head{text-align:center}
.dv-related .dv-related-head .dv-kicker,.dv-related .dv-related-head .dv-sub{margin-inline:auto}
.dv-related-videos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.dv-rcard{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--dv-ink);font-family:var(--dv-ff)}
.dv-rcard--video{grid-column:span 4}
.dv-rcard--short{grid-column:span 3}
.dv-rcard-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--dv-r);background:var(--dv-navy-dp);isolation:isolate}
.dv-rcard--short .dv-rcard-thumb{aspect-ratio:9/16}
.dv-rcard-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--dv-ease)}
.dv-rcard:hover .dv-rcard-thumb img{transform:scale(1.04)}
.dv-rcard-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--dv-navy);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .25s}
.dv-rcard-play svg{width:22px;height:22px}
.dv-rcard:hover .dv-rcard-play{transform:scale(1.08)}
.dv-rcard-badge{position:absolute;left:10px;top:10px;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em}
.dv-rcard-t{font-size:15px;font-weight:600;line-height:1.5;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.dv-rcard-m{font-size:12.5px;color:var(--dv-muted)}
.dv-rcard:focus-visible{outline:2px solid var(--dv-olive);outline-offset:4px;border-radius:var(--dv-r)}
.dv-related-blog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(28px,3vw,44px)}
.dv-related-videos:empty+.dv-related-blog{margin-top:0}
.dv-rpost,.dv-rpost:link,.dv-rpost:visited{display:flex;flex-direction:column;background:#fff;border:1px solid var(--dv-line);border-radius:var(--dv-r);overflow:hidden;color:var(--dv-ink);text-decoration:none;transition:transform .3s var(--dv-ease),box-shadow .3s}
.dv-rpost:hover{transform:translateY(-3px);box-shadow:var(--dv-sh);color:var(--dv-ink)}
.dv-rpost-thumb{position:relative;display:block;aspect-ratio:16/10;background:var(--dv-beige);overflow:hidden}
.dv-rpost-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dv-rpost-ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--dv-serif);font-style:italic;font-size:64px;color:rgba(140,158,79,.35)}
.dv-rpost-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 20px}
.dv-rpost-cat{font-size:12.5px;color:var(--dv-rose-dp);font-weight:600}
.dv-rpost-t{font-size:16px;font-weight:700;line-height:1.45;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.dv-rpost-x{font-size:13.5px;line-height:1.6;color:var(--dv-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.dv-related-more{margin-top:clamp(28px,3vw,44px)}
@media (max-width:1023px){
  .dv-related-videos{grid-template-columns:repeat(6,minmax(0,1fr))}
  .dv-rcard--video{grid-column:span 3}.dv-rcard--short{grid-column:span 2}
  .dv-related-blog{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .dv-phero{min-height:0;padding-top:calc(var(--dv-hdr) + 24px)}
  .dv-subnav-in{gap:0}
  .dv-subnav-list a,.dv-subnav-list a:link{min-height:50px;padding:0 12px;font-size:14px}
  .dv-related-videos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-rcard--video{grid-column:span 2}.dv-rcard--short{grid-column:span 1}
  .dv-related-blog{grid-template-columns:minmax(0,1fr)}
}
/* ---- 컴팩트 히어로 (legacy 본문 페이지: 본문이 자체 배너를 가짐) ---- */
.dv-phero--compact{min-height:0;padding-top:calc(var(--dv-hdr) + clamp(22px,3vw,40px));padding-bottom:clamp(26px,3vw,40px);background:var(--dv-cream);border-bottom:1px solid var(--dv-hairline)}
.dv-phero--compact .dv-ptitle{font-size:clamp(26px,3vw,40px)}
.dv-phero--compact .dv-plead{font-size:clamp(14.5px,1.05vw,16px)}
.dv-phero--compact .dv-phero-btns{margin-top:clamp(16px,2vw,24px)}
.dv-phero--compact .dv-phero-btns .dv-btn{height:42px;padding:0 20px;font-size:14px}
@media (max-width:767px){   /* 2026-09-29 사용자: 모바일 히어로 버튼 2개는 작게 한 줄(side by side). 360 폭은 거터 58×2 를 빼면 244px 뿐이라 13px·padding 8·아이콘 16. 컴팩트 히어로 규칙(바로 위)보다 뒤에 둬 이긴다 */
  .dv-phero .dv-phero-btns{flex-wrap:nowrap;gap:8px}
  .dv-phero .dv-phero-btns .dv-btn{flex:1 1 0;min-width:0;justify-content:center;height:40px;padding:0 8px;gap:6px;font-size:13px}
  .dv-phero .dv-phero-btns .dv-btn svg{width:16px;height:16px}
}
/* ==== 재구성 본문 블록 (rb2026/pages/*.php) ==== */
.dv-pb{font-size:16px;line-height:1.75;color:var(--dv-ink-2)}
.dv-pb-sec{position:relative;padding:clamp(56px,6.5vw,110px) 0;isolation:isolate}
.dv-pb-sec--cream{background:var(--dv-cream)}
.dv-pb-sec--cream2{background:var(--dv-cream-2)}
.dv-pb-sec--dark{background:var(--dv-navy);color:#fff}
.dv-pb-bg{position:absolute;inset:0;z-index:-1}
.dv-pb-bg img{width:100%;height:100%;object-fit:cover;opacity:.28;filter:saturate(.6)}
.dv-pb-sec--dark .dv-pb-bg img{opacity:.22}
.dv-pb-targets.has-bg{background:var(--dv-beige)}
.dv-pb-targets.has-bg .dv-pb-bg img{opacity:.16}
.dv-pb-head{margin-bottom:clamp(28px,3.4vw,52px)}
.dv-pb-head--c{text-align:center}
.dv-pb-head--c .dv-kicker,.dv-pb-head--c .dv-pb-lead{margin-inline:auto}
.dv-pb-head .dv-kicker{margin-bottom:10px}
.dv-pb-h{margin:0;font-weight:700;font-size:clamp(24px,2.7vw,40px);line-height:1.3;letter-spacing:-.035em;color:var(--dv-ink);word-break:keep-all}
.dv-pb-h i{font-style:normal;color:var(--dv-olive-dp)}
.dv-pb-sec--dark .dv-pb-h{color:#fff}
.dv-pb-sec--dark .dv-pb-h i{color:#C9D78E}
.dv-pb-sec--dark .dv-kicker{color:#F4C9D2}
.dv-pb-lead{margin:14px auto 0;max-width:720px;font-size:clamp(15px,1.1vw,17px);line-height:1.7;color:var(--dv-muted);word-break:keep-all}
.dv-pb-sec--dark .dv-pb-lead{color:rgba(255,255,255,.75)}
.dv-pb .dv-body p+p{margin-top:12px}
.dv-pb-note{margin:clamp(18px,2vw,28px) 0 0;font-size:13px;line-height:1.6;color:var(--dv-muted);text-align:center}
.dv-pb-note--legal{padding:clamp(20px,2.4vw,36px) 0}
.dv-pb-note--legal+.dv-root .dv-pb-note--legal,.dv-pb+.dv-root .dv-pb-note--legal{padding-top:0}
/* intro */
.dv-pb-intro-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:center}
.dv-pb-intro.is-rev .dv-pb-intro-txt{order:2}
.dv-pb-intro-img{margin:0;border-radius:var(--dv-r);overflow:hidden;aspect-ratio:4/3;background:var(--dv-beige)}
.dv-pb-intro-img.r-16x9{aspect-ratio:16/9}.dv-pb-intro-img.r-1x1{aspect-ratio:1/1}.dv-pb-intro-img.r-3x4{aspect-ratio:3/4}
.dv-pb-intro-img img{width:100%;height:100%;object-fit:cover}
.dv-pb-bullets{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.dv-pb-bullets li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.6}
.dv-pb-bullets svg{flex:none;width:18px;height:18px;margin-top:4px;color:var(--dv-olive-dp)}
/* info */
.dv-pb-info-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.dv-pb-info-list li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:clamp(18px,2vw,28px) 12px;background:#fff;border:1px solid var(--dv-line);border-radius:var(--dv-r);text-align:center}
.dv-pb-info-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--dv-olive-soft);color:var(--dv-olive-ink)}
.dv-pb-info-ic svg{width:24px;height:24px}
.dv-pb-info-l{font-size:13px;color:var(--dv-muted)}
.dv-pb-info-v{font-size:16px;font-weight:700;color:var(--dv-ink);letter-spacing:-.02em}
/* numbered cards */
.dv-pb-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.dv-pb-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}.dv-pb-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dv-pb-cards--5,.dv-pb-cards--6,.dv-pb-cards--7{grid-template-columns:repeat(3,minmax(0,1fr))}
.dv-pb-card{position:relative;padding:clamp(22px,2.4vw,32px) clamp(18px,2vw,26px);background:#fff;border:1px solid var(--dv-line);border-top:2px solid var(--dv-olive);border-radius:var(--dv-r);transition:transform .3s var(--dv-ease),box-shadow .3s}
.dv-pb-card:hover{transform:translateY(-4px);box-shadow:var(--dv-sh)}
.dv-pb-card .dv-no{display:block;margin-bottom:10px}
.dv-pb-card-t{display:block;font-size:17px;font-weight:700;line-height:1.45;letter-spacing:-.02em;color:var(--dv-ink);word-break:keep-all}
.dv-pb-card p{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:var(--dv-ink-2);word-break:keep-all}
/* steps */
.dv-pb-step-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);counter-reset:step}
.dv-pb-step-list--3{grid-template-columns:repeat(3,minmax(0,1fr))}.dv-pb-step-list--5{grid-template-columns:repeat(5,minmax(0,1fr))}.dv-pb-step-list--6{grid-template-columns:repeat(3,minmax(0,1fr))}
.dv-pb-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(20px,2vw,28px) 16px 24px;background:#fff;border-radius:var(--dv-r);border:1px solid var(--dv-line)}
.dv-pb-step-img{margin:0 0 16px;width:min(100%,180px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--dv-cream);border:1px solid var(--dv-line)}
.dv-pb-step-img img{width:100%;height:100%;object-fit:cover}
.dv-pb-step-no{font-family:var(--dv-serif);font-style:italic;font-size:13px;letter-spacing:.06em;color:var(--dv-rose)}
.dv-pb-step-t{display:block;margin-top:6px;font-size:16.5px;font-weight:700;line-height:1.45;letter-spacing:-.02em;color:var(--dv-ink);word-break:keep-all}
.dv-pb-step p{margin:8px 0 0;font-size:14px;line-height:1.65;color:var(--dv-ink-2);word-break:keep-all}
.dv-pb-step+.dv-pb-step::before{content:"";position:absolute;left:-1px;top:50%;width:0;height:0}
/* types */
.dv-pb-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.dv-pb-type-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.dv-pb-type-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.dv-pb-type-grid--5,.dv-pb-type-grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}
.dv-pb-type{background:#fff;border:1px solid var(--dv-line);border-radius:var(--dv-r);overflow:hidden}
.dv-pb-type-img{margin:0;aspect-ratio:16/10;background:var(--dv-cream);overflow:hidden}
.dv-pb-type-img img{width:100%;height:100%;object-fit:cover}
.dv-pb-type-img.is-contain img{object-fit:contain;padding:14px;box-sizing:border-box}
.dv-pb-type-t{margin:0;padding:18px 20px 0;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--dv-ink)}
.dv-pb-type p{margin:8px 0 0;padding:0 20px 20px;font-size:14.5px;line-height:1.65;color:var(--dv-ink-2);word-break:keep-all}
/* features (dark) */
.dv-pb-feat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.dv-pb-feat-list--3{grid-template-columns:repeat(3,minmax(0,1fr))}.dv-pb-feat-list--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.dv-pb-feat-list li{padding:clamp(22px,2.4vw,32px) clamp(18px,2vw,26px);border:1px solid rgba(255,255,255,.14);border-radius:var(--dv-r);background:rgba(255,255,255,.04);backdrop-filter:blur(2px)}
.dv-pb-feat-list .dv-no{display:block;margin-bottom:10px;color:#F4C9D2}
.dv-pb-feat-list strong{display:block;font-size:17px;font-weight:700;line-height:1.45;letter-spacing:-.02em;color:#fff;word-break:keep-all}
.dv-pb-feat-list p{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.78);word-break:keep-all}
/* compare */
.dv-pb-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.dv-pb-cmp--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dv-pb-cmp-col{padding:clamp(22px,2.4vw,34px);background:#fff;border:1px solid var(--dv-line);border-radius:var(--dv-r)}
.dv-pb-cmp-col.is-hi{background:var(--dv-navy);border-color:var(--dv-navy);color:#fff}
.dv-pb-cmp-col h3{margin:0 0 16px;font-size:18px;font-weight:700;letter-spacing:-.02em;color:inherit}
.dv-pb-cmp-col.is-hi h3{color:#C9D78E}
.dv-pb-cmp-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dv-pb-cmp-col li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.6;word-break:keep-all}
.dv-pb-cmp-col svg{flex:none;width:18px;height:18px;margin-top:4px;color:#C9D78E}
.dv-pb-dot{flex:none;width:6px;height:6px;margin:11px 6px 0;border-radius:50%;background:var(--dv-muted)}
/* before/after */
.dv-pb-ba-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.dv-pb-ba-item{margin:0;background:#fff;border:1px solid var(--dv-line);border-radius:var(--dv-r);overflow:hidden}
.dv-pb-ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--dv-line)}
.dv-pb-ba-cell{position:relative;display:block;aspect-ratio:184/149;background:#fff}
.dv-pb-ba-cell img{width:100%;height:100%;object-fit:cover}
.dv-pb-ba-cell em{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:999px;background:rgba(45,54,69,.82);color:#fff;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em}
.dv-pb-ba-item figcaption{padding:10px 12px;font-size:12.5px;color:var(--dv-muted);text-align:center;letter-spacing:.04em}
/* faq */
.dv-pb-faq-list{display:grid;gap:10px}
.dv-pb-faq-item{background:#fff;border:1px solid var(--dv-line);border-radius:var(--dv-r);overflow:hidden}
.dv-pb-faq-item summary{display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;color:var(--dv-ink);letter-spacing:-.01em;word-break:keep-all}
.dv-pb-faq-item summary::-webkit-details-marker{display:none}
.dv-pb-faq-q{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--dv-olive-soft);color:var(--dv-olive-ink);font-family:var(--dv-serif);font-style:italic;font-size:15px}
.dv-pb-faq-chev{flex:none;width:18px;height:18px;margin-left:auto;color:var(--dv-muted);transition:transform .3s}
.dv-pb-faq-item[open] .dv-pb-faq-chev{transform:rotate(180deg)}
.dv-pb-faq-a{padding:0 20px 20px 64px;font-size:15px;line-height:1.75;color:var(--dv-ink-2);word-break:keep-all}
.dv-pb-faq-a p+p{margin-top:8px}
/* band */
.dv-pb-band{text-align:center}
.dv-pb-band .dv-pb-bg img{opacity:.35}
.dv-pb .dv-pb-band-in .dv-body{margin-top:18px;color:rgba(255,255,255,.82)}   /* 2026-09-29 `.dv-pb .dv-body` 가 뒤에서 같은 명시도로 덮어 어두운 띠 위 글이 안 보였다 → (0,3,0) */
.dv-pb-band-in .dv-btns{margin-top:28px}
.dv-pb-band .dv-btn--ring,#bo_v_con .dv-pb-band .dv-btn--ring{border-color:rgba(255,255,255,.85);color:#fff}   /* 2026-09-29 sub/style.css `#bo_v_con a` 가 글자색을 검정으로 덮었다 */
@media (max-width:1023px){
  .dv-pb-info-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dv-pb-cards,.dv-pb-cards--5,.dv-pb-cards--6,.dv-pb-cards--7{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-pb-step-list,.dv-pb-step-list--5,.dv-pb-step-list--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-pb-type-grid,.dv-pb-type-grid--4,.dv-pb-type-grid--5,.dv-pb-type-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-pb-feat-list,.dv-pb-feat-list--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-pb-ba-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-pb-cmp--3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .dv-pb-intro-in{grid-template-columns:minmax(0,1fr)}
  .dv-pb-intro.is-rev .dv-pb-intro-txt{order:0}
  .dv-pb-info-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dv-pb-cards,.dv-pb-cards--2,.dv-pb-cards--3,.dv-pb-step-list,.dv-pb-step-list--3,.dv-pb-type-grid,.dv-pb-type-grid--2,.dv-pb-feat-list,.dv-pb-feat-list--3,.dv-pb-cmp,.dv-pb-ba-grid{grid-template-columns:minmax(0,1fr)}
  .dv-pb-faq-a{padding-left:20px}
}
@media (min-width:1280px){.dv-pb-ba-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.dv-pb-ba-grid.is-many{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ===== 콘텐츠 타이포 재조정 (idhospital 실측 기준, diva.css --dv-ct-* 토큰) ===== */
.dv-ptitle{font-weight:800;font-size:clamp(32px,3.8vw,56px);line-height:1.12;letter-spacing:-.045em}
.dv-plead{font-size:clamp(16px,1.25vw,18.5px);font-weight:500;line-height:1.5;letter-spacing:var(--dv-ct-ls)}
.dv-phero--compact .dv-ptitle{font-size:clamp(27px,3.1vw,42px)}
.dv-subnav-list a,.dv-subnav-list a:link{letter-spacing:-.02em}
.dv-page-body--wrap{font-size:16px;line-height:1.55;letter-spacing:-.02em;color:var(--dv-ct-ink)}
.dv-pb{font-size:var(--dv-ct-fs);line-height:var(--dv-ct-lh);letter-spacing:var(--dv-ct-ls);color:var(--dv-ct-ink)}
.dv-pb-h{font-weight:800;font-size:clamp(26px,2.9vw,44px);line-height:var(--dv-ct-h-lh);letter-spacing:var(--dv-ct-h-ls)}
.dv-pb-lead{font-size:var(--dv-ct-lead-fs);font-weight:500;line-height:var(--dv-ct-lead-lh);letter-spacing:var(--dv-ct-lead-ls);color:var(--dv-ct-ink-2)}
.dv-pb .dv-body{font-size:var(--dv-ct-fs);line-height:1.6;letter-spacing:var(--dv-ct-ls);color:var(--dv-ct-ink)}
.dv-pb .dv-body p+p{margin-top:14px}
.dv-pb-intro .dv-body p:first-child{font-size:var(--dv-ct-lead-fs);font-weight:500;line-height:var(--dv-ct-lead-lh);letter-spacing:var(--dv-ct-lead-ls);color:var(--dv-ct-ink-2)}
.dv-pb-bullets li{font-size:var(--dv-ct-fs);line-height:1.5;letter-spacing:var(--dv-ct-ls);font-weight:500;color:var(--dv-ct-ink-2)}
.dv-pb-info-l{font-size:14px;letter-spacing:-.02em}
.dv-pb-info-v{font-size:18px;font-weight:800;letter-spacing:-.04em}
.dv-pb-card-t{font-size:19px;font-weight:800;line-height:var(--dv-ct-t-lh);letter-spacing:var(--dv-ct-t-ls)}
.dv-pb-card p{font-size:var(--dv-ct-fs-s);line-height:var(--dv-ct-lh-s);letter-spacing:var(--dv-ct-ls-s);color:var(--dv-ct-ink)}
.dv-pb-step-t{font-size:18px;font-weight:800;line-height:var(--dv-ct-t-lh);letter-spacing:var(--dv-ct-t-ls)}
.dv-pb-step p{font-size:var(--dv-ct-fs-s);line-height:var(--dv-ct-lh-s);letter-spacing:var(--dv-ct-ls-s);color:var(--dv-ct-ink)}
.dv-pb-type-t{font-size:19px;font-weight:800;line-height:var(--dv-ct-t-lh);letter-spacing:var(--dv-ct-t-ls)}
.dv-pb-type p{font-size:var(--dv-ct-fs-s);line-height:var(--dv-ct-lh-s);letter-spacing:var(--dv-ct-ls-s);color:var(--dv-ct-ink)}
.dv-pb-feat-list strong{font-size:19px;font-weight:800;line-height:var(--dv-ct-t-lh);letter-spacing:var(--dv-ct-t-ls)}
.dv-pb-feat-list p{font-size:var(--dv-ct-fs-s);line-height:var(--dv-ct-lh-s);letter-spacing:var(--dv-ct-ls-s)}
.dv-pb-cmp-col h3{font-size:20px;font-weight:800;letter-spacing:-.04em}
.dv-pb-cmp-col li{font-size:var(--dv-ct-fs-s);line-height:1.5;letter-spacing:var(--dv-ct-ls-s)}
.dv-pb-faq-item summary{font-size:17px;font-weight:700;letter-spacing:-.03em}
.dv-pb-faq-a{font-size:16px;line-height:1.6;letter-spacing:-.025em;color:var(--dv-ct-ink)}
.dv-pb-band-in .dv-body{font-size:var(--dv-ct-lead-fs);font-weight:500;letter-spacing:var(--dv-ct-lead-ls);line-height:1.45}
.dv-pb-note{font-size:13.5px;letter-spacing:-.02em}
.dv-pb-ba-item figcaption{letter-spacing:.02em}
.dv-related .dv-sub{letter-spacing:var(--dv-ct-ls)}
.dv-rcard-t{font-size:16px;font-weight:700;letter-spacing:-.03em;line-height:1.4}
.dv-rpost-t{font-size:17px;font-weight:800;letter-spacing:-.035em}
.dv-rpost-x{font-size:14px;letter-spacing:-.02em}
@media (max-width:767px){
  .dv-pb-card-t,.dv-pb-type-t,.dv-pb-feat-list strong{font-size:18px}
  .dv-pb-step-t{font-size:17px}
  .dv-pb-faq-item summary{font-size:16px}
}

/* ===== 이미지 박스 채우기 보강 (2026-09-13): .dv-root img{height:auto} 리셋과의 경합을 피하려 absolute fill 로 고정 ===== */
.dv-root .dv-pb-intro-img,.dv-root .dv-pb-type-img,.dv-root .dv-pb-step-img,.dv-root .dv-pb-ba-cell{position:relative}
.dv-root .dv-pb-intro-img img,.dv-root .dv-pb-type-img img,.dv-root .dv-pb-step-img img,.dv-root .dv-pb-ba-cell img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.dv-root .dv-pb-type-img.is-contain img{object-fit:contain}
.dv-pb-intro-img.r-2x1{aspect-ratio:2/1}
.dv-pb-intro-img.r-21x9{aspect-ratio:21/9}
@media (max-width:767px){.dv-pb-intro-img.r-2x1,.dv-pb-intro-img.r-21x9{aspect-ratio:16/9}}
/* skin/board/sub/style.css 의 #bo_v_con img{height:auto}(ID 선택자) 를 이기기 위한 동일 이상 특이성 */
#bo_v_con .dv-pb-intro-img img,#bo_v_con .dv-pb-type-img img,#bo_v_con .dv-pb-step-img img,#bo_v_con .dv-pb-ba-cell img,
#bo_v_con .dv-pb-bg img,#bo_v_con .dv-rcard-thumb img,#bo_v_con .dv-rpost-thumb img{height:100%!important;max-width:none!important;margin:0!important}
#bo_v_con .dv-pb-type-img.is-contain img{object-fit:contain}
/* 서브 스킨 표 래퍼 보정 (2026-09-13): 되살린 셀 안에 본문을 두되 표 레이아웃은 블록 흐름으로 무력화해 기존 모습을 유지 */
.dv-legacy-table,.dv-legacy-table>tbody,.dv-legacy-table>tbody>tr,.dv-legacy-table>tbody>tr>td.dv-legacy-cell{all:unset!important;display:block!important}
/* 필러(sub6) legacy 본문 보정 (2026-09-13) — 원본은 411px+900px 고정 폭이라 1025~1759px 에서 제품 설명이 잘렸다.
   본문 <style> 이 page.css 보다 뒤에 오므로 #bo_v_con 을 붙여 우선순위를 높인다. */
@media (min-width:1025px) and (max-width:1759px){
  #bo_v_con .tc-2608240pj9a .s08-row,#bo_v_con .tc-2608240pj9a .s09-row,#bo_v_con .tc-2608240pj9a .s10-row{box-sizing:border-box;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
  #bo_v_con .tc-2608240pj9a .s08-fig,#bo_v_con .tc-2608240pj9a .s09-fig,#bo_v_con .tc-2608240pj9a .s10-fig{flex:0 0 380px}
  #bo_v_con .tc-2608240pj9a .s08-body,#bo_v_con .tc-2608240pj9a .s09-body,#bo_v_con .tc-2608240pj9a .s10-body{flex:1 1 0;min-width:0}
  #bo_v_con .tc-2608240pj9a .s08-txt,#bo_v_con .tc-2608240pj9a .s09-txt,#bo_v_con .tc-2608240pj9a .s10-txt{font-size:clamp(17px,1.35vw,22px);line-height:1.7}
  #bo_v_con .tc-2608240pj9a .s08-txt br,#bo_v_con .tc-2608240pj9a .s09-txt br,#bo_v_con .tc-2608240pj9a .s10-txt br{display:none}
  #bo_v_con .tc-2608240pj9a .s09-rule{width:min(1088px,100% - var(--gutter)*2)}
}
/* 필러 모바일 히어로 문구: 64% 기준 가운데 정렬이라 좁은 화면에서 오른쪽으로 넘쳤다 */
@media (max-width:900px){#bo_v_con .tc-2608240pj9a .s00-copy{left:50%}}
/* 김종명 원장 소개(sub1_2) legacy 히어로 모바일 보정 (2026-09-13) — 원본은 뷰포트 비례 단위(--px)라 390px 에서 글자가 7~8px 로 줄었다.
   640px 이하에서는 사진을 위에, 이름·약력을 아래에 일반 흐름으로 두고 글자 크기를 고정한다. */
@media (max-width:640px){
  #bo_v_con .tc-26082303hbg .hero{height:auto}
  #bo_v_con .tc-26082303hbg .hero__photo{position:static;display:block;width:100%;height:auto;aspect-ratio:1600/1300;object-fit:cover;object-position:center top}
  #bo_v_con .tc-26082303hbg .hero__copy{position:static;left:auto;top:auto;width:auto;padding:28px 20px 40px}
  #bo_v_con .tc-26082303hbg .hero__eyebrow{font-size:13px;line-height:1.4;margin-bottom:6px}
  #bo_v_con .tc-26082303hbg .hero__title{font-size:28px;line-height:1.25;margin-bottom:14px}
  #bo_v_con .tc-26082303hbg .hero__lead{font-size:17px;line-height:1.5;margin-bottom:10px}
  #bo_v_con .tc-26082303hbg .hero__body{font-size:15px;line-height:1.65;margin-bottom:20px}
  #bo_v_con .tc-26082303hbg .hero__cred li{font-size:14px;line-height:1.55;margin-bottom:6px}
  #bo_v_con .tc-26082303hbg .hero__cred br{display:none}
}

/* 2026-09-28 진료안내(sub1_3) DB 본문의 주소 — 좁은 폭에서 「7층」 외톨이·낱말 안 꺾임(「논/현동」) 방지(MOBILE_RULES 1-5). DB 본문은 .dv-root 밖이라 keep-all 도 여기서. DB 는 손대지 않는다 */
.s01-addr,.tc-2608236rhdd .s01 .s01-addr{text-wrap:balance;word-break:keep-all}

/* ===== 디바거상술(sub3_3) 시안 재구성 (2026-09-28, pages/sub3_3.php) — 색은 --dv-* 토큰만(메인과 같은 팔레트 규칙: 올리브 위 글자는 차콜, 샴페인·올리브다크는 장식/굵은 요소만), 서체는 font.css 가 덮는다 =====
   블록: Procedures(올리브라이트 면·세로 인물) · Lifting Principle(단면 이미지 2장: 무채색+회색 화살표 / 원색+올리브 화살표, 층 라벨 4) · DIVA Way(탭 + 필요한 경우(다크) + 시술 방법 3단계 + 콜아웃) · Custom Lift(얼굴 맵 라벨 6 + 특징 카드 4) */
/* Procedures */
.dv-pb--sub33 .dv-pb-types{background:var(--dv-olive-soft)}
/* 2026-09-29 배경 리듬 B안(사용자 선택): 크림 일색이던 구간에 아이보리·베이지를 한 칸씩 — 인트로 크림 → 수술 정보 아이보리 → Lifting 크림 → Procedures 올리브 → DIVA Way 크림 → 맞춤거상술 베이지 → FAQ 크림 → 다크 */
.dv-pb--sub33 .dv-pb-info{background:var(--dv-cream-2)}
.dv-pb--sub33 .dv-pb-map{background:var(--dv-beige)}
.dv-pb--sub33 .dv-pb-type{border:0;text-align:center;box-shadow:0 1px 0 rgba(47,43,40,.04)}
.dv-pb--sub33 .dv-pb-type-img{aspect-ratio:4/5}
.dv-pb--sub33 .dv-pb-type-t{padding-top:22px}
.dv-pb--sub33 .dv-pb-type p{padding-bottom:26px}
.dv-pb--sub33 .dv-pb-type-grid{align-items:stretch}   /* 2026-10-01 사용자 「카드 사이즈가 왜 다르냐 → 크게 수정」: 같은 줄 가장 긴 카드에 맞춤(시안의 둘째 카드 고정 올림 때 start 로 바꿨던 것이 남아 설명 2줄/3줄 차이가 높이 차이로 보였다) */
/* Lifting Principle */
.dv-pb--sub33 .dv-pb-lp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,2vw,32px);align-items:end}   /* 2026-09-30 사용자 「피부만은 작게, 스마스는 크게 강조」: 5:7, 아래 정렬이라 알약·설명 줄이 나란하다 */
.dv-pb--sub33 .dv-pb-lp-col{text-align:center}
/* 2026-09-30: 그림틀 = 사진 → 제목 알약(사진 아래) → (폰) 번호 범례. 층 라벨은 사진 안 오른쪽 알약(이전 방식) — 라벨 칸 밖 배치는 사용자가 되돌림. 화살표는 SVG(사진 픽셀 좌표, cover 와 같은 slice 매핑) */
.dv-pb--sub33 .dv-pb-lp-fig{position:relative;margin:0;display:block}
.dv-pb--sub33 .dv-pb-lp-img{position:relative;aspect-ratio:4/3;border-radius:var(--dv-r);overflow:hidden;background:var(--dv-cream-2)}
.dv-pb--sub33 .dv-pb-lp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.dv-pb--sub33 .dv-pb-lp-col:not(.is-hi) .dv-pb-lp-img img{filter:grayscale(1) contrast(.9) brightness(1.04)}
.dv-pb--sub33 .dv-pb-lp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.dv-pb--sub33 .dv-lp-lead,.dv-pb--sub33 .dv-lp-dot{display:none}   /* PC 는 CSS 알약의 선·점을 쓴다(사진 밖 라벨 안 폐기) */
.dv-pb--sub33 .dv-lp-num{display:none}
.dv-pb--sub33 .dv-lp-body{stroke:rgba(252,250,247,.55);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}   /* 블록 화살표: 원통 그라디언트(SVG defs) + 얇은 아이보리 테두리 */
.dv-pb--sub33 .dv-lp-shadow{fill:rgba(47,43,40,.34)}   /* 사진 위에 드리운 그림자 — 화살표가 그림 안에 서 있는 느낌 */
.dv-pb--sub33 .dv-lp-socket{fill:rgba(47,43,40,.55)}   /* 축이 층에 꽂힌 자리 */
.dv-pb--sub33 .dv-lp-socket-rim{fill:none;stroke:rgba(252,250,247,.6);stroke-width:1.5;vector-effect:non-scaling-stroke}
.dv-pb--sub33 .dv-pb-lp-col:not(.is-hi) .dv-lp-shadow{fill:rgba(47,43,40,.28)}
.dv-pb--sub33 .dv-pb-lp-labels{position:absolute;left:0;top:0;width:100%;aspect-ratio:4/3;list-style:none;margin:0;padding:0;pointer-events:none}   /* 사진과 같은 상자(4:3) 위에 얹혀 --t % 가 사진 기준이 된다 */
.dv-pb--sub33 .dv-pb-lp-labels li{position:absolute;right:6%;top:var(--t,20%);transform:translateY(-50%);padding:3px 9px;border-radius:999px;background:rgba(252,250,247,.92);font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--dv-ink-2);box-shadow:0 1px 4px rgba(47,43,40,.14);white-space:nowrap}
.dv-pb--sub33 .dv-pb-lp-labels li::before{content:"";position:absolute;right:100%;top:50%;width:22px;height:1px;background:var(--dv-ink-2);opacity:.6}
.dv-pb--sub33 .dv-pb-lp-labels li::after{content:"";position:absolute;right:calc(100% + 22px);top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--dv-ink-2);opacity:.7}
.dv-pb--sub33 .dv-pb-lp-n{display:none}
.dv-pb--sub33 .dv-pb-lp-tag{display:inline-block;margin-top:14px;padding:8px 18px;border-radius:999px;background:var(--dv-beige);color:var(--dv-ink);font-size:15px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;box-shadow:0 2px 8px rgba(47,43,40,.1)}
.dv-pb--sub33 .is-hi .dv-pb-lp-tag{background:var(--dv-olive);color:var(--dv-ink)}
.dv-pb--sub33 .dv-pb-lp-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:5px;font-size:15px;line-height:1.6;color:var(--dv-ink-2);word-break:keep-all}
.dv-pb--sub33 .is-hi .dv-pb-lp-list{color:var(--dv-olive-ink);font-weight:600}
@media (max-width:1279px){.dv-pb--sub33 .dv-lp-lead{stroke-width:4}}
/* DIVA Way */
.dv-pb--sub33 .dv-pb-way-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);margin-bottom:22px}
.dv-pb--sub33 .dv-pb-tabs{grid-column:2;display:flex;flex-wrap:wrap;gap:8px}
.dv-pb--sub33 .dv-pb-tab{height:40px;padding:0 18px;border:1px solid var(--dv-line);border-radius:999px;background:transparent;color:var(--dv-ink-2);font-size:14.5px;font-weight:600;letter-spacing:-.02em;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.dv-pb--sub33 .dv-pb-tab:hover{border-color:var(--dv-ink);color:var(--dv-ink)}
.dv-pb--sub33 .dv-pb-tab[aria-selected="true"]{background:var(--dv-olive);border-color:var(--dv-olive);color:var(--dv-ink)}
.dv-pb--sub33 .dv-pb-way-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);align-items:stretch}
/* 2026-09-29 사용자 「4개 거상술 요소 사이즈 통일, 제일 큰 것 기준」: 패널 4장을 같은 그리드 칸에 겹쳐 가장 큰 패널 높이로 고정, 숨긴 탭은 visibility 로만 감춘다(높이는 계속 기여) */
.dv-pb--sub33 .dv-pb-way-panels{display:grid;grid-template-columns:minmax(0,1fr)}
.dv-pb--sub33 .dv-pb-way-panel{grid-area:1/1}
.dv-pb--sub33 .dv-pb-way-panel[hidden]{display:grid!important;visibility:hidden}   /* diva.css :where(…) [hidden]{display:none!important} 를 이기려면 !important 필요 */
.dv-pb--sub33 .dv-pb-way-how{display:flex;flex-direction:column}   /* 남는 높이는 단계와 콜아웃 사이로, 콜아웃은 다크 판 바닥에 맞춤 */
/* 2026-09-29 사용자: 제목 위치 고정 + 배경 사진 대신 단색(차콜, 4탭 동일). 제목은 판 위에 붙고 남는 높이는 2×2 카드가 균등하게 채운다 */
.dv-pb--sub33 .dv-pb-way-need{display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(24px,2.6vw,40px);border-radius:var(--dv-r);background:var(--dv-navy);color:#FCFAF7;overflow:hidden}
.dv-pb--sub33 .dv-pb-way-need-h{margin:0 0 20px;font-size:clamp(20px,1.7vw,24px);font-weight:700;letter-spacing:-.03em;color:#FCFAF7}
.dv-pb--sub33 .dv-pb-way-need-h em{font-style:normal;color:var(--dv-olive-lt)}
.dv-pb--sub33 .dv-pb-way-need-list{list-style:none;margin:0;padding:0;flex:1 1 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:10px}
.dv-pb--sub33 .dv-pb-way-need-list li{display:flex;flex-direction:column;justify-content:center;padding:22px 18px;border:1px solid rgba(252,250,247,.16);border-radius:10px;background:rgba(252,250,247,.06);backdrop-filter:blur(2px);text-align:center}
.dv-pb--sub33 .dv-pb-way-need-list .dv-no{display:block;margin-bottom:10px;font-size:15px;color:var(--dv-rose-lt)}
.dv-pb--sub33 .dv-pb-way-need-list strong{display:block;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-.02em;color:#FCFAF7;word-break:keep-all;text-wrap:balance}
.dv-pb--sub33 .dv-pb-way-sub{margin:0 0 16px;font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--dv-ink)}
.dv-pb--sub33 .dv-pb-way-steps{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dv-pb--sub33 .dv-pb-way-step{position:relative;text-align:center}
.dv-pb--sub33 .dv-pb-way-step+.dv-pb-way-step::before{content:"";position:absolute;left:-13px;top:calc(50% - 60px);width:9px;height:9px;border-top:1.5px solid var(--dv-ink-2);border-right:1.5px solid var(--dv-ink-2);transform:rotate(45deg);opacity:.6}
.dv-pb--sub33 .dv-pb-way-step-img{position:relative;margin:0 0 14px;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--dv-cream)}
.dv-pb--sub33 .dv-pb-way-step-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dv-pb--sub33 .dv-pb-way-step-t{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:var(--dv-ink)}
.dv-pb--sub33 .dv-pb-way-step p{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--dv-ink-2);word-break:keep-all;text-wrap:balance}
.dv-pb--sub33 .dv-pb-way-lead{margin:-6px 0 24px;font-size:14.5px;line-height:1.6;color:var(--dv-muted);text-align:center;word-break:keep-all}
.dv-pb--sub33 .dv-pb-callout{display:flex;gap:16px;align-items:center;margin-top:auto;padding:20px 22px;border-radius:var(--dv-r);background:var(--dv-olive-soft)}
.dv-pb--sub33 .dv-pb-callout svg{flex:none;width:30px;height:30px;color:var(--dv-olive-dp)}
.dv-pb--sub33 .dv-pb-callout div{padding-left:16px;border-left:1px solid rgba(127,142,69,.45)}
.dv-pb--sub33 .dv-pb-callout strong{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--dv-olive-ink)}
.dv-pb--sub33 .dv-pb-callout span{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--dv-ink-2);word-break:keep-all}
/* Custom Lift */
.dv-pb--sub33 .dv-pb-map-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,2.6vw,40px);align-items:stretch}
.dv-pb--sub33 .dv-pb-map-fig{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--dv-r);overflow:hidden;background:var(--dv-cream-2)}
.dv-pb--sub33 .dv-pb-map-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 서브 스킨 `#bo_v_con img{height:auto}` 가 틀 채움을 깨서(≤767 얼굴 맵 4:5 틀에 사진 4:3 만 차고 아래가 비었다) 위 290행과 같은 특이성으로 */
#bo_v_con .dv-pb--sub33 .dv-pb-map-fig img,#bo_v_con .dv-pb--sub33 .dv-pb-lp-fig img,#bo_v_con .dv-pb--sub33 .dv-pb-way-step-img img{height:100%!important;max-width:none!important;margin:0!important}
.dv-pb--sub33 .dv-pb-map-labels{position:absolute;inset:0;list-style:none;margin:0;padding:0;--len:64px}
.dv-pb--sub33 .dv-pb-map-labels li{position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--dv-olive-dp);box-shadow:0 0 0 3px rgba(127,142,69,.22)}
.dv-pb--sub33 .dv-pb-map-labels li::before{content:"";position:absolute;top:50%;width:var(--len);height:1px;background:var(--dv-olive-dp)}
.dv-pb--sub33 .dv-pb-map-labels li.is-l::before{right:100%}
.dv-pb--sub33 .dv-pb-map-labels li.is-r::before{left:100%}
.dv-pb--sub33 .dv-pb-map-labels li span{position:absolute;top:50%;transform:translateY(-50%);padding:2px 7px;border-radius:4px;background:rgba(252,250,247,.86);font-size:13.5px;font-weight:600;letter-spacing:-.02em;color:var(--dv-ink);white-space:nowrap}
.dv-pb--sub33 .dv-pb-map-labels li.is-l span{right:calc(100% + var(--len) + 4px)}
.dv-pb--sub33 .dv-pb-map-labels li.is-r span{left:calc(100% + var(--len) + 4px)}
.dv-pb--sub33 .dv-pb-map-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dv-pb--sub33 .dv-pb-map-cards li{display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,2.4vw,34px) 20px;border:1px solid var(--dv-olive-dp);border-radius:4px;background:#FCFAF7;text-align:center}
.dv-pb--sub33 .dv-pb-map-cards li:first-child{background:var(--dv-olive-soft)}
.dv-pb--sub33 .dv-pb-map-cards .dv-no{display:block;margin-bottom:8px;font-size:18px;color:var(--dv-olive-ink)}
.dv-pb--sub33 .dv-pb-map-cards strong{display:block;font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--dv-ink)}
.dv-pb--sub33 .dv-pb-map-cards li:first-child strong{color:var(--dv-olive-ink)}
.dv-pb--sub33 .dv-pb-map-cards p{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--dv-ink-2);word-break:keep-all;text-wrap:balance}
@media (min-width:1024px) and (hover:hover){
  /* 2026-09-29 사용자: 평소엔 4장 나란히, 커서를 올린 카드만 시안의 둘째 카드처럼 올라온다(둘째 카드 고정 -22px 은 폐기) */
  .dv-pb--sub33 .dv-pb-type{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s cubic-bezier(.2,.7,.2,1)}
  .dv-pb--sub33 .dv-pb-type:hover{transform:translateY(-22px);box-shadow:0 22px 34px -20px rgba(47,43,40,.3)}
}
@media (max-width:1023px){
  .dv-pb--sub33 .dv-pb-lp-grid{grid-template-columns:minmax(0,1fr)}
  .dv-pb--sub33 .dv-pb-lp-col:not(.is-hi) .dv-pb-lp-fig{width:80%;margin-inline:auto}   /* 1열에서도 피부만 쪽 그림은 한 단계 작게 — 그림틀째 줄여야 사진 위 층 라벨(틀 기준 %)이 같이 맞는다 */
  .dv-pb--sub33 .dv-pb-way-top{grid-template-columns:minmax(0,1fr)}
  .dv-pb--sub33 .dv-pb-tabs{grid-column:1}
  .dv-pb--sub33 .dv-pb-way-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}   /* 1열: 통일된 높이의 남는 몫은 맨 아래 다크 판이 받는다 */
  .dv-pb--sub33 .dv-pb-way-need{order:2}   /* 시안 모바일: 탭 → 시술 방법 → 콜아웃 → 필요한 경우 */
  .dv-pb--sub33 .dv-pb-map-grid{grid-template-columns:minmax(0,1fr)}
  .dv-pb--sub33 .dv-pb-map-labels{--len:40px}
  .dv-pb--sub33 .dv-pb-map-labels li span{font-size:12px}
}
@media (max-width:767px){
  .dv-pb--sub33 .dv-pb-tab{height:44px;flex:1 1 calc(50% - 4px)}   /* 시안 모바일: 알약 2×2, 터치 44px */
  .dv-pb--sub33 .dv-pb-way-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(var(--dv-gut) * -1);padding-inline:var(--dv-gut);scrollbar-width:none}
  .dv-pb--sub33 .dv-pb-way-steps::-webkit-scrollbar{display:none}
  .dv-pb--sub33 .dv-pb-way-step{flex:0 0 min(64%,260px);scroll-snap-align:start}
  .dv-pb--sub33 .dv-pb-way-step+.dv-pb-way-step::before{left:-11px}
  .dv-pb--sub33 .dv-pb-way-need-list{grid-template-columns:minmax(0,1fr)}
  .dv-pb--sub33 .dv-pb-map-cards{grid-template-columns:minmax(0,1fr)}
  /* 얼굴 맵: 4:3 그대로면 오른쪽 라벨 3개(41·47.5·54%)가 13px 간격으로 겹치고 「볼 처짐·입가 주름」이 틀 밖으로 잘린다 →
     틀을 세로로 키우고(사진은 cover 라 좌우만 잘림, y% 는 그대로) x 는 잘린 만큼 가운데 기준으로 벌린다(--sx = 틀비율/사진비율). 라벨은 틀 밖(거터)으로 나가도 보이게 */
  .dv-pb--sub33 .dv-pb-map-fig{aspect-ratio:1/1;overflow:visible;--sx:1.3333}
  .dv-pb--sub33 .dv-pb-map-fig img{border-radius:var(--dv-r)}
  .dv-pb--sub33 .dv-pb-map-labels{--len:28px}
  .dv-pb--sub33 .dv-pb-map-labels li{left:calc(50% + (var(--x) - 50%) * var(--sx))}
  .dv-pb--sub33 .dv-pb-map-labels li span{font-size:11px;padding:1px 5px}
  /* 단면 그림: 4:3 이면 「스마스(SMAS)층」 라벨(76%)과 바닥 알약이 겹친다 → 틀을 세로로, 알약은 작게 */
  /* 폰: 라벨 칸을 둘 폭이 없다 → 사진 아래 번호 범례, 사진에는 번호 점(SVG .dv-lp-num). 인출선은 숨김 */
  .dv-pb--sub33 .dv-pb-lp-img{aspect-ratio:5/4}
  .dv-pb--sub33 .dv-lp-lead,.dv-pb--sub33 .dv-lp-dot{display:none}
  .dv-pb--sub33 .dv-lp-num{display:block}
  .dv-pb--sub33 .dv-lp-num circle{fill:#FCFAF7;stroke:var(--dv-ink-2);stroke-width:3}
  .dv-pb--sub33 .dv-lp-num text{font-family:var(--dv-ff);font-size:34px;font-weight:700;fill:var(--dv-ink)}
  .dv-pb--sub33 .dv-pb-lp-labels{position:static;width:auto;aspect-ratio:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;margin-top:10px}
  .dv-pb--sub33 .dv-pb-lp-labels li{position:static;transform:none;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 9px 3px 4px;background:#FCFAF7;border:1px solid var(--dv-line);box-shadow:none}
  .dv-pb--sub33 .dv-pb-lp-labels li::before,.dv-pb--sub33 .dv-pb-lp-labels li::after{display:none}
  .dv-pb--sub33 .dv-pb-lp-n{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#FCFAF7;border:1px solid var(--dv-ink-2);font-size:10.5px;font-weight:700;color:var(--dv-ink)}
  .dv-pb--sub33 .dv-pb-lp-tag{margin-top:12px;padding:6px 14px;font-size:13px}
  .dv-pb--sub33 .dv-pb-callout{align-items:flex-start}
}
@media (max-width:520px){
  .dv-pb--sub33 .dv-pb-map-fig{aspect-ratio:4/5;--sx:1.6667}
  .dv-pb--sub33 .dv-pb-lp-img{aspect-ratio:1/1}
}

/* ---- 관련 콘텐츠 B안(Doctor's Insight, 2026-09-29): 포스터 62 + 제목 목록 38 ---- */
.dv-relb{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:clamp(24px,3vw,48px);align-items:stretch}
.dv-relb .dv-relb-main{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;border-radius:var(--dv-r);overflow:hidden;background:var(--dv-navy);cursor:pointer;text-align:left;font-family:var(--dv-ff);color:#FCFAF7;isolation:isolate}
.dv-relb .dv-relb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.55);transition:transform .7s var(--dv-ease)}
#bo_v_con .dv-relb .dv-relb-img{height:100%!important;max-width:none!important;margin:0!important}
.dv-relb .dv-relb-main:hover .dv-relb-img{transform:scale(1.03)}
.dv-relb .dv-relb-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(47,43,40,.25) 0%,rgba(47,43,40,.5) 50%,rgba(47,43,40,.9) 100%)}
.dv-relb .dv-relb-play{position:absolute;left:50%;top:44%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1.4px solid rgba(252,250,247,.85);display:grid;place-items:center;color:#FCFAF7;background:rgba(47,43,40,.25);backdrop-filter:blur(2px);transition:transform .3s var(--dv-ease),background-color .3s}
.dv-relb .dv-relb-main:hover .dv-relb-play{transform:scale(1.06);background:rgba(47,43,40,.45)}
.dv-relb .dv-relb-play svg{width:24px;height:24px;margin-left:3px}
.dv-relb .dv-relb-cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.2vw,32px)}
.dv-relb .dv-relb-t{display:block;font-family:var(--dv-serif,"Noto Serif KR",serif);font-weight:600;font-size:clamp(19px,1.7vw,26px);line-height:1.35;letter-spacing:-.02em;color:#FCFAF7;text-wrap:balance;word-break:keep-all}
.dv-relb .dv-relb-main:focus-visible{outline:2px solid var(--dv-olive);outline-offset:4px}
.dv-relb .dv-relb-side{display:flex;flex-direction:column;justify-content:center;min-width:0}
.dv-relb .dv-relb-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--dv-line)}
.dv-relb .dv-relb-item{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) 14px;align-items:center;gap:12px;width:100%;margin:0;padding:16px 10px 16px 12px;border:0;border-bottom:1px solid var(--dv-line);background:none;text-align:left;cursor:pointer;color:var(--dv-ink);font-family:var(--dv-ff);transition:background-color .25s}
.dv-relb .dv-relb-item:hover{background:rgba(232,236,211,.45)}
.dv-relb .dv-relb-item.is-active{background:linear-gradient(90deg,var(--dv-olive-soft),rgba(232,236,211,0) 90%);box-shadow:inset 3px 0 0 var(--dv-olive)}
.dv-relb .dv-relb-no{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:16px;color:var(--dv-muted)}
.dv-relb .dv-relb-item.is-active .dv-relb-no{color:var(--dv-olive-dp)}
.dv-relb .dv-relb-it{font-size:15.5px;font-weight:500;line-height:1.5;letter-spacing:-.01em;color:var(--dv-ink);word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dv-relb .dv-relb-item.is-active .dv-relb-it{font-weight:700}
.dv-relb .dv-relb-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--dv-beige);color:var(--dv-ink-2);font-size:11px;font-weight:600;letter-spacing:.02em;vertical-align:1px}
.dv-relb .dv-relb-ic{width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;opacity:.4;justify-self:end}
.dv-relb .dv-relb-item.is-active .dv-relb-ic{opacity:.9;color:var(--dv-olive-dp)}
.dv-relb .dv-relb-item:focus-visible{outline:2px solid var(--dv-olive);outline-offset:-2px}
.dv-relb .dv-relb-chan{display:inline-flex;align-items:center;gap:6px;align-self:flex-end;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--dv-ink-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(69,56,50,.35)}
.dv-relb .dv-relb-chan svg{width:16px;height:16px}
.dv-relb .dv-relb-chan:hover{color:var(--dv-olive-ink);text-decoration-color:currentColor}
#bo_v_con .dv-relb .dv-relb-chan{color:var(--dv-ink-2)}
@media (max-width:1023px){
  .dv-relb{grid-template-columns:minmax(0,1fr);gap:22px}
  .dv-relb .dv-relb-side{justify-content:flex-start}
  .dv-relb .dv-relb-item{min-height:44px;padding:14px 8px 14px 10px}
  .dv-relb .dv-relb-chan{align-self:flex-start;margin-top:16px;min-height:44px}
}

/* ---- FAQ + Doctor's Insight 한 섹션(2안, 2026-09-29 프리뷰 ?dvfaq=2): 왼쪽 7 아코디언 / 오른쪽 5 포스터+목록 ---- */
.dv-pb-faq--side .dv-pb-faq-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,48px);align-items:start}
.dv-pb-faq--side .dv-pb-faq-list,.dv-pb-faq-side{min-width:0}
.dv-relb--stack{display:block}
.dv-relb--stack .dv-relb-label{margin:0 0 12px;font-size:clamp(15px,1.15vw,17px)}
.dv-relb--stack .dv-relb-main{margin-bottom:4px}
.dv-relb--stack .dv-relb-t{font-size:clamp(17px,1.35vw,20px)}
.dv-relb--stack .dv-relb-play{width:54px;height:54px;margin:-27px 0 0 -27px}
.dv-relb--stack .dv-relb-side{display:block}
.dv-relb--stack .dv-relb-list{border-top:0}
.dv-relb--stack .dv-relb-item{padding:13px 8px 13px 10px}
.dv-relb--stack .dv-relb-chan{margin-top:14px;float:right}
@media (max-width:1023px){
  .dv-pb-faq--side .dv-pb-faq-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .dv-relb--stack .dv-relb-chan{float:none}
}

/* ---- FAQ 3안(2026-09-29 프리뷰 ?dvfaq=3): 헤어라인 행 + 번호 + ±, 답 안에 짝 영상 포스터, 아래 대표 영상 한 편 ---- */
.dv-relb--solo{display:block}
.dv-relb--solo .dv-relb-t{font-size:clamp(15px,1.15vw,17px)}
.dv-relb--solo .dv-relb-play{width:48px;height:48px;margin:-24px 0 0 -24px}
.dv-relb--solo .dv-relb-play svg{width:20px;height:20px}
.dv-relb--solo .dv-relb-cap{padding:clamp(14px,1.6vw,20px)}
.dv-pb-faq--hair .dv-pb-faq-list{gap:0;border-top:1px solid rgba(47,43,40,.55)}
.dv-pb-faq--hair .dv-pb-faq-item{background:transparent;border:0;border-bottom:1px solid var(--dv-line);border-radius:0;overflow:visible}
.dv-pb-faq--hair .dv-pb-faq-item summary{gap:18px;padding:22px 4px}
.dv-pb-faq--hair .dv-pb-faq-no{flex:none;width:34px;font-family:var(--dv-serif);font-style:italic;font-weight:400;font-size:17px;line-height:1;color:var(--dv-muted)}
.dv-pb-faq--hair .dv-pb-faq-item[open] .dv-pb-faq-no{color:var(--dv-olive-dp)}
.dv-pb-faq--hair .dv-pb-faq-plus{position:relative;flex:none;width:18px;height:18px;margin-left:auto}
.dv-pb-faq--hair .dv-pb-faq-plus::before,.dv-pb-faq--hair .dv-pb-faq-plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;background:var(--dv-ink);transition:transform .3s var(--dv-ease)}
.dv-pb-faq--hair .dv-pb-faq-plus::after{transform:rotate(90deg)}
.dv-pb-faq--hair .dv-pb-faq-item[open] .dv-pb-faq-plus::after{transform:rotate(0)}
.dv-pb-faq--hair .dv-pb-faq-a{margin:0 0 24px 56px;padding:22px 26px;border-radius:var(--dv-r);background:var(--dv-olive-soft);color:var(--dv-ink-2)}
.dv-pb-faq--hair .dv-pb-faq-a--v{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(18px,2.4vw,32px);align-items:center}
.dv-pb-faq--hair .dv-pb-faq-a-txt{min-width:0}
.dv-pb-faq-feat{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(24px,3vw,44px);align-items:center;margin-top:clamp(36px,4vw,56px)}
.dv-pb-faq-feat .dv-relb--solo .dv-relb-t{font-size:clamp(16px,1.3vw,19px)}
.dv-pb-faq-feat-txt{min-width:0}
.dv-pb-faq-feat-txt .dv-kicker{margin-bottom:10px}
.dv-pb-faq-feat-t{margin:0 0 18px;font-family:var(--dv-serif);font-weight:600;font-size:clamp(22px,2vw,30px);line-height:1.3;letter-spacing:-.02em;color:var(--dv-ink);text-wrap:balance;word-break:keep-all}
.dv-pb-faq-feat .dv-relb-chan,#bo_v_con .dv-pb-faq-feat .dv-relb-chan{float:none;display:inline-flex;align-items:center;gap:6px;margin-top:0;font-size:13.5px;font-weight:600;color:var(--dv-ink-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(69,56,50,.35)}   /* 대표 블록의 링크는 .dv-relb 밖이라 위 규칙이 안 닿았다(17px 기본 링크로 보임) */
.dv-pb-faq-feat .dv-relb-chan svg{width:16px;height:16px}
.dv-pb-faq-feat:not(.dv-pb-faq-feat--multi) .dv-relb-cap{display:none}   /* 1편 배치: 제목은 오른쪽 h3 에 있으니 포스터 안 캡션은 중복 → 숨김 */
.dv-pb-faq-feat--multi{display:block}
.dv-pb-faq-feat--multi .dv-kicker{margin-bottom:14px}
.dv-pb-faq-feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.dv-pb-faq-feat--multi .dv-relb-chan{display:inline-flex;margin-top:16px}
@media (max-width:767px){.dv-pb-faq-feat-grid{grid-template-columns:minmax(0,1fr);gap:14px}}
@media (max-width:1023px){
  .dv-pb-faq-feat{grid-template-columns:minmax(0,1fr);gap:18px}
}
@media (max-width:767px){
  .dv-pb-faq--hair .dv-pb-faq-item summary{gap:12px;padding:18px 2px}
  .dv-pb-faq--hair .dv-pb-faq-no{width:26px;font-size:15px}
  .dv-pb-faq--hair .dv-pb-faq-a{margin:0 0 18px;padding:18px}
  .dv-pb-faq--hair .dv-pb-faq-a--v{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* ---- sub3_3 텍스트 위계 정리(2026-09-30, 사용자 「적용해줘」 — 5문항 실측 답변의 4가지: 5단 자 · 작은 글자 자간 · 리드 행간 · 줄 길이/외톨이 줄). 문구·배치 무변화. 백업 page.css.bak-typo33 ----
   자: 소제목 20/700 · 카드 제목 18/700 · 2차 제목 16/700 · 본문 16/400 · 설명 15/400 · 주석 13.5. 800 굵기는 홈에 없으므로 700 으로 */
.dv-pb--sub33 .dv-pb-way-need-h{font-size:20px}                                   /* 24 → 20 (「시술 방법」과 같은 급) */
.dv-pb--sub33 .dv-pb-way-sub{font-size:20px}                                      /* 18 → 20 */
.dv-pb--sub33 .dv-pb-type-t{font-size:18px;font-weight:700;letter-spacing:-.02em}                       /* 19/800 → 18/700 */
.dv-pb--sub33 .dv-pb-info-v{font-weight:700;letter-spacing:-.02em}                /* 800 → 700 */
.dv-pb--sub33 .dv-pb-way-step-t{font-size:16px}                                   /* 16.5 → 16 */
.dv-pb--sub33 .dv-pb-way-need-list strong{font-weight:600}                        /* 다크 판 항목 4개가 제목처럼 읽혀 700 → 600 */
.dv-pb--sub33 .dv-pb-faq-item summary{font-size:16px;letter-spacing:-.02em}       /* 17 → 16 (2차 제목 급) */
.dv-pb--sub33 .dv-pb-lp-tag{font-size:16px}                                       /* 15 → 16 */
.dv-pb--sub33 .dv-pb-intro .dv-body p:not(:first-child){font-size:16px}           /* 17 → 16 본문 */
.dv-pb--sub33 .dv-pb-type p{font-size:15px;line-height:1.6;letter-spacing:-.01em} /* 15.5/1.5 → 15/1.6 설명 */
.dv-pb--sub33 .dv-pb-way-step p,.dv-pb--sub33 .dv-pb-map-cards p,.dv-pb--sub33 .dv-pb-way-lead{font-size:15px;letter-spacing:-.01em}   /* 14 · 14.5 · 14.5 → 15 설명 */
/* 작은 글자(≤15px)는 자간을 좁히지 않는다: -.033~-.038em → -.01em */
.dv-pb--sub33 .dv-pb-lp-list li,.dv-pb--sub33 .dv-pb-callout span,.dv-pb--sub33 .dv-relb-chan,.dv-pb--sub33 .dv-pb-note,.dv-pb--sub33 .dv-pb-info-l,.dv-pb--sub33 .dv-pb-lp-labels li,.dv-pb--sub33 .dv-pb-map-labels li span{letter-spacing:-.01em}
/* 리드: 자간 -.045em → -.025em, 행간 1.4 → 1.55 (폰에서 5줄이 되는 인트로 첫 문단 기준) */
.dv-pb--sub33 .dv-pb-lead,.dv-pb--sub33 .dv-pb-intro .dv-body p:first-child,.dv-pb--sub33 .dv-pb-band-in .dv-body{letter-spacing:-.025em}
.dv-pb--sub33 .dv-pb-lead,.dv-pb--sub33 .dv-pb-intro .dv-body p:first-child{line-height:1.55}
/* 줄 길이: 영상 없는 FAQ 답변 1,072px(79자) → 최대 720px(≈52자), 고지 99자 → 760px 가운데 */
.dv-pb--sub33 .dv-pb-faq--hair .dv-pb-faq-a:not(.dv-pb-faq-a--v) p{max-width:720px}
.dv-pb--sub33 .dv-pb-note--legal,.dv-pb--sub33 + .dv-root .dv-pb-note--legal{max-width:760px;margin-inline:auto}
/* 외톨이 줄: 문단은 pretty(마지막 줄 한 어절 방지), 짧은 블록은 balance — 전 폭 */
.dv-pb--sub33 .dv-pb-type p{text-wrap:pretty}
.dv-pb--sub33 .dv-pb-intro .dv-body p,.dv-pb--sub33 .dv-pb-faq-a p,.dv-pb--sub33 .dv-pb-note--legal,.dv-pb--sub33 + .dv-root .dv-pb-note--legal{text-wrap:balance}   /* 2~5줄 문단은 balance 가 외톨이 줄을 확실히 없앤다(pretty 는 한 어절짜리만 막음). 6줄 초과면 브라우저가 무시 → 기본 흐름 */
.dv-pb--sub33 .dv-pb-lead,.dv-pb--sub33 .dv-pb-info .dv-pb-note,.dv-pb--sub33 .dv-pb-faq-item summary > span:nth-child(2),.dv-pb--sub33 .dv-pb-way-need-h{text-wrap:balance}
body:has(.dv-pb--sub33) .dv-plead,body:has(.dv-pb--sub33) .dv-cta-band h2{text-wrap:balance}   /* 히어로 리드·상담 밴드 제목은 공용 프레임이라 :has 로 이 페이지만 */

/* ---- sub3_3 인트로: 스마스층 포커스(2026-09-30 프리뷰 ?dvsmas=1). 사진이 화면에 45% 들어오면 .is-on ----
   기본 사진은 채도가 빠지고(.25) 살짝 어두워지며, 같은 사진을 띠 모양(clip-path)으로 잘라 원색으로 겹친다 → 스마스층만 밝게 남는다.
   그 위에 올리브 윤곽(그려지듯)과 라벨(단면 비교의 층 라벨과 같은 알약). 사진·오버레이는 띠 중심(55% 75%)으로 4% 푸시인. 호버하면 전체 원색 */
.dv-pb--sub33 .dv-pb-intro-img:has(.dv-smas) > img{transition:opacity 1.1s var(--dv-ease),transform 1.8s var(--dv-ease);transform-origin:55% 75%}
.dv-pb--sub33 .dv-pb-intro-img:has(.dv-smas){background:#FCFAF7}   /* 페이드가 베이지가 아니라 크림으로 */
.dv-pb--sub33 .dv-pb-intro-img.is-on > img{transform:scale(1.04)}   /* 2026-09-30 사용자 「원색 유지」(D안): 사진은 그대로, 윤곽·글로우·라벨만. 이전 안: 회색(saturate .25) → 크림 페이드(opacity .42) */
.dv-pb--sub33 .dv-smas{position:absolute;inset:0;pointer-events:none}
.dv-pb--sub33 .dv-smas-zoom{position:absolute;inset:0;transform-origin:55% 75%;transition:transform 1.8s var(--dv-ease)}   /* 띠 사진·윤곽만 사진과 같이 푸시인. 라벨·인출선·점은 확대 밖(글자 왜곡·잘림 방지) */
.dv-pb--sub33 .dv-pb-intro-img.is-on .dv-smas-zoom{transform:scale(1.04)}
/* 팝아웃(2026-09-30 사용자 「스마스층이 pop out 되는 느낌」): 띠 사본(clip-path)+윤곽+점을 .dv-smas-pop 에 묶어 띠 중심에서 7% 키우고 2.2% 위로 띄우며 차콜 그림자를 깐다.
   drop-shadow 는 부모(.dv-smas-pop)에 걸어야 clip-path 로 잘린 모양대로 그림자가 진다(사본 자체에 걸면 clip 에 같이 잘린다). 원본 사진의 띠는 그 자리에 남아 「한 겹 들어 올린」 느낌 */
.dv-pb--sub33 .dv-smas-pop{position:absolute;inset:0;transform-origin:50% 75%;filter:drop-shadow(0 0 0 rgba(47,43,40,0));transition:transform 1.3s var(--dv-ease) .45s,filter 1.3s var(--dv-ease) .45s}
.dv-pb--sub33 .dv-pb-intro-img.is-on .dv-smas-pop{transform:translateY(-2.2%) scale(1.07);filter:drop-shadow(0 12px 16px rgba(47,43,40,.4))}
.dv-pb--sub33 .dv-smas-focus{clip-path:polygon(20% 66.6%,32.5% 73.6%,80.6% 69.2%,80.6% 76.6%,32.5% 81.6%,20% 72.6%)}
.dv-pb--sub33 .dv-smas-dot{position:absolute;left:20%;top:69.6%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border:2px solid #FCFAF7;box-sizing:content-box;border-radius:50%;background:var(--dv-olive-dp);box-shadow:0 0 0 3px rgba(166,181,93,.3);opacity:0;transition:opacity .5s var(--dv-ease) 1.3s}
.dv-pb--sub33 .dv-pb-intro-img.is-on .dv-smas-dot{opacity:1}
.dv-pb--sub33 .dv-smas-line,.dv-pb--sub33 .dv-smas-callout{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none}
.dv-pb--sub33 .dv-smas svg path{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1400px;stroke-dashoffset:1400px}   /* non-scaling-stroke 는 대시를 화면 px 로 재므로 pathLength 1 기준 「1」은 1px 점선이 된다 → 둘레(최대 ≈1,100px)보다 긴 px 값으로 */
.dv-pb--sub33 .dv-smas-lead{stroke-dasharray:320px;stroke-dashoffset:320px}
.dv-pb--sub33 .dv-smas-glow{stroke:rgba(166,181,93,.5);stroke-width:10}   /* 2026-09-30 「선이 더 확실히」: 글로우 7→10, 선 1.6→2.6(올리브다크), 흰 테두리 한 겹 */
.dv-pb--sub33 .dv-smas-stroke{stroke:var(--dv-olive-dp);stroke-width:2.6;paint-order:stroke;filter:drop-shadow(0 0 1.5px rgba(252,250,247,.9))}
.dv-pb--sub33 .dv-pb-intro-img.is-on .dv-smas svg path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--dv-ease) .5s}
.dv-pb--sub33 .dv-pb-intro-img.is-on .dv-smas-lead{transition-delay:1.2s;transition-duration:.6s}
.dv-pb--sub33 .dv-smas-label{position:absolute;left:1.5%;top:57%;transform:translateY(calc(-100% - 3px));padding:6px 14px;border-radius:7px;background:rgba(252,250,247,.96);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--dv-olive-ink);box-shadow:0 0 0 1px rgba(127,142,69,.35),0 4px 14px rgba(127,142,69,.32),0 10px 28px rgba(127,142,69,.18);white-space:nowrap;opacity:0;translate:0 6px;transition:opacity .6s var(--dv-ease) 1.5s,translate .6s var(--dv-ease) 1.5s}   /* 2026-09-30 사용자: 라벨 13→15px·여백 확대, 올리브 톤 그림자(테두리 1px + 두 겹 확산) */
.dv-pb--sub33 .dv-smas-lead{stroke:var(--dv-olive-dp);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 1.5px rgba(252,250,247,.9))}   /* 띠 오른쪽 끝 → 흰 배경으로 꺾이는 인출선(PC). 라벨은 그 수평 구간 위 */
.dv-pb--sub33 .dv-pb-intro-img.is-on .dv-smas-label{opacity:1;translate:0 0}
@media (max-width:767px){
  .dv-pb--sub33 .dv-smas-label{font-size:13px;padding:4px 10px}   /* 폰: 같은 자리(인출선 위), 크기만(11.5→13) */
}
@media (prefers-reduced-motion:reduce){
  .dv-pb--sub33 .dv-pb-intro-img:has(.dv-smas) > img,.dv-pb--sub33 .dv-smas-zoom,.dv-pb--sub33 .dv-smas-focus,.dv-pb--sub33 .dv-smas svg path,.dv-pb--sub33 .dv-smas-label,.dv-pb--sub33 .dv-smas::after{transition:none}
  .dv-pb--sub33 .dv-pb-intro-img.is-on > img,.dv-pb--sub33 .dv-pb-intro-img.is-on .dv-smas-zoom{transform:none}
  .dv-pb--sub33 .dv-smas-pop,.dv-pb--sub33 .dv-smas-dot{transition:none}
}

/* ---- Lifting Principle 인터랙티브 당김(2026-09-30 프리뷰 ?dvlift=1): 사본을 층 바닥까지 clip 하고 바닥 기준 scaleY → 위로 늘어난다. 화살표는 같이 올라간다 ---- */
.dv-pb--sub33 .dv-lp-lift{position:absolute;inset:0;z-index:1;pointer-events:none;transform-origin:50% 77.5%;clip-path:inset(0 0 22.5% 0);will-change:transform}
.dv-pb--sub33 .dv-lp-lift img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.dv-pb--sub33 .dv-pb-lp-col:not(.is-hi) .dv-lp-lift{transform-origin:50% 49%;clip-path:inset(0 0 51% 0)}
.dv-pb--sub33 .dv-pb-lp-col:not(.is-hi) .dv-lp-lift img{filter:grayscale(1) contrast(.9) brightness(1.04)}
.dv-pb--sub33 .has-lift .dv-pb-lp-svg{z-index:2}
.dv-pb--sub33 .has-lift .dv-pb-lp-labels{z-index:3}   /* 라벨은 올라오는 사본 위에 */
.dv-pb--sub33 .has-lift .dv-pb-lp-labels li{transition:top .12s linear}
.dv-pb--sub33 .has-lift .is-drag .dv-pb-lp-labels li{transition:none}
.dv-pb--sub33 .has-lift .dv-lp-num{transform-box:view-box;transition:transform .12s linear}
.dv-pb--sub33 .has-lift .is-drag .dv-lp-num{transition:none}
.dv-pb--sub33 .dv-lp-handle{position:absolute;left:41%;width:18%;top:0;height:80%;z-index:3;margin:0;padding:0;border:0;background:transparent;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
.dv-pb--sub33 .dv-pb-lp-col:not(.is-hi) .dv-lp-handle{height:32%}
.dv-pb--sub33 .dv-lp-handle:focus-visible{outline:2px solid var(--dv-olive);outline-offset:-2px;border-radius:8px}
.dv-pb--sub33 .is-drag .dv-lp-handle{cursor:grabbing}
.dv-pb--sub33 .has-lift .dv-lp-arrow{transform-box:view-box;transition:transform .12s linear}
.dv-pb--sub33 .is-drag .dv-lp-arrow{transition:none}
.dv-pb--sub33 .has-lift .dv-lp-lift{transition:transform .12s linear}
.dv-pb--sub33 .is-drag .dv-lp-lift{transition:none}
.dv-pb--sub33 .is-idle .dv-lp-arrow{animation:dv-lp-bob 1.6s ease-in-out infinite}   /* 끌 수 있다는 신호. 첫 조작에 멈춤 */
@keyframes dv-lp-bob{0%,100%{translate:0 0}50%{translate:0 -18px}}
.dv-pb--sub33 .is-lifted .dv-pb-lp-tag{background:var(--dv-olive);color:var(--dv-ink)}   /* 당긴 상태면 알약도 올리브 */
.dv-pb--sub33 .dv-pb-lp-col:not(.is-hi).is-lifted .dv-pb-lp-tag{background:var(--dv-beige)}

/* ---- Lifting Principle 화살표 비교 프리뷰(2026-09-30 ?dvarrow=b|c|ai): 3D 렌더 유지하며 그림에 감기게 ---- */
.dv-pb--sub33 .dv-lp-arrow--b .dv-lp-body{stroke:none;opacity:.94}
.dv-pb--sub33 .dv-lp-arrow--b .dv-lp-glow{fill:#FCFAF7;opacity:.75}   /* 흰 빛번짐 — 레퍼런스의 경계 처리 */
.dv-pb--sub33 .dv-lp-arrow--b .dv-lp-hl{stroke:rgba(255,255,255,.55);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}   /* 왼쪽 위 광원 하이라이트(렌더와 같은 방향) */

/* ---- DIVA Way A안(2026-10-01 프리뷰 ?dvway=a): 위→아래 한 줄기. 탭 가운데 → 「필요한 경우」 얇은 체크리스트 → 시술 방법 전체 폭 3칸(그림 약 400px) → 약속. 문구 무변화(번호·체크는 CSS) ---- */
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-top{display:flex;justify-content:center;margin-bottom:clamp(28px,3vw,44px)}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-tabs{justify-content:center}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-panel{display:flex;flex-direction:column;gap:clamp(36px,4vw,56px)}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-panel[hidden]{display:flex!important}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need{display:block;padding:clamp(24px,2.4vw,34px) clamp(24px,3vw,44px);border-radius:var(--dv-r);background:var(--dv-cream-2);color:var(--dv-ink)}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need-h{margin:0 0 14px;font-size:20px;color:var(--dv-ink)}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need-h em{color:var(--dv-olive-dp)}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;column-gap:clamp(24px,3vw,48px);row-gap:0}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need-list li{position:relative;display:block;padding:12px 0 12px 30px;border:0;border-top:1px solid rgba(47,43,40,.1);border-radius:0;background:none;backdrop-filter:none;text-align:left}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need-list li::before{content:"";position:absolute;left:2px;top:17px;width:14px;height:8px;border-left:2px solid var(--dv-olive-dp);border-bottom:2px solid var(--dv-olive-dp);transform:rotate(-45deg)}   /* 체크 */
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need-list .dv-no{display:none}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need-list strong{font-size:16px;font-weight:500;line-height:1.55;color:var(--dv-ink);text-wrap:balance}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-how{display:block}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-sub{margin:0 0 20px;font-size:20px}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-steps{counter-reset:dvstep;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px);margin:0}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-step{counter-increment:dvstep;text-align:left}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-step+.dv-pb-way-step::before{display:none}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-step-img{margin:0 0 18px;border-radius:var(--dv-r)}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-step-t{display:flex;align-items:baseline;gap:10px;font-size:18px}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-step-t::before{content:counter(dvstep,decimal-leading-zero);font-family:var(--dv-serif);font-style:italic;font-weight:500;font-size:20px;color:var(--dv-olive-dp)}   /* 단계 번호(장식, DOM 문구 없음) */
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-step p{margin-top:8px;text-align:left;text-wrap:pretty}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-dots{display:none}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-way-lead{margin:20px 0 0;text-align:left}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-callout{margin-top:clamp(28px,3vw,40px)}
@media (max-width:1023px){
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need{order:0}   /* 기본안의 「필요한 경우를 아래로」 해제 — A 는 모든 폭에서 같은 순서 */
}
@media (max-width:767px){
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-top{margin-bottom:24px}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-panel{gap:32px}
  /* 「필요한 경우」 폰: 세로 목록 대신 2×2 카드(2026-10-01 사용자 「리스트가 길다 → 4 grid」). 판은 좌우 20px 까지 넓혀 칸 폭을 확보(거터 58px 안이면 칸이 113px 뿐) */
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need{margin-inline:calc(20px - var(--dv-gut));padding:18px 14px 14px}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need-h{margin:0 0 12px 2px;font-size:18px}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need-list li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:calc(14px * 1.5 * 3 + 47px);padding:14px 12px 14px;border:0;border-radius:10px;background:#FCFAF7;box-shadow:0 1px 0 rgba(47,43,40,.05)}   /* 최소 3줄 높이 — 문장이 모두 2줄인 탭(중안면거상술)도 다른 탭과 같은 카드 크기(사용자 2026-10-01) */
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need-list li::before{position:static;flex:none;width:12px;height:7px;margin:4px 0 0 2px}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-need-list strong{font-size:14px;line-height:1.5;text-wrap:pretty}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-sub{font-size:18px;margin-bottom:14px}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-steps{display:flex;gap:14px;margin:0 calc(var(--dv-gut) * -1);padding:0 var(--dv-gut);scroll-padding-inline:var(--dv-gut)}   /* 화면 끝까지 흘려 다음 단계가 보이게(위 A 기본 규칙의 margin:0 을 다시 덮는다) */
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-step{flex:0 0 calc(100vw - var(--dv-gut) - 44px)}   /* 그림 약 290px, 다음 단계가 30px 보인다 */
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-step-t{font-size:17px}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-dots span{width:7px;height:7px;border-radius:50%;background:rgba(47,43,40,.18);transition:background .25s,width .25s}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-way-dots span.is-on{width:20px;border-radius:4px;background:var(--dv-olive-dp)}
  /* 약속 박스 폰: 두 줄 모두 한 줄에(2026-10-01 사용자 「줄바꿈 안 해도 될 정도로 작게」). 판을 위 「필요한 경우」처럼 좌우 20px 까지 넓히고 아이콘·간격을 줄여 글 폭 = 100vw-113px.
     글자 크기는 그 폭에 맞춰 계산(측정: 굵은 줄 15.4px·보조 줄 20.4px 너비/글자크기 1px) — 360 에서 15/11.9px, 390↑ 15/13px */
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-callout{margin-inline:calc(20px - var(--dv-gut));margin-top:28px;padding:14px 16px;gap:10px;align-items:center}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-callout svg{width:20px;height:20px}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-callout div{min-width:0;padding-left:10px}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-callout strong{font-size:min(15px,calc((100vw - 113px) / 15.8));white-space:nowrap;letter-spacing:-.02em}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-callout span{margin-top:2px;font-size:min(13px,calc((100vw - 113px) / 21.4));white-space:nowrap;letter-spacing:-.01em}
}
@media (max-width:340px){   /* 320 폭 등 아주 좁은 폰: 한 줄로 맞추면 10px 아래로 작아지므로 줄바꿈 허용 */
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-callout strong{font-size:14px;white-space:normal}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-callout span{font-size:12px;white-space:normal}
}

/* ==== sub3_3 레이아웃 2안 프리뷰(?dvlayout=2, 2026-10-01 사용자 「다크밴드 상담 버튼 삭제, 다 반영해서 프리뷰로」) — 문구는 그대로, 배치만.
   pages/sub3_3.php 의 $dv_l2 가 .is-l2 를 붙인다. 고지 이동은 inc/footer.php(DV_NOTE_DEFER)·skin/board/sub/list.skin.php. 백업 *.bak-l2 ==== */

/* (6) 머리글 리듬: 수술 정보·부위별·맞춤은 왼쪽 정렬(제목 왼쪽 / 리드 오른쪽 아래), Lifting·DIVA Way·FAQ 는 가운데 그대로 */
.dv-pb--sub33.is-l2 :is(.dv-pb-info,.dv-pb-types,.dv-pb-map) .dv-pb-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);column-gap:clamp(24px,4vw,64px);align-items:end;text-align:left}
.dv-pb--sub33.is-l2 :is(.dv-pb-info,.dv-pb-types,.dv-pb-map) .dv-pb-head .dv-kicker{grid-column:1;justify-self:start;margin-inline:0}
.dv-pb--sub33.is-l2 :is(.dv-pb-info,.dv-pb-types,.dv-pb-map) .dv-pb-head .dv-pb-h{grid-column:1;margin:0}
.dv-pb--sub33.is-l2 :is(.dv-pb-info,.dv-pb-types,.dv-pb-map) .dv-pb-head .dv-pb-lead{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:440px;margin:0;text-align:left;text-wrap:balance}
.dv-pb--sub33.is-l2 .dv-pb-info .dv-pb-note{text-align:left}

/* (1) 부위별 = 얼굴 일러스트(5:4) + 네 부위 면 + 인출선 끝 시술명 라벨 | 오른쪽 목록. 커서·포커스한 수술만 진하게(.dv-pb-zone[data-on]) */
.dv-pb--sub33.is-l2 .dv-pb-zone{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,3.4vw,56px);align-items:center}
.dv-pb--sub33.is-l2 .dv-pb-zone-fig{position:relative;margin:0;aspect-ratio:5/4;border-radius:var(--dv-r);overflow:hidden;background:#FFF6E9}
.dv-pb--sub33.is-l2 .dv-pb-zone-fig img,#bo_v_con .dv-pb--sub33.is-l2 .dv-pb-zone-fig img{position:absolute;inset:0;width:100%;height:100%!important;max-width:none;margin:0;object-fit:cover}
.dv-pb--sub33.is-l2 .dv-pb-zone-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dv-pb--sub33.is-l2 .dv-zone{cursor:pointer}
.dv-pb--sub33.is-l2 .dv-zone-area{fill:rgba(127,142,69,.2);stroke:none;transition:fill .3s,opacity .3s}   /* stroke:none — diva.css 의 `.dv-root svg{stroke:currentColor;stroke-width:1.5}`(아이콘용)가 상속돼 면마다 진한 테두리가 생기고, 흐림이 그걸 번진 테 로 만들었다 */   /* 가장자리를 흐린 면(외곽선 없음) — 점선 테두리는 그림 위에서 거칠어 보였다 */
.dv-pb--sub33.is-l2 .dv-zone-lead{stroke:var(--dv-olive-dp);stroke-width:1px;vector-effect:non-scaling-stroke;transition:opacity .3s}
.dv-pb--sub33.is-l2 .dv-zone-dot{fill:var(--dv-olive-dp);stroke:#FCFAF7;stroke-width:2px;vector-effect:non-scaling-stroke}
.dv-pb--sub33.is-l2 a.dv-zone-tag,#bo_v_con .dv-pb--sub33.is-l2 a.dv-zone-tag{position:absolute;z-index:1;transform:translateY(-50%);padding:5px 11px;border-radius:999px;background:#FCFAF7;box-shadow:0 0 0 1px rgba(127,142,69,.45),0 6px 16px -10px rgba(47,43,40,.35);color:var(--dv-ink);text-decoration:none;font-size:14.5px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;transition:background .25s,color .25s,opacity .25s}
.dv-pb--sub33.is-l2 a.dv-zone-tag.is-l{right:calc(75% + 4px)}
.dv-pb--sub33.is-l2 a.dv-zone-tag.is-r{left:calc(76% + 4px)}
.dv-pb--sub33.is-l2 a.dv-zone-tag:focus-visible{outline:2px solid var(--dv-olive-dp);outline-offset:2px}
.dv-pb--sub33.is-l2 .dv-pb-zone[data-on] .dv-zone{opacity:.25}
.dv-pb--sub33.is-l2 .dv-pb-zone[data-on] a.dv-zone-tag{opacity:.55}
.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="brow"] .dv-zone[data-zone="brow"],.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="mini"] .dv-zone[data-zone="mini"],.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="forehead"] .dv-zone[data-zone="forehead"],.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="mid"] .dv-zone[data-zone="mid"]{opacity:1}
.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="brow"] .dv-zone[data-zone="brow"] .dv-zone-area,.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="mini"] .dv-zone[data-zone="mini"] .dv-zone-area,.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="forehead"] .dv-zone[data-zone="forehead"] .dv-zone-area,.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="mid"] .dv-zone[data-zone="mid"] .dv-zone-area{fill:rgba(127,142,69,.46)}
.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="brow"] a.dv-zone-tag[data-zone="brow"],.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="mini"] a.dv-zone-tag[data-zone="mini"],.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="forehead"] a.dv-zone-tag[data-zone="forehead"],.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="mid"] a.dv-zone-tag[data-zone="mid"],#bo_v_con .dv-pb--sub33.is-l2 .dv-pb-zone[data-on="brow"] a.dv-zone-tag[data-zone="brow"],#bo_v_con .dv-pb--sub33.is-l2 .dv-pb-zone[data-on="mini"] a.dv-zone-tag[data-zone="mini"],#bo_v_con .dv-pb--sub33.is-l2 .dv-pb-zone[data-on="forehead"] a.dv-zone-tag[data-zone="forehead"],#bo_v_con .dv-pb--sub33.is-l2 .dv-pb-zone[data-on="mid"] a.dv-zone-tag[data-zone="mid"]{opacity:1;background:var(--dv-olive-dp);color:#FCFAF7}   /* #bo_v_con 판도 — 기본 알약 규칙이 ID 특이성이라 */
/* 목록: 헤어라인 행, 이름 + 설명 + 꺾쇠 원. 커서·포커스 행은 흰 판 */
.dv-pb--sub33.is-l2 .dv-pb-zone-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(47,43,40,.5)}
.dv-pb--sub33.is-l2 .dv-pb-zone-list li{border-bottom:1px solid rgba(47,43,40,.14)}
.dv-pb--sub33.is-l2 a.dv-pb-zone-item,#bo_v_con .dv-pb--sub33.is-l2 a.dv-pb-zone-item{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;gap:16px;padding:20px 14px;color:inherit;text-decoration:none;transition:background .25s}
.dv-pb--sub33.is-l2 .dv-pb-zone-item .dv-pb-type-t{margin:0;padding:0;font-size:18px;text-align:left}
.dv-pb--sub33.is-l2 .dv-pb-zone-item p{margin:6px 0 0;padding:0;text-align:left;text-wrap:pretty}
.dv-pb--sub33.is-l2 .dv-pb-zone-go{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(127,142,69,.45);border-radius:50%;color:var(--dv-olive-dp);transition:background .25s,color .25s,border-color .25s}
.dv-pb--sub33.is-l2 .dv-pb-zone-go svg{width:16px;height:16px}
.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="brow"] a.dv-pb-zone-item[data-zone="brow"],.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="mini"] a.dv-pb-zone-item[data-zone="mini"],.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="forehead"] a.dv-pb-zone-item[data-zone="forehead"],.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="mid"] a.dv-pb-zone-item[data-zone="mid"]{background:rgba(252,250,247,.75)}
.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="brow"] a.dv-pb-zone-item[data-zone="brow"] .dv-pb-zone-go,.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="mini"] a.dv-pb-zone-item[data-zone="mini"] .dv-pb-zone-go,.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="forehead"] a.dv-pb-zone-item[data-zone="forehead"] .dv-pb-zone-go,.dv-pb--sub33.is-l2 .dv-pb-zone[data-on="mid"] a.dv-pb-zone-item[data-zone="mid"] .dv-pb-zone-go{background:var(--dv-olive-dp);border-color:var(--dv-olive-dp);color:#FCFAF7}
.dv-pb--sub33.is-l2 a.dv-pb-zone-item:focus-visible{outline:2px solid var(--dv-olive-dp);outline-offset:-2px}
.dv-pb--sub33.is-l2 .dv-pb-zone.is-pick[data-on] .dv-zone{opacity:1}   /* ≤1023: 선택 안 한 부위도 PC 기본과 같은 은은한 올리브(.2)로(사용자 「선택하지 않은 부위에도 은은한 초록」), 선택 부위만 .46. 점·선은 선택 쪽만 진하게 */
.dv-pb--sub33.is-l2 .dv-pb-zone.is-pick[data-on] .dv-zone :is(.dv-zone-lead,.dv-zone-dot){opacity:.45;transition:opacity .3s}
.dv-pb--sub33.is-l2 .dv-pb-zone.is-pick[data-on="brow"] .dv-zone[data-zone="brow"] :is(.dv-zone-lead,.dv-zone-dot),.dv-pb--sub33.is-l2 .dv-pb-zone.is-pick[data-on="mini"] .dv-zone[data-zone="mini"] :is(.dv-zone-lead,.dv-zone-dot),.dv-pb--sub33.is-l2 .dv-pb-zone.is-pick[data-on="forehead"] .dv-zone[data-zone="forehead"] :is(.dv-zone-lead,.dv-zone-dot),.dv-pb--sub33.is-l2 .dv-pb-zone.is-pick[data-on="mid"] .dv-zone[data-zone="mid"] :is(.dv-zone-lead,.dv-zone-dot){opacity:1}
.dv-pb--sub33.is-l2 .dv-pb-zone.is-pick .dv-pb-zone-list{display:grid}   /* ≤1023 선택 모드(JS 가 붙임): 네 글을 한 칸에 겹쳐 가장 긴 글 높이로, 선택한 글만 보이게 */
.dv-pb--sub33.is-l2 .dv-pb-zone.is-pick .dv-pb-zone-list li{grid-area:1 / 1;transition:opacity .3s}
.dv-pb--sub33.is-l2 .dv-pb-zone.is-pick .dv-pb-zone-list li:not(.is-sel){visibility:hidden;opacity:0}
.dv-pb--sub33.is-l2 .dv-pb-zone.is-pick a.dv-pb-zone-item,#bo_v_con .dv-pb--sub33.is-l2 .dv-pb-zone.is-pick a.dv-pb-zone-item{padding:18px 16px}   /* 선택 글 한 줄만 흰 판으로 보이니 안쪽 여백 */

/* (3) 맞춤거상술: 얼굴 맵 단독 와이드 판(사진 가장자리 색으로 좌우를 채우고 사진 양끝은 페이드) + 특징 4 를 아래 한 줄 헤어라인 행으로 */
.dv-pb--sub33.is-l2 .dv-pb-map-grid{grid-template-columns:minmax(0,1fr);gap:clamp(32px,3.6vw,52px)}
.dv-pb--sub33.is-l2 .dv-pb-map-fig{aspect-ratio:auto;height:clamp(460px,44vw,640px);background:linear-gradient(180deg,#C2BBB2 0%,#C8C1B8 10%,#CAC3BB 25%,#CBC2BA 50%,#C9C0B7 75%,#C6BDB4 90%,#C3BAB2 100%)}   /* 판 색 = facemap.jpg 좌우 끝 60px 의 높이별 평균 — 사진 양끝 페이드와 이음매 없이 */
.dv-pb--sub33.is-l2 .dv-pb-map-stage{position:relative;height:100%;aspect-ratio:1400/1045;margin-inline:auto}
.dv-pb--sub33.is-l2 .dv-pb-map-stage img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.dv-pb--sub33.is-l2 .dv-pb-map-labels{--len:clamp(70px,8vw,130px)}
.dv-pb--sub33.is-l2 .dv-pb-map-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid rgba(47,43,40,.55)}
.dv-pb--sub33.is-l2 .dv-pb-map-cards li,.dv-pb--sub33.is-l2 .dv-pb-map-cards li:first-child{justify-content:flex-start;padding:24px clamp(18px,2vw,30px) 6px;border:0;border-left:1px solid var(--dv-line);border-radius:0;background:none;text-align:left}
.dv-pb--sub33.is-l2 .dv-pb-map-cards li:first-child{border-left:0;padding-left:0}
.dv-pb--sub33.is-l2 .dv-pb-map-cards li:first-child strong{color:var(--dv-ink)}
.dv-pb--sub33.is-l2 .dv-pb-map-cards .dv-no{margin-bottom:12px}
.dv-pb--sub33.is-l2 .dv-pb-map-cards p{text-wrap:pretty}

/* 맞춤거상술 「고민 → 맞춤 조합」(?dvcl=2 프리뷰): 왼쪽 고민 확대 카드 3×2(여러 개 선택) | 오른쪽 「맞춤 조합」 판(맞는 수술만, 해당 고민 태그). ≤1023 판은 아래 */
.dv-pb--sub33.is-l2 .dv-pb-cl{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,48px);align-items:start}
.dv-pb--sub33.is-l2 .dv-pb-cl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.dv-pb--sub33.is-l2 .dv-pb-cl-grid li{display:flex}   /* 같은 줄 카드 높이 맞춤(이름이 두 줄인 카드가 있어도) */
.dv-pb--sub33.is-l2 .dv-cl-q{position:relative;display:block;flex:1;width:100%;border-radius:var(--dv-r);background:#FCFAF7;box-shadow:0 1px 0 rgba(47,43,40,.05);overflow:hidden;text-align:left;transition:box-shadow .25s}
.dv-pb--sub33.is-l2 .dv-cl-img{display:block;aspect-ratio:1/1;overflow:hidden}
.dv-pb--sub33.is-l2 .dv-cl-img img,#bo_v_con .dv-pb--sub33.is-l2 .dv-cl-img img{display:block;width:100%;height:100%!important;max-width:none;margin:0;object-fit:cover;transition:transform .6s var(--dv-ease)}
.dv-pb--sub33.is-l2 .dv-cl-t{display:block;padding:12px 14px 14px;font-size:15.5px;font-weight:700;letter-spacing:-.02em;color:var(--dv-ink);transition:color .25s}
.dv-pb--sub33.is-l2 .dv-cl-ck{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(252,250,247,.88);box-shadow:0 0 0 1px rgba(47,43,40,.16);color:rgba(47,43,40,.28);transition:background .25s,color .25s,box-shadow .25s}
.dv-pb--sub33.is-l2 .dv-cl-ck svg{width:16px;height:16px}
.dv-pb--sub33.is-l2 .dv-cl-q:hover{box-shadow:0 16px 30px -20px rgba(47,43,40,.5)}
.dv-pb--sub33.is-l2 .dv-cl-q:hover .dv-cl-img img{transform:scale(1.04)}
.dv-pb--sub33.is-l2 .dv-cl-q[aria-pressed="true"]{box-shadow:0 0 0 2px var(--dv-olive-dp),0 16px 30px -20px rgba(47,43,40,.5)}
.dv-pb--sub33.is-l2 .dv-cl-q[aria-pressed="true"] .dv-cl-ck{background:var(--dv-olive-dp);box-shadow:none;color:#FCFAF7}
.dv-pb--sub33.is-l2 .dv-cl-q[aria-pressed="true"] .dv-cl-t{color:var(--dv-olive-ink)}
.dv-pb--sub33.is-l2 .dv-cl-q:focus-visible{outline:2px solid var(--dv-olive-dp);outline-offset:3px}
.dv-pb--sub33.is-l2 .dv-pb-cl-res{position:sticky;top:calc(var(--dv-hdr, 88px) + 64px);padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,30px);border-radius:var(--dv-r);background:#FCFAF7;box-shadow:0 20px 44px -30px rgba(47,43,40,.4)}
.dv-pb--sub33.is-l2 .dv-pb-cl-h{margin:0 0 10px;font-family:var(--dv-serif);font-size:clamp(22px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--dv-ink)}
.dv-pb--sub33.is-l2 .dv-pb-cl-list{list-style:none;margin:0;padding:0}
.dv-pb--sub33.is-l2 .dv-pb-cl-list li{border-top:1px solid var(--dv-line)}
.dv-pb--sub33.is-l2 a.dv-pb-cl-item,#bo_v_con .dv-pb--sub33.is-l2 a.dv-pb-cl-item{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;gap:14px;padding:16px 0;color:inherit;text-decoration:none}
.dv-pb--sub33.is-l2 .dv-pb-cl-item strong{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--dv-ink)}
.dv-pb--sub33.is-l2 .dv-pb-cl-item p{margin:6px 0 0;font-size:14.5px;line-height:1.6;letter-spacing:-.01em;color:var(--dv-ink-2);text-wrap:pretty}
.dv-pb--sub33.is-l2 .dv-pb-cl-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.dv-pb--sub33.is-l2 .dv-pb-cl-tags:empty{display:none}
.dv-pb--sub33.is-l2 .dv-pb-cl-tags span{padding:2px 9px;border-radius:999px;background:var(--dv-olive-soft);color:var(--dv-olive-ink);font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.dv-pb--sub33.is-l2 .dv-pb-cl-list li.is-on strong{color:var(--dv-olive-ink)}
.dv-pb--sub33.is-l2 .dv-pb-cl-list li.is-on .dv-pb-zone-go,.dv-pb--sub33.is-l2 a.dv-pb-cl-item:hover .dv-pb-zone-go{background:var(--dv-olive-dp);border-color:var(--dv-olive-dp);color:#FCFAF7}
.dv-pb--sub33.is-l2 a.dv-pb-cl-item:focus-visible{outline:2px solid var(--dv-olive-dp);outline-offset:2px}

/* 퍼즐(?dvcl=3 프리뷰): [고민 카드 | 네 조각 얼굴] / 아래 맞춤 조합(가로 칸). 맞는 조각만 제자리·원색, 나머지는 살짝 벗어나 흐리게, 넷 다 맞으면 이음매가 사라짐 */
.dv-pb--sub33.is-l2 .dv-pb-cl.is-pz{grid-template-columns:minmax(0,6fr) minmax(0,4.4fr);grid-template-areas:"q pz" "res res";align-items:center;row-gap:clamp(28px,3vw,44px)}
.dv-pb--sub33.is-l2 .dv-pb-cl.is-pz .dv-pb-cl-grid{grid-area:q}
.dv-pb--sub33.is-l2 .dv-pb-cl.is-pz .dv-pb-cl-res{grid-area:res;position:static}
.dv-pb--sub33.is-l2 .dv-pb-cl.is-pz .dv-pb-cl-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));column-gap:30px}
.dv-pb--sub33.is-l2 .dv-pz{grid-area:pz;position:relative;margin:0;aspect-ratio:1/1;border-radius:var(--dv-r);background:#E8DECD;box-shadow:inset 0 2px 10px rgba(47,43,40,.08)}
.dv-pb--sub33.is-l2 .dv-pz-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;border-radius:var(--dv-r)}
.dv-pb--sub33.is-l2 .dv-pz-p{transform:var(--pz-t);transform-box:fill-box;transform-origin:center;filter:url(#dv-pz-mute);opacity:.82;transition:transform .8s cubic-bezier(.2,.9,.25,1.15),opacity .5s,filter .5s}
.dv-pb--sub33.is-l2 .dv-pz-p.is-on{transform:none;filter:none;opacity:1}
.dv-pb--sub33.is-l2 .dv-pz-edge{fill:none;stroke:#FCFAF7;stroke-width:2.5px;vector-effect:non-scaling-stroke;transition:opacity .6s .3s}
.dv-pb--sub33.is-l2 .dv-pz.is-complete .dv-pz-edge{opacity:0}
.dv-pb--sub33.is-l2 a.dv-pz-tag,#bo_v_con .dv-pb--sub33.is-l2 a.dv-pz-tag{position:absolute;z-index:1;transform:translateY(-50%);padding:5px 11px;border-radius:999px;background:#FCFAF7;box-shadow:0 0 0 1px rgba(47,43,40,.14);color:var(--dv-muted);text-decoration:none;font-size:14px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}
.dv-pb--sub33.is-l2 a.dv-pz-tag.is-l{right:calc(78% + 4px)}
.dv-pb--sub33.is-l2 a.dv-pz-tag.is-r{left:calc(78% + 4px)}
.dv-pb--sub33.is-l2 a.dv-pz-tag.is-on,#bo_v_con .dv-pb--sub33.is-l2 a.dv-pz-tag.is-on{background:var(--dv-olive-dp);box-shadow:0 6px 16px -8px rgba(47,43,40,.45);color:#FCFAF7}
.dv-pb--sub33.is-l2 a.dv-pz-tag:focus-visible{outline:2px solid var(--dv-olive-dp);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.dv-pb--sub33.is-l2 .dv-pz-p{transition:none}}

/* (5) Doctor's Insight: 큰 포스터 2장 → 작은 썸네일 + 제목 목록(제목은 썸네일 오른쪽으로) */
.dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi{--tw:clamp(150px,13.5vw,196px)}
.dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi .dv-relb-main{aspect-ratio:auto;display:flex;align-items:center;height:calc(var(--tw) * 9 / 16);padding:0 0 0 calc(var(--tw) + 20px);background:none;border-radius:0;overflow:visible;color:var(--dv-ink)}
.dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi .dv-relb-img,#bo_v_con .dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi .dv-relb-img{right:auto;width:var(--tw);border-radius:10px}
.dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi .dv-relb-main:hover .dv-relb-img{transform:none}
.dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi .dv-relb-shade{right:auto;width:var(--tw);border-radius:10px;background:rgba(47,43,40,.28)}
.dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi .dv-relb-play{left:calc(var(--tw) / 2);top:50%;width:40px;height:40px;margin:-20px 0 0 -20px}
.dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi .dv-relb-play svg{width:16px;height:16px}
.dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi .dv-relb-cap{position:static;padding:0}
.dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi .dv-relb-t{font-size:clamp(16px,1.2vw,18px);line-height:1.45;color:var(--dv-ink)}
.dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi .dv-relb-chan{margin-top:22px}
.dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi .dv-relb-main:hover .dv-relb-t{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(47,43,40,.35)}

/* (4) 고지: 상담 밴드 뒤(푸터 바로 위) 한 덩어리. 원칙 밴드와 상담 밴드 사이의 게시판 스킨 여백·선은 없앤다 */
.dv-legal-foot{background:var(--dv-cream);border-top:1px solid var(--dv-line);padding:clamp(20px,2.4vw,30px) 0}
.dv-legal-foot .dv-pb-note--legal{max-width:760px;margin:0 auto;padding:0;text-wrap:balance}
.dv-legal-foot .dv-pb-note--legal+.dv-pb-note--legal{margin-top:4px}
body:has(.dv-pb--sub33.is-l2) .dv-cta-band{border-top:0}
body:has(.dv-pb--sub33.is-l2) #dv-page-body .h40,body:has(.dv-pb--sub33.is-l2) #dv-page-body .h20{display:none}
body:has(.dv-pb--sub33.is-l2) #dv-page-body .tbl_wrap{margin-bottom:0}   /* 게시판 스킨 표 래퍼의 10px — 원칙 밴드와 상담 밴드 사이에 흰 띠로 보였다 */

/* (2·증상 → 수술) 맵 부위 라벨 = 버튼, 맵 아래쪽에 수술 칩 4개(PC 는 맵 위에 겹친 반투명 띠, 폰은 맵 아래 2×2). 짝은 pages/sub3_3.php $dv_map 다섯째 값 */
.dv-pb--sub33.is-l2 .dv-pb-map-pick{position:relative}
.dv-pb--sub33.is-l2 .dv-map-z{position:static;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.dv-pb--sub33.is-l2 .dv-map-z span{cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.dv-pb--sub33.is-l2 .dv-map-z span::after{content:"";position:absolute;inset:-8px -6px}   /* 누르는 영역을 알약보다 넓게 */
.dv-pb--sub33.is-l2 .dv-map-z:hover span{background:#FCFAF7;box-shadow:0 0 0 1px var(--dv-olive-dp)}
.dv-pb--sub33.is-l2 .dv-map-z:focus-visible span{outline:2px solid var(--dv-olive-dp);outline-offset:2px}
.dv-pb--sub33.is-l2 .dv-pb-map-labels li{transition:opacity .25s,box-shadow .25s}
.dv-pb--sub33.is-l2 .dv-pb-map-labels li.is-on{box-shadow:0 0 0 5px rgba(127,142,69,.35)}
.dv-pb--sub33.is-l2 .dv-pb-map-labels li.is-on span{background:var(--dv-olive-dp);color:#FCFAF7}
.dv-pb--sub33.is-l2 .dv-pb-map-labels li.is-hint span{box-shadow:0 0 0 1.5px var(--dv-olive-dp)}
.dv-pb--sub33.is-l2 .dv-pb-map-pick.has-pick .dv-pb-map-labels li:not(.is-on):not(.is-hint){opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .dv-pb--sub33.is-l2 .dv-pb-map-pick:not(.is-used) .dv-pb-map-labels li::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--dv-olive-dp);animation:dvMapPulse 2.4s ease-out infinite}
}
@keyframes dvMapPulse{0%{transform:scale(.6);opacity:.9}70%{transform:scale(2.2);opacity:0}100%{transform:scale(2.2);opacity:0}}
.dv-pb--sub33.is-l2 .dv-map-pros{position:absolute;left:50%;bottom:clamp(16px,2vw,28px);z-index:2;display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(252,250,247,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 30px -16px rgba(47,43,40,.4);transform:translateX(-50%)}
.dv-pb--sub33.is-l2 a.dv-map-pro,#bo_v_con .dv-pb--sub33.is-l2 a.dv-map-pro{display:flex;align-items:center;gap:10px;padding:4px 16px 4px 4px;border-radius:999px;color:var(--dv-ink);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;transition:background .25s,color .25s,opacity .25s}
.dv-pb--sub33.is-l2 .dv-map-pro img,#bo_v_con .dv-pb--sub33.is-l2 .dv-map-pro img{flex:none;width:34px;height:34px!important;max-width:none;margin:0;border-radius:50%;object-fit:cover;object-position:50% 22%}
.dv-pb--sub33.is-l2 a.dv-map-pro:hover,.dv-pb--sub33.is-l2 a.dv-map-pro:focus-visible{background:#fff}
.dv-pb--sub33.is-l2 a.dv-map-pro:focus-visible{outline:2px solid var(--dv-olive-dp);outline-offset:1px}
.dv-pb--sub33.is-l2 a.dv-map-pro.is-on,#bo_v_con .dv-pb--sub33.is-l2 a.dv-map-pro.is-on{background:var(--dv-olive-dp);color:#FCFAF7}
.dv-pb--sub33.is-l2 a.dv-map-pro.is-off{opacity:.4}
/* 「내 조합」(?dvcombo=1 프리뷰): 칩 썸네일 모서리에 해당 증상 수, 맵 오른쪽 위 × = 모두 해제 */
.dv-pb--sub33.is-l2 .dv-pb-map-pick.is-combo .dv-pb-map-fig{background:linear-gradient(180deg,#C5BAB4 0%,#CAC0B7 10%,#CCC1BB 25%,#CDC0B8 50%,#CABDB5 75%,#C7BAB2 90%,#C3B8B1 100%)}   /* facemap-age.jpg 좌우 끝 60px 높이별 평균 */
.dv-pb--sub33.is-l2 a.dv-map-pro{position:relative}
.dv-pb--sub33.is-l2 .dv-map-pro-n{position:absolute;left:25px;top:-4px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--dv-olive-dp);box-shadow:0 0 0 2px #FCFAF7;color:#FCFAF7;font-size:11.5px;font-weight:700;font-style:normal;line-height:1}
.dv-pb--sub33.is-l2 a.dv-map-pro.is-on .dv-map-pro-n{background:#FCFAF7;box-shadow:0 0 0 2px var(--dv-olive-dp);color:var(--dv-olive-ink)}
.dv-pb--sub33.is-l2 .dv-map-reset{position:absolute;top:14px;right:14px;z-index:3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(252,250,247,.88);box-shadow:0 0 0 1px rgba(47,43,40,.12),0 8px 18px -10px rgba(47,43,40,.45);color:var(--dv-ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s}
.dv-pb--sub33.is-l2 .dv-map-reset:hover{background:#fff}
.dv-pb--sub33.is-l2 .dv-map-reset:focus-visible{outline:2px solid var(--dv-olive-dp);outline-offset:2px}
.dv-pb--sub33.is-l2 .dv-map-reset svg{width:16px;height:16px}

@media (max-width:1023px){
  .dv-pb--sub33.is-l2 .dv-pb-zone{grid-template-columns:minmax(0,1fr)}
  .dv-pb--sub33.is-l2 .dv-pb-cl{grid-template-columns:minmax(0,1fr)}
  .dv-pb--sub33.is-l2 .dv-pb-cl-res{position:static}
  .dv-pb--sub33.is-l2 .dv-pb-cl.is-pz{grid-template-columns:minmax(0,1fr);grid-template-areas:"q" "pz" "res"}
  .dv-pb--sub33.is-l2 .dv-pz{width:min(460px,72vw);justify-self:center}
  .dv-pb--sub33.is-l2 .dv-pb-map-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-pb--sub33.is-l2 .dv-pb-map-cards li:nth-child(odd){border-left:0;padding-left:0}
  .dv-pb--sub33.is-l2 .dv-pb-map-cards li:nth-child(n+3){border-top:1px solid var(--dv-line);margin-top:18px}
  .dv-pb--sub33.is-l2 a.dv-map-pro,#bo_v_con .dv-pb--sub33.is-l2 a.dv-map-pro{gap:8px;padding-right:12px;font-size:13.5px}
  .dv-pb--sub33.is-l2 .dv-map-pro img,#bo_v_con .dv-pb--sub33.is-l2 .dv-map-pro img{width:30px;height:30px!important}
}
@media (max-width:767px){
  .dv-pb--sub33.is-l2 :is(.dv-pb-info,.dv-pb-types,.dv-pb-map) .dv-pb-head{display:block}
  .dv-pb--sub33.is-l2 :is(.dv-pb-info,.dv-pb-types,.dv-pb-map) .dv-pb-head .dv-pb-lead{margin-top:12px;max-width:none}
  /* 부위별: 그림 위(좌우 20px 까지 넓게) → 목록 아래 */
  .dv-pb--sub33.is-l2 .dv-pb-zone{grid-template-columns:minmax(0,1fr);gap:22px}
  .dv-pb--sub33.is-l2 .dv-pb-zone-fig{margin-inline:calc(20px - var(--dv-gut))}
  .dv-pb--sub33.is-l2 a.dv-zone-tag,#bo_v_con .dv-pb--sub33.is-l2 a.dv-zone-tag{padding:3px 7px;font-size:12px}
  .dv-pb--sub33.is-l2 a.dv-zone-tag.is-l{right:calc(75% + 2px)}
  .dv-pb--sub33.is-l2 a.dv-zone-tag.is-r{left:calc(76% + 2px)}
  .dv-pb--sub33.is-l2 a.dv-pb-zone-item,#bo_v_con .dv-pb--sub33.is-l2 a.dv-pb-zone-item{padding:16px 2px;gap:12px}
  .dv-pb--sub33.is-l2 .dv-pb-zone-item .dv-pb-type-t{font-size:17px}
  .dv-pb--sub33.is-l2 .dv-pb-zone.is-pick .dv-pb-zone-list{margin-inline:calc(20px - var(--dv-gut))}   /* 선택 글 판을 위 그림과 같은 폭으로 */
  /* 얼굴 맵: 폰은 원래 틀(1:1·4:5 + --sx 라벨 보정) 그대로 — 무대를 틀 전체로 */
  .dv-pb--sub33.is-l2 .dv-pb-map-fig{height:auto;aspect-ratio:1/1;background:none}
  .dv-pb--sub33.is-l2 .dv-pb-map-stage{position:absolute;inset:0;height:auto;aspect-ratio:auto}
  .dv-pb--sub33.is-l2 .dv-pb-map-stage img{-webkit-mask-image:none;mask-image:none}
  .dv-pb--sub33.is-l2 .dv-pb-map-labels{--len:28px}
  /* 특징 4: 번호 왼쪽 + 제목·설명 오른쪽 행 */
  .dv-pb--sub33.is-l2 .dv-pb-map-cards{grid-template-columns:minmax(0,1fr)}
  .dv-pb--sub33.is-l2 .dv-pb-map-cards li,.dv-pb--sub33.is-l2 .dv-pb-map-cards li:first-child,.dv-pb--sub33.is-l2 .dv-pb-map-cards li:nth-child(n+3){display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:6px;margin:0;padding:16px 0;border:0;border-bottom:1px solid var(--dv-line)}
  .dv-pb--sub33.is-l2 .dv-pb-map-cards .dv-no{grid-column:1;grid-row:1 / span 2;margin:2px 0 0}
  .dv-pb--sub33.is-l2 .dv-pb-map-cards strong,.dv-pb--sub33.is-l2 .dv-pb-map-cards p{grid-column:2}
  .dv-pb--sub33.is-l2 .dv-pb-map-cards p{margin-top:6px}
  .dv-pb--sub33.is-l2 .dv-pb-faq-feat--multi{--tw:128px}
  .dv-pb--sub33.is-l2 .dv-pb-cl{gap:20px}
  .dv-pb--sub33.is-l2 .dv-pb-cl-grid,.dv-pb--sub33.is-l2 .dv-pb-cl-res{margin-inline:calc(20px - var(--dv-gut))}   /* 카드·판을 좌우 20px 까지(카드 칸 ≈ 169px@390) */
  .dv-pb--sub33.is-l2 .dv-pb-cl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dv-pb--sub33.is-l2 .dv-cl-t{padding:10px 12px 12px;font-size:14.5px}
  .dv-pb--sub33.is-l2 .dv-cl-ck{top:8px;right:8px;width:26px;height:26px}
  .dv-pb--sub33.is-l2 .dv-pb-cl-res{padding:20px 18px}
  .dv-pb--sub33.is-l2 a.dv-pz-tag,#bo_v_con .dv-pb--sub33.is-l2 a.dv-pz-tag{padding:3px 8px;font-size:12px}
  .dv-pb--sub33.is-l2 .dv-map-pros{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px;padding:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transform:none}
  .dv-pb--sub33.is-l2 a.dv-map-pro,#bo_v_con .dv-pb--sub33.is-l2 a.dv-map-pro{padding:5px 10px 5px 5px;background:#FCFAF7;font-size:14px;box-shadow:0 1px 0 rgba(47,43,40,.05)}
}
@media (max-width:520px){
  .dv-pb--sub33.is-l2 .dv-pb-map-fig{aspect-ratio:4/5}
}

/* DIVA Way 약속 문구: 초록 판·아이콘·세로선 없이 글만 작게, 시술 방법 아래 가운데(2026-10-01 사용자 「초록색 칸 지우고 그냥 글만 작게」). 위 A안·폰 규칙(판 넓히기·nowrap 계산 크기)을 덮는다. 백업 page.css.bak-callout2 */
.dv-pb--sub33 .dv-pb-way--a .dv-pb-callout{display:block;margin:clamp(24px,2.6vw,36px) 0 0;padding:0;border-radius:0;background:none;text-align:left}   /* 가운데 → 왼쪽(같은 날 사용자 「왼쪽 정렬도」) — 위 단계 글(왼쪽 정렬)과 같은 선 */
.dv-pb--sub33 .dv-pb-way--a .dv-pb-callout svg{display:none}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-callout div{padding:0;border:0}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-callout strong{font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--dv-ink-2);white-space:normal}
.dv-pb--sub33 .dv-pb-way--a .dv-pb-callout span{margin-top:2px;font-size:13px;letter-spacing:-.01em;color:var(--dv-muted);white-space:normal;text-wrap:pretty}
@media (max-width:767px){
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-callout{margin:22px 0 0;padding:0}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-callout strong{font-size:13.5px;white-space:normal}
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-callout span{font-size:min(12.5px,calc((100vw - 2 * var(--dv-gut)) / 21.4));white-space:nowrap}   /* 사용자 이전 요청 「폰에서 줄바꿈 안 되게」: 글 폭 = 화면 − 거터×2, 21.4 = 측정한 줄 폭/글자 크기 → 360 에서 11.4px 한 줄 */
}
@media (max-width:340px){
  .dv-pb--sub33 .dv-pb-way--a .dv-pb-callout span{font-size:12px;white-space:normal}   /* 아주 좁은 폰은 11px 밑으로 내려가니 줄바꿈 허용 */
}

/* 맞춤거상술 「사진 한 장 + 번호 목록」(?dvcl=4 프리뷰, 2026-10-01): [세로 사진 + 번호 표식 | 01~06 고민·맞는 수술]. 폰은 사진 위·목록 아래. 백업 page.css.bak-cl4 */
.dv-pb--sub33 .dv-pb-c4{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:center}
.dv-pb--sub33 .dv-pb-c4-fig{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--ui-r-media,20px);overflow:hidden;background:#CDC0B8}
.dv-pb--sub33 .dv-pb-c4-fig img,#bo_v_con .dv-pb--sub33 .dv-pb-c4-fig img{position:absolute;inset:0;width:100%;height:100%!important;max-width:none!important;margin:0!important;object-fit:cover}
.dv-pb--sub33 .dv-c4-pin{position:absolute;z-index:1;display:grid;place-items:center;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(252,250,247,.92);box-shadow:0 0 0 1px rgba(47,43,40,.12),0 4px 10px -4px rgba(47,43,40,.35);color:var(--dv-ink);font-size:12px;font-weight:600;line-height:1;transition:background .25s,color .25s,opacity .25s,transform .25s}
.dv-pb--sub33 .dv-pb-c4.has-on .dv-c4-pin{opacity:.45}
.dv-pb--sub33 .dv-pb-c4 .dv-c4-pin.is-on{opacity:1;background:var(--dv-olive-dp);color:#FCFAF7;transform:scale(1.15)}
.dv-pb--sub33 .dv-pb-c4-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(47,43,40,.5)}
.dv-pb--sub33 .dv-pb-c4-list li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;padding:18px 6px;border-bottom:1px solid rgba(47,43,40,.12);transition:background .25s}
.dv-pb--sub33 .dv-pb-c4-list li.is-on{background:rgba(252,250,247,.55)}
.dv-pb--sub33 .dv-c4-no{font-family:var(--dv-serif);font-style:italic;font-size:16px;color:var(--dv-muted)}
.dv-pb--sub33 .dv-pb-c4-list li.is-on .dv-c4-no{color:var(--dv-olive-dp)}
.dv-pb--sub33 .dv-c4-t{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--dv-ink)}
.dv-pb--sub33 .dv-c4-pro{grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:5px;font-size:14px;letter-spacing:-.01em}
.dv-pb--sub33 .dv-c4-pro i{font-style:normal;color:rgba(47,43,40,.35)}
.dv-pb--sub33 .dv-c4-pro a,#bo_v_con .dv-pb--sub33 .dv-c4-pro a{color:var(--dv-ink-2);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s,color .25s}
.dv-pb--sub33 .dv-c4-pro a::after{content:" →";color:var(--dv-olive-dp)}
.dv-pb--sub33 .dv-c4-pro a:hover,.dv-pb--sub33 .dv-c4-pro a:focus-visible,#bo_v_con .dv-pb--sub33 .dv-c4-pro a:hover{color:var(--dv-ink);background-size:100% 1px;outline:none}
@media (max-width:767px){
  .dv-pb--sub33 .dv-pb-c4{grid-template-columns:minmax(0,1fr);gap:24px}
  .dv-pb--sub33 .dv-pb-c4-fig{margin-inline:calc(20px - var(--dv-gut))}
  .dv-pb--sub33 .dv-c4-pin{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:11.5px}
  .dv-pb--sub33 .dv-pb-c4-list li{grid-template-columns:36px minmax(0,1fr);padding:15px 2px}
  .dv-pb--sub33 .dv-c4-t{font-size:16px}
  .dv-pb--sub33 .dv-c4-pro{font-size:13.5px}
}
/* ?dvcl=4: 아래 특징 4 는 번호를 빼고(위 01~06 목록과 겹쳐 헷갈림), 폰에선 2×2 로 짧게 */
.dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c4) .dv-pb-map-cards{margin-top:clamp(12px,2vw,24px)}
.dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c4) .dv-pb-map-cards .dv-no{display:none}
@media (max-width:767px){
  .dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c4) .dv-pb-map-cards{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c4) .dv-pb-map-cards li,.dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c4) .dv-pb-map-cards li:first-child,.dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c4) .dv-pb-map-cards li:nth-child(n+3){display:block;padding:16px 0}
  .dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c4) .dv-pb-map-cards strong{font-size:15px}
  .dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c4) .dv-pb-map-cards p{margin-top:5px;font-size:13px;line-height:1.55}
}

/* ---- DIVA Way B안(2026-10-02 프리뷰 ?dvway=b — 사용자 「다 갈아엎고 정보만 킵, 완전 재구성」). 백업 page.css.bak-wayb · pages/sub3_3.php.bak-wayb
   탭 = 전체 폭 번호 인덱스(위 선, 고른 칸만 올리브 2px) · 패널 = [필요한 경우 체크 4 + 시술 방법 단계 3행(썸네일) | 그림 한 장 1:1] · 약속 두 줄은 글 칼럼 끝에 작게.
   ≤1023 한 칼럼: 필요한 경우 → 「시술 방법」 → 그림 → 단계 행. ≤767 은 탭 2×2, 체크 2×2, 패널을 좌우 20px 까지. 문구는 A 와 같은 문자열
   2026-10-02 「한 화면에 안 들어온다」(사용자 1900×883 에서 101px 넘침, 1366×650 은 292px) → ≥1024 는 체크 4 를 위 한 줄로, 아래 [단계 | 그림], 그림 크기를 화면 높이로(--wb-img). 백업 page.css.bak-wayfit
   2026-10-02 「탭과 체크가 다 가로 4칸이라 구분이 안 된다」 → ≥1024 탭 = 왼쪽 세로 목록(왼쪽 선 + 고른 것만 올리브 세로 막대·글자 조금 크게), 체크 = 2×2 표. ≤1023 탭 = 밑줄 한 줄(폰 2×2 탭 ↔ 2×2 체크도 같은 문제). 백업 *.bak-wayvnav
   2026-10-02 레퍼런스 흡수(_design/INSPIRATION.md): 움직임 토큰 2개(150/240ms)+곡선 1개, 탭 표시 막대 하나가 미끄러짐(글자 크기 애니메이션 삭제), 그림은 새 그림이 옛 그림 위로 .24s(겹침·밝아짐 없음, scale 삭제),
   hover 스타일은 마우스 기기만, 포커스 링 올리브다크(3.4:1), 진행 막대는 ≤1023 만(PC 는 썸네일 링이 같은 신호), 꺼진 썸네일 .7(채도 빼기 삭제). 백업 *.bak-wayinsp ---- */
.dv-pb--sub33 .dv-pb-way--b{--wb-d1:150ms;--wb-d2:240ms;--wb-ease:cubic-bezier(.23,1,.32,1)}   /* d1 = hover·색 / d2 = 교체·표시 막대 — 한 상호작용 안에서 시간이 제각각이던 것(.25/.3/.45/.5/.9s)을 둘로 */
.dv-pb--sub33 .dv-pb-way--b .dv-pb-h{text-wrap:balance}   /* 폰 「필요한 곳에, 정확한 / 리프팅」 외톨이 → 「필요한 곳에, / 정확한 리프팅」 */
.dv-pb--sub33 .dv-pb-way--b .dv-pb-way-top{display:block;margin:clamp(24px,2.6vw,40px) 0 clamp(24px,2.4vw,36px)}
.dv-pb--sub33 .dv-wb-tabs{position:relative;counter-reset:dvwbt;display:flex;gap:clamp(20px,3.2vw,36px);border-bottom:1px solid rgba(47,43,40,.16);overflow-x:auto;scrollbar-width:none}   /* 기본(≤1023) = 밑줄 탭 한 줄. ≥1024 는 아래 세로 목록 */
.dv-pb--sub33 .dv-wb-tabs::-webkit-scrollbar{display:none}
.dv-pb--sub33 .dv-wb-tabs.is-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.dv-pb--sub33 .dv-wb-tab{counter-increment:dvwbt;position:relative;flex:none;display:flex;align-items:baseline;gap:8px;min-height:48px;margin:0;padding:12px 0 10px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--dv-muted);font-family:var(--dv-ff);font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.025em;text-align:left;white-space:nowrap;cursor:pointer;transition:color var(--wb-d1) ease}
.dv-pb--sub33 .dv-wb-tab::before{content:counter(dvwbt,decimal-leading-zero);font-family:var(--dv-serif);font-style:italic;font-weight:400;font-size:14px;letter-spacing:0;color:inherit}
.dv-pb--sub33 .dv-wb-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--dv-olive-dp);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--wb-d2) var(--wb-ease)}   /* JS 없을 때만 보이는 탭별 밑줄(줄이 overflow 라 -1px 는 잘린다 → 밑선 바로 위) */
.dv-pb--sub33 .dv-wb-tabs.has-ind .dv-wb-tab::after{display:none}
.dv-pb--sub33 .dv-wb-ind{display:none}
.dv-pb--sub33 .dv-wb-tabs.has-ind .dv-wb-ind{display:block;position:absolute;left:0;bottom:0;width:100px;height:2px;background:var(--dv-olive-dp);transform-origin:0 0;pointer-events:none;transition:transform .3s var(--wb-ease)}   /* 100px 기준 막대를 scale 로 탭 폭/높이에 맞춘다(크기 속성은 안 움직임) */
.dv-pb--sub33 .dv-wb-tab[aria-selected="true"]{color:var(--dv-ink)}
.dv-pb--sub33 .dv-wb-tab[aria-selected="true"]::before{color:var(--dv-olive-dp)}
.dv-pb--sub33 .dv-wb-tab[aria-selected="true"]::after{transform:none}
.dv-pb--sub33 .dv-wb-tab:focus-visible{outline:2px solid var(--dv-olive-dp);outline-offset:4px}   /* 올리브 #A6B55D 는 크림 위 2.1:1 → 올리브다크 3.4:1 */
@media (hover:hover) and (pointer:fine){
  .dv-pb--sub33 .dv-wb-tab:hover{color:var(--dv-ink)}
  .dv-pb--sub33 .dv-wb-step:hover .dv-wb-th{opacity:.9}
}
.dv-pb--sub33 .dv-wb-panels{display:grid;grid-template-columns:minmax(0,1fr)}
.dv-pb--sub33 .dv-wb-panel{--wb-img:clamp(300px,calc(100vh - var(--dv-hdr) - 245px),580px);grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) min(var(--wb-img),50%);grid-template-areas:"need need" "how stage";grid-template-rows:auto auto;column-gap:clamp(40px,5vw,96px);row-gap:clamp(28px,2.6vw,40px);align-items:start}   /* 그림 = 화면 높이 − 헤더 − (체크 제목·2줄·여백 ≈ 230px + 여유 15px — 윈도 글꼴 높이 차; 탭은 옆 칼럼이라 높이 안 먹음), 300~580px · 패널 폭의 50% 까지 → 탭부터 그림 끝까지 한 화면 */
.dv-pb--sub33 .dv-wb-panel[hidden]{display:grid!important;visibility:hidden}   /* 한 칸에 겹쳐 가장 큰 패널 높이(diva.css [hidden]{display:none!important} 를 이기려면 !important) */
.dv-pb--sub33 .dv-wb-need{grid-area:need}
.dv-pb--sub33 .dv-wb-how{grid-area:how}
.dv-pb--sub33 .dv-wb-h{margin:0 0 14px;font-size:20px;font-weight:700;line-height:1.4;letter-spacing:-.03em;color:var(--dv-ink);text-wrap:balance}
.dv-pb--sub33 .dv-wb-h em{font-style:normal;color:var(--dv-olive-dp)}
.dv-pb--sub33 .dv-wb-checks{list-style:none;margin:0;padding:0;border-top:1px solid rgba(47,43,40,.5)}
.dv-pb--sub33 .dv-wb-checks li{position:relative;margin:0;padding:11px 0 11px 30px;border-bottom:1px solid rgba(47,43,40,.1);font-size:16px;font-weight:500;line-height:1.55;letter-spacing:-.02em;color:var(--dv-ink);text-wrap:pretty}
.dv-pb--sub33 .dv-wb-checks li::before{content:"";position:absolute;left:3px;top:18px;width:13px;height:7px;border-left:2px solid var(--dv-olive-dp);border-bottom:2px solid var(--dv-olive-dp);transform:rotate(-45deg)}
.dv-pb--sub33 .dv-wb-steps{list-style:none;margin:0;padding:0;counter-reset:dvwbs;border-top:1px solid rgba(47,43,40,.5)}
.dv-pb--sub33 .dv-wb-steps li{counter-increment:dvwbs;margin:0;border-bottom:1px solid rgba(47,43,40,.1)}
.dv-pb--sub33 .dv-wb-step{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;align-items:center;width:100%;margin:0;padding:11px 0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.dv-pb--sub33 .dv-wb-th{position:relative;display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#FBF3EA;opacity:.7;transition:opacity var(--wb-d1) ease,box-shadow var(--wb-d1) ease}   /* .5+채도 빼기는 「못 누르는 것」처럼 보였다 */
.dv-pb--sub33 .dv-wb-th img,#bo_v_con .dv-pb--sub33 .dv-wb-th img{position:absolute;inset:0;width:100%;height:100%!important;max-width:none!important;margin:0!important;object-fit:cover}
.dv-pb--sub33 .dv-wb-tx{display:block;min-width:0}
.dv-pb--sub33 .dv-wb-st{display:flex;align-items:baseline;gap:10px;font-size:17px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:var(--dv-ink-2);transition:color var(--wb-d1) ease}
.dv-pb--sub33 .dv-wb-st::before{content:counter(dvwbs,decimal-leading-zero);font-family:var(--dv-serif);font-style:italic;font-weight:400;font-size:16px;letter-spacing:0;color:var(--dv-muted);transition:color var(--wb-d1) ease}
.dv-pb--sub33 .dv-wb-sd{display:block;margin-top:4px;font-size:15px;line-height:1.6;letter-spacing:-.01em;color:var(--dv-muted);text-wrap:pretty;transition:color var(--wb-d1) ease}
.dv-pb--sub33 .dv-wb-step.is-on .dv-wb-th{opacity:1;box-shadow:0 0 0 2px var(--dv-cream),0 0 0 3.5px var(--dv-olive-dp)}
.dv-pb--sub33 .dv-wb-step.is-on .dv-wb-st{color:var(--dv-ink)}
.dv-pb--sub33 .dv-wb-step.is-on .dv-wb-st::before{color:var(--dv-olive-dp)}
.dv-pb--sub33 .dv-wb-step.is-on .dv-wb-sd{color:var(--dv-ink-2)}
.dv-pb--sub33 .dv-wb-step:focus-visible{outline:2px solid var(--dv-olive-dp);outline-offset:2px}
.dv-pb--sub33 .dv-wb-lead{margin:18px 0 0;padding-left:14px;border-left:2px solid var(--dv-olive);font-size:15px;line-height:1.6;letter-spacing:-.01em;color:var(--dv-ink-2);text-wrap:pretty}
.dv-pb--sub33 .dv-wb-promise{margin:clamp(24px,2.4vw,32px) 0 0;font-size:14px;line-height:1.55}
.dv-pb--sub33 .dv-wb-promise strong{display:block;font-weight:600;letter-spacing:-.015em;color:var(--dv-ink-2)}
.dv-pb--sub33 .dv-wb-promise span{display:block;margin-top:2px;font-size:13px;letter-spacing:-.01em;color:var(--dv-muted)}
.dv-pb--sub33 .dv-wb-stage{grid-area:stage;margin:0}
.dv-pb--sub33 .dv-wb-imgs{position:relative;aspect-ratio:1/1;border-radius:var(--ui-r-media,20px);overflow:hidden;background:#FBF3EA;touch-action:pan-y}
.dv-pb--sub33 .dv-wb-imgs img,#bo_v_con .dv-pb--sub33 .dv-wb-imgs img{position:absolute;inset:0;width:100%;height:100%!important;max-width:none!important;margin:0!important;object-fit:cover}
.dv-pb--sub33 .dv-wb-imgs img{opacity:0;transition:opacity var(--wb-d2) var(--wb-ease)}   /* 투명도는 ID 없는 규칙에만 — #bo_v_con 판에 두면 아래 .is-on 을 이긴다 */
.dv-pb--sub33 .dv-wb-imgs img.was-on{opacity:1;z-index:0;transition:none}   /* 옛 그림은 아래에 그대로 */
.dv-pb--sub33 .dv-wb-imgs img.is-on{opacity:1;z-index:1}   /* 새 그림이 그 위로 페이드 — 바탕(크림)이 비쳐 밝아지는 순간이 없다 */
.dv-pb--sub33 .dv-wb-bars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px}
.dv-pb--sub33 .dv-wb-bars i{height:2px;border-radius:2px;background:rgba(47,43,40,.14);transition:background .3s}
.dv-pb--sub33 .dv-wb-bars i.is-on{background:var(--dv-olive-dp)}
@media (prefers-reduced-motion:reduce){   /* 끄지 않고 짧은 페이드만 — 바뀐 걸 알 수 있게 */
  .dv-pb--sub33 .dv-wb-imgs img{transition:opacity .15s linear}
  .dv-pb--sub33 .dv-wb-tab::after,.dv-pb--sub33 .dv-wb-tabs.has-ind .dv-wb-ind{transition:none}
}
@media (min-width:1024px){   /* [세로 탭 | 패널]. 패널 = 「필요한 경우」 2×2 표 + 약속 두 줄은 그 제목 줄 오른쪽 끝(「필요한」 이 같은 말) → 아래 [단계 | 그림] */
  .dv-pb--sub33 .dv-wb-body{display:grid;grid-template-columns:clamp(150px,15vw,220px) minmax(0,1fr);column-gap:clamp(32px,4vw,64px);align-items:start;margin-top:clamp(28px,3vw,48px)}
  .dv-pb--sub33 .dv-pb-way--b .dv-pb-way-top{margin:0}
  .dv-pb--sub33 .dv-wb-tabs{flex-direction:column;gap:0;border-bottom:0;border-left:1px solid rgba(47,43,40,.16);overflow:visible}
  .dv-pb--sub33 .dv-wb-tab{gap:10px;min-height:0;padding:13px 0 13px clamp(16px,1.4vw,22px);font-size:clamp(16px,1.2vw,18px);white-space:normal}
  .dv-pb--sub33 .dv-wb-tab::after{left:-1px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:scaleY(0);transform-origin:50% 0}
  .dv-pb--sub33 .dv-wb-tabs.has-ind .dv-wb-ind{left:-1px;top:0;bottom:auto;width:2px;height:100px}
  .dv-pb--sub33 .dv-wb-bars{display:none}   /* PC 는 썸네일 링·번호색이 같은 신호 — 막대는 자동 재생 진행처럼 읽혔다. 폰은 스와이프 위치 표시로 유지 */
  .dv-pb--sub33 .dv-wb-need{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h p" "l l";column-gap:24px;align-items:end}
  .dv-pb--sub33 .dv-wb-need > .dv-wb-h{grid-area:h}
  .dv-pb--sub33 .dv-wb-need > .dv-wb-checks{grid-area:l}
  .dv-pb--sub33 .dv-wb-need > .dv-wb-promise{grid-area:p;margin:0 0 14px;text-align:right}
  .dv-pb--sub33 .dv-wb-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,48px)}
  .dv-pb--sub33 .dv-wb-checks li{padding:12px 0 12px 28px;font-size:15.5px;line-height:1.5}
  .dv-pb--sub33 .dv-wb-checks li::before{top:19px}
  .dv-pb--sub33 .dv-wb-panel{align-content:start}   /* 겹친 패널이 가장 큰 패널 높이로 늘어날 때 행 사이가 벌어지지 않게 */
  .dv-pb--sub33 .dv-wb-how{align-self:stretch;display:flex;flex-direction:column}   /* 단계 목록을 그림 높이까지 — 시술 방법 위·마지막 선이 그림 위·아래와 맞는다(그림이 더 작은 낮은 화면에서는 글 높이 그대로) */
  .dv-pb--sub33 .dv-wb-steps{flex:1 1 auto;display:flex;flex-direction:column}
  .dv-pb--sub33 .dv-wb-steps li{flex:1 1 0;display:flex}
  .dv-pb--sub33 .dv-wb-step{align-content:center;grid-template-columns:clamp(52px,calc((100vh - 600px) / 3.5),88px) minmax(0,1fr)}   /* 썸네일은 화면 높이 따라(행이 그림 높이로 늘어나므로): 730px 이하 52 · 790 → 54 · 883 → 81 · 950 이상 88 */
}
@media (min-width:1024px) and (max-height:760px){   /* 낮은 화면(1366×768·1280×800·1536×864 노트북): 탭·간격만 줄여 탭부터 끝까지 한 화면 */
  .dv-pb--sub33 .dv-wb-body{margin-top:20px}
  .dv-pb--sub33 .dv-wb-tab{padding-block:10px}
  .dv-pb--sub33 .dv-wb-panel{row-gap:22px;--wb-img:clamp(280px,calc(100vh - var(--dv-hdr) - 214px),580px)}
  .dv-pb--sub33 .dv-wb-checks li{padding-block:9px}
  .dv-pb--sub33 .dv-wb-checks li::before{top:16px}
  .dv-pb--sub33 .dv-wb-h{margin-bottom:10px}
  .dv-pb--sub33 .dv-wb-need > .dv-wb-promise{margin-bottom:10px}
  .dv-pb--sub33 .dv-wb-step{padding:8px 0}
  .dv-pb--sub33 .dv-wb-lead{margin-top:12px}
}
@media (min-width:768px) and (max-width:1023px){
  .dv-pb--sub33 .dv-wb-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}   /* 태블릿: 체크 4 를 2열로(한 칼럼이면 줄마다 오른쪽이 빈다) */
}
@media (max-width:1023px){
  .dv-pb--sub33 .dv-wb-tab{gap:8px;font-size:16px}
  .dv-pb--sub33 .dv-wb-panel{display:flex;flex-direction:column;align-items:stretch;row-gap:0}   /* PC 의 row-gap 이 flex 에도 먹어 항목마다 28px 씩 벌어졌다 */
  .dv-pb--sub33 .dv-wb-panel[hidden]{display:flex!important}
  .dv-pb--sub33 .dv-wb-how{display:contents}
  .dv-pb--sub33 .dv-wb-need{display:contents}
  .dv-pb--sub33 .dv-wb-need > .dv-wb-h,.dv-pb--sub33 .dv-wb-checks{order:1}
  .dv-pb--sub33 .dv-wb-h--how{order:2;margin-top:40px}
  .dv-pb--sub33 .dv-wb-stage{order:3;width:min(100%,560px);margin-bottom:8px}
  .dv-pb--sub33 .dv-wb-steps{order:4;margin-top:6px;border-top:0}   /* 바로 위 진행 막대가 구분선 역할 — 선이 두 줄로 겹쳐 보였다 */
  .dv-pb--sub33 .dv-wb-lead{order:5}
  .dv-pb--sub33 .dv-wb-promise{order:6}
}
@media (max-width:767px){
  .dv-pb--sub33 .dv-pb-way--b .dv-pb-way-top{margin:24px calc(20px - var(--dv-gut)) 28px}
  .dv-pb--sub33 .dv-wb-tabs{gap:18px}
  .dv-pb--sub33 .dv-wb-tab{min-height:46px;padding:12px 0 10px;font-size:15px}
  .dv-pb--sub33 .dv-wb-tab::before{display:none}   /* 폰은 번호 없이 이름만 — 네 이름이 한 줄에 들어가게 */
  .dv-pb--sub33 .dv-wb-panels{margin-inline:calc(20px - var(--dv-gut))}
  .dv-pb--sub33 .dv-wb-h{margin-bottom:12px;font-size:18px}
  .dv-pb--sub33 .dv-wb-h--how{margin-top:36px}
  .dv-pb--sub33 .dv-wb-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
  .dv-pb--sub33 .dv-wb-checks li{padding:14px 12px 14px 0;font-size:14.5px;line-height:1.5;letter-spacing:-.025em}
  .dv-pb--sub33 .dv-wb-checks li:nth-child(even){padding:14px 0 14px 12px;border-left:1px solid rgba(47,43,40,.1)}
  .dv-pb--sub33 .dv-wb-checks li::before{position:static;display:block;width:12px;height:6px;margin:4px 0 12px 2px}
  .dv-pb--sub33 .dv-wb-stage{width:100%}
  .dv-pb--sub33 .dv-wb-bars{margin-top:12px}
  .dv-pb--sub33 .dv-wb-step{grid-template-columns:60px minmax(0,1fr);column-gap:14px;padding:12px 0}
  .dv-pb--sub33 .dv-wb-th{border-radius:10px}
  .dv-pb--sub33 .dv-wb-st{gap:8px;font-size:16px}
  .dv-pb--sub33 .dv-wb-st::before{font-size:14.5px}
  .dv-pb--sub33 .dv-wb-sd{font-size:14px;line-height:1.55}
  .dv-pb--sub33 .dv-wb-lead{font-size:14px}
  .dv-pb--sub33 .dv-wb-promise{margin-top:22px}
  .dv-pb--sub33 .dv-wb-promise strong{font-size:13.5px}
  .dv-pb--sub33 .dv-wb-promise span{font-size:min(12.5px,calc((100vw - 40px) / 21.4));white-space:nowrap}   /* 이전 요청 「폰에서 줄바꿈 안 되게」 유지 — 글 폭 = 화면 − 20px×2 */
}
@media (max-width:340px){
  .dv-pb--sub33 .dv-wb-promise span{font-size:12px;white-space:normal}
}

/* ---- 맞춤거상술 「렌즈」(?dvcl=5 프리뷰, 2026-10-02 사용자 「여기도 뜯어 고치고 싶어. 트렌디하고 예쁘게 레이아웃」) — _design/INSPIRATION.md 원칙 적용
   PC: [아치 틀 사진(높이 = 화면 높이 기준) | 큰 글자 고민 목록(행이 사진 높이를 나눠 가짐)]. 행 → 사진 무대가 그 부위로 translate+scale(.75s), 다른 행 흐림.
   폰: 사진 → 고민 칩 → 고른 고민의 수술 한 줄. 백업 page.css.bak-cl5 · pages/sub3_3.php.bak-cl5 ---- */
.dv-pb--sub33 .dv-pb-c5{--c5-h:clamp(420px,calc(100vh - var(--dv-hdr) - 110px),640px);--c5-ease:cubic-bezier(.19,1,.22,1);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(40px,6vw,112px);align-items:stretch}
.dv-pb--sub33 .dv-c5-lens{position:relative;margin:0;height:var(--c5-h);aspect-ratio:4/5;border-radius:50% 50% 24px 24px / 40% 40% 24px 24px;overflow:hidden;background:#CDC0B8;isolation:isolate}   /* 4:5 틀의 위쪽 반원 = 가로 50% · 세로 40% (메인 히어로의 아치와 같은 결) */
.dv-pb--sub33 .dv-c5-stage{position:absolute;inset:0;transform-origin:0 0;transform:translate(var(--tx,0%),var(--ty,0%)) scale(var(--s,1));transition:transform .75s var(--c5-ease)}
.dv-pb--sub33 .dv-c5-stage img,#bo_v_con .dv-pb--sub33 .dv-c5-stage img{position:absolute;inset:0;width:100%;height:100%!important;max-width:none!important;margin:0!important;object-fit:cover}
.dv-pb--sub33 .dv-c5-dot{position:absolute;z-index:1;display:grid;place-items:center;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:rgba(252,250,247,.86);color:var(--dv-ink);font-size:11.5px;font-weight:600;line-height:1;cursor:pointer;transform:scale(calc(1 / var(--s,1)));transition:transform .75s var(--c5-ease),opacity .3s ease,background-color .2s ease,color .2s ease}   /* 무대가 커져도 점 크기는 그대로 */
.dv-pb--sub33 .dv-c5-dot.is-on{background:var(--dv-olive-dp);color:#FCFAF7}
.dv-pb--sub33 .dv-pb-c5.is-zoom .dv-c5-dot:not(.is-on){opacity:0;pointer-events:none}
.dv-pb--sub33 .dv-c5-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid rgba(47,43,40,.5)}
.dv-pb--sub33 .dv-c5-it{flex:1 1 0;display:grid;grid-template-columns:56px minmax(0,1fr);align-content:center;row-gap:8px;padding:12px 0;border-bottom:1px solid rgba(47,43,40,.12);transition:opacity .25s ease}
.dv-pb--sub33 .dv-c5-it .dv-c4-no{grid-column:1;grid-row:1;align-self:center;font-size:16px;transition:color .2s ease}
.dv-pb--sub33 button.dv-c5-t{grid-column:2;grid-row:1;justify-self:start;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-family:var(--dv-ff);font-size:clamp(22px,1.9vw,30px);font-weight:500;line-height:1.25;letter-spacing:-.035em;color:var(--dv-ink);text-align:left;cursor:pointer}
.dv-pb--sub33 .dv-c5-it .dv-c4-pro{grid-column:2;margin:0;font-size:14.5px}
.dv-pb--sub33 .dv-pb-c5.has-sel .dv-c5-it:not(.is-on){opacity:.4}   /* 고른 행만 또렷하게(흐린 목록 + 활성 하나) */
.dv-pb--sub33 .dv-c5-it.is-on .dv-c4-no{color:var(--dv-olive-dp)}
.dv-pb--sub33 button.dv-c5-t:focus-visible{outline:2px solid var(--dv-olive-dp);outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  .dv-pb--sub33 .dv-c5-stage,.dv-pb--sub33 .dv-c5-dot{transition:opacity .15s linear}
}
/* 아래 특징 4 — 사진+번호 목록일 때와 같은 처리(번호 숨김, 폰 2×2) */
.dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c5) .dv-pb-map-cards{margin-top:clamp(12px,2vw,24px)}
.dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c5) .dv-pb-map-cards .dv-no{display:none}
@media (max-width:1023px){   /* 태블릿·폰: 사진 → 고민 칩 → 고른 고민의 수술 한 줄(큰 목록을 사진 아래 쌓으면 768×1024 에서 225px 넘쳤다) */
  .dv-pb--sub33 .dv-pb-c5{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .dv-pb--sub33 .dv-c5-lens{height:auto;width:min(100%,520px);justify-self:center}
  .dv-pb--sub33 .dv-c5-list{flex-direction:row;flex-wrap:wrap;gap:8px;width:min(100%,520px);justify-self:center;border-top:0}
  /* 고민 칩 + 고른 고민의 수술 한 줄 — li 는 풀고(display:contents) 버튼은 칩, 고른 줄만 맨 아래 전체 폭 */
  .dv-pb--sub33 .dv-c5-it{display:contents}
  .dv-pb--sub33 .dv-c5-it .dv-c4-no{display:none}
  .dv-pb--sub33 button.dv-c5-t{display:inline-flex;align-items:center;height:40px;padding:0 15px;border:1px solid rgba(47,43,40,.2);border-radius:999px;font-size:14.5px;font-weight:500;letter-spacing:-.02em;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
  .dv-pb--sub33 .dv-c5-it.is-on button.dv-c5-t{background:var(--dv-ink);border-color:var(--dv-ink);color:#FCFAF7}
  .dv-pb--sub33 .dv-c5-it .dv-c4-pro{display:none}
  .dv-pb--sub33 .dv-c5-it.is-on .dv-c4-pro{display:flex;order:10;flex-basis:100%;margin-top:8px;padding:14px 2px 0;border-top:1px solid rgba(47,43,40,.12);font-size:15px}
  .dv-pb--sub33 .dv-pb-c5.has-sel .dv-c5-it:not(.is-on){opacity:1}   /* 폰은 흐리지 않음(칩 색이 신호) */
}
@media (max-width:767px){
  .dv-pb--sub33 .dv-pb-c5{row-gap:20px}
  .dv-pb--sub33 .dv-c5-lens{width:auto;justify-self:stretch;margin-inline:calc(20px - var(--dv-gut))}   /* 화면 좌우 20px 까지(390 에서 350×437). 가운데 정렬(justify-self:center)이면 안이 전부 absolute 라 폭 0 이 된다 */
  .dv-pb--sub33 .dv-c5-dot{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:11px}
  .dv-pb--sub33 .dv-c5-list{width:auto;justify-self:stretch;margin-inline:calc(20px - var(--dv-gut))}   /* 사진과 같은 좌우 20px 선 — 칩 6개가 두 줄(390). 태블릿 규칙의 폭·가운데 정렬을 풀어야 음수 margin 이 먹는다 */
  .dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c5) .dv-pb-map-cards{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c5) .dv-pb-map-cards li,.dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c5) .dv-pb-map-cards li:first-child,.dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c5) .dv-pb-map-cards li:nth-child(n+3){display:block;padding:16px 0}
  .dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c5) .dv-pb-map-cards strong{font-size:15px}
  .dv-pb--sub33.is-l2 .dv-pb-map:has(.dv-pb-c5) .dv-pb-map-cards p{margin-top:5px;font-size:13px;line-height:1.55}
}

/* ---- DIVA Way B 그룹 분리(2026-10-02 사용자 스샷 「정보끼리 조금 더 분리되어 있었으면」) — 백업 page.css.bak-waysep
   「필요한 경우」와 「시술 방법」이 같은 문법(진한 위 선 + 헤어라인 행 + 같은 크림 면)이고 사이가 37px 라 한 표로 읽혔다.
   선 대신 면·간격으로(INSPIRATION 원칙 「그룹 사이 ≥ 그룹 안 간격×2」): 「필요한 경우」(제목·약속·체크) = 아이보리 판 하나, 두 그룹 사이 64px, 판 안 위 선은 연하게.
   그림 크기 상수는 늘어난 높이만큼 키워 한 화면 맞춤 유지 ---- */
.dv-pb--sub33 .dv-pb-way--b .dv-wb-checks{border-top-color:rgba(47,43,40,.16)}
.dv-pb--sub33 .dv-pb-way--b .dv-wb-checks li:nth-last-child(-n+2){border-bottom:0}   /* 2열이라 마지막 두 칸은 판 바닥이 끝 */
@media (min-width:1024px){
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-need{padding:clamp(18px,1.8vw,26px) clamp(20px,2.2vw,32px) clamp(6px,.6vw,10px);border-radius:var(--ui-r-card,24px);background:var(--dv-cream-2)}
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-panel{row-gap:clamp(44px,4.4vw,64px);--wb-img:clamp(300px,calc(100vh - var(--dv-hdr) - 305px),580px)}
}
@media (min-width:1024px) and (max-height:760px){
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-need{padding:14px 20px 4px}
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-panel{row-gap:32px;--wb-img:clamp(280px,calc(100vh - var(--dv-hdr) - 248px),580px)}
}
@media (max-width:1023px){   /* 태블릿·폰: 판을 실제 상자로(이전엔 display:contents 로 풀어 약속을 맨 끝에 뒀다) — 약속은 판 안 체크 아래 */
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-need{display:block;order:1;padding:18px 20px 4px;border-radius:20px;background:var(--dv-cream-2)}
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-need .dv-wb-promise{margin:14px 0 14px}
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-h--how{margin-top:48px}
}
@media (max-width:767px){
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-need{padding:16px 16px 2px}
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-need .dv-wb-promise span{font-size:min(12.5px,calc((100vw - 72px) / 21.4))}   /* 판 안쪽 폭(화면 − 20×2 − 16×2) 기준으로 한 줄 */
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-h--how{margin-top:44px}
}
@media (min-width:1024px) and (max-width:1199px) and (max-height:760px){   /* 1024×700 류(단계 설명이 3줄로 늘어 17px 넘침): 간격만 조금 더 */
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-need{padding:12px 18px 2px}
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-panel{row-gap:22px}
  .dv-pb--sub33 .dv-pb-way--b .dv-wb-step{padding-block:6px}
}