/* ==========================================
   BLESSING4U 웹 접근성 개선 CSS
   ========================================== */


/* 1. 기본 초점 스타일 (키보드 사용자만) */
/*
*:focus-visible:not(.two-depth a):not(.two-depth > li > a) {
  outline: 3px solid #0066CC !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 4px #0066CC !important;
}
*/
*:focus-visible {
  outline: 3px solid #0066CC !important;
  outline-offset: 2px !important;
  /* box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 4px #0066CC !important;*/
}


/* 마우스 사용자를 위한 초점 숨김 */
.no-outline {
  outline: none !important;
  box-shadow: none !important;
}
 
*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}


/* 2. 링크 초점 스타일 (키보드 사용자만) */
a:focus-visible {
  outline: 3px solid #0066CC !important;
  outline-offset: 2px !important;
  background-color: rgba(0, 102, 204, 0.1) !important;
}

/* 3. 버튼 초점 스타일 (키보드 사용자만) */
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
.btn-type:focus-visible {
  outline: 3px solid #0066CC !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 4px #0066CC !important;
}

/* 4. 입력 필드 초점 스타일 (키보드와 마우스 모두) */
/*
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid #0066CC !important;
  outline-offset: 1px !important;
  border-color: #0066CC !important;
  box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 4px #0066CC !important;
}
*/

/* 5. 분홍색 배경에서의 특별한 초점 스타일 (키보드 사용자만) */
.section01:focus-within *:focus-visible,
.main_loginbox *:focus-visible,
.btn-type.pink:focus-visible {
  outline: 3px solid #FFFFFF !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px #000000, 0 0 0 4px #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* 분홍색 배경 입력 필드는 키보드/마우스 모두 적용 */
.main_loginbox input:focus {
  outline: 3px solid #FFFFFF !important;
  outline-offset: 1px !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 0 0 1px #000000, 0 0 0 4px #FFFFFF !important;
}

/* 6. 네비게이션 메뉴 초점 스타일 (키보드 사용자만) */
.gnb a:focus-visible,
.lnav a:focus-visible {
  outline: 3px solid #0066CC !important;
  outline-offset: 1px !important;
  background-color: rgba(0, 102, 204, 0.1) !important;
  color: #0066CC !important;
  font-weight: bold !important;
}

/* 7. 분홍색 버튼 초점 스타일 (키보드 사용자만) */
.btn-type.pink:focus-visible {
  outline: 3px solid #FFFFFF !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #000000, 0 0 0 5px #FFFFFF !important;
}

/* 8. 언어선택 버튼 초점 스타일 (키보드 사용자만) */
.btn-language:focus-visible {
  outline: 3px solid #0066CC !important;
  outline-offset: 2px !important;
  background-color: rgba(0, 102, 204, 0.1) !important;
}

/* 9. 드롭다운 메뉴 초점 스타일 (키보드 사용자만) */
.language a:focus-visible,
.two-depth a:focus-visible {
  outline: 2px solid #0066CC !important;
  outline-offset: 1px !important;
  background-color: #E6F3FF !important;
  color: #0066CC !important;
}

/* 9-1. Two-depth 메뉴 상세 초점 스타일 */
.two-depth > li:hover,
.two-depth > li:has(a:focus-visible) {
  color: #f1f1f1 !important;
  background: #ab3461 !important;
}

.two-depth > li:hover a,
.two-depth > li > a:focus-visible {
  color: #f1f1f1 !important;
  background: #ab3461 !important;
  outline: none !important; /* 테두리 제거 */
  box-shadow: none !important; /* 그림자 제거 */
  border: none !important; /* 보더 제거 */
}

/* 모든 two-depth 링크의 포커스 테두리 강제 제거 */
.two-depth a:focus,
.two-depth a:focus-visible,
.two-depth > li > a:focus,
.two-depth > li > a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 마우스 클릭시에는 테두리 제거 */
.two-depth > li > a:focus:not(:focus-visible) {
  outline: none !important;
}

/* 10. 모바일 메뉴 초점 스타일 (키보드 사용자만) */
.open-lp:focus-visible,
.m_search:focus-visible {
  outline: 3px solid #0066CC !important;
  outline-offset: 2px !important;
  /*box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 4px #0066CC !important;*/
}

/* 11. 체크박스/라디오 초점 스타일 (키보드 사용자만) */
input[type="checkbox"]:focus-visible + label,
input[type="radio"]:focus-visible + label {
  outline: 2px dashed #0066CC !important;
  outline-offset: 3px !important;
  background-color: rgba(0, 102, 204, 0.05) !important;
}

/* 12. 본문바로가기 초점 스타일 (키보드/마우스 모두) */
#skipToContent a:focus {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 10px 20px !important;
  background: #000000 !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  z-index: 9999 !important;
  outline: 3px solid #FFFFFF !important;
  outline-offset: 2px !important;
}

/* 13. 고대비 모드 지원 (키보드 사용자만) */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline: 4px solid #000000 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 6px #000000 !important;
  }
}

/* 14. 브라우저 호환성을 위한 추가 설정 */
/* Firefox와 Safari를 위한 폴백 */
@supports not selector(:focus-visible) {
  *:focus {
    outline: 3px solid #0066CC !important;
    outline-offset: 2px !important;
  }
  
  *:focus:not(:focus-visible) {
    outline: none !important;
  }
}

/* 15. 초점 애니메이션 (부드러운 전환) */
*:focus-visible {
  transition: outline 0.2s ease, box-shadow 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus {
  transition: outline 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* 16. 숨겨진 요소 초점 방지 */
[hidden]:focus,
[style*="display: none"]:focus,
[style*="visibility: hidden"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 17. 마우스 다운 시 일시적으로 초점 숨김 */
*:active {
  outline: none !important;
}

/* 18. Internet Explorer 호환성 */
@media screen and (-ms-high-contrast: active) {
  *:focus {
    outline: 2px solid !important;
  }
}

/* 20. 필수 요소들의 키보드 접근성 관리 - 최소한으로 제한 */
/* 실제로 숨겨진 요소들만 탭 순서에서 제외 */

/* 21. 모바일 언어 메뉴 접근성 개선 */
.Msearch {
  /* 메뉴가 닫혀있을 때는 화면에서 완전히 숨김 */
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
}

.Msearch.on {
  visibility: visible;
  opacity: 1;
}

/* 언어 메뉴 초점 스타일 */
.Msearch a:focus-visible {
  outline: 3px solid #0066CC !important;
  outline-offset: 2px !important;
  background-color: rgba(0, 102, 204, 0.1) !important;
  color: #0066CC !important;
  font-weight: bold !important;
}

/* 언어 메뉴 닫기 버튼 초점 스타일 */
.Msearch .closer:focus-visible {
  outline: 3px solid #FFFFFF !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px #000000, 0 0 0 4px #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* 22. 모바일 메뉴 접근성 개선 */
.mMenu:not(.on) * {
  /* JavaScript에서 동적으로 tabindex=-1 설정됨 */
}

/* 23. 반응형에 따른 요소 숨김 처리 - 최소한만 적용 */

/* 24. 스킵 네비게이션 개선 - 다른 요소에 영향 없는 안전한 버전 */
/*
#skipToContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
}

#skipToContent a {
  position: absolute;
  top: -100px;
  left: 0;
  width: auto;
  height: auto;
  padding: 10px 20px;
  background: #000000;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  overflow: visible;
  clip: auto;
  transition: top 0.2s;
}

#skipToContent a:focus {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
  z-index: 10001;
}
*/
/* 25. 포커스 트랩 영역 표시 (개발/디버그용) */
/* 실제 운영에서는 제거 가능 */
/*
.focus-trap-active {
  position: relative;
}

.focus-trap-active::before {
  content: '키보드 탐색 영역';
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 12px;
  color: #0066CC;
  background: rgba(0, 102, 204, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}
*/

/* 분홍색 버튼 (LOGIN) - btn_full pink 클래스 */
.mMenu .my_menu .btn-type.btn_full.pink:focus-visible {
  outline: 4px solid #000000 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 3px #000000, 0 0 0 7px #FFFFFF !important;
  background-color: #9a2a50 !important; /* 더 어두운 분홍색 배경 */
  color: #FFFFFF !important;
}

/* 검은색 버튼 (JOIN) - btn_full black 클래스 */
.mMenu .my_menu .btn-type.btn_full.black:focus-visible {
  outline: 3px solid #0066CC !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 4px #0066CC !important;
  background-color: #000000 !important; 
  color: #FFFFFF !important;
}


/* 아이디 비번찾기 */
.login_box .id_tab .active .pink:focus-visible {
  outline: 4px solid #000000 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 3px #000000, 0 0 0 7px #FFFFFF !important;
  background-color: #424242 !important; /* 더 어두운 분홍색 배경 */
  color: #FFFFFF !important;
}


/* 아이디 비번찾기 */
.login_box .id_tab .active .black2:focus-visible {
  outline: 4px solid #000000 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 3px #000000, 0 0 0 7px #FFFFFF !important;
  background-color: #424242 !important; /* 더 어두운 분홍색 배경 */
  color: #FFFFFF !important;
}

/* 드롭다운 메뉴 활성화 표시 */
.gnb .lnav > li.active .two-depth {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.gnb .lnav > li.active > a {
  background-color: rgba(0, 102, 204, 0.1) !important;
  color: #0066CC !important;
  font-weight: bold !important;
}

/* 모바일 언어선택 메뉴 탭 테두리 개선 - 적당한 표시 */
/*
.Msearch .membox a:focus {
  outline: 2px solid #0066CC !important;
  outline-offset: 2px !important;
  background-color: #0066CC !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
}
*/
.Msearch .closer:focus {
  outline: 2px solid #0066CC !important;
  outline-offset: 2px !important;
  background-color: rgba(0, 102, 204, 0.8) !important;
  border-radius: 4px !important;
}

/* 모바일 메뉴 활성화 표시 - 키보드 전용 */
.mMenu.on .lnav a:focus-visible {
  outline: 3px solid #0066CC !important;
  outline-offset: 2px !important;
  background-color: rgba(0, 102, 204, 0.1) !important;
  color: #0066CC !important;
}

/* 모바일 메뉴 마우스 클릭시 테두리 제거 */
.mMenu.on .lnav a:focus:not(:focus-visible) {
  outline: none !important;
  background-color: transparent !important;
}

/* 모바일 하위 메뉴도 동일하게 적용 */
.mMenu.on .two-depth a:focus-visible {
  outline: 3px solid #0066CC !important;
  outline-offset: 2px !important;
  background-color: rgba(0, 102, 204, 0.1) !important;
  color: #0066CC !important;
}

.mMenu.on .two-depth a:focus:not(:focus-visible) {
  outline: none !important;
  background-color: transparent !important;
}


.skip-nav {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 12px;
    text-decoration: none;
    z-index: 9999;
}

.skip-nav:focus {
    top: 0;
}


/* ==========================================
   로고 구조 개선 CSS 수정 사항
   ========================================== */

/* 로고 h1 태그 기본 스타일 초기화 */
.logo h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  display: inherit !important;
  width: inherit !important;
  height: inherit !important;
  border: none !important;
  background: none !important;
}

.logo h1 a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
}

.logo h1 a img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

/* 모바일 로고도 동일하게 적용 */
.logo_m h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  display: inherit !important;
  width: inherit !important;
  height: inherit !important;
  border: none !important;
  background: none !important;
}

.logo_m h1 a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
}

.logo_m h1 a img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

.video-caption{
  height: 13rem;
  border:sold 1px;
  overflow-y: auto;
  padding: 0rem 0.5rem;
  line-height: 2rem;
  margin-bottom: 2rem;
}

/* ==========================================
   라디오 버튼 초점 중복 문제 수정
   PDF 36페이지 문제 해결
   ========================================== */

/* 기존 중복 스타일 제거 및 개선 */

/* 1. 기존 border 중복 제거 */
input[type=radio]:focus + label,
input[type=checkbox]:focus + label {
    border: none !important; /* 기존 border 완전 제거 */
}

/* 2. 깔끔한 outline만 적용 (키보드 사용자만) */
input[type=radio]:focus-visible + label,
input[type=checkbox]:focus-visible + label {
    outline: 2px dashed #fc4071 !important;
    outline-offset: 4px !important;
    background-color: transparent !important; /* 배경색 제거로 깔끔하게 */
    border: none !important; /* border 확실히 제거 */
}

/* 3. 마우스 클릭시에는 테두리 제거 */
input[type=radio]:focus:not(:focus-visible) + label,
input[type=checkbox]:focus:not(:focus-visible) + label {
    outline: none !important;
    border: none !important;
    background-color: transparent !important;
}
 
/* 4. 라디오/체크박스 자체에는 테두리 없음 */
input[type=radio]:focus,
input[type=checkbox]:focus {
    outline: none !important;
    box-shadow: none !important;
   /*border: none !important;*/
}

/* 5. 레이아웃 이동 방지를 위한 안정화 */
input[type=radio] + label,
input[type=checkbox] + label {
    /*border: 2px solid transparent !important; *//* 투명 border로 공간 확보 */
    transition: none !important; /* 애니메이션 제거로 이동 방지 */
    box-sizing: border-box !important;
}

/* 6. 포커스 시에도 같은 크기 유지 */
input[type=radio]:focus-visible + label,
input[type=checkbox]:focus-visible + label {
    border: 2px solid transparent !important; /* 같은 크기 유지 */
}

/* 7. 고대비 모드 지원 */
@media (prefers-contrast: high) {
    input[type=radio]:focus-visible + label,
    input[type=checkbox]:focus-visible + label {
        outline: 3px solid #000000 !important;
        outline-offset: 2px !important;
    }
}

/* 8. 특정 페이지별 추가 수정사항 */

/* 회원가입 페이지 세대구분 라디오 버튼 */
#gr01:focus-visible + label,
#gr02:focus-visible + label,
#da01:focus-visible + label, 
#da02:focus-visible + label,
#ma01:focus-visible + label,
#ma02:focus-visible + label,
#man:focus-visible + label,
#woman:focus-visible + label {
    outline: 2px dashed #fc4071 !important;
    outline-offset: 3px !important;
    border: none !important;
    background-color: rgba(252, 64, 113, 0.05) !important;
}

/* 신앙생활 라디오 버튼 */
#m_faith01:focus-visible + label,
#m_faith02:focus-visible + label,
#m_faith03:focus-visible + label {
    outline: 2px dashed #fc4071 !important;
    outline-offset: 3px !important;
    border: none !important;
    background-color: rgba(252, 64, 113, 0.05) !important;
}

/* 상대희망 신앙생활 체크박스 */
#p_faith01:focus-visible + label,
#p_faith02:focus-visible + label,
#p_faith03:focus-visible + label {
    outline: 2px dashed #fc4071 !important;
    outline-offset: 3px !important;
    border: none !important;
    background-color: rgba(252, 64, 113, 0.05) !important;
}

/* 9. 기존 스타일과의 충돌 방지 */
.wr_type01 input[type=radio]:focus + label,
.wr_type01 input[type=checkbox]:focus + label {
    border: none !important;
    outline: none !important;
}

.wr_type01 input[type=radio]:focus-visible + label,
.wr_type01 input[type=checkbox]:focus-visible + label {
    outline: 2px dashed #fc4071 !important;
    outline-offset: 3px !important;
    border: none !important;
}

/* 10. Internet Explorer 호환성 */
@media screen and (-ms-high-contrast: active) {
    input[type=radio]:focus + label,
    input[type=checkbox]:focus + label {
        outline: 2px solid !important;
        border: none !important;
    }
}

/* ==========================================
   needpopup05 모바일 중앙 정렬 수정 - PC/모바일 호환
   ========================================== */

/* 기존 needpopup05 스타일 재정의 */
.needpopup05 {
    position: relative !important;
    z-index: 9999 !important;
    top: 50% !important;
    left: 50% !important;
    display: none !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    width: 500px !important;
    max-width: 90% !important; /* 100% → 90%로 수정 (좌우 여백 확보) */
    
    /* ✨ 핵심 수정: transform을 이용한 완벽한 중앙 정렬 */
    margin-left: 0 !important; /* 기존 -250px 제거 */
    -webkit-transform: translate(-50%, -50%) scale(.1, .1) !important;
    -ms-transform: translate(-50%, -50%) scale(.1, .1) !important;
    transform: translate(-50%, -50%) scale(.1, .1) !important;
    
    padding: 0px !important;
    opacity: 0 !important;
    background: #fff !important;
}

/* 팝업 활성화된 상태 */
.needpopup05.on {
    -webkit-transform: translate(-50%, -50%) scale(1, 1) !important;
    -ms-transform: translate(-50%, -50%) scale(1, 1) !important;
    transform: translate(-50%, -50%) scale(1, 1) !important;
    opacity: 1 !important;
}

/* 모바일 추가 최적화 */
@media (max-width: 768px) {
    .needpopup05 {
        width: 95% !important; /* 모바일에서는 더 넓게 */
        max-width: 95% !important;
        min-width: 280px !important; /* 최소 너비 보장 */
    }
    
    /* 모바일에서 팝업 내용 최적화 */
    .needpopup05 .popup {
        padding: 15px !important;
        max-height: 80vh !important; /* 화면 높이의 80% */
        overflow-y: auto !important; /* 내용이 길 경우 스크롤 */
    }
    
    .needpopup05 .popup_cont {
        font-size: 14px !important; /* 모바일에서 읽기 쿨한 크기 */
        line-height: 1.4 !important;
    }
    
    .needpopup05 .popup_top {
        font-size: 16px !important;
        padding: 12px 15px !important;
    }
}

/* 아주 작은 모바일 화면 (갤럭시 S 등) */
@media (max-width: 360px) {
    .needpopup05 {
        width: 98% !important;
        max-width: 98% !important;
    }
    
    .needpopup05 .popup {
        padding: 12px !important;
    }
    
    .needpopup05 .popup_cont {
        font-size: 13px !important;
    }
}