@charset "utf-8"; /* ========================================================================= * JDH 언어 선택 (GNB 우측 · 로그인 버튼 옆) — 2026-08-28 신설 * 마크업: /include/jdh_lang.jsp (헤더 3곳에서 include) * * ⚠ 왜 main_hero.css 가 아니라 별도 파일인가 * 헤더 스타일은 main_hero.css 에 있지만, 그 파일을 링크하는 JSP 36개가 `?v=` 없이 걸어 두어 * 새 규칙이 브라우저 캐시에 막힌다. 그래서 컴포넌트 CSS 를 떼어 내고 * jdh_lang.jsp 가 버전을 붙여 직접 로드한다(quickmenu.css 와 같은 방식). * ⚠ 규칙을 고쳤으면 jdh_lang.jsp 의 `?v=` 도 함께 올릴 것. * * ⚠ 헤더 3종에 따라 글자색이 갈린다 — **로그인 버튼과 똑같은 분기**를 탄다. * 기본(히어로 투명 오버레이) = 흰색 / 메인 고정바·서브 헤더·메가 열림 = 먹색. * 드롭다운 패널은 어느 헤더에서나 흰 면 고정이라 분기가 없다. * ========================================================================= */ .jdh_lang { position: relative; } /* ⚠ 로그인이 알약 테두리라 언어까지 테두리를 두르면 헤더 우측이 무거워진다 → 텍스트 + 화살표만 */ .jdh_lang__btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -.2px; color: #fff; white-space: nowrap; transition: opacity .2s; } .jdh_lang__btn:hover { opacity: .75; } /* 국기 (2026-08-28 자산 반영) — 아이콘이 **정사각**이라 박스도 정사각이다(원래 20x14 였다). * ⚠ 원본은 `/img/flag_*.svg` 7개지만 **그대로 쓰면 안 된다** — 각 파일이 3.3MB 다. * 국기 7종이 한 장에 나열된 2816x1536 JPEG 를 통째로 base64 로 품고 transform 으로 한 칸만 * 보여주는 구조라, 7개를 다 걸면 23MB 가 된다. → 시트에서 각 칸을 잘라 40x40 PNG(2~3KB)로 뽑았다. * 자를 위치는 각 SVG 의 `matrix(...)` 값이 그대로 알려 준다(디자이너가 지정한 영역). * ⚠ 흰 바탕 국기(한국·일본)가 밝은 헤더에서 묻히지 않도록 얇은 안쪽 테두리를 남긴다. */ .jdh_lang__flag { flex: 0 0 auto; display: block; width: 18px; height: 18px; border-radius: 3px; background: center center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .jdh_lang__flag[data-lang="ko"] { background-image: url('/img/flag/ko.png'); } .jdh_lang__flag[data-lang="en"] { background-image: url('/img/flag/en.png'); } .jdh_lang__flag[data-lang="zh"] { background-image: url('/img/flag/zh.png'); } .jdh_lang__flag[data-lang="ja"] { background-image: url('/img/flag/ja.png'); } .jdh_lang__flag[data-lang="vi"] { background-image: url('/img/flag/vi.png'); } .jdh_lang__flag[data-lang="mn"] { background-image: url('/img/flag/mn.png'); } .jdh_lang__flag[data-lang="th"] { background-image: url('/img/flag/th.png'); } /* 화살표 — 이미지 없이 두 변만 남겨 45° 회전. 열리면 위를 향한다. */ .jdh_lang__chev { flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 0 0 1px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; } .jdh_lang.is-open .jdh_lang__chev { transform: rotate(-135deg); margin-top: 2px; } /* ── 드롭다운 패널 ────────────────────────────────────────────────────── */ .jdh_lang__menu { position: absolute; right: 0; top: calc(100% + 12px); z-index: 30; min-width: 148px; margin: 0; padding: 6px; list-style: none; background: #FFFDF8; border: 1px solid #E7E2D8; border-radius: 10px; box-shadow: 0 18px 34px -20px rgba(28,30,26,.45); } /* ⚠ display 를 지정하는 순간 hidden 속성의 기본값이 덮이므로 이 규칙이 반드시 있어야 한다 */ .jdh_lang__menu[hidden] { display: none; } .jdh_lang__menu li + li { margin-top: 2px; } .jdh_lang__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 7px; background: none; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.2px; color: #2A2F27; text-align: left; white-space: nowrap; transition: background-color .2s ease, color .2s ease; } .jdh_lang__item:hover { background: #F3EFE4; } .jdh_lang__item.is-on { color: #3B5843; font-weight: 700; } /* ── 밝은 헤더에서의 색 분기 (로그인 버튼과 동일 규칙) ────────────────── */ .jdh_sticky_header .jdh_lang__btn, .jdh_hero_header.mega-open .jdh_lang__btn { color: #2A2F27; } /* ── 메가(GNB 드롭다운)에 언어 메뉴가 가려지는 문제 (2026-08-31) ──────── * 원인: `.jdh_hero_util` 이 세로 중앙정렬용 `transform: translateY(-50%)` 를 쓰는데, * transform 은 **새 쌓임 맥락**을 만든다. 그래서 `.jdh_lang__menu { z-index: 30 }` 은 * 유틸 내부에서만 유효하고, 유틸 자체는 z-index:auto(=0) 로 헤더 안에서 겨룬다. * `.jdh_mega` 는 DOM 상 `__inner`(유틸 포함) **뒤**에 있는 같은 auto 요소 → 나중에 그려져 * 메가가 열린 상태에서 언어 드롭다운이 그 뒤로 숨었다. * 해결: 유틸을 메가보다 위 층으로 올린다. 메가는 헤더 바(72~80px) **아래**로만 펼쳐지므로 * 유틸이 위에 와도 메가 내용이 가려지지 않는다. * ⚠ z-index 를 `.jdh_lang__menu` 쪽에서 아무리 올려도 소용없다(맥락이 갇혀 있음). * 반드시 `.jdh_hero_util` 에 줘야 한다. */ .jdh_hero_header .jdh_hero_util, .jdh_sticky_header .jdh_hero_util { z-index: 40; } .jdh_hero_header .jdh_mega, .jdh_sticky_header .jdh_mega { z-index: 10; } /* ── 우측 퀵메뉴에 드롭다운 아래쪽이 잘리는 문제 (2026-08-31) ──────────── * 퀵메뉴(.jdh_quick)는 z-index 900, 헤더는 100 이라 7줄짜리 언어 메뉴의 마지막 항목(ไทย)이 * 퀵메뉴 카드에 물린다(서브페이지에서 실측). * 헤더 z-index 자체를 상시로 올리면 모바일 전체메뉴(.jdh_mmenu = 200)가 헤더 뒤로 깔리므로, * **언어 메뉴가 열려 있는 동안만** 헤더를 퀵메뉴 위로 올린다(간편예약 바 1000 보다는 아래). * ⚠ :has() 미지원 브라우저에서는 이 규칙이 통째로 무시될 뿐 기존 동작은 그대로다. */ .jdh_hero_header:has(.jdh_lang.is-open), .jdh_sticky_header:has(.jdh_lang.is-open) { z-index: 950; } /* ── 좁은 데스크톱에서의 겹침 방지 ────────────────────────────────────── * ⚠ 언어 버튼이 헤더 우측에서 100px 가까이(버튼 81 + gap 20) 더 차지하면서, * 화면 중앙 기준 고정폭인 GNB 와 **겹쳤다**(1440px 에서 64px 침범, 실측). * → 유틸 쪽을 조금 줄이고 GNB 공통 폭(--jdh-gnb-w)을 한 단계 더 좁힌다. * ⚠ --jdh-gnb-w 의 원래 자리는 main_hero.css 지만, 그 파일은 36개 JSP 가 `?v=` 없이 링크해 * 새 값이 캐시에 막힌다 → 언어 버튼 때문에 필요해진 조정이므로 여기서 덮는다. * (이 파일이 body 에서 뒤에 로드되므로 같은 특이도면 이 값이 이긴다.) * ⚠ 메가 드롭다운도 같은 변수를 쓰므로 컬럼 정렬은 그대로 따라온다. */ /* 1441px 이상은 main_hero.css 의 원래 폭(1040)으로도 자리가 남는다 → 덮지 않는다. 1341~1440 만 한 단계 좁히고 유틸을 살짝 줄여 여유를 만든다. */ @media all and (max-width: 1440px) { :root { --jdh-gnb-w: 860px; } .jdh_hero_util { gap: 12px; } .jdh_login_btn { padding-left: 22px; padding-right: 22px; } .jdh_lang__btn { gap: 6px; font-size: 15px; } } /* ⚠ 1025~1340 만 **숨긴다**. 이 구간은 데스크톱 GNB(5칸)가 그대로 보이면서 화면은 좁아, * 폭을 줄이면 "항노화/스킨부스터"가 두 줄로 접히고 그래도 유틸과 겹쳤다(실측). * 1024 이하는 GNB·로그인이 숨고 햄버거만 남아 자리가 넉넉하므로 아래에서 되살린다. * ⚠ 국기 이미지가 들어오면 숨기는 대신 라벨만 감춰(국기+화살표 ≈ 45px) 이 구간도 살릴 수 있다: * .jdh_lang__label { display: none; } ← 그때 이 블록을 그렇게 바꿀 것. */ @media all and (min-width: 1025px) and (max-width: 1340px) { .jdh_lang { display: none; } } /* ── 모바일(1024↓) — 햄버거 옆에 컴팩트하게 노출 (2026-08-28 사용자 지시) ── * ⚠ 이 구간에서는 GNB·로그인이 숨고 MENU 버튼(44px)만 남으므로 자리가 있다. * 로고와 부딪히지 않도록 글자·국기·여백을 한 단계씩 줄인다. * ⚠ 라벨이 가장 긴 언어는 "Tiếng Việt" 이다 — 크기를 다시 키울 때 이 라벨로 확인할 것. */ @media all and (max-width: 1024px) { .jdh_lang { display: block; } .jdh_lang__btn { gap: 5px; padding: 6px 2px; font-size: 14px; } .jdh_lang__flag { width: 16px; height: 16px; } .jdh_lang__chev { width: 6px; height: 6px; border-width: 1.4px; } .jdh_lang__menu { top: calc(100% + 9px); min-width: 138px; } .jdh_lang__item { padding: 8px 11px; font-size: 14px; } } @media all and (max-width: 400px) { /* 로고까지 좁아지는 구간 — 여기서부터는 라벨을 더 줄인다 */ .jdh_lang__btn { font-size: 13px; gap: 4px; } .jdh_lang__flag { width: 15px; height: 15px; } } /* ========================================================================= * 다국어 조판 — 줄바꿈 보정 (2026-09-04 신설) * 퍼블리싱 페이지는 한국어 원본을 복제해 번역했다. 그래서 문장 길이가 달라져도 * 줄바꿈 자리는 한국어 기준 그대로 남아, 마지막 줄에 한두 글자만 떨어지는 일이 잦다 * ("…治療します。" 의 "す。", "西洋医学・韓方の協診" 의 "診", "know-how" 의 "how"). * text-wrap 으로 브라우저가 줄을 다시 나누게 해 그 대부분을 없앤다. * · pretty = 마지막 줄 고아 방지 (본문·목록) * · balance = 줄 길이 균등 (제목·라벨처럼 짧은 블록) * ⚠ 한국어(lang="ko")에는 걸지 않는다 — 원본 줄바꿈이 이미 시안대로 확정돼 있어 * 브라우저가 다시 나누면 의도한 배치가 흔들린다. 번역판에만 적용한다. * ⚠ 미지원 브라우저(Firefox 의 pretty 등)는 지금까지와 똑같이 동작한다 — 점진적 향상이다. * ⚠ 이것으로도 안 되는 것은 **박스 폭보다 문구가 긴 경우**다(줄을 어떻게 나눠도 넘친다). * 그건 각 언어판 JSP 에서 문구를 줄이거나 br 자리를 옮겨야 한다. * ========================================================================= */ html[lang="ja"] p, html[lang="zh-Hans"] p, html[lang="en"] p, html[lang="ja"] li, html[lang="zh-Hans"] li, html[lang="en"] li, html[lang="ja"] dd, html[lang="zh-Hans"] dd, html[lang="en"] dd { text-wrap: pretty; } html[lang="ja"] h1, html[lang="zh-Hans"] h1, html[lang="en"] h1, html[lang="ja"] h2, html[lang="zh-Hans"] h2, html[lang="en"] h2, html[lang="ja"] h3, html[lang="zh-Hans"] h3, html[lang="en"] h3, html[lang="ja"] h4, html[lang="zh-Hans"] h4, html[lang="en"] h4, html[lang="ja"] figcaption, html[lang="zh-Hans"] figcaption, html[lang="en"] figcaption { text-wrap: balance; } /* ========================================================================= * CJK 에서 word-break:keep-all 해제 (2026-09-04) * * 사이트 CSS 는 `word-break: keep-all` 을 **280곳**에서 쓴다. 한국어에서는 어절이 * 공백으로 나뉘어 있어 "어절 중간에서 자르지 마라" 는 뜻이 되지만, * **일본어·중국어는 공백이 없어 문장 전체가 한 덩어리**가 된다 → * 줄을 아예 못 나눠 글자가 박스를 뚫고 나간다. * (2026-09-04 실제 사례: 메인 협진 원형 카드에서 설명이 원 밖으로 92~94px 삐져나옴. * "오시는 길" 등 다른 페이지도 같은 원인이었다.) * * CJK 는 원래 아무 글자에서나 줄을 나누고 브라우저가 금칙 처리(행두 「。」「、」 금지)를 * 알아서 한다 → `normal` 이 올바른 값이다. * ⚠ 한국어(ko)·영어(en)에는 걸지 않는다 — 그쪽은 keep-all 이 제 역할을 한다. * ⚠ `!important` 가 필요하다: 원 규칙이 `.a .b { keep-all }` 처럼 특이도가 더 높은 곳이 많다. * ⚠ 280곳을 개별로 고치지 말 것 — 언어별 조판 차이라 이 한 곳에서 덮는 게 맞다. * ========================================================================= */ html[lang="ja"] *, html[lang="zh-Hans"] * { word-break: normal !important; } /* ========================================================================= * GNB 라벨이 칸을 넘치는 언어 보정 (2026-09-04) * * 상단 메뉴는 5등분 슬롯이고(`--jdh-gnb-w` / 5), 라벨은 `white-space: nowrap` 이다. * → 라벨이 칸보다 길면 접히는 대신 **옆 칸 글자와 겹친다**. * 1440px 화면에서 슬롯은 172px, 좌우 안여백 8px 을 빼면 글자가 쓸 수 있는 폭은 156px. * 실측(2026-09-04): 일본어 「症状別ソリューション」+8px · 「エイジング/ブースター」+11px, * 영어 「Anti-aging & Boosters」+15px 넘침. 스티키 헤더(17px·좌우 18px)는 더 좁아 함께 줄인다. * ⚠ 라벨을 더 줄이는 건 이미 한계다(일본어 GNB 는 2026-09-03 에 이미 한 번 축약했다) — * 여기서는 글자 크기로 맞춘다. 라벨을 늘리면 이 값부터 다시 볼 것. * ⚠ 중국어는 라벨이 짧아 넘치지 않는다 — 건드리지 않는다. * ========================================================================= */ @media all and (min-width: 1025px) and (max-width: 1560px) { html[lang="ja"] .jdh_gnb li a, html[lang="en"] .jdh_gnb li a { font-size: 16px; letter-spacing: -.3px; padding-left: 4px; padding-right: 4px; } html[lang="ja"] .jdh_gnb--sticky li a, html[lang="en"] .jdh_gnb--sticky li a { font-size: 15px; padding-left: 6px; padding-right: 6px; } } /* ========================================================================= * 푸터 빠른상담 바 — 영문 검수 문구가 들어가도록 좁은 데스크톱에서 축소 (2026-09-07) * * 이 바는 1181px 이상에서 [라벨 | 이름 | 연락처 | 동의문 | 버튼 | 전화] 가 **한 줄**이다 * (1180 이하는 footer.css 가 wrap 시키므로 문제가 없다). * 영문 검수본을 넣으면 같은 줄이 한국어보다 223px 길어진다 — * 동의문 "[Required] I agree to the collection and use of personal information" (+108) * 버튼 "Book a Consultation"(+40) · 전화 라벨 "Phone Consultation"(+30) · 자리표시 "Phone Number"(+45). * 1280px 실측에서 전화번호가 바 밖으로 **+175px** 밀려났다(2026-09-07). * → 문구를 깎는 대신 이 구간에서만 글자·입력칸·간격을 줄여 검수 문장을 그대로 살린다. * ⚠ 1440px 이상은 원래 여유가 있어 손대지 않는다. 문구를 더 늘리면 여기부터 다시 볼 것. * ========================================================================= */ @media all and (min-width: 1181px) and (max-width: 1439px) { html[lang="en"] .jdh_footer__quick-label { font-size: 13.5px; } html[lang="en"] .jdh_footer__quick-form { gap: 8px; } html[lang="en"] .jdh_footer__qi { font-size: 14px; padding: 0 12px; } html[lang="en"] .jdh_footer__qi--name { width: 150px; } html[lang="en"] .jdh_footer__qi--phone { width: 190px; } html[lang="en"] .jdh_footer__quick-consent { gap: 6px; margin-left: 0; } html[lang="en"] .jdh_footer__quick-agree { margin: 0 2px; } html[lang="en"] .jdh_footer__quick-agree-txt { font-size: 12.5px; } html[lang="en"] .jdh_footer__quick-btn { padding-left: 18px; padding-right: 18px; font-size: 14px; } } /* 1340px 아래는 위 축소만으로 모자란다 — 1190px 실측에서 아직 +66px 넘쳤다(2026-09-07). 입력칸과 간격을 한 단 더 줄여 마지막 66px 을 만든다. */ @media all and (min-width: 1181px) and (max-width: 1339px) { html[lang="en"] .jdh_footer__quick-form { gap: 6px; } html[lang="en"] .jdh_footer__qi { padding: 0 10px; } html[lang="en"] .jdh_footer__qi--name { width: 120px; } html[lang="en"] .jdh_footer__qi--phone { width: 155px; } html[lang="en"] .jdh_footer__quick-agree-txt { font-size: 12px; } html[lang="en"] .jdh_footer__quick-btn { padding-left: 14px; padding-right: 14px; } } /* ========================================================================= * 메인 협진 콜아웃 — 영문만 두 줄 허용 (2026-09-07) * * main_content.css 는 1025px 이상에서 이 콜아웃을 `nowrap` + `width:max-content` 로 * **한 줄**에 붙인다(2026-08-27 사용자 지시). 한국어 문장은 그 상태로 들어가지만, * 영문 검수본 문장("From diagnosis to aftercare … multiple clinics.", 약 120자)은 * 좌측 컬럼 620px 을 크게 넘겨 우측 배경 인물 위로 박스가 뻗는다. * → 영문에서만 nowrap 을 풀어 620px 안에서 두 줄로 접히게 한다. * ⚠ 한국어·일본어·중국어는 그대로 한 줄이다(문장이 짧아 넘치지 않는다). * ========================================================================= */ @media all and (min-width: 1025px) { html[lang="en"] .jdh_care__note { width: auto; max-width: 620px; } html[lang="en"] .jdh_care__note-txt { white-space: normal; } } /* ── 영어판 헤더의 WhatsApp 버튼 (2026-09-08) ───────────────────────── 그 자리는 원래 로그인 였고 영어판만