/* The Stay Healing Park — site stylesheet
   - 모바일 우선
   - 콘텐츠 안폭 1400px / 풀블리드 1920px
   - 디자인 토큰은 common.css 의 :root 사용 */

:root{
  /* 사이트 별 오버라이드(그대로 유지하지만, 다른 제품에서 컬러만 바꾸면 됨) */
  --color-footer-bg:#1c706a;
  --color-float-btn:#00ada0;
  --color-text:#343434;
  --color-text-on-dark:#ffffff;
}

/* ── Header ───────────────────────────────────────────────── */
.ts-header{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:flex-start;width:100%;max-width:var(--content-w);margin-inline:auto;padding:22px var(--gutter);box-sizing:border-box}
.ts-header__logo img{width:auto;height:auto;opacity:.95}

/* ── Hero (관리자 동적 슬라이드) ──────────────────────────── */
.ts-hero{position:relative;width:100%;height:100vh;min-height:520px;max-height:1080px;overflow:hidden;background:#000}
.ts-hero__slides{position:absolute;inset:0;list-style:none;margin:0;padding:0}
.ts-hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease-in-out;will-change:opacity}
.ts-hero__slide.is-active{opacity:1;z-index:1}
.ts-hero__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 24px;z-index:2;pointer-events:none}
.ts-hero__sub{font-family:var(--ff-sans);font-weight:500;font-size:clamp(14px,4.5vw,24px);margin:0;letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.45);opacity:.95}
.ts-hero__title{font-family:var(--ff-sans);font-weight:800;font-size:clamp(22px,6.5vw,48px);margin:0;line-height:1.35;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.ts-hero__logo{margin-top:clamp(12px,2.5vw,24px);max-width:clamp(140px,42vw,260px);height:auto;display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.4))}
.ts-hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.35) 100%);pointer-events:none;z-index:3}
.ts-hero__dots{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:center;gap:10px;z-index:4}
.ts-hero__dot{width:10px;height:10px;border-radius:50%;border:none;background:#fff;padding:0;cursor:pointer;transition:background .2s,transform .2s}
.ts-hero__dot.is-active{background:#00ada0;transform:scale(1.15)}
.ts-hero__dot:hover{background:#00ada0}

/* ── M1 멤버십 출시 ──────────────────────────────────────── */
.ts-m1__grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;align-items:stretch}
.ts-m1__media{position:relative;overflow:hidden;border-radius:2px}
/* 좌측 wide 가 21:9 비율로 행 높이를 결정. 우측은 align-items:stretch 로 같은 높이를 따라간다.
   img 를 absolute 로 띄워 figure 의 자연 높이에 영향 주지 않게 해서 stretch 가 정확히 동작 */
.ts-m1__media--wide{aspect-ratio:21/9}
.ts-m1__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ts-m1__overlay{position:absolute;left:0;top:0;max-width:55%;padding:30px 30px 30px 80px;color:#fff;background:linear-gradient(135deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 70%,rgba(0,0,0,0) 100%)}
.ts-m1__chip{display:block;font-family:var(--ff-sans);font-weight:700;letter-spacing:.12em;font-size:20px;margin-bottom:14px}
.ts-m1__lead{font-family:var(--ff-sans);font-weight:500;font-size:18px;line-height:1.5;margin-bottom:14px}
.ts-m1__desc{font-family:var(--ff-sans);font-weight:500;font-size:18px;line-height:1.7;opacity:.92;margin-bottom:20px}
.ts-m1__overlay .btn{font-family:var(--ff-sans);font-weight:500;font-size:18px;padding:12px 22px}

/* ── M2 멤버십 혜택 ──────────────────────────────────────── */
.ts-m2{background:#f6f6f6;padding-block:48px}
.ts-m2 .container{display:flex;flex-direction:column;gap:28px;align-items:stretch}
.ts-m2 .sec-head{margin:0 0 6px 0;text-align:center}
.ts-m2__body{display:flex;flex-direction:column;gap:28px}
.ts-m2__list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ts-m2__list > li{display:flex;align-items:center;gap:16px;padding:0}
.ts-m2__list img{width:auto;height:auto;max-width:60px;object-fit:contain;flex:0 0 auto}
.ts-m2__list strong{display:block;font-family:var(--ff-sans);font-weight:700;font-size:18px;margin-bottom:4px;color:#1c706a}
.ts-m2__list span{font-family:var(--ff-sans);font-weight:500;font-size:16px;color:#343434;line-height:1.5}
.ts-m2__bottom{display:flex;justify-content:center;margin-bottom:20px}
.ts-m2__cta{flex:0 0 auto}
.ts-m2__cta .btn{padding:14px 32px;font-size:16px}

/* M2 하단 VIP 배너 — 클릭 시 PDF 새 창. 풀너비, PC/모바일 자동 비율 유지 */
.ts-m2__vip{position:relative;display:block;width:100%;line-height:0;transition:opacity .2s ease}
.ts-m2__vip > img{display:block;width:100%;height:auto;max-width:none}
.ts-m2__vip:hover{opacity:.92}
.ts-m2__vip:focus-visible{outline:2px solid #888811;outline-offset:-4px}

/* 우측 텍스트 + 화살표 오버레이 — 1400px 컨테이너 우측 가장자리에 정렬
   (위 행 VIP Only 액자가 끝나는 지점과 동일) */
.ts-m2__vip-cta{
  position:absolute;
  top:50%;
  /* 50vw - 676px = 컨테이너(1400) 우측 외곽에서 뷰포트 우측까지 거리 + gutter(24)
     좁은 화면에서는 최소 24px 보장 */
  right:max(24px, calc(50vw - 676px));
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:50px;
  color:#fff;
  pointer-events:none;
  line-height:1;
  font-family:var(--ff-sans);
  white-space:nowrap;
}
.ts-m2__vip-text{
  font-weight:700;
  font-size:clamp(14px,1.8vw,28px);
  letter-spacing:-.01em;
}
.ts-m2__vip-arrow{
  font-weight:300;
  font-size:clamp(20px,2.6vw,42px);
}
/* 벨포레 브랜드 아이콘 (좌측 오버레이) */
.ts-m2__vip > img.ts-m2__vip-icon{
  position:absolute;
  left:max(24px, calc(50vw - 540px));
  top:50%;
  transform:translateY(-50%);
  width:auto;
  height:auto;
  max-width:clamp(120px,14vw,200px);
  max-height:60%;
  pointer-events:none;
  z-index:2;
}
@media (max-width:768px){
  /* M2 섹션 하단 여백 제거 — 배너 아래 빈 공간 안 생기게 */
  .ts-m2{padding-bottom:0}

  /* 모바일: 한 박스 — VIP 그래픽이 좌측에 비례 그대로 크게,
     하단에 그라데이션 위로 텍스트/화살표 오버레이 */
  .ts-m2__vip{
    position:relative;
    margin-top:28px;
    margin-bottom:0;
    height:130px;
    overflow:hidden;
    /* auto 100% : 배너 높이에 비례해 이미지 폭 스케일 → 좌측에 VIP 시각이 충분히 크게 노출 */
    background:url('/belleforetresort/img/m2_img01.png') left center / auto 100% no-repeat #18120e;
  }
  .ts-m2__vip > img{display:none}
  .ts-m2__vip-cta{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:100px;
    transform:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:10px 20px 22px;
    background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.95) 100%);
  }
  .ts-m2__vip-text{
    font-size:18px;
    line-height:1.3;
    flex:1;
    text-align:left;
    white-space:normal;
    max-width:none;
    letter-spacing:0;
    text-shadow:0 1px 3px rgba(0,0,0,.5);
  }
  .ts-m2__vip-arrow{
    font-size:20px;
    flex:0 0 auto;
    text-shadow:0 1px 3px rgba(0,0,0,.5);
  }
  .ts-m2__vip > img.ts-m2__vip-icon{
    display:block;
    left:50%;
    top:20px;
    transform:translateX(-50%);
    max-width:60px;
    max-height:60px;
  }
}

/* ── M3 선택의 기준 ──────────────────────────────────────── */
.ts-m3__list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.ts-m3__list li{padding:30px 16px;display:flex;flex-direction:column;align-items:center}
.ts-m3 .ts-m3__num{transform:scale(0);opacity:0;transition:transform 700ms cubic-bezier(.2,.7,.2,1.2),opacity 500ms ease}
.ts-m3.is-in .ts-m3__num{transform:scale(1);opacity:1}
/* li 슬라이드(240/380/520ms) 직후에 원형 pop 이 이어지도록 지연 정렬 */
.ts-m3.is-in li:nth-child(1) .ts-m3__num{transition-delay:420ms}
.ts-m3.is-in li:nth-child(2) .ts-m3__num{transition-delay:560ms}
.ts-m3.is-in li:nth-child(3) .ts-m3__num{transition-delay:700ms}
.ts-m3__num{position:relative;display:flex;align-items:center;justify-content:center;width:240px;height:240px;font-family:var(--ff-sans);font-weight:800;font-size:40px;line-height:1.1;color:#fff;margin-bottom:30px;background:transparent;isolation:isolate;text-align:center;letter-spacing:.02em}
.ts-m3__num::before{content:"";position:absolute;top:50%;left:50%;width:70.7%;height:70.7%;background:#231f20;transform:translate(-50%,-50%) rotate(45deg);filter:blur(10px);z-index:-1}
.ts-m3__num > span{display:inline-block;line-height:1.15}
.ts-m3__num--all{font-size:34px}
.ts-m3__list strong{display:block;font-family:var(--ff-sans);font-weight:700;font-size:24px;color:#1c706a;margin-bottom:8px}
.ts-m3__list em{display:block;font-style:normal;font-family:var(--ff-sans);font-weight:300;font-size:18px;color:#343434}

/* ── M4 더스테이 힐링파크 갤러리 ───────────────────────── */
.ts-hcards,.ts-films{position:relative;padding-top:56px}
.ts-hcards::before,.ts-films::before{content:"";position:absolute;top:18px;left:0;right:110px;height:1px;background:#d8d8d8}
.ts-arrows{position:absolute;top:0;right:0;display:flex;gap:10px;z-index:2}
.ts-arrows button{width:38px;height:38px;border:1px solid var(--color-line);border-radius:50%;background:#fff;font-size:18px;color:#1c706a;cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
.ts-arrows button:hover{background:#f6f4eb}
.ts-hcards{position:relative}
.ts-hcards__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
.ts-hcards__track::-webkit-scrollbar{display:none}
.ts-hcards__item{flex:0 0 32%;scroll-snap-align:start}
.ts-hcards__item figure{position:relative;overflow:hidden;border-radius:2px}
.ts-hcards__item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.ts-hcards__item:hover img{transform:scale(1.5)}
.ts-hcards__item figcaption{position:absolute;left:14px;bottom:12px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.ts-hcards__item strong{display:block;font-family:var(--ff-serif-ko);font-weight:600;font-size:18px}
.ts-hcards__item span{font-size:12px;opacity:.9}

/* ── M5 라이프 공간 ──────────────────────────────────────── */
.ts-m5{overflow-x:clip}                          /* 풀블리드로 인한 가로 스크롤 차단 */
.ts-m5 .container{max-width:none;padding-inline:0}
.ts-m5__inner{position:relative;width:100vw;background:#1a1a1a;border-radius:0;min-height:560px;display:flex;align-items:center;justify-content:center;padding:60px max(24px, calc(50vw - 676px));overflow:hidden;text-align:center}
/* 배경 이미지는 ::after 로 분리 — 줌 인 애니메이션을 transform 으로 안전하게 적용 */
.ts-m5__inner::after{content:"";position:absolute;inset:0;background:var(--bg) center/cover no-repeat;z-index:0;transform:scale(1.15);transition:transform 1800ms cubic-bezier(.25,.1,.25,1)}
.ts-m5.is-in .ts-m5__inner::after{transform:scale(1)}
.ts-m5__inner::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.35) 100%)}
.ts-m5__panel{position:relative;z-index:2;margin-inline:auto;color:#fff;max-width:760px;text-align:center}
.ts-m5__panel .sec-head__ko{font-family:var(--ff-sans);font-weight:400;font-size:40px;color:#fff;line-height:1.2}
.ts-m5__panel .sec-head__en{font-family:var(--ff-sans);font-weight:600;font-size:20px;color:#e8e3c5}
.ts-m5__lists{display:flex;justify-content:center;gap:80px;text-align:left;letter-spacing:.04em;margin-top:16px}
.ts-m5__col{margin:0;padding:0;list-style:none}
.ts-m5__col > li{font-family:var(--ff-sans);font-weight:600;font-size:20px;color:#fff;padding:6px 0;line-height:1.4}
.ts-m5__sub{margin:4px 0 0;padding:0;list-style:none}
.ts-m5__sub li{font-family:var(--ff-sans);font-weight:400;font-size:17px;color:#fff;padding:2px 0 2px 8px;line-height:1.4;opacity:.92}
.ts-m5__col > li.ts-m5__gap{margin-top:32px}

/* ── M6 라이프스타일 필름 ──────────────────────────────── */
.ts-films__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
.ts-films__track::-webkit-scrollbar{display:none}
.ts-films__item{flex:0 0 23.5%;scroll-snap-align:start}
.ts-films__item figure{position:relative;overflow:hidden;border-radius:2px;background:#000}
.ts-films__item img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.9;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.ts-films__item:hover img{opacity:1;transform:scale(1.03)}
.ts-films__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.85);color:#1c706a;display:flex;align-items:center;justify-content:center;font-size:18px}
.ts-films__item figcaption{padding:12px 4px}
.ts-films__item strong{display:block;font-family:var(--ff-serif-ko);font-weight:600;font-size:15px;margin-bottom:2px}
.ts-films__item span{font-size:12px;color:#807a66}

/* ── 신청폼 모달 내부 ───────────────────────────────────── */
.ts-form__head{text-align:center;margin-bottom:18px}
.ts-form__logo{width:auto;height:auto;margin:0 auto 8px}
.ts-form__head h2{font-family:var(--ff-sans);font-weight:700;font-size:24px;color:#00ada0;letter-spacing:.04em;border-bottom:1px solid var(--color-line);padding-bottom:14px}

/* ── Reveal animation ─────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}

/* ── 반응형 ────────────────────────────────────────────── */
@media (max-width:1024px){
  .ts-m1__grid{grid-template-columns:2fr 1fr;gap:18px}
  .ts-m2{padding-block:32px}
  .ts-m2 .container{gap:18px}
  .ts-m2__body{gap:20px}
  .ts-m2__list{grid-template-columns:1fr;gap:14px}
  .ts-m2__bottom{align-items:stretch;text-align:center}
  .ts-m2__cta{width:100%}
  .ts-m2__cta .btn{width:100%}
  .ts-hcards__item{flex:0 0 46%}
  .ts-films__item{flex:0 0 32%}
  .ts-m3__num{width:240px;height:240px;font-size:36px}
  .ts-m5__inner{min-height:460px;padding:40px}
}
@media (max-width:768px){
  .ts-header{justify-content:center;padding:calc(28px + env(safe-area-inset-top,0px)) 16px 16px}
  .ts-hero{height:100vh;min-height:520px}
  .ts-hero__sub,.ts-hero__title{white-space:nowrap}
  .ts-hero__title br{display:none}
  .ts-m1__grid{grid-template-columns:1fr;gap:14px}
  /* 모바일에서는 img 가 absolute 라 figure 에 명시적 aspect-ratio 가 있어야 높이가 잡힌다 */
  .ts-m1__media--wide{aspect-ratio:4/3}
  /* 모바일: 우측 이미지는 좌측에만 여백을 두고 우측은 뷰포트 끝까지 확장 */
  .ts-m1__media:not(.ts-m1__media--wide){aspect-ratio:16/10;/*margin-left:20%;margin-right:calc(-1 * var(--gutter))*/}
  .ts-m1__overlay{max-width:100%;padding:14px 16px 16px;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.25) 60%,rgba(0,0,0,0) 100%)}
  .ts-m1__chip{font-size:18px;margin-bottom:8px}
  .ts-m1__lead{font-size:16px;margin-bottom:8px}
  .ts-m1__desc{font-size:14px;margin-bottom:12px;line-height:1.5}
  .ts-m1__overlay .btn{font-size:15px;padding:10px 18px}
  .ts-m3__list{grid-template-columns:1fr;gap:8px}
  .ts-m3__num{width:200px;height:200px;font-size:30px;margin-bottom:18px}
  .ts-hcards__item{flex:0 0 78%}
  .ts-films__item{flex:0 0 78%}
  .ts-hcards::before,.ts-films::before{right:96px;top:18px}
  .ts-m5__inner{padding:28px;min-height:380px}
  .ts-m5__lists{flex-direction:column;align-items:flex-start;gap:8px;margin-inline:auto;width:max-content;max-width:100%}
  .ts-m5__col > li{font-size:16px;padding:4px 0}
  .ts-m5__sub li{font-size:14px}
  .ts-m5__col > li.ts-m5__gap{margin-top:14px}
  .ts-arrows{top:-48px}

  /* 모달 내부 헤더 컴팩트화 */
  .ts-form__head{margin-bottom:10px}
  .ts-form__logo{max-width:140px;margin-bottom:4px}
  .ts-form__head h2{font-size:18px;padding-bottom:8px}
}

/* ============================================================
   임팩트 reveal — 섹션별 고유 등장 효과
   섹션이 .is-in 이 되면 내부 요소들이 슬라이드/스케일/회전으로 진입
   기본 data-stagger(페이드+업) 위에 덧입혀진다
   ============================================================ */

/* M1 — 와이드 미디어 좌측 슬라이드, 우측 미디어 우측 슬라이드(둘 다 스케일) */
.ts-m1[data-reveal] .ts-m1__media{
  transition:transform 900ms cubic-bezier(.2,.7,.2,1.05),opacity 800ms ease;
  opacity:0;
}
/* :where() 로 specificity 0 처리 — .is-in 의 reset 이 항상 이긴다 */
.ts-m1[data-reveal] .ts-m1__media:where(.ts-m1__media--wide){transform:translateX(-60px) scale(.94);transition-delay:300ms}
.ts-m1[data-reveal] .ts-m1__media:where(:not(.ts-m1__media--wide)){transform:translateX(60px) scale(.94);transition-delay:440ms}
.ts-m1.is-in .ts-m1__media{transform:translateX(0) scale(1);opacity:1}
.ts-m1[data-reveal] .ts-m1__overlay{
  opacity:0;transform:translateY(16px);
  transition:opacity 600ms ease,transform 600ms ease;
  transition-delay:780ms;
}
.ts-m1.is-in .ts-m1__overlay{opacity:1;transform:translateY(0)}

/* M2 — 혜택 아이템 차례로 팝업 후 CTA 등장 */
.ts-m2[data-reveal] .ts-m2__list > li{
  opacity:0;transform:translateY(36px) scale(.92);
  transition:opacity 700ms cubic-bezier(.2,.7,.2,1.1),transform 700ms cubic-bezier(.2,.7,.2,1.1);
}
.ts-m2.is-in .ts-m2__list > li{opacity:1;transform:translateY(0) scale(1)}
.ts-m2.is-in .ts-m2__list > li:nth-child(1){transition-delay:280ms}
.ts-m2.is-in .ts-m2__list > li:nth-child(2){transition-delay:420ms}
.ts-m2.is-in .ts-m2__list > li:nth-child(3){transition-delay:560ms}
.ts-m2.is-in .ts-m2__list > li:nth-child(4){transition-delay:700ms}
.ts-m2[data-reveal] .ts-m2__bottom{
  opacity:0;transform:translateY(24px);
  transition:opacity 700ms ease,transform 700ms ease;
  transition-delay:720ms;
}
.ts-m2.is-in .ts-m2__bottom{opacity:1;transform:translateY(0)}

/* M3 — 리스트 항목 자체에 슬라이드 (원형 pop 은 기존 유지) */
.ts-m3[data-reveal] .ts-m3__list > li{
  opacity:0;transform:translateY(40px);
  transition:opacity 700ms ease,transform 700ms cubic-bezier(.2,.7,.2,1.05);
}
.ts-m3.is-in .ts-m3__list > li{opacity:1;transform:translateY(0)}
.ts-m3.is-in .ts-m3__list > li:nth-child(1){transition-delay:240ms}
.ts-m3.is-in .ts-m3__list > li:nth-child(2){transition-delay:380ms}
.ts-m3.is-in .ts-m3__list > li:nth-child(3){transition-delay:520ms}

/* ── [메인 전용] 스크롤 등장 효과 ──────────────────────────────
   .page-main 으로 한정 → 서브 페이지에는 영향 없음
   메인 섹션(.m-sec)은 기본 [data-reveal] 만 사용하므로 그것만 조정하면 됨 */
.page-main [data-reveal]{transform:translateY(48px);transition-duration:1600ms}
.page-main [data-reveal].is-in{transform:none}   /* 최종(보이는) 상태 보장 */
.page-main [data-stagger] > *{transition-duration:1600ms}
/* (아래 ts-m* 는 구 템플릿용 — 현재 메인에는 미사용이나 호환 위해 유지) */
.page-main .ts-m1[data-reveal] .ts-m1__media{transition-duration:2000ms}
.page-main .ts-m1[data-reveal] .ts-m1__overlay{transition-duration:1400ms}
.page-main .ts-m2[data-reveal] .ts-m2__list > li{transition-duration:1600ms}
.page-main .ts-m2[data-reveal] .ts-m2__bottom{transition-duration:1600ms}
.page-main .ts-m3[data-reveal] .ts-m3__list > li{transition-duration:1600ms}

/* M4 / M6 — 슬라이더 박스는 reveal 영향에서 완전히 제외 (data-stagger, 임팩트 모두 무력화)
   transform/opacity 가 걸려 있으면 JS getBoundingClientRect 측정과
   포인터 이벤트 처리에 미세한 간섭이 생기는 것으로 확인 — 항상 정상 표시 */
.ts-m4 .ts-hcards,
.ts-m6 .ts-hcards{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* prefers-reduced-motion — 임팩트 효과 무력화 */
@media (prefers-reduced-motion: reduce){
  .ts-m1 .ts-m1__media,
  .ts-m1 .ts-m1__overlay,
  .ts-m2 .ts-m2__list > li,
  .ts-m2 .ts-m2__bottom,
  .ts-m3 .ts-m3__list > li,
  .ts-m4 .ts-hcards,
  .ts-m6 .ts-hcards,
  .ts-m5__inner::after{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

/* ── 벨포레 브랜드 컬러 오버라이드 (common.css 하드코딩 색상) ─ */
.btn--primary{background:#00ada0}
.btn--primary:hover{background:#1c706a}
/* 플로팅 CTA — 호버 시 어두운 색이 가운데서 원형으로 '서서히' 채워지는 리빌 효과 */
.float-cta__btn{position:relative;overflow:hidden;z-index:0}
.float-cta__btn>*{position:relative;z-index:1}
.float-cta__btn::after{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0;transition:transform .85s cubic-bezier(.22,.7,.25,1),opacity .6s ease;z-index:0}
.float-cta__btn:hover::after{transform:translate(-50%,-50%) scale(1);opacity:1}
a.float-cta__btn,a.float-cta__btn:hover{background:#816c5b}
a.float-cta__btn::after{background:#6b5949}
button.float-cta__btn,button.float-cta__btn:hover{background:#273483}
button.float-cta__btn::after{background:#1c2763}
.modal__close{top:0;right:0;background:#00ada0}
.sec-head__en{font-family:var(--ff-sans);font-weight:200;font-size:20px;color:#1c706a}
.ts-progress .ts-progress__bar{background:#00ada0}
body .ts-hcards .ts-arrows button:hover{background:#1c706a;color:#fff;border-color:#1c706a}
body .ts-hcards .ts-arrows button[disabled],
body .ts-hcards .ts-arrows button[aria-disabled="true"],
body .ts-hcards .ts-arrows button.is-disabled{opacity:.75}
body .ts-hcards__item figcaption strong{font-family:var(--ff-sans);font-weight:400}
.modal__panel--image{max-width:1028px}
.site-footer{background:#816c5b}
.site-footer .logo img{width:auto}
.sec-head__ko{font-family:var(--ff-sans);font-weight:300;font-size:40px;color:#343434}