/* ==========================================================================
   줄기세포(MCT) 본 페이지 전용 스타일 — stemcell.css (2026-08-20)
   --------------------------------------------------------------------------
   stemcell.html 한 장만 읽는다. **site.css 는 수정하지 않았고**, 모든 규칙을
   body.p-stem 안에 가둬 다른 페이지에 닿지 않게 했다.

   섹션별 출처
     Definition · 01 3 Point · 02 시술 과정 · Q&A
        → B 시안(stemcell-b.css)의 규칙을 그대로 옮겨 왔다(셀렉터 `.sb-*` 유지).
          B 시안 파일은 그대로 두었으므로 두 곳을 함께 고쳐야 하는 것이 아니라,
          이 파일이 본 페이지의 정본이다.
     Effect  (.se-*)   → 참고 시안(좌측 인물 / 우측 제목·회색 박스·CASE 배지 행)
     Recommend (.sr-*) → 새김성형외과 "Core Safety System" 구성
                         (좌측 붙박이 어두운 패널 + 우측 흰 패널 안 번호 행)
     Caution (.sk-*)   → 참고 시안(좌측 인물+배경 도형 / 우측 두 톤 제목,
                         하단에 번호 배지·아이콘 카드 줄이 사진 위로 겹침)

   참고 시안에 있던 **별점(★★★★★) 줄은 넣지 않았다** — MCT 에는 대응하는
   등급 자료가 없어 근거 없는 효과 표시가 되고, 성형외과 홈페이지는 의료광고
   사전심의 대상이라 위험하다. 배지(알약) 디자인은 아래 항목 행에 그대로 살렸다.
   ========================================================================== */

/* 새로 짠 섹션 안에서만 가운데 정렬 기본값(site.css v14-center-floor)을 푼다.
   히어로·소개 띠·인용 띠와 꼬리 블록(.qc/.promise/.promo/.lc)은 그대로 둔다. */
body.p-stem main :is(.sb-def,.sb-pts,.sb-flow,.sb-faq,.se,.sr,.sk),
body.p-stem :is(.sb-def,.sb-pts,.sb-flow,.sb-faq,.se,.sr,.sk)
  :is(section,div,article,header,aside,h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,figure,figcaption,blockquote,table,summary,details,span,b,em,i){text-align:left}

body.p-stem{--sbw:1280px;--sbtop:clamp(112px,17vh,178px)}
body.p-stem :is(#pts,#flow,#eff,#rec,#cau,#faq){scroll-margin-top:clamp(84px,13vh,150px)}

/* ---------- 스크롤 인 ----------
   사이트 공통 모션은 80px 오버슈트. 이 시안은 더 짧고 곧게 올라온다. */
.js body.p-stem [data-r]{opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--ease) var(--rv-d,0s),transform .9s var(--ease) var(--rv-d,0s)}
.js body.p-stem [data-r].is-in{opacity:1;transform:none}
/* ==========================================================================
   섹션 머리말 (공용)
   ========================================================================== */
body.p-stem .sb-head{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.2vw,16px);
  max-width:820px;margin-bottom:clamp(40px,5vw,76px)}
body.p-stem .sb-head--wide{max-width:940px}
body.p-stem .sb-head__no{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-serif);
  font-weight:800;font-size:.82rem;letter-spacing:.2em;line-height:1;color:var(--sand-deep)}
body.p-stem .sb-head__no::after{content:"";width:clamp(24px,3vw,44px);height:1px;background:var(--sand)}
body.p-stem .sb-head__eye{margin:0;font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;
  font-weight:700;color:var(--accent-deep)}
body.p-stem .sb-head__t{margin:0;font-family:var(--font-serif);font-weight:800;
  font-size:clamp(1.8rem,1.2rem + 2.4vw,3.05rem);line-height:1.26;letter-spacing:-.018em;color:var(--mocha)}
body.p-stem .sb-head__t :is(em,.em){font-style:normal;color:var(--accent-deep)}
body.p-stem .sb-head__desc{margin:0;max-width:44em;font-size:clamp(.94rem,.9rem + .22vw,1.05rem);
  line-height:2;color:var(--ink-mute)}
/* ==========================================================================
   3. MCT란 무엇인가요 — 붙박이 머리말 2단
   ========================================================================== */
body.p-stem .sb-def{background:var(--ivory);padding:clamp(74px,9vw,136px) var(--gutter)}
body.p-stem .sb-def__inner{max-width:var(--sbw);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,.46fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:start}
body.p-stem .sb-def__side{position:sticky;top:var(--sbtop);display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(12px,1.4vw,18px)}
body.p-stem .sb-def__t{margin:0;font-family:var(--font-serif);font-weight:800;
  font-size:clamp(1.75rem,1.15rem + 2.3vw,2.9rem);line-height:1.28;letter-spacing:-.018em;color:var(--mocha)}
body.p-stem .sb-def__rule{display:block;width:clamp(48px,6vw,84px);height:1px;background:var(--sand)}
body.p-stem .sb-def__body{display:flex;flex-direction:column;gap:clamp(16px,2vw,28px)}
body.p-stem .sb-def__p{margin:0;font-size:clamp(1rem,.94rem + .34vw,1.16rem);line-height:2.05;color:var(--ink-soft)}
body.p-stem .sb-def__p b{color:var(--mocha);font-weight:700}
body.p-stem .sb-def__media{margin:clamp(8px,1.4vw,20px) 0 0;border-radius:6px;overflow:hidden;
  aspect-ratio:16/10;border:1px solid var(--line)}
body.p-stem .sb-def__media img{width:100%;height:100%;object-fit:cover}
/* ==========================================================================
   4. 3 Point 원리 — 엇갈려 내려가는 세 장
   ========================================================================== */
body.p-stem .sb-pts{background:var(--ivory-pure);padding:clamp(74px,9vw,136px) var(--gutter)}
body.p-stem .sb-pts__inner{max-width:var(--sbw);margin-inline:auto}
body.p-stem .sb-pts__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:start}
body.p-stem .sb-pt{position:relative;display:flex;flex-direction:column;gap:clamp(9px,1.1vw,15px);
  padding-top:clamp(20px,2.2vw,32px)}
body.p-stem .sb-pt:nth-child(2){margin-top:clamp(18px,3.2vw,56px)}
body.p-stem .sb-pt:nth-child(3){margin-top:clamp(36px,6.4vw,112px)}
body.p-stem .sb-pt__rule{position:absolute;top:0;left:0;right:0;height:1px;background:var(--sand-deep);
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) calc(var(--rv-d,0s) + .12s)}
body.p-stem .sb-pt.is-in .sb-pt__rule{transform:none}
body.p-stem .sb-pt__no{font-family:var(--font-serif);font-weight:800;line-height:1;
  font-size:clamp(1.4rem,1.05rem + 1.3vw,2.15rem);color:var(--gold-line);transition:color .5s var(--ease)}
body.p-stem .sb-pt:hover .sb-pt__no{color:var(--sand)}
body.p-stem .sb-pt__media{margin:clamp(4px,.6vw,10px) 0 clamp(4px,.6vw,10px);border-radius:6px;
  overflow:hidden;aspect-ratio:4/5;border:1px solid rgba(138,111,84,.16)}
body.p-stem .sb-pt__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
body.p-stem .sb-pt:hover .sb-pt__media img{transform:scale(1.05)}
body.p-stem .sb-pt__cap{margin:0;display:inline-flex;align-items:center;gap:10px;font-size:.68rem;
  letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--accent-deep)}
body.p-stem .sb-pt__cap::before{content:"";flex:none;width:18px;height:1px;background:var(--sand)}
body.p-stem .sb-pt__t{margin:0;font-family:var(--font-serif);font-weight:700;
  font-size:clamp(1.14rem,1rem + .55vw,1.45rem);line-height:1.4;letter-spacing:-.012em;color:var(--mocha)}
body.p-stem .sb-pt__d{margin:0;font-size:.87rem;line-height:1.98;color:var(--ink-mute)}
/* ==========================================================================
   5. 시술 과정 & 장비 — 스크롤에 따라 채워지는 가로 타임라인
   ========================================================================== */
body.p-stem .sb-flow{background:var(--ivory-warm);padding:clamp(74px,9vw,136px) var(--gutter)}
body.p-stem .sb-flow__inner{max-width:var(--sbw);margin-inline:auto}
body.p-stem .sb-flow__list{--pt:clamp(48px,5.4vw,72px);--rail:calc(var(--pt) * .46);
  position:relative;list-style:none;margin:0;padding:var(--pt) 0 0;display:grid;
  grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(20px,2.8vw,46px)}
body.p-stem .sb-flow__rail{position:absolute;top:var(--rail);left:0;right:0;height:1px;
  background:rgba(107,82,56,.2);overflow:hidden}
body.p-stem .sb-flow__rail > i{display:block;width:0;height:100%;background:var(--sand-deep)}
body.p-stem .sb-fs{position:relative;display:flex;flex-direction:column;gap:clamp(9px,1.1vw,15px)}
body.p-stem .sb-fs::before{content:"";position:absolute;left:0;top:calc(var(--rail) - var(--pt) - 4.5px);
  width:9px;height:9px;border-radius:50%;background:var(--ivory-warm);border:1px solid var(--sand-deep);
  transition:background .45s var(--ease),transform .45s var(--ease)}
body.p-stem .sb-fs.is-on::before{background:var(--sand-deep);transform:scale(1.3)}
body.p-stem .sb-fs__no{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  color:var(--sand-deep);transition:color .45s var(--ease)}
body.p-stem .sb-fs__no b{font-family:var(--font-serif);font-weight:800;letter-spacing:.1em}
body.p-stem .sb-fs.is-on .sb-fs__no{color:var(--accent-deep)}
body.p-stem .sb-fs__media{margin:clamp(2px,.4vw,8px) 0 clamp(4px,.6vw,10px);border-radius:6px;
  overflow:hidden;aspect-ratio:4/3;background:#fff;border:1px solid rgba(138,111,84,.16)}
body.p-stem .sb-fs__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
body.p-stem .sb-fs:hover .sb-fs__media img{transform:scale(1.05)}
body.p-stem .sb-fs__t{margin:0;font-family:var(--font-serif);font-weight:700;
  font-size:clamp(1.1rem,.98rem + .5vw,1.38rem);line-height:1.42;letter-spacing:-.012em;color:var(--mocha)}
body.p-stem .sb-fs__d{margin:0;font-size:.87rem;line-height:1.98;color:var(--ink-mute)}
body.p-stem .sb-cau .sb-head__eye{color:var(--gold)}
body.p-stem .sb-cau .sb-head__t{color:var(--ivory-pure)}
body.p-stem .sb-cau .sb-head__t :is(em,.em){color:var(--gold)}
body.p-stem .sb-cau .sb-head__desc{color:var(--on-mocha-soft)}
/* ==========================================================================
   9. Q&A — 붙박이 머리말 + 번호 아코디언
   ========================================================================== */
body.p-stem .sb-faq{background:var(--ivory-pure);padding:clamp(74px,9vw,136px) var(--gutter)}
body.p-stem .sb-faq__inner{max-width:var(--sbw);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,.44fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:start}
body.p-stem .sb-faq__side{position:sticky;top:var(--sbtop);display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(11px,1.3vw,17px)}
body.p-stem .sb-faq__t{margin:0;font-family:var(--font-serif);font-weight:800;
  font-size:clamp(1.55rem,1.05rem + 1.9vw,2.4rem);line-height:1.32;letter-spacing:-.018em;color:var(--mocha)}
body.p-stem .sb-faq__note{margin:clamp(10px,1.6vw,22px) 0 0;padding-top:clamp(14px,1.8vw,24px);
  border-top:1px solid var(--line-soft);font-size:.75rem;line-height:1.9;color:var(--ink-mute)}
body.p-stem .sb-q{border-bottom:1px solid var(--line)}
body.p-stem .sb-q:first-of-type{border-top:1px solid var(--line)}
body.p-stem .sb-q__s{display:flex;align-items:flex-start;gap:clamp(12px,1.4vw,20px);
  padding:clamp(17px,1.9vw,25px) 2px;cursor:pointer;list-style:none;
  transition:padding-left .4s var(--ease)}
body.p-stem .sb-q__s::-webkit-details-marker{display:none}
body.p-stem .sb-q__s:hover{padding-left:6px}
body.p-stem .sb-q__s i{flex:none;padding-top:.4em;font-family:var(--font-serif);font-style:normal;
  font-weight:700;font-size:.74rem;letter-spacing:.1em;color:var(--sand)}
body.p-stem .sb-q__s span{flex:1;min-width:0;font-weight:600;
  font-size:clamp(.96rem,.9rem + .24vw,1.1rem);line-height:1.62;color:var(--ink);word-break:keep-all}
body.p-stem .sb-q__s em{position:relative;flex:none;width:14px;height:14px;margin-top:.5em}
body.p-stem .sb-q__s em::before,body.p-stem .sb-q__s em::after{content:"";position:absolute;
  background:var(--sand-deep);transition:transform .45s var(--ease),opacity .45s var(--ease)}
body.p-stem .sb-q__s em::before{left:0;top:6.5px;width:14px;height:1px}
body.p-stem .sb-q__s em::after{left:6.5px;top:0;width:1px;height:14px}
body.p-stem .sb-q[open] .sb-q__s em::after{transform:scaleY(0);opacity:0}
body.p-stem .sb-q[open] .sb-q__s span,body.p-stem .sb-q[open] .sb-q__s i{color:var(--accent-deep)}
body.p-stem .sb-q__a{margin:0;padding:0 0 clamp(20px,2.2vw,30px) calc(clamp(12px,1.4vw,20px) + 2.4em);
  font-size:clamp(.9rem,.86rem + .18vw,.98rem);line-height:2.02;color:var(--ink-mute);word-break:keep-all}
body.p-stem .sb-q[open] .sb-q__a{animation:sb-open .5s var(--ease) both}
@keyframes sb-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* ==========================================================================
   10. 인용 띠
   ========================================================================== */
body.p-stem .sb-quote{position:relative;isolation:isolate;overflow:hidden;
  background:var(--espresso);color:var(--on-mocha)}
body.p-stem .sb-quote__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.4;filter:brightness(.7)}
body.p-stem .sb-quote__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(51,45,42,.88),rgba(44,39,36,.7) 50%,rgba(51,45,42,.92))}
body.p-stem .sb-quote__inner{position:relative;max-width:800px;margin-inline:auto;
  padding:clamp(78px,10vw,140px) var(--gutter);display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px,2.2vw,28px);text-align:center}
body.p-stem .sb-quote__t{margin:0;font-family:var(--font-serif);font-weight:800;
  font-size:clamp(1.7rem,1.15rem + 2.3vw,2.8rem);line-height:1.38;letter-spacing:-.018em;color:var(--gold-soft)}
body.p-stem .sb-quote__l{margin:0;max-width:46ch;line-height:2;color:var(--on-mocha-soft)}
@media(max-width:1000px){
  body.p-stem :is(.sb-def__inner,.sb-eff__inner,.sb-faq__inner){grid-template-columns:minmax(0,1fr);
    gap:clamp(24px,4vw,40px)}
  body.p-stem :is(.sb-def__side,.sb-eff__side,.sb-faq__side){position:static;top:auto}
}
@media(max-width:860px){
  body.p-stem .sb-pts__list{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,44px)}
  body.p-stem .sb-pt:nth-child(2),body.p-stem .sb-pt:nth-child(3){margin-top:0}
  body.p-stem .sb-pt__media{aspect-ratio:16/10}
  body.p-stem .sb-flow__list{grid-template-columns:minmax(0,1fr);padding-top:0;gap:clamp(28px,5vw,44px)}
  body.p-stem .sb-flow__rail,body.p-stem .sb-fs::before{display:none}
  body.p-stem .sb-fs{border-top:1px solid rgba(107,82,56,.2);padding-top:clamp(20px,3.4vw,28px)}
  body.p-stem .sb-fs__media{aspect-ratio:16/10}
}
/* ==========================================================================
   Effect — 좌측 인물 / 우측 제목·불릿 박스·배지 행 (참고 시안)
   별점 줄은 넣지 않는다(위 머리말 참고). 배지 알약은 항목 행이 이어받는다.
   ========================================================================== */
body.p-stem .se{background:#fff;padding:clamp(74px,9vw,136px) var(--gutter)}
body.p-stem .se__inner{max-width:var(--sbw);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(26px,4.4vw,78px);align-items:stretch}
/* 사진은 오른쪽 글 높이를 그대로 채운다(참고 시안과 같은 비중).
   비율을 고정하지 않고 늘리므로 aspect-ratio 는 쓰지 않는다 */
body.p-stem .se__media{margin:0;border-radius:clamp(14px,1.8vw,26px);overflow:hidden;
  min-height:clamp(380px,42vw,620px);background:var(--ivory-warm);border:1px solid var(--line-soft)}
body.p-stem .se__media img{width:100%;height:100%;object-fit:cover}
body.p-stem .se__body{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(11px,1.3vw,17px)}
body.p-stem .se__eye{margin:0;font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;
  font-weight:700;color:var(--accent-deep)}
body.p-stem .se__t{margin:0;font-family:var(--font-serif);font-weight:800;
  font-size:clamp(1.75rem,1.15rem + 2.3vw,2.9rem);line-height:1.26;letter-spacing:-.02em;color:var(--mocha)}
body.p-stem .se__lead{margin:0;max-width:40em;font-size:clamp(.94rem,.9rem + .22vw,1.05rem);
  line-height:2;color:var(--ink-mute)}
/* 참고 시안의 회색 불릿 상자 — 팔레트에 맞춰 따뜻한 아이보리로 */
body.p-stem .se__box{width:100%;margin-top:clamp(6px,1vw,14px);
  padding:clamp(20px,2.4vw,34px) clamp(20px,2.4vw,36px);background:var(--ivory);
  border:1px solid var(--line-soft);border-radius:clamp(10px,1.2vw,16px)}
body.p-stem .se__boxlb{margin:0 0 clamp(12px,1.4vw,18px);display:flex;align-items:center;gap:14px;
  font-size:.66rem;letter-spacing:.38em;text-transform:uppercase;font-weight:700;color:var(--accent-deep)}
body.p-stem .se__boxlb::after{content:"";flex:1;height:1px;background:var(--gold-line)}
/* 열 방향으로 채워 왼쪽 칸이 위에서 아래로 이어지게 한다 */
body.p-stem .se__bul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto);grid-auto-flow:column;
  gap:clamp(7px,.9vw,12px) clamp(16px,2.4vw,40px)}
body.p-stem .se__bul li{display:flex;align-items:baseline;gap:9px;
  font-size:clamp(.86rem,.83rem + .18vw,.96rem);line-height:1.7;color:var(--ink-soft)}
body.p-stem .se__bul li::before{content:"·";flex:none;color:var(--sand);font-weight:700}
/* 참고 시안의 "__ 소제목" 표시 */
body.p-stem .se__sub{margin:clamp(16px,2.2vw,30px) 0 clamp(2px,.6vw,8px);display:flex;align-items:center;
  gap:12px;font-family:var(--font-serif);font-weight:700;
  font-size:clamp(1rem,.94rem + .3vw,1.18rem);color:var(--mocha)}
body.p-stem .se__sub::before{content:"";flex:none;width:18px;height:2px;background:var(--accent-deep)}
body.p-stem .se__cases{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;
  gap:clamp(8px,1vw,13px)}
body.p-stem .se__cases li{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
body.p-stem .se__no{flex:none;min-width:3.6em;padding:.52em 1.05em;border-radius:var(--radius-pill);
  background:var(--accent-deep);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-align:center;line-height:1.3}
body.p-stem .se__cd{font-size:clamp(.9rem,.86rem + .22vw,1.02rem);font-weight:600;line-height:1.6;color:var(--mocha)}
body.p-stem .se__note{margin:clamp(16px,2.2vw,28px) 0 0;max-width:56em;font-size:.76rem;
  line-height:1.9;color:var(--ink-mute)}

/* ==========================================================================
   Recommend — 좌측 붙박이 어두운 패널 + 우측 흰 패널 안 번호 행
   (새김성형외과 "Core Safety System" 구성)
   ========================================================================== */
body.p-stem .sr{background:var(--ivory);padding:clamp(74px,9vw,136px) var(--gutter)}
body.p-stem .sr__inner{max-width:var(--sbw);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:clamp(14px,2vw,30px);align-items:start}
body.p-stem .sr__side{position:sticky;top:var(--sbtop);isolation:isolate;overflow:hidden;
  border-radius:clamp(18px,2.6vw,40px);background:var(--espresso);color:var(--on-mocha);
  min-height:clamp(260px,32vw,440px);display:flex;align-items:center}
body.p-stem .sr__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  opacity:.5;filter:brightness(.72)}
body.p-stem .sr__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,rgba(44,39,36,.84),rgba(44,39,36,.6) 55%,rgba(44,39,36,.9))}
body.p-stem .sr__sidein{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(11px,1.4vw,18px);padding:clamp(28px,3.6vw,58px)}
body.p-stem .sr__eye{margin:0;font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;
  font-weight:700;color:var(--gold)}
body.p-stem .sr__t{margin:0;font-family:var(--font-serif);font-weight:800;
  font-size:clamp(1.7rem,1.1rem + 2.2vw,2.8rem);line-height:1.26;letter-spacing:-.02em;color:var(--ivory-pure)}
body.p-stem .sr__lead{margin:0;max-width:22em;font-size:clamp(.92rem,.88rem + .22vw,1.02rem);
  line-height:1.95;color:var(--on-mocha-soft)}
body.p-stem .sr__panel{background:#fff;border-radius:clamp(18px,2.6vw,40px);
  padding:clamp(26px,4vw,80px) clamp(22px,3.4vw,70px)}
body.p-stem .sr__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(30px,4vw,60px)}
body.p-stem .sr__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,44px);align-items:center}
body.p-stem .sr__media{margin:0;border-radius:clamp(12px,1.8vw,30px);overflow:hidden;aspect-ratio:16/10;
  background:var(--ivory-warm)}
body.p-stem .sr__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
body.p-stem .sr__row:hover .sr__media img{transform:scale(1.05)}
body.p-stem .sr__text{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1vw,14px)}
body.p-stem .sr__no{margin:0;display:inline-flex;align-items:center;gap:11px;font-family:var(--font-serif);
  font-weight:800;font-size:.86rem;letter-spacing:.2em;line-height:1;color:var(--sand-deep)}
body.p-stem .sr__no::after{content:"";width:clamp(20px,2.6vw,38px);height:1px;background:var(--sand)}
body.p-stem .sr__rt{margin:0;font-family:var(--font-serif);font-weight:700;
  font-size:clamp(1.1rem,1rem + .55vw,1.42rem);line-height:1.45;letter-spacing:-.014em;color:var(--mocha)}
body.p-stem .sr__rd{margin:0;font-size:.88rem;line-height:1.95;color:var(--ink-mute)}

/* ==========================================================================
   Caution — 좌측 인물(배경 도형·반짝임) / 우측 두 톤 제목,
   하단 번호 배지·아이콘 카드 줄이 사진 위로 겹친다 (참고 시안)
   ========================================================================== */
body.p-stem .sk{background:var(--ivory-pure);padding:clamp(74px,9vw,136px) var(--gutter);overflow:hidden}
body.p-stem .sk__top{max-width:var(--sbw);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);align-items:center}
body.p-stem .sk__media{position:relative;margin:0;isolation:isolate;display:flex;
  align-items:center;justify-content:center}
/* 참고 시안의 유기적인 배경 도형 */
body.p-stem .sk__blob{position:absolute;z-index:-1;inset:4% -8% 10% -14%;
  background:radial-gradient(58% 54% at 38% 28%,var(--gold-soft) 0%,rgba(247,230,210,0) 72%),
             radial-gradient(70% 62% at 72% 72%,rgba(241,209,172,.55) 0%,rgba(241,209,172,0) 74%);
  border-radius:48% 52% 42% 58% / 55% 45% 55% 45%}
body.p-stem .sk__media img{width:100%;max-width:clamp(280px,34vw,470px);height:auto;
  border-radius:clamp(14px,2vw,28px);box-shadow:0 34px 60px -40px rgba(44,39,36,.45)}
body.p-stem .sk__spark{position:absolute;inset:0;z-index:1;pointer-events:none}
body.p-stem .sk__spark i{position:absolute;display:block;color:var(--sand);opacity:.8}
body.p-stem .sk__spark i svg{width:100%;height:100%;fill:currentColor}
body.p-stem .sk__spark i:nth-child(1){top:6%;left:4%;width:clamp(18px,2.2vw,30px);height:clamp(18px,2.2vw,30px)}
body.p-stem .sk__spark i:nth-child(2){top:30%;right:2%;width:clamp(13px,1.5vw,20px);height:clamp(13px,1.5vw,20px)}
body.p-stem .sk__spark i:nth-child(3){bottom:30%;left:1%;width:clamp(10px,1.2vw,15px);height:clamp(10px,1.2vw,15px)}
body.p-stem .sk__spark i:nth-child(4){top:18%;right:15%;width:9px;height:9px;border-radius:50%;
  border:1.5px solid currentColor;opacity:.55}
body.p-stem .sk__head{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(11px,1.4vw,18px)}
body.p-stem .sk__eye{margin:0;font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;
  font-weight:700;color:var(--accent-deep)}
body.p-stem .sk__t{margin:0;font-family:var(--font-serif);font-weight:800;
  font-size:clamp(1.75rem,1.15rem + 2.3vw,2.9rem);line-height:1.26;letter-spacing:-.02em;color:var(--mocha)}
body.p-stem .sk__t .em{font-style:normal;color:var(--accent-deep)}
body.p-stem .sk__lead{margin:0;max-width:38em;font-size:clamp(.94rem,.9rem + .22vw,1.05rem);
  line-height:2;color:var(--ink-mute)}
body.p-stem .sk__spec{list-style:none;margin:clamp(8px,1.4vw,20px) 0 0;padding:0;width:100%}
body.p-stem .sk__spec li{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(10px,1.8vw,28px);align-items:baseline;padding:clamp(14px,1.8vw,22px) 0;
  border-top:1px solid var(--gold-line)}
body.p-stem .sk__lb{font-size:.72rem;letter-spacing:.14em;font-weight:700;color:var(--accent-deep)}
body.p-stem .sk__v{display:block;font-family:var(--font-serif);font-weight:800;
  font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);line-height:1.35;letter-spacing:-.014em;color:var(--mocha)}
body.p-stem .sk__d{display:block;margin-top:6px;font-size:.85rem;line-height:1.9;color:var(--ink-mute)}
/* 참고 시안은 카드 줄이 사진 위로 겹쳐 올라오지만, 이 페이지는 오른쪽 글 칸에
   주의 항목 세 줄이 더 있어 겹치면 글자를 덮는다. 겹침 없이 아래에 둔다. */
body.p-stem .sk__bottom{position:relative;z-index:2;max-width:var(--sbw);margin:clamp(30px,4.4vw,66px) auto 0}
body.p-stem .sk__lead2{margin:0 0 clamp(16px,2vw,26px);font-family:var(--font-serif);font-weight:700;
  font-size:clamp(1.02rem,.94rem + .4vw,1.24rem);line-height:1.5;color:var(--mocha)}
body.p-stem .sk__cards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,26px)}
body.p-stem .sk__cards li{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.3vw,17px);
  padding:clamp(20px,2.4vw,34px) clamp(12px,1.6vw,22px);background:#fff;border:1px solid var(--line-soft);
  border-radius:clamp(14px,1.8vw,24px);box-shadow:0 24px 44px -34px rgba(44,39,36,.42);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
body.p-stem .sk__cards li:hover{transform:translateY(-4px);box-shadow:0 30px 52px -32px rgba(44,39,36,.5)}
body.p-stem .sk__cno{padding:.36em 1.05em;border-radius:var(--radius-pill);background:var(--mocha);
  color:var(--gold-soft);font-family:var(--font-serif);font-weight:800;font-size:.76rem;letter-spacing:.12em;
  line-height:1.35}
body.p-stem .sk__cico{width:clamp(34px,3.4vw,46px);height:clamp(34px,3.4vw,46px);color:var(--accent-deep)}
body.p-stem .sk__cico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
body.p-stem .sk__ct{text-align:center;font-size:clamp(.88rem,.85rem + .2vw,.98rem);font-weight:600;
  line-height:1.5;color:var(--mocha)}
body.p-stem .sk__note{max-width:var(--sbw);margin:clamp(22px,3vw,40px) auto 0;font-size:.76rem;
  line-height:1.9;color:var(--ink-mute)}
/* ==========================================================================
   좁은 화면
   ========================================================================== */
@media(max-width:1000px){
  body.p-stem .se__inner{grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,34px)}
  body.p-stem .se__media{min-height:0;aspect-ratio:16/10;max-height:440px}
  body.p-stem .sr__inner{grid-template-columns:minmax(0,1fr);gap:clamp(16px,3vw,26px)}
  /* static 으로 두면 안쪽 .sr__bg/.sr__veil(absolute)이 기준을 잃고
     페이지 전체를 덮는다 — relative 로 낮춘다 */
  body.p-stem .sr__side{position:relative;top:auto;min-height:0}
  body.p-stem .sk__top{grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,32px)}
  body.p-stem .sk__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  body.p-stem .se__bul{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  body.p-stem .sr__row{grid-template-columns:minmax(0,1fr)}
  body.p-stem .sk__spec li{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media(max-width:560px){
  body.p-stem .sk__cards{grid-template-columns:minmax(0,1fr)}
  body.p-stem .se__cases li{flex-direction:column;align-items:flex-start;gap:7px}
  body.p-stem .se__no{min-width:0}
}