@charset "utf-8";
/*
 * 영문 사이트 오버라이드 (html[lang="en"] 에서만 로드 — inc/top.html)
 * 단위 체계는 layout.css 와 동일(1rem ≈ 1px, 뷰포트 비례). 색은 layout.css 토큰(--color-point 등) 사용.
 *
 * 1) 타이포: 국문용 음수 자간 해제, 영문 줄바꿈
 * 2) GNB: 영문 라벨이 길어 1300px 대역에서 넘치지 않도록 폰트/패딩 축소
 * 3) 메인: 정적 히어로(텍스트 오버레이), 카드 이미지 object-fit
 * 4) 공통 컴포넌트에서 영문 길이 팽창 대응
 */

/* 1) 타이포 */
html[lang="en"] body{letter-spacing:0; word-break:normal; overflow-wrap:break-word;}
html[lang="en"] .button.lg,
html[lang="en"] .btn > span,
html[lang="en"] .sub-tit h3,
html[lang="en"] .cont-tit h3,
html[lang="en"] .sub-visual__text h2{letter-spacing:-0.01em;}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4{text-wrap:balance;}
html[lang="en"] p, html[lang="en"] li{text-wrap:pretty;}
html[lang="en"] .sub-visual__text h2{font-size:64rem; line-height:1.05em;}

/* 1-1) 서체 체계 (2026-10-12 개정 — 병원 요청서 "제목·본문·메뉴는 같은 폰트 계열, 크기·굵기로 구분 / 가는 글씨·장식 서체·긴 대문자 지양 / Pretendard 검토")
   - 제목·본문·메뉴·숫자 모두 Pretendard 한 가족. 국문 base.css 가 이미 @import 하는 서체라 추가 요청 없음(라틴 글리프는 Inter 계열).
   - 굵기는 국문 CSS 규칙을 그대로 따르고(국문과 같은 위계), 300 이하로 지정된 곳만 400 으로 올린다(아래 1-2).
   - 이전 체계(2026-09-16, Source Serif 4 제목 + Source Sans 3 본문)는 제목만 세리프라 "같은 계열" 요청과 맞지 않아 교체.
     inc/top.html 의 Google Fonts <link> 도 제거. 로고(패스 SVG)는 무관 */
html[lang="en"]{
	--font-display:'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-text:var(--font-display);
	--font-num:var(--font-display);
	--font-eng:var(--font-display);
	--font-e:var(--font-display);
}
html[lang="en"] body, html[lang="en"] input, html[lang="en"] textarea, html[lang="en"] button, html[lang="en"] select{font-family:var(--font-text);}
html[lang="en"] :is(h1, h2, h3, h4, h5, h6){font-family:var(--font-display); line-height:1.25; letter-spacing:-0.01em;}
/* 국문 CSS 가 숫자·영문 라벨에 'Outfit'/'Poppins' 를 직접 지정한 곳(가로 아코디언 번호 등) → 같은 가족으로 */
html[lang="en"] .h-accordion-list > .list__wrap .list--off .list__txt i, html[lang="en"] .h-accordion-list > .list__wrap .list--off em,
html[lang="en"] .h-accordion-list > .list__wrap.on .list--on .list__title i, html[lang="en"] .h-accordion-list > .list__wrap.on .list--on .list__title em,
html[lang="en"] .box-wt .box-tit .tit > h3{font-family:var(--font-display);} /* .box-wt: 국문 전용 디스플레이 서체(Cafe24Ssurround, em dash 글리프 없음) 대체 */
/* 숫자가 줄맞춤되는 곳은 표 숫자 */
html[lang="en"] a[href^="tel:"], html[lang="en"] .list-time, html[lang="en"] .service-call__info > h3,
html[lang="en"] .branch-txt, html[lang="en"] table, html[lang="en"] .history-list{font-variant-numeric:tabular-nums;}
/* 읽는 글(본문·목록·리드)에는 크기 하한을 둔다: 국문 vw-rem 체계는 1100px 노트북에서 16rem≈13.5px 까지 줄어드는데 영외 벤치마크는 16–19px 고정.
   가운데 값은 기존 rem 그대로라 1440px 이상에서는 지금과 같고, 좁은 데스크톱에서만 바닥이 잡힌다. 내비·탭·버튼 같은 UI 라벨은 기존 스케일 유지. */
html[lang="en"] .cont-tit > span{font-size:clamp(17px, 19rem, 21px); line-height:1.6; max-width:64ch;}
html[lang="en"] .cont-tit > h3{line-height:1.3;}
html[lang="en"] [data-list="dot"] > li > span, html[lang="en"] [data-list="square"] > li > span{font-size:clamp(15px, 16rem, 17px); line-height:1.5;}
html[lang="en"] [data-list="number"] > li > span{font-size:clamp(15px, 15rem, 17px); line-height:1.5;}
html[lang="en"] [data-list="check"] > li > span{font-size:clamp(16px, 18rem, 19px); line-height:1.5;}
html[lang="en"] [data-list="check"] > li > em{font-size:clamp(15px, 16rem, 17px);}
html[lang="en"] .box-gray p, html[lang="en"] .txt > p, html[lang="en"] .anesthesia-txt > p{font-size:clamp(17px, 19rem, 21px); line-height:1.6;}
html[lang="en"] .list-time > li > span, html[lang="en"] .list-time > li > em{font-size:clamp(15px, 16rem, 17px); line-height:1.6;}
/* 큰 제목: 산세리프 대형은 살짝 좁혀야 단단해 보인다(Inter 계열 권장 −2%). eyebrow 는 짧은 라벨만 대문자 +6% */
html[lang="en"] .sub-visual__text h2{letter-spacing:-0.02em;}
html[lang="en"] .main-center__logo em{letter-spacing:0.06em; text-transform:uppercase; font-weight:700;}

/* 1-2) 가는 글씨 금지(요청서 "지나치게 가는 글씨 지양"): 국문 CSS 의 300 이하 지정을 영문에서 400 으로 — 목록은 tools 감사(fontprobe)로 뽑은 실제 렌더 요소 기준 */
/* 생성: 국문 css/*.css + 페이지 인라인 <style> 의 font-weight 100–300 규칙 선택자 (선택자마다 한 규칙 — 목록 하나가 무효면 전체가 무시되므로) */
html[lang="en"] .intro-footer p{font-weight:400;}
html[lang="en"] .select-link__btn{font-weight:400;}
html[lang="en"] .ft-utill > li > a{font-weight:400;}
html[lang="en"] .ft-copy{font-weight:400;}
html[lang="en"] .ft-time .list-time > li > span{font-weight:400;}
html[lang="en"] .center-txt > span{font-weight:400;}
html[lang="en"] .service-box > a .service-txt em{font-weight:400;}
html[lang="en"] .service-call__info > div em{font-weight:400;}
html[lang="en"] .main-location .con_tab li p{font-weight:400;}
html[lang="en"] [data-list="check"] > li > span{font-weight:400;}
html[lang="en"] [data-list="check"] > li > em{font-weight:400;}
html[lang="en"] #content table.table tbody td div span{font-weight:400;}
html[lang="en"] .cont-tit > h3{font-weight:400;}
html[lang="en"] .map-info > li > span{font-weight:400;}
html[lang="en"] .info-bottom__box .tit em{font-weight:400;}
html[lang="en"] .info-bottom__box .cont [data-list="dot"] > li > span{font-weight:400;}
html[lang="en"] .system-list > li .txt > em{font-weight:400;}
html[lang="en"] .list-part > li .txt [data-list="square"] > li > span{font-weight:400;}
html[lang="en"] .program-list__item .cont .list-txt > li > span i{font-weight:400;}
html[lang="en"] .program-list__item .cont .list-txt > li > i{font-weight:400;}
html[lang="en"] .h-accordion-list > .list__wrap .list--off .list__txt span{font-weight:400;}
html[lang="en"] .reference em{font-weight:400;}
html[lang="en"] .anesthesia-txt > h3{font-weight:400;}
html[lang="en"] .clinic-doctor .cont-tit--02 > h3{font-weight:400;}
html[lang="en"] .tab-title .cont > span{font-weight:400;}
html[lang="en"] .eye-equipment .txt > span{font-weight:400;}
html[lang="en"] .tab-title > span{font-weight:400;}
html[lang="en"] .about-cancer .box-flex .txt .tit > span{font-weight:400;}
html[lang="en"] .cat-page .box-gray p{font-weight:400;}
html[lang="en"] .surgery-tab__conBox p{font-weight:400;}
html[lang="en"] .list-superdog > li > span{font-weight:400;}
html[lang="en"] .special-page.sub0202 .tab_container .list-img > li .txt > em{font-weight:400;}
html[lang="en"] .h-accordion-list > .list__wrap.on .list--on .list__title div > span{font-weight:400;}
html[lang="en"] .box-brown > span{font-weight:400;}
html[lang="en"] .salab-process .step-list > li .txt .tit em{font-weight:400;}
html[lang="en"] .salab-process .step-list > li .txt .tit > i{font-weight:400;}
html[lang="en"] .cell-type > div > span{font-weight:400;}
html[lang="en"] .special_sub03 .facility .cont-tit--02 > h3{font-weight:400;}
html[lang="en"] .part-right .skin-part__list > li .txt em{font-weight:400;}
html[lang="en"] .box_double.shop div.search p{font-weight:400;}
html[lang="en"] .box_double.shop div.map a[data-map]{font-weight:400;}
html[lang="en"] .area_calendar .calendar table th{font-weight:400;}
html[lang="en"] .area_calendar .list li > a{font-weight:400;}
html[lang="en"] .area_calendar .list li > span{font-weight:400;}
html[lang="en"] .productList > li i[class^="type"]{font-weight:400;}
html[lang="en"] .productList > li .btn a{font-weight:400;}
html[lang="en"] .productView .option li{font-weight:400;}
html[lang="en"] .productWrite .tip{font-weight:400;}
html[lang="en"] .reserve_state{font-weight:400;}
html[lang="en"] .area_searchApply .title{font-weight:400;}
html[lang="en"] .area_searchApply ul li label{font-weight:400;}
html[lang="en"] .us-region .us-title{font-weight:400;}
html[lang="en"] .puq-aside h2{font-weight:400;}

/* 2) GNB — 영문 8개 항목 (2026-10-12 암센터 추가: 국문과 같은 8개. 최상위 라벨은 요청서 원칙 6 "메뉴는 짧고 명확하게" — 영상은 상위 "Imaging",
      하위 "Diagnostic Imaging Center"). 라벨 합계가 국문보다 길어 간격(padding)을 폭별로 줄여 1025~1920 에서 한 줄 + 언어 토글이 화면 안에 들어오게 한다.
      측정: 스크래치패드 pptr/gnbtry.js (lsRight < 뷰포트−10, 항목 간격·로고 간격) */
html[lang="en"] #header nav .gnb > li > a > span{letter-spacing:-0.005em; white-space:nowrap;}
@media all and (min-width:1025px){
	html[lang="en"] #header nav .gnb > li > a{padding:40rem 16rem;}
	html[lang="en"] #header.hd_pops nav .gnb > li > a{padding:40rem 16rem;}
	html[lang="en"] #header nav .gnb > li > a > span{font-size:17rem;}
	html[lang="en"] #header nav .gnb > li .box{min-height:290rem;}
}
@media all and (min-width:1401px){
	html[lang="en"] #header nav .gnb > li > a > span{font-size:17.5rem;}
}
/* 아래 두 블록은 데스크톱 GNB 전용 — min-width 하한이 없으면 모바일 패널(≤1024)의 메뉴 항목에도 padding:40rem 이 걸려 간격이 벌어진다(2026-09-22 검수) */
/* 2026-10-29 로고↔메뉴 간격 재조정(공식 영문 로고 반영 후 측정): 1325~1500·1575~1600 에서 로고와 첫 메뉴 사이가 20px 뿐이고
   nav 가 .gnb_area 를 10~17px 넘쳐 토글이 바깥 여백을 파고들었다(국문은 116~158px). 1301~1600 은 글자 16→15.5rem·간격 12→10rem,
   햄버거·토글 여백 30/26→20/18rem 으로 약 65px 확보(로고 간격 ≥70px), 1601~1700 은 열 간격을 건드리면 메가메뉴 이웃 라벨이
   12px 아래로 붙으므로 여백(.menu/.lang-switch/.gnb_area)만 줄인다. 측정 스크립트는 세션 플레이라이트(README 2026-10-29 절). */
@media all and (max-width:1600px) and (min-width:1025px){
	html[lang="en"] #header nav .gnb > li > a,
	html[lang="en"] #header.hd_pops nav .gnb > li > a{padding:40rem 10rem;}
	html[lang="en"] #header nav .gnb > li > a > span{font-size:15.5rem;}
	html[lang="en"] #header .menu{margin-left:20rem;}
	html[lang="en"] #header .lang-switch{margin-left:18rem;}
}
@media all and (max-width:1600px) and (min-width:1301px){
	html[lang="en"] #header .gnb_area{margin:0 40rem;} /* 국문 50rem — 로고 간격 +10px (1325~1400 이 46px 로 가장 좁음) */
}
@media all and (max-width:1700px) and (min-width:1601px){
	html[lang="en"] #header .gnb_area{margin:0 40rem;}
	html[lang="en"] #header .menu{margin-left:20rem;}
	html[lang="en"] #header .lang-switch{margin-left:18rem;}
}
@media all and (max-width:1300px) and (min-width:1025px){
	html[lang="en"] #header .gnb_area{margin:0 22rem;}
	html[lang="en"] #header nav .gnb > li > a,
	html[lang="en"] #header.hd_pops nav .gnb > li > a{padding:40rem 8.5rem;}
	html[lang="en"] #header nav .gnb > li > a > span{font-size:14.5rem;}
	html[lang="en"] #header .menu{margin-left:14rem;}
	html[lang="en"] #header .lang-switch{margin-left:16rem;}
}
/* ≤1100: 옛 영문 로고(가로 긴 lockup) 기준으로 메뉴를 한 단계 키워 뒀던 블록 — 공식 로고(가로 짧음)에서는 로고 간격이 19~26px 로 줄어
   2026-10-29 글자 15→14.5rem·간격 11→9rem 으로 되돌림(1101~1300 과 같은 단계, 로고 간격 ≥60px) */
@media all and (max-width:1100px) and (min-width:1025px){
	html[lang="en"] #header nav .gnb > li > a,
	html[lang="en"] #header.hd_pops nav .gnb > li > a{padding:40rem 9rem;}
	html[lang="en"] #header nav .gnb > li > a > span{font-size:14.5rem;}
}
/* 모바일 메뉴 하단 퀵바: 국문은 3그룹(오시는길·카카오·블로그) 3열 그리드인데 영문은 2그룹(Directions·Email) → 2열, 이메일은 한 줄씩 */
@media (max-width:1024px){
	html[lang="en"] #header nav .m_quick.mq{grid-template-columns:repeat(2, minmax(0, 1fr));}
	html[lang="en"] #header nav .m_quick.mq .mq-group:last-of-type{border-right:0;}
	html[lang="en"] #header nav .m_quick.mq .mq-chips.mq-chips--link a[href^="mailto:"]{display:block; white-space:nowrap; font-size:12.5rem; line-height:1.7;}
	html[lang="en"] #header nav .m_quick.mq .mq-chips.mq-chips--link br{display:none;}
}
/* 풀메뉴(PC 햄버거): 2차 메뉴 영문 라벨 줄바꿈 허용 */
html[lang="en"] .full_menu [data-full="menu"] > li .box > ul a{white-space:normal;}
html[lang="en"] .full_menu [data-full="menu"] > li > a{font-size:24rem;}


/* 메인 — 센터 카드 이미지 비율 보정, 텍스트 길이 */
html[lang="en"] .main-center__list .swiper-slide img{object-fit:cover;}
html[lang="en"] .main-center__list .arrow img{width:auto; height:13rem; object-fit:contain;} /* 국문 규칙(width:100%)이 화살표 아이콘까지 늘려 납작해지고, 위 cover 가 겹치면 흰 막대만 남음 */
html[lang="en"] .main-center__txt h3{word-break:normal;}
html[lang="en"] .service-call__info h3{font-size:30rem; letter-spacing:0;}
html[lang="en"] .service-txt .txt-wrap span br{display:none;}

/* 메인 — 안내(연락/방문) 섹션: 기존 .main-news 그리드 자리를 대체 */

/* 메인 — 지점/지도: 카카오 지도 이미지 대신 Google 지도 임베드 */
html[lang="en"] .main-location .sec_map .map{background:#eee;}
html[lang="en"] .main-location .sec_map .map i{display:none;}
html[lang="en"] .main-location .sec_map .map iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
html[lang="en"] .main-location .branch-txt p{word-break:normal;}
html[lang="en"] .main-location .con_branch > li > i{display:block;}

/* 4) 공통 컴포넌트 */
html[lang="en"] .list-time > li > em{width:110rem; white-space:nowrap;}
html[lang="en"] .ft-time__box > h3{white-space:nowrap;}
html[lang="en"] .ft-time .list-time > li > span a{color:inherit;}
html[lang="en"] .role-list .btn{white-space:nowrap;}
html[lang="en"] .snb ul li a span{white-space:nowrap;}
html[lang="en"] .area_guide h3{margin:22rem 0 8rem; font-size:16rem;}
html[lang="en"] .area_guide h3.mt0{margin-top:0;}
html[lang="en"] .area_guide p, html[lang="en"] .area_guide li{word-break:normal;}

@media (max-width:1024px){
	html[lang="en"] .sub-visual__text h2{font-size:46rem;}
	/* 센터 소개 텍스트: 모바일은 국문 규칙(relative/center) 그대로 */
	html[lang="en"] .main-center__txt{width:auto;}
	html[lang="en"] .main-center__txt > span{max-width:none;}
	html[lang="en"] .main-location .branch-txt div span{white-space:nowrap;}
}
@media (max-width:768px){
	html[lang="en"] .list-time > li > em{width:auto; min-width:96rem;}
}
@media (max-width:480px){
	html[lang="en"] .sub-visual__text h2{font-size:34rem;}
}

/* 모바일 본문 좌우 여백: 국문은 문장이 짧고 <br> 로 끊겨 가운데 정렬된 짧은 줄이 많아 실제 .inr 여백(390px 에서 13px)보다 넓어 보이지만
   영문 문단은 그 13px 까지 꽉 차서 여백이 없어 보임(2026-09-22 사용자 지적) → 본문 블록에만 좌우 14rem 을 더해 체감 여백을 국문 수준(≈27px)으로 */
@media (max-width:768px){
	html[lang="en"] #content .cont-tit .cont, html[lang="en"] #content .inr > .txt, html[lang="en"] #content .inr > p,
	html[lang="en"] #content .box-gray > p, html[lang="en"] #content .box-txt, html[lang="en"] #content .anesthesia-txt,
	html[lang="en"] #content .area_guide, html[lang="en"] #content .text_risk, html[lang="en"] #content .sub-tit__line > p,
	html[lang="en"] #content .cont-tit > h3{padding-left:14rem; padding-right:14rem; box-sizing:border-box;}
}
/* 지점 페이지 Location 앵커(#location): 퀵바 Directions 에서 바로 지도 섹션으로 — 고정 헤더에 가리지 않게 */
html[lang="en"] #location{scroll-margin-top:120rem;}
@media (max-width:1024px){ html[lang="en"] #location{scroll-margin-top:80rem;} }
/* 국문→영문 전환 시 대응 페이지가 없을 때 홈 상단 안내 */
html[lang="en"] .en-notice{margin:-40rem 0 30rem; padding:16rem 0; background:#fff7f2; border-top:1rem solid #fbe0d0; border-bottom:1rem solid #fbe0d0;}
html[lang="en"] .en-notice p{margin:0; font-size:15rem; color:#555; line-height:1.6em;}
html[lang="en"] .en-notice a{margin-left:8rem; font-weight:600; color:var(--color-point); text-decoration:underline;}

/* 메인 — 센터 소개 텍스트 블록: 흰 배경 영역(720rem) 안에 머물도록 폭 제한 (데스크톱만 — 모바일은 위 1024 규칙의 width:auto 가 이겨야 하므로 min-width 로 감싼다) */
@media (min-width:1025px){
	/* 기본(>1700px): 국문은 left:50%-700rem 에 두는데 영문 본문(540rem)은 띠(720rem)를 넘어 슬라이더에 깔린다(1920px 에서 260→800px).
	   컨테이너 정렬은 유지하되 폭을 띠 안으로 제한 — 1920px 기준 440rem. (국문도 2200px 이상에서는 같은 구조적 한계가 있음) */
	html[lang="en"] .main-center__txt{left:max(40rem, calc(50% - 700rem)); margin-left:0; width:calc(720rem - 20rem - max(40rem, 50% - 700rem));}
}
html[lang="en"] .main-center__txt > h3{font-size:34rem; line-height:1.3em;}
html[lang="en"] .main-center__txt > span{display:block; max-width:30em;}
/* 메인 카드 설명(센터 카드·서비스 카드): 국문은 한 줄이라 line-height 1em 인데 영문은 1025~1550px 에서 두 줄로 감겨 행간이 붙음 */
html[lang="en"] .center-txt > span, html[lang="en"] .service-box > a .service-txt em{line-height:1.4em;}
/* 메인 서비스 카드(응급수술·혈액투석) 모바일 가독성: 국문은 사진 위 30% 오버레이 + 14rem/1.2 한 줄이지만 영문은 2~3줄이라
   사진 디테일과 겹친다 → 글 영역 뒤에 하단 그라데이션을 깔고 글자·행간을 조금 키운다 (≤768 은 국문이 설명(span)을 항상 펼치는 구간) */
@media (max-width:768px){
	/* 국문은 텍스트 블록이 사진 위 absolute 라 영문처럼 글이 길면 위쪽이 잘리고 여백이 불균등 → 사진을 배경으로 깔고 텍스트 블록을 흐름 안에 둔다(카드 높이 = 사진 띠 + 글 + 균등 여백) */
	html[lang="en"] .service-box > a .service-img{position:absolute; top:0; left:0; width:100%; height:100%;}
	html[lang="en"] .service-box > a .service-img img{height:100%; object-fit:cover; object-position:60% 35%;}
	html[lang="en"] .service-box > a .service-txt{position:relative; left:auto; bottom:auto; padding:68rem 26rem 26rem;} /* 사진 띠 68rem ≈ 국문 카드의 텍스트 시작 위치(62~70px) */
	html[lang="en"] .service-box > a .service-txt:before{content:''; position:absolute; left:0; right:0; bottom:0; height:100%; background:linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0) 100%); pointer-events:none;}
	html[lang="en"] .service-box > a .service-txt .txt-wrap, html[lang="en"] .service-box > a .service-txt .arrow{position:relative; z-index:1;}
	html[lang="en"] .service-box > a .service-txt h3{line-height:1.15em; text-shadow:0 1px 2px rgba(0,0,0,0.35);}
	html[lang="en"] .service-box > a .service-txt em{font-size:15.5rem; line-height:1.45em; color:rgba(255,255,255,0.95); text-shadow:0 1px 2px rgba(0,0,0,0.35);}
	html[lang="en"] .service-box > a .service-txt span{font-size:15rem; line-height:1.5em; font-weight:400; color:rgba(255,255,255,0.92); padding-left:12rem; text-shadow:0 1px 2px rgba(0,0,0,0.35);}
	html[lang="en"] .service-box > a .service-txt span:before{background:var(--color-point);}
}
@media (max-width:480px){
	html[lang="en"] .service-box > a .service-txt{padding:66rem 22rem 22rem;}
	html[lang="en"] .service-box > a .service-txt em{font-size:15rem; line-height:1.45em;}
	html[lang="en"] .service-box > a .service-txt span{font-size:14.5rem; line-height:1.5em;}
}
/* 메인 — 응급 카드 전화번호: 번호 중간에서 줄바꿈되지 않게 */
html[lang="en"] .service-call__info > h3{white-space:nowrap; letter-spacing:0;}
@media (max-width:768px){ html[lang="en"] .service-call__info > h3{font-size:21rem;} }
@media (max-width:480px){ html[lang="en"] .service-call__info > h3{font-size:19rem;} }

/* 진료시간 목록 불렛(.list-time > li:before): 국문은 라벨 line-height 1em 기준 top:6rem 인데 영문 라벨은 line-height 1.6(위 규칙)이라
   첫 줄 중앙이 ~13px 로 내려감 → 불렛도 첫 줄 중앙(11px)으로. 푸터(≤480)는 국문이 행을 세로 중앙 정렬해 시간이 두 줄이면 더 어긋남 → 상단 정렬 */
html[lang="en"] .list-time > li:before{top:11px;}
@media (max-width:480px){
	html[lang="en"] .ft-time .list-time > li{align-items:flex-start;}
}
/* 푸터 — 유틸 링크·진료비 버튼 영문 길이 */
html[lang="en"] .ft-utill > li > a{white-space:nowrap;}
html[lang="en"] .ft-time__box .price-book{width:auto; padding:0 14rem;}
html[lang="en"] .ft-time__box .price-book > span{white-space:nowrap;}

/* 사이드 퀵메뉴 — 지점 링크를 세로로 쌓기 (폭 108rem) */
html[lang="en"] .quick-actions--link a{display:block;}
html[lang="en"] .quick-actions--link .qdot{display:none;}

/* 메인 지점 버튼: 영문은 카카오 대신 이메일(mailto) — 아이콘도 메일로. 라벨 길이만큼 폭 자동 (2026-09-22 사용자 결정: 영문 문의 채널은 전화·이메일만) */
html[lang="en"] .branch-btn > a{width:auto; min-width:148rem; padding:0 18rem;}
html[lang="en"] .branch-btn .btn.gray > span:before{background-image:url(/images/content/ic-mail.svg);}

/* 지점 페이지 — Google 지도 임베드 (국문 카카오 지도 자리) */
html[lang="en"] .branch-info .map-embed{position:relative; width:100%; height:380rem; margin:0 0 20rem; border-radius:12rem; overflow:hidden; background:#eee;}
html[lang="en"] .branch-info .map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
html[lang="en"] .branch-info .map-info li span small{display:block; margin-top:4rem; font-size:13rem; color:#888;}
/* 줄바꿈(2026-09-22): 본문 <br> 은 생성기(en_page.strip_prose_br)가 걷어내고, 제목의 <br> 은 데스크톱 2줄 균형용으로만 두되 좁은 화면에서는 해제 */
@media (max-width:768px){
	html[lang="en"] .cont-tit > h3 br, html[lang="en"] .sub-tit__line h3 br, html[lang="en"] .step-list .txt h3 br, html[lang="en"] .pillar-title br,
	html[lang="en"] .sdifferent-list .tit h3 br, html[lang="en"] .location-txt h3 br, html[lang="en"] .box-wt .box-tit .tit > h3 br{display:none;}
}
/* 연락처 블록: 영문은 카카오 항목이 없어 Phone·Email 2열(.col02), SALAB 처럼 항목이 하나면 전폭 */
html[lang="en"] .branch-info .contact li:only-child{width:100%;}
/* 우측 퀵바·모바일 퀵메뉴: 영문은 전화(카카오 아이콘) 대신 이메일 — 회색/포인트색 메일 아이콘은 images/common/en/ (2026-09-22) */
html[lang="en"] .qi.mail{background-image:url(/images/common/en/ic-mail.svg); width:22rem; height:18rem;}
html[lang="en"] .quick-item:has(.quick-actions:hover) .qi.mail{background-image:url(/images/common/en/ic-mail-on.svg);}
html[lang="en"] .quick-item:has(.qi.mail) .quick-head, html[lang="en"] .quick-item:has(.qi.mail) .quick-head *{cursor:default !important;}
/* 푸터 진료비: 영문 PDF 버튼 옆의 국문 원본(법정 게시물) 작은 링크 (2026-09-22) */
html[lang="en"] .price-btn{display:flex; align-items:center; flex-wrap:wrap; gap:6rem 14rem;}
html[lang="en"] .price-btn .price-ko{font-size:13rem; color:#999; text-decoration:underline; text-underline-offset:3rem; white-space:nowrap;}
html[lang="en"] .price-btn .price-ko:hover{color:#fff;}
@media (max-width:768px){ html[lang="en"] .branch-info .map-embed{height:260rem;} }
html[lang="en"] .map-info > li{height:auto; min-height:65rem;}
html[lang="en"] .map-info > li > em{width:110rem; white-space:nowrap;}
html[lang="en"] .map-info > li > span{width:calc(100% - 110rem);}
html[lang="en"] .branch-info .map-info li span small{color:#fff; opacity:0.85;}

/* 의료진 상세 — 목록 복귀 버튼 */
html[lang="en"] .staff-back{margin:50rem 0 0; text-align:center;}

/* 의료진 목록 — 역할 필터 줄바꿈, 이름/직함 배치 (영문 직함이 길어 h3 옆에 두면 이름이 쪼개짐) */
@media all and (min-width:1025px){ html[lang="en"] .role-list{flex-wrap:wrap; overflow:visible; white-space:normal;} }
html[lang="en"] .role-list .btn{min-width:0; padding:8rem 14rem; font-size:15rem;}
html[lang="en"] .staff-list > li .txt .tit{flex-direction:column; align-items:flex-start; gap:8rem; padding-right:44rem;}
html[lang="en"] .staff-list > li .txt .tit h3{white-space:nowrap; line-height:1.1em;}
html[lang="en"] .staff-list > li .txt .tit em{margin-left:0; color:var(--color-point); font-weight:500;}
html[lang="en"] .staff-detail .info-top .tit{flex-wrap:wrap; gap:6rem 12rem;}
html[lang="en"] .staff-detail .info-top .tit h3{white-space:nowrap;}
html[lang="en"] .staff-detail .txt .cont [data-list="dot"] > li > span{word-break:normal;}
html[lang="en"] .staff-back .btn{display:inline-flex; align-items:center; justify-content:center; height:52rem; padding:0 26rem; border:1rem solid #ccc; border-radius:8rem; color:#333; transition:all .2s ease;}
html[lang="en"] .staff-back .btn:hover{border-color:var(--color-point); color:var(--color-point);}
html[lang="en"] .staff-back .btn > span{font-size:16rem; font-weight:500;}

/* 인사말 — 국문의 SVG 슬로건 대신 텍스트 슬로건 */
html[lang="en"] .about-page .slogan--text{display:flex; flex-direction:column; align-items:center; gap:14rem; padding:30rem 0 10rem;}
html[lang="en"] .about-page .slogan--text em{font-style:normal; font-family:var(--font-eng); font-size:42rem; font-weight:700; letter-spacing:0.04em; color:var(--color-point); line-height:1.1em;}
html[lang="en"] .about-page .slogan--text span{font-size:18rem; color:#666; line-height:1.5em; max-width:36em;}
@media (max-width:768px){ html[lang="en"] .about-page .slogan--text em{font-size:28rem;} html[lang="en"] .about-page .slogan--text span{font-size:15rem;} }

/* 연혁 — SVG 슬로건(국문 포함) 대체 */
html[lang="en"] .history-tit .history-slogan{display:flex; align-items:center; gap:14rem; margin:0 0 18rem;}
html[lang="en"] .history-tit .history-slogan .symbol{display:block; height:56rem;}
html[lang="en"] .history-tit .history-slogan .symbol img{height:100%; width:auto;}
html[lang="en"] .history-tit .history-slogan strong{display:block; font-family:var(--font-eng); font-size:34rem; font-weight:700; color:var(--color-point); line-height:1.1em; letter-spacing:0.02em;}
html[lang="en"] .history-tit .history-slogan em{display:block; margin-top:4rem; font-style:normal; font-size:16rem; color:#f6a27f; line-height:1.4em;}
html[lang="en"] .about-page .box-txt p{max-width:64em; margin-left:auto; margin-right:auto;}
@media (max-width:768px){ html[lang="en"] .history-tit .history-slogan strong{font-size:24rem;} html[lang="en"] .history-tit .history-slogan .symbol{height:40rem;} }

/* 내과 — 협진 시스템: 국문 인포그래픽 대신 HTML 목록을 2열 그리드로 (모든 뷰포트) */
html[lang="en"] .system-cont .mobile{display:block;}
html[lang="en"] .system-cont .system-center{display:flex; justify-content:center; margin:0 0 24rem;}
html[lang="en"] .system-cont .system-center img{height:64rem;}
html[lang="en"] .system-img__list{display:grid; grid-template-columns:1fr 1fr; gap:18rem; margin:0;}
html[lang="en"] .system-img__list > li{margin:0; display:flex; flex-direction:column;}
html[lang="en"] .system-img__list > li .tit > h3{font-size:19rem; line-height:1.3em;}
html[lang="en"] .system-img__list > li .txt{flex:1;}
html[lang="en"] .system-img__list > li .txt ul{height:100%; box-sizing:border-box;}
@media (max-width:768px){ html[lang="en"] .system-img__list{grid-template-columns:1fr;} }

/* 안심입원 — 카카오톡 목업(국문 이미지) 대체 HTML 목업 */
html[lang="en"] .admission-cs .admission-cont .img{align-items:center; padding:30rem;}
html[lang="en"] .chat-mock{width:300rem; max-width:100%; border-radius:26rem; background:#b2c7d9; padding:18rem 14rem 20rem; box-sizing:border-box; box-shadow:0 14rem 40rem rgba(0,0,0,0.12); font-size:13rem; line-height:1.5;}
html[lang="en"] .chat-mock__head{margin:0 0 14rem; padding:0 4rem; font-size:14rem; font-weight:700; color:#222;}
html[lang="en"] .chat-mock__head:before{content:'\2190'; margin-right:8rem; color:#333;}
html[lang="en"] .chat-mock__bubble{position:relative; margin:0 0 12rem; padding:12rem 14rem; border-radius:12rem; background:#fef01b; color:#222; font-size:12.5rem;}
html[lang="en"] .chat-mock__bubble em{display:block; margin-top:6rem; font-style:normal; font-size:max(12px, 11rem); color:#666;}
html[lang="en"] .chat-mock__photo{border-radius:12rem; overflow:hidden; aspect-ratio:4/3;}
html[lang="en"] .chat-mock__photo img{width:100%; height:100%; object-fit:cover; display:block;}
/* 안심입원 — 안아주개 캠페인 카드 */
html[lang="en"] .admission-info .admission-cont .img{background:linear-gradient(160deg, #fde7e0 0%, #fbd3c6 100%); border-radius:20rem; display:flex; align-items:center; justify-content:center; padding:30rem; box-sizing:border-box;} /* padding 포함 폭 — 390/600 에서 뷰포트 넘침 수정(2026-09-22) */
html[lang="en"] .hug-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14rem; max-width:320rem;}
html[lang="en"] .hug-card__title em{display:inline-block; padding:4rem 12rem; border-radius:50rem; background:#f58957; color:#fff; font-style:normal; font-size:12rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;}
html[lang="en"] .hug-card__title strong{display:block; margin-top:8rem; font-family:var(--font-eng); font-size:40rem; font-weight:800; color:#f58957; line-height:1em;}
html[lang="en"] .hug-card img{width:230rem; max-width:100%; border-radius:8rem; box-shadow:0 10rem 24rem rgba(0,0,0,0.08);}
html[lang="en"] .hug-card p{margin:0; font-size:14rem; color:#7a5348; line-height:1.55em;}
html[lang="en"] .box-video .video-note{margin:16rem 0 0; text-align:center; font-size:14rem; color:#888;}

/* 안과 진료과목 — 녹내장 흐름도 (국문 이미지 대체) */
html[lang="en"] .flow-chart{margin:16rem 0 0; padding:26rem; border:1rem solid #eee; border-radius:14rem; background:#fff;}
html[lang="en"] .flow-chart ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:stretch; gap:10rem;}
html[lang="en"] .flow-chart li{position:relative; display:flex; flex-direction:column; justify-content:center; min-width:150rem; padding:14rem 16rem; border:1rem solid #cab796; border-radius:8rem; font-size:14.5rem; font-weight:500; color:#444; line-height:1.35em; text-align:center; box-sizing:border-box;}
html[lang="en"] .flow-chart li small{display:block; margin-top:6rem; font-size:12rem; font-weight:400; color:#888; line-height:1.4em;}
html[lang="en"] .flow-chart li.is-start{border-color:var(--color-point); color:var(--color-point); font-weight:600;}
html[lang="en"] .flow-chart li.is-cond{background:#f8f8f8; border-color:#ddd; color:#666;}
html[lang="en"] .flow-chart ol > li + li:before{content:''; position:absolute; left:-10rem; top:50%; width:0; height:0; border:5rem solid transparent; border-left-color:#bbb; transform:translateY(-50%);}
html[lang="en"] .flow-main{margin-bottom:10rem;}
html[lang="en"] .flow-branches{display:flex; flex-direction:column; gap:10rem; padding-left:24rem; border-left:2rem dashed #ddd;}
@media (max-width:768px){
	html[lang="en"] .flow-chart ol{flex-direction:column;}
	html[lang="en"] .flow-chart ol > li + li:before{left:50%; top:-10rem; transform:translateX(-50%); border:5rem solid transparent; border-top-color:#bbb;}
	html[lang="en"] .flow-branches{padding-left:14rem;}
}
html[lang="en"] .eye-care{padding:40rem 0;}
html[lang="en"] .flow-chart--screen .flow-main li{flex:1 1 130rem; min-width:0;}
html[lang="en"] .flow-chart .flow-note{margin:18rem 0 10rem; font-size:14rem; color:#777;}
html[lang="en"] .flow-branches--grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:12rem; padding-left:0; border-left:0;}
html[lang="en"] .flow-branches--grid .flow-branch{flex-wrap:nowrap;}
html[lang="en"] .flow-branches--grid .flow-branch li{flex:1 1 0; min-width:0;}
@media (max-width:768px){ html[lang="en"] .flow-branches--grid{grid-template-columns:1fr;} html[lang="en"] .flow-branches--grid .flow-branch{flex-direction:column;} }

/* 수혈 — 슈퍼독 로고(국문 텍스트 제거판) + HTML 라벨 */
html[lang="en"] .logo-superdog{display:flex; flex-direction:column; align-items:center; gap:6rem;}
html[lang="en"] .logo-superdog__label{font-style:normal; font-family:var(--font-eng); font-size:22rem; font-weight:800; color:#e23b2f; letter-spacing:0.04em; text-transform:uppercase;}

/* 줄기세포 — 종류 박스(영문 라벨 길이), 적응증 원형 라벨(원 안에 두 줄로) */
html[lang="en"] .salab-type__list > li{width:auto; min-width:150rem; height:auto; min-height:44rem; padding:8rem 16rem;}
html[lang="en"] .salab-type__list > li > span{line-height:1.2;}
html[lang="en"] .care-list > li{padding:0 16rem; box-sizing:border-box;}
html[lang="en"] .care-list > li > span{font-size:18rem; line-height:1.15; text-align:center;}
html[lang="en"] .care-list > li > i{font-size:15rem; position:relative; z-index:2; max-width:72%; text-align:center; line-height:1.2;} /* 두 줄 설명(IBD)이 원 곡선 밖으로 나가지 않게 가운데 좁게 */
@media (max-width:1300px){
	html[lang="en"] .care-list > li > span{font-size:16rem;}
	html[lang="en"] .care-list > li > i{font-size:13rem;}
}
@media (max-width:768px){
	html[lang="en"] .salab-type__list > li{min-width:0; padding:8rem 6rem;}
	html[lang="en"] .salab-type__list > li > span{font-size:13rem;}
	html[lang="en"] .care-list > li{padding:0 14rem;}
	html[lang="en"] .care-list > li > span{font-size:13rem;}
	html[lang="en"] .care-list > li > i{font-size:max(12px, 11rem); max-width:90%; overflow-wrap:normal; word-break:normal;}
	/* 절차 카드의 안내 박스: 'Hospitalization' 같은 긴 단어가 좁은 박스에서 쪼개지지 않게 */
	html[lang="en"] .salab-cs .step-list > li .txt .info{width:100%; padding:8rem;}
	html[lang="en"] .salab-cs .step-list > li .txt .info em{font-size:13rem;}
	html[lang="en"] .salab-cs .step-list > li .txt .info em br{display:none;}
}

/* 진료과목 그리드(.list-part, 고정 높이 + 우하단 절대배치 아이콘): 영문 목록이 길어 아이콘과 겹치지 않게 높이 자동 + 하단 여백 확보 */
html[lang="en"] .list-part > li{height:auto; min-height:380rem; padding-bottom:100rem;}
html[lang="en"] .cat_sub01 .list-part > li{padding-bottom:95rem;}
html[lang="en"] .surgery_sub01 .list-part > li{min-height:0; padding-bottom:30rem;}
html[lang="en"] .mri-info .list-part > li{min-height:0; padding-bottom:35rem;}
@media (max-width:1300px){
	html[lang="en"] .list-part > li{min-height:360rem; padding-bottom:95rem;}
}
@media (max-width:1024px){
	html[lang="en"] .list-part > li{min-height:360rem; padding-bottom:90rem;}
}
@media (max-width:620px){
	/* 국문 CSS 가 여기서부터 height:auto + .txt 하단 여백으로 아이콘 자리를 확보함 */
	html[lang="en"] .list-part > li{min-height:0; padding-bottom:20rem;}
	html[lang="en"] .cat_sub01 .list-part > li{padding-bottom:20rem;}
}

/* 검사 안내 행(.cell-type: 알약형 제목 + 설명): 영문 설명 줄 수가 달라 제목 높이가 어긋나므로 위 정렬 */
@media (min-width:769px){
	html[lang="en"] .cell-type > div{justify-content:flex-start;}
}

/* 치과 진료 흐름: 영문 제목이 두 줄이 되면 STEP 배지와 겹침 → 제목 상단 여백·최소 높이 확보, 하위 항목도 높이 자동 */
html[lang="en"] .dental-process__item > .title{height:auto; min-height:80rem; padding:18rem 14rem 12rem; font-size:18rem;}
html[lang="en"] .dental-process__item > ul > li{height:auto; min-height:68rem; padding:10rem 12rem;}
html[lang="en"] .dental-process__item > ul > li > span{font-size:16rem;}
@media (max-width:1024px){
	html[lang="en"] .dental-process__item > .title{font-size:16rem;}
	html[lang="en"] .dental-process__item > ul > li > span{font-size:15rem;}
}

/* 박스 상단 라벨(.box01 > em, 고정 폭 104rem): 영문 라벨은 내용 폭에 맞춤 */
html[lang="en"] .box01 > em{width:auto; min-width:104rem; padding:10rem 20rem; white-space:nowrap;}
@media (max-width:768px){ html[lang="en"] .box01 > em{min-width:85rem; padding:8rem 14rem;} }
@media (max-width:480px){ html[lang="en"] .box01 > em{min-width:60rem; padding:5rem 10rem;} }

/* 대형견 관절 — 사례 이미지 캡션(고정 높이 80/90rem): 영문 3줄 캡션이 잘리지 않게 높이 자동 */
html[lang="en"] .special-page.sub0202 .h-accordion-list .list-img > li .txt{height:auto; min-height:80rem; font-size:15rem;}
html[lang="en"] .special-page.sub0202 .tab_container .list-img > li .txt{height:auto; min-height:90rem;}

/* 메인 — 센터 소개 텍스트: 국문 흰 띠(.main-center:before) 폭이 구간별로 720→600→450→320rem 으로 줄어드는데
   영문 본문은 국문보다 길어 띠 안에 맞춰 폭·글자 크기를 구간별로 지정한다 (≤768 은 국문 규칙대로 relative/center) */
@media (max-width:1700px) and (min-width:1025px){
	html[lang="en"] .main-center__txt{left:40rem; margin-left:0; width:calc(600rem - 80rem);}
}
@media (max-width:1550px) and (min-width:1025px){
	html[lang="en"] .main-center__txt{left:40rem; width:calc(450rem - 76rem);}
	html[lang="en"] .main-center__txt > h3{font-size:28rem;}
	html[lang="en"] .main-center__txt > span{margin-top:14rem; font-size:16rem; line-height:1.6em;}
}
@media (max-width:1024px) and (min-width:769px){
	html[lang="en"] .main-center__txt{left:0; width:calc(320rem - 24rem);}
	html[lang="en"] .main-center__txt > h3{font-size:23rem;}
	html[lang="en"] .main-center__txt > span{margin-top:10rem; font-size:14.5rem; line-height:1.55em;}
}

/* 서브 탭(.snb): 영문 라벨이 길어 좁은 화면에서 알약 밖으로 넘침(예: Internal Medicine Center | Emergency & Critical Care | Collaborative Care)
   → 국문처럼 탭 행은 한 줄로 두되 넘치지 않게: 알약이 화면 폭 안에서 탭들에 폭을 나눠 주고(내용 비례, 축소 허용), 긴 라벨은 알약 안에서 두 줄로 접는다.
   (가로 스크롤 방식은 잘려 보여 사용자 반려 — 2026-09-22) */
@media (max-width:768px){
	html[lang="en"] .snb{padding:0 12rem;}
	html[lang="en"] .snb > ul{width:100%; max-width:560rem; height:auto; min-height:46rem; padding:3rem 4rem; border-radius:28rem; box-sizing:border-box;}
	html[lang="en"] .snb ul > li, html[lang="en"] .internal_sub01 .snb ul > li{flex:1 1 0; width:auto; min-width:0; height:auto; align-self:stretch; display:flex;} /* 균등 분배 — 내용 비례(1 1 auto)면 짧은 라벨 열이 좁아져 이웃 긴 라벨이 3줄이 됨 */
	html[lang="en"] .snb ul > li > a{min-height:40rem; padding:5rem 10rem; font-size:15rem; line-height:1.2em;}
	html[lang="en"] .snb ul > li > a > span{width:auto; white-space:normal; word-break:normal; overflow-wrap:break-word; text-align:center;}
	html[lang="en"] .snb ul > li:before{width:100%;}
}
@media (max-width:480px){
	html[lang="en"] .snb{padding:0 10rem;}
	html[lang="en"] .snb > ul{min-height:42rem; border-radius:24rem;}
	html[lang="en"] .snb ul > li > a{min-height:36rem; padding:4rem 6rem; font-size:13rem;}
}
@media (max-width:360px){ html[lang="en"] .snb ul > li > a{padding:4rem 4rem; font-size:12rem;} } /* 320~360: 3탭 긴 라벨(Emergency & Critical Care 등)이 3줄이 되지 않게 */
/* 건강검진(.wellenss): 국문은 텍스트 열(570rem)과 표 사이 간격이 0 이지만 문장이 짧아 닿지 않음 — 영문 문단은 열을 꽉 채워 표에 붙음 → 열 안쪽 오른쪽 여백 */
@media (min-width:1025px){ html[lang="en"] .wellenss .txt{padding-right:56rem; box-sizing:border-box;} }
/* 한방 페이지(.sub0503)의 박스 라벨은 국문 CSS 가 200rem 고정폭 → 영문 라벨 길이에 맞춤 */
html[lang="en"] .special-page.sub0503 .box01 > em{width:auto; min-width:200rem; padding:10rem 20rem; white-space:nowrap;}

/* 안과·치과센터 의료진 카드(.staff-list.edit, 2열 고정): 국문 ≤1024 의 1열 규칙보다 우선순위가 높아 좁은 화면에서도 2열이 유지되고
   영문 긴 텍스트가 카드 밖으로 넘친다 → ≤1024 1열, ≤480 사진 위·텍스트 아래 */
@media (max-width:1024px){
	html[lang="en"] .clinic-doctor .staff-list.edit{grid-template-columns:1fr; gap:25rem;}
	html[lang="en"] .clinic-doctor .staff-list.edit > li{padding:24rem;}
}
@media (max-width:480px){
	html[lang="en"] .clinic-doctor .staff-list.edit > li{flex-direction:column; padding:18rem;}
	html[lang="en"] .clinic-doctor .staff-list.edit > li .img{width:60%; max-width:220rem; margin:0 auto 16rem;}
	html[lang="en"] .clinic-doctor .staff-list.edit > li .txt{width:100%;}
}

/* 의료진 목록: 그리드 1fr 칸이 내용 min-content 때문에 늘어나 1100~1280px 에서 뷰포트를 넘김 → 칸/카드 min-width 0 */
html[lang="en"] .staff-page .staff-list > li, html[lang="en"] .staff-page .staff-list > li > a, html[lang="en"] .staff-page .staff-list > li .txt{min-width:0;}
/* 역할 필터(가로 스크롤 칩): flex 축소로 칩이 한 단어 폭까지 줄어 텍스트가 옆 칩과 겹침 → 축소 금지 */
html[lang="en"] .role-list .btn{flex:0 0 auto; width:auto;}

/* 슬개골 탈구 — '재탈구 보증제' 인증서 이미지(한글) 대체 HTML 카드 (원본 이미지 비율 250:317) */
html[lang="en"] .guarantee-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6rem; width:100%; min-height:100%; padding:22rem 16rem; box-sizing:border-box; border:3rem double #2e2748; background:#fff; text-align:center;}
/* 목록 이미지 규칙(.list-img li .img img{width:100%})보다 우선해 카드 안 아이콘/로고는 고정 높이로 */
html[lang="en"] .list-img > li .img .guarantee-card img, html[lang="en"] .guarantee-card img{width:auto; max-width:none; border-radius:0;}
html[lang="en"] .guarantee-card__seal{display:flex; align-items:center; justify-content:center; width:44rem; height:44rem; margin:0 0 6rem; border-radius:50%; background:#2e2748;}
html[lang="en"] .guarantee-card__seal img{height:22rem; filter:brightness(0) invert(1);}
html[lang="en"] .guarantee-card__title{display:block; font-family:var(--font-eng); font-size:20rem; font-weight:800; color:#2e2748; line-height:1.15em; letter-spacing:-0.01em;}
html[lang="en"] .guarantee-card__sub{display:block; font-style:normal; font-family:var(--font-eng); font-size:10rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#9a917f;}
html[lang="en"] .guarantee-card p{margin:8rem 0 0; font-size:12rem; line-height:1.45em; color:#555;}
html[lang="en"] .guarantee-card__logo{display:block; margin:12rem 0 0; opacity:0.75;}
html[lang="en"] .guarantee-card__logo img{height:16rem;}
/* 한방 페이지 — 용어 정의 목록(.box-gray .list-txt): 국문 용어 열 70rem 고정폭 → 영문 용어(Electroacupuncture)는 넓혀야 단어가 쪼개지지 않음 */
html[lang="en"] .box-gray .list-txt > li > em{width:150rem; flex:0 0 150rem;}
html[lang="en"] .box-gray .list-txt > li > span{width:calc(100% - 155rem);}
@media (max-width:768px){ html[lang="en"] .box-gray .list-txt > li > em, html[lang="en"] .box-gray .list-txt > li > span{width:auto; flex:none;} }

/* 재탈구 보증 카드 안 아이콘/로고: 아코디언 목록의 img{width:100%} 규칙(특이성 높음)을 넘어서야 하므로 !important */
html[lang="en"] .guarantee-card__seal img{width:auto !important; height:22rem !important; max-width:none !important;}
html[lang="en"] .guarantee-card__logo img{width:auto !important; height:16rem !important; max-width:none !important;}
/* 피부과 — 관리법 원형 라벨(.list-care, 165rem 원): 영문 두 단어가 원 밖으로 나감 → 글자 줄이고 안쪽 여백 */
html[lang="en"] .list-care > li{padding:0 14rem; box-sizing:border-box; font-size:18rem; line-height:1.15em; text-align:center; word-break:normal;}
@media (max-width:1024px){ html[lang="en"] .list-care > li{font-size:16rem;} }
@media (max-width:480px){ html[lang="en"] .list-care > li{padding:0 8rem; font-size:13rem;} }
/* 혈액투석센터 진료과목 그리드: 국문 페이지 전용 고정 높이 규칙(410/430rem)이 공통 .list-part 보정보다 우선 → 같은 특이성으로 재지정 */
@media (max-width:1300px){ html[lang="en"] .special_sub01 .sub0101 .list-part > li{height:auto; min-height:410rem; padding-bottom:100rem;} }
@media (max-width:1024px){ html[lang="en"] .special_sub01 .sub0101 .list-part > li{height:auto; min-height:430rem; padding-bottom:100rem;} }
@media (max-width:620px){ html[lang="en"] .special_sub01 .sub0101 .list-part > li{min-height:0; padding-bottom:20rem;} }
@media (max-width:480px){
	/* 관리법 원형 라벨: 3개가 한 줄에 들어가면 원이 80px 남짓으로 줄어 영문이 안 들어감 → 두 줄 배치 */
	html[lang="en"] .list-care{flex-wrap:wrap; justify-content:center; gap:12rem;}
	html[lang="en"] .list-care > li{flex:0 0 auto; width:130rem; height:130rem; font-size:14rem;}
}

/* 메가메뉴(PC, hd_pops) — 2026-10-15 개정: 국문은 2차 메뉴 박스 폭이 1차 항목 폭과 같지만(nowrap, 라벨이 짧음) 영문은 그 폭에 갇혀
   라벨이 3줄까지 꺾였다(사용자 지적 "글자가 너무 좁은 공간에"). 박스 폭을 1차 항목 폭과 분리해 열 중심에 맞춰 넓힌다.
   측정(스크래치패드 pptr/megasim.js): 한 줄로 펴면 모든 폭에서 이웃 열과 100px+ 겹침 → 불가. 150rem(1366~1599)·170rem(1600~)이면 최대 2줄·이웃 글자 충돌 0.
   1025~1300 은 열 간격이 좁아 어떤 폭이어도 충돌 → 마우스가 올라간 열 하나만 넓게(170rem) 펼치는 드롭다운(기존 ≤1100 방식을 1300 까지 확장).
   라벨의 " & " 는 header.html 에서 앞 단어에 붙여(&nbsp;&amp;) 줄 머리에 "&" 가 오지 않게 한다. */
@media all and (min-width:1025px){
	html[lang="en"] #header nav .gnb > li{min-width:112rem;} /* 짧은 1차 항목(Surgery/Imaging) 열에 최소 폭 — 열 간격을 벌려 2차 라벨 충돌을 막는다(gnbtry.js 로 한 줄 유지 확인) */
	html[lang="en"] #header nav .gnb > li > a{text-align:center;}
	html[lang="en"] #header nav .gnb > li .box{left:50%; transform:translateX(-50%); width:max(100%, 150rem); padding:28rem 6rem 0; overflow:visible; min-height:290rem;}
	html[lang="en"] #header.hd_pops::after{height:310rem;}
	html[lang="en"] #header nav .gnb > li ul > li{margin-bottom:12rem;}
	html[lang="en"] #header nav .gnb > li ul > li > a{padding:3rem 0; white-space:normal; word-break:normal; overflow-wrap:normal; hyphens:manual; line-height:1.3em; text-wrap:balance;}
	html[lang="en"] #header nav .gnb > li ul > li > a > span{font-size:15rem;}
}
@media all and (min-width:1601px){
	html[lang="en"] #header nav .gnb > li .box{width:max(100%, 170rem);}
}
@media all and (max-width:1600px) and (min-width:1301px){
	html[lang="en"] #header nav .gnb > li ul > li > a > span{font-size:14rem;} /* 2026-10-29: 1차 간격을 줄인 만큼 2차 라벨도 줄여 이웃 열 ≥12px 유지 */
	html[lang="en"] #header nav .gnb > li .box{min-height:300rem;}
	html[lang="en"] #header.hd_pops::after{height:320rem;}
}
@media all and (max-width:1300px) and (min-width:1025px){
	/* 1025~1300px: 마우스가 올라간 항목의 열 하나만 넓게 펼침(흰 배경 띠는 국문과 동일하게 유지) */
	html[lang="en"] #header nav .gnb > li{min-width:0;}
	html[lang="en"] #header nav .gnb > li.active:not(:hover) .box{opacity:0; visibility:hidden;}
	html[lang="en"] #header nav .gnb > li .box{width:max(100%, 170rem); padding:24rem 6rem 0; min-height:280rem;}
	html[lang="en"] #header.hd_pops::after{height:300rem;}
	html[lang="en"] #header nav .gnb > li ul > li > a > span{font-size:14rem;}
}

/* 외과센터 "What makes us different" 카드(.sdifferent-list): 제목 띠가 고정 높이(56rem)라 두 줄 영문 제목이 위아래로 잘림 → 내용 높이 */
html[lang="en"] .sdifferent-list > li .txt .tit{height:auto; min-height:56rem; padding:8rem 0;}
html[lang="en"] .sdifferent-list > li .txt .tit > h3{line-height:1.25em;}

/* 인사말(Who We Are) 첫 문단: 데스크톱에서는 절 단위로 줄을 끊고(br.keep — 생성기가 걷어내지 않음), 강조 구절은 한 줄에 */
html[lang="en"] .about-page .box-txt p i.nowrap{white-space:nowrap;}
@media (max-width:1024px){
	html[lang="en"] .about-page .box-txt p br.keep{display:none;}
	html[lang="en"] .about-page .box-txt p i.nowrap{white-space:normal;}
}

/* 재활 페이지 서브 탭(.sub-tabs.special): 6개 영문 탭이 ≤768 에서 뷰포트를 넘침 → 줄바꿈 허용 */
/* (.sub-tabs.special 은 6칸 grid) ≤768 3칸, ≤480 2칸으로 재배치 */
@media (max-width:768px){
	html[lang="en"] .special-page .sub-tabs.special{grid-template-columns:repeat(3, 1fr); gap:8rem;}
	html[lang="en"] .special-page .sub-tabs.special > li{height:auto; min-height:60rem; padding:8rem 10rem;}
	html[lang="en"] .special-page .sub-tabs.special > li > span{font-size:15rem; line-height:1.25; white-space:normal;}
}
@media (max-width:480px){
	html[lang="en"] .special-page .sub-tabs.special{grid-template-columns:repeat(2, 1fr);}
}
/* 고양이병원 특화진료 카드(.special-care__list, 고정 높이): 영문 설명이 길어 ≤1024 에서 마지막 줄이 잘림 → 높이 자동 */
@media (max-width:1024px){
	html[lang="en"] .special-care__list > li{height:auto; min-height:0;}
}

/* ── 2026-10-12 병원 요청서 반영 (서체·가독성·암센터) ─────────────────────────────── */
/* 긴 문구의 전체 대문자 지양: 페이지 제목·초음파 부위 소제목은 문장형 대소문자로(짧은 eyebrow·배지는 유지) */
html[lang="en"] .sub-visual__text h2{text-transform:none;}
html[lang="en"] .us-region .us-sub, html[lang="en"] .puq-sub{text-transform:none; letter-spacing:0.02em;}
/* 작은 안내 문구 하한 — 모바일에서 12–13px 아래로 내려가지 않게 */
html[lang="en"] .guarantee-card__sub{font-size:max(12px, 10rem); letter-spacing:0.08em;}
html[lang="en"] .flow-chart li small{font-size:max(12.5px, 12rem);}
html[lang="en"] .price-btn .price-ko{font-size:max(13px, 13rem);}
html[lang="en"] .reference > em, html[lang="en"] .reference em{font-size:max(13px, 13rem);}
html[lang="en"] .surgery-part .reference:has(a) em, html[lang="en"] .surgery-part .reference:has(a) em > a{font-size:max(12px, 11rem);} /* 사진 출처 캡션 */
html[lang="en"] .benefits_list .bens .img .img-credit{font-size:12px;} /* 국문은 ≤767 에서 11px */
html[lang="en"] .us-region .us-en, html[lang="en"] .us-region .us-tile-num, html[lang="en"] .us-region .us-tile-en{font-size:max(12px, 11rem);} /* 초음파 부위 타일 — 국문 인라인 10.5–11.5rem */
@media all and (max-width:480px){
	html[lang="en"] .h-accordion-list > .list__wrap .list--off .list__txt i{font-size:max(12px, 11rem);} /* 접힌 아코디언 번호 */
	html[lang="en"] .box-flex .box-txt .tit > em{font-size:max(12px, 11rem);} /* 재활 치료법 보조 제목 */
	html[lang="en"] .care-list > li > i{font-weight:500; letter-spacing:-0.01em;} /* 360px 원 안에 '(inflammatory' 한 줄 */
}
/* 푸터 지점 칸 첫 줄의 전화번호(국문 푸터에는 없음 — 영문 전용 Contact 칸을 대신) */
html[lang="en"] .ft-time__box > span a[href^="tel:"]{color:inherit; font-weight:600; text-decoration:none; white-space:nowrap;}
/* 암센터 의뢰절차(sub0102) 오시는 길: 영문 주소·시간이 두 줄로 감겨 라벨(em)이 아래 줄에 붙던 것 → 위 정렬 */
html[lang="en"] .cancer-txt .list-txt > li > em{vertical-align:top;}
/* 모바일 홈: 울산 카드 "Ulsan | 24/7 Emergency & Advanced Care" 가 오른쪽 고양이 그림 밑으로 들어가 잘려 보임 → 지점명 아래 줄로 */
@media (max-width:480px){
	html[lang="en"] .service-call__info > div{flex-direction:column; align-items:flex-start; gap:6rem;}
	html[lang="en"] .service-call__info > div span:after{display:none;}
	html[lang="en"] .service-call__info > div em{margin-left:0;}
}
/* 헤더 로고(공식 영문 lockup, 2026-10-28): 2줄 lockup 은 국문 로고보다 가로가 짧고 둘째 줄 'MEDICAL CENTER' 가 가늘어
   국문 높이(≤1024: 38rem, ≤480: 30rem)로는 폰에서 작게 읽힘 → 영문만 로고를 키우되 음수 margin 으로 헤더 높이는 국문과 같게 유지
   (햄버거·KO|EN 토글의 세로 중심이 헤더 높이 기준이라). 폭: 36rem 높이에서 약 170rem — 320px 폰에서도 토글(right 50rem + 58rem)과 25px 이상 떨어짐 */
@media (max-width:1024px){
	html[lang="en"] #header h1 a{height:41rem; margin:-1.5rem 0;} /* 국문 38rem */
}
@media (max-width:768px){
	html[lang="en"] #header h1 a{height:37rem; margin:-1rem 0;} /* 국문 35rem */
}
@media (max-width:480px){
	html[lang="en"] #header h1 a{height:33rem; margin:-1.5rem 0;} /* 국문 30rem — 2026-10-29 사용자 "한글 대비 조금 크다" → 36→33rem */
}
/* 2026-10-28 병원 모바일 검수 후속 — 폰 폭 소개 페이지 서식 */
@media (max-width:768px){
	/* 인사말(Who We Are): 국문은 짧은 줄을 가운데 정렬하지만 영문 문단은 4~6줄이라 가운데 정렬이 들쭉날쭉 → 왼쪽 정렬(제목·슬로건은 그대로) */
	html[lang="en"] .about-page .box-txt p, html[lang="en"] .about-page .box-txt h4{text-align:left;}
	/* 푸터 진료시간: "(last check-in 12:30 PM)" 이 줄 중간에서 끊기지 않게 국문이 ≤480 에서 숨기는 <br> 을 영문은 살림 */
	html[lang="en"] .ft-time .list-time > li > span br{display:inline;}
}
/* 모바일 홈 지점 탭: 큰 전화번호가 "+82-52-" / "707-2475" 로 끊기던 것 → 한 줄 고정·폭 비례 크기,
   진료시간은 두 열이 좁아 "10:30 AM –" / "1:00 PM" 으로 끊김 → 한 열로 쌓아 라벨·시간이 한 줄에.
   (2026-10-28 병원 캡처: 국문 layout.css ≤768(579행)·≤480(643행)의 `.list-time > li{flex-direction:column}` 이
    display:flex 만 준 아래 규칙을 뚫고 적용돼 라벨/시간이 두 줄로 쌓였음 → row 를 명시하고 라벨 폭을 고정해 시간을 세로 정렬) */
@media (max-width:600px){
	html[lang="en"] .main-location .branch-txt > h3{white-space:nowrap; font-size:clamp(20px, 6vw, 28px);}
	html[lang="en"] .main-location .schedule-info{flex-direction:column; gap:0;}
	html[lang="en"] .main-location .schedule-info .list-time{margin-right:0;}
	html[lang="en"] .main-location .schedule-info .list-time > li{display:flex; flex-direction:row; align-items:baseline; margin:0 0 8rem;}
	html[lang="en"] .main-location .schedule-info .list-time > li:last-child{margin:0 0 8rem;}
	html[lang="en"] .main-location .schedule-info .list-time > li > em{flex:0 0 auto; width:100rem; min-width:88px; margin:0; padding-left:14rem; white-space:nowrap;}
	html[lang="en"] .main-location .schedule-info .list-time > li > span{width:auto; flex:1 1 auto; padding-left:0;}
	html[lang="en"] .main-location .schedule-info .list-time > li:before{top:9px;}
	/* "Ulsan | 24/7 Emergency & Advanced Care": 사진 옆 좁은 칸에서 설명이 꺾여 세로선과 어긋남 → 지점명 아래 줄로 (홈 센터 카드와 같은 처리) */
	html[lang="en"] .main-location .branch-txt > div{flex-direction:column; align-items:flex-start; gap:5rem; margin:0 0 8rem;}
	html[lang="en"] .main-location .branch-txt > div span:after{display:none;}
	html[lang="en"] .main-location .branch-txt > div em{margin-left:0; line-height:1.3;}
}
/* 고양이병원 특화진료 카드: 데스크톱(1025~1440)에서도 사례 설명이 긴 카드 2장(비뇨기·난치질환)이 고정 높이 270rem 을 10px 넘겨 위아래가 잘림
   → 높이를 내용 기준(최소 270rem 은 유지)으로, 사진 열은 카드 높이에 맞춰 늘림 */
@media (min-width:1025px){
	html[lang="en"] .special-care__list > li{height:auto; min-height:270rem;}
	html[lang="en"] .special-care__list > li .img{height:auto; align-self:stretch;}
	html[lang="en"] .special-care__list > li .img img{height:100%; object-fit:cover;}
}

/* ── 2026-10-15 글자 잘림 전수 점검(스크래치패드 pptr/textclip.js) — 국문 고정 높이·폭 컴포넌트를 영문에서는 내용 기준으로 ── */
/* 암센터 항암·방광암·림프종 체크리스트(.box02 .list-txt): 항목 높이가 고정이라 두 줄 영문이 다음 항목과 겹침 */
html[lang="en"] .cancer-page .box02 .list-txt{height:auto;}
html[lang="en"] .cancer-page .box02 .list-txt > li{height:auto; min-height:0; flex:0 0 auto; padding-top:10rem; padding-bottom:10rem;}
/* 줄기세포 치료 과정 카드(.step-list): ≤768 에서 카드 높이가 고정이라 설명이 카드 밖으로 */
html[lang="en"] .step-list > li{height:auto; min-height:0;}
/* 라지독 클리닉 시설 3칸(.list-cell, 고정 높이 210/180rem) */
html[lang="en"] .list-cell{height:auto; min-height:210rem;}
html[lang="en"] .list-cell > li{height:auto; padding-top:18rem; padding-bottom:18rem;}
@media (max-width:768px){ html[lang="en"] .list-cell{min-height:180rem;} }
/* 비전 사명 번호 알약(.mission-list em, 54rem 원형): "Three" 가 잘림 → 내용 폭의 알약 */
html[lang="en"] .mission-list > li > em{width:auto; min-width:54rem; padding:0 16rem; white-space:nowrap; box-sizing:border-box;}
html[lang="en"] .mission-list > li > span{width:auto; flex:1 1 auto;}
/* 안과·치과센터 의료진 카드: .cont 높이가 calc(100% - 61rem) 고정이라 긴 영문 약력에서 "Full profile" 버튼이 카드 밖으로 */
html[lang="en"] .clinic-doctor .btn-arr{margin-top:16rem;}
/* 원인: .txt 가 li 높이에 stretch 되는 상태에서 .cont 의 %높이(calc(100% - 61rem))가 그 높이를 기준으로 풀려 내용이 계산에서 빠짐(순환) →
   .txt 를 세로 flex 로, .cont 는 %높이 없이 flex:1 → 행 높이는 사진·약력 중 큰 쪽, 버튼은 두 카드 모두 바닥에 정렬 */
html[lang="en"] .clinic-doctor .staff-list > li{align-items:stretch;}
html[lang="en"] .clinic-doctor .staff-list > li .txt{display:flex; flex-direction:column; height:auto;}
html[lang="en"] .clinic-page .staff-list > li .txt .cont{flex:1 1 auto; height:auto; min-height:0;}