/* [2026-09-23] main-visual-ctrl.css 를 파일명 변경해 수정 (CloudFront 가 ?v= 를 무시하므로 파일명으로 갱신).
   - kr/en/jpn 도 chn 과 같은 수동 슬라이더로 전환
   - 번호 글꼴: 페이지 언어별 (한국어·영어 Pretendard / 일본어 Pretendard JP / 중국어 Sarasa Gothic SC)
     .visual_ctrl 에 hu_lang_{lang} 클래스. 폰트 선언(@font-face)은 /css/header_util_*.css 에 있다
   - 현재 번호만 세미볼드(600)
   - 헤더가 한 줄(80px)이 되며 파란 GNB 띠가 사라져, 650px 이미지가 620px 히어로 위로 삐져나와
     헤더를 덮던 문제 -> #visual_wrap overflow:hidden 은 아래 기존 규칙으로 해결 */
/* 메인 솔루션 영역(#visual_wrap) 좌우/번호 버튼 컨트롤 전용 스타일.
   2026-09-22 개발본(css/main-visual.css)에서 컨트롤 규칙만 발췌해 선반영했다.
   [주의] 개발본 원본은 히어로 전체(#visual_wrap/.visual_txt/.visual_img/.txt_box)를
          재디자인하는 79개 규칙짜리 파일이다. 라이브는 기존 히어로 디자인을 유지해야 하므로
          .visual_ctrl / .visual_paging 관련 규칙만 가져왔다. 통째로 덮지 말 것.
   짝이 되는 스크립트는 /js/main-visual.js 이며, 마크업은 각 {lang}/main.php 의
   #visual_wrap 안 .visual_ctrl 블록이다. */

.visual_ctrl {
	/* 영역 가로 가운데. .visual_ctrl 은 #visual_wrap 직속이라 히어로 전체 폭 기준이다.
	   CTA 는 좌측(x=100)·바닥 100px, 컨트롤은 가운데·바닥 30px 이라 서로 겹치지 않는다. */
	position: absolute; left: 50%; transform: translateX(-50%);
	right: auto; bottom: 30px; z-index: 300;
	display: flex; align-items: center; gap: 14px;
}
/* 테두리 없는 화살표. 원형 테두리·반투명 배경을 걷고 꺾쇠만 남긴다.
   꺾쇠 크기(10x10, 2px)는 CTA 의 ::after 와 같게 맞췄다. */
.visual_ctrl .visual_arrow {
	position: relative; width: 22px; height: 22px; padding: 0;
	border: 0; border-radius: 0; background: none; cursor: pointer;
	transition: opacity .15s;
}
.visual_ctrl .visual_arrow:hover { opacity: .6; }
.visual_ctrl .visual_arrow::before {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 10px; height: 10px;
	border-top: 2px solid #fff; border-right: 2px solid #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
.visual_ctrl .visual_prev::before { transform: translate(-60%, -50%) rotate(-135deg); }
.visual_ctrl .visual_next::before { transform: translate(-40%, -50%) rotate(45deg); }

.visual_paging { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.visual_paging li { line-height: 1; }
/* CTA 와 같은 서체·크기. 기본은 볼드가 아니고 현재 페이지만 볼드다.
   [주의] 예전 활성 표시는 border-bottom 밑줄이었다. 볼드가 그 역할을 대신하므로 걷었다. */
.visual_paging button {
	padding: 2px 0; border: 0; background: none; cursor: pointer;
	font-family: 'Pretendard', 'Pretendard JP', sans-serif;
	font-size: 18px; font-weight: 400; letter-spacing: .04em; line-height: 1;
	color: rgba(255,255,255,.6); transition: color .15s;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.visual_paging button:hover { color: #fff; }
.visual_paging li.on button { color: #fff; font-weight: 600; }
/* 언어별 번호 글꼴 */
.visual_ctrl.hu_lang_kr .visual_paging button,
.visual_ctrl.hu_lang_en .visual_paging button { font-family: 'Pretendard', 'Pretendard JP', 'Noto Sans KR', sans-serif; }
.visual_ctrl.hu_lang_jpn .visual_paging button { font-family: 'Pretendard JP', 'Pretendard', 'Meiryo', sans-serif; }
.visual_ctrl.hu_lang_chn .visual_paging button { font-family: 'Sarasa Gothic SC HU', 'Microsoft YaHei', 'PingFang SC', sans-serif; }

@media screen and (max-width: 1024px) {
	.visual_ctrl { left: 50%; transform: translateX(-50%); right: auto; bottom: 22px; gap: 10px; }
	.visual_ctrl .visual_arrow { width: 20px; height: 20px; }
	.visual_paging { gap: 9px; }
	.visual_paging button { font-size: 17px; }
}
@media screen and (max-width: 767px) {
	/* 문구 패널을 모바일에서 숨겼으므로 PC·태블릿과 같이 하단 중앙에 둔다 */
	.visual_ctrl { left: 50%; transform: translateX(-50%); right: auto; top: auto; bottom: 18px; gap: 8px; }
	.visual_ctrl .visual_arrow { width: 18px; height: 18px; }
	.visual_paging { gap: 7px; }
	.visual_paging button { font-size: 16px; }
}

/* ── 아코디언 → 슬라이더 레이아웃 전환 ─────────────────────────
   [2026-09-22 추가] 최초 반영 때 컨트롤 규칙만 발췌하느라 이 블록이 빠졌다.
   그 결과 라이브에 기존 세로 아코디언 헤더 바(.bar)가 그대로 남아
   "드롭다운처럼 보이는" 목록이 노출됐다.
   개발본 css/main-visual.css 6~24행에서 가져왔다.
   [주의] 개발본의 히어로 높이 재설계(620→400px)와 .txt_box 축소, --main-safe 기반
          여백 규칙은 가져오지 않았다. 라이브는 기존 높이(PC 620 / 태블릿 650 / 모바일 500)를
          유지한다. */
#visual_wrap { overflow: hidden; }

/* 아코디언 헤더 바는 슬라이더에서 쓰지 않는다 */
#visual_wrap .visual_txt li .bar { display: none !important; }

/* 텍스트: 활성 슬라이드 하나만 노출 */
#visual_wrap .visual_txt > li {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .45s ease;
}
#visual_wrap .visual_txt > li.on { opacity: 1; visibility: visible; pointer-events: auto; }

/* 레거시 .txt_area 는 height 0 → 500px 로 펼쳐지는 구조였다. 슬라이더에서는 항상 펼친 상태 */
#visual_wrap .visual_txt > li .txt_area {
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100% !important;
	overflow: visible; display: flex; align-items: center;
}

/* ── [2026-09-23] hero 높이 고정 / 이미지 꽉 채움 / 좌우 10px ─────────────
   PC 500px · 태블릿(768~1024) 460px · 모바일(~767) 420px 로 고정.
   - 배경 이미지(p, 인라인 height 650/500px)가 hero 보다 커서 아래 기준으로 걸리며
     위쪽이 잘리고 헤더 쪽으로 삐져나오던 것 -> hero 높이에 딱 맞추고 가운데 기준 cover
   - 모바일: 문구 박스를 하단 컨트롤(‹ 01 02 03 04 ›) 위로 올림 (겹침 방지)
   - 문구 박스 좌우 여백: 태블릿/모바일도 10px (PC 는 기존 50px 유지) */
/* 이미지 li 는 height 0 <-> 값 으로 전환 애니메이션을 하므로 % 가 풀리지 않는다 -> 구간별 px 로 지정 */
#visual_wrap { height: 500px; }
#visual_wrap .visual_img > li.on { top: 0; bottom: auto; height: 500px; }
#visual_wrap .visual_img > li > p { height: 500px !important; background-size: cover !important; background-position: center center !important; }

@media screen and (max-width: 1024px) {
	#visual_wrap { height: 460px; }
	#visual_wrap .visual_img > li.on { height: 460px; }
	#visual_wrap .visual_img > li > p { height: 460px !important; }
	#visual_wrap .visual_txt .txt_box { left: 10px; }
}
@media screen and (max-width: 767px) {
	#visual_wrap { height: 420px; }
	#visual_wrap .visual_img > li.on { height: 420px; }
	#visual_wrap .visual_img > li > p { height: 420px !important; }
	#visual_wrap .visual_txt > li .txt_area .visual_inner { height: 100%; }
	#visual_wrap .visual_txt .txt_box { left: 10px; right: 10px; width: auto; top: auto; bottom: 56px; margin: 0; }
}

/* ── [2026-09-23b] 좌우로 밀려 넘어가는 전환 (js/main-visual_20260923.js) ──────────
   기존: 문구는 opacity 페이드, 이미지는 height 0 -> 600 으로 펼쳐지는(위아래) 전환
   변경: 이미지·문구 모두 항상 제자리 크기로 두고 transform translateX 로 좌우 이동.
         이동 위치·애니메이션은 스크립트가 인라인으로 지정한다 */
#visual_wrap .visual_txt > li,
#visual_wrap .visual_txt > li.on {opacity: 1; visibility: visible; transition: none; will-change: transform;}
#visual_wrap .visual_txt > li {pointer-events: none; transform: translateX(100%);}
#visual_wrap .visual_txt > li.on {pointer-events: auto; transform: none;}
#visual_wrap .visual_img > li,
#visual_wrap .visual_img > li.on {top: 0; bottom: auto; height: 500px; transition: none; will-change: transform;}
#visual_wrap .visual_img > li {transform: translateX(100%);}
#visual_wrap .visual_img > li.on {transform: none;}
@media screen and (max-width: 1024px) {
	#visual_wrap .visual_img > li, #visual_wrap .visual_img > li.on {height: 460px;}
}
@media screen and (max-width: 767px) {
	#visual_wrap .visual_img > li, #visual_wrap .visual_img > li.on {height: 420px;}
}

/* ── [2026-09-23c] hero 높이 500px(PC) / 460px(태블릿) · 문구 검정 상자 제거 · 자세히 보기 테두리 제거 ──
   위 규칙의 600/520px 를 500/460px 로 바꿨다 (모바일 420px 유지).
   상자 배경을 없앤 대신 흰 글자가 사진 위에서 읽히도록 약한 그림자를 준다. */
#visual_wrap .visual_txt .txt_box {background: none !important;}
#visual_wrap .visual_txt .txt_box em,
#visual_wrap .visual_txt .txt_box p,
#visual_wrap .visual_txt .txt_box a {text-shadow: 0 1px 6px rgba(0,0,0,.55);}
#visual_wrap .visual_txt .txt_box a {border: 0 !important;}

/* ── [2026-09-24e] 01 슬라이드: electronica 2026 배너 (가전 솔루션 대체) ─────────────
   이미지(1744x902, hero_01_electronica_2026.jpeg)에 문구가 들어 있어 잘리면 안 되므로 cover 가 아니라 '전체가 보이게' 가운데 배치.
   남는 좌우는 이미지 가장자리 색으로 채운다 (왼쪽 절반 #f9fcfe / 오른쪽 절반 #a7d3f6).
   이미지 속 'VISIT US AT | BOOTH B5.501' 버튼 자리(가로 4.53%·세로 77.05%, 39.28%x8.65%)만 링크. */
#visual_wrap {--hu-hero-h: 500px;}
@media screen and (max-width: 1024px) { #visual_wrap {--hu-hero-h: 460px;} }
@media screen and (max-width: 767px)  { #visual_wrap {--hu-hero-h: 420px;} }

#visual_wrap .visual_img > li.hu_slide_banner .hu_banner_bg {display: block !important; height: var(--hu-hero-h) !important;
	background: linear-gradient(90deg, #f9fcfe 50%, #a7d3f6 50%) !important;} /* 경계(50%)는 이미지 뒤에 가려진다 */
#visual_wrap .visual_txt > li.hu_slide_banner {display: flex; align-items: center; justify-content: center;}
#visual_wrap .hu_banner {position: relative; flex: 0 0 auto; width: min(100%, calc(var(--hu-hero-h) * 1744 / 902)); aspect-ratio: 1744 / 902;}
#visual_wrap .hu_banner img {display: block; width: 100%; height: 100%; max-width: none;}
#visual_wrap .hu_banner .hu_banner_link {position: absolute; left: 4.53%; top: 77.05%; width: 39.28%; height: 8.65%;
	border-radius: 999px; cursor: pointer; outline: none; transition: box-shadow .15s;}
#visual_wrap .hu_banner .hu_banner_link:hover {box-shadow: 0 4px 14px rgba(10, 40, 110, .28);}
#visual_wrap .hu_banner .hu_banner_link:focus-visible {box-shadow: 0 0 0 3px rgba(31, 91, 170, .6);}

/* 밝은 배너가 보일 때는 하단 컨트롤(‹ 01 02 03 04 ›)을 네이비로 */
#visual_wrap:has(.visual_txt > li.hu_slide_banner.on) .visual_ctrl .visual_arrow::before {border-color: #10213f; filter: none;}
#visual_wrap:has(.visual_txt > li.hu_slide_banner.on) .visual_paging button {color: rgba(16, 33, 63, .45); text-shadow: none;}
#visual_wrap:has(.visual_txt > li.hu_slide_banner.on) .visual_paging li.on button,
#visual_wrap:has(.visual_txt > li.hu_slide_banner.on) .visual_paging button:hover {color: #10213f;}