/* base S */
:root {
    --main-bg-gradient: linear-gradient(90deg,
        var(--gray-50) 0%,
        #e1d8cd 63.5%,
        var(--gray-100) 100%);
    --header-high: 80px;
    --header-high-mobile: 64px;
    --header-high-expanded: 108px;
    --header-bg: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%),
      rgba(255, 255, 255, 0.5);
    --header-blur: blur(40px);
    --input-high: 72px;
    --form-input-high: 48px;
    --btn-l-high: 56px;
    --btn-s-high: 36px;
    --contents: 100%;
    --drag-tooltip: 72px;
    --upload-content-high: 620px;
    --upload-inc-high: 72px;
    --footer-high: 64px;    
  
    /* Color */
    --primary-color: var(--blue-500);
    /* 주요 컬러 */
    --secondary-color: var(--orange-500);
    /* 보조 컬러 */
  
    /* Trust Violet */
    --blue-900: #203C6B;
    --blue-800: #2A4F8C;
    --blue-700: #3766B5;
    --blue-600: #4682E8;
    --blue-500: #4D8FFF;
    --blue-400: #71A5FF;
    --blue-300: #88B4FF;
    --blue-200: #ADCBFF;
    --blue-100: #C8DCFF;
    --blue-50: #EDF4FF;
  
    /* Warm Earth */
    --orange-900: #6A340C;
    --orange-800: #8B4410;
    --orange-700: #B35815;
    --orange-600: #E5711A;
    --orange-500: #FC7C1D;
    --orange-400: #FD964A;
    --orange-300: #FDA768;
    --orange-200: #FEC397;
    --orange-100: #FED6B9;
    --orange-50: #FFF2E8;
  
    /* Grayscale */
    --gray-900: #1b1d1f;
    --gray-800: #26282b;
    --gray-600: #454c53;
    --gray-500: #72787f;
    --gray-400: #9ea4aa;
    --gray-200: #c9cdd2;
    --gray-100: #e8ebed;
    --gray-50: #f7f8f9;
  
    /* Neutral */
    --black: #000000;
    --white: #ffffff;
  
    /* Semantic */
    --success: #3e7bfd;
    --success-100: #F4F7FF;
    --warning: #ff8539;
    --error: #f6503b;
  
    /* Opinion */
    --opinion-reviewing: #f96a6a;
    --opinion-completed: #41b75b;

    /* gradient */
    --gradient-bkbu:linear-gradient(to right, #203c6b, #4d8fff, #203c6b);
  
    /* Text size (1rem 기준) */
    --H1: 96px;
    /* 6rem */
    --H2: 64px;
    /* 4rem */
    --H3: 48px;
    /* 3rem */
    --H4: 32px;
    /* 2rem */
    --H5: 24px;
    /* 1.5rem */
    --H6: 20px;
    /* 1.25rem */
    --Subtitle-1: 18px;
    /* 1.125rem */
    --Subtitle-2: 16px;
    /* 1rem */
    --body-1: 16px;
    /* 1rem */
    --body-2: 14px;
    /* .875rem */
    --Caption: 12px;
    /* .75rem */
    --Button: 16px;
    /* 1rem */
  
    --font-size-xxxl: 24px;
    /* 1.5rem */
    --font-size-xxl: 22px;
    /* 1.375rem */
    --font-size-xl: 20px;
    /* 1.25rem */
    --font-size-l: 18px;
    /* 1.125rem */
    --font-size-m: 16px;
    /* 1rem */
    --font-size-s: 14px;
    /* .875rem */
    --font-size-xs: 12px;
    /* .75rem */
    --font-size-xxs: 11px;
    /* .6875rem */
    --font-size-xxxs: 10px;
    /* .625rem */
  
    /* Text weight */
    --T-black: 900;
    --bold: 700;
    --semi-bold: 600;
    --medium: 500;
    --regular: 400;
    --light: 300;
  
    /* Font families */
    --font-primary: 'Pretendard';
    --font-secondary: 'TTHakgyoansimRikodeoR';
  
    /* Line Heights */
    --line-height-tight: 120%;
    /* H1~H6, subtitle, button */
    --line-height-relaxed: 140%;
    /* 기본 문장 */
    --line-height-loose: 160%;
    /* 3줄 이상 문단 */
  
    /* Radius */
    --radius-2xl: 64px;
    --radius-xl: 48px;
    --radius-l: 40px;
    --radius-m: 24px;
    --radius-ms: 20px;
    --radius-s: 16px;
    --radius-xs: 8px;
    --radius-2xs: 4px;
  
    /* Spacing */
    --spacing-6xl: 140px;
    --spacing-5xl: 120px;
    --spacing-4xl: 96px;
    --spacing-3xl: 80px;
    --spacing-2xl: 64px;
    --spacing-xl: 56px;
    --spacing-l: 48px;
    --spacing-lm: 40px;
    --spacing-ml: 32px;
    --spacing-m: 24px;
    --spacing-ms: 20px;
    --spacing-s: 16px;
    --spacing-xs: 8px;
    --spacing-2xs: 4px;
  
    /* lnb gap */
    --lnb-gap: var(--spacing-ms);
  
    --point-gradient: linear-gradient(90deg,
        var(--violet-900) 0%,
        var(--violet-500) 63.5%,
        var(--violet-900) 100%);
    --basic-transition: 0.3s ease-out;
    --spring-transition: 0.5s cubic-bezier(0.25, 0.99, 0.24, 1);
    --spring-transition-soft: 0.2s cubic-bezier(0.74, 0.01, 0.26, 0.99);
    --ease1: cubic-bezier(0.25, 0.99, 0.24, 1);
    --box-shadow-100: inset 0 0 0 1px var(--white);
    --basic-pattern: repeating-linear-gradient(to right,
        rgba(244, 242, 240, 0.1) 0px,
        rgba(244, 242, 240, 0.1) 1px,
        transparent 1px,
        transparent 8px);

    /* animation */
    --hd-txt: textEffect 0.6s both cubic-bezier(0, 0, 0.13, 0.99);
  }
  
  @keyframes refresh {
    0% {
      transform: translateY(-8px);
      opacity: 0;
    }
  
    100% {
      transform: translateY(0px);
      opacity: 1;
    }
  }
  
  @keyframes refresh-r {
    0% {
      transform: translateX(8px);
      opacity: 0;
    }
  
    100% {
      transform: translateX(0px);
      opacity: 1;
    }
  }
  
  @keyframes refresh-l {
    0% {
      transform: translateX(-16px);
      opacity: 0;
    }
  
    100% {
      transform: translateX(0px);
      opacity: 1;
    }
  }
  
  @keyframes refresh-bt {
    0% {
      transform: translateY(8px);
      opacity: 0;
    }
  
    100% {
      transform: translateY(0px);
      opacity: 1;
    }
  }
  
  @keyframes refresh-scale {
    0% {
      transform: translateY(8px) scale(1.1);
      opacity: 0;
    }
  
    100% {
      transform: translateY(0px) scale(1);
      opacity: 1;
    }
  }
  @keyframes textEffect {

    0% {
        opacity: 0;
        transform: translateY(16px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}
  
  @media (max-width:1199px) {
    :root {
      --header-high: 72px;
    }
  }
  @media (max-width:767px) {
    :root {
      --header-high: 64px;
    }
  }
  

  /* button */

.btn-box {
  display: flex;
  gap: var(--radius-xs);
  justify-content: center;
}

.btn-box .btn {
  padding: 0 var(--spacing-s);
  border-radius: var(--radius-xs);
  background-color: var(--gray-600);
  overflow: hidden;
  transition: var(--spring-transition);
  min-width: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

.btn-box .btn-name {
  font-size: var(--font-size-s);
  font-weight: var(--bold);
  color: var(--white);
  position: relative;
  transition: var(--spring-transition);
  transform-origin: 100% 0%;
  display: flex;
  height: var(--btn-s-high);
  align-items: center;
}

.btn-box .btn-name:before {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  height: var(--btn-s-high);
  align-items: center;
}

.btn-box .btn:hover {
  background: var(--gray-400);
}

.btn-box .btn:hover span {
  transform: translateY(-100%);
}

.btn-box .btn:active {
  background: var(--gray-400);
  position: relative;
  top: 1px;
  left: 1px;
}

.btn-box .btn:active span {
  transform: translateY(-100%);
}


.btn-box .btn.btn-success {}

.btn-box .btn.btn-success:hover {
  background: var(--success);
}

.btn-box .btn.btn-default {
  background: var(--gray-400);
}

.btn-box .btn.btn-default:hover {
  background: var(--gray-600);
}

.btn-box .btn.btn-error {
  background: var(--gray-400);
}

.btn-box .btn.btn-error:hover {
  background: var(--error);
}

.btn-box .btn.btn-warning {
  background: var(--gray-400);
}

.btn-box .btn.btn-warning:hover {
  background: var(--warning);
}
.btn-box.btn-right {

}
.btn-box.btn-size-l {}

.btn-box.btn-size-l .btn {
  padding: 0 var(--spacing-s);
  border-radius: var(--radius-s);
  min-width: 96px;
}

.btn-box.btn-size-l .btn-name {
  height: var(--btn-l-high);
  font-size: var(--font-size-m);
}

.btn-box.btn-size-l .btn-name:before {
  height: var(--btn-l-high);
}



  /* base E */

  /* loading S */
.loading_wrap {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
.loading_wrap .loading_box {
    width: 100%;
    max-width: 520px;
    height: 360px;
    background: #fff;
    position: fixed;
    z-index: 9999;
    border-radius: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    animation: load_view1 1s 0s forwards cubic-bezier(0.19, 1, 0.22, 1);
    margin-top:-20px;
    gap: 16px;
    opacity: 0;
    overflow: hidden;
}

#animation-container {
    /* width:100%;
    max-width:180px; */
}
.loading_wrap .loading_box .load_txt_box {
    display:flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}
.loading_wrap .loading_box .load_txt_box p {
    font-size:24px;
    color: var(--gray-600);
    font-weight:700;
    margin-bottom: 0;
}
.loading_wrap .loading_box .load_txt_box span {
    color: var(--gray-400);
}
.loading_wrap .loading_dim_box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #64758d6b;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    animation: load_view3 0.3s 0s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
@keyframes load_view1 {
    0% {
        margin-top:-20px;
        opacity: 0;
    }
    100% {
        margin-top:0px;
        opacity: 1;
    }
}
@keyframes load_view2 {
    0% {
        margin-top:20px;
        opacity: 0;
    }
    100% {
        margin-top:40px;
        opacity: 1;
    }
}
@keyframes load_view3 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width:564px) {
    .loading_wrap .loading_box {
        max-width:320px;
        height:320px;
    }
}

.runner-img {
    width: 100%;
    max-width:140px;
    animation: bounce 0.38s ease-in-out infinite alternate;
    transform-origin: bottom center;
}
@keyframes bounce {
    0%   { transform: translateY(0px) scaleY(1) scaleX(1); }
    50%  { transform: translateY(-18px) scaleY(1.04) scaleX(0.96); }
    100% { transform: translateY(-3px) scaleY(0.97) scaleX(1.03); }
}
/* loading E */


/* 임시 사이드 배너 */


@media (max-width: 1648px) {
    .user-signup-banner {
        display: none;
    }
}


@media (max-width:768px) {
/* 버튼이 원래 있을 위치의 스타일 */
.button-wrapper {
  transition: all 0.3s ease;
}

/* 스크롤 중 화면 하단에 고정될 때의 스타일 */
.button-wrapper.is-floating {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff69;
  padding: 8px;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
  z-index: 999;
  border-top: 1px solid #eee;
  backdrop-filter: blur(5px);
}

/* 고정되었을 때 내부 버튼 정렬 (필요시) */
.button-wrapper.is-floating .btn-box {
  max-width: 1200px; /* 실제 사이트 컨텐츠 너비에 맞게 조절 */
  margin: 0 auto;
}
}