/* nyw-home-figma.css — 홈 전용. 피그마 시안 41:780「후」(1920×14380) 실측 px 직역. * * ★규칙 — 이 파일의 숫자는 «시안에서 뽑은 값»이고 손으로 고르지 않았다. * 출처 = design-spec raw(GOLzgRPsWzniIj4g6TBl3y · node 41:780 · version 2396906259292299403). * ⛔nyw-root.css 를 고치지 않는다 — 그 파일은 하위 56지면이 함께 쓴다. * 여기는 «홈만» 링크하고, nyw-root.css «뒤»에 실려 같은 특이도에서 뒤가 이긴다. * ⛔헤더(.nyw-hd/.nyw-nav/.nyw-logo)·하단 상담바·우측 퀵바는 이 파일이 건드리지 않는다. * 전 지면 공통 셸이라 홈만 바꾸면 나머지 56지면과 어긋난다. * * ★단위 — 시안은 1920 기준 px 다. nyw-root.css 는 rem(1rem≈9~10px 가변)을 쓰지만 * 시안 대조는 px 로 해야 값이 흔들리지 않는다. 그래서 여기는 px 로 못 박는다. * 768px 미만은 «시안에 모바일 프레임이 없다» — 데스크톱 값을 내리지 않고 * 모바일 히어로 4조(전역 hospital-site-build.md)로 따로 짠다. */ /* ── 캔버스 (시안 좌표를 그대로 쓰는 구간) ───────────────────────────── * ★1280px 이상에서만 켠다 — 좌표는 1920 시안 값이고, 그 아래는 흐름(flow)으로 되돌린다. * 실제 배치 좌표는 nyw-home-figma-nodes.css(기계 생성)가 노드마다 넣는다. * ⛔여기 숫자를 손으로 늘리지 마라 — 늘려야 하면 시안 raw 를 다시 뽑아 생성기를 돌린다. */ @media (min-width: 1280px) { .nyw-fx-canvas { position: relative; } /* 캔버스 안의 배치는 시안이 정한다 — 손 CSS 의 흐름 규칙이 끼어들지 않게 한다 */ .nyw-fx-canvas .nyw-fx-two, .nyw-fx-canvas .nyw-fx-block, .nyw-fx-canvas .nyw-fx-two__l, .nyw-fx-canvas .nyw-fx-two__r { display: block; margin: 0; } .nyw-fx-canvas .nyw-fx-spec, .nyw-fx-canvas .nyw-fx-prog, .nyw-fx-canvas .nyw-fx-hours, .nyw-fx-canvas .nyw-fx-cv, .nyw-fx-canvas .nyw-fx-lic__grid, .nyw-fx-canvas .nyw-fx-stat__grid, .nyw-fx-canvas .nyw-fx-svc__grid, .nyw-fx-canvas .nyw-dr, .nyw-fx-canvas .nyw-info__grid { display: block; margin: 0; border: 0; background: none; } /* ★시안 41:1177 은 회색 판(#e4e4e4) 위에 흰 카드 6장이라 «1px 칸선»이 보인다 — 그건 남긴다 */ .nyw-fx-canvas .nyw-fx-svc__grid { background: #e4e4e4; border: 1px solid #e4e4e4; } .nyw-fx-canvas .nyw-fx-spec__row, .nyw-fx-canvas .nyw-fx-prog li, .nyw-fx-canvas .nyw-fx-hours li, .nyw-fx-canvas .nyw-fx-cv li, .nyw-fx-canvas .nyw-fx-stat__cell { display: block; border: 0; padding: 0; min-height: 0; } /* 시안이 그린 구분선 — 폭·색은 시안 값(41:837 #2a2a2a · 41:1177 #e4e4e4) */ .nyw-fx-canvas .nyw-fx-hours li { border-top: 1px solid #2a2a2a; } .nyw-fx-canvas .nyw-fx-spec__row, .nyw-fx-canvas .nyw-fx-prog li, .nyw-fx-canvas .nyw-fx-cv li { border-top: 1px solid #e4e4e4; } .nyw-fx-canvas .nyw-fx-lic__fig, .nyw-fx-canvas .nyw-fx-sig__fig, .nyw-fx-canvas .nyw-dr__fig { overflow: hidden; } .nyw-fx-canvas .nyw-fx-lic__fig img, .nyw-fx-canvas .nyw-fx-sig__fig img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 전신·상반신 인물사진은 가운데 기준으로 자르면 머리 위쪽이 잘린다 — 위쪽 기준으로 자른다 */ .nyw-fx-canvas .nyw-dr__fig img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } /* 시안은 이 배지를 글자 크기만큼의 텍스트 노드로 잰다(65x15). 캡슐로 그리면 테두리와 좌우 여백이 그 폭 안으로 들어가 글자가 두 줄로 접히고 테두리를 관통한다. 시안이 정한 가로 중앙과 글자 기준선은 지키고 상자만 글자를 감싸게 넓힌다. */ .nyw-fx-canvas .nyw-fx-lic__pill { left: 50%; right: auto; width: auto; max-width: none; height: 34px; transform: translate(-50%, -9.5px); } .nyw-fx-canvas .nyw-fx-svc__item { background: #fff; } /* 8칸 이미지 카드는 시안 좌표가 «3열 6장» 뿐이라 칸에 좌표를 주지 않았다(→ data-fig 없음). 격자 상자(41:1177)만 시안 자리를 쓰고 그 안은 4열 2행 격자로 되돌린다. 1198×630 안에 4열 2행이면 칸이 약 299×314 — 시안 카드(398×314)와 «높이가 같다». */ .nyw-fx-canvas .nyw-fx-svc__grid--8 { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 1px; } /* ⛔칸을 3/2 로 되돌리면 사진 잘림은 사라지지만(28.7~36.6% → 0~11%) 시안이 격자 높이를 630px(칸 313.5px)로 «고정»해 둬서 칸 아래에 116px 빈 회색 자리가 생긴다(2026-09-14 실측). 원본 사진이 전부 가로형(1200×800 계열)이고 시안 칸은 세로형이라 생기는 구조적 충돌이다 — 세로형 사진을 받기 전까지는 빈 자리가 없는 쪽(시안 높이 유지)을 택한다. */ .nyw-fx-canvas .nyw-fx-svc__grid--8 .nyw-fx-svc__item { position: relative; background: #0a0a0a; aspect-ratio: auto; } .nyw-fx-canvas .nyw-fx-stat__grid { border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; } /* Records — 칸 문구()와 집계 기준은 시안 노드가 아니라 우리가 더한 줄이라 노드 파일에 좌표가 없다. 캔버스 모드에서 칸은 절대 배치이고 라벨·수치도 절대라, 문구를 흐름에 두면 칸 «맨 위»로 올라가 라벨·수치와 포개진다. 좌표가 아예 없는 다섯째 칸은 칸이 아니라 표 전체 폭에 깔려 첫 칸 위로 겹쳤다. 자리는 시안이 그 칸에 준 문구 슬롯(20,138)이고, 값은 토큰 한 곳에 모은다. */ .nyw-fx-canvas .nyw-fx-stat__grid { --stat-src-x: 20px; --stat-src-y: 138px; --stat-src-w: 220px; } /* 좌표 노드가 없는 칸은 표를 기준으로 잰다 — 그 칸의 라벨(41:855)이 쓰는 x 와 같다 */ .nyw-fx-canvas .nyw-fx-stat__cell:not([data-fig]) { position: relative; --stat-src-x: 978px; --stat-src-y: 139px; } .nyw-fx-canvas .nyw-fx-stat__src { position: absolute; left: var(--stat-src-x); top: var(--stat-src-y); width: var(--stat-src-w); margin: 0; z-index: 2; } /* 집계 기준 판 — 노드 파일이 이 문단에 시안 좌표(20,138)를 주지만 그건 «문구»의 자리다. 판은 문구 바로 아래에 뜬다. 색·크기도 노드 값을 덮는다(어두운 글자 + 밝은 판). */ .nyw-fx-canvas .nyw-fx-stat__basis { position: absolute; left: 0; top: calc(100% + 9px); width: max-content; max-width: var(--stat-src-w); height: auto; color: #1e1e1e; font-size: 13px; line-height: 1.55; letter-spacing: 0; } /* 히어로 — 시안 41:789 가 (183,404), 히어로 섹션 상단이 y=73 이다 */ .nyw-hero .nyw-fx-hero__inner { padding: 331px 0 0 183px; } .nyw-fx-canvas--hero { width: 0; height: 0; } /* 섹션 여백 — 시안 프레임 높이에서 파생(41:834=640 · 41:1208=1162 · 41:1249=1377) */ .nyw-fx-rec { padding-block: 120px 100px; } .nyw-fx-dr { padding-block: 158px; } .nyw-fx-visit { padding-block: 150px; } /* FAQ — 2026-09-11 대표 지적(문항 정렬이 어긋나 보인다)으로 canvas 절대좌표를 걷어냈다. canvas 안에는 이제 kicker·h2 만 남아 있어 시안 높이(726px)를 강제할 이유가 없고, .nyw-fx-faq__list 는 canvas «밖» 단일 흐름이라 absolute 배치도 걷어낸다. 문항 행 높이·폭 상수만 그대로 둔다(구조와 무관). */ .nyw-fx-faq__list { width: 100%; } /* 시안 41:1286 계열은 행 68~69px 다 — 접힌 상태의 행 높이를 시안 값으로 못 박는다 */ .nyw-fx-faq__list > details:not([open]) { height: 69px; } .nyw-fx-faq__list > details > summary { height: 68px; min-height: 68px; } /* 행·문구 상자에도 노드마다 같은 상수 폭이 박혀 있다(41:1286·41:1287 계열). 같은 사유로 담는 상자를 따르게 한다 — 클래스 선택자라 노드 선언보다 특이도가 높다. */ .nyw-fx-faq__list > details, .nyw-fx-faq__list > details > summary { width: 100%; } } /* ── 공통 타이포 (시안 41:800/41:801/41:802/41:1536 계열) ─────────────── */ .nyw-fx-kicker { font-size: 13px; font-weight: 600; line-height: 15.51px; letter-spacing: 2.077px; color: #707070; margin: 0; } .nyw-dark .nyw-fx-kicker { color: #a8a8a8; } .nyw-fx-h2 { font-size: 71.9px; font-weight: 400; line-height: 73.32px; letter-spacing: -1.438px; color: #0a0a0a; margin: 10px 0 0; } .nyw-dark .nyw-fx-h2 { color: #fff; } .nyw-fx-lead { font-size: 24px; font-weight: 600; line-height: 35.94px; letter-spacing: -0.479px; color: #0a0a0a; margin: 0; } .nyw-dark .nyw-fx-lead { color: #fff; } .nyw-fx-subh { font-size: 20px; font-weight: 600; line-height: 40px; letter-spacing: -0.479px; color: #0a0a0a; margin: 0; } .nyw-dark .nyw-fx-subh { color: #fff; } .nyw-fx-body { font-size: 18px; font-weight: 400; line-height: 33.25px; letter-spacing: 0; color: #0a0a0a; margin: 8px 0 0; } .nyw-dark .nyw-fx-body { color: #d2d2d2; } .nyw-fx-note { font-size: 15px; font-weight: 400; line-height: 27.71px; color: #6b6b6b; margin: 12px 0 0; } .nyw-fx-h4 { font-size: 24px; font-weight: 600; line-height: 33.55px; letter-spacing: -0.719px; color: #0a0a0a; margin: 64px 0 0; } /* ── ① 히어로 (시안 41:782 · 1920×900 · 글자 왼쪽 여백 180px) ────────── */ .nyw-hero .nyw-fx-hero__inner { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; max-width: none; padding: 331px 0 0 180px; box-sizing: border-box; } /* ★2026-09-14 병원 요청(이영은 팀장 12:25) — 보내주신 캡처는 «굵고 자간이 좁은» 타이포다. 구판은 weight 400(가늘다) + 자간 10.9px(벌어짐)이라 캡처와 인상이 정반대였다. */ .nyw-fx-hero__label { font-size: 26px; font-weight: 700; line-height: 31.15px; letter-spacing: 2.4px; color: #fff; margin: 0; } .nyw-fx-hero__title { font-size: min(103.8px, 5.41vw); font-weight: 400; line-height: 1.06; /* ⛔시안 line-height 97.6px 는 font-size 103.8px 보다 «작아» 큰 글자가 줄상자를 넘쳐 위 라벨(DENTAL CLINIC)을 침범했다. 폭도 1920 고정값이라 그보다 좁으면 화면 밖으로 나간다. 1920 에서 5.41vw = 103.9px 로 시안값을 그대로 재현하고, 좁아지면 함께 줄어든다. */ letter-spacing: -3.634px; color: #fff; margin: 10px 0 0; white-space: nowrap; } /* ⛔시안 노드 CSS([data-fig="41:788"] · nyw-home-figma-nodes.css)가 이 파일보다 «나중에» 로드되고 특이도가 같아(0,1,0) font-weight:400 을 이긴다. 캡처의 굵은 타이포를 내려면 특이도를 한 단 올려야 한다(0,2,0). 두 줄이 한 덩이 로고로 읽히게 굵기를 맞춘다. */ /* ⛔`white-space: nowrap` 이라 10vw 로 두면 중간 폭에서 글자가 화면 밖으로 나간다 (1024px 실측 18px 초과). 글자 폭 = font-size × 8.42(실측 862/102.4)이므로 좌여백 180 + 우여백 40 을 뺀 나머지를 그 비율로 나눠 «어느 폭에서도 안 넘치게» 잡는다. 1440px 에서 144.9px 로 지금 값과 같고, 1920px 에서는 상한 192px 이 걸린다. */ /* ⛔⛔2026-09-14 회귀 수정 — 이 두 줄을 미디어쿼리 «밖»에 두었더니 특이도 (0,2,0)이 767 이하 모바일 규칙 (0,1,0)을 이겨서 모바일 제목이 34px 의도인데 18.4px 로 그려졌다 (좌여백 180 전제인 -220px 공식이 좌우 패딩 20px 인 모바일에 그대로 걸렸다). 데스크톱 전용 공식이므로 데스크톱에 가둔다. */ @media (min-width: 768px) { .nyw-hero .nyw-fx-hero__title { font-weight: 800; font-size: min(192px, calc((100vw - 220px) / 8.42)); } /* 라벨도 같은 이유로 특이도를 올린다 — 캡처의 두 줄 크기 비(대략 1:3.7)를 맞춘다. */ .nyw-hero .nyw-fx-hero__label { font-size: min(52px, 2.7vw); } } .nyw-hero .nyw-fx-hero__title { font-weight: 800; } .nyw-fx-hero__sub { font-size: 31.9px; font-weight: 600; line-height: 44.73px; letter-spacing: -0.958px; color: #fff; margin: 30px 0 0; } .nyw-fx-hero__body { font-size: 18px; font-weight: 400; line-height: 32.35px; letter-spacing: 0; color: #d2d2d2; margin: 9px 0 0; } .nyw-fx-hero__cta { display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 44px; margin-top: 36px; box-sizing: border-box; border: 1px solid #fff; background: transparent; color: #fff; font-size: 14px; font-weight: 600; line-height: 16.71px; letter-spacing: -0.14px; text-decoration: none; } .nyw-fx-hero__cta:hover { background: #fff; color: #0a0a0a; } /* 히어로 글자를 위·아래로 갈라 앉힌다 — 가운데 세로 띠를 사진에 비운다. 위 묶음 = 라벨 + 제목 · 아래 묶음 = 부제 + 본문 + 상담 버튼. 가운데는 대표원장 얼굴이 지나가는 자리라 글자를 두지 않는다. 노드 파일이 준 절대 좌표는 히어로 다섯 요소에서만 흐름 배치로 되돌린다 — 히어로 높이가 뷰포트에 따라 달라져서, px 좌표로는 위·아래 기준선이 함께 움직이지 않는다. canvas 를 position:static 으로 바꾸면 다섯 요소의 담는 블록이 히어로 상자 자체가 된다. */ @media (min-width: 769px) { /* 아래 여백 88px 은 하단 고정 상담바(높이 65px)가 뷰포트 바닥에 붙어 히어로 바닥 58~62px 을 덮기 때문이다. 40px 으로 두면 상담 버튼 아래 절반이 그 바에 가린다. */ .nyw-hero .nyw-fx-hero__inner { padding: 56px 48px 88px 180px; } .nyw-hero .nyw-fx-canvas--hero { position: static; width: auto; height: 100%; display: flex; flex-direction: column; align-items: flex-start; } /* 선택자에 캔버스를 한 겹 더 끼운 이유 — 노드 파일에 `.nyw-fx-canvas [data-fig]{margin:0}` 이 있고 그 파일이 이 파일보다 뒤에 실린다. 클래스 두 겹으로는 같은 값에서 뒤가 이겨 아래 margin 이 전부 0 으로 덮인다(그 상태로 재서 배치가 안 움직인 것을 먼저 확인했다). */ .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__label, .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__title, .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__sub, .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__body { position: static; left: auto; top: auto; } /* 버튼 안의 글자 노드(41:798)가 이 상자를 기준으로 앉으므로 relative 는 남긴다 */ .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__cta { position: relative; left: auto; top: auto; } .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__label { margin: 0; } .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__title { margin: 6px 0 0; } /* 여기서 위·아래가 갈린다 — 부제부터가 히어로 바닥에 붙는다 */ .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__sub { margin: auto 0 0; } .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__body { margin: 12px 0 0; } .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__cta { margin: 20px 0 0; } /* 글자 뒤 국소 층도 두 덩이로 갈라 «위 묶음»과 «아래 묶음» 뒤에만 깐다. 가운데와 오른쪽은 알파 0 이라 얼굴이 덮이지 않는다. 타원 두 개로 만드는 이유 — 상자를 top/height 로 자르면 자른 변이 이음선으로 보인다. radial-gradient 는 사방으로 0 까지 빠지므로 자를 변이 없다. 세로 자리를 % 가 아니라 px 로 잡는 이유 — 글자가 위 56px·아래 40px 로 «변에서» 떨어져 앉으므로, 히어로가 낮아져도 두 덩이의 자리는 변에서 같은 px 에 있다. */ .nyw-hero .nyw-fx-hero__inner::before { left: 0; transform: none; width: 100%; top: 0; bottom: 0; height: auto; background: radial-gradient(780px 190px at 600px 122px, rgba(10,10,10,.64) 0%, rgba(10,10,10,.60) 46%, rgba(10,10,10,.44) 70%, rgba(10,10,10,.16) 88%, rgba(10,10,10,0) 100%), radial-gradient(520px 185px at 440px calc(100% - 181px), rgba(10,10,10,.60) 0%, rgba(10,10,10,.56) 46%, rgba(10,10,10,.40) 70%, rgba(10,10,10,.14) 88%, rgba(10,10,10,0) 100%); } } /* ★밝은 프레임이 지나갈 때의 보험 — 스크림 알파만으로는 영상의 «가장 밝은 픽셀»까지 4.5:1 을 보장할 수 없다. 글자 둘레에만 그림자를 둬 그 순간을 넘긴다. ⛔nyw-root.css 의 같은 규칙은 «구판 클래스»(.nyw-hero__title 등)만 걸어서 시안 클래스(.nyw-fx-hero__*)에는 한 번도 닿지 않았다 — 2026-09-09 실측에서 히어로 글자 전부가 text-shadow: none 이었다. */ .nyw-fx-hero__label, .nyw-fx-hero__title, .nyw-fx-hero__sub, .nyw-fx-hero__body, .nyw-fx-hero__cta { text-shadow: 0 1px 3px rgba(0,0,0,.46), 0 2px 16px rgba(0,0,0,.34); } /* ★2026-09-14 실측 — 대제목·라벨이 굵어져 영상의 «흰 벽·유리문·조명»까지 덮는다. 11프레임 전수에서 제목 최악 1.95:1 · 라벨 4.03:1. 사진 전체를 어둡게 하는 대신 그 두 줄에만 그림자를 한 단 더 준다(사진 노출 규칙과 충돌하지 않는다). */ .nyw-hero .nyw-fx-hero__title, .nyw-hero .nyw-fx-hero__label { text-shadow: 0 2px 6px rgba(0,0,0,.60), 0 4px 24px rgba(0,0,0,.48), 0 0 2px rgba(0,0,0,.5); } /* ── ② Credentials (시안 41:800~41:830) ──────────────────────────────── */ .nyw-fx-cred { padding-block: 193px 120px; } .nyw-fx-cred .nyw-fx-lead { margin-top: 20px; } .nyw-fx-lic__grid { display: grid; grid-template-columns: repeat(3, 383px); gap: 25px; margin-top: 61px; align-items: end; } .nyw-fx-lic__fig { position: relative; margin: 0; overflow: hidden; background: #0a0a0a; } /* ★2026-09-14 병원 요청(이영은 팀장 12:25) — 「3개 비율 맞춰주시고」. 시안은 세 카드 높이가 524/581/492 로 달라 나란히 두면 들쭉날쭉했다. 폭 383px 에 원본 이미지 비율(896:1200)을 그대로 적용한 513px 로 통일한다 — 세 장이 같은 비율이 되고 object-fit:cover 로 잘리는 양도 최소가 된다. */ .nyw-fx-lic__fig:nth-child(1), .nyw-fx-lic__fig:nth-child(2), .nyw-fx-lic__fig:nth-child(3) { height: 513px; } /* ⛔높이만 맞추면 정렬이 안 된다 — 1280px+ 에서는 시안 노드 좌표(nyw-home-figma-nodes.css)가 카드마다 다른 top(368/424/390px)을 절대값으로 박는다. 그 좌표도 함께 통일해야 세 장이 실제로 «나란히» 선다. 가장 위 카드 기준(368px)으로 맞춘다. */ @media (min-width: 1280px) { .nyw-fx-canvas .nyw-fx-lic__fig:nth-child(1), .nyw-fx-canvas .nyw-fx-lic__fig:nth-child(2), .nyw-fx-canvas .nyw-fx-lic__fig:nth-child(3) { top: 368px; height: 513px; } /* 카드 안 캡션도 시안이 카드마다 다른 절대 top 을 박는다. 원래 시안은 세 장 모두 «카드 하단에서 같은 거리»(국가명 155 · 국문 102 · 연도 캡슐 56)였으므로, 새 높이 513px 에서 그 거리를 그대로 유지한 값으로 통일한다. */ .nyw-fx-canvas .nyw-fx-lic__en { top: 358px; } .nyw-fx-canvas .nyw-fx-lic__ko { top: 411px; } .nyw-fx-canvas .nyw-fx-lic__pill { top: 457px; } } .nyw-fx-lic__fig img { width: 100%; height: 100%; object-fit: cover; display: block; } .nyw-fx-lic__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.30) 40%, rgba(10,10,10,.62) 74%, rgba(10,10,10,.78) 100%); } .nyw-fx-lic__num { position: absolute; top: 16px; left: 16px; font-size: 14px; font-weight: 400; line-height: 16.71px; letter-spacing: 1.677px; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.7); } .nyw-fx-lic__cap { position: absolute; left: 0; right: 0; bottom: 32px; display: flex; flex-direction: column; align-items: center; text-align: center; } .nyw-fx-lic__en { font-size: 41.9px; font-weight: 400; line-height: 44.45px; letter-spacing: -0.629px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.92), 0 0 6px rgba(0,0,0,.8); } .nyw-fx-lic__ko { font-size: 14.5px; font-weight: 500; line-height: 17.3px; letter-spacing: -0.145px; color: #fff; margin-top: 9px; text-shadow: 0 1px 12px rgba(0,0,0,.92), 0 0 4px rgba(0,0,0,.8); } .nyw-fx-lic__pill { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 19px; margin-top: 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.85); background: rgba(10,10,10,.42); font-size: 12.5px; font-weight: 400; line-height: 14.92px; letter-spacing: 1.747px; color: #fff; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.8); } /* ── ②-1 면허 카드 뒤집기 (2026-09-09 병원 지시) ─────────────────────── * 시안에 없는 상호작용 축이라 병원 지시로 새로 짠다.
/ 로 * 만든다 — 스크립트 없이 동작하고(프로덕션 CSP nonce 방식에서도 죽지 않는다), * #numbers 섹션의 ⓘ 집계기준 토글과 같은 패턴이다. * ★대표 확정(F-3, 2026-09-09) — 뒷면 실물 이미지는 면허번호·증서번호를 가리지 * 않고 원본 그대로 넣는다. * ⛔⛔뒷면을 «summary 형제»로 두면 «뒷면을 눌러도 안 닫힌다» —
는 * summary 클릭에만 반응한다(2026-09-09 실측 — CDP 로 클릭해 재현했다). * 그래서 앞면·뒷면을 «둘 다 summary 안»에 두고, summary 자신은 inset:0 로 * 펼친 «클릭 영역»으로만 쓴다 — 앞이든 뒤든 항상 같은 자리를 누르면 토글된다. * 회전 애니메이션은 그 안의 .nyw-fx-lic__frontface/.nyw-fx-lic__back 두 레이어에 건다. * ⛔
의 기본 동작은 열리기 전 summary 뒤 내용을 display:none 으로 지운다 * — 그 상태에서 [open] 이 되면 transform 전환이 «건너뛴다»(display:none 에서는 * transition 이 시작점을 못 잡는다). 그래서 두 레이어를 항상 display:block/flex 로 * 두고 transform·backface-visibility 로만 보이고/숨긴다. */ .nyw-fx-lic__fig { perspective: 1800px; } .nyw-fx-lic__fig > summary { list-style: none; cursor: pointer; position: absolute; inset: 0; } .nyw-fx-lic__fig > summary::-webkit-details-marker, .nyw-fx-lic__fig > summary::marker { display: none; content: ''; } .nyw-fx-lic__frontface, .nyw-fx-lic__back { position: absolute; inset: 0; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.4, .15, .2, 1); transform: rotateY(0deg); } .nyw-fx-lic__back { display: block; transform: rotateY(180deg); background: #0a0a0a; } /* ★2026-09-14 병원 요청(이영은 팀장 14:17 「실물면허증이요!」) — 카드를 뒤집으면 나오는 실물 면허증 3장 중 한국 것만 색이 남아 혼자 튀어 보였다(실측 평균채도 한국 5.9 · 미국 4.6 · 몽골 0.0). ⛔원본 파일을 다시 만들지 않는다 — 화면에서만 완전 흑백으로 통일한다. */ .nyw-fx-lic__back img { width: 100%; height: 100%; object-fit: contain; display: block; background: #0a0a0a; filter: grayscale(1); } /* ⛔1280px+ 규칙(위 20행 @media (min-width:1280px) 안 ".nyw-fx-canvas .nyw-fx-lic__fig img") * 이 특이도 (0,2,1)로 이 파일의 ".nyw-fx-lic__back img"(0,1,1)를 이긴다 — 2026-09-09 실측으로 * 뒷면이 «contain»이 아니라 «cover»로 렌더됐다(미국 카드가 다시 잘린다). 같은 특이도로 맞선다. */ .nyw-fx-canvas .nyw-fx-lic__back img { object-fit: contain; } .nyw-fx-lic__fig[open] .nyw-fx-lic__frontface { transform: rotateY(180deg); } .nyw-fx-lic__fig[open] .nyw-fx-lic__back { transform: rotateY(360deg); } /* ★2026-09-11 대표 지적 — 「탭하면 실물 면허증이 보입니다」 문구가 카드 하단에 * «끼워넣은 텍스트»로 어색하다. 문구를 원형 아이콘 배지로 바꾼다 — 뒤집기 화살표 * 아이콘만 보이고, 설명 문구는 시각적으로 숨기되(.sr-only) 스크린리더에는 남긴다. * summary 의 aria-label 에 이미 같은 설명이 있어 접근성은 유지된다. */ .nyw-fx-lic__hint { position: absolute; right: 16px; bottom: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(10,10,10,.42); border: 1px solid rgba(255,255,255,.55); color: #fff; pointer-events: none; } .nyw-fx-lic__hint svg { width: 15px; height: 15px; } .nyw-fx-lic__hint--back { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); } .nyw-fx-lic__hint .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .nyw-fx-lic__fig > summary:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: -3px; } /* 카드를 뒤집었을 때도 세 상자는 앞면과 같은 높이로 둔다 — 가운데 칸만 줄이면 그 칸의 높이가 절반으로 꺼지고 아래가 빈다. 미국은 원본이 «가로»(1400×1018) 지만 object-fit: contain 이 위아래 여백을 두고 전체를 보여주므로 잘리지 않는다. cover 로 채우면 가로 면허증의 좌우가 잘려 나간다. */ /* ── ③ Records (시안 41:834 · 1920×640) ──────────────────────────────── */ .nyw-fx-rec { padding-block: 120px; } .nyw-fx-stat__grid { display: grid; grid-template-columns: repeat(5, 240px); margin-top: 60px; border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; } .nyw-fx-stat__cell { padding: 40px 20px 0; min-height: 192px; box-sizing: border-box; border-left: 1px solid #2a2a2a; } .nyw-fx-stat__cell:first-child { border-left: 0; padding-left: 20px; } .nyw-fx-stat__label { font-size: 14px; font-weight: 600; line-height: 16.71px; letter-spacing: -0.28px; color: #d2d2d2; margin: 0; } .nyw-fx-stat__value { font-size: 49.9px; font-weight: 400; line-height: 49.92px; letter-spacing: -1.498px; color: #fff; margin: 10px 0 0; } .nyw-fx-stat__unit { font-size: 21px; font-weight: 500; line-height: 20.97px; letter-spacing: -0.21px; color: #fff; margin: 0; } /* 칸 문구 + ⓘ 집계 기준 — 스크립트 없이
로만 여닫는다. 프로덕션 CSP 가 nonce 방식이라 인라인 스크립트는 조용히 죽는다. */ .nyw-fx-stat__src { position: relative; margin: 12px 0 0; } .nyw-fx-stat__cap { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 13px; font-weight: 400; line-height: 22.06px; color: #c9c9c9; list-style: none; padding: 4px 0; min-height: 30px; box-sizing: border-box; word-break: keep-all; } .nyw-fx-stat__cap::-webkit-details-marker { display: none; } .nyw-fx-stat__cap::marker { content: ''; } .nyw-fx-stat__i { flex: none; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; color: #9a9a9a; transition: color .15s, background .15s; } .nyw-fx-stat__cap:hover .nyw-fx-stat__i, .nyw-fx-stat__cap:focus-visible .nyw-fx-stat__i { color: #fff; } .nyw-fx-stat__src[open] .nyw-fx-stat__i { background: #f4f4f4; color: #1e1e1e; } .nyw-fx-stat__basis { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: max-content; max-width: 200px; box-sizing: border-box; background: #f4f4f4; color: #1e1e1e; padding: 8px 11px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; word-break: keep-all; } /* 어느 문구에서 열린 판인지 보이게 위쪽에 꼭지를 단다. */ .nyw-fx-stat__basis::before { content: ''; position: absolute; left: 14px; top: -6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #f4f4f4; } .nyw-fx-stat__cell:last-child .nyw-fx-stat__basis { left: auto; right: 0; } .nyw-fx-stat__cell:last-child .nyw-fx-stat__basis::before { left: auto; right: 14px; } /* 닫힌 상태에서 감춘다. */ .nyw-fx-stat__src:not([open]) .nyw-fx-stat__basis { display: none; } .nyw-fx-stat__foot { font-size: 13px; font-weight: 400; line-height: 24.66px; color: #8f8f8f; margin: 32px 0 0; max-width: 716px; } /* ── ④⑤ 두 단 조판 (Signature · Whitening) ──────────────────────────── */ .nyw-fx-two { display: grid; grid-template-columns: 567px 567px; column-gap: 64px; margin-top: 30px; align-items: start; } .nyw-fx-block { margin-top: 32px; } .nyw-fx-sig { padding-block: 206px 120px; } .nyw-fx-whi { padding-block: 120px; background: #f5f5f5; } .nyw-fx-sig__fig { margin: 0 0 32px; width: 567px; height: 423px; overflow: hidden; } .nyw-fx-sig__fig img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 항목 목록 — 시안 41:866 계열(라벨 x=361 · 값 x=521 · 행 62px) */ .nyw-fx-spec { margin: 40px 0 0; } .nyw-fx-spec__row { display: grid; grid-template-columns: 160px 1fr; min-height: 62px; align-items: start; padding-top: 20px; box-sizing: border-box; border-top: 1px solid #e4e4e4; } .nyw-fx-spec__row dt { font-size: 15px; font-weight: 600; line-height: 24.71px; color: #0a0a0a; margin: 0; } .nyw-fx-spec__row dd { font-size: 15px; font-weight: 400; line-height: 24.71px; color: #0a0a0a; margin: 0; } /* 「일상생활 = 당일부터」와 «짝»인 개인차 단서 — 팩트시트 §[1-5] 금지 표기 ⑪. ⛔표 «칸 안»에 넣으면 시안 좌표계의 고정 높이(25px)를 넘쳐 아래 행을 덮는다(실측 148px). 그래서 표 «바로 아래»에 두고, 앞 문장과 같은 시각 범위에서 읽히게 간격을 좁게 잡는다. */ .nyw-fx-spec__note { margin: 14px 0 0; font-size: 13px; font-weight: 400; line-height: 1.75; color: #6b6b6b; } /* 치아미백 프로그램 — 시안 41:957 (행 57px · 3열 992/1108/1204) */ .nyw-fx-prog { list-style: none; margin: 24px 0 0; padding: 0; } .nyw-fx-prog li { display: grid; grid-template-columns: 116px 96px 1fr; min-height: 57px; align-items: center; border-top: 1px solid #e4e4e4; } .nyw-fx-prog .n { font-size: 15px; font-weight: 600; line-height: 17.9px; letter-spacing: -0.3px; } .nyw-fx-prog .c { font-size: 15px; font-weight: 400; line-height: 17.9px; } .nyw-fx-prog .g { font-size: 15px; font-weight: 400; line-height: 23.96px; } .nyw-fx-whi .nyw-fx-note { font-size: 13px; line-height: 23.36px; } /* ── ⑥ 진료 안내 (시안 41:1177 · 1198×630 · 카드 398×314) ───────────── */ .nyw-fx-svc { padding-block: 208px 120px; } .nyw-fx-svc .nyw-fx-body { margin-top: 26px; max-width: 1123px; } .nyw-fx-svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #e4e4e4; border: 1px solid #e4e4e4; margin-top: 55px; } .nyw-fx-svc__item { display: block; background: #fff; padding: 40px 32px; min-height: 314px; box-sizing: border-box; text-decoration: none; } .nyw-fx-svc__item:hover { background: #f5f5f5; } .nyw-fx-svc__no { display: block; font-size: 13px; font-weight: 400; line-height: 15.51px; letter-spacing: 1.558px; color: #707070; } .nyw-fx-svc__name { font-size: 24px; font-weight: 600; line-height: 33.55px; letter-spacing: -0.719px; color: #0a0a0a; margin: 12px 0 0; } .nyw-fx-svc__en { display: block; font-size: 13px; font-weight: 400; line-height: 15.51px; letter-spacing: 1.038px; color: #707070; margin-top: 12px; } .nyw-fx-svc__desc { display: block; font-size: 17.8px; font-weight: 400; line-height: 31.1px; color: #0a0a0a; margin-top: 27px; } /* ── ⑥-b 진료 안내 «8칸 이미지 카드» ──────────────────────────────────── * 이미지가 칸을 꽉 채우고 글자는 아래로 몰린다. * 격자 상자 자체는 시안 41:1177(1198×630) 자리를 그대로 쓰고 그 «안»만 4열 2행이다. * 어두운 띠는 사진 전체를 덮지 않고 글자 줄 쪽에만 깔아 대비를 번다. */ .nyw-fx-svc__grid--8 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; } .nyw-fx-svc__grid--8 .nyw-fx-svc__item { position: relative; overflow: hidden; padding: 0; min-height: 0; aspect-ratio: 3 / 2; background: #0a0a0a; } .nyw-fx-svc__grid--8 .nyw-fx-svc__item:hover { background: #0a0a0a; } /* ⛔포커스 링이 outline-offset:3px 로 칸 «밖»에 그려지는데 gap 이 1px 뿐이라 뒤에 오는 카드가 그 변을 덮어 잘렸다(1440 실측 — 오른쪽 변에 이웃 사진 색이 찍힘). 그리고 링 색이 currentcolor(#0a0a0a)라 어두운 카드 위에서 대비 2.42 로 거의 안 보였다. */ .nyw-fx-svc__grid--8 .nyw-fx-svc__item:focus-visible { position: relative; z-index: 2; outline: 2px solid #fff; outline-offset: -4px; box-shadow: 0 0 0 2px rgba(10,10,10,.9) inset; } /* Tab 으로 도달한 카드가 하단 고정 상담바(65px) 뒤에 가려 캡션이 안 보였다(1440 실측). */ .nyw-fx-svc__grid--8 .nyw-fx-svc__item { scroll-margin-bottom: 90px; scroll-margin-top: 80px; } .nyw-fx-svc__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .nyw-fx-svc__item:hover .nyw-fx-svc__img { transform: scale(1.04); } .nyw-fx-svc__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; background: linear-gradient(to top, rgba(10,10,10,.88) 0%, rgba(10,10,10,.66) 36%, rgba(10,10,10,0) 100%); pointer-events: none; } .nyw-fx-svc__cap { position: absolute; left: 20px; right: 20px; bottom: 18px; } .nyw-fx-svc__grid--8 .nyw-fx-svc__en { color: #e4e4e4; margin: 0; font-size: 12.5px; letter-spacing: 1.2px; line-height: 1.4; } .nyw-fx-svc__grid--8 .nyw-fx-svc__name { color: #fff; margin: 4px 0 0; font-size: 22px; line-height: 1.3; letter-spacing: -0.4px; } @media (prefers-reduced-motion: reduce) { .nyw-fx-svc__img, .nyw-fx-svc__item:hover .nyw-fx-svc__img { transition: none; transform: none; } } /* ── ⑦ 원장 (시안 41:1208 · 배경 #f5f5f5 · 사진 482×686) ────────────── */ .nyw-fx-break { width: 1200px; height: 300px; margin: 0 auto; padding: 0; overflow: hidden; box-sizing: border-box; } .nyw-fx-break img { width: 100%; height: 100%; object-fit: cover; display: block; } .nyw-fx-dr { background: #f5f5f5; padding-block: 158px; } .nyw-fx-dr .nyw-dr { display: grid; grid-template-columns: minmax(0, 482px) minmax(0, 1fr); column-gap: 71px; margin-top: 51px; align-items: start; } .nyw-fx-dr .nyw-dr__fig img { width: 100%; max-width: 482px; height: 686px; object-fit: cover; object-position: top; display: block; } .nyw-fx-cv { list-style: none; margin: 31px 0 0; padding: 0; } .nyw-fx-cv li { display: grid; grid-template-columns: 130px 1fr; align-items: start; column-gap: 24px; padding-block: 15px; border-top: 1px solid #e4e4e4; } .nyw-fx-cv .y, .nyw-fx-cv .d { font-size: 15px; font-weight: 400; line-height: 25.46px; color: #0a0a0a; } /* ── ⑧ 오시는 길 (시안 41:1249 · 1920×1377 · 배경 #0a0a0a) ──────────── */ .nyw-fx-visit { padding-block: 150px; } .nyw-fx-visit .nyw-info__grid { display: grid; grid-template-columns: 567px 567px; column-gap: 64px; margin-top: 30px; align-items: start; } .nyw-fx-lead--visit { line-height: 40px; } /* ★병원 요청(2026-09-16) — 「오시는 길」 글자 크기를 줄인다. #info 로 한정한다 — .nyw-fx-lead·.nyw-fx-body 는 Credentials·원장 섹션도 같이 쓰는 전역 클래스라 여기서 그대로 줄이면 그 두 섹션까지 함께 작아진다. */ #info .nyw-fx-lead--visit { font-size: 21px; line-height: 34px; } #info .nyw-fx-subh { font-size: 18px; line-height: 32px; } #info .nyw-fx-body { font-size: 16px; line-height: 29.6px; } .nyw-fx-hours { list-style: none; margin: 0; padding: 0; } .nyw-fx-hours li { display: flex; justify-content: space-between; align-items: center; min-height: 51px; border-top: 1px solid #2a2a2a; } .nyw-fx-hours .d, .nyw-fx-hours .t { font-size: 15px; font-weight: 400; line-height: 17.9px; color: #fff; } /* 병원 요청(2026-09-16 ⑥) — 오시는 길 글자를 줄인다. 진료시간 표가 본문(16px)보다 커 보이지 않게 한 단 내린다. ⛔#info 한정 — .nyw-fx-hours 는 다른 지면도 쓴다. */ #info .nyw-fx-hours .d, #info .nyw-fx-hours .t { font-size: 14px; line-height: 17px; } .nyw-fx-visit .nyw-fx-stat__foot { text-align: right; margin-top: 14px; } .nyw-fx-map { margin-top: 79px; } .nyw-fx-map iframe { width: 1200px; height: 500px; border: 0; display: block; } /* ── ⑨ FAQ (시안 41:1286 계열 · 행 68px · 1198 폭) ───────────────────── */ .nyw-fx-faq { padding-block: 170px 120px; } .nyw-fx-faq .nyw-faq { margin-top: 0; } .nyw-fx-faq .nyw-faq > details { border-top: 1px solid #e4e4e4; border-bottom: 0; } .nyw-fx-faq .nyw-faq > details:last-child { border-bottom: 1px solid #e4e4e4; } .nyw-fx-faq .nyw-faq > details > summary { min-height: 68px; display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 600; line-height: 20.29px; letter-spacing: -0.339px; color: #0a0a0a; } /* ── 모바일 (768px 미만) ───────────────────────────────────────────── * ⛔시안에 375 프레임이 «없다». 데스크톱 값을 그대로 내리지 않는다 — * 전역 hospital-site-build.md §모바일 히어로 4조 + 레퍼런스 대역표를 따른다. * ①사진이 주인공 ②글자는 작게·아래로 몰기 ③화살표·정지 버튼 0 ④스와이프 * 제목 px 는 16곳 대역(23~60 · 중앙 34)의 중앙 근처, 부제는 중앙 15.5 근처로 잡는다. */ /* ⛔768~1279px(태블릿) 구간 — Records 칸이 5×240px=1200px 고정이라 이 구간에서만 가로로 넘친다(767px 이하는 위 2열 규칙, 1280px+ 는 시안 고정폭 규칙이 각각 있어 그 사이만 비어 있었다). 그 구간만 유동폭으로 줄여 넘침을 막는다. */ @media (min-width: 768px) and (max-width: 1279px) { .nyw-fx-stat__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .nyw-fx-stat__cell { padding-inline: 12px; } /* Records — 병원 요청(2026-09-16): 사각형 박스 안에 수치를 넣는다. 구분선(위 border-top/bottom·border-left) 대신 칸마다 테두리 상자를 준다. */ .nyw-fx-stat__grid { border-top: 0; border-bottom: 0; gap: 12px; } .nyw-fx-stat__cell { border-left: 0; border: 1px solid #2a2a2a; border-radius: 14px; background: rgba(255,255,255,.03); padding: 28px 16px 20px; } /* ⛔기본 규칙(:first-child{border-left:0})이 특이도가 더 높아 첫 칸만 왼쪽 테두리가 빠진다 — 여기서 같은 특이도로 다시 켠다(이 규칙이 파일에서 더 뒤라 이긴다). */ .nyw-fx-stat__cell:first-child { padding-left: 16px; border-left: 1px solid #2a2a2a; } /* ★2026-09-14 실측 — 홈 가로 넘침의 «전량»이 아래 두 격자에서 나온다. 둘 다 미디어쿼리 «밖»에 고정 px 로 박혀 있고 767 이하 되돌림만 있어, 768~1279 구간이 통째로 비어 있었다. 면허 카드 repeat(3, 383px) + gap 25 = 1199px → 컨테이너 728(768) / 966(1024) 오시는 길 567px 567px + gap 64 = 1198px 실측 넘침 768 = 451px · 1024 = 204px · 1280 = 0. ⛔지도 iframe(1200px)·의료진 figure(482px)는 원인이 «아니다» — 조상이 overflow-x:hidden 으로 잘라내 문서 스크롤에 기여하지 않는다. 다만 지도는 잘려 보여서 폭만 따로 맞춘다. */ .nyw-fx-lic__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .nyw-fx-visit .nyw-info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .nyw-fx-map iframe { width: 100%; } /* 같은 구멍 — 지금 홈 DOM 에는 안 쓰이지만 767 이하 되돌림만 있고 이 구간은 비어 있다 */ .nyw-fx-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nyw-fx-sig__fig { width: 100%; } } /* ⛔768~999px(태블릿 좁은 폭) — 원장 섹션 «경력」 li 가 130px 1fr 고정이라 .nyw-dr 텍스트 칸이 175~289px 로 좁아지면 설명 칼럼(1fr)이 21~135px 까지 눌려 긴 문장이 세로로 30줄까지 늘어졌다(2026-09-14 실측 · 768px 30줄·764px). 1000px 이상은 설명 칼럼이 260px 이상으로 확보돼 정상이라 그대로 둔다 — 767 이하와 같은 1단 규칙을 이 구간에만 되돌린다. */ @media (min-width: 768px) and (max-width: 999px) { .nyw-fx-dr .nyw-dr { grid-template-columns: 1fr; row-gap: 32px; } .nyw-fx-dr .nyw-dr__fig img { width: 100%; height: 420px; object-position: top; } } @media (max-width: 767px) { .nyw-fx-h2 { font-size: 34px; line-height: 1.20; letter-spacing: -0.7px; } .nyw-fx-lead { font-size: 19px; line-height: 1.5; } .nyw-fx-body, .nyw-fx-svc__desc { font-size: 15.5px; line-height: 1.75; } .nyw-fx-note { font-size: 13px; line-height: 1.8; } /* 「오시는 길」 — 병원 요청(2026-09-16), 데스크톱과 같은 비율로 살짝 더 줄인다 */ #info .nyw-fx-lead--visit { font-size: 17px; line-height: 1.55; } #info .nyw-fx-subh { font-size: 16px; line-height: 1.5; } #info .nyw-fx-body { font-size: 14px; line-height: 1.7; } #info .nyw-fx-hours .d, #info .nyw-fx-hours .t { font-size: 13px; line-height: 1.5; } .nyw-hero .nyw-fx-hero__inner { padding: 0 20px 40px; display: flex; flex-direction: column; justify-content: flex-end; } /* ★2026-09-14 병원 요청 — 캡처는 두 줄이 «붙어 한 덩이»(로고 표기)다. 구판은 라벨만 화면 상단에 떼어 놓아 캡처와 형태가 달랐다. 대제목 바로 위로 붙인다. 덩이 수는 오히려 줄어든다(2덩이 → 1덩이) — 모바일 히어로 4칸 규칙과 어긋나지 않는다. */ /* ⛔특이도를 (0,2,0)으로 맞춰 둔다 — 미디어쿼리 밖 규칙과 같은 단이라야 «뒤에 온 쪽»이 이긴다 */ .nyw-hero .nyw-fx-hero__label { position: static; top: auto; left: auto; font-size: 13px; letter-spacing: 1.2px; margin: 0 0 2px; } /* 320px 에서도 12px 하한을 넘기도록 clamp 로 잡는다(8.5vw → 375px 에서 31.9px) */ .nyw-hero .nyw-fx-hero__title { font-size: clamp(28px, 8.5vw, 34px); line-height: 1.20; letter-spacing: -1px; margin: 0; white-space: normal; } .nyw-fx-hero__sub { font-size: 15.5px; line-height: 1.5; margin-top: 10px; } .nyw-fx-hero__body { display: none; } /* 덩이 수를 4 이하로 — 사실은 아래 섹션에 그대로 있다 */ .nyw-fx-hero__cta { display: none; } /* 하단 고정 상담바 4칸이 그 자리를 이미 갖는다 */ .nyw-fx-cred, .nyw-fx-sig, .nyw-fx-svc, .nyw-fx-faq { padding-block: 72px; } .nyw-fx-rec, .nyw-fx-whi, .nyw-fx-dr, .nyw-fx-visit { padding-block: 72px; } .nyw-fx-lic__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .nyw-fx-lic__fig:nth-child(1), .nyw-fx-lic__fig:nth-child(2), .nyw-fx-lic__fig:nth-child(3) { height: 240px; } /* ⛔2026-09-14 실측(375px · 배경 픽셀 최악값) — 「KOREA」·「MONGOLIA」·「U.S.A.」 흰 글자가 밝은 회색 일러스트(남산타워·자유의여신상·게르) 위에 겹쳐 대비 1.92~1.96:1 이었다. 카드 높이가 240px 로 줄면서 캡션이 하단 스크림(52%=125px) 위로 삐져나간 것이 원인이다. 모바일에서만 스크림을 높이고 짙게 한다 — 카드가 작아 사진 손실은 크지 않다. */ .nyw-fx-lic__scrim { height: 74%; background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.36) 34%, rgba(10,10,10,.70) 62%, rgba(10,10,10,.86) 100%); } .nyw-fx-lic__en { font-size: 20px; line-height: 1.2; } /* ⛔12px 미만 금지(모바일 하한선 A축) — 시안 값(14.5/12.5)을 줄이더라도 12 아래로 안 간다 */ .nyw-fx-lic__ko { font-size: 12px; line-height: 1.4; word-break: keep-all; } /* ★2026-09-14 라이브 실측 — 모바일 카드는 3열이라 폭이 106px 뿐인데 캡슐이 nowrap 이라 「2010년 발급 · 1년 한시」(134px)가 카드를 27px 넘쳐 화면 밖으로 잘렸다. ⛔글자를 줄이지 않는다(의료법상 정확한 표기다) — 줄바꿈을 허용하고 카드 안에 가둔다. ⛔폰트는 12px 하한을 지킨다(모바일 A축). */ .nyw-fx-lic__pill { height: auto; min-height: 26px; padding: 4px 8px; font-size: 12px; letter-spacing: 0; white-space: normal; max-width: calc(100% - 8px); line-height: 1.35; text-align: center; } /* 뒤집기 아이콘이 우하단이라 좁은 카드에서 캡슐과 «세 장 모두» 겹쳤다(실측). 번호(01·02·03)가 좌상단이므로 비어 있는 우상단으로 옮긴다. */ .nyw-fx-lic__hint { right: 8px; top: 8px; bottom: auto; width: 26px; height: 26px; } .nyw-fx-lic__hint svg { width: 13px; height: 13px; } /* 카드가 240px 로 짧아 캡션이 사진 가운데까지 올라온다 — 사진 전체를 덮는 대신 캡션이 앉는 줄에만 좁은 판을 깔아 흰 글자를 읽히게 한다. */ .nyw-fx-lic__cap { bottom: 0; padding: 30px 6px 12px; background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.56) 12%, rgba(10,10,10,.78) 45%, rgba(10,10,10,.88) 100%); } .nyw-fx-lic__scrim { display: none; } .nyw-fx-stat__grid { grid-template-columns: repeat(2, 1fr); border-top: 0; border-bottom: 0; gap: 10px; } /* Records — 병원 요청(2026-09-16): 사각형 박스 안에 수치를 넣는다. */ .nyw-fx-stat__cell { min-height: 0; padding: 20px 14px; border-left: 0; border: 1px solid #2a2a2a; border-radius: 12px; background: rgba(255,255,255,.03); } /* ⛔기본 규칙의 :first-child{border-left:0} 특이도가 같아 순서로 이긴다 — 다시 켠다. */ .nyw-fx-stat__cell:first-child { padding-left: 14px; border-top: 1px solid #2a2a2a; border-left: 1px solid #2a2a2a; } .nyw-fx-stat__value { font-size: 34px; line-height: 1.1; } /* 좁은 칸에서는 흐름 안에 둔다. 터치 대상 44px. */ .nyw-fx-stat__cap { min-height: 44px; padding: 8px 0; } .nyw-fx-stat__basis { position: static; width: auto; max-width: none; margin: 4px 0 0; box-shadow: none; } /* 흐름 안에 놓이면 가리킬 대상이 없다 */ .nyw-fx-stat__basis::before { display: none; } .nyw-fx-stat__cell:last-child .nyw-fx-stat__basis { right: auto; } .nyw-fx-two, .nyw-fx-visit .nyw-info__grid, .nyw-fx-dr .nyw-dr { grid-template-columns: 1fr; row-gap: 32px; } .nyw-fx-sig__fig { width: 100%; height: 240px; } .nyw-fx-dr .nyw-dr__fig img { width: 100%; height: 420px; object-position: top; } /* ⛔가로 스크롤 방지 — 데스크톱 1200px 고정 폭이 375 에 그대로 내려가면 문서가 1200 이 된다 */ .nyw-fx-break { width: 100%; height: 180px; } .nyw-fx-break img { width: 100%; height: 100%; } .nyw-fx-spec__row { grid-template-columns: 96px 1fr; column-gap: 12px; } .nyw-fx-prog li { grid-template-columns: 84px 56px 1fr; } .nyw-fx-svc__grid { grid-template-columns: 1fr; } .nyw-fx-svc__item { min-height: 0; padding: 28px 20px; } /* 8칸 이미지 카드는 모바일에서 «2열 4행»이다 — 4열은 폭 375 에서 한 칸이 92px 라 사진이 안 보인다 */ .nyw-fx-svc__grid--8 { grid-template-columns: repeat(2, 1fr); } .nyw-fx-svc__grid--8 .nyw-fx-svc__item { padding: 0; } .nyw-fx-svc__cap { left: 12px; right: 12px; bottom: 12px; } /* ★2026-09-14 실측 — 375px 에서 카드가 110.7px 로 짧아 scrim(높이 64%)의 옅은 구간에 캡션이 얹혔다. 영문 라벨 대비가 8칸 전부 1.50~2.08 로 기준 4.5 에 크게 못 미쳤다. ⛔사진 전체를 짙게 덮지 않는다 — 캡션이 앉는 «아래쪽»만 짙게 재배치한다. */ .nyw-fx-svc__scrim { height: 100%; background: linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.78) 42%, rgba(10,10,10,.30) 72%, rgba(10,10,10,0) 100%); } .nyw-fx-svc__grid--8 .nyw-fx-svc__en { font-size: 12px; letter-spacing: .8px; } .nyw-fx-svc__grid--8 .nyw-fx-svc__name { font-size: 17px; } .nyw-fx-map iframe { width: 100%; height: 280px; } .nyw-fx-h4 { font-size: 20px; margin-top: 40px; } } /* ═══════════════════════════════════════════════════════════════════ 2026-09-09 병원 지적 반영 — 히어로 라벨 겹침 · 배경 급단절 ═══════════════════════════════════════════════════════════════════ */ /* ── ① 히어로 「DENTAL CLINIC」이 두 줄로 접혀 대제목을 덮던 것 ────────── 시안 노드 41:789 의 폭 325px 는 «시안 캔버스 1920» 에서 잰 한 줄 폭이다. 1440·375 로 내려오면 자간 10.9px 인 13글자가 그 폭에 못 들어가 두 줄이 되고, 히어로 글자들이 전부 position:absolute 라 서로 밀지 못해 둘째 줄이 그대로 대제목 「NEW YORK YONSEI」 위에 겹쳐 찍혔다(2026-09-09 라이브 실측 — 라벨 y 396.8~427.8 · 대제목 y 423.8 · 화면상 CLINIC 이 대제목에 파묻힘). ⛔글자를 지우지 않는다 — 한 줄로 유지되게 폭을 실제 글자 폭에 맞춘다. */ .nyw-hero .nyw-fx-hero__label { width: max-content; max-width: calc(100% - 40px); height: auto; white-space: nowrap; } /* 시안 캔버스(1920) 보다 좁은 화면에서는 자간·크기를 비율대로 줄여 한 줄 폭을 확보한다. ⛔1440 은 1439 미디어에 «안 걸린다» — 1919 로 잡는다. */ @media (min-width: 768px) and (max-width: 1919px) { /* ★2026-09-14 — 캡처의 두 줄 크기 비(DENTAL CLINIC 폭 ≈ 대제목 폭의 38%)를 맞춘다. 구판 20px 은 13.6% 로 캡처보다 훨씬 작았다. */ .nyw-hero .nyw-fx-hero__label { font-size: min(52px, 3.6vw); letter-spacing: 3px; } } @media (min-width: 1280px) { .nyw-hero .nyw-fx-hero__label { top: -4px; line-height: 1.0; } } /* ── ② 배경이 검정↔흰색으로 «잘리듯» 갈리던 것 → 그라데이션으로 잇는다 ── 대표 지적 「왜 여기 구분선이 있어? 반은 어둡고 반은 하얗고 왜이래?」 2026-09-09 라이브 실측 — 인접 섹션 배경 명도비 18.16:1 인 경계가 두 곳 (어두운 Records → 흰 Whitening · 흰 Doctor → 어두운 Visit), 히어로 아래 경계까지 세 곳이 «칼로 자른 듯» 끊겨 있었다. ★페이드는 «섹션 패딩 안쪽»에서만 일어난다(어두운 섹션 하단 패딩 100px · 흰 섹션 하단 패딩 그 이상) — 글자 위를 덮지 않는다. ⛔background-color 는 그대로 두고 background-image 만 얹는다. */ /* 히어로 → 흰 섹션. 사진이 주인공이므로 페이드 폭을 좁게 잡는다(72px). */ @media (max-width: 767px) { } /* 배경색이 같은 계열끼리 맞닿는 경계는 색으로 끊기지 않는다 — 얇은 선으로 가른다. 명도 차가 큰 경계(흰↔검정)에는 두지 않는다. */ .nyw-fx-whi, .nyw-fx-dr { border-top: 1px solid rgba(10,10,10,.10); } .nyw-fx-svc { border-top: 1px solid rgba(10,10,10,.10); } /* ══ 2026-09-09 구조 개편 ═══════════════════════════════════════════════ * 순서 = 히어로 → 철학 → Records → Credentials → 진료안내 → 비포애프터 → * 원장 → 오시는 길 → FAQ. * 값의 근거는 커밋 메시지에 적었다. */ /* ── 아직 안 채운 자리 — 빈 채로 두면 .nyw-sec 여백만 남아 화면이 비어 보인다 ── */ #philosophy:empty, #before-after:empty { padding-block: 0; min-height: 0; } /* ── ① 히어로 — «병원명 한 덩이 · 왼쪽 하단» ────────────────────────── */ @media (min-width: 769px) { /* 아래 88px = 하단 고정 상담바(86px)가 히어로 바닥을 덮는 만큼 + 여백. ★병원 요청(2026-09-16) — 글자를 조금 더 아래로. 「덩이」는 이 컨테이너의 justify-content:flex-end 로 바닥에 붙으므로, «내리는» 방향은 padding-bottom 을 «줄이는» 것이다(88 → 그보다 작은 값). ⛔이전 판은 clamp(88px, calc(200px - 12.5vh), 96px)를 썼는데 부호가 반대였다 — 실측(뷰포트 900px)해 보니 88px 그대로(변화 0)였고, 낮은 화면에서는 오히려 96px(더 큼)로 «위로» 밀렸다. 방향 자체가 틀린 값이었다. ⛔실측 — 제목 하단↔상담바 여백이 뷰포트 높이 720px 에서 2px·768px 에서 6px· 900px 에서 8.5px 뿐이다. 낮은 화면은 그대로 두고(원본 88px), 여백이 충분히 넉넉한 화면(850px+)에서만 6px 줄인다(900px 기준 여백 8.5→2.5px, 안전 확인). */ .nyw-hero .nyw-fx-hero__inner { padding: 56px 48px 88px 180px; } .nyw-hero .nyw-fx-canvas--hero { justify-content: flex-end; } .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__title { margin: 0; } /* 글자가 «왼쪽 아래 한 덩이»뿐이라 위 덮개를 걷는다 — 영상이 그만큼 더 보인다 */ .nyw-hero .nyw-fx-hero__inner::before { background: radial-gradient(760px 200px at 470px calc(100% - 128px), rgba(10,10,10,.58) 0%, rgba(10,10,10,.54) 46%, rgba(10,10,10,.38) 70%, rgba(10,10,10,.13) 88%, rgba(10,10,10,0) 100%); } } /* 여백이 충분한 화면에서만 6px 내린다. ⛔경계값 주의 — 제목 하단↔하단 상담바 여백은 뷰포트 «높이»에만 비례한다 (gap = 0.08·vh − (헤더+상담바 높이) + 패딩). 경계를 850px 으로 잡았더니 850~868px 구간이 오히려 겹쳤다(849px 은 패딩 88 이라 +4.4 로 통과하는데, 850px 은 패딩 82 가 걸려 −1.5). 900px 으로 올린다 — 900px 에서 +2.5, 899px 이하는 패딩 88 로 되돌아가 +8.4 라 어느 높이에서도 겹치지 않는다. */ @media (min-width: 769px) and (min-height: 900px) { .nyw-hero .nyw-fx-hero__inner { padding-bottom: 82px; } } @media (max-width: 767px) { /* ★병원 요청(2026-09-16) — 글자를 조금 더 아래로. 모바일도 같은 방향으로 내린다. 실측(375×812) — 제목 하단↔하단 상담바 여백이 222px 이라 데스크톱과 달리 여유가 크다. 히어로 바닥까지의 여백 44px 중 12px 만 줄여 32px 로 둔다(사진이 그만큼 더 보인다). */ .nyw-hero .nyw-fx-hero__inner { padding: 0 20px 32px; } .nyw-fx-hero__title { margin: 0; } } /* ── ③ Records — 칸 라벨을 «조금씩» 키운다(대표 지시) ──────────────── * 14px → 17px. 값(49.9px)을 넘지 않고, 시안 높이(16px)를 넘으므로 height 를 푼다. */ .nyw-fx-stat__label, .nyw-fx-canvas .nyw-fx-stat__label { font-size: 17px; line-height: 1.35; height: auto; } @media (max-width: 767px) { .nyw-fx-stat__label { font-size: 16px; } } /* 노드 파일이 라벨마다 «14px 로 잰» 글자 폭(48·77·89px)을 width 로 못 박아 둔다. 글자를 키우면 그 폭 안에 안 들어가 다섯 칸 중 셋이 두 줄로 접혔다. 높이처럼 폭도 푼다 — 칸(240px)에서 시안 좌우 여백(20px)을 뺀 자리를 그대로 준다. */ @media (min-width: 1280px) { .nyw-fx-canvas .nyw-fx-stat__label { width: 200px; } } /* Records — 병원 요청(2026-09-16): 사각형 박스 안에 수치를 넣는다. ⛔칸은 시안 좌표로 절대 배치돼 있어 위치·크기·padding 은 건드리지 않는다 — inset 그림자로만 테두리를 그려 배치에 영향을 주지 않는다. */ @media (min-width: 1280px) { .nyw-fx-canvas .nyw-fx-stat__cell[data-fig] { box-shadow: inset 0 0 0 1px #2a2a2a; border-radius: 14px; background: rgba(255,255,255,.03); } /* 다섯째 칸([data-fig] 없음)은 data-fig 좌표 CSS 가 없어 흐름상 그리드 전체 폭(1198px)을 차지하는 block 이 된다 — 실측(getBoundingClientRect)으로 확인. 그 안의 라벨·값은 이 칸을 position 기준으로 삼아 left:978px 로 절대 배치돼 있었다(978 = 이 칸이 «전체 폭»일 때의 좌표). 칸 자체를 넷째 칸 폭·자리에 맞춰 절대 배치하면 자식 좌표도 칸 안쪽 기준으로 다시 잡아야 한다. */ .nyw-fx-canvas .nyw-fx-stat__cell:not([data-fig]) { position: absolute; left: 960px; top: 0; width: 240px; height: 192px; box-sizing: border-box; box-shadow: inset 0 0 0 1px #2a2a2a; border-radius: 14px; background: rgba(255,255,255,.03); } .nyw-fx-canvas .nyw-fx-stat__cell:not([data-fig]) .nyw-fx-stat__label, .nyw-fx-canvas .nyw-fx-stat__cell:not([data-fig]) .nyw-fx-stat__value, .nyw-fx-canvas .nyw-fx-stat__cell:not([data-fig]) .nyw-fx-stat__src { left: 20px; } /* 값("약 20")이 110px 폭이라 단위(%)를 같은 left:20px 에 두면 겹친다(실측). 값 폭만큼 오른쪽으로 둔다 — 3번째 칸(개국)은 시안 좌표가 이미 있어 대상 밖. */ .nyw-fx-canvas .nyw-fx-stat__cell:not([data-fig]) .nyw-fx-stat__unit { left: 132px; } } /* ── ② Credentials — 375px 카드 하단이 «검은 판»이 되어 일러스트가 안 보였다 ── * 덮개를 옅게·짧게 하고, 글자는 text-shadow 로 읽힌다(위 규칙에 이미 있다). */ @media (max-width: 767px) { .nyw-fx-lic__cap { padding: 22px 6px 10px; background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.24) 22%, rgba(10,10,10,.50) 58%, rgba(10,10,10,.66) 100%); } } /* ── ⑦ 원장 연혁 — 1440px 에서 2줄로 감기는 행이 아래 구분선을 관통했다 ── * 원인 = 노드 CSS 가 li 마다 top/height 54px 을 절대 좌표로 박는다. * 목록 상자는 시안 좌표에 그대로 두고, 그 «안»만 흐름으로 되돌린다. */ @media (min-width: 1280px) { .nyw-fx-dr .nyw-fx-canvas { height: auto; min-height: 846px; } .nyw-fx-canvas .nyw-fx-cv { height: auto; } .nyw-fx-canvas .nyw-fx-cv li { position: static; left: auto; top: auto; width: auto; height: auto; min-height: 54px; display: grid; grid-template-columns: 130px 1fr; column-gap: 24px; padding-block: 13px; box-sizing: border-box; } .nyw-fx-canvas .nyw-fx-cv li > .y, .nyw-fx-canvas .nyw-fx-cv li > .d { position: static; left: auto; top: auto; width: auto; height: auto; } } /* ══ 연혁 타임라인 — 병원 요청(2026-09-16). 시안에 없는 신규 요청 ═══════════ * 히어로(어두운 배경) 다음 순서라 다음 섹션(철학, #fefdfc)과 같은 밝은 배경으로 이어서 * 어두운→밝은 전환을 한 번만 겪게 한다. 애니메이션은 nyw-timeline.js 가 붙인다. */ .nyw-fx-timeline { --nyw-tl-line-w: 120px; padding-block: 88px 64px; background: #fefdfc; text-align: center; } .nyw-fx-timeline__row { display: flex; align-items: center; justify-content: center; gap: 22px; } .nyw-fx-timeline__y { font-size: 40px; font-weight: 700; line-height: 1; color: #0a0a0a; letter-spacing: -0.02em; } .nyw-fx-timeline__y--from { opacity: 0; transform: translateY(8px); transition: opacity 550ms ease, transform 550ms ease; } .nyw-fx-timeline--from-in .nyw-fx-timeline__y--from { opacity: 1; transform: none; } /* 선은 폭을 처음부터 잡아 두고 안에서 왼쪽→오른쪽으로 자란다. * width 를 키우면 flex 행 전체가 넓어져 양옆 연도가 바깥으로 밀린다. */ .nyw-fx-timeline__line { display: inline-block; height: 2px; width: var(--nyw-tl-line-w); background: #0a0a0a; transform: scaleX(0); transform-origin: left center; transition: transform 900ms ease; } .nyw-fx-timeline--in .nyw-fx-timeline__line { transform: scaleX(1); } .nyw-fx-timeline__y--to, .nyw-fx-timeline__cap { opacity: 0; transform: translateY(8px); transition: opacity 700ms ease, transform 700ms ease; } .nyw-fx-timeline--in .nyw-fx-timeline__y--to, .nyw-fx-timeline--in .nyw-fx-timeline__cap { opacity: 1; transform: none; } .nyw-fx-timeline__cap { margin: 18px 0 0; font-size: 18px; color: #4a4a4a; } @media (prefers-reduced-motion: reduce) { .nyw-fx-timeline__y--from, .nyw-fx-timeline__line, .nyw-fx-timeline__y--to, .nyw-fx-timeline__cap { transition: none; } /* 스크립트가 못 돌아도 선이 보이게 둔다 */ .nyw-fx-timeline__line { transform: scaleX(1); } } @media (max-width: 767px) { .nyw-fx-timeline { --nyw-tl-line-w: 56px; padding-block: 56px 44px; } .nyw-fx-timeline__row { gap: 14px; } .nyw-fx-timeline__y { font-size: 26px; } .nyw-fx-timeline__cap { font-size: 15px; } } /* ══ 2026-09-09 진료 철학 · 탭형 비포애프터 ══════════════════════════════ * 값의 출처 = 에디션성형외과(editionps.com) 실측(2026-09-09, 375·1440). * ⛔한 사이트 값을 목표로 베끼지 않는다 — 완성도 «수준»만 참고한다 * (전역 hospital-site-build.md §레이아웃의 정본은 «그 병원의 도너»다). * 철학·비포애프터는 시안(41:780)에 없는 자리라 여기서만 손 CSS 를 쓴다. */ /* ── 진료 철학 ── */ .nyw-fx-phil { padding-block: 120px; background: #fefdfc; } .nyw-phil__in { display: flex; align-items: center; gap: 100px; max-width: 1300px; margin-inline: auto; } .nyw-phil__l { flex: 1 1 50%; } /* ⛔「PHILOSOPHY」 — 위 .nyw-bat 과 같은 색조다. 3.07:1 → 4.95:1. ★아이콘(.nyw-phil__ic svg)은 «장식»이라 그대로 둔다 — 글자가 아니다. */ .nyw-phil__kicker { font-size: 14.4px; font-weight: 600; color: rgb(125,109,99); letter-spacing: .3px; margin-bottom: 14px; } .nyw-phil__h { font-size: 28.08px; font-weight: 700; line-height: 39.31px; letter-spacing: -.3px; color: #0a0a0a; margin: 0; } .nyw-phil__sub { font-size: 15.84px; font-weight: 400; line-height: 25.74px; color: rgb(108,108,108); margin-top: 8px; } .nyw-phil__list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid rgba(10,10,10,.08); } .nyw-phil__item { display: flex; align-items: center; gap: 22px; padding: 24px 0; border-bottom: 1px solid rgba(10,10,10,.08); } .nyw-phil__ic { flex: none; width: 86.4px; height: 86.4px; border-radius: 50%; background: rgb(249,247,244); display: flex; align-items: center; justify-content: center; } .nyw-phil__ic svg { width: 30px; height: 30px; color: rgb(158,143,134); } .nyw-phil__tx { display: flex; flex-direction: column; gap: 6px; } .nyw-phil__no { font-size: 18.72px; font-weight: 700; line-height: 31.82px; color: #0a0a0a; letter-spacing: .5px; } .nyw-phil__en { font-weight: 600; } .nyw-phil__desc { font-size: 15.84px; font-weight: 400; line-height: 23.76px; color: rgba(0,0,0,.6); } .nyw-phil__r { flex: 1 1 50%; } .nyw-phil__r img { width: 580px; max-width: 100%; height: 590.4px; object-fit: cover; object-position: top; border-radius: 6px; } @media (max-width: 767px) { .nyw-fx-phil { padding-block: 48px; } /* ⛔부모의 align-items:center 가 column 전환 뒤에도 남아 텍스트 블록만 콘텐츠 폭으로 줄어 가운데 정렬됐다 — 사진(width:100%)과 좌측선이 8.2px 어긋났다(375 실측). */ .nyw-phil__in { flex-direction: column; gap: 32px; text-align: center; align-items: stretch; } .nyw-phil__kicker { font-size: 13px; text-align: center; margin-bottom: 12px; } .nyw-phil__h { font-size: 20px; line-height: 28px; text-align: center; } .nyw-phil__sub { font-size: 14px; line-height: 22.75px; max-width: 320px; margin-inline: auto; margin-top: 8px; } .nyw-phil__list { margin-top: 24px; text-align: left; } .nyw-phil__item { gap: 16px; padding: 20px 0; } .nyw-phil__ic { width: 64px; height: 64px; } .nyw-phil__ic svg { width: 24px; height: 24px; } .nyw-phil__no { font-size: 17px; line-height: 28.9px; } .nyw-phil__desc { font-size: 13px; line-height: 19.5px; } .nyw-phil__r img { width: 343px; height: 320px; object-position: top; } } /* ── 탭형 비포애프터 ── */ .nyw-fx-ba { padding-block: 56px; } .nyw-bat__sub { max-width: 512px; margin: 8px auto 0; text-align: center; font-size: 14px; color: rgb(108,108,108); } /* ⛔#9d8f86(157,143,134)는 흰 배경에서도 흰 글자로도 «양쪽 다 3.13:1» 이라 어느 쪽으로도 못 쓰는 색이다. 같은 색조를 지키며 한 단 어둡게 잡는다(4.95:1). */ .nyw-bat > .nyw-kicker { text-align: center; font-size: 14px; letter-spacing: 2.8px; text-transform: uppercase; color: rgb(125,109,99); } .nyw-bat > .nyw-lead { text-align: center; } .nyw-bat__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 32px 0 40px; } .nyw-bat__tab { border-radius: 999px; padding: 10px 24px; font-size: 13px; font-weight: 600; min-height: 44px; background: #fff; border: 1px solid rgba(0,0,0,.15); color: #1e1e1e; cursor: pointer; transition: background .18s ease, color .18s ease; } .nyw-bat__tab.is-on { background: #1e1e1e; color: #fff; border-color: #1e1e1e; } .nyw-bat__panel[hidden] { display: none; } .nyw-bat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .nyw-bat__card { border-radius: 24px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.05); overflow: hidden; margin: 0; } /* 전후사진 자산이 아직 없는 시술 — 탭 자리는 남기고 시술 안내로 보낸다. /before-after 지면의 같은 카드와 값을 맞춘다. */ .nyw-bat__card--empty { display: flex; flex-direction: column; text-decoration: none; color: inherit; grid-column: span 3; } .nyw-bat__ph--empty { display: block; aspect-ratio: 3 / 1; background: #f4f2ef; } .nyw-bat__emeta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; } .nyw-bat__emeta b { font-size: 16px; font-weight: 600; color: #0a0a0a; } .nyw-bat__emeta i { font-style: normal; font-size: 13px; color: #6a6a6a; text-align: right; } .nyw-bat__imgs { display: grid; grid-template-columns: 1fr 1fr; } /* ⛔grid item 의 기본 min-height:auto 가 img 의 자연 높이(예: 667px)를 최소값으로 강제해 aspect-ratio 를 무시하게 만든다(2026-09-09 실측 — 폭 171px인데 높이 667px로 렌더됨). min-height:0 로 그 자동 최소 크기를 꺼야 aspect-ratio 가 실제로 먹는다. */ .nyw-bat__imgs img { width: 100%; height: auto; min-height: 0; min-width: 0; aspect-ratio: 3 / 2; object-fit: contain; background: #f5f4f2; transition: opacity .5s ease; } .nyw-bat__labels { display: grid; grid-template-columns: 1fr 1fr; } .nyw-bat__b, .nyw-bat__a { display: block; text-align: center; padding: 8px 0; font-size: 12px; font-weight: 600; border-radius: 999px; margin: 10px; } .nyw-bat__b { background: #fff; color: #1e1e1e; border: 1px solid rgba(0,0,0,.15); } .nyw-bat__a { background: #7d6d63; color: #fff; } /* 흰 글자 대비 3.13 → 4.95 */ /* ★병원 요청(2026-09-16) — 「더 보기」가 이제 /before-after 로 가는 링크다(이전엔 같은 탭 안을 펴는 버튼이었다). width:fit-content 로 폭을 글자에 맞춰야 margin:auto 가 가운데로 모은다. */ .nyw-bat__more { display: block; width: fit-content; margin: 32px auto 0; border-radius: 999px; background: #1e1e1e; color: #fff; padding: 14px 36px; font-size: 14px; font-weight: 600; border: 0; cursor: pointer; min-height: 44px; text-decoration: none; text-align: center; } .nyw-bat__more[hidden] { display: none; } .nyw-bat__notice { margin-top: 24px; font-size: 12.5px; line-height: 1.7; color: rgba(0,0,0,.55); } @media (max-width: 767px) { .nyw-fx-ba { padding-block: 40px; } .nyw-bat > .nyw-kicker { font-size: 12px; } .nyw-bat__sub { font-size: 13px; } .nyw-bat__tabs { gap: 8px; margin: 24px 0 28px; } .nyw-bat__tab { padding: 10px 16px; font-size: 12px; } .nyw-bat__grid { grid-template-columns: 1fr; gap: 16px; } .nyw-bat__card { border-radius: 16px; } .nyw-bat__more { padding: 12px 28px; font-size: 13px; } } /* ── ③ 우측 세로 퀵바가 본문 오른쪽 끝을 덮던 것 ───────────────────── 시안 그리드는 1200px 다(노드 41:1279 left -1 · width 1200 · 최대 오른끝 1205). 그런데 캔버스 폭은 nyw-root.css 의 --nyw-max(128rem) - --nyw-pad×2 = 1080px 라 노드 20개가 캔버스 오른쪽으로 최대 119px 넘쳐 나간다. 그 넘침이 화면 오른쪽에 고정된 세로 퀵바(.nyw-side · 폭 54 + right 16 = 70px 대역)로 들어가 본문 글자를 덮었다(2026-09-10 라이브 실측 — 홈 1280px 21행 최대 54px · 1366px 12행 최대 46px · 1440px 4행 최대 9px · 1280px 는 문서 가로 넘침 25px 도 함께). ★고치는 것은 «캔버스의 왼쪽 위치»다 — 노드는 캔버스 왼쪽 기준 절대 좌표라 캔버스를 왼쪽으로 옮기면 안의 배치는 그대로 둔 채 오른끝만 물러난다. ⛔노드 좌표(nyw-home-figma-nodes.css)는 기계 생성이라 손대지 않는다. ★식 — 캔버스 왼쪽(문서 기준)을 아래 셋으로 잡는다. B 가운데 맞춤 (100% - 1206px) / 2 C 세로바 회피 상한 오른끝 + 12px 여백이 세로바 왼쪽을 넘지 않게 A 왼쪽 최소 여백 8px C 를 지키려다 화면 밖으로 나가지 않게 막는 바닥 캔버스 부모(.nyw-wrap)의 콘텐츠 왼쪽은 이 폭 구간에서 50vw - 540px 이라 C·A 를 뷰포트 폭으로 쓴다(1923px 이상은 B 가 이겨서 rem 변화와 무관하다). */ @media (min-width: 1280px) { .nyw-fx-canvas[data-fig-section]:not(.nyw-fx-canvas--hero) { width: 1206px; margin-left: max(calc(548px - 50vw), min(calc((100% - 1206px) / 2), calc(50vw - 748px))); margin-right: 0; } } /* ⛔히어로 캔버스는 폭 0 으로 접어 둔 자리라(위 「캔버스」 절) 폭을 주면 안 되고, % 도 다른 값으로 풀려 같은 식을 쓰면 아래 섹션과 어긋난다. 1730px 이하에서는 캔버스의 가운데 맞춤 항이 (1080 - 1206) / 2 = -63px 로 고정이므로 그 값을 직접 줘서 «캔버스와 같은 이동량»을 만든다 — 히어로와 본문의 왼쪽 간격이 고치기 전과 똑같이 유지된다(1440px 에서 두 선이 맞는 것도 그대로다). 1731px 이상은 rem 이 커지며 캔버스가 저절로 가운데로 가고 세로바와도 멀어지므로 두지 않는다. */ @media (min-width: 1280px) and (max-width: 1730px) { .nyw-fx-canvas--hero[data-fig-section] { margin-left: max(calc(548px - 50vw), min(-63px, calc(50vw - 748px))); } } /* 1308px 아래에서는 1206 그리드 + 세로바 70px 대역이 화면에 들어가지 않는다. 글자를 줄이거나 캔버스를 축소하는 대신 세로바를 한 단계 좁힌다 (짧은 화면용 46px 축소판이 이미 있고 같은 치수를 쓴다). */ @media (min-width: 1280px) and (max-width: 1307px) { .nyw-fx-canvas[data-fig-section]:not(.nyw-fx-canvas--hero) { margin-left: max(calc(548px - 50vw), min(calc((100% - 1206px) / 2), calc(50vw - 732px))); } .nyw-fx-canvas--hero[data-fig-section] { margin-left: max(calc(548px - 50vw), min(-63px, calc(50vw - 732px))); } } /* ⛔「철학」섹션(2026-09-09 도입 · 시안 밖 · .nyw-fx-canvas 를 안 씀)의 왼쪽 텍스트 칼럼이 위 6개 .nyw-fx-canvas 계열 섹션과 같은 왼쪽 이동을 못 받아 h2 시작선이 63px 어긋났다 (2026-09-14 실측 · 1440px left=180 vs 다른 6개 117). .nyw-phil__in 이 .nyw-wrap 의 직계 자식이라 «100%」가 같은 컨테이닝 블록을 가리켜, 같은 식을 그대로 쓰면 같은 px 로 옮겨간다. ⛔「전후사진」섹션(.nyw-bat > .nyw-lead)은 text-align:center 라 대상에서 뺀다 — 블록 rect.left 는 중앙 정렬의 부산물이지 어긋남이 아니다(닫는말 성격의 섹션이다). */ @media (min-width: 1280px) { .nyw-phil__l { margin-left: max(calc(548px - 50vw), min(calc((100% - 1206px) / 2), calc(50vw - 748px))); } } @media (min-width: 1280px) and (max-width: 1307px) { .nyw-phil__l { margin-left: max(calc(548px - 50vw), min(calc((100% - 1206px) / 2), calc(50vw - 732px))); } } /* ⛔섹션 제목(h2) 크기가 3벌이었다 — 다른 6개 섹션은 .nyw-fx-h2(71.9px)를 쓰는데 「철학」(.nyw-phil__h 28.08px)·「전후사진」(.nyw-bat > .nyw-lead, root.css clamp 21.6px) 두 곳은 각자 다른 값을 썼다(둘 다 실제 h2 태그 — 라벨이 아니라 «제목»이다). 정렬(철학=start·전후사진=center)은 그 섹션의 목적이라 그대로 두고 크기만 맞춘다. */ /* ⛔.nyw-bat > .nyw-lead 는 HTML 에 `style="font-size:2.4rem"` 인라인이 박혀 있다 (CDP getMatchedStylesForNode 로 확인 — 생성기 산출물이라 이 갈래는 HTML 을 못 고친다). 인라인은 특이도 최상단이라 클래스 선택자로는 못 이긴다 — 이 한 줄에만 !important 를 쓴다. */ @media (min-width: 768px) { .nyw-phil__h, .nyw-bat > .nyw-lead { font-size: 71.9px !important; font-weight: 400; line-height: 73.32px; letter-spacing: -1.438px; color: #0a0a0a; margin: 10px 0 0; } .nyw-bat > .nyw-lead { text-align: center; } } /* ════════════════════════════════════════════════════════════════════════ 글자가 상자를 넘쳐 화면 밖·다음 요소로 흘러나가던 것 — 상자를 내용에 맞춘다 원인은 «한 가지»다. 시안 절대좌표가 준 width/height 고정이 그대로 살아 있는데 그 안에 들어간 글자가 시안과 다르다(굵기 400→800 · 영문 자리에 한국어 번역문). 상자는 시안 크기 그대로인데 내용만 커져서 넘쳤다. 라이브 실측 1440/1920 (전용 크롬 CDP · Range.getClientRects 잉크 기준): 41:788 대제목 상자 855x124 <- 내용 1663x163 가로 +808 / 세로 +39 41:1705 의료진 제목 상자 659x74 <- 내용 659x150 세로 +76 (아래 사진과 25px 겹침) 41:1176 진료 리드문 상자 1123x21 <- 내용 1123x67 세로 +46 41:1278 점심시간 상자 198x25 <- 내용 198x49 세로 +24 41:1744/1745/1747/1253 안내문 세로 +6 41:856/848/853/809/818 숫자캡슐 세로 +3~4 (줄높이가 글자 크기보다 작다) 고치는 축 = 「글자를 담는 상자는 자기 내용만큼 커진다」. 자리(left/top)는 시안 그대로 두고 width/height 고정만 푼다. ════════════════════════════════════════════════════════════════════════ */ /* (1) 첫 화면 글자 다섯 — 흐름 배치로 이미 바꿔 둔 자리라 상자만 풀면 된다. 상자를 풀지 않으면 nowrap 대제목이 855px 상자를 넘쳐 오른쪽 세로바까지 흐른다. */ @media (min-width: 769px) { .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__label, .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__title, .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__sub, .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__body { width: auto; height: auto; max-width: 100%; } } /* (2) 대제목 크기 — 글자 폭 계수를 다시 쟀다. 구값 8.42 는 굵기 400 일 때의 값이고, 지금 굵기 800 에서는 8.66 이다(1663/192 실측). 우여백도 40px 뿐이라 오른쪽 세로바(왼쪽 경계 1440px 화면에서 1370)를 못 피했다. 좌 180 + 우 160(세로바 70 + 여유 90) = 340 을 빼고 8.7 로 나눈다. 상한 176px = 2560px 같은 넓은 화면에서도 세로바를 넘지 않는 값. 1920 -> 176px 글자폭 1524 오른쪽 끝 1704 (세로바 1850) 1512 -> 134.7px 글자폭 1166 오른쪽 끝 1283 1440 -> 126.4px 글자폭 1094 오른쪽 끝 1211 (세로바 1370) 1280 -> 108px 글자폭 935 오른쪽 끝 1052 */ @media (min-width: 768px) { .nyw-hero .nyw-fx-hero__title { font-size: min(176px, calc((100vw - 340px) / 8.7)); } } /* (3) 라벨과 대제목이 붙어 보이던 것. 줄높이도 함께 풀어야 한다 — 노드 파일의 line-height:97.6px 은 시안 글자(103.8px) 기준이라 176px 글자가 줄상자를 55px 넘쳐 위 라벨을 침범했다. ⛔.nyw-fx-hero__title 한 겹(0,1,0)으로 선언하면 노드 파일이 «뒤에 실려» 진다. 선택자를 세 겹(0,3,0)으로 올려야 이긴다. */ @media (min-width: 769px) { .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__title { line-height: 1.04; margin: 14px 0 0; } .nyw-hero .nyw-fx-canvas--hero .nyw-fx-hero__label { line-height: 1.1; } } /* (4)(5) 나머지 상자들 — 자리는 그대로 두고 크기 고정만 푼다. ⛔[data-fig="…"] 한 겹(0,1,0)으로는 노드 파일이 뒤에 실려 이긴다. 앞에 .nyw-fx-canvas 를 붙여 (0,1,1) 로 올린다. */ @media (min-width: 1280px) { /* 의료진 제목 — 한국어 문장이 시안 영문보다 길어 두 줄이 됐고 아래 원장 사진(41:1706 top:160)과 겹쳤다. 한 줄로 편다. 그 자리(top 35~109)에는 다른 요소가 없어 폭을 넓혀도 안전하다. */ .nyw-fx-canvas [data-fig="41:1705"] { width: max-content; max-width: 100%; height: auto; white-space: nowrap; } /* 높이만 푸는 것들 — 전부 아래에 여백이 있어 늘어나도 다음 요소를 덮지 않는다 */ .nyw-fx-canvas [data-fig="41:1176"], /* 진료 안내 리드문 */ .nyw-fx-canvas [data-fig="41:1278"], /* 점심시간 */ .nyw-fx-canvas [data-fig="41:1253"], /* 주차 안내 본문 */ .nyw-fx-canvas [data-fig="41:1744"], /* 주차 안내 묶음 */ .nyw-fx-canvas [data-fig="41:1745"], /* 예약 안내 묶음 */ .nyw-fx-canvas [data-fig="41:1747"], /* 예약 안내 본문 */ .nyw-fx-canvas [data-fig="41:1707"], /* 손영우 대표원장 */ .nyw-fx-canvas [data-fig="41:787"], /* DENTAL CLINIC */ .nyw-fx-canvas [data-fig="41:809"], /* KOREA */ .nyw-fx-canvas [data-fig="41:818"], /* U.S.A. */ .nyw-fx-canvas [data-fig="41:827"], /* MONGOLIA */ .nyw-fx-canvas [data-fig="41:836"], .nyw-fx-canvas [data-fig="41:840"], .nyw-fx-canvas [data-fig="41:844"], .nyw-fx-canvas [data-fig="41:848"], .nyw-fx-canvas [data-fig="41:853"], .nyw-fx-canvas [data-fig="41:856"] { height: auto; } } /* (6) 숫자 카드의 큰 수 — 자릿수가 늘어 상자를 넘친다. 실측(768px) — 41:844 상자 121px 에 「30,000+」가 181px(+60) · 41:840 상자 114px 에 「3,500+」가 153px(+39). ⛔여기서 상자 폭을 푸는 것은 «오히려 악화»다. 카드 자체가 좁아서 max-width:calc(100% - 20px) 를 주면 상자가 121 -> 81px 로 더 조여 넘침이 +100 이 된다 (2026-09-14 실측으로 확인하고 되돌렸다). ★좁은 구간에서는 글자를 줄이는 것이 답이다. 시안 49.9px 은 1920 캔버스 기준이고 768~1279 구간의 카드 폭에는 애초에 안 맞는다. 실측 — 가장 긴 「30,000+」가 37.47px 에서 133px 이므로 폭당 비율은 3.55. ⛔그 비율을 그대로 쓰면 여유가 0 이라 반올림만으로 다시 넘친다(3.63 으로 쟀더니 +12.4 남았다). 카드 안쪽 여백·자간을 감안해 4.4 로 잡는다 — 768px (192-56)/4.4 = 30.9px -> 글자 110px (상자 121px) 900px (225-56)/4.4 = 38.4px -> 글자 136px (상자 143px) 1279px 상한 49.9px 이 걸린다 (상자 264px) ⛔⛔선택자를 `.nyw-fx-stat__grid [data-fig]` 로 싸잡으면 «라벨까지» 걸린다. 실측 — 13~14px 이던 라벨(「외국인 환자 비율」 등 5개)이 37.5px 로 커져 넘침이 2 -> 6건이 됐다. 한 번 더 되돌리고, «숫자 노드 5개»만 이름으로 지목한다. */ @media (min-width: 768px) and (max-width: 1279px) { .nyw-fx-canvas [data-fig="41:840"], /* 3,500+ */ .nyw-fx-canvas [data-fig="41:844"], /* 30,000+ */ .nyw-fx-canvas [data-fig="41:848"], /* 25 */ .nyw-fx-canvas [data-fig="41:853"], /* 4.9 */ .nyw-fx-canvas [data-fig="41:856"] { /* 약 20 */ font-size: min(49.9px, calc((100vw / 4 - 56px) / 4.4)); width: auto; height: auto; white-space: nowrap; } } /* ════════════════════════════════════════════════════════════════════════ 글자가 칸에 안 맞아 줄이 늘어나고 벽에 붙던 것 (2026-09-14 대표 지적) 「첫번째 캡처는 두줄로 써야지 "끝까지 봅니다."가 두번쨰줄」 「두번쨰 캡처는 왜 벽에 붙어있니 텍스트가...여유공간 없니?」 원인 — 섹션 제목을 71.9px 로 통일했는데 두 섹션의 «글자 칸»이 그만큼 넓지 않다. 라이브 실측(전용 크롬 CDP · location.href 확인): 철학 제목 글자 칸 768:314px · 1024:433 · 1440:522 · 1920:551 「한 사람이 처음부터」 한 줄이 519px 이라 1440 에서 3px 밖에 안 남고 1024 이하에서는 아예 못 들어가 3~4줄로 흘렀다 의료진 제목 768 에서 2줄(704 + 81) — 아래 원장 사진(top:160)과 겹친다 좌우 여백 768 에서 20px 뿐(--nyw-pad:2rem) — 글자가 화면 가장자리에 붙는다 ════════════════════════════════════════════════════════════════════════ */ /* (1) 철학 — 글자 칸을 넓힌다. 50:50 이면 제목 한 줄(519px)이 겨우 들어간다. 글자 쪽을 키우고 사이 간격을 줄여 여유를 만든다. 사진은 max-width:100% 라 좁아진 칸을 따라온다. */ @media (min-width: 1280px) { .nyw-phil__in { gap: 72px; } .nyw-phil__l { flex: 1 1 56%; } .nyw-phil__r { flex: 1 1 44%; } } /* (2) 1279px 이하는 «1단»으로 내린다. 그 아래에서는 칸을 아무리 나눠도 71.9px 제목 한 줄(519px)이 안 들어간다. 원장 섹션(.nyw-fx-dr .nyw-dr)이 768~999 에서 이미 같은 방식으로 1단이다. */ @media (min-width: 768px) and (max-width: 1279px) { .nyw-phil__in { flex-direction: column; align-items: stretch; gap: 40px; } .nyw-phil__l, .nyw-phil__r { flex: 0 0 auto; width: 100%; } .nyw-phil__r img { width: 100%; height: 360px; } } /* (3) 좌우 여백 — 768~1279 에서 20px 은 「벽에 붙은」 것으로 읽힌다. ⛔홈에만 준다. 이 값을 nyw-root.css 에서 올리면 하위 50지면이 함께 움직이고 그쪽은 오늘 확인하지 못했다(다음 회차에 같은 값으로 맞춘다). */ @media (min-width: 768px) and (max-width: 1279px) { /* ⛔.nyw-home 클래스는 «존재하지 않는다»(2026-09-14 실측 — body class="nyw" 뿐이다). 이 파일 자체가 홈에만 링크되므로 그냥 .nyw-wrap 으로 충분하다. */ .nyw-wrap { padding-inline: 40px; } } /* (4) 의료진 제목 — 768~1279 에서 한 줄로 편다. 여백을 40px 로 넓히면 쓸 수 있는 폭이 768-80=688px 이다. 「28년의 경험, 한 사람의 진료」는 71.9px 에서 745px 이므로 폭당 비율은 10.36 — 688/10.36 = 66.4px 이면 한 줄에 들어간다. 상한은 시안값 71.9px 이다. */ @media (min-width: 768px) and (max-width: 1279px) { .nyw-fx-canvas [data-fig="41:1705"] { font-size: min(71.9px, calc((100vw - 96px) / 10.36)); line-height: 1.05; width: max-content; max-width: 100%; height: auto; white-space: nowrap; } } /* ════════════════════════════════════════════════════════════════════════ 글자가 «회색 배경 상자 밖»으로 나가던 것 (2026-09-14 대표 지적 「엉성한 디테일」) 라이브 실측 — 배경(.nyw-sec.nyw-wrap) vs 캔버스([data-fig-section]) 1200 배경 24~1176 · 캔버스 64~1136 안에 있다 1280 배경 64~1216 · 캔버스 8~1214 ⛔왼쪽으로 56px 튀어나감 1440 배경 144~1296 · 캔버스 117~1323 ⛔좌 27px · 우 27px 밖 원인 — 시안 캔버스는 1206px 인데 .nyw-wrap 안쪽은 --nyw-max(128rem) - pad×2 = 1080px 라 «처음부터 126px 더 넓다». 위 ③ 절이 그 넘침을 왼쪽으로 밀어 오른쪽 세로바를 피했고, 그 결과 왼쪽이 배경 밖으로 나가 글자가 흰 바탕에 걸쳤다. ★고치는 축을 바꾼다 — 글자를 옮기는 대신 «배경을 캔버스에 맞춘다». .nyw-wrap 을 홈에서만 (1206 + 좌우 여백) 으로 키우면 캔버스가 배경 «안»에 들어오고, 오프셋을 0 으로 되돌려도 오른쪽 세로바에 닿지 않는다. 1440 배경 81~1359 · 캔버스 117~1323 · 세로바 L1370 -> 47px 여유 ⛔1339px 미만은 그 여유가 안 나온다(1280 에서 캔버스 오른끝이 세로바를 17px 침범). 그 구간은 기존 오프셋을 그대로 둔다 — 세로바가 글자를 덮는 쪽이 더 나쁘다. ════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1340px) { .nyw-wrap { max-width: calc(1206px + var(--nyw-pad) * 2); } .nyw-fx-canvas[data-fig-section]:not(.nyw-fx-canvas--hero) { margin-left: 0; } /* 철학 섹션도 같은 기준으로 맞춘다 — 위 ③ 과 같은 식을 쓰고 있었다 */ .nyw-phil__l { margin-left: 0; } } /* 헤더 폭은 공통 시트(nyw-root.css)가 정한다 — 전 지면 한 곳에서 본다 */