@charset "utf-8";

/*
 * i18n 언어별 폰트 override (2026-08-26 · v2)
 *
 * 방식:
 *   T() 헬퍼가 ko 가 아닌 언어에서 <font class="i18n-txt i18n-txt--{lang}"> 로 자동 감쌈.
 *   이 파일은 그 <font> 태그에만 언어별 폰트 스택 적용.
 *
 * 목적:
 *   기존 페이지 전역 폰트를 건드리지 않고, 번역된 텍스트 노드에만 스코프.
 *   아이콘 · 버튼 · 숫자 · 레이아웃 요소는 원래 폰트/스타일 유지.
 *
 * 리셋 규칙:
 *   <font> 는 레거시 태그라 브라우저 기본 스타일이 거의 없지만 명시적으로 정리.
 *   상속 유지 (font-size, color, font-weight) — 부모 스타일 따름.
 *
 * 폰트 스택 우선순위:
 *   ja: Hiragino → Yu Gothic → Meiryo → Noto Sans JP → 시스템 폴백
 *   zh: PingFang SC → Microsoft YaHei → SimHei → Noto Sans SC → 시스템 폴백
 *   en: Pretendard → system-ui → Roboto → 시스템 폴백
 */

.i18n-txt {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	background: transparent;
	text-decoration: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	vertical-align: baseline;
}

.i18n-txt--ja {
	/* 일본어 폰트: 폭이 좁은 계열(Yu Gothic UI / Hiragino Sans /
	 * Noto Sans JP) 우선. font-feature-settings "palt" 프로포셔널
	 * (자간 자동 최적화) 활성. */
	font-family: "Yu Gothic UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Meiryo UI", "Meiryo", "Noto Sans JP", sans-serif;
	font-feature-settings: "palt" 1;
}

.i18n-txt--zh {
	font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "SimHei", "Noto Sans SC", sans-serif;
}

.i18n-txt--en {
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* -- 서브페이지 · 하드코딩 텍스트 대응 (2026-08-27) --------------
 * .i18n-txt--{lang} 은 T() 로 감싼 텍스트에만 적용되지만
 * 서브페이지의 데이터 · 하드코딩 텍스트는 감싸지 않아 폰트 미적용.
 * html:lang(xx) 스코프로 body 전체 폰트 스택을 지정해 페이지 전체가
 * 언어별 폰트로 렌더되도록 함. 한국어는 이 규칙에 걸리지 않아 원본
 * 폰트(bodyHeader 등에 정의된 Pretendard/기본 스택) 그대로 유지.
 * (T() 로 감싸진 텍스트는 더 구체적인 .i18n-txt--{lang} 규칙이
 *  우선순위상 이겨서 기존 스택이 그대로 적용됨.)
 */
html:lang(ja) body {
	font-family: "Yu Gothic UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Meiryo UI", "Meiryo", "Noto Sans JP", sans-serif;
	font-feature-settings: "palt" 1;
}
html:lang(zh) body,
html:lang(zh-CN) body,
html:lang(zh-TW) body {
	font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "SimHei", "Noto Sans SC", sans-serif;
}
html:lang(en) body {
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* ============================================================
 * 언어별 레이아웃 대응 (2026-08-26 · v3)
 *
 * 규칙:
 *   - 한국어(<html lang="ko">) 스타일은 절대 건드리지 않는다.
 *   - 영·일·중 스코프 (html:lang(en) / :lang(ja) / :lang(zh))
 *     로만 오버플로/줄바꿈/래핑 문제를 컴포넌트 단위로 보정.
 *   - 전역 button/menu 규칙 금지. 실제 문제 컴포넌트만.
 * ============================================================ */

/* -- 메인 LIVE 투어픽 타이틀 (h3) -----------------------------
 * 한국어 "LIVE 투어픽" 은 wrap 134px 안에 1줄로 들어가지만
 * 영어 "LIVE TourPik" · 중국어 · 일본어 표기가 wrap 을 초과해
 * 2줄로 접힘. 좌측 탭 컨테이너 폭을 넓혀 헤더 1줄 유지.
 */
html:lang(en) .live_tourpik .left_tab,
html:lang(ja) .live_tourpik .left_tab,
html:lang(zh) .live_tourpik .left_tab,
html:lang(zh-CN) .live_tourpik .left_tab,
html:lang(zh-TW) .live_tourpik .left_tab {
	width: auto;
	min-width: 134px;
}
html:lang(en) .live_tourpik .left_tab h3,
html:lang(ja) .live_tourpik .left_tab h3,
html:lang(zh) .live_tourpik .left_tab h3,
html:lang(zh-CN) .live_tourpik .left_tab h3,
html:lang(zh-TW) .live_tourpik .left_tab h3 {
	white-space: nowrap;
}

/* -- 베스트 리뷰 리드 카피 ------------------------------------
 * 한글 "믿고보는 투어픽 고객 생생리뷰" 은 1줄이지만
 * 영어 "Excitement and Joy of Travel Right Here!" 등은 2줄이 됨.
 * 2줄까지 허용하되 상하 여백 겹침 없이 자연 래핑.
 */
html:lang(en) .sub_review_wrap .content_wrap > p,
html:lang(ja) .sub_review_wrap .content_wrap > p,
html:lang(zh) .sub_review_wrap .content_wrap > p,
html:lang(zh-CN) .sub_review_wrap .content_wrap > p,
html:lang(zh-TW) .sub_review_wrap .content_wrap > p {
	line-height: 1.35;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* -- Footer 링크 (2줄 접힘 방지) -------------------------------
 * 한국어 짧은 라벨이 부모 폭 안에 1줄로 딱 들어가지만
 * "Answer is TourPik" · "0.5-Day / Morning / Sending Tour" 등
 * 긴 영어 링크가 2줄로 접혀 다른 링크와 간격이 불규칙.
 * 하이픈 우선, 그다음 자연 래핑. 링크 자체는 2줄까지 허용하되
 * line-height 만 조정해 접힌 링크가 옆 링크를 밀지 않게.
 */
/* 사이트맵 링크는 line-height 만 촘촘하게. 2줄이 되면 옆 컬럼 링크
 * 라인과 어긋나는 정도만 완화. */
html:lang(en) footer a,
html:lang(ja) footer a,
html:lang(zh) footer a,
html:lang(zh-CN) footer a,
html:lang(zh-TW) footer a {
	line-height: 1.25;
	overflow-wrap: anywhere;
	word-break: keep-all;
}
/* footer_sitemap 컬럼 사이 gap(5%)이 컬럼 여유폭을 잠식.
 * gap 을 좁혀 각 컬럼이 컨텐츠 폭만큼 확장될 수 있도록 함.
 * (원본 flex-gap 은 5% 지만 한국어에서도 시각적 편차 없이 3% 로 축소 가능) */
html:lang(en) .footer_sitemap > ul,
html:lang(ja) .footer_sitemap > ul,
html:lang(zh) .footer_sitemap > ul,
html:lang(zh-CN) .footer_sitemap > ul,
html:lang(zh-TW) .footer_sitemap > ul {
	gap: 2.5%;
}
/* 사이트맵 링크는 컨텐츠 그대로 nowrap → 컬럼이 필요한 만큼 확장.
 * 넘칠 경우엔 자연 wrap 허용. */
html:lang(en) .footer_sitemap > ul > li > ul > li > a,
html:lang(ja) .footer_sitemap > ul > li > ul > li > a,
html:lang(zh) .footer_sitemap > ul > li > ul > li > a,
html:lang(zh-CN) .footer_sitemap > ul > li > ul > li > a,
html:lang(zh-TW) .footer_sitemap > ul > li > ul > li > a {
	white-space: nowrap;
}


/* -- 상품 리스트 지역 탭 (mainTabs__*) -------------------------
 * 한국어 "푸꾸옥/나트랑/다낭" 은 width:70px 라벨에 딱 맞지만
 * 영어 "Phu Quoc/Nha Trang/Da Nang" 은 폭이 부족해 2줄로 접힘.
 * width 고정을 풀고 min-width 로만 유지 · padding 은 그대로.
 * class 셀렉터는 컨트롤러가 동적으로 생성하는 mainTabs__b2_01,
 * mainTabs__b7_02, mainTabs__b3_03 등 다양한 접미어 대응.
 */
html:lang(en) label[class^="mainTabs__"],
html:lang(en) label[class*=" mainTabs__"],
html:lang(ja) label[class^="mainTabs__"],
html:lang(ja) label[class*=" mainTabs__"],
html:lang(zh) label[class^="mainTabs__"],
html:lang(zh) label[class*=" mainTabs__"],
html:lang(zh-CN) label[class^="mainTabs__"],
html:lang(zh-CN) label[class*=" mainTabs__"],
html:lang(zh-TW) label[class^="mainTabs__"],
html:lang(zh-TW) label[class*=" mainTabs__"] {
	width: auto;
	min-width: 70px;
	white-space: nowrap;
}


/* -- 리뷰 리드 카피 (Excitement and Joy...) --------------------
 * 원본 `여행의 설레임과 즐거움 바로 여기에!` 는 폭 510px 1줄.
 * 영어 문구가 510px 안에서 2줄로 접힘.
 * 폭 자체는 부모 레이아웃 정합상 늘리기 어려워 폰트를 살짝
 * 축소해 1줄에 담기게 함. 한국어 폰트는 그대로.
 * (다국어 예외 폰트 축소는 다른 방법으로 해결 어려운 경우
 *  이 항목처럼 특정 컴포넌트·언어에만 제한 적용.)
 */
html:lang(en) .tourDream > div:first-child .txt h3 {
	font-size: 1.6rem;
	line-height: 1.3;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
html:lang(ja) .tourDream > div:first-child .txt h3,
html:lang(zh) .tourDream > div:first-child .txt h3,
html:lang(zh-CN) .tourDream > div:first-child .txt h3,
html:lang(zh-TW) .tourDream > div:first-child .txt h3 {
	line-height: 1.3;
	word-break: keep-all;
	overflow-wrap: anywhere;
}


/* -- 상단 헤더 우측 rightMenu 여백 ------------------------------
 * 한국어 "MY투어픽" (w=63) → 영어 "MY TourPik" (w=81) 로 커짐.
 * 인접 문구(Notices/Event) 도 커져서 우측 정렬 시 최소 좌우
 * 간격이 압박됨. 우측 그룹 요소 사이 간격 살짝 줄여 균형 유지.
 */
html:lang(en) header .rightMenu > a,
html:lang(ja) header .rightMenu > a,
html:lang(zh) header .rightMenu > a,
html:lang(zh-CN) header .rightMenu > a,
html:lang(zh-TW) header .rightMenu > a {
	white-space: nowrap;
}


/* -- 상단 하위 GNB (.bottomGnb) --------------------------------
 * 한국어 (푸꾸옥 여행/나트랑 여행/다낭…여행/하노이…여행/할인쿠폰/투어픽 핫딜)
 * 6개 링크가 좌측 ul(954~1075px) 안 한 줄에 딱 들어감.
 * 영어는 앞 4개(지역 아이콘)와 뒤 2개(Discount Coupon / TourPik Hot Deal)
 * 로 명확히 두 줄로 나누는 것이 시각적으로 안정.
 * · 링크 nowrap
 * · 5번째 li 앞에 강제 개행(::before width:100%)
 * · 마진 축소해 첫 줄이 여유롭게 들어가게
 * · font-weight 를 500 으로 낮춰 굵기 완화 (한국어는 원본 700 유지)
 */
html:lang(en) .bottomGnb > ul > li,
html:lang(ja) .bottomGnb > ul > li,
html:lang(zh) .bottomGnb > ul > li,
html:lang(zh-CN) .bottomGnb > ul > li,
html:lang(zh-TW) .bottomGnb > ul > li {
	margin: 0 10px 6px 0;
}
html:lang(en) .bottomGnb > ul > li > a,
html:lang(ja) .bottomGnb > ul > li > a,
html:lang(zh) .bottomGnb > ul > li > a,
html:lang(zh-CN) .bottomGnb > ul > li > a,
html:lang(zh-TW) .bottomGnb > ul > li > a {
	white-space: nowrap;
	font-weight: 500;
}
/* Discount Coupon (5번째 li) 앞에서 개행. float + clear 조합.
 * 모든 li 를 float:left 로 만들고 5번째만 clear:left 로 개행 유도.
 * float:left 는 inline-block 처럼 나란히 붙되 clear 로 줄바꿈 가능. */
html:lang(en) .bottomGnb > ul > li,
html:lang(ja) .bottomGnb > ul > li,
html:lang(zh) .bottomGnb > ul > li,
html:lang(zh-CN) .bottomGnb > ul > li,
html:lang(zh-TW) .bottomGnb > ul > li {
	float: left;
}
html:lang(en) .bottomGnb > ul > li:nth-child(5),
html:lang(ja) .bottomGnb > ul > li:nth-child(5),
html:lang(zh) .bottomGnb > ul > li:nth-child(5),
html:lang(zh-CN) .bottomGnb > ul > li:nth-child(5),
html:lang(zh-TW) .bottomGnb > ul > li:nth-child(5) {
	clear: left;
	margin-top: 4px;
}
/* float 자식은 부모 높이를 축소.
 * 원본 ul (display:block, 부모 flex 안 폭 자동) 을 유지하되
 * ::after clearfix 로 float 자식을 감쌈.
 * overflow:hidden 이나 display:flow-root 는 하위 서브메뉴 잘라먹거나
 * 부모 flex 안 min-content 축소 유발하므로 사용 금지. */
html:lang(en) .bottomGnb > ul::after,
html:lang(ja) .bottomGnb > ul::after,
html:lang(zh) .bottomGnb > ul::after,
html:lang(zh-CN) .bottomGnb > ul::after,
html:lang(zh-TW) .bottomGnb > ul::after {
	content: '';
	display: block;
	clear: both;
}

/* 일본어·중국어는 폰트 폭이 좁아 6개 링크가 한 줄에 다 들어감.
 * 위에서 강제한 float:left / 5번째 li clear:left 를 무효화해
 * 원본 inline-block 흐름으로 되돌림. (영어는 그대로 2줄 유지) */
html:lang(ja) .bottomGnb > ul > li,
html:lang(zh) .bottomGnb > ul > li,
html:lang(zh-CN) .bottomGnb > ul > li,
html:lang(zh-TW) .bottomGnb > ul > li {
	float: none;
	display: inline-block;
}
html:lang(ja) .bottomGnb > ul > li:nth-child(5),
html:lang(zh) .bottomGnb > ul > li:nth-child(5),
html:lang(zh-CN) .bottomGnb > ul > li:nth-child(5),
html:lang(zh-TW) .bottomGnb > ul > li:nth-child(5) {
	clear: none;
	margin-top: 0;
}


/* -- 푸터 사이트맵 각 컬럼 내부 ul (2단 → 1단) --------------------
 * 한국어에서는 각 카테 서브(inMenu·비inMenu 공통)가 flex column +
 * wrap + height:92px 로 2단 배치되어 좁은 컬럼 폭을 절약하지만,
 * 영어는 링크 자체가 길어 2단이 어색해지고 인접 컬럼과 겹침.
 * 1단(세로 나열)으로 풀고 컬럼 자동 폭 확장을 허용해 자연스럽게.
 * .inMenu 뿐 아니라 최상위 컬럼(li) 안 모든 내부 ul 이 대상.
 */
html:lang(en) .footer_sitemap > ul > li > ul,
html:lang(ja) .footer_sitemap > ul > li > ul,
html:lang(zh) .footer_sitemap > ul > li > ul,
html:lang(zh-CN) .footer_sitemap > ul > li > ul,
html:lang(zh-TW) .footer_sitemap > ul > li > ul {
	display: block;
	height: auto;
	max-height: none;
}


/* -- CH TourPik 채널 버튼 텍스트 오버플로 대응 --------------------
 * 한국어 "푸꾸옥카카오톡 오픈톡" (142px) 은 버튼(246px) 안 여유롭게
 * 들어가지만 일본어 "フーコックKakaoTalkオープントーク" (252px) 이
 * 오버플로. 일본어/중국어는 어절 개념이 없어 word 단위 wrap 실패.
 * anywhere 로 임의 지점 wrap 허용하고 line-height 를 조여 2줄에도
 * 버튼 높이가 지나치게 커지지 않게. 아이콘·정렬은 원본 유지.
 */
html:lang(en) .channel_buttons button span,
html:lang(ja) .channel_buttons button span,
html:lang(zh) .channel_buttons button span,
html:lang(zh-CN) .channel_buttons button span,
html:lang(zh-TW) .channel_buttons button span {
	overflow-wrap: anywhere;
	word-break: normal;
	line-height: 1.25;
}