@charset "UTF-8";
/*!
 * Clean Blog theme layer — SLIM 판 (Cosmo 고정 테마용)
 * 베이스: /vendor/bootswatch/cosmo/bootstrap.min.css (Bootswatch 5.3.8 = Bootstrap 5.3.8 기반)
 * 이 파일은 Cosmo 위에 얹는 "브랜드/구조 커스텀"만 포함한다:
 *   - 표준 컴포넌트를 재색칠하던 규칙(.btn-primary/.form-control 등)은 제외 → Cosmo 팔레트가 보이도록
 *   - 유지: 소셜버튼(kakao/naver 등), #mainNav/마스트헤드/main_banner/post-preview,
 *     커스텀 유틸리티(fs-*/fc-*/mt-con/mb-sm-* 등), 한글 폰트
 * 생성: styles.css에서 Cosmo(표준) 셀렉터에 없는 규칙만 추출.
 */

/* --- 한글 폰트 보존 (Cosmo 기본 Source Sans Pro 대신 Pretendard) ---
   Cosmo가 :root,[data-bs-theme=light] 로 폰트변수를 잡고 var() 간접참조를 쓰므로,
   변수 + body/heading 에 직접 지정해 확실히 우선하도록 한다. */
:root, [data-bs-theme="light"] {
  --bs-font-sans-serif: Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-body-font-family: Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
body {
  font-family: Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: Pretendard, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===== 브랜드/구조 커스텀 (styles.css에서 추출) ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.table-striped-columns> :not(caption)>tr> :nth-child(even) {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}
.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link:disabled {
  color: var(--bs-nav-link-disabled-color);
  background-color: transparent;
  border-color: transparent;
}
.nav-pills .nav-link {
  background: none;
  border: 0;
}
.nav-pills .nav-link:disabled {
  color: var(--bs-nav-link-disabled-color);
  background-color: transparent;
  border-color: transparent;
}
.navbar-nav .show>.nav-link,
.navbar-nav .nav-link.active {
  color: var(--bs-navbar-active-color);
}
.accordion-flush .accordion-collapse {
  border-width: 0;
}
.accordion-flush .accordion-item {
  border-right: 0;
  border-left: 0;
}
.accordion-flush .accordion-item:first-child {
  border-top: 0;
}
.accordion-flush .accordion-item:last-child {
  border-bottom: 0;
}
.alert-primary .alert-link {
  color: #00404e;
}
.alert-secondary .alert-link {
  color: #34383c;
}
.alert-success .alert-link {
  color: #0c4128;
}
.alert-info .alert-link {
  color: #066173;
}
.alert-warning .alert-link {
  color: #7a5d03;
}
.alert-danger .alert-link {
  color: #6a1a21;
}
.alert-light .alert-link {
  color: #4f5050;
}
.alert-dark .alert-link {
  color: #101214;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  z-index: 1;
  color: var(--bs-list-group-action-hover-color);
  text-decoration: none;
  background-color: var(--bs-list-group-action-hover-bg);
}
.list-group-item-action:active {
  color: var(--bs-list-group-action-active-color);
  background-color: var(--bs-list-group-action-active-bg);
}
.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
  color: #005061;
  background-color: #b8d0d4;
}
.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #005061;
  border-color: #005061;
}
.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
  color: #41464b;
  background-color: #cbccce;
}
.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #41464b;
  border-color: #41464b;
}
.list-group-item-success.list-group-item-action:hover,
.list-group-item-success.list-group-item-action:focus {
  color: #0f5132;
  background-color: #bcd0c7;
}
.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #0f5132;
  border-color: #0f5132;
}
.list-group-item-info.list-group-item-action:hover,
.list-group-item-info.list-group-item-action:focus {
  color: #087990;
  background-color: #badce3;
}
.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #087990;
  border-color: #087990;
}
.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
  color: #997404;
  background-color: #e6dbb9;
}
.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #997404;
  border-color: #997404;
}
.list-group-item-danger.list-group-item-action:hover,
.list-group-item-danger.list-group-item-action:focus {
  color: #842029;
  background-color: #dfc2c4;
}
.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #842029;
  border-color: #842029;
}
.list-group-item-light.list-group-item-action:hover,
.list-group-item-light.list-group-item-action:focus {
  color: #636464;
  background-color: #e5e5e5;
}
.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #636464;
  border-color: #636464;
}
.list-group-item-dark.list-group-item-action:hover,
.list-group-item-dark.list-group-item-action:focus {
  color: #141619;
  background-color: #bebebf;
}
.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #141619;
  border-color: #141619;
}
.btn-kakao {
  background-color: #FEE500;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #ECD501;
  --bs-btn-hover-border-color: #ECD501;
  --bs-btn-focus-shadow-rgb: 38, 151, 175;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #ECD501;
  --bs-btn-active-border-color: #ECD501;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000000;
  --bs-btn-disabled-bg: #ECD501;
  --bs-btn-disabled-border-color: #ECD501;
}
.btn-kakao:hover {
  background-color: #ECD501;
  --bs-btn-hover-border-color: #ECD501;
}
.btn-naver {
  background-color: #03C75A;
  color: #ffffff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #02B853;
  --bs-btn-hover-border-color: #02B853;
  --bs-btn-focus-shadow-rgb: 38, 151, 175;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #02B853;
  --bs-btn-active-border-color: #02B853;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #02B853;
  --bs-btn-disabled-border-color: #02B853;
}
.btn-naver:hover {
  background-color: #02B853;
  --bs-btn-hover-border-color: #02B853;
}
.carousel-dark .carousel-control-prev-icon,
.carousel-dark .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}
.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: #000;
}
.carousel-dark .carousel-caption {
  color: #000000;
}
.link-convert {
  color: #000000 !important;
  text-decoration: underline;
}
.link-convert:hover,
.link-convert:focus {
  color: #0085A1 !important;
  text-decoration: underline;
}
.bottom-30 {
  bottom: 30% !important;
}
.mt-45 {
  margin-top: 2.5rem !important;
}
.mb-45 {
  margin-bottom: 2.5rem !important;
}
.fs-bigtitle {
  font-size: 2.375rem !important;
  font-weight: 800;
}
.fs-midtitle {
  font-size: 1.85rem !important;
  font-weight: 800;
  margin-bottom: 2.5rem;
}
.fs-title {
  font-size: 1.6rem !important;
  font-weight: 700;
}
/* 문서 구조(heading)를 위해 <p class="fs-title"> 을 <h3> 로 바꿨다.
   h3 의 기본 아래여백(0.5rem)이 p(1rem)보다 좁아 간격이 틀어지므로 p 와 동일하게 맞춘다. */
h3.fs-title {
  margin-top: 0;
  margin-bottom: 1rem;
}
/* 우측 플로팅 사이드바(#sideNavBar)는 뷰포트 우측에 fixed 로 떠 있어, 화면이 충분히 넓지 않으면
   본문 컨테이너 위를 덮는다(제목·문단이 버튼 뒤로 잘려 보임).
   .mt-con 은 사이드바가 있는 헤더(header/headerA)를 쓰는 페이지에서만 쓰인다.

   필요한 여백 = 사이드바가 차지하는 폭(약 215px) - 컨테이너 바깥 여백(gutter)
   gutter 는 (뷰포트 - 컨테이너폭)/2 이므로 화면이 넓어질수록 커지고, 그만큼 덜 비워도 된다.
   화면이 충분히 넓어 겹치지 않으면 max() 가 기본값 12px 를 고르므로 본문이 좁아지지 않는다. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .mt-con { padding-right: max(12px, calc(215px - (100vw - 960px) / 2)); }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .mt-con { padding-right: max(12px, calc(215px - (100vw - 1140px) / 2)); }
}
@media (min-width: 1400px) {
  .mt-con { padding-right: max(12px, calc(215px - (100vw - 1320px) / 2)); }
}
.fs-subtle {
  font-size: 1.625rem !important;
  font-weight: 800;
}
.fs-smsubtle {
  font-size: 1.4375rem !important;
  font-weight: 700;
}
.fs-label {
  font-size: 1.0625rem !important;
  font-weight: 700;
}
.fs-55 {
  font-size: 1.125rem !important;
}
.fs-7 {
  font-size: 0.9375rem !important;
}
.fs-8 {
  font-size: 0.875rem !important;
}
.fs-9 {
  font-size: 0.8125rem !important;
}
.fs-10 {
  font-size: 0.75rem !important;
}
.fs-11 {
  font-size: 0.6875rem !important;
}
.fs-12 {
  font-size: 0.625rem !important;
}
@media (min-width: 576px) {
  .mt-sm-15 {
    margin-top: 0.4375rem !important;
  }
  .mt-sm-35 {
    margin-top: 1.25rem !important;
  }
  .mt-sm-37 {
    margin-top: 1.375rem !important;
  }
  .mt-sm-42 {
    margin-top: 2rem !important;
  }
  .mt-sm-45 {
    margin-top: 2.5rem !important;
  }
  .mt-sm-6 {
    margin-top: 5rem !important;
  }
  .mt-con {
    margin-top: 7rem !important;
  }
  .me-sm-25 {
    margin-right: 0.875rem !important;
  }
  .mb-sm-25 {
    margin-bottom: 0.9375rem !important;
  }
  .mb-sm-35 {
    margin-bottom: 1.4375rem !important;
  }
  .mb-sm-45 {
    margin-bottom: 2.5rem !important;
  }
  .mb-sm-55 {
    margin-bottom: 3.75rem !important;
  }
  .mb-sm-6 {
    margin-bottom: 5rem !important;
  }
  .mb-sm-7 {
    margin-bottom: 7rem !important;
  }
  .px-sm-05 {
    padding-right: 0.1875rem !important;
    padding-left: 0.1875rem !important;
  }
  .px-sm-45 {
    padding-right: 1.75rem !important;
    padding-left: 1.75rem !important;
  }
  .py-sm-05 {
    padding-top: 0.1875rem !important;
    padding-bottom: 0.1875rem !important;
  }
  .py-sm-35 {
    padding-top: 1.125rem !important;
    padding-bottom: 1.125rem !important;
  }
  .gap-sm-35 {
    gap: 1.25rem !important;
  }
  .gap-sm-45 {
    gap: 1.875rem !important;
  }
  .gap-sm-6 {
    gap: 3.125rem !important;
  }
  .gap-sm-7 {
    gap: 3.125rem !important;
  }
}
p a {
  text-decoration: underline;
}
.form-floating input,
.form-floating textarea {
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.form-floating input:focus,
.form-floating textarea:focus {
  box-shadow: none;
}
.form-floating label {
  color: #000;
}
#mainNav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  border-bottom: 1px solid #dee2e6;
  background-color: #fff;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  border-bottom: 1px solid #E6E6E6;
  min-height: 60px;
  padding-top: 0;
  padding-bottom: 0;
}
/* 메뉴 높이 60px 고정: 로고와 nav-link 세로 패딩을 축소 */
#mainNav .navbar-brand img,
#mainNav h2 img {
  max-height: 36px;
}
@media (min-width: 992px) {
  #mainNav .navbar-nav > li.nav-item > a.nav-link {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}
#mainNav .navbar-brand {
  font-weight: 800;
}
#mainNav .navbar-toggler {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.75rem;
  text-transform: uppercase;
}
#mainNav .navbar-nav>li.nav-item>a.nav-link {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}
@media (min-width: 992px) {
  #mainNav {
    
    
    background: transparent;
  }
  #mainNav .navbar-brand {
    color: #fff;
  }
  #mainNav .navbar-brand:focus,
  #mainNav .navbar-brand:hover {
    color: rgba(255, 255, 255, 0.8);
  }
  #mainNav .navbar-nav>li.nav-item>a.nav-link {
    color: #000;
    
  }
  #mainNav .navbar-nav>li.nav-item>a.nav-link:focus,
  #mainNav .navbar-nav>li.nav-item>a.nav-link:hover {
    color: rgba(14, 103, 219, 1);
  }
}
@media (min-width: 992px) {
  #mainNav {
    transition: background-color 0.2s;
    
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #mainNav.is-fixed {

    position: fixed;
    top: -61px;
    transition: transform 0.2s;
    border-bottom: 1px solid white;
    background-color: rgba(255, 255, 255, 0.9);
  }
  #mainNav.is-fixed .navbar-brand {
    color: #212529;
  }
  #mainNav.is-fixed .navbar-brand:focus,
  #mainNav.is-fixed .navbar-brand:hover {
    color: #0085A1;
  }
  #mainNav.is-fixed .navbar-nav>li.nav-item>a {
    color: #212529;
  }
  #mainNav.is-fixed .navbar-nav>li.nav-item>a:focus,
  #mainNav.is-fixed .navbar-nav>li.nav-item>a:hover {
    color: #0085A1;
  }
  #mainNav.is-visible {
    
    transform: translate3d(0, 100%, 0);
  }
}
footer {
  padding-top: 2.375rem;
  padding-bottom: 2.375rem;

}
header.masthead {
  position: relative;
  margin-bottom: 2rem;
  padding-top: calc(8rem + 57px);
  padding-bottom: 8rem;
  background: no-repeat center center;
  background-color: pink;
  background-size: cover;
  background-attachment: scroll;
  display: none;
  
}
header.masthead:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  opacity: 0.5;
}
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
  color: #fff;
}
header.masthead .page-heading,
header.masthead .site-heading {
  text-align: center;
}
header.masthead .page-heading h1,
header.masthead .page-heading .h1,
header.masthead .site-heading h1,
header.masthead .site-heading .h1 {
  font-size: 3rem;
}
header.masthead .page-heading .subheading,
header.masthead .site-heading .subheading {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.1;
  display: block;
  margin-top: 0.625rem;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
header.masthead .post-heading h1,
header.masthead .post-heading .h1 {
  font-size: 2.25rem;
}
header.masthead .post-heading .meta,
header.masthead .post-heading .subheading {
  line-height: 1.1;
  display: block;
}
header.masthead .post-heading .subheading {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.75rem 0 2rem;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
header.masthead .post-heading .meta {
  font-size: 1.25rem;
  font-weight: 300;
  font-style: italic;
  font-family: "Lora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
header.masthead .post-heading .meta a {
  color: #fff;
}
@media (min-width: 992px) {
  header.masthead {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }
  header.masthead .page-heading h1,
  header.masthead .page-heading .h1,
  header.masthead .site-heading h1,
  header.masthead .site-heading .h1 {
    font-size: 5rem;
  }
  header.masthead .post-heading h1,
  header.masthead .post-heading .h1 {
    font-size: 3.5rem;
  }
  header.masthead .post-heading .subheading {
    font-size: 1.875rem;
  }
}
.section-heading {
  font-size: 2.25rem;
  font-weight: 700;
  margin-top: 3.75rem;
}
.caption {
  font-size: 0.875rem;
  font-style: italic;
  display: block;
  margin: 0;
  padding: 0.625rem;
  text-align: center;
}
.post-preview {
  color: #212529;
}
.post-preview>a:focus,
.post-preview>a:hover {
  text-decoration: none;
  color: #0085A1;
}
.post-preview>.post-title {
  font-size: 1.875rem;
  margin-top: 1.875rem;
  margin-bottom: 0.625rem;
}
.post-preview>.post-subtitle {
  font-weight: 300;
  margin-bottom: 0.625rem;
}
.post-preview>.post-meta {
  font-size: 1.2rem;
  font-style: italic;
  margin-top: 0;
  color: #6c757d;
}
.post-preview>.post-meta>a {
  text-decoration: none;
}
@media (min-width: 992px) {
  .post-preview>a>.post-title {
    font-size: 2.25rem;
  }
  .postimg {
    width: 65%;
  }
}
footer {
  background-color: var(--bs-gray-900);
  margin-top: 100px;
}
.font-sans {
  font-family: Pretendard, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.fc-gray-30 {
  color: var(--bs-gray-300) !important;
}
.fc-gray-40 {
  color: var(--bs-gray-400) !important;
}
.fc-gray-50 {
  color: var(--bs-gray-500) !important;
}
.fc-gray-60 {
  color: var(--bs-gray-600) !important;
}
.fc-gray-70 {
  color: var(--bs-gray-700) !important;
}
.fc-gray-80 {
  color: var(--bs-gray-800) !important;
}
.fc-blue-3 {
  color: #1398EA !important;
}
.dp-inline-b {
  display: inline-block;
}
.dp-inline {
  display: inline;
}
.dp-b {
  display: block;
}
.con_text {
  font-size: 1rem;
}
.main_banner {
  margin-top: 3.75rem;
  height: 120px;
  overflow: hidden;
  justify-items: center;
}
@media (max-width: 1399px) {
  .main_banner {
    height: 96px;
  }
}
@media (max-width: 1199px) {
  .main_banner {
    height: 90px;
  }
}
@media (max-width: 991px) {
  .main_banner {
    margin-top: 3.5rem;
    height: 72px;
  }
}
@media (max-width: 575px) {
  .main_banner {
    height: 48px;
  }
}
.main_banner h2 {
  height: 100%;
  width: 100%;
}
/* 배너 이미지를 화면 전체 폭에 꽉 차게(위아래 크롭) */
.main_banner img {
  height: 100%;
  width: 100% !important;
  object-fit: cover;
  display: block;
}
/* 배너 바로 아래 첫 컨텐츠 영역을 배너에서 50px 떨어뜨림 */
.main_banner + .container.mt-con {
  margin-top: 50px !important;
}
#main_con .intro_process,
#main_con .intro_conversion,
.try_conversion,
.try_regen,
.view-reference {
  display: flex;
}
.try_conversion iframe { aspect-ratio: 5/2.81; }
@media (max-width: 991px) {
  #main_con .intro_process,
  #main_con .intro_conversion,
  .try_conversion,
  .try_regen,
  .view-reference {
    flex-direction: column;
  }
}
#main_con p,
#main_con hr {
  margin: 0;
  padding: 0;
}
#main_con .intro_process>.left_con,
#main_con .intro_conversion>.left_con,
.try_conversion>.left_con,
.try_regen>.left_con,
.view-reference>.left_con {
  flex-grow: 1;
}
/* 01 분석 설계단계 / 02 개발 및 테스트 단계 (.intro_process) 와
   자동변환 결과 - 스크립트&데이터셋 / 컴포넌트 (.intro_conversion).
   flex-grow 로 남는 폭을 나눠 갖게 두면, 우측 콘텐츠(이미지·ROI 표)의 최소 폭이 제각각이라
   블록마다 좌우 경계가 어긋난다. 좌우 폭을 고정해 모든 줄을 나란히 맞춘다.
   우측은 flex-shrink 를 살려 둬, 화면이 좁아 774px 가 안 나올 때는 줄어들며 넘치지 않게 한다. */
@media (min-width: 992px) {
  #main_con .intro_process>.left_con,
  #main_con .intro_conversion>.left_con {
    flex: 0 0 320px;
    width: 320px;
  }
  #main_con .intro_process>.right_con,
  #main_con .intro_conversion>.right_con {
    flex: 0 1 774px;
    width: 774px;
    max-width: 774px;
  }
}
.right_con {
  width: 980px;
}
@media (max-width: 1399px) {
  .right_con {
    width: 840px;
  }
}
@media (max-width: 1199px) {
  .right_con {
    width: 660px;
  }
  .mt-con {
    margin-top: 5rem !important;
  }
}
@media (max-width: 991px) {
  .mt-con {
    margin-top: 4rem !important;
  }
  .media-none {
    display: none;
  }
  .right_con {
    width: 100%;
  }
  .media-transform {
    margin-top: 0.5rem !important;
  }
  .main_banner img {
    transform: scale(1.2);
  }
  .media-btn {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    font-size: 1rem;
    font-weight: 700;
  }
}
@media (max-width: 767px) {
  .media-margin-rl-xs {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
}
@media (max-width: 575px) {
  .fs-title {
    font-size: 1.4rem !important;
  }
  .fs-midtitle {
    font-size: 1.55rem !important;
    margin-bottom: 2rem;
  }
  .view-reference,
  .intro_conversion,
  .try_conversion,
  .try_regen,
  .intro_process {
    margin-bottom: 4rem;
  }
  .media-transform {
    margin-top: 0.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .media-margin {
    margin: 1.25rem 0 !important;
  }
  .media-margin-bt {
    margin-bottom: 2rem;
  }
  .view-reference .right_con .reference-logo {
    width: 120px !important;
  }
  .main_banner img {
    transform: scale(1.5);
  }
  .mt-con {
    margin-top: 2rem !important;
  }
  .media-margin-tp_s {
    margin-top: 1.5rem;
  }
  .media-margin-tp_ss {
    margin-top: 1rem;
  }
  .media-margin-rg-xs {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .media-btn {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    font-size: 0.85rem;
    font-weight: 700;
  }
}
.right_con img {
  object-fit: cover;
  width: 100%;
}
#main_con .sec_introduce-01,
#main_con .sec_introduce-02,
#main_con .sec_introduce-03 {
  margin-bottom: 6.25rem;
}
#btn-login {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bs-btn-color);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #0E67DB;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#btn-login:hover {
  background-color: #1E7CF6;
}
.btn-login-sns {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  border: 0px;
  margin-top: 1.375rem !important;
  margin-bottom: 1.4375rem !important;
  padding: 0;
}
#btn-pw-resetting {
  font-size: 1.125rem;
  font-weight: 500;
  border: 0px;
  background-color: transparent;
  font-size: 0.875rem;
  color: var(--bs-gray-700);
}
.input-label {
  font-size: 1rem;
  font-weight: 700;
  color: #686868;
}
.view-reference .right_con img {
  width: 100%;
}
.view-reference .right_con .reference-logo {
  width: 160px;
  margin-bottom: 0.9375rem;
  height: auto;
}
.btn-try {
  background-color: #E8F6FF;
  border: 3px solid #1398EA;
  color: #333333;
  border-radius: 0.375rem;
}
.btn-try:hover {
  background-color: #CAEBFF;
  border: 3px solid #0181D0;
  color: #333333;
}
.btn-try:disabled {
  background-color: #E4E4E4;
  border: 0px;
  color: #999999;
}
.main_banner h2 {
  margin: 0;
  padding: 0;
}
.number-round {
  height: 21px;
  padding: 0 6px 0 6px;
  display: inline-block;
  background-color: #005BAA;
  border-radius: 100px;
  color: white;
  text-align: center;
  align-items: center;
  line-height: 115%;
  margin-right: 0.5rem;
}
.description-box {
  background-color: #F1F1F1;
  color: #555555;
  padding: 25px;
  font-size: 0.9375rem;
  border-radius: 5px;
}
.img-wrap-flex {
  display: flex;
  justify-content: space-between;
}
.img-wrap-flex>.img-Result,
.img-wrap-flex .img-half {
  width: 50% !important;
}
#sideNavBar {
  background-color: white;
  border: 1px solid #BDBDBD;
  border-radius: 6px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
  /* 마크업의 .bottom-30(=bottom:30%) 보다 100px 더 위로 띄운다.
     .bottom-30 이 !important 라서 여기서도 !important 가 필요하다. */
  bottom: calc(30% + 100px) !important;
}
.btn-wrap-flex-row {
  display: flex;
  flex-direction: column;
}
.btn-transpare {
  background-color: transparent;
  color: #686868;
  font-size: 0.9375rem;
  font-weight: 700;
  border: 0;
  padding: 0.375rem 1.75rem 0.375rem 1.75rem;
  transition: color 0.2s, background-color 0.2s;
}
/* 우측 플로팅 버튼(체험/문의) 구분선 여백 축소 → 박스 높이 약 2/3 */
#sideNavBar hr {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
/* 우측 플로팅 버튼 3개(체험/문의/리스타일러) 아이콘·라벨 왼쪽 정렬.
   아이콘 실제 크기가 제각각(24px·22px PNG, 아이콘폰트)이라 24px 고정 박스에 담아 세로줄을 맞춘다.
   object-fit:none — PNG를 원본 크기 그대로 두고 박스 안에서 가운데 정렬만(확대 방지). */
#sideNavBar .btn-transpare {
  text-align: left;
}
#sideNavBar .btn-transpare img,
#sideNavBar .btn-transpare .bi {
  display: inline-block;
  width: 24px;
  height: 24px;
  object-fit: none;
  text-align: center;
  vertical-align: middle;
}
/* text-stroke는 아이콘 폰트 획을 PNG(Material 계열) 굵기에 맞추기 위한 것(Chromium/WebKit 한정) */
#sideNavBar .btn-transpare .bi {
  font-size: 1.125rem;
  line-height: 24px;
  -webkit-text-stroke: 0.4px currentColor;
}

/* 컨버전/Re:Gen 단계 버튼(.media-btn)과 업로드 모달의 파일선택 버튼(#btn-open-file) —
   지금 누를 수 있는 버튼에만 클릭 어포던스를 준다.
   비활성 단계는 평평하게 눌러 두어 대비로 활성 버튼이 도드라지게 함. */
.media-btn:not(:disabled),
#btn-open-file:not(:disabled),
#btn-file-upload:not(:disabled) {
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(39, 128, 227, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.media-btn:not(:disabled):hover,
#btn-open-file:not(:disabled):hover,
#btn-file-upload:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(39, 128, 227, 0.45);
  filter: brightness(1.07);
}
.media-btn:not(:disabled):active,
#btn-open-file:not(:disabled):active,
#btn-file-upload:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(39, 128, 227, 0.4);
}
.media-btn:disabled {
  cursor: not-allowed;
  box-shadow: none;
}

/* ── 파일 업로드 모달(#fileModal) ─────────────────────────────────────
   마크업은 modal.js 계약(#file-box에 li 생성, name=rdoGroup 조회)을 그대로 두고
   스타일만 정돈한다. */
#fileModal .modal-content {
  border: 0;
  border-radius: 0.75rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
#fileModal .modal-header {
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background-color: var(--bs-gray-100);
}
/* 기존 <h2>|</h2> 구분자를 대체 */
#fileModal .modal-title {
  margin: 0;
  padding-right: 1rem;
  border-right: 2px solid var(--bs-border-color);
  font-weight: 700;
  white-space: nowrap;
}
#fileModal .convert-type .form-check {
  margin-bottom: 0.125rem;
  font-size: 0.9375rem;
}
#fileModal .convert-type .form-check:last-child {
  margin-bottom: 0;
}
#fileModal .convert-type .form-check-label {
  cursor: pointer;
}
#fileModal .modal-notice {
  padding: 1rem 1.25rem;
  background-color: #fff8f8;
  border-bottom: 1px solid var(--bs-border-color);
}
#fileModal .modal-notice-list {
  margin: 0;
  padding-left: 1.125rem;
  color: var(--bs-danger);
  font-size: 0.9375rem;
  line-height: 1.7;
}
#fileModal .modal-notice-info {
  margin: 0.625rem 0 0;
  color: var(--bs-primary);
  font-size: 0.875rem;
}
/* =============================================================================
   흰 바탕 오로라 배경 (/main)
   - 밤하늘 오로라를 밝은 페이지에 옮기면 대비가 무너져 글자가 흐려진다.
     그래서 어둡게 깔지 않고, 흰 바탕을 물들이는 '옅은 빛 번짐'으로 표현한다.
   - 본문(z-index:1) 뒤(z-index:0)에 고정으로 깔리고, 커튼은 크게 blur 해서
     경계와 무늬가 생기지 않게 한다. 글자 뒤에는 균일한 색만 남아 대비가 유지된다.
   ========================================================================== */
.page-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* 본문·배너·헤더·푸터를 오로라 위로 올린다 */
.page-aurora ~ .main_banner,
.page-aurora ~ #main_con,
.page-aurora ~ footer {
  position: relative;
  z-index: 1;
}
.pa-curtain {
  position: absolute;
  filter: blur(110px);
  will-change: transform, opacity;
}
/* 우측 상단 — 민트 (오로라의 주색) */
.pa-curtain-1 {
  top: -20%;
  right: -6%;
  width: 46%;
  height: 130%;
  background: linear-gradient(170deg,
    rgba(45, 212, 191, 0) 0%,
    rgba(45, 212, 191, 0.30) 40%,
    rgba(56, 189, 248, 0.20) 75%,
    rgba(56, 189, 248, 0) 100%);
  animation: pa-drift-1 20s ease-in-out infinite alternate;
}
/* 우측 중앙 — 하늘색 → 보라 */
.pa-curtain-2 {
  top: -10%;
  right: 16%;
  width: 34%;
  height: 120%;
  background: linear-gradient(190deg,
    rgba(56, 189, 248, 0) 0%,
    rgba(56, 189, 248, 0.24) 45%,
    rgba(167, 139, 250, 0.20) 80%,
    rgba(167, 139, 250, 0) 100%);
  animation: pa-drift-2 26s ease-in-out infinite alternate;
}
/* 좌측 하단 — 아주 옅은 보라. 화면 전체가 한쪽으로 쏠려 보이지 않게 균형만 잡는다 */
.pa-curtain-3 {
  bottom: -25%;
  left: -8%;
  width: 40%;
  height: 80%;
  background: linear-gradient(20deg,
    rgba(167, 139, 250, 0) 0%,
    rgba(167, 139, 250, 0.16) 55%,
    rgba(45, 212, 191, 0) 100%);
  animation: pa-drift-3 32s ease-in-out infinite alternate;
}
@keyframes pa-drift-1 {
  0%   { transform: rotate(10deg)  translate(0, 0)      scaleX(1);    opacity: 0.75; }
  100% { transform: rotate(16deg)  translate(-40px, 20px) scaleX(1.2); opacity: 1; }
}
@keyframes pa-drift-2 {
  0%   { transform: rotate(-8deg)  translate(20px, 0)   scaleX(1.1);  opacity: 0.6; }
  100% { transform: rotate(-14deg) translate(-24px, 26px) scaleX(0.9); opacity: 0.95; }
}
@keyframes pa-drift-3 {
  0%   { transform: rotate(6deg)   translate(0, 0)      scaleX(1);    opacity: 0.5; }
  100% { transform: rotate(-4deg)  translate(30px, -18px) scaleX(1.15); opacity: 0.8; }
}
/* 화면이 좁으면 본문이 폭을 다 쓰므로 색이 글자 뒤로 들어온다. 더 옅게 물린다. */
@media (max-width: 991px) {
  .page-aurora { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-curtain { animation: none; }
}

#fileModal .modal-body {
  min-height: 240px;
  padding: 1.25rem;
  transition: background-color 0.15s ease;
}
/* 파일을 끌고 들어온 동안의 드롭존 표시 (modal.js 의 initDropzone 이 is-dragover 를 토글) */
#fileModal .modal-body.is-dragover {
  background-color: rgba(39, 128, 227, 0.06);
  outline: 2px dashed #2780e3;
  outline-offset: -8px;
}
#file-box {
  margin: 0;
  padding: 0;
  list-style: none;
}
#file-box li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0.625rem 0.5rem 0.625rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#file-box li:hover {
  border-color: #2780e3;
  box-shadow: 0 2px 8px rgba(39, 128, 227, 0.15);
}
#file-box li .btn-link {
  padding: 0.25rem 0.5rem;
  color: var(--bs-gray-500);
  text-decoration: none;
}
#file-box li .btn-link:hover {
  color: var(--bs-danger);
}
/* 파일 미선택 안내 — modal.js를 건드리지 않고 :empty로 처리(그래서 JSP의 ul은 공백 없이 붙여 씀) */
#file-box:empty::before {
  content: "여기로 파일을 끌어다 놓거나, 우측 상단 ‘파일선택’ 버튼으로 추가하세요. (최대 3개)";
  display: block;
  padding: 3.5rem 1rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 0.75rem;
  color: var(--bs-secondary-color);
  text-align: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
/* 끌고 들어온 동안에는 안내 문구를 "놓으세요"로 바꿔 드롭 가능 상태임을 분명히 한다 */
#fileModal .modal-body.is-dragover #file-box:empty::before {
  content: "여기에 놓으면 파일이 추가됩니다";
  border-color: #2780e3;
  color: #2780e3;
  font-weight: 600;
}
#fileModal .modal-footer {
  padding: 1rem 1.25rem;
  background-color: var(--bs-gray-100);
}
.btn-transpare:hover {
  background-color: #F8F8F8;
  color: #333333;
}
.btn-join {
  font-size: 1.125rem;
  font-weight: 600;
  background-color: #ffffff;
  color: #0E67DB;
  border: 1px solid #0E67DB;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-join:hover {
  background-color: #0E67DB;
  color: #ffffff;
  border: 1px solid #0E67DB;
}
.btn-agree {
  background-color: #333;
  color: #fff;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-agree:hover {
  background-color: #666;
  color: #fff;
}
.btn-newtral {
  color: #777;
  border: 1px solid #C3C3C3;
  background-color: #fff;
}
.btn-newtral:hover {
  border: 1px solid #686868;
  background-color: #fff;
}
.navbar-menu {
  flex-grow: 1;
  margin-left: 11.5rem;
  margin-right: 11.5rem;
}
@media (max-width: 1399px) {
  .navbar-menu {
    margin-left: 6.25rem;
    margin-right: 6.25rem;
  }
}
@media (max-width: 1199px) {
  .navbar-menu {
    margin-left: 3.125rem;
    margin-right: 3.125rem;
  }
}
.right_foot_con {
  display: flex;
  justify-content: end;
  align-items: center;
}
.right_foot_con .sns_wrap {
  margin-bottom: 0;
  margin-right: 1.25rem;
}
.intro_con .experience_wrap {
  display: flex;
  justify-content: space-between;
  padding: 0;
}
.intro_con .experience-item {
  position: relative;
  flex-grow: 1;
  width: 33%;
  height: 480px;
  overflow: hidden;
  transition: width 0.5s;
}
.intro_con .experience-item:hover {
  width: 40%;
}
.intro_con .experience_wrap .experience-item>a {
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden
}
.intro_con .experience-item a>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform: scale(1);
  filter: brightness(0.7);
  transition: transform 0.5s, filter 0.5s;
}
.intro_con .experience-item:hover a>img {
  transform: scale(1.2);
  filter: brightness(0.95);
}
.intro_con .experience-item .inner_text_box {
  width: 80%;
  color: #fff;
  position: absolute;
  top: 35px;
  left: 33px;
  z-index: 2;
}
.intro_con .experience-item .inner_text_box>.card-title-s {
  font-size: 1rem;
  color: #2CAFFF;
  margin-bottom: 0.3125rem;
}
.intro_con .experience-item .inner_text_box>.card-title-l {
  font-size: 1.625rem;
  margin-bottom: 1.625rem;
  font-weight: 700;
}
.intro_con .experience-item .inner_text_box>.card-text {
  font-size: 0.875rem;
  margin-bottom: 1.625rem;
}
.intro_con .experience-item .inner_text_box>.card-config-text {
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
}
/* 인트로 컨텐츠: 60px 메뉴 아래 60px 떨어지도록(=120px) */
.mt-main-con { margin-top: 120px; }
@media (max-width: 1399px) {
  .mt-main-con { margin-top: 110px; }
  .intro_con .experience-item .inner_text_box>.card-text .media-none { display: none; }
}
@media (max-width: 1199px) {
  .intro_con .experience_wrap { gap: 0.875rem !important; }
  .intro_con .experience-item { height: 400px; }
  .intro_con .experience-item .inner_text_box>.card-title-l {
    font-size: 1.35rem;
  }
}
@media (max-width: 991px) {
  .intro_con .experience-item { height: 350px; }
  .intro_con .experience_wrap { gap: 0.625rem !important; }
  .intro_con .experience-item .inner_text_box { width: 85%; top: 22px; left: 20px; }
  .intro_con .experience-item .inner_text_box>.card-text,
.intro_con .experience-item .inner_text_box>.card-title-s { font-size: 0.8125rem; }
  .intro_con .experience-item:hover .inner_go_text { bottom: 30px !important; font-size: 1.125rem; }
}
@media (max-width: 767px) {
  .mt-main-con { margin-top: 100px; }
  .intro_con .experience_wrap { flex-direction: column; }
  .intro_con .experience-item { width: 100%; height: 320px; }
  .intro_con .experience-item:hover { width: 100%; }
}
@media (max-width: 575px) {
  .mt-main-con { margin-top: 90px; }
}
.intro_con .experience-item .inner_go_text {
  z-index: 2;
  color: #fff;
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.intro_con .experience-item:hover .inner_go_text {
  z-index: 2;
  color: #fff;
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.5s ease 0.2s;
  white-space: nowrap;
}
.intro_con .experience-item .btn-experience {
  position: absolute;
  transform: translate(-50%, 50%);
  left: 50%;
  bottom: 15%;
  height: auto;
  width: max-content;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.intro_con .experience-item .btn-experience:hover {
  transition: border 0.3s;
  border: 1px solid rgba(255, 255, 255, 1);
}
.intro_con .experience-item .btn-experience>a {
  display: block;
  padding: 1.125rem 3.5rem 1.125rem 3.5rem;
}