/*
=================================================================
  Xahra System Homepage Custom CSS
  - 최종 수정: 2025-10-23
=================================================================
  목차 (Table of Contents)
  1. 전역 스타일 및 리셋 (Global Styles & Resets)
  2. 공통 컴포넌트 (Common Components)
  3. 레이아웃 및 헬퍼 (Layout & Helpers)
  4. 애니메이션 (Animations)
  5. 페이지별 스타일 (Page-specific Styles)
    5.1. 메인 페이지 (Index Page)
    5.2. 제품 상세 페이지 (Product Detail Pages)
=================================================================
*/

/* =================================================================
   1. 전역 스타일 및 리셋 (Global Styles & Resets)
   ================================================================= */
@media (hover: none) {
    *:hover {
        /* On devices that don't support hover, disable all hover effects. */
    }
}

a {
    text-decoration: none;
}
.material-symbols-outlined.text-xs { font-size: 0.75rem; }
.material-symbols-outlined.text-sm { font-size: 0.875rem; }
.material-symbols-outlined.text-base { font-size: 1rem; }
.material-symbols-outlined.text-lg { font-size: 1.5rem; }
.material-symbols-outlined.text-xl { font-size: 1.75rem; }
.material-symbols-outlined.text-2xl { font-size: 2rem; }
.material-symbols-outlined.text-3xl { font-size: 3rem; }
.material-symbols-outlined.text-4xl { font-size: 4rem; }
.material-symbols-outlined.text-5xl { font-size: 5rem; }
.material-symbols-outlined.text-6xl { font-size: 6rem; }
.material-symbols-outlined.text-7xl { font-size: 7rem; }
.material-symbols-outlined.text-8xl { font-size: 8rem; }
.material-symbols-outlined.text-9xl { font-size: 9rem; }

@media (min-width: 768px) {
  .material-symbols-outlined.md\:text-xs { font-size: 0.75rem; }
  .material-symbols-outlined.md\:text-sm { font-size: 0.875rem; }
  .material-symbols-outlined.md\:text-base { font-size: 1rem; }
  .material-symbols-outlined.md\:text-lg { font-size: 1.5rem; }
  .material-symbols-outlined.md\:text-xl { font-size: 1.75rem; }
  .material-symbols-outlined.md\:text-2xl { font-size: 2rem; }
  .material-symbols-outlined.md\:text-3xl { font-size: 3rem; }
  .material-symbols-outlined.md\:text-4xl { font-size: 4rem; }
  .material-symbols-outlined.md\:text-5xl { font-size: 5rem; }
}
/* =================================================================
   2. 공통 컴포넌트 (Common Components)
   ================================================================= */
/* --- Brand Colors --- */
.tech-blue-accent { color: #219bdc; }
.bg-tech-blue-accent { background-color: #0077B6; }
.border-tech-blue-accent { border-color: #0077B6; }

/* --- Icons --- */
/* Material Symbols 기본 스타일 및 사이즈 시스템 */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-sm { font-size: 1.5rem; }
.icon-md { font-size: 2rem; }
.icon-lg { font-size: 2.5rem; }

/* --- Custom Utilities --- */
.max-w-8xl {
    max-width: 100rem;
}
@media (min-width: 768px) {
    .md\:gap-20 {gap : 20px;}
    .md\:gap-24 {gap : 24px;}
    .md\:h-100 {height : 100%;}
}

/* --- Common Hover Effects --- */
@media (hover: hover) {
    .hover-bg-tech-blue-accent:hover { background-color: #006699; }
    .hover-text-tech-blue-accent:hover { color: #0077B6; }
}

/* =================================================================
   3. 레이아웃 및 헬퍼 (Layout & Helpers)
   ================================================================= */
/* --- Smooth Scroll & Anchor Offset --- */
html { scroll-behavior: smooth; }
.anchor-offset { scroll-margin-top: 80px; }

/* =================================================================
   4. 애니메이션 (Animations)
   ================================================================= */
/* --- Scroll Animations (reveal on scroll) --- */
@media (prefers-reduced-motion: no-preference) {
  .sa { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease, visibility .6s ease; will-change: opacity, transform; visibility: hidden; }
  .sa-up { transform: translateY(24px); }
  .sa-left { transform: translateX(-24px); }
  .sa-right { transform: translateX(24px); }
  .sa-zoom { transform: scale(.96); }
  .sa-delay-100 { transition-delay: .1s; }
  .sa-delay-200 { transition-delay: .2s; }
  .sa-delay-300 { transition-delay: .3s; }
  .sa.is-inview { opacity: 1; transform: none; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .sa, .sa-up, .sa-left, .sa-right, .sa-zoom { opacity: 1 !important; transform: none !important; }
}

/* --- Scroll-linked Animations --- */
@supports (animation-timeline: view()) {
  @keyframes sa-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .sv-fade-up { animation: sa-fade-up 1s ease both; animation-timeline: view(); animation-range: entry 20% cover 30%; }
}


/* =================================================================
   5. 페이지별 스타일 (Page-specific Styles)
   ================================================================= */

/* -----------------------------------------------------------------
   5.1. 메인 페이지 (Index Page)
   ----------------------------------------------------------------- */
/* --- Hero Section --- */
.hero-background {
  background-image: url('https://images.unsplash.com/photo-1647427060118-4911c9821b82?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1470');
  background-size: cover;
  background-position: center;
}
.bg-overlay-darknavy { background-color: rgba(12, 26, 43, 0.85); }
.hero-text { letter-spacing: -0.03em; }

/* --- Header Solid State --- */
#site-header.is-solid {
    background: rgba(12, 26, 43, .80);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
#site-header.is-solid a { color: #ffffff !important; }
#site-header.is-solid .material-symbols-outlined { color: #ffffff; }
#site-header.is-solid a[href="#contact"] { border-color: rgba(255, 255, 255, 0.45) !important; }

/* --- Products Section --- */
#products *{
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 및 Edge */
}
#products *::-webkit-scrollbar {
  display: none; /* Chrome, Safari 및 Opera */
}
/* 제품 이미지 공통 오버레이 */
.product-image-bg { background-size: cover; background-position: center; position: relative; }
.product-image-bg::before { content: ""; position: absolute; inset: 0; background: rgba(12, 26, 43, 0.1); border-radius: 0.5rem; }
/* 제품 카드 개별 배경 이미지 */
#ordermesh-image { background-image: url('/img/order.png'); background-repeat: no-repeat; }
#haccpone-image { background-image: url('/img/haccp.png'); }
#erp-image { background-image: url('/img/erp.jpg'); }
#mes-image { background-image: url('/img/mes.png'); }
#omniops-ai-image { background-image: url('/img/ai.png'); }
#dx-consulting-image { background-image: url('/img/dx.png'); }
#iiot-edge-image { background-image: url('/img/iiot.png'); }
#fa-robot-image { background-image: url('/img/fa.jpg'); }

/* --- Performance Section --- */
.performance-tab-btn { padding: 0.4rem 0.9rem; border-radius: 9999px; font-weight: 600; font-size: 0.8rem; line-height: 1.5rem; color: #4B5563; transition: all 0.3s ease; border: 1px solid transparent; }
@media (min-width: 768px) { .performance-tab-btn { padding: 0.7rem 1.75rem; font-size: 1.1rem; } }
.performance-tab-btn.active { background-color: #ffffff; color: #0077B6; box-shadow: 0 4px 14px 0 rgb(0 0 0 / 0.05); border-color: #E5E7EB; }

/* --- Contact Section --- */
.map-grayscale {
    filter: grayscale(0%); /* 모바일 기본값: 컬러 */
    transition: filter 0.3s ease-in-out;
}
@media (min-width: 768px) {
    .map-grayscale {
        filter: grayscale(100%); /* PC 기본값: 흑백 */
    }
}
@media (hover: hover) {
    .map-grayscale:hover {
        filter: grayscale(0%); /* PC 호버 시: 컬러 */
    }
}

/* --- Footer --- */
.bg-deeper-navy { background-color: #061221; }

/* --- Misc --- */
.section-separator { box-shadow: 0 -8px 10px -10px rgba(0, 0, 0, 0.1) inset; }


/* -----------------------------------------------------------------
   5.2. 제품 상세 페이지 (Product Detail Pages)
   ----------------------------------------------------------------- */
/* --- Common Styles --- */
.title-hero-bg { background-color: #0C1A2B; }
header.is-top {
    background: #0C1A2B;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* --- OrderMesh Page --- */
.list-checked { list-style-type: none; padding-left: 0; }
.list-checked li { position: relative; padding-left: 1.75rem; }
.list-checked li::before { content: 'check'; font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; position: absolute; left: 0; top: 0.1rem; color: #0077B6; font-size: 1.25rem; line-height: 1; }

/* --- ERP Page --- */
/* PC Version Interactive Module List */
.module-item-pc {
    transition: all 0.2s ease-in-out;
    color: #4b5563; /* gray-600 */
}
.module-item-pc:hover {
    background-color: #f3f4f6; /* gray-100 */
    color: #111827; /* gray-900 */
}
.module-item-pc.active {
    background-color: #0C1A2B;
    color: white;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.08);
}
.module-content-pc {
    position: absolute;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    visibility: hidden;
    min-height: 300px;
}
.module-content-pc.active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
/* Mobile Version Accordion */
.module-item-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    background-color: transparent;
    border: 1px solid #e5e7eb; /* gray-200 */
}
.module-item-mobile .expand-icon {
    transition: transform 0.3s ease;
}
.module-wrapper-mobile.active .module-item-mobile {
    background-color: #f9fafb; /* gray-50 */
}
.module-wrapper-mobile.active .module-item-mobile .expand-icon {
    transform: rotate(180deg);
}
.module-content-mobile {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
.module-content-mobile .content-inner {
    padding: 0.5rem 1rem 1.5rem 1rem;
    border-top: 1px solid #e5e7eb; /* gray-200 */
    margin-top: -1px;
}
.module-wrapper-mobile.active .module-content-mobile {
    max-height: 500px; /* 충분한 높이 */
}

/* Feature List (used in ERP page etc.) */
.feature-list {
    list-style: none;
    padding-left: 0;
}
.feature-list li {
    position: relative;
    padding-left: 1.75rem;
    color: #4b5563; /* gray-600 */
}
.feature-list li::before {
    content: 'check_circle';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    left: 0;
    top: 0.1rem;
    color: #219bdc; /* tech-blue-accent */
    font-size: 1.25rem;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* -----------------------------------------------------------------
   Fix: Remove any separator line between contact section and footer
   ----------------------------------------------------------------- */
#contact { border-bottom: 0 !important; box-shadow: none !important; }
footer { border-top: 0 !important; box-shadow: none !important; }
#contact.section-separator { box-shadow: none !important; }