/* Premium modern custom look without relying on heavy JS libraries */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

:root {
    --primary-color: #00b4a6;
    --primary-light: #00d4c4;
    --dark-bg: #060b0f;
    --card-bg: #0d151c;
    --card-border: rgba(255, 255, 255, 0.08);
    --white: #ffffff;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --transition-speed: 0.3s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

html, body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-main);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* -------------------------------------------------------------
   Header 스타일 (image_f764e9.jpg 매칭)
------------------------------------------------------------- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* 기존 프로젝트 헤더 높이에 맞게 조절 가능 */
    background-color: transparent; /* 혹은 원래 지정한 배경색 */
    z-index: 1000;

    /* 변화를 부드럽게 만들어주는 트랜지션 */
    transition: background-color 0.3s ease, border-bottom 0.3s ease, box-shadow 0.3s ease;
}

/* 스크롤 시 고급스러운 글래스모피즘 분위기 연출 */
header.scrolled {
    background-color: rgba(255, 255, 255, 0.98); /* 깔끔한 화이트 배경 (살짝 불투명도 부여) */
    backdrop-filter: blur(8px); /* 트렌디한 글래스모피즘 효과 유도 */
    
    /* 이미지와 동일한 하단 공간 구분 선 및 그림자 */
    border-bottom: 1px solid #e2e8f0; 
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 25px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav a {
    color: #ffffff; /* 혹은 기존에 설정하신 투명 배경용 글자색 */
    font-weight: 500;
    transition: color 0.3s ease;
}

/* ==========================================
   ★ 추가 및 수정: 스크롤이 내려갔을 때 (.scrolled) 
   ========================================== */

/* 1. 일반 메뉴 글자색을 짙은 색으로 변경 (image_fa8440.png 반영) */
header.scrolled nav a {
    color: #1e293b; /* 배경이 하얘지므로 글씨는 선명한 네이비 블랙으로 */
}

/* 2. 메뉴에 마우스를 올렸을 때(Hover) 포인트 컬러 */
header.scrolled nav a:hover {
    color: #00b4a6; /* 위브컴퍼니 브랜드 청록색 */
}

/* 3. 로고 텍스트가 있다면 로고 색상도 함께 변경 */
header.scrolled .logo-text {
    color: #1e293b;
}

/* 4. [선택사항] 우측 '상담 문의' 강조 버튼 스타일 유지 */
/* 스크롤이 내려가도 버튼 배경과 글자색이 깨지지 않도록 강제 지정 */
header.scrolled .btn-consult {
    background-color: #00ccb4 !important; /* 상담 문의 버튼 배경 (청록색) */
    color: #ffffff !important;            /* 버튼 내부 글자색 (화이트) */
}
header.scrolled .btn-consult:hover {
    background-color: #00b4a6 !important; /* 호버 시 약간 짙어지는 효과 */
}

/* ==========================================
   헤더 로고 스타일링 & 정렬
   ========================================== */
.logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 8px; /* 이미지와 텍스트 사이 간격 */
    text-decoration: none;
}

.logo-img {
    height: 28px; /* 헤더 크기에 맞는 적당한 로고 높이 */
    width: auto;
    object-fit: contain;
    border-radius: 4px; /* 사각형 이미지를 부드럽게 매칭 */
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff; /* 스크롤 전 기본 글자색 (배경이 어두울 때 기준) */
    transition: color 0.3s ease;
}

/* 스크롤 다운 시 (.scrolled) 로고 텍스트 선명하게 네이비 블랙화 */
header.scrolled .logo-text {
    color: #0f172a !important; 
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-item {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 6px;
    /* 처음부터 완전히 보이고 즉시 클릭 가능하도록 설정 */
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-item:hover {
    color: var(--primary-light);
}

/* 우측 상단 강조된 상담 문의 버튼 */
.nav-item.cta-btn {
    background: #00ccb4;
    color: var(--white);
    padding: 9px 22px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 13px;
    box-shadow: 0 4px 15px rgba(0, 204, 180, 0.25);
    transition: all var(--transition-speed) ease;
}

.nav-item.cta-btn:hover {
    background: #00ebd0;
}

/* -------------------------------------------------------------
   Hero 섹션 스타일 (원경 그라데이션 및 그리드 배경)
------------------------------------------------------------- */
#hero {
    position: relative;
    height: 100vh;
    min-height: 750px;
    /* 우상단에서 퍼져나가는 심해 느낌의 깊고 세련된 다크 청록 그라데이션 */
    background: radial-gradient(circle at 85% 20%, #0d353f 0%, #081620 45%, #050a0d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

/* 이미지 속 미세한 모눈 격자 패턴 구현 */
#hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.hero-tag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(0, 204, 180, 0.08);
    border: 1px solid rgba(0, 204, 180, 0.25);
    color: #00eccf;
    font-size: 13px;
    font-weight: 500;
    border-radius: 20px;
    margin-bottom: 40px;
    letter-spacing: -0.3px;
}

.hero-title {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 30px;
    letter-spacing: -1.5px;
    color: var(--white);
}

.hero-title span {
    color: #00ccb4;
    background: linear-gradient(135deg, #00d4c4 0%, #00b4a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 18px;
    line-height: 1.8;
    color: #8da2b2;
    margin-bottom: 50px;
    font-weight: 400;
    letter-spacing: -0.5px;
}

/* 중앙 하단 더블 버튼 */
.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn {
    display: inline-block;
    padding: 14px 34px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 30px;
    text-decoration: none;
    transition: all var(--transition-speed) ease;
}

.btn-primary {
    background: #00ccb4;
    color: var(--white);
    box-shadow: 0 4px 25px rgba(0, 204, 180, 0.3);
}

.btn-primary:hover {
    background: #00ebd0;
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: #9bb0c1;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--white);
}

/* -------------------------------------------------------------
   Scroll Indicator 스타일
------------------------------------------------------------- */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 11px;
    color: #556979;
    letter-spacing: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.mouse-icon {
    width: 22px;
    height: 36px;
    border: 2px solid #334655;
    border-radius: 11px;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background: #00ccb4;
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 1.6s infinite;
}


/* Section Common Layout */
.section {
    padding: 120px 20px;
}

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

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

.section-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-light);
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.section-header h2 {
    font-size: 38px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -1px;
}

.accent-line {
    width: 50px;
    height: 3px;
    background-color: var(--primary-color);
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

.section-header .subtitle {
    margin-top: 20px;
    font-size: 16px;
    color: var(--text-muted);
}

/* 1. Intro Section Custom Styles */
.intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 0;
}

.intro-card {
    background: var(--card-bg); /* 고급스러운 다크 계열로 수정 */
    border: 1px solid var(--card-border);
    padding: 45px 40px;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.intro-card:hover {
    border-color: rgba(0, 180, 166, 0.3);
    transform: translateY(-4px);
}

.intro-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--white); /* 흰색 글씨로 고대비 확보 */
    border-left: 4px solid var(--primary-color);
    padding-left: 14px;
}

.intro-card p {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 15px;
}

/* =============================================================
   회사소개 (ABOUT WEAVE) 섹션 스타일
============================================================= */
/* =============================================================
   회사소개 - 최상단 배치에 따른 여백 및 스타일 최적화
============================================================= */
.about-section {
    /* 1. 고정 헤더 고려 및 하단 콘텐츠와 확실한 공간 격리 */
    padding: 140px 0 80px 0; 
    background-color: #041017; /* 이미지의 가장 깊은 블랙 딥 네이비 톤 */
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.about-header {
    margin-bottom: 45px;
    text-align: left;
}

.about-subtitle {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #00eccf; /* 선명하게 돋보이는 네온 민트 */
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.about-header h2 {
    font-size: 34px;
    font-weight: 800;
    color: #ffffff; /* 안 보이던 메인 타이틀을 완전한 화이트로 수정 */
    letter-spacing: -0.5px;
}

/* 2열 레이아웃 갭 확보 */
.about-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: stretch;
    margin-bottom: 60px; /* 하단 2개 카드(전략 컨설팅/지속 성장)와 겹치지 않도록 마진 확보 */
}

/* --- 좌측: CEO 인사말 영역 (시인성 100% 확보) --- */
.ceo-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9; /* 밝은 회백색 */
    margin-bottom: 16px;
}

.ceo-message-area h3 {
    font-size: 24px;
    line-height: 1.45;
    font-weight: 700;
    color: #e2e8f0; /* 부드러운 밝은 그레이 */
    margin-bottom: 24px;
}

.ceo-p-group p {
    font-size: 14.5px;
    line-height: 1.75;
    color: #94a3b8; /* 어두운 배경에서 가장 가독성이 좋은 슬레이트 그레이 */
    margin-bottom: 16px;
}

.ceo-p-group strong {
    color: #ffffff;
    font-weight: 800;
}

.ceo-signature {
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* 희미한 가로 구분선 */
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ceo-signature .company-name {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.ceo-signature .ceo-name {
    font-size: 14px;
    color: #94a3b8;
}

/* --- 우측: 비주얼 패널 및 흰색 스탯 박스 --- */
.about-image-card {
    position: relative;
    height: 100%;
    min-height: 240px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-logo-img {
    width: 400px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* --- 하단 추가 배치 카드 레이아웃 분리 조치 --- */
/* 이미지 하단에 배치된 전략 컨설팅 / 지속 가능한 성장 카드 세트가 
   위의 그리드 본문과 완벽하게 줄바꿈되어 떨어지도록 구조 정돈 */
.about-section .content-list,
.about-section .services-tab-content {
    width: 100%;
    clear: both;
    margin-top: 40px;
}

/* 모바일 대응 */
@media (max-width: 991px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-visual-area {
        display: none;
    }
}

/* -------------------------------------------------------------
   문제 정의 섹션
------------------------------------------------------------- */
.problem-section {
    background-color: #ffffff;
}

.problem-section .section-header h2 {
    color: #0f172a;
}

.problem-section .section-tag {
    color: #00ccb4;
}

.problem-section .problem-subtitle {
    color: #64748b;
}

.problem-subtitle {
    margin-top: 18px;
    font-size: 16px;
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 50px;
}

.problem-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    transition: all 0.3s ease;
}

.problem-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
}

.problem-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.problem-card-caption {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 22px 26px;
    text-align: left;
}

.problem-num {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 800;
    color: #00b4a6;
}

.problem-card-caption p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #475569;
}

.problem-card-caption p strong {
    color: #0f172a;
    font-weight: 700;
}

.problem-note {
    text-align: center;
    margin-top: 70px;
    font-size: 24px;
    font-weight: 800;
    color: #ff5b5b;
    letter-spacing: -0.3px;
}

.problem-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 70px;
    align-items: start;
}

.problem-stat-block {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.trigger-stat-anim .problem-stat-block:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.trigger-stat-anim .problem-stat-block:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.problem-stat-heading {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
    color: #0f172a;
    text-align: center;
    word-break: keep-all;
}

.stat-highlight {
    color: #0f172a;
    font-weight: 800;
}

/* 좌/우 공통: 프리미엄 다크 카드 막대그래프 */
.problem-chart-card {
    position: relative;
    background-color: #0f2233;
    border-radius: 20px;
    height: 300px;
    margin-top: 30px;
    padding: 32px 30px 40px;
    box-sizing: border-box;
    box-shadow: 0 15px 35px rgba(13, 30, 45, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.problem-chart-watermark {
    position: absolute;
    top: 26px;
    left: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.2);
}

/* 좌측: 점-선 차트 */
.linechart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.linechart-grid line {
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1;
}

.linechart-path {
    fill: none;
    stroke: #00eccf;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 480;
    stroke-dashoffset: 480;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s;
}

.linechart-point {
    fill: #0f2233;
    stroke: #00eccf;
    stroke-width: 2.5;
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.linechart-point:nth-of-type(1) { transition-delay: 0.3s; }
.linechart-point:nth-of-type(2) { transition-delay: 0.45s; }
.linechart-point:nth-of-type(3) { transition-delay: 0.6s; }
.linechart-point:nth-of-type(4) { transition-delay: 0.75s; }
.linechart-point:nth-of-type(5) { transition-delay: 0.9s; }
.linechart-point:nth-of-type(6) { transition-delay: 1.05s; }
.linechart-point:nth-of-type(7) { transition-delay: 1.2s; }

.trigger-stat-anim .linechart-path { stroke-dashoffset: 0; }
.trigger-stat-anim .linechart-point { opacity: 1; transform: scale(1); }

/* 우측: 모래시계 + 떨어지는 동전 */
.hourglass-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 5px rgba(201, 135, 31, 0.18));
}

.hourglass-cap-plate {
    fill: #8a5a1a;
    stroke: #5e3d10;
    stroke-width: 1;
}

.hourglass-post {
    stroke: #8a5a1a;
    stroke-width: 5;
    stroke-linecap: round;
}

.hourglass-glass {
    fill: rgba(226, 240, 255, 0.05);
}

.hourglass-frame {
    fill: none;
    stroke: #c9871f;
    stroke-width: 5;
    stroke-linejoin: round;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s;
}

.hourglass-fill-top {
    fill: url(#goldGrad);
    transform-origin: 260px 68px;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.9s;
}

.hourglass-fill-bottom {
    fill: url(#goldGrad);
    transform: scaleY(0);
    transform-origin: 260px 188px;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 1.4s;
}

.falling-coin circle,
.hourglass-embedded-coin circle {
    fill: url(#goldGrad);
    stroke: #a5691a;
    stroke-width: 2;
}

.falling-coin text,
.hourglass-embedded-coin text {
    fill: #5c3a0a;
    font-size: 13px;
    font-weight: 800;
    text-anchor: middle;
}

.falling-coin {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.falling-coin-1 { transition-delay: 1s; }
.falling-coin-2 { transition-delay: 1.2s; }

.hourglass-embedded-coin {
    opacity: 0;
    transition: opacity 0.5s ease;
    transition-delay: 1.4s;
}

.trigger-stat-anim .hourglass-frame { stroke-dashoffset: 0; }
.trigger-stat-anim .hourglass-fill-top { transform: scaleY(0.55); }
.trigger-stat-anim .hourglass-fill-bottom { transform: scaleY(1); }
.trigger-stat-anim .falling-coin { opacity: 1; transform: translateY(0); }
.trigger-stat-anim .hourglass-embedded-coin { opacity: 1; }

@media (max-width: 768px) {
    .problem-stat-row {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .problem-chart-card {
        height: 210px;
        padding: 24px 20px 30px;
    }
}


/* -------------------------------------------------------------
   문제해결 인터페이스
------------------------------------------------------------- */
/* 전체 섹션 - 흰색 배경 적용 */
.solution-section {
  background-color: #ffffff; /* 밝은 흰색 배경 */
  padding: 120px 20px;
  color: #1e293b;
}

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

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

.solution-tag {
    font-size: 13px;
    font-weight: 700;
    color: #00ccb4;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 14px;
}

.solution-main-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
    letter-spacing: -1px;
    margin-bottom: 22px;
}

.solution-subtitle {
    font-size: 16px;
    color: #64748b;
    font-weight: 400;
}

/* 메인 3열 그리드 구조 */
.solution-grid {
  display: grid;
  grid-template-columns: 1fr 420px 1fr; /* 좌 / 중앙 이미지 / 우 */
  gap: 48px;
  align-items: stretch; /* 좌우 컬럼의 높이를 메인 이미지 높이에 맞춤 */
}

.solution-col {
  display: flex;
  flex-direction: column;
}

/* 양쪽 텍스트 컬럼: 위쪽 끝과 아래쪽 끝으로 분리 배치 */
.left-col,
.right-col {
  justify-content: space-between;
  padding: 12px 0;
}

/* 가운데 이미지 둥글게 처리 */
.center-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-image-wrapper {
  width: 100%;
  border-radius: 24px; /* 보기 편안한 둥근 모서리 */
  overflow: hidden;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08); /* 부드러운 그림자 */
  background-color: #f8fafc;
}

.main-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 컨텐츠 아이템 스타일 */
.solution-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* 아이콘 크기 축소 및 박스 정돈 */
.item-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-color: #eff6ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.item-content {
  flex: 1;
}

.item-title {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a; /* 가독성을 위한 진한 글자색 */
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.item-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #475569; /* 선명한 설명글 색상 */
  margin: 0;
  max-width: 230px;
  word-break: keep-all;
}

/* 강조 문구 (볼드 및 컬러 적용) */
.item-desc strong {
  color: #0f172a;
  font-weight: 700;
}

/* 좌측 컬럼: 아이템 블록 전체를 이미지 쪽(오른쪽)으로 붙임 (아이콘은 왼쪽 그대로) */
.left-col {
  align-items: flex-end;
}

.left-col .item-content {
  flex: 0 1 auto;
}

/* 모바일 & 태블릿 반응형 처리 */
@media (max-width: 1024px) {
  .solution-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .left-col,
  .right-col {
    gap: 32px;
    justify-content: flex-start;
  }

  .center-col {
    order: -1;
  }

  .main-image-wrapper {
    max-width: 360px;
  }

  .section-title {
    font-size: 28px;
  }

  .left-col {
    align-items: stretch;
  }

  .left-col .item-content {
    flex: 1;
  }
}


/* -------------------------------------------------------------
   서비스 섹션 전용 탭 인터페이스 (image_f9aba6 계열 최적화)
------------------------------------------------------------- */
.services-tab-section {
    background-color: #f4f7f9; /* 대조를 이루는 화사하고 깔끔한 연청백색 바탕 */
    padding: 120px 20px;
    color: #1e293b;
}

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

.services-tag {
    font-size: 13px;
    font-weight: 700;
    color: #00ccb4;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 14px;
}

.services-main-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
    letter-spacing: -1px;
    margin-bottom: 22px;
}

.services-subtitle {
    font-size: 16px;
    color: #64748b;
    font-weight: 400;
}

/* 탭 컨트롤 마스터 캡슐 바 */
.services-tab-navbar {
    display: flex;
    max-width: 920px;
    margin: 0 auto 70px auto;
    background: #e2e8f0;
    padding: 8px;
    border-radius: 40px;
    justify-content: space-between;
}

.tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.06);
}

/* 탭 콘텐츠 기본 숨김 및 활성화 로직 */
.services-tab-content {
    display: none;
    animation: fadeInTab 0.45s ease forwards;
}

.services-tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 내부 플렉스 그리드 구조 */
.service-flex-layout {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-graphic-side {
    flex: 1;
    max-width: 540px;
}

/* 좌측 인포그래픽 미니 대시보드 카드 */
.graphic-card {
    background-color: #0d1e2d; /* 딥한 인디고 네이비 카드 바디 */
    border-radius: 20px;
    height: 380px;
    padding: 35px;
    position: relative;
    box-shadow: 0 15px 35px rgba(13, 30, 45, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.graphic-watermark-title {
    position: absolute;
    top: 30px;
    left: 35px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 1px;
}

/* 1. HACCP 심사대비 체크리스트 그래픽 */
.cert-check-bg {
    justify-content: center;
}

.cert-check-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    z-index: 2;
}

.cert-check-item {
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.cert-check-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 236, 207, 0.1);
    border: 1px solid rgba(0, 236, 207, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-check-icon svg {
    width: 18px;
    height: 18px;
}

.cert-check-path {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 0.5s ease;
}

.cert-check-label {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.cert-seal {
    position: absolute;
    right: 35px;
    bottom: 32px;
    width: 84px;
    height: 84px;
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    filter: drop-shadow(0 0 10px rgba(0, 236, 207, 0.45));
}

.cert-seal-ring {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    transition: stroke-dashoffset 0.8s ease;
}

/* 2. 현장 점검 청사진 + 동선 재구성 그래픽 */
.site-check-bg {
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.site-svg {
    width: 100%;
    height: auto;
}

.zone-rect {
    fill: rgba(0, 180, 166, 0.08);
    stroke: rgba(0, 204, 180, 0.4);
    stroke-width: 1.5;
    opacity: 0;
    transform: scale(0.92);
    transform-origin: center;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.route-path {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    transition: stroke-dashoffset 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.route-point {
    fill: #00eccf;
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 3. 관리체계 구축 문서 작성 + 승인 스탬프 그래픽 */
.doc-build-bg {
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.doc-svg {
    width: 100%;
    height: auto;
}

.doc-page {
    fill: rgba(255, 255, 255, 0.03);
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1.5;
}

.doc-line {
    stroke: rgba(0, 204, 180, 0.6);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 0.6s ease;
}

.doc-line-title {
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 6;
}

.doc-stamp-circle {
    fill: none;
    stroke: #00eccf;
    stroke-width: 3;
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.doc-stamp-check {
    fill: none;
    stroke: #00eccf;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    transition: stroke-dashoffset 0.4s ease;
}

/* =============================================================
   시점별 동적 애니메이션 제어 (스크롤 감지 vs 탭 클릭 감지)
============================================================= */

/* -------------------------------------------
   [1번 탭 - HACCP 심사대비] 스크롤 근처 도달 시 체크리스트 + 인증 씰 순차 등장
   ------------------------------------------- */
.cert-check-bg {
    background-color: #0f2233 !important; /* 이미지 고유의 딥한 인디고 다크 블루 */
    position: relative;
    height: 380px;
    padding: 40px 35px 45px 35px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.trigger-anim .cert-check-item:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.1s; }
.trigger-anim .cert-check-item:nth-child(1) .cert-check-path { stroke-dashoffset: 0; transition-delay: 0.3s; }
.trigger-anim .cert-check-item:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.35s; }
.trigger-anim .cert-check-item:nth-child(2) .cert-check-path { stroke-dashoffset: 0; transition-delay: 0.55s; }
.trigger-anim .cert-check-item:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.6s; }
.trigger-anim .cert-check-item:nth-child(3) .cert-check-path { stroke-dashoffset: 0; transition-delay: 0.8s; }
.trigger-anim .cert-seal { opacity: 1; transform: scale(1); transition-delay: 0.95s; }
.trigger-anim .cert-seal .cert-seal-ring { stroke-dashoffset: 0; transition-delay: 0.95s; }


/* -------------------------------------------
   [2번 탭 - 현장 점검] 탭을 누르는 순간 구역 등장 + 동선 경로 드로잉
   ------------------------------------------- */
.trigger-anim .zone-rect { opacity: 1; transform: scale(1); }
.trigger-anim .zone-rect:nth-of-type(1) { transition-delay: 0.05s; }
.trigger-anim .zone-rect:nth-of-type(2) { transition-delay: 0.15s; }
.trigger-anim .zone-rect:nth-of-type(3) { transition-delay: 0.25s; }
.trigger-anim .zone-rect:nth-of-type(4) { transition-delay: 0.35s; }

.trigger-anim .route-path { stroke-dashoffset: 0; transition-delay: 0.5s; }

.trigger-anim .route-point { opacity: 1; transform: scale(1); }
.trigger-anim .route-point:nth-of-type(1) { transition-delay: 0.6s; }
.trigger-anim .route-point:nth-of-type(2) { transition-delay: 0.9s; }
.trigger-anim .route-point:nth-of-type(3) { transition-delay: 1.2s; }
.trigger-anim .route-point:nth-of-type(4) { transition-delay: 1.5s; }


/* -------------------------------------------
   [3번 탭 - 관리체계 구축] 탭을 누르는 순간 문서 줄이 순차로 채워지고 승인 스탬프 등장
   ------------------------------------------- */
.trigger-anim .doc-line-title { stroke-dashoffset: 0; transition-delay: 0.1s; }
.trigger-anim .doc-line:nth-of-type(2) { stroke-dashoffset: 0; transition-delay: 0.35s; }
.trigger-anim .doc-line:nth-of-type(3) { stroke-dashoffset: 0; transition-delay: 0.55s; }
.trigger-anim .doc-line:nth-of-type(4) { stroke-dashoffset: 0; transition-delay: 0.75s; }
.trigger-anim .doc-line:nth-of-type(5) { stroke-dashoffset: 0; transition-delay: 0.95s; }
.trigger-anim .doc-line:nth-of-type(6) { stroke-dashoffset: 0; transition-delay: 1.15s; }
.trigger-anim .doc-stamp-circle { opacity: 1; transform: scale(1); transition-delay: 1.3s; }
.trigger-anim .doc-stamp-check { stroke-dashoffset: 0; transition-delay: 1.5s; }


/* 우측 텍스트 본문 사이드 */
.service-text-side {
    flex: 1;
    text-align: left;
}

.content-mini-badge {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(0, 204, 180, 0.08);
    border: 1px solid rgba(0, 204, 180, 0.2);
    color: #00b4a6;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.content-title {
    font-size: 36px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.content-highlight {
    font-size: 16px;
    font-weight: 700;
    color: #1d4ed8; /* 선명한 포인트 블루 지향 */
    margin-bottom: 25px;
}

.content-desc {
    font-size: 15px;
    line-height: 1.75;
    color: #475569;
    margin-bottom: 35px;
    word-break: keep-all;
}

/* 우측 화이트 카드형 행 리스트 */
.content-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.list-card-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
}

/* 리스트 아이콘 박스 기본 스타일 보정 */
.list-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 부드러운 아주 연한 청록빛 도는 연회색 배경 */
    background-color: #f0f6f6; 
}

.list-icon-box svg {
    display: block;
}

.list-txt h5 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.list-txt p {
    font-size: 13px;
    color: #64748b;
}

/* -------------------------------------------------------------
   반응형 모바일 가변 단독 배치 최적화
------------------------------------------------------------- */
@media (max-width: 1024px) {
    .service-flex-layout {
        flex-direction: column;
        gap: 45px;
    }
    .service-graphic-side, .service-text-side {
        max-width: 100%;
        width: 100%;
    }
    .graphic-card {
        height: 320px;
    }
}

@media (max-width: 640px) {
    .services-main-title { font-size: 30px; }
    .services-tab-navbar {
        flex-direction: column;
        border-radius: 16px;
        gap: 5px;
    }
    .tab-btn {
        padding: 12px;
        font-size: 14px;
    }
    .content-title { font-size: 28px; }
}
/* -------------------------------------------------------------
   HACCP Main 
------------------------------------------------------------- */
.haccp-section, 
.haccp-container-bg {
    background-color: #0b2d39 !important; /* 레이더 차트에서 사용한 세련된 딥 네이비 그린 */
    color: #ffffff;
}

/* 2. 섹션 내 메인 타이틀 및 강조 텍스트 */
.haccp-section .section-subtitle {
    color: #00eccf !important; /* 차트 캡/블립에 쓰인 선명한 네온 민트 컬러로 통일 */
    font-weight: 700;
    letter-spacing: 1px;
}

.haccp-section .section-title strong {
    color: #00b4a6 !important; /* 위브컴퍼니 시그니처 청록색 */
}

/* 우측 레이어 뒤편의 거대한 HACCP 텍스트 효과 */
.haccp-watermark {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 190px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.025);
    letter-spacing: 15px;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    transform-origin: right center;
}

.haccp-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* 왼쪽 타이포그래피 에어리어 */
.haccp-left-content {
    flex: 1;
    max-width: 520px;
    text-align: left;
}

.haccp-sub-tag {
    font-size: 14px;
    font-weight: 700;
    color: #00eccf; /* 형광 감각의 민트 포인트 */
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 24px;
}

.haccp-main-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--white);
    letter-spacing: -1px;
    margin-bottom: 35px;
}

.haccp-explanation {
    font-size: 15.5px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.65); /* 가독성 높은 실버그레이 색상 */
    font-weight: 400;
    word-break: keep-all;
}

/* 오른쪽 2x2 반투명 카드 격자 */
.haccp-right-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 620px;
}

.haccp-ui-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 35px 30px;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.haccp-ui-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 236, 207, 0.3);
    transform: translateY(-3px);
}

.card-step {
    font-size: 11px;
    font-weight: 700;
    color: #00eccf; /* 스텝 강조용 테마색 */
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 14px;
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}

.card-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    word-break: keep-all;
}

/* 브레이크포인트 태블릿 및 모바일 최적화 */
@media (max-width: 1024px) {
    .haccp-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
    }
    .haccp-left-content, .haccp-right-grid {
        max-width: 100%;
        width: 100%;
    }
    .haccp-watermark {
        display: none; /* 패드 이하 화면 겹침 방지 */
    }
}

@media (max-width: 640px) {
    .haccp-main-title {
        font-size: 32px;
    }
    .haccp-right-grid {
        grid-template-columns: 1fr; /* 모바일은 1열 배열 */
    }
    .haccp-ui-card {
        padding: 30px 24px;
    }
}

/* -------------------------------------------------------------
   Process Timeline 
------------------------------------------------------------- */
.process-section {
    background-color: #ffffff; /* 이미지와 매칭되는 깨끗한 화이트 배경 */
    color: #1a202c;
    padding: 120px 20px;
    text-align: center;
}

.process-header {
    margin-bottom: 90px;
}

.process-tag {
    font-size: 13px;
    font-weight: 700;
    color: #00ccb4; /* 상큼한 테마 민트 컬러 */
    letter-spacing: 3px;
    display: block;
    margin-bottom: 15px;
}

.process-main-title {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.35;
    color: #1e293b; /* 깊이감 있는 다크 네이비/그레이 색상 */
    letter-spacing: -1px;
    margin-bottom: 25px;
}

.process-subtitle {
    font-size: 16px;
    color: #64748b; /* 부드러운 설명문 색상 */
    font-weight: 400;
}

/* 타임라인 플로우 감싸는 래퍼 */
.timeline-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 0;
}

/* 가로 횡단 연결선 */
.timeline-line {
    position: absolute;
    top: 72px; /* 원형 노드의 정중앙 높이에 맞춤 */
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, #00b4a6 0%, #17517e 100%); /* 청록에서 블루로 이어지는 선 그라데이션 */
    z-index: 1;
}

/* 아이템 정렬 컨테이너 */
.timeline-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* 개별 노드 아이템 */
.timeline-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 10px;
}

/* 그라데이션 입체 숫자 원형 노드 */
.node-circle {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #009d9a 0%, #18629b 100%);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    /* 이미지 특유의 부드럽고 몽환적인 청록색 네온 글로우 효과 */
    box-shadow: 0 8px 24px rgba(0, 157, 154, 0.35); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-item:hover .node-circle {
    transform: scale(1.1);
    box-shadow: 0 12px 28px rgba(0, 157, 154, 0.5);
}

/* 노드 하단 텍스트 구조 */
.node-content h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.node-content p {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    word-break: keep-all;
    max-width: 160px;
}

.node-content p strong {
    color: #00b4a6;
    font-weight: 700;
}

/* -------------------------------------------------------------
   상담문의 섹션 스타일
------------------------------------------------------------- */
.contact-section {
    padding: 100px 0;
    background-color: #041017 !important; /* 회사소개와 일치하는 가장 깊은 딥 블랙 네이비 */
    color: #ffffff;
    text-align: center;
    position: relative;
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
}

.contact-tag {
    font-size: 13px;
    font-weight: 700;
    color: #00eccf;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 25px;
}

.contact-main-title {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--white);
    letter-spacing: -1px;
    margin-bottom: 30px;
}

.contact-subtitle {
    font-size: 16.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    max-width: 680px;
    margin: 0 auto 50px auto;
    word-break: keep-all;
}

/* 하단 듀얼 제어 버튼 구조 */
.contact-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.btn-tel {
    display: inline-block;
    padding: 15px 38px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: #00ccb4;
    color: var(--white);
    /* 이미지 특유의 은은하게 차오르는 민트빛 네온 글로우 효과 */
    box-shadow: 0 6px 25px rgba(0, 204, 180, 0.4);
}

.btn-tel:hover {
    background: #00ebd0;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 204, 180, 0.6);
}

.kakao-consult-btn {
    display: inline-block;
    padding: 15px 38px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background-color: #FEE500 !important; /* 카카오 공식 옐로우 고유 컬러 */
    color: #191919 !important; /* 시인성이 높은 다크 차콜 글자색 */
    color: var(--white);
    /* 이미지 특유의 은은하게 차오르는 민트빛 네온 글로우 효과 */
    box-shadow: 0 6px 20px rgba(254, 229, 0, 0.4);
}

.kakao-consult-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(254, 229, 0, 0.4);
    filter: brightness(0.95); /* 마우스를 올리면 살짝 차분해지는 효과 */
}

/* -------------------------------------------------------------
   푸터(Footer) 
------------------------------------------------------------- */
footer {
    background-color: #050a0f; /* 짙은 차콜 블랙 배경 */
    padding: 70px 20px 50px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-container {
    max-width: 1300px;
    margin: 0 auto;
}

.footer-top-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
}

/* 로고 에어리어 단독 커스텀 */
.footer-logo-area {
    max-width: 400px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 16px; /* 아이콘과 텍스트 영역 사이의 확실한 간격 */
    margin-bottom: 25px;
}

.footer-logo-img {
    width: 54px;         /* 업로드 이미지 스케일에 맞춘 최적 크기 */
    height: 54px;
    object-fit: cover;
    border-radius: 14px; /* 이미지에서 보이는 부드러운 라운드 값 */
}

.footer-logo-text {
    font-size: 19px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 4px;
}

/* 4. HACCP CONSULTING 서브 텍스트 */
.footer-logo-sub {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;     /* 이미지와 유사한 차분한 그레이 블루 톤 */
    letter-spacing: 1px;/* 영문 폰트 자간 확장을 통해 고급스러움 부여 */
}

.footer-logo-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #4b5a6a;
    font-weight: 400;
}

/* 우측 2열 데이터 그리드 */
.footer-info-grid {
    position: relative; /* 개인정보처리방침 버튼의 위치 기준점 */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 50px;
    max-width: 650px;
}

.info-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meta-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.3); /* 연한 그레이 메타 텍스트 */
    letter-spacing: 0.5px;
}

.meta-value {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 400;
}

.privacy-link-btn {
    position: absolute;
    top: 18px;
    right: calc(100% + 150px);
    display: inline-block;
    padding: 3px 12px;
    font-size: 13.5px; /* 옆의 "네이버 공식 블로그 바로가기"(.footer-right-link)와 동일한 크기 */
    font-weight: 500;
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.privacy-link-btn:hover {
    color: #00eccf;
    border-color: rgba(0, 236, 207, 0.4);
}

.footer-divider {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 45px 0 30px 0;
}

/* 카피라이트 횡축 평행 레이아웃 */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright {
    font-size: 13px;
    color: #384554;
    letter-spacing: 0.2px;
}

.footer-right-link {
    font-size: 13.5px;
    color: #00b4a6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-right-link:hover {
    color: #00eccf;
    text-decoration: underline;
}

.w-break {
    display: block;
}

.m-break {
    display: inline;
}

/* Keyframes Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); }
    40% { transform: translateY(-8px) rotate(45deg); }
    60% { transform: translateY(-4px) rotate(45deg); }
}

@keyframes scrollWheel {
    0% { opacity: 1; top: 6px; }
    50% { opacity: 0.3; top: 14px; }
    100% { opacity: 0; top: 14px; }
}

/* =============================================================
   [모바일 UI 구현] 삼선 버튼 클릭 시 네비게이션 드롭다운 메뉴
============================================================= */

/* PC 화면에서는 삼선 토글 버튼 숨김 */
.menu-toggle-btn {
    display: none;
}

@media (max-width: 640px) {
    .process-main-title {
        font-size: 32px;
    }
    .process-header {
        margin-bottom: 50px;
    }
}

/* -------------------------------------------------------------
   헤더 네비게이션: 태블릿 폭부터 햄버거 메뉴로 전환
------------------------------------------------------------- */
@media (max-width: 991px) {

    header {
        height: 70px;
    }

    /* 1. 헤더 기본 구조 고정 (보내주신 이미지 스타일 유지) */
    .header {
        position: fixed !important;
        background-color: #041017 !important; /* 이미지의 딥 네이비 배경 적용 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        width: 100% !important;
        z-index: 9999;
    }

    .header-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px 20px !important;
        height: 70px !important;
        box-sizing: border-box;
    }

    header.scrolled .logo-text {
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    /* privacy.html은 스크롤 JS가 없어 .scrolled가 안 붙으므로,
       모바일에서 강제로 어두워지는 배경 위에 글자색도 흰색으로 되돌림 */
    .privacy-topbar .logo-text {
        color: #ffffff !important;
    }

    /* 2. 삼선(햄버거) 버튼 스타일 및 기본 회색선 적용 */
    .menu-toggle-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 10001;
    }

    .menu-toggle-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #64748b !important; /* 이미지와 동일한 차분한 회색조 삼선 */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 3. 버튼 클릭 시 나타날 모바일 메뉴 컨테이너 (위에서 아래로 내려오는 드롭다운) */
    .nav-menu {
        position: absolute !important;
        top: 70px; /* 헤더 바로 아래 붙어서 출력 */
        left: 0;
        width: 100% !important;
        background-color: #0b2d39 !important; /* 한 단계 더 밝은 딥그린/네이비 톤으로 구분감 제공 */
        border-bottom: 2px solid #00eccf !important; /* 포인트 컬러인 민트색 하단선 */

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* 메뉴 링크들이 가로로 꽉 차도록 설정 */
        justify-content: flex-start !important;
        padding: 10px 0 !important;
        gap: 0 !important;

        /* 초기에 숨겨두기 (높이를 0으로 만들고 투명화) */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, opacity 0.3s ease;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    }

    /* 활성화(active) 되었을 때 부드럽게 펼쳐지는 효과 */
    .nav-menu.active {
        max-height: 400px; /* 메뉴가 모두 펼쳐질 수 있는 넉넉한 높이 */
        opacity: 1;
    }

    /* 4. 모바일 메뉴 내부 기존 네비게이션 아이템 디자인 구체화 */
    .nav-menu .nav-item {
        font-size: 15px !important;
        color: #e2e8f0 !important;
        font-weight: 600 !important;
        padding: 15px 24px !important;
        text-align: left !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        /*width: 100% !important;*/
        box-sizing: border-box;
        white-space: nowrap !important;
        display: block !important;
    }

    /* 메뉴 항목 터치 및 호버 시 가독성 피드백 */
    .nav-menu .nav-item:hover,
    .nav-menu .nav-item:active {
        background-color: rgba(0, 236, 207, 0.08) !important;
        color: #00eccf !important; /* 위브 민트색으로 하이라이트 */
    }

    /* 모바일 상담문의 버튼 정렬 커스텀 */
    .nav-menu .cta-btn {
        margin: 15px 20px !important;
        padding: 12px 0 !important;
        display: block !important;
        text-align: center !important;
        background: linear-gradient(135deg, #00b4a6 0%, #00eccf 100%) !important;
        color: #041017 !important;
        font-weight: 700;
        border-radius: 8px !important;
    }

    /* 5. 활성화 시 삼선 버튼이 'X'로 교차 변형되는 애니메이션 */
    .menu-toggle-btn.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
        background-color: #00eccf !important; /* X로 바뀔 때 민트색으로 포인트 */
    }
    .menu-toggle-btn.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle-btn.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
        background-color: #00eccf !important;
    }
}

@media (max-width: 768px) {

    .w-break {
        display: inline;
    }

    .m-break {
        display: block;
    }

    #hero {
        padding: 0px 20px 150px 20px;
    }
    .scroll-indicator {
        bottom: 150px;
    }
    .hero-title { font-size: 38px; }
    .hero-desc { font-size: 15px; }

    .footer-bottom { flex-direction: column; align-items: flex-start; }

    /* 1. 버튼을 감싸는 컨테이너 여백을 위의 상단 글씨 라인 정렬과 일치시킴 */
    .contact-section .contact-buttons { /* 실제 사용 중인 버튼 부모 클래스명에 맞춰 적용 */
        display: flex !important;
        flex-direction: column !important; /* 가로 배열에서 세로 1열 배열로 변경하여 글자 꺾임 원천 차단 */
        gap: 12px !important; /* 버튼과 버튼 사이의 정돈된 간격 */
        
        /* 중요: 양쪽 여백을 상단 글씨 영역 패딩(보통 20px~24px)과 완벽 동기화 */
        padding: 0 24px !important; 
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. 각 버튼의 모바일 무드 스케일 다운 및 글자 정렬 */
    .contact-buttons a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        width: 100% !important; /* 부모 정렬선에 맞춰 가로폭 100% 확장 */
        height: 52px !important; /* 터치하기 가장 좋은 모바일 표준 높이 고정 */
        padding: 0 !important; /* 내부 패딩을 초기화하여 글씨가 찌그러지지 않도록 방지 */
        
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: -0.3px !important;
        border-radius: 12px !important; /* 모바일 풀 버튼에선 캡슐형보다 약간 각진 라운드가 훨씬 심플하고 보기 좋습니다 */
        
        /* 줄바꿈을 절대 금지하여 한눈에 텍스트가 들어오도록 유도 */
        white-space: nowrap !important; 
    }

    /* 3. 모바일 환경에 최적화된 그림자(Glow) 및 투박함 덜어내기 */
    .contact-buttons a {
        box-shadow: 0 4px 12px rgba(0, 236, 207, 0.15) !important;
    }
    
    .kakao-consult-btn {
        box-shadow: 0 4px 12px rgba(254, 229, 0, 0.15) !important;
    }
}

/* 정보 그리드가 아직 2열인 태블릿 폭에서도 버튼이 로고 영역과 겹치지 않도록 미리 되돌림 */
@media (max-width: 1100px) {
    .privacy-link-btn {
        position: static;
        grid-column: 1 / -1;
        justify-self: start;
        margin-bottom: 12px;
    }
}

/* -------------------------------------------------------------
   반응형 브레이크 포인트 모바일 가변 처리
------------------------------------------------------------- */
@media (max-width: 900px) {
    .footer-top-grid {
        flex-direction: column;
        gap: 40px;
    }
    .footer-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .contact-main-title {
        font-size: 32px;
    }

    .timeline-line {
        display: none; /* 가로선 제거 */
    }
    
    .timeline-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding-left: 30px;
    }
    
    .timeline-item {
        flex-direction: row;
        text-align: left;
        gap: 25px;
        align-items: center;
    }
    
    .node-circle {
        margin-bottom: 0;
        width: 50px;
        height: 50px;
        font-size: 16px;
        flex-shrink: 0;
    }
    
    .node-content h3 {
        margin-bottom: 4px;
    }
}

/* -------------------------------------------------------------
   개인정보 처리방침 페이지 (privacy.html)
------------------------------------------------------------- */
.privacy-topbar {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.privacy-topbar .header-container {
    padding: 20px 40px;
    justify-content: flex-start;
}

.privacy-topbar .logo-text {
    color: #0f172a;
}

.privacy-main {
    background-color: #f7f9fb;
    padding: 140px 20px 120px;
}

.privacy-container {
    max-width: 900px;
    margin: 0 auto;
}

.privacy-page-header {
    margin-bottom: 50px;
}

.privacy-page-header h1 {
    font-size: 30px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
}

.privacy-page-header p {
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
    word-break: keep-all;
}

.privacy-effective-date {
    display: inline-block;
    margin-top: 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: #00897e;
    background: rgba(0, 180, 166, 0.08);
    border: 1px solid rgba(0, 180, 166, 0.2);
    padding: 6px 16px;
    border-radius: 20px;
}

.privacy-article {
    margin-bottom: 36px;
}

.privacy-article-title {
    background-color: #eef1f4;
    color: #0f172a;
    font-size: 16.5px;
    font-weight: 700;
    padding: 16px 22px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.privacy-article-body {
    padding: 0 4px;
}

.privacy-article-body p {
    font-size: 14.5px;
    line-height: 1.85;
    color: #334155;
    margin-bottom: 12px;
    word-break: keep-all;
}

.privacy-article-body ul,
.privacy-article-body ol {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.privacy-article-body li {
    font-size: 14.5px;
    line-height: 1.85;
    color: #334155;
    margin-bottom: 6px;
    word-break: keep-all;
}

.privacy-table-wrapper {
    overflow-x: auto;
    margin: 10px 0 12px;
}

.privacy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.privacy-table th,
.privacy-table td {
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    text-align: left;
    line-height: 1.6;
}

.privacy-table th {
    background-color: #f1f5f9;
    color: #0f172a;
    font-weight: 700;
    font-size: 13.5px;
}

.privacy-table td {
    color: #475569;
}

.privacy-table td a {
    color: #00897e;
    font-weight: 500;
}

@media (max-width: 640px) {
    .privacy-topbar .header-container {
        padding: 16px 20px;
    }
    .privacy-main {
        padding: 100px 16px 90px;
    }
    .privacy-page-header h1 {
        font-size: 24px;
    }
    .privacy-article-title {
        font-size: 15px;
        padding: 14px 18px;
    }
    .privacy-table {
        table-layout: fixed;
    }
    .privacy-table th,
    .privacy-table td {
        padding: 8px 8px;
        font-size: 12.5px;
        word-break: break-all;
    }
}