/* ===============================
   PREMIUM DESIGN SYSTEM 2026
================================ */
:root {
    /* Color Palette */
    --color-primary: #002D80;      /* Deep Navy (신뢰) */
    --color-primary-light: #0056FF; /* Tech Blue (혁신) */
    --color-accent: #D4AF37;       /* Metallic Gold (성공) */
    --color-bg-soft: #F8FAFC;      /* Light Gray Blue (배경) */
    --color-text-main: #1E293B;    /* Dark Slate */
    --color-text-muted: #64748B;   /* Slate Gray */
    --white: #ffffff;

    /* Shadow & Radius */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --radius-full: 9999px;
    --radius-lg: 24px;
    --radius-md: 16px;

    --max-content: 1100px;
}

/* ===============================
     BASE STYLES
  ================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    word-break: keep-all; /* 한글 줄바꿈 최적화 */
}
a {
    text-decoration: none;
}

body {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    color: var(--color-text-main);
    background: var(--white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

section {
    padding: 120px 24px;
    overflow: hidden;
}

h1, h2, h3 {
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* ===============================
     LOGO POSITIONING
  ================================ */
  .logo {
    position: absolute; /* 화면을 기준으로 위치 고정 */
    top: 20px;       /* 상단에서 20px 띄움 */
    left: 20px;      /* 왼쪽에서 20px 띄움 */
    width: 130px;    /* 로고 크기 조절 (필요에 따라 수정) */
    z-index: 1000;   /* 다른 요소들보다 위에 오도록 설정 */
}

/* ===============================
     BUTTONS
  ================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--white);
    padding: 18px 40px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 20px rgba(0, 45, 128, 0.2);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 45, 128, 0.3);
}

.btn-secondary {
    display: inline-flex;
    padding: 16px 36px;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.btn-secondary:hover {
    background: var(--color-primary);
    color: var(--white);
}

/* ===============================
     HERO SECTION
  ================================ */
/* ===============================
     HERO SECTION WITH BACKGROUND
  ================================ */
/* ===============================
     HERO SECTION WITH BACKGROUND & ANIMATIONS
  ================================ */

/* 1. 애니메이션 정의 (Keyframes) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* 아래에서 시작 */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 원래 위치로 */
    }
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 10px 20px rgba(0, 45, 128, 0.2); }
    50% { transform: scale(1.05); box-shadow: 0 15px 30px rgba(0, 45, 128, 0.4); }
    100% { transform: scale(1); box-shadow: 0 10px 20px rgba(0, 45, 128, 0.2); }
}

/* 2. HERO 섹션 스타일 및 배경 */
.hero {
    /* 배경 이미지 및 오버레이 설정 */
    background-image: url('../images/main00.jpeg'); /* 실제 이미지 파일명 확인 필요 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply; /* 오버레이 혼합 모드 */
    background-color: rgb(0 6 18 / 85%); /* 진한 파란색 오버레이 */
    
    /* 기존 스타일 */
    text-align: center;
    padding: 160px 24px 100px;
    color: #ffffff;
    
    /* 배경 나타나는 애니메이션 */
    animation: fadeIn 1.5s ease-out; 
}

/* 3. 요소별 애니메이션 적용 */

/* 메인 타이틀 (h1) */
.hero h1 {
    color: #ffffff;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 850;
    margin-bottom: 30px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);

    /* 아래에서 위로 나타나는 애니메이션 */
    animation: slideUp 1s ease-out forwards; /* forwards: 애니메이션 끝난 상태 유지 */
    opacity: 0; /* 초기 상태 투명하게 */
}

/* 서브 텍스트 (p) */
.hero p {
    color: #d4af37;
    font-size: 24px;
    margin-bottom: 50px;
    
    /* h1보다 조금 늦게 나타나는 애니메이션 */
    animation: slideUp 1s ease-out 0.3s forwards; /* 0.3초 딜레이 */
    opacity: 0;
}

/* 버튼 (btn-primary) */
.hero .btn-primary {
    /* 버튼이 가장 마지막에 나타나고, 계속해서 강조되는 애니메이션 */
    animation: 
        slideUp 1s ease-out 0.6s forwards, /* 0.6초 딜레이로 나타남 */
        pulse 2s infinite 1.6s; /* 나타난 후 1.6초 뒤부터 펄스 애니메이션 무한 반복 */
    opacity: 0;
    font-size: 28px;

}
/* ===============================
     SERVICE GRID
  ================================ */
  .strategy-container {
    padding: 100px 24px;
    background-color: #0f172a; /* 딥네이비 전용 배경 */
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

/* 배경 워터마크 */
.strategy-bg-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20vw;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    z-index: 0;
    pointer-events: none;
}

.strategy-container .inner-content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* 헤더 스타일 */
.strategy-header {
    text-align: center;
    margin-bottom: 60px;
}

.strategy-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.strategy-header h2 {
    font-size: 40px;
    margin-bottom: 15px;
}

.strategy-header h2 strong {
    color: #d4af37; /* 골드 포인트 */
}

.strategy-header p {
    color: #94a3b8;
    font-size: 17px;
}

/* 그리드 레이아웃 (기존 160px minmax 유지) */
.strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

/* 카드 디자인 */
.strategy-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 40px 30px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
}

.strategy-card:hover {
    transform: translateY(-10px);
    background: rgba(30, 41, 59, 0.9);
    border-color: #d4af37;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* 카드 배경 숫자 */
.strategy-num {
    position: absolute;
    top: 25px; right: 30px;
    font-size: 40px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.03);
}

/* 아이콘 서클 (블루 그라데이션 + 골드 아이콘) */
.strategy-icon-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 16px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.strategy-icon-circle i {
    color: #ffd700; /* 골드 아이콘 */
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.strategy-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.strategy-card p {
    color: #94a3b8;
    line-height: 1.4;
    font-size: 14px;
    word-break: break-all;
}

/* --- 모바일 최적화 (2열 배치) --- */
@media (max-width: 768px) {
    .strategy-container { padding: 60px 20px; }
    .strategy-header h2 { font-size: 28px; }
    
    .strategy-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .strategy-card {padding: 20px 20px;}
    
    /* 5번째 카드 가로 확장 */
    .strategy-card:last-child {
        grid-column: span 2;
        display: flex;
        align-items: center;
        text-align: left;
        gap: 20px;
    }

    .strategy-card:last-child .strategy-icon-circle {margin-bottom: 0;}
    .strategy-num {font-size: 28px;top: 15px;right: 15px;}
}

/* ===============================
     INTRO SECTION UPGRADE
  ================================ */
  .intro {
    background-color: var(--white);
    padding: 100px 24px;
}

.intro-wrapper {
    display: flex;
    align-items: center;
    gap: 80px; /* 텍스트와 이미지 사이 간격 */
    max-width: var(--max-content);
    margin: 0 auto;
}

/* 텍스트 컨텐츠 */
.intro-content {
    flex: 1;
    text-align: left; /* 왼쪽 정렬이 훨씬 전문적입니다 */
}

.intro-content .label {
    display: inline-block;
    color: var(--color-primary-light);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.intro-content h2 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.3;
    margin-bottom: 24px;
}

.intro-content h2 strong {
    color: var(--color-primary);
    position: relative;
    z-index: 1;
}

/* 텍스트 밑줄 효과 */
.intro-content h2 strong::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 12px;
    background: #eef2ff;
    z-index: -1;
}

/* 포인트 리스트 스타일 */
.intro-points {
    list-style: none;
    margin-top: 40px;
}

.intro-points li {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.intro-points li i {
    font-size: 24px;
    color: var(--color-primary-light);
    background: #f0f7ff;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
    m;
}

.intro-points li strong {
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
}

.intro-points li span {
    color: var(--color-text-muted);
    font-size: 15px;
}

/* 오른쪽 비주얼 영역 */
.intro-visual {
    flex: 1;
    position: relative;
}

.visual-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.visual-card img {
    width: 100%;
    display: block;
    transition: transform 0.5s;
}

.visual-card:hover img {
    transform: scale(1.05);
}

/* 플로팅 배지 (강조 포인트) */
.floating-badge {
    position: absolute;
    bottom: 30px;
    right: 6px;
    background: var(--color-accent);
    color: #000;
    padding: 16px 24px;
    border-radius: 12px;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
    animation: bounce 3s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 반응형 설정 */
@media (max-width: 992px) {
    .intro-wrapper {
        flex-direction: column;
        gap: 50px;
    }
    .intro-content { text-align: center; }
    .intro-points li { text-align: left; }
    .intro-content h2 strong::after { display: none; }
}


/* ===============================
     CEO SECTION - PREMIUM LOOK
  ================================ */
/* ============================================================
   CEO SECTION V2 - SOLID PREMIUM DARK (High Density)
   ============================================================ */

   .dark-premium-ceo-v2 {
    position: relative;
    padding: 100px 0; /* 상하 여백 조정 */
    background-color: #0f172a;
    overflow: hidden;
    color: #fff;
}

/* --- 1. 시네마틱 배경 스타일 --- */
.ceo-bg-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* 전문적인 느낌의 건축물/오피스 배경 (임시 URL) */
    background-image: url('../images/ceo_bg.jpg');
    background-size: cover; background-position: center;
    z-index: 0; opacity: 0.2; /* 은은하게 */
    animation: slowPan 60s linear infinite alternate;
}

.ceo-bg-pattern {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 20px 20px; z-index: 1;
}

.ceo-bg-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* 중앙 중심의 깊은 그라데이션 */
    background: radial-gradient(circle at 70% center, rgba(15, 23, 42, 0.8) 0%, #0f172a 100%);
    z-index: 2;
}

/* --- 레이아웃 --- */
.ceo-wrapper {
    max-width: 1100px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; gap: 80px; /* 간격 조정 */
    position: relative; z-index: 3;
}

/* --- 왼쪽: 비주얼 및 오버레이 --- */
.ceo-visual { flex: 1; position: relative; }

.accent-frame {
    position: absolute; top: -20px; left: -20px; width: calc(100% + 40px); height: calc(100% + 40px);
    border: 1px solid rgba(212, 175, 55, 0.3); /* 골드 라인 */
    z-index: 0;
}

.img-box {
    position: relative; z-index: 1;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
    border: 1px solid rgba(255, 255, 255, 0.1); /* 선명한 테두리 */
}

.img-box img { width: 100%; display: block; }

/* 오버레이 스타일 (선명한 그라데이션) */
.ceo-overlay-info {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(15, 23, 42, 1) 20%, rgba(15, 23, 42, 0) 100%);
    padding: 100px 30px 40px;
    transform: translateY(100%); /* 초기 숨김 */
}

.overlay-label { color: #d4af37; font-size: 11px; font-weight: 800; letter-spacing: 2px; margin-bottom: 10px; display: block; }
.overlay-content h4 { font-size: 22px; line-height: 1.3; margin-bottom: 20px; }
.overlay-content h4 strong { color: #d4af37; font-size: 26px; display: block; margin-top: 5px; }

.overlay-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.v-badge {
    font-size: 12px; color: #cbd5e1; background: rgba(255,255,255,0.05);
    padding: 6px 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; gap: 6px;
}
.v-badge i { color: #3b82f6; }

/* --- 오른쪽: 콘텐츠 --- */
.ceo-content { flex: 1.2; }
.ceo-label { color: #d4af37; font-size: 12px; font-weight: 800; letter-spacing: 3px; margin-bottom: 20px; display: block; }
.ceo-title { font-size: clamp(32px, 4vw, 46px); font-weight: 800; line-height: 1.25; margin-bottom: 30px; }
.ceo-title span { color: #d4af37; }
.ceo-p { font-size: 16px; color: #94a3b8; line-height: 1.7; margin-bottom: 50px; }

.ceo-footer {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 30px;
}
.identity .sub { font-size: 11px; color: #64748b; letter-spacing: 1px; display: block; margin-bottom: 5px; }
.identity .name { font-size: 20px; font-weight: 700; }
.sign-font { font-family: cursive; font-size: 36px; color: rgba(255, 255, 255, 0.2); }

/* --- 애니메이션 --- */
@keyframes slowPan { from { transform: scale(1.1) translate(0,0); } to { transform: scale(1.2) translate(-2%, -1%); } }
@keyframes drawFrame { to { width: calc(100% + 40px); height: calc(100% + 40px); opacity: 1; } }
@keyframes slideUpOverlay { to { transform: translateY(0); } }
@keyframes fadeInMove { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.ani-draw-line { opacity: 0; width: 0; height: 0; animation: drawFrame 1.5s cubic-bezier(0.2, 0, 0.2, 1) forwards 0.3s; }
.ani-slide-up-overlay { animation: slideUpOverlay 1s cubic-bezier(0.2, 0, 0.2, 1) forwards 0.8s; }
.ani-fade-in-stagger { opacity: 0; animation: fadeInMove 0.8s ease-out forwards; }
.overlay-label.ani-fade-in-stagger { animation-delay: 1.1s; }
.overlay-content h4.ani-fade-in-stagger { animation-delay: 1.3s; }
.overlay-badges.ani-fade-in-stagger { animation-delay: 1.5s; }

/* 모바일 대응 */
@media (max-width: 992px) {
    .ceo-wrapper { flex-direction: column; gap: 50px; text-align: center; }
    .ceo-visual { width: 90%; max-width: 500px; margin: 0 auto; }
    .ceo-overlay-info { padding: 80px 25px 30px; text-align: left; }
    .overlay-badges { justify-content: flex-start; }
    .ceo-footer { flex-direction: column; align-items: center; gap: 20px; }
}
/* ===============================
     FEATURE LOGO SECTION STYLE
  ================================ */
  .feature-logo-section {
    padding: 36px 24px 0; /* 아래 그리드와 붙도록 하단 패딩은 0 */
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container {
    text-align: center;
    position: relative;
    padding-bottom: 20px;
}

/* 로고 밑에 생기는 은은한 강조선 (디자인 포인트) */
.logo-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background-color: #d6d6d6;
    border-radius: 2px;
}

.center-logo {
    width: 280px; /* 데스크탑 기준 적정 크기 */
    height: auto;
    display: block;
    margin: 0 auto;
    /* 스르륵 나타나는 애니메이션 */
    animation: fadeInDown 0.8s ease-out forwards;
}

/* --- 모바일 환경 (3열 유지 및 로고 축소) --- */
@media (max-width: 768px) {
    .feature-logo-section {
        padding: 32px 10px 0;
    }

    .center-logo {
        width: 180px; /* 모바일에서 화면 비율에 맞게 축소 */
    }

    .logo-container::after {
        width: 30px;
        bottom: -5px;
    }
}

/* 애니메이션 효과 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   TRUST BENEFITS - HIGH DENSITY DESIGN
   ============================================================ */
   .trust-edge-section {
    padding: 60px 20px;
    background-color: #171717;
    /* 휑함 방지용 미세한 그리드 패턴 배경 */
    background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 30px 30px;
}

.edge-container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px; /* 아이템 사이 얇은 선 느낌 */
    background: rgba(255, 255, 255, 0.1); /* 구분선 역할 */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.edge-item {
    background: #0f172a; /* 흐림 효과 없이 진한 단색 */
    padding: 35px 25px; /* 패딩 타이트하게 조절 */
    position: relative;
    transition: 0.3s;
    overflow: hidden;
}

/* 01, 02 숫자 장식 */
.edge-no {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 26px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.1);
    font-family: serif;
}

.edge-icon {
    font-size: 30px;
    color: #3b82f6;
    margin-bottom: 20px;
}

.edge-txt h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.edge-txt p {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.5;
}

/* 하단 포인트 라인 */
.edge-bottom-line {
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 3px;
    background: #3b82f6;
    transition: 0.4s;
}

/* 호버 리액션: 흐림 대신 '빛'과 '선' 활용 */
.edge-item:hover {
    background: #161e31;
}

.edge-item:hover .edge-bottom-line {
    width: 100%;
}

.edge-item.highlight:hover .edge-bottom-line {
    background: #d4af37;
}

/* 골드 포인트 */
.gold-text { color: #d4af37; font-weight: 900; }

/* 모바일 (2열+1열 조합으로 꽉 채움) */
@media (max-width: 768px) {
    .edge-container { grid-template-columns: repeat(2, 1fr); }
    .edge-item:last-child { grid-column: span 2; }
    .edge-item { padding: 25px 20px; }
}
/* ===============================
   SERVICE GRID - COMPACT MOBILE
================================ */

@media (max-width: 767px) {
    .service-grid {
        /* 1. 2열 그리드로 변경하여 세로 길이를 절반으로 단축 */
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 40px 16px !important;
    }

    .service-grid .card {
        /* 2. 카드 내부 여백 및 높이 최적화 */
        padding: 20px 12px !important;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
    }

    /* 3. 아이콘 크기 축소 */
    .service-grid .card i {
        font-size: 24px !important;
        width: 48px !important;
        /* height: 48px !important; */
        margin-bottom: 10px !important;
        /* box-shadow: 0 4px 12px rgba(0, 51, 153, 0.15) !important; */
    }

    /* 4. 텍스트 가독성 (줄바꿈 방지) */
    .service-grid .card {
        font-size: 14px !important;
        letter-spacing: -0.5px;
        word-break: keep-all;
    }

    /* 5. 5번째 카드(홀수)는 마지막 줄 전체 너비 차지 (선택 사항) */
    .service-grid .card:last-child {
        grid-column: span 2;
        min-height: 80px;
        flex-direction: row;
        gap: 12px;
    }
    
    .service-grid .card:last-child i {
        margin-bottom: 0 !important;
    }
}

/* ============================================================
   PREMIUM MESSAGE BANNER (Cinematic Animation)
   ============================================================ */

   .message-banner {
    position: relative;
    padding: 160px 20px; /* 패딩을 늘려 웅장한 느낌 부여 */
    background-color: #0f172a; /* 로딩 전 기본 배경색 */
    overflow: hidden; /* 배경 이미지가 튀어나가지 않게 */
    text-align: center;
    color: #fff;
}

/* 1. 배경 애니메이션 레이어 (핵심) */
.message-bg-anim {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 추천 이미지: 추상적인 건축물, 어두운 도시 야경, 연결된 네트워크 등 */
    /* 예시 이미지를 넣었습니다. 실제 프로젝트에 맞는 고화질 이미지로 교체해주세요. */
    background-image: url('../images/banner_bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
    /* 아주 천천히 움직이는 시네마틱 효과 */
    animation: slowPanZoom 30s linear infinite alternate;
    transform-origin: center center;
}

/* 2. 오버레이 (그라데이션으로 깊이감 더하기) */
.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 위는 약간 투명, 아래는 진한 딥네이비로 떨어지는 그라데이션 */
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.98));
    z-index: 1;
}

/* 3. 콘텐츠 스타일링 */
.message-content {
    position: relative;
    z-index: 2; /* 배경 위에 올라오도록 */
    max-width: 800px;
    margin: 0 auto;
}

/* 요소 순차적 등장 애니메이션 */
.message-content > * {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

.message-content .badge { 
    display: inline-block; padding: 6px 16px; border-radius: 50px;
    background: rgba(212, 175, 55, 0.15); color: #d4af37; font-weight: 700; letter-spacing: 1px; font-size: 13px;
    margin-bottom: 25px;
    animation-delay: 0.2s;
}

.message-content h3 {
    font-size: 42px; font-weight: 800; line-height: 1.3; margin-bottom: 25px;
    animation-delay: 0.4s;
}
.message-content h3 strong { color: #d4af37; }

.message-content p {
    font-size: 18px; color: #cbd5e1; line-height: 1.7; margin-bottom: 45px;
    animation-delay: 0.6s;
}
.message-content p span { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(212, 175, 55, 0.5); }

.cta-area { animation-delay: 0.8s; }

/* 프리미엄 버튼 디자인 */
.btn-premium {
    display: inline-flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, #d4af37, #b8860b);
    color: #000; font-size: 18px; font-weight: 800;
    padding: 20px 45px; border-radius: 50px; text-decoration: none;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.btn-premium:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.5);
    background: #fff;
}

/* 화살표 아이콘 튕기는 애니메이션 */
.ani-bounce-x {
    display: inline-block;
    animation: bounceX 1.5s infinite ease-in-out;
}

/* --- KEYFRAMES (애니메이션 정의) --- */

/* 배경이 천천히 확대/이동하는 효과 */
@keyframes slowPanZoom {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -1%); }
}

/* 텍스트 등장 효과 */
@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* 화살표 튕김 효과 */
@keyframes bounceX {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .message-banner { padding: 100px 20px; }
    .message-content h3 { font-size: 28px; }
    .message-content p { font-size: 16px; }
    .btn-premium { width: 100%; justify-content: center; padding: 18px; }
}

/* ============================================================
   HEAL CLINIC ROW VERSION
   ============================================================ */

   .heal-clinic {
    position: relative;
    padding: 120px 24px;
    background-color: #f8fbff;
    overflow: hidden;
}

.clinic-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* --- 가로 배치 핵심 코드 (웹 전용) --- */
.heal-content-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px; /* 좌우 간격 */
    position: relative;
    z-index: 2;
}

.heal-title-area {
    flex: 1.2;
    text-align: left;
}

.heal-desc-area {
    flex: 1;
    text-align: left;
}

/* 타이틀 스타일 */
.heal-title-area h2 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.4;
    color: #1a1a1a;
    margin-top: 20px;
}

.heal-title-area h2 strong { color: #002D80; } /* 딥블루 포인트 */

/* 설명 영역 스타일 */
.heal-desc-area .divider {
    width: 50px;
    height: 4px;
    background: #3b82f6;
    margin: 0 0 30px 0; /* 왼쪽 정렬 */
}

.heal-desc-area p {
    font-size: 17px;
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 30px;
}

.heal-desc-area p span {
    color: #002D80;
    font-weight: 700;
}

/* 추가된 진단 버튼 */
.btn-diagnosis {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #3b82f6;
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 5px;
    transition: 0.3s;
}

.btn-diagnosis:hover { color: #002D80; border-color: #002D80; }

/* 배경 심전도 라인 (은은하게 유지) */
.pulse-line {
    position: absolute;
    top: 50%; left: 0;
    width: 100%; height: 100px;
    transform: translateY(-50%);
    opacity: 0.05;
    z-index: 1;
}

/* --- 반응형 (모바일에서는 다시 세로로) --- */
@media (max-width: 992px) {
    .heal-content-row {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    
    .heal-title-area, .heal-desc-area {
        text-align: center;
        flex: none;
    }

    .heal-title-area h2 { font-size: 26px; }
    .heal-desc-area .divider { margin: 0 auto 20px; }
    .pc-only { display: none; }
}
/* ============================================================
   HEAL SECTION ANIMATION - CRISP & DYNAMIC
   ============================================================ */

/* 1. 기본 등장 애니메이션 (Intersection Observer 없이도 작동하는 기본값) */
.ani-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    animation: revealLeft 1s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

.ani-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    animation: revealRight 1s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

/* 2. 세부 요소 애니메이션 */

/* 뱃지: 은은한 페이드인 */
.ani-fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards 0.3s;
}

/* 디바이더: 가로로 슥 그려지는 효과 (휑함 방지 핵심) */
.ani-draw-line {
    width: 0;
    animation: drawLine 0.8s cubic-bezier(0.7, 0, 0.3, 1) forwards 0.5s;
}

/* 텍스트: 아래에서 위로 살짝 올라오며 등장 */
.ani-fade-up-delay {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease forwards 0.7s;
}

/* 버튼: 톡 튀어나오는 느낌 */
.ani-pop-in {
    opacity: 0;
    transform: scale(0.9);
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 1s;
}

/* --- KEYFRAMES --- */

@keyframes revealLeft {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes revealRight {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes drawLine {
    to { width: 50px; } /* 기존 디바이더 너비값 */
}

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

@keyframes popIn {
    to { opacity: 1; transform: scale(1); }
}

/* 버튼 호버 애니메이션 (디테일) */
.btn-diagnosis:hover i {
    transform: translateX(5px);
    transition: 0.3s;
}
/* ============================================================
   PRESCRIPTION REPORT - HIGH DENSITY DARK STYLE
   ============================================================ */

   .prescription-report {
    position: relative;
    padding: 100px 24px;
    background-color: #0f172a; /* 기본 딥 네이비 배경 */
    overflow: hidden;
}

/* 1. 배경 이미지 (404 방지용 고화질 주소 & 애니메이션) */
.report-bg-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 전문적인 느낌의 서류/오피스 텍스처 이미지 */
    background-image: url('../images/report_bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
    opacity: 0.25; /* 이미지는 은은하게 배치 */
    animation: slowZoomRotate 60s linear infinite alternate;
}

/* 2. 휑함을 지워주는 미세 도트 패턴 */
.report-bg-pattern {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 1;
}

/* 3. 배경 오버레이 (중앙 강조 그라데이션) */
.report-bg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.95) 100%);
    z-index: 2;
}

/* 4. 처방전 카드 디자인 (선명한 Edge 스타일) */
.report-card {
    position: relative;
    z-index: 3;
    max-width: 700px;
    margin: 0 auto;
    background: #161e31; /* 흐림 효과 대신 선명한 다크 네이비 */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.report-card:hover {
    transform: translateY(-5px);
    border-color: #d4af37; /* 호버 시 골드 라인 강조 */
}
.header-left {
    COLOR: #fff;
}
/* 헤더 & Rx 텍스트 */
.report-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 30px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rx-text {
    font-size: 32px;
    font-weight: 900;
    font-family: 'serif';
    color: #d4af37;
    margin-right: 15px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* 리스트 간격 압축 */
.prescription-list {
    padding: 40px;
    list-style: none;
}

.p-item {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.p-item:last-child { margin-bottom: 0; }

.check-box {
    width: 24px; height: 24px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid #3b82f6;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #d4af37; font-size: 12px; flex-shrink: 0;
}

.p-info strong { display: block; font-size: 18px; color: #fff; margin-bottom: 5px; }
.p-info p { font-size: 15px; color: #94a3b8; line-height: 1.5; }

/* 푸터 및 버튼 */
.report-footer {
    padding: 0 26px 40px;
    text-align: center;
}

.report-footer p { font-size: 13px; color: #64748b; margin-bottom: 25px; }

.btn-prescription {
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #d4af37, #b8860b);
    color: #000; padding: 18px 35px; border-radius: 50px;
    font-size: 17px; font-weight: 800; text-decoration: none;
    transition: 0.3s;
}

.btn-prescription:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}

/* --- 애니메이션 정의 --- */
@keyframes slowZoomRotate {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.15) rotate(1deg); }
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .prescription-report { padding: 60px 20px; }
    .report-header { padding: 20px; }
    .prescription-list { padding: 30px 20px; }
    .btn-prescription { width: 100%; justify-content: center; }
}
/* ===============================
     INTEGRATED FORM STYLE
  ================================ */
  .consulting-section {
    padding: 40px 24px;
    background-color: #1b1b1b; /* 폼이 돋보이도록 은은한 배경색 */
}

.form-wrapper {
    max-width: 850px;
    margin: 0 auto;
    background: #1b1b1b;
    padding: 42px 42px;
    border-radius: 10px;
    box-shadow: 0 40px 100px rgba(0, 51, 153, 0.1);
}

.form-header {
    text-align: center;
    margin-bottom: 50px;
}

.form-header h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.form-header .highlight {
    color: var(--color-primary);
}

.form-header p {
    font-size: 18px;
    color: var(--color-text-muted);
}

/* --- 입력 그룹 레이아웃 --- */
.main-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-group {
    display: grid;
    gap: 12px;
}

.row-2 { grid-template-columns: repeat(2, 1fr); }
.row-3 { grid-template-columns: repeat(3, 1fr); }

.main-form input, .main-form select {
    padding: 18px 20px;
    border: 1px solid #e1e8f0;
    border-radius: 12px;
    font-size: 16px;
    background: #fdfdfd;
    transition: all 0.3s;
}
.checkbox-input { width: 24px;}

.main-form input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 51, 153, 0.05);
}
/* ===============================
     AGREEMENT AREA FIX
  ================================ */
  .agreement-area {
    display: flex;
    flex-wrap: wrap;       /* 중요: 공간이 부족하면 다음 줄로 넘김 */
    justify-content: center;
    align-items: center;
    gap: 10px;             /* 요소 간 간격 */
    padding: 10px 0;
    width: 100%;           /* 부모 너비에 맞춤 */
}

.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    max-width: 100%;       /* 라벨이 부모를 넘지 않도록 설정 */
}

.label-text {
    font-size: 14px;
    color: #64748b;
    margin-left: 8px;
    line-height: 1.4;
    word-break: keep-all;  /* 단어 단위로 줄바꿈하여 가독성 유지 */
}

.view-policy {
    font-size: 13px;
    color: #94a3b8;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;   /* '내용보기'는 줄바꿈되지 않도록 고정 */
    transition: color 0.2s;
}

.view-policy:hover {
    color: var(--color-primary);
}

/* --- 모바일 최적화 --- */
@media (max-width: 480px) {
    .agreement-area {
        justify-content: flex-start; /* 모바일에서는 왼쪽 정렬이 더 안정적일 수 있음 */
    }
    
    .label-text {
        font-size: 13px; /* 모바일에서 폰트 살짝 축소 */
    }
}
/* --- 제출 버튼 --- */
.btn-submit-premium {
    background: linear-gradient(135deg, var(--color-primary), #384866);
    color: #ffffff;
    border: none;
    padding: 22px;
    border-radius: 15px;
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.btn-submit-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 86, 255, 0.3);
}

/* --- 반응형 모바일 --- */
@media (max-width: 768px) {
    .form-wrapper {padding: 32px 10px;}
    .row-2, .row-3 { grid-template-columns: 1fr; } /* 모바일은 무조건 한 줄 */
    .form-header h2 { font-size: 24px; }
    .agreement-area {flex-direction: row;gap: 5px;}
}


/* ===============================
     PREMIUM FAQ STYLE
  ================================ */
/* ============================================================
   SAEGIL FAQ - HIGH DENSITY BENTO STYLE
   ============================================================ */

   .faq-premium {
    position: relative; /* 배경 레이어 배치를 위해 필수 */
    padding: 100px 20px;
    background-color: #0f172a; /* 기본 배경색 (로딩 전 표시) */
    overflow: hidden; /* 배경 이미지가 섹션 밖으로 나가지 않게 */
}

.faq-wrapper { max-width: 900px; margin: 0 auto; }

/* 헤더 영역 */
.section-title { text-align: center; margin-bottom: 50px; }
.section-title .sub-text { color: #d4af37; font-weight: 800; letter-spacing: 3px; font-size: 12px; text-transform: uppercase; }
.section-title h2 { color: #fff; font-size: 32px; margin-top: 10px; }

/* 아코디언 아이템 */
.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq-item {
    background: #161e31; /* 흐림 없는 진한 배경 */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
}

.faq-item[open] {
    border-color: rgba(212, 175, 55, 0.3);
    background: #1c263d;
}

/* 요약 제목 */
.faq-item summary {
    padding: 22px 30px;
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { font-size: 14px; color: #64748b; transition: 0.3s; }
.faq-item[open] summary i { transform: rotate(180deg); color: #d4af37; }

/* 내부 콘텐츠 (밀도 상향 핵심) */
.faq-content {
    padding: 0 30px 35px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.main-desc {
    padding: 25px 0;
    font-size: 16px;
    color: #cbd5e1;
    line-height: 1.6;
}

/* 벤토 그리드: 휑함을 지우는 장치 */
.fund-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.type-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 18px;
    border-radius: 8px;
    transition: 0.3s;
}

.type-card:hover { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); }
.type-card.gold:hover { background: rgba(212, 175, 55, 0.1); border-color: rgba(212, 175, 55, 0.2); }

.type-card strong { display: block; color: #3b82f6; font-size: 15px; margin-bottom: 5px; }
.type-card.gold strong { color: #d4af37; }
.type-card p { color: #94a3b8; font-size: 13px; line-height: 1.4; }

/* 하단 주석 */
.bottom-note {
    margin-top: 25px;
    font-size: 12px;
    color: #64748b;
    padding-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .faq-item summary { padding: 18px 20px; font-size: 16px; }
    .faq-content { padding: 0 20px 25px; }
    .fund-types { grid-template-columns: 1fr; } /* 모바일은 1열로 타이트하게 */
}
/* --- 추가된 배경 레이어 스타일 --- */

/* 1. 배경 이미지 (은은한 텍스처 및 애니메이션) */
.faq-bg-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 전문적인 느낌의 추상적인 오피스/건축물 이미지 */
    background-image: url('../images/faq_bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
    opacity: 0.15; /* 콘텐츠 방해 안 되게 아주 은은하게 */
    /* 다른 섹션과 통일감 있는 천천히 움직이는 애니메이션 */
    animation: slowPan 60s linear infinite alternate;
}

/* 2. 미세 도트 패턴 (밀도 높이기) */
.faq-bg-pattern {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 1;
}

/* 3. 배경 오버레이 (가독성 확보를 위한 딥 그라데이션) */
.faq-bg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 위에서 아래로 조금 더 어두워지는 그라데이션 */
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
    z-index: 2;
}

/* --- 기존 콘텐츠 래퍼 수정 --- */
.faq-wrapper {
    position: relative;
    z-index: 3; /* 배경들보다 위에 오도록 설정 */
    max-width: 900px;
    margin: 0 auto;
}

/* (참고) 이전에 정의한 애니메이션 재사용 */
@keyframes slowPan {
    from { transform: scale(1.1) translate(0,0); }
    to { transform: scale(1.2) translate(-2%, -1%); }
}

/* 나머지 .section-title, .faq-item 등의 스타일은 기존 유지 */
/* ============================================================
   FUND INFO - 5 STAR PREMIUM POINT STYLE
   ============================================================ */

   .fund-info-section {
    padding: 60px 20px;
    background-color: #0f172a;
}

.info-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* 프로모션 배너 (벤토 스타일) */
.promo-banner {
    background: #161e31;
    border: 2px solid #d4af37; /* 골드 보더로 포인트 */
    border-radius: 24px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* 휑함 방지용 배경 선 패턴 */
.promo-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.01) 0, rgba(255,255,255,0.01) 1px, transparent 0, transparent 50%);
    background-size: 10px 10px;
}

/* --- 별 5개 스타일 --- */
.promo-star-box {
    flex-shrink: 0;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 30px;
}

.star-rating {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.star-rating i {
    color: #d4af37;
    font-size: 20px;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
    animation: starTwinkle 2s infinite alternate;
}

/* 별 순차적 깜빡임 */
.star-rating i:nth-child(2) { animation-delay: 0.2s; }
.star-rating i:nth-child(3) { animation-delay: 0.4s; }
.star-rating i:nth-child(4) { animation-delay: 0.6s; }
.star-rating i:nth-child(5) { animation-delay: 0.8s; }

.star-desc {
    color: #d4af37;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

/* 텍스트 영역 */
.promo-text { flex: 1; }
.promo-text h2 { font-size: 28px; color: #fff; line-height: 1.4; }
.promo-text h2 strong { color: #d4af37; text-decoration: underline; }
.promo-text p { color: #94a3b8; margin-top: 10px; font-size: 16px; }

/* 액션 영역 & 버튼 글로우 */
.promo-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.btn-glow {
    position: relative;
    background: #d4af37;
    color: #000;
    padding: 18px 35px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 18px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.btn-glow:hover {
    transform: scale(1.05);
    background: #fff;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
}

.mini-logo {
    height: 25px;
    opacity: 0.5;
}

/* --- 애니메이션 정의 --- */
@keyframes starTwinkle {
    from { transform: scale(1); opacity: 0.8; }
    to { transform: scale(1.2); opacity: 1; }
}

/* 모바일 대응 (세로 배치로 전환) */
@media (max-width: 992px) {
    .promo-banner {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }
    .promo-star-box {
        border-right: none;
        padding-right: 0;
        margin-bottom: -10px;
    }
    .promo-text h2 { font-size: 22px; }
    .btn-glow { width: 100%; justify-content: center; }
}
/* ===============================
     APPLICATION FORM 2 STYLE
  ================================ */
/* ============================================================
   APPLICATION FORM 2 - BRIGHT & CLEAN BACKGROUND STYLE
   ============================================================ */

   .application-section {
    position: relative;
    padding: 120px 24px;
    /* 원래 의도하셨던 밝은 회색 배경색 유지 */
    background-color: #f1f5f9;
    overflow: hidden;
    /* 자식 요소들의 z-index 기준점 생성 */
    z-index: 0;
}

/* --- 가상 요소를 활용한 은은한 배경 이미지 추가 --- */
/* 가상 요소를 활용한 은은한 배경 이미지 */
.application-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* [교체됨] 요청하신 상담/투자 이미지 경로 */
    background-image: url('../images/consulting_desk.jpg');
    background-size: cover;
    
    /* [중요] 손과 차트가 있는 핵심 부분이 중앙에 오도록 설정 */
    background-position: center;
    
    /* [핵심] 투명도를 아주 낮춰 워터마크처럼 연출 (폼 가독성 확보) */
    opacity: 0.15; 
    
    /* 흑백 처리로 톤을 차분하게 맞춤 */
    filter: grayscale(100%); 
    
    /* 배경색과 자연스럽게 섞이도록 블렌딩 모드 적용 */
    mix-blend-mode: multiply; 
    
    /* 컨텐츠 뒤로 배치 */
    z-index: -1;
}
/* 컨텐츠 컨테이너는 기존 스타일 유지 */
.app-container {
    position: relative;
    /* z-index는 부모 설정 덕분에 굳이 안 넣어도 되지만 안전하게 */
    z-index: 1; 
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 32, 96, 0.08); /* 그림자도 약간 더 부드럽게 조정 */
}

/* 밝은 배경용 느린 애니메이션 */
@keyframes slowPanBright {
    from { transform: scale(1.05) translate(0,0); }
    to { transform: scale(1.1) translate(-1%, -1%); }
}

/* 나머지 .benefit-banner, .app-header 등 내부 요소 스타일은 기존 그대로 유지 */

/* 상단 혜택 바 */
.benefit-banner {
    background: #003399;
    color: #ffffff;
    padding: 15px;
    text-align: center;
    font-size: 15px;
}

.benefit-banner strong { color: #38bdf8; }

/* 헤더 영역 */
.app-header {
    padding: 60px 50px 40px;
    text-align: center;
}

.app-header h3 {
    font-size: 41px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #0f172a;
}

.app-header .sub-text {
    font-size: 16px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 30px;
}

.phone-box {
    display: inline-flex;
    flex-direction: column;
    background: #f8fafc;
    padding: 15px 40px;
    border-radius: 20px;
    border: 1px dashed #cbd5e1;
}

.phone-box .label { font-size: 14px; color: #94a3b8; }
.phone-box .number { font-size: 28px; font-weight: 900; color: #003399; }

/* 폼 스타일 */
.app-form {
    padding: 0 60px 60px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-row { display: grid; gap: 15px; }
.split-2 { grid-template-columns: 1fr 1fr; }
.split-3 { grid-template-columns: 1.5fr 1fr 1fr; }

.app-form input, .app-form select {
    padding: 18px 24px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px;
    transition: 0.3s;
}

.app-form input:focus {
    border-color: #003399;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 51, 153, 0.08);
}

/* 동의 영역 */
.privacy-agreement {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    padding: 10px 5px;
}

.btn-view { font-size: 13px; color: #94a3b8; text-decoration: underline; }

/* 제출 버튼 */
.btn-app-submit {
    margin-top: 20px;
    background: #003399;
    color: #ffffff;
    padding: 22px;
    border-radius: 15px;
    font-size: 20px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.btn-app-submit:hover {
    background: #002266;
    transform: translateY(-3px);
}

/* 반응형 */
@media (max-width: 768px) {
    .app-header { padding: 40px 20px; }
    .app-form { padding: 0 20px 40px; }
    .split-2, .split-3 { grid-template-columns: 1fr; }
    .phone-box { width: 100%; }
}
/* ===============================
     RESPONSIVE
  ================================ */
@media (max-width: 768px) {
    section { padding: 80px 20px; }
    .feature-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 26px; }
    .hero .btn-primary {
        font-size: 18px;
    }
    .hero p { font-size: 20px;}

}

/* ===============================
     FOOTER STYLE
  ================================ */
  .main-footer {
    background-color: #1a1e26; /* 고급스러운 다크 그레이 */
    color: #a0aec0;
    padding: 80px 24px 40px;
    font-size: 14px;
    line-height: 1.8;
}

.footer-container {
    max-width: var(--max-content);
    margin: 0 auto;
}

/* 푸터 상단 */
.footer-top {
    border-bottom: 1px solid #2d3748;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.footer-logo {
    height: 35px;
    margin-bottom: 15px;
}

.footer-slogan {
    font-size: 16px;
    color: #e2e8f0;
}

/* 푸터 중간 (정보 & CS) */
.footer-middle {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-info strong {
    color: #ffffff;
    font-size: 16px;
}

.footer-contact {
    text-align: right;
}

.cs-box {
    margin-bottom: 10px;
}

.cs-label {
    display: block;
    font-size: 13px;
    color: #718096;
}

.cs-phone {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
}

/* 푸터 하단 */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #2d3748;
    padding-top: 30px;
}

.footer-links a {
    color: #a0aec0;
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #ffffff;
}

/* --- 반응형 --- */
@media (max-width: 768px) {
    .main-footer { padding: 60px 20px 30px; }
    .footer-middle { flex-direction: column; gap: 30px; }
    .footer-contact { text-align: left; }
    .footer-bottom { flex-direction: column-reverse; gap: 20px; text-align: center; }
    .footer-links { margin-bottom: 10px; }
    .footer-links a { margin: 0 10px; }
}

/* 리뷰 섹션 전체 배경 */
.review-section {
    background-color: #f8f9fa;
    padding: 100px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.5rem;
    color: #0a1922;
    margin-bottom: 15px;
    font-weight: 800;
}

/* ============================================================
   INFINITE MARQUEE REVIEW (High Density)
   ============================================================ */

   .review-marquee-section {
    padding: 80px 0;
    background-color: #0f172a;
    overflow: hidden; /* 흐르는 카드가 화면 밖으로 안 나가게 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marquee-header {text-align: center;margin-bottom: 50px;color: #fff;}
.marquee-header h2 {font-size: 40px;color: #fff;margin-top: 10px;}
.marquee-header h2 strong { color: #d4af37; }

.marquee-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px; /* 줄 간격 */
}

/* 트랙 공통 스타일 */
.marquee-track {
    display: flex;
    gap: 15px; /* 카드 간 간격 타이트하게 */
    width: max-content; /* 내부 콘텐츠만큼 너비 확장 */
}

/* 카드 디자인 (패딩 줄이고 밀도 상향) */
.review-mini-card {
    background: #161e31;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px 25px;
    color: #cbd5e1;
    font-size: 15px;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s;
}

.review-mini-card b { color: #3b82f6; font-weight: 800; }
.review-mini-card span { color: #fcd34d; font-size: 12px; }

/* 골드 카드 (강조용) */
.review-mini-card.gold {
    border-color: rgba(212, 175, 55, 0.3);
    background: #1c1c1c;
}
.review-mini-card.gold b { color: #d4af37; }

/* --- 애니메이션 설정 --- */

/* 오른쪽에서 왼쪽으로 */
.track-left {
    animation: scroll-left 40s linear infinite;
}

/* 왼쪽에서 오른쪽으로 */
.track-right {
    animation: scroll-right 40s linear infinite;
}

/* 호버 시 멈춤 효과 (전문적인 느낌!) */
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 전체 너비의 절반(복제본 시작점)까지 이동 */
}

@keyframes scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* 모바일은 속도를 조금 더 빠르게 조절 */
@media (max-width: 768px) {
    .marquee-track { animation-duration: 25s; }
    .review-mini-card { padding: 12px 18px; font-size: 13px; }
}
/* 하단 배지 디자인 */
.badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: bold;
}

.badge.success { background: #e7f4e9; color: #2ecc71; }
.badge.premium { background: #fff4e6; color: #e67e22; border: 1px solid #ffcc00; }
.badge.info { background: #e1f5fe; color: #03a9f4; }
.badge.fast { background: #f3e5f5; color: #9c27b0; }

/* 모바일 대응 */
@media (max-width: 768px) {
    .section-header h2 { font-size: 2rem; }
    .review-grid { gap: 20px; }
}

/* 섹션 전체: 깊이감 있는 다크 네이비 배경 */
.expert-video-section {
    background: #0a1922;
    padding: 100px 0;
    color: #fff;
    overflow: hidden;
}

.video-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 60px; /* 영상과 텍스트 사이 간격 */
}

/* 1. 동영상 프레임: 입체감 있는 모니터/패드 느낌 */
.video-frame {
    flex: 1.2;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 
                0 0 20px rgba(212, 175, 55, 0.2); /* 은은한 골드 광택 */
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: #000;
}

.video-frame video {
    width: 100%;
    display: block;
    filter: brightness(0.9); /* 영상 대비를 높여 고급스럽게 */
    transition: 0.5s;
}

.video-frame:hover video {
    filter: brightness(1.1);
    transform: scale(1.02);
}

/* 재생 아이콘 오버레이: 시각적 포인트 */
.play-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    background: rgba(214, 175, 55, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(214, 175, 55, 0.5);
    z-index: 2;
}

/* 2. 텍스트 정보 영역 */
.video-info {
    flex: 1;
}

.video-info .tag {
    display: inline-block;
    background: #d4af37;
    color: #000;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 800;
    border-radius: 4px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.video-info h2 {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 25px;
    font-weight: 700;
}

.video-info h2 strong {
    color: #d4af37;
    display: block; /* 줄바꿈 강조 */
    margin-top: 10px;
}

.video-info p {
    font-size: 1.1rem;
    color: #aaa;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* 체크리스트 스타일 */
.check-list {
    list-style: none;
    padding: 0;
}

.check-list li {
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 3. 반응형 처리: 모바일에서는 위아래로 배치 */
@media (max-width: 991px) {
    .video-container {
        flex-direction: column;
        text-align: center;
    }
    
    .video-info h2 { font-size: 2.2rem; }
    
    .check-list li {
        justify-content: center;
    }
}

/* 상담 신청 버튼 스타일 */
.btn-submit, .btn-app-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 0;
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); /* 신뢰감 주는 딥블루 */
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 54, 93, 0.2);
    margin-top: 20px;
}

/* 마우스 호버 효과 */
.btn-submit:hover, .btn-app-submit:hover {
    background: linear-gradient(135deg, #2c5282 0%, #1a365d 100%);
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 6px 20px rgba(26, 54, 93, 0.3);
}

/* 클릭 효과 */
.btn-submit:active, .btn-app-submit:active {
    transform: translateY(0);
}

/* 폰트어썸 아이콘 애니메이션 */
.btn-submit i, .btn-app-submit i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.btn-submit:hover i, .btn-app-submit:hover i {
    transform: translateX(5px); /* 종이비행기가 날아가는 느낌 */
}

/* 라디오 그룹 전체 컨테이너 */
.service-radio-group {
    margin: 20px 0;
    text-align: left;
}

/* 타이틀 스타일 */
.service-radio-group p {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px;
    padding-left: 5px;
}

/* 라디오 항목들을 담는 그리드 (모바일 대응) */
.service-radio-group .options-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열 배열 */
    gap: 10px;
}

/* 개별 라디오 레이블 스타일 */
.service-radio-group label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    background: #f7fafc;
    border: 1.5px solid #edf2f7;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 실제 라디오 input은 숨김 */
.service-radio-group input[type="radio"] {
    display: none;
}

/* 선택되었을 때의 스타일 */
.service-radio-group label:has(input[type="radio"]:checked) {
    background: #ebf4ff;
    border-color: #3182ce;
    color: #2c5282;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(49, 130, 206, 0.15);
}

/* 호버 효과 */
.service-radio-group label:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.budget-flow-section {
    background: #050a10; /* 깊이감 있는 블랙 */
    min-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* 배경 텍스트 애니메이션 (뉴스 홍수 느낌) */
.scrolling-text-bg {
    position: absolute;
    top: 0;
    font-size: 8rem;
    font-weight: 900;
    color: rgb(255 255 255 / 6%); /* 아주 은은하게 */
    white-space: nowrap;
    z-index: 0;
}

.content-wrapper {
    width: 100%; max-width: 1400px; margin: 0 auto;
    display: flex; justify-content: space-around; align-items: center;
    z-index: 2;
}

/* 폰트 차별화: '명조계열'이나 '고급 세리프' 추천 */
.sub-headline {
    color: #d4af37; /* 새길 골드 컬러 */
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 5px;
    margin-bottom: 20px;
}

.main-headline {
    font-size: 45px;
    line-height: 1.2;
    color: #fff;
}
/* 모바일 버전 (768px 이하) */
@media (max-width: 768px) {
    .main-headline {
        font-size: 28px; /* 24px ~ 32px 사이를 추천해요 */
        line-height: 1.3; /* 폰트가 작아지면 행간은 살짝 키우는 게 가독성이 좋습니다 */
    }
}

.main-headline strong {
    color: #fff;
    border-bottom: 5px solid #d4af37; /* 밑줄 포인트 */
}

/* 이미지 스택 레이아웃: 카드들이 겹쳐서 '쌓여있는' 입체적 연출 */
.stack-layout {
    position: relative; width: 400px; height: 500px;
}

.stack-card {
    position: absolute; width: 100%; border-radius: 10px;
    box-shadow: 20px 20px 60px rgba(0,0,0,0.5);
    transition: 0.5s;
}

.card-top { z-index: 3; transform: rotate(-5deg); top: 0; }
.card-mid { z-index: 2; transform: rotate(3deg); top: 40px; left: 30px; }
.card-bot { z-index: 1; transform: rotate(-2deg); top: 80px; left: -20px; }

/* 호버 시 카드가 펼쳐지는 UX */
.stack-layout:hover .stack-card { transform: rotate(0) translateY(-20px); }

/* 반응형: 모바일에서는 가로 나열이 아닌 세로 스택으로 */
@media (max-width: 900px) {
    .content-wrapper { flex-direction: column; text-align: center; }
    .stack-layout { margin-top: 50px; width: 80%; height: 350px; }
}


/* ============================================================
   HIGH-DENSITY FORM HEADER (No Blur, Modern Edge)
   ============================================================ */

   .form-header-premium {
    text-align: center;
    padding: 38px 8px; /* 상하 패딩 최적화 */
    background: #1b1b1b; /* 흐림 없는 솔리드 딥네이비 */
    /* border: 1px solid rgba(255, 255, 255, 0.08); */
    border-radius: 20px 20px 0 0; /* 폼 상단과 연결 */
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

/* 휑함 방지용 배경 도트 패턴 */
.form-header-premium::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 15px 15px;
    z-index: 0;
}

/* 라이브 배지 애니메이션 */
.live-status {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.live-status .dot {
    width: 8px; height: 8px;
    background: #22c55e; /* 녹색 점 */
    border-radius: 50%;
    box-shadow: 0 0 10px #22c55e;
    animation: pulse-green 2s infinite;
}

.live-status .status-txt {font-size: 20px;color: #94a3b8;}
.live-status .status-txt strong { color: #fff; }

/* 타이틀 및 강조 */
.form-header-premium h2 {
    position: relative;
    z-index: 1;
    font-size: 46px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    letter-spacing: -1px;
}

.form-header-premium .highlight {
    color: #d4af37; /* 시그니처 골드 */
    border-bottom: 3px solid #d4af37;
    padding-bottom: 2px;
}

.sub-msg {
    position: relative;
    z-index: 1;
    color: #94a3b8;
    font-size: 18px;
    margin: 15px 0 35px;
}

/* 신뢰 아이콘 영역 (밀도 상향) */
.trust-icons {
    position: relative; z-index: 1;
    display: flex; justify-content: center; gap: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 25px;
}

.trust-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}

.trust-item i { font-size: 20px; color: #3b82f6; } /* 포인트 블루 */
.trust-item span {font-size: 19px;color: #64748b;font-weight: 600;}

/* 애니메이션 */
@keyframes pulse-green {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .form-header-premium h2 {font-size: 32px;}
    .trust-icons { gap: 15px; }
    .trust-item span {font-size: 14px;}
    .mo-only { display: block; }
    .live-status .status-txt {
        font-size: 15px;
        color: #94a3b8;
    }
}