/* =====================================================================
   공통 GNB(글로벌 네비) — Claude Design 시안 적용 (2026-06-18)
   ---------------------------------------------------------------------
   · 15개 페이지의 인라인 GNB CSS를 오버라이드한다.
     각 페이지의 <style> 인라인 뒤(</style> 다음)에 이 파일을 <link>로 로드해
     동일 명시도에서 '나중 규칙'으로 이기게 한다.
   · 마크업은 기존 구조 유지: .lc-gnb > .inner > (.lc-logo, nav, .lc-user)
   · 사용자 칩 내부(.av, select)는 auth.js가 렌더 → 여기서 톤만 맞춤
   ===================================================================== */

/* 바: 반투명 흰 배경 + blur + 따뜻한 보더 */
.lc-gnb{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:none;
  border-bottom:1px solid #EFE7DA;
  position:sticky;top:0;z-index:100;
}
.lc-gnb .inner{
  display:flex;align-items:center;justify-content:space-between;
  height:74px;max-width:1200px;margin:0 auto;padding:0 24px;
}

/* 로고: 텍스트(네이비) + 앞 아이콘은 그라데이션 둥근 박스 */
.lc-logo{
  display:flex;align-items:center;gap:10px;
  font-size:21px;font-weight:900;color:#073787;letter-spacing:-.5px;text-decoration:none;
}
.lc-logo i{
  width:38px;height:38px;border-radius:13px;margin-right:0;
  background:linear-gradient(140deg,#3FB4F7,#0C9DF3);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  box-shadow:0 6px 14px rgba(12,157,243,.28);
}

/* 네비: pill 형태 */
.lc-gnb nav{display:flex;align-items:center;gap:6px;margin-left:44px;flex:1;}
.lc-gnb nav a{
  padding:9px 16px;line-height:normal;border-radius:999px;border-bottom:none!important;
  font-size:16px;font-weight:700;color:#4a5b6e;text-decoration:none!important;
  transition:all .15s;
}
.lc-gnb nav a:hover{background:#F0EADF;color:#073787;}
.lc-gnb nav a.on{background:#E4F3FE;color:#0C9DF3;border-bottom:none!important;}

/* 드롭다운 트리거(주제/공지) — 헤더 전체 높이를 차지해 마우스가 빠지지 않게 */
.lc-gnb .gnb-topic,.lc-gnb .gnb-notice{
  position:relative;display:flex;align-items:center;align-self:stretch;
}
.lc-gnb .gnb-topic>a::after,
.lc-gnb .gnb-notice>a::after{content:"▾";font-size:var(--lc-fs-2xs);opacity:.6;margin-left:2px;}

/* 드롭다운 패널 — 헤더 아래로 10px 띄움(top:calc(100% + 10px)).
   트리거↔패널 사이 10px 틈은 ::before 투명 브릿지가 덮어 hover 끊김 방지 */
.lc-gnb .topic-dd,.lc-gnb .notice-dd{
  top:calc(100% + 10px);border-radius:16px;border:1px solid #EFE7DA;
  box-shadow:0 14px 34px -12px rgba(60,80,120,.3);
  padding:8px;overflow:visible;
}
.lc-gnb .topic-dd::before,.lc-gnb .notice-dd::before{
  content:"";position:absolute;left:0;right:0;top:-12px;height:12px;  /* 띄운 틈(10px) 덮는 투명 브릿지 */
}
.lc-gnb .topic-dd a,.lc-gnb .notice-dd a{
  border-radius:10px;padding:9px 14px;color:#4a5b6e;
}
.lc-gnb .topic-dd a:hover,.lc-gnb .notice-dd a:hover{background:#F4FAFE;color:#0670ad;}

/* 사용자 칩: 그라데이션 아바타 + pill */
.lc-user{display:flex;align-items:center;gap:12px;font-size:14px;}
.lc-user .av{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(140deg,#5FC0F8,#0C9DF3);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;
  box-shadow:0 4px 10px rgba(12,157,243,.3);
}
/* auth.js가 렌더하는 데모 전환 select → pill 톤 + 커스텀 화살표 */
.lc-user .lc-role-switch{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:1px solid #EBE2D4!important;border-radius:999px!important;
  padding:9px 38px 9px 16px!important;background:#fff!important;
  /* 우측에 ▾ 화살표를 일정 간격으로 배치 */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa7b6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 16px center!important;
  font-size:14px!important;font-weight:700;color:#33445a;
  box-shadow:0 2px 8px rgba(70,60,40,.05);cursor:pointer;
}