@charset "UTF-8";
/* 9/9 mask-image data URI ($m-ico-*, $m-deco) */
/* ============================================================
 * 2026 MBTI 결연 신규 캠페인 — "MBTI가 같은 너와 나, 우리는 만날 운명"  [PC/MO 통합 반응형]
 * source : assets/_dev/2026/scss/mbti/mbti.scss  (git 제외 dev 소스)
 * out    : assets/mobile/css/microSite/campaign/mbti.css
 * 페이지 : /{channel}/mbti.gn → views/mobile/microSite/campaign/mbti/index.jsp (MicroSiteEtcController.mbti2026)
 * 기준   : 260825_MBTI_결연 신규 캠페인_3D.psd (1920 캔버스, 콘텐츠 컬럼 640 = 640~1280) — PC/MO 동일 px 스케일
 *          MO 는 같은 PSD 의 "## Mo" 그룹 (720 뷰포트, 컬럼 640) — 아동카드/여정/편지 레이아웃만 다름
 * 단위   : rem (1rem = 10px). PC 1281px 이상 고정 10px / 721~1280 은 1280 기준 fluid / 720 이하 MO 720 기준 fluid
 * 타이포 : PSD 텍스트 레이어 값 그대로 (FontSize × transform scale = 실제 px)
 * ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");
@font-face {
  font-family: "RiaSans";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/RiaSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "UhBeeHyeki";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeeHyeki.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "KOHIBaeumOTF";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/KOHIBaeumOTF.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
/* 1920 스테이지 기준 좌표 → 컬럼(640) 중앙 기준 환산: x-960 */
/* ── 팔레트 (PSD 셰이프/텍스트 fill) ── */
/* PSD 화살표 경로 래스터(흰 알파, _mbti_masks.scss data URI) 를 mask 로 깔고 currentColor 로 채움 — 색은 부모 color 로 제어 */
/* ── 뷰포트 스케일 ── */
html {
  font-size: 10px;
}
@media (max-width: 1280px) {
  html {
    font-size: 0.78125vw;
  }
}
html { /* 태블릿: PC 레이아웃 비율 축소 */ }
@media (max-width: 720px) {
  html {
    font-size: 1.3888888889vw;
  }
}
html { /* MO: 720 기준 fluid */ }

/* 9/9 스킵네비 — 공통 common.css 에 #skipNav 스타일이 없어 링크가 그대로 노출되며 페이지를 11~13px 밀어냄(시안엔 없음).
   접근성은 유지하고 키보드 포커스 때만 보이게. */
#skipNav a {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#skipNav a:focus {
  left: 0;
  width: auto;
  height: auto;
  padding: 1rem 2rem;
  background: #000;
  color: #fff;
  z-index: 9999;
}

/* 9/9 PC 채널 common.css 의 body{min-width:1280px} 해제 — 반응형 단일 페이지라 태블릿/좁은 창에서 가로 스크롤·중앙 밀림 방지 (MO 채널 common.css 는 auto) */
@media (max-width: 1280px) {
  body {
    min-width: 0 !important;
  }
}
/* ── 베이스 ── */
.mb-wrap, .mb-pop, .mb-dim {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  color: #221f1f;
  letter-spacing: 0;
}
.mb-wrap, .mb-wrap *, .mb-pop, .mb-pop *, .mb-dim, .mb-dim * {
  box-sizing: border-box;
}
.mb-wrap *, .mb-pop *, .mb-dim * {
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.mb-wrap img, .mb-pop img, .mb-dim img {
  display: block;
}
.mb-wrap :where(p, h1, h2, h3, h4, ul, li), .mb-pop :where(p, h1, h2, h3, h4, ul, li), .mb-dim :where(p, h1, h2, h3, h4, ul, li) {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mb-wrap, .mb-pop, .mb-dim { /* 공통 CSS 미로드(프리뷰) 대비 자체 리셋 — :where 로 0 특이성 (컴포넌트 padding 우선) */ }
.mb-wrap button, .mb-pop button, .mb-dim button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.mb-wrap .blind, .mb-pop .blind, .mb-dim .blind {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.mb-wrap .ria, .mb-pop .ria, .mb-dim .ria {
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 800;
}

/* 9/14 PC 최대폭 = 디자인 캔버스(1920) 로 가두고 남는 양옆은 흰 여백 (ACL 과 동일 규칙).
   1920 이하에서는 기존 동작(뷰포트 폭 + 1280 이하 fluid) 유지 — 가로 스크롤바가 생기지 않게 */
.mb-wrap {
  overflow: hidden;
  background: #fff;
  position: relative;
}
@media (min-width: 1921px) {
  .mb-wrap {
    width: 192rem;
    margin: 0 auto;
  }
}

body {
  background: #fff;
}

/* 9/9 스와이프 중 텍스트·이미지가 잡혀 드래그가 끊기는 것 방지 (입력 필드는 예외) */
.mb-wrap .swiper, .mb-pop .swiper {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.mb-wrap .swiper img, .mb-pop .swiper img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.mb-inner {
  position: relative;
  width: 64rem;
  margin: 0 auto;
}

.mb-sec {
  position: relative;
}

.pc-only {
  display: block;
}

.mo-only {
  display: none;
}

@media (max-width: 720px) {
  .pc-only {
    display: none !important;
  }
  .mo-only {
    display: block;
  }
}
/* 색 helper */
.mb-wrap .c-blue, .mb-pop .c-blue {
  color: #0066e6;
}
.mb-wrap .c-green, .mb-pop .c-green {
  color: #00db6b;
}
.mb-wrap .c-green2, .mb-pop .c-green2 {
  color: #0ab35c;
}
.mb-wrap .c-green3, .mb-pop .c-green3 {
  color: #08c162;
}
.mb-wrap .c-green4, .mb-pop .c-green4 {
  color: #08b45c;
}
.mb-wrap .c-pink3, .mb-pop .c-pink3 {
  color: #e171fb;
}
.mb-wrap .c-yellow3, .mb-pop .c-yellow3 {
  color: #ffec1e;
}
.mb-wrap .c-cyan, .mb-pop .c-cyan {
  color: #09d4ff;
}
.mb-wrap .c-white, .mb-pop .c-white {
  color: #fff;
}
.mb-wrap .c-ink2, .mb-pop .c-ink2 {
  color: #262424;
}
.mb-wrap .fw-eb, .mb-pop .fw-eb {
  font-weight: 800;
}
.mb-wrap .fw-b, .mb-pop .fw-b {
  font-weight: 700;
}
.mb-wrap .fw-sb, .mb-pop .fw-sb {
  font-weight: 600;
}

/* 공통 화살표(→) — PSD arrow 그룹(막대+꺾쇠, 흰 stroke) 재현. 크기는 부모에서 width/height 지정 */
.mb-arr {
  position: relative;
  display: inline-block;
  width: 4.8rem;
  height: 4.1rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/webp;base64,UklGRpgBAABXRUJQVlA4TIsBAAAvLwAKEIWDtpEkqfiT9n7X11MIIuRa22bI1vdXbdsKdQeOjNg5Q2X23iljRfsG7HBHRmp7H7O7qj5Gbts4iqXte8qUPwQHISSohtBBQFNNg0CYmCAgRaWZcefDorxAQEsi1S0+YZQFAjtFB2bRP47jcT7kdC5JINIzxyEii748VEqsL081oYl15GETKpDNIVuFBCp8KUMHctoI7CPgBJqmBGwiJFDgB3ITAqcu7CPdOTtC/arUvB0ThjYxaFSnRWTxB58agoB8NIaVcIhWBRES0IFCZPgMfxt2xH/UE9BPWeD42AnLuhBCnnu7HIOtR36ID4iAwCTySsWwDgVQAUVk+YM8/jrMeGZQfUC/v6ny2HnGoPG38y8SNRg0uOu7EX2m+dygloD+nQMHsc6xg9NAJAJ2EUxLcoSjAs7ntlh7yC9Kt6XakkDaPyvrMDNaWYf9Hy2tw5PFdZhjP5bWYf8RWd6PlXWYRZZF1BEIrO1rKp0hutcaCKjthFRAyVUsorRvjpOFLm/k9Oo6AAA=") center/100% 100% no-repeat;
  mask: url("data:image/webp;base64,UklGRpgBAABXRUJQVlA4TIsBAAAvLwAKEIWDtpEkqfiT9n7X11MIIuRa22bI1vdXbdsKdQeOjNg5Q2X23iljRfsG7HBHRmp7H7O7qj5Gbts4iqXte8qUPwQHISSohtBBQFNNg0CYmCAgRaWZcefDorxAQEsi1S0+YZQFAjtFB2bRP47jcT7kdC5JINIzxyEii748VEqsL081oYl15GETKpDNIVuFBCp8KUMHctoI7CPgBJqmBGwiJFDgB3ITAqcu7CPdOTtC/arUvB0ThjYxaFSnRWTxB58agoB8NIaVcIhWBRES0IFCZPgMfxt2xH/UE9BPWeD42AnLuhBCnnu7HIOtR36ID4iAwCTySsWwDgVQAUVk+YM8/jrMeGZQfUC/v6ny2HnGoPG38y8SNRg0uOu7EX2m+dygloD+nQMHsc6xg9NAJAJ2EUxLcoSjAs7ntlh7yC9Kt6XakkDaPyvrMDNaWYf9Hy2tw5PFdZhjP5bWYf8RWd6PlXWYRZZF1BEIrO1rKp0hutcaCKjthFRAyVUsorRvjpOFLm/k9Oo6AAA=") center/100% 100% no-repeat;
  /* PSD arrow(사각형 2 + 모양 1, stroke 8 round) 45x39 + 라운드 캡 */
}
.mb-arr.sm {
  display: inline-block;
  width: 3.9rem;
  height: 3.3rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/webp;base64,UklGRmoBAABXRUJQVlA4TF0BAAAvJgAIEDUwbNs2Uvdfmuh3d7kJnAiotm0rW47c/8chWXbLGh0y2V0ewB2iNpdGJVHdM5E3cEt835XNwG0jRdtk6RgfkW8hFA/6ISFJ6C8o1SB3EKn325Z/8Kp/EFMsNPpA4KDVVSFxzbEQ3qfqIjTOBBaab19FaDQAJ1xI1IaGbtQUuw/401+DeaANPUIJZV4ibZBx6A23kKi9MDr88gthkw0mg/Q6d2rpJRbbqgnPwPciYFX2hsYm1MK1Bylk9ZWx3Vx/iHAjal2DaEc7cF0LG2uDGBwFfkDEfgl/F/GustYUF9tjetBClTmLed3QqkknrHDqSDbO+S19ikIvvHBo/3heB8xrpA5S7w+24iUlhXdJtS/gujvLwsfdW/54Q+xWJE8aKYkV3xoq/SU6jkF8Wv22PHEBgQVD5S/aCojYtUWtn+DIcQfdtst/m+BBjE6LmveBytzr1WHyetQAAA==") center/100% 100% no-repeat;
  mask: url("data:image/webp;base64,UklGRmoBAABXRUJQVlA4TF0BAAAvJgAIEDUwbNs2Uvdfmuh3d7kJnAiotm0rW47c/8chWXbLGh0y2V0ewB2iNpdGJVHdM5E3cEt835XNwG0jRdtk6RgfkW8hFA/6ISFJ6C8o1SB3EKn325Z/8Kp/EFMsNPpA4KDVVSFxzbEQ3qfqIjTOBBaab19FaDQAJ1xI1IaGbtQUuw/401+DeaANPUIJZV4ibZBx6A23kKi9MDr88gthkw0mg/Q6d2rpJRbbqgnPwPciYFX2hsYm1MK1Bylk9ZWx3Vx/iHAjal2DaEc7cF0LG2uDGBwFfkDEfgl/F/GustYUF9tjetBClTmLed3QqkknrHDqSDbO+S19ikIvvHBo/3heB8xrpA5S7w+24iUlhXdJtS/gujvLwsfdW/54Q+xWJE8aKYkV3xoq/SU6jkF8Wv22PHEBgQVD5S/aCojYtUWtn+DIcQfdtst/m+BBjE6LmveBytzr1WHyetQAAA==") center/100% 100% no-repeat;
}
.mb-arr { /* Btn 1:1 arrow 37x31, stroke 6 */ }

/* 공통 꺾쇠 (슬라이드 prev/next) — .mb-wrap button{color:inherit} 보다 우선하도록 부모 지정 */
.mb-wrap .mb-chev, .mb-pop .mb-chev {
  position: absolute;
  z-index: 5;
  color: #ddab17;
  display: inline-block;
  width: 3.4rem;
  height: 5.3rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/webp;base64,UklGRkgBAABXRUJQVlA4TDwBAAAvIQANEG9hIG2b+De97Tcx//OvuG0kNXkDe0y61yVSBvBoIADhwsgQCGCgYEHYePioEA4egEADUFAAGB2AAUzgAdu23bSRLJcZh5thU3L//wMDkjLwHNF/Rm7bOEqk7Xua4j9Q2857Jlv7ziu2yfvjhsgA0+UNSM878nqvQFMDcU9e66apC4CEz4Xy5YTukdF2QaWE6dYU2GB66ReykgndIcGGc6tvZCNMh4BiZl2ZLz0tfgX83+F/BUszBR8HYjNx65TUfRJumrXpafk6RJ02upk8/2qafuGk+MUxPeShQ32Qy3l6RDP04fvMqcx9m4KzeGbZqywpnMhj8GS3GsM0wvVvstboJTGC8aR4u5Y8KDwEFMGpYt+Sr1V7n6Ru/xRU7sHDavfxQU1ZkDva8qSjPZMmI+Taz2XjCPlK") center/100% 100% no-repeat;
  mask: url("data:image/webp;base64,UklGRkgBAABXRUJQVlA4TDwBAAAvIQANEG9hIG2b+De97Tcx//OvuG0kNXkDe0y61yVSBvBoIADhwsgQCGCgYEHYePioEA4egEADUFAAGB2AAUzgAdu23bSRLJcZh5thU3L//wMDkjLwHNF/Rm7bOEqk7Xua4j9Q2857Jlv7ziu2yfvjhsgA0+UNSM878nqvQFMDcU9e66apC4CEz4Xy5YTukdF2QaWE6dYU2GB66ReykgndIcGGc6tvZCNMh4BiZl2ZLz0tfgX83+F/BUszBR8HYjNx65TUfRJumrXpafk6RJ02upk8/2qafuGk+MUxPeShQ32Qy3l6RDP04fvMqcx9m4KzeGbZqywpnMhj8GS3GsM0wvVvstboJTGC8aR4u5Y8KDwEFMGpYt+Sr1V7n6Ru/xRU7sHDavfxQU1ZkDva8qSjPZMmI+Taz2XjCPlK") center/100% 100% no-repeat;
  /* PSD 아동사진/arrow/Right 33x51, stroke 10 #ddab17 */
}
.mb-wrap .mb-chev.prev, .mb-pop .mb-chev.prev {
  transform: scaleX(-1);
}
.mb-wrap .mb-chev.swiper-button-disabled, .mb-pop .mb-chev.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* 모션 초기 은닉 — 첫 페인트부터 숨기고 JS 가 gsap.set 직후 해제 (gsap 미로드 시 JS 가 바로 해제) */
.mt-hide {
  visibility: hidden;
}

/* 섹션 타이틀 줄 단위 크롭 리빌 (35letter 표준 tl-line, CLAUDE.md §6) — JS 가 .tl-line/.tl-in 주입 */
.tl-line {
  display: block;
  overflow: hidden;
}

.tl-line.is-open {
  overflow: visible;
}

.tl-in {
  display: inline-block;
}

.tl-em, .tl-ch {
  display: inline-block;
} /* 리빌 후 글자 하나씩 커지는 강조 (JS 가 .tl-ch 주입) */
/* ── 스와이퍼 슬라이드 콘텐츠 진입/이탈 (9/9) ──
 * JS(mbti.js swipeReveal)는 슬라이드에 .is-in 만 토글하고, 전환은 전부 여기 transition 이 담당
 * → 들어올 때뿐 아니라 나갈 때도 같은 곡선으로 되감긴다. 모든 슬라이드(아동카드·여정·편지) 공통. */
.mb-wrap .swiper-slide {
  /* 대기 상태 — JS(swSync)가 방향 클래스를 붙인다. 이동 없이 페이드만 */
  transition: opacity 0.4s ease;
}
.mb-wrap .swiper-slide.is-out-l, .mb-wrap .swiper-slide.is-out-r {
  opacity: 0;
}
.mb-wrap .swiper-slide {
  /* 여정 카드 — 판(격자·헤더)은 고정, 콘텐츠만 */
}
.mb-wrap .swiper-slide .jcard .pic {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.4s ease 0s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}
.mb-wrap .swiper-slide .jcard .txt {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.4s ease 0s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}
.mb-wrap .swiper-slide {
  /* 편지 — 종이·스트라이프·탭·우표는 고정, 안의 글·일러·발신자만 진입 */
}
.mb-wrap .swiper-slide .lcard .txt {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.4s ease 0s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}
.mb-wrap .swiper-slide .lcard .illu {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.4s ease 0s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}
.mb-wrap .swiper-slide .lcard .tab .who {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.4s ease 0s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}
.mb-wrap .swiper-slide .lcard .tab .who {
  transform: translateX(-6rem);
}
.mb-wrap .swiper-slide { /* 후원자 이름은 x(-60 -> 0) 로 노출 */
  /* 아동 카드 — 문구·설명·버튼·MBTI 뱃지는 항상 노출, 도착 시 사진만 봉투 플랩 뒤에서 올라옴 */
}
.mb-wrap .swiper-slide .mb-child .photo {
  transform: translateY(19rem);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.mb-wrap .swiper-slide.is-in .jcard .pic, .mb-wrap .swiper-slide.is-in .jcard .txt {
  opacity: 1;
  transform: none;
}
.mb-wrap .swiper-slide.is-in .jcard .txt {
  transition-delay: 0.12s;
}
.mb-wrap .swiper-slide.is-in .lcard .txt, .mb-wrap .swiper-slide.is-in .lcard .illu, .mb-wrap .swiper-slide.is-in .lcard .tab .who {
  opacity: 1;
  transform: none;
}
.mb-wrap .swiper-slide.is-in .lcard .txt {
  transition-delay: 0.08s;
}
.mb-wrap .swiper-slide.is-in .lcard .illu {
  transition-delay: 0.16s;
}
.mb-wrap .swiper-slide.is-in .lcard .tab .who {
  transition-delay: 0.24s;
}
.mb-wrap .swiper-slide.is-in .mb-child .photo {
  transform: none;
}

/* bang 프리셋 (출처 assets/mobile/css/mypage/index.css) — 51조각 중 20조각만 사용 + blur */
/* emitter scale(.26) 기준 실제 약 7px 블러 */
@keyframes bang {
  to {
    box-shadow: 214px -120.6666666667px 2.8rem #e6ff00, 105px 68.3333333333px 2.8rem #ff003c, -10px -16.6666666667px 2.8rem #8c00ff, 139px -329.6666666667px 2.8rem #ff0077, 22px -322.6666666667px 2.8rem #ff006a, -35px -283.6666666667px 2.8rem #5eff00, -71px -397.6666666667px 2.8rem #4800ff, 44px 2.3333333333px 2.8rem #ff000d, 119px -226.6666666667px 2.8rem #ff6a00, 223px 26.3333333333px 2.8rem #ff3300, 172px -314.6666666667px 2.8rem #aa00ff, -199px -324.6666666667px 2.8rem #00ffb3, -57px -376.6666666667px 2.8rem #99ff00, -48px 77.3333333333px 2.8rem #0011ff, 115px -35.6666666667px 2.8rem #00ffd5, -245px -9.6666666667px 2.8rem #ff8000, 205px -68.6666666667px 2.8rem #00ffd5, -63px -347.6666666667px 2.8rem #ff0009, 57px -244.6666666667px 2.8rem #66ff00, 197px 9.3333333333px 2.8rem #ffd500;
  }
}
/* 팝업 "What's your MBTI?" — 돔 곡선을 따라 좌우 왕복 (9/10) */
/* 돔 원(중심 320,-37 / R369) 위를 좌측 끝(팝업 밖) -> 우측 끝(팝업 밖) 으로 편도 통과, 무한 반복.
   .whats 중심은 돔 중심에서 381 거리 → 회전각 +126.4deg(최좌 -61,-37) ~ -53.6deg(최우 701,-37), 설계 위치가 0deg.
   0~12% / 88~100% 구간은 팝업 밖(overflow hidden 으로 안 보임)이라 빠르게 지나가게 나눠 둠 */
@keyframes mb-whats-slide {
  0% {
    transform: rotate(126.4deg);
  }
  12% {
    transform: rotate(93.5deg);
  }
  88% {
    transform: rotate(-20.7deg);
  }
  100% {
    transform: rotate(-53.6deg);
  }
}
/* 편지 본문 하트 idle (pub_debug 프리셋 원본 그대로, 9/10) */
@keyframes sbStarPopSoft {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.85);
  }
  65% {
    transform: scale(1.15);
  }
  70% {
    transform: scale(0.97);
  }
  72%, 100% {
    transform: scale(1);
  }
}
@keyframes str-star-pulse {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.8);
  }
  65% {
    transform: scale(1.06);
  }
  70% {
    transform: scale(0.98);
  }
  72%, 100% {
    transform: scale(1);
  }
}
/* 아동카드 하트 : 켜질 때 눌렸다 튕김 (9/10) */
@keyframes mb-heart-on {
  0% {
    transform: scale(0.55);
  }
  32% {
    transform: scale(0.86);
  }
  58% {
    transform: scale(1.2);
  }
  78% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}
/* 하트 좋아요 파티클 — 2026 여름호 회지(2608_magazine) `.like-bar .heart` 이식 (9/10).
 * 원본 thebabydino(Ana Tudor) 하트 좋아요 : 버블 링(::before) + 스파클 14점(::after) 이
 * 하트 팝과 같은 1s 타임라인을 공유한다. 스파클 좌표는 회지 SCSS 의 sm26-sparkles($k) 를
 * 같은 파라미터(버블 반경 36 · 점 6 · 7그룹x2 · hue 360/7 간격)로 전개한 값.
 * 하트가 PC 전용(MO 는 .heart display:none)이라 회지 원본과 같은 px 로 둔다. */
@keyframes mb-heart-bubble {
  15% {
    transform: scale(1);
    border-color: #ddab17;
    border-width: 36px;
  }
  30%, 100% {
    transform: scale(1);
    border-color: #ddab17;
    border-width: 0;
  }
}
@keyframes mb-heart-sparkles {
  0%, 20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    box-shadow: 5.2px -39px 0 0 hsl(0, 100%, 75%), -5.2px -33px 0 0 hsl(51.43, 100%, 75%), 33.73px -20.25px 0 0 hsl(51.43, 100%, 75%), 22.56px -24.64px 0 0 hsl(102.86, 100%, 75%), 36.87px 13.74px 0 0 hsl(102.86, 100%, 75%), 33.33px 2.28px 0 0 hsl(154.29, 100%, 75%), 12.24px 37.39px 0 0 hsl(154.29, 100%, 75%), 19px 27.48px 0 0 hsl(205.71, 100%, 75%), -21.6px 32.88px 0 0 hsl(205.71, 100%, 75%), -9.64px 31.99px 0 0 hsl(257.14, 100%, 75%), -39.18px 3.61px 0 0 hsl(257.14, 100%, 75%), -31.02px 12.41px 0 0 hsl(308.57, 100%, 75%), -27.25px -28.38px 0 0 hsl(308.57, 100%, 75%), -29.04px -16.51px 0 0 hsl(0, 100%, 75%);
  }
}
@keyframes mb-bang-fade {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
html.mb-still .mb-pop .whats {
  animation: none;
}
html.mb-still .mb-sec4__letters .lcard .txt .emo-heart {
  animation: none;
}
html.mb-still .mb-sec3 .mb-child .photo .heart {
  animation: none;
}
html.mb-still .mb-sec3 .mb-child.is-bang .photo .heart::before, html.mb-still .mb-sec3 .mb-child.is-bang .photo .heart::after {
  animation: none;
}

/* SEC1 배경 데코: 블롭(shape) + 캐릭터(char) 분리 — 9/9. 캐릭터는 마스크(블롭 실루엣 ∪ 위쪽 사각) 안에서 y 100% → 0 로 올라옴
 * 인자: 그룹 x,t,w,h / shape 오프셋·크기 sx,sy,sw,sh / char 오프셋·폭 cx,cy,cw / 번호 n (좌표 = PSD Back illust 그룹 bbox, 0907 PNG 와 동일 컷 확인) */
/* idle 플로트(-6px) 가 마스크 상단에 잘리지 않게 마스크 박스를 위로 확장 */
/* ============================================================
 * SEC1 — 표지 (0~1282)
 * ============================================================ */
/* ── PC 표지 세로 반응형 (2026-09-21) ──────────────────────────────
 * PC 는 rem 이 10px 고정이라 표지가 화면 높이와 상관없이 항상 1282px →
 * 낮은 창에서는 카피(top 952, 2줄 끝 1048)가 첫 화면 밖으로 잘린다.
 * 해결 = 표지 스테이지(.mb-sec1__stage)를 화면 높이에 맞춰 통째로 축소(--s1, JSP 인라인 스크립트).
 *   예) 화면 1200 → --s1 1(시안 그대로) / 1000 → 0.94 / 800 → 0.75
 * 안쪽 좌표는 시안 원본 그대로 두고, 아래 $s1-up 은 추가로 더 깎고 싶을 때만 쓴다(기본 0).
 * MO 는 폭 기준 fluid 라 원래 다 들어오므로 축소하지 않는다.
 * ────────────────────────────────────────────────────────────── */
/* 추가 고정 압축(px) — 보통 0 */
/* 타이틀 묶음 (eyebrow·라인·우리는·스트립·만날 운명) */
/* 카드 (hero) */
/* 카피 */
/* 배경 캐릭터 6종·별 y 비율 */
.mb-sec1 {
  height: calc(118.1rem * var(--s1, 1) + 10.1rem);
  background: #fff;
  overflow: hidden; /* 9/9 하단 바 슬라이드업 모션이 sec2 로 새지 않게 / 9/21 축소되는 스테이지(1181) + 원래 크기 유지하는 바(101) */
  /* 스테이지 = 시안 좌표계(바 위까지 1181). 폭을 1/s 로 늘린 뒤 s 로 줄여 전폭 요소(스트립)가 화면을 꽉 채우게 한다.
     9/21 하단 바는 스테이지 밖 — 표지가 축소돼도 바는 시안 크기 그대로 */
}
.mb-sec1__stage {
  position: relative;
  height: 118.1rem;
  width: calc(100% / var(--s1, 1));
  transform: scale(var(--s1, 1));
  transform-origin: 0 0;
}
.mb-sec1 .mb-inner {
  height: 100%;
}
.mb-sec1 {
  /* 미니 헤더 */
}
.mb-sec1 .mb-top {
  position: absolute;
  left: -2.2rem;
  top: 2.3rem;
  width: 68.4rem;
  /* PSD top 그룹 618~1303 = 컬럼 밖 22px */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mb-sec1 .mb-top__logo img {
  width: 17.3rem;
}
.mb-sec1 .mb-top__label {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: #685a55;
  letter-spacing: -0.025em;
  line-height: 1;
}
.mb-sec1 {
  /* 배경 일러 6종 + 별 (1920 스테이지 좌표) */
}
.mb-sec1 .mb-deco {
  pointer-events: none;
  z-index: 1;
}
.mb-sec1 .mb-deco img {
  width: 100%;
}
.mb-sec1 .mb-inner {
  position: relative;
  z-index: 1;
}
.mb-sec1 {
  /* 9/9 분리 구조: div.mb-deco > img.shape + span.mask > img.char (구 통컷 sec1_decoNN.webp 는 images 폴더에 그대로 둠) */
}
.mb-sec1 .mb-deco.is-split .shape, .mb-sec1 .mb-deco.is-split .char {
  position: absolute;
}
.mb-sec1 .mb-deco.is-split .shape {
  z-index: 1;
  transform-origin: 50% 60%;
}
.mb-sec1 .mb-deco.is-split .mask {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 2;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.mb-sec1 .mb-deco01 {
  position: absolute;
  left: calc(50% + -83.4rem);
  top: 76.2rem;
  width: 24.3rem;
  height: 15.3rem;
}
.mb-sec1 .mb-deco01 .shape {
  left: 0rem;
  top: 0.5rem;
  width: 24.3rem;
}
.mb-sec1 .mb-deco01 .mask {
  top: -4rem;
  height: calc(100% + 4rem);
  -webkit-mask-image: url("data:image/webp;base64,UklGRlgGAABXRUJQVlA4TEsGAAAv8sAkEBenoG0bJvRHu+0eg/mff4UAAqCgUeS2bYOcki66zwBqwUdBm6LdlOfMGkRQp40kOCx64JGqR8hOoY8xGx46+GX9/NhIACFbABhDkjI7c7Zt27Zt27Zt27Zt27ZvdndmN/mVw1SnU6nXiP5PAFg7f+P+8zYfv3r30eNb53Yv6FsxCG6bvdXck18p5l+7O6RxlbTNFtwh4+9HpXOQbD33h8nb5/UcI0OPo1FiON4hAo22xhPTObGlzVOweIFsIXXlnviMGPf6V77mY1efevab/pr85uzS7oX0VGtbhFjHlwAI1Ry1/yOZvDQ8k4ZCnS8T+yMD9v4g89+npdVO2iHPSd6HNVWTYexHEjnSSS8ZJn4l9siEkrsoJd2YzyT473IaCQ14T9yRF92I00f7ByR+T21UPUPM0Rf3dJF3A9lx2rCpi1dv2rF3z65tG5bOHtenZZW8AVulGPOLJERv8C9Gw3f2TW9XJGCdxvdJRlP4N8+/HRxZJWiR3NuJN3pgEP/g/Hl9m7R2CPT/TlIj+fH3xnoB+cqcJdbIB8nHj4elly00PoE4I5Ilv83KLliFayQqykH0Y1waoYITI6TYV21EKnmROKMYyIdoZy55BoVJvR8bC5PjEHFGW1HylIAkTd8TZySLb08pRmgucUay+8mMQhQ8TyKjUHQ2nQitvpKuT6TyX3AOCY1y0Sbf5TxJCh/qsxqvSePRmr7qnUA6v5/aP6GlpPZ5vsl2ihgjO5QuUswnpR6T5nf5o/E3khyZoJ+ooh/6Rokv+sGGG/gFZpH6I3m4pdxCDjiCWaZTJDza4Qqv3DfIDYtyKvaE+KJo6L++jCq8JyUKsJ1PjW/kjG/Y1P9JDpmFSfN4csnaPFolkvhold4s2kTILcdxaBchx1zIoHWU2KKWNnjXLJHYIml5s2cNwuSe272q+YssiNbZ5lHZr2RBJOuu8KbQG1IkCjLHk5yPyILIR9IxXqS/So7ayYPgYbIhskFRqnqwkjSJJGo2c2OJLdoASdTXYLwDuet+Y5V+O8xkU7leElf0E1qrvqGU50iTKM3vVIZWEVu0AZK0R8FsL2KLpPGhZiqG+eg8v5HMT0iTKM95MLqb3HaYkb5kQbRZYg4TZcI2sPoOMJjqJnFFHyEfFKmhiTnkuHcDBmokyYeW6wmxp3lAjvs6pYF55LojIPaKSVxQbW/SxBZ3idSIUvWD2AeT6z4OxZbju/O0g9hXkOuegNjLJ8mGCoiUNnCCXHcexN6AXPdxGgPnnKcexN6cXHc5GLwgGOrgUXoDdUiDKFmkChg8qAEkyUeDwZLkuCcCJuZLhVp4mQMMpvoslRYTqoLJziQyckLh+oDR/TJxRpJ9ERjNmGA74Q8HzXQll72VEcxulgc5oXQv8oHhd/Io8nMpMFyGeKJIiNL9qgGmezJRebg+GF8kCqoisRmYP8UDeSCpMrEVePiEh8Ljm4OX8VKgMsKNwcuM5KTf64KnWZzkXQXwNrt10AaPi4DHqaxjw3M5wPMvzrErNXh/1VeICpkdAIbLOKA5hYY7A8suHEwjM7TDy8rAM/0vfyCSRo/nAK7rfIHEGy2RPCUO2BZN9ANvJEt+aAqc58qGZMtjuYF1inOMEPnZMnFEAJjnuecZ/kutN8sD/+znvdJu0syU4MfQlKhHUQYYE1rkdnXwa7G1UWNvN3bLPZCBvRMnpQAf5x50OjGmX2eXdSsMABC6yAttcroM+D1V9YFzdxw/e+X86UNr5wxoUjQO/p3/EwP8D4u+7w6iV/rgnYWjSzKB8CVueYdomSOlQf5UcxI8+bGnR60Eq9xpDnbMt+ibod+nptYKAUAvi7zsFQRrpmyx6lby/327sKJ/1RTwz6W2+DgyNVg2Q+W2g8dOnz5pdO+WVbNCjKG9Vvg8Jh2oMtVx+d6PSQ/aTHNQuKcDUoNCQ2skO98xCEodGRUqsr0GKLb2a4leTswNus26XprInpZB0G/Tp5JcH5oDdJxy2BchHk0tBYrOPOWT/25PrQjaTjvogZ8Sjg8tDjqvteanP24tapkOFJ+m5ZpPvCIXF3bICfqPqzxs/1cWkZtrB9dKAw5ZqO3UvbfDppJfnV4/qV2pEDhpIG/Vln0mzFm2acfufQd2b1m3dMbIPq2q5U8BlgUA"), linear-gradient(#000, #000);
  mask-image: url("data:image/webp;base64,UklGRlgGAABXRUJQVlA4TEsGAAAv8sAkEBenoG0bJvRHu+0eg/mff4UAAqCgUeS2bYOcki66zwBqwUdBm6LdlOfMGkRQp40kOCx64JGqR8hOoY8xGx46+GX9/NhIACFbABhDkjI7c7Zt27Zt27Zt27Zt27ZvdndmN/mVw1SnU6nXiP5PAFg7f+P+8zYfv3r30eNb53Yv6FsxCG6bvdXck18p5l+7O6RxlbTNFtwh4+9HpXOQbD33h8nb5/UcI0OPo1FiON4hAo22xhPTObGlzVOweIFsIXXlnviMGPf6V77mY1efevab/pr85uzS7oX0VGtbhFjHlwAI1Ry1/yOZvDQ8k4ZCnS8T+yMD9v4g89+npdVO2iHPSd6HNVWTYexHEjnSSS8ZJn4l9siEkrsoJd2YzyT473IaCQ14T9yRF92I00f7ByR+T21UPUPM0Rf3dJF3A9lx2rCpi1dv2rF3z65tG5bOHtenZZW8AVulGPOLJERv8C9Gw3f2TW9XJGCdxvdJRlP4N8+/HRxZJWiR3NuJN3pgEP/g/Hl9m7R2CPT/TlIj+fH3xnoB+cqcJdbIB8nHj4elly00PoE4I5Ilv83KLliFayQqykH0Y1waoYITI6TYV21EKnmROKMYyIdoZy55BoVJvR8bC5PjEHFGW1HylIAkTd8TZySLb08pRmgucUay+8mMQhQ8TyKjUHQ2nQitvpKuT6TyX3AOCY1y0Sbf5TxJCh/qsxqvSePRmr7qnUA6v5/aP6GlpPZ5vsl2ihgjO5QuUswnpR6T5nf5o/E3khyZoJ+ooh/6Rokv+sGGG/gFZpH6I3m4pdxCDjiCWaZTJDza4Qqv3DfIDYtyKvaE+KJo6L++jCq8JyUKsJ1PjW/kjG/Y1P9JDpmFSfN4csnaPFolkvhold4s2kTILcdxaBchx1zIoHWU2KKWNnjXLJHYIml5s2cNwuSe272q+YssiNbZ5lHZr2RBJOuu8KbQG1IkCjLHk5yPyILIR9IxXqS/So7ayYPgYbIhskFRqnqwkjSJJGo2c2OJLdoASdTXYLwDuet+Y5V+O8xkU7leElf0E1qrvqGU50iTKM3vVIZWEVu0AZK0R8FsL2KLpPGhZiqG+eg8v5HMT0iTKM95MLqb3HaYkb5kQbRZYg4TZcI2sPoOMJjqJnFFHyEfFKmhiTnkuHcDBmokyYeW6wmxp3lAjvs6pYF55LojIPaKSVxQbW/SxBZ3idSIUvWD2AeT6z4OxZbju/O0g9hXkOuegNjLJ8mGCoiUNnCCXHcexN6AXPdxGgPnnKcexN6cXHc5GLwgGOrgUXoDdUiDKFmkChg8qAEkyUeDwZLkuCcCJuZLhVp4mQMMpvoslRYTqoLJziQyckLh+oDR/TJxRpJ9ERjNmGA74Q8HzXQll72VEcxulgc5oXQv8oHhd/Io8nMpMFyGeKJIiNL9qgGmezJRebg+GF8kCqoisRmYP8UDeSCpMrEVePiEh8Ljm4OX8VKgMsKNwcuM5KTf64KnWZzkXQXwNrt10AaPi4DHqaxjw3M5wPMvzrErNXh/1VeICpkdAIbLOKA5hYY7A8suHEwjM7TDy8rAM/0vfyCSRo/nAK7rfIHEGy2RPCUO2BZN9ANvJEt+aAqc58qGZMtjuYF1inOMEPnZMnFEAJjnuecZ/kutN8sD/+znvdJu0syU4MfQlKhHUQYYE1rkdnXwa7G1UWNvN3bLPZCBvRMnpQAf5x50OjGmX2eXdSsMABC6yAttcroM+D1V9YFzdxw/e+X86UNr5wxoUjQO/p3/EwP8D4u+7w6iV/rgnYWjSzKB8CVueYdomSOlQf5UcxI8+bGnR60Eq9xpDnbMt+ibod+nptYKAUAvi7zsFQRrpmyx6lby/327sKJ/1RTwz6W2+DgyNVg2Q+W2g8dOnz5pdO+WVbNCjKG9Vvg8Jh2oMtVx+d6PSQ/aTHNQuKcDUoNCQ2skO98xCEodGRUqsr0GKLb2a4leTswNus26XprInpZB0G/Tp5JcH5oDdJxy2BchHk0tBYrOPOWT/25PrQjaTjvogZ8Sjg8tDjqvteanP24tapkOFJ+m5ZpPvCIXF3bICfqPqzxs/1cWkZtrB9dKAw5ZqO3UvbfDppJfnV4/qV2pEDhpIG/Vln0mzFm2acfufQd2b1m3dMbIPq2q5U8BlgUA"), linear-gradient(#000, #000);
  -webkit-mask-position: 0rem 4.5rem, 0 0;
  mask-position: 0rem 4.5rem, 0 0;
  -webkit-mask-size: 24.3rem 14.8rem, 100% 11.9rem;
  mask-size: 24.3rem 14.8rem, 100% 11.9rem;
}
.mb-sec1 .mb-deco01 .char {
  left: 4rem;
  top: 4rem;
  width: 15.1rem;
}
.mb-sec1 { /* Mike woman / pink */ }
.mb-sec1 .mb-deco02 {
  position: absolute;
  left: calc(50% + -79.1rem);
  top: 9.9rem;
  width: 17.4rem;
  height: 18.1rem;
}
.mb-sec1 .mb-deco02 .shape {
  left: 0rem;
  top: 0.5rem;
  width: 17.4rem;
}
.mb-sec1 .mb-deco02 .mask {
  top: -4rem;
  height: calc(100% + 4rem);
  -webkit-mask-image: url("data:image/webp;base64,UklGRjQFAABXRUJQVlA4TCcFAAAvrcArEFenoG0bJvw5DO1puyGY/5lRCCAAChqCSRp2wNzOAGrBh0CiYAMOwkYpr6DAWmxWKJUY9XDDkFnrR2DQtm3JsG3NhWPbtm3btm3b9jmXx7Zt27aNxfiN5cyIeI7o/wSA93S58uQrkNkF9RZpP2nD5ZdeCv/1wf5Fg2umUEqBgRvfUlx95+bXd2ujwOiLlNAva1u79eBscYAMfD2jgA6SDn5IhgbXl5LP1fMJmbythHC1bpPh/gXpBEu/kix810mslq/JznUZRHLNIWtf1BIo+wmy2DdAnNKvyO5lSWSp/oVs351Mkqa/yP5DKeVo4iMOT6WUovJP4nGXS4YiH4jL5SKkf0R8jpZgBzEaqMnfcGL1ZRbuKvl5of3MuW8Qt915G0vsfsjEWcHf/NB/nG0hjsvzVZ5Y3sfXHp6oJifOPDW6jZ+75N+Na5fPm09Mn+AiV4d5p3+ThGU4KDP5Com53LosYx6SpD/T2VVlrZeEHWhThf0k7xF7im0lif0ZLUk2xUsy97Sj1j2SerMNrqlBEvu1BTmOk+T5jav4hkTvalrTnyT7AsN6+Un4nWb1IvFvG9UpKJ/HaVAzPykwizklvpMGCxmT4QGpsLwpjv2kw7qmDCElNjKk+G8t1DbDeYG0WNWM/qTGCkZk+KCHAkYsIj0mMyGnRw/vYeJC0uOTtAZk/a0I+rYgf8ImkC4Dq/MnxvFEGUSe+RkT0YgU+qlHAtZrhGhv7ngl/a4T+tYhTk1IrfNccVmmFzqROR73FUN388SWhVT7vGhMrXVD70vGMlM59DJvDDu0Q/cyR3dHPXQuWTQur35oaTS5SMNdoiitop/FItVREZ1xRGirIxoUoaOSvuUK10FJtCFcey1RuTBt1LQ3TC01UfWQYnraFpJJT4G8ABx/1ESzAOCqnj64AazVEzUCMF5RqwA0VtRHN5DaryeqCuC8osYCmKWo/QCqKOq7E3A81xMVBDBfUS0AlFfUaAA4q6e/QrroaVdIkjdqOheCoWp6HCbZcy19CIO+WvoYznVLSZ/DoaqSvkTAEh09j5T2hYquRULtgIaORYExGtoYjWOXgqZHg/Q39dMjKuR8qp4q0aHoB+UE08SAsu90cw0xF3mmmqWxIfcdzXSNA9Lt0ksgczzgGB/UyknEucFzpQyPF9IsU0kwX9yAurcUsh+JdPV+qY62CQFSjHyhi9dJEgS4O1/SxAgYWF8RH1KZ0EMR42DiOD28TGXEYj10hpH/qOEUzFyrBU9JQzZrYTgM3a6EYw5T1ujgXW6YulQF3uowdqYKesPcURqYBoPbK2A+TC4r31IYnVq8GTD8pWyBgTB9i2hfWsL44ZJdLADzqwi2KCksTPpdqjs1YOdGmTyTksLSjhL5V+SGtWk84gRWF4LNW4V5NSU37K4vyY8t7dyw/q4UD1Y0SwYOh/D38dLWyU0zgcvU75n6v2Dpao3qVildOA2YHcaTNx+4Tv6SpcXgux9HP3My5jzP0HBwXtrPzmUXa5jFTaACeE9+nZkp4L7Id1aOOtlDJ05eZ4OA8/jw1ISEjg1cBNtBxmTHmRgAKdOcZmE85Ex5hIEhkDT5Ltv83SCrc7ZdX5pC3G5/LLpSAAKXuWnN38khcrJ5drxqA7GrX7VgaVoI7hzw0bAz1SB8+kmfDbrWHApMM+aFIYdbOaBDV4udgYR9XFIcmszae+fvBLxf2dANdaasN3H/lzg83TS4lANqzVazz9TF6w4cPXxw3+r5Y7pXSAWuAQA="), linear-gradient(#000, #000);
  mask-image: url("data:image/webp;base64,UklGRjQFAABXRUJQVlA4TCcFAAAvrcArEFenoG0bJvw5DO1puyGY/5lRCCAAChqCSRp2wNzOAGrBh0CiYAMOwkYpr6DAWmxWKJUY9XDDkFnrR2DQtm3JsG3NhWPbtm3btm3b9jmXx7Zt27aNxfiN5cyIeI7o/wSA93S58uQrkNkF9RZpP2nD5ZdeCv/1wf5Fg2umUEqBgRvfUlx95+bXd2ujwOiLlNAva1u79eBscYAMfD2jgA6SDn5IhgbXl5LP1fMJmbythHC1bpPh/gXpBEu/kix810mslq/JznUZRHLNIWtf1BIo+wmy2DdAnNKvyO5lSWSp/oVs351Mkqa/yP5DKeVo4iMOT6WUovJP4nGXS4YiH4jL5SKkf0R8jpZgBzEaqMnfcGL1ZRbuKvl5of3MuW8Qt915G0vsfsjEWcHf/NB/nG0hjsvzVZ5Y3sfXHp6oJifOPDW6jZ+75N+Na5fPm09Mn+AiV4d5p3+ThGU4KDP5Com53LosYx6SpD/T2VVlrZeEHWhThf0k7xF7im0lif0ZLUk2xUsy97Sj1j2SerMNrqlBEvu1BTmOk+T5jav4hkTvalrTnyT7AsN6+Un4nWb1IvFvG9UpKJ/HaVAzPykwizklvpMGCxmT4QGpsLwpjv2kw7qmDCElNjKk+G8t1DbDeYG0WNWM/qTGCkZk+KCHAkYsIj0mMyGnRw/vYeJC0uOTtAZk/a0I+rYgf8ImkC4Dq/MnxvFEGUSe+RkT0YgU+qlHAtZrhGhv7ngl/a4T+tYhTk1IrfNccVmmFzqROR73FUN388SWhVT7vGhMrXVD70vGMlM59DJvDDu0Q/cyR3dHPXQuWTQur35oaTS5SMNdoiitop/FItVREZ1xRGirIxoUoaOSvuUK10FJtCFcey1RuTBt1LQ3TC01UfWQYnraFpJJT4G8ABx/1ESzAOCqnj64AazVEzUCMF5RqwA0VtRHN5DaryeqCuC8osYCmKWo/QCqKOq7E3A81xMVBDBfUS0AlFfUaAA4q6e/QrroaVdIkjdqOheCoWp6HCbZcy19CIO+WvoYznVLSZ/DoaqSvkTAEh09j5T2hYquRULtgIaORYExGtoYjWOXgqZHg/Q39dMjKuR8qp4q0aHoB+UE08SAsu90cw0xF3mmmqWxIfcdzXSNA9Lt0ksgczzgGB/UyknEucFzpQyPF9IsU0kwX9yAurcUsh+JdPV+qY62CQFSjHyhi9dJEgS4O1/SxAgYWF8RH1KZ0EMR42DiOD28TGXEYj10hpH/qOEUzFyrBU9JQzZrYTgM3a6EYw5T1ujgXW6YulQF3uowdqYKesPcURqYBoPbK2A+TC4r31IYnVq8GTD8pWyBgTB9i2hfWsL44ZJdLADzqwi2KCksTPpdqjs1YOdGmTyTksLSjhL5V+SGtWk84gRWF4LNW4V5NSU37K4vyY8t7dyw/q4UD1Y0SwYOh/D38dLWyU0zgcvU75n6v2Dpao3qVildOA2YHcaTNx+4Tv6SpcXgux9HP3My5jzP0HBwXtrPzmUXa5jFTaACeE9+nZkp4L7Id1aOOtlDJ05eZ4OA8/jw1ISEjg1cBNtBxmTHmRgAKdOcZmE85Ex5hIEhkDT5Ltv83SCrc7ZdX5pC3G5/LLpSAAKXuWnN38khcrJ5drxqA7GrX7VgaVoI7hzw0bAz1SB8+kmfDbrWHApMM+aFIYdbOaBDV4udgYR9XFIcmszae+fvBLxf2dANdaasN3H/lzg83TS4lANqzVazz9TF6w4cPXxw3+r5Y7pXSAWuAQA="), linear-gradient(#000, #000);
  -webkit-mask-position: 0rem 4.5rem, 0 0;
  mask-position: 0rem 4.5rem, 0 0;
  -webkit-mask-size: 17.4rem 17.6rem, 100% 13.3rem;
  mask-size: 17.4rem 17.6rem, 100% 13.3rem;
}
.mb-sec1 .mb-deco02 .char {
  left: 2.9rem;
  top: 4rem;
  width: 10.2rem;
}
.mb-sec1 { /* Green flag / green */ }
.mb-sec1 .mb-deco03 {
  position: absolute;
  left: calc(50% + 32rem);
  top: 38.4rem;
  width: 24.9rem;
  height: 20rem;
}
.mb-sec1 .mb-deco03 .shape {
  left: 0rem;
  top: 6.3rem;
  width: 24.9rem;
}
.mb-sec1 .mb-deco03 .mask {
  top: -4rem;
  height: calc(100% + 4rem);
  -webkit-mask-image: url("data:image/webp;base64,UklGRjIFAABXRUJQVlA4TCYFAAAv+AAiEDenoG0bJvw5DOztDoL5nxmFAAKgoCGQtGEB7msAtuAlSAnc0AcqB1ZMjUtsM0sNvDylDUuYUG04+t9LMGRLkm3aVq+9j21c27ZtG+eca9u2bdu2bds83Br/suaac4zXiP5PABzoSq7YqGvG6FlL1m7bf/j4qTOnTp44sm/7huVzJgzv265ehVQ35JlSr9+sHVfe+cjuwPeHpzfNyGpTKUoCVvneS85+J/V/3to1vVfteLaF1J9w8h85+8vZZYPqRnOr2OAjOaTL1wcmt07jUolxt0m7Hw+OaxjFncgBl0jXgQerehbjS5klf0nz77cPLM2RansCZMQPW3qn86LcPjLpw4UtwrgQu9xHps09Mqg4B7p/JTM/nFHTMlvCHjL4p1VNg8xV+yMZ/teG1iFmyvAQA3+va+I2zwzi4rdltQyzgjj5bFJJgywibl7sE2mIUcTQ7HV1TNA6wBEiejgsTndF/hBb8zbV1Jp1mlh7s3eovvoQd3/MKqypiE/sIfJuq66lMcTji+0t7YR8YhLRk77BmulBjP4wMkorxzhF9HN8jD7ivbwi+j0lThftid//psToYQHDiH6NjdTBeZYRfRse4rzPTCN63d1yWCgx/k4TZ6VyjuhIOSeV5R15F8c7pwzziH4NcjmlKPuI7tR2SLwAiDYkOwJ5EqCf/RzxXAREF8o54IAQyDMxSLmpUiC6W0W1NnIg79RgtWL8ciC6W0EpXJcE5Y+wVBorCqIz6QqVEQb9aK0ObgmDaFGIMhnioBtFVYnOFgf9bKEIFsuDAlMsNYr65EF0MFoJbJQIPS6tRHGPROh3AxWwRCTk7aNC0m+REE1XAIOFQhvc9rnuCIUOh9uGaj6h0JVY2zBdKnQ7wbaQ+1Kh+yl2oXyeVOhxsl3IFAvdT7ALO8RCd+LsinwoFrocbhNK/xELHXbbhCY+sdA6u5AhFxpjF+bJhTrZZW2WS25lmxB0VCz0Kt4mhF8QCx2zbELUVbHQKLsQc0Ms3hp2IeaKVOhFhF2IPCcVWmwbwo5KJVDXNgRtEgo9DbYNmCsUGqUAhvllkl1IAbTOFgmtUQFVP4jEX04FpF2VCO1SAiFrJRIorQQw2CMPWqUIar6TR16cIkg8IQ4aqgqssT5pPFAGqP1GGFReHcTuFMYkhYDuf0RxWykUOS2JQJxSsAZny4HaqwUUPyOH6aoBA/9K4ZB6SN8thBcOAFq/FUGeIxA52yMAinMEUO6UAIo4BOj8ln0lHYOw8dlSA9LWB1iX4CSgygnGBdzOAhrdZttrON7q9oxpJ50HuPu+YdlMHQDBWR8Z1kwPQGjWW27lRuoCCB7wile7odOgHvc51U4rAFpeYNMLl26AWrv9PBoEHRdb8I9Bz4K1BEQPf86edtC21fxIgDU7ofWSc77x5VOC3oDgLmeYUlAbBiw94yNH+sCMrhZ7PdwYBXPGZ1xmxQSYtcTEx1wIZMG8lWa+5MC/djBz9VnPTfeoLMxdaco9ky0Og9mLDj3lNdPTBmBgdMe1n4zzf3wIuFh19Ol8g3iWpoCV4c3m3fIbIXdRETA0tu3CW37NvRmdCLZGNZ5y+p+u8ne1coG5rgr9Vt/x6qbgSL84MDmkesaqa9m6eL+6UzSYbZXqOGH7vXxnPd/UrxTY7irWdPCiIw9zlPPc3zamSRxEmFSjw5DZW089+Bawyff5+t4Fw1qUckOgroTSNVt07T984sz5y9Zu2LR56+b1a1bOnzZ2WK829csnWnAi"), linear-gradient(#000, #000);
  mask-image: url("data:image/webp;base64,UklGRjIFAABXRUJQVlA4TCYFAAAv+AAiEDenoG0bJvw5DOztDoL5nxmFAAKgoCGQtGEB7msAtuAlSAnc0AcqB1ZMjUtsM0sNvDylDUuYUG04+t9LMGRLkm3aVq+9j21c27ZtG+eca9u2bdu2bds83Br/suaac4zXiP5PABzoSq7YqGvG6FlL1m7bf/j4qTOnTp44sm/7huVzJgzv265ehVQ35JlSr9+sHVfe+cjuwPeHpzfNyGpTKUoCVvneS85+J/V/3to1vVfteLaF1J9w8h85+8vZZYPqRnOr2OAjOaTL1wcmt07jUolxt0m7Hw+OaxjFncgBl0jXgQerehbjS5klf0nz77cPLM2RansCZMQPW3qn86LcPjLpw4UtwrgQu9xHps09Mqg4B7p/JTM/nFHTMlvCHjL4p1VNg8xV+yMZ/teG1iFmyvAQA3+va+I2zwzi4rdltQyzgjj5bFJJgywibl7sE2mIUcTQ7HV1TNA6wBEiejgsTndF/hBb8zbV1Jp1mlh7s3eovvoQd3/MKqypiE/sIfJuq66lMcTji+0t7YR8YhLRk77BmulBjP4wMkorxzhF9HN8jD7ivbwi+j0lThftid//psToYQHDiH6NjdTBeZYRfRse4rzPTCN63d1yWCgx/k4TZ6VyjuhIOSeV5R15F8c7pwzziH4NcjmlKPuI7tR2SLwAiDYkOwJ5EqCf/RzxXAREF8o54IAQyDMxSLmpUiC6W0W1NnIg79RgtWL8ciC6W0EpXJcE5Y+wVBorCqIz6QqVEQb9aK0ObgmDaFGIMhnioBtFVYnOFgf9bKEIFsuDAlMsNYr65EF0MFoJbJQIPS6tRHGPROh3AxWwRCTk7aNC0m+REE1XAIOFQhvc9rnuCIUOh9uGaj6h0JVY2zBdKnQ7wbaQ+1Kh+yl2oXyeVOhxsl3IFAvdT7ALO8RCd+LsinwoFrocbhNK/xELHXbbhCY+sdA6u5AhFxpjF+bJhTrZZW2WS25lmxB0VCz0Kt4mhF8QCx2zbELUVbHQKLsQc0Ms3hp2IeaKVOhFhF2IPCcVWmwbwo5KJVDXNgRtEgo9DbYNmCsUGqUAhvllkl1IAbTOFgmtUQFVP4jEX04FpF2VCO1SAiFrJRIorQQw2CMPWqUIar6TR16cIkg8IQ4aqgqssT5pPFAGqP1GGFReHcTuFMYkhYDuf0RxWykUOS2JQJxSsAZny4HaqwUUPyOH6aoBA/9K4ZB6SN8thBcOAFq/FUGeIxA52yMAinMEUO6UAIo4BOj8ln0lHYOw8dlSA9LWB1iX4CSgygnGBdzOAhrdZttrON7q9oxpJ50HuPu+YdlMHQDBWR8Z1kwPQGjWW27lRuoCCB7wile7odOgHvc51U4rAFpeYNMLl26AWrv9PBoEHRdb8I9Bz4K1BEQPf86edtC21fxIgDU7ofWSc77x5VOC3oDgLmeYUlAbBiw94yNH+sCMrhZ7PdwYBXPGZ1xmxQSYtcTEx1wIZMG8lWa+5MC/djBz9VnPTfeoLMxdaco9ky0Og9mLDj3lNdPTBmBgdMe1n4zzf3wIuFh19Ol8g3iWpoCV4c3m3fIbIXdRETA0tu3CW37NvRmdCLZGNZ5y+p+u8ne1coG5rgr9Vt/x6qbgSL84MDmkesaqa9m6eL+6UzSYbZXqOGH7vXxnPd/UrxTY7irWdPCiIw9zlPPc3zamSRxEmFSjw5DZW089+Bawyff5+t4Fw1qUckOgroTSNVt07T984sz5y9Zu2LR56+b1a1bOnzZ2WK829csnWnAi"), linear-gradient(#000, #000);
  -webkit-mask-position: 0rem 10.3rem, 0 0;
  mask-position: 0rem 10.3rem, 0 0;
  -webkit-mask-size: 24.9rem 13.7rem, 100% 17.15rem;
  mask-size: 24.9rem 13.7rem, 100% 17.15rem;
}
.mb-sec1 .mb-deco03 .char {
  left: 4.5rem;
  top: 4rem;
  width: 20.3rem;
}
.mb-sec1 { /* Blue T-shirt man / orange */ }
.mb-sec1 .mb-deco04 {
  position: absolute;
  left: calc(50% + 56.7rem);
  top: 11.4rem;
  width: 21.3rem;
  height: 14.5rem;
}
.mb-sec1 .mb-deco04 .shape {
  left: 0rem;
  top: 0.5rem;
  width: 21.3rem;
}
.mb-sec1 .mb-deco04 .mask {
  top: -4rem;
  height: calc(100% + 4rem);
  -webkit-mask-image: url("data:image/webp;base64,UklGRsIEAABXRUJQVlA4TLYEAAAv1MAiEIenoG0bxvyRjVj3EMz/rBBI2sK7J1aDdwSPOLwghAAAQYugRxAIdgjBBsEah2zbtk07mnHZtm3btm3btm3btu1KynbFdm7WP1yde87ea71G9H8CwNCM1fvOWL3/8q0HT5/dvnB085yBTfKA9wENZ575QUb+u7qqQ1ae+TZcdDeZPGl7vrQ6s7yqT7sUS2b8vroCm0qPPhFKJn44NIA/BQbt/UWm/z83O2dydN/8jiwauywrTzK2XvXcRlYOmeDHDd8GC24nk/XfNmKEV9WpF2NIlTuy86DUqGMhpNTfTbSXf8CeH6Re21IfjWXruvEtqfp2Lj1laLnyqY1U/rWSdnzqzbuZRMqPaaWVypPPR5Mek7vrosSII/9Jo7YhGsjbb9c30m16P7Vl7bQ+kLSc2lFZAc2XP04jbSc2UpF3nbnXE0nvIcVUU3Hi2Shi4OvMCik27PA/4uJxReTpu/MrsXKY9bJ0XPea2BlX1lL+TZc+TCWWPvO2inet2dcSiK8TLVF2wulI4m1MIbP5tFj3iRh83FxV1wYTk+uYx2/wC+LzLbNknfWHWN3WFP5Tw4jZd80w4Cfxu7bHytwgjh/zkPe8JGJ5WkGPFL1PXJ/liZ5RxPa3xnktI87XNirzGWL9KoNyvyDevzGm0Dvifgkjin0n9o83IP9n4v9R93IEkgB/uuV3n0RY2J3dJMMebkwmIc5zrX6aFA64lO07SfGZS4dJjGGudCM5pvs4y/pHEJTf2UaSZDUnlWyiaOjkAomymaOmJMs2ju4Lo4ODBiTMFg7OSaOOXVmSZkW71eIoDMA3WBo2HwDdSZq/AeC4OB4D8I8Vx0EAHUicMwBsk0cbAO/lkR/IT+L8AqCPPPYAWC2PIQCuyKMQgL/ieAogB4lzDoDq8igLoLM4HgHAOHEMt1sijdjMdmuksRn224WRVsLBIWEcgcPDskiv6mifLA7A8S5RJBdzslkUq+F0iSR+ZHY2ThId4LyXII7BxQZy+JXDldxisDWBy2FSWALXHwjhjJcb22QQmBluDhbB3xJwt5QEwivB/WD+xdaGgUfYF1kfRvbnXnA1GJozjXdfy8DgO6y7mQtGj+TcZl8Yni2RbZG94cmjXLtXFB5twbOYid7w8CuOnSwEjw/k15NmMKHvL2a96Q5zjmDVzfZeMKnPBzZFbKkBE/fkUfyZXv4w9y3+fN3cLgCmL5fMmn+HhxWHNZewJerspEqwbkAgR5JuzKvrA2tXSmSG7cmKFgFQ4FhOBG3okg2qPMaE77v754NKM77UX/DRESWg3CL/tRZzfkoVqLlmtK6Sbs2v5wN1N07UkO3pypYZoPj2yZp5s6FrduiwVbw+fu4ZkB/arB+phdDjo0pBr5W/qy724tSqXtBv7jsKS76zsIEvNO23SU3pz1e1zgitdw1XzrvN3XNA/4WuqeTX3kEFwcVBoWoIOzmmDFiZa6fNanGXp9fwAj8rnbdQyr3FjfzA1UaXLZH+cnXbTOBt1UMpJvu4tWcucDjPtLem+bN/SGEwutaK954LPzW2LPhdfvyJYOOCz8yo6QW2l+6x5ExgpGvxgSeXDSgFCWYuV7tZp17dOrapXzITmAo="), linear-gradient(#000, #000);
  mask-image: url("data:image/webp;base64,UklGRsIEAABXRUJQVlA4TLYEAAAv1MAiEIenoG0bxvyRjVj3EMz/rBBI2sK7J1aDdwSPOLwghAAAQYugRxAIdgjBBsEah2zbtk07mnHZtm3btm3btm3btu1KynbFdm7WP1yde87ea71G9H8CwNCM1fvOWL3/8q0HT5/dvnB085yBTfKA9wENZ575QUb+u7qqQ1ae+TZcdDeZPGl7vrQ6s7yqT7sUS2b8vroCm0qPPhFKJn44NIA/BQbt/UWm/z83O2dydN/8jiwauywrTzK2XvXcRlYOmeDHDd8GC24nk/XfNmKEV9WpF2NIlTuy86DUqGMhpNTfTbSXf8CeH6Re21IfjWXruvEtqfp2Lj1laLnyqY1U/rWSdnzqzbuZRMqPaaWVypPPR5Mek7vrosSII/9Jo7YhGsjbb9c30m16P7Vl7bQ+kLSc2lFZAc2XP04jbSc2UpF3nbnXE0nvIcVUU3Hi2Shi4OvMCik27PA/4uJxReTpu/MrsXKY9bJ0XPea2BlX1lL+TZc+TCWWPvO2inet2dcSiK8TLVF2wulI4m1MIbP5tFj3iRh83FxV1wYTk+uYx2/wC+LzLbNknfWHWN3WFP5Tw4jZd80w4Cfxu7bHytwgjh/zkPe8JGJ5WkGPFL1PXJ/liZ5RxPa3xnktI87XNirzGWL9KoNyvyDevzGm0Dvifgkjin0n9o83IP9n4v9R93IEkgB/uuV3n0RY2J3dJMMebkwmIc5zrX6aFA64lO07SfGZS4dJjGGudCM5pvs4y/pHEJTf2UaSZDUnlWyiaOjkAomymaOmJMs2ju4Lo4ODBiTMFg7OSaOOXVmSZkW71eIoDMA3WBo2HwDdSZq/AeC4OB4D8I8Vx0EAHUicMwBsk0cbAO/lkR/IT+L8AqCPPPYAWC2PIQCuyKMQgL/ieAogB4lzDoDq8igLoLM4HgHAOHEMt1sijdjMdmuksRn224WRVsLBIWEcgcPDskiv6mifLA7A8S5RJBdzslkUq+F0iSR+ZHY2ThId4LyXII7BxQZy+JXDldxisDWBy2FSWALXHwjhjJcb22QQmBluDhbB3xJwt5QEwivB/WD+xdaGgUfYF1kfRvbnXnA1GJozjXdfy8DgO6y7mQtGj+TcZl8Yni2RbZG94cmjXLtXFB5twbOYid7w8CuOnSwEjw/k15NmMKHvL2a96Q5zjmDVzfZeMKnPBzZFbKkBE/fkUfyZXv4w9y3+fN3cLgCmL5fMmn+HhxWHNZewJerspEqwbkAgR5JuzKvrA2tXSmSG7cmKFgFQ4FhOBG3okg2qPMaE77v754NKM77UX/DRESWg3CL/tRZzfkoVqLlmtK6Sbs2v5wN1N07UkO3pypYZoPj2yZp5s6FrduiwVbw+fu4ZkB/arB+phdDjo0pBr5W/qy724tSqXtBv7jsKS76zsIEvNO23SU3pz1e1zgitdw1XzrvN3XNA/4WuqeTX3kEFwcVBoWoIOzmmDFiZa6fNanGXp9fwAj8rnbdQyr3FjfzA1UaXLZH+cnXbTOBt1UMpJvu4tWcucDjPtLem+bN/SGEwutaK954LPzW2LPhdfvyJYOOCz8yo6QW2l+6x5ExgpGvxgSeXDSgFCWYuV7tZp17dOrapXzITmAo="), linear-gradient(#000, #000);
  -webkit-mask-position: 0rem 4.5rem, 0 0;
  mask-position: 0rem 4.5rem, 0 0;
  -webkit-mask-size: 21.3rem 14rem, 100% 11.5rem;
  mask-size: 21.3rem 14rem, 100% 11.5rem;
}
.mb-sec1 .mb-deco04 .char {
  left: 5.6rem;
  top: 4rem;
  width: 10.1rem;
}
.mb-sec1 { /* Boy in green / yellow */ }
.mb-sec1 .mb-deco05 {
  position: absolute;
  left: calc(50% + -54.3rem);
  top: 49.1rem;
  width: 22rem;
  height: 15rem;
}
.mb-sec1 .mb-deco05 .shape {
  left: 0rem;
  top: 0rem;
  width: 22rem;
}
.mb-sec1 .mb-deco05 .mask {
  top: -4rem;
  height: calc(100% + 4rem);
  -webkit-mask-image: url("data:image/webp;base64,UklGRggFAABXRUJQVlA4TPsEAAAv20AlEBenoG0bJvw5jOxLB2EC518hgAAoaAgmadgBczsDqAV/gZLiWL5EK4BBCDK605RzRW08wDTjQDfisAyxpfkhd+RfYMiWJNu0rd44tm1c27Zt27Zt27Zt2/a9x3ef8StHa6815xivEf2fAOg1MLlyg7bd+g4eOW7ixAkTxo0c2KtL67oV4nzAeJ8K7YfO2XLq3sd8Mjzr1bVDKyd2rxfJKXtKuwmbL38iM/+5vXt6pzQ7d7xrDVl7PYesmnV5Wa8MriT3WHGzgKz//fCE2g5mpAzY/o4U+vvQyFQuBHRc/YoU/GRRY4f2EkefLSBlf13T3KGxzBl3SPVfllTRU/KUu6TH+6ODdePf/yJpNGdLDZ3U3ZpFur3U2a6HgGH3SMsvBnqqL2npX9L2u5Feaqu9z0Vaf9vPoa7m50j/j9opqs014uHxTAU1uUxsLFjoo5iqp4mVL1uqJG4bsXNTgCq8Z+YQQ183UUOHV8TTwtkO68UfIb5ejLWYfeQ/4uyX+pZKv0LMzR9ooeHZxN9FNotEnyQW7/K0RMuvxOTTvuZzzic+X/A3W8QF4vRlP3PVeEe8Pu1lph65xO2DDvPMIIavMIvHNmL5SHP4niCeu5qZIeQqcf1rjPvC7xHfLzvcFXGfOD/dTeEPiPUF1dwSeJuY/8DpBu8LxP7xxtkPEf+z4g1bQhLcZtRwEmFhJWOa/JcBHTMk7itJsbIBHtdIjLsNWEhydMWXqTlJclZZgj+K4oOjDJtJlq1K14qEubFU3q+l8cOjNDNJnI1KkZgjj9ml2EHyvFZSpUKBFHiVcIQkWru4KiTSkcXtksmqYpJcMjlZzAKS6asiHl+Fkl+kK0k1EMBhsaQCwfliqQT0I7FWB/bJpTacv+VSE/VJruUxSTCJOCyYIHyVSxYiSK7P0FgwpzBUMEsxVzCDsFUwtXFKLrmeuCaXy8ADucwDXsqlIfBCLL+dwFOx7AbwQCwdAVySym8vAAelsh4A1kulWpFpQrmBot2E0quYajJ54yzG579IRqH4uxL54F3CBokMQom9BfLcWVK0QNqjlA/EcQylnSONvPRSVZLGFJT+iSxuO8swQRR5lVDGiHxJjEGZdwrihK1sVeTwPhIGnpBCXi0YWV8Kg2HsYRksg8HlXBI4YjcKKwVwyw+GB31m3+NwuLEb997Ewa17efc+Fe4N/cS5tylwd/NCvr1Jgfuns+1hLExoO8q0a6EwZcB9lh32g0kTPjNsqR2mrfKbWwXDYOb62bz60gDmbpHDqWuxMHuTLD4t9oD56/9i0o8OsGSF9yw6FQuLxt7jT85IGyzrv587lzJgZdtM1vwdZoPFW37ly/44WD/6PFOet4IS7ePyGPJ3sidUWeEWN1yrI6FQx9gsVhwoB8UmHObDiepQcMtHPDhRH2p2jviivcJ91aBuv2l/tJa9OgNqD5n5U1sfp4ZB/QGTP2npZGcn9OjZ565uPsxPhU4b7czTR+6ulnboNnzcAy3kH+kZAD1XWfJZcdkH+gZD4/aGyz8o6/2GDj7Qvq36zJvqyTk9rgLYGNVz8zt1ZJ+Z3sAT3Ezru/6R9Z5tG1bVCa4GNR2/56nLGv9ubhrZIAD89arcc/buW39Mk/f02MoxreJt4HVo5fbD5qw7eOX5l1wDcr89vXxow/yRnWrG2MF9z/D4tIo1atepW7dO1QrpCaEe0C8A"), linear-gradient(#000, #000);
  mask-image: url("data:image/webp;base64,UklGRggFAABXRUJQVlA4TPsEAAAv20AlEBenoG0bJvw5jOxLB2EC518hgAAoaAgmadgBczsDqAV/gZLiWL5EK4BBCDK605RzRW08wDTjQDfisAyxpfkhd+RfYMiWJNu0rd44tm1c27Zt27Zt27Zt2/a9x3ef8StHa6815xivEf2fAOg1MLlyg7bd+g4eOW7ixAkTxo0c2KtL67oV4nzAeJ8K7YfO2XLq3sd8Mjzr1bVDKyd2rxfJKXtKuwmbL38iM/+5vXt6pzQ7d7xrDVl7PYesmnV5Wa8MriT3WHGzgKz//fCE2g5mpAzY/o4U+vvQyFQuBHRc/YoU/GRRY4f2EkefLSBlf13T3KGxzBl3SPVfllTRU/KUu6TH+6ODdePf/yJpNGdLDZ3U3ZpFur3U2a6HgGH3SMsvBnqqL2npX9L2u5Feaqu9z0Vaf9vPoa7m50j/j9opqs014uHxTAU1uUxsLFjoo5iqp4mVL1uqJG4bsXNTgCq8Z+YQQ183UUOHV8TTwtkO68UfIb5ejLWYfeQ/4uyX+pZKv0LMzR9ooeHZxN9FNotEnyQW7/K0RMuvxOTTvuZzzic+X/A3W8QF4vRlP3PVeEe8Pu1lph65xO2DDvPMIIavMIvHNmL5SHP4niCeu5qZIeQqcf1rjPvC7xHfLzvcFXGfOD/dTeEPiPUF1dwSeJuY/8DpBu8LxP7xxtkPEf+z4g1bQhLcZtRwEmFhJWOa/JcBHTMk7itJsbIBHtdIjLsNWEhydMWXqTlJclZZgj+K4oOjDJtJlq1K14qEubFU3q+l8cOjNDNJnI1KkZgjj9ml2EHyvFZSpUKBFHiVcIQkWru4KiTSkcXtksmqYpJcMjlZzAKS6asiHl+Fkl+kK0k1EMBhsaQCwfliqQT0I7FWB/bJpTacv+VSE/VJruUxSTCJOCyYIHyVSxYiSK7P0FgwpzBUMEsxVzCDsFUwtXFKLrmeuCaXy8ADucwDXsqlIfBCLL+dwFOx7AbwQCwdAVySym8vAAelsh4A1kulWpFpQrmBot2E0quYajJ54yzG579IRqH4uxL54F3CBokMQom9BfLcWVK0QNqjlA/EcQylnSONvPRSVZLGFJT+iSxuO8swQRR5lVDGiHxJjEGZdwrihK1sVeTwPhIGnpBCXi0YWV8Kg2HsYRksg8HlXBI4YjcKKwVwyw+GB31m3+NwuLEb997Ewa17efc+Fe4N/cS5tylwd/NCvr1Jgfuns+1hLExoO8q0a6EwZcB9lh32g0kTPjNsqR2mrfKbWwXDYOb62bz60gDmbpHDqWuxMHuTLD4t9oD56/9i0o8OsGSF9yw6FQuLxt7jT85IGyzrv587lzJgZdtM1vwdZoPFW37ly/44WD/6PFOet4IS7ePyGPJ3sidUWeEWN1yrI6FQx9gsVhwoB8UmHObDiepQcMtHPDhRH2p2jviivcJ91aBuv2l/tJa9OgNqD5n5U1sfp4ZB/QGTP2npZGcn9OjZ565uPsxPhU4b7czTR+6ulnboNnzcAy3kH+kZAD1XWfJZcdkH+gZD4/aGyz8o6/2GDj7Qvq36zJvqyTk9rgLYGNVz8zt1ZJ+Z3sAT3Ezru/6R9Z5tG1bVCa4GNR2/56nLGv9ubhrZIAD89arcc/buW39Mk/f02MoxreJt4HVo5fbD5qw7eOX5l1wDcr89vXxow/yRnWrG2MF9z/D4tIo1atepW7dO1QrpCaEe0C8A"), linear-gradient(#000, #000);
  -webkit-mask-position: 0rem 4rem, 0 0;
  mask-position: 0rem 4rem, 0 0;
  -webkit-mask-size: 22rem 15rem, 100% 11.5rem;
  mask-size: 22rem 15rem, 100% 11.5rem;
}
.mb-sec1 .mb-deco05 .char {
  left: 3.6rem;
  top: 4.5rem;
  width: 13rem;
}
.mb-sec1 { /* Green cup women / blue */ }
.mb-sec1 .mb-deco06 {
  position: absolute;
  left: calc(50% + 67.5rem);
  top: 79.2rem;
  width: 17.8rem;
  height: 17.8rem;
}
.mb-sec1 .mb-deco06 .shape {
  left: 0rem;
  top: 0rem;
  width: 17.8rem;
}
.mb-sec1 .mb-deco06 .mask {
  top: -4rem;
  height: calc(100% + 4rem);
  -webkit-mask-image: url("data:image/webp;base64,UklGRtAFAABXRUJQVlA4TMMFAAAvsUAsEC+noG0bxvwZDs8fg5g0AklbePdkEY5EeBJ2jkoAQOAYCIXQOQBCI4AAwkRIwkC4EAqhEQ6ExkF/27bjjXQn6aTuZLdejG3btm3btm3btm3bqpukX56/JF8+vHnf5+eI/k8AwjylUb9ZG7dvXr96SqeyhcDfqFZLHpNh37kxxXlTdEkGWfloYCRbahzSyOpvMwvbUbrHvGPPP2X4vB9uHV7cMVElhVdrZOfXHlbVWfSaTAaeLiylip7fyO5TRSxwD3lN1l7sXUgBrpUk4O9mZiLHfSbrX3WSnucMCekfaazuM7L3fGW5pTwjUZcaiF6mkd3+MTJLuE/izgyRdo9E3B0rrahLJPJwnfLvScyn6bLaQUJrbQDUyyBRn6fKqQcJ/uVvlP5N4j5JklH6b9Fob/IbEvmuW0LHSfz3JPZK+TQg+XeQzkUF/EqVTDNS4WrJHFaCv5RU/vIpgfZLZTApsrhMzqtitkQi8lXxwSGPqqTM5vIYrI4F8lijjqvyOKAOb6Q0LqqD6kjjoUK6SuOtQkZK45FC5kjjgkLWhFXpdv2nLl82Z8rIVqnYr5DlYVN+0pFfZPTrD4XMCQ/P8Duk8Cnh4FmQR0ofJp57wm9SfAPhyj0m5SeINiSXlP8WzqQiiU5hXFuJgd6MABFR1ss9ExrF2hexn7iZt6+j2x73EeLon4WJduwkpmbP8Vg2ivj6s4tF9XyMIdqWYEXsR+Ltu7IWzCXu/qpt6v989lBOKzN7iMH5tYwVD3CIvqQbmk88vhttIOIbk2iFgU7EZa1aqA1sotuOEC/4RIP0UojRz/U6c4ra6Exk1SmdZayiIkG7eDU06DyvDjAswwXgKK+oOoDdzOoOYAOzJgKYzKzVANoy6xCAdIbhO6/2B23m1e6g9rzaHOTOYtX0IGxiVVedMgFOVdTBfkblRepVZdRxhNzAp2GhEj6x6d9QaM+lKzC6kkkdDTkPs+iFwxCib3NoCEwm3eLPA5cZRB/kjlYb5h1HmLMa5t2LNd48iTNX6THx9mdRmG6WTbz1NYTpbl7irbcLTPfTiLfZTWG6kY94+606TBf9Sbw9nALTkY+Jtdn9YeEc4m1uJwvK+phD2lhzl4m/C8y0Jg6PNnGGRVonQ5WIx3mVjKxnEt1zhXJ85xJNC1WX2OwtE2Iun2h3iBuM0krqZTCKNuqkEqd9iUGNWEX9g3rx6nhQP155EwAM4BW1ATCEWZMA9GPWTgCNmfUYQBFm/QLgKuBVPgA84RU5ASxnVjyAtrwKuADEeFn1HcFHWPVQpwWrTungKacW6A3lVDu9yDd8Cnj00IZPDxB6P5umGEj/zSR/qgE08/PoAAyP4FErY1jJoYswu5A/WmVTmMie9bCwVyZvviRbgf8vccZfH9Y6xmfyZSws98zJZsp22Jk44wVHtjltAVB9yWONGescEDC2wbhlWw5fPrt3zTUGBOZA8J3q+9IMoj9R3uFkiB5ZoLjbTSB+KVL6re4Ix2oK+7qoHMKzgUJyZ+x/HdDLfbl9aAUHwrWNQjQA0WklKtcuGY/wbqUQ8kCSVVVSXBZpKiklC5emkGRZ4KVCIqSxWR05kOZAdTySRxl1bJQHniljqEQmKaO6RNIKFPHFKREcUcRyyLRqQA01pYKdSngOuRbxqqCvZDBdAc+csnGcl18PSDfth1hX74h3xSEfNM0X6WVimTzRsotCxu184vwsAYwRbQDk3MkvyqdKAHBIrF2Qdds/Yjz8B8GRl0Q6XUhaKHZfhBPx0E+4L87NWEg8ar1tmQNhMOWmKNcTIfc6N+05kg7DkTvF2OKG9Pu8te5oXZieUmBfwQSo0NFqv9+KP5srw8oqt+26VRWqTBmy470h7eXaFhGw2DEiw44/QxxQ6n/tB81YvXnVgpkDa8XA1vhx7616N8EDtrp6HM41l3eykxO8jWq78tL3UL9vL2oRCR57ajRo2rJlhTiEPQA="), linear-gradient(#000, #000);
  mask-image: url("data:image/webp;base64,UklGRtAFAABXRUJQVlA4TMMFAAAvsUAsEC+noG0bxvwZDs8fg5g0AklbePdkEY5EeBJ2jkoAQOAYCIXQOQBCI4AAwkRIwkC4EAqhEQ6ExkF/27bjjXQn6aTuZLdejG3btm3btm3btm3bqpukX56/JF8+vHnf5+eI/k8AwjylUb9ZG7dvXr96SqeyhcDfqFZLHpNh37kxxXlTdEkGWfloYCRbahzSyOpvMwvbUbrHvGPPP2X4vB9uHV7cMVElhVdrZOfXHlbVWfSaTAaeLiylip7fyO5TRSxwD3lN1l7sXUgBrpUk4O9mZiLHfSbrX3WSnucMCekfaazuM7L3fGW5pTwjUZcaiF6mkd3+MTJLuE/izgyRdo9E3B0rrahLJPJwnfLvScyn6bLaQUJrbQDUyyBRn6fKqQcJ/uVvlP5N4j5JklH6b9Fob/IbEvmuW0LHSfz3JPZK+TQg+XeQzkUF/EqVTDNS4WrJHFaCv5RU/vIpgfZLZTApsrhMzqtitkQi8lXxwSGPqqTM5vIYrI4F8lijjqvyOKAOb6Q0LqqD6kjjoUK6SuOtQkZK45FC5kjjgkLWhFXpdv2nLl82Z8rIVqnYr5DlYVN+0pFfZPTrD4XMCQ/P8Duk8Cnh4FmQR0ofJp57wm9SfAPhyj0m5SeINiSXlP8WzqQiiU5hXFuJgd6MABFR1ss9ExrF2hexn7iZt6+j2x73EeLon4WJduwkpmbP8Vg2ivj6s4tF9XyMIdqWYEXsR+Ltu7IWzCXu/qpt6v989lBOKzN7iMH5tYwVD3CIvqQbmk88vhttIOIbk2iFgU7EZa1aqA1sotuOEC/4RIP0UojRz/U6c4ra6Exk1SmdZayiIkG7eDU06DyvDjAswwXgKK+oOoDdzOoOYAOzJgKYzKzVANoy6xCAdIbhO6/2B23m1e6g9rzaHOTOYtX0IGxiVVedMgFOVdTBfkblRepVZdRxhNzAp2GhEj6x6d9QaM+lKzC6kkkdDTkPs+iFwxCib3NoCEwm3eLPA5cZRB/kjlYb5h1HmLMa5t2LNd48iTNX6THx9mdRmG6WTbz1NYTpbl7irbcLTPfTiLfZTWG6kY94+606TBf9Sbw9nALTkY+Jtdn9YeEc4m1uJwvK+phD2lhzl4m/C8y0Jg6PNnGGRVonQ5WIx3mVjKxnEt1zhXJ85xJNC1WX2OwtE2Iun2h3iBuM0krqZTCKNuqkEqd9iUGNWEX9g3rx6nhQP155EwAM4BW1ATCEWZMA9GPWTgCNmfUYQBFm/QLgKuBVPgA84RU5ASxnVjyAtrwKuADEeFn1HcFHWPVQpwWrTungKacW6A3lVDu9yDd8Cnj00IZPDxB6P5umGEj/zSR/qgE08/PoAAyP4FErY1jJoYswu5A/WmVTmMie9bCwVyZvviRbgf8vccZfH9Y6xmfyZSws98zJZsp22Jk44wVHtjltAVB9yWONGescEDC2wbhlWw5fPrt3zTUGBOZA8J3q+9IMoj9R3uFkiB5ZoLjbTSB+KVL6re4Ix2oK+7qoHMKzgUJyZ+x/HdDLfbl9aAUHwrWNQjQA0WklKtcuGY/wbqUQ8kCSVVVSXBZpKiklC5emkGRZ4KVCIqSxWR05kOZAdTySRxl1bJQHniljqEQmKaO6RNIKFPHFKREcUcRyyLRqQA01pYKdSngOuRbxqqCvZDBdAc+csnGcl18PSDfth1hX74h3xSEfNM0X6WVimTzRsotCxu184vwsAYwRbQDk3MkvyqdKAHBIrF2Qdds/Yjz8B8GRl0Q6XUhaKHZfhBPx0E+4L87NWEg8ar1tmQNhMOWmKNcTIfc6N+05kg7DkTvF2OKG9Pu8te5oXZieUmBfwQSo0NFqv9+KP5srw8oqt+26VRWqTBmy470h7eXaFhGw2DEiw44/QxxQ6n/tB81YvXnVgpkDa8XA1vhx7616N8EDtrp6HM41l3eykxO8jWq78tL3UL9vL2oRCR57ajRo2rJlhTiEPQA="), linear-gradient(#000, #000);
  -webkit-mask-position: 0rem 4rem, 0 0;
  mask-position: 0rem 4rem, 0 0;
  -webkit-mask-size: 17.8rem 17.8rem, 100% 12.9rem;
  mask-size: 17.8rem 17.8rem, 100% 12.9rem;
}
.mb-sec1 .mb-deco06 .char {
  left: 3.3rem;
  top: 7.4rem;
  width: 12.6rem;
}
.mb-sec1 { /* 레이어 2330 / Shape 2 green */ }
.mb-sec1 .mb-star {
  position: absolute;
  left: calc(50% + 24.7rem);
  top: 17.8rem;
  width: 7rem;
  transform-origin: 50% 50%;
}
.mb-sec1 { /* 9/9 PSD Yellow * 1207,178 70x70 */
  /* 타이틀 */
}
.mb-sec1__eyebrow {
  position: absolute;
  left: 0rem;
  top: 10.4rem;
  width: 64rem;
  text-align: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.3rem;
  font-weight: 400;
  color: #282b3d;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec1__line {
  position: absolute;
  left: 18rem;
  top: 14.5rem;
  width: 28rem;
}
.mb-sec1__tt {
  position: absolute;
  left: 0rem;
  top: 18.4rem;
  width: 64rem;
  text-align: center;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 9rem;
  font-weight: 800;
  color: #282b3d;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec1__tt.l2 {
  top: 42.1rem;
}
.mb-sec1 {
  /* MBTI 롤링 스트립: 회색 전폭 스트립 + 중앙 초록 pill 안에 흰 사본 (같은 transform 으로 동기) */
}
.mb-sec1__strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 29rem;
  height: 11.6rem;
  z-index: 0; /* 섹션 직계 — 전폭, 별도 히든 마스크 없음 */
}
.mb-sec1__strip .mb-strip {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}
.mb-sec1__strip .mb-strip span {
  display: block;
  width: 36.6rem;
  text-align: center;
  flex: none;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 7.4rem;
  font-weight: 800;
  color: #eceef0;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec1__strip .mb-strip { /* 시안 글자 피치 ≈366 */ }
.mb-sec1__strip .mb-strip-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
}
.mb-sec1__strip .mb-pill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 40.1rem;
  height: 11.6rem;
  margin-left: -20.05rem;
  border-radius: 5.6rem;
  background: #00d96a;
  overflow: hidden;
}
.mb-sec1__strip .mb-pill .mb-strip {
  left: 20.05rem;
}
.mb-sec1__strip .mb-pill .mb-strip span {
  color: #fff;
  font-size: 8rem;
}
.mb-sec1 {
  /* 회원+아동 카드 (562~1005) */
}
.mb-sec1__hero {
  position: absolute;
  left: 0rem;
  top: 56.2rem;
  width: 64rem;
  height: 44.3rem;
}
.mb-sec1__hero img {
  position: absolute;
}
.mb-sec1__hero {
  /* 9/9 애니 webp 1장(main_card 710x426, 카드+회원+아동 3프레임). 노란 카드 bbox 로 시안과 1:1 정합: 애니(125,37) = 시안(726,565) → 원점 601,528 → hero(647,562) 기준 -46,-34 */
}
.mb-sec1__hero .cards {
  left: -4.6rem;
  top: -3.4rem;
  width: 71rem;
  transform-origin: 50% 100%;
}
.mb-sec1__hero .heart {
  left: 25.8rem;
  top: 6rem;
  width: 14.5rem; /* 시안 PNG(0907) 기준 — PSD 보다 11px 아래 */
  transform-origin: 50% 80%;
  animation: mbHeart 1.6s ease-in-out infinite;
}
.mb-sec1__hero .flower {
  left: 2.1rem;
  top: 21.5rem;
  width: 16.1rem;
  transform-origin: 50% 50%;
}
.mb-sec1__hero { /* 9/9 stroke 8 · 그림자 22%·퍼짐 blur 20→5.6 · 161x162 (hero 기준 21,215) */
  /* .flower-tt 제거 (9/9) — MBTI 글자는 sec1_flower.webp 에 포함, alt="MBTI" */
}
.mb-sec1__copy {
  position: absolute;
  left: 0rem;
  top: 95.2rem;
  width: 64rem;
  text-align: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.2rem;
  font-weight: 400;
  color: #000;
  letter-spacing: 0;
  line-height: 4.8rem;
}
.mb-sec1 {
  /* 하단 바 (1181~1282) — 클릭 시 sec2 로 스크롤 */
}
.mb-sec1 .mb-sec1__bar { /* .mb-sec1 .mb-sec1__bar — 버튼 리셋(background:none)보다 우선 */
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  height: 10.1rem;
  background: #0066e6;
  display: block;
  width: 100%;
  text-align: left; /* 9/21 섹션 바닥 고정 — 표지 축소와 무관 */
  overflow: hidden;
  z-index: 2; /* 9/9 kids 컷(105h) 을 바 안에서 클립 + 스크롤 도착 시 y 100% → 0. z-index 2 = 섹션 전체를 덮는 .mb-inner(z-index 1) 위 — 없으면 바 클릭이 안 먹음 */
}
.mb-sec1 .mb-sec1__bar .mb-inner {
  display: block;
  height: 10.1rem;
}
.mb-sec1 .mb-sec1__bar .kids {
  position: absolute;
  left: -0.1rem;
  top: -0.8rem;
  width: 15.9rem;
}
.mb-sec1 .mb-sec1__bar { /* 9/9 애니 webp 159x109 (PSD bottom2 153x105 중심 정합, 바 overflow 로 클립) · 9/9 바 하단 기준으로 올림 */ }
.mb-sec1 .mb-sec1__bar .txt {
  position: absolute;
  left: 18.5rem;
  top: 0;
  height: 100%;
  line-height: 10.1rem;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 10.1rem;
  white-space: nowrap;
  /* 9/10 tl-line 리빌 — .tl-line 이 마스크, .tl-in 이 yPercent 115 -> 0 (JS initHero 가 감쌈) */
}
.mb-sec1 .mb-sec1__bar .txt .tl-line {
  display: block;
  overflow: hidden;
}
.mb-sec1 .mb-sec1__bar .txt .tl-in {
  display: inline-block;
}
.mb-sec1 .mb-sec1__bar .txt .tl-em, .mb-sec1 .mb-sec1__bar .txt .tl-ch {
  display: inline-block;
}
.mb-sec1 .mb-sec1__bar .txt { /* 리빌 후 글자 하나씩 커지는 강조 (JS 가 .tl-ch 주입) */ }
.mb-sec1 .mb-sec1__bar .down {
  position: absolute;
  left: 61.5rem;
  top: 4.1rem;
  color: #fff;
  display: inline-block;
  width: 2.7rem;
  height: 1.8rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/webp;base64,UklGRggBAABXRUJQVlA4TPwAAAAvGkAEEBehoG0bxvxJtzsg5n/+FUeSlEY5x3kRgEPCZQAAAAAoDAuADEEHQYEISBA0BAAIAwjDh4EBDw7bSFKkmp29599nhtnp/LN8DCGi/xMAmBfney9uvBr/NcAYH04b3D6YszkdxhhWRhdJO4YPAztJl1ExZ6Z7PNSobypNj7hrhjtTPTO7GgNQaeqZT01xStkrlKGGW6UpUqF9KWDGWj2za0elKTK71pgBOE3RFTrSFJmhhvN+oEldoXPPzFBj4HNlflVXl5ShRuXbyuSqrlCGGpXvByZXdeVTjcqvlcmt3x9aMfD7wFLSnso/ndl2gdtfKIDxb6+VrwE=") center/100% 100% no-repeat;
  mask: url("data:image/webp;base64,UklGRggBAABXRUJQVlA4TPwAAAAvGkAEEBehoG0bxvxJtzsg5n/+FUeSlEY5x3kRgEPCZQAAAAAoDAuADEEHQYEISBA0BAAIAwjDh4EBDw7bSFKkmp29599nhtnp/LN8DCGi/xMAmBfney9uvBr/NcAYH04b3D6YszkdxhhWRhdJO4YPAztJl1ExZ6Z7PNSobypNj7hrhjtTPTO7GgNQaeqZT01xStkrlKGGW6UpUqF9KWDGWj2za0elKTK71pgBOE3RFTrSFJmhhvN+oEldoXPPzFBj4HNlflVXl5ShRuXbyuSqrlCGGpXvByZXdeVTjcqvlcmt3x9aMfD7wFLSnso/ndl2gdtfKIDxb6+VrwE=") center/100% 100% no-repeat;
}
.mb-sec1 .mb-sec1__bar { /* PSD bottom/arrow 25x16 stroke 5 */ }
@media (max-width: 720px) {
  .mb-sec1 {
    height: 128.2rem;
  }
  .mb-sec1__stage {
    height: 118.1rem;
    width: 100%;
    transform: none;
  }
  .mb-sec1 {
    /* MO: 가장자리에 걸치는 블롭 2개 + 별만 (MO PSD 9/9 실측 — 블롭만 노출, 캐릭터는 없음) */
  }
  .mb-sec1 .mb-deco01, .mb-sec1 .mb-deco02, .mb-sec1 .mb-deco04, .mb-sec1 .mb-deco06 {
    display: none;
  }
  .mb-sec1 .mb-deco03 .mask, .mb-sec1 .mb-deco05 .mask {
    display: none;
  }
  .mb-sec1 { /* 캐릭터 숨김 */ }
  .mb-sec1 .mb-deco05 {
    left: -19rem;
    top: 48.3rem;
  }
  .mb-sec1 .mb-deco05 .shape {
    width: 23.4rem;
  }
  .mb-sec1 { /* PSD blue O -190,483 234x166 */ }
  .mb-sec1 .mb-deco03 {
    left: 66.4rem;
    top: 37.5rem;
  }
  .mb-sec1 .mb-deco03 .shape {
    width: 28.1rem;
  }
  .mb-sec1 { /* PSD orange O 664,438 281x154 (shape 오프셋 top 63) */ }
  .mb-sec1 .mb-star {
    left: 60.7rem;
    top: 17.8rem;
  }
  .mb-sec1 { /* PSD Yellow * 607,178 */ }
  .mb-sec1 .mb-top {
    left: -2rem;
    width: 68rem;
  }
  .mb-sec1__bar .kids {
    left: 0.2rem;
  }
  .mb-sec1__bar .txt {
    left: 18.5rem;
  }
  .mb-sec1__bar .down {
    left: 62.6rem;
  }
}
.mb-sec1 {
  /* PC 전용 세로 압축 — 값은 파일 위 $s1-* 참고. 시안 좌표는 위 기본 규칙에 그대로 남겨둔다 */
}
@media (min-width: 721px) {
  .mb-sec1 {
    height: calc(118.1rem * var(--s1, 1) + 10.1rem); /* 반응형 축소(--s1) 를 덮지 않게 같이 곱한다 */
  }
  .mb-sec1__eyebrow {
    top: 10.4rem;
  }
  .mb-sec1__line {
    top: 14.5rem;
  }
  .mb-sec1__tt {
    top: 18.4rem;
  }
  .mb-sec1__tt.l2 {
    top: 42.1rem;
  }
  .mb-sec1__strip {
    top: 29rem;
  }
  .mb-sec1__hero {
    top: 56.2rem;
  }
  .mb-sec1__copy {
    top: 95.2rem;
  }
  .mb-sec1__stage {
    height: 118.1rem;
  }
  .mb-sec1 .mb-deco01 {
    top: 76.2rem;
  }
  .mb-sec1 .mb-deco02 {
    top: 9.9rem;
  }
  .mb-sec1 .mb-deco03 {
    top: 38.4rem;
  }
  .mb-sec1 .mb-deco04 {
    top: 11.4rem;
  }
  .mb-sec1 .mb-deco05 {
    top: 49.1rem;
  }
  .mb-sec1 .mb-deco06 {
    top: 79.2rem;
  }
  .mb-sec1 .mb-star {
    top: 17.8rem;
  }
}

@keyframes mbHeart {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}
/* ============================================================
 * SEC2 — 방식 선택 / 직접 입력 / 로딩  (1279~2533)
 * 상태: .is-intro(기본) / .is-input(직접입력 패널) / .is-loading
 * ============================================================ */
.mb-sec2 {
  background: #fff;
}
.mb-sec2 .mb-inner {
  min-height: 127.4rem;
}
.mb-sec2 { /* sec2 1279~2553 (sec3 시작까지, 하단 20 여백 포함) */ }
.mb-sec2__panel {
  display: none;
}
.mb-sec2.is-intro .mb-sec2__intro, .mb-sec2.is-input .mb-sec2__input, .mb-sec2.is-loading .mb-sec2__loading {
  display: block;
}
.mb-sec2 {
  /* PC 사이드 데코 */
}
.mb-sec2 .mb-deco {
  pointer-events: none;
}
.mb-sec2 .mb-deco img {
  width: 100%;
}
.mb-sec2 {
  /* 시안 PNG(0907) 3D 구름 포함 그룹 컷 — 비행기+구름 / 지구본 아이+구름+새 */
  /* 9/9 PSD deco 레이어 분리 — stage 좌표는 각 컷의 절대 좌표(sec2 시작 1278 기준) */
}
.mb-sec2 .d-plane {
  position: absolute;
  left: calc(50% + 59.2rem);
  top: 15.6rem;
  width: 25.8rem;
}
.mb-sec2 .d-rcloud1 {
  position: absolute;
  left: calc(50% + 48.7rem);
  top: 14.5rem;
  width: 12.1rem;
}
.mb-sec2 .d-rcloud2 {
  position: absolute;
  left: calc(50% + 64.2rem);
  top: 34.3rem;
  width: 18.5rem;
}
.mb-sec2 .d-globe {
  position: absolute;
  left: calc(50% + -73.2rem);
  top: 50.6rem;
  width: 16rem;
}
.mb-sec2 .d-bird {
  position: absolute;
  left: calc(50% + -84.9rem);
  top: 43.4rem;
  width: 9.9rem;
  z-index: 2;
}
.mb-sec2 { /* 9/9 새는 구름 앞 */ }
.mb-sec2 .d-lcloud1 {
  position: absolute;
  left: calc(50% + -86.1rem);
  top: 45.4rem;
  width: 12.5rem;
}
.mb-sec2 .d-lcloud2 {
  position: absolute;
  left: calc(50% + -84.3rem);
  top: 60.4rem;
  width: 18.5rem;
}
.mb-sec2 .d-lcloud3 {
  position: absolute;
  left: calc(50% + -65.9rem);
  top: 67.2rem;
  width: 12.5rem;
}
.mb-sec2 {
  /* ── intro ── */
}
.mb-sec2__tt {
  /* 9/17 강조로 2행이 컬럼(640)을 넘어 "요" 가 3줄째로 떨어짐 → 여정 타이틀과 같은 방식으로
     넘치는 만큼만 좌우로 확장하고 줄바꿈은 마크업 <br> 로만 (sec4__tt 와 동일 패턴) */
  padding-top: 12.7rem;
  text-align: center;
  white-space: nowrap;
  margin-left: -6rem;
  margin-right: -6rem;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 4.5rem;
  font-weight: 600;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 7rem;
}
.mb-sec2__tt .ria {
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 800;
}
.mb-sec2__tt .b {
  font-weight: 700;
}
.mb-sec2__tt .c-green3 {
  font-size: 5.5rem;
}
.mb-sec2__tt { /* 9/17 강조 : 지목 구간(운명의 결연아동) 만 45 → 55 */ }
.mb-sec2__cards {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 6.9rem; /* 카드 top 1615 → 336 - 타이틀 하단 */
}
.mb-sec2__cards .mb-card {
  position: relative;
  width: 31.4rem;
  height: 42rem;
  border-radius: 3rem;
  text-align: left;
  color: #fff;
  box-shadow: 0 1.5rem 1rem rgba(0, 56, 180, 0.1);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s; /* PSD DropShadow size10 dist15 #0038b4 10% */
  /* 9/17 호버링 모션 : 떠오르며 살짝 커지고 그림자가 짙어진다 (PC 포인터 기기만) */
}
@media (hover: hover) {
  .mb-sec2__cards .mb-card:hover {
    transform: translateY(-1.4rem) scale(1.01);
    box-shadow: 0 3rem 2.2rem rgba(0, 56, 180, 0.22);
  }
  .mb-sec2__cards .mb-card:active {
    transform: translateY(-0.6rem) scale(1.005);
  }
}
.mb-sec2__cards .mb-card .tt {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 5.6rem;
}
.mb-sec2__cards .mb-card .badge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 27rem;
  height: 5.6rem;
  padding: 0; /* 9/9 시안 렌더 실측 1890 = 카드 +270 */ /* 9/9 PSD 사각형 13 h56 — 폭은 카드별 고정 */
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 0 0.9rem 2.1rem rgba(16, 70, 45, 0.17);
  white-space: nowrap;
}
.mb-sec2__cards .mb-card .mb-arr {
  position: absolute;
  left: 50%;
  top: 34.3rem;
  transform: translateX(-50%);
  color: #fff;
}
.mb-sec2__cards .mb-card--input {
  background: #fdc32d;
}
.mb-sec2__cards .mb-card--input .ico {
  position: absolute;
  left: 4.5rem;
  top: 8.5rem;
  width: 22.1rem;
  height: 5.1rem;
  display: flex;
  gap: 0.967rem; /* PSD 사각형 20 (카드 640,1616 기준 45,85) 221x51 = 칸 48 + gap 9.67 */
}
.mb-sec2__cards .mb-card--input .ico b, .mb-sec2__cards .mb-card--input .ico i {
  flex: none;
  width: 4.8rem;
  height: 5.1rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.7rem 1.8rem rgba(179, 129, 0, 0.46);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec2__cards .mb-card--input .hand {
  position: absolute;
  left: 15.8rem;
  top: 9.9rem;
  width: 13.7rem;
}
.mb-sec2__cards .mb-card--input .tt {
  top: 21.1rem;
}
.mb-sec2__cards .mb-card--input { /* 9/9 PSD 글자 1843 = 카드 +227(글리프) → 라인박스 211. 배지와 간격 15 */ }
.mb-sec2__cards .mb-card--input .badge {
  background: #ff5704;
  width: 19.9rem;
}
.mb-sec2__cards .mb-card--input { /* PSD 697,1889 199x56 */ }
.mb-sec2__cards .mb-card--quiz {
  background: #09d4ff;
}
.mb-sec2__cards .mb-card--quiz .glass {
  position: absolute;
  left: 7.9rem;
  top: 3.5rem;
  width: 15.6rem;
}
.mb-sec2__cards .mb-card--quiz .tt {
  top: 17.2rem;
  line-height: 4.3rem;
}
.mb-sec2__cards .mb-card--quiz { /* 9/9 PSD run lh 21.28×2.02 = 43 (2줄 간격), 첫 줄 1800 */ }
.mb-sec2__cards .mb-card--quiz .badge {
  background: #0066e6;
  width: 17.9rem;
}
.mb-sec2__cards .mb-card--quiz { /* PSD 1037,1890 179x56 */ }
.mb-sec2__info {
  position: relative;
  height: 28.8rem;
  margin-top: 9.3rem; /* 말풍선 top 2128 */
}
.mb-sec2__info .bubble {
  position: absolute;
  left: 0.1rem;
  top: 0;
  width: 43.1rem;
}
.mb-sec2__info .txt {
  position: absolute;
  left: 0.1rem;
  top: 5.3rem;
  width: 39.7rem;
  text-align: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.2rem;
  font-weight: 400;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 4.6rem;
}
.mb-sec2__info .man {
  position: absolute;
  left: 43.7rem;
  top: 2.2rem;
  width: 20.1rem;
}
.mb-sec2 {
  /* ── 직접 입력 패널 (#2-1) ── */
}
.mb-sec2__input .tt {
  padding-top: 11rem;
  text-align: center;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 6.5rem;
  font-weight: 800;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 9rem;
}
.mb-sec2__input .lab {
  position: relative;
  margin-top: 4rem;
  height: 5.6rem;
  text-align: center;
}
.mb-sec2__input .lab .pencil {
  position: absolute;
  left: 13rem;
  top: -0.2rem;
  width: 4.3rem;
}
.mb-sec2__input .lab .ul {
  position: absolute;
  left: 13.1rem;
  top: 4.3rem;
  width: 34.8rem;
}
.mb-sec2__input .lab span {
  position: relative;
  display: inline-block;
  padding-left: 0.6rem;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 1;
  top: 0.5rem;
}
.mb-sec2__input .boxes {
  position: relative;
  margin-top: 3.9rem;
  display: flex;
  gap: 2rem;
  height: 14.5rem;
}
.mb-sec2__input .boxes .box {
  position: relative;
  width: 14.5rem;
  height: 14.5rem;
  border-radius: 1rem;
  background: #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 5.9rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
  cursor: text;
  transition: background 0.2s;
}
.mb-sec2__input .boxes .box.is-fill {
  background: #00db6b;
}
.mb-sec2__input .boxes .box {
  /* 커서는 인풋 포커스 중에만 깜빡인다. 4자를 다 채우면 마지막 칸 오른쪽에 남는다 */
  /* 빈 칸이면 가운데, 글자가 있으면 글자 바로 뒤 */
}
.mb-sec2__input .boxes .box.is-cur::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -0.2rem;
  top: 4rem;
  width: 0.4rem;
  height: 6.3rem;
  background: #000;
  opacity: 0;
}
.mb-sec2__input .boxes .box.is-fill.is-cur::after {
  left: auto;
  margin-left: 0;
  right: 3.8rem;
}
.mb-sec2__input .boxes.is-focus .box.is-cur::after {
  animation: mbCaret 1s steps(1) infinite;
}
.mb-sec2__input .boxes .hand-big {
  position: absolute;
  left: 7.4rem;
  top: 4.2rem;
  width: 13.2rem;
  pointer-events: none;
  transition: opacity 0.2s;
}
.mb-sec2__input .boxes.is-active .hand-big {
  opacity: 0;
}
.mb-sec2__input .boxes { /* 9/17 인풋창을 누른 시점부터 손가락 일러스트 비노출 */
  /* 실제 입력은 투명 input 이 받는다. 다만 4칸 전체를 덮고 있어 칸 클릭이 input 에 먹혔다 →
     pointer-events 를 끄고 클릭은 .box 가 받아 그 자리부터 재입력하게 한다 (포커스는 핸들러가 직접 준다) */
}
.mb-sec2__input .boxes input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 4rem;
  text-transform: uppercase;
  pointer-events: none;
}
.mb-sec2__input .caption {
  margin-top: 4.1rem;
  text-align: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.2rem;
  font-weight: 300;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec2__input {
  /* 드롭다운 (인풋 아래 20px, 캡션 위로 덮음) */
}
.mb-sec2__input .mb-dd {
  position: absolute;
  left: -1px;
  top: 59.4rem;
  width: 64.4rem;
  max-height: 28.1rem;
  background: #fff;
  border: 1px solid #c3c3c3;
  z-index: 20;
  display: none;
  overflow: hidden; /* 9/9 height 고정 → 항목 수만큼 (최대 4행 + 스크롤) */
}
.mb-sec2__input .mb-dd.is-open {
  display: block;
}
.mb-sec2__input .mb-dd ul {
  max-height: 28.1rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: #c3c3c3 #fff;
}
.mb-sec2__input .mb-dd ul::-webkit-scrollbar {
  width: 3.8rem;
}
.mb-sec2__input .mb-dd ul::-webkit-scrollbar-track {
  background: #fff;
  border-left: 1px solid #c3c3c3;
}
.mb-sec2__input .mb-dd ul::-webkit-scrollbar-thumb {
  background: #c3c3c3;
  border: 0.5rem solid #fff;
}
.mb-sec2__input .mb-dd li {
  height: 7rem;
  border-bottom: 1px solid #c3c3c3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #5d5d5d;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer; /* 스크롤바 폭은 overflow 시에만 자연 확보 (고정 margin 제거) */
}
.mb-sec2__input .mb-dd li:last-child {
  border-bottom: 0;
}
.mb-sec2__input .mb-dd li:hover, .mb-sec2__input .mb-dd li.is-hit {
  background: #f4f4f4;
}
.mb-sec2__input .mb-dd .empty {
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 2.8rem;
  font-weight: 500;
  color: #5d5d5d;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec2__input .find {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.8rem;
  margin: 4.7rem auto 0;
  width: 51.7rem;
  height: 11.2rem;
  border-radius: 4rem;
  background: #0066e6;
  box-shadow: 0 1.5rem 1rem rgba(0, 56, 180, 0.1);
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec2__input .find .ico {
  width: 6.9rem;
}
.mb-sec2__input .find .mb-arr {
  color: #fff;
}
.mb-sec2__input .sub {
  position: relative;
  margin-top: 7.3rem;
  height: 34rem;
}
.mb-sec2__input .sub .lab2 {
  position: absolute;
  left: 2rem;
  top: 0;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec2__input .sub .mb-card--quiz2 {
  position: absolute;
  left: -0.1rem;
  top: 5.6rem;
  width: 42.6rem;
  height: 21.5rem;
  border-radius: 3rem;
  background: #09d4ff;
  box-shadow: 0 1.5rem 1rem rgba(0, 56, 180, 0.1);
  text-align: left;
  color: #fff;
  /* 9/10 폭 201 이 "나의 MBTI" 실측 폭(시안 199, 라이브 ~201)보다 좁아 MBTI 가 3행으로 넘어가
     배지(top 129) 뒤로 숨었음 → 폭 확보 + nowrap. 줄바꿈은 마크업 <br> 만.
     시안 실측(카드 rel) : 1행 글리프 38..72 / 2행 82..114 → 행간 44, 중심 x 141 */
}
.mb-sec2__input .sub .mb-card--quiz2 .tt2 {
  position: absolute;
  left: 3.5rem;
  top: 3.35rem;
  width: 21.2rem;
  text-align: center;
  white-space: nowrap;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 4.4rem;
}
.mb-sec2__input .sub .mb-card--quiz2 .badge {
  position: absolute;
  left: 5.5rem;
  top: 12.9rem;
  width: 17.9rem;
  height: 5.5rem;
  border-radius: 1rem;
  background: #0066e6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 0 0.9rem 2.1rem rgba(16, 70, 45, 0.17);
}
.mb-sec2__input .sub .mb-card--quiz2 .mb-arr {
  position: absolute;
  left: 26.1rem;
  top: 13.7rem;
  color: #fff;
}
.mb-sec2__input .sub .mb-card--quiz2 .glasses {
  position: absolute;
  left: 26.4rem;
  top: 3.2rem;
  width: 15.3rem;
}
.mb-sec2__input .sub .qboy {
  position: absolute;
  left: 42.2rem;
  top: -4rem;
  width: 22.8rem;
}
.mb-sec2__input .sub { /* 9/9 애니 webp 228x340(물음표 포함) — 시안 PNG NCC 정합: PSD 물음표남아(1089) 대비 -27 */ }
.mb-sec2__input .sub .q {
  position: absolute;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.6rem;
  font-weight: 800;
  color: #09d4ff;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec2__input .sub .q.q1 {
  left: 45.2rem;
  top: 2.6rem;
}
.mb-sec2__input .sub .q.q2 {
  left: 62.3rem;
  top: 13.5rem;
}
.mb-sec2__input .sub .shadow {
  position: absolute;
  left: 44.3rem;
  top: 23.8rem;
  width: 18.6rem;
  height: 4.3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
}
.mb-sec2 {
  /* ── 로딩 (#2-1-1) ── */
}
.mb-sec2__loading .mb-inner {
  min-height: 132.4rem;
}
.mb-sec2__loading .wait {
  position: relative;
  width: 24rem;
  height: 23.2rem;
  margin: 0 auto;
  padding-top: 38.9rem;
  box-sizing: content-box;
}
.mb-sec2__loading .wait img {
  position: absolute;
  left: 0;
  top: 38.9rem;
  width: 24rem;
  opacity: 0;
}
.mb-sec2__loading .wait img.is-show {
  opacity: 1;
}
.mb-sec2__loading .wait {
  /* 9/10 디자이너 애니 webp 는 RGB(알파 없음) 라 240x232 흰 사각형이 그대로 깔린다 → 노란 배경(팝업)에서
     흰 직각 모서리가 보임. 시안 gif 프레임 실루엣 원 피팅 R≈19(그림자 오프셋 제외 18) 로 라운드 처리.
     .hour(모래시계)는 프레임 밖으로 걸쳐야 하므로 .anim 에만 건다 */
}
.mb-sec2__loading .wait .anim {
  border-radius: 1.8rem;
}
.mb-sec2__loading .wait .hour {
  position: absolute;
  left: 17.9rem;
  top: 52.3rem;
  width: 11.3rem;
  opacity: 1;
}
.mb-sec2__loading .tt {
  margin-top: 5.2rem;
  text-align: center;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 4.4rem;
  font-weight: 800;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 7rem;
}
.mb-sec2__loading .caption {
  margin-top: 2.6rem;
  text-align: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.2rem;
  font-weight: 300;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 5.2rem;
}
@media (max-width: 720px) {
  .mb-sec2 .mb-deco {
    display: none;
  }
  .mb-sec2__input .mb-dd {
    left: -0.2rem;
    width: 64.4rem;
  }
}

@keyframes mbCaret {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}
@keyframes mbHappySpin {
  to {
    transform: rotate(360deg);
  }
}
/* 9/17 표지 캐릭터 6종 : 등장 후 반복되던 탄성(str-face-boing) 제거 — 등장 모션만 유지 */
/* ?motion=0 (검수) — mbti.js 가 html 에 붙이는 클래스. CSS 상시 모션 정지 */
html.mb-still .mb-sec3__before .happy .ring {
  animation: none;
}

/* ============================================================
 * SEC3 — 아동 리스트 (bg #faf4cd)  PC 2553~3961 / MO 2554~4198
 * 상태: .is-before(랜덤 추천) / .is-after(MBTI 입력 완료)
 * ============================================================ */
.mb-sec3 {
  background: #faf4cd;
  padding-bottom: 12.9rem;
}
.mb-sec3__head {
  position: relative;
  text-align: center;
}
.mb-sec3__before, .mb-sec3__after {
  display: none;
}
.mb-sec3.is-before .mb-sec3__before, .mb-sec3.is-after .mb-sec3__after {
  display: block;
}
.mb-sec3 {
  /* before 타이틀: 원형 뱃지(휘어진 영문 = 이미지) + 2줄 */
}
.mb-sec3__before .row {
  position: relative;
  padding-top: 8.5rem;
}
.mb-sec3__before {
  /* 원형 텍스트 뱃지 — PC PSD (704,2638) 125x121 / MO (104,2639) 동일 치수(컬럼 기준 left 64 공통)
     .ring 은 상시 회전(원 중심 = 글자 블롭 원 피팅 61.95,61.43), .face 는 고정. ?motion=0 이면 정지 */
}
.mb-sec3__before .happy {
  position: absolute;
  left: 6.4rem;
  top: 8.5rem;
  width: 12.5rem;
  height: 12.1rem;
}
.mb-sec3__before .happy .ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 12.5rem;
  transform-origin: 6.195rem 6.143rem;
  animation: mbHappySpin 14s linear infinite;
}
.mb-sec3__before .happy .face {
  position: absolute;
  left: 3rem;
  top: 2.7rem;
  width: 6.7rem;
}
.mb-sec3__before .happy { /* 그룹 rel — PSD 아동얼굴1 (734,2665) 67x64 */ }
.mb-sec3__before {
  /* 9/9 시안 실측: 1행 "후원자님을" 중심 1013(PSD 선행 공백) = 페이지 중앙 +53 → text-indent 107(1행만), 2행은 중앙 958 */
  /* 9/17 tl-line 리빌로 줄마다 블록(.tl-line)이 되면서 text-indent 가 2행에도 걸리고 .tl-in 에 상속돼 두 번 밀렸다
     → 첫 줄에만 남기고 안쪽은 0 으로 되돌린다 (JS 미실행 시를 위해 .tt 의 값은 유지) */
}
.mb-sec3__before .tt {
  text-align: center;
  padding-top: 2.8rem;
  white-space: nowrap;
  text-indent: 10.7rem;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 6rem;
  font-weight: 800;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 9rem;
}
.mb-sec3__before .tt .tl-line {
  text-indent: 0;
}
.mb-sec3__before .tt .tl-line:first-child {
  text-indent: 10.7rem;
}
.mb-sec3__before .tt .tl-in {
  text-indent: 0;
}
.mb-sec3 {
  /* after 타이틀: 정의 + (후원자님은) MBTI */
}
.mb-sec3__after .def {
  padding-top: 12.1rem;
  text-align: center;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 4.6rem;
  font-weight: 800;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec3__after .row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.1rem;
  margin-top: 2.7rem;
}
.mb-sec3__after .bub {
  position: relative;
  width: 12.2rem;
  height: 9.2rem;
  flex: none;
  margin-top: -0.2rem;
}
.mb-sec3__after .bub img {
  width: 100%;
}
.mb-sec3__after .bub span {
  position: absolute;
  left: 0;
  top: 3.1rem;
  width: 100%;
  text-align: center;
  transform: rotate(-5deg);
  font-family: "UhBeeHyeki", "Pretendard Variable", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec3__after { /* 말풍선 기울기에 맞춰 -5deg */ }
.mb-sec3__after .type {
  position: relative;
  overflow: hidden;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 7rem;
  font-weight: 800;
  color: #0ab35c;
  letter-spacing: 0;
  line-height: 1;
  padding-bottom: 1.6rem;
}
.mb-sec3__after .type::after {
  content: "";
  position: absolute;
  left: -0.2rem;
  right: -0.2rem;
  bottom: 0;
  height: 1.3rem;
  border-radius: 0.7rem;
  background: #0ab35c;
}
.mb-sec3__after .type {
  /* 9/10 글자 단위 리빌 — .ch 가 마스크, .in 이 y 100% -> 0 (JS typeReveal 가 감쌈) */
}
.mb-sec3__after .type .ch {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.mb-sec3__after .type .ch .in {
  display: inline-block;
}
.mb-sec3 {
  /* 카드 슬라이더 */
}
.mb-sec3__list {
  position: relative;
  width: 122.2rem;
  margin: 5.8rem auto 0; /* 카드 top 2902 — 시안 PNG 픽셀 측정으로 보정 */
  /* 9/9 클립 없음 — 대기 카드는 .is-out-l/r 로 투명·바깥 이동 상태라 컨테이너 옆에 보이지 않고,
     넘기면 화면 밖에서 슬라이드해 들어오고 나갈 때도 밖으로 밀려 사라진다.
     (잘라내면 카드 그림자·라운드 모서리가 깎이고 화살표도 걸려서 클립은 쓸 수 없다) */
}
.mb-sec3__list .swiper {
  overflow: visible;
}
.mb-sec3__list {
  /* 9/23 투명한 대기 카드가 좌우 여백에 그대로 깔려 있어 여백을 누르면 그 카드가 선택됐다
     (4번째 = 컨테이너 기준 left 1250 → 화면 1599~1988). 보이는 카드만 누를 수 있게 한다.
     스와이프는 .swiper 컨테이너가 받으므로 영향 없음 */
}
.mb-sec3__list .swiper-slide:not(.is-in) {
  pointer-events: none;
}
.mb-sec3__list .swiper-slide {
  width: 38.9rem;
}
.mb-sec3__list .mb-chev {
  top: 31.9rem;
}
.mb-sec3__list .mb-chev.prev {
  left: -8.9rem;
}
.mb-sec3__list .mb-chev.next {
  right: -8.9rem;
}
.mb-sec3.is-after .mb-sec3__list {
  margin-top: 5.6rem;
}
.mb-sec3 {
  /* 아동 카드 (PC 389x703: 프레임 top 185, 선택 시 0) */
}
.mb-sec3 .mb-child {
  position: relative;
  width: 38.9rem;
  height: 70.3rem;
  text-align: left;
  cursor: pointer;
}
.mb-sec3 .mb-child .frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 18.5rem;
  bottom: 0;
  border-radius: 4rem;
  background: #ffc92b;
  box-shadow: 0 2rem 2rem rgba(163, 100, 32, 0.18);
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}
.mb-sec3 .mb-child {
  /* PSD 사각형 22 DropShadow + 흰 하이라이트 2px */
  /* 9/9 흰 폴라로이드 프레임을 PSD '모양 6' 통이미지로 교체 — 셰이프 자체가 사진 자리가 뚫린 형태라
     가운데로 .pic 가 비쳐 보이고, 우측 상단 카피라이트(GN) 노치도 이미지에 포함돼 있다.
     .pic 는 프레임 구멍 실측 치수로 고정된 상자 — 개발이 넣는 사진 크기와 무관하게 주변이 안 밀린다.
     (상자 치수·프레임 태그는 변경 금지) */
}
.mb-sec3 .mb-child .photo {
  position: absolute;
  left: 3.6rem;
  top: 2.9rem;
  width: 31.8rem;
  height: 37.2rem;
  border-radius: 2.7rem;
  box-shadow: 0 0 2rem rgba(91, 90, 0, 0.18);
  z-index: 1; /* PSD 모양 6 DropShadow dist0 — 봉투 플랩(body) 아래 */
  /* .cut = 프레임 컷(sec3_photo_frame_v2.webp 318x372) 의 투명 창 실측 (19,19) 278x272 = 사진이 보일 수 있는 전부.
     사진(.pic)은 PSD 실측 치수(387,2934 314x307) 그대로 두고 이 상자가 잘라낸다 →
     어떤 비율의 실사진이 와도 프레임 밖으로 못 나간다. 기준은 위(object-position: top).
     .photo 에 overflow 를 걸면 하트 컨페티까지 잘리므로 사진만 감싼다 */
}
.mb-sec3 .mb-child .photo .cut {
  position: absolute;
  left: 1.9rem;
  top: 1.9rem;
  right: 2.1rem;
  bottom: 0;
  border-radius: 2rem;
  overflow: hidden;
}
.mb-sec3 .mb-child .photo { /* 높이는 잡지 않는다 — 아래쪽은 시안대로 봉투 플랩 뒤로 이어짐 */ }
.mb-sec3 .mb-child .photo .cut .pic {
  position: absolute;
  left: -1.7rem;
  top: -1.6rem;
  width: 31.4rem;
  height: 30.7rem;
  object-fit: cover;
  object-position: top;
}
.mb-sec3 .mb-child .photo .fr {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.mb-sec3 .mb-child .photo .fr img {
  display: block;
  width: 100%;
  height: 100%;
}
.mb-sec3 .mb-child .photo .heart {
  position: absolute;
  left: 2.9rem;
  top: 3rem;
  width: 4.7rem;
  height: 3rem;
  z-index: 2;
}
.mb-sec3 .mb-child .photo {
  /* 9/10 하트 소프트 섀도 — 컷(흰 아웃라인/노란 채움)이 밝은 사진 위에서 묻히지 않게.
     컨페티(::after box-shadow 조각)까지 흐려지지 않도록 .heart 가 아니라 img 에만 건다 */
}
.mb-sec3 .mb-child .photo .heart img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.2rem 0.3rem rgba(0, 0, 0, 0.22));
}
.mb-sec3 .mb-child .photo .heart .on {
  display: none;
}
.mb-sec3 .mb-child {
  /* [PC] 마우스 호버 시 배경 카드 상승 (기획 14-3). MO 는 호버·클릭 인터랙션 없음 (기획 14-4).
     선택 상태(.is-on) 프레임 상승은 시안 사각형 22 기준 : 선택 2902(카드 원점) / 미선택 3087(= top 185) */
}
@media (hover: hover) {
  .mb-sec3 .mb-child:hover .frame {
    top: 0;
  }
}
.mb-sec3 .mb-child.is-on .frame {
  top: 0;
}
.mb-sec3 .mb-child {
  /* 하트 on : PC 선택 상태(.is-on) 또는 스크롤 도착(.is-heart-on, 9/10) */
}
.mb-sec3 .mb-child.is-on, .mb-sec3 .mb-child.is-heart-on {
  /* 켜질 때 : 눌렸다 튕기며 켜짐 (9/10) */
}
.mb-sec3 .mb-child.is-on .photo .heart .off, .mb-sec3 .mb-child.is-heart-on .photo .heart .off {
  display: none;
}
.mb-sec3 .mb-child.is-on .photo .heart .on, .mb-sec3 .mb-child.is-heart-on .photo .heart .on {
  display: block;
}
.mb-sec3 .mb-child.is-on .photo .heart, .mb-sec3 .mb-child.is-heart-on .photo .heart {
  animation: mb-heart-on 0.52s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.mb-sec3 .mb-child {
  /* 컨페티(bang 프리셋 이식 — 출처 assets/mobile/css/mypage/index.css)는 스크롤 도착 첫 카드에서만.
     카드마다 뿌리면 blur box-shadow 페인트가 스와이프 전환과 겹쳐 버벅임 (9/10)
     프리셋 좌표가 ±400px(페이지 폭죽 기준)이라 emitter 를 0.26 배로 축소해 하트 크기에 맞추고,
     조각 크기도 같이 줄어들므로 기준 박스를 r(19) 로 키워(19x0.26 = 약 5px) 조각 크기를 유지 */
  /* 하트 좋아요 파티클 — ::before = 버블 링 / ::after = 스파클 14점. 둘 다 하트 뒤(z-index -1)에서 터진다 */
}
.mb-sec3 .mb-child .photo .heart {
  isolation: isolate;
}
.mb-sec3 .mb-child .photo .heart::before, .mb-sec3 .mb-child .photo .heart::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.mb-sec3 .mb-child .photo .heart::before {
  box-sizing: border-box;
  margin: -36px;
  width: 72px;
  height: 72px;
  border: solid 36px #ddab17;
  transform: scale(0);
}
.mb-sec3 .mb-child .photo .heart::after {
  margin: -3px;
  width: 6px;
  height: 6px;
  box-shadow: 5.2px -48px 0 -3px hsl(0, 100%, 75%), -5.2px -42px 0 -3px hsl(51.43, 100%, 75%), 40.77px -25.86px 0 -3px hsl(51.43, 100%, 75%), 29.6px -30.25px 0 -3px hsl(102.86, 100%, 75%), 45.64px 15.75px 0 -3px hsl(102.86, 100%, 75%), 42.1px 4.28px 0 -3px hsl(154.29, 100%, 75%), 16.14px 45.5px 0 -3px hsl(154.29, 100%, 75%), 22.9px 35.59px 0 -3px hsl(205.71, 100%, 75%), -25.51px 40.99px 0 -3px hsl(205.71, 100%, 75%), -13.54px 40.1px 0 -3px hsl(257.14, 100%, 75%), -47.95px 5.62px 0 -3px hsl(257.14, 100%, 75%), -39.79px 14.41px 0 -3px hsl(308.57, 100%, 75%), -34.29px -33.99px 0 -3px hsl(308.57, 100%, 75%), -36.08px -22.12px 0 -3px hsl(0, 100%, 75%);
}
.mb-sec3 .mb-child.is-bang .photo .heart::before {
  animation: mb-heart-bubble 1s ease-out;
}
.mb-sec3 .mb-child.is-bang .photo .heart::after {
  animation: mb-heart-sparkles 1s ease-out;
}
.mb-sec3 .mb-child .body {
  position: absolute;
  left: 0;
  right: 0;
  top: 26.9rem;
  bottom: 0;
  z-index: 2;
  border-radius: 0 0 4rem 4rem;
  overflow: hidden;
}
.mb-sec3 .mb-child .body .notch {
  display: block;
  width: calc(100% + 2px);
  margin-left: -1px;
}
.mb-sec3 .mb-child .body { /* 모양 11: 봉투 플랩 노치 흰 셰이프 — 좌우 1px 확장(서브픽셀 틈 방지) */ }
.mb-sec3 .mb-child .body .white {
  position: absolute;
  left: 0;
  right: 0;
  top: 31.3rem;
  bottom: 0;
  background: #fff;
}
.mb-sec3 .mb-child {
  /* 9/9 PSD 재추출: 컷에 회전·stroke5·그림자(17%×.6) 가 포함 → 컨테이너 rotate 제거(이중 회전 방지), 텍스트만 -12° */
}
.mb-sec3 .mb-child .flower {
  position: absolute;
  left: 0.9rem;
  top: 24.9rem;
  width: 10.8rem;
  height: 11.1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mb-sec3 .mb-child .flower img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.mb-sec3 .mb-child .flower {
  /* 컷이 그림자만큼 아래·오른쪽으로 커져 컨테이너 중심 ≠ 꽃 중심 → 실측 오프셋(-2,-3.5)만큼 당겨 꽃 정중앙 */
}
.mb-sec3 .mb-child .flower span {
  position: relative;
  margin: -0.65rem 0 0 0;
  transform: rotate(-12deg);
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec3 .mb-child {
  /* 강조 단어 뒤 별 낙서 — PSD 별 515,3248 60x51. 컷에 오른쪽 위 작은 별이 붙어 있어 컷 중심 ≠ 타원 중심이라
     .hl 박스 중앙에 그냥 맞추면 타원이 단어에서 좌·상으로 밀린다. 9/10 시안 실측(컷 중심 544,3273.5)에 맞춘 오프셋 */
  /* x 는 단어 정중앙, y 만 53% + (-5).
     % 기준 left(23%) 로 두면 2자 단어는 중앙·3자 단어는 6.4px 왼쪽으로 어긋나므로 50% 고정 */
}
.mb-sec3 .mb-child .hl {
  position: relative;
  display: inline-block;
}
.mb-sec3 .mb-child .hl .star {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 6rem;
  transform: translate(-50%, -50%) translate(0, -0.5rem);
  z-index: -1;
}
.mb-sec3 .mb-child .hand {
  position: absolute;
  left: 0;
  width: 100%;
  top: 35.7rem;
  text-align: center;
  z-index: 3;
  font-family: "UhBeeHyeki", "Pretendard Variable", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  color: #221f1f;
  letter-spacing: -0.065em;
  line-height: 1;
  white-space: nowrap;
}
.mb-sec3 .mb-child { /* 손글씨 문구 (볼드 face 없음) / 9/10 자간 = PSD tracking -65 → -0.065em (-0.02em 이라 시안보다 20px 넓었고 별 낙서가 단어에서 밀렸음) · font-style italic 제거 (PSD FauxItalic 없음, MO 시안 대조에서 시안은 직립) */ }
.mb-sec3 .mb-child .desc {
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 42.7rem;
  text-align: center;
  z-index: 3;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 2.2rem;
  font-weight: 500;
  color: #262424;
  letter-spacing: 0;
  line-height: 3.15rem;
  word-break: keep-all;
}
.mb-sec3 .mb-child .desc b {
  font-weight: 800;
}
.mb-sec3 .mb-child .btn {
  position: absolute;
  left: 4.4rem;
  top: 59.2rem;
  width: 30.3rem;
  height: 7.3rem;
  border-radius: 2rem;
  background: #0066e6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  z-index: 3;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec3 .mb-child .btn .ico {
  display: none;
  width: 6.9rem;
}
.mb-sec3 {
  /* 후원하기 버튼 (603x124) */
}
.mb-sec3__btns {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 9.8rem;
  width: 122.2rem;
  margin-left: -29.1rem; /* 3703 - 3605 / 버튼 2개 행(1222)은 컬럼(640) 초과 → 중앙 확장 */
}
.mb-sec3__btns .mb-cta {
  flex: none;
}
.mb-sec3__btns .mb-cta {
  position: relative;
  width: 60.3rem;
  height: 12.4rem;
  border-radius: 4rem;
  display: block;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 0.9rem 2.1rem rgba(16, 70, 45, 0.17);
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
  transition: transform 0.2s; /* 일러는 PSD 에서 버튼에 클리핑 → overflow hidden */
}
.mb-sec3__btns .mb-cta:hover {
  transform: translateY(-0.4rem);
}
.mb-sec3__btns .mb-cta .txt {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  white-space: nowrap;
}
.mb-sec3__btns .mb-cta .mb-arr {
  color: #fff;
}
.mb-sec3__btns .mb-cta--spon {
  background: #0ab35c;
}
.mb-sec3__btns .mb-cta--spon .illu {
  position: absolute;
  left: 7.6rem;
  top: 1.7rem;
  width: 14.6rem;
}
.mb-sec3__btns .mb-cta--spon .txt {
  left: 24.7rem;
}
.mb-sec3__btns .mb-cta--opp {
  background: #ff9d34;
  letter-spacing: -0.045em;
}
.mb-sec3__btns .mb-cta--opp .illu {
  position: absolute;
  left: 3.1rem;
  top: 1rem;
  width: 12.7rem;
}
.mb-sec3__btns .mb-cta--opp .txt {
  left: 14.9rem;
}
@media (max-width: 720px) {
  .mb-sec3 {
    padding-bottom: 11.5rem;
  }
  .mb-sec3__list {
    width: 49.2rem;
    margin-top: 7.2rem;
  }
  .mb-sec3__list .swiper-slide {
    width: 49.2rem;
  }
  .mb-sec3__list .mb-chev {
    top: 40.6rem;
  }
  .mb-sec3__list .mb-chev.prev {
    left: -7.3rem;
  }
  .mb-sec3__list .mb-chev.next {
    right: -7.3rem;
  }
  .mb-sec3.is-after .mb-sec3__list {
    margin-top: 5.4rem;
  }
  .mb-sec3 .mb-child {
    width: 49.2rem;
    height: 85.6rem;
    cursor: default;
  }
  .mb-sec3 .mb-child .frame {
    top: 19.9rem;
  }
  .mb-sec3 .mb-child .flower {
    left: 1.1rem;
    top: 28.1rem;
    width: 13.7rem;
    height: 14.3rem;
  }
  .mb-sec3 .mb-child .flower span {
    font-size: 2.3rem;
  }
  .mb-sec3 .mb-child { /* 9/9 MO PSD 126,3183 126x126 → 컷(109x114, 그림자 포함) 비율 1.26 배 */ }
  .mb-sec3 .mb-child .photo {
    left: 4.6rem;
    top: 0;
    width: 40.2rem;
    height: 47.2rem;
    border-radius: 3.4rem;
  }
  .mb-sec3 .mb-child .photo .cut {
    left: 2.4rem;
    top: 2.4rem;
    right: 2.5rem;
    border-radius: 2.4rem;
  }
  .mb-sec3 .mb-child .photo { /* 9/17 MO 프레임 컷(402x472) 투명 창 실측 (24,24 폭 353) */ }
  .mb-sec3 .mb-child .photo .cut .pic {
    left: -2.2rem;
    top: -2.2rem;
    width: 39.8rem;
    height: 39.4rem;
  }
  .mb-sec3 .mb-child .photo { /* 9/9 MO PSD 실측: 사진 159,2902 401x394 (프레임 158,2900 402x472) */
    /* MO 는 카드가 한 장씩만 보여 선택 기능이 없고 Mo PSD 아동카드에도 하트 레이어가 없다 */
  }
  .mb-sec3 .mb-child .photo .heart {
    display: none;
    left: 3.7rem;
    top: 3.8rem;
  }
  .mb-sec3 .mb-child .body {
    top: 30.5rem;
  }
  .mb-sec3 .mb-child .body .white {
    top: 39.6rem;
  }
  .mb-sec3 .mb-child .flower {
    left: 0.7rem;
    top: 27.4rem;
    width: 13.9rem;
    height: 14.3rem;
  }
  .mb-sec3 .mb-child .flower span {
    font-size: 2.3rem;
  }
  .mb-sec3 .mb-child .hl .star {
    width: 7.6rem;
  }
  .mb-sec3 .mb-child .hand {
    top: 43.2rem;
    font-size: 3.6rem;
    letter-spacing: -0.02em;
  }
  .mb-sec3 .mb-child { /* 9/10 MO 는 PC 자간(-0.065em)을 물려받으면 시안보다 22px 좁다. 시안 "우리는 운명이에요♡" 실측 폭 228 에 맞는 값 = -0.02em (MO PSD tracking 은 0 이지만 그대로 두면 235 로 7px 넓음) */ }
  .mb-sec3 .mb-child .desc {
    top: 50.8rem;
    left: 3rem;
    right: 3rem;
    font-size: 2.8rem;
    line-height: 4rem;
  }
  .mb-sec3 .mb-child .btn {
    left: 2.6rem;
    top: 71rem;
    width: 44.3rem;
    height: 10.2rem;
    font-size: 3.2rem;
  }
  .mb-sec3 .mb-child .btn .ico {
    display: block;
  }
  .mb-sec3__btns {
    flex-direction: column;
    align-items: center;
    margin-top: 6.7rem;
    gap: 1.6rem;
    width: auto;
    margin-left: 0;
  }
  .mb-sec3__btns .mb-cta {
    width: 60.2rem;
    height: 12.2rem;
  }
  .mb-sec3__btns .mb-cta--spon .illu {
    left: 7.6rem;
    top: 1.6rem;
  }
  .mb-sec3__btns .mb-cta--spon .txt {
    left: 24.7rem;
  }
  .mb-sec3__btns .mb-cta--opp .illu {
    left: 2.6rem;
    top: 0.9rem;
  }
  .mb-sec3__btns .mb-cta--opp .txt {
    left: 14.4rem;
  }
}

/* ============================================================
 * SEC4 — 여정 + 편지  PC 3958~6096 (2138) / MO 4195~6487
 * ============================================================ */
.mb-sec4 {
  position: relative;
  overflow: hidden;
  padding-bottom: 18.1rem;
  background: linear-gradient(180deg, #f0ffea 0%, #e1f1fe 100%);
  /* 지구 526~1350, 5727~섹션 끝(6096). 9/9 박스 = PSD globe 레이어 마스크 프로필(열 938 실측: 0 → 5775 부터 상승 → 5960~5980 .95 → 6095 0) 을 CSS mask 로, 이미지는 안에서 회전·상승 */
}
.mb-sec4 .globe-box {
  position: absolute;
  left: 50%;
  top: 176.9rem;
  width: 82.4rem;
  height: 36.9rem;
  margin-left: -43.4rem;
  pointer-events: none;
  /* 스톱은 % (PC 369px 기준 48/123/173/233/253/303/333) → MO 박스 높이(318)에도 비례 적용 */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.27) 33%, rgba(0, 0, 0, 0.73) 47%, rgba(0, 0, 0, 0.95) 63%, rgba(0, 0, 0, 0.95) 69%, rgba(0, 0, 0, 0.56) 82%, rgba(0, 0, 0, 0.15) 90%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.27) 33%, rgba(0, 0, 0, 0.73) 47%, rgba(0, 0, 0, 0.95) 63%, rgba(0, 0, 0, 0.95) 69%, rgba(0, 0, 0, 0.56) 82%, rgba(0, 0, 0, 0.15) 90%, rgba(0, 0, 0, 0) 100%);
}
.mb-sec4 .globe-box .globe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform-origin: 50% 50%;
}
.mb-sec4__tt {
  position: relative;
  z-index: 1;
  text-align: center;
  white-space: nowrap;
  margin-left: -6rem;
  margin-right: -6rem;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 6rem;
  font-weight: 800;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 9rem;
  /* PSD 타이틀 폭 646/717 — 컬럼(640) 초과분을 좌우로 확장해 페이지 중앙 기준 중앙정렬 */
}
.mb-sec4__tt.j {
  padding-top: 12.6rem;
}
.mb-sec4__tt.l {
  margin-top: 3.2rem;
}
.mb-sec4 {
  /* 9/9 여정 타이틀 데코 — PSD title/deco 개별 레이어(FX 포함 렌더). 좌표 = PC mb-inner(640) 기준 */
}
.mb-sec4 .tdeco {
  position: absolute;
  pointer-events: none;
}
.mb-sec4 .tdeco.cloud-l {
  left: -11.3rem;
  top: 11.6rem;
  width: 10.7rem;
  filter: drop-shadow(0 0.6rem 0.6rem rgba(255, 255, 255, 0.9));
}
.mb-sec4 .tdeco { /* 9/9 디자이너 컷 · 흰 그림자는 아래로만 */ }
.mb-sec4 .tdeco.heart {
  left: 63.1rem;
  top: 17rem;
  width: 4.9rem;
}
.mb-sec4 .tdeco.plane {
  left: 65.6rem;
  top: 14.2rem;
  width: 17.7rem;
}
.mb-sec4 .tdeco.cloud-r {
  left: 75.1rem;
  top: 27.9rem;
  width: 9.5rem;
  filter: drop-shadow(0 0.6rem 0.6rem rgba(255, 255, 255, 0.9));
}
.mb-sec4 {
  /* 여정 슬라이더 (1222x585) */
}
.mb-sec4__journey {
  position: relative;
  width: 122.2rem;
  margin: 8.3rem auto 0;
  z-index: 1;
}
.mb-sec4__journey .mb-chev {
  color: #0ab35c;
  top: 26.3rem;
}
.mb-sec4__journey .mb-chev.prev {
  left: -8.8rem;
}
.mb-sec4__journey .mb-chev.next {
  right: -8.8rem;
}
.mb-sec4__journey {
  /* 9/9 고정 프레임(흰 카드·격자·헤더) 안에서 콘텐츠(사진·텍스트)만 스와이프. 헤더 아이콘은 슬라이드마다 Y축 회전, 번호만 갱신 */
}
.mb-sec4__journey .jframe {
  position: relative;
  width: 122.2rem;
  height: 58.5rem;
  border-radius: 4rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1.5rem 1rem rgba(0, 56, 180, 0.1);
  background-image: linear-gradient(#f7f7f7 2px, transparent 2px), linear-gradient(90deg, #f7f7f7 2px, transparent 2px);
  background-size: 2.15rem 2.15rem;
  background-position: 0.45rem 9.9rem; /* 시안 격자 실측: 21.5px 피치, 2px, #f7f7f7 */
}
.mb-sec4__journey .jframe .head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 9rem;
  background: #09d4ff;
  display: flex;
  align-items: center;
  z-index: 2;
}
.mb-sec4__journey .jframe .head .ico {
  position: absolute;
  left: 3.1rem;
  top: 1.6rem;
  width: 5.9rem;
  height: 5.9rem;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 30rem;
}
.mb-sec4__journey .jframe .head .ico img {
  width: 3.6rem;
}
.mb-sec4__journey .jframe .head .name {
  position: absolute;
  left: 10.9rem;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}
.mb-sec4__journey .jframe .head .name .num {
  display: inline-block;
}
.mb-sec4__journey .jframe .swiper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.mb-sec4__journey .jcard {
  position: relative;
  width: 122.2rem;
  height: 58.5rem;
}
.mb-sec4__journey .jcard .pic {
  position: absolute;
  max-width: none;
  height: auto;
}
.mb-sec4__journey .jcard { /* PSD 합성 컷 — 좌표·폭은 JS 가 data 속성으로 지정 */ }
.mb-sec4__journey .jcard .txt {
  position: absolute;
  left: 77.7rem;
  top: 22.7rem;
  width: 38rem;
  text-align: center; /* PSD 타이틀 bbox 1128~1506 (중심 967) */
}
.mb-sec4__journey .jcard .txt h3 {
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 4.6rem;
  font-weight: 800;
  color: #0066e6;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}
.mb-sec4__journey .jcard .txt p {
  margin-top: 2.7rem;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 2.8rem;
  font-weight: 500;
  color: #262424;
  letter-spacing: 0;
  line-height: 4.2rem;
}
.mb-sec4__journey .jcard {
  /* .copy 규칙 제거 (9/9) — 카피라이트는 사진 컷(여정4·5)에 포함, alt 로 제공 */
}
.mb-sec4__journey .mb-dots {
  position: absolute;
  right: 5.4rem;
  top: 4rem;
  display: flex;
  gap: 1.4rem;
  z-index: 3;
}
.mb-sec4__journey .mb-dots span {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #119ebc;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mb-sec4__journey .mb-dots span.is-on {
  background: #fff;
  transform: scale(1.15);
}
.mb-sec4__journey { /* 9/9 전환 트랜지션 */ }
.mb-sec4 {
  /* 편지 타이틀 데코 */
}
.mb-sec4__lhead {
  position: relative;
  margin-top: 5rem;
  /* 9/10 x959~960 열만 좁게 잡아 실측(시안 기준, 여정 카드 흰 판 바닥 = 0) : 세로선 위 51 / 길이 87 / 아래 46 → 타이틀 글리프 183.
     기존 44+90 은 위 여백 45·길이 90 이라 위가 6 좁고 선이 3 길었다. */
}
.mb-sec4__lhead .vline {
  display: block;
  width: 2px;
  height: 8.7rem;
  margin: 0 auto;
  background: #000;
}
.mb-sec4__lhead { /* 9/9 시안 실측 2px (PSD height line stroke 2). 2px 이하 헤어라인은 rem 환산 없이 px 고정 */ }
.mb-sec4__lhead .mb-sec4__tt.l {
  margin-top: 5.3rem;
}
.mb-sec4__lhead .flower {
  position: absolute;
  left: -4.6rem;
  top: 8.5rem;
  width: 12rem;
}
.mb-sec4__lhead .pigeon {
  position: absolute;
  left: 60.7rem;
  top: 8.5rem;
  width: 14.2rem;
}
.mb-sec4__lhead .letter {
  position: absolute;
  left: 68.4rem;
  top: 18.8rem;
  width: 6.5rem;
}
.mb-sec4 {
  /* 편지 슬라이더 (PC 2장: 594x550 × 2, gap 36) */
}
.mb-sec4__letters {
  position: relative;
  width: 122.4rem;
  margin: 7.5rem auto 0;
  z-index: 1;
}
.mb-sec4__letters .swiper {
  overflow: visible;
}
.mb-sec4__letters { /* 대기 카드는 .is-out-l/r 로 화면 밖 — 클립 불필요 */ }
.mb-sec4__letters .swiper-slide {
  width: 59.4rem;
}
.mb-sec4__letters .mb-chev {
  color: #0ab35c;
  top: 25.9rem;
}
.mb-sec4__letters .mb-chev.prev {
  left: -8.6rem;
}
.mb-sec4__letters .mb-chev.next {
  right: -8.6rem;
}
.mb-sec4__letters .lcard {
  position: relative;
  width: 59.4rem;
  height: 55rem;
  text-align: left;
  /* PSD 편지1: 뒷장 모양 1832(+3px) grad #009a0e 10% → #a8dfc2 89% / 앞장 grad #dbffed 10% → #fff 89% + DropShadow — 9/9 뒷장을 flat box-shadow 대신 ::before 그라데이션으로 */
}
.mb-sec4__letters .lcard .paper {
  position: absolute;
  left: 1.8rem;
  top: 0;
  width: 57.3rem;
  height: 54.9rem;
  border-radius: 5.2rem; /* 9/9 시안 실측 곡률 ≈52 (기존 30) */
  background: linear-gradient(180deg, #fff 11%, #dbffed 90%);
  box-shadow: 0 1.5rem 1rem rgba(0, 56, 180, 0.1);
}
.mb-sec4__letters .lcard .paper::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 5.2rem;
  background: linear-gradient(180deg, #a8dfc2 11%, #009a0e 90%);
  z-index: -1;
}
.mb-sec4__letters .lcard { /* 9/9 PSD stop 순서는 아래→위 — 위 연녹 / 아래 진녹 */ }
.mb-sec4__letters .lcard .stripe {
  position: absolute;
  left: 6.6rem;
  top: 1rem;
  width: 47.7rem;
}
.mb-sec4__letters .lcard .stamp {
  position: absolute;
  left: 46.8rem;
  top: 3.5rem;
  width: 11.5rem;
}
.mb-sec4__letters .lcard .txt .emo {
  font-style: normal;
  display: inline-block;
}
.mb-sec4__letters .lcard { /* 본문 하트 이모지 — 파티클 컨트롤 대상 (9/10) */
  /* 하트 idle — pub_debug 프리셋 이식 (출처 assets/css/magazine/202608/2608_magazine_sb.css, 9/10) */
}
.mb-sec4__letters .lcard.green .txt .emo-heart {
  animation: sbStarPopSoft 1.2s ease-in-out infinite;
}
.mb-sec4__letters .lcard.blue .txt .emo-heart {
  animation: str-star-pulse 1.2s ease-in-out infinite;
}
.mb-sec4__letters .lcard { /* 9/9 _v3: PSD 도장 레이어 직접 추출(115x84) — PNG 언블렌딩본에 딸려오던 종이 라운드 엣지 제거 */ }
.mb-sec4__letters .lcard .txt {
  position: absolute;
  left: 7.6rem;
  top: 6.1rem;
  width: 44rem;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 2.6rem;
  font-weight: 500;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 4.2rem;
}
.mb-sec4__letters .lcard .txt b {
  font-weight: 700;
}
.mb-sec4__letters .lcard .illu {
  position: absolute;
}
.mb-sec4__letters .lcard .illu.l1 {
  left: 35rem;
  top: 26.9rem;
  width: 23.3rem;
}
.mb-sec4__letters .lcard .illu.l2 {
  left: 34.5rem;
  top: 29.8rem;
  width: 23.2rem;
}
.mb-sec4__letters .lcard .illu.l3 {
  left: 35.6rem;
  top: 26.3rem;
  width: 22.7rem;
}
.mb-sec4__letters .lcard .illu.l4 {
  left: 36.2rem;
  top: 26.2rem;
  width: 20.5rem;
}
.mb-sec4__letters .lcard .tab {
  position: absolute;
  left: 0;
  top: 45.4rem;
  width: 54.2rem;
  height: 9.6rem;
  /* 9/9 PSD 모양 1833 = 세로 그라데이션 fill (#09c463 → #04951b). psd-tools 가 그라데이션 fill 을 못 그려 컷이 단색 → 컷을 mask 로 쓰고 CSS 그라데이션 */
  background: linear-gradient(180deg, #04951b 0%, #09c463 100%); /* 9/9 시안 실측: 위 진녹(3,150,31) → 아래 밝은녹(8,195,97) */
  -webkit-mask: url("data:image/webp;base64,UklGRtoDAABXRUJQVlA4TM4DAAAvG4IXEFZR07YBk/JnPu+ISAw66rSRJEny35NMS1fqHlJsl77N7mEvMBAIpFDrdqpt25rMN7y6S3PyLqJ71QMgOWlUOxYu8jgGTU50d4kfwrRtY7XdbpEbgJEiSfmH0kVSmiVPXh8881tHRg0UBCDDxoKxC0mwrR2SFJGZ1bZt27Z7Za1s27axsm3btm1v7e6ZjPgcuW0jSZR7nXnDzH3fhqTIjrwhQixyID2S7UsBAaSgBxeAKMEOeGiDD+hVftCA+yQKXtCBMGALBCwsJlawggIIu4PaRAvWkPu0BhxAumAAtsagPvmCP5Q/XZ0TsQNkPYlcjgIZk4mYWtK8hpTps/Y0pKP/nOmrdpenUT36Jz3aVZ1O/qOmd1pTnO97yJofe3Fp3vqmzXdL81zcvT5f2cHhAdjdwfeBhM4B/3/DO9g/IMgc2Dvu/0GkTCA7AI4X+AxwqwQmLfca6FEJPHruNaCmESC8mu67RoDRda8BPYmgYBBcLzglEVSy3UdQUiGo7btghUJQ1XfB7yC9QFDOdx9BH4GghPGCSwJBIeN9BPn2spiywPiyYvayCM7LWrz7st6Ml4Vn0e1l3Th/ybLfy1p1Xlb1Xla787JO9rLynPfl61pWoPWyTNeyzbLB+bIT17IFrZfdtpaNZv84L3v3rqverQbjq/6uRtaqm5z3r5p3rTrEetWaa9Xq1qu2WashrflXA8ZX43fX1Ww6ryZ1rybXeTXFezUmzqup2qshr/k1Xk3T3VczY7yaLoGaEOPVDAnU8BqvZvoK6t3pBdvrXVXojfdd755CL5/vei8kv/7RO2u73meJXhffL70UCr2UvW+26xWVXHqLbNdrJNEn2Aeu1+d9JfUNuq6vVKNP03V961dT37Tp+n76MI053TkwvTk50WVu2nRzESJz8qabm7ii5mo9N/czRyYyzz7/MQ+WN2+musyHeG6+TWUend+w3Pz3PLVq87Lz/yzfvJvszybnYy33IDOPzM9avnk92eY5558cNz98ZY2MRv9HYHgjWd2gEAgMD5q6uqBqxweZ6UAY1G846Awi1g0iheYNH5RzdUHU0KLfIBzSEg4ihyb9HnQD0QgHkUDdfg8a/yMcjMCZMNgdXHKVwQ7wl92D46WDxeE9uwenSgeTwAUw7vbgQhiR3tAK9DoNZkdP0EzS0QjtTt+ZPfqB1r3SaGLa/5fZN3QTza69YTDGiplkwOqYdyab4b7a3pkgZo7Bnb5h/jNdjB1DJ37B0DDGTBIzxJwyv19sjsGZVaaEifr8Iv4qgzDsjCijwOgwej73Ag==") 0 0/100% 100% no-repeat;
  mask: url("data:image/webp;base64,UklGRtoDAABXRUJQVlA4TM4DAAAvG4IXEFZR07YBk/JnPu+ISAw66rSRJEny35NMS1fqHlJsl77N7mEvMBAIpFDrdqpt25rMN7y6S3PyLqJ71QMgOWlUOxYu8jgGTU50d4kfwrRtY7XdbpEbgJEiSfmH0kVSmiVPXh8881tHRg0UBCDDxoKxC0mwrR2SFJGZ1bZt27Z7Za1s27axsm3btm1v7e6ZjPgcuW0jSZR7nXnDzH3fhqTIjrwhQixyID2S7UsBAaSgBxeAKMEOeGiDD+hVftCA+yQKXtCBMGALBCwsJlawggIIu4PaRAvWkPu0BhxAumAAtsagPvmCP5Q/XZ0TsQNkPYlcjgIZk4mYWtK8hpTps/Y0pKP/nOmrdpenUT36Jz3aVZ1O/qOmd1pTnO97yJofe3Fp3vqmzXdL81zcvT5f2cHhAdjdwfeBhM4B/3/DO9g/IMgc2Dvu/0GkTCA7AI4X+AxwqwQmLfca6FEJPHruNaCmESC8mu67RoDRda8BPYmgYBBcLzglEVSy3UdQUiGo7btghUJQ1XfB7yC9QFDOdx9BH4GghPGCSwJBIeN9BPn2spiywPiyYvayCM7LWrz7st6Ml4Vn0e1l3Th/ybLfy1p1Xlb1Xla787JO9rLynPfl61pWoPWyTNeyzbLB+bIT17IFrZfdtpaNZv84L3v3rqverQbjq/6uRtaqm5z3r5p3rTrEetWaa9Xq1qu2WashrflXA8ZX43fX1Ww6ryZ1rybXeTXFezUmzqup2qshr/k1Xk3T3VczY7yaLoGaEOPVDAnU8BqvZvoK6t3pBdvrXVXojfdd755CL5/vei8kv/7RO2u73meJXhffL70UCr2UvW+26xWVXHqLbNdrJNEn2Aeu1+d9JfUNuq6vVKNP03V961dT37Tp+n76MI053TkwvTk50WVu2nRzESJz8qabm7ii5mo9N/czRyYyzz7/MQ+WN2+musyHeG6+TWUend+w3Pz3PLVq87Lz/yzfvJvszybnYy33IDOPzM9avnk92eY5558cNz98ZY2MRv9HYHgjWd2gEAgMD5q6uqBqxweZ6UAY1G846Awi1g0iheYNH5RzdUHU0KLfIBzSEg4ihyb9HnQD0QgHkUDdfg8a/yMcjMCZMNgdXHKVwQ7wl92D46WDxeE9uwenSgeTwAUw7vbgQhiR3tAK9DoNZkdP0EzS0QjtTt+ZPfqB1r3SaGLa/5fZN3QTza69YTDGiplkwOqYdyab4b7a3pkgZo7Bnb5h/jNdjB1DJ37B0DDGTBIzxJwyv19sjsGZVaaEifr8Iv4qgzDsjCijwOgwej73Ag==") 0 0/100% 100% no-repeat;
}
.mb-sec4__letters .lcard .tab > img {
  width: 100%;
  visibility: hidden;
}
.mb-sec4__letters .lcard .tab { /* 컷은 mask 로만 쓰고 숨김 (국기 .flag 는 제외) */ }
.mb-sec4__letters .lcard .tab .who {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding-left: 9rem;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec4__letters .lcard .tab .who .flag {
  width: 4rem;
  height: auto;
}
.mb-sec4__letters .lcard { /* 국기 = twemoji svg (윈도우 크롬은 국기 이모지 미지원) */ }
.mb-sec4__letters .lcard.blue .paper {
  background: linear-gradient(180deg, #fff 11%, #cbfcff 90%);
}
.mb-sec4__letters .lcard.blue .paper::before {
  background: linear-gradient(180deg, #aae1e5 11%, #277de8 90%);
}
.mb-sec4__letters .lcard { /* PSD 편지2 뒷장 (위 연하늘 / 아래 파랑) */ }
.mb-sec4__letters .lcard.blue .tab {
  background: linear-gradient(180deg, #065cdc 0%, #4ea7f7 100%); /* 위 진파랑 → 아래 밝은파랑 */
  -webkit-mask-image: url("data:image/webp;base64,UklGRu4DAABXRUJQVlA4TOIDAAAvGoIXEBWH2rZtGPv/s72WlCkiVgFToJjU70BHFdjWDW9LcuHvVdlPtwEaiNHZcRwCI6h6H4CyaCqZtG1I79oOqgCABqPZtm3bSFuzvbpP8M72Xd+HnK9byclMSk9AUMQaSJHkSJI1QddVUjZ15S9/YjEIFtoeNdVA2rYxsW+3TxIk2aZthW3btm3btm3bb2TbxtC2bdu2PxYDt23jUN69l7wuVyfXzfVwiNVtdXmd/rqq6rh6rb5d/6iDJKt/1g/qG/V8nXQlEA7No28EAg39oy3UQOgrgMLoeqYaekVTiDka6s5k+6EWwgyFRma4oQcUGQiNznxDawg7CkrMhEPnSDIG4qG3iE30gnxD0E0KQo7+0tQANLlijv5/7SiUnqygp3E3mllJR3+oy4weRm3RRyq0ouoVdm+KdaKDtC264USv4rZozEcoBMg78SqYNrIoQeDJoY2cT9whAy5yO3LyTMJN5HvkDtnwkMgjc/L2QyGZoTtkk6JRNiD0mvsG7tC4Unc2aYcmHLtm36Hxxu5sLAaNLXfNskFjyF3z9N+vUeXubKL7bWNvA7m3bbifHarw7K7tEPazexV+dkJ7dsfCs4ves5sRnt3onl2r8Ow+7VDW7NKFd3bCa27+biB8bt5rfvp+IHx+NWt+rMrzm1/zQ/L7Fp7fmx/Cen4ryl/8qNf8GpTnp7zmF6g8P/u18NLhQfjCh6/Fx4z/Gx90L37GrYu/ILz4DXvx04QXv2cvvqbw4g/vxceO/6O7+NO3L/6I7uIvE6QGp4LspW4TpDLpLvXkCOWu5ILq5d4x5MbJLvedIZdZdv/HKHdMdrmEDPld8oPq5edjKMUtfS0F0SvVPkaluaor9aCoZa8F0atNPUq1XaKr7eOolRdd7f1xqh0VfbW0HLUqoqs1Jl2ejD4ByXtSSPJETHNPDo/Um/o3IHlvmEne0L35kNwbf9blTZjk3syxvEF+syT53nCw9kbkzR/FvUk5Vs34Jghe87KJxtJEak4ovqYT7dJkaD4JrrnZRKCtq9X92wW96xocrW6E4Lo7XRTeeup7QO96/Hh6UHt69Nbz0EPM2xB7OD0EuRu2HK8h4XBW7w2tiBviDsfkNnwc0hE3xZp2TkHtpitTHOKmSNMsuTdtmyIesanb9FvtTYumCMxN+aebam9aQb0FMIFCAMQOaATQjxkgCayIPWAeYKAOQAa8gUutBzwARkcNwUCCkSsEpA7pQFiOGoKKWCBjUg/5RvIQ9uP2h4QiUz+lQ7oQG4TsuCFEiBaSjHQje8jvT+aQRaQEiUQs2b9+DulzNJ/j/JzI5+Q/pyhznyMF");
  mask-image: url("data:image/webp;base64,UklGRu4DAABXRUJQVlA4TOIDAAAvGoIXEBWH2rZtGPv/s72WlCkiVgFToJjU70BHFdjWDW9LcuHvVdlPtwEaiNHZcRwCI6h6H4CyaCqZtG1I79oOqgCABqPZtm3bSFuzvbpP8M72Xd+HnK9byclMSk9AUMQaSJHkSJI1QddVUjZ15S9/YjEIFtoeNdVA2rYxsW+3TxIk2aZthW3btm3btm3bb2TbxtC2bdu2PxYDt23jUN69l7wuVyfXzfVwiNVtdXmd/rqq6rh6rb5d/6iDJKt/1g/qG/V8nXQlEA7No28EAg39oy3UQOgrgMLoeqYaekVTiDka6s5k+6EWwgyFRma4oQcUGQiNznxDawg7CkrMhEPnSDIG4qG3iE30gnxD0E0KQo7+0tQANLlijv5/7SiUnqygp3E3mllJR3+oy4weRm3RRyq0ouoVdm+KdaKDtC264USv4rZozEcoBMg78SqYNrIoQeDJoY2cT9whAy5yO3LyTMJN5HvkDtnwkMgjc/L2QyGZoTtkk6JRNiD0mvsG7tC4Unc2aYcmHLtm36Hxxu5sLAaNLXfNskFjyF3z9N+vUeXubKL7bWNvA7m3bbifHarw7K7tEPazexV+dkJ7dsfCs4ves5sRnt3onl2r8Ow+7VDW7NKFd3bCa27+biB8bt5rfvp+IHx+NWt+rMrzm1/zQ/L7Fp7fmx/Cen4ryl/8qNf8GpTnp7zmF6g8P/u18NLhQfjCh6/Fx4z/Gx90L37GrYu/ILz4DXvx04QXv2cvvqbw4g/vxceO/6O7+NO3L/6I7uIvE6QGp4LspW4TpDLpLvXkCOWu5ILq5d4x5MbJLvedIZdZdv/HKHdMdrmEDPld8oPq5edjKMUtfS0F0SvVPkaluaor9aCoZa8F0atNPUq1XaKr7eOolRdd7f1xqh0VfbW0HLUqoqs1Jl2ejD4ByXtSSPJETHNPDo/Um/o3IHlvmEne0L35kNwbf9blTZjk3syxvEF+syT53nCw9kbkzR/FvUk5Vs34Jghe87KJxtJEak4ovqYT7dJkaD4JrrnZRKCtq9X92wW96xocrW6E4Lo7XRTeeup7QO96/Hh6UHt69Nbz0EPM2xB7OD0EuRu2HK8h4XBW7w2tiBviDsfkNnwc0hE3xZp2TkHtpitTHOKmSNMsuTdtmyIesanb9FvtTYumCMxN+aebam9aQb0FMIFCAMQOaATQjxkgCayIPWAeYKAOQAa8gUutBzwARkcNwUCCkSsEpA7pQFiOGoKKWCBjUg/5RvIQ9uP2h4QiUz+lQ7oQG4TsuCFEiBaSjHQje8jvT+aQRaQEiUQs2b9+DulzNJ/j/JzI5+Q/pyhznyMF");
}
.mb-sec4__letters .lcard { /* PSD 편지2 모양 1833 */ }
@media (max-width: 720px) {
  .mb-sec4 {
    padding-bottom: 16.9rem;
    /* MO globe (599,6169)~섹션 끝 6487. 상단 페이드 없이 바로 시작, 하단만 배경으로 사라짐 */
  }
  .mb-sec4 .globe-box {
    top: 197.4rem;
    width: 72rem;
    margin-left: -36rem;
    height: 31.8rem;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 69%, rgba(0, 0, 0, 0.56) 82%, rgba(0, 0, 0, 0.15) 90%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 69%, rgba(0, 0, 0, 0.56) 82%, rgba(0, 0, 0, 0.15) 90%, rgba(0, 0, 0, 0) 100%);
  }
  .mb-sec4__tt {
    font-size: 5.4rem;
    line-height: 8rem;
  }
  .mb-sec4__tt.j {
    padding-top: 12.5rem;
  }
  .mb-sec4__journey {
    width: 59.2rem;
    margin-top: 9.7rem;
    /* 9/11 좌우가 화면 끝에 붙어 보임 → MO 시안 실측(꺾쇠 x 12..40 / 681..708, 양쪽 여백 12)에 맞춤.
       컨테이너(592) 가 720 안에서 left 64 이므로 -52 = 화면 12 */
  }
  .mb-sec4__journey .mb-chev {
    top: 35.9rem;
  }
  .mb-sec4__journey .mb-chev.prev {
    left: -5.5rem;
  }
  .mb-sec4__journey .mb-chev.next {
    right: -5.5rem;
  }
  .mb-sec4__journey { /* 9/9 MO 시안 실측: 카드 상단 4433 → 꺾쇠 4792 (사진 영역 중앙) */ }
  .mb-sec4__journey .jframe {
    width: 59.2rem;
    height: 76.8rem;
    background-position: 0 8.9rem;
  }
  .mb-sec4__journey .jframe .head {
    height: 8.9rem;
  }
  .mb-sec4__journey .jframe .head .name {
    left: 11rem;
  }
  .mb-sec4__journey .jcard {
    width: 59.2rem;
    height: 76.8rem;
  }
  .mb-sec4__journey .jcard .txt {
    left: 2rem;
    right: 2rem;
    width: auto;
    top: 49.5rem;
  }
  .mb-sec4__journey .jcard .txt h3 {
    font-size: 4rem;
  }
  .mb-sec4__journey .jcard .txt p {
    margin-top: 1.7rem;
    font-size: 3rem;
    line-height: 4.8rem;
  }
  .mb-sec4 {
    /* 9/9 MO PSD 실측(컬럼 40·섹션 4195 기준): 비행기 547,4218 128x145 / 구름R 614,4325 55x38 / 구름L 69,4272 55x38. 하트는 MO 시안에 없음 */
  }
  .mb-sec4 .tdeco.cloud-l {
    left: 3rem;
    top: 7.7rem;
    width: 6.7rem;
  }
  .mb-sec4 .tdeco.heart {
    left: 49rem;
    top: 4.8rem;
    width: 3.6rem;
  }
  .mb-sec4 .tdeco { /* MO PSD 하트 530,4243 (컬럼·섹션 기준 490,48) */ }
  .mb-sec4 .tdeco.plane {
    left: 50.7rem;
    top: 2.3rem;
    width: 12.9rem;
  }
  .mb-sec4 .tdeco.cloud-r {
    left: 57.5rem;
    top: 13rem;
    width: 6.6rem;
  }
  .mb-sec4__lhead {
    margin-top: 4rem;
  }
  .mb-sec4__lhead .vline {
    height: 8rem;
  }
  .mb-sec4__lhead .flower {
    left: 3.8rem;
    top: -0.2rem;
    width: 9.2rem;
  }
  .mb-sec4__lhead .pigeon {
    left: 53.6rem;
    top: -1rem;
    width: 12rem;
  }
  .mb-sec4__lhead .letter {
    left: 60.1rem;
    top: 8rem;
    width: 5.3rem;
  }
  .mb-sec4__letters {
    width: 59.4rem;
    margin-top: 7.5rem;
    /* 9/11 -64 면 화면 밖(좌 -1)까지 나가 잘렸음 → 시안대로 양쪽 여백 12 (컨테이너 594, left 63 → -51) */
  }
  .mb-sec4__letters .mb-chev {
    top: 25.9rem;
  }
  .mb-sec4__letters .mb-chev.prev {
    left: -5.4rem;
  }
  .mb-sec4__letters .mb-chev.next {
    right: -5.4rem;
  }
  .mb-sec4__letters .lcard .txt {
    font-size: 2.8rem;
    line-height: 4.6rem;
    width: 44.5rem; /* 폭은 편지3 "…취미랑 비슷하네." 시안 실측 433 기준 — 430 이면 "네." 가 다음 줄로 넘어감 */
  }
}

/* ============================================================
 * SEC5 — QnA (bg #bce0fc) 6084~8684
 * ============================================================ */
.mb-sec5 {
  background: #bce0fc;
  padding-bottom: 15rem;
}
.mb-sec5__tt {
  padding-top: 12.2rem;
  text-align: center;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 6.5rem;
  font-weight: 800;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec5__list {
  margin-top: 6.6rem;
}
.mb-sec5 { /* 6337 */ }
.mb-sec5 .mb-q {
  position: relative;
  width: 64.4rem;
  margin: 1.7rem 0 0 -0.2rem;
  background: #fff;
  border-radius: 2rem;
  box-shadow: 0 1rem 1rem rgba(172, 172, 172, 0.16);
  text-align: left;
}
.mb-sec5 .mb-q:first-child {
  margin-top: 0;
}
.mb-sec5 .mb-q .qbtn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.8rem;
  width: 100%;
  height: 10.7rem;
  text-align: left;
  padding: 0 8rem 0 3.9rem;
  line-height: 1;
}
.mb-sec5 .mb-q .qbtn .q {
  flex: none;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: #00db6b;
  letter-spacing: 0;
  line-height: 1;
  padding-top: 0.2rem;
}
.mb-sec5 .mb-q .qbtn .txt {
  display: block;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.2rem;
  font-weight: 500;
  color: #000;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec5 .mb-q .qbtn .chev {
  position: absolute;
  right: 4.2rem;
  top: 50%;
  margin-top: -1rem;
  color: #00db6b;
  display: inline-block;
  width: 3.4rem;
  height: 2.1rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/webp;base64,UklGRjABAABXRUJQVlA4TCMBAAAvKAAGED+hoG0bxvxJtzsg5n/+GUeS1DbMusP9KBJASrQMAAAAEAUD+EFsHAwEBnFhAMHCBAAAHxYeBKEQ4AGCbNtpm/csOczMVOm//a/R9NUVRPSfgdtGimaSZTj4BQCEGFGSMQa0swLAgmDnPIBYHFYI3gYDVocFCCBgLekM72TEWdIaAeT4Zd+ftqhdUWOr39deY5KYfJLZnzauZsRGf2bpMwEReFKSpQaXyZR0YgBI7JWtjUvL2oNsH7RR8hD7HqfqfqpefNaeh1mi7lr2ejm/Z4guB8nKahjU96u61E57Djvp12ZUJhhxbTPHtlcXVYfnUVYkwNDCJFPXUlKPhfxJltsWctM3/coFWPEh6YQaxVlxernvEFgeIP4vGargCQAA") center/100% 100% no-repeat;
  mask: url("data:image/webp;base64,UklGRjABAABXRUJQVlA4TCMBAAAvKAAGED+hoG0bxvxJtzsg5n/+GUeS1DbMusP9KBJASrQMAAAAEAUD+EFsHAwEBnFhAMHCBAAAHxYeBKEQ4AGCbNtpm/csOczMVOm//a/R9NUVRPSfgdtGimaSZTj4BQCEGFGSMQa0swLAgmDnPIBYHFYI3gYDVocFCCBgLekM72TEWdIaAeT4Zd+ftqhdUWOr39deY5KYfJLZnzauZsRGf2bpMwEReFKSpQaXyZR0YgBI7JWtjUvL2oNsH7RR8hD7HqfqfqpefNaeh1mi7lr2ejm/Z4guB8nKahjU96u61E57Djvp12ZUJhhxbTPHtlcXVYfnUVYkwNDCJFPXUlKPhfxJltsWctM3/coFWPEh6YQaxVlxernvEFgeIP4vGargCQAA") center/100% 100% no-repeat;
  transition: transform 0.25s;
}
.mb-sec5 .mb-q { /* 닫힘 = ∨. 9/9 시안 렌더 실측 29x18 (라운드 캡 포함 마스크 34x21), 우측 끝 1238 = 카드 우변 -43 */ }
.mb-sec5 .mb-q .a {
  display: none;
  position: relative;
  padding: 2.5rem 6.1rem 3.9rem 3.8rem;
  gap: 2.6rem;
  line-height: 1;
  flex-wrap: wrap;
  row-gap: 0; /* 9/9 배너(.bn) 는 다음 줄 */
}
.mb-sec5 .mb-q .a::before {
  content: "";
  position: absolute;
  left: 2.1rem;
  right: 1.9rem;
  top: 0;
  height: 1px;
  background: #aeaeae;
}
.mb-sec5 .mb-q .a .al {
  flex: none;
  margin-top: 0.4rem;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: #00db6b;
  letter-spacing: 0;
  line-height: 1;
}
.mb-sec5 .mb-q .a .atxt {
  flex: 1 1 0;
  min-width: 0;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 2.6rem;
  font-weight: 400;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 4.6rem;
  white-space: nowrap;
}
.mb-sec5 .mb-q .a { /* 줄바꿈 = 시안 그대로 <br> (PC/MO 동일 컬럼 폭). 9/9 flex-wrap 도입 후 min-width:auto 가 nowrap 폭을 요구해 A. 아래로 떨어짐 → 0 */ }
.mb-sec5 .mb-q .a .bn {
  position: relative;
  display: block;
  flex: 0 0 50.3rem;
  width: 50.3rem;
  height: 13.7rem;
  margin-top: 3.9rem;
  margin-left: 6.6rem;
  border-radius: 2rem;
  overflow: hidden;
  background: #ffe6f2; /* 9/9 .a flex 한 줄에 밀려 카드 밖으로 나가 안 보였음 → wrap 다음 줄, PSD BN/bg (744) = 카드 +106 */
}
.mb-sec5 .mb-q .a .bn img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.mb-sec5 .mb-q .a .bn {
  /* .ribbon 규칙 제거 (9/9) — PSD 숨김 레이어라 마크업에서 뺌 */
}
.mb-sec5 .mb-q .a .bn .big {
  position: absolute;
  left: 3.6rem;
  top: 3.3rem;
  font-family: "KOHIBaeumOTF", "Pretendard Variable", sans-serif;
  font-size: 2.8rem;
  font-weight: 400;
  color: #111;
  letter-spacing: -0.04em;
  line-height: 4rem;
  text-align: left;
}
.mb-sec5 .mb-q .a .bn .big .c1 {
  color: #fd7216;
}
.mb-sec5 .mb-q .a .bn .big .c2 {
  color: #fbb50e;
}
.mb-sec5 .mb-q .a .bn .big .c3 {
  color: #38b260;
}
.mb-sec5 .mb-q .a .bn .big .c4 {
  color: #3870de;
}
.mb-sec5 .mb-q .a .bn .barr {
  position: absolute;
  left: 15rem;
  top: 8.4rem;
  color: #111;
  display: inline-block;
  width: 4.3rem;
  height: 1.6rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/webp;base64,UklGRroAAABXRUJQVlA4TK4AAAAvKsADEHVAbNtIkjT5J83977oicHX3zEQ4jQAAiXDX5Jo02za+BxPQGIEGgxCpHBvI+yefgIwGpm6nMrhMN81iDKRLgCL089cGWiKgSN1OVVaJgCPzP9VZJbIyfb2uAwB/uW/gSFg0/jZRwB+AGa7zd+IElKTDZeMJe+AkYvWniXQAwIAiPL09xnpeTudpRQK7m2F2dR9zXdtxGmB9AElAEz96zpmPnZL9IV0ySQA=") center/100% 100% no-repeat;
  mask: url("data:image/webp;base64,UklGRroAAABXRUJQVlA4TK4AAAAvKsADEHVAbNtIkjT5J83977oicHX3zEQ4jQAAiXDX5Jo02za+BxPQGIEGgxCpHBvI+yefgIwGpm6nMrhMN81iDKRLgCL089cGWiKgSN1OVVaJgCPzP9VZJbIyfb2uAwB/uW/gSFg0/jZRwB+AGa7zd+IElKTDZeMJe+AkYvWniXQAwIAiPL09xnpeTudpRQK7m2F2dR9zXdtxGmB9AElAEz96zpmPnZL9IV0ySQA=") center/100% 100% no-repeat;
}
.mb-sec5 .mb-q { /* 9/9 PSD 모양 1948(43x14, stroke 2) 경로 마스크 — 기존 컷은 흰 fill 이 같이 딸려나옴 */ }
.mb-sec5 .mb-q.is-open .qbtn .txt {
  font-weight: 700;
}
.mb-sec5 .mb-q.is-open .qbtn .chev {
  transform: rotate(180deg);
}
.mb-sec5 .mb-q.is-open .a {
  display: flex;
}
.mb-sec5 .mb-q { /* 열림 = ∧ (PSD) */ }
@media (max-width: 720px) {
  .mb-sec5__tt {
    padding-top: 12.6rem;
  }
}

/* ============================================================
 * 팝업 (아동 성향 자세히 보기 / MBTI 퀴즈) — 640 폭 노랑 카드 + 상단 흰 돔
 * ============================================================ */
.mb-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: none;
}

.mb-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--pop-scale, 1));
  z-index: 1001;
  display: none; /* --pop-scale: 뷰포트 높이 초과 시 JS 축소 */
  width: 64rem;
  border-radius: 4rem;
  background: #ffc92b;
  overflow: hidden;
  text-align: left;
}
.mb-pop.is-open {
  display: block;
}
.mb-pop {
  /* 9/9 흰 돔 = 시안 실측 원호: 양끝(x2/637) y≈150·147, x80 y243 → 원 중심 (320,-37.5) R369, 바닥 y331. 팝업 폭 640 을 넘는 큰 원을 클립 */
}
.mb-pop .dome {
  position: absolute;
  left: 50%;
  top: -40.6rem;
  width: 73.8rem;
  height: 73.8rem;
  margin-left: -36.9rem;
  background: #fff;
  border-radius: 50%;
}
.mb-pop .halo {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(253, 204, 78, 0.22);
}
.mb-pop { /* 9/9 시안 일러 뒤 연노랑 글로우가 더 또렷 → .10 → .22 */ }
.mb-pop .x {
  position: absolute;
  right: 1.8rem;
  top: 1rem;
  width: 4.8rem;
  height: 4.8rem;
  z-index: 5;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 4rem;
  font-weight: 300;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mb-pop {
  /* PSD (1108,1559) → 카드 top 1380 + 팝업 오프셋 52.
     9/10 돔 곡선을 따라 왕복 : 돔 원 중심(팝업 좌표 320,-37 / R369)을 transform-origin 으로 잡으면
     회전만으로 글자가 곡선에 붙은 채 미끄러진다. origin 은 팝업별 .whats 위치에 맞춰 아래에서 각각 지정 */
  /* 돔 곡선 왕복 없이 설계 위치 고정 (transform-origin 은 팝업별로 아래에서 지정) */
}
.mb-pop .whats {
  position: absolute;
  left: 47rem;
  top: 23.1rem;
  width: 12.6rem;
  transform-origin: -15rem -26.8rem;
}
.mb-pop {
  /* 9/10 재정정 : PSD tracking 은 문항 7개 중 5번("친한 친구가 시험에서 떨어졌을 때…")만 -65, 나머지는 0.
     전체에 -0.065em 을 걸어 두어 문항 폭이 시안보다 34 좁았다 → 기본 0, 5번만 오버라이드 */
  /* 9/11 문항은 1줄·2줄이 섞인다 → 2줄 높이(60x2=120) 고정 박스 안에서 세로 중앙 정렬.
     2줄이면 박스를 꽉 채워 지금 위치 그대로, 1줄이면 그 구간의 중앙에 온다 */
}
.mb-pop .qtxt {
  position: absolute;
  left: 0;
  width: 100%;
  height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 4.4rem;
  font-weight: 700;
  color: #221f1f;
  letter-spacing: -0.02em;
  line-height: 6rem;
  word-break: keep-all;
}
.mb-pop .opts {
  position: absolute;
  left: 7.1rem;
  top: 53.3rem;
  width: 50.3rem;
  height: 28.2rem;
  display: flex;
  justify-content: space-between;
}
.mb-pop .opts .opt {
  position: relative;
  width: 24.2rem;
  height: 28.2rem;
  border-radius: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.4rem;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  line-height: 4.4rem;
  word-break: keep-all;
  transition: background 0.2s, color 0.2s;
}
.mb-pop .opts .opt.o1 {
  background: #3b8bef;
}
.mb-pop .opts .opt.o2 {
  background: #08b45c;
}
.mb-pop .opts .opt .heart {
  display: none;
  position: absolute;
  left: 2.1rem;
  top: 2.6rem;
  width: 3rem;
}
.mb-pop .opts .opt { /* 9/10 시안 실측 30x24 (PSD 셰이프 bbox 44x28 은 여백 포함) */ }
.mb-pop .opts .opt.is-sel {
  box-shadow: inset 0 0 0 0.8rem #fffc1e;
}
.mb-pop .opts .opt.is-sel .heart {
  display: block;
}
.mb-pop .opts .opt.is-dim {
  background: #878787 !important;
  color: #c5c5c5;
}
.mb-pop .mb-dots {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1rem;
  /* 9/10 시안 navi 실측 : 렌더 점 9 · 간격 10 (7개 span 260~383) · off 는 흰색 불투명도 219/255 · on 은 검정.
     크기는 on/off 동일(확대 없음) — 페이지네이션이 아니라 "몇 문항 지났는지" 표시라 지나온 점이 다 채워진다 */
}
.mb-pop .mb-dots span {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  transition: background 0.3s ease;
}
.mb-pop .mb-dots span.is-on {
  background: #221f1f;
}
.mb-pop {
  /* 9/10 팝업 화살표는 시안 stroke 5 (카드용 $m-ico-chev 는 stroke 10 → 같은 크기로 줄여도 1.5배 두꺼움) */
}
.mb-pop .mb-chev {
  width: 2.7rem;
  height: 4.5rem;
  color: #221f1f;
  display: inline-block;
  width: 2.7rem;
  height: 4.5rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/webp;base64,UklGRngAAABXRUJQVlA4TGsAAAAvGgALEAXjto0cuf+mubuX5vLdL4JpZNtqboMByxZlHJZALgWwTVlxsXgIJmmqsV+inQq17DJGAPoqbgAwFHFhR3LsSfM30u+KUcux40T+GcIds99mtq8yzo5Fzh2LfDsWmWarqrDIoqONAAA=") center/100% 100% no-repeat;
  mask: url("data:image/webp;base64,UklGRngAAABXRUJQVlA4TGsAAAAvGgALEAXjto0cuf+mubuX5vLdL4JpZNtqboMByxZlHJZALgWwTVlxsXgIJmmqsV+inQq17DJGAPoqbgAwFHFhR3LsSfM30u+KUcux40T+GcIds99mtq8yzo5Fzh2LfDsWmWarqrDIoqONAAA=") center/100% 100% no-repeat;
}
.mb-pop .mb-chev.swiper-button-disabled {
  opacity: 0.25;
}
.mb-pop .mb-chev.is-off {
  opacity: 0.25;
  pointer-events: none;
}
.mb-pop .mb-chev { /* 9/17 퀴즈 : 답을 고르기 전 다음 화살표 비활성 */ }
.mb-pop .swiper {
  position: absolute;
  left: 0;
  width: 100%;
}
.mb-pop .swiper-slide {
  position: relative;
}
.mb-pop {
  /* 아동 성향 (640x1058) */
}
.mb-pop.pop-trait {
  height: 105.8rem;
  /* 9/9 .dome 개별 height 제거 — 공통 원호(R369) 사용, 시안 아동성향 팝업 돔 곡률 동일 */
}
.mb-pop.pop-trait .hand {
  position: absolute;
  left: 0;
  width: 100%;
  top: 10.7rem;
  text-align: center;
  font-family: "UhBeeHyeki", "Pretendard Variable", sans-serif;
  font-size: 3.8rem;
  font-weight: 400;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 1;
  z-index: 2;
}
.mb-pop.pop-trait { /* 9/10 시안 글리프 109 (라이브 113 → -4) */ }
.mb-pop.pop-trait .spark {
  position: absolute;
  left: 38.8rem;
  top: 8.8rem;
  width: 7.7rem;
  z-index: 1;
}
.mb-pop.pop-trait { /* 9/10 마커·별은 글자(.hand z2) 뒤로 */ }
.mb-pop.pop-trait .halo.h1 {
  top: 12.9rem;
  width: 23.1rem;
  height: 23.1rem;
  background: rgba(253, 204, 78, 0.08);
}
.mb-pop.pop-trait .halo.h2 {
  top: 15rem;
  width: 18.9rem;
  height: 18.9rem;
  background: rgba(253, 204, 78, 0.08);
}
.mb-pop.pop-trait { /* 9/9 아동성향 시안엔 사진 뒤 링이 거의 안 보임 → 공통 .22 대신 .08 */ }
.mb-pop.pop-trait .photo {
  position: absolute;
  left: 24.7rem;
  top: 17.2rem;
  width: 14.6rem;
  height: 14.6rem;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, #8288ef, #757cff);
  z-index: 2;
}
.mb-pop.pop-trait .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mb-pop.pop-trait {
  /* 9/10 꽃 배지 : 카드용 컷(sec3_flower #FC71FC)을 쓰고 컨테이너까지 -12deg 돌려 방향·색이 시안과 달랐음
     → 팝업 전용 컷 재추출(pop_flower.webp, PSD Shape 2 143x142 #FF89FF, 회전 없음) + 글자만 -12deg.
     좌표는 PSD 실측 (699,1529) → 카드 원점 638,1380 + 팝업 오프셋 52 = left 61 / top 201.
     시안 글자 주축 -11.37deg · 글자 중심이 꽃 중심과 일치 → flex 중앙 정렬 그대로 */
}
.mb-pop.pop-trait .flower {
  position: absolute;
  left: 6.1rem;
  top: 20.1rem;
  width: 14.3rem;
  height: 14.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.mb-pop.pop-trait .flower img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.mb-pop.pop-trait .flower span {
  position: relative;
  transform: rotate(-12deg);
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
}
.mb-pop.pop-trait .swiper {
  top: 37.2rem;
  height: 46rem;
}
.mb-pop.pop-trait .qtxt {
  top: 0;
}
.mb-pop.pop-trait .opts {
  top: 16.1rem;
}
.mb-pop.pop-trait .mb-dots {
  top: 84.3rem;
}
.mb-pop.pop-trait .mb-chev {
  top: 65rem;
}
.mb-pop.pop-trait .mb-chev.prev {
  left: 2.4rem;
}
.mb-pop.pop-trait .mb-chev.next {
  right: 2.4rem;
}
.mb-pop.pop-trait .mb-cta {
  position: absolute;
  left: 1.9rem;
  top: 88.3rem;
  width: 60.2rem;
  height: 12.4rem;
  border-radius: 4rem;
  background: #a771cd;
  box-shadow: 0 0.9rem 2.1rem rgba(16, 70, 45, 0.17);
  display: block;
  text-align: left;
  overflow: hidden;
  font-family: "RiaSans", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
}
.mb-pop.pop-trait .mb-cta .illu {
  position: absolute;
  left: 7.9rem;
  top: 2rem;
  width: 14.6rem;
}
.mb-pop.pop-trait .mb-cta .txt {
  position: absolute;
  left: 25rem;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.mb-pop.pop-trait .mb-cta .mb-arr {
  color: #fff;
}
.mb-pop {
  /* 퀴즈 (640x864 = 시안 카드 644x864) */
}
.mb-pop.pop-quiz {
  /* 9/10 재정정 : 앞서 쓴 원점 (638,2619) 은 아동성향 팝업 것이라 퀴즈 팝업 값이 전부 47 위로 밀려 있었고,
     그걸 상쇄하려 돔을 -444 로 올려둔 상태였다. 팝업 PSD 로 카드 원점을 다시 확정 —
     퀴즈 그룹 bbox (593,1039)-(1327,2357) 에서 돔(738 폭, 카드 위로 406)을 빼면 카드 원점 (640,1445) · 카드 911x640.
     카드 기준 실측 : intro 101 · halo 179/200 · 캐릭터(union) 193 · 문항 379 · 선택지 528 · navi 838 · 화살표 645 */
  height: 91.3rem; /* 시안 카드 PNG 실측 높이 */
  /* 돔은 공통 원호 그대로 (top -406 → 중심 320,-37 / R369 · 바닥 331 · 양끝 147) = 시안 실측과 동일 */
}
.mb-pop.pop-quiz .intro {
  position: absolute;
  left: 0;
  width: 100%;
  top: 5.5rem;
  text-align: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3rem;
  font-weight: 400;
  color: #221f1f;
  letter-spacing: 0;
  line-height: 4.2rem;
  z-index: 2;
}
.mb-pop.pop-quiz { /* 9/17 위아래 여백 균등 : 팝업 상단(0)~일러(193) 사이 중앙 = (193-84)/2 */
  /* 9/10 캐릭터 컷에 구워져 있던 라운드 배경 제거(PSD 스마트오브젝트만 재추출, 7종 202x172 동일 캔버스)
     → 라운드 배경은 CSS .halo 만 사용. 값은 PSD 효과 그룹 타원 13 실측(231 @top178 / 189 @top199, 팝업 원점 638,2619 + y보정 46) */
}
.mb-pop.pop-quiz .halo.h1 {
  top: 17.9rem;
  width: 23.1rem;
  height: 23.1rem;
  background: rgba(255, 201, 43, 0.1);
}
.mb-pop.pop-quiz .halo.h2 {
  top: 20rem;
  width: 18.9rem;
  height: 18.9rem;
  background: rgba(255, 201, 43, 0.1);
}
.mb-pop.pop-quiz { /* 9/10 PSD 타원 13 레이어 불투명도 26/255 = 10% (26% 로 잘못 읽어 두 배 이상 진했음) */
  /* 캐릭터 union bbox = 7종 합집합 (875,1638)-(1077,1810) → 카드 rel (235,193) 202x172.
     그림자는 PSD DropShadow(op18 · dist10 · angle86 · size20) → dx -0.7 dy 10, blur 는 size/2 (구름 FX 와 같은 환산) */
  /* 문항 전환 시 일러도 같이 넘어간다 —
     다음으로 : 현재 컷이 오른쪽으로 사라지고 새 컷이 왼쪽에서 중앙으로
     이전으로 : 왼쪽으로 사라지고 오른쪽에서 중앙으로
     .is-swap 이 붙은 동안은 transition 을 끊어(반대편으로 순간이동) 되돌아오는 모션이 안 보이게 한다 */
}
.mb-pop.pop-quiz .illu {
  position: absolute;
  left: 23.5rem;
  top: 19.3rem;
  width: 20.2rem;
  z-index: 2;
  filter: drop-shadow(-1px 1rem 1rem rgba(16, 84, 53, 0.18));
  transition: transform 0.26s ease, opacity 0.26s ease;
}
.mb-pop.pop-quiz .illu.is-swap {
  transition: none;
}
.mb-pop.pop-quiz .illu.to-r {
  transform: translateX(9rem);
  opacity: 0;
}
.mb-pop.pop-quiz .illu.to-l {
  transform: translateX(-9rem);
  opacity: 0;
}
.mb-pop.pop-quiz .whats {
  left: 48.3rem;
  top: 22rem;
  transform-origin: -16.3rem -25.7rem;
  z-index: 3;
}
.mb-pop.pop-quiz { /* PSD 타입 bbox 카드 rel (483,220) 126x96 · origin 은 돔 중심(320,-37) · 캐릭터(z2) 보다 앞 */
  /* 9/22 선택지 호버 확대·그림자가 Swiper 기본 overflow:hidden 에 잘려서 해제.
     팝업(.mb-pop) 이 overflow:hidden 이라 옆 문항이 밖으로 새지는 않는다 */
}
.mb-pop.pop-quiz .swiper {
  top: 37.3rem;
  height: 44rem;
  overflow: visible;
}
.mb-pop.pop-quiz { /* 9/10 시안 문항 글리프 383 에 맞춤 (PSD 타입 bbox 379 는 라인박스보다 6 아래) */ }
.mb-pop.pop-quiz .qtxt {
  top: 1.1rem;
}
.mb-pop.pop-quiz {
  /* 9/22 VS 제거 + 선택지를 가운데로 모아(242+20+242=504) 좌우 68 을 화살표 터치 영역으로 비운다 */
}
.mb-pop.pop-quiz .opts {
  top: 15.9rem;
  left: 0;
  right: 0;
  width: auto;
  justify-content: center;
  gap: 2rem;
}
.mb-pop.pop-quiz { /* 9/10 시안 선택지 상단 532 (373+159) */
  /* 9/22 PC 호버 — sec2 방식 선택 카드와 같은 동작(떠오름 + 확대 + 그림자).
     .is-sel 의 노란 테두리(inset)가 지워지지 않게 겹쳐 쓰고, 이미 답해 흐려진 쪽(.is-dim)은 제외 */
}
.mb-pop.pop-quiz .opts .opt {
  transition: background 0.2s, color 0.2s, transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s;
}
@media (hover: hover) {
  .mb-pop.pop-quiz .opts .opt:not(.is-dim):hover {
    transform: translateY(-1.4rem) scale(1.01);
    box-shadow: 0 3rem 2.2rem rgba(0, 56, 180, 0.22);
    z-index: 1;
  }
  .mb-pop.pop-quiz .opts .opt.is-sel:not(.is-dim):hover {
    box-shadow: inset 0 0 0 0.8rem #fffc1e, 0 3rem 2.2rem rgba(0, 56, 180, 0.22);
  }
  .mb-pop.pop-quiz .opts .opt:not(.is-dim):active {
    transform: translateY(-0.6rem) scale(1.005);
  }
}
.mb-pop.pop-quiz .mb-dots {
  top: 84.3rem;
}
.mb-pop.pop-quiz { /* 9/10 시안 점 상단 842 */
  /* 9/22 꺾쇠가 작아 누르기 어려움 → 아이콘 크기(27x45)는 그대로 두고 누르는 상자만 키운다.
     가로는 팝업 끝 ~ 선택지 바로 앞(68), 세로는 선택지와 같은 높이(532~814).
     영역은 68x200 을 선택지 세로 중앙(673)에 맞추고, 아이콘은 그 영역 정중앙에 둔다 */
}
.mb-pop.pop-quiz .mb-chev {
  top: 57.3rem;
  width: 6.8rem;
  height: 20rem;
  color: #fff;
  -webkit-mask-size: 2.7rem 4.5rem;
  mask-size: 2.7rem 4.5rem;
  -webkit-mask-position: center;
  mask-position: center;
}
.mb-pop.pop-quiz .mb-chev.prev {
  left: 0;
}
.mb-pop.pop-quiz .mb-chev.next {
  right: 0;
}
@media (max-width: 720px) {
  .mb-pop {
    width: 64rem;
  }
}

body.mb-lock {
  overflow: hidden;
}

/* 굿네이버스 공용 고정 알럿(popup_typeA) — 이 캠페인 스케일에 맞춰 본문·버튼 글자만 키운다 */
#mbMsgPop .popup_content {
  width: auto;
  padding: 6rem 2rem 4rem;
}
#mbMsgPop { /* 공통 400px 고정폭 해제 — 문구가 한 줄로 들어가게 */ }
#mbMsgPop #mbPopMsg {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3rem;
  font-weight: 500;
  line-height: 4.4rem;
  color: #221f1f;
  text-align: center;
  white-space: nowrap;
}
#mbMsgPop .btn_wrap .btn_confirm {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 3rem;
  font-weight: 700;
  height: 8.4rem;
  line-height: 8.4rem;
}

/* ============================================================
 * 푸터 (9/17 퍼블 수정 요청 슬라이드8) — PC/MO 공통 반응형, PC 버전 기준으로 통일
 * 지시 캡쳐 실측(1920 기준) : 글자 15px · 줄 간격 35px · 위아래 여백 32px · 흰 배경 · 가운데 정렬
 * 본문과 달리 rem(뷰포트 비례) 이 아니라 고정 px — MO 에서도 PC 와 같은 크기로 보여야 한다
 * ============================================================ */
.mb-foot {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 32px 20px;
  text-align: center;
}
.mb-foot p {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: #333;
  letter-spacing: 0;
  word-break: keep-all;
}
.mb-foot p + p {
  margin-top: 12px;
}
.mb-foot {
  /* 한 줄이 들어가는 PC 는 붙여 쓰고, 폭이 좁아 "금합니다." 가 혼자 떨어지는 MO 에서만 줄을 나눈다 */
}
.mb-foot br {
  display: none;
}
@media (max-width: 720px) {
  .mb-foot {
    padding: 32px 16px;
  }
  .mb-foot br {
    display: inline;
  }
}

/*# sourceMappingURL=mbti.css.map */