/* ============================================================
   lang.css — 언어 스위처 전용 스타일
   ============================================================ */

/* ── 언어 스위처 래퍼 ── */
.i18n-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* ──────────────────────────────────────────────────
   로그인 / 회원가입 버튼 — 글로브 버튼과 hover 싱크
   ────────────────────────────────────────────────── */
header .head-cont #gnb .member-btn .btn.btn-border-white {
	transition: background .22s ease, box-shadow .22s ease,
	            opacity .15s ease, transform .18s ease;
}
header .head-cont #gnb .member-btn .btn.btn-border-white:hover {
	background: rgba(255, 255, 255, .18);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .45);
	transform: translateY(0);
}
header .head-cont #gnb .member-btn .btn.btn-border-white:active {
	opacity: .7;
	transform: translateY(0);
}
/* 스크롤/active 후 흰 배경 헤더 (데스크탑) */
@media (min-width: 1025px) {
	header.scroll .head-cont #gnb .member-btn .btn.btn-border-white:hover {
		background: #eef2ff;
		box-shadow: 0 0 0 2px rgba(15, 66, 142, .22);
		transform: translateY(0);
	}
	header.scroll .head-cont #gnb .member-btn .btn.btn-border-white:active {
		opacity: .7;
	}
}

/* ── 글로브 버튼 — 다크 헤더 기본 ── */
.i18n-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid #fff;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background .22s ease, box-shadow .22s ease,
	            opacity .15s ease, color .22s ease;
}
.i18n-btn:hover {
	background: rgba(255, 255, 255, .2);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .4);
}
.i18n-btn:active { opacity: .7; }
.i18n-btn svg { display: block; flex-shrink: 0; }

/* 스크롤/active 후 — 흰 배경 헤더 (데스크탑) */
@media (min-width: 1025px) {
	header.scroll .i18n-btn {
		background: #fff;
		border-color: #000;
		color: #222;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
	}
	header.scroll .i18n-btn:hover {
		background: #eef2ff;
		box-shadow: 0 0 0 3px rgba(15, 66, 142, .2), 0 4px 16px rgba(0, 0, 0, .08);
	}
	header.scroll .i18n-btn:active { opacity: .7; }
}

/* ── 모바일: 드로어 안 member-btn에 자연 배치 ── */
@media (max-width: 1024px) {
	.i18n-wrap {
		position: relative;
		display: inline-flex;
		align-items: center;
	}
	/* 드로어 배경이 밝으므로 버튼 어두운 색 */
	.i18n-btn {
		background: transparent;
		border-color:#000;
		color: #222;
		box-shadow: none;
	}
	.i18n-btn:hover {
		background: rgba(0, 0, 0, .07);
		box-shadow: 0 0 0 2px rgba(0, 0, 0, .12);
	}
}

/* ── 드롭다운 패널 (데스크탑: 가로 행, 모바일: 세로 열) ── */
.i18n-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .13), 0 2px 6px rgba(0, 0, 0, .06);
	border: 1px solid rgba(0, 0, 0, .07);
	z-index: 9999;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(.96);
	transform-origin: top right;
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	pointer-events: none;
	background: #fff;
	display: flex;
	flex-direction: column;  /* 모바일 기본 */
}
.i18n-wrap.open .i18n-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* 데스크탑: 가로 1행 */
@media (min-width: 1025px) {
	.i18n-dropdown {
		flex-direction: row;
		top: calc(100% + 10px);
	}
	/* 가로일 때 구분선: border-right */
	.i18n-dropdown li + li {
		border-top: none;
		border-left: 1px solid rgba(0, 0, 0, .06);
	}
}

/* ── 드롭다운 아이템 ── */
.i18n-dropdown li { margin: 0 !important; }

.i18n-dropdown li a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	font-size: 13px;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
	transition: background .13s ease, color .13s ease;
  height: 100%;
}

.i18n-dropdown li:first-child a{
  border-radius: 12px 0 0 12px;
}

.i18n-dropdown li:last-child a{
  border-radius: 0 12px 12px 0;
}

.i18n-dropdown li a:hover { background: #eef2ff; color: #0f428e; }
.i18n-dropdown li a.i18n-active { background: #eef2ff; color: #0f428e; font-weight: 700; }

/* ── 국가 코드 (KR / US / JP / CN) ── */
.i18n-code {
	font-size: 9.5px;
	font-weight: 800;
	color: #c0c4cc;
	letter-spacing: .4px;
}
.i18n-dropdown li a.i18n-active .i18n-code { color: #7b9ee8; }

/* ── 언어 이름 ── */
.i18n-label { font-size: 13px; font-weight: 500; line-height: 1; }

/* ── 체크 마크 ── */
.i18n-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #0f428e;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
}

/* 모바일 세로 구분선 */
@media (max-width: 1024px) {
	.i18n-dropdown li + li { border-top: 1px solid rgba(0, 0, 0, .04); }
}

/* ============================================================
   i18n 레이아웃 보호 — 언어별 텍스트 길이 차이로 인한
   패딩·마진 벌어짐 현상 최소화
   ============================================================ */

/* 헤더 로그인/회원가입 버튼 — 텍스트 한 줄 고정 */
header .head-cont #gnb .member-btn .btn {
	white-space: nowrap;
}

/* 헤더 GNB 메뉴 아이템 — 줄바꿈 방지 */
header .head-cont #gnb ul li a,
header .head-cont #gnb ul li button {
	white-space: nowrap;
}

/* 탭 버튼 — 내용 길이에 따른 탭 폭 변화 억제 */
.point-tab-wraps .tabs li button {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 가이드 테이블 셀 — 번역 텍스트 길이에 따른 셀 확장 방지 */
.guide-table-td,
.guide-table-th {
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

/* 스펙 테이블 셀 */
.d-table td,
.d-table th {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* 서브 페이지 일반 콘텐츠 — 텍스트 오버플로우 방지 */
.contents-area .tit,
.contents-area .txt,
.contents-area .tab-title,
.contents-area .tab-desc,
.contents-area .desc,
.contents-area p {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* 스텝 설명 목록 */
.step-lists-wrap .desc,
.step-lists-wrap .num {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* 푸터 주소 텍스트 */
footer .cont {
	overflow-wrap: break-word;
	word-break: break-word;
}