@charset "utf-8"; /* ========================================================================== 152.css — 울쎄라피 프라임 (slug: ulthera) 페이지 전용 모든 셀렉터는 .fs-p-152 스코프. 색은 --fs-* 토큰만 사용(새 hex 0개). ========================================================================== */ /* -------------------------------------------------------------------------- 1. A01 · 크림2 스플릿 히어로 — 좌 카피 / 우 모델 누끼 2026-09-30 승인자 「히어로 규격 표준으로 + 사진을 모델로(누끼) · 다른 히어로 모델 자리에」. 옛 장비컷(device-full.png)은 보관 — 이 페이지 다른 자리에 다시 쓸 예정. 백업 _src/build/backup-152-0930-hero. 모델 = assets/ulthera/hero-model-0930.png(_src/gen/152-hero/ · BiRefNet 누끼). 좌우 대칭 크롭이라 이미지 가로 중심 = 머리 중심. -------------------------------------------------------------------------- */ .fs-p-152 .fs-ulthera-hero { position: relative; } /* 2026-09-30 승인자 «2안» — 바탕은 카테고리(쁘띠/레이저 블러시), 강조색은 제품(울쎄라 옐로우). 바탕 = body.fs-cat-petit 의 --fs-cat-hex(#F3E3E0, 151·150·140·122 와 같은 값) — 채도 .12 라 «중립» 으로 읽혀 옐로우와 안 싸운다. 강조 = 킥커·밑줄·로고 PRIME 띠 전부 옐로우(11절 토큰). 킥커는 형제와 같은 --fs-teal-dk → 이 페이지에선 #8A5C00(블러시 위 4.67:1). */ .fs-p-152 .fs-ulthera-hero { background-color: var(--fs-cat-hex); } /* 2026-09-30 승인자 「①·② 만」 — ① 투명 헤더 ② 모델 뒤 명암(글로우). ③ 모델 확대 · ④ 색온도는 안 했다. ① 흰 헤더 막대를 걷고 블러시 히어로 위에 얹는다(HTML: .fs-page--overlay 래퍼 + .fs-header--overlay — 80·151 과 같은 셸). fs.css 오버레이는 다크 전제(흰 글자·흰 호버·검정 스크림)라 쁘띠 형제(150·151)와 같은 «밝은 변형» 으로 뒤집는다. 메뉴 안개(연한색 .62→.34→0)·메뉴 글자 후광·래퍼 바탕은 fs.css 카테고리 블록(body.fs-cat-petit)이 준다. 헤더 색은 사이트 공통 토프 그대로(11절 옐로우는 본문 섹션만). 모델 크기는 그대로(높이 = 히어로 94%). 히어로가 화면 맨 위부터 시작하므로 정수리가 메뉴 안개 밑(1838 y≈41)에 온다 — 56·143 과 같은 자리. ② 150·140·151 의 i2i 워시(«블러시 → 모델 뒤 웜 화이트, wide feathered falloff, no split»)를 CSS 방사형으로 옮겼다. 형제 1920 실측 바탕: 왼쪽 243,227,224 · x1000 ≈249,237,234 · x1150 ≈253,247,244 · 오른끝 243,227,224. */ .fs-p-152 { --fs-header-overlay-bg: transparent; } .fs-p-152 .fs-header--overlay { color: var(--fs-ink); } .fs-p-152 .fs-gnb__link:not([aria-current="page"]) { font-weight: 400; } .fs-p-152 .fs-header--overlay .fs-gnb__link:hover, .fs-p-152 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; } .fs-p-152 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); opacity: 1; } .fs-p-152 .fs-header--overlay .fs-util__link:hover, .fs-p-152 .fs-header--overlay .fs-util__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; } .fs-p-152 .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; } .fs-p-152 .fs-util__sep { opacity: .4; } .fs-p-152 .fs-ulthera-hero { background: radial-gradient(ellipse 30% 110% at 62% 50%, rgba(var(--fs-cat-light), 1) 0%, rgba(var(--fs-cat-light), .5) 35%, rgba(var(--fs-cat-light), 0) 100%), var(--fs-cat-hex); } @media (max-width: 1023px) { /* 스택에서는 모델이 아래쪽 — 글로우도 모델 뒤(아래 가운데)로 */ .fs-p-152 .fs-ulthera-hero { background: radial-gradient(ellipse 60% 45% at 50% 72%, rgba(var(--fs-cat-light), 1) 0%, rgba(var(--fs-cat-light), .5) 35%, rgba(var(--fs-cat-light), 0) 100%), var(--fs-cat-hex); } } .fs-p-152 .fs-ulthera-hero__grid { display: grid; gap: var(--fs-gap-col); align-items: center; max-inline-size: var(--fs-container); margin-inline: auto; padding-inline: var(--fs-gutter); padding-block: clamp(36px, 27.1px + 2.47vw, 76px) clamp(34px, 26.3px + 2.14vw, 68px); } /* 2026-09-29 PPT 「리뷰티 수정(울쎄라)」 1 — 칩 3장 삭제 · 카피 «전체적으로 확대» (1920 기준 약 1.3배). */ .fs-p-152 .fs-ulthera-hero__kicker { font-size: clamp(18px, 16.39px + 0.449vw, 25px); font-weight: 400; letter-spacing: 0.1em; color: var(--fs-teal-dk); } .fs-p-152 .fs-ulthera-hero__title { margin-block-start: var(--fs-sp-4); font-size: clamp(28px, 21.54px + 1.795vw, 56px); font-weight: 700; line-height: var(--fs-lh-tight); letter-spacing: var(--fs-ls-tight); color: var(--fs-ink); } .fs-p-152 .fs-ulthera-hero__logo { display: block; margin-block-start: var(--fs-sp-6); inline-size: clamp(160px, 132.31px + 7.693vw, 280px); block-size: auto; } .fs-p-152 .fs-ulthera-hero__lead { margin-block-start: var(--fs-sp-6); max-inline-size: 30em; color: var(--fs-ink-soft); font-size: clamp(19px, 17.15px + 0.513vw, 27px); } .fs-p-152 .fs-ulthera-hero__media { margin: 0; } .fs-p-152 .fs-ulthera-hero__media img { display: block; } /* ≥1024 — 모델은 흐름 밖(절대배치)이라 히어로 높이는 fs.css 통일 규격(min-height)이 정한다. 옛 장비컷은 380x557 이 흐름 안에 있어 1206~1767px 에서 히어로를 최대 +37px(1440: 590) 밀어 올렸다. 자리 = 형제 히어로(151 · 143 · 140) 1920 실측: 머리 중심 68.8~69.9% · 정수리는 히어로 위 변 바로 밑 · 몸은 아래 변까지. 이 페이지는 헤더가 불투명(오버레이 아님)이라 정수리를 «히어로 위 변 + 6%» 에 둔다(56 과 같은 비). img 높이 94% → 1920 에서 573px · 머리(정수리~턱) 305px(형제 268~350). 아래 변은 드레스·머리·팔을 가로로 자른 하드컷이다 — inset-block-end:0 을 풀면 절단면이 뜬다. */ @media (min-width: 1024px) { .fs-p-152 .fs-ulthera-hero { overflow: hidden; } /* fs.css 가 히어로를 grid 로 만들어 이 그리드가 margin-inline:auto 에 «내용 폭» 으로 줄어 가운데 모였다 (1920 카피 x446). 폭을 채워 형제 히어로와 같은 컨테이너 왼쪽 축(1920 x240)에 카피를 세운다. */ .fs-p-152 .fs-ulthera-hero__grid { inline-size: 100%; max-inline-size: calc(var(--fs-container) + var(--fs-gutter) * 2); grid-template-columns: minmax(0, 1fr); } .fs-p-152 .fs-ulthera-hero__media { position: absolute; inset: 0; pointer-events: none; } .fs-p-152 .fs-ulthera-hero__media img { position: absolute; inset-block-end: 0; inset-inline-start: 69.2%; block-size: 94%; inline-size: auto; max-inline-size: none; translate: -50% 0; } } /* <1024 — 카피 위 / 모델 아래 스택. 모델 아래 변 = 히어로 아래 변(그리드 아래 여백 0), 폰에서는 거터를 걷어 화면 폭 그대로. */ @media (max-width: 1023px) { .fs-p-152 .fs-ulthera-hero__grid { padding-block-end: 0; } /* 09-30 ① 투명 헤더가 히어로 위에 얹히므로 카피 위 여백에 헤더 높이를 더한다 — 카피 자리는 전과 같다 */ .fs-p-152 .fs-ulthera-hero__grid { padding-block-start: calc(var(--fs-header-h) + clamp(36px, 27.1px + 2.47vw, 76px)); } .fs-p-152 .fs-ulthera-hero__media { margin-inline: calc(var(--fs-gutter) * -1); } .fs-p-152 .fs-ulthera-hero__media img { inline-size: min(100%, 560px); block-size: auto; margin-inline: auto; } } /* -------------------------------------------------------------------------- 2. A05 · 질문 인용 밴드 -------------------------------------------------------------------------- */ /* 2026-09-30 승인자 — 모델 밴드 사진을 빼고(보관) 장비 누끼를 크림 칸 안에서 「그래서…」 끝줄까지 내린다. 참고 이미지(반얀트리)처럼 사진이 칸 아래 변을 넘는다. 배경은 «누끼만»(아치·다크 틀 중 승인자 선택, 프리뷰 _review/152-device-preview.html). 누끼 assets/ulthera/device-cutout.png = device-full.png 와 같은 크롭을 원본에서 다시 딴 것(_src/gen/152-device/cutout.py). */ .fs-p-152 .fs-ulthera-ask { --ul-ask-band: var(--ul-beige); /* 09-30 승인자 A안 — 팔레트 밖 #EBEBDF(뺀 모델 사진 바탕) → 3절 비교 밴드와 같은 베이지 */ --ul-ask-in: clamp(24px, -4.6px + 1.99vw, 64px); /* 옛 밴드 카피 들여쓰기와 같은 값 */ --ul-ask-pad: clamp(32px, 4px + 2.9vw, 60px); /* 글 칸 안쪽 여백 — 제목·인용 왼쪽 축을 맞춘다 */ } .fs-p-152 .fs-ulthera-ask__device { position: relative; margin: 0; } /* 최소 높이 = 세로 비율 0.71. aspect-ratio 로 걸면 grid stretch 를 이겨 글 열보다 짧아진다 — 패딩 스페이서로 */ .fs-p-152 .fs-ulthera-ask__device::before { content: ""; display: block; padding-block-start: 140.77%; } .fs-p-152 .fs-ulthera-ask__device img { /* 원본에서 잘린 아래 변은 바닥 22% 를 녹여 감춘다 */ position: absolute; left: 50%; bottom: 0; translate: -50% 0; block-size: 96%; inline-size: 100%; object-fit: contain; object-position: 50% 100%; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); } .fs-p-152 .fs-ulthera-ask__head .fs-display { margin-block-start: var(--fs-sp-4); color: var(--fs-ink); } .fs-p-152 .fs-ulthera-ask__q { /* 09-30 승인자 「노란색 바 더 두껍게」 2 → 4px, 글 위치는 그대로 */ padding-inline-start: calc(var(--fs-sp-7) - 2px); border-inline-start: 4px solid var(--fs-teal); font-size: var(--fs-t-h2); line-height: var(--fs-lh-head); } .fs-p-152 .fs-ulthera-ask__so { margin-block-start: var(--fs-sp-9); font-size: var(--fs-t-h3); font-weight: 700; letter-spacing: var(--fs-ls-tight); } .fs-p-152 .fs-ulthera-ask__logo { display: block; margin-block-start: var(--fs-sp-4); inline-size: 118px; block-size: auto; } @media (min-width: 1024px) { .fs-p-152 .fs-ulthera-ask { display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 920fr); column-gap: clamp(48px, -40px + 8.6vw, 160px); } .fs-p-152 .fs-ulthera-ask__band { grid-column: 2; grid-row: 1; background: var(--ul-ask-band); } /* 09-30 승인자 「기계 뒤 박스 빼고 텍스트 뒤에만」 */ .fs-p-152 .fs-ulthera-ask__device { /* 칸 안쪽에서 시작 · 아래 변 = 글 열 끝 */ grid-column: 1; grid-row: 1 / span 2; align-self: stretch; z-index: 1; margin-block-start: var(--ul-ask-in); margin-inline-start: var(--ul-ask-in); } .fs-p-152 .fs-ulthera-ask__head { grid-column: 2; grid-row: 1; align-self: center; padding: clamp(40px, 13px + 2.6vw, 90px) var(--ul-ask-pad); } .fs-p-152 .fs-ulthera-ask__body { grid-column: 2; grid-row: 2; align-self: end; padding-block-start: clamp(40px, 13px + 2.6vw, 90px); padding-inline-start: var(--ul-ask-pad); } } @media (max-width: 1023px) { /* DOM 순서대로 제목 · 장비 · 인용 — 겹치지 않는다 */ .fs-p-152 .fs-ulthera-ask { display: grid; gap: var(--fs-sp-8); } .fs-p-152 .fs-ulthera-ask__band { display: none; } .fs-p-152 .fs-ulthera-ask__device { inline-size: min(100%, 440px); margin-inline: auto; } } /* -------------------------------------------------------------------------- 3. A10 · 베이지 비교 밴드 (패널 비율만 이 페이지 값으로) 2026-09-29 PPT 2 — 다크(--ink2) → 밝은 베이지, 배경 장비 사진 레이어 삭제. 색은 11절. -------------------------------------------------------------------------- */ .fs-p-152 .fs-ulthera-compare-sec > .fs-container { position: relative; z-index: 1; } .fs-p-152 .fs-ulthera-compare__panel { position: relative; } .fs-p-152 .fs-ulthera-compare__panel img { display: block; inline-size: 100%; block-size: auto; object-fit: cover; } /* 좌(466fr) · 우(554fr) 트랙 폭이 달라 같은 비율이면 높이가 어긋난다 — 높이를 맞춘다 */ .fs-p-152 .fs-ulthera-compare__panel--left img { aspect-ratio: 466 / 220; object-position: 50% 34%; } .fs-p-152 .fs-ulthera-compare__panel--right img { aspect-ratio: 554 / 220; object-position: 50% 50%; } .fs-p-152 .fs-ulthera-compare__panel .fs-labelbar { inline-size: 100%; } /* -------------------------------------------------------------------------- 4. A03 · 왜 울쎄라피프라임 — 강점 3행 -------------------------------------------------------------------------- */ /* 2026-09-29 PPT 3 — «직사각형 안의 이미지보다 전체 이미지가 다 보이게». 얼굴 크롭(scan-zone) → 원본 전체 컷(장비 + 모델 + 노란 DeepSEE 콜아웃)으로. 원본 회색 배경(#ECECEC)을 흰색으로 구워 상자 경계가 없다. 원본이 머리카락·스탠드 중간에서 끊겨 있어 아래만 흰색으로 풀어 준다. */ .fs-p-152 .fs-ulthera-why__media { display: grid; gap: var(--fs-gap-card); margin: 0; } .fs-p-152 .fs-ulthera-why__shot { margin: 0; } .fs-p-152 .fs-ulthera-why__shot img { display: block; inline-size: 100%; block-size: auto; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); } .fs-p-152 .fs-ulthera-strength { list-style: none; margin: var(--fs-sp-9) 0 0; padding: 0; display: grid; gap: var(--fs-sp-5); } .fs-p-152 .fs-ulthera-strength li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fs-sp-5); align-items: center; padding-block: var(--fs-sp-5); border-block-start: 1px solid var(--fs-line); } .fs-p-152 .fs-ulthera-strength li:last-child { border-block-end: 1px solid var(--fs-line); } .fs-p-152 .fs-ulthera-strength figure { margin: 0; } .fs-p-152 .fs-ulthera-strength img { display: block; inline-size: clamp(62px, 55.5px + 1.79vw, 90px); block-size: auto; } .fs-p-152 .fs-ulthera-strength strong { display: block; font-size: var(--fs-t-h3); font-weight: 700; color: var(--fs-teal-dk); letter-spacing: var(--fs-ls-tight); } .fs-p-152 .fs-ulthera-strength span { display: block; margin-block-start: var(--fs-sp-1); font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-ink-soft); } /* -------------------------------------------------------------------------- 5. ★ 시그니처 · DeepSEE 실시간 뷰포트 (SEE → PLAN → TREAT) 숨긴 라디오 + label 탭. JS 없음. -------------------------------------------------------------------------- */ .fs-p-152 .fs-ulthera-see { margin-block-start: var(--fs-sp-10); } .fs-p-152 .fs-ulthera-see__frame { position: relative; margin: 0 auto; max-inline-size: 680px; } .fs-p-152 .fs-ulthera-see__frame > img { display: block; inline-size: 100%; block-size: auto; } /* 모니터 LCD 영역을 정확히 덮는 합성 화면 (원본에 구워진 한글 카피를 가린다). ★ 인셋을 줄이지 마라 — deepsee-frame.jpg 는 LCD 안쪽 우하단에 모델 머리카락이 남아 있는 크롭이고, 이 오버레이가 그 영역을 덮는 것을 전제로 잘랐다. 좌 4.39% / 상 6.74% / 91.23%×87.83% 가 네 변 베젤이 보이는 최대 인셋이다. */ .fs-p-152 .fs-ulthera-see__screen { position: absolute; inset-block-start: 6.74%; inset-inline-start: 4.39%; inline-size: 91.23%; block-size: 87.83%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--fs-ink-band); border: 1px solid var(--fs-teal-dk); } .fs-p-152 .fs-ulthera-see__cap { display: block; text-align: center; padding-block: clamp(4px, 2.2px + 0.51vw, 12px); background: var(--fs-teal-text); color: var(--fs-on-dark); font-size: clamp(11px, 9.4px + 0.45vw, 18px); font-weight: 700; letter-spacing: var(--fs-ls-tight); } .fs-p-152 .fs-ulthera-see__stage { display: grid; overflow: hidden; grid-template-columns: minmax(0, 1fr); padding: clamp(5px, 2.5px + 0.71vw, 16px) clamp(4px, 1.5px + 0.71vw, 15px); } @media (min-width: 600px) { .fs-p-152 .fs-ulthera-see__stage { grid-template-columns: 15% minmax(0, 1fr) 15%; column-gap: clamp(4px, 1.6px + 0.29vw, 8px); } } .fs-p-152 .fs-ulthera-see__center { display: grid; align-content: center; justify-items: center; gap: clamp(6px, 2.3px + 0.26vw, 10px); } /* 장비 화면에 표기된 값만 옮긴 사이드 레일 (트랜스듀서 4종 · 깊이 눈금 3종) */ .fs-p-152 .fs-ulthera-see__rail { display: none; font-family: var(--fs-font-en); font-size: clamp(8px, 5.86px + 0.357vw, 11px); letter-spacing: var(--fs-ls-tight); line-height: 1.1; color: var(--fs-teal); white-space: nowrap; } @media (min-width: 600px) { .fs-p-152 .fs-ulthera-see__rail { display: grid; align-content: space-between; gap: var(--fs-sp-1); } } .fs-p-152 .fs-ulthera-see__rail b { font-weight: 700; letter-spacing: var(--fs-ls-wide); color: var(--fs-on-dark); padding-block-end: 3px; border-block-end: 1px solid var(--fs-teal-dk); } .fs-p-152 .fs-ulthera-see__rail span { display: block; padding-block: 2px; } .fs-p-152 .fs-ulthera-see__rail .is-on { padding-inline: 4px; background: var(--fs-teal-dk); color: var(--fs-on-dark); font-weight: 700; } .fs-p-152 .fs-ulthera-see__rail--r { text-align: end; } /* 화면 안 단계 표시줄 — 아래 STEP 탭과 같은 상태를 화면 안에서 되비춘다 */ .fs-p-152 .fs-ulthera-see__prog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; inline-size: min(100%, 380px); font-family: var(--fs-font-en); font-size: clamp(8px, 5.86px + 0.357vw, 11px); letter-spacing: var(--fs-ls-wide); } .fs-p-152 .fs-ulthera-see__prog > label { display: block; text-align: center; padding-block: 3px; cursor: pointer; border-block-end: 2px solid var(--fs-teal-dk); color: var(--fs-teal); } .fs-p-152 .fs-ulthera-see__scan { position: relative; display: block; inline-size: min(100%, 380px); } .fs-p-152 .fs-ulthera-see__scan > img { display: block; inline-size: 100%; block-size: auto; } .fs-p-152 .fs-ulthera-see__mark { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; transition: opacity var(--fs-dur-slow) var(--fs-ease); } .fs-p-152 .fs-ulthera-see__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--fs-sp-3); padding: clamp(4px, 2.2px + 0.51vw, 12px) clamp(6px, 3.5px + 0.71vw, 17px); border-block-start: 1px solid var(--fs-teal-dk); font-family: var(--fs-font-en); font-size: clamp(8px, 6.6px + 0.38vw, 14px); font-weight: 700; letter-spacing: var(--fs-ls-wide); color: var(--fs-teal); } .fs-p-152 .fs-ulthera-see__foot em { font-style: normal; color: var(--fs-on-dark); } .fs-p-152 .fs-ulthera-see__now { display: none; } /* 라디오 상태 → 화면 레이어 + 탭 상태 */ .fs-p-152 #fs-ust-2:checked ~ .fs-ulthera-see__body .fs-ulthera-see__mark--plan, .fs-p-152 #fs-ust-3:checked ~ .fs-ulthera-see__body .fs-ulthera-see__mark--plan, .fs-p-152 #fs-ust-3:checked ~ .fs-ulthera-see__body .fs-ulthera-see__mark--treat { opacity: 1; } .fs-p-152 #fs-ust-1:checked ~ .fs-ulthera-see__body .fs-ulthera-see__prog--1, .fs-p-152 #fs-ust-2:checked ~ .fs-ulthera-see__body .fs-ulthera-see__prog--2, .fs-p-152 #fs-ust-3:checked ~ .fs-ulthera-see__body .fs-ulthera-see__prog--3 { background: var(--fs-teal-text); border-block-end-color: var(--fs-teal); color: var(--fs-on-dark); } .fs-p-152 #fs-ust-1:checked ~ .fs-ulthera-see__body .fs-ulthera-see__now--1, .fs-p-152 #fs-ust-2:checked ~ .fs-ulthera-see__body .fs-ulthera-see__now--2, .fs-p-152 #fs-ust-3:checked ~ .fs-ulthera-see__body .fs-ulthera-see__now--3 { display: inline; } /* 스텝 탭 */ .fs-p-152 .fs-ulthera-see__steps { list-style: none; margin: var(--fs-gap-title) 0 0; padding: 0; display: grid; gap: var(--fs-gap-card); } @media (min-width: 768px) { .fs-p-152 .fs-ulthera-see__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .fs-p-152 .fs-ulthera-see__step { display: grid; justify-items: center; gap: var(--fs-sp-5); block-size: 100%; padding: var(--fs-sp-5) var(--fs-sp-5) var(--fs-sp-6); background: var(--fs-white); border: 3px solid var(--fs-line); cursor: pointer; text-align: center; transition: background var(--fs-dur) var(--fs-ease), border-color var(--fs-dur) var(--fs-ease); } .fs-p-152 .fs-ulthera-see__step .fs-pill { background: var(--fs-step-idle); color: var(--fs-ink-soft); } .fs-p-152 .fs-ulthera-see__thumb { margin: 0; inline-size: 100%; max-inline-size: 142px; } .fs-p-152 .fs-ulthera-see__thumb img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 360 / 416; object-fit: cover; } .fs-p-152 .fs-ulthera-see__thumb .fs-labelbar { font-family: var(--fs-font-en); letter-spacing: var(--fs-ls-wide); background: var(--fs-step-idle); color: var(--fs-ink-soft); } .fs-p-152 .fs-ulthera-see__txt { font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-ink-soft); } .fs-p-152 #fs-ust-1:checked ~ .fs-ulthera-see__body li:nth-child(1) .fs-ulthera-see__step, .fs-p-152 #fs-ust-2:checked ~ .fs-ulthera-see__body li:nth-child(2) .fs-ulthera-see__step, .fs-p-152 #fs-ust-3:checked ~ .fs-ulthera-see__body li:nth-child(3) .fs-ulthera-see__step { background: var(--fs-white); border-color: var(--fs-teal); } .fs-p-152 #fs-ust-1:checked ~ .fs-ulthera-see__body li:nth-child(1) .fs-pill, .fs-p-152 #fs-ust-2:checked ~ .fs-ulthera-see__body li:nth-child(2) .fs-pill, .fs-p-152 #fs-ust-3:checked ~ .fs-ulthera-see__body li:nth-child(3) .fs-pill { background: var(--fs-teal-text); color: var(--fs-on-dark); } .fs-p-152 #fs-ust-1:checked ~ .fs-ulthera-see__body li:nth-child(1) .fs-labelbar, .fs-p-152 #fs-ust-2:checked ~ .fs-ulthera-see__body li:nth-child(2) .fs-labelbar, .fs-p-152 #fs-ust-3:checked ~ .fs-ulthera-see__body li:nth-child(3) .fs-labelbar { background: var(--fs-teal-dk); color: var(--fs-on-dark); } .fs-p-152 #fs-ust-1:focus-visible ~ .fs-ulthera-see__body li:nth-child(1) .fs-ulthera-see__step, .fs-p-152 #fs-ust-2:focus-visible ~ .fs-ulthera-see__body li:nth-child(2) .fs-ulthera-see__step, .fs-p-152 #fs-ust-3:focus-visible ~ .fs-ulthera-see__body li:nth-child(3) .fs-ulthera-see__step { outline: 3px solid var(--fs-teal-dk); outline-offset: 3px; } /* -------------------------------------------------------------------------- 6. A06 · 효과 POINT 카드 2026-09-29 PPT 5 — 아이콘 삭제 · 라벨바 상자 삭제 · 효과 글자를 카드 가운데에 크게. -------------------------------------------------------------------------- */ .fs-p-152 .fs-ulthera-effects { margin-block-start: var(--fs-gap-title); } .fs-p-152 .fs-ulthera-effect { display: grid; justify-items: center; align-content: center; gap: clamp(16px, 13.23px + 0.769vw, 28px); block-size: 100%; padding: clamp(32px, 25.54px + 1.795vw, 60px) var(--fs-sp-5); background: var(--fs-cream); text-align: center; } .fs-p-152 .fs-ulthera-effect__t { font-size: clamp(24px, 21.69px + 0.641vw, 34px); font-weight: 700; line-height: var(--fs-lh-head); letter-spacing: var(--fs-ls-tight); color: var(--fs-ink); text-wrap: balance; } /* -------------------------------------------------------------------------- 7. A09 · 다크 선언 밴드 -------------------------------------------------------------------------- */ .fs-p-152 .fs-ulthera-say > .fs-container { position: relative; z-index: 1; } .fs-p-152 .fs-ulthera-say .fs-section__bg img { opacity: .17; object-position: 50% 30%; } .fs-p-152 .fs-ulthera-say__mark { font-family: var(--fs-font-en); font-size: var(--fs-t-kicker); letter-spacing: var(--fs-ls-wide); color: var(--fs-teal); } .fs-p-152 .fs-ulthera-say h2 { margin-block-start: var(--fs-sp-7); color: var(--fs-on-dark); } /* 2026-09-29 승인자 「full stop 하고 중간에 spacing 좀」 — 두 문장(…아닙니다. / 어디를…)을 문장 블록으로 나눠 사이를 띄운다.
하나를 블록 경계로 바꾼 것이라 텍스트 노드는 그대로다(textdiff 0). */ .fs-p-152 .fs-ulthera-say__s { display: block; } .fs-p-152 .fs-ulthera-say__s + .fs-ulthera-say__s { margin-block-start: .6em; } .fs-p-152 .fs-ulthera-say__rule { inline-size: 64px; block-size: 2px; background: var(--fs-teal); margin: var(--fs-sp-9) auto 0; } /* -------------------------------------------------------------------------- 8. 포시즌 PICK + 부작용 고지 2026-09-29 PPT 6 — 깊이 도해·원문 표기 표 삭제, PICK «전체적으로 확대». 고지문(※ 시술 효과는…)은 이 페이지 유일한 부작용 고지라 PICK 아래로 옮겨 남겼다. -------------------------------------------------------------------------- */ .fs-p-152 .fs-ulthera-spec__note { margin-block-start: var(--fs-sp-5); font-size: var(--fs-t-xs); color: var(--fs-muted-2); } .fs-p-152 .fs-ulthera-pick { display: grid; gap: var(--fs-sp-7); align-items: center; padding: clamp(28px, 20.62px + 2.051vw, 60px) clamp(20px, 11.69px + 2.308vw, 56px); background: var(--fs-white); border-block-start: 2px solid var(--fs-teal); } /* 1024~1279 에서 2열이면 장비 옆 글줄이 95px 로 굶어 «초음파 / 리프팅» 으로 접힌다 — 그 구간은 위아래로 */ @media (min-width: 1280px) { .fs-p-152 .fs-ulthera-pick { grid-template-columns: minmax(0, 500fr) minmax(0, 860fr); column-gap: var(--fs-gap-col); } } /* 두 장비 카드 — 원문 보드의 «울쎄라피 프라임 + 써마지 FLX» 구성을 그대로 옮긴다 */ .fs-p-152 .fs-ulthera-pick__head { display: grid; justify-items: start; gap: var(--fs-sp-4); align-content: start; } .fs-p-152 .fs-ulthera-pick__t { font-size: var(--fs-t-h2); font-weight: 700; line-height: var(--fs-lh-tight); letter-spacing: var(--fs-ls-tight); } .fs-p-152 .fs-ulthera-pick__head .fs-lead { margin-block-start: var(--fs-sp-1); font-size: var(--fs-t-quote); } .fs-p-152 .fs-ulthera-pick__head .fs-btn { margin-block-start: var(--fs-sp-3); } .fs-p-152 .fs-ulthera-pick__duo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-gap-card); } .fs-p-152 .fs-ulthera-pick__duo > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fs-sp-5); align-items: center; padding-block-start: var(--fs-sp-4); border-block-start: 1px solid var(--fs-line); } .fs-p-152 .fs-ulthera-pick__axis b { display: block; font-size: var(--fs-t-h3); font-weight: 700; color: var(--fs-teal-dk); letter-spacing: var(--fs-ls-tight); } /* 2026-09-30 승인자 — 설명 줄을 위, 제목을 아래로(원문 보드의 «…끌어올리는 초음파 리프팅» 어순). 간격은 설명 아래로 옮겼다 */ .fs-p-152 .fs-ulthera-pick__axis span { display: block; margin-block-end: var(--fs-sp-1); font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-ink-soft); } @media (max-width: 599px) { .fs-p-152 .fs-ulthera-pick__duo { grid-template-columns: minmax(0, 1fr); } /* 360 — 장비 컷 옆 글줄이 120px 남짓이라 «초음파 / 리프팅» 으로 접히고, 바는 «울쎄라피 / 프라임» 으로 접힌다 */ .fs-p-152 .fs-ulthera-pick__fig { inline-size: 124px; } .fs-p-152 .fs-ulthera-pick__fig .fs-labelbar { padding-inline: 4px; } .fs-p-152 .fs-ulthera-pick__axis b { font-size: var(--fs-t-sub); } } /* -------------------------------------------------------------------------- 10. 보정 — 앞 블록들이 필요로 하는 표시 규칙 -------------------------------------------------------------------------- */ .fs-p-152 .fs-ulthera-see-sec__lead { max-inline-size: 62ch; margin: var(--fs-sp-6) auto 0; } .fs-p-152 .fs-ulthera-see-sec .fs-en { margin-block-start: var(--fs-sp-4); } .fs-p-152 .fs-ulthera-see__step { position: relative; } .fs-p-152 .fs-ulthera-see__thumb { display: block; } .fs-p-152 .fs-ulthera-see__txt { display: block; } .fs-p-152 .fs-ulthera-see__mon { position: relative; display: block; } .fs-p-152 .fs-ulthera-see__mark--plan, .fs-p-152 .fs-ulthera-see__mark--treat { color: var(--fs-teal); } .fs-p-152 .fs-ulthera-see__frame .fs-labelbar { inline-size: 100%; } .fs-p-152 .fs-ulthera-pick__fig { margin: 0; inline-size: clamp(120px, 101.54px + 5.128vw, 200px); } .fs-p-152 .fs-ulthera-pick__fig img { display: block; inline-size: 100%; block-size: auto; } .fs-p-152 .fs-ulthera-pick__fig .fs-labelbar { inline-size: 100%; } /* --- 세로 길이 조정 (GD-LESSONS 상한 7,500px) -------------------------------- 57 처럼 섹션마다 여백을 달리한다 — 도해가 빽빽한 섹션은 좁게, 다크 선언 밴드는 넓게. */ .fs-p-152 #ask, .fs-p-152 #why, .fs-p-152 #effect, .fs-p-152 #spec, .fs-p-152 #contact, .fs-p-152 .fs-ulthera-see-sec { padding-block: clamp(42px, 29.2px + 3.06vw, 86px); } .fs-p-152 #compare { padding-block: clamp(48px, 34.4px + 3.26vw, 96px); } .fs-p-152 #statement { padding-block: clamp(52px, 36.9px + 3.68vw, 104px); } .fs-p-152 .fs-ulthera-see__steps { margin-block-start: var(--fs-sp-8); } .fs-p-152 .fs-ulthera-effects { margin-block-start: var(--fs-sp-10); } /* -------------------------------------------------------------------------- 9. 모션 무효화 — 레이아웃은 동일하게 유지 -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .fs-p-152 .fs-ulthera-see__mark, .fs-p-152 .fs-ulthera-see__step { transition: none !important; } } /* ── 2026-08-27 · VIBE LOCK 스윕 ─────────────────────────────────── */ /* LOCK 7 — / 의 UA 기본값 bolder 는 부모 700 위에서 900 으로 계산된다. Pretendard 서브셋에 900 페이스가 없어 화면은 그대로이나 계산값이 상한을 넘는다. */ .fs-p-152 strong, .fs-p-152 b { font-weight: 700; } /* ── 2026-08-27 · VIBE LOCK 5 — 다크 밴드는 페이지에 하나다 ───────────────── 3번째 A10 「다크 비교 밴드」(fs-nose-compare-sec)는 확정 시안 57 이 단일 다크 밴드로 쓰는 아키타입이라 그대로 두고, 7번째 A09 선언 밴드를 밝은 밴드로 내린다. (섹션의 fs-section--ink 클래스는 HTML 에서 제거했다) */ .fs-p-152 .fs-ulthera-say h2 { color: var(--fs-ink); } .fs-p-152 .fs-ulthera-say__mark { color: var(--fs-teal-text); } /* 시안 틸은 흰 위 2.28:1 */ .fs-p-152 .fs-ulthera-say .fs-neon-fg { color: var(--fs-teal-text); } /* 네온은 흰 위 1.41:1 */ .fs-p-152 .fs-ulthera-say .fs-section__bg img { opacity: .10; } /* 흰 바탕에서 .17 은 탁해진다 */ /* ══════════════════════════════════════════════════════════════════════════ 2026-08-27 · 진단·수정 패스 ══════════════════════════════════════════════════════════════════════════ */ /* F1 [버그] A09 선언 밴드의 마감 선이 한 번도 그어지지 않았다. 은 display 를 주지 않아 inline 으로 계산되고, inline 박스에서는 inline-size/block-size 가 무시된다 → computed 0x0. margin:auto 도 인라인에서는 가운데정렬을 하지 않는다. 블록으로 되돌린다. */ .fs-p-152 .fs-ulthera-say__rule { display: block; } /* F2 [접근성] 부작용 고지문이 크림 밴드 위에서 3.67:1 (AA 4.5 미달). --fs-muted-2 는 «약관 본문» 용이고 그 4.12:1 은 흰 배경 전제값이다. 크림(#F6F1EC) 위에서 4.5 를 넘는 것은 --fs-ink-soft(9.38:1) 뿐이다. */ .fs-p-152 .fs-ulthera-spec__note { color: var(--fs-ink-soft); } /* F3 [접근성] 장비 화면 시뮬레이션 안의 12px 미만 글자 — 전부 이 페이지 고유분이다. 1920 에서 11px 3종(rail·prog), 360 에서 8px 3종(prog·foot·now) + cap 11.02px. ★ 사이드 레일은 white-space:nowrap 이라 글자를 키우면 15% 고정 열에서 잘린다. 열을 auto 로 풀어 레일이 자기 폭을 갖게 한 뒤 크기를 올린다. */ .fs-p-152 .fs-ulthera-see__cap { font-size: clamp(12px, 10.4px + 0.45vw, 18px); } .fs-p-152 .fs-ulthera-see__prog { font-size: clamp(12px, 11.23px + 0.214vw, 14px); } .fs-p-152 .fs-ulthera-see__foot { font-size: clamp(12px, 11.1px + 0.25vw, 14px); } .fs-p-152 .fs-ulthera-see__rail { font-size: clamp(12px, 11.5px + 0.083vw, 13px); } @media (min-width: 600px) { .fs-p-152 .fs-ulthera-see__stage { grid-template-columns: auto minmax(0, 1fr) auto; } } /* F5 [마이크로] 섹션 제목 뒤 70px 틸 선 (delay .5s) — 48 검증분. ★ «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다. fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 붙이지 않는다. → 기본을 「그어진 상태」로, 실제 리빌 대상에만 초기 은닉. */ .fs-p-152 .fs-nose-head h2, .fs-p-152 #why h2 { position: relative; } .fs-p-152 .fs-nose-head h2::after, .fs-p-152 #why h2::after { content: ""; display: block; width: 70px; height: 1px; margin-block-start: var(--fs-sp-4); background: var(--fs-teal); transform-origin: left center; transform: scaleX(1); transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s; } :root.fs-js .fs-p-152 h2.fs-reveal:not(.is-in)::after, :root.fs-js .fs-p-152 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); } /* F6 [마이크로] 호버 — 프레임은 고정, 사진만 scale(1.045). 그림자는 쓰지 않는다. 라벨바는 함께 커지면 글자가 흔들리므로 색만 한 단계 내린다(LOCK 2 유지). */ .fs-p-152 .fs-ulthera-pick__fig, .fs-p-152 .fs-ulthera-see__thumb { overflow: hidden; } .fs-p-152 .fs-ulthera-pick__fig img, .fs-p-152 .fs-ulthera-see__thumb img { transition: transform var(--fs-dur-slow) var(--fs-ease-out); } @media (hover: hover) and (pointer: fine) { .fs-p-152 .fs-ulthera-pick__duo > li:hover .fs-ulthera-pick__fig img, .fs-p-152 .fs-ulthera-see__step:hover .fs-ulthera-see__thumb img { transform: scale(1.045); } .fs-p-152 .fs-ulthera-pick__duo > li:hover .fs-labelbar { background: var(--fs-teal-dk); transition: background var(--fs-dur) var(--fs-ease); } } /* F7 reduced-motion — 선은 그어진 채로, 호버 확대는 즉시 */ @media (prefers-reduced-motion: reduce) { .fs-p-152 .fs-nose-head h2::after, .fs-p-152 #why h2::after { transform: scaleX(1) !important; transition: none !important; } .fs-p-152 .fs-ulthera-pick__fig img, .fs-p-152 .fs-ulthera-see__thumb img { transition: none !important; } } /* F8 [반응형] 효과 POINT 카드가 태블릿에서 마지막 줄에 1장만 남는다. .fs-grid--3 은 600~1023px 구간이 2열이라 카드 3장이 «2 + 고아 1» 이 되고 POINT 03 옆에 빈 반 줄이 생긴다(768px 렌더 확인). 같은 섹션의 STEP 탭이 768px 부터 이미 3열이므로 리듬을 맞춰 600px 부터 3열로 둔다. 카드 안은 필·효과 글자뿐이라 600/3=180px 에서도 글자가 쪼개지지 않는다. */ @media (min-width: 600px) and (max-width: 1023px) { .fs-p-152 .fs-ulthera-effects { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ══════════════════════════════════════════════════════════════════════════ 11. 옐로우 톤 — 2026-09-29 PPT 「리뷰티 수정(울쎄라)」 2·3·5 「울쎄라 페이지는 옐로우 계열 색으로 전체적으로 톤 맞춰주세요 < 이 색감으로」 견본 = 로고타입 PRIME 띠 #FCAC0D (원본 imweb 페이지도 노란 콜아웃이었다). 사이트 공통 토프(fs.css 1.3 토큰)를 이 페이지 «본문 섹션»에서만 덮는다. 헤더·퀵바·#contact·푸터는 공통 크롬이라 토프 그대로다. ★ #FCAC0D 는 흰 위 1.90:1 — 글자색으로도, 흰 글자의 바탕으로도 못 쓴다. · 면(라벨바·필·하이라이트·비교표 라벨칸·화면 캡션) = 노랑 채움 + 검정 글자 9.93:1 · 글자(킥커·강조어·강점 제목) = #8A5C00 — 흰 5.81 · 크림 5.18 · 베이지 5.09 · 선 아이콘(구운 PNG) = #B87C00 — 흰 3.55 (그래픽 3:1) ★ 되돌리기: 이 블록을 지우고, 에셋 5장(scan-screen-y · icon-*-y)을 옛 파일명으로. ══════════════════════════════════════════════════════════════════════════ */ .fs-p-152 main > section:not(#contact) { --ul-y: #FCAC0D; /* 채움·장식 선 */ --ul-y-deep: #E39A00; /* 호버 채움 (검정 7.99) */ --ul-y-soft: #FFD98F; /* 보조 라벨바 · 「일반 레이저리프팅」 필 */ --ul-y-pale: #FBE3B0; /* 비교표 좌열(일반 레이저리프팅) 칸 */ --ul-y-text: #8A5C00; /* 글자 */ --ul-beige: #F7EFE1; /* 비교 밴드 바탕 (PPT 2 「베이지톤」) */ --fs-teal: var(--ul-y); --fs-teal-mid: var(--ul-y); --fs-teal-dk: var(--ul-y-text); --fs-teal-text: var(--ul-y-text); --fs-teal-neon: var(--ul-y); --fs-dot-on: var(--ul-y-text); } .fs-p-152 .fs-ulthera-compare-sec { background: var(--ul-beige); } /* 노랑 면 + 검정 글자. :where 로 (0,2,1) 에 묶어 STEP 탭의 회색 대기 상태(0,3,0)가 이기게 둔다. */ .fs-p-152 main > :where(:not(#contact)) :is(.fs-labelbar, .fs-pill, .fs-mark, .fs-compare__cell--label) { background: var(--ul-y); color: var(--fs-ink); } .fs-p-152 main > :where(:not(#contact)) .fs-labelbar--mid { background: var(--ul-y-soft); } /* 「일반 레이저리프팅」 쪽 — 처음엔 회색(--fs-pill-gray · --fs-fill-gray)을 남겼으나 승인자 「회색이라 옐로우랑 안 맞는 느낌」(09-29). 같은 노랑 계열의 «연한 단» 으로 내려 비교의 강약(연노랑 ↔ 진노랑)만 남긴다. 글자 #3F3F3F 는 #FBE3B0 위 8.38:1. */ .fs-p-152 main > :where(:not(#contact)) .fs-pill--gray { background: var(--ul-y-soft); color: var(--fs-ink); } .fs-p-152 .fs-ulthera-compare .fs-compare__cell--left { background: var(--ul-y-pale); color: var(--fs-ink-soft); } /* DeepSEE 화면 — 캡션 바·선택 표시를 원본 콜아웃처럼 노랑 + 검정 글자로 */ .fs-p-152 .fs-ulthera-see__cap, .fs-p-152 .fs-ulthera-see__rail .is-on { background: var(--ul-y); color: var(--fs-ink); } .fs-p-152 #fs-ust-1:checked ~ .fs-ulthera-see__body .fs-ulthera-see__prog--1, .fs-p-152 #fs-ust-2:checked ~ .fs-ulthera-see__body .fs-ulthera-see__prog--2, .fs-p-152 #fs-ust-3:checked ~ .fs-ulthera-see__body .fs-ulthera-see__prog--3, .fs-p-152 #fs-ust-1:checked ~ .fs-ulthera-see__body li:nth-child(1) .fs-pill, .fs-p-152 #fs-ust-2:checked ~ .fs-ulthera-see__body li:nth-child(2) .fs-pill, .fs-p-152 #fs-ust-3:checked ~ .fs-ulthera-see__body li:nth-child(3) .fs-pill, .fs-p-152 #fs-ust-1:checked ~ .fs-ulthera-see__body li:nth-child(1) .fs-labelbar, .fs-p-152 #fs-ust-2:checked ~ .fs-ulthera-see__body li:nth-child(2) .fs-labelbar, .fs-p-152 #fs-ust-3:checked ~ .fs-ulthera-see__body li:nth-child(3) .fs-labelbar { background: var(--ul-y); color: var(--fs-ink); } @media (hover: hover) and (pointer: fine) { .fs-p-152 .fs-ulthera-pick__duo > li:hover .fs-labelbar { background: var(--ul-y-deep); } } /* ══════════════════════════════════════════════════════════════════════════ 12. STEP 탭 «누르는 것» 신호 — 2026-09-29 승인자 「step 이걸 누르는 거라는 cue 가 조금 더 명확했으면」 문구는 늘리지 않고 모양으로만 알린다. · 카드 오른쪽 위 라디오 표시 — 빈 고리(대기) / 고리 + 가운데 점(선택). 호버 없는 모바일에서도 보인다. · 선택된 카드 위 노란 꼭지(▲) — «이 카드가 위 화면을 바꾼다» 는 연결. · (마우스) 호버하면 카드가 4px 뜨고 테두리·필·라벨바가 연노랑으로 — 누를 수 있다는 반응. 고리 #B87C00 은 흰 위 3.55:1(그래픽 3:1). 그림자는 쓰지 않는다(F6 과 같은 원칙). ══════════════════════════════════════════════════════════════════════════ */ /* 고리·꼭지는 카드 3장이 한 줄로 서는 ≥768 에서만 — <768 은 13절(화면 안 탭 + 카드 한 장)이 신호다 */ @media (min-width: 768px) { .fs-p-152 .fs-ulthera-see__step::after { content: ""; position: absolute; inset-block-start: 14px; inset-inline-end: 14px; inline-size: 22px; block-size: 22px; box-sizing: border-box; border: 2px solid #B87C00; border-radius: 50%; background: var(--fs-white); transition: background var(--fs-dur) var(--fs-ease); } .fs-p-152 #fs-ust-1:checked ~ .fs-ulthera-see__body li:nth-child(1) .fs-ulthera-see__step::after, .fs-p-152 #fs-ust-2:checked ~ .fs-ulthera-see__body li:nth-child(2) .fs-ulthera-see__step::after, .fs-p-152 #fs-ust-3:checked ~ .fs-ulthera-see__body li:nth-child(3) .fs-ulthera-see__step::after { background: radial-gradient(circle, #B87C00 0 5px, #FFF3D6 5.5px); } .fs-p-152 #fs-ust-1:checked ~ .fs-ulthera-see__body li:nth-child(1) .fs-ulthera-see__step::before, .fs-p-152 #fs-ust-2:checked ~ .fs-ulthera-see__body li:nth-child(2) .fs-ulthera-see__step::before, .fs-p-152 #fs-ust-3:checked ~ .fs-ulthera-see__body li:nth-child(3) .fs-ulthera-see__step::before { content: ""; position: absolute; inset-block-start: -14px; inset-inline-start: 50%; translate: -50% 0; border-inline: 11px solid transparent; border-block-end: 11px solid var(--ul-y); } } @media (hover: hover) and (pointer: fine) { .fs-p-152 .fs-ulthera-see__step { transition: background var(--fs-dur) var(--fs-ease), border-color var(--fs-dur) var(--fs-ease), transform var(--fs-dur) var(--fs-ease-out); } .fs-p-152 .fs-ulthera-see__step:hover { transform: translateY(-4px); border-color: var(--ul-y-soft); } .fs-p-152 .fs-ulthera-see__step:hover .fs-pill, .fs-p-152 .fs-ulthera-see__step:hover .fs-labelbar { background: var(--ul-y-soft); color: var(--fs-ink); } .fs-p-152 .fs-ulthera-see__step:hover::after { background: #FFF3D6; } } @media (prefers-reduced-motion: reduce) { .fs-p-152 .fs-ulthera-see__step:hover { transform: none; } } /* 같은 날 「step 누르면 화면이 위로 올라가는데 기준이 뭐야」 — 숨은 라디오 3개가 모니터 윗변(1px 위)에 있어서, 카드를 누르면 포커스가 그리로 가고 크롬이 «화면 밖 포커스 요소를 세로 가운데로» 끌어왔다(1920×1080 에서 759px 점프). · ≥768 — 카드 3장이 모니터 바로 아래 한 줄이라 둘이 같이 보인다. 라디오를 뷰포트에 고정해 점프를 없앤다. 조상에 transform·filter·contain 없음(실측) — fixed 가 뷰포트 기준으로 산다. · <768 — 라디오를 «모니터 세로 가운데»(프레임 폭 × 0.3 ≈ 460/775 ÷ 2)에 둔다. 13절 이후 모바일의 버튼은 모니터 안 탭이라 누를 때 모니터가 이미 화면 안에 있다 → 스크롤 0. 키보드로 라디오를 옮겨도 모니터 쪽으로만 끌려온다. */ .fs-p-152 .fs-ulthera-see { position: relative; } @media (min-width: 768px) { .fs-p-152 .fs-ulthera-see > input.fs-sr-only { position: fixed !important; inset-block-start: 50%; inset-inline-start: 0; } } @media (max-width: 767px) { .fs-p-152 .fs-ulthera-see > input.fs-sr-only { inset-block-start: calc(min(680px, 100vw - 2 * var(--fs-gutter)) * .3); inset-inline-start: 50%; } } /* ══════════════════════════════════════════════════════════════════════════ 13. 모바일(<768) — 화면 안 SEE·PLAN·TREAT 가 버튼, 아래는 고른 단계 카드 한 장 2026-09-29 승인자 「모바일에서는 저 화면의 see plan treat 를 누르라는 cue 로 하고, 누르면 밑에 내용이 맞게 바뀌는 형식」 · HTML 은 화면 안 3개를 같은 라디오의