@charset "UTF-8";
@keyframes slide-in-fwd-br {
  0% {
    transform: translateZ(-1400px) translateY(800px) translateX(1000px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes bounce {
  0% {
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
  }
  60% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
  95% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  line-height: 1.4;
  height: 100%;
  font-size: var(--font-size-base);
  font-family: var(--Pretendard);
  font-weight: 400;
  background-color: var(--background);
  color: var(--black);
  scroll-behavior: smooth;
}

h1 {
  font-size: var(--font-size-lg);
  font-weight: 400;
}

h2 {
  font-size: var(--font-size-mlg);
  font-weight: 900;
}

h3 {
  font-size: var(--font-size-ml);
  font-weight: 900;
}

.relative {
  position: relative;
}

:root {
  /* fonts */
  --Pretendard: "Pretendard";
  --Montserrat: "Montserrat";
  /* font sizes */
  --font-size-st: max(.5625rem, min(1.75vw, .625rem)); /*10px*/
  --font-size-ss: max(.6875rem, min(2vw, .75rem)); /*12px*/
  --font-size-s: max(.75rem, min(2.8vw,.8125rem)); /*13px*/
  --font-size-ms: max(.75rem, min(2.8vw, .875rem)); /*14px*/
  --font-size-base: max(.875rem, min(3.2vw, 1rem)); /*16px*/
  --font-size-m: max(.9375rem, min(2.8vw, 1.125rem)); /*18px*/
  --font-size-ml: max(1rem, min(3.2vw, 1.25rem)); /*20px*/
  --font-size-mg: max(1.125rem, min(3.2vw, 1.375rem)); /*22px*/
  --font-size-mlg: max(1.125rem, min(3.2vw, 1.5rem)); /*24px*/
  --font-size-lg: max(1.25rem, min(2.6vw, 1.75rem)); /*28px*/
  --font-size-xlg: max(1.5rem, min(2.6vw, 2rem)); /*32px*/
  --font-size-xl: max(1.75rem, min(2.6vw, 2.25rem)); /*36px*/
  --font-size-xxlg: max(2rem, min(2.6vw, 2.5rem)); /*36px*/
  /* Colors */
  --black: #121212;
  --white: #fff;
  --background: #fff;
  --pointcolor-01: #2563eb;
  --pointcolor-02: #2563eb;
  --pointcolor-03: #2563eb;
  --pointcolor-04: #2563eb;
  --pointcolor-06: #2563eb;
  --graycolor01: #9E9E9E;
  --graycolor02: #818181;
  --graycolor03: #717171;
  --graycolor04: #4A4A4D;
  --graycolor05: #D9D9D9;
  --graycolor06: #EFEFEF;
  --graycolor07: #ECECEC;
  --graycolor08: #626262;
  --graycolor09: #e0e0e0;
  --graycolor10: #d8dde0;
  --placeholder: #b4b4b4;
  --label: #1C1C1E;
  --opacity-15: rgba(0,0,0,0.15);
  --opacity-20: rgba(0,0,0,0.20);
  --opacity-25: rgba(0,0,0,0.25);
  --opacity-30: rgba(0,0,0,0.30);
  --opacity-50: rgba(0,0,0,0.50);
  --box-shadow: 0em 2px 4px 2px rgba(38, 36, 62, 0.06);
  /* height */
  --h100vh: 100dvh;
  --size-04: .25rem;
  --size-08: .5rem;
  --size-12: .75rem;
  --size-16: 1rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-28: 1.75rem;
  --size-32: 2rem;
  --size-36: 2.25rem;
  --size-40: 2.5rem;
  --size-50: 3.125rem;
  --size-70: 4.375rem;
  --size-80: 5rem;
  --size-90: 5.625rem;
  --size-100: 6.25rem;
}

* ::not(.search-box) input:not(:checked), select, textarea, button {
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}
* ::not(.search-box) input:not(:checked):active, * ::not(.search-box) input:not(:checked):focus, select:active, select:focus, textarea:active, textarea:focus, button:active, button:focus {
  box-shadow: inset 0rem 0rem 0rem 0.125rem var(--pointcolor-01);
}

/* transition은 필요한 요소에만 개별 적용 */

textarea {
  outline: none;
  resize: none;
}

select {
  outline: none;
  -webkit-appearance: none; /* 크롬 화살표 없애기 */
  -moz-appearance: none; /* 파이어폭스 화살표 없애기 */
  appearance: none; /* 화살표 없애기 */
  border: 0.0625rem solid var(--graycolor05);
  border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  -webkit-border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  -moz-border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  -ms-border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  -o-border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  padding: var(--size-12) var(--size-50) var(--size-12) var(--size-20);
  min-width: 7.5rem;
  background: url(../public/select.svg) no-repeat calc(100% - 20px) center;
  font-size: var(--font-size-ms);
}
select ::-moz-placeholder {
  color: var(--graycolor10);
}
select ::placeholder {
  color: var(--graycolor10);
}

input {
  outline: none;
  border: 0.0625rem solid var(--graycolor09);
  border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  -webkit-border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  -moz-border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  -ms-border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  -o-border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
}
input ::-moz-placeholder {
  color: var(--placeholder);
}
input ::placeholder {
  color: var(--placeholder);
}

label input[type=radio] {
  width: var(--size-16);
  min-width: var(--size-16);
  max-width: var(--size-16);
  height: var(--size-16);
  border: 1.2px solid rgb(212, 212, 212);
  margin-right: var(--size-12);
  background-color: rgb(255, 255, 255);
  border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  -webkit-border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  -moz-border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  -ms-border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  -o-border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  vertical-align: middle;
  outline: none !important;
}
label input[type=radio]:checked {
  border: 0.3125rem solid var(--black);
  background-color: var(--pointcolor-04) !important;
}

label {
  cursor: pointer;
  display: block;
}
label input[type=checkbox] {
  width: var(--size-24);
  min-width: var(--size-24);
  max-width: var(--size-24);
  height: var(--size-24);
  border: 1.2px solid rgb(212, 212, 212);
  background-color: rgb(255, 255, 255);
  border-radius: var(--size-50) var(--size-50) var(--size-50) var(--size-50);
  -webkit-border-radius: var(--size-50) var(--size-50) var(--size-50) var(--size-50);
  -moz-border-radius: var(--size-50) var(--size-50) var(--size-50) var(--size-50);
  -ms-border-radius: var(--size-50) var(--size-50) var(--size-50) var(--size-50);
  -o-border-radius: var(--size-50) var(--size-50) var(--size-50) var(--size-50);
  vertical-align: middle;
  outline: none !important;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media (max-width: 767.98px) {
  label input[type=checkbox] {
    width: 1.25rem;
    height: 1.25rem;
    max-width: 1.25rem;
    min-width: 1.25rem;
  }
}
label input[type=checkbox]:checked {
  background-color: var(--black);
}
label input[type=checkbox]:checked:after {
  position: absolute;
  content: "";
  position: static;
  background: url(../public/check.svg) no-repeat;
  width: 0.75rem;
  height: 0.5rem;
  background-size: cover;
}

input[type=checkbox].checkbox-input {
  width: var(--size-24);
  height: var(--size-24);
  border: 1.2px solid var(--black);
  background-color: white;
  border-radius: var(--size-50) var(--size-50) var(--size-50) var(--size-50);
  -webkit-border-radius: var(--size-50) var(--size-50) var(--size-50) var(--size-50);
  -moz-border-radius: var(--size-50) var(--size-50) var(--size-50) var(--size-50);
  -ms-border-radius: var(--size-50) var(--size-50) var(--size-50) var(--size-50);
  -o-border-radius: var(--size-50) var(--size-50) var(--size-50) var(--size-50);
  vertical-align: middle;
  outline: none !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}
@media (max-width: 767.98px) {
  input[type=checkbox].checkbox-input {
    width: var(--size-16);
    height: var(--size-16);
  }
}
input[type=checkbox].checkbox-input:checked {
  background-color: var(--black);
}
input[type=checkbox].checkbox-input:checked:after {
  position: absolute;
  content: "";
  position: static;
  background: url(../public/check.svg) no-repeat;
  width: 0.5rem;
  height: 0.375rem;
  background-size: cover;
}
input[type=checkbox].checkbox-input:active, input[type=checkbox].checkbox-input:focus {
  box-shadow: inset 0rem 0rem 0rem 0.125rem var(--pointcolor-01);
}

.bold {
  font-weight: 600 !important;
}

.point-color-01 {
  color: var(--pointcolor-01);
}

.point-color-02 {
  color: var(--pointcolor-02) !important;
}

.point-color-03 {
  background: var(--pointcolor-03);
}

.point-color-04 {
  background: var(--pointcolor-04);
}

.grayColor-01 {
  color: var(--graycolor03) !important;
}

.count-applied {
  color: #4763ff;
}

.count-passed {
  color: #fd6050;
}

.count-accepted {
  color: #3dad00;
}

.count-rejected {
  color: #000;
}

.count-drafting {
  color: #626262;
}

.mr-1 {
  margin-right: var(--size-04);
}

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

.w-100 {
  width: 100%;
}

i, em {
  font-style: normal;
  font-weight: 300;
}

.blue {
  color: var(--pointcolor-01) !important;
}

.blak {
  color: var(--black);
}

.bold {
  font-weight: 600;
}

.point {
  color: var(--pointcolor-06);
}

.gray {
  color: var(--graycolor04);
}

.txt-center {
  text-align: center;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]) {
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* font - Pretendard CDN, Montserrat는 Google Fonts로 로드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ========================================
   성지스토어 스타일 레이아웃
   ======================================== */

/* 메인 컨테이너 */
.template-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* 배너 라운딩 - 템플릿에서 직접 처리 */

/* 상품 리스트 컨테이너 */
.template-goods-wrapper,
.goods-list-wrapper {
    padding: 0 15px;
}

/* 상품 카드 간격 */
.goods-list-wrapper {
    gap: 12px;
}

.goods-list-wrapper .item-list {
    margin-bottom: 12px;
}

/* 섹션 타이틀 영역 */
.section-title,
.box-title {
    padding: 16px 15px 12px;
    font-size: 18px;
    font-weight: 700;
}

/* 상품 카드 스타일 */
.goods-box {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.list-image {
    border-radius: 12px;
    overflow: hidden;
}

.list-image img {
    border-radius: 12px;
}

/* 모바일 반응형 - 성지스토어 스타일 */
@media (max-width: 768px) {
    :root {
        --pointcolor-01: #2563eb;
        --pointcolor-02: #2563eb;
        --accent: #2563eb;
        --fontaccent: #2563eb;
    }

    /* 배너 wrapper - 좌우 여백 15px */
    .template-wrapper {
        padding: 0 15px !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
        height: auto !important;
    }

    /* 배너 라운드 16px */
    .box-banner,
    .banner-slide-box,
    .swiper-container,
    .swiper-slide img,
    .banner-box,
    .main-banner {
        border-radius: 16px !important;
    }

    .box-banner {
        margin: 8px 0 !important;
        overflow: hidden !important;
    }

    .box-banner .banner-image img {
        border-radius: 16px !important;
    }

    /* 모바일 페이지네이션 숨김 */
    .template-wrapper .swiper-pagination,
    .template-wrapper [class*="pagination_"] {
        display: none !important;
    }

    .template-goods-wrapper,
    .goods-list-wrapper {
        padding: 0 15px !important;
    }

    .goods-list-wrapper {
        gap: 8px;
    }

    .goods-list-wrapper .item-list {
        margin-bottom: 8px;
    }

    .section-title,
    .box-title {
        padding: 12px 12px 8px;
        font-size: 16px;
    }

    .goods-box,
    .list-image,
    .list-image img {
        border-radius: 10px;
    }

    /* 모바일 2열 그리드 - KREAM 스타일 */
    .search-item-list {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 0 6px !important;
    }

    .search-item-list > .item-list {
        padding: 0 4px !important;
        margin-bottom: 10px !important;
    }

    .item-list > .goods-box {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 12px !important;
        overflow: hidden;
    }

    /* 이미지 영역 - 연회색 배경 */
    .item-list > .goods-box > .list-image {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: #f5f5f5;
        border-radius: 12px !important;
        overflow: hidden;
    }

    .item-list > .goods-box > .list-image > a {
        display: block !important;
        padding: 12px !important;
        text-align: center;
    }

    .item-list > .goods-box > .list-image > a img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    /* 본문 영역 */
    .item-list > .goods-box > .list-body {
        max-width: 100% !important;
        padding: 8px 8px 10px 8px !important;
    }

    /* 상품명 컴팩트 */
    .item-list > .goods-box > .list-body .list-name {
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 2px 0 !important;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 요금제 */
    .item-list > .goods-box > .list-body .list-bill {
        font-size: 11px !important;
        color: #999 !important;
    }

    /* 가격 - 테두리 제거 */
    .item-list > .goods-box > .list-body > .list-item {
        margin: 4px 0 0 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .item-list > .goods-box > .list-body > .list-item > .list-price > li {
        line-height: 18px !important;
    }

    .item-list > .goods-box > .list-body > .list-item > .list-price > li.mid-name-n > span {
        font-size: 11px !important;
        color: #999;
    }

    .item-list > .goods-box > .list-body > .list-item > .list-price > li.mid-name-b > span {
        font-size: 14px !important;
        font-weight: 700 !important;
    }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .template-wrapper {
        padding: 0 12px;
    }

    .section {
        margin-top: 12px !important;
    }
}

/* PC 반응형 */
@media (min-width: 769px) {
    .template-wrapper {
        padding: 0 20px;
    }

    .box-banner {
        margin: 30px 0;
        border-radius: 20px;
        overflow: hidden;
    }

    .banner-slide-box,
    .swiper-container,
    .swiper-slide img,
    .banner-box,
    .main-banner {
        border-radius: 20px;
    }

    .template-goods-wrapper,
    .goods-list-wrapper {
        padding: 0 20px;
    }

    .goods-list-wrapper {
        gap: 16px;
    }

    .section-title,
    .box-title {
        padding: 20px 20px 16px;
    }
}
/* end of global.css */