/*

1. Add your custom Css styles below
2. Place the this code in your template:

 <link href="css/custom.css" rel="stylesheet">

*/

/* ----------------------------------------------------------------
	제품소개 드롭다운: EntVia / Zelple 가로 배치 + 투명 배경
-----------------------------------------------------------------*/
#mainMenu nav > ul > li.products-menu .dropdown-menu {
    background-color: transparent;
    border-width: 0 !important;
    box-shadow: none;
    min-width: 0;
    padding: 0;
    white-space: nowrap;
}

/* 데스크톱: #header의 line-height 80px 때문에 li가 헤더 전체 높이로 늘어나므로
   박스 바닥(top: auto) 대신 텍스트 기준(top: 50%)으로 배치하고,
   상속된 80px 라인박스를 없애(line-height: normal) 하단 여백 안에 표시 */
@media (min-width: 992px) {
    #mainMenu nav > ul > li.products-menu .dropdown-menu {
        top: 50%;
        margin-top: 8px;
        line-height: normal;
    }
}

#mainMenu nav > ul > li.products-menu .dropdown-menu > li {
    display: inline-block;
}

/* 기본(스크롤 후 sticky 흰 헤더): 상위 메뉴와 동일한 검정/파랑 */
#mainMenu nav > ul > li.products-menu .dropdown-menu > li > a {
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 10px 12px;
}

#mainMenu nav > ul > li.products-menu .dropdown-menu > li > a:hover,
#mainMenu nav > ul > li.products-menu .dropdown-menu > li > a:focus {
    color: #2250fc;
}

/* 투명 다크 헤더(페이지 상단): 상위 메뉴와 동일한 흰색/회색
   (sticky 시 템플릿 JS가 header의 dark 클래스를 제거하므로 위 기본 색으로 전환됨) */
.dark #mainMenu nav > ul > li.products-menu .dropdown-menu > li > a {
    color: #fff;
}

.dark #mainMenu nav > ul > li.products-menu .dropdown-menu > li > a:hover,
.dark #mainMenu nav > ul > li.products-menu .dropdown-menu > li > a:focus {
    color: #c1c3ce;
}

/* ----------------------------------------------------------------
	홈 화면 제품소개 섹션 (index.html)
-----------------------------------------------------------------*/
.hp-product-col { margin-bottom: 30px; }
.hp-product { display: block; height: 100%; background: #fff; border: 1px solid #e8eaf0; border-radius: 16px; padding: 36px 32px; color: #444; -webkit-transition: all .3s ease; transition: all .3s ease; }
.hp-product:hover, .hp-product:focus { color: #444; box-shadow: 0 15px 35px rgba(30, 40, 80, 0.08); -webkit-transform: translateY(-4px); transform: translateY(-4px); }
.hp-product.hp-entvia:hover, .hp-product.hp-entvia:focus { border-color: #2250fc; }
.hp-product.hp-zelple:hover, .hp-product.hp-zelple:focus { border-color: #7341B4; }

.hp-product-head { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-bottom: 20px; }
.hp-product-head img { width: 56px; height: 56px; border-radius: 14px; margin-right: 16px; -webkit-flex-shrink: 0; flex-shrink: 0; }
/* Zelple 로고는 흰색 단색 SVG라 배경색이 필요함 */
.hp-zelple .hp-product-head img { background: #7341B4; padding: 12px; }
.hp-product-head h4 { font-size: 20px; margin: 0 0 4px; }
.hp-product-tagline { display: block; font-size: 13px; color: #888; }

.hp-badge { display: inline-block; vertical-align: 3px; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #7341B4; background: rgba(115, 65, 180, 0.08); border-radius: 20px; padding: 3px 10px; margin-left: 8px; }

.hp-product p { font-size: 14px; line-height: 1.8; color: #666; margin-bottom: 20px; }

.hp-product-tags { margin-bottom: 24px; }
.hp-product-tags span { display: inline-block; font-size: 12px; color: #666; background: #f4f6fa; border-radius: 20px; padding: 5px 13px; margin: 0 6px 8px 0; }

.hp-product-more { font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.hp-entvia .hp-product-more { color: #2250fc; }
.hp-zelple .hp-product-more { color: #7341B4; }
.hp-product-more i { vertical-align: -1px; margin-left: 4px; -webkit-transition: margin-left .3s ease; transition: margin-left .3s ease; }
.hp-product:hover .hp-product-more i { margin-left: 9px; }

/* ----------------------------------------------------------------
	EntVia 제품 페이지 (04_entvia.html)
-----------------------------------------------------------------*/
.ev-section { padding: 90px 0; }
.ev-section.ev-alt { background-color: #f7f8fb; }
.ev-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #2250fc; background: rgba(34, 80, 252, 0.08); border-radius: 20px; padding: 6px 14px; margin-bottom: 18px; }
.ev-section h2 { font-size: 28px; margin-bottom: 16px; }
.ev-desc { font-size: 15px; line-height: 1.9; color: #555; }
.ev-note { font-size: 12px; color: #999; margin-top: 14px; }
.ev-diagram { text-align: center; }
.ev-diagram svg { max-width: 100%; height: auto; }

@media (max-width: 991.98px) {
    .ev-section { padding: 60px 0; }
    .ev-diagram { margin-top: 40px; }
    .ev-diagram.ev-diagram-first { margin-top: 0; margin-bottom: 40px; }
}

/* 요금제 카드 */
.ev-plan { background: #fff; border: 1px solid #e8eaf0; border-radius: 14px; padding: 34px 30px; margin-bottom: 30px; -webkit-transition: all .3s ease; transition: all .3s ease; }
.ev-plan:hover { box-shadow: 0 15px 35px rgba(30, 40, 80, 0.08); -webkit-transform: translateY(-4px); transform: translateY(-4px); }
.ev-plan.ev-featured { border-color: #2250fc; }
.ev-plan h4 { margin-bottom: 0; }
.ev-price { font-size: 40px; font-weight: 600; color: #1e2022; margin: 14px 0 0; }
.ev-price small { font-size: 13px; color: #9aa3b5; font-weight: 400; }
.ev-plan ul { list-style: none; margin: 22px 0 0; padding: 0; }
.ev-plan ul li { padding: 9px 0; border-bottom: 1px solid #f0f2f7; font-size: 13.5px; color: #444; }
.ev-plan ul li:last-child { border-bottom: 0; }
.ev-plan ul li i { color: #2250fc; margin-right: 10px; min-width: 14px; }
.ev-plan ul li.ev-na { color: #b6bcc9; }
.ev-plan ul li.ev-na i { color: #d3d8e2; }

/* 리소스 카드 */
.ev-res-card { display: block; background: #fff; border: 1px solid #e8eaf0; border-radius: 14px; padding: 30px 26px; height: 100%; color: #444; -webkit-transition: all .3s ease; transition: all .3s ease; }
.ev-res-card:hover, .ev-res-card:focus { border-color: #2250fc; box-shadow: 0 12px 30px rgba(30, 40, 80, 0.08); color: #444; }
.ev-res-card i { font-size: 26px; color: #2250fc; margin-bottom: 16px; display: block; }
.ev-res-card h4 { font-size: 16px; margin-bottom: 8px; }
.ev-res-card p { font-size: 13px; color: #777; margin: 0; }
.ev-res-col { margin-bottom: 30px; }

/* ----------------------------------------------------------------
	Zelple 제품 페이지 (05_zelple.html)
-----------------------------------------------------------------*/
.za-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #7341B4; background: rgba(115, 65, 180, 0.08); border-radius: 20px; padding: 6px 14px; margin-bottom: 18px; }

/* 준비 중 배너 */
.za-notice { background: linear-gradient(135deg, #7341B4 0%, #2250fc 100%); border-radius: 18px; color: #fff; padding: 40px 40px 36px; text-align: center; }
.za-notice h3 { color: #fff; margin-bottom: 8px; }
.za-notice p { color: rgba(255, 255, 255, 0.85); margin: 0; font-size: 14px; }
.za-notice .za-badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 20px; padding: 6px 16px; margin-bottom: 20px; }

/* 기능 카드 */
.za-card { background: #fff; border: 1px solid #e8eaf0; border-radius: 14px; padding: 28px 24px; height: 100%; -webkit-transition: all .3s ease; transition: all .3s ease; }
.za-card:hover { border-color: #7341B4; box-shadow: 0 12px 30px rgba(60, 30, 110, 0.08); }
.za-card i { font-size: 24px; color: #7341B4; margin-bottom: 14px; display: block; }
.za-card h4 { font-size: 16px; margin-bottom: 8px; }
.za-card p { font-size: 13px; color: #777; margin: 0; line-height: 1.7; }
.za-card-col { margin-bottom: 30px; }

/* 제품 페이지 상단 타이틀 로고 (04_entvia, 05_zelple) */
.page-title .product-title-logo { height: 64px; width: auto; margin-bottom: 20px; border-radius: 14px; }