/* =========================================================
   BASE: Variables, Reset, Layout
   --------------------------------------------------------- */
:root{
  --bg:#ffffff; --fg:#111111; --muted:#6b7280; --line:#e5e7eb; --brand:#111;
  --accent:#0b21ec;
  --maxw-wide:1440px; --maxw-narrow:900px; --nav-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}


html, body { overflow-x: hidden; }
body{
  margin:0; padding-top: var(--nav-h);
  background:var(--bg); color:var(--fg);
  font: 15px/1.6 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, 'Noto Sans KR', Helvetica, Arial, sans-serif;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:var(--maxw-wide); padding:0 28px; margin:0 auto; }

/* A11Y helper */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Optional entrance hook */
.fade-up { will-change: transform, opacity; }

/* =========================================================
   HEADER / NAV
   --------------------------------------------------------- */
/* Header shell */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
}
.nav-wrap{ height:var(--nav-h); display:flex; align-items:center; }
.logo{ font-weight:800; letter-spacing:.2px; margin-right:auto; }
.logo a{ display:inline-flex; align-items:center; gap:10px; }
.logo-mark{ width:24px; height:24px; border:2px solid var(--brand); border-radius:4px; }

/* Desktop nav */
.nav{ display:flex; align-items:center; gap:24px; margin-left:auto; }
.nav>li{ position:relative; list-style:none; }
.nav>li>a{ display:inline-block; padding:10px 10px; }
.nav>li:hover>a{ opacity:.7; }

/* Desktop: underline (L→R), dropdown, bridge-gap fix */
@media (min-width:1101px){
  .nav > li > a{ position:relative; }
  .nav > li > a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:var(--accent); transform:scaleX(0); transform-origin:left;
    transition:transform .35s var(--ease);
  }
  .nav > li:hover > a::after,
  .nav > li:focus-within > a::after{ transform:scaleX(1); }

  .dropdown{
    position:absolute; left:0; top:calc(100% + 16px); min-width:240px;
    display:block; opacity:0; visibility:hidden; pointer-events:none;
    background:#fff; border:1px solid var(--line); border-radius:0;
    box-shadow:0 24px 60px rgba(0,0,0,.08);
    transition: opacity .18s var(--ease), visibility .18s var(--ease);
  }
  .dropdown a{ display:block; padding:10px 12px; color:#111; }

  .nav > li::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:16px;
  }
  .nav > li:hover .dropdown,
  .nav > li:focus-within .dropdown{
    opacity:1; visibility:visible; pointer-events:auto; z-index:999;
  }
}

/* Header actions */
.icon-btn{ border:0; background:transparent; padding:8px; cursor:pointer; border-radius:10px; }
.icon-btn:hover{ background:#f3f4f6; }

/* Hamburger (desktop hidden) */
.hamburger{ display:none; position:relative; width:28px; height:20px; justify-content:center; align-items:center; }
.hamburger span{
  position:absolute; width:100%; height:2px; background:var(--fg);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.hamburger .bar1{ top:0; } .hamburger .bar2{ top:50%; transform:translateY(-50%); } .hamburger .bar3{ bottom:0; }
.hamburger.open .bar1{ transform:translateY(9px) rotate(45deg); }
.hamburger.open .bar2{ opacity:0; }
.hamburger.open .bar3{ transform:translateY(-9px) rotate(-45deg); }

/* Mobile nav */
.submenu-toggle{ display:none; }
@media (max-width:1100px){
  .hamburger{ display:inline-flex; }
  .nav{
    display:flex !important; position:absolute !important; top:var(--nav-h); left:0; right:0;
    background:#fff; flex-direction:column; align-items:flex-start; gap:0; margin:0;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line); z-index:999;
    padding:0; max-height:0; overflow:hidden; transition:max-height .4s var(--ease);
  }
  .nav.open{ max-height:calc(100vh - var(--nav-h)); overflow-y:auto; }
  .nav > li{ width:100%; display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); position:relative; flex-wrap:wrap; }
  .nav > li > a{ flex-grow:1; padding:0; }
  .dropdown{ position:static !important; display:none !important; width:100%; background:#f9fafb; border:none; box-shadow:none; padding:0 0 0 16px; }
  .nav > li.open .dropdown{ display:block !important; }
  .submenu-toggle{ display:inline-flex; width:24px; height:24px; justify-content:center; align-items:center; border:0; background:transparent; cursor:pointer; padding:0; }
  .submenu-toggle svg{ width:16px; height:16px; transition: transform .3s var(--ease); }
  .nav > li.open .submenu-toggle svg{ transform: rotate(180deg); }
}

/* Dim overlay when nav open */
body.nav-open::after{
  content:""; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:998; opacity:1; pointer-events:auto;
}

/* =========================================================
   SEARCH DRAWER (Header 구성요소)
   --------------------------------------------------------- */
.search-drawer{ position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.search-panel{ max-height:0; transition:max-height .45s var(--ease); }
.search-panel.open{ max-height:140px; }
.search-inner{ padding:16px 0 22px; }
.search-box{ display:flex; gap:10px; align-items:center; }
.search-box input{
  flex:1; height:48px; border-radius:12px; border:1px solid var(--line);
  background:#fff; color:var(--fg); padding:0 16px; outline:none;
}
.search-go{
  height:48px; padding:0 18px; border-radius:12px; border:1px solid var(--line);
  background:#111; color:#fff; cursor:pointer;
}
.search-go:hover{ filter:brightness(1.08); }
/* =========================================================
   BANNER (Swiper) — fix.html과 동일하게 정리
   ========================================================= */
.banner{ padding:0; border-bottom:1px solid var(--line); --accent:#0b21ec; }

.banner .banner-swiper{
  position:relative; width:100%;
  height:56vw; max-height:900px; min-height:320px;
}
.banner .swiper-slide{ position:relative; }
.banner .slide-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Titles (center-left) */
.banner .slide-content{
  position:absolute; left:clamp(16px, 6vw, 80px); right:clamp(16px, 6vw, 80px);
  top:50%; transform:translateY(-50%);
  color:#fff; z-index:5; display:grid; gap:clamp(8px, 1.4vw, 14px);
  text-shadow:0 6px 26px rgba(0,0,0,.35); pointer-events:none;
}
.banner .slide-title{
  margin:0; font-weight:900; line-height:1.05;
  font-size:clamp(28px, 6.2vw, 72px); letter-spacing:-0.02em;
}
.banner .slide-sub{
  margin:0; font-weight:500; line-height:1.5;
  font-size:clamp(14px, 2.2vw, 18px); opacity:.95;
}

/* Controls: pager + progress + small nav (one line, left-bottom) */
.banner .banner-controls{
  position:absolute; left:clamp(16px, 4vw, 28px); bottom:clamp(14px, 4vw, 24px);
  display:flex; align-items:center; gap:clamp(10px, 2vw, 16px);
  padding:clamp(8px, 1.8vw, 20px); border-radius:999px; pointer-events:auto;
}
.banner .current-page{ color:#fff; letter-spacing:8px; font-weight:300; }
.banner .current-page strong{ color:var(--accent); font-weight:700; }

/* fix.html 기준 길이(중복 제거) */
.banner .timer-progress{
   width: clamp(100px, 20vw, 260px);
  height:3px; background:#fff; border-radius:999px; overflow:hidden;
  box-shadow:0 1px 6px rgba(0,0,0,.2) inset;
}
.banner .timer-progress-bar{
  width:0%; height:100%;
  background:var(--accent); transform-origin:left; transition:width .1s linear;
}
.banner .swiper-pagination{ display:none !important; } /* dots off */

/* Small round nav buttons inside controls */
.banner .banner-controls-nav{
  display:inline-flex; gap:8px; position:static; pointer-events:auto;
}
.banner .banner-controls-nav .ctrl{
  width:clamp(32px, 4.6vw, 40px); height:clamp(32px, 4.6vw, 40px);
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px; background:transparent;
  color:#fff; cursor:pointer; line-height:0;
}

/* Disable default Swiper round arrows (겹침 방지) */
.banner .swiper-button-prev,
.banner .swiper-button-next{ display:none !important; }

/* (선택) 오버레이 네비게이션 쓰지 않을 경우 완전 비활성화 */
.banner .swiper-navigation{ display:none !important; }

/* Responsive tweaks */
@media (max-width:480px){
  .banner .banner-controls{ gap:8px; padding:10px 12px; border-radius:14px; }
  .banner .timer-progress{ width:44vw; } /* 필요 시 조절 */
}
@media (max-width:1100px){
  .banner .banner-swiper{ height:62vw; max-height:440px; }
}

/* ==== Banner controls click-through fix (paste at the end) ==== */
.banner{ position: relative; }

/* 컨트롤이 항상 맨 위에서 클릭되도록 */
.banner .banner-controls{
  position: absolute; z-index: 50; pointer-events: auto;
}
.banner .banner-controls *{ pointer-events: auto; }
.banner .banner-controls-nav .ctrl{ position: relative; z-index: 55; }

/* 텍스트 오버레이/장식이 클릭을 가로막지 않도록 */
.banner .slide-content{ z-index: 10; pointer-events: none; }
.banner::before, .banner::after{ pointer-events: none !important; }

/* Swiper의 전체 오버레이/도트가 클릭을 가로채지 않도록 완전 비활성화 */
.banner .swiper-navigation,
.banner .swiper-pagination{
  display: none !important;
  pointer-events: none !important;
}

/* 혹시 남아있을 Swiper 기본 화살표도 차단 (우리는 .banner-controls-nav만 사용) */
.banner .swiper-button-prev,
.banner .swiper-button-next{
  display: none !important;
  pointer-events: none !important;
}

/* =========================================================
   PRODUCTS: Grid & Hover Emphasis
   --------------------------------------------------------- */
.prd-area{ position:relative; }
.prd-hover-bg{ position:absolute; inset:-10vh 0 -10vh 0; pointer-events:none; overflow:hidden; }
.prd-hover-bg .list-item{ position:absolute; left:0; right:0; height:40vh; opacity:.08; background-repeat:no-repeat; background-size:cover; background-position:center 0; }
.prd-hover-bg .bg01{ top:0 } .bg02{ top:20vh } .bg03{ top:40vh } .bg04{ top:60vh }

#mainContent2 .section-head{ text-align:center; margin:160px 0; }
#mainContent2 .section-head h2{ margin:0; font-size:clamp(32px, 5vw, 64px); line-height:1; font-weight:900; letter-spacing:-0.02em; }
#mainContent2 .section-head p{ margin:12px 0 0; color:var(--muted); font-size:clamp(14px, 1.6vw, 18px); }

.prd-cover-list{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.prd-cover-list .list-item{ height:450px; overflow:hidden; border:1px solid var(--line); background-size:cover; background-position:center; }
.prd-cover-list .list-item:first-child{ border-radius:60px 0 0 0; }
.prd-cover-list .list-item:last-child{  border-radius:0 0 60px 0; }
.prd-cover-list a{ display:block; width:100%; height:100%; }
.prd-cover-list .inner{
  position:relative; width:100%; height:100%;
  background-size:cover; background-position:center 0;
  transition: transform .45s var(--ease);
  will-change: transform;
}
.prd-cover-list .inner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.25) 100%);
  opacity:.5; mix-blend-multiply;
}
.prd-cover-list .caption{
  position:relative; left:30px; bottom:130px; color:#fff; z-index:2;
  transition: transform .35s var(--ease), opacity .35s var(--ease), filter .35s var(--ease);
  will-change: transform, opacity, filter;
}
.prd-cover-list .caption h3{
  margin:0 0 6px; font-size:22px; font-weight:600;
  transition: letter-spacing .35s var(--ease), filter .35s var(--ease);
}
.prd-cover-list .caption div{
  position:relative; display:inline-block; font-size:14px; font-weight:500; opacity:.92;
}
.prd-cover-list .caption div::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:rgba(255,255,255,.9); transform:scaleX(0); transform-origin:left;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

/* Hover */
.prd-cover-list .list-item:hover .inner{ transform:scale(1.06); }
.prd-cover-list .list-item:hover .caption{ transform:translateY(-6px); opacity:1; filter:drop-shadow(0 4px 12px rgba(0,0,0,.25)); }
.prd-cover-list .list-item:hover .caption h3{ letter-spacing:.2px; filter:brightness(1.05); }
.prd-cover-list .list-item:hover .caption div::after{ transform:scaleX(1); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .prd-cover-list .inner, .prd-cover-list .caption, .prd-cover-list .caption h3, .prd-cover-list .caption div::after{ transition:none; }
}

/* Mobile: 1 column + no hover transforms */
@media (max-width:1100px){
  .prd-cover-list{ grid-template-columns:1fr; }
  .prd-cover-list .list-item{ height:420px; border-radius:0 !important; }
  .prd-hover-bg .list-item{ opacity:.04; }
  .prd-cover-list .list-item:hover .inner{ transform:none; }
  .prd-cover-list .list-item:hover .caption{ transform:none; filter:none; }
  .prd-cover-list .caption div::after{ display:none; }
}

/* =========================================================
   NEWS CARDS (single variant: overlay)
   --------------------------------------------------------- */
.news-cards{ padding:64px 0 96px; position:relative; z-index:1; }
.news-cards__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:22px; }
.news-card{ position:relative; isolation:isolate; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.news-card:hover{ box-shadow:0 20px 40px rgba(0,0,0,.12); transform:translateY(-2px); }
.news-card__link{ display:flex; flex-direction:column; height:100%; color:inherit; }

.news-card__thumb{ position:relative; aspect-ratio:16/9; background:#e5e7eb; background-image:var(--img); background-size:cover; background-position:center; overflow:hidden; transition: filter .35s var(--ease); }
.news-card:hover .news-card__thumb{ filter:brightness(.9); }

.news-card__overlay{
  position:absolute; left:0; right:0; bottom:0;
  transform:translateY(100%);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.85) 100%);
  color:#fff; padding:14px 16px 18px;
}
.news-card__overlay .t{ margin:0 0 6px; font-weight:700; font-size:16px; }
.news-card__overlay .d{ margin:0; font-size:13px; line-height:1.5; opacity:.95; max-height:calc(1.5em * 3); overflow:hidden; }
.news-card:hover .news-card__overlay{ transform:translateY(0); }

/* Responsive tweaks */
@media (min-width:1200px){ .news-cards__grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:1199.98px){ .news-cards__grid{ grid-template-columns: 1fr; padding:80px; } }
@media (max-width:899.98px){
  .news-cards__grid{ grid-template-columns: 1fr; padding:80px; }
  #mainContent2 .section-head{ margin:40px 0 80px; }
}

/* =========================================================
   “NEW” SECTION (3:7 split)
   --------------------------------------------------------- */
.new-section{ padding:80px 0;}
.new-grid{ display:grid; grid-template-columns:3.5fr 6.5fr; gap:42px; align-items:start; padding:40px; }
.new-title .new-kicker{ margin:0; font-size:clamp(32px, 5vw, 64px); line-height:1; font-weight:900; letter-spacing:-0.02em; }
.new-title .new-sub{ margin:12px 0 0; color:var(--muted); font-size:clamp(14px, 1.6vw, 18px); }

.new-list{ list-style:none; padding:0; margin:0; }
.new-item{ border-bottom:1px solid var(--line); }
.new-item a{
  position:relative; display:grid; grid-template-columns:1fr max-content; align-items:start; gap:18px; padding:18px 0;
}
.new-item .t{ margin:0 0 6px; font-size:18px; font-weight:800; line-height:1.35; }
.new-item .d{
  margin:0; color:#4b5563; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.new-item .date{ color:#6b7280; font-size:13px; white-space:nowrap; align-self:start; }
.new-item a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.new-item a:hover::after{ transform:scaleX(1); }

@media (max-width:1100px){
  .new-grid{ grid-template-columns:1fr; gap:24px; }
  .new-item a{ grid-template-columns:1fr; }
  .new-item .date{ margin-top:6px; }
}

/* =========================================================
   BUTTON (Primary)
   --------------------------------------------------------- */
.btn{
  --btn-bg: var(--accent); --btn-fg:#fff; --btn-bg-hover:#0a1bd8; --btn-ring: rgba(11,33,236,.28);
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:0 20px; margin:30px 0;
  background:var(--btn-bg); color:var(--btn-fg); font:600 15px/1 'Pretendard', system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans KR', Helvetica, Arial, sans-serif;
  border:1px solid transparent; text-decoration:none;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow:0 6px 20px rgba(11,33,236,.18);
}
.btn .ico{ width:18px; height:18px; transition: transform .2s ease; }
.btn:hover{ background:var(--btn-bg-hover); transform:translateY(-1px); box-shadow:0 10px 26px rgba(11,33,236,.22); }
.btn:hover .ico{ transform:translateX(2px); }
.btn:active{ transform:translateY(0); filter:brightness(.97); box-shadow:0 6px 18px rgba(11,33,236,.18); }
.btn:focus-visible{ outline:0; box-shadow:0 6px 20px rgba(11,33,236,.18), 0 0 0 4px var(--btn-ring); }
.btn[aria-disabled="true"], .btn:disabled{ pointer-events:none; opacity:.55; filter:grayscale(.1); }

/* =========================================================
   MAIN NEWS (hero-like banner block)
   --------------------------------------------------------- */
#main-news{
  max-height:620px; background:url(../img/mainbg2.jpg) no-repeat center/cover; color:#fff;height: 900px;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
#main-news p{ line-height:0; will-change: transform, opacity; }
#main-news p:first-child{ font-size:clamp(22px, 2vw, 32px); font-weight:300; color:#eee; }
#main-news p:last-child{  font-size:clamp(24px, 5vw, 64px); font-weight:700; color:#fff; }

/* =========================================================
   MARQUEE (decorative)
   --------------------------------------------------------- */
.vl{ width:100%; height:1px; background:#ccc; }
.marquee{ position:absolute; top:-300px; width:100%; font-size:18rem; font-weight:900; color:#f5f5f5; pointer-events:none; }
.marquee-track{ display:flex; width:max-content; animation: marquee 30s linear infinite; }
.marquee-item{ flex-shrink:0; padding-right:3rem; white-space:nowrap; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================
   FOOTER
   --------------------------------------------------------- */
footer{ border-top:1px solid var(--line); padding:36px 0 60px; color:#4b5563; background:#000; }
.footer-grid{ display:grid; gap:20px; grid-template-columns:2fr 1fr 1fr; }

/* =========================================================
   RESPONSIVE (global)
   --------------------------------------------------------- */
@media (max-width:1100px){
  .site-header{ background:#fff; }
  .banner{ /* keep */ }
  /* other section-specific mobile rules are in each block above */
}

/* ===== Layout normalization: let BODY scroll ===== */
html, body { height:auto; overflow-y:auto; }
#wrapper, #container_wr, #container {
  height:auto;
  min-height:0;
  overflow:visible !important;
  transform:none !important;
}

/* 데스크톱에서 모바일 내비 레이아웃 잔상 제거(스크롤 컨테이너 방지) */
@media (min-width:1101px){
  .nav{
    position:static !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

/* 배너/오버레이 요소가 잘리지 않도록 */
.banner,
.banner .banner-swiper,
.banner .swiper-navigation { overflow:visible !important; background: #000;}
.banner-controls-nav {
    position: absolute;
    bottom: 20px;
}