/* ==========================================================================
SPINNER
 ========================================================================== */
.spinner { display: none; background-image: url('../../../mobpa/v2/image/spinner.svg'); position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%); z-index: 11; text-align: center; width: 150px; height: 150px; background-color: #ffffff00; background-size: contain; background-repeat: no-repeat; }
.spinner.active { display: block; }

/* ==========================================================================
INPUT
 ========================================================================== */
.input-group .md { height:44px; }
.input-group .sm { height:36px; }
.required-badge { color:#2B7FFF; }
.input-box { display: flex; align-items: center; padding: 12px 16px; width: 100%; border: 1px solid #D1D5DC; border-radius: 8px; }
.input-box input::placeholder { color: #D1D5DC !important; font-size: 14px; line-height: 20px; }

.input-box:has(input:disabled) { background-color: #F3F4F6 !important; color: #99A1AF !important; }
.input-box input:disabled { background-color: #F3F4F6 !important; color: #99A1AF !important; }
.input-box input:disabled:-webkit-autofill { box-shadow: 0 0 0 1000px #F3F4F6 inset !important; -webkit-text-fill-color: #99A1AF !important; color: #99A1AF !important; }
.input-box .eye { background-color: #99A1AF; }
.input-box:has(input.focus-danger, textarea.focus-danger) { border: 1px solid #FB2C36!important; }
.input-box:has(input:focus) { border: 1px solid #2B7FFF; }

.input-box.dark input::placeholder { color: #99A1AF !important; font-size: 14px; line-height: 20px; }
.input-box.dark textarea::placeholder { color: #99A1AF !important; font-size: 14px; line-height: 20px; }
.input-box.dark:has(input[type='file']) { background-color: #282F3E !important; }
.input-group .input-box.dark { border-color: #1E2939; background-color: #101828; }
.input-group .input-box.dark:not(.file):hover { border-color: #99A1AF !important; }
.input-box.dark input:-webkit-autofill { box-shadow: 0 0 0px 1000px #101828 inset !important; -webkit-text-fill-color: #fff !important; transition: background-color 5000s ease-in-out 0s; caret-color: #fff; }


/* ==========================================================================
CHECKBOX
 ========================================================================== */
.checkbox-group { display: flex; align-items: center; gap: 12px; }
.checkbox-group input[type="checkbox"] { width: 20px; height: 20px; margin: unset; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid #D1D5DC; border-radius: 4px; position: relative; cursor: pointer; }
.checkbox-group input[type="checkbox"]:checked { background-color: #2B7FFF; border-color: #2B7FFF; }
.checkbox-group input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 6px; top: 3px; width: 4px; height: 7px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checkbox-group.dark input[type="checkbox"] { border-color: #6A7282; }
.checkbox-group.dark input[type="checkbox"]:checked { background-color: #2B7FFF; border-color: #2B7FFF; }
/* ==========================================================================
SUPPORT MSG
 ========================================================================== */
p.support-msg { display: none; color: #FB2C36; font-size: 12px; line-height: 18px; font-family: Pretendard-Regular; padding-left: 4px; margin-top: 4px; }
p.support-msg.active { display: block; }

/* ==========================================================================
DIM
 ========================================================================== */
.dim { display:none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 10; }
.dim.active { display: flex!important; }

/* ==========================================================================
TOAST MSG
 ========================================================================== */
.toast-container { display: flex; opacity: 0; gap:16px; z-index: 20; position: fixed; top: 80px; left: 50%; transform: translate(-50%, -20px); /* 처음에 위쪽에서 살짝 떠 있음 */transition: opacity 0.3s ease, transform 0.3s ease; border-radius: 8px; padding: 12px 13px; align-items: center; box-shadow: -2px -2px 8px #0000000D, 2px 2px 8px #0000000D; }
.toast-container.active { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast-container .toast-message { display: flex; gap: 8px; pointer-events: none; }
.toast-container .toast-message .toast-message-text { color: #fff; font-size: 13px; line-height: 18px; font-family: Pretendard-Medium; white-space: nowrap; }
.toast-container .toast-message-close , .toast-container .toast-message-icon { display: flex; align-items: center; }
.toast-container.error { background-color: #FB2C36; }
.toast-container.success { background-color: #00BC7D; }
.toast-container.info { background-color: #00A6F4; }


/* ==========================================================================
HEADER
==========================================================================*/

header.white { background-color: #fff !important; border-bottom: 1px solid #F3F4F6!important; }
header.white nav li > a { color: #101828; }
header.white nav li > a:hover { color: #2B7FFF !important; }
header.white nav li.active,
header.white nav li.active > a { color: #2B7FFF !important; }
header.white .dropdown-button { color: #101828; }
header.white .dropdown-button:hover { color: #2B7FFF !important; }
header.white .dropdown-menu { background-color: #fff !important; }
header.white .dropdown-menu .dropdown-item .item-row a { color: #101828; }
header.white .dropdown-menu .dropdown-item .item-row a:hover { background-color: #F9FAFB !important; border-radius: 8px; color:#101828 !important; }
header.white .dropdown-menu { border-color: #fff !important; }

header { position: fixed; top: 0; width: 100%; background-color: #030712 !important; z-index: 10; height: 60px !important; border-bottom: 1px solid #1E2939!important; }
header nav { display: flex !important; padding-left: 40px; padding-right: 40px; height: inherit; }
header nav li > a { color: #99A1AF; }
header nav li > a:hover { color: #fff; }
header .logo { width: 114px; height: 24px; }
header i.hamburger { display: none; }
header .login { font-size: 13px; line-height: 18px; font-family: Pretendard-Medium; border-color: #030712; width: 58px; height: 36px; }
header .login:hover { border:1px solid #fff; }
header .experience { font-size: 13px; line-height: 18px; font-family: Pretendard-Medium; border-color: #030712; width:95px; height: 36px; }


header .dropdown-button { cursor: pointer; color: #99A1AF; display: flex; }
header .dropdown-button:hover { color: #fff; border-radius: 8px; }

header .dropdown-menu { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-10px); transition:
 max-height 0.4s ease,
 opacity 0.3s ease,
 transform 0.3s ease; position: absolute; top: 100%; right:0; border-radius: 12px; background-color: #030712 !important; padding: 8px 0; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1); border: 1px solid #1E2939; pointer-events: none;}
 header .dropdown-menu hr { width: 100%; height: 1px; background-color: #1E2939; margin: 12px 0; border: none; box-sizing: border-box; }
header .dropdown-menu.open { max-height: 2000px; opacity: 1; transform: translateY(0); pointer-events: unset;}
header .dropdown-menu .dropdown-item { padding: 0px 8px; display: flex; flex-direction: column; gap: 4px; }
header .dropdown-menu .dropdown-item .item-row { font-size: 14px; line-height: 20px; cursor: pointer; }
header .dropdown-menu .dropdown-item .item-row a { width: 100%; padding: 10px 12px; display: block; color: #99A1AF; }
header .dropdown-menu .dropdown-item .item-row:hover { background-color: #ffffff0d !important; border-radius: 8px; }
header .dropdown-menu .dropdown-item .item-row:hover a { color: #fff !important; }

header .menu { position: relative; height: 36px; display: flex; align-items: center; }
header .menu .dropdown-menu { width: 180px; left: -2px; }

header .profile { padding:3px; align-self: center; width: 36px; height:36px; }
header .profile img { width: 30px; height: 30px; border-radius: 50%; }
header .profile .dropdown-menu { width: 240px; }
header .profile .dropdown-item:first-child { padding: 10px 16px; }
header .profile .dropdown-item .profile-area img { width: 41px; height: 41px; }



/* ==========================================================================
무료 체험하기 팝업
 ========================================================================== */
 .demopopup { display: none!important; box-shadow: -5px -5px 15px #0000001A, 5px 5px 15px #0000001A; width: 480px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 11; background-color: #101828; border: 1px solid #1E2939; padding: 40px; border-radius: 24px; text-align: center; }
 .demopopup .input-group .input-box { height:44px; border-color: #4A5565; }
 .demopopup .input-group .input-box:has(input:focus) { border: 1px solid #99A1AF; }
 .demopopup .input-group .input-box input::placeholder { color: #99A1AF !important; }
 .demopopup .input-domin { background-color: #1E2939 !important; color: #fff !important; }
 .demopopup.qr .domain-block { padding: 12px 16px; border: 1px solid #4A5565; border-radius: 8px; color:#fff; background-color: #1E2939; }
 .demopopup.qr .qr-img { width: 212px; height: 212px; border: 1px solid #99A1AF; display: flex; justify-content: center; align-items: center; border-radius: 12px; }
 .demopopup.qr .qr-img canvas { max-width: 238px; }
 .demopopup.active { display: flex!important; }

.demopopup.white { background-color: #fff; border-color:#E5E7EB; }
.demopopup.white .input-group .input-box { border-color:#D1D5DC; }
.demopopup.qr.white .qr-img { border-color:#D1D5DC; }
.demopopup.qr.white .domain-block { border-color:#D1D5DC; }

/* ==========================================================================
기능 자세히 보기 팝업
 ========================================================================== */
 .fucpopup { display: none!important; box-shadow: -5px -5px 15px #0000001A, 5px 5px 15px #0000001A; width: 660px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 11; background-color: #101828; border: 1px solid #1E2939; padding: 40px; border-radius: 24px; text-align: center; }
 .fucpopup.active { display: flex!important; }
 .fucpopup .fuc-img-wapper { padding: 12px 40px; border-radius: 12px; height: 293px; display: flex; justify-content: center; align-items: center;}
 .fucpopup .fuc-img { width: 200px; height: 200px; }
 .fucpopup ul li { position: relative; padding-left: 12px; text-indent: 0; line-height: 20px; font-size: 14px; }
 .fucpopup ul.disc li:before { content: '•'; position: absolute; left: 0; top: 0; color: #999; font-size: 14px; }


 /* ==========================================================================
FOOTER
 ========================================================================== */
footer { width: 100%; background-color: #030712 !important; height: 400px; }
footer .footer-content { max-width: 1200px; margin: 0px auto; }
footer .logo { width: 114px; height: 24px; }
footer .mobile { display: none; }
footer ul { display: flex; flex-direction: column; gap: 16px; }
footer ul li a:hover { color: #fff; }
footer.white ul li a:hover { color: #6A7282; }
footer ul li,footer ul li a { color: #99A1AF; font-size: 14px; line-height: 20px; }
footer.white { background-color: #F3F4F6 !important; }
footer .terms a:hover { text-decoration: underline; }

 /* ==========================================================================
POLICY
 ========================================================================== */
.policy { padding: 24px; border: 1px solid #D1D5DC; border-radius: 12px; }
.table-scroll { overflow: auto; display: flex; }
.tbl { width: 100%; }
.tbl th { padding: 12px 16px; background-color: #F9FAFB; width: 33.33%; font-size: 14px; line-height: 20px; }
.tbl td { padding: 12px 16px; font-size: 13px; line-height: 18px; }


 /* ==========================================================================
테블릿
 ========================================================================== */
@media (max-width: 1417px) { header nav { padding: 16px 24px !important; }
 header nav .pc { display: none !important; }
 header nav i.hamburger { display: flex !important; align-self: center; }

 footer .pc { display: none; }
 footer { padding: 80px 40px !important; }
 .fucpopup .fuc-img-wapper { padding: 24px; height: auto; }
 .fucpopup .fuc-img { width: 102px; height: 102px;}
 }


@media (max-width: 768px) { footer { height: unset; }

footer { padding: 80px 24px !important; }
footer .terms { flex-direction: column; gap: 24px; }

.demopopup { width:328px; min-height: 382px; padding: 40px 20px !important; }
.demopopup .popup-title { font-size: 18px; line-height: 26px; }
.demopopup .popup-subtitle { font-size: 20px; line-height: 28px; }
.demopopup .text-16 { font-size: 13px; line-height: 18px; }
.demopopup .error-500 { min-height: 20px; }
.fucpopup { width: 312px; padding: 40px 24px; }
.fucpopup .text-16{ font-size: 14px; line-height: 20px; }
.fucpopup .text-14{ font-size: 13px; line-height: 18px; }
.fucpopup ul li { font-size: 13px; line-height: 18px; }
 }

/* @media (max-width: 375px){
 .block { display: block; }
 .support { padding: 80px 24px !important; }
 }*/