@charset "utf-8";
/* ==========================================================================
   GSBLOC 헤더/메뉴 전용 커스텀 디자인
   파일: theme/basic/css/header.custom.css
   작성: 2026-07-26 — 기존 head.php의 쿼리/로직은 건드리지 않고
         마크업(.nvr-main-nav, .nvr-subnav)에만 적용.
   ========================================================================== */

/* 사이트 전체 페이지 이동(카테고리 클릭, 목록↔상세 등)시 흰 화면 깜빡임 완화
   — 브라우저 기본 크로스페이드 전환 사용. 지원 브라우저(Chrome/Edge 등)에서만 동작하고
   미지원 브라우저에서는 그냥 기존처럼 이동되므로 부작용 없음(progressive enhancement). */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .18s;
}

/* ── 상단 로그인바 (좌측 정렬, 심플) ──────────────────── */
.nvr-topbar {
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12.5px;
}
.nvr-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    padding: 7px 16px;
}
.nvr-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #767676;
    text-decoration: none;
    transition: color .15s ease;
}
.nvr-topbar-link:hover {
    color: #ff6b01;
    text-decoration: none;
}
.nvr-topbar-link i { font-size: 13px; }
.nvr-topbar-mypage {
    font-weight: 600;
    color: #191919;
}
.nvr-topbar-mypage:hover { color: #ff6b01; }
.nvr-topbar-admin { color: #ff6b01; font-weight: 600; }

.nvr-wishlist-link { position: relative; }
.nvr-wishlist-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; margin-left: 2px;
    background: #ff6b01; color: #fff; font-size: 10px; font-weight: 700;
    border-radius: 10px; line-height: 1;
}

/* ── 2행: 카테고리 + 메뉴 행 ──────────────────────────── */
.nvr-menu-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

/* ── 메인 내비게이션 (1차) — 심플: 굵기 고정, 밑줄로만 상태 표시 ── */
.nvr-main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
}

.nvr-nav-item {
    display: block;
    padding: 6px 2px;
    font-size: 15px;
    color: #4a4a4a;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: -0.2px;
    position: relative;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.nvr-nav-item:hover {
    color: #191919;
}
.nvr-nav-item.active {
    color: #ff6b01;
    border-bottom-color: #ff6b01;
}

/* ── 서브내비 (2차분류) — 옛스타일: 평소엔 숨김, 메뉴에 마우스를 올리면
     그 메뉴 바로 아래로 박스가 내려옴(플로팅 드롭다운). PC only. */
.nvr-subnav {
    display: none;
}
@media (min-width: 768px) {
    .nvr-subnav {
        display: block;
        position: absolute;
        top: 0; left: 0; /* JS가 마우스 올린 메뉴 위치로 매번 재계산해서 넣어줌 */
        min-width: 180px;
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 10px;
        box-shadow: 0 14px 32px rgba(0,0,0,.12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .15s ease, transform .15s ease, visibility .15s;
        z-index: 60;
        pointer-events: none;
    }
    .nvr-subnav.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}
.nvr-subnav-inner {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 2px;
}

.nvr-subnav-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: #4a4a4a;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.2px;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease;
}
.nvr-subnav-link:hover {
    color: #ff6b01;
    background: #fff5ee;
}

/* ── 전체 카테고리(아이템분류 4단계) 플라이아웃 메뉴 ──────
     로고 오른쪽. 버튼에 hover하면 1차 패널이 뜨고,
     각 항목에 hover할 때마다 오른쪽으로 다음 단계가 펼쳐짐. */
.nvr-cat-menu {
    position: relative;
}
.nvr-cat-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 6px;
    border: none;
    background: none;
    color: #191919;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition: color .15s ease;
}
.nvr-cat-btn:hover,
.nvr-cat-menu:hover .nvr-cat-btn { color: #ff6b01; }
.nvr-cat-btn svg { flex-shrink: 0; }

.nvr-cat-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0; /* 버튼~패널 사이 gap을 없애 hover 끊김 방지 */
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    z-index: 200;
    min-width: 180px;
    padding: 6px 0;
}
.nvr-cat-menu:hover .nvr-cat-panel { display: block; }

/* 각 단계 리스트 공통 */
.nvr-cat-panel ul { list-style: none; margin: 0; padding: 0; }
.nvr-cat-panel .nvr-cat-item { position: relative; }
.nvr-cat-panel .nvr-cat-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.nvr-cat-panel .nvr-cat-item > a:hover,
.nvr-cat-panel .nvr-cat-item.has-children:hover > a {
    background: #fff8f0;
    color: #ff6b01;
}
.nvr-cat-panel .nvr-cat-item > a i { font-size: 10px; color: #ccc; }

/* 2~4차 패널: 부모 li 오른쪽으로 플라이아웃 */
.nvr-cat-panel .nvr-cat-l2,
.nvr-cat-panel .nvr-cat-l3,
.nvr-cat-panel .nvr-cat-l4 {
    display: none;
    position: absolute;
    top: -7px;
    left: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    min-width: 180px;
    padding: 6px 0;
}
.nvr-cat-panel .nvr-cat-item.has-children:hover > .nvr-cat-l2,
.nvr-cat-panel .nvr-cat-item.has-children:hover > .nvr-cat-l3,
.nvr-cat-panel .nvr-cat-item.has-children:hover > .nvr-cat-l4 {
    display: block;
}

@media (max-width: 1023px) {
    .nvr-cat-menu { display: none; } /* 모바일은 기존 상단 메뉴만 사용 */
}