/* Enter your custom styles here */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif !important;
}

.testHeader{
    border: 1px solid red;
}

.testFooter{
    border: 1px solid blue;
}

.hr{
    border-top: 1px solid black;
    margin: clamp(12px, 4vh, 24px) 0px;
}




/* 전체 컨테이너 css 조정 */
.gatewayContainer{
    width: 100% !important;
    height: auto;
    max-width: 1400px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 1.25rem clamp(20px, 5vw, 72px);
    position: relative;
    overflow: hidden;
}


/* header 영역 css 조정 */
.logoImg {
    width: 160px !important; 
    height: auto !important;  
    object-fit: contain !important; 
    object-position: left center !important;
}

/* 스위치 컴포넌트 영역 css 조정 */
.themeSwitch:focus,
.themeSwitch *:focus {
    outline: none !important;
    box-shadow: none !important;
}

.themeSwitch {
    cursor: pointer !important;
    height: 30px !important;
    width: 52px !important;
}

.themeSwitch .sapMSwt {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(5px) !important;
    border-radius: 30px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}


.sap_horizon_dark .themeSwitch .sapMSwt.sapMSwtOn {
    background: rgba(0, 89, 87, 0.4) !important; 
}


.themeSwitch .sapMSwtHandle {
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    width: 14px !important;
    height: 14px !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; 
}

.themeSwitch .sapMSwt.sapMSwtOn .sapMSwtHandle {
    transform: translateX(85%) !important;
}
.themeSwitch .sapMSwt.sapMSwtOff .sapMSwtHandle {
    transform: translateX(4%) !important;
}

.themeSwitch::after,
.themeSwitch::before,
.themeSwitch .sapMSwt::after,
.themeSwitch .sapMSwt::before,
.themeSwitch .sapMSwtInner::after,
.themeSwitch .sapMSwtInner::before,
.themeSwitch .sapMSwtHandle::after,
.themeSwitch .sapMSwtHandle::before {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 0 !important; 
}

.sap_horizon .themeSwitch .sapMSwtFocused {
    border-color: rgba(0, 0, 0, 0.15) !important;
}


/* title 영역 css 조정 */
.topTitle {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(32px, 6vh, 64px) clamp(20px, 5vw, 72px) clamp(24px, 4vh, 48px);
    text-align: center;
    margin: 2rem 0px 2rem 0px;
    animation: 1s cubic-bezier(.23, 1, .32, 1) both fadeUp;
}

.textTop {
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    margin: 0px 0px 1rem 0px;
}
.mkt-maintitle{
      max-width: min(820px, 100%);
      word-break: keep-all;
      font-size: 50px;
  }
.maintitle {
    margin: 0px auto;
    max-width: min(820px, 100%);
    font-size: clamp(30px, 2.5vw, 62px);
    line-height: 1.12;
    /* font-weight: 900; */
    letter-spacing: -0.02em;
    word-break: keep-all;
    text-shadow: rgba(0, 20, 18, 0.55) 0px 16px 48px;
}

.textBottom {
    display: block;
    max-width: min(800px, 90%);
    margin: clamp(12px, 2.5vh, 24px) auto 0px auto;
    font-size: clamp(14px, 1vw, 16.5px);
    line-height: 1.85;
    font-weight: 400;
    word-break: keep-all;
    text-shadow: rgba(0, 20, 18, 0.55) 0px 8px 24px;
}


/* gateway 카드 영역 css 조정 */
.box {
    width: 100%;
    height: auto;
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1rem !important;
    transition: all 0.3s ease-in-out !important;
    padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 44px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1) !important;
}


.box:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-5px) !important; 
    cursor: pointer;
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.2) !important;
}

.boxTopTitle{
    margin: 0px 0px 12px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}

.boxMainTitle {
    margin: 0px 0px 14px;
    font-size: clamp(24px, 2.25vw, 42px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

.boxContentTitle{
    margin: 0px 0px clamp(20px, 3vh, 32px);
    font-size: clamp(13px, 1.2vw, 15px);
    line-height: 1.78;
    font-weight: 400;
    word-break: keep-all;
    max-width: 420px;
    min-height: 80px;
}

.boxJsTitle{
    min-width: 300px;
}

.boxJsAction{
    width: 0%;
    height: 1px;
    background-color: var(--sapTextColor) !important;
    transition: width 0.3s ease-in-out;
}


/* article object 영역 css 조정 */
.article, .article2{
    position: fixed;
    aspect-ratio: 1 / 1 !important;
    background: radial-gradient(
        circle at center, 
        #EFF7F5 0%,
        #005957 50%,
        #00D2CE 90% 
    ) !important;
    border-radius: 100%;
    filter: blur(60px); 
    opacity: 0.7;
    will-change: transform;
}

.article{
    left: -10%;
    top: 20%;
    z-index: -1;
    width: 45%;
    animation: blobbyMoving 5s ease-in-out infinite Alternate;
}

.article2{
    right: 10%;
    z-index: -1;
    width: 10%;
    bottom: 10%;
    animation: blobbyMoving 15s ease-in-out infinite Alternate;
}

@keyframes blobbyMoving {
    0% {
        /* 처음 위치 */
        transform: translateY(0);
        /* 둥근 원형 베이스 */
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    }
    33% {
        /* 아래로 살짝 내려가면서 찌그러짐 */
        transform: translateY(40px);
        border-radius: 40% 60% 55% 45% / 35% 35% 55% 55%;
    }
    66% {
        /* 위로 올라가면서 가로로 늘어남 */
        transform: translateY(-30px);
        border-radius: 60% 40% 45% 55% / 55% 65% 35% 45%;
    }
    100% {
        /* 다시 돌아옴 */
        transform: translateY(0);
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    }
}


@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}


.dialog-container{
    padding: 10px 32px 20px 32px;
}

.contactDialog .sapMDialogTitle {
    font-weight: 700;
}

.mktConsultBtn {
    /* 초기 그림자 제거 */
    box-shadow: none !important;
}

.dialog-desc-text.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.35 !important;
}

/* UI5 버튼 내부 뼈대 요소 스타일 주입 */
.mktConsultBtn .sapMBtnInner {
    background-color: #ffffff !important; /* 흰색 배경 */
    border: 1px solid #323232 !important; /* 검은 테두리 */
    border-radius: 0.6rem !important;        /* 🔥 둥근 모서리 */
    padding: 0 1.5rem !important;          /* 여백 */
    height: 2rem !important;

    line-height: 2rem;
    
    /* 변화할 때 부드러운 애니메이션 효과 */
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* 버튼 내부 글자 색상 정의 */
.mktConsultBtn .sapMBtnContent {
    color: #000000 !important; /* 검은 글자 */
    font-weight: normal !important;
}

/* --------------------------------------------------------
   [효과] 호버(Hover) 상태 정의
   -------------------------------------------------------- */
.mktConsultBtn.sapMBtnHoverable:not(.sapMBtnActive) .sapMBtnInner:hover {
    background-color: #f0f0f0 !important; /* 옅은 회색 배경 */
    border-color: #323232 !important;
}


/* ========================================================
   🔥 [추가 요청] 가상 선택자 및 모든 상태에서 Outline 완전히 제거 🔥
   UI5는 클릭/포커스 시 가상 선택자(::after)와 Complex box-shadow를 사용합니다.
   이를 !important로 강제 과잉 진압합니다.
   ======================================================== */

/* 1. [가상 선택자] UI5가 포커스 테두리를 그릴 때 쓰는 ::after 요소 완전 삭제 */
.mktConsultBtn .sapMBtnInner::after {
    display: none !important;  /* 요소를 화면에서 완전히 숨김 */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 2. [상태별] 클릭(Active), 포커스(Focus) 시 발생하는 모든 아웃라인/그림자 효과 제거 */
/* :active(네이티브 클릭), :focus(네이티브 포커스), .sapMBtnActive(UI5 클릭클래스) */
.mktConsultBtn .sapMBtnInner:active,
.mktConsultBtn .sapMBtnInner:focus,
.mktConsultBtn.sapMBtnActive .sapMBtnInner {
    outline: none !important;     /* 네이티브 아웃라인 제거 */
    box-shadow: none !important;  /* UI5 특유의 포커스 후광(Halo) 및 그림자 완전 제거 */
    
    /* 클릭 시 배경색은 유지 (사진 속 느낌) */
    background-color: #e5e5e5 !important;
    border-color: #000000 !important;
}

/* 덤: 가끔 ::before에 남는 잔상까지 확인 사살 */
.mktConsultBtn .sapMBtnInner::before {
    display: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
.mkt-maintitle{
      font-size: 34px;
  }
}