/* ==========================================================================
page/80.css — [80] 눈재수술 전용 추가 CSS
· 셀렉터는 전부 .fs-p-80 스코프 안에만 둔다 (다른 73장에 영향 0)
· 색·간격·타이포는 fs.css :root 의 --fs-* 토큰만 쓴다. 새 hex 없음
· fs.css 뒤에 로드된다
========================================================================== */
/* --- 0. 반복 간격 유틸 (인라인 style 을 줄이기 위한 최소 셋) -------------- */
.fs-p-80 .fs-p-80-sub { margin-block-start: var(--fs-sp-5); }
/* 2026-09-17 승인자 「너무 붙어있어 · 3cm 정도」: 64 → 1920 에서 176(+112 ≈ 3cm), 360 에서 100 */
.fs-p-80 .fs-p-80-subhead { margin-block-start: clamp(100px, 82.461539px + 4.871795vw, 176px); }
/* 2026-09-17 승인자 「sub title 처럼」: fs-h3(27) 가 딸린 제목(삼각피판 활용 32 · 방법 30)보다 작았다 → h2(40) 와 그 사이 36 (360 에서 25) */
/* 2026-09-17 승인자 C안 — 제목 위계 40(섹션 제목) › 32(소제목) › 28(블록 제목). 36 은 섹션 제목 40 과 붙어 제목이 작아 보였다. */
.fs-p-80 .fs-p-80-subhead { font-size: clamp(22px, 19.69px + 0.641vw, 32px); word-break: keep-all; }
.fs-p-80 .fs-p-80-dzgrid,
.fs-p-80 .fs-p-80-gap { margin-block-start: var(--fs-gap-title); }
.fs-p-80 .fs-p-80-flapsplit,
.fs-p-80 .fs-p-80-merits,
.fs-p-80 .fs-p-80-methods { margin-block-start: var(--fs-sp-9); }
/* 2026-09-17 승인자 「소제목 아래가 너무 붙어있어 · 1~2cm」: 두 소제목 바로 아래 40 → 1920 에서 96(+56 ≈ 1.5cm), 360 에서 60 */
.fs-p-80 .fs-p-80-subhead + .fs-p-80-flapsplit,
.fs-p-80 .fs-p-80-subhead + .fs-p-80-methods { margin-block-start: clamp(60px, 51.692309px + 2.307693vw, 96px); }
.fs-p-80 .fs-p-80-numlist { margin-block-start: var(--fs-sp-5); }
/* --- 1. 히어로 : 풀블리드 수술실 --tall + 좌측 정렬 해시태그 ------------ */
/* plans/80.json hero_style = --tall(740→1080). fs.css 의 .fs-hero--tall 은
4.359vw 보간이라 1920 에서도 755px 에 머문다 → 이 페이지에서만 실제 740→1080 으로 잡는다 */
/* --- 셸 · 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 ----------------------
수술 다큐컷 히어로를 모델 한 장으로 바꿨다. 히어로 상단은 전 폭이 짙은
에스프레소(#1B1211)라 «흰 글자» 가 넉넉하다 — 스크림이 필요 없다.
모델 얼굴은 사진 높이의 24.2% 아래에서 시작해 헤더 띠(최대 11%)에 안 걸린다. */
.fs-p-80 {
--fs-header-overlay-bg: transparent;
}
.fs-p-80 .fs-page--overlay { background: #1B1211; }
/* 2026-09-11 승인자 지시 「56 처럼 상단 메뉴바 그라디에이션」.
56 의 처방(배경색 안개)을 그대로 옮기면 이 히어로는 배경이 #1B1211 이라 «검은 안개» 가 되는데,
사진 상단이 이미 밝기 20 이라 눈에 안 보인다(검정 .42 · 톤 .84 둘 다 Δ<7 실측).
보이는 효과를 내려면 밝은 안개뿐이다 — 흰 알파를 밝은 히어로(.72)의 절반 이하로 낮춰
흰 GNB 대비를 지킨다(pixcontrast 실측은 아래 주석). */
.fs-p-80 .fs-header--overlay::before { background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.15) 55%, rgba(255,255,255,0) 100%); }
.fs-p-80 .fs-gnb__link { font-weight: 400; opacity: .92; }
.fs-p-80 .fs-gnb__link:hover,
.fs-p-80 .fs-gnb__link:focus-visible { opacity: 1; }
.fs-p-80 .fs-util__link { opacity: .8; }
.fs-p-80 .fs-util__link:hover { opacity: 1; }
.fs-p-80 .fs-util__sep { opacity: .3; }
/* 히어로 높이 — 1920 에서 610px. 50 번(매부리코) 히어로 실측 610 에 맞췄다. */
.fs-p-80 .fs-p-80-hero { min-height: clamp(430px, 341.5px + 14vw, 610px); background: #1B1211; }
.fs-p-80 .fs-p-80-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 2026-09-17 병원 요청(리뷰티 수정(눈재수술).pptx 1) 「전체적으로 코재수술 배치 + 텍스트 크기·색상 동일하게」
— 해시태그 대형 킥커 + 4줄 제목을 걷어내고 81 과 같은 «영문 킥커 → 제목 → 선 → 카피» 로. 값은 81.css 1절 그대로.
사진(hero-model-0917.jpg 1920x610)은 병원이 보낸 원본을 얼굴 중심 x1280(= 81 의 66.7vw)에 앉히고
좌우를 사진 배경색으로 늘린 것이라 81 처럼 «위 고정» cover 한 장이다. */
.fs-p-80 .fs-p-80-hero .fs-hero__bg img { object-position: 50% 0%; }
.fs-p-80 .fs-p-80-hero .fs-hero__copy { max-width: 40rem; gap: var(--fs-sp-3); }
.fs-p-80 .fs-p-80-hero .fs-hero__kicker,
.fs-p-80 .fs-p-80-hero .fs-hero__title,
.fs-p-80 .fs-p-80-hero .fs-p-80-hero__lead { color: var(--fs-ink); }
.fs-p-80 .fs-p-80-hero .fs-hero__kicker {
font-size: clamp(15px, 13.5px + 0.42vw, 21px);
letter-spacing: 0.02em; font-weight: 500; color: var(--fs-teal-dk);
}
.fs-p-80 .fs-p-80-hero .fs-hero__title {
font-size: clamp(30px, 21.4px + 2.39vw, 58px);
font-weight: 700; line-height: 1.22;
}
.fs-p-80 .fs-p-80-hero__rule {
display: block; width: 56px; height: 2px;
margin-block: var(--fs-sp-2);
background: var(--fs-teal);
}
.fs-p-80 .fs-p-80-hero__lead { max-width: 34em; color: var(--fs-ink-soft); }
/* --- 2. ★ 전용 컴포넌트 1 : 도해 카드 fs-p-80-dz ------------------------ */
/* 원본 보드의 '틸 테두리 박스 + 번호 원 + 하단 틸 띠' 를 fs 부품으로 옮긴 것.
눈재수술 고려할 때 / 어려운 이유 / 소시지눈 원인 세 곳이 같은 리듬으로 반복된다 */
.fs-p-80 .fs-p-80-dz { display: grid; grid-template-rows: minmax(0, 1fr); height: 100%; }
/* [2026-08-28] 흰 면과 테두리는 «틸트가 잡는 요소» 에 있어야 한다 — 아래 D 참조 */
.fs-p-80 .fs-p-80-dz__inner {
display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%;
background: var(--fs-white); border: 1px solid var(--fs-teal);
}
.fs-p-80 .fs-p-80-dz__inner > .fs-pill { justify-self: center; margin-block-start: var(--fs-sp-5); }
.fs-p-80 .fs-p-80-dz__fig {
display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; overflow: hidden;
}
/* 선그림 SVG → 실사 CG 눈 클로즈업. 카드를 꽉 채우게 cover 로 깔고 여백을 없앤다. */
.fs-p-80 .fs-p-80-dz__fig img {
display: block; width: 100%; height: 100%; max-width: none;
object-fit: cover; padding: 0;
}
.fs-p-80 .fs-p-80-dz .fs-labelbar {
min-height: clamp(44px, 41px + 0.9vw, 58px);
padding-block: var(--fs-sp-1);
font-size: var(--fs-t-body); line-height: 1.35;
}
/* --- 3. 어려운 이유 : 3스텝 -------------------------------------------- */
/* 커넥터 가로 전환점이 1400px 이다. 3스텝은 940px 부터 한 줄에 들어가므로
이 페이지에서만 앞당기고, 그라데이션 대신 토큰 한 색으로 채워 방향 문제를 없앤다 */
.fs-p-80 .fs-p-80-steps { margin-block-start: var(--fs-sp-11); }
.fs-p-80 .fs-p-80-steps .fs-steps__link--active { background: var(--fs-teal); }
@media (min-width: 940px) {
.fs-p-80 .fs-p-80-steps { flex-direction: row; justify-content: center; }
.fs-p-80 .fs-p-80-steps .fs-steps__link { width: clamp(28px, 4.4vw - 13px, 42px); height: 3px; }
}
/* --- 5. 번호 매긴 술식 절차 리스트 -------------------------------------- */
.fs-p-80 .fs-p-80-numlist { display: grid; gap: var(--fs-sp-3); }
.fs-p-80 .fs-p-80-numlist > li {
display: grid; grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--fs-sp-3);
font-size: var(--fs-t-body); line-height: var(--fs-lh-body);
}
.fs-p-80 .fs-p-80-numlist__n { font-weight: 700; color: var(--fs-teal-dk); }
/* --- 6. 체크 항목 리스트 ------------------------------------------------ */
.fs-p-80 .fs-p-80-checks { display: grid; gap: var(--fs-sp-2); }
.fs-p-80 .fs-p-80-checks > li {
position: relative; padding-inline-start: 24px;
font-size: var(--fs-t-body); line-height: var(--fs-lh-body);
}
.fs-p-80 .fs-p-80-checks > li::before {
content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 0.42em;
width: 10px; height: 5px;
border-inline-start: 2px solid var(--fs-teal-dk);
border-block-end: 2px solid var(--fs-teal-dk);
transform: rotate(-45deg);
}
/* --- 7. 앞트임 문제 카드 (A11 3분할 안에서) ----------------------------- */
/* fs.css 의 .fs-nose-dz__cards 는 3열 고정이다. 57 은 카드가 도해+라벨바뿐이라 좁은 폭에서도
버티지만 여기는 카드마다 체크 리스트가 붙어 한 줄에 두 글자씩 쪼개진다 → 768 미만은 1열 */
.fs-p-80 .fs-p-80-probs { align-items: stretch; }
@media (max-width: 767px) {
.fs-p-80 .fs-p-80-probs { grid-template-columns: minmax(0, 1fr); }
.fs-p-80 .fs-p-80-prob__fig img { max-width: 418px; margin-inline: auto; }
}
.fs-p-80 .fs-p-80-prob { display: grid; grid-template-rows: minmax(0, 1fr); }
.fs-p-80 .fs-p-80-prob__inner {
display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%;
background: var(--fs-white);
}
.fs-p-80 .fs-p-80-prob__fig { display: grid; overflow: hidden; }
.fs-p-80 .fs-p-80-prob__fig img { display: block; width: 100%; height: auto; }
.fs-p-80 .fs-p-80-prob .fs-p-80-checks { padding: var(--fs-sp-5) var(--fs-sp-4) var(--fs-sp-6); }
/* --- 8. 삼각피판 도해 · 앞트임 복원 장점 카드 --------------------------- */
.fs-p-80 .fs-p-80-flap { display: grid; }
.fs-p-80 .fs-p-80-flap img { display: block; width: 100%; height: auto; }
.fs-p-80 .fs-p-80-merit {
display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%;
background: var(--fs-white); border: 1px solid var(--fs-teal);
}
.fs-p-80 .fs-p-80-merit__fig { display: block; overflow: hidden; padding: var(--fs-sp-3) var(--fs-sp-3) 0; }
.fs-p-80 .fs-p-80-merit__fig img { display: block; width: 100%; max-width: 236px; height: auto; margin-inline: auto; }
/* --- 9. Before & After 아래 「동일인물」 고지 ---------------------------- */
.fs-p-80 .fs-p-80-ba__foot { margin-block-start: var(--fs-sp-8); }
/* --- 모션 무효화 -------------------------------------------------------- */
/* (태그 hover 전환은 2026-09-17 「원인」 룰 카드를 걷어내며 같이 없어졌다) */
/* ==========================================================================
[진단·수정 패스 2026-08-28] — 아래는 이 패스에서 더한 것.
앞의 1~10 절에서 손댄 곳은 §2 .fs-p-80-dz 와 §7 .fs-p-80-prob 두 군데뿐이고,
둘 다 「흰 면·테두리를 __inner 로 옮긴다」 한 가지 이유다(아래 D).
========================================================================== */
/* ==========================================================================
A. LOCK 5 — 다크 밴드 0개였다
11,259px 짜리 시술 상세인데 흰-크림-흰-크림-…이 끝까지 한 번도 안 끊겼다.
적용 범위 행렬에서 5항은 시술 상세에 «필수» 다.
#hard(눈재수술이 어려운 이유)를 유일한 다크 밴드로 세웠다 — 10개 중 4번째로
확정 시안 57(9개 중 4번째)·91(8개 중 4번째)과 같은 자리다.
이 섹션을 고른 이유: 안의 도해 3장이 «흰 카드 안»에 들어 있어 다크 면 위에서도
자기 배경을 갖는다. 다른 후보(#cause·#methods)는 도해 SVG 가 배경 투명 +
검은 윤곽선이라 #3C3D3F 위에서 눈 윤곽이 통째로 사라진다.
========================================================================== */
/* LOCK 5 는 밴드에 --flush 또는 .fs-section__bg 를 요구한다 → 세로 여백은
컨테이너가 직접 갖는다. 57 의 다크 밴드(.fs-nose-compare-sec)와 같은 대칭 값. */
.fs-p-80 .fs-p-80-hard > .fs-container { padding-block: var(--fs-sec-pb); }
/* 대제목을 .fs-h2 인 채로 흰 글자로 만들면 LOCK 7(d)「.fs-h2 는 rgb(17,17,17)」에
걸린다 → 57 .fs-nose-compare-title · 91 .about-system__title 과 같이
«다크 밴드 대제목»(.fs-display, 1920 = 60px)으로 분리했다. */
.fs-p-80 .fs-p-80-hard-title { line-height: 1.19; }
/* .fs-section--ink2 는 자손 p 까지 흰색으로 상속시킨다(fs.css:317).
스텝 원(#F3F3F3 / 흰색)은 자기 배경을 갖는 밝은 면이므로 글자를 되돌린다. */
.fs-p-80 .fs-p-80-hard .fs-step__text { color: var(--fs-ink); }
/* ==========================================================================
C. 접근성 — 면책 고지문 3.67:1
--fs-muted-2(#7D7D7D)는 fs.css:2599~ 의 AA 보정 밴드 «밖» 이라 크림 위에서
미달이다. 같은 회색 계열 --fs-muted(보정 후 #6E6E6E)로 한 단 내린다. 새 색 0개.
========================================================================== */
.fs-p-80 .fs-p-80-ba__foot .fs-muted-2 { color: var(--fs-muted); }
/* ==========================================================================
D. 호버 — 틸트가 라벨바를 두고 갔다
HTML 에서 걷어낸 자리의 대체 처방. 확정 시안의 틸트는 «시각 단위 전체» 를
돌린다(57·91 실측 커버율 전부 1.00). 이 페이지는 그렇지 않은 자리가 있었다:
· .fs-p-80-flap / 소시지 술식 figure 2장 — inner 가 사진 span 이고
figcaption(.fs-labelbar)이 그 형제라 4° 에서 사진만 5.5~6px 삐져나가
LOCK 2 의 「간격 0 · 폭 일치」가 호버 중에만 깨졌다.
figcaption 은 figure 직계여야 해서 감쌀 수 없다 → 틸트를 떼고
48 에서 검증된 「프레임 고정 + 사진만 scale(1.045)」로 갈았다. 그림자 0.
· .fs-card--rule 4장 — inner 가 카드 면적의 9%(1440x152 중 168x112)라
행 어디에 올려도 저 멀리 도해 한 조각만 돌았다 → 틸트를 걷어냈다.
· .fs-p-80-merit 3장 — 라벨바가 inner 밖이라 카드가 두 조각으로 갈렸다
→ 카드 내용을 .fs-p-80-merit__inner 로 묶어 통째로 기울게 했다(아래 E).
· .fs-p-80-dz 11장 · .fs-p-80-prob 3장 — 라벨바는 inner 안에 있었지만
«흰 면과 1px 틸 테두리» 는 li 에 있어 정지해 있었다. 4° 에서 틸 라벨바만
평행사변형이 되어 카드 왼쪽·아래 테두리 밖으로 2.2~4.8px 삐져나온다
(43 에서 기록된 것과 같은 파손, 다크 밴드 위에서 특히 티난다).
→ 카드 내용을 __inner 로 묶고 흰 면·테두리를 그리로 옮겼다.
이제 [data-fs-tilt] 호스트 18개의 inner 커버율이 전부 1.00 이다
(확정 시안 57·91 실측값과 같다).
========================================================================== */
.fs-p-80 .fs-p-80-flap .fs-doctor__frame,
.fs-p-80 .fs-p-80-methods .fs-doctor__frame { overflow: hidden; }
.fs-p-80 .fs-p-80-flap .fs-doctor__frame img,
.fs-p-80 .fs-p-80-methods .fs-doctor__frame img {
transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
.fs-p-80 .fs-p-80-flap:hover .fs-doctor__frame img,
.fs-p-80 .fs-p-80-methods figure:hover .fs-doctor__frame img { transform: scale(1.045); }
/* 라벨바는 사진과 같이 커지면 글자가 흔들린다 — 색만 한 단계 */
.fs-p-80 .fs-p-80-flap:hover > .fs-labelbar {
background: var(--fs-teal-dk);
transition: background var(--fs-dur) var(--fs-ease);
}
}
/* ==========================================================================
E. 앞트임 복원 장점 카드 — 흰 면과 테두리를 틸트 대상으로 옮긴다
면이 같이 기울어야 «카드가 기운다» 로 읽힌다(57 의 .fs-card 실측 커버율 1.00).
========================================================================== */
/* li 는 이제 래퍼 한 칸만 담는다 — 3행 격자를 그대로 두면 래퍼가 첫 행(auto) 높이에
머물러 «내용이 짧은 카드만 30px 짧은» 들쭉날쭉한 아랫변이 된다(실측 278 vs 308). */
.fs-p-80 .fs-p-80-merit {
grid-template-rows: minmax(0, 1fr);
background: transparent; border: 0;
}
.fs-p-80 .fs-p-80-merit__inner {
display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%;
background: var(--fs-white); border: 1px solid var(--fs-teal);
}
/* ==========================================================================
F. (V70 D 축 반전 — 2026-09-17 승인자 A안으로 두 술식이 카드 2장 나란히가 되면서 걷어냈다)
========================================================================== */
/* ==========================================================================
G. 마이크로 — 섹션 제목 뒤 70px 틸 선 (48 에서 검증)
★ 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다.
→ 기본을 「그어진 상태」로, .fs-reveal:not(.is-in) 에만 초기 은닉.
★ base 에 ID 선택자를 쓰지 않는다 — 쓰면 은닉이 명시도에서 져 굳는다.
========================================================================== */
.fs-p-80 :is(.fs-nose-head, .fs-nose-dz__text, .fs-nose-ba__head) h2,
.fs-p-80 .fs-p-80-hard-title { position: relative; }
.fs-p-80 :is(.fs-nose-head, .fs-nose-dz__text, .fs-nose-ba__head) h2::after,
.fs-p-80 .fs-p-80-hard-title::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;
}
/* 가운데정렬 제목은 선도 가운데에서 자란다 */
.fs-p-80 :is(.fs-nose-ba__head) h2::after,
.fs-p-80 .fs-p-80-hard-title::after { margin-inline: auto; transform-origin: center; }
:root.fs-js .fs-p-80 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-80 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }
/* ==========================================================================
H. 태블릿 — 3장 격자가 600~1023 에서 2+1 고아 줄이 된다
fs.css:334 가 .fs-grid--3 을 600 부터 2열로 잡는다. 「어려운 이유」 3장과
「복원 장점」 3장은 나란히 읽혀야 하는 3항목이라 768 부터 3열로 되돌린다.
(768 에서 열 폭 236px — 같은 폭에서 .fs-p-80-probs 가 이미 3열이다)
========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
.fs-p-80 .fs-p-80-merits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ==========================================================================
I. reduced-motion — 선은 그어진 채로 고정, 확대·감광은 끈다
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.fs-p-80 :is(.fs-nose-head, .fs-nose-dz__text, .fs-nose-ba__head) h2::after,
.fs-p-80 .fs-p-80-hard-title::after { transform: scaleX(1) !important; transition: none !important; }
.fs-p-80 .fs-p-80-flap .fs-doctor__frame img,
.fs-p-80 .fs-p-80-methods .fs-doctor__frame img { transition: none !important; transform: none !important; }
}
/* --- <1024px · 모델 히어로 스택 -------------------------------------------
히어로 박스가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
카피를 에스프레소 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다. */
@media (max-width: 1023px) {
.fs-p-80 .fs-p-80-hero { min-height: 0; background: #17120E; }
.fs-p-80 .fs-p-80-hero .fs-hero__bg {
position: static; inset: auto; z-index: 0; grid-row: 2;
}
.fs-p-80 .fs-p-80-hero .fs-hero__bg img {
height: auto; aspect-ratio: 3 / 4; object-position: 50% 100%;
/* 2026-09-23 모바일 최적화 — 81 과 같게 페이드 96 → 60px, 아래 밴드 여백과 같이 얼굴을 첫 화면으로 */
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px);
mask-image: linear-gradient(180deg, transparent 0, #000 60px);
}
.fs-p-80 .fs-p-80-hero .fs-hero__inner {
grid-row: 1; background: #17120E;
/* 2026-09-23 모바일 최적화 — 81 과 같게 위 40 → 20 · 아래 56 → 30 */
padding-block: calc(var(--fs-header-h) + var(--fs-sp-5)) var(--fs-sp-7);
}
}
/* 2026-09-11 색감 변경(청록→토프)은 fs.css 토큰으로 전 사이트에 적용됐다 — 이 파일에 있던
.fs-p-80 토큰 오버라이드와 「수술 후」 라벨바(#3D302B) 규칙은 fs.css 로 올라가 지웠다.
도해 14장도 원본 SVG 를 직접 토프로 구워 -taupe 사본은 없앴다. */
/* ==========================================================================
▼▼▼ 2026-09-14 · 상단 메뉴바 ↔ 히어로 «그라디에이션 연결» (승인자 지시 2회, 56 스크린샷 · 80·82·150·140)
1차(같은 날 오전): 56 의 크림 안개(.84→.46→0)를 그대로 얹고 헤더를 잉크로 뒤집었다 → 승인자 반려
「상단에 그라디에이션이 안 된 부분이 있고, 그라디에이션이 히어로 메인 색과 안 맞는다」.
· 크림 안개는 다크 히어로 위에서 «회색 바» 로 읽히고(히어로 색과 다른 계열),
· 오른쪽 모델 사진의 밝은 배경 위에서는 안개가 사진 밝기와 같아 «안 깔린 것처럼» 보였다.
2차(이 블록): 안개 색을 히어로의 계열(토프 다크 --fs-teal-dk #6B564E)로 — 어두운 왼쪽에서는 한 단 밝은
갈색 띠로, 밝은 사진 위에서는 갈색으로 눌러 전 폭이 «같은 띠» 로 읽힌다. 헤더 글자는 다시 흰색(로고 white),
09-14 오전의 잉크 뒤집기 규칙은 이 블록으로 대체됐다. 높이는 헤더 2배 · 4단 스톱으로 띠 끝선을 지운다.
대비 실측(글자 뒤 픽셀·글리프 마스크)은 아래 주석.
========================================================================== */
.fs-p-80 .fs-header--overlay::before {
block-size: calc(var(--fs-header-h) * 2);
background: linear-gradient(180deg,
rgba(107,86,78,.92) 0%, rgba(107,86,78,.58) 45%, rgba(107,86,78,.22) 78%, rgba(107,86,78,0) 100%);
}
.fs-p-80 .fs-gnb__link { opacity: 1; }
/* ==========================================================================
▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 재수술 = 웜 그레이 #E3DDD6, 다크 히어로 → 라이트 전환 (승인자 결정 §6-1)
사진: i2i(dropshot /v1/edit)로 «인물 그대로, 배경만 연한 웜 그레이 #E8E3DD» → hero-model-light(-mo).jpg (얼굴·포즈·프레이밍 동일 확인).
헤더: 밝은 변형 다섯 곳 + 원본 로고. 카피: 해시태그 킥커 neon → --fs-teal-dk, 제목 흰 → 잉크. 공용 블록이 안개·후광·바탕을 정한다.
카피 쪽(왼쪽) 가로 스크림 틴트 .92 → 0 @58% (모델 x 61%~). <1024 스택 밴드(#17120E) → 틴트. 09-14 오전의 갈색 안개 블록은 위에 기록으로 남는다.
========================================================================== */
.fs-p-80 .fs-header--overlay { color: var(--fs-ink); }
.fs-p-80 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-80 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-80 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); opacity: 1; }
.fs-p-80 .fs-header--overlay .fs-util__link:hover,
.fs-p-80 .fs-header--overlay .fs-util__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-80 .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-80 .fs-util__sep { opacity: .4; }
.fs-p-80 .fs-p-80-hero { color: var(--fs-ink); }
.fs-p-80 .fs-p-80-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) 28%, rgba(var(--fs-cat), .50) 46%, rgba(var(--fs-cat), 0) 58%);
}
@media (max-width: 1023px) {
.fs-p-80 .fs-p-80-hero .fs-hero__bg::after { content: none; }
.fs-p-80 .fs-p-80-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}
/* ==========================================================================
▼▼▼ 2026-09-17 · 병원 요청 「리뷰티 수정(눈재수술).pptx」 13장 — 구조·문구 1단계
삭제 4섹션(닥터스 Say · 고려할 때 · 다양한 방법 · 회복관리) · 「원인」→「눈재수술이 필요한 경우」(히어로 아래) ·
「닥터스 솔루션」→「Before & After」(그 다음). 새 순서의 밴드: 히어로 → 흰 → 크림 → 다크 → 크림 → 흰 → 연락처.
LOCK 4 (b) 히어로 다음은 흰색이라 81 과 달리 「필요한 경우」가 흰 밴드다.
========================================================================== */
/* --- 필요한 경우 — 81 증상 일러스트 카드(81.css 5절)와 같은 부품 ---------------
≥1024 3열 · 600~1023 2열 · <600 가로 스와이프(그림을 줄이지 않는다). 흰 밴드라 카드 흰 면이 사라지므로
그림 칸은 제 색(크림)을 갖고, 글 칸은 좌우 여백 없이 그림 왼선에 맞춘다. */
.fs-p-80 .fs-p-80-need__cards {
display: grid; gap: var(--fs-sp-4);
grid-auto-flow: column; grid-auto-columns: 80%;
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
margin-inline: calc(var(--fs-gutter) * -1); padding-inline: var(--fs-gutter); scroll-padding-inline: var(--fs-gutter);
}
.fs-p-80 .fs-p-80-need__cards::-webkit-scrollbar { display: none; }
.fs-p-80 .fs-p-80-need__cards > li { scroll-snap-align: start; }
.fs-p-80 .fs-p-80-need__card { display: grid; grid-template-rows: auto 1fr; align-content: start; background: transparent; }
.fs-p-80 .fs-p-80-need__fig { position: relative; margin: 0; overflow: hidden; background: var(--fs-cream); }
.fs-p-80 .fs-p-80-need__fig::before { content: ""; display: block; padding-block-start: 75%; }
.fs-p-80 .fs-p-80-need__fig img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-p-80 .fs-p-80-need__body { display: grid; gap: var(--fs-sp-2); align-content: start; padding-inline: 0; }
.fs-p-80 .fs-p-80-need__case {
justify-self: start; display: inline-flex; align-items: center;
min-height: 26px; padding-inline: 12px;
border: 1px solid var(--fs-teal-dk); border-radius: var(--fs-radius-pill);
font-family: var(--fs-font-en); font-size: var(--fs-t-sm); font-weight: 700; line-height: 1;
color: var(--fs-teal-dk); letter-spacing: 0.02em;
}
.fs-p-80 .fs-p-80-need__card .fs-card__title { word-break: keep-all; }
@media (min-width: 600px) {
.fs-p-80 .fs-p-80-need__cards {
grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0;
}
}
@media (min-width: 1024px) {
.fs-p-80 .fs-p-80-need__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fs-gap-card); }
}
/* --- Before & After — 81 나눠보기/겹쳐보기 카드(81.css 끝 블록)를 눈 컷에 맞춘 것 ---------------
눈 컷은 가로 800x270 이라 나눠보기는 전·후를 «위아래» 2칸으로 쌓고, 겹쳐보기는 한 칸에 겹친다.
2026-09-17 병원 수정본(260917 pptx 1·2) + 승인자 결정 — 처음은 겹쳐보기(HTML checked), 겹쳐보기 1칸 · 나눠보기 2칸으로 카드 높이가 바뀐다,
겹쳐보기 선은 좌우로 끈다. ≥1024 2열 · 그 아래 1열(최대 720px). 스위치는 체크박스 + 형제 결합자, 끌기만 페이지 끝 스크립트. */
.fs-p-80 .fs-p-80-ba__grid {
display: grid; gap: var(--fs-sp-10) var(--fs-gap-card);
grid-template-columns: minmax(0, 1fr);
max-width: 720px; margin-inline: auto;
}
@media (min-width: 1024px) {
.fs-p-80 .fs-p-80-ba__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}
.fs-p-80 .fs-p-80-ba__card { position: relative; display: grid; gap: var(--fs-sp-5); align-content: start; }
.fs-p-80 .fs-p-80-ba__toggle {
position: absolute; inset-block-start: 0; inset-inline-start: 50%;
width: 1px; height: 1px; opacity: 0; margin: 0;
}
.fs-p-80 .fs-p-80-ba__switch {
justify-self: center; display: inline-flex; align-items: center; gap: var(--fs-sp-4);
min-height: 36px; cursor: pointer; user-select: none;
font-size: var(--fs-t-sm); color: var(--fs-muted);
}
.fs-p-80 .fs-p-80-ba__track {
position: relative; flex: 0 0 auto; width: 46px; height: 24px;
border-radius: var(--fs-radius-pill); background: var(--fs-teal);
transition: background-color var(--fs-dur) var(--fs-ease);
}
.fs-p-80 .fs-p-80-ba__track::after {
content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
width: 18px; height: 18px; border-radius: var(--fs-radius-round); background: var(--fs-white);
transition: transform var(--fs-dur) var(--fs-ease);
}
.fs-p-80 .fs-p-80-ba__toggle:not(:checked) + .fs-p-80-ba__switch .fs-p-80-ba__opt--split,
.fs-p-80 .fs-p-80-ba__toggle:checked + .fs-p-80-ba__switch .fs-p-80-ba__opt--over { color: var(--fs-ink); font-weight: 700; }
.fs-p-80 .fs-p-80-ba__toggle:checked + .fs-p-80-ba__switch .fs-p-80-ba__track { background: var(--fs-teal-dk); }
.fs-p-80 .fs-p-80-ba__toggle:checked + .fs-p-80-ba__switch .fs-p-80-ba__track::after { transform: translateX(22px); }
.fs-p-80 .fs-p-80-ba__toggle:focus-visible + .fs-p-80-ba__switch .fs-p-80-ba__track { box-shadow: var(--fs-shadow-focus); }
.fs-p-80 .fs-p-80-ba__fig { margin: 0; display: grid; gap: var(--fs-sp-4); }
/* 무대 높이는 틀(사진)이 정한다 — 나눠보기 2칸, 겹쳐보기 1칸(승인자 「나눠보기는 2칸, 겹쳐보기일때는 1칸」). */
.fs-p-80 .fs-p-80-ba__stage { display: grid; align-items: center; }
.fs-p-80 .fs-p-80-ba__frame {
--ba-pos: 50%;
grid-area: 1 / 1;
position: relative; overflow: hidden;
display: grid; grid-template-columns: minmax(0, 1fr);
}
/* 가로 비율은 스페이서 없이 img 의 width/height 속성이 잡는다(치환 요소라 grid stretch 에 안 눌린다) */
.fs-p-80 .fs-p-80-ba__img { display: block; width: 100%; height: auto; }
.fs-p-80 .fs-p-80-ba__img--after { border-block-start: 2px solid var(--fs-white); }
.fs-p-80 .fs-p-80-ba__tag {
position: absolute; inset-block-start: var(--fs-sp-3); z-index: 3;
padding: 3px 10px; border-radius: var(--fs-radius-pill);
font-family: var(--fs-font-en); font-size: var(--fs-t-xs); font-weight: 600; line-height: 1.4; letter-spacing: .02em;
color: var(--fs-white); background: rgba(17, 17, 17, .55);
pointer-events: none;
}
.fs-p-80 .fs-p-80-ba__tag--before { inset-inline-start: var(--fs-sp-3); }
/* 나눠보기: 「After」 는 아래 장의 왼쪽 위 (위 장 높이 = 틀의 절반 − 경계 1px) */
.fs-p-80 .fs-p-80-ba__tag--after { inset-inline-start: var(--fs-sp-3); inset-block-start: calc(50% + 1px + var(--fs-sp-3)); }
.fs-p-80 .fs-p-80-ba__handle,
.fs-p-80 .fs-p-80-ba__range { display: none; }
/* 겹쳐보기 — 두 장을 한 칸에 겹치고 세로선으로 가른다(선 왼쪽 = 전 · 오른쪽 = 후)
2026-09-17 오후 위아래 가로선으로 바꿨다가, 병원 수정본(260917 pptx 2) 「위아래보다 가로로 왼쪽 오른쪽으로」로 좌우로 되돌렸다.
끌기는 페이지 끝 스크립트가 포인터로 받는다. 틀이 touch-action: pan-y 라 휴대폰에서 사진 위 세로 스크롤은 페이지가 받는다.
range 는 opacity 0 · pointer-events none 으로 남겨 키보드(←→)와 스크린리더용으로만 쓴다. */
.fs-p-80 .fs-p-80-ba__toggle:checked ~ .fs-p-80-ba__fig .fs-p-80-ba__frame { cursor: ew-resize; touch-action: pan-y; }
.fs-p-80 .fs-p-80-ba__toggle:checked ~ .fs-p-80-ba__fig .fs-p-80-ba__img { grid-area: 1 / 1; border-block-start: 0; -webkit-user-drag: none; user-select: none; }
.fs-p-80 .fs-p-80-ba__toggle:checked ~ .fs-p-80-ba__fig .fs-p-80-ba__img--after { clip-path: inset(0 0 0 var(--ba-pos)); }
.fs-p-80 .fs-p-80-ba__toggle:checked ~ .fs-p-80-ba__fig .fs-p-80-ba__tag--after { inset-block-start: var(--fs-sp-3); inset-inline-start: auto; inset-inline-end: var(--fs-sp-3); }
.fs-p-80 .fs-p-80-ba__toggle:checked ~ .fs-p-80-ba__fig .fs-p-80-ba__handle {
display: block; position: absolute; inset-block: 0; inset-inline-start: var(--ba-pos); z-index: 2;
width: 48px; margin-inline-start: -24px; pointer-events: none;
}
.fs-p-80 .fs-p-80-ba__handle::before {
content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%;
width: 2px; margin-inline-start: -1px; background: var(--fs-white);
}
.fs-p-80 .fs-p-80-ba__handle::after {
position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
width: 40px; height: 40px; margin: -20px 0 0 -20px;
border-radius: var(--fs-radius-round); background: var(--fs-white);
box-shadow: 0 0 0 1px rgba(17, 17, 17, .12);
content: "\2039\00a0\203A"; display: grid; place-items: center;
font-family: var(--fs-font-en); font-size: 20px; font-weight: 600; line-height: 1; color: var(--fs-teal-dk);
}
.fs-p-80 .fs-p-80-ba__toggle:checked ~ .fs-p-80-ba__fig .fs-p-80-ba__range {
display: block; position: absolute; inset: 0; z-index: 4;
width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none;
-webkit-appearance: none; appearance: none; background: transparent;
}
.fs-p-80 .fs-p-80-ba__range:focus-visible ~ .fs-p-80-ba__handle::after { box-shadow: var(--fs-shadow-focus); }
.fs-p-80 .fs-p-80-ba__cap { text-align: center; font-size: var(--fs-t-body); color: var(--fs-ink-soft); }
/* --- 어려운 이유 — 사진 카드를 지우고 스텝을 가운데에 크게 (pptx 10) -------------
원 248 → 320px(1920), 문구 20 → 24px. 커넥터는 이 파일 3절(≥940 가로)을 그대로 쓴다. */
.fs-p-80 .fs-p-80-hard .fs-p-80-steps { margin-block-start: var(--fs-gap-title); }
.fs-p-80 .fs-p-80-hard .fs-nose-step { width: min(clamp(248px, 188px + 6.8vw, 320px), 100%); gap: var(--fs-sp-5); padding-block-start: 0; align-content: center; }
.fs-p-80 .fs-p-80-hard .fs-nose-step .fs-step__text { font-size: clamp(18px, 16.4px + 0.42vw, 24px); }
.fs-p-80 .fs-p-80-hard .fs-nose-step .fs-pill { min-height: 38px; font-size: clamp(15px, 14.2px + 0.21vw, 18px); }
/* --- 앞트임 복원술 (pptx 6) -----------------------------------------------------
삼각피판: 글자 키우고(줄은 HTML
), 사진 칸을 줄여 옆 글과의 위아래 빈칸을 줄인다.
장점 카드: 라벨바에 설명 문장이 들어가 두 줄까지 접힐 수 있다 — 세 장 높이를 같게 두 줄 높이로 잡는다. */
.fs-p-80 .fs-p-80-flap__head { font-size: clamp(20px, 18.15px + 0.513vw, 28px); } /* 09-17 C안 32 → 28 */
.fs-p-80 .fs-p-80-flap__txt { font-size: clamp(17px, 15.1px + 0.52vw, 23px); line-height: 1.65; word-break: keep-all; }
.fs-p-80 .fs-p-80-merit__bar {
min-height: calc(2 * 1.45em + 2 * var(--fs-sp-3));
padding-block: var(--fs-sp-3); padding-inline: var(--fs-sp-5);
font-size: clamp(15px, 13.9px + 0.29vw, 18px); line-height: 1.45; word-break: keep-all;
}
.fs-p-80 .fs-p-80-merit__inner { grid-template-rows: minmax(0, 1fr) auto; }
.fs-p-80 .fs-p-80-merit__fig { display: grid; place-items: center; padding: var(--fs-sp-6) var(--fs-sp-5); }
.fs-p-80 .fs-p-80-merit__fig img { max-width: 300px; }
/* 사진 칸 418fr:900fr(1920 에서 444px) → 360px. 옆 글(≈210px)과의 위아래 빈칸이 416 → 337px 로 준다.
인라인 --fs-split 은 var() 로 못 이겨서 grid-template-columns 를 직접 준다(81.css 6절과 같은 사정). */
@media (min-width: 1024px) {
.fs-p-80 .fs-p-80-flapsplit { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}
/* 2026-09-17 승인자 C안 「앞트임 복원 장점을 삼각피판 오른쪽 빈자리로」 + 「두 개가 겹쳐 보이지 않게」
스플릿이 3칸(사진 · 삼각피판 글 · 장점)이 됐다. 두 글 덩어리 사이에 구분선을 긋고 제목을 같은 급으로 맞춘다.
사진은 «삼각피판 활용» 과 윗선을 맞춰 그쪽 짝으로 읽히게 한다.
1440 미만은 오른쪽 칸이 좁아 카드 라벨이 세 줄로 접힌다 → 장점을 사진·글 아래 전폭으로 내린다(아래 패널 참조). */
.fs-p-80 .fs-p-80-meritblock {
padding-block-start: var(--fs-sp-9);
border-block-start: 1px solid var(--fs-line-input);
}
.fs-p-80 .fs-p-80-meritblock .fs-p-80-merits { margin-block-start: var(--fs-sp-6); }
@media (min-width: 1024px) {
.fs-p-80 .fs-p-80-flapsplit { grid-template-areas: "fig body" "merit merit"; }
.fs-p-80 .fs-p-80-flap { grid-area: fig; }
.fs-p-80 .fs-p-80-flap__body { grid-area: body; }
.fs-p-80 .fs-p-80-meritblock { grid-area: merit; }
}
/* 2026-09-17 승인자 「애매하게 공백이 크고 정보 분리가 안 된 느낌」 → 비교안 C 연한 1(#FCFAF8) 선택.
「포시즌만의 앞트임 복원 스킬」 소제목 + 스플릿을 크림(#F6F1EC)보다 한 단 연한 패널로 묶는다.
소제목 위 176px 빈칸은 패널 경계가 대신 나누므로 패널 바깥 96(360 에서 56)으로 줄이고 안쪽은 0.
패널 안쪽 폭이 줄어 카드가 좁아진다 → 3칸 배치는 1440 부터(1024~1439 는 장점 전폭). 사진은 9:16 에서 1920 469px. */
.fs-p-80 .fs-p-80-skillpanel {
margin-block-start: clamp(56px, 46.769231px + 2.564103vw, 96px);
padding: clamp(20px, 10.667px + 2.593vw, 48px);
background: #FCFAF8;
}
.fs-p-80 .fs-p-80-skillpanel > .fs-p-80-subhead { margin-block-start: 0; }
/* 1024 미만은 패널 안쪽 여백이 글 칸·카드 칸을 한 번 더 깎는다(768 에서 카드 205px · 라벨 3/3/4 줄) → 좌우를 화면 끝까지 늘린 띠로 */
@media (max-width: 1023px) {
.fs-p-80 .fs-p-80-skillpanel { margin-inline: calc(-1 * var(--fs-gutter)); padding-inline: var(--fs-gutter); }
}
@media (min-width: 1440px) {
.fs-p-80 .fs-p-80-flapsplit {
grid-template-columns: minmax(0, 9fr) minmax(0, 16fr);
grid-template-areas: "fig body" "fig merit";
grid-template-rows: auto minmax(0, 1fr);
align-items: start;
}
.fs-p-80 .fs-p-80-meritblock .fs-p-80-merits { gap: var(--fs-sp-4); }
}
/* 패널 안 카드 폭 226~284 → 18px 라벨이 2·3·3 줄로 갈려 바 높이가 들쭉날쭉했다 → 본문 크기로 한 단 */
@media (min-width: 768px) {
.fs-p-80 .fs-p-80-meritblock .fs-p-80-merit__bar { font-size: var(--fs-t-body); padding-inline: var(--fs-sp-4); }
}
/* 768~849 는 카드 226~246px 라 그래도 한두 장이 세 줄 → 세 장 모두 세 줄 높이로 맞춘다(850 부터 전부 두 줄 실측) */
@media (min-width: 768px) and (max-width: 849px) {
.fs-p-80 .fs-p-80-meritblock .fs-p-80-merit__bar { min-height: calc(3 * 1.45em + 2 * var(--fs-sp-3)); }
}
/* --- 소시지눈 재수술 방법 -----------------------------------------------------------
2026-09-17 승인자 A안 — 좌우 번갈아 배치(사진 380 + 글)는 둘째 줄 가운데가 크게 비었다.
「피부 여유 있음 / 없음」 비교라 크림 카드 2장으로 나란히 둔다(768 미만은 한 장씩 세로).
사진은 16:9 로 위아래 피부만 덜어 낸다(눈썹·눈은 온전, 에셋 재굽기 없음). 단계 글자는 23 → 20 으로 한 단. */
/* 같은 날 승인자 「크림 박스 하나로 넣고 둘 사이에 연한 라인」 — 카드 2장 → 박스 하나. 선은 스킬 패널 구분선과 같은 색,
768 이상은 가운데 세로선 · 미만은 두 술식 사이 가로선. 여백 24 → 44(1920), 선 양옆 간격은 여백과 같게. */
.fs-p-80 .fs-p-80-methods {
--fs-p-80-methods-pad: clamp(24px, 19.384616px + 1.282052vw, 44px);
gap: calc(var(--fs-p-80-methods-pad) * 2);
padding: var(--fs-p-80-methods-pad);
background: var(--fs-cream);
}
@media (min-width: 768px) {
.fs-p-80 .fs-p-80-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fs-p-80 .fs-p-80-method-card {
position: relative;
display: grid; align-content: start; gap: var(--fs-sp-7);
}
.fs-p-80 .fs-p-80-method-card + .fs-p-80-method-card::before {
content: ""; position: absolute;
inset-inline: 0; inset-block-start: calc(var(--fs-p-80-methods-pad) * -1); height: 1px;
background: var(--fs-line-input);
}
@media (min-width: 768px) {
.fs-p-80 .fs-p-80-method-card + .fs-p-80-method-card::before {
inset-inline: calc(var(--fs-p-80-methods-pad) * -1) auto; inset-block: 0; width: 1px; height: auto;
}
}
.fs-p-80 .fs-p-80-method-card > * { min-width: 0; }
.fs-p-80 .fs-p-80-method-card .fs-doctor__frame img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* 1024 미만은 제목이 한 장만 두 줄로 접혀 옆 카드와 단계 목록 시작이 28px 어긋났다(900 실측) → 술식명을 늘 둘째 줄로 */
@media (max-width: 1023px) {
.fs-p-80 .fs-p-80-method .fs-h3 > .fs-teal-dk-fg { display: block; }
}
.fs-p-80 .fs-p-80-method .fs-h3 { font-size: clamp(20px, 18.15px + 0.513vw, 28px); } /* 09-17 C안 30 → 28 (삼각피판 활용과 같은 블록 제목 단계) */
.fs-p-80 .fs-p-80-method .fs-p-80-numlist { gap: var(--fs-sp-4); margin-block-start: var(--fs-sp-6); }
.fs-p-80 .fs-p-80-method .fs-p-80-numlist > li { font-size: clamp(16px, 15.076924px + 0.256411vw, 20px); line-height: 1.55; word-break: keep-all; }
@media (prefers-reduced-motion: reduce) {
.fs-p-80 .fs-p-80-ba__track,
.fs-p-80 .fs-p-80-ba__track::after { transition: none !important; }
}
/* --- 2026-09-17 승인자 「Before & After 위 공간을 코재수술(81)과 같게」 ---------------
81 은 「필요한 경우」·「Before & After」 가 둘 다 .fs-section--tight(여백 0.6배)라 사이 간격이 1920 에서 78+82=160px,
80 은 기본 여백이라 130+136=266px 였다. 그 사이 두 값만 --tight 와 같은 식으로 줄인다(다른 섹션 여백은 그대로). */
.fs-p-80 #need { padding-block-end: calc(var(--fs-sec-pb) * .6); }
.fs-p-80 #before-after { padding-block-start: calc(var(--fs-sec-pt) * .6); }
/* 같은 날 「Before & After 아래 공간도 코재수술과 같게」 — 81 의 B&A 아래 여백(1920 78px)과 같게. 다크 밴드 안쪽 위·아래 여백(130px 대칭)은 그대로 둔다
(81 다크 밴드는 사진이 위에 붙어 비교 대상이 아니고, 제목만 올리면 위 78 · 아래 130 으로 밴드가 위로 쏠린다). */
.fs-p-80 #before-after { padding-block-end: calc(var(--fs-sec-pb) * .6); }
/* --- 2026-09-17 승인자 「사진 기준으로 두 소제목 아래 간격 같게」 ------------------------------
소제목 → 다음 상자 간격은 둘 다 clamp(60…96) 로 같았지만, 「소시지눈 재수술 방법」 은 크림 박스 안쪽 여백(--fs-p-80-methods-pad, 1920 44px)만큼
사진이 더 내려가 140px 였다(앞트임 복원 스킬 96). 박스 여백만큼 위 간격을 빼서 두 사진 모두 소제목에서 같은 거리에서 시작하게 한다. */
.fs-p-80 .fs-p-80-subhead + .fs-p-80-methods {
margin-block-start: calc(clamp(60px, 51.692309px + 2.307693vw, 96px) - var(--fs-p-80-methods-pad));
}
/* --- 2026-09-17 승인자 「어려운 이유 STEP 1·2·3 원 색을 더 자연스럽게 이어지게」 (B안) --------------------------
원래는 01 만 흰 원 + 토프 테두리, 02·03 은 회색 원 + 회색 필이라 «01 만 선택됨» 으로 읽혔다.
세 원을 밝은 크림 → 짙은 베이지로 한 단씩, 필은 토프 계열로 한 단씩 짙게, 연결선은 앞뒤 원 색을 잇는 그라디언트.
필 흰 글자 대비 5.1 · 6.1 · 6.9, 원 안 잉크 글자 16.8 · 14.9 · 13.2. 커넥터 방향은 이 파일 3절(940 부터 가로)을 따른다. */
.fs-p-80 .fs-p-80-hard .fs-step { border: 0; }
.fs-p-80 .fs-p-80-hard .fs-p-80-steps > :nth-child(1) { background: #F6F1EC; }
.fs-p-80 .fs-p-80-hard .fs-p-80-steps > :nth-child(3) { background: #EDE3DA; }
.fs-p-80 .fs-p-80-hard .fs-p-80-steps > :nth-child(5) { background: #E3D5CA; }
.fs-p-80 .fs-p-80-hard .fs-step .fs-pill { color: var(--fs-white); }
.fs-p-80 .fs-p-80-hard .fs-p-80-steps > :nth-child(1) .fs-pill { background: #806A60; }
.fs-p-80 .fs-p-80-hard .fs-p-80-steps > :nth-child(3) .fs-pill { background: #735E55; }
.fs-p-80 .fs-p-80-hard .fs-p-80-steps > :nth-child(5) .fs-pill { background: #6B564E; }
.fs-p-80 .fs-p-80-hard .fs-p-80-steps > :nth-child(2) { background: linear-gradient(180deg, #F6F1EC, #EDE3DA); }
.fs-p-80 .fs-p-80-hard .fs-p-80-steps > :nth-child(4) { background: linear-gradient(180deg, #EDE3DA, #E3D5CA); }
@media (min-width: 940px) {
.fs-p-80 .fs-p-80-hard .fs-p-80-steps > :nth-child(2) { background: linear-gradient(90deg, #F6F1EC, #EDE3DA); }
.fs-p-80 .fs-p-80-hard .fs-p-80-steps > :nth-child(4) { background: linear-gradient(90deg, #EDE3DA, #E3D5CA); }
}
/* ==========================================================================
▼▼▼ 2026-09-23 · 모바일 최적화(승인자 「81 다음 80」) — 1023px 이하만. PC(≥1024) 는 미디어쿼리 밖이라 무변경.
백업 _src/build/backup-80-0923-mo/ · 실측 _design/momeasure.py 360/390/540
========================================================================== */
/* --- 줄바꿈 — 81 과 같은 처방. 리드는
대신 문장 블록(.fs-lead__s), 짧은 글 블록은 balance 로 고아 줄 제거.
360/390/540 실측 고아 줄: need 보조문 「좋습니다.」 · B&A 리드 「제공해드립니다.」「사진입니다.」 · 앞트임 리드 「있습니다.」 ·
삼각피판 글 「메워주면」 · 장점 라벨 「최소화」「메워줌」 · 소시지 원인 라벨 「경우」 · 체크 항목 「경우」 · 절차 「만들어줌」「고정」 · 주소 「8층」 */
.fs-p-80 .fs-lead__s { display: block; text-wrap: balance; } /*
과 같은 줄바꿈 — 전 폭. balance 도 전 폭(2026-09-23 승인자, 81 과 같은 이유) */
@media (max-width: 1023px) {
.fs-p-80 .fs-p-80-sub,
.fs-p-80 .fs-nose-lead,
.fs-p-80 .fs-nose-ba__note,
.fs-p-80 .fs-p-80-merit__bar,
.fs-p-80 .fs-p-80-dz .fs-labelbar,
.fs-p-80 .fs-p-80-checks > li,
.fs-p-80 .fs-p-80-numlist > li > span:last-child,
.fs-p-80 .fs-address { text-wrap: balance; }
}
/* --- 필요한 경우 — 가로 스와이프 진행 바(81 과 같은 부품, 글자 없음). 카드 6장 → 썸 ≈ 카드 1.1장 폭 */
@media (max-width: 599px) {
.fs-p-80 #need > .fs-container { timeline-scope: --p80-need; }
.fs-p-80 .fs-p-80-need__cards { scroll-timeline: --p80-need inline; }
.fs-p-80 #need > .fs-container::after {
content: ""; display: block; height: 2px; margin-block-start: var(--fs-sp-5);
background-color: var(--fs-line-input);
background-image: linear-gradient(var(--fs-teal), var(--fs-teal));
background-repeat: no-repeat;
background-size: calc(100% * 1.1 / 6) 100%;
background-position: 0% 0;
animation: p80-need-bar linear both;
animation-timeline: --p80-need;
}
}
@keyframes p80-need-bar { from { background-position-x: 0%; } to { background-position-x: 100%; } }
/* --- 배치 — 앞트임 문제 카드 3장(각 ≈400px 세로 스택 1,200px)을 <768 «도해 좌 42% · 라벨바 · 체크 우» 행으로(≈650px).
소시지 원인 카드 4장(세로 1,320px)을 <600 2열로(≈540px). 도해 SVG 는 152px 에서도 화살표 표시가 읽힌다(360 실측). PC 무변경. */
@media (max-width: 767px) {
.fs-p-80 .fs-p-80-probs { gap: var(--fs-sp-5); }
.fs-p-80 .fs-p-80-prob__inner {
grid-template-columns: 42% minmax(0, 1fr); grid-template-rows: auto;
align-items: center; column-gap: var(--fs-sp-4);
}
.fs-p-80 .fs-p-80-prob__fig img { max-width: none; }
.fs-p-80 .fs-p-80-prob .fs-p-80-checks { padding: var(--fs-sp-3) var(--fs-sp-3) var(--fs-sp-3) 0; }
}
@media (max-width: 599px) {
.fs-p-80 .fs-p-80-dzgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-sp-4); }
.fs-p-80 .fs-p-80-dz .fs-labelbar { font-size: var(--fs-t-sm); padding-inline: var(--fs-sp-2); }
.fs-p-80 .fs-p-80-dz__inner > .fs-pill { margin-block-start: var(--fs-sp-4); }
}
/* --- 2026-09-23 승인자 「앞트임 복원술 외톨이 줄」(1776 스크린샷: 리드 「두고 있습니다.」 · 보조문 「재건술이라고 볼 수 있습니다.」 · 체크 5항목 「경우」)
이 섹션의 세 글 블록만 PC 에서도 balance — 줄 수는 그대로, 줄 길이만 고르게. 다른 섹션의 PC 줄바꿈은 그대로. */
.fs-p-80 #epicanthal .fs-nose-dz__text .fs-nose-lead,
.fs-p-80 #epicanthal .fs-nose-dz__text .fs-p-80-sub,
.fs-p-80 #epicanthal .fs-p-80-checks > li { text-wrap: balance; }
/* 같은 날 「소시지눈 원인 카드 02 라벨바 «경우»」 — 원인 카드 라벨바도 전 폭 balance (min-height 는 그대로, 2줄이면 2줄) */
.fs-p-80 .fs-p-80-dz .fs-labelbar { text-wrap: balance; }
/* 같은 날 PC 전수 실측(1920·1776·1440·1024)에서 남은 짧은 마지막 줄 — 장점 라벨바 「흉터를 최소화」(1440~1920) ·
필요한 경우 보조문 「좋습니다.」(1024) · 절차 항목 「라인을 낮추어 고정」「위해 지방이동술 진행」(1024) → 같은 balance 를 전 폭으로 */
.fs-p-80 .fs-p-80-merit__bar,
.fs-p-80 .fs-p-80-sub,
.fs-p-80 .fs-p-80-numlist > li > span:last-child { text-wrap: balance; }