/* a11y.css — 모바일 앱 접근성 품질인증 1차 심사 보완 (2026-10) */

/* 보조기술 전용 텍스트 */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 4. 명도대비 — 슬라이드 점(현재 위치 포함) 3:1 이상 */
.bx-wrapper .bx-pager.bx-default-pager a { background: #6b6b6b !important; }
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus { background: #2a6964 !important; }

/* 7. 초점 — 이전/다음·페이지 점: 화면 밖 글자(text-indent) 대신 글자 크기 0 으로 숨겨
      보조기술 초점 영역이 실제 버튼 크기와 같도록 */
.bx-wrapper .bx-controls-direction a,
.bx-wrapper .bx-pager.bx-default-pager a { text-indent: 0 !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden !important; color: transparent !important; }

/* 초점 표시 */
[role="button"]:focus-visible, [role="link"]:focus-visible, a:focus-visible, button:focus-visible,
.bx-wrapper .bx-controls-direction a:focus-visible, .bx-pager-link:focus-visible { outline: 3px solid #1a4fd6 !important; outline-offset: 2px; }

/* 4. 명도대비 — 옅은 안내 문구 진하게 */
#page_indtroduction .text_wrap2 { color: #4e5a60 !important; }
.maginLeft33em.font-weightBold { color: #1f4b47 !important; }
.check, .common_li, .stab_text { color: #666 !important; }
.mp-link-desc { color: #3f6663 !important; }
html body .footer_txt3, html body .sec5 .footer_txt3 { color: #3d4245 !important; }
.progressValue { background-color: #2a6964 !important; }

/* 16. 외부 링크 표시 */
.a11y-ext { display: inline-block; margin-left: 6px; padding: 0 5px; font-size: 10px; line-height: 16px; border: 1px solid #3f6663; border-radius: 3px; color: #3f6663; vertical-align: middle; font-weight: 400; }

/* 3. 색에 무관한 인식 — 반복 횟수 선택: 테두리 + 체크 배지(색 외 표시) */
html body .ui-radio.a11y-selected { position: relative; overflow: visible; }
html body .ui-radio.a11y-selected > label.non_opacity { outline: 3px solid #1f4b47 !important; outline-offset: 2px; }
html body .ui-radio.a11y-selected::after {
	content: "\2713"; position: absolute; right: -4px; top: -8px; width: 18px; height: 18px; line-height: 18px;
	border-radius: 50%; background: #1f4b47; color: #fff; font-size: 12px; text-align: center; font-weight: 700; z-index: 3;
	box-shadow: 0 0 0 2px #fff;
}
/* 배경 이미지 선택: 선택된 항목 테두리 */
#sb_box1.a11y-selected, #sb_box2.a11y-selected, #sb_box3.a11y-selected,
#sp_box1.a11y-selected, #sp_box2.a11y-selected, #sp_box3.a11y-selected { outline: 3px solid #1f4b47; outline-offset: -3px; }

/* 2. 자막 — 음성 기법 동기화 자막 */
.a11y-cap-wrap { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(3% + 78px); width: 340px; max-width: 92%; z-index: 5; text-align: center; }
.a11y-cap { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 15px; line-height: 1.5; word-break: keep-all; min-height: 1.5em; }
.a11y-cap:empty { display: none; }
.a11y-cap-tools { margin-top: 6px; display: flex; justify-content: center; gap: 8px; }
.a11y-cap-btn { border: 0; border-radius: 16px; padding: 6px 12px; font-size: 13px; line-height: 1.2; background: #1f4b47; color: #fff; cursor: pointer; min-height: 32px; }
.a11y-cap-off .a11y-cap { display: none; }
.a11y-script { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-end; justify-content: center; }
.a11y-script[hidden] { display: none; }
.a11y-script-box { background: #fff; color: #222; width: 100%; max-width: 640px; max-height: 80vh; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; }
.a11y-script-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #ddd; }
.a11y-script-head h2 { margin: 0; font-size: 17px; }
.a11y-script-body { overflow-y: auto; padding: 12px 16px 24px; font-size: 15px; line-height: 1.7; word-break: keep-all; }
.a11y-script-body p { margin: 0 0 8px; }
.a11y-script-body .now { background: #e3f1ef; }

/* 안정화 기법 입력 안내창 (stab-flow.js) */
.stab-alert { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.stab-alert[hidden] { display: none; }
.stab-alert-box { background: #fff; border-radius: 14px; width: 100%; max-width: 320px; padding: 22px 20px 18px; text-align: center; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); }
.stab-alert-box h2 { margin: 0 0 10px; font-size: 17px; color: #1f2b2e; }
.stab-alert-box p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #333; word-break: keep-all; }
.stab-alert-ok { width: 100%; border: 0; border-radius: 10px; padding: 12px; font-size: 16px; background: #2a6964; color: #fff; cursor: pointer; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { box-shadow: 0 0 0 2px #b42318 !important; }

/* 3. 색에 무관한 인식 — 유발요인 찾기 순위(1·2·3) 선택: 테두리 + 체크 배지(색 외 표시) (2026-10-08) */
.rating-stars ul > li.star { position: relative; overflow: visible; }
.rating-stars ul > li.star.selected { outline: 3px solid #1f4b47; outline-offset: 1px; border-radius: 50%; }
.rating-stars ul > li.star.selected::after {
	content: "\2713"; position: absolute; right: -7px; top: -9px; width: 15px; height: 15px; line-height: 15px;
	border-radius: 50%; background: #1f4b47; color: #fff; font-size: 10px; text-align: center; font-weight: 700; z-index: 3;
	box-shadow: 0 0 0 2px #fff;
}
.stab_skip:focus-visible { outline: 3px solid #1f4b47; outline-offset: 2px; }

/* 모바일 앱 접근성(MA) 인증마크 — 푸터 (2026-10-15) */
.ma-mark-wrap { margin: 12px 0 2px; line-height: 0; } /* 정렬은 푸터 글을 따름 */
.ma-mark-wrap .ma-mark { display: inline-block; width: 96px; height: auto; }