:root{
  --color-monsterpink:#ff6e75;
  --color-monstergray:#a7aab1;
  --color-monsterblack:#37383b;
  --color-monsterpurple:#aa78fb;
  --color-monsterblue:#558fff;
  --b-color:#2776ea;
  --b-footer-bg-color:#444;
  --b-footer-fg-color:#888;
  --b-footer-sp-color:#666;
  --b-accent-color:#fff038;
  --b-bg-color:#f9f9f9;
  --b-nob-color:#0000001a;
  font-size:12px
}
@media (min-width:321px) and (max-width:768px){
  :root{
      font-size:14px
  }
}
@media (min-width:769px){
  :root{
      font-size:16px
  }
}
html,body,input,select,textarea{
  font-family:Pretendard Variable,Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif
}
ul.reset{
  padding:0;
  list-style:none
}
p{
  margin:0
}
a{
  color:currentColor;
  cursor:pointer
}
body>main:first-of-type{
  min-height:72vh
}
.block-center{
  margin:0 auto;
  display:block
}
.b-container{
  max-width:1280px;
  margin:0 auto
}
.b-flex{
  display:flex
}
.b-flex>.b-flex-rest{
  flex:auto
}
.b-roundh{
  border-radius:.5rem
}
.b-round{
  border-radius:1rem
}
.b-round2{
  border-radius:2rem
}
@media (max-width:768px){
  .b-round-r{
      border-radius:1rem
  }
}
@media (min-width:769px){
  .b-round-r{
      border-radius:2rem
  }
}
.rounded{
  border-radius:9999px
}
.text-primary{
  color:var(--color-monsterpink)
}
.text-gray{
  color:var(--color-monstergray)
}
.text-purple{
  color:var(--color-monsterpurple)
}
.text-blue{
  color:var(--color-monsterblue)
}
.font-bold{
  font-weight:700
}
.text-center{
  text-align:center
}
.text-h1{
  font-size:3rem
}
.text-h3{
  font-size:1.5rem
}
.text-h4{
  font-size:1.25rem
}
.bg-primary{
  background-color:var(--color-monsterpink)
}
.fj-between{
  justify-content:space-between
}
.fa-center{
  align-items:center!important
}
.fa-base{
  align-items:baseline!important
}
.f-g{
  flex:1 0 0
}
.fg{
  gap:1rem
}
.rounded-container{
  border-radius:1rem;
  margin:1rem;
  padding:1rem
}
@media (max-width:768px){
  .desktop-only{
      display:none!important
  }
}
@media (min-width:769px){
  .phone-only{
      display:none!important
  }
}
.b-round-image{
  background-color:var(--b-bg-color);
  border:1px solid var(--b-nob-color);
  border-radius:9999px;
  margin:1rem auto;
  padding:1.25rem;
  display:block
}
.b-round-image.bg-white{
  background-color:#fff
}
.b-with-detail{
  justify-content:space-between;
  align-items:baseline
}
.b-header>.navbar-inverse{
  background-color:var(--color-monsterpink);
  border:0
}
.b-header>.navbar-inverse .navbar-toggle,.b-header>.navbar-inverse .navbar-collapse{
  border:0
}
.b-header>.navbar-inverse .navbar-nav>li>a{
  color:#fff
}
.b-footer{
  padding:1rem 0;
}
.b-footer>.b-container{
  color:var(--color-monstergray);
  align-items:center;
  gap:4rem;
  padding:1.5rem;
  display:flex
}
@media (max-width:768px){
  .b-footer>.b-container{
      flex-direction:column;
      align-items:start;
      gap:2rem
  }
  .b-footer>.b-container>img{
      width:33.3333%;
      display:block
  }
}
.b-footer .b-contact{
  align-items:start;
  gap:1rem
}
.b-footer .b-contact p{
  margin:0
}
.b-footer .phone-only{
  text-align:center
}
@media (max-width:768px){
  .b-footer .phone-only{
      text-align:left
  }
}
.b-index-intro{
  color:var(--color-monsterblack);
  background-color:#fff;
  padding-top:4rem
}
.b-index-intro>figure{
  align-items:center;
  gap:2rem;
  display:flex
}
@media (min-width:321px) and (max-width:768px){
  .b-index-intro>figure{
      flex-direction:column
  }
}
.b-index-intro>figure>div{
  position:relative;
  overflow:hidden
}
.b-index-intro>figure>div>img{
  width:100%;
  display:block
}
.b-index-intro>figure>figcaption{
  flex:1 0 auto;
  padding-top:4rem;
  padding-bottom:15%;
  padding-left:2rem
}
@media (max-width:768px){
  .b-index-intro>figure>figcaption{
      padding-bottom:0;
      padding-left:0
  }
}
@media (min-width:769px){
  .b-index-intro>figure>figcaption div{
      margin:1rem 0
  }
}
@media (max-width:768px){
  .b-index-intro>figure>figcaption div.b-flex{
      gap:1rem;
      padding:0 .5rem
  }
}
.b-index-intro>figure>figcaption div .btn{
  margin-right:1rem;
  display:inline-block;
  position:relative
}
@media (max-width:768px){
  .b-index-intro>figure>figcaption div .btn{
      width:95%;
      margin:0 auto 1rem;
      display:block
  }
}
.b-index-intro>figure>figcaption div .btn:after{
  content:"";
  transition:background-color .2s ease-in-out;
  display:block;
  position:absolute;
  inset:0
}
.b-index-intro>figure>figcaption div .btn:hover:after{
  background-color:#0000000d
}
.b-index-intro>figure>figcaption div .btn:active:after{
  background-color:#0000001a
}
.b-index-intro>figure>figcaption div .btn.btn-sub{
  color:#d24f4f;
  background-color:#feeeee;
  padding:.75rem 1.5rem
}
.b-index-intro>figure>figcaption div .btn.btn-lg{
  padding:1rem 2rem
}
.b-index-intro>figure>figcaption div .btn.btn-primary{
  background-color:var(--color-monsterpink);
  border-color:#0000
}
.b-index-intro>figure>figcaption div .btn:not(.btn-primary):not(.btn-sub){
  border:1px solid var(--color-monstergray)
}
.b-index-intro h2{
  font-size:3rem;
  font-weight:400;
  line-height:125%
}
@media (max-width:768px){
  .b-index-intro h2{
      text-align:center;
      margin-bottom:1rem;
      font-size:2rem
  }
}
.b-index-intro h2>strong{
  color:var(--color-monsterpink);
  display:block
}
.b-index-intro p{
  margin-bottom:5rem;
  font-size:1.5rem
}
@media (max-width:768px){
  .b-index-intro p{
      text-align:center;
      font-size:1.25rem
  }
}
.b-index-intro p>span{
  color:var(--color-monsterpink);
  font-weight:700;
  text-decoration:underline
}
.b-section.bg-sky{
  background-color:#f5f8ff
}
.b-section.bg-gray{
  background-color:#f7f7f8
}
.b-section>.b-container{
  max-width:970px
}
@media (min-width:769px){
  .b-section>.b-container.b-flex-resp{
      align-items:start;
      gap:1rem;
      display:flex
  }
}
.b-section>.b-container>.title-header{
  text-align:center;
  padding:3rem 1rem
}
@media (min-width:769px){
  .b-section>.b-container>.title-header.fit-center{
      width:-moz-fit-content;
      width:fit-content;
      margin-left:auto;
      margin-right:auto
  }
}
.b-section>.b-container>.title-header p{
  color:var(--color-monsterpink);
  padding:0;
  font-size:1.25rem
}
.b-section>.b-container>.title-header h3{
  margin-top:1rem;
  font-size:2rem
}
.b-section>.b-container>.title-header .badge-blue{
  color:#fff;
  background-color:#2776ea;
  border-radius:9999px;
  margin:1rem auto;
  padding:.25rem 1rem;
  font-size:1.2rem;
  display:inline-block
}
.b-section>.b-container>.title-header .text-cite{
  text-align:right;
  font-size:1.1rem
}
@media (max-width:768px){
  .b-section>.b-container>.title-header .text-cite{
      padding:0 2rem
  }
}
.b-section>.b-container>.title-header blockquote{
  color:#959595;
  border:0;
  padding:1rem 0;
  font-size:1.25rem
}
@media (min-width:769px){
  .b-section>.b-container>.title-header blockquote{
      align-items:end;
      display:flex
  }
}
.b-section>.b-container>.title-header blockquote:before{
  content:url(https://instamonsterpro.com/images/v3/quote-l.svg);
  padding-bottom:.5rem;
  display:block
}
@media (min-width:769px){
  .b-section>.b-container>.title-header blockquote:before{
      margin-right:1rem;
      display:inline-block
  }
}
.b-section>.b-container>.title-header blockquote:after{
  content:url(https://instamonsterpro.com/images/v3/quote-r.svg);
  padding-bottom:.5rem;
  display:block
}
@media (min-width:769px){
  .b-section>.b-container>.title-header blockquote:after{
      margin-left:1rem;
      display:inline-block
  }
}
@media (max-width:768px){
  .b-section>.b-container>.title-header blockquote:after{
      margin-top:1rem
  }
}
.b-section>.b-container>ul{
  padding-left:1rem;
  padding-right:1rem;
  list-style:none
}
.b-section>.b-container .app-tags{
  grid-template-columns:1fr 1fr;
  gap:1rem;
  padding:4rem 0;
  display:grid
}
.b-section>.b-container .app-tags>li{
  background-color:#fff;
  border-radius:1rem;
  padding:1rem
}
.b-section>.b-container .app-tags h4{
  margin:1rem 0;
  font-size:1.5rem;
  font-weight:700
}
.b-section>.b-container .app-tags figure{
  align-items:start;
  gap:1rem;
  display:flex
}
.b-section>.b-container .app-tags figure>figcaption{
  flex-wrap:wrap;
  gap:.5rem;
  display:flex
}
.b-section>.b-container .app-tags figure a{
  color:#7084ed;
  background-color:#f5f8ff;
  border-radius:1rem;
  padding:.5rem 1rem;
  font-size:1rem;
  transition:background-color .2s ease-in-out;
  display:inline-block
}
.b-section>.b-container .app-tags figure a:before{
  content:"#"
}
.b-section>.b-container .app-tags figure a:hover{
  background-color:#ebf1ff;
  text-decoration:none
}
.b-section>.b-container .webtoons{
  padding:0 1rem 4rem;
  display:flex
}
.b-section>.b-container .webtoons>a{
  text-align:center;
  flex:1 0 0;
  display:block
}
@media (min-width:769px){
  .b-section>.b-container .webtoons>a{
      font-size:1.25rem
  }
  .b-section>.b-container .webtoons>a>p{
      margin-top:-2rem
  }
}
.b-section>.b-container .list-promo{
  gap:1rem;
  display:flex
}
@media (max-width:768px){
  .b-section>.b-container .list-promo{
      flex-direction:column
  }
}
.b-section>.b-container .list-promo>li{
  text-align:center
}
@media (min-width:769px){
  .b-section>.b-container .list-promo>li>figure{
      height:300px
  }
}
@media (max-width:768px){
  .b-section>.b-container .list-promo>li>figure>img{
      width:50%
  }
}
.b-section>.b-container .list-promo>li>div{
  text-align:left;
  align-items:start;
  gap:1rem;
  font-size:1.25rem;
  display:flex
}
@media (max-width:768px){
  .b-section>.b-container .list-promo>li>div{
      padding:2rem 2.5rem 0
  }
}
.b-section>.b-container .list-promo>li>div>span{
  background-color:var(--color-monsterblack);
  color:#fff;
  border-radius:9999px;
  justify-content:center;
  align-items:center;
  width:3rem;
  height:2rem;
  display:inline-flex
}
@media (max-width:768px){
  .b-section>.b-container .list-promo>li>div>span{
      width:2rem
  }
}
.b-section>.b-container .list-promo>li>div>div>div{
  color:var(--color-monsterpink);
  font-size:1rem
}
.b-section>.b-container .product-summaries{
  gap:1rem;
  margin-bottom:4rem;
  display:flex;
  overflow:hidden
}
.b-section>.b-container .product-summaries li{
  padding:.5rem
}
.b-section>.b-container .product-summaries li>a{
  color:var(--color-monstergray);
  cursor:pointer;
  background-color:#f5f5f5;
  border-radius:1rem;
  padding:1rem 2rem;
  font-size:1.1rem;
  display:block;
  position:relative
}
.b-section>.b-container .product-summaries li>a h4{
  color:var(--color-monsterblack);
  font-size:1.25rem
}
.b-section>.b-container .product-summaries li>a:before{
  content:"";
  transition:background-color .2s ease-in-out;
  display:block;
  position:absolute;
  inset:0
}
.b-section>.b-container .product-summaries li>a:hover:before{
  background-color:#0000000d
}
.b-section>.b-container .product-summaries li>a:active:before{
  background-color:#0000001a
}
.b-section>.b-container .product-summaries li>a:hover{
  color:currentColor;
  text-decoration:none
}
.b-section>.b-container .product-summaries li.active>a{
  background-color:var(--color-monsterpink);
  color:#fff
}
.b-section>.b-container .product-summaries li.active>a h4{
  color:#fff
}
.b-section>.b-container .product-list{
  margin-bottom:4rem
}
.b-section>.b-container .product-list .product{
  padding:1rem
}
.b-section>.b-container .product-list .product>figure{
  gap:1rem;
  display:flex
}
@media (max-width:768px){
  .b-section>.b-container .product-list .product>figure{
      flex-direction:column
  }
}
.b-section>.b-container .product-list .product>figure h4{
  font-size:2rem
}
@media (max-width:768px){
  .b-section>.b-container .product-list .product>figure>img{
      width:50%;
      margin:0 auto;
      display:block
  }
}
.b-section>.b-container .product-list .product>figure figcaption{
  flex-direction:column;
  align-items:start;
  display:flex
}
@media (min-width:769px){
  .b-section>.b-container .product-list .product>figure figcaption{
      min-width:400px
  }
}
.b-section>.b-container .product-list .product>figure figcaption ul{
  flex:1 0 0;
  padding:1rem 0 1rem 2rem;
  font-size:1.25rem;
  list-style:circle url(https://instamonsterpro.com/images/v3/product-checklist.svg)
}
.b-section>.b-container .product-list .product>figure figcaption ul>li{
  margin-bottom:.5rem;
  padding-left:.5rem
}
.b-section>.b-container .product-list .product>figure figcaption .btn.btn-primary{
  background-color:var(--color-monsterpink);
  border-color:#0000;
  padding:1rem 2rem;
  display:inline-block;
  position:relative
}
@media (max-width:768px){
  .b-section>.b-container .product-list .product>figure figcaption .btn.btn-primary{
      width:100%;
      display:block
  }
}
.b-section>.b-container .product-list .product>figure figcaption .btn.btn-primary:before{
  content:"";
  transition:background-color .2s ease-in-out;
  display:block;
  position:absolute;
  inset:0
}
.b-section>.b-container .product-list .product>figure figcaption .btn.btn-primary:hover:before{
  background-color:#0000000d
}
.b-section>.b-container .product-list .product>figure figcaption .btn.btn-primary:active:before{
  background-color:#0000001a
}
.b-section>.b-container .product-list .product>figure p{
  color:var(--color-monstergray);
  font-size:1.5rem
}
.b-section>.b-container .product-list .product>figure p.additional{
  color:var(--color-monsterpurple);
  padding-top:.5rem;
  font-size:1rem
}
.b-section>.b-container .review-list{
  gap:1rem;
  padding-bottom:4rem
}
.b-section>.b-container .review-list .review{
  flex-basis:50%;
  padding:1rem
}
.b-section>.b-container .review-list .review>div{
  background-color:#fff;
  border-radius:1rem;
  padding:1rem
}
.b-section>.b-container .review-list .review figure{
  align-items:center;
  gap:1rem;
  display:flex
}
@media (max-width:768px){
  .b-section>.b-container .review-list .review figure>img{
      width:25%
  }
  .b-section>.b-container .review-list .review figure>figcaption>img{
      width:66.6666%
  }
}
.b-section>.b-container .review-list .review figure>figcaption>div{
  align-items:end;
  gap:1rem;
  display:flex
}
.b-section>.b-container .review-list .review figure>figcaption>div h4{
  font-size:1.25rem;
  font-weight:700
}
.b-section>.b-container .review-list .review figure>figcaption>div h5{
  color:var(--color-monstergray);
  font-size:1rem
}
.b-section>.b-container .review-list .review p{
  color:var(--color-monstergray);
  margin-top:1rem;
  font-size:1rem;
  line-height:150%
}
.b-section>.b-container .review-list .slick-dots{
  justify-content:center;
  align-items:center;
  padding:1rem 0;
  list-style:none;
  display:flex!important
}
.b-section>.b-container .review-list .slick-dots>li{
  padding:.5rem
}
.b-section>.b-container .review-list .slick-dots>li>button{
  background-color:#d9d9d9;
  border:0;
  border-radius:9999px;
  width:0;
  height:0;
  padding:.5rem;
  font-size:0
}
@media (max-width:768px){
  .b-section>.b-container .review-list .slick-dots>li>button{
      padding:.365rem
  }
}
.b-section>.b-container .review-list .slick-dots>li.slick-active>button{
  background-color:var(--color-monsterpink)
}
.b-section>.b-container .review-list{
  position:relative
}
.b-section>.b-container .review-list:before{
  content:"";
  z-index:1;
  background:linear-gradient(90deg,#fff 25%,#fff0);
  width:4rem;
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0
}
.b-section>.b-container .review-list:after{
  content:"";
  z-index:1;
  background:linear-gradient(270deg,#fff 25%,#fff0);
  width:4rem;
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  right:0
}
.b-section>.b-container .review-list.review-list:before{
  background:linear-gradient(90deg,#f7f7f8 25%,#fff0)
}
.b-section>.b-container .review-list.review-list:after{
  background:linear-gradient(270deg,#f7f7f8 25%,#fff0)
}
@media (max-width:768px){
  .b-section>.b-container .review-list:before,.b-section>.b-container .review-list:after{
      display:none
  }
}
.b-section>.b-container .faq-list{
  flex:1 0 0;
  margin:3rem 0 4rem;
  padding:0 1rem
}
.b-section>.b-container .faq-list>li{
  border-bottom:1px solid var(--color-monstergray)
}
.b-section>.b-container .faq-list>li h3{
  cursor:pointer;
  align-items:center;
  margin:1.5rem 0;
  padding-right:1rem;
  font-size:1.56rem;
  display:flex;
  position:relative
}
@media (max-width:768px){
  .b-section>.b-container .faq-list>li h3{
      font-size:1.4rem
  }
}
.b-section>.b-container .faq-list>li h3:before{
  content:"Q";
  color:var(--color-monsterpink);
  margin-right:.5rem
}
.b-section>.b-container .faq-list>li h3:after{
  content:url(https://instamonsterpro.com/images/v3/collapse.svg);
  position:absolute;
  right:0
}
.b-section>.b-container .faq-list>li p{
  color:var(--color-monstergray);
  padding:1rem;
  font-size:1rem;
  display:none
}
.b-section>.b-container .faq-list>li p>u{
  color:var(--color-monsterpink);
  text-decoration:underline
}
.b-section>.b-container .faq-list>li p .btn{
  display:inline-block;
  position:relative
}
.b-section>.b-container .faq-list>li p .btn:before{
  content:"";
  transition:background-color .2s ease-in-out;
  display:block;
  position:absolute;
  inset:0
}
.b-section>.b-container .faq-list>li p .btn:hover:before{
  background-color:#0000000d
}
.b-section>.b-container .faq-list>li p .btn:active:before{
  background-color:#0000001a
}
.b-section>.b-container .faq-list>li p .btn.btn-primary{
  background-color:var(--color-monsterpink);
  border-color:#0000;
  padding:.75rem 1.5rem
}
.b-section>.b-container .faq-list>li p .btn.i-arrow-r:after{
  content:url(https://instamonsterpro.com/images/v3/arrow-r.svg);
  margin-left:.5rem
}
.b-section>.b-container .faq-list>li.active h3:after{
  transform:rotate(180deg)
}
.b-section>.b-container .faq-list>li.active p{
  display:block
}
.b-section>.b-container .contact-buttons{
  height:100%
}
@media (min-width:769px){
  .b-section>.b-container .contact-buttons{
      display:flex
  }
}
.b-section>.b-container .contact-buttons h3{
  margin:0;
  font-size:2rem;
  font-weight:700;
  line-height:125%
}
@media (max-width:768px){
  .b-section>.b-container .contact-buttons h3{
      padding-top:2rem;
      padding-left:2rem
  }
}
.b-section>.b-container .contact-buttons>div{
  flex-direction:column;
  justify-content:center;
  display:flex
}
.b-section>.b-container .contact-buttons>div>img{
  width:75%;
  margin:0 0 0 auto
}
@media (max-width:767px){
  .b-section>.b-container .contact-buttons>div>img{
      width:66.6666%
  }
}
@media (min-width:769px){
  .b-section>.b-container .contact-buttons>div div{
      margin-bottom:1rem
  }
}
.b-section>.b-container .contact-buttons>div .btn{
  color:var(--color-monsterblack);
  background-color:#fff;
  justify-content:center;
  align-items:center;
  margin-right:1rem;
  padding:.75rem 1.5rem;
  display:inline-flex;
  position:relative
}
@media (max-width:768px){
  .b-section>.b-container .contact-buttons>div .btn{
      margin-bottom:1rem;
      margin-left:1rem;
      font-size:1.5rem;
      display:block
  }
}
.b-section>.b-container .contact-buttons>div .btn:not(.btn-kakao):before{
  content:"";
  transition:background-color .2s ease-in-out;
  display:block;
  position:absolute;
  inset:0
}
.b-section>.b-container .contact-buttons>div .btn:not(.btn-kakao):hover:before{
  background-color:#0000000d
}
.b-section>.b-container .contact-buttons>div .btn:not(.btn-kakao):active:before{
  background-color:#0000001a
}
.b-section>.b-container .contact-buttons>div .btn.btn-red{
  color:#fff;
  background-color:#d33d44
}
.b-section>.b-container .contact-buttons>div .btn.btn-red:after{
  content:url(https://instamonsterpro.com/images/v3/arrow-tr.svg);
  margin-left:.5rem;
  display:inline-block;
  position:relative;
  bottom:-.25rem
}
.b-section>.b-container .contact-buttons>div .btn.btn-kakao{
  background-color:#fff95e
}
.b-section>.b-container .contact-buttons>div .btn.btn-kakao:before{
  content:url(https://instamonsterpro.com/images/v3/btn-kakao.svg);
  margin-right:.5rem;
  display:inline-block;
  position:relative;
  bottom:-.25rem
}
.b-section>.b-container .contact-buttons>div .btn.btn-kakao:after{
  content:"";
  transition:background-color .2s ease-in-out;
  display:block;
  position:absolute;
  inset:0
}
.b-section>.b-container .contact-buttons>div .btn.btn-kakao:hover:after{
  background-color:#0000000d
}
.b-section>.b-container .contact-buttons>div .btn.btn-kakao:active:after{
  background-color:#0000001a
}
.b-section>.b-container .contact-buttons>div .btn.arrow-tr:after{
  content:url(https://instamonsterpro.com/images/v3/arrow-tr-.svg);
  margin-left:.5rem;
  display:inline-block;
  position:relative;
  bottom:-.25rem
}
.b-section>.b-container .contact-buttons>div .btn.clip:after{
  content:url(https://instamonsterpro.com/images/v3/btn-clip.svg);
  margin-left:.5rem;
  display:inline-block;
  position:relative;
  bottom:-.25rem
}
#order-form{
  align-items:start;
  display:flex;
  gap: 2rem;
}
@media (min-width:321px) and (max-width:768px){
  #order-form{
      flex-direction:column;
      gap: 1rem;
  }
}
@media (min-width:769px){
  #order-form>div:first-child{
      flex:1 0 0
  }
  #order-form>div:last-child{
      flex:0 0 28rem
  }
}
#order-form .container-card{
  border-radius:12px;
  padding:2rem;
  background: #fff;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

@media (max-width:768px){
  #order-form .container-card{
      margin-bottom: 1rem;
  }
}

@media (min-width:769px){
  #order-form>div:last-child .container-card:not(:last-child){
      margin-bottom: 2rem;
  }
}

#order-form .container-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
#order-form .container-card .btn.bg-primary{
  padding:.75rem 0;
  font-size:1.25rem
}
#order-form h2{
  margin-bottom:1.5rem;
  font-weight:700;
  color: #2d3748;
  font-size: 1.5rem;
  border-bottom: 2px solid #f7fafc;
  padding-bottom: 0.75rem;
}
#order-form h3{
  margin:1.5rem 0 1rem 0;
  font-size:1rem;
  font-weight:500;
  color: #4a5568;
}

#order-form h3.step {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 1rem 0;
  font-weight: 600;
  color: #495057;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
#order-form .control-label h3{
  margin:0.5rem 0;
}
#order-form h3 span{
  color: #fff;
  background: var(--color-monsterpink);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
  text-align: center;
}

#order-form h3.step span {
  margin: 0;
}

#order-form h3.step {
  line-height: 1.5;
}
#order-form h3 strong{
  color:var(--color-monsterblue);
  font-weight:400
}
#order-form p{
  margin:.5rem 0
}
/* 사용자 프로필 카드 */
.user-profile-card {
  background: linear-gradient(135deg, #ff6e75 0%, #ff9a9e 100%);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  color: white;
  box-shadow: 0 2px 12px rgba(255, 110, 117, 0.25);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.user-avatar {
  flex-shrink: 0;
}

.avatar-circle {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.avatar-emoji {
  font-size: 1.25rem;
}

.user-details {
  flex: 1;
}

.user-welcome {
  margin: 0 0 0.125rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: white !important;
}

.user-subtitle {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

.user-stats {
  display: flex;
  width: 100%;
}

.stat-item {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  position: relative;
  width: 100%;
  flex: 1;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 110, 117, 0.2);
}

.stat-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.stat-label {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.stat-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: white;
}

/* 잔액이 0일 때 특별 스타일 */
.stat-item.balance .stat-value {
  color: #fff3cd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 알림이 있을 때 특별 스타일 */
.stat-item.notifications .stat-value:not(:contains("0")) {
  color: #ffebee;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 충전 버튼 스타일 */
.charge-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-monsterpink);
  border: none;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.charge-button:hover {
  background: white;
  color: var(--color-monsterpink);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

.charge-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 기존 top-stat 스타일 유지 (혹시 다른 곳에서 사용될 경우) */
#order-form .top-stat{
  justify-content:space-between;
  align-items:center
}
@media (min-width:769px){
  #order-form .top-stat{
      display:flex
  }
}
@media (max-width:768px){
  #order-form .top-stat>div:last-child{
      justify-content:stretch;
      padding:.5rem 0;
      display:flex
  }
}
#order-form .top-stat span{
  background-color:#ffed9e;
  border-radius:.5rem;
  flex:auto;
  margin-right:.5rem;
  padding:.75rem 1.75rem;
  display:inline-block
}
/* 서버 상태 - 공지사항 아래 */
.server-notice-mobile,
.server-notice-desktop {
  color:#fff;
  background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius:.5rem;
  padding:.75rem 1rem;
  margin: 1rem 0 0 0;
  font-size: 0.875rem;
  text-align: center;
}

.server-notice-mobile b,
.server-notice-desktop b {
  vertical-align:baseline;
  font-size:1rem;
}

/* 기존 스타일 유지 */
#order-form .top-notice,
.top-notice{
  color:#fff;
  background:linear-gradient(90.49deg,#ffe86fb3 0%,#ffe86f00 34.38%),#ff7575;
  border-radius:.5rem;
  padding:.75rem 1.75rem;
  margin: 0.5rem 0;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
#order-form .top-notice b,
.top-notice b{
  vertical-align:baseline;
  font-size:1.1rem
}
#order-form .alert-red{
  color:#dc3545;
  background-color:#f8d7da;
  border: 1px solid #f5c6cb;
  border-radius:8px;
  padding:1rem 1.25rem;
  margin: 1rem 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
/* 주문하기 헤더 */
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.header-buttons {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .header-buttons {
    align-self: stretch;
    justify-content: space-between;
  }
  
  .header-buttons .btn {
    flex: 1;
    text-align: center;
  }
}

.header-buttons .btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.header-buttons .btn-secondary {
  background-color: #6c757d;
  color: white;
  border: 1px solid #6c757d;
}

.header-buttons .btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 자동 처리 안내 */
.auto-process-notice {
  color: var(--color-monsterpurple);
  font-weight: 600;
  font-size: 1rem;
  margin: 0.5rem 0 1rem 0;
}

/* 기존 purple-buttons 스타일 유지 (혹시 다른 곳에서 사용될 경우) */
#order-form .purple-buttons{
  gap:.5rem;
  display:flex
}
@media (max-width:768px){
  #order-form .purple-buttons{
      flex-direction:column
  }
}
@media (min-width:769px){
  #order-form .purple-buttons{
      justify-content:stretch
  }
}
#order-form .purple-buttons .btn-primary{
  background-color:#aa78fb;
  border:0;
  flex:auto;
  display:inline-block;
  position:relative
}
@media (min-width:769px){
  #order-form .purple-buttons .btn-primary{
      padding:1rem 0
  }
}
#order-form .purple-buttons .btn-primary:before{
  content:"";
  transition:background-color .2s ease-in-out;
  display:block;
  position:absolute;
  inset:0
}
#order-form .purple-buttons .btn-primary:hover:before{
  background-color:#0000000d
}
#order-form .purple-buttons .btn-primary:active:before{
  background-color:#0000001a
}
#order-form .purple-buttons .btn-primary:after{
  content:url(https://instamonsterpro.com/images/v3/arrow-tr.svg);
  margin-left:.5rem;
  display:inline-block;
  position:relative;
  bottom:-.25rem
}
#order-form .border{
  border:1px solid var(--color-monstergray);
  border-radius:.5rem;
  padding:1rem
}
#order-form .notices{
  flex-direction:column;
  gap:0;
  display:flex;
  max-height: 280px;
  overflow-y: auto;
  padding: 0;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background-color: #fff;
}

/* 스크롤바 스타일링 */
#order-form .notices::-webkit-scrollbar {
  width: 6px;
}

#order-form .notices::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

#order-form .notices::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

#order-form .notices::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

#order-form .notices>li{
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
}

#order-form .notices>li:last-child {
  border-bottom: none;
}

#order-form .notices>li.active{
  background-color: #f8f9fa;
}

#order-form .notices>li a{
  color: #495057;
  text-decoration: none;
  display: block;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.4;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

#order-form .notices>li.active a {
  color: var(--color-monsterpink);
  border-left-color: var(--color-monsterpink);
  background-color: rgba(255, 110, 117, 0.05);
}

#order-form .notices>li:hover a {
  background-color: #f8f9fa;
  color: #212529;
}

#order-form .notices>li.active:hover a {
  background-color: rgba(255, 110, 117, 0.08);
  color: var(--color-monsterpink);
}
#order-form .notes a[href]{
  color:var(--color-monsterpurple)
}
#order-form button[type=submit]{
  position:relative
}
#order-form button[type=submit]:hover{
  color:#fff
}
#order-form button[type=submit]:before{
  content:"";
  transition:background-color .2s ease-in-out;
  display:block;
  position:absolute;
  inset:0
}
#order-form button[type=submit]:hover:before{
  background-color:#0000000d
}
#order-form button[type=submit]:active:before{
  background-color:#0000001a
}
.order-platforms{
  grid-template-columns:repeat(6,1fr);
  gap:1rem;
  display:grid;
  margin: 1rem 0;
}
@media (max-width:768px){
  .order-platforms{
      gap:.5rem;
  }
}
.order-platforms>.order-platform{
  text-align:center
}
.order-platforms>.order-platform>input{
  -webkit-appearance:none;
  appearance:none;
  width:0;
  height:0
}
.order-platforms>.order-platform>input:checked+label{
  background-color:var(--color-monsterpink);
  border:1px solid var(--color-monsterpink);
  color:#fff
}
.order-platforms>.order-platform>:not(input:checked)+:hover{
  background-color:#eee
}
.order-platforms>.order-platform>label{
  box-sizing:border-box;
  color:#495057;
  cursor:pointer;
  background-color:#f5f5f5;
  border:1px solid #a7aab1;
  border-radius:.5rem;
  width:100%;
  height:100%;
  margin:0;
  padding:70% 5% 5%;
  font-size:1.25vh;
  transition:all .2s ease-in-out;
  display:inline-block;
  position:relative
}
@media (max-width:768px){
  .order-platforms>.order-platform>label{
      font-weight:400;
  }
}
.order-platforms>.order-platform>label:before{
  content:"";
  z-index:0;
  background-position:50% 32%;
  background-repeat:no-repeat;
  display:block;
  position:absolute;
  inset:0;
}
@media (max-width:768px){
  .order-platforms>.order-platform>label:before{
      background-size:45%
  }
}
.order-platforms>.order-platform.korean>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/k09qlmo4dsx1arof.png);
  background-size:45%
}
.order-platforms>.order-platform.forign>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/a7g3zaa5ecl6rjzb.png);
  background-size:45%
}
.order-platforms>.order-platform.popular>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/jhbnnuhf5b74lmxx.png);
  background-size:45%
}
.order-platforms>.order-platform.account>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/sofwxufrm2dn2p7c.png);
  background-size:45%
}
.order-platforms>.order-platform.facebook>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/8n33dzc5h40y8j2x.png);
  background-size:45%
}
.order-platforms>.order-platform.toutube>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/25prwsrb13fzxjso.png);
  background-size:45%
}
.order-platforms>.order-platform.kakaotalk>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/l0zi0aq8kgzxjr3y.png);
  background-size:45%
}
.order-platforms>.order-platform.twitter>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/2br2fg1ka4550ogi.png);
  background-size:45%
}
.order-platforms>.order-platform.thread>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/8k67y9clz1xow8yz.png);
  background-size:45%
}
.order-platforms>.order-platform.naver>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/6yx89q8sr3ps3s0n.png);
  background-size:45%
}
.order-platforms>.order-platform.place>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/puqp1r607tbq1se8.png);
  background-size:45%
}
.order-platforms>.order-platform.navershopping>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/d52zmdgy5euxuc40.png);
  background-size:45%
}
.order-platforms>.order-platform.naverblog>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/8g6w7qqsl9o2d11n.png);
  background-size:45%
}
.order-platforms>.order-platform.review>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/5nicffdydiw8xggo.png);
  background-size:45%
}
.order-platforms>.order-platform.coupang>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/z2smmysp5iq23wp3.png);
  background-size:45%
}
.order-platforms>.order-platform.press>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/fb06t8gcsw1u2py5.png);
  background-size:45%
}
.order-platforms>.order-platform.others>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/mxlijocu5zqup7a9.png);
  background-size:45%
}
.order-platforms>.order-platform.telegram>label:before{
  background-image:url(https://storage.perfectcdn.com/e82262/sldz2f21oj4qgd4c.png);
  background-size:45%
}
.fancy-control{
  text-align:right;
  background-color:var(--b-bg-color);
  border:0;
  border-top:1px solid #343a45;
  width:100%;
  margin:2rem 0;
  padding:.5rem 1rem;
  font-size:2rem;
  font-weight:700;
  display:block;
  outline:none!important
}
.box-desc{
  word-break:keep-all;
  border:1px solid #ccc;
  border-radius:1rem;
  padding:1.5rem
}