@charset "UTF-8";
@font-face {
font-family: "Pretendard";
font-weight: 400;
src: local("Pretendard Regular"), url("/e/kms/assets/fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Pretendard";
font-weight: 700;
src: local("Pretendard Bold"), url("/e/kms/assets/fonts/Pretendard-Bold.woff2") format("woff2");
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
letter-spacing: 0;
font-weight: 400;
font-size: 12rem;
font-family: "Pretendard";
vertical-align: baseline;
}

body {
line-height: 1 !important;
}

ol, ul {
list-style: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a {
text-decoration: none;
}

button {
background-color: transparent;
line-height: 1;
cursor: pointer;
}

#webContent {
padding: 0;
transition: none;
}
.event-wrap {
margin: 0 auto;
overflow: unset;
}

.wrap {
position: relative;
max-width: 720px;
margin: 0 auto;
background: #f7f7f8;
}

/* 팝업 */
.popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
max-width: 720px;
z-index: 99;
overflow: auto;
background: #fff;
margin: 0 auto;
}
.popup.none {
display: none;
}
.popup.active .dim {
display: block;
}
.popup.active > .popup_container {
transform: translateY(0%);
}
.popup.full > .popup_container {
top: 0;
border-radius: 0;
}
.popup.full > .popup_container .con {
padding: 0 20rem;
overflow-y: auto;
height: calc(100% - 90rem);
}
.popup.bottomsheet {
background: transparent;
}
.popup.bottomsheet > .popup_container {
padding: 0 20rem;
}
.popup .dim {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: calc(100% + 1rem);
background-color: #333;
opacity: 0.5;
overscroll-behavior: none;
transition: all 0.5s ease-in-out;
}
.popup > .popup_container {
position: fixed;
bottom: 0;
width: 100%;
max-width: 720px;
min-height: 1rem;
border-radius: 16rem 16rem 0 0;
transform: translateY(105%);
transition: transform 0.5s ease;
background-color: #fff;
overflow: hidden;
box-sizing: border-box;
}

.wrap .notice_wrap {padding: 50rem 19rem 0;background: #f7f7f8;text-align: left;}
.wrap .notice_wrap .notice dt {padding: 0 0 12rem;font-size: 14rem;font-weight: 600;line-height: 19rem;color: #222;}
.wrap .notice_wrap .notice li {position: relative;padding-left: 8rem;font-size: 12rem;line-height: 18rem;color: #222;margin-bottom: 12rem;letter-spacing: -0.2rem;}
.wrap .notice_wrap .notice li span {color: #ff586e;}
.wrap .notice_wrap .notice li .bk {color: #2b2c31;font-size: 12rem;}
.wrap .notice_wrap .notice .last {margin-bottom: 30rem;}
.wrap .notice_wrap .notice .mgb {margin-bottom: 40rem;}
.wrap .notice_wrap .notice .end {padding-bottom: 18rem;}
.wrap .notice_wrap .notice li.red, .main .notice_wrap .notice li span {color: #ff586e;}
.wrap .notice_wrap .notice ul li .red {color: #ff586e;}
.wrap .notice_wrap .notice .flex {color: #222;display: flex;}
.wrap .notice_wrap .notice .flex span {color: #222;padding-right: 3rem;}
.wrap .notice_wrap .notice li span.bold {color: #222;font-weight: bold;font-size: 12rem;}
.wrap .notice_wrap .notice li.red::before {background: #ff586e;}
.wrap .notice_wrap .notice li.bold {font-weight: bold;color: #2b2c31;}
.wrap .notice_wrap .notice li.depth {margin-left: 10rem;}
.wrap .notice_wrap .notice li.depth:before {content: "";display: block;position: absolute;width: 4rem;height: 1rem;background: #666;left: 0;top: 8rem;}
.wrap .notice_wrap .notice li:before {content: "";display: block;position: absolute;width: 2rem;height: 2rem;border-radius: 50%;background: #2b2c31;left: 0;top: 8rem;}
.wrap .notice_wrap .notice li img {width: 24rem;vertical-align: middle;margin-right: 5rem;}
.wrap .notice .footer {text-align: center;padding-top: 11rem;position: relative;}
.wrap .notice .footer p {font-size: 12rem;color: #2b2c31;line-height: 1.44;font-weight: bold;}
.wrap .notice .footer p span {font-weight: normal;font-size: 12rem;}
.wrap .notice .footer::before {content: "";background: #ccc;width: 320rem;height: 1rem;position: absolute;top: 0;left: 0;opacity: 0.3;}

.wrap .btn_top {position: fixed;bottom: 55rem;right: calc(50% - 160rem);width: 38rem;height: 38rem;z-index: 11;opacity: 0;transition: opacity 0.4s ease-in-out;background: #fff;border-radius: 50%;box-shadow: 0 0 10.5rem 0 rgba(0, 0, 0, 0.10);transform: rotate(-90deg);}
.wrap .btn_top::before, .wrap .btn_top::after {background: #303038;border-radius: 999rem;content: "";position: absolute;left: 30%;width: 12rem;height: 1.5rem;transform-origin: right center;}
.wrap .btn_top::before {transform: rotate(-45deg);top: 48%;}
.wrap .btn_top::after {transform: rotate(45deg);top: 50%;}

* {box-sizing: border-box;}
/* start */

.container {
  margin: 0 auto;
  background: #fff;
}

/* ===== 헤더 ===== */
.header {
  display: flex;
  align-items: center;
  gap: 6rem;
  padding: 21rem 20rem;
  font-size: 16rem;
  font-weight: 700;
}
.header .dot {
  width: 16rem; height: 16rem;
  background: #00d56b;
  border-radius: 4rem;
  display: inline-block;
}

/* ===== 히어로 ===== */
.hero {
  text-align: center;
}



.wrap .hero-badge-img {
  display: block;
  width: 130rem;
  height: auto;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(-220%);
}
.hero-badge-img.drop {
  animation: badgeDrop 0.85s forwards;
}
@keyframes badgeDrop {
  0%   { opacity: 0; transform: translateY(-220%) scale(1, 1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  42%  { opacity: 1; transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  52%  { opacity: 1; transform: translateY(0) scale(1.15, 0.85); animation-timing-function: ease-out; }
  68%  { opacity: 1; transform: translateY(-14%) scale(0.95, 1.06); animation-timing-function: ease-in; }
  82%  { opacity: 1; transform: translateY(2%) scale(1.04, 0.97); animation-timing-function: ease-out; }
  92%  { opacity: 1; transform: translateY(-1%) scale(0.99, 1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}

.hero-card {
  margin-top: 28rem;
}
.hero-text {
  font-size: 24rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 27rem;
  
}

.sticky-wrap {
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 110rem;
  opacity: 0;
  background:linear-gradient(180deg, rgba(247,247,248,0.00) 1.61%, #f7f7f8 66.6%);
  padding:17rem 0 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.4s ease-in-out;

}

.sticky-wrap .cta-btn {
    display: block;
    width: 320rem;
    height: 49rem;
}

.sticky-wrap .link-row {
    display: inline-flex;
    align-items: center;
    font-size: 28rem;
    font-weight: 700;
    color: #484848;
    margin-top: 8rem;
}



.cta-btn {
  width: 100%;
  width: 185rem;
  border: none;
  border-radius: 14rem;
  background: #00d56b;
  color: #1d1d1d;
  font-size: 18rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 45rem;
  line-height: 45rem;
}
.cta-btn:active { background: #0AE678; }

.cta-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(240deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(0deg);
  animation: btnShine 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btnShine {
  0%   { left: -60%; }
  40%  { left: 130%; }
  100% { left: 130%; }
}

.illust {
  margin-top: 38rem;
}
.illust-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
}
.wrap .illust-base {
  width: 300rem;
  height: auto;
  display: block;
}

/* 눈 (오른쪽 얼굴, 뜬눈/감은눈 이미지를 교차 애니메이션) */
.wrap .illust-eyes-open,
.wrap .illust-eyes-closed {
  position: absolute;
  left: 160rem;
  width: 90rem;
  height: auto;
}
.wrap .illust-eyes-open {
  top: 100rem;
  animation: eyeOpenBlink 1.8s ease-in-out infinite;
}
.wrap .illust-eyes-closed {
  top: 110rem;
  animation: eyeClosedBlink 1.8s ease-in-out infinite;
}
@keyframes eyeOpenBlink {
  0%, 88%, 100% { opacity: 1; }
  93%     { opacity: 0; }
}
@keyframes eyeClosedBlink {
  0%, 88%, 100% { opacity: 0; }
  93%    { opacity: 1; }
}

.hurry .btn_close {text-align: right;}
.hurry .btn_close button {width: 64rem;height: 48rem;background: url(/e/kms/assets/images/event/2026/20260063/icon_header_close.png) no-repeat center / 24rem 24rem;font-size: 0;}
.hurry .subject {padding: 0 30rem 20rem;}

.hurry .subject.pd0 {padding: 0 ;}
.hurry .subject.pd0 .agree-wrap {width: 100%;}
.hurry .subject.pd0 .agree-wrap p {font-size:18rem}


.hurry .subject .namenum {margin: 8rem 0 26rem;padding: 18rem 20rem;border-radius: 12rem;border: 1rem solid #dbdbdb;font-size: 14rem;color: #2b2b2d;width: 100%;outline: none;}
.hurry .subject .namenum.short {margin: 8rem 0 10rem;}
.hurry {background: #f0f0f1;}
.hurry .subject .title {text-align: center;font-size: 20rem;font-weight: bold;color: #2f2f33;line-height: 1.3;}
.hurry .subject .infomation_notice {margin-left: 10rem;}
.hurry .subject .infomation_notice li {position: relative;font-size: 12rem;color: #75757b;padding-left: 9rem;line-height: 1.3;padding-bottom: 10rem;}
.hurry .subject .infomation_notice li:last-child {padding-bottom: 0;}
.hurry .subject .infomation_notice li::before {content: "";background: #75757b;width: 3rem;height: 3rem;border-radius: 50%;position: absolute;top: 6rem;left: 0;}
.hurry .subject .agree-wrap {width: 300rem;}
.hurry .subject .agree-wrap p {margin-bottom: 18rem;font-size: 14rem;line-height: 1.3;font-weight: bold;color: #2f2f33;}
.hurry .subject .agree-wrap .agree-table-wrap {overflow: hidden;border: 1rem solid #c3ebd7;border-radius: 12rem;margin-bottom: 20rem;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table {line-height: 1.4;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table .agree-title {width: 76rem;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table .agree-content {width: auto;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table th, .hurry .subject .agree-wrap .agree-table-wrap .agree-table td {border: 0;text-align: left;vertical-align: middle;word-break: break-all;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table th {padding: 11rem 5rem;background: #f0faf5;font-weight: 400;font-size: 10rem;color: #333;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table td {padding: 11rem 10rem;background: #fff;font-size: 10rem;color: #333;letter-spacing: -.3rem;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table tr:nth-child(even) th {background: #d6f4e5;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table tr:nth-child(even) td {background: #faf9f8;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table strong {font-size: 12rem;font-weight: 700;color: #333;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table .notice {margin-top: 9rem;font-size: 10rem;line-height: 1.45;font-weight: 400;margin-bottom: 0;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table tr:nth-child(1) {height: 29.5rem;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table tr:nth-child(2) {height: 30rem;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table tr:nth-child(3) {height: 76rem;}
.hurry .subject .agree-wrap .agree-table-wrap .agree-table tr:nth-child(4) {height: 95rem;}
.hurry .subject #submitBtn {margin: 30rem -10rem 0;width: 320rem;height: 56rem;border-radius: 12rem;color: #fff;font-size: 18rem;font-weight: bold;background: #8d8d8d;cursor: default;}
.hurry .subject #submitBtn.active {background: #212624;cursor: pointer;}

.checkbox-wrap {display: flex;align-items: center;gap: 5rem;margin-bottom:30rem}
.checkbox-wrap label {font-size:16rem;font-weight: 700;cursor: pointer;}
.checkbox-wrap .checkbox01 {width: 22rem;height: 22rem;background:url(/e/kms/assets/images/event/2026/20260063/checkoff.png) no-repeat;background-size: contain;appearance: none;;cursor: pointer;}
.checkbox-wrap .checkbox01:checked {background:url(/e/kms/assets/images/event/2026/20260063/checkon.png) no-repeat;background-size: contain}

.hurry .subject .name, .hurry .subject .number, .hurry .subject .address {font-size: 14rem;font-weight: bold;color: #2f2f33;}
.hurry .subject .name {padding-top: 30rem;}
.hurry .subject .namenum.mgbtno {margin: 8rem 0 0;}
.hurry .subject .namenum::placeholder {color: #969492;font-size: 14rem;}
.hurry .subject .address_txt {margin-top: 8rem;padding: 18rem 20rem;border-radius: 12rem;border: 1rem solid #d8d8d8;font-size: 14rem;color: #2b2b2d;width: 100%;outline: none;}
.hurry .subject .address_txt::placeholder {color: #969492;font-size: 14rem;}
.hurry .subject .surch_box {display: flex;gap: 10rem;justify-content: space-between;height: 54rem;margin-top: 8rem;}
.hurry .subject .surch_box .address_num {padding: 18rem 20rem;border-radius: 12rem;border: 1rem solid #d8d8d8;font-size: 14rem;color: #2b2b2d;width: 63%;outline: none;}
.hurry .subject .surch_box .address_num::placeholder {color: #969492;font-size: 14rem;}
.hurry .subject .surch_box .address_surch {width: 100rem;background: #fb6833;border-radius: 12rem;padding: 20rem 0;color: #fff;font-size: 14rem;font-weight: bold;}
.hurry .subject .movedown {padding: 32rem 0 50rem;text-align: center;}
.hurry .subject .arrow_down {width: 42rem;animation: down 1s infinite alternate;}
@keyframes down {0% {opacity: 0.2;}100%{opacity: 1;transform: translateY(15rem);}}
.hurry .subject .agr {width: 100%;padding-bottom: 20rem;}
.hurry .subject .flex {display: flex;align-items: center;}
.hurry .subject .flex input {display: none;}
.hurry .subject .flex img {width: 22rem;margin: 0 8rem 0 3rem;}
.hurry .subject .flex label {font-size: 16rem;color: #2f2f33;font-weight: bold;}

.wrap .illust-spark {
  position: absolute;
  left: 270rem;
  top: 8.2%;
  width: 68rem;
  height: auto;
  transform-origin: center;
  animation: sparkTwinkle 3s ease-in-out infinite;
}
@keyframes sparkTwinkle {
  0%, 45%, 100% { opacity: 1; transform: scale(1); }
  10%           { opacity: 0.25; transform: scale(0.85); }
  20%           { opacity: 1;    transform: scale(1.1); }
  30%           { opacity: 0.25; transform: scale(0.85); }
  40%           { opacity: 1;    transform: scale(1.1); }
}

.howto {
  padding: 60rem 30rem;
  text-align: center; 
  background:#f0f0f1;
}
.howto-card h2 {
  font-weight: 700;
  background: #000;
  padding:10rem 20rem;
  font-size:20rem;
  color:#fff;
  display: inline-block;
  border-radius: 24rem;
  margin-bottom: 20rem;
}

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16rem;
}

.step-item {
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(36rem);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
  .step-item .img {width:100%}
.step-item.in-view { opacity: 1; transform: translateY(0); }
.step-item[data-step="2"] { transition-delay: 0.12s; }

.step-check {
  width: 26rem; height: 26rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: #00d56b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14rem;
}
.step-text { flex: 1; min-width: 0; }
.step-text strong { display: block; font-size: 14rem; }
.step-text p { margin: 2rem 0 0; font-size: 12rem; color: #1D1D20; }

.badge-n {
  flex-shrink: 0;
  background: #f9f9f9;
  border: 1rem solid #e8e8e8;
  border-radius: 20rem;
  font-size: 11rem;
  font-weight: 700;
  color: #0AE678;
  padding: 5rem 9rem;
}

.period-info {
  margin-top: 16rem;
  padding-top: 14rem;
  font-size: 12rem;
  color: #1D1D20;
  display: flex;
  flex-direction: column;
  gap: 17rem;
}

.period-info > div {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  gap: 10rem;
  padding-left: 20rem;
}
.period-info .box { background: #fff;padding:3rem 10rem;font-size:12rem;border-radius: 38rem;color:#1D1D20}
.period-info .txt { color:#1D1D20;font-size:16rem;font-weight: 700;}


/* ===== 약관/안내 ===== */
.terms {
  padding: 26rem 20rem 40rem;
}
.terms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rem;
}
.terms h3 { font-size: 14rem; margin: 0; }
.terms-more {
  border: none;
  background: transparent;
  font-size: 12rem;
  font-weight: 700;
  color: #1D1D20;
  cursor: pointer;
  padding: 4rem 0;
}
.terms ul { margin: 0; padding-left: 16rem; }
.terms li {
  font-size: 12rem;
  line-height: 1.7;
  color: #1D1D20;
}

/* ===== 딤 ===== */
.dim {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 3;
  display: none;
  transition: background 0.3s ease;
}
.dim.on { display: block; background: rgba(0, 0, 0, 0.5); }

/* ===== 팝업(바텀시트/풀팝업) ===== */
.bottom-sheet {
  position: fixed;
  left: 0; right: 0;
  margin: 0 auto;
  background: #fff;
  z-index: 10;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.bottom-sheet.bg01 {
  background: #F0F0F1;
}
.naverpayPlay {
width: 100%;
height: 104rem;
}

.bottom-sheet.on { transform: translateY(0); }

/* 바텀시트 타입: 하단에서 카드 형태로 올라옴 */
.bottom-sheet.type-bottom {
  bottom: 0;
  border-radius: 22rem 22rem 0 0;
  padding: 54rem 19rem 20rem;
  max-height: 95vh;
  overflow-y: auto;
}

/* 풀팝업 타입: 화면 전체를 덮음 */
.bottom-sheet.type-full {
  top: 0;
  bottom: 0;
  height: 100%;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
}
.full-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.full-title {
  font-size: 20rem;
  font-weight: 700;
  margin: 0 0 20rem;
}
.full-terms-list {
  margin: 0;
  padding-left: 18rem;
  display: flex;
  flex-direction: column;
  gap: 14rem;
}
.full-terms-list li {
  font-size: 13rem;
  line-height: 1.7;
  color: #1D1D20;
}

.sheet-header {
  height: 50rem;
  width: 100%;
  position: relative;
}

.sheet-close {
  position: absolute;
  top: 16rem; right: 16rem;
  width: 32rem; height: 32rem;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}
.sheet-close::before,
.sheet-close::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 24rem; height: 2rem;
  background: #2b2b2d;
}
.sheet-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sheet-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.coupon-card {
  margin-top: 18rem;
  background: #00d56b;
  border-radius: 16rem;
  padding: 22rem;
  text-align: center;
  color: #fff;
}
.coupon-card .npay {
  font-size: 13rem;
  font-weight: 700;
  background: #fff;
  color: #0AE678;
  display: inline-block;
  padding: 3rem 10rem;
  border-radius: 8rem;
  margin-bottom: 10rem;
}
.coupon-card .amount { font-size: 20rem; font-weight: 700; }

.sheet-desc {
  text-align: center;
  margin: 10rem 0 22rem;
  font-size: 15rem;
  line-height: 1.5;
}
.sheet-desc strong { display: block; font-weight: 700; }
.sheet-desc span { color: #1D1D20; font-size: 13rem; }

.submit-btn {
  width: 100%;
  height: 56rem;
  line-height: 56rem;
  border: none;
  border-radius: 16rem;
  background: #212624;
  color: #fff;
  font-size: 18rem;
  font-weight: 700;
  cursor: pointer;
  display: block;
  text-align: center;
}

.submit-btn.checkedBtn {
  background: #8d8d8d;
}

.submit-btn.checkedBtn.active {
  background: #8d8d8d;
}

.submit-btn.gray {
  background: #ccc;
  color:#9b9b9b;
}


.friends-swiper {
  background: #f9f9f9;
}
.amount-head {
  background: #fff;
  padding:20rem;
  border-radius: 20rem;
}

/* ===== 누적금액 바텀시트 ===== */
.amount-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13rem;
  font-weight: 700;
  color: #1D1D20;
}

.amount-head-row .count {
  color:#6b7280;
  font-size:12rem;

}

  .amount-head-row .invite-count {
  color:#00c965;
  font-weight: 700;
}


.amount-head-row .amount-label {
  display: flex;
  align-items: center;
  color: #212624;
  font-size: 16rem;
  font-weight: 700;
}

.amount-value {
  margin: 10rem 0 12rem;
  font-size: 18rem;
  
  color: #212624;
}

  .amount-value-text {
  font-size: 30rem;
  font-weight: 700;
}

.amount-value .amount-total {
  font-size: 10rem;
  color: #A0A0Ad;
  margin-left: 5rem;
}

.amount-bar {
  width: 100%;
  height: 5rem;
  background: #2D3D4D;
  border-radius: 20rem;
  overflow: hidden;
}
.amount-bar-fill {
  height: 100%;
  width: 0%;
  background: #0AE678;
  border-radius: 20rem;
  transition: width 0.6s ease;
}

.friends-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28rem;
  margin-bottom: 12rem;
  
}

.friends-head > p {
  font-size:16rem;
  color:#1D1D20;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.friends-head .friends-badge {
  display: inline-block;
  background: #0AE678;
  font-size: 14rem;
  font-weight: 700;
  padding: 6rem 8rem 5rem;
  border-radius: 25rem;
  margin-left: 4rem;
  color:#1D1D20;
}

.friends-nav {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1rem solid #e8e8e8;
  border-radius: 999rem;
  overflow: hidden;
}
.friends-nav .page-indicator {
  font-size: 11rem;
  font-weight: 700;
  color: #1D1D20;
  min-width: 28rem;
  text-align: center;
}
.nav-btn {
  width: 33rem;
  height: 22rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
}
.nav-btn::before {
  content: '';
  width: 6rem;
  height: 6rem;
  border-top: 1rem solid #1D1D20;
  border-right: 1rem solid #1D1D20;
}
.nav-btn.friends-prev::before { transform: rotate(-135deg); margin-right: -2rem; }
.nav-btn.friends-next::before { transform: rotate(45deg); margin-left: -2rem; }

.nav-btn.friends-prev::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 16rem;
  background: #ccd0d5;
}
.nav-btn:active { background: #f9f9f9; }

.nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  background: #fff;
  pointer-events: none;
}

.friends-nav.empty .nav-btn.swiper-button-disabled {
  opacity:1;
}

.friends-nav.empty {
  background: #dce1e2;
}

.friends-nav.empty .nav-btn {
  width: 33rem;
  height: 22rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #dce1e2;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
}
.friends-nav.empty .nav-btn::before {
  content: '';
  width: 6rem;
  height: 6rem;
  border-top: 1rem solid #ccd0d5;
  border-right: 1rem solid #ccd0d5;
}


.friends-viewport {
  border: 1rem solid #e8e8e8;
  border-radius: 16rem;
  overflow: hidden;
  position: relative;
}
.friends-empty {
  padding: 46rem 20rem;
  text-align: center;
  color: #1D1D20;
  font-size: 13rem;
  background: #f9f9f9;
}
.friends-empty p {
color:#A0A0Ad;
font-size: 14rem;
font-weight: 700;
margin-top: 8rem;
}
.friends-empty img {
width: 52rem;
}

.friends-viewport.is-empty .friends-empty { display: block; }
.friends-viewport.is-empty .friends-swiper { display: none; }

.friends-swiper {
  width: 100%;
  /* display: none; */
}
.friend-row {
  height: 57rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16rem;
  border-bottom:1px solid #eaecee;
  background: #fff;
}
.friend-row.is-empty {
  background: #f9f9f9;
}
.friend-row:first-child { border-top: none; }
.friend-name {
  font-size: 14rem;
  font-weight: 700;
  color:#1d1d20;
}
.friend-date {
  font-size: 10rem;
  color: #687280;
  margin-top: 5rem;
}
.friend-amount {
  text-align: right;
  font-size: 15rem;
  font-weight: 700;
}
.friend-amount.capped  .price{
  color:#1D1D20;
}
.friend-amount .price{
  color:#00c965;
  font-weight: 700;
  font-size:16rem;
}
.friend-amount .won {
  font-size:12rem;
  color:#1d1d20;
  margin-left:3rem;
}

.friend-amount.capped { color: #212624; }
.friend-amount .cap-note {
  display: block;
  font-size: 10rem;
  color: #ff1b54;
  margin-top: 5rem;
}

.amount-invite-btn {
  width: 100%;
  height: 56rem;
  line-height: 56rem;
  border: none;
  border-radius: 14rem;
  background: #212624;
  color: #fff;
  font-size: 18rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 20rem;
}

.chevron {
  width: 24rem;
  height: 24rem;
  position: relative;
}

.chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12rem;
  height: 12rem;
  border-top: 4rem solid #4a4a4a;
  border-right: 4rem solid #4a4a4a;
  border-radius: 2rem; /* 끝부분을 둥글게 */
  transform: translate(-60%, -50%) rotate(45deg);
}

.logo img {width: 73rem;}


.link-more {
  display: block;
  margin-top: 12rem;
  font-size: 13rem;
  color: #1D1D20;
  text-decoration: none;
}
  .link-more .txt {
  font-size:16rem;
  font-weight: 700;
  }
.link-row {
  display: inline-flex;
  align-items: center;
  font-size: 28rem;
  font-weight: 700;
  color: #4a4a4a;
  margin-top: 15rem;
}

.link-row .chevron {
  width: 20rem;
  height: 20rem;
}

.link-row .chevron::before {
  width: 8rem;
  height: 8rem;
  border-width: 2rem;
}

.sheet-desc .txt01 {
  color:#00d56b;
  font-size:16rem;
  font-weight: 700;
}

  .sheet-desc .txt02 {
  color:#1D1D20;
  font-size:22rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 5rem;
}
  .sheet-desc .txt03 {
  color:#00d56b;
  font-size:22rem;
  font-weight: 700;
}

  .sheet-desc .txt04 {
  color:#1D1D20;
  font-size:14rem;
  line-height: 1.3;
  margin-top: 5rem;
}

.btn-bottom-txt {
  color:#75757b;
  font-size:11rem;
  margin-top:10rem;
  text-align: center;
  line-height: 1.3;
}

.bottom-txt2 {
  color:#75757b;
  font-size:11rem;
  margin-top:10rem;
  text-align:left;
  line-height: 1.3;
}

.sheet-desc .black {
  color:#1d1d20;
  font-size:22rem;
  font-weight: 700;
}

.amount-head-row .pill.cap-badge {
  display: inline-block;
  font-size: 10rem;
  border-radius: 10rem;
  margin-left: 6rem;
  background:#cbfbe3 url(/e/kms/assets/images/event/2026/20260063/ico_badge.png) no-repeat 6rem center / 7rem 7rem;    
  padding:4rem 7rem 6rem 15rem;
  color:#115425;    
}

.share_box {
  padding-bottom:20rem
}
.share_box .tit {
color:#1d1d20;
font-size:18rem;
text-align: center;
font-weight: 700;
}

.share_box .btns {
display: flex;
align-items: center;
gap: 33rem;
justify-content: center;
margin-top:26rem;

}
.share_box .btns button {
width: 62rem;
}
.share_box .btns button img {
width: 100%
}

.share_box .btns a {
width: 62rem;
}
.share_box .btns a img {
width: 100%
}

.radioWrap .radio {
  display: flex;
  gap: 35rem;
  justify-content: center;
  margin-bottom: 30rem;
}

.radioWrap .radio.col {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}
.radioWrap .radio input {
  display: none;
}
.radioWrap .radio input:checked + label::before {
  border: 1rem solid #212266;
}
.radioWrap .radio input:checked + label::after {
  background-color: #212266;
}
.radioWrap .radio label {
  position: relative;
  line-height: 20rem;
  padding-left: 28rem;
  font-size: 14rem;
  color: #333;
}
.radioWrap .radio label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20rem;
  height: 20rem;
  box-sizing: border-box;
  border: 1rem solid #c7c7c7;
  border-radius: 50%;
}
.radioWrap .radio label::after {
  content: "";
  position: absolute;
  top: 5rem;
  left: 5rem;
  width: 10rem;
  height: 10rem;
  background-color: #eee;
  border-radius: 50%;
  box-sizing: border-box;
}