/* 마우스를 올렸을 때 스타일 (원하면) */
[grid-col] a:hover {
  color: #666;          /* hover 색상 */
  text-decoration: underline; /* hover시에만 밑줄 */
}
/* Floating stack */
#jh-stack {
  position: absolute;
  top: 200px;
  left: 20vw;
  z-index: 10;
  animation: jhFloating 60s ease-in-out infinite;
  pointer-events: none;
  font-family: Arial, sans-serif;
}

#jh-stack img {
  position: absolute;
  width: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: transform .3s ease;
  pointer-events: auto;
  cursor: pointer;
}

#jh-stack .img-top {
  z-index: 2;
  top: 0;
  left: 0;
  transform: rotate(-2deg);
}

#jh-stack .img-bottom {
  z-index: 1;
  top: 40px;
  left: 8px;
  transform: rotate(2deg);
}

#jh-stack .label-text {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  font-size: 14px;
  color: #000;
  pointer-events: none;
}

/* Floating motion */
@keyframes jhFloating {
  0% { transform: translate(0,0) rotate(0); }
  20% { transform: translate(60px,-30px) rotate(2deg); }
  40% { transform: translate(-80px,50px) rotate(-3deg); }
  60% { transform: translate(50px,-60px) rotate(1.5deg); }
  80% { transform: translate(-60px,40px) rotate(-2deg); }
  100% { transform: translate(0,0) rotate(0); }
}

/* Fullscreen viewer */
#jh-viewer {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: #000;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 40px 20px;
  box-sizing: border-box;
}

#jh-modal {
  position: relative;
  max-width: 90%;
  text-align: center;
  pointer-events: auto;
}

#jh-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

#jh-caption {
  font-size: 13px;
  margin-top: 12px;
  color: #ccc;
  font-style: italic;
}

/* Link slide */
#jh-link-slide {
  display: none;
  max-width: 100%;
  max-height: 80vh;
  padding: 28px 24px;
  border-radius: 12px;
  background: #111;
  color: #eee;
  width: min(720px,90vw);
  margin: 0 auto;
  text-align: left;
}

#jh-link-slide h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
}

#jh-link-slide p {
  margin: 0 0 18px 0;
  font-size: 15px;
  color: #cfcfcf;
}

.link-actions {
  display: flex;
  gap: 12px;
}

.link-button, .link-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
}

.link-button {
  background: #fff;
  color: #111;
}

.link-secondary {
  background: transparent;
  color: #ddd;
  border: 1px solid #333;
}

.viewer-hint {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  color: #777;
  font-size: 12px;
}
/* 마우스를 올렸을 때 스타일 (원하면) */
[grid-col] a:hover {
  color: #FA8128;          /* hover 색상 */
  text-decoration: underline; /* hover시에만 밑줄 */
}
/* 모든 메뉴 링크 기본 스타일 */
[grid-col] a {
  color: #0b0101;      /* 원하는 텍스트 색상 */
  text-decoration: none;  /* 밑줄 제거 */
}
h1, h2, h3, h4, h5, h6, p, a, div, span {
  font-family: Arial, sans-serif !important;
}
/* Force show the label under the floating images */
.floating-stack-container .label-text,
#jh-stack .label-text {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 0 !important;
  font-size: 14px !important;
  color: #000 !important;
  font-family: Arial, sans-serif !important;
  z-index: 9999 !important;         /* 이미지보다 위 */
  pointer-events: none !important;   /* 클릭 방해 X */
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

[data-css-preset] .content_padding {
	padding-top: 2rem /*!main_margin*/;
	padding-bottom: 2rem /*!main_margin*/;
	padding-left: 2rem /*!main_margin*/;
	padding-right: 2rem /*!main_margin*/;
}

[data-css-preset] .container {
	margin-left: 0 /*!content_left*/;
	margin-right: auto /*!content_left*/;
}

[data-css-preset] .container_width {
	width: 100% /*!content_left*/;
}

[data-css-preset] body {
	background-color: transparent /*!body_bgcolor*/;
}
/* Base: 전체 폰트 */
html, body { font-family: Arial, sans-serif; }

/* Floating stack 기본 크기 (데스크탑) */
#jh-stack {
  position: absolute;
  top: 200px;
  left: 20vw;
  z-index: 10;
  animation: jhFloating 60s ease-in-out infinite;
  pointer-events: none; /* 내부 요소에서만 클릭 */
}
#jh-stack img {
  position: absolute;
  width: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  pointer-events: auto;
  cursor: pointer;
}
#jh-stack .img-top    { z-index: 2; top: 0;   left: 0;  transform: rotate(-2deg); }
#jh-stack .img-bottom { z-index: 1; top: 40px; left: 8px; transform: rotate(2deg); }

#jh-stack .label-text {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  font-size: 14px;
  color: #000;
  pointer-events: none;
}

/* Fullscreen viewer 타이포(공통) */
#jh-caption { font-size: 13px; color: #ccc; font-style: italic; margin-top: 10px; }
#jh-link-slide {
  display: none;
  max-width: 100%;
  max-height: 80vh;
  padding: 24px;
  border-radius: 12px;
  background: #111;
  color: #eee;
  width: min(720px, 92vw);
  margin: 0 auto;
  text-align: left;
}
#jh-link-slide h2 { font-size: 26px; margin: 0 0 8px; }
#jh-link-slide p  { font-size: 15px; color: #cfcfcf; margin: 0 0 16px; }
.link-actions { display: flex; gap: 10px; }
.link-button, .link-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px; text-decoration: none; font-size: 14px;
}
.link-button { background: #fff; color: #111; }
.link-secondary { background: transparent; color: #ddd; border: 1px solid #333; }

/* 부드러운 플로팅 모션 */
@keyframes jhFloating {
  0%   { transform: translate(0,0) rotate(0deg); }
  20%  { transform: translate(60px,-30px) rotate(2deg); }
  40%  { transform: translate(-80px,50px) rotate(-3deg); }
  60%  { transform: translate(50px,-60px) rotate(1.5deg); }
  80%  { transform: translate(-60px,40px) rotate(-2deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

/* =========================
   Mobile (<= 768px)
   ========================= */
@media (max-width: 768px) {
  /* 스택을 화면 중앙으로 */
  #jh-stack {
    position: relative;         /* absolute -> relative 로 바꿔서 흐름에 배치 */
    top: 0; left: 0;
    margin: 80px auto 24px;     /* 위 여백 + 가운데 정렬 */
    width: 240px;               /* 박스 폭 고정 */
    transform: none;            /* 애니메이션 transform이 레이아웃에 영향 X */
    animation: none;            /* 모바일에선 잔잔하게: 모션 제거(원하면 유지 가능) */
  }

  #jh-stack img {
    width: 160px;               /* 이미지 축소 */
  }
  #jh-stack .img-top    { top: 0;   left: 40px; }
  #jh-stack .img-bottom { top: 36px; left: 48px; }

  #jh-stack .label-text {
    position: relative; top: 0; left: 0;
    margin-top: 12px;
    font-size: 13px;            /* 모바일 텍스트 살짝 축소 */
    text-align: center;
    display: block;
  }

  /* 풀스크린 뷰어 타이포/버튼 크게 */
  #jh-caption { font-size: 12px; }
  #jh-link-slide { padding: 20px; width: 92vw; }
  #jh-link-slide h2 { font-size: 20px; }
  #jh-link-slide p  { font-size: 14px; }
  .link-button, .link-secondary { font-size: 13px; padding: 10px 12px; }
}

/* =========================
   Small phones (<= 480px)
   ========================= */
@media (max-width: 480px) {
  #jh-stack { width: 210px; margin: 64px auto 20px; }
  #jh-stack img { width: 150px; }
  #jh-stack .img-top    { left: 30px; }
  #jh-stack .img-bottom { top: 32px; left: 38px; }
  #jh-stack .label-text { font-size: 12px; margin-top: 10px; }

  #jh-link-slide h2 { font-size: 18px; }
  #jh-link-slide p  { font-size: 13px; }
  .link-button, .link-secondary { font-size: 12px; padding: 9px 12px; }
}
@media (max-width: 768px) {
  #jh-stack { animation: jhFloating 60s ease-in-out infinite; }
}
/* ensure images are actually tappable */
#jh-stack { pointer-events: none; }
#jh-stack img { pointer-events: auto; }