/* ==========================================================================
assets/page/144.css — 스킨부스터 전용 컴포넌트
전부 .fs-p-144 스코프. 색은 --fs-* 토큰만 사용(새 hex 0개).
전용 컴포넌트 4종
.fs-sb-hero 물방울 사진 배경 + 사진 위 카피 (10-07 — 옛 제품 3컷 스트립 · 크림 패널)
.fs-sb-cat 14종 제품 카탈로그 월 (겹친 흰 패널 카드 · A18 확장)
.fs-sb-spec 아이콘이 들어간 시술정보 표 (A21 확장)
.fs-sb-target 시술대상 테두리 글줄 (A23 확장 · 10-07 아이콘 카드에서 바꿈)
========================================================================== */
/* --------------------------------------------------------------------------
1. 히어로 — 물방울 사진 배경 + 크림 카피 패널
2026-10-07 · 승인자 수정 PPT 「배경 변경」 — 제품 3컷 스트립을 사진 1장으로 바꿨다.
크롭은 가운데: 큰 물방울이 패널 뒤에 오고 가장자리 물방울·노란 접시가 테두리처럼 남는다.
-------------------------------------------------------------------------- */
.fs-p-144 .fs-sb-hero { min-height: clamp(430px, 393.8px + 10.06vw, 587px); }
.fs-p-144 .fs-sb-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 카피 — 2026-10-07 승인자 캡처 「히어로의 # 텍스트랑 흰 박스도 삭제해줘」 → 킥커(#건강한_피부의_시작)와
크림 패널(크림 95% 바탕 + 안쪽 여백)을 걷고 제목·밑줄·리드를 사진 위에 바로 얹는다. 백업 _src/build/backup-144-1007-heropanel/ */
.fs-p-144 .fs-sb-hero__panel {
margin-inline: auto;
max-width: 760px;
color: var(--fs-ink);
text-align: center;
gap: clamp(10px, 8.2px + 0.51vw, 18px);
}
/* 패널 대신 글 뒤에만 가장자리 없는 크림 번짐 — 패널을 걷자 리드(17px)가 큰 물방울의 하이라이트·기포 위에서
흩어졌다. 글 덩어리에 붙인 타원(closest-side)이라 폭이 바뀌어도 글 가운데를 따라가고, 끝은 투명이라 상자 경계가 없다. */
.fs-p-144 .fs-sb-hero__panel { position: relative; isolation: isolate; }
.fs-p-144 .fs-sb-hero__panel::before {
content: "";
position: absolute;
inset: -55% -22%;
z-index: -1;
pointer-events: none;
background: radial-gradient(closest-side,
color-mix(in srgb, var(--fs-cream) 88%, transparent) 0%,
color-mix(in srgb, var(--fs-cream) 72%, transparent) 55%,
transparent 100%);
}
.fs-p-144 .fs-sb-hero .fs-hero__title { color: var(--fs-ink); }
/* 리드 — 2026-10-07 승인자 「설명 문장도 키워줘」: 패널 안 본문 크기(16→17px)였던 것을 다른 히어로 리드(49장)와
같은 --fs-t-lead(19→21px)로. 줄 높이는 .fs-lead 규격 1.5 그대로. */
.fs-p-144 .fs-sb-hero__lead {
font-size: var(--fs-t-lead);
line-height: var(--fs-lh-body);
color: var(--fs-ink-soft);
}
/* --------------------------------------------------------------------------
2. 다크 스테이트먼트 밴드
-------------------------------------------------------------------------- */
.fs-p-144 .fs-sb-say__fig { display: block; }
.fs-p-144 .fs-sb-say__fig img { width: 100%; height: 100%; object-fit: cover; }
.fs-p-144 .fs-sb-say__body {
display: grid;
gap: clamp(16px, 13.3px + 0.75vw, 28px);
padding: clamp(48px, 33.6px + 4vw, 112px) var(--fs-gutter);
}
@media (min-width: 1024px) {
.fs-p-144 .fs-sb-say__fig { height: 100%; }
.fs-p-144 .fs-sb-say__body { padding-inline: clamp(32px, 5.6px + 2.58vw, 72px) var(--fs-gutter); }
}
/* --------------------------------------------------------------------------
3. 14종 제품 카탈로그 월 ★ 시그니처
-------------------------------------------------------------------------- */
/* 2026-08-31 · 승인자 지시 「이러한 레이아웃이 마음에 안 들어. 다른 레이아웃으로 해줘」.
옛 판은 4열 벽 + 카드마다 「사진 / 틸 라벨바 / 흰 패널」 3단이라, 14장이면 틸 슬래브가
14개 쌓여 눈이 쉴 곳이 없었다. 게다가 14 는 4 로 안 나눠떨어져 마지막 줄을 가로형
2장(--wide)으로 메워야 했고, 그 두 장만 내부 구조가 달라 리듬이 끊겼다.
14 = 2×7 이라 «2열» 이 유일하게 딱 떨어지는 열 수다. 열을 줄인 만큼 카드를 가로형으로
눕혀(사진 좌 / 글 우) 제품명을 h3 크기로 키우고, 라벨바 14개는 제품명 아래 34px 틸 선
하나로 바꿨다. 예외 카드가 없어져 14장이 같은 부품이 된다. */
.fs-p-144 .fs-sb-cat {
display: grid;
gap: var(--fs-gap-card);
grid-template-columns: minmax(0, 1fr);
margin-block-start: var(--fs-gap-title);
padding: 0;
list-style: none;
}
@media (min-width: 600px) { .fs-p-144 .fs-sb-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fs-p-144 .fs-sb-cat > li { display: grid; }
.fs-p-144 .fs-sb-prod {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
height: 100%;
background: var(--fs-white);
}
.fs-p-144 .fs-sb-prod__media { display: block; overflow: hidden; }
.fs-p-144 .fs-sb-prod__media img {
display: block; width: 100%; height: 100%;
aspect-ratio: 3 / 2; object-fit: cover;
transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
.fs-p-144 .fs-sb-prod__body {
display: grid;
align-content: start;
gap: var(--fs-sp-3);
padding: clamp(18px, 15.2px + 0.77vw, 30px) clamp(18px, 15.2px + 0.77vw, 30px) clamp(20px, 16.8px + 0.9vw, 34px);
}
.fs-p-144 .fs-sb-prod__name {
font-size: var(--fs-t-h3);
font-weight: 700;
line-height: var(--fs-lh-head);
letter-spacing: var(--fs-ls-tight);
}
/* 라벨바 14개를 대신하는 액센트 — 제품명에 붙는 짧은 틸 선 */
.fs-p-144 .fs-sb-prod__name::after {
content: "";
display: block;
width: 34px;
height: 2px;
margin-block-start: clamp(8px, 6.9px + 0.32vw, 13px);
background: var(--fs-teal);
}
.fs-p-144 .fs-sb-prod__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-p-144 .fs-sb-prod__tags .fs-pill {
min-height: 26px;
padding-inline: 9px;
font-size: var(--fs-t-xs);
font-weight: 600;
letter-spacing: 0;
}
.fs-p-144 .fs-sb-prod__desc { font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-ink-soft); }
/* >=1200 — 카드를 눕힌다. 사진이 카드 높이를 꽉 채우고 글은 세로 가운데로 온다.
경계를 1024 가 아니라 1200 으로 잡은 이유: 1024 에서 눕히면 카드가 474px 이라
사진 칸이 199px 로 떨어져 제품 상자의 글자가 뭉갠다. 1024~1199 는 세로형을 유지하면
사진이 카드 폭 전체(≈474px)를 쓴다. 1200 부터는 사진 칸이 235px 이상으로 확보된다. */
@media (min-width: 1200px) {
.fs-p-144 .fs-sb-prod {
grid-template-rows: minmax(0, 1fr);
grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
}
/* 사진 칸이 «행의 최소 높이» 를 만들되 행이 더 높으면 같이 늘어나야 한다.
★ 그 최소 높이를 .fs-sb-prod__media 자신의 aspect-ratio 로 주면 안 된다 —
aspect-ratio 가 높이를 «확정» 시켜 grid 의 stretch 를 이긴다. 실측(1920):
설명이 3줄인 카드와 짝이 된 행에서 카드 231px / 사진 224px 로 사진 아래에
흰 띠 7px 이 남았다(7행 중 4행). 크림 밴드 위 흰 카드라 «발»처럼 보인다.
그래서 최소 높이는 padding 백분율 스페이서(::before)로 만들고 — 이건 행
높이에 기여하되 사진 높이를 확정하지 않는다 — 사진은 그 위에 겹쳐 채운다. */
.fs-p-144 .fs-sb-prod__media { display: grid; }
.fs-p-144 .fs-sb-prod__media::before {
content: ""; grid-area: 1 / 1; width: 0; padding-block-start: 75%; /* 4:3 */
}
.fs-p-144 .fs-sb-prod__media img { grid-area: 1 / 1; aspect-ratio: auto; }
/* 글을 위로 맞춘다. center 로 두면 설명 줄 수가 다른 짝에서 제품명 기준선이
행마다 12px 어긋난다(실측 1920·1440, 7행 중 4행). 카탈로그는 이름이 가로로
한 줄에 서는 편이 읽기 쉽다. */
.fs-p-144 .fs-sb-prod__body { align-content: start; }
}
@media (hover: hover) and (pointer: fine) {
.fs-p-144 .fs-sb-prod:hover .fs-sb-prod__media img { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
.fs-p-144 .fs-sb-prod__media img { transform: none !important; transition: none !important; }
}
/* --- A06 · 효과 네 가지 — 2×2 테두리 박스 (10-07 승인자 수정 PPT 슬라이드 3) -----
옛 판은 4열 «크림 면 카드 + 라벨바». 참고 시안대로 2×2 로 눕히고 박스마다 번호·아이콘·
제목을 세운다. 제목은 라벨바 16px → h3(20→27px) 로 키웠다(「폰트크기 확대」).
흰 섹션이라 --fs-line(#EDEDED)은 1.17:1 로 사라진다 → 테두리는 액센트 --fs-teal 1px.
2열은 전 폭 공통 — 360 에서도 칸 150px 에 아이콘·제목이 들어간다(MOBILE_RULES §2 A). */
.fs-p-144 .fs-sb-keys {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 9.7px + 0.64vw, 22px);
margin: var(--fs-gap-title) 0 0;
padding: 0;
list-style: none;
}
.fs-p-144 .fs-sb-key {
display: grid;
grid-template-rows: auto auto 1fr;
justify-items: center;
align-content: start;
gap: clamp(8px, 6.2px + 0.51vw, 16px);
padding: clamp(16px, 12.4px + 1vw, 32px) clamp(10px, 5.5px + 1.25vw, 30px) clamp(22px, 16.6px + 1.5vw, 46px);
border: 1px solid var(--fs-teal);
background: var(--fs-white);
text-align: center;
}
.fs-p-144 .fs-sb-key__num {
justify-self: start;
font-family: var(--fs-font-en);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.fs-p-144 .fs-sb-key__icon {
display: grid;
place-items: center;
width: clamp(92px, 79.4px + 3.5vw, 148px);
aspect-ratio: 300 / 202;
}
.fs-p-144 .fs-sb-key__icon img { width: 100%; height: 100%; object-fit: contain; }
.fs-p-144 .fs-sb-key__title {
align-self: center;
font-size: var(--fs-t-h3);
font-weight: 700;
line-height: var(--fs-lh-head);
letter-spacing: var(--fs-ls-tight);
color: var(--fs-ink);
word-break: keep-all;
text-wrap: balance;
}
@media (max-width: 599px) {
.fs-p-144 .fs-sb-key__title { font-size: 18px; }
}
/* --------------------------------------------------------------------------
4. 시술정보 표 — 항목 셀에 선화 아이콘
-------------------------------------------------------------------------- */
.fs-p-144 .fs-sb-spec { margin-block-start: var(--fs-gap-title); background: var(--fs-white); }
.fs-p-144 .fs-sb-spec th[scope="row"] {
display: flex; align-items: center; gap: var(--fs-sp-3);
font-weight: 600; color: var(--fs-ink);
white-space: nowrap;
}
.fs-p-144 .fs-sb-spec__ico {
flex: 0 0 auto;
display: grid; place-items: center;
width: clamp(44px, 40.4px + 1vw, 60px);
aspect-ratio: 1;
}
.fs-p-144 .fs-sb-spec__ico img { width: 100%; height: 100%; object-fit: contain; }
.fs-p-144 .fs-sb-spec td { font-size: var(--fs-t-lead); font-weight: 600; color: var(--fs-teal-text); }
.fs-p-144 .fs-sb-spec tbody tr { border-block-end: 1px solid var(--fs-line); }
.fs-p-144 .fs-sb-spec__note { margin-block-start: var(--fs-sp-5); }
/* --------------------------------------------------------------------------
5. 시술대상 테두리 글줄
2026-10-07 · 승인자 수정 PPT(슬라이드 4) 「아이콘 삭제하고 이렇게 정리, 배열 수정」.
«CHECK 번호 + 한 줄 문장» 을 흰 상자에 담아 2열(≥1024)·1열(<1024)로 쌓는다.
문장 크기는 본문(16→17px). 리드 크기(19→21px)로 두면 1024 2열에서 가장 긴 문장
(「안티에이징, 모공개선, 피부 탄력이 필요한 분」)이 「분」 한 글자만 다음 줄로 떨어졌다.
번호는 강조색 글자(--fs-teal-text · 흰 위 5.28), 테두리는 장식 --fs-teal.
번호 폭은 고정 — Montserrat 서브셋에 tnum 이 없어 「01」·「03」 폭이 달라 문장 시작이 2px 어긋났다.
-------------------------------------------------------------------------- */
.fs-p-144 .fs-sb-targets {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(10px, 8.2px + 0.51vw, 18px) var(--fs-gap-card);
margin: var(--fs-gap-title) 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 1024px) {
.fs-p-144 .fs-sb-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fs-p-144 .fs-sb-target {
display: flex;
align-items: baseline;
gap: clamp(12px, 9.3px + 0.75vw, 24px);
padding: clamp(16px, 13.3px + 0.75vw, 28px) clamp(18px, 13.5px + 1.25vw, 36px);
border: 1px solid var(--fs-teal);
background: var(--fs-white);
}
.fs-p-144 .fs-sb-target__num {
flex: none;
font-family: var(--fs-font-en);
font-size: var(--fs-t-sm);
font-weight: 700;
min-inline-size: 5.3em;
color: var(--fs-teal-text);
}
.fs-p-144 .fs-sb-target__text {
font-size: var(--fs-t-body);
font-weight: 500;
line-height: var(--fs-lh-body);
color: var(--fs-ink);
word-break: keep-all;
text-wrap: balance;
}
/* --------------------------------------------------------------------------
7. 모션 — 리빌은 fs.js 가 처리한다. 여기서 새로 만든 모션은 아래 하나뿐.
-------------------------------------------------------------------------- */
:root.fs-js .fs-p-144 .fs-sb-prod__media img { transition: transform var(--fs-dur-slow) var(--fs-ease); }
@media (hover: hover) and (pointer: fine) {
.fs-p-144 .fs-sb-prod:hover .fs-sb-prod__media img { transform: scale(1.03); }
}
.fs-p-144 .fs-sb-prod__media { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.fs-p-144 .fs-sb-prod__media img,
.fs-p-144 .fs-sb-prod:hover .fs-sb-prod__media img {
transform: none !important;
transition: none !important;
}
.fs-p-144 .fs-sb-hero__panel { transform: none !important; }
}
/* ==========================================================================
▼▼▼ 진단·수정 패스 — 2026-08-28
위 원본 블록은 건드리지 않고 뒤에 이어 붙인다. 근거는 _design/QA/144.md.
========================================================================== */
/* --------------------------------------------------------------------------
A. 명도 대비 AA — 이 페이지가 소유한 1곳
`--fs-muted-2 #7D7D7D` 는 fs.css:2599~ 의 AA 보정 밴드가 손대지 않는 토큰이라
흰 배경에서 4.12:1 로 기준(4.5)에 못 미친다. `--fs-muted` 는 같은 밴드에서
#6E6E6E(5.0:1)로 이미 보정돼 있다(fs.css:2716). 107.css:167 과 같은 처방.
공용 셸(드로어·푸터)의 미달은 손대지 않는다 — 공유 파일이다.
-------------------------------------------------------------------------- */
.fs-p-144 .fs-sb-spec__note { color: var(--fs-muted); }
/* --------------------------------------------------------------------------
B. [V70-B] 다크 스테이트먼트 밴드 — 50:50 하드컷을 비대칭 겹침으로
`.fs-sb-say` 는 사진과 카피가 정확히 x960 에서 맞붙어 「두 장을 이어 붙인」
것으로 읽힌다. 48 의 `.fs-lef-clinic` 승격분(48.css:661~683)과 같은 처방:
열을 52:48 로 깨고 카피 패널을 «가로 음수 마진» 으로 사진 위에 끌어당긴다.
→ 화면상 이음매가 50% → 44% 로 내려간다.
★ 겹침 전제 — 이 사진의 평균 휘도 130.5 (PIL 실측, 기준 110). 통과.
★ `--fs-split` 은 인라인 style 에 있어 `var()` 로는 못 이긴다.
`grid-template-columns` 를 직접 준다(fs.css:345 는 (0,1,0), 아래는 (0,3,0)).
★ 음수 마진은 «가로» 뿐이다. 세로 음수 마진은 섹션째 끌어올린다.
★ padding-inline-start 는 |음수 마진| 만큼 되돌려 넣은 값이다.
그래서 카피의 실제 글줄 폭·시작 x 는 수정 전과 동일하다 —
`
` 로 고정된 줄이 새로 접히지 않는다(1024 에서 448→451px 로 유지).
-------------------------------------------------------------------------- */
@media (min-width: 1024px) {
.fs-p-144 .fs-sb-say > .fs-split {
position: relative;
z-index: 1; /* fs.css 의 .fs-section__bg 위 */
grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
}
.fs-p-144 .fs-sb-say__fig { position: relative; z-index: 1; }
/* 열이 좁아진 만큼 가로로 잘린다. 인물이 왼쪽에 치우친 컷이라 중앙 크롭이면
얼굴이 왼쪽 가장자리에 붙는다 — 크롭 창을 왼쪽으로 옮겨 얼굴을 지킨다.
원본 파일은 손대지 않는다(재크롭 아님, 표시 프레임만 이동). */
.fs-p-144 .fs-sb-say__fig img { object-position: 30% center; }
.fs-p-144 .fs-sb-say__body {
position: relative;
z-index: 3; /* 사진 위 */
margin-inline-start: clamp(-160px, -8vw, -80px);
background: var(--fs-ink-band-2); /* 겹치는 면에서 글자가 사진에 묻지 않게 */
padding-inline: clamp(93px, 5.6px + 8.57vw, 171px) var(--fs-gutter);
}
}
/* --------------------------------------------------------------------------
C. 섹션 제목 뒤 70px 틸 선 (48 검증분 · 48.css:472~509)
★ 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
fs.js:189~199 는 첫 화면 안에 있던 대상에 `.fs-reveal` 클래스 자체를
붙이지 않는다. → 기본을 「그어진 상태」로 두고 실제 리빌 대상에만 초기 은닉.
★ `:where()` 로 감싸 특정성을 0 으로 낮춘다 — 페이지 CSS 의 ID 선택자에
은닉 규칙이 지지 않게(=선이 «항상 그어진 채» 굳지 않게) 한다.
-------------------------------------------------------------------------- */
.fs-p-144 .fs-nose-head h2 { position: relative; }
.fs-p-144 .fs-nose-head h2::after {
content: "";
display: block;
width: 70px;
height: 1px;
margin-block-start: var(--fs-sp-4);
background: var(--fs-teal);
transform: scaleX(1);
transform-origin: left center;
transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
:root.fs-js .fs-p-144 :where(h2.fs-reveal:not(.is-in))::after,
:root.fs-js .fs-p-144 :where(.fs-reveal:not(.is-in)) h2::after { transform: scaleX(0); }
/* --------------------------------------------------------------------------
D. reduced-motion — 위에서 새로 넣은 모션까지 정지 상태로 확정
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.fs-p-144 .fs-nose-head h2::after { transform: scaleX(1) !important; transition: none !important; }
}
/* ==========================================================================
▼▼▼ 2026-10-07 · 카탈로그 카드 호버 — 테두리 한 바퀴
승인자 「포시즌 스킨부스터 섹션도 마우스 커서를 올리면 잠깐 효과가 생겼으면」 — 48 유형별 수술 카드
(.fs-lef-op · 48.css 「호버」)와 같은 효과: 진한 토프 2px 선이 위 → 오른쪽 → 아래 → 왼쪽으로 .9s 한 바퀴,
올려 두는 동안 그대로, 커서가 떠나면 원래 카드. 기존 사진 확대(1.03)는 그대로 같이 걸린다.
★ 48 은 카드 자신의 배경 4겹에 선을 그렸다. 여기는 사진이 카드 가장자리(≥1200 위·왼·아래, <1200 위·좌우)에
닿아 배경이 사진 밑에 깔린다 → 같은 4겹을 카드 위 ::after 덮개에 그린다(pointer-events 없음).
마우스가 있는 기기만 — 헤드리스 기본은 (hover:hover) 가 false 라 검증은 hover 에뮬레이션으로.
========================================================================== */
@media (hover: hover) and (pointer: fine) {
.fs-p-144 .fs-sb-prod { position: relative; isolation: isolate; }
.fs-p-144 .fs-sb-prod::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image:
linear-gradient(var(--fs-teal-dk), var(--fs-teal-dk)),
linear-gradient(var(--fs-teal-dk), var(--fs-teal-dk)),
linear-gradient(var(--fs-teal-dk), var(--fs-teal-dk)),
linear-gradient(var(--fs-teal-dk), var(--fs-teal-dk));
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-repeat: no-repeat;
background-size: 0 2px, 2px 0, 0 2px, 2px 0;
}
.fs-p-144 .fs-sb-prod:hover::after { animation: sb-prod-trace-in .9s ease-in-out both; }
}
@keyframes sb-prod-trace-in {
0% { background-size: 0 2px, 2px 0, 0 2px, 2px 0; }
30% { background-size: 100% 2px, 2px 0, 0 2px, 2px 0; }
50% { background-size: 100% 2px, 2px 100%, 0 2px, 2px 0; }
80% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 0; }
100% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
/* 움직임 없이 — 올려 둔 카드에 선만 바로 */
.fs-p-144 .fs-sb-prod:hover::after { animation: none; background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
}
/* ==========================================================================
▼▼▼ 2026-10-07 · 모바일 최적화(승인자 「페이지 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만.
PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-144-1007-mo · 실측 _design/momeasure.py 320/360/390/430/540/768.
before 고아 줄: 히어로 리드 「흡수시켜」(360·390)·「해결합니다.」(430) · 효과 h2 「효과」(390·430) ·
카탈로그 리드 「추천해드립니다.」(320·360·390) · 주의문 「있습니다.」(390) · 주소 「8층」(360) ·
시술대상 「건강 / 개선」(360, 구 갈림) · 시술정보 값 「크림마 / 취」「3~6개 / 월」(320, 낱말 안에서 끊김).
========================================================================== */
/* 1-4 ·
로 끊은 문장 → 문장 블록(히어로 리드·카탈로그 리드). display:block 은
과 픽셀 동일 */
.fs-p-144 .fs-lead__s { display: block; text-wrap: balance; }
/* 1-5 · 짧은 블록은 balance 만(전 폭 — PC 에서는 한 줄이라 무변화) */
.fs-p-144 .fs-h2,
.fs-p-144 .fs-sb-spec__note,
.fs-p-144 .fs-address { text-wrap: balance; }
@media (max-width: 599px) {
/* 시술대상 — 「CHECK 0N」 을 문장 위로. 옆에 두면 글 칸이 191px(360)이라 「건강 / 개선」 처럼 구가 갈렸다.
위로 올리면 글 칸이 284px 라 네 문장(최장 276px)이 한 줄에 선다. 상자 높이는 2줄일 때와 같다. */
.fs-p-144 .fs-sb-target { flex-direction: column; align-items: flex-start; gap: 2px; }
.fs-p-144 .fs-sb-target__num { min-inline-size: 0; }
/* 시술정보 표 — 320 에서 값 칸이 46px 로 줄어 「크림마 / 취」 처럼 낱말 안에서 끊겼다.
칸 좌우 여백 20 → 10 · 아이콘 44 → 36 으로 값 칸을 넓히고, 값은 낱말 단위로만 접는다. */
.fs-p-144 .fs-sb-spec th,
.fs-p-144 .fs-sb-spec td { padding-inline: var(--fs-sp-3); }
.fs-p-144 .fs-sb-spec__ico { width: 36px; }
.fs-p-144 .fs-sb-spec td { word-break: keep-all; }
}
/* ==========================================================================
▼▼▼ 2026-10-07 · 모바일 배치 — 카탈로그 14장(승인자 캡처 + 「모바일에서 여기가 너무 시술들이 주르륵 있어서 보기 힘든 느낌」)
360 에서 카드 한 장 ≈ 420px(사진 320×213 폭 가득 + 이름·태그·설명) × 14 = 섹션 5,843px.
MOBILE_RULES §2 L(46 A11 — 같은 날 승인자가 3안 중 고른 «썸네일 + 이름 머리줄 · 설명 전폭»)을 제품 카드에 맞춰 변형:
사진은 min(42%, 240px) 썸네일(3:2 그대로) · 오른쪽 칸에 제품명 + 태그 · 설명은 아래 전폭.
카드는 크림 밴드 위 흰 상자 그대로(A18) — 사진이 가장자리에 붙던 것을 상자 안쪽 여백으로 들인다.
599px 이하만(600 이상은 원래 2열 세로 카드) — PC·태블릿 무변경. 백업 _src/build/backup-144-1007-catmo/
★ 같은 날 시안 C(아래 블록 「제품 고르기」)로 바뀌었다 — 이 배치는 이제 스크립트가 안 돌 때의 대체 목록이다.
========================================================================== */
@media (max-width: 599px) {
.fs-p-144 .fs-sb-cat { gap: var(--fs-sp-4); }
.fs-p-144 .fs-sb-prod {
grid-template-columns: min(42%, 240px) minmax(0, 1fr);
grid-template-rows: auto auto auto;
column-gap: var(--fs-sp-4);
padding: var(--fs-sp-4);
}
/* 썸네일이 1·2행에 걸치고 이름(1행 아래 붙임)·태그(2행 위 붙임)가 그 옆 가운데에 한 덩어리로 선다 */
.fs-p-144 .fs-sb-prod__media { grid-column: 1; grid-row: 1 / 3; align-self: center; }
/* 본문 상자를 풀어 이름·태그·설명을 카드 격자에 바로 놓는다 — 리빌 대상은 li 라 §2 J 의 ⚠ 밖 */
.fs-p-144 .fs-sb-prod__body { display: contents; }
.fs-p-144 .fs-sb-prod__name { grid-column: 2; grid-row: 1; align-self: end; font-size: 19px; }
.fs-p-144 .fs-sb-prod__name::after { margin-block-start: 8px; }
.fs-p-144 .fs-sb-prod__tags { grid-column: 2; grid-row: 2; align-self: start; margin-block-start: var(--fs-sp-3); gap: 4px; }
.fs-p-144 .fs-sb-prod__desc { grid-column: 1 / -1; grid-row: 3; margin-block-start: var(--fs-sp-4); }
}
/* ==========================================================================
▼▼▼ 2026-10-07 · 모바일 카탈로그 «제품 고르기 + 상세 1장» (승인자 「이렇게 주르륵 스크롤 밖에 답이 없는걸까」
→ 시안 _review/144-catalog-mo-options.html 4안 중 「c로 진행해줘」)
위쪽 칩 줄(사진 64 + 제품명, 옆으로 밀기)에서 누르면 아래에 그 제품 카드 한 장만 — 카드는 PC 와 같은 세로형(사진 위 · 글 아래).
칩은 index.html 끝 인라인 스크립트가 카드에서 만든다(HTML 에 제품명을 두 번 쓰지 않는다 — R1).
스크립트가 섹션에 .is-picker 를 붙일 때만 걸리므로, 스크립트가 없으면 위 썸네일 목록(§2 L)으로 남는다.
599px 이하만 — 600 이상은 칩 줄을 숨기고 14장 2열 그대로. 390 섹션 3,150 → 약 850px. 백업 _src/build/backup-144-1007-catpick/
========================================================================== */
.fs-p-144 .fs-sb-picker { display: none; }
@media (max-width: 599px) {
.fs-p-144 .fs-sb-picker {
position: relative; /* 칩 offsetLeft 기준 — 고른 칩을 줄 가운데로 민다 */
display: flex;
gap: var(--fs-sp-2);
overflow-x: auto;
scrollbar-width: none;
margin: var(--fs-gap-title) calc(-1 * var(--fs-gutter)) 0; /* 화면 끝까지 흘려 다음 칩이 잘려 보이게(밀 수 있다는 단서) */
padding: 2px var(--fs-gutter) 6px;
}
.fs-p-144 .fs-sb-picker::-webkit-scrollbar { display: none; }
.fs-p-144 .fs-sb-chip {
flex: 0 0 80px;
display: grid;
justify-items: center;
align-content: start;
gap: 6px;
padding: 6px 4px 8px;
border: 1px solid transparent;
background: var(--fs-white);
color: var(--fs-ink-soft);
font: 600 var(--fs-t-xs)/1.25 var(--fs-font);
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere; /* 「PDRN(연어주사)」 처럼 띄어쓰기 없는 이름 */
cursor: pointer;
}
.fs-p-144 .fs-sb-chip img { display: block; width: 64px; height: 64px; object-fit: cover; }
.fs-p-144 .fs-sb-chip[aria-pressed="true"] { border-color: var(--fs-teal-dk); color: var(--fs-ink); }
.fs-p-144 .fs-sb-chip:focus-visible { outline: 2px solid var(--fs-teal-dk); outline-offset: -2px; }
.fs-p-144 .fs-sb-cat-sec.is-picker .fs-sb-cat { margin-block-start: var(--fs-sp-5); }
.fs-p-144 .fs-sb-cat-sec.is-picker .fs-sb-cat > li:not(.is-on) { display: none; }
/* 리빌 — 숨어 있던 카드는 IO 가 안 걸려 있다가 고르는 순간 70ms×순번(최대 .9s) 늦게 뜬다 → 고른 카드는 바로 보이고 아래 짧은 페이드만 */
:root.fs-js .fs-p-144 .fs-sb-cat-sec.is-picker .fs-sb-cat > li { opacity: 1; transform: none; transition: none; }
/* 카드 — 위 §2 L 썸네일 배치를 걷고 원래 세로 카드로 */
.fs-p-144 .fs-sb-cat-sec.is-picker .fs-sb-prod {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
column-gap: 0;
padding: 0;
}
.fs-p-144 .fs-sb-cat-sec.is-picker .fs-sb-prod__media { grid-column: auto; grid-row: auto; align-self: auto; }
.fs-p-144 .fs-sb-cat-sec.is-picker .fs-sb-prod__body { display: grid; }
.fs-p-144 .fs-sb-cat-sec.is-picker :is(.fs-sb-prod__name, .fs-sb-prod__tags, .fs-sb-prod__desc) {
grid-column: auto; grid-row: auto; align-self: auto; margin-block-start: 0;
}
.fs-p-144 .fs-sb-cat-sec.is-picker .fs-sb-prod__name { font-size: var(--fs-t-h3); }
.fs-p-144 .fs-sb-cat-sec.is-picker .fs-sb-prod__tags { gap: 6px; }
}
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
.fs-p-144 .fs-sb-cat-sec.is-picker .fs-sb-cat > li.is-on { animation: sb-pick-in .35s var(--fs-ease-out) both; }
}
@keyframes sb-pick-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }