@charset "UTF-8";
/* NO CSS*/
#wrap.mode-chatting #quickmenu, #wrap.mode-chatting #main,
#wrap.mode-chatting #sub, #wrap.mode-contents #ai, #wrap.mode-contents #side {
  display: none;
}

#wrap.mode-chatting #ai, #wrap.mode-chatting #side, #wrap.mode-contents #main,
#wrap.mode-contents #sub {
  display: block;
}

.pi-popup.hasTranslate {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 10% !important;
  left: auto !important;
  bottom: auto !important;
}

#wrap {
  overflow: hidden;
}
#wrap.mode-chatting {
  padding-top: var(--header-height);
}
#wrap.mode-chatting .header {
  background: #fff;
  border-bottom: 1px solid #eee;
}
#wrap.mode-chatting .header-logo img {
  transform: translateY(-100%);
}
#wrap.mode-chatting .header-menu-container > ul > li > a {
  color: var(--gray900);
}
#wrap.mode-chatting .header-util-ai button {
  background: var(--orange-light);
}
#wrap.mode-chatting .header-util-ai button svg path,
#wrap.mode-chatting .header-util-ai button span {
  color: var(--orange-dark);
  fill: var(--orange-dark);
}
#wrap.mode-chatting .header-util-close {
  display: block;
}
#wrap.mode-chatting .header-util-sitemap {
  display: none;
}
#wrap:has(.chat-area > *) .chat-intro {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s;
  height: 0;
  min-height: 0;
}

.layout {
  max-width: var(--layout-width);
  margin: 0 auto;
  width: 100%;
  position: relative;
}
@media (max-width: 1480px) {
  .layout {
    max-width: 100%;
    padding: var(--layout-padding);
  }
}

.quickmenu {
  width: 10.6rem;
  background: #fff;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  margin: auto 0;
  right: 4.2rem;
  z-index: 11;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.quickmenu-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3rem 0;
  background: #fff;
}
.quickmenu-item {
  position: relative;
}
.quickmenu-item-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.quickmenu-item-link i {
  font-size: 2.8rem;
  color: var(--point);
}
.quickmenu-item-link img {
  width: 3rem;
  margin-bottom: 0.4rem;
}
.quickmenu-item-title {
  font-size: 1.6rem;
  color: var(--gray700);
}
.quickmenu-topbutton {
  aspect-ratio: 1/1;
  background: #080808;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.8rem;
  border-top: 1px solid #CACACA;
}
.quickmenu-topbutton span {
  font-weight: 400;
  font-size: 1.6rem;
}
@media (max-width: 1740px) {
  .quickmenu {
    right: 0;
    transform: translate(100%, -50%);
  }
}
@media (max-width: 1024px) {
  .quickmenu {
    display: none;
  }
}

.blind {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: 5;
  background: rgba(0, 0, 0, 0.7);
  clip: auto;
  display: none;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 21;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 34.62%, rgba(0, 0, 0, 0) 100%);
}
.header.active .header::after {
  display: none !important;
}
.header.active .header-menu {
  flex-grow: 1;
}
.header.active .header-menu-container::after {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #eee;
  position: absolute;
  top: var(--header-height);
  left: 0;
  z-index: 1;
}
.header.active .header-menu-container .header-background {
  opacity: 1;
  visibility: visible;
}
.header.active .header-menu-2depth {
  opacity: 1;
  visibility: visible;
  transition: 0.3s 0.35s;
}
.header.active, .header.scroll, .header.mobile, .header.sub, .header.fullmenu {
  background: #fff;
}
.header.active::after, .header.scroll::after, .header.mobile::after, .header.sub::after, .header.fullmenu::after {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #eee;
  position: absolute;
  top: 100%;
  left: 0;
}
.header.active .header-logo img, .header.scroll .header-logo img, .header.mobile .header-logo img, .header.sub .header-logo img, .header.fullmenu .header-logo img {
  transform: translateY(-100%);
}
.header.active .header-menu-container > ul > li > a, .header.scroll .header-menu-container > ul > li > a, .header.mobile .header-menu-container > ul > li > a, .header.sub .header-menu-container > ul > li > a, .header.fullmenu .header-menu-container > ul > li > a {
  color: var(--gray900);
}
.header.active .header-util-sitemap button i, .header.scroll .header-util-sitemap button i, .header.mobile .header-util-sitemap button i, .header.sub .header-util-sitemap button i, .header.fullmenu .header-util-sitemap button i {
  background: var(--gray900);
}
.header.active .header-util-ai button, .header.scroll .header-util-ai button, .header.mobile .header-util-ai button, .header.sub .header-util-ai button, .header.fullmenu .header-util-ai button {
  background: var(--orange-light);
}
.header.active .header-util-ai button svg path,
.header.active .header-util-ai button span, .header.scroll .header-util-ai button svg path,
.header.scroll .header-util-ai button span, .header.mobile .header-util-ai button svg path,
.header.mobile .header-util-ai button span, .header.sub .header-util-ai button svg path,
.header.sub .header-util-ai button span, .header.fullmenu .header-util-ai button svg path,
.header.fullmenu .header-util-ai button span {
  color: var(--orange-dark);
  fill: var(--orange-dark);
}
.header.fullmenu .sitemap {
  transform: translateX(0);
}
.header-background {
  background: #fff;
  position: absolute;
  width: 100dvw;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.3);
  transition: opacity 0.25s;
}
.header-container {
  display: flex;
  max-width: 100%;
  width: 100%;
  position: relative;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--header-gap);
  padding: var(--layout-padding);
}
.header-logo {
  width: 18.2rem;
  aspect-ratio: 182/38;
  overflow: hidden;
  flex-shrink: 0;
}
.header-logo a {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.header-logo a img {
  transition: 0.25s;
}
.header-menu {
  margin-left: auto;
  flex-grow: 0;
  transition: 0.5s;
  margin-right: calc(var(--header-gap) / 2 * -1);
}
.header-menu-container {
  display: flex;
  width: 100%;
}
.header-menu-container > ul {
  display: flex;
  width: 100%;
}
.header-menu-container > ul > li {
  position: relative;
  flex: 1;
}
.header-menu-container > ul > li > a {
  font-size: 2.2rem;
  font-weight: 600;
  color: #fff;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
}
.header-menu-container > ul > li:hover > a > span, .header-menu-container > ul > li.active > a > span {
  display: block;
  position: relative;
  color: var(--point);
}
.header-menu-container > ul > li:hover > a > span::after, .header-menu-container > ul > li.active > a > span::after {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  background: var(--point);
  position: absolute;
  bottom: 100%;
  right: -1rem;
  transform: translateY(50%);
  border-radius: 50%;
}
.header-menu-2depth {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 3.3rem 0 6.5rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  width: 100%;
}
.header-menu-2depth > ul {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 2rem;
  flex-grow: 1;
}
.header-menu-2depth > ul::before {
  display: block;
  content: "";
  width: 1px;
  height: 100%;
  background: #EBEBEB;
  position: absolute;
  left: 0;
  top: 0;
}
.header-menu-2depth > ul > li > a {
  line-height: 1.3;
  position: relative;
  padding: 0 2rem;
  font-size: 1.8rem;
  display: flex;
}
.header-menu-2depth > ul > li > a:hover {
  font-weight: 700;
}
.header-menu-2depth > ul > li > a:hover::after {
  display: block;
  content: "";
  width: 3px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--point);
}
.header-menu-2depth > ul > li > a.nowrap {
  white-space: nowrap;
}
.header-menu-3depth {
  display: none;
}
.header-util {
  display: flex;
  gap: 4.8rem;
  align-items: center;
  gap: var(--header-gap);
}
.header-util-ai {
  flex-shrink: 0;
}
.header-util-ai button {
  padding: 0 1.2rem;
  height: 4.4rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.header-util-ai button img {
  width: 1.9rem;
}
.header-util-ai button span {
  color: #fff;
  font-weight: 600;
  font-size: 2rem;
}
.header-util-close {
  display: none;
}
.header-util-close img {
  width: 4.4rem;
}
.header-util-sitemap {
  width: 4.4rem;
}
.header-util-sitemap button {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}
.header-util-sitemap button i {
  background: #fff;
  width: 100%;
  height: 2px;
}
@media (max-width: 1480px) {
  .header-menu-container > ul > li > a {
    padding: 0 1.25rem;
  }
  .header-menu-2depth > ul > li > a {
    font-size: 1.8rem;
  }
}
@media (max-width: 1280px) {
  .header-menu {
    display: none;
  }
}
@media (max-width: 1024px) {
  .header-logo {
    width: 134px;
  }
  .header-menu {
    display: none;
  }
  .header-util-ai button {
    height: 37px;
    gap: 6px;
    padding: 10px 12px;
  }
  .header-util-ai button img {
    width: 16px;
  }
  .header-util-ai button span {
    font-size: 15px;
  }
  .header-util-sitemap {
    width: 28px;
  }
}

.footer {
  padding: 9.5rem 0;
  background: #2D2D2D;
  letter-spacing: 0;
  font-size: 1.8rem;
}
.footer-container {
  display: flex;
  justify-content: space-between;
  color: #fff;
  line-height: 1.4;
  gap: 4rem;
}
.footer-logo {
  display: block;
  margin-bottom: 4rem;
  width: 23.8rem;
  flex-shrink: 0;
}
.footer-link {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.footer-copyrights {
  opacity: 0.7;
}
.footer-copyrights * {
  color: #fff !important;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.footer-contact-item {
  display: flex;
  gap: 5.5rem;
  align-items: center;
  position: relative;
}
.footer-contact-title {
  flex-shrink: 0;
  width: 7.7rem;
  font-size: 2.2rem;
  font-weight: 600;
}
.footer-contact-box {
  width: 32.8rem;
  position: relative;
}
.footer-contact-box-link {
  display: flex;
  justify-content: space-between;
  padding: 0 2.8rem;
  align-items: center;
  background: #202020;
  color: #fff;
  height: 6rem;
  font-size: 1.8rem;
}
.footer-contact-box-link i {
  font-size: 2rem;
}
.footer-contact-box.active .footer-contact-list {
  display: block;
}
.footer-contact-list {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  z-index: 2;
  display: none;
}
.footer-contact-list .footer-contact-box-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.footer-sns {
  display: none;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 48px;
}
.footer-sns-item {
  position: relative;
}
.footer-sns-item#footer-sns-kakao .footer-sns-link {
  background: #F9DA31;
  color: #3C1D1E;
}
.footer-sns-item#footer-sns-facebook .footer-sns-link {
  background: #0A66FF;
  color: #fff;
}
.footer-sns-item#footer-sns-instagram .footer-sns-link {
  background: linear-gradient(142deg, #6919F6 8.75%, #EA3278 52.28%, #EF8D34 95.8%);
  color: #fff;
}
.footer-sns-item#footer-sns-blog .footer-sns-link {
  background: #249C3A;
}
.footer-sns-item#footer-sns-blog .footer-sns-list {
  border-color: #249C3A;
}
.footer-sns-item:hover .footer-sns-list, .footer-sns-item:active .footer-sns-list, .footer-sns-item:focus .footer-sns-list {
  opacity: 1;
  visibility: visible;
}
.footer-sns-link {
  width: 6.2rem;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
}
.footer-sns-link img {
  width: 2.4rem;
}
.footer-sns-list {
  position: absolute;
  bottom: 100%;
  right: 0;
  display: flex;
  background: #fff;
  border-radius: 7.8rem;
  border: 1px solid;
  padding: 1.2rem 1rem;
  opacity: 0;
  visibility: hidden;
}
.footer-sns-list::after {
  display: block;
  content: "";
  width: 11px;
  height: 9px;
  background: url(/public/images/common/blog-list-arrow.svg) no-repeat center center/contain;
  position: absolute;
  top: 100%;
  right: 2.5rem;
}
.footer-sns-list-item {
  padding: 0 1.6rem;
  border-right: 1px solid #e7e7e7;
}
.footer-sns-list-item a {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 1.6rem;
  color: var(--gray660);
}
.footer-sns-list-item:last-of-type {
  border-right: 0;
}
@media (max-width: 1024px) {
  .footer {
    padding-top: 0;
    padding-bottom: 58px;
  }
  .footer-container {
    flex-direction: column-reverse;
    gap: 0;
  }
  .footer-contact {
    gap: 26px 0;
  }
  .footer-contact-family .footer-contact-title {
    display: none;
  }
  .footer-contact-tel span {
    font-size: 15px;
  }
  .footer-contact-title {
    padding-bottom: 0 !important;
    font-size: 16px;
    margin-bottom: 8px;
  }
  .footer-contact-item {
    align-items: flex-start;
    gap: 0;
    flex-direction: column;
  }
  .footer-contact-box {
    width: calc(100% + var(--layout-padding-ratio) * 2);
    margin-left: calc(var(--layout-padding-ratio) * -1);
  }
  .footer-contact-box-link {
    height: 64px;
    width: 100%;
    font-size: 16px;
    padding: 0 28px;
  }
  .footer-contact-box-link i {
    font-size: 18px;
  }
  .footer-information {
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .footer-logo {
    width: 164px;
    margin-bottom: 28px;
  }
  .footer-link {
    gap: 20px;
    font-size: 16px;
    margin-bottom: 16px;
  }
  .footer-coopyrights {
    font-size: 15px;
    gap: 8px;
  }
  .footer-sns {
    display: flex;
  }
}

.sitemap {
  position: fixed;
  top: calc(var(--header-height) + 1px);
  right: 0;
  max-width: 390px;
  width: 100%;
  background: #fff;
  padding: 40px 24px;
  height: calc(100dvh - var(--header-height) - 1px);
  transform: translateX(100%);
  overflow: auto;
  transition: 0.35s;
}
.sitemap-menu-container > ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sitemap-menu-container > ul > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  color: var(--gray900);
  line-height: 1.4;
  font-weight: 600;
  padding: 12.5px 0;
}
.sitemap-menu-container > ul > li:has(.sitemap-menu-2depth) > a::after {
  display: block;
  content: "\ea4e";
  font-family: "remixicon";
  font-size: 24px;
  color: var(--gray900);
}
.sitemap-menu-container > ul > li.active > a {
  color: var(--point);
}
.sitemap-menu-container > ul > li.active > a::after {
  color: var(--point);
  transform: rotate(180deg);
}
.sitemap-menu-container > ul > li.active .sitemap-menu-2depth {
  display: block;
}
.sitemap-menu-2depth {
  margin-top: 16px;
  border-top: 2px solid var(--orange-normal);
  padding: 16px 20px;
  background: var(--gray150);
  display: none;
}
.sitemap-menu-2depth > ul > li {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.sitemap-menu-2depth > ul > li.active > a {
  color: var(--point);
}
.sitemap-menu-2depth > ul > li > a {
  line-height: 2;
  color: var(--gray700);
  font-size: 18px;
  font-weight: 400;
  display: block;
}
.sitemap-menu-3depth:has(> ul > *) {
  padding: 4px 4px 14px;
}
.sitemap-menu-3depth > ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sitemap-menu-3depth > ul > li.active > a {
  color: var(--point);
}
.sitemap-menu-3depth > ul > li > a {
  position: relative;
  display: block;
  padding-left: 12px;
  color: var(--gray700);
  font-size: 16px;
}
.sitemap-menu-3depth > ul > li > a::before {
  display: block;
  content: "";
  width: 4px;
  height: 4px;
  background: #d9d9d9;
  position: absolute;
  left: 0;
  top: 9px;
  border-radius: 50%;
}

#side {
  height: calc(100dvh - var(--header-height));
  width: var(--side-width);
  flex-shrink: 0;
  border-radius: 0 11rem 0 0;
  overflow: hidden;
  background: #FFAF22;
  position: fixed;
  top: var(--header-height);
  left: 0;
  z-index: 5;
  transform: translate(0, 0);
}
#side::before {
  display: none;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(/public/images/plani/side-background.png) no-repeat top 70% right 0/33.4rem 60.3rem;
  mix-blend-mode: overlay;
  z-index: -1;
  opacity: 0.5;
}
#side .side-video {
  position: absolute;
  top: 60%;
  transform: translateX(20%) translateY(-50%) rotate(30deg);
  left: 0;
  width: 50.2rem;
  aspect-ratio: 1/1;
  mix-blend-mode: lighten;
  z-index: -1;
  opacity: 0.3;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#side .side-video video {
  mix-blend-mode: normal !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  filter: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: transparent !important; /* 투명 배경 강제 */
  display: block; /* inline 하위 디폴트 방지 */
  transform: translateZ(0); /* GPU 강제 가속 처리 */
  will-change: transform, opacity;
  z-index: 1;
  /* Safari 미디어 컨트롤 전체 숨기기 */
  /* 오버레이 플레이 버튼, 시작 재생 버튼 숨기기 */
}
#side .side-video video::-webkit-media-controls, #side .side-video video::-webkit-media-controls-panel, #side .side-video video::-webkit-media-controls-enclosure {
  background: transparent !important;
}
#side .side-video video::-webkit-media-controls-overlay-play-button, #side .side-video video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
#side .side-container {
  padding: 8rem 5.2rem;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  height: 100%;
}
#side .side-icon {
  width: 4rem;
  aspect-ratio: 1/1;
  overflow: hidden;
  margin: 0 auto;
  display: none;
}
#side .side-icon img {
  width: 100%;
}
#side .side-slogan {
  width: 3.1rem;
  display: none;
}
#side .side-title {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: #fff;
  line-height: 1.3;
}
#side .side-title span {
  font-size: 2.4rem;
  font-weight: 200;
}
#side .side-title strong {
  font-size: 3.6rem;
  font-weight: 700;
}
#side .side-message {
  color: var(--orange-darker);
}
#side .side-message-title {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2.1rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
#side .side-message-title img {
  width: 3.5rem;
  transform: translateY(-0.15rem);
}
#side .side-message-desc {
  font-size: 1.8rem;
  font-weight: 400;
}
#side .side-message-notice-title {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  align-items: center;
}
#side .side-message-notice-title span {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
#side .side-message-notice-desc {
  font-size: 1.4rem;
  line-height: 1.6;
  opacity: 0.8;
  letter-spacing: -0.02em;
}
#side .side-navigation {
  display: flex;
  flex-direction: column;
  overflow: auto;
  align-items: center;
}
#side .side-navigation-title {
  flex-shrink: 0;
  display: flex;
  gap: 0.6rem;
  color: var(--gray900);
  line-height: 1.3;
  text-wrap: balance;
  margin-top: auto;
  font-size: 1.8rem;
}
#side .side-navigation-title span {
  font-weight: 500;
  line-height: 1.3;
}
#side .side-navigation-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex-grow: 1;
  width: 100%;
}
#side .side-navigation-item {
  padding: 0.75rem 2.4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: 5.4rem;
  width: 100%;
  text-align: left;
  border-radius: 5rem;
  background: var(--orange-dark);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  overflow: hidden;
  color: #fff;
  line-height: 1;
}
#side .side-navigation-item i {
  font-size: 2rem;
  opacity: 0.5;
  font-weight: 400;
}
#side .side-navigation-item span {
  font-weight: 400;
  font-size: 1.6rem;
}
@media (max-width: 1024px) {
  #side {
    display: none !important;
  }
}

@supports (-webkit-touch-callout: none) {
  .side::before {
    display: block !important;
  }
  .side-video {
    display: none !important;
  }
}
#ai .container {
  width: 100%;
  padding-left: var(--side-width);
  height: calc(100dvh - var(--header-height));
  display: flex;
  flex-direction: column;
}
@media (max-width: 1024px) {
  #ai .container {
    padding-left: 0;
  }
}

.chat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 4rem;
  max-height: calc(100dvh - var(--header-height));
  height: 100%;
}
.chat-container {
  flex-grow: 1;
  padding-bottom: 4rem;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  word-break: break-all;
}
.chat-wrapper {
  overflow-y: auto;
  flex-grow: 1;
  padding: var(--contents-padding);
  padding-bottom: 16rem;
  padding-top: 8.4rem;
}
.chat-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 100%;
}
.chat-intro-image {
  display: block;
  width: 10.5rem;
  margin-bottom: 4rem;
}
.chat-intro-image-container {
  width: 100%;
}
.chat-intro-image img,
.chat-intro-image video {
  width: 100%;
  height: auto;
}
.chat-intro-title {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.3;
  color: #000;
  letter-spacing: -0.02em;
}
.chat-recommend {
  max-width: var(--contents-width-mini);
  margin: 0 auto;
  width: 100%;
  margin-bottom: 6.5rem;
  display: none;
}
.chat-recommend-title {
  margin-bottom: 1.2rem;
}
.chat-recommend-title strong {
  display: block;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gray900);
  letter-spacing: -0.02em;
  margin-bottom: 4rem;
}
.chat-recommend-title p {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gray700);
}
.chat-recommend-navigation {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.chat-recommend-navigation-item {
  display: flex;
  gap: 0.8rem;
  border: 1px solid var(--gray300);
  height: 5.2rem;
  padding: 0 2.4rem;
  background: #fff;
  border-radius: 1.2rem;
  font-size: 1.6rem;
  align-items: center;
  text-align: left;
}
.chat-recommend-navigation-item i {
  font-size: 2rem;
  opacity: 0.5;
}
.chat-area {
  display: flex;
  flex-direction: column;
  padding: 0 0.8rem;
  word-break: break-all;
  position: relative;
  max-width: var(--chat-width);
  margin: 0 auto;
}
.chat-area > *:last-of-type {
  margin-bottom: 0 !important;
}
.chat-area .message {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.chat-area .message-box {
  background: var(--message-user-box);
  color: var(--message-user-color);
  border-radius: var(--message-border-radius);
  position: relative;
  font-size: var(--component-fontSize);
  line-height: 1.6;
  letter-spacing: 0;
}
.chat-area .message-box::after {
  display: block;
  content: "";
  width: 1.4rem;
  height: 1.7rem;
  position: absolute;
  bottom: 0;
  background: var(--message-arrow-image);
  transform: var(--message-arrow-position);
}
.chat-area .message-box h2 {
  font-size: var(--h3);
  text-align: left;
  padding: 1.2rem 0 0.8rem;
  color: var(--gray900);
  margin: 0;
}
.chat-area .message-box h3 {
  font-size: var(--h4);
  text-align: left;
  padding: 1.2rem 0 0.8rem;
  color: var(--gray900);
  margin: 0;
}
.chat-area .message-box h4 {
  font-size: 2rem;
  padding: 1.2rem 0 0.8rem;
  font-weight: 500;
  color: var(--gray900);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
}
.chat-area .message-box > p b {
  font-weight: 500;
  color: var(--gray900);
}
.chat-area .message-box ul {
  padding: 0.8rem 0.4rem 1.6rem;
}
.chat-area .message-box ul > li {
  margin-bottom: 0.4rem;
  position: relative;
  padding-left: 1.2rem;
}
.chat-area .message-box ul > li::before {
  display: block;
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  background: var(--gray700);
  position: absolute;
  top: 1rem;
  left: 0;
  border-radius: 50%;
}
.chat-area .message-box a {
  text-decoration: underline;
  text-underline-position: under;
}
.chat-area .message-box a:hover {
  font-weight: bold;
}
.chat-area .message-box table {
  margin: 2rem 0;
}
.chat-area .message.user {
  --message-user-box: var(--orange-darker);
  --message-user-color: #fff;
  --message-border-radius: 1.2rem 1.2rem 0 1.2rem;
  --message-arrow-image: url("/public/images/common/message-user.svg") no-repeat center center / contain;
  --message-arrow-position: translate(0.8rem, 0.4rem);
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: 2.4rem;
}
.chat-area .message.user .message-box {
  padding: 1.2rem 2rem;
  max-width: 85%;
}
.chat-area .message.user .message-box::after {
  right: 0;
}
.chat-area .message.assistant {
  --message-user-color: var(--gray700);
  justify-content: flex-start;
  margin-bottom: 0.8rem;
}
.chat-area .message.assistant .message-box::after {
  left: 0;
}
.chat-area .message.loading {
  color: red;
}
.chat-area .message.loading .message-box {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgb(0, 0, 0), rgba(0, 0, 0, 0.2));
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s infinite linear;
}
.chat-area .message.loading .message-box img {
  width: 2rem;
}
.chat-area .util {
  margin: 2.4rem 0;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.chat-area .util-copy {
  padding: 0 1.6rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--black100);
  color: var(--gray600);
  font-weight: 500;
  border-radius: var(--component-radius-lg);
  font-size: 1.4rem;
  line-height: 1;
}
.chat-area .util-satisfaction {
  display: flex;
  gap: 0.4rem;
}
.chat-area .util-satisfaction i {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.8rem;
  color: var(--gray600);
}
.chat-area .util-satisfaction-good.active i::before {
  content: "\f206";
}
.chat-area .util-satisfaction-bad.active i::before {
  content: "\f204";
}
.chat-area .recommend {
  margin: 2.4rem 0;
  padding: 1.6rem 0 2.4rem;
}
.chat-area .recommend-title {
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gray800);
}
.chat-area .recommend-title i {
  font-size: 1.8rem;
}
.chat-area .recommend-title span {
  font-size: 1.6rem;
  font-weight: 500;
}
.chat-area .recommend-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--gray300);
}
.chat-area .recommend-item {
  padding: 1.4rem 2.4rem;
  display: flex;
  border-bottom: 1px solid var(--gray300);
  background: #fff;
  flex: 1;
  color: var(--gray700);
  line-height: 1.4;
  position: relative;
  gap: 0.4rem;
  text-align: left;
}
.chat-area .recommend-item::before {
  display: block;
  content: "\ef46";
  font-family: "remixicon";
  font-size: 1.8rem;
  color: var(--gray400);
  line-height: 1;
  margin-top: 0.175rem;
}
.chat-area .recommend-item::after {
  display: block;
  content: "\ea6c";
  font-family: "remixicon";
  font-size: 1.8rem;
  color: var(--gray400);
  line-height: 1;
  margin: auto;
  margin-right: 0;
}
.chat-area .recommend-item:hover {
  background: var(--gray100);
}
.chat-box {
  position: relative;
}
.chat-box::after {
  display: block;
  content: "";
  width: 100%;
  height: calc(9.5rem - 1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 85.29%);
  position: absolute;
  bottom: calc(100% + 1px);
  left: 0;
}
.chat-box-wrapper {
  margin: 0 auto;
  flex-shrink: 0;
  border-radius: 0.8rem;
  border: 3px solid var(--point);
  background: #fff;
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  position: relative;
  display: flex;
  width: 104rem;
  max-width: calc(100% - var(--contents-padding-px) * 2);
  align-items: center;
  flex-wrap: wrap;
  padding-right: 0.8rem;
  padding: 4rem 2rem 2rem 4rem;
  flex-direction: column;
  gap: 0.8rem;
  cursor: text;
}
.chat-box-wrapper:has(.chat-box-area:focus) {
  border-color: var(--gray900);
}
.chat-box-container {
  width: 100%;
  height: 2.5rem;
  overflow: hidden;
}
.chat-box-area {
  height: 100%;
  font-size: 1.6rem;
  padding: 0 0.8rem 0 0;
  border: none;
  width: 100%;
  flex-grow: 1;
  background: transparent !important;
  color: var(--gray700);
  outline: none;
  font-weight: 400;
  word-break: break-all;
  resize: none;
  padding-right: 1rem;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 1.4;
  max-height: 10.6rem;
}
.chat-box-area::-moz-placeholder {
  font-style: normal;
  font-weight: 400;
  color: var(--gray600);
  opacity: 0.8;
}
.chat-box-area::placeholder {
  font-style: normal;
  font-weight: 400;
  color: var(--gray600);
  opacity: 0.8;
}
.chat-box-submit {
  width: 4.8rem;
  aspect-ratio: 1/1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--component-radius-md);
  background: var(--gray1000);
  margin-left: auto;
  color: #fff;
  font-size: 1.8rem;
}
.chat-box-submit img.disable-image {
  width: 2.4rem;
  display: none;
}
.chat-box-submit img.enable-image {
  width: 2rem;
  display: block;
}
.chat-box-submit.sending img.disable-image {
  display: block;
}
.chat-box-submit.sending img.enable-image {
  display: none;
}
.chat-box-controller {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 1.2rem);
  height: 3.2rem;
  padding: 0.8rem 1.2rem;
  background: #fff;
  border: 1px solid var(--gray300);
  color: var(--gray700);
  font-size: 1.4rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 1.2rem;
  gap: 0.4rem;
  opacity: 0;
  visibility: hidden;
}
.chat-box-controller i {
  font-size: 1.6rem;
}
.chat-box-controller:hover {
  border: 1px solid var(--gray300);
  background: var(--gray100);
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.12);
}
@media (max-width: 1280px) {
  .chat-wrapper {
    padding-top: 4rem;
    padding-bottom: 12rem;
  }
  .chat-intro-title {
    font-size: 2.4rem;
  }
}
@media (max-width: 1024px) {
  .chat-box-wrapper {
    padding: 2rem;
  }
}
@media (max-width: 768px) {
  .chat-container {
    padding-bottom: 2.4rem;
  }
  .chat-box::after {
    height: calc(4.5rem - 1px);
  }
  .chat-area .recommend-item {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}