/* ============================================================
   LUSEN 메인페이지(theme/basic/index.php) 전용 스타일
   ============================================================ */

:root{
  --lu-bg:#ffffff;
  --lu-bg-alt:#ffffff;
  --lu-ink:#111111;
  --lu-ink-dim:#8a8779;
  --lu-line:rgba(17,17,17,0.12);
  --lu-accent:#3d3c35;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body.lusen-body{
  background:var(--lu-bg);
  color:var(--lu-ink);
  font-family:'Jost',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.lusen-page{position:relative;width:100%;}
.lusen-screen{display:flex;flex-direction:column;}

/* ---------- hero ---------- */
.lusen-screen--hero{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;background:#111111;}
.lusen-footer.lusen-screen{min-height:0;}

/* 히어로 배경 영상 : 영상 없으면 위 background(#111111)가 대신 어두운 배경 역할을 한다 */
.lusen-hero-video{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .5s ease;
}

/* 이미지 슬라이드는 영상과 달리 움직임이 없어서, 살짝 확대되는 켄번즈 효과를 준다.
   (교체될 때마다 새 <img> 요소를 만들어 넣으므로 애니메이션이 매번 처음부터 다시 재생된다) */
@keyframes lusenHeroKenBurns{
  from{transform:scale(1);}
  to{transform:scale(1.12);}
}
img.lusen-hero-video{
  animation:lusenHeroKenBurns 8s ease-out forwards;
}
.lusen-hero-video-overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.5) 100%);
}

/* 영상이 여러 개일 때만 렌더링되는 캐러셀 좌우 화살표 */
.lusen-video-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:15;
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.3);
  background:none;
  border:none;
  cursor:pointer;
  transition:color .3s ease, transform .3s ease;
}
.lusen-video-nav:hover,
.lusen-video-nav:focus-visible{
  color:#ffffff;
}
.lusen-video-nav--prev{left:clamp(8px,2vw,28px);}
.lusen-video-nav--prev:hover{transform:translateY(-50%) translateX(-4px);}
.lusen-video-nav--next{right:clamp(8px,2vw,28px);}
.lusen-video-nav--next:hover{transform:translateY(-50%) translateX(4px);}
.lusen-video-nav svg{width:100%;height:100%;}

/* 영상이 여러 개일 때만 렌더링되는 하단 도트 */
.lusen-video-dots{
  position:absolute;
  left:50%;
  bottom:clamp(20px,3.5vh,36px);
  transform:translateX(-50%);
  z-index:15;
  display:flex;
  gap:10px;
}
.lusen-video-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.4);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.lusen-video-dot:hover{background:rgba(255,255,255,0.7);}
.lusen-video-dot.is-active{
  background:#ffffff;
  transform:scale(1.3);
}

/* ---------- back to top ---------- */
.lusen-top-btn{
  position:fixed;
  right:28px;
  bottom:28px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(17,17,17,0.12);
  background:#ffffff;
  box-shadow:0 6px 18px rgba(0,0,0,0.14);
  color:var(--lu-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease, background .3s ease;
  z-index:999;
}
.lusen-top-btn.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.lusen-top-btn:hover{background:#f3f1eb;}
.lusen-top-btn svg{width:20px;height:20px;}

.lusen-hero-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(40px,7vh,72px);
  text-align:center;
  padding:60px 6vw;
}
.lusen-wordmark-logo{width:min(220px,48vw);height:auto;display:block;margin:0 auto;filter:brightness(0) invert(1);}

.lusen-hero-nav-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.lusen-hero-nav{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(20px,3vw,32px);
  flex-wrap:wrap;
}

/* Switch 링크 호버 시 "Switch" -> "Ekinex" 크로스페이드 */
.lusen-nav-swap{
  position:relative;
  display:inline-grid;
}
.lusen-nav-swap span{
  grid-area:1/1;
  transition:opacity .4s ease;
}
.lusen-nav-swap-b{opacity:0;}
.lusen-nav-link:hover .lusen-nav-swap-a,
.lusen-nav-link:focus-visible .lusen-nav-swap-a{opacity:0;}
.lusen-nav-link:hover .lusen-nav-swap-b,
.lusen-nav-link:focus-visible .lusen-nav-swap-b{opacity:1;}

.lusen-nav-link{
  position:relative;
  color:rgba(255,255,255,0.7);
  text-decoration:none;
  font-family:'Jost',sans-serif;
  font-weight:500;
  font-size:clamp(20px,2.6vw,30px);
  letter-spacing:0.4em;
  text-transform:uppercase;
  padding-bottom:10px;
  padding-left:0.4em; /* optical balance for tracking */
  transition:color .45s ease, letter-spacing .45s ease, opacity .45s ease;
}
.lusen-nav-link:hover,
.lusen-nav-link:focus-visible,
.lusen-nav-link.is-active{
  color:#ffffff;
  letter-spacing:0.48em;
}
.lusen-nav-link--tight{
  letter-spacing:0.2em;
}
.lusen-nav-link--tight:hover,
.lusen-nav-link--tight:focus-visible,
.lusen-nav-link--tight.is-active{
  letter-spacing:0.25em;
}
.lusen-nav-divider{
  color:rgba(255,255,255,0.6);
  font-size:20px;
  font-weight:300;
  opacity:.7;
  padding-bottom:10px;
}
.lusen-hero-hint{
  margin:18px 0 0;
  height:16px;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .35s ease, transform .35s ease;
}
.lusen-hero-hint.is-visible{opacity:1;transform:translateY(0);}
.lusen-nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:currentColor;
  transition:width .4s ease;
}
.lusen-nav-link--right::after{left:auto;right:0;}
.lusen-nav-link:hover::after,
.lusen-nav-link:focus-visible::after,
.lusen-nav-link.is-active::after{width:100%;}

/* ---------- footer ---------- */
.lusen-footer{
  padding:144px 6vw 32px;
  background:var(--lu-bg-alt);
  justify-content:space-between;
}
.lusen-footer-top{
  display:flex;
  flex-wrap:wrap;
  gap:56px;
  justify-content:space-between;
  padding-bottom:30px;
}
.lusen-footer-desc{
  max-width:480px;
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  color:var(--lu-ink-dim);
  letter-spacing:0.01em;
}
[data-lang="ko"] [data-lang-text="en"]{display:none;}
[data-lang="en"] [data-lang-text="ko"]{display:none;}

.lusen-footer-info{
  display:grid;
  grid-template-columns:auto auto;
  gap:10px 24px;
  font-size:14px;
  letter-spacing:0.03em;
}
.lusen-footer-info dt{
  color:var(--lu-ink-dim);
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:12px;
  font-weight:700;
  align-self:center;
}
.lusen-footer-info dd{margin:0;color:#6f6d61;font-weight:500;}

.lusen-footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:22px;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--lu-ink-dim);
}
.lusen-footer-copy{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.lusen-footer-gear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:inherit;
  opacity:.55;
  transition:opacity .3s ease, transform .3s ease;
}
.lusen-footer-gear:hover,
.lusen-footer-gear:focus-visible{opacity:1;transform:rotate(35deg);}
.lusen-footer-gear svg{width:15px;height:15px;}

.lusen-footer-logout,
.lusen-footer-admin-link{
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#a6a396;
  text-decoration:none;
  transition:color .3s ease;
}
.lusen-footer-logout:hover,
.lusen-footer-admin-link:hover{color:var(--lu-ink);}

.lusen-icon-group{display:flex;align-items:center;gap:20px;}
.lusen-social-btn{
  width:auto;
  height:auto;
  border:none;
  border-radius:0;
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#a6a396;
  cursor:pointer;
  opacity:.7;
  transition:opacity .3s ease, transform .3s ease, color .3s ease;
  text-decoration:none;
  padding:4px;
}
.lusen-social-btn:hover,
.lusen-social-btn:focus-visible{
  opacity:1;
  color:var(--lu-ink);
  transform:translateY(-2px);
}
.lusen-social-btn svg{width:28px;height:28px;}

.lusen-lang-wrap{position:relative;}
.lusen-lang-popover{
  position:absolute;
  bottom:calc(100% + 10px);
  right:0;
  z-index:1000;
  display:flex;
  flex-direction:column;
  background:#000000;
  border:none;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  padding:4px;
  min-width:88px;
  overflow:hidden;
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.lusen-lang-popover.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
.lusen-lang-popover button{
  background:none;border:none;color:var(--lu-ink-dim);
  font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.12em;
  text-transform:uppercase;text-align:center;width:100%;padding:9px 10px;
  border-radius:5px;cursor:pointer;
  transition:color .25s ease, background .25s ease;
}
.lusen-lang-popover button:hover,
.lusen-lang-popover button.is-active{color:#ffffff;background:rgba(255,255,255,0.1);}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:760px){
  .lusen-hero-nav{justify-content:center;gap:32px;}
  .lusen-footer{padding:56px 7vw 28px;}
  .lusen-footer-info{grid-template-columns:auto 1fr;}
  .lusen-footer-bottom{flex-direction:column;align-items:flex-start;}
}
@media (max-width:480px){
  .lusen-icon-group{gap:14px;}
  .lusen-top-btn{width:42px;height:42px;right:16px;bottom:16px;}
}

/* Horizontal swipes change the intro; vertical scrolling and pinch zoom stay native. */
#heroScreen { touch-action: pan-y pinch-zoom; }
#heroScreen img { -webkit-user-drag: none; }

/* Match the shared project and catalogue body copy. */
.lusen-footer-desc, .lusen-footer-desc p,
.lusen-footer-info, .lusen-footer-info dt, .lusen-footer-info dd {
  font-size: 14px;
}