/* =====================================================================
   LIGHT PREMIUM THEME  —  white tone + blue neon points
   overrides base style.css (loaded last)
   Content & structure unchanged; visual feel only.
   ===================================================================== */

/* ===== 명함 팝업 (문의하기) ===== */
.card-modal{
  display:none; position:fixed; inset:0; z-index:2000;
  align-items:center; justify-content:center; padding:20px;
}
.card-modal__backdrop{
  position:absolute; inset:0; background:rgba(15,25,45,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.card-modal__box{
  position:relative; z-index:1; background:#fff; border-radius:14px;
  box-shadow:0 30px 80px -20px rgba(10,25,50,.55);
  /* high-res namecard (3000px) — allow a large, sharp default view */
  padding:18px; max-width:860px; width:100%;
  animation:cardPop .22s ease;
}
.card-modal__box img{ display:block; width:100%; height:auto; border-radius:6px; cursor:zoom-in; }
/* zoomed state: enlarge the card and let the user pan/scroll to read it */
.card-modal__box.zoomed{ max-width:95vw !important; max-height:90vh; overflow:auto; }
.card-modal__box.zoomed img{ width:2400px; max-width:none; cursor:zoom-out; }
@media (max-width:768px){
  .card-modal__box.zoomed img{ width:1100px; }
}
.card-modal__close{
  position:absolute; top:-14px; right:-14px; width:38px; height:38px;
  border-radius:50%; border:none; background:#fff; color:#1b2740;
  font-size:24px; line-height:38px; cursor:pointer;
  box-shadow:0 6px 18px -4px rgba(10,25,50,.4);
}
.card-modal__close:hover{ background:#eaf4fd; color:var(--accent); }
@keyframes cardPop{ from{ transform:scale(.94); opacity:0; } to{ transform:scale(1); opacity:1; } }
@media (max-width:768px){
  .card-modal__close{ top:-12px; right:-6px; }
}

:root{
  --bg:        #ffffff;
  --bg-2:      #f4f8fc;
  --bg-3:      #eef4fb;
  --card:      #ffffff;
  --card-2:    #f7fbff;
  --brd:       rgba(20,45,80,0.10);
  --brd-2:     rgba(20,45,80,0.18);
  --txt:       #1b2740;
  --muted:     #5a6b85;
  --accent:    #1f86cf;
  --accent-2:  #34a8e8;
  --glow:      rgba(52,168,232,0.45);
}

/* ---------- base ---------- */
html, body{ background:var(--bg) !important; color:var(--txt) !important; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:rgba(52,168,232,.28); color:#0a2a44; }

/* premium scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#e9eef5; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--accent),var(--accent-2)); border-radius:8px; }

/* every full-screen section is light */
.section{ background:var(--bg) !important; color:var(--txt); }
.section1, .section3, .section4, .section5, .section6{ position:relative; overflow:hidden; }

/* ambient glows */
.section1::before, .section4::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(52,168,232,0.10), transparent 60%),
    radial-gradient(820px 480px at -8% 112%, rgba(31,134,207,0.08), transparent 60%);
}
.section1 .container, .section4 .container{ position:relative; z-index:1; }

/* ============================ NAV ============================ */
nav.navbar.bootsnav{
  background:rgba(255,255,255,0.70) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--brd);
  box-shadow:0 8px 30px -22px rgba(20,45,80,.45);
}
.wrap-sticky nav.navbar.bootsnav{ background:rgba(255,255,255,0.93) !important; }

nav.navbar.bootsnav ul.nav > li > a{
  color:var(--txt) !important; font-weight:600; letter-spacing:.06em;
  position:relative; transition:color .3s;
}
nav.navbar.bootsnav ul.nav > li > a::after{
  content:""; position:absolute; left:40px; right:40px; bottom:30px; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
nav.navbar.bootsnav ul.nav > li > a:hover{ color:var(--accent) !important; }
nav.navbar.bootsnav ul.nav > li > a:hover::after{ transform:scaleX(1); }
nav.navbar.bootsnav ul.nav > li.active > a{ color:var(--accent) !important; }
/* vertically center the menu against the logo block (logo 72px + 25px*2 = 122px;
   match the link box height so the text lines up with the logo's center) */
@media (min-width:769px){
  nav.navbar.bootsnav ul.nav > li > a{ padding-top:51px !important; padding-bottom:51px !important; }
}

.navbar-toggle .icon-bar{ background:#1b2740 !important; }
#navbar-menu.in, .navbar-collapse.collapsing{ background:rgba(255,255,255,.97); }

/* logo: colored MESHPLUS — symmetric padding centers it in the nav row,
   matching the ABOUT US menu links (which use symmetric 40px top/bottom padding) */
.navbar-brand img.logo{ height:72px !important; width:auto !important; display:block; }
.navbar-brand{ padding:10px 15px !important; height:auto !important; }
@media (min-width:769px){
  .navbar-brand{ padding:25px 15px !important; }
}

/* ============================ HERO (전체화면) ============================ */
/* full-screen height on every owl layer; let owl manage horizontal widths */
.section0,
.section0 .owl-carousel,
.section0 .owl-stage-outer,
.section0 .owl-stage,
.section0 .owl-item,
.section0 .item{ height:100vh !important; }
.section0,
.section0 .owl-carousel,
.section0 .owl-stage-outer,
.section0 .item{ width:100% !important; }
.section0{ max-height:none !important; }
.section0 .item{
  background-size:cover !important; background-position:center !important;
  position:relative; overflow:hidden;
}
/* show the product photo fully sharp — no haze / fade overlays */
.section0 .item::before,
.section0 .item::after{ content:none !important; background:none !important; }
/* carousel dots */
.section0 .owl-theme .owl-dots .owl-dot span{
  width:12px; height:12px; border:2px solid rgba(255,255,255,.85) !important; background:transparent !important;
}
.section0 .owl-theme .owl-dots .owl-dot.active span{
  background:var(--accent-2) !important; border-color:var(--accent-2) !important;
  box-shadow:0 0 12px var(--glow);
}
/* scroll-down cue removed; using a right-side scrollbar instead */
.section0::after{ content:none !important; }

/* ===== single native scrollbar (scrollBar:true mode) =====
   The template forced every .section to height:100vh + overflow:hidden and gave
   section4 a .scrollable-content inner scroller — both were hacks for the old
   scrollOverflow mode. With the right-side native scrollbar they caused a DOUBLE
   scrollbar on PRODUCT and clipped tall sections (hiding the footer).
   Let tall sections flow naturally so a single window scrollbar handles them. */
.section:not(.section0){
  height:auto !important; min-height:100vh !important; overflow:visible !important;
}
.scrollable-content{ overflow:visible !important; height:auto !important; }
/* neutralise fullpage's fixed-height table-cell wrapper so tall sections
   (e.g. MESH STANDARD) flow naturally instead of overflowing onto the footer */
.fp-tableCell{ display:block !important; height:auto !important; vertical-align:top !important; }
.fp-section{ height:auto !important; }
.section0.fp-section{ height:100vh !important; }
/* the template padded these by 900px / 1900px for the old full-screen scroll
   layout — in normal scroll that's just dead space under PRODUCT & MESH STANDARD */
.section4 .bd{ padding-bottom:80px !important; }
.section5 .bd{ padding-bottom:80px !important; }
.section5 .bd .table-info{ margin-bottom:50px !important; }

/* ============================ SHARED HEADINGS ============================ */
.section1 .about .subtitle,
.hd .subtitle{
  color:var(--accent) !important; font-weight:700 !important;
  font-size:30px !important; letter-spacing:.03em; text-transform:uppercase;
}
.section1 .about .subtitle::after,
.hd .subtitle::after{
  border-top:none !important; height:2px !important;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)) !important;
  width:42px !important;
}
.section1 .about .title,
.hd .title{
  color:#1b2740 !important; font-weight:800 !important; letter-spacing:.01em;
  background:linear-gradient(92deg,#1b2740 0%,#2b6fb0 55%,#34a8e8 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ============================ ABOUT (section1) ============================ */
.section1{ background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%) !important; }
.section1 .about{ text-align:center; }
.section1 .about .description{
  color:var(--muted) !important; max-width:940px; margin:0 auto;
  word-break:keep-all; overflow-wrap:break-word;
}

/* ============================ INDUSTRIES (section3) ============================ */
.section3{ background-color:var(--bg-3) !important; }
/* wash out the dark particle bg image into a soft light tint */
.section3::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(244,248,252,.92), rgba(233,242,251,.96));
}
.section3 .container{ position:relative; z-index:1; }
.section3 .bd{
  display:flex !important; flex-wrap:wrap; justify-content:center;
  gap:22px; max-width:1120px; margin:0 auto !important; padding:0 !important;
}
.section3 .bd .item{
  width:340px !important; min-width:0 !important; max-width:340px !important;
  flex:0 0 340px !important; margin:0 !important; padding:34px 24px !important;
  background:var(--card); border:1px solid var(--brd); border-radius:18px;
  box-shadow:0 18px 44px -28px rgba(20,45,80,.35);
  transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
/* neutralize original quirky nth-child margins/flex on industry cards */
.section3 .bd .item:nth-child(1),
.section3 .bd .item:nth-child(2){
  margin:0 !important; flex:0 0 340px !important;
}
.section3 .bd .item:hover{
  transform:translateY(-8px); background:var(--card-2);
  border-color:rgba(52,168,232,.55); box-shadow:0 26px 60px -26px var(--glow);
}
.section3 .bd .item .icon{ margin-bottom:14px; }
.section3 .bd .item .icon img{ height:62px; width:auto; }
.section3 .bd .item .title{ color:#1b2740 !important; }
.section3 .bd .item .description{ color:var(--accent) !important; font-weight:600 !important; }

/* ============================ PRODUCTS (section4) ============================ */
.section4{ background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%) !important; }
.section4 .hd{ padding-top:120px !important; }
.section4 .bd.row{
  display:flex !important; flex-wrap:wrap; justify-content:center;
  gap:26px; padding-bottom:60px !important; margin:0 auto; max-width:1180px;
}
.section4 .bd .item{
  width:350px; float:none !important; padding:0 !important; margin:0 !important;
  background:var(--card); border:1px solid var(--brd); border-radius:18px;
  overflow:hidden; box-shadow:0 20px 48px -30px rgba(20,45,80,.40);
  transition:transform .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.section4 .bd .item:hover{
  transform:translateY(-10px); border-color:rgba(52,168,232,.55);
  box-shadow:0 30px 70px -30px var(--glow);
}
.section4 .bd .item .img{ margin:0; overflow:hidden; border-radius:0; }
.section4 .bd .item .img img{
  width:100%; height:240px; object-fit:cover; display:block;
  /* source photos have a thin gray frame baked in; cover keeps the top/bottom
     edge visible, so scale up slightly to crop those lines out of view */
  transform:scale(1.06);
  transition:transform .6s ease;
}
.section4 .bd .item:hover .img img{ transform:scale(1.12); }
.section4 .bd .item .title{
  padding:18px 22px 0 !important; color:#1b2740 !important; font-weight:700;
  font-size:22px !important; white-space:nowrap;
}
.section4 .bd .item .description{
  padding:6px 22px 22px !important; margin:0 !important; color:var(--accent) !important;
  font-size:17px !important; white-space:nowrap; font-weight:600 !important;
}

/* ============================ MESH STANDARD (section5) ============================ */
.section5{ background:var(--bg-3) !important; }
.section5 .hd{ padding-top:120px !important; }
.section5 .bd .subtitle{
  color:var(--accent) !important; font-weight:700; letter-spacing:.02em;
}
/* diagram images on clean white cards */
.section5 .table-group .item img{
  background:#ffffff; border-radius:14px; padding:14px;
  box-shadow:0 18px 40px -26px rgba(20,45,80,.45);
}
.section5 .bd .table-info{
  background:var(--card) !important; border:1px solid var(--brd);
  border-radius:18px; box-shadow:0 18px 44px -30px rgba(20,45,80,.35);
}
.section5 .bd .table-info .item .txts .txt{ color:var(--txt); }
.section5 .bd .table-info .item .txts .txt b{ color:#0f1830; }
.section5 .bd .table-info .item .txts .num{ color:var(--accent) !important; }
.section5 .table-group-m .item img{ background:#fff; border-radius:12px; padding:8px; box-shadow:0 14px 30px -24px rgba(20,45,80,.4); }

/* ============================ CONTACT (section6) ============================ */
.section6 .contact{
  background:var(--bg) !important; background-image:none !important;
}
.section6 .contact .item{ border-radius:18px; overflow:hidden; }
/* same border + drop shadow on all three cards so they read as equal-height
   boxes (previously only the two photo cards had the shadow, which made them
   look taller than the contact card) */
.section6 .contact .col-md-4 .item{
  border:1px solid var(--brd); box-shadow:0 22px 56px -34px rgba(20,45,80,.5);
}
/* photo cards: fill the whole box (base used background-size:100% which left
   an empty white strip at the bottom) */
.section6 .contact .col-md-4:nth-child(2) .item,
.section6 .contact .col-md-4:nth-child(3) .item{
  background-size:cover !important; background-position:center !important;
  background-repeat:no-repeat !important;
}
/* contact info card keeps the dark photo overlay → light text stays readable */
.section6 .contact .item .txt1{ color:#ffffff; }
.section6 .contact .item .txt2{ color:#ffffff; }
.section6 .contact .item .txt3{ color:rgba(255,255,255,.92); }
/* push the info block + buttons lower so the building signboard in the
   background photo stays visible above them */
.section6 .contact .item .txt3{ margin-top:130px; }
/* keep info where it is, but pull the buttons up so both fit inside the
   fixed-height card (the 문의하기 button was being clipped at the bottom) */
.section6 .contact .item .txt3{ padding-bottom:14px !important; }
.section6 .contact .txt4 .btn,
.section6 .contact .txt5 .btn{ margin-top:12px !important; }
/* desktop: make the contact card exactly as tall as the two photo cards */
@media (min-width:992px){
  .section6 .contact .col-md-4 .item{ height:650px !important; }
}
@media (max-width:991px){
  .section6 .contact .item{ height:auto !important; min-height:650px; padding-bottom:45px !important; }
  .section6 .contact .item .txt3{ margin-top:410px; padding-bottom:30px !important; }
}

/* buttons (catalog / inquiry) */
.section .btn{
  color:#fff !important; background:rgba(52,168,232,.92) !important;
  border:1px solid rgba(52,168,232,.0) !important; border-radius:30px;
  box-shadow:0 10px 26px -12px var(--glow);
  transition:border-color .35s, background .35s, box-shadow .35s, transform .25s;
}
.section .btn:hover{
  background:#1f86cf !important;
  box-shadow:0 0 26px -4px var(--glow); transform:translateY(-2px);
}
.section .txt5 .btn{ color:#1b2740 !important; background:#ffffff !important; border:1px solid var(--brd-2) !important; box-shadow:none; }
.section .txt5 .btn:hover{ background:#eaf4fd !important; border-color:var(--accent-2) !important; }

/* ============================ FOOTER ============================ */
.section .footer{
  background:#f1f5fa !important; border-top:1px solid var(--brd);
}
.section .footer .item{ color:#33405a; font-weight:600; }
.section .footer .item span{ color:#13203a; font-weight:700; }
.section .footer .col-md-2.item img{ height:84px !important; width:auto !important; max-width:none !important; }
/* desktop (>=992px, where col-md becomes multi-column): keep each line
   un-wrapped so Homepage stays beside E-mail, and vertically center the
   Korean / English info blocks against each other. */
@media (min-width:992px){
  /* logo on the left (vertically centered), Korean and English info side by side
     on a SINGLE row (never wrap the English block to a line below) */
  .section .footer .row{
    display:flex !important; flex-wrap:nowrap !important;
    align-items:center; justify-content:center;
  }
  .section .footer .item{ white-space:nowrap; font-size:15px; }
  /* logo column sizes to the image itself (no fixed Bootstrap width) so the
     wide wordmark never overflows onto the company info */
  .section .footer .col-md-2.item{
    width:auto !important; flex:0 0 auto !important; padding-right:20px !important;
  }
  /* gap between logo→Korean and Korean→English info blocks */
  .section .footer .row .item:nth-child(2){ padding-left:18px !important; }
  .section .footer .row .item:nth-child(3){ padding-left:18px !important; }
}

/* ---------- responsive ---------- */
/* tablet & phone (cols stack below bootstrap md = 992px) — match the
   original dysf mobile layout: stacked, centered, lighter top spacing */
@media (max-width:991px){
  /* trim the desktop 120px heading offset so sections aren't pushed down */
  .section4 .hd, .section5 .hd{ padding-top:90px !important; }
  /* footer: blocks stack full-width → center them and use the mobile size */
  .section .footer .row{ text-align:center; }
  .section .footer .item{ font-size:15px; }
  .section .footer .col-md-5.item,
  .section .footer .col-md5.item{ float:none; width:100%; }
  .section .footer .row .item:nth-child(2){ padding-left:15px; }
}
@media (max-width:768px){
  .section3 .bd, .section4 .bd.row{ gap:16px; }
  .section3 .bd .item, .section4 .bd .item{ width:100%; max-width:360px; }
  .section1 .about .title, .hd .title{ font-size:30px !important; }
  .section1 .about .subtitle, .hd .subtitle{ font-size:22px !important; }
  .section4 .hd, .section5 .hd{ padding-top:70px !important; }
  /* HERO on phones: show the full ~2:1 banner with no zoom/crop.
     Match the section height to the image aspect ratio (920/1920 = 47.9%),
     and use contain on a white fill (the photo's own bg is white). */
  .section0,
  .section0 .owl-carousel,
  .section0 .owl-stage-outer,
  .section0 .owl-stage,
  .section0 .owl-item,
  .section0 .item{ height:48vw !important; min-height:0 !important; max-height:none !important; }
  .section0 .item{
    background-size:contain !important;
    background-position:center !important;
    background-color:#ffffff !important;
  }
  /* short hero → drop the bouncing scroll-down cue */
  .section0::after{ display:none !important; }
}