@charset "UTF-8";
/* ============================================================================
   new_gnb.css — 새 데스크탑 GNB(메가메뉴 드롭다운)
   ----------------------------------------------------------------------------
   레거시 include/board_header.php 의 인라인 <style> 블록(새 GNB)을 그대로 옮김.
   PHP 쪽은 이 스타일이 board_header.php 안에만 인라인으로 존재하지만, Next 는
   config/skin.ts 의 SKIN_STYLESHEETS 로 전역 로드하는 컨벤션이라 별도 파일로 분리.
   마크업/클래스는 components/layout/GnbMenu.tsx 참조.
   ============================================================================ */

.new-gnb {
    background: linear-gradient(180deg, #040334 0%, #120C5D 100%);
    box-shadow:  0px 2px 4px #2f2b69;
    position: relative;
}
.new-gnb-inner {
    display: flex;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    height: 76px;
}
/* 로고 */
.new-gnb-logo {
    display: flex;
    position: relative;
    z-index: 9;
    align-items: center;
    gap: 6px;
    margin-right: 48px;
    flex-shrink: 0;
    text-decoration: none;
}
/* 1차 nav */
.new-gnb-nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    left:0;
}

.new-gnb-nav .new-gnb-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fcfbfd;
    height: 68px;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    transition: color .15s;
}
.new-gnb-chevron {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    opacity: .55;
    transition: transform .2s;
}
/* .new-gnb:hover .new-gnb-chevron { transform: rotate(180deg); } */
/* 드롭다운 패널 — 위치만 */
.new-gnb-panel {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    border-top: 2px solid #7C5CF6;
    box-shadow: 0 20px 60px rgba(60,40,160,.15);
    z-index: 3000;
    /* 트랜지션 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.new-gnb:hover .new-gnb-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.new-gnb.ndp-closed .new-gnb-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-6px) !important;
}

/* 우측 영역 */
.new-gnb-right {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
    position: relative;
    z-index: 9;
    flex-shrink: 0;
}
/* CTA 버튼 */
.new-gnb-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    background: linear-gradient(135deg, #EDE5FF 0%, #F5F0FF 100%);
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s, transform .1s, color .3s, background .3s;
    flex-shrink: 0;
    border:1px solid #998bd9;
}
.new-gnb-cta:hover { filter: brightness(1.08); transition: 0.3s;
background: linear-gradient(135deg, #7C5CF6 0%, #A07CF8 100%); border:none; }
.new-gnb-cta:hover .new-gnb-cta-main {color:#fff; transition: 0.3s}
.new-gnb-cta-icon { color: #ffca31; font-size: 22px; line-height: 1; flex-shrink: 0; }
.new-gnb-cta-texts { display: flex; flex-direction: column; }
.new-gnb-cta-main { font-size: 15px; font-weight: 700; color: #543dcb; line-height: 1.25; transition: .3s; }
.new-gnb-cta-sub  { font-size: 11px; color: rgba(255,255,255,.78); line-height: 1.25; margin-top: 1px; }
/* 로그인/회원가입 */
.new-gnb-auth {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.new-gnb-auth svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; }
.new-gnb-auth:hover { color: #c4b0ff; }

/* ════════════════════════════════
   풀패널 내부 레이아웃
════════════════════════════════ */
.ndp-wrap { display: flex; max-width: 1280px; margin: 0 auto; }

/* 좌측 사이드바 */
.ndp-sidebar {
    display:none;
    width: 220px; flex-shrink: 0;
    background: linear-gradient(160deg, #1a0e6e 0%, #2d1fa3 100%);
    padding: 28px 22px;
    /* display: flex; */
    flex-direction: column; gap: 20px;
}
.ndp-brand-title { font-size: 18px; font-weight: 800; color: #fff; }
.ndp-brand-sub   { font-size: 11px; color: rgba(255,255,255,.52); margin-top: 3px; }
.ndp-pbox {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px; padding: 15px;
}
.ndp-pbox-label { font-size: 11px; font-weight: 700; color: #FFD700; margin-bottom: 5px; }
.ndp-pbox-title { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.5; margin-bottom: 11px; }
.ndp-pbox-btn {
    display: inline-flex; align-items: center;
    padding: 6px 14px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 20px; font-size: 12px; color: #fff;
    text-decoration: none; transition: background .13s;
}
.ndp-pbox-btn:hover { background: rgba(255,255,255,.28); color: #fff; }
.ndp-stats { display: flex; flex-direction: column; gap: 10px; }
.ndp-stat  { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.62); }
.ndp-stat-ico { font-size: 14px; }

/* 우측 메인 */
.ndp-main { flex: 1; padding: 24px 28px 0; min-width: 0; }

/* 4열 카테고리 */
.ndp-cats { display: flex; margin-bottom: 2rem; }
.ndp-cat  { flex: 1; padding: 0 18px; border-right: 1px solid #F0EEF8; padding-bottom: 1.5rem; }
.ndp-cat:first-child { padding-left: 0; }
.ndp-cat:last-child  { border-right: none; padding-right: 0; }

/* 카테고리 헤더 */
.ndp-cat-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid #F0EEF8;
}
.ndp-cat-ico {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.ndp-cat-name { font-size: 16px; font-weight: 700; color: #1a1a2e; }

/* 서비스 아이템 */
.ndp-item {
    margin-bottom:0.2rem;
    display: flex; align-items: center; gap: 13px;
    padding: 7px 0; text-decoration: none;
}
.ndp-item:hover .ndp-item-name { color: #7C5CF6; }
.ndp-item.is-on .ndp-item-name { color: #7C5CF6; font-weight: 700; }
.ndp-item-ico {
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
}
.ndp-item-name { font-size: 15px; font-weight: 600; color: #1a1a2e; line-height: 1.2; transition: color .1s; }
.ndp-item-desc { font-size: 13px;     color: #616064; margin-top: 2px; }

/* 전체보기 버튼 */
.ndp-viewall {
    display:none;
    /* display: inline-flex; */
     align-items: center;
     gap: 3px;
    margin-top: 12px; padding: 7px 14px;
    border: 1px solid #E0DDFF; border-radius: 20px;
    font-size: 12px; color: #7C5CF6; font-weight: 600;
    text-decoration: none; transition: background .12s;
}
.ndp-viewall:hover { background: #F5F0FF; color: #7C5CF6; }

/* 하단 프로모 카드 */
.ndp-pcards {
    display: flex; gap: 1.25rem;
    padding-top: 18px; border-top: 1px solid #F0EEF8;
}
.ndp-pcard {
    flex: 1; display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-radius: 12px;
    text-decoration: none; transition: opacity .12s;
}
.ndp-pcard:hover { opacity: .82; }
.ndp-pcard-1 { background: #FFF8E7; }
.ndp-pcard-2 { background: #F0EEFF; }
.ndp-pcard-3 { background: #EEF2FF; }
.ndp-pcard-title { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 0.375rem; }
.ndp-pcard-desc  { font-size: 12px; color: #888; margin-bottom: 7px; }
.ndp-pcard-link  { font-size: 12px; color: #7C5CF6; font-weight: 600;  margin-top:1rem; }
.ndp-pcard-img   { font-size: 36px; flex-shrink: 0; margin-left: 10px; }

/* 하단 CTA 바 */
.ndp-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0 18px; margin-top: 16px;
    border-top: 1px solid #F0EEF8;
}
.ndp-bottom-text { font-size: 13px; color: #666; }
.ndp-bottom-text strong { color: #1a1a2e; font-weight: 500; }
.ndp-start-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #7C5CF6 0%, #A07CF8 100%);
    border-radius: 10px; font-size: 13px; font-weight: 700;
    color: #fff; text-decoration: none; transition: opacity .14s;
}
.ndp-start-btn:hover { opacity: .9; color: #fff; }

/* 닫기 바 */
.ndp-close-bar {
    text-align: center; padding: 10px;
    background: #F8F7FF; border-top: 1px solid #EAE6FF;
    font-size: 13px; color: #999; cursor: pointer; transition: color .12s;
}
.ndp-close-bar:hover { color: #555; }