/* =================================================================
   product.css — 제품 상세 페이지 3개 공용 스타일
   - 불러오는 곳: product_air_sensing.php / product_level_sensing.php / product_flow_sensing.php
     (세 페이지의 <style> 블록이 똑같아서 하나로 합침)
   - 구성: 왼쪽 제품 설명 글 + 오른쪽 초록 원 테두리 안의 제품 사진
   - 원 그리기 효과: .product-image-wrapper에 fade-up 클래스가 있어
     화면에 들어오면 common.js가 .visible을 붙이고, 그때 원 선이 2초 동안 그려짐
   - PC는 왼쪽 반원만, 820px 이하 모바일은 원 전체를 그림
   ================================================================= */

/* ── 색상 · 글꼴 변수, 기본 body ── */
:root {
    --color-black: #111111;
    --color-dark-gray: #333333;
    --color-light-gray: #777777;
    --color-bg: #ffffff;
    --font-main: 'Noto Sans KR', sans-serif;
    --spacing-section: 100px;

    /* 브랜드 가이드라인 액센트 컬러 (연두색 테두리) */
    --color-accent-green: #70BD55;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-black);
    overflow-x: hidden;
}

/* ── 섹션 틀 (글 + 사진 가로 배치) ── */
.product-section {
    padding: var(--spacing-section) 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    position: relative;

    /* 푸터 및 레이아웃 침범 차단 */
    overflow: hidden;
    contain: paint;
}

.product-container {
    max-width: 1050px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2%;
    margin: 0 auto;
}

/* ── 왼쪽 글 영역 (제품명 · 상태 · 한글 소개) ── */
.product-text {
    flex: 1;
    padding-right: 20px;
    position: relative;
    z-index: 10;

}

.product-title {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #333;
}

.product-status {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-accent-green);
}

.product-subtitle-kor {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 10px 0;
    word-break: keep-all;
    color: #444;
    margin-bottom: 40px;
    margin-top: 15px;

}

/* =========================================
   오른쪽 사진 영역: 거대 원 테두리 + 원 모양으로 잘린 사진 (PC 기준)
   ========================================= */
.product-image-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 600px;
    z-index: 1;
}

/* 1000px 거대 크기 (PC에서는 절대 위치로 공중에 띄워 겹치게 만듦) */
.circle-and-mask {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1000px;
    height: 1000px;
    z-index: 1;
}

/* 화면을 탈출하는 거대 SVG 원 프레임 */
.giant-circle-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;

    /* PC: 원 선이 섹션 위(메뉴 아래)·아래(푸터 위) 경계에서 칼같이 잘리지 않도록
       위·아래 끝부분을 서서히 투명하게 처리 (사진은 별도 요소라 영향 없음) */
    -webkit-mask-image: linear-gradient(to bottom, transparent 9%, #000 24%, #000 76%, transparent 91%);
    mask-image: linear-gradient(to bottom, transparent 9%, #000 24%, #000 76%, transparent 91%);
}

.giant-circle {
    fill: none;
    stroke: var(--color-accent-green);
    stroke-width: 4;
    stroke-linecap: round;

    /* [PC 환경] 정확히 왼쪽 반원(1/2)만 그려지도록 세팅 */
    stroke-dasharray: 1558 3120;
    stroke-dashoffset: 1558;

    transform-origin: 50% 50%;
    transform: rotate(90deg);

    transition: stroke-dashoffset 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* SVG 원의 '안쪽 선'과 완벽하게 일치하는 클립 마스크 */
.giant-clip-mask {
    position: absolute;
    top: 0.6%;
    left: 0.6%;
    width: 98.8%;
    height: 98.8%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 마스크 내부 사진 설정 */
.giant-clip-mask img {
    width: 100%;
    max-width: 520px;
    height: auto;
    object-fit: cover;
}

/* 화면에 들어와 .visible이 붙으면 원 선이 그려짐 (common.js) */
.product-image-wrapper.visible .giant-circle {
    stroke-dashoffset: 0;
}

/* =========================================
   반응형 (1100px / 820px / 480px 이하)
   ========================================= */

/* 좁은 PC & 가로 태블릿 */
@media (max-width: 1100px) {
    .product-container {
        max-width: 900px;
        gap: 3%;
    }

    .product-title {
        font-size: 34px;
    }

    .product-image-wrapper {
        min-height: 500px;
    }

    .circle-and-mask {
        width: 850px;
        height: 850px;
    }

    .giant-clip-mask img {
        max-width: 450px;
    }
}

/* 모바일 & 태블릿 세로 (상하 배치 시점) */
@media (max-width: 820px) {
    .product-container {
        flex-direction: column;
        gap: 50px;
        /* 텍스트와 이미지 사이의 간격 설정 */
        text-align: center;
    }

    .product-text {
        padding-right: 0;
        order: 2;
    }

    .product-image-wrapper {
        order: 1;
        width: 100%;
        max-width: 450px;
        /* 모바일 환경에 맞는 크기 제한 */
        min-height: auto;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 모바일: 원을 일반 배치(relative)로 바꿔 글이 원 아래로 내려가게 함 */
    .circle-and-mask {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        left: auto;
        top: auto;
        transform: none;
    }

    /* 모바일: 원 전체가 화면 안에 보이므로 위·아래 흐림 처리 해제 */
    .giant-circle-svg {
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* 모바일: 반원 대신 원 전체를 그림 */
    .giant-circle {
        stroke-dasharray: 3120;
        stroke-dashoffset: 3120;
        transform: rotate(-90deg);
        /* 12시에서 시작해서 시계방향으로 꽉 채움 */
    }

    .giant-clip-mask {
        justify-content: center;
    }

    .giant-clip-mask img {
        width: 75%;
        max-width: none;
        position: relative;
        left: 0;
        /* 중앙 정렬 복구 */
    }
}

/* 작은 휴대폰 */
@media (max-width: 480px) {
    .product-title {
        font-size: 28px;
    }

    .product-subtitle-kor {
        font-size: 1.1rem;
    }
}