/* Responsive CSS - Aqua Works */

/* ===== Tablet View (max-width: 1024px) ===== */
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }
    
    /* Hero */
    .hero-main-title {
        font-size: 3rem;
    }
    
    .hero-company {
        font-size: 1.5rem;
    }
    
    /* About */
    .about-content {
        gap: 3rem;
    }
    
    /* Products */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* ===== Small Tablet View (max-width: 768px) ===== */
@media screen and (max-width: 768px) {
    /* Typography */
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    
    /* Logo adjustment for mobile */
    .logo img {
        height: 40px;
    }
    
    /* Navigation */
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: var(--bg-white);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow-lg);
        padding: 2rem 0;
    }
    
    /* Mobile menu always has white background */
    .navbar.transparent .nav-menu {
        background-color: var(--bg-white);
    }
    
    .navbar.transparent .nav-menu a {
        color: var(--text-dark) !important;
        text-shadow: none !important;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    /* Mobile mega dropdown styles */
    .mega-dropdown-overlay {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        background: var(--bg-white);
        transform: none;
        opacity: 1;
        display: none;
    }
    
    .mega-dropdown-overlay.mobile-show {
        display: block;
    }
    
    .mega-dropdown-container {
        flex-direction: column;
        padding: 1rem;
        gap: 1.5rem;
    }
    
    .mega-section {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 1.5rem;
    }
    
    .mega-section:last-child {
        border-bottom: none;
    }
    
    .mega-section > h3 {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .mega-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .mega-column h4 {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }
    
    .mega-column a {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    .mega-column a i {
        font-size: 0.8rem;
    }
    
    .hamburger {
        display: flex;
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    
    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
    
    /* Hero */
    .hero {
        height: 100vh;
    }
    
    .hero-main-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-company {
        font-size: 1.25rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .hero-buttons .btn {
        width: 200px;
    }
    
    /* Features */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* About */
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .about-image {
        order: -1;
    }
    
    .about-stats {
        justify-content: space-around;
    }
    
    /* Products */
    .products-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* CTA */
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-contact {
        text-align: left;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ===== Mobile View (max-width: 480px) ===== */
@media screen and (max-width: 480px) {
    .container {
        padding: 0 20px;
    }
    
    /* Logo adjustment for small mobile */
    .logo img {
        height: 35px;
    }
    
    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }
    
    body {
        font-size: 14px;
    }
    
    /* Hero */
    .hero {
        height: 100vh;
        min-height: 500px;
    }
    
    .hero-main-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-company {
        font-size: 1rem;
        letter-spacing: 0.2em;
    }
    
    .hero-description {
        font-size: 1rem;
        padding: 0 20px;
    }
    
    /* Features */
    .features {
        padding: 60px 0;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    /* About */
    .about {
        padding: 60px 0;
    }
    
    .about-stats {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
    }
    
    .stat {
        flex-direction: row;
        gap: 1rem;
        align-items: center;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    /* Products */
    .products {
        padding: 60px 0;
    }
    
    .product-card {
        margin: 0 -20px;
        border-radius: 0;
    }
    
    /* CTA */
    .cta {
        padding: 60px 0;
    }
    
    .cta-content h2 {
        font-size: 1.75rem;
    }
    
    .cta-content p {
        font-size: 1rem;
    }
    
    /* Footer */
    .footer {
        padding: 40px 0 20px;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ===== Small Mobile (max-width: 360px) ===== */
@media screen and (max-width: 360px) {
    /* Hero */
    .hero-main-title {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 24px;
        font-size: 0.9rem;
    }
    
    .hero-buttons .btn {
        width: 160px;
    }
}

/* ===== Print Styles ===== */
@media print {
    .navbar,
    .hero-video-container,
    .scroll-indicator,
    .cta,
    .footer-social {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }
    
    .container {
        max-width: 100%;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    .hero {
        height: auto;
        min-height: auto;
        background: none;
        padding: 2rem 0;
    }
    
    .hero-content {
        color: #000;
    }
    
    .footer {
        background: none;
        color: #000;
        border-top: 1px solid #000;
    }
}
/* ============================================
   모바일 전용 줄바꿈 유틸리티
   사용 예시:
   - <br class="br-mobile">          모바일에서만 줄바꿈 (768px 이하)
   - <br class="br-mobile-sm">       작은 모바일에서만 (480px 이하)
   - <br class="br-desktop">         데스크톱에서만 (768px 초과)
   - <span class="nowrap-mobile">    모바일에서 줄바꿈 방지
   - <span class="wrap-mobile">      모바일에서 강제 줄바꿈
   ============================================ */

/* 기본: 모든 br-mobile은 데스크톱에서 숨김 */
br.br-mobile,
br.br-mobile-sm {
    display: none;
}

/* 데스크톱에서만 보이는 줄바꿈 */
br.br-desktop {
    display: inline;
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    br.br-mobile {
        display: inline;
    }
    br.br-desktop {
        display: none;
    }
    .nowrap-mobile {
        white-space: nowrap;
    }
    .wrap-mobile {
        display: block;
    }
    .hide-mobile {
        display: none !important;
    }
}

/* 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
    br.br-mobile-sm {
        display: inline;
    }
    .hide-mobile-sm {
        display: none !important;
    }
}

/* 데스크톱 전용 (768px 초과) */
@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
    .show-mobile-only {
        display: none !important;
    }
}

/* ============================================
   모바일 공통 가운데 정렬
   768px 이하에서 주요 텍스트 영역 중앙 정렬
   ============================================ */
@media (max-width: 768px) {
    /* Hero 영역 */
    .hero-content,
    .hero-title,
    .hero-subtitle,
    .hero-main-title,
    .hero-description,
    .hero-badge {
        text-align: center;
    }
    
    /* 섹션 헤더 (제목/부제목) */
    .section-header,
    .section-title,
    .section-subtitle {
        text-align: center;
    }
    
    /* 소개/설명 영역 */
    .intro-description,
    .intro-description p,
    .intro-highlight {
        text-align: center;
    }
    
    /* 일반 카드/아이템 내부 텍스트 */
    .feature-item,
    .tech-item,
    .benefit-card,
    .benefit-card h4,
    .benefit-card p {
        text-align: center;
    }
    
    /* 카드 안의 아이콘도 가운데 배치 */
    .benefit-card h4 {
        justify-content: center;
    }
}

/* 모바일 가운데 정렬 - 추가 */
@media (max-width: 768px) {
    .intro-title,
    .intro-subtitle,
    .intro-greeting,
    .intro-header {
        text-align: center;
    }
}

/* 모바일에서 CTA 버튼 가운데 정렬 */
@media (max-width: 768px) {
    .intro-cta {
        display: inline-flex;
        margin-left: auto;
        margin-right: auto;
    }
    .intro-text {
        text-align: center;
    }
}

/* 모바일에서 water-icons 카드 한 줄에 하나씩 */
@media (max-width: 768px) {
    .water-icons {
        grid-template-columns: 1fr !important;
    }
}

/* 모바일에서 인증/수상 실적 + 적용분야 한 줄에 하나씩 */
@media (max-width: 768px) {
    .cert-grid,
    .app-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   모바일 전용 축약 푸터
   ============================================ */
.footer-mobile {
    display: none;
}

@media (max-width: 768px) {
    .footer-desktop {
        display: none !important;
    }
    
    .footer-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
        padding: 2rem 1rem 1.5rem;
        text-align: center;
    }
    
    .footer-mobile-brand h4 {
        font-size: 1.1rem;
        margin: 0 0 0.3rem;
        color: #fff;
    }
    
    .footer-mobile-brand p {
        font-size: 0.85rem;
        margin: 0;
        color: rgba(255, 255, 255, 0.7);
    }
    
    .footer-mobile-contact {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
    
    .footer-mobile-contact a {
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.9rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .footer-mobile-contact a i {
        font-size: 0.85rem;
        color: #00A8E8;
    }
    
    .footer-mobile-links {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
    }
    
    .footer-mobile-links a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
    }
    
    .footer-mobile-links .dot {
        color: rgba(255, 255, 255, 0.4);
    }
}

/* 모바일에서 footer 하단 링크 가로 배치 */
@media (max-width: 768px) {
    .footer-links {
        flex-direction: row !important;
        gap: 1.5rem !important;
        justify-content: center;
    }
}

/* 모바일 - greeting 페이지 가운데 정렬 */
@media (max-width: 768px) {
    .greeting-title,
    .greeting-header,
    .message-content,
    .message-intro,
    .message-intro p,
    .message-body,
    .message-body p,
    .vision-box,
    .vision-box p,
    .closing {
        text-align: center;
    }
}

/* 모바일 가로 오버플로우 방지 - html/body 레벨에서만 차단 */
@media (max-width: 768px) {
    html {
        overflow-x: hidden;
    }
    body {
        overflow-x: clip;
        max-width: 100%;
    }
    
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
    
    .table-wrapper,
    .comparison-table,
    .spec-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 연혁 year-tabs 가로 스크롤 + 힌트 */
    .year-tabs-wrapper {
        position: relative;
    }
    .year-tabs-wrapper::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95));
        pointer-events: none;
        z-index: 2;
    }
    .year-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        justify-content: flex-start !important;
    }
    .year-tabs::-webkit-scrollbar {
        height: 4px;
    }
    .year-tabs::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 2px;
    }
    .year-tabs::-webkit-scrollbar-thumb {
        background: #0066CC;
        border-radius: 2px;
    }
    .year-tab {
        flex-shrink: 0 !important;
        white-space: nowrap;
    }
}

/* 모바일 - 연혁 탭 개별 밑줄 제거 (긴 progress 바만 유지) */
@media (max-width: 768px) {
    .year-tab {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }
    .year-tab.active {
        border-bottom: none !important;
    }
}

/* 모바일 - 연혁 active 탭 배경 강조 */
@media (max-width: 768px) {
    .year-tab.active {
        background: linear-gradient(180deg, rgba(0, 102, 204, 0.18) 0%, rgba(0, 102, 204, 0.05) 100%) !important;
        border-radius: 8px 8px 0 0;
    }
}

/* 조직도 - 모바일에서 PC 레이아웃 + 가로 스크롤 */
@media (max-width: 768px) {
    .org-chart-new {
        overflow-x: hidden !important;
        padding: 1.5rem 1rem !important;
    }
    .org-chart-new .chart-content {
        min-width: 0 !important;
    }
    .org-chart-new .tier {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
    }
    .org-chart-new .position-card {
        width: 80% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }
    .org-chart-new .main-card {
        width: 75% !important;
        order: -1;
    }
    .org-chart-new .tier.tier-top {
        flex-direction: row !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    .org-chart-new .tier.tier-top .main-card {
        width: 75% !important;
        order: -1;
        flex-basis: 100% !important;
    }
    .org-chart-new .tier.tier-top .side-card {
        width: calc(50% - 0.5rem) !important;
        order: 1;
    }
    .tier-connector {
        height: 40px !important;
        margin: 1rem 0 !important;
    }
    .tier-connector .connector-line {
        width: 3px !important;
    }
    .tier-connector.branches {
        height: 40px !important;
        margin: 1rem 0 !important;
    }
    .tier-connector .connector-dot {
        display: none !important;
    }
    .tier-middle .side-executive::after,
    .tier-middle .side-executive::before {
        display: none !important;
    }
    .tier-connector.branches .branch-container {
        display: none !important;
    }
    .tier-connector.branches .connector-line {
        height: 100% !important;
    }
    .tier-bottom .dept-card {
        width: 80% !important;
    }
}

/* 모바일 - business-area 헤더 가운데 정렬 */
@media (max-width: 768px) {
    .business-header,
    .business-title,
    .business-subtitle {
        text-align: center;
    }
}

/* 모바일 - business-area 탭 2개 한 줄 배치 */
@media (max-width: 768px) {
    .category-tabs {
        flex-direction: row !important;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.5rem !important;
        padding: 0 0.5rem;
    }
    .category-tabs .tab-btn {
        flex: 1 1 50%;
        padding: 0.7rem 0.8rem !important;
        font-size: 0.9rem;
        justify-content: center;
        min-width: 0;
    }
    .category-tabs .tab-btn i {
        font-size: 0.95rem;
    }
}

/* business-area - 바로가기 화살표 버튼 제거 (모든 환경) */
.product-card .btn-detail {
    display: none !important;
}

/* 모바일 - certification 헤더 가운데 정렬 */
@media (max-width: 768px) {
    .cert-title,
    .cert-subtitle,
    .cert-header {
        text-align: center;
    }
}

/* ============================================
   모바일 - certification 가로 스와이프 슬라이더
   (cert-card 가진 경우만 — 인덱스 cert-item 제외)
   ============================================ */
@media (max-width: 768px) {
    .cert-grid:has(.cert-card) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 1rem !important;
        padding: 0 1rem 1rem;
        margin: 0 -1rem;
    }
    .cert-grid:has(.cert-card)::-webkit-scrollbar {
        display: none;
    }
    
    .cert-grid .cert-card {
        flex: 0 0 85%;
        scroll-snap-align: center;
        min-width: 0;
    }
    
    .cert-card img {
        width: 100%;
        height: auto;
    }
    
    .cert-grid:has(.cert-card)::after {
        content: '';
        flex: 0 0 0.5rem;
    }
}

/* ============================================
   모바일 - certification 슬라이더 (노년층 UX)
   ============================================ */
@media (max-width: 768px) {
    .cert-grid .cert-card {
        padding: 0.25rem !important;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        flex: 0 0 94% !important;
        margin: 0 0.5rem;
    }
    
    .cert-card img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
        border-radius: 8px;
    }
    
    .cert-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem 0.5rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .cert-dots::-webkit-scrollbar {
        display: none;
    }
    
    .cert-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #d0d7de;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: background 0.2s, transform 0.2s;
        flex-shrink: 0;
    }
    .cert-dot.active {
        background: #0066cc;
        transform: scale(1.4);
    }
    
    .cert-nav-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #0066cc;
        color: #fff;
        border: none;
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 10px rgba(0, 102, 204, 0.3);
        transition: transform 0.15s;
        flex-shrink: 0;
    }
    .cert-nav-btn:active {
        transform: scale(0.92);
    }
    .cert-nav-btn:disabled {
        background: #c8ccd0;
        box-shadow: none;
        cursor: not-allowed;
    }
}

@media (min-width: 769px) {
    .cert-dots {
        display: none !important;
    }
}

/* cert-card 높이 제한 해제 (이미지 전체 표시) */
@media (max-width: 768px) {
    .cert-card {
        height: auto !important;
        min-height: 450px;
    }
    .cert-card img {
        height: auto !important;
        width: 100% !important;
    }
}

/* 모바일 - location 헤더 가운데 정렬 */
@media (max-width: 768px) {
    .location-header,
    .location-title,
    .location-subtitle {
        text-align: center;
    }
}

/* 모바일 - location 페이지 연락처 카드 가운데 정렬 (card-content가 있는 구조만) */
@media (max-width: 768px) {
    .info-card:has(.card-content) {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .info-card .card-content {
        width: 100% !important;
        text-align: center !important;
    }
    .info-card .card-content h4,
    .info-card .card-content .main-text,
    .info-card .card-content .sub-text {
        text-align: center !important;
    }
    
    .info-card .card-content > .contact-item {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-bottom: 0.6rem !important;
    }
    .info-card .card-content > .contact-item .label {
        width: auto !important;
        text-align: right !important;
    }
    .info-card .card-content > .contact-item .value {
        text-align: left !important;
    }
    
    .info-card .card-content > .hours-item {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    
    .info-card .copy-btn {
        margin: 0.75rem auto 0 !important;
        display: inline-flex !important;
    }
}

/* 모바일 - contact 헤더 가운데 정렬 */
@media (max-width: 768px) {
    .contact-header,
    .contact-title,
    .contact-subtitle {
        text-align: center;
    }
}

/* 모바일 - ESA 페이지 h1 단어 단위로 줄바꿈 */
@media (max-width: 768px) {
    .esa-hero h1 {
        word-break: keep-all;
        font-size: 2rem !important;
    }
    .esa-hero p {
        word-break: keep-all;
    }
}

/* 모바일 - ESA benefits-grid 카드 한 줄 하나씩 */
@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 모바일 - benefit-card 가운데 정렬 */
@media (max-width: 768px) {
    .benefit-card {
        border-left: none;
        border-top: 4px solid #0066CC;
        text-align: center;
    }
    .benefit-card h4 {
        justify-content: center;
    }
    .benefit-card:hover {
        transform: none !important;
    }
}

/* 모바일 - ESA 설치 이미지 캡션 가운데 정렬 */
@media (max-width: 768px) {
    .install-caption,
    .install-caption h4,
    .install-caption p {
        text-align: center;
    }
}

/* 모바일 - ESA 차별성 섹션 (하부/상부 설치형) */
@media (max-width: 768px) {
    .installation-cards::after {
        display: none !important;
    }
    .install-card-badge {
        position: static !important;
        display: inline-block;
        margin-bottom: 0.75rem;
    }
    .install-card .card-header {
        margin-top: 0 !important;
    }
}

/* 모바일 - ESA 보도자료/성적서 카드 가운데 정렬 */
@media (max-width: 768px) {
    .news-caption,
    .news-caption h4,
    .news-caption p {
        text-align: center;
    }
    .media-grid-three {
        grid-template-columns: 1fr !important;
    }
}

/* 모바일 - ESA 설치 현장 갤러리 한 줄 하나씩 */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr !important;
    }
    section.gallery > .container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* 모바일 - ESA 비교표 metric-row 세로 배치 (영문) */
@media (max-width: 768px) {
    .metric-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
        text-align: center;
    }
    .metric-row .metric-name {
        justify-content: center !important;
    }
    .metric-row .metric-value {
        font-size: 1.1rem;
    }
}

/* 모바일 - ESA 비교표 이모지 아이콘 숨김 */
@media (max-width: 768px) {
    .metric-icon {
        display: none !important;
    }
}

/* 모바일 - ESA 차별성 설치 피처 리스트 이모지 숨김 + 가운데 정렬 */
@media (max-width: 768px) {
    .install-features li::before {
        display: none !important;
        content: none !important;
    }
    .install-features li {
        justify-content: center;
        text-align: center;
        padding: 1rem !important;
    }
}

/* 모바일 - section-title 폰트 크기 조정 */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.6rem !important;
        word-break: keep-all;
    }
    .section-subtitle {
        word-break: keep-all;
    }
}

/* ============================================
   확대 가능한 이미지 (돋보기 아이콘)
   ============================================ */
.zoomable-image {
    position: relative;
    display: inline-block;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 8px;
}
.zoomable-image img {
    display: block;
    transition: transform 0.3s ease;
}
.zoomable-image .zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 102, 204, 0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.zoomable-image:hover .zoom-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.zoomable-image:hover img {
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .zoomable-image .zoom-icon {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1);
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
}

/* 모바일 - RO 페이지 모든 카드 한 줄 하나씩 + 가운데 정렬 */
@media (max-width: 768px) {
    .system-grid,
    .esg-cards-wrapper,
    .certifications-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    .system-card,
    .system-card-header,
    .esg-card,
    .certification-item {
        text-align: center !important;
    }
    .system-card-header {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    .system-card p,
    .esg-card .card-title,
    .esg-card .card-value,
    .esg-card .card-unit,
    .certification-title {
        text-align: center !important;
    }
    
    section > .container > div[style*="max-width: 1100px"] > div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* 모바일 - salt-reuse 폐수 카드 1열 + 레이아웃 겹침 방지 */
@media (max-width: 768px) {
    .need-content > div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    .need-content > div[style*="grid-template-columns"] > .fade-in-up > div[style*="height: 320px"] {
        height: auto !important;
        min-height: 260px;
    }
    .solution-callout {
        margin-top: 2rem !important;
    }
}

/* 모바일 - salt-reuse 공정 흐름도 - 세로 레이아웃 */
@media (max-width: 768px) {
    .process-flow-diagram {
        overflow-x: hidden !important;
        padding: 1.5rem 1rem !important;
    }
    .process-flow-diagram > div[style*="display: flex"][style*="flex-wrap: wrap"] {
        flex-direction: column !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        min-width: 0 !important;
        margin-bottom: 1.5rem !important;
    }
    .process-flow-diagram > div[style*="display: flex"][style*="flex-wrap: wrap"] > div[style*="background"] {
        width: 70% !important;
        box-sizing: border-box !important;
    }
    .process-flow-diagram > div[style*="display: flex"][style*="flex-wrap: wrap"] > div[style*="font-size: 2rem"] {
        transform: rotate(90deg);
        font-size: 1.5rem !important;
    }
    .process-flow-diagram > div[style*="grid-template-columns: 1fr 1fr"] {
        min-width: 0 !important;
        gap: 0.75rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .process-flow-diagram > div[style*="grid-template-columns: 1fr 1fr"] > div {
        min-width: 0 !important;
    }
    .process-flow-diagram > div[style*="grid-template-columns: 1fr 1fr"] > div > div[style*="padding: 2rem"] {
        padding: 1.2rem !important;
    }
    .process-flow-diagram > div[style*="grid-template-columns: 1fr 1fr"] > div > div[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
    }
    .process-flow-diagram > div[style*="grid-template-columns: 1fr 1fr"] > div > div[style*="font-size: 2.5rem"] {
        font-size: 1.8rem !important;
    }
    .process-flow-diagram > div[style*="grid-template-columns: 1fr 1fr"] > div div[style*="font-size: 2rem"][style*="font-weight: 800"] {
        font-size: 1.4rem !important;
    }
    .process-flow-diagram > div[style*="grid-template-columns: 1fr 1fr"] > div > div[style*="padding: 1.2rem"] {
        padding: 0.8rem 0.5rem !important;
        font-size: 0.9rem !important;
    }
    /* 분기선 표시 */
    .flow-branch-line {
        display: block !important;
    }
}

/* ============================================
   모바일 - comparison-table 카드형 전환
   ============================================ */
@media (max-width: 768px) {
    .comparison-table:not(.tech-compare) table,
    .comparison-table:not(.tech-compare) thead,
    .comparison-table:not(.tech-compare) tbody,
    .comparison-table:not(.tech-compare) tr,
    .comparison-table:not(.tech-compare) th,
    .comparison-table:not(.tech-compare) td {
        display: block !important;
        width: 100% !important;
    }
    
    .comparison-table:not(.tech-compare) thead {
        display: none !important;
    }
    
    .comparison-table:not(.tech-compare) table {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    .comparison-table:not(.tech-compare) tbody tr {
        background: white !important;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        margin-bottom: 1rem !important;
        padding: 1.25rem !important;
        border-bottom: none !important;
        text-align: center;
    }
    
    .comparison-table:not(.tech-compare) tbody td {
        padding: 0.5rem !important;
        text-align: center !important;
        border: none !important;
    }
    
    .comparison-table:not(.tech-compare) tbody tr > td:first-child:not([colspan]) {
        display: inline-block !important;
        width: auto !important;
        background: #0066CC;
        color: white !important;
        padding: 0.3rem 0.9rem !important;
        border-radius: 20px;
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem;
    }
    .comparison-table:not(.tech-compare) tbody tr > td[colspan] {
        display: block !important;
        background: transparent !important;
        width: 100% !important;
    }
    
    .comparison-table:not(.tech-compare) tbody tr > td:nth-child(2) {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        padding: 0.5rem !important;
    }
    
    .comparison-table:not(.tech-compare) tbody tr > td:nth-child(3) {
        font-size: 0.95rem !important;
        padding: 0.5rem 0 !important;
        color: #5A6C7D !important;
    }
    
    .comparison-table:not(.tech-compare) tbody tr > td:nth-child(4) {
        font-size: 1.3rem !important;
        font-weight: 800 !important;
        color: #0066CC !important;
        padding-top: 0.8rem !important;
        border-top: 1px solid #f0f0f0 !important;
        margin-top: 0.5rem !important;
    }
    
    .comparison-table:not(.tech-compare) tbody tr:last-child {
        background: white !important;
    }
    .comparison-table:not(.tech-compare) tbody tr:last-child > td[colspan] {
        background: transparent !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #2C3E50 !important;
        padding: 0.5rem !important;
    }
    .comparison-table:not(.tech-compare) tbody tr:last-child > td:last-child {
        color: #4CAF50 !important;
        border-top: 1px solid rgba(0,0,0,0.1) !important;
    }
}

/* 모바일 - salt-reuse 특징/장점 카드 1열 */
@media (max-width: 768px) {
    section.certifications > .container > div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   개요 섹션 - 모바일 "더 보기" 토글
   ============================================ */
.overview-toggle {
    display: none;
}

@media (max-width: 768px) {
    .overview-box {
        padding: 1.5rem !important;
    }
    .overview-content {
        position: relative;
        max-height: 9em;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }
    .overview-content::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 3em;
        background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
        pointer-events: none;
        transition: opacity 0.3s;
    }
    .overview-content.expanded {
        max-height: 2000px;
    }
    .overview-content.expanded::after {
        opacity: 0;
    }
    .overview-toggle {
        display: block;
        margin: 1rem auto 0;
        background: transparent;
        border: 1.5px solid #0066CC;
        color: #0066CC;
        padding: 0.6rem 1.5rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .overview-toggle:active {
        background: #0066CC;
        color: white;
    }
}

/* ============================================
   공업용수 활용 공정 플로우차트 - 모바일 컴팩트
   ============================================ */
@media (max-width: 768px) {
    .process-flowchart {
        padding: 1.25rem !important;
        margin: 2rem auto !important;
    }
    .process-flowchart > div[style*="display: flex"] {
        gap: 0.75rem !important;
    }
    .process-flowchart > div > div[style*="writing-mode: vertical-rl"] {
        padding: 1rem 0.4rem !important;
        font-size: 0.95rem !important;
        min-height: auto !important;
    }
    .process-flowchart > div > div[style*="flex: 1"] > div[style*="padding-left"] {
        padding-left: 0 !important;
    }
    .process-flowchart > div > div[style*="flex: 1"] > div {
        margin-bottom: 0.75rem !important;
    }
    .process-flowchart div[style*="position: absolute"][style*="background: #2C3E50"] {
        display: none !important;
    }
    .process-flowchart div[style*="flex: 1"] > div > div[style*="display: flex"] > div[style*="height: 3px"][style*="background: #2C3E50"] {
        display: none !important;
    }
    .process-flowchart div[style*="border: 3px solid #2C3E50"] {
        padding: 0.6rem 1rem !important;
        font-size: 0.95rem !important;
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .process-flowchart div[style*="flex: 1"] > div > div[style*="display: flex"][style*="align-items: center"],
    .process-flowchart div[style*="flex: 1"] > div > div[style*="display: flex"][style*="align-items: flex-start"] {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }
    .process-flowchart div[style*="background: #E3F2FD"] {
        width: 100% !important;
        text-align: center !important;
        font-size: 0.85rem !important;
        padding: 0.6rem 1rem !important;
    }
    .process-flowchart div[style*="background: #FFF3E0"] {
        font-size: 0.8rem !important;
    }
    .process-flowchart div[style*="border-top: 2px dashed"] {
        margin: 1rem 0 !important;
    }
}

/* ============================================
   처리공정 탭 (모바일) - membrane-system 페이지
   ============================================ */
.process-stage-tabs {
    display: none;
}

@media (max-width: 768px) {
    .process-stage-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
        margin-bottom: 0;
        padding: 0 0.25rem;
    }
    .proc-tab {
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 0.7rem 0.3rem;
        font-size: 0.78rem;
        font-weight: 600;
        color: #5A6C7D;
        cursor: pointer;
        transition: all 0.2s ease;
        line-height: 1.2;
        text-align: center;
    }
    .proc-tab.active {
        background: linear-gradient(135deg, #0066CC, #00A8E8);
        color: white;
        border-color: #0066CC;
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
    }
    
    .process-stage-grid {
        grid-template-columns: 1fr !important;
        margin-top: 1.5rem !important;
    }
    
    .process-stage-grid .process-stage {
        display: none !important;
    }
    .process-stage-grid[data-active="pre"] .process-stage[data-stage="pre"],
    .process-stage-grid[data-active="stage1"] .process-stage[data-stage="stage1"],
    .process-stage-grid[data-active="stage2"] .process-stage[data-stage="stage2"] {
        display: flex !important;
    }
}

/* ============================================
   시공사례 탭 버튼 - 모바일 (case-tab-btn)
   ============================================ */
@media (max-width: 768px) {
    .case-tab-navigation {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        margin: 1.5rem 0 !important;
    }
    .case-tab-btn {
        padding: 0.85rem 1rem !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        border-radius: 10px !important;
        background: white !important;
        color: #2C3E50 !important;
        border: 2px solid #E9ECEF !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }
    .case-tab-btn.active {
        background: linear-gradient(135deg, #0066CC, #00A8E8) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3) !important;
    }
    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .gallery-item img {
        height: auto !important;
        max-height: 280px;
    }
}

/* ============================================
   처리 공정도 탭 (.tab-btn) - 모바일
   ============================================ */
@media (max-width: 768px) {
    .tab-navigation {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        margin: 1.5rem 0 !important;
    }
    .tab-btn {
        padding: 0.85rem 0.75rem !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        border-radius: 10px !important;
        background: white !important;
        color: #2C3E50 !important;
        border: 2px solid #E9ECEF !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }
    .tab-btn.active {
        background: linear-gradient(135deg, #0066CC, #00A8E8) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3) !important;
    }
}

/* ============================================
   A-MDT 시리즈 탭 (amdt-tab-btn) - 모바일
   ============================================ */
@media (max-width: 768px) {
    .amdt-tab-btn {
        padding: 0.8rem 1rem !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        width: auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: keep-all !important;
        line-height: 1.3 !important;
        background: white !important;
        color: #1a2a4a !important;
        border: 2px solid #1a2a4a !important;
        box-shadow: none !important;
        flex: 1 !important;
        text-align: center !important;
    }
    .amdt-tab-btn.active {
        background: #1a2a4a !important;
        color: white !important;
        border: 2px solid #1a2a4a !important;
    }
}

/* 모바일 - mobile-water-treatment 주요부품 카드 1열 + 가운데 정렬 */
@media (max-width: 768px) {
    .amdt-tab-panel div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    .amdt-tab-panel div[style*="grid-template-columns"] > div[style*="display: flex"] {
        justify-content: center !important;
        text-align: center;
    }
}

/* ============================================
   이동형/분산형 슬라이더 - PC/모바일 슬라이드 전환
   ============================================ */
.slide-mobile-only {
    display: none !important;
}
.slide-pc-only {
    display: flex !important;
}

@media (max-width: 768px) {
    .slide-mobile-only {
        display: flex !important;
    }
    .slide-pc-only {
        display: none !important;
    }
}

/* ============================================
   모델 사양 탭 (모바일) - mobile-water-treatment
   ============================================ */
.spec-model-tabs {
    display: none;
}

@media (max-width: 768px) {
    .spec-model-tabs {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0.3rem;
        margin-bottom: 0;
    }
    .spec-tab {
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        padding: 0.5rem 0.2rem;
        font-size: 0.7rem;
        font-weight: 600;
        color: #5A6C7D;
        cursor: pointer;
        transition: all 0.2s ease;
        line-height: 1.2;
        text-align: center;
    }
    .spec-tab.active {
        background: linear-gradient(135deg, #2C3E50, #34495E);
        color: white;
        border-color: #2C3E50;
        box-shadow: 0 4px 10px rgba(44, 62, 80, 0.25);
    }
    
    .spec-table { overflow-x: visible !important; margin-top: 1rem !important; }
    .spec-table table { display: table !important; width: 100% !important; }
    .spec-table thead { display: none !important; }
    .spec-table tbody { display: table-row-group !important; }
    .spec-table tr { display: table-row !important; }
    .spec-table td { display: none !important; }
    
    .spec-table tbody tr > td:first-child {
        display: table-cell !important;
        background: #f8f9fa !important;
        color: #0066CC !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        width: 35% !important;
        padding: 1rem 0.5rem !important;
    }
    
    .spec-table[data-active-col="1"] tbody tr > td:nth-child(2),
    .spec-table[data-active-col="2"] tbody tr > td:nth-child(3),
    .spec-table[data-active-col="3"] tbody tr > td:nth-child(4),
    .spec-table[data-active-col="4"] tbody tr > td:nth-child(5),
    .spec-table[data-active-col="5"] tbody tr > td:nth-child(6) {
        display: table-cell !important;
        text-align: center !important;
        vertical-align: middle !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        padding: 1rem 0.5rem !important;
        line-height: 1.5 !important;
    }
}

/* ============================================
   설치현장 탭 (site-tab-btn) + 사진 그리드 - 모바일
   ============================================ */
@media (max-width: 768px) {
    .site-tab-btn {
        padding: 0.85rem 1rem !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        border-radius: 10px !important;
        background: white !important;
        color: #2C3E50 !important;
        border: 2px solid #E9ECEF !important;
        box-shadow: none !important;
    }
    .site-tab-btn.active {
        background: linear-gradient(135deg, #0066CC, #00A8E8) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3) !important;
    }
    
    .site-tab-panel div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .site-tab-panel div[style*="grid-template-columns"] > .fade-in-up img {
        height: auto !important;
        max-height: 280px;
    }
}

/* 설치현장 탭 컨테이너 세로 배치 */
@media (max-width: 768px) {
    div[style*="justify-content: center"]:has(> .site-tab-btn) {
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin: 1.5rem 0 !important;
    }
}

/* ============================================
   wastewater-treatment 모바일 가운데 정렬 + 레이아웃
   ============================================ */
@media (max-width: 768px) {
    .type-card {
        text-align: center !important;
    }
    .type-card h3 {
        justify-content: center;
    }
    .type-card p {
        text-align: center;
    }
    .overview .overview-box {
        text-align: center;
        padding: 1.5rem !important;
    }
    .tech-image-wrapper {
        text-align: center;
    }
    .gallery-grid {
        grid-template-columns: 1fr !important;
    }
    .gallery-item {
        text-align: center;
    }
    .gallery-caption {
        text-align: center !important;
    }
}

/* ============================================
   PTFE-TMCS 섹션 탭 네비 - 모바일 고정
   ============================================ */
@media (max-width: 768px) {
    .section-tab-nav {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        background: white !important;
    }
}

/* 탭 네비 fixed 시 첫 섹션 밀림 방지 + 여유 여백 */
@media (max-width: 768px) {
    .section-tab-nav + section {
        padding-top: 140px !important;
    }
    .section-tab-nav {
        padding: 0.5rem 0 !important;
    }
}

/* ============================================
   PTFE-TMCS 기술소개 섹션 - 모바일 레이아웃
   ============================================ */
@media (max-width: 768px) {
    #section-intro div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    #section-intro div[style*="grid-template-columns: 1fr 1fr"] > .fade-in-up:last-child {
        order: -1;
    }
    #section-intro div[style*="grid-template-columns"] p[style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
        text-align: center;
        line-height: 1.5 !important;
    }
    #section-intro ul {
        margin-top: 0.5rem;
    }
    #section-intro ul li {
        font-size: 0.9rem !important;
        padding: 0.5rem 0 !important;
    }
}

/* ============================================
   PTFE-TMCS 전체 모바일 가운데 정렬
   ============================================ */
@media (max-width: 768px) {
    .areas-grid {
        grid-template-columns: 1fr !important;
    }
    .area-card {
        text-align: center !important;
    }
    .area-card .area-icon {
        margin: 0 auto 1rem !important;
    }
    .area-card h3,
    .area-card p {
        text-align: center;
    }
    
    .features-grid {
        grid-template-columns: 1fr !important;
    }
    .feature-card {
        text-align: center !important;
    }
    .feature-card .feature-icon {
        margin: 0 auto 1.5rem !important;
    }
    .feature-card h3,
    .feature-card p {
        text-align: center;
    }
    
    #section-application div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #section-application div[style*="display: flex"][style*="align-items: flex-start"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }
    
    #section-features div[style*="grid-template-columns: 6fr 4fr"],
    #section-features div[style*="grid-template-columns: 3fr 2fr"],
    #section-features + section div[style*="grid-template-columns: 1fr 1fr"],
    #section-features ~ section div[style*="grid-template-columns: 7fr 3fr"] {
        grid-template-columns: 1fr !important;
    }
    
    .key-points {
        grid-template-columns: 1fr !important;
    }
    .key-point-item {
        text-align: center !important;
    }
    
    #section-cases table {
        min-width: 600px;
    }
    #section-cases div[style*="overflow-x: auto"],
    #section-cases .fade-in-up {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    #section-intro .section-header,
    #section-application .section-header,
    #section-features .section-header,
    #section-cases .section-header {
        text-align: center;
    }
}

/* ============================================
   PTFE-TMCS 특징 하위 섹션 - 모바일 레이아웃
   ============================================ */
@media (max-width: 768px) {
    #section-features h3[style*="font-size: 2.5rem"] {
        font-size: 1.4rem !important;
        text-align: center;
        margin-bottom: 1.5rem !important;
    }
    #section-features div[style*="display: flex"][style*="align-items: flex-start"] {
        text-align: left;
        justify-content: flex-start;
        padding: 0.6rem 0 !important;
    }
    #section-features div[style*="background: #f0f0f0"] p,
    #section-features div[style*="background: #EBF5FF"] p {
        font-size: 1rem !important;
    }
    #section-features + section h3[style*="font-size: 2.5rem"] {
        font-size: 1.4rem !important;
        text-align: center;
    }
    #section-features + section li[style*="white-space: nowrap"] {
        white-space: normal !important;
    }
    section p[style*="font-size: 1.6rem"] {
        font-size: 1rem !important;
        text-align: left;
    }
    .fade-in-up[style*="overflow-x: auto"] {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   PTFE-TMCS 막분리법비교 / 사양표 탭 (모바일)
   ============================================ */
.ptfe-spec-tabs {
    display: none;
}

@media (max-width: 768px) {
    .ptfe-spec-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        padding: 0 1rem;
        margin-top: 2rem;
    }
    .ptfe-spec-tab {
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 0.85rem 0.5rem;
        font-size: 0.9rem;
        font-weight: 600;
        color: #5A6C7D;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
    }
    .ptfe-spec-tab.active {
        background: linear-gradient(135deg, #0066CC, #00A8E8);
        color: white;
        border-color: #0066CC;
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
    }
    .ptfe-spec-panel {
        padding: 40px 0 !important;
    }
    .ptfe-spec-panel .section-header {
        display: none !important;
    }
}

/* PTFE 탭 네비 - hero 영역에서 숨김 전환 부드럽게 */
.section-tab-nav {
    transition: opacity 0.3s ease, top 0.3s ease;
}

/* ============================================
   PTFE-TMCS 주요사례 테이블 → 카드형 (모바일)
   ============================================ */
@media (max-width: 768px) {
    #section-cases table,
    #section-cases thead,
    #section-cases tbody,
    #section-cases tr,
    #section-cases th,
    #section-cases td {
        display: block !important;
        width: 100% !important;
    }
    
    #section-cases thead {
        display: none !important;
    }
    
    #section-cases table {
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        min-width: 0 !important;
    }
    
    #section-cases tbody tr {
        background: white !important;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        margin-bottom: 1rem;
        padding: 1.25rem !important;
        text-align: center;
        border-bottom: none !important;
    }
    
    #section-cases tbody td {
        padding: 0.4rem 0.5rem !important;
        text-align: center !important;
        border: none !important;
        border-bottom: none !important;
        font-size: 0.9rem !important;
    }
    
    #section-cases tbody tr > td:nth-child(1) {
        display: inline-block !important;
        width: auto !important;
        background: #0066CC;
        color: white !important;
        padding: 0.3rem 0.9rem !important;
        border-radius: 20px;
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem;
    }
    
    #section-cases tbody tr > td:nth-child(2) {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #2C3E50 !important;
        padding: 0.25rem 0 !important;
    }
    
    #section-cases tbody tr > td:nth-child(3) {
        font-size: 0.95rem !important;
        color: #5A6C7D !important;
        padding: 0.25rem 0 0.5rem 0 !important;
    }
    
    #section-cases tbody tr > td:nth-child(4)::before {
        content: 'Inlet: ';
        font-weight: 700;
        color: #0066CC;
    }
    #section-cases tbody tr > td:nth-child(5)::before {
        content: 'Target: ';
        font-weight: 700;
        color: #0066CC;
    }
    #section-cases tbody tr > td:nth-child(6)::before {
        content: 'Process: ';
        font-weight: 700;
        color: #0066CC;
    }
    
    #section-cases tbody tr > td:nth-child(7) {
        padding-top: 0.75rem !important;
        border-top: 1px solid #f0f0f0 !important;
        margin-top: 0.5rem;
    }
    #section-cases tbody tr > td:nth-child(7) > div {
        justify-content: center !important;
    }
    #section-cases .case-photo {
        width: 70px !important;
        height: 70px !important;
    }
}

/* PTFE 주요사례 부모 가로 스크롤 방지 */
@media (max-width: 768px) {
    #section-cases > div > .fade-in-up {
        overflow-x: visible !important;
        overflow: visible !important;
    }
    #section-cases .case-photo {
        width: 65px !important;
        height: 65px !important;
    }
    #section-cases tbody tr > td:nth-child(7) > div {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* ============================================
   PTFE-TMCS 섹션 탭 네비 - 모바일 sticky
   ============================================ */
@media (max-width: 768px) {
    .section-tab-nav {
        position: sticky !important;
        top: 60px !important;
        z-index: 999 !important;
        background: white !important;
    }
}

/* ============================================
   PTFE-TMCS 막분리법 비교 + 제품별 사양표 카드형 (모바일)
   ============================================ */
.ptfe-compare-tabs,
.ptfe-product-tabs {
    display: none;
}

@media (max-width: 768px) {
    /* === 막분리법 비교 === */
    .ptfe-compare-tabs { display: none !important; }
    .ptfe-compare-desktop { display: none !important; }
    .ptfe-compare-mobile { display: block !important; margin-top: 1.5rem; }
    .ptfe-compare-cards { display: flex; flex-direction: column; gap: 0.5rem; }
    .ptfe-cmp-card {
        display: flex;
        align-items: center;
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        overflow: hidden;
    }
    .ptfe-cmp-label {
        flex-shrink: 0;
        width: 35%;
        padding: 0.85rem 0.6rem;
        background: #f8f9fa;
        color: #0066CC;
        font-weight: 700;
        font-size: 0.8rem;
        text-align: center;
        border-right: 2px solid #e9ecef;
        word-break: keep-all;
    }
    .ptfe-cmp-value {
        flex: 1;
        padding: 0.85rem 0.75rem;
        font-size: 0.9rem;
        color: #2C3E50;
        font-weight: 600;
        line-height: 1.5;
    }
    .ptfe-cmp-card.membrane { border-left: 3px solid #0066CC; }
    
    /* === 제품별 사양 === */
    .ptfe-product-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    .ptfe-prd-tab {
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 0.75rem 0.5rem;
        font-size: 0.9rem;
        font-weight: 600;
        color: #5A6C7D;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
    }
    .ptfe-prd-tab.active {
        background: linear-gradient(135deg, #1B2A4A, #2C3E60);
        color: white;
        border-color: #1B2A4A;
        box-shadow: 0 4px 12px rgba(27, 42, 74, 0.25);
    }
    
    .ptfe-product-table { overflow-x: visible !important; }
    .ptfe-product-table table { display: table !important; width: 100% !important; min-width: 0 !important; }
    .ptfe-product-table thead { display: none !important; }
    .ptfe-product-table tbody { display: table-row-group !important; }
    .ptfe-product-table tr { display: table-row !important; }
    .ptfe-product-table td { display: none !important; }
    
    /* 라벨 셀(1번째)은 항상 표시 */
    .ptfe-product-table tbody tr > td:first-child {
        display: table-cell !important;
        background: #f8f9fa !important;
        color: #1B2A4A !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        width: 40% !important;
        padding: 0.85rem 0.5rem !important;
    }
    
    /* 선택된 모델 컬럼만 표시 */
    .ptfe-product-table[data-active-col="1"] tbody tr > td:nth-child(2),
    .ptfe-product-table[data-active-col="2"] tbody tr > td:nth-child(3),
    .ptfe-product-table[data-active-col="3"] tbody tr > td:nth-child(4) {
        display: table-cell !important;
        text-align: center !important;
        vertical-align: middle !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        padding: 0.85rem 0.5rem !important;
        line-height: 1.5 !important;
        color: #2C3E50 !important;
    }
}

/* ============================================
   인덱스 인증 섹션 cert-grid 모바일 1열
   ============================================ */
@media (max-width: 768px) {
    .certifications-section .cert-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    .cert-item {
        text-align: center;
    }
}
/* ============================================
   모바일 - comparison-table 카드형 전환
   ============================================ */
@media (max-width: 768px) {
    .comparison-table:not(.tech-compare) table,
    .comparison-table:not(.tech-compare) thead,
    .comparison-table:not(.tech-compare) tbody,
    .comparison-table:not(.tech-compare) tr,
    .comparison-table:not(.tech-compare) th,
    .comparison-table:not(.tech-compare) td {
        display: block !important;
        width: 100% !important;
    }
    
    /* 헤더 숨김 */
    .comparison-table:not(.tech-compare) thead {
        display: none !important;
    }
    
    /* 테이블 자체 */
    .comparison-table:not(.tech-compare) table {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    /* 각 행을 카드로 */
    .comparison-table:not(.tech-compare) tbody tr {
        background: white !important;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        margin-bottom: 1rem !important;
        padding: 1.25rem !important;
        border-bottom: none !important;
        text-align: center;
    }
    
    /* 각 셀 패딩 축소 */
    .comparison-table:not(.tech-compare) tbody td {
        padding: 0.5rem !important;
        text-align: center !important;
        border: none !important;
    }
    
    /* 번호는 작은 뱃지처럼 (단, colspan 없는 일반 행만) */
    .comparison-table:not(.tech-compare) tbody tr > td:first-child:not([colspan]) {
        display: inline-block !important;
        width: auto !important;
        background: #0066CC;
        color: white !important;
        padding: 0.3rem 0.9rem !important;
        border-radius: 20px;
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem;
    }
    /* colspan이 있는 합계 행의 첫 셀은 뱃지 아님 */
    .comparison-table:not(.tech-compare) tbody tr > td[colspan] {
        display: block !important;
        background: transparent !important;
        width: 100% !important;
    }
    
    /* 품목 (2번째 셀) - 타이틀 */
    .comparison-table:not(.tech-compare) tbody tr > td:nth-child(2) {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        padding: 0.5rem !important;
    }
    
    /* 내용 (3번째 셀) - 본문 */
    .comparison-table:not(.tech-compare) tbody tr > td:nth-child(3) {
        font-size: 0.95rem !important;
        padding: 0.5rem 0 !important;
        color: #5A6C7D !important;
    }
    
    /* 금액 (4번째 셀) - 강조 */
    .comparison-table:not(.tech-compare) tbody tr > td:nth-child(4) {
        font-size: 1.3rem !important;
        font-weight: 800 !important;
        color: #0066CC !important;
        padding-top: 0.8rem !important;
        border-top: 1px solid #f0f0f0 !important;
        margin-top: 0.5rem !important;
    }
    
    /* 연간 총합 행 - 배경 없이 심플하게 */
    .comparison-table:not(.tech-compare) tbody tr:last-child {
        background: white !important;
    }
    .comparison-table:not(.tech-compare) tbody tr:last-child > td[colspan] {
        background: transparent !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #2C3E50 !important;
        padding: 0.5rem !important;
    }
    .comparison-table:not(.tech-compare) tbody tr:last-child > td:last-child {
        color: #4CAF50 !important;
        border-top: 1px solid rgba(0,0,0,0.1) !important;
    }
}

/* 모바일 - salt-reuse 특징/장점 카드 1열 */
@media (max-width: 768px) {
    section.certifications > .container > div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   기술 비교 탭 - 공법 3개 중 하나만 선택해서 표시 (모바일)
   PC(769px+): 원본 4열 테이블 유지
   ============================================ */

/* PC에서 탭 숨김 */
.tech-tabs {
    display: none;
}

@media (max-width: 768px) {
    /* 탭 버튼 3개 */
    .tech-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    .tech-tab {
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 0.85rem 0.5rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: #5A6C7D;
        cursor: pointer;
        transition: all 0.2s ease;
        line-height: 1.3;
        text-align: center;
    }
    .tech-tab span {
        font-size: 0.75rem;
        font-weight: 500;
        opacity: 0.7;
    }
    .tech-tab.active {
        background: linear-gradient(135deg, #0066CC, #00A8E8);
        color: white;
        border-color: #0066CC;
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
    }
    
    /* tech-compare 테이블은 카드형 예외 (원본 테이블 유지, 컬럼만 선택) */
    .comparison-table.tech-compare table {
        display: table !important;
        width: 100% !important;
    }
    .comparison-table.tech-compare thead {
        display: none !important;
    }
    .comparison-table.tech-compare tbody {
        display: table-row-group !important;
    }
    .comparison-table.tech-compare tr {
        display: table-row !important;
        background: transparent !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    .comparison-table.tech-compare tbody td {
        display: none !important;
        padding: 1rem 0.75rem !important;
        border: none !important;
        width: auto !important;
    }
    /* 라벨(1번째 셀)은 항상 표시 */
    .comparison-table.tech-compare tbody tr > td:first-child {
        display: table-cell !important;
        background: #F8F9FA !important;
        color: #0066CC !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        text-align: center !important;
        width: 30% !important;
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        padding: 1rem 0.5rem !important;
    }
    /* active 컬럼에 해당하는 셀만 표시 */
    .comparison-table.tech-compare[data-active-col="1"] tbody tr > td:nth-child(2),
    .comparison-table.tech-compare[data-active-col="2"] tbody tr > td:nth-child(3),
    .comparison-table.tech-compare[data-active-col="3"] tbody tr > td:nth-child(4) {
        display: table-cell !important;
        font-size: 0.9rem !important;
        text-align: left !important;
        color: #2C3E50 !important;
        font-weight: 600 !important;
        line-height: 1.7 !important;
        background: #F8F9FA !important;
    }
    /* 당사 공법(3번) 선택 시 연녹 배경 */
    .comparison-table.tech-compare[data-active-col="3"] tbody tr > td:nth-child(4) {
        background: #F1F8F4 !important;
    }
    .comparison-table.tech-compare[data-active-col="3"] tbody tr:nth-child(4) > td:nth-child(4) {
        background: #F1F8F4 !important;
    }
}

/* 모바일 푸터 가운뎃점 - 전역 .dot 원형 배경 오버라이드 */
@media (max-width: 768px) {
    .footer-mobile-links .dot {
        color: rgba(255, 255, 255, 0.4);
        background: transparent !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        display: inline !important;
    }
}



/* ============================================
   조직도 모바일 - 가로 스크롤 + 대표이사 중앙 정렬
   ============================================ */
@media (max-width: 768px) {
    .org-chart-new {
        overflow-x: hidden !important;
    }
}

/* ============================================
   모바일 네비 - KOR/EN 위치 (Support 아래)
   ============================================ */
@media (max-width: 768px) {
    .mnav-lang-switch {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 1.2rem 1.5rem;
        margin-top: 0.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    .mnav-lang-switch .mnav-lang {
        font-size: 0.95rem;
        color: #999;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s;
    }
    .mnav-lang-switch .mnav-lang.active {
        color: #0066CC;
        font-weight: 700;
    }
    .mnav-lang-switch span {
        color: #ccc;
    }
    .mnav-footer:empty {
        display: none;
    }
}

/* ============================================
   모바일 - hero 스크롤 인디케이터 숨김
   ============================================ */
@media (max-width: 768px) {
    .scroll-indicator {
        display: none !important;
    }
}

/* ============================================
   모바일 hero - dvh로 실제 뷰포트 맞춤
   ============================================ */
@media (max-width: 768px) {
    .hero,
    .ro-hero,
    .esa-hero,
    .ptfe-hero,
    .membrane-hero {
        height: 100dvh;
    }
}

/* ============================================
   모바일 hero 콘텐츠 - navbar 겹침 방지
   ============================================ */
@media (max-width: 768px) {
    .ptfe-hero,
    .ro-hero,
    .esa-hero,
    .membrane-hero,
    .hero {
        padding-top: 60px !important;
    }
}

/* PC에서 모바일 비교 카드 숨김 */
.ptfe-compare-mobile {
    display: none;
}

/* ============================================
   ESA 페이지 - 모바일 가로 넘침 방지
   ============================================ */
@media (max-width: 768px) {
    /* 인라인 3열 그리드 전부 1열로 */
    .esa-hero ~ section div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    /* 설치 갤러리 이미지 높이 자동 */
    .gallery-item img {
        height: auto !important;
        max-height: 250px;
        object-fit: cover;
    }
    /* comparison-table 가로 스크롤 - ESA 전용 */
    .esa-hero ~ section .comparison-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .esa-hero ~ section .comparison-table table {
        min-width: 500px;
    }
}

/* ============================================
   Salt Reuse - Maintenance Cost Table Mobile
   ============================================ */
@media (max-width: 768px) {
    .certifications .comparison-table {
        overflow-x: visible !important;
    }
    .certifications .comparison-table table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .certifications .comparison-table thead {
        display: none !important;
    }
    .certifications .comparison-table tbody {
        display: block !important;
    }
    .certifications .comparison-table tr {
        display: block !important;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        margin-bottom: 1rem;
        padding: 1.25rem !important;
        text-align: center;
        border: none !important;
    }
    .certifications .comparison-table td {
        display: block !important;
        border: none !important;
        padding: 0.4rem 0.75rem !important;
        text-align: center !important;
        width: auto !important;
        font-size: 0.9rem !important;
    }
    .certifications .comparison-table td[colspan] {
        border-radius: 12px;
    }
}