/* ==============================================================
 * HC JOYN MAINPAGE - Utilities
 * View switching + viewport visibility helpers
 * ============================================================== */

/* ---- Mobile / Desktop visibility ----
 * Use !important so theme rules (e.g. section { display:block !important })
 * cannot reveal desktop markup on narrow viewports — otherwise paired
 * mobile+desktop blocks (e.g. 추천 콘텐츠) appear twice on phones.
 */
.hcjm-only-mobile{display:block;}
.hcjm-only-desktop{display:none;}
@media (max-width:1023px){
  .hcjm-only-desktop{display:none !important;}
}
@media (min-width:1024px){
  .hcjm-only-mobile{display:none !important;}
  .hcjm-only-desktop{display:block !important;}
}

/* Inline variants (used inside flex/inline-flex parents) */
.hcjm-only-mobile-inline{display:inline;}
.hcjm-only-desktop-inline{display:none;}
@media (max-width:1023px){
  .hcjm-only-desktop-inline{display:none !important;}
}
@media (min-width:1024px){
  .hcjm-only-mobile-inline{display:none !important;}
  .hcjm-only-desktop-inline{display:inline !important;}
}

/* ---- View switching (home / mypage) ----
 * Body attribute `data-hcjm-view` controls visibility of view-specific blocks.
 * Default state if no attribute is present = home (so the page is never blank).
 */

/* HOME view (default) — show mainpage, hide mypage blocks */
body:not([data-hcjm-view="mypage"]) .hcjm-mypage-mobile,
body:not([data-hcjm-view="mypage"]) .hcjm-mypage-desktop{
  display:none !important;
}

/* MYPAGE view — hide mainpage container + home-only sections, show mypage */
body[data-hcjm-view="mypage"] .hcjm-mainpage:not([data-hcjm-integrated="1"]),
body[data-hcjm-view="mypage"]:not(:has([data-hcjm-integrated="1"])) .hcjm-only-desktop.hcjm-hero-desktop,
body[data-hcjm-view="mypage"]:not(:has([data-hcjm-integrated="1"])) .hcjm-only-desktop.hcjm-desktop-section,
body[data-hcjm-view="mypage"]:not(:has([data-hcjm-integrated="1"])) .hcjm-only-desktop.hcjm-verse-desktop,
body[data-hcjm-view="mypage"]:not(:has([data-hcjm-integrated="1"])) .hcjm-only-desktop.hcjm-footer{
  display:none !important;
}
body[data-hcjm-view="mypage"] .hcjm-only-mobile.hcjm-mypage-mobile{display:block !important;}
body[data-hcjm-view="mypage"] .hcjm-only-desktop.hcjm-mypage-desktop{display:block !important;}

/* 통합 숏코드(메인 전용) — 쿠키·body 가 mypage 여도 home 섹션 표시 */
body[data-hcjm-view="mypage"]:has([data-hcjm-integrated="1"]) .hcjm-mainpage[data-hcjm-integrated="1"]{
  display:block !important;
}
body[data-hcjm-view="mypage"]:has([data-hcjm-integrated="1"]) .hcjm-mainpage[data-hcjm-integrated="1"] .hcjm-only-desktop.hcjm-hero-desktop,
body[data-hcjm-view="mypage"]:has([data-hcjm-integrated="1"]) .hcjm-mainpage[data-hcjm-integrated="1"] .hcjm-only-desktop.hcjm-desktop-section,
body[data-hcjm-view="mypage"]:has([data-hcjm-integrated="1"]) .hcjm-mainpage[data-hcjm-integrated="1"] .hcjm-only-desktop.hcjm-verse-desktop{
  display:block !important;
}

/* Header: mypage 뷰에서는 모바일 헤더 숨김 (통합 숏코드 페이지는 예외) */
body[data-hcjm-view="mypage"]:not(:has([data-hcjm-integrated="1"])) .hcjm-only-mobile.hcjm-header-mobile{
  display:none !important;
}

/* ---- Generic helpers ---- */
.hcjm-sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hcjm-no-select{
  -webkit-user-select:none;
  user-select:none;
}

.hcjm-clickable{cursor:pointer;}

/* Smooth fade when view changes */
[data-hcjm-master],
.hcjm-mypage-mobile,
.hcjm-mypage-desktop{
  animation:hcjm-fade-in var(--hcjm-dur) var(--hcjm-ease);
}

/* ---- Scroll behavior ---- */
html:has(.hcjm-mainpage){scroll-behavior:smooth;}

/* Hide horizontal scrollbar on scroll rows */
.hcjm-scroll-row{
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.hcjm-scroll-row::-webkit-scrollbar{display:none;}
.hcjm-scroll-row > *{scroll-snap-align:start;}