/* 상단 메뉴의 하위 항목 (제제프렌즈 > 소개·활동 / 교육·강연 > 동물사랑교육·강연·특강)

   PC : 상위 메뉴를 '클릭'하면 펼쳐집니다. (nav.js 가 .open 을 붙여줍니다)
   모바일(820px 이하) : 클릭할 필요 없이 목록으로 항상 함께 보입니다. */

.menu .has-sub{position:relative; display:inline-flex; align-items:center}
.menu .has-sub > a{cursor:pointer}

/* 하위 메뉴가 있다는 표시 — 작은 화살표. 펼치면 뒤집힙니다 */
.menu .has-sub > a::after{
  content:''; display:inline-block; width:5px; height:5px; margin-left:6px;
  border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.5;
  transition:transform .16s;
}
.menu .has-sub.open > a::after{transform:translateY(1px) rotate(-135deg); opacity:.8}

.menu .sub{
  position:absolute; top:100%; left:50%;
  width:max-content; min-width:128px;
  display:flex; flex-direction:column; gap:2px; padding:6px;
  background:var(--card); border:.5px solid var(--line); border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.09);
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(5px);
  transition:opacity .14s, transform .14s, visibility .14s; z-index:70;
}
/* 메뉴와 펼친 목록 사이가 끊기지 않도록 하는 여백 */
.menu .sub::before{content:''; position:absolute; left:0; right:0; top:-9px; height:9px}

/* 클릭해서 펼친 상태 (키보드 이동 중에도 보이도록 focus-within 유지) */
.menu .has-sub.open .sub,
.menu .has-sub:focus-within .sub{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}

.menu .sub a{padding:9px 13px; border-radius:8px; font-size:14px; white-space:nowrap}
.menu .sub a:hover{background:#FBF3E1}

@media (max-width:820px){
  .menu .has-sub{display:flex; flex-direction:column; align-items:stretch}
  .menu .has-sub > a::after{display:none}
  .menu .sub{
    position:static; width:auto; min-width:0; margin:10px 0 0; padding:0 0 0 13px; gap:10px;
    opacity:1; visibility:visible; transform:none;
    background:transparent; border:0; border-left:.5px solid var(--line);
    border-radius:0; box-shadow:none;
  }
  .menu .sub::before{display:none}
  .menu .sub a{padding:0; font-size:14px}
}