@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* 세리프 역할(숫자·인용·섹션 번호)은 웹폰트를 실제로 싣는다 — 안 실으면 기기에 있는 옛 명조로 떨어지고,
그 폰트가 없는 기기에서는 숫자만 라틴 세리프로 갈라져 한 줄 안에서 서체가 둘이 된다(실측으로 확인).
한글 세리프 = 마루 부리(네이버 · 무료 상업 이용 · 아래 @font-face). 웹폰트를 둘 걸어 두면
swap 대기 동안 폴백 웹폰트까지 내려받아 첫 방문에 두 벌이 다운로드된다(실측) — 그래서 하나만 싣는다. */
/* 배경 대형 워드마크·브랜드 레터링용 라틴 디스플레이 세리프 — 명조의 라틴 글자는 장식으로 쓰기엔 약하다. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap");
/* ── 마루 부리 (네이버 · 무료 상업 이용) ─────────────────────────────────────────
네이버가 주는 CSS 는 굵기를 패밀리 이름으로 나눠 준다(MaruBuriSemiBold …) —
그대로 쓰면 font-weight 가 먹지 않아 굵기를 못 바꾼다. 한 패밀리로 묶어 쓴다.
윈도우에서 얇아 보이는 것을 막으려고 본선 굵기는 600 이고, 13px 이하 작은 글씨에는 세리프를 쓰지 않는다.
배포 시에는 이 3개 woff2 를 내려받아 자체 호스팅한다(외부 CDN 의존 제거). */
@font-face{font-family:"MaruBuri"; font-style:normal; font-weight:400; font-display:swap;
src:url("https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2") format("woff2")}
@font-face{font-family:"MaruBuri"; font-style:normal; font-weight:600; font-display:swap;
src:url("https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2") format("woff2")}
@font-face{font-family:"MaruBuri"; font-style:normal; font-weight:700; font-display:swap;
src:url("https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2") format("woff2")}
/* ══════════════════════════════════════════════════════════
오브의원 · 필러&보톡스 상세페이지
색 2축: hue = 오브 로고 실측 H24.3° #725948 / 명도 = 레퍼 하이키 상속
설계 순서는 모바일 먼저, 데스크톱은 그 확장.
══════════════════════════════════════════════════════════ */
:root{
/* 색 — 역할 구조 */
--brand:#725948; /* 로고 실측색 · 헤더/버튼/강조 */
--brand-d:#4E3D31; /* 브랜드 어두운 단 */
--accent:#AD7A57; /* 로고 hue 24.3° 유지, 명도만 올림 */
--accent-w:#F3E7DC; /* 액센트 워시 */
--bg:#FFFFFF;
--soft:#F8F5F1;
--sand:#F0E9E1;
--dark:#2B221C; /* 어두운 색면 — 페이지에서 한 곳(11 mood)만 */
--ink:#241D18;
--body-c:#4E443D;
--muted:#77685E;
--line:#E6DCD1;
--line-s:#F0E9E1;
/* 타이포 — clamp 한 스케일 */
--f-body: clamp(1rem, 0.97rem + 0.16vw, 1.075rem); /* 16 → 17.2 */
--f-lead: clamp(1.0625rem, 1rem + 0.30vw, 1.25rem); /* 17 → 20 */
--f-h3: clamp(1.25rem, 1.13rem + 0.52vw, 1.5rem);
--f-h2: clamp(1.625rem, 1.28rem + 1.48vw, 2.75rem);
--f-h1: clamp(2.125rem, 1.62rem + 2.16vw, 3.75rem);
--f-cap: clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem); /* 13 → 14 */
--f-sub: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); /* 14 → 15 */
/* 리듬 */
/* 상한만 낮춘다 — 1440 에서 실제로 걸리는 항이 상한이라 여기가 효과 지점이다.
375 에서는 중간항(52.15px)이 이겨 모바일 리듬은 그대로 유지된다.
근거: 레퍼 antiaging 4장 1440 실측 경계 중앙값 100px, 우리는 184px(1.84배)였다. */
--sec-y: clamp(3.25rem, 1.9rem + 5.8vw, 4.125rem);
--wrap: 1200px;
--gut: clamp(1.125rem, 0.55rem + 2.45vw, 2.5rem);
/* 박스 규격 — 한 페이지 2종만 */
--r-card:3px;
--r-pill:999px;
--serif: "MaruBuri", "Nanum Myeongjo", "Apple SD Gothic Neo", Georgia, serif; /* 뒤는 로컬 폴백 — 다운로드되지 않는다 */
--display: "Cormorant Garamond", "MaruBuri", Georgia, serif; /* 라틴 장식 전용 */
--sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* 한국어 줄바꿈 — 이게 없으면 브라우저가 어절 한가운데를 자른다.
모바일 375px 에서 「고민에 따라, 들어오는 문이 다릅니 / 다」 처럼 났다(실측).
keep-all 은 어절 안에서 안 자르고, overflow-wrap 은 끊을 데가 없는 긴 문자열(메일·URL)만 예외로 자른다. */
body{word-break:keep-all; overflow-wrap:break-word}
body{
margin:0; background:var(--bg); color:var(--body-c);
font-family:var(--sans); font-size:var(--f-body); line-height:1.75;
letter-spacing:-0.01em;
overflow-x:hidden;
padding-bottom:66px; /* 하단 고정 CTA 자리 — 여기 한 곳에서만 준다 */
}
img,svg,video{max-width:100%; display:block}
img{height:auto}
a{color:inherit}
h1,h2,h3{margin:0; color:var(--ink); line-height:1.28; letter-spacing:-0.028em; font-weight:700}
p{margin:0}
ul,ol,dl,dd{margin:0; padding:0; list-style:none}
/* 는 UA 기본이 margin-inline:40px 다 — 안 지우면 도해가 컨테이너보다 80px 좁아지고,
SVG viewBox 스케일이 함께 줄어 라벨이 읽을 수 없는 크기가 된다(실측 339→259px). */
figure,blockquote{margin:0}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
/* ── 리빌 ────────────────────────────────────────────── */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.7,.3,1)}
[data-reveal].is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
[data-reveal]{opacity:1 !important; transform:none !important; transition:none}
}
/* ══ 장식 레이어 ═══════════════════════════════════════ */
.eyebrow{
font-size:var(--f-cap); letter-spacing:.22em; text-transform:uppercase;
color:var(--accent); font-weight:600; margin-bottom:.65rem;
}
.eyebrow--light{color:#E8D7C6}
.eyebrow--mt{margin-top:2.5rem}
.sec-num{
display:inline-flex; align-items:center; justify-content:center;
min-width:44px; height:26px; padding-inline:.4rem; margin-bottom:.9rem;
font-family:var(--serif); font-size:var(--f-sub); font-weight:700;
color:var(--accent); letter-spacing:.08em;
border:1px solid var(--line); border-radius:var(--r-pill);
}
/* 배경 대형 타이포 — 여백을 '설계된 여백'으로 */
.sec-bigtype{
position:absolute; left:-.04em; top:.35em; z-index:0; pointer-events:none;
font-family:var(--display); font-weight:600; letter-spacing:.01em;
font-size:clamp(4.5rem, 2rem + 12vw, 11rem); line-height:.8;
color:var(--sand); opacity:.55; white-space:nowrap;
}
.sec-bigtype--r{left:auto; right:-.04em}
/* 모바일에서는 섹션 위 여백이 52px 로 줄어 대형 타이포(27~89px)가 번호 배지(76~102px)를 뚫고 지나갔다.
배지는 테두리만 있고 배경이 없어서 글자가 배지 안으로 비쳤다 — 실측하고 위로 올린다. */
@media (max-width:760px){ .sec-bigtype{top:0} }
/* 제목 밑 이중 룰 — 렌즈형 끝단(로고 모티프) */
.rule2{display:flex; flex-direction:column; gap:4px; margin:1.15rem 0 1.35rem; width:74px}
.rule2 i{display:block; height:2px; background:var(--accent); border-radius:var(--r-pill)}
.rule2 i:last-child{width:34px; background:var(--line); height:2px}
/* ── 공통 타이포 ─────────────────────────────────────── */
.h2{font-size:var(--f-h2)}
.h3{font-size:var(--f-h3)}
.h3--mb{margin-bottom:1rem}
.lead{font-size:var(--f-lead); color:var(--body-c); margin-top:1rem; line-height:1.72}
.lead b{color:var(--ink); font-weight:700}
.body{margin-top:1rem; line-height:1.85}
.body b{color:var(--ink)}
.cap{font-size:var(--f-cap); color:var(--muted); margin-top:.7rem; line-height:1.62}
.cap--center{text-align:center; margin-top:1.7rem}
.txtlink{
display:inline-flex; align-items:center; min-height:44px; margin-top:.7rem;
color:var(--brand); font-weight:600; font-size:var(--f-sub);
border-bottom:1px solid var(--accent); text-decoration:none;
}
.ico{width:28px; height:28px; fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.ico--l{width:34px; height:34px}
.btn{
display:inline-flex; align-items:center; justify-content:center;
min-height:52px; padding:0 1.6rem; margin-top:1.4rem;
font-size:var(--f-sub); font-weight:600; text-decoration:none;
border-radius:var(--r-pill); transition:background .2s, color .2s;
}
.btn--line{border:1px solid var(--brand); color:var(--brand)}
.btn--line:hover{background:var(--brand); color:#fff}
.btn--solid{background:var(--brand); color:#fff; border:1px solid var(--brand)}
.btn--solid:hover{background:var(--brand-d)}
/* ── 섹션 뼈대 ───────────────────────────────────────── */
.sec{position:relative; padding-block:var(--sec-y); overflow:hidden}
.sec--soft{background:var(--soft)}
.sec--sand{background:var(--sand)}
.sec > .wrap{position:relative; z-index:1}
.shead{max-width:56ch}
.shead--center{max-width:60ch; margin-inline:auto; text-align:center}
.shead--center .rule2{margin-inline:auto}
.grid2{display:grid; gap:clamp(1.75rem, 1rem + 3.2vw, 3.5rem); align-items:start}
@media (min-width:900px){
.grid2{grid-template-columns:1fr 1fr; align-items:center}
.grid2--wide{grid-template-columns:1.05fr .95fr}
.grid2--flip .col:first-child{order:2}
.grid2--flip .col:last-child{order:1}
}
/* ══ 01 hero ═══════════════════════════════════════════ */
.hero{position:relative; min-height:clamp(460px, 62vh, 660px); display:flex; align-items:flex-start}
.hero__bg{position:absolute; inset:0; margin:0; background:var(--sand)}
.hero__img{width:100%; height:100%; object-fit:cover}
/* 한 장으로 두 비율을 만족시키지 않는다 — 모바일은 세로 컷을 따로 쓴다.
가로 컷을 세로 프레임에 cover 하면 좌우가 먼저 잘려, 비워 둔 여백이 살아남지 않는다. */
.hero__img--d{display:none; --phero-pos:72% 42%}
.hero__img--m{display:block; --phero-pos:50% 46%}
@media (min-width:760px){
.hero__img--d{display:block}
.hero__img--m{display:none}
}
.hero__layer{
position:relative; z-index:1; width:100%;
padding-top:clamp(6.5rem, 4rem + 11vw, 9rem);
padding-bottom:2.5rem;
/* 모바일 세로 컷은 인물 머리가 프레임의 40% 지점에서 시작한다(프롬프트로 그렇게 잡았다).
텍스트 블록은 그보다 길어 마지막 줄이 얼굴 위에 얹힌다 — 그 구간까지 그늘을 끌고 간다. */
/* 이미지를 하이키로 재생성한 뒤 이 값을 다시 잡았다 — 리드 영역 이미지 L 이 215.7 로 올라가
기존 알파(.66/.52/.34)로는 합성 배경이 L≈123 이 되어 흰 글씨 대비가 3.5:1 로 떨어졌다.
이미지를 바꾸면 그 위에 얹힌 그늘도 다시 재야 한다. */
background:linear-gradient(180deg, rgba(38,29,23,.80) 0%, rgba(38,29,23,.70) 44%, rgba(38,29,23,.44) 72%, rgba(38,29,23,0) 100%);
}
/* 데스크톱은 텍스트가 좌측에만 있다 — 세로 그늘은 가로 전체를 덮어 우측 인물을 죽인다.
방향을 가로로 돌리면 글자 뒤에만 그늘이 남고 인물은 그대로 보인다. */
@media (min-width:760px){
.hero__layer{
background:linear-gradient(90deg, rgba(38,29,23,.84) 0%, rgba(38,29,23,.72) 32%, rgba(38,29,23,.34) 52%, rgba(38,29,23,0) 66%);
}
}
.hero__h{font-size:var(--f-h1); color:#fff; letter-spacing:-.035em}
.hero__lead{
margin-top:1.05rem; color:#F3E9E0; font-size:var(--f-lead); line-height:1.7;
max-width:34ch; text-shadow:0 1px 12px rgba(30,22,16,.35);
}
.hero__crumb{margin-bottom:.55rem; font-size:var(--f-cap); color:#DCCBBB; letter-spacing:.02em}
/* ══ 02 spec ═══════════════════════════════════════════ */
.spec{background:var(--bg); padding-block:0}
.spec .wrap{position:relative; z-index:2}
.spec__list{
display:grid; grid-template-columns:1fr; gap:0;
margin-top:-2.25rem; background:#fff; border:1px solid var(--line);
border-radius:var(--r-card); box-shadow:0 14px 44px rgba(64,48,36,.09);
overflow:hidden;
}
.spec__list li{
display:flex; align-items:center; gap:.95rem;
padding:1.05rem var(--gut); border-bottom:1px solid var(--line-s);
}
.spec__list li:last-child{border-bottom:0}
.spec__k{font-size:var(--f-cap); color:var(--muted); min-width:5.5em}
.spec__v{margin-left:auto; color:var(--ink); font-size:var(--f-body); font-weight:700; font-family:var(--serif); letter-spacing:-.01em}
.spec__note{font-size:var(--f-cap); color:var(--muted); margin-top:.9rem; text-align:center}
@media (min-width:760px){
.spec__list{grid-template-columns:repeat(3,1fr); margin-top:-3rem}
.spec__list li{
flex-direction:column; align-items:flex-start; gap:.45rem;
padding:1.6rem 1.75rem; border-bottom:0; border-right:1px solid var(--line-s);
}
.spec__list li:last-child{border-right:0}
.spec__v{margin-left:0; font-size:var(--f-h3)}
}
/* ── 사진 프레임 — 세로 스타디움(로고 모티프) + 액센트 오프셋 ── */
.fig{position:relative; margin:0}
.fig img{width:100%}
.fig--stadium img{border-radius:var(--r-pill); aspect-ratio:3/4; object-fit:cover}
/* 오프셋 프레임 — 사진과 「같은 중심」의 동심 알약.
예전에는 top/left/right + aspect-ratio 로 대각선 오프셋을 줬는데,
알약(반지름=폭/2)을 대각선으로 밀면 위·아래 반원의 간격이 좌우와 달라져
테두리가 「틀어진」 것처럼 보인다 — 실제로 그렇게 보였다.
그래서 figure 를 그리드로 만들어 사진과 프레임을 같은 칸에 겹치고,
음수 마진으로 사방 12px 씩만 키운다. 알약끼리 반지름 차가 어디서나 12px = 완전히 평행.
figcaption 은 2행이라 프레임 안에 들어가지 않는다. */
.fig--stadium{display:grid; grid-template-rows:auto auto}
.fig--stadium > img{grid-area:1 / 1}
.fig--stadium .fig__frame{
grid-area:1 / 1; position:static; margin:-12px; align-self:stretch;
border:1px solid var(--accent); border-radius:var(--r-pill); opacity:.55; pointer-events:none;
}
.fig--stadium figcaption{grid-area:2 / 1; margin-top:1.15rem}
.fig--stadium img{position:relative; z-index:1}
/* 스튜디오 원본(2:3 · 무릎까지)을 3:4 알약에 넣으면 가운데 크롭은 머리 꼭대기(원본 12%)를 스친다.
위쪽을 보이게 당겨 머리 위 여백을 확보한다(실측: 12~88% → 6~82%). */
.fig--dr img{object-position:50% 25%; background:#fff}
/* ══ 05 two-axis ═══════════════════════════════════════ */
.axis{display:grid; gap:1.25rem; margin-top:clamp(1.9rem,1.2rem + 2.6vw,3rem)}
@media (min-width:820px){.axis{grid-template-columns:1fr 1fr; gap:1.75rem}}
.axis__card{
position:relative; padding:clamp(1.4rem,1rem + 1.6vw,2.1rem);
border:1px solid var(--line); border-radius:var(--r-card); background:#fff;
display:flex; flex-direction:column;
}
.axis__card--btx{background:var(--soft)}
.axis__tag{
display:inline-flex; align-items:center; align-self:flex-start;
height:26px; padding-inline:.8rem; margin-bottom:.9rem;
font-size:var(--f-cap); letter-spacing:.16em; text-transform:uppercase; font-weight:600;
color:#fff; background:var(--accent); border-radius:var(--r-pill);
}
.axis__card--btx .axis__tag{background:var(--brand)}
.axis__dia{width:100%; height:auto; margin:1.15rem 0 .35rem}
.dia-ln{fill:none; stroke:var(--line); stroke-width:2.5}
.dia-ln2{fill:none; stroke:var(--accent); stroke-width:2.5}
.dia-fill{fill:var(--accent-w); stroke:none}
.dia-ar path{fill:none; stroke:var(--brand); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.dia-t{fill:var(--muted); font-family:var(--sans); letter-spacing:.02em}
.axis__n{
margin-top:auto; padding-top:1.1rem; font-family:var(--serif);
font-size:var(--f-h3); color:var(--ink); font-weight:700;
}
.axis__n span{color:var(--accent)}
/* ══ 06 filler-depth — SVG 단면 도해 ══════════════════ */
.layers{width:100%; height:auto; border-radius:var(--r-card); overflow:visible; margin-top:1rem}
.ly1{fill:#FBF7F3}.ly2{fill:#F3E7DC}.ly3{fill:#EADCCC}.ly4{fill:#DCC7B2}.ly5{fill:#C9B098}
.lyline{stroke:#fff; stroke-width:1; opacity:.7}
.lyt{fill:var(--brand-d); font-family:var(--sans); font-weight:600}
.pin line{stroke:var(--brand); stroke-width:1.4; stroke-dasharray:3 3}
.pin circle{fill:var(--accent); stroke:#fff; stroke-width:2}
.pin--deep circle{fill:var(--brand)}
.pint{fill:var(--brand-d); font-family:var(--sans); font-weight:600; text-anchor:middle}
/* ══ 07 filler-area — 얼굴 도해 ═══════════════════════ */
.face{display:grid; gap:clamp(1.6rem,1rem + 2.4vw,2.75rem); margin-top:clamp(1.9rem,1.2rem + 2.6vw,3rem)}
@media (min-width:900px){.face{grid-template-columns:.85fr 1.15fr; align-items:center}}
.face__svg{width:100%; max-width:420px; margin-inline:auto; height:auto}
.fc{fill:none; stroke:var(--line); stroke-width:2; stroke-linecap:round}
.fc--face{fill:var(--soft)}
.pt circle{fill:var(--accent); stroke:#fff; stroke-width:2.5}
.pt text{
fill:#fff; font-family:var(--serif); font-weight:700;
text-anchor:middle; letter-spacing:.02em;
}
.face__list{display:grid; gap:.2rem}
.face__list li{
display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; align-items:baseline;
padding:.85rem 0; border-bottom:1px solid var(--line-s);
}
.face__list li:last-child{border-bottom:0}
.face__n{
font-family:var(--serif); font-size:var(--f-sub); font-weight:700;
color:var(--accent); grid-row:span 2;
}
.face__list b{color:var(--ink); font-size:var(--f-body)}
.face__list span:last-child{grid-column:2; font-size:var(--f-sub); color:var(--muted); line-height:1.6}
/* ══ 08 botox-mech — 영상 ═════════════════════════════ */
.sec--mech{background:var(--bg)}
.mech{margin:clamp(1.9rem,1.2rem + 2.6vw,3rem) 0 0}
.mech__box{
position:relative; border-radius:var(--r-card); overflow:hidden;
background:var(--sand); aspect-ratio:16/9;
}
.mech__v{width:100%; height:100%; object-fit:cover; display:block}
@media (prefers-reduced-motion:reduce){
.mech__v{display:none}
.mech__box{background:var(--sand) center/cover no-repeat}
}
/* ── SVG 애니 도해: 신호가 잦아들며 수축 폭이 완만해진다 ──
Veo 포토리얼 CGI 를 2회 만들어 이 자리에 넣어 봤다가 물렸다 —
확대된 신경 조직이 촉수·뿌리 다발로 읽혀 「보기 불편하다」. 미용의료에서는 특히 안 된다.
같은 내용을 도식적으로(납작하고 추상적으로) 그리면 거부감이 사라진다. */
.nmj{width:100%; height:100%; display:block}
.nmj-bg{fill:#FBF7F3}
.nmj-nerve path{fill:none; stroke:var(--brand); stroke-width:5; stroke-linecap:round}
.nmj-nerve circle{fill:var(--brand)}
.nmj-t{fill:var(--muted); font-family:var(--sans); font-weight:600}
.nmj-t--c{text-anchor:middle}
.nmj-t--r{text-anchor:end}
.nmj-lead{stroke:var(--line); stroke-width:1.2}
.nmj-gap line{stroke:var(--line); stroke-width:1.5; stroke-dasharray:5 5}
.fb{fill:none; stroke:#DCC7B2; stroke-width:9; stroke-linecap:round; transform-origin:center; transform-box:fill-box}
.sg{fill:var(--accent)}
.amp{fill:none; stroke:var(--accent); stroke-width:3.5; stroke-linecap:round}
/* 신호 알갱이: 틈을 건너간다 → 뒤로 갈수록 뜸해진다(opacity 키프레임) */
@keyframes sigcross{
0%{transform:translateX(0); opacity:0}
8%{opacity:1}
38%{transform:translateX(56px); opacity:1}
46%{transform:translateX(60px); opacity:0}
100%{transform:translateX(60px); opacity:0}
}
/* 수축: 초반엔 또렷하게, 후반엔 거의 잔잔하게 */
@keyframes twitch{
0%,100%{transform:scaleX(1)}
6%{transform:scaleX(.965)}
12%{transform:scaleX(1)}
30%{transform:scaleX(.978)}
36%{transform:scaleX(1)}
56%{transform:scaleX(.99)}
62%{transform:scaleX(1)}
80%{transform:scaleX(.997)}
}
/* 수축 폭 그래프: 파형이 납작해진다 */
@keyframes flatten{
0%,10%{transform:scaleY(1)}
55%{transform:scaleY(.5)}
85%,100%{transform:scaleY(.16)}
}
.sg{animation:sigcross 9s linear infinite}
.sg1{animation-delay:0s}
.sg2{animation-delay:1.5s}
.sg3{animation-delay:2.9s}
.sg4{animation-delay:4.6s}
.sg5{animation-delay:6.4s}
.fb{animation:twitch 9s ease-in-out infinite}
.fb2{animation-delay:.12s}.fb3{animation-delay:.05s}
.fb4{animation-delay:.18s}.fb5{animation-delay:.09s}.fb6{animation-delay:.15s}
.nmj-amp{animation:flatten 9s ease-in-out infinite; transform-origin:50% 412px}
.sg{opacity:0}
@media (prefers-reduced-motion:reduce){
.sg,.fb,.nmj-amp{animation:none}
/* 애니메이션을 끄면 keyframes 가 opacity 를 못 올린다 — 기본값(0)이 그대로 남아 알갱이가 사라진다.
뒤로 갈수록 뜸해지는 것을 정지 상태로 표현한다. */
.sg{opacity:1}
.sg4,.sg5{opacity:.35}
.nmj-amp{transform:scaleY(.4); transform-origin:50% 412px}
}
/* ══ 09 botox-area ════════════════════════════════════ */
.barea{display:grid; gap:clamp(1.5rem,1rem + 2vw,2.5rem); margin-top:clamp(1.9rem,1.2rem + 2.6vw,3rem)}
@media (min-width:900px){.barea{grid-template-columns:.9fr 1.1fr; align-items:start}}
.barea__lead{margin:0}
.barea__lead img{border-radius:var(--r-card); width:100%; aspect-ratio:4/3; object-fit:cover; object-position:60% 30%}
.barea__grid{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
@media (min-width:560px){.barea__grid{grid-template-columns:repeat(3,1fr)}}
.barea__grid li{
display:flex; flex-direction:column; gap:.35rem;
padding:1.05rem .9rem; background:#fff;
border:1px solid var(--line); border-radius:var(--r-card);
}
.sec--soft .barea__grid li{background:#fff}
.barea__grid b{color:var(--ink); font-size:var(--f-body); margin-top:.15rem}
.barea__grid span{font-size:var(--f-cap); color:var(--muted); line-height:1.55}
/* ══ 10 botox-types ═══════════════════════════════════ */
.types{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:clamp(1.9rem,1.2rem + 2.6vw,3rem)}
@media (min-width:600px){.types{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.types{grid-template-columns:repeat(4,1fr); gap:1.25rem}}
.types__c{
display:flex; flex-direction:column;
border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:#fff;
}
.types__c img{width:100%; aspect-ratio:16/9; object-fit:cover}
.types__c b{display:block; padding:1.05rem 1.1rem .35rem; color:var(--ink); font-size:var(--f-body)}
.types__c b i{font-style:normal; color:var(--muted); font-weight:500; font-size:var(--f-sub)}
.types__c span{padding:0 1.1rem 1.25rem; font-size:var(--f-sub); color:var(--muted); line-height:1.6}
/* ══ 11 mood — 페이지에서 유일한 어두운 색면 ══════════ */
.mood{position:relative; min-height:clamp(300px,44vh,430px); display:grid; place-items:center; background:var(--dark)}
.mood__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; opacity:.42}
/* ![]()
였던 자리를