@charset "utf-8";
/**
 * accessibility.css — KWCAG 2.2 / KRDS v1.0 웹접근성 개선
 * 2026-03-30 생성
 *
 * 1) :focus-visible 포커스 표시 (키보드 접근성)
 * 2) 명도대비 보정 (WCAG AA 4.5:1)
 * 3) 시맨틱 랜드마크 보조 스타일
 */

/* ========================================
   1. 포커스 표시 — :focus-visible 글로벌 오버라이드
   기존 CSS의 outline:none/outline:0을 무효화
   ======================================== */

/* 글로벌 :focus-visible — 키보드 탐색 시 포커스 링 표시 */
*:focus-visible {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* input/textarea/select/button 포커스 (키보드) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
    outline: 2px solid #005fcc !important;
    outline-offset: 1px !important;
}

/* 링크 포커스 */
a:focus-visible {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* modal_new.css 21,23 override */
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #005fcc !important;
}

/* jQuery UI widget active (jquery-ui.css:71) override */
.ui-widget :active:focus-visible {
    outline: 2px solid #005fcc !important;
}

/* slick slider (slick.css:30) override */
.slick-list:focus,
.slick-list:focus-visible {
    outline: 2px solid #005fcc !important;
}

/* flexslider (flexslider.css:3) override */
.flex-container a:focus-visible,
.flexslider a:focus-visible {
    outline: 2px solid #005fcc !important;
}

/* Bootstrap dropdown (bootstrap.min.css) override */
.dropdown-toggle:focus-visible,
.open > a:focus-visible {
    outline: 2px solid #005fcc !important;
}

/* Bootstrap modal (reset.css, main.css) — 모달 자체는 포커스 링 불필요 */
.modal:focus-visible {
    outline: none !important;
}

/* 검색박스 닫힘 상태에서 탭 포커스 차단 (top:-350px 위치 이동만으로는 포커스 잡힘) */
/* 닫기: visibility는 top 애니메이션(0.35s) 완료 후 hidden 적용 */
.search-box:not(.on) {
    visibility: hidden !important;
    transition: top .35s ease, visibility 0s .35s !important;
}
/* 열기: visibility 즉시 visible → top 슬라이드 다운 보임 */
.search-box.on {
    visibility: visible !important;
    transition: top .35s ease, visibility 0s 0s !important;
}

/* 검색 입력 필드 포커스 보강 */
.search-box .sb-in .input-search input:focus-visible,
.mc-search input[type="text"]:focus-visible,
.MaY25N-AIsearch1 textarea:focus-visible,
.MaY25N-AIse1 .search1 input[type="text"]:focus-visible {
    outline: 2px solid #005fcc !important;
}

/* 로그인 입력 필드 */
.pop_login_box input:focus-visible,
.membership_box .membership_contents fieldset.login_box input:focus-visible {
    outline: 2px solid #005fcc !important;
}

/* 게시판 글쓰기 입력 필드 */
.boardwrite > ul > li > dl > dd .inpbox input.txt:focus-visible {
    outline: 2px solid #005fcc !important;
}

/* 공모전/설문 입력 필드 */
.sub-contest select:focus-visible,
.sub-contest textarea:focus-visible,
.sub-contest input[type="text"]:focus-visible,
.sub-contest input[type="date"]:focus-visible {
    outline: 2px solid #005fcc !important;
    border-color: #172893 !important;
}

/* search2025 select 포커스 */
.search2025 select:focus-visible {
    outline: 2px solid #005fcc !important;
    border-color: #1a8f89 !important;
}

/* 비밀번호 변경 입력 */
.improve-pswrd .popup-insert:focus-visible {
    outline: 2px solid #005fcc !important;
}

/* skip-nav 포커스 — 기존 outline:none 제거 */
#skip-nav a:focus,
#skip-nav a:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: -2px !important;
}


/* ========================================
   2. 명도대비 보정 — WCAG AA 4.5:1 충족
   ======================================== */

/* #999 → #767676 (4.54:1 on white) */
/* 기존 placeholder는 브라우저 기본 명도로 허용, 본문 텍스트만 보정 */

/* 기본 body 텍스트: #666 → #595959 (5.0:1) */
/* body color는 contents.css에서 #666으로 설정됨 — 최소 4.5:1 충족하려면 #595959 이상 */

/* 푸터 텍스트 명도 보정 */
#footer-2025 .fbot-area p {
    color: #444;
}

/* 탭 비활성 텍스트: 명도대비 보정 */
.btn-tab > ul > .ml-btn,
.mr3-btn-tab-wrap > .mr3-bt > .mr3-btn-tab {
    color: #555;
}

/* 날짜/메타 텍스트 명도대비 */
.board-list .date,
.board-list .info {
    color: #555;
}

/* '더보기' 류 링크 명도 보정 */
.contents_title .more a {
    color: #555;
}


/* ========================================
   3. 시맨틱 랜드마크 보조 스타일
   ======================================== */

/* 브레드크럼 네비게이션 */
.breadcrumb-nav {
    padding: 8px 0;
    font-size: 14px;
    color: #666;
}
.breadcrumb-nav ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
}
.breadcrumb-nav li {
    display: inline-flex;
    align-items: center;
}
.breadcrumb-nav li + li::before {
    content: ">";
    margin: 0 6px;
    color: #999;
}
.breadcrumb-nav a {
    color: #555;
    text-decoration: none;
    font-size: 14px;
}
.breadcrumb-nav a:hover,
.breadcrumb-nav a:focus-visible {
    text-decoration: underline;
    color: #005fcc;
}
.breadcrumb-nav [aria-current="page"] {
    font-weight: 600;
    color: #333;
}

/* 시맨틱 태그 전환 시 레이아웃 유지 */
header[role="banner"],
nav[role="navigation"],
main[role="main"],
footer[role="contentinfo"] {
    display: block;
}

/* Footer h1→p.footer-logo 전환 보정 (기존 .ft-lf h1 스타일 승계) */
.ftop-area .ft-lf .footer-logo {
    font-size: 0;
    margin-bottom: 23px;
}
@media screen and (max-width: 700px) {
    .ftop-area .ft-lf .footer-logo {
        margin-bottom: 15px;
    }
}

/* Header div→header 전환 보정 */
header.header {
    /* 기존 .header 스타일 승계 */
}

/* nav.h-bot 전환 보정 (기존 div.h-bot 스타일 승계) */
nav.h-bot {
    /* 기존 .h-bot 스타일은 클래스 기반이므로 자동 적용 */
}

/* Empty.jsp main 태그 보정 */
#content-2025-main {
    display: block;
}


/* ========================================
   4. 모바일 터치 타겟 최소 크기 보장 (WCAG 2.5.5 — 44x44px)
   ======================================== */

@media screen and (max-width: 1024px) {
    /* 모바일 헤더 유틸 메뉴 버튼 */
    .mo-hrt-box > a.mo-search-bn,
    .mo-hrt-box > a.mo-open {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* 모바일 GNB 메뉴 내 링크 */
    .header-2025-menu .mo-hd-top ul li a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* 모바일 로그인/회원가입 등 유틸 링크 */
    .h-top-right ul li a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
    }
}

/* ========================================
   5. Heading 계층 보정 — 검색박스 h4 → h3
   ======================================== */

/* 인기검색어 h4 스타일 보정 (h4→실질 h3 역할이지만 태그 변경 영향도 큼 → CSS로 시각적 보정) */
.search-box .sb-chart-box .sb-tit {
    /* 기존 h4 스타일 유지 — 시각적 변경 없음 */
    font-size: inherit;
}


/* ========================================
   6. 모바일 단계(step) 이미지 과대 표시 보정
   PC에서 4단계가 가로 나열 → 모바일에서 세로 쌓임 시
   talk_step 이미지가 100% 폭으로 늘어나는 문제 수정
   ======================================== */

@media screen and (max-width: 1000px) {
    /* 혁신제안톡/메인 대시보드 step 이미지 (talk_step_01~03) */
    .ghm_stepwrap2 ul li.talk_step img {
        max-width: 260px !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }
}


/* ========================================
   7. 모바일 플로팅 SNS/스크롤 아이콘 숨김 (맞춤정보는 유지)
   ======================================== */

@media screen and (max-width: 1024px) {
    /* r749 풀버전 복원: 모바일 플로팅 = 화면 하단 가로 막대 (PC 우측 → 모바일 하단 풀폭) */
    .main-Y25Nov-nav1 {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
        padding: 6px 10px !important;
        z-index: 99 !important;
        transform: none !important;
    }
    .main-Y25Nov-nav1 .MaY25N-AIse1 {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        max-width: 100% !important;
    }
    .main-Y25Nov-nav1 .MaY25N-AIse1 > dt { margin-bottom: 0 !important; }
    .main-Y25Nov-nav1 .MaY25N-AIse1 > dt > p::after,
    .main-Y25Nov-nav1 .MaY25N-AIse1 > dt > a::after { display: none !important; }
    .main-Y25Nov-nav1 .MaY25N-AIse1 > dt > p,
    .main-Y25Nov-nav1 .MaY25N-AIse1 > dt > a {
        width: auto !important; height: 40px !important; padding: 0 14px !important;
        border-radius: 20px !important; font-size: 14px !important; white-space: nowrap !important;
    }
    .main-Y25Nov-nav1 .MaY25N-AIse1 > dd {
        margin: 0 !important; height: 40px !important; min-width: auto !important;
        flex: 1 !important; padding: 2px !important;
    }
    .main-Y25Nov-nav1 .MaY25N-AIse1 > dd::after { height: 40px !important; width: 40px !important; }
    .main-Y25Nov-nav1 .MaY25N-AIse1 .search1 {
        width: 100% !important; height: 36px !important; padding: 2px 48px 2px 40px !important;
    }
    .main-Y25Nov-nav1 .MaY25N-AIse1 .search1 input[type="text"] { width: calc(100% - 10px) !important; }
    .main-Y25Nov-nav1 .MaY25N-App1 { display: none !important; }
    .main-Y25Nov-nav1 .Go-Top1 { display: none !important; }
    #content-2025-main { padding-bottom: 60px !important; }
    .sub6-popup1 { left: 50% !important; width: calc(100% - 40px) !important; }
}