/* ==========================================================================
assets/page/67.css — 이마축소술 (draft1/67/index.html) 전용
모든 셀렉터는 .fs-p-67 스코프. 색은 --fs-* 토큰만 사용(새 hex 0개).
전용 컴포넌트
1) .fs-forehead-reduction-hero 크림 타이포 히어로(사진 없는 배너)
2) .fs-forehead-reduction-ratio 얼굴 3분할 비율 게이지 ★ 시그니처
3) .fs-forehead-reduction-scale 이마높이 눈금자 ★ 시그니처
4) .fs-forehead-reduction-spec 수술정보 표 + 아이콘 열 + 인물 패널
5) .fs-forehead-reduction-case 다크 밴드 위 헤어라인 CASE 타일
6) .fs-forehead-reduction-feature 사진 + 겹친 패널 특징 카드
7) .fs-forehead-reduction-step 사진 스텝 4연 + 틸 커넥터
8) .fs-forehead-reduction-cta 좌 사진 / 우 크림 CTA 밴드
========================================================================== */
/* --- 셸 · 1. 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 -------------------
사진 없는 크림 타이포 배너였다. 히어로 안에 있던 3분할 비율 게이지는
본문 첫 섹션(#ratio)으로 내리고, 히어로는 모델 사진 한 장으로 비웠다.
히어로 상단은 전 폭이 연한 라일락(#E2D6E7)이라 «잉크 글자»(13.5:1)를 쓴다.
모델 머리는 사진 높이의 37% 아래에서 시작하므로 헤더 띠(최대 16%)에 안 걸린다.
------------------------------------------------------------------------- */
.fs-p-67 {
--fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-67 .fs-page--overlay { background: #E2D6E7; }
.fs-p-67 .fs-header--overlay { color: var(--fs-ink); }
/* 2026-09-11 승인자 지시 「56 처럼 메뉴바 그라디에이션」 — fs.css:468 기본 ::before(검정 스크림)를
content:none 으로 껐던 것을 되살리고 배경만 밝은 안개로 바꾼다. 56 은 크림(246,241,236)인데
이 계열 19장은 히어로 틴트가 제각각(세이지·라벤더·블루그레이…)이라 크림을 얹으면 색이 물든다 —
흰색 알파는 어느 틴트 위에서도 «빛 번짐» 으로 읽힌다(47·64·67·48 비교 렌더로 확인).
위치·높이(헤더 1.6배)·pointer-events 는 fs.css 기본값 그대로다. */
.fs-p-67 .fs-header--overlay::before { background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.38) 55%, rgba(255,255,255,0) 100%); }
.fs-p-67 .fs-gnb__link { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-67 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-67 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-67 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-67 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-67 .fs-util__sep { opacity: .35; }
.fs-p-67 .fs-forehead-reduction-hero { background: #E2D6E7; color: var(--fs-ink); }
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치 — 위 고정이면 모델이 박스 아래쪽으로 내려앉는다 */
/* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
이 사진은 크라운이 원본 y=399 라 34% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__bg img { object-position: 50% 80%; }
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__kicker { color: var(--fs-teal-dk); font-weight: 600; }
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__title { color: var(--fs-ink); }
.fs-p-67 .fs-forehead-reduction-hero__lead { color: var(--fs-ink-soft); }
.fs-p-67 .fs-forehead-reduction-hero__rule {
display: block;
width: clamp(48px, 41.1px + 1.9vw, 78px);
height: 3px;
background: var(--fs-teal-dk);
}
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__copy {
max-width: 34rem;
gap: clamp(12px, 9.1px + 0.8vw, 22px);
}
/* <1024px — 히어로 박스가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
카피를 라일락 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다. 사진 윗단은
페이드로 녹여 이음매를 없앤다. */
@media (max-width: 1023px) {
.fs-p-67 .fs-forehead-reduction-hero { min-height: 0; background: #DBCFE3; }
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__bg {
position: static; inset: auto; z-index: 0; grid-row: 2;
}
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__bg img {
height: auto; aspect-ratio: 3 / 4; object-position: 50% 100%;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 96px);
mask-image: linear-gradient(180deg, transparent 0, #000 96px);
}
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__inner {
grid-row: 1; background: #DBCFE3;
padding-block: calc(var(--fs-header-h) + var(--fs-sp-9)) var(--fs-sp-11);
}
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__copy { max-width: 100%; }
}
/* --- 2. 얼굴 3분할 비율 게이지 ★ 시그니처 ------------------------------- */
.fs-p-67 .fs-forehead-reduction-ratio {
display: grid;
gap: clamp(24px, 18.2px + 1.6vw, 50px);
align-items: center;
}
@media (min-width: 768px) {
.fs-p-67 .fs-forehead-reduction-ratio {
grid-template-columns: minmax(0, 470fr) minmax(0, 640fr);
gap: clamp(28px, 12.6px + 2vw, 60px);
}
}
.fs-p-67 .fs-forehead-reduction-ratio__fig {
display: grid;
justify-self: center;
width: min(100%, 460px);
}
.fs-p-67 .fs-forehead-reduction-ratio__box {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(76px, 66.4px + 2.7vw, 104px);
column-gap: clamp(6px, 4.6px + 0.4vw, 12px);
background: var(--fs-white);
}
.fs-p-67 .fs-forehead-reduction-ratio__box img {
grid-column: 1;
display: block;
width: 100%;
height: auto;
}
.fs-p-67 .fs-forehead-reduction-ratio__gauge { position: relative; grid-column: 2; }
.fs-p-67 .fs-forehead-reduction-ratio__band {
position: absolute;
inset-inline: 0;
display: grid;
align-content: center;
justify-items: center;
gap: 2px;
color: var(--fs-on-dark);
background: var(--fs-teal-text);
}
.fs-p-67 .fs-forehead-reduction-ratio__band--1 { top: 16.13%; height: 26.20%; }
.fs-p-67 .fs-forehead-reduction-ratio__band--2 { top: 42.33%; height: 26.04%; background: var(--fs-teal-mid); }
.fs-p-67 .fs-forehead-reduction-ratio__band--3 { top: 68.37%; height: 21.14%; background: var(--fs-teal-dk); }
.fs-p-67 .fs-forehead-reduction-ratio__num { font-size: var(--fs-t-h3); font-weight: 700; line-height: 1; }
.fs-p-67 .fs-forehead-reduction-ratio__part { font-size: var(--fs-t-xs); font-weight: 600; }
.fs-p-67 .fs-forehead-reduction-ratio__legend { display: grid; align-content: center; }
.fs-p-67 .fs-forehead-reduction-ratio__list {
display: grid;
gap: var(--fs-sp-4);
margin-block-start: var(--fs-sp-6);
}
.fs-p-67 .fs-forehead-reduction-ratio__row {
display: grid;
grid-template-columns: clamp(66px, 60.2px + 1.6vw, 92px) minmax(0, 1fr);
align-items: center;
column-gap: var(--fs-sp-5);
padding-block: var(--fs-sp-4);
border-block-end: 1px solid var(--fs-line);
}
.fs-p-67 .fs-forehead-reduction-ratio__key { font-size: var(--fs-t-sub); font-weight: 600; color: var(--fs-ink); }
.fs-p-67 .fs-forehead-reduction-ratio__val {
display: grid;
grid-template-columns: 2.6em minmax(0, 1fr);
align-items: center;
column-gap: var(--fs-sp-5);
margin: 0;
}
.fs-p-67 .fs-forehead-reduction-ratio__figure {
font-size: var(--fs-t-h3);
font-weight: 700;
line-height: 1;
color: var(--fs-teal-dk);
}
.fs-p-67 .fs-forehead-reduction-ratio__bar { display: block; height: 10px; background: var(--fs-teal); }
.fs-p-67 .fs-forehead-reduction-ratio__bar--3 { width: 80%; }
.fs-p-67 .fs-forehead-reduction-ratio__note {
margin-block-start: var(--fs-sp-6);
color: var(--fs-muted);
}
/* --- 3. 정의 인용 + 이마높이 눈금자 ★ 시그니처 -------------------------- */
.fs-p-67 .fs-forehead-reduction-define__head { display: grid; justify-items: center; }
.fs-p-67 .fs-forehead-reduction-define__quote { margin-block-start: var(--fs-sp-6); max-width: 46em; }
.fs-p-67 .fs-forehead-reduction-define__body { margin-block-start: var(--fs-sp-5); color: var(--fs-muted); max-width: 54em; }
.fs-p-67 .fs-forehead-reduction-scale {
display: grid;
gap: clamp(22px, 16.2px + 1.6vw, 48px);
align-items: center;
margin-block-start: var(--fs-gap-title);
}
@media (min-width: 768px) {
.fs-p-67 .fs-forehead-reduction-scale {
grid-template-columns: minmax(0, 500fr) minmax(0, 620fr);
}
}
.fs-p-67 .fs-forehead-reduction-scale__fig { display: grid; justify-self: center; width: min(100%, 500px); }
.fs-p-67 .fs-forehead-reduction-scale__box { position: relative; display: block; overflow: hidden; }
.fs-p-67 .fs-forehead-reduction-scale__box img { display: block; width: 100%; height: auto; }
.fs-p-67 .fs-forehead-reduction-scale__ruler {
position: absolute;
inset-block: 23.17% 15.85%;
inset-inline-end: clamp(14px, 10.1px + 1.1vw, 32px);
width: clamp(18px, 16.1px + 0.5vw, 26px);
display: grid;
grid-template-rows: 3px minmax(0, 1fr) 3px;
justify-items: center;
}
.fs-p-67 .fs-forehead-reduction-scale__cap { width: 100%; height: 3px; background: var(--fs-teal-dk); }
.fs-p-67 .fs-forehead-reduction-scale__stem { width: 3px; height: 100%; background: var(--fs-teal-dk); }
.fs-p-67 .fs-forehead-reduction-scale__list { display: grid; gap: var(--fs-sp-3); }
.fs-p-67 .fs-forehead-reduction-scale__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: var(--fs-sp-5);
row-gap: var(--fs-sp-2);
padding-block: var(--fs-sp-5);
border-block-end: 1px solid var(--fs-line);
}
.fs-p-67 .fs-forehead-reduction-scale__label { font-size: var(--fs-t-sub); color: var(--fs-ink-soft); }
.fs-p-67 .fs-forehead-reduction-scale__value {
grid-column: 2;
justify-self: start;
font-size: var(--fs-t-h3);
font-weight: 700;
color: var(--fs-teal-dk);
white-space: nowrap;
}
@media (min-width: 600px) {
.fs-p-67 .fs-forehead-reduction-scale__item { grid-template-columns: auto minmax(0, 1fr) auto; }
.fs-p-67 .fs-forehead-reduction-scale__value { grid-column: auto; justify-self: end; }
}
/* --- 4. 수술정보 표 + 인물 패널 ----------------------------------------- */
.fs-p-67 .fs-forehead-reduction-spec {
display: grid;
gap: clamp(28px, 20.8px + 2vw, 60px);
align-items: start;
}
@media (min-width: 1024px) {
.fs-p-67 .fs-forehead-reduction-spec { grid-template-columns: minmax(0, 880fr) minmax(0, 460fr); }
}
.fs-p-67 .fs-forehead-reduction-spec__table { margin-block-start: var(--fs-gap-title); }
.fs-p-67 .fs-forehead-reduction-spec .fs-table { background: var(--fs-white); }
/* 머리행과 칸을 «같이» 가운데로 보낸다. 한쪽만 옮기면 칸과 어긋난다. */
.fs-p-67 .fs-forehead-reduction-spec .fs-table :is(thead th, tbody td) { text-align: center; }
.fs-p-67 .fs-forehead-reduction-spec .fs-table tbody th {
display: flex;
align-items: center;
justify-content: center;
gap: var(--fs-sp-5);
font-weight: 700;
}
.fs-p-67 .fs-forehead-reduction-spec .fs-table tbody td {
font-size: var(--fs-t-lead);
font-weight: 500;
color: var(--fs-ink);
}
.fs-p-67 .fs-forehead-reduction-spec__ico {
display: grid;
place-items: center;
flex: 0 0 auto;
width: clamp(40px, 36.2px + 1.1vw, 52px);
aspect-ratio: 1;
background: var(--fs-cream-2);
}
.fs-p-67 .fs-forehead-reduction-spec__ico img { width: 62%; height: auto; }
.fs-p-67 .fs-forehead-reduction-spec__fig { display: grid; }
.fs-p-67 .fs-forehead-reduction-spec__frame { display: block; overflow: hidden; }
.fs-p-67 .fs-forehead-reduction-spec__frame img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 50% 18%;
}
/* --- 5. 다크 밴드 · 헤어라인 CASE 타일 ---------------------------------- */
.fs-p-67 .fs-forehead-reduction-case-sec__bg img { opacity: .18; }
.fs-p-67 .fs-forehead-reduction-case__head { display: grid; justify-items: center; gap: var(--fs-sp-5); }
.fs-p-67 .fs-forehead-reduction-case__lead { color: var(--fs-on-dark); max-width: 46em; }
.fs-p-67 .fs-forehead-reduction-case {
display: grid;
gap: var(--fs-gap-card);
grid-template-columns: minmax(0, 1fr);
margin-block-start: var(--fs-gap-title);
list-style: none;
}
@media (min-width: 600px) { .fs-p-67 .fs-forehead-reduction-case { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-67 .fs-forehead-reduction-case { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fs-p-67 .fs-forehead-reduction-case__item {
display: grid;
align-content: start;
background: var(--fs-white);
}
.fs-p-67 .fs-forehead-reduction-case__fig { display: grid; }
.fs-p-67 .fs-forehead-reduction-case__fig img { display: block; width: 100%; height: auto; }
.fs-p-67 .fs-forehead-reduction-case__cap {
padding: var(--fs-sp-5) var(--fs-sp-4) var(--fs-sp-6);
text-align: center;
color: var(--fs-ink);
}
/* --- 6. 특징 카드 (A18 확장 — 우측 패널이 사진에 겹친다) ---------------- */
.fs-p-67 .fs-forehead-reduction-feature {
display: grid;
gap: clamp(26px, 20.2px + 1.6vw, 52px);
margin-block-start: var(--fs-gap-title);
list-style: none;
}
@media (min-width: 1024px) {
.fs-p-67 .fs-forehead-reduction-feature {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--fs-gap-col);
}
}
.fs-p-67 .fs-forehead-reduction-feature__card { display: grid; }
.fs-p-67 .fs-forehead-reduction-feature__media { display: grid; overflow: hidden; }
.fs-p-67 .fs-forehead-reduction-feature__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 5 / 4;
object-fit: cover;
}
.fs-p-67 .fs-forehead-reduction-feature__panel {
position: relative;
z-index: 1;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--fs-sp-4) var(--fs-sp-5);
margin-inline-start: clamp(16px, 8.3px + 2.1vw, 50px);
outline: 1px solid var(--fs-line);
}
.fs-p-67 .fs-forehead-reduction-feature__no { grid-column: 1; grid-row: 1; }
.fs-p-67 .fs-forehead-reduction-feature__icon { grid-column: 2; grid-row: 1; justify-self: end; display: block; }
.fs-p-67 .fs-forehead-reduction-feature__icon img {
display: block;
width: clamp(42px, 36.2px + 1.6vw, 62px);
height: auto;
}
.fs-p-67 .fs-forehead-reduction-feature__panel .fs-card__title { grid-column: 1 / -1; }
.fs-p-67 .fs-forehead-reduction-feature__panel .fs-card__desc { grid-column: 1 / -1; color: var(--fs-muted); }
@media (min-width: 1024px) {
.fs-p-67 .fs-forehead-reduction-feature__card {
position: static;
grid-template-columns: minmax(0, 62fr) minmax(0, 46fr);
align-items: center;
}
.fs-p-67 .fs-forehead-reduction-feature__media { grid-column: 1; grid-row: 1; }
.fs-p-67 .fs-forehead-reduction-feature__card .fs-card__panel {
position: relative;
inset: auto;
width: auto;
grid-column: 2;
grid-row: 1;
margin-block-start: 0;
margin-inline-start: calc(-1 * clamp(22px, 8.6px + 1.3vw, 44px));
}
}
/* --- 7. 사진 스텝 4연 + 틸 커넥터 --------------------------------------- */
.fs-p-67 .fs-forehead-reduction-step {
display: grid;
gap: var(--fs-gap-card);
grid-template-columns: minmax(0, 1fr);
margin-block-start: var(--fs-gap-title);
list-style: none;
}
@media (min-width: 600px) { .fs-p-67 .fs-forehead-reduction-step { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-67 .fs-forehead-reduction-step { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fs-p-67 .fs-forehead-reduction-step__item {
position: relative;
display: grid;
align-content: start;
padding-block-end: var(--fs-sp-7);
background: var(--fs-white);
}
.fs-p-67 .fs-forehead-reduction-step__fig { display: grid; }
.fs-p-67 .fs-forehead-reduction-step__fig img { display: block; width: 100%; height: auto; }
.fs-p-67 .fs-forehead-reduction-step__title {
margin-block-start: var(--fs-sp-6);
padding-inline: var(--fs-sp-5);
color: var(--fs-teal-dk);
}
.fs-p-67 .fs-forehead-reduction-step__desc {
margin-block-start: var(--fs-sp-4);
padding-inline: var(--fs-sp-5);
color: var(--fs-muted);
}
@media (min-width: 1024px) {
.fs-p-67 .fs-forehead-reduction-step__item + .fs-forehead-reduction-step__item::before {
content: "";
position: absolute;
inset-inline-start: calc(-1 * var(--fs-gap-card));
inset-block-start: 22%;
width: var(--fs-gap-card);
height: 3px;
background: var(--fs-teal);
}
}
/* --- 8. CTA 밴드 (좌 사진 / 우 크림 카피) ------------------------------- */
.fs-p-67 .fs-forehead-reduction-cta { align-items: stretch; }
.fs-p-67 .fs-forehead-reduction-cta__fig { overflow: hidden; }
.fs-p-67 .fs-forehead-reduction-cta__fig img {
display: block;
width: 100%;
height: 100%;
min-height: clamp(240px, 194.2px + 12.7vw, 420px);
object-fit: cover;
object-position: 50% 32%;
}
.fs-p-67 .fs-forehead-reduction-cta__copy {
display: grid;
align-content: center;
gap: var(--fs-sp-5);
padding: clamp(40px, 27.1px + 3.6vw, 96px) var(--fs-gutter);
background: var(--fs-cream);
}
.fs-p-67 .fs-forehead-reduction-cta__copy .fs-btnbar { margin-block-start: var(--fs-sp-5); }
@media (min-width: 1024px) {
.fs-p-67 .fs-forehead-reduction-cta__copy {
padding-inline-end: max(var(--fs-gutter), calc((100vw - var(--fs-container)) / 2 + var(--fs-gutter)));
padding-inline-start: clamp(30px, 15.1px + 1.5vw, 64px);
}
}
/* --- 9. 중앙 정렬 섹션 헤드 (.fs-nose-head 는 justify-items:start 가 기본) --- */
.fs-p-67 .fs-forehead-reduction-feature__head,
.fs-p-67 .fs-forehead-reduction-step__head { justify-items: center; }
/* ==========================================================================
▼▼▼ 진단·수정 패스 — 2026-08-27
근거: _design/DESIGN_SYSTEM.md 6장 VIBE LOCK · _design/QA/48.md 「V70 승격분」
이 블록은 위 정의부를 덮어쓰는 후행 규칙이다. 새 hex 0개.
========================================================================== */
/* --- A. [접근성] 비율 게이지 중간 밴드가 AA 미달 ------------------------
흰 글자 on --fs-teal-mid #008E98 = 3.95:1 (기준 4.5). qa.py 가 「중안면부」에서 잡는다.
흰 글자를 얹을 수 있는 면은 #00787F / #00646B / #111111 세 가지뿐이므로
(DESIGN_SYSTEM 6장 3항 판정법 c) 게이지를 그 3단 사다리로 다시 깐다.
상·중이 둘 다 1, 하가 0.8 이라 위→아래로 어두워지는 순서도 유지된다.
상안면부 --fs-teal-text #00787F 5.26:1
중안면부 --fs-teal-text #00787F 5.26:1
하안면부 --fs-teal-dk #00646B 6.92:1 (원래 값 그대로)
상·중이 같은 색이 되면 두 칸이 한 덩어리로 붙어 보인다(사이에 여백이 없다).
→ 밴드 높이는 얼굴 사진의 점선 위치에 맞춰진 실측값이므로 top/height 는 건드리지 않고,
box-sizing:border-box(fs.css:206) 아래 아래쪽 테두리로 2px 흰 이음매만 카운다.
결과적으로 「1 = 1 > 0.8」이 색으로도 읽힌다. */
.fs-p-67 .fs-forehead-reduction-ratio__band--2 { background: var(--fs-teal-text); }
.fs-p-67 .fs-forehead-reduction-ratio__band--1,
.fs-p-67 .fs-forehead-reduction-ratio__band--2 { border-block-end: 2px solid var(--fs-white); }
/* --- B. [V70 · D] 인접 두 섹션의 도해 축이 같다 -------------------------
렌더 실측: S1 히어로(도해 좌 / 수치 우) 와 S2 정의(도해 좌 / 목록 우) 가 같은 축이라
첫 두 화면이 같은 리듬으로 붙는다. 히어로의 축만 뒤집어
히어로 R → 정의 L → 수술정보 R(인물컷 우) 로 번갈아 놓는다.
★ DOM 순서는 건드리지 않는다 — order 로만 뒤집는다.
figure 를 legend 뒤로 옮기면 텍스트 노드 순서가 바뀌어 R1(문구 불변)이 깨진다.
덤: 도해가 justify-self:center 라 470fr 칸 안에서 좌우로 떠 있었다.
뒤집은 쪽은 오른쪽 끝(x1679), 다음 섹션은 왼쪽 끝(x240)에 물려 축 대비가 선다. */
@media (min-width: 768px) {
.fs-p-67 .fs-forehead-reduction-ratio { grid-template-columns: minmax(0, 640fr) minmax(0, 470fr); }
.fs-p-67 .fs-forehead-reduction-ratio__fig { order: 2; justify-self: end; }
.fs-p-67 .fs-forehead-reduction-ratio__legend { order: 1; }
.fs-p-67 .fs-forehead-reduction-scale__fig { justify-self: start; }
}
/* --- C. [마이크로] 섹션 제목 뒤 70px 틸 선 (delay .5s) ------------------
48.css 「B. 타이포 리듬」과 같은 처방. 다크 밴드의 .fs-display 대제목은
제외한다 — 확정 시안 57 의 .fs-nose-compare-title 에도 선이 없다.
★ 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다(첫화면 게이트).
→ 기본을 「그어진 상태」로 두고, 실제 리빌 대상에만 초기 은닉을 건다. */
.fs-p-67 .fs-forehead-reduction-define__head > h2,
.fs-p-67 .fs-forehead-reduction-spec__main .fs-nose-head > h2,
.fs-p-67 .fs-forehead-reduction-feature__head > h2,
.fs-p-67 .fs-forehead-reduction-step__head > h2 {
position: relative;
}
.fs-p-67 .fs-forehead-reduction-define__head > h2::after,
.fs-p-67 .fs-forehead-reduction-spec__main .fs-nose-head > h2::after,
.fs-p-67 .fs-forehead-reduction-feature__head > h2::after,
.fs-p-67 .fs-forehead-reduction-step__head > h2::after {
content: "";
display: block;
width: 70px;
height: 1px;
margin-block-start: var(--fs-sp-4);
background: var(--fs-teal);
transform: scaleX(1);
transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
/* 가운데정렬 헤드는 선도 가운데에서 자란다 */
.fs-p-67 .fs-forehead-reduction-define__head > h2::after,
.fs-p-67 .fs-forehead-reduction-feature__head > h2::after,
.fs-p-67 .fs-forehead-reduction-step__head > h2::after {
margin-inline: auto;
transform-origin: center;
}
/* 좌측정렬 헤드(.fs-nose-head 는 justify-items:start)는 왼쪽에서 자란다 */
.fs-p-67 .fs-forehead-reduction-spec__main .fs-nose-head > h2::after {
transform-origin: left center;
}
:root.fs-js .fs-p-67 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-67 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }
/* --- D. [마이크로] 호버 = 프레임 고정 + 사진만 scale(1.045) -------------
그림자는 쓰지 않는다(2차 규칙 「그림자 0」).
· CASE·STEP 도해는 figure 에 overflow 가 없어 확대분이 밖으로 샌다 → 프레임을 닫는다.
· 확대분 아래 7px 는 라벨바 뒤로 들어가야 한다 → 라벨바를 z-index 1 로 올린다.
(.fs-tilt__gloss 는 z-index 2 라 광택은 지금과 똑같이 라벨바 위에 뜬다)
· 비율 게이지(ratio__box)와 이마높이 눈금자(scale__box)는 제외한다.
오버레이 눈금이 얼굴의 실제 위치에 맞춰져 있어 사진만 확대하면 계측이 어긋난다. */
/* 프레임 닫기·라벨바 올리기는 정지 상태에서도 무해하므로 호버 질의 밖에 둔다.
호버 질의 안에 넣으면 헤드리스(pointer 없음)에서 규칙 자체가 죽어 검증이 안 된다. */
.fs-p-67 .fs-forehead-reduction-case__fig,
.fs-p-67 .fs-forehead-reduction-step__fig { overflow: hidden; }
.fs-p-67 .fs-forehead-reduction-case__fig > .fs-labelbar,
.fs-p-67 .fs-forehead-reduction-step__fig > .fs-labelbar,
.fs-p-67 .fs-forehead-reduction-feature__media > .fs-labelbar { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
.fs-p-67 .fs-forehead-reduction-case__fig > img,
.fs-p-67 .fs-forehead-reduction-step__fig > img,
.fs-p-67 .fs-forehead-reduction-feature__media > img,
.fs-p-67 .fs-forehead-reduction-spec__frame > img {
transition: transform var(--fs-dur) var(--fs-ease);
}
.fs-p-67 .fs-forehead-reduction-case__item:hover .fs-forehead-reduction-case__fig > img,
.fs-p-67 .fs-forehead-reduction-step__item:hover .fs-forehead-reduction-step__fig > img,
.fs-p-67 .fs-forehead-reduction-feature__card:hover .fs-forehead-reduction-feature__media > img,
.fs-p-67 .fs-forehead-reduction-spec__fig:hover .fs-forehead-reduction-spec__frame > img {
transform: scale(1.045);
}
}
/* --- E. reduced-motion — C·D 에서 새로 생긴 전환만 끈다 ----------------- */
@media (prefers-reduced-motion: reduce) {
.fs-p-67 .fs-forehead-reduction-define__head > h2::after,
.fs-p-67 .fs-forehead-reduction-spec__main .fs-nose-head > h2::after,
.fs-p-67 .fs-forehead-reduction-feature__head > h2::after,
.fs-p-67 .fs-forehead-reduction-step__head > h2::after {
transition: none !important;
transform: scaleX(1) !important;
}
.fs-p-67 .fs-forehead-reduction-case__fig > img,
.fs-p-67 .fs-forehead-reduction-step__fig > img,
.fs-p-67 .fs-forehead-reduction-feature__media > img,
.fs-p-67 .fs-forehead-reduction-spec__frame > img {
transition: none !important;
transform: none !important;
}
}
/* ==========================================================================
▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 포유리프팅 = 허니 베이지 #E8D8C2 (fs.css «카테고리 틴트» 블록 + body.fs-cat-lifting)
공용 블록이 헤더 뒤 바탕·히어로 바탕·메뉴 안개(연한색 #F8F3ED)·글자 후광을 정한다. 여기서는 사진에 맞춘 «위치» 만.
사진: i2i «인물·프레이밍 그대로, 배경만 왼쪽 #E8D8C2 → 모델 뒤 연한 크림 #F5EEE4 글로우, wide feathered falloff, no split»
→ hero-model-duo(-mo).jpg (모바일은 데스크톱 결과의 3:4 크롭). 모델 오른쪽(x 55~72%) · 카피 왼쪽 → 왼→오 스크림(0 지점 55%). 킥커 → teal-dk. LOCK 4: #ratio 크림 → 흰, 아래 교대 다시 — #define 흰 → 크림, #spec 크림 → 흰, #cases 잉크2.
========================================================================== */
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__bg::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(var(--fs-cat), .92) 0%, rgba(var(--fs-cat), .90) 26%, rgba(var(--fs-cat), .50) 43%, rgba(var(--fs-cat), 0) 55%);
}
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__kicker { color: var(--fs-teal-dk); }
@media (max-width: 1023px) {
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__bg::after { content: none; }
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}
.fs-p-67 #ratio { background: var(--fs-white); }
.fs-p-67 #define { background: var(--fs-cream); }
.fs-p-67 #spec { background: var(--fs-white); }
/* ==========================================================================
▼▼▼ 2026-09-21 · 승인자 「코성형·포유리프팅·윤곽성형·바디성형 히어로 통일」 — 규정 = 81 코재수술 포맷.
영문 시술명 킥커 → 한글 제목 → 줄 → 리드(기존 한국어 문구). 값은 81.css 1절:
킥커 21/500/.02em(틸) · 제목 58/700/1.22 · 요소 간격 10px · 줄 아래 8px · 리드 --fs-t-lead/1.5/#111.
사진·카피 상자 위치·스크림은 그대로 둔다(33 선례 「모델 위치는 그대로 텍스트 부분만」).
줄 요소의 폭(48~72)·두께·색은 fs.css:3485 정본 규칙이 정한다 — 여기서는 아래 여백만 준다.
========================================================================== */
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__copy { gap: var(--fs-sp-3); }
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__kicker {
font-family: inherit; font-size: clamp(15px, 13.5px + 0.42vw, 21px);
letter-spacing: 0.02em; font-weight: 500; line-height: 1.25; color: var(--fs-teal-dk);
}
.fs-p-67 .fs-forehead-reduction-hero .fs-hero__title {
font-size: clamp(30px, 21.4px + 2.39vw, 58px);
font-weight: 700; line-height: 1.22; color: var(--fs-ink);
}
.fs-p-67 .fs-forehead-reduction-hero__rule { margin-block-end: var(--fs-sp-2); }
.fs-p-67 .fs-forehead-reduction-hero .fs-forehead-reduction-hero__lead {
max-width: 34em; font-size: var(--fs-t-lead); font-weight: 400; line-height: 1.5; color: var(--fs-ink);
}
/* ==========================================================================
▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만.
PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-67-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
· 정의 본문: `
` 세 줄 = 문장 하나 + PC 줄 경계에서 잘린 문장 하나 → 문장 블록 2(§1-4) + 옛 경계 `
`(§1-7).
360 「…45도 절개 후 일부 제거하고 / 이마쪽으로…」 가 br 로 끊겨 「…헤어라인을 / 교정해주는…」 6줄 → 문장마다 고르게.
· 남은 것: 특징 h2 360 「…이마 라인 / 연출」 — 형광 칸이 inline-block 이라 칸 뒤 로는 안 묶인다(실측, §7-19). 손대지 않음.
· balance(전 폭): 케이스 캡션 · 특징 카드 설명 · 단계 설명 · 리드 · 영문 킥커 · 섹션 h2.
· 케이스 4장(다크 밴드): <600 1열(1,519px) → 2열(600~1023 과 같다, §2 A). 155px 칸이라 캡션 한 단 작게.
========================================================================== */
.fs-p-67 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-67 .fs-forehead-reduction-case__cap,
.fs-p-67 .fs-card__desc,
.fs-p-67 #steps .fs-body,
.fs-p-67 main .fs-lead,
.fs-p-67 main .fs-kicker,
.fs-p-67 main .fs-h2 { text-wrap: balance; }
@media (max-width: 599px) {
.fs-p-67 .fs-forehead-reduction-case { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-sp-4); }
.fs-p-67 .fs-forehead-reduction-case__cap { padding: var(--fs-sp-4) var(--fs-sp-2) var(--fs-sp-5); font-size: var(--fs-t-xs); word-break: keep-all; }
}