/* =========================================================
   UP BEAUTY - Mobile layout (max-width:760px only)
   Loaded with media="(max-width:760px)" so PC is untouched.
   ========================================================= */
@media (max-width:760px){

/* ---------- 0. Base / performance ---------- */
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{overflow-x:hidden;-webkit-tap-highlight-color:rgba(208,133,122,.15)}
main{overflow:clip!important}
main *{-webkit-tap-highlight-color:transparent}
/* light reveal: no blur, no clip-path (both are expensive on phones) */
[data-reveal],[data-mask],[data-clip],main section [style*="filter: blur"]{filter:none!important;clip-path:none!important}
[data-reveal],[data-mask],main section [style*="translateY(26px)"]{transition-duration:.55s!important}
main section [style*="translateY(26px)"],main section [style*="translateY(22px)"]{transform:translateY(14px)!important}
[data-clip]{clip-path:none!important}
[data-parallax]{transform:none!important;inset:0!important}
[data-fx]{display:none!important}
[data-glow]{animation:none!important}
image-slot{touch-action:pan-x pan-y pinch-zoom}
video{background:#F3E9E4}

/* ---------- 1. Typography ---------- */
main h2{font-size:23px!important;line-height:1.42!important;letter-spacing:-0.035em!important}
main section p{font-size:15px!important;line-height:1.75!important}
main section [style*="font-size: 17.5px"],main section [style*="font-size: 17px"],main section [style*="font-size: 16.5px"]{font-size:15px!important;line-height:1.7!important}
main section [style*="font-size: 18px"],main section [style*="font-size: 18.5px"]{font-size:16px!important}
main section [style*="font-size: 22px; font-weight: 600"]{font-size:18px!important}
/* eyebrow labels (01 —— OUR PHILOSOPHY) */
main section [style*="letter-spacing: 0.34em"]{font-size:11px!important;letter-spacing:.26em!important;gap:10px!important}
main section [style*="letter-spacing: 0.34em"] > span:first-child{font-size:16px!important}
main section [style*="letter-spacing: 0.34em"] > [data-line]{width:22px!important}
main section [style*="letter-spacing: 0.26em"],main section [style*="letter-spacing: 0.24em"],main section [style*="letter-spacing: 0.22em"]{letter-spacing:.16em!important}

/* ---------- 2. Section rhythm ---------- */
main > section{padding:60px 20px!important;scroll-margin-top:64px!important}
main > section > div{max-width:none!important}
/* section head (eyebrow + h2 + intro) */
main > section > div > div[style*="justify-content: space-between"][style*="margin-bottom"]{margin-bottom:28px!important;gap:14px!important}
main > section > div > div[style*="justify-content: space-between"] > p{max-width:none!important;color:#6E625F!important}
main section div[style*="flex-direction: column; gap: 20px;"]{gap:14px!important}

/* ---------- 3. Generic horizontal lists -> clean swipe carousels ---------- */
main section div[style*="overflow-x: auto"]{
  display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;
  grid-auto-columns:80%!important;gap:12px!important;overflow-x:auto!important;overflow-y:hidden!important;
  scroll-snap-type:x mandatory;scrollbar-width:none!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  margin:0 -20px!important;padding:2px 20px 6px!important;scroll-padding:0 20px;
  touch-action:pan-x pan-y}
main section div[style*="overflow-x: auto"]::-webkit-scrollbar{display:none}
main section div[style*="overflow-x: auto"] > *{scroll-snap-align:start;min-width:0}
@media (pointer:fine){main section div[style*="overflow-x: auto"],main [data-m="tri"]{cursor:grab}}

/* ---------- 4. Header / floating bar / footer ---------- */
/* header comes back when scrolling up (classes set by ub-mobile.js) */
html.ub-hdr-fixed header{position:fixed!important;top:0!important;left:0;right:0;transform:translateY(-110%);transition:transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 6px 18px rgba(37,34,32,.07)}
html.ub-hdr-fixed.ub-hdr-show header{transform:none}
header > div{padding:10px 16px!important}
header img[alt="UP BEAUTY 업뷰티"]{height:28px!important}
header button[aria-label="메뉴"]{width:40px!important;height:40px!important}
/* bottom CTA bar */
div[style*="position: fixed"][style*="bottom: 12px"]{left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;gap:8px!important}
div[style*="position: fixed"][style*="bottom: 12px"] > a{height:50px!important;font-size:15px!important;box-shadow:0 6px 18px rgba(37,34,32,.14)!important}
/* footer */
footer{padding:44px 22px calc(96px + env(safe-area-inset-bottom))!important}
footer > div:first-child{gap:28px!important}
footer > div:first-child > div{flex:1 1 100%!important}
footer img[alt="UP BEAUTY 업뷰티"]{width:132px!important}
footer p{font-size:10.5px!important;letter-spacing:.26em!important}
footer > div:first-child > div:nth-child(2){flex-direction:row!important;flex-wrap:wrap!important;gap:8px 18px!important}
footer > div:first-child > div:nth-child(2) > span{flex:1 1 100%}
footer > div:first-child > div:nth-child(2) > a{font-size:13px!important;letter-spacing:.1em!important;min-height:32px}
footer > div:first-child > div:nth-child(3){gap:8px!important}
footer > div:first-child > div:nth-child(3) > a{min-height:34px}
footer > div:last-child{margin-top:28px!important;padding-top:18px!important;font-size:11px!important}

/* ---------- 5. Lightbox (Home / Cases) ---------- */
main div[style*="position: fixed"][style*="z-index: 200"]{padding:0!important;align-items:flex-end!important}
main div[style*="position: fixed"][style*="z-index: 200"] > div{width:100%!important;max-height:92vh;overflow-y:auto;border-radius:20px 20px 0 0!important}
main div[style*="position: fixed"][style*="z-index: 200"] > div > div:first-child{flex:1 1 100%!important}
main div[style*="position: fixed"][style*="z-index: 200"] > div > div:last-child{flex:1 1 100%!important;padding:18px 20px calc(20px + env(safe-area-inset-bottom))!important;gap:12px!important}

/* =========================================================
   HOME
   ========================================================= */
/* Hero */
main > [data-screen-label="01 Hero"]:has([data-m="tri"]){padding:0 0 36px!important}
main > [data-screen-label="01 Hero"] > div:nth-child(2){padding:44px 22px 26px!important;gap:12px!important}
[data-screen-label="01 Hero"] img[alt="UP BEAUTY 업뷰티"]{width:132px!important}
[data-screen-label="01 Hero"] h1{font-size:31px!important;line-height:1.15!important}
[data-screen-label="01 Hero"] span[style*="white-space: nowrap"]{font-size:9px!important;letter-spacing:.22em!important;white-space:normal!important}
/* 3 hero photos -> swipe cards */
main [data-m="tri"]{display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;grid-auto-columns:68%!important;
  gap:10px!important;overflow-x:auto!important;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 20px 4px!important;scroll-padding:0 20px;overscroll-behavior-x:contain}
[data-m="tri"]::-webkit-scrollbar{display:none}
main [data-m="tri"] > figure{scroll-snap-align:start;gap:10px!important}
[data-m="tri"] > figure > div:first-child{border-radius:14px;box-shadow:0 10px 24px rgba(160,100,90,.16)}
main [data-m="tri"] figcaption{flex-direction:row!important;align-items:baseline!important;padding-top:10px!important}
main [data-m="tri"] figcaption span:first-child{font-size:18px!important}
main [data-m="tri"] figcaption span:last-child{font-size:11px!important;letter-spacing:.2em!important}

/* At a glance -> horizontal quick menu */
[data-screen-label="02 At a Glance"]{padding:28px 0 24px!important}
[data-screen-label="02 At a Glance"] > div > div:first-child{padding:0 20px;margin-bottom:16px!important}
[data-screen-label="02 At a Glance"] > div > div:first-child > span:first-child{font-size:11px!important}
[data-screen-label="02 At a Glance"] > div > div:first-child > span:last-child{font-size:15px!important}
[data-screen-label="02 At a Glance"] [data-line]{display:none}
[data-screen-label="02 At a Glance"] div[style*="minmax(150px, 1fr)"]{display:flex!important;gap:8px!important;overflow-x:auto;padding:0 20px 4px;scrollbar-width:none;scroll-snap-type:x proximity}
[data-screen-label="02 At a Glance"] div[style*="minmax(150px, 1fr)"]::-webkit-scrollbar{display:none}
[data-screen-label="02 At a Glance"] div[style*="minmax(150px, 1fr)"] > a{flex:0 0 auto!important;flex-direction:row!important;gap:8px!important;align-items:center!important;
  padding:8px 14px 8px 8px;border:1px solid #EFCFC6;border-radius:999px;background:#FFF;scroll-snap-align:start}
[data-screen-label="02 At a Glance"] div[style*="minmax(150px, 1fr)"] > a > span:first-child{width:30px!important;height:30px!important;font-size:14px!important;flex:none}
[data-screen-label="02 At a Glance"] div[style*="minmax(150px, 1fr)"] > a > span:nth-child(2){font-size:11.5px!important;letter-spacing:.12em!important;white-space:nowrap}
[data-screen-label="02 At a Glance"] div[style*="minmax(150px, 1fr)"] > a > span:nth-child(3){display:none}

/* Philosophy */
[data-screen-label="03 Philosophy"] > div:first-child{gap:36px!important}
[data-screen-label="03 Philosophy"] > div:first-child > div:first-child{flex:1 1 100%!important}
[data-screen-label="03 Philosophy"] > div:first-child > div:first-child > div:first-child{margin-bottom:22px!important}
[data-screen-label="03 Philosophy"] div[style*="margin-top: -24px"]{margin-top:0!important;gap:14px!important}
[data-screen-label="03 Philosophy"] > div:first-child > div:last-child{max-width:300px!important;margin:0 auto!important;flex:0 0 auto!important}
[data-screen-label="03 Philosophy"] > div:first-child > div:last-child span[style*="letter-spacing: 0.22em"]{font-size:11px!important}
[data-screen-label="03 Philosophy"] > div:first-child > div:last-child span[style*="font-size: 14.5px"]{font-size:12px!important}
[data-screen-label="03 Philosophy"] > div:nth-child(2){margin-top:40px!important;padding-top:32px!important;gap:16px!important}
[data-screen-label="03 Philosophy"] > div:nth-child(2) > div:first-child{font-size:34px!important;line-height:1.15!important}

/* Signature program -> 2-column cards */
[data-screen-label="04 Signature Program"] div[style*="minmax(min(100%, 280px), 1fr)"]{grid-template-columns:1fr 1fr!important;gap:22px 12px!important}
[data-screen-label="04 Signature Program"] div[style*="minmax(min(100%, 280px), 1fr)"] > a{gap:8px!important}
[data-screen-label="04 Signature Program"] div[style*="minmax(min(100%, 280px), 1fr)"] > a > div:first-child{border-radius:12px;aspect-ratio:4/5!important}
[data-screen-label="04 Signature Program"] div[style*="minmax(min(100%, 280px), 1fr)"] > a > span:nth-child(2){padding-top:8px!important}
[data-screen-label="04 Signature Program"] div[style*="minmax(min(100%, 280px), 1fr)"] > a > span:nth-child(2) > span:first-child{font-size:15px!important}
[data-screen-label="04 Signature Program"] div[style*="minmax(min(100%, 280px), 1fr)"] > a > span:nth-child(2) > span:last-child{font-size:9.5px!important;letter-spacing:.12em!important}
[data-screen-label="04 Signature Program"] div[style*="minmax(min(100%, 280px), 1fr)"] > a > span:nth-child(3){font-size:16px!important}
[data-screen-label="04 Signature Program"] div[style*="minmax(min(100%, 280px), 1fr)"] > a > span:nth-child(4){font-size:13px!important;line-height:1.6!important;min-height:0!important;color:#6E625F!important}
[data-screen-label="04 Signature Program"] div[style*="minmax(min(100%, 280px), 1fr)"] > a > span:nth-child(5){display:none!important}
[data-screen-label="04 Signature Program"] div[style*="minmax(min(100%, 280px), 1fr)"] > a > span:nth-child(6){font-size:10.5px!important;letter-spacing:.14em!important;color:#D0857A}

/* Personal design: hide the circle diagram (the list already says the same) */
[data-screen-label="05 Personal Design"] div[style*="flex: 1 1 340px; max-width: 460px"]{display:none!important}
[data-screen-label="05 Personal Design"] li{grid-template-columns:34px 1fr!important;gap:2px 10px!important;padding:15px 0!important;align-items:start!important}
[data-screen-label="05 Personal Design"] li > span:first-child{grid-row:1/3;font-size:20px!important}
[data-screen-label="05 Personal Design"] li > span:nth-child(2){font-size:10.5px!important;letter-spacing:.16em!important;color:#D0857A}
[data-screen-label="05 Personal Design"] li > span:nth-child(3){font-size:15px!important}

/* Lip color */
[data-screen-label="06 Lip Color Map"] div[style*="flex-wrap: wrap; gap: clamp(24px, 3vw, 40px)"]{gap:18px!important}
[data-screen-label="06 Lip Color Map"] div[style*="flex: 0 0 38%"]{flex:1 1 100%!important;min-width:0!important;border-radius:14px}
[data-screen-label="06 Lip Color Map"] div[style*="flex: 1 1 420px"]{flex:1 1 100%!important}
[data-screen-label="06 Lip Color Map"] div[style*="repeat(3, 1fr); grid-template-rows"] > span{width:46px!important}
[data-screen-label="06 Lip Color Map"] div[style*="font-size: 14.5px"]{font-size:11.5px!important}
[data-screen-label="06 Lip Color Map"] div[style*="minmax(200px, 1fr)"]{grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:16px!important}
[data-screen-label="06 Lip Color Map"] div[style*="minmax(200px, 1fr)"] > div{padding:14px 12px!important;gap:10px!important;align-items:flex-start!important;border-radius:12px}
[data-screen-label="06 Lip Color Map"] div[style*="minmax(200px, 1fr)"] > div > span:first-child{width:26px!important;height:26px!important;font-size:12px!important}
[data-screen-label="06 Lip Color Map"] div[style*="minmax(200px, 1fr)"] span[style*="font-size: 17.5px"]{font-size:14px!important}
[data-screen-label="06 Lip Color Map"] div[style*="minmax(200px, 1fr)"] span[style*="font-size: 15px"]{font-size:11.5px!important;line-height:1.45}
[data-screen-label="06 Lip Color Map"] p[style*="font-size: 14.5px"]{font-size:12px!important}

/* Selected cases (also Cases > Gallery) */
main section div[style*="flex-wrap: wrap; gap: 8px; margin: 0px 0px 32px"]{flex-wrap:nowrap!important;overflow-x:auto;margin:0 -20px 18px!important;padding:0 20px;scrollbar-width:none;gap:6px!important}
main section div[style*="flex-wrap: wrap; gap: 8px; margin: 0px 0px 32px"]::-webkit-scrollbar{display:none}
main section div[style*="flex-wrap: wrap; gap: 8px; margin: 0px 0px 32px"] > button{flex:none;height:36px!important;padding:0 14px!important;font-size:11.5px!important}
main section div[style*="repeat(3, minmax(0px, 1fr)); gap: clamp(8px, 1.6vw, 20px)"]{grid-template-columns:1fr 1fr!important;gap:14px 8px!important;align-items:start}
/* photo grids: photos keep their own height, so line them up at the top */
[data-screen-label="04 Signature Program"] div[style*="minmax(min(100%, 280px), 1fr)"],[data-screen-label="10 Space & Hygiene"] div[style*="minmax(min(100%, 280px), 1fr)"],main section div[style*="minmax(min(100%, 220px), 1fr)"],main [data-m="tri"]{align-items:start!important}
main div[style*="position: fixed"][style*="z-index: 200"] video{object-fit:contain!important}
main section div[style*="repeat(3, minmax(0px, 1fr)); gap: clamp(8px, 1.6vw, 20px)"] > figure{gap:6px!important}
main section div[style*="repeat(3, minmax(0px, 1fr)); gap: clamp(8px, 1.6vw, 20px)"] > figure > div:first-child{border-radius:8px}
main section div[style*="repeat(3, minmax(0px, 1fr)); gap: clamp(8px, 1.6vw, 20px)"] button[aria-label="크게 보기"]{width:28px!important;height:28px!important;right:6px!important;bottom:6px!important;font-size:15px!important}
main section div[style*="repeat(3, minmax(0px, 1fr)); gap: clamp(8px, 1.6vw, 20px)"] figcaption{padding-top:4px!important;border-top:0!important}
main section div[style*="repeat(3, minmax(0px, 1fr)); gap: clamp(8px, 1.6vw, 20px)"] figcaption span{font-size:9.5px!important;letter-spacing:.14em!important}
main section button[aria-label="이전"],main section button[aria-label="다음"]{width:42px!important;height:42px!important}

/* Why UP BEAUTY -> 2-col compact cards */
[data-screen-label="08 Why UP BEAUTY"] div[style*="minmax(min(100%, 320px), 1fr)"]{grid-template-columns:1fr 1fr!important;gap:8px!important}
[data-screen-label="08 Why UP BEAUTY"] div[style*="minmax(min(100%, 320px), 1fr)"] > div{padding:18px 14px 20px!important;gap:6px!important;border-radius:14px}
[data-screen-label="08 Why UP BEAUTY"] div[style*="minmax(min(100%, 320px), 1fr)"] > div > span[aria-hidden]{width:90px!important;height:90px!important;right:-30px!important;top:-30px!important}
[data-screen-label="08 Why UP BEAUTY"] div[style*="minmax(min(100%, 320px), 1fr)"] > div > span:nth-child(2){font-size:26px!important;line-height:1!important}
[data-screen-label="08 Why UP BEAUTY"] div[style*="minmax(min(100%, 320px), 1fr)"] > div > span:nth-child(3){font-size:15.5px!important}
[data-screen-label="08 Why UP BEAUTY"] div[style*="minmax(min(100%, 320px), 1fr)"] > div > span:nth-child(4){font-size:9px!important;letter-spacing:.12em!important}
[data-screen-label="08 Why UP BEAUTY"] div[style*="minmax(min(100%, 320px), 1fr)"] > div > span:nth-child(5){font-size:12.5px!important;line-height:1.55!important}

/* Director */
[data-screen-label="09 Director"] > div{gap:28px!important}
[data-screen-label="09 Director"] > div > div:first-child{flex:1 1 100%!important;min-width:0!important}
[data-screen-label="09 Director"] > div > div:first-child > div:first-child{border-radius:14px}
[data-screen-label="09 Director"] > div > div:last-child{min-width:0!important}
main section div[style*="grid-template-columns: 110px minmax(0px, 1fr)"]{grid-template-columns:1fr!important;gap:14px!important;padding:22px 0!important}
main section div[style*="grid-template-columns: 30px minmax(0px, 1fr)"]{grid-template-columns:24px 1fr!important;gap:10px!important;padding:16px 0!important}
main section div[style*="grid-template-columns: 30px minmax(0px, 1fr)"] span[style*="font-size: 24px"]{font-size:19px!important}
main section div[style*="grid-template-columns: 30px minmax(0px, 1fr)"] span[style*="font-size: 17px"]{font-size:15px!important}
main section span[style*="padding: 6px 12px; border-radius: 999px"]{font-size:12px!important;padding:5px 10px!important}

/* Space & hygiene -> 2x2 */
[data-screen-label="10 Space & Hygiene"] div[style*="minmax(min(100%, 280px), 1fr)"]{grid-template-columns:1fr 1fr!important;gap:16px 10px!important}
[data-screen-label="10 Space & Hygiene"] figure{gap:8px!important}
[data-screen-label="10 Space & Hygiene"] figure > div:first-child{border-radius:12px}
[data-screen-label="10 Space & Hygiene"] figcaption{padding-top:8px!important;align-items:baseline}
[data-screen-label="10 Space & Hygiene"] figcaption span:first-child{font-size:15px!important}
[data-screen-label="10 Space & Hygiene"] figcaption span:last-child{font-size:12.5px!important;text-align:right}

/* Reviews: no inner scrolling (it was trapping the finger) */
[data-screen-label="12 Review"] div[style*="overflow-x: auto"]{grid-auto-columns:78%!important;align-items:start}
[data-screen-label="12 Review"] article{height:auto!important;max-height:none!important;border-radius:20px!important}
[data-screen-label="12 Review"] article > div[style*="overflow-y: auto"]{overflow:visible!important;flex:none!important;padding:12px 10px 16px!important}
[data-screen-label="12 Review"] article p{font-size:13px!important;line-height:1.55!important}

/* Process (Home & Price) -> vertical steps */
main section div[style*="grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 6px; overflow-x: auto"],
main section div[style*="grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 6px; overflow-x: auto"]{
  display:flex!important;flex-direction:column!important;overflow:visible!important;margin:0!important;padding:0!important;gap:6px!important;scroll-snap-type:none}
main section div[style*="repeat(5, minmax(0px, 1fr)); gap: 6px; overflow-x: auto"] > div,
main section div[style*="repeat(5, minmax(150px, 1fr)); gap: 6px; overflow-x: auto"] > div{
  clip-path:none!important;display:grid!important;grid-template-columns:52px 1fr!important;grid-template-rows:auto auto;column-gap:12px!important;row-gap:2px!important;
  padding:16px 16px!important;border-radius:14px;align-items:baseline;min-height:0!important}
main section div[style*="repeat(5, minmax(0px, 1fr)); gap: 6px; overflow-x: auto"] > div > span:first-child,
main section div[style*="repeat(5, minmax(150px, 1fr)); gap: 6px; overflow-x: auto"] > div > span:first-child{grid-row:1/4;font-size:30px!important;line-height:1!important;align-self:center}
main section div[style*="repeat(5, minmax(0px, 1fr)); gap: 6px; overflow-x: auto"] > div > span:nth-child(2),
main section div[style*="repeat(5, minmax(150px, 1fr)); gap: 6px; overflow-x: auto"] > div > span:nth-child(2){font-size:16.5px!important}
main section div[style*="repeat(5, minmax(0px, 1fr)); gap: 6px; overflow-x: auto"] > div > span:nth-child(3),
main section div[style*="repeat(5, minmax(150px, 1fr)); gap: 6px; overflow-x: auto"] > div > span:nth-child(3){display:none}
main section div[style*="repeat(5, minmax(0px, 1fr)); gap: 6px; overflow-x: auto"] > div > span:nth-child(4),
main section div[style*="repeat(5, minmax(150px, 1fr)); gap: 6px; overflow-x: auto"] > div > span:nth-child(4){font-size:13.5px!important;line-height:1.55!important}
main section div[style*="grid-template-columns: 3fr 1fr 1fr"]{display:none!important}

/* Journal accordion */
[data-screen-label="14 UP Journal"] button[style*="grid-template-columns: 56px 110px"]{grid-template-columns:30px 1fr 22px!important;grid-template-rows:auto auto;gap:6px 10px!important;padding:18px 2px!important}
[data-screen-label="14 UP Journal"] button[style*="grid-template-columns: 56px 110px"] > span:nth-child(1){grid-row:1/3;font-size:19px!important;align-self:start}
[data-screen-label="14 UP Journal"] button[style*="grid-template-columns: 56px 110px"] > span:nth-child(2){grid-column:2;grid-row:1;font-size:11px!important;padding:4px 10px!important}
[data-screen-label="14 UP Journal"] button[style*="grid-template-columns: 56px 110px"] > span:nth-child(3){grid-column:2;grid-row:2;font-size:15.5px!important;line-height:1.45!important;text-align:left}
[data-screen-label="14 UP Journal"] button[style*="grid-template-columns: 56px 110px"] > span:nth-child(4){grid-column:3;grid-row:1/3;align-self:center;font-size:20px!important}
[data-screen-label="14 UP Journal"] div[style*="padding: 4px 16px 40px"]{padding:0 2px 26px!important;gap:16px!important}
[data-screen-label="14 UP Journal"] div[style*="padding: 4px 16px 40px"] > div:first-child{flex:1 1 100%!important}
[data-screen-label="14 UP Journal"] div[style*="padding: 4px 16px 40px"] > div:first-child > div{aspect-ratio:auto!important;border-radius:12px;background:#F3E9E4}
[data-screen-label="14 UP Journal"] div[style*="padding: 4px 16px 40px"] > div:first-child > div > img{position:static!important;display:block;width:100%!important;height:auto!important;object-fit:contain!important}
[data-screen-label="14 UP Journal"] div[style*="padding: 4px 16px 40px"] > div:last-child{gap:12px!important}

/* =========================================================
   SUB PAGES (About / Program / Cases / Price / Contact)
   ========================================================= */
/* sub-page hero */
main > section[data-screen-label="01 Hero"]:not(:has([data-m="tri"])){padding:44px 22px 40px!important}
main > section[data-screen-label="01 Hero"]:not(:has([data-m="tri"])) > div{gap:16px!important}
main > section[data-screen-label="01 Hero"]:not(:has([data-m="tri"])) h1{font-size:46px!important;line-height:1.02!important}
main > section[data-screen-label="01 Hero"]:not(:has([data-m="tri"])) span[style*="width: 1px; height: 56px"]{height:28px!important}
main > section[data-screen-label="01 Hero"]:not(:has([data-m="tri"])) p[style*="font-weight: 600"]{font-size:18px!important;line-height:1.5!important}
main > section[data-screen-label="01 Hero"]:not(:has([data-m="tri"])) p{font-size:14.5px!important}
main > section[data-screen-label="01 Hero"]:not(:has([data-m="tri"])) a[style*="height: 44px"]{height:38px!important;padding:0 16px!important;font-size:11.5px!important}

/* label | value rows -> label on top */
main section div[style*="grid-template-columns: 150px minmax(0px, 1fr)"]{grid-template-columns:88px 1fr!important;gap:10px!important;padding:16px 0!important}
[data-screen-label="02 Program Detail"] div[style*="grid-template-columns: 150px minmax(0px, 1fr)"]{grid-template-columns:1fr!important;gap:8px!important}

/* About: lecture photos 2x2 */
main section figure[style*="aspect-ratio: 21 / 9"]{aspect-ratio:16/10!important;border-radius:12px}
main section div[style*="minmax(min(100%, 220px), 1fr)"]{grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:8px!important}
main section div[style*="minmax(min(100%, 220px), 1fr)"] > figure{border-radius:12px}
main section figure figcaption[style*="position: absolute; left: 12px; bottom: 12px"]{left:8px!important;bottom:8px!important;right:8px;padding:4px 8px!important;font-size:11px!important;line-height:1.35}

/* Program: tabs -> swipe chips */
[data-screen-label="02 Program Detail"] div[style*="flex-wrap: wrap; gap: 6px; margin-bottom: 32px"]{flex-wrap:nowrap!important;overflow-x:auto;margin:0 -20px 18px!important;padding:0 20px 2px;scrollbar-width:none;gap:6px!important;scroll-snap-type:x proximity}
[data-screen-label="02 Program Detail"] div[style*="flex-wrap: wrap; gap: 6px; margin-bottom: 32px"]::-webkit-scrollbar{display:none}
[data-screen-label="02 Program Detail"] div[style*="flex-wrap: wrap; gap: 6px; margin-bottom: 32px"] > button{flex:0 0 auto!important;padding:10px 14px!important;gap:8px!important;border-radius:12px;scroll-snap-align:start}
[data-screen-label="02 Program Detail"] div[style*="flex-wrap: wrap; gap: 6px; margin-bottom: 32px"] > button > span:first-child{font-size:17px!important}
[data-screen-label="02 Program Detail"] div[style*="flex-wrap: wrap; gap: 6px; margin-bottom: 32px"] > button span[style*="font-size: 12.5px"]{font-size:10px!important;letter-spacing:.1em!important}
[data-screen-label="02 Program Detail"] div[style*="flex-wrap: wrap; gap: 6px; margin-bottom: 32px"] > button span[style*="font-size: 15px"]{font-size:13.5px!important}
[data-screen-label="02 Program Detail"] div[style*="flex: 1 1 420px; max-width: 600px"]{flex:1 1 100%!important}
[data-screen-label="02 Program Detail"] div[style*="flex: 1 1 420px; max-width: 600px"] > div{border-radius:14px}
[data-screen-label="02 Program Detail"] div[style*="flex-wrap: wrap; gap: clamp(32px, 4vw, 64px)"]{gap:20px!important}
[data-screen-label="02 Program Detail"] div[style*="flex: 1 1 440px"]{flex:1 1 100%!important}
[data-screen-label="02 Program Detail"] span[style*="padding: 8px 16px; border-radius: 999px"]{padding:6px 12px!important;font-size:13px!important}

/* big feature cards (Contact channels, Price after-guide, ...) */
main section [style*="min-height: 340px"]{min-height:0!important;padding:22px 20px!important;gap:8px!important;border-radius:16px}
main section [style*="min-height: 340px"] > span:first-child{width:48px!important;height:48px!important;border-radius:14px!important}
main section [style*="min-height: 340px"] > span:first-child svg{width:24px!important;height:24px!important}
main section [style*="min-height: 340px"] span[style*="font-size: 26px"]{font-size:19px!important}
main section [style*="min-height: 340px"] > span:last-child{padding-top:12px!important;margin-top:8px!important}
main section div[style*="minmax(min(100%, 300px), 1fr)"]{gap:10px!important}

/* Contact: booking flow */
[data-screen-label="03 Booking Flow"] div[style*="flex-wrap: wrap; align-items: stretch; gap: 12px"]{gap:6px!important;flex-direction:column}
[data-screen-label="03 Booking Flow"] div[style*="flex: 1 1 200px"]{flex:none!important;padding:18px 18px 20px!important;gap:6px!important;border-radius:14px}
[data-screen-label="03 Booking Flow"] div[style*="flex: 1 1 200px"] > div:first-child > span:first-child{width:40px!important;height:40px!important}
[data-screen-label="03 Booking Flow"] div[style*="flex: 1 1 200px"] span[style*="font-size: 23px"]{font-size:18px!important}
[data-screen-label="03 Booking Flow"] div[style*="flex-wrap: wrap; align-items: stretch; gap: 12px"] > span{width:28px!important;height:28px!important;transform:rotate(90deg);font-size:13px!important}
/* Contact: location */
[data-screen-label="04 Location"] > div{gap:28px!important}
[data-screen-label="04 Location"] > div > div{flex:1 1 100%!important}
[data-screen-label="04 Location"] img{border-radius:12px}
[data-screen-label="04 Location"] div[style*="margin-top: -16px"]{margin-top:0!important}

/* Cases: stories / instagram */
[data-screen-label="04 Stories"] article > div:last-child{padding:16px 16px 18px!important;gap:10px!important}
[data-screen-label="04 Stories"] article p{font-size:14px!important;line-height:1.65!important}
[data-screen-label="04 Stories"] div[style*="overflow-x: auto"]{align-items:start}
[data-screen-label="05 Instagram"] div[style*="overflow-x: auto"]{grid-auto-columns:62%!important}
[data-screen-label="05 Instagram"] a[style*="height: 52px"]{height:42px!important;margin-bottom:22px!important;font-size:13px!important}
[data-screen-label="02 By Program"] div[style*="overflow-x: auto"]{grid-auto-columns:66%!important}
[data-screen-label="02 By Program"] div[style*="overflow-x: auto"] span[style*="font-size: 19px"]{font-size:16px!important}
[data-screen-label="02 By Program"] div[style*="overflow-x: auto"] div[style*="aspect-ratio: 1 / 1"]{border-radius:12px}

/* About: space carousel captions */
main section figcaption[style*="grid-template-columns: 52px minmax(0px, 1fr)"]{grid-template-columns:34px 1fr!important}
main section div[style*="overflow-x: auto"] div[style*="aspect-ratio: 1 / 1"]{border-radius:12px}

/* Contact CTA (all pages) */
main > section[data-screen-label$="Contact"]:last-of-type,main > section[data-screen-label$="CTA"]{padding:64px 22px!important}
main > section[data-screen-label$="Contact"] h2,main > section[data-screen-label$="CTA"] h2{font-size:22px!important}
main > section[data-screen-label$="Contact"] a[data-magnetic],main > section[data-screen-label$="CTA"] a[data-magnetic]{min-width:0!important;width:100%;flex:none!important;height:52px!important;transform:none!important}
main > section[data-screen-label$="CTA"] > div > a[style*="height: 60px"]{height:52px!important;width:100%;max-width:340px;box-sizing:border-box!important;padding:0 20px!important;justify-content:center!important;align-items:center!important;text-align:center;flex:none!important;transform:none!important;font-size:15px!important;font-weight:600}
main > section[data-screen-label$="Contact"] a[data-magnetic],main > section[data-screen-label$="CTA"] a[data-magnetic]{box-sizing:border-box!important;justify-content:center!important;max-width:340px}
main > section[data-screen-label$="CTA"] > div{gap:20px!important}
main > section[data-screen-label$="Contact"] div[style*="justify-content: center; gap: 12px"],main > section[data-screen-label$="CTA"] div[style*="justify-content: center; gap: 12px"]{width:100%;gap:8px!important}

/* ---------- photo frames: shapes matched to the treatment photos (mostly 3:4 portrait) ---------- */
main section div[style*="repeat(3, minmax(0px, 1fr)); gap: clamp(8px, 1.6vw, 20px)"] div[style*="aspect-ratio: 1 / 1"]{aspect-ratio:4/5!important}
[data-screen-label="12 Review"] article div[style*="aspect-ratio: 1 / 1"]{aspect-ratio:4/5!important}
[data-screen-label="04 Three Questions"] div[style*="aspect-ratio: 1 / 1"],[data-screen-label="07 Space"] div[style*="aspect-ratio: 1 / 1"],[data-screen-label="02 By Program"] div[style*="aspect-ratio: 1 / 1"]{aspect-ratio:3/4!important}
main section div[style*="minmax(min(100%, 220px), 1fr)"] > figure[style*="aspect-ratio: 1 / 1"]{aspect-ratio:7/10!important}
[data-screen-label="02 Program Detail"] div[style*="flex: 1 1 420px; max-width: 600px"] > div{aspect-ratio:3/4!important}
/* very different photo shapes: whole photo + soft blurred copy behind it (set by ub-mobile.js) */
[data-ub-fill]{overflow:hidden!important;isolation:isolate}
[data-ub-fill]::before{content:"";position:absolute;inset:-12%;background:var(--ub-fill) center/cover no-repeat;filter:blur(18px) saturate(1.05);transform:translateZ(0);pointer-events:none}
[data-ub-contain]{object-fit:contain!important}
main [role="img"]{background-color:transparent!important}
/* Instagram reels played on the page */
iframe[data-ub-hide]{display:none!important}
.ub-reel{position:absolute;inset:0;z-index:2;cursor:pointer;background:#2A2422;-webkit-tap-highlight-color:transparent}
.ub-reel video{position:relative;display:block;width:100%;height:100%;object-fit:contain;background:transparent}
.ub-reel-btn{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 6px 20px rgba(0,0,0,.25);transition:opacity .25s,transform .25s;pointer-events:none}
.ub-reel-btn::after{content:"";position:absolute;left:23px;top:18px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #D0857A}
.ub-reel.is-playing .ub-reel-btn{opacity:0;transform:scale(.8)}
.ub-reel.is-loading .ub-reel-btn{opacity:.6}}