/* [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-24h] 01 슬라이드: electronica 2026 배너 — 세 장 구성 ────────────────────────────────
   - main_bg_electronica-2026.svg  (1920x500): 전시장 사진(오른쪽) + 왼쪽 흰 패널(x 0~1100 불투명, ~1230 에서 사라짐).
     사진은 사용자가 올린 _elec_2026.svg 의 PNG 를 JPEG 로 다시 압축. 사진에 박혀 있던 글자는 패널로 가렸다.
     object-fit cover, 오른쪽 기준 (좁아지면 왼쪽 패널부터 잘림)
   - 문구(460x390 상자): HTML 텍스트 + main_logo_electronica-2026.svg(행사 로고만). 높이 = hero x 0.78
   - main_img_electronica-2026-map.svg  (492x270): 실제 Messe München 홀 배치도, B5 에 ABOV 로고 카드·핀.
     문구 오른쪽에 붙고, 오른쪽에 사진이 최소 300px 보이도록 줄어든다. 1180px 미만(글자가 너무 작아짐)에서는 숨김.
     1440px 이하에서는 문구 뒤에 흰 그라데이션(.hu_banner::before)
   - 링크: BOOTH DETAILS 버튼(<a class="hu_bn_btn">) 하나 */
#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: #f7fafd !important;}
#visual_wrap .visual_txt > li.hu_slide_banner {display: block; overflow: hidden;}
#visual_wrap .hu_banner {position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	--hu-bn-gap: clamp(24px, 5vw, 96px); --hu-bn-th: calc(var(--hu-hero-h) * .78); --hu-bn-tw: calc(var(--hu-bn-th) * 460 / 390);
	--hu-bn-mgap: clamp(20px, 2.3vw, 44px);}
#visual_wrap .hu_banner .hu_banner_bgimg {position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: right center;}
/* 문구: HTML 텍스트 (2026-09-24). 글꼴 kr/en Pretendard · jpn Pretendard JP · chn Sarasa Gothic, 굵기 400/600 만.
   크기는 모두 --u(= 문구 높이/390, 1920 화면에서 1px) 배수 → hero 높이에 비례해 함께 줄어든다 */
#visual_wrap .hu_banner .hu_banner_txt {position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
	left: var(--hu-bn-gap); width: var(--hu-bn-tw); height: auto; min-height: var(--hu-bn-th); --u: calc(var(--hu-bn-th) / 390);
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; color: #0b3b8c;
	font-family: 'Pretendard', 'Pretendard JP', 'Noto Sans KR', sans-serif; text-shadow: none;}
#visual_wrap .hu_banner .hu_banner_txt.hu_lang_jpn {font-family: 'Pretendard JP', 'Pretendard', 'Meiryo', sans-serif;}
#visual_wrap .hu_banner .hu_banner_txt.hu_lang_chn .hu_bn_sub {font-family: 'Sarasa Gothic SC HU', 'Microsoft YaHei', 'PingFang SC', sans-serif;}
#visual_wrap .hu_banner .hu_banner_txt * {margin: 0; padding: 0; box-sizing: border-box;}
#visual_wrap .hu_banner .hu_banner_txt > * {flex-shrink: 0;} /* 좁은 화면에서 버튼이 찌그러지지 않게 */
#visual_wrap .hu_banner .hu_bn_logo {display: block; width: calc(442 * var(--u)); max-width: none; height: auto; margin-bottom: calc(14 * var(--u));}
#visual_wrap .hu_banner .hu_bn_fair {font-size: calc(11.5 * var(--u)); font-weight: 600; line-height: 1.6; letter-spacing: .14em;
	text-transform: uppercase; color: #5b6573; margin-bottom: calc(18 * var(--u));}
/* 로고 + 행사 설명 두 줄만 조금 위로 (아래 문구·버튼 위치는 그대로) */
#visual_wrap .hu_banner .hu_bn_logo,
#visual_wrap .hu_banner .hu_bn_fair {transform: translateY(calc(-32 * var(--u)));}
/* PC 는 두 줄 고정. 태블릿·모바일은 브라우저 최소 글꼴 크기(한국어 크롬에서 흔한 12px) 때문에 글자가 덜 줄어들어 넘치므로 줄바꿈 허용 */
@media screen and (min-width: 1025px) { #visual_wrap .hu_banner .hu_bn_fair {white-space: nowrap;} }
#visual_wrap .hu_banner .hu_bn_title {font-size: calc(38 * var(--u)); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: #0b3b8c;}
#visual_wrap .hu_banner .hu_bn_sub {font-size: calc(19 * var(--u)); font-weight: 400; line-height: 1.35; color: #0b3b8c; margin-top: calc(6 * var(--u));}
#visual_wrap .hu_banner .hu_bn_line {display: block; width: calc(74 * var(--u)); height: 2px; background: #8cc63f;
	margin: calc(22 * var(--u)) 0 calc(18 * var(--u));}
#visual_wrap .hu_banner .hu_bn_info {list-style: none;}
#visual_wrap .hu_banner .hu_bn_info li {display: flex; align-items: center; gap: calc(12 * var(--u));
	font-size: calc(18 * var(--u)); font-weight: 600; line-height: 1.25; color: #0b3b8c;}
#visual_wrap .hu_banner .hu_bn_info li + li {margin-top: calc(11 * var(--u));}
#visual_wrap .hu_banner .hu_bn_info svg {flex: 0 0 auto; width: calc(25 * var(--u)); height: calc(25 * var(--u));
	fill: none; stroke: #3d7fe0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;}
#visual_wrap .hu_banner .hu_bn_info svg .dot {stroke-width: 2.2;}
/* 부스 바로가기 (유일한 링크) */
#visual_wrap .hu_banner .hu_bn_btn {display: inline-flex; align-items: stretch; margin-top: calc(26 * var(--u)); height: calc(44 * var(--u));
	border: 1.5px solid #0b3b8c; border-radius: 999px; background: #fff; text-decoration: none; overflow: hidden;
	transition: box-shadow .15s;}
#visual_wrap .hu_banner .hu_bn_btn .v {display: flex; align-items: center; padding: 0 calc(20 * var(--u)) 0 calc(24 * var(--u));
	font-size: calc(12.5 * var(--u)); font-weight: 600; letter-spacing: .3em; color: #0b3b8c;}
#visual_wrap .hu_banner .hu_bn_btn .b {display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(22 * var(--u));
	border-radius: 999px; background: #0b3b8c; color: #fff; font-size: calc(13.5 * var(--u)); font-weight: 600; letter-spacing: .02em;
	transition: background .15s;}
#visual_wrap .hu_banner .hu_bn_btn .b svg {width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
#visual_wrap .hu_banner .hu_bn_btn:hover {box-shadow: 0 4px 14px rgba(10, 40, 110, .3);}
#visual_wrap .hu_banner .hu_bn_btn:hover .b {background: #1f5fae;}
#visual_wrap .hu_banner .hu_bn_btn:focus {outline: none;}
#visual_wrap .hu_banner .hu_bn_btn:focus-visible {box-shadow: 0 0 0 3px rgba(31, 91, 170, .6);}
#visual_wrap .hu_banner .hu_banner_map {position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); max-width: none;
	left: calc(var(--hu-bn-gap) + var(--hu-bn-tw) + var(--hu-bn-mgap));
	height: min(calc(var(--hu-hero-h) * .54), calc((100vw - var(--hu-bn-gap) - var(--hu-bn-tw) - var(--hu-bn-mgap) - 300px) * 270 / 492));
	width: auto; aspect-ratio: 492 / 270;}
#visual_wrap .hu_banner .hu_banner_map img {display: block; width: 100%; height: 100%; max-width: none;}
/* B5 홀(핀 포함)과 ABOV 로고 카드 클릭 → 부스 페이지 (배치도 SVG 좌표 실측, viewBox 0 54 492 270) */
#visual_wrap .hu_banner .hu_bn_maplink {position: absolute; display: block; border-radius: 8px; cursor: pointer; outline: none; transition: box-shadow .15s;}
#visual_wrap .hu_banner .hu_bn_maplink_b5 {left: 64.2%; top: 40%; width: 10.2%; height: 28.6%;}
#visual_wrap .hu_banner .hu_bn_maplink_card {left: 70.1%; top: 4.4%; width: 25.6%; height: 23.8%;}
#visual_wrap .hu_banner .hu_bn_maplink:hover,
#visual_wrap .hu_banner .hu_bn_maplink:focus-visible {box-shadow: 0 0 0 2px rgba(31, 95, 174, .55);}
/* 배치도가 사진 위에 걸치는 폭(~1880px)에서는 흰 카드로 */
@media screen and (max-width: 1880px) {
	#visual_wrap .hu_banner .hu_banner_map {border-radius: 14px; /* 안쪽 여백 없음 — 링크 영역 %가 이미지 좌표와 맞아야 한다 */
		background: rgba(255, 255, 255, .93); box-shadow: 0 10px 28px rgba(15, 44, 94, .16);}
}
@media screen and (max-width: 1179px) {
	#visual_wrap .hu_banner .hu_banner_map {display: none;}
}
/* 1440px 이하: 배경이 오른쪽 기준으로 잘려 사진이 문구 뒤까지 들어오므로 흰 그라데이션을 문구 뒤에
   (흰 패널 끝 = 화면폭 - 820px 이 문구 끝보다 왼쪽이 되는 폭) */
@media screen and (max-width: 1440px) {
	#visual_wrap .hu_banner::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none;
		width: calc(var(--hu-bn-gap) + var(--hu-bn-tw) + 90px);
		background: linear-gradient(90deg, rgba(247,250,253,.95) 0, rgba(247,250,253,.95) calc(100% - 90px), rgba(247,250,253,0) 100%);}
}
@media screen and (max-width: 767px) {
	#visual_wrap .hu_banner {--hu-bn-gap: 16px;
		--hu-bn-th: min(calc(var(--hu-hero-h) * .78), calc((100vw - 32px) * 390 / 460));}
	#visual_wrap .hu_banner .hu_banner_bgimg {object-position: left center;}
}

/* 밝은 배너가 보일 때는 하단 컨트롤(‹ 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;}