/* =========================================================
   파일명: /assets/css/mobile.css
   역할: 모바일 전용 레이아웃
   원칙: !important 없이 PC 스타일보다 나중에 로드되는 순서로 정상 덮어쓰기
========================================================= */
@media(max-width:768px){
  .container{max-width:calc(100% - 24px)}
  .utility-bar{display:none}
  .site-header{z-index:20000}
  .header-inner{height:74px}
  .logo{min-width:0;flex-basis:auto}
  .logo img{width:62px;height:62px}
  .menu-toggle{display:flex;align-items:center;justify-content:center;flex-direction:column;width:48px;height:48px;border:1px solid #d9e6f3;border-radius:0;background:#fff;box-shadow:0 8px 22px rgba(15,45,80,.16)}

  /* [모바일 메뉴 수정]
     PC 메뉴의 left:50% / transform:translateX(-50%) 값이 모바일에 남아
     메뉴 패널이 화면 밖으로 밀리던 문제를 여기서 명확히 초기화합니다. */
  /* [모바일 메뉴 구조 정리]
     PC 메뉴에서 상속되던 height:100%, justify-content:center, white-space:nowrap 때문에
     메뉴 항목이 패널 중앙으로 밀리며 상단에 큰 빈 공간이 생기던 문제를 제거합니다. */
  .main-nav{
    display:none;
    position:fixed;
    top:86px;
    left:12px;
    right:12px;
    bottom:auto;
    width:auto;
    height:auto;
    max-height:calc(100dvh - 104px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
    margin:0;
    padding:10px;
    border:1px solid #d8e7f6;
    border-radius:0;
    background:#f5f9fd;
    box-shadow:0 18px 44px rgba(12,39,75,.18);
    z-index:20001;
    transform:none;
    white-space:normal;
  }
  .main-nav.active{display:flex}
  body.mobile-menu-open{overflow:hidden}
  .main-nav .nav-item{width:100%;margin:0;flex:0 0 auto}
  .main-nav .nav-link{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:54px;height:auto;padding:15px 16px;border:0;border-radius:0;background:#fff;color:#10243d;font-size:16px;font-weight:900;box-shadow:0 6px 16px rgba(15,45,80,.06)}
  .main-nav .nav-item.active>.nav-link,.main-nav .nav-link:hover{background:#eaf5ff;color:#0f66bb}
  .main-nav .dropdown,
  .main-nav .nav-item.open .dropdown,
  .main-nav .nav-item:hover>.dropdown{display:none}
  .main-nav .dropdown a{display:none}
  .home-hero{min-height:560px}
  .home-hero h1{font-size:34px;letter-spacing:-1.4px}
  .home-hero p{font-size:16px}
  .hero-product-search{grid-template-columns:1fr;gap:9px;width:100%;margin:20px 0 18px;padding:8px;border-radius:0}
  .hero-product-search input,.hero-product-search button{height:52px}
  .hero-quick-menu{display:grid;grid-template-columns:repeat(2,1fr)}
  .hero-quick-btn{font-size:13px;padding:0 10px}
  .quick-menu{grid-template-columns:1fr;margin-top:18px}
  .section-block{padding:42px 0}
  .section-head h2{font-size:30px}
  .main-layout{display:block;padding-top:24px}
  .main-layout.has-sidebar{display:block}
  .main-layout .sidebar,
  .main-layout.has-sidebar > .sidebar,
  aside.sidebar,
  nav.sidebar{display:none}
  .layout-content{width:100%}
  .content-card{padding:24px;border-radius:0}
  .content-card h2{font-size:28px}

  .feature-grid{grid-template-columns:1fr}
  .history-table th,.history-table td{display:block;width:auto}
  .history-table th{border-bottom:0}
  .page-intro-card{grid-template-columns:1fr;gap:22px;padding:26px;border-radius:0}
  .page-intro-text h2{font-size:34px}
  .page-intro-text p{font-size:16px}
  .page-intro-image{width:100%;max-width:100%;border-radius:0;margin:0 auto}
  .page-intro-image img,.product-intro-card .page-intro-image img{width:100%;height:auto;min-height:0;max-height:none;object-fit:contain;object-position:center}
  .category-grid,.product-grid,.case-grid,.detail-gallery,.case-detail-card .detail-gallery{grid-template-columns:1fr}
  .product-search{grid-template-columns:1fr}
  .footer-inner{display:block}
  .page-banner .container{padding:42px 0}
  .page-banner h1{font-size:32px}
  .page-banner p{font-size:15px}
}


/* =========================================================
   태블릿/좁은 PC 폭 보정
   - sidebar 숨김은 위 768px 이하 모바일 규칙에서만 처리
   - 769px 이상에서는 PC로 판단하여 좌측 sidebar를 유지
   - 기존 1024px 이하 display:none 규칙 제거
========================================================= */
@media(min-width:769px) and (max-width:1024px){
  .container{max-width:calc(100% - 24px)}
  .main-layout.has-sidebar{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;padding-top:26px}
  .layout-content{min-width:0}
}


/* =========================================================
   [2026-05-10] 제품소개 와이드 보정 이관
   - 이전 고정 max-width 방식은 /assets/css/product-responsive.css 로 이관했습니다.
   - 제품소개 페이지가 다른 페이지와 다르게 좁게 고정되는 원인이 되었던
     body[data-sidebar-type="products"] 전용 width:min(1760px/1840px, ...) 규칙을 제거했습니다.
========================================================= */

/* =========================================================
   [2026-05-10] 메인페이지 차별화 포인트 모바일 깨짐 복구
   원인:
   - 모바일 메뉴 수정 패치 과정에서 메인 전용 모바일 보정 규칙이 빠져
     PC용 2열 grid가 모바일에서도 유지됨.
   - 그 결과 왼쪽 문구 영역이 극단적으로 좁아져 글자가 세로로 깨짐.
   수정:
   - 메인 주력 카드와 차별화 포인트를 모바일에서 1열 구조로 고정.
   - 문구 영역 최소폭/줄바꿈/카드 여백을 모바일 기준으로 재정리.
========================================================= */
@media(max-width:768px){
  .home-primary-products{
    margin-top:18px;
    padding-bottom:22px;
  }

  .home-section-title{
    padding:0 8px;
    margin-bottom:16px;
    text-align:left;
  }

  .home-section-title h2{
    font-size:30px;
    line-height:1.25;
    letter-spacing:-1.2px;
  }

  .home-section-title p{
    font-size:15px;
    line-height:1.65;
  }

  .home-image-card-grid.quick-menu{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin-top:16px;
  }

  .home-image-card{
    aspect-ratio:4 / 5;
    border-radius:0;
  }

  .home-image-card .quick-card-image{
    flex-basis:62%;
  }

  .home-image-card .quick-card-body{
    padding:16px 18px 18px;
  }

  .home-image-card .quick-card-body strong{
    word-break:keep-all;
    overflow-wrap:normal;
    font-size:20px;
    line-height:1.28;
  }

  .home-image-card .quick-card-body span{
    word-break:keep-all;
    overflow-wrap:normal;
    font-size:14px;
    line-height:1.5;
  }

  .home-difference-section{
    padding:18px 0 50px;
  }

  .home-difference-card{
    display:block;
    width:100%;
    min-width:0;
    padding:30px 24px;
    border-radius:0;
  }

  .home-difference-copy{
    width:100%;
    min-width:0;
  }

  .home-pill{
    min-height:32px;
    padding:0 16px;
    margin-bottom:20px;
    font-size:12px;
    line-height:1.2;
  }

  .home-difference-copy h2{
    width:100%;
    max-width:100%;
    margin:0 0 18px;
    font-size:30px;
    line-height:1.35;
    letter-spacing:-1.4px;
    word-break:keep-all;
    overflow-wrap:normal;
    white-space:normal;
  }

  .home-difference-copy p{
    margin:0 0 24px;
    font-size:16px;
    line-height:1.8;
    word-break:keep-all;
  }

  .home-process-list{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
    min-width:0;
  }

  .home-process-item{
    min-height:auto;
    gap:16px;
    padding:22px;
    border-radius:0;
  }

  .home-process-item b{
    font-size:26px;
  }

  .home-process-item strong{
    font-size:17px;
    line-height:1.55;
    word-break:keep-all;
  }
}


/* =========================================================
   [2026-05-10] 모바일 인트로 카드 컴팩트 정리
   파일명: /assets/css/mobile.css
   원인:
   - PC용 인트로 카드 구조가 모바일에 그대로 내려오면서
     카드 높이, 이미지 높이, 상단 배지 영역이 과하게 커졌습니다.
   - 이전 2:1 이미지 프레임 고정 방식은 적용하지 않고,
     모바일 전용 표시 크기만 별도로 축소합니다.
   수정:
   - 모바일에서 인트로 카드 상단 배지 숨김
   - 카드 내부 여백/제목/설명/이미지 높이 축소
   - PC 인트로 카드 구조와 이미지 원본 경로는 유지
========================================================= */
@media(max-width:768px){
  .page-intro-card{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    width:calc(100% - 28px);
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
    padding:18px 18px 20px;
    border-radius:0;
  }

  .page-intro-card .badge{
    display:none;
  }

  .page-intro-text{
    min-height:0;
    padding-left:0;
    justify-content:flex-start;
  }

  .page-intro-text h2{
    margin:0 0 8px;
    font-size:29px;
    line-height:1.18;
    letter-spacing:-1.1px;
  }

  .page-intro-text p{
    max-width:100%;
    margin:0;
    font-size:14px;
    line-height:1.65;
  }

  .page-intro-image{
    width:100%;
    max-width:100%;
    margin:4px auto 0;
    border-radius:0;
  }

  .page-intro-image picture{
    display:block;
  }

  .page-intro-image img,
  .product-intro-card .page-intro-image img{
    display:block;
    width:100%;
    height:auto;
    max-height:150px;
    min-height:0;
    object-fit:contain;
    object-position:center;
    border-radius:0;
  }
}

@media(max-width:420px){
  .page-intro-card{
    width:calc(100% - 22px);
    padding:16px 16px 18px;
  }

  .page-intro-text h2{
    font-size:27px;
  }

  .page-intro-image img,
  .product-intro-card .page-intro-image img{
    max-height:136px;
  }
}

/* =========================================================
   [2026-05-10] 모바일 로고 하단 / 배너 상단 서브메뉴
   파일명: /assets/css/mobile.css
   역할:
   - 모바일에서는 sidebar가 숨겨지므로 header/logo 바로 아래에 현재 섹션의 세부메뉴를 안내합니다.
   - page-banner 배너보다 위에 배치해 페이지 진입 즉시 메뉴를 확인할 수 있게 합니다.
   - PC에서는 노출하지 않고 기존 좌측 sidebar 구조를 유지합니다.
========================================================= */
.mobile-submenu{
  display:none;
}

@media(max-width:768px){
  .mobile-submenu{
    display:block;
    background:linear-gradient(180deg,#f7fbff 0%,#eef7ff 100%);
    border-top:1px solid #edf4fb;
    border-bottom:1px solid #cfe1f2;
  }

  .mobile-submenu__inner{
    padding:22px 16px 20px;
  }

  .mobile-submenu__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 14px;
  }

  .mobile-submenu__label{
    color:#0d2746;
    font-size:22px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:-.8px;
  }

  .mobile-submenu__guide{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:0 13px;
    border-radius:0;
    background:#dcedff;
    color:#23659f;
    font-size:14px;
    font-weight:900;
    letter-spacing:-.45px;
    white-space:nowrap;
  }

  .mobile-submenu__scroller{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    overflow:visible;
    padding:0;
  }

  .mobile-submenu__link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:0;
    min-height:54px;
    padding:0 14px;
    border:1px solid #cfe1f2;
    border-radius:0;
    background:#fff;
    color:#122b49;
    font-size:16px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:-.6px;
    text-align:center;
    text-decoration:none;
    box-shadow:0 8px 18px rgba(16,55,95,.08);
  }

  .mobile-submenu__link.is-active{
    border-color:#79b7ee;
    background:linear-gradient(180deg,#ffffff 0%,#edf7ff 100%);
    color:#0e63b3;
    box-shadow:0 10px 22px rgba(20,105,185,.14);
  }

  .mobile-submenu__icon{
    flex:0 0 22px;
    width:22px;
    height:22px;
    background-color:currentColor;
    opacity:.95;
    -webkit-mask:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
            mask:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
  }

  .mobile-submenu__text{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mobile-submenu__link[href*="#greeting"] .mobile-submenu__icon,
  .mobile-submenu__link[href*="home=1"] .mobile-submenu__icon{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  }

  .mobile-submenu__link[href*="#history"] .mobile-submenu__icon,
  .mobile-submenu__link[href*="category=line"] .mobile-submenu__icon,
  .mobile-submenu__link[href*="category=auto"] .mobile-submenu__icon{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-4'/%3E%3Cpath d='M9 9h1'/%3E%3Cpath d='M9 13h1'/%3E%3Cpath d='M9 17h1'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-4'/%3E%3Cpath d='M9 9h1'/%3E%3Cpath d='M9 13h1'/%3E%3Cpath d='M9 17h1'/%3E%3C/svg%3E");
  }

  .mobile-submenu__link[href*="#location"] .mobile-submenu__icon,
  .mobile-submenu__link[href*="contact"] .mobile-submenu__icon{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  }

  .mobile-submenu__link[href*="category=semi_printer"] .mobile-submenu__icon,
  .mobile-submenu__link[href*="category=printer"] .mobile-submenu__icon,
  .mobile-submenu__link[href*="category=consumable"] .mobile-submenu__icon{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M7 7V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M7 16h6'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M7 7V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M7 16h6'/%3E%3C/svg%3E");
  }

  @media(max-width:380px){
    .mobile-submenu__inner{
      padding:18px 12px 16px;
    }

    .mobile-submenu__label{
      font-size:20px;
    }

    .mobile-submenu__scroller{
      gap:8px;
    }

    .mobile-submenu__link{
      min-height:50px;
      padding:0 10px;
      font-size:15px;
    }

    .mobile-submenu__icon{
      flex-basis:20px;
      width:20px;
      height:20px;
    }
  }
}

/* =========================================================
   [2026-05-10] 모바일 전용 공통 검색 / 서브 네비게이션 / 사례 보기 정리
   파일명: /assets/css/mobile.css
   기준:
   - PC 영향 없이 768px 이하 모바일에서만 적용
   - 서브 네비게이션은 Hero 아래에서 전체 버튼을 카드형으로 노출
   - 납품·수리 사례 본문 중복 필터는 숨기고 모바일 상단 서브 네비게이션을 기준으로 사용
========================================================= */
.mobile-product-search,
.case-mobile-view-panel{
  display:none;
}

@media(max-width:768px){
  /* 모바일에서는 페이지 소개는 Hero가 담당하므로 인트로카드는 숨김 */
  .page-intro-card{
    display:none;
  }

  /* 모바일 서브 네비게이션: 슬라이드/작은 pill 방식 제거, 기존 카드형 디자인 유지 */
  .mobile-submenu{
    display:block;
    background:linear-gradient(180deg,#f7fbff 0%,#eef7ff 100%);
    border-top:0;
    border-bottom:1px solid #cfe1f2;
  }

  .mobile-submenu__inner{
    padding:18px 16px 18px;
  }

  .mobile-submenu__head,
  .mobile-submenu__label,
  .mobile-submenu__guide{
    display:none;
  }

  .mobile-submenu__scroller{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    overflow:visible;
    padding:0;
  }

  .mobile-submenu__scroller::-webkit-scrollbar{
    display:none;
  }

  .mobile-submenu__link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:0;
    min-height:54px;
    padding:0 14px;
    border:1px solid #cfe1f2;
    border-radius:0;
    background:#fff;
    color:#122b49;
    font-size:16px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:-.6px;
    text-align:center;
    text-decoration:none;
    box-shadow:0 8px 18px rgba(16,55,95,.08);
  }

  .mobile-submenu__link.is-active{
    border-color:#79b7ee;
    background:linear-gradient(180deg,#ffffff 0%,#edf7ff 100%);
    color:#0e63b3;
    box-shadow:0 10px 22px rgba(20,105,185,.14);
  }

  .mobile-submenu__icon{
    display:block;
    flex:0 0 22px;
    width:22px;
    height:22px;
    background-color:currentColor;
    opacity:.95;
  }

  .mobile-submenu__text{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* 모바일 전용 전체 제품 검색바 */
  .mobile-product-search{
    display:block;
    background:#fff;
    border-bottom:1px solid #e5edf5;
  }

  .mobile-product-search__inner{
    padding:12px 12px 14px;
  }

  .mobile-product-search__form{
    margin:0;
  }

  .mobile-product-search__label{
    display:block;
    margin:0 0 7px;
    color:#31516d;
    font-size:13px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:-.35px;
  }

  .mobile-product-search__field{
    display:grid;
    grid-template-columns:24px minmax(0,1fr) 66px;
    align-items:center;
    gap:6px;
    min-height:48px;
    padding:5px 5px 5px 13px;
    border:1px solid #d9e7f3;
    border-radius:0;
    background:#f8fbff;
    box-shadow:0 8px 20px rgba(17,57,96,.07);
  }

  .mobile-product-search__icon{
    width:18px;
    height:18px;
    background:#47708f;
    -webkit-mask:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
            mask:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  }

  .mobile-product-search__field input{
    width:100%;
    min-width:0;
    height:38px;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:#10243d;
    font-size:15px;
    font-weight:700;
    letter-spacing:-.35px;
  }

  .mobile-product-search__field input::placeholder{
    color:#8a9bad;
    font-weight:700;
  }

  .mobile-product-search__field button{
    height:38px;
    padding:0 12px;
    border:0;
    border-radius:0;
    background:#0f66bb;
    color:#fff;
    font-size:14px;
    font-weight:900;
    letter-spacing:-.35px;
  }

  /* 납품·수리 사례: 상단 모바일 서브 네비게이션과 중복되는 본문 필터 제거 */
  body[data-sidebar-type="cases"] .case-anchor-tabs{
    display:none;
  }

  /* 납품·수리 사례: 모바일 보기 전환 버튼 */
  body[data-sidebar-type="cases"] .case-mobile-view-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 16px;
    padding:8px;
    border:1px solid #d7e6f5;
    border-radius:0;
    background:#fff;
    box-shadow:0 8px 22px rgba(16,55,95,.06);
  }

  .case-mobile-view-panel__label{
    flex:0 0 auto;
    padding-left:6px;
    color:#31516d;
    font-size:13px;
    font-weight:900;
    letter-spacing:-.35px;
  }

  .case-mobile-view-panel__buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    flex:1 1 auto;
  }

  .case-mobile-view-panel button{
    height:38px;
    border:1px solid #d6e4f2;
    border-radius:0;
    background:#f8fbff;
    color:#244562;
    font-size:14px;
    font-weight:900;
    letter-spacing:-.35px;
  }

  .case-mobile-view-panel button.is-active{
    border-color:#0f72d0;
    background:#0f72d0;
    color:#fff;
  }

  body[data-sidebar-type="cases"] .case-grid.view-many{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  body[data-sidebar-type="cases"] .case-grid.view-large{
    grid-template-columns:1fr;
    gap:18px;
  }

  body[data-sidebar-type="cases"] .case-grid.view-many .case-card{
    border-radius:0;
  }

  body[data-sidebar-type="cases"] .case-grid.view-many .case-thumb{
    aspect-ratio:1 / .78;
  }

  body[data-sidebar-type="cases"] .case-grid.view-many .case-body{
    padding:12px 11px 14px;
  }

  body[data-sidebar-type="cases"] .case-grid.view-many .case-meta{
    gap:5px;
    margin-bottom:8px;
  }

  body[data-sidebar-type="cases"] .case-grid.view-many .case-meta span{
    min-height:24px;
    padding:0 8px;
    font-size:11px;
  }

  body[data-sidebar-type="cases"] .case-grid.view-many .case-body h3{
    min-height:0;
    margin-bottom:7px;
    font-size:15px;
    line-height:1.35;
    letter-spacing:-.55px;
  }

  body[data-sidebar-type="cases"] .case-grid.view-many .case-body p{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-bottom:12px;
    font-size:12px;
    line-height:1.55;
  }

  body[data-sidebar-type="cases"] .case-grid.view-many .case-detail-btn{
    min-height:34px;
    padding:0 12px;
    border-radius:0;
    font-size:12px;
  }
}

@media(max-width:380px){
  .mobile-product-search__field{
    grid-template-columns:22px minmax(0,1fr) 58px;
    padding-left:11px;
  }

  .mobile-product-search__field input{
    font-size:14px;
  }

  .mobile-product-search__field button{
    padding:0 10px;
    font-size:13px;
  }

  .case-mobile-view-panel__label{
    display:none;
  }
}


/* =========================================================
   [2026-05-10] 납품·수리 사례 보기 방식 컴팩트 통일
   파일명: /assets/css/mobile.css
   기준:
   - 제품소개 보기 방식과 같은 컴팩트 설명형 카드
   - 버튼 영역만 가로 공간 전체 사용
========================================================= */
@media(max-width:768px){
  body[data-sidebar-type="cases"] .case-mobile-view-panel{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin:0 0 18px;
    padding:16px 18px;
    border:1px solid #cfe5fb;
    border-radius:0;
    background:#f8fbff;
    box-shadow:none;
  }

  .case-mobile-view-panel__head{
    display:block;
    min-width:0;
  }

  .case-mobile-view-panel__head h3{
    margin:0 0 3px;
    color:#102d4c;
    font-size:18px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:-.45px;
  }

  .case-mobile-view-panel__head p{
    margin:0;
    color:#64748b;
    font-size:13px;
    font-weight:700;
    line-height:1.45;
  }

  .case-mobile-view-panel__label{
    display:none;
  }

  .case-mobile-view-panel__buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    width:100%;
    min-width:0;
    padding:6px;
    border:1px solid #cfe1f4;
    border-radius:0;
    background:#edf6ff;
  }

  .case-mobile-view-panel button{
    display:flex;
    align-items:center;
    justify-content:center;
    height:auto;
    min-height:38px;
    padding:0 8px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#1d3d5f;
    font-size:13.5px;
    font-weight:900;
    line-height:1;
    letter-spacing:-.35px;
    box-shadow:none;
  }

  .case-mobile-view-panel button.is-active{
    border-color:transparent;
    background:#0f66bb;
    color:#fff;
    box-shadow:0 8px 18px rgba(15,102,187,.2);
  }
}


@media(max-width:768px){
  .mobile-submenu{
    display:block;
    width:100%;
    background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);
    border-top:1px solid #e6f0fa;
    border-bottom:1px solid #cddfee;
  }

.mobile-submenu__inner{
    padding:14px 12px 16px;
  }

  .mobile-submenu__head,
  .mobile-submenu__label,
  .mobile-submenu__guide{
    display:none;
  }

  .mobile-submenu__scroller{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    width:100%;
    overflow:visible;
    padding:0;
  }

  .mobile-submenu__link{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    width:100%;
    min-width:0;
    min-height:52px;
    padding:9px 11px;
    box-sizing:border-box;
    border:1px solid #cfe1f2;
    border-radius:0;
    background:#fff;
    color:#142d49;
    box-shadow:0 7px 16px rgba(16,55,95,.075);
    overflow:hidden;
  }

  .mobile-submenu__icon{
    display:block;
    flex:0 0 20px;
    width:20px;
    height:20px;
    margin:0;
  }

  .mobile-submenu__text{
    display:block;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:inherit;
    font-size:14.5px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:-.55px;
    text-align:left;
  }

  .mobile-submenu__link.is-active{
    border-color:#74b5ef;
    background:linear-gradient(180deg,#ffffff 0%,#edf7ff 100%);
    color:#0d63b2;
  }
}

@media(max-width:360px){
  .mobile-submenu__scroller{
    grid-template-columns:1fr;
  }

  .mobile-submenu__link{
    min-height:48px;
  }
}


@media (max-width:768px){
  .utility-bar{
    display:none;
  }

  .site-header{
    background:#fff;
  }

  .header-inner{
    height:70px;
  }

  .header-search{
    display:none;
  }

  .menu-toggle{
    display:flex;
  }

  .main-nav{
    top:72px;
    background:#fff;
    border-color:#dfeaf6;
    box-shadow:0 18px 44px rgba(15,45,80,.16);
  }

  .main-nav .nav-link{
    background:#f8fbff;
    color:#172033;
    box-shadow:none;
    border:1px solid #edf2f7;
  }

  .main-nav .nav-item.active>.nav-link,
  .main-nav .nav-link:hover{
    background:#edf7ff;
    color:#126ee2;
  }

.mobile-submenu-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .mobile-submenu-list a{
    min-width:0;
    word-break:keep-all;
    white-space:normal;
    border-radius:0;
    background:#fff;
    border:1px solid #dfeaf6;
    color:#263446;
    box-shadow:0 8px 20px rgba(15,45,80,.06);
  }

  .mobile-submenu-list a.is-active,
  .mobile-submenu-list a.active{
    background:linear-gradient(90deg,#126ee2,#23a8ff);
    color:#fff;
    border-color:#126ee2;
  }
}


/* =========================================================
   [2026-05-11] MOBILE TOGGLE COLOR FIX
   - 모바일 흰색 헤더에서 햄버거 아이콘이 보이도록 보정
========================================================= */
@media (max-width:768px){
  .menu-toggle span{background:#1d4268}
}


/* =========================================================
   MOBILE SUBMENU CLEANUP PATCH
   - 예전 모바일 하위메뉴 카드 구조는 템플릿에서 제거/비활성화
   - 잔여 마크업이 있을 경우에도 레이아웃에 노출되지 않도록 처리
========================================================= */
.mobile-submenu,
.mobile-submenu-wrap,
.mobile-submenu-grid,
.mobile-submenu-card,
.mobile-sub-nav,
.mobile-category-card {
    display: none;
}


/* =========================================================
   MOBILE / CASE DUPLICATE CLEANUP PATCH V2
   - 예전 모바일 하위메뉴 카드 제거
   - 납품·수리 사례 모바일 보기 방식 패널 제거
   - 상단 page-quick-menu 기준으로 UX 단일화
========================================================= */
.mobile-submenu,
.mobile-submenu-wrap,
.mobile-submenu-list,
.mobile-submenu-grid,
.mobile-submenu-card,
.mobile-sub-nav,
.mobile-category-card,
.case-mobile-view-panel {
    display: none !important;
}



/* =========================================================
   SOFT BRAND MOBILE CLEANUP
========================================================= */
@media (max-width: 768px) {
    .content-card,
    .contact-panel,
    .case-overview-intro,
    .case-type-section {
        border-color:#e3edf7;
        box-shadow:none;
    }

    .page-section-bar__link,
    .page-section-bar__current {
        font-size:12px;
        font-weight:650;
    }
}


/* =========================================================
   [MOBILE MENU REAL FIX - 2026-05-12]
   원인: 모바일 메뉴 규칙이 header.css / mobile.css 내부 중복 구간에서 서로 다른 top/display 값을 사용함.
   조치: 최종 로드되는 mobile.css 하단에서 모바일 메뉴의 실제 열림 상태만 단일 기준으로 정리.
========================================================= */
@media (max-width:1024px){
  .site-header{position:sticky;top:0;z-index:30000;background:#fff;}
  .header-inner{height:72px;min-height:72px;}
  .menu-toggle{display:flex;position:relative;z-index:30002;}
  .menu-toggle span{background:#1d4268;}

  .main-nav#mainNav{
    display:none;
    position:fixed;
    top:72px;
    left:12px;
    right:12px;
    width:auto;
    max-width:none;
    height:auto;
    max-height:calc(100dvh - 92px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
    margin:0;
    padding:10px;
    border:1px solid #d8e7f6;
    background:#f5f9fd;
    box-shadow:0 18px 44px rgba(12,39,75,.20);
    z-index:30001;
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .main-nav#mainNav.active,
  .main-nav#mainNav.is-open{
    display:flex;
  }

  .main-nav#mainNav .nav-item{width:100%;min-height:auto;margin:0;display:block;}
  .main-nav#mainNav .nav-link{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    min-height:54px;
    height:auto;
    padding:15px 16px;
    border:1px solid #edf2f7;
    background:#fff;
    color:#10243d;
    font-size:16px;
    font-weight:900;
    line-height:1.25;
    text-align:left;
    box-shadow:none;
  }
  .main-nav#mainNav .dropdown,
  .main-nav#mainNav .nav-item:hover > .dropdown,
  .main-nav#mainNav .nav-item.open .dropdown{display:none;}
}


/* ===== [2026-05 MOBILE SUBMENU CLEANUP] ===== */
@media (max-width:768px){
  .nb-mobile-submenu__home{
    display:none !important;
  }

  .nb-mobile-submenu__inner{
    grid-template-columns:1fr !important;
  }

  .nb-mobile-submenu__title-link{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 18px;
    text-decoration:none;
    border-bottom:1px solid #d9e3ef;
    background:#fff;
  }

  .nb-mobile-submenu__title{
    font-size:20px;
  }
}