/* ───────── RESET ───────── */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;max-width:100%;overflow-x:hidden;}
img{max-width:100%;height:auto;}

/* ───────── HEADER ───────── */
.header{position:sticky;top:0;z-index:1030;background:#fff;
        border-bottom:1px solid var(--border-color);
        box-shadow:0 4px 14px rgba(61,40,23,.04);}
.navbar{display:flex;justify-content:space-between;
        align-items:center;width:100%;padding:.75rem 0;}

/* 데스크톱 네비 */
#nav-menu{display:flex;gap:1.5rem;align-items:center;}

/* 모바일 토글 버튼 */
#mobile-open{display:none;background:none;border:0;
             font:inherit;cursor:pointer;color:var(--text-primary);}
#mobile-open i{line-height:1;}

/* ───────── 모바일 드로어 ───────── */
.mobile-menu{
  position:fixed;top:0;bottom:0;left:0;
  width:80%;max-width:320px;
  background:#fff;
  transform:translateX(-100%);
  transition:transform .3s ease;
  overflow-y:auto;z-index:1050;
  border-right:1px solid var(--border-color);
}
.mobile-menu.show{transform:translateX(0);}

/* 드로어 상단 */
.mobile-header{border-bottom:1px solid var(--border-color);}
.mobile-header button{font-size:1rem;}

/* 드로어 내부 메뉴 */
.mobile-menu .navbar-nav{flex-direction:column;align-items:flex-start;padding:0 1rem;}
.mobile-menu .nav-link{display:block;width:100%;padding:.75rem 0;
                       border-bottom:1px solid var(--border-color);}

/* 반투명 배경 */
.drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transition:opacity .3s ease;z-index:1040;
}
.drawer-backdrop.show{opacity:1;visibility:visible;}

/* ───────── BREAKPOINTS ───────── */
@media (max-width:767px){
  #mobile-open{display:flex;align-items:center;gap:.25rem;}
  #nav-menu{display:none;}
}
@media (min-width:768px){
  .drawer-backdrop{display:none!important;}
}