/* ==============================================================
 * HC JOYN MAINPAGE - Base reset + globals
 * ============================================================== */

/* Scoped reset — only affects HCJM-owned elements */
.hcjm-mainpage,
.hcjm-mainpage *,
.hcjm-mypage-mobile,
.hcjm-mypage-mobile *,
.hcjm-mypage-desktop,
.hcjm-mypage-desktop *,
.hcjm-tabbar,
.hcjm-tabbar *,
.hcjm-header-desktop,
.hcjm-header-desktop *,
.hcjm-footer,
.hcjm-footer *{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

/* Default font + color when HCJM blocks render */
.hcjm-mainpage,
.hcjm-mypage-mobile,
.hcjm-mypage-desktop,
.hcjm-tabbar,
.hcjm-header-desktop,
.hcjm-footer{
  font-family:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:var(--hcjm-text);
  letter-spacing:-0.2px;
}

/* Mainpage outer container — mobile-first (좌우 5px + safe-area) */
.hcjm-mainpage{
  width:100%;
  max-width:100%;
  min-height:100vh;
  margin:0 auto;
  padding-top:max(24px, env(safe-area-inset-top, 0px));
  padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px));
  padding-left:calc(5px + env(safe-area-inset-left, 0px));
  padding-right:calc(5px + env(safe-area-inset-right, 0px));
  background:
    radial-gradient(circle at 0% 0%, rgba(69,65,255,.10), transparent 38%),
    radial-gradient(circle at 100% 12%, rgba(69,65,255,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.96) 18%, #ffffff 100%);
  position:relative;
}

/*
 * Mobile section vertical rhythm.
 * DOM order is mobile block → desktop block → … per section, and desktop
 * wrappers omit .hcjm-section, so `.hcjm-section + .hcjm-section` never fires
 * between two mobile sections. Use any-preceding-mobile-sibling instead.
 */
@media (max-width:1023px){
  /* 헤더가 main 첫 자식 — safe-area는 헤더가 담당, main 상단 패딩 제거 */
  body:has(.hcjm-mainpage > .hcjm-header-mobile) .hcjm-mainpage{
    padding-top:0 !important;
  }
  .hcjm-mainpage > section.hcjm-only-mobile.hcjm-section ~ section.hcjm-only-mobile.hcjm-section{
    margin-top:28px;
  }
}

/* Section title row */
.hcjm-section-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 2px 14px;
}
.hcjm-section-title strong{
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.5px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.hcjm-section-title strong::before{
  content:"";
  display:inline-block;
  width:6px; height:18px;
  border-radius:3px;
  background:var(--hcjm-primary);
}
.hcjm-section-title a{
  text-decoration:none;
  color:var(--hcjm-muted);
  font-size:13px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:2px;
  transition:color var(--hcjm-dur-fast);
}

/* Live pulse animation — used by multiple sections */
@keyframes hcjm-pulse{
  0%,100%{opacity:1; transform:scale(1);}
  50%{opacity:.55; transform:scale(.8);}
}

/* Animation: gentle fade in for view transitions */
@keyframes hcjm-fade-in{
  from{opacity:0; transform:translateY(8px);}
  to  {opacity:1; transform:translateY(0);}
}

/* Body background augmentation when HCJM is on the page */
body:has(.hcjm-mainpage){
  background:var(--hcjm-bg);
}

/* Desktop body background */
@media (min-width:1024px){
  body:has(.hcjm-mainpage){
    background:
      radial-gradient(ellipse 800px 600px at 100% 0%, rgba(69,65,255,.08), transparent 60%),
      radial-gradient(ellipse 600px 400px at 0% 30%, rgba(69,65,255,.05), transparent 60%),
      var(--hcjm-bg);
  }
  .hcjm-mainpage{
    max-width:100%;
    padding:0;
    background:none;
  }
  .hcjm-section + .hcjm-section{margin-top:0;}

  /*
   * [hc_joyn_mp_integrated] — 데스크톱 뷰포트 중앙 정렬
   * (Astra .ast-container 패딩·Gutenberg alignleft 와 겹칠 때 왼쪽 붙음 방지)
   */
  .hcjm-integrated-root{
    width:100%;
    max-width:var(--hcjm-desktop-max);
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
  }
  .hcjm-integrated-root .hcjm-mainpage{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
  .hcjm-integrated-root .hcjm-container{
    margin-left:auto;
    margin-right:auto;
    width:100%;
  }

  body:has(.hcjm-integrated-root) .site-content > .ast-container,
  body:has(.hcjm-integrated-root) .mainpage-wrapper{
    max-width:100%;
    width:100%;
    padding-left:0;
    padding-right:0;
    margin-left:auto;
    margin-right:auto;
  }
  .entry-content .wp-block-shortcode:has(.hcjm-integrated-root),
  .entry-content .alignleft:has(.hcjm-integrated-root),
  .entry-content .wp-block-group.alignleft:has(.hcjm-integrated-root){
    float:none;
    width:100%;
    max-width:var(--hcjm-desktop-max);
    margin-left:auto;
    margin-right:auto;
  }
}

/* Desktop container helper used by section templates */
.hcjm-container{
  width:100%;
  max-width:var(--hcjm-desktop-max);
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:1023px){
  .hcjm-container{padding-left:5px; padding-right:5px;}
}