@charset "utf-8";
/* ============================================================================
   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;
}

/* ---- 조작 UI 를 화면에 내보내지 않는다 ------------------------------------
   [2026-09-09] 담당자 요청으로 모바일에 이어 PC 에서도 제거.
     · 모바일 : 버튼이 하단 정보 블록(협회명·규격·진행바) 위로 겹쳐 글자를 가렸다
     · PC     : 좌측 하단에 얹혀 있어 옵션 목록·타이핑 연출과 시선이 부딪혔다

   마크업은 그대로 둔다 — index.html 의 연결 스크립트가 .btn_prev / .btn_next 를
   querySelector 로 찾아 바로 addEventListener 를 걸기 때문에, DOM 에서 지우면
   그 줄에서 에러가 나고 뒤따르는 window.HDGSlide 등록까지 통째로 죽는다.

   ※ 남는 문제 : 자동 넘김을 멈출 수단이 화면에 없다.
     WCAG 2.2.2 는 5초 이상 자동으로 움직이는 콘텐츠에 정지 수단을 요구한다.
     지금은 키보드 포커스가 버튼에 닿았을 때 멈추는 처리도 같이 무력화된다
     (display:none 이면 포커스를 받지 못한다).
     콘솔에서 window.HDGSlide.pause() / .play() 는 그대로 쓸 수 있다.
     되살리려면 아래 규칙 한 덩어리만 지우면 원래 배치로 돌아온다. */
#main_con > .visual_slide_con > .slide_ui { display: none; }

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