/* ========================Product CSS========================= */

/* 인트로 재생 중: 헤더 포함 화면 전체 덮기 + 스크롤 잠금 */
html.product-intro-playing,
html.product-intro-playing body {
    overflow: hidden !important;
    height: 100dvh !important;
}

html.product-intro-skip .product-main-title {
    display: none !important;
}


/* 페이지 전체 가로 스크롤 방지 (100vw/absolute 오버레이로 인한 overflow 방지) */
html,
body {
    overflow-x: hidden;
    overflow-y: hidden;
}

/* 세로 스크롤은 바디에서만 처리 */
body {
    overflow-y: auto;
    height: 100vh;
    /* base.css의 body padding-top은 스크롤 컨테이너 높이를 깎아 하단 공백을 만들 수 있어 제거 */
    padding-top: 0 !important;
    /* 스크롤은 유지하되, 트랙(배경)은 투명, thumb만 보이게 */
    scrollbar-width: none; /* Firefox */
    scrollbar-color: transparent transparent;
    -ms-overflow-style: none; /* IE/Edge */
}

/* WebKit 계열 */
body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* 헤더 오프셋은 스크롤 컨테이너(body) 대신 content(main)에서 처리 */
main {
    padding-top: var(--header-height);
}


/* ========================리우림이 css 코드 짜는 부분 시작========================= */

/* 히어로 섹션 페이드인 애니메이션 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 아래에서 위로 올라오는 페이드인 애니메이션 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 스크롤 아이콘 위아래 움직임 애니메이션 */
@keyframes scrollBounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

@keyframes scrollBounceMobile {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}

/* 마우스 휠 움직임 애니메이션 */
@keyframes mouseWheel {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(8px);
        opacity: 0.3;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 페이지 메인 타이틀 - 진입 시 등장 후 사라지는 인트로 */
.product-main-title {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: #ffffff;
    animation: productTitleIntro 2.8s ease-out forwards;
}

.product-main-title.product-main-title--done {
    pointer-events: none;
}

/* 인트로 재생 중 스크롤 방지 */
html:has(.product-main-title:not(.product-main-title--done)) {
    overflow: hidden;
}

/* 인트로 재생 중 Pro 텍스트(container) 숨김 */
html:has(.product-main-title:not(.product-main-title--done)) .hero-section .container {
    opacity: 0 !important;
    visibility: hidden !important;
}

@keyframes productTitleIntro {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }
    12% {
        opacity: 1;
        transform: scale(1.02);
    }
    18% {
        opacity: 1;
        transform: scale(1);
    }
    70% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.98);
    }
}

.product-main-tagline {
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.03em;
}

.product-main-tagline-accent {
    display: inline-block;
    font-size: 1.34em;
    font-weight: 900;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 히어로 섹션 */
.hero-section {
    position: relative;
    width: 100%;
    height: calc(60vh - var(--header-height));
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease;
}

/* 스크롤로 히어로가 보일 때 페이드 인 */
.hero-section.hero-section--inview {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-section {
        opacity: 1;
        transition: none;
    }
}

/* 히어로 이미지 배경 (좌우 롤링) */
.hero-image-bg {
    position: relative;
    width: 100%;
    height: 100%;
    animation: fadeIn 1s ease-in-out forwards;
    z-index: 1;
}

.hero-marquee {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    touch-action: pan-y; /* 세로 스크롤만 브라우저 처리, 가로 스와이프는 JS에서 제어 */
    /* 슬라이드가 붙어 보이지 않게, 아주 작은 간격으로 "분리" 느낌 주기 */
    --hero-marquee-gap: clamp(10px, 1.8vw, 18px);
    /* 투명도 애니메이션과 transform 전환: 반드시 동일 (JS가 이 값을 읽어 적용) */
    --hero-slide-duration: 2.3s;
    --hero-slide-easing: ease;
    background: #0b0f1a; /* gap이 보일 때 흰 배경 튐 방지 */
}

/* 슬라이드 이동(transform)과 같은 길이로 투명도 펄스 (JS에서 클래스 토글)
   - 0%~22%: opacity 1 유지
   - 22%~58%: 1 → 0 (전체 타임라인의 약 36%를 “내려가는” 구간으로 사용)
   - 58%~72%: 0 유지
   - 72%~100%: 0 → 1 */
@keyframes heroMarqueeSlideOpacity {
    0%,
    22% {
        opacity: 1;
    }
    58% {
        opacity: 0;
    }
    72% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.hero-marquee.hero-marquee--slide-opacity {
    animation: heroMarqueeSlideOpacity var(--hero-slide-duration) var(--hero-slide-easing) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .hero-marquee.hero-marquee--slide-opacity {
        animation: none;
    }
}

.hero-marquee-track {
    display: flex;
    width: fit-content;
    height: 100%;
    gap: var(--hero-marquee-gap);
    transition: transform 0.5s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.hero-marquee-track.hero-auto-roll {
    animation: heroRoll 25s linear infinite;
    transition: none;
}

.hero-marquee-slide {
    flex: 0 0 calc(100% - var(--hero-marquee-gap));
    width: calc(100% - var(--hero-marquee-gap));
    height: 100%;
    min-width: calc(100% - var(--hero-marquee-gap));
}

.hero-marquee-slide picture {
    display: block;
    width: 100%;
    height: 100%;
}
/* 슬라이드 폭은 gap만큼 좁지만, 이미지는 gap만큼 넓혀 뷰포트(마퀴) 오른쪽까지 꽉 채움 */
.hero-marquee-slide img,
.hero-marquee-slide video {
    width: calc(100% + var(--hero-marquee-gap));
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* motion3(클론 앞 슬라이드) 전용 크기 조절 */
.hero-marquee-slide[data-hero-slide="clone-last"] > .hero-marquee-video {
    width: 100%;
    max-width: none;
}

/* PC에서 motion3 세로 폭(높이) 확장 */
@media (min-width: 769px) {
    .hero-marquee-slide[data-hero-slide="clone-last"] > .hero-marquee-video {
        height: calc(100% + 8%);
        max-height: none;
        transform: translateY(-4%);
        transform-origin: center;
    }
}

.hero-section:hover .hero-marquee-track.hero-auto-roll {
    animation-play-state: paused;
}

/* 히어로 좌우 화살표 */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.hero-arrow:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.9);
}

.hero-arrow:active {
    transform: translateY(-50%) scale(0.96);
}

.hero-arrow-prev {
    left: 24px;
}

.hero-arrow-next {
    right: 24px;
}

.hero-arrow svg {
    display: block;
}

@keyframes heroRoll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* 히어로 섹션 내부 컨테이너 — Mini 오버레이(flex 세로 중앙)와 동일 높이 */
.hero-section .container {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    width: min(100%, 1200px);
    max-width: 1200px;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* 미니 히어로에서만 보이는 앱 목업 */
.hero-mockup {
    position: absolute;
    right: 2%;
    bottom: 3%;
    width: min(280px, 26vw);
    max-height: min(500px, calc(60vh - var(--header-height) - 40px));
    height: auto;
    object-fit: contain;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    pointer-events: none;
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.25));
}

.hero-section.hero-show-mockup .hero-mockup {
    opacity: 1; 
    visibility: visible;
    transform: translateY(0); 
    transition-delay: 0.12s, 0.12s, 0s; /* 더 빠르게 등장 */
}

/* 데스크: 목업 왼쪽으로 이동 */
@media (min-width: 769px) {
    .hero-mockup {
        right: 2%;
        transform: translateX(-15%) translateY(10px);
    }
    .hero-section.hero-show-mockup .hero-mockup {
        transform: translateX(-15%) translateY(0);
    }
}

/* 미니 히어로 래퍼 (텍스트 + 목업) */
.hero-mini-wrapper {
    position: absolute;
    inset: 0;
    z-index: 90;
    pointer-events: none;
}

/* 미니 히어로 중앙 텍스트 + 아이콘 오버레이 */
.hero-mini-overlay {
    
    position: absolute;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    pointer-events: none;
}

.hero-section.hero-show-mini-overlay .hero-mini-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0.12s, 0.12s, 0s; /* 더 빠르게 등장 */
}

.hero-mini-overlay-inner {
   
    text-align: center;
    color: #ffffff;
    max-width: 700px;
   
}

/* Xero1 Mini 랑 Xero1 Pro */
.hero-mini-brandline {
    display: flex;
    
    justify-content: center;
    gap: 14px;
    margin-bottom: 6px;
    letter-spacing: 0.03em;
}

/* 미니 오버레이에서 product-card-name 사용 (흰색 계열 4단계 그라데이션) */
.hero-mini-overlay .product-card-name {
    font-size: 62px;
    margin-bottom: 0;
    background: linear-gradient(90deg, #ffffff 0%, #f0f0f0 30%, #4facfe 70%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* 스마트폰 하나로 여는 출입 랑 발로 여는 자동문 */
.hero-mini-subheadline {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 0.005em;
    margin-top: 0;
    margin-bottom: 18px;
    line-height: 1.1;
}

/* foot.png가 아닌 슬라이드에서는 텍스트 숨김 */
.hero-section:not(.hero-show-text) .container {
    opacity: 0;
    visibility: hidden;
}

/* 프로 슬라이드 텍스트 - .container .hero-text로 구분 (hero-show-text 제거 시에도 검정 유지) */
.hero-section .container .hero-text.hero-mini-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-inline: auto;
}

.hero-section .container .hero-text .hero-mini-brandline {
    justify-content: center;
    width: 100%;
}

.hero-section .container .hero-text .product-card-name {
    font-size: 62px;
    margin-bottom: 0;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 30%, #ffffff 70%, #b9b9b9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-section .container .hero-text .hero-mini-subheadline {
    color: #ffffff;
}

/* 히어로 텍스트 - transition으로 Mini처럼 부드럽게 등장 (슬라이드 전환 시에도 재실행) */
.hero-section .container .hero-text {
    
    text-align: left;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.hero-section.hero-show-text .container .hero-text {
    opacity: 1;
    transform: translateY(0);
}
.hero-section:not(.hero-show-text) .container .hero-text {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* 스크롤 유도 아이콘 */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    color: #8494ae7d;
    opacity: 0;
    animation: fadeIn 1s ease-in-out 1.6s forwards, scrollBounce 2s ease-in-out 2.6s infinite;
    cursor: pointer;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.scroll-indicator:hover {
    opacity: 0.8;
    transform: translateX(-50%) translateY(-3px);
}

/* 마우스 아이콘 */
.mouse-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mouse-icon svg {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.mouse-wheel {
    animation: mouseWheel 1.5s ease-in-out infinite;
}

/* 스크롤 화살표 */
.scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}

.scroll-arrow svg {
    display: block;
}

/* 모바일 반응형 (768px 이하) */
@media (max-width: 768px) {
    /* 히어로 섹션 높이 조절 */
    .hero-section {
        height: 400px;       /* 모바일에서 히어로 이미지 영역 높이 통일 */
        min-height: 400px;
    }

    /* 히어로: overflow hidden 유지 (JS transform + 터치 스와이프로 제어, 네이티브 스크롤과 충돌 방지) */
    .hero-marquee {
        overflow: hidden;
    }

    .hero-marquee-track {
        animation: none;
    }

    /* 자동 롤링 클래스가 붙어도 모바일에서는 애니메이션 제거 */
    .hero-marquee-track.hero-auto-roll {
        animation: none;
    }

    /* 히어로 이미지 배경 */
    .hero-image-bg,
    .hero-marquee,
    .hero-marquee-track {
        width: 100%;
        height: 100%;
    }

    .hero-marquee-slide img,
    .hero-marquee-slide video {
        width: calc(100% + var(--hero-marquee-gap));
        max-width: none;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* 페이지 메인 타이틀 모바일 */
    .product-main-title {
        padding: 20px;
    }

    .product-main-tagline {
        font-size: 22px;
    }

    /* 히어로 텍스트 위치 조절 */
    .hero-section .container {
        
        top: 74%;
        margin-top: 20px;
        padding-inline: 16px;
    }

    /* 히어로 좌우 화살표 모바일 */
    .hero-arrow {
        width: 28px;
        height: 28px;
        z-index: 200;
    }
    .hero-arrow-prev {
        left: 10px;
    }
    .hero-arrow-next {
        right: 10px;
    }
    .hero-arrow svg {
        width: 16px;
        height: 16px;
    }

    /* 모바일: mini 텍스트를 Pro 텍스트(.hero-section .container)와 같은 위치로 정렬 */
    .hero-mini-wrapper {
        display: block;
        padding: 0;
    }

    .hero-mini-overlay {
        position: absolute;
        inset: auto;
        top: 74%;
        left: 50%;
        right: auto;
        width: min(100%, 1200px);
        max-width: 1200px;
        box-sizing: border-box;
        padding: 0 16px;
        margin-top: 20px;
        transform: translate(-50%, calc(-50% + 6px));
        order: initial;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .hero-section.hero-show-mini-overlay .hero-mini-overlay {
        transform: translate(-50%, -50%);
    }

    .hero-mini-overlay .hero-mini-overlay-inner {
        max-width: 100%;
        text-align: center;
        margin-inline: auto;
        width: 100%;
    }

    .hero-mini-overlay .hero-mini-brandline {
        justify-content: center;
    }

    .hero-mockup-wrap {
        order: 2;
        position: relative;
        width: min(130px, 35vw);
        max-height: 240px;
        flex-shrink: 0;
    }

    .hero-mockup-wrap .hero-mockup {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        max-height: 240px;
        object-fit: contain;
        display: block;
    }

    .hero-section.hero-show-mockup .hero-mockup {
        display: block;
    }

    /* 모바일: Mini/Pro 텍스트 크기 완전 통일 */
    .hero-mini-overlay .product-card-name,
    .hero-section .container .hero-text .product-card-name {
        font-size: 32px;
    }

    .hero-mini-overlay .hero-mini-brandline,
    .hero-section .container .hero-text .hero-mini-brandline {
        margin-bottom: 3px;
    }

    .hero-mini-overlay .hero-mini-subheadline,
    .hero-section .container .hero-text .hero-mini-subheadline {
        font-size: 20px;
        margin-bottom: 0;
    }

    /* 가장 스마트한 열쇠가 됩니다 */
    .hero-mini-subheadline {
        font-size: 20px;
        margin-bottom: 30px;
    }

    /* 스크롤 아이콘 크기 조절 */
    .scroll-indicator {
        bottom: 20px;
    }

    .mouse-icon svg {
        width: 24px;
        height: 38px;
    }

    .scroll-arrow svg {
        width: 16px;
        height: 16px;
    }
}

/* 앱/작은 모바일에서 전체 크기 축소 (앱 WebView에서 너무 크게 보이는 현상 방지) */
@media (max-width: 280px) {
    html {
        font-size: 14px;
    }

    .hero-section {
        height: 400px;   /* 극소 화면에서도 히어로 이미지 영역 높이 동일하게 유지 */
        min-height: 400px;
    }

    .hero-section .container {
        top: 71%;
    }

    .hero-mini-overlay {
        top: 71%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .hero-mini-overlay .product-card-name {
        font-size: 24px;
    }

    .hero-mini-overlay .hero-mini-subheadline {
        font-size: 16px;
    }

    .hero-mockup-wrap {
        width: min(110px, 32vw);
        max-height: 200px;
    }

    .hero-mockup-wrap .hero-mockup {
        max-height: 200px;
    }

    .hero-section .container .hero-text .product-card-name {
        font-size: 28px;
    }

    .hero-mini-subheadline {
        font-size: 17px;
    }

    .hero-arrow {
        width: 24px;
        height: 24px;
    }
    .hero-arrow svg {
        width: 13px;
        height: 13px;
    }

    .hero-arrow-prev {
        left: 8px;
    }

    .hero-arrow-next {
        right: 8px;
    }

    .sub-nav-tab {
        padding: 10px 16px;
        font-size: 14px;
    }

    .jungmun-text-box {
        width: 180px;
        height: 88px;
        padding: 20px 24px;
    }

    .jungmun-text-line1 {
        font-size: 0.9rem;
    }

    .jungmun-text-line2 {
        font-size: 1.15rem;
    }

    .situation-title {
        font-size: 1.35rem;
    }

    .situation-subtitle {
        font-size: 0.9rem;
    }

    .situation-desc {
        font-size: 0.85rem;
    }

    .category-title {
        font-size: 24px;
    }
}

/* Scroll Snap 섹션 */
html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

body {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.snap-scroll-section {
    width: 100%;
    position: relative;
}

.snap-container {
    width: 100%;
}

.snap-slide {
    width: 100%;
    height: calc(100vh - var(--header-height));
    min-height: calc(100vh - var(--header-height));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* 히어로 섹션과 다른 섹션은 스냅에서 제외 */
.hero-section {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

.sub-navigation-section,
.category-section {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

.snap-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

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

.snap-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 2;
}

.snap-content {
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: center;
    color: #ffffff;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-in-out 0.5s forwards;
}

.snap-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.snap-description {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0.95;
}

/* 서브 네비게이션 섹션 (PC: 원래 스타일) */
.sub-navigation-section {
    padding: 20px 0;
    position: sticky;
    top: var(--header-height);
    z-index: 50;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.sub-nav-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sub-nav-scroll-btn {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    color: #667eea;
    cursor: pointer;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 10;
}

.sub-nav-scroll-btn:hover {
    background: #667eea;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.sub-nav-scroll-btn:active {
    transform: scale(0.95);
}

.sub-nav-scroll-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 토글 버튼 (데스크톱에서는 숨김) */
.sub-nav-toggle {
    display: none;
}

.sub-nav-tabs {
    max-width: 1000px;
    margin: 0 auto; /* 가운데 정렬 */
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border-radius: 80px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
}

.sub-nav-tab {
    padding: 25px 40px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
    border-right: 1px solid #e5e7eb;
}

.sub-nav-tab:last-child {
    border-right: none;
}

.sub-nav-tab:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.sub-nav-tab.active {
    color: #667eea;
    background: transparent;
    font-weight: 600;
}

/* 서브 네비가 sticky로 고정된 구간: 탭 배경 파란색 */
.sub-navigation-section.is-sticky .sub-nav-tabs {
    background: #9badff;
}
.sub-navigation-section.is-sticky .sub-nav-tab {
    color: #ffffff;  /* 선택 안된 텍스트 색싱 */
    border-right-color: rgb(255, 255, 255);
}
.sub-navigation-section.is-sticky .sub-nav-tab:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}
.sub-navigation-section.is-sticky .sub-nav-tab.active {
    background: rgba(255, 255, 255, 0.649);
    color: #14005a;
    font-weight: 600;
}

/* 카테고리 섹션 */
.category-section {
    --category-subheading-gap: 10px; /* 주거용↔자동형 중문, 상가입구↔통로 자동문 간격 통일 */
    display: none;
    padding: 60px 0;
    min-height: 500px;
    scroll-margin-top: 100px; /* 서브메뉴 클릭 시 첫 단락으로 이동 시 고정 헤더 여백 (브라우저·앱 동일) */
}

.category-section.active {
    display: block;
}

.apartment-section {
    display: block;
}

.category-title {
    border: 0px solid red;
    font-size: 36px;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 0;
    text-align: center;
}

.category-content {
    padding: 0 0 20px 0; /* 상단 패딩 제거 → situation-header margin-top으로 통일 */
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    /* 가로 스크롤 방지: main에만 적용 (html/body에 적용 시 헤더가 사라지는 이슈 방지) */
    main {
        overflow-x: clip;
        width: 100%;
        max-width: 100vw;
    }

    /* Scroll Snap 섹션 모바일 */
    .snap-scroll-section {
        height: 100vh;
    }

    .snap-title {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .snap-description {
        font-size: 16px;
        padding: 0 20px;
    }

    /* 서브 네비게이션 모바일 (헤더에 여백 없이 붙음) */
    .sub-navigation-section {
        padding: 10px;
        margin: 0;
        top: var(--header-height);
        border-top: none;
    }
    
    /* 모바일 - 서브 네비게이션바 */ 
    .sub-navigation-section > *:first-child,
    .sub-navigation-section .container,
    .sub-navigation-section .sub-nav-tabs {
        margin-top: 10 ;
        padding-top: 10 ;
    }

    /* 서브 네비 바로 위 섹션 하단 여백 제거 */
    .jungmun-section-reverse {
        padding-bottom: 0 ;
    }

    .sub-nav-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sub-nav-scroll-btn {
        display: flex;
    }

    .sub-navigation-section .container {
        overflow: visible;
    }

    .sub-nav-tabs {
        margin-top: 0;
        gap: 2px;
        padding: 4px;
        flex-wrap: nowrap;
        border-radius: 80px;
        justify-content: space-evenly;
        width: 100%;
        background: #f5f5f5;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.05);
        overflow: visible;
        position: relative;
    }

    .sub-nav-tab {
        padding: 10px 4px;
        font-size: clamp(11px, 2.8vw, 14px);
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: none;
        border-radius: 76px;
        background: transparent;
        color: #6b7280;
        transition: all 0.3s ease;
    }

    .sub-nav-tab:last-child {
        border-right: none;
    }

    .sub-nav-tab:hover {
        background: rgba(255, 255, 255, 0.8);
        color: #667eea;
    }

    .sub-nav-tab.active {
        background: #ffffff;
        color: #667eea;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .sub-navigation-section.is-sticky .sub-nav-tabs {
        background: #667eea;
    }
    .sub-navigation-section.is-sticky .sub-nav-tab {
        color: #ffffff;
    }
    .sub-navigation-section.is-sticky .sub-nav-tab:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
    }
    .sub-navigation-section.is-sticky .sub-nav-tab.active {
        background: rgba(255, 255, 255, 0.3);
        color: #ffffff;
    }

    .category-section {
        --category-subheading-gap: 18px; /* PC와 동일: 주거용↔자동형, 상가입구↔통로 자동문 */
        padding: 40px 0;
    }

    .category-title {
        font-size: 28px;
        margin-bottom: 0;
    }

    .category-content {
        padding: 0 0 20px 0;
    }

    .situation-header {
        margin-top: var(--category-subheading-gap, 20px);
        margin-bottom: 40px;
    }
}



/* 중문 시스템 마키 섹션 */
.jungmun-carousel-section {
    
    padding: 80px 20px;
    background: #ffffff;
}

.jungmun-layout-wrapper {
    border: 0px solid red;
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 1200px;
    margin: 15px auto;
    position: relative;
}

.jungmun-text-overlay {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.jungmun-text-box {
    background: #06002a;
    padding: 40px 50px;
    border-radius: 3px;
    min-width: 320px;
    height: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.jungmun-text-line1 {
    border:0px solid red;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.4;
    margin-top: 100px;
}

.jungmun-text-line2 {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 200px;
}

.jungmun-marquee-wrapper {
    position: relative;
    flex: 1;
    overflow: hidden;
    border-radius: 16px;
    margin-left: -60px;
    padding-left: 60px;
}

.jungmun-section-reverse {
    margin-top: 60px;
}

.jungmun-section-reverse .jungmun-layout-wrapper {
    flex-direction: row-reverse;
}

.jungmun-section-reverse .jungmun-marquee-wrapper {
    margin-left: 0;
    margin-right: -60px;
    padding-left: 0;
    padding-right: 60px;
}

.jungmun-section-reverse .jungmun-marquee {
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.jungmun-section-reverse .jungmun-marquee-content {
    animation: jungmunMarquee 20s linear infinite;
}

.jungmun-section-reverse .jungmun-marquee-content.pause {
    animation-play-state: paused;
}

.jungmun-marquee {
    
    width: 100%;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    transform: translateZ(0);
}

.jungmun-marquee-content {
   

    display: flex;
    width: fit-content;
    animation: jungmunMarquee 20s linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.jungmun-marquee-content.pause {
    animation-play-state: paused;
}

.jungmun-slide {
    flex: 0 0 auto;
    width: 600px;
    margin-right: 30px;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.jungmun-slide img {
    
    width: 100%;
    height: 400px;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    transform: translateZ(0);
}

/* 제품3 이미지도 제품1,2와 동일하게 */
.jungmun-section-reverse .jungmun-slide img {
    
    object-position: center;
}

.jungmun-carousel-nav {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
    z-index: 20;
}

.jungmun-nav-btn {
    
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #333;
}

.jungmun-nav-btn:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: scale(1.1);
}

.jungmun-nav-btn:active {
    transform: scale(0.95);
}

@keyframes jungmunMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes jungmunMarqueeReverse {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* 모바일 반응형 - 중문 마키 */
@media (max-width: 768px) {
    .jungmun-carousel-section {
        padding: 60px 15px;
    }

    .jungmun-layout-wrapper {
        flex-direction: column;
        gap: 20px;
        min-height: auto;
    }

    .jungmun-section-reverse .jungmun-layout-wrapper {
        flex-direction: column;
        min-height: auto;
    }

    .jungmun-text-overlay {
        position: static;
        order: 2;
        width: 100%;
    }

    .jungmun-section-reverse .jungmun-text-overlay {
        order: 2;
    }

    .jungmun-marquee-wrapper {
        order: 1;
    }

    .jungmun-section-reverse .jungmun-marquee-wrapper {
        order: 1;
    }

    .jungmun-text-box {
        margin: 0;
        padding: 20px 24px;
        min-width: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .jungmun-text-line1 {
        font-size: 1rem;
        margin-top: 0;
        margin-bottom: 8px;
    }

    .jungmun-text-line2 {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    .jungmun-marquee-wrapper {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        border-radius: 12px;
        position: relative;
        z-index: 1;
        width: 100%;
    }

    .jungmun-section-reverse .jungmun-marquee-wrapper {
        margin-right: 0;
        padding-right: 0;
        margin-left: 0;
        padding-left: 0;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        position: relative;
        z-index: 1;
    }

    /* 모바일에서 마스크 제거하여 모든 이미지가 보이도록 */
    .jungmun-marquee {
        mask-image: none;
        -webkit-mask-image: none;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

    .jungmun-section-reverse .jungmun-marquee {
        mask-image: none;
        -webkit-mask-image: none;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

    .jungmun-marquee-wrapper {
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

    .jungmun-slide {
        width: 300px;
        margin-right: 20px;
        flex-shrink: 0;
    }

    .jungmun-slide img {
        height: 250px;
        border-radius: 5px;
        display: block;
        width: 100%;
    }

    .jungmun-marquee-content {
        animation: jungmunMarquee 8s linear infinite;
        display: flex;
        width: fit-content;
    }

    /* 모바일에서 제품3도 제품1,2와 동일한 애니메이션 사용 */
    .jungmun-section-reverse .jungmun-marquee-content {
        animation: jungmunMarquee 8s linear infinite;
    }

    .jungmun-carousel-nav {
        bottom: 15px;
        right: 15px;
        gap: 10px;
    }

    .jungmun-nav-btn {
        width: 40px;
        height: 40px;
    }

    .jungmun-nav-btn svg {
        width: 20px;
        height: 20px;
    }
}
/* 주거용 공간 섹션 스타일 */
.situation-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

.situation-header {
    margin-top: var(--category-subheading-gap, 24px);
    margin-bottom: 40px;
    text-align: center;
}

.situation-header h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.situation-question-banner {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0;
}

.situation-question-banner h2 {
    border: 0px solid red;
    color: #1b1b1b;
    font-weight: 700;
    font-size: 1.6rem;
    white-space: nowrap;
}

.situation-question-banner h2 .mobile-br {
    display: none;
}



/* 첫 번째 섹션 (Situation 1) 스타일 - 고급 디자인 */
.situation-wrapper .situation-question-banner {
    margin-top: 60px;
    margin-bottom: 50px;
    padding: 45px 50px;
    background: linear-gradient(135deg, #e8f1ff 0%, rgb(255, 255, 255) 50%, #aac9ff 100%);
    border: none;
    border-radius: 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.15), 
                0 0 0 1px rgba(102, 126, 234, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.situation-wrapper .situation-question-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #667eea 0%, #8b9aff 50%, #667eea 100%);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.situation-wrapper .situation-question-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
    animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.situation-wrapper .situation-question-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.2), 
                0 0 0 1px rgba(102, 126, 234, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.situation-wrapper .situation-question-banner h2 {
    color: #667eea;
    font-size: 2rem;
    margin-bottom: 15px;
    white-space: normal;
    font-weight: 700;
    position: relative;
    z-index: 1;
    background: #2e23aa;  /* Situation 1 텍스트 글씨색 수정 코드 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 10px rgba(102, 126, 234, 0.1);
}

.situation-wrapper .situation-question-banner p {
    color: #202020;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    position: relative;
    z-index: 1;
    
}

.situation-problem-section {
    background: #ffffff;
    padding: 0;
    width: 100%;
    margin-top: -10px;
    margin-bottom: 0;
}

.problem-content-wrapper {
    background: #ffffff;
    padding: 10px 0;
}

/* 불편한 상황 - 내부 레이아웃 */
.problem-images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1000px;
    margin: 40px auto 0;
    width: 100%;
    padding: 0;
}

.problem-image-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px;
    background: #fafbff;
    border-radius: 16px;
    border: 1px solid #e8ecf7;
    transition: all 0.3s ease;
}

.problem-image-item:hover {
    border-color: #c7d2fe;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
    transform: translateY(-2px);
}

.problem-image-frame {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.problem-image-frame img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.problem-image-caption {
    width: 100%;
    padding: 14px 12px;
    background: #ffffff;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.problem-image-caption p {
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.55;
    color: #475569;
    font-weight: 500;
}

.infrared-limitation-section {
    width: 100%;
    padding: 10px 0;
    margin-bottom: 50px;
    background: #ffffff;
}

/* 적외선 센서를 달아도 해결되지 않는 문제 // 적외선 센서는 중문 안 쪽 방향에 설치 할 수 없으나 */ 
.infrared-limitation-section h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #262c4b;
    margin: 30px auto;
    text-align: center;
}

.infrared-limitation-section h2.zerone-highlight {
    color: #648AFF;
    font-weight: 600;
}
/* 자동문 / PRO / 풋패드 이미지 - 단독 블록 */
.solution-text-img {
    display: block;
    margin-top: 24px;
}

.solution-text-img:first-of-type {
    margin-top: 32px;
}

.solution-text-img img {
    /* border: 2px solid red; */
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.solution-text-img--door img {
    max-width: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(40px);
}

/* PRO 이미지: door 이미지 하단에 겹치기 */
.solution-text-img--pro {
    margin-top: -160px;
    position: relative;
    z-index: 1;
}

.solution-text-img--pro img {
    max-width: 170px;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(100px);
}

.solution-text-img--footpad img {
    max-width: 320px;
}

.infrared-limitation-text-group {
    text-align: center;
    padding: 32px 20px 0;
}

.infrared-compare-box {
    max-width: 580px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    flex-wrap: wrap;
}

.infrared-compare-limitation {
    font-size: 1.3rem;
    font-weight: 600;
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

.infrared-compare-arrow {
    font-size: 1.25rem;
    font-weight: 600;
    color: #94a3b8;
    flex-shrink: 0;
}

.infrared-compare-zerone {
    font-size: 1.25rem;
    font-weight: 700;
    color: #667eea;
    margin: 0;
}

.infrared-limitation-section h2.zerone-highlight-box {
    color: #648AFF;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(100, 139, 255, 0.1) 0%, rgba(100, 139, 255, 0.15) 100%);
    border: 2px solid #648AFF;
    border-radius: 12px;
    padding: 20px 30px;
    margin: 15px auto;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(100, 139, 255, 0.2),
                0 0 0 1px rgba(100, 139, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.infrared-limitation-section h2.zerone-highlight-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.infrared-limitation-section > p {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    color: #181818;
    margin: 20px auto;
}

.infrared-limitation-section h2 .mobile-br {
    display: none;
}


/* 모바일 띄어쓰기 추가 하는 곳 */ 
.infrared-limitation-section > p .mobile-br,
.infrared-compare-limitation .mobile-br,
.situation-desc .mobile-br {
    display: none;
}

/* 적외선 센서 한계 - 내부 레이아웃 */
.infrared-limitation-content {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    padding: 40px 20px 0;
}

.infrared-limitation-image {
    max-width: 100%;
}

.infrared-image-frame {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
}

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

.infrared-limitation-texts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.infrared-limitation-text-box {

    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 24px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.infrared-limitation-text-box:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.infrared-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    color: #d97706;
    border-radius: 8px;
    font-size: 0.9rem;
}

.infrared-limitation-text-box p {
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.6;
    color: #334155;
    flex: 1;
}

/* 솔루션 제안 문구 (이러한 상황에 따라...) */
.solution-intro {
    padding: 40px 24px 32px;
    text-align: center;
}

.solution-intro-word {
    max-width: 720px;
    margin: 0 auto;
}

.solution-intro-word h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.6;
    margin: 0;
}

/* 제로원 해결 - 내부 레이아웃 (주거용·요양원 배경박스 너비 동일: 1200px) */
.solution-intro-section {
    background: #141E3D;
    padding: 48px 24px 48px;
    text-align: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* 요양원: situation2-section(1000px) 안에 있어 배경박스가 좁아지므로, 주거용과 동일하게 1200px 너비로 확장 */
.situation2-section .solution-intro-section {
    width: 100vw;
    max-width: 1200px;
    margin-left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.solution-arrow {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    color: #94a3b8;
}

.solution-arrow svg {
    width: 32px;
    height: 32px;
}

.solution-text {
    color: #ffffff;
}

.solution-text p {
    font-size: 1.5rem;
    font-weight: 300;
    margin: 4px 0;
    color: #e2e8f0;
}

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

.solution-text p.highlight {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(to right, #60a5fa 0%, #a5b4fc 50%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 8px;
}

.solution-image-section {
    
    background: #141E3D;
    padding: 0 40px 40px;
    text-align: center;
    margin-top: 0;
}

.solution-image-section video {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* 발로 여는 편리함 섹션 파란 배경 */  
.situation-highlight {
    border: 0px solid red;
    text-align: center;
    background: #141E3D;
    padding: 28px 24px 48px;
    position: relative;
}

.situation-highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 600px;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.situation-highlight p {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    background: linear-gradient(to right, #0e86ff 10%, #e8ecff 40%, #81c0ff 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 섹션 구분선 - 고급 디자인 */
.situation-section-divider {
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(102, 126, 234, 0.1) 30%, 
        rgba(102, 126, 234, 0.3) 50%, 
        rgba(102, 126, 234, 0.1) 70%, 
        transparent 100%);
    margin: 80px 0;
    position: relative;
    overflow: visible;
    opacity: 0;
    animation: fadeIn 1s ease-out 0.6s forwards;
}

.situation-section-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #8b9aff 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4),
                0 0 40px rgba(102, 126, 234, 0.2),
                inset 0 2px 10px rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    animation: dividerPulse 3s ease-in-out infinite;
}

@keyframes dividerPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.4),
                    0 0 40px rgba(102, 126, 234, 0.2),
                    inset 0 2px 10px rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(102, 126, 234, 0.6),
                    0 0 60px rgba(102, 126, 234, 0.3),
                    inset 0 2px 10px rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.situation-section-divider::after {
    content: '◆';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 16px;
    z-index: 3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: dividerRotate 4s linear infinite;
}

@keyframes dividerRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.situation-dark-background {
    margin-top: 0;
    margin-bottom: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    padding: 80px 0 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.situation-dark-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(to right, 
        transparent 0%, 
        #667eea 20%, 
        #8b9aff 50%, 
        #667eea 80%, 
        transparent 100%);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.situation-dark-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 10%, rgba(102, 126, 234, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 90%, rgba(139, 154, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.situation-dark-background .situation-question-banner {
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 45px 50px;
    background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 50%, #f8faff 100%);
    border: none;
    border-radius: 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.15), 
                0 0 0 1px rgba(102, 126, 234, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.situation-dark-background .situation-question-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #667eea 0%, #8b9aff 50%, #667eea 100%);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.situation-dark-background .situation-question-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
    animation: pulseGlow 4s ease-in-out infinite;
}

.situation-dark-background .situation-question-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.2), 
                0 0 0 1px rgba(102, 126, 234, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.situation-dark-background .situation-question-banner h2 {
    color: #667eea;
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #667eea 0%, #8b9aff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 10px rgba(102, 126, 234, 0.1);
}

.situation-dark-background .situation-question-banner p {
    color: #2d3748;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.situation-dark-background .situation-question-banner p .mobile-br {
    display: none;
}

/* 상황 2 - 내부 레이아웃 */
.situation2-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 64px 24px 80px;
    position: relative;
}

.situation2-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 400px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #667eea, #8b9aff, #667eea, transparent);
    border-radius: 0 0 4px 4px;
}

/* 상황1, 상황3, 상황4, 상황5: 파란 라인 제거 */
.situation1-section.situation2-section::before,
.situation4-section.situation2-section::before,
.situation5-section.situation2-section::before {
    display: none;
}

/* 상황1, 상황3, 상황4, 상황5: 하단 여백 없이 같은 라인 정렬 */
.situation1-section.situation2-section,
.situation4-section.situation2-section,
.situation5-section.situation2-section {
    padding-bottom: 0;
}

/* 상황5: 요양원 위험 상황 */
.situation5-risks-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #334155;
    text-align: center;
    margin: 0 0 20px;
}

.situation5-risks {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-bottom: 48px;
}

.situation5-risk-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 50px 16px;
    background: #fff6ed;
    border-radius: 12px;
    border: 1px solid #fed7aa;
    transition: all 0.2s ease;
}

.situation5-risk-item:hover {
    background: #fff4e5;
    border-color: #fdba74;
}

.situation5-risk-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    color: #d97706;
    border-radius: 8px;
    font-size: 0.9rem;
}

.situation5-risk-item p {
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.6;
    color: #334155;
}

/* 자동문에 제로원을 더하다. 솔루션 소개 섹션 - 고급 비주얼 + 애니메이션 */
.zeroone-add-section {
    margin: 0 0 32px;
    position: relative;
    overflow: hidden;
}

.zeroone-add-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(102, 126, 234, 0.6) 20%, rgba(139, 154, 255, 0.8) 50%, rgba(102, 126, 234, 0.6) 80%, transparent 100%);
    opacity: 0;
    animation: zerooneLineIn 0.8s ease-out 0.2s forwards;
}

@keyframes zerooneLineIn {
    from {
        opacity: 0;
        transform: scaleX(0);
        transform-origin: center;
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

.zeroone-add-section-inner {
    position: relative;
    z-index: 1;
}

/* 화살표 부드러운 움직임 */
.zeroone-arrow {
    opacity: 0;
    animation: zerooneArrowFloat 1s ease-out 0.1s forwards;
}

@keyframes zerooneArrowFloat {
    0% {
        opacity: 0;
        transform: translateY(-12px);
    }
    60% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.zeroone-arrow svg {
    animation: zerooneArrowPulse 2.5s ease-in-out 1.2s infinite;
}

@keyframes zerooneArrowPulse {
    0%, 100% { opacity: 0.85; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(4px); }
}

/* 텍스트·콘텐츠 순차 등장 */
.zeroone-animate-item {
    opacity: 0;
    animation: fadeInUp 0.7s ease-out forwards;
}

.zeroone-add-section .zeroone-add-headline.zeroone-animate-item {
    animation-delay: 0.25s;
}

.zeroone-add-section .highlight.zeroone-animate-item {
    animation-delay: 0.4s;
}

.zeroone-add-section .zeroone-add-content.zeroone-animate-item {
    animation-delay: 0.55s;
}

.zeroone-add-section .zeroone-add-headline {
    font-size: 1.6rem;
    font-weight: 500;
    color: #f1f5f9;
    margin: 0 0 8px;
}

.zeroone-add-content {
    margin-top: 28px;
    text-align: left;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    padding: 28px 32px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}

.zeroone-add-content:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-color: rgba(102, 126, 234, 0.35);
}

.zeroone-add-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #cbd5e1;
    margin: 0 0 14px;
}

.zeroone-add-list {
    margin: 0;
    padding-left: 1.35rem;
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.75;
    list-style: disc;
}

.zeroone-add-list li {
    margin-bottom: 10px;
    position: relative;
}

.zeroone-add-list li:last-child {
    margin-bottom: 0;
}

.situation5-solutions-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    margin: 0 0 20px;
}

/* 제로원을 요양시설에 설치하면 좋은 이점 - 블록 + 애니메이션 */
.care-benefits-section {
    margin-top: 48px;
    padding: 0 0 40px;
}

/* solution-intro-section(진한 배경) 안에 있을 때 제목 색상 */
.zeroone-add-section .care-benefits-title {
    color: #a5b4fc;
}

.care-benefits-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #667eea;
    text-align: center;
    margin: 0 0 32px;
    opacity: 0;
    animation: fadeInUp 0.7s ease-out 0.1s forwards;
}

.care-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.care-benefit-block {
    padding: 28px 24px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.care-benefit-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
}

.care-benefit-block--1 { animation-delay: 0.2s; }
.care-benefit-block--2 { animation-delay: 0.35s; }
.care-benefit-block--3 { animation-delay: 0.5s; }
.care-benefit-block--4 { animation-delay: 0.65s; }

.care-benefit-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(139, 154, 255, 0.08) 100%);
    border-radius: 14px;
    color: #667eea;
    margin-bottom: 16px;
}

.care-benefit-icon svg {
    width: 28px;
    height: 28px;
}

.care-benefit-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px;
    line-height: 1.3;
}

.care-benefit-desc {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* 상황1: 상단 여백 감소 (헤더 margin-top + 섹션 padding-top 축소) */
.situation1-section.situation2-section {
    padding-top: 32px;
}

/* 상황 공통 헤더 (1,2,3) */
.situation-header-unified {
    text-align: center;
}

.situation1-header { margin-top: 0; margin-bottom: 56px; }
.situation2-header,
.situation4-header,
.situation5-header { margin-bottom: 56px; }
.situation3-header { margin-bottom: 48px; }

.situation-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 16px;
    padding: 6px 14px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 20px;
}

.situation-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: #667eea;
    margin: 0 0 12px;
}

.situation-subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    color: #334155;
    margin: 20px 0 30px;
}

/* 질문 박스 - 이미지 바로 위 */
.situation-question-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto 32px;
    padding: 20px 28px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    border-top: 4px solid #667eea;
}

.situation-question-box .question-icon {
    flex-shrink: 0;
    margin-right: 0;
}

.situation-question-box .situation-subtitle {
   
    font-size: 1.15rem;
    font-weight: 500;
    color: #334155;
}

.question-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    vertical-align: middle;
    color: #667eea;
}

.question-icon svg {
    width: 20px;
    height: 20px;
}

.situation-desc {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

.situation-desc strong {
    color: #667eea;
}

.situation2-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.situation2-feature-item {
    padding: 32px 24px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e8ecf7;
    text-align: center;
    transition: all 0.3s ease;
}

.situation2-feature-item:hover {
    border-color: #c7d2fe;
    box-shadow: 0 8px 28px rgba(102, 126, 234, 0.12);
    transform: translateY(-3px);
}

.situation2-feature-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #667eea;
    border-radius: 14px;
}

.situation2-feature-icon svg {
    width: 28px;
    height: 28px;
}

.situation2-feature-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px;
}

.situation2-feature-item p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* 상황1: 이미지가 들어간 특징 박스 */
.situation1-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.situation1-feature-item .situation-feature-image {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
}

.situation1-feature-item .situation-feature-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 80% center; /* 오른쪽 부분이 더 보이도록 약간 이동 */
    display: block;
}

.situation-grid-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

.situation-before-vertical {
    padding: 60px 40px 0;
    background-color: #ffffff;
    margin-bottom: 80px;
}

.situation-image-container {
    margin-bottom: 20px;
    height: 400px;
    overflow: hidden;
    display: flex;
}

.situation-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* sit-3: 이미지 + 오버레이 텍스트 (상가/매장 입구 Before) */
.sit-3 {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.sit-3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sit-3 .situation-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    margin: 0;
    padding: 15px 28px;
    border-radius: 4px;
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 500;
}

.sit-3 .situation-text-overlay.gray {
    background: rgba(60, 60, 60, 0.75);
    color: #f5f5f5;
}

.situation-arrow-vertical {
    margin: 0 auto;
    width: 100%;
    background-color: #141E3D;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    color: #ffffff;
}

.situation-after-vertical {
    padding: 60px 40px;
    /* background-color: #efefef; */
    width: 100%;
}

/* 상황 3: 통로에 설치된 자동문 (이미지 레이아웃) */
.situation3-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px 0;
}

/* 상황 3 헤더는 situation-header-unified 사용 */

/* 적외선 vs 제로원 비교 */
.situation3-comparison-wrap {
    margin-bottom: 48px;
}

.situation3-comparison-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #334155;
    text-align: center;
    margin: 0 0 24px;
    letter-spacing: -0.03em;
}

.situation3-comparison {
    display: flex;
    align-items: stretch;
    gap: 32px;
    padding: 8px 0;
}

.situation3-before,
.situation3-after {
    flex: 1;
    padding: 28px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 적외선: 잘못된 센서 느낌 - 흐릿, 부정적, 경고색 */
.situation3-before {
    background: linear-gradient(180deg, #fef2f2 0%, #fff5f5 100%);
    border: 2px solid #fecaca;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.situation3-before:hover {
    transform: scale(0.98);
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.06);
}

/* 제로원: 옳은 방식 - 선명, 긍정적, 강조 */
.situation3-after {
    background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 2px solid #86efac;
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.15), 0 0 0 1px rgba(34, 197, 94, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.situation3-after:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 40px rgba(34, 197, 94, 0.2), 0 0 0 1px rgba(34, 197, 94, 0.15);
}

.situation3-panel-label {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.situation3-before .situation3-panel-label::before,
.situation3-panel-label--wrong::before {
    content: '✕';
    color: #ef4444;
    font-size: 1rem;
}

.situation3-before .situation3-panel-label,
.situation3-panel-label--wrong {
    color: #b91c1c;
}

.situation3-after .situation3-panel-label::before,
.situation3-panel-label--right::before {
    content: '✓';
    color: #22c55e;
    font-size: 1.1rem;
    font-weight: 800;
}

.situation3-after .situation3-panel-label,
.situation3-panel-label--right {
    color: #15803d;
}

.situation3-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.situation3-before .situation3-panel-title {
    color: #991b1b;
}

.situation3-after .situation3-panel-title {
    color: #166534;
}

.situation3-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 700;
}

.situation3-icon svg {
    width: 20px;
    height: 20px;
}

.situation3-icon.infrared {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    color: #b91c1c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.situation3-icon.fp {
    background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
    color: #15803d;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.situation3-image-wrap {
    width: 100%;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.situation3-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 복도.jpg: 위쪽이 더 보이도록 정렬 */
.situation3-before .situation3-image-wrap img {
    object-position: center top;
}

/* 적외선: 흐릿·탈색 느낌 (잘못된 방식) */
.situation3-before .situation3-image-wrap {
    filter: saturate(0.4) brightness(0.92) contrast(0.95);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
}

/* 제로원: 선명·생동감 (옳은 방식) */
.situation3-after .situation3-image-wrap {
    filter: saturate(1.1) brightness(1.02);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1);
}

.situation3-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
}

.situation3-bullets li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #991b1b;
}

.situation3-bullets-2 li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #166534;
}

/* 적외선: ✕ (문제점) */
.situation3-bullets li::before {
    content: '✕';
    position: absolute;
    left: 0;
    font-weight: 800;
    color: #ef4444;
}

/* 제로원: ✓ (해결) */
.situation3-bullets-2 li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 800;
    color: #22c55e;
}

.situation3-before .situation3-bullets li::before {
    color: #ef4444;
}

.situation3-after .situation3-bullets li::before {
    color: #22c55e;
}

/* Control Logic Shift - 적외선 → 제로원 전환 강조 */
.situation3-shift {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.situation3-shift-badge {
    padding: 10px 20px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 24px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

.situation3-shift-text {
    font-size: 1.1rem;
    font-weight: 800;
    color: #15803d;
    letter-spacing: -0.02em;
}

/* 하단 3열 특징 */
.situation3-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.situation3-feature-item {
    padding: 24px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
}

.situation3-feature-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #667eea;
    font-size: 1.25rem;
    border-radius: 10px;
}

.situation3-feature-item h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 8px;
}

.situation3-feature-item p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* 상가/매장 입구: 왼쪽 복도, 오른쪽 발판 가로 배치 */
.situation-grid-horizontal {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

.situation-left-item,
.situation-right-item {
    flex: 1;
    max-width: 400px;
}

/* Before/After 대조 스타일 */
.situation-left-item.situation-before .sit-3 {
    filter: saturate(0.85) brightness(0.95);
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.situation-right-item.situation-after .situation-image-container {
    border: 4px solid #667eea;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.2);
}

.situation-label {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 700;
   
    margin-bottom: 10px;
}

.situation-label.before {
    color: #94a3b8;
}

.situation-label.after {
    color: #667eea;
}

/* 이미지 높이 통일 */
.situation-grid-horizontal .sit-3,
.situation-grid-horizontal .situation-image-container {
    height: 320px;
    min-height: 320px;
}

.situation-grid-horizontal .situation-image-container {
    margin-bottom: 0;
}

/* 개선 인디케이터 (텍스트 + 화살표, 박스 없음) */
.situation-improvement-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.situation-improvement-badge .badge-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #667eea;
}

.situation-improvement-badge .badge-arrow {
    font-size: 1.1rem;
    font-weight: 600;
    color: #667eea;
}

.situation-images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.situation-image-item {
    width: 100%;
}

.situation-text {
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0;
    text-align: center;
    padding: 15px 20px;
    border-radius: 8px;
}

.situation-text.white {
    color: #1e1e1e;
}

.situation-text.gray {
    color: #4b5563;
    margin-top: 12px;
}

/* 이미지 아래 텍스트 박스 */
.situation-left-item .situation-text,
.situation-right-item .situation-text {
    margin-top: 12px;
    padding: 14px 18px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    font-size: 1.1rem;
}

/* 제로원을 선택하는 이유 섹션 (애니메이션) */
@keyframes whyZeroneFadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.why-zerone-section {
    margin-top: 60px;
    padding: 50px 20px 60px;
    background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
}

.why-zerone-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 40px;
    opacity: 0;
    animation: whyZeroneFadeInUp 0.6s ease-out forwards;
}

.why-zerone-reasons {
   
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.why-zerone-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.08);
    border: 1px solid #e8ecf7;
    opacity: 0;
    animation: whyZeroneFadeInUp 0.6s ease-out forwards;
}

.why-zerone-item:nth-child(1) { animation-delay: 0.2s; }
.why-zerone-item:nth-child(2) { animation-delay: 0.35s; }
.why-zerone-item:nth-child(3) { animation-delay: 0.5s; }

.why-zerone-heading-box h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #667eea;
    margin: 0 0 12px;
}

/* 제로원을 선택하는 이유 설명 문구 */
.why-zerone-description p {
   
    font-size: 1rem;
    line-height: 1.65;
    color: #4a5568;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: justify;
}

/* 제로원 제품 플러스 모바일 연동 시스템 섹션 */
.mobile-integration-section {
    margin-top: 0;
    margin-bottom: 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    padding: 120px 40px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.mobile-integration-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(139, 154, 255, 0.15) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.mobile-integration-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(102, 126, 234, 0.3) 20%, 
        rgba(139, 154, 255, 0.5) 50%, 
        rgba(102, 126, 234, 0.3) 80%, 
        transparent 100%);
    z-index: 1;
}

.mobile-integration-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.mobile-integration-content {
    text-align: center;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 0.3s forwards;
}

.mobile-integration-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #8b9aff 100%);
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.mobile-integration-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    animation: iconShine 3s ease-in-out infinite;
}

@keyframes iconShine {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg);
        opacity: 0.6;
    }
}

.mobile-integration-logo {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-size: 1.0rem;
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.mobile-integration-title {
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 25px 0;
    line-height: 1.2;
}

.mobile-integration-brand {
    background: linear-gradient(135deg, #667eea 0%, #c1caff 50%, #667eea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    text-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.mobile-integration-plus {
    color: #8b9aff;
    margin: 0 15px;
    font-weight: 300;
    font-size: 2rem;
    display: inline-block;
    vertical-align: baseline;
    line-height: 1;
    text-shadow: 0 0 20px rgba(139, 154, 255, 0.5);
    animation: pulse 2s ease-in-out infinite;
    transform: translateY(-0.3em);
    position: relative;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.mobile-integration-subtitle {
    color: #e2e8f0;
    font-weight: 600;
   
}

.mobile-integration-description {
    font-size: 1.2rem;
    color: #cbd5e1;
    line-height: 1.5;
    margin: 0;
    font-weight: 300;
    
}

.iot-section {
    margin-top: 0;
    margin-bottom: 0;
    background: linear-gradient(180deg, #0a1530 0%, #141E3D 50%, #1a2a4d 100%);
    padding: 200px 40px;
    width: 100%;
    position: relative;
}

.iot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    margin-bottom: 60px;
}

.iot-text {
    text-align: left;
}

.iot-text p {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(to right, #0e86ff 10%, #e8ecff 40%, #81c0ff 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.iot-image-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    overflow: visible;
    position: relative;
}

.iot-image-wrapper img {
    margin-top: 0px;
    max-width: 70%;
    width: 70%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.iot-features {
    grid-column: 1;
    text-align: left;
    margin-top: 50px;
}

.iot-features p {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.6;
    text-align: left;
}

.iot-features p.white {
    
    color: #ffffff;
}

.iot-features p.gradient {
    background: linear-gradient(to right, #0e86ff 10%, #e8ecff 40%, #81c0ff 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.iot-block-wrapper {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 40px;
    margin-top: 150px;
    margin-bottom: 60px;
}

.iot-block-wrapper img {
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 20px;
}

.iot-bottom-text {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.iot-bottom-text p {
    font-weight: 700;
    font-size: 2rem;
    color: #ffffff;
    margin: 0;
}

/* 모바일 전용 IoT 섹션 - 기본적으로 숨김 */
.iot-section-mobile {
    display: none;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .situation-header h2 {
        font-size: 2rem;
    }

    .situation-question-banner h2 {
        font-size: 1.4rem;
        max-width: 1500px;
        margin: 0 auto;
        text-align: center;
        line-height: 1.5;
        word-break: keep-all;
        padding: 0 20px;
    }

    .situation-question-banner h2 .mobile-br {
        display: block;
    }

    .situation-question-banner p {
        font-size: 1.1rem;
    }

    .situation-wrapper .situation-question-banner {
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 20px 15px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .situation-wrapper .situation-question-banner h2 {
        font-size: 1.4rem;
        padding: 0;
    }

    .situation-wrapper .situation-question-banner p {
        font-size: 1.0rem;
    }

    .problem-content-wrapper {
        padding: 10px 20px;
    }

    .problem-images-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
        margin: 40px auto 0;
        padding: 0 20px;
    }

    .problem-image-frame img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .infrared-limitation-section {
        padding: 0;
        margin-top: 20px;
        margin-bottom: 0px;
        width: 100%;
        box-sizing: border-box;
    }

    .why-zerone-section {
        margin-top: 40px;
        padding: 30px 16px 50px;
    }

    .why-zerone-title {
        font-size: 1.5rem;
        margin-bottom: 28px;
    }

    .why-zerone-item {
        padding: 18px 20px;
    }

    .why-zerone-heading-box h3 {
        font-size: 1.1rem;
    }

    .why-zerone-description p {
        font-size: 0.95rem;
    }

    /* 상황 3 모바일 */
    .situation3-section {
        padding: 24px 16px 0;
    }

    .situation3-header {
        margin-bottom: 32px;
    }

    .situation1-header {
        margin-top: 0;
    }

    .situation1-section.situation2-section {
        padding-top: 24px;
    }

    .situation-wrapper {
        overflow-x: hidden;
    }

    .situation-question-box {
        margin: 0 16px 24px;
        padding: 16px 20px;
        max-width: calc(100% - 32px);
        box-sizing: border-box;
    }

    .situation-question-box .situation-subtitle {
        font-size: 1rem;
        text-align: center;
    }

    .situation1-header,
    .situation2-header,
    .situation4-header,
    .situation5-header {
        margin-bottom: 32px;
    }

    /* 불편한 상황 모바일 */
    .problem-images-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 16px;
    }

    .problem-image-item {
        padding: 20px 16px;
    }

    .problem-image-caption p {
        font-size: 0.9rem;
    }

    .situation3-comparison {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 36px;
    }

    .situation3-shift {
        flex-direction: row;
        gap: 12px;
    }

    .situation3-shift-badge {
        padding: 6px 12px;
        font-size: 0.7rem;
    }

    .situation3-shift-text {
        font-size: 0.9rem;
    }

    .situation3-image-wrap {
        height: 200px;
    }

    .situation3-features {
        grid-template-columns: 1fr;
    }

    .infrared-limitation-text-group {
        margin: 28px 0 0;
        padding: 20px 16px 0;
        width: 100%;
        box-sizing: border-box;
    }

    .infrared-compare-box {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 0 8px;
    }

    .infrared-compare-limitation,
    .infrared-compare-zerone {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-break: keep-all;
    }

    .infrared-compare-limitation {
        font-size: 1.2rem;
        font-weight: 600;
        text-align: center;
        padding: 0 4px;
    }

    .infrared-compare-zerone {
        border: 0px solid red;
        font-size: 1.2rem;
        font-weight: 800;
        margin-bottom: 50px;
    }


/* 적외선 센서 섹션 모바일 정리 */
    .infrared-limitation-section h2 {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 30px;
        padding: 0 20px;
        line-height: 1.5;
        word-break: keep-all;
        overflow-wrap: break-word;
        color: #232323;
    }

    .infrared-limitation-section h2.zerone-highlight {
        font-size: 1.2rem;
    }

    .infrared-limitation-section h2.zerone-highlight-box {
        font-size: 1.3rem;
        padding: 15px 20px;
        margin: 10px auto;
        border-radius: 10px;
    }

    .infrared-limitation-section > p {
        font-size: 1.2rem;
        margin-top: 20px;
    }

    /* 모바일 띄어쓰기 추가 하는 곳 */ 
    .infrared-limitation-section .mobile-br,
    .situation-desc .mobile-br {
        display: block;
    }

    .infrared-limitation-content {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 24px 16px 0;
    }

    .infrared-limitation-texts {
        margin: 0;
        gap: 20px;
    }

    .infrared-limitation-text-box {
        border-radius: 4px;
        padding: 16px 20px;
    }

    .infrared-limitation-text-box p {
        font-size: 0.95rem;
        overflow-wrap: break-word;
        word-break: keep-all;
    }

    .solution-intro {
        padding: 28px 20px 24px;
    }

    .solution-intro-word h2 {
        font-size: 1.2rem;
    }

    .solution-text p {
        font-size: 1.2rem;
    }

    .solution-text p.highlight {
        font-size: 1.5rem;
    }

    .situation-highlight {
       
        padding: 30px 20px;
        margin-top: -50px;
    }

    .situation-highlight p {
        border: 0px solid red;
        font-size: 1.5rem;
    }

    .situation-section-divider {
        margin: 50px 20px;
        height: 2px;
    }

    .situation-section-divider::before {
        width: 50px;
        height: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .situation-section-divider::after {
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
    }

    .situation-wrapper .situation-question-banner {
        margin-top: 40px;
        margin-bottom: 40px;
        padding: 30px 20px;
        border-radius: 16px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .situation-wrapper .situation-question-banner h2 {
        font-size: 1.5rem;
    }

    .situation-wrapper .situation-question-banner p {
        font-size: 1.0rem;
    }

    /* 상황 2 모바일 */
    .situation2-section {
        padding: 40px 16px 56px;
    }

    .situation1-header,
    .situation2-header,
    .situation4-header,
    .situation5-header {
        margin-bottom: 36px;
    }

    .situation5-risks-title {
        font-size: 1.1rem;
        margin-bottom: 16px;
    }

    .zeroone-add-section .zeroone-add-headline {
        font-size: 1.35rem;
    }

     .zeroone-add-content {
        padding: 22px 20px;
    }

    .situation5-solutions-title {
        font-size: 1.1rem;
        margin-bottom: 16px;
    }

    .care-benefits-section {
        margin-top: 40px;
        padding: 0 0 32px;
    }

    .care-benefits-title {
        font-size: 1.3rem;
        margin-bottom: 24px;
    }

    .care-benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 8px;
    }

    .care-benefit-block {
        padding: 22px 20px;
    }

    .care-benefit-block--1 { animation-delay: 0.15s; }
    .care-benefit-block--2 { animation-delay: 0.25s; }
    .care-benefit-block--3 { animation-delay: 0.35s; }
    .care-benefit-block--4 { animation-delay: 0.45s; }

    .situation5-risks {
        flex-direction: column;
        margin-bottom: 36px;
        gap: 12px;
    }

    .situation5-risk-item {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 16px 20px;
    }

    .situation5-risk-item p {
        font-size: 0.95rem;
    }

    .situation-title {
        font-size: 1.5rem;
    }

    .situation-subtitle {
        font-size: 1.0rem;
    }

    .situation-desc {
        font-size: 0.9rem;
        text-align: left;
    }

    .situation2-features {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .situation2-feature-item {
        padding: 24px 20px;
    }

    .situation1-feature-item .situation-feature-image {
        margin-bottom: 16px;
    }

    .situation2-feature-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 16px;
    }

    .situation2-feature-icon svg {
        width: 24px;
        height: 24px;
    }

    .situation2-feature-item h4 {
        font-size: 1rem;
    }

    .situation2-feature-item p {
        font-size: 0.9rem;
    }

    .situation-dark-background {
        padding: 50px 0 0;
    }

    .situation-dark-background::before {
        height: 4px;
    }

    .situation-dark-background .situation-question-banner {
        margin-top: 40px;
        margin-bottom: 40px;
        padding: 30px 20px;
        border-radius: 16px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .situation-dark-background .situation-question-banner h2 {
        font-size: 1.5rem;
    }

    .situation-dark-background .situation-question-banner p {
        font-size: 1.0rem;
    }

    .situation-dark-background .situation-question-banner p .mobile-br {
        display: block;
    }

    .solution-image-section {
        display: flex;
        justify-content: center;
        align-items: center;
       
    }

    .solution-image-section video {
        max-width: 320px;
        width: 320px;
        margin: 0 auto;
        display: block;
        border: 0px solid red;
        padding-bottom: 0 20px 20px;
    }

    /* 데스크톱용 IoT 섹션 모바일에서 숨기기 */
    .iot-section {
        display: none;
    }

    .iot-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .iot-image-wrapper img {
        margin-top: 0;
        max-width: 10%;
        width: 30%;
    }

    .iot-features {
        grid-column: 1;
    }

    .iot-features p {
        font-size: 1.5rem;
    }

    .situation-images-grid {
        grid-template-columns: 1fr;
    }

    .situation-image-container {
        height: 250px;
    }

    .sit-3 {
        height: 250px;
    }

    .sit-3 .situation-text-overlay {
        padding: 30px 20px;
        font-size: 0.95rem;
    }

    .situation-grid-horizontal {
        flex-direction: column;
        padding: 20px 15px;
        gap: 20px;
    }

    .situation-left-item,
    .situation-right-item {
        max-width: 100%;
    }

    .situation-grid-horizontal .sit-3,
    .situation-grid-horizontal .situation-image-container {
        height: 250px;
        min-height: 250px;
    }

    .situation-improvement-badge .badge-text {
        font-size: 0.8rem;
    }

    .situation-image-item {
        max-width: 90%;
        margin: 0 auto;
    }

    .mobile-integration-section {
        padding: 80px 20px;
    }

    .mobile-integration-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    .mobile-integration-logo {
        font-size: 0.8rem;
        
    }

    .mobile-integration-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .mobile-integration-plus {
        font-size: 1.8rem;
        margin: 0 10px;
    }

    .mobile-integration-description {
        font-size: 1.1rem;
        padding: 0 10px;
    }

    /* 모바일 전용 IoT 섹션 */
    .iot-section-mobile {
        display: block;
        margin-top: 0;
        margin-bottom: 0;
        background: linear-gradient(180deg, #0a1530 0%, #141E3D 50%, #1a2a4d 100%);
        padding: 80px 20px;
        width: 100%;
        position: relative;
    }

    .iot-grid-mobile {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        align-items: start;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        margin-bottom: 40px;
    }

    .iot-text-mobile {
        text-align: center;
    }

    .iot-text-mobile p {
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(to right, #0e86ff 20%, #e8ecff 40%, #81c0ff 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.4;
    }

    .iot-image-wrapper-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible;
        position: relative;
    }

    .iot-image-wrapper-mobile img {
        margin-top: 0;
        max-width: 60%;
        width: 60%;
        height: auto;
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }

    .iot-features-mobile {
        text-align: center;
        margin-top: 30px;
    }

    .iot-features-mobile p {
        border: 0px solid red;
        
        font-weight: 700;
        margin: 10px 0;
        line-height: 1.3;
        text-align: center;
    }

    /* 이 부분이 우선 */
    .iot-features-mobile p.white {
        border: 0px solid rgb(0, 255, 38);
        font-size: 1.5rem;
        color: #ffffff;
    }

    .iot-features-mobile p.gradient {
        font-size: 1.5rem;
        background: linear-gradient(to right, #0e86ff 10%, #e8ecff 40%, #81c0ff 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .iot-block-wrapper-mobile {
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
        margin-top: 60px;
        margin-bottom: 40px;
    }

    .iot-block-wrapper-mobile img {
        max-width: 100%;
        width: auto;
        height: auto;
        border-radius: 20px;
    }

    .iot-bottom-text-mobile {
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }

    .iot-bottom-text-mobile p {
        font-size: 1.5rem;
        font-weight: 700;
        color: #ffffff;
        margin: 0;
        line-height: 1.5;
    }
}

/* 데스크톱에서 모바일 IoT 섹션 숨기기 */
@media (min-width: 769px) {
    .iot-section-mobile {
        display: none;
    }
}


/* 상가/매장 입구 영역*/

.situation-wrapper {
    margin-top: 0px;
    margin-bottom: 0;
}

.situation-header {
    margin-bottom: 40px;
    text-align: center;
}

.situation-header-badge-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.situation-header-badge {
    background: #7199ff;
    padding: 8px 24px;
    border-radius: 20px;
    display: inline-block;
}

.situation-header-badge p {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

/* situation-header h2는 더 구체적인 선택자로 우선순위 확보 */
.apartment-section .situation-wrapper .situation-header h2,
.situation-wrapper .situation-header h2,
.situation-header h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}


/* ======================== 스크롤 진입 애니메이션 ======================== */
@keyframes productFadeUpIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes productFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 초기 상태 (애니메이션 전) */
.product-moving-media-section .product-moving-media-stack,
.product-cards-section .product-cards-section-title,
.product-cards-section .product-card,
.app-download-section .app-download-title,
.app-download-section .app-download-buttons {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-cards-section .product-card {
    transition-delay: 0s;
}

/* 제품 카드 섹션: 더 느리고 부드럽게 */
.product-cards-section .product-cards-section-title,
.product-cards-section .product-card {
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* animate-in 시 표시 */
.product-moving-media-section.animate-in .product-moving-media-stack,
.product-cards-section.animate-in .product-cards-section-title,
.product-cards-section.animate-in .product-card,
.app-download-section.animate-in .app-download-title,
.app-download-section.animate-in .app-download-buttons {
    opacity: 1;
    transform: translateY(0);
}

/* 제품 카드 스태거드: 늦게, 천천히 순차 등장 */
.product-cards-section.animate-in .product-cards-section-title { transition-delay: 0.15s; }
.product-cards-section.animate-in .product-card:nth-child(1) { transition-delay: 0.4s; }
.product-cards-section.animate-in .product-card:nth-child(2) { transition-delay: 0.7s; }
.product-cards-section.animate-in .product-card:nth-child(3) { transition-delay: 1.0s; }

/* 앱 다운로드: 버튼은 부모와 함께 등장 (스태거드는 생략) */

/* prefers-reduced-motion: 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce) {
    .product-moving-media-section .product-moving-media-stack,
    .product-cards-section .product-cards-section-title,
    .product-cards-section .product-card,
    .app-download-section .app-download-title,
    .app-download-section .app-download-buttons {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ======================== Pro / Mini 제품 카드 섹션 ======================== */
.product-moving-media-section {
    position: relative;
    margin-top: 180px;
    padding: 150px 0 150px;
    min-height: calc(100vh - var(--header-height));
    background:linear-gradient(
        135deg,
        #000a1d 20%,
        #001121 50%,
        #001a3b 100%
    );
    width: 100vw;
    overflow-x: clip; /* 캡션 뷰포트 브레이크아웃 시 가로 스크롤 방지 */
}

/* 인트로(.product-main-title) 다음에 바로 오는 경우: 인트로 종료 후 바로 보여주기 */
main > .product-main-title + .product-moving-media-section {
    margin-top: 0;
}


/* 영상 위에 텍스트 오버레이 — 스택은 컨테이너(그리드) 전체 너비, 영상만 중앙 프레임 */
.product-moving-media-stack {
    position: relative;
    width: 100%;
}

.product-moving-media-frame {
    position: relative;
    z-index: 2; /* 영상이 캡션보다 앞(위)에 그려짐 */
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: none;
    background: transparent;
}

.product-moving-media-frame .product-moving-media {
    width: 100%;
    display: block;
    margin: 0;
    border-radius: 0;
    background: transparent;
}

/*
 * 캡션: 그리드(.container) 밖까지 왼쪽 배치 가능
 * 기준은 여전히 .product-moving-media-stack(영상 높이)이지만,
 * 박스를 100vw로 넓혀 뷰포트 왼쪽(0)부터 쓸 수 있게 함.
 */
.product-moving-media-caption {
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    box-sizing: border-box;
    z-index: 0; /* 영상(.product-moving-media-frame) 뒤 */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    /* 뷰포트 왼쪽에서 40px + 노치 안전 영역 */
    padding-left: calc(40px + env(safe-area-inset-left, 0px));
    padding-right: 0;
    /* 영상 상단에 더 붙이기 */
    transform: translate(0, -5rem);
    font-size: clamp(2.5rem, 7vw, 7rem);
    /* 그라데이션 글자색 (color에는 linear-gradient 불가) */
    background: linear-gradient(
        135deg,
        #ebf5ff 5%,
        #00389a 30%,
        #001838 90%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 500;
    text-align: left;
    line-height: 1.1;
    /* text-shadow는 투명 글자에 잘 안 먹어서 윤곽용으로 drop-shadow 사용 */
    filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.65));
    pointer-events: none;
}


.product-moving-media-caption2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    box-sizing: border-box;
    z-index: 0; /* 영상(.product-moving-media-frame) 뒤 */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin: 0;
    padding-left: 0;
    /*
     * padding 음수는 스펙상 무효라 적용되지 않음.
     * 오른쪽 끝에 더 붙이기 → padding-right를 줄이거나, translate 첫 값을 0 쪽으로(덜 음수/양수).
     */
    padding-right: max(0px, env(safe-area-inset-right, 0px));
    /* 가로: 오른쪽으로 Npx 이동 = 첫 값에 +N (예: -125px → -55px 는 70px 오른쪽) */
    /* 세로: 두 번째 값 — 키우면 아래로 */
    transform: translate(-75px, 3rem); /* 예전 -125px에서 70px 오른쪽으로 */
    font-size: clamp(2.5rem, 7vw, 7rem);
    /* 그라데이션 글자색 (color에는 linear-gradient 불가) */
    background: linear-gradient(
        135deg,
        #ebf5ff 55%,
        #74a7ff 90%,
        #001838 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 500;
    text-align: right;
    line-height: 1.1;
    /* text-shadow는 투명 글자에 잘 안 먹어서 윤곽용으로 drop-shadow 사용 */
    filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.65));
    pointer-events: none;
}

/* 영문 캡션: 위치는 한국어와 동일, 글자 크기만 축소 */
@media (min-width: 769px) {
    html[lang="en"] .product-moving-media-caption {
        font-size: clamp(1.85rem, 4.8vw, 5.25rem);
    }

    html[lang="en"] .product-moving-media-caption2 {
        font-size: clamp(1.85rem, 4.8vw, 5.25rem);
    }
}

@media (max-width: 768px) {
    /* iPhone 등: viewport-fit=cover + env(safe-area-inset-*) */
    .product-moving-media-section {
        min-height: calc(100dvh - var(--header-height));
        padding: 18px 0 10px;
        padding-left: max(0px, env(safe-area-inset-left, 0px));
        padding-right: max(0px, env(safe-area-inset-right, 0px));
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
    }

    .product-moving-media-section .container {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        align-items: center;
    }

    /* 모바일: 동영상과 겹치지 않게 세로 배치 (밟으면 - 영상 - 끝) */
    .product-moving-media-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(10px, 2.8vh, 24px);
        width: 100%;
        min-height: 0;
    }

    .product-moving-media-frame {
        order: 2;
        width: min(120vw, 1100px);
        max-width: min(120vw, 1100px);
        flex: 0 0 auto;
        height: min(52vh, 430px);
        border-radius: 2px;
        margin-left: calc(50% - 60vw);
        margin-right: calc(50% - 60vw);
    }

    .product-moving-media-frame .product-moving-media {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .product-moving-media-caption {
        order: 1;
        position: static;
        width: 100%;
        max-width: 350px;
        left: auto;
        padding: 0;
        transform: none;
        justify-content: flex-start;
        text-align: left;
        font-size: clamp(1.75rem, 10vw, 2.75rem);
    }

    html[lang="en"] .product-moving-media-caption {
        font-size: clamp(1.5rem, 8.5vw, 2.35rem);
    }

    .product-moving-media-caption2 {
        order: 3;
        position: static;
        width: 100%;
        max-width: 350px;
        left: auto;
        padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 0;
        transform: none;
        justify-content: flex-end;
        font-size: clamp(1.75rem, 10vw, 2.75rem);
    }

    html[lang="en"] .product-moving-media-caption2 {
        font-size: clamp(1.5rem, 8.5vw, 2.35rem);
    }

    .product-moving-media-section .scroll-indicator {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        align-self: center;
        width: max-content;
        margin: 2px auto 0;
        opacity: 1;
        animation: fadeIn 1s ease-in-out 0.2s forwards, scrollBounceMobile 2s ease-in-out 1.2s infinite;
    }

    .product-moving-media-section .scroll-indicator:hover {
        transform: translateY(-2px);
    }
}

.product-cards-section {
    padding: 100px 0 60px;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

/* ======================== 앱 다운로드 섹션 ======================== */
.app-download-section {
    padding: 60px 0 120px;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

.app-download-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 32px;
    letter-spacing: -0.04em;
}

.app-download-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.app-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 220px;
    height: 56px;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.app-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.app-download-btn--ios {
    background: #000;
}

.app-download-btn--android {
    background: linear-gradient(135deg, #3ddc84 0%, #1a73e8 100%);
}

.app-download-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    font-size: 24px;
    line-height: 1;
}

.app-download-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.product-cards-section-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 48px;
    letter-spacing: -0.04em;
}

.product-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .product-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-card--pass {
        grid-column: 1 / -1;
        max-width: 420px;
        margin-inline: auto;
        width: 100%;
    }
}

.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.06);
}

.product-card-image {
    position: relative;
    width: 100%;
    flex: none;
    aspect-ratio: 1 / 1.05;
    background: linear-gradient(165deg, #c8cdd6 0%, #d4d9e2 35%, #c2c8d2 100%);
    overflow: hidden;
}

.product-card-image::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    width: clamp(92px, 42%, 180px);
    height: clamp(12px, 4.5%, 22px);
    border-radius: 999px;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.22) 0%,
        rgba(0, 0, 0, 0.1) 52%,
        rgba(0, 0, 0, 0) 86%
    );
    filter: blur(2px);
    pointer-events: none;
    z-index: 1;
    animation: productImageShadowPulse 3.2s ease-in-out infinite;
}

.product-card-image picture,
.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}

.product-card-image img {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: productImageFloat 3.2s ease-in-out infinite;
}

/* Mini는 이미지가 작아서 하단 쏠림 방지 - 수직 중앙 정렬 */
.product-card--pro .product-card-image img {
    object-fit: contain;
    object-position: center center;
}

.product-card--pro .product-card-image picture {
    width: 100%;
    height: 100%;
    display: block;
}

.product-card--mini .product-card-image img {
    object-position: center center;
}

.product-card--mini .product-card-image {
    background: linear-gradient(165deg, #e7dbce 0%, #f2e2ce 38%, #e2d5ca 100%);
}

.product-card--pass .product-card-image {
    background: linear-gradient(165deg, #8b95a5 0%, #5f6b7c 42%, #434d5c 100%);
}

.product-card--pass .product-card-image::after {
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.22) 52%,
        rgba(0, 0, 0, 0) 86%
    );
}

.product-card--pass .product-card-image picture {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card--pass .product-card-image img {
    width: 42%;
    height: 42%;
    max-width: 42%;
    max-height: 42%;
    object-fit: contain;
    object-position: center center;
    padding: 0;
    margin: 0 auto;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.28));
}

.product-card--pass .product-card-name {
    background: linear-gradient(90deg, #000000 0%, #232526 30%, #64748b 70%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.product-card-content {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 20px 30px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.product-card-name {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    line-height: 1.2;
}

.product-card--pro .product-card-name {
    background: linear-gradient(90deg, #000000 0%, #232526 30%, #414345 70%, #667eea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.product-card--mini .product-card-name {
    background: linear-gradient(90deg, #000000 0%, #232526 30%, #4facfe 70%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.product-card-tagline {
    font-size: 17px;
    font-weight: 500;
    color: #64748b;
    margin: 0 0 24px;
    letter-spacing: -0.01em;
    line-height: 1.5;
}

.product-card-cta {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.25s ease, color 0.25s ease;
}

.product-card:hover .product-card-cta {
    gap: 12px;
    color: #000000;
}

.product-card-cta::after {
    content: '→';
    font-size: 18px;
}

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

@keyframes productImageShadowPulse {
    0%, 100% {
        opacity: 0.75;
        transform: translateX(-50%) scaleX(1);
    }
    50% {
        opacity: 0.95;
        transform: translateX(-50%) scaleX(1.04);
    }
}

@media (max-width: 768px) {
    .product-cards-section {
        padding: 80px 0 40px;
    }

    .app-download-section {
        padding: 40px 20px 80px;
    }

    .app-download-title {
        font-size: 22px;
        margin-bottom: 24px;
    }

    .app-download-buttons {
        flex-direction: column;
        gap: 16px;
    }

    .app-download-btn {
        width: 100%;
        max-width: 280px;
        height: 52px;
        justify-content: center;
        padding: 0 24px;
        font-size: 16px;
    }

    .product-cards-section-title {
        font-size: 26px;
        margin-bottom: 36px;
    }

    .product-cards-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0 20px;
    }

    .product-card {
        flex-direction: column;
    }

    .product-card-image {
        flex: none;
        aspect-ratio: 2 / 3;
        min-height: 320px;
        object-position: center center;
    }

    .product-card-content {
        padding: 32px 28px 36px;
        align-items: center;
        text-align: center;
    }

    .product-card-name {
        font-size: 28px;
    }

    .product-card-tagline {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-card-image img,
    .product-card-image::after {
        animation: none;
    }
}

/* ========================리우림이 css 코드 짜는 부분 끝========================= */