/* =====================================================================
   클립 세미거상 전용 컴포넌트
   style.css → brand.css → preserve.css 다음에 로드됩니다.
   색은 모두 브랜드 토큰(--accent 올리브 / --lav-100 아이보리)만 사용합니다.
   ===================================================================== */

/* 클로징 배너를 쓰지 않으므로 preserve.css 의 .ft{margin-top:0} 을 되돌립니다 */
.ft{margin-top:clamp(3rem,1.5rem + 5vw,6.5rem)}

/* ── 사진 확대 · 위치 수동 조정 ──
   값은 /_preview/semi-tuner/ 에서 저장되어 semi-tune.php 로 내려옵니다.
   --pic-zoom : 배율(1 = 원본), --pic-pos : 확대 기준점(틀에 고정될 지점) */
[data-tune]{overflow:hidden}
[data-tune] > img{transform:scale(var(--pic-zoom,1));transform-origin:var(--pic-pos,50% 50%)}

/* ── 히어로 ── */
/* 배경 그라데이션 제거 — 누끼 인물이 올라가므로 단색 아이보리가 깔끔하다 */
.dh3--semi{background:var(--lav-100)}
/* 누끼 이미지 — 배경이 비치므로 잘라내지 않고 어깨선까지 전부 보여준다.
   인물이 세로로 긴 만큼 히어로를 높여야 크게 넣으면서도 잘리지 않는다.
   폭은 인물 비율대로 자동, 하단에 세워 카피 바로 옆까지 붙인다. */
.dh3--semi .dh3__model{
  /* 어깨·손까지 담긴 가로에 가까운 구도(비율 0.94)라 히어로 높이에 맞춰 전체를 보여준다.
     예전 세로 사진용 150% 를 그대로 쓰면 머리만 확대되고 손·어깨가 잘린다. */
  object-fit:contain;object-position:var(--pic-pos,50% 0%);
  -webkit-mask-image:none;mask-image:none;
  height:var(--hero-h,100%);top:var(--hero-top,0px);bottom:auto;
  width:auto;max-width:60%;right:clamp(8px,4vw,64px);left:auto;
  transform:scale(var(--pic-zoom,1));transform-origin:top right}
/* 1440px 이상 — 오른쪽 기준으로 두면 화면이 넓어질수록 여백이 벌어진다(1920에서 508px).
   카피 오른쪽 끝 기준으로 잡아 274px 로 고정한다. */
@media(min-width:75rem){
  /* 1440px 미만에서는 히어로 박스가 화면 폭까지 좁아진다. 33·45·47·48(오른쪽 기준)은 그만큼
     같이 왼쪽으로 오는데 여기만 왼쪽 고정이라 인물이 혼자 오른쪽에 남았다 — 부족분만큼 같이 당긴다. */
  .dh3--semi .dh3__model{
    left:calc(max(0px,(100vw - 90rem) / 2) + var(--gutter) + 478px + var(--hero-gap,274px)
              - max(0px, 90rem - 100vw));right:auto}
}
/* 960~1200px — 카피 폭(478px)은 그대로인데 화면이 좁아 모델이 글자 위로 올라온다.
   여백은 그대로 두고 폭 상한만 걸어 침범을 막는다. */
@media(min-width:60rem) and (max-width:74.99rem){
  .dh3--semi .dh3__model{max-width:calc(100% - 555px)}
}
/* 모바일 — 누끼라 인물이 카피와 겹치면 글자가 얼굴 위에 놓인다.
   카피 아래에 인물 자리를 따로 확보하고 그 안에 하단 정렬한다. */
@media(max-width:60rem){
  .dh3--semi{--m-h:clamp(280px,78vw,400px)}
  .dh3--semi .dh3__inner{padding-bottom:calc(var(--m-h) + 1rem)}
  .dh3--semi .dh3__model{
    height:var(--m-h);width:auto;max-width:82%;
    top:auto;bottom:0;right:0;left:auto;
    object-position:bottom center;transform-origin:bottom right}
}
.dh3--semi .dh3__lead{margin:.9rem 0 0;font-size:clamp(1.08rem,.98rem + .5vw,1.34rem);font-weight:600;line-height:1.6;color:var(--accent-deep)}

/* ── ABOUT 태그 ── */
.sabout__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:var(--space-4) 0 0}
.sabout__tags span{padding:.55rem 1.25rem;border-radius:var(--radius-pill);background:var(--lav-100);border:1px solid var(--lav-200);font-size:clamp(1.02rem,.96rem + .3vw,1.14rem);font-weight:600;color:var(--accent-deep)}

/* ── CASE · 전후 — 목업에서 잘라온 사진의 비율에 맞춰 틀을 잡는다 ── */
.pcase__pic{aspect-ratio:442/514}

/* ── 전후 비교 (2열 × N행) ── */
.sba{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap);max-width:62rem;margin-inline:auto}
.sba + .sba{margin-top:var(--space-5)}
@media(max-width:44rem){.sba{grid-template-columns:1fr;max-width:26rem}}
.sba__c{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.sba__pic{display:block;aspect-ratio:var(--ba-ar,510/349);background:var(--surface-2)}
.sba__pic img{width:100%;height:100%;object-fit:cover;display:block}
.sba__lb{display:block;padding:.75rem;text-align:center;font-size:clamp(.98rem,.92rem + .3vw,1.08rem);font-weight:700;background:var(--surface-2);color:var(--ink-soft)}
.sba__lb--a{background:var(--accent);color:#fff}

/* ── 수술 방법 STEP 01~04 ──
   말풍선 라벨이 들어간 도해가 있어 원형(.pstep) 대신 사각 카드로 잡습니다 */
.ssteps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap);max-width:76rem;margin-inline:auto}
@media(max-width:64rem){.ssteps{grid-template-columns:repeat(2,1fr);max-width:44rem}}
@media(max-width:36rem){.ssteps{grid-template-columns:1fr;max-width:22rem}}
.sstep{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.sstep__pic{display:block;aspect-ratio:1;background:var(--surface-2)}
.sstep__pic img{width:100%;height:100%;object-fit:cover;display:block}
.sstep__body{padding:1.15rem 1.25rem 1.5rem}
.sstep__no{display:inline-flex;align-items:center;justify-content:center;padding:.28rem 1rem;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.08em}
.sstep__t{margin:.75rem 0 .5rem;font-size:clamp(1.2rem,1.08rem + .5vw,1.38rem);font-weight:700;color:var(--ink-deep);line-height:1.4}
.sstep__d{margin:0;font-size:clamp(1.05rem,.98rem + .35vw,1.16rem);line-height:1.75;color:var(--ink-soft)}

/* ── 박리 비교 (도해 + 설명) ── */
.sdiss{display:grid;gap:var(--space-4);max-width:70rem;margin-inline:auto}
.sdiss__r{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(1.4rem,1rem + 2.4vw,3.2rem);align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.3rem,1rem + 1.4vw,2.2rem)}
@media(max-width:52rem){.sdiss__r{grid-template-columns:1fr}}
.sdiss__r--on{background:var(--surface);border-color:var(--lav-200)}
.sdiss__fig{margin:0;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line)}
.sdiss__fig img{width:100%;height:auto;display:block}
.sdiss__t{margin:0 0 .7rem;font-size:clamp(1.24rem,1.08rem + .8vw,1.7rem);font-weight:700;line-height:1.4;color:var(--ink-deep)}
.sdiss__r--on .sdiss__t{color:var(--accent-deep)}
.sdiss__d{margin:0;font-size:clamp(1.05rem,.98rem + .35vw,1.16rem);line-height:1.8;color:var(--ink-soft)}

/* ── 단계별 SMAS 리프팅 3카드 ── */
.stier{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);max-width:80rem;margin-inline:auto}
@media(max-width:60rem){.stier{grid-template-columns:1fr;max-width:26rem}}
/* 3장 모두 같은 테두리 */
.stier__c{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.15rem 1.5rem;text-align:center;display:flex;flex-direction:column}
.stier__pic{display:block;width:76%;max-width:230px;margin:0 auto .9rem;aspect-ratio:1}
.stier__pic img{width:100%;height:100%;object-fit:contain;display:block}
.stier__t{margin:0;font-size:clamp(1.24rem,1.12rem + .5vw,1.44rem);font-weight:700;color:var(--ink-deep)}
.stier__s{display:block;margin:.2rem 0 1.1rem;font-size:clamp(.98rem,.92rem + .3vw,1.08rem);font-weight:600;color:var(--muted)}
.stier__c--on .stier__t{color:var(--accent-deep)}
/* 3개 카드의 표가 같은 높이에서 시작하도록 위쪽 정렬 */
.stier__tb{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;text-align:left;align-content:start}
.stier__tb li{display:grid;grid-template-columns:4.6rem 1fr;gap:.55rem;align-items:baseline;background:var(--surface-2);border-radius:.6rem;padding:.6rem .7rem}
.stier__tb dt,.stier__tb .k{font-size:.88rem;font-weight:600;color:var(--muted);word-break:keep-all}
.stier__tb .v{font-size:.94rem;font-weight:700;line-height:1.5;color:var(--ink-deep);word-break:keep-all}

/* ── 흉터 경과 (3열 × 2행) ── */
.sscar{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);max-width:70rem;margin-inline:auto}
.sscar + .sscar{margin-top:var(--space-4)}
@media(max-width:52rem){.sscar{grid-template-columns:1fr;max-width:24rem}}
.sscar__c{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.sscar__pic{display:block;aspect-ratio:4/3;background:var(--surface-2)}
.sscar__pic img{width:100%;height:100%;object-fit:cover;display:block}
.sscar__lb{display:block;padding:.75rem;text-align:center;font-size:clamp(.98rem,.92rem + .3vw,1.08rem);font-weight:700;background:var(--lav-100);color:var(--accent-deep)}

/* ── 사후 관리 — 목업대로 1열 가로 배치 (프리저베의 2열 그리드를 덮어씀) ── */
/* 2026-08-19: 사후 관리는 프리저베 가슴성형과 같은 가로(2단) 배치로 통일합니다.
   여기서 1단으로 덮어쓰고 있어 리프팅·눈 카테고리만 세로로 길게 나왔습니다.
   preserve.css 의 값(2단 · max-width:82rem · 아이콘 282px)을 그대로 쓰도록 규칙을 뺍니다. */

/* ── 하단 특징 4카드 ── */
.sfeat{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap);max-width:76rem;margin-inline:auto}
@media(max-width:64rem){.sfeat{grid-template-columns:repeat(2,1fr);max-width:44rem}}
@media(max-width:36rem){.sfeat{grid-template-columns:1fr;max-width:22rem}}
.sfeat__c{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.sfeat__pic{display:block;aspect-ratio:3/4;background:var(--surface-2);border-bottom:1px solid var(--lilac-400)}
.sfeat__pic img{width:100%;height:100%;object-fit:cover;display:block}
.sfeat__body{padding:1.2rem 1.25rem 1.5rem}
.sfeat__t{margin:0 0 .5rem;font-size:clamp(1.2rem,1.08rem + .5vw,1.38rem);font-weight:700;color:var(--accent-deep);line-height:1.4}
.sfeat__d{margin:0;font-size:clamp(1.05rem,.98rem + .35vw,1.16rem);line-height:1.75;color:var(--ink-soft);word-break:keep-all}

/* ── 카드 테두리 ──
   기본 --line(#e3dfcf)은 너무 옅어 카드 경계가 보이지 않는다.
   브랜드 세이지(--lilac-400 #b3b492)로 한 단계 진하게 잡는다. */
.pcase__c,.pcare__i,.sba__c,.sstep,.sdiss__r,.stier__c,.sscar__c,.sfeat__c{
  border-color:var(--lilac-400)}

/* ── 섹션 부제 — 프리저베 ABOUT 과 같은 크기·굵기 ── */
[aria-labelledby="s-about"] .dhead p{font-size:clamp(1.16rem,1rem + .7vw,1.5rem);font-weight:600;color:var(--ink-soft)}

/* ── 피부층 단면도(c26)는 가로 도해라 세로 틀에 맞추면 라벨이 잘린다 → 전체 노출 ── */
.sfeat__pic[data-tune="feat4"]{background:#fff}
.sfeat__pic[data-tune="feat4"] > img{object-fit:contain}

/* ── 하단 안내 문구 ── */
.disc{font-size:clamp(.92rem,.88rem + .2vw,1rem);line-height:1.7}
.pfacts__note{font-size:clamp(.92rem,.88rem + .2vw,1rem)}

/* ── CASE 제목 — 문장이 길면 낱말 중간에서 끊긴다("무너 / 지고") ── */
.pcase__t{word-break:keep-all}

/* ── 스마스거상 히어로 ──
   세미거상 인물은 허리까지 나오는 세로 사진이라 150% 로 키워 아래를 잘랐지만,
   이쪽은 상반신 가로 구도라 같은 배율이면 얼굴이 히어로 밖으로 넘친다.
   크기 · 좌우 여백 · 상하는 /_preview/smas-tuner/ 에서 조절해 smas-tune.php 로 내려온다.
   기본값(100% / 168px / 0px)은 세미거상 히어로와 인물이 같은 자리에 서도록 맞춘 값이다.
   세미거상 사진은 인물 좌우에 빈 자리가 있어 얼굴이 틀 안쪽에서 시작하지만
   이 누끼는 인물이 가장자리까지 꽉 차 있어 그만큼 왼쪽으로 당겨야 한다. */
.dh3--smas .dh3__model{height:var(--hero-h,100%);top:var(--hero-top,0px)}
@media(min-width:75rem){
  .dh3--smas .dh3__model{
    left:calc(max(0px,(100vw - 90rem) / 2) + var(--gutter) + 478px + var(--hero-gap,168px)
              - max(0px, 90rem - 100vw))}
}
/* 모바일은 카피 아래에 인물 자리를 따로 잡으므로 조절값을 적용하지 않는다 */
@media(max-width:60rem){.dh3--smas .dh3__model{height:var(--m-h);top:auto}}