GNB (Header)

상단 고정 전역 네비게이션. position: fixed · 전체 폭 · 높이 70, 본문은 #wrap padding-top 으로 오프셋. 메뉴 hover/focus 시 .gnb-sub 펼침. 실제 사용은 include/header.html(로그아웃) / include/header-login.html(로그인) 을 페이지 최상단에 배치.

활성 메뉴는 .gnb[data-active="키"] 로 지정 — 키: file · config · product · stats · notice.

로그아웃 상태 .header · 우측 .header-util (회원가입 · 로그인) 
<header class="header">
  <div class="header-inner">
    <h1 class="logo"><a href="/">KDPC system</a></h1>
    <nav class="gnb" data-active="file">
      <!-- 1뎁스 -->
      <ul>
        <li class="gnb-file"><a href="#">파일 관리</a></li>
        <!-- config · product · stats · guide … -->
      </ul>
      <!-- 메가메뉴 (2뎁스) — hover/focus 시 표출 -->
      <div class="gnb-mega">
        <div class="gnb-mega-col">
          <p class="gnb-mega-title">파일 관리</p>
          <ul class="gnb-mega-list">
            <li><a href="#">SDK 파일 관리<i class="ico ico-arrow-right"></i></a></li>
            <li><a href="#">파일 요청 관리<i class="ico ico-arrow-right"></i></a></li>
          </ul>
        </div>
        <span class="gnb-mega-line"></span>
        <!-- 설정/발급상품/통계/이용안내 컬럼 … -->
      </div>
    </nav>
    <div class="header-util">
      <a href="#" class="btn btn-light header-btn header-btn--signup"><i class="ico ico-user"></i>회원가입</a>
      <a href="#" class="btn btn-light header-btn header-btn--login"><i class="ico ico-login"></i>로그인</a>
    </div>
  </div>
</header>
로그인 상태 .header · 우측 .header-info (앱선택 · 역할/이름 · 시각 · 공지사항) + 로그아웃 
<header class="header">
  <div class="header-inner">
    <h1 class="logo"><a href="/">KDPC system</a></h1>
    <nav class="gnb" data-active="notice"> … </nav>
    <div class="header-info">
      <div class="select-box select-box--sm header-select"> … 모니모 앱 … </div>
      <!-- 사용자·시각·공지 묶음(간격 6) -->
      <div class="header-menu">
        <span class="header-userbox">
          <button type="button" class="header-user">
            <span class="role-badge"><i class="ico ico-certified"></i></span> <!-- 뱃지 아이콘만 -->
            <span class="header-id"><i class="ico ico-user"></i>김가득 님</span>
          </button>
        </span>
        <span class="header-line"></span>
        <span class="header-time"><i class="ico ico-time"></i>09:57</span>
        <span class="header-line"></span>
        <a href="#" class="header-notice"><i class="ico ico-megaphone"></i>공지사항</a>
      </div>
    </div>
    <div class="header-util">
      <a href="#" class="header-logout" aria-label="로그아웃"><i class="ico ico-logout"></i></a>
    </div>
  </div>
</header>
월렛사 (조회관리 전용) 제한 GNB — 조회 관리 > 거래내역 메뉴만 노출. include/header-wallet.html 
<nav class="gnb" data-active="product">
  <ul>
    <li class="gnb-product"><a href="#">조회 관리</a></li>
  </ul>
  <div class="gnb-mega">
    <div class="gnb-mega-col">
      <p class="gnb-mega-title">조회 관리</p>
      <ul class="gnb-mega-list">
        <li><a href="#">거래내역<i class="ico ico-arrow-right"></i></a></li>
      </ul>
    </div>
  </div>
</nav>
<!-- 우측 유틸(앱선택·역할뱃지·이름·시각·공지·로그아웃)은 header-login 과 동일 -->