/* 美 클리닉 시술 쪽의 공통 틀. 시술 쪽에서만 부른다(다른 쪽에는 걸리지 않는다).
   몸통은 .pz 테두리 안에서 제 CSS(같은 폴더의 <시술>.css · draft.css)로 그리고, 이 파일은 사이트 틀과 몸통이 만나는 자리만 맞춘다.
   쪽마다의 CSS 뒤에 부른다. */

/* 사이트 바탕 규칙(style.css 의 img · h1~h4 · p)이 몸통 안으로 스며들지 않게 되돌린다.
   무게를 태그 하나만큼만 두어(사이트 규칙과 같고 뒤에 오므로 이긴다) 몸통의 어떤 규칙에도 진다. 사이트 가격표(.pz-keep) 안쪽은 건드리지 않는다. */
:where(.pz) img:not(:where(.pz-keep *)) { max-width: none; display: inline; }
:where(.pz) h1:not(:where(.pz-keep *)), :where(.pz) h2:not(:where(.pz-keep *)), :where(.pz) h3:not(:where(.pz-keep *)), :where(.pz) h4:not(:where(.pz-keep *)) { line-height: inherit; }
:where(.pz) p:not(:where(.pz-keep *)) { color: inherit; }

.pz {
  --nav-h: 0px; /* 시안은 떠 있는 머리줄 몫으로 70px 를 비웠다. 사이트 머리줄은 흐름 안에 있어 비울 것이 없다 */
  overflow-x: clip;
  -webkit-font-smoothing: auto;
}

/* 첫 화면 높이 — 사이트 머리줄(--header-h) 아래로 한 화면을 채운다 */
@media (min-width: 1024px) {
  .pz .pz-sec-hero { height: calc(100vh - var(--header-h)); min-height: 730px; }
}

/* ---------- 한 틀 (2026-10-11 원장 「ㄷ으로 하자」 · 「통일되는 게 나을 거 같으면 다 통일해도 무방함」. 고침 36) ----------
   어느 시술 쪽을 열어도 첫 화면 그림이 오른쪽 같은 자리의 같은 틀 안에, 아래 띠에 가리지 않고 통째로 선다. 값 면의 그림은 왼쪽 같은 칸 가운데에 선다.
   쪽마다의 CSS(.pz 한 겹)보다 무겁게 걸어 뒤에서 덮는다. 아래 띠는 흐름 안에 두어(절대 자리 아님) 값이 두 줄로 서도 그림 틀이 그만큼 줄어든다. */
@media (min-width: 1024px) {
  .pz.pz :is(.pn-hero, .pz-sec-hero) :is(.pn-summary, .pz-hero-summary) { position: relative; bottom: auto; flex: none; }
  .pz.pz :is(.pn-hero, .pz-sec-hero) :is(.pn-hero-content, .pz-hero-content) { padding-bottom: 20px; }
  .pz.pz :is(.pn-hero, .pz-sec-hero) :is(.pn-hero-bg, .pz-hero-bg) {
    position: absolute; top: 44px; bottom: 24px; right: 6vw; left: auto; width: 36vw; height: auto; padding: 0;
    display: flex; justify-content: center; align-items: flex-end; gap: 2vw; clip-path: none; background: none; z-index: 1;
  }
  .pz.pz :is(.pn-hero, .pz-sec-hero) :is(.pn-hero-bg, .pz-hero-bg) img {
    height: 100%; width: auto; max-width: 100%; min-width: 0; object-fit: contain; object-position: center bottom; margin: 0;
    position: relative; z-index: 2; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.32));
  }
  .pz.pz :is(.pn-hero, .pz-sec-hero) .pn-hero-bg.pn-two img { max-width: 47%; }
  .pz.pz :is(.pn-hero, .pz-sec-hero) :is(.pn-hero-glow, .pz-hero-glow) { left: 5%; right: auto; bottom: 4%; width: 90%; height: 84%; }
  /* 약병 쪽 넷(연아약침 · 슈퍼헤어A 약침 · 셀엑소좀 블랙라벨 · 안중 여드름 클리닉): 넓은 화면에서 병을 더 키워 틀의 여백을 줄인다(2026-10-11 원장 「데스크탑에선 병 사이즈를 좀 더 키우긴 해야겠음. 여백이 최대한 없게」) */
  .pz.pz:is(.pz-yeona, .pz-superhair-a, .pz-cell-exosome, .pz-acne-program) :is(.pn-hero-bg, .pz-hero-bg) { top: 14px; bottom: 10px; }
  /* 병 둘(안중 여드름 클리닉): 틀을 넓히고 둘을 조금 겹쳐 세운다 */
  .pz.pz.pz-acne-program .pn-hero-bg { right: 3vw; width: 45vw; gap: 0; }
  .pz.pz.pz-acne-program .pn-hero-bg.pn-two img { max-width: 56%; }
  .pz.pz.pz-acne-program .pn-hero-bg.pn-two img + img { margin-left: -5vw; height: 86%; }
  /* 안중 미백 클리닉: 기기 둘과 병 둘이 선 가로로 넓은 한 장이라 틀을 넓힌다(고침 38. 틀 높이는 그대로다. 그림이 틀 폭에 먼저 닿는 좁은 화면에서도 물건의 크기는 앞 판(36vw 틀 · 1036 x 1248 그림)과 같다: 45/1290 ≒ 36/1036) */
  .pz.pz.pz-whitening-program .pn-hero-bg { right: 3vw; width: 45vw; }
  /* 기기 여럿(올인원 케어의 다섯): 같은 키로 한 줄. 2026-10-12 원장 「가운데 쪽으로 옮길 것. 키울 수 있는 최대 한도로 키우되 비율이 깨지지는 않게」(고침 37):
     틀을 화면 가운데 쪽으로 넓히고 기기끼리 겹쳐 키운다(키는 틀 높이와 폭 가운데 먼저 닿는 쪽까지. 비율은 그대로) */
  .pz.pz :is(.pn-hero, .pz-sec-hero) .pn-hero-bg.pn-many { right: 4vw; width: 60vw; gap: 0; top: 30px; }
  .pz.pz :is(.pn-hero, .pz-sec-hero) .pn-hero-bg.pn-many img { height: min(100%, 31vw); max-width: none; margin-left: -4.6vw; }
  .pz.pz :is(.pn-hero, .pz-sec-hero) .pn-hero-bg.pn-many img:first-of-type { margin-left: 0; }
  .pz.pz :is(.pn-hero, .pz-sec-hero) :is(.pn-hero-bg-mo, .pz-hero-bg-mo) { display: none; }
  /* 값 면 왼쪽 그림 */
  .pz.pz :is(.pn-price-device, .pz-price-device, .pz-price-vial) {
    position: absolute; left: 0; top: 0; width: 40%; height: 100%; display: flex; align-items: center; justify-content: center; clip-path: none; background: none; z-index: 1;
  }
  .pz.pz :is(.pn-price-device, .pz-price-device, .pz-price-vial) img {
    width: auto; height: auto; max-width: 62%; max-height: 72%; object-fit: contain; margin: 0; filter: drop-shadow(20px 24px 40px rgba(0, 0, 0, 0.5));
  }
}
@media (max-width: 1023px) {
  .pz.pz :is(.pn-hero, .pz-sec-hero) :is(.pn-hero-content, .pz-hero-content) { padding-bottom: 40px; }
  .pz.pz :is(.pn-hero, .pz-sec-hero) :is(.pn-hero-bg-mo, .pz-hero-bg-mo) {
    display: flex; justify-content: center; align-items: flex-end; gap: 4vw; width: 100%; height: min(340px, 82vw); max-height: none; min-height: 0;
    margin: 36px 0 0; overflow: visible; background: none; clip-path: none; position: relative; z-index: 1;
  }
  .pz.pz :is(.pn-hero, .pz-sec-hero) :is(.pn-hero-bg-mo, .pz-hero-bg-mo) img {
    height: 100%; width: auto; max-width: 100%; min-width: 0; object-fit: contain; object-position: center bottom; margin: 0;
    position: relative; z-index: 2; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.32));
  }
  /* 그림 둘(스팟 레이저 · 안중 여드름 클리닉): 둘이 화면 폭 안에 든다(스팟 레이저의 피코하이가 화면 끝에 13px 잘리던 것. 통일 점검 10) */
  .pz.pz :is(.pn-hero, .pz-sec-hero) .pn-hero-bg-mo.pn-two img { max-width: 46%; }
  .pz.pz :is(.pn-hero, .pz-sec-hero) .pn-hero-bg-mo.pn-many { gap: 0; height: min(300px, 50vw); }
  .pz.pz :is(.pn-hero, .pz-sec-hero) .pn-hero-bg-mo.pn-many img { max-width: none; margin-left: -7.5vw; }
  .pz.pz :is(.pn-hero, .pz-sec-hero) .pn-hero-bg-mo.pn-many img:first-of-type { margin-left: 0; }
  .pz.pz :is(.pn-hero, .pz-sec-hero) :is(.pn-summary, .pz-hero-summary) { padding-top: 56px; }
}

/* 값 면의 흰 판 — 안쪽은 사이트 가격표(.price-list) 그대로 */
.pz .pz-price-panel { margin-top: 60px; padding: 6px 28px 20px; background: var(--color-surface); border-radius: 12px; color: var(--color-text); }
.pz .pz-price-panel .price-list { margin-inline-start: 0; max-width: none; }
.pz .pz-price-panel .price-vat-note { margin: 4px 0 0; font-size: 0.875rem; color: var(--color-text-muted); }
/* 휴대폰에서는 흰 판을 화면 양끝까지 넓힌다 — 가격표가 갈래 쪽과 같은 폭(화면 폭에서 양쪽 20px)을 써야
   한 줄에 맞춰 줄어드는 구성 줄(.price-item-detail)의 글씨가 갈래 쪽과 같은 크기로 나온다 */
@media (max-width: 767px) {
  .pz .pz-price-panel { margin-top: 40px; margin-inline: -5vw; width: calc(100% + 10vw); padding: 2px 20px 16px; border-radius: 0; }
}

/* 휴대폰 아래 붙박이 예약 띠(시안과 같은 크기 · 색). 메뉴 서랍(z 200)보다 아래에 둔다 */
.pz .pz-mo-bottom-bar { display: none; position: fixed; bottom: 0; left: 0; width: 100%; height: calc(70px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; background: var(--color-primary); z-index: 100; }
.pz .pz-mo-bottom-bar a { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-size: 16px; font-weight: 700; }
.pz .pz-mo-bottom-bar a:first-child { background: var(--color-primary-dark); border-right: 1px solid rgba(255, 255, 255, 0.1); }
@media (max-width: 767px) {
  .pz .pz-mo-bottom-bar { display: flex; }
  body.proc-page { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* 몸통의 마지막 면과 초록 상담 띠 사이를 붙인다(사이트 기본은 한 칸 띄움) */
main > .pz + .cta-banner { margin-top: 0; }