/* ==============================================================
 * HC JOYN MAINPAGE - Header Section
 * Mobile  : logo + 3 circle buttons (search / messages / hamburger)
 * Desktop : sticky top nav (logo + menu + search + actions + profile)
 * ============================================================== */

/* ---- Common: Logo ---- */
.hcjm-logo{
  display:inline-flex;
  align-items:center;
  font-size:26px;
  font-weight:900;
  letter-spacing:-1.2px;
  color:var(--hcjm-text);
  text-decoration:none;
}
.hcjm-logo span{color:var(--hcjm-primary);}
.hcjm-logo-img{
  max-height:32px;
  width:auto;
  display:block;
}

/* ==============================================================
 * MOBILE HEADER
 * ============================================================== */
.hcjm-header-mobile{
  --hcjm-safe-top:env(safe-area-inset-top, 0px);
  position:relative;
  z-index:var(--hcjm-z-header);
  width:100%;
  max-width:100%;
  margin:0;
  padding:calc(6px + var(--hcjm-safe-top)) 0 12px;
  padding-left:calc(5px + env(safe-area-inset-left, 0px));
  padding-right:calc(5px + env(safe-area-inset-right, 0px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
}
.hcjm-header-mobile .hcjm-logo{font-size:26px;}

/* main 안 첫 블록: 좌우 패딩 상쇄 후 히어로와 분리 */
@media (max-width:1023px){
  .hcjm-mainpage > .hcjm-header-mobile{
    margin-left:calc(-5px - env(safe-area-inset-left, 0px));
    margin-right:calc(-5px - env(safe-area-inset-right, 0px));
    width:auto;
    max-width:none;
    padding-bottom:14px;
    margin-bottom:14px;
    border-bottom:1px solid rgba(15,16,36,.08);
    box-sizing:border-box;
  }
  .hcjm-mainpage:has(> .hcjm-header-mobile) > .hcjm-hero.hcjm-only-mobile{
    margin-top:0;
    position:relative;
    z-index:1;
  }
}

.hcjm-header-actions{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:10px;
  position:relative;
  z-index:2;
  isolation:isolate;
}

/* hc-joyn-menu: pill fixed+scale — 인헤더 원형 버튼은 크기·색만 덮고, 모바일 위치는 @media(≤1023)에서 fixed */
html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-circle-btn.hcjm-mobile-menu-trigger,
html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-mobile-menu-trigger.hcjm-circle-btn,
.hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-circle-btn,
.hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-mobile-menu-trigger{
  transform:none !important;
  transform-origin:center center !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  gap:0 !important;
  align-items:center !important;
  justify-content:center !important;
  /* 인디고 원형 + 흰 아이콘 (검색·쪽지 흰 원과 구분) */
  background:linear-gradient(155deg, var(--hcjm-primary) 0%, var(--hcjm-primary-dark, #2E29D4) 100%) !important;
  box-shadow:0 6px 18px rgba(46,41,212,.28) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  border-radius:50% !important;
  color:#fff !important;
  font-size:20px !important;
  font-family:inherit !important;
  font-weight:400 !important;
  cursor:pointer !important;
  flex:0 0 auto !important;
  flex-shrink:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transition:transform var(--hcjm-dur-fast) ease, box-shadow var(--hcjm-dur-fast) ease !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}
html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-circle-btn.hcjm-mobile-menu-trigger:hover,
html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-mobile-menu-trigger.hcjm-circle-btn:hover,
.hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-circle-btn:hover,
.hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-mobile-menu-trigger:hover{
  transform:none !important;
  box-shadow:0 10px 26px rgba(46,41,212,.38) !important;
  filter:brightness(1.06);
}
html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-circle-btn.hcjm-mobile-menu-trigger:active,
html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-mobile-menu-trigger.hcjm-circle-btn:active,
.hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-circle-btn:active,
.hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-mobile-menu-trigger:active{
  transform:scale(.94) !important;
  filter:brightness(.96);
}
html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-circle-btn.hcjm-mobile-menu-trigger i,
html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-mobile-menu-trigger.hcjm-circle-btn i,
.hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-circle-btn i,
.hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-mobile-menu-trigger i{
  color:#fff !important;
  font-size:20px !important;
  line-height:1 !important;
  display:block !important;
}
/* 오버레이 열림: 플로팅 트리거는 숨김(joyn-menu 전역 규칙과 동일 UX) */
html body.hc-menu-open .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-circle-btn.hcjm-mobile-menu-trigger,
html body.hc-menu-open .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-mobile-menu-trigger.hcjm-circle-btn,
body.hc-menu-open .hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-circle-btn,
body.hc-menu-open .hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-mobile-menu-trigger{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:scale(.92) !important;
}

/* 모바일·패드(≤1023): sticky 헤더 + 햄버거만 뷰포트 고정 플로팅 */
@media (max-width:1023px){
  .hcjm-header-mobile{
    --hcjm-hmenu-top:calc(6px + env(safe-area-inset-top, 0px));
    --hcjm-hmenu-right:calc(5px + env(safe-area-inset-right, 0px));
    position:sticky;
    top:0;
    z-index:var(--hcjm-z-header);
    background:#fff;
  }
  body.admin-bar .hcjm-header-mobile{
    top:var(--wp-admin--admin-bar--height, 46px);
    --hcjm-hmenu-top:calc(var(--wp-admin--admin-bar--height, 46px) + 6px + env(safe-area-inset-top, 0px));
  }

  .hcjm-header-actions{
    align-items:center;
    align-self:center;
  }

  /* fixed로 빠진 자리 — 검색·쪽지 정렬 유지 */
  .hcjm-header-mobile .hcjm-header-actions:has(> button.hc-joyn-menu-trigger.hcjm-mobile-menu-trigger)::after{
    content:"";
    display:block;
    width:42px;
    height:42px;
    flex:0 0 42px;
    align-self:center;
    visibility:hidden;
    pointer-events:none;
  }

  html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-circle-btn.hcjm-mobile-menu-trigger,
  html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-mobile-menu-trigger.hcjm-circle-btn,
  .hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-circle-btn,
  .hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-mobile-menu-trigger{
    position:fixed !important;
    top:var(--hcjm-hmenu-top, calc(6px + env(safe-area-inset-top, 0px))) !important;
    right:var(--hcjm-hmenu-right, calc(5px + env(safe-area-inset-right, 0px))) !important;
    left:auto !important;
    bottom:auto !important;
    z-index:9990 !important;
    transform:none !important;
    transform-origin:center center !important;
    align-self:auto !important;
    flex:0 0 auto !important;
    margin:0 !important;
    min-height:42px !important;
    max-height:42px !important;
  }
  html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-circle-btn.hcjm-mobile-menu-trigger:hover,
  html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-mobile-menu-trigger.hcjm-circle-btn:hover,
  .hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-circle-btn:hover,
  .hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-mobile-menu-trigger:hover{
    transform:none !important;
    filter:brightness(1.06);
  }
  html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-circle-btn.hcjm-mobile-menu-trigger:active,
  html body .hcjm-header-mobile .hcjm-header-actions button.hc-joyn-menu-trigger.hcjm-mobile-menu-trigger.hcjm-circle-btn:active,
  .hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-circle-btn:active,
  .hcjm-header-mobile .hcjm-header-actions .hc-joyn-menu-trigger.hcjm-mobile-menu-trigger:active{
    transform:scale(.94) !important;
    filter:brightness(.96);
  }
}

/* Circle button base (used by all mobile header actions) */
.hcjm-circle-btn{
  position:relative;
  width:42px; height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:var(--hcjm-shadow-sm);
  border:1px solid rgba(69,65,255,.08);
  font-size:20px;
  color:var(--hcjm-text);
  cursor:pointer;
  text-decoration:none;
  transition:transform var(--hcjm-dur-fast) ease, box-shadow var(--hcjm-dur-fast) ease;
  font-family:inherit;
}
.hcjm-circle-btn:active{
  transform:scale(.94);
  box-shadow:0 2px 6px rgba(34,28,140,.08);
}
.hcjm-circle-btn:hover{
  box-shadow:var(--hcjm-shadow-md);
}

/* Notification dot variant */
.hcjm-circle-btn.has-dot::after{
  content:"";
  position:absolute;
  right:9px; top:9px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--hcjm-live);
  box-shadow:0 0 0 2px #fff;
}

/* Message button with unread badge */
.hcjm-msg-btn{position:relative;}
.hcjm-msg-badge{
  position:absolute;
  top:-3px; right:-3px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  background:var(--hcjm-live);
  color:#fff;
  font-size:10px;
  font-weight:800;
  display:grid;
  place-items:center;
  border:2px solid #fff;
  letter-spacing:-0.3px;
  line-height:1;
}

/* Hide mobile header on desktop */
@media (min-width:1024px){
  .hcjm-header-mobile{display:none !important;}
  body:has(.hcjm-header-mobile) .hcjm-mainpage{padding-top:0;}
}

/* ==============================================================
 * DESKTOP HEADER (sticky top nav)
 * ============================================================== */
.hcjm-header-desktop{
  display:none;
}

/* 인헤더 햄버거가 있을 때: wp_body_open 의 플로팅 #hcMenuTrigger 와 이중 표시 방지 (모든 뷰포트) */
body:has(.hcjm-header-desktop .hc-joyn-menu-trigger) #hcMenuTrigger,
body:has(.hcjm-header-mobile .hc-joyn-menu-trigger) #hcMenuTrigger{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
  opacity:0 !important;
}

@media (min-width:1024px){
  .hcjm-header-desktop{
    display:block;
    position:relative;
    z-index:var(--hcjm-z-header);
    background:rgba(255,255,255,.85);
  }

  .hcjm-header-desktop.is-sticky{
    position:sticky;
    top:0;
  }
  .hcjm-header-desktop.is-blur{
    backdrop-filter:blur(20px) saturate(1.2);
    -webkit-backdrop-filter:blur(20px) saturate(1.2);
  }
  .hcjm-header-desktop.is-bordered{
    border-bottom:1px solid var(--hcjm-border);
  }

  .hcjm-header-desktop .hcjm-container{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-width:0; /* flex 자식이 가로 nav 때문에 액션(햄버거)을 밀어내는 현상 방지 */
  }

  /* Desktop logo */
  .hcjm-header-desktop .hcjm-logo{
    font-size:24px;
    letter-spacing:-1px;
    flex-shrink:0;
  }

  /* ---- Center nav ---- */
  .hcjm-nav{
    flex:1;
    min-width:0;
    display:flex;
    justify-content:center;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .hcjm-nav-menu{
    display:flex;
    gap:4px;
    list-style:none;
    margin:0;
    padding:0;
  }
  .hcjm-nav-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border-radius:10px;
    text-decoration:none;
    color:var(--hcjm-text-sub);
    font-size:14px;
    font-weight:700;
    letter-spacing:-0.2px;
    transition:all var(--hcjm-dur) ease;
    white-space:nowrap;
  }
  .hcjm-nav-link:hover{
    background:var(--hcjm-primary-soft);
    color:var(--hcjm-primary);
  }
  .hcjm-nav-link.is-active{
    background:var(--hcjm-primary);
    color:#fff;
  }
  .hcjm-nav-link.is-active:hover{
    background:var(--hcjm-primary-dark);
  }
  .hcjm-nav-link i{font-size:18px;}

  /* ---- Right actions ---- */
  .hcjm-nav-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }

  /* Search pill */
  .hcjm-nav-search{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    background:#fff;
    border:1px solid var(--hcjm-border);
    border-radius:12px;
    width:200px;
    color:var(--hcjm-muted);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
    text-decoration:none;
    transition:all var(--hcjm-dur-fast);
  }
  .hcjm-nav-search:hover{
    border-color:var(--hcjm-primary-light);
    color:var(--hcjm-primary);
  }
  .hcjm-nav-search i{color:var(--hcjm-muted); flex-shrink:0;}
  .hcjm-nav-search:hover i{color:var(--hcjm-primary);}
  .hcjm-nav-search span{flex:1;}
  .hcjm-nav-search kbd{
    margin-left:auto;
    padding:2px 6px;
    background:var(--hcjm-bg);
    border:1px solid var(--hcjm-border);
    border-radius:5px;
    font-size:11px;
    font-weight:700;
    font-family:inherit;
    color:var(--hcjm-text-sub);
  }

  /* Icon buttons */
  .hcjm-nav-icon{
    position:relative;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:var(--hcjm-text);
    cursor:pointer;
    background:transparent;
    border:0;
    font-size:20px;
    transition:background var(--hcjm-dur-fast);
    text-decoration:none;
    font-family:inherit;
  }
  .hcjm-nav-icon:hover{
    background:var(--hcjm-primary-soft);
    color:var(--hcjm-primary);
  }
  .hcjm-nav-icon.has-dot::after{
    content:"";
    position:absolute;
    right:9px; top:9px;
    width:8px; height:8px;
    border-radius:50%;
    background:var(--hcjm-live);
    box-shadow:0 0 0 2px #fff;
  }

  /* Message button shares hcjm-msg-* badge styles (defined above) */
  .hcjm-nav-icon.hcjm-msg-btn .hcjm-msg-badge{
    top:2px;
    right:2px;
  }

  /* hc-joyn-menu 트리거: 플러그인 fixed·pill·scale 제거 → .hcjm-nav-icon 과 동일 높이·행 정렬 (header.css는 hc-joyn-menu-style 이후 로드) */
  .hcjm-header-desktop .hcjm-nav-actions .hc-joyn-menu-trigger.hcjm-nav-icon,
  .hcjm-header-desktop .hcjm-nav-actions .hc-joyn-menu-trigger.hcjm-desktop-menu-trigger{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    bottom:auto !important;
    z-index:auto !important;
    transform:none !important;
    transform-origin:center center !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
    display:grid !important;
    place-items:center !important;
    gap:0 !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:10px !important;
    color:var(--hcjm-text) !important;
    font-size:20px !important;
    font-family:inherit !important;
    font-weight:400 !important;
    border:none !important;
    cursor:pointer !important;
    flex:0 0 auto !important;
    flex-shrink:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transition:background var(--hcjm-dur-fast) !important;
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }
  .hcjm-header-desktop .hcjm-nav-actions .hc-joyn-menu-trigger.hcjm-nav-icon:hover,
  .hcjm-header-desktop .hcjm-nav-actions .hc-joyn-menu-trigger.hcjm-desktop-menu-trigger:hover{
    transform:none !important;
    background:var(--hcjm-primary-soft) !important;
    color:var(--hcjm-primary) !important;
    box-shadow:none !important;
  }
  .hcjm-header-desktop .hcjm-nav-actions .hc-joyn-menu-trigger.hcjm-nav-icon:active,
  .hcjm-header-desktop .hcjm-nav-actions .hc-joyn-menu-trigger.hcjm-desktop-menu-trigger:active{
    transform:none !important;
  }
  .hcjm-header-desktop .hcjm-nav-actions .hc-joyn-menu-trigger.hcjm-nav-icon i,
  .hcjm-header-desktop .hcjm-nav-actions .hc-joyn-menu-trigger.hcjm-desktop-menu-trigger i{
    color:inherit !important;
    font-size:20px !important;
    line-height:1 !important;
    display:block !important;
  }
  /* 오버레이 열림 시 플러그인이 전역 트리거를 숨김 — 헤더 안 트리거는 유지 */
  body.hc-menu-open .hcjm-header-desktop .hcjm-nav-actions .hc-joyn-menu-trigger.hcjm-nav-icon,
  body.hc-menu-open .hcjm-header-desktop .hcjm-nav-actions .hc-joyn-menu-trigger.hcjm-desktop-menu-trigger{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  /* Profile pill */
  .hcjm-nav-profile{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 14px 6px 6px;
    background:#fff;
    border:1px solid var(--hcjm-border);
    border-radius:999px;
    cursor:pointer;
    font-family:inherit;
    text-decoration:none;
    color:var(--hcjm-text);
    transition:all var(--hcjm-dur-fast);
  }
  .hcjm-nav-profile:hover{
    border-color:var(--hcjm-primary);
    box-shadow:var(--hcjm-shadow-sm);
  }
  .hcjm-nav-profile-img{
    width:30px;
    height:30px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--hcjm-primary), var(--hcjm-primary-dark));
    color:#fff;
    display:grid;
    place-items:center;
    font-size:13px;
    font-weight:800;
    flex-shrink:0;
  }
  .hcjm-nav-profile-name{
    font-size:13px;
    font-weight:700;
    letter-spacing:-0.2px;
  }
}

/* Narrow desktop: hide nav labels (show icons only) */
@media (min-width:1024px) and (max-width:1199px){
  .hcjm-nav-link span{display:none;}
  .hcjm-nav-link{padding:8px 10px;}
  .hcjm-nav-search{width:160px;}
}

/* Very wide: more breathing room */
@media (min-width:1440px){
  .hcjm-nav-search{width:240px;}
  .hcjm-nav-menu{gap:8px;}
}

/* ---- Hide mobile header in mypage view (mypage has its own bar) ---- */
body[data-hcjm-view="mypage"] .hcjm-header-mobile{display:none !important;}