/* intro_notice_read_16.css → zh-TW (sys.php 변환본) */ /* ============================================================================ intro_notice_read_16 — 영문판 전용 조판 보정 (2026-09-22) · 생성: gen.py render.php 가 이 파일을 맨 마지막에 싣는다(공통 → fontfix → 쪽 인라인 → intl → img → 여기). 선택자는 전부 html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] 아래라, 같은 조각(data-tc)을 쓰는 다른 영문 쪽에는 영향이 없다. 왜 필요한가 — 한국어/영문 1920px 실측 대조 · 한국어는 js/site.js 가 글꼴을 갈아 끼우지만 번역 페이지에서는 돌지 않고, css/fontfix/intro_notice_read_16.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="zh-TW"][data-tgi-page="intro_notice_read_16"]{--tgi-fs:on} /* 글자 크기·자간·행간은 CSS 가 정한다 — fit.js 의 JS 강제 변경을 이 쪽에서 끈다 */ /* ── 1. 글꼴 ───────────────────────────────────────────────────────── 제목·본문은 --en-sans 한 벌. 장식·브랜드 글꼴만 원래 글꼴을 지킨다. */ /* SVG `` 는 뺀다 — `` 로 그린 로고(FDA 워드마크 등)를 갈아엎는다 */ html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] .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="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-h2.n2608290u3d8-s00__title{font-family:var(--en-sans)!important;font-weight:700!important;--tgi-fit:on} html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-s00__appr{font-family:var(--en-oswald-light)!important;font-weight:400!important;--tgi-fit:on} html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-s00__coe{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="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-h2.n2608290u3d8-s00__title{font-size:calc(145 * var(--k,1px))!important;line-height:calc(145 * var(--k,1px))!important;letter-spacing:calc(0 * var(--k,1px))!important} html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-s00__appr{font-size:calc(61 * var(--k,1px))!important;line-height:calc(61 * var(--k,1px))!important;letter-spacing:calc(2.27 * var(--k,1px))!important} html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-s00__coe{font-size:calc(46 * var(--k,1px))!important;line-height:calc(46 * var(--k,1px))!important;letter-spacing:calc(3.74 * var(--k,1px))!important} } /* ── 2. 줄바꿈 ─────────────────────────────────────────────────────── 한국어 길이에 맞춘 nowrap/pre 를 풀되, 설계된 줄바꿈(한국어가 pre 인 곳)은 지킨다. 낱말 중간을 자르지 않고, 글자를 줄여 한 줄에 우겨넣지 않는다. */ /* [n16] 줄바꿈 — 글꼴 크기는 건드리지 않고 '칸 너비 → 자연 줄바꿈' 만으로 푼다. 제목을 nowrap 에서 뺀 이유: 영문 제목 'Selected as Top Medical Institution'(35자)은 한국어 '최우수 의료기관 선정'(10자)의 3.5배라, 원본 크기(1920 기준 145px)로 한 줄에 두면 폭 2502px → 오른쪽 끝 x=2701 까지 뻗어 그림(x≤1920) 밖으로 나갔다(실측). en-system.css 의 영문 줄바꿈 정책(white-space:normal …)이 이미 있으므로 여기서는 !important 없이 두 줄 길이만 고르게 잡는다. */ html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-h2.n2608290u3d8-s00__title{text-wrap:balance} html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-lead.n2608290u3d8-s00__lead{text-wrap:pretty;--tgi-fit:on} html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-eyebrow.n2608290u3d8-s00__eyebrow{--tgi-fit:on} /* 머리말 굵기: ko 는 site.js 가 400 으로 바꾸지만 번역 쪽은 그 JS 가 안 돌아 조각의 500 이 남았다 — 폭과 무관하게 400 한 벌 */ /* 장식 영문(Approved · 2026 CENTER OF EXCELLENCE)은 짧다 — 원본처럼 한 줄로 둔다 */ html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-s00__appr, html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-s00__coe{white-space:nowrap} /* ≤1024 에서는 조각 원본대로 한 줄로 둔다 — 한국어와 같은 동작. 폰에서는 공통 모바일 최소 글자 크기가 걸려(본문 캔버스값 9.8px → 16px) 글자가 캔버스 대비 1.6배가 된다. 390 실측: 로고 아래(캔버스 113)~COE 줄(캔버스 380) 사이 빈 띠는 116.85px 인데 줄바꿈을 허용하면 제목 2줄(67.6px)+본문 5줄(132px)+머리말(13.1px)=212.7px 이라 자리를 어떻게 잡아도 들어가지 않고 제목·본문이 28px 겹쳤다. 한국어도 같은 이유로 nowrap 이며 본문이 그림 밖으로 나가 있다(ko 390 실측 right=679 / 그림 370). → 영문만 다르게 만들지 않는다. 근본 해결(.tg-fr 을 1920 으로 늘리는 공통 규칙)은 보고서 '총괄 요청' 참조. */ @media (max-width:1024px){ html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-h2.n2608290u3d8-s00__title, html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-lead.n2608290u3d8-s00__lead{white-space:nowrap} } /* ── 3. 등급 연결 ───────────────────────────────────────────────────── 여기서 값을 정하지 않는다. en-system.css 의 등급 변수를 가리키기만 한다. (변수는 ≤1024 에서 스스로 바뀌므로 화면 크기별 규칙을 따로 두지 않는다) */ html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] .tg-fr *:where(:not(text):not(.n2608290u3d8-h2):not(.n2608290u3d8-s00__appr):not(.n2608290u3d8-s00__coe):not(.n2608290u3d8-s00__title)){letter-spacing:normal!important} /* 한국어 낱말 길이에 맞춘 자간(509곳 !important) 초기화 */ /* display: n2608290u3d8-eyebrow.n2608290u3d8-s00__eyebrow, n2608290u3d8-lead.n2608290u3d8-s00__lead */ html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-eyebrow.n2608290u3d8-s00__eyebrow, html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] :is(.tg-fr[data-tc="2608290u3d8"],.tg-fr [data-tc="2608290u3d8"]) .n2608290u3d8-lead.n2608290u3d8-s00__lead{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} /* ── 4. 고정 높이 풀기 ─────────────────────────────────────────────── 영문은 길어 줄이 늘어난다. 한국어 길이에 맞춘 고정 height 를 min-height 로 바꿔 글을 줄이거나 잘라내지 않고 **칸이 자연스럽게 늘어나게** 한다. */ html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] .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 *)){height:auto!important} /* ── 5. 공통 잔손질 ── */ @media (min-width:1025px){ /* 수술정보표: 글 칸이 '이름' 길이로만 줄어들어 그보다 긴 값이 칸 안에서 접히거나 넘쳤다. (한국어는 값이 짧아 드러나지 않는다) 칸에 남은 자리를 다 쓰게 한다. */ html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] .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="zh-TW"][data-tgi-page="intro_notice_read_16"] .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="zh-TW"][data-tgi-page="intro_notice_read_16"] .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="zh-TW"][data-tgi-page="intro_notice_read_16"] .tg-fr :is(.spec,.s00-spec,[class*="spec"]) > * > * + *, html#tgi-doc:is(#tgi-doc)[data-tgi-lang="zh-TW"][data-tgi-page="intro_notice_read_16"] .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="zh-TW"][data-tgi-page="intro_notice_read_16"] .tg-fr :is(.spec,.s00-spec,[class*="spec"]) :is(dt,dd,[class*="lbl"],[class*="val"],[class*="key"],[class*="term"]){white-space:normal!important} } /* ── 도형(동그라미·색 배지) 안 글자: fit.js 의 크기 맞춤을 다시 켠다 ── 한국어는 글이 짧아 도형 안에 들어가지만 영문은 길다. 등급 크기를 못박은 채로 두면 aspect-ratio 가 걸린 동그라미는 글을 담으려고 **지름이 커져** 5개가 제각각이 되고(사용자 지적), 배지는 글이 칸을 뚫는다. 도형 안에서는 fit.js 가 글자를 칸에 맞춰 줄이도록 --tgi-fs 를 되돌린다. (도형 자체의 크기·간격은 한국어 그대로 유지된다 — 이게 목적이다) */