/* fp.css — 1mmps 초안2 풀 페이지 템플릿 · 서브 시안(pc_sub/mo_sub) 디자인 시스템
   치수 규칙: 모든 길이는 보드 px × --u. ≤1279 = 모바일 보드(360, 기둥 최대 648px = 1.8배) · ≥1280 = PC 보드(1920, 최대 2496px = 1.3배).
   --u 는 .fp-page 폭(스크롤바 제외)에서 나온다(container query 단위). 미지원 브라우저는 100vw 로 대신한다.
   글자는 흐른다(절대좌표 없음). 색·크기 토큰은 .fp-page > * 에 있고 컴포넌트는 토큰만 쓴다.
   진입 모션 대상 목록(RV)은 fp.js 의 RV 와 같아야 한다. 컴포넌트 설명은 template/COMPONENTS.md. */
@property --u{syntax:'<length>';inherits:true;initial-value:1px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.fp{margin:0;background:#f2f2f4;color:#3a3a3a;-webkit-font-smoothing:antialiased;
font-family:Helvetica,'Helvetica Neue',Arial,'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif}

/* ── 기둥 · 토큰 ─────────────────────────────────────────── */
.fp-page{position:relative;max-width:648px;margin:0 auto;background:#fff;overflow:hidden;overflow:clip;
box-shadow:0 0 0 1px rgba(0,0,0,.06),0 6px 34px rgba(0,0,0,.09)}
.fp-page>*{--u:calc(min(100vw,648px)/360);
--col:calc(320*var(--u));--sec:calc(80*var(--u));--gap-head:calc(50*var(--u));--gap-block:calc(80*var(--u));
--fs-hero:calc(42*var(--u));--fs-hero-lead:calc(24*var(--u));--fs-tag:calc(18*var(--u));--fs-hash:calc(15*var(--u));--fs-h2:calc(32*var(--u));--fs-title:calc(32*var(--u));--fs-lead:calc(24*var(--u));--fs-h3:calc(24*var(--u));
--fs-body:calc(18*var(--u));--fs-cap:calc(15*var(--u));--fs-eyebrow:calc(24*var(--u));--fs-label:calc(20*var(--u));
--c-text:#3a3a3a;--c-sub:#6b6b6b;--c-light:#aaaaaa;--c-pink:#ffbade;--c-pink-bg:#ffe5f3;--c-em:#b8336f;--c-grey-bg:#f8f8f8;--c-dark:#3a3a3a;--c-div:#c8c8c8;
/* 옅은 구분선 `--c-line` — **2026-09-27 8단계 ② 가 쓰기만 하고 선언을 안 했다**(2026-09-28 8단계 ④ 가 닫았다.
   `medical-staff-introduction`·`notice` 조판 둘이 같은 버그로 올렸다). 값이 없는 커스텀 속성은 그 «선언»을 무효로 만들어
   `border-color` 가 초기값 `currentcolor`(= 글자색 #3a3a3a)로 떨어진다 → 16a 계약의 「ⓒ 위아래 선이 옅어진다」가
   **실제로는 한 번도 안 일어났다**(배포본 실측 1px solid rgb(58,58,58) ↔ 원문 2px solid rgba(0,0,0,.08)).
   값은 원문 그 색을 흰 바탕에 합성한 것이다 — rgba(0,0,0,.08) over #fff = rgb(235,235,235). `--c-div`(#c8c8c8)는
   「보이는 구분선」(푸터·표)이라 갈래가 다르다. */
--c-line:#ebebeb;
--hp-dark:0,0,0;--hp-sat:0,0,0;--hp-a:.40;--hp-aw:.50;--hp-sa:0;--hp-p1:#f5c3d9;--hp-p2:#f3b7d1;--hp-ink:#3a3a3a;--hp-chip:#3a3a3a;
font-size:var(--fs-body);line-height:1.3;letter-spacing:-.0175em}
@media (min-width:1280px){
.fp-page{max-width:2496px;box-shadow:none}
.fp-page>*{--u:calc(min(100vw,2496px)/1920);
--col:calc(1440*var(--u));--sec:calc(150*var(--u));--gap-head:calc(80*var(--u));--gap-block:calc(80*var(--u));
--fs-hero:calc(80*var(--u));--fs-hero-lead:calc(28*var(--u));--fs-tag:calc(20*var(--u));--fs-hash:calc(15*var(--u));--fs-h2:calc(50*var(--u));--fs-title:calc(50*var(--u));--fs-lead:calc(28*var(--u));--fs-h3:calc(28*var(--u));
--fs-body:max(14px,calc(20*var(--u)));--fs-cap:calc(15*var(--u));--fs-eyebrow:calc(28*var(--u));--fs-label:calc(20*var(--u))}
}
@supports (width:1cqw){
.fp-page{container-type:inline-size}
.fp-page>*{--u:calc(100cqw/360)}
@media (min-width:1280px){.fp-page>*{--u:calc(100cqw/1920)}}
}
/* 초기화는 :where 로(명시도 0) — 컴포넌트 규칙이 항상 이긴다 */
:where(.fp-page) :where(h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,address,dl,dd){margin:0;padding:0}
:where(.fp-page) *{letter-spacing:-.0175em}
:where(.fp-page) :where(ul,ol){list-style:none}
:where(.fp-page) address{font-style:normal}
:where(.fp-page) img{display:block;max-width:100%;height:auto}
/* ⚠ **`hidden` 속성이 `<img>` 에서 안 듣던 자리**(2026-09-28 9단계 ② 가 폼 첨부 썸네일에서 만났다) — UA 의 `[hidden]{display:none}` 은
   **작성자 규칙에 무조건 진다**(출처 우선순위). 그래서 위 `:where(...) img{display:block}` 이 특이도 0 인데도 이기고, `<img … hidden>` 이
   그대로 그려져 **verify ⑦ 의 「깨진 img」로 잡혔다**(`src` 가 없는 자리 표시용 썸네일 셋). 계약 9 는 「일부러 숨기는 것은 `hidden`」이므로
   **속성이 실제로 듣게** 한 줄 더한다. 배포본 47장에 `hidden` 을 단 요소는 **0개**라 이 줄로 바뀌는 화면이 없다(전수 grep). */
:where(.fp-page) img[hidden]{display:none}
:where(.fp-page) picture{display:block}
:where(.fp-page) a{color:inherit;text-decoration:none}
:where(.fp-page) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
:where(.fp-page) :where(h1,h2,h3){font-weight:700}
/* 기둥보다 긴 낱말(Injection/Removal 등)이 .fp-page overflow:clip 에 잘려 사라지지 않게 — 넘칠 때만 꺾인다. 사선(/) 뒤는 원문에 <wbr> */
:where(.fp-page) :where(h1,h2,h3,h4,p,li,figcaption,dt,dd,th,td,summary){overflow-wrap:break-word}
/* 형광 강조 — 원문 <strong> 은 굵게가 아니라 분홍 형광(시안 Rectangle #ffe5f3, 줄 높이의 아래 85%) */
/* **2026-10-02 사용자 「highlight 방식이 마음에 안 들어, 다른 방식으로」** — 형광 막대(분홍 띠 위에서는 흰 상자)를 버리고
   **글자색 `--c-em`(#b8336f) + 굵게**로 바꿨다. 바탕을 안 깔므로 흰·회색·분홍·연보라 어느 띠에서도 같은 모양이고
   대비는 흰 5.61 · #f8f8f8 5.29 · 분홍 띠 #ffe5f3 4.75 · 연보라 4.74 로 작은 글자 AA(4.5)를 다 넘는다.
   글꼴(Helvetica/Arial)은 600 이 없어 700 으로 그려진다 — 제목(700)에서는 굵기는 같고 색만 갈린다.
   옛 값: `font-weight:inherit;background:linear-gradient(transparent 15%,var(--c-pink-bg) 15%)`(fp.css.bak-1002-strong). */
:where(.fp-page main) strong,.fp-hl{font-weight:700;color:var(--c-em);background:none}
/* **분홍 띠 「위에 바로 놓인」 글의 형광만 흰색으로 뒤집는다** — 띠 바탕도 형광도 `--c-pink-bg` 라 ΔE 0 · 대비 1.00,
   즉 강조가 화면에서 통째로 사라진다(2026-09-23 5단계 검토가 men's-eye-surgery §6 에서 잡았다).
   `.fp-plus`(분홍 칸) · `.fp-duo` · `.fp-flow` 가 이미 같은 갈래를 뒤집어 두었는데 `strong` 에만 규칙이 없었다.
   흰 형광은 **대비 크기가 기본과 같다** — #fff ↔ #ffe5f3 은 어느 쪽이 바탕이어도 Δ(0,26,12) 다.
   ⚠ **「`.fp-sec--pink` 안의 strong」 으로 잡으면 안 된다.** 2026-09-23 배포본 전수 실측(`_scratch/leftovers5/strongbg.json`) —
   `.fp-sec--pink` 안 strong **42개 가운데 띠에 바로 놓인 것은 4개**뿐이고(incision-double-eyelid 의 「Q.」 셋 + men's §6 하나),
   나머지 38개는 **흰 `.fp-card` 19 · 먹 `.fp-badge` 12 · 흰 `li` 4 · 회색 `.fp-faq` 답 3** 위에 있다 —
   거기까지 뒤집으면 흰 카드 위에서 형광이 **새로 사라진다**(검토가 올린 「11장 42자리」는 grep 수였다).
   그래서 **띠에 바로 닿는 자리만** 적는다: 기둥의 **직계 글 블록**.
   ⚠ **`.fp-faq` 질문줄의 맨 `strong` 은 빼 둔다**(2026-09-23 회귀 실측으로 되돌렸다) — 배포본에서 그 자리에 걸리는 `strong` 은
   incision-double-eyelid 의 「Q.」 **셋뿐이고 그것은 강조가 아니라 말머리 라벨**이다. 뒤집으면 「Q.」 뒤에 **흰 상자**가 생겨
   승인된 1단계 화면이 까닭 없이 바뀐다(되돌린 뒤 19벌 0칸). 분홍 띠 질문줄에 **진짜 강조**가 필요하면 `.fp-hl` 을 쓴다 —
   그 이름은 아래 줄이 그대로 뒤집어 준다(`strong` 은 「굵게」라 말머리에도 쓰이지만 `.fp-hl` 은 **형광 전용**이라 뜻이 갈린다).
   ⚠ 형광을 끄는 규칙들(`.fp-plain`·`.fp-compare`·`.fp-badge`)이 그대로 이기도록 `:where()` 로 특이도를 (0,1,1) 에 맞추고 **그것들보다 앞**에 둔다. */
/* (2026-10-02) 위 「분홍 띠 위 형광을 흰색으로」 두 줄은 형광 바탕을 없애며 지웠다 — 글자색 강조는 분홍 띠에서도 대비 4.75 로 그대로 보인다. */
/* **먹 바탕 알약 안의 `<strong>`** — 형광(#ffe5f3)이 흰 글자 밑에 깔려 **대비 1.2:1**(2026-09-24 7단계 Ulthera 실측)이라
   원문이 색으로 갈라 둔 꼬리가 우리 화면에서 통째로 사라진다. 위 「분홍 띠 위 형광을 흰색으로」와 **같은 갈래**이고,
   먹 바탕에서는 뒤집을 흰색이 없으므로 **형광을 끄고 글자색을 분홍으로** 바꾼다(알약 자신의 `color:#fff` ↔ 분홍 = 대비 4.4).
   배포본에서 `.fp-eyebrow--pill` 안에 `<strong>` 을 담은 장은 **7단계 Ulthera·shrink 둘뿐**이라(전수 grep) 지난 단계 화면은 안 바뀐다.
   ⚠ `.fp-plain strong`(형광 끄기)보다 **앞**에 둔다 — 조판이 `.fp-plain` 으로 끄기를 고르면 그쪽이 이겨야 한다. */
.fp-eyebrow--pill strong{background:none;color:var(--c-pink)}
.fp-plain strong{background:none;color:inherit;font-weight:inherit}
.fp-muted{color:var(--c-sub)}
.fp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:1279px){.fp-only-pc{display:none!important}}
@media (min-width:1280px){.fp-only-mo{display:none!important}}
.fp-page :focus-visible{outline:2px solid var(--c-pink);outline-offset:3px}

/* ── 헤더(히어로 위에 얹힘) · 메뉴판 ─────────────────────────── */
.fp-header{position:absolute;left:0;right:0;top:0;z-index:30;height:calc(60*var(--u));
background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.15) 25%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 75%,rgba(0,0,0,0) 100%)}
.fp-burger{position:absolute;left:calc(20*var(--u));top:calc(18*var(--u));width:calc(24*var(--u));height:calc(24*var(--u))}
.fp-burger span{position:absolute;left:0;width:100%;height:calc(2*var(--u));background:#fff}
.fp-burger span:nth-child(1){top:calc(4*var(--u))}.fp-burger span:nth-child(2){top:calc(11*var(--u))}.fp-burger span:nth-child(3){top:calc(18*var(--u))}
.fp-logo{position:absolute;left:50%;top:calc(16*var(--u));width:calc(115*var(--u));height:calc(28*var(--u));transform:translateX(-50%)}
.fp-logo img{width:100%;height:100%}
/* 언어 선택 — 2026-09-29 사용자 「국가 표시 수정 — 둥근 국기 줄처럼」(사이트 11개 언어) + 「PC 는 좋은데 모바일은 drop down」.
   ≤1279: 이 칩이 펼침 목록(<details>) — 지금 국기(둥근) + 꺾쇠, 누르면 국기 + 이름 11줄. ≥1280: 칩을 숨기고 `.fp-lang-row`(알약 안 국기 11개 한 줄).
   링크는 build.py 가 원문 lang10sw 에서 채운다(`{{LANG_ROW}}`·`{{LANG_ITEMS}}`, draft2-build/langflags.py). 국기 = circle-flags(MIT).
   칩 이름을 `.fp-lang` 그대로 둔 것은 아래 밝은 판 규칙(바탕·꺾쇠 먹)이 그대로 듣게 하려는 것 — 한 줄 알약 바탕도 같은 규칙에 같이 적었다. */
.fp-lang{position:absolute;right:calc(20*var(--u));top:calc(18*var(--u));width:calc(60*var(--u));height:calc(24*var(--u));margin:0;border-radius:calc(12*var(--u));background:rgba(255,255,255,.2)}
.fp-lang>summary{display:block;width:100%;height:100%;list-style:none;cursor:pointer}
.fp-lang>summary::-webkit-details-marker{display:none}
.fp-lang .lf-cur{position:absolute;left:calc(12*var(--u));top:calc(4*var(--u));width:calc(16*var(--u));height:calc(16*var(--u));border-radius:50%}
.fp-lang svg{position:absolute;left:calc(38*var(--u));top:calc(9*var(--u));width:calc(12*var(--u));height:calc(6*var(--u));overflow:visible}
.fp-lang .lf-cur,.fp-lang-row img{box-shadow:0 0 0 calc(1.5*var(--u)) #fff,0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.25)}
.fp-lang .lf-list{position:absolute;right:0;top:calc(100% + 6*var(--u));min-width:calc(150*var(--u));padding:calc(6*var(--u));display:flex;flex-direction:column;
background:#fff;border-radius:calc(10*var(--u));box-shadow:0 calc(8*var(--u)) calc(28*var(--u)) rgba(0,0,0,.22)}
.fp-lang .lf-list a{display:flex;align-items:center;gap:calc(9*var(--u));padding:calc(6*var(--u)) calc(8*var(--u));border-radius:calc(6*var(--u));
color:#3a3a3a;text-decoration:none;font-size:calc(12*var(--u));line-height:1.2;white-space:nowrap}
.fp-lang .lf-list a:hover{background:#f6eef2}.fp-lang .lf-list a[aria-current]{font-weight:700}
.fp-lang .lf-list img{display:block;width:calc(18*var(--u));height:calc(18*var(--u));border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.fp-lang-row{display:none;position:absolute;right:calc(80*var(--u));top:calc(24*var(--u));height:calc(40*var(--u));padding:0 calc(12*var(--u));gap:calc(8*var(--u));
align-items:center;border-radius:calc(20*var(--u));background:rgba(255,255,255,.2)}
.fp-lang-row a{display:block;line-height:0;border-radius:50%;transition:transform .15s}
.fp-lang-row a:hover,.fp-lang-row a:focus-visible{transform:translateY(-1px) scale(1.1)}
.fp-lang-row img{display:block;width:calc(22*var(--u));height:calc(22*var(--u));border-radius:50%}
/* ── 밝은 색 판 위의 헤더 ──────────────────────────────────────
   히어로가 **밝은 색 판**이면(D 전면 · A/B 의 --panel) 흰 로고·햄버거·화살표가 판 위에서 통째로 사라진다.
   2026-09-18 실측: D(slate)에서 로고의 'Plastic Surgery' 와 햄버거가 안 보이고, 헤더 자신의 검정 그라데이션(위 .2)이
   밝은 판 위에 회색 띠로 남았다. 헤더는 히어로 **밖**(main 밖)이라 히어로 변형을 `:has()` 로 본다(이미 쓰는 선택자다).
   먹 판(charcoal)은 판이 어둡고 --hp-ink 가 흰색이라 **그대로 흰 헤더**다 → :not() 으로 뺀다.
   로고는 filter 로 물들이지 않는다(분홍 마크까지 같이 죽는다) — 글자만 먹으로 바꾼 `logo-dark.svg` 로 갈아 끼운다. */
body:has(.fp-hero--d:not([data-palette="charcoal"])) .fp-header{background:none}
body:has(.fp-hero--d:not([data-palette="charcoal"])) .fp-logo img{content:url(https://channel-static.rebeauty.co.kr/1mmps/draft2/_fp/a/logo-dark.f9827a87.svg)}
body:has(.fp-hero--d:not([data-palette="charcoal"])) .fp-burger span{background:var(--c-dark)}
body:has(.fp-hero--d:not([data-palette="charcoal"])) .fp-lang,body:has(.fp-hero--d:not([data-palette="charcoal"])) .fp-lang-row{background:rgba(58,58,58,.10)}
body:has(.fp-hero--d:not([data-palette="charcoal"])) .fp-lang svg path{fill:#3a3a3a}
/* 판이 **반대쪽**이라 위 규칙들이 못 미치는 자리는 페이지가 `body_class` 로 켠다 — A + `--panel` 은 로고·언어만 먹으로 바뀌고
   햄버거는 사진 위에 흰색으로 남는데, 그 자리가 밝은 사진이면 안 보인다(2026-09-23 endoscopic-forehead-lift 2차 검토).
   「그 자리가 밝은 사진이면 그 페이지에서 눈으로 본다」를 적어 두고도 **고칠 수단이 없던 것**을 메운다. 안 켜면 안 바뀐다. */
body.fp-burger-dark .fp-burger span{background:var(--c-dark)}
/* **보드를 가르는 짝** `fp-burger-dark-mo`(2026-09-24 7단계 ② 신설) — 위 규칙은 `@media` **밖**이라 켜면 PC 까지 먹이 된다.
   ≤1279 히어로 위쪽은 밝은데 ≥1280 은 어두운 페이지가 있다(`fat-grafting-above-the-eyes`: 390 흰 막대 **1.80** ↔ PC 배경 rgb(35,35,35) 위 흰 막대 **15.72**.
   `fp-burger-dark` 를 켜면 PC 가 **1.38** 로 떨어져 6단계 ② 가 이 한 장만 못 켜고 넘겼다). 이름을 `-mo` 로 가른 것은
   「@media 안팎 두 군데면 이름도 둘」 규칙 그대로다. **기본값이 없어 안 켠 페이지는 한 픽셀도 안 바뀐다.** */
@media (max-width:1279px){body.fp-burger-dark-mo .fp-burger span{background:var(--c-dark)}}
/* **PC 쪽 짝** `fp-burger-dark-pc`(2026-09-24 7단계 ④) — 레이아웃 **C**(사진 전면)는 헤더가 흰색 그대로인데 히어로 PC 컷의 왼쪽 위가 밝으면
   흰 막대가 **1280 1.49 · 1440·1920 1.58**(비텍스트 3:1 미달)이 된다(7단계 Ulthera 실측). 같은 장의 **390 은 13.84** 라
   `@media` 밖인 `fp-burger-dark` 를 켜면 모바일이 되레 무너진다 → `-mo` 의 거울짝이다. **셋을 같이 켜지 않는다**(`fp-burger-dark` 하나면 두 보드 다 먹이다). */
@media (min-width:1280px){body.fp-burger-dark-pc .fp-burger span{background:var(--c-dark)}}
/* **로고·언어 칩까지 먹으로** `fp-header-dark-mo`(≤1279 전용, 2026-09-24 7단계 ④) — 위 `fp-burger-dark-mo` 는 **막대만** 바꾼다.
   A/B + `--panel` 은 ≤1279 에서 히어로 **사진 판이 위**라, 그 사진 윗부분이 밝으면 로고 워드마크와 언어 칩 꺾쇠가 흰색으로 남아 안 보인다
   (2026-09-24 실측 390 — shrink 로고 **2.06** · 꺾쇠 **2.11** ↔ 같은 자리 막대는 `-mo` 로 이미 5.24.
   **1280 에서는 아래 PC 규칙이 먹 로고로 갈아 끼워 6.30** 이라 경계 한 칸에서 값이 갈린다 = 모바일에만 규칙이 없었다).
   PC 규칙(`body:has(.fp-hero--panel…)`)과 **같은 세 줄**을 ≤1279 에 여는 것이라 두 보드의 화면이 같아진다. 안 켜면 한 픽셀도 안 바뀐다. */
@media (max-width:1279px){
body.fp-header-dark-mo .fp-logo img{content:url(https://channel-static.rebeauty.co.kr/1mmps/draft2/_fp/a/logo-dark.f9827a87.svg)}
body.fp-header-dark-mo .fp-lang{background:rgba(58,58,58,.10)}
body.fp-header-dark-mo .fp-lang svg path{fill:#3a3a3a}
}
/* **언어 칩만** 먹으로 `fp-lang-dark-mo`(≤1279) · `fp-lang-dark-pc`(≥1280) — 2026-09-28 8단계 ④.
   `fp-burger-dark[-mo|-pc]` 가 **막대만** 가르듯 칩(바탕 + 꺾쇠 svg)만 가른다. 있는 손잡이로는 못 고치던 자리다:
   `fp-header-dark-mo` 는 **로고·칩을 묶어서** 바꾸는데, 이 컷들은 로고가 머리카락 위(흰 워드마크 5.91~15.74)라
   켜면 로고가 1.10~1.55 로 되레 무너진다. PC 쪽은 `body:has(.fp-hero--panel…)` 규칙이 `--b` 와 charcoal 을 두 번 막아
   판이 왼쪽인 배치에서 오른쪽 칩이 사진 위 흰색으로 남는다.
   ⚠ **한 장짜리 결함이 아니었다** — 배포본 15장을 두 폭에서 실측하니 1440 12/15 · 390 12/15 가 3:1 미만이다
   (press-release 1.28 · Ulthera 1.28 · SMAS-facelift 1.30 · blog 1.32 · eye-correction 1.41 · interior 1.50 · they-swear 1.42 …).
   3:1 을 넘는 셋은 medical-staff-introduction 5.22/5.03 · notice 3.83/3.80 · why-1mm 1440 3.63 뿐이다.
   이번 회차는 **8단계 장만** 켜고 지난 단계(승인 화면 둘 포함)는 숙제로 넘긴다 — 켜면 화면이 바뀌기 때문이다.
   ⚠ 칩은 `aria-hidden="true"` 에 링크·핸들러가 0인 순수 장식이라 WCAG 1.4.11 위반은 아니다. 「안 보인다」가 문제다.
   값은 이미 있는 `fp-header-dark-mo` 의 **두 줄과 같고** 로고 줄만 뺐다. 안 켜면 한 픽셀도 안 바뀐다.
   이름이 둘인 것은 규칙이 `@media` 안팎 두 군데라서다(런북 「@media 안팎 두 군데면 이름도 둘」). */
@media (max-width:1279px){
body.fp-lang-dark-mo .fp-lang{background:rgba(58,58,58,.10)}
body.fp-lang-dark-mo .fp-lang svg path{fill:#3a3a3a}
}
@media (min-width:1280px){
body.fp-lang-dark-pc .fp-lang,body.fp-lang-dark-pc .fp-lang-row{background:rgba(58,58,58,.10)}
body.fp-lang-dark-pc .fp-lang svg path{fill:#3a3a3a}
}
@media (min-width:1280px){
.fp-header{height:calc(88*var(--u))}
.fp-burger{left:calc(80*var(--u));top:calc(28*var(--u));width:calc(32*var(--u));height:calc(32*var(--u))}
.fp-burger span:nth-child(1){top:calc(6*var(--u))}.fp-burger span:nth-child(2){top:calc(15*var(--u))}.fp-burger span:nth-child(3){top:calc(24*var(--u))}
.fp-logo{top:calc(22*var(--u));width:calc(178*var(--u));height:calc(44*var(--u))}
.fp-lang{display:none}
.fp-lang-row{display:flex}
/* --panel 은 판이 **절반**이다 — 판이 걸린 쪽 요소만 먹으로. A 는 오른쪽(로고·언어), B 는 왼쪽(로고·햄버거).
   반대쪽은 사진 위라 흰색 그대로 두고, 그 자리가 밝은 사진이면 그 페이지에서 눈으로 본다(판은 페이지가 골라 켜는 것이다). */
body:has(.fp-hero--panel:not([data-palette="charcoal"])) .fp-logo img{content:url(https://channel-static.rebeauty.co.kr/1mmps/draft2/_fp/a/logo-dark.f9827a87.svg)}
body:has(.fp-hero--panel:not(.fp-hero--b):not([data-palette="charcoal"])) .fp-lang,body:has(.fp-hero--panel:not(.fp-hero--b):not([data-palette="charcoal"])) .fp-lang-row{background:rgba(58,58,58,.10)}
body:has(.fp-hero--panel:not(.fp-hero--b):not([data-palette="charcoal"])) .fp-lang svg path{fill:#3a3a3a}
body:has(.fp-hero--b.fp-hero--panel:not([data-palette="charcoal"])) .fp-burger span{background:var(--c-dark)}
}
#fmenu{position:fixed;inset:0;z-index:2147483100;background:rgba(0,0,0,.45);display:none}
#fmenu.on{display:block}
#fmenu iframe{display:block;width:100%;height:100%;border:0;background:transparent}

/* ── 섹션 · 기둥 · 제목 ─────────────────────────────────────── */
.fp-sec{padding-block:var(--sec)}
.fp-sec--grey{background:var(--c-grey-bg)}
.fp-sec--pink{background:var(--c-pink-bg);padding-top:calc(57*var(--u))}   /* 시안 모바일: 띠 위 57 · 아래 80 */
.fp-sec--flush{padding-block:0}
.fp-sec:not(.fp-sec--grey,.fp-sec--pink,.fp-sec--flush)+.fp-sec:not(.fp-sec--grey,.fp-sec--pink,.fp-sec--flush){padding-top:0}
.fp-wrap{width:var(--col);margin-inline:auto}
.fp-wrap>*+*{margin-top:var(--gap-block)}
.fp-wrap>.fp-head+*{margin-top:var(--gap-head)}
.fp-wrap>.fp-far{margin-top:var(--sec)}
.fp-head{text-align:center}
.fp-h2{font-size:var(--fs-h2);line-height:1.2}
.fp-lead{margin-top:calc(16*var(--u));font-size:var(--fs-lead)}
/* 글자색 손잡이 `--fp-eyebrow-c`(기본값이 지금 값 `--c-sub`, 2026-09-28 8단계 ④ medical-staff-introduction 네 칸) —
   원문 눈썹줄이 올리브 `#acc561` 인 자리가 있는데 색이 상수라 계통 회색으로 섰다. 같은 올리브를 학술 캡션 둘째 줄에서는
   `--fp-cap2-c` 로 이미 살리고 있어 **한 페이지 안에서 같은 원문 색이 한 곳만 회색**이 됐다. `--fp-eyebrow-fs`/`-p` 와 같은 이름꼴. */
.fp-eyebrow{font-size:var(--fs-eyebrow);line-height:1.2;font-weight:700;color:var(--fp-eyebrow-c,var(--c-sub))}
.fp-eyebrow+.fp-h2,.fp-eyebrow+.fp-title{margin-top:calc(16*var(--u))}
.fp-title{font-size:var(--fs-title);line-height:1.3}
.fp-body{font-size:var(--fs-body)}
.fp-body+.fp-body{margin-top:1.3em}
.fp-cap{font-size:max(12px,var(--fs-cap))}
.fp-body--center{text-align:center}   /* 가운데 정렬 섹션 뒤에 붙는 짧은 보조 문단(원문이 가운데 작은 글씨일 때) */
.fp-eyebrow--sentence{font-weight:400;font-size:var(--fs-lead)}   /* eyebrow 자리에 문장이 올 때 — 굵은 24u 4줄이 h2 보다 무거웠다 */
/* 어두운 알약 라벨 — 원문이 구간 라벨을 검은 알약(흰 글자)으로 쓴 자리. 작은 회색 eyebrow 로만 담으면 원본보다 훨씬 약하다.
   `.fp-badge` 는 검은 정사각(Check 01 자리) · `.fp-points__tab` 은 패널에 걸치는 탭이라 둘 다 이 자리가 아니다 */
/* 글자·여백 손잡이 `--fp-eyebrow-fs`/`--fp-eyebrow-p`(기본값이 지금 값, 2026-09-23 신설) — 알약 글자가 `--fs-eyebrow` 상수라
   원본에 맞출 길이 없었다(5단계 male-rhinoplasty §6: 원본 1440 403x85 · 28px · 두 줄 ↔ 우리 386.5x40.2 · 21px · 한 줄 = 75%).
   인라인은 `--fp-*` 만 받으므로(verify ⑩) 페이지가 `--fs-eyebrow` 를 못 준다.
   ⚠ 이름에 `--fp-pill-*` 를 쓰지 않는다 — `.fp-hex__label`(도해 라벨 알약)이 이미 `--fp-pill-bg`/`--fp-pill-c` 를 쓰고
   그 값은 `.fp-dgm` 루트에서 상속되므로, 같은 도해 안에 `.fp-eyebrow--pill` 이 있으면 **한 이름이 두 컴포넌트**가 된다
   (2026-09-23 male-rhinoplasty §6 이 실제로 `.fp-duo.fp-dgm` 안에 알약을 담고 있다). `--fp-duo-desc-fs` 를 가른 것과 같은 까닭이다.
   ⚠ `.fp-check` 와 마찬가지로 PC 규칙이 따로 없다 → 이름이 하나이고 페이지가 두 보드를 `min()/max()` 로 같이 적는다. */
.fp-eyebrow--pill{display:inline-block;padding:var(--fp-eyebrow-p,calc(10*var(--u)) calc(28*var(--u)));border-radius:999px;
background:var(--c-dark);color:#fff;font-size:var(--fp-eyebrow-fs,var(--fs-eyebrow))}
/* 문장 중간 강조(원문 <em> — Lottie 동그라미·밑줄). <strong> 형광과 겹치지 않게 밑줄 */
.fp-em{font-style:normal;font-weight:inherit;background:linear-gradient(transparent 82%,var(--c-pink) 82%);
-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 광고비 고지문·캡션·해시태그는 보드 배율을 따르되 12px 아래로 줄이지 않는다(1280 폭에서 10px 였다 — 규칙 4 "화면에 보이게") */
.fp-note{margin-top:calc(30*var(--u));font-size:var(--fp-note-fs,max(12px,var(--fs-cap)));color:var(--c-sub);text-align:center}
.fp-rule{display:block;width:calc(113*var(--u));height:1px;margin:calc(20*var(--u)) auto 0;border:0;background:var(--c-dark)}
@media (min-width:1280px){
.fp-head{text-align:left}
.fp-head--center{text-align:center}
.fp-lead{margin-top:calc(20*var(--u))}
.fp-eyebrow+.fp-h2,.fp-eyebrow+.fp-title{margin-top:calc(20*var(--u))}
.fp-note{text-align:left}
.fp-rule{margin:calc(30*var(--u)) 0 0}
.fp-sec--pink{padding-top:var(--sec);padding-bottom:calc(172*var(--u))}   /* 시안 PC: 띠 위 150 · 아래 172 */
}

/* ── 히어로·Who 팔레트 (hero/LAYOUTS.md 2절 · 사용자 피드백 1·4) ───────────────
   막을 두 겹으로 쪼갠다: 휘도를 내리는 **짙은 판**(--hp-dark, α --hp-a) + 색을 주는 **채도층**(--hp-sat, α --hp-sa).
   단층 틴트는 어느 색을 써도 회색으로 수렴한다(LAYOUTS 2절 실측).
   **고르는 법은 `data-palette` 속성 하나**다 — 인라인 style 은 verify ⑩ 이 `--fp-*`·--w/--cols/--trim/--fill 만 받는다.
   속성을 안 주면 아래 기본값(중성 검정 --hp-sa:0)이라 **지금 화면과 픽셀까지 같다**(α 0 인 층은 합성에 아무 일도 하지 않는다).
   밝은 컷(글자 자리 휘도 p50 > 0.75 — p23·p11/p22·p21·p26)은 `data-tone="bright"` 를 같이 준다(LAYOUTS 2.1 표). */
[data-palette="rose"]{--hp-aw:var(--hp-a);--hp-dark:40,12,26;--hp-sat:216,85,143;--hp-a:.50;--hp-sa:.26;--hp-p1:#f7dbe8;--hp-p2:#f0bfd7;--hp-ink:#3a3a3a;--hp-chip:#d8558f}
[data-palette="slate"]{--hp-aw:var(--hp-a);--hp-dark:6,24,32;--hp-sat:45,140,165;--hp-a:.51;--hp-sa:.26;--hp-p1:#e3ebed;--hp-p2:#c6d3d5;--hp-ink:#3a3a3a;--hp-chip:#3d707e}
[data-palette="lavender"]{--hp-aw:var(--hp-a);--hp-dark:22,18,44;--hp-sat:120,105,210;--hp-a:.50;--hp-sa:.26;--hp-p1:#e9e8f4;--hp-p2:#d3d6e4;--hp-ink:#3a3a3a;--hp-chip:#5a5391}
[data-palette="cream"]{--hp-aw:var(--hp-a);--hp-dark:38,26,14;--hp-sat:196,140,70;--hp-a:.53;--hp-sa:.26;--hp-p1:#f5efe5;--hp-p2:#e7e0d3;--hp-ink:#3a3a3a;--hp-chip:#8a6a3a}
[data-palette="charcoal"]{--hp-aw:var(--hp-a);--hp-dark:12,12,12;--hp-sat:120,120,120;--hp-a:.48;--hp-sa:.14;--hp-p1:#3a3a3a;--hp-p2:#242424;--hp-ink:#ffffff;--hp-chip:#ffbade}
[data-tone="bright"]{--hp-a:.54}
[data-palette="slate"][data-tone="bright"]{--hp-a:.55}
[data-palette="cream"][data-tone="bright"]{--hp-a:.57}
[data-palette="charcoal"][data-tone="bright"]{--hp-a:.52}

/* ── 히어로 ─────────────────────────────────────────────── */
/* 모바일은 시안(글자 y117 부터)과 다르게 글자를 아래에 붙이고 위 250u 를 비운다 — 원문 제목이 모델 눈을 덮었다(2026-09-17 검토).
   250 은 hero/geometry.json hero-mo text_top 과 같아야 한다(hero.py 가 눈을 그 위에 둔다).
   가독성 판(모바일 .fp-hero__body::before · PC .fp-hero::after): 흰 글자 뒤만 검정 그라데이션 — 시안 Who 띠·슬라이더 카드와 같은 어휘. 세기는 verify ⑪ 대비 3:1 로 맞췄다. */
.fp-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:calc(680*var(--u));background:linear-gradient(180deg,#f5c3d9 0%,#f3b7d1 100%);color:#fff}
.fp-hero__photo{position:absolute;inset:0;overflow:hidden}
.fp-hero__photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
/* 글자 그림자는 좁고 진하게 — 넓은 글로우(16u/.18)는 배경을 밝게 두면 아무 일도 하지 않았다.
   verify ⑪ 은 그림자를 끄고 배경만 재므로 이 값은 판 두께와 무관하게 실제 가독성만 올린다 */
.fp-hero__body{position:relative;z-index:1;min-width:0;align-self:end;padding:calc(250*var(--u)) calc(20*var(--u)) calc(40*var(--u));
text-shadow:0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.55),0 0 calc(14*var(--u)) rgba(0,0,0,.25)}
/* 모바일 판은 글자 묶음에 붙어 다닌다 — 시작을 글자(250u) 바로 위 228u 로 내리고 더 가파르게(검토 2026-09-18:
   170u 부터 옅게 깔려 모델의 볼·입·턱이 최대 67% 어두워졌다). 글자 밑 진하기는 그대로(290u 에서 .42, 바닥 .5) */
.fp-hero__body::before{content:'';position:absolute;left:0;right:0;bottom:0;top:calc(228*var(--u));z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(var(--hp-sat),0) 0,rgba(var(--hp-sat),calc(var(--hp-sa)*.62)) calc(62*var(--u)),rgba(var(--hp-sat),var(--hp-sa)) 100%),
linear-gradient(180deg,rgba(var(--hp-dark),0) 0,rgba(var(--hp-dark),calc(var(--hp-a) + .02)) calc(62*var(--u)),rgba(var(--hp-dark),calc(var(--hp-a) + .10)) 100%)}
.fp-hero__tag{display:inline-block;padding:calc(9*var(--u)) calc(21*var(--u));font-size:var(--fs-tag);box-shadow:inset 0 0 0 1px #fff;background:rgba(0,0,0,.2)}   /* 시안은 투명 — 판 가장자리에 걸려 대비 2.6~2.9 였다 */
.fp-hero__title{margin-top:calc(16*var(--u));font-size:var(--fs-hero);line-height:1.3}
.fp-hero__lead{margin-top:calc(16*var(--u));font-size:var(--fs-hero-lead)}
.fp-hero__hash{margin-top:calc(20*var(--u));font-size:max(12px,var(--fs-hash))}
.fp-hero__hash li+li{margin-top:calc(8*var(--u))}
@media (min-width:1280px){
.fp-hero{min-height:calc(940*var(--u))}
/* PC 판은 오른쪽 글자 기둥(x 50~83%) 뒤. 42% 시작은 얼굴 오른쪽 볼·귀를 최대 32% 어둡게 했다(검토 2026-09-18)
   → 46% 에서 시작해 50.5% 에서 .4 로 가파르게. 글자 기둥(50% 부터) 아래 진하기는 사실상 그대로 */
.fp-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(70% 62% at 92% 88%,rgba(var(--hp-sat),calc(var(--hp-sa)*.45)) 0,rgba(var(--hp-sat),0) 72%),
linear-gradient(90deg,rgba(var(--hp-sat),0) 38%,rgba(var(--hp-sat),calc(var(--hp-sa)*.62)) 54%,rgba(var(--hp-sat),var(--hp-sa)) 100%),
linear-gradient(90deg,rgba(var(--hp-dark),0) 46%,rgba(var(--hp-dark),var(--hp-a)) 50.5%,rgba(var(--hp-dark),calc(var(--hp-a) + .02)) 100%)}
.fp-hero__body::before{content:none}
.fp-hero__body{align-self:start;padding:calc(249*var(--u)) calc(200*var(--u)) calc(120*var(--u)) calc(960*var(--u))}
.fp-hero__lead{max-width:calc(639*var(--u))}
.fp-hero__hash{margin-top:calc(40*var(--u))}
}

/* ── 히어로 레이아웃 변형 A·B·C·D (hero/LAYOUTS.md 1절 · 사용자 피드백 1) ────────────
   1단계 7장이 「모델 왼쪽 · 오른쪽에 흐릿한 회색 막」 하나뿐이었다. 레이아웃은 **클래스 하나**로 고른다.
   A = 클래스 없음(= 기준 서브 시안. `.fp-hero--a` 는 뜻을 밝히는 별칭일 뿐 아무것도 바꾸지 않는다).
   합성본 기하는 `tools/hero.py --layout {A,B,C,D}` 가 만든다 — 클래스와 합성본 레이아웃이 어긋나면 얼굴이 액자 밖으로 나간다. */

/* B — 모델 우 · 글자 좌(PC) / 사진 판 + 색 판(모바일). 모바일은 **사진 위에 글자가 없다** → 눈·입술 가림이 구조적으로 0 이 된다. */
.fp-hero--b{background:linear-gradient(160deg,var(--hp-p1) 0%,var(--hp-p2) 100%)}
.fp-hero--b .fp-hero__photo{inset:0 0 auto 0;height:calc(430*var(--u));box-shadow:0 calc(4*var(--u)) calc(18*var(--u)) rgba(0,0,0,.16)}   /* 사진 배경과 판 색이 가까우면(incision Rose ΔE 6.0) 경계가 사라진다 → 사진 판을 띄운다 */
.fp-hero--b .fp-hero__body{align-self:start;padding:calc(456*var(--u)) calc(20*var(--u)) calc(34*var(--u));color:var(--hp-ink);text-shadow:none}
.fp-hero--b .fp-hero__body::before{content:none}
/* C — 사진 전면 · 글자 아래 가운데. 판이 가로가 아니라 세로라 인상이 가장 다르다.
   **C 만 막이 모델의 목·어깨·손 위에 깔린다**(A·B 는 keep_clear 가 빈 배경을 보장하고 D 는 막이 없다 — LAYOUTS 9.3).
   색이 든 막(`--hp-dark`)을 쓰면 따뜻한 살색이 차갑게 뒤집혔다: 팔 rgb(228,194,192) → rgb(114,97,131),
   R>G>B 가 B>R>G 로 **색상환을 넘어갔다**(2026-09-19 검토, 얼굴은 막 위라 그대로여서 한 사람 안에서 위아래가 갈렸다).
   → C 의 막만 **중성 검정**이다. 검정 막은 결과가 (1-α)×원색이라 **색상각이 보존**되고 밝기만 내려간다(그늘처럼 보인다).
   팔레트 색은 채도층에 옅게만 남긴다(.25) — 아주 빼면 C 두 장이 팔레트와 무관해진다.
   대비는 오히려 올라간다(검정이 `--hp-dark` 보다 어둡다) → verify ⑪ 기준은 그대로. */
.fp-hero--c .fp-hero__body{text-align:center}
.fp-hero--c .fp-hero__body::before{background:linear-gradient(180deg,rgba(var(--hp-sat),0) 0,rgba(var(--hp-sat),calc(var(--hp-sa)*.16)) calc(62*var(--u)),rgba(var(--hp-sat),calc(var(--hp-sa)*.25)) 100%),
linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,calc(var(--hp-a) + .02)) calc(62*var(--u)),rgba(0,0,0,calc(var(--hp-a) + .10)) 100%)}
.fp-hero--c .fp-hero__hash{display:inline-block;text-align:left}
/* D — 색 판 + 사진 액자. 사진 위에 글자가 0 이라 판도 그림자도 없다(판 위 어두운 글자 대비 7.1~9.9:1, 먹 판이면 흰 글자 11.4:1) */
.fp-hero--d{background:linear-gradient(160deg,var(--hp-p1) 0%,var(--hp-p2) 100%)}
.fp-hero--d .fp-hero__photo{inset:calc(60*var(--u)) auto auto calc(40*var(--u));width:calc(280*var(--u));height:calc(380*var(--u));box-shadow:0 calc(10*var(--u)) calc(30*var(--u)) rgba(0,0,0,.18)}   /* 액자도 같은 이유(cream 판 위 크림 배경 컷) + 깊이 */
.fp-hero--d .fp-hero__body{align-self:start;text-align:center;padding:calc(470*var(--u)) calc(20*var(--u)) calc(40*var(--u));color:var(--hp-ink);text-shadow:none}
.fp-hero--d .fp-hero__body::before{content:none}
.fp-hero--d .fp-hero__hash{display:inline-block;text-align:left}
/* 판 위 태그: 흰 테 + 검정 20% 는 사진 위 규칙이다. 판 위에서는 글자색 그대로 + 강조색 테두리 */
.fp-hero--b .fp-hero__tag,.fp-hero--d .fp-hero__tag{background:transparent;box-shadow:inset 0 0 0 1px var(--hp-chip)}
/* 밝은 판 + 흰 글자 — `data-ink="light"`(B·D, 2026-09-29 사용자: 먹 판이 캄캄하다 → 밝은 팔레트에 흰 글자 + 그림자).
   판 위 흰 글자는 그대로면 대비가 1.3:1 이라 **글자 쪽만** 판을 --hp-dark 로 옅게 가리고(홈 히어로와 같은 어휘) 그림자를 준다.
   사진 쪽 판은 팔레트 그대로다. 속성을 안 단 페이지는 한 픽셀도 안 바뀐다(선택자가 전부 [data-ink="light"] 로 묶였다). */
.fp-hero[data-ink="light"]{--hp-ink:#fff}
.fp-hero[data-ink="light"] .fp-hero__body{text-shadow:0 1px 2px rgba(50,24,38,.55),0 3px 14px rgba(50,24,38,.5),0 0 34px rgba(50,24,38,.32)}
.fp-hero--b[data-ink="light"]{background:linear-gradient(180deg,rgba(var(--hp-dark),0) 42%,rgba(var(--hp-dark),.22) 62%,rgba(var(--hp-dark),.3) 100%),linear-gradient(160deg,var(--hp-p1) 0%,var(--hp-p2) 100%)}
.fp-hero--d[data-ink="light"]{background:linear-gradient(180deg,rgba(var(--hp-dark),0) 42%,rgba(var(--hp-dark),.22) 62%,rgba(var(--hp-dark),.3) 100%),linear-gradient(160deg,var(--hp-p1) 0%,var(--hp-p2) 100%)}
@media (min-width:1280px){
.fp-hero--b .fp-hero__body{align-self:start;padding:calc(249*var(--u)) calc(960*var(--u)) calc(120*var(--u)) calc(320*var(--u));color:#fff;
text-shadow:0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.55),0 0 calc(14*var(--u)) rgba(0,0,0,.25)}
.fp-hero--b{background:linear-gradient(180deg,var(--hp-p1) 0%,var(--hp-p2) 100%)}
.fp-hero--b .fp-hero__photo{inset:0;height:auto;box-shadow:none}
.fp-hero--b .fp-hero__tag{background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px #fff}
.fp-hero--b .fp-hero__lead{max-width:calc(600*var(--u))}
.fp-hero--b::after{background:linear-gradient(90deg,rgba(var(--hp-sat),var(--hp-sa)) 0,rgba(var(--hp-sat),calc(var(--hp-sa)*.62)) 46%,rgba(var(--hp-sat),0) 62%),
linear-gradient(90deg,rgba(var(--hp-dark),calc(var(--hp-a) + .02)) 0,rgba(var(--hp-dark),var(--hp-a)) 49.5%,rgba(var(--hp-dark),0) 54%)}
.fp-hero--c .fp-hero__body{align-self:end;justify-self:center;max-width:calc(1200*var(--u));padding:calc(249*var(--u)) calc(20*var(--u)) calc(90*var(--u))}
.fp-hero--c .fp-hero__lead{max-width:none}
.fp-hero--c::after{background:linear-gradient(180deg,rgba(var(--hp-sat),0) 46%,rgba(var(--hp-sat),calc(var(--hp-sa)*.16)) 66%,rgba(var(--hp-sat),calc(var(--hp-sa)*.25)) 100%),
linear-gradient(180deg,rgba(0,0,0,0) 52%,rgba(0,0,0,var(--hp-a)) 68%,rgba(0,0,0,calc(var(--hp-a) + .08)) 100%)}   /* 위 「C 만 중성 검정」 참고 */
.fp-hero--d{background:linear-gradient(135deg,var(--hp-p1) 0%,var(--hp-p2) 100%)}
.fp-hero--d::after{content:none}
.fp-hero--d .fp-hero__photo{inset:calc(70*var(--u)) calc(80*var(--u)) auto auto;width:calc(800*var(--u));height:calc(800*var(--u))}
.fp-hero--d .fp-hero__body{align-self:start;text-align:left;padding:calc(300*var(--u)) calc(1040*var(--u)) calc(200*var(--u)) calc(160*var(--u))}
.fp-hero--d .fp-hero__lead{max-width:calc(720*var(--u))}
/* 막 대신 **불투명 색 판** — `.fp-hero--panel`(PC 전용, A·B 에만). hero.py 가 keep_clear 에 사람이 들어오는 배치를 탈락시키므로
   A-pc·B-pc 의 글자 자리는 **늘 빈 배경**이다(hero/LAYOUTS.md 8.3) → 판을 얹어도 모델이 하나도 안 가려진다.
   사용자 피드백 ①의 「오른쪽 흐릿한 회색 막」이 이 세 자리에서 구조적으로 사라지고, 늘린 배경(canthoplasty 오른쪽 831px)도 판 밑으로 들어간다.
   경계(46%→50.5%)는 지금 막과 **같은 자리**라 글자 칸은 안 움직인다. 글자는 흰색 대신 먹(--hp-ink) — 팔레트 판에서 7~9:1(먹 판이면 흰 글자 15:1).
   **모바일에는 걸지 않는다**(A/C 모바일은 사진 전면이라 글자가 사람 위에 있다). 판을 쓰려면 그 페이지 합성본의 글자 칸이 실제로 빈 배경인지 한 번 본다. */
.fp-hero--panel::after{background:linear-gradient(90deg,transparent 46%,var(--hp-p1) 50.5%,var(--hp-p2) 100%)}
.fp-hero--panel.fp-hero--b::after{background:linear-gradient(270deg,transparent 46%,var(--hp-p1) 49.5%,var(--hp-p2) 100%)}
.fp-hero--panel .fp-hero__body{color:var(--hp-ink);text-shadow:none}
.fp-hero--panel .fp-hero__tag{background:transparent;box-shadow:inset 0 0 0 1px var(--hp-chip)}
/* data-ink="light" PC — 글자가 왼쪽이라 가림도 왼쪽에서 오른쪽으로 옅어진다(B 판 경계 49.5% · D 액자 왼쪽 가장자리 전에 0) */
.fp-hero--b[data-ink="light"]{background:linear-gradient(180deg,var(--hp-p1) 0%,var(--hp-p2) 100%)}
.fp-hero--panel.fp-hero--b[data-ink="light"]::after{background:linear-gradient(90deg,rgba(var(--hp-dark),.24) 0,rgba(var(--hp-dark),.13) 36%,rgba(var(--hp-dark),0) 52%),linear-gradient(270deg,transparent 46%,var(--hp-p1) 49.5%,var(--hp-p2) 100%)}
.fp-hero--d[data-ink="light"]{background:linear-gradient(90deg,rgba(var(--hp-dark),.24) 0,rgba(var(--hp-dark),.11) 40%,rgba(var(--hp-dark),0) 58%),linear-gradient(135deg,var(--hp-p1) 0%,var(--hp-p2) 100%)}
}

/* ── 전후사진 카드(Side by Side / Overlay) + 광고비 고지문 ─────────── */
.fp-ba__grid{display:grid;grid-template-columns:1fr;gap:calc(40*var(--u))}
.fp-ba__card{display:flex;flex-direction:column}
.fp-ba__switch{display:flex;align-items:center;justify-content:center;gap:calc(10*var(--u));height:calc(28*var(--u));font-size:max(12px,calc(16*var(--u)))}
/* 꺼진 쪽이 #aaa 였다 — 1280 폭에서 10.67px, 흰 바탕 대비 2.32(검토 2026-09-18). 12px 바닥 + #6b6b6b(대비 5.3) */
.fp-ba__opt{color:var(--c-sub);transition:color .25s ease}
.fp-ba__opt[aria-pressed="true"]{color:var(--c-text)}
.fp-ba__track{position:relative;flex:none;width:calc(68*var(--u));height:calc(28*var(--u));border-radius:calc(16*var(--u));background:var(--c-pink);cursor:pointer}
.fp-ba__track::after{content:'';position:absolute;left:calc(4*var(--u));top:calc(4*var(--u));width:calc(20*var(--u));height:calc(20*var(--u));border-radius:50%;background:#fff;
transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.fp-ba__card.is-overlay .fp-ba__track::after{transform:translateX(calc(40*var(--u)))}
.fp-ba__media{position:relative;margin-top:calc(20*var(--u));display:flex;flex-direction:column;overflow:hidden;background:var(--c-pink-bg)}
/* 액자 비율을 변수로 내준다 — 1·2단계 전후사진은 전부 650x262(2.481:1) 가로라 330/132 상수로 맞았지만,
   3단계 코 수술 네 장은 **420x497 세로**라 `object-fit:cover` 가 세로의 33.8% 만 남겨 **코끝이 통째로 잘린다**
   (2026-09-22 검토: nose-bridge-surgery 12장 전부 코끝이 남는 구간 밖 — 코 수술 페이지에서 코가 안 보였다).
   겹치기 모드는 두 장을 위아래로 쌓고 사진이 상자의 가운데 50% 를 채우므로 `--fp-ar2` 는 **`--fp-ar` 의 세로 두 배**로 준다
   (420/497 → 420/994). 값을 안 주면 지금까지와 한 픽셀도 같다.
   ⚠ `--fp-ar` 은 `.fp-hex__hex`(1/1) · `.fp-ovl--crop`(3/1) 도 쓰는 이름이라 **상속된다** — 전후사진 묶음의 루트
   (`.fp-ba__grid` 나 카드)에만 주고, 같은 값이 닿는 곳에 육각·크롭 액자가 없는지 보고 준다. */
.fp-ba__media img{width:100%;aspect-ratio:var(--fp-ar,330/132);object-fit:cover}
/* 전/후 표시 — 원문도 CSS 로 사진 위에 얹었다(ko/css/1mmps.css .sub_bna_eye …::after{content:"Before"/"After"}).
   두 모드 다 위=Before·아래=After 로 같다(모드마다 뜻이 뒤바뀌던 것을 고침, 검토 2026-09-18).
   글자는 ui_strings.txt 의 범용 라벨 — HTML 에 없으므로 verify ④ 대조 대상이 아니고 alt 와 겹치지 않는다 */
.fp-ba__media::before,.fp-ba__media::after{position:absolute;left:0;z-index:2;pointer-events:none;
padding:calc(4*var(--u)) calc(10*var(--u));background:rgba(0,0,0,.55);color:#fff;font-weight:700;
font-size:max(12px,calc(14*var(--u)));line-height:1.3}
.fp-ba__media::before{content:'Before';top:0}
.fp-ba__media::after{content:'After';top:50%}
.fp-ba__handle{display:none}
.fp-ba__card.is-overlay .fp-ba__media{display:block;aspect-ratio:var(--fp-ar2,330/264);cursor:ns-resize;-webkit-user-select:none;user-select:none}
.fp-ba__card.is-overlay .fp-ba__media img{position:absolute;left:0;top:25%;height:50%;-webkit-user-drag:none}
/* Overlay 도 위가 Before — 위쪽 --split 만큼 Before 를 남기고 그 아래로 After 가 드러난다 */
.fp-ba__card.is-overlay .fp-ba__b{z-index:1;clip-path:inset(0 0 calc(100% - var(--split,50%)) 0)}
.fp-ba__card.is-overlay .fp-ba__media::before{top:25%}
.fp-ba__card.is-overlay .fp-ba__media::after{top:auto;bottom:25%}
/* 분홍 바탕은 사진이 아직 안 받아졌을 때의 자리표시다. Overlay 는 사진(50%)이 상자(330/264) 가운데만 채워
   위아래 25% 가 분홍 빈 띠로 남았다(검토 2026-09-18) → Overlay 에서는 바탕을 비워 카드 바탕이 그대로 보이게 한다.
   상자를 사진에 맞춰 줄이면 Side by Side 와 카드 높이가 달라지고, 사진을 늘려 채우면 2.5:1 원본이 1.25:1 로 잘려 배로 확대된다 */
.fp-ba__card.is-overlay .fp-ba__media{background:transparent}
/* 손잡이를 끝까지 올리면(split 0) 보이는 건 전부 After 인데 'Before' 라벨이 남고, 끝까지 내리면 반대가 된다
   → 제 구역이 라벨을 담을 수 없을 만큼 좁아지면(라벨 높이 ≈ 사진 띠의 20%) 그 라벨을 지운다(fp.js 가 클래스를 건다) */
.fp-ba__card.is-overlay.is-split-min .fp-ba__media::before,
.fp-ba__card.is-overlay.is-split-max .fp-ba__media::after{content:none}
.fp-ba__card.is-overlay .fp-ba__handle{display:block;position:absolute;left:0;right:0;top:calc(25% + var(--split,50%) / 2);height:calc(44*var(--u));margin-top:calc(-22*var(--u));touch-action:none;outline:0;z-index:1}
.fp-ba__handle::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:linear-gradient(90deg,#fff calc(50% - calc(20*var(--u))),transparent calc(50% - calc(20*var(--u))),transparent calc(50% + calc(20*var(--u))),#fff calc(50% + calc(20*var(--u))))}
.fp-ba__handle::after{content:'';position:absolute;left:50%;top:50%;width:calc(40*var(--u));height:calc(40*var(--u));margin:calc(-20*var(--u)) 0 0 calc(-20*var(--u));border-radius:50%;background:url(https://channel-static.rebeauty.co.kr/1mmps/draft2/_fp/a/ba-handle.97242606.svg) center/100% 100% no-repeat}
.fp-ba__handle:focus-visible::after{outline:2px solid var(--c-pink);outline-offset:3px}
.fp-ba__cap{flex:1;display:flex;align-items:center;justify-content:center;min-height:calc(78*var(--u));padding:calc(20*var(--u));background:var(--c-grey-bg);font-size:max(12px,calc(15*var(--u)));text-align:center}
/* ── .fp-ba--row : 원문의 **가로** 변형(2026-09-22 4단계 ② — 3단계에서 넘어온 숙제) ──
   원문 CSS 에는 두 벌이 있다. 1·2단계 눈 사진은 세로로 쌓는 `.sub_bna_eye`(650x262 가로 사진)라 지금 기본값이 맞지만,
   `.sub_bna_nose` 는 **세로 사진 두 장을 가로로 나란히** 세우고(`img{float:left;width:50%}`) Before 는 왼쪽 위·After 는 **오른쪽** 위다
   (`:first-child:after{top:30px;left:25px}` · `:last-child:after{top:30px;right:25px}`). 겹치기 탭도 원문이 따로다 —
   `.sub_bna_nose_slide .wpb_wrapper{width:50%;margin:0 auto}` = 사진 한 장을 **가운데 50% 폭**으로.
   4단계 리프팅 세 장(SMAS-facelift 3쌍 · Mid-face-lift 3쌍 · thread-lifting 8쌍 = 14쌍)이 전부 `.sub_bna_nose` 이고
   사진은 233x276 **세로**다 — 위·아래로 쌓으면 카드가 두 배 넘게 길어지고 원문 짜임과도 다르다.
   쓰는 법: 묶음 루트에 `class="fp-ba fp-ba--row"` + `.fp-ba__grid` 에 `style="--fp-ar:233/276"`.
   **`--fp-ar2`(겹치기 상자)는 주지 않는다** — 가로 변형은 겹치기 상자 높이를 사진에서 직접 받는다(둘이 같은 높이라 토글해도 카드가 안 뛴다).
   붙이지 않으면 지금까지와 한 픽셀도 같다. */
.fp-ba--row .fp-ba__media{flex-direction:row;align-items:flex-start}
.fp-ba--row .fp-ba__media img{width:50%}
.fp-ba--row .fp-ba__media::after{left:auto;right:0;top:0}   /* 기본값 top:50% 는 위·아래로 쌓을 때의 자리다 — 가로로 세우면 둘 다 위 */
.fp-ba--row .fp-ba__card.is-overlay .fp-ba__media{aspect-ratio:auto}
.fp-ba--row .fp-ba__card.is-overlay .fp-ba__a{position:static;width:50%;height:auto;margin-inline:auto}
.fp-ba--row .fp-ba__card.is-overlay .fp-ba__b{left:25%;top:0;width:50%;height:100%}
.fp-ba--row .fp-ba__card.is-overlay .fp-ba__media::before{top:0;left:25%}
.fp-ba--row .fp-ba__card.is-overlay .fp-ba__media::after{top:auto;bottom:0;left:25%;right:auto}
.fp-ba--row .fp-ba__card.is-overlay .fp-ba__handle{left:25%;right:25%;top:var(--split,50%)}
@media (min-width:1280px){.fp-ba__grid{grid-template-columns:repeat(var(--cols,4),1fr)}}   /* 사례가 6장이면 style="--cols:3" (4+2 로 흘러 둘째 줄이 비었다) */
/* 전후사진 한 줄 자동 넘김 `.fp-ba--slide`(2026-10-02 사용자 「thread-lifting 전후사진 — 한 줄로 두고 옆으로 자동으로 당겨지게」).
   격자를 가로 한 줄 **스크롤 상자**로 바꾼다 — 손가락·트랙패드로도 넘기고(scroll-snap), 자동 넘김은 fp.js `baslide`
   (4.5초에 한 장, 마우스·포커스·손가락이 닿거나 화면 밖이면 멈춤, reduced-motion 이면 안 넘김). 한 화면 장 수 = PC `--cols`(기본 2) · 모바일 1.
   쓰는 법: 묶음 루트 `class="fp-ba fp-ba--row fp-ba--slide"`(격자 `style` 의 `--cols` 가 PC 한 화면 장 수). */
.fp-ba--slide>.fp-ba__grid{display:flex;gap:calc(20*var(--u));overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.fp-ba--slide>.fp-ba__grid::-webkit-scrollbar{display:none}
.fp-ba--slide>.fp-ba__grid>.fp-ba__card{flex:0 0 100%;min-width:0;scroll-snap-align:start}
@media (min-width:1280px){
.fp-ba--slide>.fp-ba__grid{gap:calc(40*var(--u))}
.fp-ba--slide>.fp-ba__grid>.fp-ba__card{flex-basis:calc((100% - (var(--cols,2) - 1) * 40 * var(--u)) / var(--cols,2))}
}

/* ── 큰 문장(회색 → 진한 글자 채움) ───────────────────────────── */
.fp-statement{--fill:14%;font-size:var(--fs-h2);line-height:1.2;text-align:center}
@supports (-webkit-background-clip:text) or (background-clip:text){
.fp-fill{color:transparent;background:linear-gradient(90deg,var(--c-text) 0 var(--fill,30%),var(--c-light) var(--fill,30%) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:slice;box-decoration-break:slice}
}
/* 시안 상자는 1260 이지만 white-space:pre 첫 줄이 1262px 로 넘친다 → 1300u 여야 같은 곳에서 꺾인다 */
@media (min-width:1280px){.fp-statement{--fill:30%;max-width:calc(1300*var(--u));margin-inline:auto}}

/* ── 2단 소개(글 + 사진) · 선 사이 문장 ─────────────────────────── */
.fp-intro{display:flex;flex-direction:column;gap:calc(30*var(--u));text-align:center}
.fp-intro__text .fp-body{margin-top:calc(20*var(--u))}
.fp-intro__text>.fp-body:first-child{margin-top:0}   /* 제목 없는 소개(글 칸이 본문뿐)에서 --gap-head 에 20/30u 가 또 더해졌다 */
.fp-intro__text .fp-rule+.fp-body{margin-top:calc(20*var(--u))}
.fp-media{position:relative;overflow:hidden}
.fp-media img{width:100%}
.fp-media--cover{align-self:stretch}
.fp-media--cover img{height:100%;object-fit:cover}
.fp-callout{border-block:1px solid var(--c-dark);padding-block:calc(20*var(--u));font-size:calc(28*var(--u));font-weight:700;text-align:center}
.fp-callout+.fp-body{margin-top:calc(30*var(--u))!important;text-align:center}
.fp-wrap>.fp-intro+.fp-callout{margin-top:calc(30*var(--u))}
@media (min-width:1280px){
.fp-intro{display:grid;grid-template-columns:calc(639*var(--u)) 1fr;column-gap:calc(127*var(--u));align-items:center;text-align:left}
.fp-intro__text .fp-title{max-width:calc(480*var(--u))}
.fp-intro__text .fp-body{margin-top:calc(30*var(--u))}
.fp-intro__text .fp-rule+.fp-body{margin-top:calc(30*var(--u))}
.fp-wrap>.fp-intro+.fp-callout{margin-top:calc(50*var(--u))}
.fp-callout{padding-block:calc(30*var(--u));text-align:left}
.fp-callout+.fp-body{text-align:left}
}

/* ── 분홍 띠 + Check 카드 ────────────────────────────────── */
/* 칸 사이 여백 손잡이 `--fp-cards-gap`(기본값이 지금 값 20u, 2026-09-28 8단계 ④ medical-treatment-information) —
   원문 정보 칸은 「라벨↔값」을 10px 로 붙여 한 묶음으로 읽히게 하고 묶음↔묶음은 34/25px 로 갈라 **3.4배** 차이를 낸다.
   템플릿에서 「간격만 내주는」 상자는 `.fp-cards` 뿐인데 상수라 그 비가 2.25배로 줄어 묶음 경계가 흐려졌다.
   `.fp-split` 쪽에는 `--fp-split-innergap`(2026-09-24)이 이미 같은 꼴로 열려 있다 — 같은 이유·같은 모양의 짝이다. */
.fp-cards>*+*{margin-top:var(--fp-cards-gap,calc(20*var(--u)))}
/* 모서리 손잡이 `--fp-card-r`(2026-09-24 신설, 기본 0 = 지금 값) — 서브 시안에 둥근 카드가 없어 직각이 상수였는데,
   원문이 **연두 띠 위에 얹은 `border-radius:100px` 흰 라운드 카드**인 자리가 있다(6단계 facial-liposuction sec7 · 1440 렌더 약 75px).
   직각 흰 판이면 「카드가 띠 위에 떠 있다」는 인상이 사라진다. `.fp-card--bubble` 은 제 `--fp-bubble-r` 로 이 값을 덮으므로 부딪치지 않는다. */
/* 안쪽 여백 손잡이 `--fp-card-p`(≥1280) · `--fp-card-p-mo`(≤1279) — 기본값이 지금 값이다(2026-09-24 7단계 ④, Ulthera Point 02).
   원문이 카드 판 **없이** 기둥 폭을 그대로 쓰는 줄을 `.fp-card` 에 담으면 좌우 60u 가 통째로 깎여, 그 안 액자가 `--w` 를 아무리 올려도
   **기둥의 91.7%** 를 못 넘는다(1440 실측 990px ↔ 원문 1084px). **두 보드에 규칙이 따로 있으므로 이름도 둘**이다
   (6단계 `--fp-venn-rp`/`-mo` 교훈 — 한 이름으로 몰면 PC 만 고치려던 값이 모바일 여백까지 바꾼다). */
.fp-card{background:#fff;padding:var(--fp-card-p-mo,calc(30*var(--u)) calc(20*var(--u)));text-align:center;border-radius:var(--fp-card-r,0)}
/* 본문 글자 크기 손잡이 `--fp-card-fs`(2026-09-24 신설, 기본값이 지금 값 = `--fs-body`) — `.fp-card--bubble` 은
   「말풍선에 구워 넣은 문단」을 되살리는 자리인데 그 문단이 원본 1440 에서 22.5px 이고 `--fs-body` 는 15px = **67%** 다.
   `.fp-lead` 를 빌리면 PC 는 맞지만 ≤1279 에서 26px 이 되어 원문 모바일 렌더(343px 에 10.8px)의 **2.4배**가 된다.
   ⚠ **상속되는 이름**이라 카드(또는 그 안 문단)에 준다. PC 규칙이 따로 없는 속성이라 이름은 **하나**이고
   페이지가 `min()/max()` 로 두 보드를 같이 적는다(`--fp-check-fs` 와 같은 꼴). */
.fp-card .fp-body{font-size:var(--fp-card-fs,var(--fs-body))}
.fp-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:calc(80*var(--u));height:calc(80*var(--u));margin:0 auto;background:var(--c-dark);font-weight:700;line-height:1.3}
.fp-badge span{font-size:calc(18*var(--u));color:var(--c-pink)}
.fp-badge strong{font-size:calc(24*var(--u));color:#fff;background:none;font-weight:inherit}
.fp-card>*+*{margin-top:calc(30*var(--u))}
/* 빛(.fp-glare)은 첫 자식으로 들어온다 — `*+*` 가 첫 칸을 밀면 fp.js 가 1px 차이를 보고 빛을 도로 뺀다(MOTION.md 4절 ⑪) */
.fp-card>.fp-glare+*,.fp-types>li>.fp-glare+*,.fp-steps>li>.fp-glare+*{margin-top:0}
.fp-card>.fp-badge+.fp-title{margin-top:calc(20*var(--u))}
.fp-card>.fp-title+.fp-body{margin-top:calc(12*var(--u))}
.fp-card>.fp-body+.fp-body{margin-top:calc(20*var(--u))}

/* ── 꼬리 달린 말풍선 `.fp-card--bubble` (2026-09-24, 6단계 facial-liposuction §9) ──────────
   템플릿에 **꼬리 달린 상자가 없었다.** `.fp-descbox` 는 검정 1px 테에 꼬리가 없어 원본(연두 테 + 큰 라운드 + 꼬리)과 다르다.
   원본 실측(`fat_trans_img05-2.png` 794x349 · 1440 렌더 배율 0.883 · 1440 에서 --u = 0.75px):
   상자 754x347 → **모서리 55px = 65u** · 테 **2px = 2.4u**(#bbe04e → 우리 팔레트) ·
   ⚠ 테 색 기본값은 `var(--fp-line,var(--c-pink))` 다 — `--fp-line` 은 **도해 루트**(`.fp-hex .fp-venn .fp-plus .fp-ovl .fp-dgm`)에만 선언돼 있어
   `.fp-card` 에서 `var(--fp-line)` 만 쓰면 **선언 전체가 무효**가 되어 테가 통째로 사라진다(첫 판에서 실제로 그랬다. 꼬리는 `currentColor` 로 떨어져 먹으로 나왔다).
   **PC 는 왼쪽 가운데 꼬리**(길이 37 · 밑변 38 = 44u/45u · 세로 50%) · **모바일 판은 위 가운데 꼬리**(길이 38 · 밑변 25 → 390 에서 16u/10u · 가로 47.7%).
   두 판은 **같은 상자에 꼬리만 다르다** → 한 마크업이 보드를 따라 갈리게 했다(수식자 하나로 두 판을 다 낸다).
   ⚠ 꼬리는 **삼각형 두 겹**이다(바깥 = 테 색 · 안 = 흰 속을 `--fp-bubble-in` 만큼 밀어 넣은 것). 45° 돌린 정사각형 한 겹은
   꼭지각이 **늘 90°** 라 원본(PC 54° · 모바일 36°)을 못 낸다. 안쪽 흰 삼각형이 상자 테를 **꼬리 입구만큼** 덮어 이음매가 끊기지 않는다.
   ⚠ 꼬리는 상자 **밖으로** 나간다 — 붙이는 쪽이 그만큼 여백을 둔다(모바일은 위, PC 는 왼쪽). */
.fp-card--bubble{--fp-bub-bw:var(--fp-bubble-bw,max(1px,calc(2.4*var(--u))));
--fp-bub-tl:var(--fp-bubble-tl,calc(16*var(--u)));--fp-bub-tw:var(--fp-bubble-tw,calc(10*var(--u)));
--fp-bub-in:var(--fp-bubble-in,calc(7*var(--u)));
border:var(--fp-bub-bw) solid var(--fp-bubble-c,var(--fp-line,var(--c-pink)));border-radius:var(--fp-bubble-r,calc(65*var(--u)))}
.fp-card--bubble>.fp-glare{border-radius:inherit}   /* 빛 판은 네모라 라운드 밖으로 새어 나간다 — 상자 모서리를 물려받게 한다 */
/* ≤1279 = **위 가운데** 꼬리. 밑변(상자 쪽)이 아래, 꼭지가 위다 — CSS 삼각형이라 네 테가 다 `solid` 여야 대각이 잘린다
   (한 쪽만 `style:none` 으로 두면 모양이 깨진다). 안 쓰는 쪽은 **색만 투명**으로 둔다. */
.fp-card--bubble::before,.fp-card--bubble::after{content:'';position:absolute;z-index:1;width:0;height:0;
border:0 solid transparent;border-left-width:calc(var(--fp-bub-tw)/2);border-right-width:calc(var(--fp-bub-tw)/2);
border-bottom-width:var(--fp-bub-tl);border-bottom-color:var(--fp-bubble-c,var(--fp-line,var(--c-pink)));
left:var(--fp-bubble-tp,48%);top:calc(-1*var(--fp-bub-tl));margin-left:calc(-1*var(--fp-bub-tw)/2)}
.fp-card--bubble::after{border-bottom-color:#fff;top:calc(var(--fp-bub-in) - var(--fp-bub-tl))}
@media (min-width:1280px){
.fp-card--bubble{--fp-bub-tl:var(--fp-bubble-tl,calc(44*var(--u)));--fp-bub-tw:var(--fp-bubble-tw,calc(45*var(--u)));
--fp-bub-in:var(--fp-bubble-in,calc(5*var(--u)))}
/* ≥1280 = **왼쪽 가운데** 꼬리. 밑변이 오른쪽(상자 쪽)이고 꼭지가 왼쪽이다.
   ⚠ `--fp-bubble-tp-pc` 는 **세로 %** 이고 모바일의 `--fp-bubble-tp` 는 **가로 %** 다 — 한 이름으로 두 보드를 몰면
   COMPONENTS 22 의 `--fp-lap` 과 같은 함정이 된다(같은 값이 보드마다 **다른 축**을 잰다). */
.fp-card--bubble::before,.fp-card--bubble::after{
border-bottom-color:transparent;border-top-width:calc(var(--fp-bub-tw)/2);border-bottom-width:calc(var(--fp-bub-tw)/2);
border-left-width:0;border-right-width:var(--fp-bub-tl);border-right-color:var(--fp-bubble-c,var(--fp-line,var(--c-pink)));
left:calc(-1*var(--fp-bub-tl));top:var(--fp-bubble-tp-pc,50%);margin-left:0;margin-top:calc(-1*var(--fp-bub-tw)/2)}
.fp-card--bubble::after{border-right-color:#fff;left:calc(var(--fp-bub-in) - var(--fp-bub-tl))}
}
@media (min-width:1280px){
.fp-card{padding:var(--fp-card-p,calc(50*var(--u)) calc(60*var(--u)))}
.fp-badge{width:calc(100*var(--u));height:calc(100*var(--u))}
.fp-badge span{font-size:calc(20*var(--u))}
.fp-badge strong{font-size:calc(28*var(--u))}
.fp-card>*+*{margin-top:calc(50*var(--u))}
.fp-card>.fp-badge+.fp-title{margin-top:calc(30*var(--u))}
.fp-card>.fp-title+.fp-body{margin-top:calc(20*var(--u))}
.fp-card>.fp-body+.fp-body{margin-top:calc(20*var(--u))}
.fp-card>.fp-body{max-width:calc(1200*var(--u));margin-inline:auto}
.fp-card>.fp-compare{margin-top:calc(80*var(--u))}
}

/* ── 사진 격자 · 그림(원문 이미지 한 장) · 이미지+캡션 격자 ─────────── */
.fp-grid{display:grid;grid-template-columns:1fr;gap:calc(20*var(--u));margin-inline:auto}
.fp-grid img{width:100%}   /* 원본 픽셀 폭에 묶이면 >1920·768~1279 에서 칸 왼쪽에 붙는다 */
/* width:100% 가 없으면 flex/grid 의 **직접 자식**일 때 `margin-inline:auto`(자동 여백)가 stretch 를 끄고 shrink-to-fit 이 된다.
   안쪽 `.fp-ovl{width:100%}`·`img{width:100%}` 의 퍼센트 폭은 본질 크기 계산에서 **0 으로 접히므로** 액자 폭을 figcaption 글자가 정한다
   → 2026-09-23 실측 thread-lifting §11 `.fp-split` 안 액자 1440 174.7px(제 폭 525px) · 1920 204.9px 였다가 사진이 오면 튀었다.
   `.fp-ovl`·`.fp-types figure`·`.fp-duo__fig` 가 이미 같은 이유로 width:100% 다. 블록 흐름에서는 width:auto 와 같은 값이라 나머지 액자는 안 바뀐다. */
/* **원본 픽셀 천장** `--fp-figw-max`(기본 none = 지금 값, 2026-09-24 7단계 ④ juvelook) — 액자 폭은 보드 배율(`--u`)을 따라가므로
   1440 을 원문에 맞추면 **≤1279 와 1920 에서 원본을 넘겨 늘어난다**(juvelook 1279 실측 — CE 마크 142x101 → **576x409.7 = 4.06배**,
   FDA 2.35배, 제품 병 2.40배. 원문은 세 폭 모두 등배였다). `.fp-special__badge` 가 `max-width:326px` 로 이미 같은 문제를 px 천장으로 풀어 두었다.
   ⚠ 원본이 **어느 폭에서도 등배**인 그림에만 준다 — 배율을 타는 그림에 주면 큰 화면에서만 작아진다. */
/* 좌우 정렬 손잡이 `--fp-fig-mx`(기본값이 지금 값 `auto`, 2026-09-28 8단계 ④ medical-treatment-information 2560) —
   `--fp-figw-max` 가 무는 폭에서는 액자가 **칸 안에서 가운데로** 밀려, 원문이 왼끝 맞춤인 칸에서 같은 칸의 글자와
   왼변이 갈린다(2560 실측: 글자 x=344 ↔ 약도 x=435.3 · margin-inline 91.25px). 페이지는 인라인에 `--fp-*` 만 줄 수 있어
   `margin-left:0` 을 못 준다(계약 ⑩). 1920 이하는 천장이 안 물어 `ml=0` 이라 값을 줘도 그 폭들은 안 바뀐다. */
.fp-figure{width:100%;margin-inline:var(--fp-fig-mx,auto);max-width:var(--fp-figw-max,none)}
/* 원문 이미지에 구운 둥근 모서리·흰 테 잘라내기(시안은 직각): 가운데 기준 확대 후 액자가 자른다. 비율 --trim(기본 1.06) */
.fp-trim{position:relative;overflow:hidden}
.fp-trim img{scale:var(--trim,1.06)}
.fp-figure img{width:100%}
/* 캡션 크기 손잡이 `--fp-cap-fs` — 원문이 사진 아래 흰 띠에 **구워 두었던** 캡션을 진짜 글자로 옮기면 12px 바닥값으로 내려앉는다
   (2026-09-23 Mid-face-lift §7: 원본 24px@687 = 1440 렌더 21.1px ↔ 우리 12px). 기본값이 지금 값이라 값을 안 준 캡션은 그대로다.
   캡션 **띠 색** 손잡이 `--fp-cap-bg`(2026-09-23 신설, 기본값이 지금 값 `--c-grey-bg`) — 원문 캡션 띠가 회색이 아닌 자리가 있다
   (5단계 men's-eye-surgery §9: 연두 `#def0a8` + 먹 글자 `#242424`, 사진 **위**, 시술명·경과월을 담아 장식이 아니다).
   ⚠ **글자색은 손잡이가 없다**(페이지 글자색을 물려받는다) → **밝은 띠 색만** 준다. 그리고 상속되는 이름이라
   **그 `figure`(또는 그 `li`)에만** 주고 섹션 루트에 주지 않는다 — 안에 든 캡션이 다 같이 바뀐다. */
/* 캡션 띠 **모서리** 손잡이 `--fp-cap-r`(기본 0 = 지금 값, 2026-09-23 신설) — 원문 캡션 띠가 사진과 닿지 않는 쪽만 둥근 자리가 있다
   (5단계 men's-eye-surgery §9: 사진 **위** 띠라 `border-radius:20px 20px 0 0` · 1440 폭 753px). 둥근 쪽은 **사진 반대쪽**이므로
   `.fp-figure--cap-top`(캡션이 사진 앞) 이면 위 두 모서리, 아니면 아래 두 모서리다. 안 주면 지금과 한 픽셀도 같다. */
.fp-figure figcaption,.fp-gallery figcaption{padding:calc(12*var(--u)) calc(10*var(--u));background:var(--fp-cap-bg,var(--c-grey-bg));font-size:var(--fp-cap-fs,max(12px,var(--fs-cap)));border-radius:0 0 var(--fp-cap-r,0) var(--fp-cap-r,0);text-align:center}
/* ≤1279 열 수 손잡이 `--fp-cols-mo`(기본 1 = 지금 값, 2026-09-28 8단계 ④ medical-staff-introduction) —
   `.fp-board` 에는 이미 같은 이름이 있다(28절). 원문 학술·증서 격자는 390 에서 **2열(그림 168px)** 인데 PC 만 `--cols` 를 받아
   ≤1279 가 1열 상수였다 — 그 장은 격자 12벌·칸 79개라 모바일 그림이 346.66px = 원문의 2.06배가 된다. */
.fp-gallery{display:grid;grid-template-columns:repeat(var(--fp-cols-mo,1),1fr);gap:calc(30*var(--u))}
.fp-gallery img{width:100%}
.fp-gallery--middle{align-items:center}
.fp-gallery>li>figure+.fp-body{margin-top:calc(20*var(--u))}   /* 칸 안에는 .fp-wrap>*+* 여백이 안 온다 — 글자가 사진에 붙었다 */   /* 높이가 다른 전/후 두 장 — 짧은 쪽 아래가 크게 비었다 */
.fp-sec--grey .fp-figure figcaption,.fp-sec--grey .fp-gallery figcaption{background:var(--fp-cap-bg,#fff)}   /* 회색 띠 안에서는 캡션 띠가 안 보였다(여기도 --fp-cap-bg 가 이긴다 — 특이도가 위 규칙보다 높다) */
/* 캡션이 사진 위에 오는 판(원문에서 캡션이 사진 앞에 있는 사례) */
.fp-figure--cap-top figcaption{margin-bottom:calc(12*var(--u));border-radius:var(--fp-cap-r,0) var(--fp-cap-r,0) 0 0}
@media (min-width:1280px){
.fp-grid{grid-template-columns:repeat(var(--cols,2),1fr);gap:calc(50*var(--u)) calc(40*var(--u));max-width:calc(var(--w,980) * var(--u))}
.fp-figure{max-width:min(calc(var(--w,1440) * var(--u)),var(--fp-figw-max,100%));margin-inline:var(--fp-fig-mx,auto)}
.fp-figure figcaption,.fp-gallery figcaption{padding:calc(20*var(--u))}
/* 폭 손잡이 `--w`(기본 1440 = 기둥 폭 = 지금 값, 2026-09-24 7단계 ④ they-swear §11) — `.fp-grid` 는 같은 줄이 있는데 `.fp-gallery` 에만 없어
   캡션이 붙은 사진 격자가 늘 기둥을 다 썼다(원문 1440 렌더 **214px** 짜리 사진이 2열 격자에서 **478px = 2.2배**가 되어 1배 자산이 늘어났다).
   1440 에서 `1440*--u` = 1080 = 기둥이라 **안 주면 지금과 같다**(배포본의 `.fp-gallery` 는 전부 기둥 폭을 쓴다 — 전수 확인). */
.fp-gallery{grid-template-columns:repeat(var(--cols,2),1fr);gap:calc(50*var(--u)) calc(40*var(--u));max-width:calc(var(--w,1440)*var(--u));margin-inline:auto}
/* 5장이 3+2 로 흐르면 둘째 줄이 왼쪽에 붙는다 → 마지막 줄 가운데 정렬(.fp-types--center 와 같은 규칙) */
.fp-gallery--center{display:flex;flex-wrap:wrap;justify-content:center}
.fp-gallery--center>li{width:calc((100% - (var(--cols,2) - 1) * calc(40*var(--u))) / var(--cols,2))}
}

/* ── 3단 비교표(분홍 머리행 + 원형 사진 칸) ──────────────────────── */
.fp-compare{width:calc(280*var(--u));margin-inline:auto}
.fp-compare__head{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(101*var(--u));padding:calc(20*var(--u));
border-top:1px solid var(--c-dark);background:var(--c-pink-bg);font-size:calc(24*var(--u));font-weight:700;text-align:center}
.fp-compare__cells>li{display:flex;flex-direction:column;align-items:center;min-height:calc(276*var(--u));padding:calc(30*var(--u)) 0;background:var(--c-grey-bg)}
.fp-compare__cells>li:nth-child(even){background:#fff}
.fp-compare__img{width:calc(150*var(--u));height:calc(150*var(--u));border-radius:50%;overflow:hidden;flex:none}
.fp-compare__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.fp-compare__cells p{margin-top:calc(20*var(--u));font-size:calc(18*var(--u));text-align:center}
.fp-compare strong{background:none;color:inherit;font-weight:inherit}
@media (min-width:1280px){
.fp-compare{width:calc(1280*var(--u))}
.fp-compare__head{flex-direction:row;justify-content:space-between;min-height:calc(81*var(--u));padding:0 calc(80*var(--u));font-size:calc(28*var(--u))}
.fp-compare__cells{display:grid;grid-template-columns:repeat(3,1fr)}
.fp-compare__cells>li{min-height:calc(364*var(--u));padding:calc(40*var(--u)) calc(30*var(--u))}
.fp-compare__cells p{font-size:calc(20*var(--u))}
}

/* ── 도해 + 번호 목록(검은 정사각 01~) ─────────────────────────── */
.fp-split{display:flex;flex-direction:column;gap:calc(20*var(--u))}
/* `.fp-wrap>*+*`·`.fp-wrap>.fp-head+*` 는 **직계 자식**만 본다 → `.fp-split` 한쪽 칸 안에 제목과 목록을 나란히 두면 0px 로 맞붙는다
   (2026-09-23 Mid-face-lift §7 · endoscopic-forehead-lift 「Forehead Giant effect」. 둘 다 간격만 내주는 `.fp-cards` 로 감싸 피했다).
   **붙이지 않으면 아무것도 안 바뀐다** — 칸 안 간격이 필요한 자리에만 루트에 `fp-split--gap` 을 더한다. 값은 `--fp-headgap`. */
.fp-split--gap>*>.fp-head+*{margin-top:var(--fp-headgap,calc(30*var(--u)))}
/* **칸 안** 간격 손잡이 `--fp-split-innergap`(기본 **0 = 지금 값**, 2026-09-24 7단계 ④ thermage sec2) — 위 `--gap` 은 `.fp-head` 다음 한 자리만 띄운다.
   원문이 한 칸에 「제목 + 문단 + 작은 제목 + 목록」을 넣은 자리는 나머지가 전부 0px 로 맞붙어, 지난 단계들이 칸을 `.fp-cards`(20u 상수)로 감싸 피해 왔다.
   ⚠ 특이도를 **`:where()` 로 0** 에 맞춘다 — `.fp-cards>*+*`(0,1,1)·`.fp-types>li>*+*` 같은 기존 규칙이 그대로 이겨야 기본값 0 이 아무것도 안 덮는다.
   두 보드에 규칙이 하나뿐이라 **이름도 하나**다 — 페이지가 `min()/max()` 로 두 보드를 같이 적는다. */
:where(.fp-split>*)>*+*{margin-top:var(--fp-split-innergap,0)}
/* **아래 정렬** `.fp-split--bottom`(2026-09-24 7단계 ④ thermage sec14) — `.fp-split` 는 `align-items:start`, `--middle` 은 `center` 뿐이라
   원문이 글 칸을 **액자 아래변에 맞춰** 둔 자리를 못 옮겼다(1440 실측 액자 674.3 ↔ 목록 275.5 → 아래가 **199.4px** 비었다. 원문은 31px).
   ≤1279 는 한 열이라 `align-items` 가 할 일이 없다 → **≥1280 규칙과 같은 자리**에 둔다. 붙이지 않으면 한 픽셀도 안 바뀐다. */
.fp-num{display:flex;flex-direction:column;gap:calc(20*var(--u))}
.fp-num>li{display:flex;gap:calc(20*var(--u));align-items:flex-start;text-align:left}
.fp-num__n{flex:none;display:flex;align-items:center;justify-content:center;width:calc(50*var(--u));height:calc(50*var(--u));background:var(--c-dark);color:#fff;font-size:calc(24*var(--u));font-weight:700}
.fp-num__t{flex:1;font-size:calc(24*var(--u));font-weight:700;line-height:1.3}
.fp-num__t small{display:block;margin-top:calc(8*var(--u));font-size:var(--fs-body);font-weight:400}
/* 문장형 번호 목록 — 항목이 긴 문장이면 24u 굵게가 모바일에서 4~6줄이라 h2 보다 무거웠다 */
/* 번호칸·본문 크기 손잡이 `--fp-num-nw`/`--fp-num-nh`/`--fp-num-n-fs`/`--fp-num-fs`(기본값이 전부 지금 값, 2026-09-24 7단계 ④ filler-botox·shrink).
   `.fp-num`(118u 정사각 + 28u 굵게)과 `.fp-num--text`(40u + 본문 크기) **둘 중 하나**뿐이라, 원문이 「큰 번호 블록 + 보통 굵기 긴 문장」인 자리를
   어느 쪽으로도 못 맞췄다(filler-botox sec11 원본 1440 — 번호칸 **118px** · 번호 26px/700 · 본문 **23px** / 300 ↔ 우리 40u·18u·`--fs-body` 15px = 65%.
   shrink sec9 는 원본 **120x68px** 블록이라 정사각도 아니다).
   **`--text` 쪽은 두 보드에 규칙이 하나**라 이름도 하나다 — 페이지가 `min()/max()` 로 두 보드를 같이 적는다(모바일 항 K = 320/18 = 17.78).
   ⚠ 이 넷은 **`.fp-num--text` 전용**이다. 맨 `.fp-num` 은 ≤1279·≥1280 에 규칙이 따로 있어 한 이름으로 열면 두 보드가 같이 바뀐다(`--fp-venn-rp` 교훈). */
.fp-num--text .fp-num__n{width:var(--fp-num-nw,calc(40*var(--u)));height:var(--fp-num-nh,var(--fp-num-nw,calc(40*var(--u))));font-size:var(--fp-num-n-fs,calc(18*var(--u)))}
.fp-num--text .fp-num__t{font-size:var(--fp-num-fs,var(--fs-body));font-weight:400}
/* 번호 없는 체크 목록(원문이 체크 아이콘 목록일 때 — .fp-num 은 순서가 있는 것처럼 읽힌다) */
/* 글자 크기 손잡이 `--fp-check-fs`(기본값이 지금 값 = `--fs-body`, 2026-09-23 신설) — 도해 안 체크 목록이 카드의 본문 전체인데
   상수라 원본에 맞출 길이 없었다(5단계 male-rhinoplasty §6·§8·§9: 원본 1440 20px ↔ 우리 15px = 75%).
   ⚠ **상속되는 이름**이라 섹션 루트가 아니라 그 `ul` 에 준다. `.fp-check` 는 PC 규칙이 따로 없으므로 이름이 **하나**다
   → 페이지가 `min()/max()` 로 두 보드를 같이 적는다(`.fp-duo__desc`·`.fp-hex__label` 과 같은 꼴). */
.fp-check{display:flex;flex-direction:column;gap:calc(12*var(--u));font-size:var(--fp-check-fs,var(--fs-body));text-align:left}
.fp-check>li{position:relative;padding-left:calc(25*var(--u))}
.fp-check>li::before{content:'';position:absolute;left:0;top:calc(.65em - calc(8*var(--u)));width:calc(16*var(--u));height:calc(16*var(--u));
background:url(https://channel-static.rebeauty.co.kr/1mmps/draft2/_fp/a/check-circle.e0c009fe.svg) center/contain no-repeat}
/* 부연(sub) 슬롯 — 원문 체크 목록이 「항목 + 그 아래 작은 부연」 **두 층**인 자리가 있다(2026-09-24, 6단계 facial-fat-transplant §7:
   원문 `dd` 24px/500 + `dd span` **19px/300/#464646/display:block**). 템플릿에는 항목 하나에 한 층뿐이라 부연을 `<small>` 로 담을 수밖에 없었고,
   UA 기본 `small` 은 **인라인**이라 제목과 부연이 **한 문단으로 이어져** 흘렀다(원문은 줄이 갈린다).
   크기 기본값은 `--fp-check-fs`(없으면 `--fs-body`)의 0.8배에 12px 바닥값이다 — UA 의 0.83em 과 거의 같아
   **이미 실린 `<small>` 의 글자 크기는 사실상 그대로이고 줄만 갈린다.** `--fp-check` 계통과 마찬가지로 PC 규칙이 따로 없어 이름은 하나다.
   ⚠ **색은 주지 않는다** — 요청안은 `--c-sub`(#6b6b6b)를 주자고 했지만 원문 부연은 **#464646** 이라 우리 본문색 #3a3a3a 쪽이 더 가깝고,
   같은 짜임인 `.fp-num__t small` 도 색을 주지 않고 물려받는다(한 계통에 두 규칙을 만들지 않는다). */
.fp-check>li small{display:block;margin-top:calc(6*var(--u));
font-size:var(--fp-check-sub-fs,max(12px,calc(.8*var(--fp-check-fs,var(--fs-body)))));font-weight:400}
/* 줄 단위 목록(수상·학술 이력 등) — 항목 간격 0 이면 두 줄로 꺾인 항목끼리 경계가 안 보인다 */
.fp-list{font-size:var(--fs-body);text-align:left}
.fp-list>li+li{margin-top:calc(10*var(--u))}
@media (min-width:1280px){
/* 첫 칸 폭 손잡이 `--fp-splitcol`(2026-09-24 신설, 기본값이 지금 값 = 700u) — 원문이 「도해 + 오른쪽 글」을 6:4 나 4:6 으로
   나누는 자리에서 700u 상수가 도해·글 칸을 둘 다 원문보다 좁게 만든다(6단계 facial-liposuction sec6 86.8% · sec9 말풍선 68%).
   ≥1280 에만 규칙이 있다(≤1279 는 한 열로 쌓인다) → 이름도 여기 하나면 된다. 안 주면 한 픽셀도 안 바뀐다.
   ⚠ 요청안은 둘째 칸을 `minmax(0,1fr)` 로 바꾸자고 했지만 **그것은 기본값이 지금 값이 아니다**(`1fr` = `minmax(auto,1fr)` 는
   min-content 아래로 줄지 않는다) → 지난 단계 화면이 흔들릴 수 있어 `1fr` 을 그대로 둔다. 첫 칸을 넓혀 둘째 칸이 넘치면 검사 ⑦ 이 잡는다. */
/* **칸 사이** 간격 손잡이 `--fp-split-gap`(≥1280 전용, 기본값이 지금 값 20u — 2026-09-24 7단계 ④ filler-botox·shrink 가 같이 올렸다).
   `--fp-splitcol` 로 액자를 원문 폭에 맞추면 넓어진 만큼이 **오른쪽 글 칸에서만** 빠져나가, 원문이 97px 띄운 자리에 우리는 **15px** 만 남는다
   (1440 실측 — 액자 180~785.3 ↔ 오른 칸 800.3~1260. shrink sec7 도 같은 자리에서 15px ↔ 원문 95px).
   ⚠ **≥1280 에만 연다** — ≤1279 는 한 열로 쌓이는 자리라 같은 이름이 거기서는 **세로 간격**이 된다(6단계 `--fp-venn-rp` 교훈).
   ⚠ 칸을 넓히려고 이 값을 **줄이면** 액자(`--w`)는 그대로라 액자 오른쪽에 빈 띠가 생긴다 — 셋(`--fp-splitcol`·`--w`·이 값)을 같이 잰다. */
.fp-split{display:grid;grid-template-columns:var(--fp-splitcol,calc(700*var(--u))) 1fr;gap:var(--fp-split-gap,calc(20*var(--u)));align-items:start}
.fp-num{gap:calc(15*var(--u))}
.fp-num>li{align-items:center}
.fp-num__n{width:calc(118*var(--u));height:calc(118*var(--u));font-size:calc(28*var(--u))}
.fp-num__t{font-size:calc(28*var(--u))}
.fp-split .fp-num__t{max-width:calc(582*var(--u))}
/* 도해가 거의 정사각(700u)인데 오른쪽 목록이 두어 줄이면 목록 아래가 크게 빈다(1920 에서 400px, 2560 에서 525px).
   붙이지 않으면 지금과 같다 — 위 정렬이 맞는 자리(목록이 길어 도해와 키가 비슷할 때)가 기본이다 */
.fp-split--middle{align-items:center}
.fp-split--bottom{align-items:end}
/* 체크 목록을 **PC 에서만** 두 열로 — 원문이 목록을 두 벌로 나눠 나란히 두는 자리(2026-09-23 신설, 5단계 men's-eye-surgery §8:
   PC 는 `<dl>` 두 벌 각 3항목 · 모바일은 한 벌 6항목). `.fp-check` 는 한 열짜리 flex 라 그대로 실으면 PC 에서 여섯 줄이 세로로 이어진다.
   두 개의 `.fp-check` 를 나란히 놓는 우회는 **모바일에서 3+3 두 묶음**이 되어 원문 한 벌과 어긋난다 — 그래서 한 목록의 변형이다.
   **세로로 먼저 채운다**(1~3 왼쪽 · 4~6 오른쪽 = 원문 두 `<dl>` 과 같은 차례) → `grid-auto-flow:column` + `--fp-check-rows`(기본 3).
   ≤1279 에는 규칙이 없다(한 열 그대로). 붙이지 않으면 아무것도 안 바뀐다.
   원본 실측(1440): 두 벌 폭 574.1 / 553.3(서로 다르다 — 글자에 맞춘 inline-block) · **사이 4.0px** · 묶음은 가운데 ·
   항목 24px/39px · 체크 아이콘 들여쓰기 50px. 우리 들여쓰기는 25u(1440 에서 18.8px)라 사이를 0 으로 두면
   왼쪽 글 끝과 오른쪽 아이콘이 붙는다 → `--fp-check-gap` 기본 **40**(1440 에서 30px). 원본 그대로 하려면 `--fp-check-gap:5`. */
.fp-check--2col{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--fp-check-rows,3),auto);
justify-content:center;column-gap:calc(var(--fp-check-gap,40)*var(--u))}
}

/* ── 전후 비교 그림(전 → 후) · 설명 상자 ─────────────────────────── */
.fp-vs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-inline:auto}
.fp-vs--stack{grid-template-columns:1fr}
.fp-vs img{width:100%;height:100%;object-fit:cover}
.fp-vs>:nth-child(2){position:relative}
.fp-vs>:nth-child(2)::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 calc(5*var(--u)) var(--c-pink);pointer-events:none}
.fp-vs__arrow{position:absolute;left:50%;top:50%;width:calc(40*var(--u));height:calc(40*var(--u));margin:calc(-20*var(--u)) 0 0 calc(-20*var(--u));border-radius:50%;background:#fff;z-index:1}
.fp-vs--stack .fp-vs__arrow{transform:rotate(90deg)}
.fp-vs__arrow svg{position:absolute;left:calc(9*var(--u));top:calc(10*var(--u));width:calc(22*var(--u));height:calc(20*var(--u));fill:var(--c-pink)}
.fp-descbox{display:flex;flex-direction:column;gap:calc(12*var(--u));padding:calc(20*var(--u));box-shadow:inset 0 0 0 1px var(--c-dark);background:#fff;text-align:left;font-size:calc(20*var(--u))}
.fp-descbox__aside{font-size:calc(24*var(--u));font-weight:700}
.fp-pair{margin-inline:auto}
.fp-pair>.fp-descbox{margin-top:0}
@media (min-width:1280px){
.fp-vs--stack{grid-template-columns:1fr 1fr}
.fp-vs--stack .fp-vs__arrow{transform:none}
.fp-pair{max-width:calc(1026*var(--u))}
.fp-descbox{flex-direction:row;align-items:center;justify-content:space-between;gap:calc(40*var(--u));padding:calc(40*var(--u));min-height:calc(180*var(--u))}
.fp-descbox>p:first-of-type{max-width:calc(510*var(--u))}
/* aside 없이 쓰는 판: 가로 2단·최소 높이 180u 를 풀어 글이 상자 폭을 다 쓰게 한다(안 풀면 오른쪽 절반이 빈 흰 판, 검토 2026-09-18) */
.fp-descbox:not(:has(.fp-descbox__aside)){display:block;min-height:0;padding:calc(30*var(--u)) calc(40*var(--u))}
.fp-descbox:not(:has(.fp-descbox__aside))>p:first-of-type,.fp-descbox:not(:has(.fp-descbox__aside))>*>p:first-of-type{max-width:none}
.fp-descbox__aside{flex:none;width:calc(400*var(--u));font-size:calc(28*var(--u))}
}

/* ── 「Point」 탭 라벨 + 분홍 패널 + 카드 ───────────────────────── */
.fp-points__tab{position:relative;z-index:1;display:inline-block;padding:calc(12*var(--u)) calc(30*var(--u));background:var(--c-dark);color:var(--c-pink);font-size:calc(24*var(--u));font-weight:700}
.fp-points__panel{margin-top:calc(-25*var(--u));padding:calc(55*var(--u)) calc(20*var(--u)) calc(30*var(--u));background:var(--c-pink-bg)}
.fp-points__list{display:grid;grid-template-columns:1fr;gap:calc(20*var(--u))}
.fp-points__card{background:#fff;padding-bottom:calc(20*var(--u));text-align:center}
.fp-points__label{padding:calc(10*var(--u));background:var(--c-dark);color:var(--c-pink);font-size:calc(20*var(--u));font-weight:700}
.fp-points__card h3{margin-top:calc(20*var(--u));padding-inline:calc(10*var(--u));font-size:calc(24*var(--u));line-height:1.3}
.fp-points__card p:not(.fp-points__label){margin-top:calc(20*var(--u));padding-inline:calc(10*var(--u));font-size:calc(18*var(--u))}
@media (min-width:1280px){
.fp-points__tab{font-size:calc(28*var(--u))}
.fp-points__panel{margin-top:calc(-30*var(--u));padding:calc(80*var(--u))}
.fp-points__list{grid-template-columns:repeat(3,1fr);gap:calc(40*var(--u))}
.fp-points__card{min-height:calc(348*var(--u));padding-bottom:calc(40*var(--u))}
.fp-points__card h3{margin-top:calc(40*var(--u));padding-inline:calc(40*var(--u));font-size:calc(28*var(--u))}
.fp-points__card p:not(.fp-points__label){padding-inline:calc(40*var(--u));font-size:calc(20*var(--u))}
}

/* ── 모델 사진 띠 + 체크 목록(Who Is This Procedure For?) ─────────── */
/* 모바일: 시안은 아래 정렬이라 제목이 3~4줄이면 글자 묶음이 얼굴로 올라갔다 → 위 238u(시안 라벨 y) 에 고정하고 아래로 자란다.
   238 은 hero/geometry.json who-mo text_top 과 같아야 한다. 가독성 판은 시안 270° 그라데이션 위에 글자 쪽(아래) 판을 한 겹 더 */
.fp-who{position:relative;display:flex;align-items:flex-start;min-height:calc(580*var(--u));color:#fff;background:#b9b3ad}
.fp-who__photo{position:absolute;inset:0;overflow:hidden}
.fp-who__photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
/* 세로 판 시작을 170u → 205u 로 내리고 라벨(238u) 까지 더 가파르게 — 170u 부터 옅게 깔려 얼굴 아래 절반이 어두워졌다(검토 2026-09-18).
   글자 밑 진하기는 오히려 조금 올라간다(238u 에서 .18 → .19) */
.fp-who::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(var(--hp-sat),0) calc(205*var(--u)),rgba(var(--hp-sat),calc(var(--hp-sa)*.62)) calc(265*var(--u)),rgba(var(--hp-sat),var(--hp-sa)) 100%),
linear-gradient(180deg,rgba(var(--hp-dark),0) calc(205*var(--u)),rgba(var(--hp-dark),calc(var(--hp-aw)*.68)) calc(265*var(--u)),rgba(var(--hp-dark),calc(var(--hp-aw)*.84)) 100%),
linear-gradient(270deg,rgba(var(--hp-dark),0) 35.21%,rgba(var(--hp-dark),calc(var(--hp-aw)*.25)) 51.41%,rgba(var(--hp-dark),calc(var(--hp-aw)*.5)) 67.6%,rgba(var(--hp-dark),calc(var(--hp-aw)*.75)) 83.8%,rgba(var(--hp-dark),var(--hp-aw)) 100%),
linear-gradient(180deg,rgba(var(--hp-dark),calc(var(--hp-aw)*var(--fp-who-topfloor,0))) calc(265*var(--u)),rgba(var(--hp-dark),0) 62%)}
/* 모바일 v2·v3 — **글자 대비를 지는 둘째 층(180deg 검정)은 v1 과 한 글자도 다르지 않게 둔다.**
   ⚠ **그 말은 셋째 층을 뺀 말이라 사실과 달랐다**(2026-09-24 7단계 ④ 가 고쳐 적는다) — v1 의 셋째 층은 **가로(270deg)** 라 액자 가운데에도 `aw*0.24` 가 깔리는데
   v2(20deg)·v3(왼아래 타원)는 **액자 위쪽이 0** 이다. 그래서 밝은 합성본에서 글자 칸 맨 윗줄(눈썹글 238u)이 v2·v3 에서만 verify ⑪ 를 못 넘었다
   (7단계 filler-botox 390 실측 — v2 **2.65** · v3 **2.86**(한도 3.0) ↔ 같은 자리 v1 **3.06** / **3.62**). 조판은 셋 다 v1 로 물러설 수밖에 없었고
   LAYOUTS 2.4 의 「Who 가 여럿이면 모양을 돌린다」가 **컷에 따라 깨졌다**.
   → **위쪽 바닥값 `--fp-who-topfloor`**(기본 **0 = 지금 값**)를 세 규칙에 **같은 한 줄**로 더했다. 값은 `--hp-aw` 의 배수라 팔레트·`data-tone` 을 따라간다
   (예 `.24` 면 v1 의 가로층이 가운데에 깔던 양과 같다). 265u 까지 그 값 그대로 · 62% 에서 0 — 아래쪽은 이미 둘째 층이 `aw*0.84` 까지 올려 둔다.
   ⚠ 이것은 **얼굴을 어둡게 하는 값**이다(사용자 결정 대기 ②와 같은 갈래) — 대비가 모자란 띠에만, 넘기는 만큼만 준다. */
.fp-who--v2::after{background:linear-gradient(200deg,rgba(var(--hp-sat),var(--hp-sa)) 0,rgba(var(--hp-sat),calc(var(--hp-sa)*.55)) 46%,rgba(var(--hp-sat),0) 78%),
linear-gradient(180deg,rgba(var(--hp-dark),0) calc(205*var(--u)),rgba(var(--hp-dark),calc(var(--hp-aw)*.68)) calc(265*var(--u)),rgba(var(--hp-dark),calc(var(--hp-aw)*.84)) 100%),
linear-gradient(20deg,rgba(var(--hp-dark),calc(var(--hp-aw)*.55)) 0,rgba(var(--hp-dark),calc(var(--hp-aw)*.22)) 46%,rgba(var(--hp-dark),0) 74%),
linear-gradient(180deg,rgba(var(--hp-dark),calc(var(--hp-aw)*var(--fp-who-topfloor,0))) calc(265*var(--u)),rgba(var(--hp-dark),0) 62%)}
.fp-who--v3::after{background:radial-gradient(ellipse 130% 82% at 50% 106%,rgba(var(--hp-sat),var(--hp-sa)) 0,rgba(var(--hp-sat),calc(var(--hp-sa)*.55)) 44%,rgba(var(--hp-sat),0) 80%),
linear-gradient(180deg,rgba(var(--hp-dark),0) calc(205*var(--u)),rgba(var(--hp-dark),calc(var(--hp-aw)*.68)) calc(265*var(--u)),rgba(var(--hp-dark),calc(var(--hp-aw)*.84)) 100%),
radial-gradient(ellipse 120% 72% at 14% 104%,rgba(var(--hp-dark),calc(var(--hp-aw)*.5)) 0,rgba(var(--hp-dark),calc(var(--hp-aw)*.18)) 48%,rgba(var(--hp-dark),0) 76%),
linear-gradient(180deg,rgba(var(--hp-dark),calc(var(--hp-aw)*var(--fp-who-topfloor,0))) calc(265*var(--u)),rgba(var(--hp-dark),0) 62%)}
.fp-who__body{position:relative;z-index:1;width:100%;min-width:0;padding:calc(238*var(--u)) calc(20*var(--u)) calc(40*var(--u));
text-shadow:0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.55),0 0 calc(14*var(--u)) rgba(0,0,0,.25)}
.fp-who__eyebrow{font-size:calc(18*var(--u));font-weight:700;line-height:1.2;text-align:center}
.fp-who__title{margin-top:calc(10*var(--u));font-size:var(--fs-h2);line-height:1.2;text-align:center}
.fp-who__list{margin-top:calc(20*var(--u));font-size:calc(18*var(--u))}
.fp-who__list li{position:relative;padding-left:calc(25*var(--u))}
.fp-who__list li+li{margin-top:calc(12*var(--u))}
.fp-who__list li::before{content:'';position:absolute;left:0;top:calc(.65em - calc(8*var(--u)));width:calc(16*var(--u));height:calc(16*var(--u));background:url(https://channel-static.rebeauty.co.kr/1mmps/draft2/_fp/a/check-circle.e0c009fe.svg) center/contain no-repeat}
/* 부제(lead) 슬롯 — 원문이 제목 아래 한두 줄을 더 두는 짜임이 있는데 `.fp-who__body` 에는 자리가 없었다.
   `.fp-lead` 를 빌리면 모바일에서 제목(가운데)과 정렬이 갈린다(2026-09-22 nose-tip-surgery 조판 보고) → 제목과 같은 정렬·같은 폭으로 둔다. */
.fp-who__lead{margin-top:calc(12*var(--u));font-size:calc(18*var(--u));line-height:1.5;text-align:center}
/* 짧은 라벨 슬롯 `.fp-who__label`(2026-09-24 7단계 ④ filler-botox sec2 의 올리브색 「CHECKPOINT」) — `__eyebrow` 는 제목 **위** 한 자리뿐이고
   그 자리를 곡선 워드마크가 쓰는 장이 있다. `__lead` 를 두 번 쓰면 라벨이 본문처럼 보인다 → `__eyebrow` 와 같은 굵기·크기로 제목 **아래**에 둔다.
   붙이지 않은 장은 한 픽셀도 안 바뀐다. */
.fp-who__label{margin-top:calc(20*var(--u));font-size:calc(18*var(--u));font-weight:700;line-height:1.2;text-align:center}
/* ── .fp-who--stack : 긴 글에 띠가 스스로 무너지는 것을 막는다 (2026-09-22 4단계 ② — 3단계에서 넘어온 숙제) ──
   기본 띠 높이는 `min-height:580u` + 내용이고 사진은 `object-fit:cover` 라, 글이 길어 띠가 자라면 **사진이 그만큼 확대돼
   얼굴이 내려오는데** 글자 자리(`padding-top:238u`)는 px 고정이다 → 길수록 글자가 모델 입·턱으로 들어간다.
   실측(2026-09-22): nose-tip-surgery 가 제목·부제까지 띠 안에 두면 390 에서 띠 **989px** · verify ⑪ 입술 침범 **36%**(한도 30%) 불합격이라
   조판이 제목·부제를 띠 밖 회색 띠로 빼야 했다. 합성으로는 못 푼다 — 띠 높이를 정하는 것은 글자다.
   --stack 은 **사진 액자를 합성본 보드 높이(580u)에 못박고** 그 아래를 막이 만드는 색 판으로 둔다:
   글이 아무리 길어도 사진은 1:1 로 서고(390 에서 390x628.3 ← 합성본 360x580 과 같은 비, 가로 잘림 0) 글자만 판으로 흘러내린다.
   PC(≥1280)는 글자가 왼쪽 기둥이고 얼굴은 keep_clear 오른쪽이라 이 갈래가 없다 → **≤1279 에서만** 건다.
   붙이지 않으면 지금까지와 한 픽셀도 같다. 액자 높이를 달리 쓰려면 `--fp-whoh`(보드 px). */
@media (max-width:1279px){
/* 액자 아래끝은 **마지막 60u 를 흐려** 색 판으로 넘긴다 — 안 흐리면 사진이 모델 가슴께에서 가로줄로 뚝 끊겨
   고장처럼 읽힌다(실측 390 에서 경계 위아래 휘도 125→102). 흐림이 짧아 띠가 580u 그대로인(= 글이 짧은) 자리에서는
   바닥이 이미 막으로 어두워져 있어 눈에 띄지 않는다. */
.fp-who--stack .fp-who__photo{inset:0 0 auto;height:calc(var(--fp-whoh,580)*var(--u));
-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 60*var(--u)),transparent 100%);
mask-image:linear-gradient(180deg,#000 calc(100% - 60*var(--u)),transparent 100%)}
}
@media (min-width:1280px){
.fp-who{align-items:center;min-height:calc(740*var(--u))}
.fp-who__photo img{object-position:50% 50%}
/* 시안 270° 그라데이션(왼쪽 .5 → 65% 에서 0)은 제목 오른쪽 끝(53%)에서 .15 뿐이라 흰 글자 대비가 2.2 였다 → 글자 기둥(12.5~55%) 전체를 .42 이상으로.
   모델 얼굴은 keep_clear(x 55% 까지) 오른쪽이라 60% 에서 0 이면 얼굴에 닿지 않는다 */
.fp-who::after{background:linear-gradient(90deg,rgba(var(--hp-sat),var(--hp-sa)) 0,rgba(var(--hp-sat),calc(var(--hp-sa)*.62)) 46%,rgba(var(--hp-sat),0) 62%),
linear-gradient(90deg,rgba(var(--hp-dark),var(--hp-aw)) 0,rgba(var(--hp-dark),calc(var(--hp-aw) - .08)) 52%,rgba(var(--hp-dark),0) 60%)}
/* 막 모양 3종 — 같은 페이지에 Who 가 여럿이면 v1→v2→v3 로 돌려 반복을 깬다(LAYOUTS 2.4). 사진·글자 자리는 그대로라 합성본을 다시 만들지 않는다.
   PC 판은 여기, 모바일 판은 위 기본 규칙 바로 아래 — **≤1279 에도 반드시 같이 둔다**(2026-09-19 검토: 모바일에서 셋이 문자열까지 같아
   Who 가 여럿인 장이 다시 똑같아졌다. 사용자가 본 화면의 절반이 모바일이다). */
.fp-who--v2::after{background:linear-gradient(128deg,rgba(var(--hp-sat),var(--hp-sa)) 0,rgba(var(--hp-sat),calc(var(--hp-sa)*.62)) 40%,rgba(var(--hp-sat),0) 62%),
linear-gradient(128deg,rgba(var(--hp-dark),calc(var(--hp-aw) + .04)) 0,rgba(var(--hp-dark),calc(var(--hp-aw) - .04)) 50%,rgba(var(--hp-dark),0) 70%)}
.fp-who--v3::after{background:radial-gradient(ellipse 110% 165% at 4% 26%,rgba(var(--hp-sat),var(--hp-sa)) 0,rgba(var(--hp-sat),calc(var(--hp-sa)*.62)) 40%,rgba(var(--hp-sat),0) 72%),
radial-gradient(ellipse 110% 165% at 4% 26%,rgba(var(--hp-dark),calc(var(--hp-aw) + .04)) 0,rgba(var(--hp-dark),calc(var(--hp-aw) - .04)) 46%,rgba(var(--hp-dark),0) 76%)}
.fp-who__body{padding:calc(60*var(--u)) calc(240*var(--u))}
.fp-who__eyebrow,.fp-who__title{text-align:left}
.fp-who__eyebrow{font-size:calc(20*var(--u))}
.fp-who__title,.fp-who__list{max-width:calc(820*var(--u))}   /* keep_clear x 1060 까지 — 넘으면 긴 제목이 모델 얼굴(x 1146~)을 덮는다 */
.fp-who__title{margin-top:calc(20*var(--u))}
.fp-who__list{font-size:calc(20*var(--u))}
.fp-who__lead{max-width:calc(820*var(--u));font-size:calc(20*var(--u));text-align:left}
.fp-who__label{max-width:calc(820*var(--u));font-size:calc(20*var(--u));text-align:left}
}

/* ── Our specialty 번호 슬라이더 ──────────────────────────────── */
.fp-special__side{text-align:center}
/* 원문 PC 에 있던 전문의 배지(sub_special_img5.jpg — 학회 심의번호가 구워져 있다). 시안 슬라이더에 자리가 없어 빠져 있었다(검토 2026-09-18).
   마크업은 **`<span class="fp-special__badge"><img …></span>`** 이다 — `<img>` 에 직접 걸면 fp.js 가 빛(글레어)을 얹을 자식을 못 넣어
   MOTION 4절 ⑦ 이 통째로 건너뛴다(사용자 피드백 ⑤ 의 남은 자리, 2026-09-19 검토). position 도 static 이면 건너뛴다 → relative. */
.fp-special__badge{position:relative;display:block;width:calc(196*var(--u));max-width:326px;margin:calc(30*var(--u)) auto 0}
.fp-special__badge img{display:block;width:100%;height:auto}
.fp-sl__nav{display:flex;align-items:center;justify-content:center;gap:calc(12*var(--u));margin-top:calc(30*var(--u))}
.fp-sl__btn{position:relative;width:calc(44*var(--u));height:calc(44*var(--u));border-radius:50%;box-shadow:inset 0 0 0 1px var(--c-dark);transition:opacity .25s ease}
.fp-sl__btn svg{position:absolute;left:50%;top:50%;width:calc(10*var(--u));height:calc(20*var(--u));margin:calc(-10*var(--u)) 0 0 calc(-5*var(--u));fill:none;stroke:var(--c-dark);stroke-width:1.4}
.fp-sl__btn[aria-disabled="true"]{opacity:.3;cursor:default}
.fp-sl__count{min-width:calc(45*var(--u));font-size:max(12px,calc(15*var(--u)));color:#000;text-align:center;font-variant-numeric:tabular-nums}   /* 1280 에서 10px 였다 */
.fp-sl__count span{color:var(--c-sub)}   /* rgba(0,0,0,.4) = 흰 바탕 대비 2.5 */
.fp-sl__count b{font-weight:400}
.fp-sl{position:relative;margin-top:calc(30*var(--u));clip-path:inset(calc(-40*var(--u)) -100vw calc(-40*var(--u)) 0);touch-action:pan-y}
.fp-sl__track{display:flex;gap:calc(20*var(--u));will-change:transform}
.fp-sl__slide{flex:none;width:100%}
.fp-sl__card{position:relative;height:calc(420*var(--u));overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none}
.fp-sl__card img{width:100%;height:100%;max-width:none;object-fit:cover;-webkit-user-drag:none}
.fp-sl__card::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.125) 25%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.375) 75%,rgba(0,0,0,.5) 100%)}
.fp-sl__card figcaption{position:absolute;left:calc(20*var(--u));right:calc(20*var(--u));bottom:calc(40*var(--u));z-index:1;color:#fff;text-align:center}
.fp-sl__tag{font-size:max(12px,calc(15*var(--u)));transition:opacity .35s ease}
.fp-sl__tag+.fp-sl__title{margin-top:calc(8*var(--u))}
.fp-sl__title{font-size:calc(24*var(--u));line-height:1.2;transition:opacity .35s ease}
.fp-sl__slide[aria-hidden="true"] :is(.fp-sl__title,.fp-sl__tag){opacity:0}
html.fp-dragging,html.fp-dragging .fp-sl__card{cursor:grabbing}
@media (min-width:1280px){
.fp-special__wrap{display:grid;grid-template-columns:calc(660*var(--u)) 1fr;align-items:start}
.fp-special__wrap>*+*{margin-top:0}
.fp-special__side{text-align:left}
.fp-special__side .fp-lead{max-width:calc(546*var(--u))}
.fp-special__badge{width:min(326px,100%);margin:calc(50*var(--u)) 0 0}
/* 심의번호는 **구워진 글자**라 배율을 따라가면 읽히지 않는다 — 1440 에서 245px(심의번호 줄 5.3px)이었다(2026-09-19 검토).
   그래서 PC 에서만 배율 밖으로 빼 원본 픽셀 326px 에 고정한다(절대 규칙 4 「표시를 화면에 보이게」).
   위쪽 max-width:326px 와 합쳐 2560 에서도 원본 픽셀을 넘겨 늘어나지 않는다(육안 목록 2). 칸(660u)보다 넓어지는 폭은 없다. */
.fp-sl__nav{justify-content:flex-start;margin-top:calc(50*var(--u))}
.fp-sl{margin-top:0;clip-path:inset(calc(-40*var(--u)) -100vw calc(-40*var(--u)) calc(-20*var(--u)))}
.fp-sl__slide{width:calc(780*var(--u))}
.fp-sl__card figcaption{left:calc(40*var(--u));right:calc(40*var(--u))}
.fp-sl__title{font-size:calc(28*var(--u))}
}

/* ── 절차 단계(Step 01~) ─────────────────────────────────── */
.fp-steps{display:grid;grid-template-columns:1fr;gap:calc(20*var(--u));counter-reset:fp-step}
.fp-steps>li{display:flex;flex-direction:column;background:var(--c-grey-bg);text-align:center}
.fp-steps>li>figure img,.fp-types figure img{width:100%}
/* width:100% 가 없으면 `align-items:center` 때문에 액자가 사진 폭에 맞춰진다 → lazy 사진이 아직 안 받아졌을 때 액자·사진이 0×0 이고(맨 아래로
   건너뛰면 그대로 남는다, verify ⑧a) 받아진 뒤에도 원본 픽셀 폭에 묶여 2560 에서 칸 왼쪽에 붙는다(.fp-grid 와 같은 결함, 2026-09-18) */
/* 카드 안 그림 상한 — 360u 상수였다. 1440 에서 270px 인데 `--cols:2` 칸 안쪽은 480px 이라
   원문이 더 크게 보여 주던 도해가 66~74% 로 작아졌다(2026-09-22 nose-bridge-surgery 실측: 원문 1440 렌더 365·409·383px).
   「다시 만든 도해는 원본과 같은 크기·같은 무게로」(2026-09-21 규칙)를 지키려면 칸마다 값이 달라야 한다.
   값을 안 주면 360u 그대로다. 칸 안쪽보다 큰 값을 줘도 `width:100%` 가 칸을 넘지 않는다(상한일 뿐이다). */
.fp-types figure{width:100%;max-width:min(calc(var(--fp-figw,360)*var(--u)),var(--fp-figw-max,100%))}
.fp-steps__label{padding:calc(10*var(--u));background:var(--c-dark);color:var(--c-pink);font-size:var(--fs-label);font-weight:700}
.fp-steps__text{padding:calc(20*var(--u));font-size:var(--fs-body)}
.fp-steps__text+.fp-steps__text{padding-top:0}
@media (max-width:1279px){.fp-steps--mo2{grid-template-columns:1fr 1fr}
.fp-steps--mo2 .fp-steps__text{padding:calc(12*var(--u));font-size:max(12px,calc(16*var(--u)))}}   /* 칸이 반으로 좁아졌는데 여백·글자는 1열 그대로였다 */   /* 320u 사진 16장이 세로로 이어져 390 폭 페이지가 25,000px 였다 */
@media (min-width:1280px){
.fp-steps{grid-template-columns:repeat(var(--cols,3),1fr);gap:calc(40*var(--u))}
.fp-steps__text{padding:calc(30*var(--u))}
}

/* ── 자주 묻는 질문(Q/A) ─────────────────────────────────── */
/* 띠 색 자동 뒤집기(.fp-plus·.fp-duo 와 같은 규칙) — 이게 없어 FAQ·절차 단계가 든 페이지는 쓸 수 있는 띠 색이 분홍뿐이었다(2026-09-19 검토) */
.fp-sec--grey .fp-faq__a>div,.fp-sec--grey .fp-steps>li{background:#fff}
.fp-faq{border-bottom:1px solid var(--c-dark)}
.fp-faq__item{border-top:1px solid var(--c-dark)}
.fp-faq__q{display:flex;align-items:center;gap:calc(20*var(--u));padding:calc(20*var(--u)) 0;font-size:calc(20*var(--u));font-weight:700;cursor:pointer;list-style:none;text-align:left}
.fp-faq__q::-webkit-details-marker{display:none}
/* 제목 자리는 `<span>` 말고 **진짜 제목 태그**도 받는다(2026-09-28 8단계 ④ medical-staff-introduction 접힘 아홉) —
   원문이 「제목형 접힘」인 자리(`<h3 class="toggle-title">`)를 옮길 길이 없었다. HTML 명세는 `summary` 의 내용 모형에
   heading content 를 **명시적으로 허용**한다. ⓐ `flex:1` 이 `span` 한 이름이라 h3 로 바꾸면 아이콘이 제목 옆으로 붙고
   ⓑ 크기 규칙이 없어 UA `h3{font-size:1.17em}` 이 먹어 전 폭 **+17%**(1440 21 → 24.57px · 390 21.67 → 25.35 · 2560 36.4 → 42.59)였다.
   ⚠ `:first-child` 를 빼면 **「빈 span 채움」 우회를 쓴 페이지**에서 두 칸이 free space 를 나눠 제목이 접힌다.
   지난 스무 장의 `.fp-faq__q` 는 전부 `span` 하나 + `.fp-faq__icon` 이라 ⓐ 는 선택자만 넓히는 것이고,
   ⓑ 는 지금 `h2/h3/h4` 가 한 곳도 없어 아무 데도 안 닿는다. */
.fp-faq__q>:where(span,h2,h3,h4):first-child{flex:1}
.fp-faq__q :where(h2,h3,h4){font-size:inherit}
.fp-faq__icon{position:relative;flex:none;width:calc(32*var(--u));height:calc(32*var(--u));border-radius:50%;background:var(--c-dark)}
.fp-faq__icon::before,.fp-faq__icon::after{content:'';position:absolute;left:50%;top:50%;width:calc(12*var(--u));height:calc(2*var(--u));margin:calc(-1*var(--u)) 0 0 calc(-6*var(--u));background:var(--c-pink);transition:transform .3s ease}
.fp-faq__icon::after{transform:rotate(90deg)}
.fp-faq__item[open] .fp-faq__icon::after{transform:rotate(0)}
.fp-faq__a{overflow:hidden}
.fp-faq__a>div{padding:calc(20*var(--u));margin-bottom:calc(20*var(--u));background:var(--c-grey-bg);font-size:var(--fs-body);text-align:left}
.fp-faq__a>div>*+*{margin-top:1em}
@media (min-width:1280px){
.fp-faq{max-width:calc(1280*var(--u));margin-inline:auto}
.fp-faq__q{gap:calc(40*var(--u));padding:calc(30*var(--u)) 0;font-size:calc(28*var(--u))}
.fp-faq__icon{width:calc(40*var(--u));height:calc(40*var(--u))}
.fp-faq__icon::before,.fp-faq__icon::after{width:calc(16*var(--u));margin-left:calc(-8*var(--u))}
.fp-faq__a>div{padding:calc(30*var(--u)) calc(40*var(--u));margin-bottom:calc(30*var(--u))}
}

/* ── 유형 카드 격자(01~) ─────────────────────────────────── */
.fp-types{display:grid;grid-template-columns:1fr;gap:calc(20*var(--u))}
/* 모서리·바탕·본문 크기 손잡이 `--fp-types-r`/`--fp-types-bg`/`--fp-types-fs`(기본값이 전부 지금 값 — 2026-09-24 7단계 ④ filler-botox sec7).
   원문이 「크림빛 라운드 카드 2열」인 자리를 옮기면 우리는 **직각 · 흰색 · 15px** 이었다(원본 실측 604.8x533.7 · `border-radius:50px` · `#f8f7e0` · 본문 **23px**).
   `.fp-card` 에는 6단계가 `--fp-card-r`·`--fp-card-fs` 를 열어 두었는데 **2열은 `.fp-types` 밖에 못 낸다**(`.fp-cards` 는 세로로만 쌓인다) → 같은 꼴로 연다.
   ⚠ 바탕은 **두 규칙**이 나눠 정한다(흰 칸 ↔ 회색 띠 위 회색 칸) — 둘 다에 같은 이름을 넣어야 페이지 값이 **어느 띠에서도** 이긴다.
   ⚠ 본문 크기도 **두 자리**다 — `.fp-types p`(0,1,1)와 `.fp-types h3+p`(0,1,2). 뒤엣것은 「제목 다음 문단」이라 카드 본문이 대개 여기 걸린다.
      한 곳만 열면 값을 줘도 **화면이 안 바뀐다**(7단계 ② 의 `.fp-types__mid` 가 같은 자리에서 걸렸다). */
.fp-types>li{display:flex;flex-direction:column;align-items:center;padding:calc(30*var(--u)) calc(20*var(--u));background:var(--fp-types-bg,#fff);text-align:center;border-radius:var(--fp-types-r,0)}
.fp-sec:not(.fp-sec--pink,.fp-sec--grey) .fp-types>li{background:var(--fp-types-bg,var(--c-grey-bg))}   /* 회색 띠 위에서는 흰 칸(기본값) — 안 빼면 회색 위 회색이라 칸이 사라진다 */
.fp-types__n{display:flex;align-items:center;justify-content:center;width:calc(50*var(--u));height:calc(50*var(--u));background:var(--c-dark);color:#fff;font-size:calc(24*var(--u));font-weight:700}
.fp-types>li>*+*{margin-top:calc(20*var(--u))}
.fp-types h3{font-size:var(--fs-h3);line-height:1.3}
.fp-types h3+p{margin-top:calc(4*var(--u));color:var(--c-sub);font-size:var(--fp-types-fs,var(--fs-body))}
/* 원문에서 작은 라벨이 이름보다 **앞**에 오는 카드용 — h3 를 이름에 주고 라벨을 이 클래스로(원문 위계가 뒤집히지 않게) */
.fp-types__label{color:var(--c-sub)}
.fp-types .fp-types__label+h3{margin-top:calc(4*var(--u))}
.fp-types p{font-size:var(--fp-types-fs,var(--fs-body))}
/* 위 한 줄(0,1,1)이 `.fp-ovl__tag`(0,1,0)를 특이도로 이긴다 — 「칩이 둘 이상이면 `<p>`(블록)」 규칙(2026-09-22)과 정면으로 부딪쳐
   `<p class="fp-ovl__tag">` 로 쓰는 순간 `--fp-tag-fs` 가 죽었다(2026-09-23 SMAS-facelift 390 실측 19.5px = 원본 환산 11.9px 의 1.64배).
   컴포넌트 기본값을 그대로 되돌려 준다 — 칩 크기를 준 곳은 그 값이 듣고, 안 준 곳은 컴포넌트 기본값(12px 바닥)이 선다. */
.fp-types .fp-ovl__tag{font-size:var(--fp-tag-fs,max(12px,calc(14*var(--u))))}
.fp-types>li>figure:last-child{margin-top:auto;border-top:calc(20*var(--u)) solid transparent}   /* 설명 줄 수가 달라도 카드 끝 도해는 바닥에 맞춘다.
   간격을 **padding 이 아니라 투명 border** 로 준다 — 이 액자가 `.fp-ovl` 이면 표시(__ell·__dot·__zone·__tag)의 %가
   padding **포함** 상자를 기준으로 풀려 표시가 위로 밀리고 세로로만 커진다(2026-09-19 검토: 눈 단면 5장이 10~18px 위로 · 정원이 0.88 타원으로).
   절대 배치의 기준 상자는 padding 상자라 border 는 안 들어간다 → 이 줄로 안쪽 `<svg>`/`<img>` 와 기준이 같아진다.
   margin-top:auto 는 여유가 없으면 0 이 되므로 최소 간격을 margin 으로는 줄 수 없다. */
/* **칸과 칸 사이에 서는 원문 낱말** `.fp-types--vs` + `.fp-types__mid`(2026-09-24 신설 — 3단계 nose-bridge-surgery 「VS」,
   3→4→5→6단계를 지나며 네 번 미뤄진 숙제). 원문은 흰 카드 둘 사이에 50px 낱말을 절대배치로 세운다(≤999 에서는 원문도 숨긴다).
   `.fp-duo__vs` 는 `.fp-duo` 계통 전용이라 카드 격자에는 못 붙는다 — **글자 규칙은 그 이름과 한 줄에 묶어 두었다**(한 낱말이 두 모양이 되지 않게).
   **두 번째 `<li>` 안 맨 앞에 `<p class="fp-types__mid">VS</p>`** 로 쓴다(`<ul>` 바로 아래에 두면 목록 자식이 `<li>` 가 아니게 되고,
   맨 뒤에 두면 `.fp-types>li>figure:last-child` 가 풀려 카드 끝 도해의 바닥 정렬이 깨진다).
   칸 사이 여백을 낱말이 설 만큼 벌린다 — 원본 1440 실측 **여백 140px · 잉크 54x37px**(50px Marcellus, `.fp-duo__vs` 계약과 같은 잣대).
   우리 여백은 ≤1279 **56u**(390 에서 60.7px · 낱말 높이 28.2px) · PC **120u**(1440 에서 90px — 낱말 **상자**가 69px 이라 양쪽 10.5px. `.fp-duo__vs` 전시가 고른 값과 같다).
   숫자를 손잡이로 내주지 않는다 —
   고를 일이 없으면 틀릴 일도 없고, 한 이름으로 열면 두 보드가 같이 바뀐다(`--fp-lap` 함정). **붙이지 않은 목록은 한 픽셀도 안 바뀐다.**
   ⚠ `.fp-types--center` 와 같이 쓰지 않는다 — 그쪽 칸 폭 식이 여백 40u 를 상수로 박아 두었다.
   ⚠ `translateZ` 를 안 쓴다 — `.fp-types>li` 에는 `transform-style:preserve-3d` 가 없어 층이 안 서고, 낱말은 카드와 함께 기울면 된다. */
.fp-types--vs{gap:calc(56*var(--u))}
.fp-types--vs>li>.fp-types__mid{position:absolute;z-index:3;left:50%;top:calc(-28*var(--u));margin:0;transform:translate(-50%,-50%)}
.fp-types--vs>li>.fp-types__mid+*{margin-top:0}   /* 맨 앞에 서므로 다음 칸이 `.fp-types>li>*+*`(0,1,1) 의 20u 를 받는다 — `.fp-card>.fp-glare+*` 와 같은 되돌림 */
@media (min-width:1280px){
.fp-types{grid-template-columns:repeat(var(--cols,3),1fr);gap:calc(40*var(--u))}
.fp-types--vs{gap:calc(120*var(--u))}
.fp-types--vs>li>.fp-types__mid{left:calc(-60*var(--u));top:50%}
.fp-types>li{padding:calc(40*var(--u)) calc(30*var(--u))}
/* 5장이 3+2 로 흐르면 둘째 줄이 왼쪽에 붙는다 → 마지막 줄 가운데 정렬 */
.fp-types--center{display:flex;flex-wrap:wrap;justify-content:center}
.fp-types--center>li{width:calc((100% - (var(--cols,3) - 1) * calc(40*var(--u))) / var(--cols,3))}
}

/* ── 표 ────────────────────────────────────────────────── */
.fp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fp-table{width:100%;border-collapse:collapse;border-top:1px solid var(--c-dark);font-size:calc(15*var(--u));text-align:center}
/* 열마다 폭이 글줄 길이를 따라가면 **머리칸의 비교 사진 두 장이 서로 다른 크기**가 된다
   (2026-09-23 mini-facelift 실측 1279 206.1x136.9 ↔ 159.8x106.1 = 77.5% · 2560 86.8% · 1440 만 98.6%. 원본은 둘 다 424x282 로 같다).
   붙이지 않으면 지금 그대로(auto)다. */
.fp-table--fixed{table-layout:fixed}
/* 사진이 든 머리칸은 **위끝을 맞춘다** — 칸마다 글줄 수가 달라도 사진 두 장이 같은 높이에서 시작한다
   (2026-09-23 mini-facelift 1279 실측 위끝 차 21px). 사진이 없는 칸(가운데 「VS」)은 그대로 가운데다. */
.fp-table--fixed thead th:has(.fp-media){vertical-align:top}
/* 머리칸 색 손잡이 `--fp-th-bg` — 원문 비교표는 머리칸 **셋이 서로 다른 색**으로 두 방법을 가르고 권하는 쪽을 강조한다
   (2026-09-23 SMAS-facelift 원본 실측 General (230,234,247) · VS (255,255,255) · 1mm facelift (230,239,191)).
   지금은 셋이 같은 분홍이라 「1mm 이 낫다」는 이 표의 본문이 색에서 사라져 있었다. 값을 안 주면 지금 그대로다. */
.fp-table thead th{padding:calc(14*var(--u)) calc(8*var(--u));background:var(--fp-th-bg,var(--c-pink-bg));font-size:calc(18*var(--u));font-weight:700}
/* 권하는 열 **전체**를 테 있는 카드로 묶는다(원본 `border:10px solid #d0eb81` 이 머리칸부터 마지막 행까지 이어진다).
   칸마다 `class="fp-tcol"` 을 달고 루트에 `--fp-tcol-w`(테 두께) · `--fp-tcol-c`(테 색)를 준다 — 기본 0/투명이라 안 달면 안 바뀐다.
   `border-collapse:collapse` 라 굵은 테가 옆칸의 1px 선을 이긴다(카드 안이 줄로 갈리지 않는다). */
.fp-table :is(td,th).fp-tcol{border-left:var(--fp-tcol-w,0) solid var(--fp-tcol-c,transparent);border-right:var(--fp-tcol-w,0) solid var(--fp-tcol-c,transparent)}
.fp-table thead .fp-tcol{border-top:var(--fp-tcol-w,0) solid var(--fp-tcol-c,transparent)}
.fp-table tbody tr:last-child .fp-tcol{border-bottom:var(--fp-tcol-w,0) solid var(--fp-tcol-c,transparent)}
.fp-table :is(td,tbody th){padding:calc(14*var(--u)) calc(8*var(--u));border-bottom:1px solid #d9d9d9}
.fp-table tbody th{font-weight:700;background:var(--c-grey-bg)}
.fp-table td:nth-child(even){background:#fff}
@media (min-width:1280px){
.fp-table{font-size:calc(20*var(--u))}
.fp-table thead th{height:calc(80*var(--u));padding:calc(20*var(--u));font-size:calc(28*var(--u))}
.fp-table :is(td,tbody th){padding:calc(30*var(--u)) calc(20*var(--u))}
}

/* ── 푸터 ─────────────────────────────────────────────────── */
.fp-footer{background:linear-gradient(180deg,#f6f6f6 0%,#e6e6e6 100%);font-size:max(12px,calc(15*var(--u)));color:var(--c-text)}
/* 본문↔푸터 **경계** `body.fp-footer-edge`(2026-09-28 8단계 ④ · interior 1차 검토 ③ · notice 조판이 같이 올렸다) —
   푸터 그라데이션의 첫 색이 `#f6f6f6` 라 마지막 섹션이 회색 띠(#f8f8f8)면 **Δ2/255**, 흰색이면 Δ9 로 붙어 경계가 안 보인다.
   지난 29장은 전부 `.fp-special`(짙은 칸)로 끝나 이 자리를 만난 적이 없고, 8·9단계 **게시판 목록 여섯**은 목록 다음이 바로 푸터다.
   **안 켜면 한 픽셀도 안 바뀐다.** 값은 있는 구분선 토큰 `--c-div`(#c8c8c8)이고 두께·색 둘 다 페이지가 바꿀 수 있다. */
body.fp-footer-edge .fp-footer{border-top:var(--fp-footer-bt,1px) solid var(--fp-footer-bc,var(--c-div))}
.fp-footer__inner{padding:calc(40*var(--u)) calc(20*var(--u))}
.fp-footer__logo{display:block;width:calc(135*var(--u));height:calc(32*var(--u))}
.fp-footer__logo img{width:100%;height:100%}
.fp-footer__info{margin-top:calc(34*var(--u))}
.fp-footer__info p+p,.fp-footer__row span+span{margin-top:calc(12*var(--u))}
/* 대표자명·사업자번호·전화번호는 번호 한가운데서 끊기면 안 된다(1280·1440 에서 'Do Eon-/rok' '515-43-/00912' '+82-2-552-/1171') */
.fp-footer__row span{display:block;white-space:nowrap}
.fp-footer__copy{font-size:max(11px,calc(11*var(--u)));color:#646464}
.fp-footer__h{font-size:max(12px,calc(15*var(--u)));font-weight:700;line-height:1.3}
.fp-footer__guide,.fp-footer__social{margin-top:calc(30*var(--u))}
.fp-footer__guide ul,.fp-footer__social ul{margin-top:calc(24*var(--u))}
.fp-footer__guide li+li{margin-top:calc(16*var(--u))}
.fp-footer__guide a{display:inline-flex;align-items:center;gap:calc(10*var(--u))}
.fp-footer__guide a::after{content:'';flex:none;width:calc(20*var(--u));height:calc(20*var(--u));border-radius:50%;box-shadow:inset 0 0 0 1px var(--c-div);
background:url(https://channel-static.rebeauty.co.kr/1mmps/draft2/_fp/a/chev-right.33de3ba1.svg) 50% 50%/calc(4*var(--u)) calc(8*var(--u)) no-repeat}
.fp-footer__guide a:hover{text-decoration:underline}
.fp-footer__social ul{display:flex;gap:calc(30*var(--u))}
.fp-footer__social svg{display:block;width:calc(20*var(--u));height:calc(20*var(--u));fill:var(--c-text)}
.fp-footer__social a{display:block}   /* 2026-10-01 Socials 아이콘을 링크로(footer.html) */
.fp-footer__side{margin-top:calc(30*var(--u));padding-top:calc(30*var(--u));border-top:1px solid #d9d9d9}
.fp-footer__hours p,.fp-footer__parking p{margin-top:calc(8*var(--u))}
.fp-footer__parking>.fp-footer__h{margin-top:0}   /* 주차 칸 제목은 p 라 위 규칙에 걸려 두 'Clinic hours' 가 8px 어긋났다 */
.fp-footer__hours .fp-footer__h+p,.fp-footer__parking .fp-footer__h+p{margin-top:calc(24*var(--u))}
.fp-footer__parking{margin-top:calc(30*var(--u))}
.fp-footer__sub{color:#646464}
.fp-footer__map{margin-top:calc(20*var(--u));width:100%;height:calc(376*var(--u));object-fit:cover}
@media (min-width:1280px){
.fp-footer__inner{display:grid;grid-template-columns:calc(626*var(--u)) calc(74*var(--u)) calc(253*var(--u)) calc(100*var(--u)) 1fr;width:calc(1440*var(--u));margin:0 auto;padding:calc(60*var(--u)) 0 calc(80*var(--u))}
.fp-footer__main{grid-column:1/3;grid-row:1/3}   /* 2열은 빈 사이 칸 — 사업자 정보 줄이 626u 에 못 들어가 접혔다(1280~1535 는 12px 바닥 때문에 더 넓다) */
.fp-footer__logo{width:calc(178*var(--u));height:calc(44*var(--u))}
.fp-footer__info{margin-top:calc(50*var(--u))}
.fp-footer__row{display:flex;flex-wrap:wrap;align-items:center;margin-top:calc(8*var(--u))!important}
.fp-footer__row span+span{margin-top:0}
.fp-footer__row span+span::before{content:'';display:inline-block;width:1px;height:calc(12*var(--u));margin:0 calc(12*var(--u));background:var(--c-div);vertical-align:calc(-1*var(--u))}
.fp-footer__copy{margin-top:calc(8*var(--u))!important;font-size:max(11px,calc(12*var(--u)))}
.fp-footer__guide,.fp-footer__social{margin-top:calc(50*var(--u))}
.fp-footer__side{display:contents}
.fp-footer__hours{grid-column:3;grid-row:1}
.fp-footer__parking{grid-column:5;grid-row:1;margin-top:0;max-width:calc(370*var(--u))}   /* 시안 글 상자 370 — 1fr(387) 그대로면 줄이 다른 데서 꺾인다 */
.fp-footer__map{grid-column:3/6;grid-row:2;margin-top:calc(30*var(--u));width:calc(740*var(--u))}
}
/* 1280~1535 는 12px 바닥값 때문에 글자가 보드보다 크다 — 한 줄에 안 들어가 접히면서 줄 앞에 구분선만 남았다 → 모바일처럼 줄바꿈(구분선 없음) */
@media (min-width:1280px) and (max-width:1535px){
.fp-footer__row{display:block}
.fp-footer__row span+span{margin-top:calc(8*var(--u))}
.fp-footer__row span+span::before{content:none}
}

/* ── CSS 도해 ─────────────────────────────────────────────
   옛 홈페이지의 「글자가 구워진 그림」을 **CSS 로 그리고 그 위에 진짜 글자**로 다시 만드는 최소 집합
   (2026-09-18 사용자 피드백 2·3). 색은 새 팔레트(분홍 #ffbade · 회색 · 검정)다 — 옛 사이트 연두색을 베끼지 않는다.
   글자는 그 그림에서 **전사한 것만**(pages/<슬러그>/baked.txt, verify ④·⑬).
   층 변수 `--fp-z` 는 정지 화면에 아무 일도 하지 않는다(루트에 perspective 가 없으면 translateZ 는 정사영이라 픽셀이 같다).
   마우스가 올라온 동안만 fp.js 가 루트에 원근을 켜서 층이 갈린다(template/MOTION.md 4절 ③).
   진입 모션은 RV 목록 밖이다 → 루트에 `.fp-rv` 를 붙인다(목록에 넣으려면 fp.css·fp.js 를 같이 고쳐야 한다). */
/* 도해 루트에는 **`.fp-dgm` 을 같이 붙인다** — fp.js 의 기울기 목록(TILT)·3° 상한(TFLAT)·호버 원근이 이 클래스를 본다.
   빠뜨리면 모양은 멀쩡하고 3D 만 조용히 안 걸린다. */
/* 도해 안 순번은 **nth-of-type** 으로 센다 — fp.js 가 빛 <i> 를 첫 자식으로 넣으므로 nth-child 면 마우스가 올라간 순간
   칸 색이 뒤바뀌거나(venn·plus) PC 열 배분이 밀린다(hex, 실측 높이 +101px). 항목은 li, 빛은 i 라 형이 갈린다. */
.fp-hex,.fp-venn,.fp-plus,.fp-ovl,.fp-dgm{--fp-line:var(--c-pink);--fp-mark:#ffffff;--fp-pill-bg:var(--c-dark);--fp-pill-c:var(--c-pink)}

/* ① 방사형 라벨 도해 — 가운데 그림 + 라벨 알약 4~6 + 설명 (옛 「Features of 1mm …」 육각 통이미지 8장)
   첫 항목이 반드시 `.fp-hex__core` 다(PC 열 배분이 순번으로 간다). 라벨이 6개면 style="--fp-rows:3" */
.fp-hex{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:calc(24*var(--u));justify-items:center;margin-inline:auto;
--fp-cut:26%;--fp-poly:polygon(50% 0,100% var(--fp-cut),100% calc(100% - var(--fp-cut)),50% 100%,0 calc(100% - var(--fp-cut)),0 var(--fp-cut))}
/* ≤1279 가운데 그림 폭은 `--fp-core-mo` 로 따로 받는다 — 한 변수였을 때 PC 를 원본 비에 맞추려고 `--fp-core:584` 를 주면
   ≤1279 에서 육각이 기둥 폭 100% 가 되어 좌우 꼭짓점의 마디 점이 기둥 밖으로 반쯤 나갔다(2026-09-23 endoscopic-forehead-lift 390 실측 7.6px씩).
   안 주면 `--fp-core`, 그것도 없으면 260 — 지금 값이다. */
.fp-hex__core{position:relative;width:100%;max-width:calc(var(--fp-core-mo,var(--fp-core,260))*var(--u))}
.fp-hex__core::before{content:'';position:absolute;inset:calc(-2*var(--u));z-index:0;clip-path:var(--fp-poly);background:var(--fp-line)}
/* 액자는 **정사각이 기본**이다 — 옛 육각 도해의 원본 액자가 840x858(거의 1:1)이었고, 3/4 로 두면 육각이 세로로 늘어나
   「얼굴은 위 1/3 · 아래 절반은 어깨」가 된다(2026-09-19 검토, 8개 중 6개가 그 꼴이었다).
   `hex-pc` 합성본은 보드 520x693(3:4)이라 비율이 다르다 → cover 가 위아래를 잘라 내고 **그 자리를 `--fp-op` 가 정한다.**
   기본 `50% 30%` 는 합성본의 얼굴 중심(보드 y 34.9%)을 액자 36.5% 에 놓는 값이다(9곳 공통 — 기하가 같다).
   ⚠ `--fp-ar` 가 합성본 비율과 **같으면 cover 가 자를 것이 없어 `--fp-op` 는 아무 일도 하지 않는다**(3/4 로 두었을 때가 그랬다). */
/* 바탕 손잡이 `--fp-core-bg`(2026-09-24 신설, 기본값이 지금 값 = `--c-pink-bg`) — 액자가 사진이 아니라 **인라인 svg 도해**일 때
   「바깥 얇은 테 ↔ 안쪽 도형」 사이 고리가 옅은 분홍으로 채워진다. 원본이 그 고리를 **비워 섹션 바탕을 보여 주는** 짜임이면
   `transparent` 를 줘야 하는데 `--c-*` 는 인라인으로 못 준다(검사 ⑩ 은 `--fp-*` 만 받는다) → 띠 색과 같은 원을 svg 맨 아래에 깔아
   비껴가는 수밖에 없었고, 그러면 **띠 색을 바꿀 때 그 하드코딩도 같이 바꿔야 하는** 자리가 된다(6단계 facial-fat-transplant §10). */
.fp-hex__hex{position:relative;z-index:1;width:100%;aspect-ratio:var(--fp-ar,1/1);overflow:hidden;clip-path:var(--fp-poly);background:var(--fp-core-bg,var(--c-pink-bg))}
.fp-hex__hex img{width:100%;height:100%;object-fit:cover;object-position:var(--fp-op,50% 30%)}
.fp-hex__item{display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--u));text-align:center;max-width:calc(var(--fp-item,300)*var(--u));
transform-style:preserve-3d}   /* 층(--fp-z)이 **손자**(라벨·설명)라 이 칸이 평면이면 통째로 뭉개진다 — 넣기 전 실측 Δ=0px(층 8개 전부 죽어 있었다).
     정지 화면에는 원근이 없어 픽셀이 같다. overflow·filter·opacity<1 을 여기 걸면 다시 flat 으로 강등된다(MOTION.md 4절 ⑩). */
.fp-hex__label{--fp-z:calc(26*var(--u));transform:translateZ(var(--fp-z));padding:calc(9*var(--u)) calc(20*var(--u));border-radius:999px;
background:var(--fp-pill-bg);color:var(--fp-pill-c);font-size:var(--fs-body);font-weight:700;line-height:1.3}
/* 라벨(= 원본의 표제)은 자기 설명문보다 작으면 안 된다 — max(12px,16u) 는 1440 에서 12px 바닥값으로 내려가
   고지문·캡션·칩과 같은 크기가 되고 설명문(15px)보다 작아졌다(2026-09-19 검토). 원본은 알약·설명 둘 다 15px 였다. */
.fp-hex__desc{--fp-z:calc(6*var(--u));transform:translateZ(var(--fp-z));font-size:var(--fs-body)}
/* 라벨 진입 시차(MOTION.md 4절 ⑨) — 알약만 60ms 씩 늦게 제자리로. 투명도는 안 건드린다: 숨은 채 남을 길을 만들지 않는다 */
html.fp-anim .fp-hex.fp-rv .fp-hex__label{transition:transform 700ms cubic-bezier(.22,.61,.36,1) var(--fp-dly,0ms)}
html.fp-anim .fp-hex.fp-rv:not(.fp-in) .fp-hex__label{transform:translateY(calc(16*var(--u))) translateZ(var(--fp-z))}
.fp-hex__item:nth-of-type(3){--fp-dly:60ms}
.fp-hex__item:nth-of-type(4){--fp-dly:120ms}
.fp-hex__item:nth-of-type(5){--fp-dly:180ms}
.fp-hex__item:nth-of-type(6){--fp-dly:240ms}
.fp-hex__item:nth-of-type(7){--fp-dly:300ms}
/* ≤1279 **왼쪽 정렬** `.fp-hex--mo-left` — 모바일 원본이 알약·설명을 모두 같은 왼쪽 선에 세우는 도해가 있다
   (2026-09-23 SMAS 모바일 원본 589x1310: 다섯 알약 + 다섯 설명이 전부 x≈14.3).
   지금은 `align-items:center;text-align:center` 가 상수라 390 에서 왼쪽 선이 x 37.9/89.4/72.4/84.0/26.8 로 들쭉날쭉했다.
   PC(≥1280)는 `:nth-of-type(even/odd)` 가 좌·우로 가르므로 이 수식자를 그 구간에서 되돌린다. 붙이지 않으면 안 바뀐다. */
@media (max-width:1279px){.fp-hex--mo-left>.fp-hex__item{align-items:flex-start;text-align:left;width:100%;max-width:none}}

/* ② 겹친 원 비교(벤) — 원 2~3개가 겹치고 각 원 안에 글 (옛 eye-correction_img · under-eye img13) */
/* 루트 여백 손잡이 `--fp-venn-rp`(2026-09-24 신설, 기본값이 지금 값) — 이 여백은 **칸이 아니라 도해 루트**의 것이라
   `--fp-venn-p`(칸 안쪽)로는 못 준다. `.fp-venn--oval` 을 `.fp-split` 의 좁은 칸에 넣으면 ≥1280 의 좌우 40u(1440 에서 60px)가
   그대로 빠져 타원이 원문 실측의 90% 로 작아졌다(6단계 facial-fat-transplant §8). 안 주면 한 픽셀도 안 바뀐다.
   ⚠ **두 보드에 규칙이 따로 있는 속성이라 이름도 둘**이다(`--fp-venn-p`/`-mo` 와 같은 꼴) — ≥1280 은 `--fp-venn-rp`,
   ≤1279 는 `--fp-venn-rp-mo`. 한 이름으로 몰면 PC 만 고치려는 값이 **모바일 여백까지 바꾼다**(처음 판에서 실제로 그랬다:
   390 세로 여백이 21.7 → 54px 이 됐다). */
.fp-venn{position:relative;display:flex;flex-direction:column;align-items:center;isolation:isolate;margin-inline:auto;
padding:var(--fp-venn-rp-mo,calc(20*var(--u)));background:var(--fp-bg,transparent);--fp-lap:12%}
.fp-venn__c{display:grid;place-items:center;width:100%;max-width:calc(280*var(--u));aspect-ratio:1;border-radius:50%;
/* 글자·여백 손잡이 `--fp-venn-fs`/`--fp-venn-p` — 원본 원이 우리보다 작은데 글자는 클 때 「다시 만든 도해는 원본과 같은 크기·무게」를
   못 지켰다(2026-09-23 thread-lifting §9 16% 작음 · Mid-face-lift §4 는 원을 56% 키워야 라벨이 들어갔다).
   `.fp-hex` 가 2026-09-22 에 `--fp-label-fs`·`--fp-desc-fs` 로 메운 것과 같은 구멍이다. 기본값이 지금 값이다. */
padding:var(--fp-venn-p-mo,calc(34*var(--u)));background:var(--fp-c,rgba(58,58,58,.10));mix-blend-mode:multiply;
text-align:center;font-size:var(--fp-venn-fs-mo,var(--fs-body));line-height:1.35;--fp-z:calc(10*var(--u));transform:translateZ(var(--fp-z))}
.fp-venn__c:nth-of-type(even){--fp-c:rgba(255,186,222,.55);--fp-z:calc(22*var(--u))}
/* 층(MOTION.md 4절 ⑫) — 원을 번갈아 12u 씩 띄운다. 겹친 자리가 호버 때 앞뒤로 갈려 「겹침」이 깊이로 읽힌다.
   mix-blend-mode 가 걸린 칸은 자기 안쪽을 평면으로 만들므로(사양) 층은 **원 자신**에 준다 — 글에 주면 안 산다. */
/* ≤1279 겹침은 `--fp-lap-mo` 로 따로 받는다(안 주면 `--fp-lap`, 그것도 없으면 12% = 지금 값) —
   값이 **담는 상자 폭** 기준 % 인데 PC 는 원을 **가로**로, ≤1279 는 **세로**로 겹친다(margin-top 의 % 도 폭 기준이다).
   PC 에서 담는 상자는 원 셋을 담고 ≤1279 에서는 원 하나와 거의 같으므로, 한 이름으로 PC 를 원본 비에 맞추면
   ≤1279 에서 겹침이 **세 배 가까이 얕아진다**(2026-09-23 men's-eye-surgery: PC 원 지름의 10.55% = 390 에서 3.78%
   → 원 303.3px 에 겹침 11.5px 이라 「겹친 원」이 아니라 「쌓인 원」으로 읽혔다).
   `.fp-venn--plus` 는 `--fp-olap`(보드 px)으로 이 문제를 비껴가 있었고 base 에는 그 길이 없었다. */
.fp-venn__c+.fp-venn__c{margin-top:calc(-1*var(--fp-lap-mo,var(--fp-lap)))}

/* ②a 겹친 원 + 칸 사이 '+' 이음 뱃지 — `.fp-venn--plus`(2026-09-22, 3단계 rhinoplasty 3장의 sub_rhin_type_line.png)
   원 N개 사이에 N−1개. `.fp-plus` 는 뱃지가 루트의 ::after 하나 + left/top 50% 고정이라 원이 셋이면 **가운데 원 글자 위**에 얹히고
   (`.fp-flow`·`.fp-duo` 가 li+li 로 내려온 것과 같은 고장), `.fp-flow` 는 겹치지 않는 사각 판이다.
   **겹침을 길이(보드 px `--fp-olap`)로 받는다** — 뱃지는 「겹친 자리 한가운데」에 서야 하는데,
   base 의 `--fp-lap`(%)은 음수 margin 에서 **컨테이너 폭** 기준이고 뱃지의 left/top % 는 **원 폭** 기준이라 둘이 어긋난다.
   한 값(`--fp-olap`)이 겹침과 뱃지 자리를 같이 정하므로 둘이 따로 놀 수 없다.
   뱃지 지름 `--fp-bsz` 는 **원 지름 대비 %**(abspos 의 width/height % = 담는 상자 = 원) — 원본에서 잰 「뱃지÷원」을 그대로 넣으면
   PC·모바일 어느 쪽에서도 그 비가 지켜진다(보드 px 로 주면 원 지름이 보드마다 달라 비가 갈린다).
   ⚠ 뱃지는 `mix-blend-mode:multiply` 가 걸린 원 **안**이라 같이 multiply 된다(검정 원은 그대로, 분홍 十 만 배경 위에서 살짝 짙어진다)
   — 그리고 같은 이유로 제 층(--fp-z)을 못 가진다(blend 가 자기 안쪽을 평면으로 만든다. COMPONENTS 22 의 「원 안의 글」과 같다). */
.fp-venn--plus{--fp-lap:calc(var(--fp-olap,40)*var(--u))}
.fp-venn--plus>.fp-venn__c+.fp-venn__c::before{content:'';position:absolute;z-index:1;
left:50%;top:calc(var(--fp-olap,40)*var(--u)/2);width:var(--fp-bsz,15.5%);height:var(--fp-bsz,15.5%);
transform:translate(-50%,-50%);border-radius:50%;background:
linear-gradient(var(--c-pink) 0 0) no-repeat 50% 50%/6.5% 39%,
linear-gradient(var(--c-pink) 0 0) no-repeat 50% 50%/39% 6.5%,var(--c-dark)}

/* ②b **테만 있는 타원** — `.fp-venn--oval`(2026-09-24, 6단계 facial-fat-transplant §8 「Point 01~03」 네 칸 × 셋)
   base `.fp-venn` 은 「채운 원이 겹친다」는 짜임이라 **겹치지 않는 테두리 타원**을 못 냈다: ⓐ 원이라 `aspect-ratio:1` ⓑ 바탕이 채워지고
   `mix-blend-mode:multiply` 로 겹친 자리를 어둡게 하며 ⓒ 겹침이 기본 12% 다. 원문은 `.sub_fat_trans_circle` = **`1px solid #bbe04e` + `border-radius:50%` + 속 비움**이고
   ≥1701 은 220x220 **원**, 1401~1700 은 `width:27%;height:auto` 라 **글이 정하는 타원**(1440 실측 160x205)이다 — 즉 **높이를 글이 정한다.**
   그래서 이 변형은 `aspect-ratio:auto` 가 기본이다(칸이 글을 감싸므로 base 의 「한 원에 한두 줄까지」 제약이 풀린다 — 원문은 네 줄이다).
   겹침 대신 `gap` 으로 벌리고(원문 `margin:0 10px`), 색은 도해 공통 규칙대로 **우리 팔레트**(`--fp-line`)로 간다. 붙이지 않으면 한 픽셀도 안 바뀐다. */
.fp-venn--oval{--fp-lap:0px;--fp-lap-mo:0px;gap:var(--fp-ov-gap,calc(20*var(--u)))}
.fp-venn--oval>.fp-venn__c{--fp-c:transparent;aspect-ratio:var(--fp-ov-ar,auto);mix-blend-mode:normal;
border:var(--fp-ov-bw,max(1px,calc(2*var(--u)))) solid var(--fp-ov-c,var(--fp-line))}

/* ③ 판 두 개 + 가운데 이음 뱃지 — 옛 「스타디움 2개 + 연두 원 안 흰 +」(under-eye img14-1·img16-1) */
.fp-plus{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:calc(30*var(--u));margin-inline:auto}
.fp-plus__p{display:grid;place-items:center;min-height:calc(130*var(--u));padding:calc(28*var(--u)) calc(30*var(--u));--fp-z:calc(12*var(--u));transform:translateZ(var(--fp-z));
border-radius:999px;background:var(--fp-c,var(--c-grey-bg));text-align:center;font-size:var(--fs-body);font-weight:700;line-height:1.35}
.fp-plus__p:nth-of-type(even){--fp-c:var(--c-pink-bg)}
.fp-sec--grey .fp-plus__p:nth-of-type(odd){--fp-c:#fff}   /* 회색 띠 안에서 회색 판은 사라진다. 분홍 칸은 그대로 둬 번갈이를 지킨다 */
.fp-sec--pink .fp-plus__p:nth-of-type(even){--fp-c:#fff}   /* 분홍 띠에서는 분홍 칸이 사라진다 — 반대로 뒤집는다 */
.fp-plus::after{content:'';position:absolute;left:50%;top:50%;z-index:1;width:calc(46*var(--u));height:calc(46*var(--u));
margin:calc(-23*var(--u)) 0 0 calc(-23*var(--u));--fp-z:calc(26*var(--u));transform:translateZ(var(--fp-z));border-radius:50%;background:
linear-gradient(var(--c-pink) 0 0) no-repeat 50% 50%/calc(3*var(--u)) calc(18*var(--u)),
linear-gradient(var(--c-pink) 0 0) no-repeat 50% 50%/calc(18*var(--u)) calc(3*var(--u)),var(--c-dark)}

/* ④ 사진 위 라벨·화살표·지시점 오버레이 — **임상 전후 사진은 절대 다시 만들지 않는다.**
   사진은 그대로 두고, 사진에 구워진 라벨 띠·화살표·점선만 HTML/CSS 로 다시 얹는다(피드백 3).
   자리는 사진 안 비율(%)로 준다: style="--fp-x:4%;--fp-y:85%". 다른 쪽에 붙이려면 --fp-org(예 -100%,0 / -50%,-50%).
   `.fp-ovl--crop` 은 구운 글자 띠를 잘라 내거나(--fp-ar 로 비율을 줄인다) 한 장에 구운 전·후 두 컷을 나눈다(--fp-op:0 0 / 100% 0). */
/* 위 여백 손잡이 `--fp-mt`(기본 0 = 지금 값) — `margin:0 auto` 가 **담는 칸의 `>*+*` 여백을 지운다.**
   `.fp-ovl`(0,1,0)가 `.fp-card>*+*`(0,1,0)보다 뒤에 있어 차례로 이긴다 → 같은 세 장 묶음 안에서
   `.fp-figure` 를 쓴 칸은 제목↔그림 여백이 있고 `.fp-ovl` 을 쓴 칸은 **0px** 로 붙었다(2026-09-23 endoscopic-forehead-lift Check 01 ↔ 02·03, 검토 두 회차가 같이 올렸다).
   칸 여백과 같은 값을 주려면 `max(calc(30*var(--u)),calc(50*var(--col)/1440))` — ≤1279 30u · PC 50u 를 그대로 재현한다. */
/* **원본 픽셀 천장** `--fp-figw-max`(기본 none = 지금 값) — `.fp-figure`·`.fp-types figure`·`.fp-venn` 과 **같은 이름**을
   `.fp-ovl` 에도 연다(2026-09-28 8단계 ④ medical-staff-introduction 인물 액자 다섯). 액자 폭은 보드 배율(`--u`)을 타므로
   1440 을 원문에 맞추면 2560 에서 원본을 넘긴다 — 실측 폭/네이티브 **2560 917.6/751 = 1.222** ↔ 1920 0.959 · 1440 0.705.
   ⚠ verify 는 2560 에서 캡처를 안 뜨고 넘침만 보므로 **어느 검사도 이 자리를 안 본다**(육안 목록 11 이 「1920·2560 에서 본다」로 못박은 자리다). */
.fp-ovl{position:relative;width:100%;margin:var(--fp-mt,0) auto;max-width:var(--fp-figw-max,none)}   /* 액자에 폭을 준다 — flex/grid 의 **직접 자식**이 되면 width:auto 가 shrink-to-fit 이라
   안쪽 `loading="lazy"` 사진이 오기 전에는 0×0(인라인 svg 는 300px)으로 주저앉는다. `.fp-types figure`·`.fp-duo__fig` 가 이미 같은 이유로 width:100% 다.
   2026-09-21 관문 실측: 이 결함이 **화면에 나타나는 조건은 「맨 아래로 한 번에 건너뛰기」(verify ⑧a)** 다 — 천천히 스크롤하면 사진이 와서 액자가 폭을 되찾는다.
   그래서 1단계 승인 캡처(천천히 스크롤해 찍는다)에는 안 보였고, 스크롤 안 하는 프로브로 재면 0×0 으로 보였다. **둘 다 사실이고 조건이 다르다** — 이 한 줄이 두 길을 같게 만든다.
   눈에 보이는 변화는 canthoplasty `.fp-vs--stack` 뿐이다(1920 458→513 · 1279 458→576 · 1440·1280·390 그대로). block 흐름에서는 width:auto 와 같은 값이다. */
/* 액자 폭을 변수로 내준다 — `--u` 는 **보드 배율**이라 액자 폭과 비례하지 않는다.
   PC(≥1280) 에서 `.fp-split` 안 액자는 700u 인데 ≤1279 에서는 `--col`(=320u) 이라, 같은 `calc(N*var(--u))` 가 한쪽에서 2.19배 커진다
   (2026-09-21 double-eyelid-revision 원그래프 라벨이 정확히 그래서 PC 만 절반 크기였다).
   조판은 보드 분기를 세지 말고 **액자 기준 한 벌**로 쓴다: `--fp-tag-fs:calc(34*var(--fp-fw)/700)`(원본 그림 폭이 700 일 때). */
.fp-ovl{--fp-fw:var(--col)}
.fp-ovl img{width:100%}
/* 바탕이 **인라인 SVG** 여도 된다 — 사진이 아니라 순수 벡터 도해(옛 눈 단면 그림 5장처럼 같은 그림에 표시 자리만 다른 것)는
   그림을 한 벌만 두고 표시(__ell·__zone·__dot)를 --fp-x/--fp-y 로 옮겨 재사용한다. 옛 자산 파일이 그만큼 사라진다. */
.fp-ovl>svg{display:block;width:100%;height:auto}
/* **액자 테 손잡이** `--fp-frame-bw`/`--fp-frame-bc`(2026-09-24 신설, 기본 **0 / transparent = 지금 값**) — 원문이 사진·도해 둘레에
   색 테를 두르는 자리가 있다(7단계 shrink sec2 모델 액자: 원본 793x476 에 **8px** 연두 `#eaf7b8` = 폭의 1.01%).
   모델을 합성본으로 갈면 그 테가 같이 사라지는데 `.fp-ovl`·`.fp-figure` 에는 테를 줄 이름이 없었다(`--fp-duo-bw`/`-bc` 는 `.fp-duo` 전용).
   ⚠ **테는 액자가 아니라 「안에 든 그림」에 건다.** 액자(`.fp-ovl`)에 걸면 ① `.fp-types>li>figure:last-child` 의 **간격용 투명 border**(20u)와
   한 자리를 다퉈 테가 위쪽만 끊기고 ② `--fp-fw`(= `--w`×`--u`)가 실제 그림 폭보다 테 두께 두 벌만큼 커져 `calc(N*var(--fp-fw)/원본폭)` 글자 식이 통째로 어긋난다.
   그림에 걸면 표시(`__dot`·`__tag`)의 % 기준 상자(액자의 padding 상자)는 그대로이고, 그림만 테 두께만큼 안으로 들어온다
   (8u 면 1440 에서 6px = 액자의 0.8% — 표시 좌표는 그만큼만 어긋난다. 테가 두꺼우면 좌표를 다시 잰다). */
.fp-ovl>img,.fp-ovl>picture>img,.fp-ovl>svg,.fp-figure>img,.fp-figure>picture>img{
/* 모서리 손잡이 `--fp-frame-r`(기본 0 = 지금 값, 2026-09-24 7단계 ④ Ulthera Point 04) — 7단계 ② 가 연 `--fp-frame-bw`/`-bc` 는 테만 준다.
   원문이 **라임 테 + 둥근 상자**인 자리는 테만 살리면 모서리가 직각으로 남는다(원본 585x264 상자 · 1440 환산 반지름 27px).
   테와 **같은 자리(그림)** 에 건다 — 액자에 걸면 `--fp-fw` 가 어긋난다(위 ⚠ 와 같은 까닭). */
/* 바탕 손잡이 `--fp-frame-bg`(기본 transparent = 지금 값, 2026-09-28 8단계 ④ medical-staff-introduction 인물 칸 다섯) —
   7단계 ② 가 연 `--fp-frame-bw`/`-bc` 는 테만, 7단계 ④ 의 `--fp-frame-r` 은 모서리만 준다. 원문 인물 칸은
   「둥근 #efefef 카드(모서리 20px) + 뒤 #f7f7f7 원 장식」 위에 **투명 PNG 인물**을 올린 짜임이라 채움이 없으면
   흰 섹션에서는 인물이 흰 바탕에 그대로 서고 사진 아래변이 잘린 채 끝난다(같은 페이지 안에서 다섯 칸이 갈린다).
   테·모서리와 **같은 자리(그림)** 에 건다 — 액자에 걸면 `--fp-fw` 가 어긋난다(위 ⚠ 와 같은 까닭). */
border:var(--fp-frame-bw,0) solid var(--fp-frame-bc,transparent);border-radius:var(--fp-frame-r,0);
background:var(--fp-frame-bg,transparent)}
.fp-ovl--crop{overflow:hidden;aspect-ratio:var(--fp-ar,3/1)}
.fp-ovl--crop img{width:100%;height:100%;object-fit:cover;object-position:var(--fp-op,50% 0)}
/* 칩 안 `<strong>` 의 **무게·크기** 손잡이 `--fp-tag-strong-fw`/`-fs`(기본값 둘 다 `inherit` = 지금 값,
   2026-09-28 8단계 ④ medical-staff-introduction 이름 칩 다섯) — 원문 이름 칩은 한 상자 안에서 위계가 **두 층**이다:
   직함 `p 14px/400` 안에 이름 `strong 19px/600`(크기비 1.357 · 두 단계 굵게). 우리 칩은 `--fp-tag-fw` 가 상자 전체에
   걸리고 `:where(.fp-page main) strong{font-weight:inherit}`(0-4 형광 규칙)이 굵기를 **형광으로 갈음**하는데,
   덮개 칩은 `.fp-plain` 으로 그 형광을 꺼야 해서 **강조가 하나도 안 남는다**(배포본 실측 칩 300 · 그 안 strong 도 300 ·
   크기비 1.000). `--fp-tag-fw` 를 올리면 직함까지 굵어져 원문 위계가 반대로 뒤집힌다.
   ⚠ 이름은 `--fp-tag-*` 계통이라 `.fp-ovl__tag` 안에서만 듣는다(본문 `<strong>` 은 그대로 형광이다). */
.fp-ovl__tag{position:absolute;left:var(--fp-x,4%);top:var(--fp-y,4%);z-index:3;--fp-z:calc(26*var(--u));
/* 회전 손잡이 `--fp-tag-rot`(기본 0deg = 지금 값, 2026-09-24 7단계 ④ — shrink·Ulthera·thermage **세 장**이 같이 올렸다).
   옛 도해는 라벨을 90° 돌려 구워 둔 자리가 계속 나온다(액자 밖 세로 워드마크 · 막대 왼쪽 좁은 칸의 세로글씨).
   `--fp-rot` 은 `.fp-ovl__zone`·`__ell` 전용이라 글자 칩에는 안 들었다 → 같은 자리에 같은 이름꼴로 연다.
   ⚠ **`--fp-org`(자리 옮김) 다음, `translateZ` 앞**이다 — 옮기고 나서 **칩 한가운데를 축으로** 돈다.
   ⚠ 칩은 `white-space:nowrap` 이라 돌리면 **상자가 액자 밖으로 나간다**(`.fp-ovl` 은 overflow 를 안 자르지만 `--crop` 은 자른다) → 돌린 뒤 자리를 다시 잰다.
   ⚠ `.fp-ovl--mo-list` 는 `transform:none` 이라 ≤1279 목록에서는 저절로 풀린다. */
transform:translate(var(--fp-org,0)) rotate(var(--fp-tag-rot,0deg)) translateZ(var(--fp-z));
/* 회전 축 손잡이 `--fp-tag-to`(기본 50% 50% = 지금 값, 2026-10-02 사용자 「세로 글자가 위에 너무 겹쳤어, 밑으로 — 다국어에서도」 thermage sec5).
   한가운데 축은 글이 긴 언어에서 세로 칩이 **위·아래로 같이** 자라 위 알약을 덮는다 → 글의 한쪽 끝을 축으로 고정한다.
   위끝 고정(90° 돌린 칩, 아래로만 자람): `--fp-tag-to:0 50%;--fp-org:0,-50%` → `--fp-x/--fp-y` 가 글 첫머리(위끝 가운데).
   아래끝 고정(위로만 자람): `--fp-tag-to:100% 50%;--fp-org:-100%,-50%` → `--fp-x/--fp-y` 가 글 끝(아래끝 가운데). */
transform-origin:var(--fp-tag-to,50% 50%);
display:inline-flex;align-items:center;justify-content:center;
/* 구운 글자를 **덮어야** 할 때가 있다(피부 위에 직접 구워져 잘라 낼 수 없는 자리) → 칩을 그 글자 상자만큼 키운다.
   자리는 사진 안 비율이므로 크기도 비율(%)로 준다 — 폭이 바뀌어도 덮는 자리가 같이 따라간다. */
min-width:var(--fp-minw,0);min-height:var(--fp-minh,0);
/* 폭 천장 `--fp-tag-maxw`(기본 none) + 줄바꿈 `--fp-tag-wrap`(기본 nowrap) — 원문이 **사진 밑변에 걸치는 긴 알약**(두 줄)으로 담은 자리를
   한 줄로밖에 못 실었다(2026-09-24 7단계 juvelook sec7 62자 · thermage sec4·sec5 두 줄 알약 · 6단계 facial-fat-transplant §7 이 처음 올렸다).
   ≤1279 에서는 12px 바닥값 × 글자수가 액자를 넘겨 `.fp-ovl--mo-list` 로 내릴 수밖에 없었고 **알약 모양·걸침·바탕을 모바일에서만 잃었다**.
   둘은 **짝으로** 준다 — `wrap` 만 주면 상자가 안 좁아져 줄이 안 접히고, `maxw` 만 주면 nowrap 이라 글자가 상자를 넘는다. */
max-width:var(--fp-tag-maxw,none);
padding:var(--fp-tag-p,calc(5*var(--u)) calc(13*var(--u)));border-radius:var(--fp-tag-r,999px);background:var(--fp-tag-bg,rgba(0,0,0,.82));color:var(--fp-tag-c,#fff);
/* 굵기 손잡이 `--fp-tag-fw` — 칩은 **원본 글자를 그대로 옮기는** 자리인데 기본이 굵게라, 보통 굵기 라벨을 옮기면 원본보다 무거워졌다
   (2026-09-23 SMAS 두 판 도해의 Epidermis·Dermis·Hypodermis·SMAS layer 여덟 · Mid-face-lift §8 네 칩). 기본값 700 = 지금 값. */
/* 글자 테 손잡이 `--fp-tag-stroke`(+ 색 `--fp-tag-stroke-c`) — 바탕 없는 칩으로 도해 위에 **직접** 얹는 글자가 있다
   (2026-09-24 facial-liposuction §10 화살표의 「Pure Fat Amount」: 먹 글자 + 흰 테. 원본 596px 판에서 글자 바깥 **8px**,
   1440 렌더로 2px = `paint-order:stroke fill` 기준 두께 4px). 없으면 빨강 그라데이션 위 먹 글자가 그대로 얹혀 원본보다 흐리다.
   **기본값 0px = 지금 값**이라 안 준 칩은 한 픽셀도 안 바뀐다. `paint-order` 가 있어야 테가 글자 **바깥쪽**만 먹는다(없으면 획이 반쯤 갉힌다). */
-webkit-text-stroke:var(--fp-tag-stroke,0px) var(--fp-tag-stroke-c,#fff);paint-order:stroke fill;
/* 줄 높이 손잡이 `--fp-tag-lh`(기본 1.35 = 지금 값, 2026-09-24 7단계 ④ they-swear §8) — 도해 칩이 두 줄일 때 우리 상자가 원본보다 두꺼웠다
   (「Bacteria, Fungi, / Viruses」 **46px** ↔ 원본 **27px**). 칩은 「원본과 같은 크기·같은 무게」를 지켜야 하는 자리라 줄 간격도 재서 옮길 수 있어야 한다. */
font-size:var(--fp-tag-fs,max(12px,calc(14*var(--u))));font-weight:var(--fp-tag-fw,700);line-height:var(--fp-tag-lh,1.35);white-space:var(--fp-tag-wrap,nowrap)}
/* 줄 맞춤 손잡이 `--fp-tag-ta`(2026-10-02 thermage sec5) — `--fp-tag-wrap:normal` 로 두 줄이 된 칩의 줄을 어디에 맞출지.
   선언한 칩에만 건다(속성 선택자) — 다른 칩은 지금처럼 물려받은 정렬 그대로다. 90° 돌린 칩은 `right` = 아래끝(글 끝)이다. */
.fp-ovl__tag[style*="--fp-tag-ta"]{text-align:var(--fp-tag-ta)}
/* **덮개로 쓰는 칩**(--fp-minw / --fp-minh 를 준 칩)은 두 가지가 저절로 달라진다 — 사람이 안 보고 지나가는 길을 막는다(2026-09-19 검토):
   ⓐ 바탕이 **불투명**해진다. 기본 rgba(0,0,0,.82) 로 덮으면 밑에 구워진 흰 Before / 아이보리 After 가 칩 속에서 유령처럼 읽혔다(verify 는 못 잡는다).
   ⓑ **층(--fp-z)이 0** 이 된다. 덮개가 translateZ 로 떠 있으면 호버 기울기에 칩만 밖으로 밀려 덮던 글자의 끝이 드러난다(1920 최악에서 1.7%p).
   글자 크기는 `--fp-tag-fs`, 안쪽 여백은 `--fp-tag-p` 로 띠 높이에 맞춘다(원본 띠는 높이의 1/3 이 글자였다). */
.fp-ovl__tag[style*="--fp-minw"],.fp-ovl__tag[style*="--fp-minh"]{background:var(--fp-tag-bg,#3a3a3a);--fp-z:0px}
/* 위 주석의 손잡이 — 특이도 (0,2,0) 이라 `.fp-plain strong`(0,1,1) 과 `:where(main) strong`(0,1,1) 을 둘 다 이긴다.
   기본값이 `inherit` 이라 값을 안 준 칩은 **한 픽셀도 안 바뀐다**(배포본 덮개 칩 163개 가운데 지금 값을 주는 것은 0개다). */
.fp-ovl__tag strong{font-weight:var(--fp-tag-strong-fw,inherit);font-size:var(--fp-tag-strong-fs,inherit)}
.fp-ovl__band{position:absolute;left:0;right:0;bottom:0;z-index:3;--fp-z:calc(26*var(--u));transform:translateZ(var(--fp-z));
/* 띠 높이(안쪽 여백) 손잡이 `--fp-band-p`(기본값이 지금 값, 2026-09-24 7단계 ④ filler-botox sec7·sec10) — 글자는 `--fp-band-fs` 로 열려 있는데
   padding 이 상수라 **글자를 원본 크기로 맞춰도 띠가 원본의 62%** 로 얇게 섰다(원본 1440 띠 **70px** · 잉크 15px ↔ 우리 **43.6px** · 잉크 15.1px.
   원본 띠는 「높이의 1/3 이 글자」인데 우리는 1/2.9 였다). 같은 짜임의 띠를 7단계 네 장이 싣는다 — 한 장이 아니라 계통에 걸친 치수다.
   글자 무게 손잡이 `--fp-band-fw`(기본 700 = 지금 값, Ulthera 1차 검토) — 원본 구운 캡션이 **보통 굵기**인 자리가 있는데 무게 손잡이가 없었다
   (`.fp-ovl__tag` 에는 `--fp-tag-fw` 가 이미 있다 — 같은 까닭·같은 이름꼴). */
padding:var(--fp-band-p,calc(9*var(--u)) calc(12*var(--u)));background:var(--fp-tag-bg,rgba(0,0,0,.82));color:var(--fp-tag-c,#fff);
/* 글자 크기 손잡이 `--fp-band-fs` — 상수라 원본 띠 글자를 그대로 옮길 수 없었다
   (2026-09-23 SMAS 「Area-specific effects of facelift」 1440 12px ↔ 원본 ≈17px = 29% 작다). 기본값이 지금 값이다. */
font-size:var(--fp-band-fs,max(12px,calc(16*var(--u))));font-weight:var(--fp-band-fw,700);line-height:1.35;text-align:center}
.fp-ovl__band--top{top:0;bottom:auto}
/* **≤1279 에서 칩을 액자 아래 목록으로** `.fp-ovl--mo-list` — 액자가 좁아지면 칩 글자가 12px 바닥에 걸려 폭이 안 줄고 그림을 문다.
   2026-09-23 실측: mini-facelift 돋보기(액자 343px)는 칩이 그림 가로의 **62.5%** 를 덮었고(원본 구운 글자는 37%),
   endoscopic Check 02 는 칩 셋이 88+97+80px 로 겹쳐 「EY」「GLA」로 잘렸으며, SMAS 절개 3칸은 좌 21.2px·우 4.6px 이 액자 밖으로 넘쳤다.
   3단계에 올라왔다가 「붙일 페이지가 없다」로 두 번 미뤄진 손잡이이고, 4단계 다섯 장 가운데 **넷**이 같은 모양을 만났다.
   붙인 액자만 바뀐다(선택자에 수식자가 들어간다). 칩 차례가 곧 목록 차례이므로 마크업 순서를 원본 읽는 차례로 둔다.
   `--fp-x`/`--fp-y`/`--fp-org`/`--fp-minw`/`--fp-minh` 는 목록에서 **무시**된다(그 값들은 PC 자리 지정이다). */
@media (max-width:1279px){
.fp-ovl--mo-list{display:grid;grid-template-columns:100%}
/* ⚠ 사진 위 표시(`__dot`·`__zone`·`__ell`·`__arrow`·`__band`)는 `%` 자리라 **담는 상자**가 커지면 같이 내려온다 —
   목록이 붙어 액자가 길어지면 점들이 글자 위로 흘러내렸다(2026-09-23 endoscopic Check 02 에서 실제로 그랬다).
   절대배치 **그리드 자식**은 담는 상자가 「패딩 상자」가 아니라 **자기 그리드 칸**이다 → 사진과 같은 칸(1/1)에 몰아 넣으면
   `%` 가 다시 **사진 높이** 기준이 된다. 칩만 아래 줄로 흐른다. */
.fp-ovl--mo-list>img,.fp-ovl--mo-list>svg,.fp-ovl--mo-list>picture,
.fp-ovl--mo-list>.fp-ovl__dot,.fp-ovl--mo-list>.fp-ovl__zone,.fp-ovl--mo-list>.fp-ovl__ell,
.fp-ovl--mo-list>.fp-ovl__arrow,.fp-ovl--mo-list>.fp-ovl__band{grid-area:1/1/2/2}   /* ⚠ 끝선을 **명시**한다 — `1/1` 은 끝이 auto 라 절대배치 자식의 담는 상자가 다시 액자 전체가 된다(실측: 점 셋 중 둘이 사진 아래로 내려왔다) */
/* `--crop` 과 겹치면 액자가 `aspect-ratio` + `overflow:hidden` 이라 목록이 **액자 안에 눌려** 줄이 겹친다
   (2026-09-23 실측 SMAS 절개 액자 116.9px 안에 칩 셋이 8.7px 간격으로 포개졌다) → 자르기를 **사진 자신**에게 넘긴다. */
.fp-ovl--mo-list.fp-ovl--crop{aspect-ratio:auto;overflow:visible}
.fp-ovl--mo-list.fp-ovl--crop>img{aspect-ratio:var(--fp-ar,3/1);height:auto}
.fp-ovl--mo-list>.fp-ovl__tag{position:relative;left:auto;top:auto;grid-column:1;display:block;max-width:100%;min-width:0;min-height:0;
margin-top:var(--fp-list-gap,calc(8*var(--u)));padding:0 0 0 calc(14*var(--u));border-radius:0;
/* 글자 테(`--fp-tag-stroke`)는 목록에서 **끈다** — 칩일 때는 도해 위 먹 글자를 읽히게 하는 테지만,
   액자 아래 흰 바탕 목록으로 내려오면 흰 테가 글자를 갉아먹기만 한다(자리가 바뀌면 테의 까닭도 사라진다). */
-webkit-text-stroke-width:0;
background:transparent;color:var(--fp-list-c,var(--c-text));text-align:left;white-space:normal;
font-size:var(--fp-list-fs,max(12px,calc(15*var(--u))));font-weight:var(--fp-tag-fw,700);transform:none;--fp-z:0px}
.fp-ovl--mo-list>.fp-ovl__tag::before{content:"";position:absolute;left:0;top:calc(7*var(--u));width:calc(6*var(--u));height:calc(6*var(--u));
border-radius:50%;background:var(--fp-list-mark,var(--c-pink))}   /* 말머리 색은 `--fp-list-mark` 로 칩마다 준다 — 칩 바탕을 그대로 쓰면 흰·투명 칩에서 말머리가 사라진다(2026-09-23 endoscopic 에서 그랬다) */
}
.fp-ovl__arrow{position:absolute;left:var(--fp-x,50%);top:var(--fp-y,50%);z-index:2;--fp-z:calc(12*var(--u));pointer-events:none;
width:var(--fp-len,calc(60*var(--u)));height:0;border-top:var(--fp-lw,calc(2*var(--u))) solid var(--fp-mark);
transform-origin:0 50%;transform:rotate(var(--fp-a,0deg)) translateZ(var(--fp-z))}
.fp-ovl__arrow::after{content:'';position:absolute;right:calc(-1*var(--u));top:50%;width:calc(11*var(--u));height:calc(11*var(--u));
border-top:calc(2*var(--u)) solid var(--fp-mark);border-right:calc(2*var(--u)) solid var(--fp-mark);transform:translate(0,-50%) rotate(45deg)}
.fp-ovl__dot{position:absolute;left:var(--fp-x,50%);top:var(--fp-y,50%);z-index:2;--fp-z:calc(12*var(--u));pointer-events:none;
width:var(--fp-d,calc(14*var(--u)));height:var(--fp-d,calc(14*var(--u)));border-radius:50%;background:var(--fp-mark);
box-shadow:0 0 0 calc(2*var(--u)) var(--fp-line);transform:translate(-50%,-50%) translateZ(var(--fp-z))}
/* **원 안 「+」** `.fp-ovl__dot--plus`(2026-09-24 7단계 ④ thermage sec3) — 옛 테마의 핫스팟 마커는 **원 안에 흰 십자**다.
   민 원으로 옮기면 「누르는 자리」라는 신호가 사라지고, 모델 얼굴 위에서는 점이 잡티처럼 읽힌다.
   그 장은 점 하나에 `.fp-ovl__arrow--line` 두 벌(= 요소 열둘 + 손환산한 %)로 우회하고 있었다 — 수식자 하나로 줄인다.
   십자 색 `--fp-plus-c`(기본 `--fp-line` = 테두리 색) · 길이 `--fp-plus-l`(기본 원 지름의 52%) · 두께 `--fp-plus-w`(기본 2u).
   붙이지 않은 점은 한 픽셀도 안 바뀐다(수식자가 선택자에 들어간다). */
.fp-ovl__dot--plus::before,.fp-ovl__dot--plus::after{content:'';position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);background:var(--fp-plus-c,var(--fp-line))}
.fp-ovl__dot--plus::before{width:var(--fp-plus-l,52%);height:var(--fp-plus-w,calc(2*var(--u)))}
.fp-ovl__dot--plus::after{width:var(--fp-plus-w,calc(2*var(--u)));height:var(--fp-plus-l,52%)}
.fp-ovl__ell{position:absolute;left:var(--fp-x,50%);top:var(--fp-y,50%);z-index:2;--fp-z:calc(12*var(--u));pointer-events:none;
width:var(--fp-ew,24%);height:var(--fp-eh,34%);border:calc(2*var(--u)) dashed var(--fp-mark);border-radius:50%;
transform:translate(-50%,-50%) rotate(var(--fp-rot,0deg)) translateZ(var(--fp-z))}
/* 화살촉 없는 **지시선** — 지시점(__dot)과 라벨(__tag)을 잇는 선. 해부 도해처럼 「가리키기만」 하는 자리에 쓴다 */
.fp-ovl__arrow--line::after{content:none}
/* **점선 지시선** `.fp-ovl__arrow--dash`(2026-09-24 신설 — 7단계 they-swear §6 성분 도해의 연두 점선 두 벌).
   `--line` 은 **화살촉을 끄는** 수식자이고 이쪽은 **선의 모양**이라 둘은 서로 상관이 없다 — 점선 지시선은 **셋을 같이** 붙인다
   (`fp-ovl__arrow fp-ovl__arrow--line fp-ovl__arrow--dash`). 끝의 마디 원은 이 선이 아니라 `.fp-ovl__dot`(`--fp-d`)이 낸다.
   `border-style:dashed` 로는 조각 길이를 못 고른다(브라우저가 선 두께에서 낸다) → **되풀이 그라데이션**으로 조각·사이를 값으로 받는다.
   원본 실측(1099px 캔버스): 조각 주기 **4px = 조각 2px + 사이 2px** · 선 두께 **1px** · 마디 원 지름 **10~12px** · 색 `#a9e400`
   · 길이 왼 88px(x291~378) · 오른 48px(x790~837). **조판은 액자 기준 한 벌로 적는다** — `--fp-dash:calc(2*var(--fp-fw)/1099)` 꼴.
   ⚠ 선에 높이가 생겨(`--fp-lw`) `transform-origin:0 50%` 의 회전 중심이 두께의 절반만큼 내려간다(1~2px). 기운 선이면 그만큼만 다시 잰다.
   ⚠ 조각 색은 `--fp-mark`(기본 흰색)다 — 밝은 바탕에 얹으면 선이 통째로 안 보인다. 같은 이름을 `__dot` 이 함께 쓰므로 마디와 선 색이 저절로 같아진다. */
.fp-ovl__arrow--dash{height:var(--fp-lw,calc(2*var(--u)));border-top:0;
background:repeating-linear-gradient(to right,var(--fp-mark) 0 var(--fp-dash,calc(3*var(--u))),
transparent 0 calc(var(--fp-dash,calc(3*var(--u))) + var(--fp-dash-gap,calc(3*var(--u)))))}
/* **구역 표시** — 절제 범위 띠·둘러친 테처럼 넓이가 있는 자리(옛 그림의 반투명 노랑 띠·연두 둥근 테).
   테만 쓰려면 --fp-fill 을 두지 않는다. 모서리 --fp-r(기본 10u, 원은 50%) */
.fp-ovl__zone{position:absolute;left:var(--fp-x,50%);top:var(--fp-y,50%);z-index:2;--fp-z:calc(12*var(--u));pointer-events:none;
width:var(--fp-ew,30%);height:var(--fp-eh,20%);border:calc(2*var(--u)) dashed var(--fp-mark);border-radius:var(--fp-r,calc(10*var(--u)));
/* 회전 손잡이 `--fp-rot`(기본 0deg = 지금 값) — 기울어진 표시를 못 만들어서, 원본에서 11°·11°·1° 기울어 있고
   말풍선 문구가 바로 「diagonal incision」인 절개 알약 여섯을 똑바로 세워야 했다(2026-09-23 endoscopic-forehead-lift Check 03). */
background:var(--fp-fill,transparent);transform:translate(-50%,-50%) rotate(var(--fp-rot,0deg)) translateZ(var(--fp-z))}

/* ⑤ 두 경우 비교 도해 — 색 판 안에 그림 + 라벨, 판 **아래** 설명, 가운데 이음 뱃지(모바일 ↓ · PC →)
   옛 「흉터 숨기기」류(둥근 사각 판 둘 + 가운데 원 화살표 + 판 아래 설명문 2)를 CSS + 진짜 글자로.
   `.fp-plus` 와 가르는 선: 저쪽은 **글자만** 든 알약 판, 이쪽은 **그림을 담는 판 + 판 밖 설명**이다.
   층(--fp-z)이 손자라 `li` 에 preserve-3d 를 준다(.fp-hex__item 과 같은 이유) — overflow·filter·opacity 를 여기 걸면 flat 으로 강등된다. */
.fp-duo{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--fp-gap,46)*var(--u));margin-inline:auto;max-width:calc(var(--w,1240)*var(--u))}
.fp-duo>li{position:relative;display:block;transform-style:preserve-3d}
/* **두 판의 높이를 칸에 맞추는 변형** `.fp-duo--even`(2026-09-23 신설) — `li` 는 격자 칸이라 서로 같은 높이로 늘어나는데
   `.fp-duo__p` 는 `display:block` + `height:auto` 라 제 내용만큼만 선다. 항목 수가 다른 비교 도해에서 두 판 높이가 갈렸다
   (2026-09-23 male-rhinoplasty 1440 실측 §6 206.7 ↔ 149.7px(38% 차) · §8 448.6 ↔ 429.1px. 원문은 둘 다 같은 높이다).
   `flex-direction:column` 이라 판 **밖** 설명(`.fp-duo__desc`)이 있어도 아래에 그대로 남는다(row 면 옆으로 선다).
   `.fp-duo__vs`·이음 뱃지·빛(`.fp-glare`)은 `li` 의 **절대배치** 자식이라 flex 항목이 되지 않는다.
   ⚠ `.fp-duo>li{display:block}` 과 특이도가 같다(0,1,1) → **뒤에** 둔다. 붙이지 않으면 한 픽셀도 안 바뀐다. */
.fp-duo--even>li{display:flex;flex-direction:column}
.fp-duo--even .fp-duo__p{flex:1}
/* 안쪽 여백을 이름으로 받는다 `--fp-duo-pad` — **기본값이 보드마다 다르다**(≤1279 24u · PC 34u).
   `--fp-pad` 를 쓰지 않는다: 그 이름은 `.fp-flow>li` 것이라 한 페이지에 둘 다 있으면 상속으로 번진다.
   아래 `.fp-duo--bleed` 가 이 값만큼 **음수 여백**으로 되물리므로, 페이지가 여백을 바꿔도 통짜 폭이 저절로 따라온다. */
/* 테 손잡이 `--fp-duo-bw`/`--fp-duo-bc`(2026-09-24 신설, 기본 0/transparent = 지금 값) — 원문이 「권하는 쪽」 판에만
   연두 테를 둘러 갈라 두는 자리가 있다(6단계 facial-liposuction sec8). 바탕(`--fp-c`)만으로는 그 위계가 안 선다.
   인라인은 `--fp-*` 만 받으므로(검사 ⑩) 페이지가 `border` 를 직접 못 준다. 폭이 0 이면 색은 아무 일도 하지 않는다. */
.fp-duo__p{display:block;width:100%;padding:var(--fp-duo-pad,calc(24*var(--u)));border-radius:var(--fp-r,calc(24*var(--u)));border:var(--fp-duo-bw,0) solid var(--fp-duo-bc,transparent);
background:var(--fp-c,var(--c-grey-bg));--fp-z:calc(12*var(--u));transform:translateZ(var(--fp-z));
transform-style:preserve-3d}   /* 판 **안**의 라벨·설명도 자기 층을 갖게 한다 — 없으면 판과 같이 움직일 뿐이다(1440 실측 Δ 1.17 = 판과 동일 → 넣은 뒤 갈린다).
     여기에 overflow·filter·opacity<1 을 걸면 다시 flat 으로 강등된다(MOTION 4절 ⑩). */
.fp-duo>li:nth-of-type(even) .fp-duo__p{--fp-c:var(--c-pink-bg)}
.fp-sec--grey .fp-duo>li:nth-of-type(odd) .fp-duo__p{--fp-c:#fff}    /* 띠와 같은 색 칸만 뒤집는다(.fp-plus 와 같은 규칙) */
.fp-sec--pink .fp-duo>li:nth-of-type(even) .fp-duo__p{--fp-c:#fff}
.fp-duo__fig{width:100%;margin:0}   /* 액자에 폭을 준다 — 줄어드는 상자 + img{width:100%} + lazy 는 0×0 이 된다(WORKFLOW 09-18) */
.fp-duo__fig>img,.fp-duo__fig>svg{display:block;width:100%;height:auto}
/* 글자 손잡이 `--fp-lab-fs`/`--fp-duo-desc-fs`, 설명 상자 `--fp-desc-bg`/`--fp-desc-p`/`--fp-desc-r` — 원본은 판 안에 **흰 상자**를 하나 더 두고
   그 안에 설명을 담으며 제목·설명이 우리보다 크다(2026-09-23 mini-facelift 원본 제목 ≈19px·설명 ≈18px ↔ 우리 15px·15px = 79~83%).
   ⚠ 이름을 `--fp-desc-fs` 로 쓰지 않는다 — `.fp-hex__desc` 가 이미 그 이름이라 한 페이지에 둘 다 있으면 상속으로 번진다. 기본값이 지금 값이다. */
/* 띠 손잡이 `--fp-lab-bg`/`--fp-lab-p`/`--fp-lab-r`(기본값이 지금 값 = 투명·여백 0·직각, 2026-09-23 신설) —
   원문이 제목을 **색 띠**로 두고 그 띠로 두 카드를 가르는 자리가 있다(5단계 male-rhinoplasty §8: 남 #dee3f6 · 여 #e6efbf · 높이 약 60px).
   ⚠ **글자색 손잡이는 없다**(판 글자색을 물려받는다) → `--fp-cap-bg` 와 같은 규칙으로 **밝은 띠 색만** 준다.
   띠가 카드 폭을 꽉 채워야 하면 `.fp-duo--bleed` 를 같이 붙인다(판 안쪽 여백만큼 좌우로 되문다). */
.fp-duo__lab{margin-top:calc(14*var(--u));padding:var(--fp-lab-p,0);border-radius:var(--fp-lab-r,0);background:var(--fp-lab-bg,transparent);/* 굵기 손잡이 `--fp-lab-fw`(기본 700 = 지금 값, 2026-09-24 7단계 ④ they-swear §13) — 크기·안여백·띠는 열려 있는데 무게만 상수였다.
   원문이 두 판 제목을 **왼 400 ↔ 오른 600** 으로 갈라 「권하는 쪽」을 굵기로도 세우는 자리에서 그 축을 통째로 잃었다
   (인라인 `font-weight` 는 검사 ⑩ 이 막아 페이지 쪽에 수단이 없었다). */
text-align:center;font-size:var(--fp-lab-fs-mo,max(12px,calc(18*var(--u))));font-weight:var(--fp-lab-fw,700);line-height:1.35;
--fp-z:calc(26*var(--u));transform:translateZ(var(--fp-z))}
/* 바탕 띠가 있는 제목(`--fp-lab-bg`)은 **사진과 같은 평면**(층 0) — 띠가 translateZ 26u 로 떠 있으면 호버 원근에서 사진에서 떨어져
   왼쪽 카드는 왼쪽·오른쪽 카드는 오른쪽으로 밀리고 커진다(2026-10-02 사용자 「초록 박스 위치가 변경되어 디자인이 깨진 느낌」 Ulthera §duo).
   `.fp-ovl__tag[--fp-minw]` 덮개에 층 0 을 준 것과 같은 논리 — 바탕 없는 글자 제목은 그대로 떠 있다. */
.fp-duo__lab[style*="--fp-lab-bg"]{--fp-z:0px}
/* `.fp-duo__desc` 는 PC 판 규칙이 따로 없다 → 이름이 **하나**다. 페이지가 두 보드를 같이 적는다
   (`max(var(--fs-body),calc(N*var(--col)/1080))` — `.fp-hex` 의 `--fp-label-fs` 와 같은 꼴). */
.fp-duo__desc{margin-top:calc(16*var(--u));text-align:center;font-size:var(--fp-duo-desc-fs,var(--fs-body));line-height:1.5;
--fp-z:calc(6*var(--u));transform:translateZ(var(--fp-z))}
/* 이음 뱃지: 원(::before) + 갈매기(::after). 모바일은 아래(135deg) · PC 는 오른쪽(45deg).
   **앞 칸과의 여백 한가운데**에 선다(`.fp-flow` 와 같은 규칙) — 루트의 `::before/::after` 하나를 `left:50%;top:50%` 로 두면
   두 칸 높이가 다를 때 뱃지가 **가운데 칸 글자 위**에 얹힌다(2026-09-21: eyebrow-lift 390 에서 308↔337px 차 때문에 분홍 판을 14px 물고 있었다).
   `li+li` 로 내리면 칸 높이와 무관해지고 칸이 셋 이상이어도 뱃지 수가 저절로 맞는다. 순번(:nth-of-type)을 세지 않으므로
   fp.js 가 빛 `<i class="fp-glare">` 를 첫 자식으로 넣어도 밀리지 않는다. 여백(--fp-gap)은 뱃지 지름 46u 보다 좁게 두지 않는다. */
.fp-duo>li+li::before{content:'';position:absolute;z-index:1;left:50%;top:calc(-1*var(--fp-gap,46)*var(--u)/2);
width:calc(46*var(--u));height:calc(46*var(--u));
margin:calc(-23*var(--u)) 0 0 calc(-23*var(--u));--fp-z:calc(26*var(--u));transform:translateZ(var(--fp-z));border-radius:50%;background:var(--c-dark)}
.fp-duo>li+li::after{content:'';position:absolute;z-index:2;left:50%;top:calc(-1*var(--fp-gap,46)*var(--u)/2);
width:calc(12*var(--u));height:calc(12*var(--u));
margin:calc(-9*var(--u)) 0 0 calc(-6*var(--u));--fp-z:calc(27*var(--u));
border-top:calc(3*var(--u)) solid var(--c-pink);border-right:calc(3*var(--u)) solid var(--c-pink);
transform:translateZ(var(--fp-z)) rotate(135deg)}
/* **이음 뱃지를 끄는 변형** `.fp-duo--vs` — 두 경우의 **비교**(원본에 화살표가 없다)를 이 컴포넌트로 옮기면
   원문에 없는 「흐름」이 한 칸 더해진다(2026-09-23 mini-facelift SMAS 두 판 도해 — 판 + 판 안 그림 + 판 안 설명 + 밝기 위계를 다 받는 컴포넌트가 이것뿐이다).
   ⚠ **위 두 규칙보다 뒤에 둔다** — 특이도가 같아 차례로 갈린다. 앞에 두면 원(::before)만 사라지고 갈매기(::after)가 되살아난다(2026-09-23 캡처로 확인).
   붙이지 않으면 아무것도 안 바뀐다. */
.fp-duo--vs>li+li::before,.fp-duo--vs>li+li::after{content:none}
/* **판 안 그림·제목 띠를 카드 폭까지 넓히는 변형** `.fp-duo--bleed`(2026-09-23 신설) — 원문은 사진이 카드 폭을 꽉 채우고
   **위 모서리만** 둥근데 우리는 판 안쪽 여백에 갇혀 있었다(2026-09-23 male-rhinoplasty §8 1440: 사진 358.9px ↔ 원본 409px = 88%).
   되무는 양은 `--fp-duo-pad` 그대로라 **보드마다 기본이 다르고**(≤1279 24u · PC 34u) 페이지가 여백을 바꿔도 따라온다.
   요청안의 `var(--fp-pad,34)` 는 두 군데가 틀렸다 — 이름이 `.fp-flow` 것이고, 34 는 **PC 값**이라 ≤1279 에서 10u 씩 넘쳤다.
   ⚠ `overflow` 는 `transform-style` 을 flat 으로 강등시키므로(MOTION 4절 ⑩) **`.fp-duo__fig` 자신에만** 걸고 `li`·`.fp-duo__p` 에는 걸지 않는다.
   붙이지 않으면 한 픽셀도 안 바뀐다. */
/* ⚠ `width:auto` 를 같이 준다 — `.fp-duo__fig` 기본이 `width:100%` 라 **음수 여백만 주면 옆으로 밀리기만 하고 넓어지지 않는다**
   (2026-09-23 실측: 사진이 294.7px 그대로인 채 왼쪽으로 26px 밀렸다). 블록 흐름에서 `width:auto` + 음수 좌우 여백이라야 상자가 늘어난다.
   `.fp-duo__lab` 은 `<p>`(width:auto)라 여백만으로 늘어난다. */
.fp-duo--bleed .fp-duo__fig{width:auto;margin:calc(-1*var(--fp-duo-pad,calc(24*var(--u)))) calc(-1*var(--fp-duo-pad,calc(24*var(--u)))) 0;
border-radius:var(--fp-r,calc(24*var(--u))) var(--fp-r,calc(24*var(--u))) 0 0;overflow:hidden}
.fp-duo--bleed .fp-duo__lab{margin-inline:calc(-1*var(--fp-duo-pad,calc(24*var(--u))))}
/* **뱃지 자리에 서는 원문 낱말** `.fp-duo__vs` (2026-09-23 신설 — 5단계 male-rhinoplasty §8 「VS」, 3단계에서 올라와 안 닫힌 숙제).
   `.fp-duo--vs` 는 뱃지를 **끄기만** 하고 글자를 담을 자리를 주지 않아, 낱말이 있는 원문은 화면에서 그 낱말을 잃었다.
   **두 번째 `<li>` 안에 `<p class="fp-duo__vs">VS</p>` 로 쓴다** — 위치식이 뱃지(`li+li::before`)와 **같아서** 두 칸 높이가 달라도
   여백 한가운데에 선다. `<ul>` 바로 아래에 두면 목록 자식이 `<li>` 가 아니게 되고, 첫 칸에 두면 여백이 없는 위쪽(모바일)·왼쪽(PC)에 선다.
   `.fp-duo--vs` 와 같이 쓰는 것이 기본이다(뱃지와 글자가 같은 자리라 둘 다 켜면 겹친다).
   원본 실측(1440): **50px / lh 50 / 굵기 400 / 자간 1px / #101010 / Marcellus serif** · 두 칸 경계 x720 의 한가운데 ·
   세로는 칸 높이의 38.5%(원본은 옛 행 상자 기준 `top:55%` 라 우리 격자로 그대로 못 옮긴다 → **뱃지와 같은 50%**).
   ⚠ 원본은 **≤999 에서 `display:none`** 이다 — 우리는 두 보드 다 싣는다(원문 낱말을 좁은 화면에서만 잃지 않게).
   글꼴은 템플릿 글꼴이다(Marcellus 웹폰트를 새로 붙이지 않는다). 둘 다 조판이 `meta.decisions` 에 적는다. */
.fp-duo__vs{position:absolute;z-index:3;left:50%;top:calc(-1*var(--fp-gap,46)*var(--u)/2);
--fp-z:calc(28*var(--u));transform:translate(-50%,-50%) translateZ(var(--fp-z))}
/* 글자 규칙은 `.fp-types__mid`(카드 격자 판, 17절)와 **한 줄에 묶어 둔다** — 같은 원문 낱말이 계통마다 다른 모양이 되지 않게.
   값은 2026-09-23 에 `.fp-duo__vs` 로 잰 그대로다(1440 에서 67u = 50.25px ↔ 원본 50px). 선택자 목록에 이름을 더해도 각 선택자의 특이도는 그대로다.
   ⚠ 카드 쪽은 **클래스를 둘** 쓴다(`.fp-types .fp-types__mid`) — `.fp-types p{font-size:var(--fs-body)}`(0,1,1)가 한 클래스(0,1,0)를 이겨
   낱말이 본문 크기로 주저앉는다(2026-09-24 실측 1440 **15px** · 390 19.5px — 있어야 할 50.25px·28.2px 대신). `.fp-types .fp-ovl__tag` 와 같은 자리다. */
.fp-duo__vs,.fp-types .fp-types__mid{font-size:max(16px,calc(26*var(--u)));font-weight:400;line-height:1;letter-spacing:.02em;color:var(--c-dark);white-space:nowrap}
/* ⑥ 흐름 도해 — 글자 판 N개 + **칸 사이마다** 방향 뱃지(모바일 ↓ · PC →)
   옛 「1mm Plastic Surgery Restoration process」류(글자만 든 둥근 판 셋 + 사이 화살표 원 둘).
   `.fp-plus` 와 가르는 선: 저쪽은 판 **둘** 전용이다 — 뱃지가 루트의 ::after 하나뿐이고 left/top 50% 에 고정이라 칸이 셋이면 **가운데 판 위**에 얹힌다.
   `.fp-duo` 와 가르는 선: 저쪽은 **그림을 담는 판** + 판 밖 설명 + 2열 전용. 이쪽은 **글자만** 든 판이 N개고 뱃지도 N−1개다.
   뱃지는 첫 칸을 뺀 모든 칸의 `::before`(원)·`::after`(갈매기)라 개수가 저절로 맞는다 — 순번(:nth-of-type)을 세지 않으므로
   fp.js 가 빛 <i class="fp-glare"> 를 첫 자식으로 넣어도 밀리지 않는다.
   칸 색은 `--fp-c`(바탕)·`--fp-ct`(글자) 둘뿐이다 — 원본처럼 **어두운 판**으로 가려면 --fp-c:#3a3a3a;--fp-ct:#fff (10.4:1).
   층(--fp-z)이 판의 자식(뱃지)이라 `li` 에 preserve-3d 를 준다 — 여기에 overflow·filter·opacity<1 을 걸면 뱃지가 평면이 된다(MOTION 4절 ⑩). */
.fp-flow{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--fp-gap,48)*var(--u));
margin-inline:auto;max-width:calc(var(--w,1240)*var(--u))}
/* 글자·높이·여백 손잡이 — PC 는 `--fp-fs`/`--fp-flow-minh`/`--fp-pad`, ≤1279 는 **`-mo` 를 붙인 짝**이다.
   ⚠ 한 이름으로 두면 PC 값이 모바일로 샌다 — `--u` 가 보드 배율이라 `calc(28*var(--u))` 가 1440 21px · **1279 50.4px · 390 30.3px** 이다(2026-09-23 실측).
   `.fp-hex` 의 `--fp-label-fs` 는 한 이름인데, 그쪽은 페이지가 `min()/max()` 로 두 보드를 같이 적는 자리라 그대로 둔다.
   본래 글자·높이·여백 손잡이 `--fp-fs`/`--fp-flow-minh`/`--fp-pad` — 원본 알약이 낮고 글자는 클 때 맞출 길이 없었다
   (2026-09-23 mini-facelift: 원본 1440 에서 513x65.6px·글자 21px ↔ 우리 513x142.5px(2.17배)·15px(71%)).
   폭은 `--w` 로 이미 맞출 수 있다. ⚠ 이름에 `--fp-minh` 를 쓰지 않는다 — `.fp-ovl__tag` 가 그 이름을 「덮개 칩」 신호로 읽어
   상속으로 번지면 같은 페이지의 칩이 조용히 불투명 덮개가 된다. 기본값이 지금 값이다. */
.fp-flow>li{position:relative;display:grid;place-items:center;min-height:var(--fp-flow-minh-mo,calc(130*var(--u)));
padding:var(--fp-pad-mo,calc(28*var(--u)) calc(30*var(--u)));border-radius:var(--fp-r,calc(24*var(--u)));
background:var(--fp-c,var(--fp-cb,var(--c-grey-bg)));color:var(--fp-ct,var(--c-text));
text-align:center;font-size:var(--fp-fs-mo,var(--fs-body));font-weight:700;line-height:1.35;
--fp-z:calc(12*var(--u));transform:translateZ(var(--fp-z));transform-style:preserve-3d}
/* 띠와 같은 색 칸은 사라진다(.fp-plus·.fp-duo 와 같은 규칙). 칸이 번갈이가 아니라 모두 같은 색이라 한 줄이면 된다.
   뒤집기는 `--fp-c` 가 아니라 **되돌림값 `--fp-cb`** 에 준다 — 같은 변수에 주면 `li` 에 직접 걸린 이 규칙이
   루트(`.fp-flow`)에서 상속된 `--fp-c` 를 이겨, COMPONENTS 26 이 시킨 대로 루트에 어두운 칸을 줘도 조용히 흰 칸이 됐다(verify 는 못 잡는다).
   `var(--fp-c, var(--fp-cb, …))` 는 상속값을 먼저 보므로 루트·칸 어디에 줘도 페이지 지정이 이긴다. */
.fp-sec--grey .fp-flow>li,.fp-sec--pink .fp-flow>li{--fp-cb:#fff}
/* 이음 뱃지 — 앞 칸과의 **여백 한가운데**에 선다. 여백이 뱃지(46u)보다 좁으면 판 모서리에 얹히므로 --fp-gap 은 48u 아래로 두지 않는다 */
.fp-flow>li+li::before{content:'';position:absolute;z-index:1;left:50%;top:calc(-1*var(--fp-gap,48)*var(--u)/2);
width:calc(46*var(--u));height:calc(46*var(--u));margin:calc(-23*var(--u)) 0 0 calc(-23*var(--u));
--fp-z:calc(26*var(--u));transform:translateZ(var(--fp-z));border-radius:50%;background:var(--c-dark)}
.fp-flow>li+li::after{content:'';position:absolute;z-index:2;left:50%;top:calc(-1*var(--fp-gap,48)*var(--u)/2);
width:calc(12*var(--u));height:calc(12*var(--u));margin:calc(-9*var(--u)) 0 0 calc(-6*var(--u));
--fp-z:calc(27*var(--u));border-top:calc(3*var(--u)) solid var(--c-pink);border-right:calc(3*var(--u)) solid var(--c-pink);
transform:translateZ(var(--fp-z)) rotate(135deg)}

@media (min-width:1280px){
/* 가운데 칸은 **고정 폭 트랙**이다 — `auto` 로 두면 칸 폭이 안에 든 사진의 실제 폭에 묶여,
   `loading="lazy"` 사진이 아직 안 왔거나 못 오면 칸이 0~20px 로 주저앉아 육각·꼭짓점·가운데 사진이 통째로 사라진다
   (2026-09-19 검토: 1280~2560 여섯 폭 모두 [20,20] · 사진이 도착하는 순간 258px 레이아웃 점프).
   WORKFLOW 「액자에 폭을 준다」와 같은 결함이다. `--fp-core`·`--fp-rowgap` 은 **`.fp-hex` 에** 준다(칸 폭·행 간격이 그 값이다). */
.fp-hex{grid-template-columns:minmax(0,1fr) calc(var(--fp-core,520)*var(--u)) minmax(0,1fr);column-gap:calc(40*var(--u));row-gap:calc(var(--fp-rowgap,60)*var(--u));align-items:center;
max-width:calc(var(--w,1240)*var(--u))}
.fp-hex__core{grid-column:2;grid-row:1/span var(--fp-rows,2);width:100%;max-width:none}
.fp-hex__item{max-width:none}
.fp-hex__item:nth-of-type(even){grid-column:1;align-items:flex-end;text-align:right}
.fp-hex__item:nth-of-type(odd){grid-column:3;align-items:flex-start;text-align:left}
/* 라벨이 **홀수**면 한쪽이 한 줄 길어져 반대쪽 아래가 빈다(2026-09-22 nose-bridge-surgery 5개 → 좌3·우2,
   2560 에서 빈 자리 533x177px). 원본 도해는 그런 자리를 **아래 가운데**에 둔다 → 마지막 항목에만 이 클래스를 붙이고
   `--fp-rows` 를 한 줄 줄인다(5개면 3 → 2). `:nth-of-type()` 보다 낮은 특이도로는 못 이기므로 클래스를 겹쳐 쓴다.
   붙이지 않으면 아무것도 안 바뀐다. 모바일(≤1279)은 이미 한 줄씩 쌓여 영향이 없다. */
/* 꼬리 칸(아래 가운데 라벨)은 기본이 **가운데 열 하나**다 — 원본이 그 자리를 육각보다 넓게 쓰면 설명문이 한 줄로 못 선다
   (2026-09-23 SMAS 실측: 꼬리 설명 자리가 `--fp-core` 560u 라 1920·1440 둘 다 **2줄**. 열 간격을 줄여도 안 바뀐다 —
   넓어지는 것은 좌·우 열이고 꼬리는 가운데 열에 있다. 4단계 조사가 올린 「열 간격 12px 이 모자라다」는 원인을 잘못 짚은 것이었다).
   `--fp-tailcol:1/-1` 을 주면 기둥 전체를 쓴다. 값을 안 주면 지금 그대로다. */
.fp-hex__item.fp-hex__item--tail{grid-column:var(--fp-tailcol,2);align-items:center;text-align:center;justify-self:center}
/* **안쪽 모서리 맞추기** `.fp-hex--tight` — 원본 육각 도해는 왼쪽 열 알약들의 **오른끝**이, 오른쪽 열 알약들의 **왼끝**이 한 줄로 맞는다
   (2026-09-23 SMAS 원본 1410x775 실측: 왼쪽 둘 다 오른끝 x388 · 오른쪽 둘 다 왼끝 x1040, 설명 글자도 1px 안에서 맞는다).
   지금은 루트의 `justify-items:center` 가 **칸 상자 자체**를 가운데 두어 알약 폭이 다른 만큼 안쪽 모서리가 벌어진다
   (우리 실측 Δ 1280 24/22 · 1920 36/32 · 2560 47/42px — 폭이 넓어질수록 커진다. `align-items` 는 **칸 안** 정렬이라 이것을 못 푼다).
   붙이지 않으면 한 픽셀도 안 바뀐다 — 1~3단계 육각 9곳은 승인·검증을 지난 화면이라 이 단계에서 건드리지 않았다(원본 대조가 따로 필요하다). */
.fp-hex--tight>.fp-hex__item:nth-of-type(even){justify-self:end}
.fp-hex--tight>.fp-hex__item:nth-of-type(odd){justify-self:start}
.fp-hex--tight>.fp-hex__item.fp-hex__item--tail{justify-self:center}
/* **마디 점 높이에 알약을 맞추기** `.fp-hex--pin`(2026-09-23 신설) — 원본 육각은 **마디 점이 알약의 세로 한가운데**에 놓여
   「이 마디 = 이 라벨」로 읽힌다(2026-09-23 원본 img06-9 실측: 알약 중심 y172·y493 ↔ 마디 점 y172·y493 — **같은 값**이다).
   우리는 `align-items:center` 가 **칸 상자 전체**(알약 + 설명문)를 행 한가운데에 두므로, 설명문이 길수록 알약이 위로 밀린다
   (실측 1440: 위 알약 중심 **13.0%** ↔ 마디 **25.1%** = 61.2px 차 · 1920 은 57.3px). `--fp-rowgap` 은 두 행을 같이 움직이고
   `--fp-item` 은 줄 수를 바꿔 되레 커져, **페이지가 줄 수 있는 손잡이가 없었다.**
   푸는 법: 설명문을 **흐름에서 뺀다**(알약 바로 아래에 절대배치) → 칸 상자 높이 = 알약 높이 → `align-items:center` 가 **알약을** 행 한가운데에 둔다.
   행 높이는 가운데 칸(`.fp-hex__core`)이 행을 **걸치며** 고르게 나눠 주므로, 알약 중심은 `(액자높이−행간)/4` 에 선다
   → **`--fp-rowgap:0` 을 같이 주면 정확히 25%·75%** 다(행 간격이 60u 면 22.7%). 설명문은 행 아래 절반의 빈 자리에 들어간다.
   ≤1279 는 한 줄씩 쌓이고 마디 점도 없어 규칙을 두지 않는다. 붙이지 않으면 한 픽셀도 안 바뀐다.
   ⚠ 설명문이 길어 **다음 행 알약까지 닿는지**는 사람이 본다(1440 기준 행 아래 절반이 90px 남는다). */
/* ⚠ 칸 상자를 **열 폭으로 편다**(`width:100%`) — 안 그러면 절대배치 설명문의 담는 상자가 **알약 폭**이 되어 글이 좁게 접힌다
   (2026-09-23 실측: 설명문 폭이 열 291px 이 아니라 알약 폭 222~291px 로 갈렸다). 편 뒤에는 알약 자리를 `align-items` 가 정하므로
   `.fp-hex--tight` 의 `justify-self` 는 하는 일이 없어진다 — **`--pin` 은 `--tight` 를 머금는다.** */
/* **알약 묶음의 세로 자리** `--fp-pin-mt`(2026-09-27 8단계 ② · 기본 `0px` = 지금 값) — `--pin` 은 알약을 행 한가운데(= 액자 50%)에 세우는데
   원본이 라벨을 액자 **윗부분**에 붙인 도해가 있다(7단계 they-swear §6: 원본 점선 잉크가 캔버스 15.2% = 우리가 꺼낸 조각의 **16.8%** 인데 우리는 50% 라 1440 에서 167.6px 아래였다).
   `align-items:center` 는 **마진 상자**를 가운데 두므로 `margin-top:-2Δ` 면 알약 높이와 무관하게 정확히 Δ 만큼 올라간다(`align-self:start` + 오프셋은 알약 줄 수에 따라 달라져 못 쓴다).
   Δ 는 액자 높이의 비이므로 값도 `--u` 로 적는다 — they-swear §6: 액자 높이 537×1.2531 = 672.9u · Δ = (50%−16.8%)×672.9u = 223.4u → `calc(-446.8*var(--u))`.
   지시선·마디(`.fp-ovl__arrow`·`__dot`)의 `--fp-y` 도 **같은 %로** 같이 내린다 — 그쪽은 액자 기준이라 이 손잡이가 안 건드린다.
   ≤1279 는 `--pin` 규칙 자체가 PC 전용이라 해당 없다. 붙이지 않은 네 장(shrink·Ulthera·facial-liposuction·men's-eye-surgery)은 한 픽셀도 안 바뀐다. */
.fp-hex--pin>.fp-hex__item{position:relative;width:100%;margin-top:var(--fp-pin-mt,0px)}
.fp-hex--pin>.fp-hex__item>.fp-hex__desc{position:absolute;left:0;right:0;top:100%;margin-top:calc(10*var(--u))}
/* ⚠ **꼬리 항목만 흐름으로 되돌린다**(2026-09-24 7단계 ④ they-swear §16) — 좌·우 열은 가운데 액자가 행 높이를 만들어 주어 절대배치 설명문이 상자 안에 들어오지만
   **꼬리 행에는 높이를 만들 요소가 없어** 설명문이 `ul` 아래로 흘러내린다(실측 1920 48.1 · 1440 36.0 · 1280 32.0px. 섹션 아래 여백이 받아 화면은 멀쩡하지만 두세 줄이면 다음 섹션을 문다).
   꼬리에는 마디 점이 없어 못박을 까닭도 없다. 클래스를 **넷** 써서 위 규칙(셋)을 특이도로 이긴다. */
.fp-hex--pin>.fp-hex__item.fp-hex__item--tail>.fp-hex__desc{position:static;margin-top:calc(10*var(--u))}
/* **마름모(북·서·동·남) 배치** `.fp-hex--diamond`(2026-09-24 신설) — 원본 방사형 도해의 마디가 **북·서·동·남** 넷이고
   라벨이 그 마디 옆에 붙는 짜임이 있다(6단계 facial-fat-transplant §10 — 원본은 그 라벨이 **hover 툴팁**이라 늘 보이지 않는다).
   base 의 PC 규칙은 `:nth-of-type(even/odd)` 로 라벨을 **왼쪽 열·오른쪽 열**에만 세우고 가운데 칸이 `grid-row:1/span var(--fp-rows)` 라
   **코어 위·아래에는 아무것도 못 놓는다**(`--tail` 은 코어 아래로만 간다). 그래서 마디를 원본 자리에 두면 넷 다 짝이 없고,
   라벨 쪽(네 대각)으로 옮기면 Point 02 가 오른쪽·03 이 왼쪽으로 가서 **원본과 좌우가 뒤집힌다**(6단계 검토 ③).
   여는 것: 행을 **셋**으로 잡고 코어를 2/2 에, 라벨 넷을 **1/2(위) · 2/1(왼) · 2/3(오른) · 3/2(아래)** 로 못박는다.
   · **`--fp-rows` 는 안 쓴다** — 마름모는 라벨이 **넷 고정**이다(다섯째부터는 자리가 없다. base 로 두거나 `--tail` 을 쓴다).
   · 위·아래 칸은 **가운데 정렬**(base 의 even/odd 오른/왼 정렬을 되돌린다), 왼쪽 칸만 오른끝 정렬·오른쪽 칸만 왼끝 정렬이다.
   · 차례가 **DOM 그대로**(01 위 → 02 왼 → 03 오른 → 04 아래)라, 읽는 차례를 바꾸지 않고 좌우를 원본에 맞출 수 있다.
   · `--fp-rowgap` 은 그대로 듣는다(행이 셋이라 간격이 둘 생긴다). 붙이지 않은 페이지는 한 픽셀도 안 바뀐다. */
.fp-hex--diamond{grid-template-rows:auto auto auto}
.fp-hex--diamond>.fp-hex__core{grid-column:2;grid-row:2}
.fp-hex--diamond>.fp-hex__item:nth-of-type(2){grid-column:2;grid-row:1;align-items:center;text-align:center}
.fp-hex--diamond>.fp-hex__item:nth-of-type(3){grid-column:1;grid-row:2;align-items:flex-end;text-align:right}
.fp-hex--diamond>.fp-hex__item:nth-of-type(4){grid-column:3;grid-row:2;align-items:flex-start;text-align:left}
.fp-hex--diamond>.fp-hex__item:nth-of-type(5){grid-column:2;grid-row:3;align-items:center;text-align:center}
/* **원본 픽셀 천장** `--fp-figw-max`(2026-09-27 8단계 ② — `.fp-figure`·`.fp-types figure` 와 **같은 이름**을 `.fp-venn` 에도 연다, COMPONENTS 20).
   원문 겹친 원이 `sizes="(max-width:804px) 100vw, 804px"` 처럼 **배율을 안 타는 상수**로 그려진 자리가 있다(7단계 filler-botox sec5·sec8).
   `--w`×`--u` 만으로는 1440 을 맞추면 1920 +33.3% · 2560 +73.3% 로 자란다. `min()` 의 둘째 항이 기본 `100%` 라 **안 주면 한 픽셀도 안 바뀐다**
   (블록 상자는 담는 상자보다 넓어질 수 없어 `100%` 는 이미 걸려 있는 값이다). 값에는 루트 좌우 여백까지 넣는다 — `box-sizing:border-box` 라 `max-width` 가 padding 을 머금는다
   (filler-botox: `calc(804px + 80*var(--u))` = 원본 804 + `--fp-venn-rp` 의 40u×2).
   ⚠ 커스텀 속성은 **상속된다** — `.fp-venn` 의 조상이 `.fp-figure` 때문에 이 이름을 주고 있으면 겹친 원도 같이 받는다(배포본 grep: 주는 자리 셋 다 `.fp-types`·`.fp-figure` 자신이라 겹치는 곳 0). */
.fp-venn{flex-direction:row;align-items:center;justify-content:center;padding:var(--fp-venn-rp,calc(50*var(--u)) calc(40*var(--u)));max-width:min(calc(var(--w,1240)*var(--u)),var(--fp-figw-max,100%))}
.fp-venn__c{flex:1 1 0;max-width:calc(560*var(--u));padding:var(--fp-venn-p,calc(50*var(--u)));font-size:var(--fp-venn-fs,calc(20*var(--u)))}
.fp-venn__c+.fp-venn__c{margin-top:0;margin-left:calc(-1*var(--fp-lap))}
.fp-venn--plus>.fp-venn__c+.fp-venn__c::before{left:calc(var(--fp-olap,40)*var(--u)/2);top:50%}
/* 타원 셋의 **키를 맞춘다** — 원문은 세 칸이 같은 높이(`vc_row-o-equal-height`)인데 base 는 `align-items:center` 라 글 길이대로 갈린다 */
.fp-venn--oval{align-items:stretch}
.fp-plus{grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:calc(60*var(--u));max-width:calc(var(--w,1240)*var(--u))}
.fp-plus__p{min-height:calc(160*var(--u));padding:calc(34*var(--u)) calc(60*var(--u));font-size:calc(20*var(--u))}
/* 칸 비 손잡이 `--fp-duo-cols`(2026-09-24 신설, 기본값이 지금 값) — 원문이 두 판 가운데 「권하는 쪽」을 **더 크게** 세워
   위계를 보여 주는 자리가 있다(6단계 facial-liposuction sec8). `--cols`·`.fp-duo--even` 은 칸을 **같은 크기**로만 세운다.
   ⚠ **≥1280 에만 연다** — ≤1279 는 한 열로 쌓이는 자리라, 한 이름으로 몰면 페이지가 준 PC 비가 모바일에서 2열을 만든다. */
.fp-duo{grid-template-columns:var(--fp-duo-cols,repeat(var(--cols,2),minmax(0,1fr)));gap:calc(var(--fp-gap,80)*var(--u))}
.fp-duo__p{padding:var(--fp-duo-pad,calc(34*var(--u)))}
.fp-duo--bleed .fp-duo__fig{margin:calc(-1*var(--fp-duo-pad,calc(34*var(--u)))) calc(-1*var(--fp-duo-pad,calc(34*var(--u)))) 0}
.fp-duo--bleed .fp-duo__lab{margin-inline:calc(-1*var(--fp-duo-pad,calc(34*var(--u))))}
.fp-duo__lab{font-size:var(--fp-lab-fs,calc(20*var(--u)))}
.fp-duo>li+li::before,.fp-duo>li+li::after{left:calc(-1*var(--fp-gap,80)*var(--u)/2);top:50%}
.fp-duo>li+li::after{transform:translateZ(var(--fp-z)) rotate(45deg);margin:calc(-6*var(--u)) 0 0 calc(-9*var(--u))}
/* PC 는 뱃지와 같이 **왼쪽 여백 한가운데**로 옮긴다. 67u = 1440 에서 50.25px(원본 50px) */
.fp-duo__vs{left:calc(-1*var(--fp-gap,80)*var(--u)/2);top:50%}
.fp-duo__vs,.fp-types .fp-types__mid{font-size:calc(67*var(--u))}
/* PC 는 칸 수만큼 열이 저절로 생긴다(grid-auto-flow:column) — `--cols` 를 안 써도 N개가 같은 폭으로 선다. 판이 많으면 좁아지니 넷까지가 읽힌다 */
.fp-flow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:calc(var(--fp-gap,64)*var(--u))}
.fp-flow>li{min-height:var(--fp-flow-minh,calc(190*var(--u)));padding:var(--fp-pad,calc(34*var(--u)) calc(30*var(--u)));font-size:var(--fp-fs,calc(20*var(--u)))}
.fp-flow>li+li::before,.fp-flow>li+li::after{left:calc(-1*var(--fp-gap,64)*var(--u)/2);top:50%}
.fp-flow>li+li::after{transform:translateZ(var(--fp-z)) rotate(45deg);margin:calc(-6*var(--u)) 0 0 calc(-9*var(--u))}
/* ⚠ 기본값은 **`100%` 가 아니라 큰 px** 이다(2026-09-28 8단계 ⑤ 마감이 회귀를 잡아 고쳤다).
   `max-width` 의 «퍼센트»는 **본질 크기(max-content) 계산에서 무시**되므로, 자동 배치 표 칸 안의 액자에서는
   천장이 사라진 것처럼 계산되어 표가 열폭을 다시 나눈다 — 8단계 ④ 가 손잡이를 열며 `100%` 를 기본값으로 두었더니
   4단계 `thread-lifting` 표(칸 안에 `.fp-ovl fp-dgm` 다섯)의 열폭이 **1440 최대 37.1px · 1920 12.4px, 칸 22개**가 움직였다
   (문서 높이는 그대로 · 390 은 0 — PC 규칙이라서다). `99999px` 은 **확정 길이**라 `min()` 이 늘 앞 항을 고르고
   손잡이를 준 자리는 그대로 듣는다(배포본 실측: 되돌린 판·이 판 둘 다 옛 판과 **0칸** · `_scratch/qa8/probe_ovl.py`).
   같은 함정이 `.fp-figure`(550줄)·`.fp-types figure`(841)·`.fp-venn`(1509)에도 있으나 **그 셋은 옛 판과 같은 값**이라
   회귀가 아니다 — 고치면 그 자리들이 검토 없이 움직인다(⑤ Finish 8) → 「8단계에서 넘어온 숙제」에 적었다. */
.fp-ovl{max-width:min(calc(var(--w,1440)*var(--u)),var(--fp-figw-max,99999px));--fp-fw:calc(var(--w,1440)*var(--u))}   /* 액자 폭 변수 — 위 .fp-ovl 주석 참고 */
}

/* ── 모션 ───────────────────────────────────────────────── */
/* 진입: html.fp-anim(첫 페인트 전 page.html 인라인 스크립트, reduced-motion 이면 안 붙음)일 때만 숨긴다 → JS 가 죽어도 보인다.
   RV 목록은 fp.js 의 RV 와 같게. 중첩된 대상은 바깥 것만 움직인다. */
html.fp-anim :is(.fp-rv,.fp-head,.fp-ba__card,.fp-note,.fp-statement,.fp-intro>*,.fp-callout,.fp-card>*,.fp-compare,.fp-split>*,.fp-pair>*,.fp-points,.fp-who__body,.fp-special__side,.fp-sl,.fp-steps>li,.fp-faq__item,.fp-types>li,.fp-gallery>li,.fp-grid>*,.fp-table-wrap,.fp-wrap>.fp-figure,.fp-wrap>.fp-body,.fp-wrap>.fp-vs,.fp-form__sec):not(:is(.fp-rv,.fp-head,.fp-ba__card,.fp-note,.fp-statement,.fp-intro>*,.fp-callout,.fp-card>*,.fp-compare,.fp-split>*,.fp-pair>*,.fp-points,.fp-who__body,.fp-special__side,.fp-sl,.fp-steps>li,.fp-faq__item,.fp-types>li,.fp-gallery>li,.fp-grid>*,.fp-table-wrap,.fp-wrap>.fp-figure,.fp-wrap>.fp-body,.fp-wrap>.fp-vs,.fp-form__sec) *):not(.fp-in){
opacity:0;transform:perspective(calc(1400*var(--u))) translate3d(0,calc(20*var(--u)),calc(-60*var(--u))) rotateX(-7deg) rotateY(var(--fp-rvy,0deg))}
html.fp-anim .fp-in:not(.fp-done){opacity:1;transform:perspective(calc(1400*var(--u))) translate3d(0,0,0) rotateX(0deg) rotateY(0deg);
transition:opacity 950ms ease,transform 950ms cubic-bezier(.22,.61,.36,1)}
/* 빛을 붙일 자리 — fp.js 는 position:static 인 칸을 건너뛴다(MOTION.md 4절 ⑦). 오프셋이 없어 정지 화면은 그대로다 */
.fp-card,.fp-types>li,.fp-steps>li,.fp-num,.fp-descbox,.fp-grid>*,.fp-gallery>li>figure,.fp-dgm{position:relative}
/* 호버 확대: .fp-zoom 액자 안 사진만 커진다 */
.fp-zoom{position:relative;overflow:hidden}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.fp-zoom img{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.fp-zoom:hover img{transform:scale(1.08)}
.fp-compare__img.fp-zoom:hover img{transform:scale(1.12)}
}
/* 히어로 진입 연출(로드 시 한 번): 헤더 내려옴 · 사진 1.08 → 1 · 글자 시차. fill backwards → 끝난 화면은 정지 화면과 같다 */
@keyframes fp-hi-down{from{opacity:0;transform:translateY(-100%)}}
@keyframes fp-hi-zoom{from{transform:scale(1.08)}}
@keyframes fp-hi-rise{from{opacity:0;transform:translateY(calc(28*var(--u)))}}
@keyframes fp-hi-wipe{from{clip-path:inset(0 0 100% 0);transform:translateY(calc(40*var(--u)))}to{clip-path:inset(0 0 -20% 0);transform:none}}
html.fp-anim .fp-header{animation:fp-hi-down .8s cubic-bezier(.22,.61,.36,1) .05s backwards}
html.fp-anim .fp-hero__photo img{transform-origin:50% 100%;animation:fp-hi-zoom 2600ms cubic-bezier(.16,1,.3,1) backwards}
html.fp-anim .fp-hero__tag{animation:fp-hi-rise .9s cubic-bezier(.22,.61,.36,1) .15s backwards}
html.fp-anim .fp-hero__title{animation:fp-hi-wipe 1.1s cubic-bezier(.22,.61,.36,1) .28s backwards}
html.fp-anim .fp-hero__lead{animation:fp-hi-rise .9s cubic-bezier(.22,.61,.36,1) .66s backwards}
html.fp-anim .fp-hero__hash li{animation:fp-hi-rise .9s cubic-bezier(.22,.61,.36,1) .79s backwards}
html.fp-anim .fp-hero__hash li+li{animation-delay:.92s}
/* 변형별 한 벌(M7): C 는 사진이 글자 뒤 전면이라 확대를 줄이고, D 는 액자와 안쪽 사진이 다른 속도로 움직여 깊이를 만든다.
   A·B 는 공통 규칙 그대로(B 는 글자 묶음이 거울상일 뿐 차례는 같다) */
@keyframes fp-hi-zoom6{from{transform:scale(1.06)}}
@keyframes fp-hi-frame{from{transform:scale(1.04)}}
html.fp-anim .fp-hero--c .fp-hero__photo img{animation-name:fp-hi-zoom6}
html.fp-anim .fp-hero--d .fp-hero__photo{transform-origin:50% 50%;animation:fp-hi-frame 1.6s cubic-bezier(.16,1,.3,1) backwards}
/* 3D 기울기 빛 · 히어로 깊이 · 커서 — 마우스 기기 + reduced-motion 아님(fp.js 도 같은 조건)
   히어로 사진은 마우스 반대로 가로 최대 14u 움직이므로 양옆에 14u 여유를 둔다(사진이 상자를 꽉 채워 옮기면 가장자리가 빈다) */
/* 히어로 사진 여유 — 마우스 가로 시차(±14u)와 스크롤 세로 시차(±18u, MOTION.md M2)가 움직일 자리.
   **모션이 켜진 화면에서만 레이아웃이 다른 유일한 예외**다(reduced-motion 캡처 = verify ⑨ 는 여유 없는 판을 찍는다).
   터치 기기에도 있어야 한다 — 세로 시차는 터치의 유일한 3D 다 → 마우스 조건(hover·pointer)을 떼었다 */
@media (prefers-reduced-motion:no-preference){
.fp-hero__photo img{position:absolute;left:calc(-14*var(--u));top:calc(-18*var(--u));
width:calc(100% + calc(28*var(--u)));height:calc(100% + calc(36*var(--u)))}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
/* 빛 반사 — fp.js 가 대상 안에 두 겹(<i class="fp-glare"> 잘라 내는 판 + 그 안의 잎 <i>)을 만들어 붙이고 **잎의** transform·opacity 만 쓴다.
   바깥 판은 fp.js 가 인라인으로 자리를 잡으므로 CSS 는 잎만 그린다 — 바깥에 opacity 를 걸면 잎이 통째로 안 보인다.
   상속되는 커스텀 속성으로 매 프레임 값을 넘기면 자손 수에 비례해 비용이 든다(0.198~1.285ms → 0.010ms, MOTION.md M5).
   런타임 생성이라 빌드 결과 HTML 은 그대로고, 글자·미디어가 없어 verify ④·⑧·⑩ 밖이다.
   2026-09-18 fp.js 가 옮겨 왔다 → 옛 `.fx-g::before` 는 지웠다. */
.fp-glare{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;z-index:2}
.fp-glare>i{position:absolute;left:-60%;top:-60%;width:220%;height:220%;pointer-events:none;opacity:0;
background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.26) 0,rgba(255,255,255,0) 30%);will-change:transform,opacity}
html.cc,html.cc *{cursor:none!important}
/* **폼 컨트롤 위에서는 브라우저 커서를 되살린다**(2026-09-28 9단계 — `online-reservation`·`model-support` 검토가 같이 올렸다).
   지난 47장은 읽기만 하는 화면이라 티가 안 났다: 폼이 처음 나온 자리가 9단계이고, 26칸을 채우는 화면에서
   I-빔이 사라지면 「여기에 글을 쓸 수 있다」는 신호가 0 이 된다. 링·점은 `fp.js` 의 `pick()` 이 `cc-hid` 로 내린다.
   ⚠ 단추·링크는 그대로 둔다 — 거기는 분홍 링이 이미 어포던스다(`.fp-form__submit` 은 `<button>` 이라 안 든다). */
html.cc :is(input,textarea){cursor:auto!important}
html.cc :is(select,input[type=checkbox],input[type=radio],input[type=file],.fp-form__chip,.fp-form__check,.fp-form__drop){cursor:pointer!important}
html.cc #cc-dot,html.cc #cc-ring{display:block}
}
#cc-dot,#cc-ring{display:none;position:fixed;left:0;top:0;pointer-events:none;z-index:2147483050;opacity:0}
#cc-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;mix-blend-mode:difference;transition:opacity .2s ease}
#cc-ring{box-sizing:border-box;width:34px;height:34px;border:1.5px solid #fff;border-radius:999px;mix-blend-mode:difference;
transition:opacity .25s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
#cc-ring svg{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;fill:#3a3a3a;opacity:0;transform:scale(.5);
transition:opacity .2s ease,transform .35s cubic-bezier(.22,.61,.36,1)}
#cc-ring.cc-drag{mix-blend-mode:normal;background-color:rgba(255,186,222,.95);border-color:rgba(255,186,222,0);box-shadow:0 8px 28px rgba(58,58,58,.18)}
#cc-ring.cc-link{mix-blend-mode:multiply;background-color:rgba(255,186,222,.9);border-color:rgba(255,186,222,0)}
#cc-ring.cc-drag .cc-i-drag{opacity:1;transform:none}
html.cc.cc-on #cc-dot,html.cc.cc-on #cc-ring{opacity:1}
html.cc.cc-on #cc-dot.cc-hid,html.cc.cc-on #cc-ring.cc-hid{opacity:0}
@media (prefers-reduced-motion:reduce){
.fp-page *,.fp-page *::before,.fp-page *::after{transition-duration:0s!important;animation:none!important}
/* 도해 층·빛은 완전히 평면. fp.js 가 호버 동안 인라인으로 거는 perspective 까지 막는다(스타일시트 !important 가 인라인을 이긴다) */
.fp-hex,.fp-hex__item,.fp-venn,.fp-plus,.fp-ovl,.fp-duo,.fp-duo>li,.fp-duo__p,.fp-flow,.fp-flow>li,.fp-dgm{perspective:none!important;transform-style:flat!important}
.fp-glare{display:none!important}
}
/* ⚠ **`.fp-form__sec` 는 2026-09-28 9단계 ④ 가 더했다**(`online-reservation` 검토 ⑥) — 폼 한 장이 통째로 한 대상이면
   1920 에서 6,353px 을 내리는 동안 **첫 한 번 말고는 아무것도 움직이지 않는다**(그 장의 `.fp-rvt` 가 1개였다).
   ⚠ 그러려면 **폼 루트에서 `fp-rv` 를 떼야 한다** — 위 `:not(:is(…) *)` 가 「대상의 자손인 대상」을 빼기 때문이다
   (COMPONENTS 31 예시도 같이 고쳤다). 이 이름을 쓰는 것은 9단계 폼 두 장뿐이라 나머지 47장은 한 픽셀도 안 바뀐다. */
/* 인쇄·PDF: 스크롤하지 않고 인쇄하면 진입 대상이 opacity 0 그대로라 빈 칸으로 나왔다 */
@media print{
html.fp-anim :is(.fp-rv,.fp-head,.fp-ba__card,.fp-note,.fp-statement,.fp-intro>*,.fp-callout,.fp-card>*,.fp-compare,.fp-split>*,.fp-pair>*,.fp-points,.fp-who__body,.fp-special__side,.fp-sl,.fp-steps>li,.fp-faq__item,.fp-types>li,.fp-gallery>li,.fp-grid>*,.fp-table-wrap,.fp-wrap>.fp-figure,.fp-wrap>.fp-body,.fp-wrap>.fp-vs,.fp-form__sec){
opacity:1!important;transform:none!important}
.fp-page *,.fp-page *::before,.fp-page *::after{animation:none!important;transition:none!important}
#fmenu,#cc-dot,#cc-ring{display:none!important}
}
/* fp.js 가 안 받아졌을 때(JS 는 켜졌지만 차단·실패) — page.html 인라인 스크립트가 4초 뒤 붙인다. noscript 판과 같은 가로 스크롤 */
html.fp-nojs .fp-sl{overflow-x:auto;clip-path:none;scroll-snap-type:x mandatory}
html.fp-nojs .fp-sl__slide{scroll-snap-align:start}
html.fp-nojs .fp-sl__nav{display:none}

/* ── 모바일 탭 타깃(≥44px) ── 검토 2026-09-18: 전후사진 스위치 글자 93.7x22.5 · 햄버거 26x26 · 푸터 Guide 링크 124.7x21.7 이라 빗나가기 쉬웠다.
   글자·아이콘 크기는 그대로 두고 안쪽 여백 + 같은 크기 음수 바깥 여백으로 누를 자리만 넓힌다(조판은 그대로).
   푸터 링크만은 줄 간격(16u=17px)이 좁아 넓힌 자리끼리 겹치므로 간격을 24u 로 벌린다. 이 묶음은 기본 규칙보다 뒤에 와야 이긴다. */
@media (max-width:1279px){
.fp-ba__opt{padding-block:calc(11*var(--u));margin-block:calc(-11*var(--u))}
.fp-burger::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.fp-footer__guide li+li{margin-top:calc(24*var(--u))}
.fp-footer__guide a{padding-block:calc(11*var(--u));margin-block:calc(-11*var(--u))}
.fp-footer__social a{padding:calc(12*var(--u));margin:calc(-12*var(--u))}   /* 2026-10-01 아이콘 20u → 누를 자리 44u · 사이 30u 라 안 겹친다 */
}

/* ── ⑦ 오름 막대 도해 `.fp-ladder` (2026-09-22 `build:components` — 4단계 SMAS-facelift 「Step-by-step lifting Recommendation」) ──
   원본(`smas-face-lift-img02-3.png` 1070x530, 1440 렌더 1070px = 등배) 실측: 막대 4개가 폭 160 · 사이 68 · 바닥 y457 에 서고
   꼭대기가 **280 / 244 / 202 / 135**(= 높이 177 · 213 · 255 · 322)로 왼→오 올라간다. 그림자 없음(가장자리 알파 0), 머리만 반원(반지름=폭/2).
   축은 연두 선(두께 3px) 둘 — 세로 x70 · 가로 y457 이고 끝에 화살촉이 있다. 검은 알약 둘은 **Procedure**(막대1 위, 가는 선 하나)·
   **Surgery**(막대2~4 를 ㄷ자 괄호로 묶는다, 상자 134x35 / 108x35). 막대 위를 지나는 굵은 곡선 화살표는 바탕 인라인 `<svg>` 몫이다.
   **기존 컴포넌트로 안 되는 까닭**: `.fp-flow` 는 같은 높이 사각 판 + 갈매기 뱃지(축·높이차가 없다) · `.fp-plus`·`.fp-duo` 는 이음 뱃지가
   반드시 서는 2열 계통(원본에 뱃지가 없다) · `.fp-hex` 는 방사형 · `.fp-table`·`.fp-types` 는 높이차를 못 낸다.
   ⚠ 루트에 **`.fp-dgm` 을 같이 붙인다** — 3D 대상·평면 강등·빛 제외가 전부 그 이름으로 걸려 있어(fp.js TILT·TFLAT) 빠뜨리면 기울기가 조용히 사라진다.
   ⚠ **≤1279 는 가로 막대로 눕는다** — 4칸을 세로로 세우면 390 에서 칸이 76px 이라 「Laser lifting」이 두 줄로 접히고,
   글이 긴 막대1 이 키를 되레 넘겨(실측 134px > 막대4 112px) **높이가 거짓말을 한다.** 누우면 길이(폭)가 그 자리를 대신하고 글은 한 줄로 선다. */
.fp-ladder{position:relative;margin-inline:auto;width:100%;max-width:calc(var(--w,1070)*var(--u));
--fp-line:var(--c-pink);--fp-pill-bg:var(--c-dark);--fp-pill-c:#ffffff;--fp-hair:var(--c-div);--fp-hmax:322;--fp-axw:calc(4*var(--u))}
/* 플롯 상자 — 두 축이 이 상자의 테두리다. 높이는 보드 px(`--fp-ploth`)이라 막대 %가 풀린다.
   글이 길어 막대를 넘치면 **상자를 키운다**(글자를 줄이지 않는다 — WORKFLOW 「잣대는 늘 원본 쪽에」). */
.fp-ladder__plot{position:relative;height:calc(var(--fp-ploth,430)*var(--u));margin-left:calc(var(--fp-axl,94)*var(--u));
border-left:var(--fp-axw) solid var(--fp-line);border-bottom:var(--fp-axw) solid var(--fp-line)}
/* 세로축 왼쪽 여백(`--fp-axl`)은 **세운 축 라벨이 설 자리**다 — 라벨은 축 밖으로 나가므로 여백이 0 이면 기둥 밖으로 넘친다(verify ⑦ 가로 넘침). */
.fp-ladder__plot::before{content:'';position:absolute;left:calc(-1*var(--fp-axw));top:calc(-11*var(--u));width:0;height:0;
margin-left:calc(-5*var(--u));border-inline:calc(7*var(--u)) solid transparent;border-bottom:calc(13*var(--u)) solid var(--fp-line)}
.fp-ladder__plot::after{content:'';position:absolute;right:calc(-13*var(--u));bottom:calc(-9*var(--u));width:0;height:0;
border-block:calc(7*var(--u)) solid transparent;border-left:calc(13*var(--u)) solid var(--fp-line)}
.fp-ladder__track{position:absolute;inset:0;display:flex;align-items:flex-end;gap:calc(var(--fp-bgap,68)*var(--u));
padding-inline-start:calc(var(--fp-inset,38)*var(--u));padding-inline-end:calc(var(--fp-inend,0)*var(--u))}
/* 막대 — 키는 **플롯 높이(--fp-ploth) 대비 %** 다. `--fp-h` 와 `--fp-ploth` 는 **같은 단위(보드 px)** 로 준다 —
   원본 그림의 「막대 꼭대기~바닥」과 「플롯 위끝~바닥」을 그대로 옮기면 비가 저절로 맞는다(SMAS: 177/213/255/322 안에 457).
   `--fp-hmax`(= 가장 높은 막대 값)는 **≤1279 에서만** 쓴다(누운 막대의 길이 기준). 둘을 헷갈려 키를 --fp-hmax 로 풀면
   가장 높은 막대가 플롯을 꽉 채워 **전체가 41% 커진다**(2026-09-22 실측 249.6px ↔ 원본 177px). 머리 반원은 border-radius 999px 가
   저절로 폭의 절반이 되고, 글은 그 반원 **아래**에서 시작한다(::before 의 padding-top:50% = 폭의 절반 = 반지름). */
.fp-ladder__bar{position:relative;flex:1 1 0;min-width:0;height:calc(var(--fp-h,180)/var(--fp-ploth,430)*100%);
display:flex;flex-direction:column;align-items:center;gap:calc(6*var(--u));
padding:0 calc(14*var(--u)) calc(14*var(--u));border-radius:999px 999px 0 0;background:var(--fp-c,var(--c-pink-bg));
--fp-z:calc(12*var(--u));transform:translateZ(var(--fp-z));transform-style:preserve-3d}
.fp-ladder__bar::before{content:'';display:block;width:100%;padding-top:50%}
.fp-ladder__t{font-size:var(--fp-t-fs,calc(29*var(--u)));font-weight:700;line-height:1.25;text-align:center;color:var(--c-text)}
.fp-ladder__d{font-size:var(--fp-d-fs,calc(24*var(--u)));line-height:1.2;text-align:center;color:var(--c-sub)}
/* 줄 간격이 원본보다 넓으면 글이 막대 밖으로 흘러내린다 — 원본 실측은 잉크 17px 에 **줄 사이 21px**(= 1.2)이고 1.35 로 두면
   막대1(3줄)이 9px 넘쳤다(2026-09-22 실측). 넘치면 줄 간격이 아니라 `--fp-ploth` 를 키운다. */
/* 축 라벨 — 세로축은 90° 세워 축 왼쪽에, 가로축은 축 오른쪽 아래에. 두 글자 다 원문(baked.txt)에 있다 */
.fp-ladder__ax{position:absolute;color:var(--c-sub);font-size:var(--fp-ax-fs,calc(33*var(--u)));line-height:1.2;white-space:nowrap}
.fp-ladder__ax--y{left:0;top:var(--fp-y,6%);writing-mode:vertical-rl;transform:translateX(-100%);margin-left:calc(-14*var(--u))}
/* 원본은 **위에서 아래로** 읽는다(글자 머리는 오른쪽) = `vertical-rl` 그대로다. `rotate(180deg)` 를 얹으면 아래에서 위로 읽힌다 */
/* 들여쓰기 손잡이 `--fp-axpad`(기본 0 = 지금 값) — 원본은 가로축 라벨이 액자 오른끝에서 9.3% 들여 있는데
   우리는 액자 폭 전체 + text-align:right 라 여백 0 으로 붙었다(2026-09-23 SMAS 원본 1070x530 실측 오른 여백 100px). */
.fp-ladder__ax--x{position:static;display:block;text-align:right;margin-top:calc(16*var(--u));padding-right:var(--fp-axpad,0)}   /* 플롯 **밖**(형제)이다 — 안에 두면 축 아래로 넘쳐 다음 블록과 겹친다 */
/* 검은 알약 — 자리는 플롯 안 %(`.fp-ovl__tag` 와 같은 손잡이). `--fp-drop` 은 알약에서 **한 막대로** 내리는 가는 선의 길이(보드 px)다.
   ⚠ **여러 막대를 묶는 ㄷ자 괄호는 여기 없다** — 원본은 다리 두 개의 길이가 다르고(막대2 까지 192px · 막대4 까지 83px)
   CSS 상자 하나로는 같은 길이만 나와 한쪽이 막대 속으로 들어간다. 괄호는 바탕 `<svg>` 가 그린다(아래 `.fp-ladder__svg`). */
.fp-ladder__tag{position:absolute;left:var(--fp-x,10%);top:var(--fp-y,0%);z-index:3;
display:inline-flex;align-items:center;justify-content:center;
padding:calc(7*var(--u)) calc(20*var(--u));border-radius:999px;background:var(--fp-pill-bg);color:var(--fp-pill-c);
font-size:var(--fp-tag-fs,max(12px,calc(19*var(--u))));font-weight:700;line-height:1.3;white-space:nowrap;
--fp-z:calc(26*var(--u));transform:translate(-50%,0) translateZ(var(--fp-z))}
.fp-ladder__tag::after{content:'';position:absolute;left:50%;top:100%;width:var(--fp-axw);height:calc(var(--fp-drop,0)*var(--u));
margin-left:calc(-0.5*var(--fp-axw));background:var(--fp-hair)}
/* 바탕 벡터(곡선 화살표) — 페이지가 인라인 `<svg>` 로 넣는다. `preserveAspectRatio="none"` 으로 플롯을 꽉 채우므로
   viewBox 비를 `--w : --fp-ploth` 와 같게 둔다(어긋나면 화살표가 눌린다). 글자는 넣지 않는다(장식, aria-hidden). */
.fp-ladder__svg{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
@media (max-width:1279px){
/* 가로 막대로 눕는다 — 길이가 순서를 말하고, 글은 왼쪽에서 한 줄로 선다. 축·화살표는 이 판에 뜻이 없어 접는다(축 **라벨 글자는 남는다**). */
.fp-ladder{max-width:none}
.fp-ladder__plot{height:auto;margin-left:0;border:0}
.fp-ladder__plot::before,.fp-ladder__plot::after{content:none}
.fp-ladder__svg{display:none}
.fp-ladder__track{position:static;flex-direction:column;align-items:flex-start;gap:calc(14*var(--u));padding-inline:0}
.fp-ladder__bar{width:calc(var(--fp-h,180)/var(--fp-hmax,322)*100%);min-width:calc(var(--fp-rowmin,150)*var(--u));height:auto;
align-items:flex-start;gap:calc(4*var(--u));padding:calc(16*var(--u)) calc(24*var(--u));border-radius:999px}
.fp-ladder__bar::before{content:none}
.fp-ladder__t,.fp-ladder__d{text-align:left}
.fp-ladder__t{font-size:var(--fp-t-fs-mo,calc(15*var(--u)))}
.fp-ladder__d{font-size:var(--fp-d-fs-mo,calc(13*var(--u)))}
.fp-ladder__ax{position:static;display:block;transform:none;writing-mode:horizontal-tb;margin:0;white-space:normal;
font-size:var(--fp-ax-fs-mo,calc(13*var(--u)))}
.fp-ladder__ax--y{margin-bottom:calc(10*var(--u))}
.fp-ladder__ax--x{margin-top:calc(10*var(--u));text-align:right;padding-right:var(--fp-axpad-mo,0)}
.fp-ladder__tag{position:static;transform:none;margin:0 calc(8*var(--u)) calc(12*var(--u)) 0;
font-size:var(--fp-tag-fs-mo,calc(13*var(--u)));padding:calc(5*var(--u)) calc(14*var(--u))}
/* 알약 글자 크기는 **보드마다 따로** 준다 — `--fp-tag-fs` 한 벌로 두면 모바일 보드(360)에서 같은 보드 px 가 3배로 커져
   390 에서 25px 짜리 알약이 선다(2026-09-22 실측). `.fp-ovl` 계열이 `--fp-tag-fs:max(12px,…)` 로 바닥만 잡아 둔 것과 같은 함정이다. */
.fp-ladder__tag::after{content:none}
}
/* 정지 화면 비용 0 — 도해 층·빛은 평면으로(위 `.fp-dgm` 묶음과 같은 규칙, 이름만 더한다) */
@media (prefers-reduced-motion:reduce){
.fp-ladder,.fp-ladder__bar,.fp-ladder__tag{perspective:none!important;transform-style:flat!important}
.fp-ladder__tag{transform:translate(-50%,0)!important}
}
@media (prefers-reduced-motion:reduce) and (max-width:1279px){.fp-ladder__tag{transform:none!important}}

/* ── `.fp-hex` 글자 크기 손잡이 (2026-09-22 `build:components` — 4단계 Mid-face-lift §6) ──
   원본 육각 설명문 바닥값이 1440 에서 **21.3px**(= 네이티브 24 × 1259/1419)인데 `.fp-hex__desc` 는 `--fs-body`(1440 에서 15px) 고정이었다.
   인라인은 `--fp-*` 만 받으므로(verify ⑩) 페이지가 `--fs-body` 를 직접 줄 수 없어, 안 열면 다시 만든 육각이 원본보다 30% 가볍게 선다.
   **기본값이 지금 값과 같아 값을 주지 않은 9곳은 한 픽셀도 안 바뀐다.** 잣대는 원본 쪽이다 —
   `원본 네이티브 글자 크기 × (원문 1440 렌더 폭 ÷ 원본 픽셀 폭)`, 우리 액자 폭은 이 식에 넣지 않는다(2026-09-22 수정 이력). */
.fp-hex__label{font-size:var(--fp-label-fs,var(--fs-body))}
.fp-hex__desc{font-size:var(--fp-desc-fs,var(--fs-body))}

/* ── ⑧ `.fp-ovl--part` — 한 그림에서 **네모난 조각**을 꺼내 쓴다 (2026-09-22 `build:components` — 4단계 SMAS-facelift 두 판 도해) ──
   `.fp-ovl--crop`(=`object-fit:cover`)은 액자 비가 다른 **한 축만** 자른다 — 786x570 한 장에 나란히 구워진 두 판을 가르려면
   가로·세로 **두 축**을 잘라야 하고(왼 판 x0..380·y39..532 / 오른 판 x381..785·y0..557), cover 로는 어느 비를 줘도 한 축이 통째로 남는다.
   파생 crop 자산 두 장을 만드는 길도 있었지만 같은 그림이 두 벌 더 생기고 놓을 자리(`_fp/img/` 밖)는 verify ⑥ 이 보지 않는다 →
   **자산을 늘리지 않고 CSS 로 꺼낸다.** 값 셋은 **자른 조각 기준**이다:
     --fp-ar = 조각 가로/세로 · --fp-sw = 100% × (원본 가로 ÷ 조각 가로) · --fp-sx = −100% × (조각 x0 ÷ 조각 가로) · --fp-sy = −100% × (조각 y0 ÷ 조각 세로)
   (왼 판 `--fp-ar:380/493;--fp-sw:206.84%;--fp-sy:-7.91%` · 오른 판 `--fp-ar:404/557;--fp-sw:194.55%;--fp-sx:-94.31%`)
   left/top 의 %는 **담는 상자**(액자) 기준이라 액자가 커져도 조각이 그대로 따라온다. 액자에 `aspect-ratio` 가 있어 `loading="lazy"` 로도 0 으로 주저앉지 않는다.
   ⚠ 표시(`__dot`·`__tag`)의 %는 **액자(=조각) 기준**이 된다 — 원본 그림 기준 좌표를 그대로 옮기면 어긋난다. 조각 안 비율로 다시 잰다. */
/* `box-sizing:content-box` — 이 액자는 `.fp-types` 칸의 마지막 도해가 되는 일이 많은데 그 자리에는 간격용 **투명 border**(20u)가 붙는다(COMPONENTS 24).
   border-box 로 두면 ① `aspect-ratio` 가 테두리까지 포함해 조각 비가 어긋나고 ② abspos 의 % 기준 상자(padding box)가 테두리만큼 내려가
   조각이 15px 밀린다(2026-09-22 실측 -26.5px ↔ -27.7px · 두 번째 액자는 +15px). content-box 면 둘 다 조각 기준으로 돌아오고 간격은 그대로 남는다. */
.fp-ovl--part{box-sizing:content-box;overflow:hidden;aspect-ratio:var(--fp-ar,1/1)}
/* 선택자에 클래스를 **둘** 쓴다 — `.fp-types figure img{width:100%}`(0,1,2)가 `.fp-ovl--part>img`(0,1,1)를 이겨
   조각이 액자 폭으로 되돌아간다(2026-09-22 실측: 폭 558 이어야 할 그림이 270 으로 섰다). 이 액자가 설 자리가 바로 `.fp-types` 칸 안이다. */
.fp-ovl.fp-ovl--part>img{position:absolute;left:var(--fp-sx,0%);top:var(--fp-sy,0%);width:var(--fp-sw,100%);max-width:none;height:auto}

/* ── 28 게시판 목록 `.fp-board`(격자) / `.fp-board--table`(표) · 29 쪽 넘김 `.fp-pager`
      (2026-09-27 `build:components` — 8단계 게시판 넷 + 9단계 둘. 조판은 손이 아니라 `tools/board.py` 가 한다) ──
   원문 실측이 두 계통에서 거의 같아 한 이름으로 묶었다.
     · 격자 = KBoard 갤러리 스킨(academic·press) + 우리 블로그 수집기(`rbb-card`): 썸네일 액자 + **가운데 제목** + 날짜.
       1440 실측 제목 **20px/lh30 · mt25 · 가운데 · #242424** · 날짜 **14px #999** · 썸네일 높이 **235px**(스킨 JS 가 정사각을 만들려 하지만
       테마 `!important` 에 져서 어느 폭에서도 235) · 칸 사이 **46px / 1.5%**(블로그 ≥1400) · 호버 때 **사진 1.06배 + 제목 밑줄**.
     · 표 = KBoard 기본 스킨(notice): 1440 열폭 번호 100 / 제목 959.5 / 작성자 100 / 날짜 100 · 행 **73px** · 머리행 `#f9f9f9` + 위 **2px #333** ·
       제목 **18px #000** · 고정글 행 `#fbfbfb` · ≤600(우리는 ≤1279) 은 **제목 한 칸 + 그 아래 「날짜 | 조회수」 13px #999**.
   ⚠ 원문의 **고정 px 을 그대로 박지 않는다** — 디자인 계약대로 보드 px × `--u` 로 환산했다(1440 에서 원문과 같아진다).
   ⚠ **열 수는 모바일에서도 고를 수 있어야 한다** — 원문 KBoard 는 390 에서 1열, 블로그는 2열이다 → `--fp-cols-mo`(≤1279) · `--cols`(≥1280).
      이름에 `--fp-` 를 붙인 것은 verify ⑩ 이 인라인에서 받는 이름이 `--w --cols --trim --fill` + `--fp-*` 뿐이기 때문이다(`--cols-mo` 는 불합격).
   ⚠ **제목을 기본으로 자르지 않는다**(academic 조사 ②의 「정하고 나서 값으로 연다」에 대한 답) — 자르면 화면에서 글자를 잃고(규칙 4 의 정신),
      원문도 1440 에서 1~5줄로 카드 높이가 이미 제각각이다. 격자는 grid 라 줄 높이가 저절로 맞는다.
      **원문이 실제로 자르는 자리**(블로그 `-webkit-line-clamp:2`)만 `.fp-board--clamp` + `--fp-board-lines`(기본 2)로 잘라 준다.
   ⚠ **진입 모션은 루트에 `.fp-rv`** 를 붙여 받는다 — fp.css 의 RV 목록에 **칸(`>li`)을 넣지 않았다**(`.fp-gallery>li` 와 다르다).
      9단계 `surgery-review` 는 한 쪽이 12칸이지만 게시판 전체로는 975글이고, 칸마다 층·빛을 걸면 스크롤 핸들러가 그만큼 무거워진다.
   ⚠ 카드에 `.fp-zoom` 을 붙이지 않는다 — 원문 호버는 사진 1.06배 + 제목 밑줄뿐이고 빛·3D 기울기가 없다(MOTION 3절 3D 대상 목록에도 넣지 않았다).
   ⚠ **번호 열(`.fp-board__num`)을 verify ④ 의 번호 라벨 자리(NUM_SLOTS)에 넣지 않았다** — 게시판 번호는 「자리 순번」이 아니라 원문 글 번호다(1쪽은 42·41·40…).
      NUM_SLOTS 에 넣으면 순번과 달라 전부 불합격이 된다. 번호는 `source.txt` 에 그 줄이 있어 코퍼스로 통과한다. 쪽 번호는 아래 `.fp-pager__n`(④ 의 새 규칙)이다. */
.fp-board{display:grid;grid-template-columns:repeat(var(--fp-cols-mo,1),1fr);gap:calc(28*var(--u)) 3%;
margin:0;padding:0;list-style:none;max-width:calc(var(--w,1440)*var(--u));margin-inline:auto}
/* **≤1279 는 한 값이 아니라 사다리다** `.fp-board--fit` + `--fp-board-minw-mo`(2026-09-28 8단계 ④ ·
   academic-activities 1차 검토 ② · press-release 2차 검토 ①이 같이 올렸다). `--fp-cols-mo` 가 ≤1279 **한 값**이라
   390(1열이 맞다)과 768~1279 를 못 갈랐다 — 우리는 768·1024·1279 세 폭 모두 1열 648px 에 문서 11,003px 인데
   원문은 같은 폭에서 2·3·4열에 3,296 / 3,094 / 2,720px 이다(**3.3~4.0배**). 원문 사다리 실측(press-release):
   1279 4x266.3 · 1200 4x247.1 · 1024 3x275.5 · 900 2x391.8 · 768 2x334.3 · 648 1x570 — **열 수 한 값으로는 못 맞춘다.**
   그래서 「칸 최소 폭」으로 준다: `repeat(auto-fill,minmax(min(100%,<최소폭>),1fr))` 한 줄이 그 네 걸음을 저절로 낸다.
   `min(100%,…)` 이 있어야 기둥보다 넓은 최소폭에서 넘치지 않는다. **안 붙이면 한 픽셀도 안 바뀐다**(새 이름이다). */
@media (max-width:1279px){
.fp-board--fit{grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--fp-board-minw-mo,100%)),1fr))}
}
.fp-board>li{margin:0;padding:0;list-style:none}
/* 칸을 **줄 높이만큼** 세운다(2026-09-28 8단계 ④ · press-release 2차 검토 ②) — 격자가 `display:grid` 라 «칸(li)» 은
   줄 높이까지 늘어나지만 그 안의 `<a>` 는 `display:block` 이라 안 늘어났다. 그래서 제목 줄 수가 다른 칸끼리
   날짜 줄이 제각각 섰다(실측 같은 줄 안 최대 **1920 119.9px · 1440 90.1 · 2560 155.5**).
   `height:100%` + flex 세로 + **제목 칸이 남은 자리를 먹는다**(`flex:1 0 auto`) — 날짜는 제 `margin-top`(≤1279 6u · PC 11u)을
   그대로 지키면서 한 줄 안에서 같은 높이에 선다(날짜에 `margin-top:auto` 를 주면 그 두 값이 사라진다).
   ⚠ 블록 흐름일 때와 **높이는 같다**(칸 안 요소가 전부 블록이고 여백이 margin-top 이라 겹침이 없다).
   ⚠ 날짜가 없는 게시판(원문이 감추는 `kboard-gallery` 둘)에서는 제목 칸만 늘어나므로 **화면이 한 픽셀도 안 바뀐다**. */
.fp-board__card{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.fp-board__card>.fp-board__title{flex:1 0 auto}
/* 썸네일 액자 — 비(`--fp-board-ar`)로 세운다. 기본 380/250 은 academic·press 썸네일 **원본 비**다(원문 액자는 241.7x235 + cover 라
   1440 에서 가로 **32.3%**를 잘라 먹었다 — 조사 ③). `aspect-ratio` 가 있어 `loading="lazy"` 사진이 오기 전에도 0 으로 주저앉지 않는다(verify ⑧d). */
/* ⚠ `display:block` — 마크업이 `<span>` 이다(카드 전체가 `<a>` 안이라 `<div>` 를 쓸 수 없는 자리가 있다).
   인라인으로 두면 **`aspect-ratio` 가 아예 안 듣고** 액자 높이가 사진 원본비에서 나온다(1440 실측 208.1px = 준 비 380/250 과 다르다). */
/* ≤1279 짝 `--fp-board-ar-mo`(기본값이 `--fp-board-ar` = 지금 값, 2026-09-28 8단계 ④ blog) — 원문 블로그는 액자 높이를
   폭마다 **235 / 180 / 140px** 로 가르는데 우리는 한 값이라 390 에서 띠(제목 칸)가 원문 78.0% ↔ 우리 72.4% 로 갈렸다.
   `--fp-board-fs`/`-fs-mo` · `--cols`/`--fp-cols-mo` 와 같은 「보드를 가르는 짝」이다. */
.fp-board__thumb{display:block;position:relative;overflow:hidden;aspect-ratio:var(--fp-board-ar-mo,var(--fp-board-ar,380/250));
background:var(--fp-board-thumb-bg,var(--c-grey-bg));border:1px solid var(--fp-board-bc,#ebebeb);border-radius:var(--fp-board-thumb-r,0)}
.fp-board__thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fp-op,50% 50%)}
/* ⚠ 마크업은 `<h2 class="fp-board__title">` 이다(2026-09-28 8단계 ④ — 목록 쪽의 본문 heading 이 0 이던 자리. 디자인 계약
   「기준 보드는 a·h·img 가 0개라 검색·스크린리더에 안 보이는 결함이 있다 — 반복하지 않는다」). 그래서 **무게를 여기서 못박는다** —
   `:where(.fp-page) :where(h1,h2,h3){font-weight:700}` 은 특이도 0 이라 이 줄이 이기고, 값은 `<p>` 일 때와 같은 400 이다. */
.fp-board__title{margin-top:var(--fp-board-tmt-mo,var(--fp-board-tmt,calc(18*var(--u))));font-size:var(--fp-board-fs-mo,max(12px,calc(13.9*var(--u))));font-weight:var(--fp-board-fw,400);line-height:1.67;text-align:var(--fp-board-title-ta,center)}
/* 자름 줄 수도 보드마다 짝이다 — `--fp-board-lines-mo`(기본값이 `--fp-board-lines` = 지금 값, 2026-09-28 8단계 ④ blog). */
.fp-board--clamp .fp-board__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--fp-board-lines-mo,var(--fp-board-lines,2));overflow:hidden}
/* 날짜·조회수 줄. 원문은 #999(흰 바탕 2.85:1)인데 우리 바닥값이 3.0 이라 `--c-sub`(#6b6b6b · **5.33:1**)로 올렸다 — 조판이 `decisions` 에 적는다.
   ⚠ 2026-09-28 8단계 ④ — 옛 값 「5.74」는 오기였다(WCAG 2.x 상대휘도로 다시 계산하면 5.327). 같은 값이 COMPONENTS 28·29 와 페이지 기록 셋에 번져 있던 것을 같이 고쳤다. */
.fp-board__meta{margin-top:calc(6*var(--u));font-size:var(--fp-board-meta-fs-mo,max(12px,calc(12*var(--u))));line-height:1.5;color:var(--c-sub);text-align:var(--fp-board-title-ta,center)}
/* 「날짜 | 조회수」의 구분자 — **`--c-line`(옅은 선)이 아니라 `--c-div`** 다(2026-09-28 8단계 ④). 이 자리는 화면에서 읽히는
   글자이고 옅은 테 색(#ebebeb)을 주면 흰 바탕에서 1.15:1 로 사라진다. 원문은 이 줄 전체가 #999 이고 우리는 줄을 `--c-sub` 로 올렸다. */
.fp-board__sep{margin:0 .4em;color:var(--c-div)}
/* 표 계통 — 루트가 `<table class="fp-board--table">` 다. **`.fp-board` 를 같이 붙이지 않는다**(그쪽은 display:grid 다).
   ≤1279 에서 열을 감추는 것은 CSS 가 아니라 `.fp-only-pc`/`.fp-only-mo` 다 — verify ⑧ 이 「렌더 안 된 요소」를 잡고 그 둘만 면제한다. */
.fp-board--table{width:100%;table-layout:fixed;border-collapse:collapse;border-top:2px solid var(--fp-board-hbc,#333)}
.fp-board--table th,.fp-board--table td{padding:calc(14*var(--u)) calc(7*var(--u));text-align:left;vertical-align:middle;
font-size:max(12px,calc(13.9*var(--u)));font-weight:400;line-height:1.5;color:var(--c-sub);word-break:break-word}
/* 정렬 손잡이 `--fp-board-th-ta`(머리행) · `--fp-board-ta`(번호·작성자·날짜 열) — 기본값이 지금 값 `left` 다(2026-09-28 8단계 ④ notice).
   원문 1440 은 머리행 네 칸이 **모두 가운데**이고 본문도 번호·작성자·날짜가 가운데다(날짜 값이 100px 열 안에서 x1172~1247 = 중심 1209.5).
   우리는 `th,td{text-align:left}` 상수 + `.fp-board__num{text-align:center}` 뿐이라 머리행 셋과 본문 두 열이 왼쪽에 붙었다.
   인라인 style 은 `--fp-*` 만 받으므로(계약 ⑩) 조판이 닿을 수 없던 자리다. */
.fp-board--table thead th{background:var(--fp-th-bg,#f9f9f9);color:var(--c-dark);font-weight:500;text-align:var(--fp-board-th-ta,left);border-bottom:1px solid #e8e8e8}
.fp-board--table tbody tr{border-bottom:1px solid #f1f1f1}
.fp-board--table tbody tr.is-notice{background:#fbfbfb}
.fp-board--table .fp-board__link{display:block;color:var(--c-dark);font-size:max(12px,calc(13.9*var(--u)))}
.fp-board--table .fp-board__meta{display:block;margin-top:calc(4*var(--u));text-align:left}   /* 마크업은 `<span>`(인라인)이다 — 위 board.py 주석 참고 */
.fp-board--table .fp-board__col{text-align:var(--fp-board-ta,left)}
.fp-board--table .fp-board__num{text-align:center}
/* 쪽 넘김 — 원문 마크업이 평면(`strong`+`a`)이라 스킨 규칙이 하나도 안 걸려 **링크가 1.06:1 로 안 보인다**(notice·academic 조사).
   여기는 그 자리를 처음부터 새로 세운다: 링크 `--c-sub`(**5.33:1**) · 지금 쪽은 먹 + 굵게 + 분홍 밑줄(`.fp-points` 탭 라벨과 같은 어휘).
   ≤1279 는 탭 타깃 44px(1절 규칙) — 글자 크기는 그대로 두고 눌리는 자리만 넓힌다. */
.fp-pager{margin-top:calc(46*var(--u));text-align:center}
.fp-pager ul{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(2*var(--u));margin:0;padding:0;list-style:none}
.fp-pager li{margin:0;padding:0;list-style:none}
.fp-pager a,.fp-pager span{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
padding:0 calc(11*var(--u));font-size:max(12px,calc(12*var(--u)));line-height:1;color:var(--c-sub);text-decoration:none}
.fp-pager .is-current{color:var(--c-dark);font-weight:700;box-shadow:inset 0 -2px 0 var(--c-pink)}
@media (min-width:1280px){
.fp-board{grid-template-columns:repeat(var(--cols,4),1fr);gap:calc(61*var(--u)) 1.5%}
.fp-board__title{margin-top:var(--fp-board-tmt,calc(33*var(--u)));font-size:var(--fp-board-fs,max(12px,calc(26.7*var(--u))));line-height:1.5}
.fp-board__meta{margin-top:calc(11*var(--u));font-size:var(--fp-board-meta-fs,max(12px,calc(18.7*var(--u))))}
.fp-board--table th,.fp-board--table td{padding:calc(30.7*var(--u)) calc(7*var(--u));font-size:max(12px,calc(20*var(--u)))}   /* 1440 에서 행 높이 73px = 원문 그대로(위아래 23px + 18px 제목 lh1.5) */
.fp-board--table .fp-board__link{font-size:max(12px,calc(24*var(--u)))}
.fp-board--table .fp-board__num,.fp-board--table .fp-board__col{width:calc(133.3*var(--u))}   /* 원문 1440 열폭 100px = 133.3 보드 px */
.fp-pager{margin-top:calc(80*var(--u))}
.fp-pager a,.fp-pager span{min-width:0;min-height:calc(37*var(--u));font-size:max(12px,calc(17.3*var(--u)))}
}
/* 원문 호버 그대로 — 사진 1.06배(.5s) + 제목 밑줄(offset 4px). 층·빛은 걸지 않는다.
   ⚠ **움직이지 않는 단서는 `prefers-reduced-motion` 문 밖에 둔다**(2026-09-28 8단계 ④ · blog 2차 검토 ④).
   제목 밑줄·페이저 색까지 `no-preference` 안에 넣었더니 reduced-motion 에서 **호버 단서가 0개**가 됐다(실측 390·1920:
   모션 켬 = matrix(1.06) + underline ↔ reduced = transform none + text-decoration none). MOTION 3절의 「reduced-motion 이면
   전부 정지」는 **움직임을 멈추라는 것**이고 원문 `.rbb-card:hover .rbb-title{text-decoration:underline}` 에는 그런 문이 없다.
   fp.css 의 `@media (hover…)` 블록 셋 가운데 비-모션 속성이 든 것은 여기 하나뿐이라 집안 규칙도 아니었다. */
@media (hover:hover){
.fp-board__card:hover .fp-board__title,.fp-board--table .fp-board__link:hover{text-decoration:underline;text-underline-offset:4px}
.fp-pager a:hover{color:var(--c-dark)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.fp-board__thumb img{transition:transform .5s ease}
.fp-board__card:hover .fp-board__thumb:not(.fp-clin) img{transform:scale(var(--fp-board-zoom,1.06))}
}

/* ── 28a `.fp-board--card` · 28b `.fp-board--pair` · `.fp-board__cat` — **9단계 사진 게시판 둘의 「모양」**
      (2026-09-28 `build:components` — 8단계 ② 가 「행 뽑기는 되지만 배치 실측이 9단계 조사 몫」으로 남겨 둔 자리. COMPONENTS 28 마지막 줄) ──
   ⚠ **붙이지 않으면 한 픽셀도 안 바뀐다** — 둘 다 새 수식자이고 `.fp-board__cat` 은 새 요소다. 8단계 게시판 넷은 이 이름을 하나도 안 쓴다.

   · **28a `--card`**(`review/surgery-review` · 계통 `mm-kboard`) = 테 있는 카드 + **액자가 카드 맨 위에 꽉 차고** 글은 왼쪽 정렬.
     원문 실측(1440): 슬라이더 칸 **285x300** · 그 안 사진 **283x200**(`object-fit:cover` = 비 283/200) / 격자 칸 302.3x284 · 사진 300.3x200
     (격자 썸네일 원본은 **120x90** 이라 2.50배로 늘려 쓴다 — 조사 3절) · 카드 테 **1px #e0e0e0** · 반지름 **10px** · 안쪽 여백 **10px** ·
     제목 14px `#333` · 날짜 **12.6px `#888`**(= 흰 바탕 **2.85:1**, 우리 바닥 3.0 미달 → `.fp-board__meta` 기본 `--c-sub` **5.33:1** 을 그대로 쓴다) ·
     칸 사이 `margin:10px 5px`(= 줄 간격 20px · 가로 10px). 열 사다리 원문 **4(≥1279) · 3(1024) · 2(768·600) · 1(390)**.
     ⚠ 우리 보드 규칙은 **≤1279 가 모바일 보드(최대 2열)** 라 1279 에서 원문 4열 ↔ 우리 2열이 된다 — **사용자 결정 대기 ㉓** 다(고치려면 디자인 계약을 바꿔야 한다).
   · **28b `--pair`**(`review/before-and-after` · 계통 `kboard-cat-pair`) = 한 칸에 **전·후 두 컷이 나란히** + 제목 + 분류.
     원문은 인라인 style 뿐이다(`li{width:32%;min-width:260px;margin:0 1% 28px 0}` · 액자 `display:flex;gap:4px` · 각 `img{width:50%;border-radius:4px}` ·
     제목 `margin-top:8px;font-size:15px;font-weight:600` · 분류 `margin-top:2px;font-size:13px;color:#888`).
     1440 실측 카드 **403.0** · 사진 각 **186.5x245**(= 비 **424/557**) · 1920 카드 479.8 · 사진 224.9x295.4 · 390 사진 115x151.1.
     열 사다리 원문 **3(1920~1024) · 2(768·648) · 1(390)** — 여기도 1024 3열이 결정 대기 ㉓ 에 걸린다.
   ⚠ **액자가 0 으로 주저앉는 자리다**(COMPONENTS 21) — `.fp-board__thumb` 이 `--pair` 에서 **flex 직접 자식**이 되므로
     `flex:1 1 50%` + `min-width:0` 을 같이 준다. 기본 `aspect-ratio` 가 있어 `loading="lazy"` 사진이 오기 전에도 높이를 제가 갖는다(verify ⑧d).
   ⚠ **간격은 `padding` 이 아니라 액자 «밖»에서 준다** — 액자 안에 `.fp-ovl` 칩(BEFORE / AFTER)을 중첩할 수 있어야 하고,
     `.fp-ovl` 의 절대 배치 %는 **padding 상자** 기준이라 액자에 padding 이 붙으면 칩이 어긋난다(COMPONENTS 24).
   ⚠ **구운 칩이 사진 픽셀에 있다** — 원본 425x557 왼위 (0,0) 귀퉁이에 BEFORE 78x41 · AFTER 118x41, 바탕 `#B9916E` · 글자 `#FFFCF7`(대비 **2.80**)이고
     화면에서는 **1920 7.4px · 1440 6.1px · 390 3.8px** 로 안 읽힌다 → 그 위를 `.fp-ovl__tag` 로 덮는 것이 `relabel_overlay` 다.
     덮개 칩에는 `--fp-tag-r:0` 을 준다(원본 상자가 **직각**이다 — 41줄 전부 왼끝 x=0 · 결정 대기 ⑮ 와 같은 갈래).
     사진 띠는 캔버스 y163~394(41.6%)뿐이라 **`--crop` 으로 띠만 남기면 구운 칩도 같이 잘린다** — 자르지 말고 덮는다.
   · **`.fp-board__cat`**(분류 줄) — 두 게시판이 같이 쓴다. 원문 색이 `#888`(**3.55:1** = 작은 글자 AA 미달)이라 **기본값을 `--c-sub`(5.33:1)로 세웠다.**
     원문 색을 그대로 싣고 싶으면 `--fp-board-cat-c` 로 주고 그 근거를 `meta.decisions` 에 적는다(조사 권고는 「원문 색이면 `blanks`」다).
     ⚠ `before-and-after` 둘째 목록의 분류는 **한국어**다 — `lang="ko"` 는 `tools/board.py` 의 `lang_attr()` 이 단다(손으로 달면 도구 재실행에 사라진다).
   · **`.fp-board__cat--pill`** — `surgery-review` **얼어붙은 격자**의 영문 분류 배지(흰 글자 / 검정 / 반지름 20px / 안쪽 0 10px).
     ⚠ 원문은 그것을 **카드 왼위 귀퉁이에 절대 배치**(`top:-10px;left:-10px`)하는데 우리는 **글 흐름 안 알약**으로 둔다 —
     절대 배치를 쓰려면 카드에 `overflow:visible` 이 필요하고 그러면 `--fp-board-r`(모서리)로 액자를 깎을 수 없으며, 390 에서 알약이 기둥 밖으로 나간다.
     **고른 쪽과 까닭은 조판이 `decisions` 에 적는다.** */
.fp-board__cat{margin-top:var(--fp-board-cat-mt,calc(1.85*var(--u)));font-size:var(--fp-board-cat-fs-mo,var(--fp-board-cat-fs,max(12px,calc(12*var(--u)))));
line-height:1.5;color:var(--fp-board-cat-c,var(--c-sub));text-align:var(--fp-board-title-ta,center)}
.fp-board__cat--pill{display:inline-block;align-self:flex-start;padding:calc(1*var(--u)) calc(10*var(--u));
border-radius:calc(20*var(--u));background:var(--c-dark);color:#fff}
/* 28a — 카드 */
.fp-board--card{gap:calc(18.5*var(--u)) 1%}
.fp-board--card .fp-board__card{background:#fff;border:1px solid var(--fp-board-bc,#ebebeb);border-radius:var(--fp-board-r,0);
overflow:hidden;--fp-board-title-ta:left}
.fp-board--card .fp-board__thumb{border:0;border-bottom:1px solid var(--fp-board-bc,#ebebeb);border-radius:0}
.fp-board--card :is(.fp-board__title,.fp-board__meta,.fp-board__cat){padding-inline:calc(10*var(--u))}
.fp-board--card .fp-board__card>:last-child{margin-bottom:calc(10*var(--u))}
/* 28b — 전·후 두 컷 쌍.
   ⚠ **`flex` 가 아니라 `grid` 다** — 560행 가운데 **글 191 한 행은 `<img alt="After">` 한 장뿐**이다(조사 `blanks` ⑤).
   `flex:1 1 50%` 면 칸이 하나일 때 **100% 로 자라** 그 행만 사진이 두 배가 된다. `repeat(2,1fr)` 은 한 장이면 왼 칸에 서고 오른 칸이 빈다 —
   원문(`display:flex` + `width:50%`)과 **같은 자리**이고, 격자는 트랙 폭이 확정이라 액자가 0 으로 주저앉지도 않는다(COMPONENTS 21).
   ⚠ **전/후 라벨은 CSS 가 얹는다**(`ui_strings.txt` 의 `Before`/`After` · 3 `.fp-ba__media::before/::after` 와 **같은 어휘·같은 까닭**) —
   HTML 에 없으니 verify ④ 대조 대상이 아니고 `alt` 와도 겹치지 않는다. **왼/오른 자리가 아니라 `--b`/`--a` 로 가른다**(위 글 191 때문에 자리로 가르면 틀린다).
   ⚠⚠ **덮개는 원본 칩의 「<N>M」을 같이 가린다.** 원본 AFTER 칩은 「AFTER」 + 30px 공백 + 「<N>M」 두 덩이인데(`baked.txt`)
   전사가 있는 것은 **1쪽 9행뿐**이고 2~63쪽 551행(1,102컷)은 전사가 없다 — 우리가 그 숫자를 쓰면 문안 창작이고 ④ 불합격이다.
   그래서 라벨은 `Before`/`After` 까지만 되살린다. **그 결과 사라지는 「경과 개월」을 조판이 `meta.blanks` 에 적는다.**
   덮지 «않고» 원본 칩을 그대로 두는 길도 있다 — `--fp-board-tag-y` 를 아래로 옮기면 원본 칩(왼위)과 우리 라벨이 같이 보인다.
   지금 기본값은 조사 `decisions` ② 의 계획(= 덮는다)대로 왼위(0)이고, 덮개 크기는 `--fp-board-tag-minw`/`-minh` 로 준다
   (원본 칩 실측 425x557 기준 BEFORE **78x41** · AFTER **118x41** → 표시폭 186.5px 이면 34.2x18.0 / 51.8x18.0px 을 덮어야 한다).
   ⚠ **덮개 칩은 반투명 금지**(런북 「조판할 때 지킬 것」) — 기본 바탕이 불투명 먹(`--c-dark`)이다. 원본 바탕은 `#B9916E` 이고 글자 대비가 **2.80** 이었다. */
.fp-board--pair{gap:calc(25.8*var(--u)) 1%}
.fp-board--pair .fp-board__duo{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(3.7*var(--u));width:100%}
.fp-board--pair .fp-board__thumb{border:0;background:var(--fp-board-thumb-bg,var(--c-grey-bg))}
.fp-board--pair :is(.fp-board__thumb--b,.fp-board__thumb--a)::before{position:absolute;left:0;top:var(--fp-board-tag-y,0);z-index:2;
pointer-events:none;display:flex;align-items:center;box-sizing:border-box;
min-height:var(--fp-board-tag-minh,0);
padding:var(--fp-board-tag-p-mo,calc(2.8*var(--u)) calc(7.4*var(--u)));background:var(--c-dark);color:#fff;font-weight:700;
font-size:var(--fp-board-tag-fs-mo,max(12px,calc(11.1*var(--u))));line-height:1.3}
/* 최소 폭은 **전·후를 가른다** — 원본 칩은 BEFORE 18.35% ↔ AFTER 27.76% 로 폭이 다르다(425x557 기준 78x41 ↔ 118x41).
   루트 한 값(`--fp-board-tag-minw`)에 맞추면 큰 쪽에 맞춰야 해서 BEFORE 액자를 11.65%p 더 덮었다.
   기본값은 그 루트 값이라 **가르지 않은 자리는 한 픽셀도 안 바뀐다**(2026-09-28 9단계 ④ · before-and-after 2차 검토 ⑦ 요청 ⓐ). */
.fp-board--pair .fp-board__thumb--b::before{min-width:var(--fp-board-tag-minw-b,var(--fp-board-tag-minw,0))}
.fp-board--pair .fp-board__thumb--a::before{min-width:var(--fp-board-tag-minw-a,var(--fp-board-tag-minw,0))}
.fp-board--pair .fp-board__thumb--b::before{content:'Before'}
.fp-board--pair .fp-board__thumb--a::before{content:'After'}
@media (min-width:1280px){
.fp-board__cat{margin-top:var(--fp-board-cat-mt,calc(2.7*var(--u)));font-size:var(--fp-board-cat-fs,max(12px,calc(17.3*var(--u))))}
.fp-board__cat--pill{padding:calc(1.3*var(--u)) calc(13.3*var(--u));border-radius:calc(26.7*var(--u))}
.fp-board--card{gap:calc(26.7*var(--u)) 1%}
.fp-board--card :is(.fp-board__title,.fp-board__meta,.fp-board__cat){padding-inline:calc(13.3*var(--u))}
.fp-board--card .fp-board__card>:last-child{margin-bottom:calc(13.3*var(--u))}
.fp-board--pair{gap:calc(37.3*var(--u)) 1%}
.fp-board--pair .fp-board__duo{gap:calc(5.3*var(--u))}
.fp-board--pair :is(.fp-board__thumb--b,.fp-board__thumb--a)::before{padding:var(--fp-board-tag-p,calc(4*var(--u)) calc(10*var(--u)));font-size:var(--fp-board-tag-fs,max(12px,calc(14*var(--u))))}
}

/* ── 30 본문 링크 `.fp-link` (2026-09-27 `build:components` — 8단계 medical-treatment-information 의 원문 CTA 한 곳) ──
   `:where(.fp-page) a{text-decoration:none}` 이 전역이라 본문 속 링크가 **글자와 전혀 구분되지 않는다**(누를 자리인 줄 모른다).
   ⚠ **버튼도 화살표도 만들지 않았다** — 원문 CTA 는 먹 글자 + 원호 화살표 svg 인데 서브 시안에 버튼·CTA 어휘가 **아예 없고**
   그 자리는 **사용자 결정 대기 ⑥**(서브에 상담 경로가 없다)다. 밑줄 한 줄은 「브라우저 기본을 되살린 것」이라 시안을 새로 짓지 않는다.
   ⑥ 이 열리면 화살표·판은 그때 이 이름 위에 얹는다(9단계 폼 두 장이 같은 자리를 만난다). */
.fp-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:calc(4*var(--u))}
.fp-link:hover{text-decoration-color:var(--c-pink)}
/* ≤1279 **탭 타깃 44px**(COMPONENTS 1 · 2026-09-28 8단계 ④ medical-treatment-information) — 이 규칙은 「손가락으로 누르는 요소」
   전부에 걸리는 우리 계약인데 8단계 ② 가 새로 연 `.fp-link` 에만 없었다(실측 우리 h 20 안팎 ↔ **원문 CTA 는 h 44.0**).
   `.fp-ba__opt`·`.fp-footer__guide a` 와 **같은 꼴** — 「안쪽 여백 + 같은 크기 음수 바깥 여백」이라 글줄 자리는 그대로다.
   ⚠ `display:inline-block` 이라야 세로 padding 이 상자를 키운다(인라인이면 줄 상자를 안 밀지만 누를 자리도 안 넓어진다).
   그래서 줄 밖으로 넘치지 않게 `margin-block` 으로 같은 값을 되돌린다 — 글 흐름에서 앞뒤 줄 간격이 안 바뀐다. */
@media (max-width:1279px){
.fp-link{display:inline-block;padding-block:calc((44px - 1.3em)/2);margin-block:calc((1.3em - 44px)/2)}
}

/* ── 16a `.fp-faq--plain` — Q&A 어휘를 뺀 접이 섹션 (2026-09-27 `build:components` — 8단계 medical-staff-introduction 의 접힘 **아홉 개**) ──
   템플릿에서 `<details>` 를 쓰는 곳이 `.fp-faq` 뿐인데 그 꾸밈이 **검은 원 안 분홍 十 + 회색 답 칸** = 자주 묻는 질문 전용이라,
   「Academic Activities」·「Certificates and Plaques」 같은 제목형 접힘에 그대로 쓰면 학술활동이 Q&A 처럼 보인다.
   안 열면 접힘을 포기하고 전부 펴야 하고 그러면 1440 문서가 **8,616 → 25,767px**(3배)이 된다(원문은 닫힌 채 시작한다).
   바꾸는 것은 셋뿐이다 — ⓐ 표식이 **테만 있는 원 + 먹 十**(원문 ⊕) ⓑ 답 칸의 회색 판·안쪽 여백을 **끈다**(그 안에 격자가 들어온다) ⓒ 위아래 선을 옅게.
   **붙이지 않으면 한 픽셀도 안 바뀐다.** */
.fp-faq--plain{border-bottom-color:var(--c-line)}
.fp-faq--plain .fp-faq__item{border-top-color:var(--c-line)}
.fp-faq--plain .fp-faq__icon{background:transparent;border:1px solid var(--c-dark)}
.fp-faq--plain .fp-faq__icon::before,.fp-faq--plain .fp-faq__icon::after{background:var(--c-dark)}
.fp-faq--plain .fp-faq__a>div{background:none;padding:var(--fp-faq-ap,calc(20*var(--u)) 0)}
@media (min-width:1280px){.fp-faq--plain .fp-faq__a>div{padding:var(--fp-faq-ap,calc(30*var(--u)) 0)}}
.fp-sec--grey .fp-faq--plain .fp-faq__a>div{background:none}

/* ── 18b `.fp-cap2` — 캡션 **둘째 줄** 손잡이 (2026-09-27 `build:components` — 8단계 medical-staff-introduction 학술 캡션 15장) ──
   원문 캡션은 두 줄인데 **위계가 뒤집혀 있다**: 학술지·연도 줄이 20px/400/#101010 이고 논문 제목이 `<strong>` 인데 **16px/300/올리브 #89916d** 로 더 가볍다.
   `--fp-cap-fs`·`--fp-cap-bg` 로는 한 캡션 안에서 두 줄을 가를 수 없었다. **기본값이 전부 `inherit` = 지금 값**이라 안 주면 한 픽셀도 안 바뀐다.
   ⚠ `<strong>` 이 아니라 `<span class="fp-cap2">` 로 쓴다 — `<strong>` 은 분홍 형광이 걸리고(0-4) 캡션에 넣지 않는 것이 규칙이다. */
.fp-figure figcaption .fp-cap2,.fp-gallery figcaption .fp-cap2{display:block;margin-top:var(--fp-cap2-mt,calc(4*var(--u)));
font-size:var(--fp-cap2-fs,inherit);font-weight:var(--fp-cap2-fw,inherit);color:var(--fp-cap2-c,inherit)}

/* ── 22d `.fp-venn--tri` — **삼각 배치** 색 원 셋 + 뒤에 불투명 큰 원 하나 (2026-09-27 `build:components` — 8단계 why-1mm sec2 `about_img.png`) ──
   base `.fp-venn` 은 「PC 가로 한 줄 + `--fp-lap` 겹침 / ≤1279 세로 쌓기」라 이 배치를 **낼 수 없다**. 원문은 PC·모바일이
   **같은 삼각 배치를 그대로 축소**한다(1440 622x564 ↔ 390 343x311) — **쌓지 않는 것이 계약이다.**
   원본 실측(2048x1857 · 최소제곱 원피팅 최대잔차 1.2~4.7px): 가운데 흰 원 중심 49.67/56.33 · 지름 **66.41%**,
   색 원 셋 중심 **49.50/23.22 · 20.83/76.97 · 78.91/76.95** · 지름 41.25~41.38% · 색 `#edfacc`(위) `#e7ecfb`(왼아래) `#fdffd1`(오른아래) ·
   **중심 거리 1157.9~1189.4 ↔ 지름 846 = 서로 겹치지 않는다**(회색 바탕에서 보이던 진한 쐐기는 「흰 원 안↔밖」의 차이였다).
   라벨 글자색 #111111 · 대문자높이 ÷ 색 원 지름 = **8.19%**(1440 21.0px · 390 11.6px = 글자 크기 30.4 / 16.7px).
   ⚠ **`mix-blend-mode` 를 끈다** — 원문 원은 불투명하고 서로 안 겹친다(base 의 multiply 를 그대로 두면 크림색 바탕이 원 안으로 배어 원본보다 어두워진다).
   ⚠ **글자 크기는 두 보드에 이름이 따로다**(`--fp-tri-fs` ≥1280 · `--fp-tri-fs-mo` ≤1279) — PC 액자는 `--w` 가, 모바일 액자는 **기둥 폭**이 정해
   한 이름이면 390 에서 2.19배로 갈린다(COMPONENTS 21 의 잣대 규칙 · `--fp-venn-fs`/`-mo` 와 같은 꼴).
   ⚠ **액자를 container 로 만들지 않았다** — `--u` 가 `100cqw` 로 선언돼 있어 안쪽에 새 container 를 두면 그 안의 `calc(N*var(--u))` 가
   **액자 폭 기준으로 다시 풀린다**(커스텀 속성은 쓰는 자리에서 치환된다). 그래서 액자 안 글자도 보드 px 으로 적는다.
   ⚠ 가운데 흰 원은 `<li class="fp-venn__core" aria-hidden="true">`(글자 없음) — `<ul>` 의 자식은 `<li>` 여야 한다.
   그래서 `.fp-venn__c:nth-of-type(even)` 의 층(22u)이 **첫 색 원**에 걸린다(색은 칸마다 `--fp-c` 를 주므로 그대로다). */
/* ⚠ **`--fp-figw-max` 가 여기까지 닿아야 한다**(2026-09-28 8단계 ④ why-1mm) — `--tri` 는 제 `max-width` 를 base `.fp-venn` 의
   PC 규칙 **뒤에** 선언해 같은 특이도(0,1,0)에서 이긴다. 그래서 8단계 ② 가 `.fp-venn` 에 연 원본 픽셀 천장이 `--tri` 에는 안 닿았고,
   원문 도해가 배율을 안 타는 **622px 상수**(1440·1920 실측 둘 다 622x564)라 손잡이 없이는 1920 +33.3% · 2560 +73.3% 로 자란다
   (7단계 filler-botox 804px 과 같은 함정). 기본값 100% 는 블록 상자에 이미 걸린 값이라 **no-op** 이다.
   ⚠ 액자를 px 으로 묶으면 **라벨도 같이 묶어야 한다** — `--fp-tri-fs` 에도 px 천장을 준다(COMPONENTS 22d). */
.fp-venn--tri{display:block;position:relative;width:100%;
max-width:min(calc(var(--w,829)*var(--u)),var(--fp-figw-max,100%));
aspect-ratio:var(--fp-tri-ar,622/564);padding:0}
.fp-venn--tri>.fp-venn__c{position:absolute;left:var(--fp-x,50%);top:var(--fp-y,50%);width:var(--fp-tri-d,41.3%);max-width:none;
aspect-ratio:1;margin:0;padding:0;mix-blend-mode:normal;font-size:var(--fp-tri-fs-mo,max(12px,calc(15.4*var(--u))));
transform:translate(-50%,-50%) translateZ(var(--fp-z))}
.fp-venn--tri>.fp-venn__core{position:absolute;left:var(--fp-core-x,49.67%);top:var(--fp-core-y,56.33%);width:var(--fp-tri-core,66.4%);
aspect-ratio:1;margin:0;padding:0;list-style:none;border-radius:50%;background:var(--fp-core-c,#fff);
transform:translate(-50%,-50%);z-index:0}
@media (min-width:1280px){
.fp-venn--tri>.fp-venn__c{font-size:var(--fp-tri-fs,max(12px,calc(40.5*var(--u))))}
.fp-venn--tri>.fp-venn__c+.fp-venn__c{margin-left:0}
}


/* ── 31 상담·예약 폼 `.fp-form` (2026-09-28 `build:components` — 9단계 `reservation/{online-reservation,model-support}`) ──
   **COMPONENTS 1~30 에 폼이 없었다** — 지난 28장이 한 번도 안 만났고 `fp.css` 에 `input`·`select`·`textarea`·`button[type=submit]`
   규칙이 **0개**였다(30 `.fp-link` 이 「버튼·화살표는 안 만들었다 — 결정 대기 ⑥」으로 비워 둔 자리의 이웃이다).
   그대로 조판하면 **모양 없는 네이티브 컨트롤**이 된다.

   ⚠ **폼 «계약» 은 마크업이 아니라 이름이다.** `online-reservation` 은 `#gfx-form` 의 `name`·`id`·`action`·`enctype`·숨은 칸(`ts`·`website`)·
   동의 체크·사진 첨부·동작이 고정이다(런북 9단계 규칙). 그래서 이 컴포넌트는 **구조를 강제하지 않는다** — 꾸밈은 `.fp-form__*`,
   동작 훅은 원문 그대로 `gfx-*` 를 **같이** 붙인다(`class="fp-form__field gfx-f"`). `model-support` 는 훅이 없는 쪽이라 `.fp-form__*` 만 쓴다.
   오류 상태만 예외로 **원문 훅 `.err` 를 그대로 쓴다**(fp.js 의 폼 모듈이 그 이름으로 켠다 · `.is-err` 를 새로 만들면 원문 JS 와 두 벌이 된다).

   **원문 실측(1440 / 390 · `_assets/globalform/gform-global.css` 원본 값 + 조사 `measured.json`)을 보드 px 으로 환산했다** —
   디자인 계약대로 1440 에서 원문과 같아진다(PC = 값÷0.75 · ≤1279 = 값÷1.0833).
     통 `max-width:960px`(1440 렌더 839.7) → `--w` 기본 **1120**(1440 에서 840px) · 머리글 30/15px · 묶음 legend **13px/700 대문자 자간 .08em + 아래 2px 먹 선** ·
     칸 라벨 14px/600 · 도움말 12px · 입력 **높이 50px**(안쪽 12/14 · 테 1px `#cdcdcd` · 글자 15px) · 셀렉트 48 · 날짜 52 ·
     칩 40.2px/14px · 동의 칸 58.6px(바탕 `#f7f7f5`) · 첨부 칸 150px 점선 · 제출 48.2px · 오류 배너 14px `#d63b3b` on `#fdeeee`.

   **원문에서 «바꾼» 넷 — 전부 우리 계약이 이미 정해 둔 것이고 조판이 `decisions` 에 적는다.**
   ⓐ **모서리** — 서브 시안은 **모서리 0** 이 계약(COMPONENTS 1)인데 원문 폼은 전부 4px 다 → 기본 **0** · 되살리려면 `--fp-form-r`.
   ⓑ **작은 글자 바닥값 12px** — 원문 `optional` 11px · 예시 캡션 11.5px · 첨부 파일명 11px 은 우리 바닥값 아래다 → **12px 로 올린다**(COMPONENTS 1).
   ⓒ **옅은 회색 `#8b8b8b`(흰 바탕 3.41:1)** 은 우리 바닥 3.0 은 넘지만 **AA 4.5 미달**이라 `--c-sub`(**5.33:1**)로 올렸다.
      먹 `#242424`→`--c-dark` · 보조 `#565656`→`--c-sub` · 바탕 `#f7f7f5`→`--c-grey-bg` · 테 `#e0e0e0`→`--c-line` · 컨트롤 테 `#cdcdcd`→`--c-div`.
   ⓓ **옛 테마 연두 `#c1e151`** (포커스 링·「좋은 예」 표시)은 새 팔레트에 없다 → **분홍 `--c-pink`**(먹 글자와 **7.6:1**). 조사 9절 ⓒ 의 답이다.

   ⚠ **모바일 함정 둘을 여기서 닫는다**(COMPONENTS 1) — ① 입력 글자가 ≤1279 에서 **16px 아래로 안 내려간다**(iOS 가 포커스 때 화면을 확대한다.
   `max(16px,…)` 이고 셀렉트도 같다 — 「select 제외」는 옛 메모다) ② **탭 타깃 44px** — 칩은 원문 40.2px 이라 ≤1279 에서 `min-height:44px` 로 올린다.
   ⚠ **원문이 390 에서 이미 고장 나 있는 자리를 따라 만들지 않는다**(조사 5절) — 촬영 예시 여섯은 원문에서 칸 101.4px 인데 사진이 **152px 고정**이라
   서로 겹치고 셋째가 27.3px 잘린다. 우리는 **한 줄 3칸 격자**(`1fr`)라 어느 폭에서도 기둥 «안»에 들어간다.
   ⚠ **`fieldset` 의 UA 기본값 `min-width:min-content`** 가 그 넘침의 진짜 원인이다 → `.fp-form__sec{min-width:0}` 을 못박는다.
   ⚠ **원문 브레이크포인트는 900·640** 인데 우리 보드 계약은 **1279/1280** 이다 — 641~1279 에서 원문은 2~3열, 우리는 **1열**(기둥 576px)이다.
   8단계 `notice`(원문 600 ↔ 우리 1279)와 같은 갈래이고 **결정 대기 ㉓ 의 이웃**이다. 조판이 `decisions` 에 적는다.
   ⚠ **포커스 링**(`--fp-focus-c`) — 전역 `.fp-page :focus-visible` 은 분홍 `--c-pink` 인데 흰 바탕에서 **1.58:1**(WCAG 1.4.11 미달 · 8단계 `blog` 가 올린 `template_requests` ⑥).
   폼 두 장은 본문이 **거의 전부 조작 요소**라 그 자리가 가장 크다 → 이름을 열되 **전역 기본값은 그대로 분홍**이고(배포본 47장 한 픽셀도 안 바뀐다)
   `.fp-form` 이 제 안에서만 `--c-dark`(**9.92:1**)로 덮는다. 전역까지 바꾸는 것은 `fix:leftovers` 회차의 일이다.
   ⚠ **이름은 `--fp-span` 이다(`--fp-fw` 가 아니다)** — 조사가 제안한 `--fp-fw` 는 `.fp-ovl` 이 이미 **액자 «폭»(길이)** 으로 쓰고 있다(fp.css 1158·1543줄).
   같은 이름을 칸 수로 쓰면 폼 안에 `.fp-ovl` 이 들어오는 순간 서로 덮는다. */
.fp-form{--fp-focus-c:var(--c-dark);display:block;width:100%;max-width:calc(var(--w,1120)*var(--u));margin-inline:auto;
color:var(--c-dark);text-align:left}
.fp-form__head{margin-bottom:calc(31.4*var(--u))}
.fp-form__title{font-size:max(12px,calc(22.2*var(--u)));line-height:1.3;font-weight:700;margin-bottom:calc(9.2*var(--u))}
.fp-form__lead{font-size:max(12px,calc(13.9*var(--u)));line-height:1.7;color:var(--c-sub)}
/* 묶음 — `min-width:0` 은 UA 의 `fieldset{min-width:min-content}` 를 끈다(위 ⚠). 테·여백은 0 이고 legend 만 남는다. */
.fp-form__sec{min-width:0;margin:0 0 calc(25.8*var(--u));padding:0;border:0}
.fp-form__legend{display:block;width:100%;font-size:max(12px,calc(12*var(--u)));font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--c-dark);padding:0 0 calc(9.2*var(--u));margin:0 0 calc(20.3*var(--u));
border-bottom:2px solid var(--c-dark)}
.fp-form__opt{float:right;font-size:max(12px,calc(10.2*var(--u)));font-weight:400;letter-spacing:0;text-transform:none;color:var(--c-sub)}
/* 칸 격자 — ≤1279 는 **한 열**이다(원문 ≤640 과 같은 모양이고 641~1279 에서만 갈린다 · 위 ⚠). */
.fp-form__row{display:grid;grid-template-columns:1fr;gap:calc(18.5*var(--u))}
.fp-form__field{display:flex;flex-direction:column;min-width:0}
.fp-form__label{display:block;font-size:max(12px,calc(12.9*var(--u)));font-weight:600;color:var(--c-dark);
margin-bottom:calc(7.4*var(--u));line-height:1.4}
.fp-form__req{color:#d63b3b;margin-inline-start:.22em;font-weight:700}
.fp-form__hint{display:block;font-size:max(12px,calc(11.1*var(--u)));font-weight:400;color:var(--c-sub);
margin-top:calc(3.7*var(--u));line-height:1.5}
.fp-form__note{font-size:max(12px,calc(11.5*var(--u)));color:var(--c-sub);line-height:1.6;margin-top:calc(5.5*var(--u))}
/* 컨트롤 — `appearance:none` 이라 셀렉트 화살표는 우리가 그린다(원문은 data URI 였다 · 계약 ⑦ 로 main 안에 못 넣는다).
   ⚠ 상자 높이는 **박아 두었다**(`box-sizing:border-box` 라 안쪽 여백·테를 머금는다 — 1440 50px · 390 50px). 날짜·셀렉트가 원문에서
   52/48 로 갈리는 것은 브라우저 기본 컨트롤 높이 차이라 우리는 **한 값으로 맞춘다**(조판이 `decisions` 에). */
.fp-form__ctl{display:block;width:100%;min-width:0;height:calc(46.2*var(--u));
padding:0 calc(12.9*var(--u));font:inherit;font-size:max(16px,calc(13.8*var(--u)));line-height:1.4;color:var(--c-dark);
background:#fff;border:1px solid var(--c-div);border-radius:var(--fp-form-r,0);
-webkit-appearance:none;appearance:none;transition:border-color .15s}
textarea.fp-form__ctl{height:auto;min-height:calc(110.8*var(--u));padding:calc(11.1*var(--u)) calc(12.9*var(--u));
line-height:1.6;resize:vertical}
select.fp-form__ctl{padding-right:calc(33.2*var(--u));background-image:linear-gradient(45deg,transparent 50%,var(--c-sub) 50%),
linear-gradient(135deg,var(--c-sub) 50%,transparent 50%);background-size:6px 6px,6px 6px;background-repeat:no-repeat;
background-position:right calc(var(--fp-sel-x,calc(11.5*var(--u))) + 6px) center,right var(--fp-sel-x,calc(11.5*var(--u))) center}
.fp-form__ctl:focus{border-color:var(--c-dark)}
.fp-form__ctl::placeholder{color:var(--fp-ph-c,var(--c-sub))}
/* 칩 — 체크·라디오를 테 있는 알약으로. 고른 것은 **먹 테 두 겹 + 분홍 바탕**(원문 연두 `#fbfdf3` 자리 · 위 ⓓ). */
.fp-form__opts{display:flex;flex-wrap:wrap;gap:calc(9.2*var(--u)) calc(7.4*var(--u))}
.fp-form__opts--col{flex-direction:column}
.fp-form__chip{display:inline-flex;align-items:center;gap:calc(7.4*var(--u));min-height:44px;cursor:pointer;
padding:calc(9.2*var(--u)) calc(12.9*var(--u));border:1px solid var(--c-div);border-radius:var(--fp-form-r,0);
font-size:max(12px,calc(12.9*var(--u)));line-height:1.3;background:#fff;user-select:none;transition:border-color .15s,background .15s}
.fp-form__chip input{margin:0;width:16px;height:16px;accent-color:var(--c-dark);flex:none}
.fp-form__chip:has(input:checked){border-color:var(--c-dark);background:var(--c-pink-bg);box-shadow:inset 0 0 0 1px var(--c-dark)}
/* 동의 줄 — `--main` 은 강조판(바탕 + 테), 보통 줄은 세로로 쌓는다. */
.fp-form__check{display:flex;align-items:flex-start;gap:calc(9.2*var(--u));min-height:44px;cursor:pointer;
font-size:max(12px,calc(12.9*var(--u)));line-height:1.6;color:var(--c-sub)}
.fp-form__check input{margin:calc(2*var(--u)) 0 0;width:17px;height:17px;accent-color:var(--c-dark);flex:none}
.fp-form__check--main{align-items:center;padding:calc(14.8*var(--u)) calc(16.6*var(--u));background:var(--c-grey-bg);
border:1px solid var(--c-line);border-radius:var(--fp-form-r,0);color:var(--c-dark);font-weight:500}
.fp-form__checks{display:flex;flex-direction:column;gap:calc(11.1*var(--u))}
/* 안내 상자 + 촬영 예시 — 예시는 **한 줄 3칸 격자**다(원문은 고정 152px 이라 390 에서 겹쳐 잘린다 · 위 ⚠). */
.fp-form__guide{background:var(--c-grey-bg);border:1px solid var(--c-line);border-radius:var(--fp-form-r,0);
padding:calc(14.8*var(--u)) calc(16.6*var(--u));margin-bottom:calc(20.3*var(--u))}
.fp-form__guide ul{margin:0;padding-inline-start:calc(16.6*var(--u));list-style:disc}
.fp-form__guide li{display:list-item;font-size:max(12px,calc(12*var(--u)));line-height:1.8;color:var(--c-sub)}
.fp-form__eg{display:flex;flex-direction:column;gap:calc(22.2*var(--u));margin-bottom:calc(18.5*var(--u))}
.fp-form__eg-col{width:100%;min-width:0}
.fp-form__eg-h{display:flex;align-items:center;gap:calc(6.5*var(--u));margin:0 0 calc(9.2*var(--u));
font-size:max(12px,calc(12*var(--u)));font-weight:700;line-height:1.3;color:var(--c-dark)}
.fp-form__eg-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(17.5*var(--u));height:calc(17.5*var(--u));
min-width:14px;min-height:14px;border-radius:50%;font-size:max(10px,calc(10.2*var(--u)));font-weight:700;line-height:1;flex:none;
background:var(--c-pink);color:var(--c-dark)}
.fp-form__eg-col--ng .fp-form__eg-h{color:#d63b3b}
.fp-form__eg-col--ng .fp-form__eg-mark{background:#d63b3b;color:#fff}
.fp-form__eg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(9.2*var(--u))}
.fp-form__eg-i{margin:0;min-width:0;text-align:center}
.fp-form__eg-i img{width:100%;max-width:calc(140*var(--u));height:auto;aspect-ratio:1;object-fit:cover;
margin:0 auto;border-radius:50%;background:var(--c-grey-bg)}
.fp-form__eg-i figcaption{font-size:max(12px,calc(10.2*var(--u)));line-height:1.35;color:var(--c-sub);
margin-top:calc(5.5*var(--u));word-break:keep-all}
/* 사진 첨부 칸 — 파일 입력은 액자 위에 `opacity:0` 으로 덮는다(verify ⑧ 의 `isContent` 밖이라 「렌더 안 됨」으로 안 걸린다 — 조사가 시험으로 확인했다). */
.fp-form__files{display:grid;grid-template-columns:1fr;gap:calc(14.8*var(--u))}
.fp-form__drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(7.4*var(--u));
position:relative;overflow:hidden;height:calc(138.5*var(--u));padding:calc(9.2*var(--u));
border:1px dashed var(--c-div);border-radius:var(--fp-form-r,0);background:#fff;cursor:pointer;text-align:center;
transition:border-color .15s,background .15s}
.fp-form__drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.fp-form__ico{font-size:max(12px,calc(20.3*var(--u)));line-height:1;color:var(--c-sub)}
.fp-form__fname{font-size:max(12px,calc(11.1*var(--u)));line-height:1.4;color:var(--c-sub);padding:0 calc(5.5*var(--u));word-break:break-all}
.fp-form__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fp-form__drop.has .fp-form__ico{display:none}
.fp-form__drop.has .fp-form__fname{position:absolute;left:0;right:0;bottom:0;z-index:1;
background:rgba(58,58,58,.82);color:#fff;padding:calc(5.5*var(--u)) calc(7.4*var(--u))}
/* 제출 — 원문 높이 48.2px(1440 실측) · 흰 글자 14px/600. 시안에 버튼 어휘가 없어(30 `.fp-link` 의 ⚠ · 결정 대기 ⑥)
   **먹 판 + 흰 글자**라는 시안의 다른 어휘(`.fp-badge`·`.fp-eyebrow--pill`)를 그대로 옮겼다. */
.fp-form__submit{display:block;width:100%;height:calc(44.5*var(--u));min-height:44px;
margin-top:calc(5.5*var(--u));padding:0 calc(18.5*var(--u));background:var(--c-dark);color:#fff;border:0;
border-radius:var(--fp-form-r,0);font-size:max(12px,calc(12.9*var(--u)));font-weight:600;letter-spacing:.02em;cursor:pointer;
transition:background .15s}
.fp-form__submit:hover{background:#000}
.fp-form__submit[disabled]{opacity:.6;cursor:default}
/* 오류 — 켜는 이름은 **원문 훅 그대로**다(`.err` · `.gfx-formerr.on`). fp.js 의 폼 모듈이 그 이름을 켠다. */
.fp-form__field.err :is(.fp-form__ctl,.fp-form__chip,.fp-form__check--main),
.fp-form__file.err .fp-form__drop{border-color:#d63b3b}
.fp-form__msg{display:none;font-size:max(12px,calc(11.5*var(--u)));color:#d63b3b;
margin-top:calc(5.5*var(--u));line-height:1.5}
.fp-form__field.err .fp-form__msg,.fp-form__file.err .fp-form__msg{display:block}
.fp-form__banner{display:none;margin:0 0 calc(18.5*var(--u));padding:calc(12*var(--u)) calc(14.8*var(--u));
border-radius:var(--fp-form-r,0);background:#fdeeee;border:1px solid #f0c2c2;color:#d63b3b;
font-size:max(12px,calc(12.9*var(--u)))}
.fp-form__banner.on{display:block}
.fp-form__sent{margin:calc(7.4*var(--u)) 0 0;padding:calc(24*var(--u)) calc(20.3*var(--u));border-radius:var(--fp-form-r,0);
background:#f2f8f0;border:1px solid #cfe3c6;text-align:center}
.fp-form__sent strong{display:block;margin-bottom:calc(7.4*var(--u));font-size:max(12px,calc(17.5*var(--u)));
line-height:1.4;color:#2f6b33;background:none}
.fp-form__sent span{display:block;font-size:max(12px,calc(12.9*var(--u)));line-height:1.7;color:#4a6b4d}
.fp-form__senderr{margin-top:calc(12.9*var(--u));padding:calc(12*var(--u)) calc(14.8*var(--u));border-radius:var(--fp-form-r,0);
background:#fdeeee;border:1px solid #f0c2c2;color:#d63b3b;
font-size:max(12px,calc(12.9*var(--u)));line-height:1.6;text-align:center}
/* 보내고 나면 결과 칸만 남긴다 — 남겨 두면 같은 내용을 다시 보내게 된다(원문 `.gfx-form.sent` 와 같은 뜻). */
.fp-form.sent>*:not(.fp-form__sent){display:none}
/* `hidden` 속성이 **칸에서도 듣게** 한다 — UA 의 `[hidden]{display:none}` 은 작성자 규칙에 무조건 지므로
   `.fp-form__field{display:flex}`(위)가 이겨 **조건부 칸 셋이 늘 보이고 있었다**(2026-09-28 9단계 `online-reservation` 실측).
   조판은 안쪽 맨 `<div>` 로 내려 피했는데 그러면 **빈 칸이 격자에 남아** 간격이 두 배가 되고,
   `fp.js` 의 `validate()` 가 「안 보이는 조건부 칸은 필수가 아니다」로 쓰는 `field(el).hidden` 이 **영영 거짓**이 된다.
   ⚠ 전역 `[hidden]` 한 줄로 열지 않는다 — `.fp-form__banner.on` 처럼 **JS 가 클래스로 켜는 칸**을 특이도로 덮을 수 있다. */
.fp-form__sec[hidden],.fp-form__row[hidden],.fp-form__field[hidden],.fp-form__files[hidden],.fp-form__opts[hidden],
.fp-form__checks[hidden],.fp-form__guide[hidden]{display:none}
/* 첨부 칸 **다음 칸의 위 간격** — 원문은 「민감정보 동의」 칸에 인라인 `margin-top:20px` 을 준다(2026-09-28 9단계 ④ ·
   `online-reservation` 이 `template_requests` ② 로 올렸다). 우리 계약은 인라인을 `--fp-*` 변수만 받고 `.fp-form__files`·
   `.fp-form__field` 는 바깥 여백이 0 이라 **첨부 칸 아랫변 ↔ 동의 칸 윗변이 0.0px** 이었다(사진을 붙여야 뜨는 자리라
   QA 캡처에도 안 잡힌다). **기본값 0 = 옛 값**이라 값을 주지 않은 자리는 한 픽셀도 안 바뀐다. */
.fp-form__files + .fp-form__field{margin-top:var(--fp-form-mt,0)}
/* 첨부 칸의 **보이는 포커스 표시** — 파일 입력은 `opacity:0` 이라 그 위의 아웃라인도 같이 묻힌다(WCAG 2.4.7).
   `.fp-form` 이 `--fp-focus-c` 를 먹(9.92:1)으로 덮으므로 여기서는 그 이름을 그대로 쓴다. */
.fp-form__drop:has(input[type=file]:focus-visible){outline:2px solid var(--fp-focus-c,var(--c-pink));outline-offset:2px}
/* 허니팟 — `display:none` 은 일부 봇이 걸러 내므로 **화면 밖으로 민다**(원문 `.gfx-hp` 그대로).
   ⚠ `.fp-sr` 와 달리 `clip-path` 를 안 쓴다 — verify ⑧ 의 `hiddenOnPurpose` 는 `aria-hidden="true"` 로 면제된다. */
.fp-form__hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media (min-width:1280px){
.fp-form__head{margin-bottom:calc(45.3*var(--u))}
.fp-form__title{font-size:max(12px,calc(40*var(--u)));margin-bottom:calc(13.3*var(--u))}
.fp-form__lead{font-size:max(12px,calc(20*var(--u)))}
.fp-form__sec{margin-bottom:calc(45.3*var(--u))}
.fp-form__legend{font-size:max(12px,calc(17.3*var(--u)));padding-bottom:calc(13.3*var(--u));margin-bottom:calc(29.3*var(--u))}
.fp-form__opt{font-size:max(12px,calc(14.7*var(--u)))}
.fp-form__row{grid-template-columns:repeat(12,1fr);gap:calc(26.7*var(--u))}
.fp-form__field{grid-column:span var(--fp-span,12)}
.fp-form__label{font-size:max(12px,calc(18.7*var(--u)));margin-bottom:calc(10.7*var(--u))}
.fp-form__hint{font-size:max(12px,calc(16*var(--u)));margin-top:calc(5.3*var(--u))}
.fp-form__note{font-size:max(12px,calc(16.7*var(--u)));margin-top:calc(8*var(--u))}
.fp-form__ctl{height:calc(66.7*var(--u));padding:0 calc(18.7*var(--u));font-size:max(14px,calc(20*var(--u)))}
textarea.fp-form__ctl{height:auto;min-height:calc(160*var(--u));padding:calc(16*var(--u)) calc(18.7*var(--u))}
select.fp-form__ctl{padding-right:calc(48*var(--u));
background-position:right calc(var(--fp-sel-x,calc(16.7*var(--u))) + 6px) center,right var(--fp-sel-x,calc(16.7*var(--u))) center}
.fp-form__opts{gap:calc(13.3*var(--u)) calc(10.7*var(--u))}
.fp-form__chip{min-height:0;gap:calc(10.7*var(--u));padding:calc(13.3*var(--u)) calc(18.7*var(--u));font-size:max(12px,calc(18.7*var(--u)))}
.fp-form__check{min-height:0;gap:calc(13.3*var(--u));font-size:max(12px,calc(18.7*var(--u)))}
.fp-form__check--main{padding:calc(21.3*var(--u)) calc(24*var(--u))}
.fp-form__checks{gap:calc(16*var(--u))}
.fp-form__guide{padding:calc(21.3*var(--u)) calc(24*var(--u));margin-bottom:calc(29.3*var(--u))}
.fp-form__guide ul{padding-inline-start:calc(24*var(--u))}
.fp-form__guide li{font-size:max(12px,calc(17.3*var(--u)))}
.fp-form__eg{gap:calc(32*var(--u));margin-bottom:calc(26.7*var(--u))}
.fp-form__eg-h{gap:calc(9.3*var(--u));margin-bottom:calc(13.3*var(--u));font-size:max(12px,calc(17.3*var(--u)))}
.fp-form__eg-mark{width:calc(25.3*var(--u));height:calc(25.3*var(--u));font-size:max(10px,calc(14.7*var(--u)))}
.fp-form__eg-row{gap:calc(21.3*var(--u))}
.fp-form__eg-i img{max-width:calc(202.7*var(--u))}
.fp-form__eg-i figcaption{font-size:max(12px,calc(15.3*var(--u)));margin-top:calc(8*var(--u))}
.fp-form__files{grid-template-columns:repeat(3,1fr);gap:calc(21.3*var(--u))}
.fp-form__drop{height:calc(200*var(--u));padding:calc(13.3*var(--u));gap:calc(10.7*var(--u))}
.fp-form__ico{font-size:max(12px,calc(29.3*var(--u)))}
.fp-form__fname{font-size:max(12px,calc(16*var(--u)));padding:0 calc(8*var(--u))}
.fp-form__drop.has .fp-form__fname{padding:calc(8*var(--u)) calc(10.7*var(--u))}
.fp-form__submit{height:calc(64.3*var(--u));margin-top:calc(8*var(--u));padding:0 calc(26.7*var(--u));
font-size:max(12px,calc(18.7*var(--u)))}
.fp-form__msg{font-size:max(12px,calc(16.7*var(--u)));margin-top:calc(8*var(--u))}
.fp-form__banner{margin-bottom:calc(26.7*var(--u));padding:calc(17.3*var(--u)) calc(21.3*var(--u));font-size:max(12px,calc(18.7*var(--u)))}
.fp-form__sent{padding:calc(34.7*var(--u)) calc(29.3*var(--u))}
.fp-form__sent strong{font-size:max(12px,calc(25.3*var(--u)));margin-bottom:calc(10.7*var(--u))}
.fp-form__sent span{font-size:max(12px,calc(18.7*var(--u)))}
.fp-form__senderr{margin-top:calc(18.7*var(--u));padding:calc(17.3*var(--u)) calc(21.3*var(--u));font-size:max(12px,calc(18.7*var(--u)))}
}
@media (hover:hover){
.fp-form__chip:hover{border-color:var(--fp-form-hov-bc,var(--c-dark))}
.fp-form__drop:hover{border-color:var(--fp-form-hov-bc,var(--c-dark));background:var(--fp-form-hov-bg,var(--c-pink-bg))}
}
/* 포커스 링 손잡이 — **기본값이 지금 값**(`--c-pink`)이라 붙이지 않은 47장은 한 픽셀도 안 바뀐다. 위 ⚠ 참고. */
.fp-page :focus-visible{outline-color:var(--fp-focus-c,var(--c-pink))}
/* ── 32 About Us 재구성 `.fp-au-*` · 게시판 모양 넷 `.fp-board--mosaic/--list/--editorial/--chips` (2026-09-29) ──
   사용자 「원문 100% · 배치는 다르게 · 전체 vibe 와 어울리게 · 창의적으로」 → 시안 승인 뒤 옮겼다. 계약·쓰는 장은 COMPONENTS 9절.
   **붙이지 않은 장은 한 픽셀도 안 바뀐다** — 새 이름·새 수식자·새 속성값(`data-tone="mist"`)뿐이다. */
.fp-au-ruler-x{height:calc(18*var(--u));background:repeating-linear-gradient(90deg,var(--c-div) 0 1px,transparent 1px calc(12*var(--u))) left bottom/100% calc(8*var(--u)) no-repeat,linear-gradient(var(--c-div),var(--c-div)) left bottom/100% 1px no-repeat}
.fp-au-kicker{margin:0;font-size:max(12px,calc(14*var(--u)));font-weight:700;letter-spacing:.2em;color:#c4568e}
.fp-au-card{background:#fff;border-radius:calc(14*var(--u));box-shadow:0 calc(10*var(--u)) calc(30*var(--u)) rgba(58,58,58,.07)}
.fp-au-dot{display:inline-grid;place-items:center;width:calc(30*var(--u));height:calc(30*var(--u));border-radius:50%;background:var(--c-pink);font-size:max(12px,calc(12*var(--u)));font-weight:700;color:var(--c-dark)}
@media (min-width:1280px){
.fp-au-ruler-x{height:calc(30*var(--u));background-size:100% calc(14*var(--u)),100% 1px;background-image:repeating-linear-gradient(90deg,var(--c-div) 0 1px,transparent 1px calc(16*var(--u))),linear-gradient(var(--c-div),var(--c-div))}
.fp-au-kicker{font-size:calc(22*var(--u))}
.fp-au-card{border-radius:calc(22*var(--u))}
.fp-au-dot{width:calc(56*var(--u));height:calc(56*var(--u));font-size:calc(20*var(--u))}
}

/* ── About Us · Why 1mm? (2026-09-29 재구성) ── */
[data-palette="rose"][data-tone="mist"]{--hp-p1:#f3d6e2;--hp-p2:#e4e4e9}   /* 사용자 09-29 「베이지보다 그레이와 분홍」 */
/* ── 시안: 선언(세 가치) · 1mm 띠 · 눈금자 타임라인 ── */
.fp-au-mani{background:#fff}
.fp-au-mani__in{display:grid;gap:calc(40*var(--u))}
.fp-au-mani__why{margin:0;font-size:calc(22*var(--u));font-weight:700;letter-spacing:.2em;color:var(--c-pink)}
.fp-au-mani__h{margin:calc(6*var(--u)) 0 0;font-size:calc(40*var(--u));line-height:1.1;letter-spacing:-.03em}
.fp-au-mani__lead{margin:0;font-size:calc(19*var(--u));line-height:1.55;color:var(--c-sub)}
.fp-au-mani__lead strong{color:var(--c-dark)}
.fp-au-vals{list-style:none;margin:calc(10*var(--u)) 0 0;padding:calc(34*var(--u)) 0 0;position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
.fp-au-vals::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(18*var(--u));
background:repeating-linear-gradient(90deg,var(--c-div) 0 1px,transparent 1px calc(12*var(--u))) left bottom/100% calc(8*var(--u)) no-repeat,
linear-gradient(var(--c-div),var(--c-div)) left bottom/100% 1px no-repeat}
.fp-au-vals li{position:relative;font-size:max(12px,calc(15*var(--u)));font-weight:700;letter-spacing:-.02em;padding-top:calc(4*var(--u))}
.fp-au-vals li::before{content:'';position:absolute;left:0;top:calc(-34*var(--u));width:2px;height:calc(26*var(--u));background:var(--c-dark)}
.fp-au-vals li::after{content:'';position:absolute;left:calc(-5*var(--u));top:calc(-44*var(--u));width:calc(11*var(--u));height:calc(11*var(--u));border-radius:50%;background:var(--c-pink)}
.fp-au-vals li:nth-child(2){color:#c4568e}
.fp-au-diff{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--c-pink-bg) 0,#fff 100%);padding-block:calc(70*var(--u))}
.fp-au-diff__num{position:absolute;right:calc(-20*var(--u));top:calc(10*var(--u));font-size:calc(170*var(--u));font-weight:700;line-height:1;letter-spacing:-.06em;
color:transparent;-webkit-text-stroke:1px rgba(196,86,142,.35);pointer-events:none;user-select:none}
.fp-au-diff__in{position:relative;display:grid;gap:calc(30*var(--u))}
.fp-au-diff__photo{margin:0;border-radius:calc(160*var(--u)) calc(160*var(--u)) calc(14*var(--u)) calc(14*var(--u));overflow:hidden;aspect-ratio:4/5;box-shadow:0 calc(20*var(--u)) calc(50*var(--u)) rgba(58,58,58,.14)}
.fp-au-diff__photo img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;display:block}
.fp-au-diff__h{margin:0;font-size:calc(30*var(--u));line-height:1.2;letter-spacing:-.03em}
.fp-au-diff__h em{font-style:normal;background:linear-gradient(transparent 62%,var(--c-pink) 62%)}
.fp-au-diff__lead{margin:calc(18*var(--u)) 0 0;font-size:calc(19*var(--u));font-weight:700}
.fp-au-diff__p{margin:calc(12*var(--u)) 0 0;font-size:max(12px,calc(16*var(--u)));line-height:1.6;color:var(--c-sub)}
.fp-au-rule__list{list-style:none;margin:0;padding:0 0 0 calc(34*var(--u));position:relative;display:grid;gap:calc(46*var(--u))}
.fp-au-rule__list::before{content:'';position:absolute;top:0;bottom:0;left:calc(9*var(--u));width:calc(10*var(--u));
background:repeating-linear-gradient(180deg,var(--c-div) 0 1px,transparent 1px calc(10*var(--u))) right top/calc(6*var(--u)) 100% no-repeat,
linear-gradient(var(--c-dark),var(--c-dark)) right top/2px 100% no-repeat}
.fp-au-rule__item{position:relative;display:grid;gap:calc(14*var(--u))}
.fp-au-rule__no{position:absolute;left:calc(-38*var(--u));top:0;width:calc(34*var(--u));height:calc(34*var(--u));border-radius:50%;background:var(--c-pink);
display:grid;place-items:center;font-size:max(12px,calc(13*var(--u)));font-weight:700;color:var(--c-dark);box-shadow:0 0 0 calc(5*var(--u)) var(--c-grey-bg);z-index:2}
.fp-au-rule__ph{margin:0;border-radius:calc(14*var(--u));overflow:hidden;aspect-ratio:770/505}
.fp-au-rule__ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.fp-au-rule__item:hover .fp-au-rule__ph img{transform:scale(1.04)}
.fp-au-rule__card{background:#fff;border-radius:calc(14*var(--u));padding:calc(20*var(--u));box-shadow:0 calc(10*var(--u)) calc(30*var(--u)) rgba(58,58,58,.07)}
.fp-au-rule__h{margin:0;font-size:calc(19*var(--u));line-height:1.3;letter-spacing:-.02em}
.fp-au-rule__p{margin:calc(10*var(--u)) 0 0;font-size:max(12px,calc(15*var(--u)));line-height:1.6;color:var(--c-sub)}
.fp-au-rule__p strong,.fp-au-mani__lead strong{font-weight:700}
.fp-au-rule__p strong{color:var(--c-em);background:none}   /* 2026-10-02 형광 → 글자색(위 기본 강조와 같은 방식) */
.fp-au-rule__card .fp-check{margin-top:calc(12*var(--u))}
@media (min-width:1280px){
.fp-au-mani__in{grid-template-columns:calc(520*var(--u)) 1fr;column-gap:calc(120*var(--u));align-items:end}
.fp-au-mani__why{font-size:calc(28*var(--u))}
.fp-au-mani__h{font-size:calc(76*var(--u))}
.fp-au-mani__lead{font-size:calc(26*var(--u))}
.fp-au-vals{grid-column:1/-1;margin-top:calc(40*var(--u));padding-top:calc(60*var(--u))}
.fp-au-vals::before{height:calc(30*var(--u));background-size:100% calc(14*var(--u)),100% 1px;
background-image:repeating-linear-gradient(90deg,var(--c-div) 0 1px,transparent 1px calc(16*var(--u))),linear-gradient(var(--c-div),var(--c-div))}
.fp-au-vals li{font-size:calc(56*var(--u));letter-spacing:-.04em}
.fp-au-vals li::before{top:calc(-60*var(--u));height:calc(46*var(--u))}
.fp-au-vals li::after{left:calc(-8*var(--u));top:calc(-76*var(--u));width:calc(18*var(--u));height:calc(18*var(--u))}
.fp-au-diff{padding-block:calc(150*var(--u))}
.fp-au-diff__num{right:calc(-30*var(--u));top:auto;bottom:calc(-120*var(--u));font-size:calc(520*var(--u));-webkit-text-stroke:2px rgba(196,86,142,.26)}
.fp-au-diff__in{grid-template-columns:calc(560*var(--u)) 1fr;column-gap:calc(110*var(--u));align-items:center}
.fp-au-diff__photo{border-radius:calc(280*var(--u)) calc(280*var(--u)) calc(20*var(--u)) calc(20*var(--u))}
.fp-au-diff__h{font-size:calc(58*var(--u))}
.fp-au-diff__lead{margin-top:calc(34*var(--u));font-size:calc(28*var(--u))}
.fp-au-diff__p{margin-top:calc(18*var(--u));font-size:calc(21*var(--u));max-width:calc(640*var(--u))}
.fp-au-rule__list{padding:0;gap:calc(20*var(--u))}
.fp-au-rule__list::before{left:50%;width:calc(22*var(--u));transform:translateX(-100%);
background-size:calc(12*var(--u)) 100%,2px 100%;background-image:repeating-linear-gradient(180deg,var(--c-div) 0 1px,transparent 1px calc(16*var(--u))),linear-gradient(var(--c-dark),var(--c-dark))}
.fp-au-rule__item{grid-template-columns:1fr 1fr;column-gap:calc(120*var(--u));align-items:center;min-height:calc(420*var(--u))}
.fp-au-rule__no{left:50%;top:50%;transform:translate(-50%,-50%);width:calc(74*var(--u));height:calc(74*var(--u));font-size:calc(24*var(--u));box-shadow:0 0 0 calc(10*var(--u)) var(--c-grey-bg)}
.fp-au-rule__ph{border-radius:calc(22*var(--u))}
.fp-au-rule__card{position:relative;padding:calc(44*var(--u)) calc(48*var(--u));border-radius:calc(22*var(--u))}
.fp-au-rule__item:nth-child(odd) .fp-au-rule__card{margin-left:calc(-40*var(--u))}
.fp-au-rule__item:nth-child(even) .fp-au-rule__ph{order:2}
.fp-au-rule__item:nth-child(even) .fp-au-rule__card{order:1;margin-right:calc(-40*var(--u))}
.fp-au-rule__h{font-size:calc(32*var(--u))}
.fp-au-rule__p{margin-top:calc(18*var(--u));font-size:calc(19*var(--u))}
.fp-au-rule__card .fp-check{margin-top:calc(20*var(--u))}
}

/* ── About Us · Clinic Tour (2026-09-29 재구성) ── */
.fp-au-tour{position:relative;overflow:hidden;background:#fff}
/* 바탕 결 — 원문 서브배너(why_bg3 · 사람 없는 빛줄기 결)를 CSS 로 흉내 낸다. 그림을 그대로 싣지 않는 까닭: ⑥ 이 원문 히어로 배경을 모델 사진으로 보고 막는다 */
.fp-au-tour__tex{position:absolute;left:0;right:0;top:calc(120*var(--u));bottom:0;opacity:.16;
background:linear-gradient(125deg,transparent 0 34%,rgba(255,255,255,.85) 34% 56%,transparent 56.4% 60%,rgba(255,255,255,.85) 60.4% 84%,transparent 84.4%),linear-gradient(180deg,#8f8f8b 0,#cfcdc8 100%)}
.fp-au-tour__tex::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#fff 0,rgba(255,255,255,0) 30%,rgba(255,229,243,.6) 100%)}
.fp-au-tour__in{position:relative;display:grid;gap:calc(14*var(--u))}
.fp-au-tour__ph{position:relative;margin:0;border-radius:calc(14*var(--u));overflow:hidden;aspect-ratio:1202/800;box-shadow:0 calc(14*var(--u)) calc(36*var(--u)) rgba(58,58,58,.12)}
.fp-au-tour__ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.fp-au-tour__ph:hover img{transform:scale(1.05)}
.fp-au-tour__ph::after{content:'';position:absolute;left:calc(12*var(--u));bottom:calc(12*var(--u));width:calc(10*var(--u));height:calc(10*var(--u));border-radius:50%;background:var(--c-pink);box-shadow:0 0 0 calc(4*var(--u)) rgba(255,255,255,.7)}
.fp-au-tour__ph:nth-child(2){width:86%;justify-self:end}
.fp-au-tour__ph:nth-child(3){width:86%}
.fp-au-tour .fp-au-ruler-x{margin-top:calc(20*var(--u))}
@media (min-width:1280px){
.fp-au-tour__tex{top:calc(260*var(--u))}
.fp-au-tour__in{grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto;column-gap:calc(40*var(--u));row-gap:calc(40*var(--u))}
.fp-au-tour__ph{border-radius:calc(22*var(--u))}
.fp-au-tour__ph:nth-child(1){grid-column:1/8;grid-row:1/3;aspect-ratio:auto;height:100%}
.fp-au-tour__ph:nth-child(2){grid-column:8/13;grid-row:1;width:auto;margin-top:calc(80*var(--u))}
.fp-au-tour__ph:nth-child(3){grid-column:8/12;grid-row:2;width:auto;margin-bottom:calc(-60*var(--u))}
.fp-au-tour__ph::after{left:calc(24*var(--u));bottom:calc(24*var(--u));width:calc(16*var(--u));height:calc(16*var(--u));box-shadow:0 0 0 calc(6*var(--u)) rgba(255,255,255,.7)}
.fp-au-tour .fp-au-ruler-x{grid-column:1/-1;margin-top:calc(100*var(--u))}
}

/* ── About Us · Clinic Hours (2026-09-29 재구성) ── */
.fp-au-visit{background:var(--c-grey-bg)}
.fp-au-visit__in{display:grid;gap:calc(20*var(--u))}
.fp-au-map{padding:calc(10*var(--u));overflow:hidden}
.fp-au-tabs{display:flex;gap:calc(6*var(--u));padding:calc(4*var(--u));margin-bottom:calc(10*var(--u));background:var(--c-grey-bg);border-radius:999px}
.fp-au-tabs button{flex:1;border:0;background:transparent;padding:calc(10*var(--u)) calc(8*var(--u));border-radius:999px;font:inherit;font-size:max(12px,calc(14*var(--u)));font-weight:700;color:var(--c-sub);cursor:pointer;transition:background .25s,color .25s}
.fp-au-tabs button[aria-selected="true"]{background:var(--c-pink);color:var(--c-dark)}
.fp-au-panel{border-radius:calc(10*var(--u));overflow:hidden}
.fp-au-panel iframe{display:block;width:100%;height:calc(300*var(--u));border:0}
.fp-au-panel img{display:block;width:100%;height:auto}
.fp-au-dir{list-style:none;margin:0;padding:calc(12*var(--u)) calc(6*var(--u)) calc(4*var(--u));display:grid;gap:calc(6*var(--u));font-size:max(12px,calc(14*var(--u)))}
.fp-au-dir li{display:flex;align-items:center;gap:calc(10*var(--u))}
.fp-au-dir li::before{content:'';flex:none;width:calc(8*var(--u));height:calc(8*var(--u));border-radius:50%;background:var(--c-pink)}
.fp-au-info{display:grid;gap:calc(14*var(--u))}
.fp-au-blk{padding:calc(22*var(--u))}
.fp-au-blk h2,.fp-au-blk h3{margin:0 0 calc(10*var(--u));font-size:calc(22*var(--u));letter-spacing:-.02em}
.fp-au-blk p{margin:calc(6*var(--u)) 0 0;font-size:max(12px,calc(15*var(--u)));line-height:1.6;color:var(--c-sub)}
.fp-au-blk a{color:var(--c-dark);font-weight:700;text-decoration:none;background:linear-gradient(transparent 62%,var(--c-pink-bg) 62%)}
.fp-au-lbl{font-size:max(12px,calc(13*var(--u)))!important;font-weight:700;color:#c4568e!important;letter-spacing:.02em}
.fp-au-hours{display:grid;gap:calc(14*var(--u));margin-top:calc(6*var(--u))}
.fp-au-hours__row{display:grid;gap:calc(6*var(--u));font-size:max(12px,calc(15*var(--u)));font-weight:700}
.fp-au-hours__bar{position:relative;height:calc(10*var(--u));border-radius:999px;background:repeating-linear-gradient(90deg,var(--c-line) 0 1px,transparent 1px 11.111%),var(--c-grey-bg)}
.fp-au-hours__bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--c-pink),#f39bc6);width:calc(var(--fp-h)/9*100%)}
.fp-au-cta{background:linear-gradient(120deg,var(--c-pink-bg) 0,#f4f2f7 100%);padding-block:calc(50*var(--u))}
.fp-au-cta__in{display:grid;gap:calc(16*var(--u));justify-items:start}
.fp-au-cta h2{margin:0;font-size:calc(26*var(--u));line-height:1.2;letter-spacing:-.03em}
.fp-au-cta p{margin:0;font-size:max(12px,calc(16*var(--u)));color:var(--c-sub)}
.fp-au-btn{display:inline-flex;align-items:center;gap:calc(10*var(--u));padding:calc(14*var(--u)) calc(26*var(--u));border-radius:999px;background:var(--c-dark);color:#fff;font-weight:700;font-size:max(12px,calc(15*var(--u)));text-decoration:none;transition:transform .25s,background .25s}
.fp-au-btn:hover{background:#c4568e;transform:translateY(-2px)}
.fp-au-btn::after{content:'';width:calc(8*var(--u));height:calc(8*var(--u));border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
@media (min-width:1280px){
.fp-au-visit__in{grid-template-columns:calc(820*var(--u)) 1fr;column-gap:calc(40*var(--u));align-items:start}
.fp-au-map{padding:calc(18*var(--u))}
.fp-au-tabs{margin-bottom:calc(18*var(--u))}
.fp-au-tabs button{font-size:calc(18*var(--u));padding:calc(14*var(--u))}
.fp-au-panel{border-radius:calc(14*var(--u))}
.fp-au-panel iframe{height:calc(560*var(--u))}
.fp-au-dir{font-size:calc(18*var(--u));grid-template-columns:repeat(3,auto);justify-content:start;column-gap:calc(34*var(--u));padding:calc(18*var(--u)) calc(8*var(--u)) calc(4*var(--u))}
.fp-au-info{gap:calc(20*var(--u))}
.fp-au-blk{padding:calc(34*var(--u)) calc(38*var(--u))}
.fp-au-blk h2,.fp-au-blk h3{font-size:calc(32*var(--u));margin-bottom:calc(14*var(--u))}
.fp-au-blk p{font-size:calc(19*var(--u))}
.fp-au-lbl{font-size:max(12px,calc(17*var(--u)))!important}
.fp-au-hours__row{font-size:calc(19*var(--u))}
.fp-au-hours__bar{height:calc(14*var(--u))}
.fp-au-cta{padding-block:calc(110*var(--u))}
.fp-au-cta__in{grid-template-columns:1fr auto;align-items:center;column-gap:calc(60*var(--u))}
.fp-au-cta h2{font-size:calc(50*var(--u))}
.fp-au-cta p{font-size:calc(22*var(--u));margin-top:calc(14*var(--u))}
.fp-au-btn{font-size:calc(20*var(--u));padding:calc(22*var(--u)) calc(44*var(--u))}
}

/* ── About Us · Medical Team (2026-09-29 재구성) ── */
.fp-au-roster{background:#fff}
.fp-au-roster__list{list-style:none;margin:0;padding:0 0 calc(6*var(--u));display:grid;grid-auto-flow:column;grid-auto-columns:calc(128*var(--u));gap:calc(12*var(--u));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.fp-au-roster__list::-webkit-scrollbar{display:none}
.fp-au-roster__list li{scroll-snap-align:start}
.fp-au-roster__a{display:block;text-decoration:none;color:inherit}
.fp-au-roster__ph{position:relative;margin:0;aspect-ratio:3/4;border-radius:calc(80*var(--u)) calc(80*var(--u)) calc(12*var(--u)) calc(12*var(--u));overflow:hidden;background:linear-gradient(180deg,#f3d6e2 0,#e4e4e9 100%)}
.fp-au-roster__list li:nth-child(even) .fp-au-roster__ph{background:linear-gradient(180deg,#e4e4e9 0,#f3d6e2 100%)}
.fp-au-roster__ph img{position:absolute;left:50%;bottom:0;height:92%;width:auto;max-width:none;transform:translateX(-50%);transition:transform .5s ease}
.fp-au-roster__a:hover .fp-au-roster__ph img{transform:translateX(-50%) scale(1.04)}
.fp-au-roster__n{margin:calc(10*var(--u)) 0 0;font-size:max(12px,calc(16*var(--u)));font-weight:700;letter-spacing:-.02em}
.fp-au-roster__r{margin:calc(2*var(--u)) 0 0;font-size:max(12px,calc(13*var(--u)));color:#c4568e;font-weight:700}
.fp-au-doc{position:relative;overflow:hidden}
.fp-au-doc:nth-of-type(odd){background:var(--c-grey-bg)}
.fp-au-doc__bg{position:absolute;right:calc(-10*var(--u));top:calc(20*var(--u));font-size:calc(64*var(--u));font-weight:700;line-height:.9;letter-spacing:-.05em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(196,86,142,.25);pointer-events:none;user-select:none}
.fp-au-doc__head{position:relative;display:grid;gap:calc(20*var(--u))}
.fp-au-doc__ph{margin:0;aspect-ratio:4/5;max-width:calc(260*var(--u));border-radius:calc(130*var(--u)) calc(130*var(--u)) calc(14*var(--u)) calc(14*var(--u));overflow:hidden;position:relative;background:linear-gradient(180deg,#f3d6e2 0,#e4e4e9 100%)}
.fp-au-doc__ph img{position:absolute;left:50%;bottom:0;height:90%;width:auto;max-width:none;transform:translateX(-50%)}
.fp-au-doc__chip{display:inline-block;margin:0;padding:calc(6*var(--u)) calc(14*var(--u));border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--c-pink);font-size:max(12px,calc(12*var(--u)));font-weight:700;color:#c4568e}
.fp-au-doc__name{margin:calc(12*var(--u)) 0 0;font-size:calc(34*var(--u));line-height:1.05;letter-spacing:-.04em}
.fp-au-doc__role{margin:calc(6*var(--u)) 0 0;font-size:max(12px,calc(16*var(--u)));font-weight:700;color:var(--c-sub)}
.fp-au-doc__cred{margin-top:calc(22*var(--u));display:grid;gap:calc(18*var(--u))}
.fp-au-doc__cred p{margin:0;display:grid;gap:calc(7*var(--u));font-size:max(12px,calc(14*var(--u)));line-height:1.45;color:var(--c-sub)}
.fp-au-doc__cred p:first-child{color:var(--c-dark);font-weight:700}
.fp-au-doc__cred p>span{position:relative;padding-left:calc(16*var(--u))}
/* 원문이 목록을 `<br>` 로 쓴 자리다 — 줄마다 `<span>` 을 두르고 `<br>` 는 그대로 둔다(④ 는 원문 한 줄 = `<br>` 이 공백인 한 덩어리로 댄다. `<li>` 로 쪼개면 원문 줄 한가운데를 자른 것이 된다) */
.fp-au-doc__cred p>br{display:none}
.fp-au-doc__cred p>span::before{content:'';position:absolute;left:0;top:.6em;width:calc(8*var(--u));height:2px;background:var(--c-pink)}
.fp-au-tabs2{margin-top:calc(34*var(--u))}
.fp-au-tabs2__bar{display:flex;flex-wrap:wrap;gap:calc(6*var(--u))}
.fp-au-tabs2__bar button{border:0;border-radius:999px;padding:calc(10*var(--u)) calc(16*var(--u));background:#fff;box-shadow:inset 0 0 0 1px var(--c-line);font:inherit;font-size:max(12px,calc(13*var(--u)));font-weight:700;color:var(--c-sub);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.fp-au-tabs2__bar button[aria-selected="true"]{background:var(--c-dark);color:#fff;box-shadow:none}
.fp-au-tabs2__panel{margin-top:calc(18*var(--u))}
.fp-au-grp+.fp-au-grp{margin-top:calc(22*var(--u))}
.fp-au-grp__l{margin:0 0 calc(10*var(--u));font-size:max(12px,calc(13*var(--u)));font-weight:700;letter-spacing:.06em;color:#c4568e}
.fp-au-gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:calc(12*var(--u))}
.fp-au-gal figure{margin:0}
.fp-au-gal img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:calc(10*var(--u));background:#fff;box-shadow:0 calc(6*var(--u)) calc(18*var(--u)) rgba(58,58,58,.08)}
.fp-au-gal figcaption{margin-top:calc(8*var(--u));font-size:max(12px,calc(12*var(--u)));line-height:1.45;font-weight:700}
.fp-au-gal figcaption span{display:block;margin-top:calc(3*var(--u));font-weight:400;color:var(--c-sub)}
@media (min-width:1280px){
.fp-au-roster__list{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);gap:calc(24*var(--u));overflow:visible}
.fp-au-roster__ph{border-radius:calc(150*var(--u)) calc(150*var(--u)) calc(20*var(--u)) calc(20*var(--u))}
.fp-au-roster__n{margin-top:calc(20*var(--u));font-size:calc(28*var(--u))}
.fp-au-roster__r{margin-top:calc(4*var(--u));font-size:calc(18*var(--u))}
.fp-au-doc__bg{right:calc(60*var(--u));top:calc(60*var(--u));font-size:calc(210*var(--u));-webkit-text-stroke:2px rgba(196,86,142,.2)}
.fp-au-doc__head{grid-template-columns:calc(460*var(--u)) 1fr;column-gap:calc(100*var(--u));align-items:start}
.fp-au-doc__ph{max-width:none;border-radius:calc(230*var(--u)) calc(230*var(--u)) calc(22*var(--u)) calc(22*var(--u));position:sticky;top:calc(120*var(--u))}
.fp-au-doc__chip{font-size:max(12px,calc(17*var(--u)));padding:calc(8*var(--u)) calc(20*var(--u))}
.fp-au-doc__name{margin-top:calc(20*var(--u));font-size:calc(76*var(--u))}
.fp-au-doc__role{margin-top:calc(10*var(--u));font-size:calc(24*var(--u))}
.fp-au-doc__cred{margin-top:calc(40*var(--u));grid-template-columns:1fr;gap:calc(28*var(--u))}
.fp-au-doc__cred p{font-size:max(12px,calc(17*var(--u)));gap:calc(9*var(--u))}
.fp-au-doc__cred p+p{grid-template-columns:1fr 1fr;column-gap:calc(40*var(--u))}
.fp-au-doc__cred p>span{padding-left:calc(22*var(--u))}
.fp-au-doc__cred p>span::before{width:calc(12*var(--u))}
.fp-au-tabs2{margin-top:calc(60*var(--u))}
.fp-au-tabs2__bar{gap:calc(10*var(--u))}
.fp-au-tabs2__bar button{font-size:calc(18*var(--u));padding:calc(14*var(--u)) calc(26*var(--u))}
.fp-au-tabs2__panel{margin-top:calc(28*var(--u))}
.fp-au-grp+.fp-au-grp{margin-top:calc(36*var(--u))}
.fp-au-grp__l{font-size:max(12px,calc(17*var(--u)));margin-bottom:calc(14*var(--u))}
.fp-au-gal{grid-template-columns:repeat(4,1fr);gap:calc(22*var(--u))}
.fp-au-gal img{border-radius:calc(16*var(--u))}
.fp-au-gal figcaption{font-size:max(12px,calc(16*var(--u)));margin-top:calc(12*var(--u))}
}

/* ── About Us · In the Media 대표 띠·보도 벽 (2026-09-29 재구성) ── */
.fp-au-pfeat{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--c-pink-bg) 0,#f1f0f5 100%);padding-block:calc(40*var(--u))}
.fp-au-pfeat__bg{position:absolute;left:calc(-10*var(--u));bottom:calc(-14*var(--u));font-size:calc(70*var(--u));font-weight:700;line-height:1;letter-spacing:-.05em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(196,86,142,.28);pointer-events:none;user-select:none}
.fp-au-pfeat__a{position:relative;display:grid;gap:calc(18*var(--u));text-decoration:none;color:inherit}
.fp-au-pfeat__ph{border-radius:calc(16*var(--u));overflow:hidden;aspect-ratio:381/251;box-shadow:0 calc(18*var(--u)) calc(40*var(--u)) rgba(58,58,58,.18);transform:rotate(-1.5deg);transition:transform .5s ease}
.fp-au-pfeat__ph img{width:100%;height:100%;object-fit:cover;display:block}
.fp-au-pfeat__a:hover .fp-au-pfeat__ph{transform:rotate(0) scale(1.02)}
.fp-au-pfeat__t{margin:0;font-size:calc(26*var(--u));line-height:1.18;letter-spacing:-.035em}
.fp-au-pfeat__t::before{content:'';display:block;width:calc(44*var(--u));height:calc(5*var(--u));border-radius:3px;background:#c4568e;margin-bottom:calc(14*var(--u))}
.fp-au-pfeat__go{display:inline-flex;align-items:center;gap:calc(10*var(--u));margin-top:calc(16*var(--u));width:calc(44*var(--u));height:calc(44*var(--u));border-radius:50%;background:var(--c-dark);justify-content:center;transition:background .25s,transform .25s}
.fp-au-pfeat__go::after{content:'';width:calc(10*var(--u));height:calc(10*var(--u));border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);margin-left:-3px}
.fp-au-pfeat__a:hover .fp-au-pfeat__go{background:#c4568e;transform:translateX(4px)}
.fp-au-wall{background:var(--c-dark);padding-block:calc(26*var(--u));overflow:hidden;display:grid;gap:calc(12*var(--u))}
.fp-au-wall__row{display:flex;gap:calc(12*var(--u));width:max-content;animation:fp-au-wall 90s linear infinite}
.fp-au-wall__row--r{animation-direction:reverse;animation-duration:110s}
.fp-au-wall:hover .fp-au-wall__row{animation-play-state:paused}
.fp-au-wall a{flex:none;display:block;width:calc(150*var(--u));aspect-ratio:381/251;border-radius:calc(8*var(--u));overflow:hidden}
.fp-au-wall img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.85);transition:filter .35s,transform .35s}
.fp-au-wall a:hover img{filter:none;transform:scale(1.05)}
@keyframes fp-au-wall{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.fp-au-wall__row{animation:none}}
@media (min-width:1280px){
.fp-au-pfeat{padding-block:calc(110*var(--u))}
.fp-au-pfeat__bg{left:auto;right:calc(-30*var(--u));bottom:calc(-40*var(--u));font-size:calc(260*var(--u));-webkit-text-stroke:2px rgba(196,86,142,.22)}
.fp-au-pfeat__a{grid-template-columns:calc(760*var(--u)) 1fr;column-gap:calc(90*var(--u));align-items:center}
.fp-au-pfeat__ph{border-radius:calc(26*var(--u))}
.fp-au-pfeat__t{font-size:calc(58*var(--u))}
.fp-au-pfeat__t::before{width:calc(80*var(--u));height:calc(7*var(--u));margin-bottom:calc(30*var(--u))}
.fp-au-pfeat__go{width:calc(72*var(--u));height:calc(72*var(--u));margin-top:calc(34*var(--u))}
.fp-au-pfeat__go::after{width:calc(16*var(--u));height:calc(16*var(--u))}
.fp-au-wall{padding-block:calc(50*var(--u));gap:calc(22*var(--u))}
.fp-au-wall__row{gap:calc(22*var(--u))}
.fp-au-wall a{width:calc(300*var(--u));border-radius:calc(14*var(--u))}
}

/* ── About Us · 게시판 모양 넷 (2026-09-29 재구성) — `meta.board_class` 로 붙인다. 붙이지 않은 게시판은 한 픽셀도 안 바뀐다.
   마크업은 board.py 그대로(`ul.fp-board > li > a.fp-board__card > span.fp-board__thumb > img + h2.fp-board__title`)이고
   `--chips` 만 board.py 의 표 계통 둘째 모양(`render_chips`)이다. 호버 확대(1.06)·제목 밑줄은 28절 공통 것을 그대로 쓴다. */
/* `--mosaic` 전시벽(academic) — 다섯 칸마다 한 칸이 크게(PC 2x2 · ≤1279 가로 2칸) */
.fp-board--mosaic{grid-template-columns:repeat(2,1fr);gap:calc(18*var(--u)) calc(12*var(--u));grid-auto-flow:dense;--fp-board-title-ta:left}
.fp-board--mosaic>li:nth-child(5n+1){grid-column:span 2}
.fp-board--mosaic .fp-board__thumb{border:0;border-radius:calc(12*var(--u));aspect-ratio:380/250}
.fp-board--mosaic .fp-board__thumb::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 calc(3*var(--u)) transparent;transition:box-shadow .3s}
.fp-board--mosaic .fp-board__title{margin-top:calc(8*var(--u));font-size:max(12px,calc(13*var(--u)));font-weight:700;line-height:1.4}
/* `--list` 보도 목록(press) — 작은 썸네일 + 제목 한 줄, 굵은 윗선 */
.fp-board--list{grid-template-columns:1fr;gap:0;border-top:2px solid var(--c-dark);--fp-board-title-ta:left}
.fp-board--list>li{border-bottom:1px solid var(--c-line)}
.fp-board--list .fp-board__card{display:grid;grid-template-columns:calc(96*var(--u)) 1fr;gap:calc(14*var(--u));align-items:center;height:auto;padding:calc(14*var(--u)) 0}
.fp-board--list .fp-board__thumb{border:0;border-radius:calc(8*var(--u));aspect-ratio:381/251}
.fp-board--list .fp-board__thumb img{filter:saturate(.85);transition:filter .3s}
.fp-board--list .fp-board__title{margin:0;font-size:max(12px,calc(14*var(--u)));font-weight:700;line-height:1.45}
/* `--editorial` 블로그 — 맨 앞 두 편이 넓게, 날짜는 분홍 굵게 */
.fp-board--editorial{grid-template-columns:repeat(2,1fr);gap:calc(18*var(--u)) calc(12*var(--u));--fp-board-title-ta:left}
.fp-board--editorial>li:nth-child(-n+2){grid-column:1/-1}
.fp-board--editorial .fp-board__thumb{border:0;border-radius:calc(12*var(--u));aspect-ratio:300.7/235;background:#f4f4f0}
.fp-board--editorial>li:nth-child(-n+2) .fp-board__thumb{aspect-ratio:16/10}
.fp-board--editorial .fp-board__title{margin-top:calc(10*var(--u));font-size:max(12px,calc(13*var(--u)));font-weight:700;line-height:1.4}
.fp-board--editorial>li:nth-child(-n+2) .fp-board__title{font-size:calc(17*var(--u))}
.fp-board--editorial .fp-board__meta{margin-top:calc(6*var(--u));font-size:max(12px,calc(11*var(--u)));font-weight:700;color:#c4568e}
/* `--chips` 날짜 칩 목록(notice) — 표 대신 흰 카드. 칩 글자는 원문 날짜 한 덩어리(「2026.」+「06.10」)다 */
.fp-sec:has(>.fp-wrap>.fp-board--chips){background:var(--c-grey-bg)}
.fp-board--chips{grid-template-columns:1fr;gap:calc(10*var(--u));--fp-board-title-ta:left}
.fp-board--chips .fp-board__card{display:grid;grid-template-columns:calc(62*var(--u)) 1fr;gap:calc(14*var(--u));align-items:center;height:auto;padding:calc(14*var(--u));
border-radius:calc(12*var(--u));background:#fff;box-shadow:0 calc(6*var(--u)) calc(18*var(--u)) rgba(58,58,58,.06);transition:transform .25s,box-shadow .25s}
.fp-board__date{display:grid;place-content:center;justify-items:center;aspect-ratio:1;border-radius:calc(10*var(--u));background:var(--c-grey-bg);line-height:1.15}
.fp-board__date>span:first-child{font-size:max(12px,calc(10*var(--u)));color:var(--c-sub)}
.fp-board__date>span:last-child{font-size:calc(18*var(--u));font-weight:700;letter-spacing:-.03em;color:var(--c-dark)}
.fp-board--chips .is-notice .fp-board__date{background:var(--c-pink)}
.fp-board--chips .is-notice .fp-board__date>span:first-child{color:var(--c-dark)}
.fp-board__body{min-width:0}
.fp-board__pin{display:inline-block;margin-bottom:calc(6*var(--u));padding:calc(2*var(--u)) calc(9*var(--u));border-radius:999px;background:var(--c-dark);color:#fff;font-size:max(12px,calc(11*var(--u)));font-weight:700;line-height:1.5}
.fp-board--chips .fp-board__title{margin:0;font-size:max(12px,calc(15*var(--u)));font-weight:700;line-height:1.35}
.fp-board--chips .fp-board__meta{display:block;margin-top:calc(4*var(--u));font-weight:400;text-align:left}
@media (min-width:1280px){
.fp-board--mosaic{grid-template-columns:repeat(4,1fr);gap:calc(44*var(--u)) calc(26*var(--u))}
.fp-board--mosaic>li:nth-child(5n+1){grid-row:span 2}
.fp-board--mosaic .fp-board__thumb{border-radius:calc(20*var(--u))}
.fp-board--mosaic .fp-board__title{margin-top:calc(14*var(--u));font-size:max(12px,calc(18*var(--u)))}
.fp-board--mosaic>li:nth-child(5n+1) .fp-board__title{margin-top:calc(20*var(--u));font-size:calc(28*var(--u))}
.fp-board--list{grid-template-columns:1fr 1fr;column-gap:calc(80*var(--u));border-top-width:3px}
.fp-board--list .fp-board__card{grid-template-columns:calc(190*var(--u)) 1fr calc(20*var(--u));gap:calc(30*var(--u));padding:calc(28*var(--u)) calc(10*var(--u)) calc(28*var(--u)) 0}
.fp-board--list .fp-board__card::after{content:'';width:calc(11*var(--u));height:calc(11*var(--u));border-top:2px solid var(--c-light);border-right:2px solid var(--c-light);transform:rotate(45deg);transition:border-color .25s,transform .25s}
.fp-board--list .fp-board__thumb{border-radius:calc(12*var(--u))}
.fp-board--list .fp-board__title{font-size:calc(21*var(--u))}
.fp-board--editorial{grid-template-columns:repeat(4,1fr);gap:calc(50*var(--u)) calc(30*var(--u))}
.fp-board--editorial>li:nth-child(-n+2){grid-column:span 2}
.fp-board--editorial .fp-board__thumb{border-radius:calc(18*var(--u))}
.fp-board--editorial .fp-board__title{margin-top:calc(18*var(--u));font-size:calc(19*var(--u))}
.fp-board--editorial>li:nth-child(-n+2) .fp-board__title{font-size:calc(28*var(--u))}
.fp-board--editorial .fp-board__meta{margin-top:calc(10*var(--u));font-size:max(12px,calc(15*var(--u)))}
.fp-board--chips{gap:calc(16*var(--u))}
.fp-board--chips .fp-board__card{grid-template-columns:calc(110*var(--u)) 1fr auto;gap:calc(34*var(--u));padding:calc(22*var(--u)) calc(36*var(--u)) calc(22*var(--u)) calc(22*var(--u));border-radius:calc(20*var(--u))}
.fp-board--chips .fp-board__card::after{content:'';width:calc(12*var(--u));height:calc(12*var(--u));border-top:2px solid var(--c-light);border-right:2px solid var(--c-light);transform:rotate(45deg);transition:border-color .25s}
.fp-board__date{border-radius:calc(16*var(--u))}
.fp-board__date>span:first-child{font-size:max(12px,calc(15*var(--u)))}
.fp-board__date>span:last-child{font-size:calc(30*var(--u))}
.fp-board__pin{font-size:max(12px,calc(14*var(--u)));padding:calc(4*var(--u)) calc(12*var(--u));margin-bottom:calc(8*var(--u))}
.fp-board--chips .fp-board__title{font-size:calc(22*var(--u))}
}
@media (hover:hover){
.fp-board--mosaic .fp-board__card:hover .fp-board__thumb::after{box-shadow:inset 0 0 0 calc(3*var(--u)) var(--c-pink)}
:is(.fp-board--mosaic,.fp-board--list,.fp-board--editorial,.fp-board--chips) .fp-board__card:hover .fp-board__title{color:#c4568e}
.fp-board--list .fp-board__card:hover .fp-board__thumb img{filter:none}
.fp-board--list .fp-board__card:hover::after,.fp-board--chips .fp-board__card:hover::after{border-color:#c4568e}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.fp-board--list .fp-board__card:hover .fp-board__thumb img{transform:none}
.fp-board--list .fp-board__card:hover::after{transform:translateX(4px) rotate(45deg)}
.fp-board--chips .fp-board__card:hover{transform:translateY(-2px);box-shadow:0 calc(12*var(--u)) calc(26*var(--u)) rgba(196,86,142,.14)}
}

/* ── 33 학술 연표 `.fp-board--timeline` (2026-09-30) ──
   사용자 「academic-activities 배치가 마음에 안 든다 — 이쁘게, 전체 느낌과 어울리게」 → 1쪽 `meta.board_class` 에 `fp-board--timeline`,
   마크업은 tools/board.py `render_timeline`(제목의 연도로 묶은 `li.fp-board__yr` · 연도 `p.fp-board__y` aria-hidden · 머리말 `span.fp-board__by`).
   어휘는 About Us 32절 것을 그대로 쓴다: Why 1mm? 눈금자 선(`.fp-au-rule__list::before` 와 같은 결) · 분홍 점 · 테두리만 있는 큰 글자(`#c4568e`) ·
   흰 둥근 카드 + 옅은 그림자 · 위에서 아래로 분홍 → 회색 바탕. 새 이름만 쓰므로 붙이지 않은 게시판은 한 픽셀도 안 바뀐다.
   ≤1279 = 왼쪽 선 + 연도 머리 + 가로 카드(썸네일 왼쪽) 한 줄씩 · ≥1280 = 연도 레일(sticky) | 선 | 카드 3열, 한 해에 글이 하나면 두 칸 가로 대표 카드. */
.fp-sec:has(>.fp-wrap>.fp-board--timeline){background:linear-gradient(180deg,#fbeef4 0,var(--c-grey-bg) calc(560*var(--u)),var(--c-grey-bg) 100%)}
.fp-board.fp-board--timeline{display:block;position:relative;margin:0;padding:0;list-style:none}
.fp-board--timeline::before{content:'';position:absolute;top:calc(10*var(--u));bottom:calc(10*var(--u));left:calc(19*var(--u));width:calc(10*var(--u));transform:translateX(-100%);
background:repeating-linear-gradient(180deg,var(--c-div) 0 1px,transparent 1px calc(10*var(--u))) left top/calc(6*var(--u)) 100% no-repeat,
linear-gradient(var(--c-dark),var(--c-dark)) right top/2px 100% no-repeat}
.fp-board--timeline>li.fp-board__yr{position:relative;margin:0 0 calc(34*var(--u));padding:0 0 0 calc(40*var(--u));list-style:none}
.fp-board--timeline>li.fp-board__yr:last-child{margin-bottom:0}
.fp-board__yr::before{content:'';position:absolute;left:calc(18*var(--u));top:calc(12*var(--u));width:calc(14*var(--u));height:calc(14*var(--u));
border-radius:50%;background:var(--c-pink);transform:translateX(-50%);box-shadow:0 0 0 calc(4*var(--u)) rgba(255,255,255,.9)}
.fp-board__y{margin:0 0 calc(12*var(--u));font-size:calc(40*var(--u));font-weight:700;line-height:1;letter-spacing:-.03em;color:transparent;
-webkit-text-stroke:1.2px #c4568e;font-variant-numeric:lining-nums}
.fp-board__items{display:grid;gap:calc(12*var(--u));margin:0;padding:0;list-style:none}
.fp-board__items>li{margin:0;padding:0;list-style:none}
.fp-board--timeline .fp-board__card{display:grid;grid-template-columns:calc(108*var(--u)) 1fr;gap:calc(14*var(--u));align-items:center;height:auto;
padding:calc(10*var(--u));background:#fff;border-radius:calc(14*var(--u));box-shadow:0 calc(8*var(--u)) calc(24*var(--u)) rgba(58,58,58,.07);transition:box-shadow .35s}
.fp-board--timeline .fp-board__thumb{border:0;border-radius:calc(9*var(--u));aspect-ratio:380/250}
.fp-board--timeline .fp-board__title{margin:0;font-size:max(12px,calc(13*var(--u)));font-weight:700;line-height:1.4;text-align:left;flex:none}
.fp-board__by{display:block;margin-bottom:calc(4*var(--u));font-size:max(12px,calc(11*var(--u)));font-weight:700;letter-spacing:.01em;color:#c4568e}
.fp-board--timeline .fp-board__card:hover{box-shadow:0 calc(14*var(--u)) calc(34*var(--u)) rgba(58,58,58,.13)}
.fp-board--timeline .fp-board__card:hover .fp-board__title{color:#c4568e}
/* 648 기둥(600~1279) — 가로 카드 한 줄씩이면 1024 에서 문서 7,514px 가 된다(옛 모자이크도 이 폭에서 2열이었다) → 세로 카드 2열 */
@media (min-width:600px) and (max-width:1279px){
.fp-board__items{grid-template-columns:repeat(2,1fr)}
.fp-board--timeline .fp-board__card{display:flex;flex-direction:column;align-items:stretch;height:100%;padding:0;gap:0;overflow:hidden}
.fp-board--timeline .fp-board__thumb{border-radius:0}
.fp-board--timeline .fp-board__title{flex:1 0 auto;padding:calc(10*var(--u)) calc(11*var(--u)) calc(13*var(--u));font-size:max(12px,calc(10*var(--u)))}
.fp-board__by{margin-bottom:calc(3*var(--u));font-size:max(12px,calc(8.5*var(--u)))}
.fp-board__items>li:only-child{grid-column:1/-1}
.fp-board__items>li:only-child .fp-board__card{display:grid;grid-template-columns:52% 1fr;align-items:center}
.fp-board__items>li:only-child .fp-board__title{padding:calc(12*var(--u)) calc(14*var(--u))}
}
@media (min-width:1280px){
.fp-board--timeline::before{left:calc(331*var(--u));width:calc(22*var(--u));
background-size:calc(12*var(--u)) 100%,2px 100%;background-image:repeating-linear-gradient(180deg,var(--c-div) 0 1px,transparent 1px calc(16*var(--u))),linear-gradient(var(--c-dark),var(--c-dark))}
.fp-board--timeline>li.fp-board__yr{display:grid;grid-template-columns:calc(270*var(--u)) 1fr;column-gap:calc(110*var(--u));margin-bottom:calc(64*var(--u));padding:0}
.fp-board__yr::before{left:calc(330*var(--u));top:calc(34*var(--u));width:calc(22*var(--u));height:calc(22*var(--u));box-shadow:0 0 0 calc(8*var(--u)) rgba(255,255,255,.9)}
.fp-board__y{grid-column:1;align-self:start;position:sticky;top:calc(140*var(--u));margin:0;text-align:right;font-size:calc(104*var(--u));-webkit-text-stroke:1.6px #c4568e}
.fp-board__items{grid-column:2;grid-template-columns:repeat(3,1fr);gap:calc(44*var(--u)) calc(34*var(--u))}
.fp-board--timeline .fp-board__card{display:flex;flex-direction:column;align-items:stretch;height:100%;padding:0;gap:0;border-radius:calc(20*var(--u));overflow:hidden;
box-shadow:0 calc(12*var(--u)) calc(34*var(--u)) rgba(58,58,58,.07)}
.fp-board--timeline .fp-board__thumb{border-radius:0}
.fp-board--timeline .fp-board__title{flex:1 0 auto;padding:calc(22*var(--u)) calc(24*var(--u)) calc(28*var(--u));font-size:calc(19*var(--u));line-height:1.45}
.fp-board__by{margin-bottom:calc(8*var(--u));font-size:calc(14*var(--u))}
.fp-board--timeline .fp-board__card:hover{box-shadow:0 calc(22*var(--u)) calc(48*var(--u)) rgba(58,58,58,.14)}
.fp-board__items>li:only-child{grid-column:1/span 2}
.fp-board__items>li:only-child .fp-board__card{display:grid;grid-template-columns:54% 1fr;align-items:center}
.fp-board__items>li:only-child .fp-board__title{padding:calc(30*var(--u)) calc(38*var(--u));font-size:calc(24*var(--u));line-height:1.4}
.fp-board__items>li:only-child .fp-board__by{font-size:calc(15*var(--u));margin-bottom:calc(10*var(--u))}
}

/* ── 34 블로그 목차 `.fp-board--index` (2026-09-30) ──
   사용자 「blog 페이지의 layout 도」 → 처음엔 카드 격자를 다시 짠 매거진(`--magazine`)으로 갔으나 「다시 layout 재구축하라고 했는데?」 —
   카드 격자 느낌이 그대로라 재구축으로 안 보였다. **카드를 버리고 잡지 목차**로 다시 짰다(매거진 CSS 는 지웠다 · 옛 판 fp.css.bak-0930-index).
   마크업은 board.py `render_grid` 그대로(썸네일 → 제목 h2 → 날짜 p.fp-board__meta · rbb 제목 3줄 자름) — CSS 만.
   첫 글 = 커버 스토리(먹색 판 + 흰 큰 제목 + 분홍 날짜 | 사진) — 사진 위에 제목을 얹으면 사진에 구워진 한국어와 겹쳐 어수선했다(시안에서 봄).
   나머지 = 목차 줄: ≥1280 날짜 | 큰 제목 30u | 작은 썸네일 오른쪽 · ≤1279 제목·날짜 | 썸네일 오른쪽. 어수선한 한국어 캡처 썸네일을 작게 물러나게 하는 것이 핵심.
   날짜를 왼쪽 칸에 두는 것은 화면 배치일 뿐 DOM 차례(제목 → 날짜)는 그대로다. */
.fp-sec:has(>.fp-wrap>.fp-board--index){background:linear-gradient(180deg,#fbeef4 0,#fff calc(640*var(--u)))}
.fp-board.fp-board--index{display:block;margin:0;padding:0;list-style:none;counter-reset:none}
.fp-board--index>li{list-style:none;margin:0;padding:0}
/* 목차 줄 */
.fp-board--index>li:not(:first-child){border-bottom:1px solid var(--c-line)}
.fp-board--index>li:nth-child(2){border-top:2px solid var(--c-dark)}
.fp-board--index .fp-board__card{display:grid;grid-template-columns:1fr calc(96*var(--u));grid-template-rows:1fr auto 1fr;column-gap:calc(14*var(--u));height:auto;padding:calc(16*var(--u)) 0;position:relative}
.fp-board--index .fp-board__thumb{grid-column:2;grid-row:1/-1;align-self:center;border:0;border-radius:calc(8*var(--u));aspect-ratio:4/3}
.fp-board--index .fp-board__title{grid-column:1;grid-row:2;margin:0;font-size:max(12px,calc(15*var(--u)));font-weight:700;line-height:1.35;letter-spacing:-.02em;text-align:left;transition:color .25s}
.fp-board--index .fp-board__meta{grid-column:1;grid-row:3;align-self:start;margin:calc(6*var(--u)) 0 0;font-size:max(12px,calc(11*var(--u)));font-weight:700;letter-spacing:.02em;color:#c4568e;text-align:left}
.fp-board--index>li:not(:first-child) .fp-board__card:hover .fp-board__title{color:#c4568e;text-decoration:none}
/* 커버 스토리 = 첫 글: 사진 + 먹색 글 판(사진 위에 제목을 얹으면 사진에 구워진 한국어와 겹쳐 어수선하다) */
.fp-board--index>li:first-child{margin-bottom:calc(26*var(--u))}
.fp-board--index>li:first-child .fp-board__card{display:flex;flex-direction:column;padding:0;background:var(--c-dark);border-radius:calc(18*var(--u));overflow:hidden;
box-shadow:0 calc(14*var(--u)) calc(40*var(--u)) rgba(58,58,58,.16)}
.fp-board--index>li:first-child .fp-board__thumb{border-radius:0;aspect-ratio:16/10}
.fp-board--index>li:first-child .fp-board__title{padding:calc(20*var(--u)) calc(20*var(--u)) 0;color:#fff;font-size:calc(22*var(--u));line-height:1.25;letter-spacing:-.03em;align-self:stretch}
.fp-board--index>li:first-child .fp-board__meta{padding:0 calc(20*var(--u)) calc(22*var(--u));margin-top:calc(10*var(--u));color:var(--c-pink);font-size:max(12px,calc(12*var(--u)));align-self:stretch}
.fp-board--index>li:first-child .fp-board__card:hover .fp-board__title{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:2px}
@media (min-width:1280px){
.fp-board--index .fp-board__card{grid-template-columns:calc(170*var(--u)) 1fr calc(230*var(--u));column-gap:calc(48*var(--u));padding:calc(34*var(--u)) calc(10*var(--u));transition:background .3s,padding .3s}
.fp-board--index>li:not(:first-child) .fp-board__card:hover{background:rgba(255,229,243,.55);padding-left:calc(24*var(--u))}
.fp-board--index .fp-board__thumb{grid-column:3;border-radius:calc(12*var(--u));aspect-ratio:16/10}
.fp-board--index .fp-board__title{grid-column:2;grid-row:1/-1;align-self:center;font-size:calc(30*var(--u));line-height:1.3}
.fp-board--index .fp-board__meta{grid-column:1;grid-row:1/-1;align-self:center;margin:0;font-size:calc(16*var(--u))}
.fp-board--index>li:first-child{margin-bottom:calc(64*var(--u))}
.fp-board--index>li:first-child .fp-board__card{display:grid;grid-template-columns:44% 1fr;grid-template-rows:1fr auto 1fr;column-gap:0;padding:0;border-radius:calc(30*var(--u))}
.fp-board--index>li:first-child .fp-board__card:hover{background:var(--c-dark);padding:0}
.fp-board--index>li:first-child .fp-board__thumb{grid-column:2;grid-row:1/-1;aspect-ratio:16/10;border-radius:0}
.fp-board--index>li:first-child .fp-board__title{grid-column:1;grid-row:2;align-self:end;padding:0 calc(70*var(--u));font-size:calc(46*var(--u));line-height:1.18}
.fp-board--index>li:first-child .fp-board__meta{grid-column:1;grid-row:3;align-self:start;padding:calc(22*var(--u)) calc(70*var(--u)) 0;margin:0;font-size:calc(18*var(--u))}
}

/* ── 35 이벤트 포스터 벽 `.fp-board--events` (2026-09-30 · `promotion`) ──
   사용자 「Promotion 페이지가 없네? 만들어줘」 → 1쪽 `meta.board_class` 에 `fp-board--events`. 마크업은 board.py `render_grid` 그대로(CSS 만).
   정사각 이벤트 포스터를 **엇갈린 벽**으로 — 짝수 열이 반 칸쯤 아래로 내려간다(홈 「Academic Activity」 엇갈린 두 줄 · Real Model 띠의 리듬).
   엇갈림은 `margin-top:+X` + `margin-bottom:-X` 한 쌍이다 — 격자 줄 높이는 그대로 두고 칸만 내려가므로 이웃 줄과 안 겹치고,
   맨 끝 줄이 넘치는 만큼 목록 `padding-bottom` 으로 받는다. `transform` 을 쓰지 않는 까닭: 진입 모션·3D 기울기가 transform 을 쓴다.
   ≤599 2열(오른쪽 열이 내려감) · 600~1279 3열(가운데 열) · ≥1280 4열(2·4열). 바탕은 흰색 → 옅은 라벤더(히어로 팔레트) → 흰색. */
.fp-sec:has(>.fp-wrap>.fp-board--events){background:linear-gradient(180deg,#fff 0,#f2f1f8 calc(420*var(--u)),#f7f6fb 70%,#fff 100%)}   /* 위 고지문 띠(흰색)와 단차가 없게 흰색에서 시작 */
.fp-board.fp-board--events{grid-template-columns:repeat(2,1fr);gap:calc(26*var(--u)) calc(14*var(--u));padding-bottom:calc(40*var(--u));--fp-board-title-ta:left}
.fp-board--events>li:nth-child(2n){margin-top:calc(40*var(--u));margin-bottom:calc(-40*var(--u))}
.fp-board--events .fp-board__card{height:auto}
.fp-board--events .fp-board__thumb{border:0;border-radius:calc(14*var(--u));aspect-ratio:1/1;background:#f4f4f7;
box-shadow:0 calc(10*var(--u)) calc(26*var(--u)) rgba(58,58,72,.13);transition:box-shadow .35s}
.fp-board--events .fp-board__title{margin-top:calc(11*var(--u));font-size:max(12px,calc(13*var(--u)));font-weight:700;line-height:1.35;text-align:left;transition:color .25s}
.fp-board--events .fp-board__card:hover .fp-board__thumb{box-shadow:0 calc(18*var(--u)) calc(40*var(--u)) rgba(58,58,72,.2)}
.fp-board--events .fp-board__card:hover .fp-board__title{color:#c4568e}
@media (min-width:600px) and (max-width:1279px){
.fp-board.fp-board--events{grid-template-columns:repeat(3,1fr);gap:calc(24*var(--u)) calc(12*var(--u));padding-bottom:calc(34*var(--u))}
.fp-board--events>li:nth-child(2n){margin:0}
.fp-board--events>li:nth-child(3n+2){margin-top:calc(34*var(--u));margin-bottom:calc(-34*var(--u))}
.fp-board--events .fp-board__title{font-size:max(12px,calc(9.5*var(--u)))}
}
@media (min-width:1280px){
.fp-board.fp-board--events{grid-template-columns:repeat(4,1fr);gap:calc(70*var(--u)) calc(40*var(--u));padding-bottom:calc(100*var(--u))}
.fp-board--events>li:nth-child(2n){margin-top:calc(100*var(--u));margin-bottom:calc(-100*var(--u))}
.fp-board--events .fp-board__thumb{border-radius:calc(26*var(--u));box-shadow:0 calc(16*var(--u)) calc(40*var(--u)) rgba(58,58,72,.13)}
.fp-board--events .fp-board__card:hover .fp-board__thumb{box-shadow:0 calc(26*var(--u)) calc(60*var(--u)) rgba(58,58,72,.2)}
.fp-board--events .fp-board__title{margin-top:calc(24*var(--u));font-size:calc(21*var(--u));line-height:1.4}
}
/* ── 35a 분류 거르개 `.fp-filter` (2026-09-30 · `promotion`) ──
   board.py `render_filter`(1쪽 meta `board_filter`·`board_cats`·`board_single`) + fp.js 끝 IIFE. 글자는 원문 거르개 그대로(all·Treatment·surgery)이고
   첫 글자만 화면에서 대문자로 세운다(`text-transform` — 글자는 그대로). 누른 것 = 먹 바탕 흰 글자(aria-pressed) · 호버 = 분홍 테·글자.
   거른 칸은 `hidden` + 목록 뒤로(fp.js) — 다시 나타나는 칸은 `.fp-f-in` 으로 살짝 떠오른다(움직임 줄이기면 없음). */
.fp-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(8*var(--u));margin:0 0 calc(28*var(--u))}
.fp-filter__b{appearance:none;margin:0;padding:calc(8*var(--u)) calc(18*var(--u));border:1px solid #d9d9e3;border-radius:999px;background:#fff;color:var(--c-dark);
font:inherit;font-size:max(12px,calc(13*var(--u)));font-weight:700;line-height:1.2;letter-spacing:.01em;text-transform:capitalize;cursor:pointer;
transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s}
.fp-filter__b:hover{border-color:var(--c-pink);color:#c4568e}
.fp-filter__b[aria-pressed="true"]{background:var(--c-dark);border-color:var(--c-dark);color:#fff;box-shadow:0 calc(6*var(--u)) calc(16*var(--u)) rgba(58,58,58,.18)}
.fp-filter__b:focus-visible{outline:2px solid var(--c-pink);outline-offset:3px}
.fp-board>li[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){
.fp-board>li.fp-f-in{animation:fp-f-in .55s cubic-bezier(.22,.61,.36,1) both}
@keyframes fp-f-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
}
@media (min-width:1280px){
.fp-filter{gap:calc(14*var(--u));margin-bottom:calc(64*var(--u))}
.fp-filter__b{padding:calc(14*var(--u)) calc(36*var(--u));font-size:calc(18*var(--u))}
}