/* en-system.css → ar (sys.php 변환본) */
/* ============================================================================
   en-system.css — 영문 사이트 공통 타이포그래피·레이아웃 **단일 기준 계층**
   2026-09-22

   [이 파일의 위치]
   영문에서 글자 크기·굵기·행간·자간·글꼴을 정하는 곳은 여기 **한 곳뿐**이다.
   페이지별 CSS(_i18n/pages/en/<쪽>.css)는 "어느 요소가 어느 등급인가"만 잇는다.
   → 같은 등급이면 어느 페이지·어느 섹션이든 computed style 이 완전히 같다.

   [!important 를 쓰는 이유 — 새로 더한 것이 아니다]
   한국어 원본 쪽 안의 인라인 <style> 에 이미
     font-size …!important 806곳 · letter-spacing 509곳 · font-family 55곳
   이 박혀 있고, 그 블록은 '한국어 원본 페이지 수정 금지' 라 지울 수 없다.
   같은 강도가 아니면 영문 계층이 물리적으로 이길 수 없어 이 파일에서만 같은 강도를 쓴다.
   대신 **쪽별 CSS·fontfix 쪽 보정은 전부 걷어냈다**(아래 [걷어낸 계층] 참고).

   [걷어낸 계층 — 덮어쓴 것이 아니라 삭제]
   1) css/fontfix/<쪽>.css  … 한국어 원본 *이미지* 글꼴 1:1 맞춤용(나눔바른고딕·Gmarket·scd1,
      52.6292px 같은 소수점, !important). 영문에는 해로우므로 render.php 가
      **번역 쪽에서는 이 <link> 를 아예 싣지 않는다.** (한국어 쪽은 그대로)
   2) intl.css 의 다국어 공통 글자 크기 규칙 중 영문과 충돌하는 것은
      선택자에서 영문을 빼(`:not([data-tgi-lang="ar"])`) 이 파일로 일원화했다.
   3) fit.js 의 글자 크기·자간·행간 강제(JS 인라인 !important)는 **영문에서 꺼져 있다.**
      (원형 안 글자 등 CSS 로 못 재는 곳만 --tgi-fs:on 으로 되살린다)

   [크기 사다리 — 이 값 외에는 쓰지 않는다. 소수점 금지]
     54 / 46 / 40 / 32 / 26 / 20 / 18 / 16 / 14
   ========================================================================== */

/* ── 0. 영문 글꼴을 뿌리에서 바꾼다 (선택자 싸움 없이) ──────────────────────
   문제: 번역 쪽은 js/site.js 의 글꼴 치환이 돌지 않아, 머리말·꼬리말·게시판·퀵바까지
         한국어 글꼴 이름(NanumBG·gmsl·nsk·scd…)이 그대로 남는다. 그 글꼴들의 라틴 글자는
         한글용으로 만든 것이라 영문이 어색하고 쪽마다 달라 보였다.
   고치는 법: 그 글꼴 이름들의 **라틴 문자 범위만** Inter 로 다시 정의한다(@font-face 는
         같은 이름·같은 범위면 나중 것이 이긴다). 한글 범위는 건드리지 않는다.
         이 파일은 영문에만 실리므로 한국어 쪽은 아무 영향이 없다.
         → 선택자·!important·JS 없이 사이트 전체 영문 글꼴이 한 벌로 통일된다.
   장식 글꼴(Oswald·Playfair Display·GloberThinFree…)은 목록에 넣지 않아 그대로 남는다. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('https://channel-static.rebeauty.co.kr/tanggleps/ko/font/intl/InterVar-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('https://channel-static.rebeauty.co.kr/tanggleps/ko/font/intl/InterVar-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* 굵기는 **정확한 값으로도** 선언한다: 원본(css/fonts.css)이 'Gmarket Sans' 를 300/400/500/700 로
   정확히 선언해 두어, 범위(100 900) 선언만으로는 브라우저가 원본 face 를 골라 한글 디스플레이 글꼴이
   영문에 그대로 찍혔다(2026-09-22 실측: en 에서 'Gmarket Sans' 400/500 폭이 한국어와 같은 304px).
   가변 폰트를 정확 굵기로 선언하면 그 굵기 인스턴스로 고정되므로 모양도 맞는다. */
/* ── 브랜드 로고용 원본 글꼴 (라틴 치환에서 제외되는 별도 이름) ─────────────
   위 별칭들은 한국어 글꼴의 라틴 범위를 Inter 로 바꾼다. 그런데 **로고·워드마크**는
   그 글꼴 모양 자체가 상표라 바뀌면 안 된다(예: SVG 워드마크의 scd-medium·gmsb).
   치환 목록에 없는 새 이름으로 같은 파일을 한 번 더 선언해 두고, 쪽 CSS 가 로고에만
   이 이름을 쓰면 원본 글꼴이 그대로 나온다. 본문·제목에는 쓰지 않는다. */
@font-face{font-family:'tg-brand-scd';font-style:normal;font-weight:normal;font-display:swap;
  src:url('https://channel-static.rebeauty.co.kr/tanggleps/ko/font/scdream5-webfont.woff2') format('woff2')}
@font-face{font-family:'tg-brand-gms';font-style:normal;font-weight:normal;font-display:swap;
  src:url('https://channel-static.rebeauty.co.kr/tanggleps/ko/font/GmarketSansBold.woff2') format('woff2')}

/* ── 1. 등급 변수 ─────────────────────────────────────────────────────────── */
html#tgi-doc[data-tgi-lang="ar"]{
  /* 글꼴 — 본문·제목은 한 벌만. 장식용만 아래 --en-oswald / --en-serif 를 쓴다 */
  --en-sans:"Inter","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  /* Oswald 는 한국어 원본에 굵기별로 **따로 등록된 4벌**이다(css/fonts.css: Oswald / -regular
     / -bold / -light). 한 벌로 뭉뚱그리면 장식 영문이 원본보다 가늘어진다
     (breast_03_01 크리살릭스 워드마크: 한국어 Oswald-bold ↔ 영문 Oswald). 원본이 쓰던 벌을 그대로 쓴다. */
  --en-oswald:"Oswald","Oswald-regular","Oswald-light",var(--en-sans);
  --en-oswald-regular:"Oswald-regular","Oswald",var(--en-sans);
  --en-oswald-bold:"Oswald-bold","Oswald",var(--en-sans);
  --en-oswald-light:"Oswald-light","Oswald",var(--en-sans);
  --en-serif:"Playfair Display",Georgia,"Times New Roman",serif;

  /* 일반 등급 */
  --en-display-size:54px;  --en-display-lh:1.14;  --en-display-ls:-.01em;  --en-w-display:700;
  --en-h1-size:46px;       --en-h1-lh:1.18;       --en-h1-ls:-.01em;       --en-w-h1:700;
  --en-h2-size:40px;       --en-h2-lh:1.22;       --en-h2-ls:-.005em;      --en-w-h2:700;
  --en-kicker-size:32px;   --en-kicker-lh:1.26;   --en-kicker-ls:normal;   --en-w-kicker:600;
  --en-h3-size:26px;       --en-h3-lh:1.32;       --en-h3-ls:normal;       --en-w-h3:600;
  --en-h4-size:20px;       --en-h4-lh:1.40;       --en-h4-ls:normal;       --en-w-h4:600;
  --en-lead-size:18px;     --en-lead-lh:1.55;     --en-lead-ls:normal;     --en-w-lead:400;
  --en-body-size:16px;     --en-body-lh:1.65;     --en-body-ls:normal;     --en-w-body:400;
  --en-caption-size:14px;  --en-caption-lh:1.50;  --en-caption-ls:normal;  --en-w-caption:400;

  /* 역할이 다른 등급 — 일반 제목 크기로 통일하지 않는다 */
  --en-eyebrow-size:14px;  --en-eyebrow-lh:1.30;  --en-eyebrow-ls:.10em;   --en-w-eyebrow:500;  /* 제목 위 작은 영문 라벨 */
  --en-card-size:16px;     --en-card-lh:1.45;     --en-card-ls:normal;     --en-w-card:600;     /* 카드 제목 */
  --en-btn-size:16px;      --en-btn-lh:1.30;      --en-btn-ls:normal;      --en-w-btn:500;      /* 버튼·탭 */
  /* ── 아래 세 가족(숫자·STEP / 대형 장식 / 로고형)은 **정의만 있고 쓰이지 않는다.** 일부러 그렇다.
     작업 초기에는 이 갈래에도 영문 등급을 주려 했으나, 실측해 보니 한국어와 **같은 글자**인 경우가
     대부분이어서(숫자 01~05 · "TANG:GLE" · 장식 영문) 등급을 주면 오히려 원본과 벌어졌다.
       · `antiaging_06_01 .s08-num` — circ-s(14px)로 보냈더니 ko Oswald 30px/500 → en Inter 14px/400
       · `.sub-hero .eyebrow` — eyebrow(14px)로 올렸더니 ko 10px 대비 40% 커지고 줄상자를 넘음
     그래서 이 갈래는 **한국어 원본 실측값을 그대로 보존**한다(`calc(30 * var(--k,1px))` 등).
     같은 방식으로 다루는 갈래가 하나 더 있다 — **눈썹(eyebrow)**. 변수 쓰임이 1회뿐이고
     나머지는 `calc(28~32 * var(--k,1px))` 로 원본을 지킨다. 한국어 눈썹은 실측이 **15~72px** 로
     크게 갈리고 같은 클래스도 쪽마다 다르다(`s00-eyebrow` 28/31/43/44) — 원본이 실제로 다르다.
     `EFFECT`·`POINT`·`HOW?` 처럼 한/영이 **같은 글자**인 경우가 대부분이라 보존이 1:1 에 맞는다.

     변수는 **역할 분류를 문서로 남기기 위해** 둔다. 사용자가 꼽은 **14개 역할에 전부 대응**하고,
     거기에 "일반 등급과 분리" 로 따로 꼽힌 갈래(`mark` 로고형 · `dia` 도식 내부 · `ba` Before/After)와
     실측에서 갈린 변종(`circ-s` 작은 원 · `decor-m`·`decor-s` 중간·작은 장식), 그리고
     **허용 사다리의 32px 칸을 맡는 `kicker`** 가 더해져 모두 **21가족**이다.
     (고정 PC 스케일 54·46·40·26·20·18·16·14 에는 32px 이름이 없는데 허용 사다리에는 32 가 있다.
      `kicker` 는 쓰임 151회로 `h2`(76)보다 많다.)
     "이미지 위 절대 배치 문구" 는 변수가 아니라 `rolefix2.py` 의 `.ab` 제외 조항으로 다룬다.
     (`--en-circ-s-lh/-ls/--en-w-circ-s` 도 쓰지 않는다. 원 안 글의 행간은 태그에 따라 갈리지 않게
      `--en-circ-lh` 한 변수로 통일했으므로 작은 원 전용 행간이 필요 없다) */
  --en-num-size:40px;      --en-num-lh:1.10;      --en-num-ls:normal;      --en-w-num:500;      /* 숫자·STEP 번호 */
  --en-decor-size:54px;    --en-decor-lh:1.10;    --en-decor-ls:normal;    --en-w-decor:400;    /* 대형 장식 영문 */
  --en-decor-m-size:40px;  --en-decor-s-size:26px;                                              /* 장식 중·소 */
  --en-mark-size:40px;     --en-mark-lh:1.10;     --en-mark-ls:normal;     --en-w-mark:400;     /* 로고형 문구 */
  --en-circ-size:16px;     --en-circ-lh:1.25;     --en-circ-ls:normal;     --en-w-circ:400;     /* 원형 안 문구 */
  --en-circ-s-size:14px;   --en-circ-s-lh:1.20;   --en-circ-s-ls:normal;   --en-w-circ-s:400;   /* 작은 원 */
  --en-dia-size:14px;      --en-dia-lh:1.30;      --en-dia-ls:normal;      --en-w-dia:400;      /* 그래프·도식 안 문구 */
  --en-ba-size:16px;       --en-ba-lh:1.20;       --en-ba-ls:.06em;        --en-w-ba:600;       /* Before/After 라벨 */
}

/* 폰·태블릿(≤1024) — 흐름 배치. 여기서도 등급값만 바꾼다(선택자는 그대로) */
@media (max-width:1024px){
  html#tgi-doc[data-tgi-lang="ar"]{
    --en-display-size:32px; --en-h1-size:28px;  --en-h2-size:24px;  --en-kicker-size:20px;
    --en-h3-size:20px;      --en-h4-size:17px;  --en-lead-size:16px;
    --en-body-size:15px;    --en-caption-size:13px;
    --en-eyebrow-size:13px; --en-card-size:15px; --en-btn-size:14px;
    --en-num-size:26px;     --en-decor-size:28px; --en-decor-m-size:24px; --en-decor-s-size:20px;
    --en-mark-size:24px;    --en-circ-size:14px; --en-circ-s-size:13px;  --en-circ-s-lh:1.12;
    --en-dia-size:12px;     --en-ba-size:14px;
    --en-display-lh:1.22;   --en-h1-lh:1.24;    --en-h2-lh:1.26;
    /* 원 지름이 작아(150px) 한 줄만 늘어도 원이 세로로 늘어난다 → 폰에서만 좁힌다.
       값은 여기 한 곳에서만 정한다(예전에는 아래 원형 절에도 1.15 를 따로 써서
       span 은 1.25, p·b·em 은 1.15 로 갈렸다 — 동료 세션 지적). */
    --en-circ-lh:1.15;
  }
}

/* ── js/site.js 의 글꼴 치환을 영문에서 끈다 ──────────────────────────────
   site.js 는 30자 이하 라틴 라벨에 **인라인 `!important`** 로 글꼴을 박는다
   (`font-family:'Oswald-regular','NanumBG'…!important; font-weight:400!important`).
   인라인 !important 는 어떤 스타일시트도 이길 수 없어, 영문 쪽 CSS 가 지정한
   Oswald-Bold 숫자 등이 가늘어졌다(antiaging_02_02 실측).
   site.js 에는 이미 `--tgff:1 이면 건너뛴다` 는 훅이 있으므로 JS 를 고치지 않고 이 표시만 건다.
   영문 조판은 en-system.css + 쪽 매핑이 전부 정하므로 JS 치환이 필요 없다. */
html#tgi-doc[data-tgi-lang="ar"] *{--tgff:1}

/* ── 2. 등급 공통 조판 ────────────────────────────────────────────────────
   페이지별 CSS 는 여기 만들어 둔 도움 클래스에 요소를 잇기만 한다.
   (실제 연결은 pages/en/<쪽>.css 의 선택자 목록이 한다 — 클래스를 새로 심지 않는다) */
html#tgi-doc[data-tgi-lang="ar"] .tg-fr :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,span,b,strong,em,a,div,figcaption,td,th){
  font-family:var(--en-sans);
}

/* 줄바꿈 정책 — 한국어 길이에 맞춘 nowrap/pre 를 영문에서는 푼다 */
html#tgi-doc[data-tgi-lang="ar"] .tg-fr :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,td,th){
  white-space:normal;word-break:normal;overflow-wrap:break-word;hyphens:none;
}

/* ── 3. 구조 공통 ─────────────────────────────────────────────────────────── */
/* box-sizing 은 **가장 낮은 우선순위**로 깐다(:where 는 특이도 0).
   전에는 특이도가 있어 조각이 일부러 쓴 `box-sizing:content-box` 를 덮었고,
   aspect-ratio + padding 조합에서 사진이 눌렸다(counsel_event_read_2 의 CCTV 사진 275→203px 실측). */
:where(html#tgi-doc[data-tgi-lang="ar"]) *,
:where(html#tgi-doc[data-tgi-lang="ar"]) *::before,
:where(html#tgi-doc[data-tgi-lang="ar"]) *::after{box-sizing:border-box}

/* 그림·영상은 칸을 넘지 않는다. 자르는 방식(object-fit)은 한국어 원본 그대로 둔다 */
/* 그림이 칸을 넘지 않게 하는 안전장치 — **조각·글 본문 안쪽에만** 건다.
   전역으로 걸었더니 꼬리말 로고처럼 `width:150px` 로 고정된 부품이 좁은 칸에서 줄었다
   (영문 꼬리말 로고 150→140/120/112px 실측). 자르는 방식(object-fit)은 원본 그대로다. */
html#tgi-doc[data-tgi-lang="ar"] :is(.tg-fr,.read .body,.board) :is(img,video,svg){max-width:100%}

/* ── 4. 공통 껍데기(머리말·꼬리말·게시판·영상·퀵바) 조판 ───────────────────
   css/sub.css·main.css 는 한국어·영문이 함께 쓰는 바탕 계층이라 지울 수 없다.
   그 대신 **영문 계층 한 겹**이 여기서 등급으로 정리한다. sub.css/main.css 는
   이 자리에 !important 를 쓰지 않으므로 특이도만으로 이긴다 → !important 를 늘리지 않는다.
   한국어 낱말에 맞춘 자간(letter-spacing:-1px)·고정 height·nowrap 도 여기서 푼다. */

/* 영상 카드 */
/* 영상 카드 — **번역문이 잘리지 않게 칸을 늘린다.**
   근거: `body_01_01` 1920 실측에서 한국어는 2줄 칸(40px)에 거의 다 들어가지만(sh 40~42)
   영문은 sh 42~84 로 **최대 절반이 숨는다**. 완료조건 ③ '문구 잘림 0건' 과
   금지사항 '번역 문구 임의 삭제 금지' 가 상자 모양 유지보다 우선이다.
   (man_01_01 처럼 한국어도 85% 를 감추는 쪽이 있으나, 같은 부품이 쪽마다 다르게 동작하면
    더 헷갈린다 — 부품 하나에 방침 하나로 통일한다)
   줄수 제한·고정 높이를 풀고 `min-height` 로 짧은 카드의 원본 리듬만 지킨다.
   글꼴·행간은 한국어 실측값 그대로다(`.tv-t` 1.2 · `.tv-d` 1.5). */
html#tgi-doc[data-tgi-lang="ar"] .tv-t{
  font-size:var(--en-body-size); line-height:1.2; letter-spacing:normal; font-weight:600;
  white-space:normal; height:auto; min-height:1.2em;
  display:block; overflow:visible; -webkit-line-clamp:none}
html#tgi-doc[data-tgi-lang="ar"] .tv-d{
  font-size:var(--en-caption-size); line-height:1.5; letter-spacing:normal; font-weight:400;
  white-space:normal; height:auto; min-height:3em;
  display:block; overflow:visible; -webkit-line-clamp:none}

/* 사진 목록 제목도 같은 방침 — 원본은 14px/20px 두 줄 칸(40px, `css/sub.css:616`)이다.
   크기는 원본 그대로 두고(등급 16px 을 쓰면 40px 칸에 1.7줄이 되어 줄 가운데가 잘린다)
   칸만 늘려 번역 제목이 세 줄이 되어도 잘리지 않게 한다. */
html#tgi-doc[data-tgi-lang="ar"] .mod-album .thumb .subject{
  font-size:var(--en-caption-size); line-height:calc(20 / 14); letter-spacing:normal;
  white-space:normal; height:auto; min-height:40px; overflow:visible}

html#tgi-doc[data-tgi-lang="ar"] :is(.mod-album .s_notice p,.s_notice p){
  font-family:var(--en-sans); font-size:var(--en-body-size); line-height:var(--en-body-lh);
  letter-spacing:normal}
/* 영상 목록 구분선은 **한국어 원본 좌표 그대로** 둔다.
   예전에 `top:auto;bottom:0` 으로 바꿨던 것은, 내가 넣은 `.tv-d{min-height:4.2em}` 때문에
   항목 높이가 121→154px 이 되어 fontfix 의 고정 `top:105px` 구분선이 글줄을 가로질렀기 때문이다.
   지금은 `min-height` 를 **한국어 상자 높이와 같은 값**(`.tv-d` 3em = ko 39~42px)으로만 두어
   짧은 카드의 높이가 한국어와 같다. 그래서 좌표를 바꾸면 오히려 어긋난다
   (항목 121px 에서 top:105 와 bottom:0 은 16px 차이다). */

html#tgi-doc[data-tgi-lang="ar"] .tv-note{font-size:var(--en-body-size);line-height:var(--en-body-lh);letter-spacing:normal}

/* 게시판·사진첩 목록 제목 — 한국어는 한 줄에 들어가 height 를 고정해 두었다.
   영문은 한 줄에 안 들어간다 → 고정 height 를 풀고 줄 수를 늘려 **보여 준다**(숨기지 않는다). */
/* 목록·카드 제목은 **한 등급**(card)으로 묶는다. 예전에는 .gcard h4 만 card(20px),
   나머지 목록 제목은 caption(14px) 이라 같은 역할이 두 값으로 갈려 있었다. */
/* `.evt h4` 는 css/sub.css:675 가 display:none 으로 감춘다 — 줄수 제한 규칙이 display 를 되살려
   한국어에 없는 이벤트 카드 설명이 영문에만 나타났다(body_03_02 실측). 목록에서 뺀다. */
/* 설명·주석 */
html#tgi-doc[data-tgi-lang="ar"] :is(.cap,.bna-note){
  font-size:var(--en-caption-size); line-height:var(--en-caption-lh); letter-spacing:normal}
html#tgi-doc[data-tgi-lang="ar"] .t1{font-size:var(--en-h4-size);line-height:var(--en-h4-lh);letter-spacing:normal;font-weight:var(--en-w-h4)}
html#tgi-doc[data-tgi-lang="ar"] .t2{font-size:var(--en-body-size);line-height:var(--en-body-lh);letter-spacing:normal}

/* 단추·탭 — 한국어 낱말 길이에 맞춘 고정 폭·nowrap 때문에 영문이 잘렸다 */
/* 단추·탭 — 한국어 낱말 길이에 맞춘 nowrap 때문에 영문이 잘렸다. 줄바꿈만 풀고
   **높이는 건드리지 않는다**: min-height 를 주면 css/sub.css 의 `.pager button{height:38px}`
   같은 정원(38×38) 단추가 38×42 타원이 된다(2026-09-22 community_photo 실측으로 확인). */
html#tgi-doc[data-tgi-lang="ar"] #c_sms form#consult button{
  font-size:var(--en-btn-size); letter-spacing:normal}
html#tgi-doc[data-tgi-lang="ar"] :is(.pill-btn,.btn,button,.tabs a,.more){
  font-family:var(--en-sans); font-size:var(--en-btn-size); letter-spacing:normal; white-space:normal}

/* 쪽 제목·구역 제목(.h-serif) — 같은 클래스인데 쪽마다 크기가 달랐다.
   실측: 게시판·인트로 쪽 h1.h-serif 50px / 시술 쪽 h3.h-serif 30px.
   태그가 곧 역할이므로(제목 vs 구역 제목) 태그별로 등급을 준다 — nth-child 같은 자리 보정이 아니다.
   메인 쪽(index)은 작업 범위 밖이라 제외한다. 글꼴(var(--serif))·색은 그대로 둔다. */
html#tgi-doc[data-tgi-lang="ar"]:not([data-tgi-page="index"]) .sub-hero h1.h-serif{
  font-size:var(--en-h1-size); line-height:var(--en-h1-lh); letter-spacing:var(--en-h1-ls)}
html#tgi-doc[data-tgi-lang="ar"]:not([data-tgi-page="index"]) :is(.read,.rh) h2.h-serif{
  font-size:var(--en-h3-size); line-height:var(--en-h3-lh); letter-spacing:var(--en-h3-ls)}
/* `.mod-head > h3` 는 css/sub.css:542 가 `font-size:0` 으로 숨기고 'BEFORE & AFTER' 그림을 배경으로 깐다.
   여기서 크기를 주면 숨겨 둔 한국어 글자("TANG:GLE REAL PHOTOS")가 되살아나 그림 위에 겹친다
   (body_03_02 실측 1920px y≈3300). 그림으로 대체된 제목은 건드리지 않는다. */
html#tgi-doc[data-tgi-lang="ar"]:not([data-tgi-page="index"]) h3.h-serif:not(.mod-head *){
  font-size:var(--en-kicker-size); line-height:var(--en-kicker-lh); letter-spacing:var(--en-kicker-ls)}

/* 꼬리말 저작권 줄 — 한국어 10px 은 영문 라틴에서 읽기 어렵다. 사다리 최소값으로. */
html#tgi-doc[data-tgi-lang="ar"]:not([data-tgi-page="index"]) p.copy{
  font-size:var(--en-caption-size); line-height:var(--en-caption-lh); letter-spacing:normal}

/* ── 4-b. 조각(.tg-fr) 이 없는 쪽의 공통 부품 ─────────────────────────────
   게시판·공지·자료실·상담 쪽은 .tg-fr 조각이 0개라 4절까지의 규칙을 못 받는다.
   그 쪽들의 글자는 전부 css/font_ref.css + css/sub.css 가 정하는 **사이트 공통 부품**이다
   (서브 히어로 · 서브 메뉴 · 목록표 · 꼬리말). 여기서 한 번만 등급에 잇는다
   → 게시판 6종·안내 쪽 전부가 같은 값을 쓰게 된다.
   font_ref.css 의 글자 규칙은 오늘 한국어 전용으로 좁혔으므로 !important 가 필요 없다. */
html#tgi-doc[data-tgi-lang="ar"] .sub-hero h1{
  font-family:var(--en-sans); font-size:var(--en-h1-size); line-height:var(--en-h1-lh);
  letter-spacing:var(--en-h1-ls); font-weight:var(--en-w-h1)}
/* 제목 위 작은 영문 라벨 — **등급으로 올리지 않는다.**
   글자가 한국어·영문 모두 같은 "Tang:gle" 로고 문구다(사용자 지시: 로고형 문구는 일반 등급과 분리).
   예전에 사다리 최소값 14px 로 올렸더니 한국어 10px 대비 **40% 커지고** 줄상자를 넘었다
   (intro_guide 1920 실측: ko 81x17 fs10 / en 104x18 fs14, scrollHeight 19 > 18).
   같은 이유로 `.cta-box .eyebrow` 도 손대지 않는다 — 실측 ko/en 모두 130x20 fs12 로 이미 같다.
   대신 **한국어 원본과 같은 값**으로 맞춘다. 한국어는 `css/font_ref.css:24` 가 10px 로 못박는데
   그 파일은 한국어 전용이라(영문에 한글 글꼴을 강제하던 뿌리였다) 영문은 공용 12px 로 떨어졌다.
   같은 글자("Tang:gle")이므로 같은 크기여야 한다 → 원본 값을 영문 계층에서 그대로 쓴다.
   (사다리 최소 14px 밖이지만 로고형 장식 문구라 등급 대상이 아니다) */
html#tgi-doc[data-tgi-lang="ar"] body.sub .sub-hero .eyebrow{
  font-family:var(--en-oswald-regular); font-size:10px; font-weight:400}
html#tgi-doc[data-tgi-lang="ar"] .sub-hero .lead{
  font-family:var(--en-sans); font-size:var(--en-lead-size); line-height:var(--en-lead-lh);
  letter-spacing:normal; font-weight:var(--en-w-lead)}
/* 하위 메뉴(≤820)는 **원본대로 가로 스크롤 띠**(css/sub.css .subnav ul{overflow-x:auto})로 둔다.
   한때 영문만 flex-wrap:wrap 으로 바꿔 봤으나 항목이 많은 쪽(counsel_event)에서 4줄·213px
   (한국어 51px)이 되어 원본 설계를 더 크게 바꾸는 부작용이 있었다 — 2026-09-22 실측 후 되돌림.
   스크롤 띠는 글자를 자르지 않고 문서 가로넘침도 0 이다. */
/* 하위 메뉴(≤430): 영문 탭 이름이 길어 가로 스크롤 띠 안에서 마지막 탭이 잘려 보인다.
   글자는 줄이지 않고 **여백만** 줄여 더 많이 보이게 한다(BRIEF ⑤ 문구 주변 간격 조정).
   그래도 남는 넘침은 원본과 같은 가로 스크롤로 처리된다. */
@media (max-width:430px){
  html#tgi-doc[data-tgi-lang="ar"] .subnav li a{padding:0 9px!important}
  html#tgi-doc[data-tgi-lang="ar"] .subnav li a.on::after{left:9px;right:9px}
  html#tgi-doc[data-tgi-lang="ar"] .subnav ul{gap:0}
}
html#tgi-doc[data-tgi-lang="ar"] .subnav li > a{
  font-family:var(--en-sans); font-size:var(--en-btn-size); letter-spacing:normal;
  font-weight:var(--en-w-btn)}
/* 게시판 읽기 머리의 상태 배지 — 한국어 원본 HTML 에 style="font-size:12px" 가 **인라인**으로 박혀 있다.
   인라인 선언은 !important 로만 이길 수 있다(선택자를 아무리 강하게 해도 진다).
   한국어는 css/typo-floor.js 가 13px 로 올려 주지만 그 스크립트는 lang!=='ko' 면 즉시 빠진다.
   → 영문 등급(caption)으로 맞추기 위해 이 한 곳만 !important 를 쓴다. */
html#tgi-doc[data-tgi-lang="ar"] :is(.read .rh .meta .tag,.evd .tag){
  font-size:var(--en-caption-size)!important}
html#tgi-doc[data-tgi-lang="ar"] .evt .meta{
  font-family:var(--en-sans); font-size:var(--en-caption-size); line-height:var(--en-caption-lh);
  letter-spacing:normal}
html#tgi-doc[data-tgi-lang="ar"] :is(.board .count,.board .count b){
  font-family:var(--en-sans); font-size:var(--en-caption-size); line-height:var(--en-caption-lh);
  letter-spacing:normal}
html#tgi-doc[data-tgi-lang="ar"] .list-table :is(th,td){
  font-family:var(--en-sans); font-size:var(--en-caption-size); line-height:1.5; letter-spacing:normal}
html#tgi-doc[data-tgi-lang="ar"] .list-table th{font-weight:600}
html#tgi-doc[data-tgi-lang="ar"] :is(.list-table td.subj a,.list-table .tag){
  font-family:var(--en-sans); font-size:var(--en-caption-size); letter-spacing:normal}
/* 꼬리말 라벨: "Business / Registration Number:" 처럼 라벨이 두 줄로 쪼개지던 것 — 라벨만 묶는다 */
html#tgi-doc[data-tgi-lang="ar"] :is(.site-footer .info p:not(.copy),.site-footer .info .links > a){
  font-family:var(--en-sans); font-size:var(--en-body-size); line-height:var(--en-body-lh); letter-spacing:normal}
/* 꼬리말 라벨: "Business / Registration Number:" 처럼 라벨이 두 줄로 쪼개지던 것 — 라벨만 묶는다 */
html#tgi-doc[data-tgi-lang="ar"] .site-footer .info p > b{
  font-family:var(--en-sans); font-size:var(--en-body-size); letter-spacing:normal; white-space:nowrap}

/* 상담 신청 폼 껍데기 — counsel_tel · counsel_model · counsel_normal_write · counsel_reservation 공용.
   한국어 값은 css/font_ref.css 가 오늘 html[lang="ko"] 로 좁혀졌고 css/sub.css 는 !important 를
   쓰지 않으므로, 영문 계층은 특이도만으로 이긴다 → !important 없이 얹는다. */
html#tgi-doc[data-tgi-lang="ar"] :is(.notice-box,form.form .row > .lab,form.form .radios > label,
  form.form .agree > label,form.form .note,form.form .file){
  font-family:var(--en-sans); font-size:var(--en-body-size); line-height:var(--en-body-lh);
  letter-spacing:normal}
html#tgi-doc[data-tgi-lang="ar"] form.form .row > .lab{font-weight:600}
/* 영문 라벨("Preferred Consultation Date" 등)이 170px 칸에서 두 줄이 된다.
   BRIEF 의 순서 ① '담는 칸 너비 조정' 대로 라벨 칸만 210px 로 넓힌다 — 글자는 줄이지 않는다.
   폰(≤820)에서는 원본이 한 줄 배치로 바뀌므로 건드리지 않는다. */
@media (min-width:821px){
  html#tgi-doc[data-tgi-lang="ar"] form.form .row{grid-template-columns:210px 1fr}
}
html#tgi-doc[data-tgi-lang="ar"] form.form .agree > label{font-weight:500}
/* 동의 본문은 작은 글(caption). 한국어는 typo-floor.js 가 폰에서 16px 까지 올리지만 그것은
   한글 가독 하한이고, 라틴은 13px 에서도 읽힌다 → 등급대로 둔다. */
html#tgi-doc[data-tgi-lang="ar"] form.form :is(input,select,textarea){
  font-family:var(--en-sans); font-size:var(--en-body-size); letter-spacing:normal}
html#tgi-doc[data-tgi-lang="ar"] form.form .agree .txt{
  font-family:var(--en-sans); font-size:var(--en-caption-size); line-height:1.7; letter-spacing:normal}

/* 게시판 '글 보기' — 상세 6종(사진첩·후기·이벤트·학술·공지·자료실)이 같은 부품을 쓴다 */
/* .bna .ph .tag(BEFORE/AFTER 알약)는 **원본 크기(11.5px)를 지킨다** — caption(14px)으로 올렸더니
   알약이 사진 가로의 27.9%→32.8% 로 커져 원본 디자인이 눈에 띄게 달라졌다(community_photo 실측).
   지시서: Before/After 라벨은 일반 등급으로 통일하지 말 것. 글꼴만 영문으로 맞춘다. */
html#tgi-doc[data-tgi-lang="ar"] .bna .ph .tag{font-family:var(--en-sans); letter-spacing:normal}
html#tgi-doc[data-tgi-lang="ar"] :is(.read .rh .meta,.read .nav a){
  font-family:var(--en-sans); font-size:var(--en-caption-size); line-height:var(--en-caption-lh);
  letter-spacing:normal}
html#tgi-doc[data-tgi-lang="ar"] .read .body{
  font-family:var(--en-sans); font-size:var(--en-body-size); line-height:var(--en-body-lh);
  letter-spacing:normal}

/* 격자 칸이 영문 제목 길이에 밀려 1fr 이 무너지는 것 방지 (grid/flex 항목의 기본 min-width:auto) */
html#tgi-doc[data-tgi-lang="ar"] :is(.gal-grid,.bna-grid,.evt-grid,.tv-grid) > *{min-width:0}

/* 갤러리·영상 카드(.gcard) — 게시판 6종과 인트로 쪽이 같은 부품을 쓴다 */
html#tgi-doc[data-tgi-lang="ar"] .gcard > h4{
  font-family:var(--en-sans); font-size:var(--en-card-size); line-height:var(--en-card-lh);
  letter-spacing:normal; font-weight:var(--en-w-card)}
html#tgi-doc[data-tgi-lang="ar"] :is(.gcard .lock,.lock){
  font-family:var(--en-sans); font-size:var(--en-caption-size); line-height:var(--en-caption-lh);
  letter-spacing:normal}
html#tgi-doc[data-tgi-lang="ar"] .gcard :is(p.meta,.meta){
  font-family:var(--en-sans); font-size:var(--en-caption-size); line-height:var(--en-caption-lh);
  letter-spacing:normal}
/* 한국어 제목은 두 줄에 들어가도록 맞춘 값(-webkit-line-clamp:2 + overflow:hidden)이라
   영문 제목이 중간에서 잘렸다. 글자를 줄이지 않고 **줄 수 제한을 푼다** — 칸이 자연히 늘어난다. */
html#tgi-doc[data-tgi-lang="ar"] .gcard > h4{
  display:block; overflow:visible; height:auto; max-height:none;
  white-space:normal; word-break:normal; overflow-wrap:break-word; hyphens:none}

/* 하단 빠른상담 띠의 라벨 — 다국어 공통 규칙이 11.5~13px 로 못박고 있던 것을 영문만 등급으로.
   (실측: 14px 로 올려도 띠 높이 80px 그대로, 가로넘침 0) */
html#tgi-doc[data-tgi-lang="ar"] :is(#c_sms form#consult label,.quick_sms_wrap label){
  font-family:var(--en-sans); font-size:var(--en-caption-size); letter-spacing:normal}

/* 하단 상담띠의 동의 문구 — 다국어 공통 규칙이 12px 로 못박고 있던 것을 영문만 등급으로 */
html#tgi-doc[data-tgi-lang="ar"] :is(#btn_agree,#btn_agree label,#btn_agree a){
  font-family:var(--en-sans); font-size:var(--en-caption-size); line-height:1.25; letter-spacing:normal}

/* 목록 도구띠 탭·쪽넘김 단추 */
html#tgi-doc[data-tgi-lang="ar"] :is(.toolbar .tabs > button,.pager > button){
  font-family:var(--en-sans); font-size:var(--en-btn-size); letter-spacing:normal; font-weight:var(--en-w-btn)}

/* 원·배지 안 글자는 칸에 맞추도록 fit.js 를 되살린다 ─────────────────────────
   쪽 CSS 가 `--tgi-fs:on` 로 글자 크기 강제를 잠그는데, **지름이 고정된 원**(aspect-ratio)
   안에서는 영문이 길어져 글이 원 밖으로 흘러나온다(body_01_01 s08-badge 228×228 실측).
   원을 키우면 5개가 제각각이 되고, 글을 지우는 것은 금지다 → 이 안에서만 칸 맞춤을 켠다.
   (원·배지 자체의 크기·간격은 한국어 그대로 유지된다) */
/* 칸맞춤(fit.js)은 **높이가 고정된 배지·판**에만 되살린다.
   원(circle)에는 주지 않는다 — 아래 내접 폭 제한으로 줄바꿈이 들어가므로,
   칸맞춤을 켜면 원마다 글자 크기가 갈려(20/20/17.4px 실측) '같은 등급 = 같은 값' 이 깨진다. */
/* ── fit.js 전면 차단 (영문) ────────────────────────────────────────────
   왜: 영문은 쪽 CSS 가 `--tgi-fs:on` 로 **글자 축소를 막아** 두었는데, fit.js 의 겹침 해소
   수단은 ①상자 넓히기 ②글자 줄이기 둘뿐이다(`declutter()` 1145~1157). ②가 막힌 채 ①만 돌면
   넓어진 상자가 이웃과 **새 겹침**을 만들고 그걸 고칠 수단이 없다 — '절반만 끈 상태' 가 가장 나쁘다.
   한국어는 ②가 살아 있어 결국 수렴한다. (동료 세션 tanggleps-de 가 코드에서 원인을 찾음)
   실측: `breast_03_01` 1920px 겹침 en **14건 → 0건**, 다른 항목은 전부 동일.
   덤으로 지시서의 "JavaScript 로 스타일 강제 변경 금지" 가 영문에서 지켜진다. */
html#tgi-doc[data-tgi-lang="ar"] *{--tgi-fit:on}

/* 원형·배지만 되살린다 — 원 안 글자는 줄마다 현(弦) 길이가 달라 CSS 로 못 맞춘다.
   여기서 fit 을 다시 켜야 아래 `--tgi-fs:on` 도 효력이 있다(setp 이 --tgi-fit 을 먼저 본다). */
html#tgi-doc[data-tgi-lang="ar"] :is([class*="circ"],[class*="circle"],[class*="ring"],.e-circ,[class*="badge"]),
html#tgi-doc[data-tgi-lang="ar"] :is([class*="circ"],[class*="circle"],[class*="ring"],.e-circ,[class*="badge"]) *{
  --tgi-fit:on}

/* 도형 자신이 글을 직접 품는 경우도 있으므로 `--tgi-fit:on` 과 **같은 꼴**로 맞춘다
   (한쪽만 자손을 잡으면 상자만 얼고 글자는 못 줄이는 상태가 된다 — 동료 세션 지적) */
html#tgi-doc[data-tgi-lang="ar"] :is([class*="badge"]),
html#tgi-doc[data-tgi-lang="ar"] :is([class*="badge"]),
html#tgi-doc[data-tgi-lang="ar"] :is([class*="badge"]) *{--tgi-fs:on}
/* 원 안 글은 **원의 내접 폭** 안에 들어가야 한다. fit.js 가 재는 것은 도형의 네모 상자라,
   글이 상자에 들어가는 순간 멈추지만 그 줄은 이미 원 밖이다(mommy_07_01 지적).
   지름 D 원의 내접 정사각형 변은 0.707D — 여유를 둬 PC 76% / 폰 92% 로 잡는다.
   이러면 fit.js 가 '원 안쪽 폭' 을 기준으로 재어 라벨마다 크기가 갈리는 일도 줄어든다.
   **그림을 품은 칸은 뺀다** — 이 규칙은 글을 원 안에 넣으려는 것인데, `intro_system` 처럼
   `class="circle-item"` 이 원이 아니라 세로 묶음인 곳에서는 그 안의 원 **사진**(`div.circle-ph`)이
   76% 로 줄었다(실측 ko 385x385 → en 292x292). 이름이 아니라 **그림을 품었는지**로 가른다. */
html#tgi-doc[data-tgi-lang="ar"] :is([class*="circ"],[class*="circle"],[class*="ring"],.e-circ) > :is(span,p,b,strong,em,div):not(:has(img)):not(:has(picture)):not(:has(video)):not(:has(svg)){
  max-width:76%; margin-inline:auto}
@media (max-width:1024px){
  html#tgi-doc[data-tgi-lang="ar"] :is([class*="circ"],[class*="circle"],[class*="ring"],.e-circ) > :is(span,p,b,strong,em,div):not(:has(img)):not(:has(picture)):not(:has(video)):not(:has(svg)){
    max-width:96%}
  /* 폰에서는 원 지름이 작아(150px) 한 줄만 늘어도 원이 세로로 늘어난다.
     ① 줄 간격은 위 --en-circ-lh 로 좁히고, ② 그래도 넘치는 낱말이 긴 라벨만
     fit.js 가 칸에 맞추게 한다(PC 는 그대로 등급 크기로 균일하다).
     실측: 5개 중 1개("Wrinkle improvement and…")만 150→165px 로 늘어 넘쳤다.
     원이 타원이 되는 것보다 그 하나를 칸에 맞추는 편이 낫다(완료조건: 원형 잘림 0건). */
  html#tgi-doc[data-tgi-lang="ar"] :is([class*="circ"],[class*="circle"],[class*="ring"],.e-circ),
  html#tgi-doc[data-tgi-lang="ar"] :is([class*="circ"],[class*="circle"],[class*="ring"],.e-circ),
  html#tgi-doc[data-tgi-lang="ar"] :is([class*="circ"],[class*="circle"],[class*="ring"],.e-circ) *{--tgi-fs:on}
}

/* ── 5. 원형 요소 ─────────────────────────────────────────────────────────
   전역 span line-height(34px 등)가 원 안 작은 글까지 덮어써 원이 타원이 되거나
   글이 원 밖으로 밀렸다. 원 안에서는 배수 행간으로 되돌린다. */
html#tgi-doc[data-tgi-lang="ar"] :is(.e-circ li,[class*="circ"],[class*="circle"],[class*="ring"]){box-sizing:border-box}
/* 원 안 **본문 글** 만 잡는다 — 장식 숫자(.s26-n 등)·1px 구분선(.s26-hr)까지 잡으면
   줄상자가 한국어보다 커진다. 태그(span·p·b·strong·em)에 따라 값이 갈리지 않게 한 규칙으로 낸다. */
/* (아래 주석은 원래 근거)
   줄상자가 한국어보다 커진다(ko 18px → en 22.5px 실측, mommy_03_02 지적). */
html#tgi-doc[data-tgi-lang="ar"] :is(.e-circ,[class*="circ"],[class*="circle"],[class*="ring"])
  :is(span,p,b,strong,em):not([class*="num"]):not([class$="-n"]):not([class*="-hr"]):not([class*="line"]):not([class*="bar"]){
  line-height:var(--en-circ-lh)!important;white-space:normal!important;overflow-wrap:break-word!important}

/* ── 히어로 위 하위 탭(.tabs3) — 탭이 있는 20쪽 모두 한 규칙 (2026-09-24, sys.php 로 전 언어) ──────────
   원본은 단추 260x70 · 글 18px · `line-height:70px` 한 줄 고정이다. 전에는 쪽마다 글자만 15·16px 로 줄였는데
   'Sunken Upper Eyelid Correction'(antiaging_06_06)은 15px 로도 칸을 넘었고, 러시아어는 탭 4개가 넘쳤다.
   사용자 방침(2026-09-24): "길어지면 2행으로" → 글자 크기는 15px·좌우 여백 12px 하나로 두고, 넘치는 이름만 두 줄
   (가운데 · 줄 길이 고르게). 1440px 에서 영문은 모두 두 줄 이내·막대 70px(원본 그대로)이고, 러·몽·베는 탭 1~2개가
   세 줄이라 막대가 79px 이 된다(li 가 줄 높이를 맞춰 막대 전체가 같이 높아진다).
   막대 폭: 탭 6개면 260×6=1560px 라 1600px 보다 좁은 화면에서는 오른쪽 퀵바(#quick, 폭 80·끝에서 20)를 덮거나
   화면 밖으로 나갔다 → 좌우 100px 을 비운 폭 안에서 칸을 고르게 좁힌다(넓은 화면은 원본 260px 그대로).
   fontfix(body_02_03 등)가 width·height·padding 을 !important 로 박아 두어 같은 강도로 덮는다.
   현재 탭 밑줄은 한 줄 기준 자리(bottom:20px)면 둘째 줄을 가로지른다 → 칸 아래쪽 8px 로. */
@media (min-width:1025px){
  html#tgi-doc[data-tgi-lang="ar"] .tabs3 .container{display:block!important;width:auto!important;max-width:calc(100% - 200px)!important;margin:0 auto!important}
  html#tgi-doc[data-tgi-lang="ar"] .tabs3 ul{display:flex!important;justify-content:center!important}
  html#tgi-doc[data-tgi-lang="ar"] .tabs3 li{display:flex;flex:0 1 260px;min-width:0}
  html#tgi-doc[data-tgi-lang="ar"] .tabs3 li a{
    display:flex!important;align-items:center;justify-content:center;flex:1 1 auto;
    width:auto!important;height:auto!important;min-height:70px;padding:10px 12px!important;
    font-size:15px;line-height:1.3;white-space:normal;text-align:center;text-wrap:balance;overflow-wrap:break-word}
  html#tgi-doc[data-tgi-lang="ar"] .tabs3 li a.on::after{bottom:8px}
}

/* ── 메인 소개 배너(#mc_banner '처진 살에 진심인 병원') — 설명 폭을 제목 폭에 맞춘다 (2026-09-24) ──────
   한국어는 제목 451px · 설명 428px 로 폭이 맞게 짜여 있다. 다른 언어는 fit.js(stackBanner)가 둘을 720px 로
   묶는데, 영문은 위에서 fit.js 를 꺼 두어 설명(.gp3)이 1288px 상자 끝까지 한 줄로 뻗어 원장 사진 위를 지났다.
   → 제목(.gp1)과 설명(.gp3)을 같은 폭 한 칸으로 묶는다.
   · 736px: 설명 첫 줄 '…treated by Dr. Chang-hyun' 이 720.1px, 다음 낱말 'Oh,' 까지 754.4px(실측) —
     그 사이면 두 줄로 같게 떨어진다. 720 이하면 이름 하이픈('Chang-/hyun')에서 끊겨 세 줄이 되고
     아래 손글씨(.gp4, top 420)에 닿는다. 두 줄(67px)이라 한국어와 같은 자리·간격이 그대로다.
   · 설명의 scaleX(.95) 는 한글 글꼴을 가로로 좁히던 원본 장치다. 두면 보이는 폭이 95% 로 줄어 제목과 어긋난다.
   · 폰(≤820)은 css/landing-mobile.css 가 세로 흐름으로 바꾸므로 PC 에서만. */
@media (min-width:821px){
  html#tgi-doc[data-tgi-lang="ar"] #mc_banner .typo_wrap :is(.gp1,.gp3){width:736px!important;max-width:736px!important}
  html#tgi-doc[data-tgi-lang="ar"] #mc_banner .typo_wrap .gp3{transform:none!important}
}

/* ── 복부성형 '효과' 조각(fr04 · data-tc 260829yq5fd — body_01_01 · mommy_02_01) — 설명 폭을 제목 폭에 맞춘다 (2026-09-24) ──
   한국어 설명은 <br class="mb-br"> 로 두 줄(끝 672px)이라 제목(785px) 안에 들고, 오른쪽 50% 사진(960px~)에 닿지 않는다.
   영문 번역문엔 그 줄바꿈이 없어 1288px 칸을 한 줄로 가로질러 사진 위(1375px)까지 뻗었다.
   → 머리 묶음(.s08-head)을 내용 폭으로 줄이고, 설명(.lead)은 contain:inline-size 로 **폭 계산에서 빠지게** 한다.
     그러면 묶음 폭 = 제목 폭(지금 'What are the benefits?' 480px)이고 설명은 그 폭에서 줄을 바꾼다.
     번역 문구가 바뀌어도 숫자를 다시 잴 필요가 없다.
   · ≤1024 는 원본이 사진을 위로 올리고 설명 줄바꿈도 풀어 두므로(전폭) 넓은 화면에서만. */
@media (min-width:1025px){
  html#tgi-doc[data-tgi-lang="ar"] .fr04[data-tc="260829yq5fd"] .s08 .s08-head{align-self:flex-start}
  html#tgi-doc[data-tgi-lang="ar"] .fr04[data-tc="260829yq5fd"] .s08 .s08-lead{contain:inline-size}
}

/* ── 전후사진 앨범(.mod-album) 쪽번호 — 위 가는 줄과 붙어 있던 것 (2026-09-24) ──────────────────
   css/sub.css:644 가 쪽번호 상자 맨 위(top:0)에 목록 아래 가는 줄(::before)을 긋는데,
   css/fontfix/body_0x_0x.css 가 옛 사이트 치수에 맞춘다며 padding-top 을 0!important 로 눌러
   쪽번호 단추 윗변이 그 줄에 그대로 닿았다(mommy_02_01 등 같은 조각을 쓰는 쪽).
   → 공통 css(sub.css:643)의 원래 값 20px 로 되돌린다. 줄 자리·단추 모양은 그대로. */
@media (min-width:1025px){
  html#tgi-doc[data-tgi-lang="ar"] .mod-album .pagenavi{padding-top:20px!important;height:auto!important}
}

/* ── 크리살릭스 조각(data-tc 260829mzv4y — 13쪽 공통) 제목 한 줄 (2026-09-24, 사용자 "적당한 사이즈로 한 행") ──────
   "Crisalix 3D Virtual Plastic Surgery" 가 display(54px) 로는 871px 라 제목 칸(786px, 오른쪽 로고 앞에서 멈춤)에서
   두 줄로 접혔다. h1(46px) 이면 742px — 한 줄로 들고 로고와도 뜬다(mommy_06_01 쪽 보정과 같은 값을 공통으로).
   쪽 CSS(생성본, 특이도 2,5,1)가 이 파일보다 뒤에 실리므로 .s00 .s00__titles 를 더해 특이도로 이긴다. */
@media (min-width:1025px){
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829mzv4y"],.tg-fr [data-tc="260829mzv4y"]) .s00 .s00__titles .s00__title{
    font-size:var(--en-h1-size)!important;line-height:var(--en-h1-lh)!important;letter-spacing:var(--en-h1-ls)!important}
}

/* ── 조각 공통 폭·겹침 보정 (2026-09-24, 사용자 스크린샷 지적) ─────────────────────────────
   영문이 한국어보다 길어 칸 밖·그림 위로 나간 곳. 조각 [data-tc] 로 묶어 같은 조각을 쓰는 쌍둥이 쪽도 함께 고친다.
   · 260829xr4cj #sec-04 (mommy_07_01·body_04_01) "What are the benefits?" 설명: 글 상자에 폭이 없어(절대배치·내용 폭)
     영문 한 줄 1059px 가 오른쪽 사진(50% 지점) 위로 갔다 → 사진 앞 60px 에서 멈추게(1920 에서 584px, 두 줄).
   · 260829224pc .s06 (mommy_04_01·body_03_01) 체크 목록: 체크 표시가 한국어 글 길이에 맞춘 %자리(left:25.73% 등)에
     절대배치라 영문 글 위에 얹혔다 → 글 앞에 붙는 인라인으로. fit.js 가 셋째 줄만 22px 로 줄이던 것도 막아 네 줄 모두 26px.
   · 260902h834w .s03-sum (mommy_03_01·antiaging_01_01) 요약문: 폭 제한이 없어 화면 양옆으로 잘렸다 → 위 카드 줄 폭(1294).
   · 260902h834w .s05 단계 카드: 오른쪽 끝 ">" 가 카드 안(오른끝)에 있는데 영문 글이 카드 끝까지 차서 겹쳤다
     → 글 칸 오른쪽에 40px 비움(">" 23px + 틈 17px). */
@media (min-width:1025px){
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829xr4cj"],.tg-fr [data-tc="260829xr4cj"]) .s04-copy{max-width:calc(33.516% - 60px)!important}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829xr4cj"],.tg-fr [data-tc="260829xr4cj"]) .s04-copy .s04-lead{white-space:normal!important}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829224pc"],.tg-fr [data-tc="260829224pc"]) .s06-list li .s06-check{position:static!important;display:inline-block!important;vertical-align:-4px!important;margin-inline-end:12px!important}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829224pc"],.tg-fr [data-tc="260829224pc"]) .s06-list :is(.s06-txt,.s06-txt *){--tgi-fit:on!important}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829224pc"],.tg-fr [data-tc="260829224pc"]) .s06-list .s06-txt{white-space:normal!important}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829224pc"],.tg-fr [data-tc="260829224pc"]) .s06-list .s06-item{text-wrap:balance}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260902h834w"],.tg-fr [data-tc="260902h834w"]) .s03-sum{max-width:calc(1294*var(--px))!important;margin-inline:auto!important;padding-inline-start:0!important;white-space:normal!important;text-wrap:balance}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260902h834w"],.tg-fr [data-tc="260902h834w"]) .s05-cap{padding-inline-end:calc(40*var(--px))!important}
}

/* ── breast_02_01 보정 (2026-09-24, 사용자 스크린샷 지적) ─────────────────────────────────────
   · 260829myv1g 내시경 무대(breast_02_01·breast_06_01): 한국어 한 줄씩 절대배치(nowrap)라 영문이 1875px 까지 뻗어
     장비 사진·화면 밖으로 나갔다. 폭만 줄이면 줄이 접혀 아래 줄과 겹치므로, 제목(r01~r04) 아래를 **흐름 배치**로 바꾼다:
     무대를 격자로(글 칸 816~1356 = 한국어 가장 긴 줄 오른끝 1345 와 같은 폭), 설명 lead·소제목 h3·목록 h4 등급.
     흐름 요소는 절대배치 사진보다 아래에 그려지므로 relative + z-index 로 올린다.
   · 26082920y40 장점/단점/적용: 라벨 칸이 53px 고정이라 "Adva/ntage/s:" 로 쪼개졌다 → 한 줄(nowrap).
     좁은 3단 카드(s03)는 라벨을 본문 위로, 넓은 줄(s05·s06)은 라벨 칸 146px("Disadvantages:" 131px + 틈).
   · 260907glfvw 멘토 클래식 번호: .8em 칸에서 "0/1" 로 쪼개졌다 → nowrap.
   · 탭 세 개(모티바·멘토 엑스트라·클래식) 로고 줄 "TANG:GLE Plastic Surgery Clinic": 47px 한 줄 741px 라 × 와 제품 로고가
     오른쪽 밖(1797)으로 밀렸다 → 세 탭 모두 40px 두 줄("TANG:GLE Plastic / Surgery Clinic")로 맞춘다. */
@media (min-width:1025px){
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829myv1g"],.tg-fr [data-tc="260829myv1g"]) .s00 .stage{display:grid!important;grid-template-columns:calc(816*var(--u)) calc(540*var(--u)) 1fr!important;align-content:start!important;padding-top:calc(418*var(--u))!important;box-sizing:border-box!important}
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829myv1g"],.tg-fr [data-tc="260829myv1g"]) .s00 .stage > :is(.r05,.r06,.r07,.r08,.rule,.pts){grid-column:2!important;position:relative!important;inset:auto!important;z-index:1!important;margin:0!important}
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829myv1g"],.tg-fr [data-tc="260829myv1g"]) .s00 .stage > :is(.r05,.r06,.r07){white-space:normal!important;font-size:var(--en-lead-size)!important;line-height:var(--en-lead-lh)!important;letter-spacing:normal!important}
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829myv1g"],.tg-fr [data-tc="260829myv1g"]) .s00 .stage > .r08{margin-top:calc(32*var(--u))!important;white-space:normal!important;font-size:var(--en-h3-size)!important;line-height:var(--en-h3-lh)!important;letter-spacing:normal!important}
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829myv1g"],.tg-fr [data-tc="260829myv1g"]) .s00 .stage > .rule{margin-top:calc(8*var(--u))!important;width:calc(401*var(--u))!important}
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829myv1g"],.tg-fr [data-tc="260829myv1g"]) .s00 .stage > .pts{margin-top:calc(22*var(--u))!important;display:grid!important;row-gap:calc(14*var(--u))!important}
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829myv1g"],.tg-fr [data-tc="260829myv1g"]) .s00 .pts :is(.pt,.pt > .tx){display:flex!important;align-items:flex-start!important;column-gap:calc(15*var(--u))!important}
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829myv1g"],.tg-fr [data-tc="260829myv1g"]) .s00 .pts .ck{position:static!important;inset:auto!important;flex:0 0 auto!important;margin-top:0!important}
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260829myv1g"],.tg-fr [data-tc="260829myv1g"]) .s00 .pts .t{position:static!important;inset:auto!important;white-space:normal!important;font-size:var(--en-h4-size)!important;line-height:var(--en-h4-lh)!important;letter-spacing:normal!important}
}
@media (min-width:1025px){
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="260907glfvw"],.tg-fr [data-tc="260907glfvw"]) .s03 .s03-num{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important}
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="26082920y40"],.tg-fr [data-tc="26082920y40"]) .lbl{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important}
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="26082920y40"],.tg-fr [data-tc="26082920y40"]) .s03-row{grid-template-columns:1fr!important;row-gap:calc(4*var(--px,1px))!important}
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(.tg-fr[data-tc="26082920y40"],.tg-fr [data-tc="26082920y40"]) :is(.s05-row,.s06-row){grid-template-columns:146px 1fr!important}
}
@media (min-width:1025px){
  html#tgi-doc:is(#tgi-doc):is(#tgi-doc)[data-tgi-lang="ar"] :is(:is(.tg-fr[data-tc="260907rt636"],.tg-fr [data-tc="260907rt636"]) .s01-kr,:is(.tg-fr[data-tc="260817egd73"],.tg-fr [data-tc="260817egd73"]) .s00__brand-kr,:is(.tg-fr[data-tc="260907glfvw"],.tg-fr [data-tc="260907glfvw"]) .s01-kr){white-space:normal!important;font-size:40px!important;line-height:1.1!important;max-width:360px!important;width:auto!important;overflow-wrap:normal!important;word-break:normal!important}
}