/* intro_system.css → vi (sys.php 변환본) */
/* ============================================================================
   intro_system — 영문판 전용 조판 보정 (2026-09-22)  · 생성: gen.py

   render.php 가 이 파일을 맨 마지막에 싣는다(공통 → fontfix → 쪽 인라인 → intl → img → 여기).
   선택자는 전부 html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] 아래라, 같은 조각(data-tc)을 쓰는 다른 영문 쪽에는 영향이 없다.

   왜 필요한가 — 한국어/영문 1920px 실측 대조
     · 한국어는 js/site.js 가 글꼴을 갈아 끼우지만 번역 페이지에서는 돌지 않고,
       css/fontfix/intro_system.css 가 !important 로 박아 둔 한글 글꼴(NanumBG·scd1·gmsb)만 남는다.
     · 크기도 조각별 실측이라 같은 등급 제목이 조각마다 다르고,
       거기에 fit.js 가 넘치는 것만 골라 줄여 한 쪽 안에서 12px~24px 로 갈렸다.
   고치는 법 — 등급별 공통 변수로 크기를 한 벌로 정하고, fit.js 의 크기 조정은 `--tgi-fs:on` 로 잠근다
   (넓히기·자리 옮기기·줄바꿈은 그대로 돈다).
   ========================================================================== */

/* ── 0. 이 파일이 하는 일 ─────────────────────────────────────────────
   "어느 요소가 어느 등급인가" 만 잇는다. 크기·굵기·행간·자간은 한 줄도 여기서 정하지 않고
   전부 _i18n/en-system.css 의 공통 변수를 가리킨다 → 같은 등급이면 어느 쪽·어느 구역이든
   computed style 이 완전히 같다. 쪽별 px·소수점 크기는 이 파일에 쓰지 않는다.

   예외는 '장식'뿐이다(아래 1절). 장식 영문·숫자·로고형 문구는 한국어 원본 디자인의
   일부라 일반 제목 등급으로 통일하면 디자인이 바뀐다 — 원본 크기를 정수 px 로 지킨다. */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"]{--tgi-fs:on}   /* 글자 크기·자간·행간은 CSS 가 정한다 — fit.js 의 JS 강제 변경을 이 쪽에서 끈다 */

/* ── 1. 글꼴 ─────────────────────────────────────────────────────────
   제목·본문은 --en-sans 한 벌. 장식·브랜드 글꼴만 원래 글꼴을 지킨다. */
/* SVG `<text>` 는 뺀다 — `<text>` 로 그린 로고(FDA 워드마크 등)를 갈아엎는다 */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] .tg-fr *:not(text){font-family:var(--en-sans)!important;-webkit-text-stroke:0!important}
/* 장식 글꼴은 폭과 무관하게, **크기는 PC 에서만** 고정한다 —
   폰에서는 조각 자체의 clamp() 가 정본이라 PC 크기를 그대로 두면 장식이 화면을 덮는다
   (한국어 css/fontfix/*.css 도 같은 이유로 @media (min-width:1025px) 안에만 둔다). */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-eyebrow > span,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .blk-badge > span,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-system.band-system,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-system.band-system,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-system.band-system{font-family:var(--en-oswald-regular)!important;font-weight:400!important;--tgi-fit:on}
@media (min-width:1025px){
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-system.band-system,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-system.band-system,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-system.band-system{font-size:calc(46 * var(--k,1px))!important;line-height:calc(46 * var(--k,1px))!important;letter-spacing:calc(4.5 * var(--k,1px))!important}
}

/* 로고형 장식·STEP 번호: 원본 자간(쪽 CSS 의 --track-eyebrow / .089em)을 지킨다 — 3절 자간 초기화의 예외. 굵기는 위 장식 글꼴 규칙(400)이 이미 낸다 */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-eyebrow > span{letter-spacing:var(--track-eyebrow)!important}
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .blk-badge > span{letter-spacing:.089em!important}

/* ── 2. 줄바꿈 ───────────────────────────────────────────────────────
   한국어 길이에 맞춘 nowrap/pre 를 풀되, 설계된 줄바꿈(한국어가 pre 인 곳)은 지킨다.
   낱말 중간을 자르지 않고, 글자를 줄여 한 줄에 우겨넣지 않는다. */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s00-t,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s03-q1,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s03-q2,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s00-sub > p,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .blk-body > p,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s09-body > p,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-h3,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-sub > p,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s03-body > p,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .blk-badge > span,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s09-txt > h2,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-title.band-title,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-title.band-title,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-title.band-title,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-body > p,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-body > p,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-strong,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-body > p,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .circle-label,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .circle-cap > p,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .blk-copy > h2{white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;hyphens:none!important;text-wrap:pretty}
/* 장식 영문·숫자는 짧다 — 원본처럼 한 줄로 둔다 */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-eyebrow > span,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-system.band-system,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-system.band-system,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-system.band-system{white-space:nowrap!important}

/* ── 3. 등급 연결 ─────────────────────────────────────────────────────
   여기서 값을 정하지 않는다. en-system.css 의 등급 변수를 가리키기만 한다.
   (변수는 ≤1024 에서 스스로 바뀌므로 화면 크기별 규칙을 따로 두지 않는다) */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] .tg-fr *:where(:not(text):not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)){letter-spacing:normal!important}   /* 한국어 낱말 길이에 맞춘 자간(509곳 !important) 초기화 */
/* display: s00-t, s03-q1, s03-q2 */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s00-t,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s03-q1,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s03-q2{font-size:var(--en-display-size)!important;line-height:var(--en-display-lh)!important;letter-spacing:var(--en-display-ls)!important;font-weight:400!important}
/* h1: s01-h3 */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-h3{font-size:var(--en-h1-size)!important;line-height:var(--en-h1-lh)!important;letter-spacing:var(--en-h1-ls)!important;font-weight:400!important}
/* h2: s02-title.band-title, s04-title.band-title, s08-title.band-title */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-title.band-title,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-title.band-title,
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-title.band-title{font-size:var(--en-h2-size)!important;line-height:var(--en-h2-lh)!important;letter-spacing:var(--en-h2-ls)!important;font-weight:400!important}
/* kicker: h2 */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .blk-copy > h2:where(:not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)){font-size:var(--en-kicker-size)!important;line-height:var(--en-kicker-lh)!important;letter-spacing:var(--en-kicker-ls)!important;font-weight:400!important}
/* h3: h2, p, span */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s03-body > p:where(:not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)),
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .blk-badge > span:where(:not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)),
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s09-txt > h2:where(:not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)){font-size:var(--en-h3-size)!important;line-height:var(--en-h3-lh)!important;letter-spacing:var(--en-h3-ls)!important;font-weight:400!important}
/* h4: p, s04-strong */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-body > p:where(:not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)),
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-body > p:where(:not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)),
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-body > p:where(:not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)),
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-strong{font-size:var(--en-h4-size)!important;line-height:var(--en-h4-lh)!important;letter-spacing:var(--en-h4-ls)!important;font-weight:400!important}
/* lead: p, span */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s00-sub > p:where(:not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)),
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-sub > p:where(:not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)),
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .blk-body > p:where(:not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)),
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s09-body > p:where(:not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)){font-size:var(--en-lead-size)!important;line-height:var(--en-lead-lh)!important;letter-spacing:var(--en-lead-ls)!important;font-weight:var(--en-w-lead)!important}
/* h3: circle-label — 원 아래 제목이라 원 안 등급(circ/circ-s)이 아니다 */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .circle-label{font-size:var(--en-h3-size)!important;line-height:var(--en-h3-lh)!important;letter-spacing:var(--en-h3-ls)!important;font-weight:400!important}
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .circle-cap > p:where(:not(.band-system):not(.s02-system):not(.s04-system):not(.s08-system)){font-size:var(--en-lead-size)!important;line-height:var(--en-lead-lh)!important;letter-spacing:var(--en-lead-ls)!important;font-weight:var(--en-w-lead)!important}

/* 한국어가 **고정 높이 칸을 행간으로 세로 가운데 맞춘** 자리.
   등급 행간(배수)을 그대로 쓰면 글이 칸 위쪽에 붙는다 → PC 에서만 원본 행간(px)을 지킨다.
   (폰에서는 칸이 흐름 배치로 풀리므로 등급 행간을 쓴다) */
@media (min-width:1025px){
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .blk-copy > h2{line-height:calc(30 * var(--k,1px))!important}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-title.band-title,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-title.band-title,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-title.band-title{line-height:calc(42 * var(--k,1px))!important}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-h3{line-height:calc(45 * var(--k,1px))!important}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .circle-cap > p{line-height:calc(30 * var(--k,1px))!important}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s09-body > p{line-height:calc(35 * var(--k,1px))!important}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s03-body > p,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-body > p,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-body > p,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-body > p,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-strong,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .blk-body > p{line-height:calc(38 * var(--k,1px))!important}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-sub > p,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .blk-badge > span{line-height:calc(39 * var(--k,1px))!important}
}

/* ── 4. 고정 높이 풀기 ───────────────────────────────────────────────
   영문은 길어 줄이 늘어난다. 한국어 길이에 맞춘 고정 height 를 min-height 로 바꿔
   글을 줄이거나 잘라내지 않고 **칸이 자연스럽게 늘어나게** 한다. */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] .tg-fr :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption):where(:not(.ab):not(.tag):not([class*="circ"]):not([class*="circle"]):not([class*="badge"]):not([class*="disc"]):not([class*="ring"]):not([class*="round"]):not([class*="dot"]):not([class*="circ"] *):not([class*="circle"] *):not(.e-circ *):not([class*="ring"] *):not([class*="disc"] *):not(.mod-album *):not(.mod-tv *):not(.mod-bna *):not(.mod-selfie *):not(.circle-label)){height:auto!important}

/* ── 5. 공통 잔손질 ── */
@media (min-width:1025px){
  /* 수술정보표: 글 칸이 '이름' 길이로만 줄어들어 그보다 긴 값이 칸 안에서 접히거나 넘쳤다.
     (한국어는 값이 짧아 드러나지 않는다) 칸에 남은 자리를 다 쓰게 한다. */
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] .tg-fr :is(.spec,.s00-spec,[class*="spec"]) :is([class*="__txt"],[class*="__def"],[class*="-txt"],[class*="-def"],[class*="__body"]){flex:1 1 auto!important;width:auto!important;min-width:0!important;margin-left:0!important;padding-left:0!important}
  /* 아이콘↔글 간격은 한국어 낱말 길이에 맞춘 값(59px 등)이라 영문에서는 글 칸을 먹는다 → 8px 로 */
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] .tg-fr :is(.spec,.s00-spec,[class*="spec"]) :is([class*="__cell"],[class*="-cell"],[class*="__item"],[class*="-item"]){column-gap:calc(4 * var(--k,1px))!important}
  /* 값이 칸보다 1~3px 길어 두 줄이 되는 자리가 많다 — 자간을 아주 조금만 좁혀 한 줄에 넣는다 */
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] .tg-fr :is(.spec,.s00-spec,[class*="spec"]) :is(dt,dd,[class*="lbl"],[class*="val"],[class*="key"],[class*="term"]){letter-spacing:-.012em!important}
  /* 한국어 낱말 길이에 맞춘 둘째 칸 앞 여백은 영문에서 글 칸을 더 좁힌다 → 이 표에서만 0 으로 */
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] .tg-fr :is(.spec,.s00-spec,[class*="spec"]) > * > * + *,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] .tg-fr :is(.spec,.s00-spec,[class*="spec"]) > * + *{padding-left:0!important}
  /* 정보표 이름·값: 번역팩에 들어 있는 줄바꿈이 pre-line 으로 살아나
     "Not required" 같은 짧은 값까지 두 줄이 되어 행 안의 좌우 칸 높이가 어긋났다 → 자연 줄바꿈으로. */
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] .tg-fr :is(.spec,.s00-spec,[class*="spec"]) :is(dt,dd,[class*="lbl"],[class*="val"],[class*="key"],[class*="term"]){white-space:normal!important}
}

/* ── 6. 띠 구역(.s01·.s02·.s04·.s08) 글 칸 ───────────────────────────────
   띠 위 글상자는 left 만 잡힌 absolute 라 **폭이 글 길이대로 늘어난다**(shrink-to-fit).
   한국어는 줄이 짧아 왼쪽 절반에서 끝나지만(686·651·601px) 영문은 한 문장이 통째로 늘어
   1245~1551px 까지 뻗어 배경 사진의 인물·장비 위로 올라갔다 — 글이 읽히지 않는다(1920 실측).
   한국어 원본이 ≤1024 에서 쓰는 자기 값 `right:52%` 를 PC 에도 그대로 줘서
   원본과 같은 왼쪽 칸 안에서 자연스럽게 줄바꿈시킨다. 글자 크기는 건드리지 않는다. */
@media (min-width:1025px){
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-body.band-body,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-body.band-body,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-body.band-body,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-sub{right:52%}
}

/* s02 의 동그라미 3장(.s02-cards)은 한국어 설계에서 띠 아래쪽을 10.1%(=194px) **파고든다**.
   영문 본문은 줄 수가 5→11 로 늘어 띠 바닥까지 내려오는데, 파고든 만큼 그 자리에 동그라미
   사진이 있어 글이 사진 위에 겹쳤다(1920 실측 -178px).
   글을 줄이거나 자르지 않고 **파고드는 양만 PC 에서 푼다** — 한국어도 ≤1024 에서는
   파고들지 않고 양수 간격(--space-9xl)을 쓴다. 사진·크기·순서는 그대로다. */
@media (min-width:1025px){
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-cards{margin-block-start:0}
}

/* PC 의 .s04 띠도 12px 이 모자라 마지막 줄이 잘렸다(1920 실측 본문 바닥 573 > 띠 561 — 띠가
   overflow:hidden 이라 audit 의 '요소 자신' 잘림 검사에 안 걸린다).
   한국어는 여유 +140 이다. 글을 줄이지 않고 띠만 원본 561 → 600 으로 늘린다(사진은 cover 그대로). */
@media (min-width:1025px){
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04{aspect-ratio:auto;min-height:calc(600 * var(--k,1px))}
}

/* 히어로 띠(.s01) 폰·태블릿 — 영문 문장이 길어 한국어 자리 그대로면 글끼리, 또 배경 사진에
   **박혀 있는 글씨**(‘TANG:GLE Safety Care System’) 위로 올라간다.

   ≤640 : 한국어 띠는 `aspect-ratio:4/3`(=75vw) 한 칸이다. 영문 부제는 여섯 줄이 되어
     띠 바닥을 뚫었다(360 실측 sub 바닥 282 > 띠 270 — overflow:hidden 에 잘린다).
     글자를 줄이지 않고 **띠 높이만 늘린다**(지시서 ④ 섹션 높이 확장).
     폭이 500px 이상이면 한국어 높이(75vw)가 이미 충분하므로 max() 로 한국어 값을 그대로 쓴다.
     사진은 `object-fit:cover` 그대로고 가로폭도 그대로다(세로로만 더 보인다).
     자리는 **%(띠 높이 기준)** 로 잡는다 — 사진에 박힌 글씨가 띠 높이의 24.6~34.8% 에 있어
     (실측) % 로 잡아야 띠가 늘어나도 그 글씨를 피해 따라 내려간다. vw 로 잡으면 어긋난다.
   641~1024 : 위 `right:52%` 는 PC 전용이다. 태블릿에서 칸이 48% 로 좁아져 부제가 넉 줄이 되며
     띠 바닥을 71px 뚫었다(768 실측) → 한국어처럼 칸을 넓히고 둘레 여백만 남긴다. */
@media (max-width:640px){
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01{aspect-ratio:auto;min-height:max(75vw,375px)}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-h3{top:36%}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-sub{top:auto;bottom:3%}
}
@media (min-width:641px) and (max-width:1024px){
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-h3{top:auto;bottom:35%}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s01-sub{right:var(--gutter)}
}

/* ── 7. 띠 구역 본문이 띠 밖으로 잘리던 것(폰·태블릿) ─────────────────────
   .s02·.s04·.s08 은 `aspect-ratio` 로 높이가 못박힌 띠에 본문을 absolute 로 얹는다.
   한국어는 아홉 줄이라 들어가지만 영문은 열여덟 줄이 되어 띠 밖으로 밀려났고,
   띠의 `overflow:hidden` 이 그대로 **글을 잘라 감췄다**(실측 360: s02 -217 · s04 -84 · s08 -51,
   768: s02 -287 · s04 -135 · s08 -115. 한국어도 768 에서 s02 가 -93 이지만 영문은 세 배다).
   지시서 차례대로 푼다 — ① 칸 너비(태블릿의 `right:52%/42%` 를 여백까지 넓힌다)
   ③ 고정 높이 제거(`aspect-ratio:auto`) ④ 섹션 높이 확장(본문을 흐름으로 돌려 띠가 글만큼 자란다).
   한국어 높이는 `min-height` 로 **바닥값**으로 남겨 글이 짧은 폭에서는 원본 그대로다.
   · 본문은 `position:relative`(static 아님) — 배경 사진이 absolute 라 흐름 글 위를 덮는다.
   · 제목·SYSTEM·가는 줄은 그대로 absolute 지만 `top:%` 는 **늘어난 높이**를 따라가 내려간다.
     그래서 한국어 자리를 그 폭에서의 vw 로 바꿔 못박았다(값은 한국어 실측 그대로다).
   · .s02 제목만 영문에서 두 줄이라 바로 아래 SYSTEM 을 덮었다 → 아래를 기준으로 잡아 위로 자라게 한다. */
@media (max-width:640px){
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-band,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08{aspect-ratio:auto;min-height:133.333vw;padding-inline:var(--band-x) var(--gutter);padding-block-end:5vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-band{padding-block-start:56vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04{padding-block-start:72vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08{padding-block-start:68vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-title{top:auto;bottom:calc(100% - 33.3vw)}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-title{top:34.72vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-title{top:33.06vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-system{top:34.44vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-hair{top:48.89vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-system{top:46.11vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-hair{top:65.56vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-system{top:43.61vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-hair{top:61.94vw}
}
@media (min-width:641px) and (max-width:1024px){
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-band,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08{aspect-ratio:auto;padding-inline:var(--band-x) var(--gutter);padding-block-end:3vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-band{min-height:46.88vw;padding-block-start:19.14vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04{min-height:36.46vw;padding-block-start:19.92vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08{min-height:39.58vw;padding-block-start:20.44vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-title{top:9.11vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-system{top:12.11vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-hair{top:17.19vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-title{top:9.51vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-system{top:12.63vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-hair{top:17.97vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-title{top:9.77vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-system{top:12.89vw}
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-hair{top:18.36vw}
}
@media (max-width:1024px){
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s02-body,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s04-body,
  html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .s08-body{position:relative;inset:auto}
}

/* ── 도형(동그라미·색 배지) 안 글자: fit.js 의 크기 맞춤을 다시 켠다 ──
   한국어는 글이 짧아 도형 안에 들어가지만 영문은 길다. 등급 크기를 못박은 채로 두면
   aspect-ratio 가 걸린 동그라미는 글을 담으려고 **지름이 커져** 5개가 제각각이 되고(사용자 지적),
   배지는 글이 칸을 뚫는다. 도형 안에서는 fit.js 가 글자를 칸에 맞춰 줄이도록 --tgi-fs 를 되돌린다.
   (도형 자체의 크기·간격은 한국어 그대로 유지된다 — 이게 목적이다) */


/* 히어로 — 한국어 원본 크기·행간 그대로(사다리 적용 안 함).
   영문이 길어 줄이 늘어나는 것은 다음 단계에서 크기를 더 줄여 흡수한다. */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] #hero .nb{font-size:23px; line-height:39px}
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] #hero .s01-h3{font-size:45px; line-height:45px}

/* ===== 'SYSTEM' 장식어 숨김 (2026-09-24, 사용자 지시 "SYSTEM 다 없애달라") =====
   한국어는 한글 제목 옆에 영문 장식어 SYSTEM 을 붙인 디자인('밀착 전담 SYSTEM')인데,
   영문은 제목이 이미 '… System Care' 처럼 번역돼 SYSTEM 이 겹치고 중복된다 → 영문에서만 세 곳 모두 숨긴다(모든 화면 폭). */
html#tgi-doc:is(#tgi-doc)[data-tgi-lang="vi"][data-tgi-page="intro_system"] :is(.tg-fr[data-tc="260829oidae"],.tg-fr [data-tc="260829oidae"]) .band-system{display:none!important}