@charset "UTF-8";/**
 * Swiper 11.1.12
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: September 1, 2024
 */

/* FONT_START */
@font-face {
  font-family: 'swiper-icons';
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
  font-weight: 400;
  font-style: normal;
}
/* FONT_END */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
  transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-lock {
  display: none;
}
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}
/* Navigation font end */
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform,
        200ms top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
        200ms left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}
:root {
  /*
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
  */
}
.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-vertical > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-vertical {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
/* Zoom container styles start */
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Zoom container styles end */
.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}
/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper.swiper-cube {
  overflow: visible;
}
.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
/* Cube slide shadows start */
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Cube slide shadows end */
.swiper.swiper-flip {
  overflow: visible;
}
.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
/* Flip slide shadows start */
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Flip slide shadows end */
.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}
.swiper.swiper-cards {
  overflow: visible;
}
.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
}

/*-----------------------------*/
/*    Root    */
/*-----------------------------*/
/* color palette */
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-red: #ff0000;
  --color-red-50: #fff0f1;
  --color-red-100: #ffddde;
  --color-red-200: #ffc1c4;
  --color-red-300: #ff969b;
  --color-red-400: #ff5a61;
  --color-red-500: #ff333c;
  --color-red-600: #fb1822;
  --color-red-700: #d3020b;
  --color-red-800: #ae060d;
  --color-red-900: #900c12;
  --color-red-950: #4f0003;
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffeed4;
  --color-orange-200: #ffd8a8;
  --color-orange-300: #ffbc71;
  --color-orange-400: #ff8d29;
  --color-orange-500: #fe7611;
  --color-orange-600: #ef5b07;
  --color-orange-700: #c64208;
  --color-orange-800: #9d350f;
  --color-orange-900: #7e2e10;
  --color-orange-950: #441406;
  --color-yellow-50: #fffae6;
  --color-yellow-100: #FFFCCB;
  --color-yellow-200: #FFF68F;
  --color-yellow-300: #FFEC72;
  --color-yellow-400: #ffdc1b;
  --color-yellow-500: #ffc00e;
  --color-yellow-600: #e29100;
  --color-yellow-700: #bb6602;
  --color-yellow-800: #984f08;
  --color-yellow-900: #7c400b;
  --color-yellow-950: #482100;
  --color-green-50: #ECFDED;
  --color-green-100: #D3FAD1;
  --color-green-200: #baf4bd;
  --color-green-300: #8DEEA2;
  --color-green-400: #5DE48C;
  --color-green-500: #10c177;
  --color-green-600: #04975c;
  --color-green-700: #04784d;
  --color-green-800: #065f3e;
  --color-green-900: #064e35;
  --color-green-950: #022c1e;
  --color-mint-50: #DDF9F7;
  --color-mint-100: #C5F4F0;
  --color-mint-200: #95E9E2;
  --color-mint-300: #64DED4;
  --color-mint-400: #34D3C6;
  --color-mint-500: #04c8b8;
  --color-mint-600: #00a198;
  --color-mint-700: #058079;
  --color-mint-800: #096663;
  --color-mint-900: #0d5451;
  --color-mint-950: #003333;
  --color-skyblue-50: #eff9ff;
  --color-skyblue-100: #def1ff;
  --color-skyblue-200: #b6e5ff;
  --color-skyblue-300: #75d3ff;
  --color-skyblue-400: #2cbdff;
  --color-skyblue-500: #00a3f5;
  --color-skyblue-600: #0083d4;
  --color-skyblue-700: #0068ab;
  --color-skyblue-800: #00588d;
  --color-skyblue-900: #064974;
  --color-skyblue-950: #042e4d;
  --color-blue-50: #eef6ff;
  --color-blue-100: #d9eaff;
  --color-blue-200: #bcdbff;
  --color-blue-300: #8ec5ff;
  --color-blue-400: #59a4ff;
  --color-blue-500: #3d87ff;
  --color-blue-600: #1b5ff5;
  --color-blue-700: #144ae1;
  --color-blue-800: #173cb6;
  --color-blue-900: #19378f;
  --color-blue-950: #142357;
  --color-purple-50: #f5f2ff;
  --color-purple-100: #ebe8ff;
  --color-purple-200: #dad4ff;
  --color-purple-300: #c0b1ff;
  --color-purple-400: #a185ff;
  --color-purple-500: #8a5cff;
  --color-purple-600: #7430f7;
  --color-purple-700: #661ee3;
  --color-purple-800: #5518bf;
  --color-purple-900: #47169c;
  --color-purple-950: #2b0b6a;
  --color-violet-50: #fcf5fe;
  --color-violet-100: #f8ebfc;
  --color-violet-200: #f1d5f9;
  --color-violet-300: #e7b4f3;
  --color-violet-400: #da88ea;
  --color-violet-500: #c75bdc;
  --color-violet-600: #ad3abf;
  --color-violet-700: #902d9e;
  --color-violet-800: #782781;
  --color-violet-900: #65246b;
  --color-violet-950: #400c46;
  --color-pink-50: #fff0f1;
  --color-pink-100: #ffe2e5;
  --color-pink-200: #ffcad2;
  --color-pink-300: #ff9fac;
  --color-pink-400: #ff6981;
  --color-pink-500: #ff4769;
  --color-pink-600: #ed1144;
  --color-pink-700: #c8083a;
  --color-pink-800: #a80937;
  --color-pink-900: #8f0c36;
  --color-pink-950: #500118;
  --color-gray-50: #f0f3f5;
  --color-gray-100: #dee1e4;
  --color-gray-200: #c8cccf;
  --color-gray-300: #b2b6ba;
  --color-gray-400: #9da1a7;
  --color-gray-500: #898d93;
  --color-gray-600: #6A6F77;
  --color-gray-700: #5f646c;
  --color-gray-800: #4a4f57;
  --color-gray-900: #353b44;
  --color-gray-950: #222832;
  --color-dim-bk-20: rgba(0, 0, 0, 0.2);
  --color-dim-bk-40: rgba(0, 0, 0, 0.4);
  --color-dim-bk-80: rgba(0, 0, 0, 0.8);
  --color-dim-wt-20: rgba(255, 255, 255, 0.2);
  --color-dim-wt-40: rgba(255, 255, 255, 0.4);
  --color-dim-wt-80: rgba(255, 255, 255, 0.8);
  --color-dim-nv-05: rgba(10, 31, 65, 0.05);
  --color-dim-pk-40: rgba(255, 208, 211, 0.4);
  --color-fg-brand-solid: var(--color-red-600, #fb1822);
  --color-fg-brand-solid-pressed: var(--color-red-600, #fb1822);
  --color-fg-neutral-solid: var(--color-gray-950, #222832);
  --color-fg-neutral-subtle: var(--color-gray-700, #5f646c);
  --color-fg-neutral-muted: var(--color-gray-600, #6A6F77);
  --color-fg-neutral-muted-weak: var(--color-gray-400, #9da1a7);
  --color-fg-neutral-weak: var(--color-gray-300, #b2b6ba);
  --color-fg-neutral-disabled: var(--color-gray-200, #c8cccf);
  --color-fg-neutral-inverted: var(--color-white, #ffffff);
  --color-fg-semantic-success: var(--color-green-500, #10C177);
  --color-fg-semantic-info: var(--color-blue-500, #3D87FF);
  --color-fg-semantic-warning: var(--color-red-600, #FB1822);
  --color-fg-accent-red-solid: var(--color-red-600, #fb1822);
  --color-fg-accent-red-solid-800: var(--color-red-800, #ae060d);
  --color-fg-accent-orange-solid: var(--color-orange-500, #fe7611);
  --color-fg-accent-orange-solid-600: var(--color-orange-600, #EF5B07);
  --color-fg-accent-yellow-solid: var(--color-yellow-500, #ffc00e);
  --color-fg-accent-green-solid: var(--color-green-500, #10c177);
  --color-fg-accent-mint-solid: var(--color-mint-500, #04c8b8);
  --color-fg-accent-skyblue-solid: var(--color-skyblue-500, #00a3f5);
  --color-fg-accent-blue-solid: var(--color-blue-500, #3d87ff);
  --color-fg-accent-purple-solid: var(--color-purple-500, #8a5cff);
  --color-fg-accent-violet-solid: var(--color-violet-500, #c75bdc);
  --color-fg-accent-pink-solid: var(--color-pink-500, #ff4769);
  --color-bg-brand-solid: var(--color-red-600, #fb1822);
  --color-bg-brand-weak: var(--color-red-50, #fff0f1);
  --color-bg-neutral-solid: var(--color-gray-950, #222832);
  --color-bg-neutral-subtle: var(--color-gray-800, #4a4f57);
  --color-bg-neutral-muted: var(--color-gray-400, #9da1a7);
  --color-bg-neutral-muted-weak: var(--color-gray-100, #dee1e4);
  --color-bg-neutral-weak: var(--color-gray-50, #f0f3f5);
  --color-bg-neutral-disabled: var(--color-gray-100, #dee1e4);
  --color-bg-neutral-inverted: var(--color-white, #ffffff);
  --color-bg-warning-warning: var(--color-red-50, #fff0f1);
  --color-bg-danger-danger: var(--color-red-500, #ff333c);
  --color-bg-accent-red-weak: var(--color-red-50, #fff0f1);
  --color-bg-accent-orange-weak: var(--color-orange-50, #fff7ed);
  --color-bg-accent-yellow-weak: var(--color-yellow-50, #fffae6);
  --color-bg-accent-green-weak: var(--color-green-50, #ECFDED);
  --color-bg-accent-mint-weak: var(--color-mint-50, #DDF9F7);
  --color-bg-accent-skyblue-weak: var(--color-skyblue-50, #eff9ff);
  --color-bg-accent-blue-weak: var(--color-blue-50, #eef6ff);
  --color-bg-accent-purple-weak: var(--color-purple-50, #f5f2ff);
  --color-bg-accent-violet-weak: var(--color-violet-50, #fcf5fe);
  --color-bg-accent-pink-weak: var(--color-pink-50, #fff0f1);
  --color-bg-button-gray: rgba(5, 55, 88, 0.06);
  --color-bg-button-pink: var(--color-dim-pk-40, rgba(255, 208, 211, 0.4));
  --color-bg-banner-default-white: var(--white, #ffffff);
  --color-bg-banner-default-gray-50: rgba(5, 55, 88, 0.06);
  --color-bg-banner-default-gray-100: #E2E8EC;
  --color-bg-banner-default-gray-900: var(--color-gray-900, #353b44);
  --color-bg-banner-lh-red: var(--color-red-100, #ffddde);
  --color-bg-banner-lh-orange: var(--color-orange-200, #ffd8a8);
  --color-bg-banner-lh-yellow: var(--color-yellow-200, #fff68f);
  --color-bg-banner-lh-green: var(--color-green-200, #baf4bd);
  --color-bg-banner-lh-mint: var(--color-mint-200, #95E9E2);
  --color-bg-banner-lh-skyblue: var(--color-skyblue-200, #b6e5ff);
  --color-bg-banner-lh-blue: var(--color-blue-200, #bcdbff);
  --color-bg-banner-lh-purple: var(--color-purple-200, #dad4ff);
  --color-bg-banner-lh-violet: var(--color-violet-200, #f1d5f9);
  --color-bg-banner-lh-pink: var(--color-pink-200, #ffcad2);
  --color-bg-banner-dv-red: var(--color-red-800, #ae060d);
  --color-bg-banner-dv-green: var(--color-green-800, #065f3e);
  --color-bg-banner-dv-mint: var(--color-mint-800, #096663);
  --color-bg-banner-dv-skyblue: var(--color-skyblue-800, #00588d);
  --color-bg-banner-dv-blue: var(--color-blue-800, #173cb6);
  --color-bg-banner-dv-purple: var(--color-purple-800, #5518bf);
  --color-bg-banner-dv-violet: var(--color-violet-900, #65246b);
  --color-bg-banner-dv-black: var(--color-gray-900, #353b44);
  --color-bg-overlay-bk-thin: var(--color-dim-bk-20, rgba(0, 0, 0, 0.2));
  --color-bg-overlay-bk-basic: var(--color-dim-bk-40, rgba(0, 0, 0, 0.4));
  --color-bg-overlay-bk-thick: var(--color-dim-bk-80, rgba(0, 0, 0, 0.08));
  --color-bg-overlay-wt-thin: var(--color-dim-wt-20, rgba(255, 255, 255, 0.2));
  --color-bg-overlay-wt-basic: var(--color-dim-wt-40, rgba(255, 255, 255, 0.4));
  --color-bg-overlay-wt-thick: var(--color-dim-wt-80, rgba(255, 255, 255, 0.8));
  --color-icon-brand-solid: var(--color-red-600, #fb1822);
  --color-icon-neutral-solid: var(--color-gray-950, #222832);
  --color-icon-neutral-subtle: var(--color-gray-500, #898d93);
  --color-icon-neutral-muted: var(--color-gray-300, #b2b6ba);
  --color-icon-neutral-muted-weak: var(--color-gray-200, #c8cccf);
  --color-icon-neutral-weak: var(--color-gray-50, #f0f3f5);
  --color-icon-neutral-inverted: var(--color-white, #ffffff);
  --color-border-brand-solid: var(--color-red-600, #fb1822);
  --color-border-brand-weak: var(--color-red-50, #fff0f1);
  --color-border-neutral-solid: var(--color-gray-950, #222832);
  --color-border-neutral-subtle: var(--color-gray-500, #898d93);
  --color-border-neutral-muted: var(--color-gray-200, #c8cccf);
  --color-border-neutral-muted-weak: var(--color-gray-100, #dee1e4);
  --color-border-neutral-inverted: var(--color-white, #ffffff);
  --color-border-neutral-weak-pink: var(--color-red-100, #ffddde);
  --color-border-neutral-line: var(--color-dim-bk-08, rgba(0, 0, 0, 0.08));
  --color-gradient-red: linear-gradient(
    129deg,
    rgba(255, 110, 132, 0.4) 17%,
    rgba(237, 50, 53, 0.4) 89.23%
  );
  --color-gradient-red-thin: rgba(251, 24, 34, 0.10);
  --color-gradient-red-basic: rgba(251, 24, 34, 0.30);
  --color-gradient-special: linear-gradient(114deg, #C75BDC 0%, #FF4769 50%, #FB1822 100%);
  --color-gradient-special-banner: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 80%), linear-gradient(90deg, #FFF7EF 0%, #F5E5F7 100%);
  --color-gradient-special-page: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%), linear-gradient(22deg, #FFF7EF 35.81%, #F5E5F7 105.95%) ;
}

/* font style */
:root {
  /* default font styles */
  --font-heading-1-size: 2rem;
  --font-heading-1-weight: 600;
  --font-heading-1-line-height: 1.4;
  --font-heading-1-letter-spacing: -0.005em;
  --font-heading-2-size: 1.75rem;
  --font-heading-2-weight: 600;
  --font-heading-2-line-height: 1.4;
  --font-heading-2-letter-spacing: -0.005em;
  --font-heading-3-size: 1.5rem;
  --font-heading-3-weight: 600;
  --font-heading-3-line-height: 1.4;
  --font-heading-3-letter-spacing: -0.005em;
  --font-heading-4-size: 1.25rem;
  --font-heading-4-weight: 600;
  --font-heading-4-line-height: 1.4;
  --font-heading-4-letter-spacing: -0.005em;
  --font-title-1-size: 1.125rem;
  --font-title-1-sb-weight: 600;
  --font-title-1--m-weight: 500;
  --font-title-1-line-height: 1.4;
  --font-title-1-letter-spacing: -0.005em;
  --font-title-2-size: 1rem;
  --font-title-2-sb-weight: 600;
  --font-title-2-m-weight: 500;
  --font-title-2-line-height: 1.4;
  --font-title-2-letter-spacing: -0.005em;
  --font-title-3-size: 0.875rem;
  --font-title-3-weight: 600;
  --font-title-3-line-height: 1.4;
  --font-title-3-letter-spacing: -0.005em;
  --font-title-4-size: 0.8125rem;
  --font-title-4-weight: 600;
  --font-title-4-line-height: 1.4;
  --font-title-4-letter-spacing: -0.005em;
  --font-body-1-size: 1.125rem;
  --font-body-1-sb-weight: 600;
  --font-body-1-m-weight: 500;
  --font-body-1-line-height: 1.5;
  --font-body-1-letter-spacing: -0.005em;
  --font-body-2-size: 1rem;
  --font-body-2-m-weight: 500;
  --font-body-2-r-weight: 400;
  --font-body-2-line-height: 1.5;
  --font-body-2-letter-spacing: -0.005em;
  --font-body-3-size: 0.875rem;
  --font-body-3-m-weight: 500;
  --font-body-3-r-weight: 400;
  --font-body-3-line-height: 1.5;
  --font-body-3-letter-spacing: -0.005em;
  --font-caption-1-size: 0.875rem;
  --font-caption-1-m-weight: 500;
  --font-caption-1-r-weight: 400;
  --font-caption-1-line-height: 1.4;
  --font-caption-1-letter-spacing: -0.005em;
  --font-caption-2-size: 0.8125rem;
  --font-caption-2-m-weight: 500;
  --font-caption-2-r-weight: 400;
  --font-caption-2-line-height: 1.4;
  --font-caption-2-letter-spacing: -0.005em;
  --font-caption-3-size: 0.75rem;
  --font-caption-3-m-weight: 500;
  --font-caption-3-r-weight: 400;
  --font-caption-3-line-height: 1.4;
  --font-caption-3-letter-spacing: -0.005em;
  --font-caption-4-size: 0.6875rem;
  --font-caption-4-sb-weight: 600;
  --font-caption-4-m-weight: 500;
  --font-caption-4-line-height: 1.4;
  --font-caption-4-letter-spacing: -0.005em;
  /* banner font styles */
  --banner-font-heading-1-size: min(7.1795vw, 3rem);
  --banner-font-heading-1-weight: 600;
  --banner-font-heading-1-line-height: 1.4;
  --banner-font-heading-1-letter-spacing: -0.005em;
  --banner-font-heading-2-size: min(6.1538vw, 2.5rem);
  --banner-font-heading-2-weight: 600;
  --banner-font-heading-2-line-height: 1.4;
  --banner-font-heading-2-letter-spacing: -0.005em;
  --banner-font-heading-3-size: min(5.1282vw, 2.5rem);
  --banner-font-heading-3-weight: 600;
  --banner-font-heading-3-line-height: 1.4;
  --banner-font-heading-3-letter-spacing: -0.005em;
  --banner-font-heading-4-size: min(4.6154vw, 2rem);
  --banner-font-heading-4-weight: 600;
  --banner-font-heading-4-line-height: 1.4;
  --banner-font-heading-4-letter-spacing: -0.005em;
  --banner-font-caption-1-size: min(3.5897vw, 1.5rem);
  --banner-font-caption-1-weight: 500;
  --banner-font-caption-1-line-height: 1.4;
  --banner-font-caption-1-letter-spacing: -0.005em;
  --banner-font-caption-2-size: min(3.5897vw, 1.5rem);
  --banner-font-caption-2-weight: 400;
  --banner-font-caption-2-line-height: 1.4;
  --banner-font-caption-2-letter-spacing: -0.005em;
  --banner-font-caption-3-size: min(3.0769vw, 1.25rem);
  --banner-font-caption-3-weight: 500;
  --banner-font-caption-3-line-height: 1.4;
  --banner-font-caption-3-letter-spacing: -0.005em;
}

/*-----------------------------*/
/*    Reset    */
/*-----------------------------*/
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
/*  Reset default styles for common elements */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  vertical-align: baseline;
  word-break: keep-all;
}

* {
  margin: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
  font-size: 100%;
}

body {
  color: var(--color-fg-neutral-solid, #222832);
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
  color: inherit;
}

/* 9. Reset list styles */
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 10. Reset button styles */
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
}

/* 11. Reset input styles */
input {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  width: 100%;
  border-radius: 0;
}
input:focus {
  outline: none;
}

i {
  font-style: normal;
}

svg {
  display: block;
}

/* 엘리먼트 숨김 공통 클래스 */
.hidden {
  display: none !important;
}

body[data-isblock=true] {
  position: relative;
}
body[data-isblock=true]::after {
  content: "사용하지 않은 페이지입니다.";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  padding: 30px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  color: red;
  font-size: 24px;
  display: flex;
  justify-content: center;
}

/*-----------------------------*/
/*    Typography    */
/*-----------------------------*/
@font-face {
  font-family: "Pretendard";
  src: url("/WebContent/assets/fonts/Pretendard-Regular.woff2") format("woff2"), url("/WebContent/assets/fonts/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/WebContent/assets/fonts/Pretendard-Medium.woff2") format("woff2"), url("/WebContent/assets/fonts/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/WebContent/assets/fonts/Pretendard-SemiBold.woff2") format("woff2"), url("/WebContent/assets/fonts/Pretendard-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}
.heading-1 {
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
}

.heading-2 {
  font-size: var(--font-heading-2-size, 1.75rem);
  font-weight: var(--font-heading-2-weight, 600);
  line-height: var(--font-heading-2-line-height, 1.4);
  letter-spacing: var(--font-heading-2-letter-spacing, -0.005em);
}

.heading-3 {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}

.heading-4 {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}

.title-1-sb {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}

.title-1-m {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1--m-weight, 500);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}

.title-2-sb {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}

.title-2-m {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}

.title-3 {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}

.title-4 {
  font-size: var(--font-title-4-size, 0.8125rem);
  font-weight: var(--font-title-4-weight, 600);
  line-height: var(--font-title-4-line-height, 1.4);
  letter-spacing: var(--font-title-4-letter-spacing, -0.005em);
}

.body-1-sb {
  font-size: var(--font-body-1-size, 1.125rem);
  font-weight: var(--font-body-1-sb-weight, 600);
  line-height: var(--font-body-1-line-height, 1.5);
  letter-spacing: var(--font-body-1-letter-spacing, -0.005em);
}

.body-1-m {
  font-size: var(--font-body-1-size, 1.125rem);
  font-weight: var(--font-body-1-m-weight, 500);
  line-height: var(--font-body-1-line-height, 1.5);
  letter-spacing: var(--font-body-1-letter-spacing, -0.005em);
}

.body-2-m {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}

.body-2-r {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}

.body-3-m {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}

.body-3-r {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}

.caption-1-m {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}

.caption-1-r {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}

.caption-2-m {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}

.caption-2-r {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-r-weight, 400);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}

.caption-3-m {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}

.caption-3-r {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-r-weight, 400);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}

.caption-4-sb {
  font-size: var(--font-caption-4-size, 0.6875rem);
  font-weight: var(--font-caption-4-sb-weight, 600);
  line-height: var(--font-caption-4-line-height, 1.4);
  letter-spacing: var(--font-caption-4-letter-spacing, -0.005em);
}

.caption-4-m {
  font-size: var(--font-caption-4-size, 0.6875rem);
  font-weight: var(--font-caption-4-m-weight, 500);
  line-height: var(--font-caption-4-line-height, 1.4);
  letter-spacing: var(--font-caption-4-letter-spacing, -0.005em);
}

.banner-heading-1 {
  font-size: var(--banner-font-heading-1-size, min(7.1795vw, 3rem));
  font-weight: var(--banner-font-heading-1-weight, 600);
  line-height: var(--banner-font-heading-1-line-height, 1.4);
  letter-spacing: var(--banner-font-heading-1-letter-spacing, -0.005em);
}

.banner-heading-2 {
  font-size: var(--banner-font-heading-2-size, min(6.1538vw, 2.5rem));
  font-weight: var(--banner-font-heading-2-weight, 600);
  line-height: var(--banner-font-heading-2-line-height, 1.4);
  letter-spacing: var(--banner-font-heading-2-letter-spacing, -0.005em);
}

.banner-heading-3 {
  font-size: var(--banner-font-heading-3-size, min(5.1282vw, 2.5rem));
  font-weight: var(--banner-font-heading-3-weight, 600);
  line-height: var(--banner-font-heading-3-line-height, 1.4);
  letter-spacing: var(--banner-font-heading-3-letter-spacing, -0.005em);
}

.banner-heading-4 {
  font-size: var(--banner-font-heading-4-size, min(4.6154vw, 2rem));
  font-weight: var(--banner-font-heading-4-weight, 600);
  line-height: var(--banner-font-heading-4-line-height, 1.4);
  letter-spacing: var(--banner-font-heading-4-letter-spacing, -0.005em);
}

.banner-caption-1 {
  font-size: var(--banner-font-caption-1-size, min(3.5897vw, 1.5rem));
  font-weight: var(--banner-font-caption-1-weight, 500);
  line-height: var(--banner-font-caption-1-line-height, 1.4);
  letter-spacing: var(--banner-font-caption-1-letter-spacing, -0.005em);
}

.banner-caption-2 {
  font-size: var(--banner-font-caption-2-size, min(3.5897vw, 1.5rem));
  font-weight: var(--banner-font-caption-2-weight, 400);
  line-height: var(--banner-font-caption-2-line-height, 1.4);
  letter-spacing: var(--banner-font-caption-2-letter-spacing, -0.005em);
}

.banner-caption-3 {
  font-size: var(--banner-font-caption-3-size, min(3.0769vw, 1.25rem));
  font-weight: var(--banner-font-caption-3-weight, 500);
  line-height: var(--banner-font-caption-3-line-height, 1.4);
  letter-spacing: var(--banner-font-caption-3-letter-spacing, -0.005em);
}

/*-----------------------------*/
/*    layout    */
/*-----------------------------*/
body {
  --theme-bg-color: var(--color-bg-neutral-weak, #f0f3f5);
}
body[data-theme=dark] {
  --theme-bg-color: var(--color-bg-neutral-solid, #222832);
}

:root {
  --safe-bottom: env(safe-area-inset-bottom);
}

.ios-app-webview {
  --safe-bottom: 34px;
}
.ios-app-webview.keyboard-open {
  --safe-bottom: 0px;
}
.ios-app-webview:has(.main-wrapper) {
  --safe-bottom: env(safe-area-inset-bottom);
}

.content {
  padding-bottom: var(--content-padding-bottom, calc(64px + var(--safe-bottom, 0px)));
  overflow: hidden;
}
.content:has(~ .banner[data-type=network][data-position=bottom][data-fixed=true]) {
  padding-bottom: var(--bottom-banner-height, 0px);
}
@media screen and (max-height: 667px) {
  .content:has(~ .banner[data-type=network][data-position=bottom][data-fixed=true]) {
    padding-bottom: 0;
  }
}
.content:has(~ .banner[data-type=network][data-position=bottom][data-fixed=true]) ~ .banner {
  z-index: 9;
}

#mw .content:not(.full-content) {
  padding-bottom: calc(64px + var(--safe-bottom, 0px));
}

.wrapper {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
@media screen and (min-width: 760px) {
  .wrapper {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 761px;
  margin: 0 auto;
  padding: 0 24px;
  background-color: #ffffff;
}
@media screen and (max-width: 480px) {
  .container {
    padding: 0 20px;
  }
}
.container[data-bg=gray], .container[data-bg=gray].full-container {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.container[data-bg=transparent], .container[data-bg=transparent].full-container {
  background-color: transparent;
}
.container:not(.bottom-sheet):has(.info-popup__wrapper) {
  z-index: 10;
}
.container:not(.bottom-sheet):has(.info-popup__wrapper) + .container:not(.bottom-sheet):has(.info-popup__wrapper):has(.info-popup__wrapper) {
  z-index: 9;
}

.full-content {
  padding: 0;
  background-color: #ffffff;
  max-width: 761px;
  margin: 0 auto;
}
.full-content .full-container {
  padding-bottom: 48px;
}
.full-content[data-bottom=button] {
  padding-bottom: calc(var(--bottom-button-height, 0px) + 48px);
}
.full-content[data-bg=gray] {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.full-content[data-bg=gray]::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  z-index: -1;
}
@media screen and (min-width: 760px) {
  .full-content {
    min-height: calc(100vh - 54px);
    min-height: calc(100dvh - 54px);
  }
  .full-content:not([data-bottom=button]) {
    min-height: calc(100vh - 54px - var(--bottom-banner-height, 0px));
    min-height: calc(100dvh - 54px - var(--bottom-banner-height, 0px));
  }
}

html.keyboard-open body {
  overflow-y: auto;
  overscroll-behavior-y: none;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  position: relative;
}
@media screen and (max-width: 480px) {
  html.keyboard-open .full-content {
    min-height: 0;
  }
  html.keyboard-open .wrapper {
    min-height: 0;
  }
}
html.ios-app-webview.keyboard-open body {
  height: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.divider {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  padding: 32px 0;
  margin: 0 auto;
  max-width: 761px;
}
.divider[data-bg=gray] {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.divider[data-bg=gray]::before {
  background-color: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
}
.divider::before {
  content: "";
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 48px);
  height: 10px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
@media screen and (max-width: 480px) {
  .divider::before {
    width: calc(100% + 40px);
  }
}
.divider[data-style=flat] {
  padding: 0;
}

.gradient-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 761px;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, #FFF 100%), linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(341deg, #F5E5F7 38.98%, #FFF7EF 73.51%);
}

.layer-full-popup,
.layer-full-page {
  position: fixed;
  top: 0;
  left: 0;
  left: 50%;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  z-index: 10000;
  overflow: hidden;
  transform: translateX(-50%);
  display: none;
  background-color: #ffffff;
}
.layer-full-popup #topNavigation,
.layer-full-page #topNavigation {
  position: relative;
}
.layer-full-popup.active,
.layer-full-page.active {
  display: block;
}
.layer-full-popup.loading-box .content,
.layer-full-page.loading-box .content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: calc(100vh - 54px);
  height: calc(100dvh - 54px);
}
.layer-full-popup[data-type=page] .content,
.layer-full-page[data-type=page] .content {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.layer-full-popup[data-type=page] .layer-full-popup__scroll-container,
.layer-full-page[data-type=page] .layer-full-popup__scroll-container {
  height: calc(100vh - 54px);
  height: calc(100dvh - 54px);
}

/*-----------------------------*/
/*    Spacing    */
/*-----------------------------*/
.spacing--4xs {
  height: 4px;
}
.spacing--3xs {
  height: 6px;
}
.spacing--2xs {
  height: 8px;
}
.spacing--xs {
  height: 10px;
}
.spacing--s {
  height: 12px;
}
.spacing--m {
  height: 16px;
}
.spacing--l {
  height: 20px;
}
.spacing--xl {
  height: 24px;
}
.spacing--2xl {
  height: 28px;
}
.spacing--3xl {
  height: 32px;
}
.spacing--4xl {
  height: 40px;
}
.spacing--5xl {
  height: 48px;
}
.spacing--margin {
  height: 128px;
}

/*-----------------------------*/
/*    Top Navigation    */
/*-----------------------------*/
#topNavigation,
#layerTopNavigation {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  height: 54px;
}
#topNavigation .container,
#layerTopNavigation .container {
  padding: 0;
  background-color: #ffffff;
  height: 100%;
}
#topNavigation .top-navigation__item svg,
#layerTopNavigation .top-navigation__item svg {
  color: var(--color-fg-neutral-solid, #222832);
}
#topNavigation .top-navigation__item.active i,
#layerTopNavigation .top-navigation__item.active i {
  display: block;
  position: relative;
}
#topNavigation .top-navigation__item.active i::after,
#layerTopNavigation .top-navigation__item.active i::after {
  content: "";
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 6px;
  background-color: var(--color-fg-brand-solid, #fb1822);
  border-radius: 100%;
}
#topNavigation .top-navigation__box,
#layerTopNavigation .top-navigation__box {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 6px;
  height: 100%;
}
#topNavigation .top-navigation__box .title__con,
#layerTopNavigation .top-navigation__box .title__con {
  flex-shrink: 0;
  text-align: center;
}
#topNavigation .top-navigation__box .title__con h1,
#layerTopNavigation .top-navigation__box .title__con h1 {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
#topNavigation .top-navigation__box .right__con,
#layerTopNavigation .top-navigation__box .right__con {
  display: flex;
  justify-content: center;
  align-items: center;
}
#topNavigation .top-navigation__box .top-navigation__item,
#layerTopNavigation .top-navigation__box .top-navigation__item {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#topNavigation .top-navigation__box .top-navigation__item.text-btn,
#layerTopNavigation .top-navigation__box .top-navigation__item.text-btn {
  display: inline-flex;
  width: auto;
  padding: 0 10px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
#topNavigation .top-navigation__login,
#layerTopNavigation .top-navigation__login {
  display: inline-flex;
  align-items: center;
  margin-left: 16px;
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
#topNavigation .top-navigation__login img,
#layerTopNavigation .top-navigation__login img {
  width: 16px;
  max-width: none;
}
#topNavigation.sub-navigation .title__con, #topNavigation.popup-navigation .title__con,
#layerTopNavigation.sub-navigation .title__con,
#layerTopNavigation.popup-navigation .title__con {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: calc(100% - 6px - 6px - 44px - 44px);
  z-index: 1;
}
#topNavigation.sub-navigation .right__con, #topNavigation.popup-navigation .right__con,
#layerTopNavigation.sub-navigation .right__con,
#layerTopNavigation.popup-navigation .right__con {
  position: relative;
  justify-content: flex-end;
  z-index: 2;
}
#topNavigation.empty,
#layerTopNavigation.empty {
  position: relative;
}
#topNavigation.empty .container,
#layerTopNavigation.empty .container {
  height: 54px;
}
#topNavigation.visible-hidden,
#layerTopNavigation.visible-hidden {
  visibility: hidden;
}
#topNavigation[data-bg=transparent] .container, #topNavigation[data-bg=only-transparent] .container,
#layerTopNavigation[data-bg=transparent] .container,
#layerTopNavigation[data-bg=only-transparent] .container {
  background-color: transparent;
}
#topNavigation[data-bg=white] .container,
#layerTopNavigation[data-bg=white] .container {
  background-color: var(--color-bg-neutral-inverted, #ffffff);
}
#topNavigation[data-bg=gray] .container,
#layerTopNavigation[data-bg=gray] .container {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
#topNavigation[data-bg=dark]:not([data-color=dark]) .container .title__con,
#layerTopNavigation[data-bg=dark]:not([data-color=dark]) .container .title__con {
  color: #ffffff;
}
#topNavigation[data-bg=dark]:not([data-color=dark]) .container .top-navigation__item,
#layerTopNavigation[data-bg=dark]:not([data-color=dark]) .container .top-navigation__item {
  color: #ffffff;
}
#topNavigation[data-bg=dark]:not([data-color=dark]) .container .top-navigation__item i,
#layerTopNavigation[data-bg=dark]:not([data-color=dark]) .container .top-navigation__item i {
  color: #ffffff;
}
#topNavigation[data-bg=dark]:not([data-color=dark]) .container .top-navigation__item i svg,
#layerTopNavigation[data-bg=dark]:not([data-color=dark]) .container .top-navigation__item i svg {
  color: #ffffff;
}
#topNavigation[data-bg=dark] .container,
#layerTopNavigation[data-bg=dark] .container {
  background-color: transparent;
}
#topNavigation[data-none=true] .left__con,
#layerTopNavigation[data-none=true] .left__con {
  height: 44px;
}
#topNavigation[data-none=true] .left__con a,
#layerTopNavigation[data-none=true] .left__con a {
  display: none;
}

[data-theme=dark] #topNavigation {
  color: #ffffff;
}
[data-theme=dark] #topNavigation .container {
  background-color: var(--theme-bg-color, #ffffff);
}
[data-theme=dark] #topNavigation .top-navigation__icon {
  color: #ffffff;
}
[data-theme=dark] #topNavigation .top-navigation__icon svg {
  color: #ffffff;
}

body[data-theme=dark] #topNavigation .top-navigation__login i {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}
body[data-theme=dark] #topNavigation .top-navigation__login i img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
body[data-theme=dark] #topNavigation .top-navigation__login i img.dark {
  display: none;
}
body[data-theme=white] #topNavigation .top-navigation__login i {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}
body[data-theme=white] #topNavigation .top-navigation__login i img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
body[data-theme=white] #topNavigation .top-navigation__login i img.white {
  display: none;
}

/*-----------------------------*/
/*    Bottom Navigation    */
/*-----------------------------*/
#bottomNavigation {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 9999;
}
#bottomNavigation::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 761px;
  height: 200px;
  background-color: #ffffff;
  z-index: -1;
  pointer-events: none;
}
#bottomNavigation .container {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  padding-bottom: var(--safe-bottom, 0px);
}
#bottomNavigation .bottom-navigation__box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
#bottomNavigation .bottom-navigation__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 6px 4px 11px;
  color: var(--color-fg-neutral-weak, #b2b6ba);
}
#bottomNavigation .bottom-navigation__item.active .bottom-navigation__icon .active {
  display: block;
}
#bottomNavigation .bottom-navigation__item.active .bottom-navigation__icon .default {
  display: none;
}
#bottomNavigation .bottom-navigation__icon {
  position: relative;
  width: 32px;
  height: 32px;
}
#bottomNavigation .bottom-navigation__icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#bottomNavigation .bottom-navigation__icon img.active {
  display: none;
}

/*-----------------------------*/
/*    Gnb    */
/*-----------------------------*/
body.gnb-opened {
  overflow: hidden;
}

#gnb {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  transform: translateX(-50%);
  max-width: 761px;
  z-index: 10000;
  overflow: hidden;
  display: none;
}

.gnb-wrapper {
  position: relative;
  height: 100%;
  left: 100%;
  overflow-y: auto;
  margin: 0 auto;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  max-width: 761px;
  z-index: 9;
}
.gnb-header {
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  z-index: 9;
}
.gnb-header__box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 6px;
}
.gnb-header__box .right__con {
  display: flex;
  align-items: center;
}
.gnb-header__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
}
.gnb-top {
  padding: 12px 0 24px;
  overflow: hidden;
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.gnb-top__info {
  display: inline-flex;
  align-items: center;
}
.gnb-top__info-arrow {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.gnb-top__info-arrow svg {
  width: 100%;
  height: 100%;
}
.gnb-top__info-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.gnb-top__quickmenu {
  padding-top: 16px;
}
.gnb-top__quickmenu .swiper-slide {
  width: auto;
}
.gnb-top__quickmenu .element__thumb {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
}
.gnb-top__quickmenu .element__quick-menu__img {
  padding: 0 8.75px;
}
.gnb-top__quickmenu .element__quick-menu__img[data-dot=true]::after {
  width: 7px;
  height: 7px;
  top: 4px;
  right: 12.75px;
}
.gnb-top__chatbot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background-color: var(--color-bg-brand-weak, #fff0f1);
  color: var(--color-fg-brand-solid, #fb1822);
  border-radius: 9999px;
  height: 50px;
  margin-top: 24px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  position: relative;
  z-index: 0;
  border: 1px solid var(--color-gradient-red-basic, rgba(251, 24, 34, 0.4));
}
.gnb-top__chatbot-icon {
  width: 20px;
  height: 20px;
}
.gnb-top__chatbot-icon img {
  width: 100%;
  height: 100%;
}
.gnb-content .tab-component {
  position: sticky;
  top: 54px;
  left: 0;
  z-index: 9;
}
.gnb-content .tab-component .container {
  overflow: hidden;
}
.gnb-content .divider::before {
  width: 100%;
}
.gnb-menu__title {
  padding: 4px 0 12px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.gnb-menu__title-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 16px;
}
.gnb-menu__title-box .gnb-menu__title {
  color: var(--color-fg-neutral-solid, #222832);
  padding: 0;
}
.gnb-menu__sub-tit {
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.gnb-menu__item {
  padding-top: 24px;
}
.gnb-menu__item:first-child {
  padding-top: 12px;
}
.gnb-menu__item-button {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 16px;
  border-radius: 10px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.gnb-menu__item-button--box {
  display: flex;
  gap: 10px;
}
.gnb-menu__item-button--icon {
  width: 28px;
}
.gnb-menu__item-button--icon img {
  width: 100%;
}
.gnb-menu__item-button--text {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.gnb-sns__box {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.gnb-sns__link {
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 8px;
}
.gnb-sns__text {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}

/*-----------------------------*/
/*    Button    */
/*-----------------------------*/
/*  Button styles */
.btn {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}
.btn[data-size=l] {
  padding: 14px 32px;
  border-radius: 10px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.btn[data-size=m] {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.btn[data-size=s] {
  padding: 7px 12px;
  border-radius: 8px;
  font-size: var(--font-title-4-size, 0.8125rem);
  font-weight: var(--font-title-4-weight, 600);
  line-height: var(--font-title-4-line-height, 1.4);
  letter-spacing: var(--font-title-4-letter-spacing, -0.005em);
}
.btn[data-color=primary] {
  background: var(--color-bg-brand-solid, #fb1822);
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.btn[data-color=primary] span {
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.btn[data-color=secondary] {
  border: 1px solid var(--color-fg-accent-red-solid, #fb1822);
  background: var(--color-bg-neutral-inverted, #ffffff);
  color: var(--color-fg-brand-solid, #fb1822);
}
.btn[data-color=tertiary] {
  background: var(--color-bg-button-pink, rgba(255, 208, 211, 0.4));
  color: var(--color-fg-brand-solid, #fb1822);
}
.btn[data-color=outlined] {
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  background: var(--color-bg-neutral-inverted, #ffffff);
  color: var(--color-fg-neutral-solid, #222832);
}
.btn[data-color=outlined][data-state=disabled] {
  background: var(--color-bg-neutral-inverted, #ffffff);
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.btn[data-state=disabled] {
  background: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
  color: var(--color-fg-neutral-disabled, #c8cccf) !important;
  border: none;
  pointer-events: none;
  cursor: default;
}
.btn[data-color=negative] {
  background: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
  color: var(--color-fg-neutral-solid, #222832);
}
.btn[data-color=naver] {
  background: #03C75A;
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.btn[data-color=kakao] {
  background: #FEE500;
  color: var(--color-fg-neutral-solid, #222832);
}
.btn[data-type=fixed] {
  width: 100%;
}
.btn[data-type=line] {
  width: 100%;
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  padding: 14px 16px;
  border-radius: 0;
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.btn[data-type=textinput] {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: var(--font-title-4-size, 0.8125rem);
  font-weight: var(--font-title-4-weight, 600);
  line-height: var(--font-title-4-line-height, 1.4);
  letter-spacing: var(--font-title-4-letter-spacing, -0.005em);
}
.btn[data-type=capsule] {
  padding: 6px 16px;
  border-radius: 50px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.btn[data-icon=true] {
  align-items: center;
  gap: 2px;
}
.btn[data-icon=true] img, .btn[data-icon=true] svg {
  width: 16px;
  height: 16px;
}
.btn.btn-segment[data-active=false] {
  background: var(--color-fg-neutral-inverted, #ffffff);
  border: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
  color: var(--color-fg-neutral-solid, #222832);
}
.btn.btn-segment[data-active=true] {
  background: var(--color-bg-brand-weak, #fff0f1);
  border: 1px solid var(--color-border-neutral-weak-pink, #ffddde);
  color: var(--color-fg-brand-solid, #fb1822);
}
.btn.btn-segment[data-state=disabled] {
  background: var(--color-bg-neutral-weak, #f0f3f5);
  color: var(--color-fg-neutral-disabled, #c8cccf);
  border: 0;
  cursor: default;
}
.btn.fit-content {
  width: fit-content;
}

/* Button text styles */
.btn-txt[data-type=icon] {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  position: relative;
}
.btn-txt[data-type=icon]::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.btn-txt[data-type=icon] i {
  width: 12px;
  height: 12px;
}
.btn-txt[data-type=icon] i svg {
  width: 100%;
  height: 100%;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.btn-txt[data-type=underline] {
  position: relative;
  display: inline-flex;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  position: relative;
}
.btn-txt[data-type=underline]::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.btn-txt[data-type=underline]:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-border-neutral-subtle, #898d93);
}
.btn-txt[data-type=underline][data-size=s] {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.btn-txt[data-type=dis-underline] {
  position: relative;
  display: inline-flex;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  position: relative;
}
.btn-txt[data-type=dis-underline]::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.btn-txt[data-type=dis-underline]:after {
  content: "";
  display: none;
}
.btn-txt[data-size=m] {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.btn-txt[data-size=s] {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}

/* Button close styles */
.btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
  border-radius: 9999px;
  position: relative;
}
.btn-close::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.btn-close svg {
  width: 12px;
  height: 12px;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}

/*-----------------------------*/
/*    carousel    */
/*-----------------------------*/
.carousel {
  display: flex;
  justify-content: center;
  z-index: 9;
}
.carousel .pagination-group {
  display: flex;
  align-items: center;
  gap: 5px;
}
.carousel .pagination-group .pagination-dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background-color: var(--color-bg-overlay-bk-thin, rgba(0, 0, 0, 0.2));
}
.carousel .pagination-group .pagination-dot.active {
  background-color: var(--color-bg-brand-solid, #fb1822);
}
.carousel .pagination-group .pagination-dot.small {
  width: 3px;
  height: 3px;
  opacity: 0.5;
}
.carousel .swiper-pagination-bullet {
  width: 5px !important;
  height: 5px !important;
  margin: 0 2.5px !important;
  flex-shrink: 0;
  background-color: var(--color-bg-overlay-bk-thin, rgba(0, 0, 0, 0.2));
  opacity: 1;
}
.carousel .swiper-pagination-bullet-active {
  background-color: var(--color-bg-brand-solid, #fb1822);
}
.carousel .swiper-pagination-bullet-active-prev, .carousel .swiper-pagination-bullet-active-next {
  opacity: 0.5;
}
.carousel .swiper-pagination-bullet-active-prev-prev, .carousel .swiper-pagination-bullet-active-next-next {
  visibility: hidden;
}
.carousel .swiper-pagination-bullet:not([class*=swiper-pagination-bullet-active]) {
  visibility: hidden;
}
.carousel[data-color=white] .pagination-group .pagination-dot {
  background-color: var(--color-bg-overlay-wt-basic, rgba(255, 255, 255, 0.4));
}
.carousel[data-color=white] .pagination-group .pagination-dot.active {
  background-color: var(--color-bg-brand-solid, #fb1822);
}
.carousel[data-color=white] .swiper-pagination-bullet {
  background-color: var(--color-bg-overlay-wt-basic, rgba(255, 255, 255, 0.4));
}
.carousel[data-color=white] .swiper-pagination-bullet-active {
  background-color: var(--color-bg-brand-solid, #fb1822);
}
.carousel[data-position=bottom] {
  position: relative;
  margin-top: 16px;
  bottom: auto !important;
  top: auto !important;
}
.carousel[data-position=bottom].single-slide {
  margin-top: 0;
}
.carousel[data-position=bottom-right] {
  position: absolute;
  right: 12px !important;
  bottom: 12px !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
}

/*-----------------------------*/
/*    Banner    */
/*-----------------------------*/
[data-banner-bg][data-banner-bg=red] {
  background-color: var(--color-bg-banner-lh-red);
  --banner-background-color: var(--color-bg-banner-lh-red);
}
[data-banner-bg][data-banner-bg=orange] {
  background-color: var(--color-bg-banner-lh-orange);
  --banner-background-color: var(--color-bg-banner-lh-orange);
}
[data-banner-bg][data-banner-bg=yellow] {
  background-color: var(--color-bg-banner-lh-yellow);
  --banner-background-color: var(--color-bg-banner-lh-yellow);
}
[data-banner-bg][data-banner-bg=green] {
  background-color: var(--color-bg-banner-lh-green);
  --banner-background-color: var(--color-bg-banner-lh-green);
}
[data-banner-bg][data-banner-bg=mint] {
  background-color: var(--color-bg-banner-lh-mint);
  --banner-background-color: var(--color-bg-banner-lh-mint);
}
[data-banner-bg][data-banner-bg=skblue] {
  background-color: var(--color-bg-banner-lh-skyblue);
  --banner-background-color: var(--color-bg-banner-lh-skyblue);
}
[data-banner-bg][data-banner-bg=blue] {
  background-color: var(--color-bg-banner-lh-blue);
  --banner-background-color: var(--color-bg-banner-lh-blue);
}
[data-banner-bg][data-banner-bg=purple] {
  background-color: var(--color-bg-banner-lh-purple);
  --banner-background-color: var(--color-bg-banner-lh-purple);
}
[data-banner-bg][data-banner-bg=violet] {
  background-color: var(--color-bg-banner-lh-violet);
  --banner-background-color: var(--color-bg-banner-lh-violet);
}
[data-banner-bg][data-banner-bg=pink] {
  background-color: var(--color-bg-banner-lh-pink);
  --banner-background-color: var(--color-bg-banner-lh-pink);
}
[data-banner-bg][data-banner-bg=white] {
  background-color: var(--color-bg-banner-default-white);
  --banner-background-color: var(--color-bg-banner-default-white);
}
[data-banner-bg][data-banner-bg=grayhb] {
  background-color: var(--color-bg-banner-default-gray-50);
  --banner-background-color: var(--color-bg-banner-default-gray-50);
}
[data-banner-bg][data-banner-bg=GR50] {
  background-color: var(--color-bg-banner-default-gray-50);
  --banner-background-color: var(--color-bg-banner-default-gray-50);
}
[data-banner-bg][data-banner-bg=GR100] {
  background-color: var(--color-bg-banner-default-gray-100);
  --banner-background-color: var(--color-bg-banner-default-gray-100);
}
[data-banner-bg][data-banner-bg=gray] {
  background-color: var(--color-bg-banner-default-gray-900);
  --banner-background-color: var(--color-bg-banner-default-gray-900);
}
[data-banner-bg][data-banner-bg=evntbg] {
  background-color: var(--color-bg-neutral-weak);
  --banner-background-color: var(--color-bg-neutral-weak);
}
[data-banner-bg][data-banner-bg=ACBG01] {
  background-color: var(--color-bg-accent-red-weak);
  --banner-background-color: var(--color-bg-accent-red-weak);
}
[data-banner-bg][data-banner-bg=ACBG02] {
  background-color: var(--color-bg-accent-orange-weak);
  --banner-background-color: var(--color-bg-accent-orange-weak);
}
[data-banner-bg][data-banner-bg=ACBG03] {
  background-color: var(--color-bg-accent-yellow-weak);
  --banner-background-color: var(--color-bg-accent-yellow-weak);
}
[data-banner-bg][data-banner-bg=ACBG04] {
  background-color: var(--color-bg-accent-green-weak);
  --banner-background-color: var(--color-bg-accent-green-weak);
}
[data-banner-bg][data-banner-bg=ACBG05] {
  background-color: var(--color-bg-accent-mint-weak);
  --banner-background-color: var(--color-bg-accent-mint-weak);
}
[data-banner-bg][data-banner-bg=ACBG06] {
  background-color: var(--color-bg-accent-skyblue-weak);
  --banner-background-color: var(--color-bg-accent-skyblue-weak);
}
[data-banner-bg][data-banner-bg=ACBG07] {
  background-color: var(--color-bg-accent-blue-weak);
  --banner-background-color: var(--color-bg-accent-blue-weak);
}
[data-banner-bg][data-banner-bg=ACBG08] {
  background-color: var(--color-bg-accent-purple-weak);
  --banner-background-color: var(--color-bg-accent-purple-weak);
}
[data-banner-bg][data-banner-bg=ACBG09] {
  background-color: var(--color-bg-accent-violet-weak);
  --banner-background-color: var(--color-bg-accent-violet-weak);
}
[data-banner-bg][data-banner-bg=ACBG10] {
  background-color: var(--color-bg-accent-pink-weak);
  --banner-background-color: var(--color-bg-accent-pink-weak);
}

.banner {
  position: relative;
  overflow: hidden;
  padding-top: 10px;
  margin-top: -10px;
  width: 100%;
}
.banner[data-size=l]:not([data-type=full-image]) .img-wrap, .banner[data-size=m]:not([data-type=full-image]) .img-wrap {
  border-bottom-right-radius: 16px;
  overflow: hidden;
}
.banner:not([data-type=sdk]) .swiper-slide {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .banner:not([data-type=sdk]) .swiper-slide {
    margin-right: 24px;
  }
}
.banner .banner-item {
  position: relative;
  display: block;
}
.banner .banner-item .banner-item-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.banner .banner-item[data-type=full-image] .banner-txt-box {
  padding: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.banner .banner-item[data-type=full-image] .banner-txt-box .banner-brand {
  margin-top: 0;
  color: var(--color-bg-overlay-wt-thick, rgba(255, 255, 255, 0.8));
  text-align: center;
  font-size: var(--banner-font-caption-1-size, min(3.5897vw, 1.5rem));
  font-weight: var(--banner-font-caption-1-weight, 500);
  line-height: var(--banner-font-caption-1-line-height, 1.4);
  letter-spacing: var(--banner-font-caption-1-letter-spacing, -0.005em);
}
.banner .banner-item[data-type=full-image] .banner-txt-box .banner-title {
  margin-top: 6px;
  color: var(--color-fg-neutral-inverted, #ffffff);
  text-align: center;
  font-size: var(--banner-font-heading-1-size, min(7.1795vw, 3rem));
  font-weight: var(--banner-font-heading-1-weight, 600);
  line-height: var(--banner-font-heading-1-line-height, 1.4);
  letter-spacing: var(--banner-font-heading-1-letter-spacing, -0.005em);
}
.banner .banner-item[data-type=full-image] .banner-img-box {
  width: 100%;
  height: 100%;
}
.banner .banner-item[data-type=full-image] .banner-img-box .img-wrap {
  padding-top: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
}
.banner .banner-item[data-type=full-image] .banner-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner .banner-item[data-type=full-image] .banner-ad .disclaimer {
  color: var(--color-bg-overlay-wt-basic, rgba(255, 255, 255, 0.4));
}
.banner .banner-item[data-type=video] .banner-video-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
}
.banner .banner-item[data-type=video] video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner .banner-item[data-type=video] .banner-ad {
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.banner .banner-item[data-type=video] .banner-ad .disclaimer {
  color: var(--color-bg-overlay-wt-basic, rgba(255, 255, 255, 0.4));
}
.banner .banner-item[data-dark=true] .banner-txt-box .banner-brand {
  color: var(--color-bg-overlay-wt-thick, rgba(255, 255, 255, 0.8));
}
.banner .banner-item[data-dark=true] .banner-txt-box .banner-title {
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.banner .banner-item[data-dark=true] .banner-txt-box .banner-sub {
  color: var(--color-bg-overlay-wt-thick, rgba(255, 255, 255, 0.8));
}
.banner .banner-item[data-dark=true] .banner-ad .disclaimer {
  color: var(--color-bg-overlay-wt-basic, rgba(255, 255, 255, 0.4));
}
.banner .banner-txt-box {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.banner .banner-txt-box__inner {
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
}
.banner .banner-txt-box .banner-brand {
  color: var(--color-bg-overlay-bk-thick, rgba(0, 0, 0, 0.8));
}
.banner .banner-txt-box .banner-title {
  color: var(--color-fg-neutral-solid, #222832);
}
.banner .banner-txt-box .banner-sub {
  color: var(--color-bg-overlay-bk-thick, rgba(0, 0, 0, 0.8));
  white-space: nowrap; /* 한 줄만 */
  overflow: hidden; /* 넘치는 글자 숨김 */
  text-overflow: ellipsis; /* … 처리 */
}
.banner .banner-img-box {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 46.85%;
  z-index: 1;
}
.banner .banner-img-box .img-wrap {
  position: relative;
  padding-top: 100%;
}
.banner .banner-img-box img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.banner .banner-ad {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 9;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: row-reverse;
  gap: 4px;
  width: 100%;
  padding: 10px 20px;
}
.banner .banner-ad .disclaimer {
  color: var(--color-bg-overlay-bk-basic, rgba(0, 0, 0, 0.4));
  font-size: 8px;
  line-height: 1.2;
  max-width: calc(100% - 8px - 67px - 17px - 4px);
}
.banner .banner-timer {
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 2;
  line-height: 1;
}
.banner .banner-timer .label {
  border-top-left-radius: 12px;
}
.banner .banner-timer .label__txt {
  font-variant-numeric: tabular-nums;
}
.banner .banner-point {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 8px;
  transform: translateY(-50%);
  display: inline-flex;
  z-index: 2;
}
.banner .banner-units {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 9;
}
.banner .banner-units__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.banner .banner-units .controls {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.banner .banner-units .controls button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: var(--color-bg-overlay-bk-thin, rgba(0, 0, 0, 0.2));
}
.banner .banner-units .controls button.play {
  display: none;
}
.banner .banner-units .controls button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
}
.banner .banner-units .controls svg {
  width: 12px;
  height: 12px;
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.banner .banner-units .controls.is-paused button.play {
  display: block;
}
.banner .banner-units .controls.is-paused button.pause {
  display: none;
}
.banner .banner-units .carousel {
  position: static;
  transform: none !important;
  justify-content: flex-start;
  width: auto !important;
}
.banner .banner-units .carousel[data-theme=white] .pagination-dot:not(.active) {
  background-color: var(--color-bg-overlay-wt-basic, rgba(255, 255, 255, 0.4));
}
.banner .banner-units[data-theme=white] .carousel .pagination-dot:not(.active) {
  background-color: var(--color-bg-overlay-wt-basic, rgba(255, 255, 255, 0.4));
}
.banner.modal-banner .swiper-slide {
  margin-right: 0;
}
.banner[data-size=l] .banner-item {
  aspect-ratio: 4/3;
  border-radius: 16px;
}
.banner[data-size=l] .banner-txt-box {
  padding: 16px 16px 20px 20px;
}
.banner[data-size=l] .banner-txt-box .banner-brand {
  margin-top: 0.2142857143em;
  font-size: var(--banner-font-caption-1-size, min(3.5897vw, 1.5rem));
  font-weight: var(--banner-font-caption-1-weight, 500);
  line-height: var(--banner-font-caption-1-line-height, 1.4);
  letter-spacing: var(--banner-font-caption-1-letter-spacing, -0.005em);
}
.banner[data-size=l] .banner-txt-box .banner-title {
  margin-top: 0.15em;
  font-size: var(--banner-font-heading-2-size, min(6.1538vw, 2.5rem));
  font-weight: var(--banner-font-heading-2-weight, 600);
  line-height: var(--banner-font-heading-2-line-height, 1.4);
  letter-spacing: var(--banner-font-heading-2-letter-spacing, -0.005em);
}
.banner[data-size=l] .banner-txt-box .banner-sub {
  margin-top: 0.2142857143em;
  font-size: var(--banner-font-caption-2-size, min(3.5897vw, 1.5rem));
  font-weight: var(--banner-font-caption-2-weight, 400);
  line-height: var(--banner-font-caption-2-line-height, 1.4);
  letter-spacing: var(--banner-font-caption-2-letter-spacing, -0.005em);
}
.banner[data-size=l] .banner-timer .label {
  border-top-left-radius: 16px;
}
.banner[data-size=m] .banner-item {
  aspect-ratio: 16/9;
  border-radius: 16px;
}
.banner[data-size=m] .banner-txt-box {
  padding: 16px 16px 20px 20px;
}
.banner[data-size=m] .banner-txt-box .banner-brand {
  margin-top: 0.2142857143em;
  font-size: var(--banner-font-caption-1-size, min(3.5897vw, 1.5rem));
  font-weight: var(--banner-font-caption-1-weight, 500);
  line-height: var(--banner-font-caption-1-line-height, 1.4);
  letter-spacing: var(--banner-font-caption-1-letter-spacing, -0.005em);
}
.banner[data-size=m] .banner-txt-box .banner-title {
  margin-top: 0.15em;
  font-size: var(--banner-font-heading-3-size, min(5.1282vw, 2.5rem));
  font-weight: var(--banner-font-heading-3-weight, 600);
  line-height: var(--banner-font-heading-3-line-height, 1.4);
  letter-spacing: var(--banner-font-heading-3-letter-spacing, -0.005em);
}
.banner[data-size=m] .banner-timer .label {
  border-top-left-radius: 16px;
}
.banner[data-size=s] .swiper-slide {
  height: auto;
}
.banner[data-size=s] .banner-item {
  border-radius: 12px;
  height: 100%;
  width: 100%;
}
.banner[data-size=s] .banner-item[data-type=full-image] .banner-item-inner {
  padding: 0;
  display: block;
}
.banner[data-size=s] .banner-item[data-type=full-image] .banner-img-box {
  position: relative;
  right: 0;
  aspect-ratio: auto;
}
.banner[data-size=s] .banner-item[data-type=full-image] .banner-img-box .img-wrap {
  border-radius: 12px;
  aspect-ratio: auto;
}
.banner[data-size=s] .banner-item[data-type=full-image] .banner-img-box .img-wrap img {
  width: 100%;
  position: static;
}
.banner[data-size=s] .banner-item[data-type=full-image] .banner-ad:has(.disclaimer) .disclaimer {
  color: var(--color-bg-overlay-bk-basic, rgba(0, 0, 0, 0.4));
}
.banner[data-size=s] .banner-item-inner {
  position: static;
  display: flex;
  justify-content: space-between;
  height: 100%;
  padding: 0 16px 0 20px;
  align-items: stretch;
}
.banner[data-size=s] .banner-txt-box {
  position: relative;
  padding: 20px 0 16px;
  width: 58.6%;
}
.banner[data-size=s] .banner-txt-box__inner {
  width: 100%;
}
.banner[data-size=s] .banner-txt-box .banner-brand {
  font-size: var(--banner-font-caption-3-size, min(3.0769vw, 1.25rem));
  font-weight: var(--banner-font-caption-3-weight, 500);
  line-height: var(--banner-font-caption-3-line-height, 1.4);
  letter-spacing: var(--banner-font-caption-3-letter-spacing, -0.005em);
}
.banner[data-size=s] .banner-txt-box .banner-brand + .banner-title {
  margin-top: 3px;
  margin-top: 0.1666666667em;
}
.banner[data-size=s] .banner-txt-box .banner-title {
  font-size: var(--banner-font-heading-4-size, min(4.6154vw, 2rem));
  font-weight: var(--banner-font-heading-4-weight, 600);
  line-height: var(--banner-font-heading-4-line-height, 1.4);
  letter-spacing: var(--banner-font-heading-4-letter-spacing, -0.005em);
}
.banner[data-size=s] .banner-txt-box .banner-sub {
  color: var(--color-fg-neutral-subtle, #5f646c);
  margin-top: 2px;
  font-size: var(--banner-font-caption-3-size, min(3.0769vw, 1.25rem));
  font-weight: var(--banner-font-caption-3-weight, 500);
  line-height: var(--banner-font-caption-3-line-height, 1.4);
  letter-spacing: var(--banner-font-caption-3-letter-spacing, -0.005em);
}
.banner[data-size=s] .banner-img-box {
  position: static;
  width: auto;
  width: 41.4%;
  height: 100%;
  right: 16px;
}
.banner[data-size=s] .banner-img-box .img-wrap {
  padding-top: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
}
.banner[data-size=s] .banner-img-box .img-wrap img {
  width: 100%;
  max-width: none;
}
.banner[data-size=s] .banner-ad:has(.disclaimer) .ad__label, .banner[data-size=s] .banner-ad:has(.disclaimer) .disclaimer {
  position: relative;
  z-index: 2;
}
.banner[data-size=s] .banner-units {
  bottom: 10px;
  left: 10px;
}
.banner[data-size=s][data-type=title-only] {
  width: 100%;
}
.banner[data-size=s][data-type=title-only] .banner-txt-box {
  width: 66.57%;
}
.banner[data-size=s][data-type=title-only] .banner-img-box {
  width: 33.43%;
}
.banner[data-size=s][data-type=title-only] .banner-img-box .img-wrap img {
  top: 50%;
  transform: translateY(-50%);
}
.banner[data-size=s] .banner-item[data-type=title-single] .banner-txt-box {
  width: 66.57%;
}
.banner[data-size=s] .banner-item[data-type=title-single] .banner-img-box {
  width: 33.43%;
}
.banner[data-size=s] .banner-item[data-type=title-single] .banner-img-box .img-wrap img {
  top: 50%;
  transform: translateY(-50%);
}
.banner[data-size=s] .banner-item[data-type=full-image] .banner-img-box .img-wrap {
  aspect-ratio: 700/260;
}
.banner[data-size=s]:has(.banner-item[data-type=title-single]) .banner-item[data-type=full-image] .banner-img-box .img-wrap {
  aspect-ratio: 700/210;
}
.banner[data-size=xs] .swiper-slide {
  height: auto;
}
.banner[data-size=xs] .banner-item {
  border-radius: 12px;
  height: 100%;
  width: 100%;
}
.banner[data-size=xs] .banner-item[data-type=full-image] .banner-item-inner {
  padding: 0;
  display: block;
}
.banner[data-size=xs] .banner-item[data-type=full-image] .banner-img-box {
  position: relative;
  right: 0;
  aspect-ratio: auto;
}
.banner[data-size=xs] .banner-item[data-type=full-image] .banner-img-box .img-wrap {
  border-radius: 12px;
  aspect-ratio: 700/210;
}
.banner[data-size=xs] .banner-item[data-type=full-image] .banner-img-box .img-wrap img {
  width: 100%;
  position: static;
  transform: none;
}
.banner[data-size=xs] .banner-item[data-type=full-image] .banner-ad:has(.disclaimer) .disclaimer {
  color: var(--color-bg-overlay-bk-basic, rgba(0, 0, 0, 0.4));
}
.banner[data-size=xs] .banner-item-inner {
  position: static;
  display: flex;
  justify-content: space-between;
  height: 100%;
  padding: 0 16px 0 20px;
  align-items: stretch;
}
.banner[data-size=xs] .banner-txt-box {
  position: relative;
  padding: 20px 0 16px;
  width: 66.57%;
}
.banner[data-size=xs] .banner-txt-box__inner {
  width: 100%;
}
.banner[data-size=xs] .banner-txt-box .banner-brand {
  font-size: var(--banner-font-caption-3-size, min(3.0769vw, 1.25rem));
  font-weight: var(--banner-font-caption-3-weight, 500);
  line-height: var(--banner-font-caption-3-line-height, 1.4);
  letter-spacing: var(--banner-font-caption-3-letter-spacing, -0.005em);
}
.banner[data-size=xs] .banner-txt-box .banner-brand + .banner-title {
  margin-top: 3px;
  margin-top: 0.1666666667em;
}
.banner[data-size=xs] .banner-txt-box .banner-title {
  font-size: var(--banner-font-heading-4-size, min(4.6154vw, 2rem));
  font-weight: var(--banner-font-heading-4-weight, 600);
  line-height: var(--banner-font-heading-4-line-height, 1.4);
  letter-spacing: var(--banner-font-heading-4-letter-spacing, -0.005em);
}
.banner[data-size=xs] .banner-txt-box .banner-sub {
  color: var(--color-fg-neutral-subtle, #5f646c);
  margin-top: 2px;
  font-size: var(--banner-font-caption-3-size, min(3.0769vw, 1.25rem));
  font-weight: var(--banner-font-caption-3-weight, 500);
  line-height: var(--banner-font-caption-3-line-height, 1.4);
  letter-spacing: var(--banner-font-caption-3-letter-spacing, -0.005em);
}
.banner[data-size=xs] .banner-img-box {
  position: static;
  width: 33.43%;
  height: 100%;
  right: 16px;
}
.banner[data-size=xs] .banner-img-box .img-wrap {
  padding-top: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
}
.banner[data-size=xs] .banner-img-box .img-wrap img {
  width: 100%;
  max-width: none;
  top: 50%;
  transform: translateY(-50%);
}
.banner[data-size=xs] .banner-ad:has(.disclaimer) .ad__label, .banner[data-size=xs] .banner-ad:has(.disclaimer) .disclaimer {
  position: relative;
  z-index: 2;
}
.banner[data-size=xs] .banner-units {
  bottom: 10px;
  left: 10px;
}
.banner .units-hide .banner-units {
  display: none;
}
.banner .units-hide .banner-item-inner {
  align-items: center;
}
.banner .units-hide .banner-txt-box__inner {
  margin-bottom: 0;
}
.banner[data-type=special] .banner-txt-box {
  width: calc(74.53% - 20px);
}
.banner[data-type=special] .banner-img-box {
  position: static;
  display: flex;
  align-items: center;
  width: 25.47%;
  padding: 12px 0;
}
.banner[data-type=special] .banner-img-box .img-wrap {
  height: auto;
  padding: 9px 0;
}
.banner[data-type=special] .banner-img-box .banner-img__special {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-top: 100%;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
}
.banner[data-type=special] .banner-img-box .banner-img__special img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner[data-type=special] .banner-img-box .banner-img__special::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  z-index: 3;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_118_10828' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='80' height='80'%3E%3Cpath d='M40.008 0H39.984C13.456 0 0 13.464 0 40C0 66.536 13.456 80 40 80C66.544 80 80 66.544 80 40C80 13.456 66.544 0 40.008 0Z' fill='%239A8972'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_118_10828)'%3E%3Cpath d='M39.9844 1.25H40.0078C53.0787 1.25 62.7052 4.56261 69.0713 10.9297C75.4374 17.2968 78.75 26.9251 78.75 40C78.75 53.075 75.4374 62.7032 69.0703 69.0703C62.7032 75.4374 53.075 78.75 40 78.75C26.9252 78.75 17.2969 75.4355 10.9297 69.0674C4.5625 62.6992 1.25 53.0708 1.25 40C1.25 26.9292 4.56249 17.3008 10.9277 10.9326C17.293 4.56453 26.9178 1.25 39.9844 1.25Z' stroke='url(%23paint0_linear_118_10828)' stroke-width='2.5'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_118_10828' x1='21.5' y1='2.5' x2='61.5' y2='75' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFD48A'/%3E%3Cstop offset='1' stop-color='%23FE7611'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
}
.banner[data-type=special] .banner-img-box .banner-img__special-label {
  position: absolute;
  bottom: 9px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
.banner[data-type=special] .banner-img-box .banner-img__special-label .label img {
  position: static;
  width: inherit;
  height: auto;
}
.banner[data-type=special] .banner-units {
  right: auto;
  left: 20px;
  bottom: 16px;
}
.banner[data-type=special-button] .banner-item {
  padding: 8px 20px;
  background: var(--Gradient-Special-BG, linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFF 80%), linear-gradient(90deg, #FFF7EF 0%, #F5E5F7 100%));
}
.banner[data-type=special-button] .banner-item-inner {
  padding: 0;
  align-items: center;
}
.banner[data-type=special-button] .banner-txt-box {
  padding: 8px 0;
}
.banner[data-type=special-button] .banner-txt-box__inner {
  margin-bottom: 0;
  padding-bottom: 0;
  align-items: flex-start;
  gap: 10px;
}
.banner[data-type=special-button] .banner-txt-box__title {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
.banner[data-type=special-button] .banner-img-box {
  position: static;
  width: 23.71%;
  height: auto;
}
.banner[data-type=special-button] .banner-img-box img {
  position: static;
  width: 100%;
  height: auto;
}
.banner[data-type=network] {
  overflow: visible;
}
.banner[data-type=network] .banner-network__inner {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px min(5.1282051282vw, 40px);
  background-color: var(--color-bg-banner-default-gray-50, rgba(5, 55, 88, 0.06));
  max-width: 761px;
  margin: 0 auto;
  aspect-ratio: 700/176;
}
.banner[data-type=network] .banner-network__inner .element__thumb {
  width: 12.5714285714%;
  height: auto;
  padding-top: 12.5714285714%;
}
.banner[data-type=network] .banner-network__img {
  flex-shrink: 0;
}
.banner[data-type=network] .banner-network__tit {
  font-size: var(--banner-font-heading-4-size, min(4.6154vw, 2rem));
  font-weight: var(--banner-font-heading-4-weight, 600);
  line-height: var(--banner-font-heading-4-line-height, 1.4);
  letter-spacing: var(--banner-font-heading-4-letter-spacing, -0.005em);
}
.banner[data-type=network] .banner-network__tit-box {
  display: flex;
  align-items: center;
  gap: 3px;
}
.banner[data-type=network] .banner-network__txt {
  color: var(--color-fg-neutral-muted, #6A6F77);
  margin-top: 4px;
  font-size: var(--banner-font-caption-2-size, min(3.5897vw, 1.5rem));
  font-weight: var(--banner-font-caption-2-weight, 400);
  line-height: var(--banner-font-caption-2-line-height, 1.4);
  letter-spacing: var(--banner-font-caption-2-letter-spacing, -0.005em);
}
.banner[data-type=network][data-position=bottom] {
  max-width: 761px;
  margin: 0 auto;
  padding-top: 0;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
}
.banner[data-type=network][data-position=bottom] .banner-point img {
  width: 16px;
  height: 16px;
}
.banner[data-type=network][data-position=bottom] .banner-ad {
  padding: 0;
  right: 4px;
  bottom: 4px;
  width: auto;
}
.banner[data-type=network][data-position=bottom] .banner-ad .ad__label {
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.banner[data-type=network][data-position=bottom] img {
  width: 100%;
  max-width: none;
}
.banner[data-type=network][data-fixed=true] {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.banner[data-type=network][data-fixed=true][data-position=bottom] {
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-height: 667px) {
  .banner[data-type=network][data-fixed=true] {
    position: static;
  }
  .banner[data-type=network][data-fixed=true][data-position=bottom] {
    left: 0;
    transform: none;
  }
}
.banner[data-type=network]:not([data-position=bottom]) {
  border-radius: 12px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.banner[data-type=network]:not([data-position=bottom]) .banner-network__img img {
  max-width: none;
  width: 100%;
}
.banner[data-type=network][data-border=none], .banner[data-type=network][data-border=none] .banner-network__inner {
  border-radius: 0px;
}
.banner[data-type=sdk] {
  padding: 0 20px;
}
.banner[data-type=sdk] .swiper-slide {
  width: 275px;
}
.banner[data-type=sdk] .banner-sdk__img-wrap {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
}
.banner[data-type=sdk] .banner-sdk__img-wrap .img-wrap {
  position: relative;
  height: auto;
  aspect-ratio: 275/143;
  overflow: hidden;
}
.banner[data-type=sdk] .banner-sdk__img-wrap .img-wrap img {
  width: 100%;
  height: 100%;
  max-width: initial;
  object-fit: cover;
}
.banner[data-type=sdk] .banner-sdk__content-wrap {
  display: flex;
  gap: 12px;
  flex-direction: column;
  padding: 16px 20px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
  border-top: none;
}
.banner[data-type=sdk] .banner-sdk__brand {
  display: flex;
  align-items: center;
  gap: 6px;
}
.banner[data-type=sdk] .banner-sdk__brand .element__thumb {
  flex-shrink: 0;
}
.banner[data-type=sdk] .banner-sdk__brand-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banner[data-type=sdk] .banner-sdk__brand-name {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.banner[data-type=sdk] .banner-sdk__title {
  margin-top: 6px;
  width: 100%;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.banner[data-type=sdk] .banner-sdk__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.banner[data-type=vertical][data-style=logo] {
  display: block;
}
.banner[data-type=vertical][data-style=logo] .swiper-slide {
  width: 136px;
  margin-right: auto;
}
.banner[data-type=vertical][data-style=logo] .banner-vertical {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  border-radius: 12px;
  width: 136px;
  height: auto;
  min-height: 166px;
}
.banner[data-type=vertical][data-style=logo] .banner-vertical__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.banner[data-type=vertical][data-style=logo] .banner-vertical__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.banner[data-type=vertical][data-style=logo] .banner-vertical__text {
  width: calc(100% - 24px);
  margin: 0 auto;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.banner[data-type=vertical][data-style=logo] .banner-vertical__thumb {
  border-radius: 12px;
  overflow: hidden;
}
.banner[data-type=vertical][data-style=logo] .banner-vertical__thumb:not(.element__thumb) img {
  width: 100%;
  max-width: none;
}
.banner[data-type=vertical][data-style=logo] .banner-vertical .banner-ad {
  padding: 8px;
}
.banner[data-type=vertical][data-style=image] .banner-vertical {
  position: relative;
  display: block;
}
.banner[data-type=vertical][data-style=image] .banner-vertical__image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.banner[data-type=vertical][data-style=image] .banner-vertical__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.banner[data-type=vertical][data-style=image] .banner-vertical__image .banner-ad {
  padding: 10px;
}
.banner[data-type=vertical][data-style=image] .banner-vertical__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 4px;
}
.banner[data-type=vertical][data-style=image] .banner-vertical__title {
  min-width: 0;
  font-size: var(--font-body-1-size, 1.125rem);
  font-weight: var(--font-body-1-sb-weight, 600);
  line-height: var(--font-body-1-line-height, 1.5);
  letter-spacing: var(--font-body-1-letter-spacing, -0.005em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banner[data-type=vertical][data-style=image] .banner-vertical__title p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banner[data-type=vertical][data-style=image] .banner-vertical__bottom {
  gap: 6px;
}
.banner[data-type=vertical][data-style=image] .banner-vertical__bottom .btn {
  flex-shrink: 0;
}
.banner[data-type=vertical][data-style=image] .banner-vertical__text {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.banner[data-type=vertical][data-style=image] .image-swiper {
  position: relative;
}
.banner[data-type=vertical][data-style=image] .image-swiper .banner-units {
  bottom: 10px;
  right: 10px;
}
.banner[data-type=vertical][data-style=image][data-size=m] .swiper-slide {
  width: 154px;
  margin-right: auto;
}
.banner[data-type=vertical][data-style=image][data-size=m] .banner-vertical {
  width: 154px;
}
.banner[data-type=vertical][data-style=image][data-size=m] .banner-vertical__image {
  aspect-ratio: 154/206;
}
.banner[data-type=vertical][data-style=image][data-size=m] .banner-vertical__image .banner-ad {
  padding: 8px;
}
.banner[data-type=vertical][data-style=image][data-size=m] .banner-vertical__content {
  margin-top: 10px;
}
.banner[data-type=vertical][data-style=image][data-size=m] .banner-vertical__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banner[data-type=vertical][data-style=image][data-size=l] .banner-vertical__image {
  aspect-ratio: 350/197;
}
.banner[data-type=vertical][data-style=image][data-size=l] .banner-vertical__image .banner-ad {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.banner[data-type=vertical][data-style=image][data-size=l] .banner-vertical__image .banner-ad .disclaimer {
  color: var(--color-bg-overlay-wt-thick, rgba(255, 255, 255, 0.8));
}
.banner[data-type=vertical][data-style=image][data-size=l] .banner-vertical__content {
  margin-top: 16px;
  padding-left: 4px;
  padding-right: 4px;
}
.banner[data-type=vertical][data-style=image][data-size=xl] .banner-vertical__image {
  aspect-ratio: 350/197;
}
.banner[data-type=vertical][data-style=image][data-size=xl] .banner-vertical__image .banner-ad {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.banner[data-type=vertical][data-style=image][data-size=xl] .banner-vertical__image .banner-ad .disclaimer {
  color: var(--color-bg-overlay-wt-thick, rgba(255, 255, 255, 0.8));
}
.banner[data-type=vertical][data-style=image][data-size=xl] .banner-vertical__brand {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-fg-neutral-subtle, #5f646c);
  margin-bottom: 4px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.banner[data-type=vertical][data-style=image][data-size=xl] .banner-vertical__content {
  margin-top: 16px;
  padding-left: 4px;
  padding-right: 4px;
}
.banner[data-type=vertical][data-style=image][data-size=xl] .banner-vertical__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.banner[data-type=vertical][data-style=image][data-size=xl] .pagination-dot:not(.active) {
  background-color: var(--color-bg-overlay-wt-basic, rgba(255, 255, 255, 0.4));
}
.banner[data-type=vertical] .banner-timer .label {
  border-top-left-radius: 12px;
}
.banner:not([data-type=network], [data-type=special-button], [data-type=sdk], [data-type=title-only], .modal-banner) {
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
  width: auto;
}
@media screen and (max-width: 480px) {
  .banner:not([data-type=network], [data-type=special-button], [data-type=sdk], [data-type=title-only], .modal-banner) {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.banner:not([data-type=network], [data-type=special-button], [data-type=sdk], [data-type=title-only], .modal-banner) .swiper-container {
  position: relative;
}

.banner-band {
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 12px;
}
.banner-band[data-color=outline] {
  position: relative;
  z-index: 0;
  border: 1px solid var(--color-gradient-red-basic, rgba(251, 24, 34, 0.4));
}
.banner-band[data-color=fill] {
  background-color: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
}
.banner-band[data-color=red] {
  background-color: var(--color-bg-brand-weak, #fff0f1);
  position: relative;
  z-index: 0;
  border: 1px solid var(--color-gradient-red-basic, rgba(251, 24, 34, 0.4));
}
.banner-band .banner-band__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
}
.banner-band .banner-band__info {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.banner-band .banner-band__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-brand-solid, #fb1822);
  flex-shrink: 0;
}
.banner-band .banner-band__title {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  flex: 1;
  padding-left: 2px;
}
.banner-band .banner-band__title__wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  word-break: keep-all;
}
.banner-band .banner-band__title--red {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  color: var(--color-fg-brand-solid, #fb1822);
}
.banner-band .banner-band__title--sub {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.banner-band .banner-band__action {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.banner-band .banner-band__action .txt {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-brand-solid, #fb1822);
}
.banner-band .banner-band__arrow {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.banner-band[data-size=l] .banner-content {
  padding: 20px;
}
.banner-band[data-size=l] .banner-band__info {
  gap: 12px;
}
.banner-band[data-size=l] .banner-band__icon {
  width: 32px;
  height: 32px;
}
.banner-band[data-size=l] .banner-band__icon svg, .banner-band[data-size=l] .banner-band__icon img {
  width: 100%;
  height: 100%;
}
.banner-band[data-size=l] .banner-band__title,
.banner-band[data-size=l] .banner-band__action .txt {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.banner-band[data-type=image] .banner-band__info {
  gap: 10px;
}
.banner-band[data-type=image] .banner-band__icon {
  width: 80px;
  height: 80px;
}
.banner-band[data-type=image] .banner-band__icon svg, .banner-band[data-type=image] .banner-band__icon img {
  width: 100%;
  height: 100%;
}
.banner-band[data-type=image][data-align=reverse] .banner-band__info {
  flex-direction: row-reverse;
  justify-content: space-between;
}
.banner-band[data-type=image][data-size=l] .banner-band__content {
  padding: 0 20px 0 16px;
}
.banner-band[data-type=image][data-size=l] .banner-band__icon {
  width: 104px;
  height: 104px;
}

.container:not(.bottom-button[data-content-padding=false]) .banner[data-type=network][data-position=bottom] {
  margin: 0 -24px;
  width: auto;
}
@media screen and (max-width: 480px) {
  .container:not(.bottom-button[data-content-padding=false]) .banner[data-type=network][data-position=bottom] {
    margin: 0 -20px;
  }
}
.container:not(.bottom-button[data-content-padding=false]) .banner[data-type=network][data-border=none] {
  margin: 0 -24px;
  width: auto;
}
@media screen and (max-width: 480px) {
  .container:not(.bottom-button[data-content-padding=false]) .banner[data-type=network][data-border=none] {
    margin: 0 -20px;
  }
}

/*-----------------------------*/
/*    Title    */
/*-----------------------------*/
.title-component {
  color: #222832;
}
.title-component .title-component__text {
  color: var(--color-fg-neutral-subtle, #5f646c);
  margin-top: 10px;
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.title-component .title-component__desc {
  color: var(--color-fg-neutral-muted, #6A6F77);
  margin-top: 4px;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.title-component .title-component__right-text {
  color: var(--color-fg-neutral-muted, #6A6F77);
  align-items: flex-end;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.title-component .title-component__button {
  position: relative;
}
.title-component .title-component__button--icon {
  display: flex;
  width: 20px;
  height: 20px;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.title-component .title-component__button--icon svg, .title-component .title-component__button--icon img {
  width: 100%;
  height: 100%;
}
.title-component[data-size=l] {
  padding-bottom: 40px;
}
.title-component[data-size=l] .title-component__title {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.title-component[data-size=l] .title-component__text, .title-component[data-size=l] .title-component__desc {
  margin-top: 10px;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.title-component[data-size=m] {
  padding-bottom: 16px;
}
.title-component[data-size=m] .title-component__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.title-component[data-size=m] .title-component__desc {
  color: var(--color-fg-neutral-muted, #6A6F77);
  margin-top: 4px;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.title-component[data-size=s] {
  padding-bottom: 10px;
}
.title-component[data-size=s] .title-component__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.title-component[data-size=s] .title-component__desc {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.title-component[data-size=s][data-gap=true] .title-component__title {
  display: flex;
  align-items: center;
  gap: 4px;
}
.title-component[data-size=s][data-gap=true] .title-component__title span {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.title-component[data-size=xs] {
  padding-bottom: 8px;
}
.title-component[data-size=xs] .title-component__title {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.title-component[data-align=center] {
  text-align: center;
}
.title-component[data-align=center] .title-component__text {
  margin-left: auto;
  margin-right: auto;
}
.title-component[data-align=center] .title-component__desc {
  margin-left: auto;
  margin-right: auto;
}
.title-component[data-button=on], .title-component[data-right-text=true], .title-component[data-label=true] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title-component.no-bottom {
  padding-bottom: 0;
}
.title-component .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.title-component .gray-txt {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.title-component .red-gradient {
  color: var(--color-fg-brand-solid, #fb1822);
  background: linear-gradient(90deg, rgba(251, 24, 34, 0.4) 0%, var(--color-fg-brand-solid, #fb1822) 40%, var(--color-fg-brand-solid, #fb1822) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title-component[data-numbering=on] .title-component__numbering {
  position: relative;
  padding-left: 25px;
}
.title-component[data-numbering=on] .title-component__numbering .num {
  position: absolute;
  top: 0.75em;
  transform: translateY(-50%);
  left: 0;
  width: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-component[data-numbering=on][data-size=l] {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.title-component[data-numbering=on][data-size=m] {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.title-component[data-numbering=on][data-size=s] {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.title-component[data-type=graphic] {
  position: relative;
  padding-right: 136px;
}
.title-component[data-type=graphic] .title-component__graphic {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 136px;
  display: flex;
  justify-content: flex-end;
}
.title-component[data-type=graphic] .title-component__graphic img {
  width: 128px;
  height: auto;
  max-width: none;
}
.title-component[data-type=event] .title-component__title {
  font-size: var(--font-heading-2-size, 1.75rem);
  font-weight: var(--font-heading-2-weight, 600);
  line-height: var(--font-heading-2-line-height, 1.4);
  letter-spacing: var(--font-heading-2-letter-spacing, -0.005em);
}
.title-component[data-type=event] .title-component__title-point {
  display: inline-block;
  font-size: var(--font-heading-2-size, 1.75rem);
  font-weight: var(--font-heading-2-weight, 600);
  line-height: var(--font-heading-2-line-height, 1.4);
  letter-spacing: var(--font-heading-2-letter-spacing, -0.005em);
  color: var(--color-fg-brand-solid, #fb1822);
  background: linear-gradient(97deg, rgba(251, 24, 34, 0.5) 0%, var(--color-fg-brand-solid, #fb1822) 33%, var(--color-fg-brand-solid, #fb1822) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.title-component[data-divider=true] {
  border-bottom: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}

/*-----------------------------*/
/*    Label    */
/*-----------------------------*/
/* Common Label Styles */
.label {
  display: inline-flex;
  border-radius: 6px;
  padding: 3px 5px;
  font-size: var(--font-caption-4-size, 0.6875rem);
  font-weight: var(--font-caption-4-sb-weight, 600);
  line-height: var(--font-caption-4-line-height, 1.4);
  letter-spacing: var(--font-caption-4-letter-spacing, -0.005em);
}
.label[data-color=gradient] {
  background: linear-gradient(129deg, #FF4769 17%, #FF333C 89.23%);
  color: #ffffff;
}
.label[data-color=red] {
  background: var(--color-bg-brand-solid, #fb1822);
  color: #ffffff;
}
.label[data-color=red-border] {
  border: 1px solid var(--color-fg-brand-solid, #fb1822);
  color: #fb1822;
}
.label[data-color=pink] {
  background: var(--color-bg-brand-weak, #fff0f1);
  color: #fb1822;
}
.label[data-color=gray] {
  background: var(--color-bg-neutral-weak, #f0f3f5);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.label[data-color=gray50] {
  background: var(--color-bg-neutral-weak, #f0f3f5);
  color: var(--color-fg-neutral-solid, #222832);
}
.label[data-color=gray100] {
  background: var(--color-bg-neutral-disabled, #dee1e4);
  color: var(--color-fg-neutral-solid, #222832);
}
.label[data-color=gray700] {
  background: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.label[data-color=black] {
  background: var(--color-bg-neutral-subtle, #4a4f57);
  color: #ffffff;
}
.label[data-color=black-border] {
  border: 1px solid var(--color-border-neutral-inverted, #ffffff);
  background: var(--color-bg-neutral-solid, #222832);
  color: #ffffff;
}
.label[data-color=dim40] {
  background: var(--color-bg-overlay-bk-basic, rgba(0, 0, 0, 0.4));
  color: #ffffff;
}
.label[data-color=yellow] {
  background: var(--color-bg-accent-yellow-weak, #fffae6);
  color: var(--color-fg-accent-yellow-solid, #ffc00e);
}
.label[data-state=disabled] {
  background: var(--color-bg-neutral-disabled, #dee1e4);
  color: var(--color-fg-neutral-disabled, #c8cccf);
}
.label[data-color=orange] {
  background: #fff7ed;
  color: #ef5b07;
}
.label[data-color=purple] {
  background: #f5f2ff;
  color: #8a5cff;
}
.label[data-color=neutral] {
  background: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
  color: var(--color-bg-neutral-subtle, #4a4f57);
}
.label[data-color=neutral-dark] {
  background: var(--color-bg-neutral-subtle, #4a4f57);
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.label[data-icon=on] {
  align-items: center;
  gap: 1px;
  padding: 2px 4px;
}
.label[data-icon=on] i {
  width: 16px;
  height: 16px;
}
.label[data-icon=on] i svg, .label[data-icon=on] i img {
  display: block;
  width: 100%;
  height: 100%;
}
.label[data-type=special] {
  position: relative;
  justify-content: center;
  align-items: center;
}
.label[data-type=special]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid var(--color-border-brand-solid, #fb1822);
  z-index: 1;
}
.label[data-type=special][data-color="red "]::before {
  border-color: var(--color-border-brand-solid, #fb1822);
}
.label[data-type=special][data-color=orange]::before {
  border-color: var(--color-fg-accent-orange-solid, #fe7611);
}
.label[data-type=special][data-color=purple]::before {
  border-color: var(--color-fg-accent-purple-solid, #8a5cff);
}
.label[data-type=timer] {
  padding: 3px 5px;
  gap: 2px !important;
  border-radius: 0;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 4px;
  z-index: 10;
  font-size: var(--font-caption-4-size, 0.6875rem);
  font-weight: var(--font-caption-4-sb-weight, 600);
  line-height: var(--font-caption-4-line-height, 1.4);
  letter-spacing: var(--font-caption-4-letter-spacing, -0.005em);
}
.label[data-type=timer] i {
  width: 12px;
  height: 12px;
}
.label .color-red {
  color: var(--color-fg-brand-solid, #fb1822) !important;
}

/* Ad Label Styles */
.ad__label {
  display: inline-flex;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  border-radius: 6px;
  padding: 2px 3px 1px;
  font-size: 8px;
}

/* pointer label styles */
.point__label {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  border-radius: 12px;
}
.point__label svg, .point__label img {
  width: 16px;
  height: 16px;
}
.point__label[data-state=before] {
  background-color: var(--color-bg-brand-solid, #fb1822);
  color: #ffffff;
  padding: 1px 4px 1px 2px;
}
.point__label[data-state=before-green] {
  background-color: var(--color-fg-accent-green-solid, #10c177);
  color: #ffffff;
  padding: 1px 4px 1px 2px;
  line-height: 1;
}
.point__label[data-state=before-purple] {
  background-color: var(--color-fg-accent-purple-solid, #8a5cff);
  color: #ffffff;
  padding: 1px 4px 1px 2px;
  line-height: 1;
}
.point__label[data-state=completed] {
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.1389 5.164C20.6005 4.68853 21.3606 4.6771 21.8361 5.13861C22.3116 5.60021 22.323 6.36035 21.8615 6.83588L10.2111 18.8359C9.75389 19.3068 9.00268 19.3228 8.52558 18.872L2.17598 12.872C1.69437 12.4168 1.67299 11.6574 2.12812 11.1757C2.5833 10.6941 3.34273 10.6727 3.82441 11.1279L9.31367 16.3144L20.1389 5.164Z' fill='white'/%3E%3C/svg%3E%0A");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--color-bg-neutral-muted, #9da1a7);
  border: 50%;
}
.point__label[data-state=completed] span, .point__label[data-state=completed] svg, .point__label[data-state=completed] img {
  display: none;
}
.point__label[data-state=end] {
  background-color: var(--color-fg-neutral-disabled, #c8cccf);
  color: #ffffff;
  padding: 1px 4px 1px 2px;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.33594 7.9998C1.33594 12.427 3.57542 14.6665 8.0026 14.6665C12.4298 14.6665 14.6693 12.4205 14.6693 7.9998C14.6693 3.57908 12.4233 1.33313 8.0026 1.33313C3.58189 1.33313 1.33594 3.57908 1.33594 7.9998Z' fill='white'/%3E%3Cpath d='M6.56743 9.74331C6.38995 9.74331 6.31496 9.65835 6.31496 9.47486V5.13118C6.31496 5.02837 6.23516 4.94556 6.1361 4.94556H5.0148C4.91574 4.94556 4.83594 5.02837 4.83594 5.13118V9.80471C4.83594 10.5929 5.27345 11.0427 6.06319 11.0427H9.52755C9.62661 11.0427 9.7064 10.9599 9.7064 10.8571V9.92893C9.7064 9.82612 9.62661 9.74331 9.52755 9.74331H6.56743Z' fill='%23B2B6BA'/%3E%3Cpath d='M10.4609 10.3931C10.4609 10.8814 10.699 11.1285 11.1695 11.1285C11.64 11.1285 11.8781 10.8807 11.8781 10.3931C11.8781 9.90546 11.6393 9.65771 11.1695 9.65771C10.6996 9.65771 10.4609 9.90546 10.4609 10.3931Z' fill='%23B2B6BA'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 2px;
}
.point__label[data-state=end] svg, .point__label[data-state=end] img {
  opacity: 0;
}

/* Numbering Label Styles */
.numbering__label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  border-radius: 9999px;
}
.numbering__label[data-state=default] {
  background-color: var(--color-bg-neutral-muted, #9da1a7);
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.numbering__label[data-state=disabled] {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  color: var(--color-fg-neutral-disabled, #c8cccf);
}
.numbering__label[data-state=active] {
  background-color: var(--color-bg-brand-solid, #fb1822);
  color: var(--color-fg-neutral-inverted, #ffffff);
}

/*-----------------------------*/
/*    List    */
/*-----------------------------*/
.list-component {
  padding: 16px 0;
}
.list-component__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 12px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  height: 104px;
}
.list-component__container > * {
  width: 100%;
}
.list-component__container[data-height=hug] {
  height: fit-content;
}
.list-component__container[data-bg=gray] {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-color: var(--color-border-neutral-weak, #f0f3f5);
}
.list-component__container[data-bg=dis-border-white] {
  border: transparent solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.list-component__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-component__inner {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.list-component__inner.flex-start {
  align-items: flex-start !important;
}
.list-component__inner.flex-start .list-component__info {
  align-items: flex-start !important;
}
.list-component__info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}
.list-component__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.list-component__grab-handle {
  color: var(--color-icon-neutral-muted, #b2b6ba);
  width: 20px;
  height: 20px;
  cursor: grab;
  flex-shrink: 0;
}
.list-component__grab-handle svg {
  width: 100%;
  height: 100%;
}
.list-component__btn-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-component__more-btn {
  display: block;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
  width: 20px;
  height: 20px;
}
.list-component__grab-handle, .list-component__more-btn {
  position: relative;
}
.list-component__grab-handle::before, .list-component__more-btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.list-component__tit {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.list-component__tit.font-bold {
  font-weight: 600 !important;
}
.list-component__tit:has(.list-component__tit-icon) {
  display: flex;
  align-items: center;
  gap: 4px;
}
.list-component__tit-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.list-component__tit-icon svg, .list-component__tit-icon img {
  width: 100%;
  height: 100%;
}
.list-component__txt {
  width: fit-content;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.list-component__txt-divider {
  display: block;
  width: 1px;
  height: 12px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
  margin: 0 4px;
}
.list-component__point {
  color: var(--color-fg-accent-red-solid-800, #ae060d);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.list-component__utility {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  width: 40%;
  text-align: right;
}
.list-component__icons {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  line-height: 1;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.list-component__icons .bold {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.list-component__icons .list-component__arrow {
  padding: 0;
}
.list-component__arrow {
  width: 16px;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.list-component__desc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-r-weight, 400);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
  margin-top: 10px;
}
.list-component__desc span {
  display: inline-block;
  position: relative;
  padding-left: 6px;
}
.list-component__desc span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.list-component__desc span:first-child {
  padding-left: 0;
}
.list-component__desc span:first-child::before {
  display: none;
}
.list-component__thumb, .list-component__label {
  flex-shrink: 0;
}
.list-component__label:has(.point__label) {
  height: 18px;
}
.list-component__point-txt {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.list-component__scrap-btn {
  display: flex;
  width: 20px;
  height: 20px;
}
.list-component__scrap-btn i, .list-component__scrap-btn svg, .list-component__scrap-btn path {
  width: 100%;
  height: 100%;
}
.list-component__scrap-btn .icon--scrap {
  position: relative;
}
.list-component__scrap-btn .icon--scrap::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.list-component__scrap-btn .icon--scrap.active .icon__default {
  display: none;
}
.list-component__scrap-btn .icon--scrap.active .icon__active {
  display: block;
}
.list-component__scrap-btn .icon__default {
  display: block;
}
.list-component__scrap-btn .icon__active {
  display: none;
}
.list-component__right-arrow-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.list-component[data-label=on] .label {
  margin-bottom: 6px;
}
.list-component[data-thumb=xs] .list-component__info {
  gap: 8px;
}
.list-component[data-thumb=xs] .list-component__content {
  width: calc(100% - 36px - 8px);
}
.list-component[data-thumb=s] .list-component__content {
  width: calc(100% - 40px - 12px);
}
.list-component[data-thumb=m] .list-component__content {
  width: calc(100% - 44px - 12px);
  gap: 2px;
}
.list-component[data-thumb=xl] .list-component__content {
  width: calc(100% - 64px - 12px);
}
.list-component[data-padding=s] {
  padding: 12px 0;
}
.list-component[data-padding="2xs"] {
  padding: 8px 0;
}
.list-component[data-padding=l] {
  padding: 20px 0;
}
.list-component[data-dot=true] .list-component__tit .list-component__dot-wrap {
  white-space: nowrap;
}
.list-component[data-dot=true] .list-component__tit .list-component__dot {
  display: inline-flex;
  position: relative;
  width: 5px;
  height: 1em;
  margin-left: 2px;
}
.list-component[data-dot=true] .list-component__tit .list-component__dot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-radius: 9999px;
  background-color: var(--color-fg-brand-solid, #fb1822);
}
.list-component[data-title-label=true] .list-component__tit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.list-component[data-border=true] {
  border-radius: 10px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  padding-right: 12px !important;
  padding-left: 12px !important;
  min-height: 54px;
  display: flex;
  align-items: center;
}
.list-component[data-thumb-dir=vertical] .element__thumb[data-type=card] img,
.list-component[data-thumb-dir=vertical] .element__thumb img {
  transform: rotate(90deg);
  padding: 0 4.5%;
}
.list-component .align-center {
  align-items: center;
}
.list-component .align-flex-start {
  align-items: flex-start !important;
}
.list-component .space-between {
  justify-content: space-between;
}
.list-component .color-red {
  color: var(--color-fg-brand-solid, #fb1822);
}
.list-component .color-gray-muted {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.list-component .color-gray {
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.list-component .color-accent {
  color: var(--color-fg-accent-red-solid-800, #ae060d);
}
.list-component[data-size=s][data-padding=true] {
  padding: 12px 0;
}
.list-component[data-size=s][data-padding=xs] {
  padding: 10px 0;
}
.list-component[data-size=s][data-padding=false] {
  padding: 0;
}
.list-component[data-size=s][data-checkbox=true] .list-component__inner {
  gap: 12px;
}
.list-component[data-size=s][data-checkbox=true] .checkbox__box {
  width: 24px;
}
.list-component[data-size=s][data-checkbox=true] .checkbox__box .checkbox__label {
  padding-left: 0;
}
.list-component[data-size=s][data-checkbox=true] .list-component__info {
  width: calc(100% - 24px - 12px);
}
.list-component[data-size=s][data-title-label=true] .list-component__tit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.list-component[data-size=s][data-title-label=false] .list-component__tit .label {
  display: none;
}
.list-component[data-size=s][data-input] .list-component__inner {
  justify-content: flex-start;
}
.list-component[data-size=s][data-input] .radio__box {
  width: 20px;
}
.list-component[data-size=s][data-input] .radio__box .radio__label {
  display: flex;
  padding-left: 20px;
}
.list-component[data-size=s][data-input] .radio__box[data-type=fixed] {
  width: 100%;
}
.list-component[data-size=s][data-input] .radio__box[data-type=fixed] .radio__label {
  padding-left: 32px;
}
.list-component[data-size=s][data-input] .checkbox__box .checkbox__label {
  padding-left: 32px;
  display: flex;
  align-items: center;
  width: 100%;
}
.list-component[data-size=s][data-input] .checkbox__box .checkbox__label::after, .list-component[data-size=s][data-input] .checkbox__box .checkbox__label::before {
  top: 50%;
}
.list-component[data-size=s][data-align=top] .list-component__info {
  align-items: flex-start !important;
}
.list-component[data-size=s][data-active=true] .list-component__tit {
  position: relative;
  padding-right: 20px;
  color: var(--color-fg-brand-solid, #fb1822);
}
.list-component[data-size=s][data-active=true] .list-component__tit::before {
  content: "";
  position: absolute;
  right: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.list-component[data-size=s][data-active=true] .list-component__tit::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.1389 5.164C20.6005 4.68853 21.3606 4.6771 21.8361 5.13861C22.3116 5.60021 22.323 6.36035 21.8615 6.83588L10.2111 18.8359C9.75389 19.3068 9.00268 19.3228 8.52558 18.872L2.17598 12.872C1.69437 12.4168 1.67299 11.6574 2.12812 11.1757C2.5833 10.6941 3.34273 10.6727 3.82441 11.1279L9.31367 16.3144L20.1389 5.164Z' fill='%23FB1822'/%3E%3C/svg%3E%0A");
}
.list-component[data-size=s] .list-component__inner {
  align-items: center;
}
.list-component[data-size=s] .list-component__info {
  align-items: center;
}
.list-component[data-size=s] .list-component__content {
  justify-content: space-between;
  width: auto;
  flex: 1;
  gap: 2px;
}
.list-component[data-size=s] .list-component__tit {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.list-component[data-size=s] .list-component__txt {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.list-component[data-size=s] .list-component__icons {
  gap: 2px;
}
.list-component[data-state=expired] .list-component__thumb {
  opacity: 0.2;
}
.list-component[data-state=expired-thumb-dimed] .list-component__thumb {
  position: relative;
}
.list-component[data-state=expired-thumb-dimed] .list-component__thumb::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 3;
}
.list-component[data-state=expired-text] .list-component__tit,
.list-component[data-state=expired-text] .list-component__txt {
  color: var(--color-fg-neutral-disabled, #c8cccf);
}

.unit-list__point {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 10px;
}
.unit-list__point[data-size=s] {
  padding: 12px 16px;
  border-radius: 10px;
}
.unit-list__point[data-bg=white] {
  background-color: var(--color-bg-neutral-inverted, #ffffff);
}
.unit-list__point .title-component__title {
  text-align: left;
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.unit-list__point.depth-1 {
  position: relative;
  height: fit-content;
  padding-left: 15px;
}
.unit-list__point.depth-1::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 3px;
  height: calc(100% - 8px);
  padding: 4px 0;
  background: var(--color-icon-neutral-muted, #b2b6ba);
}
.unit-list__point-list {
  position: relative;
  padding-left: 15px;
}
.unit-list__point-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background-color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.unit-list__point .title-component + .element-list-text[data-size=l] {
  margin-top: 4px;
}
.unit-list__point .element-list-text[data-size=l] + .element-list-text[data-size=l] {
  margin-top: 12px;
}
.unit-list__point .element-list-text[data-size=l] + .unit-list__point-list {
  margin-top: 12px;
}
.unit-list__point .element-list-text[data-size=s] + .element-list-text[data-size=s] {
  margin-top: 10px;
}
.unit-list__charge {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.unit-list__charge-content {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
}
.unit-list__charge-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.unit-list__charge-item {
  display: flex;
  gap: 4px;
}
.unit-list__charge-item[data-color=gray] {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.unit-list__charge-label {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.unit-list__charge-value {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.unit-list__charge-value .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.unit-list__charge .red-text {
  color: var(--color-fg-brand-solid, #fb1822);
}
.unit-list__charge-account {
  display: flex;
  gap: 4px;
  align-items: center;
}
.unit-list__charge-account .unit-list__charge-label {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.unit-list__charge-account .unit-list__charge-value {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}

/* Unit/List_txt only  */
.pa-unit-list-txt {
  /* data-order="first" → 첫 아이템 상단 보더 제거  > first-child 로 구분 하기 */
  /*  data-dot="true" → 타이틀 우측 점 표시 */
  padding: 20px 0;
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  display: flex;
  align-items: center;
  gap: 10px;
}
.pa-unit-list-txt:first-child {
  border-top: none;
}
.pa-unit-list-txt__inner {
  flex: 1;
}
.pa-unit-list-txt__title {
  position: relative;
  width: fit-content;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.pa-unit-list-txt__title::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 2px;
  vertical-align: text-top;
  border-radius: 9999px;
  background-color: var(--color-bg-brand-solid, #fb1822);
  opacity: 0;
}
.pa-unit-list-txt__description {
  padding-top: 6px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.pa-unit-list-txt__label .label {
  padding: 2.5px 4px;
  border-radius: 4px;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-4-size, 0.6875rem);
  font-weight: var(--font-caption-4-sb-weight, 600);
  line-height: var(--font-caption-4-line-height, 1.4);
  letter-spacing: var(--font-caption-4-letter-spacing, -0.005em);
}
.pa-unit-list-txt__label .label[data-active=true] {
  background-color: var(--color-bg-neutral-subtle, #4a4f57);
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.pa-unit-list-txt__icon svg {
  width: 16px;
  height: 16px;
  color: #C8CCCF;
}
.pa-unit-list-txt[data-dot=true] .pa-unit-list-txt__title::after {
  opacity: 1;
}

/*-----------------------------*/
/*    Element Thumb    */
/*-----------------------------*/
.element__thumb {
  position: relative;
  display: inline-block;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
  will-change: transform, opacity;
  width: 44px; /*기본 사이즈 (m)*/
  height: 44px; /*기본 사이즈 (m)*/
}
.element__thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
  will-change: transform, opacity;
}
.element__thumb[data-thumb=xxs] {
  width: 24px;
  height: 24px;
}
.element__thumb[data-thumb=xs] {
  width: 32px;
  height: 32px;
}
.element__thumb[data-thumb=s] {
  width: 40px;
  height: 40px;
}
.element__thumb[data-thumb=s][data-type=icon] img, .element__thumb[data-thumb=s][data-type=icon-bg-white] img {
  width: 24px;
  height: 24px;
}
.element__thumb[data-thumb=m] {
  width: 44px;
  height: 44px;
}
.element__thumb[data-thumb=m][data-type=icon] img, .element__thumb[data-thumb=m][data-type=icon-bg-white] img {
  width: 28px;
  height: 28px;
}
.element__thumb[data-thumb=l] {
  width: 56px;
  height: 56px;
}
.element__thumb[data-thumb=xl] {
  width: 64px;
  height: 64px;
}
.element__thumb[data-thumb=xxl] {
  width: 112px;
  height: 112px;
}
.element__thumb[data-type=icon] {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.element__thumb[data-type=icon] img {
  width: 32px;
  height: 32px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.element__thumb[data-type=icon-bg] {
  background-size: 100% 100%;
}
.element__thumb[data-type=icon-bg] img {
  width: 32px;
  height: 32px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}
.element__thumb[data-type=icon-bg-white] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='59' viewBox='0 0 58 59' fill='none'%3E%3Cpath d='M29.0059 1.42493C38.3722 1.42498 45.5197 3.80032 50.3223 8.60364C55.1248 13.407 57.5 20.5558 57.5 29.9249C57.5 39.2941 55.1246 46.4429 50.3213 51.2462C45.5179 56.0496 38.3692 58.4249 29 58.4249C19.6308 58.4249 12.482 56.0482 7.67871 51.2443C2.8754 46.4402 0.500005 39.2914 0.5 29.9249C0.5 20.5586 2.87498 13.4096 7.67676 8.60559C12.4786 3.80161 19.6248 1.42501 28.9883 1.42493H29.0059Z' fill='white' stroke='%23F2F4F5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.element__thumb[data-type=icon-bg-white] img {
  width: 32px;
  height: 32px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}
.element__thumb[data-border=true]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' fill='none'%3E%3Cpath d='M25.0049 0.5C33.0443 0.500017 39.1916 2.53889 43.3262 6.67383C47.4607 10.809 49.5 16.958 49.5 25C49.5 33.042 47.4613 39.191 43.3262 43.3262C39.191 47.4613 33.042 49.5 25 49.5C16.9579 49.5 10.809 47.46 6.67383 43.3242C2.53874 39.1885 0.500003 33.0396 0.5 25C0.5 16.9604 2.53899 10.8115 6.67285 6.67578C10.8067 2.54012 16.953 0.500025 24.9902 0.5H25.0049Z' stroke='%23F2F4F5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 4;
}
.element__thumb[data-border=red-gradient] img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
  transform: translate(-50%, -50%);
  padding: 2px;
}
.element__thumb[data-border=red-gradient]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.9912 1.5H22.0049C29.0653 1.50008 34.1174 3.28895 37.4141 6.58594C40.7108 9.88317 42.5 14.9368 42.5 22C42.5 29.0632 40.7113 34.1169 37.4141 37.4141C34.1169 40.7113 29.0632 42.5 22 42.5C14.9371 42.5 9.88324 40.7099 6.58594 37.4121C3.28874 34.1143 1.5 29.0607 1.5 22C1.5 14.9392 3.28856 9.88479 6.58496 6.58691C9.88124 3.28926 14.933 1.5 21.9912 1.5Z' stroke='white' stroke-width='3'/%3E%3Cpath d='M21.9912 1H22.0049C29.1443 1.00008 34.346 2.80934 37.7686 6.23242C41.1911 9.65561 43 14.8582 43 22C43 29.142 41.1908 34.3444 37.7676 37.7676C34.3444 41.1908 29.142 43 22 43C14.8582 43 9.65566 41.1894 6.23242 37.7656C2.80929 34.3418 1 29.1396 1 22C1 14.8605 2.80934 9.65818 6.23145 6.23438C9.65363 2.81065 14.8539 1 21.9912 1Z' stroke='url(%23paint0_linear_25_465)' stroke-width='2'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_25_465' x1='0' y1='0' x2='53.0772' y2='23.4852' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C75BDC'/%3E%3Cstop offset='0.5' stop-color='%23FF4769'/%3E%3Cstop offset='1' stop-color='%23FB1822'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: 100% 100%;
  z-index: 4;
}
.element__thumb[data-type=card] {
  background: none;
  mask: none;
  overflow: hidden;
  align-items: center;
  justify-items: center;
  aspect-ratio: 25/41;
}
.element__thumb[data-type=card] img {
  width: 100%;
  height: 100%;
  aspect-ratio: 25/41;
  object-fit: contain;
  padding: 4.5% 0;
}
.element__thumb[data-disabled=true]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-overlay-bk-thin, rgba(0, 0, 0, 0.2));
  z-index: 5;
}
.element__thumb[data-disabled=card]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 25/41;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9.16992' y='1.83331' width='25.6667' height='40.3333' rx='2' fill='black' fill-opacity='0.4'/%3E%3Cpath d='M19.8772 16.2893C20.8212 14.6595 23.1793 14.6595 24.1233 16.2893L28.9348 24.5969C29.8808 26.2305 28.6963 28.2668 26.8118 28.2668H17.1877C15.3035 28.2665 14.1189 26.2304 15.0647 24.5969L19.8772 16.2893ZM23.0842 16.8909C22.6025 16.0592 21.397 16.0592 20.9153 16.8909L16.1038 25.1975C15.6243 26.0253 16.2212 27.0663 17.1877 27.0667H26.8118C27.7786 27.0666 28.3762 26.0254 27.8967 25.1975L23.0842 16.8909ZM22.0002 24.0598C22.3315 24.0599 22.5999 24.3291 22.5999 24.6604C22.5997 24.9916 22.3314 25.2599 22.0002 25.26C21.669 25.26 21.3998 24.9916 21.3997 24.6604C21.3997 24.329 21.6689 24.0598 22.0002 24.0598ZM22.0002 18.6663C22.3333 18.6664 22.5996 18.9398 22.5999 19.2795V22.7131C22.5999 23.0531 22.3335 23.3263 22.0002 23.3264C21.6669 23.3264 21.3997 23.0531 21.3997 22.7131V19.2795C21.3999 18.9398 21.6671 18.6663 22.0002 18.6663Z' fill='white'/%3E%3C/svg%3E%0A");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 5;
}
.element__thumb[data-dot=true] {
  position: relative;
  overflow: visible;
  mask-image: url("data:image/svg+xml,%0A%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.0044 0H21.9912C7.4008 0 0 7.4052 0 22C0 36.5948 7.4008 44 22 44C36.5992 44 44 36.5992 44 22C44 7.4008 36.5992 0 22.0044 0Z' fill='%230A1F41' fill-opacity='0.05'/%3E%3Cpath d='M21.9912 1.5H22.0049C29.0653 1.50008 34.1174 3.28895 37.4141 6.58594C40.7108 9.88317 42.5 14.9368 42.5 22C42.5 29.0632 40.7113 34.1169 37.4141 37.4141C34.1169 40.7113 29.0632 42.5 22 42.5C14.9371 42.5 9.88324 40.7099 6.58594 37.4121C3.28874 34.1143 1.5 29.0607 1.5 22C1.5 14.9392 3.28856 9.88479 6.58496 6.58691C9.88124 3.28926 14.933 1.5 21.9912 1.5Z' fill='black' stroke='black' stroke-width='3'/%3E%3Cpath d='M21.9912 1H22.0049C29.1443 1.00008 34.346 2.80934 37.7686 6.23242C41.1911 9.65561 43 14.8582 43 22C43 29.142 41.1908 34.3444 37.7676 37.7676C34.3444 41.1908 29.142 43 22 43C14.8582 43 9.65566 41.1894 6.23242 37.7656C2.80929 34.3418 1 29.1396 1 22C1 14.8605 2.80934 9.65818 6.23145 6.23438C9.65363 2.81065 14.8539 1 21.9912 1Z' stroke='black' stroke-width='2'/%3E%3Cpath d='M39 1.49998C40.933 1.49998 42.5 3.06699 42.5 4.99998C42.5 6.93298 40.933 8.49998 39 8.49998C37.067 8.49998 35.5 6.93298 35.5 4.99998C35.5 3.06699 37.067 1.49998 39 1.49998Z' fill='black'/%3E%3Cpath d='M39 1.49998C40.933 1.49998 42.5 3.06699 42.5 4.99998C42.5 6.93298 40.933 8.49998 39 8.49998C37.067 8.49998 35.5 6.93298 35.5 4.99998C35.5 3.06699 37.067 1.49998 39 1.49998Z' stroke='black'/%3E%3C/svg%3E%0A");
  -webkit-mask-image: url("data:image/svg+xml,%0A%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.0044 0H21.9912C7.4008 0 0 7.4052 0 22C0 36.5948 7.4008 44 22 44C36.5992 44 44 36.5992 44 22C44 7.4008 36.5992 0 22.0044 0Z' fill='%230A1F41' fill-opacity='0.05'/%3E%3Cpath d='M21.9912 1.5H22.0049C29.0653 1.50008 34.1174 3.28895 37.4141 6.58594C40.7108 9.88317 42.5 14.9368 42.5 22C42.5 29.0632 40.7113 34.1169 37.4141 37.4141C34.1169 40.7113 29.0632 42.5 22 42.5C14.9371 42.5 9.88324 40.7099 6.58594 37.4121C3.28874 34.1143 1.5 29.0607 1.5 22C1.5 14.9392 3.28856 9.88479 6.58496 6.58691C9.88124 3.28926 14.933 1.5 21.9912 1.5Z' fill='black' stroke='black' stroke-width='3'/%3E%3Cpath d='M21.9912 1H22.0049C29.1443 1.00008 34.346 2.80934 37.7686 6.23242C41.1911 9.65561 43 14.8582 43 22C43 29.142 41.1908 34.3444 37.7676 37.7676C34.3444 41.1908 29.142 43 22 43C14.8582 43 9.65566 41.1894 6.23242 37.7656C2.80929 34.3418 1 29.1396 1 22C1 14.8605 2.80934 9.65818 6.23145 6.23438C9.65363 2.81065 14.8539 1 21.9912 1Z' stroke='black' stroke-width='2'/%3E%3Cpath d='M39 1.49998C40.933 1.49998 42.5 3.06699 42.5 4.99998C42.5 6.93298 40.933 8.49998 39 8.49998C37.067 8.49998 35.5 6.93298 35.5 4.99998C35.5 3.06699 37.067 1.49998 39 1.49998Z' fill='black'/%3E%3Cpath d='M39 1.49998C40.933 1.49998 42.5 3.06699 42.5 4.99998C42.5 6.93298 40.933 8.49998 39 8.49998C37.067 8.49998 35.5 6.93298 35.5 4.99998C35.5 3.06699 37.067 1.49998 39 1.49998Z' stroke='black'/%3E%3C/svg%3E%0A");
}
.element__thumb[data-dot=true]::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1287_7549)'%3E%3Ccircle cx='5.33325' cy='5.17493' r='4.375' fill='%23FB1822' stroke='white' stroke-width='1.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1287_7549'%3E%3Crect width='10' height='10' fill='white' transform='translate(0.333252 0.175049)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: 100% 100%;
  z-index: 5;
}
.element__thumb[data-thumb-dir=vertical] img {
  transform: rotate(90deg);
  padding: 0 4.5%;
}

.element__quick-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.element__quick-menu__img {
  position: relative;
  padding: 0 4px;
}
.element__quick-menu__img[data-dot=true]::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 4px;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1287_7549)'%3E%3Ccircle cx='5.33325' cy='5.17493' r='4.375' fill='%23FB1822' stroke='white' stroke-width='1.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1287_7549'%3E%3Crect width='10' height='10' fill='white' transform='translate(0.333252 0.175049)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: 100% 100%;
  z-index: 5;
}
.element__quick-menu__tit {
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.element__quick-menu[data-size=m] .element__quick-menu__tit {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.element__quick-menu[data-size=l] .element__quick-menu__tit {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.element__quick-menu [data-tag=on] {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 2px 0 4px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  font-weight: 500;
  line-height: 1.2;
  font-size: 10px;
  z-index: 4;
}
.element__quick-menu[data-type=icon] .element__quick-menu__img {
  display: inline-flex;
}

/*-----------------------------*/
/*    Tab    */
/*-----------------------------*/
.tab-component__top-wrapper {
  position: relative;
  height: 46px;
}
.tab-component__content {
  display: none;
}
.tab-component__content.active {
  display: block;
}
.tab-component[data-type=chip] {
  padding-bottom: 16px;
}
.tab-component[data-type=chip]:not([data-row]) {
  margin-left: calc(-1 * 24px);
  margin-right: calc(-1 * 24px);
}
@media screen and (max-width: 480px) {
  .tab-component[data-type=chip]:not([data-row]) {
    margin-left: calc(-1 * 20px);
    margin-right: calc(-1 * 20px);
  }
}
.tab-component[data-type=chip]:not([data-row]) .swiper-container {
  padding: 0 24px;
}
@media screen and (max-width: 480px) {
  .tab-component[data-type=chip]:not([data-row]) .swiper-container {
    padding: 0 20px;
  }
}
.tab-component[data-type=chip]:not([data-row]) .swiper-slide {
  width: auto;
  margin-right: 6px;
}
.tab-component[data-type=chip] .tab-component__item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 50px;
  background-color: rgba(10, 31, 65, 0.05);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.05em;
  font-weight: 600;
  color: #9da1a7;
}
.tab-component[data-type=chip] .tab-component__item button {
  color: #9da1a7;
}
.tab-component[data-type=chip] .tab-component__item.active, .tab-component[data-type=chip] .tab-component__item.active button {
  background-color: #222832;
  color: #ffffff;
}
.tab-component[data-type=chip] .tab-component__item.dot {
  align-items: flex-start;
  gap: 4px;
  padding: 8px 8px 8px 12px;
}
.tab-component[data-type=chip] .tab-component__item.dot::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-bg-brand-solid, #fb1822);
}
.tab-component[data-type=chip] .tab-component__item svg {
  width: 16px;
  height: 16px;
  max-width: none;
}
.tab-component[data-type=text] .container {
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.tab-component[data-type=text] .swiper-initialized .swiper-slide {
  margin-right: 0;
}
.tab-component[data-type=text] .swiper-slide {
  width: auto;
  margin-right: 12px;
}
.tab-component[data-type=text] .tab-component__item {
  position: relative;
  display: inline-flex;
  padding: 10px 4px;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.05em;
  font-weight: 600;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.tab-component[data-type=text] .tab-component__item::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #222832;
  opacity: 0;
}
.tab-component[data-type=text] .tab-component__item.update span {
  position: relative;
}
.tab-component[data-type=text] .tab-component__item.update span::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: #ff5a61;
}
.tab-component[data-type=text] .tab-component__item.active {
  color: var(--color-fg-neutral-solid, #222832);
}
.tab-component[data-type=text] .tab-component__item.active::before {
  opacity: 1;
}
.tab-component[data-type=text][data-size=full] .tab-component__inner {
  display: flex;
  justify-content: space-between;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border-bottom: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  padding: 0;
  max-width: 760px;
  margin: 0 auto;
}
.tab-component[data-type=text][data-size=full] .tab-component__item {
  text-align: center;
  padding: 10px 4px;
  white-space: nowrap;
  justify-content: center;
  flex: 1;
}
.tab-component[data-type=quick-menu] .swiper-wrapper {
  gap: 8px;
}
.tab-component[data-type=quick-menu] .swiper-slide {
  width: auto;
}
.tab-component[data-type=anchor] {
  display: inline-flex;
  padding: 4px;
  border-radius: 10px;
  background-color: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
}
.tab-component[data-type=anchor] .tab-component__item {
  display: flex;
  justify-content: center;
  flex: 1;
  padding: 6px 12px;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  border-radius: 8px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.tab-component[data-type=anchor] .tab-component__item span {
  white-space: nowrap;
}
.tab-component[data-type=anchor] .tab-component__item.active {
  color: var(--color-fg-neutral-solid, #222832);
  background-color: #ffffff;
}
.tab-component[data-type=anchor] .tab-component__item.active::before {
  opacity: 1;
}
.tab-component[data-type=anchor][data-mode=dark] {
  background-color: var(--color-bg-overlay-bk-basic, rgba(0, 0, 0, 0.4));
}
.tab-component[data-type=anchor][data-mode=dark] .tab-component__item {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.tab-component[data-type=anchor][data-mode=dark] .tab-component__item.active {
  color: var(--color-fg-neutral-solid, #222832);
}
.tab-component[data-type=anchor][data-length="1"] {
  background: none;
}
.tab-component[data-type=control] {
  padding-bottom: 16px;
}
.tab-component[data-type=control][data-bg=transparent] .tab-component__item {
  background: transparent;
}
.tab-component[data-type=control] .swiper-slide {
  width: auto;
  padding-right: 6px;
}
.tab-component[data-type=control] .tab-component__item {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 8px 10px 8px 12px;
  background-color: #ffffff;
  border: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
  color: var(--color-fg-neutral-muted, #6A6F77);
  border-radius: 9999px;
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.tab-component[data-type=control] .tab-component__item.active {
  border-color: var(--color-border-neutral-solid, #222832);
  color: var(--color-fg-neutral-solid, #222832);
}
.tab-component[data-type=control] .tab-component__item.active svg {
  color: var(--color-fg-neutral-solid, #222832);
}
.tab-component[data-type=control] .tab-component__item svg {
  width: 12px;
  height: 12px;
}
.tab-component[data-type="2depth"] > .container {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-bottom: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.tab-component[data-type="2depth"] .swiper-slide {
  width: auto;
}
.tab-component[data-type="2depth"] .tab-component__item {
  display: block;
  padding: 10px 6px;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.tab-component[data-type="2depth"] .tab-component__item.active {
  color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.tab-component[data-special=true][data-type=chip] {
  display: flex;
}
.tab-component[data-special=true][data-type=chip] .special-box {
  position: relative;
  flex-shrink: 0;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  padding-left: 24px;
  z-index: 2;
}
.tab-component[data-special=true][data-type=chip] .special-box .tab-component__item.special {
  background: none;
  position: relative;
  z-index: 0;
  border-color: transparent;
}
.tab-component[data-special=true][data-type=chip] .special-box .tab-component__item.special::before {
  content: "";
  position: absolute;
  border-radius: inherit; /* 부모와 동일한 radius */
  padding: 1.5px; /* border 두께 (여기 조절) */
  background: var(--color-gradient-special, linear-gradient(114deg, #C75BDC 0%, #FF4769 50%, #FB1822 100%));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1; /* 박스 뒤로 보내기 */
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  left: -1px;
  top: -1px;
}
.tab-component[data-special=true][data-type=chip] .special-box .tab-component__item.special img {
  width: 16px;
  height: 16px;
}
.tab-component[data-special=true][data-type=chip] .special-box .tab-component__item.special span {
  background: var(--color-gradient-special, linear-gradient(114deg, #C75BDC 0%, #FF4769 50%, #FB1822 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tab-component[data-special=true][data-type=chip] .special-box .tab-component__item.special.dot svg, .tab-component[data-special=true][data-type=chip] .special-box .tab-component__item.special.dot img {
  margin-top: 2px;
}
.tab-component[data-special=true][data-type=chip] .special-box .tab-component__item.active {
  background-color: var(--color-bg-button-pink, rgba(255, 208, 211, 0.4));
}
.tab-component[data-special=true][data-type=chip] .tab-component__item.special {
  margin-right: 10px;
  white-space: nowrap;
}
.tab-component[data-special=true][data-type=chip] .swiper-container {
  position: relative;
  padding: 0 10px;
  padding-right: 24px;
  width: calc(100% - 95px);
}
.tab-component[data-special=true][data-type=chip] .swiper-container::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.tab-component[data-special=true][data-type=chip] .swiper-wrapper {
  padding-right: 24px;
}
@media screen and (max-width: 480px) {
  .tab-component[data-special=true][data-type=chip] .special-box {
    padding-left: 20px;
  }
  .tab-component[data-special=true][data-type=chip] .swiper-container,
  .tab-component[data-special=true][data-type=chip] .swiper-wrapper {
    padding-right: 20px;
  }
  .tab-component[data-special=true][data-type=chip] .swiper-container {
    margin-right: 20px;
  }
}
.tab-component[data-shadow=true] .container, .tab-component[data-shadow=true] .tab-component__inner {
  box-shadow: 0px 16px 20px 0 rgba(0, 0, 0, 0.04);
}
.tab-component[data-row="2"] {
  position: relative;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}
.tab-component[data-row="2"] .tab-component__scroll {
  display: flex;
  gap: 6px;
  width: max-content;
  width: 650px;
  flex-wrap: wrap;
  transition: transform 0.75s ease;
  cursor: grab;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
}
.tab-component[data-row="2"] .tab-component__scroll:active {
  cursor: grabbing;
}
.tab-component[data-row="2"] .tab-component__scroll.is-dragging {
  transition: none;
  cursor: grabbing;
}
.tab-component[data-row="2"] .tab-component__item {
  display: inline-flex;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  align-items: center;
}
.tab-component[data-position=top] {
  position: fixed !important;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 99;
  max-width: 761px;
}
.tab-component[data-position=middle] {
  display: flex;
  justify-content: center;
  z-index: 9;
}
.tab-component[data-position=middle] .tab-component__inner {
  width: 100%;
  max-width: 761px;
}
.tab-component[data-position=middle][data-fixed=true] {
  position: fixed !important;
  top: 53px;
  left: 0;
  width: 100%;
  overflow: hidden;
}
.tab-component[data-position=middle][data-fixed=false] {
  top: 0 !important;
}

.search-filter__container {
  padding-bottom: 16px;
}
.search-filter__container .tab-component[data-type=control] {
  padding-bottom: 12px;
}

.period-wrap {
  color: var(--color-fg-neutral-muted, #6A6F77);
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.period-wrap .inner {
  padding: 12px 0;
}
.period-wrap p {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}

/*-----------------------------*/
/*    Product    */
/*-----------------------------*/
/* 상품 list 형식 */
.product-component__container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 10px;
}
.product-component__container[data-type=horizontal] {
  grid-template-columns: 1fr;
  flex-direction: column;
  gap: 16px;
}
.product-component__container[data-type=horizontal] .product-component {
  width: 100%;
}
.product-component__container[data-type=vertical] {
  gap: 32px 10px;
}

/* 상품 컴포넌트 */
.product-component {
  position: relative;
}
.product-component a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.product-component .point__label {
  position: absolute;
  top: 0;
  right: 10px;
  transform: translateY(-50%);
  z-index: 2;
}
.product-component[data-point=on] .point__label {
  opacity: 1;
}
.product-component[data-point=off] .point__label {
  opacity: 0;
}
.product-component[data-dim=true] .thumb-product__wrap::before {
  opacity: 1;
  z-index: 2;
}
.product-component[data-dim=true] .thumb-product .element__like {
  z-index: 3;
}
.product-component[data-dim=true] .thumb-product .element__product-lday {
  z-index: 1;
}
.product-component[data-dim=true] .point__label {
  z-index: 3;
}
.product-component[data-type=vertical] .product-component__inner {
  display: flex;
  flex-direction: column;
}
.product-component[data-type=vertical][data-size=xl] .product-component__inner {
  border-radius: 16px;
  overflow: hidden;
  background-color: #ffffff;
}
.product-component[data-type=vertical][data-size=xl] .thumb-product {
  border-radius: 0;
}
.product-component[data-type=vertical][data-size=xl] .txt-product {
  padding: 16px;
}
.product-component[data-type=vertical][data-size=l] .product-component__inner {
  border-radius: 16px;
  overflow: hidden;
  background-color: #ffffff;
}
.product-component[data-type=vertical][data-size=l] .thumb-product {
  border-radius: 0;
}
.product-component[data-type=vertical][data-size=l] .txt-product {
  padding: 16px 16px 20px 16px;
}
.product-component[data-type=vertical][data-size=m] .txt-product {
  margin-top: 8px;
}
.product-component[data-type=vertical][data-border=true] .product-component__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
}
.product-component[data-type=horizontal] .product-component__inner {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
}
.product-component[data-type=horizontal] .txt-product {
  flex: 1;
}
.product-component[data-type=horizontal][data-size=l] .thumb-product {
  width: 120px;
}
.product-component[data-type=horizontal][data-size=m] .thumb-product {
  width: 100px;
}
.product-component[data-type=horizontal][data-size=s] .thumb-product {
  width: 80px;
  border-radius: 6px;
}

.thumb-product {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.thumb-product[data-border=true] {
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.thumb-product .thumb-product__wrap {
  position: relative;
  aspect-ratio: 70/43;
}
.thumb-product .thumb-product__wrap[data-type=square] {
  aspect-ratio: 1/1;
}
.thumb-product .thumb-product__wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg-overlay-bk-basic, rgba(0, 0, 0, 0.4));
  opacity: 0;
}
.thumb-product img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.txt-product {
  /* 회원특가 라벨 */
  /* large size */
}
.txt-product__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-fg-neutral-solid, #222832);
}
.txt-product__info-brand {
  width: 100%;
  color: var(--color-fg-neutral-muted, #6A6F77);
  word-break: break-word;
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.txt-product__info-brand + .txt-product__info-tit {
  margin-top: 1px;
}
.txt-product__info-period {
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.txt-product__info-period + .txt-product__info-tit {
  margin-top: 1px;
}
.txt-product__info-tit {
  max-height: 3em;
  color: var(--color-fg-neutral-solid, #222832);
  word-break: break-all;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.txt-product__amount {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  margin-top: 4px;
}
.txt-product__amount[data-color=gray] {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.txt-product__amount[data-color=red] {
  color: var(--color-fg-brand-solid, #fb1822);
}
.txt-product__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}
.txt-product__price-percent {
  color: var(--color-fg-brand-solid, #fb1822);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.txt-product__price-accent {
  color: var(--color-fg-brand-solid, #fb1822);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.txt-product__price-current {
  color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.txt-product__price-origin {
  color: var(--color-fg-neutral-weak, #b2b6ba);
  text-decoration-line: line-through;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.txt-product__price-refund {
  text-decoration-line: line-through;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.txt-product__label {
  margin-top: 8px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.txt-product__add {
  margin-top: 8px;
  display: flex;
  gap: 4px;
}
.txt-product__add .sell {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.txt-product__add .sell i {
  width: 12px;
  height: 12px;
}
.txt-product__add .sell i img {
  display: block;
  width: 100%;
  height: 100%;
}
.txt-product__add .rate {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.txt-product__add .rate i {
  width: 12px;
  height: 12px;
}
.txt-product__add .rate i img {
  display: block;
  width: 100%;
  height: 100%;
}
.txt-product__state {
  margin-top: 3px;
  color: var(--color-fg-brand-solid, #fb1822);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.txt-product__options {
  margin-top: 4px;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.txt-product .member-label {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 0;
  margin-top: 8px;
  color: var(--color-fg-accent-red-solid, #fb1822);
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.txt-product .member-label img {
  display: block;
  width: 16px;
  height: 16px;
}
.txt-product[data-size=l] .txt-product__info-brand {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.txt-product[data-size=l] .txt-product__info-brand + .txt-product__info-tit {
  margin-top: 2px;
}
.txt-product[data-size=l] .txt-product__info-tit {
  display: block;
  width: 100%;
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.txt-product[data-size=l] .txt-product__price {
  gap: 4px;
  margin-top: 8px;
}
.txt-product[data-size=l] .txt-product__price-percent {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.txt-product[data-size=l] .txt-product__bottom {
  display: flex;
  justify-content: space-between;
}
.txt-product[data-size=l] .txt-product__state {
  margin-top: 8px;
}

.element__like {
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 100%);
  cursor: pointer;
  z-index: 2;
  padding: 20px 8px 8px 20px;
}
.element__like .element__like-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.element__like .element__like-icon i.default {
  opacity: 1;
}
.element__like .element__like-icon i.active {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.element__like .element__like-icon img {
  width: 20px;
  height: 20px;
}
.element__like[data-size=l] {
  padding: 24px 10px 10px 24px;
}
.element__like[data-size=l] .element__like-icon img {
  width: 28px;
  height: 28px;
}
.element__like[data-state=active] .element__like-icon i.default {
  opacity: 0;
}
.element__like[data-state=active] .element__like-icon i.active {
  opacity: 1;
}

.element__product-badge {
  background-color: var(--color-bg-overlay-bk-thick, rgba(0, 0, 0, 0.8));
  color: #ffffff;
}
.element__product-badge[data-type=ranking] {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.element__product-badge[data-type=d-day] {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-bottom-right-radius: 6px;
  background-color: var(--color-bg-overlay-bk-basic, rgba(0, 0, 0, 0.4));
  font-size: var(--font-title-4-size, 0.8125rem);
  font-weight: var(--font-title-4-weight, 600);
  line-height: var(--font-title-4-line-height, 1.4);
  letter-spacing: var(--font-title-4-letter-spacing, -0.005em);
  gap: 2px;
}
.element__product-badge[data-type=d-day] i {
  width: 16px;
  height: 16px;
}
.element__product-badge[data-type=d-day] i img {
  width: 100%;
  height: 100%;
}
.element__product-badge[data-type=count] {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  padding: 4px 8px;
  border-bottom-right-radius: 6px;
  background-color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}

.element__product-lday {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none'%3E%3Cpath d='M0 22C0 9.84974 9.84974 0 22 0C34.1503 0 44 9.84974 44 22C44 34.1503 34.1503 44 22 44C9.84974 44 0 34.1503 0 22Z' fill='%23FB1822'/%3E%3Cpath d='M36.0002 19.422L32.6761 28.248H30.888L31.8852 25.8409L29.4667 19.422H31.2548L32.7105 23.7318L34.2121 19.422H36.0002Z' fill='white' stroke='white' stroke-width='0.2'/%3E%3Cpath d='M28.8927 25.6346L27.735 26.0243C27.437 26.1275 27.3338 26.0702 27.288 25.7951L27.1733 25.222C26.7607 25.6805 26.1761 25.9785 25.454 25.9785C23.9409 25.9785 22.703 25.1532 22.703 23.1817V21.9896C22.703 20.018 23.9409 19.1927 25.454 19.1927C26.1417 19.1927 26.6919 19.4564 27.1046 19.869V19.3074H28.6634V24.4081L28.8927 25.6346ZM25.6832 24.4884C26.3939 24.4884 26.9212 23.9955 26.9441 23.1931V22.0469C26.9441 21.1987 26.4168 20.6829 25.6832 20.6829C24.9496 20.6829 24.4224 21.084 24.4224 21.9323V23.239C24.4224 24.0872 24.9496 24.4884 25.6832 24.4884Z' fill='white' stroke='white' stroke-width='0.2'/%3E%3Cpath d='M21.555 16.8542V25.6344L20.4547 26.0241C20.1337 26.1388 19.9962 26.0585 19.9962 25.7605V25.302C19.5835 25.7147 19.0333 25.9783 18.3456 25.9783C16.8325 25.9783 15.5946 25.153 15.5946 23.1815V21.9894C15.5946 20.0179 16.8325 19.1926 18.3456 19.1926C18.9416 19.1926 19.446 19.3874 19.8357 19.7198V16.8542H21.555ZM19.8357 23.1242V22.0467C19.8357 21.1985 19.3084 20.6827 18.5748 20.6827C17.8412 20.6827 17.314 21.0839 17.314 21.9321V23.2388C17.314 24.087 17.8412 24.4882 18.5748 24.4882C19.3084 24.4882 19.8357 23.9724 19.8357 23.1242Z' fill='white' stroke='white' stroke-width='0.2'/%3E%3Cpath d='M9.55359 24.1704C9.31151 24.1688 9.11515 23.9617 9.11739 23.7102L9.16461 16.9704C9.16611 16.7188 8.9705 16.5117 8.72842 16.5101L7.36961 16.5C7.12753 16.4985 6.92816 16.7017 6.92667 16.954L6.87495 24.267C6.87345 24.5185 7.01061 24.8705 7.17999 25.0488L7.85527 25.7606C8.02465 25.9397 8.36192 26.0876 8.60325 26.0892L13.2995 26.125C13.5416 26.1265 13.7409 25.9225 13.7424 25.6718L13.7499 24.6602C13.7514 24.4087 13.5551 24.2016 13.3137 24.2L9.55359 24.1704Z' fill='white'/%3E%3C/svg%3E");
}
.element__product-lday[data-size=l] {
  bottom: 10px;
  left: 10px;
  width: 44px;
  height: 45px;
}
.element__product-lday[data-size=m] {
  bottom: 8px;
  left: 8px;
  width: 32px;
  height: 33px;
}
.element__product-lday[data-size=s] {
  bottom: 8px;
  left: 8px;
  width: 24px;
  height: 25px;
}

/* 상품페이지 공통 사용 스타일 */
.sp-product-top-info {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 9;
}
.sp-product-top-info__badges {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}
.sp-product-top-info__badges + .sp-product-top-info__title {
  margin-top: 8px;
}
.sp-product-top-info__title h1 {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1--m-weight, 500);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  margin: 0;
}
.sp-product-top-info__text {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
  margin-bottom: 4px;
}
.sp-product-top-info__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-product-top-info__price-basic {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}
.sp-product-top-info__price-basic .discount-rate {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: #fb1822;
}
.sp-product-top-info__price-basic .current-price {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-product-top-info__price-basic .original-price {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: #b2b6ba;
  text-decoration: line-through;
}
.sp-product-top-info__price-final {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}
.sp-product-top-info__price-final .final-price-info {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}
.sp-product-top-info__price-final .final-price-info .final-discount {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  color: #fb1822;
}
.sp-product-top-info__price-final .final-price-info .final-price {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-product-top-info__price-final .final-price-info .original-price {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-weak, #b2b6ba);
  text-decoration: line-through;
}
.sp-product-top-info__price-final .max-benefit {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
  position: relative;
}
.sp-product-top-info__price-final .max-benefit .max-benefit-text {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: #fb1822;
}
.sp-product-top-info__price-final .max-benefit .info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  padding: 0;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.sp-product-top-info__price-final .max-benefit .info-icon svg {
  width: 100%;
  height: 100%;
}
.sp-product-top-info__rating {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}
.sp-product-top-info__rating .rating-stars {
  color: var(--color-fg-accent-yellow-solid, #ffc00e);
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
}
.sp-product-top-info__rating .rating-stars svg {
  width: 16px;
  height: 16px;
}
.sp-product-top-info__rating .rating-stars .rating-score {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-product-top-info__rating .review-link {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
  border: none;
  background: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sp-product-top-info__members-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.sp-product-top-info__members-badge .members-badge {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 4px;
  color: var(--color-fg-accent-red-solid, #fb1822);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.sp-product-top-info__members-badge .members-badge svg {
  width: 20px;
  height: 20px;
}
.sp-product-top-info .sp-product-points-info-container {
  margin-top: 16px;
}

/*-----------------------------*/
/*    Order    */
/*-----------------------------*/
.sp-purchase-product__info {
  display: flex;
  gap: 12px;
}
.sp-purchase-product__info .sp-purchase-product__img {
  width: 80px;
  height: 80px;
}
.sp-purchase-product__info .sp-purchase-product__text {
  width: calc(100% - 80px - 12px);
  align-items: flex-start;
}

.sp-purchase-product__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.sp-purchase-product__text-product {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.sp-purchase-product__text-product-title {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 320px) {
  .sp-purchase-product__text-product-title {
    display: block;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
.sp-purchase-product__text-product-title[data-dot=true] span {
  position: relative;
  display: inline-block;
  padding-right: 10px;
  word-break: break-all;
}
.sp-purchase-product__text-product-title[data-dot=true] span::after {
  content: "";
  display: inline-flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  background-color: var(--color-fg-brand-solid, #fb1822);
  border-radius: 50%;
}
.sp-purchase-product__text-product-options {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-r-weight, 400);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.sp-purchase-product__text-price {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sp-purchase-product__text-price-current {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-purchase-product__text-price-original {
  position: relative;
}
.sp-purchase-product__text-price-original-text {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-weak, #b2b6ba);
}
.sp-purchase-product__text-price-original::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-fg-neutral-weak, #b2b6ba);
  transform: translateY(-50%);
}
.sp-purchase-product__text-price-delivery-text {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.sp-purchase-product__text-date {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.sp-purchase-product__text-info {
  margin-top: 8px;
}
.sp-purchase-product__text-info-options {
  display: flex;
  column-gap: 12px;
  flex-wrap: wrap;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.sp-purchase-product__text-info-label {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.sp-purchase-product__text-info-text {
  color: var(--color-fg-neutral-solid, #222832);
}

.sp-purchase-product__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.sp-purchase-product__title-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-purchase-product__title-divider {
  width: 1px;
  height: 12px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
  flex-shrink: 0;
}
.sp-purchase-product__title-text {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-purchase-product__title-date {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.sp-purchase-product__title-value {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}

.sp-purchase-history__button {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.sp-purchase-history__button .btn {
  position: relative;
  flex: 1;
}
.sp-purchase-history__button .btn .tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
}

.sp-purchase-history__list-info {
  display: flex;
  gap: 12px;
}
.sp-purchase-history__list-item:last-child .divider {
  display: none;
}
.sp-purchase-history__list-item[data-state=disabled] .sp-purchase-product__title-text {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.sp-purchase-history__list-item[data-state=disabled] .sp-purchase-product__text-date {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.sp-purchase-history__list-item[data-state=disabled] .sp-purchase-product__text-product-title {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.sp-purchase-history__list-item[data-state=disabled] .sp-purchase-product__text-product-options {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.sp-purchase-history__list-item[data-state=disabled] .sp-purchase-product__text-price-current {
  color: var(--color-fg-neutral-disabled, #c8cccf);
}
.sp-purchase-history__list-item[data-state=disabled] .sp-purchase-product__text-price-original-text {
  color: var(--color-fg-neutral-disabled, #c8cccf);
}
.sp-purchase-history__list-item[data-state=disabled] .sp-purchase-product__text-info-text, .sp-purchase-history__list-item[data-state=disabled] .sp-purchase-product__text-info-label {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}

.sp-price__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-purchase-detail__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-purchase-detail__status {
  color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.sp-purchase-detail__location {
  margin: 0;
}
.sp-purchase-detail__state {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-purchase-detail__state-highlight {
  color: var(--color-fg-brand-solid, #fb1822);
}
.sp-purchase-detail__details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-purchase-detail__detail-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sp-purchase-detail__label {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
  white-space: nowrap;
}
.sp-purchase-detail__divider {
  width: 1px;
  height: 12px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
  flex-shrink: 0;
}
.sp-purchase-detail__value {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sp-purchase-detail__value-number {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
  white-space: nowrap;
}
.sp-purchase-detail__copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
  cursor: pointer;
}

.sp-cancel-request__form .sp-cancel-request__option {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 12px 0;
}
.sp-cancel-request__form .sp-cancel-request__option + .sp-cancel-request__segment {
  margin-top: 24px;
}
.sp-cancel-request__form .sp-cancel-request__segment {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.sp-cancel-request__form .sp-cancel-request__textarea {
  margin-top: 16px;
}

.sp-payment-method__card {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sp-payment-method__card-wrapper {
  width: 100%;
  padding: 20px 12px;
  border: 1px solid var(--color-border-neutral-muted, #c8cccf);
  background: white;
  border-radius: 12px;
}
.sp-payment-method__card-wrapper .sp-payment-method__voucher-toggle {
  margin-top: 10px;
}

.sp-payment-method__card-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.sp-payment-method__card-info {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-direction: column;
}

.sp-payment-method__card-name {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}

.sp-payment-method__card-details {
  display: flex;
  gap: 4px;
  align-items: center;
}

.sp-payment-method__select-wrapper {
  display: inline-block;
  position: relative;
}

.sp-payment-method__payment-select {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  padding-right: 16px;
  border: none;
  outline: none;
  min-width: 48px;
  background: transparent;
  color: var(--color-fg-neutral-muted, #6A6F77);
  cursor: pointer;
  appearance: none;
}

.sp-payment-method__select-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 0;
  width: 12px;
  height: 12px;
  color: var(--color-icon-neutral-muted, #b2b6ba);
  pointer-events: none;
  transform: translateY(-50%);
}

.sp-payment-method__card-add {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  width: 100%;
  height: 100%;
  background: var(--color-bg-neutral-weak, #f0f3f5);
  cursor: pointer;
  border-radius: 12px;
}
.sp-payment-method__card-add:active {
  background-color: var(--color-bg-neutral-muted, #9da1a7);
}

.sp-payment-method__add-content {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-direction: column;
}

.sp-payment-method__add-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}

.sp-payment-method__add-text {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}

.sp-delivery-card-list {
  margin-bottom: 24px;
}
.sp-delivery-card-list .sp-delivery-card-item:first-child {
  margin-top: 24px;
}

.sp-delivery-card-item {
  margin-bottom: 40px;
  border-radius: 8px;
}
.sp-delivery-card-item:last-child {
  margin-bottom: 0;
}
.sp-delivery-card-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sp-delivery-card-item__name {
  flex: 1;
  min-width: 0;
}
.sp-delivery-card-item__recipient {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  margin: 0;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-delivery-card-item__actions {
  display: flex;
  gap: 6px;
}
.sp-delivery-card-item__content {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.sp-delivery-card-item__phone {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.sp-delivery-card-item__address {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  line-height: 1.5;
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.sp-delivery-card-item__memo {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}

.sp-delivery-edit__new-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-neutral-weak, #f0f3f5);
}

.sp-delivery-direct-form {
  padding-top: 24px;
}
.sp-delivery-direct-form__group {
  margin-bottom: 16px;
}
.sp-delivery-direct-form__group:last-child {
  margin-bottom: 0;
}
.sp-delivery-direct-form__checkbox-group {
  margin-top: 20px;
}
.sp-delivery-direct-form__textarea-container {
  display: none;
  margin-top: 12px;
}
[data-value=direct_input] .sp-delivery-direct-form__textarea-container {
  display: block;
}

.input__wrap--with-button {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
}
.input__wrap--with-button .input__input {
  flex: 1;
}
.input__wrap--with-button .input__label {
  right: auto;
  left: 0;
  width: auto;
}

.sp-easy-payment__header {
  margin-bottom: 16px;
}
.sp-easy-payment__title-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.sp-easy-payment__logo {
  display: flex;
  align-items: center;
  width: 51px;
  height: 22px;
}
.sp-easy-payment__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  margin: 0;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-easy-payment__notice {
  display: flex;
  gap: 4px;
  align-items: center;
}
.sp-easy-payment__notice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #ff333c;
}
.sp-easy-payment__notice-text {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
  color: #ff333c;
}
.sp-easy-payment__container {
  margin: 0 -16px;
}
.sp-easy-payment__swiper {
  padding: 0 16px;
}
.sp-easy-payment__swiper .swiper-slide {
  flex-shrink: 0;
  height: auto;
}
.sp-easy-payment__swiper .swiper-slide.swiper-slide-active .sp-payment-method__card-wrapper {
  border-color: var(--color-border-brand-solid, #fb1822);
}

.sp-legal-guardian__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
}
.sp-legal-guardian__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  margin: 0;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-legal-guardian__actions {
  display: flex;
  gap: 8px;
}
.sp-legal-guardian__content {
  padding: 0;
}
.sp-legal-guardian__description {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  margin: 0;
  line-height: 1.5;
  color: var(--color-fg-neutral-muted, #6A6F77);
}

.sp-disclaimer-section {
  padding-top: 12px;
}

.sp-disclaimer__container {
  padding: 16px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 8px;
}
.sp-disclaimer__content {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
}
.sp-disclaimer__text {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  flex-grow: 1;
  margin: 0;
  line-height: 1.5;
  color: var(--color-fg-neutral-muted, #6A6F77);
}

.sp-delivery-register__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
}
.sp-delivery-register__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  margin: 0;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-delivery-register__actions {
  display: flex;
  gap: 8px;
}
.sp-delivery-register__content {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px 0 24px;
}
.sp-delivery-register__message {
  text-align: center;
}
.sp-delivery-register__message p {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  margin: 0;
  line-height: 1.5;
  color: var(--color-fg-neutral-muted, #6A6F77);
}

.sp-delivery-card__container {
  background: white;
  border-radius: 8px;
}
.sp-delivery-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sp-delivery-card__recipient {
  flex: 1;
}
.sp-delivery-card__name {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  margin: 0;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-delivery-card__actions {
  display: flex;
  gap: 8px;
}
.sp-delivery-card__content {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.sp-delivery-card__phone {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.sp-delivery-card__address {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.sp-delivery-card__memo {
  margin-top: 12px;
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.sp-delivery-card__memo-readonly {
  display: flex;
  align-items: center;
}
.sp-delivery-card__memo-text {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  line-height: 1.4;
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.sp-delivery-card__textarea-container {
  display: none;
  margin-top: 12px;
}
.sp-delivery-card__textarea-container.show {
  display: block;
}
.sp-delivery-card__form-group {
  margin: 0;
}

.sp-order-products__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
  transition: margin-bottom 0.3s ease;
}
.sp-order-products__header[data-accordion-trigger] {
  cursor: pointer;
}
.sp-order-products[data-state=collapsed] .sp-order-products__header {
  margin-bottom: 0;
}
.sp-order-products__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  flex-shrink: 0;
  margin: 0;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-order-products__toggle {
  display: flex;
  gap: 4px;
  align-items: center;
}
.sp-order-products__info-sub {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.sp-order-products[data-state=expanded] .sp-order-products__info-sub {
  display: none;
}
.sp-order-products__txt {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  max-width: 100%;
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.sp-order-products__num {
  position: relative;
  flex-shrink: 0;
  color: var(--color-fg-neutral-solid, #222832);
  padding-left: 6px;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.sp-order-products__num[data-color=red] {
  color: var(--color-bg-brand-solid, #fb1822);
}
.sp-order-products__num:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.sp-order-products__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.sp-order-products[data-state=expanded] .sp-order-products__icon {
  transform: rotate(-180deg);
}
.sp-order-products__container {
  display: flex;
  flex-direction: column;
}
.sp-order-products__container[data-accordion-content] {
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease;
}
.sp-order-products__container[data-accordion-content][data-state=collapsed] {
  margin-bottom: 0;
  max-height: 0;
  opacity: 0;
}
.sp-order-products__container[data-accordion-content][data-state=expanded] {
  max-height: 1000px;
  opacity: 1;
}
.sp-order-products__container .product-component + .sp-order-products__total {
  margin-top: 16px;
}
.sp-order-products__options {
  display: flex;
  gap: 8px;
  flex-direction: column;
  margin-top: 16px;
}
.sp-order-products__option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--color-border-neutral-weak, #f0f3f5);
  background: white;
  border-radius: 8px;
}
.sp-order-products__option-label {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.sp-order-products__option-values {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sp-order-products__option-value {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.sp-order-products__option-divider {
  width: 1px;
  height: 12px;
  background: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.sp-order-products__price-details {
  display: flex;
  gap: 8px;
  flex-direction: column;
  padding-bottom: 8px;
  margin-top: 16px;
}
.sp-order-products__price-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
}
.sp-order-products__price-label {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.sp-order-products__price-value {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.sp-order-products__price-value--discount {
  color: var(--color-fg-brand-solid, #fb1822);
}
.sp-order-products__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px 4px;
  border-top: 1px solid var(--color-border-neutral-weak, #f0f3f5);
}
.sp-order-products__total-label {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-order-products__total-label .lpoint-logo {
  width: 20px;
  height: 20px;
}
.sp-order-products__total-value {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-brand-solid, #fb1822);
  display: flex;
  align-items: center;
  gap: 4px;
}
.sp-order-products__total-value .lpoint-logo {
  width: 16px;
  height: 16px;
}
.sp-order-products__total-values {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.sp-order-products__total-values .sp-order-products__total-value {
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-order-products__total-discount {
  color: var(--color-fg-brand-solid, #fb1822);
}
.sp-order-products__total-origin {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  text-decoration-line: line-through;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}

.sp-point-usage__header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.sp-point-usage__title-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-point-usage__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  margin: 0;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-point-usage__title-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sp-point-usage__title-inner svg {
  width: 24px;
  height: 24px;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.sp-point-usage__input-section {
  position: relative;
}
.sp-point-usage__input-section .tooltip {
  position: absolute;
  right: 0;
  top: -8px;
}
.sp-point-usage__input-section .input-wrapper .input__utils .btn-close {
  display: flex !important;
}
.sp-point-usage__info-icon img {
  width: 24px;
  height: 24px;
}
.sp-point-usage__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-point-usage__available {
  display: flex;
  gap: 2px;
  align-items: center;
  position: relative;
}
.sp-point-usage__available-text {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  color: var(--color-fg-brand-solid, #fb1822);
}

.sp-point-charge {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sp-point-charge__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.sp-point-charge__title {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}

.sp-payment-method__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sp-payment-method__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  margin: 0;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-payment-method__total {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-payment-method__options {
  display: flex;
  gap: 16px;
  flex-direction: column;
}
.sp-payment-method__option-group {
  display: flex;
  gap: 16px;
  flex-direction: column;
}
.sp-payment-method__info-text {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  line-height: 1.5;
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.sp-payment-method__info-text ul {
  margin: 0;
  list-style: none;
}
.sp-payment-method__info-text ul li {
  padding-left: 15px;
  position: relative;
}
.sp-payment-method__info-text ul li::before {
  position: absolute;
  left: 0;
  color: var(--color-fg-neutral-muted, #6A6F77);
  content: "•";
}
.sp-payment-method__card-options {
  display: flex;
  gap: 10px;
  flex-direction: column;
  padding-left: 24px;
}
.sp-payment-method__voucher-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 8px;
}
.sp-payment-method__toggle-text {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.sp-payment-method__toggle-switch {
  position: relative;
}
.sp-payment-method__toggle-input {
  display: none;
}
.sp-payment-method__toggle-label {
  display: block;
  overflow: visible;
  position: relative;
  width: 44px;
  height: 24px;
  background-color: var(--color-fg-brand-solid, #fb1822);
  cursor: pointer;
  border-radius: 12px;
}
.sp-payment-method__toggle-slider {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 2px;
  width: 44px;
  height: 24px;
  transition: transform 0.3s ease;
}
.sp-payment-method__toggle-point {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px;
  padding-left: 0;
  position: relative;
  z-index: 1;
  width: 22px;
  height: 24px;
}
.sp-payment-method__toggle-icon {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  width: 20px;
  height: 20px;
  background: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 100%;
}
.sp-payment-method__toggle-input:checked + .sp-payment-method__toggle-label .sp-payment-method__toggle-slider {
  transform: translateX(20px);
}
.sp-payment-method__toggle-input:not(:checked) + .sp-payment-method__toggle-label {
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.sp-payment-method__card-list {
  padding-left: 24px;
}
.sp-payment-method__card-list .swiper-container {
  overflow: visible;
}
.sp-payment-method__card-list .swiper-wrapper {
  display: flex;
}
.sp-payment-method__card-list .swiper-slide {
  flex-shrink: 0;
}
.sp-payment-method__card-list .swiper-slide:last-child {
  margin-right: 0 !important;
}
.sp-payment-method__card-list .swiper-slide.swiper-slide-active .sp-payment-method__card-wrapper {
  border-color: var(--color-border-brand-solid, #fb1822);
}
.sp-payment-method__charge {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-payment-method__charge-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
}
.sp-payment-method__charge-box .tooltip {
  position: absolute;
  top: -7px;
  right: 7px;
}
.sp-payment-method__charge-box .sp-element-price {
  padding: 0;
}
.sp-payment-method__charge-add {
  position: relative;
}
.sp-payment-method__charge-add .sp-payment-method__card-add {
  width: 100%;
}
.sp-payment-method__charge-add .tooltip {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
}

.sp-payment-summary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-payment-summary__header[data-accordion-trigger] {
  cursor: pointer;
}
.sp-payment-summary__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  margin: 0;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-payment-summary__total {
  display: flex;
  gap: 6px;
  align-items: center;
}
.sp-payment-summary__total-value {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-payment-summary__total-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
  transition: transform 0.3s ease;
}
.sp-payment-summary[data-state=expanded] .sp-payment-summary__total-icon {
  transform: rotate(180deg);
}
.sp-payment-summary__container {
  display: flex;
  gap: 4px;
  flex-direction: column;
  overflow: hidden;
  padding-top: 16px;
}
.sp-payment-summary__container[data-accordion-content] {
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.sp-payment-summary__container[data-accordion-content][data-state=collapsed] {
  padding-top: 0;
  padding-bottom: 0;
  max-height: 0;
  opacity: 0;
}
.sp-payment-summary__container[data-accordion-content][data-state=expanded] {
  max-height: 500px;
  opacity: 1;
}
.sp-payment-summary__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
}
.sp-payment-summary__label {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.sp-payment-summary__value {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}

.sp-element-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.sp-element-price__label-with-icon {
  display: flex;
  gap: 2px;
  align-items: center;
}

.sp-element-price__label-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sp-element-price__label {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}

.sp-element-price__info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #c8cccf;
}
.sp-element-price__info-icon img {
  width: 16px;
  height: 16px;
}

.sp-element-price__value-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sp-element-price__value-wrapper.has-icon .sp-element-price__value--button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sp-element-price__value {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-element-price__value--discount {
  color: #fb1822;
}
.sp-element-price__value--highlight {
  color: #fb1822;
}
.sp-element-price__value--total {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  font-weight: 600;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-element-price__value--button svg {
  width: 12px;
  height: 12px;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.sp-element-price__value--cancel {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  text-decoration-line: line-through;
}

.sp-element-price__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  width: 16px;
  height: 16px;
  background: none;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
  cursor: pointer;
}

.sp-element-price--card .sp-element-price__card-info {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.sp-element-price--card .sp-element-price__card-icon {
  display: block;
  width: 3px;
  height: 12px;
  background-color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.sp-element-price--card .sp-element-price__value {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  line-height: 1.4;
  color: var(--color-fg-neutral-muted, #6A6F77);
}

.sp-element-price--total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-neutral-weak, #f0f3f5);
}
.sp-element-price--total .sp-element-price__value--total {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  font-weight: 600;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-element-price--total .sp-element-price__value--cancel {
  font-weight: 500;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  text-decoration-line: line-through;
}

.sp-element-price--cancel .sp-element-price__value {
  text-decoration: line-through;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}

.sp-point-benefits__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-point-benefits__header[data-accordion-trigger] {
  cursor: pointer;
}
.sp-point-benefits__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  margin: 0;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-point-benefits__total {
  display: flex;
  gap: 6px;
  align-items: center;
  position: relative;
}
.sp-point-benefits__total-value {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-point-benefits__info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #c8cccf;
  cursor: pointer;
}
.sp-point-benefits__total-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
  transition: transform 0.3s ease;
}
.sp-point-benefits[data-state=expanded] .sp-point-benefits__total-icon {
  transform: rotate(180deg);
}
.sp-point-benefits__container {
  display: flex;
  gap: 8px;
  flex-direction: column;
  padding-top: 16px;
}
.sp-point-benefits__container[data-accordion-content] {
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.sp-point-benefits__container[data-accordion-content][data-state=collapsed] {
  padding-top: 0;
  padding-bottom: 0;
  max-height: 0;
  opacity: 0;
}
.sp-point-benefits__container[data-accordion-content][data-state=expanded] {
  max-height: 800px;
  opacity: 1;
}

.sp-delivery-info .section-title {
  font-size: var(--font-heading-2-size, 1.75rem);
  font-weight: var(--font-heading-2-weight, 600);
  line-height: var(--font-heading-2-line-height, 1.4);
  letter-spacing: var(--font-heading-2-letter-spacing, -0.005em);
  margin-bottom: 16px;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-delivery-info .delivery-form,
.sp-delivery-info .payment-method {
  margin-bottom: 16px;
  padding: 16px;
  background: white;
  border-radius: 12px;
}
.sp-delivery-info .delivery-form .form-group,
.sp-delivery-info .payment-method .form-group {
  margin-bottom: 16px;
}
.sp-delivery-info .delivery-form .form-group:last-child,
.sp-delivery-info .payment-method .form-group:last-child {
  margin-bottom: 0;
}
.sp-delivery-info .delivery-form .form-group label,
.sp-delivery-info .payment-method .form-group label {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  display: block;
  margin-bottom: 8px;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-delivery-info .delivery-form .form-group input[type=text],
.sp-delivery-info .delivery-form .form-group input[type=tel],
.sp-delivery-info .delivery-form .form-group select,
.sp-delivery-info .payment-method .form-group input[type=text],
.sp-delivery-info .payment-method .form-group input[type=tel],
.sp-delivery-info .payment-method .form-group select {
  padding: 12px;
  border: 1px solid var(--color-border-neutral-muted, #c8cccf);
  width: 100%;
  border-radius: 8px;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.sp-delivery-info .delivery-form .form-group input[type=text]:focus,
.sp-delivery-info .delivery-form .form-group input[type=tel]:focus,
.sp-delivery-info .delivery-form .form-group select:focus,
.sp-delivery-info .payment-method .form-group input[type=text]:focus,
.sp-delivery-info .payment-method .form-group input[type=tel]:focus,
.sp-delivery-info .payment-method .form-group select:focus {
  border-color: var(--color-border-brand-solid, #fb1822);
  outline: none;
}
.sp-delivery-info .delivery-form .form-group input[type=text]::placeholder,
.sp-delivery-info .delivery-form .form-group input[type=tel]::placeholder,
.sp-delivery-info .delivery-form .form-group select::placeholder,
.sp-delivery-info .payment-method .form-group input[type=text]::placeholder,
.sp-delivery-info .payment-method .form-group input[type=tel]::placeholder,
.sp-delivery-info .payment-method .form-group select::placeholder {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.sp-delivery-info .delivery-form .form-group .address-input,
.sp-delivery-info .payment-method .form-group .address-input {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.sp-delivery-info .delivery-form .form-group .address-input input,
.sp-delivery-info .payment-method .form-group .address-input input {
  flex: 1;
}
.sp-delivery-info .delivery-form .form-group .address-input .btn-address-search,
.sp-delivery-info .payment-method .form-group .address-input .btn-address-search {
  padding: 12px 16px;
  border: none;
  background: var(--color-bg-brand-solid, #fb1822);
  color: white;
  white-space: nowrap;
  border-radius: 8px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.sp-delivery-info .payment-summary {
  margin-top: 16px;
  padding: 16px;
  background: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 8px;
}
.sp-delivery-info .payment-summary h3 {
  font-size: var(--font-body-1-size, 1.125rem);
  font-weight: var(--font-body-1-sb-weight, 600);
  line-height: var(--font-body-1-line-height, 1.5);
  letter-spacing: var(--font-body-1-letter-spacing, -0.005em);
  margin-bottom: 12px;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-delivery-info .payment-summary .summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.sp-delivery-info .payment-summary .summary-item:last-child {
  margin-bottom: 0;
}
.sp-delivery-info .payment-summary .summary-item.discount {
  color: var(--color-fg-accent-red-solid, #fb1822);
}
.sp-delivery-info .payment-summary .summary-item.total {
  font-size: var(--font-body-1-size, 1.125rem);
  font-weight: var(--font-body-1-sb-weight, 600);
  line-height: var(--font-body-1-line-height, 1.5);
  letter-spacing: var(--font-body-1-letter-spacing, -0.005em);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-neutral-muted, #c8cccf);
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-delivery-info .lpoint-usage {
  padding: 16px;
  background: white;
  border-radius: 12px;
}
.sp-delivery-info .lpoint-usage h3 {
  font-size: var(--font-body-1-size, 1.125rem);
  font-weight: var(--font-body-1-sb-weight, 600);
  line-height: var(--font-body-1-line-height, 1.5);
  letter-spacing: var(--font-body-1-letter-spacing, -0.005em);
  margin-bottom: 12px;
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-delivery-info .lpoint-usage .available-points {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  margin-bottom: 8px;
  color: var(--color-fg-brand-solid, #fb1822);
}
.sp-delivery-info .lpoint-usage .point-input {
  display: flex;
  gap: 8px;
}
.sp-delivery-info .lpoint-usage .point-input input {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--color-border-neutral-muted, #c8cccf);
  border-radius: 8px;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.sp-delivery-info .lpoint-usage .point-input .btn-all-use {
  padding: 12px 16px;
  border: none;
  background: var(--color-bg-neutral-muted, #9da1a7);
  color: var(--color-fg-neutral-solid, #222832);
  white-space: nowrap;
  border-radius: 8px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}

.sp-agreement .agreement-list {
  padding: 16px;
  background: white;
  border-radius: 12px;
}
.sp-agreement .agreement-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-neutral-weak, #f0f3f5);
}
.sp-agreement .agreement-item:last-child {
  border-bottom: none;
}
.sp-agreement .agreement-item input[type=checkbox] {
  width: 20px;
  height: 20px;
}
.sp-agreement .agreement-item .agreement-text {
  flex: 1;
  color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.sp-agreement .agreement-item .btn-detail {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  border: none;
  background: none;
  color: var(--color-fg-neutral-muted, #6A6F77);
  text-decoration: underline;
}

.sp-recommendation-section__header {
  margin-bottom: 20px;
}
.sp-recommendation-section__content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sp-recommendation-section__swiper .swiper-slide {
  height: auto;
}
.sp-recommendation-section__swiper .carousel {
  position: relative;
  bottom: unset;
  left: unset;
}
.sp-recommendation-section__swiper .order-complete-pagination {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  margin-bottom: 24px;
}
.sp-recommendation-section__swiper .order-complete-pagination .carousel {
  position: relative;
  top: auto;
  left: auto !important;
  bottom: auto;
  transform: none !important;
}
.sp-recommendation-section__product-grid {
  display: grid;
  gap: 32px 16px;
  grid-template-columns: 1fr 1fr;
}
.sp-recommendation-section__product-grid .product-component {
  margin: 0;
}

.order-complete-disclaimer-section {
  padding-top: 24px;
}

.order-detail-disclaimer-section {
  padding-top: 40px;
}

.sp-order-products__option-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/*-----------------------------*/
/*    Delivery    */
/*-----------------------------*/
.sp-delivery-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-delivery-info__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.sp-delivery-info__icon {
  width: 32px;
  height: 32px;
}
.sp-delivery-info__icon img, .sp-delivery-info__icon svg {
  width: 100%;
  height: 100%;
}
.sp-delivery-info__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: fit-content;
  color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.sp-delivery-info__location {
  margin: 0;
}
.sp-delivery-info__state {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-delivery-info__state-highlight {
  color: var(--color-fg-brand-solid, #fb1822);
}
.sp-delivery-info__details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-delivery-info__detail-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sp-delivery-info__label {
  font-size: var(--font-title-4-size, 0.8125rem);
  font-weight: var(--font-title-4-weight, 600);
  line-height: var(--font-title-4-line-height, 1.4);
  letter-spacing: var(--font-title-4-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
  white-space: nowrap;
}
.sp-delivery-info__divider {
  width: 1px;
  height: 12px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
  flex-shrink: 0;
}
.sp-delivery-info__tracking {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sp-delivery-info__tracking-number {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
  white-space: nowrap;
}
.sp-delivery-info__copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-icon-neutral-muted, #b2b6ba);
  cursor: pointer;
}
.sp-delivery-info__company {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
  white-space: nowrap;
}
.sp-delivery-info[data-type=order] {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.sp-delivery-info[data-type=order] .sp-delivery-info__icon {
  width: 112px;
  height: 112px;
}
.sp-delivery-info[data-type=order] .sp-delivery-info__header {
  gap: 24px;
  align-items: center;
}

.sp-delivery-location {
  display: flex;
  position: relative;
}
.sp-delivery-location:last-child .sp-delivery-location__line {
  display: none;
}
.sp-delivery-location__indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 16px;
  flex-shrink: 0;
}
.sp-delivery-location__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 4px;
  z-index: 1;
}
.sp-delivery-location__dot--completed {
  background-color: var(--color-red-100, #ffddde);
}
.sp-delivery-location__dot--completed .sp-delivery-location__progress-dot {
  background-color: var(--color-fg-brand-solid, #fb1822);
}
.sp-delivery-location__dot--in-progress {
  background-color: #ffffff;
}
.sp-delivery-location__progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.sp-delivery-location__line {
  width: 2px;
  height: 45px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.sp-delivery-location__content {
  flex: 1;
  min-width: 0;
}
.sp-delivery-location__header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 6px;
}
.sp-delivery-location__title {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  margin: 0;
}
.sp-delivery-location__details {
  display: flex;
  gap: 6px;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  margin-bottom: 16px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.sp-delivery-location[data-type=completed] .sp-delivery-location__title {
  color: var(--color-fg-neutral-solid, #222832);
}
.sp-delivery-location[data-type=completed] .sp-delivery-location__details {
  color: var(--color-fg-neutral-muted, #6A6F77);
}

/*-----------------------------*/
/*    Unit Content    */
/*-----------------------------*/
.unit-content {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}
.unit-content__box {
  display: flex;
  flex-direction: column;
}
.unit-content__box__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.unit-content__box__hash {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.unit-content__box__info {
  display: flex;
  flex-wrap: wrap;
  color: var(--color-fg-neutral-muted, #6A6F77);
  margin-top: 4px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.unit-content__box__info .point {
  color: var(--color-fg-brand-solid, #fb1822);
}
.unit-content__box__info .info {
  position: relative;
  padding-left: 17px;
}
.unit-content__box__info .info::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
}
.unit-content__box__info .info:first-child {
  padding-left: 0;
}
.unit-content__box__info .info:first-child::before {
  display: none;
}
.unit-content__img-wrap {
  width: 112px;
  height: 75px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  aspect-ratio: 112/75;
}
.unit-content__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.unit-content .hash-tag {
  padding: 2px 4px;
  background-color: #f0f3f5;
  border-radius: 4px;
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}

/*-----------------------------*/
/*    Number    */
/*-----------------------------*/
.number {
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  min-width: 18px;
  width: fit-content;
  height: 18px;
  color: #ffffff;
  border-radius: 100px;
}
.number span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 100px;
}
.number--plus span {
  border-radius: 10px;
  padding: 0 4px;
}
.number[data-size=l] {
  min-width: 20px;
  height: 20px;
  font-size: 13px;
}
.number[data-size=l] span {
  padding: 1px 6px;
}
.number[data-size=s] {
  padding: 1px;
}
.number[data-color=red] span {
  background-color: #fb1822;
}
.number[data-color=white-gray] span {
  background-color: #c8cccf;
}
.number[data-color=gray] span {
  background-color: #898d93;
}
.number[data-color=pink] {
  color: #fb1822;
}
.number[data-color=pink] span {
  background-color: #fff0f1;
}

/*-----------------------------*/
/*    Swiper Unit    */
/*-----------------------------*/
.progress-swiper .swiper {
  padding-bottom: 19px;
}
.progress-swiper .swiper-slide {
  width: auto;
}
.progress-swiper .swiper-horizontal > .swiper-pagination-progressbar,
.progress-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal,
.progress-swiper .scrollbar {
  width: 48px;
  height: 3px;
  top: inherit;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  background: #dee1e4;
  border-radius: 10px;
  overflow: hidden;
}
.progress-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: #222832;
  border-radius: 10px;
}

.scrollbar-swiper {
  position: relative;
  padding-bottom: 16px;
}
.scrollbar-swiper .swiper-slide {
  width: auto;
}
.scrollbar-swiper .scrollbar {
  opacity: 1 !important;
  width: 48px;
  height: 3px;
  background: #dee1e4;
  border-radius: 10px;
  margin: 16px auto 0;
}
.scrollbar-swiper .swiper-scrollbar-drag {
  opacity: 1 !important;
  background-color: #222832;
}

/*-----------------------------*/
/*    Bottom Sheet    */
/*-----------------------------*/
.dimmed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.dimmed.active {
  opacity: 1;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  background-color: #fff;
  z-index: 10000;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  max-height: calc(100vh - 54px);
  max-height: calc(100dvh - 54px);
  will-change: max-height, transform, z-index;
  padding-bottom: var(--safe-bottom, 0px);
}
.bottom-sheet .expandable-bar__box {
  cursor: grab;
}
.bottom-sheet .expandable-bar__box:active {
  cursor: grabbing;
}
.bottom-sheet__container {
  position: relative;
  visibility: hidden;
}
.bottom-sheet__container.active {
  visibility: visible;
}
.bottom-sheet__container.active .bottom-sheet {
  transform: translateY(0) translateZ(0);
}
.bottom-sheet__container.active .dimmed {
  opacity: 1;
}
.bottom-sheet__header {
  padding: 0 20px;
}
.bottom-sheet__header-inner--top {
  position: relative;
  height: 40px;
}
.bottom-sheet__header-inner--top .bottom-sheet__close {
  position: absolute;
  top: 20px;
  right: 4px;
  width: 24px;
  height: 24px;
}
.bottom-sheet__header-inner--bottom[data-align=center] .title-component__title {
  text-align: center;
}
.bottom-sheet__header-inner--bottom[data-align=center] .title-component__text {
  text-align: center;
}
.bottom-sheet__header .bottom-sheet__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.bottom-sheet__body {
  max-height: calc(100vh - 54px - var(--bottom-sheet-header-height, 40px) - var(--safe-bottom, 0px));
  max-height: calc(100dvh - 54px - var(--bottom-sheet-header-height, 40px) - var(--safe-bottom, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 20px;
  padding-bottom: 28px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* 스크롤바 전체 영역 */
  /* 스크롤바 트랙 (배경) */
  /* 스크롤바 썸(움직이는 부분) */
}
.bottom-sheet__body::-webkit-scrollbar {
  width: 10px;
}
.bottom-sheet__body::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 2px;
}
.bottom-sheet__body::-webkit-scrollbar-thumb {
  background-color: var(--color-bg-neutral-muted-weak);
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid transparent; /* 썸 안쪽에 padding 느낌 줄 때 */
  background-clip: content-box;
}
@media screen and (max-height: 450px) {
  .bottom-sheet__body {
    padding-bottom: 50px;
  }
}
.bottom-sheet__body .confirm-sheet__box {
  text-align: center;
}
.bottom-sheet__body .confirm-sheet__icon {
  display: flex;
  width: 40px;
  height: 40px;
  color: var(--color-fg-brand-solid, #fb1822);
  margin: 0 auto;
}
.bottom-sheet__body .confirm-sheet__icon[data-type=info] {
  color: var(--color-fg-semantic-info, #3d87ff);
}
.bottom-sheet__body .confirm-sheet__icon[data-type=warning] {
  color: var(--color-fg-semantic-warning, #ff333c);
}
.bottom-sheet__body .confirm-sheet__icon[data-type=success] {
  color: var(--color-fg-semantic-success, #10c177);
}
.bottom-sheet__body .confirm-sheet__icon svg {
  width: 100%;
  height: 100%;
}
.bottom-sheet__body .confirm-sheet__icon + .confirm-sheet__title {
  margin-top: 12px;
}
.bottom-sheet__body .confirm-sheet__title {
  padding-top: 6px;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.bottom-sheet__body .confirm-sheet__text {
  margin-top: 10px;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.bottom-sheet__body .confirm-sheet__text + .btn-txt {
  margin-top: 12px;
}
.bottom-sheet__body .confirm-sheet__text + .etc {
  margin-top: 12px;
}
.bottom-sheet__body .confirm-sheet__text .info__text {
  text-align: left;
}
.bottom-sheet__body .confirm-sheet__etc {
  padding-top: 6px;
  color: var(--color-fg-brand-solid, #fb1822);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.bottom-sheet__body .red-text {
  color: var(--color-fg-brand-solid, #fb1822);
}
.bottom-sheet__body .attend-event__inner .img-wrap {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}
.bottom-sheet__body .attend-event__inner .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bottom-sheet__body .attend-event__inner .event-list {
  margin-top: 12px;
}

.bottom-sheet__container[data-expandable=true] .expandable-bar__box {
  display: flex;
  height: 100%;
  justify-content: center;
}
.bottom-sheet__container[data-expandable=true] .expandable-bar {
  display: block;
  width: 50px;
  height: 3px;
  margin-top: 10px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
  border-radius: 50px;
}
.bottom-sheet__container[data-bottom-btn=true] .bottom-sheet__body {
  padding-bottom: calc(var(--bottom-button-height, 0) - var(--safe-bottom, 0px));
  margin-bottom: 0;
}
@media screen and (max-height: 500px) {
  .bottom-sheet__container[data-bottom-btn=true] .bottom-sheet__body:has(.textarea__input-wrap) {
    max-height: calc(75vh + 28px - var(--bottom-button-height, 0));
    max-height: calc(75dvh + 28px - var(--bottom-button-height, 0));
  }
}
.bottom-sheet__container[data-select-type=loading] {
  text-align: center;
}
.bottom-sheet__container[data-select-type=loading] .bottom-sheet__title .point {
  display: inline-block;
  color: var(--color-fg-brand-solid, #fb1822);
}
.bottom-sheet__container[data-select-type=loading] .bottom-sheet__body {
  color: var(--color-gray-600);
}
.bottom-sheet__container[data-body-padding=false] .bottom-sheet__body {
  padding: 0;
  padding-bottom: var(--safe-bottom);
}
.bottom-sheet__container .bottom-sheet__graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.bottom-sheet__container .bottom-sheet__graphic .color-red {
  color: var(--color-fg-brand-solid, #fb1822);
}
.bottom-sheet__container .bottom-sheet__graphic .color-black {
  color: var(--color-fg-neutral-solid, #222832);
}
.bottom-sheet__container .bottom-sheet__graphic-title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  text-align: center;
}
.bottom-sheet__container .bottom-sheet__graphic-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bottom-sheet__container .bottom-sheet__graphic-icon {
  padding: 8px 0;
}
.bottom-sheet__container .bottom-sheet__graphic-icon > img {
  width: 112px;
  height: 112px;
}
.bottom-sheet__container .bottom-sheet__graphic-text {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  text-align: center;
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.bottom-sheet__container .info-popup[data-position=top] {
  top: -200px;
}

/* modal case- banner */
.modal-banner {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 20px 12px;
  z-index: 10000;
}
.modal-banner__container {
  position: relative;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  z-index: 2;
  margin: 0 auto;
  max-width: 761px;
}
.modal-banner-wrapper .dimmed {
  opacity: 1;
}
.modal-banner__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 0 0 28px 28px;
}
.modal-banner__bottom-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  position: relative;
}
.modal-banner__bottom-left::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.modal-banner__bottom[data-type=continue] {
  padding: 0;
}
.modal-banner__bottom[data-type=continue] .modal-banner__bottom-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  width: 100%;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.modal-banner__bottom-button {
  color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.modal-banner__bottom-right {
  position: relative;
}
.modal-banner__bottom-right::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.modal-banner__item {
  height: 100%;
  /* 텍스트타입 */
  /* 이미지타입 */
}
.modal-banner .swiper-container {
  position: relative;
}
.modal-banner .swiper-slide {
  aspect-ratio: 4/3;
}
.modal-banner.banner {
  margin: 0;
}
.modal-banner.banner .banner-item, .modal-banner.banner .banner-item[data-type=full-image] .banner-img-box .img-wrap {
  border-radius: 0;
}
.modal-banner.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/*-----------------------------*/
/*    Form    */
/*-----------------------------*/
.error-message-style {
  position: relative;
  color: var(--color-fg-semantic-warning, #ff333c);
  padding-left: 20px;
  word-wrap: break-word;
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.error-message-style::before {
  content: "";
  position: absolute;
  color: var(--color-fg-semantic-warning, #ff333c);
  top: 0;
  left: 0;
  display: block;
  width: 16px;
  height: 1.4em;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='41' viewBox='0 0 40 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6929 5.7229C17.0528 1.64841 22.9481 1.64842 25.3081 5.7229L37.3374 26.4924C39.7024 30.5765 36.7412 35.6672 32.0298 35.6672H7.97119C3.25979 35.6672 0.29854 30.5765 2.66357 26.4924L14.6929 5.7229ZM22.7124 7.22681C21.5081 5.14748 18.4929 5.14748 17.2886 7.22681L5.25928 27.9944C4.0605 30.0641 5.55419 32.6662 7.97119 32.6663H32.0298C34.4468 32.6662 35.9405 30.0641 34.7417 27.9944L22.7124 7.22681ZM20.0005 25.1506C20.8287 25.1509 21.5005 25.8224 21.5005 26.6506C21.5003 27.4787 20.8286 28.1504 20.0005 28.1506C19.1722 28.1506 18.5007 27.4789 18.5005 26.6506C18.5005 25.8222 19.1721 25.1506 20.0005 25.1506ZM20.0005 11.6672C20.8336 11.6675 21.5005 12.3506 21.5005 13.2004V21.7834C21.5005 22.6333 20.8336 23.3164 20.0005 23.3167C19.1672 23.3167 18.5005 22.6334 18.5005 21.7834V13.2004C18.5005 12.3504 19.1672 11.6672 20.0005 11.6672Z' fill='%23FB1822'/%3E%3C/svg%3E%0A");
  background-size: cover;
}

.error-state[data-error-message=no-display]::before, [data-error-message=no-display].form_dropdown__box[data-state=error]::before, .form-container [data-error-message=no-display].input-wrapper[data-state=error]::before, .error-state[data-error-message=no-display]::after, [data-error-message=no-display].form_dropdown__box[data-state=error]::after, .form-container [data-error-message=no-display].input-wrapper[data-state=error]::after {
  display: none !important;
}
.error-state::before, .form_dropdown__box[data-state=error]::before, .form-container .input-wrapper[data-state=error]::before {
  content: "";
  position: absolute;
  color: var(--color-fg-semantic-warning, #ff333c);
  top: 100%;
  left: 0;
  display: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12.0001 14.4902C11.5001 14.4902 11.1001 14.0802 11.1001 13.5702V8.42024C11.1001 7.91024 11.5001 7.50024 12.0001 7.50024C12.5001 7.50024 12.9001 7.91024 12.9001 8.42024V13.5702C12.9001 14.0802 12.5001 14.4902 12.0001 14.4902Z' fill='%23FB1822'/%3E%3Cpath d='M12.0001 17.3903C12.4971 17.3903 12.9001 16.9874 12.9001 16.4903C12.9001 15.9933 12.4971 15.5903 12.0001 15.5903C11.503 15.5903 11.1001 15.9933 11.1001 16.4903C11.1001 16.9874 11.503 17.3903 12.0001 17.3903Z' fill='%23FB1822'/%3E%3Cpath d='M9.14495 4.60796C10.4392 2.46433 13.5604 2.46434 14.8547 4.60796L21.7187 15.9767C23.0529 18.1865 21.4541 21.0001 18.8639 21.0002H5.13573C2.54552 21.0001 0.9467 18.1865 2.28087 15.9767L9.14495 4.60796ZM13.2981 5.53909C12.7098 4.56466 11.2898 4.56467 10.7015 5.53909L3.83843 16.9078C3.232 17.9122 3.95841 19.1909 5.13573 19.191H18.8639C20.0412 19.1909 20.7676 17.9122 20.1612 16.9078L13.2981 5.53909Z' fill='%23FB1822'/%3E%3C/svg%3E");
  background-size: 16px;
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.error-state::after, .form_dropdown__box[data-state=error]::after, .form-container .input-wrapper[data-state=error]::after {
  content: attr(data-message, "에러가 발생했습니다.");
  color: var(--color-fg-semantic-warning, #ff333c) !important;
  padding-left: 20px;
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.error-state .input__input, .form_dropdown__box[data-state=error] .input__input, .form-container .input-wrapper[data-state=error] .input__input {
  border-color: var(--color-fg-semantic-warning, #ff333c);
}
.error-state .input__label, .form_dropdown__box[data-state=error] .input__label, .form-container .input-wrapper[data-state=error] .input__label {
  color: var(--color-fg-semantic-warning, #ff333c);
}
.error-state .input__display, .form_dropdown__box[data-state=error] .input__display, .form-container .input-wrapper[data-state=error] .input__display {
  color: var(--color-fg-semantic-warning, #ff333c) !important;
}
.error-state.active::before, .active.form_dropdown__box[data-state=error]::before, .form-container .active.input-wrapper[data-state=error]::before, .error-state.active::after, .active.form_dropdown__box[data-state=error]::after, .form-container .active.input-wrapper[data-state=error]::after {
  display: block;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.form-container .input-wrapper {
  position: relative;
  width: 100%;
  transform: translateZ(0);
}
.keyboard-open .form-container .input-wrapper {
  transform: none;
}
.bottom-sheet__container.active .form-container .input-wrapper {
  transform: none;
}
.form-container .input-wrapper[data-state=disabled] {
  pointer-events: none;
}
.form-container .input-wrapper[data-state=disabled] .input__input, .form-container .input-wrapper[data-state=disabled] .card-input-wrap {
  color: var(--color-fg-neutral-disabled, #c8cccf);
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-bottom: none;
}
.form-container .input-wrapper[data-state=disabled] .input__input::placeholder, .form-container .input-wrapper[data-state=disabled] .card-input-wrap::placeholder {
  color: var(--color-fg-neutral-disabled, #c8cccf);
}
.form-container .input-wrapper[data-state=completed] .input__input, .form-container .input-wrapper[data-state=completed] .card-input-wrap {
  color: var(--color-fg-neutral-solid, #222832);
  border-color: var(--color-border-neutral-weak, #f0f3f5);
}
.form-container .input-wrapper[data-state=filled] .input__input, .form-container .input-wrapper[data-state=filled] .card-input-wrap {
  border-bottom: none;
  pointer-events: none;
}
.form-container .input-wrapper[data-message]::after, .form-container .input-wrapper[data-message1]::after, .form-container .input-wrapper[data-message2]::after {
  content: attr(data-message);
  display: none;
  position: absolute;
  color: var(--color-fg-neutral-muted, #6A6F77);
  top: 100%;
  left: 0;
  width: 100%;
  padding-top: 4px;
  z-index: 9;
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.form-container .input-wrapper[data-focus]:not([data-state=error])[data-message]::after {
  display: block;
}
.form-container .input-wrapper[data-focus]:not([data-state=error]) .input__label {
  color: var(--color-fg-neutral-solid, #222832);
}
.form-container .input-wrapper[data-focus=off]:not([data-state=error]):not([data-type=select])[data-message]::after {
  display: none;
}
.form-container .input-wrapper[data-focus=off] .clear-btn {
  opacity: 0;
  pointer-events: none;
}
.form-container .input-wrapper[data-size=l] .input__wrap {
  padding: 0;
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
}
.form-container .input-wrapper[data-size=l] .input__wrap .bar {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5px;
  height: 70%;
  transform: translateY(-50%);
  background-color: var(--color-bg-brand-solid, #fb1822);
  animation: blink 0.75s step-end infinite;
  /* 깜빡임 애니메이션 */
}
@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  50.01%, 100% {
    opacity: 0;
  }
}
.form-container .input-wrapper[data-size=l] .input__display {
  color: var(--color-fg-neutral-disabled, #c8cccf);
  padding: 6px 0;
  border: 0;
  display: flex;
  align-items: center;
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
}
.form-container .input-wrapper[data-size=l] .input__display::placeholder {
  color: var(--color-fg-neutral-disabled, #c8cccf);
}
.form-container .input-wrapper[data-size=l] .input__display.has-content {
  color: var(--color-fg-neutral-solid, #222832);
}
.form-container .input-wrapper[data-size=l] .input__display.active + .bar {
  display: none;
}
.form-container .input-wrapper[data-size=l] .input__input {
  border-bottom: 0;
  padding: 6px 0;
}
.form-container .input-wrapper[data-size=l][data-state=error]::before, .form-container .input-wrapper[data-size=l][data-state=error]::after {
  display: block;
}
.form-container .input-wrapper[data-type=select] .select__box {
  position: relative;
}
.form-container .input-wrapper[data-type=select] .select__box .input__input {
  padding-right: 20px;
  cursor: pointer;
}
.form-container .input-wrapper[data-type=select] .select__box .select__icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  position: "absolute";
}
.form-container .input-wrapper[data-type=select] .select__box .select__icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.form-container .input-wrapper[data-type=select] .select__box .select__icon svg {
  width: 100%;
  height: 100%;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.form-container .input-wrapper[data-type=select] .select__box[data-style=box] .input__input {
  padding: 12px calc(12px + 16px + 10px) 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.form-container .input-wrapper[data-type=select] .select__box[data-style=box] .select__icon {
  right: 16px;
}
.form-container .input-wrapper[data-type=select][data-message]::after {
  display: block;
}
.form-container .input-wrapper[data-type=select][data-state=error][data-message]::before {
  display: block;
}
.form-container .input-wrapper[data-type=date] {
  position: relative;
}
.form-container .input-wrapper[data-type=date] input[type=date] {
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 9;
  cursor: pointer;
}
.form-container .input-wrapper[data-type=date] input[type=date]::-webkit-calendar-picker-indicator {
  display: none;
}
.form-container .input-wrapper[data-type=date] .date__box {
  position: relative;
  padding: 8px 0 10px;
  border-bottom: 2px solid var(--color-border-neutral-weak, #f0f3f5);
}
.form-container .input-wrapper[data-type=date] .date__box .date__text {
  height: 28px;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.form-container .input-wrapper[data-type=date] .date__box .date__icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}
.form-container .input-wrapper[data-type=date] .date__box .date__icon svg {
  width: 100%;
  height: 100%;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.form-container .input-wrapper[data-type=no-border] .input__input {
  border: none;
}
.form-container .input-wrapper[data-error-message=no-display]::before, .form-container .input-wrapper[data-error-message=no-display]::after {
  display: none !important;
}
.form-container .input__wrap {
  position: relative;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.form-container .input__label {
  display: block;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.form-container .input__label--required span {
  position: relative;
}
.form-container .input__label--required span::after {
  content: "*";
  position: absolute;
  top: -4px;
  right: -2px;
  transform: translateX(100%);
  color: var(--color-bg-brand-solid, #fb1822);
}
.form-container .input__input {
  padding: 8px 0 10px;
  border-bottom: 2px solid var(--color-border-neutral-weak, #f0f3f5);
  caret-color: var(--color-fg-brand-solid, #fb1822);
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  /* read-only 처럼 값만 보일때 & 라인없음 */
}
.form-container .input__input::placeholder {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.form-container .input__input.read-only {
  border-bottom: 0;
  padding-bottom: 0;
}
.form-container .input__input[readonly]:active, .form-container .input__input[readonly]:focus {
  border-color: var(--color-border-neutral-weak, #f0f3f5);
}
.form-container .input__input[type=password]:not(:placeholder-shown) {
  letter-spacing: 0.25em;
}
.form-container .input__input:focus {
  outline: none;
  border-color: var(--color-border-neutral-solid, #222832);
}
.input-wrapper:not([data-state=error]) .form-container .input__input:focus {
  border-color: var(--color-border-neutral-solid, #222832);
}
.form-container .input__utils {
  display: none;
  position: absolute;
  bottom: 2px;
  right: 0;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
}
.form-container .input__utils.show {
  display: flex;
}
.form-container .input__utils.show .clear-btn {
  display: flex;
}
.form-container .input__utils.clear-show {
  display: flex;
}
.form-container .input__utils.clear-show .clear-btn {
  display: flex;
}
.form-container .input__utils.clear-hidden {
  display: flex;
}
.form-container .input__utils.clear-hidden .clear-btn {
  display: none;
}
.form-container .input__utils.focus-out {
  display: flex;
}
.form-container .input__utils.focus-out .clear-btn {
  display: none;
}
.form-container .input__utils .text {
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.form-container .input__utils .clear-btn {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.form-container .input__utils .clear-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
}
.form-container .input__utils .clear-btn i {
  display: block;
  width: 20px;
  height: 20px;
}
.form-container .input__utils.focus-out .clear-btn::before, .form-container .input__utils.clear-hidden .clear-btn::before {
  display: none;
}
.form-container .input__utils .unit {
  color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.form-container [data-direct-input] {
  display: none;
}

.form-input__list {
  display: flex;
  flex-direction: column;
}
.form-input__list li {
  padding: 12px 0;
}

.period-component .period-button__box {
  display: flex;
  gap: 8px;
}
.period-component .period-button__box .btn {
  flex: 1;
}
@media screen and (max-width: 320px) {
  .period-component .period-button__box .btn {
    padding-left: 0;
    padding-right: 0;
  }
}
.period-component .period-button__box + .period-date__box {
  margin-top: 17px;
}
.period-component .period-date__box {
  display: flex;
  gap: 10px;
  align-items: center;
}
.period-component .period-date__box .input-wrapper {
  flex: 1;
}
.period-component .period-date__box .input-wrapper.active .date__icon i, .period-component .period-date__box .input-wrapper.active .date__icon svg {
  color: var(--color-border-neutral-solid, #222832);
}
.period-component .period-date__box .input-wrapper .input__wrap {
  padding-top: 0;
}
.period-component .period-date__box .input-wrapper .select__text {
  color: var(--color-fg-neutral-solid, #222832);
}
.period-component .period-date__box .input-wrapper .select__button {
  transform: none;
  width: 24px;
  height: 24px;
}
.period-component .period-date__box .input-wrapper .date__text[data-placeholder=true]:not(.active) {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}

.number-input-component .number-input__wrap {
  display: flex;
  align-items: center;
}
.number-input-component .number-input__wrap .input-box {
  flex: 1;
}
.number-input-component .number-input__wrap .hyphen {
  padding: 0 16px;
}
.number-input-component .number-input__wrap .second-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.number-input-component .number-input__wrap .second-box .input__wrap {
  width: 100%;
}
.number-input-component .number-input__wrap .second-box.masking__wrap .input__wrap {
  width: 16px;
}
.number-input-component .number-input__wrap .second-box .masking__box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
.number-input-component .number-input__wrap .second-box .masking__box .dot {
  display: block;
  position: relative;
  width: 6px;
  height: 6px;
  font-size: 1.75rem;
  line-height: 6px;
  letter-spacing: 0;
}
.number-input-component .number-input__wrap .second-box .masking__box .dot::before {
  content: "•";
  position: absolute;
  top: -2px;
  left: -4px;
}
.number-input-component .number-input__wrap .second-box .input__input[type=password] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.55rem;
  letter-spacing: 0.15em;
  height: 48px;
  cursor: pointer;
}
.number-input-component .number-input__wrap .second-box .input__input[type=password]::placeholder {
  font-size: 1.55rem;
  letter-spacing: 0.15em;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.number-input-component .number-input__wrap .second-box .input__input[type=password][data-state=disabled] {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.number-input-component .input-wrapper[data-state1=error]::before, .number-input-component .input-wrapper[data-state2=error]::before {
  content: "";
  position: absolute;
  color: var(--color-fg-semantic-warning, #ff333c);
  top: 100%;
  left: 0;
  display: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12.0001 14.4902C11.5001 14.4902 11.1001 14.0802 11.1001 13.5702V8.42024C11.1001 7.91024 11.5001 7.50024 12.0001 7.50024C12.5001 7.50024 12.9001 7.91024 12.9001 8.42024V13.5702C12.9001 14.0802 12.5001 14.4902 12.0001 14.4902Z' fill='%23FB1822'/%3E%3Cpath d='M12.0001 17.3903C12.4971 17.3903 12.9001 16.9874 12.9001 16.4903C12.9001 15.9933 12.4971 15.5903 12.0001 15.5903C11.503 15.5903 11.1001 15.9933 11.1001 16.4903C11.1001 16.9874 11.503 17.3903 12.0001 17.3903Z' fill='%23FB1822'/%3E%3Cpath d='M9.14495 4.60796C10.4392 2.46433 13.5604 2.46434 14.8547 4.60796L21.7187 15.9767C23.0529 18.1865 21.4541 21.0001 18.8639 21.0002H5.13573C2.54552 21.0001 0.9467 18.1865 2.28087 15.9767L9.14495 4.60796ZM13.2981 5.53909C12.7098 4.56466 11.2898 4.56467 10.7015 5.53909L3.83843 16.9078C3.232 17.9122 3.95841 19.1909 5.13573 19.191H18.8639C20.0412 19.1909 20.7676 17.9122 20.1612 16.9078L13.2981 5.53909Z' fill='%23FB1822'/%3E%3C/svg%3E");
  background-size: 16px;
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.number-input-component .input-wrapper[data-state1=error]::after, .number-input-component .input-wrapper[data-state2=error]::after {
  display: none;
  color: var(--color-fg-semantic-warning, #ff333c) !important;
  padding-left: 20px;
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.number-input-component .input-wrapper[data-state1=error] .input__label, .number-input-component .input-wrapper[data-state2=error] .input__label {
  color: var(--color-fg-semantic-warning, #ff333c);
}
.number-input-component .input-wrapper[data-focus1=on]:not([data-state1=error]) .input__label {
  color: var(--color-fg-neutral-solid, #222832);
}
.number-input-component .input-wrapper[data-focus1=on]:not([data-state1=error])[data-message1]::after {
  display: block;
  content: attr(data-message1);
}
.number-input-component .input-wrapper[data-focus2=on]:not([data-state2=error]) .input__label {
  color: var(--color-fg-neutral-solid, #222832);
}
.number-input-component .input-wrapper[data-focus2=on]:not([data-state2=error])[data-message2]::after {
  display: block;
  content: attr(data-message2);
}
.number-input-component .input-wrapper[data-focus=off]:not([data-state=error]):not([data-type=select])[data-message]::after {
  display: none;
}
.number-input-component .input-wrapper[data-state1=error] .first-box .input__input {
  border-color: var(--color-bg-danger-danger, #ff333c);
}
.number-input-component .input-wrapper[data-state1=error].active1::before, .number-input-component .input-wrapper[data-state1=error].active1::after {
  display: block;
}
.number-input-component .input-wrapper[data-state1=error].active1::after {
  content: attr(data-message1);
}
.number-input-component .input-wrapper[data-state2=error] .second-box .input__input {
  border-color: var(--color-fg-semantic-warning, #ff333c);
}
.number-input-component .input-wrapper[data-state2=error].active2::before, .number-input-component .input-wrapper[data-state2=error].active2::after {
  display: block;
}
.number-input-component .input-wrapper[data-state2=error].active2::after {
  content: attr(data-message2);
}

.card-input-component .card-input-wrap {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  padding: 8px 32px 8px 0;
  border-bottom: 2px solid var(--color-border-neutral-weak, #f0f3f5);
  caret-color: var(--color-fg-brand-solid, #fb1822);
}
.card-input-component .card-input-wrap .card-input {
  width: 58px;
  height: 28px;
  letter-spacing: 2px;
}
.card-input-component .card-input-wrap .card-input::placeholder {
  letter-spacing: 0.1em;
  color: var(--color-fg-neutral-weak, #b2b6ba);
}
.card-input-component .card-input-wrap .card-input[maxlength="3"] {
  width: 43px;
}
.card-input-component .card-input-wrap .card-input[maxlength="5"] {
  width: 73px;
}
.card-input-component .card-input-wrap .card-input[type=password] {
  padding: 0 4px;
  font-size: 1.5rem;
  line-height: 28px;
  letter-spacing: 0.05em;
  touch-action: manipulation;
}
.card-input-component .card-input-wrap .card-input[type=password]::placeholder {
  letter-spacing: 0.05em;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
@supports (-webkit-touch-callout: none) {
  .card-input-component .card-input-wrap .card-input[type=password] {
    font-size: 0.5rem;
    letter-spacing: 0.65em;
  }
  .card-input-component .card-input-wrap .card-input[type=password]::placeholder {
    font-size: 1.55rem;
  }
}
.card-input-component .card-input-wrap .card-input-box {
  height: 28px;
}
.card-input-component .card-input-wrap .amex-card-input-box {
  display: flex;
  gap: 4px;
}
.card-input-component .card-input-wrap .amex-card-input-box .card-input-box:first-child .card-input {
  padding-right: 0;
}
.card-input-component .card-input-wrap .amex-card-input-box .card-input-box:last-child .card-input {
  padding-left: 0;
}
.card-input-component .card-input-wrap:focus-within {
  border-color: var(--color-border-neutral-solid, #222832);
}
.card-input-component .input-wrapper:not([data-state=error]) .card-input-wrap:focus-within {
  border-color: var(--color-border-neutral-solid, #222832);
}

/*-----------------------------*/
/*    Input    */
/*-----------------------------*/
.form_dropdown__box {
  position: relative;
  width: 100%;
}
.form_dropdown__box[data-state=error] {
  position: relative;
}
.form_dropdown__box[data-state=error] .form_dropdown__trigger {
  border-color: var(--color-fg-semantic-warning, #ff333c);
}
.form_dropdown__box[data-state=disabled] {
  pointer-events: none;
}
.form_dropdown__box[data-state=disabled] .form_dropdown__trigger {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  color: var(--color-fg-neutral-disabled, #c8cccf);
}
.form_dropdown__box[data-state=disabled] .form_dropdown__icon svg {
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.form_dropdown__box[data-message]::after {
  content: attr(data-message);
  position: absolute;
  color: var(--color-fg-neutral-muted, #6A6F77);
  bottom: -4px;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.form_dropdown__box[data-open=true] .form_dropdown__trigger {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top: 1px solid var(--color-border-neutral-solid, #222832) !important;
  border-left: 1px solid var(--color-border-neutral-solid, #222832) !important;
  border-right: 1px solid var(--color-border-neutral-solid, #222832) !important;
  border-bottom: 1px solid var(--color-border-neutral-muted, #c8cccf);
}
.form_dropdown__box[data-open=true] .form_dropdown__icon {
  transform: rotate(180deg);
}
.form_dropdown__box[data-open=true] .form_dropdown__dropdown {
  display: block;
}
.form_dropdown__box[data-selected=true] .form_dropdown__trigger {
  color: var(--color-fg-neutral-solid, #222832);
}
.form_dropdown__box[data-type=bottom-sheet] .form_dropdown__trigger {
  color: var(--color-fg-neutral-solid, #222832);
}
.form_dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 12px 12px 16px;
  background: #ffffff;
  border: 1px solid var(--color-border-neutral-muted, #c8cccf);
  border-radius: 8px;
  transition: border-color 0.2s ease;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-disabled, #c8cccf);
}
.form_dropdown__trigger:focus {
  outline: none;
  border-color: var(--color-border-neutral-solid, #222832);
}
.form_dropdown__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.form_dropdown__icon svg {
  width: 100%;
  height: 100%;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.form_dropdown__dropdown {
  display: none;
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border-neutral-solid, #222832);
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.form_dropdown__option {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  transition: background-color 0.2s ease;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  width: 100%;
}
.form_dropdown__option:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.form_dropdown__option[data-disabled=true] {
  color: var(--color-fg-neutral-disabled, #c8cccf);
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  cursor: not-allowed;
  pointer-events: none;
}
.form_dropdown__option[data-selected=true] {
  color: var(--color-fg-neutral-solid, #222832);
}

.form_dropdown__box[data-type=bank] .form_dropdown__trigger {
  padding: 10px 12px 10px 16px;
  border-radius: 10px;
  height: 52px;
}
.form_dropdown__box[data-type=bank] .form_dropdown__bank-box {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
}
.form_dropdown__box[data-type=bank] .form_dropdown__bank-box .form_dropdown__text {
  margin-left: 4px;
  padding-left: 4px;
}
.form_dropdown__box[data-type=bank] .form_dropdown__bank-box .form_dropdown__icon {
  flex-shrink: 0;
}
.form_dropdown__box[data-type=bank] .form_dropdown__bank-box .element__thumb {
  flex-shrink: 0;
}
.form_dropdown__box[data-type=bank] .form_dropdown__bank-box:has(.label) .element__thumb + .form_dropdown__text {
  width: calc(100% - 102px);
}
.form_dropdown__box[data-type=text-label] .form_dropdown__trigger {
  gap: 10px;
}
.form_dropdown__box[data-type=text-label] .form_dropdown__text-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.textarea-wrapper {
  position: relative;
  width: 100%;
  transform: translateZ(0);
}
.textarea-wrapper .textarea__label-wrap {
  padding-bottom: 4px;
}
.textarea-wrapper .textarea__label {
  display: block;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.textarea-wrapper .textarea__label--required span {
  position: relative;
}
.textarea-wrapper .textarea__label--required span::after {
  content: "*";
  position: absolute;
  top: -2px;
  right: -6px;
  transform: translateX(100%);
  color: var(--color-fg-brand-solid, #fb1822);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.textarea-wrapper--focused .textarea__label {
  color: var(--color-fg-neutral-solid, #222832);
}
.textarea-wrapper .textarea__input-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.textarea-wrapper .textarea__input {
  width: 100%;
  height: 120px;
  padding: 12px 16px;
  border: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
  border-radius: 8px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  color: var(--color-fg-neutral-disabled, #c8cccf);
  resize: none;
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.textarea-wrapper .textarea__input::placeholder {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.textarea-wrapper .textarea__input:focus {
  outline: none;
  border-color: var(--color-border-neutral-solid, #222832);
  color: var(--color-fg-neutral-solid, #222832);
}
.textarea-wrapper .textarea__input:not(:placeholder-shown) {
  color: var(--color-fg-neutral-solid, #222832);
}
.textarea-wrapper .textarea__info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding-top: 4px;
}
.textarea-wrapper .textarea__helper-text {
  flex: 1;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.textarea-wrapper .textarea__counter {
  flex-shrink: 0;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.textarea-wrapper .textarea__counter .current {
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.textarea-wrapper .textarea__counter .max {
  color: var(--color-fg-neutral-weak, #b2b6ba);
}
.textarea-wrapper[data-state=error] .textarea__label {
  color: var(--color-fg-brand-solid, #fb1822);
}
.textarea-wrapper[data-state=error] .textarea__input {
  border-color: var(--color-fg-brand-solid, #fb1822);
  color: var(--color-fg-neutral-solid, #222832);
}
.textarea-wrapper[data-state=error] .textarea__helper-text {
  color: var(--color-fg-semantic-warning, #ff333c);
}
.textarea-wrapper[data-state=error] .textarea__helper-text::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0001 14.4902C11.5001 14.4902 11.1001 14.0802 11.1001 13.5702V8.42024C11.1001 7.91024 11.5001 7.50024 12.0001 7.50024C12.5001 7.50024 12.9001 7.91024 12.9001 8.42024V13.5702C12.9001 14.0802 12.5001 14.4902 12.0001 14.4902Z' fill='%23FB1822'/%3E%3Cpath d='M12.0001 17.3903C12.4971 17.3903 12.9001 16.9874 12.9001 16.4903C12.9001 15.9933 12.4971 15.5903 12.0001 15.5903C11.503 15.5903 11.1001 15.9933 11.1001 16.4903C11.1001 16.9874 11.503 17.3903 12.0001 17.3903Z' fill='%23FB1822'/%3E%3Cpath d='M9.14495 4.60796C10.4392 2.46433 13.5604 2.46434 14.8547 4.60796L21.7187 15.9767C23.0529 18.1865 21.4541 21.0001 18.8639 21.0002H5.13573C2.54552 21.0001 0.9467 18.1865 2.28087 15.9767L9.14495 4.60796ZM13.2981 5.53909C12.7098 4.56466 11.2898 4.56467 10.7015 5.53909L3.83843 16.9078C3.232 17.9122 3.95841 19.1909 5.13573 19.191H18.8639C20.0412 19.1909 20.7676 17.9122 20.1612 16.9078L13.2981 5.53909Z' fill='%23FB1822'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: top;
}
.textarea-wrapper[data-state=disabled] {
  pointer-events: none;
}
.textarea-wrapper[data-state=disabled] .textarea__label {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.textarea-wrapper[data-state=disabled] .textarea__input {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  color: var(--color-fg-neutral-disabled, #c8cccf);
  border-color: var(--color-border-neutral-muted-weak, #dee1e4);
}
.textarea-wrapper[data-state=disabled] .textarea__input::placeholder {
  color: var(--color-fg-neutral-disabled, #c8cccf);
}
.textarea-wrapper[data-state=disabled] .textarea__helper-text {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.textarea-wrapper[data-state=disabled] .textarea__counter {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.textarea-wrapper[data-state=disabled] .textarea__counter .current,
.textarea-wrapper[data-state=disabled] .textarea__counter .max {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.textarea-wrapper[data-message] .textarea__info {
  padding-bottom: 16px;
}

.search-field.input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 10px;
  padding: 12px;
  position: relative;
  width: 100%;
  transform: translateZ(0);
}
.search-field.input-wrapper .search-field__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}
.search-field.input-wrapper .search-field__icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.search-field.input-wrapper .search-field__icon svg {
  width: 100%;
  height: 100%;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.search-field.input-wrapper .search-field__input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  caret-color: var(--color-fg-brand-solid, #fb1822);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.search-field.input-wrapper .search-field__input::placeholder {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.search-field.input-wrapper .search-field__input.input__input {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.search-field.input-wrapper .input__utils {
  display: flex;
  align-items: center;
  position: static;
  gap: 8px;
  height: 100%;
  padding-top: 0;
  margin-left: 10px;
  background: none;
}
.search-field.input-wrapper .input__utils.show {
  display: flex;
}
.search-field.input-wrapper .input__utils .clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-icon-neutral-subtle, #898d93);
  opacity: 0;
  pointer-events: none;
  border-radius: 9999px;
}
.search-field.input-wrapper .input__utils .clear-btn svg {
  width: 12px;
  height: 12px;
  color: var(--color-icon-neutral-subtle, #898d93);
}
.search-field.input-wrapper .input__utils.clear-show .clear-btn {
  opacity: 0.2;
  pointer-events: auto;
  cursor: pointer;
}
.search-field.input-wrapper:has(.search-field__input:focus) .search-field__input, .search-field.input-wrapper:has(.search-field__input.active) .search-field__input {
  color: var(--color-fg-neutral-solid, #222832);
}
.search-field.input-wrapper:has(.search-field__input:focus) .input__utils .clear-btn, .search-field.input-wrapper:has(.search-field__input.active) .input__utils .clear-btn {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

/*-----------------------------*/
/*    Controls    */
/*-----------------------------*/
input[type=radio], input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.aira-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.radio__wrap {
  display: flex;
  gap: 20px;
}
.radio__wrap[data-align=start] {
  justify-content: flex-start;
}
.radio__wrap[data-align=start] .radio__box {
  width: fit-content;
}
.radio__box {
  width: 100%;
}
.radio__box .radio__label {
  display: block;
  padding-left: 28px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.radio__box .radio__label::after, .radio__box .radio__label::before {
  width: 20px;
  height: 20px;
}
.radio__box[data-border=true] {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.radio__box[data-border=true]:has(.list-component), .radio__box[data-border=true]:has(.radio__box) {
  padding: 8px 16px;
}
.radio__box[data-border=true]:has(.checkbox__input:checked), .radio__box[data-border=true]:has(.radio__input:checked) {
  border-color: var(--color-fg-brand-solid, #fb1822);
  background-color: var(--color-bg-neutral-inverted, #ffffff);
}
.radio__box[data-border=true].radio__box {
  padding: 0 16px;
}
.radio__box[data-border=true].radio__box .radio__label {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 32px;
  display: block;
  width: 100%;
}
.radio__box[data-border=true] .checkbox__label {
  display: flex;
  align-items: center;
}
.radio__box[data-border=true] .checkbox__label::after, .radio__box[data-border=true] .checkbox__label::before {
  top: 50%;
  transform: translateY(-50%);
}
.radio__box[data-border=true] .list-component {
  padding: 0;
}
.radio__box[data-border=true] .list-component__tit {
  font-weight: 500;
}
.radio__box[data-border=true] .list-component__info {
  align-items: center !important;
}
.radio__input:checked + .radio__label::before {
  opacity: 1;
}
.radio__input:checked + .radio__label::after {
  opacity: 0;
}
.radio__input:disabled + .radio__label {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  pointer-events: none;
}
.radio__input:disabled + .radio__label::before {
  opacity: 0;
}
.radio__input:disabled + .radio__label::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%23F0F3F5' stroke='%23DEE1E4'/%3E%3C/svg%3E");
}
.radio__label {
  position: relative;
  cursor: pointer;
}
.radio__label::after, .radio__label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-size: 100% 100%;
}
.radio__label::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12.5' r='12' fill='%23FB1822'/%3E%3Ccircle cx='12' cy='12.5' r='6' fill='white'/%3E%3C/svg%3E%0A");
  opacity: 0;
}
.radio__label::after {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12.5' r='11.5' stroke='%23E7E9EA'/%3E%3Ccircle cx='12' cy='12.5' r='6' fill='white'/%3E%3C/svg%3E%0A");
}

.checkbox__box {
  width: 100%;
}
.checkbox__box[data-type=box] .checkbox__label {
  padding-left: 30px;
  min-height: 20px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.checkbox__box[data-type=box] .checkbox__label::after, .checkbox__box[data-type=box] .checkbox__label::before {
  top: 1px;
  width: 20px;
  height: 20px;
}
.checkbox__box[data-type=box] .checkbox__label::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6C0 2.68629 2.68629 0 6 0H14C17.3137 0 20 2.68629 20 6V14C20 17.3137 17.3137 20 14 20H6C2.68629 20 0 17.3137 0 14V6Z' fill='%23F0F3F5'/%3E%3Cpath d='M6 0.5H14C17.0376 0.5 19.5 2.96243 19.5 6V14C19.5 17.0376 17.0376 19.5 14 19.5H6C2.96243 19.5 0.5 17.0376 0.5 14V6C0.5 2.96243 2.96243 0.5 6 0.5Z' stroke='black' stroke-opacity='0.08'/%3E%3Crect width='12' height='12' transform='translate(4 4)' fill='%23F0F3F5'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.86 5.92005C15.1251 6.11888 15.1788 6.49496 14.98 6.76005L9.58002 13.9601C9.47566 14.0992 9.31605 14.1862 9.14256 14.1985C8.96906 14.2109 8.79875 14.1473 8.67576 14.0243L5.07576 10.4243C4.84145 10.19 4.84145 9.8101 5.07576 9.57579C5.31007 9.34148 5.68997 9.34148 5.92429 9.57579L9.03511 12.6866L14.02 6.04005C14.2188 5.77496 14.5949 5.72123 14.86 5.92005Z' fill='%23B2B6BA'/%3E%3C/svg%3E%0A");
}
.checkbox__box[data-type=box] .checkbox__label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6Z' fill='%23FB1822'/%3E%3Crect width='16' height='16' transform='translate(4 4)' fill='%23FB1822'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.4812 6.56007C18.8346 6.82517 18.9063 7.32661 18.6412 7.68007L11.4412 17.2801C11.302 17.4656 11.0892 17.5816 10.8579 17.5981C10.6266 17.6145 10.3995 17.5297 10.2355 17.3658L5.43549 12.5658C5.12307 12.2533 5.12307 11.7468 5.43549 11.4344C5.74791 11.122 6.25444 11.122 6.56686 11.4344L10.7146 15.5821L17.3612 6.72007C17.6263 6.36661 18.1277 6.29497 18.4812 6.56007Z' fill='white'/%3E%3C/svg%3E");
  opacity: 0;
}
.checkbox__box[data-type=reverse-box] {
  min-height: 20px;
}
.checkbox__box[data-type=reverse-box] .checkbox__label {
  padding-right: 28px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.checkbox__box[data-type=reverse-box] .checkbox__label::after, .checkbox__box[data-type=reverse-box] .checkbox__label::before {
  top: 1px;
  width: 20px;
  height: 20px;
}
.checkbox__box[data-type=reverse-box] .checkbox__label::after {
  left: initial;
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6C0 2.68629 2.68629 0 6 0H14C17.3137 0 20 2.68629 20 6V14C20 17.3137 17.3137 20 14 20H6C2.68629 20 0 17.3137 0 14V6Z' fill='%23F0F3F5'/%3E%3Cpath d='M6 0.5H14C17.0376 0.5 19.5 2.96243 19.5 6V14C19.5 17.0376 17.0376 19.5 14 19.5H6C2.96243 19.5 0.5 17.0376 0.5 14V6C0.5 2.96243 2.96243 0.5 6 0.5Z' stroke='black' stroke-opacity='0.08'/%3E%3Crect width='12' height='12' transform='translate(4 4)' fill='%23F0F3F5'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.86 5.92005C15.1251 6.11888 15.1788 6.49496 14.98 6.76005L9.58002 13.9601C9.47566 14.0992 9.31605 14.1862 9.14256 14.1985C8.96906 14.2109 8.79875 14.1473 8.67576 14.0243L5.07576 10.4243C4.84145 10.19 4.84145 9.8101 5.07576 9.57579C5.31007 9.34148 5.68997 9.34148 5.92429 9.57579L9.03511 12.6866L14.02 6.04005C14.2188 5.77496 14.5949 5.72123 14.86 5.92005Z' fill='%23B2B6BA'/%3E%3C/svg%3E%0A");
}
.checkbox__box[data-type=reverse-box] .checkbox__label::before {
  left: initial;
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6Z' fill='%23FB1822'/%3E%3Crect width='16' height='16' transform='translate(4 4)' fill='%23FB1822'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.4812 6.56007C18.8346 6.82517 18.9063 7.32661 18.6412 7.68007L11.4412 17.2801C11.302 17.4656 11.0892 17.5816 10.8579 17.5981C10.6266 17.6145 10.3995 17.5297 10.2355 17.3658L5.43549 12.5658C5.12307 12.2533 5.12307 11.7468 5.43549 11.4344C5.74791 11.122 6.25444 11.122 6.56686 11.4344L10.7146 15.5821L17.3612 6.72007C17.6263 6.36661 18.1277 6.29497 18.4812 6.56007Z' fill='white'/%3E%3C/svg%3E");
  opacity: 0;
}
.checkbox__box[data-type=ghost] .checkbox__label {
  padding-left: 30px;
  min-height: initial;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.checkbox__box[data-type=ghost] .checkbox__label::after, .checkbox__box[data-type=ghost] .checkbox__label::before {
  top: 3px;
  width: 16px;
  height: 16px;
}
.checkbox__box[data-type=ghost] .checkbox__label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4812 2.56007C14.8346 2.82517 14.9063 3.32661 14.6412 3.68007L7.44117 13.2801C7.30202 13.4656 7.08921 13.5816 6.85788 13.5981C6.62655 13.6145 6.39947 13.5297 6.23549 13.3658L1.43549 8.56576C1.12307 8.25334 1.12307 7.74681 1.43549 7.43439C1.74791 7.12197 2.25444 7.12197 2.56686 7.43439L6.71462 11.5821L13.3612 2.72007C13.6263 2.36661 14.1277 2.29497 14.4812 2.56007Z' fill='%23FB1822'/%3E%3C/svg%3E");
  opacity: 0;
}
.checkbox__box[data-type=ghost] .checkbox__label::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4812 2.56007C14.8346 2.82517 14.9063 3.32661 14.6412 3.68007L7.44117 13.2801C7.30202 13.4656 7.08921 13.5816 6.85788 13.5981C6.62655 13.6145 6.39947 13.5297 6.23549 13.3658L1.43549 8.56576C1.12307 8.25334 1.12307 7.74681 1.43549 7.43439C1.74791 7.12197 2.25444 7.12197 2.56686 7.43439L6.71462 11.5821L13.3612 2.72007C13.6263 2.36661 14.1277 2.29497 14.4812 2.56007Z' fill='%23C8CCCF'/%3E%3C/svg%3E");
}
.checkbox__box[data-type=ghost][data-size=s] .checkbox__label {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.checkbox__box[data-type=ghost][data-size=s] .checkbox__label::after, .checkbox__box[data-type=ghost][data-size=s] .checkbox__label::before {
  left: 2px;
  top: 2px;
}
.checkbox__box[data-type=reverse-ghost] .checkbox__label {
  padding-right: 26px;
  min-height: initial;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.checkbox__box[data-type=reverse-ghost] .checkbox__label::after, .checkbox__box[data-type=reverse-ghost] .checkbox__label::before {
  top: 3px;
  width: 16px;
  height: 16px;
}
.checkbox__box[data-type=reverse-ghost] .checkbox__label::before {
  left: initial;
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4812 2.56007C14.8346 2.82517 14.9063 3.32661 14.6412 3.68007L7.44117 13.2801C7.30202 13.4656 7.08921 13.5816 6.85788 13.5981C6.62655 13.6145 6.39947 13.5297 6.23549 13.3658L1.43549 8.56576C1.12307 8.25334 1.12307 7.74681 1.43549 7.43439C1.74791 7.12197 2.25444 7.12197 2.56686 7.43439L6.71462 11.5821L13.3612 2.72007C13.6263 2.36661 14.1277 2.29497 14.4812 2.56007Z' fill='%23FB1822'/%3E%3C/svg%3E");
  opacity: 0;
}
.checkbox__box[data-type=reverse-ghost] .checkbox__label::after {
  left: initial;
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4812 2.56007C14.8346 2.82517 14.9063 3.32661 14.6412 3.68007L7.44117 13.2801C7.30202 13.4656 7.08921 13.5816 6.85788 13.5981C6.62655 13.6145 6.39947 13.5297 6.23549 13.3658L1.43549 8.56576C1.12307 8.25334 1.12307 7.74681 1.43549 7.43439C1.74791 7.12197 2.25444 7.12197 2.56686 7.43439L6.71462 11.5821L13.3612 2.72007C13.6263 2.36661 14.1277 2.29497 14.4812 2.56007Z' fill='%23C8CCCF'/%3E%3C/svg%3E");
}
.checkbox__box[data-state=disabled] {
  cursor: default;
  pointer-events: none;
}
.checkbox__box[data-state=disabled] .checkbox__label {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.checkbox__box[data-state=disabled] .checkbox__label::before {
  opacity: 0.4;
}
.checkbox__box[data-state=disabled] .checkbox__label::after {
  opacity: 0;
}
.checkbox__box[data-color=gray] .checkbox__label {
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.checkbox__box[data-checked-text-color=secondary] .checkbox__input:checked + .checkbox__label {
  color: var(--color-fg-brand-solid, #fb1822);
}
.checkbox__box[data-border=true] {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.checkbox__box[data-border=true]:has(.list-component), .checkbox__box[data-border=true]:has(.radio__box) {
  padding: 8px 16px;
}
.checkbox__box[data-border=true]:has(.checkbox__input:checked), .checkbox__box[data-border=true]:has(.radio__input:checked) {
  border-color: var(--color-fg-brand-solid, #fb1822);
  background-color: var(--color-bg-neutral-inverted, #ffffff);
}
.checkbox__box[data-border=true].radio__box {
  padding: 0 16px;
}
.checkbox__box[data-border=true].radio__box .radio__label {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 32px;
  display: block;
  width: 100%;
}
.checkbox__box[data-border=true] .checkbox__label {
  display: flex;
  align-items: center;
}
.checkbox__box[data-border=true] .checkbox__label::after, .checkbox__box[data-border=true] .checkbox__label::before {
  top: 50%;
  transform: translateY(-50%);
}
.checkbox__box[data-border=true] .list-component {
  padding: 0;
}
.checkbox__box[data-border=true] .list-component__tit {
  font-weight: 500;
}
.checkbox__box[data-border=true] .list-component__info {
  align-items: center !important;
}
.checkbox__input:checked + .checkbox__label::before {
  opacity: 1;
}
.checkbox__input:checked + .checkbox__label::after {
  opacity: 0;
}
.checkbox__label {
  position: relative;
  cursor: pointer;
  display: block;
}
.checkbox__label::after, .checkbox__label::before {
  content: "";
  position: absolute;
  left: 0;
  background-size: 100% 100%;
}
.checkbox__sub-label {
  color: var(--color-fg-neutral-muted, #6A6F77);
  margin-top: 4px;
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-r-weight, 400);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.checkbox__sub-label--dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.checkbox__sub-label--dropdown[aria-expanded=true] .label-dropdown-btn {
  transform: rotate(180deg);
}
.checkbox__sub-label--dropdown .label-dropdown-btn {
  color: var(--color-fg-neutral-muted, #6A6F77);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.checkbox__sub-label--dropdown .label-dropdown-btn .label-dropdown-icon {
  width: 100%;
  height: 100%;
}
.checkbox__sub-label--dropdown .label-dropdown-btn svg {
  width: 100%;
  height: 100%;
}
.checkbox__sub-label--dropdown .label-dropdown-text {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
  word-break: break-all;
}

.stepper__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
  border-radius: 8px;
  padding: 0;
  position: relative;
  width: 100%;
  gap: 4px;
  background-color: #ffffff;
}
.stepper__box[data-size=s] {
  width: auto;
}
.stepper__box[data-size=s] .stepper__button {
  padding: 0;
  width: 32px;
  height: 32px;
}
.stepper__box[data-size=s] .stepper__button i {
  width: 16px;
  height: 16px;
}
.stepper__box[data-size=s] .stepper__button::before {
  width: 44px;
  height: 44px;
}
.stepper__box[data-size=s] .stepper__value {
  width: 28px;
  padding: 2px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.stepper__box[data-size=s] .stepper__value-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  padding: 2px 0;
}
.stepper__box[data-size=s] .stepper__value-box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.stepper__box[data-state=disabled] .stepper__button {
  pointer-events: none;
}
.stepper__box[data-state=disabled] .stepper__button i {
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.stepper__box[data-state=disabled] .stepper__value {
  color: var(--color-fg-neutral-disabled, #c8cccf);
}
.stepper__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: none;
  border: none;
}
.stepper__button i {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--color-icon-neutral-solid, #222832);
}
.stepper__button svg {
  width: 100%;
  height: 100%;
}
.stepper__button .tooltip {
  display: block;
  position: absolute;
  top: 100%;
  transform: translate(0, -8px);
  z-index: 2;
}
.stepper__button[data-state=disabled] {
  pointer-events: none;
}
.stepper__button[data-state=disabled] i {
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.stepper__button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
}
.stepper__value {
  text-align: center;
  color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  padding: 4px 0;
  border-radius: 4px;
  width: 33px;
  height: 100%;
  caret-color: var(--color-fg-brand-solid, #fb1822);
}
.stepper__value:focus-within {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.stepper__value-box {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 7px 6px;
}
.stepper__value-box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
}

.agree-all-container {
  width: 100%;
}
.agree-all-container[data-type=grid] .agree-all-section {
  border: none;
  padding: 0;
}
.agree-all-container[data-type=grid] .agree-all-section .checkbox__box .checkbox__label {
  padding: 10px;
  padding-left: 30px;
}
.agree-all-container[data-type=grid] .agree-all-section .checkbox__box .checkbox__label::before, .agree-all-container[data-type=grid] .agree-all-section .checkbox__box .checkbox__label::after {
  left: 0;
  top: 10px;
}
.agree-all-container[data-type=grid] .agree-list {
  padding: 0;
}
.agree-all-container[data-type=grid] .checkbox-set {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.agree-all-section {
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
  border-radius: 10px;
}
.agree-all-section .checkbox__box .checkbox__label {
  padding: 14px 16px;
  padding-left: 42px;
}
.agree-all-section .checkbox__box .checkbox__label::before, .agree-all-section .checkbox__box .checkbox__label::after {
  left: 16px;
  top: 17px;
}
.agree-all-section[data-state=checked] {
  border-color: var(--color-fg-brand-solid, #fb1822);
}
.agree-all-section[data-state=checked] .checkbox__label {
  color: var(--color-fg-brand-solid, #fb1822);
}
.agree-all-section[data-style=false] {
  border: none;
  border-radius: none;
}

.agree-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
  padding: 0 12px;
}

.agree-item__header {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
.agree-item__header .checkbox__box {
  flex: 1;
}
.agree-item__header .checkbox__label .required-mark, .agree-item__header .checkbox__label .optional-mark {
  margin-left: 2px;
}
.agree-item__header .expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.agree-item__header .expand-btn .expand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-icon-neutral-muted, #b2b6ba);
  position: relative;
}
.agree-item__header .expand-btn .expand-icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.agree-item__header .expand-btn .expand-icon svg {
  width: 100%;
  height: 100%;
}

.agree-item__content {
  display: none;
}
.agree-item__content .content-text {
  color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.agree-item__content .content-text p {
  margin: 0;
}
.agree-item__content .content-text p .label-dropdown-text {
  margin: 0;
}
.agree-item__content .content-text p:not(:last-child) {
  margin-bottom: 10px;
}
.agree-item__content .content-text p:not(:last-child).label-dropdown-text {
  margin: 0;
}
.agree-item__content .agree-item__2depth {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.agree-item__content .agree-item__2depth .checkbox-set {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
}
.agree-item__content .agree-item__2depth .link-btn {
  width: 16px;
  height: 16px;
  position: relative;
}
.agree-item__content .agree-item__2depth .link-btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.agree-item__content .agree-item__2depth .link-btn i {
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.agree-item__content .agree-item__2depth .link-btn i svg {
  width: 100%;
  height: 100%;
}
.agree-item__content .agree-item__2depth .optional-mark {
  color: var(--color-fg-neutral-weak, #b2b6ba);
}

.agree-item[data-expanded=true] .agree-item__content {
  display: block;
}
.agree-item[data-expanded=true] .expand-btn {
  transform: rotate(180deg);
}

.required-mark {
  color: var(--color-fg-brand-solid, #fb1822);
}

.optional-mark {
  color: var(--color-fg-neutral-muted, #6A6F77);
}

.unit-select__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.unit-select__list-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.unit-select__list-label .value {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.unit-select__list-label .inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.unit-select__list-title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.unit-select__list-text {
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.unit-select__list-info {
  display: flex;
  gap: 4px;
}
.unit-select__list-info--icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.unit-select__list-info--icon img, .unit-select__list-info--icon svg {
  width: 100%;
  height: 100%;
  max-width: none;
}
.unit-select__list-info--text {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.unit-select__list-info--text.red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}

.checkbox__label:after, .checkbox__label:before,
.radio__label:after,
.radio__label:before {
  width: 44px !important;
  height: 44px !important;
  top: 0% !important;
  left: 0 !important;
  transform: translate(-12px, -10px) !important;
  background-size: 20px 20px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

[data-type=reverse-box] .checkbox__label::after,
[data-type=reverse-box] .checkbox__label::before,
[data-type=reverse-ghost] .checkbox__label::after,
[data-type=reverse-ghost] .checkbox__label::before {
  left: initial !important;
  right: 0 !important;
  transform: translate(12px, -10px) !important;
}

[data-type=ghost] .checkbox__label::after,
[data-type=ghost] .checkbox__label::before,
[data-type=reverse-ghost] .checkbox__label::after,
[data-type=reverse-ghost] .checkbox__label::before {
  background-size: 16px 16px !important;
}

[data-border=true] .checkbox__label::after,
[data-border=true] .checkbox__label::before {
  top: 50% !important;
  transform: translate(-12px, -50%) !important;
}

[data-border=true] .radio__label::after,
[data-border=true] .radio__label::before {
  top: 50% !important;
  transform: translate(-12px, -50%) !important;
}

.agree-all-section .checkbox__label::after,
.agree-all-section .checkbox__label::before {
  left: 0 !important;
  transform: translate(0, 3px) !important;
}

.agree-all-container[data-type=grid] .agree-all-section .checkbox__label::after,
.agree-all-container[data-type=grid] .agree-all-section .checkbox__label::before {
  transform: translate(-12px, -10px) !important;
}

.list-component .radio__label::after,
.list-component .radio__label::before,
.list-component .checkbox__label::after,
.list-component .checkbox__label::before {
  top: 50% !important;
  transform: translate(-12px, -50%) !important;
}

/*-----------------------------*/
/*    Tooltip    */
/*-----------------------------*/
.tooltip {
  position: relative;
  padding: 2px 6px;
  border-radius: 6px;
  width: fit-content;
  --tooltip-bg-color: #353b44;
  --tooltip-text-color: #ffffff;
  background-color: var(--tooltip-bg-color);
  color: var(--tooltip-text-color);
}
.tooltip__txt {
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.tooltip__txt--danger {
  color: var(--color-fg-brand-solid, #fb1822);
}
.tooltip__txt svg, .tooltip__txt img {
  width: 12px;
  height: 12px;
}
.tooltip::after {
  content: "";
  position: absolute;
  border-color: var(--tooltip-bg-color);
}
.tooltip[data-theme=dark] {
  --tooltip-bg-color: #353b44;
  --tooltip-text-color: #ffffff;
}
.tooltip[data-theme=dark] .tooltip__txt--danger {
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.tooltip[data-theme=dark]::after {
  border-bottom-color: var(--tooltip-bg-color);
}
.tooltip[data-theme=pink] {
  --tooltip-bg-color: #fff0f1;
  --tooltip-text-color: var(--color-fg-accent-red-solid-800, #ae060d);
}
.tooltip[data-theme=pink]::after {
  border-bottom-color: var(--tooltip-bg-color);
}
.tooltip[data-theme=red] {
  --tooltip-bg-color: var(--color-bg-brand-solid, #fb1822);
  --tooltip-text-color: var(--color-fg-neutral-inverted, #ffffff);
}
.tooltip[data-theme=red]::after {
  border-bottom-color: var(--tooltip-bg-color);
}
.tooltip[data-theme=gray] {
  --tooltip-bg-color: var(--color-bg-neutral-weak, #f0f3f5);
  --tooltip-text-color: var(--color-bg-neutral-subtle, #4a4f57);
}
.tooltip[data-theme=gray]::after {
  border-bottom-color: var(--tooltip-bg-color);
}
.tooltip[data-theme=white] {
  --tooltip-bg-color: #ffffff;
  --tooltip-text-color: #353b44;
}
.tooltip[data-theme=white]::after {
  border-bottom-color: var(--tooltip-bg-color);
}
.tooltip[data-arrow-pos=top-center] {
  margin-top: 8px;
}
.tooltip[data-arrow-pos=top-center]::after {
  top: 0;
  left: 50%;
  transform: translate(-50%, -95%);
  width: 0;
  height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-bottom: 6px solid var(--tooltip-bg-color);
}
.tooltip[data-arrow-pos=top-left] {
  margin-top: 8px;
}
.tooltip[data-arrow-pos=top-left]::after {
  top: 0;
  left: 6px;
  transform: translate(0, -95%);
  width: 0;
  height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-bottom: 6px solid var(--tooltip-bg-color);
}
.tooltip[data-arrow-pos=top-right] {
  margin-top: 8px;
}
.tooltip[data-arrow-pos=top-right]::after {
  top: 0;
  left: 6px;
  transform: translate(0, -95%);
  width: 0;
  height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-bottom: 6px solid var(--tooltip-bg-color);
}
.tooltip[data-arrow-pos=bottom-center] {
  margin-bottom: 8px;
}
.tooltip[data-arrow-pos=bottom-center]::after {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 6px solid var(--tooltip-bg-color);
}
.tooltip[data-arrow-pos=bottom-left] {
  margin-bottom: 8px;
}
.tooltip[data-arrow-pos=bottom-left]::after {
  top: 100%;
  left: 6px;
  transform: translate(0, 0);
  width: 0;
  height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 6px solid var(--tooltip-bg-color);
}
.tooltip[data-arrow-pos=bottom-right] {
  margin-bottom: 8px;
}
.tooltip[data-arrow-pos=bottom-right]::after {
  top: 100%;
  right: 6px;
  transform: translate(0, 0);
  width: 0;
  height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 6px solid var(--tooltip-bg-color);
}
.tooltip[data-arrow-pos=right]::after {
  top: 50%;
  right: 0;
  transform: translate(100%, -50%);
  width: 0;
  height: 0;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-left: 6px solid var(--tooltip-bg-color);
}

/*-----------------------------*/
/*    Bottom Button    */
/*-----------------------------*/
.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 24px 24px 20px;
  z-index: 9999;
  background: linear-gradient(to top, var(--color-fg-neutral-inverted, #ffffff), var(--color-fg-neutral-inverted, #ffffff) 80%, rgba(255, 255, 255, 0));
  padding-bottom: calc(20px + var(--safe-bottom, 0px));
}
.bottom-button.fill-bottom::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  background-color: #ffffff;
}
@media screen and (max-width: 480px) {
  .bottom-button {
    padding: 24px 20px 20px;
    padding-bottom: calc(20px + var(--safe-bottom, 0px));
  }
}
.bottom-button__box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bottom-button__support {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.bottom-button__support .btn-txt[data-type=underline] {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: center;
  position: relative;
}
.bottom-button__support .btn-txt[data-type=underline]::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.bottom-button__support .btn-txt[data-type=underline]::after {
  display: none;
}
.bottom-button > * {
  flex: 1;
}
.bottom-button:not([data-content-padding=false]) .banner + .bottom-button__box {
  margin-top: 16px;
}
.bottom-button:has(.bottom-button__inner-cont) {
  padding-top: 12px;
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  background-color: var(--color-fg-neutral-inverted, #ffffff);
}
.bottom-button:has(.bottom-button__inner-cont) .bottom-button__inner-cont {
  text-align: center;
  margin-bottom: 12px;
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.bottom-button:has(.bottom-button__inner-cont) .bottom-button__inner-cont .color-accent {
  color: var(--color-fg-accent-red-solid-800, #ae060d);
}
.bottom-button[data-type=like] .bottom-button__like {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  width: 50px;
  flex: none;
  flex-shrink: 0;
}
.bottom-button[data-type=like] .bottom-button__like.active-like .bottom-button__like--icon--dislike {
  display: none;
}
.bottom-button[data-type=like] .bottom-button__like.active-like .bottom-button__like--icon--like {
  display: block;
}
.bottom-button[data-type=like] .bottom-button__like.active-like .bottom-button__like--txt {
  color: var(--color-fg-neutral-solid, #222832);
}
.bottom-button[data-type=like] .bottom-button__like--icon {
  width: 24px;
  height: 24px;
}
.bottom-button[data-type=like] .bottom-button__like--icon svg {
  width: 100%;
  height: 100%;
}
.bottom-button[data-type=like] .bottom-button__like--icon--like {
  display: none;
}
.bottom-button[data-type=like] .bottom-button__like--icon--like svg {
  color: var(--color-fg-brand-solid, #fb1822);
}
.bottom-button[data-type=like] .bottom-button__like--icon--dislike {
  display: block;
}
.bottom-button[data-type=like] .bottom-button__like--icon--dislike svg {
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.bottom-button[data-type=like] .bottom-button__like--txt {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  word-break: break-all;
  text-align: center;
  color: var(--color-fg-neutral-weak, #b2b6ba);
}
.bottom-button[data-type=keyboard].keyboard-open {
  padding: 0;
  background: none;
}
.bottom-button[data-type=keyboard].keyboard-open .btn {
  border-radius: 0;
}
.bottom-button[data-type=keyboard-floating] {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
}
.bottom-button[data-type=keyboard-floating].keyboard-floating--visible {
  display: block;
}
.bottom-button[data-type=keyboard-floating] .btn {
  border-radius: 0;
}
.bottom-button[data-type=half] .btn {
  width: calc(50% - 4px);
}
.bottom-button[data-type=half][data-ratio="1-2"] .btn:first-child {
  flex: none;
  width: calc(33.33% - 4px);
}
.bottom-button[data-type=half][data-ratio="1-2"] .btn:last-child {
  width: calc(66.66% - 4px);
}
.bottom-button[data-type=like-half] .bottom-button__like {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  width: 50px;
  flex: none;
  flex-shrink: 0;
}
.bottom-button[data-type=like-half] .bottom-button__like.active-like .bottom-button__like--icon--dislike {
  display: none;
}
.bottom-button[data-type=like-half] .bottom-button__like.active-like .bottom-button__like--icon--like {
  display: block;
}
.bottom-button[data-type=like-half] .bottom-button__like.active-like .bottom-button__like--txt {
  color: var(--color-fg-neutral-solid, #222832);
}
.bottom-button[data-type=like-half] .bottom-button__like--icon {
  width: 24px;
  height: 24px;
}
.bottom-button[data-type=like-half] .bottom-button__like--icon svg {
  width: 100%;
  height: 100%;
}
.bottom-button[data-type=like-half] .bottom-button__like--icon--like {
  display: none;
}
.bottom-button[data-type=like-half] .bottom-button__like--icon--like svg {
  color: var(--color-fg-brand-solid, #fb1822);
}
.bottom-button[data-type=like-half] .bottom-button__like--icon--dislike {
  display: block;
}
.bottom-button[data-type=like-half] .bottom-button__like--icon--dislike svg {
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.bottom-button[data-type=like-half] .bottom-button__like--txt {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.055px;
  word-break: break-all;
  text-align: center;
  color: var(--color-fg-neutral-weak, #b2b6ba);
}
.bottom-button[data-type=like-half] .bottom-button__box .btn {
  flex: 1;
}
.bottom-button[data-direct-input-button] {
  display: none;
}
.bottom-button[data-border=top] {
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  padding-top: 0;
  background-color: var(--color-fg-neutral-inverted, #ffffff);
}
.bottom-button[data-content-padding=false] {
  padding: 0;
}
.bottom-button[data-content-padding=false] .bottom-button__box {
  padding: 16px;
}
.bottom-button__summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
}

@keyframes slideUpFloating {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideDownFloating {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
@supports (bottom: env(keyboard-inset-height)) {
  .bottom-button[data-type=keyboard-floating].keyboard-floating--visible {
    bottom: env(keyboard-inset-height, 0) !important;
    transform: none !important;
  }
}
/*-----------------------------*/
/*    Terms    */
/*-----------------------------*/
.terms__title[data-size=l], .terms[data-size=l] .terms__title {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}

.terms__title[data-size=m], .terms[data-size=m] .terms__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}

.terms__title[data-size=s], .terms[data-size=s] .terms__title {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}

.terms__item[data-size=l], .terms[data-size=s] .terms__item[data-size=l], .terms[data-size=m] .terms__item[data-size=l], .terms[data-size=l] .terms__item {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}

.terms__item[data-size=m], .terms[data-size=s] .terms__item[data-size=m], .terms[data-size=m] .terms__item, .terms[data-size=l] .terms__item[data-size=m] {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}

.terms__item[data-size=s], .terms[data-size=s] .terms__item, .terms[data-size=m] .terms__item[data-size=s], .terms[data-size=l] .terms__item[data-size=s] {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-r-weight, 400);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}

.terms {
  /* size */
  /* background gray */
  /* direction */
  /* multiple */
  /* table */
}
.terms__list {
  display: flex;
  flex-direction: column;
  /* 2depth 인경우 */
}
.terms__list .terms__list {
  padding-left: 20px;
}
.terms__item {
  position: relative;
  padding-left: 20px;
  color: var(--color-fg-neutral-subtle, #5f646c);
  /* 기본 스타일 */
  /* 일부텍스트가 gray일때 사용 */
}
.terms__item:after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 0.75em;
  left: 8px;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background-color: var(--color-fg-neutral-subtle, #5f646c);
  background-image: none;
}
.terms__item[data-type=x-dot]:after {
  width: 16px;
  height: 1.5em;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  padding: 4px 2px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5046 10.5609C2.34839 10.7171 2.09526 10.7171 1.93905 10.5609C1.78284 10.4047 1.78284 10.1516 1.93905 9.99538L9.71723 2.2172C9.87344 2.06099 10.1266 2.06099 10.2828 2.2172C10.439 2.37341 10.439 2.62654 10.2828 2.78275L2.5046 10.5609Z' fill='%235F646C'/%3E%3Cpath d='M9.9954 10.5609C10.1516 10.7172 10.4047 10.7172 10.5609 10.5609C10.7172 10.4047 10.7172 10.1516 10.5609 9.9954L2.78277 2.21723C2.62656 2.06102 2.37344 2.06102 2.21723 2.21723C2.06102 2.37344 2.06102 2.62656 2.21723 2.78277L9.9954 10.5609Z' fill='%235F646C'/%3E%3Cpath d='M11 6C11 6.55228 10.5523 7 10 7C9.44771 7 9 6.55228 9 6C9 5.44772 9.44771 5 10 5C10.5523 5 11 5.44772 11 6Z' fill='%235F646C'/%3E%3Cpath d='M7 2C7 2.55228 6.55228 3 6 3C5.44772 3 5 2.55228 5 2C5 1.44772 5.44772 1 6 1C6.55228 1 7 1.44772 7 2Z' fill='%235F646C'/%3E%3Cpath d='M3 6C3 6.55228 2.55228 7 2 7C1.44772 7 1 6.55228 1 6C1 5.44772 1.44772 5 2 5C2.55228 5 3 5.44772 3 6Z' fill='%235F646C'/%3E%3Cpath d='M7 10C7 10.5523 6.55228 11 6 11C5.44772 11 5 10.5523 5 10C5 9.44771 5.44772 9 6 9C6.55228 9 7 9.44771 7 10Z' fill='%235F646C'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: center;
  background-color: transparent !important;
}
.terms__item[data-type=no-dot] {
  padding-left: 0;
}
.terms__item[data-type=no-dot]:after {
  display: none;
}
.terms__item[data-type=sub-no-dot] {
  padding-left: 20px;
}
.terms__item[data-type=sub-no-dot]:after {
  display: none;
}
.terms__item[data-type=number] {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 42px;
}
.terms__item[data-type=number].no-padding {
  padding-left: 22px;
}
.terms__item[data-type=number].no-padding .num {
  left: 0;
}
.terms__item[data-type=number] .num {
  position: absolute;
  left: 20px;
  top: 2px;
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.terms__item[data-type=number]:after {
  display: none;
}
.terms__item[data-type=sub-x-dot] {
  padding-left: 42px;
}
.terms__item[data-type=sub-x-dot]:after {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  width: 18px;
  height: 20px;
  display: flex;
  align-items: center;
  transform: translate(0, 0);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5046 10.5609C2.34839 10.7171 2.09526 10.7171 1.93905 10.5609C1.78284 10.4047 1.78284 10.1516 1.93905 9.99538L9.71723 2.2172C9.87344 2.06099 10.1266 2.06099 10.2828 2.2172C10.439 2.37341 10.439 2.62654 10.2828 2.78275L2.5046 10.5609Z' fill='%235F646C'/%3E%3Cpath d='M9.9954 10.5609C10.1516 10.7172 10.4047 10.7172 10.5609 10.5609C10.7172 10.4047 10.7172 10.1516 10.5609 9.9954L2.78277 2.21723C2.62656 2.06102 2.37344 2.06102 2.21723 2.21723C2.06102 2.37344 2.06102 2.62656 2.21723 2.78277L9.9954 10.5609Z' fill='%235F646C'/%3E%3Cpath d='M11 6C11 6.55228 10.5523 7 10 7C9.44771 7 9 6.55228 9 6C9 5.44772 9.44771 5 10 5C10.5523 5 11 5.44772 11 6Z' fill='%235F646C'/%3E%3Cpath d='M7 2C7 2.55228 6.55228 3 6 3C5.44772 3 5 2.55228 5 2C5 1.44772 5.44772 1 6 1C6.55228 1 7 1.44772 7 2Z' fill='%235F646C'/%3E%3Cpath d='M3 6C3 6.55228 2.55228 7 2 7C1.44772 7 1 6.55228 1 6C1 5.44772 1.44772 5 2 5C2.55228 5 3 5.44772 3 6Z' fill='%235F646C'/%3E%3Cpath d='M7 10C7 10.5523 6.55228 11 6 11C5.44772 11 5 10.5523 5 10C5 9.44771 5.44772 9 6 9C6.55228 9 7 9.44771 7 10Z' fill='%235F646C'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: center;
  background-color: transparent !important;
}
.terms__item.link {
  display: flex;
  gap: 8px;
}
.terms__item .gray-txt {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.terms__item .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.terms__item .bold {
  font-weight: 500;
}
.terms__item .underline {
  text-decoration: underline;
}
.terms[data-size=l] .terms__title {
  margin-bottom: 10px;
}
.terms[data-size=l] .terms__list {
  gap: 6px;
}
.terms[data-size=m] .terms__title {
  margin-bottom: 10px;
}
.terms[data-size=m] .terms__list {
  gap: 4px;
}
.terms[data-size=s] .terms__title {
  margin-bottom: 8px;
}
.terms[data-size=s] .terms__list {
  gap: 4px;
}
.terms[data-bg=gray] {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  padding: 16px;
  border-radius: 8px;
}
.terms[data-bg=gray].radius-s {
  border-radius: 8px;
}
.terms[data-direction=horizontal] {
  display: flex;
  gap: 8px;
  padding: 6px 0;
}
.terms[data-direction=horizontal] .terms__title {
  width: 94px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
  font-weight: 500;
}
.terms[data-direction=horizontal] .terms__item {
  width: calc(100% - 94px - 8px);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.terms__container {
  /* list spacing */
  /* background */
  /* none-page 에 사용될때 하단 고정 */
}
.terms__container[data-spacing=xl],
.terms__container [data-spacing=xl] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.terms__container[data-spacing=l],
.terms__container [data-spacing=l] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.terms__container[data-spacing=m],
.terms__container [data-spacing=m] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.terms__container[data-spacing=s],
.terms__container [data-spacing=s] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.terms__container[data-bg=gray] {
  padding: 24px 0 48px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.terms__container[data-bg=gray] .container {
  background: none;
}
.terms__container.no-bottom {
  padding-bottom: 0;
}
.terms__container .divider {
  padding: 16px 0;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.terms__container .divider::before {
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
  height: 1px;
  width: 100%;
}
.terms__container[data-type=none-page] {
  position: fixed;
  bottom: calc(64px + var(--safe-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 0 16px;
  max-width: 761px;
  padding: 0 24px;
}
@media screen and (max-width: 480px) {
  .terms__container[data-type=none-page] {
    padding: 0 20px;
  }
}
@media screen and (max-height: 667px) {
  .terms__container[data-type=none-page] {
    position: static;
    padding: 0;
    transform: none;
  }
}
.terms__table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0;
  overflow: hidden;
}
.terms__table table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
}
.terms__table thead tr {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.terms__table thead tr th {
  padding: 12px 8px;
  color: var(--color-fg-neutral-solid, #222832);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.terms__table tbody tr:last-child {
  border-bottom: none;
}
.terms__table tbody tr th {
  padding: 12px 8px;
  color: var(--color-fg-neutral-solid, #222832);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.terms__table tbody tr td {
  padding: 12px 8px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  text-align: left;
  vertical-align: top;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.terms__table tbody tr td:last-child {
  border-right: none;
}
.terms__table tbody tr td.no-border-bottom {
  border-bottom: none;
}
.terms__table tbody tr td .underline {
  text-decoration: underline;
}
.terms__table .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.terms__table .text-underline {
  text-decoration: underline;
}

/*  title, item 개별 사용 케이스 */
.terms__title[data-num] {
  display: flex;
  position: relative;
}
.terms__title[data-num]::before {
  content: attr(data-num) ". ";
  display: inline;
  margin-right: 4px;
}
.terms__item {
  /* weight */
}
.terms__item[data-weight=bold] {
  font-weight: 600 !important;
}

/*-----------------------------*/
/*    Info Text    */
/*-----------------------------*/
.info__text[data-size=l] {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}

.info__text[data-size=m] {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}

.info__text[data-size=s] {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-r-weight, 400);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}

.info__text[data-type=notice], .info__text[data-type=x-dot], .info__text[data-type=dot] {
  padding-left: 20px;
}

/* Element Info Text */
.info__text {
  color: var(--color-fg-neutral-subtle, #5f646c);
  word-break: keep-all;
  /* size */
  /* style */
  /* spacing */
  /* color */
  /* 회색박스 안에 이미지 */
}
.info__text[data-align=center] {
  text-align: center;
}
.info__text[data-num] {
  position: relative;
  padding-left: 25px;
}
.info__text[data-num]::before {
  content: attr(data-num) ".";
  position: absolute;
  top: 0.75em;
  transform: translateY(-50%);
  left: 0;
  width: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info__text[data-sub=true] {
  margin-left: 20px;
}
.info__text[data-type=dot] {
  position: relative;
}
.info__text[data-type=dot]::before {
  content: "";
  position: absolute;
  top: 0.75em;
  transform: translateY(-50%);
  left: 6.5px;
  width: 3px;
  height: 3px;
  background-color: var(--color-fg-neutral-subtle, #5f646c);
  border-radius: 9999px;
}
.info__text[data-type=x-dot] {
  position: relative;
}
.info__text[data-type=x-dot]:before {
  content: "";
  position: absolute;
  top: 0.75em;
  transform: translateY(-50%);
  left: 2px;
  width: 12px;
  height: 1.5em;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5046 10.5609C2.34839 10.7171 2.09526 10.7171 1.93905 10.5609C1.78284 10.4047 1.78284 10.1516 1.93905 9.99538L9.71723 2.2172C9.87344 2.06099 10.1266 2.06099 10.2828 2.2172C10.439 2.37341 10.439 2.62654 10.2828 2.78275L2.5046 10.5609Z' fill='%235F646C'/%3E%3Cpath d='M9.9954 10.5609C10.1516 10.7172 10.4047 10.7172 10.5609 10.5609C10.7172 10.4047 10.7172 10.1516 10.5609 9.9954L2.78277 2.21723C2.62656 2.06102 2.37344 2.06102 2.21723 2.21723C2.06102 2.37344 2.06102 2.62656 2.21723 2.78277L9.9954 10.5609Z' fill='%235F646C'/%3E%3Cpath d='M11 6C11 6.55228 10.5523 7 10 7C9.44771 7 9 6.55228 9 6C9 5.44772 9.44771 5 10 5C10.5523 5 11 5.44772 11 6Z' fill='%235F646C'/%3E%3Cpath d='M7 2C7 2.55228 6.55228 3 6 3C5.44772 3 5 2.55228 5 2C5 1.44772 5.44772 1 6 1C6.55228 1 7 1.44772 7 2Z' fill='%235F646C'/%3E%3Cpath d='M3 6C3 6.55228 2.55228 7 2 7C1.44772 7 1 6.55228 1 6C1 5.44772 1.44772 5 2 5C2.55228 5 3 5.44772 3 6Z' fill='%235F646C'/%3E%3Cpath d='M7 10C7 10.5523 6.55228 11 6 11C5.44772 11 5 10.5523 5 10C5 9.44771 5.44772 9 6 9C6.55228 9 7 9.44771 7 10Z' fill='%235F646C'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: center;
}
.info__text[data-type=x-dot].red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.info__text[data-type=x-dot].red-txt:before {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8.5C6.275 8.5 6.50039 8.57461 6.65039 8.72461C6.80539 8.87461 6.875 9.1 6.875 9.375C6.875 9.65 6.80039 9.87039 6.65039 10.0254C6.50039 10.1804 6.275 10.25 6 10.25C5.725 10.25 5.50461 10.1754 5.34961 10.0254C5.19461 9.87539 5.125 9.65 5.125 9.375C5.125 9.1 5.19961 8.87461 5.34961 8.72461C5.49961 8.56961 5.725 8.5 6 8.5ZM9.18164 2.18164C9.35738 2.00594 9.64263 2.00591 9.81836 2.18164C9.99408 2.35737 9.99406 2.64262 9.81836 2.81836L6.63672 6L9.81836 9.18164C9.99408 9.35737 9.99406 9.64262 9.81836 9.81836C9.64262 9.99409 9.35738 9.99409 9.18164 9.81836L6 6.63672L2.81836 9.81836C2.64262 9.99409 2.35738 9.99409 2.18164 9.81836C2.0059 9.64262 2.0059 9.35738 2.18164 9.18164L5.36328 6L2.18164 2.81836C2.0059 2.64262 2.0059 2.35738 2.18164 2.18164C2.35738 2.00594 2.64263 2.00591 2.81836 2.18164L6 5.36328L9.18164 2.18164ZM9.375 5.125C9.65 5.125 9.87539 5.19961 10.0254 5.34961C10.1804 5.49961 10.25 5.725 10.25 6C10.25 6.275 10.1754 6.49539 10.0254 6.65039C9.87539 6.80539 9.65 6.875 9.375 6.875C9.1 6.875 8.87961 6.80039 8.72461 6.65039C8.56961 6.50039 8.5 6.275 8.5 6C8.5 5.725 8.57461 5.49961 8.72461 5.34961C8.87461 5.19461 9.1 5.125 9.375 5.125ZM2.625 4.94531C2.9 4.94531 3.12539 5.01992 3.27539 5.16992C3.43028 5.31992 3.5 5.54541 3.5 5.82031C3.49994 6.09497 3.42512 6.3148 3.27539 6.46973C3.12539 6.62473 2.9 6.69531 2.625 6.69531C2.35 6.69531 2.12961 6.61973 1.97461 6.46973C1.8199 6.31978 1.75005 6.09497 1.75 5.82031C1.75 5.54541 1.82471 5.31992 1.97461 5.16992C2.12461 5.01492 2.35 4.94531 2.625 4.94531ZM6 1.75C6.275 1.75 6.50039 1.82461 6.65039 1.97461C6.80539 2.12461 6.875 2.35 6.875 2.625C6.875 2.9 6.80039 3.12039 6.65039 3.27539C6.50039 3.43039 6.275 3.5 6 3.5C5.725 3.5 5.50461 3.42539 5.34961 3.27539C5.19461 3.12539 5.125 2.9 5.125 2.625C5.125 2.35 5.19961 2.12461 5.34961 1.97461C5.49961 1.81961 5.725 1.75 6 1.75Z' fill='%23FB1822'/%3E%3C/svg%3E%0A");
}
.info__text[data-type=notice] {
  position: relative;
  color: var(--color-fg-semantic-warning, #ff333c);
}
.info__text[data-type=notice]:before {
  content: "";
  position: absolute;
  top: 0.75em;
  transform: translateY(-50%);
  left: 2px;
  width: 12px;
  height: 1.5em;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.00098 1.05078C7.5071 1.05078 8.78154 1.43486 9.6748 2.32812C10.5677 3.22137 10.9512 4.49512 10.9512 6.00098C10.9512 7.50711 10.5681 8.78154 9.6748 9.6748C8.78154 10.5681 7.5071 10.9512 6.00098 10.9512C4.49512 10.9512 3.22137 10.5677 2.32812 9.6748C1.43486 8.78154 1.05078 7.50711 1.05078 6.00098C1.05078 4.49485 1.43486 3.22139 2.32812 2.32812C3.22139 1.43486 4.49485 1.05078 6.00098 1.05078ZM6.00098 1.95117C4.63711 1.95117 3.63158 2.29811 2.96484 2.96484C2.29811 3.63157 1.95117 4.63711 1.95117 6.00098C1.95117 7.36485 2.29811 8.37135 2.96484 9.03809C3.63158 9.7045 4.63744 10.0508 6.00098 10.0508C7.36484 10.0508 8.37135 9.70481 9.03809 9.03809C9.70482 8.37135 10.0508 7.36485 10.0508 6.00098C10.0508 4.63744 9.7045 3.63158 9.03809 2.96484C8.37135 2.29811 7.36484 1.95117 6.00098 1.95117ZM6.00098 7.37598C6.2495 7.37598 6.45117 7.57764 6.45117 7.82617C6.45108 8.07462 6.24945 8.27637 6.00098 8.27637C5.75253 8.27634 5.55088 8.0746 5.55078 7.82617C5.55078 7.57766 5.75247 7.376 6.00098 7.37598ZM6.00098 3.33105C6.25098 3.33105 6.45117 3.53602 6.45117 3.79102V6.36621C6.45106 6.62111 6.25091 6.82617 6.00098 6.82617C5.75107 6.82615 5.55089 6.62109 5.55078 6.36621V3.79102C5.55078 3.53603 5.751 3.33108 6.00098 3.33105Z' fill='%23FB1822'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: center;
}
.info__text + .info__text[data-size=l] {
  margin-top: 6px;
}
.info__text + .info__text[data-size=m] {
  margin-top: 4px;
}
.info__text + .info__text[data-size=s] {
  margin-top: 4px;
}
.info__text .gray-txt {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.info__text .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.info__text .medium {
  font-weight: 500;
}
.info__text .bold {
  font-weight: 600;
}
.info__text .underline {
  text-decoration: underline;
}
.info__text a[href^="tel:"] {
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.info__text a[href^="tel:"] span {
  text-decoration: underline;
  font-weight: 700;
}
.info__text-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 7/4;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 10px;
  padding: 32px;
}

/* Unit Info Text Table */
.unit-info__text-table__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.unit-info__text-table__item[data-complete=false] .unit-info__text-table__content {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.unit-info__text-table__item[data-size=m] {
  padding: 10px 0;
  gap: 10px;
}
.unit-info__text-table__item[data-size=m] .unit-info__text-table__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.unit-info__text-table__item[data-size=m] .unit-info__text-table__content {
  gap: 10px;
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.unit-info__text-table__item[data-size=m] .unit-info__text-table__link {
  gap: 2px;
}
.unit-info__text-table__item[data-size=s] {
  padding: 6px 0;
  gap: 8px;
}
.unit-info__text-table__item[data-size=s] .unit-info__text-table__title {
  width: 80px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.unit-info__text-table__item[data-size=s] .unit-info__text-table__content {
  gap: 8px;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.unit-info__text-table__item[data-size=s] .unit-info__text-table__link {
  gap: 1px;
}
.unit-info__text-table__title {
  width: 88px;
  flex-shrink: 0;
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.unit-info__text-table__title[data-dot=true] {
  position: relative;
  display: flex;
  gap: 2px;
}
.unit-info__text-table__title[data-dot=true]::after {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--color-bg-brand-solid, #fb1822);
  border-radius: 9999px;
}
.unit-info__text-table__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-fg-neutral-solid, #222832);
}
.unit-info__text-table__text {
  margin: 0;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 2px;
}
.unit-info__text-table__text.red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.unit-info__text-table__text-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.unit-info__text-table__link {
  display: flex;
}
.unit-info__text-table__link-icon {
  width: 12px;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.unit-info__text-table__link-icon svg {
  width: 100%;
  height: auto;
}
.unit-info__text-table__link .info-icon {
  width: 16px;
  height: 16px;
}
.unit-info__text-table__link[data-type=sub] {
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.unit-info__text-table__link[data-type=sub] .unit-info__text-table__link-icon {
  flex-shrink: 0;
  width: 16px;
}

/* Unit Info Text List */
.unit-info__text-list + .unit-info__text-list {
  margin-top: 20px;
}
.unit-info__text-list + .unit-info__text-list[data-gap="4xl"] {
  margin-top: 40px;
}
.unit-info__text-list + .unit-info__text-list[data-gap=m] {
  margin-top: 16px;
}
.unit-info__text-list[data-bg=gray] {
  padding: 20px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 10px;
}
.unit-info__text-list[data-align=center] {
  text-align: center;
}
.unit-info__text-list[data-align=left] {
  text-align: left;
}
.unit-info__text-list .btn {
  margin-top: 10px;
  display: inline-flex;
}

.unit-info__text-img {
  margin: 20px 0;
}
.unit-info__text-img img {
  width: 100%;
  max-width: none;
}

.table + .unit-info__text-list {
  margin-top: 20px;
}

.unit-list__description-box {
  padding: 20px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 10px;
  text-align: left;
  margin-top: 24px;
}

/*-----------------------------*/
/*    Table    */
/*-----------------------------*/
.table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0;
  overflow: hidden;
}
.unit-info__text-list + .table {
  margin-top: 20px;
}
.table table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
}
.table thead tr {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.table thead tr th {
  padding: 12px 8px;
  color: var(--color-fg-neutral-solid, #222832);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.table tbody tr:last-child, .table tfoot tr:last-child {
  border-bottom: none;
}
.table tbody tr th, .table tfoot tr th {
  padding: 12px 8px;
  color: var(--color-fg-neutral-solid, #222832);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.table tbody tr td, .table tfoot tr td {
  padding: 12px 8px;
  color: var(--color-fg-neutral-subtle, #5f646c);
  text-align: left;
  vertical-align: top;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-r-weight, 400);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.table tbody tr td .red-txt, .table tfoot tr td .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.table tbody tr td:last-child, .table tfoot tr td:last-child {
  border-right: none;
}
.table tbody tr td.no-border-bottom, .table tfoot tr td.no-border-bottom {
  border-bottom: none;
}
.table tbody tr td .underline, .table tfoot tr td .underline {
  text-decoration: underline;
}
.table[data-scroll=true] {
  display: block;
  overflow-x: auto;
  word-wrap: break-word;
  -webkit-overflow-scrolling: touch;
}
.table[data-scroll=true] table {
  table-layout: fixed;
}

/*-----------------------------*/
/*    Modal    */
/*-----------------------------*/
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg-overlay-bk-basic, rgba(0, 0, 0, 0.4));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10000;
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
}

.modal {
  background: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 16px;
  padding: 20px;
  max-width: 318px;
  width: 100%;
  text-align: center;
  transform: scale(0.7) translateY(50px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal span[data-color=red] {
  color: var(--color-fg-brand-solid, #fb1822);
}

.modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--color-fg-brand-solid, #fb1822);
}
.modal-icon.hidden {
  display: none;
}
.modal-icon svg {
  width: 40px;
  height: 40px;
}
.modal-icon i {
  display: none;
}
.modal-icon.icon-confirm .confirm {
  display: block;
}
.modal-icon.icon-confirm .confirm svg {
  color: var(--color-fg-semantic-success, #10c177);
}
.modal-icon.icon-info .info {
  display: block;
}
.modal-icon.icon-info .info svg {
  color: var(--color-fg-semantic-info, #3d87ff);
}
.modal-icon.icon-default .default {
  display: block;
}

.modal-title {
  padding-top: 6px;
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
.modal-title + .modal-content {
  margin-top: 12px;
}
.modal-title[data-color=red] {
  color: var(--color-bg-brand-solid, #fb1822);
}
.modal-title[data-color=black] {
  color: var(--color-fg-neutral-solid, #222832);
}

.modal-text {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  margin-top: 12px;
}
.modal-text .color-red {
  color: var(--color-fg-brand-solid, #fb1822);
}

.modal-content {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  margin-top: 12px;
}
.modal-content .info__text {
  text-align: left;
}

.modal-etc {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-brand-solid, #fb1822);
  margin-top: 12px;
}

.modal-terms {
  text-align: left;
}

.modal-text-button.hidden {
  display: none;
}

#modalActions {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
#modalActions .btn {
  flex: 1;
}

/*-----------------------------*/
/*    None Page    */
/*-----------------------------*/
.none-page__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.none-page__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.none-page__icon img {
  width: 100%;
  height: 100%;
}
.none-page__icon[data-size=m] {
  width: 112px !important;
  height: 112px !important;
}
.none-page__txt-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
.none-page__txt-box .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.none-page__txt-box .tit {
  color: var(--color-fg-neutral-solid, #222832);
}
.none-page__txt-box .sub-txt {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.none-page__txt-box .desc {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.none-page__btn-box {
  display: flex;
  justify-content: center;
  width: 100%;
}
.none-page__timer-box {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
}
.none-page__timer-box svg {
  width: 24px;
  height: 24px;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.none-page[data-size=l] .none-page__container {
  gap: 24px;
  padding-top: 64px;
}
.none-page[data-size=l] .none-page__icon {
  width: 152px;
  height: 152px;
}
.none-page[data-size=l] .none-page__txt-box .tit {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.none-page[data-size=l] .none-page__txt-box .sub-txt {
  margin-top: 10px;
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.none-page[data-size=l] .none-page__txt-box .desc {
  margin-top: 16px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.none-page[data-size=l] .none-page__txt-box .desc:not(:first-of-type) {
  margin-top: 6px;
}
.none-page[data-size=m] .none-page__container {
  gap: 24px;
  padding-top: 48px;
}
.none-page[data-size=m] .none-page__icon {
  width: 112px;
  height: 112px;
}
.none-page[data-size=m] .none-page__txt-box .tit {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
.none-page[data-size=m] .none-page__txt-box .sub-txt {
  margin-top: 8px;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.none-page[data-size=m] .none-page__txt-box .desc {
  margin-top: 8px;
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-r-weight, 400);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.none-page[data-size=m] .none-page__txt-box .desc:not(:first-of-type) {
  margin-top: 4px;
}
.none-page:not([data-full=false]) {
  position: fixed;
  top: calc(50% - var(--bottom-banner-height, 0));
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}
.none-page:not([data-full=false]) .none-page__container {
  padding-left: 24px;
  padding-right: 24px;
}
@media screen and (max-width: 480px) {
  .none-page:not([data-full=false]) .none-page__container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-height: 667px) {
  .none-page:not([data-full=false]) {
    position: static;
    transform: none;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .none-page:not([data-full=false]) .none-page__container {
    padding-left: 0;
    padding-right: 0;
  }
}
.none-page[data-full=false] .none-page__container {
  padding-bottom: 48px;
}

/*-----------------------------*/
/*    Full Popup    */
/*-----------------------------*/
.full-popup {
  padding-top: 12px;
}

/*-----------------------------*/
/*    Toast    */
/*-----------------------------*/
.toast {
  position: fixed;
  z-index: 10000;
  left: 50%;
  bottom: calc(var(--bottom-navigation, 0px) + var(--bottom-toast-height, 0px) + var(--safe-bottom, 0px));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background-color: rgba(53, 59, 68, 0.8);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: all 0.3s ease-in-out;
}
.toast svg {
  width: 16px;
  height: 16px;
}
.toast.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.toast[data-size=hug-toast] {
  gap: 10px;
  justify-content: flex-start;
}
.toast[data-size=fixed-snackbar] {
  width: calc(100% - 48px);
  max-width: 713px;
  justify-content: space-between;
  gap: 12px;
}
@media screen and (max-width: 480px) {
  .toast[data-size=fixed-snackbar] {
    width: calc(100% - 40px);
  }
}
.toast__content {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.toast__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast:not([data-show-icon=true]) .toast__icon {
  display: none;
}
.toast__text {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: #ffffff;
  flex: 1;
}
.toast__link {
  display: none;
  align-items: center;
  gap: 2px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  text-decoration: none;
  flex-shrink: 0;
}
.toast[data-size=fixed-snackbar][data-link] .toast__link {
  display: flex;
}
.toast__link-text {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.toast__link-icon {
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast__link-icon svg {
  fill: var(--color-fg-neutral-inverted, #ffffff);
}
.toast--success .toast__icon svg {
  fill: var(--color-fg-accent-green-solid, #10c177);
}
.toast--warning .toast__icon svg {
  fill: var(--color-fg-accent-yellow-solid, #ffc00e);
}
.toast[data-animation=slide]:not(.active) {
  transform: translate(-50%, 100%);
}
.toast[data-animation=fade]:not(.active) {
  transform: translate(-50%, 0);
}
.toast[data-positioned-above-sheet=true] {
  transition: opacity 0.3s ease;
}
.toast[data-positioned-above-sheet=true].active {
  transform: translate(-50%, 0);
}
.toast[data-positioned-above-sheet=true][data-animation=slide]:not(.active) {
  transform: translate(-50%, 100%);
}
.toast[data-positioned-above-sheet=true][data-animation=fade]:not(.active) {
  transform: translate(-50%, 0);
}
.toast--default {
  background-color: var(--color-bg-overlay-bk-thick, rgba(0, 0, 0, 0.8));
}
.toast[data-position=spacing-l] {
  bottom: 20px !important;
}
.toast[data-position=mb-floating-btn] {
  bottom: calc(var(--content-padding-bottom, calc(64px + var(--safe-bottom, 0px))) + var(--membership-bottom-floating-default, 70px)) !important;
}
.toast[data-position=mb-floating-btn-hide] {
  bottom: calc(var(--content-padding-bottom, calc(64px + var(--safe-bottom, 0px))) + 20px) !important;
}

/*-----------------------------*/
/*    Keypad    */
/*-----------------------------*/
.keypad {
  position: relative;
  width: 100%;
  max-width: 761px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-bg-neutral-inverted, #ffffff);
}
.keypad__container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
}
.keypad__shortkeys {
  display: flex;
  gap: 8px;
  width: 100%;
}
.keypad__shortkey {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  padding: 6px 16px;
  border-radius: 50px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
.keypad__shortkey:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
  background: rgba(10, 31, 65, 0.1);
}
.keypad__shortkey-text {
  color: var(--color-fg-neutral-solid, #222832);
  white-space: nowrap;
}
.keypad__row {
  display: flex;
  gap: 10px;
  width: 100%;
}
.keypad__key {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 10px;
  transition: all 0.2s ease;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
.keypad__key:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
@media (max-width: 480px) {
  .keypad__key {
    min-height: 48px;
  }
}
.keypad__key--delete .keypad__delete-icon {
  width: 32px;
  height: 32px;
}
.keypad__key-text {
  font-weight: 500;
  font-size: 24px;
}
.keypad__delete-icon {
  width: 24px;
  height: 24px;
}
.keypad[data-theme=light] .keypad__key {
  color: var(--color-fg-neutral-solid, #222832);
}
.keypad[data-theme=light] .keypad__key:active {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.keypad[data-theme=light] .keypad__key-text {
  color: var(--color-fg-neutral-solid, #222832);
}
.keypad[data-theme=light] .keypad__delete-icon {
  color: var(--color-fg-neutral-solid, #222832);
}
.keypad[data-theme=dark] {
  background-color: var(--color-bg-neutral-solid, #222832);
}
.keypad[data-theme=dark] .keypad__key {
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.keypad[data-theme=dark] .keypad__key:active {
  background-color: var(--color-bg-neutral-subtle, #4a4f57);
}
.keypad[data-theme=dark] .keypad__key-text {
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.keypad[data-theme=dark] .keypad__delete-icon {
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.keypad[data-theme=dark] .keypad__shortkey {
  background: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
}
.keypad[data-theme=dark] .keypad__shortkey:active, .keypad[data-theme=dark] .keypad__shortkey--pressed {
  background: var(--color-bg-neutral-subtle, #4a4f57);
}
.keypad[data-theme=dark] .keypad__shortkey-text {
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.keypad[data-type=numeric-secure] {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.keypad[data-type=numeric-secure] .keypad__row:nth-child(4) .keypad__key:nth-child(1) {
  visibility: hidden;
}

/* 보안 비밀번호 입력 표시 */
.secure-number {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 16px;
}
.secure-number .num {
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
  border-radius: 9999px;
}
.secure-number .num.active {
  background-color: var(--color-bg-neutral-solid, #222832);
}

.secure-password {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100dvh - 54px - var(--keypad-secure-height, 280px));
}
.secure-password__inner {
  margin-bottom: 48px;
}
.secure-password__title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  text-align: center;
}
.secure-password__title {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.secure-password__desc {
  color: var(--color-fg-semantic-warning, #ff333c);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.secure-password[data-error=true] .num {
  background-color: var(--color-bg-danger-danger, #ff333c);
}
.secure-password__info {
  position: absolute;
  left: 0;
  bottom: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.secure-password__info-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}

/* 모웹에서 보안 키패드 라이브러리 위치조정 */
@media screen and (min-width: 481px) {
  #mw #ownKeypad {
    left: 50%;
    transform: translateX(-50%);
    max-width: 360px !important;
    max-height: 258px !important;
  }
  #mw #ownKeypad, #mw .kpdWrap {
    max-width: 360px !important;
    max-height: 258px !important;
  }
}

/*-----------------------------*/
/*    Element List Text    */
/*-----------------------------*/
.element-list-text__wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.element-list-text__wrap[data-gap="2xs"] {
  gap: 8px;
}
.element-list-text__wrap[data-gap="3xs"] {
  gap: 6px;
}

.element-list-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.element-list-text__title--text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.element-list-text__title--text, .element-list-text__text {
  color: var(--color-fg-neutral-solid, #222832);
}
.element-list-text__title--text[data-color=red], .element-list-text__text[data-color=red] {
  color: var(--color-fg-brand-solid, #fb1822);
  font-weight: 600 !important;
}
.element-list-text__title--text[data-color=gray], .element-list-text__text[data-color=gray] {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.element-list-text__title--text[data-color=gray-weak], .element-list-text__text[data-color=gray-weak] {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.element-list-text__title--text[data-weight=semibold], .element-list-text__text[data-weight=semibold] {
  font-weight: 500 !important;
}
.element-list-text__title--text[data-weight=normal], .element-list-text__text[data-weight=normal] {
  font-weight: 400 !important;
}
.element-list-text__title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.element-list-text__icon--title {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
}
.element-list-text[data-size=l] .element-list-text__title {
  flex: 1;
  min-width: 0;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.element-list-text[data-size=l] .element-list-text__text {
  flex-shrink: 0;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.element-list-text[data-size=s] .element-list-text__title {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.element-list-text[data-size=s] .element-list-text__title-text {
  width: 100%;
}
.element-list-text[data-size=s] .element-list-text__text {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  text-align: right;
}
.element-list-text[data-weight=bold] .element-list-text__title {
  font-weight: 600;
}
.element-list-text[data-icon=true] .element-list-text__title {
  width: calc(100% - 16px - 8px);
}
.element-list-text[data-icon=true] .element-list-text__icon {
  display: block;
  width: 16px;
  height: 16px;
  color: var(--color-icon-neutral-subtle, #898d93);
  position: relative;
}
.element-list-text[data-icon=true] .element-list-text__icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.element-list-text[data-icon=true] .element-list-text__icon svg {
  width: 100%;
  height: 100%;
}
.element-list-text[data-button=true] button {
  display: inline-flex;
}
.element-list-text[data-align=start] {
  align-items: flex-start;
}
.element-list-text[data-align=start] .element-list-text__title {
  align-items: flex-start;
  flex-shrink: 0;
  min-width: auto;
}
.element-list-text[data-align=start] .element-list-text__text {
  text-align: right;
  flex-shrink: unset;
  min-width: auto;
}
.element-list-text__text[data-hidden=false] {
  text-align: right;
  overflow: visible;
  text-overflow: unset;
  -webkit-line-clamp: none;
}
.element-list-text__text[data-type=cancel] {
  text-decoration: line-through;
}

/*-----------------------------*/
/*    Element Section Message    */
/*-----------------------------*/
.element-section__message {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-bg-warning-warning, #fff0f1);
  padding: 10px 16px;
  border-radius: 10px;
}
.element-section__message-icon {
  width: 16px;
}
.element-section__message-text {
  color: var(--color-fg-brand-solid, #fb1822);
  flex: 1;
  word-break: keep-all;
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.element-section__message[data-type=info] {
  background-color: var(--color-bg-accent-blue-weak, #eef6ff);
}
.element-section__message[data-type=info] .element-section__message-text {
  color: var(--color-fg-semantic-info, #3d87ff);
}

/*-----------------------------*/
/*    Info Popup    */
/*-----------------------------*/
.info-popup__wrapper {
  position: relative;
  overflow: visible;
}

.info-popup {
  position: absolute;
  top: calc(100% + 6px);
  width: 50vw;
  max-width: 338px;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.info-popup[data-state=visible] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.info-popup[data-position=top] {
  top: auto;
}
.info-popup[data-left=true] {
  left: 0 !important;
}
.info-popup__container {
  position: relative;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border: 1px solid var(--color-border-neutral-solid, #222832);
  border-radius: 6px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
}
.info-popup__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  word-break: keep-all;
  padding-right: 10px;
}
.info-popup__title {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.info-popup__description {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-r-weight, 400);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
  line-height: 1.4;
}
.info-popup__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  background: none;
  border: none;
  color: var(--color-icon-neutral-muted, #b2b6ba);
  flex-shrink: 0;
  position: absolute;
}
.info-popup__close::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.info-popup__close svg {
  width: 100%;
  height: 100%;
}
.info-popup__icon {
  color: var(--color-icon-neutral-muted, #b2b6ba);
  width: 16px;
  height: 16px;
}
.info-popup__icon svg {
  width: 100%;
  height: 100%;
}
.info-popup__list {
  display: flex;
  gap: 4px;
  flex-direction: column;
  margin: 0;
  padding-left: 16px;
}
.info-popup__item {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-r-weight, 400);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
  line-height: 1.4;
  color: var(--color-fg-neutral-subtle, #5f646c);
  list-style: disc outside;
}

.info-popup__icon, .info-icon {
  position: relative;
  position: relative;
}
.info-popup__icon::before, .info-icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}

/*-----------------------------*/
/*    Toggle    */
/*-----------------------------*/
.toggle-switch {
  position: relative;
}
.toggle-switch .toggle-input {
  display: none;
}
.toggle-switch .toggle-label {
  display: block;
  overflow: visible;
  position: relative;
  width: 44px;
  height: 24px;
  background-color: var(--color-fg-brand-solid, #fb1822);
  cursor: pointer;
  border-radius: 12px;
  position: relative;
}
.toggle-switch .toggle-label::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.toggle-switch .toggle-slider {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 2px;
  width: 44px;
  height: 24px;
  transition: transform 0.3s ease;
}
.toggle-switch .toggle-point {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px;
  padding-left: 0;
  position: relative;
  z-index: 1;
  width: 22px;
  height: 24px;
}
.toggle-switch .toggle-icon {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  width: 20px;
  height: 20px;
  background: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 100%;
}
.toggle-switch .toggle-input:checked + .toggle-label .toggle-slider {
  transform: translateX(20px);
}
.toggle-switch .toggle-input:not(:checked) + .toggle-label {
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}

/*-----------------------------*/
/*    Unit Partner    */
/*-----------------------------*/
.unit-partner-grid-wrapper {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(var(--data-column), 1fr);
}

.unit-partner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background-color: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
  border: none;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}
.unit-partner:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.unit-partner__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.unit-partner__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}
.unit-partner__title {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  text-align: center;
}
.unit-partner__title span {
  display: block;
  overflow-wrap: anywhere;
}
.unit-partner__action {
  width: 100%;
  padding-top: 4px;
}
.unit-partner__btn-text {
  display: block;
  width: 100%;
  padding: 7px 12px;
  border-radius: 8px;
  background-color: rgba(10, 31, 65, 0.05);
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  text-align: center;
}
.unit-partner:active .unit-partner__btn-text {
  background-color: rgba(10, 31, 65, 0.1);
}
.unit-partner[data-bg=white] {
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border: 1px solid var(--color-border-neutral-weak, #f0f3f5);
}
.unit-partner[data-type=icon] .unit-partner__thumb .element__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
}
.unit-partner[data-type=icon] .unit-partner__thumb .element__thumb img {
  position: relative;
  width: 28px;
  height: 28px;
}
.unit-partner[data-type=more] {
  justify-content: center;
}
.unit-partner[data-type=more] .unit-partner__title {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}

/*-----------------------------*/
/*    Accordion    */
/*-----------------------------*/
.accordion-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.accordion-section[data-spacing=s] {
  gap: 12px;
}
.accordion-section[data-spacing=m] {
  gap: 16px;
}
.accordion-section[data-spacing=l] {
  gap: 20px;
}

.accordion {
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
}
.accordion[data-color=gray] {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border: none;
}
.accordion[data-border=none] {
  border: none;
}
.accordion[data-border=none] .accordion__body {
  border-top: none;
}
.accordion__header {
  position: relative;
}
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  gap: 8px;
}
.accordion__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  flex: 1;
}
.accordion__rightTxt {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.accordion__rightTxt.color-red,
.accordion__rightTxt .color-red {
  color: var(--color-fg-brand-solid, #fb1822);
}
.accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  transition: transform 0.3s ease;
  position: relative;
}
.accordion__icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.accordion__icon-title {
  width: 20px;
  height: 20px;
}
.accordion__content {
  overflow: hidden;
  height: 0;
}
.accordion__content[data-state=expanded] {
  height: auto;
}
.accordion__content[data-state=collapsed] {
  height: 0;
}
.accordion__body {
  border-top: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
  padding: 12px 16px;
}
.accordion__body img {
  width: 100%;
}
.accordion__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.accordion__info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.accordion[data-state=expanded] .accordion__icon {
  transform: rotate(180deg);
}
.accordion[data-state=collapsed] .accordion__icon {
  transform: rotate(0deg);
}
.accordion[data-accordion-type=title] {
  border: 0;
}
.accordion[data-accordion-type=title] .accordion__trigger {
  padding: 0;
}
.accordion[data-accordion-type=title] .accordion__body {
  border: 0;
  padding: 0;
}
.accordion[data-accordion-type=title] .accordion__icon {
  width: 20px;
  height: 20px;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.accordion[data-accordion-type=title][data-disabled=true] {
  pointer-events: none;
}
.accordion[data-accordion-type=title][data-disabled=true] .accordion__trigger {
  cursor: not-allowed;
}
.accordion[data-accordion-type=title][data-disabled=true] .accordion__trigger .title-component .title-component__title {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.accordion[data-accordion-type=title][data-disabled=true] .accordion__trigger .title-component .title-component__title .red-txt {
  display: none;
}

/*-----------------------------*/
/*    Footer    */
/*-----------------------------*/
.common-footer__container {
  background-color: var(--color-fg-neutral-inverted, #ffffff);
  max-width: 761px;
  margin: 0 auto;
}
.common-footer__container[data-type=accordion] {
  margin: 0 auto;
  max-width: 761px;
}
.common-footer__container[data-type=accordion] .accordion {
  border: 0;
  background: none;
  border-radius: 0;
}
.common-footer__container[data-type=accordion] .accordion__trigger {
  padding: 0;
}
.common-footer__container[data-type=accordion] .accordion__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.common-footer__container[data-type=accordion] .accordion__body {
  border-top: 0;
  padding: 0;
  padding-top: 10px;
}
.common-footer__container img {
  max-width: none;
  width: 100%;
}
.common-footer__wrapper {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  padding: 24px 24px 0;
}
@media screen and (max-width: 480px) {
  .common-footer__wrapper {
    padding: 24px 20px 0;
  }
}
.common-footer__gray-box {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 10px;
  padding: 16px;
}
.common-footer__button-box {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/*-----------------------------*/
/*    Quick Button Card    */
/*-----------------------------*/
.quick-button__card__content {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.quick-button__card__item {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 12px 16px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 12px;
}
.quick-button__card__tit-box {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.quick-button__card__tit {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.quick-button__card__icon {
  width: 20px;
  height: 20px;
}
.quick-button__card__txt {
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}

/*-----------------------------*/
/*    Element List Info    */
/*-----------------------------*/
.element-info-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.element-info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.element-info-item[data-state=completed] .element-info-item__placeholder {
  color: var(--color-fg-neutral-solid, #222832);
}
.element-info-item__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.element-info-item__label {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.element-info-item__placeholder {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  max-width: 266px;
  color: var(--color-fg-neutral-disabled, #c8cccf);
}
.element-info-item__button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  gap: 8px;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  padding: 0;
  position: relative;
}
.element-info-item__button::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.element-info-item__button .arrow-wrap {
  width: 16px;
  height: 16px;
}
.element-info-item__button .label {
  display: none;
}
.element-info-item__button .label.show {
  display: block;
}
.element-info-item__button svg {
  width: 16px;
  height: 16px;
  color: inherit;
}

/*-----------------------------*/
/*    Element List Select    */
/*-----------------------------*/
.element-list-select {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.element-list-select__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.element-list-select__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.element-list-select__description {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.element-list-select__desc-item {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-r-weight, 400);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}

/*-----------------------------*/
/*    Charge Page    */
/*-----------------------------*/
/* 충전 페이지 스타일 */
.charge-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 16px;
}
.charge-page__icon {
  width: 112px;
  height: 112px;
  margin: 0 auto;
}
.charge-page__icon svg {
  width: 100%;
  height: 100%;
}
.charge-page__amount {
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
  color: var(--color-fg-brand-solid, #fb1822);
  margin-top: 24px;
  text-align: center;
}
.charge-page__text {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  margin-top: 4px;
  text-align: center;
}
.charge-page__text[data-color=gray] {
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.charge-page__desc {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
  margin-top: 8px;
  text-align: center;
}
.charge-page__contents {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 32px;
}
.charge-page__completed {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  padding: 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.charge-page__completed-icon {
  width: 56px;
  height: 56px;
}
.charge-page__completed-icon img {
  width: 100%;
  height: 100%;
}
.charge-page__completed-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.charge-page__completed-text p {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.charge-page__completed-text .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.charge-page .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.charge-page[data-type=end] .charge-page__title {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
  margin-top: 24px;
  text-align: center;
}

/*-----------------------------*/
/*    Cm page    */
/*-----------------------------*/
.cm-page {
  /* full */
  /* complete */
  /* point */
  /* 가운데 정렬 */
  /*로딩 유형별 크키 스타일*/
}
.cm-page .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.cm-page .black-txt {
  color: var(--color-fg-neutral-solid, #222832);
}
.cm-page .gray-txt {
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.cm-page .unit-list__description-box {
  margin-top: 0;
}
.cm-page__main .banner-txt-box__inner {
  text-align: left !important;
}
.cm-page[data-type=full] {
  padding: 16px 0 48px;
}
.cm-page[data-type=full] .cm-page__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  text-align: center;
  flex: 1;
}
.cm-page[data-type=full] .cm-page__icon {
  width: 112px;
  height: 112px;
  margin: 0 auto;
}
.cm-page[data-type=full] .cm-page__icon svg, .cm-page[data-type=full] .cm-page__icon img {
  width: 100%;
  height: 100%;
}
.cm-page[data-type=full] .cm-page__txt-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cm-page[data-type=full] .cm-page__tit {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.cm-page[data-type=full] .cm-page__sub-tit {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1--m-weight, 500);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
.cm-page[data-type=full] .cm-page__txt {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.cm-page[data-type=full] .cm-page__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 16px;
}
.cm-page[data-type=full] .cm-page__bottom-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}
.cm-page[data-type=full] .cm-page__bottom + .cm-page__button {
  margin-top: 24px;
}
.cm-page[data-type=full] .cm-page__timer-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
}
.cm-page[data-type=full] .cm-page__timer-box svg {
  width: 24px;
  height: 24px;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.cm-page[data-type=full] .cm-page__button {
  display: flex;
  justify-content: center;
}
.cm-page[data-type=complete] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 16px;
}
.cm-page[data-type=complete] .cm-page__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  text-align: center;
  flex: 1;
}
.cm-page[data-type=complete] .cm-page__icon {
  width: 112px;
  height: 112px;
  margin: 0 auto;
}
.cm-page[data-type=complete] .cm-page__icon svg, .cm-page[data-type=complete] .cm-page__icon img {
  width: 100%;
  height: 100%;
}
.cm-page[data-type=complete] .cm-page__txt-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-page[data-type=complete] .cm-page__point {
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
  color: var(--color-fg-brand-solid, #fb1822);
}
.cm-page[data-type=complete] .cm-page__tit {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.cm-page[data-type=complete] .cm-page__sub-tit {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.cm-page[data-type=complete] .cm-page__txt {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.cm-page[data-type=complete] .cm-page__order {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.cm-page[data-type=complete] .cm-page__order .tit {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.cm-page[data-type=complete] .cm-page__order .txt {
  position: relative;
  padding-left: 6px;
  margin-left: 6px;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.cm-page[data-type=complete] .cm-page__order .txt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.cm-page[data-type=complete] .cm-page__bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 32px;
}
.cm-page[data-type=complete] .cm-page__charge {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  padding: 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.cm-page[data-type=complete] .cm-page__charge-icon {
  width: 56px;
  height: 56px;
}
.cm-page[data-type=complete] .cm-page__charge-icon img {
  width: 100%;
  height: 100%;
}
.cm-page[data-type=complete] .cm-page__charge-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.cm-page[data-type=complete] .cm-page__charge-text p {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.cm-page[data-type=complete] .cm-page__charge-text .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.cm-page[data-type=point] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 16px;
  padding-bottom: 48px;
}
.cm-page[data-type=point] .cm-page__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  text-align: center;
  flex: 1;
}
.cm-page[data-type=point] .cm-page__icon {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto;
}
.cm-page[data-type=point] .cm-page__icon[data-size=l] {
  width: 152px;
  height: 152px;
}
.cm-page[data-type=point] .cm-page__icon[data-size=l] canvas {
  padding: 0;
}
.cm-page[data-type=point] .cm-page__icon svg, .cm-page[data-type=point] .cm-page__icon img {
  width: 100%;
  height: 100%;
}
.cm-page[data-type=point] .cm-page__icon canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}
.cm-page[data-type=point] .cm-page__txt-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-page[data-type=point] .cm-page__point {
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
  color: var(--color-fg-brand-solid, #fb1822);
}
.cm-page[data-type=point] .cm-page__tit {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.cm-page[data-type=point] .cm-page__sub-tit {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.cm-page[data-type=point] .cm-page__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 32px;
}
.cm-page[data-type=point] .bottom-button .btn {
  position: relative;
}
.cm-page[data-type=point] .bottom-button .btn .tooltip {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cm-page[data-full=true] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}
.cm-page[data-full=true] .cm-page__container {
  padding-left: 24px;
  padding-right: 24px;
}
@media screen and (max-width: 480px) {
  .cm-page[data-full=true] .cm-page__container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-height: 667px) {
  .cm-page[data-full=true] {
    position: static;
    transform: none;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .cm-page[data-full=true] .cm-page__container {
    padding-left: 0;
    padding-right: 0;
  }
}
.cm-page canvas#loading-lottie {
  width: 112px;
  height: 112px;
  max-width: inherit;
  object-fit: cover;
  top: 50%;
  left: 50%;
  position: relative;
  transform: translate(-50%, -50%);
}

/*로딩 페이지*/
.full-content:has(.cm-page.loading-box[data-full=true]) {
  height: 100vh;
  height: 100dvh;
}
.full-content:has(.cm-page.loading-box[data-full=true]) .container {
  display: flex;
  align-items: center;
  height: 100%;
}
.full-content:has(.cm-page.loading-box[data-full=true]) .cm-page {
  padding: 0;
}

/*-----------------------------*/
/*    Floating Button    */
/*-----------------------------*/
.floating-buttons {
  position: fixed;
  bottom: calc(var(--floating-button-bottom, 0px) + 12px);
  right: 10px;
  gap: 6px;
  z-index: 100;
  pointer-events: none;
}
@media screen and (min-width: 761px) {
  .floating-buttons {
    left: calc(50% + 380px - 40px - 10px);
    right: auto;
  }
}
.floating-buttons .hidden {
  display: none !important;
}
.floating-buttons .floating-buttons-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 761px;
  margin: 0 auto;
}
.floating-buttons .floating-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  border-radius: 9999px;
  padding: 10px;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
  pointer-events: all;
}
.floating-buttons .floating-btn.img-wrap {
  position: relative;
  padding: 0;
}
.floating-buttons .floating-btn.img-wrap .floating-icon {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  overflow: hidden;
}
.floating-buttons .floating-btn.img-wrap .floating-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.floating-buttons .floating-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-icon-neutral-solid, #222832);
}
.floating-buttons .floating-icon svg, .floating-buttons .floating-icon img {
  width: 100%;
  height: 100%;
}

/*-----------------------------*/
/*    Floating Point Button    */
/*-----------------------------*/
.point-reward-banner__container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0 auto;
  z-index: 9999;
  pointer-events: none;
  /*쇼핑상세*/
  /*매일적립*/
}
.point-reward-banner__container .hidden {
  display: none;
}
.point-reward-banner__container[data-type=bottom-button] .point-reward-banner {
  bottom: calc(10px + 64px + var(--safe-bottom, 0px));
}
.point-reward-banner__container[data-type=bottom] .point-reward-banner {
  bottom: 0;
}

/*기본 - 혜택 */
.point-reward-banner {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--content-padding-bottom, calc(64px + var(--safe-bottom, 0px)));
  padding: 0 20px 10px;
  margin: 0 auto;
  width: 100%;
  max-width: 760px;
  z-index: 9999;
}
.point-reward-banner.container {
  background: transparent;
}
.point-reward-banner[data-state=scroll-paused], .point-reward-banner[data-state=scroll-fast] {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 20%);
}
.point-reward-banner[data-state=scroll-paused] .point-reward-banner__info-text, .point-reward-banner[data-state=scroll-fast] .point-reward-banner__info-text {
  display: block;
}
.point-reward-banner[data-state=point-granted] .point-reward-banner__content-inner {
  border-radius: 10px;
}
.point-reward-banner[data-state=point-granted] .point-reward-banner__content-inner::after {
  width: 100% !important;
  display: none;
}
.point-reward-banner__inner {
  margin: 0 auto;
  width: 100%;
}
.point-reward-banner__inner.hidden {
  display: none;
}
.point-reward-banner__info-text {
  display: none;
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
  padding-top: 24px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.point-reward-banner__text {
  z-index: 2;
}
.point-reward-banner__content {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  color: var(--color-bg-neutral-inverted, #ffffff);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.point-reward-banner__content-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--color-bg-neutral-subtle, #4a4f57);
}
.point-reward-banner__content-inner:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: var(--floating-point-progress, 0%);
  height: 100%;
  background: var(--color-bg-neutral-solid, #222832);
  z-index: 1;
  transition: 0.5s ease-in-out;
}
.point-reward-banner__content svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  z-index: 2;
}

/*-----------------------------*/
/*    Unit Toggle    */
/*-----------------------------*/
.unit-toggle {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 16px;
  justify-content: space-between;
}
.unit-toggle__text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-right: 12px;
}
.unit-toggle__title {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.unit-toggle__description {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-r-weight, 400);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}

/*-----------------------------*/
/*    E Coupon    */
/*-----------------------------*/
.e-coupon-flex-column, .e-coupon__content__barcode__wrap[data-type=code-copy] .e-coupon__content__barcode, .e-coupon__content__barcode__wrap[data-type=code-copy] .e-coupon__content__code, .e-coupon__content__barcode__wrap, .e-coupon__content__availables, .e-coupon__content__detail-wrap, .e-coupon__content__title, .e-coupon__content__info, .e-coupon__component {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.e-coupon__component {
  gap: 24px;
}
.e-coupon__content__thumb {
  position: relative;
  width: 104px;
  height: 104px;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
  overflow: hidden;
}
.e-coupon__content__thumb[data-state=used]::after, .e-coupon__content__thumb[data-state=expired]::after, .e-coupon__content__thumb[data-state=cancel]::after {
  content: "사용완료";
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  color: var(--color-fg-neutral-inverted, #ffffff);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg-overlay-bk-basic, rgba(0, 0, 0, 0.4));
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.e-coupon__content__thumb[data-state=expired]::after {
  content: "기간만료";
}
.e-coupon__content__thumb[data-state=cancel]:after {
  content: "취소완료";
}
.e-coupon__content__thumb[data-border=true]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' fill='none'%3E%3Cpath d='M25.0049 0.5C33.0443 0.500017 39.1916 2.53889 43.3262 6.67383C47.4607 10.809 49.5 16.958 49.5 25C49.5 33.042 47.4613 39.191 43.3262 43.3262C39.191 47.4613 33.042 49.5 25 49.5C16.9579 49.5 10.809 47.46 6.67383 43.3242C2.53874 39.1885 0.500003 33.0396 0.5 25C0.5 16.9604 2.53899 10.8115 6.67285 6.67578C10.8067 2.54012 16.953 0.500025 24.9902 0.5H25.0049Z' stroke='%23F2F4F5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 4;
}
.e-coupon__content__thumb img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
.e-coupon__content__info {
  gap: 12px;
  text-align: center;
}
.e-coupon__content__title {
  gap: 6px;
}
.e-coupon__content__title--brand {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.e-coupon__content__title--name {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.e-coupon__content__detail-wrap {
  gap: 4px;
  width: 100%;
}
.e-coupon__content__detail--tit {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.e-coupon__content__detail--date {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.e-coupon__content__summary {
  display: flex;
  gap: 6px;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.e-coupon__content__summary .summary-item:not(:last-child) {
  position: relative;
  padding-right: 6px;
}
.e-coupon__content__summary .summary-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.e-coupon__content__summary .accent {
  color: var(--color-fg-accent-red-solid-800, #ae060d);
}
.e-coupon__content__giver {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.e-coupon__content__availables {
  gap: 16px;
  width: 100%;
}
.e-coupon__content__availables > * {
  flex: 1;
  width: 100%;
}
.e-coupon__content__barcode__wrap {
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
}
.e-coupon__content__barcode__wrap[data-type=barcode-copy] .e-coupon__content__barcode__number {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.e-coupon__content__barcode__wrap[data-type=code-copy] .e-coupon__content__code {
  gap: 6px;
  width: 100%;
  text-align: center;
}
.e-coupon__content__barcode__wrap[data-type=code-copy] .e-coupon__content__barcode {
  padding: 4px 0;
  text-align: center;
  gap: 6px;
}
.e-coupon__content__barcode__wrap[data-type=code-copy] .e-coupon__content__barcode--title {
  width: 100%;
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.e-coupon__content__barcode__wrap[data-type=code-copy] .e-coupon__content__barcode--code {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.e-coupon__content__barcode__wrap[data-type=partner-pw] {
  gap: 16px;
}
.e-coupon__content__barcode__wrap[data-type=partner-pw] .e-coupon__content__barcode--title {
  width: 100%;
  text-align: left;
}
.e-coupon__content__barcode__wrap[data-type=information] {
  display: none;
}
.e-coupon__content__barcode--title {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.e-coupon__content__barcode__img {
  max-width: 350px;
  width: 100%;
  display: block;
  margin: 0 auto;
}
.e-coupon__content__barcode__number {
  max-width: 350px;
  text-align: center;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.e-coupon__content__barcode__number.flex-between {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.e-coupon__content__additional-btn {
  text-align: center;
}
.e-coupon__history__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*-----------------------------*/
/*    Quick Menu    */
/*-----------------------------*/
.main-quick-menu__list {
  display: grid;
  gap: 24px 6px;
  grid-template-columns: repeat(5, 64px);
  grid-template-rows: repeat(2, 1fr);
  padding-top: 20px;
}
.main-quick-menu__list.overcase {
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: auto;
}
.main-quick-menu__list[data-columns="4"] {
  grid-template-columns: repeat(4, 81.5px);
}
.main-quick-menu__item {
  position: relative;
}
.main-quick-menu__item .tooltip {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, -100%);
}

.horizontal-scrollbar .scrollable-content {
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.horizontal-scrollbar .scrollable-content::-webkit-scrollbar {
  display: none;
}
.horizontal-scrollbar .scroll-bar {
  position: relative;
  width: 48px;
  height: 3px;
  margin: 0 auto;
  margin-top: 16px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
  border-radius: 50px;
}
.horizontal-scrollbar .scroll-bar__box {
  position: relative;
  z-index: 1;
}
.horizontal-scrollbar .scroll-bar__tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.horizontal-scrollbar .scroll-thumb {
  height: 100%;
  background-color: var(--color-fg-neutral-solid, #222832);
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  transition: left 0.2s ease;
}

/*-----------------------------*/
/*    Coupon    */
/*-----------------------------*/
.unit-list__coupon {
  display: flex;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  width: 100%;
  align-items: center;
}
.unit-list__coupon .accent {
  color: var(--color-fg-accent-red-solid-800, #ae060d);
}
.unit-list__coupon-info {
  position: relative;
  flex: 1;
  padding: 20px;
}
.unit-list__coupon-info::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  border-right: 1px dashed var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.unit-list__coupon-info .list-component__tit {
  word-wrap: inherit;
  word-break: break-all;
  width: 100%;
}
.unit-list__coupon-info .list-component__content {
  gap: 0;
}
.unit-list__coupon-info .list-component__thumb {
  flex-shrink: 0;
}
.unit-list__coupon-count {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 5px 3px 6px;
  background-color: var(--color-bg-overlay-bk-basic, rgba(0, 0, 0, 0.4));
  border-bottom-right-radius: 4px;
  color: var(--color-fg-neutral-inverted, #ffffff);
  font-size: var(--font-caption-4-size, 0.6875rem);
  font-weight: var(--font-caption-4-sb-weight, 600);
  line-height: var(--font-caption-4-line-height, 1.4);
  letter-spacing: var(--font-caption-4-letter-spacing, -0.005em);
  z-index: 1;
}
.unit-list__coupon[data-border=true]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.unit-list__coupon[data-state=special] {
  position: relative;
  z-index: 0;
  border-color: transparent;
}
.unit-list__coupon[data-state=special]::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 동일 */
  border-radius: inherit; /* 부모와 동일한 radius */
  padding: 1.25px; /* border 두께 (여기 조절) */
  background: var(--color-gradient-special, linear-gradient(114deg, #C75BDC 0%, #FF4769 50%, #FB1822 100%));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1; /* 박스 뒤로 보내기 */
}
.unit-list__coupon[data-state=disabled], .unit-list__coupon[data-state=expired], .unit-list__coupon[data-state=exhausted] {
  background-color: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
}
.unit-list__coupon[data-state=disabled] .list-component__desc span::before, .unit-list__coupon[data-state=expired] .list-component__desc span::before, .unit-list__coupon[data-state=exhausted] .list-component__desc span::before {
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.unit-list__coupon[data-state=disabled] .list-component__thumb::before, .unit-list__coupon[data-state=expired] .list-component__thumb::before, .unit-list__coupon[data-state=exhausted] .list-component__thumb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-overlay-bk-thin, rgba(0, 0, 0, 0.2));
  z-index: 9;
}
.unit-list__coupon[data-state=disabled] .element-coupon__button, .unit-list__coupon[data-state=expired] .element-coupon__button, .unit-list__coupon[data-state=exhausted] .element-coupon__button {
  color: var(--color-fg-neutral-muted, #6A6F77);
}

.element-coupon__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  width: 84px;
  flex-shrink: 0;
}
.element-coupon__button-icon {
  width: 20px;
  height: 20px;
}
.element-coupon__button-icon svg {
  width: 100%;
  height: 100%;
}
.element-coupon__button-text {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}

/*-----------------------------*/
/*    Quick Menu Badge    */
/*-----------------------------*/
.quick-menu-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 8px;
  background-color: var(--color-gray-900);
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.quick-menu-badge svg {
  width: 20px;
  height: 20px;
}
.quick-menu-badge__wrap .swiper-slide {
  width: fit-content;
}

/*-----------------------------*/
/*    Donation Banner    */
/*-----------------------------*/
.donation-banner {
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  overflow: hidden;
}
.donation-banner__img {
  width: 100%;
}
.donation-banner__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.donation-banner__thumb {
  position: relative;
  width: 100%;
}
.donation-banner__thumb .donation-banner__badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
}
.donation-banner__badge {
  font-size: 12px;
  white-space: nowrap;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.06px;
}
.donation-banner__body {
  padding: 20px 20px 24px;
}
.donation-banner__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.donation-banner__amount-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.donation-banner__amount {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.donation-banner__status {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.donation-banner__date {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-r-weight, 400);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
  color: #6A6F77;
}
.donation-banner__title {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1--m-weight, 500);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.donation-banner__underway-desc {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-fg-accent-purple-solid-600, #7430f7);
  margin-top: 8px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.donation-banner__underway-desc > * {
  display: flex;
  gap: 2px;
  align-items: center;
}
.donation-banner__underway-desc > * i img {
  width: 20px;
  height: 20px;
}
.donation-banner__desc {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: #04784D;
  margin-top: 8px;
}
.donation-banner[data-status=progress] .donation-banner__badge, .donation-banner:not([data-status]) .donation-banner__badge {
  background-color: var(--color-bg-brand-solid, #fb1822);
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.donation-banner[data-status=progress] .donation-banner__amount, .donation-banner:not([data-status]) .donation-banner__amount {
  color: var(--color-bg-brand-solid, #fb1822);
}
.donation-banner[data-status=progress] .donation-banner__status, .donation-banner:not([data-status]) .donation-banner__status {
  color: #6A6F77;
}
.donation-banner[data-status=complete] .donation-banner__badge {
  background-color: var(--color-bg-neutral-subtle, #4a4f57);
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.donation-banner[data-status=complete] .donation-banner__amount {
  color: var(--color-fg-neutral-solid, #222832);
}
.donation-banner[data-status=complete] .donation-banner__status {
  color: #6A6F77;
}

/*-----------------------------*/
/*    Numbering    */
/*-----------------------------*/
.numbering-content {
  display: flex;
  flex-direction: column;
}
.numbering-content__item {
  display: flex;
  gap: 24px;
}
.numbering-content__item .num-box {
  flex-shrink: 0;
}
.numbering-content__item .num-box .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-bg-neutral-muted, #9da1a7);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.numbering-content__item .num-box .line {
  display: flex;
  justify-content: center;
  height: calc(100% - 24px);
  padding: 8px 0;
}
.numbering-content__item .num-box .line span {
  display: block;
  width: 2px;
  height: 100%;
  background-color: var(--color-border-neutral-muted-weak, #dee1e4);
}
.numbering-content__item .con-box {
  width: calc(100% - 24px * 2);
  padding-bottom: 32px;
}
.numbering-content__item .con-box .tit {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.numbering-content__item .con-box .txt-box {
  margin-top: 4px;
}
.numbering-content__item .con-box .txt-box .txt {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.numbering-content__item .con-box .unit-list__point {
  margin-top: 16px;
}
.numbering-content__item .img-wrap {
  width: 100%;
  margin-top: 16px;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--color-bg-banner-default-gray-50, rgba(5, 55, 88, 0.06));
  aspect-ratio: 16/9;
}
.numbering-content__item .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.numbering-content__item .cont-box {
  padding: 20px;
  border-radius: 10px;
  margin-top: 16px;
}
.numbering-content__item .cont-box[data-bg=gray] {
  background-color: var(--color-bg-banner-default-gray-50, rgba(5, 55, 88, 0.06));
}
.numbering-content__item:last-child .con-box {
  padding-bottom: 0;
}
.numbering-content__item:last-child .line {
  display: none;
}
.numbering-content__item .color-black {
  color: var(--color-fg-neutral-solid, #222832);
}

/*-----------------------------*/
/*    Unit Point Content    */
/*-----------------------------*/
.unit-point-content {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.unit-point-content:first-child {
  border-top: none;
}
.unit-point-content__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.unit-point-content__title-row {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  width: 100%;
}
.unit-point-content__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.unit-point-content__title--icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.unit-point-content__title--icon svg {
  width: 100%;
  height: 100%;
}
.unit-point-content__info {
  display: flex;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.unit-point-content__info-bank {
  position: relative;
  display: inline-flex;
  margin-left: 6px;
  padding-left: 6px;
}
.unit-point-content__info-bank::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: var(--color-border-neutral-muted, #c8cccf);
}
.unit-point-content__desc {
  display: flex;
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.unit-point-content__desc-text {
  position: relative;
  display: inline-flex;
  margin-left: 6px;
  padding-left: 6px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.unit-point-content__desc-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: var(--color-border-neutral-muted, #c8cccf);
}
.unit-point-content__desc-text:first-child {
  margin-left: 0;
  padding-left: 0;
}
.unit-point-content__desc-text:first-child::before {
  display: none;
}
.unit-point-content__desc-text.error {
  color: var(--color-fg-semantic-warning, #ff333c);
}
.unit-point-content__desc-error {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  margin-left: 6px;
  padding-left: 6px;
}
.unit-point-content__desc-error::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: var(--color-border-neutral-muted, #c8cccf);
}
.unit-point-content__desc-error--icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-fg-semantic-warning, #ff333c);
}
.unit-point-content__desc-error--icon svg {
  width: 100%;
  height: 100%;
}
.unit-point-content__desc-error--text {
  color: var(--color-fg-semantic-warning, #ff333c);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.unit-point-content__label {
  width: fit-content;
}
.unit-point-content__amount {
  flex-shrink: 0;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.unit-point-content[data-state=plus] .unit-point-content__amount {
  color: var(--color-fg-brand-solid, #fb1822);
}
.unit-point-content[data-state=cancle] .unit-point-content__amount {
  color: var(--color-fg-neutral-muted, #6A6F77);
  text-decoration-line: line-through;
}

/*-----------------------------*/
/*    Lotto    */
/*-----------------------------*/
/* 롯또 공통 스타일 */
.ms-lotto__number {
  display: flex;
  gap: 2px;
}
.ms-lotto__number--item {
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.05em;
  color: var(--color-fg-neutral-inverted, #ffffff);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  mask-image: url("data:image/svg+xml,%3Csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.83301 15.9997C3.83301 24.4113 8.08802 28.6663 16.4997 28.6663C24.9113 28.6663 29.1663 24.399 29.1663 15.9997C29.1663 7.60032 24.899 3.33301 16.4997 3.33301C8.10032 3.33301 3.83301 7.60032 3.83301 15.9997Z' fill='%2310C177'/%3E%3C/svg%3E%0A");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.83301 15.9997C3.83301 24.4113 8.08802 28.6663 16.4997 28.6663C24.9113 28.6663 29.1663 24.399 29.1663 15.9997C29.1663 7.60032 24.899 3.33301 16.4997 3.33301C8.10032 3.33301 3.83301 7.60032 3.83301 15.9997Z' fill='%2310C177'/%3E%3C/svg%3E%0A");
}
.ms-lotto__number--item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: -1;
}
.ms-lotto__number--item.green::after {
  background-color: var(--color-fg-accent-green-solid, #10c177);
}
.ms-lotto__number--item.skyblue::after {
  background-color: var(--color-fg-accent-skyblue-solid, #00a3f5);
}
.ms-lotto__number--item.blue::after {
  background-color: var(--color-fg-accent-blue-solid, #3d87ff);
}
.ms-lotto__number--item.purple::after {
  background-color: var(--color-fg-accent-purple-solid, #8a5cff);
}
.ms-lotto__number--item.violet::after {
  background-color: var(--color-fg-accent-violet-solid, #c75bdc);
}
.ms-lotto__number--item.orange::after {
  background-color: var(--color-fg-accent-orange-solid, #fe7611);
}
.ms-lotto__number--item.gray::after {
  background-color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.ms-lotto__number[data-size=l] {
  gap: 0;
}
.ms-lotto__number[data-size=l] .ms-lotto__number--item {
  width: 40px;
  height: 40px;
  font-size: 14.545px;
}

.ms-lotto__complete-graphic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ms-lotto__complete-graphic img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  max-width: none;
}
.ms-lotto__complete-graphic--txt {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
}
.ms-lotto__complete-graphic--txt .tit-box {
  position: relative;
  text-align: center;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
  padding-bottom: 10px;
  border-bottom: 1.4px dashed var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.ms-lotto__complete-graphic--txt .ms-lotto__number {
  justify-content: center;
}
.ms-lotto__complete-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ms-lotto__complete-list--box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 12px;
}
.ms-lotto__complete-list--tit {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-lotto__complete-list .ms-lotto__number {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.ms-lotto__complete-list .ms-lotto__number:first-child {
  padding-top: 0;
  border-top: 0;
  margin-top: 0;
}

.mw-go-app-modal {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10000;
}
.mw-go-app-modal.active {
  opacity: 1;
  visibility: visible;
}
.mw-go-app-modal.active .modal {
  transform: scale(1) translateY(0);
}
.mw-go-app-modal__wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 12px 6px 12px;
  z-index: 10000;
}
.mw-go-app-modal__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 728px;
  margin: 0 auto;
  padding: 32px 28px;
  background: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 28px;
}
.mw-go-app-modal__box .element__thumb {
  width: 60px;
  height: 60px;
}
.mw-go-app-modal__box .btn-wrap {
  width: 100%;
  text-align: center;
}

/*-----------------------------*/
/*    공유하기 바텀시트 스타일    */
/*-----------------------------*/
.share__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 32px;
}
.share__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.share__item__tit {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}

@media screen and (max-width: 300px) {
  .share__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
/*-----------------------------*/
/*    환경설정 컴포넌트    */
/*-----------------------------*/
.unit-list__setting-container {
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 16px;
  padding: 12px 20px;
}
.unit-list__setting-container + .unit-list__setting-container {
  margin-top: 16px;
}
.unit-list__setting-title {
  color: var(--color-fg-neutral-solid, #222832);
}
.unit-list__setting-desc {
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.unit-list__setting-label {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.unit-list__setting-desc {
  margin-top: 8px;
}
.unit-list__setting-button {
  margin-top: 8px;
}
.unit-list__setting-button .btn-txt {
  padding-top: 6px;
}
.unit-list__setting-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 10px;
}
.unit-list__setting-box--text {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.unit-list__setting-box .btn {
  flex-shrink: 0;
}
.unit-list__setting[data-type=toggle] .unit-list__setting-content {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.unit-list__setting[data-type=toggle] .toggle-switch {
  flex-shrink: 0;
}
.unit-list__setting[data-type=toggle][data-size=s] {
  padding: 12px 0;
}
.unit-list__setting[data-type=toggle][data-size=m] {
  padding: 20px 0;
}
.unit-list__setting[data-type=arrow] .unit-list__setting-content {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.unit-list__setting[data-type=arrow] .unit-list__setting-arrow {
  width: 16px;
  height: 16px;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
  margin-top: 16px;
  flex-shrink: 0;
}
.unit-list__setting[data-type=arrow] .unit-list__setting-arrow svg {
  width: 100%;
  height: 100%;
}
.unit-list__setting[data-type=arrow] .unit-list__setting-arrow a {
  position: relative;
  width: 100%;
  height: 100%;
}
.unit-list__setting[data-type=arrow] .unit-list__setting-arrow a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
}
.unit-list__setting[data-type=arrow][data-size=s] .unit-list__setting-inner {
  padding: 12px 0;
}
.unit-list__setting[data-type=arrow][data-size=m] {
  padding: 20px 0;
}
.unit-list__setting[data-type=arrow][data-size=m] .unit-list__setting-arrow {
  margin-top: 4px;
}
.unit-list__setting[data-type=button] .unit-list__setting-content {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.unit-list__setting[data-type=button] .unit-list__setting-button {
  margin-top: 0;
  flex-shrink: 0;
}
.unit-list__setting[data-type=button] .unit-list__setting-label {
  margin-top: 0;
  flex-shrink: 0;
  align-items: flex-start;
}
.unit-list__setting[data-type=button][data-size=m] {
  padding: 20px 0;
}
.unit-list__setting[data-size=s] .unit-list__setting-title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.unit-list__setting[data-size=s] .unit-list__setting-desc {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-r-weight, 400);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.unit-list__setting[data-size=m] .unit-list__setting-title {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
.unit-list__setting[data-size=m] .unit-list__setting-desc {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.unit-list__setting[data-divider=true] {
  border-bottom: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}

/* 환불계좌 직접입력 - 은행,증권사 선택 */
.ms-refund-account__select-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
}
.ms-refund-account__select-item {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}
.ms-refund-account__select-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.ms-refund-account__select-text {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
  color: #6A6F77;
}
.ms-refund-account__select-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 16px;
  padding: 20px;
  gap: 12px;
}

.unit-list__icon a {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  gap: 10px;
}
.unit-list__icon-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.unit-list__icon-content img {
  width: 24px;
  height: 24px;
}
.unit-list__icon-content span {
  display: inline-block;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.unit-list__icon-arrow {
  width: 16px;
  height: 16px;
}
.unit-list__icon-arrow img {
  width: 100%;
  height: 100%;
}

.culture-detail {
  margin: 0 auto;
  max-width: 761px;
  background-color: white;
}
.culture-detail .container {
  background-color: transparent;
}
.culture-detail__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 761px;
  height: 100dvh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, #FFF 100%), linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(341deg, #F5E5F7 38.98%, #FFF7EF 73.51%);
}
.culture-detail__bg .container {
  padding: 0;
  background-color: #E1F5F5;
}
.culture-detail__bg img {
  width: 100%;
  height: 100vh;
}
.culture-detail__section:not(:last-child) {
  margin-bottom: 40px;
}
.culture-detail .banner-band {
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.culture-detail .banner-band__action .txt {
  color: var(--roulette-point-color, var(--color-fg-accent-purple-solid-600, #7430f7));
}
.culture-detail .roulette-game {
  position: relative;
  max-width: 364px;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  margin: 0 auto;
  margin-bottom: 40px;
  padding: 0 8px;
}
.culture-detail .roulette-game__item {
  position: absolute;
}
.culture-detail .roulette-game__item.arrow {
  top: -1.153%;
  left: 50%;
  transform: translate(-50%, 0);
  max-width: 40px;
  width: 10.23%;
  aspect-ratio: 40/54;
  z-index: 10;
}
.culture-detail .roulette-game__item.arrow img {
  width: 100%;
  height: 100%;
}
.culture-detail .roulette-game__item.character {
  top: 0;
  right: 0;
  width: 25.42%;
  height: auto;
  aspect-ratio: 85/127;
}
.culture-detail .roulette-game__item.character img {
  position: relative;
  top: -10%;
  right: -12.3%;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 340px) {
  .culture-detail .roulette-game__item.character img {
    right: -8.3%;
  }
}
@media screen and (max-width: 290px) {
  .culture-detail .roulette-game__item.character img {
    right: -7.3%;
  }
}
@media screen and (max-width: 250px) {
  .culture-detail .roulette-game__item.character img {
    right: -3.3%;
    top: -9%;
  }
}
.culture-detail .roulette-game__item.shadow {
  top: -2%;
  left: 2%;
  width: 98%;
  height: 109%;
}
.culture-detail .roulette-game__item.start {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19.1616%;
  height: auto;
}
.culture-detail .roulette-game__item.rank {
  display: flex;
  flex-direction: column;
  gap: min(1.53vw, 6px);
  text-align: center;
}
.culture-detail .roulette-game__item.rank p {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
  font-size: min(20px, 5.3vw);
  color: var(--roulette-point-color, var(--color-fg-accent-purple-solid-600, #7430f7));
}
.culture-detail .roulette-game__item.rank .list-component__thumb {
  max-width: 48px;
  max-height: 48px;
  width: 12.307vw;
  height: 12.307vw;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.culture-detail .roulette-game__item.rank-1 {
  top: 11.669%;
  left: 59%;
  transform: rotate(39deg);
}
.culture-detail .roulette-game__item.rank-2 {
  top: 11.669%;
  left: 23.75%;
  transform: rotate(-35deg);
}
.culture-detail .roulette-game__item.rank-3 {
  bottom: 23.9%;
  right: 12.75%;
  transform: rotate(108deg);
}
.culture-detail .roulette-game__item.rank-4 {
  bottom: 23%;
  left: 12%;
  transform: rotate(-108deg);
}
.culture-detail .roulette-game__item.rank-5 {
  bottom: 5%;
  right: 40.5%;
  transform: rotate(180deg);
}
.culture-detail .roulette-game__board {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.culture-detail .roulette-game__board img {
  width: 100%;
  height: auto;
}
.culture-detail .roulette-game__board .inner-board {
  width: 84%;
  height: auto;
  aspect-ratio: 1/1;
}
.culture-detail .roulette-game__board .inner-board .board-img {
  width: 100%;
  height: 100%;
}
.culture-detail .roulette-game__board svg {
  width: 100%;
  height: 100%;
}
.culture-detail__box {
  padding: 12px 20px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 16px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.culture-detail__winner--item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.culture-detail__winner--item .rank {
  color: var(--roulette-point-color, var(--color-fg-accent-purple-solid-600, #7430f7));
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}

/*-----------------------------*/
/*    Editor    */
/*-----------------------------*/
.editor__container {
  --size-head1: 40px;
  --size-head2: 28px;
  --size-head3: 24px;
  --size-title1: 24px;
  --size-title2: 22px;
  --size-title3: 20px;
  --size-title4: 18px;
  --size-body1: 24px;
  --size-body2: 22px;
  --size-body3: 18px;
  --size-body4: 16px;
  --size-body5: 14px;
  --size-caption1: 12px;
  --size-caption2: 11px;
  overflow-x: auto;
  overflow-y: hidden;
  /* 기존 공통 스타일 :: master.css */
  /* 폰트 굵기 */
  /* 폰트 스타일 */
  /* 기존 에디터 스타일 :: common.css */
  /* 유의사항 : 아코디언 형식1 */
}
.editor__container.container {
  padding: 0 24px;
}
@media screen and (max-width: 480px) {
  .editor__container.container {
    padding: 0 20px;
  }
}
.editor__container * {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.editor__container strong, .editor__container b {
  font-weight: 600 !important;
}
.editor__container table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
}
.editor__container thead tr {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.editor__container thead tr th {
  padding: 12px 8px;
  color: var(--color-fg-neutral-solid, #222832);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.editor__container tbody tr:last-child, .editor__container tfoot tr:last-child {
  border-bottom: none;
}
.editor__container tbody tr th, .editor__container tfoot tr th {
  padding: 12px 8px;
  color: var(--color-fg-neutral-solid, #222832);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.editor__container tbody tr td, .editor__container tfoot tr td {
  padding: 12px 8px;
  color: var(--color-fg-neutral-subtle, #5f646c);
  text-align: left;
  vertical-align: top;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-r-weight, 400);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.editor__container tbody tr td .red-txt, .editor__container tfoot tr td .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.editor__container tbody tr td:last-child, .editor__container tfoot tr td:last-child {
  border-right: none;
}
.editor__container tbody tr td.no-border-bottom, .editor__container tfoot tr td.no-border-bottom {
  border-bottom: none;
}
.editor__container tbody tr td .underline, .editor__container tfoot tr td .underline {
  text-decoration: underline;
}
.editor__container b.weight400 {
  font-weight: 400;
}
.editor__container b.weight500 {
  font-weight: 500;
}
.editor__container b.weight700 {
  font-weight: 700;
}
.editor__container .__bold400 {
  font-weight: 400;
}
.editor__container .__bold500 {
  font-weight: 500;
}
.editor__container .__bold600 {
  font-weight: 600;
}
.editor__container .__bold700 {
  font-weight: 700;
}
.editor__container .__bold800 {
  font-weight: 800;
}
.editor__container [data-bullet] {
  position: relative;
  padding-left: 16px;
}
.editor__container [data-refer] {
  position: relative;
  padding-left: 16px;
}
.editor__container [data-bullet]:before {
  position: absolute;
  left: 0;
  content: attr(data-bullet);
}
.editor__container [data-refer]:before {
  position: absolute;
  left: 0;
  content: attr(data-refer);
}
.editor__container [data-bullet]:nth-child(n+2), .editor__container [data-refer]:nth-child(n+2) {
  margin-top: 4px;
}
.editor__container [data-count] {
  position: relative;
  padding-left: 36px;
}
.editor__container [data-count]:before {
  display: flex;
  position: absolute;
  top: -2px;
  left: 0;
  width: 24px;
  height: 24px;
  color: #fff;
  font-weight: 700;
  font-size: var(--font-body-3-size);
  content: attr(data-count);
  justify-content: center;
  align-items: center;
  background-color: var(--color-fg-brand-solid, #fb1822);
  border-radius: 50%;
}
.editor__container .m0 {
  margin: 0px !important;
}
.editor__container .mt4 {
  margin-top: 4px !important;
}
.editor__container .mt6 {
  margin-top: 6px !important;
}
.editor__container .mt8 {
  margin-top: 8px !important;
}
.editor__container .mt10 {
  margin-top: 10px !important;
}
.editor__container .mt12 {
  margin-top: 12px !important;
}
.editor__container .mt16 {
  margin-top: 16px !important;
}
.editor__container .mt20 {
  margin-top: 20px !important;
}
.editor__container .mt24 {
  margin-top: 24px !important;
}
.editor__container .mt28 {
  margin-top: 28px !important;
}
.editor__container .mt32 {
  margin-top: 32px !important;
}
.editor__container .mt40 {
  margin-top: 40px !important;
}
.editor__container .mt48 {
  margin-top: 48px !important;
}
.editor__container .mt56 {
  margin-top: 56px !important;
}
.editor__container .mt64 {
  margin-top: 64px !important;
}
.editor__container .mt72 {
  margin-top: 72px !important;
}
.editor__container .mt80 {
  margin-top: 80px !important;
}
.editor__container .mt104 {
  margin-top: 104px !important;
}
.editor__container .head1 {
  font-size: var(--size-head1);
  line-height: 50px;
}
.editor__container .head2 {
  font-size: var(--size-head2);
  line-height: 42px;
}
.editor__container .head3 {
  font-size: var(--size-head3);
  line-height: 30px;
}
.editor__container .title1 {
  font-size: var(--size-title1);
  line-height: 30px;
}
.editor__container .title2 {
  font-size: var(--size-title2);
  line-height: 28px;
}
.editor__container .title3 {
  font-size: var(--size-title3);
  line-height: 30px;
}
.editor__container .title4 {
  font-size: var(--size-title4);
  line-height: 22px;
}
.editor__container .body1 {
  font-size: var(--size-body1);
  line-height: 30px;
}
.editor__container .body2 {
  font-size: var(--size-body2);
  line-height: 28px;
}
.editor__container .body3 {
  font-size: var(--size-body3);
  line-height: 28px;
}
.editor__container .body4 {
  font-size: var(--size-body4);
  line-height: 24px;
}
.editor__container .body5 {
  font-size: var(--size-body5);
  line-height: 22px;
}
.editor__container .caption1 {
  font-size: var(--size-caption1);
  line-height: 16px;
}
.editor__container .caption2 {
  font-size: var(--size-caption2);
  line-height: 14px;
}
.editor__container .head2[data-multiple="1"] {
  line-height: 36px;
}
.editor__container .title2[data-multiple="1"] {
  line-height: 28px;
}
.editor__container .title3[data-multiple="1"] {
  line-height: 26px;
}
.editor__container .body3[data-multiple="1"] {
  line-height: 22px;
}
.editor__container .body4[data-multiple="1"] {
  line-height: 20px;
}
.editor__container .body5[data-multiple="1"] {
  line-height: 18px;
}
.editor__container .text.__left {
  text-align: left;
}
.editor__container .text.__center {
  text-align: center;
}
.editor__container .text.__right {
  text-align: right;
}
.editor__container hr.separate {
  height: 1px;
  border: 0;
  background-color: #eee;
}
.editor__container hr.separate.__outer {
  margin-left: -20px;
  margin-right: -20px;
}
.editor__container hr.separate.__8h {
  height: 8px;
}
.editor__container hr.separate.__y24 {
  margin-top: 24px;
  margin-bottom: 24px;
}
.editor__container .header-container + .separate,
.editor__container .inner hr.separate {
  margin-left: -20px;
  margin-right: -20px;
}
.editor__container .boxer {
  padding: 20px;
  border-radius: 8px;
  background-color: #f7f7f7;
}
.editor__container .boxer.__outline {
  border: 1px solid #eee;
  background-color: #ffffff;
}
.editor__container .boxer.__noti {
  padding-bottom: 112px;
}
.editor__container .blind {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}
.editor__container .outer {
  margin-left: -20px;
  margin-right: -20px;
}
.editor__container .__btnarea {
  padding-top: 4px;
  padding-bottom: 4px;
}
.editor__container .__blue100 {
  color: var(--color-fg-brand-solid, #fb1822);
}
.editor__container .txt-rg-xsm {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.editor__container .txt-md {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.editor__container .txt-md.blue-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.editor__container .point-color {
  color: var(--color-fg-brand-solid, #fb1822);
}
.editor__container .add-symbol {
  padding-left: 15px;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #999;
  text-indent: -15px;
}
.editor__container .add-asterisk {
  position: relative;
  padding-left: 10px;
  margin-left: 16px;
  margin-top: 24px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.75px;
  color: #222;
}
.editor__container .add-asterisk:before {
  position: absolute;
  top: 3px;
  left: 0;
  display: block;
  content: "*";
  font-size: 14px;
  color: #999;
}
.editor__container .pop-list-st {
  font-size: 14px;
  font-weight: 300;
}
.editor__container .pop-list-st.eng li .list-tit {
  letter-spacing: 0;
}
.editor__container .pop-list-st.eng li .txt {
  letter-spacing: 0;
}
.editor__container .pop-list-st li {
  margin-top: 20px;
}
.editor__container .pop-list-st li:first-child {
  margin-top: 0;
}
.editor__container .pop-list-st li:first-child .list-con {
  margin-top: 0;
}
.editor__container .pop-list-st li .list-tit {
  margin-left: 14px;
  text-indent: -14px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.editor__container .pop-list-st li .list-tit.type2 {
  font-size: 14px;
  color: #666;
}
.editor__container .pop-list-st li .tit {
  margin-bottom: 10px;
  /*font-weight: 500;*/
  color: #FB1822;
}
.editor__container .pop-list-st li .sub-tit {
  margin: 20px 0 8px;
  color: #222;
  font-weight: 400;
}
.editor__container .pop-list-st li .indent-list {
  padding-left: 16px;
}
.editor__container .pop-list-st li .indent-list .tit {
  margin-bottom: 16px;
}
.editor__container .pop-list-st li .txt {
  margin-top: 30px;
  font-weight: 300;
  font-size: 14px;
  color: #222;
  line-height: 22px;
  letter-spacing: -0.75px;
}
.editor__container .pop-list-st li .txt:first-child {
  margin-top: 0;
}
.editor__container .pop-list-st li .txt .paragraph {
  position: relative;
  padding-left: 14px;
  margin-top: 20px;
  word-break: keep-all;
}
.editor__container .pop-list-st li .txt .paragraph * {
  word-break: keep-all;
}
.editor__container .pop-list-st li .txt .paragraph:before {
  position: absolute;
  top: 0;
  left: 2px;
  display: block;
  content: "·";
}
.editor__container .pop-list-st li .txt .paragraph:first-child {
  margin-top: 0;
}
.editor__container .pop-list-st li .txt .paragraph.no-dash:before {
  display: none;
}
.editor__container .pop-list-st li .txt .paragraph.type2 {
  padding-left: 0;
  margin-top: 10px;
  line-height: 22px;
}
.editor__container .pop-list-st li .txt .paragraph.type2:before {
  display: none;
}
.editor__container .pop-list-st li .txt .paragraph.num-type {
  padding-left: 21px;
}
.editor__container .pop-list-st li .txt .paragraph.num-type .num {
  position: absolute;
  left: 0;
  top: 0;
}
.editor__container .pop-list-st li .txt .paragraph.num-type:before {
  display: none;
}
.editor__container .pop-list-st li .txt .img-area {
  margin-top: 20px;
}
.editor__container .pop-list-st li .txt .img-area img {
  width: 100%;
}
.editor__container .pop-list-st li .sub-txt {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #222;
}
.editor__container .pop-list-st li > .img {
  margin-bottom: 20px;
  width: 72%;
}
.editor__container .pop-list-st li > .img img {
  max-width: 100%;
}
.editor__container .pop-list-st li > .txt {
  margin-bottom: 20px;
}
.editor__container .pop-list-st li .list-tit + .list-con {
  margin-top: 10px;
}
.editor__container .pop-list-st li .list-tit + .indent-list {
  margin-top: 10px;
}
.editor__container .pop-list-st li .list-con {
  margin: 10px 0 40px;
  line-height: 24px;
}
.editor__container .pop-list-st li .list-con:last-child {
  margin-bottom: 0;
}
.editor__container .pop-list-st li .img {
  margin-bottom: 0;
  width: 80%;
}
.editor__container .pop-list-st li .img img {
  max-width: 100%;
}
.editor__container .pop-list-st .card-inf-txt {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-fg-brand-solid, #fb1822);
  font-weight: 400;
}
.editor__container .pop-list-st.mid li {
  margin-top: 30px;
}
.editor__container .unorder-list,
.editor__container .unoder-list {
  padding-bottom: 22px;
}
.editor__container .unorder-list b,
.editor__container .unorder-list strong,
.editor__container .unoder-list b,
.editor__container .unoder-list strong {
  font-weight: 700;
}
.editor__container .unorder-list sub,
.editor__container .unoder-list sub {
  vertical-align: sub;
}
.editor__container .unorder-list sup,
.editor__container .unoder-list sup {
  vertical-align: super;
}
.editor__container .unorder-list i,
.editor__container .unoder-list i {
  font-style: italic;
}
.editor__container .unorder-list li,
.editor__container .unoder-list li {
  padding-left: 10px;
  color: #999;
  font-size: 14px;
  line-height: 22px;
  margin-top: 12px;
}
.editor__container .unorder-list li::before,
.editor__container .unoder-list li::before {
  top: 10px;
}
.editor__container .terms dl > dt {
  margin-bottom: 10px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.editor__container .terms dl > dd {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.editor__container .terms dl > dd + dt {
  margin-top: 20px;
}
.editor__container .terms dl + div[data-bullet] {
  margin-top: 20px !important;
}

.admin__img img {
  width: 100%;
}

.iframe__container {
  width: 100%;
}
.iframe__container iframe {
  width: 100%;
  height: 100%;
}

.event-detail .editor__container {
  /* 기존 view.css */
}
.event-detail .editor__container ul[type=disc] > li, .event-detail .editor__container div > ul > li {
  position: relative;
  padding-left: 12px;
  line-height: 24px;
  word-break: keep-all;
}
.event-detail .editor__container ul[type=disc] > li:before, .event-detail .editor__container div > ul > li:before {
  content: "-";
  position: absolute;
  left: 0;
}
.event-detail .editor__container ul[type=disc] > li:nth-child(n+2), .event-detail .editor__container div > ul > li:nth-child(n+2) {
  margin-top: 5px;
}
.event-detail .editor__container [data-bullet] li {
  position: relative;
  padding-left: 12px;
  line-height: 24px;
  word-break: keep-all;
}
.event-detail .editor__container [data-bullet] li:nth-child(n+2) {
  margin-top: 5px;
}
.event-detail .editor__container [data-bullet] li:before {
  content: "-";
  position: absolute;
  left: 0;
}
.event-detail .editor__container [data-bullet="-"] li:before {
  content: "-";
}
.event-detail .editor__container [data-bullet=※] li:before {
  content: "※";
  left: -4px;
}
.event-detail .editor__container [data-bullet=·] li:before {
  content: "·";
}
.event-detail .editor__container [tel] {
  font-size: inherit;
  color: inherit;
  text-decoration: none;
}

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 10100;
}
#loading .content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-overlay-wt-basic, rgba(255, 255, 255, 0.4));
}
#loading .loading-box {
  width: 112px;
  height: 112px;
}
#loading canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-element-card {
  text-align: center;
}
.cm-element-card[data-size=l] .cm-element-card__img-wrap {
  width: 207px;
  height: 207px;
  margin-bottom: 16px;
}
.cm-element-card[data-thumb-dir=vertical] .cm-element-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cm-element-card__img-wrap {
  width: 184px;
  height: 184px;
  margin: 0 auto 8px;
}
.cm-element-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cm-element-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-element-card__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.cm-element-card__description {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}

.lpoint-card.full-popup__benefit-info .title-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lpoint-card.full-popup__benefit-info .title-wrap svg, .lpoint-card.full-popup__benefit-info .title-wrap img {
  width: 28px;
  height: 28px;
}
.lpoint-card.full-popup__benefit-info .title {
  color: #222;
  font-family: Pretendard;
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
}
.lpoint-card.full-popup__benefit-info .content-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
}
.lpoint-card.full-popup__benefit-info .content__tit {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.lpoint-card.full-popup__benefit-info .content__sub {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}

.lpoint-card-index .lpoint-card__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lpoint-card-index .lpoint-card__section .title {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  text-align: center;
}
.lpoint-card-index .lpoint-card__section .title .accent, .lpoint-card-index .lpoint-card__section .title span {
  color: var(--color-fg-brand-solid, #fb1822);
}

.lpoint-card-index-detail .terms[data-direction=horizontal] {
  padding: 4px 0;
}

.recomend-card-detail__txt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  line-height: 0;
  position: relative;
}
.recomend-card-detail__txt-main {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  min-width: 0;
  text-align: left;
}
.recomend-card-detail__txt-sub {
  font-weight: 400;
  font-size: 14px;
  color: #898d93;
  line-height: 1.5;
  letter-spacing: -0.07px;
}
.recomend-card-detail__txt-sub .txt-jp {
  color: #222832;
  font-weight: 500;
  margin-bottom: 0;
}
.recomend-card-detail__txt-sub .txt-kr {
  color: #898d93;
}
.recomend-card-detail .from-editor .title-component[data-size=m] .title-component__desc {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.recomend-card-detail .from-editor .recomend-card-detail__step-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 20px !important;
}
.recomend-card-detail .from-editor .recomend-card-detail__step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.recomend-card-detail .from-editor .recomend-card-detail__step-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.recomend-card-detail .from-editor .recomend-card-detail__step-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  background-color: var(--color-bg-neutral-muted, #9da1a7);
  color: var(--color-fg-neutral-inverted, #ffffff);
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
}
.recomend-card-detail .from-editor .recomend-card-detail__step-title {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  flex: 1 1 0%;
  min-width: 0;
}
.recomend-card-detail .from-editor .recomend-card-detail__step-img-area {
  width: 100%;
  aspect-ratio: 302/218.8423;
  background: #dee1e4;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.recomend-card-detail .from-editor .recomend-card-detail__step-img-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-cancellation__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-result-completed__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lpoint-card-bottom-sheet.auth .time-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
}
.lpoint-card-bottom-sheet.auth .time-wrap i {
  color: var(--color-icon-neutral-muted, #b2b6ba);
  width: 24px;
  height: 24px;
  margin-right: 6px;
}
.lpoint-card-bottom-sheet.auth .title-wrap {
  margin-top: 16px;
  text-align: center;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}

.card-legal-rep-auth__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-legal-rep-auth__action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 20px 16px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 8px;
}
.card-legal-rep-auth__action-icon {
  width: 32px;
  height: 32px;
}
.card-legal-rep-auth__action-icon svg, .card-legal-rep-auth__action-icon img {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color-fg-neutral-solid, #222832);
}

.card-self-auth__buttons-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 10px;
}
.card-self-auth .btn[data-icon=true] {
  gap: 6px;
}

.card-reregister-confirm-sheet .title-component[data-size=m] {
  padding-bottom: 0;
}

.card-report-loss-self-auth__buttons-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 8px;
}
.card-report-loss-self-auth .btn[data-icon=true] {
  gap: 6px;
}

.cm-register__input-box {
  display: flex;
  gap: 20px;
}
.cm-register__input-box .radio__box, .cm-register__input-box .checkbox__box {
  width: auto;
}

.cm-register__button-box {
  display: flex;
  justify-content: center;
}

/* 송금 하단 단축키 */
.remittance-bottom__short-key {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.remittance-bottom__short-key .btn-box {
  display: flex;
  gap: 8px;
}
.remittance-bottom__short-key .txt-box {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}

div[data-select-type=remittance-confirm-sheet] .terms__item {
  text-align: left;
}

.autochange-guide-popup .title-component[data-size=l] .title-component__text {
  margin-bottom: 0;
}
.autochange-guide-popup .full-popup .title-component[data-size=l] {
  margin-bottom: 0;
}

.autochange-lottesuper-popup .full-popup .title-component[data-size=l] {
  margin-bottom: 0;
}

.autochange-himart-popup .full-popup .title-component[data-size=l] {
  margin-bottom: 0;
}

.autochange-main__save-main-img {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 24px;
  padding: 8px 0;
}
.autochange-main__save-main-img img {
  max-width: 224px;
  width: 100%;
}
.autochange-main__item-list .list-component {
  padding: 12px 0;
}
.autochange-main__item-list .list-component__info {
  gap: 16px;
}
.autochange-main__item-list .list-component__btn .label {
  font-size: var(--font-title-4-size, 0.8125rem);
  font-weight: var(--font-title-4-weight, 600);
  line-height: var(--font-title-4-line-height, 1.4);
  letter-spacing: var(--font-title-4-letter-spacing, -0.005em);
  padding: 7px 12px;
}
.autochange-main__item-list .list-component__inner {
  gap: 16px;
}
.autochange-main__item-list .list-component__icon-btn {
  width: 16px;
  height: 16px;
  color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.autochange-main__item-list .list-component__icon-btn svg {
  width: 100%;
  height: 100%;
}
.autochange-main__accent {
  color: var(--color-fg-accent-red-solid-800, #ae060d);
}
.autochange-main__info-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  margin-bottom: 40px;
}
.autochange-main__info-wrapper:last-child {
  margin-bottom: 0;
}
.autochange-main__info-img {
  width: 112px;
  height: 112px;
}
.autochange-main__info-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.autochange-main__info-text-wrapper {
  margin: 20px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.autochange-main__info-title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.autochange-main__info-desc {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.autochange-main__info-pos-items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.autochange-main__info-pos-item-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.autochange-main__info-pos-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.autochange-main__info-pos-title {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  text-align: center;
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.autochange-main .list-component__btn {
  position: relative;
}
.autochange-main .list-component__btn .tooltip {
  position: absolute;
  right: 0;
  bottom: 93%;
}
.autochange-main__sheet .title-component[data-size=m] {
  align-items: flex-start;
}
.autochange-main__sheet .title-component[data-size=m] .title-component__button--icon {
  margin-top: 4px;
}

.point-coupon-save {
  background-color: var(--color-bg-neutral-inverted, #ffffff);
}
.point-coupon-save .unit-partner__btn-text {
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.point-coupon-save .unit-partner__action .btn {
  padding-left: 0;
  padding-right: 0;
}
.point-coupon-save .unit-list__charge {
  padding: 12px 0;
  gap: 16px;
}
.point-coupon-save .unit-list__charge-content {
  gap: 16px;
}

.coupon-eurox-save-before {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.coupon-eurox-save-before__content {
  padding-top: 32px;
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.coupon-eurox-save-before__link-wrapper {
  text-align: center;
}
.coupon-eurox-save-before__sheet-content .confirm-sheet__box {
  padding-top: 0;
}
.coupon-eurox-save-before__sheet-content .confirm-sheet__box .title-component {
  margin-top: 18px;
}
.coupon-eurox-save-before .terms {
  border-radius: 0;
  padding: 24px 20px 128px;
}

.marketing-info-accept-result {
  padding: 20px;
  border-radius: 16px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.marketing-info-accept-result__text-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 16px;
}
.marketing-info-accept-result__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.marketing-info-accept-result__date {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.marketing-info-accept-result__item-wrapper {
  display: flex;
  gap: 6px;
  padding-bottom: 8px;
}
.marketing-info-accept-result__item-title {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: #6A6F77;
}
.marketing-info-accept-result__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.marketing-info-accept-result__item img {
  color: var(--color-fg-neutral-subtle, #5f646c);
  width: 20px;
  height: 20px;
}
.marketing-info-accept-result__item--accepted .icon-accepted {
  display: block;
}
.marketing-info-accept-result__item--accepted .icon-unaccepted {
  display: none;
}
.marketing-info-accept-result__item--unaccepted .icon-accepted {
  display: none;
}
.marketing-info-accept-result__item--unaccepted .icon-unaccepted {
  display: block;
}

.coupon-eurox-info-edit-complete .btn {
  padding: 14px 20px;
}
.coupon-eurox-info-edit-complete .completed-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 48px;
  padding-bottom: 48px;
  gap: 24px;
}
.coupon-eurox-info-edit-complete .completed-page__wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}
.coupon-eurox-info-edit-complete .completed-page__icon {
  width: 152px;
  height: 152px;
  margin: 0 auto;
}
.coupon-eurox-info-edit-complete .completed-page__icon svg {
  width: 100%;
  height: 100%;
}
.coupon-eurox-info-edit-complete .completed-page__title {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  margin-bottom: 24px;
  text-align: center;
}

.coupon-agreement__content {
  padding-top: 32px;
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.coupon-agreement__link-wrapper {
  text-align: center;
  margin-top: 12px;
}
.coupon-agreement__sheet-content .confirm-sheet__box {
  padding-top: 0;
}
.coupon-agreement__sheet-content .confirm-sheet__box .title-component {
  margin-top: 18px;
}
.coupon-agreement__terms {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.coupon-agreement__terms span {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: #6A6F77;
}

.coupon-eurox-point-popup {
  position: relative;
}
.coupon-eurox-point-popup__logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.coupon-eurox-point-popup__img-container {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  z-index: -1;
}
.coupon-eurox-point-popup__img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coupon-eurox-point-popup__tit-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 90% 0 24px;
  color: var(--color-fg-neutral-solid, #222832);
}
.coupon-eurox-point-popup__tit-info {
  color: #6A6F77;
}

.coupon-eurox-main__terms.terms {
  border-radius: 0;
  padding: 24px 20px 128px;
}
.coupon-eurox-main__lottery-ad-wrapper {
  border-radius: 16px;
  padding: 24px 20px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.coupon-eurox-main__ad-img-wrapper {
  padding: 16px 58px 16px 66px;
  gap: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.coupon-eurox-main__qr-tag-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.coupon-eurox-main__qr {
  width: 80px;
  height: 80px;
}
.coupon-eurox-main__eurox {
  width: 96px;
  height: 128px;
}
.coupon-eurox-main__ad-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.coupon-eurox-main__ad-heading {
  color: var(--color-fg-neutral-solid, #222832);
}
.coupon-eurox-main__ad-body {
  color: var(--color-fg-neutral-subtle, #5f646c);
}

.coupon-eurox-lottery__terms.terms {
  border-radius: 0;
  padding: 24px 20px 128px;
}
.coupon-eurox-lottery__lottery-ad-wrapper {
  border-radius: 16px;
  padding: 24px 20px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.coupon-eurox-lottery__lottery-title {
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.coupon-eurox-lottery__lottery-number {
  color: var(--color-fg-neutral-solid, #222832);
}
.coupon-eurox-lottery__lottery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 12px;
}
.coupon-eurox-lottery__guide-text {
  color: var(--color-fg-neutral-solid, #222832);
}

.coupon-pasteur-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.coupon-pasteur-main .terms {
  border-radius: 0;
  padding: 24px 20px 128px;
}

.coupon-moneycon-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.coupon-moneycon-main .terms {
  border-radius: 0;
  padding: 24px 20px 128px;
}

.coupon-samsung-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.coupon-samsung-main .terms {
  border-radius: 0;
  padding: 24px 20px 128px;
}

.coupon-eurox-info-after {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.coupon-eurox-info-after .terms {
  border-radius: 0;
  padding: 24px 20px 128px;
}
.coupon-eurox-info-after__item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.coupon-eurox-info-after__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 16px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
}
.coupon-eurox-info-after__item[data-state=disabled] .coupon-eurox-info-after__item-title {
  color: var(--color-fg-neutral-weak, #b2b6ba);
}
.coupon-eurox-info-after__text-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.coupon-eurox-info-after__item-number {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background-color: var(--color-fg-neutral-muted-weak, #9da1a7);
  color: var(--color-fg-neutral-inverted, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.coupon-eurox-info-after__warn-page-wrapper .warn-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.coupon-eurox-info-after__warn-page-wrapper .warn-page__icon {
  width: 112px;
  height: 112px;
  margin: 0 auto;
}
.coupon-eurox-info-after__warn-page-wrapper .warn-page__icon svg {
  width: 100%;
  height: 100%;
}
.coupon-eurox-info-after__warn-page-wrapper .warn-page__text-wrapper {
  text-align: center;
  margin-top: 16px;
}
.coupon-eurox-info-after__warn-page-wrapper .warn-page__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  margin-bottom: 8px;
}
.coupon-eurox-info-after__warn-page-wrapper .warn-page__text {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}

.coupon-eurox-qr-scan.full-content {
  background-color: transparent;
  position: relative;
  padding-bottom: 0;
  min-height: 100dvh;
}
.coupon-eurox-qr-scan .bottom-button {
  background: transparent;
}
.coupon-eurox-qr-scan__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  overflow: hidden;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
}
.coupon-eurox-qr-scan__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coupon-eurox-qr-scan__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 32px;
  background-color: transparent;
  margin: auto 0;
}
.coupon-eurox-qr-scan__scan-area {
  width: 88%;
}
.coupon-eurox-qr-scan__scan-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coupon-eurox-qr-scan__info-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-bg-neutral-inverted, #ffffff);
}
.coupon-eurox-qr-scan__title {
  margin-top: 27%;
  color: var(--color-bg-neutral-inverted, #ffffff);
}
.coupon-eurox-qr-scan__text {
  color: var(--color-bg-neutral-inverted, #ffffff);
}
.coupon-eurox-qr-scan__number-wrapper {
  display: flex;
  align-items: flex-end;
  color: var(--color-bg-neutral-inverted, #ffffff);
}
.coupon-eurox-qr-scan__unit {
  color: var(--color-bg-overlay-wt-basic, rgba(255, 255, 255, 0.4));
}

.point-donation .btn {
  width: 135px;
}
.point-donation .title-component[data-size=l] .title-component__text {
  margin-bottom: 0;
}
.point-donation__banner-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.donation-detail__title {
  font-size: var(--font-body-1-size, 1.125rem);
  font-weight: var(--font-body-1-sb-weight, 600);
  line-height: var(--font-body-1-line-height, 1.5);
  letter-spacing: var(--font-body-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  margin-bottom: 8px;
}
.donation-detail__description {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.donation-detail__image-wrapper {
  width: 100%;
}
.donation-detail__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.donation-detail .donation-banner-detail__img {
  width: 100%;
}
.donation-detail .donation-banner-detail__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.donation-detail .donation-banner-detail__thumb {
  position: relative;
  width: 100%;
}
.donation-detail .donation-banner-detail__thumb .donation-banner__badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
}
.donation-detail .donation-banner-detail__body {
  padding-top: 24px;
}
.donation-detail .donation-banner-detail__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.donation-detail .donation-banner-detail__amount-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.donation-detail .donation-banner-detail__amount {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-bg-brand-solid, #fb1822);
}
.donation-detail .donation-banner-detail__status {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: #6A6F77;
}
.donation-detail .donation-banner-detail__date {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: #6A6F77;
}
.donation-detail .donation-banner-detail__title {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.donation-detail .donation-comment {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.donation-detail .donation-comment__title {
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.donation-detail .donation-comment__sub-text-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}

.donation-history-list .donation-history-item[data-type=cancel] .sp-purchase-product__title-text, .donation-history-list .donation-history-item[data-type=cancel] .sp-purchase-product__text-product-title {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.donation-history-list .donation-history-item[data-type=cancel] .sp-purchase-product__title-date, .donation-history-list .donation-history-item[data-type=cancel] .sp-purchase-product__text-price-current {
  color: var(--color-fg-neutral-weak, #b2b6ba);
}
.donation-history-list .donation-history-item:last-child .divider {
  display: none;
}

.donation-history-empty .none-page:not([data-full=false]) {
  position: relative;
  top: auto;
  left: auto;
  transform: translate(0%, 0%);
}

.donation-receipt-main .input__wrap {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.donation-receipt-main .element-list-text__title--text {
  color: #6A6F77;
}
.donation-receipt-main__sheet .checkbox__label {
  display: flex;
  gap: 2px;
}
.donation-receipt-main__sheet .checkbox__label span {
  white-space: nowrap;
}

.donation-complete__product-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.donation-complete__product-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sen-gold__top {
  padding: 12px 0 24px;
}
.sen-gold__top .top-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sen-gold__top .top-box .img-box {
  position: relative;
  width: 200px;
  height: 200px;
  margin-top: 40px;
}
.sen-gold__top .top-box .img-box img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.event-detail > .container:not(.container[data-bg=gray]) {
  padding-right: 0;
  padding-left: 0;
  overflow-x: hidden;
}
.event-detail img {
  width: 100%;
  height: auto;
  display: block;
  max-width: initial;
}
.event-detail__participation .list-component {
  position: relative;
}
.event-detail__participation .list-component:after {
  content: "";
  position: absolute;
  display: block;
  left: 21px;
  bottom: -8px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
  width: 2px;
  height: 16px;
}
.event-detail__participation .list-component:nth-last-child(1):after {
  display: none;
}
.event-detail__section--share-btns {
  padding-right: 16px;
  padding-left: 16px;
  display: flex;
  gap: 12px;
  justify-content: center;
}
.event-detail__first-purchase {
  padding-right: 16px;
  padding-left: 16px;
}
.event-detail__first-purchase .img-wrap {
  width: 100%;
  height: auto;
}
.event-detail__first-purchase .product__container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 10px;
}
.event-detail .agree-all-container {
  padding-right: 16px;
  padding-left: 16px;
}
.event-detail .product-component .thumb-product img {
  height: 100%;
}
.event-detail__content:not(:has(.event-detail__first-purchase)) .event-detail__participation .divider {
  display: none;
}

.event-index {
  overflow: visible;
}
.event-index-top__tab {
  position: sticky;
  top: 54px;
  left: 0;
  z-index: 10;
  background-color: #ffffff;
}
.event-index-top__tab .tab-component {
  overflow: visible;
}
.event-index__content {
  overflow: hidden;
}
.event__bottom-sheet--select-container {
  gap: 0;
}
.event__bottom-sheet--select-container .select-button__box {
  padding: 12px 0;
}
.event__bottom-button .tooltip {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.event__element-kv .accent {
  color: var(--color-fg-brand-solid, #fb1822);
  background: linear-gradient(97deg, rgba(251, 24, 34, 0.5) 0%, var(--color-fg-brand-solid, #fb1822) 33%, var(--color-fg-brand-solid, #fb1822) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.event__element-kv .title-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.event__element-kv .title-wrap .title {
  font-size: var(--font-heading-2-size, 1.75rem);
  font-weight: var(--font-heading-2-weight, 600);
  line-height: var(--font-heading-2-line-height, 1.4);
  letter-spacing: var(--font-heading-2-letter-spacing, -0.005em);
}
.event__element-kv .title-wrap .sub-title {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.event__element-kv .title-wrap .accent {
  color: var(--color-fg-brand-solid, #fb1822);
}
.event__element-kv .img-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 350/240;
}
.event__element-kv .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform-origin: center;
}

.common-auth__card-select {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.common-auth__card-select--button {
  text-align: center;
}

.common-auth__radio {
  display: flex;
  gap: 20px;
}
.common-auth__radio .radio__box {
  width: auto;
}

.auth-ars-certification .title-component:has(+ .btn-txt) {
  padding-bottom: 12px;
}
.auth-ars-certification .title-component + .btn-txt {
  color: var(--color-fg-neutral-solid, #222832);
}

/* 아이폰16버그 대응 */
html:has(.auth-ars-certification) {
  overflow: hidden;
  height: 100%;
}
html:has(.auth-ars-certification) body {
  overflow: auto;
  height: 100%;
}

.member-auth-info__button .segment-component {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.member-auth-info__button #btnNotice {
  display: none;
  margin-top: 16px;
}
.member-auth-info__button #btnNotice.show {
  display: block;
}

.member-auth-info__box .unit-partner {
  align-items: center;
}
.member-auth-info__box .unit-partner__action {
  width: auto;
}

.nationality-search__item {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nationality-search__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.nationality-search__radio-list {
  display: flex;
  flex-direction: column;
}
.nationality-search__radio-item {
  padding: 13px 0;
}
.nationality-search .search__related {
  position: relative;
  height: auto;
}
.nationality-search .search__related-list {
  padding-left: calc(20px + 10px);
  gap: 0;
  margin-top: 24px;
}
.nationality-search .search__related-item {
  padding: 13px 0;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}

.auth-intro__find-accounts {
  width: fit-content;
  margin: 0 auto;
}
.auth-intro__find-accounts > div:not(:last-child) {
  position: relative;
  padding-right: 12px;
}
.auth-intro__find-accounts > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 1px;
  height: 12px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.auth-intro__find-accounts div:last-child {
  position: relative;
}
.auth-intro__find-accounts div:last-child .tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 4px));
}

.auth-intro__container {
  position: relative;
  width: 100%;
  height: calc(100vh - 54px);
  height: calc(100dvh - 54px);
}
.auth-intro__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50dvh;
  opacity: 0;
}
.auth-intro__logo.loaded {
  opacity: 1;
}
.auth-intro__logo svg, .auth-intro__logo img {
  width: 174px;
  height: auto;
}
.auth-intro__btn-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.auth-intro__btn-wrap .character-img {
  position: absolute;
  top: 0;
  right: 40.23px;
  transform: translateY(calc(-100% + 19.5px));
  z-index: -1;
}
.auth-intro__btn-wrap .character-img img {
  width: 88px;
}
.auth-intro__btn-box {
  width: 100%;
}
.auth-intro__login-methods {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.auth-intro__login-methods svg {
  width: 24px;
  height: 24px;
}

/*회원가입 페이지*/
.auth-register__bottom-banner {
  position: fixed;
  width: 100%;
  bottom: 21px;
}

.auth-complete {
  height: calc(100vh - 54px - var(--bottom-button-height));
}
.auth-complete__container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.auth-complete__icon {
  width: 112px;
  height: 112px;
}
.auth-complete__icon img {
  width: 100%;
  height: 100%;
}

.auth-certification .identification-icon {
  width: 32px;
  height: 32px;
}
.auth-certification .identification-icon svg, .auth-certification .identification-icon img {
  width: 100%;
  height: 100%;
}

.auth-edit__password-confirm .checkbox__box {
  pointer-events: none;
}
.auth-edit__password-confirm .checkbox__box input[type=checkbox]:checked + .checkbox__label {
  color: var(--color-fg-brand-solid, #fb1822);
}

.auth-popup-card-info .unit-info__text-list + .unit-info__text-list {
  margin-top: 12px;
}
.auth-popup-card-info .card-info__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth.bottom-sheet__privacy-consent-notice .title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  text-align: center;
}
.auth.bottom-sheet__privacy-consent-notice .sub-title {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  text-align: center;
  color: var(--color-fg-brand-solid, #fb1822);
}

/* 본인인증 선택 스타일 */
.select-self-authentication__identifications {
  display: flex;
  gap: 10px;
}
.select-self-authentication__identification-item {
  width: 100%;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 12px;
  border-radius: 8px;
}
.select-self-authentication__identification-icon {
  width: 32px;
  height: 32px;
}
.select-self-authentication__identification-icon svg, .select-self-authentication__identification-icon img {
  width: 100%;
  height: 100%;
}

/* 카드발급 완료 페이지 */
.auth-apply-card-complete .unit-list__point {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* 계좌등록 :: 멤버십 페이지에서 이관 */
.ms-account-register__ars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ms-account-register__ars-text {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.ms-account-register__ars-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 16px;
  padding: 16px 20px;
}
.ms-account-register__ars-box .btn {
  margin-top: 16px;
}
.ms-account-register__ars-box.account {
  align-items: flex-start;
}
.ms-account-register__ars-top {
  text-align: center;
}
.ms-account-register__ars-top .title {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.ms-account-register__ars-top .time {
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
}
.ms-account-register__ars-top .tel {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  margin-top: 6px;
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.ms-account-register__ars-info {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  width: 100%;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.ms-account-register__ars-info .deposit-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ms-account-register__ars-info .deposit-box .deposit-code {
  display: flex;
  gap: 4px;
}
.ms-account-register__ars-info .deposit-box .deposit-code span {
  display: inline-flex;
  width: 32px;
  height: 32px;
  padding: 4px 9px 0 10px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
  border-radius: 4px;
}
.ms-account-register__ars-info .deposit-info {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ms-account-register__ars-info .deposit-info span {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}

.common-coupon-detail .common-coupon__card-accordion__header .banner-band__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.common-coupon-detail .common-coupon__card-accordion__header.active + .common-coupon__card-accordion__content {
  height: auto;
}
.common-coupon-detail .common-coupon__card-accordion__header.active .banner-band__arrow svg {
  transform: rotate(180deg);
}
.common-coupon-detail .common-coupon__card-accordion__content {
  height: 0;
  overflow: hidden;
}
.common-coupon-detail .common-coupon__card-accordion__inner {
  padding: 0 24px 16px;
}
.common-coupon-detail .common-coupon__card-accordion__inner .img-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 278/171;
  border-radius: 12px;
  overflow: hidden;
}
.common-coupon-detail .common-coupon__card-accordion__inner .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.common-coupon-detail .common-coupon__card-accordion__text {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  margin-top: 12px;
  color: var(--color-fg-neutral-solid, #222832);
  word-break: break-all;
}
.common-coupon-detail .hidden {
  display: none !important;
}
.common-coupon-detail .common-coupon__giver-wrap {
  display: flex;
  justify-content: space-between;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.common-coupon-detail .full-popup-info .btn {
  width: fit-content;
}

.common-coupon .accent {
  color: var(--color-fg-accent-red-solid-800, #ae060d);
}
.common-coupon .coupon-list {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.common-coupon .coupon-list .unit-coupon {
  margin-bottom: 0;
}
.common-coupon .coupon-list > * {
  width: 100%;
}
.common-coupon .unit-coupon {
  position: relative;
  background: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
  gap: 13px;
  min-height: 168px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.common-coupon .unit-coupon__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  gap: 16px;
}
.common-coupon .unit-coupon__text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.common-coupon .unit-coupon__brand {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
  margin-bottom: 4px;
}
.common-coupon .unit-coupon__title {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  margin-bottom: 4px;
}
.common-coupon .unit-coupon__txt-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.common-coupon .unit-coupon__accent {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-accent-red-solid-800, #ae060d);
}
.common-coupon .unit-coupon__description {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.common-coupon .unit-coupon__logo {
  position: relative;
  width: 44px;
  height: 44px;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20.004 0H19.992C6.728 0 0 6.732 0 20C0 33.268 6.728 40 20 40C33.272 40 40 33.272 40 20C40 6.728 33.272 0 20.004 0Z' fill='%23F2F4F5'/%3E%3C/svg%3E");
}
.common-coupon .unit-coupon__logo-icon {
  width: 100%;
  height: 100%;
}
.common-coupon .unit-coupon__logo-icon img {
  width: 100%;
  height: 100%;
  fill: white;
}
.common-coupon .unit-coupon__footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.common-coupon .unit-coupon__info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.common-coupon .unit-coupon__info span:not(:last-child) {
  position: relative;
  padding-right: 6px;
}
.common-coupon .unit-coupon__info span:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--color-border-neutral-muted, #c8cccf);
}
.common-coupon .unit-coupon__info .urgent {
  color: var(--color-fg-accent-red-solid-800, #ae060d);
}
.common-coupon .unit-coupon__from {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
  white-space: nowrap;
  text-align: right;
}
.common-coupon .unit-coupon[data-state=special] {
  position: relative;
  z-index: 0;
  border-color: transparent;
}
.common-coupon .unit-coupon[data-state=special]::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 동일 */
  border-radius: inherit; /* 부모와 동일한 radius */
  padding: 1.25px; /* border 두께 (여기 조절) */
  background: var(--color-gradient-special, linear-gradient(114deg, #C75BDC 0%, #FF4769 50%, #FB1822 100%));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1; /* 박스 뒤로 보내기 */
}
.common-coupon .unit-coupon[data-state=special] .unit-coupon__logo-wrap {
  position: relative;
}
.common-coupon .unit-coupon[data-state=special] .unit-coupon__logo-wrap img, .common-coupon .unit-coupon[data-state=special] .unit-coupon__logo-wrap svg {
  padding: 3px;
}
.common-coupon .unit-coupon[data-state=special] .unit-coupon__logo-wrap .default-img {
  padding: 2px;
}
.common-coupon .unit-coupon[data-state=special] .unit-coupon__logo-wrap:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center center;
  background: linear-gradient(129deg, #E7B4F3 17%, #FE659D 89.23%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none'%3E%3Cpath d='M21.9912 1H22.0049C29.1443 1.00008 34.346 2.80934 37.7686 6.23242C41.1911 9.65561 43 14.8582 43 22C43 29.142 41.1907 34.3444 37.7676 37.7676C34.3444 41.1907 29.142 43 22 43C14.8582 43 9.65566 41.1894 6.23242 37.7656C2.80929 34.3418 1 29.1396 1 22C1 14.8605 2.80934 9.65818 6.23145 6.23438C9.65363 2.81065 14.8539 1 21.9912 1Z' stroke='url(%23paint0_linear_2400_29366)' stroke-width='2'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2400_29366' x1='13.4694' y1='1.06962e-07' x2='48.3438' y2='27.917' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23E7B4F3'/%3E%3Cstop offset='1' stop-color='%23FE659D'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none'%3E%3Cpath d='M21.9912 1H22.0049C29.1443 1.00008 34.346 2.80934 37.7686 6.23242C41.1911 9.65561 43 14.8582 43 22C43 29.142 41.1907 34.3444 37.7676 37.7676C34.3444 41.1907 29.142 43 22 43C14.8582 43 9.65566 41.1894 6.23242 37.7656C2.80929 34.3418 1 29.1396 1 22C1 14.8605 2.80934 9.65818 6.23145 6.23438C9.65363 2.81065 14.8539 1 21.9912 1Z' stroke='url(%23paint0_linear_2400_29366)' stroke-width='2'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2400_29366' x1='13.4694' y1='1.06962e-07' x2='48.3438' y2='27.917' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23E7B4F3'/%3E%3Cstop offset='1' stop-color='%23FE659D'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
.common-coupon .unit-coupon[data-state=used] {
  background: var(--color-bg-banner-default-gray-50, rgba(5, 55, 88, 0.06));
  border: none;
}
.common-coupon .unit-coupon[data-state=used] .unit-coupon {
  background: rgba(var(--color-bg-banner-default-gray-50, rgba(5, 55, 88, 0.06)), 0.05);
}
.common-coupon .unit-coupon[data-state=used] .unit-coupon__logo {
  position: relative;
}
.common-coupon .unit-coupon[data-state=used] .unit-coupon__logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-bg-overlay-bk-thin, rgba(0, 0, 0, 0.2));
  width: 100%;
  height: 100%;
}
.common-coupon .unit-coupon[data-state=used] .unit-coupon__logo.loading::after {
  display: none;
}
.common-coupon .unit-coupon .loading img {
  display: none;
}
.common-coupon .unit-coupon .loading .default-img {
  display: block;
}
.common-coupon__top-tab {
  height: 45px;
}
.common-coupon__top-tab .tab-component {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 100;
}

/* 최근검색어 / 추천검색어  */
.search-index {
  overflow: visible;
}
.search-index .color-red, .search-index b {
  color: var(--color-fg-brand-solid, #fb1822) !important;
}
.search-index__content-wrap {
  position: relative;
}
.search-index__preview .search-preview__recent .swiper-wrapper {
  gap: 10px !important;
}
.search-index__preview .search-preview__recent .tab-component {
  padding-bottom: 0;
}
.search-index__preview .search-preview__recent .tab-component__item {
  display: flex;
  gap: 1px;
  align-items: center;
  justify-content: center;
}
.search-index__preview .search-preview__recent .tab-component__item button {
  color: var(--color-fg-neutral-solid, #222832);
}
.search-index__preview .search-preview__recent .tab-component__item i {
  display: block;
  width: 12px;
  height: 12px;
}
.search-index__preview .search-preview__recent .tab-component__item i svg {
  width: 100%;
  height: 100%;
}
.search-index__recomend .search-preview__recomend-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px;
}
.search-index__recomend .search-preview__recomend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  border-radius: 9999px;
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}

/*연관검색어*/
.search__related {
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  width: 100%;
  height: calc(100vh - 113px);
}
.search__related-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.search__related-item {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.search__related-item b {
  color: var(--color-fg-brand-solid, #fb1822);
}

/*검색 결과*/
.search__result-summary {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  margin-bottom: 12px;
}
.search__result-all article:not(:last-child) {
  margin-bottom: 40px;
}
.search__result .list-component__tit {
  font-weight: 600 !important;
}
.search__result .result-shopping .product-component ~ .product-component, .search__result .result-ecoupon .product-component ~ .product-component {
  margin-top: 24px;
}
.search__result .result-ecoupon .thumb-product {
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.search__result .result-partner .list-component__content {
  gap: 10px;
}
.search__result .result-menu .unit-list__icon-icon {
  display: none;
}

/*-----------------------------*/
/*    공지사항    */
/*-----------------------------*/
.notice-view__top {
  padding-bottom: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}

.notice-view__content {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}

/*-----------------------------*/
/*    고객센터    */
/*-----------------------------*/
.cs-center__content .unit-partner-grid-wrapper {
  gap: 10px;
}

/*-----------------------------*/
/*   앱사용가이드    */
/*-----------------------------*/
.app-guide__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 0;
  text-align: center;
}
.app-guide__section:nth-child(1) {
  padding-top: 0;
}
.app-guide__section:last-child {
  padding-bottom: 48px;
}
.app-guide__section .text-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
.app-guide__section .text-box img {
  display: block;
  width: 100%;
  height: auto;
}
.app-guide__section .text-box .title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.app-guide__section .text-box .text {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.app-guide__section .text-box .step {
  background-color: var(--color-fg-neutral-solid, #222832);
  color: #ffffff;
  border-radius: 100px;
  padding: 4px 10px;
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}

/*-----------------------------*/
/*   금융소비자보호    */
/*-----------------------------*/
.fcp__content .email {
  color: var(--color-fg-accent-blue-solid, #3d87ff);
  text-decoration: underline;
}
.fcp__news-list .list-component {
  border-bottom: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.fcp__news-list .list-component:nth-last-child(1) {
  border-bottom: none;
}

/*-----------------------------*/
/*   신문고    */
/*-----------------------------*/
.report-center__section:not(:last-child) {
  margin-bottom: 40px;
}
.report-center__agree-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}
.report-center__agree-wrap .radio__box {
  width: fit-content;
}

/*-----------------------------*/
/*  소득공제    */
/*-----------------------------*/
.income-deduction__table-unit {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-r-weight, 400);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.income-deduction__table {
  padding: 0 16px;
}
.income-deduction__table .checkbox__box {
  width: 22px;
  height: 23px;
  line-height: 1;
  padding-left: 1px;
}
.income-deduction__title-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.income-deduction__title-buttons .tab-component {
  flex-grow: 1;
}

/*-----------------------------*/
/*  금융소비자 보호 /fcp-protection    */
/*-----------------------------*/
.fcp-protection__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.fcp-protection__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background-color: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
  border-radius: 12px;
  padding: 20px 16px;
}
.fcp-protection__brand {
  text-align: center;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.fcp-protection__detail-wrap {
  display: flex;
  justify-content: center;
  height: calc(100vh - 54px);
}
.fcp-protection__detail-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/*-----------------------------*/
/* 외부제휴사 접속시 페이지       */
/*-----------------------------*/
body:has(.external-affiliate-intro) #topNavigation .left__con .top-navigation__item {
  margin-left: 18px;
  width: 138px;
}
body:has(.external-affiliate-intro) #topNavigation .right__con .top-navigation__item:first-child {
  width: fit-content;
  gap: 2px;
  padding: 0 8px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
body:has(.external-affiliate-intro) #topNavigation .right__con .top-navigation__item:first-child .top-navigation__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/*-----------------------------*/
/* 앱다운로드유도 페이지          */
/*-----------------------------*/
body:has(.app-download-gate) {
  height: 100dvh;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  overflow: hidden;
}

.app-download-gate {
  position: relative;
  padding-bottom: var(--bottom-button-height) !important;
  height: calc(100dvh - var(--bottom-button-height));
}
.app-download-gate .full-container {
  height: 100dvh;
  padding-bottom: 0;
}
.app-download-gate .spacing--xl {
  height: 2.8436dvh;
  max-width: 47.04px;
}
.app-download-gate .gate__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: calc(60.1dvh - 70px);
  padding-top: min(54px, 13.846vw);
}
.app-download-gate .gate__logo {
  width: 40.25vw;
  max-width: 308px;
  margin: 0 auto;
  margin-bottom: min(39.2px, 5.1282vw);
}
@media (orientation: landscape) {
  .app-download-gate .gate__logo {
    width: 175px;
  }
}
.app-download-gate .gate__logo img {
  width: 100%;
}
.app-download-gate .gate__title {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
  font-size: min(47px, 6.15vw);
}
@media (orientation: landscape) {
  .app-download-gate .gate__title {
    font-size: var(--font-heading-3-size, 1.5rem);
    font-weight: var(--font-heading-3-weight, 600);
    line-height: var(--font-heading-3-line-height, 1.4);
    letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
  }
}
.app-download-gate .gate__desc {
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  font-size: min(31.2px, 4.1vw);
  margin-top: min(126px, 1.538vw);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
@media (orientation: landscape) {
  .app-download-gate .gate__desc {
    font-size: var(--font-body-2-size, 1rem);
    font-weight: var(--font-body-2-m-weight, 500);
    line-height: var(--font-body-2-line-height, 1.5);
    letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
  }
}
.app-download-gate .gate__img-wrap {
  position: fixed;
  left: 50%;
  bottom: 0;
  margin-bottom: var(--bottom-button-height);
  height: 39.9dvh;
  aspect-ratio: 224/308;
  transform: translateX(-50%);
}
.app-download-gate .gate__img-wrap img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: contain;
}
.app-download-gate .bottom-button {
  background: transparent;
}
.app-download-gate .bottom-button:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  z-index: -1;
}
@media screen and (aspect-ratio: 344/882) {
  .app-download-gate .gate__title-wrap {
    height: calc(64.1dvh - 70px);
  }
  .app-download-gate .gate__img-wrap {
    height: 35.9dvh;
  }
}

/*-----------------------------*/
/*    환경설정 페이지 스타일    */
/*-----------------------------*/
.cm-setting__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm-setting__logint-history--list {
  padding: 16px 0;
}
.cm-setting__logint-history--item {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.cm-setting__logint-history--item + .cm-setting__logint-history--item {
  margin-top: 16px;
}
.cm-setting__logint-history--item:last-child {
  border-bottom: none;
}
.cm-setting__secure .unit-list__description-box {
  margin-top: 12px;
}
.cm-setting__secure .btn {
  display: inline-flex;
  margin-top: 12px;
}
.cm-setting__notification-checkbox {
  padding: 12px 20px 20px;
  border-radius: 10px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.cm-setting__notification-checkbox .checkbox-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
}
.cm-setting__notification-checkbox .checkbox-label .label {
  flex-shrink: 0;
}
.cm-setting__notification-checkbox .btn {
  margin-top: 16px;
}
.cm-setting__notification-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.cm-setting__notification-mute .unit-list__setting[data-type=toggle] {
  padding-top: 0;
}
.cm-setting__notification .unit-list__description-box {
  margin-top: 0;
}
.cm-setting__notification .unit-list__description-box .btn-txt {
  display: inline-flex;
  margin-top: 10px;
}
.cm-setting__notification .unit-list__description-box + .unit-list__description-box {
  margin-top: 12px;
}
.cm-setting__pop-top .unit-list__setting[data-type=toggle] {
  padding-bottom: 4px;
}
.cm-setting__honey-top .unit-list__setting[data-type=toggle] {
  padding-bottom: 4px;
}
.cm-setting__moalock-top .moalock__toggle-top-item .unit-list__setting {
  padding-bottom: 4px;
}
.cm-setting__moalock-top .moalock__toggle-top-item .unit-list__setting .unit-list__setting-label {
  display: none;
}
.cm-setting__moalock-top .moalock__toggle-top-item .unit-list__setting:has(.toggle-input:checked) {
  padding-bottom: 20px;
}
.cm-setting__moalock-top .moalock__toggle-top-item .unit-list__setting:has(.toggle-input:checked) .unit-list__setting-label {
  display: flex;
}
.cm-setting__moalock-top .moalock__toggle-item {
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.cm-setting__moalock-form {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.cm-setting__live-box {
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.cm-setting__live-box--item {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cm-setting__live-box--text {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.cm-setting__live-box--button {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  z-index: 9;
  position: relative;
}
.cm-setting__live-box--button svg {
  width: 100%;
  height: 100%;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.cm-setting__live-box--button::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.cm-setting__live-box--button::before {
  z-index: 9;
}
.cm-setting__live-box .checkbox__box {
  padding: 13px 0;
}
.cm-setting__app-first {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cm-setting__app-first-item {
  width: calc(50% - 10px / 2);
}
.cm-setting__app-first-item .img-box {
  border-radius: 10px;
  overflow: hidden;
}
.cm-setting__app-first-item .img-box img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.cm-setting__app-first-item .radio__box {
  padding: 13px 0;
}

/*------------------------------*/
/* 결제화면 - 포인트 사용순서 설정  */
/* 251205 - 기존 멤버십에서 이관   */
/*------------------------------*/
.payment-point-index .title-component__desc {
  margin-top: 10px;
}
.payment-point-index__tit-box {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.payment-point-index .list-component__grab-handle {
  position: relative;
  touch-action: none !important;
  cursor: grab;
}
.payment-point-index .list-component__grab-handle::after {
  content: "";
  position: relative;
  top: -32px;
  left: -12px;
  display: block;
  min-width: 44px;
  min-height: 44px;
  width: fit-content;
  height: fit-content;
}
.payment-point-index .list-component__grab-handle:active {
  cursor: grabbing;
}
.payment-point__content .hidden {
  display: none;
}
.payment-point__content__header {
  position: relative;
}
.payment-point__content__header .tooltip {
  position: absolute;
  top: 4px;
  right: 0;
}

/* 사용결제 - 엘포인트 사용 */
.payment-usage__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 2px;
}
.payment-usage__header--info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.payment-usage__header--price {
  font-size: var(--font-heading-2-size, 1.75rem);
  font-weight: var(--font-heading-2-weight, 600);
  line-height: var(--font-heading-2-line-height, 1.4);
  letter-spacing: var(--font-heading-2-letter-spacing, -0.005em);
}
.payment-usage__header .brand {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.payment-usage__header .txt {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.payment-usage__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.payment-usage__event-info {
  padding: 20px;
  border-radius: 10px;
  background-color: var(--color-bg-brand-weak, #fff0f1);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.payment-usage__point-info {
  padding: 20px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
}
.payment-usage__point-info .readonly input {
  pointer-events: none;
  border-bottom: none;
}
.payment-usage__point-info .input-wrapper:has(.unit-list__point) .input__wrap input {
  pointer-events: none;
  border-bottom: none;
}
.payment-usage__point-info .input-wrapper:has(.unit-list__point) .unit-list__point + .unit-list__point {
  margin-top: 8px;
}
.payment-usage__point-info .element-list-text__text-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: visible;
}
.payment-usage__point-info .element-list-text__text-wrap > * {
  height: 1.4em;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.payment-usage__point-info .unit-list__point.add-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.payment-usage__point-info .unit-list__point.add-account > * {
  flex-shrink: 0;
  width: fit-content;
}
.payment-usage__point-info .unit-list__point .add-account__icon-wrap {
  position: relative;
  width: 24px;
  height: 24px;
}
.payment-usage__point-info .unit-list__point .add-account__icon-wrap svg, .payment-usage__point-info .unit-list__point .add-account__icon-wrap i {
  width: 100%;
  height: 100%;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.payment-usage__point-info .unit-list__point .add-account__icon-wrap .tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((100% + 8px) * -1));
}
.payment-usage__point-info .unit-list__point .add-account__txt {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.payment-usage .tooltip__wrapper {
  position: relative;
  height: 1.4em;
  display: flex;
  align-items: center;
}
.payment-usage .tooltip__wrapper .tooltip {
  position: absolute;
}
.payment-usage .tooltip__wrapper.info .tooltip {
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((100% + 8px) * -1));
}
.payment-usage .tooltip__wrapper.arrow .tooltip {
  top: 0;
  right: -4px;
  transform: translateY(calc((100% + 8px) * -1));
}
.payment-usage .tooltip {
  text-align: center;
}
.payment-usage .icon__info {
  position: relative;
  width: 16px;
  height: 16px;
  color: var(--color-fg-brand-solid, #fb1822);
  margin: 4px 0;
}
.payment-usage .icon__info svg {
  width: 100%;
  height: 100%;
}
.payment-usage .icon__info .tooltip {
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}
.payment-usage .icon__arrow {
  position: relative;
  width: 12px;
  height: 12px;
}

/*사용결제 - 바텀시트*/
.payment-usage__bottom-sheet.select-account .list-component__tit {
  display: flex;
  align-items: center;
  gap: 4px;
}
.payment-usage__bottom-sheet.select-account .list-component__tit .icon-check {
  display: none;
  width: 16px;
  height: 16px;
}
.payment-usage__bottom-sheet.select-account .list-component__tit .icon-check svg {
  width: 100%;
  height: 100%;
}
.payment-usage__bottom-sheet.select-account .list-component[data-selected=true] .list-component__tit {
  color: var(--color-fg-brand-solid, #fb1822);
}
.payment-usage__bottom-sheet.select-account .list-component[data-selected=true] .list-component__tit .icon-check {
  display: block;
}
.payment-usage__bottom-sheet.select-account-confirm .list-component__container {
  padding: 12px 16px;
  border-radius: 10px;
}
.payment-usage__bottom-sheet.select-account-confirm .list-component {
  padding: 0;
}

@media screen and (max-height: 667px) {
  .common-queue .cm-page[data-type=full] .cm-page__main {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.common-queue__content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.common-queue__num {
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
}
.common-queue__progress-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.common-queue__progress-box {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: var(--color-bg-banner-default-gray-50, rgba(5, 55, 88, 0.06));
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 4px;
}
.common-queue__progress-box::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  top: 0;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: 9999px;
  background-color: red;
  transition: width 0.3s ease-in-out;
}
.common-queue__progress-txt {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
  text-align: center;
}
.common-queue__bottom-button__text {
  padding-bottom: 24px;
  color: var(--color-fg-neutral-subtle, #5f646c);
  text-align: center;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}

.sp-footer__container .spacing--5xl.bg-gray {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.sp-footer__container .accordion__icon {
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.sp-footer__wrapper {
  padding-bottom: 128px;
}
.sp-footer__content {
  padding-top: 16px;
}
.sp-footer__content-txt {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.sp-footer__content-language {
  margin-top: 20px;
}
.sp-footer__content-language button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  padding: 10px 0;
  width: 100%;
  border-bottom: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.sp-footer__content-language i, .sp-footer__content-language img {
  width: 16px;
  height: 16px;
}
.sp-footer__content-menu {
  display: flex;
  align-items: center;
  color: var(--color-fg-neutral-subtle, #5f646c);
  margin-top: 18px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.sp-footer__content-menu b {
  color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.sp-footer__content-menu.mw {
  gap: 0;
  margin-top: 10px;
}
@media screen and (max-width: 360px) {
  .sp-footer__content-menu.mw, .sp-footer__content-menu.mw b {
    font-size: 12px;
  }
}
.sp-footer__content-menu > * {
  position: relative;
  padding: 14px 10px;
}
.sp-footer__content-menu > *:first-child {
  padding-left: 0;
}
.sp-footer__content-menu > *:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: block;
  width: 1px;
  height: 14px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.sp-footer__list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.sp-footer__list::first-child {
  margin-top: 0;
}
.sp-footer__item {
  position: relative;
}

#lpoint-card .element__align-center {
  margin: 0 auto;
  width: fit-content;
}
#lpoint-card .element__text-center {
  text-align: center;
}
#lpoint-card .element__box {
  padding: 20px; /*기본 사이즈 m*/
  border-radius: 10px;
}
#lpoint-card .element__box[data-padding=s] {
  padding: 12px 20px;
}
#lpoint-card .element__box[data-padding=l] {
  padding: 24px 32px;
}
#lpoint-card .element__box[data-padding=xxs] {
  padding: 4px 20px;
}
#lpoint-card .element__box--outlined {
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
#lpoint-card .element__box--gray {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
#lpoint-card .bottom-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
#lpoint-card .bottom-btn-wrap > *:not(:last-child) {
  position: relative;
  padding-right: 12px;
  margin-right: 12px;
}
#lpoint-card .bottom-btn-wrap > *:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: block;
  width: 1px;
  height: 0.6em;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}

#common-event [data-gap="3xl"],
#common-auth [data-gap="3xl"],
#common-coupon [data-gap="3xl"] {
  gap: 32px;
}
#common-event [data-gap=xl],
#common-auth [data-gap=xl],
#common-coupon [data-gap=xl] {
  gap: 24px;
}
#common-event [data-gap=m],
#common-auth [data-gap=m],
#common-coupon [data-gap=m] {
  gap: 16px;
}
#common-event [data-gap=s],
#common-auth [data-gap=s],
#common-coupon [data-gap=s] {
  gap: 12px;
}
#common-event [data-gap=xs],
#common-auth [data-gap=xs],
#common-coupon [data-gap=xs] {
  gap: 10px;
}
#common-event [data-gap="2xs"],
#common-auth [data-gap="2xs"],
#common-coupon [data-gap="2xs"] {
  gap: 8px;
}
#common-event [data-gap="4xs"],
#common-auth [data-gap="4xs"],
#common-coupon [data-gap="4xs"] {
  gap: 4px;
}
#common-event .box,
#common-auth .box,
#common-coupon .box {
  display: block;
  border-radius: 16px;
  background-color: #ffffff;
  color: #222832;
}
#common-event .box[data-radius=none],
#common-auth .box[data-radius=none],
#common-coupon .box[data-radius=none] {
  border-radius: 0;
}
#common-event .box[data-radius=s],
#common-auth .box[data-radius=s],
#common-coupon .box[data-radius=s] {
  border-radius: 8px;
}
#common-event .box[data-padding=m],
#common-auth .box[data-padding=m],
#common-coupon .box[data-padding=m] {
  padding: 16px 16px;
}
#common-event .box[data-padding=l],
#common-auth .box[data-padding=l],
#common-coupon .box[data-padding=l] {
  padding: 20px 20px;
}
#common-event .box[data-padding=ls],
#common-auth .box[data-padding=ls],
#common-coupon .box[data-padding=ls] {
  padding: 20px 12px;
}
#common-event .box[data-padding=sm],
#common-auth .box[data-padding=sm],
#common-coupon .box[data-padding=sm] {
  padding: 12px 16px;
}
#common-event .box[data-padding=sl],
#common-auth .box[data-padding=sl],
#common-coupon .box[data-padding=sl] {
  padding: 12px 20px;
}
#common-event .box[data-padding=sxs],
#common-auth .box[data-padding=sxs],
#common-coupon .box[data-padding=sxs] {
  padding: 10px 12px;
}
#common-event .box[data-type=gray-bg],
#common-auth .box[data-type=gray-bg],
#common-coupon .box[data-type=gray-bg] {
  background-color: #f0f3f5;
}
#common-event .box[data-type=border],
#common-auth .box[data-type=border],
#common-coupon .box[data-type=border] {
  border: 1px solid #dee1e4;
}
#common-event .box-between,
#common-auth .box-between,
#common-coupon .box-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#common-event .box-between.flex > *,
#common-auth .box-between.flex > *,
#common-coupon .box-between.flex > * {
  flex: 1;
}
#common-event .box-flex-start,
#common-auth .box-flex-start,
#common-coupon .box-flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
#common-event .box-direction-column,
#common-auth .box-direction-column,
#common-coupon .box-direction-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
#common-event .box-direction-column .unit-list__point,
#common-auth .box-direction-column .unit-list__point,
#common-coupon .box-direction-column .unit-list__point {
  width: 100%;
}
#common-event .spacing-wrap .spacing--xs,
#common-auth .spacing-wrap .spacing--xs,
#common-coupon .spacing-wrap .spacing--xs {
  background-color: #f0f3f5;
}
#common-event .hidden,
#common-auth .hidden,
#common-coupon .hidden {
  display: none !important;
}
#common-event .text[data-color=gray],
#common-auth .text[data-color=gray],
#common-coupon .text[data-color=gray] {
  color: var(--color-fg-neutral-subtle, #5f646c);
}
#common-event .text[data-color=red],
#common-auth .text[data-color=red],
#common-coupon .text[data-color=red] {
  color: var(--color-fg-brand-solid, #fb1822);
}
#common-event .text[data-weight=semibold],
#common-auth .text[data-weight=semibold],
#common-coupon .text[data-weight=semibold] {
  font-weight: 500 !important;
}
#common-event .info-icon,
#common-auth .info-icon,
#common-coupon .info-icon {
  width: 16px;
  height: 16px;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
#common-event .info-icon svg,
#common-auth .info-icon svg,
#common-coupon .info-icon svg {
  width: 100%;
  height: 100%;
}

.bottom-sheet__body:has(.welcome-gift__bottom-sheet .info) {
  padding-right: 0;
  padding-left: 0;
  background-color: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
}

.welcome-gift__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.welcome-gift__bottom-sheet .info,
.welcome-gift__bottom-sheet .unit-info__box {
  background-color: #F3F4F6;
}
.welcome-gift__bottom-sheet .unit-info__box {
  padding: 16px;
  background-color: #F3F4F6;
  border-radius: 10px;
}