/**
* English-only layout overrides — 영문 전용 레이아웃 보정
* --------------------------------------------------------------------
* 공용/국문 CSS는 한 글자도 수정하지 않는다. 영문 페이지(fo/html_en/)의
* 에만 로 추가 로드되어, 영문 텍스트가 한글보다 길어 생기는
* 레이아웃 넘침을 보정한다. (site-chrome-en.js 오버레이와 동일한 "영문 전용
* 추가" 철학 — 기존 파일 무수정, 국문 사이트 회귀 0.)
*
* 배경: 값카드 그리드(.mv-values__grid--3col)에서
* (1) cmm components.css 의 repeat(3, 1fr) 트랙이 긴 영문 min-content 로
* 확장되어(grid blowout) 카드가 가로로 넘침,
* (2) biobank-values-grid.css 의 .bio-values-row--top 이 미디어쿼리 없이
* 2×(1/3폭) 고정이라 모바일에서 좁은 칸을 넘침.
*/
/* 0) 유틸리티 바 숨김 + 헤더 top 보정 —
영문은 utilityLinks 없음, 빈 40px 회색 줄이 GNB 위에 보임.
main-dept.css / 001_main.css 가 헤더를 top: ~42px에 고정하므로
utility-bar를 숨기면 그 42px 공백이 그대로 남는다 → top: 0으로 재정의. */
.top-utility-bar {
display: none;
}
.header {
top: 0;
}
/* 0-1) 영문 메인 투명 헤더 로고 white/color 전환 —
main-dept.css에 동일 규칙 있으나, 버전 없이 캐시된 구버전은
이 규칙이 없어 color 로고가 그대로 노출됨. site-en.css?v=20260625는
항상 최신 버전이 강제 로드되므로 여기서 보강. */
body.page-main--transparent .header .logo-image--color { display: none; }
body.page-main--transparent .header .logo-image--white { display: block; }
/* 스크롤 / 햄버거 메뉴 열림 시 컬러 복원 */
body.page-main--transparent .header.is-scrolled .logo-image--color,
body.menu-open.page-main--transparent .header .logo-image--color { display: block; }
body.page-main--transparent .header.is-scrolled .logo-image--white,
body.menu-open.page-main--transparent .header .logo-image--white { display: none; }
/* 0-2) show-all 메가메뉴 top 보정 —
국문: top = 유틸바(40px) + 헤더(80px) = 120px
영문: 유틸바 없음 → top = 0 + 80px = 80px
유틸바가 숨겨졌지만 header.css show-all 규칙은 120px 하드코딩 →
영문에서 로고~메뉴 사이에 40px 공백이 생기는 현상 수정 */
.gnb-megamenu.show-all .megamenu-backdrop {
top: 80px;
height: calc(100vh - 80px);
}
.gnb-megamenu.show-all .megamenu-content {
top: 80px;
height: calc(100vh - 80px);
max-height: calc(100vh - 80px);
}
/* 모바일(≤767px): 국문 top = 유틸바(36px) + 헤더(64px) = 100px
영문 top = 0 + 64px = 64px */
@media (max-width: 767px) {
.gnb-megamenu.show-all .megamenu-backdrop {
top: 64px;
height: calc(100vh - 64px);
}
.gnb-megamenu.show-all .megamenu-content {
top: 64px;
height: calc(100vh - 64px);
max-height: calc(100vh - 64px);
}
}
/* 1) grid blowout 방지: 그리드 아이템이 트랙보다 커지지 않도록 min-width:0 */
.mv-values__grid--3col .mv-values__card {
min-width: 0;
}
/* 2) 카드 제목/설명: 긴 영문도 칸 안에서 줄바꿈 */
.mv-values__card-title,
.mv-values__card-desc {
min-width: 0;
white-space: normal;
word-break: keep-all;
overflow-wrap: anywhere;
}
/* 3) 모바일(≤767px): 값카드 그리드를 1열로 collapse */
@media (max-width: 767px) {
.mv-values__grid--3col,
.bio-values-row--top.mv-values__grid--3col {
grid-template-columns: 1fr !important;
}
}
/* 4) 조직도(#bri-org-svg — 영문에서 01_bri/012·04_dear/050 두 페이지가 공유) — 영문
노드 라벨이 국문보다 길어 고정폭 SVG 박스를 넘침. lv2·lv3·dashed 노드 폰트를
--fs-small(16px)로 축소(lv3는 18→16; 두 페이지 모두 마진 확보 — 01_bri/012의 lv3
미세 넘침 4건도 함께 해소). 긴 라벨은 각 페이지 HTML에서 2~3줄 분할 병행.
루트(lv1) 제외. 국문(organization-svg.css)·타 페이지 무영향. */
#bri-org-svg .lv2 .org-node__role,
#bri-org-svg .lv3 .org-node__role,
#bri-org-svg .dashed .org-node__role {
font-size: var(--fs-small);
}
/* 5) 영문 탭 처리(opt-in: .tabs 에 tabs--ellipsis) — 긴 영문 라벨이 flex:1 균등칸을
넘쳐 가로 스크롤(드래그바)·글자 삐져나옴이 생기는 것 방지.
※ 말줄임(…) 폐기: (a) utility.css 미로드 페이지(예: 033_quality)에서는 .ellipsis가
정의되지 않아 잘리지 않고 글자가 밖으로 튀어나왔고, (b) "Microbiological Management"·
"Microbiological Testing"이 둘 다 "Microbiologic…"로 잘려 구분 불가였다. → 잘라내기
대신 **칸 안에서 줄바꿈**하여 전체 라벨을 표시(칸 균등폭 유지, 2~3줄로 흐름).
클래스명은 호환 위해 tabs--ellipsis 유지(기존 적용 페이지: 033·035·014·030 등 자동 개선).
국문/공용 CSS 무수정 — 영문 페이지(fo/html_en/)에서만 로드. */
.tabs--ellipsis .tabs__list {
overflow-x: hidden;
}
.tabs--ellipsis .tabs__item {
min-width: 0; /* flex:1 칸 안에서 줄어들 수 있게 */
white-space: normal; /* 공용 nowrap 해제 → 칸 안 줄바꿈 */
height: auto; /* 줄 수에 따라 칸 높이 신장(3줄도 안 잘림) */
min-height: 56px; /* 공용 .tabs__item 원래 height:56px(한글 탭 실측 동일) 복원 — 1줄 탭이 line-height로 34px로 쪼그라드는 것 방지. align-items:center로 수직 중앙 */
line-height: var(--lh-compact);
}
/* 기존 HTML의 래퍼가 남아 있어도(utility.css 로드 페이지) 말줄임이
아니라 줄바꿈되도록 무력화. span 없이 평문이면 위 .tabs__item 규칙만으로 동작. */
.tabs--ellipsis .tabs__item .ellipsis {
display: block;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
overflow-wrap: break-word;
}
/* 6) HRPP 거버넌스 다이어그램(010_intro) — 영문 기관명("Seoul National University
College of Medicine" 등)이 길어 150px 정원 안에서 4줄로 빽빽하게 차 원 가장자리에
글자가 붙는다. 영문만 노드 라벨 폰트를 한 단계(18→16px) 축소해 원 안 여백을 확보
(줄바꿈 위치는 HTML 로 균형 분할). 국문(010_intro.css, 18px)·공용 무영향. */
.hrpp-governance__institution {
font-size: var(--fs-small);
}
/* 7) MV 핵심가치 4열 그리드(010_intro 미션·비전 하단) — 영문 타이틀("Mutual
Collaboration", "Social Contribution" 등)이 길어 카드 폭이 늘어 그리드가 우측으로
블로우아웃되고, 정사각(aspect-ratio 1/1) 카드에 긴 영문 설명이 안 들어간다.
영문만: 카드 min-width:0 으로 블로우아웃 차단 + 정사각 해제(내용 높이 + 그리드
stretch 로 4칸 높이 균등) + 타이틀 폰트를 한글판 시각비중에 맞춰 36→22px 축소(긴
라벨은 단어 단위로 자동 줄바꿈). 3열 변형(--3col, point 1~3에서 별도 처리)·국문 무영향. */
.mv-values__grid:not(.mv-values__grid--3col) > .mv-values__card {
min-width: 0;
aspect-ratio: auto;
}
.mv-values__grid:not(.mv-values__grid--3col) .mv-values__card-title {
font-size: var(--fs-section);
}
/* 8) 04_dear 조직도(012_organization) — HTML 박스 조직도. 공용 organization.css의
.org-node__role{white-space:nowrap}이 영문 라벨(국문比 1.5~2배)을 한 줄로 강제해
고정폭 박스(140·160·180px)를 넘쳐 글자가 잘리고 이웃 박스와 겹친다. 영문만 dear
조직도 한정으로 role 줄바꿈 허용 → 박스 폭(커넥터 정수좌표) 유지한 채 세로로 자라
텍스트가 박스 안에 들어가고, 긴 라벨은 폰트 한 단계 축소로 밀도 보정.
국문(dear-common.css·organization.css)·타 사이트 무영향. */
.dear-org-section .org-node__role {
white-space: normal;
word-break: normal; /* 영문: 단어 경계 우선 줄바꿈(중간 잘림 방지) */
overflow-wrap: break-word; /* 단일 단어가 칸보다 길 때만 분절 */
}
.dear-org-section .dear-org-dashed-row .org-node__role,
.dear-org-section .dear-org-areas .org-node__role,
.dear-org-section .dear-org-vertical__items .org-node__role,
.dear-org-section .dear-org-team-lead .org-node__role {
font-size: var(--fs-small);
line-height: var(--lh-compact);
}
/* 9) 04_dear IACUC 심의 흐름도(063_review) — .iacuc-canvas는 절대좌표(996×680)
고정폭·고정높이 노드 다이어그램. .iacuc-node{white-space:nowrap; font-size:fs-body}가
영문을 한 줄로 강제해 박스를 넘친다. 영문만 줄바꿈 허용+폰트 축소로 좌표/크기 불변인
박스 안에 맞춘다. 국문(dear-common.css) 무영향. */
.iacuc-canvas .iacuc-node {
white-space: normal;
font-size: var(--fs-tag);
line-height: var(--lh-compact);
word-break: normal;
overflow-wrap: break-word;
}
/* 세로쓰기 라벨(writing-mode: vertical-rl)인 New / Amendment·Continuation 측면 브래킷 —
국문판은 글자를 정자로 세로 쌓는 text-orientation:upright(한글에 자연스러움)지만, 영문은
"C-o-n-t-i-n-u-a-t-i-o-n"처럼 글자가 한 자씩 쌓여 가독성이 나쁘다. 영문만 sideways로 바꿔
글자 정상 방향 그대로 90° 회전된 '한 줄' 라벨(아래→위)로 표시(Latin 세로 라벨 표준).
회전 단일 라인이 168px보다 길면 박스가 아래로 신장(우측 끝 단독 컬럼 → 충돌 없음). */
.iacuc-canvas .iacuc-node--label,
.iacuc-canvas .iacuc-node--new,
.iacuc-canvas .iacuc-node--cont {
text-orientation: sideways;
white-space: nowrap;
letter-spacing: normal;
font-size: var(--fs-tag);
line-height: 1.15;
height: auto;
min-height: 168px;
}
/* ②′ Specialist Reviewer(--p2p) — 프라임 기호(′) 때문에 "②′ Specialist"가 110px 한 줄을
넘쳐 3줄이 되어 고정 높이(56px)를 6px 초과(상단 ② 노드는 2줄). 행간만 약간 압축해 3줄을
박스 안에 수용. iacuc-canvas는 063_review 전용 → dear 외 사이트 무영향. */
.iacuc-canvas .iacuc-node--p2p {
line-height: 1.2;
}
/* 11) 04_dear IACUC 위치 조직도(061_iacuc_org) — 최상단 "Seoul National University
Hospital" root 박스가 영문이라 폭 441px(국문比 약 2배)로 넓어져, 우측 상단정렬(flex-start)
IACUC 분기 박스 위로 80px 겹쳐 두 박스가 맞닿는다. 영문만 IACUC 분기(가로선+박스)를
한 칸(16px) 아래로 내려 수직 간격을 확보(수평 겹침과 무관히 분리). 가로선은 트렁크에
그대로 연결되고 트렁크 정렬·차트 폭 불변. dear-org-branch--iacuc는 061 전용·국문 무영향. */
.dear-org-section .dear-org-branch--iacuc .org-chart__branch-side {
margin-top: var(--space-4);
}
/* 12) 03_clab 조직도(012_organization) — 십자 트리(.clab-org-cross)와 Core Lab 13실험실
5열 그리드(.clab-lab-grid). 공용 organization.css의 .org-node__role{white-space:nowrap}이
영문 랩명/부서명(국문比 1.5~2배)을 한 줄로 강제해, lv2 부서박스(min-width:160px)는 콘텐츠
폭으로 커져 트리를 우측으로 넘치고, lv4 그리드 셀(minmax(0,1fr))은 카드 경계를 넘쳐 좌우로
잘리고 이웃과 겹친다. 영문만 clab 조직도 한정 role 줄바꿈 허용 → 박스 폭(160px·1fr) 유지한
채 세로로 자라 텍스트가 박스 안에 들어가고, 긴 lv4 라벨은 폰트 한 단계 축소로 밀도 보정.
국문(clab-common.css·clab-organization.css·organization.css)·타 사이트 무영향
(site-en.css는 영문 전용). */
.clab-org-cross .org-node__role,
.clab-lab-grid__item .org-node__role {
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
}
.clab-lab-grid__item .org-node__role {
font-size: var(--fs-small);
line-height: var(--lh-compact);
}
/* 13) 프로세스 스텝(.process-steps) — 긴 영문 다운로드/이동 버튼 라벨이 카드를 밀어 행이
뷰포트를 넘침. 공용 components.css의 .process-steps__item{flex:1}·.process-steps__card에
min-width가 없어(=auto) 플렉스 아이템의 min-content가 내부 .btn{white-space:nowrap}의 긴
영문 라벨(예 "CMI Core Facility Online Reservation Usage Application (by Professor)")로
확장 → 균등폭(1fr)을 깨고 카드가 콘텐츠폭(606px)으로 부풀어 3열 행이 우측으로 336px
오버플로하고, 옆 스텝("Personal Equipment User Training")이 얇게 짓눌린다. 영문만: (a)
item·card에 min-width:0을 줘 플렉스 블로우아웃을 차단(균등 1fr 복원), (b) 카드 내부 .btn
라벨을 칸 안에서 줄바꿈 허용(nowrap 해제)해 버튼이 여러 줄이 되어도 카드폭 안에 가둔다.
버튼 정렬·btn-group(flex-wrap)은 유지. 국문 process-steps는 라벨이 짧아 원래 정상이므로
영향 없음(site-en.css는 영문 전용). 023·014·015 등 usage 트윈에 컴포넌트 스코프로 동시 적용. */
.process-steps__item,
.process-steps__card {
min-width: 0;
}
.process-steps__card .btn {
white-space: normal;
overflow-wrap: break-word;
}
/* 14) info-cards 카드 그리드(111 FACS 이용안내의 Application/신청 카드 등) — cmm sub-page.css의
.info-cards{grid-template-columns:repeat(3,1fr)} 및 :has(4th) 4열에서, min-width 없는
.info-card 가 내부 긴 영문(버튼 "7. Personal-Use Registration Form" 등 .btn nowrap 라벨,
제목/설명)의 min-content 로 확장되어 그리드 트랙(1fr)을 깨고 우측으로 블로우아웃 → 4번째
카드가 뷰포트 밖으로 잘리고 가로스크롤(1440에서 344px 넘침). 영문만: (a) 카드 min-width:0
으로 트랙 안에 가두고, (b) 카드 내부 .btn 긴 라벨 줄바꿈 허용(nowrap 해제). §13 process-steps
와 동일 원인·처방(컴포넌트만 다름). 국문(sub-page.css) 무영향·타 사이트 무영향(영문 전용). */
.info-cards > .info-card {
min-width: 0;
}
.info-card .btn {
white-space: normal;
overflow-wrap: break-word;
}
/* 15) 03_clab 조직도(012) Core Lab 13실험실 그리드 — 데스크톱 미감 정돈. 영문 랩명(국문比
1.5~2배)이 clab-common.css 5열(minmax(0,1fr)) 좁은 셀에서 2~3줄로 줄바꿈되어 국문(1줄)
보다 산만하다. 영문만 데스크톱에서 5→4열로 완화 → 카드 폭↑로 대부분 1~2줄로 정돈(13개
=4+4+4+1). §12 role 줄바꿈은 유지(4열에서도 초장문은 자연 줄바꿈). ★반드시 min-width:1024
으로 스코프: 무조건 override 하면 clab-common.css의 태블릿(≤1023=3열)·모바일(≤767=2열)
미디어쿼리를 site-en 로드순서로 덮어써 좁은 화면이 4열로 넘친다. 데스크톱만 바꾸고 반응형은
국문 그대로 상속. 국문(clab-common.css 5열)·타 사이트 무영향(영문 전용). */
@media (min-width: 1024px) {
.clab-lab-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* 16) 03_clab 조직도 상위 십자 트리(.clab-org-cross__mid) 부서박스 맞닿음 — clab-organization.css
의 .clab-org-cross 는 max-width:600px 이고 두 부서박스는 width:auto·flex:0 0 auto 라, 영문
부서명("Central Research Laboratory Division" 354px / "Convergence Research Cooperation
Division" 412px)이 합계 766px 로 600px 컨테이너를 넘겨 두 박스가 가운데서 맞닿고(gap 0)
space-between 이 벌릴 여백을 잃어 십자 세로 트렁크선이 박스 뒤로 가린다. (국문은 각 ~160px
라 합 320px<600 → 좌우로 벌어져 정상.) 영문만 각 박스 max-width 를 46%(≈276px)로 제한 →
§12 role 줄바꿈과 함께 2줄로 접혀 폭이 줄고, space-between 이 두 박스 사이 간격을 복원(국문
과 동일한 벌어진 십자). 국문(clab-organization.css)·타 사이트 무영향(영문 전용). */
.clab-org-cross__mid > .org-node {
max-width: 46%;
}
/* 17) 08_mrcc 조직도(012_organization) 최하단 2열 행 — mrcc-organization.css 가 국문 라벨
("행정 (2)" / "IT (1)") 기준으로 행 폭 280px·박스 폭 130px 을 하드코딩하고, 공용
organization.css 의 .org-node__role{white-space:nowrap} 이 한 줄을 강제한다. 영문
"Administration (2)" 는 라벨만 151px(+패딩 48·테두리 4 = 박스 203px)라 130px 박스의
내용폭(62px)을 넘겨 좌우가 잘린 채 "dministration (" 로 보인다.
영문만: 행 폭 480px·박스 max-width 해제 → 두 박스가 동일 폭(214px)으로 한 줄 수납
(여유 11px). ★행 상단 연결 가로선(::before)은 국문 280px 기준 left/right:65px 하드코딩
이라 행이 넓어지면 세로 스텁과 어긋나므로, 항목 중심인 25%/75% 로 함께 바꿔 폭에
무관하게 정렬시킨다. 2col-center 는 mrcc 조직도 최하단 행 전용 → 국문
(mrcc-organization.css)·타 사이트 무영향(영문 전용). */
.page-mrcc-organization .org-chart__list--2col-center {
max-width: 480px;
}
.page-mrcc-organization .org-chart__list--2col-center::before {
left: 25%;
right: 25%;
}
.page-mrcc-organization .org-chart__list--2col-center .org-node--lv2 {
width: 100%;
max-width: none;
}
/* 18) 08_mrcc 신청안내(030_apply_info) "How Support Is Delivered" 분기 라벨 —
국문판은 분기선 중간을 끊어 그 빈 구간(≈70px)에 라벨을 얹는 구조다. 영문
"Collaborative"(97px)는 구간보다 넓어 좌우 선 위에 글자가 겹쳤다.
★구간을 넓히는 것만으로는 부족하다: .mrcc-flow__lines 는 preserveAspectRatio="none"
으로 컨테이너에 비례 축소되는데 라벨 폰트는 px 고정이라, 뷰포트가 좁아지면(콘텐츠폭
≈뷰포트-406px) 구간이 라벨보다 다시 좁아져 겹침이 재발한다(실측: 콘텐츠폭 850px
이하부터 겹침 = 뷰포트 약 1256px 이하).
→ 영문만 라벨을 선 위로 올린다(translate 의 Y를 -50%→-100%). 선을 밟지 않으니 폭에
무관하게 겹침 0. 대신 선은 끊지 않고 화살표까지 연속으로 이어야 자연스러우므로,
SVG 의 스텁/화살표 2선을 1선으로 합치는 변경을 콘텐츠 HTML 쪽에서 함께 했다
(html_en/08_mrcc/030_apply_info.html · INNO_MENU_CONTS 469).
대안으로 검토한 '≤1365px 세로 스택 전환'은 두 분기 라벨과 결과 박스의 대응 관계가
사라져(라벨 2개가 연달아 나오고 박스 2개가 따로 나옴) 가독성이 더 나빠 폐기.
국문(mrcc-apply-info.css)·타 사이트 무영향(영문 전용). */
.page-mrcc-apply-info .mrcc-flow__label {
transform: translate(-50%, -100%);
margin-top: -5px;
}
/* 19) 연혁 타임라인 월 배지 — 공용 history.css 는 HTML 에 숫자만 두고 ::after 로 "월"을
붙인다(국문 의도). 영문 페이지에서도 그대로 상속돼 "04월"처럼 한글이 노출되므로
영문에서만 접미사를 제거하고 숫자만 표기한다. 국문·공용 무영향(영문 전용 시트). */
.timeline__month-group .badge::after {
content: none;
}
/* 20) 08_mrcc 영문 메인 구 홈페이지 단독 배너(main-research--single) — 공용 main-dept.css 의
.main-research 는 480px(2패널 스택 전제, 패널당 240px)라 단독 패널 섹션이 혼자
480px 를 차지한다. 국문은 mrcc/css/001_main.css 에서 240px 로 보정하지만 영문
메인은 해당 파일을 로드하지 않아 여기서 동일 보정한다(--single 은 mrcc 계열만 사용). */
.main-research--single {
height: 240px;
}