@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');

:root {
    --cb-primary: #1aa9dc;
    --cb-primary-rgb: 26, 169, 220;
    --cb-secondary: #0c4b69;
    --cb-accent: #ff006e;
    --cb-dark: #0b0f1a;
    --cb-darker: #05070a;
    --cb-light: #f8fafc;
    --cb-glass: rgba(255, 255, 255, 0.05);
    --cb-glass-border: rgba(255, 255, 255, 0.1);
    --cb-font: 'Outfit', sans-serif;
}

.mobile_only { display: none; }

/* Base Styles */
body {
    font-family: var(--cb-font);
    background-color: var(--cb-dark);
    color: var(--cb-light);
    margin: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

#hd, #ft, #wrapper {
    min-width: 100% !important;
}

#aside { display: none !important; }
#container { float: none !important; width: 100% !important; margin: 0 auto !important; }
#container_wr { width: 100% !important; max-width: 1300px; margin: 0 auto !important; }
#wrapper { margin: 0 auto !important; }

/* Header & Nav */
#hd {
    background: transparent;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#hd.scrolled {
    background: rgba(11, 15, 26, 0.8);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--cb-glass-border);
}

#hd_wrapper {
    width: 1300px;
    max-width: 95%;
    margin: 0 auto;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.4s ease;
    padding: 0 20px;
}

#logo {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    padding: 0 !important; /* default.css 패딩 제거 */
}

#gnb {
    flex: 2;
    display: flex;
    justify-content: center;
    background: transparent !important;
    position: relative;
}

#gnb::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    max-width: 90vw;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

#hd.scrolled #gnb::after {
    bottom: -10px;
}

.hd_login {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative !important;
    top: auto !important;
    right: auto !important;
}

#hd.scrolled #hd_wrapper {
    height: 70px;
}

#logo a {
    color: var(--cb-light);
    font-size: 2rem;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -1.5px;
    display: flex;
    align-items: center;
}

.logo_img {
    /* 비개발자용 한글 주석: 요청에 따라 좌측 상단 GNB 로고의 크기를 가장 조화롭고 완벽하게 노출되는 최종 최적 규격인 1.2em (약 38px)으로 확정 조정함 */
    height: 1.2em;
    width: auto;
    /* 비개발자용 한글 주석: 우측 글자가 삭제되었으므로 불필요한 오른쪽 여백 간격을 제거하여 정렬을 완벽하게 맞춤 */
    margin-right: 0;
}

#logo a span {
    color: var(--cb-primary);
    position: relative;
}

#logo a span::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: -10px;
    width: 6px;
    height: 6px;
    background: var(--cb-accent);
    border-radius: 50%;
}

/* Mobile Opener */
.hd_opener {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1001;
}

/* Navigation */
#gnb {
    background: transparent !important;
}

#gnb_1dul {
    display: flex;
    align-items: center;
    gap: 60px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: none !important; /* default.css 라인 제거 */
}

.gnb_1dli {
    position: relative;
}

.gnb_1da {
    display: block;
    padding: 10px 0;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.gnb_1da:hover {
    color: #fff;
}

.gnb_1da::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--cb-primary);
    transition: width 0.3s ease;
}

.gnb_1dli:hover .gnb_1da::after {
    width: 100%;
}

/* Sub Navigation (Dropdown) */
.gnb_2dul {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 15px;
    z-index: 1000;
    min-width: 220px;
}

.gnb_1dli:hover .gnb_2dul {
    display: block;
    animation: fadeInDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.gnb_2dul_box {
    list-style: none;
    padding: 10px !important;
    margin: 0;
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

.gnb_2dli {
    margin: 0;
}

.gnb_2da {
    display: block !important;
    padding: 8px 20px !important;
    color: #94a3b8 !important;
    background: transparent !important;
    text-decoration: none;
    font-size: 0.95rem !important;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 10px;
    text-align: left !important;
}

.gnb_2da:hover {
    color: #fff !important;
    background: rgba(26, 169, 220, 0.15) !important;
    transform: translateX(5px);
}

/* Language Switch */
.lang_switch a {
    background: var(--cb-glass);
    border: 1px solid var(--cb-glass-border);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem !important;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff !important;
    font-weight: 700 !important;
}

.lang_switch a:hover {
    background: var(--cb-primary);
    border-color: var(--cb-primary);
}

.hd_login {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 30px;
}

.hd_login li {
    float: none !important;
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
    line-height: normal !important;
}

.hd_login li a {
    color: #94a3b8;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    white-space: nowrap !important; /* 한 줄로 표시 */
}

.hd_login li a:hover {
    color: #fff;
}

/* Hero Section */
.cb-hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
    overflow: hidden;
}

.cb-hero-content {
    z-index: 1;
    max-width: 1000px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

.cb-hero h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #fff 30%, var(--cb-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    letter-spacing: -3px;
}

.cb-hero p {
    font-size: clamp(1rem, 3vw, 1.6rem);
    color: #94a3b8;
    margin-bottom: 45px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cb-btn {
    display: inline-block;
    padding: 18px 45px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.cb-btn-primary {
    background: var(--cb-primary);
    color: #fff !important; /* GNB 로그인 목록 등에서 회색 글자로 덮어쓰이는 현상을 방지하기 위해 !important 선언 */
    box-shadow: 0 15px 30px rgba(var(--cb-primary-rgb), 0.3);
}

.cb-btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(var(--cb-primary-rgb), 0.5);
    background: #35bee8; /* 호버 시 CI에 걸맞은 밝고 청량한 하늘색으로 변경 */
    color: #fff !important;
}

/* GNB 영역 내 우측 상단 시작하기 버튼의 Specificity 강제 보정 */
.hd_login li a.cb-btn-primary {
    color: #fff !important;
}
.hd_login li a.cb-btn-primary:hover {
    color: #fff !important;
    background: #35bee8;
}

/* Features Section */
.cb-section {
    padding: 120px 20px;
    max-width: 1300px;
    margin: 0 auto;
}

.cb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
    justify-content: center;
    gap: 35px;
    margin-top: 60px;
}

.cb-card {
    background: var(--cb-glass);
    border: 1px solid var(--cb-glass-border);
    border-radius: 24px;
    padding: 50px 40px;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cb-card:hover {
    transform: translateY(-15px);
    background: rgba(30, 41, 59, 0.4);
    border-color: rgba(var(--cb-primary-rgb), 0.5);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.cb-card i {
    font-size: 3.5rem;
    background: linear-gradient(135deg, #fff, var(--cb-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 30px;
    display: inline-block;
}

.cb-card h3 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.cb-card p {
    color: #94a3b8;
    line-height: 1.8;
}

/* Feature Row */
.cb-feature-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.cb-feature-text { flex: 1; }
.cb-feature-image { flex: 1; }

/* Page Header */
.cb-page-header {
    padding: 180px 0 80px;
    text-align: center;
    background: linear-gradient(to bottom, var(--cb-darker), var(--cb-dark));
    margin-bottom: 60px;
}

#container_title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    margin: 0;
    letter-spacing: -2px;
    line-height: 1.4 !important; /* default.css의 30px 오버라이드 및 충분한 높이 확보 */
}

#container_title span {
    background: linear-gradient(135deg, #fff 30%, var(--cb-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1.4 !important; /* span에도 동일하게 적용하여 내부 텍스트 잘림 방지 */
    padding: 15px 0; /* 상하 여백을 충분히 주어 렌더링 영역 확보 */
}

/* Footer */
#ft {
    background: var(--cb-darker);
    padding: 100px 20px 50px;
    border-top: 1px solid var(--cb-glass-border);
}

.ft-content {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
}

.ft-logo a {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    margin-bottom: 20px;
    display: inline-block;
}

.ft-logo_img {
    /* 비개발자용 한글 주석: 푸터 로고 이미지가 하단 레이아웃에 어울리도록 높이를 1.4em으로 조절함 */
    height: 1.4em;
    width: auto;
    /* 비개발자용 한글 주석: 어두운 푸터 테마에 은은하게 녹아들도록 그레이스케일(회색조) 처리 및 투명도 50% 지정 */
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.ft-logo a:hover .ft-logo_img {
    /* 비개발자용 한글 주석: 마우스 호버 시 원래 컬러로 복원되고 선명해지도록 마이크로 인터랙션 적용 */
    filter: grayscale(0%);
    opacity: 0.8;
}

.ft-col h4 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 25px;
    font-weight: 700;
}

.ft-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ft-col ul li {
    margin-bottom: 12px;
}

.ft-col ul li a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ft-col ul li a:hover {
    color: var(--cb-primary);
}

#ft_copy {
    margin-top: 80px;
    border-top: 1px solid var(--cb-glass-border);
    padding-top: 40px;
    text-align: center;
    color: #475569;
    font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 1200px) {
    #hd_wrapper { width: 95%; }
    .ft-content { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991px) {
    #hd {
        background: rgba(11, 15, 26, 0.8) !important;
        backdrop-filter: blur(15px);
        border-bottom: 1px solid var(--cb-glass-border);
    }
    
    .hd_opener { display: block; }
    
    #gnb {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background: rgba(5, 7, 10, 0.9) !important;
        backdrop-filter: blur(20px);
        margin: 0;
        padding: 100px 30px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
        display: block !important;
        overflow-y: auto; /* 세로 스크롤 추가 */
    }
    
    #gnb::after { display: none; }
    
    #gnb.gnb_active {
        right: 0;
    }
    
    #gnb_1dul {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .gnb_1da {
        font-size: 1.2rem;
    }

    .gnb_2dul {
        display: block !important;
        position: static !important; /* 절대 위치 해제 */
        transform: none !important; /* 중앙 정렬 해제 */
        padding: 10px 0 0 20px !important;
        min-width: 0 !important;
        opacity: 1 !important; /* 항상 보이게 */
        visibility: visible !important;
    }

    .gnb_2dul_box {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-left: 1px solid var(--cb-glass-border) !important;
        backdrop-filter: none !important;
    }

    .gnb_2da {
        text-align: left !important;
        padding: 8px 15px !important;
        font-size: 0.95rem !important;
        transform: none !important; /* 이동 애니메이션 제거 */
    }

    .gnb_2da:hover {
        transform: none !important; /* 호버 시 밀림 방지 */
        background: rgba(26, 169, 220, 0.1) !important;
    }

    .gnb_2da:hover {
        transform: none !important;
        background: rgba(26, 169, 220, 0.1) !important;
    }

    .mobile_only { display: block; }
    
    .hd_login {
        display: none; /* Mobile logic can be added if needed */
    }

    .cb-feature-row {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .cb-hero-btns {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .cb-hero-btns .cb-btn {
        margin: 0 !important;
        width: 100%;
    }
    
    .cb-section { padding: 80px 20px; }
    
    .ft-content { grid-template-columns: 1fr; }
}

/* =================================================================
   팝업 레이어(newwin) 스타일 오버라이드
   - body의 다크 테마 color 상속으로 글씨가 흰색이 되는 문제 수정
   - 드래그 이동 가능하도록 커서/position 스타일 추가
   ================================================================= */

/* 팝업 컨테이너: position:fixed로 변경하여 화면 어디서든 드래그 가능 */
.hd_pops {
    position: fixed !important;  /* absolute → fixed: 스크롤해도 팝업 위치 유지 */
    z-index: 9999 !important;    /* 다른 요소 위에 표시 */
    border: 1px solid rgba(26, 169, 220, 0.3) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* 팝업 본문 영역: 다크테마 color 상속 차단 → 검은 글씨 강제 적용 */
.hd_pops_con {
    background: #ffffff !important;  /* 흰 배경 명시 */
    color: #333333 !important;       /* 검은 글씨 강제 (body white 상속 차단) */
}

/* 팝업 본문 내 모든 텍스트 요소도 검은 글씨로 */
.hd_pops_con * {
    color: #333333 !important;
}

/* 팝업 본문 내 링크는 파란색 */
.hd_pops_con a,
.hd_pops_con a * {
    color: var(--cb-primary) !important;
}

/* 드래그 핸들(헤더 바): 회색 톤으로 내용 영역과 구분 */
.hd_pops_drag_handle {
    background: #555555 !important;  /* 중간 회색 — 내용(흰색)과 푸터(검정) 사이에서 명확한 구분 */
    color: #ffffff !important;
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: move !important;         /* 드래그 가능 커서 */
    user-select: none !important;    /* 드래그 중 텍스트 선택 방지 */
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid #3a3a3a !important;  /* 하단 진한 구분선 */
}

/* 드래그 핸들 내 아이콘 */
.hd_pops_drag_handle .drag-icon {
    opacity: 0.7;
    font-size: 0.75rem;
}

/* 푸터 영역: 닫기 버튼 영역 */
.hd_pops_footer {
    background: #1a1a2e !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.hd_pops_footer button {
    color: #ffffff !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 4px !important;
    padding: 5px 10px !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.hd_pops_footer button:hover {
    background: rgba(26, 169, 220, 0.3) !important;
    border-color: var(--cb-primary) !important;
}

/* #hd_pop: 팝업 컨테이너 — z-index 낮추고 height:0 유지 */
#hd_pop {
    position: relative !important;
    z-index: 9999 !important;
    height: 0 !important;
    overflow: visible !important;
}