/* 전역 한글 줄바꿈 */
* { word-break: keep-all; }

/* 기본 폰트 */
body { font-family: 'Pretendard Variable', 'Pretendard', 'Pretendard-fb', sans-serif; }
h1, h2, h3, h4, h5, h6,
button, input, select, textarea { font-family: inherit; }

/* 강조 폰트 굵기 */
strong, b { font-weight: 500; }

/* =========================================================
   AO — Animate On Scroll  (IntersectionObserver 기반, AOS 대체)
   속성: data-a="fade-up|fade-down|fade-left|fade-right|fade|zoom-in|zoom-out"
         data-delay="100"  (ms)
         data-duration="900"  (ms, 선택)
         data-stagger="80"   (ms, 부모에 적용 시 자식 자동 stagger)
========================================================= */
[data-a] {
  opacity: 0;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: var(--ao-dur, 0.72s);
  transition-delay: var(--ao-delay, 0ms);
}
[data-a="fade-up"]    { transform: translateY(36px); }
[data-a="fade-down"]  { transform: translateY(-36px); }
[data-a="fade-left"]  { transform: translateX(36px); }
[data-a="fade-right"] { transform: translateX(-36px); }
[data-a="fade"]       { transform: translateY(0); }
[data-a="zoom-in"]    { transform: scale(0.94); }
[data-a="zoom-out"]   { transform: scale(1.06); }

[data-a].ao-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-a] { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   공통 유틸
========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.t_center { text-align: center; }

/* =========================
   팝업 컨테이너
========================= */
#hd_pop {
  z-index: 1000;
  position: relative;
  margin: 0 auto;
  height: 0;
}

/* =========================
   팝업 박스
========================= */
.hd_pops {
  position: absolute;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hd_pops:hover {
  transform: translateY(-3px);
  box-shadow: 0 25px 60px rgba(0,0,0,.22);
}

.hd_pops img {
  max-width: 100%;
  display: block;
}

/* =========================
   팝업 하단
========================= */
.hd_pops_footer {
  padding: 10px 12px;
  background: #fff;
  position: relative;
  border-top: 1px solid rgba(0,0,0,.05);
}

.hd_pops_footer::after {
  display: block;
  clear: both;
  content: "";
}

.hd_pops_footer button {
  border: 0;
  padding: 10px 14px;
  font-size: var(--t-body);
  cursor: pointer;
  border-radius: 8px;
  transition: background .22s cubic-bezier(0.4, 0, 0.2, 1), color .22s cubic-bezier(0.4, 0, 0.2, 1);
}

.hd_pops_footer .hd_pops_reject {
  background: #f5f5f5;
  color: #333;
}

.hd_pops_footer .hd_pops_reject:hover {
  background: #e9e9e9;
}

.hd_pops_footer .hd_pops_close {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--main);
  color: #fff;
  border-radius: 0 0 0 12px;
}

.hd_pops_footer .hd_pops_close:hover {
  background: #000;
}

/* =========================
   팝업 모바일
========================= */
@media (max-width: 900px) {
  #hd_pop {
    top: 120px;
    max-width: 90% !important;
  }

  .hd_pops {
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    width: 100% !important;
    border-radius: 14px;
  }

  .hd_pops img { width: 100% !important; }

  .hd_pops_con {
    width: 100% !important;
    height: auto !important;
  }

  .hd_pops_footer {
    top: -6px;
    padding: 10px;
  }

  .hd_pops_footer button { padding: 8px 12px; }
}


/* =========================================================
   SECTION: MAIN SLIDE (ms-*)
========================================================= */

#main_slide { overflow: hidden; position: relative; width: 100%; }
.ms-vp {
  width: 100%; height: 100vh; height: 100svh;
  overflow: hidden; position: relative;
}

.ms-cont {
  display: flex; height: 100%;
  touch-action: pan-y; user-select: none;
}
.ms-slide {
  flex: 0 0 100%; min-width: 0;
  height: 100%; overflow: hidden; position: relative;
}

.ms-img { position: absolute; inset: 0; overflow: hidden; }
.ms-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: center center;
  will-change: transform; display: block;
}

.ms-img::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 100%);
  z-index: 2; pointer-events: none;
}

.ms-txt {
  position: absolute; inset: 0;
  z-index: 5; pointer-events: none;
}

.ms-head {
  position: absolute;
  top: 10%; bottom: 340px;
  left: 10%; right: 10%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ms-hi {
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1.1;
  color: #fff;
  text-align: center;
  width: 100%;
}

.ms-sub {
  position: absolute;
  bottom: 230px; left: 10%; right: 10%;
  z-index: 10;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ms-sub.is-visible { opacity: 1; transform: translateY(0); }
.ms-sub > div {
  font-size: var(--t-lead); color: rgba(255,255,255,.88); line-height: 1.72;
}

.ms-nav {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 20px;
  z-index: 20; color: #fff;
}

.ms-prev, .ms-next {
  cursor: pointer; background: none; color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; padding: 0;
  opacity: .72;
  transition: opacity .22s cubic-bezier(0.4,0,0.2,1),
              transform .22s cubic-bezier(0.34,1.56,0.64,1),
              border-color .22s cubic-bezier(0.4,0,0.2,1);
  user-select: none;
}
.ms-prev:hover, .ms-next:hover {
  opacity: 1; transform: scale(1.1);
  border-color: rgba(255,255,255,.75);
}

.ms-frac {
  display: flex; align-items: center; gap: 10px;
  line-height: 1;
}
.ms-cur, .ms-tot {
  display: inline-block; min-width: 22px;
  text-align: center; font-size: var(--t-lead);
}
.ms-prog {
  display: block; width: 60px; height: 1px;
  background: rgba(255,255,255,.28); border-radius: 1px; overflow: hidden;
}
.ms-bar {
  height: 100%; background: #fff;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

:root {
  --char-dur:  0.75s;
  --char-ease: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --char-y:    20px;
}
.ms-hi .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--char-y));
  will-change: opacity, transform;
  white-space: pre;
}
.ms-hi .char.char-on {
  animation: charIn var(--char-dur) var(--char-ease) both;
}
@keyframes charIn {
  from { opacity: 0; transform: translateY(var(--char-y)); }
  to   { opacity: 1; transform: translateY(0); }
}

.ms-vp { transition: opacity 0.1s; }

@media (max-width: 900px) {
  .ms-vp { height: 100svh; }
  .ms-head { bottom: 200px; left: 5%; right: 5%; }
  .ms-hi { font-size: clamp(26px, 7.5vw, 44px); }
  .ms-sub { bottom: 116px; left: 5%; right: 5%; }
  .ms-sub > div { font-size: var(--t-body); }
}

@media (prefers-reduced-motion: reduce) {
  .ms-hi .char.char-on { animation: none; opacity: 1; transform: none; }
  .ms-sub { transition: none; }
}


/* index 전용 CSS 변수 */
:root {
    --point: #b8a08a;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}