/* ============================================================
   SAMA PRECISION — NEW DESIGN (2026.05)
   Plakor-inspired modern industrial system
   Loaded AFTER style.css to override all conflicts.
   ============================================================ */

/* ---------- Tokens (theme_config.json 의 :root 변수 활용) ---------- */
:root{
  --sn-primary: var(--clr-accent, #d42020);
  --sn-primary-h: var(--clr-accent-h, #b01818);
  --sn-ink: #1a1d1f;
  --sn-ink2: #2c3033;
  --sn-sub: #4f5556;
  --sn-mute: #7c8385;
  --sn-line: #e5e7eb;
  --sn-line2: #eef0f2;
  --sn-soft: #f6f7f8;
  --sn-bg: #ffffff;
  --sn-radius: 4px;
  --sn-radius-lg: 12px;
  --sn-shadow-sm: 0 2px 6px rgba(0,0,0,.04);
  --sn-shadow: 0 8px 30px rgba(0,0,0,.08);
  --sn-container: 1280px;
  --sn-container-narrow: 1080px;
  --sn-pad-sec: clamp(40px, 5vw, 72px);
  --sn-font-kr: 'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  --sn-font-en: 'Montserrat','Inter',sans-serif;
  --sn-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
.sn-scope, .sn-scope *,
.site-header, .site-footer,
.sub-hero, .sub-page, .sn-page{
  box-sizing:border-box;
}
body{
  font-family:var(--sn-font-kr);
  color:var(--sn-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ============================================================
   HEADER (top bar + GNB + mega-dropdown)
   ============================================================ */
.sn-header-wrap{ position:sticky; top:0; z-index:9000; }
.sn-topbar{
  background:var(--sn-ink);
  color:#fff;
  font-size:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sn-topbar-inner{
  max-width:var(--sn-container);
  margin:0 auto;
  padding:8px 24px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
  letter-spacing:.02em;
}
.sn-topbar a{ opacity:.85; transition:opacity .2s; }
.sn-topbar a:hover{ opacity:1; color:#fff; }
.sn-topbar-sep{ width:1px; height:10px; background:rgba(255,255,255,.2); }
.sn-topbar .lang-current{ font-weight:700; color:var(--sn-primary); }
.sn-topbar .quick-quote{
  background:var(--sn-primary);
  padding:5px 12px;
  border-radius:var(--sn-radius);
  font-weight:600;
  letter-spacing:.04em;
}
.sn-topbar .quick-quote:hover{ background:var(--sn-primary-h); opacity:1; }

.sn-header{
  background:#fff;
  border-bottom:1px solid var(--sn-line);
  transition:box-shadow .25s var(--sn-ease);
}
.sn-header.is-scrolled{ box-shadow:0 4px 18px rgba(0,0,0,.06); }
.sn-header-inner{
  max-width:var(--sn-container);
  margin:0 auto;
  padding:0 24px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.sn-logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--sn-font-en);
  font-weight:800;
  letter-spacing:.04em;
  color:var(--sn-ink);
  flex-shrink:0;
}
.sn-logo img{ max-height:46px; width:auto; display:block; }
.sn-logo-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  background:var(--sn-primary); color:#fff;
  font-weight:900; font-size:18px;
  border-radius:var(--sn-radius);
}
.sn-logo-text{ display:flex; flex-direction:column; line-height:1.1; }
.sn-logo-text .ko{ font-family:var(--sn-font-kr); font-size:17px; font-weight:800; color:var(--sn-ink); }
.sn-logo-text .en{ font-size:10px; letter-spacing:.18em; color:var(--sn-sub); margin-top:2px; }

/* GNB */
.sn-gnb{ display:flex; align-items:center; gap:0; flex:1; justify-content:center; }
.sn-gnb-item{
  position:relative;
  padding:0;
}
.sn-gnb-link{
  display:flex; align-items:center;
  height:80px;
  padding:0 28px;
  font-size:16px;
  font-weight:600;
  color:var(--sn-ink);
  letter-spacing:-.01em;
  position:relative;
  transition:color .2s;
}
.sn-gnb-link:hover,
.sn-gnb-item.is-active > .sn-gnb-link{ color:var(--sn-primary); }
.sn-gnb-link::after{
  content:"";
  position:absolute; left:24px; right:24px; bottom:0;
  height:2px; background:var(--sn-primary);
  transform:scaleX(0); transform-origin:center;
  transition:transform .25s var(--sn-ease);
}
.sn-gnb-item:hover .sn-gnb-link::after,
.sn-gnb-item.is-active > .sn-gnb-link::after{ transform:scaleX(1); }

.sn-gnb-utility{
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
}
.sn-gnb-utility .util-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border:1px solid var(--sn-line);
  border-radius:50%;
  color:var(--sn-ink);
  transition:all .2s;
}
.sn-gnb-utility .util-btn:hover{ border-color:var(--sn-primary); color:var(--sn-primary); }
.sn-gnb-utility .util-cta{
  display:inline-flex; align-items:center; gap:6px;
  height:42px;
  padding:0 18px;
  background:var(--sn-primary);
  color:#fff;
  font-weight:700;
  font-size:14px;
  border-radius:var(--sn-radius);
  transition:background .2s;
}
.sn-gnb-utility .util-cta:hover{ background:var(--sn-primary-h); color:#fff; }

/* Mega dropdown (full-width white panel) */
.sn-mega{
  position:absolute; left:50%; top:100%;
  transform:translateX(-50%) translateY(8px);
  min-width:260px;
  background:#fff;
  border:1px solid var(--sn-line);
  border-top:2px solid var(--sn-primary);
  border-radius:0 0 var(--sn-radius) var(--sn-radius);
  box-shadow:0 16px 40px rgba(0,0,0,.10);
  padding:16px 0;
  opacity:0; visibility:hidden;
  transition:opacity .2s, visibility .2s, transform .25s var(--sn-ease);
  z-index:9100;
}
.sn-gnb-item:hover > .sn-mega,
.sn-gnb-item:focus-within > .sn-mega{
  opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.sn-mega-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 24px;
  font-size:15px;
  color:var(--sn-ink2);
  font-weight:500;
  transition:all .15s;
}
.sn-mega-link:hover, .sn-mega-link.is-active{
  color:var(--sn-primary); background:var(--sn-soft);
  padding-left:30px;
}
.sn-mega-link .arr{ opacity:0; transition:opacity .2s; }
.sn-mega-link:hover .arr{ opacity:1; }

/* Mobile menu toggle */
.sn-mobile-toggle{
  display:none;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  background:transparent; border:none;
  cursor:pointer;
}
.sn-mobile-toggle span{
  display:block; width:22px; height:2px;
  background:var(--sn-ink); position:relative;
  transition:all .2s;
}
.sn-mobile-toggle span::before,
.sn-mobile-toggle span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--sn-ink);
  transition:transform .2s;
}
.sn-mobile-toggle span::before{ top:-7px; }
.sn-mobile-toggle span::after{ top:7px; }
.sn-mobile-toggle.is-open span{ background:transparent; }
.sn-mobile-toggle.is-open span::before{ transform:translateY(7px) rotate(45deg); }
.sn-mobile-toggle.is-open span::after{ transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.sn-mobile-drawer{
  position:fixed; top:0; right:0;
  width:min(360px, 88vw); height:100vh;
  background:#fff;
  z-index:9500;
  transform:translateX(100%);
  transition:transform .3s var(--sn-ease);
  overflow-y:auto;
  box-shadow:-10px 0 40px rgba(0,0,0,.15);
}
.sn-mobile-drawer.is-open{ transform:translateX(0); }
.sn-mobile-drawer .md-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--sn-line);
}
.sn-mobile-drawer .md-close{
  width:36px; height:36px;
  background:transparent; border:none;
  font-size:24px; color:var(--sn-ink); cursor:pointer;
}
.sn-mobile-drawer .md-acc{
  border-bottom:1px solid var(--sn-line2);
}
.sn-mobile-drawer .md-acc-toggle{
  display:flex; justify-content:space-between; align-items:center;
  width:100%;
  padding:18px 20px;
  background:#fff; border:none;
  font-size:16px; font-weight:700; color:var(--sn-ink);
  text-align:left;
  cursor:pointer;
}
.sn-mobile-drawer .md-acc-body{
  display:none;
  background:var(--sn-soft);
}
.sn-mobile-drawer .md-acc.is-open .md-acc-body{ display:block; }
.sn-mobile-drawer .md-acc.is-open .md-acc-toggle .fa-chevron-down{ transform:rotate(180deg); }
.sn-mobile-drawer .md-acc-toggle .fa-chevron-down{ transition:transform .2s; }
.sn-mobile-drawer .md-acc-body a{
  display:block;
  padding:13px 26px;
  font-size:14px; color:var(--sn-sub);
  border-top:1px solid var(--sn-line2);
}
.sn-mobile-drawer .md-acc-body a:hover{ color:var(--sn-primary); }

.sn-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  z-index:9400;
  opacity:0; visibility:hidden;
  transition:opacity .25s, visibility .25s;
}
.sn-overlay.is-open{ opacity:1; visibility:visible; }

/* ============================================================
   SUB-HERO (breadcrumb + page title banner)
   ============================================================ */
.sn-subhero{
  position:relative;
  height:340px;
  display:flex; align-items:center; justify-content:center;
  background:#1a1d1f center/cover no-repeat;
  color:#fff;
  text-align:center;
  overflow:hidden;
}
.sn-subhero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 100%);
}
.sn-subhero-inner{ position:relative; z-index:2; max-width:var(--sn-container); padding:0 24px; }
.sn-subhero-eyebrow{
  font-family:var(--sn-font-en);
  font-size:12px;
  letter-spacing:.3em;
  font-weight:600;
  color:rgba(255,255,255,.75);
  margin-bottom:14px;
  text-transform:uppercase;
}
.sn-subhero-title{
  font-size:clamp(28px, 4vw, 44px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
  margin-bottom:18px;
}
.sn-breadcrumb{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px;
  color:rgba(255,255,255,.85);
}
.sn-breadcrumb a{ color:rgba(255,255,255,.75); }
.sn-breadcrumb a:hover{ color:#fff; }
.sn-breadcrumb i{ font-size:9px; opacity:.6; }
.sn-breadcrumb .crumb-current{ color:#fff; font-weight:600; }

/* Sub LNB tabs (Plakor style) */
.sn-lnb{
  background:#fff;
  border-bottom:1px solid var(--sn-line);
  position:sticky; top:80px; z-index:50;
}
.sn-lnb-inner{
  max-width:var(--sn-container);
  margin:0 auto;
  padding:0 24px;
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
}
.sn-lnb-inner::-webkit-scrollbar{ display:none; }
.sn-lnb-link{
  flex-shrink:0;
  padding:18px 26px;
  font-size:15px;
  font-weight:500;
  color:var(--sn-sub);
  position:relative;
  transition:color .2s;
  white-space:nowrap;
}
.sn-lnb-link:hover{ color:var(--sn-ink); }
.sn-lnb-link.is-active{ color:var(--sn-primary); font-weight:700; }
.sn-lnb-link.is-active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--sn-primary);
}

/* ============================================================
   SUB PAGE LAYOUT
   ============================================================ */
.sn-page{ background:#fff; padding-bottom:var(--sn-pad-sec); }
.sn-section{ padding:var(--sn-pad-sec) 0; }
.sn-section.is-soft{ background:var(--sn-soft); }
.sn-container{ max-width:var(--sn-container); margin:0 auto; padding:0 24px; }
.sn-container.is-narrow{ max-width:var(--sn-container-narrow); }

.sn-section-head{
  text-align:center;
  margin-bottom:60px;
}
.sn-section-head .eyebrow{
  display:inline-block;
  font-family:var(--sn-font-en);
  font-size:13px;
  font-weight:700;
  letter-spacing:.25em;
  color:var(--sn-primary);
  margin-bottom:14px;
  text-transform:uppercase;
}
.sn-section-head .title{
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--sn-ink);
  margin:0 0 18px;
  line-height:1.25;
}
.sn-section-head .desc{
  max-width:720px;
  margin:0 auto;
  font-size:16px;
  line-height:1.7;
  color:var(--sn-sub);
}
.sn-section-head.is-left{ text-align:left; }
.sn-section-head.is-left .desc{ margin:0; }

/* Reusable buttons */
.sn-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px;
  font-size:15px; font-weight:700;
  border-radius:var(--sn-radius);
  border:1px solid transparent;
  letter-spacing:.01em;
  transition:all .2s;
  cursor:pointer;
}
.sn-btn-primary{ background:var(--sn-primary); color:#fff; }
.sn-btn-primary:hover{ background:var(--sn-primary-h); color:#fff; transform:translateY(-1px); }
.sn-btn-line{ background:transparent; color:var(--sn-ink); border-color:var(--sn-ink); }
.sn-btn-line:hover{ background:var(--sn-ink); color:#fff; }
.sn-btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.sn-btn-ghost:hover{ background:#fff; color:var(--sn-ink); border-color:#fff; }

/* ============================================================
   COMPONENTS — cards / grid / timeline / stat / table
   ============================================================ */
.sn-grid{ display:grid; gap:24px; }
.sn-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.sn-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.sn-grid.cols-4{ grid-template-columns:repeat(4,1fr); }

.sn-card{
  background:#fff;
  border:1px solid var(--sn-line);
  border-radius:var(--sn-radius-lg);
  padding:36px 30px;
  transition:all .25s var(--sn-ease);
}
.sn-card:hover{
  border-color:var(--sn-primary);
  transform:translateY(-4px);
  box-shadow:var(--sn-shadow);
}
.sn-card .card-icon{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  background:var(--sn-soft);
  color:var(--sn-primary);
  border-radius:var(--sn-radius);
  font-size:24px;
  margin-bottom:20px;
}
.sn-card .card-title{ font-size:19px; font-weight:700; margin:0 0 10px; color:var(--sn-ink); letter-spacing:-.01em; }
.sn-card .card-desc{ font-size:14px; line-height:1.65; color:var(--sn-sub); margin:0; }

.sn-stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--sn-line);
  border-bottom:1px solid var(--sn-line);
}
.sn-stat-cell{
  padding:48px 24px;
  text-align:center;
  border-right:1px solid var(--sn-line);
}
.sn-stat-cell:last-child{ border-right:0; }
.sn-stat-num{
  font-family:var(--sn-font-en);
  font-size:48px; font-weight:800;
  color:var(--sn-primary);
  line-height:1;
  letter-spacing:-.02em;
}
.sn-stat-num .unit{ font-size:24px; font-weight:700; margin-left:4px; color:var(--sn-ink); }
.sn-stat-label{ margin-top:14px; font-size:14px; color:var(--sn-sub); letter-spacing:.02em; }

/* Timeline (history) */
.sn-timeline{ position:relative; padding-left:0; }
.sn-timeline::before{
  content:"";
  position:absolute; left:130px; top:0; bottom:0;
  width:2px; background:var(--sn-line);
}
.sn-tl-item{
  position:relative;
  padding:18px 0 18px 180px;
  min-height:80px;
}
.sn-tl-year{
  position:absolute; left:0; top:18px;
  font-family:var(--sn-font-en);
  font-size:30px; font-weight:800;
  color:var(--sn-ink);
  letter-spacing:-.02em;
}
.sn-tl-item::before{
  content:"";
  position:absolute; left:124px; top:30px;
  width:14px; height:14px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--sn-primary);
}
.sn-tl-event{
  font-size:15px;
  color:var(--sn-ink2);
  line-height:1.65;
  margin:0 0 6px;
}
.sn-tl-event strong{ color:var(--sn-primary); font-weight:700; margin-right:8px; }

/* CEO message */
.sn-ceo-grid{
  display:grid; grid-template-columns:380px 1fr; gap:60px;
  align-items:start;
}
.sn-ceo-photo{
  position:relative;
  background:var(--sn-soft);
  border-radius:var(--sn-radius-lg);
  overflow:hidden;
  aspect-ratio:3/4;
}
.sn-ceo-photo img{ width:100%; height:100%; object-fit:cover; }
.sn-ceo-name-tag{
  position:absolute; left:24px; bottom:24px;
  background:rgba(255,255,255,.95);
  padding:14px 20px;
  border-radius:var(--sn-radius);
}
.sn-ceo-name-tag .name{ font-size:20px; font-weight:800; color:var(--sn-ink); }
.sn-ceo-name-tag .pos{ font-size:13px; color:var(--sn-sub); display:block; margin-top:2px; }
.sn-ceo-content h3{
  font-size:32px; font-weight:800; color:var(--sn-ink);
  letter-spacing:-.02em; margin:0 0 32px;
  line-height:1.35;
}
.sn-ceo-content h3 em{ color:var(--sn-primary); font-style:normal; }
.sn-ceo-content p{
  font-size:16px; line-height:1.85; color:var(--sn-sub);
  margin:0 0 18px;
}
.sn-ceo-sign{
  margin-top:36px;
  font-size:15px; color:var(--sn-ink); font-weight:600;
}
.sn-ceo-sign strong{ font-size:18px; margin-left:10px; }

/* Vision / values */
.sn-vision-hero{
  position:relative;
  background:#fff;
  color:#0a0b0c;
  padding:90px 60px;
  border-radius:var(--sn-radius-lg);
  text-align:center;
  overflow:hidden;
  border:1px solid #eef0f2;
  background-size:cover;
  background-position:center;
}
.sn-vision-hero[data-img-bg]{
  color:#fff;
  border:0;
  min-height:340px;
}
.sn-vision-hero[data-img-bg]::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,11,12,.55), rgba(10,11,12,.7));
  z-index:0;
}
.sn-vision-hero[data-img-bg] > *{ position:relative; z-index:1; }
.sn-vision-hero[data-img-bg] .vh-desc{ color:rgba(255,255,255,.92); opacity:1; }
.sn-vision-hero[data-img-bg] .vh-title{ color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.sn-vision-hero[data-img-bg] .vh-en{ color:#ff8b8b; }
.sn-vision-hero .vh-en{
  font-family:var(--sn-font-en);
  font-size:14px; letter-spacing:.4em;
  color:var(--sn-primary); font-weight:700;
  margin-bottom:18px;
}
.sn-vision-hero .vh-title{
  font-size:clamp(32px, 4vw, 48px);
  font-weight:800; letter-spacing:-.02em;
  line-height:1.25; margin:0 0 18px;
}
.sn-vision-hero .vh-desc{
  max-width:680px; margin:0 auto;
  font-size:16px; line-height:1.75; opacity:.85;
}

/* ============================================================
   PRODUCT CATEGORIES (Mold/Molding) cards
   ============================================================ */
.sn-product-card{
  background:#fff;
  border:1px solid var(--sn-line);
  border-radius:var(--sn-radius-lg);
  overflow:hidden;
  transition:all .25s var(--sn-ease);
}
.sn-product-card:hover{
  border-color:var(--sn-primary);
  box-shadow:var(--sn-shadow);
  transform:translateY(-4px);
}
.sn-product-thumb{
  aspect-ratio:4/3;
  background:var(--sn-soft) center/cover no-repeat;
  position:relative;
  overflow:hidden;
}
.sn-product-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s var(--sn-ease);
}
.sn-product-card:hover .sn-product-thumb img{ transform:scale(1.05); }
.sn-product-body{ padding:22px 24px; }
.sn-product-tag{
  display:inline-block;
  font-size:11px;
  letter-spacing:.15em;
  color:var(--sn-primary);
  font-weight:700;
  margin-bottom:8px;
  text-transform:uppercase;
}
.sn-product-name{
  font-size:18px; font-weight:700; color:var(--sn-ink);
  margin:0 0 6px; letter-spacing:-.01em;
}
.sn-product-name .en{ font-size:13px; color:var(--sn-mute); font-weight:500; margin-left:8px; }
.sn-product-desc{ font-size:13px; color:var(--sn-sub); line-height:1.6; margin:0; }

/* ============================================================
   MOBILITY BROWSER (nifco-style tabs + cards)
   ============================================================ */
.sn-mob-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  border-bottom:1px solid var(--sn-line);
  padding-bottom:0;
  margin-bottom:50px;
  justify-content:center;
}
.sn-mob-tab{
  padding:14px 24px;
  font-size:15px; font-weight:600;
  color:var(--sn-sub);
  background:transparent; border:none;
  cursor:pointer;
  position:relative;
  transition:color .2s;
  letter-spacing:.01em;
}
.sn-mob-tab .num{
  font-family:var(--sn-font-en);
  font-size:13px;
  color:var(--sn-mute);
  margin-right:6px;
  font-weight:700;
}
.sn-mob-tab:hover{ color:var(--sn-ink); }
.sn-mob-tab.is-active{ color:var(--sn-primary); }
.sn-mob-tab.is-active .num{ color:var(--sn-primary); }
.sn-mob-tab::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:3px; background:var(--sn-primary);
  transform:scaleX(0);
  transition:transform .25s var(--sn-ease);
}
.sn-mob-tab.is-active::after{ transform:scaleX(1); }

.sn-mob-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:24px;
}
.sn-mob-item{
  background:#fff;
  border:1px solid var(--sn-line);
  border-radius:var(--sn-radius-lg);
  overflow:hidden;
  cursor:pointer;
  transition:all .25s var(--sn-ease);
  opacity:0;
  animation:snFadeIn .35s var(--sn-ease) forwards;
}
.sn-mob-item.is-hidden{ display:none; }
.sn-mob-item:hover{
  border-color:var(--sn-primary);
  transform:translateY(-4px);
  box-shadow:var(--sn-shadow);
}
.sn-mob-thumbs{
  position:relative;
  aspect-ratio:4/3;
  background:var(--sn-soft);
  overflow:hidden;
}
.sn-mob-thumbs img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:opacity .3s;
  opacity:0;
}
.sn-mob-thumbs img.is-on{ opacity:1; }
.sn-mob-thumbs .nav-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; justify-content:center; gap:6px;
  z-index:2;
}
.sn-mob-thumbs .nav-dots span{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:all .2s;
}
.sn-mob-thumbs .nav-dots span.is-on{ background:#fff; transform:scale(1.4); }
.sn-mob-body{ padding:18px 20px; }
.sn-mob-cat{
  font-size:11px; font-weight:700; letter-spacing:.15em;
  color:var(--sn-primary); text-transform:uppercase;
  margin-bottom:6px;
}
.sn-mob-title{ font-size:17px; font-weight:700; color:var(--sn-ink); margin:0 0 6px; letter-spacing:-.01em; }
.sn-mob-en{ font-family:var(--sn-font-en); font-size:12px; color:var(--sn-mute); font-weight:500; }
.sn-mob-tags{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.sn-mob-tags span{
  font-size:11px;
  padding:4px 10px;
  background:var(--sn-soft);
  color:var(--sn-sub);
  border-radius:99px;
}

@keyframes snFadeIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Mobility detail modal */
.sn-mob-modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.7);
  z-index:9800;
  display:none;
  align-items:center; justify-content:center;
  padding:24px;
}
.sn-mob-modal.is-open{ display:flex; }
.sn-mob-modal-inner{
  background:#fff;
  border-radius:var(--sn-radius-lg);
  max-width:900px; width:100%;
  max-height:90vh;
  overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr;
}
.sn-mob-modal-imgs{
  background:var(--sn-soft);
  position:relative;
  min-height:400px;
}
.sn-mob-modal-imgs img{
  width:100%; height:100%; object-fit:contain;
  position:absolute; inset:0; opacity:0;
  transition:opacity .3s;
}
.sn-mob-modal-imgs img.is-on{ opacity:1; }
.sn-mob-modal-imgs .modal-dots{
  position:absolute; bottom:14px; left:0; right:0;
  display:flex; gap:6px; justify-content:center;
  z-index:2;
}
.sn-mob-modal-imgs .modal-dots span{
  width:8px; height:8px; border-radius:50%;
  background:rgba(0,0,0,.2); cursor:pointer;
}
.sn-mob-modal-imgs .modal-dots span.is-on{ background:var(--sn-primary); }
.sn-mob-modal-body{
  padding:36px 32px;
  overflow-y:auto;
}
.sn-mob-modal-body .mm-cat{
  font-size:12px; letter-spacing:.2em; color:var(--sn-primary);
  font-weight:700; text-transform:uppercase; margin-bottom:12px;
}
.sn-mob-modal-body .mm-title{ font-size:24px; font-weight:800; color:var(--sn-ink); margin:0 0 6px; }
.sn-mob-modal-body .mm-en{ font-family:var(--sn-font-en); font-size:13px; color:var(--sn-mute); margin-bottom:20px; }
.sn-mob-modal-body .mm-desc{ font-size:14px; line-height:1.75; color:var(--sn-sub); margin:0 0 18px; }
.sn-mob-modal-body .mm-table{ width:100%; font-size:13px; border-collapse:collapse; }
.sn-mob-modal-body .mm-table th,
.sn-mob-modal-body .mm-table td{
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid var(--sn-line2);
}
.sn-mob-modal-body .mm-table th{ width:120px; color:var(--sn-sub); font-weight:600; background:var(--sn-soft); }
.sn-mob-modal-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px;
  background:rgba(255,255,255,.95); border:none; border-radius:50%;
  font-size:20px; cursor:pointer; z-index:5;
}

/* ============================================================
   FOOTER
   ============================================================ */
.sn-footer{ background:#1a1d1f; color:#a3a8aa; }
.sn-footer-top{
  padding:64px 0 48px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sn-footer-inner{
  max-width:var(--sn-container);
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:380px 1fr;
  gap:60px;
}
.sn-ft-brand .sn-ft-logo{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.sn-ft-brand .sn-ft-logo img{ max-height:40px; }
.sn-ft-brand .sn-ft-logo .ko{ font-size:18px; font-weight:800; color:#fff; }
.sn-ft-brand .ft-desc{
  font-size:13px; line-height:1.7; color:#a3a8aa;
  margin:0 0 20px; max-width:340px;
}
.sn-ft-info{
  font-size:13px; line-height:2; color:#a3a8aa;
}
.sn-ft-info strong{ color:#dcdfe1; min-width:78px; display:inline-block; }
.sn-ft-tel{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sn-font-en); font-size:24px; font-weight:800;
  color:#fff; margin-top:14px;
}

.sn-ft-cols{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:24px;
}
.sn-ft-col h5{
  font-size:14px; color:#fff; font-weight:700;
  margin:0 0 18px; letter-spacing:.02em;
}
.sn-ft-col a{
  display:block;
  font-size:13px; color:#a3a8aa;
  padding:6px 0;
  transition:color .2s;
}
.sn-ft-col a:hover{ color:#fff; }

.sn-footer-bottom{
  padding:20px 0;
  background:#0e1011;
}
.sn-footer-bottom-inner{
  max-width:var(--sn-container);
  margin:0 auto;
  padding:0 24px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px;
  font-size:12px; color:#7c8385;
}
.sn-footer-bottom-inner a{ color:#a3a8aa; margin-left:14px; }
.sn-footer-bottom-inner a:hover{ color:#fff; }

/* Top button */
.sn-topbtn{
  position:fixed; right:24px; bottom:24px;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--sn-primary); color:#fff;
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(212,32,32,.35);
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:all .25s var(--sn-ease);
  z-index:8500;
}
.sn-topbtn.is-show{ opacity:1; visibility:visible; transform:translateY(0); }
.sn-topbtn:hover{ background:var(--sn-primary-h); }

/* ============================================================
   Form / inquiry
   ============================================================ */
.sn-form{ max-width:680px; margin:0 auto; }
.sn-form .row{ margin-bottom:18px; }
.sn-form label{
  display:block; font-size:13px; font-weight:600; color:var(--sn-ink); margin-bottom:8px;
}
.sn-form label .req{ color:var(--sn-primary); margin-left:4px; }
.sn-form input[type=text],
.sn-form input[type=email],
.sn-form input[type=tel],
.sn-form select,
.sn-form textarea{
  width:100%; padding:13px 16px;
  background:#fff;
  border:1px solid var(--sn-line);
  border-radius:var(--sn-radius);
  font-size:14px; color:var(--sn-ink);
  font-family:var(--sn-font-kr);
  transition:border-color .2s;
}
.sn-form input:focus, .sn-form select:focus, .sn-form textarea:focus{
  outline:none; border-color:var(--sn-primary);
}
.sn-form textarea{ resize:vertical; min-height:140px; }
.sn-form .submit-row{ text-align:center; margin-top:32px; }

/* Map area */
.sn-map-wrap{
  border-radius:var(--sn-radius-lg); overflow:hidden;
  border:1px solid var(--sn-line);
  height:480px;
}
.sn-map-wrap iframe, .sn-map-wrap > div{ width:100%; height:100%; border:0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px){
  .sn-gnb-link{ padding:0 18px; font-size:15px; }
  .sn-gnb-link::after{ left:14px; right:14px; }
  .sn-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .sn-stat-strip{ grid-template-columns:repeat(2,1fr); }
  .sn-stat-cell:nth-child(2){ border-right:0; }
  .sn-stat-cell:nth-child(1),
  .sn-stat-cell:nth-child(2){ border-bottom:1px solid var(--sn-line); }
  .sn-ceo-grid{ grid-template-columns:1fr; gap:36px; }
  .sn-ceo-photo{ max-width:380px; margin:0 auto; }
  .sn-footer-inner{ grid-template-columns:1fr; gap:40px; }
  .sn-ft-cols{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 860px){
  .sn-topbar{ display:none; }
  .sn-header-inner{ height:64px; padding:0 18px; }
  .sn-logo img{ max-height:36px; }
  .sn-gnb, .sn-gnb-utility .util-cta, .sn-gnb-utility .util-btn{ display:none; }
  .sn-mobile-toggle{ display:flex; }

  .sn-subhero{ height:240px; }
  .sn-lnb{ top:64px; }
  .sn-lnb-link{ padding:14px 18px; font-size:14px; }

  .sn-grid.cols-2,
  .sn-grid.cols-3,
  .sn-grid.cols-4{ grid-template-columns:1fr; }

  .sn-section{ padding:60px 0; }
  .sn-section-head{ margin-bottom:40px; }
  .sn-section-head .title{ font-size:26px; }

  .sn-timeline::before{ left:0; }
  .sn-tl-item{ padding-left:30px; min-height:auto; }
  .sn-tl-item::before{ left:-6px; top:24px; }
  .sn-tl-year{ position:static; display:block; font-size:22px; margin-bottom:8px; }

  .sn-vision-hero{ padding:54px 24px; }
  .sn-mob-tabs{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .sn-mob-tab{ flex-shrink:0; padding:12px 16px; font-size:13px; }
  .sn-mob-grid{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
  .sn-mob-modal-inner{ grid-template-columns:1fr; max-height:95vh; }
  .sn-mob-modal-imgs{ min-height:280px; }
  .sn-mob-modal-body{ padding:24px 20px; }

  .sn-ft-cols{ grid-template-columns:repeat(2,1fr); }
  .sn-ft-cols .sn-ft-col:nth-child(5){ grid-column:span 2; }
}

/* Hide legacy header/footer when new ones are active */
body.sn-active #siteHeader,
body.sn-active .site-footer,
body.sn-active #topBtn,
body.sn-active .mobile-menu,
body.sn-active .mobile-overlay{
  display:none !important;
}
/* ============================================================
   MOBILITY — Vehicle render hero + hotspots + viewer
   Append to samanew.css
   ============================================================ */

.sn-mob-stage{
  position:relative;
  background:linear-gradient(180deg, #0f1112 0%, #1a1d1f 60%, #20242a 100%);
  border-radius:var(--sn-radius-lg);
  overflow:hidden;
  margin-bottom:48px;
  color:#fff;
}
.sn-mob-stage::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 50% 100%, rgba(212,32,32,.18) 0%, transparent 60%),
    radial-gradient(40% 60% at 0% 0%, rgba(255,255,255,.04) 0%, transparent 50%);
  pointer-events:none;
}

.sn-mob-stage-inner{
  position:relative;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:0;
  min-height:520px;
  z-index:2;
}

/* Left panel: vertical category list (Nifco-style) */
.sn-mob-cats{
  border-right:1px solid rgba(255,255,255,.08);
  padding:48px 0;
  background:rgba(0,0,0,.18);
}
.sn-mob-cats-eyebrow{
  font-family:var(--sn-font-en);
  font-size:11px;
  letter-spacing:.3em;
  color:rgba(255,255,255,.45);
  font-weight:700;
  padding:0 32px 16px;
  text-transform:uppercase;
}
.sn-mob-cat-btn{
  display:flex; align-items:center; gap:14px;
  width:100%;
  padding:18px 32px;
  background:transparent; border:none;
  text-align:left;
  font-size:15px;
  font-weight:600;
  color:rgba(255,255,255,.7);
  letter-spacing:.01em;
  cursor:pointer;
  position:relative;
  transition:all .25s var(--sn-ease);
}
.sn-mob-cat-btn .cat-num{
  font-family:var(--sn-font-en);
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.35);
  min-width:28px;
}
.sn-mob-cat-btn .cat-arrow{
  margin-left:auto;
  font-size:11px;
  opacity:0;
  transform:translateX(-6px);
  transition:all .25s var(--sn-ease);
  color:var(--sn-primary);
}
.sn-mob-cat-btn::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--sn-primary);
  transform:scaleY(0); transform-origin:center;
  transition:transform .25s var(--sn-ease);
}
.sn-mob-cat-btn:hover{ color:#fff; background:rgba(255,255,255,.04); }
.sn-mob-cat-btn:hover .cat-arrow{ opacity:1; transform:translateX(0); }
.sn-mob-cat-btn.is-active{
  color:#fff;
  background:rgba(212,32,32,.10);
}
.sn-mob-cat-btn.is-active::before{ transform:scaleY(1); }
.sn-mob-cat-btn.is-active .cat-num{ color:var(--sn-primary); }
.sn-mob-cat-btn.is-active .cat-arrow{ opacity:1; transform:translateX(0); }

/* Right panel: vehicle render + hotspots */
.sn-mob-render{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  padding:36px 48px;
  min-height:520px;
}
.sn-mob-render-head{
  position:absolute;
  top:36px; left:48px; right:48px;
  z-index:3;
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
}
.sn-mob-render-title{
  font-size:clamp(22px, 2.6vw, 32px);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 6px;
  color:#fff;
}
.sn-mob-render-en{
  font-family:var(--sn-font-en);
  font-size:12px;
  letter-spacing:.25em;
  color:rgba(255,255,255,.5);
  font-weight:700;
  text-transform:uppercase;
}
.sn-mob-render-count{
  font-family:var(--sn-font-en);
  font-size:13px;
  color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:8px 14px;
  border-radius:99px;
  white-space:nowrap;
}
.sn-mob-render-count strong{ color:#fff; font-weight:800; }

/* Vehicle SVG container */
.sn-mob-vehicle{
  position:relative;
  width:100%;
  margin-top:60px;
  display:flex;
  align-items:center; justify-content:center;
}
.sn-mob-vehicle svg{
  width:100%; max-width:680px; height:auto;
  display:block;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.4));
}
.sn-mob-vehicle .veh-base{
  fill:none; stroke:rgba(255,255,255,.35); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .35s var(--sn-ease);
}
.sn-mob-vehicle .veh-fill{
  fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.18);
  transition:all .35s var(--sn-ease);
}
.sn-mob-vehicle .veh-window{ fill:rgba(212,32,32,.05); stroke:rgba(255,255,255,.25); }
.sn-mob-vehicle .veh-wheel{ fill:#0e1011; stroke:rgba(255,255,255,.45); stroke-width:1.5; }
.sn-mob-vehicle .veh-wheel-rim{ fill:none; stroke:rgba(255,255,255,.55); stroke-width:1.5; }

/* Active part highlight */
.sn-mob-vehicle [data-zone]{ transition:all .35s var(--sn-ease); }
.sn-mob-vehicle.is-zone-interior [data-zone="interior"] .veh-base,
.sn-mob-vehicle.is-zone-interior [data-zone="interior"] path:not(.no-hl){
  stroke:var(--sn-primary); stroke-width:2.2;
}
.sn-mob-vehicle.is-zone-exterior [data-zone="exterior"] .veh-base,
.sn-mob-vehicle.is-zone-exterior [data-zone="exterior"] path:not(.no-hl){
  stroke:var(--sn-primary); stroke-width:2.2;
}
.sn-mob-vehicle.is-zone-engine [data-zone="engine"] .veh-base,
.sn-mob-vehicle.is-zone-engine [data-zone="engine"] path:not(.no-hl){
  stroke:var(--sn-primary); stroke-width:2.2;
}
.sn-mob-vehicle.is-zone-eco [data-zone="eco"] .veh-base,
.sn-mob-vehicle.is-zone-eco [data-zone="eco"] path:not(.no-hl){
  stroke:#26d07c; stroke-width:2.2;
}
.sn-mob-vehicle.is-zone-eco [data-zone="eco"] .veh-fill{ fill:rgba(38,208,124,.08); }

/* Hotspots */
.sn-mob-hotspot{
  position:absolute;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:4;
  transform:translate(-50%, -50%);
}
.sn-mob-hotspot-dot{
  position:relative;
  width:14px; height:14px;
  background:var(--sn-primary);
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 0 rgba(212,32,32,.55);
  animation:snHotPulse 2s infinite;
}
.sn-mob-hotspot[data-zone="eco"] .sn-mob-hotspot-dot{
  background:#26d07c;
  box-shadow:0 0 0 0 rgba(38,208,124,.55);
}
.sn-mob-hotspot.is-active .sn-mob-hotspot-dot{
  width:18px; height:18px;
  animation:none;
  box-shadow:0 0 0 8px rgba(212,32,32,.18), 0 0 24px rgba(212,32,32,.6);
}
.sn-mob-hotspot[data-zone="eco"].is-active .sn-mob-hotspot-dot{
  box-shadow:0 0 0 8px rgba(38,208,124,.18), 0 0 24px rgba(38,208,124,.6);
}
.sn-mob-hotspot-label{
  position:absolute;
  left:calc(100% + 12px); top:50%;
  transform:translateY(-50%);
  background:#fff; color:var(--sn-ink);
  padding:6px 12px;
  font-size:12px; font-weight:700;
  border-radius:4px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0; visibility:hidden;
  transition:all .2s;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.sn-mob-hotspot-label::before{
  content:""; position:absolute;
  left:-5px; top:50%; transform:translateY(-50%);
  width:0; height:0;
  border:5px solid transparent;
  border-right-color:#fff;
}
.sn-mob-hotspot:hover .sn-mob-hotspot-label,
.sn-mob-hotspot.is-active .sn-mob-hotspot-label{ opacity:1; visibility:visible; }

@keyframes snHotPulse{
  0%   { box-shadow:0 0 0 0 rgba(212,32,32,.55); }
  70%  { box-shadow:0 0 0 14px rgba(212,32,32,0); }
  100% { box-shadow:0 0 0 0 rgba(212,32,32,0); }
}

/* Stage footer bar with description */
.sn-mob-render-foot{
  position:relative;
  z-index:3;
  margin-top:auto;
  padding-top:24px;
  display:flex;
  justify-content:space-between; align-items:center;
  gap:24px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:20px;
  font-size:13px;
  color:rgba(255,255,255,.6);
}
.sn-mob-render-foot .veh-legend{ display:flex; gap:16px; align-items:center; }
.sn-mob-render-foot .veh-legend .lg{
  display:inline-flex; align-items:center; gap:6px;
}
.sn-mob-render-foot .veh-legend .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--sn-primary);
}
.sn-mob-render-foot .veh-legend .lg-eco .dot{ background:#26d07c; }

/* Mobile */
@media (max-width: 860px){
  .sn-mob-stage-inner{ grid-template-columns:1fr; min-height:auto; }
  .sn-mob-cats{ border-right:0; border-bottom:1px solid rgba(255,255,255,.08); padding:24px 0; display:flex; overflow-x:auto; gap:0; }
  .sn-mob-cats-eyebrow{ display:none; }
  .sn-mob-cat-btn{ flex-shrink:0; padding:14px 18px; font-size:13px; }
  .sn-mob-cat-btn::before{ left:0; right:0; top:auto; bottom:0; width:100%; height:3px; transform:scaleX(0); }
  .sn-mob-cat-btn.is-active::before{ transform:scaleX(1); }
  .sn-mob-cat-btn .cat-arrow{ display:none; }
  .sn-mob-render{ padding:24px 18px 32px; min-height:auto; }
  .sn-mob-render-head{ position:static; margin-bottom:18px; }
  .sn-mob-vehicle{ margin-top:0; }
  .sn-mob-render-foot{ flex-direction:column; align-items:flex-start; gap:12px; }
}
/* ============================================================
   MOBILITY V3 — Nifco-style full-bleed bg + hotspots + glass card
   Replaces v2. Append below v2 CSS to override.
   ============================================================ */

/* Hide v2 elements so v3 can render cleanly */
.sn-page .sn-mob-stage,
.sn-page .sn-mob-stage-inner,
.sn-page .sn-mob-tabs{ /* v2 sidebar/tabs hidden */ }

/* Stage v3 */
.snm-stage{
  position:relative;
  width:100%;
  background:#f7f8f9;
  border-radius:0;
  overflow:hidden;
  margin:-32px 0 32px;  /* 살짝 위로 끌어올려 sub-hero와 자연스럽게 연결 */
  isolation:isolate;
}
.snm-stage-canvas{
  position:relative;
  width:100%;
  /* aspect ratio of vehicle stage */
  aspect-ratio: 16 / 9;
  min-height:520px;
  max-height:780px;
  overflow:hidden;
  background:#eef0f2 center/cover no-repeat;
  transition:background-image .4s ease-out;
}
@media (max-width:860px){
  .snm-stage-canvas{ min-height:420px; aspect-ratio: 4 / 3; }
}

/* Stage background image layer (cross-fade) */
.snm-bg{
  position:absolute; inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .5s ease;
  will-change:opacity;
}
.snm-bg.is-on{ opacity:1; }

/* Hero overlay text (left) */
.snm-hero{
  position:absolute;
  left:max(40px, 5vw);
  top:14%;
  z-index:3;
  pointer-events:none;
  max-width:min(380px, 40%);
}
.snm-hero h1{
  font-family:var(--sn-font-en, 'Inter','Montserrat',sans-serif);
  font-size:clamp(48px, 6.4vw, 92px);
  font-weight:800;
  color:#0f1112;
  letter-spacing:-.03em;
  line-height:1;
  margin:0 0 26px;
}
.snm-hero p{
  font-size:15px;
  color:#1a1d1f;
  line-height:1.65;
  margin:0;
  letter-spacing:-.005em;
}
.snm-hero .down{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:46px;
  font-family:var(--sn-font-en, 'Inter',sans-serif);
  font-size:11px; letter-spacing:.32em; color:#0f1112;
  font-weight:700;
}
.snm-hero .down::before{ content:""; display:block; width:54px; height:1px; background:#0f1112; }

/* Hotspot markers (orange magnifier circles) */
.snm-hotspot{
  position:absolute;
  width:38px; height:38px;
  border-radius:50%;
  background:#ff7a00;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:0;
  cursor:pointer;
  z-index:5;
  transform:translate(-50%, -50%);
  box-shadow:0 6px 18px rgba(255,122,0,.45), 0 0 0 0 rgba(255,122,0,.55);
  animation:snmPulse 2.4s infinite ease-out;
  transition:transform .2s ease, box-shadow .2s ease;
}
.snm-hotspot::after{
  content:"";
  width:14px; height:14px;
  border:2px solid #fff;
  border-radius:50%;
}
.snm-hotspot::before{
  content:"";
  position:absolute;
  width:6px; height:2px;
  background:#fff;
  bottom:11px; right:9px;
  transform:rotate(45deg);
  border-radius:2px;
}
.snm-hotspot:hover{ transform:translate(-50%, -50%) scale(1.08); }
.snm-hotspot.is-active{
  background:#ff5a00;
  box-shadow:0 8px 28px rgba(255,90,0,.55), 0 0 0 10px rgba(255,90,0,.18);
  animation:none;
}
@keyframes snmPulse{
  0%   { box-shadow:0 6px 18px rgba(255,122,0,.45), 0 0 0 0 rgba(255,122,0,.45); }
  70%  { box-shadow:0 6px 18px rgba(255,122,0,.45), 0 0 0 18px rgba(255,122,0,0); }
  100% { box-shadow:0 6px 18px rgba(255,122,0,.45), 0 0 0 0 rgba(255,122,0,0); }
}

/* Glassmorphic popup card */
.snm-pop{
  position:absolute;
  z-index:7;
  min-width:240px; max-width:300px;
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.5);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  padding:18px 18px 14px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, -100%) translateY(-22px) scale(.96);
  transform-origin:50% 100%;
  transition:opacity .22s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.snm-pop.is-open{
  opacity:1; pointer-events:auto;
  transform:translate(-50%, -100%) translateY(-32px) scale(1);
}
.snm-pop-img{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:6px;
  overflow:hidden;
  background:rgba(255,255,255,.4);
  margin-bottom:14px;
}
.snm-pop-img img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .25s ease;
}
.snm-pop-img img.is-on{ opacity:1; }
.snm-pop-dots{
  display:flex; justify-content:center; gap:6px;
  margin-bottom:10px;
}
.snm-pop-dots span{
  width:6px; height:6px; border-radius:50%;
  background:rgba(15,17,18,.25);
  cursor:pointer; transition:all .2s;
}
.snm-pop-dots span.is-on{ background:#ff7a00; transform:scale(1.4); }

.snm-pop-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:10px;
  border-top:1px solid rgba(15,17,18,.12);
}
.snm-pop-foot .name{
  font-size:14px; font-weight:800; color:#0f1112;
  letter-spacing:.04em; text-transform:uppercase;
}
.snm-pop-foot .go{
  width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#0f1112;
  font-size:13px;
  text-decoration:none;
  border-radius:4px;
  transition:background .2s;
}
.snm-pop-foot .go:hover{ background:rgba(15,17,18,.06); }

/* Pop tail (arrow pointer down) */
.snm-pop::after{
  content:"";
  position:absolute;
  left:50%; bottom:-7px;
  width:14px; height:14px;
  background:rgba(255,255,255,.55);
  border-right:1px solid rgba(255,255,255,.5);
  border-bottom:1px solid rgba(255,255,255,.5);
  transform:translateX(-50%) rotate(45deg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Tab bar (pill) */
.snm-tabs{
  position:absolute;
  left:50%; bottom:36px;
  transform:translateX(-50%);
  width:min(1280px, 92%);
  display:flex;
  background:rgba(245,247,249,.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:99px;
  padding:6px;
  z-index:6;
  box-shadow:0 8px 30px rgba(0,0,0,.10);
}
.snm-tab{
  flex:1;
  border:0; background:transparent;
  font-family:var(--sn-font-kr, 'Pretendard',sans-serif);
  font-size:14px; font-weight:600;
  color:#0f1112;
  padding:18px 12px;
  cursor:pointer;
  border-radius:99px;
  transition:all .25s ease;
  white-space:nowrap;
  letter-spacing:-.01em;
}
.snm-tab:hover{ background:rgba(15,17,18,.05); }
.snm-tab.is-on{
  background:#ff7a00;
  color:#fff;
  box-shadow:0 6px 18px rgba(255,122,0,.35);
}
.snm-tab .num{
  display:inline-block;
  font-family:var(--sn-font-en, 'Inter',sans-serif);
  font-weight:700;
  margin-right:4px;
  opacity:.85;
}
@media (max-width:860px){
  .snm-tabs{
    bottom:18px;
    overflow-x:auto;
    width:calc(100% - 24px);
    padding:4px;
    flex-wrap:nowrap;
  }
  .snm-tab{ flex:0 0 auto; padding:12px 16px; font-size:12px; }
  .snm-hero{ left:18px; top:7%; max-width:60%; }
  .snm-hero h1{ font-size:42px; margin-bottom:14px; }
  .snm-hero p{ font-size:13px; }
  .snm-hero .down{ display:none; }
  .snm-hotspot{ width:32px; height:32px; }
  .snm-hotspot::after{ width:12px; height:12px; }
  .snm-pop{ min-width:200px; max-width:240px; }
}

/* Empty state inside stage (no bg image set) */
.snm-empty{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  color:#7c8385;
  background:repeating-linear-gradient(45deg, #f6f7f8 0 14px, #eef0f2 14px 28px);
  z-index:2;
}
.snm-empty i{ font-size:36px; margin-bottom:14px; color:#bcc1c5; }
.snm-empty .t{ font-weight:700; color:#1a1d1f; margin-bottom:6px; }
.snm-empty code{ background:#fff; padding:3px 8px; border-radius:4px; font-size:11px; border:1px solid #e5e7eb; }
/* ============================================================
   MOBILITY V3 — Nifco visual tuning
   override v3 styles for closer parity
   ============================================================ */

/* Make stage taller and aspect ratio closer to Nifco */
.snm-stage{ margin:-32px 0 0; }
.snm-stage-canvas{
  aspect-ratio: 1920 / 980;
  min-height:560px;
  background:#ffffff center/cover no-repeat;
}
@media (max-width:860px){
  .snm-stage-canvas{ min-height:460px; aspect-ratio: 4 / 3; }
}

/* Hero block: larger title, refined SCROLL DOWN line */
.snm-hero{ left:max(56px, 4vw); top:14%; max-width:min(420px, 38%); }
.snm-hero h1{
  font-family:var(--sn-font-en, 'Pretendard','Inter',sans-serif);
  font-size:clamp(60px, 7.6vw, 110px);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:.95;
  color:#0a0b0c;
  margin:0 0 28px;
}
.snm-hero p{
  font-size:16px; line-height:1.7; color:#1a1d1f;
  font-weight:500;
  letter-spacing:-.005em;
}
.snm-hero .down{
  font-size:11px; letter-spacing:.36em; color:#0a0b0c;
  margin-top:64px;
}
.snm-hero .down::before{ width:60px; }

/* Hotspot — slightly larger, more refined orange */
.snm-hotspot{
  width:42px; height:42px;
  background:#ff7a00;
  box-shadow:0 8px 22px rgba(255,122,0,.45), 0 0 0 0 rgba(255,122,0,.5);
}
.snm-hotspot::after{ width:16px; height:16px; }
.snm-hotspot::before{ width:7px; bottom:12px; right:10px; }

/* Tab pill bar — tune width, radius, padding to Nifco proportions */
.snm-tabs{
  bottom:30px;
  width:min(1340px, 94%);
  padding:7px;
  border-radius:60px;
  background:rgba(245,247,249,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(0,0,0,.07);
}
.snm-tab{
  padding:20px 12px;
  font-size:14px; font-weight:600;
  letter-spacing:-.005em;
  border-radius:50px;
}
.snm-tab.is-on{
  background:#ff7a00;
  color:#fff;
  box-shadow:0 6px 18px rgba(255,122,0,.35);
}
.snm-tab .num{ margin-right:6px; opacity:.95; }

/* Popup glass — tighter, slightly larger */
.snm-pop{ min-width:260px; max-width:320px; padding:20px 20px 16px; border-radius:16px; }
.snm-pop-img{ aspect-ratio:1/1; }
.snm-pop-foot .name{ font-size:13px; }

/* Spotlight ring on active hotspot */
.snm-hotspot.is-active{
  background:#ff5a00;
  box-shadow:0 8px 28px rgba(255,90,0,.55), 0 0 0 12px rgba(255,90,0,.16);
}

/* Slight desaturation/neutralize the bg layer transition */
.snm-bg{ transition:opacity .55s ease; }

/* Mobile tweaks */
@media (max-width:860px){
  .snm-hero{ left:18px; top:6%; max-width:65%; }
  .snm-hero h1{ font-size:46px; margin-bottom:14px; }
  .snm-hero p{ font-size:13px; }
  .snm-hero .down{ display:none; }
  .snm-tabs{ bottom:14px; width:calc(100% - 18px); padding:4px; border-radius:40px; overflow-x:auto; }
  .snm-tab{ padding:13px 14px; font-size:12px; flex:0 0 auto; }
  .snm-hotspot{ width:34px; height:34px; }
}
/* ============================================================
   MOBILITY V4 — Nifco-spec class structure (.prd-page / .product-viewer-wrap / #productViewerImg.all-viewer)
   ============================================================ */

.sn-mobility-content{ display:block; padding:0; background:#fff; }
.sn-mobility-content .prd-page{
  position:relative;
  width:100%;
  background:linear-gradient(180deg,#ffffff 0%,#f5f6f8 65%,#e9ebee 100%);
  padding:0 0 80px;
  overflow:hidden;
}

/* Hero text block */
.sn-mobility-content .area-wide{
  position:absolute;
  left:max(56px, 4vw);
  top:88px;
  z-index:6;
  pointer-events:none;
  max-width:min(440px, 38%);
}
.snm-mob-title{
  font-family:'Pretendard','Inter',sans-serif;
  font-size:clamp(60px, 7.4vw, 108px);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:.95;
  color:#0a0b0c;
  margin:0 0 26px;
}
.snm-mob-lead{
  font-size:16px; line-height:1.7; color:#1a1d1f;
  font-weight:500; letter-spacing:-.005em;
  margin:0;
}
.snm-mob-down{
  display:inline-flex; align-items:center; gap:14px;
  margin-top:54px;
  font-family:'Inter','Pretendard',sans-serif;
  font-size:11px; letter-spacing:.36em; color:#0a0b0c;
  font-weight:700;
}
.snm-mob-down::before{
  content:""; display:block;
  width:62px; height:1px; background:#0a0b0c;
}

/* Product viewer wrap (big stage) */
.product-viewer-wrap{
  position:relative;
  width:100%;
  margin:0 auto;
  padding:0;
  background:transparent;
  z-index:1;
}
.product-viewer-wrap.animated[data-scroll]{ /* fade-up disabled — always visible */
  opacity:1; transform:none;
}
.product-viewer-wrap.animated.is-shown,
.product-viewer-wrap.animated[data-shown="1"]{
  opacity:1; transform:none;
}

/* Stage canvas (#product-viewer is the inner canvas with aspect ratio) */
#product-viewer{
  position:relative;
  width:100%;
  aspect-ratio: 1920 / 980;
  min-height:560px;
  max-height:880px;
  margin:0 auto;
  overflow:hidden;
}
@media (max-width:860px){
  #product-viewer{ aspect-ratio: 4 / 3; min-height:420px; }
}

/* Tab buttons row (#productViewerBtn) */
#productViewerBtn{
  position:absolute;
  left:50%; bottom:28px;
  transform:translateX(-50%);
  width:min(1340px, 94%);
  display:flex;
  background:rgba(245,247,249,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:60px;
  padding:7px;
  box-shadow:0 6px 22px rgba(0,0,0,.07);
  z-index:8;
}
#productViewerBtn .viewer-btn-JS{
  flex:1;
  text-align:center;
  padding:18px 12px;
  font-family:'Pretendard',sans-serif;
  font-size:14px;
  font-weight:600;
  color:#0f1112;
  border-radius:50px;
  cursor:pointer;
  transition:all .25s ease;
  letter-spacing:-.005em;
  text-decoration:none;
  white-space:nowrap;
}
#productViewerBtn .viewer-btn-JS:hover{ background:rgba(15,17,18,.05); }
#productViewerBtn .viewer-btn-JS.active{
  background:#ff7a00;
  color:#fff;
  box-shadow:0 6px 18px rgba(255,122,0,.35);
}
#productViewerBtn .viewer-btn-JS .num{
  font-family:'Inter','Pretendard',sans-serif;
  font-weight:700;
  margin-right:5px;
  opacity:.95;
}

/* Viewer image (#productViewerImg) — holds rotation img + per-cat divs */
#productViewerImg{
  position:absolute; inset:0;
  z-index:2;
}
#productViewerImg .bottom{
  position:absolute; left:0; right:0; bottom:0;
  height:80px;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.04) 100%);
  pointer-events:none;
  z-index:1;
}

/* Rotation image (ALL view) */
#prd-rotation-img.prd-rotation{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  background:transparent;
  z-index:2;
  user-select:none;
  -webkit-user-drag:none;
}

/* Per-category viewer divs (#productInteriorImg etc.) */
.prd-cat-viewer{
  position:absolute; inset:0;
  background:#ffffff center/cover no-repeat;
  z-index:3;
}
.prd-cat-viewer.prd-all-hotspots{
  z-index:4;  /* hotspots above rotation image */
  background:transparent !important;
}

/* Hotspot markers (orange magnifier) */
.prd-hotspot,
.snm-hotspot{
  position:absolute;
  width:42px; height:42px;
  border-radius:50%;
  background:#ff7a00;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:0;
  cursor:pointer;
  z-index:5;
  transform:translate(-50%, -50%);
  box-shadow:0 8px 22px rgba(255,122,0,.45), 0 0 0 0 rgba(255,122,0,.5);
  animation:snmPulse 2.4s infinite ease-out;
  transition:transform .2s ease, box-shadow .2s ease;
}
.prd-hotspot::after,
.snm-hotspot::after{
  content:""; width:16px; height:16px;
  border:2px solid #fff; border-radius:50%;
}
.prd-hotspot::before,
.snm-hotspot::before{
  content:""; position:absolute;
  width:7px; height:2px; background:#fff;
  bottom:12px; right:10px;
  transform:rotate(45deg); border-radius:2px;
}
.prd-hotspot:hover,
.snm-hotspot:hover{ transform:translate(-50%, -50%) scale(1.08); }
.prd-hotspot.is-active,
.snm-hotspot.is-active{
  background:#ff5a00;
  box-shadow:0 8px 28px rgba(255,90,0,.55), 0 0 0 12px rgba(255,90,0,.16);
  animation:none;
}
@keyframes snmPulse{
  0%   { box-shadow:0 8px 22px rgba(255,122,0,.45), 0 0 0 0 rgba(255,122,0,.5); }
  70%  { box-shadow:0 8px 22px rgba(255,122,0,.45), 0 0 0 18px rgba(255,122,0,0); }
  100% { box-shadow:0 8px 22px rgba(255,122,0,.45), 0 0 0 0 rgba(255,122,0,0); }
}

/* Glassmorphic popup card */
.snm-pop{
  position:absolute;
  z-index:9;
  min-width:260px; max-width:320px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  padding:20px 20px 16px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, -100%) translateY(-22px) scale(.96);
  transform-origin:50% 100%;
  transition:opacity .22s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.snm-pop.is-open{
  opacity:1; pointer-events:auto;
  transform:translate(-50%, -100%) translateY(-32px) scale(1);
}
.snm-pop::after{
  content:""; position:absolute;
  left:50%; bottom:-7px;
  width:14px; height:14px;
  background:rgba(255,255,255,.6);
  border-right:1px solid rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.55);
  transform:translateX(-50%) rotate(45deg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.snm-pop-img{
  position:relative;
  width:100%; aspect-ratio:1/1;
  border-radius:8px; overflow:hidden;
  background:rgba(255,255,255,.45);
  margin-bottom:14px;
}
.snm-pop-img img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0; transition:opacity .25s ease;
}
.snm-pop-img img.is-on{ opacity:1; }
.snm-pop-dots{
  display:flex; justify-content:center; gap:6px; margin-bottom:10px;
}
.snm-pop-dots span{
  width:6px; height:6px; border-radius:50%;
  background:rgba(15,17,18,.25); cursor:pointer; transition:all .2s;
}
.snm-pop-dots span.is-on{ background:#ff7a00; transform:scale(1.4); }
.snm-pop-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:10px; border-top:1px solid rgba(15,17,18,.12);
}
.snm-pop-foot .name{
  font-size:13px; font-weight:800; color:#0f1112;
  letter-spacing:.04em; text-transform:uppercase;
}
.snm-pop-foot .go{
  width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#0f1112; font-size:13px; text-decoration:none;
  border-radius:4px; transition:background .2s;
}
.snm-pop-foot .go:hover{ background:rgba(15,17,18,.06); }

/* Mobile */
@media (max-width:860px){
  .sn-mobility-content .area-wide{ left:18px; top:30px; max-width:65%; }
  .snm-mob-title{ font-size:46px; margin-bottom:14px; }
  .snm-mob-lead{ font-size:13px; }
  .snm-mob-down{ display:none; }
  #productViewerBtn{
    bottom:14px; width:calc(100% - 18px); padding:4px;
    border-radius:40px; overflow-x:auto; flex-wrap:nowrap;
  }
  #productViewerBtn .viewer-btn-JS{ padding:13px 14px; font-size:12px; flex:0 0 auto; }
  .prd-hotspot, .snm-hotspot{ width:34px; height:34px; }
  .prd-hotspot::after, .snm-hotspot::after{ width:13px; height:13px; }
}

/* "fade-up" reveal */
.product-viewer-wrap.animated{ opacity:1; transform:none; }
/* ============================================================
   SUB VHERO V2 — Full-bleed 100vh hero with dropdown breadcrumb
   ============================================================ */
.sn-vhero{
  position:relative;
  width:100%;
  min-height:60vh;
  background:#1a1d1f center/cover no-repeat;
  color:#fff;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  margin-top:-1px;
}
.sn-vhero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
  z-index:1;
}
.sn-vhero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--sn-container, 1280px);
  margin:0 auto;
  padding:0 24px 120px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:end;
}
.sn-vhero-text{ max-width:760px; }
.sn-vhero-eyebrow{
  font-family:var(--sn-font-en,'Inter',sans-serif);
  font-size:13px;
  font-weight:700;
  letter-spacing:.32em;
  color:rgba(255,255,255,.85);
  margin-bottom:18px;
  text-transform:uppercase;
}
.sn-vhero-title{
  font-family:var(--sn-font-en,'Pretendard','Inter',sans-serif);
  font-size:clamp(72px, 9vw, 160px);
  font-weight:900;
  line-height:.92;
  letter-spacing:-.04em;
  color:#fff;
  margin:0 0 28px;
  text-shadow:0 4px 30px rgba(0,0,0,.3);
}
.sn-vhero-lead{
  font-size:clamp(15px, 1.4vw, 19px);
  line-height:1.65;
  font-weight:500;
  color:rgba(255,255,255,.92);
  margin:0;
  max-width:600px;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
}

/* Right: dropdown breadcrumb pills */
.sn-vhero-drops{
  display:flex; gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  position:relative;
}
.sn-drop{ position:relative; }
.sn-drop-btn{
  display:inline-flex; align-items:center; gap:36px;
  min-width:200px;
  padding:18px 26px;
  font-size:15px; font-weight:600;
  font-family:var(--sn-font-kr,'Pretendard',sans-serif);
  background:rgba(255,255,255,0.96);
  color:#0f1112;
  border:0;
  border-radius:99px;
  cursor:pointer;
  letter-spacing:-.005em;
  justify-content:space-between;
  transition:background .2s;
  box-shadow:0 4px 18px rgba(0,0,0,.14);
}
.sn-drop-btn i{ font-size:11px; transition:transform .2s; opacity:.7; }
.sn-drop-btn:hover{ background:#fff; }
.sn-drop-group .sn-drop-btn{
  background:var(--sn-primary, #d42020);
  color:#fff;
}
.sn-drop-group .sn-drop-btn i{ color:#fff; opacity:.95; }
.sn-drop.is-open .sn-drop-btn i{ transform:rotate(180deg); }

.sn-drop-menu{
  position:absolute;
  bottom:calc(100% + 8px); left:0; right:0;
  list-style:none; margin:0; padding:8px 0;
  background:#fff;
  border-radius:18px;
  box-shadow:0 14px 40px rgba(0,0,0,.18);
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .25s ease, visibility .2s ease;
  z-index:10;
  min-width:200px;
  max-height:340px;
  overflow-y:auto;
}
.sn-drop.is-open .sn-drop-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.sn-drop-link{
  display:block;
  padding:12px 24px;
  font-size:14px;
  color:#1a1d1f;
  text-decoration:none;
  font-weight:500;
  transition:background .15s, color .15s;
}
.sn-drop-link:hover{ background:#f6f7f8; color:var(--sn-primary, #d42020); }
.sn-drop-link.is-on{ color:var(--sn-primary, #d42020); font-weight:700; }

/* Scroll arrow indicator */
.sn-vhero-scroll{
  position:absolute;
  right:36px; bottom:36px;
  width:54px; height:54px;
  border-radius:50%;
  background:rgba(255,255,255,0.96);
  color:#0f1112;
  border:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:3;
  font-size:18px;
  box-shadow:0 6px 22px rgba(0,0,0,.18);
  animation:snVheroBob 1.8s ease-in-out infinite;
}
.sn-vhero-scroll:hover{ background:#fff; }
@keyframes snVheroBob {
  0%,100%{ transform:translateY(0); }
  50%   { transform:translateY(8px); }
}

/* Hide old LNB if new vhero is rendered */
body .sn-vhero ~ .sn-lnb,
body:has(.sn-vhero) .sn-lnb{ display:none !important; }

/* Mobile */
@media (max-width:860px){
  .sn-vhero{ min-height:78vh; }
  .sn-vhero-inner{
    grid-template-columns:1fr;
    padding:0 18px 60px;
    gap:24px;
  }
  .sn-vhero-title{ font-size:64px; }
  .sn-vhero-lead{ font-size:13px; }
  .sn-vhero-drops{ width:100%; }
  .sn-drop{ flex:1; }
  .sn-drop-btn{ min-width:auto; width:100%; padding:14px 18px; font-size:13px; }
  .sn-vhero-scroll{ display:none; }
}

/* ============================================================
   ESG body card patterns
   ============================================================ */
.sn-esg-intro{
  padding:120px 0 60px;
  background:#fff;
}
.sn-esg-intro .small-head{
  font-size:14px;
  color:#1a1d1f;
  font-weight:700;
  letter-spacing:-.005em;
  margin-bottom:22px;
}
.sn-esg-intro .big-title{
  font-size:clamp(28px,3.6vw,42px);
  font-weight:900;
  line-height:1.45;
  letter-spacing:-.025em;
  color:#0a0b0c;
  margin:0 0 32px;
}
.sn-esg-intro .big-title .ac{ color:var(--sn-primary, #d42020); }
.sn-esg-intro .desc{
  font-size:15px; line-height:1.85;
  color:#3a3f44;
  max-width:920px;
  margin:0;
}

.sn-esg-pillars{
  padding:40px 0 80px;
  background:#fff;
}
.sn-esg-pillars .pillar-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.sn-esg-pillar{
  position:relative;
  height:380px;
  border-radius:14px;
  overflow:hidden;
  background:#1a1d1f center/cover no-repeat;
  display:flex; align-items:flex-end;
  transition:transform .3s ease;
}
.sn-esg-pillar:hover{ transform:translateY(-6px); }
.sn-esg-pillar::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.65) 100%);
}
.sn-esg-pillar-label{
  position:relative; z-index:2;
  padding:28px 30px;
  color:#fff;
  font-family:var(--sn-font-en,'Inter',sans-serif);
  font-size:48px; font-weight:800;
  letter-spacing:-.02em;
}

.sn-esg-cards{
  padding:0 0 120px;
  background:#fff;
}
.sn-esg-cards .card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.sn-esg-card{
  position:relative;
  background:#fff;
  border:1px solid #e9ebee;
  border-radius:14px;
  padding:34px 30px;
  min-height:240px;
  transition:all .25s ease;
}
.sn-esg-card:hover{
  border-color:var(--sn-primary, #d42020);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transform:translateY(-4px);
}
.sn-esg-card .ti{
  font-size:24px; font-weight:800;
  color:#0a0b0c;
  letter-spacing:-.02em;
  margin:0 0 14px;
}
.sn-esg-card .li{
  font-size:14px; line-height:1.7;
  color:#3a3f44;
  margin:4px 0;
}
.sn-esg-card .ic{
  position:absolute;
  right:24px; bottom:24px;
  font-size:38px;
  color:var(--sn-primary, #d42020);
  opacity:.85;
}

@media (max-width:860px){
  .sn-esg-pillars .pillar-grid,
  .sn-esg-cards .card-grid{ grid-template-columns:1fr; }
  .sn-esg-pillar{ height:260px; }
  .sn-esg-pillar-label{ font-size:36px; padding:22px 24px; }
  .sn-esg-intro{ padding:60px 0 32px; }
  .sn-esg-cards{ padding-bottom:60px; }
}
/* ============================================================
   HEADER v3 — compact transparent-over-hero + hamburger fullscreen
   ============================================================ */
.snh3{
  position:fixed; top:0; left:0; right:0;
  z-index:9000;
  background:transparent;
  transition:background .25s ease, box-shadow .25s ease;
}
.snh3.is-scrolled{
  background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
}
.snh3.is-overlay{ background:transparent; box-shadow:none; }

.snh3-inner{
  max-width:1600px;
  margin:0 auto;
  padding:0 32px;
  height:80px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}
.snh3-logo{
  display:inline-flex; align-items:center;
  font-family:'Inter','Pretendard',sans-serif;
  font-weight:900;
  font-size:24px;
  letter-spacing:-.02em;
  color:#0f1112;
  text-decoration:none;
}
.snh3-logo img{ max-height:36px; width:auto; display:block; }
.snh3-logo .lg-mark{ display:inline-flex; }
.snh3-logo .lg-mark i{ color:var(--sn-primary,#d42020); font-style:normal; padding:0 2px; transform:skewX(-6deg); display:inline-block; }
.snh3.is-overlay .snh3-logo{ color:#fff; }
.snh3.is-overlay .snh3-logo .lg-mark i{ color:var(--sn-primary,#d42020); }

/* Centered nav */
.snh3-nav{
  display:flex;
  justify-content:center;
  gap:0;
}
.snh3-item{ position:relative; }
.snh3-link{
  display:inline-flex; align-items:center;
  height:80px;
  padding:0 28px;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.005em;
  color:#0f1112;
  text-decoration:none;
  transition:color .15s;
}
.snh3.is-overlay .snh3-link{ color:#fff; }
.snh3-link:hover,
.snh3-item.is-active .snh3-link{ color:var(--sn-primary,#d42020); }
.snh3.is-overlay .snh3-link:hover,
.snh3.is-overlay .snh3-item.is-active .snh3-link{ color:#fff; }
.snh3-item.is-active .snh3-link{ position:relative; }
.snh3-item.is-active .snh3-link::after{
  content:""; position:absolute;
  left:24px; right:24px; bottom:24px;
  height:3px; background:var(--sn-primary,#d42020);
  border-radius:2px;
}

/* Mega dropdown */
.snh3-mega{
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:220px;
  background:#fff;
  border-radius:0 0 12px 12px;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
  padding:14px 0;
  border-top:2px solid var(--sn-primary,#d42020);
  opacity:0; visibility:hidden;
  transition:opacity .2s, visibility .2s, transform .25s;
  z-index:9100;
}
.snh3-item:hover > .snh3-mega{
  opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.snh3-mega-link{
  display:block;
  padding:11px 24px;
  font-size:14px;
  color:#1a1d1f;
  font-weight:500;
  text-decoration:none;
  transition:all .15s;
}
.snh3-mega-link:hover, .snh3-mega-link.is-on{
  color:var(--sn-primary,#d42020);
  background:#f6f7f8;
  padding-left:30px;
}

/* Right utilities */
.snh3-util{
  display:inline-flex; align-items:center; gap:14px;
}
.snh3-lang{
  display:inline-flex; align-items:center; gap:8px;
  height:38px;
  padding:0 16px;
  background:rgba(245,247,249,.6);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:99px;
  font-size:13px; font-weight:600; color:#0f1112;
  cursor:pointer;
  transition:all .2s;
}
.snh3-lang i{ font-size:11px; opacity:.7; }
.snh3.is-overlay .snh3-lang{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.25); color:#fff; }

.snh3-burger{
  width:42px; height:42px;
  display:inline-flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:7px;
  background:transparent; border:0;
  cursor:pointer;
}
.snh3-burger span{
  display:block; width:26px; height:2px;
  background:#0f1112;
  transition:all .25s;
}
.snh3.is-overlay .snh3-burger span{ background:#fff; }
.snh3-burger.is-x span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); background:#fff; }
.snh3-burger.is-x span:nth-child(2){ transform:translateY(-4.5px) rotate(-45deg); background:#fff; }

/* Fullscreen menu */
.snh3-full{
  position:fixed; inset:0;
  background:rgba(15,17,18,.97);
  z-index:8990;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
  overflow-y:auto;
  padding:120px 32px 40px;
}
.snh3-full.is-open{ opacity:1; visibility:visible; }
.snh3-full-inner{ max-width:1600px; margin:0 auto; }
.snh3-full-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:32px;
  margin-bottom:80px;
}
.snh3-full-h{
  display:block;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.18);
  text-decoration:none;
  color:#fff;
}
.snh3-full-h .ko{
  display:block;
  font-size:24px; font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:6px;
  transition:color .2s;
}
.snh3-full-h .en{
  display:block;
  font-family:'Inter','Pretendard',sans-serif;
  font-size:11px; letter-spacing:.32em;
  color:rgba(255,255,255,.5);
  font-weight:600;
}
.snh3-full-h:hover .ko{ color:var(--sn-primary,#d42020); }

.snh3-full-col ul{ list-style:none; padding:0; margin:0; }
.snh3-full-col li a{
  display:block;
  padding:9px 0;
  color:rgba(255,255,255,.75);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  letter-spacing:-.005em;
  transition:color .15s, padding-left .2s;
}
.snh3-full-col li a:hover{
  color:#fff;
  padding-left:8px;
}
.snh3-full-foot{
  display:flex; gap:32px; flex-wrap:wrap;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13px; color:rgba(255,255,255,.65);
}
.snh3-full-foot a{ color:rgba(255,255,255,.85); text-decoration:none; }

/* ============================================================
   FOOTER v3 — black minimal
   ============================================================ */
.snf3{
  background:#0a0c0e;
  color:#a3a8aa;
}
.snf3-top{
  padding:60px 0 40px;
}
.snf3-inner{
  max-width:1600px;
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:48px;
  align-items:start;
}
.snf3-logo{
  display:inline-flex;
  text-decoration:none;
  color:#fff;
  font-family:'Inter','Pretendard',sans-serif;
  font-weight:900;
  font-size:32px;
  letter-spacing:-.02em;
}
.snf3-logo img{ max-height:42px; }
.snf3-logo .lg{ display:inline-flex; }
.snf3-logo .lg i{ color:var(--sn-primary,#d42020); font-style:normal; padding:0 3px; transform:skewX(-6deg); display:inline-block; }

.snf3-info{ display:flex; flex-direction:column; gap:6px; padding-top:6px; }
.snf3-info .row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:14px; }
.snf3-info .row .lbl{
  font-size:13px; font-weight:700; color:#9ba0a5;
  letter-spacing:-.005em;
  min-width:34px;
}
.snf3-info .row .val{ color:#fff; font-weight:500; letter-spacing:-.005em; }
.snf3-info .row.inline .lbl{ min-width:auto; margin-left:18px; }
.snf3-info .row.inline .lbl:first-child{ margin-left:0; }

.snf3-family{
  position:relative;
  align-self:start;
}
.snf3-fam-btn{
  display:inline-flex; align-items:center; gap:80px;
  min-width:220px;
  padding:14px 22px;
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  border-radius:99px;
  color:#fff;
  font-size:14px; font-weight:600;
  cursor:pointer;
  justify-content:space-between;
  transition:background .2s;
}
.snf3-fam-btn i{ font-size:11px; transition:transform .2s; }
.snf3-fam-btn:hover{ background:rgba(255,255,255,.06); }
.snf3-family.is-open .snf3-fam-btn i{ transform:rotate(180deg); }

.snf3-fam-menu{
  list-style:none; margin:0; padding:8px 0;
  position:absolute;
  bottom:calc(100% + 8px); left:0; right:0;
  background:#1a1d1f;
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s, visibility .2s, transform .25s;
  z-index:5;
}
.snf3-family.is-open .snf3-fam-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.snf3-fam-menu a{
  display:block;
  padding:10px 22px;
  color:rgba(255,255,255,.85);
  font-size:13px;
  text-decoration:none;
  transition:color .15s, background .15s;
}
.snf3-fam-menu a:hover{ color:var(--sn-primary,#d42020); background:rgba(255,255,255,.04); }

.snf3-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:18px 0;
  background:#000;
}
.snf3-bottom .snf3-inner{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
}
.snf3-bot-l{ display:flex; gap:12px; align-items:center; font-size:12px; color:#a3a8aa; }
.snf3-bot-l a{ color:#dcdfe1; text-decoration:none; transition:color .15s; }
.snf3-bot-l a:hover{ color:#fff; }
.snf3-bot-l a:first-child{ font-weight:700; color:#fff; }
.snf3-bot-l .sep{ opacity:.4; }
.snf3-bot-r{ font-size:12px; color:#7c8385; letter-spacing:-.005em; }

/* Push body content below fixed header */
body.sn-active #sh_wrapper > main:not(:has(.sn-vhero)),
body.sn-active main:not(:has(.sn-vhero)){ /* not vhero pages: add top padding */ }
body.sn-active #sh_wrapper{ padding-top:0; }

/* Hide old header/footer if any leftover */
body.sn-active .sn-header-wrap,
body.sn-active .sn-footer{ display:none !important; }

/* For pages WITHOUT vhero (e.g. legacy/board), give content a top padding */
body.sn-active:not(:has(.sn-vhero)) .sn-page,
body.sn-active:not(:has(.sn-vhero)) #container,
body.sn-active:not(:has(.sn-vhero)) main,
body.sn-active:not(:has(.sn-vhero)) #sh_wrapper > div:first-child{
  padding-top:80px;
}

@media (max-width:1100px){
  .snh3-inner{ padding:0 18px; }
  .snh3-link{ padding:0 16px; font-size:14px; }
}
@media (max-width:860px){
  .snh3-inner{ height:64px; grid-template-columns:auto auto; gap:0; justify-content:space-between; }
  .snh3-nav{ display:none; }
  .snh3-lang{ display:none; }
  .snh3-burger{ width:38px; }
  .snh3-burger span{ width:22px; }
  .snh3-full{ padding:96px 22px 32px; }
  .snh3-full-grid{ grid-template-columns:1fr; gap:14px; margin-bottom:40px; }
  .snh3-full-h .ko{ font-size:20px; }
  .snh3-full-col ul{ display:none; }
  .snf3-inner{ grid-template-columns:1fr; gap:24px; }
  .snf3-bottom .snf3-inner{ flex-direction:column; align-items:flex-start; }
}
/* ============================================================
   GNUBOARD BOARD SKIN — modern restyle (notice/file/quotation/incruit)
   Scoped to .sn-active (set on body via head.php) and applies to
   all board.php + bbs/* outputs without touching legacy skin files.
   ============================================================ */

body.sn-active #bo_list,
body.sn-active #bo_v,
body.sn-active #bo_w,
body.sn-active #bo_search,
body.sn-active #bo_gall,
body.sn-active .new_win{
  font-family:'Pretendard','Noto Sans KR',sans-serif;
}

/* Board container: give it spacing + width */
body.sn-active #bo_list,
body.sn-active #bo_v,
body.sn-active #bo_w,
body.sn-active #bo_search,
body.sn-active #bo_gall{
  max-width:1280px;
  margin:80px auto 100px;
  padding:0 24px;
  color:#0f1112;
}

/* Board header — title strip */
body.sn-active #bo_list h2,
body.sn-active #bo_v h2,
body.sn-active #bo_w h2{
  font-size:32px;
  font-weight:800;
  letter-spacing:-.025em;
  color:#0a0b0c;
  margin:0 0 24px;
  padding-bottom:16px;
  border-bottom:2px solid #0f1112;
  position:relative;
}
body.sn-active #bo_list h2::after,
body.sn-active #bo_v h2::after{
  content:""; position:absolute;
  left:0; bottom:-2px;
  width:60px; height:2px;
  background:var(--sn-primary,#d42020);
}

/* Top utility row (search / count / category) */
body.sn-active .bo_fx,
body.sn-active #bo_list_total,
body.sn-active .pg_wrap{ font-size:13px; color:#5a6065; }

/* Search form */
body.sn-active #bo_sch fieldset{
  border:1px solid #e9ebee;
  border-radius:99px;
  padding:6px 6px 6px 18px;
  display:inline-flex; align-items:center; gap:10px;
  background:#fff;
}
body.sn-active #bo_sch select,
body.sn-active #bo_sch input[type=text]{
  border:0; padding:8px 12px; font-size:14px; outline:none;
}
body.sn-active #bo_sch input[type=submit],
body.sn-active #bo_sch button[type=submit]{
  background:var(--sn-primary,#d42020); color:#fff;
  border:0; padding:9px 24px; border-radius:99px;
  font-weight:700; font-size:13px; cursor:pointer;
  transition:background .15s;
}
body.sn-active #bo_sch input[type=submit]:hover,
body.sn-active #bo_sch button[type=submit]:hover{ background:var(--sn-primary-h,#b01818); }

/* Category tabs (bo_use_category=1) */
body.sn-active #bo_cate,
body.sn-active #bo_cate_ul,
body.sn-active .bo_cate_link_w{
  border:0;
  margin:24px 0;
  display:flex; flex-wrap:wrap; gap:8px;
  padding:0;
  background:transparent;
}
body.sn-active #bo_cate ul,
body.sn-active #bo_cate_ul,
body.sn-active .bo_cate_link_w{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0; padding:0;
}
body.sn-active #bo_cate li,
body.sn-active #bo_cate_ul li{
  list-style:none;
  margin:0;
}
body.sn-active #bo_cate a,
body.sn-active #bo_cate_ul a,
body.sn-active .bo_cate_on,
body.sn-active .bo_cate_link{
  display:inline-flex; align-items:center;
  padding:9px 18px;
  border:1px solid #e9ebee;
  border-radius:99px;
  font-size:13px; font-weight:600;
  color:#3a3f44; background:#fff;
  text-decoration:none;
  transition:all .15s;
}
body.sn-active #bo_cate a:hover,
body.sn-active #bo_cate_ul a:hover,
body.sn-active .bo_cate_link:hover{
  border-color:var(--sn-primary,#d42020);
  color:var(--sn-primary,#d42020);
}
body.sn-active #bo_cate .bo_cate_on,
body.sn-active #bo_cate_ul .bo_cate_on,
body.sn-active a.bo_cate_on{
  background:var(--sn-primary,#d42020) !important;
  color:#fff !important;
  border-color:var(--sn-primary,#d42020) !important;
}

/* List table */
body.sn-active .tbl_head01 table,
body.sn-active #bo_list table,
body.sn-active .board_list table{
  width:100%; border-collapse:collapse;
  border-top:2px solid #0f1112;
  background:#fff;
}
body.sn-active .tbl_head01 thead th,
body.sn-active #bo_list thead th,
body.sn-active .board_list thead th{
  background:#f6f7f8;
  padding:14px 12px;
  font-size:13px; font-weight:700; color:#0f1112;
  border-bottom:1px solid #e9ebee;
  letter-spacing:-.005em;
}
body.sn-active .tbl_head01 td,
body.sn-active #bo_list td,
body.sn-active .board_list td{
  padding:16px 12px;
  font-size:14px;
  color:#1a1d1f;
  border-bottom:1px solid #eef0f2;
  vertical-align:middle;
}
body.sn-active .tbl_head01 tr:hover td,
body.sn-active #bo_list tr:hover td,
body.sn-active .board_list tr:hover td{ background:#fafbfc; }
body.sn-active .bo_cate_l,
body.sn-active .bo_cate_l a{
  font-size:12px; color:var(--sn-primary,#d42020);
  font-weight:700;
}
body.sn-active .bo_subject,
body.sn-active td.subject a,
body.sn-active .bo_tit a{
  font-weight:600; color:#0a0b0c; text-decoration:none;
}
body.sn-active .bo_subject:hover,
body.sn-active td.subject a:hover{ color:var(--sn-primary,#d42020); }

/* Pagination */
body.sn-active .pg_wrap,
body.sn-active .pg{
  display:flex; justify-content:center; gap:4px;
  padding:32px 0; flex-wrap:wrap;
}
body.sn-active .pg a,
body.sn-active .pg strong,
body.sn-active .pg_page,
body.sn-active .pg_current{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 12px;
  font-size:13px; font-weight:600;
  border:1px solid #e9ebee;
  border-radius:6px;
  background:#fff; color:#3a3f44;
  text-decoration:none;
  transition:all .15s;
}
body.sn-active .pg a:hover{ border-color:var(--sn-primary,#d42020); color:var(--sn-primary,#d42020); }
body.sn-active .pg_current,
body.sn-active .pg strong{
  background:var(--sn-primary,#d42020) !important;
  color:#fff !important;
  border-color:var(--sn-primary,#d42020) !important;
}

/* Buttons (bo_btn) */
body.sn-active .bo_fx{
  display:flex; justify-content:flex-end; gap:8px;
  padding:18px 0;
}
body.sn-active .btn_b01,
body.sn-active .btn_b02,
body.sn-active .btn_admin,
body.sn-active .btn_submit,
body.sn-active a.btn,
body.sn-active button.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:11px 22px;
  font-size:13px; font-weight:700;
  border-radius:6px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  letter-spacing:-.005em;
  transition:all .15s;
}
body.sn-active .btn_b01,
body.sn-active .btn_submit{
  background:var(--sn-primary,#d42020); color:#fff !important; border-color:var(--sn-primary,#d42020);
}
body.sn-active .btn_b01:hover,
body.sn-active .btn_submit:hover{ background:var(--sn-primary-h,#b01818); }
body.sn-active .btn_b02,
body.sn-active a.btn{
  background:#fff; color:#0f1112 !important; border-color:#0f1112;
}
body.sn-active .btn_b02:hover{ background:#0f1112; color:#fff !important; }

/* View page */
body.sn-active #bo_v{
  background:#fff;
}
body.sn-active #bo_v_title h1,
body.sn-active #bo_v_title{
  font-size:26px; font-weight:800; color:#0a0b0c;
  letter-spacing:-.02em;
  padding-bottom:16px; margin:0 0 12px;
  border-bottom:1px solid #e9ebee;
}
body.sn-active .bo_v_info,
body.sn-active #bo_v_info{
  font-size:13px; color:#5a6065;
  margin-bottom:24px; padding-bottom:18px;
  border-bottom:1px solid #e9ebee;
}
body.sn-active #bo_v_atc,
body.sn-active #bo_v_atc_inner,
body.sn-active .view_content{
  font-size:15px; line-height:1.85; color:#1a1d1f;
  padding:30px 0;
  min-height:200px;
}
body.sn-active #bo_v_img img,
body.sn-active .view_content img{ max-width:100%; height:auto; border-radius:8px; }

body.sn-active #bo_v_file,
body.sn-active #bo_v_link{
  border:1px solid #e9ebee; border-radius:10px;
  padding:18px 22px; margin:18px 0;
  background:#fafbfc;
}
body.sn-active #bo_v_file h2,
body.sn-active #bo_v_link h2{
  font-size:14px; font-weight:700; color:#0f1112; margin:0 0 10px;
}
body.sn-active #bo_v_file ul,
body.sn-active #bo_v_link ul{ list-style:none; padding:0; margin:0; }
body.sn-active #bo_v_file li,
body.sn-active #bo_v_link li{ padding:5px 0; font-size:13px; }
body.sn-active #bo_v_file a,
body.sn-active #bo_v_link a{ color:var(--sn-primary,#d42020); }

/* Write form */
body.sn-active #bo_w{
  background:#fff;
}
body.sn-active #bo_w fieldset{ border:0; padding:0; margin:0; }
body.sn-active #bo_w .write_div,
body.sn-active #bo_w_form > div{
  display:grid; grid-template-columns:140px 1fr; gap:14px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid #eef0f2;
}
body.sn-active #bo_w label{ font-size:13px; font-weight:600; color:#1a1d1f; }
body.sn-active #bo_w input[type=text],
body.sn-active #bo_w input[type=email],
body.sn-active #bo_w input[type=tel],
body.sn-active #bo_w input[type=password],
body.sn-active #bo_w select,
body.sn-active #bo_w textarea{
  width:100%; padding:11px 14px;
  border:1px solid #e9ebee; border-radius:6px;
  font-size:14px; color:#0f1112;
  font-family:inherit;
  transition:border-color .15s;
}
body.sn-active #bo_w input:focus,
body.sn-active #bo_w select:focus,
body.sn-active #bo_w textarea:focus{
  outline:none; border-color:var(--sn-primary,#d42020);
}
body.sn-active #bo_w textarea{ resize:vertical; min-height:160px; }
body.sn-active #autosave_pop{ display:none; }

/* Comments */
body.sn-active #bo_vc,
body.sn-active .cmt_contents{
  margin-top:32px; padding-top:24px;
  border-top:1px solid #e9ebee;
}
body.sn-active #bo_vc h2{
  font-size:18px; font-weight:700; color:#0a0b0c; margin:0 0 18px;
}
body.sn-active .cmt_contents .cmt_li,
body.sn-active #bo_vc article{
  background:#fafbfc; border:1px solid #e9ebee; border-radius:10px;
  padding:16px 20px; margin-bottom:10px;
  font-size:14px;
}

/* Gallery / image-list (theme/tl_product_gallery, gallery, photo) */
body.sn-active .gallery-list,
body.sn-active #gall_ul{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
}
body.sn-active .gallery-list li,
body.sn-active #gall_ul .gall_li{
  list-style:none; padding:0; margin:0;
  background:#fff; border:1px solid #e9ebee; border-radius:14px;
  overflow:hidden;
  transition:all .25s ease;
}
body.sn-active .gallery-list li:hover,
body.sn-active #gall_ul .gall_li:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  border-color:var(--sn-primary,#d42020);
}
body.sn-active #gall_ul .gall_img,
body.sn-active .gallery-list .img{
  aspect-ratio:4/3; background:#f6f7f8 center/cover no-repeat;
  overflow:hidden;
}
body.sn-active #gall_ul .gall_img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s;
}
body.sn-active .gallery-list li:hover .gall_img img{ transform:scale(1.05); }
body.sn-active #gall_ul .gall_text_href,
body.sn-active #gall_ul .gall_subject{
  padding:18px 20px;
  font-size:15px; font-weight:600;
  color:#0a0b0c; text-decoration:none; display:block;
  letter-spacing:-.01em;
}

/* FAQ skin tweaks */
body.sn-active .faq_lst > li,
body.sn-active .faq-list > li,
body.sn-active .qa-list > li{
  border:1px solid #e9ebee !important;
  border-radius:10px !important;
  background:#fff !important;
  margin-bottom:10px !important;
  padding:0 !important;
}

/* Hide old gnuboard "skin border-style" boxes */
body.sn-active #bo_list .list_01,
body.sn-active #bo_v .view_01{ background:transparent; }

/* Inquiry form (theme/daon_inquiry skin) */
body.sn-active form input,
body.sn-active form select,
body.sn-active form textarea{ box-sizing:border-box; }

/* Mobile */
@media (max-width:860px){
  body.sn-active #bo_list,
  body.sn-active #bo_v,
  body.sn-active #bo_w,
  body.sn-active #bo_gall{
    margin:60px auto 60px; padding:0 16px;
  }
  body.sn-active #bo_list h2,
  body.sn-active #bo_v h2,
  body.sn-active #bo_w h2{ font-size:24px; }
  body.sn-active #bo_w .write_div,
  body.sn-active #bo_w_form > div{ grid-template-columns:1fr; gap:6px; }
  body.sn-active .gallery-list,
  body.sn-active #gall_ul{ grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ============================================================
   Defect fixes — font display swap, image fallback, container fix
   ============================================================ */
@font-face{ font-family:'Pretendard'; font-display:swap; }
img{ image-rendering:auto; }
img:not([src]),
img[src=""],
img[src$="undefined"]{ visibility:hidden; }

/* Old layout containers: ensure no horizontal overflow */
body.sn-active #container{ overflow-x:hidden; }
body.sn-active #wrap, body.sn-active #wrapper{ background:#fff; }

/* Ensure bbs/index pages have proper top padding (header is 80px) */
body.sn-active #container > .container_box,
body.sn-active #wrap > #container,
body.sn-active #container > section{ padding-top:0; }

/* ============================================================
   Board page top spacing — clear fixed 80px header
   ============================================================ */
body.sn-active.bbs_list_page #wrap,
body.sn-active.bbs_view_page #wrap,
body.sn-active.bbs_write_page #wrap,
body.sn-active #container > .container_box{ padding-top:0; }

body.sn-active #container{
  padding-top:100px;
  background:#fff;
}
/* if vhero is used elsewhere, no extra padding */
body.sn-active:has(.sn-vhero) #container{ padding-top:0; }

/* admin board buttons — keep above fixed header */
body.sn-active .bo_fx,
body.sn-active #bo_list .btn_admin{ position:relative; z-index:5; }

/* board search bar — proper container */
body.sn-active #bo_sch{
  max-width:1280px; margin:30px auto; padding:0 24px;
}

/* ============================================================
   HEADER OVERLAY CONTRAST FIX
   When header sits over dark vhero, force pure-white text +
   add subtle dark scrim under the header for guaranteed legibility
   ============================================================ */

/* Always make logo SA part white in overlay mode */
.snh3.is-overlay .snh3-logo,
.snh3.is-overlay .snh3-logo .lg-mark{
  color:#fff !important;
}
.snh3.is-overlay .snh3-logo .lg-mark i{
  color:var(--sn-primary,#d42020) !important;
}

/* Force nav links pure-white in overlay (override any cascade) */
.snh3.is-overlay .snh3-link{
  color:#fff !important;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.snh3.is-overlay .snh3-item.is-active .snh3-link{
  color:#fff !important;
}
.snh3.is-overlay .snh3-item.is-active .snh3-link::after{
  background:var(--sn-primary,#d42020);
  box-shadow:0 0 12px rgba(212,32,32,.6);
}

/* KOR pill — strong contrast pill on dark */
.snh3.is-overlay .snh3-lang{
  background:rgba(255,255,255,.92) !important;
  color:#0f1112 !important;
  border-color:rgba(255,255,255,.92) !important;
  font-weight:700;
}
.snh3.is-overlay .snh3-lang i{ color:#0f1112 !important; opacity:.7; }

/* Burger lines — pure white + slight shadow */
.snh3.is-overlay .snh3-burger span{
  background:#fff !important;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}

/* Subtle scrim behind header for guaranteed legibility on any vhero */
.snh3.is-overlay::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.12) 60%, rgba(0,0,0,0) 100%);
  pointer-events:none;
  z-index:-1;
}
.snh3.is-overlay{ position:fixed; }

/* When BOTH is-scrolled and is-overlay (still over vhero, slightly scrolled),
   keep transparent + scrim — better look than half-white */
.snh3.is-scrolled.is-overlay{
  background:transparent !important;
  box-shadow:none !important;
}

/* Mega dropdown — when opened on overlay header, give it solid bg */
.snh3.is-overlay .snh3-mega{
  background:#fff;
  color:#0f1112;
}
.snh3.is-overlay .snh3-mega-link{ color:#1a1d1f !important; text-shadow:none; }

/* ============================================================
   PRODUCT MOBILITY HERO COPY — ensure visible by default
   (some browsers may not trigger is-mb5-ready quickly enough)
   ============================================================ */
.mb5 .hero-copy > *{
  /* keep the entry animation, but if JS fails we still show after 3s */
  animation:mb5-fallback 3s forwards;
}
@keyframes mb5-fallback{
  0%,90%{ opacity:0; transform:translateY(18px); }
  100%   { opacity:1; transform:none; }
}
body.is-mb5-ready .mb5 .hero-copy > *{
  animation:none;
  opacity:1; transform:none;
}

/* Header sits ABOVE car-stage so navigation is always clickable */
.snh3{ z-index:9100; }


/* ============================================================
   LOGO SWAP — show dark logo on white header / white logo on dark
   ============================================================ */
.snh3-logo .lg-img{ max-height:46px; width:auto; display:block; }
.snh3-logo .lg-img-light{ display:none; }

/* On overlay (dark hero) and on home dark mode → show white logo */
.snh3.is-overlay .snh3-logo .lg-img-dark,
body.is-home .snh3 .snh3-logo .lg-img-dark{ display:none; }
.snh3.is-overlay .snh3-logo .lg-img-light,
body.is-home .snh3 .snh3-logo .lg-img-light{ display:block; }

/* On home page when scrolled past hero, header is also dark → keep white */
body.is-home .snh3.is-scrolled:not(.is-overlay) .snh3-logo .lg-img-light{ display:block; }
body.is-home .snh3.is-scrolled:not(.is-overlay) .snh3-logo .lg-img-dark{ display:none; }

/* ============================================================
   IX-REVEAL safety net — show after 3s even if IO never fires
   ============================================================ */
.ix-reveal{ animation:ix-reveal-fb 3s forwards; }
.ix-reveal.is-in{ animation:none; opacity:1; transform:none; }
.ix-reveal-stagger > *{ animation:ix-reveal-fb 3s forwards; }
.ix-reveal-stagger.is-in > *{ animation:none; opacity:1; transform:none; }
@keyframes ix-reveal-fb{
  0%,80%{ opacity:0; transform:translateY(40px); }
  100% { opacity:1; transform:none; }
}

/* ============================================================
   IX BUSINESS — bg-image hover variant (use --bg-pic)
   ============================================================ */
.ix-biz{ background-blend-mode:normal; }
.ix-biz:hover{
  background:#0a0b0c !important;
  color:#fff;
}

/* ============================================================
   BOARD TITLE — single underline only
   ============================================================ */
.sn-active .snm-board-head{
  border-bottom:1px solid #0f1112 !important;
  padding-bottom:20px !important;
  margin-bottom:18px !important;
}
.sn-active .snm-board-head::after{ display:none !important; }

.sn-active .snm-write-head{
  border-bottom:1px solid #0f1112 !important;
}
.sn-active .snm-write-head::after{ display:none !important; }

/* ============================================================
   REMOVE EXCESS BOTTOM SPACING — board pages
   ============================================================ */
.sn-active .snm-board{
  margin:120px auto 40px !important;
  min-height:auto !important;
}
.sn-active #container{ padding-bottom:0 !important; }
body.sn-active .snm-board-search{ margin-top:24px; margin-bottom:0; }

/* Tighten gap before footer */
.sn-active .snf3-top{ padding-top:48px; }

/* ============================================================
   REMOVE RED EMPHASIS ON BODY TEXT
   On white bg → black text (no point color)
   On dark bg → white text (no point color)
   ============================================================ */
/* CEO band — keep dark bg + WHITE emphasis (not red) */
.ix-ceo-text h2 em{ color:#ffffff !important; }
/* CTA band — WHITE emphasis */
.ix-cta-band h2 em{ color:#ffffff !important; }
/* Section heads — keep red ONLY in eyebrow, not in h2 em */
.ix-sec-head h2 em{ color:inherit !important; }
/* Featured products section header em → white on dark, black on white */
.ix-sec.is-dark .ix-sec-head h2 em{ color:#ffffff !important; }
.ix-sec:not(.is-dark) .ix-sec-head h2 em{ color:#0a0b0c !important; }
/* Hero copy on home: keep h1 em red is OK because it is the brand title.
   But user asked white&black, so change to inherit */
.ix-title em{ color:inherit !important; }

/* ============================================================
   CTA BAND — apply factory photo background + heavy dark veil
   ============================================================ */
.ix-cta-band{
  background:
    linear-gradient(135deg, rgba(10,11,12,0.88) 0%, rgba(26,29,36,0.92) 100%),
    url("/data/sama_assets/factory_exterior.jpg") center/cover no-repeat !important;
}
.ix-cta-band::before{
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(212,32,32,.10), transparent 70%) !important;
}
/* CEO band — apply CNC photo as subtle background */
.ix-ceo{
  background:
    linear-gradient(180deg, rgba(10,11,12,0.92) 0%, rgba(10,11,12,0.96) 100%),
    url("/data/sama_assets/cnc_close.jpg") center/cover no-repeat !important;
}
/* Stats band — keep dark, but add subtle texture */
.ix-stats{
  background:
    linear-gradient(180deg, rgba(10,11,12,0.94) 0%, rgba(10,11,12,0.98) 100%),
    url("/data/sama_assets/factory_entrance.jpg") center/cover no-repeat;
}

/* ============================================================
   IX-CEO PHOTO — give black-on-photo readable name tag
   ============================================================ */
.ix-ceo-photo .name-tag{ color:#0a0b0c !important; }
.ix-ceo-photo .name-tag .nm{ color:#0a0b0c !important; }
.ix-ceo-photo .name-tag .ps{ color:#5a6065 !important; }