· #gallery / #retouch 의 .fs-nose-head[data-fs-reveal] · .fs-lip-type 의 data-fs-carousel-gap="40" ========================================================================== */ /* --- 6-1 [LOCK 2] A04 인트로 라벨바가 사진에서 13px 떠 있었다 -------------- fs.css:754 의 .fs-figure { gap: var(--fs-sp-4) } 가 그대로 살아 있어 1920 실측 「사진 bottom → 바 top = 13.0px」였다. 라벨바는 간격 0 으로 붙는다. vibecheck 의 L2 는 라벨바의 margin-top·border-top 만 재서 이걸 못 잡는다. */ .fs-p-75 .fs-lip-intro__fig { gap: 0; } /* --- 6-2 [접근성] 갤러리 주석 대비 4.12:1 (AA 4.5 미달) ------------------- --fs-muted-2(#7D7D7D)는 fs.css 의 AA 보정 밴드에서 빠져 있다. 보정을 받는 --fs-muted(#6E6E6E, 흰 위 5.10:1)로 올린다. 새 색은 만들지 않는다. */ .fs-p-75 .fs-lip-mosaic__note { color: var(--fs-muted); } /* --- 6-3 제목 뒤 70px 틸 선 (delay .5s) — 48 검증분 ----------------------- ★ 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다 (fs.js 는 첫 화면 대상을 리빌 대상으로 잡지 않는다). → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 은닉한다. ★ 대상을 ID 로 열거하면 (1,1,1) 이 은닉 규칙을 이겨 선이 굳는다. 클래스로만 잡는다. 슬라이드 안의 h3(.fs-lip-type__name)은 대상에서 뺀다 — 캐러셀 한 장에 선 3개는 과하다. */ .fs-p-75 .fs-nose-head .fs-h2, .fs-p-75 .fs-sec-head__title, .fs-p-75 .fs-h2.fs-center { position: relative; } .fs-p-75 .fs-nose-head .fs-h2::after, .fs-p-75 .fs-sec-head__title::after, .fs-p-75 .fs-h2.fs-center::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; } /* 가운데정렬 대제목(A04)은 선도 가운데에서 펼친다 */ .fs-p-75 .fs-h2.fs-center::after { margin-inline: auto; transform-origin: center; } :root.fs-js .fs-p-75 .fs-reveal:not(.is-in) .fs-h2::after, :root.fs-js .fs-p-75 .fs-reveal:not(.is-in) .fs-sec-head__title::after, :root.fs-js .fs-p-75 .fs-h2.fs-reveal:not(.is-in)::after { transform: scaleX(0); } /* --- 6-4 호버 — 프레임 고정, 사진만 scale(1.045) --------------------------- .fs-lip-mosaic__cell 은 이미 overflow:hidden 이고 라벨바가 없다. ★ .fs-lip-type__stage 에는 걸지 않는다 — 주입 포인트 마커가 %로 얹혀 있어 사진만 확대하면 마커가 도해에서 어긋난다(의학 도해 왜곡). 그림자는 쓰지 않는다(2차 규칙). */ .fs-p-75 .fs-lip-mosaic__cell img { transition: transform var(--fs-dur-slow) var(--fs-ease-out); } @media (hover: hover) and (pointer: fine) { .fs-p-75 .fs-lip-mosaic__cell:hover img { transform: scale(1.045); } } /* --- 6-5 [LOCK 6] 캐러셀을 콘텐츠 폭 밖으로 흘린다 ------------------------- 57 의 치료법 캐러셀(.fs-nose-tx__viewport, fs.css:1543)과 같은 자리의 부품이다. 잘림은 뷰포트가 아니라 html/body 의 overflow-x:clip 에 맡긴다. ★ 뷰포트 「폭」은 절대 건드리지 않는다 — fs.js:555 가 viewport.clientWidth 로 슬라이드 폭을 잡아서 폭을 줄이면 시안 수치가 통째로 어긋난다. ★ 노출 폭은 (W−1440)/2 라 1440 에서는 34px 짜리 「어긋난 여백」이 된다 → 1700 게이트. ★ slide 모드는 왼쪽으로 이전 장의 「본문 글자」가 나온다 → clip-path 로 왼쪽만 잘라낸다 (fs.css:2317 FS TV 가 쓰는 수법). */ @media (min-width: 1700px) { .fs-p-75 .fs-lip-type__viewport { overflow: visible; clip-path: inset(-100vh -100vw -100vh 0); } /* cover 모드와 달리 slide 모드는 비활성 장에 아무 변형이 없다. 흘러나온 조각이 현재 장의 「다음 단계」로 이어져 읽히지 않게 감광만 준다. 3D 회전은 빌리지 않는다 — 술식 도해가 왜곡돼 보인다. 게이트를 .fs-carousel__slide(fs.js:440 이 붙인다)로 잡아 JS 전 초기 페인트에서 첫 장이 흐리게 깜빡이는 것을 막는다. */ .fs-p-75 .fs-lip-type__slide.fs-carousel__slide:not(.is-active) { opacity: var(--fs-cover-fade, .55); } .fs-p-75 .fs-lip-type__slide.fs-carousel__slide { transition: opacity var(--fs-dur-slow) var(--fs-ease-out); } } /* --- 6-6 reduced-motion — 위에서 새로 넣은 모션을 최종 정지 상태로 고정 ----- 파일 앞쪽 「5. reduced-motion」 블록보다 뒤에 와야 캐스케이드에서 이긴다. */ @media (prefers-reduced-motion: reduce) { .fs-p-75 .fs-nose-head .fs-h2::after, .fs-p-75 .fs-sec-head__title::after, .fs-p-75 .fs-h2.fs-center::after { transform: scaleX(1) !important; transition: none !important; } .fs-p-75 .fs-lip-mosaic__cell img { transition: none; transform: none !important; } .fs-p-75 .fs-lip-type__slide.fs-carousel__slide { transition: none; } } /* ========================================================================== ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px/1023px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-75-1022-mo · 실측 _design/momeasure.py 360/390/540/768/1024/1440/1920. · 히어로 §1-8 20/30/60 — <1024 스택 블록 제자리 수정(페이드 72 → 60). · 리터치 카드 설명 3장: `
` 이 문장 경계와 PC 줄 경계(문장 가운데)에 섞여 있었다 → 문장 블록(.fs-lead__s, §1-4) + 문장 가운데는 `
`(§1-7). ≥1024 는 옛 `
` 과 같은 자리에서 끊긴다. 360 에서 7줄 중 3줄이 「진행하면서」「비대칭이 있을 수 있습니다.」「개선해줍니다.」 짧은 줄이었다. · balance(전 폭): 타입 설명 · 소개 리드 · 리터치 제목 · ※ 주의문 · 주소 — 360 「시술」「중요함」「발생할 수 있습니다.」, 1440 소개 리드 「시술입니다.」. ========================================================================== */ .fs-p-75 .fs-lead__s { display: block; text-wrap: balance; } .fs-p-75 .fs-lip-type__desc, .fs-p-75 .fs-lip-intro__lead, .fs-p-75 #retouch-title, .fs-p-75 .fs-xs, .fs-p-75 .fs-address { text-wrap: balance; } :root:not(:lang(ko)) .fs-p-75 br.fs-pc-only { display: none; }