/* ══════════════════════════════════════════════════════════════
   사용자(front) 화면 공통 스타일 — 미니멀 + 프리미엄
   색상 토큰과 기본 타이포·포커스·스크롤바처럼 모든 페이지가 같이 쓰는 것만 둡니다.
   레이아웃·컴포넌트는 각 페이지의 Tailwind 클래스로 그립니다.
   고급스러운 인상은 세 가지로 만듭니다:
   - 제목(h1·h2)·로고·영문 라벨은 세리프(영문 Cormorant Garamond, 한글 마루부리), 본문은 Pretendard
   - 순백 대신 아이보리 종이색 배경과 따뜻한 차콜 글자
   - 스크롤할 때 섹션이 천천히 떠오르는 등장 효과와 배너의 느린 줌(pilates-theme.js)
   ══════════════════════════════════════════════════════════════ */

/* 마루부리는 굵기마다 font-family 이름이 따로라서, 한 이름(MaruBuri Web) 아래 굵기별로 묶어 씁니다 */
@font-face {
  font-family: "MaruBuri Web";
  font-weight: 400;
  font-display: swap;
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "MaruBuri Web";
  font-weight: 600;
  font-display: swap;
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2) format("woff2");
}

:root {
  --brand: #FFCA1A;        /* 포인트 컬러: 버튼 배경·인디케이터·진행 막대처럼 "면"에만 씁니다 */
  --brand-light: #FFF6D9;  /* 배지·선택 상태의 옅은 배경 */
  --brand-ink: #9A6400;    /* 흰 배경 위 강조 글자(옐로우는 글자로 쓰면 대비가 부족합니다) */
  --ink: #1C1B19;
  --paper: #FDFCF9;        /* 기본 배경(아이보리). Tailwind의 white도 이 색으로 바꿔 두었습니다(pilates-theme.js) */
  --line: #E4DFD6;
  --font-display: "Cormorant Garamond", "MaruBuri Web", "Nanum Myeongjo", serif;
}

* { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
html { scrollbar-gutter: stable; overflow-anchor: none; }
body {
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  letter-spacing: -0.01em;
}
h3 { letter-spacing: -0.025em; }

/* 페이지·섹션 제목은 세리프로. 페이지마다 붙은 font-bold·tracking 클래스보다 우선하도록 !important를 씁니다
   (세리프는 굵게 쓰면 둔해 보여서 SemiBold 한 단계로 고정합니다) */
h1, h2, .font-display {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}
h1, h2 { letter-spacing: -0.005em !important; }
h1 { line-height: 1.3; }

::selection { background: var(--brand-light); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

img { -webkit-user-drag: none; }
/* 사진은 채도를 아주 조금 낮춰 아이보리 배경과 톤을 맞춥니다 */
main img { filter: saturate(0.9) contrast(1.02); }

/* 숫자(가격·횟수·날짜)는 고정폭으로 맞춰 정렬이 흔들리지 않게 합니다 */
.tabular { font-variant-numeric: tabular-nums; }

.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 섹션 제목 위 작은 영문 라벨(예: PROGRAM): 세리프 대문자 + 넓은 자간 */
.eyebrow {
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8C8579;
}

/* 스크롤 등장 효과: pilates-theme.js가 섹션에 .reveal을 붙이고, 화면에 들어오면 .is-in을 붙입니다.
   스크립트가 돌지 않으면 .reveal 자체가 붙지 않으므로 콘텐츠는 그대로 보입니다 */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* 메인 배너 사진은 바뀔 때마다 아주 천천히 당겨지는 줌을 줍니다(확대가 크면 사진이 흐려 보여 4%만). 배너는 원본 색감 그대로 보여줍니다. 슬라이드 전환이 transform(translateX)을 쓰므로
   겹치지 않게 개별 속성인 scale로 애니메이션합니다 */
@keyframes slowZoom { from { scale: 1.04; } to { scale: 1; } }
#bannerBox img { animation: slowZoom 7s cubic-bezier(.2,.6,.2,1) both; filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* 모바일 하단 탭바(renderBottomTabs)나 하단 고정 버튼 바(#mobileCtaBar)가 있는 화면은 마지막 콘텐츠(푸터)가 탭바에 가리지 않도록 아래 여백을 둡니다 */
@media (max-width: 767px) {
  body.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.has-ctabar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}