/* Staking Modal Styles (from Figma variables) */
:root {
  --navy: #293958;
  --black: #333333;
  --white: #ffffff;
  --blue: #3299f9;
  --gray300: #565656;
  --gray100: #989898;
  --gray50: #f2f2f2;
}


.btn-staking{

  min-width: 116px;
  height: 44px;

  border-radius: 162px;
  background-color: #3299F9;
  color: white;
  border: none;


  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%; /* 28px */
}




#stakingModal {
  z-index: 9999;
}

#stakingModal .modal-dialog{
  max-width: 1920px;
}


.margin-box{
  margin-bottom: clamp(
          40px,
          calc(40px + (60 * ((100vw - 375px) / (1920 - 375)))),
          100px
  );
}

.margin-box-100-40{
  margin-bottom: clamp(
          40px,
          calc(40px + (60 * ((100vw - 375px) / (1920 - 375)))),
          100px
  );
}

.margin-box-middle{
  margin-bottom: clamp(
          40px,
          calc(40px + (20 * ((100vw - 375px) / (1920 - 375)))),
          60px
  );
}

.margin-box-middle-30{
  margin-bottom: clamp(
          30px,
          calc(30px + (10 * ((100vw - 375px) / (1920 - 375)))),
          60px
  );
}

.margin-box-middle50{
  margin-bottom: clamp(
          40px,
          calc(40px + (20 * ((100vw - 375px) / (1920 - 375)))),
          50px
  );
}

.margin-box-6020{
  margin-bottom:  clamp(1.25rem, 0.643rem + 2.589vi, 3.75rem);
}

.staking-modal {
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
  max-height: 95vh; /* 추가 요구사항: 모달 세로 최대 높이 */
  display: flex;
  flex-direction: column;
}

#stakingModal .modal-body{
  padding-left: clamp(16px, 2.083vw, 40px);
  padding-right: clamp(16px, 2.083vw, 40px);
}

@media only screen and (min-width: 1920px) {

  #stakingModal .modal-body{
    padding-left: 320px;
    padding-right: 320px;
  }
}



.staking-modal .modal-header {
  padding: 1rem 1.5rem 0 1.5rem;
  flex: 0 0 auto;
}

.wrap-staking-hero{
  text-align: center;
}

/* control width on the picture wrapper */
picture.staking-hero {
  display: block;
  width: 73%;
  max-width: 945px;
  margin: 0 auto;
}

.staking-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* 본문 영역 스크롤 처리 */
.staking-modal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.staking-modal .modal-footer {
  flex: 0 0 auto;
}


.staking-title {
  font-family: Inter;
  color: var(--navy, #293958);
  text-align: center;

  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 72px */
  margin: 0 0 20px;
  /* font-size: clamp(20px, 2.5vw, 48px); */
  font-size : clamp(1.25rem, 0.825rem + 1.812vi, 3rem);
}

.staking-subtitle {

  margin: 0 auto;

  color: var(--black, #333);
  text-align: center;
  font-family: Inter;
  font-size: clamp(1.125rem, 0.943rem + 0.777vi, 1.875rem);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 45px */

}


.staking-section {
  margin-bottom: 60px;
}


/* 신청기간 */
.staking-section h3 {
  color: #000;
  text-align: center;
  font-family: Inter;
  font-size: clamp(1.25rem, 1.007rem + 1.036vi, 2.25rem);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 54px */

  margin-bottom: 18px;
}

.staking-section p, .staking-section li {
  color: #000;

  text-align: center;
  font-family: Inter;
  font-size: clamp(1.125rem, 0.943rem + 0.777vi, 1.875rem);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 45px */
}

.staking-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--black);
  font-size: clamp(1.125rem, 0.943rem + 0.777vi, 1.875rem);
  line-height: 1.6;
}

.staking-amount {
  color: var(--black);
}

.staking-highlight {
  padding: 24px 16px;
  text-align: center;
}

.staking-highlight-title {
  color: var(--navy);
  font-weight: 600;
  font-size: 28px;
  margin: 0 0 10px;
}

.staking-highlight-desc {
  color: var(--black);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 auto 16px;
  max-width: 720px;
}

.staking-cta {
  display: flex;

  height: clamp(
          50px,
          calc(50px + (50 * ((100vw - 375px) / (1920 - 375)))),
          100px
  );


  justify-content: center;
  align-items: center;

  align-self: stretch;

  width: 100%;
  max-width: 945px;

  border-radius: 18px;

  margin-left: auto;
  margin-right: auto;

  background: var(--blue, #3299F9);
  box-shadow: 0 4px 26.7px 0 rgba(0, 0, 0, 0.18);

  color: var(--white, #FFF);
  text-align: center;
  font-family: Inter;
  font-size: clamp(1.125rem, 0.943rem + 0.777vi, 1.875rem);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 45px */

  cursor : pointer;
}

.staking-cta:disabled {
  opacity: 0.8;
}

.staking-consent {
  display: flex;
  justify-content: center;
}

.staking-checkbox {
  width: 42px;
  height: 42px;
  border: 1px solid #828282;
  border-radius: 6px;
}

#staking-consent{
  width: clamp(1rem, 0.788rem + 0.906vi, 1.875rem);
  height: clamp(1rem, 0.788rem + 0.906vi, 1.875rem);
  margin-right: 14px;
}

#staking-consent:checked{
  background-color: var(--blue, #3299F9);
}

.staking-consent-label {

  font-weight: 500;
  color: var(--black, #333);
  font-family: Inter;
  font-size: clamp(1rem, 0.788rem + 0.906vi, 1.875rem);
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 42px */
  letter-spacing: -0.3px;
  cursor: pointer;
}

.staking-periods {
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 0.329rem + 2.33vi, 3.125rem);
  padding: 0px 16px;
  justify-content: center;
}

.staking-period {
  display: flex;
  height: clamp(3.125rem, 2.367rem + 3.236vi, 6.25rem);

  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;

  border-radius: clamp(0.625rem, 0.504rem + 0.518vi, 1.125rem);
  background: var(--white, #FFF);
  box-shadow: 0 1px 19.4px 0 rgba(0, 0, 0, 0.18);

  color: var(--black, #333);
  text-align: center;
  font-family: Inter;
  font-size: clamp(1.125rem, 0.943rem + 0.777vi, 1.875rem);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 45px */
  outline: none;
}

.staking-period:disabled{

  background: var(--gray50, #F2F2F2);
  color: var(--gray100, #989898);
}
.staking-period.active{

  background: var(--blue, #3299F9);
  box-shadow: 0 1px 19.4px 0 rgba(0, 0, 0, 0.18);

  color: var(--white, #FFF);
}


.staking-note, .staking-risk {


}


.staking-note-header{
  display: flex;
  justify-content:flex-start;
  align-content: center;
  margin-bottom: 20px;
}

.staking-note-header img{
  width: clamp(1.625rem, 1.337rem + 1.23vi, 2.813rem);
  height: clamp(1.625rem, 1.337rem + 1.23vi, 2.813rem);
  margin-right: 10px;
}

.staking-note-header h4 {
  color: var(--black, #333);
  text-align: center;
  font-family: Inter;
  font-size: clamp(1.25rem, 1.098rem + 0.647vi, 1.875rem);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 45px */
  margin-bottom: 0px;
}

.staking-note-body{
  text-align: left;
}

.staking-note-body p {
  color: var(--gray300, #565656);
  font-family: Inter;
  font-size: clamp(0.875rem, 0.754rem + 0.518vi, 1.375rem)
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 30.8px */
  letter-spacing: -0.22px;
  text-align: left;
}


.wallet-info{
  display: flex;

  border-radius: 15px;
  border: 1px solid var(--gray100, #989898);
  background: var(--gray50, #F2F2F2);


  /*  50 32, 12 16 */
  padding:  clamp(0.75rem, 0.689rem + 0.259vi, 1rem) clamp(2rem, 1.727rem + 1.165vi, 3.125rem);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}

@media only screen and (max-width: 768px) {
  .wallet-info{
    gap: 10px;
  }
}

.wallet-info .info{
  display: flex;

  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.wallet-info .label{
  text-align: left;

  color: var(--gray300, #565656);
  font-family: Inter;
  font-size: clamp(0.875rem, 0.663rem + 0.906vi, 1.75rem);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 21px */
}


.wallet-info .info p.address{
  margin-bottom: 0px;

  color: var(--black, #333);
  font-family: Inter;
  font-size: clamp(1rem, 0.757rem + 1.036vi, 2rem);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 48px */
}

.wallet-info .btn-copy{

  display: inline-flex;

  padding: 10px 28px;
  justify-content: center;
  align-items: center;

  border-radius: 8px;
  border: 1px solid var(--blue, #3299F9);
  background: var(--white, #FFF);


  color: var(--blue, #3299F9);
  font-family: Inter;
  font-size: clamp(0.875rem, 0.723rem + 0.647vi, 1.5rem);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 36px */
}


@media only screen and (max-width: 768px) {
  .wallet-info .btn-copy{
    padding: 6px 12px;
  }
}


.desc-final {
  color: #000;
  text-align: center;
  font-family: Inter;
  font-size: clamp(1rem, 0.788rem + 0.906vi, 1.875rem);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 45px */
}


#after-apply{
  display: none;
}