@charset "UTF-8";

/* site/kr/skin/header.jsp */
/* '화면조정' 문구만 숨김 (+/- 버튼 기능은 유지) */
#wrap-header .font-control .font-control-label { display: none !important; }
#wrap-header .header-access,
#wrap-header .header-access a,
#wrap-header .header-access button,
#wrap-header .font-control { white-space: nowrap; }

/* 유틸 영역이 줄바꿈되면 검색·전체메뉴 버튼이 아랫줄로 밀려 헤더가 깨지므로 한 줄로 고정한다. */
#wrap-header .header-access { flex: none; flex-wrap: nowrap; }

/* 로그인 시 유틸 메뉴(마이페이지·로그아웃·올케어서비스)가 길어져 PC GNB 와 겹치는 구간(약 1440~1700px):
   구분점·화면조정 버튼을 숨기고 간격을 줄여 한 줄을 유지한다. 그 이하 폭은 기존 모바일 메뉴 전환 규칙을 따른다. */
@container site-header (max-width: 103rem) {
    #wrap-header:has(.header-user-menu) .header-gnb .gnb-depth-1 { gap: 1rem; }
    #wrap-header .header-access:has(.header-user-menu) { gap: 0.5rem; }
    #wrap-header .header-access:has(.header-user-menu) .header-dot,
    #wrap-header .header-access:has(.header-user-menu) .font-control { display: none; }
}

/* 통합검색 레이어: 인기·추천검색어 */
.header-search-keywords {
    display: grid;
    gap: .625rem;
    max-width: 50rem;
    margin: 1.25rem auto 0;
}
.header-search-keyword-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}
.header-search-keyword-row > strong {
    flex: none;
    min-width: 4.5rem;
    color: #06194f;
    font-size: .9375rem;
    font-weight: 700;
}
.header-search-keyword-row ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.header-search-keyword-row a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .25rem .75rem;
    border: 1px solid #c5ddec;
    border-radius: 1rem;
    background: #fff;
    color: #2157bc;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}
.header-search-keyword-row a:hover,
.header-search-keyword-row a:focus-visible {
    border-color: #2157bc;
    background: #edf6fc;
}
/* 실시간 인기검색어 순위 변동: ▲상승 ▼하락 NEW */
.header-search-keyword-change {
    margin-left: .375rem;
    font-size: .75rem;
    font-weight: 700;
}
.header-search-keyword-change.is-up { color: #d22f27; }
.header-search-keyword-change.is-down { color: #2157bc; }
.header-search-keyword-change.is-new { color: #b45309; }
