@charset "utf-8";
/*
 * 다국어 레이아웃 보정 (비-국문 전용)
 *
 * 국문 기준으로 짜인 고정 폭·고정 높이 박스에 영문/중문/일문이 들어가면 글자가 길어져
 * 텍스트가 박스를 뚫고 나온다. 이 파일은 header.php 가 `$currentLang !== 'ko'` 일 때만
 * 로드하므로 **국문 화면에는 어떤 경우에도 영향이 없다.**
 *
 * 원칙 (위에서부터 시도)
 *   1) 고정 width/height → min-width/min-height 로 바꿔 박스가 늘어나게 한다
 *   2) 그래도 안 되면 nowrap 해제 또는 letter-spacing 축소
 *   3) 마지막 수단으로만 해당 컴포넌트의 font-size 를 줄인다
 * ※ 전역 폰트 축소는 하지 않는다 — 안 터지던 곳까지 작아져 디자인이 초라해진다.
 *
 * 참고: 하단 간편상담 바(.appointment)는 다국어에서 아예 렌더하지 않는다(footer.php).
 *       따라서 여기서 보정할 필요가 없다.
 *
 * 아직 확인된 넘침은 없다. 터지는 곳이 나오면 아래에 추가할 것.
 * 정적 스캔으로 뽑아둔 위험 후보(고정 박스 + 글자):
 *   gallery.css  .text_box p.badge            height 22/26/34px
 *   board.css    .card-image .badge           height 29px
 *   board.css    .category-tabs li button     height 40/48px
 *   board-view-before-after.css .kg_box p     width/height 140/120/64px
 *   home.css / stories.css  .hashtag span     white-space: nowrap
 *   전 게시판 공통  .pagination_box button      white-space: nowrap
 */

/* ------------------------------------------------------------------
 * 로그인 / 회원가입 — 다국어에서 숨김 (사용자 지시 2026-07-29)
 *
 * 링크가 발행 헤더 템플릿에 `/bbs/login.html` 로 박혀 있어 언어 프리픽스가 안 붙고,
 * 그대로 누르면 국문 로그인 페이지로 떨어진다. 회원 기능 자체도 국내 가입 전제다.
 *
 * 템플릿은 9지점이 공유하므로 고치면 전체 재발행 + 국문 영향이 생긴다.
 * 이 파일은 비국문에서만 로드되므로 여기서 숨기는 게 가장 안전하다.
 *   .login_box  = PC / 태블릿 헤더 상단
 *   .member     = 태블릿·모바일 드로어 안 회원 메뉴 (푸터의 .member 는 header 스코프라 영향 없음)
 * ------------------------------------------------------------------ */
header .login_box,
header nav .member { display: none !important; }

/* ------------------------------------------------------------------
 * 모바일 하단 '온라인상담' — 다국어에서 숨김
 *
 * 이 버튼은 하단 간편상담 폼(.appointment)을 여는데, 그 폼 자체를 다국어에서는
 * 렌더하지 않는다(footer.php). 버튼만 남기면 눌러도 아무 일이 없으므로 같이 숨긴다.
 * ※ 아이콘은 nth-of-type 로 붙으므로 5번째만 사라지고 앞 4개는 그대로다.
 * ------------------------------------------------------------------ */
#headerAreaMobile .mobile_menu .btn_online_counsel { display: none !important; }

/* ------------------------------------------------------------------
 * 모바일 하단 고정바 전체 숨김 — 다국어 (사용자 지시 2026-07-29)
 *
 * 홈/전화문의/카톡문의/바로예약/온라인상담 이 화면을 따라다니는 바다.
 * 다국어에서는 예약·상담 동선이 국내 전용이라 통째로 내린다.
 * `position: fixed` 오버레이라 숨겨도 본문 레이아웃에는 여백이 생기지 않는다.
 * (위 .btn_online_counsel 규칙은 이 규칙에 포함되지만, 바만 되살릴 때를 위해 남겨둔다)
 * ------------------------------------------------------------------ */
#headerAreaMobile .mobile_menu { display: none !important; }

/* ------------------------------------------------------------------
 * 의료진 카드 — 직책 줄 넘침 (2026-07-29 확인)
 *
 * `doctors.css` 의 `.doctor > ul > li dl dd` 가 `white-space: nowrap` 이다.
 * 국문 "병원장/한의학박사 (서울점)" 은 한 줄에 맞지만 번역하면 길어져(EN 59~65자)
 * 카드 밖으로 잘려 나갔다. 모바일에서 특히 심했다.
 * 원칙 2)에 따라 nowrap 만 해제한다 — 폰트는 건드리지 않는다.
 * ------------------------------------------------------------------ */
.doctor > ul > li dl dt,
.doctor > ul > li dl dd {
    white-space: normal;
    word-break: keep-all;      /* 단어 중간에서 끊지 않음 */
    overflow-wrap: anywhere;   /* 아주 긴 단어만 강제 줄바꿈 */
}

/* ------------------------------------------------------------------
 * 지점 탭 — 다국어에서 알약 밖으로 글자가 넘침 (2026-07-29)
 *
 * 국문 "서울점/부산점" 은 짧아 고정 폭 격자에 맞지만,
 * 영문 "Incheon Bupyeong"·"Gyeonggi Suwon" 은 길어 테두리를 뚫고 나간다.
 * ★`.branch_tab` 전용 규칙이 어디에도 없어(상위 격자에서 폭을 받는다) 여기서 내용 폭 기준으로 바꾼다.
 * 원칙 1)에 따라 고정 폭을 없애고 내용에 맞춰 늘어나게 한다 — 폰트는 건드리지 않는다.
 * ------------------------------------------------------------------ */
.branch_tab ul {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: auto !important;
}
.branch_tab ul li { width: auto !important; min-width: 0 !important; }
.branch_tab ul li a {
    display: block;
    width: auto !important;
    padding: 12px 28px !important;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
 * 드로어 전화/카톡/온라인상담 버튼 — 다국어에서 한 칸만 커짐 (2026-07-29)
 *
 * home.css: `.contact_us ul{display:flex; align-items:center}` + `li{width:29%}`
 * 국문은 셋 다 4글자라 높이가 같지만, 영문은 "Online Consultation" 만 두 줄로 접혀
 * 그 칸만 커진다(align-items:center 라 칸마다 제 높이를 갖는다).
 * → stretch 로 세 칸 높이를 맞추고, 링크가 칸을 꽉 채우도록 한다. 폰트는 안 건드린다.
 * ------------------------------------------------------------------ */
/* ★!important 필요 — 발행 헤더 CSS 가 <style id="published-header-css"> 로 **lang.css 뒤에** 인라인되며
 *   같은 규칙(align-items:center)을 그대로 중복한다. 순서로는 못 이긴다. */
#mobileAllMenu .contact_us ul,
#tabletAllMenu .contact_us ul { align-items: stretch !important; }
#mobileAllMenu .contact_us ul li a,
#tabletAllMenu .contact_us ul li a {
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ------------------------------------------------------------------
 * 처방 상세 팝업(diet-herbs popup01~06) — 원형 뱃지·수치 박스 넘침
 *
 * 국문은 라벨이 4~7자인데 번역본은 훨씬 길다(실측):
 *   원형 라벨  '붓기 감소'(4) → 'Reduced swelling'(16)
 *              '기저질환치료'(6) → 'Treatment of underlying conditions'(34)
 *   대면처방   '대면처방 원칙'(7) → 'In-person prescription principle'(31)
 * 원본은 원 안 라벨을 `white-space:nowrap` + 고정 font-size 로 두어 **원 밖으로 삐져나온다.**
 * 원(li)은 padding-top 으로 비율을 잡는 구조라 늘릴 수 없으므로, 원칙 2)nowrap 해제 →
 * 3)이 컴포넌트만 font-size 축소 순서로 처리한다. 원 크기·색은 건드리지 않는다.
 *
 * 셀렉터는 팝업 CSS(`#popup_con[data-popup="popupNN"] …`)보다 뒤에 로드되고
 * `html:not([lang="ko"])` 로 특정도도 높아 순서·특정도 모두 이긴다.
 * ------------------------------------------------------------------ */

/* 원형 효과 라벨 (popup01 해독키트 효과 / popup06 맞춤 다잇탕 효과) */
html:not([lang="ko"]) #popup_con .kit_effect .inner ul li span {
    white-space: normal;
    width: 86%;
    text-align: center;
    line-height: 1.25;
    letter-spacing: -0.03em;
    font-size: 16px;
}
/* 검은 원형 '대면처방 원칙' (popup06) */
html:not([lang="ko"]) #popup_con .rule .inner .text_box p:nth-of-type(1) span {
    white-space: normal;
    width: 84%;
    margin: 0 auto;
    line-height: 1.25;
    font-size: 16px;
}
/* 누적 처방/감량 수치 박스 (popup02) — nowrap 이라 가로로 삐져나온다 */
html:not([lang="ko"]) #popup_con .prove .inner .text_box ul li dl {
    white-space: normal;
}

@media screen and (max-width: 1024px) {
    html:not([lang="ko"]) #popup_con .kit_effect .inner ul li span { font-size: 14px; }
    html:not([lang="ko"]) #popup_con .rule .inner .text_box p:nth-of-type(1) span { font-size: 14px; }
}
@media screen and (max-width: 768px) {
    /* 모바일은 원이 커지고(90%) 2열로 내려오므로 데스크톱보다 여유가 있다 */
    html:not([lang="ko"]) #popup_con .kit_effect .inner ul li span { font-size: 15px; }
    html:not([lang="ko"]) #popup_con .rule .inner .text_box p:nth-of-type(1) span { font-size: 14px; }
}

/* ------------------------------------------------------------------
 * 오시는길(location) — 유튜브 버튼이 안내문과 같은 줄로 흘러 오른쪽으로 밀려남
 *
 * 원본 구조상 안내문 `<ul>` 과 `.btn_ytb` 가 **둘 다 inline-block** 이라 한 줄에 들어가면
 * 나란히 놓인다. 국문은 문구가 길어 항상 줄이 바뀌지만, 번역문은 짧아져
 * (`영상으로 바로보기`→`View video`/`视频直达`/`映像で見る`) 같은 줄에 들어간다.
 * 이때 지점 규칙 `.{지점} .map_area .btn_ytb{left:50%; transform:translateX(-50%)}` 가
 * 이미 안내문 뒤에 놓인 버튼을 다시 오른쪽으로 밀어 **박스 밖으로 삐져나온다**(중문 부산 지하철에서 확인).
 *
 * 블록으로 만들어 항상 제 줄을 갖게 한다. width:fit-content 라 기존 중앙정렬 계산은 그대로 유효.
 *
 * ★셀렉터에 `.branches_area` 를 한 단계 더 붙인 이유 —
 *   이 파일이 마지막 <link> 이긴 하지만, **오시는길 모듈은 자기 CSS 를 본문에 <style> 로 인라인**한다.
 *   즉 모듈 CSS 가 lang.css 보다 **뒤**라서 같은 특이도(0,2,0)로는 진다(실측: display 가 inline-block 로 남음).
 *   `.branches_area` 를 더해 (0,3,0) 으로 올리면 순서와 무관하게 이긴다. !important 는 쓰지 않는다.
 * ------------------------------------------------------------------ */
.branches_area .map_area .btn_ytb { display: block; width: -moz-fit-content; width: fit-content; }

/* ------------------------------------------------------------------
 * 푸터 진료시간 요일 뱃지 — 비국문에서 원형 뱃지가 깨짐 (2026-08-06)
 *
 * `dt` 가 **30×30 고정 원**(`padding:3.5px 8.5px 3px 7px` → 글자 자리 폭이 12.5px 뿐)이라
 * 국문 1글자(13px)만 들어가도록 짜여 있다. 실측(대구 홈, 4언어):
 *   EN  `Mon`/`Wed` 30px → 원 밖으로 **+8px** 삐져나와 `dd` 와 붙는다 (`Mon10:00~20:00`)
 *   CN  `周一` 28px → CJK 는 글자 사이에서 줄바꿈이 되므로 원 안에서 **두 줄로 쪼개진다**
 *   JP  `月` 14px → 1글자라 정상 (KO 와 동일)
 *
 * 원칙 1)에 따라 고정 폭을 없애고 내용에 맞춰 늘어나게 한다 — 폰트는 건드리지 않는다.
 *   width:auto + min-width:30px → 1글자(JP)는 30×30 원형 그대로, 길면 알약으로 늘어난다
 *   padding 좌우 7px       → 1글자일 때 14+7+7+2(border) = 30px 로 **딱 30 을 유지**한다
 *                             (원래 우측 8.5px 이면 31.5px 이 되어 JP 원이 미세하게 커진다)
 *   white-space:nowrap     → CN 2글자가 두 줄로 쪼개지는 것을 막는다
 *   border-radius:999px    → 50% 는 폭이 늘면 타원이 된다. 알약(stadium)으로.
 *
 * ★`#footerArea` 접두 필수 — 발행 푸터 템플릿 CSS 가 페이지 **인라인 `<style>`** 로
 *   lang.css **뒤**에 들어온다(로드 순서: … site-footer.css → lang.css → inline).
 *   클래스만 쓰면 같은 특이도(0,4,3)라 순서에서 진다. ID 로 (1,4,3) 을 만들어 이긴다.
 *   !important 는 쓰지 않는다.
 *
 * 검증: 강남·대구·창원 × 4언어 × 6뷰포트(1920/1741/1540/1440/1024/375) = 72조합
 *   글자 넘침 EN +8.0 → -8.0(원 안) · CN 2줄 → 1줄 · JP/KO 무변화(30×30)
 *   격자 잘림(`ul{overflow:hidden}`)·li 넘침 = 수정 전후 전 조합 동일 → 레이아웃 회귀 0
 * ------------------------------------------------------------------ */
#footerArea .footer_top .footer_schedule ul li dl dt {
    width: auto;
    min-width: 30px;
    padding-left: 7px;
    padding-right: 7px;
    text-align: center;
    white-space: nowrap;
    border-radius: 999px;
}

/* 뱃지가 넓어진 만큼 한 칸(격자 트랙)이 부족해져 시간이 아랫줄로 밀린다.
 * 원칙 2)에 따라 시간 텍스트의 letter-spacing(1px × 11자 = 11px)만 걷어 폭을 되찾는다.
 * 실측: 이것만으로 1920 / 1900 / 1680 / 375 에서 줄바꿈이 전부 사라진다. */
#footerArea .footer_top .footer_schedule ul li dl dd { letter-spacing: 0; }

/* ★EN 만 요일 폭이 제각각이다(실측 @14px: Mon·Wed 30 / Thu 27 / Tue 26 / Sat 23 / Fri 18).
 *   그대로 두면 좁은 폭에서 **일부 요일만** 시간이 아랫줄로 밀려 들쭉날쭉해 보인다.
 *   가장 넓은 라벨 기준(30 + 좌우 패딩 14 + 보더 2 = 46px)으로 통일해
 *   "전부 한 줄" 아니면 "전부 두 줄" 이 되게 만든다.
 *   ※ 요일 라벨 문구를 바꾸면 이 값을 다시 재야 한다. CN(2글자)·JP(1글자)는 이미 균일. */
html[lang="en"] #footerArea .footer_top .footer_schedule ul li dl dt { min-width: 46px; }

/* ────────────────────────────────────────────────────────────────
 * 의료진 팝업(/about/doctors/) 항목 라벨이 본문 위로 넘치는 것 — EN 전용
 *
 * doctors.css:198 이 `.text_box dl dt { width: 15% }` 로 칸을 고정해 두었다.
 * KO `학회활동`(112px) 기준 값이라 EN `Academic Societies·Memberships` 가 들어가면
 * **글자 폭 312px vs 칸 142px** → 두 줄로 접혀도 넓은 줄이 칸을 뚫고 dd 를 146px 침범한다
 * (1920px 실측). `Societies·Memberships` 는 공백이 없는 한 덩어리라 접히지도 않는다.
 * CN `学会·会员` · JP `学会・会員` 은 KO 처럼 짧아 문제 없다 → EN 만 보정한다.
 *
 * 원칙 1)대로 **칸을 넓혀** 해결한다(폰트는 그대로 두어 KO 와 같은 타이포를 유지).
 * 가장 긴 라벨(312px)이 들어가도록 34%, 줄어든 만큼 dd 를 62% 로 준다.
 * dt 전부를 같은 폭으로 두어야 dl 블록끼리 본문 시작선이 맞는다.
 * ※ 라벨 문구를 바꾸면 이 값을 다시 재야 한다.
 * ※ ≤768px 는 doctors.css 가 dt/dd 를 세로로 쌓아(width:100%) 겹침이 없다 — 건드리지 않는다. */
/* ★미디어쿼리를 반드시 걸 것 — 처음에 조건 없이 넣었더니 ≤768px 의 `width:100%`(세로 쌓기)까지
 *   덮어써서 팝업 본문이 62% 로 좁아졌고, 그 여파로 저서 더보기 버튼이 알약 밖으로 삐져나갔다. */
@media screen and (min-width:769px) {
    html[lang="en"] .popup_con section .inner .text_box dl dt { width: 34%; }
    html[lang="en"] .popup_con section .inner .text_box dl dd { width: 62%; }
}

/* 1059~1400px 구간은 doctors.css 가 아직 dt 를 28px 로 두는데(≤1058 에서야 16px 로 내려간다)
 * 이 구간에선 34% 칸이 312px 짜리 라벨보다 좁아진다(1100px 실측: 칸 228 vs 글자 312 → 60px 침범).
 * 원칙 3)에 따라 이 구간에서만 EN dt 폰트를 줄여 칸 안에 넣는다. */
@media screen and (min-width:1059px) and (max-width:1400px) {
    html[lang="en"] .popup_con section .inner .text_box dl dt { font-size: 19px; line-height: 26px; }
}

/* ────────────────────────────────────────────────────────────────
 * 연구·저서(/diet-treatment/research/) 본문이 좌우로 잘리는 것 — CN·JP
 *
 * 84.css:102 가 `#content .research_box ul li p { word-break: keep-all }` 를 준다.
 * 국문 기준 규칙이다 — KO/EN 은 **공백에서 접히니** 문제가 없지만,
 * CN/JP 는 띄어쓰기가 없어 `keep-all` 이면 **한 줄도 못 접는다**.
 * 그러면 min-content 폭이 통문장(511px)이 되고, li 가 flex column + align-items:center 라
 * 그 폭이 그대로 적용돼 285px 칸 밖으로 **좌우 대칭으로 삐져나간다**(360px 실측: 양쪽 113px).
 *
 * 원칙 2)에 따라 **줄바꿈 제한만 푼다**. 폭·폰트는 건드리지 않는다 —
 * 접히기만 하면 min-content 가 작아져 칸(285px)에 알아서 맞춰진다.
 * EN 은 `normal` 이어도 단어 중간을 끊지 않으므로 무해하다(그래서 언어 스코프 없이 둔다). */
#content .research_box ul li p,
#content .research_box ul li p b,
#content .research_box ul li p .sm_txt { word-break: normal; }

/* ────────────────────────────────────────────────────────────────
 * 당질조절(78) 하단 리얼모델 타이틀에서 **글자 하나가 아랫줄로 떨어지는 것** — 비-KO
 *
 * 마크업이 `…7년 <i></i><i>김진영님의 </i><i></i>당질조절 스토리` 이고
 * 78.css 가 `i:nth-of-type(3){display:block}` 으로 줄을 나눈다. 앞 조각이 상자보다
 * 조금만 넓어도 **마지막 한 글자만** 아래로 떨어진다(실측: JP @1440 `…様`+`の`(44px),
 * JP 모바일 `…の`+한 글자(27px), CN @1600 44px, EN @1440 95px).
 *
 * ★폰트·자간을 폭마다 맞추는 건 답이 아니다 — 상자 폭이 브레이크포인트마다 달라
 *   (1920:640 / 1600:533 / 1440:605 …) 한 값으로는 전 구간을 못 덮는다. 실제로 처음에
 *   1920 기준으로 `EN 40px` 을 넣었다가 1440 에서 다시 세 줄이 됐다.
 * → **`text-wrap: balance`** 로 줄을 고르게 나눠 외톨이 자체를 없앤다.
 *   JP 는 자간을 조금 더 좁히면 모바일에서 두 줄로 들어간다.
 * ※ Chrome 은 balance 를 4줄 이하에만 적용한다 — EN 모바일(4줄)은 그대로 두 조각으로 나뉜다. */
#content .banner03 .inner ul li .main_title { text-wrap: balance; }
html[lang="ja"] #content .banner03 .inner ul li .main_title { letter-spacing: -2px; }

/* ────────────────────────────────────────────────────────────────
 * 「특히 위험한 이유」 3단 박스가 **흰 박스 밖으로 삐져나가는 것** — JP
 * (숨은비만 /personalized-diet/skinny-fat-diet/, 85.css:23)
 *
 * 위 연구·저서(84.css) 건과 **완전히 같은 원인**이다. `dd` 에 `word-break: keep-all` 이
 * 걸려 있는데 일본어는 띄어쓰기가 없어 문장 하나가 통째로 안 접힌다. 그러면 min-content
 * 폭이 통문장이 되고, `li{flex:1}` 은 기본 `min-width:auto` 라 그 아래로 못 줄어들어
 * 칸이 제멋대로 넓어진다 — 3번 칸이 통째로 박스 밖으로 밀려난다.
 *   실측(JP): 1920 li폭 512/653/423 → 오른쪽 536px 초과 / 1024 → 427px 초과
 *             모바일 390 은 칸은 안 늘지만 글자가 카드 밖으로 흘러 잘린다(ul scrollW 471 vs 316)
 *   KO 는 공백에서 접혀 세 칸 351px 로 정확히 들어맞는다 — 그래서 국문만 멀쩡했다.
 *
 * 원칙 2)대로 **줄바꿈 제한만 푼다**. 폭·폰트는 안 건드린다 — 접히기만 하면
 * min-content 가 작아져 세 칸이 알아서 균등해진다(적용 후 351/351/351, 모바일 316 안쪽).
 * EN 은 `normal` 이어도 단어 중간을 안 끊으므로 무해하다(실측 무변화).
 * ※ 같은 셀렉터·같은 `keep-all` 이 갱년기(79.css:22)에도 있다. 거긴 아직 안 터졌지만
 *   칸이 323/323/406 으로 어긋나 있어 같이 균등해진다. */
#content .necessity .inner .text_box ul li dl dd { word-break: normal; }