/**
* Theme Name: PERSONA v1.0
* Light Clean UI / Blue Accent
* Base: Pretendard
*/
/* Pretendard font family */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
html,
body {
width: 100%;
overflow-x: hidden !important;
font-family: "Pretendard Variable", Pretendard, -apple-system,
BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
"Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
letter-spacing: -0.02em;
padding: 0;
}
/* 컬러 시스템 */
:root {
--main-color: #2563eb;
--sub-color: #1d4ed8;
--gray-0: #6b7280;
--gray-1: #d1d5db;
--gray-2: #f3f4f6;
--white: #ffffff;
--black-main: #111827;
--black-text: #1f2937;
--button-color: #2563eb;
--button-color2: #1d4ed8;
--primary-gradient: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
--nav-bg: #ffffff;
--nav-acitve: #2563eb;
--nav-box-shadow: 0 4px 17px rgba(0, 0, 0, 0.05);
--dark-body-bg: #111827;
--dark-box-bg: #131e30;
--dark-btn-bg: #1f2937;
}
/* 스크롤바 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #e5e7eb;
}
::-webkit-scrollbar-thumb {
background: #9ca3af;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}
/* 기본 타이포 */
body,
p,
a,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Pretendard Variable", Pretendard, -apple-system,
BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
"Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
color: var(--black-text);
}
a {
text-decoration: none;
color: inherit;
}
.hidden {
display: none !important;
}
/* 배경 톤 통일 */
body,
.auth_body,
.guest {
background-color: #eef2ff;
color: var(--black-text);
}
.auth_body .bg-white,
.auth_body .bg-light,
.auth_body .well,
.auth_body .card,
.auth_body .panel {
background-color: #ffffff !important;
color: var(--black-text) !important;
}
.auth_body p,
.auth_body span,
.auth_body label,
.auth_body li,
.auth_body td,
.auth_body th {
color: #202124;
}
/* 로그인 전 페이지 */
.guest {
padding: 0;
background-color: #f4f7ff;
color: var(--black-text);
}
/* 공통 모달 */
.modal {
--bs-modal-bg: #ffffff;
}
.btn-close {
filter: none;
}
#modalContent {
color: #333;
}
.auth_body #modalContent {
color: #111827;
}
/* 레이아웃 기본 */
.sidebar__area {
margin: 0;
padding: 0;
}
.py-5 {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
/* 로그인 후 배경 */
.auth_body {
background: #eef2ff;
transition: 0.54s;
}
th.nowrap {
text-wrap: nowrap;
}
.auth_body .main__page__area {
display: flex;
}
/* 부트스트랩 outline primary */
.btn-outline-primary {
--bs-btn-color: #2563eb;
--bs-btn-border-color: #2563eb;
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: #2563eb;
--bs-btn-hover-border-color: #2563eb;
--bs-btn-focus-shadow-rgb: 37, 99, 235;
--bs-btn-active-color: #ffffff;
--bs-btn-active-bg: #1d4ed8;
--bs-btn-active-border-color: #1d4ed8;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #2563eb;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #2563eb;
--bs-gradient: none;
}
/* 공통 버튼 톤 */
.btn,
.btn.btn-primary,
.btn.btn-primary2,
.btn-success,
.buy-btn,
.blog-btn,
.related-blog-btn {
border-radius: 30px;
border: 1px solid var(--button-color);
background-color: var(--button-color);
color: #ffffff;
}
.btn:hover,
.btn.btn-primary:hover,
.btn.btn-primary2:hover,
.btn-success:hover,
.buy-btn:hover,
.blog-btn:hover,
.related-blog-btn:hover {
background-color: var(--button-color2);
border-color: var(--button-color2);
color: #ffffff;
}
/* 로고 텍스트 */
.navbar-brand {
color: #111827;
}
/* 카카오톡 플로팅 버튼 */
button.kakaotalk {
position: fixed;
bottom: 50px;
right: 21px;
padding: 0;
background-color: transparent;
border: none;
cursor: pointer;
transition: 0.2s 0.25s opacity;
z-index: 318;
}
button.kakaotalk img {
height: 70px;
width: 70px;
}
a.kakao_float {
display: none;
}
@media (max-width: 767px) {
button.kakaotalk {
right: 13px;
bottom: 7px;
}
.auth button.kakaotalk {
right: 13px;
bottom: 55px;
}
button.kakaotalk img {
max-width: 60px;
max-height: 60px;
}
.auth ~ button.kakaotalk {
bottom: 70px;
}
button.kakaotalk {
opacity: 0;
pointer-events: none;
}
a.kakao_float {
position: fixed;
bottom: 10px;
right: 13px;
width: calc(100% - 26px);
height: 48px;
display: flex;
align-items: center;
padding: 0 10px;
background-color: #ffffff;
border-radius: 30px;
box-shadow: 0px 3px 6px #00000029;
color: #111827;
z-index: 628;
transition: 1s;
transform: translateY(100px);
}
a.kakao_float div {
white-space: nowrap;
font-size: 13px;
}
a.kakao_float img {
width: 38px;
}
a.kakao_float.pop {
transform: translateY(0);
}
.auth a.kakao_float.pop {
transform: translateY(-53px);
}
.signup ~ a.kakao_float {
display: none;
}
.kakao_close {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 14px;
border-radius: 999px;
background-color: #e5e7eb;
margin-left: auto;
}
}
/* ======================================
* Nav bar
* ====================================== */
@media (min-width: 1400px) {
.auth_body .main-navbar .container {
max-width: 1677px;
}
.auth_main .container {
max-width: 1534px;
}
}
/* 상단 네비게이션 바 */
.main-navbar {
background-color: #ffffff;
top: -1px;
width: 100%;
box-shadow: 0px 2px 8px #0000000a;
}
.offcanvas-backdrop.show{
display:none !important;
}
.navbar-brand img {
max-height: 50px;
}
@media (min-width: 992px) {
.guest .navbar-expand-lg .navbar-nav.ms-auto {
flex-direction: row;
gap: 40px;
margin-left: 0;
align-items: center;
}
.auth_body .navbar-expand-lg .navbar-nav {
flex-direction: row;
gap: 30px;
margin-left: 90px;
align-items: center;
}
.auth_body .navbar-expand-lg .navbar-nav.ms-auto {
flex-direction: row;
gap: 20px;
margin-left: 0;
align-items: center;
}
}
/* 상단 메뉴 텍스트 */
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link {
color: #4b5563;
font-weight: 500;
font-size: 15px;
line-height: 24px;
text-align: center;
position: relative;
transition: color 0.2s ease-in-out;
padding-left: 10px;
padding-right: 10px;
}
/* 메뉴 하단 포인트 라인 */
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link::after {
content: "";
display: block;
position: absolute;
width: 0%;
height: 0;
border: 2px solid var(--main-color);
border-radius: 2px;
bottom: -4px;
transform: translate(-50%, 0);
left: 50%;
opacity: 0;
transition: width 0.25s ease-in-out;
}
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link:hover::after,
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link.active::after {
opacity: 1;
width: 110%;
}
.main-navbar.navbar-light .navbar-nav .nav-link:hover {
color: var(--main-color);
}
.main-navbar.navbar-light .navbar-nav .nav-link.active {
color: var(--main-color);
font-weight: 600;
}
/* 보유금액 / 계좌충전 메뉴 버튼 */
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link.addfunds-menu {
height: 40px;
background-color: transparent;
border: 1px solid var(--main-color);
color: var(--main-color);
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
text-decoration: none !important;
}
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link.addfunds-menu::after,
.main-navbar.navbar-light
.navbar-nav
.nav-item
.nav-link.account-icon-menu::after {
border: none;
}
.main-navbar.navbar-light .navbar-collapse .btn {
color: #111827;
font-weight: 600;
border-radius: 15px;
padding: 0.25rem 1rem;
}
.main-navbar.navbar-light .navbar-collapse .btn-outline-light {
border: 1px solid var(--main-color);
}
.main-navbar.navbar-light .navbar-collapse .btn-outline-light:hover {
background-color: var(--main-color);
color: #ffffff;
}
.main-navbar.navbar-light .navbar-collapse .btn-danger {
border: 1px solid #ef4444;
background-color: #ef4444;
color: #ffffff;
}
.main-navbar.navbar-light .navbar-collapse .btn-danger:hover {
border-color: #b91c1c;
background-color: #b91c1c;
}
/* 모바일 토글 버튼 */
.main-navbar .navbar-toggler-icon {
width: 1em;
height: 1.2em;
filter: invert(0.2);
}
.main-navbar .navbar-toggler:focus {
outline: 0;
box-shadow: none;
}
.main-navbar .navbar-toggler {
background-color: #2563eb !important;
}
/* 모바일 오프캔버스 메뉴 */
@media (max-width: 991.98px) {
.main-navbar .offcanvas-collapse {
position: fixed;
top: 64px;
padding-top: 1.5rem;
bottom: 0;
left: 100%;
width: 100%;
padding-right: 2rem;
padding-left: 2rem;
overflow-y: auto;
visibility: hidden;
background-color: #ffffff;
transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition-property: left, visibility;
}
.main-navbar .offcanvas-collapse.show {
left: 0;
visibility: visible;
}
}
/* 상단 배너 영역 패딩 */
.guest .inner-top-banner {
padding-top: 130px !important;
padding-bottom: 60px !important;
}
.auth_body .inner-top-banner {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
@media (max-width: 991.98px) {
.guest .inner-top-banner {
padding-top: 120px !important;
padding-bottom: 40px !important;
}
}
.auth_body .content__area .container {
width: 100%;
min-width: 100%;
}
/* 하단 모바일 네비게이션 */
.mobile-nav {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 5px 0;
margin: 0;
justify-content: space-around;
text-align: center;
background-color: #ffffff;
box-shadow: 0px -1px 4px #e5e7eb;
display: none;
z-index: 12;
}
.mobile-nav li {
list-style: none;
}
.mobile-nav li a {
color: #6b7280;
font-size: 12px;
}
@media (max-width: 767.98px) {
.mobile-nav {
display: flex;
}
}
/* 검색 인풋 */
#search {
height: 40px !important;
border: 1px solid #d1d5db;
}
/* 서비스 카드 */
.ser-well.services-div {
background: #ffffff;
padding: 19px;
border-radius: 12px;
margin-bottom: 20px;
position: relative;
border: 1px solid #e5e7eb;
}
/* 로그인/회원가입 안내 문구 */
.singin-question {
font-size: 14px;
margin-top: 15px;
color: #6b7280;
}
.singin-question a {
color: var(--main-color);
}
/* 서비스 테이블 */
#service-table {
border-collapse: separate;
border-spacing: 0 12px;
}
#service-table tbody tr td {
background-color: #ffffff;
border: 0 !important;
color: #111827;
font-size: 14px;
font-weight: 500;
padding: 10px 15px !important;
}
/* 서비스 카테고리 제목행 */
tr.serviceTitle {
color: #111827;
font-weight: 600;
}
tr.serviceTitle td {
background: transparent;
font-size: 22px !important;
font-weight: 600 !important;
color: var(--main-color) !important;
}
/* 배지 공통 기본값은 심플 캡슐 */
table#service-table .badge {
font-size: 13px;
border-radius: 999px;
padding: 5px 12px;
}
/* 서비스 아이콘 원 */
.serviceInfo .icon {
width: 40px;
height: 40px;
background: linear-gradient(180deg, var(--main-color) 0%, #111827 100%);
color: #ffffff;
font-size: 18px;
border-radius: 50px;
margin: 0 auto;
line-height: 40px;
}
.serviceInfo .text h4 {
font-size: 18px;
text-align: center;
margin-bottom: 5px;
color: #111827;
}
.serviceInfo.text > span {
font-size: 14px;
display: block;
color: #6b7280;
}
#testimonial {
padding: 80px 0;
}
/* ========= Footer ========= */
footer .title {
color: #111827;
font-size: 30px;
font-weight: 600;
}
.row.ftr-top .btn.btn-primary {
margin-left: auto;
display: block;
width: max-content;
}
.row.ftr-top {
display: flex;
align-items: center;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 40px;
}
.ftr-txt {
color: #6b7280;
font-size: 14px;
font-weight: 400;
margin-bottom: 16px;
}
.social-links {
padding: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
list-style: none;
margin: 0;
}
.social-link {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background-color: #2563eb;
margin-right: 8px;
color: #ffffff;
font-size: 20px;
text-decoration: none;
}
.ftr-title {
color: #111827;
font-size: 16px;
font-weight: 600;
}
.ftr-menu {
padding-left: 0;
margin: 0;
list-style: none;
}
.ftr-menu li a {
color: #6b7280;
font-size: 13px;
font-weight: 400;
display: block;
width: max-content;
margin-bottom: 8px;
text-decoration: none;
}
.ftr-menu2 {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
}
.ftr-menu2 li {
flex: 0 0 50%;
max-width: 50%;
}
.ftr-bottom {
background-color: #f9fafb;
margin-top: 30px;
padding: 10px 0;
}
.copyright {
color: #6b7280;
font-size: 12px;
font-weight: 400;
margin-bottom: 0;
}
.bottom-ftr-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
justify-content: flex-end;
}
.bottom-ftr-nav li a {
color: #6b7280;
font-size: 12px;
font-weight: 400;
margin-left: 16px;
text-decoration: none;
}
/* ========= Signup / Landing ========= */
#signup {
padding: 150px 0 80px;
}
.signup-innerbox {
border-radius: 32px;
border: 1px solid #e5e7eb;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
padding: 80px 24px;
position: relative;
overflow: hidden;
background-color: #ffffff;
}
.signup-innerbox .title {
color: #111827;
line-height: 1.3;
}
.signup-innerbox .txt {
color: #4b5563;
margin-bottom: 20px;
}
.signup-innerbox .btn.btn-primary {
margin: 15px 0;
border: 1px solid #2563eb;
padding: 12px 24px;
}
.signup-innerbox .stats-box-title {
color: #111827;
}
.signup-innerbox::after {
content: "";
background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), transparent);
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
z-index: 0;
}
.signup-title {
color: #2563eb;
font-size: 22px;
font-weight: 700;
margin-bottom: 6px;
}
.signup-frm label {
color: #4b5563;
font-size: 14px;
font-weight: 400;
}
.signup-frm .form-control {
padding: 12px 20px;
}
.signup-innerbox .title,
.signup-innerbox .txt,
.signup-innerbox .btn,
.signup-innerbox .row {
position: relative;
z-index: 1;
}
.signup-frm .have-acc {
margin-top: 10px;
}
/* ========= Blog ========= */
.blog-sec .row {
display: flex;
align-items: center;
}
.blog-sec .row .btn.btn-primary {
margin-top: 20px;
}
#blogs-sec {
padding: 80px 0;
}
.blog-wrap {
border-radius: 24px;
border: 1px solid #e5e7eb;
background: #ffffff;
padding: 16px;
margin-bottom: 16px;
}
.blog-title {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 10px;
color: #111827;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
}
.blog-img-wrap {
min-height: 260px;
width: 100%;
border-radius: 18px;
background-size: cover;
background-position: center;
margin-bottom: 16px;
}
.blog-excerpt {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: #4b5563;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
margin-bottom: 12px;
height: 66px;
}
.blog-btn {
background: var(--main-color);
border: 0 !important;
}
/* Blog single */
.single-blog-img {
min-height: 360px;
border-radius: 20px;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 16px;
margin-bottom: 24px;
}
.single-blog-title {
border-radius: 20px;
border: 1px solid rgba(243, 244, 246, 0.9);
background: rgba(15, 23, 42, 0.7);
color: #ffffff;
text-align: center;
font-size: 32px;
font-weight: 700;
padding: 14px;
}
.single-blog-title span {
display: block;
width: 80%;
margin: auto;
}
.single-blog-content {
border-radius: 24px;
border: 1px solid #e5e7eb;
background: #ffffff;
padding: 20px;
color: #4b5563;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
margin-bottom: 20px;
}
.related-blog-title {
color: #111827;
font-size: 22px;
font-weight: 700;
}
.related-blog-wrap {
min-height: 220px;
display: flex;
align-items: flex-end;
background-size: cover;
padding: 18px;
border-radius: 18px;
}
.related-blog-content {
background-color: #ffffff;
border-radius: 14px;
padding: 14px;
}
.related-blog-content-title {
color: #111827;
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
}
.related-blog-content-txt {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: #4b5563;
font-size: 13px;
font-weight: 400;
}
.related-blog-btn {
background: var(--main-color);
border: 0 !important;
padding: 10px 14px !important;
min-width: 120px !important;
}
/* ========= API 문서 ========= */
.row.api-title-row {
margin-top: 40px;
position: relative;
margin-bottom: 32px;
}
.auth_body .row.api-title-row {
margin-top: 15px;
}
.well {
min-height: 20px;
padding: 18px;
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 20px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.02);
}
.api-title {
color: #111827;
font-size: 22px;
font-weight: 500;
line-height: 1.4;
}
.api-table {
border-spacing: 8px 8px;
border-collapse: separate;
border-radius: 20px;
border: 1px solid #e5e7eb;
background: #f9fafb;
padding: 14px;
}
.api-table tbody tr td {
border-radius: 999px !important;
border: 1px solid #e5e7eb !important;
background: #2563eb;
padding: 10px 14px;
color: #ffffff;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
}
.api-table thead tr th {
color: #111827;
font-size: 14px;
font-weight: 600;
padding: 12px 14px;
background-color: #ffffff;
border: 1px solid #e5e7eb !important;
border-radius: 18px !important;
}
pre {
border-radius: 16px;
border: 1px solid #e5e7eb;
background: #0f172a;
color: #e5e7eb;
padding: 18px;
}
/* 서비스 상단 요약 배지 카드 */
.ser-short {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0 0 20px;
list-style: none;
padding: 0;
}
.ser-short li {
padding: 14px 18px;
background-color: #ffffff;
border-radius: 24px;
position: relative;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}
.ser-short li::after {
border-radius: 30px;
background: rgba(148, 163, 184, 0.45);
filter: blur(12px);
content: "";
width: 36px;
height: 36px;
position: absolute;
left: 0;
right: 0;
bottom: 4px;
margin: auto;
z-index: 0;
}
.ser-short li::before {
content: "";
border-radius: 30px;
opacity: 0.35;
background-color: #2563eb;
filter: blur(22px);
width: 52px;
height: 52px;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 0;
z-index: -1;
}
.ser-short li:hover {
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}
/* 검색창 */
.row.search-row .dropdown-toggle {
width: 100%;
text-align: left;
}
#history-search {
width: 100%;
position: relative;
}
#history-search .form-control {
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #ffffff;
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06) inset;
color: rgba(107, 114, 128, 0.7);
font-size: 15px;
font-weight: 400;
padding: 12px 20px;
width: 100%;
float: none;
}
#history-search .btn {
width: 42px;
height: 42px;
border-radius: 999px;
background-color: #2563eb;
border-color: #2563eb;
color: #ffffff;
font-size: 20px;
padding: 0;
}
#history-search .input-group {
display: block;
}
#history-search .input-group-btn {
display: block;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 4px;
width: 40px;
height: 40px;
z-index: 2;
}
#history-search .form-control:focus + .input-group-btn {
z-index: 1;
}
.searchtable-row #service-table tbody tr:nth-child(2n-1) td {
background-color: #ffffff !important;
}
.ser-cat-tr td {
background-color: #e5f0ff;
padding: 10px 14px !important;
border-radius: 999px;
border: 0 !important;
color: #1f2937 !important;
font-size: 15px !important;
font-weight: 600 !important;
}
/* ========= Service / Table ========= */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
vertical-align: middle;
}
.row.search-row {
margin-bottom: 20px;
}
.table tr td {
padding: 14px;
color: #111827;
font-size: 14px;
font-weight: 400;
}
.table tr td,
.table tr,
.table tr th {
border: 0 !important;
}
.table tr th {
background-color: #2563eb;
}
.table tr th,
.table tr td {
color: #ffffff;
font-size: 14px;
font-weight: 500;
padding: 14px !important;
}
.table tr th:first-child,
.table tbody tr td:first-child {
border-radius: 18px 0 0 18px;
}
.table tr th:last-child,
.table tbody tr td:last-child {
border-radius: 0 18px 18px 0;
}
table {
border-spacing: 0 8px;
border-collapse: separate;
}
.cats-icon {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
border-radius: 999px;
width: 32px;
height: 32px;
color: #2563eb;
}
/* 서비스 테이블 바디 */
.table tbody tr td {
color: #111827;
font-size: 14px;
font-weight: 400;
background: #ffffff;
padding: 12px 14px !important;
}
.width-service-name {
min-width: 100%;
width: 100%;
max-width: 100%;
}
.service-description .btn.btn-primary,
.buy-btn {
min-width: 110px;
display: block;
}
.buy-btn {
border-radius: 999px;
border: 1px solid #2563eb;
background: #2563eb;
color: #ffffff !important;
font-size: 14px;
font-weight: 500;
padding: 12px;
text-decoration: none !important;
text-align: center;
}
.service-description__th {
min-width: 130px;
}
/* ========= Darkmode ========= */
.darkmode .well {
border: 1px solid #1d4ed8;
background-color: #111827;
}
.darkmode .api-title {
color: #ffffff;
}
.darkmode .api-table {
border: 1px solid #1d4ed8;
background-color: #111827;
}
.darkmode .api-table tbody tr td {
border: 1px solid #1d4ed8 !important;
color: #ffffff;
}
.darkmode pre {
border: 1px solid #1d4ed8 !important;
color: #e5e7eb;
background: rgba(37, 99, 235, 0.15);
}
.darkmode .api-table thead th {
background-color: #1d4ed8;
border-radius: 999px;
color: #ffffff;
}
.darkmode .table tr th {
background-color: #1d4ed8;
color: #ffffff;
}
.darkmode .table tbody tr td {
background-color: #111827;
color: #f9fafb;
}
/* ========= 서비스 설명 모달 ========= */
.service-description .modal-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
flex-direction: column;
border: 0;
}
.service-description .modal-body {
padding: 10px 40px 32px 40px;
}
.service-description .modal-header .modal-close_btn {
width: 100%;
}
.service-description .modal-header .modal-title {
color: #111827;
font-size: 28px;
font-weight: 700;
text-align: center;
}
.service-description .modal-content {
border-radius: 40px;
overflow: hidden;
isolation: isolate;
}
.service-description .modal-header::before,
.service-description .modal-header::after {
display: none;
}
.service-description .modal-header .close {
border-radius: 999px;
color: #6b7280;
opacity: 1;
text-shadow: none;
font-size: 32px;
font-weight: 500;
margin-right: 16px;
}
.service-description .service_order-details {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 20px;
}
.service-description .service_order-details .serv-order_container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.service-description .service_order-details .serv-order_container .serv-icon {
width: 50px;
height: 50px;
display: grid;
place-items: center;
border-radius: 999px;
font-size: 18px;
margin-bottom: 10px;
background-color: rgba(16, 185, 129, 0.12);
color: #059669;
}
.service-description
.service_order-details
.serv-order_container
.serv_details-order {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.service-description
.service_order-details
.serv-order_container
.serv_details-order
h6 {
font-size: 15px;
font-weight: 600;
margin-bottom: 4px !important;
}
.service-description
.service_order-details
.serv-order_container
.serv_details-order
span {
font-size: 14px;
font-weight: 500;
}
.service-description .service_desc-details {
margin-bottom: 26px;
border-radius: 24px;
border: 1px solid rgba(148, 163, 184, 0.4);
background: #f9fafb;
padding: 24px;
}
.service-description .service_desc-details p {
margin-bottom: 0;
}
.service-description .modal-header .modal_title-id {
font-size: 14px;
font-weight: 700;
border-radius: 999px;
background: #f59e0b;
min-width: 100px;
display: grid;
place-items: center;
color: #ffffff;
height: 34px;
margin-bottom: 8px;
}
.service-description .modal-content::before {
content: "";
position: absolute;
width: 100%;
height: 40%;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), transparent);
background-repeat: no-repeat;
z-index: -1;
}
.service-description
.service_order-details
.serv-order_container:first-child
.serv-icon {
background-color: rgba(245, 158, 11, 0.16);
color: #d97706;
}
.service-description
.service_order-details
.serv-order_container:last-child
.serv-icon {
background: rgba(37, 99, 235, 0.12);
color: #2563eb;
}
.service-description .modal-body .buy-btn {
background: #2563eb;
border-color: #2563eb;
font-size: 15px;
font-weight: 600;
}
/* ========= How it works / Contact / Terms ========= */
.banner_all {
max-height: 700px;
padding-top: 70px;
padding-bottom: 70px;
background: linear-gradient(
284.51deg,
#e5ecff 22.46%,
rgba(229, 236, 255, 0) 97.31%
);
}
.how-it-works {
position: relative;
overflow: hidden;
}
.how-it-works .banner_right > img {
position: absolute;
right: 0;
top: 0;
width: 700px !important;
}
.how-it-work-step {
margin: 50px 0;
}
.how-it-work-step.step-common .common-step-wraper {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
margin-top: 60px;
justify-content: space-between;
}
.step_diff .diff_content h3,
.how-it-work-step.step-common .common-step-wraper .common-step-content h3 {
font-size: 36px;
color: #111827;
font-weight: 600;
margin-bottom: 12px;
}
@media (max-width: 500px) {
.banner_content {
text-align: center;
}
.banner_content h1 {
font-size: 24px;
}
.step_diff .diff_content h3,
.how-it-work-step.step-common .common-step-wraper .common-step-content h3 {
font-size: 22px;
text-align: center;
}
.step_diff .diff_content h3 br,
.how-it-work-step.step-common .common-step-wraper .common-step-content h3 br {
display: none;
}
.how-it-works .banner_right > img {
display: none;
}
.common-step-arrow > img,
.step_diff .text-center > img {
width: 50%;
margin-bottom: 20px;
}
}
.step_diff .step_diff_img > img {
width: 80%;
}
/* Contact */
.contact {
margin: 100px 0;
min-height: 600px;
}
.contact .contact_info .contact_title {
font-weight: 600;
font-size: 40px;
line-height: 1.3;
}
.contact .contact_item {
width: 100%;
margin: 20px 0;
text-align: center;
background: #ffffff;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
padding: 32px 10px;
border-radius: 18px;
max-width: 340px;
max-height: 280px;
}
.contact .contact_item > img {
margin-bottom: 16px;
}
.contact .contact_item > h6 {
font-size: 18px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 4px;
}
@media (max-width: 500px) {
.contact .contact_info .contact_title,
.banner_center_text h1 {
font-size: 24px;
margin-bottom: 6px;
}
.contact .contact_item {
width: 100%;
max-width: 100%;
margin-bottom: 6px;
padding: 16px 10px;
border-radius: 10px;
}
}
.banner_center_text {
text-align: center;
}
/* Terms */
.terms_content_wrap {
margin: 70px 0;
}
.terms_tabs .nav-pills .nav-link {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
background: #ffffff;
width: 207px;
height: 207px;
margin: 0 auto;
border: 2px solid #e5e7eb;
border-radius: 12px;
}
.terms_tabs .nav-pills .nav-link.active {
border: 2px solid #2563eb;
}
.terms_tabs .nav-pills {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.terms_tabs .nav-pills .nav-link .terms_text {
font-size: 20px;
color: #111827;
font-weight: 600;
}
.terms_content_wrap .terms_content h2 {
font-size: 34px;
font-weight: 600;
margin-bottom: 24px;
}
@media (max-width: 500px) {
.terms_content_wrap .terms_content h2 {
font-size: 22px;
margin-bottom: 10px;
}
}
/*
============================================
Dashboard Layouts
============================================
*/
.auth_body .bg-white {
background-color: #ffffff !important;
}
.auth_body .bg-light {
background-color: #f9fafb !important;
}
.auth_body .border {
border: var(--bs-border-width) var(--bs-border-style) #e5e7eb !important;
}
.auth_body textarea.form-control {
padding-top: 10px !important;
min-height: 200px;
}
.auth_body .main__page__area {
display: flex;
}
.auth_body .main__page__area .sidebar__area {
position: fixed;
width: 270px;
height: 100%;
background: #ffffff;
z-index: 9;
transition: 0.5s ease;
}
.auth_body .main__page__area .sidebar__area .sidebar__brand {
margin-bottom: 16px;
background: #ffffff;
padding: 20px 12px;
}
.sidebar__area .sidebar__user {
display: flex;
align-items: center;
gap: 12px;
padding: 0 16px;
margin-bottom: 16px;
}
.sidebar__area .sidebar__user .user__balance {
font-size: 16px;
font-weight: 600;
}
.sidebar__area .sidebar__user .user__avatar img {
width: 40px;
}
.sidebar__menu {
padding: 0 12px 8px;
}
.sidebar__menu > ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style-type: none;
gap: 4px;
height: calc(100vh - 120px);
overflow: auto;
}
.sidebar__menu > ul::-webkit-scrollbar {
display: none;
}
.sidebar_close_btn {
display: none;
position: absolute;
width: 45px;
height: 45px;
background: #fee2e2;
color: #dc2626;
font-size: 22px;
border-radius: 10px;
border: none;
right: -45px;
}
.sidebar__menu > ul .sidebar__menu__item .sidebar__menu__link {
display: flex;
flex-direction: row;
gap: 10px;
padding: 10px 16px;
align-items: center;
border-radius: 999px;
}
.sidebar__menu > ul .sidebar__menu__item .sidebar__menu__link.active {
background: #eff6ff;
}
.sidebar__menu
> ul
.sidebar__menu__item
.sidebar__menu__link.active
.link__text {
color: #1d4ed8;
}
.sidebar__menu > ul .sidebar__menu__item .sidebar__menu__link > div {
margin: 0;
padding: 0;
}
.sidebar__menu
> ul
.sidebar__menu__item
.sidebar__menu__link
.link__icon
> img {
width: 20px;
}
.sidebar__menu
> ul
.sidebar__menu__item
.sidebar__menu__link
.link__icon
> img.subscriptions-icon {
width: 20px;
}
.sidebar__menu > ul .sidebar__menu__item .sidebar__menu__link .link__text {
font-size: 14px;
font-weight: 500;
color: #111827;
}
.auth_body .main__page__area .main__content__area {
margin-left: 276px;
width: 100%;
transition: 0.5s ease;
}
/* 상단 바는 모바일에서만 사용 */
.auth_body .main__page__area .main__content__area .top__bar__area {
display: none;
top: 0;
align-items: center;
width: calc(100% - 300px);
justify-content: space-between;
padding: 10px 20px;
height: 72px;
background: #ffffff;
z-index: 999;
transition: 0.5s ease;
}
.auth_body
.main__page__area
.main__content__area
.top__bar__area
.tob__bar__left
.button__bar {
width: 46px;
height: 46px;
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
flex-direction: column;
background: var(--primary-gradient);
border: none;
border-radius: 10px;
cursor: pointer;
}
.auth_body
.main__page__area
.main__content__area
.top__bar__area
.tob__bar__left
.button__bar
> span {
width: 60%;
height: 3px;
background: #ffffff;
border-radius: 5px;
}
.auth_body
.main__page__area
.main__content__area
.top__bar__area
.tob__bar__left {
display: flex;
gap: 12px;
}
.auth_body
.main__page__area
.main__content__area
.top__bar__area
.tob__bar__left
.welcome__text
h3 {
font-size: 18px;
font-weight: 600;
color: #111827;
margin-bottom: 2px;
}
.auth_body
.main__page__area
.main__content__area
.top__bar__area
.tob__bar__left
.welcome__text
p {
font-size: 13px;
font-weight: 400;
margin-bottom: 0;
color: #6b7280;
}
.tob__bar__right .desktop__shows {
display: flex;
align-items: center;
gap: 10px;
}
/* 사이드 상단 계정 영역 */
.sidebar__account {
padding: 0 16px;
margin-bottom: 14px;
}
.sidebar__account .desktop__shows {
display: flex;
justify-content: center;
}
.sidebar__account .accounts__dropdwon .btn_account {
display: flex;
gap: 6px;
align-items: center;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 999px;
}
.sidebar__account .accounts__dropdwon .btn_account .account__user {
display: flex;
align-items: center;
gap: 6px;
}
.sidebar__account
.accounts__dropdwon
.btn_account
.account__user
.user__avatar
> img {
width: 30px;
}
.sidebar__account
.accounts__dropdwon
.btn_account
.account__user
.user__text
h4 {
font-size: 14px;
margin-bottom: 2px;
text-align: left;
color: #111827;
}
.sidebar__account
.accounts__dropdwon
.btn_account
.account__user
.user__text
p {
font-size: 12px;
margin-bottom: 0;
color: #6b7280;
}
.channel__area > a > img {
width: 60px;
}
/* Day Night 토글 */
.day__night__Mode .mode__wraper {
position: relative;
display: flex;
gap: 12px;
padding: 5px 10px;
border-radius: 999px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
cursor: pointer;
transition: 0.5s;
}
.day__night__Mode .mode__wraper .modeActive__bg {
position: absolute;
width: 44px;
height: 44px;
border-radius: 999px;
background-color: #ffffff;
top: -3px;
box-shadow: 0 0 12px rgba(15, 23, 42, 0.12);
z-index: 0;
left: -2px;
transition: 0.1s;
}
.auth_body.dayMode .day__night__Mode .mode__wraper .modeActive__bg {
transform: translateX(0);
}
.auth_body.nightMode .day__night__Mode .mode__wraper .modeActive__bg {
transform: translateX(52px);
}
.day__night__Mode .mode__wraper .night__mode > img,
.day__night__Mode .mode__wraper .day__mode > img {
transition: 1s;
pointer-events: none !important;
}
.auth_body.dayMode .day__night__Mode .mode__wraper .day__mode > img {
position: absolute;
top: 4px;
left: 6px;
}
.auth_body.nightMode .day__night__Mode .mode__wraper .night__mode > img {
position: absolute;
top: 4px;
width: 32px;
right: 4px;
}
.day__night__Mode .mode__wraper .day__mode,
.day__night__Mode .mode__wraper .night__mode {
pointer-events: none !important;
width: 30px;
z-index: 1;
}
.dropdown-menu {
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border-radius: 15px;
}
/* ========= 반응형 세부 ========= */
@media (max-width: 767.98px) {
.short-cut-list li {
flex: unset;
max-width: unset;
margin-bottom: 2px;
min-width: 135px;
max-width: 138px;
width: 100%;
}
.auth .form-control {
height: 40px;
border-radius: 15px;
}
#order_count {
margin-bottom: 10px;
}
#select2-orderform-service-container,
#select2-orderform-category-container {
height: 28px;
}
.dash-title {
margin-bottom: 10px;
}
.result-box {
border-radius: 10px;
margin-bottom: 10px;
padding: 10px;
}
.result-box .media-body h5 {
font-size: 14px;
}
.sidebar {
z-index: 999;
}
.wrapper .top-bar.row .col-sm-6:last-child {
display: none;
}
.wrapper .top-bar.row {
justify-content: flex-end;
}
.wrapper .top-bar.row .col-sm-6 {
flex: 0 0 100%;
max-width: 100%;
text-align: right;
}
.wrapper .top-bar.row .col-sm-6 .top-left-navrow {
justify-content: flex-end;
}
.wrapper.toggle .top-bar.row .col-sm-6:last-child {
display: block;
}
.wrapper.toggle .top-bar.row .col-sm-6 {
flex: 0 0 30%;
max-width: 30%;
text-align: left;
}
.wrapper.toggle .top-bar.row .col-sm-6 .top-left-navrow {
justify-content: flex-start;
}
.wrapper.toggle .top-bar.row {
justify-content: space-between;
}
.wrapper.toggle .top-bar.row .col-sm-6:last-child {
flex: 0 0 70%;
max-width: 70%;
}
.neworder-slide.v-center {
padding: 10px 15px;
}
.row.search-row {
margin-bottom: 10px;
}
.nav.nav-pills li {
max-width: 49%;
margin-bottom: 5px;
}
.nav.nav-pills {
justify-content: center;
}
.fund-content-img {
width: 100px;
height: 100px;
margin: 0 auto 10px;
padding: 5px;
}
.fund-content-title {
font-size: 20px;
line-height: 1.3;
}
.fund-content-txt {
font-size: 14px;
}
.fund-nav-tabs .nav-item {
width: 100%;
}
.ticket-faq-title {
font-size: 14px;
padding-left: 35px;
margin-bottom: 12px;
}
.ticket-faq-title span {
width: 25px;
height: 25px;
font-size: 13px;
}
.auth textarea.form-control {
height: 130px;
}
.dash-profilebox-left {
flex: 0 0 80px;
max-width: 80px;
}
.dash-profilebox-right {
flex: 0 0 calc(100% - 80px);
max-width: calc(100% - 80px);
padding-left: 10px;
}
.dash-profilebox-title {
font-size: 20px;
font-weight: 500;
}
.row.dash-profile-row {
display: block;
}
.row.dash-profile-row .btn.btn-primary {
margin-left: 0;
width: 100%;
max-width: 100%;
margin-top: 15px;
}
.dash-statistics {
border-radius: 14px;
padding: 15px 10px;
min-height: auto;
margin-bottom: 15px;
}
.dash-statistics-icon {
width: 40px;
height: 40px;
margin: auto auto 10px;
flex: 0 0 40px;
max-width: 40px;
font-size: 19px;
}
#contact-sec .row {
display: flex;
flex-direction: column-reverse;
}
.reset-pswd-sec .row {
display: block;
}
.db_sec .info .user_info-box {
height: auto;
padding: 10px;
}
.blog-excerpt {
height: auto;
}
.service-description .modal-header .modal-title {
font-size: 20px;
}
.service-description
.service_order-details
.serv-order_container
.serv_details-order
h6 {
text-align: center;
}
.service-description
.service_order-details
.serv-order_container
.serv_details-order
span {
font-size: 12px;
}
.service-description .modal-content {
border-radius: 30px;
}
.ftr-logo-wrap img {
max-width: 250px;
}
.amazing-tabs li {
flex: 1;
min-width: 130px;
margin-bottom: 9px;
}
.navbar-brand {
max-width: 80%;
}
.mode-btn-wrap {
min-width: 28px;
padding-left: 2px;
margin-left: 2px;
}
.auth .mode-btn {
max-width: 28px;
min-width: 28px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 28px;
}
.auth .mode-btn-icon {
width: 20px;
height: 20px;
font-size: 13px;
}
.auth .top-right-navrow li.dropdown {
margin-bottom: 0;
}
.top-right-navrow a,
.top-left-navrow a {
margin-left: 2px;
}
.wrapper.toggle .top-bar.row .col-sm-6 {
flex: 0 0 10%;
max-width: 10%;
padding: 0 5px;
}
.wrapper.toggle .top-bar.row .col-sm-6:last-child {
flex: 0 0 90%;
max-width: 90%;
}
.auth .top-right-navrow li {
margin-bottom: 0;
}
.auth .top-right-navrow > .dropdown.dropdown-currencies .dropdown-toggle {
width: 60px;
}
.row.search-row .dropdown {
margin-top: 10px;
}
}
/* ========= 기타 ========= */
.result-box .media-body h5[data-id="serviceLink"] {
color: #111827;
}
.order_cards-row.statics-row .statics-box {
height: 230px;
}
/* SNS 썸네일 백그라운드 */
#twitter .amazintab-full-box {
background-image: url("https://storage.perfectcdn.com/idjpe8/irzpm7aj03w40kqb.png");
}
#youtube .amazintab-full-box {
background-image: url("https://storage.perfectcdn.com/idjpe8/ggt06c0tcl7oy7f9.png");
}
#instagram .amazintab-full-box {
background-image: url("https://storage.perfectcdn.com/idjpe8/44pnt6qj3s7l6p0u.png");
}
#likedin .amazintab-full-box {
background-image: url("https://storage.perfectcdn.com/idjpe8/ju1w28mssnq08tfa.png");
}
#telegram .amazintab-full-box {
background-image: url("https://storage.perfectcdn.com/idjpe8/ix792ywl35yzybcg.png");
}
#soundcloud .amazintab-full-box {
background-image: url("https://storage.perfectcdn.com/idjpe8/2nbng9shw92a4wdi.png");
}
#tiktok .amazintab-full-box {
background-image: url("https://storage.perfectcdn.com/idjpe8/hzeoc2ywm65ujj1x.png");
}
/* 상단 우측 드롭다운 */
.top-right-navrow .dropdown a {
width: 110px;
font-size: 14px;
}
.top-right-navrow .dropdown .dropdown-menu a {
width: auto;
height: auto;
margin: 0;
border-radius: 0;
}
.top-right-navrow .dropdown .dropdown-menu {
padding: 0;
border: 0;
}
/* 서비스 이름 컬럼 */
.service-name {
max-width: 250px;
word-break: break-word;
width: 250px;
min-width: 250px;
}
/* 프로필 카드 */
.profile-wrap {
margin-bottom: 15px;
background-color: #eff6ff;
border-radius: 12px;
padding-top: 12px;
overflow: hidden;
}
.profile-body {
padding: 10px 0;
background-color: #2563eb;
}
.profile-body .username {
color: #ffffff;
margin-bottom: 8px;
}
.profile-body .balance {
color: #e5e7eb;
}
.profile-span1 {
background-color: #eff6ff;
}
.balance a {
background-color: #ffffff;
color: #2563eb;
}
.row.search-row .dropdown .dropdown-toggle {
overflow: hidden;
}
/* ========= 서비스 상태 박스 (checktime) 수정 ========= */
/* 서비스 상태 / 체크시간 블록 텍스트와 배경 */
.checktime,
.checktime * {
color: #111827 !important;
}
.checktime {
background-color: #ffffff !important;
border: 1px solid #e5e7eb !important;
}
/* 상태 배지 (온라인, 정상 등) 파란 캡슐 */
.badge-status,
.badge-online,
.badge-normal,
.badge-success-status {
border-radius: 999px !important;
border: 1px solid #2563eb !important;
background-color: #2563eb !important;
color: #ffffff !important;
padding: 3px 10px !important;
font-size: 12px !important;
font-weight: 600 !important;
}
/* ========= 심플 검은 테두리 캡슐 UI ========= */
/* 공통 캡슐 베이스 */
.capsule,
.category-pill,
.platform-pill,
.service-pill,
.nav.nav-pills .nav-link,
.amazing-tabs li a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
font-size: 13px;
font-weight: 600;
border-radius: 999px;
border: 1px solid #111827 !important;
background: #ffffff !important;
color: #111827 !important;
box-shadow: none !important;
transition: 0.15s ease;
}
/* 활성 캡슐 */
.capsule.active,
.category-pill.active,
.platform-pill.active,
.service-pill.active,
.nav.nav-pills .nav-link.active,
.amazing-tabs li a.active {
background: #111827 !important;
color: #ffffff !important;
}
/* 호버 시 */
.capsule:hover,
.category-pill:hover,
.platform-pill:hover,
.service-pill:hover,
.nav.nav-pills .nav-link:hover,
.amazing-tabs li a:hover {
background: #111827 !important;
color: #ffffff !important;
}
/* ========= 주문하기 단계 넘버링 심플화 (추측 기반 선택자) ========= */
/* 실제 클래스명 다르면 이 부분은 미세 조정 필요 가능성 있음 */
.order-step-number,
.step-number,
.process-number,
.order-steps li span.step {
background: transparent !important;
color: #111827 !important;
border: 1px solid #d1d5db !important;
width: 26px;
height: 26px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
}
.order-step-number.active,
.step-number.active,
.process-number.active,
.order-steps li.active span.step {
border-color: #111827 !important;
color: #111827 !important;
}
/* 입력 placeholder */
input::placeholder,
textarea::placeholder {
color: #9ca3af;
}
/* 주문하기 – 상단 서비스 유형 캡슐 (네이버/인스타/페북/유튜브/틱톡/SEO트래픽) */
.nav.nav-pills .nav-item .nav-link {
border-radius: 999px;
border: 1px solid #111827 !important;
background: #ffffff !important;
color: #111827 !important;
box-shadow: none !important;
font-weight: 600;
padding: 6px 16px;
}
/* 활성 탭 */
.nav.nav-pills .nav-item .nav-link.active {
background: #111827 !important;
color: #ffffff !important;
}
/* 주문하기 단계 번호 심플 스타일 */
.order-steps {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 999px;
border: 1px solid #111827 !important; /* 진한 회색 테두리 */
background: #ffffff !important; /* 흰 배경 */
color: #111827 !important; /* 진한 글자색 */
font-size: 13px;
font-weight: 700;
margin-right: 6px; /* 오른쪽 텍스트와 간격 */
}
/* 서비스 필터 버튼 – 심플 블랙 캡슐 스타일 */
.service_filter_btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 6px 16px !important;
border-radius: 999px !important;
border: 1px solid #111827 !important; /* 검은 테두리 */
background: #ffffff !important; /* 흰 배경 */
color: #111827 !important; /* 진한 글자 */
font-size: 13px !important;
font-weight: 600 !important;
box-shadow: none !important;
text-align: center !important;
}
/* hover 효과 */
.service_filter_btn:hover {
background: #111827 !important;
color: #ffffff !important;
}
/* 선택된 상태(active) */
.service_filter_btn.active,
.service_filter_btn.selected,
#recommend-btn.active {
background: #111827 !important;
color: #ffffff !important;
}
/* 필터 버튼 묶음 – 가로로 정렬 */
.service-filter-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* 서비스 필터 버튼 – 검은 테두리 캡슐 + 동일 폭 */
.service_filter_btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 6px 14px !important;
border-radius: 999px !important;
border: 1px solid #111827 !important; /* 검은 테두리 */
background: #ffffff !important; /* 흰 배경 */
color: #111827 !important; /* 진한 글자 */
font-size: 13px !important;
font-weight: 600 !important;
min-width: 105px; /* 버튼 폭 고정 느낌 */
box-shadow: none !important;
text-align: center !important;
}
/* hover 효과 */
.service_filter_btn:hover {
background: #111827 !important;
color: #ffffff !important;
}
/* 선택된 필터(active) */
.service_filter_btn.active,
.service_filter_btn.selected {
background: #111827 !important;
color: #ffffff !important;
}
/* 네이버 버튼 크기 통일 */
.service_filter_btn img {
max-height: 16px; /* 아이콘 높이 통일 */
}
.service_filter_btn {
min-width: 110px !important; /* 모든 버튼 동일 폭 */
justify-content: center !important;
}
/* Mass Order 헤더 텍스트 색상 수정 */
.card_header_title,
.card_header_title.text-white,
.card_header_text,
.card_header_text.text-white {
color: #111827 !important; /* 진한 검정 */
text-shadow: none !important;
}
/* 모바일 캡슐 버튼 크기 보정 */
@media (max-width: 480px) {
.service_filter_btn {
min-width: 130px !important; /* 버튼 가로 넓힘 */
height: 40px !important; /* 버튼 높이 고정 */
padding: 8px 18px !important; /* 터치 영역 확대 */
font-size: 14px !important;
}
/* 네이버 아이콘 전용 보정 */
.service_filter_btn img {
max-height: 20px !important;
}
}
/* 모바일 캡슐 버튼 확장 – 더 크게, 더 존재감 있게 */
@media (max-width: 480px) {
.service_filter_btn {
min-width: 155px !important; /* 가로 사이즈 크게 */
height: 48px !important; /* 버튼 높이 UP */
padding: 10px 20px !important; /* 터치 범위 ↑ */
font-size: 15.5px !important; /* 폰트 크게 */
font-weight: 600 !important;
border-radius: 999px !important;
}
/* 네이버 아이콘 전용 보정 – 더 크고 또렷하게 */
.service_filter_btn img {
max-height: 24px !important;
}
}
/* 모바일에서 서비스 필터 버튼 사이 간격 넓히기 */
@media (max-width: 480px) {
.service-filter-group {
gap: 14px !important; /* 기존보다 더 넓게 */
}
.service_filter_btn {
margin-bottom: 4px !important; /* 추가 세로 여유 */
}
}
/* FAQ: 카드형 리스트 */
.faq-card .faq-item {
border: 0;
margin: 0 0 10px 0;
}
.faq-card summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 14px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.08);
background: rgba(255,255,255,0.95);
cursor: pointer;
font-weight: 600;
line-height: 1.3;
user-select: none;
}
.faq-card summary::-webkit-details-marker {
display: none;
}
/* 우측 꺾쇠 */
.faq-card .chev {
font-size: 20px;
opacity: 0.55;
transform: translateY(-1px);
transition: transform 0.15s ease, opacity 0.15s ease;
}
/* 펼쳐졌을 때 화살표 회전 */
.faq-card details[open] summary .chev {
transform: rotate(90deg);
opacity: 0.85;
}
/* hover 효과 */
.faq-card summary:hover {
border-color: rgba(0,0,0,0.14);
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
/* 답변 박스 */
.faq-card .answer {
margin-top: 8px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.06);
background: rgba(255,255,255,0.7);
color: rgba(0,0,0,0.72);
line-height: 1.6;
}
/* FAQ hover 강조 */
.faq-card summary:hover {
border-color: #c7d2fe;
background: #f9fafb;
}
.popular-rank .rank-item{
display:flex;
gap:12px;
align-items:flex-start;
padding:12px 14px;
border-radius:12px;
border:1px solid rgba(0,0,0,0.08);
background:#fff;
margin-bottom:10px;
}
.popular-rank .rank-badge{
width:28px;
height:28px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
background:#111827;
color:#fff;
flex:0 0 auto;
}
.popular-rank .rank-title{
font-weight:600;
line-height:1.35;
}
.popular-rank .rank-sub{
font-size:12.5px;
color:#6b7280;
margin-top:4px;
}
.popular-rank .rank-item:hover{
border-color:#c7d2fe;
background:#f9fafb;
}
.popular-rank .rank-note{
margin-top:6px;
font-size:12px;
color:#9ca3af;
}
.guide-card {
border: 1px solid rgba(0,0,0,0.06);
}
.guide-list {
padding-left: 18px;
margin-bottom: 10px;
}
.guide-list li {
margin-bottom: 6px;
font-size: 14px;
}
.guide-note {
font-size: 12px;
color: #6b7280;
}
.guide-card{
min-height: 240px;
display: flex;
}
.guide-card .card-body{
display: flex;
flex-direction: column;
}
.guide-foot{
margin-top: auto;
padding-top: 10px;
font-size: 12px;
color: #9ca3af;
border-top: 1px solid rgba(0,0,0,0.06);
}
@media (max-width: 480px) {
.service_filter_btn {
white-space: nowrap !important;
word-break: keep-all !important;
line-break: strict !important;
}
}
@media (max-width: 480px) {
/* 서비스 버튼 내부 아이콘 컨테이너 강제 축소 */
.service_filter_btn img,
.service_filter_btn svg {
width: 20px !important;
height: 20px !important;
max-width: 20px !important;
flex: 0 0 20px !important;
}
/* 아이콘 + 텍스트 묶음 정확히 중앙 */
.service_filter_btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
}
/* ================================
Persona White / Blue Theme
(Luckybank Override)
================================ */
:root{
--p-blue:#2f6de0; /* 메인 파랑 */
--p-blue-dark:#2457b8;
--p-blue-soft:rgba(47,109,224,.12);
--p-border:#e6ebf2;
--p-bg:#ffffff;
--p-text:#1f2a37;
--p-muted:#6b7280;
}
/* 럭키뱅크 전체 톤 */
.order-form-div .luckybank{
background: var(--p-bg) !important;
color: var(--p-text) !important;
font-family: inherit !important;
}
/* 상단 바/강조 영역 */
.order-form-div .luckybank .methodName,
.order-form-div .luckybank .payment-header,
.order-form-div .luckybank .payment-title{
background: var(--p-blue) !important;
color:#fff !important;
border-radius:12px !important;
}
/* 입력창 */
.order-form-div .luckybank input,
.order-form-div .luckybank select,
.order-form-div .luckybank textarea{
background:#fff !important;
border:1px solid var(--p-border) !important;
color:var(--p-text) !important;
border-radius:10px !important;
box-shadow:none !important;
}
.order-form-div .luckybank input:focus,
.order-form-div .luckybank select:focus,
.order-form-div .luckybank textarea:focus{
border-color:var(--p-blue) !important;
box-shadow:0 0 0 3px var(--p-blue-soft) !important;
}
/* 버튼 (결제하기, 복사하기 등) */
.order-form-div .luckybank button,
.order-form-div .luckybank .btn,
.order-form-div .luckybank input[type="button"],
.order-form-div .luckybank input[type="submit"]{
background:var(--p-blue) !important;
color:#fff !important;
border:0 !important;
border-radius:12px !important;
font-weight:800 !important;
}
.order-form-div .luckybank button:hover,
.order-form-div .luckybank .btn:hover{
background:var(--p-blue-dark) !important;
}
/* 보조 버튼(회색 버튼) */
.order-form-div .luckybank .btn-outline,
.order-form-div .luckybank .secondary{
background:#f8fafc !important;
color:var(--p-text) !important;
border:1px solid var(--p-border) !important;
}
/* 안내 박스 */
.order-form-div .luckybank .bank-info,
.order-form-div .luckybank .info-box,
.order-form-div .luckybank .notice{
background:#f9fbff !important;
border:1px solid var(--p-border) !important;
color:var(--p-text) !important;
border-radius:12px !important;
}
/* 포인트 텍스트 */
.order-form-div .luckybank .active,
.order-form-div .luckybank .selected,
.order-form-div .luckybank .highlight{
color:var(--p-blue) !important;
}
/* 카드/섹션 */
.order-form-div .luckybank .card,
.order-form-div .luckybank .panel{
border-radius:16px !important;
border:1px solid var(--p-border) !important;
box-shadow:0 6px 18px rgba(0,0,0,.05) !important;
}
/* === 결제하기 버튼 최종 통일 === */
.order-form-div .paymentButton,
.order-form-div .submit-button,
.order-form-div button[type="submit"],
.order-form-div .btn-primary,
.order-form-div .luckybank button,
.order-form-div .luckybank input[type="submit"] {
background: #2f6de0 !important; /* 메인 파랑 */
border-color: #2f6de0 !important;
color: #ffffff !important;
font-weight: 800 !important;
}
/* hover 상태 */
.order-form-div .paymentButton:hover,
.order-form-div .submit-button:hover,
.order-form-div .btn-primary:hover {
background: #2457b8 !important; /* 진한 파랑 */
border-color: #2457b8 !important;
}
/* 혹시 남아있는 보라색 변수 차단 */
:root {
--main-color: #2f6de0 !important;
}
/* 회원가입/로그인 상단 헤더에 가려지는 현상 보정 */
body {
padding-top: 0 !important;
}
#signup,
#signin,
.auth_main,
.page-content,
.main-content,
.content-wrapper {
padding-top: 90px !important; /* 필요시 70~120 사이로만 조절 */
}
/* 헤더가 fixed 인 경우에도 항상 위에 올라오게 */
header,
.navbar,
.topbar,
.header {
z-index: 9999 !important;
}
/* 모바일에서 헤더 높이가 더 큰 경우 대비 */
@media (max-width: 768px) {
#signup,
#signin,
.auth_main,
.page-content,
.main-content,
.content-wrapper {
padding-top: 110px !important;
}
}
/* 회원가입 화면 가독성 강제 개선 */
#signup,
#signup .p-4.rounded.shadow.border {
background: transparent !important;
}
#signup .p-4.rounded.shadow.border {
background: #ffffff !important;
border: 1px solid #e6eaf2 !important;
border-radius: 14px !important;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}
/* text-white 제거 */
#signup .text-white,
#signup .signup-title,
#signup .txt,
#signup label,
#signup p,
#signup h2 {
color: #0f172a !important;
}
/* 입력창 */
#signup .form-control {
background: #ffffff !important;
border: 1px solid #d9deea !important;
color: #0f172a !important;
border-radius: 12px !important;
height: 46px;
}
#signup .form-control:focus {
border-color: #2563eb !important;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}
#signup .form-control::placeholder {
color: #94a3b8 !important;
}
/* 버튼 */
#signup .btn.btn-primary {
background: #2563eb !important;
border-color: #2563eb !important;
border-radius: 12px !important;
font-weight: 800;
height: 46px;
}
#signup a {
color: #2563eb !important;
font-weight: 700;
}
#signup {
padding-top: 30px;
padding-bottom: 30px;
}
/* ================================
Persona Monotone Dark Override
반드시 기존 CSS 다음에 로드
================================ */
/* 다크 변수 */
:root{
--md-bg:#0b0f14;
--md-panel:#111826;
--md-panel-2:#0f1622;
--md-border:rgba(255,255,255,.10);
--md-border-2:rgba(255,255,255,.14);
--md-text:#e6e8ee;
--md-muted:rgba(230,232,238,.72);
--md-dim:rgba(230,232,238,.55);
--md-input:#0c1320;
--md-shadow:0 14px 40px rgba(0,0,0,.45);
}
/* 전체 배경 */
html, body,
.guest,
.auth_body{
background: var(--md-bg) !important;
color: var(--md-text) !important;
}
/* 링크 */
a{ color: var(--md-text) !important; }
a:hover{ opacity:.9; }
/* 카드, 패널, well 공통 */
.card, .panel, .well,
.auth_body .bg-white, .auth_body .bg-light,
.auth_body .card, .auth_body .panel{
background: var(--md-panel) !important;
border: 1px solid var(--md-border) !important;
color: var(--md-text) !important;
box-shadow: none !important;
}
/* 텍스트 강제 */
p, span, label, li, td, th, h1, h2, h3, h4, h5, h6{
color: var(--md-text) !important;
}
/* 상단 네비 */
.main-navbar, header, .navbar{
background: rgba(17,24,38,.92) !important;
border-bottom: 1px solid var(--md-border) !important;
box-shadow: none !important;
}
/* 네비 링크 */
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link{
color: var(--md-muted) !important;
}
.main-navbar.navbar-light .navbar-nav .nav-link.active,
.main-navbar.navbar-light .navbar-nav .nav-link:hover{
color: var(--md-text) !important;
}
/* 기존 파란 강조선 제거 */
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link::after{
border: 0 !important;
}
/* 버튼 전부 모노톤 */
.btn,
.btn.btn-primary,
.btn-success,
.buy-btn,
.blog-btn,
.related-blog-btn,
.order-form-div .paymentButton,
.order-form-div .submit-button,
.order-form-div button[type="submit"],
.order-form-div .btn-primary{
background: #e6e8ee !important;
color: #0b0f14 !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 14px !important;
box-shadow: none !important;
font-weight: 800 !important;
}
.btn:hover,
.buy-btn:hover{
filter: brightness(.92) !important;
}
/* 대량 주문 버튼 (btn-outline-light)도 강제 */
.btn.btn-outline-light,
.main-navbar .btn-outline-light,
a.btn.btn-outline-light{
background: transparent !important;
color: var(--md-text) !important;
border: 1px solid var(--md-border-2) !important;
border-radius: 14px !important;
box-shadow: none !important;
font-weight: 700 !important;
}
.btn.btn-outline-light:hover{
background: rgba(255,255,255,.10) !important;
}
/* 입력창 */
input, select, textarea, .form-control{
background: var(--md-input) !important;
color: var(--md-text) !important;
border: 1px solid var(--md-border-2) !important;
border-radius: 12px !important;
box-shadow: none !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus{
outline: none !important;
border-color: rgba(255,255,255,.28) !important;
box-shadow: 0 0 0 4px rgba(255,255,255,.06) !important;
}
/* placeholder */
::placeholder{
color: var(--md-dim) !important;
}
/* ===== 회원가입/로그인 박스 ===== */
#signup, #signin{
background: transparent !important;
}
#signup .p-4.rounded.shadow.border,
#signin .p-4.rounded.shadow.border,
.signup-innerbox{
background: var(--md-panel) !important;
border: 1px solid var(--md-border) !important;
border-radius: 18px !important;
box-shadow: var(--md-shadow) !important;
}
#signup .text-white, #signin .text-white{
color: var(--md-text) !important;
}
/* 제목/설명 텍스트 */
.signup-title,
.signup-innerbox .title{
color: var(--md-text) !important;
}
.signup-innerbox .txt,
.singin-question{
color: var(--md-muted) !important;
}
/* ===== 캡슐, 배지 파란색 제거 ===== */
.badge-status,
.badge-online,
.badge-normal,
.badge-success-status,
table#service-table .badge{
background: rgba(255,255,255,.12) !important;
border: 1px solid var(--md-border-2) !important;
color: var(--md-text) !important;
}
/* 주문 단계 숫자 (span.order-steps) 조잡함 제거 */
.order-steps,
.order-step-number,
.step-number,
.process-number,
.order-steps li span.step{
background: transparent !important;
border: 1px solid var(--md-border-2) !important;
color: var(--md-text) !important;
box-shadow: none !important;
}
/* ===== 자주 묻는 질문 박스 개선 ===== */
.faq-card .faq-item{
border: 0 !important;
}
.faq-card summary{
background: var(--md-panel-2) !important;
border: 1px solid var(--md-border) !important;
border-radius: 14px !important;
box-shadow: none !important;
}
.faq-card summary:hover{
border-color: rgba(255,255,255,.20) !important;
background: rgba(255,255,255,.04) !important;
}
.faq-card .chev{
opacity: .7 !important;
}
.faq-card .answer{
background: rgba(255,255,255,.03) !important;
border: 1px solid var(--md-border) !important;
color: var(--md-muted) !important;
border-radius: 14px !important;
}
/* 테이블 헤더가 파랗게 남는 경우 방어 */
.table tr th{
background: rgba(255,255,255,.10) !important;
color: var(--md-text) !important;
}
.table tbody tr td{
background: var(--md-panel) !important;
border: 1px solid var(--md-border) !important;
color: var(--md-text) !important;
}
/* 모바일 하단 네비 */
.mobile-nav{
background: rgba(17,24,38,.96) !important;
border-top: 1px solid var(--md-border) !important;
box-shadow: none !important;
}
.mobile-nav li a{
color: var(--md-muted) !important;
}
header,
.navbar,
.main-navbar {
position: fixed !important;
top: 0;
left: 0;
right: 0;
}
body,
#signin,
#signup {
padding-top: 160px !important;
}
#signin .p-4.rounded.shadow.border,
#signup .p-4.rounded.shadow.border,
.login-box,
.auth-box,
.card {
margin-top: 120px !important;
}
/* 로그인/회원가입 모달 박스 자체를 아래로 강제 이동 */
.modal.show .modal-dialog,
.modal.in .modal-dialog,
.modal-dialog {
margin-top: 140px !important;
}
/* 상단이 잘리는 느낌이면 이것도 같이 */
.modal {
padding-top: 120px !important;
}
/* ===== 로그인/회원가입 모달 전체 톤 ===== */
.modal .modal-content{
background: #0b0f14 !important; /* 모노톤 다크 */
color: rgba(255,255,255,.92) !important;
border: 1px solid rgba(255,255,255,.08) !important;
box-shadow: 0 30px 80px rgba(0,0,0,.55) !important;
border-radius: 14px !important;
}
/* 헤더/타이틀 */
.modal .modal-header{
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.modal .modal-title,
.modal h1, .modal h2, .modal h3{
color: rgba(255,255,255,.94) !important;
}
/* 라벨/설명 문구 가독성 */
.modal label,
.modal .form-text,
.modal small{
color: rgba(255,255,255,.72) !important;
}
/* 인풋 */
.modal .form-control,
.modal input[type="text"],
.modal input[type="password"],
.modal input[type="email"],
.modal input[type="tel"]{
background: #121926 !important;
color: rgba(255,255,255,.92) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: none !important;
}
.modal .form-control::placeholder{
color: rgba(255,255,255,.38) !important;
}
.modal .form-control:focus{
border-color: rgba(255,255,255,.22) !important;
outline: none !important;
box-shadow: 0 0 0 4px rgba(255,255,255,.06) !important;
}
/* 버튼(블루톤 제거: 모노톤 그레이) */
.modal .btn,
.modal button{
border-radius: 10px !important;
}
.modal .btn-primary,
.modal .btn-success,
.modal .btn-info{
background: #e9edf2 !important;
color: #0b0f14 !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
.modal .btn-primary:hover{
background: #ffffff !important;
}
.modal a{
color: rgba(255,255,255,.78) !important;
}
.modal a:hover{
color: rgba(255,255,255,.92) !important;
}
/* 닫기 버튼 위치/모양 강제 */
.modal .btn-close,
.modal button.btn-close,
.login-modal .btn-close{
position: absolute !important;
top: 14px !important;
right: 14px !important;
width: 25px !important;
height: 25px !important;
border-radius: 12px !important;
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.14) !important;
opacity: 1 !important;
z-index: 9999 !important;
/* 기존 부트스트랩 close 아이콘 무시 */
background-image: none !important;
}
/* X 문자로 표시 */
.modal .btn-close::before{
content: "×" !important;
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 28px;
font-weight: 800;
color: rgba(255,255,255,.92) !important;
line-height: 1;
}
.modal .btn-close:hover{
background: rgba(255,255,255,.12) !important;
}
/* 로그인/회원가입 폼 가독성 기본값 */
.modal, .login-modal, .login-popup{
color: rgba(255,255,255,.92) !important;
}
/* 폼 박스(오른쪽 영역) 배경/대비 */
.modal .modal-content,
.login-modal .modal-content,
.login-popup .modal-content{
background: rgba(8,12,18,.92) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: 0 20px 60px rgba(0,0,0,.55) !important;
}
/* 입력칸: 어둡지만 글자 선명하게 */
.modal input,
.login-modal input,
.login-popup input{
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.14) !important;
color: rgba(255,255,255,.92) !important;
}
.modal input::placeholder,
.login-modal input::placeholder,
.login-popup input::placeholder{
color: rgba(255,255,255,.40) !important;
}
/* 포커스: 파란색 말고 모노톤 하이라이트 */
.modal input:focus,
.login-modal input:focus,
.login-popup input:focus{
outline: none !important;
border-color: rgba(255,255,255,.28) !important;
box-shadow: 0 0 0 4px rgba(255,255,255,.06) !important;
}
/* 버튼: 블루톤 제거 → 그레이 톤 */
.modal .btn,
.login-modal .btn,
.login-popup .btn{
background: rgba(255,255,255,.92) !important;
color: #0b0f14 !important;
border: 0 !important;
}
.modal .btn:hover,
.login-modal .btn:hover,
.login-popup .btn:hover{
background: rgba(255,255,255,.82) !important;
}
/* 링크/작은 글씨 대비 */
.modal a,
.login-modal a,
.login-popup a{
color: rgba(255,255,255,.78) !important;
}
.modal .text-muted,
.login-modal .text-muted,
.login-popup .text-muted{
color: rgba(255,255,255,.55) !important;
}
/* 로그인 왼쪽 이미지 영역 제거 */
.login-image,
.login-illustration,
.login-left,
.modal .col-md-6:first-child {
display: none !important;
}
/* 로그인 폼 영역 풀폭 */
.modal .col-md-6,
.login-form,
.login-right {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
/* ===== 로그인 모달: 정방형(세로형)로 줄이기 ===== */
/* 1) 모달 전체 폭 제한 + 가운데 정렬 */
.modal-dialog{
max-width: 520px !important; /* 480~560 사이로 취향 조절 */
width: calc(100% - 32px) !important;
margin: 56px auto !important; /* 상단 여백 */
}
/* 2) 모달 바디 패딩/레이아웃 정리 */
.modal-content{
border-radius: 18px !important;
}
.modal-body{
padding: 22px 22px 18px !important;
}
/* 3) 입력칸/버튼 폭을 모달 폭에 맞게 (풀폭 유지) */
.modal-body input,
.modal-body .form-control,
.modal-body button,
.modal-body .btn{
width: 100% !important;
}
/* 4) 너무 넓어 보이는 요소 간격 조금 조여서 정방형 느낌 */
.modal-body .form-group,
.modal-body .mb-3{
margin-bottom: 12px !important;
}
/* 5) 우측 상단 X 버튼 위치 정리 (이미 적용된 느낌이지만 안전빵) */
.modal-header,
.modal .modal-header{
padding: 14px 18px 0 !important;
border: 0 !important;
}
.modal .btn-close,
.modal .close{
position: absolute !important;
top: 14px !important;
right: 14px !important;
z-index: 5 !important;
}
/* ===== 로그인 모달 더 좁게 + 체크박스 정렬 ===== */
/* 모달 폭 더 줄이기 */
.modal-dialog{
max-width: 420px !important; /* 더 줄임 (380~440 취향) */
width: min(420px, calc(100% - 28px)) !important;
margin: 64px auto !important;
}
/* 내부 여백도 조금 줄여서 더 컴팩트하게 */
.modal-body{
padding: 18px 18px 16px !important;
}
/* 입력/버튼 풀폭 유지 */
.modal-body input,
.modal-body .form-control,
.modal-body button,
.modal-body .btn{
width: 100% !important;
}
/* 폼 간격 컴팩트 */
.modal-body .form-group,
.modal-body .mb-3{
margin-bottom: 10px !important;
}
/* ===== "로그인 상태 유지" 체크박스: 한 줄로 붙이기 ===== */
/* 보통 부트스트랩은 form-check / form-check-input / form-check-label 구조 */
.modal-body .form-check{
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 8px 0 10px !important; /* 입력칸 바로 아래 붙는 느낌 */
padding-left: 0 !important; /* 기본 들여쓰기 제거 */
}
/* 체크박스가 뜬금없이 떨어지는 현상 방지 */
.modal-body .form-check-input{
margin: 0 !important;
float: none !important;
position: static !important;
}
/* 라벨도 줄 맞춤 */
.modal-body .form-check-label{
margin: 0 !important;
line-height: 1.2 !important;
}
/* "비밀번호를 잊으셨나요?" 같은 링크가 체크박스랑 떨어져 있으면 바로 아래로 정리 */
.modal-body .form-check + a,
.modal-body .form-check + .small,
.modal-body .form-check + p{
display: block !important;
margin-top: 6px !important;
}
/* ✅ 회원가입 섹션이 아래로 내려가는 현상: 중앙정렬로 강제 */
#signup{
min-height: calc(100vh - 80px) !important; /* 상단 헤더 대충 80px 가정 */
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 40px 0 !important;
}
/* 섹션 내부 컨테이너/row가 위아래 여백을 과하게 먹는 경우 리셋 */
#signup .container,
#signup .row{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 회원가입 페이지 상단 여백 줄이기 */
#signup{
min-height: calc(100vh - 120px) !important; /* 헤더 높이만큼 줄임 */
padding-top: 40px !important; /* 기존보다 위로 */
padding-bottom: 40px !important;
align-items: flex-start !important; /* 중앙 → 위 기준 */
}
/* 회원가입 카드 자체를 살짝 위로 */
#signup .p-4.rounded.shadow.border{
margin-top: 20px !important;
}
/* ===== 회원가입(또는 폼 페이지) 상단 여백 줄이기 - 중앙정렬 유지 ===== */
/* Edge(크로미움) 지원 :has()로 '해당 폼이 있는 페이지'만 스코프 */
body:has(#signup) #signup,
body:has(form.signup-frm) #signup,
body:has(form.signup-frm) section,
body:has(form[action][method="post"]) #signup{
padding-top: 0 !important;
margin-top: 0 !important;
}
/* #signup 내부의 상/하 패딩이 원인인 경우 제거 */
body:has(#signup) #signup .container,
body:has(form.signup-frm) .container{
padding-top: 0 !important;
margin-top: 0 !important;
}
/* 중앙정렬은 유지하되, 카드(회원가입 박스)만 위로 당김 */
body:has(form.signup-frm) .signup-frm,
body:has(#signup) #signup .p-4.rounded.shadow.border,
body:has(#signup) #signup .rounded.shadow,
body:has(#signup) #signup .shadow{
transform: translateY(-70px) !important; /* 여기 숫자만 조절하면 됨 */
}
/* 혹시 row/col 쪽에 위쪽 여백이 걸려있으면 같이 제거 */
body:has(#signup) #signup .row,
body:has(form.signup-frm) .row{
margin-top: 0 !important;
padding-top: 0 !important;
}
body:has(#signup) #signup .col-sm-6,
body:has(form.signup-frm) .col-sm-6{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ===== 회원가입 페이지 스코프(안전) ===== */
body:has(form.signup-frm) {}
/* 1) 페이지 상단 여백 더 줄이기 */
body:has(form.signup-frm) #signup,
body:has(form.signup-frm) section#signup,
body:has(form.signup-frm) .green-bg{
padding-top: 0 !important;
margin-top: 0 !important;
min-height: auto !important;
}
/* 2) 카드(박스) 전체를 조금 더 위로 */
body:has(form.signup-frm) .col-sm-6 > .p-4,
body:has(form.signup-frm) .col-sm-6 > .rounded,
body:has(form.signup-frm) .signup-frm{
transform: translateY(-0px) !important; /* 더 올리고 싶으면 -170px */
}
/* 3) 카드 내부 상단 패딩 줄여서 "반갑습니다 고객님" 겹침 방지 */
body:has(form.signup-frm) .col-sm-6 > .p-4{
padding-top: 18px !important;
padding-bottom: 16px !important; /* 하단 여백도 같이 줄임 */
}
/* 4) 제목/서브텍스트 아래쪽 간격 줄이기(겹침 해결 핵심) */
body:has(form.signup-frm) .signup-title{
margin: 0 0 10px 0 !important;
line-height: 1.2 !important;
}
body:has(form.signup-frm) #signup p.txt{
margin: 0 0 12px 0 !important;
line-height: 1.35 !important;
opacity: 0.9 !important;
}
/* 5) 카드 맨 아래 불필요한 공간(푸터/여백) 잡아먹는 요소 제거 */
body:has(form.signup-frm) #signup .col-sm-6 > .p-4 > *:last-child{
margin-bottom: 0 !important;
}
body:has(form.signup-frm) #signup .col-sm-6 > .p-4{
padding-bottom: 14px !important;
}
/* 6) "이미 계정이 있으신가요? 로그인" 아래쪽 마진 줄이기 */
body:has(form.signup-frm) #signup a,
body:has(form.signup-frm) #signup .mt-3,
body:has(form.signup-frm) #signup .mt-4{
margin-top: 10px !important;
}
/* ===============================
회원가입 페이지 전체 높이 리셋
=============================== */
/* 회원가입 섹션 전체 */
#signup,
section#signup,
.green-bg{
min-height: auto !important;
height: auto !important;
padding-top: 40px !important; /* 위 여백 줄이기 */
padding-bottom: 40px !important;/* 아래 여백 줄이기 */
margin-bottom: 0 !important;
}
/* body 자체가 잡아먹는 경우 대비 */
body{
min-height: auto !important;
}
/* 카드가 들어있는 row/container */
#signup .row,
#signup .container{
min-height: auto !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* 카드 아래 불필요한 여백 제거 */
#signup .col-sm-6{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* 카드 자체 하단 여백 최소화 */
#signup .p-4,
#signup .rounded{
margin-bottom: 0 !important;
padding-bottom: 16px !important;
}
footer{ display:none !important; }
/* ======================================
회원가입 카드(폼) 자체가 늘어나는 문제 해결
- 카드 하단 빈 공간 제거
- "반갑습니다 고객님" 겹침 제거
====================================== */
/* 1) 회원가입 카드(박스) 높이/패딩 강제 리셋 */
#signup .col-sm-6 > .p-4,
#signup .col-sm-6 > .rounded,
#signup .col-sm-6 > .shadow,
#signup .col-sm-6 > .border,
#signup .col-sm-6 > div.p-4.rounded.shadow.border{
height: auto !important;
min-height: 0 !important;
padding-bottom: 18px !important; /* 하단 여백 확 줄임 */
}
/* 2) 카드 내부에 고정 높이/100% 높이 먹는 요소가 있으면 같이 죽임 */
#signup .col-sm-6 > div.p-4.rounded.shadow.border *,
#signup .signup-frm,
#signup form.signup-frm{
height: auto !important;
min-height: 0 !important;
}
/* 3) 제목/설명 겹치는 문제: 제목/설명 마진/패딩 정상화 */
#signup .signup-title,
#signup h2.signup-title{
margin: 0 0 8px 0 !important;
padding: 0 !important;
line-height: 1.25 !important;
position: static !important;
}
#signup .txt,
#signup p.txt{
margin: 0 0 14px 0 !important;
padding: 0 !important;
line-height: 1.35 !important;
position: static !important;
}
/* 4) 혹시 제목/설명이 absolute로 떠서 겹치면 강제 해제 */
#signup .signup-title,
#signup .txt{
top: auto !important;
bottom: auto !important;
transform: none !important;
}
/* 5) 카드 안 하단(로그인 링크 아래) 통째로 비는 경우 = 과한 padding/margin 제거 */
#signup .col-sm-6 > div.p-4.rounded.shadow.border{
margin-bottom: 0 !important;
}
#signup .col-sm-6{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* ===============================
회원가입 페이지 여백 강제 축소
카드 전체 위로 끌어올리기
=============================== */
/* 1) signup 섹션 자체 여백 제거 */
#signup{
padding-top: 40px !important; /* 기본값보다 확 줄임 */
padding-bottom: 40px !important;
min-height: auto !important;
}
/* 2) 중앙정렬용 flex/height 강제 해제 */
#signup .container,
#signup .row{
min-height: auto !important;
height: auto !important;
align-items: flex-start !important;
}
/* 3) 카드 자체를 위로 당김 (핵심) */
#signup .col-sm-6{
margin-top: -200px !important; /* ← 여기 숫자로 미세조정 */
}
/* 4) 카드 하단 쓸데없는 여백 제거 */
#signup .col-sm-6 > div{
margin-bottom: 0 !important;
padding-bottom: 20px !important;
}
/* 2) 서비스 상태 바(상단 긴 흰 박스) */
.service-status,
.status-bar,
div:has(> span:contains("서비스상태")),
div[class*="status"]{
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
color: rgba(255,255,255,0.88) !important;
padding: 12px 14px !important;
border-radius: 12px !important;
}
/* 3) 인기 TOP3 내부 흰 캡슐(리스트 아이템들) -> 다크 캡슐로 변경 */
.top3 .item,
.top3 li,
.popular-top3 .item,
.popular-top3 li,
div[class*="top3"] .item,
div[class*="top3"] li{
background: rgba(0,0,0,0.22) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
color: rgba(255,255,255,0.92) !important;
padding: 12px 14px !important;
border-radius: 12px !important;
}
/* 4) TOP3 안의 작은 설명 글(회색이 너무 죽어있던 부분) */
.top3 .item small,
.top3 li small,
.popular-top3 small,
div[class*="top3"] small{
color: rgba(255,255,255,0.65) !important;
}
/* 5) TOP3 번호 원(1,2,3)이 너무 튀거나 약하면 정리 */
.top3 .rank,
.popular-top3 .rank,
div[class*="top3"] .rank{
background: rgba(255,255,255,0.10) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
color: rgba(255,255,255,0.90) !important;
width: 28px !important;
height: 28px !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 0) 전체 배경을 다크로 강제 (흰 바탕 원천 차단) */
html, body {
background: #0b1220 !important;
}
/* 1) 흰 배경이 씌워지는 공용 컨테이너/섹션 투명 처리 */
.container, .container-fluid,
.wrapper, .content, .content-wrapper,
.main, .main-content,
section, main,
.card, .panel, .well,
.page, .page-content {
background: transparent !important;
}
/* 2) “상단 흰 띠/공백” 만드는 상단 영역 강제 제거 (가장 흔한 케이스들) */
.notice-wrap, .top-notice, .home-signIn {
display: none !important;
}
/* 3) 상단 공백(마진/패딩) 싹 제거 */
header, .navbar, .topbar, .header, .page-header {
margin-bottom: 0 !important;
}
main, .content, .content-wrapper, .page-content, .container, .container-fluid {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* 4) 모바일에서 특히 심한 “위쪽 흰 여백” 추가 제거 */
@media (max-width: 768px){
body, main, .content, .content-wrapper, .page-content, .container, .container-fluid {
padding-top: 0 !important;
margin-top: 0 !important;
}
}
/* header 바로 아래 첫 블록이 흰 배경일 때 통째로 제거 */
header + div { background: transparent !important; margin-top: 0 !important; padding-top: 0 !important; }
header + div:empty { display:none !important; }
/* ==============================
상단 흰 배경 + 공백 핵폭탄 제거
============================== */
/* 1) 전체 바탕 다크 고정 */
html, body {
background: #0b1220 !important;
}
/* 2) 상단에서 "흰 배경을 가진 큰 블록" 전부 투명 + 공백 제거 */
body > * {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 3) 헤더 바로 아래에 생기는 첫 영역(대부분 여기서 흰 띠 나옴) 제거 */
header + div,
header + section,
header + main {
background: transparent !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 4) 흰 배경을 강제로 덮어씌우는 공용 클래스들 전부 무력화 */
.container, .container-fluid,
.wrapper, .content, .content-wrapper,
.main, main, section,
.page, .page-content,
.card, .panel, .well,
.bg-white, .white-bg {
background: transparent !important;
box-shadow: none !important;
}
/* 5) “상단 공지/배너/소개/환영문” 류 통째로 숨김 (흰 영역의 주범들) */
.notice, .notice-wrap, .top-notice,
.home-signIn, .home-banner, .home-hero, .hero,
.announcement, .alert, .promo, .promo-bar {
display: none !important;
}
/* 6) 혹시 흰 영역이 '빈 공간'이라면 높이 자체를 0으로 눌러버림 */
header + div:empty,
header + section:empty,
header + main:empty {
display: none !important;
}
/* 7) 모바일에서 상단 패딩이 더 생기는 경우 강제 0 */
@media (max-width: 768px){
body, main, .content, .content-wrapper, .page-content, .container, .container-fluid {
padding-top: 0 !important;
margin-top: 0 !important;
}
}
/* ===== RESET START: 상단바 유지 + 상단 여백만 제거 ===== */
/* 기본 리셋 */
html, body { margin:0 !important; padding:0 !important; }
/* 상단바는 건드리지 않음(높이/포지션/표시 유지) */
header, nav, .navbar, .topbar, .header, .main-header {
height: auto !important;
min-height: initial !important;
display: flex !important;
}
/* 본문 시작점(대부분 이쪽이 과하게 내려가 있음)만 줄이기 */
body { padding-top: 0 !important; margin-top: 0 !important; }
/* 테마/패널에서 상단에 붙이는 공백 제거 */
#app, #wrapper, #content,
.wrapper, .content, .content-wrapper,
main, .main, .page, .page-content,
.container, .container-fluid {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* “첫 번째 섹션” 위 여백만 제거 (검색바/첫 카드 위 공백) */
main > *:first-child,
.content > *:first-child,
.page-content > *:first-child,
.container > *:first-child,
.container-fluid > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ===== RESET END ===== */
/* ===== MICRO CONTROL FINAL (이것만 숫자 바꿈) ===== */
/* 1) 전체를 올리고/내리는 다이얼 */
:root { --push: -20px; } /* <-- 여기 숫자만 바꾸세요 (0, 4, 8, 12) */
/* 2) 실제로 화면을 밀고 있는 래퍼들에 강제 적용 */
html body,
body,
#app, #wrapper, #content,
.wrapper, .content, .content-wrapper,
main, .main, .page, .page-content,
.container, .container-fluid {
margin-top: 0 !important;
padding-top: var(--push) !important;
}
/* 3) 첫 블록 위 간격 다이얼(필요하면 같이) */
:root { --firstgap: 0px; } /* <-- 첫 요소만 띄우고 싶으면 8px */
main > *:first-child,
.content > *:first-child,
.page-content > *:first-child,
.container > *:first-child,
.container-fluid > *:first-child {
margin-top: var(--firstgap) !important;
}
/* 상단에서 height로 공간 먹는 놈 전부 빨갛게 표시 */
body > div {
outline: 3px solid red !important;
}
/* 상단 공백 진범: .default__card__wraper (neworder 페이지) */
.auth_main .default__card__wraper.py-5.mt-5{
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* 혹시 클래스 조합이 다를 때 대비 */
.auth_main .default__card__wraper{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 서비스 페이지 상단 여백 제거 */
.user-dashboard-rightbar.mt-5.pt-5{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 검색 박스 상단 여백 제거 */
.search__box.mt-5.pt-5{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 검색 영역 상단 여백 완전 제거 */
.search__box{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* row에서 혹시 섞여 있는 상단 마진 제거 */
.search__box .row{
margin-top: 0 !important;
}
/* 카드 내부 상단 패딩 줄이기 (완전 제거 말고 최소값) */
.search__box .card-body{
padding-top: 8px !important; /* ← 여기만 미세조절 */
}
/* 주문내역/서비스 페이지 상단 여백 원샷 제거 */
.user-dashboard-rightbar{
margin-top: 0 !important;
padding-top: 0 !important;
}
.user-dashboard-rightbar .search__box{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 내부에서 또 밀어내는 케이스들 같이 제거 */
.user-dashboard-rightbar .row{
margin-top: 0 !important;
}
.user-dashboard-rightbar .card{
margin-top: 0 !important;
}
.user-dashboard-rightbar .card-body{
padding-top: 0 !important;
}
/* 헤더 아래 본문 상단 여백 제거 (PerfectPanel 테마 대응) */
.content-wrapper,
.page-wrapper,
.main-content,
.page-content,
.app-content,
.dashboard-content,
#content,
#main,
main {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* 혹시 '섹션' 단위로 위쪽 padding 주는 테마 대응 */
.content-wrapper > .container,
.page-wrapper > .container,
.main-content > .container,
.page-content > .container,
#content > .container,
main > .container {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* 검색 영역 자체도 0으로 고정 */
.search__box {
margin-top: 0 !important;
padding-top: 0 !important;
}
body { padding-top: 0 !important; }
/* (최강) 헤더 아래 빈공간 원천 제거 */
html, body {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* PerfectPanel/Bootstrap 테마에서 자주 쓰는 최상위 래퍼들 */
#wrapper, .wrapper, .app, .app-wrapper, .page-wrapper, .content-wrapper, .main-wrapper,
#content, .content, .page-content, .main-content, .app-content, main, #main {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* container / container-fluid 상단 패딩까지 제거(상단 공간의 주범인 경우가 많음) */
.container, .container-fluid {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* 검색 영역도 0 고정 */
.search__box {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 헤더 아래 자동으로 들어가는 spacer/offset 제거 */
.navbar-spacer, .header-spacer, .top-spacer, .page-top, .page-header {
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
/* 검색 박스를 위로 당겨서 상단 빈공간 제거 */
.search__box {
margin-top: -120px !important;
}
/* 모바일은 덜 당김 */
@media (max-width: 768px) {
.search__box {
margin-top: -100px !important;
}
}
/* ========== 0) 다크 톤 변수 ========== */
:root{
--bg: #0b1220;
--panel: #0f1a2b;
--panel2: #111f35;
--border: rgba(255,255,255,.08);
--text: rgba(255,255,255,.88);
--muted: rgba(255,255,255,.62);
--accent: #3b82f6;
}
/* ========== 1) 전체 배경/기본 글자 ========== */
body{
background: var(--bg) !important;
color: var(--text) !important;
}
/* ========== 2) 문제의 "하얀 박스" 제거 핵심 ========== */
/* 부트스트랩 카드/패널류 */
.card, .card-body, .panel, .well, .bg-white, .white-bg, .table, .table-responsive{
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
box-shadow: none !important;
}
/* ========== 3) 입력폼 통일 (흰 인풋 제거) ========== */
input, select, textarea, .form-control{
background: var(--panel2) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
input::placeholder, textarea::placeholder{
color: var(--muted) !important;
}
/* ========== 4) 아코디언/FAQ(Details) 통일 ========== */
details, summary{
background: var(--panel) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
details[open]{
background: var(--panel2) !important;
}
details > .answer, details > div{
color: var(--muted) !important;
}
/* ========== 5) 링크/강조색 ========== */
a, .text-primary{
color: var(--accent) !important;
}
hr{
border-color: var(--border) !important;
}
body{
font-size: 14px;
line-height: 1.55;
letter-spacing: .1px;
}
h1,h2,h3,h4,h5{
letter-spacing: .2px;
}
/* 흰 테두리/흰 아웃라인/흰 포커스링 전부 제거 */
input,
select,
textarea,
.form-control,
.input-group .form-control,
.input-group .btn,
.btn,
button {
outline: none !important;
box-shadow: none !important;
}
/* 기본 border 색을 아주 어두운 톤으로 강제 (흰색 방지) */
input,
select,
textarea,
.form-control,
.input-group .form-control {
border-color: rgba(255,255,255,0.06) !important;
}
/* 포커스 시에도 흰색 안 뜨게 강제 */
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.input-group .form-control:focus,
button:focus,
.btn:focus {
outline: none !important;
box-shadow: none !important;
border-color: rgba(59,130,246,0.25) !important; /* 은은한 포커스 */
}
/* 테이블 배경 통일 */
.services-div .table {
background: #0f1e33 !important;
border: none !important;
}
/* 테이블 행 구분선 흰색 제거 */
.services-div .table th,
.services-div .table td {
border-top: 1px solid rgba(255,255,255,0.06) !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
/* 테이블 전체 테두리 제거 */
.services-div .table {
border-collapse: collapse !important;
}
/* responsive div 흰 배경 제거 */
.services-div .table-responsive {
background: transparent !important;
border: none !important;
}
.ser-well {
background: #0f1e33 !important;
border: none !important;
}
/* 검색 돋보기 아이콘 검정색 */
#search_filter {
color: #000 !important;
}
#search_filter i,
#search_filter svg {
color: #000 !important;
fill: #000 !important;
}
/* 전체 퍼런 배경 제거 */
body {
background: #0f141a !important;
}
/* 카드/박스 톤 통일 */
.card,
.panel,
.ser-well,
.order-form-div,
.services-div,
.table {
background: #161c23 !important;
border-color: rgba(255,255,255,0.06) !important;
}
/* hover 시 */
.card:hover,
.table tr:hover {
background: #1c242e !important;
}
:root {
--card-bg: #161c23; /* 형님이 좋아하는 고급 차콜 */
--card-hover: #1c242e;
--card-border: rgba(255,255,255,0.06);
}
.bg-white {
background-color: var(--card-bg) !important;
}
.border {
border-color: var(--card-border) !important;
}
.card,
.panel,
.ser-well,
.order-form-div,
.services-div,
.table,
.rounded-4 {
background-color: var(--card-bg) !important;
border-color: var(--card-border) !important;
}
.card:hover,
.order-form-div:hover {
background-color: var(--card-hover) !important;
}
/* ===== 모바일 햄버거(offcanvas) 메뉴 가독성 개선 ===== */
@media (max-width: 991px){
/* 패널 자체 */
#navbarCollapse.offcanvas-collapse{
background: #0b1220 !important;
}
/* offcanvas가 열렸을 때(대부분 .open 또는 .show가 붙습니다)
둘 다 대응 */
#navbarCollapse.offcanvas-collapse.open,
#navbarCollapse.offcanvas-collapse.show{
background: #0b1220 !important;
}
/* 메뉴 링크 텍스트 */
#navbarCollapse.offcanvas-collapse .nav-link{
color: #ffffff !important;
font-weight: 700 !important;
font-size: 16px !important;
opacity: 1 !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}
/* 메뉴 아이콘도 같이 */
#navbarCollapse.offcanvas-collapse .navbar-icon,
#navbarCollapse.offcanvas-collapse i,
#navbarCollapse.offcanvas-collapse svg{
color: #ffffff !important;
fill: #ffffff !important;
opacity: 1 !important;
}
/* 보유금액 줄(잔액) 강조 */
#navbarCollapse.offcanvas-collapse .addfunds-menu{
background: #111827 !important;
border: 1px solid rgba(59,130,246,0.6) !important;
border-radius: 12px !important;
padding: 12px 14px !important;
margin-top: 8px !important;
}
/* 흐릿하게 만드는 전역 opacity/필터가 있을 때를 대비해 내부 강제 */
#navbarCollapse.offcanvas-collapse,
#navbarCollapse.offcanvas-collapse *{
opacity: 1 !important;
filter: none !important;
}
}
@media (max-width: 991px){
.navbar-toggler{
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
}
.navbar-toggler .navbar-toggler-icon{
filter: invert(1) !important;
}
}
#top-sec{
padding-top: 90px;
}
@media (min-width: 992px){
#top-sec{
padding-top: 40px;
}
}
@media (max-width: 992px){
/* 모바일 햄버거 메뉴 가독성 개선 */
@media (max-width: 992px){
.navbar-collapse{
background:#ffffff !important;
}
.navbar-collapse a,
.navbar-collapse li,
.navbar-collapse span{
color:#111111 !important;
font-weight:600;
}
.navbar-collapse a{
padding:14px 0;
border-bottom:1px solid #eeeeee;
}
}
@media (max-width: 992px){
.offcanvas,
.offcanvas.show{
opacity: 1 !important;
background: #ffffff !important;
filter: none !important;
-webkit-filter: none !important;
}
.offcanvas a,
.offcanvas .nav-link{
color: #111111 !important;
font-weight: 700 !important;
opacity: 1 !important;
}
@media (max-width: 991.98px){
.main-navbar .offcanvas-collapse,
.main-navbar .offcanvas-collapse.show{
background:#0f172a !important;
}
.main-navbar .offcanvas-collapse a,
.main-navbar .offcanvas-collapse .nav-link{
color:#e5e7eb !important;
font-weight:600 !important;
}
.main-navbar .offcanvas-collapse a:hover{
color:#ffffff !important;
}
}
/* 모바일 메뉴 보유금액 흰색 강제 */
.main-navbar .offcanvas-collapse .balance,
.main-navbar .offcanvas-collapse .balance *,
.main-navbar .offcanvas-collapse a[href*="addfunds"],
.main-navbar .offcanvas-collapse a[href*="addfunds"] * {
color: #ffffff !important;
}