/* bless3d enhancements: fonts + lightbox + mobile tweaks */
:root{
  --bless-font-body: "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --bless-font-display: "Noto Serif KR", "Noto Sans KR", serif;
}

html, body { font-family: var(--bless-font-body); }

/* Keep text crisp on mobile */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Lightbox */
#bless3d-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
#bless3d-lightbox.is-open { display: block; }

/* Extra safety: if JS sets [hidden], always hide */
#bless3d-lightbox[hidden]{
  display: none !important;
}

#bless3d-lightbox .bless3d-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  animation: blessFadeIn .18s ease-out both;
}

#bless3d-lightbox .bless3d-dialog{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

#bless3d-lightbox .bless3d-card{
  width: min(980px, 92vw);
  max-height: min(86vh, 820px);
  border-radius: 18px;
  background: rgba(16,16,16,.75);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  overflow: hidden;
  position: relative;
  transform: translateY(10px);
  animation: blessPop .22s ease-out both;
}

#bless3d-lightbox .bless3d-stage{
  position: relative;
  z-index: 1;
}
#bless3d-lightbox .bless3d-close{
  z-index: 2;
}


#bless3d-lightbox img{
  width: 100%;
  height: 100%;
  max-height: min(86vh, 820px);
  object-fit: contain;
  display:block;
  background: rgba(0,0,0,.25);
  cursor: zoom-in;
  transform-origin: center;
  transition: transform .18s ease;
}

#bless3d-lightbox.is-zoom img,
#bless3d-lightbox.is-zoomed img{
  cursor: zoom-out;
}

#bless3d-lightbox .bless3d-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 20px;
  line-height: 40px;
  cursor: pointer;
}
#bless3d-lightbox .bless3d-close:hover{
  background: rgba(255,255,255,.12);
}

@media (max-width: 420px){
  #bless3d-lightbox .bless3d-card{ width: 94vw; border-radius: 14px; }
  #bless3d-lightbox .bless3d-dialog{ padding: 14px; }
  #bless3d-lightbox .bless3d-close{ width: 44px; height: 44px; border-radius: 14px; }
}

@keyframes blessFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes blessPop{
  from{ opacity:0; transform: translateY(14px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Make gallery items feel clickable */
.grid .aspect-square,
.grid .aspect-\[3\/4\]{
  cursor: zoom-in;
}

/* A.html: change main CTA buttons to gold gradient (requested) */
html[data-b3d-page="A"] button.bg-gradient-to-r.from-purple-700.to-pink-600{
  background-image: linear-gradient(90deg, #d4af37 0%, #ffd700 50%, #8a6e2f 100%) !important;
  border-color: rgba(212,175,55,.35) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.30) !important;
}
html[data-b3d-page="A"] button.bg-gradient-to-r.from-purple-700.to-pink-600:hover,
html[data-b3d-page="A"] button.bg-gradient-to-r.from-purple-700.to-pink-600:focus-visible{
  box-shadow: 0 0 30px rgba(212,175,55,0.55) !important;
}

/* If an avatar image is injected via bless3d-media.js */
.bless3d-avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #bless3d-lightbox .bless3d-backdrop,
  #bless3d-lightbox .bless3d-card{ animation: none !important; }
  #bless3d-lightbox img{ transition: none !important; }
}


/* ---------------------------
   Dynamic page nav (numbers)
   --------------------------- */
.fixed.top-4.right-4.z-50.flex.gap-2{ display:none !important; } /* hide built-in nav (B) */
.fixed.top-6.right-6.z-50.flex.gap-2{ display:none !important; } /* hide built-in nav (A) */

#bless3d-page-nav.bless3d-page-nav{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9998;
  display: flex;
  gap: 10px;
  align-items: center;
}

#bless3d-page-nav .b3d-nav-item{
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.75);
  text-decoration: none;

  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#bless3d-page-nav .b3d-nav-item:hover{
  transform: translateY(-1px);
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.35);
}

#bless3d-page-nav .b3d-nav-item.is-active{
  color: #fff;
  border-color: rgba(0,255,255,.45);
  box-shadow: 0 0 0 1px rgba(0,255,255,.15), 0 0 18px rgba(255,0,255,.18);
}

/* "Connected" look between numbers */
#bless3d-page-nav .b3d-nav-item:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 2px);
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Mobile */
@media (max-width: 420px){
  #bless3d-page-nav.bless3d-page-nav{
    top: 10px;
    right: 10px;
    gap: 8px;
  }
  #bless3d-page-nav .b3d-nav-item{
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  #bless3d-page-nav .b3d-nav-item:not(:last-child)::after{
    width: 8px;
  }
}

/* ---------------------------
   B.html avatar blur fix
   --------------------------- */
html[data-b3d-page="B"] .bless3d-avatar-wrap [class*="backdrop-blur"]{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-b3d-page="B"] .bless3d-avatar-wrap img{
  filter: none !important;
}

/* ---------------------------
   Desktop (PC) scale-up
   ---------------------------
   The original templates are very "mobile-first". On large screens
   everything can look small, so we slightly increase the root font-size.
   Tailwind sizes are mostly rem-based, so this scales components cleanly.
*/
@media (min-width: 1024px){
  html{ font-size: 18px; }

  /* Keep page numbers readable after scaling (they use px values). */
  #bless3d-page-nav.bless3d-page-nav{
    top: 18px;
    right: 18px;
    gap: 12px;
  }
  #bless3d-page-nav .b3d-nav-item{
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  #bless3d-page-nav .b3d-nav-item:not(:last-child)::after{
    width: 12px;
  }
}

/* --------------------------------------------------
   Top back bar (templates menu)
-------------------------------------------------- */
#bless3d-page-nav{ display:none !important; }

#bless3d-topbar{
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 6000;
}
#bless3d-topbar .b3d-topbar-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
#bless3d-topbar .b3d-back-link{
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 14px;
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
#bless3d-topbar .b3d-back-link:hover{
  background: rgba(0,0,0,.45);
}
#bless3d-topbar .b3d-topbar-brand{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  user-select: none;
}
body.b3d-has-topbar{
  padding-top: 72px;
}
@media (max-width: 480px){
  body.b3d-has-topbar{ padding-top: 62px; }
  #bless3d-topbar .b3d-topbar-brand{ display:none; }
}