@charset "utf-8";

/* 키즈 카플친 마일리지 이벤트 - MO (400px 기준) */
#container{
  background: #151415;
  padding-bottom: 0;
}
/* 02. 수신 동의 :: S */
.bf__agree {
  background: #151415;
}
.agree__inner {
  width: 100%;
  margin: 0 auto;
  padding: calc(60 * var(--vw-400)) calc(16 * var(--vw-400));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 타이틀 영역 */
.agree__info {
  text-align: center;
}
.agree__subtitle {
  display: block;
  font-family: "Proxima Nova", sans-serif;
  font-size: calc(18 * var(--vw-400));
  line-height: calc(22 * var(--vw-400));
  font-weight: 700;
  color: #134AFD;
  margin-bottom: calc(6 * var(--vw-400));
}
.agree__subtitle .ko{
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(16 * var(--vw-400));
  letter-spacing: -0.05em;
}
.agree__title {
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(26 * var(--vw-400));
  font-weight: 900;
  color: #fff;
  line-height: 1.4;
  letter-spacing: -0.05em;
  margin: 0;
}
.agree__title .en{
  font-weight: 800;
  font-size: calc(30 * var(--vw-400));
  font-family: "ProximaNova", sans-serif;
  letter-spacing: 0;
}
.agree__period {
  font-size: calc(18 * var(--vw-400));
  font-weight: 700;
  color: #727272;
  line-height: 1;
  margin-top: calc(16 * var(--vw-400));
}
.agree__period .ko{
  letter-spacing: -0.05em;
}
.agree__period .en{
  font-size: calc(20 * var(--vw-400));
}
.agree__desc {
  font-size: calc(16 * var(--vw-400));
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.05em;
  line-height: calc(26 * var(--vw-400));
  margin: calc(18 * var(--vw-400)) 0 calc(40 * var(--vw-400));
}
.agree__desc b{
  font-weight: 700;
  letter-spacing: 0;
}
.agree__desc b .en{
  font-size: calc(18 * var(--vw-400));
  font-family: "ProximaNova", sans-serif;
  letter-spacing: 0;
}

/* 쿠폰 이미지 */
.agree__coupon {
  width: calc(368 * var(--vw-400));
}
.agree__coupon img {
  width: 100%;
}

/* 버튼 영역 */
.agree__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30 * var(--vw-400));
  width: 100%;
}

/* 수신 동의 버튼 (공통 .btn .btn--md .btn--point / .btn--kakao 사용) */
.agree__btnWrap {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--vw-400));
  width: calc(330 * var(--vw-400));
  margin-top: calc(40 * var(--vw-400));
}
.agree__btnWrap > .btn {
  width: 100%;
  white-space: nowrap;
}

/* MO 공통 CSS(bf2026_common.css)에 .btn--md / .btn--kakao 미정의 → 본 페이지 fallback */
.agree__btnWrap .btn--md {
  padding: 0 calc(20 * var(--vw-400));
  min-width: calc(240 * var(--vw-400));
  height: calc(48 * var(--vw-400));
  font-size: calc(16 * var(--vw-400));
  letter-spacing: calc(-0.8 * var(--vw-400));
}
.agree__btnWrap .btn--kakao {
  font-size: calc(16 * var(--vw-400));
  letter-spacing: -0.06em;
  gap: calc(6 * var(--vw-400));
}
.agree__btnWrap .btn--kakao img {
  width: auto!important;
  height: calc(16 * var(--vw-400));
}

/* 안내 텍스트 */
.agree__note {
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(14 * var(--vw-400));
  font-weight: 400;
  color: #727272;
  text-align: center;
}
/* 02. 수신 동의 :: E */

/* 03. 수신 동의 방법 :: S */
.bf__method {
  background: #151415;
}
.method__inner {
  width: 100%;
  margin: 0 auto;
  padding: calc(30 * var(--vw-400)) calc(16 * var(--vw-400)) calc(40 * var(--vw-400));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30 * var(--vw-400));
}
.method__head {
  text-align: center;
}
.method__subtitle {
  display: block;
  font-size: calc(18 * var(--vw-400));
  font-weight: 700;
  color: #8E8F8F;
  margin-bottom: calc(6 * var(--vw-400));
  line-height: calc(26 * var(--vw-400));
}
.method__title {
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(26 * var(--vw-400));
  font-weight: 900;
  color: #fff;
  line-height: 1.4;
  margin: 0;
  letter-spacing: -0.05em;
}
.method__cards {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--vw-400));
  width: 100%;
}
.method__card {
  width: 100%;
  background-image: url('https://image.nbkorea.com/NBRB_Mobile/event/summerblackfriday2026/common/page_kids_plusfriend_method_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: calc(5 * var(--vw-400));
  padding-top: calc(18 * var(--vw-400));
  display: flex;
  flex-direction: column;
}
.method__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: #134AFD;
  font-size: calc(16* var(--vw-400));
  font-weight: 800;
  line-height: calc(26 * var(--vw-400));
  letter-spacing: -0.05em;
}
.method__tag .num{
  font-size: calc(18 * var(--vw-400));
  margin-left: calc(4 * var(--vw-400));
}
.method__cardTitle {
  text-align: center;
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(18 * var(--vw-400));
  font-weight: 700;
  color: #fff;
  line-height: calc(28 * var(--vw-400));
  margin-top: calc(6 * var(--vw-400));
  letter-spacing: -0.05em;
}
.method__cardDesc {
  text-align: center;
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(14 * var(--vw-400));
  font-weight: 400;
  color: #fff;
  line-height: calc(22 * var(--vw-400));
  margin-top: calc(4 * var(--vw-400));
  letter-spacing: -0.05em;
}
.method__cardDesc .en {
  font-size: calc(16 * var(--vw-400));
  font-family: "ProximaNova", sans-serif;
}
.method__cardImg {
  width: calc(240 * var(--vw-400));
  margin: calc(20 * var(--vw-400)) auto 0;
}
.method__cardImg img {
  width: 100%;
}
/* 03. 수신 동의 방법 :: E */

/* 04. 유의사항 :: S */
.bf__notice {
  background: #F5F5F5;
}
.notice__inner {
  width: 100%;
  margin: 0 auto;
  padding: calc(60 * var(--vw-400)) calc(16 * var(--vw-400)) calc(19 * var(--vw-400));
}
.notice__title {
  display: block;
  font-size: calc(16 * var(--vw-400));
  font-weight: 700;
  color: #000;
  margin-bottom: calc(20 * var(--vw-400));
  letter-spacing: -0.05em;
}
.notice__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.notice__list li {
  font-size: calc(13 * var(--vw-400));
  font-weight: 400;
  color: #737B82;
  line-height: calc(24 * var(--vw-400));
  letter-spacing: -0.05em;
  padding-left: calc(8 * var(--vw-400));
  position: relative;
}
.notice__list li .en{
  font-size: calc(15 * var(--vw-400));
}
.notice__list li::before {
  content: "-";
  position: absolute;
  left: 0;
}
/* 04. 유의사항 :: E */