/* draft1 시안 전용 — 헤더/메뉴 CSS 는 /ko/nx/header.css 공유본을 쓴다. */
/* 헤더/메뉴 CSS 는 예전에는 여기서 @import 했는데, Chrome 프리로드 스캐너가 CSS 안의
@import 를 미리 못 찾아 header.css 가 직렬로 받아졌다(느린 3G 실측: nx.css 2076→4125ms
가 끝난 뒤에야 header.css 4126→6206ms, FCP 6364ms). 지금은 캔버스 에서 이 파일
바로 앞에 형제 로 받는다 — nx-resync.py 가 넣는다. 순서를 바꾸면 헤더가 죽는다. */
/* 시안 캔버스 */
.nx-stage-wrap{background:#fff}
/* 모바일 시안의 LNB 드롭다운.
시안 캔버스에는 청록 바에 현재 항목과 화살표만 있고 나머지 하위 항목이 없다.
nx.js 가 header.js 의 MENU 에서 형제 항목을 가져와 이 패널을 만들어 붙인다.
패널은 캔버스(#board) 안에 들어가므로 좌표는 캔버스 기준 px 이고 배율은 같이 먹는다. */
.nx-lnb{position:absolute;display:none;z-index:5;background:#fff;
border-bottom:1px solid var(--nx-line);box-shadow:0 10px 20px rgba(0,0,0,.16)}
.nx-lnb.open{display:block}
.nx-lnb a{display:block;padding:13px 20px;text-decoration:none;color:#4a4a4a;
font:500 15px/1.3 var(--nx-font);letter-spacing:-.02em;
border-bottom:1px solid #eef1f2}
.nx-lnb a:last-child{border-bottom:0}
.nx-lnb a:hover,.nx-lnb a:active{color:var(--nx-orange);background:#f6fbfc}
.nx-lnb-bar{cursor:pointer}
.nx-lnb-caret{transition:transform .18s}
/* ── 캔버스보다 창이 넓은 구간 (nx.js 가 .nx-boxed 를 붙인다) ──────────
태블릿(모바일 시안이 확대 상한에 걸리는 ~500px 이상)과 1920 초과 PC 가 여기에 해당한다.
흰 여백 위에 풀와이드 헤더만 떠 있으면 폭이 깨진 것처럼 보이므로,
여백을 페이지 배경으로 칠하고 캔버스를 카드처럼 띄운다. --nx-col 은 캔버스의 실제 표시 폭. */
.nx-boxed .nx-stage-wrap{background:#e9edef}
.nx-boxed #board{box-shadow:0 0 30px rgba(0,0,0,.10)}
/* 경계(header.js BREAK) 아래에서는 헤더가 로고+전화+햄버거만 남는다. 그 내용을 캔버스
컬럼에 맞춰 로고 왼쪽 끝과 본문 왼쪽 끝이 같은 선에 오게 한다. 경계 위(PC 시안)는
헤더 내부폭 1440 과 캔버스 좌우 마진 240 이 이미 같은 지점에서 맞으므로 건드리지 않는다. */
@media (max-width:1279px){
/* 좌우 padding 을 캔버스 좌우 마진(360 중 20px)과 같은 비율로 잡으면
배율이 얼마든 로고 왼쪽 끝과 본문 왼쪽 끝이 정확히 같은 선에 온다. 360/20 = 18. */
.nx-brand .nx-in{max-width:var(--nx-col,100%);padding:0 calc(var(--nx-col,360px)/18)}
}
/* ── 갤러리 가로 스트립 (nx.js 가 시안의 줄을 감싸 만든다) ──────────
시안은 한 줄에 몇 칸만 보이게 그려져 있고 나머지 칸은 그 줄에 이어 붙어 있다.
보이는 폭만큼만 잘라 두고 끌어서 넘긴다. touch-action:pan-y 라야 세로 스크롤이 살아남는다. */
.nx-strip{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.nx-strip.drag{cursor:grabbing}
/* 잡는 영역이 화살표를 덮으므로 버튼을 위로 올린다 */
.nx-strip-btn{cursor:pointer;z-index:6}
/* ── 내보내기 폭 보정 ────────────────────────────────────────
Figma 가 준 텍스트 박스 폭이 실제 렌더 폭보다 2~9px 좁게 나오는 자리가 있다.
pre-wrap 이라 그 몇 px 때문에 줄이 접히는데 박스 높이는 한 줄치여서 아랫줄을 덮는다.
캔버스 HTML 은 주기적으로 다시 내보내져 직접 고쳐도 지워지므로 여기서 잡는다.
인라인 style 을 이겨야 하니 !important 가 필요하고, 같은 이름이 다른 페이지에서
다른 크기로 쓰이므로 원래 폭을 [style*=] 로 함께 지정해 그 자리만 고른다.
실측(렌더 폭 / 박스 폭):
넥스트성형외과 고객센터 230 / 227
필러란 주름이나… 428·425 / 419 (두 줄 각각)
종아리 보톡스는… 347 / 345 (셋째 줄)
FULL HD급 화질로… 283 / 280 (모바일만) */
.board .n.t[data-name="넥스트성형외과 고객센터"][style*="width:227px"]{
width:244px !important}
.board .n.t[data-name^="필러란 주름이나"][style*="width:419px"]{
left:75px !important;width:452px !important}
.board .n.t[data-name^="종아리 보톡스는"][style*="width:345px"]{
left:-10px !important;width:365px !important}
/* 이 문장만 모바일 내보내기에서 280px 에 맞추려고 줄바꿈이 박혀 나온다. PC 판(300px)은
한 줄이다. 폭을 PC 와 같이 주고 자동 줄바꿈으로 돌리면 박힌 줄바꿈이 공백이 된다. */
.board .n.t[data-name^="FULL HD급 화질로"][style*="width:280px"]{
left:-10px !important;width:300px !important;white-space:normal !important}
/* ── 캐러셀 (nx.js 가 트랙을 찾아 .nx-car 를 붙인다) ─────────────
스크롤바는 시안에 없는 요소라 감추고, 진행바가 대신 위치를 보여준다.
끄는 동안에는 스냅을 꺼야 손가락/마우스를 따라 부드럽게 움직인다. */
.nx-car{scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch}
.nx-car::-webkit-scrollbar{width:0;height:0;display:none}
.nx-car.nx-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.nx-car.nx-drag *{user-select:none}
/* 캔버스 컨트롤의 키보드 포커스 표시.
캔버스에는 포커스 스타일이 없어 키보드 사용자가 지금 어디에 있는지 알 수 없다.
:focus-visible 이라 마우스 클릭으로는 나타나지 않는다 = 평상시 시각 변화 없음. */
.board [tabindex="0"]:focus-visible,
.nx-lnb-bar:focus-visible,
.nx-lnb-caret:focus-visible{
outline:2px solid var(--nx-orange);outline-offset:2px;border-radius:2px}
/* ── 모션 ────────────────────────────────────────────────────
시안은 Figma 고정 캔버스라 요소를 재배치할 수 없다. 그래서 레이아웃을 건드리지 않는
transform/opacity 만 쓴다. 애니메이션이 끝난 상태 = 원래 시안과 픽셀 동일이 원칙이다.
초기 상태(숨김)를 CSS 에 직접 두지 않는다 — JS 가 죽으면 본문이 영영 안 보이기 때문이다.
nx.js 가 요소마다 .nx-rv 를 붙여 숨기고, 화면에 들어오면 .nx-on 을 더해 되돌린다.
거기에 더해 nx.js 가 4초 뒤 무조건 전부 해제하는 안전장치를 건다. */
.nx-rv{opacity:0;transform:translate3d(0,var(--nx-rise,26px),0) scale(var(--nx-zoom,.985));
will-change:opacity,transform}
.nx-rv.nx-on{opacity:1;transform:none;
transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--nx-d,0s),
transform .62s cubic-bezier(.22,.61,.36,1) var(--nx-d,0s)}
/* 다 끝나면 합성 레이어를 반납한다 */
.nx-rv.nx-done{will-change:auto;transition:none}
/* 3D 틸트 — 마우스가 있는 기기에서 카드가 포인터를 따라 살짝 기운다.
회전만 하고 자리·크기는 그대로라 레이아웃에 영향이 없다. */
/* 평상시에는 아무 승격도 걸지 않는다. transform-style:preserve-3d 나 will-change 를
상시로 두면 카드가 영구 합성 레이어가 되어 글자의 서브픽셀 안티앨리어싱이 사라지고
본문이 미세하게 뭉개진다(filler 에서 0.49% 픽셀 차이로 잡혔다).
회전은 transform 함수 안의 perspective() 만으로 충분하다. */
.nx-tilt{transition:transform .18s ease-out}
.nx-tilt.nx-tilting{transition:transform .06s linear;will-change:transform}
/* 깊이 단서 — 회전만으로는 평평한 카드가 3D 로 안 읽힌다(실측 최대 ±3°였을 때 화면상
구분이 거의 불가능했다). 그림자는 부모가 아니라 '면'(.nx-face) 에 건다. 부모는 투명한
경계상자여서 사각 그림자가 나오기 때문이다. box-shadow 가 아니라 filter 를 쓰는 이유는
면의 둥근 모서리를 그대로 따라가기 때문이고, 면 자식들의 위치는 바뀌지 않음을 6개 보드
54개 카드에서 확인했다(이동 0px — 면이 전부 position 지정 요소라 포함블록이 안 바뀐다).
시안에 이미 그림자가 있는 면에는 .nx-face 를 붙이지 않는다. 쉬는 상태는 시안 그대로다. */
.nx-face{transition:filter .22s ease-out}
.nx-tilt.nx-tilting .nx-face{filter:drop-shadow(0 12px 20px rgba(0,0,0,.20))}
/* 히어로 첫 화면 문구는 스크롤 없이도 순서대로 들어온다 */
.nx-hero{opacity:0;transform:translate3d(0,18px,0)}
.nx-hero.nx-on{opacity:1;transform:none;
transition:opacity .8s cubic-bezier(.22,.61,.36,1) var(--nx-d,0s),
transform .8s cubic-bezier(.22,.61,.36,1) var(--nx-d,0s)}
@media (prefers-reduced-motion: reduce){
.nx-rv,.nx-hero{opacity:1 !important;transform:none !important;transition:none !important}
.nx-tilt{transform:none !important;transition:none !important}
.nx-face{filter:none !important;transition:none !important}
}
/* ── 첫 페인트 자리 확보 (CLS 0.135 제거) ────────────────────
header.js 가 .stage 앞에 를 끼워 넣는 순간 .stage 가 헤더 높이만큼
아래로 밀리면서 레이아웃 이동이 생긴다(실측 CLS 0.1347, source = div.stage).
헤더가 들어오기 전까지 그 높이를 미리 비워 둔다. 헤더가 삽입되면 .stage 가 첫 자식이
아니게 되어 이 규칙이 스스로 꺼지고, 같은 프레임에 헤더가 정확히 같은 높이를 채운다.
높이는 header.css 의 40+100+54=194 / 경계 아래 60 과 맞춘다. */
body:has(> .stage:first-child){padding-top:194px}
@media (max-width:1279px){
body:has(> .stage:first-child){padding-top:60px}
}
/* ── 헤더 컬럼을 캔버스 본문 컬럼에 맞춘다 ────────────────────
캔버스 본문은 1920 캔버스의 left:240 ~ 1680 박스다. 헤더는 max-width:1440 + padding:24 라
화면이 좁아질수록 어긋난다 — 실측 1440 에서 좌 156px, 1366 에서 147px, 1280 에서 136px.
1920 에서도 24px 어긋나 있었다.
--nx-col 은 nx.js 가 넣는 캔버스 실제 표시 폭이고, 본문 컬럼은 그 중 1440/1920 = 0.75 다.
max(...,960px) 는 ?m=1 로 모바일 캔버스(--nx-col=432)를 넓은 창에 강제로 띄운 디버그
상황에서 헤더가 324px 로 찌그러지는 것을 막는 하한이다. PC 판은 w>=1280 이라
col*0.75>=960 이므로 이 하한이 걸리는 일이 없다(27개 폭 실측 확인). */
@media (min-width:1280px){
.nx .nx-in{max-width:max(calc(var(--nx-col, 1920px) * 0.75), 960px);padding:0}
}
/* ── 화면 밖 사진 지연 로드 ──────────────────────────────────
첫 로드에 화면 밖 사진까지 전부 내려받아 LCP 와 웹폰트가 5~14초 뒤로 밀렸다
(index 2,497KB / 이미지 44건 1,894KB, filler 3,512KB / 33건 2,920KB).
억제는 캔버스 의 스크립트가 붙인 html.nx-lazy 가 있을 때만 걸린다.
스크립트가 막히거나 실패하면 클래스가 없고 → 억제도 없고 → 사진은 그냥 전부 로드된다.
안전한 방향으로 고장 나는 구조다(기본으로 숨겨 두면 JS 가 죽을 때 사진이 영영 안 나온다).
되살릴 때 nx.js 는 인라인에 !important 로 다시 써 넣는다 — 인라인 !important 가
스타일시트 !important 를 이긴다. 로고처럼 mask-image 로 오려내는 블록은 제외한다. */
html.nx-lazy #board .n[style*="url("]:not([style*="mask-image"]){
background-image:none !important}
/* ── 히어로: 사진을 원본 그대로 보여 준다 ────────────────────
시안은 히어로 사진 위에 검정 40~60% 를 통째로 덮어 흰 제목을 읽히게 했다. 그러면
사진이 회색으로 죽는다. 덮개를 걷고, 대신 제목 글자에만 그림자를 줘서 읽히게 한다.
사진 픽셀은 하나도 안 바뀌고 글자만 또렷해진다. */
/* 덮개를 전면 단색에서 "글자 있는 왼쪽만" 그라데이션으로 바꾼다.
실측(breast 히어로, 흰 제목 뒤 배경 평균 밝기 기준 대비):
그림자만 1.52:1 ← 큰 글자 최소 3:1 에도 한참 못 미친다
그림자 강하게 1.56:1 ← 그림자는 테두리만 또렷하게 할 뿐 대비를 못 올린다
왼쪽 그라데이션 4.42:1 ← 통과
72% 지점부터는 완전 투명이라 인물과 바다 오른쪽은 원본 그대로 보인다. */
.nx-hero-clear{
background-image:linear-gradient(90deg,
rgba(0,0,0,.55) 0%, rgba(0,0,0,.42) 28%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 72%) !important}
.nx-hero-text{text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* 시안이 어둡게 칠한 히어로 제목(19쪽)을 가슴성형 계열과 같은 흰 글자로 맞춘다.
덮개가 왼쪽 그라데이션으로 바뀐 뒤에는 어두운 글자가 그 위에서 읽히지 않는다.
붙이는 판단은 nx.js 의 heroClear() 가 한다 — 칠해진 판 위의 글자(DETAIL VIEW)는 뺀다. */
.nx-hero-lit{color:#fff !important}
/* ── 카드 hover ──────────────────────────────────────────────
흰 면 + 테두리/그림자를 가진 카드에 마우스를 올리면 브랜드 청록(--nx-teal #35b6c7)으로
채운다. 헤더 브랜드 바·LNB 활성 탭과 같은 색이라 페이지 전체 색감과 붙는다.
글자는 흰색으로 뒤집는다. (처음엔 팔레트의 남색 #0d1535 을 썼는데 너무 어두웠다.)
면과 글자는 캔버스가 그린 그대로 두고 hover 일 때만 덮어쓴다 — 평상시 시각 변화 0.
키보드 사용자를 위해 focus-within 에도 같이 건다. */
.nx-card-face{transition:background-image .2s ease, box-shadow .2s ease}
.nx-card-txt{transition:color .2s ease}
.nx-card:hover .nx-card-face,
.nx-card:focus-within .nx-card-face{
background-image:linear-gradient(var(--nx-teal),var(--nx-teal)) !important;
box-shadow:0 10px 28px rgba(53,182,199,.34) !important}
.nx-card:hover .nx-card-txt,
.nx-card:focus-within .nx-card-txt{color:#ffffff !important}
@media (prefers-reduced-motion: reduce){
.nx-card-face,.nx-card-txt{transition:none}
}
/* ── 전후 사진의 비율 ─────────────────────────────────────────
전후 사진은 한 장에 before|after 가 나란히 든 이미지(1400×686 · 2.04:1)이고,
칸은 before/after 를 반쪽씩 나눠 맡는다. 칸 높이에 억지로 맞추면(썸네일 340×194)
사람이 세로로 14% 늘어나 어깨·겨드랑이 선이 뭉개진다 — 부유방처럼 겨드랑이를 보는
시술에서는 그게 바로 보여야 할 부분이다.
폭만 칸의 두 배로 잡고 높이는 비율대로 둔다. left/right 로 각각 반쪽을 고른다.
(큰 사진 .nx-ba-main 은 원래 비율이 맞아 결과가 같고, 앞으로 비율이 달라져도 안 깨진다.) */
#board .nx-ba-main,
#board .nx-ba-half{background-size:200% auto !important;background-position:left center !important}
#board .nx-ba-main[data-name="after"],
#board .nx-ba-half[data-name="after"]{background-position:right center !important}