:root{
  --primary-color:#00bfff;
  --dark-color:#003366;
  --bg-gray:#f9f9f9;
  --text-main:#333;
  --text-light:#666;
  --header-h:90px;
  --header-h-m:70px;
  --header-current:var(--header-h);
  --safe-zone-bottom:18px;
  --safe-zone-mobile-bottom:16px;
  --tab-active:#0056b3;
}
@media (max-width:768px){
  :root{--header-current:var(--header-h-m);}
}

*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--text-main);overflow-x:hidden}
a{text-decoration:none;color:inherit}
ul{list-style:none;margin:0;padding:0}
button,input,select,textarea{font:inherit}
button{font-family:inherit}

/* Global shell */
#pageRoot{padding-top:var(--header-h);min-height:calc(100vh - 220px)}
@media (max-width:768px){
  #pageRoot{padding-top:var(--header-h-m)}
}

/* Header */
#siteHeader{
  position:fixed;top:0;left:0;width:100%;height:var(--header-h);
  background:rgba(0,30,60,0.95);
  border-bottom:1px solid rgba(255,255,255,0.1);
  z-index:9999;
  backdrop-filter:blur(10px);
}
#siteHeader .header-inner{
  width:100%;max-width:none;height:100%;padding:0 50px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
#siteHeader .logo{
  flex:0 0 auto;display:flex;flex-direction:column;line-height:1.1;
  font-size:24px;font-weight:900;color:#fff;cursor:pointer;white-space:nowrap;
}
#siteHeader .logo span{min-height:12px;font-size:12px;color:#cfd8e3}
#siteHeader .mobile-menu-btn{display:none;flex:0 0 auto;font-size:28px;color:#fff;cursor:pointer;line-height:1}
#siteHeader .btn-quote{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  padding:12px 28px;border-radius:999px;background:var(--primary-color);color:#fff;font-weight:800;
  line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 10px 20px rgba(0,191,255,0.18);
}
#siteHeader .btn-quote:hover{background:#009acd}

#navbar{flex:1 1 auto;display:flex;justify-content:center;align-items:center;height:100%}
#siteHeader .menu-group{display:flex;align-items:center;gap:30px;height:100%}
#siteHeader .menu-item{position:relative;height:100%;display:flex;align-items:center}
#siteHeader .menu-trigger,
#siteHeader .submenu-trigger{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;font:inherit;
  margin:0;padding:0;box-shadow:none;outline:none;cursor:pointer;border-radius:0;
}
#siteHeader .menu-trigger{
  display:inline-flex;align-items:center;justify-content:center;height:100%;
  font-size:16px;font-weight:700;color:#fff;white-space:nowrap;
}
#siteHeader .menu-item:hover > .menu-trigger,
#siteHeader .menu-item.top-active > .menu-trigger{color:var(--primary-color)}
#siteHeader .dropdown{
  position:absolute;top:var(--header-h);left:50%;transform:translateX(-50%);
  min-width:210px;padding:10px 0;border-radius:0 0 8px 8px;
  background:rgba(0,30,60,0.98);border-top:1px solid rgba(255,255,255,0.08);
  box-shadow:0 12px 28px rgba(0,0,0,0.35);opacity:0;visibility:hidden;z-index:1000;
}
#siteHeader .dropdown-link,
#siteHeader .submenu-trigger.dropdown-link{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:12px 20px;font-size:14px;color:rgba(255,255,255,0.84);
  border-bottom:1px solid rgba(255,255,255,0.05);background:transparent;text-align:left;
}
#siteHeader .dropdown-link:last-child{border-bottom:0}
#siteHeader .dropdown-link:hover,
#siteHeader .submenu-trigger.dropdown-link:hover{background:rgba(255,255,255,0.1);color:var(--primary-color)}
#siteHeader .has-submenu{position:relative}
#siteHeader .has-submenu .submenu{
  display:none;position:absolute;left:100%;top:0;min-width:220px;padding:10px 0;
  background:rgba(0,30,60,0.98);border-left:1px solid rgba(255,255,255,0.08);
  box-shadow:0 12px 28px rgba(0,0,0,0.35);border-radius:0 8px 8px 8px;z-index:1001;
}
@media (min-width:769px){
  #siteHeader .menu-item:hover > .dropdown{opacity:1;visibility:visible}
  #siteHeader .has-submenu:hover > .submenu{display:block}
  #siteHeader .has-submenu > .submenu-trigger::after{content:'>';font-size:12px;opacity:.7}
}

/* Mobile menu */
body.nav-open{overflow:hidden}
@media (max-width:768px){
  #siteHeader{height:var(--header-h-m)}
  #siteHeader .header-inner{padding:0 12px;gap:10px}
  #siteHeader .logo{font-size:20px;min-width:0}
  #siteHeader .logo span{display:none}
  #siteHeader .btn-quote{display:none}
  #siteHeader .mobile-menu-btn{display:block}

  #navbar{
    display:none;position:fixed;top:var(--header-h-m);left:0;width:100%;height:calc(100vh - var(--header-h-m));
    background:rgba(0,30,60,0.985);overflow-y:auto;box-shadow:0 18px 30px rgba(0,0,0,0.3);
  }
  #navbar.active{display:block}
  #navbar::-webkit-scrollbar{display:none}
  #siteHeader .menu-group{display:flex;flex-direction:column;gap:0;width:100%;height:auto}
  #siteHeader .menu-item{display:block;height:auto;border-bottom:1px solid rgba(255,255,255,0.06)}
  #siteHeader .menu-trigger{
    width:100%;height:auto;padding:16px 18px;justify-content:space-between;text-align:left;color:#fff
  }
  #siteHeader .menu-item.has-dropdown > .menu-trigger::after{content:'▼';font-size:12px;opacity:.65}
  #siteHeader .menu-item.is-open > .menu-trigger::after{content:'▲'}
  #siteHeader .dropdown{
    position:static;transform:none;display:none;opacity:1;visibility:visible;min-width:0;width:100%;
    padding:6px 0;margin:0;background:rgba(0,0,0,0.18);border-top:1px solid rgba(255,255,255,0.06);box-shadow:none;border-radius:0;
  }
  #siteHeader .menu-item.is-open > .dropdown{display:block}
  #siteHeader .dropdown-link,
  #siteHeader .submenu-trigger.dropdown-link{padding:12px 18px;color:rgba(255,255,255,0.88)}
  #siteHeader .has-submenu{position:static}
  #siteHeader .has-submenu > .submenu-trigger::after{content:'+';font-size:15px;opacity:.7}
  #siteHeader .has-submenu.is-open > .submenu-trigger::after{content:'−'}
  #siteHeader .has-submenu > .submenu{
    display:none;position:static;min-width:0;margin:6px 10px 10px;padding:6px 0;
    background:rgba(255,255,255,0.04);border-left:0;box-shadow:none;border-radius:10px;
  }
  #siteHeader .has-submenu.is-open > .submenu{display:block}
}

/* Footer */
#siteFooter{background:#111;color:#888;padding:50px 20px;text-align:center;font-size:14px;border-top:1px solid #222}
#siteFooter .footer-info{max-width:1000px;margin:0 auto 20px;line-height:1.6}
#siteFooter .f-info-line{margin-bottom:5px;word-break:keep-all}
#siteFooter .f-info-line strong{color:#ddd;margin-right:5px;font-weight:700}
#siteFooter .f-info-item{display:inline-block;margin:0 10px;position:relative}
#siteFooter .f-info-item::after{content:'|';position:absolute;right:-13px;color:#444}
#siteFooter .f-info-item:last-child::after{display:none}
#siteFooter .footer-copy{color:#555;font-size:13px;margin-top:20px}
@media (max-width:768px){
  #siteFooter{padding:40px 20px}
  #siteFooter .footer-info{font-size:12px;margin-bottom:15px}
  #siteFooter .f-info-line{margin-bottom:4px;line-height:1.4}
  #siteFooter .f-info-item{margin:0 6px}
  #siteFooter .f-info-item::after{right:-8px}
  #siteFooter .footer-copy{font-size:11px;margin-top:15px}
}

/* Unified sub-hero + tabs */
#pageRoot .sub-hero{height:350px !important;padding-top:var(--header-current) !important}
#pageRoot .tab-menu-wrapper,
#pageRoot .tab-menu,
#pageRoot .tab-menu-wrapper .tab-menu{
  background:#fff;border-bottom:1px solid #e0e0e0;position:sticky;top:var(--header-current);z-index:800;
}
#pageRoot .tab-menu,
#pageRoot .tab-menu-wrapper .tab-menu{
  max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:28px;padding:0 20px;height:60px;
}
#pageRoot .tab-btn{
  position:relative;display:flex;align-items:center;height:100%;padding:0 10px;background:transparent;border:0;
  font-size:15px;font-weight:500;color:#555;cursor:pointer;white-space:nowrap
}
#pageRoot .tab-btn:hover{color:var(--tab-active)}
#pageRoot .tab-btn.active{color:var(--tab-active);font-weight:700}
#pageRoot .tab-btn.active::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--tab-active)}

/* Product category tabs */
#pageRoot .nav-bar-wrapper{background:#fff;border-bottom:1px solid #e0e0e0;position:sticky;top:var(--header-current);z-index:850}
#pageRoot .nav-bar{max-width:1400px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px}
#pageRoot .category-tabs{display:flex;align-items:center;justify-content:center;gap:28px;height:100%}
#pageRoot .cat-link{position:relative;display:flex;align-items:center;height:100%;padding:0 4px;font-size:15px;font-weight:500;color:#555;cursor:pointer;white-space:nowrap}
#pageRoot .cat-link:hover{color:var(--tab-active)}
#pageRoot .cat-link.active{color:var(--tab-active);font-weight:700}
#pageRoot .cat-link.active::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--tab-active)}
#pageRoot .breadcrumb,
#pageRoot .breadcrumb-wrap,
#pageRoot .breadcrumb-inline,
#pageRoot .home-link{display:none !important}

@media (max-width:768px){
  #pageRoot .sub-hero{height:250px !important}
  #pageRoot .tab-menu-wrapper,
  #pageRoot .nav-bar-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  #pageRoot .tab-menu,
  #pageRoot .tab-menu-wrapper .tab-menu,
  #pageRoot .nav-bar{max-width:none;width:max-content;padding:0 16px;height:56px;gap:22px}
  #pageRoot .tab-btn,
  #pageRoot .cat-link{font-size:15px;height:56px;padding:0 8px}
  #pageRoot .category-tabs{gap:22px}
}

/* Tables */
#pageRoot .table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:0}
#pageRoot .table-scroll::-webkit-scrollbar{height:6px}
#pageRoot .table-scroll table{min-width:720px}
@media (max-width:768px){
  #pageRoot .table-scroll table{min-width:640px}
}

/* Floating UI safe zone */
#pageRoot .floating-btn{bottom:var(--safe-zone-bottom) !important;right:18px !important;z-index:10020 !important}
.call-bubble{
  position:fixed;right:18px;bottom:calc(var(--safe-zone-mobile-bottom) + 64px);z-index:10030;
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;
  background:rgba(0,30,60,0.92);color:#fff;box-shadow:0 10px 24px rgba(0,0,0,0.22);backdrop-filter:blur(10px);
  cursor:pointer;user-select:none
}
.call-bubble .icon{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(0,191,255,0.18);border:1px solid rgba(0,191,255,0.35)}
.call-bubble .icon svg{width:18px;height:18px;fill:#fff}
.call-bubble .text{display:flex;flex-direction:column;line-height:1.12}
.call-bubble .label{font-size:11px;font-weight:600;opacity:.85}
.call-bubble .phone{font-size:13px;font-weight:900}
@media (min-width:769px){.call-bubble{display:none !important}}
body.on-product-detail #pageRoot .floating-btn{bottom:86px !important}
body.on-product-detail .call-bubble{bottom:calc(var(--safe-zone-mobile-bottom) + 130px)}
#pageRoot .detail-hero .back-to-list{position:fixed !important;top:calc(var(--header-current) + 14px) !important;left:18px !important;z-index:10040 !important}
@media (max-width:768px){
  #pageRoot .floating-btn{bottom:var(--safe-zone-mobile-bottom) !important;right:14px !important;width:56px !important;height:56px !important}
  .call-bubble{right:14px}
  #pageRoot .detail-hero .back-to-list{top:calc(var(--header-current) + 10px) !important;left:14px !important}
}

/* Forms / dense mobile controls */
@media (max-width:768px){
  #pageRoot .size-inputs{flex-direction:column;gap:14px !important}
  #pageRoot .board-controls{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:12px !important}
  #pageRoot .board-search{display:grid !important;grid-template-columns:1fr 1fr auto;gap:8px !important;width:100% !important}
  #pageRoot .board-search input{min-width:0}
  #pageRoot .board-count{width:100% !important;text-align:right !important;white-space:nowrap !important}
  #pageRoot .number-display{min-width:100% !important;padding:28px 20px !important}
  #pageRoot .nd-number{font-size:clamp(22px, 7vw, 40px) !important;letter-spacing:1px !important}
  #pageRoot .btn-call-action{width:100% !important;justify-content:center !important;font-size:18px !important;padding:18px !important}
  #pageRoot .type-grid{grid-template-columns:repeat(2, 1fr) !important;gap:12px !important}
}
@media (max-width:480px){
  #pageRoot .type-grid{grid-template-columns:1fr !important}
  #pageRoot .board-search{grid-template-columns:1fr !important}
}

/* About page inline-style cleanup */
#pageRoot .ceo-kicker{color:#00bfff;font-weight:700;letter-spacing:1px}
#pageRoot .ceo-desc-spaced{margin-bottom:30px}
#pageRoot .ceo-signature{margin-top:40px;font-weight:700;font-size:20px;color:#111}
#pageRoot .ceo-signature span{font-size:24px}
#pageRoot .about-cert-section{background:#f4f6f9;padding:60px 0}
#pageRoot .about-cert-header{text-align:center;margin-bottom:40px}
#pageRoot .about-cert-grid{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}
#pageRoot .about-cert-item{background:transparent;border:0;padding:0;text-align:center;max-width:200px}
#pageRoot .about-cert-thumb{width:120px;height:170px;object-fit:cover;border:1px solid #ddd;border-radius:4px;box-shadow:3px 3px 8px rgba(0,0,0,0.1);margin-bottom:15px}
#pageRoot .about-cert-name{font-weight:700;font-size:1.1rem;color:#333}
#pageRoot .location-section{background:#f9f9f9}
#pageRoot .map-view--embed{width:100%;height:100%;min-height:400px}
#pageRoot .map-frame{border:0;border-radius:8px}

/* Blog / portfolio cleanup */
#pageRoot .blog-video-box--clean{margin:2rem 0;text-align:center}
#pageRoot .blog-video{max-width:100%;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.1)}
#pageRoot .blog-caption--video{display:block;margin-top:10px}
#pageRoot .portfolio-cta-divider{margin:30px 0;border:0;border-top:1px solid #ddd}
#pageRoot .portfolio-cta-note{text-align:center;font-weight:700;color:#003366}
#pageRoot .catalog-image{width:100%;height:auto;display:block;margin:0;padding:0}

/* Responsive hero text + mobile art direction */
#pageRoot .hero-slider .slide-content h2{font-size:clamp(28px,5vw,72px) !important;line-height:1.3 !important;letter-spacing:-1px !important;word-break:keep-all !important}
#pageRoot .hero-slider .slide-content p{font-size:clamp(15px,2.3vw,28px) !important;line-height:1.5 !important;word-break:keep-all !important;opacity:.92 !important}
@media (max-width:768px){
  #pageRoot .hero-slider .slide-content{padding:0 24px !important;width:100% !important}
  #pageRoot .hero-slider .slide-content h2 br{display:none !important}
  #pageRoot .hero-slider .slide .slide-bg[style*="contain"]{background-size:cover !important;background-position:var(--mobile-focal, center) !important}
  #pageRoot .hero-slider .slide .slide-bg{background-position:var(--mobile-focal, center) !important}
}

/* iOS / mobile fallback for fixed backgrounds */
@media (max-width:768px){
  #pageRoot .detail-hero{background-attachment:scroll !important}
}

/* Small polish */
#pageRoot .sub-hero p{word-break:keep-all}

/* ==========================================================
   Patch: 태블릿(창 절반 크기) 화면 헤더 메뉴 깨짐 방지
   ========================================================== */
/* 1. 어떤 상황에서도 메뉴 글씨가 세로로 쪼개지지 않도록 강제 한 줄 보호 */
#siteHeader .menu-item {
  white-space: nowrap;
}

/* 2. 769px ~ 1200px (창을 절반으로 줄였을 때) 공간 다이어트 */
@media (max-width: 1200px) and (min-width: 769px) {
  #siteHeader .header-inner { padding: 0 20px; } /* 양옆 빈 공간 축소 */
  #siteHeader .menu-group { gap: 15px; } /* 메뉴 사이 간격 축소 */
  #siteHeader .menu-trigger { font-size: 14px; } /* 글자 크기 살짝 축소 */
  #siteHeader .logo { font-size: 20px; } /* 로고 크기 살짝 축소 */
  #siteHeader .btn-quote { padding: 10px 15px; font-size: 14px; } /* 견적 버튼 축소 */
}


/* ==========================================================
   [통합 패치] 태블릿 구간(769px ~ 1150px) 레이아웃 붕괴 완벽 방어
   - 메뉴 깨짐 방지 및 콘텐츠 찌그러짐 해결
   ========================================================== */
   @media (max-width: 1150px) and (min-width: 769px) {
    /* 1. 헤더: 견적 문의 버튼 숨기고, 메뉴 간격 좁혀서 PC 메뉴 100% 살리기 */
    #siteHeader .btn-quote { display: none !important; }
    #siteHeader .menu-group { gap: 15px !important; }
    #siteHeader .header-inner { padding: 0 20px !important; }
    #siteHeader .menu-item { white-space: nowrap !important; }
    
    /* 2. 회사소개(CEO): 좁은 공간에서 가로 배치 포기하고 세로로 예쁘게 정렬 */
    .ceo-wrap { flex-direction: column !important; gap: 40px !important; }
    .ceo-img { width: 100% !important; height: 400px !important; padding: 10px !important; box-shadow: none !important; }
    
    /* 3. 오시는 길(Map): 지도와 텍스트 박스 세로 배치로 넓게 쓰기 */
    .map-container { flex-direction: column !important; height: auto !important; }
    .map-view { height: 400px !important; }
}


#pageRoot[data-page="contact"] .sub-hero {
  /* 가로는 정중앙(center), 세로는 위에서 20% 내려온 지점을 기준으로 잡습니다 */
  background-position: center 27% !important; 
}

/* ==========================================================
   Patch 22: Before & After 이미지 세로 위치(초점) 미세 조정
   ========================================================== */
   #pageRoot .ba-single-box img {
    /* 가로는 중앙(center), 세로는 위에서부터 15% 내려온 지점을 기준으로 잡습니다 */
    object-position: center 20% !important; 
}