:root {
  --main-color: #6600ff;
}

* {
  font-family:
    Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", arial, sans-serif !important;
}

/* 전체 배경 */
.marketing-guide.inner-wrap {
  box-sizing: border-box;
  position: relative;
  padding: 28px;
  margin-bottom: 50px;
  max-height: none;
  overflow: visible;
  border: 1px solid #ece5f7;
  border-radius: 16px;

  background-color: #f7f3ff !important;
  background-image: url("https://storage.perfectcdn.com/gtviqg/wulocm3mh65llwu5.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 240px;
}

/* PC: 카드 2열, 오른쪽 캐릭터 공간 확보 */
.marketing-guide .marketing-guide__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(70%, calc(100% - 220px));
}

/* 카드 전체가 링크 */
.marketing-guide a.marketing-guide__card {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  min-height: 104px;
  padding: 18px 20px;
  margin: 0;

  color: #30283e;
  background: #fff;
  border: 1px solid #e7def4;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 2px 5px rgb(47 22 80 / 3%);

  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.marketing-guide .marketing-guide__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}

.marketing-guide .marketing-guide__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 첫 방문자를 위한 시작점 */
.marketing-guide a.marketing-guide__card--first {
  border-color: #9747ff;
}

.marketing-guide .marketing-guide__badge {
  display: inline-block;
  padding: 3px 8px;
  color: #7000ff;
  background: #f2e9ff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

/* 이동 화살표 */
.marketing-guide .marketing-guide__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  color: #7000ff;
  background: #f7f2ff;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
}

@media (hover: hover) {
  .marketing-guide a.marketing-guide__card:hover {
    color: #6200df;
    background-color: #fcfaff;
    border-color: #9747ff;
    box-shadow: 0 4px 12px rgb(112 0 255 / 8%);
  }
}

.marketing-guide a.marketing-guide__card:focus-visible {
  outline: 3px solid #7000ff;
  outline-offset: 3px;
}

/* 모바일·태블릿: 세로 카드, 캐릭터는 아래에 배치 */
@media (max-width: 900px) {
  .marketing-guide.inner-wrap {
    padding: 20px;
    background-image: none;
  }

  .marketing-guide .marketing-guide__links {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .marketing-guide a.marketing-guide__card {
    min-height: 76px;
    padding: 16px;
  }

  .marketing-guide .marketing-guide__title {
    font-size: 15px;
  }

  .marketing-guide.inner-wrap::after {
    content: "";
    display: block;
    height: 140px;
    margin-top: 12px;
    background-image: url("https://storage.perfectcdn.com/gtviqg/wulocm3mh65llwu5.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 140px;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-guide a.marketing-guide__card {
    transition: none;
  }
}

/* 가이드 영역의 실제 너비를 기준으로 배치 */
.marketing-guide.inner-wrap {
  container-name: likestore-guide;
  container-type: inline-size;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;

  box-sizing: border-box;
  min-width: 0;
  padding: 20px;
  max-height: none;
  overflow: visible;

  /* 라이키는 아래 ::after 한 곳에서만 표시 */
  background-image: none !important;
  background-color: #f7f3ff !important;
}

/* 공간이 부족하면 라이키가 다음 줄로 이동 */
.marketing-guide.inner-wrap > .marketing-guide__links {
  flex: 1 1 460px;
  min-width: 0;
  width: auto;
  max-width: 100%;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* 라이키: 넓으면 오른쪽, 좁으면 아래쪽 */
.marketing-guide.inner-wrap::after {
  content: "";
  display: block;
  position: static;
  flex: 0 0 160px;

  width: 160px;
  max-width: 100%;
  height: 140px;
  margin: 0 0 0 auto;

  background-image: url("https://storage.perfectcdn.com/gtviqg/wulocm3mh65llwu5.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 140px;

  pointer-events: none;
}

/* 브라우저가 아니라 가이드 내부가 좁을 때 1열 */
@container likestore-guide (max-width: 460px) {
  .marketing-guide.inner-wrap > .marketing-guide__links {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .marketing-guide a.marketing-guide__card {
    min-height: 76px;
    padding: 16px;
  }

  .marketing-guide .marketing-guide__title {
    font-size: 15px;
  }
}

.blogPostWrapper.pillar h1,
.blogPostWrapper.pillar h2,
.blogPostWrapper.pillar h3,
.blogPostWrapper.pillar p {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif !important;
}

.blogPostWrapper.pillar h1 {
  color: #111;
  letter-spacing: -0.045em;
  word-break: keep-all;
  font-size: clamp(52px, 6.4vw, 92px) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  text-decoration-line: underline;
  text-decoration-color: #f5f0fd;
  text-decoration-thickness: 24px;
  text-decoration-style: solid;
  text-underline-offset: -15px;
}

.blogPostWrapper.pillar h2 {
  color: #111;
  letter-spacing: -0.045em;
  word-break: keep-all;
  font-size: clamp(36px, 4.5vw, 64px) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
}
.blogPostWrapper.pillar p,
.blogPostWrapper.pillar b,
.blogPostWrapper.pillar table tr th,
.blogPostWrapper.pillar table tr td,
.blogPostWrapper.pillar table tr td strong {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif !important;
  color: #44403b !important;
  word-break: keep-all;
  font-size: clamp(16px, 1.5vw, 19px) !important;
  line-height: 1.75 !important;
}

.blogPostWrapper.pillar .top img {
  border-radius: 24px;
  width: 100%;
  margin-top: 27px;
}

/* 부트페이 시작*/
body.bootpay-open .bootpay-payment-background {
  z-index: 999999;
}

.panel-body.border-solid.border-rounded.signin {
  white-space: pre-wrap;
}

.modal-container.paysuccess .content .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-right: -15px;
  margin-left: -15px;
}

.warning_notice {
  padding-bottom: 20px !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

.warning_notice span {
  color: var(--main-color) !important;
  font-weight: bold !important;
}

.modal-container.paysuccess .content .row:first-child {
  margin-top: 0px;
}

.modal-container.paysuccess .content .row .col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.modal-container.paysuccess .content .row .col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

/* 부트페이 끝 */

/* 블로그 페이지 시작 */

.container.blog .subjectWrapper {
  padding-top: 70px;
  padding-bottom: 40px;
}

.container.blog .postContainer {
  padding-top: 20px;
}

.container.blog .postContainer .postWrapper > div > h4 {
  margin-top: 20px;
  margin-bottom: 12px;
}

.container.blog .postContainer .postWrapper > div > h4 > a {
  font-style: normal;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}

.container.blog .postContainer .postWrapper > div > a {
}

.container.blog .postContainer .postWrapper > div > a > img {
  border-radius: 12px;
}

.container.blog .postContainer .postWrapper > div > time {
  color: #cecece;
  font-size: 13px;
}

.container.blog .blogTagContainer {
  padding-top: 15px;
  padding-bottom: 18px;
  margin-bottom: 10px;
}

.container.blog .blogTagContainer .blogTagWrapper ul {
  text-align: center;
}

.container.blog .blogTagContainer .blogTagWrapper ul .blogTag {
  display: inline-block;
  border-radius: 6px;
  font-size: 15px;
  line-height: 26px;
  margin-bottom: 5px;
  padding: 5px 15px;
  font-weight: 400;
  background: #eee;
  color: #333333;
  cursor: pointer;
}
.container.blog .blogTagContainer .blogTagWrapper ul .blogTag:hover,
.container.blog .blogTagContainer .blogTagWrapper ul .blogTag.active {
  background: #f5f0fd;
  color: var(--main-color);
  font-weight: 700;
}

/* 블로그 페이지 끝 */

/* 블로그 포스트 시작 */

.blogPostContainer .top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 70px;
}

.blogPostContainer .top .category {
  color: var(--main-color);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.blogPostContainer .top h1 {
  font-size: 29px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 27px;
  text-align: center;
}

.blogPostContainer .top img {
  border-radius: 24px;
  width: 100%;
}

article.blogPost {
  padding-top: 32px;
}

article.blogPost div.blogPostBody h2 {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 27px;
}

article.blogPost div.blogPostBody h3 {
  font-size: 25px;
}

article.blogPost div.blogPostBody h4 {
  font-size: 25px;
}

article.blogPost div.blogPostBody p {
  font-weight: normal;
  font-size: 18px;
  margin-bottom: 24px;
  line-height: 1.6;
}

article.blogPost div.blogPostBody p.space {
  width: 100%;
}

article.blogPost div.blogPostBody hr {
  margin-bottom: 18px;
}

article.blogPost div.blogPostBody .callout {
  display: flex;
  padding: 16px 16px 16px 12px;
  width: 100%;
  border-radius: 4px;
  background: rgb(241, 241, 239);
  margin-bottom: 18px;
}

article.blogPost div.blogPostBody .callout .emojiWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
}

article.blogPost div.blogPostBody .callout .emojiWrapper span {
  line-height: 1em;
  white-space: nowrap;
}

article.blogPost div.blogPostBody .callout .contentWrapper {
  display: flex;
  flex-direction: column;
  min-width: 0px;
  margin-left: 8px;
  width: 100%;
}

article.blogPost div.blogPostBody .callout .contentWrapper div.content {
  max-width: 100%;
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  caret-color: rgb(55, 53, 47);
  padding-left: 2px;
  padding-right: 2px;
  min-height: 1em;
  color: rgb(55, 53, 47);
  -webkit-text-fill-color: rgba(55, 53, 47, 0.5);
  font-size: 14px;
}

article.blogPost div.blogPostBody div.imgWrapper {
  padding-top: 12px;
  margin-bottom: 30px;
  border-radius: 24px;
}

article.blogPost div.blogPostBody div.imgWrapper img {
  width: 100%;
  border-radius: 24px;
}

article.blogPost div.blogPostBody .highlighting {
  background: #f5f0fd;
  padding: 0px 5px;
  font-weight: bold;
}

article.blogPost div.blogPostBody div.seoSection {
  margin-top: 100px;
}

article.blogPost
  div.blogPostBody
  div.seoSection
  .hashtagWrapper
  .hashtag::before {
  content: "#";
}

article.blogPost div.blogPostBody div.seoSection .hashtagWrapper .hashtag {
  padding: 8px 16px;
  border-radius: 30px;
  transition: all 0.3s ease;
  cursor: pointer;
  background: #f5f0fd;
  display: inline-block;
  margin-bottom: 10px;
}

article.blogPost
  div.blogPostBody
  div.seoSection
  .hashtagWrapper
  .hashtag:hover {
  background: #e8e5fb;
}

article.blogPost div.blogPostBody div.shareSection {
  margin-top: 100px;
  display: flex;
  justify-content: start;
}

article.blogPost div.blogPostBody div.shareSection .shareWrapper {
  display: flex;
  align-items: center;
}

article.blogPost div.blogPostBody div.shareSection .shareWrapper .shareIcon {
  margin-right: 15px;
}

article.blogPost div.blogPostBody div.shareSection .shareWrapper span {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 20px;
  background: rgb(241, 241, 239);
  font-size: 18px;
  font-weight: 700;
  border-radius: 30px;
}

article.blogPost div.blogPostBody div.shareSection .shareWrapper span:hover {
  background: #e8e5fb;
  color: var(--main-color);
}

div.recommendSection div.recommendContents a.recommendContent .thumbWrapper {
  border-radius: 20px;
  overflow: hidden;
}

div.recommendSection div.recommendContents a.recommendContent .contentTitle {
  font-size: 18px;
}

div.recommendSection div.recommendContents a.recommendContent .contentDesc {
  font-size: 14px;
  margin-bottom: 0;
}

div.recommendSection div.recommendContents a.recommendContent .hashtagWrapper {
  margin-top: 5px;
}

div.recommendSection
  div.recommendContents
  a.recommendContent
  .hashtagWrapper
  .hashtag {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 20px;
  display: inline-block;
  background: #f5f0fd;
  margin-bottom: 10px;
}

/* 블로그 포스트 끝 */

/* 마이페이지 시작 */

.account.container .sectionWrapper .inner-wrap {
  margin-bottom: 20px;
}

/* 마이페이지 끝 */

/* 충전 페이지 버튼 비활성화 시작 */
.pay.submitBtn.disabled,
.submitBtn.writeReview.disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: default;
}
/* 충전 페이지 버튼 비활성화 끝 */

/* terms 시작 */

.container.terms section.inner-wrap > ol > li {
  margin-bottom: 30px;
}

.container.terms section.inner-wrap > ol > li > p {
  padding: 0;
  margin: 5px 0 0;
  line-height: 1.3;
  font-weight: 300;
}

.container.terms section.inner-wrap > ol > li > ol,
.container.terms section.inner-wrap > ol > li > ul {
  padding-left: 10px;
  margin: 5px 0 0;
  line-height: 1.3;
  font-weight: 300;
}

.container.terms section.inner-wrap > div > div > h4:first-child {
  margin-top: 0px;
}

.container.terms section.inner-wrap > div > div > h4 {
  font-size: 14px;
  font-weight: 400;
  margin-top: 30px;
  margin-bottom: 5px;
}

.container.terms section.inner-wrap > div > div > div {
  padding-left: 10px;
  font-size: 14px;
  font-weight: 300;
}

/* terms 끝 */

/* scroll bar css 시작 */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  width: 3px;
  border-radius: 1px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
  padding: 1px;
  border: 1px solid transparent;
}
/* scroll bar css 끝 */

form#order-form .alert {
  display: none !important;
}

.indicatorWrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.indicatorItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 100;
  font-size: 20px;
}

.indicatorItem > span {
  font-size: 12px;
  font-weight: 300;
}

.indicatorItem > svg {
  margin-bottom: 5px;
}

div.container > div.titleArea > h2 {
  font-size: 18px;
  font-weight: 700;
}

/* 주문관리 관련 */
.orderWrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 3px;
}

.order-contents {
  margin-top: 15px;
}

.order-contents .inner-wrap {
  border: 1px solid var(--main-color);
}

.inner-wrap.order-content {
  margin-bottom: 15px;
}

.inner-wrap.order-content > .orderLink {
  display: flex;
  justify-content: space-between;
}

.inner-wrap.order-content > .orderLink > span {
  text-align: right;
}

.inner-wrap.order-content > div {
  margin-bottom: 3px;
}

.order-contents
  .inner-wrap.order-content
  > div.orderWrapper:nth-child(6)
  > span.orderText {
  grid-column: 1 / -1;
}

.order-contents .inner-wrap.order-content > div.orderTitle > div.service {
  margin-bottom: 10px;
}

.orders-filter ul.swiper-wrapper > li.tab-list.swiper-slide.active {
  background: var(--main-color);
  color: #fff;
}

.orders-filter ul.swiper-wrapper > li.tab-list.swiper-slide.active a:hover {
  color: #fff;
}

/* 서비스(상품) 관련 */
.select2-container .select2-selection__id-1 {
  display: none;
}

.select2-container .select2-selection__id-2 {
  display: none;
}

.select2-container .select2-selection__id-3 {
  display: none;
}

.nav-pills > li > a {
  border-radius: unset;
}

.nav > li > a {
  padding: unset;
}

/* 모바일 헤더 */
header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background: #fff;
  z-index: 10000;
}

/* 콘텐츠 콘테이너 */
div.container {
  padding-top: 80px;
  padding-bottom: 30px;
}

/* 탭 리스트 */
ul.tab-body > li.tab-list {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: min-content;
  justify-content: center;
  overflow: visible;
  padding: 6px 12px;
  position: relative;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  background-color: #ffffff;
  border-radius: 18px;
  opacity: 1;
  border: 1px solid rgb(224, 224, 224);
  margin-right: 8px;
  margin-bottom: 8px;
  line-height: 24px;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

nav ul ul.categoryContainer li.category {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: min-content;
  justify-content: center;
  overflow: visible;
  padding: 6px 12px;
  position: relative;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  background-color: #ffffff;
  border-radius: 6px;
  opacity: 1;
  margin-right: 8px;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

nav ul ul.categoryContainer li.category.active {
  background: var(--main-color);
  color: #ffffff;
  border: 1px solid var(--main-color) !important;
}

ul.tab-body > li.tab-list:hover,
ul.tab-body > li.tab-list.on {
  background: var(--main-color);
  color: #ffffff;
}

ul.swiper-wrapper > li.tab-list.swiper-slide.active {
  border: 1px solid var(--main-color);
  color: #333333;
}

ul.swiper-wrapper > li.tab-list.swiper-slide {
  align-items: center;
  text-align: center;
  cursor: pointer;
  display: flex;
  height: min-content;
  justify-content: center;
  overflow: visible;
  padding: 6px 12px;
  position: relative;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  background-color: #ffffff;
  border-radius: 18px;
  opacity: 1;
  border: 1px solid rgb(224, 224, 224);
  margin-right: 8px;
  margin-bottom: 8px;
  line-height: 24px;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

ul.tab-contents {
  margin-top: 15px;
}

ul.tab-contents > div.inner-wrap {
  display: none;
  margin-bottom: 15px;
}

ul.modal-wrapper > .modal-list {
  margin: 0 0 15px 0;
  cursor: pointer;
}

ul.modal-wrapper > .modal-list svg.modal-on-svg {
  width: 15px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
}

ul.modal-wrapper div.inner-wrap.modal-list li.modal-subject {
  font-size: 13px;
}

ul.modal-wrapper div.inner-wrap.modal-list div.prd_wrapper {
  margin-top: 5px;
}

ul.modal-wrapper div.inner-wrap.modal-list div.prd_wrapper > span {
  font-size: 10px;
  padding: 2px 4px;
  border: 1px solid var(--main-color);
  color: var(--main-color);
  border-radius: 2px;
}

/* *****가이드페이지 > 모달관련 CSS***** */

div.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 20000;
}

div.modal-container.review > .inner {
  max-width: 80vw;
}

div.modal-container > .inner {
  flex: 0 0 calc(100% - 30px);
  max-width: calc(100vw - 20px);
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0px 5px 9px #00000029;
  padding: 30px 30px;
}

div.modal-container > .inner > h3.subject {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
}

div.modal-container > .inner > div.content {
  border: 1px solid #eeeeee;
  border-radius: 6px;
  background-color: #ffffff;
  min-height: 50px;
  overflow-y: auto;
  max-height: 60vh;
  margin: 0 0 20px;
}

div.modal-container > .inner > div.content > span.img-wrap {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

div.modal-container > .inner > div.content > span.img-wrap > img {
  width: 100%;
}

ul.tab-contents > div.inner-wrap.active {
  display: block;
}

ul.tab-contents .inner-wrap li.tab-content > div.question > h3 {
  height: 50px;
}

ul.tab-contents .inner-wrap li.tab-content > div.question > h3 > div {
  font-size: 13px;
}

li.tab-content > div.descWrapper > p {
  display: none;
}

ul.tab-contents .inner-wrap.open li.tab-content > div.descWrapper > p {
  display: block;
}

ul.tab-contents .inner-wrap svg.plus,
ul.tab-contents .inner-wrap svg.minus {
  width: 15px;
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translate(0, -50%);
}

ul.tab-contents .inner-wrap svg.plus {
  display: block;
}

ul.tab-contents .inner-wrap svg.minus {
  display: none;
}

ul.tab-contents .inner-wrap.open svg.plus {
  display: none;
}

ul.tab-contents .inner-wrap.open svg.minus {
  display: block;
}

ul.tab-contents > div.inner-wrap > li.tab-content > div.descWrapper > p {
  font-size: 12px;
}

/* 셀렉트 기존 수정*/
select.form-control,
#order-form
  > div.form-group
  > span.select2
  > span.selection
  > span.form-control {
  border: none;
  background: rgb(250, 250, 250) !important;
  box-shadow:
    inset 0 0 0 0px rgb(235, 235, 235),
    inset 0 0 0 1px rgb(238, 238, 238) !important;
  display: block;
  width: 100%;
  height: 41px;
  padding: 12px;
  font-size: 12px;
  color: #000000 !important;
}
/* 인풋 */
.textInput,
#service_description > div,
#fields .form-group input.form-control {
  appearance: none;
  width: 100%;
  height: auto;
  outline: none;
  border: none;
  padding: 12px;
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0em;
  background: rgba(250, 250, 250, 0.2) !important;
  color: #000000 !important;
  box-shadow:
    inset 0 0 0 0px rgb(235, 235, 235),
    inset 0 0 0 1px rgb(238, 238, 238) !important;
}
select.form-control,
#order-form
  > div.form-group
  > span.select2
  > span.selection
  > span.form-control {
  background: rgba(250, 250, 250, 0.2) !important;
}
.form-group {
  margin-bottom: 16px !important;
}

/* 버튼 */
.smBtn {
  padding: 4px 14px;
  font-size: 10px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 6px;
  color: #333333;
  background: #ffffff;
}

.smBtn.filled {
  color: #fff;
  background: var(--main-color);
  border: 1px solid var(--main-color);
}

.submitBtn {
  appearance: none;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  background: var(--main-color) !important;
  color: #ffffff;
  z-index: 1;
  box-shadow: none;
}

/* notice section */
.noticeWrapper {
  height: 150px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: 30px;
}

.notice {
  font-size: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;
}

.notice .smBtn {
  border-color: var(--main-color);
  margin-left: 5px;
  padding: 2px 5px;
}

.notice .info {
  display: inline-block;
}

/* notice section */
.container.addfunds .titleArea {
  padding-bottom: 10px;
}

.container.addfunds section.paymentMethods div .btnBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 10px;
}

.container.addfunds section.paymentMethods div .btnBox .addfunds-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-align: center;
}

.container.addfunds
  section.paymentMethods
  div
  .btnBox
  .addfunds-button
  .normal-img {
  display: block;
}

.container.addfunds
  section.paymentMethods
  div
  .btnBox
  .addfunds-button:hover
  .normal-img,
.container.addfunds
  section.paymentMethods
  div
  .btnBox
  .addfunds-button.active
  .normal-img {
  display: none;
}

.container.addfunds
  section.paymentMethods
  div
  .btnBox
  .addfunds-button
  .hover-img {
  display: none;
}

.container.addfunds
  section.paymentMethods
  div
  .btnBox
  .addfunds-button:hover
  .hover-img,
.container.addfunds
  section.paymentMethods
  div
  .btnBox
  .addfunds-button.active
  .hover-img {
  display: block;
}

.container.addfunds
  section.paymentMethods
  div
  .btnBox
  .addfunds-button
  div.button-title {
  color: #aaaaaa;
  font-size: 11px;
}

.container.addfunds
  section.paymentMethods
  div
  .btnBox
  .addfunds-button:hover
  div.button-title {
  color: #333333;
}

.container.addfunds > section > div.inner-wrap > div.pointBtns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 5px;
}

.container.addfunds > section > div.inner-wrap > div.pointBtns > .smBtn {
  padding: 4px 8px;
  text-align: center;
  color: var(--main-color);
}

.container.addfunds > section > div.inner-wrap div.taxBtns > .smBtn {
  padding: 4px 8px;
  text-align: center;
  color: var(--main-color);
}

.container.addfunds > section > div.inner-wrap div.taxBtns > .smBtn.active {
  color: #ffffff;
  background-color: var(--main-color);
}

.container.addfunds > section > div.inner-wrap .businessInfos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.container.addfunds > section > div.inner-wrap .businessInfos #taxEmail {
  grid-column: 1 / -1;
}

.container.addfunds > section > div.inner-wrap .form-group.point .infoRow {
  display: flex;
  align-items: center;
}

.container.addfunds > section > div.inner-wrap .form-group.point .infoRow p {
  font-size: 12px;
}

.container.addfunds
  section.paymentMethods.account
  div.inner-wrap
  .form-group.account.businessInfos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}
.container.addfunds
  section.paymentMethods.account
  div.inner-wrap
  > .form-group.account.tax
  > div.taxBtns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
}

.container.addfunds section.paymentMethods.card .form-group.account,
.container.addfunds section.paymentMethods.card .inner-wrap.account {
  display: none !important;
}

.container.addfunds section.paymentMethods.account .form-group.account,
.container.addfunds section.paymentMethods.account .inner-wrap.account {
  display: block;
}

/* Swiper.js */
.swiper-container {
  overflow: hidden;
}

label {
  font-size: 13px;
  font-weight: unset !important;
}

a {
  text-decoration: none !important;
  color: #333333;
}
a:hover {
  text-decoration: none;
  color: #333333;
}

body.menu_on aside {
  bottom: 58px !important;
}

aside div.mo_hidden > a.brand > img.logo {
  height: 40px;
}

header div.logo > a > img {
  height: 40px;
}
header > div > div.menu {
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner-wrap {
  padding: 15px 25px 15px;
  border-radius: 6px;
  border: 1px solid #eeeeee;
  background-color: #ffffff !important;
}
.inner-wrap.review {
  background-color: #f5f0fd !important;
}
.menu.active {
  background: #ffffff;
  color: var(--main-color);
  font-weight: 500;
}
.mobile-nav {
  box-shadow: 0px -1px 1px #e1e1e17d;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #fff !important;
}
aside div.menu nav ul li.category {
  background: none !important;
}
aside div.menu nav ul li.category.active > a {
  color: #000;
}

main section .categoryContainer .category.active .categoryName span {
  color: #fff;
}

main section.orderSection .categoryContainer li.category a span {
  color: #999999;
}
.btn-primary:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.responsiveHiddenBlock {
  display: none !important;
}

.form-control {
  border: none !important;
  background: #fff !important;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

input:-internal-autofill-selected {
  border: none !important;
  background: #fff !important;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

/* 단축 */
mo_hidden {
  display: none !important;
}

.mo_unvisible {
  display: none;
}

footer .businessInfos {
  height: 0px;
  overflow: hidden;
  font-size: 12px;
}

aside footer > div.toggleBtn > svg {
  transform: rotate(180deg);
}

.businessOn footer > div.toggleBtn > svg {
  transform: rotate(0deg);
}

/* 충전신청 완료화면 */

div.payRequestContainer div.toast {
  border-bottom: 1px solid #eeeeee;
}

.payRequestContainer .payRequestBody .payinfo:last-child {
  border-bottom: 1px solid #eeeeee;
}

.payRequestContainer .payRequestBody .payinfo .data div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  padding: 0px 20px;
}

.payRequestContainer .payRequestBody .payinfo {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* addfunds paymentList */

div.paymentHead {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--main-color);
  padding-bottom: 5px;
}

div.paymentHead > span {
  text-align: center;
  font-size: 12px;
}

.paymentList .table > tbody > tr > td {
  padding: 4px 14px;
  font-size: 10px;
  text-align: center;
}

.paymentList .paymentBody .paymentRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 10px;
}

.paymentList .paymentBody .paymentRow > span {
  text-align: center;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.paymentList .paymentBody .paymentRow > span:last-child {
  width: fit-content;
  color: var(--main-color);
}

.event-banner-wrapper.swiper-container .swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 0.5);
}

.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  padding-right: 20px !important;
  padding-left: 20px !important;
}

@media (min-width: 768px) {
  .blogPostWrapper.pillar h1 {
    font-size: clamp(48px, 4vw, 64px) !important;
  }

  .blogPostWrapper.pillar h2 {
    font-size: clamp(32px, 3vw, 44px) !important;
  }

  /* 블로그 페이지 시작 */

  .container.blog .subjectWrapper {
    padding-top: 70px;
    padding-bottom: 80px;
  }

  .container.blog .blogTagContainer .blogTagWrapper ul {
    text-align: left;
  }

  /* 블로그 페이지 끝 */

  /* 블로그 포스트 시작 */

  .blogPostContainer {
    max-width: 1080px;
  }

  .blogPostContainer .top .category {
    margin-bottom: 15px;
  }

  article.blogPost div.blogPostBody .callout .contentWrapper div.content {
    font-size: 18px;
  }

  article.blogPost div.blogPostBody div.shareSection {
    justify-content: center;
  }

  .blogPostContainer .top h1 {
    font-size: 40px;
  }

  article.blogPost div.blogPostBody h2 {
    font-size: 30px;
  }

  article.blogPost div.blogPostBody h3 {
    font-size: 28px;
  }

  article.blogPost div.blogPostBody h4 {
    font-size: 26px;
  }

  div.recommendSection div.recommendContents a.recommendContent .contentTitle {
    font-size: 21px;
  }

  div.recommendSection div.recommendContents a.recommendContent .contentDesc {
    font-size: 18px;
    margin-bottom: 0;
  }

  div.recommendSection
    div.recommendContents
    a.recommendContent
    .hashtagWrapper
    .hashtag {
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 30px;
    display: inline-block;
    background: #f5f0fd;
  }

  /* 블로그 포스트 끝 */
  .container.terms section.inner-wrap > ol > li > ol,
  .container.terms section.inner-wrap > ol > li > ul,
  .container.terms section.inner-wrap > div > div > div {
    padding-left: 30px;
  }
  .responsiveHiddenBlock {
    display: block !important;
  }
  mo_hidden {
    display: block;
  }
  .mo_unvisible {
    display: block;
  }
  .pc_unvisible {
    display: none;
  }
  body.menu_on aside {
    bottom: -100% !important;
  }
  aside div.mo_hidden > a.brand > img.logo {
    margin-top: 10px;
    height: 50px;
  }

  aside div.menu {
    margin-top: 15px;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    overflow-y: scroll;
    max-height: 500px;
  }

  body > aside > div > div.menu > div > nav > ul > li.menu {
    font-size: 14px;
  }
  aside div.menu nav ul li.category > a {
    font-size: 12px;
  }

  footer.footerPC {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  footer > div.toggleBtn {
    border-top: 1px solid #eeeeee;
  }

  footer .businessInfos {
    font-size: 12px;
  }

  div.modal-container > .inner,
  div.modal-container.review > .inner {
    max-width: 330px;
  }

  div.modal-container.guide > .inner {
    flex: 0 0 calc(100% - 30px);
    max-width: 730px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0px 5px 9px #00000029;
    padding: 50px 30px;
  }

  section.popup-wrap {
    background: rgba(0, 0, 0, 0.7);
  }

  .popup-wrap .inner {
    max-width: 650px;
    max-height: 600px;
  }

  div.container {
    padding-top: 0px;
  }
  .container.addfunds section.paymentMethods div .btnBox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 20px;
  }
  .container.addfunds
    section.paymentMethods
    div
    .btnBox
    .addfunds-button
    div.button-title {
    font-size: 16px;
  }
  /* 탭 리스트 */
  ul.tab-body > li.tab-list {
    font-size: 14px;
  }
  .event-banner-container {
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    z-index: 30000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .event-banner-wrapper.swiper-container {
    max-width: 400px;
    position: relative;
  }
  .event-banner-wrapper.swiper-container .swiper-wrapper {
    border-radius: 20px;
  }
  .event-banner-wrapper.swiper-container .swiper-wrapper .swiper-slide {
    border-radius: 20px;
    overflow: hidden;
  }
  .event-banner-wrapper.swiper-container .swiper-button-next:after,
  .event-banner-wrapper.swiper-container .swiper-button-prev:after {
    font-size: 18px !important;
  }
  .event-banner-wrapper.swiper-container .swiper-button-next,
  .event-banner-wrapper.swiper-container .swiper-button-prev {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    color: var(--main-color) !important;
    background: #fff !important;
  }
  .event-banner-wrapper.swiper-container .swiper-pagination {
    bottom: 45px;
  }
  .event-banner-wrapper.swiper-container .swiper-button-next {
    right: 6px;
  }
  .event-banner-wrapper.swiper-container .swiper-button-prev {
    left: 6px;
  }
  .event-banner-wrapper.swiper-container .swiper-button-prev:after {
    margin-left: -3px;
  }
  .event-banner-wrapper.swiper-container .swiper-button-next:after {
    margin-right: -3px;
  }
  .event-banner-wrapper.swiper-container .swiper-pagination-bullet-active {
    background: #fff;
  }

  .main_pc_banner .event-banner-wrapper.swiper-container {
    max-width: unset;
  }

  .main_pc_banner .event-banner-wrapper.swiper-container .swiper-pagination {
    bottom: 5px;
  }

  .main_pc_banner
    .event-banner-wrapper.swiper-container
    .swiper-pagination-bullet-active,
  .main_pc_banner
    .event-banner-wrapper.swiper-container
    .swiper-pagination-bullet {
    background: var(--main-color);
  }
}

/* ================================
   LIKE스토어 사이드바 전용 레이아웃
   (기존 CSS와 충돌 최소화)
   ================================ */

/* 기본 사이드바 레이아웃 - 모바일 기준 */
aside.sidebar {
  position: fixed;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: calc(100% - 58px);
  background-color: #ffffff;
  z-index: 10009;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
}

/* 기존 CSS의
   body.menu_on aside { bottom: 58px !important; }
   규칙이 그대로 적용되어 열리고 닫히는 동작은 기존 방식 유지 */

/* 내부 래퍼 */
aside.sidebar .sidebar-inner {
  padding: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}

/* 로고 영역 */
aside.sidebar .sidebar-logo {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

aside.sidebar .brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

aside.sidebar .brand-logo .logo {
  max-height: 40px;
  width: auto;
}

/* 잔액 / 충전 버튼 영역 */
aside.sidebar .balance-wrapper {
  display: flex;
  align-items: center;
}

aside.sidebar .balance-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

aside.sidebar .balanceVolume {
  font-weight: 300;
  font-size: 14px;
}

/* 충전 버튼은 기존 .smBtn 스타일을 그대로 사용하고
   추가로 사이드바 전용 약간만 손보고 싶을 때 */
aside.sidebar .btn-charge {
  white-space: nowrap;
}

/* 메뉴 래퍼 */
aside.sidebar .menu-wrapper {
  margin-top: 20px;
}

/* 메뉴 리스트 */
aside.sidebar .menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 개별 메뉴 아이템 (새 클래스 menu-item) */
aside.sidebar .menu-item {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 링크 기본 스타일 (기존 a { ... }에 추가로 약간 보정) */
aside.sidebar .menu-item > a,
aside.sidebar .menu-item .menu-link {
  text-decoration: none;
  color: #333333;
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* 활성 메뉴 스타일은 기존 .menu.active 규칙을 그대로 사용
   (여기서 별도로 덮어쓰지 않음) */

/* NEW 뱃지 */
aside.sidebar .menu-badge {
  display: none; /* 필요하면 JS로 보이게 제어 */
  font-size: 8px;
  color: var(--main-color, #6600ff);
  position: absolute;
  top: -5px;
  right: -20px;
}

/* 카테고리 컨테이너 (사이드바) */
aside.sidebar .category-container {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 20px 0 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* 개별 카테고리 아이템 (새 클래스 category-item) */
aside.sidebar .category-item {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 카테고리 텍스트 */
aside.sidebar .categoryName {
  font-size: 13px;
  color: #999999;
  padding: 0 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}

aside.sidebar .categoryName:hover {
  color: #333333;
}

/* 로그아웃 영역 */
aside.sidebar .logout-item {
  cursor: pointer;
}

aside.sidebar .logout-item > a {
  text-decoration: none;
  color: #333333;
}

aside.sidebar .logout-icon {
  width: 24px;
  height: 24px;
}

/* 사이드바 푸터 */
aside.sidebar .sidebar-footer {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #eeeeee;
}

/* 사업자정보 토글 버튼 (텍스트 + 아이콘 정렬) */
aside.sidebar .sidebar-footer .footer-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px 20px;
}

/* 토글 아이콘 */
aside.sidebar .toggle-icon {
  width: 24px;
  height: 24px;
}

/* 사업자 정보 텍스트 영역
   (기존 footer .businessInfos 와 클래스명 공유하지만
    이쪽은 .business-infos 를 추가로 붙여서 사이드바 전용 스타일 제공) */
aside.sidebar .business-infos {
  padding: 0 20px 20px 20px;
  font-size: 12px;
  color: #555555;
}

aside.sidebar .business-infos p {
  margin: 4px 0;
}

/* 푸터 링크 (이용약관 / 개인정보 처리방침) */
aside.sidebar .footer-links {
  margin-top: 10px;
  display: flex;
  gap: 5px;
}

aside.sidebar .footer-links a {
  text-decoration: none;
  color: #555555;
}

aside.sidebar .footer-links a:hover {
  text-decoration: underline;
}

/* ------------------------------
   데스크톱(>=768px)에서의 사이드바
   ------------------------------ */
@media (min-width: 768px) {
  aside.sidebar {
    top: 0;
    bottom: auto;
    width: 260px;
    height: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    border-right: 1px solid #eeeeee;
  }

  aside.sidebar .sidebar-inner {
    padding: 0 20px;
  }

  aside.sidebar .sidebar-logo {
    height: 120px;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    padding: 0 20px;
  }

  aside.sidebar .menu-wrapper {
    margin-top: 0;
  }

  aside.sidebar .category-container {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    margin-top: 10px;
    padding-top: 0;
    gap: 6px;
  }

  aside.sidebar .category-item {
    justify-content: flex-start;
  }

  aside.sidebar .sidebar-footer {
    padding-bottom: 20px;
  }

  aside.sidebar .business-infos {
    padding: 0 20px;
  }
}

/* ================================
   LIKE스토어 사이드바 전용 레이아웃
   (기존 CSS와 충돌 최소화)
   ================================ */

/* 기본 사이드바 레이아웃 - 모바일 기준 */
aside.sidebar {
  position: fixed;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: calc(100% - 58px);
  background-color: #ffffff;
  z-index: 10009;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
}

/* body.menu_on aside { bottom: 58px !important; } 
   기존 규칙을 그대로 사용해서 열리고 닫히는 동작 유지 */

/* 내부 컨테이너 */
aside.sidebar .sidebar-inner {
  padding: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}

/* 로고 영역 */
aside.sidebar .sidebar-logo {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

aside.sidebar .brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

aside.sidebar .brand-logo .logo {
  max-height: 40px;
  width: auto;
}

/* 로그인 / 회원가입 버튼 영역 */
aside.sidebar .sidebar-auth {
  display: flex;
  align-items: center;
  gap: 6px;
}

aside.sidebar .sidebar-auth .user-menu,
aside.sidebar .sidebar-auth .authBtns {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 메뉴 래퍼 */
aside.sidebar .menu-wrapper {
  margin-top: 20px;
}

/* 메뉴 전체 리스트 */
aside.sidebar .menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 개별 메뉴 아이템 */
aside.sidebar .menu-item {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 메뉴 링크 */
aside.sidebar .menu-item > a,
aside.sidebar .menu-item .menu-link {
  text-decoration: none;
  color: #333333;
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* NEW 뱃지 (기본 숨김) */
aside.sidebar .menu-badge {
  display: none;
  font-size: 8px;
  color: var(--main-color, #6600ff);
  position: absolute;
  top: -5px;
  right: -20px;
}

/* 카테고리 컨테이너 (사이드바용) */
aside.sidebar .category-container {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 20px 0 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* 개별 카테고리 아이템 */
aside.sidebar .category-item {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 카테고리 텍스트 */
aside.sidebar .categoryName {
  font-size: 13px;
  color: #999999;
  padding: 0 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}

aside.sidebar .categoryName:hover {
  color: #333333;
}

/* 로그아웃은 이 게스트 버전에는 없지만
   나중을 위해 공통 정의 유지 */
aside.sidebar .logout-item {
  cursor: pointer;
}

aside.sidebar .logout-item > a {
  text-decoration: none;
  color: #333333;
}

aside.sidebar .logout-icon {
  width: 24px;
  height: 24px;
}

/* 푸터 전체 */
aside.sidebar .sidebar-footer {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #eeeeee;
}

/* 사업자정보 토글 줄 */
aside.sidebar .footer-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px 20px;
}

/* 토글 아이콘 */
aside.sidebar .toggle-icon {
  width: 24px;
  height: 24px;
}

/* 사업자 정보 텍스트 영역
   (기존 footer .businessInfos 의 height:0 은 그대로 두고,
    여기서는 글꼴/간격만 정의) */
aside.sidebar .business-infos {
  padding: 0 20px 20px 20px;
  font-size: 12px;
  color: #555555;
}

aside.sidebar .business-infos p {
  margin: 4px 0;
}

/* 푸터 링크 (이용약관 / 개인정보 처리방침) */
aside.sidebar .footer-links {
  margin-top: 10px;
  display: flex;
  gap: 5px;
}

aside.sidebar .footer-links a {
  text-decoration: none;
  color: #555555;
}

aside.sidebar .footer-links a:hover {
  text-decoration: underline;
}

/* ------------------------------
   데스크톱(>=768px) 레이아웃
   ------------------------------ */
@media (min-width: 768px) {
  aside.sidebar {
    top: 0;
    bottom: auto;
    width: 260px;
    height: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    border-right: 1px solid #eeeeee;
  }

  aside.sidebar .sidebar-inner {
    padding: 0 20px;
  }

  aside.sidebar .sidebar-logo {
    height: 120px;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    padding: 0 20px;
  }

  aside.sidebar .menu-wrapper {
    margin-top: 0;
  }

  aside.sidebar .category-container {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    margin-top: 10px;
    padding-top: 0;
    gap: 6px;
  }

  aside.sidebar .category-item {
    justify-content: flex-start;
  }

  aside.sidebar .sidebar-footer {
    padding-bottom: 20px;
  }

  aside.sidebar .business-infos {
    padding: 0 20px;
  }
}

/* ================================
   모바일 하단 네비게이션
   ================================ */

.mobile-nav.mobile-nav-grid {
  position: fixed;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  background-color: #ffffff;
  z-index: 10010;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* md:hidden 대응: 768px 이상에서는 숨김 */
@media (min-width: 768px) {
  .mobile-nav.mobile-nav-grid {
    display: none;
  }
}

/* 개별 아이템 */
.mobile-nav .mobile-nav-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  color: #aaaaaa;
}

/* 링크 / 버튼 공통 스타일 */
.mobile-nav .mobile-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* 이미지 사이즈 */
.mobile-nav .mobile-nav-link .normalLink,
.mobile-nav .mobile-nav-link .activeLink {
  width: 17px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 기본적으로 activeLink는 숨겨진 상태 (JS에서 토글) */
.mobile-nav .mobile-nav-link .activeLink {
  display: none;
}

/* 텍스트 */
.mobile-nav .mobile-nav-text {
  font-size: 11px;
  margin-top: 3px;
}

/* ================================
   모바일 헤더 (상단)
   ================================ */

header.mobile-header {
  display: block;
  padding: 15px 0;
  /* 기존 header { position:fixed; top:0; left:0; width:100%; background:#fff; z-index:10000; } 유지 */
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
}

/* md:hidden 대응: 768px 이상에서는 숨김 */
@media (min-width: 768px) {
  header.mobile-header {
    display: none;
  }
}

/* 헤더 내부 레이아웃 */
.mobile-header-inner {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 로고 이미지는 기존 header div.logo > a > img 규칙도 함께 적용됨 */

/* 잔액 / 충전 버튼 영역 */
.header-balance {
  display: flex;
  align-items: center;
}

.header-balance-inner {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* balanceVolume은 기존/사이드바 스타일도 같이 사용 */
.header-balance-inner .balanceVolume {
  font-weight: 300;
  font-size: 13px;
}

/* ================================
   모바일 하단 네비게이션
   ================================ */

.mobile-nav.mobile-nav-grid {
  position: fixed;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  background-color: #ffffff;
  z-index: 10010;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* md:hidden 대응: 768px 이상에서는 숨김 */
@media (min-width: 768px) {
  .mobile-nav.mobile-nav-grid {
    display: none;
  }
}

/* 개별 아이템 */
.mobile-nav .mobile-nav-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  color: #aaaaaa;
}

/* 링크 / 버튼 공통 스타일 */
.mobile-nav .mobile-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* 메뉴 버튼 타입 */
.mobile-nav .mobile-nav-button {
  width: 100%;
}

/* 아이콘 이미지 사이즈 */
.mobile-nav .mobile-nav-link .normalLink,
.mobile-nav .mobile-nav-link .activeLink {
  width: 17px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 기본 상태: activeLink 숨김 (JS로 토글) */
.mobile-nav .mobile-nav-link .activeLink {
  display: none;
}

/* 텍스트 */
.mobile-nav .mobile-nav-text {
  font-size: 11px;
  margin-top: 3px;
}

/* ================================
   모바일 헤더 (상단)
   ================================ */

header.mobile-header {
  display: block;
  padding: 15px 0;
  /* 기존 header { position:fixed; top:0; left:0; width:100%; background:#fff; z-index:10000; } 규칙이 이미 있음 */
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
}

/* md:hidden 대응: 768px 이상에서는 숨김 */
@media (min-width: 768px) {
  header.mobile-header {
    display: none;
  }
}

/* 헤더 내부 레이아웃 */
.mobile-header-inner {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 오른쪽 메뉴(로그인/회원가입) */
.mobile-header-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ================================
   메인 배너 공통 (모바일 / PC)
   ================================ */

.main_mo_banner,
.main_pc_banner {
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
}

/* 배너 안의 Swiper 컨테이너도 둥글게 */
.main_mo_banner .event-banner-wrapper,
.main_pc_banner .event-banner-wrapper {
  border-radius: 6px;
  overflow: hidden;
}

/* 슬라이드 이미지 꽉 채우기 */
.main_mo_banner .swiper-slide img,
.main_pc_banner .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* 모바일 배너 내 "참여방법" 버튼 위치 */
.banner-badge {
  position: absolute;
  top: 5px;
  right: 5px;
}

/* ================================
   타이틀 영역 (고객 리뷰)
   ================================ */

.titleArea.pc_unvisible {
  padding-bottom: 10px;
}

/* 로그인 상태일 때 flex 정렬 */
.titleArea-auth {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ================================
   고객 리뷰 박스
   ================================ */

.reviews-box {
  max-height: 200px;
  overflow-y: auto;
  /* space-y-[15px] 대신 flex column + gap */
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

/* inner-wrap.review 의 배경색은 기존 CSS에 이미 있음 */
/* .inner-wrap.review { background-color: #f5f0fd !important; } */

/* ================================
   지표(Indicator) 섹션
   ================================ */

/* Tailwind 의 hidden 대체 */
.hidden {
  display: none !important;
}

/* indicatorSection 패딩 조정 (좌우 0) */
.indicatorSection.inner-wrap {
  padding-left: 0;
  padding-right: 0;
}

/* 아이콘 크기 (w-8 h-8 대체, 32px) */
.indicatorSection .indicatorItem svg {
  width: 32px;
  height: 32px;
}
/* ================================
   메인 카테고리 그리드
   ================================ */

/* 전체 그리드: 모바일 6열, 데스크탑 8열 */
.categoryContainer.category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .categoryContainer.category-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* 카드 기본 스타일 */
.categoryContainer.category-grid .category-card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: #cecece;
  border-radius: 8px;
  transition: all 0.2s ease;
}

@media (min-width: 768px) {
  .categoryContainer.category-grid .category-card {
    height: 60px;
  }
}

/* 카드 안 링크 전체 채우기 */
.categoryContainer.category-grid .category-card-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* 아이콘 이미지 크기 */
.categoryContainer.category-grid .normalImg,
.categoryContainer.category-grid .activeImg {
  width: 17px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 기본 상태에서는 activeImg 숨김 (JS에서 토글) */
.categoryContainer.category-grid .activeImg {
  display: none;
}

/* 텍스트 라벨 */
.categoryContainer.category-grid .category-label {
  display: block;
  padding-top: 6px;
  font-size: 10px;
  transition: all 0.2s ease;
}

@media (min-width: 768px) {
  .categoryContainer.category-grid .category-label {
    font-size: 12px;
  }
}

/* ================================
   리뷰 박스 (inner-wrap review)
   ================================ */

.review-box {
  margin-bottom: 50px; /* mb-[50px] */
  max-height: 300px; /* max-h-[300px] */
  overflow-y: auto; /* overflow-y-scroll */
  background-color: #f5f0fd; /* bg-[#F5F0FD] */

  /* space-y-[15px] 대체 → flex column gap 적용 */
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

/* 스크롤바 스타일은 기존 전역 스타일 그대로 적용됨 */

/* ================================
   메인 배너 공통
   ================================ */

.main_mo_banner,
.main_pc_banner {
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
}

.main_mo_banner .event-banner-wrapper,
.main_pc_banner .event-banner-wrapper {
  border-radius: 6px;
  overflow: hidden;
}

.main_mo_banner .swiper-slide img,
.main_pc_banner .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* 모바일 배너 내 "참여방법" 버튼 위치 */
.banner-badge {
  position: absolute;
  top: 5px;
  right: 5px;
}

/* ================================
   고객 리뷰 박스
   ================================ */

.reviews-box {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

/* 리뷰 리스트 (axios로 append 되는 요소) */
.reviewList {
  border: 1px solid var(--main-color);
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #ffffff;
}

.reviewTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reviewTop .username {
  font-weight: 700;
}

.starWrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 80px;
  height: 15px;
}

.star {
  max-width: 15px;
  cursor: pointer;
}

/* ================================
   지표 섹션
   ================================ */

.hidden {
  display: none !important;
}

.indicatorSection.inner-wrap {
  padding-left: 0;
  padding-right: 0;
}

.indicatorSection .indicatorItem svg {
  width: 32px;
  height: 32px;
}

/* ================================
   주문하기 타이틀
   ================================ */

.titleArea-order {
  padding-top: 30px;
}

@media (min-width: 768px) {
  .titleArea-order {
    padding-top: 0;
  }
}

/* 주문 폼 래퍼 */
.order-form-wrap {
  margin-top: 10px;
}

/* ================================
   카테고리 그리드 (이미 일부 정의가 있다면 중복 없이 병합)
   ================================ */

.categoryContainer.category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .categoryContainer.category-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

.categoryContainer.category-grid .category-card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: #cecece;
  border-radius: 8px;
  transition: all 0.2s ease;
}

@media (min-width: 768px) {
  .categoryContainer.category-grid .category-card {
    height: 60px;
  }
}

.categoryContainer.category-grid .category-card-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.categoryContainer.category-grid .normalImg,
.categoryContainer.category-grid .activeImg {
  width: 17px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 기본 색상은 기존 JS에서 직접 변경 */
.categoryContainer.category-grid .category-label {
  display: block;
  padding-top: 6px;
  font-size: 10px;
  transition: all 0.2s ease;
}

@media (min-width: 768px) {
  .categoryContainer.category-grid .category-label {
    font-size: 12px;
  }
}

/* "기타" 탭에서 생성되는 추가 탭 */
.tab-extra {
  display: inline-block;
  background-color: #ffffff;
  padding: 5px 10px;
  text-align: center;
  margin-bottom: 6px;
  cursor: pointer;
  border-radius: 16px;
  font-size: 12px;
}

/* ================================
   로그인 팝업
   ================================ */

.popup-wrap.signin {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .popup-wrap.signin {
    top: 0;
    bottom: auto;
    padding: 40px 20px;
    background: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    z-index: 30000;
  }
}

.popup-header {
  position: relative;
  display: block;
  padding: 15px 0;
  z-index: 10000;
  margin-bottom: 1px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
}

.popup-header-inner {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup-header-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (min-width: 768px) {
  .popup-header {
    display: none;
  }
}

/* 로그인 팝업 내부 박스 */
.signin-inner {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  max-width: 900px;
  overflow: hidden;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .signin-inner {
    flex-direction: row;
    border-radius: 20px;
    z-index: 30001;
  }
}

/* PC용 로그인 배너 이미지 */
.signin-banner-pc {
  height: 600px;
  display: none;
}

.signin-banner-pc img {
  height: 100%;
  display: block;
}

@media (min-width: 768px) {
  .signin-banner-pc {
    display: block;
  }
}

/* 로그인 폼 컨테이너 */
.signin-content {
  margin-top: 10px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  .signin-content {
    margin-top: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    flex-basis: 55%;
  }
}

.user-form {
  position: relative;
  width: 100%;
}

/* 로그인 텍스트들 */
.signin-title {
  font-size: 20px;
  color: #999999;
}

.signin-subtitle {
  font-size: 18px;
  font-weight: 700;
  padding-top: 13px;
  padding-bottom: 25px;
  margin-bottom: 5px;
  border-bottom: 1px solid #000000;
}

@media (min-width: 768px) {
  .signin-subtitle {
    font-size: 24px;
  }
}

.signin-label {
  display: block;
  padding-top: 20px;
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
}

/* remember / signup 텍스트 */
.signin-checkbox {
  padding-top: 10px;
  font-size: 12px;
  font-weight: 500;
}

.signin-forgot {
  font-size: 12px;
}

.signin-signup-text {
  font-size: 12px;
  font-weight: 500;
  position: absolute;
  top: 0;
  right: 0;
}

/* ================================
   가이드 모달 리스트
   ================================ */

.modal-list-container {
  position: relative;
}

.prd-tags {
  display: flex;
  column-gap: 5px;
}

/* ================================
   베스트 리뷰 카드
   ================================ */

.bestReview-slide {
  border-radius: 20px;
  background-color: #f5f0fd;
  padding: 30px;
  height: 400px;
}

@media (min-width: 768px) {
  .bestReview-slide {
    height: auto;
  }
}

.bestReview-top {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.bestReview-user-img {
  width: 60px;
  height: 60px;
  display: block;
}

.bestReview-summarize {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--main-color);
}

.bestReview-user-info {
  font-size: 14px;
  margin-bottom: 25px;
}

.bestReview-user-info strong {
  font-size: 14px;
}

.bestReview-content {
  margin-bottom: 35px;
  font-size: 14px;
}

.bestReview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bestReview-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 8px 16px;
  background-color: #ffffff;
  border-radius: 30px;
  font-size: 12px;
}

/* ================================
   이벤트 배너 팝업 (PC)
   ================================ */

.event-banner-pagination {
  bottom: 45px;
}

.event-banner-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 40px;
}

.event-banner-btn {
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 간단한 shadow 유틸 (이전에 tailwind shadow 대체) */
.shadow {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}

/* 우측 하단 플로팅 카카오 배너 */
.floatingBanner {
  position: fixed;
  right: 20px;
  bottom: 80px; /* 모바일 기준 위치 */
  width: 60px;
  z-index: 50000;
  border-radius: 9999px; /* 동그란 버튼 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* PC에서 하단 여백 조정 (md:bottom-[27px] 대체) */
@media (min-width: 768px) {
  .floatingBanner {
    bottom: 27px;
  }
}

/* 이미지가 버튼 안에 꽉 차도록 */
.floatingBanner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== 알림(토스트) ===== */
.alert-fixed-right {
  position: fixed;
  top: 70px;
  right: 0;
  z-index: 10000;
}
.alert-title-margin {
  margin-bottom: 5px;
}
@media (min-width: 768px) {
  .alert-fixed-right {
    top: 20px;
    right: 45px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }
}

/* ===== 메인 배너 ===== */
.main-banner {
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
}
.banner-swiper {
  position: relative;
}
.banner-slide {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.banner-badge {
  position: absolute;
  top: 5px;
  right: 5px;
}
.banner-image-full {
  width: 100%;
  display: block;
}

/* ===== 타이틀 영역 ===== */
.titleArea-mobile {
  padding-bottom: 10px;
}
.titleArea-mobile-auth {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.titleArea-order {
  padding-top: 30px;
}
@media (min-width: 768px) {
  .titleArea-order {
    padding-top: 0;
  }
}
.titleArea-desktop {
  padding-top: 30px;
  padding-bottom: 10px;
}
.titleArea-desktop-auth {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ===== 리뷰 리스트 박스 ===== */
.review-list {
  background-color: #f5f0fd;
  overflow-y: auto;
  border-radius: 4px;
}
.review-list-mobile {
  max-height: 200px;
}
.review-list-desktop {
  max-height: 300px;
  margin-bottom: 50px;
}

/* ===== 지표 아이콘 ===== */
.indicator-icon {
  width: 32px;
  height: 32px;
}

/* ===== 카테고리 그리드 ===== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 10px 0;
}
@media (min-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

.category-item {
  background-color: #cecece;
  width: 100%;
  height: 50px;
  border-radius: 8px;
  text-align: center;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
@media (min-width: 768px) {
  .category-item {
    height: 60px;
  }
}
.category-item-shadow {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

.category-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.category-icon {
  width: 17px;
  display: block;
  margin: 0 auto;
}
.category-icon-active {
  display: none;
}
.category-label {
  font-size: 10px;
  padding-top: 6px;
  transition: color 0.2s ease;
}
@media (min-width: 768px) {
  .category-label {
    font-size: 12px;
  }

  .marquee-seo {
    margin-bottom: 15px;
  }
}

/* ===== 탭 리스트 ===== */
.tab-body-list {
  background: #fafafa;
  padding: 10px;
  border-radius: 4px;
}
.tab-list {
  display: inline-block;
  background: #ffffff;
  padding: 5px 10px;
  text-align: center;
  margin-bottom: 6px;
  margin-right: 6px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}
.tab-list.on {
  background: var(--main-color);
  color: #fff;
}

/* 주문 폼 wrapper */
.inner-wrap-order-form {
  margin-top: 10px;
}

/* ===== 경고 영역 / 가이드 ===== */
.warning-container {
  padding-top: 0;
  padding-bottom: 10px;
}
.warning-title {
  padding-bottom: 10px;
}
.modal-wrapper-guide {
  padding-bottom: 60px;
}

/* 가이드 리스트 */
.modal-list-item {
  position: relative;
}
.prd_wrapper {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

/* 모달 아이콘 */
.modal-on-svg {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
}

/* ===== 베스트 리뷰 카드 ===== */
.best-review-swiper {
  position: relative;
}
.best-review-card {
  border-radius: 20px;
  background-color: #f5f0fd;
  padding: 30px;
  height: 400px;
}
@media (min-width: 768px) {
  .best-review-card {
    height: auto;
  }
}
.best-review-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.best-review-avatar {
  width: 60px;
  height: 60px;
}
.best-review-title {
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;
  color: var(--main-color);
}
.best-review-user {
  font-size: 14px;
  margin-bottom: 25px;
}
.best-review-content {
  margin-bottom: 35px;
}
.seo-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 8px 16px;
  background: #fff;
  border-radius: 30px;
}

/* ===== 리뷰 카드 (실제 사용자 리뷰 리스트) ===== */
.review-card {
  background: #fff;
  border: 1px solid var(--main-color);
  padding: 5px 10px;
  border-radius: 5px;
}
.review-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.review-card-username {
  font-weight: bold;
}
.review-card-stars {
  display: grid;
  grid-template-columns: repeat(5, auto);
  width: 80px;
  height: 15px;
}
.star {
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.star-active {
  fill: var(--main-color);
  stroke: var(--main-color);
  stroke-width: 1.5;
}
.star-empty {
  fill: none;
  stroke: #f5f0fd;
  stroke-width: 1.5;
}
.review-card-content {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 300;
}

/* ===== 모달 공통 ===== */
.modal-container.info .content.modal-info-content {
  border: 0 !important;
}

/* 리뷰 모달 레이아웃 */
.rateWrapper {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 8px;
  margin-bottom: 20px;
  justify-content: center;
}
.review-modal-content {
  border: 0 !important;
  margin-bottom: 10px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-modal-input-username {
  color: #999999 !important;
}
.review-modal-textarea {
  height: 100px;
}
.reviewWarning {
  font-size: 10px;
  color: var(--main-color);
  display: block;
}
.review-modal-buttons {
  display: flex;
  gap: 10px;
  padding-top: 10px;
}
.review-btn-cancel {
  background: #fff !important;
  color: #333 !important;
  border: 1px solid rgb(224, 224, 224) !important;
}

/* ===== 이벤트 팝업 배너 ===== */
.popup-swiper-pagination {
  bottom: 45px;
}
.event-banner-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 40px;
}
.event-banner-button {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 필요하면 hidden 정의 (Tailwind 안 쓸 때) */
.hidden {
  display: none !important;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 기존 CSS 파일의 맨 아래에 이 파일의 내용을 추가하세요. 업로드된 픽셀 폰트 주소가 연결되어 있습니다. */
/* 라이크스토어 창업센터 · 문장 끝 픽셀 CLICK / 투명 라이키 */
@font-face {
  font-family: "LSB Tiny5";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://storage.perfectcdn.com/gtviqg/73l8jg6392hobzmx.woff")
    format("woff");
}
#likestore-startup-entry {
  grid-column: span 3;
  min-width: 0;
  container-type: inline-size;
}
#likestore-startup-entry .ls-startup-button,
#likestore-startup-entry .ls-startup-button * {
  box-sizing: border-box;
}
#likestore-startup-entry .ls-startup-button {
  --lsb-avatar-w: 34px;
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 6px 4px;
  overflow: hidden;
  border: 1px solid #7850c9;
  border-radius: 8px;
  color: #fff;
  background: #091423;
  box-shadow:
    0 2px 7px #49129322,
    inset 0 0 12px #805aff18;
  font-family:
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans CJK KR", "Malgun Gothic", sans-serif;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
#likestore-startup-entry .ls-startup-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 15%, #7955df42, transparent 65%),
    linear-gradient(180deg, #ffffff0d, transparent 48%);
}
#likestore-startup-entry .ls-startup-button::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -48%;
  width: 36%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    #ffffff08 24%,
    #ffffff50 50%,
    #ffffff0c 72%,
    transparent 100%
  );
  transform: translateX(0) skewX(-18deg);
}
#likestore-startup-entry .ls-startup-button.is-shining::after {
  animation: lsb-sweep 950ms ease-out both;
}
@keyframes lsb-sweep {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }
  12%,
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(470%) skewX(-18deg);
  }
}
#likestore-startup-entry .ls-startup-button:focus-visible {
  outline: 3px solid #9d69ff;
  outline-offset: 3px;
}
#likestore-startup-entry .ls-startup-copy {
  position: relative;
  z-index: 2;
  display: block;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.045em;
}
#likestore-startup-entry .ls-startup-lines {
  display: flex;
  flex-direction: column;
  min-height: 48px;
}
#likestore-startup-entry .ls-startup-line {
  position: relative;
  display: flex;
  align-items: baseline;
  white-space: pre;
}
#likestore-startup-entry .ls-startup-line:not(:first-child) {
  max-width: calc(100% - var(--lsb-avatar-w) - 1px);
}
#likestore-startup-entry .ls-startup-word {
  display: grid;
}
#likestore-startup-entry .ls-startup-reserve,
#likestore-startup-entry .ls-startup-typed {
  grid-area: 1 / 1;
}
#likestore-startup-entry .ls-startup-reserve {
  visibility: hidden;
}
#likestore-startup-entry .ls-startup-line:last-child {
  color: #ded0ff;
}
#likestore-startup-entry .ls-startup-caret {
  display: inline-block;
  width: 1px;
  height: 0.88em;
  margin-left: 1px;
  background: #c8a5ff;
  vertical-align: -0.06em;
  opacity: 0;
}
#likestore-startup-entry .ls-startup-button.is-typing .ls-startup-caret {
  opacity: 1;
}
#likestore-startup-entry .ls-startup-visual {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 1;
  display: block;
  width: var(--lsb-avatar-w);
  aspect-ratio: 192 / 148;
}
#likestore-startup-entry .ls-startup-media,
#likestore-startup-entry .ls-startup-media picture,
#likestore-startup-entry .ls-startup-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#likestore-startup-entry .ls-startup-click {
  display: inline-block;
  flex: 0 0 auto;
  margin-left: 3px;
  color: #dcc8ff;
  font-family: "LSB Tiny5", monospace;
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  white-space: nowrap;
}
#likestore-startup-entry
  .ls-startup-button[data-lsb-initialized]
  .ls-startup-click {
  opacity: 0;
}
#likestore-startup-entry .ls-startup-button.is-ready .ls-startup-click {
  opacity: 1;
  animation: lsb-click 1400ms ease-in-out infinite;
}
@keyframes lsb-click {
  0%,
  100% {
    opacity: 1;
  }
  40%,
  60% {
    opacity: 0;
  }
}
#likestore-startup-entry .ls-startup-button.is-paused::after,
#likestore-startup-entry .ls-startup-button.is-paused .ls-startup-click {
  animation-play-state: paused;
}
@container (min-width: 145px) {
  #likestore-startup-entry .ls-startup-button {
    --lsb-avatar-w: 48px;
    min-height: 68px;
    padding-inline: 5px;
  }
}
@container (min-width: 160px) {
  #likestore-startup-entry .ls-startup-button {
    --lsb-avatar-w: 54px;
    min-height: 70px;
  }
}
@container (min-width: 180px) {
  #likestore-startup-entry .ls-startup-button {
    --lsb-avatar-w: 64px;
    min-height: 80px;
    padding-inline: 7px;
  }
  #likestore-startup-entry .ls-startup-copy {
    font-size: 12px;
    line-height: 18px;
  }
}
@container (min-width: 280px) {
  #likestore-startup-entry .ls-startup-button {
    --lsb-avatar-w: 112px;
    min-height: 138px;
    padding: 12px;
    border-radius: 15px;
  }
  #likestore-startup-entry .ls-startup-copy {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.04em;
  }
  #likestore-startup-entry .ls-startup-lines {
    min-height: 78px;
  }
  #likestore-startup-entry .ls-startup-visual {
    right: 9px;
    bottom: 8px;
  }
  #likestore-startup-entry .ls-startup-click {
    font-size: 20px;
    margin-left: 7px;
  }
}
@container (min-width: 350px) {
  #likestore-startup-entry .ls-startup-button {
    --lsb-avatar-w: 132px;
    min-height: 146px;
    padding: 14px 16px;
  }
  #likestore-startup-entry .ls-startup-copy {
    font-size: 20px;
    line-height: 29px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #likestore-startup-entry .ls-startup-button::after,
  #likestore-startup-entry .ls-startup-caret {
    display: none;
  }
  #likestore-startup-entry
    .ls-startup-button[data-lsb-initialized]
    .ls-startup-click {
    animation: none;
    opacity: 1;
  }
}

/* 기존 상품 카테고리 클래스(.category)를 사용하지 않아 주문 선택과 분리됩니다. */
#likestore-startup-entry {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  align-self: start;
}
/* 기존 md:grid-cols-9와 같은 768px 분기: 이 버튼은 모바일의 빈 세 칸에만 표시합니다. */
@media (min-width: 768px) {
  #likestore-startup-entry {
    display: none;
  }
}

/* 기존 CSS 파일의 맨 아래에 추가하세요. HTML과 JavaScript는 그대로 둡니다. */
/* 카테고리 버튼과 높이 50px 통일. 기존 display: none 공개 설정은 유지합니다. */
#likestore-startup-entry {
  box-sizing: border-box;
  height: 50px;
  min-height: 0;
  max-height: 50px;
  align-self: start;
}

#likestore-startup-entry .ls-startup-button {
  --lsb-avatar-w: 62px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 3px 5px;
  border-radius: 8px;
}

#likestore-startup-entry .ls-startup-copy {
  width: 100%;
  font-size: 10px;
  font-size: clamp(9px, 6.2cqi, 11px);
  line-height: 14px;
  letter-spacing: -0.045em;
}

#likestore-startup-entry .ls-startup-lines {
  min-height: 0;
}

#likestore-startup-entry .ls-startup-line:not(:first-child) {
  max-width: none;
}

/* 라이키를 상단으로 올리고, 버튼 안쪽 높이 안에서 비율을 유지합니다. */
#likestore-startup-entry .ls-startup-visual {
  top: 0;
  right: 0;
  bottom: auto;
  width: var(--lsb-avatar-w);
  height: 100%;
  aspect-ratio: auto;
}

#likestore-startup-entry .ls-startup-media img {
  object-fit: contain;
  object-position: right top;
}

#likestore-startup-entry .ls-startup-click {
  font-size: 12px;
  margin-left: 3px;
}

/* 폭이 좁은 화면에서는 문구와 라이키 사이 간격을 확보합니다. */
@container (max-width: 145px) {
  #likestore-startup-entry .ls-startup-button {
    --lsb-avatar-w: 56px;
  }
}

/* CLICK에만 픽셀 폰트 적용 */
#likestore-startup-entry .ls-startup-click {
  font-family: "LSB Tiny5", monospace !important;
}

/* Tiny5 font license:
Copyright 2022-2024 The Tiny5 Project Authors (https://github.com/Gissio/font_tiny5)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded, 
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

*/