@charset "utf-8"; /* ============================================================================ 더라인성형외과 phpnew4 - main.css ★ 새 섹션 만들 땐 이 치트시트만 보면 된다 ★ [철칙] 값을 새로 만들지 않는다. 아래 토큰/클래스에서 "골라 쓴다". 하드코딩(px·hex) 금지. 애매하면 가장 가까운 토큰으로 흡수. ┌ 색상 (7개가 전부) ───────────────────────────────────────────────────── │ var(--ink) #262627 모든 텍스트·제목 ← 기본 │ var(--dark) #2E2A26 어두운 섹션/푸터의 "배경" │ var(--point) #E95263 메인 컬러(강조 텍스트·아이콘·활성·hover) │ var(--accent) #E5325B 완전 강조 (아껴 쓸 것) │ var(--white) #fff │ var(--gray-dark) #6a6a6a 보조 텍스트 (글자용 회색) │ var(--gray-light) #E0E0E0 구분선·테두리 (글자에 쓰지 말 것) │ var(--point-bg) 연한 핑크 배경 · var(--point-soft) 흐린 데코 (--point 파생) │ var(--bg-soft) 은은한 회색 - 박스·카드의 면 (--ink 3%) │ var(--bg-mute) 한 단계 진한 회색 - 푸터·풀블리드 띠 (--ink 8%) └──────────────────────────────────────────────────────────────────────── ┌ 폰트 (5개 + GNB 예외 1) ─────────────────────────────────────────────── │ --fs-caption 16 · --fs-body 20 · --fs-sub 30 · --fs-title 42 · --fs-display 80 │ (예외) --fs-nav 18 = GNB · --fs-event-only 60 = 프로모션 숫자 · --fs-fine 14 = eyebrow·보조문구 │ ↑ 전용 예외 3개. 정해진 자리 밖에서 쓰지 말 것 │ (--fs-nav 18 은 GNB depth1 전용) ※ 제목은 h1~h4 태그만 쓰면 자동 적용 └──────────────────────────────────────────────────────────────────────── ┌ 간격 (1920 기준 px) ─────────────────────────────────────────────────── │ --sp-1 5 --sp-2 10 --sp-3 15 --sp-4 20 --sp-5 30 --sp-6 40 │ --sp-7 60 --sp-8 80 --sp-9 120 --sp-10 160 │ --sec-gap 180 ← 섹션과 섹션 사이는 무조건 이거 └──────────────────────────────────────────────────────────────────────── ┌ 라운드 ──────────────────────────────────────────────────────────────── │ --r-sm 5 · --r-md 10 · --r-lg 20(카드 기본) · --r-xl 30 · --r-pill 999 └──────────────────────────────────────────────────────────────────────── ┌ 섹션 뼈대 (폭은 이 2개뿐) ───────────────────────────────────────────── │
─ margin-top: var(--sec-gap) │
max 1400 + 좌우 20 ← 대부분 여기 │
풀블리드(마퀴·슬라이더 등 끝까지) │

제목

부제

│ ... 콘텐츠 ... │
더보기
└──────────────────────────────────────────────────────────────────────── 반응형: 1920에서 원본과 동일. 이하는 clamp + 브레이크포인트 1200(GNB→햄버거) / 991.98(주 모바일) / 767.98 / 575.98 비교 기준: 운영 사이트 https://theline.kr (DESIGN_SYSTEM 규칙 4) ============================================================================ */ @layer reset, tokens, base, layout, components, templates, templates-type, utilities; /* ---------------------------------------------------------------- reset -- */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* (요청 2026-07-17, doctors 갤러리→소개 앵커) sticky 헤더(78, 축소 시 59)가 앵커 목적지를 덮는다 → 점프 지점을 헤더 높이 + 숨 고를 여백만큼 내린다. 전 페이지 공통(앵커 전부에 이롭다). */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--sp-8) + var(--sp-5)); } /* line-height 는 여기서 주지 않는다 - @layer base 의 body 가 --lh-body(1.6) 로 정한다. 리셋에서 1.5 를 주면 죽은 선언이 되어 "행간이 어디서 정해지는지" 를 흐린다. */ body { -webkit-font-smoothing: antialiased; } img, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } } /* --------------------------------------------------------------- tokens -- */ @layer tokens { :root { /* ══════════════════════════════════════════════════════════════════════ 타이포 5스케일 (2026-07-14 전면 재지정). 값은 "PC(1920) -> 모바일(하한)". 이름이 곧 쓰임이다 - 새 텍스트를 놓을 때 아래 5개 중 하나를 고른다. 1) --fs-h2title 42 -> 26 섹션 대제목(h1 · h2). 히어로도 이걸 쓴다 2) --fs-h2lead 18 -> 16 h2 바로 아래 리드 문장 3) --fs-content-title 22 -> 18 "제목 + 서브본문" 묶음의 제목(카드 · 박스 · h3) 4) --fs-content-subtext 16 -> 14 위 제목에 딸린 서브 본문 5) --fs-content-body 20 -> 15 제목 없이 본문만 있는 자리. 표 내용도 이것 (삭제) --fs-display(80) : 히어로도 h2title 로 통일 → 대제목은 42 하나뿐이다 (삭제) --fs-sub(30) : h3 가 content-title(22) 로 내려와 쓸 자리가 없어졌다 (삭제) --fs-caption(16) : content-subtext(16) 와 값이 같아 흡수했다 ══════════════════════════════════════════════════════════════════════ */ --fs-h2title: clamp(1.625rem, 2.1875vw, 2.1875rem); /* 26 -> 35 : 700 / 1.3 / -.03em */ --fs-h2lead: clamp(1rem, 0.9375vw, 1.125rem); /* 16 -> 18 : 400 / 1.6 / -.01em */ --fs-content-title: clamp(1.125rem, 1.1458vw, 1.375rem); /* 18 -> 22 : 600 / 1.35 / -.01em */ --fs-content-subtext: clamp(0.875rem, 0.8333vw, 1rem); /* 14 -> 16 : 400 / 1.6 / 0 */ --fs-content-body: clamp(0.9375rem, 1.042vw, 1.25rem); /* 15 -> 20 : 400 / 1.6 / -.01em */ /* ⚠️ 예외 1 - 섹션 영문 eyebrow(.tpl-eyebrow) 전용. 다른 텍스트에 쓰지 말 것. h2 위에 얹는 영문 라벨이라 본문 스케일과 성격이 다르다(대문자 · 양수 자간). 5스케일의 최소값(content-subtext 16)보다 작아야 라벨로 읽힌다 → 14 로 따로 뺀다. */ --fs-eyebrow: calc(var(--fs-content-body) * .7); /* 14 : eyebrow · 보조 문구 */ --fs-ref: calc(var(--fs-content-body) * .6); /* 12 : 참고 논문(cite) 전용 - eyebrow 보다 한 단계 작다 */ /* ⚠️ 예외 2 - 버튼 라벨(.cta · .btn) 전용. 문장이 아니라 "누르는 것"의 이름이다. 본문 스케일(content-body 20)을 쓰면 버튼이 문장처럼 커진다 → 16 으로 따로 뺀다. */ --fs-cta: clamp(0.875rem, 0.8333vw, 1rem); /* 14 -> 16 : 600 / -.01em */ /* ⚠️ 예외 3 - 프로모션/이벤트 "가격 숫자" 전용. 일반 텍스트에 쓰지 말 것. h2title(42) 은 작고 그렇다고 스케일을 늘릴 자리는 여기뿐이라 예외로 둔다. 이름에 event-only 를 박아 둔 이유가 그것이다 - 새 섹션에서 이 토큰을 고르면 잘못 고른 것이다. */ --fs-event-only: clamp(1.625rem, 2.1875vw, 2.1875rem); /* 26 -> 35 : 프로모션 숫자 - h2title 과 동일 */ /* ══ UI 치수 - 위 5스케일은 "콘텐츠 본문" 전용이다. 아래는 그것과 별개다. ══ 아이콘(--ico-*) 은 글자가 아니라 그림이다. 모달·상담바 같은 "UI 장치"(--ui-*) 도 본문 타이포와 리듬이 다르다(작고 촘촘하다). 둘을 5스케일에 억지로 욱여넣으면 본문이 커지거나 UI 가 헐거워진다 → 스케일을 갈라 둔다. ★ 콘텐츠(제목·본문·리드)에는 절대 쓰지 않는다. 쓰고 있으면 잘못 고른 것이다. */ /* 아이콘 (Phosphor 등) - 그림이므로 텍스트 스케일과 무관하다 */ --ico-xs: 14px; --ico-sm: 18px; --ico-md: 22px; --ico-lg: 26px; --ico-xl: 32px; /* UI 텍스트 - 딱 2개. 제목 하나, 나머지 하나. (요청) 12~24 가 8종류로 흩어져 있었다 → 22 / 13 두 값으로 통일했다. UI 는 정보 밀도가 높아 위계가 2단이면 충분하다. 더 늘리지 않는다. */ --ui-title: 22px; /* 모달 제목 */ /* 체크박스 - 상담폼(18)과 하단 상담바(17)가 1px 달랐다 → 18 로 통일 (2026-07-13) */ --ui-check: 18px; --ui-text: 13px; /* 그 외 UI 텍스트 전부 (뱃지 · 버튼 · 라벨 · 상담바) */ /* 반투명 면 - 색은 팔레트에서, 투명도만 여기서. rgba 하드코딩을 없앤다 */ --veil-scrim: color-mix(in srgb, var(--ink) 45%, transparent); /* 모바일 메뉴 뒤 */ --veil-modal: color-mix(in srgb, var(--ink) 50%, transparent); /* 모달 뒤 */ --veil-bar: color-mix(in srgb, var(--ink) 65%, transparent); /* 하단 상담바 */ --veil-line: color-mix(in srgb, var(--white) 30%, transparent);/* 어두운 면 위 구분선 */ --veil-track: color-mix(in srgb, var(--gray-light) 50%, transparent); /* 히어로 진행바 */ /* ── 섹션 헤드(=[영문 eyebrow] + [H2] + [서브제목]) 는 "하나의 단위" 다. 줄 간격과 본문까지의 거리를 여기 3개 토큰으로만 정한다. 어느 페이지의 어떤 헤드를 보더라도 값이 같다 → 하나만 고치면 전 페이지에 반영된다. 서브제목은 있어도 되고 없어도 된다 - 없으면 H2 가 그 단위의 마지막 줄이 된다. 헤드 ↔ 본문 거리는 "헤드 블록의 바깥 마진"이라 서브제목 유무와 무관하게 항상 같다. */ /* (요청 2026-07-14) eyebrow ↔ H2 와 H2 ↔ 리드의 간격이 거꾸로였다(30 / 10). eyebrow 는 H2 에 붙는 "라벨"이라 한 덩어리로 읽혀야 하고, 리드는 그 아래 별개 문장이다. → 붙일 것은 붙이고(10) 뗄 것은 뗀다(20). 묶음이 [eyebrow+H2] → [리드] 로 읽힌다. */ --head-gap-title: var(--sp-2); /* eyebrow ↔ H2 : 10 (붙는 라벨) */ --head-gap-sub: var(--sp-4); /* H2 ↔ 서브제목 : 20 (별개 문장) */ --head-gap-body: var(--sp-8); /* 헤드 ↔ 본문 : 50 -> 80 (★ 예외 없음) */ /* ── 템플릿 들여쓰기 (요청 2026-07-14) ───────────────────────────────── "가로로 긴 것"만 좌우를 좁혀 읽기 폭을 만든다. 카드·갤러리·사진은 대상이 아니다. 적용 목록(어느 클래스가 어느 값을 쓰는지)은 templates 레이어에 있다. --tpl-inset (150) : 11번 구분선 아이콘 행 · 시술 프로세스 4단계 박스 --tbl-inset (200) : 정의형 2단 표(dt/dd) - 줄이 짧아 더 좁혀도 읽힌다 좁은 화면(≤1200px)에선 이미 폭이 없다 → 둘 다 0 으로 푼다(아래 반응형). */ --tpl-inset: 150px; --tbl-inset: 200px; /* ── 선택 토글(.section__toggle) : 콘텐츠의 "머리" 다. (요청 2026-07-13) "모든 쇼츠 영상 · 비포애프터 · SVF 지방흡입, 이식 …" 처럼 콘텐츠를 갈아 끼우는 토글. 제목의 일부가 아니라 콘텐츠의 시작이므로, 제목과는 공식 여백(80)을 두고 자기가 제어하는 콘텐츠에는 가깝게(50) 붙인다. ★ 폰트 · 항목 간격 · hover · 선택 상태 · 하단 마진을 여기 3개 토큰 + .section__toggle 규칙이 전부 정한다. 섹션마다 다시 만들지 않는다. */ --gap-toggle-item: var(--sp-4); /* 항목 ↔ 항목 : 20 */ --gap-toggle-body: clamp(31px, 2.604vw, 50px); /* 토글 ↔ 콘텐츠 : 50 (--sp 스케일에 50 이 없어 전용 토큰) */ /* ── 콘텐츠 ↔ CTA 간격 : CTA "유형"이 값을 정한다. 섹션별 오버라이드 금지. (요청 2026-07-13) CTA 는 두 종류뿐이다: .more-link : "더보기 +" 텍스트 링크 - 목록의 꼬리라 콘텐츠에 가깝게 붙인다 .cta : 토글형(pill) 버튼 - 독립된 행동이라 더 띄워 준다 ★ 값은 전부 여기 2개 토큰이 정한다. 섹션(.promo · .reviews · .bna …)이 제 값을 갖지 않는다. */ --gap-cta-more: var(--sp-6); /* 콘텐츠 ↔ 더보기 링크 : 40 */ --gap-cta-button: var(--sp-8); /* 콘텐츠 ↔ 토글형 버튼 : 80 */ /* 예외 1개: GNB depth1 전용 (theline.kr 실측 17~18px, 스케일에 없음) */ --fs-nav: clamp(0.9375rem, 0.938vw, 1.125rem); /* 15 -> 18 */ /* -- 간격: 10스케일 + 섹션. 1920 기준 5/10/15/20/30/40/60/80/120/160/180 */ --sp-1: 5px; --sp-2: 10px; --sp-3: 15px; --sp-4: clamp(14px, 1.042vw, 20px); --sp-5: clamp(19px, 1.563vw, 30px); --sp-6: clamp(25px, 2.083vw, 40px); --sp-7: clamp(37px, 3.125vw, 60px); --sp-8: clamp(50px, 4.167vw, 80px); --sp-9: clamp(74px, 6.25vw, 120px); --sp-10: clamp(99px, 8.333vw, 160px); --sec-gap: clamp(112px, 9.375vw, 180px); /* 섹션 사이 표준 간격 */ /* -- 라운드 : 박스·카드·사진은 예외 없이 --r-lg(20). "20px 완전 고정" (--r-md 10 · --r-xl 30 은 폐기했다 - 다시 만들지 말 것. 섞이면 박스마다 R 이 달라진다) --r-sm 은 폼 입력칸 전용(작은 칸에 20 을 주면 알약이 된다), --r-pill 은 버튼·태그 전용 */ --r-sm: 5px; --r-lg: 20px; --r-pill: 999px; /* ═══ 컴포넌트 기본값 - main 이 기준이다. 다른 CSS 는 "기준과 다른 것"만 덮어쓴다 ═══ */ /* -- CTA 버튼 여백 : 상하 15 · 좌우 25 25 는 --sp-4(20) 와 --sp-5(30) 사이값이라 --sp-5 에서 파생한다(임의 px 아님). 본문 CTA · 각도 토글 · 푸터 플로팅 CTA 가 모두 이 값을 본다 - 한쪽만 어긋나지 않게. */ --cta-pad-block: var(--sp-3); /* 15 */ --cta-pad-inline: calc(var(--sp-5) * 5 / 6); /* 25 */ /* -- 모바일 이벤트 배지(우하단 · .quick-badge-m) : 폭과 바닥에서 띄운 거리. 배지 위로 펼쳐지는 퀵 메뉴(.quick-side)가 같은 값을 보고 자기 위치를 잡는다 → 배지를 옮기거나 키우면 메뉴가 따라온다. 두 곳에 같은 숫자를 적지 않는다. env(safe-area-inset-bottom) 은 아이폰 홈바에 가리지 않게 하는 여백. */ --quick-badge-w: 80px; --quick-badge-gap: calc(var(--sp-3) * 2 + env(safe-area-inset-bottom, 0px)); /* 15 × 2 = 30 */ /* 퀵 원 지름 - 알약 안 아이콘과 맨 위로가 전부 이 값을 본다. 모바일에서 한 단계 줄인다(아래 반응형에서 재정의). */ --quick-ico: 44px; /* -- 리스트 간격 : 배치 형태가 정한다 --box-gap (35) : 좌우로 배치되는 박스·사진. 상하좌우 모두 같은 35 35 는 --sp-5(30) 과 --sp-6(40) 사이값이라 --sp-5 에서 파생(임의 px 아님) --flow-gap (30) : 위에서 아래로 이어지는 "흐름"(체크리스트 · 시술 과정) */ --box-gap: calc(var(--sp-5) * 7 / 6); /* 35 */ --flow-gap: var(--sp-5); /* 30 */ /* ── About 2단(.tpl-about) : 좌 영상/사진 + 우 설명. 59개 페이지가 이 한 벌을 공유한다. ★ 비율·간격을 바꾸려면 여기 네 줄만 고친다 → 전 페이지에 동시 적용된다. ★ 눈에 보이는 여백의 기준은 "이미지" 가 아니라 "붉은 데코" 다. 데코(.tpl-about__deco)가 이미지 밖으로 --about-deco 만큼 비껴 나와 있으므로 독자가 보는 간격은 [붉은 선 ↔ 글] 이고, 그게 --about-gutter(60) 가 되도록 column-gap 은 데코 오프셋을 더해서 파생시킨다. 숫자를 직접 적지 않는 이유 = 화면이 좁아져 데코 오프셋이 줄면 gap 도 같이 줄어야 60 이 유지되기 때문이다. */ /* 좌 미디어 : 우 텍스트. ★ 글줄 폭은 --about-text 가 정한다(고정). 미디어는 남는 폭을 전부 가져간다(1fr). 글이 길게 늘어지면 읽기 리듬이 깨지므로 글줄을 묶고 미디어를 키우는 쪽을 택했다. 글줄을 넓히려면 --about-text 만 키운다. */ --about-text: 400px; /* (요청 2026-07-14) 미디어 폭을 29번 「중앙 축 타임라인」의 이미지와 같게 맞춘다. 29번은 [1fr | 축 104 | 1fr] 에 gap 60 → (1200 - 104 - 120) / 2 = 488. 15번엔 축이 없으니 그 결과값을 그대로 고정한다. 비율(--about-ratio 16/9)은 원래 같았다 → 두 템플릿의 이미지가 488 × 275 로 완전히 같아진다. 글 열은 1fr 로 두어 남는 폭을 가져간다(400 고정이면 우측에 빈 칸이 생긴다). */ --about-media: 488px; --about-cols: var(--about-media) minmax(0, 1fr); --about-deco: var(--sp-4); /* 20 : 데코가 이미지 밖으로 비껴 나오는 양 */ --about-gutter: var(--sp-7); /* 60 : ★ 독자가 보는 간격 - 붉은 선 ↔ 글 · 좌우 여백 */ --about-gap: calc(var(--about-gutter) + var(--about-deco)); /* 미디어 ↔ 텍스트 (파생) */ /* 미디어 박스의 비율. 영상(16:9)이든 사진이든 이 한 값으로 크기가 같아진다. ★ 원본 사진의 비율이 페이지마다 제각각(와이드·정방형)이라 그대로 두면 About 이 페이지마다 다른 크기로 선다 → 박스를 고정하고 사진은 cover 로 채운다. 더 큰 미디어를 원하면 4/3 (더 높아짐), 더 납작하게는 2/1 로 바꾼다. */ --about-ratio: 16 / 9; /* -- 박스 내부 : 아이콘은 제목의 라벨이라 붙이고(sm), 제목과 본문은 성격이 달라 벌린다(md). 상하 여백은 3 : 5 - 아래를 더 비워야 시각적으로 안정된다. 본문만 좌우로 더 들여써 글자가 박스 외곽선에 붙지 않게 한다. */ /* (요청) 아이콘 ↔ 제목을 더 붙인다 : 10 → 5. 아이콘은 제목의 라벨이라 붙을수록 한 덩어리다. */ --box-gap-sm: var(--sp-1); /* 5 : 아이콘 ↔ 제목 */ --box-gap-md: var(--sp-5); /* 30 : 제목 ↔ 본문 */ /* (요청 2026-07-13) 사진 ↔ 제목은 제목 ↔ 본문보다 더 벌린다 - 사진은 제목의 라벨이 아니라 하나의 면이라, 붙으면 카드가 위로 쏠린다. 30 → 40 으로 올려 글 덩어리를 아래로 내린다. */ --box-gap-photo: var(--sp-6); /* 40 : 사진 ↔ 제목 (.tpl-box--photo 전용) */ /* 박스 본문 크기 - 자리에 따라 다르다(아래 .tpl-boxes 규칙에서 갈라 준다) */ /* (요청) 3:5 비율은 버린다. 상하를 각각 따로 정한다. 내용을 더 아래로 : 상단 40 → 50. 하단은 상단에 묶이지 않고 50 으로 고정한다. (50 은 스케일 사이값이라 --sp-5(30) 에서 파생 - 임의 px 아님) */ --box-pad-top: calc(var(--sp-5) * 5 / 3); /* 50 */ --box-pad-bottom: calc(var(--sp-5) * 5 / 3); /* 50 */ --box-text-inset: var(--sp-4); /* 20 : 본문 전용 좌우 인셋 */ /* (요청 2026-07-14) 박스 제목 24 → 22. 카드 폭(≈273)에서 24 는 본문(15)과 덩어리로 뭉쳐 보였다. 기울기는 1920 기준(22 / 1920 = 1.1458vw), 좁아지면 하한 18. */ /* (요청 2026-07-14) 박스 본문 18 → 16. 18 은 카드 폭에서 줄당 9~11자로 끊겨 4줄이 됐다. 16 은 5스케일의 caption 상한과 같은 값이라 스케일을 늘리지 않는다. (16 / 1920 = 0.8333vw), 하한 14. 전 박스(.tpl-box)가 이 토큰 하나를 공유한다 - 소개·수술정보·특징 모두 같다. */ /* 14 : 5스케일(16) 아래 "미세" 단계. eyebrow · 보조 문구(단위 · VAT · 경력)가 함께 쓴다. 예전엔 --fs-eyebrow-only(14) 와 --box-opt-fs(14) 로 토큰이 둘이었다 → 같은 값이라 하나로 합쳤다. */ /* ══ 굵기(font-weight) - 딱 3개. (2026-07-14 통합) 400 : 본문 - content-body · content-subtext · h2lead 600 : 제목 · 강조 - content-title(h3 · h4) · eyebrow · 버튼(--fs-cta) · · 700 : 대제목 - h1 · h2 (--fs-h2title) ★ 500 · 200 을 새로 쓰지 않는다. 예전엔 500 이 22곳에 흩어져 "본문도 제목도 아닌" 어중간한 위계를 만들었다(.cta · .promo__num · .locate__tel …) → 전부 600 으로 접었다. ⚠️ 단 하나의 예외: 모달 · GNB · 모바일 메뉴 같은 "UI 장치"는 500 을 쓴다. 이것들은 콘텐츠가 아니라 조작 장치라 --ui-* / --ico-* 처럼 체계가 따로다. 본문 요소에서 500 이 보이면 잘못 고른 것이다. */ /* ══ 행간(line-height) - 딱 3개. (2026-07-13 통합) 예전엔 본문 규격 [--fs-body / 400 / --ink] 이 15곳에 복붙돼 있었고 행간만 1.5·1.6·1.7 로 제각각이었다. 값에 이름을 붙여 "어느 자리에 무엇을 쓰는지"를 못박는다. --lh-tight (1.45) : 보조 문구(옵션·단위·경력) - 작은 글씨라 좁게 --lh-body (1.6) : 본문 기본. 박스 본문 · 체크 항목 · 과정 설명 · 표 - 짧은 덩어리 --lh-prose (1.7) : 줄글 문단. 리드문 · About 본문 - 줄이 길어 더 띄운다 ★ 자리에 맞는 것을 "고른다". 새 값을 만들지 않는다. */ --lh-title: 1.4; /* 제목 · 번호 - 짧고 굵은 줄 (h4 · 박스 제목 · 01·02 번호) */ --lh-tight: 1.45; --lh-body: 1.6; --lh-prose: 1.7; /* ══ 좌우 2단 분할 - 좌 48 : 우 70. (2026-07-13 통합) 소개 · 수술정보 · 시술과정(sticky) · 의료진 소개/프로필 · 인어주사 6곳이 각자 minmax(0,48fr) minmax(0,70fr) 를 따로 적고 있었다 → 한 줄로 모은다. 비율을 바꾸려면 여기만 고친다. */ --split-cols: minmax(0, 48fr) minmax(0, 70fr); /* ══ 사진 비율 - 카드 사진은 4:3, 인물·정사각은 1:1. (2026-07-13 통합) */ --ratio-photo: 4 / 3; --ratio-square: 1 / 1; --ratio-portrait: 3 / 4; /* 세로 컷 - 소개 섹션의 좁은 sticky 사진(.tpl-intro--slim) */ /* (요청 2026-07-13) 모바일은 카드가 한 줄에 1개라 4:3 사진이 화면을 세로로 다 먹는다. → 위아래를 잘라 가로형(16:9)으로 눕힌다. PC 는 4:3 그대로. */ --ratio-photo-m: 16 / 9; /* ══ 카드 hover 확대 - 프로모션 · 시그니처 · 바로가기 · 함께하면 좋은 수술이 같은 동작을 쓴다 */ --card-zoom: 1.1; /* -- 스케일로 만들 수 없는 값은 "이름을 붙여" 여기 둔다. 규칙에서 벗어난 게 아니라, 출처가 바깥에 있는 값(사진에 박힌 좌표 등)이라 스케일이 설명할 수 없는 경우다. CSS 본문에 생짜 숫자를 남기지 않는 것이 핵심 - 여기 없으면 하드코딩이다. */ --hairline: 1px; /* 선·테두리 두께. 전 페이지 단 하나 */ /* -- 스크롤 등장(reveal) : 얼마나 아래에서 올라오고, 얼마나 오래 걸리는가. H2 는 섹션보다 더 올라오고 더 느리다 → 섹션이 먼저 뜨고 제목이 뒤따라 오는 리듬. */ --reveal-rise-h2: var(--sp-6); /* 40 : H2 */ --reveal-dur-h2: .9s; /* 메인 B&A 영상의 원본 비율. 소스 파일(pc.mp4 626×690)이 정하는 값이라 스케일로 만들 수 없다 → 이름을 붙여 여기 둔다. 영상을 갈아끼우면 이 값도 함께 바꾼다. */ --bna-video-ratio: 626 / 690; --container: 1280px; /* 섹션 폭(.container). 좌우 여백은 --sp-6 → 콘텐츠 시작선은 이 둘이 정한다 */ --read-width: 700px; /* 리드문 등 "읽기 폭" 상한. 섹션 폭(--container)과 다른 개념 */ --bna-blur-top: 17px; /* B&A 블러가 덮어야 할 사진 상단 여백(원본 이미지 기준) */ /* ══════════ 색상: 이 7개가 전부. 색상 하드코딩 전면 금지 ══════════ */ /* ── 브랜드 4색 */ --ink: #262627; /* 1. 메인 블랙 - 모든 텍스트·제목 */ --dark: #2E2A26; /* 2. 다크 브라운 - 푸터·어두운 섹션의 "배경" */ --point: #E95263; /* 3. 메인 컬러 - 포인트(강조 텍스트·아이콘·활성) (#FF6D6A 에서 명도·채도를 눌러 진하게) */ --accent: #E5325B; /* 4. 엣지 - 완전 강조 전용 (아껴 쓸 것) */ /* ── 중립 3색 (회색은 딱 2개) */ --white: #fff; --gray-dark: #6a6a6a; /* 보조 텍스트 전용 (글자) */ --gray-light: #E0E0E0; /* 구분선·테두리 전용 (글자에는 금지) */ /* ── 파생 틴트 (기존 색에서 자동 생성 · 신규 색 아님) */ --point-bg: color-mix(in srgb, var(--point) 12%, #fff); /* 연한 핑크 배경 */ --point-soft: color-mix(in srgb, var(--point) 30%, #fff); /* 흐린 숫자·데코 */ /* 은은한 회색 배경 - 박스·카드의 "면"을 채울 때. --gray-light(#E0E0E0)는 선 굵기에 맞춘 색이라 면으로 깔면 무겁다. 그래서 --ink 를 3%만 섞어 쓴다. ★ 배경 전용. 선·테두리에는 --gray-light, 글자에는 절대 쓰지 않는다. */ --bg-soft: color-mix(in srgb, var(--ink) 3%, #fff); /* ≈ #F8F8F8 - 카드·박스 (작은 면) */ --bg-mute: color-mix(in srgb, var(--ink) 8%, #fff); /* ≈ #EFEFEF - 푸터·띠 (넓은 면) */ } /* ══ 모바일 CTA - 포맷은 딱 하나다 (2026-07-14) PC 는 그대로(15/25) 두고, 모바일만 헤더 "상담예약" 규격(5/15)으로 접는다. 예전엔 모바일에 세 포맷이 공존했다 - 헤더 34px · 본문 .cta 52px · 상담바 버튼. 본문 CTA 가 헤더보다 18px 나 두꺼워 "같은 버튼"으로 안 읽혔다. ★ 여기(토큰)에서 한 번만 바꾼다. 개별 버튼이 자기 padding 을 따로 들고 있으면 이 한 줄이 안 먹는다 → .header-cta · 상담바 버튼의 자체 padding 을 전부 걷어냈다. */ @media (max-width: 991.98px) { :root { --cta-pad-block: var(--sp-1); /* 15 -> 5 */ --cta-pad-inline: var(--sp-3); /* 25 -> 15 */ } } } /* ----------------------------------------------------------------- base -- */ @layer base { /* 제목 없이 본문만 있는 자리의 기본값 = --fs-content-body (20 -> 15 / 400 / 1.6 / -.01em). 표 내용(td · th)도 여기서 상속받는다 - 따로 크기를 주지 않는다. */ body { font-family: 'Pretendard', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif; font-size: var(--fs-content-body); font-weight: 400; line-height: var(--lh-body); /* 1.6 */ letter-spacing: -.01em; color: var(--ink); background: var(--white); word-break: keep-all; } /* DESIGN_SYSTEM 규칙 0-2: heading 은 태그 셀렉터 단 하나, class/style 금지. h1 · h2 는 같은 스케일(--fs-h2title)을 쓴다 - 대제목은 42 하나뿐이다(display 80 삭제). */ h1, h2 { font-size: var(--fs-h2title); font-weight: 700; color: var(--ink); line-height: 1.3; letter-spacing: -.03em; text-align: center; } /* h2 바로 아래 리드 문장 = --fs-h2lead (18 -> 16 / 400 / 1.6 / -.01em). 위계: eyebrow(14) → h2(42) → 리드(18) → content-title(22) → subtext(16) */ :is(h1, h2) + p { font-size: var(--fs-h2lead); font-weight: 400; color: var(--ink); line-height: var(--lh-body); letter-spacing: -.01em; text-align: center; margin-top: var(--sp-2); } /* "제목 + 서브본문" 묶음의 제목 = --fs-content-title (22 -> 18 / 600 / 1.35 / -.01em). h3 · h4 가 한 벌을 공유한다 - 카드 안이든 밖이든 제목의 성격은 같다. */ h3, h4 { font-size: var(--fs-content-title); font-weight: 600; color: var(--ink); line-height: 1.35; letter-spacing: -.01em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } } /* --------------------------------------------------------------- layout -- */ @layer layout { /* ===== 섹션 가로폭: 딱 2가지 (DESIGN_SYSTEM 규칙 0-7) ===== (2) .container = 좌우 여백(기본·대부분 섹션) max 1400 + 좌우 패딩 (1) .container--full = 좌우 100% 풀블리드(마퀴·슬라이더·의료진 등) 화면 끝까지 */ /* (2026-07-12) 양쪽 여백을 더 줬다: 1400 → 1280, 좌우 패딩 20 → --sp-6(40) */ .container { max-width: var(--container); width: 100%; margin-inline: auto; padding-inline: var(--sp-6); } .container--full { width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; } /* .container--wide 는 헤더/히어로 바 전용. 섹션 콘텐츠에는 사용 금지(위 2종만 사용) */ .container--wide { max-width: 1920px; width: 100%; margin-inline: auto; padding-inline: var(--sp-6); } /* 화면 밖 렌더 스킵(성능) - 시각 결과 동일 */ .section { content-visibility: auto; contain-intrinsic-size: auto 600px; } [role="tabpanel"][hidden] { display: none !important; } } /* ----------------------------------------------------------- utilities -- */ @layer utilities { .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; } .view-mobile { display: none !important; } @media (max-width: 991.98px) { .view-pc { display: none !important; } .view-mobile { display: revert !important; } } } /* -------------------------------------------------------- components -- */ @layer components { /* Reveal-on-scroll (원본 AOS fadeInUp 대응) ★ .js 가 붙어야만 감춘다 - 스크립트가 죽으면 아무것도 안 보이는 사고를 막는다(JS 없으면 그냥 보인다). */ /* (요청 2026-07-14) 섹션 전체(.reveal) 등장 애니메이션은 삭제한다. 스크롤 애니메이션은 "헤드(eyebrow + H2 + 리드)" 한 곳에만 건다 - 본문·CTA 는 그냥 있는다. ★ HTML 의 class="reveal" 은 51개 파일에 342곳 박혀 있어 건드리지 않는다. 규칙을 여기서 지웠으므로 그 클래스는 아무 일도 하지 않는다(죽은 훅). */ /* (요청) 헤드는 "하나의 단위"로 등장한다 - eyebrow · H2 · 서브제목이 따로 놀지 않고 함께 올라온다. 예전에는 h2 에만 애니메이션이 걸려 있어서 eyebrow 와 서브제목만 먼저 떠 있었다. 섹션(.reveal)보다 조금 더 올라오고 조금 더 느리게 - 제목 무리가 뒤따라 오는 리듬이 된다. */ .js .section__head, .js .tpl-head { opacity: 0; transform: translateY(var(--reveal-rise-h2)); transition: opacity var(--reveal-dur-h2) ease, transform var(--reveal-dur-h2) cubic-bezier(.22, 1, .36, 1); } .js .section__head.is-visible, .js .tpl-head.is-visible { opacity: 1; transform: none; } /* 모션을 줄여달라는 사용자에게는 애니메이션을 걸지 않는다(접근성) */ @media (prefers-reduced-motion: reduce) { .js .section__head, .js .tpl-head { opacity: 1; transform: none; transition: none; } } .skip-link { position: fixed; top: -60px; left: 1rem; z-index: 2000; background: var(--ink); color: var(--white); padding: .6rem 1rem; transition: top .2s; } .skip-link:focus { top: 1rem; } /* --- 버튼 (원본 CTA 패턴: fs-[23/62/] fw-600 w-[252px]) --- ★ 버튼 라벨은 --fs-cta (16 -> 14 / 600 / -.01em) 하나로 관리한다. 예전엔 .btn 이 크기를 안 줘서 body(20) 를 상속했다 - 버튼이 문장 크기로 커졌다. */ .btn { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-cta); font-weight: 600; letter-spacing: -.01em; transition: background .3s, color .3s; } .btn--rose { width: clamp(164px, 13.802vw, 265px); height: clamp(50px, 4.167vw, 80px); background: var(--point); color: var(--white); } .btn--rose:hover { background: var(--ink); } /* ── 테두리형 CTA (.cta) - 전 페이지 공통 컴포넌트 page-template.css 에 있던 것을 main.css 로 승격했다(규칙 6: 2개 이상 페이지가 쓰면 main). index 상담폼의 .btn--cta 는 이것과 모양만 다르고 역할이 같아 삭제하고 여기로 합쳤다. · 고정 width/height 를 두지 않는다 - 크기는 padding 이 정한다(글자가 길어져도 안 깨진다) · 테두리는 border 가 아니라 inset box-shadow - border 는 박스를 1px 씩 키운다 */ .cta { display: inline-flex; align-items: center; justify-content: center; padding: var(--cta-pad-block) var(--cta-pad-inline); border-radius: var(--r-pill); background: transparent; color: var(--point); box-shadow: inset 0 0 0 var(--hairline) var(--point); font-size: var(--fs-cta); font-weight: 600; letter-spacing: -.01em; transition: background .2s, color .2s; } .cta:hover { background: var(--point); color: var(--white); } /* (요청 2026-07-14) 본문 CTA 만 모바일에서 상하 1px 씩 키운다(32 → 34). GNB 상담예약은 헤더 안에 갇혀 있어 32 가 꽉 차 보이지만, 본문 CTA 는 넓은 여백에 홀로 놓여 같은 32 여도 작아 보인다. 착시를 보정하는 값이라 토큰이 아니라 여기서만 준다. */ @media (max-width: 991.98px) { .cta { padding-block: calc(var(--cta-pad-block) + 1px); } } /* (2026-07-12) .bna-toggle(pill) 삭제 - 템플릿 7번 각도 토글이 index 탭과 같은 텍스트 스타일로 통일됐다. */ /* 더보기 (원본 .board-more-btn) - 우측 정렬 텍스트 링크. CTA 와 역할이 다르다: "더보기 +" 는 목록의 연장(우측), CTA 는 행동 유도(중앙 버튼) */ .more-link { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-content-body); color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: .3em; } /* hover 는 "마우스가 있는 기기"로 한정한다 (2026-07-17 버그 수정). 터치 기기는 탭 이후 :hover 가 풀리지 않고 고착돼, 더보기/줄이기가 한 번 누른 뒤부터 계속 빨간색(디폴트처럼)으로 보였다. */ @media (hover: hover) { .more-link:hover { color: var(--point); border-color: var(--point); } } /* ── CTA 영역(.section__foot) : "콘텐츠 ↔ CTA" 간격의 유일한 주인 ── 간격은 CTA 의 "유형"이 정한다. 섹션이 제 값을 갖지 않는다(오버라이드 금지). .more-link ("더보기 +" 링크) → 40 : 목록의 꼬리라 콘텐츠에 붙는다 .cta (토글형 pill 버튼) → 80 : 독립된 행동이라 더 띄운다 새 섹션을 만들어도 CTA 만 넣으면 값이 자동으로 맞는다. */ .section__foot { text-align: center; } /* 간격은 세로 리듬이 준다 (40 / 80) */ .section__foot--right { text-align: right; } /* ══════════ 섹션 헤드 = 하나의 단위 (전 페이지 · 전 섹션 공통, 예외 없음) ══════════ [영문 eyebrow] → [H2] → [서브제목(선택)] → [탭(선택)] ★ 이 블록이 사이트의 모든 헤드를 정의한다. 섹션·페이지마다 다시 만들지 않는다. .section__head(index) 와 .tpl-head(서브페이지·template) 는 이름만 다른 같은 것이다. · 줄 간격 : --head-gap-title(30) / --head-gap-sub(10) / --head-gap-tabs(40) · 본문까지 : --head-gap-body(80) - 헤드 "블록"의 바깥 마진. 서브제목·탭이 있든 없든 항상 마지막 줄에서 112 다 → 예외를 두지 않는다. · 등장 : 이 블록이 통째로 한 번에 올라온다(아래 .js 규칙). 값을 바꾸려면 위 토큰 4개만 고친다. */ .section__head, .tpl-head { text-align: center; } /* 간격은 아래 세로 리듬이 준다 */ /* 자식 마진을 전부 지우고 여기서만 다시 준다 → 어떤 조합이 와도 간격이 흔들리지 않는다 */ .section__head > *, .tpl-head > * { margin: 0; } .section__head > :is(h1, h2), .tpl-head > :is(h1, h2) { margin-top: var(--head-gap-title); } /* 서브제목 - 클래스가 .tpl-lead 든 그냥

든 완전히 같다. ★ 읽기 폭(--read-width 700) 상한을 여기서 준다. 없으면 한 줄이 컨테이너 폭(1200)까지 퍼져 눈이 줄을 따라가지 못한다(2026-07-12 회귀: .tpl-lead 정의가 지워져 실제로 그랬다). 크기·색·정렬은 base 의 h2 + p 규칙이 이미 정한다 → 여기서 다시 만들지 않는다. */ /* ★ --flush(가격 행 · HOT EVENT 띠)는 제외한다. 거기

는 "서브제목"이 아니라 가격 값(2,100,000~)이나 배너 카피라서 크기·정렬이 다르다. 서브제목 규칙에 휩쓸리면 안 된다. */ /* (요청 2026-07-14) 서브제목은 리드 스케일(--fs-lead 18)이다. body(20) 를 그대로 쓰면 카드 제목(22) 과 크기가 붙어 위계가 흐려진다. 줄이 길지 않으니 행간도 prose(1.7) → body(1.6). */ .section__head > :is(h1, h2) + p, .tpl-head:not(.tpl-head--flush) > :is(h1, h2) + p { font-size: var(--fs-h2lead); font-weight: 400; line-height: var(--lh-body); letter-spacing: -.01em; text-align: center; color: var(--ink); margin-top: var(--head-gap-sub); max-width: var(--read-width); margin-inline: auto; } /* 서브제목 안의 은 SEO 키워드 마킹용 - 시각 차이를 만들지 않는다(규칙: 제목은 문장 전체가 균일) */ .section__head > :is(h1, h2) + p strong, .tpl-head:not(.tpl-head--flush) > :is(h1, h2) + p strong { color: inherit; font-weight: inherit; } .section__head :is(h1, h2) strong, .tpl-head :is(h1, h2) strong { color: inherit; font-weight: inherit; } /* .tpl-head--flush : 배너·행 안에 놓인 헤드(가격 행 · HOT EVENT 띠). 세로 리듬은 "래퍼의 직계 자식"에만 걸리므로 이런 헤드는 애초에 마진을 받지 않는다. → 마진 무효화 선언이 필요 없다. 클래스는 서브제목 규칙 제외용으로만 남는다. */ /* ══════════ 선택 토글 (.section__toggle) - 콘텐츠의 "머리" ══════════ "모든 쇼츠 영상 · 비포애프터 · SVF 지방흡입, 이식 …" 처럼 콘텐츠를 갈아 끼우는 토글. ★ 제목의 일부가 아니라 콘텐츠의 시작이다 → 헤드 밖의 형제 슬롯으로 둔다. [헤드] ─80(공식 여백)─ [선택 토글] ─50─ [콘텐츠] ★ 폰트 · 항목 간격 · hover · 선택 상태 · 하단 마진을 전부 이 한 곳이 정한다. 섹션(쇼츠 · 전후사진 · 앞으로 생길 것)마다 다시 만들지 않는다. ※ 위 마진은 헤드의 margin-bottom(80)이 잡으므로 여기서 주지 않는다. */ /* 룩(글자 · 항목 간격 · hover · 선택색)은 여기 한 벌뿐이다. .tpl-bna__tabs(카드 안 각도 선택기)도 같은 룩을 쓴다 → 셀렉터에 얹는다. (요청) 하단 마진(--gap-toggle-body 50)도 같다 → 토글 ↔ 콘텐츠 거리가 섹션 어디서나 같다. 남는 차이는 "상태를 담는 속성"뿐이다(aria-selected / .is-on). */ .section__toggle, .tpl-bna__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-toggle-item); } /* 항목 간 거리 : 20 (아래 간격은 세로 리듬이 준다) */ /* (2026-07-13) 토글 항목이 "링크"인 경우도 같은 룩을 쓴다 → 셀렉터에 a 를 얹는다. 같은 시술의 유형이 여러 페이지로 갈라져 있고 그 목록이 GNB 에 없을 때(코성형 6종), 페이지끼리 서로를 오가는 내비가 필요하다. 전용 컴포넌트를 만들지 않고 이 룩을 그대로 쓴다. 상태는 button 이 aria-selected(JS), a 는 aria-current="page"(정적 - 현재 페이지). */ .section__toggle button, .section__toggle a, .tpl-bna__tabs button { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-content-body); font-weight: 400; color: var(--gray-dark); background: none; border: 0; white-space: nowrap; cursor: pointer; transition: color .2s; } .section__toggle button:hover, .section__toggle a:hover, .tpl-bna__tabs button:hover { color: var(--point); } /* 선택 상태 = 포인트 컬러 + 볼드. 상태를 담는 속성이 서로 다르다: 섹션 토글 = aria-selected(JS), 각도 선택기 = .is-on(JS), 링크 내비 = aria-current="page"(정적) */ .section__toggle button[aria-selected="true"], .section__toggle a[aria-current="page"], .tpl-bna__tabs button.is-on { color: var(--point); font-weight: 600; } /* ══════════ 섹션 골격 (전 페이지 · 전 섹션 공통, 예외 없음) ══════════ 섹션

→ 상단 마진 = --sec-gap └ 래퍼
→ 폭 (규칙 7) ├ 헤드 .tpl-head / .section__head → 헤더 + 하단 마진(--head-gap-body 80) │ ※ 제목 없는 섹션은 헤드 자체를 생략 ├ 선택 토글 .section__toggle → 있을 때만. 콘텐츠의 "머리". │ 하단 마진(--gap-toggle-body 50)로 콘텐츠에 붙는다 ├ 콘텐츠 → ★ 자기 위/아래 마진 없음 │ 내부 요소끼리만 마진으로 배치 └ CTA .section__foot → 있을 때만. 콘텐츠 ↔ CTA 간격 = 이 요소의 margin-top (.more-link 40 / .cta 80 - 유형이 값을 정한다) ★ 왜 강제하는가: 콘텐츠가 자기 마진을 들고 있으면 "본문이 끝나는 지점"이 헤드 마진·CTA 마진과 이중으로 겹쳐서 꼬인다(간격이 두 번 더해지거나, 박스 안에 죽은 공백이 남는다). 간격의 주인을 하나로 못박는다 → 위는 헤드, 아래는 CTA, 사이는 콘텐츠 내부. ★ 마진을 가질 수 있는 것은 헤드 · 토글 · CTA 3개뿐이다. 콘텐츠는 못 가진다. */ /* ══════════ 섹션 세로 리듬 - 간격은 이 블록이 전부 정한다 ══════════ ★ 모델 하나 : [간격은 언제나 "뒤 요소의 margin-top"] + [값은 "앞 요소가 무엇이냐"가 정한다] 그래서 케이스를 나눌 필요가 없다. 토글이 있든 없든, CTA 가 무엇이든 규칙 한 벌로 끝난다. 앞이 헤드 → 80 (--head-gap-body) 뒤가 토글이든 콘텐츠든 같다 앞이 선택 토글 → 50 (--gap-toggle-body) 뒤가 CTA → 40 (.more-link) / 80 (.cta) ← CTA 유형이 값을 정한다 그 외 (콘텐츠끼리) → 0 ★ 자기 마진을 갖는 요소가 없다 → 마진이 이중으로 겹치거나 상쇄될 일이 없다. ★ 새 슬롯이 생기면 "앞 요소 + *" 한 줄만 추가한다. */ /* (0) 래퍼 직계 자식은 자기 세로 마진을 갖지 않는다 - 간격의 주인은 아래 규칙뿐이다. ※ :is() 로 특이도(0,3,0)를 확보한다 - 안 그러면 컴포넌트 규칙(0,1,0)에 밀린다. */ :is(.tpl-sec, .section) > :is(.container, .container--full) > * { margin-block: 0; } /* (0-b) ★ 컨테이너 직계 이미지 = "통짜 1장" (요청 2026-07-14, svf-liposuction 검수) - width 속성이 컨테이너보다 작으면 **왼쪽으로 쏠린다** → margin-inline: auto 로 가운데 세운다. - 컨테이너를 꽉 채우면 도해가 지나치게 커 보인다 → 폭 상한을 둔다. (잘라내면 라벨이 사라지는 도해라 통짜를 유지하되, 크기만 줄인다) */ :is(.tpl-sec, .section) > :is(.container, .container--full) > img { margin-inline: auto; max-width: min(100%, var(--solo-img-max, 960px)); } /* 템플릿 뒤에 통짜 이미지가 이어지면 딱 붙는다(콘텐츠끼리는 0) → 숨을 준다 */ :is(.tpl-sec, .section) > :is(.container, .container--full) > * + img { margin-top: var(--sp-8); } /* 반대 방향도 같은 숨 - 통짜 이미지 뒤에 레일이 이어지는 경우 (2026-07-17, about 사회공헌) */ :is(.tpl-sec, .section) > :is(.container, .container--full) > img + .ub-rail { margin-top: var(--sp-8); } /* (요청 2026-07-17) 단, 앞이 캡션(CASE A · … )이면 얘기가 다르다 - 캡션은 그 이미지의 것이므로 붙어 있어야 한 덩어리로 읽힌다. 위 규칙(--sp-8 = 80)은 "남남인 템플릿과 이미지" 사이의 숨이라 캡션에 쓰면 제목만 붕 뜬다 → 캡션 ↔ 이미지는 15 로 붙인다. (해당 패턴은 CASE 캡션 전용이다 - forehead-lift 6 · lower-blepharoplasty 3) */ :is(.tpl-sec, .section) > :is(.container, .container--full) > .tpl-eyebrow + img { margin-top: var(--sp-3); /* (요청 2026-07-17) 케이스 사진도 사이트 표준 R 을 따른다 - 섹션 직속 img 에는 R 규칙이 없어 혼자 각진 모서리였다(다른 사진은 전부 --r-lg). */ border-radius: var(--r-lg); /* (요청 2026-07-17) 케이스 이미지는 원본 크기가 570~640 으로 제각각이라 케이스마다 폭이 달라 보인다 → 섹션에서 --case-img-w 를 주면 그 폭으로 통일된다. 기본값 auto = 원본 크기(기존 동작 그대로) - 값을 준 섹션만 바뀐다. */ width: var(--case-img-w, auto); } /* (요청 2026-07-17) 이미지 ↔ 다음 CASE 캡션은 "케이스와 케이스 사이"다 → 캡션 자신의 margin-top 을 키우면 케이스 묶음(캡션+이미지)이 통째로 떨어져 보인다. ★ :has(+ img) 가 핵심 - "앞도 이미지, 뒤도 이미지"인 캡션만 잡는다. 이게 없으면 이미지 뒤 주의문구(※ …)까지 같이 벌어진다(케이스 사이가 아니므로 대상이 아니다). ★ PC 만 50 이다(요청) - 모바일은 기본 간격(--sp-6)을 그대로 둔다. 좁은 화면에서는 케이스가 이미 세로로 길게 이어져 50 까지 벌릴 이유가 없다. */ @media (min-width: 992px) { :is(.tpl-sec, .section) > :is(.container, .container--full) > img + .tpl-eyebrow:has(+ img) { margin-top: 50px; } } /* (1) 앞이 헤드 → 80 */ :is(.tpl-sec, .section) > :is(.container, .container--full) > :is(.tpl-head, .section__head) + * { margin-top: var(--head-gap-body); } /* (2) 앞이 선택 토글 → 50 ※ .tpl-bna__tabs(카드 안 각도 선택기)는 래퍼 직계가 아니라 카드 안이지만 "토글 뒤는 50" 이라는 같은 리듬을 따른다 → 같은 줄에 얹는다. */ :is(.tpl-sec, .section) > :is(.container, .container--full) > .section__toggle + *, .tpl-bna__tabs + * { margin-top: var(--gap-toggle-body); } /* (3) 뒤가 CTA → 유형이 값을 정한다 (섹션이 제 값을 갖지 않는다) */ :is(.tpl-sec, .section) > :is(.container, .container--full) > .section__foot { margin-top: var(--gap-cta-more); } /* 더보기 링크 : 40 */ :is(.tpl-sec, .section) > :is(.container, .container--full) > .section__foot:has(.cta) { margin-top: var(--gap-cta-button); } /* 토글형 버튼 : 80 */ /* 섹션 보조 타이틀(영문 eyebrow) - 전 페이지 공통. 이름은 .tpl-eyebrow 하나다. 영문 대문자라 자간은 양수(+.08em)가 맞다(한글 제목의 음수 자간과 반대). (2026-07-12 별칭 .lp-eyebrow · .mi-eyebrow · .mi-rec-eyebrow 삭제 - 쓰는 페이지가 0 이 됐다) */ /* (요청 2026-07-12) 크기는 5스케일 최소값(caption 16)까지 낮추고, 굵기는 한 단계 올린다(500→600). 작지만 또렷하게 - H2 를 가리지 않으면서 섹션의 라벨 역할만 한다. */ .tpl-eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--point); text-align: center; line-height: 1.5; } /* ★★ 문장형 캡션·주의문구의 읽기 폭 (전역, 예외 없음) ───────────────────── 이 클래스들은 "라벨"이 아니라 "읽는 문장"이다. 폭을 안 막으면 컨테이너를 그대로 받아 와이드 화면에서 한 줄이 1,200~2,500px 까지 늘어진다 - 눈이 다음 줄 첫 글자를 못 찾는다. ⚠️ 특정 섹션에만 걸면 같은 문구가 다른 페이지에서 또 새어 나온다(실제로 consult-fast · real-model · articles-bna 가 그렇게 빠져 있었다). → 클래스 자체에 건다. 짧은 라벨(예: "RELATED TREATMENTS")은 700 보다 짧으므로 이 상한에 걸리지 않는다. */ .tpl-eyebrow, .bna-note, .counsel-note, .doctors__cert { max-width: var(--read-width); margin-inline: auto; } /* (요청 2026-07-14) 섹션 헤드 "밖"의 eyebrow = 템플릿 아래 붙는 캡션·주의문구다. 헤드의 라벨(빨강·대문자)과 성격이 다르다 → 연한 회색으로 낮추고, 본문에서 떼어 놓는다. 예) "※ 수술 전후 사진은 개인에 따라…", "지방 흡입 시 SVF와 AD-ECM을 동시에 추출해…" */ :is(.tpl-sec, .section) > :is(.container, .container--full) > .tpl-eyebrow { color: var(--gray-dark); text-transform: none; letter-spacing: normal; font-weight: 400; margin-top: var(--sp-6); } /* --- 서브페이지 공통: 상단 히어로 배너 (2개 이상 페이지 공유, 원본 sub 상단 배너) --- */ .sub-hero { position: relative; color: var(--dark); } /* 히어로 배너는 표준 1920×600(3.2:1)로 박스를 고정한다. 원본 파일이 다른 비율이어도 (예: nk-cell-iv 1672×941) object-fit:cover 로 크롭되어 모든 페이지 높이가 같아진다. */ .sub-hero__bg { display: block; width: 100%; aspect-ratio: 1920 / 600; height: auto; object-fit: cover; } /* ⚠️ 히어로 배너는 섹션 헤드가 아니다 - 전용 헤더다. 사진 위 왼쪽 빈 공간에 얹히는 "배너 카피"라 가운데 정렬하면 인물과 겹친다. → 섹션 헤드(.section__head / .tpl-head)와 섞지 않고 여기서 따로 정의한다. 페이지에 딱 하나뿐이고 다른 섹션과 공유하지 않으므로 예외를 두는 것이 맞다. (2026-07-12: 전 H2 통일 작업에서 이 자리만 원래 디자인으로 되돌렸다) */ /* 카피 시작선 = 섹션 콘텐츠 시작선 (2026-07-13). 히어로는 풀블리드라 .container 를 못 쓴다 → 같은 식을 좌표로 푼다: 가운데 정렬된 --container(1280) 의 좌측 여백 + .container 의 좌우 패딩(--sp-6). 1920 에서 (1920-1280)/2 + 40 = 360 → 아래 섹션들과 같은 x 에서 글자가 시작한다. 화면이 1280 이하로 좁아지면 clamp 하한(--sp-6)이 받아 .container 와 계속 붙어 간다. */ .sub-hero__text { position: absolute; top: 50%; transform: translateY(-50%); left: clamp(var(--sp-6), calc((100% - var(--container)) / 2 + var(--sp-6)), 50%); } .sub-hero__en { font-size: var(--fs-content-title); line-height: clamp(20px, 1.667vw, 32px); font-weight: 400; color: inherit; } .sub-hero :is(h1, h2) { font-size: var(--fs-h2title); line-height: clamp(37px, 3.108vw, 60px); letter-spacing: -.03em; font-weight: 600; color: inherit; text-align: left; margin-top: var(--sp-2); } /* 행간은 배수로 준다. 예전엔 29px 고정이라 폰트(clamp 15~20)가 줄어도 행간이 안 따라와 992~1400 구간에서만 비율이 1.93 까지 벌어졌다(PC 1.45 · 모바일 1.45 는 우연히 맞았다). */ .sub-hero :is(h1, h2) + p { font-size: var(--fs-content-body); line-height: var(--lh-tight); font-weight: 400; color: inherit; text-align: left; margin-top: var(--sp-2); } /* --- 모바일 배너 (2026-07-13) --- 원본 배너는 1920×600 이라 390px 폭에서 높이가 122px 로 줄어드는데, 카피는 172px 라 위아래로 삐져나와 sticky 헤더에 가려졌다. 또 PC 의 left(16.875vw)는 모바일에서 clamp 하한 201px 이 걸려 화면(390) 절반을 넘어가 카피가 우측으로 밀렸다. → 배너 높이를 카피가 들어갈 만큼 확보하고(cover), 인물이 있는 우측을 기준으로 크롭한다. 카피는 좌측 빈 배경 위로 되돌린다. */ /* --- 히어로 스크림 (2026-07-13) --- 배경 사진이 복잡한 페이지(svf-lab 등)는 카피가 사진에 묻혀 안 읽힌다. → 카피가 앉는 왼쪽에만 그라디언트를 깔고, 인물이 있는 오른쪽으로 갈수록 투명해진다. 스크림 색은 글자색을 따라간다. 사진 히어로 61개는 전부 어두운 글자라 흰색 하나면 된다 (흰 글자는 사진 없는 .sub-hero--plain 뿐이고 걔들은 스크림 대상이 아니다). 나중에 어두운 사진 위에 흰 글자를 쓰는 히어로가 생기면 --hero-scrim 만 var(--ink) 로 덮는다. ⚠️ 끝점을 `transparent` 로 두면 sRGB 보간에서 회색 띠가 생긴다 → color-mix(… 0%) 로 색상을 유지한 채 투명하게 만든다. 사진이 없는 .sub-hero--plain(컬러밴드)은 :has 로 제외된다. */ .sub-hero { --hero-scrim: var(--white); --hero-scrim-end: 62%; } .sub-hero:has(> .sub-hero__bg)::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--hero-scrim) 85%, transparent) 0%, color-mix(in srgb, var(--hero-scrim) 60%, transparent) calc(var(--hero-scrim-end) * .45), color-mix(in srgb, var(--hero-scrim) 0%, transparent) var(--hero-scrim-end)); } /* 줄간격(2026-07-13): 폰트는 clamp 로 줄어드는데(h2 48→24) line-height 는 PC 용 px 하한 (h2 37 · 본문 29)에 걸려 그대로 남아 배수가 1.25→1.54, 1.45→1.93 으로 벌어졌다. → 모바일에서는 PC 와 같은 "배수"로 고쳐 잡는다(px 하한을 쓰지 않는다). */ @media (max-width: 991.98px) { .sub-hero__bg { height: clamp(200px, 56vw, 260px); object-position: 78% center; } /* left 는 손대지 않는다 - 위 clamp 하한(--sp-6)이 곧 .container 의 모바일 좌우 여백이라 모바일에서도 카피가 아래 섹션과 같은 선에서 시작한다. */ .sub-hero__text { max-width: 62%; } /* 모바일은 카피가 화면 폭의 62% 를 쓰고 사진도 우측 크롭이라, 스크림을 더 오래 끌고 간다. */ .sub-hero { --hero-scrim-end: 88%; } /* ★ 모바일 히어로 타이포 (요청 2026-07-14) 히어로 h2 가 26/600 이라 바로 아래 섹션 H2(26/600)와 크기·굵기가 똑같았다. 배너 위 카피와 본문 제목이 같은 무게로 서니 화면이 산만하고 위계가 없다. → 히어로는 "작지만 굵게" 간다. 크기는 한 단계 내리고(26→18) 굵기는 올린다(600→700). 본문 H2(26/600)가 확실히 더 커서, 히어로가 덜 도드라지고 제목 자리를 내준다. 영문 en 도 18/400 이면 h2 와 같은 크기라 라벨로 안 읽힌다 → eyebrow 규격(14/600)으로. */ .sub-hero__en { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .08em; line-height: 1.1; } .sub-hero :is(h1, h2) { font-size: var(--fs-content-title); font-weight: 700; line-height: 1.25; margin-top: var(--sp-2); } /* 설명은 본문보다 한 단계 작게(15→14) - 카피 덩어리 전체를 가볍게 만든다 */ .sub-hero :is(h1, h2) + p { font-size: var(--fs-content-subtext); font-weight: 400; margin-top: var(--sp-3); } } /* 로컬 서브내비(.sub-nav) 제거: GNB 드롭다운과 중복 → 페이지 배너 밑 메뉴버튼 금지(규칙 0-8) */ /* --- 헤더 (원본: bg #fff, 로고 288/모바일243, depth1 17px fw300) --- */ .site-header { position: sticky; top: 0; z-index: 1000; background: var(--white); } /* (요청) 헤더 흰 영역 높이 98 → 78 (20px 축소) */ /* (요청 2026-07-14) 로고 파일이 길어(313×40) GNB 가 로고에 딱 붙었다(간격 0). 원본(phpnew3)은 로고 뒤 30px 를 비우고 GNB 를 시작한다 → 헤더 3요소(로고·GNB·유틸) 사이에 같은 간격을 준다. 간격의 주인은 헤더 한 곳이다. */ .site-header__inner { display: flex; align-items: center; column-gap: var(--sp-5); height: clamp(56px, 4.063vw, 78px); } .logo { flex: 0 0 auto; } .logo { line-height: 0; } /* (2026-07-14) 로고 = assets/img/layout/logo_wide.webp (1200×153 = 가로 7.84배). ⚠️ 앞서 쓰던 logo_new.webp(4726×1250)는 가로로 찌그러진 파일이었다(3.78배) → 폐기. 정상 원본은 phpnew2 의 9796×1250 이고, phpnew3/phpnew2 는 이걸 폭 288(모바일 243)로 쓴다. 크기의 주인은 "폭"이다: 288/1920 = 15vw · 높이는 비율대로 37. height 는 auto(이미지가 비율을 정한다). 모바일 하한 180px → 높이 23px 로 모바일 헤더(60px) 안에 수납된다. */ .logo img { width: clamp(180px, 15vw, 288px); height: auto; } @media (max-width: 991.98px) { /* (요청 2026-07-13) 모바일 헤더 좌우 여백 축소 : 25 → 15 (--sp-3). .container--wide 의 기본 여백(--sp-6)은 모바일에서 하한 25px 로 걸리는데, 390px 화면에서는 로고와 햄버거를 안쪽으로 너무 밀어 넣어 답답하다. ★ 헤더 바(로고 + 햄버거) 에만 적용한다 - 본문 .container 는 그대로다. */ .site-header__inner { height: 60px; padding-inline: var(--sp-3); } } /* 원본: GNB는 로고 옆(x360), 유틸이 우측 끝 - margin-left:auto 는 유틸에 */ /* (요청) GNB는 로고·아이콘 사이 남는 공간의 중앙 정렬 */ /* min-width:0 - GNB 가 유틸을 밀어내지 않게(가로 스크롤 방지) */ /* (요청) GNB 는 헤더 흰 영역 높이를 꽉 채운다(align-self: stretch). → 밑줄(::after, bottom:0)이 "헤더 흰 영역의 끝선"에 정확히 붙고, 드롭다운(top:100%)도 헤더 바로 아래에서 열린다. */ .gnb { display: flex; flex: 1; min-width: 0; justify-content: center; align-self: stretch; } .gnb__item { position: relative; display: flex; align-items: center; } /* (요청) depth1: 18px(--fs-nav, GNB 전용 예외 토큰) + 굵기 400. 자간 theline.kr 기준 -.05em */ .gnb__link { display: block; padding: var(--sp-1) var(--sp-4); font-size: var(--fs-nav); font-weight: 400; letter-spacing: -.05em; color: var(--ink); white-space: nowrap; transition: color .25s; } /* (요청) hover 시 depth1 글자색도 포인트 컬러(--point). 강조색(--accent) 아님 */ /* ⚠️ 열림 조건에 :focus-within 을 쓰지 않는다 (2026-07-17 버그 수정). 클릭도 포커스를 남기므로, 클릭한 메뉴의 패널이 열린 채 다른 메뉴에 hover 하면 패널이 2개 겹쳐 보였다. → :has(:focus-visible) 로 좁힌다. 키보드(Tab) 포커스에만 반응하고, 마우스 클릭 포커스는 무시한다. */ .gnb__item:hover > .gnb__link, .gnb__item:has(:focus-visible) > .gnb__link { color: var(--point); } /* 밑줄: 헤더 흰 영역 하단에 붙어 좌우로 펼쳐짐 (링크 좌우 패딩과 동일 폭) */ .gnb__item::after { content: ""; position: absolute; bottom: 0; left: 50%; right: 50%; height: 3px; background: var(--point); transition: left .25s, right .25s; } .gnb__item:hover::after, .gnb__item:has(:focus-visible)::after { left: var(--sp-4); right: var(--sp-4); } /* (요청) phpnew3 서브메뉴: wrap padding 22/30, 각 항목 padding 15px 0 (넉넉한 줄간격) */ .gnb__panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: max-content; background: var(--white); border-radius: 0 0 var(--r-sm) var(--r-sm); box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075); padding: var(--sp-4) var(--sp-5); display: grid; gap: 0; opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s; text-align: center; } .gnb__item:hover .gnb__panel, .gnb__item:has(:focus-visible) .gnb__panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* (2026-07-12) 마지막 항목("후기")만 우측 정렬하던 예외를 제거했다. GNB 폰트·간격을 줄이기 전에는 중앙정렬 시 패널이 뷰포트를 넘었지만, 지금은 후기 패널 우측 끝이 1544px(뷰포트 1920) 안쪽이라 넘치지 않는다. → 모든 항목이 링크 중심 기준 중앙정렬로 통일된다. */ /* (요청 2026-07-28) 브레이크포인트 1540 → 1200. Injectables 메뉴 숨김으로 GNB 가 10 → 9항목이 되어 필요 폭이 줄었다. (이전 1540 근거: 10항목 기준 마지막 항목과 아이콘 간격이 1460 에서 0 이 되는 실측) ★ 헤더만 넘긴다. 본문 반응형(991.98)은 건드리지 않는다. */ @media (max-width: 1199.98px) { .gnb.view-pc { display: none !important; } .hamburger.view-mobile { display: inline-flex !important; } } /* 헤더 CTA(상담예약)는 모바일 전용 - PC 는 하단 상담바가 그 역할을 한다 */ .header-cta { display: none; } /* --- 모바일 헤더 2단 구조 (991.98 이하 전용 · PC 영향 없음) --- 1단 = 로고 + 햄버거만 / 2단 = 간이 GNB 3개. .view-mobile 유틸은 display:revert !important 라 grid 를 덮으므로 쓰지 않고 .gnb-bar 가 자기 display 를 직접 제어한다. */ .gnb-bar { display: none; } @media (max-width: 991.98px) { /* 1단: 블로그·티스토리·언어를 숨겨 로고 + [상담예약] + 햄버거만 남긴다 */ .util-nav > .util-nav__link:not(.hamburger), .util-nav > .lang { display: none; } /* 하단 고정 상담바(입력폼)는 모바일에서 화면을 크게 잡아먹는다 → 숨기고, 그 역할을 헤더의 [상담예약] 버튼이 대신한다(같은 #counsel 로 보낸다). */ .consult-bar { display: none; } /* 헤더 CTA - 외곽선만(면 없음). 우측 여백은 .util-nav 의 gap 이 담당한다 → margin-right 를 따로 주면 간격이 두 번 더해져 햄버거가 밀린다. 좌측 여백만 준다. ★ 글자는 --fs-cta (14 / 600 / -.01em) - 버튼 라벨은 어디서나 한 벌이다. 예전엔 calc(--ui-text - 1px) / 700 이라 다른 버튼과 크기·굵기가 모두 튀었다. */ .header-cta { display: inline-flex; align-items: center; justify-content: center; margin-left: var(--sp-3); margin-right: 0; padding: var(--cta-pad-block) var(--cta-pad-inline); /* 모바일 토큰 = 5/15 */ /* 테두리는 border 가 아니라 inset box-shadow - border 는 박스를 1px 씩 키운다. 예전엔 여기만 border 라 본문 .cta(32px) 보다 2px 두꺼웠다(34px). */ box-shadow: inset 0 0 0 var(--hairline) var(--point); border-radius: var(--r-pill); color: var(--point); background: transparent; font-size: var(--fs-cta); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; } .header-cta:active { background: var(--point); color: var(--white); } /* (margin-left:auto 는 아래 기본 정의로 올렸다 - 992~1539 구간에서도 필요하다) */ .site-header__inner { border-bottom: var(--hairline) solid var(--gray-light); } .gnb-bar { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: var(--hairline) solid var(--gray-light); background: var(--white); } /* 높이는 패딩으로 정한다(하드코딩 금지) - caption + --sp-3 상하 = 약 46px 터치타겟 */ .gnb-bar a { display: flex; align-items: center; justify-content: center; padding-block: var(--sp-3); color: var(--ink); font-size: var(--fs-content-subtext); font-weight: 500; letter-spacing: -.03em; white-space: nowrap; transition: color .2s; } .gnb-bar a[aria-current="page"] { color: var(--point); font-weight: 600; } } /* (요청) 서브메뉴 색을 '약간 진한' 회색(--gray-2)으로 - 너무 연한 문제 해소 */ .gnb__panel a { font-size: var(--fs-content-subtext); font-weight: 400; color: var(--gray-dark); white-space: nowrap; transition: color .2s; padding: var(--sp-3) 0; line-height: 1.64; } .gnb__panel a:hover { color: var(--point); } /* 우측 유틸 (원본: blog/tstory 이미지 20px 원형, globe/user Phosphor 20px) - 세로 중앙 정렬, 간격 확대 */ /* (요청) 아이콘 20 → 22px, 아이콘 사이 간격 20 → 40px (--sp-4 → --sp-6) */ /* (요청 2026-07-14) 우측 아이콘 4개 사이 간격 40 → 30 (--sp-6 → --sp-5). 스케일 위의 값이라 임의 px 을 박지 않는다. ★ margin-left:auto 는 여기(기본 정의)에 둔다. PC 는 .gnb(flex:1) 가 유틸을 우측으로 밀지만, GNB 를 숨긴 992~1539 구간에는 미는 주체가 없어 아이콘이 로고 옆에 붙어 버린다. 모바일 전용으로 두면 그 중간 구간이 비어 있게 된다. (2026-07-14) */ .util-nav { display: flex; align-items: center; gap: var(--sp-5); flex: 0 0 auto; margin-left: auto; } /* ⚠️ 모바일 gap 은 반드시 "이 기본 정의 뒤"에 와야 한다. 미디어쿼리는 특이도를 올려주지 않으므로, 위쪽(539·601줄)에 써 두면 이 줄(--sp-6 = 25)이 소스 순서로 이겨서 죽은 규칙이 된다. 모바일 util-nav 에는 [상담예약]과 햄버거 둘뿐이라 좁혀도 안전하다. (2026-07-13) */ @media (max-width: 991.98px) { .util-nav { gap: var(--sp-2); } } /* 10 */ .util-nav__link { display: inline-flex; align-items: center; justify-content: center; height: 22px; line-height: 1; color: var(--ink); font-size: var(--ico-md); } .util-nav__img { width: 22px; height: 22px; border-radius: 50%; } /* padding:0 -