/* --- Kjc 수정: 스패로우의 theme.css에서 body 기본 글꼴과 색상 제거!
  body {
    font-family: var(--sparrow-body-font-family);
    color: var(--sparrow-body-color);
  }
--- */

/* --- Kjc 수정: 스패로우의 theme.css에서 Accordion 수정!
  .accordion-button:not(.collapsed) {
    background-color: var(--sparrow-accordion-active-bg); // 제거함!
  }
--- */

/* --- Kjc 추가: 스패로우 theme.css에서 navbar-nav-scroll: max-height: var(--sparrow-scroll-height, 100vh); 추가!
  .navbar-nav-scroll_100 {
    max-height: var(--sparrow-scroll-height, 100vh);
    overflow-y: auto;
  }
--- */

/* --- Kjc 수정: 스패로우의 theme.css에서 .btn 부분 제거하여 수정!
  .btn { text-transform: uppercase; } ← 제거한 부분
  .fancy-dropdown-title { text-transform: uppercase; }
  .initialism { text-transform: uppercase; }
--- */  

/* --- 스크롤톱/다운 버튼
--- */
.scroll-to-top { /* 스크롤톱 버튼 */
  z-index: 1098; position: fixed; right: 5rem; bottom: 0.5rem; 
  width: 2.5rem; height: 2.5rem; text-align: center;
  color: #fff; background: rgba(164, 165, 173, 0.5); line-height: 46px;
}
  
.scroll-to-bottom { /* 스크롤다운 버튼 */
  z-index: 1098; position: fixed; left: 0.5rem; top: 0.5rem; 
  width: 2.5rem; height: 2.5rem; text-align: center;
  color: #fff; background: rgba(164, 165, 173, 0.5); line-height: 46px;
}

.scroll-to-top:focus, .scroll-to-top:hover {
    color: white;
} .scroll-to-top:hover {
    background: #5a5c69;
} .scroll-to-top i {
    font-weight: 900;
}

.scroll-to-bottom:focus, .scroll-to-bottom:hover {
    color: white;
} .scroll-to-bottom:hover {
    background: #a2a4b1;
} .scroll-to-bottom i {
    font-weight: 900;
}

/* --- 상단 내비게이션바에서의 스크롤톱/다운 버튼 위치
--- */
.scroll-to-top2 { /* 스크롤톱 버튼 */
    z-index: 1098; position: fixed; right: 0.5rem; bottom: 0.5rem; 
    width: 2.5rem; height: 2.5rem; text-align: center;
    color: #fff; background: rgba(164, 165, 173, 0.5); line-height: 46px;
}
    
.scroll-to-bottom2 { /* 스크롤다운 버튼 */
    z-index: 1098; position: fixed; left: 0.5rem; top: 3.5rem; 
    width: 2.5rem; height: 2.5rem; text-align: center;
    color: #fff; background: rgba(164, 165, 173, 0.5); line-height: 46px;
}

.scroll-to-top2:focus, .scroll-to-top2:hover {
    color: white;
} .scroll-to-top2:hover {
    background: #5a5c69;
} .scroll-to-top2 i {
    font-weight: 900;
}

.scroll-to-bottom2:focus, .scroll-to-bottom2:hover {
    color: white;
} .scroll-to-bottom2:hover {
    background: #a2a4b1;
} .scroll-to-bottom2 i {
    font-weight: 900;
}  
  
/* ---------------------------------- 
  jc 실습용 예제상자 스타일들
--- */
.ex_box {
  margin: 12px 0 24px; padding: 16px;
  border: 1px solid rgb(213, 219, 187);
}

.inner_calc_box {
  margin: 0 auto; padding: 10px;
  width: calc(100% - 20px);
  color: white;
  background-color: grey
}

.vue-demo_ex {
  margin-top: 1em; margin-bottom: 40px; padding: 20px 30px;
  user-select: none; overflow-x: auto;
  border: 1px solid #eee; border-radius: 2px;
}

.box_outer_border {
  padding: 10px;
  border: 5px solid gray;
  box-shadow: 5px 5px 10px 5px gray;
}

/* 예제 상자 및 가로선 스타일 사용자 정의 */
.thick_3px { /* 3px 굵기의 hr 가로선 */
  border-width: 3px;
} .thick_2px { /* 2px 굵기의 hr 가로선 */
  border-width: 2px;
}

/* [Sticky 고정] */
.h2-sticky {
  position: sticky; top: 0; left: 0; /* Sticky 고정이 설정된 뷰포트 기준 오프셋 좌표 */
  margin: 0 auto; padding: 1rem;
  background-color: transparent;
}

.h4-sticky {
  position: sticky; top: 0; left: 0; /* Sticky 고정이 설정된 뷰포트 기준 오프셋 좌표 */
  background-color: transparent;
}

/* -----------
  [Kjc 추가]
--- */
/* [이미지를 둘러싼 원형 텍스트 배치] */
    .s_circle { 
        width: 100px; height: 100px; border-radius: 50%; background-color: #77b597;
        float: left; margin-right: 1em; /* 원 주변 요소와의 마진 간격 */
        shape-outside: circle(); /* 바깥쪽 경계 모양 설정 */
    } .s_circle_right {
        width: 100px; height: 100px; border-radius: 50%; background-color: #77b597;
        float: right; margin-left: 1em; /* 원 주변 요소와의 마진 간격 */
        shape-outside: circle(); /* 바깥쪽 경계 모양 설정 */
    }

/* [그라디언트 배경] */
.bg-gradients { background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)); }

/* [뱃지 기울이기] */
.badge-rotate {
  position: absolute; left: 0; top: 1.8rem;
  padding: 0.25rem; padding-left: 3rem; padding-right: 3rem;
  transform: rotate(-45deg) translate(-30%, -50%);
  z-index: 1;
}

/* Kjc 점보트론 */    
.jumbotron { 
  padding: 2rem 1rem; margin-bottom: 1rem;
  background-color: rgba(200, 200, 200, 0.1);
  border-radius: 0.5rem;
} @media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
} .jumbotron-fluid {
  padding-right: 0; padding-left: 0; border-radius: 0;
}

/* hr 수정: border(0)와 opacity(0.25) */
hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border-width: 1px;
  opacity: 0.1;
}


/* ------------------------------
  Kjc 수정: Square의 .lift 수정함!
--- */
.lift {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
} .lift:hover, .lift:focus {
  box-shadow: 0 0.8125rem 1rem rgba(35, 35, 35, 0.15) !important;
  transform: translate3d(0, -3px, 0) !important; /* Square의 (0, -6px, 0)를 (0, -2px, 0)로 변경함! */
} .lift.shadow-sm:hover, .lift.shadow-sm:focus { /* 작은 그림자 */
  box-shadow: 0 0.5rem 0.5rem rgba(35, 35, 35, 0.1) !important;
} .lift.shadow-lg:hover, .lift.shadow-lg:focus { /* 큰 그림자 */
  box-shadow: 0 1.125rem 2rem rgba(35, 35, 35, 0.2) !important;
}

/* ------------------------------------------
  Kjc 아이콘붙은 A링크: .linkIconA, #linkIconA
--- */
a.linkIconA {
  background: url("../_img/external-link.svg") no-repeat 100% 0;
  background-size: 16px 16px;
  padding: 2px 16px 16px 4px;
  margin-right: 4px;
}

/* ------------------------------------------------
  Kjc 좌측 사이드바 메뉴 말아올림: .sidebar-h5Sticky
--- */
.sidebar-h5Sticky {
  position: sticky; top: 0; left: 0;
  margin: 0 0 1em;
  padding: 0.5em;
  color: white;
  background-color: rgba(255 255 255 / 0.9);
}

/* ---------------------------------
  Kjc ✓ 기호 스타일: .style-check2
--- */
.style-check2 li {
  position: relative; padding-left: 0.25rem; list-style-type: none;
} .style-check2 li:before {
  content: '✓';
  position: absolute; top: 0.0625rem; left: -1rem;
  width: 1rem; padding-right: 0.5rem; background-repeat: no-repeat;
  color: goldenrod;
}

/* ---------------------------------------------------------------
  Kjc 충돌 해결용: Sparrow의 border-opacity-# 수정, !important 추가
--- */
.border-opacity-10 { --sparrow-border-opacity: 0.1 !important; }
.border-opacity-25 { --sparrow-border-opacity: 0.25 !important; }
.border-opacity-50 { --sparrow-border-opacity: 0.5 !important; }
.border-opacity-75 { --sparrow-border-opacity: 0.75 !important; }
.border-opacity-100 { --sparrow-border-opacity: 1.0 !important; }


/* ------------------------------------------- 
  Kjc 수정: Syntax 구문의 세로 스크롤바를 위하여
--- */
pre {
  max-height: 450px;
}

/* --------------------------------------------------
  Kjc 추가 line-height 설정: .lh-lg는 line-height: 2;
--- */
.lh-lg22 { line-height: 2.2; }
.lh-lg25 { line-height: 2.5; }


/* ---------------------------------------------------- 
  추가 letter-spacing 설정: .ls는 0.04; .ls-2는 0.25;
--- */
.ls-1 { letter-spacing: 0.1em; }
.ls-15 { letter-spacing: 0.15em; }

/* 구글 Web 폰트 사용을 위한 Css 스타일 정의 */
.webfont_lead {
  font-family: 'Gaegu', cursive; /* 이름은 구글폰트 정보에서 가져온다 */
  font-size: 1.2em;
} .webfont_lead_0 {
    font-family: 'Gaegu', cursive;
}

/* 큰 문단 첫글자: .dropcap::first-letter */
.dropcap::first-letter {
  font-size: 3em; line-height: 0.92; margin-right: 0.375rem;
  float: left;
}
    
/* 문단 첫 글자 들여쓰기 */
.indent_2 { text-indent: 2%; }
.indent_2rem { text-indent: 2rem; }

/* 영문 첫 대문자 */
.first-capitalize { text-transform: capitalize; }

/* hr 관련: 짧은 가로선/숨기기 */
hr.hr-short_4 { width: 4rem; margin: 0 auto; }
hr.hr-short_4_start { width: 4rem; }

hr.hr-short_25 { width: 25%; margin: 0 auto; }
hr.hr-short_50 { width: 50%; margin: 0 auto; }

hr.hide { visibility: hidden; }

/* small, mark 클래스 추가 */
small, .small { font-size: 0.875em; }
mark, .mark { padding: 0.2em; background-color: #fcf8e3; }

/* Css 3) 좌/우 플로팅 설정 */
.floating-right { float: right; }
.floating-left { float: left; }

/* ---
  Square: root { .. }
--- */
:root {
    --bs-blue: #012545;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #e83e8c;
    --bs-red: #c7473f;
    --bs-orange: #fd7e14;
    --bs-yellow: #e1be5f;
    --bs-green: #60c39b;
    --bs-teal: #46c5af;
    --bs-cyan: #359bd0;
    --bs-white: #fff;
    --bs-black: #000;
    --bs-gray: #999999;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f9f9f9;
    --bs-gray-200: #eeeeee;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #c4c4c4;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #999999;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #232323;
    --bs-secondary: #da3458;
    --bs-success: #60c39b;
    --bs-info: #359bd0;
    --bs-warning: #e1be5f;
    --bs-danger: #c7473f;
    --bs-light: #f9f9f9;
    --bs-dark: #343a40;
    --bs-white: #fff;
    --bs-black: #000;
    --bs-gray: #999999;
    --bs-primary-rgb: 35, 35, 35;
    --bs-secondary-rgb: 218, 52, 88;
    --bs-success-rgb: 96, 195, 155;
    --bs-info-rgb: 53, 155, 208;
    --bs-warning-rgb: 225, 190, 95;
    --bs-danger-rgb: 199, 71, 63;
    --bs-light-rgb: 249, 249, 249;
    --bs-dark-rgb: 52, 58, 64;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-gray-rgb: 153, 153, 153;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 35, 35, 35;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1.125rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;
    --bs-body-color: #232323;
    --bs-body-bg: #fff;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.15625rem;
    --bs-border-radius-sm: 0.15625rem;
    --bs-border-radius-lg: 0.15625rem;
    --bs-border-radius-xl: 0.15625rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-link-color: #da3458;
    --bs-link-hover-color: #ca3051;
    --bs-code-color: #c7473f;
    --bs-highlight-bg: #f9f2df;
}

  
/* --- Square: a:hover 색상 */
a:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}
  
a:not([href]):not([class]), a:not([href]):not([class]):hover {
    color: inherit; text-decoration: none;
}
  
/* ---
  Square: 여러가지..
--- */
section { position: relative; }


/* Square: drop-caps > p */
.drop-caps p:first-of-type::first-letter {
    font-size: 3.4875rem;
    font-weight: 900;
    line-height: 0.8;
    float: left;
    padding: 9px 5px 0 0;
} .drop-caps p.lead:first-of-type::first-letter {
    font-size: 4.005984375rem;
}
  

/* --- Sb-pro: 추가 유틸리티들 1
--- */
.badge-counter { /* 뱃지 위치 관련 수정 */
  position: absolute; right: 0.5rem; margin-top: -0.9rem;
  transform: scale(0.8); transform-origin: top right;
}

i-feather {
  display: inline-flex ;
} i-feather svg {
  height: 100%; width: 100%;
  vertical-align: top;
}

.o-hidden { /* 숨김 유틸리티 */
  overflow: hidden !important;
}

/* --- 확장 음수마진
--- */
.m-n10 { margin: -6rem; }
.m-n15 { margin: -9rem; }
.mx-n10 { margin-right: -6rem; margin-left: -6rem; }
.mx-n15 { margin-right: -9rem; margin-left: -9rem; }
.my-n10 { margin-top: -6rem; margin-bottom: -6rem; }
.my-n15 { margin-top: -9rem; margin-bottom: -9rem; }
.mt-n10 { margin-top: -6rem }
.mt-n15 { margin-top: -9rem }
.me-n10 { margin-right: -6rem; }
.me-n15 { margin-right: -9rem; }
.mb-n10 { margin-bottom: -6rem; }
.mb-n15 { margin-bottom: -9rem; }
.ms-n10 { margin-left: -6rem; }
.ms-n15 { margin-left: -9rem; }


/* --- Sb-pro: 
--- */ 

/* 둥근 아이콘 버튼 */
.icon-circle {
  display: flex; justify-content: center; align-items: center;
  height: 2.5rem; width: 2.5rem; border-radius: 100%;
}

/* 둥근 버튼 */
.btn-circle {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; width: 2.5rem; font-size: 1rem; border-radius: 100%;
} .btn-circle.btn-sm, .btn-group-sm > .btn-circle.btn {
  height: 1.8rem; width: 1.8rem; font-size: 0.75rem;
} .btn-circle.btn-lg, .btn-group-lg > .btn-circle.btn {
  height: 3.5rem; width: 3.5rem; font-size: 1.35rem;
}

/* 아이콘 있는 분할 버튼 */
.btn-icon-split {
  display: inline-flex; align-items: stretch; justify-content: center;
  overflow: hidden; padding: 0;
} .btn-icon-split .icon {
  display: inline-block; padding: 0.375rem 0.75rem;
  background: rgba(0, 0, 0, 0.15);
} .btn-icon-split .text {
  display: inline-block; padding: 0.375rem 0.75rem;
} .btn-icon-split.btn-sm .icon, .btn-group-sm > .btn-icon-split.btn .icon {
  padding: 0.25rem 0.5rem;
} .btn-icon-split.btn-sm .text, .btn-group-sm > .btn-icon-split.btn .text {
  padding: 0.25rem 0.5rem;
} .btn-icon-split.btn-lg .icon, .btn-group-lg > .btn-icon-split.btn .icon {
  padding: 0.5rem 1rem;
} .btn-icon-split.btn-lg .text, .btn-group-lg > .btn-icon-split.btn .text {
  padding: 0.5rem 1rem;
}

/* 아이콘 스택 */
.icon-stack {
  display: inline-flex; justify-content: center; align-items: center;
  height: 2.5rem; width: 2.5rem;
  font-size: 1rem;
  background-color: #e7eaed;
  border-radius: 100%;
  flex-shrink: 0;
} .icon-stack svg { height: 1rem; width: 1rem; }

.icon-stack-sm { height: 2rem; width: 2rem; }
.icon-stack-lg {
  height: 4rem; width: 4rem; font-size: 1.5rem;
} .icon-stack-lg svg { height: 1.5rem; width: 1.5rem; }
.icon-stack-xl {
  height: 5rem; width: 5rem; font-size: 1.75rem;
} .icon-stack-xl svg { height: 1.75rem; width: 1.75rem; }

.bg-green-soft {
  background-color: #bfe5dc !important;
}
a.bg-green-soft:hover, a.bg-green-soft:focus,
button.bg-green-soft:hover, button.bg-green-soft:focus {
  background-color: #9bd6c8 !important;
}

/* [요소의 확대/축소] */
img.opacity_zoom {
  opacity: 0.9;
} img.opacity_zoom:hover {
  opacity: 0.5; zoom: 1.2;
}

/* 회전 유틸리티 */
.rotate-15 {
  transform-origin: initial !important;
  transform: rotate(15deg) !important;
} .rotate-n-15 {
  transform-origin: initial !important;
  transform: rotate(-15deg) !important;
} .rotate-45 {
  transform-origin: initial !important;
  transform: rotate(45deg) !important;
} .rotate-n-45 {
  transform-origin: initial !important;
  transform: rotate(-45deg) !important;
} .rotate-90 {
  transform-origin: initial !important;
  transform: rotate(90deg) !important;
} .rotate-180 {
  transform-origin: initial !important;
  transform: rotate(180deg) !important;
}

/* --- Square의 .card
--- */
.card {
  --bs-card-spacer-y: 2rem;
  --bs-card-spacer-x: 2rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-border-width: 0;
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-border-radius: 0;
  --bs-card-box-shadow: ;
  --bs-card-inner-border-radius: 0;
  --bs-card-cap-padding-y: 1rem;
  --bs-card-cap-padding-x: 2rem;
  --bs-card-cap-bg: rgba(0, 0, 0, 0.03);
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: #fff;
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
  box-shadow: var(--bs-card-box-shadow);
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}

.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
}

.card-title {
  margin-bottom: var(--bs-card-title-spacer-y);
}

.card-subtitle {
  margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}
.card-link + .card-link {
  margin-left: var(--bs-card-spacer-x);
}

.card-header {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  margin-bottom: 0;
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-header:first-child {
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.card-footer {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-footer:last-child {
  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

.card-header-tabs {
  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
  margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
  border-bottom: 0;
}
.card-header-tabs .nav-link.active {
  background-color: var(--bs-card-bg);
  border-bottom-color: var(--bs-card-bg);
}

.card-header-pills {
  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--bs-card-img-overlay-padding);
  border-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card-group > .card {
  margin-bottom: var(--bs-card-group-margin);
}
@media (min-width: 576px) {
  .card-group {
      display: flex;
      flex-flow: row wrap;
  }
  .card-group > .card {
      flex: 1 0 0%;
      margin-bottom: 0;
  }
  .card-group > .card + .card {
      margin-left: 0;
      border-left: 0;
  }
  .card-group > .card:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
      border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
      border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
      border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
      border-bottom-left-radius: 0;
  }
}

/* 헤더클릭 접는 카드 */
.card-collapsable .card-header[data-bs-toggle=collapse] {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  text-decoration: none;
}

.card-collapsable .card-header[data-bs-toggle=collapse] .card-collapsable-arrow {
  display: inline-flex;
  height: 0.9rem; width: 0.9rem; font-size: 0.9rem;
  transition: transform 0.1s ease-in-out;
}

.card-collapsable .card-header[data-bs-toggle=collapse].collapsed .card-collapsable-arrow {
  transform: rotate(-90deg);
}

/* 스크롤링 카드 사용자정의 Css */
.card-scrollable .card-body {
  max-height: 45rem;
  overflow-y: auto;
}

/* 카드 화살표 제거: sb-pro .no-caret */
.no-caret .dropdown-toggle::after { display: none; }

/* --- Square: Opacity- --- */
.opacity-10 { opacity: 0.1 !important; }
.opacity-20 { opacity: 0.2 !important; }
.opacity-30 { opacity: 0.3 !important; }
.opacity-40 { opacity: 0.4 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-80 { opacity: 0.8 !important; }
.opacity-90 { opacity: 0.9 !important; }


/* --- fadeIn/Out/Up 애니메이션 --- */
.fadeIn {
    opacity: 1;
    transition: opacity 0.5s ease;
}
  
.fadeOut {
    opacity: 0;
    transition: opacity 0.5s ease;
}
  
@-webkit-keyframes fadeUp {
  0% {
      opacity: 0; margin-top: 0.75rem;
  } 100% {
      opacity: 1; margin-top: 0;
  }
}
@keyframes fadeUp {
  0% {
      opacity: 0; margin-top: 1rem;
  } 100% {
      opacity: 1; margin-top: 0;
  }
}

.fadeUp-Ani {
  animation-name: fadeUp;
  animation-duration: 1000ms;
  animation-timing-function: margin cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
}


/* ---
    Sq 플로팅 오브젝트
--- */
.floating-objects {
  position: absolute; top: 0; left: -20px; right: 0; width: calc(100% + 20px); height: 100%;
  overflow: hidden;
}

.floating-objects span {
  display: block;
  position: absolute; width: 20px; height: 20px; background-color: #232323;
}
  
/* --- Kjc: Sparrow theme.css 프리로더 수정
--- */
.line-scale-pulse-out-rapid div {
  background-color: var(--sparrow-orange);
  width: 0.25rem;
  border-radius: 0.375rem;
}

/* ---
    Sq 프리로더
--- */
.preloader {
  display: flex;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #fff;
  z-index: 99999;
}
  
.preloader-shape {
  margin: auto; width: 50px; height: 50px;
  border: 4px solid #232323;
  animation: preloader 2s infinite ease;
} .preloader-shape::after {
  content: "";
  display: inline-block; width: 100%;
  background-color: #232323;
  vertical-align: top;
  animation: preloader-shape 2s infinite ease-in;
}

@keyframes preloader {
  0% {
    transform: rotate(0deg);
  } 25% {
    transform: rotate(180deg);
  } 50% {
    transform: rotate(180deg);
  } 75% {
    transform: rotate(360deg);
  } 100% {
    transform: rotate(360deg);
  }
} @keyframes preloader-shape {
  0% {
    height: 0%;
  } 50% {
    height: 100%;
  } 100% {
    height: 0%;
  }
}


/* --- 카드 이미지 오버레이
--- */ 
.card-img, .card-img-top, .card-img-bottom {
  width: 100%;
}

.card-img, .card-img-top {
  border-top-left-radius: 0.33rem; border-top-right-radius: 0.33rem;
} .card-img, .card-img-bottom {
  border-bottom-right-radius: 0.33rem; border-bottom-left-radius: 0.33rem;
}

.card-img-overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* 화면 전체 */
  padding: 1rem;
  border-radius: 0.33rem;
}


/* --- 굵은 테두리, 블랙/화이트 테두리 색상
--- */
/* Sparrow: 각 방면 굵은 테두리 */
.border-lg { border-width: 0.25rem !important; }
.border-top-lg { border-top-width: 0.25rem !important; }
.border-end-lg { border-right-width: 0.25rem !important; }
.border-bottom-lg { border-bottom-width: 0.25rem !important; }
.border-start-lg { border-left-width: 0.25rem !important; }

/* Sparrow: 각 방면 2px 테두리 */
.border-top-2 { border-top-width: 2px !important; } 
.border-end-2 { border-right-width: 2px !important; } 
.border-bottom-2 { border-bottom-width: 2px !important; } 
.border-start-2 { border-left-width: 2px !important; }

/* Square: 굵은 테두리(픽셀별) */
.border-1 { --bs-border-width: 1px; }
.border-2 { --bs-border-width: 2px; }
.border-3 { --bs-border-width: 3px; }
.border-4 { --bs-border-width: 4px; }
.border-5 { --bs-border-width: 5px; }
.border-6 { --bs-border-width: 6px; }
.border-7 { --bs-border-width: 7px; }
.border-8 { --bs-border-width: 8px; }
.border-9 { --bs-border-width: 9px; }
.border-10 { --bs-border-width: 10px; }

/* 테두리 블랙/화이트 색상 */
.border-black { border-color: #000 !important; }
.border-white { border-color: #fff !important; }


/* --- 페이지헤더용 그라디언트 배경색
--- */
.bg-gradient-for-header {
  background-color: #5a739b;
  background-image: linear-gradient(90deg, #5a739b 50%, #5a739b 100%);
}

/* --- 컨턴츠 기울이기
--- */
.content-skewed {
  perspective: 1500px !important;
  transform-style: preserve-3d !important;
}

.content-skewed-right {
  perspective-origin: right center !important;
} .content-skewed-right .content-skewed-item {
  transform: rotateY(30deg) rotateX(15deg) !important;
  backface-visibility: hidden !important;
}

.content-skewed-left {
  perspective-origin: left center !important;
} .content-skewed-left .content-skewed-item {
  transform: rotateY(-30deg) rotateX(15deg) !important;
  backface-visibility: hidden !important;
}

/*** --- Square의 .btn 가져와서 수정함!
--- */
.btn {
  /* 원본:
  --bs-btn-padding-x: 3rem;
  --bs-btn-padding-y: 0.8125rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 0.9rem;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: #232323;
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: 0.15625rem;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: none !important;
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--bs-btn-focus-shadow-rgb), .5); */

  /* 원본 수정: */
  --bs-btn-padding-x: 0.9rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 0.9rem;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: #232323;
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: 0.3rem;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: none !important;
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.1rem rgba(var(--bs-btn-focus-shadow-rgb), .5);

  /* 그대로 */
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  box-shadow: var(--bs-btn-box-shadow);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} @media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* Kjc: 버튼 수정 */
.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.6rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: 0.35rem;
}

.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-x: 0.8rem;
  --bs-btn-padding-y: 0.4rem;
  --bs-btn-font-size: 0.8rem;
  --bs-btn-border-radius: 0.25rem;
}

.btn:hover {
  color: var(--bs-btn-hover-color);
  text-decoration: none;
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-check + .btn:hover {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow);
}
.btn-check:focus-visible + .btn {
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow);
}
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  box-shadow: var(--bs-btn-active-shadow);
}
.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
  box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
  box-shadow: none;
}

/* 스퀘어의 버튼들 */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #232323;
  --bs-btn-border-color: #232323;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1e1e1e;
  --bs-btn-hover-border-color: #1c1c1c;
  --bs-btn-focus-shadow-rgb: 68, 68, 68;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1c1c1c;
  --bs-btn-active-border-color: #1a1a1a;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #232323;
  --bs-btn-disabled-border-color: #232323;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #da3458;
  --bs-btn-border-color: #da3458;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b92c4b;
  --bs-btn-hover-border-color: #ae2a46;
  --bs-btn-focus-shadow-rgb: 224, 82, 113;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ae2a46;
  --bs-btn-active-border-color: #a42742;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #da3458;
  --bs-btn-disabled-border-color: #da3458;
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #60c39b;
  --bs-btn-border-color: #60c39b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #52a684;
  --bs-btn-hover-border-color: #4d9c7c;
  --bs-btn-focus-shadow-rgb: 120, 204, 170;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d9c7c;
  --bs-btn-active-border-color: #489274;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #60c39b;
  --bs-btn-disabled-border-color: #60c39b;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #359bd0;
  --bs-btn-border-color: #359bd0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2d84b1;
  --bs-btn-hover-border-color: #2a7ca6;
  --bs-btn-focus-shadow-rgb: 83, 170, 215;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2a7ca6;
  --bs-btn-active-border-color: #28749c;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #359bd0;
  --bs-btn-disabled-border-color: #359bd0;
}

.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: #e1be5f;
  --bs-btn-border-color: #e1be5f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bfa251;
  --bs-btn-hover-border-color: #b4984c;
  --bs-btn-focus-shadow-rgb: 230, 200, 119;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b4984c;
  --bs-btn-active-border-color: #a98f47;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #e1be5f;
  --bs-btn-disabled-border-color: #e1be5f;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #c7473f;
  --bs-btn-border-color: #c7473f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #a93c36;
  --bs-btn-hover-border-color: #9f3932;
  --bs-btn-focus-shadow-rgb: 207, 99, 92;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #9f3932;
  --bs-btn-active-border-color: #95352f;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #c7473f;
  --bs-btn-disabled-border-color: #c7473f;
}

.btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #f9f9f9;
  --bs-btn-border-color: #f9f9f9;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d4d4d4;
  --bs-btn-hover-border-color: #c7c7c7;
  --bs-btn-focus-shadow-rgb: 212, 212, 212;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c7c7c7;
  --bs-btn-active-border-color: #bbbbbb;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f9f9f9;
  --bs-btn-disabled-border-color: #f9f9f9;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #343a40;
  --bs-btn-border-color: #343a40;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #52585d;
  --bs-btn-hover-border-color: #484e53;
  --bs-btn-focus-shadow-rgb: 82, 88, 93;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5d6166;
  --bs-btn-active-border-color: #484e53;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #343a40;
  --bs-btn-disabled-border-color: #343a40;
}

.btn-white {
  --bs-btn-color: #000;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: white;
  --bs-btn-hover-border-color: white;
  --bs-btn-focus-shadow-rgb: 217, 217, 217;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: white;
  --bs-btn-active-border-color: white;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: #fff;
}

.btn-black {
  --bs-btn-color: #fff;
  --bs-btn-bg: #000;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: black;
  --bs-btn-hover-border-color: black;
  --bs-btn-focus-shadow-rgb: 38, 38, 38;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: black;
  --bs-btn-active-border-color: black;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #000;
  --bs-btn-disabled-border-color: #000;
}

.btn-gray {
  --bs-btn-color: #fff;
  --bs-btn-bg: #999999;
  --bs-btn-border-color: #999999;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #828282;
  --bs-btn-hover-border-color: #7a7a7a;
  --bs-btn-focus-shadow-rgb: 168, 168, 168;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7a7a7a;
  --bs-btn-active-border-color: #737373;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #999999;
  --bs-btn-disabled-border-color: #999999;
}

.btn-outline-primary {
  --bs-btn-color: #232323;
  --bs-btn-border-color: #232323;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #232323;
  --bs-btn-hover-border-color: #232323;
  --bs-btn-focus-shadow-rgb: 35, 35, 35;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #232323;
  --bs-btn-active-border-color: #232323;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #232323;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #232323;
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: #da3458;
  --bs-btn-border-color: #da3458;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #da3458;
  --bs-btn-hover-border-color: #da3458;
  --bs-btn-focus-shadow-rgb: 218, 52, 88;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #da3458;
  --bs-btn-active-border-color: #da3458;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #da3458;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #da3458;
  --bs-gradient: none;
}

.btn-outline-success {
  --bs-btn-color: #60c39b;
  --bs-btn-border-color: #60c39b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #60c39b;
  --bs-btn-hover-border-color: #60c39b;
  --bs-btn-focus-shadow-rgb: 96, 195, 155;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #60c39b;
  --bs-btn-active-border-color: #60c39b;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #60c39b;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #60c39b;
  --bs-gradient: none;
}

.btn-outline-info {
  --bs-btn-color: #359bd0;
  --bs-btn-border-color: #359bd0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #359bd0;
  --bs-btn-hover-border-color: #359bd0;
  --bs-btn-focus-shadow-rgb: 53, 155, 208;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #359bd0;
  --bs-btn-active-border-color: #359bd0;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #359bd0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #359bd0;
  --bs-gradient: none;
}

.btn-outline-warning {
  --bs-btn-color: #e1be5f;
  --bs-btn-border-color: #e1be5f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #e1be5f;
  --bs-btn-hover-border-color: #e1be5f;
  --bs-btn-focus-shadow-rgb: 225, 190, 95;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #e1be5f;
  --bs-btn-active-border-color: #e1be5f;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #e1be5f;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #e1be5f;
  --bs-gradient: none;
}

.btn-outline-danger {
  --bs-btn-color: #c7473f;
  --bs-btn-border-color: #c7473f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c7473f;
  --bs-btn-hover-border-color: #c7473f;
  --bs-btn-focus-shadow-rgb: 199, 71, 63;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c7473f;
  --bs-btn-active-border-color: #c7473f;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #c7473f;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #c7473f;
  --bs-gradient: none;
}

.btn-outline-light {
  --bs-btn-color: #f9f9f9;
  --bs-btn-border-color: #f9f9f9;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f9f9f9;
  --bs-btn-hover-border-color: #f9f9f9;
  --bs-btn-focus-shadow-rgb: 249, 249, 249;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f9f9f9;
  --bs-btn-active-border-color: #f9f9f9;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #f9f9f9;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f9f9f9;
  --bs-gradient: none;
}

.btn-outline-dark {
  --bs-btn-color: #343a40;
  --bs-btn-border-color: #343a40;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #343a40;
  --bs-btn-hover-border-color: #343a40;
  --bs-btn-focus-shadow-rgb: 52, 58, 64;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #343a40;
  --bs-btn-active-border-color: #343a40;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #343a40;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #343a40;
  --bs-gradient: none;
}

.btn-outline-white {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fff;
  --bs-gradient: none;
}

.btn-outline-black {
  --bs-btn-color: #000;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #000;
  --bs-gradient: none;
}

.btn-outline-gray {
  --bs-btn-color: #999999;
  --bs-btn-border-color: #999999;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #999999;
  --bs-btn-hover-border-color: #999999;
  --bs-btn-focus-shadow-rgb: 153, 153, 153;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #999999;
  --bs-btn-active-border-color: #999999;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #999999;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #999999;
  --bs-gradient: none;
}

.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #999999;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-shadow-rgb: 68, 68, 68;
  text-decoration: none;
}
.btn-link:hover, .btn-link:focus-visible {
  text-decoration: underline;
}
.btn-link:focus-visible {
  color: var(--bs-btn-color);
}
.btn-link:hover {
  color: var(--bs-btn-hover-color);
}

.btn-soft-primary {
  background-color: rgba(35, 35, 35, 0.1);
  color: #232323;
}
.btn-soft-primary:hover, .btn-soft-primary:focus {
  background-color: #232323;
  color: #fff;
}

.btn-soft-secondary {
  background-color: rgba(218, 52, 88, 0.1);
  color: #da3458;
}
.btn-soft-secondary:hover, .btn-soft-secondary:focus {
  background-color: #da3458;
  color: #fff;
}

.btn-soft-success {
  background-color: rgba(96, 195, 155, 0.1);
  color: #60c39b;
}
.btn-soft-success:hover, .btn-soft-success:focus {
  background-color: #60c39b;
  color: #fff;
}

.btn-soft-info {
  background-color: rgba(53, 155, 208, 0.1);
  color: #359bd0;
}
.btn-soft-info:hover, .btn-soft-info:focus {
  background-color: #359bd0;
  color: #fff;
}

.btn-soft-warning {
  background-color: rgba(225, 190, 95, 0.1);
  color: #e1be5f;
}
.btn-soft-warning:hover, .btn-soft-warning:focus {
  background-color: #e1be5f;
  color: #fff;
}

.btn-soft-danger {
  background-color: rgba(199, 71, 63, 0.1);
  color: #c7473f;
}
.btn-soft-danger:hover, .btn-soft-danger:focus {
  background-color: #c7473f;
  color: #fff;
}

.btn-soft-light {
  background-color: rgba(249, 249, 249, 0.1);
  color: #f9f9f9;
}
.btn-soft-light:hover, .btn-soft-light:focus {
  background-color: #f9f9f9;
  color: #000;
}

.btn-soft-dark {
  background-color: rgba(52, 58, 64, 0.1);
  color: #343a40;
}
.btn-soft-dark:hover, .btn-soft-dark:focus {
  background-color: #343a40;
  color: #fff;
}

.btn-soft-white {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.btn-soft-white:hover, .btn-soft-white:focus {
  background-color: #fff;
  color: #000;
}

.btn-soft-black {
  background-color: rgba(0, 0, 0, 0.1);
  color: #000;
}
.btn-soft-black:hover, .btn-soft-black:focus {
  background-color: #000;
  color: #fff;
}

.btn-soft-gray {
  background-color: rgba(153, 153, 153, 0.1);
  color: #999999;
}
.btn-soft-gray:hover, .btn-soft-gray:focus {
  background-color: #999999;
  color: #fff;
}

.no-focus:focus {
    box-shadow: none !important;
}
  
.btn-link:active, .btn-link.active {
    color: #ca3051;
}
  
    
/* --- Square - 그레이 배경색
--- */
.bg-gray100 {
    color: #000;
    background-color: #f9f9f9;
  }
  
  .bg-gray200 {
    color: #000;
    background-color: #eeeeee;
  }
  
  .bg-gray300 {
    color: #000;
    background-color: #dee2e6;
  }
  
  .bg-gray400 {
    color: #fff;
    background-color: #c4c4c4;
  }
  
  .bg-gray500 {
    color: #fff;
    background-color: #adb5bd;
  }
  
  .bg-gray600 {
    color: #fff;
    background-color: #999999;
  }
  
  .bg-gray700 {
    color: #fff;
    background-color: #495057;
  }
  
  .bg-gray800 {
    color: #fff;
    background-color: #343a40;
  }
  
  .bg-gray900 {
    color: #fff;
    background-color: #212529;
  }
  

/* --- Square - for Prism Syntax
--- */
pre[class*=language-],
code[class*=language-] {
  color: #d4d4d4;
  font-size: 16px;
  text-shadow: none;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  hyphens: none;
}

pre[class*=language-]::-moz-selection, code[class*=language-]::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre[class*=language-]::selection,
code[class*=language-]::selection {
  text-shadow: none;
  background: #b3d4fc;
}

@media print {
  pre[class*=language-],
  code[class*=language-] {
    text-shadow: none;
  }
}
pre[class*=language-] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  background: #1d1e1e;
}

:not(pre) > code[class*=language-] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  color: #db4c69;
  background: #f9f2f4;
}

/* Pre & Code */
pre[class*=language-javascript],
code[class*=language-javascript] {
  color: #4ec9b0;
}

pre[class*=language-js],
code[class*=language-js] {
  color: #4ec9b0;
}

pre[class*=language-css],
code[class*=language-css] {
  color: #CE9178;
}

pre[class*=language-html],
code[class*=language-html] {
  color: #dcdcdc;
}

pre[class*=language-markup],
code[class*=language-markup] {
  color: #dcdcdc;
}

.language-html .token.punctuation {
  color: #9b9b9b;
}

.language-markup .token.punctuation {
  color: #9b9b9b;
}

/* Line highlighting */
pre[data-line] {
  position: relative;
}

pre[class*=language-] > code[class*=language-] {
  position: relative;
  z-index: 1;
}

.line-highlight {
  position: absolute; left: 0; right: 0;
  padding: inherit 0; margin-top: 1em;
  background: #f7ebc6; box-shadow: inset 5px 0 0 #f7d87c;
  line-height: inherit; white-space: pre;
  pointer-events: none;
  z-index: 0;
}

/* Copy button */
div.code-toolbar {
  position: relative;
}

div.code-toolbar > .toolbar {
  position: absolute; top: 0.3em; right: 0.3em;
  transition: opacity 0.9s ease-in-out;
  opacity: 0.5;
}

div.code-toolbar:hover > .toolbar {
  opacity: 1;
}

div.code-toolbar > .toolbar .toolbar-item {
  display: inline-block;
}

div.code-toolbar > .toolbar a {
  cursor: pointer;
}

div.code-toolbar > .toolbar button {
  padding: 0; background: none; border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
}

div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
  padding: 0 0.5em;
  color: #bbb;
  font-size: 0.8em;
  background: #333;
  border-radius: 0.5em;
}

div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
  color: inherit;
  text-decoration: none;
}

/* Prism Syntax highlighter */
pre[class*=language-] {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

div.code-toolbar {
  margin-bottom: 0;
}

div.code-toolbar > .toolbar {
  top: 0;
  right: 0;
  padding: 2px 5px 3px;
  opacity: 1 !important;
  background-color: #3c3f45;
  border: 1px solid #272e32;
  border-radius: 0 0 0 4px;
}

div.code-toolbar > .toolbar .toolbar-item a,
div.code-toolbar > .toolbar .toolbar-item button,
div.code-toolbar > .toolbar .toolbar-item span {
  color: #eee;
  border-radius: 3px;
  background: none;
  box-shadow: none;
}

div.code-toolbar > .toolbar .toolbar-item a:hover,
div.code-toolbar > .toolbar .toolbar-item button:hover,
div.code-toolbar > .toolbar .toolbar-item span:hover {
  color: #fff;
  border-radius: 3px;
  background: none;
  box-shadow: none;
}

.namespace {
  opacity: 0.7;
}

/* ---
  토큰: Map박스에서도 사용함!
- */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6a9955;
}

.token.punctuation {
  color: #d4d4d4;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #b5cea8;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #d69d85;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #dcdcdc;
  background: #232323;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #c586c0;
}

.token.function {
  color: #dcdcaa;
}

.token.regex,
.token.important,
.token.variable {
  color: #d16969;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.constant {
  color: #9CDCFE;
}

.token.class-name {
  color: #4EC9B0;
}

.token.parameter {
  color: #9CDCFE;
}

.token.interpolation {
  color: #9CDCFE;
}

.token.punctuation.interpolation-punctuation {
  color: #9b9b9b;
}

.token.boolean {
  color: #dcdcdc;
}

.token.property {
  color: #9cdcfe;
}

.token.selector {
  color: #d7ba7d;
}

.token.tag {
  color: #569cd6;
}

.token.attr-name {
  color: #9cdcfe;
}

.token.attr-value {
  color: #d69d85;
}

.token.entity {
  color: #4ec9b0;
  cursor: unset;
}

.token.namespace {
  color: #4ec9b0;
}


/* Square:  */
.bottom-line, .upper-line {
    position: relative;
} .bottom-line::after, .upper-line::after {
    content: "";
    position: absolute;
    left: 0;
    width: 70px;
    max-width: 20%;
    height: 3px;
    background-color: currentColor;
} .bottom-line::after {
    bottom: -10%;
} .upper-line::after {
    top: -10%;
}
    

/* ---
    Square: square/rectangle
- */
.square {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  @media (min-width: 992px) {
    .square .square-inner {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
  }
  .square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
  
  .rectangle {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .rectangle .rectangle-inner {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  }
  .rectangle:after {
    content: "";
    display: block;
    padding-bottom: 50%;
  }
  
  @media (min-width: 576px) {
    .square-sm {
      position: relative;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
  @media (min-width: 576px) and (min-width: 992px) {
    .square-sm .square-inner {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
  }
  @media (min-width: 576px) {
    .square-sm:after {
      content: "";
      display: block;
      padding-bottom: 100%;
    }
  }
  @media (min-width: 576px) {
    .rectangle-sm {
      position: relative;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .rectangle-sm .rectangle-inner {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
    .rectangle-sm:after {
      content: "";
      display: block;
      padding-bottom: 50%;
    }
  }
  @media (min-width: 768px) {
    .square-md {
      position: relative;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
  @media (min-width: 768px) and (min-width: 992px) {
    .square-md .square-inner {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
  }
  @media (min-width: 768px) {
    .square-md:after {
      content: "";
      display: block;
      padding-bottom: 100%;
    }
  }
  @media (min-width: 768px) {
    .rectangle-md {
      position: relative;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .rectangle-md .rectangle-inner {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
    .rectangle-md:after {
      content: "";
      display: block;
      padding-bottom: 50%;
    }
  }
  @media (min-width: 992px) {
    .square-lg {
      position: relative;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
  @media (min-width: 992px) and (min-width: 992px) {
    .square-lg .square-inner {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
  }
  @media (min-width: 992px) {
    .square-lg:after {
      content: "";
      display: block;
      padding-bottom: 100%;
    }
  }
  @media (min-width: 992px) {
    .rectangle-lg {
      position: relative;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .rectangle-lg .rectangle-inner {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
    .rectangle-lg:after {
      content: "";
      display: block;
      padding-bottom: 50%;
    }
  }
  @media (min-width: 1200px) {
    .square-xl {
      position: relative;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
  @media (min-width: 1200px) and (min-width: 992px) {
    .square-xl .square-inner {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
  }
  @media (min-width: 1200px) {
    .square-xl:after {
      content: "";
      display: block;
      padding-bottom: 100%;
    }
  }
  @media (min-width: 1200px) {
    .rectangle-xl {
      position: relative;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .rectangle-xl .rectangle-inner {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
    .rectangle-xl:after {
      content: "";
      display: block;
      padding-bottom: 50%;
    }
  }
  @media (min-width: 1400px) {
    .square-xxl {
      position: relative;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
  @media (min-width: 1400px) and (min-width: 992px) {
    .square-xxl .square-inner {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
  }
  @media (min-width: 1400px) {
    .square-xxl:after {
      content: "";
      display: block;
      padding-bottom: 100%;
    }
  }
  @media (min-width: 1400px) {
    .rectangle-xxl {
      position: relative;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .rectangle-xxl .rectangle-inner {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
    .rectangle-xxl:after {
      content: "";
      display: block;
      padding-bottom: 50%;
    }
  }
  
/* ---
  아바타 작성: Sparrow의 .avata 스타일을 대체함!
--- */
.avata {
  position: relative; height: 2rem; width: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
} .avata .avata-img {
  height: 2rem; width: auto;
  border-radius: 100%;
  object-fit: cover;
}

.avata-xs {
  height: 1.25rem; width: 1.25rem;
} .avata-xs .avata-img { height: 1rem; }

.avata-sm {
  height: 1.75rem; width: 1.75rem;
} .avata-sm .avata-img { height: 1.5rem; }

.avata-lg {
  height: 2.5rem; width: 2.5rem;
} .avata-lg .avata-img { height: 2.5rem; }

.avata-xl {
  height: 3rem; width: 3rem;
} .avata-xl .avata-img { height: 3rem; }

.avata-xxl {
  height: 3.75rem; width: 3.75rem;
} .avata-xxl .avata-img { height: 3.75rem; }

.avata-busy::before, .avata-idle::before, .avata-offline::before, .avata-online::before {
  content: ""; position: absolute; bottom: 5%; right: 5%; width: 20%; height: 20%;
  border-radius: 50%; background-color: #d7dce3; border: 0.0625rem solid #fff;
}
.avata-busy::before { background-color: #e81500; }
.avata-idle::before { background-color: #f4a100; }
.avata-offline::before { background-color: #d7dce3; }
.avata-online::before { background-color: #00ac69; }


/* ---
  Square: 디바이스 스크린
--- */
.device-iphone {
    position: relative;
  }
  .device-iphone img {
    position: relative;
    -o-object-fit: cover;
       object-fit: cover;
    overflow: hidden;
  }
  .device-iphone img.screen {
    position: absolute;
    top: 2.5%;
    left: 8%;
    width: 84.2%;
    height: 92.8%;
    border-radius: 5%;
  }
  
  .device-laptop {
    position: relative;
  }
  .device-laptop img {
    position: relative;
    -o-object-fit: cover;
       object-fit: cover;
    overflow: hidden;
  }
  .device-laptop img.screen {
    position: absolute;
    top: 0.5%;
    left: 14.5%;
    width: 70.5%;
    height: 87%;
    border-radius: 4.5% 4.5% 0 0;
  }
  
  
/* 그레이스케일 색상 */
.text-gray-10 { color: #f2f6fc; }
.text-gray-20 { color: #e0e5ec; }
.text-gray-30 { color: #d4dae3; }
.text-gray-40 { color: #c5ccd6; }
.text-gray-50 { color: #a7aeb8; }
.text-gray-60 { color: #69707a; }
.text-gray-70 { color: #4a515b; }
.text-gray-80 { color: #363d47; }
.text-gray-90 { color: #212832; }

/* x, y 방면 테두리 */
.border-xx{
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
} .border-xx-0 {
  border-left: 0 !important; border-right: 0 !important;
}

.border-yy{
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
} .border-yy-0 {
  border-top: 0 !important; border-bottom: 0 !important;
}

/* Sb-pro 아이콘 버튼과 투명 버튼 */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  height: calc((0.875rem * 1) + (0.875rem * 2) + (2px)) !important;
  width: calc((0.875rem * 1) + (0.875rem * 2) + (2px)) !important;
  padding: 0;
  border-radius: 100%;
  overflow: hidden;
}

.btn-transdark {
  --bs-btn-color: rgba(33, 40, 50, 0.5);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: rgba(33, 40, 50, 0.5);
  --bs-btn-hover-bg: rgba(33, 40, 50, 0.1);
  --bs-btn-hover-border-color: transparent;
  color: rgba(33, 40, 50, 0.5);
} .btn-transdark:focus {
  box-shadow: 0 0 0 0.25rem rgba(33, 40, 50, 0.25);
}

/* ---
  스퀘어: 배경 이미지 포지셔닝
*/
.bg-image {
  position: absolute;
  left: 0; bottom: 0; right: 0; top: 0;
}

.bg-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.bg-contain {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.bg-position-top-left {
  background-position-y: top;
  background-position-x: left;
}

.bg-position-top-right {
  background-position-y: top;
  background-position-x: right;
}

.bg-position-top-center {
  background-position-y: top;
  background-position-x: center;
}

.bg-position-bottom-left {
  background-position-y: bottom;
  background-position-x: left;
}

.bg-position-bottom-right {
  background-position-y: bottom;
  background-position-x: right;
}

.bg-position-bottom-center {
  background-position-y: bottom;
  background-position-x: center;
}

.bg-position-center-left {
  background-position-y: center;
  background-position-x: left;
}

.bg-position-center-right {
  background-position-y: center;
  background-position-x: right;
}

.bg-position-center-center {
  background-position-y: center;
  background-position-x: center;
}

.img-fullplus {
    margin-left: -8rem;
    width: calc(100% + 16rem);
  }
  
/* ---
  스퀘어: 이미지 시프트
- */
.img-shifted {
  position: relative;
  overflow: hidden;
}
.img-shifted.shift-left {
  width: 100%;
  float: right;
}
@media (min-width: 576px) {
  .img-shifted.shift-left {
    width: calc(100% + 50vw - 270px + 2rem);
  }
}
@media (min-width: 768px) {
  .img-shifted.shift-left {
    width: calc(100% + 50vw - 360px + 2rem);
  }
}
@media (min-width: 992px) {
  .img-shifted.shift-left {
    width: calc(100% + 50vw - 480px + 2rem);
  }
}
@media (min-width: 1200px) {
  .img-shifted.shift-left {
    width: calc(100% + 50vw - 570px + 2rem);
  }
}
@media (min-width: 1400px) {
  .img-shifted.shift-left {
    width: calc(100% + 50vw - 660px + 2rem);
  }
}
.img-shifted.shift-right {
  width: 100%;
}
@media (min-width: 576px) {
  .img-shifted.shift-right {
    width: calc(100% + 50vw - 270px + 2rem);
  }
}
@media (min-width: 768px) {
  .img-shifted.shift-right {
    width: calc(100% + 50vw - 360px + 2rem);
  }
}
@media (min-width: 992px) {
  .img-shifted.shift-right {
    width: calc(100% + 50vw - 480px + 2rem);
  }
}
@media (min-width: 1200px) {
  .img-shifted.shift-right {
    width: calc(100% + 50vw - 570px + 2rem);
  }
}
@media (min-width: 1400px) {
  .img-shifted.shift-right {
    width: calc(100% + 50vw - 660px + 2rem);
  }
}
@media (min-width: 576px) {
  .img-shifted.img-shifted-with-edge.shift-left {
    width: calc(100% + 50vw - 270px - 1rem);
  }
}
@media (min-width: 768px) {
  .img-shifted.img-shifted-with-edge.shift-left {
    width: calc(100% + 50vw - 360px - 1rem);
  }
}
@media (min-width: 992px) {
  .img-shifted.img-shifted-with-edge.shift-left {
    width: calc(100% + 50vw - 480px - 1rem);
  }
}
@media (min-width: 1200px) {
  .img-shifted.img-shifted-with-edge.shift-left {
    width: calc(100% + 50vw - 570px - 1rem);
  }
}
@media (min-width: 1400px) {
  .img-shifted.img-shifted-with-edge.shift-left {
    width: calc(100% + 50vw - 660px - 1rem);
  }
}
@media (min-width: 576px) {
  .img-shifted.img-shifted-with-edge.shift-right {
    width: calc(100% + 50vw - 270px - 1rem);
  }
}
@media (min-width: 768px) {
  .img-shifted.img-shifted-with-edge.shift-right {
    width: calc(100% + 50vw - 360px - 1rem);
  }
}
@media (min-width: 992px) {
  .img-shifted.img-shifted-with-edge.shift-right {
    width: calc(100% + 50vw - 480px - 1rem);
  }
}
@media (min-width: 1200px) {
  .img-shifted.img-shifted-with-edge.shift-right {
    width: calc(100% + 50vw - 570px - 1rem);
  }
}
@media (min-width: 1400px) {
  .img-shifted.img-shifted-with-edge.shift-right {
    width: calc(100% + 50vw - 660px - 1rem);
  }
}

/* ---
  스퀘어: 이미지 오버레이 관련
- */
.overlay::before {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}

/* .overlay-0::before {
  opacity: 0 !important;
} */

.overlay-10::before {
  opacity: 0.1 !important;
}

.overlay-20::before {
  opacity: 0.2 !important;
}

.overlay-30::before {
  opacity: 0.3 !important;
}

.overlay-40::before {
  opacity: 0.4 !important;
}

.overlay-50::before {
  opacity: 0.5 !important;
}

.overlay-60::before {
  opacity: 0.6 !important;
}

.overlay-70::before {
  opacity: 0.7 !important;
}

.overlay-80::before {
  opacity: 0.8 !important;
}

.overlay-90::before {
  opacity: 0.9 !important;
}

.overlay-100::before {
  opacity: 1 !important;
}

.overlay-primary::before {
  background-color: #232323 !important;
}

.overlay-primary-gradient-top-0::before {
  background: linear-gradient(0deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 0%) !important;
}

.overlay-primary-gradient-bottom-0::before {
  background: linear-gradient(180deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 0%) !important;
}

.overlay-primary-gradient-top-10::before {
  background: linear-gradient(0deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 10%) !important;
}

.overlay-primary-gradient-bottom-10::before {
  background: linear-gradient(180deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 10%) !important;
}

.overlay-primary-gradient-top-20::before {
  background: linear-gradient(0deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 20%) !important;
}

.overlay-primary-gradient-bottom-20::before {
  background: linear-gradient(180deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 20%) !important;
}

.overlay-primary-gradient-top-30::before {
  background: linear-gradient(0deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 30%) !important;
}

.overlay-primary-gradient-bottom-30::before {
  background: linear-gradient(180deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 30%) !important;
}

.overlay-primary-gradient-top-40::before {
  background: linear-gradient(0deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 40%) !important;
}

.overlay-primary-gradient-bottom-40::before {
  background: linear-gradient(180deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 40%) !important;
}

.overlay-primary-gradient-top-50::before {
  background: linear-gradient(0deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 50%) !important;
}

.overlay-primary-gradient-bottom-50::before {
  background: linear-gradient(180deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 50%) !important;
}

.overlay-primary-gradient-top-60::before {
  background: linear-gradient(0deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 60%) !important;
}

.overlay-primary-gradient-bottom-60::before {
  background: linear-gradient(180deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 60%) !important;
}

.overlay-primary-gradient-top-70::before {
  background: linear-gradient(0deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 70%) !important;
}

.overlay-primary-gradient-bottom-70::before {
  background: linear-gradient(180deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 70%) !important;
}

.overlay-primary-gradient-top-80::before {
  background: linear-gradient(0deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 80%) !important;
}

.overlay-primary-gradient-bottom-80::before {
  background: linear-gradient(180deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 80%) !important;
}

.overlay-primary-gradient-top-90::before {
  background: linear-gradient(0deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 90%) !important;
}

.overlay-primary-gradient-bottom-90::before {
  background: linear-gradient(180deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 90%) !important;
}

.overlay-primary-gradient-top-100::before {
  background: linear-gradient(0deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 100%) !important;
}

.overlay-primary-gradient-bottom-100::before {
  background: linear-gradient(180deg, rgba(35,35,35,0) 0, rgba(35,35,35,1) 100%) !important;
}

/* --- Square의 Svg 색상 설정
--- */

/* Svg 아이콘 기본 설정 */
svg { fill: currentColor; }
a > svg, button > svg { pointer-events: none; }

.fill-primary { fill: #232323 !important; }
.stroke-primary { stroke: #232323 !important; }
.fill-secondary { fill: #da3458 !important; }
.stroke-secondary { stroke: #da3458 !important; }
.fill-success { fill: #60c39b !important; }
.stroke-success { stroke: #60c39b !important; }
.fill-info { fill: #359bd0 !important; }
.stroke-info { stroke: #359bd0 !important; }
.fill-warning { fill: #e1be5f !important; }
.stroke-warning { stroke: #e1be5f !important; }
.fill-danger { fill: #c7473f !important; }
.stroke-danger { stroke: #c7473f !important; }
.fill-light { fill: #f9f9f9 !important; }
.stroke-light { stroke: #f9f9f9 !important; }
.fill-dark { fill: #343a40 !important; }
.stroke-dark { stroke: #343a40 !important; }
.fill-white { fill: #fff !important; }
.stroke-white { stroke: #fff !important; }
.fill-black { fill: #000 !important; }
.stroke-black { stroke: #000 !important; }
.fill-gray { fill: #999999 !important; }
.stroke-gray { stroke: #999999 !important; }