/* =============================================
   NTurn GNB v2 — Standalone CSS for global navigation
   (extracted from dashboard_v2.css, isolated to .gnb scope)
   - 다른 페이지(base.html extend)에서도 dashboard와 동일 GNB 사용 가능
   - Bootstrap 충돌 방지: reset/font는 .gnb scope 내부만 적용
   ============================================= */

:root {
  --font: 'Plus Jakarta Sans','Noto Sans KR',sans-serif;
  --c-0:   #ffffff;
  --c-50:  #fafaf9;
  --c-100: #f4f4f5;
  --c-200: #e4e4e7;
  --c-300: #d1d1d6;
  --c-400: #a1a1aa;
  --c-500: #71717a;
  --c-700: #3f3f46;
  --c-800: #27272a;
  --c-900: #09090b;
  --accent:      #00d4aa;
  --accent-dim:  rgba(0,212,170,0.10);
  --accent-glow: rgba(0,212,170,0.22);
  --hero-1: #07070e;
  --max-w: 1280px;
  --px: 2.5rem;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
}

/* GNB scope 내부만 reset + font 적용 (Bootstrap rules와 격리) */
.gnb, .gnb *, .gnb *::before, .gnb *::after {
  box-sizing: border-box;
}
.gnb, .gnb * {
  font-family: var(--font);
}
/* Bootstrap의 <a>{color:#0d6efd}, .btn 등 override — GNB 안 모든 a/button은 inherit */
.gnb a, .gnb a:hover, .gnb a:visited, .gnb a:active, .gnb a:focus {
  text-decoration: none;
  color: inherit;
}
.gnb button {
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
}
/* GNB 안 텍스트의 baseline color + font rendering (dashboard와 동일하게 맞춤) */
.gnb {
  color: var(--c-700);
  /* 폰트 렌더링 — dashboard_v2.css의 body에 있는 설정을 GNB scope에 동일 적용 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.5;
}
.gnb * {
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
}

/* =============================================
   GNB
   ============================================= */
.gnb{
  position:fixed;top:0;left:0;right:0;height:58px;z-index:1000;
  background:#ffffff;
  border-bottom:1px solid var(--c-200);
  transition:box-shadow .2s;
}
.gnb.scrolled{box-shadow:0 2px 16px rgba(0,0,0,0.07);}
.gnb-row{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--px);
  height:100%;display:flex;align-items:center;gap:1.75rem;
}
.gnb-brand{font-size:1.0625rem;font-weight:800;color:var(--c-900);letter-spacing:-0.04em;flex-shrink:0;}
.gnb-brand:hover{color:var(--accent);}
.gnb-nav{display:flex;align-items:center;gap:.125rem;flex:1;}
.gnb-item{position:relative;}
.gnb-btn{
  display:flex;align-items:center;gap:.3rem;
  padding:.375rem .75rem;
  font-size:.875rem;font-weight:600;
  color:var(--c-800);background:none;border:none;
  border-radius:var(--r-sm);
  transition:color .15s,background .15s;
  letter-spacing:-0.02em;white-space:nowrap;
}
.gnb-btn:hover{color:var(--c-900);background:var(--c-100);}
.gnb-btn .ch{font-size:.6rem;opacity:.45;transition:transform .2s;}
.gnb-item:hover .ch{transform:rotate(180deg);}

/* ── Right util buttons (개인화) — visually distinct from nav ── */
.gnb-util-btn{
  display:flex;align-items:center;gap:.3rem;
  padding:.35rem .7rem;
  font-size:.8125rem;font-weight:500;
  color:var(--c-500);background:none;border:none;
  border-radius:var(--r-sm);
  transition:color .15s,background .15s;
  letter-spacing:-0.015em;white-space:nowrap;cursor:pointer;
}
.gnb-util-btn:hover{color:var(--c-800);background:var(--c-100);}
.gnb-util-btn.disabled{opacity:.32;cursor:not-allowed !important;pointer-events:none;}

/* Vertical rule between nav area and util area */
.gnb-sep{width:1px;height:16px;background:var(--c-200);margin:0 .375rem;flex-shrink:0;}

/* User dropdown menu */
.gnb-user-drop{
  min-width:160px;
  right:0;left:auto;
}
.gnb-user-drop .dd-link{
  display:flex;
  align-items:center;
  gap:.625rem;
  padding:.5rem .875rem;
  border-radius:var(--r-sm);
  font-size:.875rem;
  font-weight:500;
  color:var(--c-800);
  transition:background .12s;
  text-decoration:none;
}
.gnb-user-drop .dd-link:hover{
  background:var(--c-50);
  color:var(--c-900);
}
.gnb-user-drop .dd-link i{
  font-size:1rem;
  color:var(--c-500);
  width:18px;
  text-align:center;
  flex-shrink:0;
}
.gnb-user-drop .dd-link:hover i{
  color:var(--c-800);
}
.gnb-user-drop .dd-link.logout{
  color:var(--c-500);
}
.gnb-user-drop .dd-link.logout:hover{
  background:#fff1f1;
  color:#dc2626;
}
.gnb-user-drop .dd-link.logout:hover i{
  color:#dc2626;
}
.gnb-user-drop hr{
  margin:.375rem .75rem;
  border:none;
  border-top:1px solid var(--c-200);
}
/* User pill accent state — 테두리 제거 + 작은 사이즈 */
.gnb .gnb-user-pill,
.gnb button.gnb-user-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  background:transparent;
  border:none;
  font-size:0.7rem;          /* 약 11.2px — 기존 16px의 70% */
  padding:.25rem .5rem;
  color:var(--c-700);        /* Bootstrap override — 텍스트 회색 명시 */
  cursor:pointer;
}
.gnb .gnb-user-pill *,
.gnb .gnb-user-pill #gnb-username{
  color:inherit;             /* Bootstrap의 specific rule 깨기 */
}
.gnb .gnb-user-pill:hover,
.gnb button.gnb-user-pill:hover{
  background:var(--c-100);
  color:var(--c-900);
}
.gnb .gnb-user-pill i.bi-person-circle{
  color:var(--accent) !important;  /* accent 색상 강제 */
  font-size:0.85rem;
}
.gnb .gnb-user-pill i.bi-chevron-down{
  font-size:.6rem;opacity:.6;color:var(--c-500);
}

/* Login button */
.gnb-login-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .875rem;
  border:1.5px solid var(--c-200);border-radius:var(--r-sm);
  background:var(--c-0);font-size:.8125rem;font-weight:600;color:var(--c-800);
  text-decoration:none;transition:all .15s;
}
.gnb-login-btn:hover{border-color:var(--c-900);color:var(--c-900);background:var(--c-50);}

.gnb-drop{
  display:none;position:absolute;
  top:calc(100% + 10px);left:-8px;
  background:var(--c-0);
  border:1px solid var(--c-200);
  border-radius:var(--r-lg);
  box-shadow:0 16px 48px rgba(0,0,0,0.10),0 2px 8px rgba(0,0,0,0.04);
  padding:.5rem;min-width:240px;z-index:200;
}
/* invisible hover bridge — 버튼과 드롭다운 사이 10px gap을 hover 영역으로 확장 */
.gnb-drop::before{
  content:"";position:absolute;
  top:-10px;left:0;right:0;height:10px;
  background:transparent;
}
.gnb-item:hover .gnb-drop{display:block;}
/* user drop: pill hover + click 모두 지원 */
/* User dropdown — pill 좌측 끝에 정렬 (기존 right:0 → left:0 변경) */
#gnb-user-area .gnb-drop{left:0;right:auto;}
#gnb-user-area:not(.open):not(:hover) .gnb-drop{display:none;}
#gnb-user-area.open .gnb-drop{display:block;}

.dd-link{
  display:flex;align-items:center;gap:.75rem;
  padding:.625rem .75rem;border-radius:var(--r-md);
  transition:background .12s;
}
.dd-link:hover{background:var(--c-50);}
.dd-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:.9375rem;
}
.dd-label{font-size:.8125rem;font-weight:600;color:var(--c-800);letter-spacing:-0.02em;line-height:1.2;}
.dd-sub{font-size:.75rem;color:var(--c-400);margin-top:1px;letter-spacing:-0.01em;}

.gnb-right{display:flex;align-items:center;gap:.25rem;margin-left:auto;flex-shrink:0;}
/* 워크스페이스 CTA — Bootstrap <a>{color:#0d6efd} override 위해 더 specific selector */
.gnb .gnb-cta,
.gnb a.gnb-cta,
.gnb a.gnb-cta:hover,
.gnb a.gnb-cta:visited,
.gnb a.gnb-cta:active{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.4rem 1.125rem;
  background:var(--c-900);color:var(--c-0);
  font-size:.8125rem;font-weight:700;
  border:none;border-radius:var(--r-sm);letter-spacing:-0.01em;
  transition:all .2s;
  text-decoration:none;
}
.gnb a.gnb-cta:hover{background:var(--accent);color:#000;transform:translateY(-1px);box-shadow:0 4px 14px var(--accent-glow);}

.gnb-btn-disabled{
  opacity:.38;
  cursor:not-allowed !important;
}
.gnb-btn-disabled:hover{color:var(--c-500) !important;background:transparent !important;}
.gnb-soon{
  font-size:.55rem;font-weight:700;letter-spacing:.04em;
  padding:.1rem .35rem;border-radius:999px;
  background:var(--c-200);color:var(--c-500);
  margin-left:.25rem;text-transform:uppercase;
  vertical-align:middle;
}