@charset "utf-8";
/* [index02 전용 사본] 원본 : /df/kwaa/css/slide_ui.css (2026-09-10 복사)
   index02.html 만 이 파일을 쓴다. index.html 쪽 원본을 고쳐도 여기엔 반영되지 않는다(반대도 같다). */
/* ============================================================================
   slide_ui.css — 메인 슬라이드 조작 UI (일시정지 · 이전/다음)

   왜 필요한가
     · 8.5초마다 자동으로 넘어가는데 멈출 방법이 없었다.
       WCAG 2.2.2 는 5초 이상 자동으로 움직이는 콘텐츠에 정지 수단을 요구한다.
     · 텍스트 분량이 많아 "다 읽기 전에 넘어간다"는 지적이 반복됐다.
       속도를 늦추는 것보다 이쪽이 근본 해법이다.

   배치
     .swiper-container 바깥(형제)에 둔다. 안에 넣으면 슬라이드와 같이 페이드돼
     조작 도중에 사라진다. 그래서 .visual_slide_con 기준으로 절대배치한다.
   ============================================================================ */

#main_con > .visual_slide_con > .slide_ui {
	position: absolute;
	left: 0; right: 0;
	bottom: min(24px, 1.25vw);
	z-index: 2;                 /* 배경(0) · 슬라이드(1) 위 */
	pointer-events: none;       /* 빈 영역은 통과시키고 버튼만 받는다 */
	display: flex;
	justify-content: flex-start;
	width: 100%;
	max-width: min(1820px, 94.79vw);
	margin: 0 auto;
}
#main_con > .visual_slide_con > .slide_ui .btns {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: min(8px, 0.42vw);
}

/* ---- 버튼 공통 --------------------------------------------------------- */
#main_con > .visual_slide_con > .slide_ui button {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 50%;
	width:  min(38px, 1.98vw);
	height: min(38px, 1.98vw);
	padding: 0;
	cursor: pointer;
	color: #FFFAEE;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}
#main_con > .visual_slide_con > .slide_ui button:hover {
	border-color: rgba(255,255,255,0.7);
	background-color: rgba(255,255,255,0.08);
}
/* 키보드 포커스는 반드시 보여야 한다(마우스 클릭 때는 안 보이게 :focus-visible) */
#main_con > .visual_slide_con > .slide_ui button:focus-visible {
	outline: 2px solid #FFFAEE;
	outline-offset: 2px;
}
#main_con > .visual_slide_con > .slide_ui button svg {
	width:  min(13px, 0.68vw);
	height: min(13px, 0.68vw);
	fill: currentColor;
	display: block;
}

/* 재생/일시정지는 상태에 따라 아이콘 하나만 보인다 */
#main_con > .visual_slide_con > .slide_ui .ico_play { display: none; }
#main_con > .visual_slide_con.is_paused > .slide_ui .ico_play { display: block; }
#main_con > .visual_slide_con.is_paused > .slide_ui .ico_pause { display: none; }

/* ---- 일시정지 중에는 진행바를 멈춘다 --------------------------------------
   진행바는 CSS 트랜지션(8.5s)으로 채워진다. 자동재생만 멈추면 막대는 계속
   차올라서 "곧 넘어간다"는 잘못된 신호를 준다. JS 가 현재 폭을 인라인으로
   고정하고, 여기서 트랜지션을 끊는다. */
#main_con > .visual_slide_con.is_paused .swiper-slide .bar div {
	transition: none !important;
}

/* ---- 화면에 내보내는 것 : 좌 · 우 버튼만 --------------------------------
   [2026-09-10] 담당자 요청으로 좌/우 버튼을 다시 살린다.
   가운데 재생/정지 버튼은 요청에 없어 감춘 채로 둔다 — 아래 한 줄만 지우면 돌아온다.

   ※ 남는 문제 : 자동 넘김을 "멈출" 수단이 화면에 없다.
     WCAG 2.2.2 는 5초 이상 자동으로 움직이는 콘텐츠에 정지 수단을 요구한다.
     좌/우 버튼은 넘기는 수단이지 멈추는 수단이 아니다.
     정지 버튼까지 보이게 하려면 바로 아래 규칙을 지우면 된다.
     (콘솔에서는 window.HDGSlide.pause() / .play() 가 그대로 동작한다) */
#main_con > .visual_slide_con > .slide_ui .btn_toggle { display: none; }

/* ---- 모바일 : "아래"(타입 이미지) 기준으로 붙인다 ---------------------------
   [2026-09-10] top 으로 잡았다가 두 번 겹쳤다. 위쪽을 기준 삼은 것이 원인이다.
   옵션 목록의 세로 위치를 원본 CSS 가 슬라이드마다 다르게 주고 있다
   (main_common_all.css) :

       .text01 > .option_con { top:  95.00vw }   →  371 ~ 420
       .text02 > .option_con { top: 118.23vw }   →  461 ~ 510   ← 가장 낮다
       .text03 > .option_con { top: 111.67vw }   →  436 ~ 485

   그래서 top 을 어떤 값으로 고정하든 세 장 중 하나는 반드시 물린다.
   반면 아래쪽은 장과 무관하게 고정이다 — 타입 이미지가 늘 같은 자리에 온다
   (info_con bottom:2.5vw + type_img_con top:-9.38vw · 아래에서 38.7vw).

   따라서 bottom 기준으로 바꾼다. 슬라이드 틀 높이가 200vw 이므로 :

       아래에서 38.7vw  타입 이미지 윗변   ← 넘으면 안 되는 아래 한계
       아래에서 44.0vw  컨트롤러 아랫변   ← 지금 값 (아래로 5.3vw ≈ 21px 여유)
       아래에서 53.5vw  컨트롤러 윗변       (위로 15.7vw ≈ 61px 여유)
       아래에서 69.2vw  옵션 목록 아랫변 (2번 장 · 가장 낮은 경우)

   ※ 단위를 vw 로 두는 이유 : 모바일 레이아웃 전체가 폭에 비례해 스케일된다.
     px 로 박으면 좁은 기기에서 다시 겹친다. */
@media all and (max-width: 1024px) {
	#main_con > .visual_slide_con > .slide_ui {
		top: auto;
		bottom: 44vw;
		max-width: 88.54vw;
	}
	#main_con > .visual_slide_con > .slide_ui button {
		width: 9.5vw; height: 9.5vw;
	}
	#main_con > .visual_slide_con > .slide_ui button svg {
		width: 3.4vw; height: 3.4vw;
	}
	#main_con > .visual_slide_con > .slide_ui .btns { gap: 2vw; }
}

/* ---- 모션 최소화 설정 --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	#main_con > .visual_slide_con > .slide_ui button { transition: none; }
}