@charset "utf-8";

/* ==========================================
   DRBL HEADER (FINAL CLEAN)
   - Fixed glass header
   - Desktop: logo + nav perfectly centered
   - Company dropdown: stable (hover + JS .is-open)
   - Active pill: same style (links + dropdown)
   - Mobile: menu button + drawer
   ========================================== */

/* ===== TOKENS ===== */
:root{
  /* menu typography */
  --navFont: 16px;
  --navTracking: .18em;
  --navColor: rgba(0,0,0,.72);

  /* spacing */
  --navGap: 56px;              /* menu gap (desktop) */
  --navPadY: 8px;
  --navPadX: 18px;
  --logoNavGap: 6px;

  /* glass */
  --headerGlassTop: rgba(246,244,238,.14);
  --headerGlassSolid: rgba(246,244,238,.92);
  --headerLineTop: rgba(0,0,0,.06);
  --headerLineSolid: rgba(0,0,0,.12);

  /* dropdown */
  --dropBg: rgba(246,244,238,.78);
  --dropLine: rgba(0,0,0,.10);
  --dropShadow: 0 14px 40px rgba(0,0,0,.10);
}

/* body spacing (header.js sets --headerSpace) */
body{ padding-top: var(--headerSpace, 110px); }

/* ===== HEADER SHELL ===== */
.header{
  position:fixed;
  left:0; top:0;
  width:100%;
  z-index:999;

  background: var(--headerGlassTop);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid var(--headerLineTop);

  transform: translateY(var(--headerY, 0px));
  will-change: transform;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;

  overflow: visible; /* dropdown clipping 방지 */
}
.header.is-solid{
  background: var(--headerGlassSolid);
  border-bottom:1px solid var(--headerLineSolid);
}

.header-inner{
  max-width: var(--max, 1200px);
  margin:0 auto;
  padding: 18px var(--pad,16px) 14px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap: var(--logoNavGap);

  overflow: visible; /* dropdown clipping 방지 */
}

/* logo */
.brand{
  display:flex;
  justify-content:center;
  align-items:center;
}
.brand img{
  width:180px;
  height:auto;
  display:block;
}

/* ===== DESKTOP NAV (supports both structures)
   1) flat: nav > a + .dropdown
   2) grouped: nav > .nav-left + .nav-center + .nav-right
============================================ */
.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--navGap);
  flex-wrap: nowrap;
  width:auto;
  margin:0 auto;
  padding:0;
  overflow: visible; /* dropdown clipping 방지 */
}

/* if nav has group wrappers */
.nav > .nav-left,
.nav > .nav-right{
  display:flex;
  align-items:center;
  gap: var(--navGap);
}
.nav > .nav-center{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== NAV LINK BASE (a + dropbtn unified) ===== */
.nav a,
.nav .dropbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size: var(--navFont);
  letter-spacing: var(--navTracking);
  color: var(--navColor);

  padding: var(--navPadY) var(--navPadX);
  height: 36px;
  line-height: 1;
  border-radius:999px;

  text-decoration:none;
  white-space:nowrap;

  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* button reset (dropbtn may be button) */
.nav button.dropbtn{
  border:0;
  background:transparent;
  cursor:pointer;
  font: inherit;
}

/* hover */
.nav a:hover,
.nav .dropbtn:hover{
  background: rgba(0,0,0,.06);
  color:#111;
  transform: translateY(-1px);
}

/* active pill (links) */
.nav a.active{
  background: rgba(255,255,255,.65);
  color:#111;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* active pill (company dropdown) */
.dropdown.is-active .dropbtn{
  background: rgba(255,255,255,.65);
  color:#111;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ===== COMPANY DROPDOWN ===== */
.dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
  overflow: visible;
}

.dropbtn .caret{
  display:inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-right: 1px solid rgba(0,0,0,.55);
  border-bottom: 1px solid rgba(0,0,0,.55);
  transform: rotate(45deg) translateY(-1px);
  opacity: .65;
}

.dropdown-menu{
  position:absolute;
  left:50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  min-width: 170px;

  padding: 10px;
  border-radius: 14px;

  background: var(--dropBg);
  border: 1px solid var(--dropLine);
  box-shadow: var(--dropShadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  display:none;
  z-index: 2000;
}

/* hover or JS click open */
.dropdown:hover .dropdown-menu,
.dropdown.is-open .dropdown-menu{
  display:block;
}

/* dropdown items */
.dropdown-menu a{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  color: rgba(0,0,0,.78);
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(0,0,0,.08);
  letter-spacing: .06em;
  font-size: 13.5px;
  text-decoration:none;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.dropdown-menu a:hover{
  background: rgba(255,255,255,.72);
  transform: translateY(-1px);
}

/* ===== MOBILE ===== */
.menu-btn{
  display:none;
  border:1px solid rgba(0,0,0,.12);
  background:transparent;
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
}

.drawer{
  display:none;
  width:100%;
  border-top:1px solid rgba(0,0,0,.10);
  background: var(--headerGlassSolid);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.drawer.is-open{ display:block; }

.drawer-inner{
  max-width: var(--max, 1200px);
  margin:0 auto;
  padding:10px var(--pad, 16px) 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.drawer a{
  padding:12px 12px;
  border-radius:12px;
  color:rgba(0,0,0,.78);
  text-decoration:none;
  background: rgba(255,255,255,.45);
  border:1px solid rgba(0,0,0,.08);
  letter-spacing: .06em;
}
.drawer a.active{
  background: rgba(255,255,255,.78);
  color:#111;
  font-weight:700;
}
.drawer a:hover{
  background: rgba(255,255,255,.72);
}

/* mobile company accordion (if exists) */
.m-acc{ border-radius: 14px; overflow:hidden; }
.m-acc-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.45);
  border-radius:12px;
  cursor:pointer;
}
.m-acc-panel{
  display:none;
  padding:10px 0 0;
}
.m-acc.is-open .m-acc-panel{ display:block; }
.m-acc-panel a{ margin-top:8px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 980px){
  :root{
    --navGap: 44px;
    --navFont: 14.5px;
    --navTracking: .14em;
  }
  .nav{ flex-wrap: wrap; }
}

@media (max-width: 720px){
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; align-items:center; gap:8px; }
  .header-inner{ align-items:stretch; }
  .brand{ justify-content:center; }
}

/* ==========================================
   FIX: Dropdown hover bridge (menu not disappearing)
   - Prevent hover gap between button and dropdown-menu
   ========================================== */

/* 1) 메뉴 위에 투명 브릿지(hover 유지용) 생성 */
.header .dropdown-menu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-14px;              /* ✅ 버튼~메뉴 사이 빈 공간 덮기 */
  height:14px;            /* ✅ 브릿지 높이 */
  background: transparent;
}

/* 2) hover 판정이 끊기지 않도록 dropdown도 overflow visible 유지 */
.header .dropdown{ overflow: visible !important; }

/* 3) 혹시 top 간격이 너무 크면 살짝 줄여도 됨(선택) */
.header .dropdown-menu{
  top: calc(100% + 8px) !important;   /* 10px -> 8px로 살짝 컴팩트 */
}

/* (Optional) stronger hover area */
.header .dropdown{
  padding-bottom: 10px; /* ✅ hover 영역을 아래로 확장 */
}