@charset "UTF-8";
/* BitPlus 전역 SCSS 통합 번들 Entry Point (Dart Sass @use 규칙 준수) */
/* ==========================================================================
   BitPlus 전역 SCSS 변수 및 테마 시스템 (_variables.scss)
   ========================================================================== */
/* 8대 브랜드 & 상태 컬러셋 맵 (Main, Point, Deco 및 Primary, Success, Warning, Danger, Info) */
/* SCSS %extend 프리셋 플레이스홀더 */
#app, html .flexCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

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

/** 변수 및 기본 구성 **/
html {
  --xsSize: 0.7rem;
  --smSize: 0.85rem;
  --mdSize: 1rem;
  --lgSize: 1.15rem;
  --xlSize: 1.35rem;
  --xxlSize: 1.75rem;
  --main: hsl(180, 71%, 44%);
  --mainDark: hsl(180, 71%, 29%);
  --mainLight: hsl(180, 71%, 59%);
  --main1: hsl(180, 71%, 76%);
  --main2: hsl(180, 71%, 68%);
  --main3: hsl(180, 71%, 60%);
  --main4: hsl(180, 71%, 52%);
  --main5: hsl(180, 71%, 44%);
  --main6: hsl(180, 71%, 36%);
  --main7: hsl(180, 71%, 28%);
  --main8: hsl(180, 71%, 20%);
  --main9: hsl(180, 71%, 12%);
  --point: hsl(211, 86%, 48%);
  --pointDark: hsl(211, 86%, 33%);
  --pointLight: hsl(211, 86%, 63%);
  --point1: hsl(211, 86%, 80%);
  --point2: hsl(211, 86%, 72%);
  --point3: hsl(211, 86%, 64%);
  --point4: hsl(211, 86%, 56%);
  --point5: hsl(211, 86%, 48%);
  --point6: hsl(211, 86%, 40%);
  --point7: hsl(211, 86%, 32%);
  --point8: hsl(211, 86%, 24%);
  --point9: hsl(211, 86%, 16%);
  --deco: hsl(199, 18%, 33%);
  --decoDark: hsl(199, 18%, 18%);
  --decoLight: hsl(199, 18%, 48%);
  --deco1: hsl(199, 18%, 65%);
  --deco2: hsl(199, 18%, 57%);
  --deco3: hsl(199, 18%, 49%);
  --deco4: hsl(199, 18%, 41%);
  --deco5: hsl(199, 18%, 33%);
  --deco6: hsl(199, 18%, 25%);
  --deco7: hsl(199, 18%, 17%);
  --deco8: hsl(199, 18%, 9%);
  --deco9: hsl(199, 18%, 8%);
  --primary: hsl(207, 90%, 54%);
  --primaryDark: hsl(207, 90%, 39%);
  --primaryLight: hsl(207, 90%, 69%);
  --primary1: hsl(207, 90%, 86%);
  --primary2: hsl(207, 90%, 78%);
  --primary3: hsl(207, 90%, 70%);
  --primary4: hsl(207, 90%, 62%);
  --primary5: hsl(207, 90%, 54%);
  --primary6: hsl(207, 90%, 46%);
  --primary7: hsl(207, 90%, 38%);
  --primary8: hsl(207, 90%, 30%);
  --primary9: hsl(207, 90%, 22%);
  --success: hsl(150, 65%, 40%);
  --successDark: hsl(150, 65%, 25%);
  --successLight: hsl(150, 65%, 55%);
  --success1: hsl(150, 65%, 72%);
  --success2: hsl(150, 65%, 64%);
  --success3: hsl(150, 65%, 56%);
  --success4: hsl(150, 65%, 48%);
  --success5: hsl(150, 65%, 40%);
  --success6: hsl(150, 65%, 32%);
  --success7: hsl(150, 65%, 24%);
  --success8: hsl(150, 65%, 16%);
  --success9: hsl(150, 65%, 8%);
  --warning: hsl(38, 90%, 48%);
  --warningDark: hsl(38, 90%, 33%);
  --warningLight: hsl(38, 90%, 63%);
  --warning1: hsl(38, 90%, 80%);
  --warning2: hsl(38, 90%, 72%);
  --warning3: hsl(38, 90%, 64%);
  --warning4: hsl(38, 90%, 56%);
  --warning5: hsl(38, 90%, 48%);
  --warning6: hsl(38, 90%, 40%);
  --warning7: hsl(38, 90%, 32%);
  --warning8: hsl(38, 90%, 24%);
  --warning9: hsl(38, 90%, 16%);
  --danger: hsl(355, 80%, 55%);
  --dangerDark: hsl(355, 80%, 40%);
  --dangerLight: hsl(355, 80%, 70%);
  --danger1: hsl(355, 80%, 87%);
  --danger2: hsl(355, 80%, 79%);
  --danger3: hsl(355, 80%, 71%);
  --danger4: hsl(355, 80%, 63%);
  --danger5: hsl(355, 80%, 55%);
  --danger6: hsl(355, 80%, 47%);
  --danger7: hsl(355, 80%, 39%);
  --danger8: hsl(355, 80%, 31%);
  --danger9: hsl(355, 80%, 23%);
  --info: hsl(187, 80%, 45%);
  --infoDark: hsl(187, 80%, 30%);
  --infoLight: hsl(187, 80%, 60%);
  --info1: hsl(187, 80%, 77%);
  --info2: hsl(187, 80%, 69%);
  --info3: hsl(187, 80%, 61%);
  --info4: hsl(187, 80%, 53%);
  --info5: hsl(187, 80%, 45%);
  --info6: hsl(187, 80%, 37%);
  --info7: hsl(187, 80%, 29%);
  --info8: hsl(187, 80%, 21%);
  --info9: hsl(187, 80%, 13%);
}
html .m1 {
  margin: 0.5rem !important;
}
html .mh1 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
html .mt1 {
  margin-top: 0.5rem !important;
}
html .mb1 {
  margin-bottom: 0.5rem !important;
}
html .mw1 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}
html .ml1 {
  margin-left: 0.5rem !important;
}
html .mr1 {
  margin-right: 0.5rem !important;
}
html .p1 {
  padding: 0.5rem !important;
}
html .ph1 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
html .pt1 {
  padding-top: 0.5rem !important;
}
html .pb1 {
  padding-bottom: 0.5rem !important;
}
html .pw1 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
html .pl1 {
  padding-left: 0.5rem !important;
}
html .pr1 {
  padding-right: 0.5rem !important;
}
html .m2 {
  margin: 1rem !important;
}
html .mh2 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
html .mt2 {
  margin-top: 1rem !important;
}
html .mb2 {
  margin-bottom: 1rem !important;
}
html .mw2 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}
html .ml2 {
  margin-left: 1rem !important;
}
html .mr2 {
  margin-right: 1rem !important;
}
html .p2 {
  padding: 1rem !important;
}
html .ph2 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
html .pt2 {
  padding-top: 1rem !important;
}
html .pb2 {
  padding-bottom: 1rem !important;
}
html .pw2 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
html .pl2 {
  padding-left: 1rem !important;
}
html .pr2 {
  padding-right: 1rem !important;
}
html .m3 {
  margin: 1.5rem !important;
}
html .mh3 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
html .mt3 {
  margin-top: 1.5rem !important;
}
html .mb3 {
  margin-bottom: 1.5rem !important;
}
html .mw3 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}
html .ml3 {
  margin-left: 1.5rem !important;
}
html .mr3 {
  margin-right: 1.5rem !important;
}
html .p3 {
  padding: 1.5rem !important;
}
html .ph3 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
html .pt3 {
  padding-top: 1.5rem !important;
}
html .pb3 {
  padding-bottom: 1.5rem !important;
}
html .pw3 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
html .pl3 {
  padding-left: 1.5rem !important;
}
html .pr3 {
  padding-right: 1.5rem !important;
}
html .m4 {
  margin: 2rem !important;
}
html .mh4 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}
html .mt4 {
  margin-top: 2rem !important;
}
html .mb4 {
  margin-bottom: 2rem !important;
}
html .mw4 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}
html .ml4 {
  margin-left: 2rem !important;
}
html .mr4 {
  margin-right: 2rem !important;
}
html .p4 {
  padding: 2rem !important;
}
html .ph4 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
html .pt4 {
  padding-top: 2rem !important;
}
html .pb4 {
  padding-bottom: 2rem !important;
}
html .pw4 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
html .pl4 {
  padding-left: 2rem !important;
}
html .pr4 {
  padding-right: 2rem !important;
}
html .m5 {
  margin: 2.5rem !important;
}
html .mh5 {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}
html .mt5 {
  margin-top: 2.5rem !important;
}
html .mb5 {
  margin-bottom: 2.5rem !important;
}
html .mw5 {
  margin-left: 2.5rem !important;
  margin-right: 2.5rem !important;
}
html .ml5 {
  margin-left: 2.5rem !important;
}
html .mr5 {
  margin-right: 2.5rem !important;
}
html .p5 {
  padding: 2.5rem !important;
}
html .ph5 {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}
html .pt5 {
  padding-top: 2.5rem !important;
}
html .pb5 {
  padding-bottom: 2.5rem !important;
}
html .pw5 {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}
html .pl5 {
  padding-left: 2.5rem !important;
}
html .pr5 {
  padding-right: 2.5rem !important;
}
html .m6 {
  margin: 3rem !important;
}
html .mh6 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}
html .mt6 {
  margin-top: 3rem !important;
}
html .mb6 {
  margin-bottom: 3rem !important;
}
html .mw6 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}
html .ml6 {
  margin-left: 3rem !important;
}
html .mr6 {
  margin-right: 3rem !important;
}
html .p6 {
  padding: 3rem !important;
}
html .ph6 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
html .pt6 {
  padding-top: 3rem !important;
}
html .pb6 {
  padding-bottom: 3rem !important;
}
html .pw6 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}
html .pl6 {
  padding-left: 3rem !important;
}
html .pr6 {
  padding-right: 3rem !important;
}
html {
  --roundSize: 0.3em;
  --width: 700px;
  --fontFamily: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  --txColor: #222;
  --bgColor: #fff;
  --borderColor: rgba(0, 0, 0, 0.15);
  --glassBg: rgba(0, 0, 0, 0.25);
  --dropBoxBg: var(--bgColor);
  --formBg: rgba(0, 0, 0, 0.03);
  --focusFormBg: var(--bgColor);
  --formShadow: rgba(0, 0, 0, 0.15);
  --modalBg: var(--bgColor);
  --modalShadow: 0.1em 0.1em 0.6em 0.2em rgba(0, 0, 0, 0.35);
}

[data-theme=dark] {
  --txColor: #ffffff;
  --bgColor: #111221;
  --borderColor: rgba(255, 255, 255, 0.15);
  --glassBg: rgba(255, 255, 255, 0.25);
  --dropBoxBg: #2b2b2b;
  --formBg: rgba(255, 255, 255, 0.06);
  --focusFormBg: var(--bgColor);
  --modalBg: #202236;
  --formShadow: rgba(0, 0, 0, 0.35);
  --modalShadow: 0.1em 0.1em 0.6em 0.2em rgba(255, 255, 255, 0.25);
}

@media screen and (width <= 360px) {
  html {
    font-size: 12.8px !important;
  }
}
@media screen and (width <= 430px) {
  html {
    font-size: 14.4px !important;
  }
}
/* BitPlus 전역 SCSS 통합 번들 Entry Point (Dart Sass @use 규칙 준수) */
/* ==========================================================================
   Html 문서 및 문서 기본 컨트롤 SCSS (_docu.scss)
   ========================================================================== */
html {
  color: var(--txColor);
  background-color: var(--bgColor);
  font-size: 16px;
  font-family: var(--fontFamily);
}
html, html * {
  font-optical-sizing: auto;
  font-style: normal;
  resize: none;
}
html, html:before, html:after, html *, html *:before, html *:after {
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
html:focus, html *:focus {
  outline: none;
}
html, html > body {
  display: block;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  float: left;
}
html a {
  color: var(--txColor);
  text-decoration: none;
}
html .dropDown > span,
html input,
html textarea,
html button,
html .btn {
  font-size: 1rem;
  padding: 0.5em 1em;
  border-radius: var(--roundSize);
  border: 1px solid var(--borderColor);
  transition: all 0.15s ease-in-out;
}
html .dropDown > span:disabled,
html input:disabled,
html textarea:disabled,
html button:disabled,
html .btn:disabled {
  opacity: 0.6 !important;
  pointer-events: none !important;
  cursor: default !important;
}
html input,
html textarea {
  color: var(--txColor);
  background-color: var(--formBg);
  border-color: var(--borderColor);
}
html input::-moz-placeholder, html textarea::-moz-placeholder {
  color: var(--txColor);
}
html input, html input::placeholder,
html textarea,
html textarea::placeholder {
  color: var(--txColor);
}
html input:focus,
html textarea:focus {
  background-color: var(--focusFormBg);
  border-color: var(--glassBg);
  box-shadow: inset 0.1em 0.1em 0.3em 0.1em var(--formShadow);
}
html input:-moz-read-only, html textarea:-moz-read-only {
  box-shadow: none;
}
html input:read-only,
html textarea:read-only {
  box-shadow: none;
}
html input.noFrame,
html textarea.noFrame {
  background-color: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
html input.center,
html textarea.center {
  text-align: center;
}
html input.right,
html textarea.right {
  text-align: right;
}
html input.fullSize,
html textarea.fullSize {
  width: 100%;
}
html textarea {
  resize: vertical;
}
html button,
html .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-weight: 700;
  cursor: pointer;
}
html button:hover:not(:disabled),
html .btn:hover:not(:disabled) {
  border-color: var(--borderColor);
  box-shadow: 0.1em 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.2);
}
html button:active:not(:disabled),
html .btn:active:not(:disabled) {
  box-shadow: inset 0.1em 0.1em 0.3em 0.2em rgba(0, 0, 0, 0.3);
}
html button.main,
html .btn.main {
  background-color: var(--main);
  color: #ffffff !important;
}
html button.main:active:not(:disabled),
html .btn.main:active:not(:disabled) {
  background-color: var(--main6);
}
html button.main:disabled,
html .btn.main:disabled {
  opacity: 0.4 !important;
}
html button.point,
html .btn.point {
  background-color: var(--point);
  color: #ffffff !important;
}
html button.point:active:not(:disabled),
html .btn.point:active:not(:disabled) {
  background-color: var(--point6);
}
html button.point:disabled,
html .btn.point:disabled {
  opacity: 0.4 !important;
}
html button.deco,
html .btn.deco {
  background-color: var(--deco);
  color: #ffffff !important;
}
html button.deco:active:not(:disabled),
html .btn.deco:active:not(:disabled) {
  background-color: var(--deco6);
}
html button.deco:disabled,
html .btn.deco:disabled {
  opacity: 0.4 !important;
}
html button.primary,
html .btn.primary {
  background-color: var(--primary);
  color: #ffffff !important;
}
html button.primary:active:not(:disabled),
html .btn.primary:active:not(:disabled) {
  background-color: var(--primary6);
}
html button.primary:disabled,
html .btn.primary:disabled {
  opacity: 0.4 !important;
}
html button.success,
html .btn.success {
  background-color: var(--success);
  color: #ffffff !important;
}
html button.success:active:not(:disabled),
html .btn.success:active:not(:disabled) {
  background-color: var(--success6);
}
html button.success:disabled,
html .btn.success:disabled {
  opacity: 0.4 !important;
}
html button.warning,
html .btn.warning {
  background-color: var(--warning);
  color: #ffffff !important;
}
html button.warning:active:not(:disabled),
html .btn.warning:active:not(:disabled) {
  background-color: var(--warning6);
}
html button.warning:disabled,
html .btn.warning:disabled {
  opacity: 0.4 !important;
}
html button.danger,
html .btn.danger {
  background-color: var(--danger);
  color: #ffffff !important;
}
html button.danger:active:not(:disabled),
html .btn.danger:active:not(:disabled) {
  background-color: var(--danger6);
}
html button.danger:disabled,
html .btn.danger:disabled {
  opacity: 0.4 !important;
}
html button.info,
html .btn.info {
  background-color: var(--info);
  color: #ffffff !important;
}
html button.info:active:not(:disabled),
html .btn.info:active:not(:disabled) {
  background-color: var(--info6);
}
html button.info:disabled,
html .btn.info:disabled {
  opacity: 0.4 !important;
}
html button.xs,
html .btn.xs {
  font-size: var(--xsSize);
}
html button.sm,
html .btn.sm {
  font-size: var(--smSize);
}
html button.md,
html .btn.md {
  font-size: var(--mdSize);
}
html button.lg,
html .btn.lg {
  font-size: var(--lgSize);
}
html button.xl,
html .btn.xl {
  font-size: var(--xlSize);
}
html button.xxl,
html .btn.xxl {
  font-size: var(--xxlSize);
}
html button.chip,
html .btn.chip {
  border-radius: 9999px;
  padding: 0.35em 0.85em;
  font-size: 0.78em;
  font-weight: 600;
}
html input[type=checkbox],
html input[type=radio] {
  width: auto;
  padding: initial;
  margin: initial;
  border: initial;
  box-shadow: none;
}

/* BitPlus 전역 SCSS 통합 번들 Entry Point (Dart Sass @use 규칙 준수) */
/* ==========================================================================
   BitPlus 컬러 시스템 및 상태 클래스 (_colors.scss)
   ========================================================================== */
.txMain {
  color: var(--main) !important;
}

.bgMain {
  background-color: var(--main) !important;
  color: #ffffff !important;
}

/* 2. Dark / Light 유틸리티 (.txMainDark, .bgMainDark 등) */
.txMainDark {
  color: var(--mainDark) !important;
}

.txMainLight {
  color: var(--mainLight) !important;
}

.bgMainDark {
  background-color: var(--mainDark) !important;
  color: #ffffff !important;
}

.bgMainLight {
  background-color: var(--mainLight) !important;
}

/* 3. 1~9 단계 스케일 유틸리티 (.txMain1~9, .bgMain1~9 등) */
.txMain1 {
  color: var(--main1) !important;
}

.bgMain1 {
  background-color: var(--main1) !important;
}

.txMain2 {
  color: var(--main2) !important;
}

.bgMain2 {
  background-color: var(--main2) !important;
}

.txMain3 {
  color: var(--main3) !important;
}

.bgMain3 {
  background-color: var(--main3) !important;
}

.txMain4 {
  color: var(--main4) !important;
}

.bgMain4 {
  background-color: var(--main4) !important;
}

.txMain5 {
  color: var(--main5) !important;
}

.bgMain5 {
  background-color: var(--main5) !important;
}

.txMain6 {
  color: var(--main6) !important;
}

.bgMain6 {
  background-color: var(--main6) !important;
}

.txMain7 {
  color: var(--main7) !important;
}

.bgMain7 {
  background-color: var(--main7) !important;
}

.txMain8 {
  color: var(--main8) !important;
}

.bgMain8 {
  background-color: var(--main8) !important;
}

.txMain9 {
  color: var(--main9) !important;
}

.bgMain9 {
  background-color: var(--main9) !important;
}

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

.bgPoint {
  background-color: var(--point) !important;
  color: #ffffff !important;
}

/* 2. Dark / Light 유틸리티 (.txMainDark, .bgMainDark 등) */
.txPointDark {
  color: var(--pointDark) !important;
}

.txPointLight {
  color: var(--pointLight) !important;
}

.bgPointDark {
  background-color: var(--pointDark) !important;
  color: #ffffff !important;
}

.bgPointLight {
  background-color: var(--pointLight) !important;
}

/* 3. 1~9 단계 스케일 유틸리티 (.txMain1~9, .bgMain1~9 등) */
.txPoint1 {
  color: var(--point1) !important;
}

.bgPoint1 {
  background-color: var(--point1) !important;
}

.txPoint2 {
  color: var(--point2) !important;
}

.bgPoint2 {
  background-color: var(--point2) !important;
}

.txPoint3 {
  color: var(--point3) !important;
}

.bgPoint3 {
  background-color: var(--point3) !important;
}

.txPoint4 {
  color: var(--point4) !important;
}

.bgPoint4 {
  background-color: var(--point4) !important;
}

.txPoint5 {
  color: var(--point5) !important;
}

.bgPoint5 {
  background-color: var(--point5) !important;
}

.txPoint6 {
  color: var(--point6) !important;
}

.bgPoint6 {
  background-color: var(--point6) !important;
}

.txPoint7 {
  color: var(--point7) !important;
}

.bgPoint7 {
  background-color: var(--point7) !important;
}

.txPoint8 {
  color: var(--point8) !important;
}

.bgPoint8 {
  background-color: var(--point8) !important;
}

.txPoint9 {
  color: var(--point9) !important;
}

.bgPoint9 {
  background-color: var(--point9) !important;
}

.txDeco {
  color: var(--deco) !important;
}

.bgDeco {
  background-color: var(--deco) !important;
  color: #ffffff !important;
}

/* 2. Dark / Light 유틸리티 (.txMainDark, .bgMainDark 등) */
.txDecoDark {
  color: var(--decoDark) !important;
}

.txDecoLight {
  color: var(--decoLight) !important;
}

.bgDecoDark {
  background-color: var(--decoDark) !important;
  color: #ffffff !important;
}

.bgDecoLight {
  background-color: var(--decoLight) !important;
}

/* 3. 1~9 단계 스케일 유틸리티 (.txMain1~9, .bgMain1~9 등) */
.txDeco1 {
  color: var(--deco1) !important;
}

.bgDeco1 {
  background-color: var(--deco1) !important;
}

.txDeco2 {
  color: var(--deco2) !important;
}

.bgDeco2 {
  background-color: var(--deco2) !important;
}

.txDeco3 {
  color: var(--deco3) !important;
}

.bgDeco3 {
  background-color: var(--deco3) !important;
}

.txDeco4 {
  color: var(--deco4) !important;
}

.bgDeco4 {
  background-color: var(--deco4) !important;
}

.txDeco5 {
  color: var(--deco5) !important;
}

.bgDeco5 {
  background-color: var(--deco5) !important;
}

.txDeco6 {
  color: var(--deco6) !important;
}

.bgDeco6 {
  background-color: var(--deco6) !important;
}

.txDeco7 {
  color: var(--deco7) !important;
}

.bgDeco7 {
  background-color: var(--deco7) !important;
}

.txDeco8 {
  color: var(--deco8) !important;
}

.bgDeco8 {
  background-color: var(--deco8) !important;
}

.txDeco9 {
  color: var(--deco9) !important;
}

.bgDeco9 {
  background-color: var(--deco9) !important;
}

.txPrimary {
  color: var(--primary) !important;
}

.bgPrimary {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}

/* 2. Dark / Light 유틸리티 (.txMainDark, .bgMainDark 등) */
.txPrimaryDark {
  color: var(--primaryDark) !important;
}

.txPrimaryLight {
  color: var(--primaryLight) !important;
}

.bgPrimaryDark {
  background-color: var(--primaryDark) !important;
  color: #ffffff !important;
}

.bgPrimaryLight {
  background-color: var(--primaryLight) !important;
}

/* 3. 1~9 단계 스케일 유틸리티 (.txMain1~9, .bgMain1~9 등) */
.txPrimary1 {
  color: var(--primary1) !important;
}

.bgPrimary1 {
  background-color: var(--primary1) !important;
}

.txPrimary2 {
  color: var(--primary2) !important;
}

.bgPrimary2 {
  background-color: var(--primary2) !important;
}

.txPrimary3 {
  color: var(--primary3) !important;
}

.bgPrimary3 {
  background-color: var(--primary3) !important;
}

.txPrimary4 {
  color: var(--primary4) !important;
}

.bgPrimary4 {
  background-color: var(--primary4) !important;
}

.txPrimary5 {
  color: var(--primary5) !important;
}

.bgPrimary5 {
  background-color: var(--primary5) !important;
}

.txPrimary6 {
  color: var(--primary6) !important;
}

.bgPrimary6 {
  background-color: var(--primary6) !important;
}

.txPrimary7 {
  color: var(--primary7) !important;
}

.bgPrimary7 {
  background-color: var(--primary7) !important;
}

.txPrimary8 {
  color: var(--primary8) !important;
}

.bgPrimary8 {
  background-color: var(--primary8) !important;
}

.txPrimary9 {
  color: var(--primary9) !important;
}

.bgPrimary9 {
  background-color: var(--primary9) !important;
}

.txSuccess {
  color: var(--success) !important;
}

.bgSuccess {
  background-color: var(--success) !important;
  color: #ffffff !important;
}

/* 2. Dark / Light 유틸리티 (.txMainDark, .bgMainDark 등) */
.txSuccessDark {
  color: var(--successDark) !important;
}

.txSuccessLight {
  color: var(--successLight) !important;
}

.bgSuccessDark {
  background-color: var(--successDark) !important;
  color: #ffffff !important;
}

.bgSuccessLight {
  background-color: var(--successLight) !important;
}

/* 3. 1~9 단계 스케일 유틸리티 (.txMain1~9, .bgMain1~9 등) */
.txSuccess1 {
  color: var(--success1) !important;
}

.bgSuccess1 {
  background-color: var(--success1) !important;
}

.txSuccess2 {
  color: var(--success2) !important;
}

.bgSuccess2 {
  background-color: var(--success2) !important;
}

.txSuccess3 {
  color: var(--success3) !important;
}

.bgSuccess3 {
  background-color: var(--success3) !important;
}

.txSuccess4 {
  color: var(--success4) !important;
}

.bgSuccess4 {
  background-color: var(--success4) !important;
}

.txSuccess5 {
  color: var(--success5) !important;
}

.bgSuccess5 {
  background-color: var(--success5) !important;
}

.txSuccess6 {
  color: var(--success6) !important;
}

.bgSuccess6 {
  background-color: var(--success6) !important;
}

.txSuccess7 {
  color: var(--success7) !important;
}

.bgSuccess7 {
  background-color: var(--success7) !important;
}

.txSuccess8 {
  color: var(--success8) !important;
}

.bgSuccess8 {
  background-color: var(--success8) !important;
}

.txSuccess9 {
  color: var(--success9) !important;
}

.bgSuccess9 {
  background-color: var(--success9) !important;
}

.txWarning {
  color: var(--warning) !important;
}

.bgWarning {
  background-color: var(--warning) !important;
  color: #ffffff !important;
}

/* 2. Dark / Light 유틸리티 (.txMainDark, .bgMainDark 등) */
.txWarningDark {
  color: var(--warningDark) !important;
}

.txWarningLight {
  color: var(--warningLight) !important;
}

.bgWarningDark {
  background-color: var(--warningDark) !important;
  color: #ffffff !important;
}

.bgWarningLight {
  background-color: var(--warningLight) !important;
}

/* 3. 1~9 단계 스케일 유틸리티 (.txMain1~9, .bgMain1~9 등) */
.txWarning1 {
  color: var(--warning1) !important;
}

.bgWarning1 {
  background-color: var(--warning1) !important;
}

.txWarning2 {
  color: var(--warning2) !important;
}

.bgWarning2 {
  background-color: var(--warning2) !important;
}

.txWarning3 {
  color: var(--warning3) !important;
}

.bgWarning3 {
  background-color: var(--warning3) !important;
}

.txWarning4 {
  color: var(--warning4) !important;
}

.bgWarning4 {
  background-color: var(--warning4) !important;
}

.txWarning5 {
  color: var(--warning5) !important;
}

.bgWarning5 {
  background-color: var(--warning5) !important;
}

.txWarning6 {
  color: var(--warning6) !important;
}

.bgWarning6 {
  background-color: var(--warning6) !important;
}

.txWarning7 {
  color: var(--warning7) !important;
}

.bgWarning7 {
  background-color: var(--warning7) !important;
}

.txWarning8 {
  color: var(--warning8) !important;
}

.bgWarning8 {
  background-color: var(--warning8) !important;
}

.txWarning9 {
  color: var(--warning9) !important;
}

.bgWarning9 {
  background-color: var(--warning9) !important;
}

.txDanger {
  color: var(--danger) !important;
}

.bgDanger {
  background-color: var(--danger) !important;
  color: #ffffff !important;
}

/* 2. Dark / Light 유틸리티 (.txMainDark, .bgMainDark 등) */
.txDangerDark {
  color: var(--dangerDark) !important;
}

.txDangerLight {
  color: var(--dangerLight) !important;
}

.bgDangerDark {
  background-color: var(--dangerDark) !important;
  color: #ffffff !important;
}

.bgDangerLight {
  background-color: var(--dangerLight) !important;
}

/* 3. 1~9 단계 스케일 유틸리티 (.txMain1~9, .bgMain1~9 등) */
.txDanger1 {
  color: var(--danger1) !important;
}

.bgDanger1 {
  background-color: var(--danger1) !important;
}

.txDanger2 {
  color: var(--danger2) !important;
}

.bgDanger2 {
  background-color: var(--danger2) !important;
}

.txDanger3 {
  color: var(--danger3) !important;
}

.bgDanger3 {
  background-color: var(--danger3) !important;
}

.txDanger4 {
  color: var(--danger4) !important;
}

.bgDanger4 {
  background-color: var(--danger4) !important;
}

.txDanger5 {
  color: var(--danger5) !important;
}

.bgDanger5 {
  background-color: var(--danger5) !important;
}

.txDanger6 {
  color: var(--danger6) !important;
}

.bgDanger6 {
  background-color: var(--danger6) !important;
}

.txDanger7 {
  color: var(--danger7) !important;
}

.bgDanger7 {
  background-color: var(--danger7) !important;
}

.txDanger8 {
  color: var(--danger8) !important;
}

.bgDanger8 {
  background-color: var(--danger8) !important;
}

.txDanger9 {
  color: var(--danger9) !important;
}

.bgDanger9 {
  background-color: var(--danger9) !important;
}

.txInfo {
  color: var(--info) !important;
}

.bgInfo {
  background-color: var(--info) !important;
  color: #ffffff !important;
}

/* 2. Dark / Light 유틸리티 (.txMainDark, .bgMainDark 등) */
.txInfoDark {
  color: var(--infoDark) !important;
}

.txInfoLight {
  color: var(--infoLight) !important;
}

.bgInfoDark {
  background-color: var(--infoDark) !important;
  color: #ffffff !important;
}

.bgInfoLight {
  background-color: var(--infoLight) !important;
}

/* 3. 1~9 단계 스케일 유틸리티 (.txMain1~9, .bgMain1~9 등) */
.txInfo1 {
  color: var(--info1) !important;
}

.bgInfo1 {
  background-color: var(--info1) !important;
}

.txInfo2 {
  color: var(--info2) !important;
}

.bgInfo2 {
  background-color: var(--info2) !important;
}

.txInfo3 {
  color: var(--info3) !important;
}

.bgInfo3 {
  background-color: var(--info3) !important;
}

.txInfo4 {
  color: var(--info4) !important;
}

.bgInfo4 {
  background-color: var(--info4) !important;
}

.txInfo5 {
  color: var(--info5) !important;
}

.bgInfo5 {
  background-color: var(--info5) !important;
}

.txInfo6 {
  color: var(--info6) !important;
}

.bgInfo6 {
  background-color: var(--info6) !important;
}

.txInfo7 {
  color: var(--info7) !important;
}

.bgInfo7 {
  background-color: var(--info7) !important;
}

.txInfo8 {
  color: var(--info8) !important;
}

.bgInfo8 {
  background-color: var(--info8) !important;
}

.txInfo9 {
  color: var(--info9) !important;
}

.bgInfo9 {
  background-color: var(--info9) !important;
}

/* BitPlus 전역 SCSS 통합 번들 Entry Point (Dart Sass @use 규칙 준수) */
/* ==========================================================================
   순수 Html 엘리먼트 또는 엘리먼트 집합에 직접 적용되는 클래스 정의
   - SCSS Nesting, DRY & camelCase 규정 준수
   - HTML 시맨틱 목록(ul/li) 및 부모 래퍼 계층 중첩 구조
   ========================================================================== */
/* 뱃지(Badge) */
.badge {
  font-size: var(--mdSize);
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 400;
  border-radius: var(--roundSize);
  line-height: 1em;
  color: #ffffff !important;
}
.badge.main {
  background-color: var(--main) !important;
  color: #ffffff !important;
}
.badge.point {
  background-color: var(--point) !important;
  color: #ffffff !important;
}
.badge.deco {
  background-color: var(--deco) !important;
  color: #ffffff !important;
}
.badge.primary {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}
.badge.success {
  background-color: var(--success) !important;
  color: #ffffff !important;
}
.badge.warning {
  background-color: var(--warning) !important;
  color: #ffffff !important;
}
.badge.danger {
  background-color: var(--danger) !important;
  color: #ffffff !important;
}
.badge.info {
  background-color: var(--info) !important;
  color: #ffffff !important;
}
.badge.xs {
  font-size: var(--xs) !important;
}
.badge.sm {
  font-size: var(--sm) !important;
}
.badge.md {
  font-size: var(--md) !important;
}
.badge.lg {
  font-size: var(--lg) !important;
}
.badge.xl {
  font-size: var(--xl) !important;
}
.badge.xxl {
  font-size: var(--xxl) !important;
}

.dropDown > span {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  line-height: 1.1em;
  background-color: var(--dropBoxBg);
  cursor: pointer;
}
.dropDown > span > i {
  display: block;
}
.dropDown > span:after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.15em solid currentColor;
  border-bottom: 0.15em solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.25em;
  margin-bottom: 0.12em;
  transition: transform 0.15s;
}
.dropDown.xs > span {
  font-size: var(--xsSize);
}
.dropDown.sm > span {
  font-size: var(--smSize);
}
.dropDown.md > span {
  font-size: var(--mdSize);
}
.dropDown.lg > span {
  font-size: var(--lgSize);
}
.dropDown.xl > span {
  font-size: var(--xlSize);
}
.dropDown.xxl > span {
  font-size: var(--xxlSize);
}
.dropDown.open > span:after {
  transform: rotate(225deg);
}

/* 드롭박스 펼침 애니메이션 (DropdownMenu.svelte의 fly={{ y: 6, duration: 150 }} 모션과 100% 동일) */
@keyframes dropBoxFly {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 드롭박스 */
.dropBox {
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  position: absolute;
  top: calc(100% + 0.16em);
  left: 0;
  min-width: 100%;
  width: -moz-max-content;
  width: max-content;
  background: var(--dropBoxBg);
  border: 1px solid var(--borderColor);
  border-radius: var(--roundSize);
  box-shadow: 0.1em 0.1em 0.5em 0.1em rgba(0, 0, 0, 0.25);
  padding: 0.4em;
  margin: 0;
  z-index: 99;
  overflow-y: auto;
}
.dropBox.opened {
  display: block;
  animation: dropBoxFly 0.15s ease-out forwards;
}
.dropBox.right {
  left: auto;
  right: 0;
}
.dropBox.up {
  bottom: calc(100% + 0.16em);
  top: auto;
}

/* 드롭다운 부모 컨테이너 (.open) 시맨틱 연동 */
.open {
  position: relative;
}
.open > .dropBox {
  display: flex;
  animation: dropBoxFly 0.15s ease-out forwards;
}

/* 드롭다운 메뉴 카드 ul 시맨틱 목록 팝업 */
ul.dropBox {
  list-style: none;
  /* 드롭다운 li 목록 아이템 (너비 100%, 밑줄 완전 제거, 시맨틱 li 구조) */
}
ul.dropBox > li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  text-align: left;
  padding: 0.5em 1em;
  background: transparent;
  border: none !important;
  border-radius: 0.4em;
  color: var(--txColor);
  font-size: 0.9em;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
ul.dropBox > li span {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
}
ul.dropBox > li:hover:not(.disabled):not(.divider) {
  background: var(--point);
  color: white;
  text-decoration: none !important;
}
ul.dropBox > li:hover:not(.disabled):not(.divider) span {
  text-decoration: none !important;
}
ul.dropBox > li.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
ul.dropBox > li {
  /* 항목 간 경계 구분선 */
}
ul.dropBox > li.divider {
  display: block;
  height: 1px;
  background: var(--border-color, #e2e8f0);
  margin: 0.4rem 0;
  padding: 0;
  cursor: default;
  border: none !important;
}

.open {
  position: relative;
}
.open > .dropBox {
  display: block;
}

.btnGroup {
  display: inline-flex;
  vertical-align: middle;
}
.btnGroup > .btn, .btnGroup > button, .btnGroup > .dropdownControl {
  position: relative;
  flex: 1 1 auto;
}
.btnGroup > .btn:not(.dropdownControl), .btnGroup > .btn.dropdownControl > button, .btnGroup > button:not(.dropdownControl), .btnGroup > button.dropdownControl > button, .btnGroup > .dropdownControl:not(.dropdownControl), .btnGroup > .dropdownControl.dropdownControl > button {
  margin-left: -1px;
  border-color: rgba(0, 0, 0, 0.2) !important;
  border-radius: 0;
  height: 100%;
  box-shadow: none !important;
  overflow: hidden;
  position: relative;
}
.btnGroup > .btn:not(.dropdownControl):hover::before, .btnGroup > .btn.dropdownControl > button:hover::before, .btnGroup > button:not(.dropdownControl):hover::before, .btnGroup > button.dropdownControl > button:hover::before, .btnGroup > .dropdownControl:not(.dropdownControl):hover::before, .btnGroup > .dropdownControl.dropdownControl > button:hover::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.2);
}
.btnGroup > .btn:not(.dropdownControl):active, .btnGroup > .btn.dropdownControl > button:active, .btnGroup > button:not(.dropdownControl):active, .btnGroup > button.dropdownControl > button:active, .btnGroup > .dropdownControl:not(.dropdownControl):active, .btnGroup > .dropdownControl.dropdownControl > button:active {
  box-shadow: inset 0.1em 0.1em 0.3em 0.2em rgba(0, 0, 0, 0.2) !important;
}
.btnGroup > .btn:not(.dropdownControl):active::before, .btnGroup > .btn.dropdownControl > button:active::before, .btnGroup > button:not(.dropdownControl):active::before, .btnGroup > button.dropdownControl > button:active::before, .btnGroup > .dropdownControl:not(.dropdownControl):active::before, .btnGroup > .dropdownControl.dropdownControl > button:active::before {
  content: none;
}
.btnGroup > .btn:hover, .btnGroup > .btn:focus, .btnGroup > .btn:active, .btnGroup > button:hover, .btnGroup > button:focus, .btnGroup > button:active, .btnGroup > .dropdownControl:hover, .btnGroup > .dropdownControl:focus, .btnGroup > .dropdownControl:active {
  z-index: 1;
}
.btnGroup > .btn:first-child, .btnGroup > .btn:first-child > button, .btnGroup > button:first-child, .btnGroup > button:first-child > button, .btnGroup > .dropdownControl:first-child, .btnGroup > .dropdownControl:first-child > button {
  margin-left: 0;
  border-top-left-radius: var(--roundSize);
  border-bottom-left-radius: var(--roundSize);
}
.btnGroup > .btn:last-child, .btnGroup > .btn:last-child > button, .btnGroup > button:last-child, .btnGroup > button:last-child > button, .btnGroup > .dropdownControl:last-child, .btnGroup > .dropdownControl:last-child > button {
  border-top-right-radius: var(--roundSize);
  border-bottom-right-radius: var(--roundSize);
}

/* ==========================================================================
   복합 인풋 그룹 컨트롤 (.inputGroup, .input-group)
   - 텍스트, 아이콘, 버튼, 입력창(input/select/textarea)을 유연하게 결합하는 래퍼
   - camelCase 및 kebab-case 모두 완벽 호환
   ========================================================================== */
.inputGroup {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.inputGroup > * {
  border-radius: 0;
  border-right: none !important;
}
.inputGroup > *:last-child {
  border-right: 1px solid var(--borderColor) !important;
}
.inputGroup > input, .inputGroup > .formControl, .inputGroup > textarea {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.inputGroup > input:not(:first-child), .inputGroup > .formControl:not(:first-child), .inputGroup > textarea:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.inputGroup > input:not(:last-child), .inputGroup > .formControl:not(:last-child), .inputGroup > textarea:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.inputGroup > input:focus, .inputGroup > input:hover, .inputGroup > input:active, .inputGroup > .formControl:focus, .inputGroup > .formControl:hover, .inputGroup > .formControl:active, .inputGroup > textarea:focus, .inputGroup > textarea:hover, .inputGroup > textarea:active {
  z-index: 3;
}
.inputGroup > button, .inputGroup > .btn, .inputGroup > span {
  flex: 0 0 auto;
}
.inputGroup > span {
  width: auto;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--txColor);
  background-color: var(--formBg);
  border: 1px solid var(--borderColor);
  white-space: nowrap;
}
.inputGroup > span.upper {
  text-transform: uppercase;
}
.inputGroup > *:first-child {
  border-top-left-radius: var(--roundSize);
  border-bottom-left-radius: var(--roundSize);
}
.inputGroup > *:last-child {
  border-top-right-radius: var(--roundSize);
  border-bottom-right-radius: var(--roundSize);
}

/* BitPlus 전역 SCSS 통합 번들 Entry Point (Dart Sass @use 규칙 준수) */
/* ==========================================================================
   스벨트 컴포넌트 컨트롤 SCSS (_controls.scss)
   - SCSS Nesting, DRY & camelCase 규정 준수
   - HTML 시맨틱 목록(ul/li) 및 부모 래퍼 계층 중첩 구조
   ========================================================================== */
.routeContainer {
  width: 100%;
  height: 100%;
}

/* 1. 드롭다운 메뉴 컨트롤 (.dropdownControl) */
.dropdownControl {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  /* 드롭다운 토글 버튼 */
}
.dropdownControl > button {
  padding-right: 0.5em;
  /* 화살표 아이콘 회전 모션 */
}
.dropdownControl > button svg:last-child {
  transition: transform 0.2s ease;
}
.dropdownControl > button.isOpen svg:last-child {
  transform: rotate(180deg);
}

/* ==========================================================================
   2. 입력 플로팅 라벨 (.floatingLabel)
   - 포커스 또는 입력 값(value) 존재 시 label이 자동으로 상단 이동
   ========================================================================== */
.floatingLabel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.floatingLabel input,
.floatingLabel textarea {
  width: 100%;
  padding: 1.25rem 0.85rem 0.4rem 0.85rem;
  font-size: 0.92rem;
  color: var(--txColor);
  background-color: var(--bgColor);
  border: 1px solid var(--borderColor);
  border-radius: var(--roundSize, 0.4rem);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.floatingLabel input:focus,
.floatingLabel textarea:focus {
  border-color: var(--main, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.floatingLabel label {
  position: absolute;
  left: 0.85rem;
  top: 0.8rem;
  font-size: 0.88rem;
  color: #64748b;
  pointer-events: none;
  transition: all 0.15s ease-in-out;
  transform-origin: left top;
}
.floatingLabel {
  /* 포커스 중이거나 입력된 값(placeholder-shown 아님)이 존재하는 경우 상단 이동 */
}
.floatingLabel input:not(:-moz-placeholder) ~ label, .floatingLabel textarea:not(:-moz-placeholder) ~ label {
  transform: translateY(-0.45rem) scale(0.78);
  color: var(--main, #6366f1);
  font-weight: 700;
}
.floatingLabel:focus-within label,
.floatingLabel input:not(:placeholder-shown) ~ label,
.floatingLabel textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-0.45rem) scale(0.78);
  color: var(--main, #6366f1);
  font-weight: 700;
}

/* ==========================================================================
   3. Range 범위 슬라이더 (.formRange, input[type="range"])
   - 0~100% 위치 시 좌우 바깥쪽 여백 오프셋 정밀 교정
   - 진행률 선명한 라인 유지
   ========================================================================== */
.formRange,
input[type=range] {
  width: 100%;
  height: 0.45rem;
  background: #e2e8f0;
  border-radius: 1rem;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border: none !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0;
}
.formRange::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.45rem;
  border-radius: 1rem;
  border: none;
}
.formRange::-webkit-slider-thumb,
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--main, #4f46e5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  -webkit-transition: transform 0.15s ease, background 0.15s ease;
  transition: transform 0.15s ease, background 0.15s ease;
  border: 2px solid #ffffff;
  margin-top: -0.35rem; /* 0% 지점 트랙 여백 정밀 교정 */
}
.formRange::-moz-range-track,
input[type=range]::-moz-range-track {
  width: 100%;
  height: 0.45rem;
  border-radius: 1rem;
  border: none;
}
.formRange::-moz-range-thumb,
input[type=range]::-moz-range-thumb {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--main, #4f46e5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border: 2px solid #ffffff;
}

/* ==========================================================================
   3-1. 듀얼 범위 슬라이더 (.dualRange)
   - 두 개의 핸들로 Min ~ Max 사이값 구간을 선택하는 슬라이더
   - 버튼(Thumb)이 트랙 뒤로 깔리지 않도록 z-index 및 투명 트랙 처리
   ========================================================================== */
.dualRange {
  position: relative;
  width: 100%;
  height: 1.5rem;
  display: flex;
  align-items: center;
}
.dualRange .rangeTrack {
  position: absolute;
  width: 100%;
  height: 0.45rem;
  background: #e2e8f0;
  border-radius: 1rem;
  z-index: 1;
}
.dualRange .rangeHighlight {
  position: absolute;
  height: 0.45rem;
  background: var(--main, #4f46e5);
  border-radius: 1rem;
  z-index: 2;
}
.dualRange input[type=range] {
  position: absolute;
  width: 100%;
  background: transparent !important;
  pointer-events: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  z-index: 5;
  margin: 0;
}
.dualRange input[type=range]::-webkit-slider-runnable-track {
  background: transparent !important;
  border: none !important;
}
.dualRange input[type=range]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
          appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--main, #4f46e5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border: 2px solid #ffffff;
  cursor: pointer;
  margin-top: -0.35rem;
  position: relative;
  z-index: 10;
}
.dualRange input[type=range]::-moz-range-track {
  background: transparent !important;
  border: none !important;
}
.dualRange input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--main, #4f46e5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border: 2px solid #ffffff;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

/* ==========================================================================
   4. 토글 스위치 (.toggleSwitch)
   - 색상별 변형 클래스 (.main, .point, .deco, .primary, .success, .warning, .danger, .info)
   ========================================================================== */
.toggleSwitch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.toggleSwitch input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggleSwitch input[type=checkbox]:checked + .switchTrack {
  background-color: var(--main, #4f46e5);
}
.toggleSwitch input[type=checkbox]:checked + .switchTrack::before {
  transform: translateX(18px);
}
.toggleSwitch input[type=checkbox]:disabled + .switchTrack {
  opacity: 0.5;
  cursor: not-allowed;
}
.toggleSwitch .switchTrack {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  background-color: #cbd5e1;
  border-radius: 24px;
  transition: background-color 0.2s ease;
}
.toggleSwitch .switchTrack::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
.toggleSwitch .switchLabel {
  font-size: 0.88rem;
  color: var(--txColor);
  font-weight: 600;
}
.toggleSwitch {
  /* 색상별 변형 지원 */
}
.toggleSwitch.main input[type=checkbox]:checked + .switchTrack {
  background-color: var(--main);
}
.toggleSwitch.point input[type=checkbox]:checked + .switchTrack {
  background-color: var(--point);
}
.toggleSwitch.deco input[type=checkbox]:checked + .switchTrack {
  background-color: var(--deco);
}
.toggleSwitch.primary input[type=checkbox]:checked + .switchTrack {
  background-color: var(--primary);
}
.toggleSwitch.success input[type=checkbox]:checked + .switchTrack {
  background-color: var(--success);
}
.toggleSwitch.warning input[type=checkbox]:checked + .switchTrack {
  background-color: var(--warning);
}
.toggleSwitch.danger input[type=checkbox]:checked + .switchTrack {
  background-color: var(--danger);
}
.toggleSwitch.info input[type=checkbox]:checked + .switchTrack {
  background-color: var(--info);
}

/* ==========================================================================
   5. 커스텀 네모 체크박스 & 원형 라디오 상자 (.customCheck, .customRadio)
   - 못생긴 네이티브 브라우저 체크박스/라디오를 대치하는 세련된 상자 컨트롤
   - 라디오 상자도 선택 시 점 대신 시원한 커스텀 SVG 체크 아이콘 적용
   ========================================================================== */
.customCheck,
.customRadio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--txColor, #0f172a);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.customCheck input[type=checkbox],
.customCheck input[type=radio],
.customRadio input[type=checkbox],
.customRadio input[type=radio] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 1.1em;
  height: 1.1em;
  border: 1px solid var(--border-color, #cbd5e1);
  background-color: var(--bgColor, #ffffff);
  margin: 0;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: all 0.15s ease;
}
.customCheck input[type=checkbox]:hover,
.customCheck input[type=radio]:hover,
.customRadio input[type=checkbox]:hover,
.customRadio input[type=radio]:hover {
  border-color: var(--main, #4f46e5);
}
.customCheck input[type=checkbox]:checked,
.customCheck input[type=radio]:checked,
.customRadio input[type=checkbox]:checked,
.customRadio input[type=radio]:checked {
  background-color: var(--main, #4f46e5);
  border-color: var(--main, #4f46e5);
}
.customCheck input[type=checkbox]:disabled,
.customCheck input[type=radio]:disabled,
.customRadio input[type=checkbox]:disabled,
.customRadio input[type=radio]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.customCheck,
.customRadio {
  /* 네모 체크박스 상자 (SVG 체크 정중앙 배치) */
}
.customCheck input[type=checkbox],
.customRadio input[type=checkbox] {
  border-radius: 0.25rem;
}
.customCheck input[type=checkbox]:checked,
.customRadio input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70% 70%;
}
.customCheck,
.customRadio {
  /* 원형 라디오 상자 (점 대신 시원하게 살짝 삐져나오는 SVG 체크 표시 배치) */
}
.customCheck input[type=radio],
.customRadio input[type=radio] {
  border-radius: 50%;
}
.customCheck input[type=radio]:checked,
.customRadio input[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 88% 88%; /* 살짝 삐져나오도록 88% 비율 지정 */
}
.customCheck,
.customRadio {
  /* 브랜드 및 상태 색상 변형 지원 */
}
.customCheck.main input:checked,
.customRadio.main input:checked {
  background-color: var(--main);
  border-color: var(--main);
}
.customCheck.point input:checked,
.customRadio.point input:checked {
  background-color: var(--point);
  border-color: var(--point);
}
.customCheck.deco input:checked,
.customRadio.deco input:checked {
  background-color: var(--deco);
  border-color: var(--deco);
}
.customCheck.primary input:checked,
.customRadio.primary input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.customCheck.success input:checked,
.customRadio.success input:checked {
  background-color: var(--success);
  border-color: var(--success);
}
.customCheck.warning input:checked,
.customRadio.warning input:checked {
  background-color: var(--warning);
  border-color: var(--warning);
}
.customCheck.danger input:checked,
.customRadio.danger input:checked {
  background-color: var(--danger);
  border-color: var(--danger);
}
.customCheck.info input:checked,
.customRadio.info input:checked {
  background-color: var(--info);
  border-color: var(--info);
}

/* BitPlus 전역 SCSS 통합 번들 Entry Point (Dart Sass @use 규칙 준수) */
/* ==========================================================================
   BitPlus 유틸리티 & SCSS %extend 프리셋 (_utils.scss)
   ========================================================================== */
/* 텍스트 정리 유틸리티 */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/** Extend **/
html .wFull {
  width: 100%;
}
html .hFull {
  height: 100%;
}
html .fullSize {
  width: 100%;
  height: 100%;
}
html .maxFull {
  max-width: 100%;
  max-height: 100%;
}
html .flexRow,
html .flexCell {
  display: flex !important;
  flex-wrap: nowrap;
}
html .flexRow > .fix,
html .flexCell > .fix {
  flex: 0 0 auto;
}
html .flexRow > .auto,
html .flexCell > .auto {
  flex: 1 1 auto;
}
html .flexRow {
  flex-direction: row;
  align-items: center;
  width: 100%;
}
html .flexCell {
  flex-direction: column;
  height: 100%;
}
/** Card **/
html .card {
  --cardBgColor: rgba(0, 0, 0, 0.03);
  --cardBorderColor: rgba(0, 0, 0, 0.05);
  font-size: 1rem;
  display: block;
  padding: 1em;
  margin: 1em 0;
  background-color: var(--cardBgColor);
  border: 1px solid var(--cardBorderColor);
  border-radius: var(--roundSize);
}
html .card > header {
  font-weight: bold;
  color: var(--txColor);
}
html .card > header > small {
  padding: 0.2em 0;
  display: block;
  font-size: 0.8em;
  font-weight: normal;
  opacity: 0.5;
}
html .card > ul {
  width: 100%;
  margin: 0.5em 0;
  padding: 0.5em 0;
  list-style: none;
}
html .card > ul > li {
  display: block;
  width: 100%;
  padding: 0.2em 0.3em;
  margin: 0.1em 0;
  text-align: center;
}
html .card > ul > li.left {
  text-align: left;
}
html .card > ul > li.right {
  text-align: right;
}
html .card > footer {
  padding-top: 0.5em;
}
html .card.nameCard {
  position: relative;
  padding-top: 3em;
}
html .card.nameCard > header {
  --cardBorderColor: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: -3.5em;
  left: calc(50% - 3.5em);
  width: 7em;
  height: 7em;
  padding: 0.35em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bgColor);
  border: 1px solid var(--cardBorderColor);
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(45deg);
  transform-origin: center center;
}
html .card.nameCard > header > span {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid var(--cardBorderColor);
  background-color: var(--cardBgColor);
  color: gray;
  transform: rotate(-45deg);
  transform-origin: center center;
}
html .card.nameCard > header > span > i {
  font-size: 3em;
}
html .card.nameCard > ul {
  padding-bottom: 0;
  margin-bottom: 0;
}
html .card.nameCard > ul > li {
  line-height: 1em;
}
html .card.nameCard > ul > li.title {
  font-size: 2.2em;
}
html .card.nameCard > ul > li > input::-moz-placeholder {
  color: silver;
}
html .card.nameCard > ul > li > input, html .card.nameCard > ul > li > input::placeholder {
  color: silver;
}
html .card.inputCard > footer {
  text-align: right;
}
html .card.inputCard > footer > button {
  padding: 0.2em 0.8em;
}
html .card.contentView {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
html .card.contentView > header {
  flex: 0 0 auto;
  padding: 0.5em 0 0.5em 2em;
  font-size: 1.1em;
  font-weight: bold;
}
html .card.contentView > header > i {
  margin: 0 0 0 -2em;
}
html .card.contentView > header > small {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: end;
  font-size: 0.8em;
  width: 100%;
  padding: 0.5em 0.3em;
}
html .card.contentView > .countDown {
  padding: 0.5em 0;
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
  color: var(--danger);
}
html .card.contentView > .voteWrap {
  width: 100%;
  margin: 0;
  margin-bottom: 0.5em;
  padding: 0;
  list-style: none;
}
html .card.contentView > .voteWrap > li {
  display: block;
  width: 100%;
  padding: 0.3em;
}
html .card.contentView > .voteWrap > li > * {
  width: 100%;
}
html .card.contentView > .voteWrap > li > header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85em;
  padding: 0.5em 0;
}
html .card.contentView > .voteWrap > li > footer {
  height: 6px;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.25);
  overflow: hidden;
}
html .card.contentView > .voteWrap > li > footer > div {
  height: 100%;
  background: var(--point);
}
html .card.contentView > .voteWrap ~ form {
  display: block;
  padding: 0.5em 0.2em;
  margin-bottom: 0.5em;
}
html .card.contentView > .voteWrap ~ small {
  text-align: right;
  opacity: 0.6;
}
html .card.contentView > footer {
  justify-content: space-between;
  align-items: center;
  margin-top: 0.6em;
  padding-top: 0.6em;
  border-top: 1px solid rgba(128, 128, 128, 0.2);
  color: rgba(0, 0, 0, 0.25);
}
html .card.contentView > footer > * {
  cursor: pointer;
}
html .card.contentView > footer > *:hover {
  color: var(--txColor) !important;
}
html .card.contentView > footer > .channelInfo {
  font-weight: bold;
  padding: 0 0.3em;
}
html .contentButtons {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: 0.6em;
  justify-content: flex-end;
}
html .contentButtons > li {
  padding: 0.2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* BitPlus 전역 SCSS 통합 번들 Entry Point (Dart Sass @use 규칙 준수) */
/* ==========================================================================
   BitPlus 3대 전역 레이아웃 SCSS (_layouts.scss)
   - 가변 em 레이아웃 아키텍처 & 시맨틱 CSS Custom Properties 시스템
   - 상위 노드 계층 선택자 중첩 구조 (SCSS Hierarchical Nesting)
   - 전역 레이아웃 총괄 스타일 통합 관리
   ========================================================================== */
#app {
  --maxWidth: 900px;
  height: 100vh;
  width: 100vw;
}
#app > div.wrap {
  height: 100%;
  width: 100%;
  max-width: var(--maxWidth);
  margin: 0 auto;
}

.themeSwitch {
  width: 52px;
  height: 28px;
  border-radius: 14px;
  border: none;
  background-color: var(--glassBg);
  position: relative;
  cursor: pointer;
  padding: 0;
  flex: none;
  box-shadow: none !important;
}
.themeSwitch > span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bgColor);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: left 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deco);
}
.themeSwitch > span > .icon-moon {
  display: none;
}
.themeSwitch > span > .icon-sun {
  display: block;
}

/** Rich editor **/
html [contenteditable=true] {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  display: block;
  min-height: 6em;
  max-height: 16em;
  overflow-y: auto;
  font-size: 1rem;
  padding: 0.5em 1em;
  border-radius: var(--roundSize);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--txLockedColor);
  background-color: rgba(0, 0, 0, 0.03);
  transition: all 0.15s ease-in-out;
}
html [contenteditable=true]:focus {
  background-color: var(--bgColor);
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0.1em 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.15);
}
html [contenteditable=true]:empty:before {
  content: attr(data-placeholder);
  color: gray;
  pointer-events: none;
}
html [contenteditable=true] img {
  max-width: 100%;
  border-radius: calc(var(--roundSize) / 2);
}
html [contenteditable=true] a {
  color: var(--point);
}
html [contenteditable=true] em,
html [contenteditable=true] i {
  font-style: italic !important;
}
html .messageBody em,
html .messageBody i {
  font-style: italic !important;
}
html .editorToolbar {
  display: flex;
  gap: 0.3em;
  margin-bottom: 0.3em;
}
html .editorToolbar button {
  padding: 0.35em 0.6em;
}

/* Dark mode */
[data-theme=dark] [contenteditable=true] {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: white;
}
[data-theme=dark] [contenteditable=true]:focus {
  border-color: rgba(255, 255, 255, 0.15);
}

/** Dark theme **/
[data-theme=dark] .themeSwitch {
  background-color: var(--point);
}
[data-theme=dark] .themeSwitch > span {
  background: var(--bgColor);
  left: 26px;
}
[data-theme=dark] .themeSwitch > span > .icon-moon {
  display: block;
}
[data-theme=dark] .themeSwitch > span > .icon-sun {
  display: none;
}

/** map **/
.leaflet-pane {
  z-index: 90;
}

.leaflet-top,
.leaflet-bottom {
  z-index: 99;
}

.locationPreviewMap ~ button.success {
  padding: 0.5em;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.leaflet-top,
.leaflet-bottom {
  z-index: 800 !important;
}/*# sourceMappingURL=styles.css.map */