.buyu-page { background: #060a18; }
.section--buyu { min-height: 100vh; min-height: 100dvh; }
.section--buyu .section__background-image { object-position: center; }
.section--buyu .section__background picture { display: block; width: 100%; height: 100%; }
.buyu__lights { position: absolute; left: calc(50% - 96rem); top: calc(50% - 54rem); width: 192rem; height: 108rem; pointer-events: none; }
.buyu__ring-light { position: absolute; left: 52.05rem; top: 50.625rem; width: 87.6rem; height: 41.85rem; max-width: none; mix-blend-mode: lighten; }
.buyu__flare { position: absolute; left: 8.625rem; top: -73.425rem; width: 170.325rem; height: 210.9rem; max-width: none; mix-blend-mode: plus-lighter; }

.buyu__title-glow { position: absolute; left: 50.400rem; top: 0; width: 88.575rem; height: 73.425rem; max-width: none; pointer-events: none; }

.buyu__caption-decoration { position: absolute; left: 79.125rem; top: 4.725rem; width: 31.2rem; height: 23.1rem; max-width: none; pointer-events: none; }
.buyu__caption { position: absolute; left: 0; top: 19.2rem; width: 100%; text-align: center; font-family: var(--font-serif); font-size: 2.4rem; font-weight: 500; line-height: 3.2rem; letter-spacing: .04em; color: #031567; }

.buyu__title-noise { position: absolute; left: 45.975rem; top: 14.025rem; width: 99.6rem; height: 43.5rem; max-width: none; pointer-events: none; transition: opacity .6s; }
.buyu__title-backdrop { position: absolute; left: 63.45rem; top: 14.025rem; width: 66.825rem; height: 43.5rem; max-width: none; pointer-events: none; opacity: 0; transition: opacity .8s .2s; }
.buyu__title { position: absolute; left: 63.6rem; top: 26.775rem; width: 65.475rem; height: 15.075rem; margin: 0; pointer-events: none; }
.buyu__title-image { display: block; width: 100%; height: 100%; max-width: none; opacity: 0; transform: scale(.96); transition: opacity .8s .2s, transform .8s .2s; }
[data-stage="0"] .buyu__title-screen-reader { position: absolute; }
main:not([data-stage="0"]) .buyu__title-noise { opacity: 0; }
main:not([data-stage="0"]) .buyu__title-image { opacity: 1; transform: none; }
main:not([data-stage="0"]) .buyu__title-backdrop { opacity: 1; }
main:not([data-stage="0"]) .buyu__title-screen-reader, main:not([data-stage="0"]) .buyu__name-screen-reader { display: none; }

.buyu__description { position: absolute; left: 0; top: 43.35rem; width: 100%; text-align: center; font-family: var(--font-serif); font-size: 3rem; font-weight: 500; line-height: 3.6rem; color: #011051; letter-spacing: -.025em; }
.buyu__description strong { font-weight: 900; }
.buyu__description-glow { display: none; }
.buyu__name { position: relative; display: inline-block; height: 3.6rem; vertical-align: top; }
.buyu__name-noise { display: block; width: 17.85rem; height: 5.025rem; max-width: none; margin: -1.275rem -2.625rem 0 -2.325rem; }
.buyu__name-image { display: none; width: 12.375rem; height: 2.85rem; max-width: none; margin: .3rem 0 0; }
main:not([data-stage="0"]) .buyu__name-noise { display: none; }
main:not([data-stage="0"]) .buyu__name-image { display: block; animation: by-reveal .8s ease both; }
@keyframes by-reveal { from { opacity: 0; text-shadow: 0 0 1.2rem #fff; } to { opacity: 1; text-shadow: none; } }

.buyu__gauge { position: absolute; left: 78.731rem; top: 54.796rem; width: 34.539rem; height: 35.084rem; }
.buyu__gauge-frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
@property --ring-angle { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.buyu__gauge-frame--100 { opacity: 1; transition: --ring-angle 1.2s cubic-bezier(.2,.8,.2,1);
  -webkit-mask-image: conic-gradient(from 0deg at 50.59% 47.83%, #000 0deg, #000 var(--ring-angle, 0deg), transparent calc(var(--ring-angle, 0deg) + 1.5deg));
          mask-image: conic-gradient(from 0deg at 50.59% 47.83%, #000 0deg, #000 var(--ring-angle, 0deg), transparent calc(var(--ring-angle, 0deg) + 1.5deg)); }
.buyu__gauge, .buyu__bar { z-index: 2; }
.buyu__banner { z-index: 1; }
.buyu__gauge-caption-ellipsis { font-style: normal; }
.buyu__gauge-caption { position: absolute; left: 0; top: 11.2rem; width: 100%; height: 2.6rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; font-size: 1.62rem; line-height: 1; letter-spacing: -.05em; white-space: nowrap; color: #0f1013; translate: 0.34rem 0; pointer-events: none; }
.buyu__percent { position: absolute; left: 0; top: 14.58rem; width: 100%; height: 7.275rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; line-height: 1; letter-spacing: -.01em; transform: scaleX(1.12); transform-origin: 50% 50%; }
.buyu__percent-value, .buyu__percent-mark { position: relative; display: inline-block; font-style: normal; color: transparent; background: url('../assets/img/buyu_percent_texture.jpg') center / 24rem 12rem; -webkit-background-clip: text; background-clip: text; }
.buyu__percent-value::before, .buyu__percent-mark::before { content: attr(data-text); position: absolute; inset: 0; z-index: -1; color: #05173f; -webkit-text-stroke: 0.42rem #d19748; paint-order: stroke fill; text-shadow: 0 0.1rem 0.2rem rgba(0,10,40,.5); }
.buyu__percent-value { font-size: 7.4rem; }
.buyu__percent-mark { font-size: 4.2rem; margin-left: .04em; align-self: flex-end; padding-bottom: .05em; }

.buyu__bar { position: absolute; left: 27.487rem; top: 86.526rem; width: 137.101rem; height: 24.048rem; }
.buyu__bar-track { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
.buyu__bar-fill { position: absolute; left: 16.541rem; top: 6.553rem; width: 109.236rem; height: 5.535rem; pointer-events: none;
  clip-path: inset(0 calc(100% - var(--fill-clip, 0%)) 0 0 round 0 2.767rem 2.767rem 0); transition: clip-path 1.2s cubic-bezier(.2,.8,.2,1); }
main[data-fill-end="square"] .buyu__bar-fill { clip-path: inset(0 calc(100% - var(--fill-clip, 0%)) 0 0); }
.buyu__bar-fill-image { position: absolute; left: -15.905rem; top: -2.227rem; width: 125.205rem; height: 18.768rem; max-width: none; }
.buyu__bar-fill::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--fill-clip, 0%) - 3rem); width: 3rem; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(215,240,255,.3) 55%, rgba(255,255,255,.6) 100%); transition: left 1.2s cubic-bezier(.2,.8,.2,1); }
.buyu__bar[data-zero="1"] .buyu__bar-fill { opacity: 0; }
.buyu__bar-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.buyu__milestones { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.buyu__milestone { position: absolute; top: 2.227rem; width: 8.143rem; height: 2.418rem; margin-left: -4.071rem; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.7rem; font-weight: 500; line-height: 1; letter-spacing: -.01em; color: #f1e7d5;
  text-shadow: 0 0 0.25rem rgba(0,0,0,.9), 0 0.1rem 0.2rem rgba(0,0,0,.95), 0 0 0.6rem rgba(0,0,0,.6); }
.buyu__milestone:nth-child(1) { left: 22.267rem; } .buyu__milestone:nth-child(2) { left: 51.882rem; }
.buyu__milestone:nth-child(3) { left: 90.276rem; } .buyu__milestone:nth-child(4) { left: 121.520rem; }

/* 보상 배너 1~4단계. 처음부터 네 장을 모두 깔고, 아직 달성하지 않은 단계만 흑백으로 눌러 둔다.
   PSD 는 dim(검정 10%) + Black & White 조정 레이어로 같은 상태를 만든다 */
.buyu__banner { position: absolute; max-width: none; width: 33.975rem; height: 13.575rem; }
.buyu__banner--stage-1 { left: 36.45rem; top: 58.125rem; }
.buyu__banner--stage-2 { left: 36.45rem; top: 73.05rem; width: 36.75rem; height: 14.7rem; }   /* 콜라보 캐릭터가 테두리 밖으로 나와 혼자 크다 */
.buyu__banner--stage-3 { left: 120rem; top: 58.125rem; }
.buyu__banner--stage-4 { left: 120rem; top: 73.125rem; }
/* [26.10.15 변경] 미달성 단계를 흑백으로 깔아 두던 것을 '아예 안 보이기'로 바꿨다.
   배너 4 장이 절대 좌표라 숨겨도 다른 요소가 밀리지 않는다 — 빈 자리만 남는다.
   껍데기(.buyu__banner)는 페이지 등장 전환에 opacity 를 이미 쓰고 있어, 단계 노출은
   안쪽 두 요소(그림·명판)에 건다. visibility 까지 꺼야 화면 낭독기에서도 읽히지 않는다 */
.section--buyu :is(.buyu__banner-image, .buyu__banner-label) {
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
main[data-stage="1"] .buyu__banner--stage-1 :is(.buyu__banner-image, .buyu__banner-label),
main[data-stage="2"] :is(.buyu__banner--stage-1, .buyu__banner--stage-2) :is(.buyu__banner-image, .buyu__banner-label),
main[data-stage="3"] :is(.buyu__banner--stage-1, .buyu__banner--stage-2, .buyu__banner--stage-3) :is(.buyu__banner-image, .buyu__banner-label),
main[data-stage="4"] :is(.buyu__banner-image, .buyu__banner-label) {
  opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
/* 순차 노출: 1 -> 4 단계 차례로 0.25 초씩 밀어 준다. 시작점 .45s 는 껍데기 등장 전환과 맞춘 값 */
.buyu__banner--stage-1 :is(.buyu__banner-image, .buyu__banner-label) { transition-delay: .45s; }
.buyu__banner--stage-2 :is(.buyu__banner-image, .buyu__banner-label) { transition-delay: .70s; }
.buyu__banner--stage-3 :is(.buyu__banner-image, .buyu__banner-label) { transition-delay: .95s; }
.buyu__banner--stage-4 :is(.buyu__banner-image, .buyu__banner-label) { transition-delay: 1.20s; }
.buyu__banner-image { display: block; width: 100%; height: 100%; }
.buyu__banner-label { position: absolute; left: 7.2rem; top: 0.825rem; width: 10.8rem; height: 1.725rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.63rem; font-weight: 500; line-height: 1; letter-spacing: -.05em; white-space: nowrap; pointer-events: none; color: #fffcea; }
.buyu__banner--stage-2 .buyu__banner-label { top: 0.9rem; }

.buyu__caption, .buyu__gauge, .buyu__bar, .buyu__banner, .buyu__description, .buyu__description-glow { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s ease, transform .7s ease; }
.is-ready .buyu__caption, .is-ready .buyu__description, .is-ready .buyu__description-glow { opacity: 1; transform: none; }
.is-ready .buyu__gauge { opacity: 1; transform: none; transition-delay: .15s; }
.is-ready .buyu__bar { opacity: 1; transform: none; transition-delay: .3s; }
.is-ready .buyu__banner { opacity: 1; transform: none; transition-delay: .45s, .45s, .45s, .45s; }
@media (prefers-reduced-motion: reduce) {
  .buyu__caption, .buyu__gauge, .buyu__bar, .buyu__banner, .buyu__banner-image, .buyu__banner-label, .buyu__description, .buyu__description-glow, .buyu__bar-fill, .buyu__title-image, .buyu__title-backdrop, .buyu__title-noise { transition: none !important; }
  .buyu__name-image { animation: none !important; }
}

/* ==========================================================================
   모바일 (≤780px) — 모바일 시안 04_부유천하_MO.psd 780×1688
   좌표 = PSD px ÷ 20 = rem (1rem = 10px @ 390 뷰포트, 780 뷰포트에서 시안과 CSS px 1:1)
   조각은 tools/mo/buyu_assets.py 가 뽑은 buyu_mobile_*. 화면 폭 39rem 고정, 높이 84.4rem
   ========================================================================== */
@supports not selector(::-webkit-scrollbar) {
  @media (max-width: 780px) { html { scrollbar-width: thin; scrollbar-color: #c99a3c transparent; } }
}
@media (max-width: 780px) {
  /* 부유천하는 mobile.css 를 불러오지 않는다(메인의 섹션 규칙이 이 페이지 레이아웃을 깨뜨린다).
     스크롤바만 메인 모바일과 같은 두께로 맞춘다 — css/mobile.css 와 같은 값 */
  ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { border: 0; border-radius: 0.25rem; background: linear-gradient(180deg, #f3d98a 0%, #c99a3c 55%, #a97b25 100%); background-clip: border-box; }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #fff0b3 0%, #e0b24f 55%, #c08f2e 100%); }
  ::-webkit-scrollbar-corner { background: transparent; }
  /* 검토용 모집 인원 패널은 모바일에서 화면을 크게 가려 숨긴다 (납품본은 config 로 아예 꺼진다) */
  .buyu-preview-panel { display: none; }
  .buyu-page { background: #090f13; }
  .section--buyu { height: 84.4rem; min-height: 84.4rem; overflow: hidden; }
  .section--buyu .section__background { height: 84.4rem; bottom: auto; }
  .section--buyu .stage { position: relative; left: 0; top: 0; width: 39rem; height: 84.4rem; margin: 0 auto; transform: none; }
  .buyu__lights { display: none; }

  .buyu__title-glow { left: 0; top: -2.35rem; width: 39rem; height: 30.25rem; z-index: 3; }
  .buyu__caption, .buyu__caption-decoration, .buyu__title, .buyu__title-noise,
  .buyu__description, .buyu__description-glow { z-index: 4; }

  .buyu__caption { left: -0.25rem; top: 4.45rem; font-size: 1.6rem; line-height: 2.4rem; letter-spacing: -.025em; color: #031464; }
  .buyu__caption-decoration { left: 12.3rem; top: 6.95rem; width: 13.95rem; height: 0.9rem; mix-blend-mode: darken; }

  .buyu__title { left: 2rem; top: 6.45rem; width: 35.3rem; height: 12.3rem; }
  .buyu__title-backdrop { display: none; }
  .buyu__title-noise { left: -3.87rem; top: 3.14rem; width: 46.47rem; height: 20.34rem; transform: none; }

  .buyu__description-glow { display: block; position: absolute; left: 2.4rem; top: 15.25rem; width: 34.5rem; height: 11.15rem;
    background: url('../assets/img/buyu_mobile_description_glow.webp') center / 100% 100% no-repeat; pointer-events: none; }
  .buyu__description { top: 17.55rem; font-size: 1.6rem; line-height: 2.2rem; letter-spacing: -.025em; color: #04196e; }
  .buyu__name { height: 2.2rem; }
  .buyu__name-image { width: 7.15rem; height: 1.65rem; margin: 0.2rem 0 0; }
  .buyu__name-noise { width: 10.31rem; height: 2.9rem; margin: -0.74rem -1.52rem 0 -1.34rem; }

  .buyu__gauge { left: 7.9rem; top: 24.4rem; width: 23.2rem; height: 23.9rem; }
  .buyu__gauge-frame--100 {
    -webkit-mask-image: conic-gradient(from 0deg at 49.94% 47.83%, #000 0deg, #000 var(--ring-angle, 0deg), transparent calc(var(--ring-angle, 0deg) + 1.5deg));
            mask-image: conic-gradient(from 0deg at 49.94% 47.83%, #000 0deg, #000 var(--ring-angle, 0deg), transparent calc(var(--ring-angle, 0deg) + 1.5deg)); }
  .buyu__gauge-caption { top: 7.3rem; height: 2rem; font-size: 1.2rem; letter-spacing: -.055em; translate: 0 0; }
  .buyu__gauge-caption-ellipsis { display: none; }
  .buyu__percent { top: 9.75rem; height: 5rem; letter-spacing: -.05em; transform: scaleX(1.035); }
  .buyu__percent-value, .buyu__percent-mark { background-size: 17.1rem 8.55rem; }
  .buyu__percent-value::before, .buyu__percent-mark::before { -webkit-text-stroke-width: 0.28rem; text-shadow: 0 0.05rem 0.1rem rgba(0,10,40,.5); }
  .buyu__percent-value { font-size: 5.27rem; }
  .buyu__percent-mark { font-size: 2.9rem; }

  .buyu__banner { width: 17.3rem; height: 9.05rem; }
  .buyu__banner--stage-1 { left: 1.55rem; top: 46.25rem; }
  .buyu__banner--stage-2 { left: 1.55rem; top: 55.65rem; width: 17.3rem; height: 9.05rem; }
  .buyu__banner--stage-3 { left: 20.1rem; top: 46.25rem; }
  .buyu__banner--stage-4 { left: 20.1rem; top: 55.65rem; }
  .buyu__banner-label, .buyu__banner--stage-2 .buyu__banner-label { left: 5rem; top: 0.55rem; width: 7.2rem; height: 1.15rem; font-size: 1.05rem; letter-spacing: -.05em; }

  .buyu__bar { left: 1.2rem; top: 67.8rem; width: 36.6rem; height: 8.6rem; }
  .buyu__bar-frame { display: none; }
  .buyu__bar-fill { left: 1.3rem; top: 2.2rem; width: 34.05rem; height: 3.55rem;
    clip-path: inset(0 calc(100% - var(--fill-clip, 0%)) 0 0 round 0 1.775rem 1.775rem 0); }
  main[data-fill-end="square"] .buyu__bar-fill { clip-path: inset(0 calc(100% - var(--fill-clip, 0%)) 0 0); }
  .buyu__bar-fill-image { left: 0; top: 0; width: 100%; height: 100%; }
  .buyu__bar-fill::after { left: calc(var(--fill-clip, 0%) - 1.5rem); width: 1.5rem; }
  .buyu__milestone { top: -1.8rem; width: 6.6rem; height: 3.45rem; margin-left: 0; display: block; padding: 0; text-align: center;
    background: url('../assets/img/buyu_mobile_milestone_plate.webp') center / 100% 100% no-repeat;
    font-size: 1.2rem; line-height: 2rem; letter-spacing: 0; color: #fbf2d9;
    text-shadow: 0 0.05rem 0.1rem rgba(0,0,0,.75); }
  .buyu__milestone:nth-child(1) { left: 0.8rem; } .buyu__milestone:nth-child(2) { left: 10.25rem; }
  .buyu__milestone:nth-child(3) { left: 19.75rem; } .buyu__milestone:nth-child(4) { left: 29.2rem; }
}

.buyu-preview-panel { position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 300; width: 34rem; padding: 1.2rem 1.4rem 1.4rem; border-radius: 1.2rem; background: rgba(8,14,32,.9); color: #e8ecf8; font-family: var(--font-sans); font-size: 1.5rem; box-shadow: 0 0.8rem 2.4rem rgba(0,0,0,.45); backdrop-filter: blur(0.6rem); }
.buyu-preview-panel__toggle { display: block; width: 100%; text-align: left; font-size: 1.4rem; font-weight: 700; color: #ffd873; background: none; border: 0; padding: 0 0 .8rem; cursor: pointer; }
.buyu-preview-panel.is-collapsed { width: auto; padding: .8rem 1.2rem; }
.buyu-preview-panel.is-collapsed .buyu-preview-panel__toggle { padding: 0; }
.buyu-preview-panel.is-collapsed .buyu-preview-panel__body { display: none; }
.buyu-preview-panel__label { display: block; margin-bottom: .6rem; font-size: 1.4rem; line-height: 1.5; }
.buyu-preview-panel__label output { font-weight: 700; color: #7fb4ff; }
.buyu-preview-panel__slider { width: 100%; margin: .2rem 0 .8rem; accent-color: #4f8dff; }
.buyu-preview-panel__steps { display: flex; gap: .5rem; }
.buyu-preview-panel__steps button { flex: 1; padding: .55rem 0; border: 0.1rem solid rgba(255,255,255,.25); border-radius: .6rem; background: rgba(255,255,255,.06); color: #fff; font-size: 1.3rem; cursor: pointer; }
.buyu-preview-panel__steps button:hover { background: rgba(255,255,255,.16); }