/** @format */
/** @format */
/* NO CSS*/
:root {
  --header-height: 10rem;
  --header-gap: 4rem;
  --layout-padding: 0 40px;
  --layout-width: 1920px;
  --main-width: 1480px;
  --contents-width: 1320px;
  --contents-width-sm: 920px;
  --contents-width-mini: 360px;
  --contents-padding-px: 48px;
  --contents-padding: 0 var(--contents-padding-px);
  --chat-width: 920px;
  --side-width: 40rem;
  --side-width-sm: 12rem;
  --component-radius-sm: 0.8rem;
  --component-radius-md: 1.2rem;
  --component-radius-lg: 36rem;
  --component-radius: 36rem;
  --component-height: 4.6rem;
  --component-height-lg: 5.4rem;
  --component-fontSize: 1.6rem;
  --button-height: 5rem;
  --table-padding: 1.6rem;
  --title-small: 1.8rem;
  --title-topic: 4.8rem;
  --title-topic-sm: 3.2rem;
  --title-topic-lg: 5.6rem;
  --title-desc: 2rem;
  --title-desc-sm: 1.8rem;
}
@media (max-width: 1440px) {
  :root {
    --side-width-sm: 9rem;
    --side-width: 36rem;
    --contents-padding-px: 40px;
  }
}
@media (max-width: 1024px) {
  :root {
    --header-height: 8rem;
  }
}
@media (max-width: 768px) {
  :root {
    --header-height: 5.6rem;
    --contents-padding-px: 20px;
  }
}
@media (max-width: 1440px) {
  :root {
    --brand-title-topic: 4.2rem;
    --brand-title-topic-lg: 4.8rem;
    --brand-title-topic-sm: 2.8rem;
  }
}
@media (max-width: 1280px) {
  :root {
    --title-small: 1.6rem;
    --title-topic: 3.2rem;
    --title-topic-lg: 3.6rem;
    --title-desc: 1.6rem;
    --title-desc-sm: 1.6rem;
  }
}
@media (max-width: 390px) {
  :root {
    --title-topic: 3rem;
    --title-topic-lg: 3.4rem;
  }
}
:root[color-theme=light] {
  --plani: var(--main500);
  --plani-royal: #062FF9;
  --primary: #004b85;
  --primary-hover: var(--main600);
  --main1000: #003866;
  --main900: #004b85;
  --main800: #005da3;
  --main700: #0070c2;
  --main600: #0082e0;
  --main500: #0095ff;
  --main400: #66b8ff;
  --main300: #004b85;
  --main200: #c2e5ff;
  --main100: #e1f1ff;
  --main50: #f0f9ff;
  --gray1000: #000000;
  --gray900: #212529;
  --gray800: #343a40;
  --gray700: #495057;
  --gray600: #6c757d;
  --gray500: #adb5bd;
  --gray400: #ced4da;
  --gray300: #dee2e6;
  --gray200: #e9ecef;
  --gray100: #f8f9fa;
  --gray50: #ffffff;
  --black100: #f5f5f5;
  --black300: #e0e0e0;
  --black800: #424242;
  --orange: #FF6600;
  --green: #00C13A;
}
:root[color-theme=dark] {
  --plani: var(--main500);
  --plani-royal: #062FF9;
  --primary: #004b85;
  --primary-hover: var(--main600);
  --main1000: #003866;
  --main900: #004b85;
  --main800: #005da3;
  --main700: #0070c2;
  --main600: #0082e0;
  --main500: #0095ff;
  --main400: #66b8ff;
  --main300: #004b85;
  --main200: #c2e5ff;
  --main100: #e1f1ff;
  --main50: #f0f9ff;
  --gray1000: #000000;
  --gray900: #212529;
  --gray800: #343a40;
  --gray700: #495057;
  --gray600: #6c757d;
  --gray500: #adb5bd;
  --gray400: #ced4da;
  --gray300: #dee2e6;
  --gray200: #e9ecef;
  --gray100: #f8f9fa;
  --gray50: #ffffff;
  --black100: #f5f5f5;
  --black300: #e0e0e0;
  --black800: #424242;
  --orange: #FF6600;
  --green: #00C13A;
}
@media (prefers-color-scheme: light) {
  :root {
    --plani: var(--main500);
    --plani-royal: #062FF9;
    --primary: #004b85;
    --primary-hover: var(--main600);
    --main1000: #003866;
    --main900: #004b85;
    --main800: #005da3;
    --main700: #0070c2;
    --main600: #0082e0;
    --main500: #0095ff;
    --main400: #66b8ff;
    --main300: #004b85;
    --main200: #c2e5ff;
    --main100: #e1f1ff;
    --main50: #f0f9ff;
    --gray1000: #000000;
    --gray900: #212529;
    --gray800: #343a40;
    --gray700: #495057;
    --gray600: #6c757d;
    --gray500: #adb5bd;
    --gray400: #ced4da;
    --gray300: #dee2e6;
    --gray200: #e9ecef;
    --gray100: #f8f9fa;
    --gray50: #ffffff;
    --black100: #f5f5f5;
    --black300: #e0e0e0;
    --black800: #424242;
    --orange: #FF6600;
    --green: #00C13A;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --plani: var(--main500);
    --plani-royal: #062FF9;
    --primary: #004b85;
    --primary-hover: var(--main600);
    --main1000: #003866;
    --main900: #004b85;
    --main800: #005da3;
    --main700: #0070c2;
    --main600: #0082e0;
    --main500: #0095ff;
    --main400: #66b8ff;
    --main300: #004b85;
    --main200: #c2e5ff;
    --main100: #e1f1ff;
    --main50: #f0f9ff;
    --gray1000: #000000;
    --gray900: #212529;
    --gray800: #343a40;
    --gray700: #495057;
    --gray600: #6c757d;
    --gray500: #adb5bd;
    --gray400: #ced4da;
    --gray300: #dee2e6;
    --gray200: #e9ecef;
    --gray100: #f8f9fa;
    --gray50: #ffffff;
    --black100: #f5f5f5;
    --black300: #e0e0e0;
    --black800: #424242;
    --orange: #FF6600;
    --green: #00C13A;
  }
}

.color-plani {
  color: var(--plani);
}

.color-plani-royal {
  color: var(--plani-royal);
}

.color-primary {
  color: var(--primary);
}

.color-main1000 {
  color: var(--main1000);
}

.color-main900 {
  color: var(--main900);
}

.color-main800 {
  color: var(--main800);
}

.color-main700 {
  color: var(--main700);
}

.color-main600 {
  color: var(--main600);
}

.color-main500 {
  color: var(--main500);
}

.color-main400 {
  color: var(--main400);
}

.color-main300 {
  color: var(--main300);
}

.color-main200 {
  color: var(--main200);
}

.color-main100 {
  color: var(--main100);
}

.color-main50 {
  color: var(--main50);
}

.color-gray1000 {
  color: var(--gray1000);
}

.color-gray900 {
  color: var(--gray900);
}

.color-gray800 {
  color: var(--gray800);
}

.color-gray700 {
  color: var(--gray700);
}

.color-gray600 {
  color: var(--gray600);
}

.color-gray500 {
  color: var(--gray500);
}

.color-gray400 {
  color: var(--gray400);
}

.color-gray300 {
  color: var(--gray300);
}

.color-gray200 {
  color: var(--gray200);
}

.color-gray100 {
  color: var(--gray100);
}

.color-gray50 {
  color: var(--gray50);
}

.color-orange {
  color: var(--orange);
}

.color-green {
  color: var(--green);
}

.bg-plani {
  background: var(--plani);
}

.bg-plani-royal {
  background: var(--plani-royal);
}

.bg-primary {
  background: var(--primary);
}

.bg-main1000 {
  background: var(--main1000);
}

.bg-main900 {
  background: var(--main900);
}

.bg-main800 {
  background: var(--main800);
}

.bg-main700 {
  background: var(--main700);
}

.bg-main600 {
  background: var(--main600);
}

.bg-main500 {
  background: var(--main500);
}

.bg-main400 {
  background: var(--main400);
}

.bg-main300 {
  background: var(--main300);
}

.bg-main200 {
  background: var(--main200);
}

.bg-main100 {
  background: var(--main100);
}

.bg-main50 {
  background: var(--main50);
}

.bg-gray1000 {
  background: var(--gray1000);
}

.bg-gray900 {
  background: var(--gray900);
}

.bg-gray800 {
  background: var(--gray800);
}

.bg-gray700 {
  background: var(--gray700);
}

.bg-gray600 {
  background: var(--gray600);
}

.bg-gray500 {
  background: var(--gray500);
}

.bg-gray400 {
  background: var(--gray400);
}

.bg-gray300 {
  background: var(--gray300);
}

.bg-gray200 {
  background: var(--gray200);
}

.bg-gray100 {
  background: var(--gray100);
}

.bg-gray50 {
  background: var(--gray50);
}

.bg-orange {
  background: var(--orange);
}

.bg-green {
  background: var(--green);
}

@keyframes shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.8rem;
  padding: 1.2rem 2.4rem;
  font-size: 1.6rem;
  height: var(--component-height);
  border-radius: var(--component-radius-md);
  line-height: 1;
}
.button i {
  flex-shrink: 0;
  font-size: 2rem;
}

.component button {
  height: var(--component-height-lg);
}
.component label,
.component select,
.component input[type=text],
.component input[type=tel],
.component input[type=email],
.component input[type=password],
.component textarea {
  height: var(--component-height-lg);
}
.component label:hover,
.component select:hover,
.component input[type=text]:hover,
.component input[type=tel]:hover,
.component input[type=email]:hover,
.component input[type=password]:hover,
.component textarea:hover {
  border-color: var(--gray700);
}
.component label:focus,
.component select:focus,
.component input[type=text]:focus,
.component input[type=tel]:focus,
.component input[type=email]:focus,
.component input[type=password]:focus,
.component textarea:focus {
  outline: none;
  border: 1px solid var(--gray700);
}
.component label:has(input:focus),
.component select:has(input:focus),
.component input[type=text]:has(input:focus),
.component input[type=tel]:has(input:focus),
.component input[type=email]:has(input:focus),
.component input[type=password]:has(input:focus),
.component textarea:has(input:focus) {
  border: 1px solid var(--gray700);
}
.component label::-moz-placeholder, .component select::-moz-placeholder, .component input[type=text]::-moz-placeholder, .component input[type=tel]::-moz-placeholder, .component input[type=email]::-moz-placeholder, .component input[type=password]::-moz-placeholder, .component textarea::-moz-placeholder {
  color: var(--gray600) !important;
}
.component label::placeholder,
.component select::placeholder,
.component input[type=text]::placeholder,
.component input[type=tel]::placeholder,
.component input[type=email]::placeholder,
.component input[type=password]::placeholder,
.component textarea::placeholder {
  color: var(--gray600) !important;
}
.component label:disabled,
.component select:disabled,
.component input[type=text]:disabled,
.component input[type=tel]:disabled,
.component input[type=email]:disabled,
.component input[type=password]:disabled,
.component textarea:disabled {
  background: var(--gray100);
  color: var(--gray500);
}
.component label:disabled::-moz-placeholder, .component select:disabled::-moz-placeholder, .component input[type=text]:disabled::-moz-placeholder, .component input[type=tel]:disabled::-moz-placeholder, .component input[type=email]:disabled::-moz-placeholder, .component input[type=password]:disabled::-moz-placeholder, .component textarea:disabled::-moz-placeholder {
  color: var(--gray500);
}
.component label:disabled::placeholder,
.component select:disabled::placeholder,
.component input[type=text]:disabled::placeholder,
.component input[type=tel]:disabled::placeholder,
.component input[type=email]:disabled::placeholder,
.component input[type=password]:disabled::placeholder,
.component textarea:disabled::placeholder {
  color: var(--gray500);
}
.component label {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray700);
  height: auto;
}
.component input:not([type=checkbox]), .component input:not([type=radio]) {
  display: block;
  width: 100%;
  padding: 0 2rem;
  margin: 0 !important;
  border-radius: 0.8rem;
  overflow: hidden;
  border: 1px solid #ddd;
  color: var(--gray900);
  font-weight: 500;
  line-height: 1.5;
  background: #fff;
  font-style: normal;
}
.component select {
  display: block;
  width: 100%;
  padding: 0 2rem;
  margin: 0 !important;
  border-radius: 0.8rem;
  overflow: hidden;
  border: 1px solid #ddd;
  color: var(--gray600);
  background: #fff url(/public/images/plani/arrow.png) no-repeat right 1.6rem center/1.8rem 1.8rem;
  font-weight: 400;
  line-height: 1.5;
}
.component textarea {
  display: block;
  width: 100%;
  padding: 1.6rem 2rem;
  margin: 0 !important;
  overflow: hidden;
  color: var(--gray900);
  background: #fff;
  font-weight: 500;
  line-height: 1.5;
  resize: none;
  overflow: auto;
  height: 100%;
  padding: 0;
  padding-right: 1rem;
}