/* ==========================================
   Tech Background Layer
   제품소개 페이지 히어로 아래 섹션들의 배경 그래픽
   (style.css / products.css / 제품별 css / responsive.css 다음에 로드)
   ========================================== */

:root {
    --tech-line: rgba(30, 58, 95, 0.10);
    --tech-line-strong: rgba(30, 58, 95, 0.14);
    --tech-dot: rgba(30, 58, 95, 0.11);
    --tech-orb-blue: rgba(37, 99, 235, 0.07);
    --tech-orb-gold: rgba(240, 173, 78, 0.07);
    --tech-orb-cyan: rgba(14, 165, 180, 0.06);
}

/* 배경 레이어가 본문을 가리지 않도록 컨텐츠를 위로 */
.overview-section>.container,
.features-section>.container,
.flow-section>.container,
.sync-section>.container,
.benefits-section>.container,
.cta-section>.container {
    position: relative;
    z-index: 1;
}

/* ==========================================
   1. Overview Section — 도트 그리드 + 소프트 오브
   (::before가 기존 화이트 오버레이이므로 그 위에 레이어를 얹음)
   ========================================== */
.overview-section::before {
    background-image:
        radial-gradient(circle at 12% 18%, var(--tech-orb-blue) 0%, transparent 42%),
        radial-gradient(circle at 88% 82%, var(--tech-orb-gold) 0%, transparent 42%),
        radial-gradient(var(--tech-dot) 1.2px, transparent 1.2px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.93) 0%, rgba(250, 251, 252, 0.9) 100%);
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    background-position: center, center, center, center;
    background-size: 100% 100%, 100% 100%, 26px 26px, 100% 100%;
}

/* ==========================================
   2. Features / Workflow Section
   — 청사진 격자 + 우상단 대형 회로 모티프
   ========================================== */
.features-section {
    background-color: #f8f9fa;
    background-image:
        radial-gradient(circle at 78% 12%, var(--tech-orb-blue) 0%, transparent 38%),
        radial-gradient(circle at 10% 88%, var(--tech-orb-gold) 0%, transparent 38%);
    background-repeat: no-repeat, no-repeat;
}

.features-section::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        url('../images/tech-circuit.svg'),
        linear-gradient(var(--tech-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--tech-line) 1px, transparent 1px);
    background-repeat: no-repeat, repeat, repeat;
    background-position: right -160px top -130px, center, center;
    background-size: 660px 660px, 46px 46px, 46px 46px;
}

/* easyNfile / easyStock 워크플로우 섹션은 .features-section과 같은 요소라
   ::before를 공유한다. 좌하단 회로는 숨겨져 있던 ::after를 되살려 배치
   (원래 ::after인 3px 라인은 이미 제품별 css에서 display:none 처리됨) */
.flow-section::after {
    content: '';
    display: block;
    position: absolute;
    inset: auto 0 0 0;
    top: 0;
    height: auto;
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/tech-circuit.svg');
    background-repeat: no-repeat;
    background-position: left -240px bottom -200px;
    background-size: 720px 720px;
    opacity: 0.7;
}

/* ==========================================
   3. Provider Sync Section (easyStock)
   — 회로 타일 반복 + 중앙 글로우
   ========================================== */
.sync-section {
    /* ::before(absolute)의 기준이 되도록 반드시 필요 */
    position: relative;
    overflow: hidden;
    background-color: var(--white);
    background-image:
        radial-gradient(ellipse at 50% 60%, var(--tech-orb-cyan) 0%, transparent 55%);
    background-repeat: no-repeat;
}

.sync-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/tech-pattern.svg');
    background-repeat: repeat;
    background-size: 240px 240px;
    opacity: 0.6;
    /* 위아래 경계로 갈수록 자연스럽게 사라지도록만 페이드 */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 84%, transparent 100%);
}

/* ==========================================
   4. Benefits Section (다크 블루) — 화이트 격자 + 링
   ========================================== */
.benefits-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.07) 0%, transparent 40%),
        radial-gradient(circle at 15% 85%, rgba(240, 173, 78, 0.09) 0%, transparent 40%),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-size: 100% 100%, 100% 100%, 54px 54px, 54px 54px;
}

/* ==========================================
   5. CTA Section — 좌하단 회로 + 오브
   ========================================== */
.cta-section {
    background-color: #ffffff;
    background-image:
        radial-gradient(circle at 20% 90%, var(--tech-orb-blue) 0%, transparent 45%),
        radial-gradient(circle at 80% 10%, var(--tech-orb-gold) 0%, transparent 45%);
    background-repeat: no-repeat, no-repeat;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        url('../images/tech-circuit.svg'),
        linear-gradient(var(--tech-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--tech-line) 1px, transparent 1px);
    background-repeat: no-repeat, repeat, repeat;
    background-position: left -200px bottom -200px, center, center;
    background-size: 640px 640px, 46px 46px, 46px 46px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
}

/* ==========================================
   6. index.html 제품 상세 섹션 — 기존 텍스처 위에 회로 모티프 추가
   ========================================== */
.product-detail-section>.container {
    position: relative;
    z-index: 1;
}

/* ::before(랩 텍스처 0.04) / ::after(애니메이션 그라데이션)는 그대로 두고,
   섹션 자체 배경에 회로 모티프를 깔아 사진 농도에 영향을 주지 않도록 함 */
.product-detail-section {
    background-color: #ffffff;
    background-image:
        url('../images/tech-circuit.svg'),
        linear-gradient(180deg, #ffffff 0%, #f8f9fa 50%, #e8f4f8 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: right -180px top 60px, center;
    background-size: 600px 600px, cover;
}

/* alt-bg는 원래의 밝은 블루 그라데이션을 유지하면서 회로만 반대쪽에 배치 */
.product-detail-section.alt-bg {
    background-image:
        url('../images/tech-circuit.svg'),
        linear-gradient(180deg, #f0f4f8 0%, #e3f2fd 50%, #f8f9fa 100%);
    background-position: left -180px top 60px, center;
}

/* ==========================================
   Responsive — 좁은 화면에서는 대형 모티프를 줄이거나 제거
   ========================================== */
@media (max-width: 1024px) {

    .features-section::before,
    .cta-section::before {
        background-size: 420px 420px, 46px 46px, 46px 46px;
    }

    .product-detail-section {
        background-size: 400px 400px, cover;
    }

    .flow-section::after {
        background-size: 440px 440px;
    }
}

@media (max-width: 767px) {

    /* 모바일에서는 격자만 남기고 대형 회로는 숨김 */
    .features-section::before,
    .cta-section::before {
        background-image:
            linear-gradient(var(--tech-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--tech-line) 1px, transparent 1px);
        background-repeat: repeat, repeat;
        background-position: center, center;
        background-size: 38px 38px, 38px 38px;
    }

    .flow-section::after {
        display: none;
    }

    .product-detail-section {
        background-image: linear-gradient(180deg, #ffffff 0%, #f8f9fa 50%, #e8f4f8 100%);
        background-position: center;
        background-size: cover;
    }

    .sync-section::before {
        background-size: 180px 180px;
    }

    .overview-section::before {
        background-size: 100% 100%, 100% 100%, 20px 20px, 100% 100%;
    }
}