@charset "UTF-8";

/* Mobile first: base -> 768px -> 1024px -> 1440px. */

/* =========================================================
   퀵메뉴 (기존 renewal_quick.css) — IncTopSection.jsp 마크업, 메인·서브 공통.
   시안: Figma 503:55953 (68×68 · 둥근 20 · 간격 8).
   ========================================================= */
:focus {
    outline-color: #002dae;
    outline-offset: -2px
}   
.site-wrap *:focus {
    outline-offset: 4px;
}
.rn-quick {
    position: fixed;
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    font-family: 'Pretendard', 'Pretendard Variable', sans-serif;
}

.rn-quick__item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 56px;
    height: 56px;
    padding: 8px 4px;
    border: 0;
    border-radius: 16px;
    /* 그림자를 부모 filter 로 주면 그 안에서만 흐려져 블러가 안 보인다 — 칸마다 box-shadow 로 */
    box-shadow: 0 16px 15px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(17.5px);
    backdrop-filter: blur(17.5px);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -0.26px;
    color: rgba(34, 34, 34, 0.9);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s;
}

.rn-quick__item:hover, .rn-quick__item:focus-visible {
    transform: translateY(-2px);
}

.rn-quick__item img {
    display: block;
    max-width: none;
}

.rn-quick__item--kakao {
    background: rgba(255, 224, 30, 0.9);
}

.rn-quick__item--call {
    background: rgba(217, 217, 217, 0.8);
}

/* 시안 1003:11519 — 전화상담과 같은 배경, 테두리 없음, 위 화살표 + TOP */
.rn-quick__item--top {
    background: rgba(217, 217, 217, 0.8);
    font-size: 12px;
    letter-spacing: -0.28px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
    transition: transform 0.25s, opacity 0.25s, visibility 0.25s;
}

/* 맨 위에서는 사라짐 — 아래로 밀리며 흐려진다. 메뉴가 위에 고정이라 자리를 비워도 나머지 칸은 안 움직인다 */
.rn-quick__item--top.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
}

/* 화살표는 꾸밈이라 <img> 대신 배경으로 */
.rn-quick__item--top::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url("/type/KOR_2027/img/quick/ico-top.svg") no-repeat center / 100% 100%;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
}

/* 말풍선 SVG 는 그림자 여백 포함(33.2×31.2) — 시안 자리 22×20 에 맞춰 바깥으로 넘긴다 */
.rn-quick__ico-kakao {
    width: 33.2px;
    height: 31.2px;
    margin: -1.6px -5.6px -9.6px;
    transform: scale(0.82);
}

.rn-quick__ico-call {
    width: 20px;
    height: 20px;
}

@media screen and (min-width: 768px) {
    .inner-header-wrap {
        height: 120px;
    }
}

@media screen and (min-width: 1024px) {
    .rn-quick {
        display: flex;
        right: 6px;
        top: 365px;
    }

    .rn-quick__item {
        width: 68px;
        height: 68px;
        padding: 16px 8px 12px;
        border-radius: 20px;
        font-size: 13px;
    }

    .rn-quick__item--top {
        font-size: 14px;
    }

    .rn-quick__item--top::before {
        width: 20px;
        height: 20px;
    }

    .rn-quick__ico-kakao {
        transform: none;
    }

    .rn-quick__ico-call {
        width: 24px;
        height: 24px;
    }
}

@media screen and (min-width: 1440px) {
    .header, .inner-header-wrap {
        height: 120px;
    }

    /* 2027 컬러변경(시안 1139:4719) — GNB 줄만 파랑 그라데이션.
       띠를 wrap 에 깔고 위 40px(UNB)은 비워 둔다. 기준이 위쪽이라
       드롭다운이 열려 wrap 이 길어져도(layout.js $innerHeaderWrap.css('height')) 자리가 안 밀린다.
       .header.on 은 layout.css 의 흰색 그라데이션을 덮으려고 같이 적는다 */
    .inner-header-wrap,
    .header.on .inner-header-wrap {
        background-color: #fff;
        background-image: linear-gradient(90deg, #002dae 0%, #00115b 100%);
        background-repeat: no-repeat;
        background-position: left 0 top 40px;
        background-size: 100% 80px;
    }

    /* 띠는 wrap 이 깔아 준다 — 모바일로 잡힌 기기가 넓은 화면일 때 layout_mob.css 의 흰 바탕을 치운다 */
    .inner-header {
        box-sizing: border-box;
        width: 100%;
        max-width: 1920px;
        height: 80px;
        margin: 0 auto;
        padding: 0 16px !important;
        background: none;
    }

    .header .logo {
        flex: none;
        width: 250px;
        min-width: 0;
        height: 40px;
        padding: 0 4px;
        background: url("/type/KOR_2027/img/renewal/gnb/logo.svg") no-repeat 4px center / 234px 40px;
        outline-offset: 6px;
        outline-color: #ffffff;
    }

    .header .logo img {
        display: none;
    }

    .header-util-web {
        flex: none;
        justify-content: flex-end;
        gap: 24px;
        width: 250px;
    }

    /* .header.on 은 layout.css 의 #00467F !important 를 덮는다 */
    .header-util-web a.main-login-icon,
    .header.on .header-util-web a.main-login-icon {
        flex-direction: row;
        gap: 6px;
        height: 32px;
        padding: 8px 0px;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.36px;
        color: #fff !important;
        outline-color: #ffffff;        
    }

    .main-login-icon img {
        width: 17.8px;
        height: 19.8px;
        margin: 0 3.1px;
    }

    .header-util-web .sitemap {
        position: relative;
        min-width: 32px;
        width: 32px;
        height: 32px;
        margin-left: 0;
        background: url("/type/KOR_2027/img/renewal/gnb/ico-menu-white.svg") no-repeat center / 19.4px 15.3781px !important;
    }

    .header-util-web .sitemap:focus {
        outline: 2px solid #fff;
        outline-offset: 2px;
        border-radius: 2px;
    }

    .header-util-web .sitemap::before {
        content: "";
        position: absolute;
        top: 8px;
        left: -12px;
        width: 1px;
        height: 16px;
        background: var(--line-divider-white, rgba(255, 255, 255, 0.40));
    }
}

/* 로그인 상태의 '내정보' 아이콘은 검정 PNG 뿐이라 파랑 띠 위에서 안 보인다 — 흰색으로 반전 */
.header-util-web img[src*="userinfo"] {
    filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
    .rn-quick__item--top {
        transition: none;
    }

    .rn-quick__item--top.is-hidden {
        transform: none;
    }
}

/* GEO 승인 문안은 화면 요소가 아니다 — IncGeoData.jsp 의 값을 IncSeoHead.jsp 가
   JSON-LD(WebPage.abstract/citation)로만 내보낸다(담당자 결정 2026-11-04). 전용 CSS 없음. */
.rn-logo-heading {
    display: flex;
    align-items: center;
    flex: none;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: inherit;
}

/* Header utilities shared with the IPSI_2027 layout. */
.header .rn-util { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; gap: 8px;}
.header .rn-util__links { display: flex; align-items: center; }
.header .rn-util__link { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px; color: #fff !important; font-size: 16px; font-weight: 600; letter-spacing: -.24px; white-space: nowrap; outline-color: #fff; }
.header .rn-util__link img { display: none; box-sizing: border-box; width: 24px; height: 24px; padding: 2.1px 3.1px; }
.header .rn-util__link img[src*="userinfo"] { filter: brightness(0) invert(1); }
.header .rn-util__bar { flex-shrink: 0; width: 1px; height: 16px; background: rgba(255,255,255,.4); }
.header .rn-util__menu { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex-shrink: 0; width: 32px; height: 32px; padding: 4px; outline-color: #fff; }
.header .rn-util__menu img { box-sizing: border-box; width: 24px; height: 24px; padding: 4.3px 2.3px; }
.header .rn-util__menu::before, .header .rn-util__menu::after { display: none; }
.header .rn-util__pc, .header .rn-util__menu-close { display: none !important; }
.header .rn-util__menu.off .rn-util__menu-open { display: none; }
.header .rn-util__menu.off .rn-util__menu-close { display: block !important; padding: 2px; }
@media screen and (min-width: 375px) {
    .header .rn-util__link img { display: block; }
}
@media screen and (min-width: 768px) {
    .header .rn-util { gap: 16px; }
}
@media screen and (min-width: 1440px) {
    .header .rn-util { width: 250px; }
    .header .rn-util__pc { display: flex !important; }
    .header .rn-util__mo { display: none !important; }
}