/* 메인 솔루션 영역(#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;
	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: 700; }

@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;
}