/* ============================================================
   WEBIS theme/29 — 보조 CSS (예외 보정 전용)
   본문은 Tailwind utility 중심. 여기서는 full-bleed / grid 보정 /
   슬라이더 보정 / 아이콘 정렬 고정 / CDN 한계 보정만 둔다.
   ============================================================ */

:root{
  --wbnavy:#0e1f47;
  --wbblue:#1c44a8;
  --wbsky:#2f6bff;
  --wbink:#16223f;
}

html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; }
img{ max-width:100%; display:block; }

/* ---- 아이콘 정렬 고정 (Lucide 밀림 방지) ---- */
.lc{ width:22px; height:22px; stroke-width:2; display:inline-block; vertical-align:middle; flex:0 0 auto; }
.lc-sm{ width:17px; height:17px; }
.lc-lg{ width:28px; height:28px; }
svg.lucide{ display:inline-block; vertical-align:middle; }

/* ============================================================
   HEADER
   ============================================================ */
#header .nav-link{ color:rgba(255,255,255,.92); position:relative; transition:color .2s; }
#header .nav-link::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--wbsky); transition:width .25s; }
#header .nav-link:hover{ color:#fff; }
#header .nav-link:hover::after{ width:100%; }
/* sticky(스크롤 시) 상태 */
#header.is-stuck{ background:#fff; box-shadow:0 6px 24px rgba(14,31,71,.08); }
#header.is-stuck .nav-link{ color:var(--wbink); }
#header.is-stuck #logoText{ color:var(--wbink); }
#header.is-stuck #hamburger{ color:var(--wbink); }

/* ---- 모바일 드로어 ---- */
.mm-panel{ transform:translateX(100%); }
#mobileMenu.is-open{ display:block; }
#mobileMenu.is-open .mm-overlay{ opacity:1; }
#mobileMenu.is-open .mm-panel{ transform:translateX(0); }
.mm-link{ padding:.85rem .25rem; border-bottom:1px solid rgba(255,255,255,.08); transition:color .2s,padding-left .2s; }
.mm-link:hover{ color:var(--wbsky); padding-left:.5rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero-btn{
  display:inline-flex; align-items:center; gap:.25rem;
  height:52px; padding:0 2rem;
  border:1px solid rgba(255,255,255,.7); color:#fff;
  font-size:.9rem; font-weight:600; letter-spacing:.18em;
  transition:background .25s,color .25s,border-color .25s;
}
.hero-btn:hover{ background:#fff; color:var(--wbink); border-color:#fff; }
/* 히어로 페이지네이션 (01 02 형식) */
.hero-pagination .swiper-pagination-bullet{
  width:auto; height:auto; background:transparent; opacity:1; border-radius:0;
  font-family:Inter,sans-serif; font-size:15px; font-weight:600; color:rgba(255,255,255,.45);
  position:relative; margin:0 !important; padding-bottom:8px;
}
.hero-pagination .swiper-pagination-bullet::before{ content:attr(data-idx); }
.hero-pagination .swiper-pagination-bullet-active{ color:#fff; }
.hero-pagination .swiper-pagination-bullet-active::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--wbsky);
}
.hero-bg{ animation:heroZoom 9s ease-out forwards; }
@keyframes heroZoom{ from{ transform:scale(1.12);} to{ transform:scale(1);} }

/* ============================================================
   2. 3-COLUMN VISUAL (full-bleed columns)
   ============================================================ */
.feat-col{
  position:relative; min-height:360px; background-size:cover; background-position:center;
  display:flex; align-items:flex-end; overflow:hidden;
}
@media (min-width:1024px){ .feat-col{ min-height:520px; } }
.feat-overlay{ position:absolute; inset:0; background:linear-gradient(to top,rgba(14,31,71,.92),rgba(14,31,71,.25)); transition:background .35s; }
.feat-overlay--blue{ background:linear-gradient(to top,rgba(28,68,168,.92),rgba(28,68,168,.3)); }
.feat-col:hover .feat-overlay,.feat-col:hover .feat-overlay--blue{ background:linear-gradient(to top,rgba(14,31,71,.96),rgba(28,68,168,.55)); }
.feat-inner{ position:relative; z-index:2; color:#fff; padding:2.5rem; transition:transform .35s; }
.feat-col:hover .feat-inner{ transform:translateY(-6px); }
.feat-num{ font-family:Inter,sans-serif; font-size:14px; letter-spacing:.3em; color:var(--wbsky); }
.feat-title{ font-size:clamp(1.4rem,2.2vw,1.9rem); font-weight:800; margin:.5rem 0 .75rem; }
.feat-desc{ font-size:.95rem; line-height:1.7; color:rgba(255,255,255,.82); max-width:300px; }
.feat-more{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-top:1.25rem; border:1px solid rgba(255,255,255,.5); border-radius:9999px; transition:background .25s,color .25s; }
.feat-col:hover .feat-more{ background:var(--wbsky); border-color:var(--wbsky); }

/* ============================================================
   섹션 공통 타이틀
   ============================================================ */
.sec-title{ font-family:Inter,sans-serif; font-weight:800; letter-spacing:-.01em; font-size:clamp(1.8rem,4vw,2.8rem); color:var(--wbink); }
.sec-sub{ margin-top:1rem; font-size:clamp(.95rem,1.6vw,1.05rem); line-height:1.8; color:#6b7280; }

/* ============================================================
   3. PROCESS slider
   ============================================================ */
.processSwiper{ overflow:hidden; }
.processSwiper .swiper-slide{ width:66%; }
@media (max-width:767px){ .processSwiper .swiper-slide{ width:88%; } }
.proc-slide{
  position:relative; height:340px; border-radius:6px; overflow:hidden;
  background-size:cover; background-position:center;
}
@media (min-width:1024px){ .proc-slide{ height:400px; } }
.proc-overlay{ position:absolute; inset:0; background:linear-gradient(120deg,rgba(14,31,71,.55),rgba(14,31,71,.15)); }
.proc-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:9999px; background:rgba(255,255,255,.9); color:var(--wbblue);
  display:flex; align-items:center; justify-content:center; transition:transform .25s,background .25s;
}
.proc-play:hover{ transform:translate(-50%,-50%) scale(1.08); background:#fff; }
.proc-label{
  position:absolute; left:0; bottom:0; display:inline-flex; align-items:center; gap:.5rem;
  background:var(--wbnavy); color:#fff; font-size:14px; font-weight:600; padding:.7rem 1.3rem;
}
.proc-pagination .swiper-pagination-bullet{ width:9px; height:9px; background:#c3cbe0; opacity:1; transition:width .25s,background .25s; }
.proc-pagination .swiper-pagination-bullet-active{ width:28px; border-radius:9px; background:var(--wbblue); }

/* ============================================================
   4. PORTFOLIO slider
   ============================================================ */
.portfolioSwiper{ overflow:hidden; padding-bottom:4px; }
.pf-card{ display:block; background:#fff; border:1px solid var(--wbline); border-radius:6px; overflow:hidden; height:100%; transition:transform .3s,box-shadow .3s,border-color .3s; }
.pf-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(14,31,71,.12); border-color:transparent; }
.pf-thumb{ position:relative; height:200px; background-size:cover; background-position:center; }
.pf-thumb::after{ content:""; position:absolute; inset:0; background:rgba(14,31,71,0); transition:background .3s; }
.pf-card:hover .pf-thumb::after{ background:rgba(14,31,71,.18); }
.pf-date{ position:absolute; left:0; bottom:0; background:var(--wbnavy); color:#fff; font-size:12px; padding:.3rem .8rem; letter-spacing:.02em; }
.pf-body{ padding:1.4rem 1.5rem 1.8rem; }
.pf-cat{ display:inline-block; font-family:Inter,sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--wbsky); margin-bottom:.6rem; }
.pf-title{ font-size:1.1rem; font-weight:700; color:var(--wbink); margin-bottom:.6rem; }
.pf-desc{ font-size:.9rem; line-height:1.65; color:#6b7280; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pf-nav{
  position:absolute; top:calc(50% - 18px); transform:translateY(-50%); z-index:10;
  width:44px; height:44px; background:var(--wbink); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.pf-nav:hover{ background:var(--wbsky); }
.pf-prev{ left:-10px; }
.pf-next{ right:-10px; }
@media (max-width:1023px){ .pf-prev{ left:0; } .pf-next{ right:0; } }
.pf-pagination .swiper-pagination-bullet{ width:9px; height:9px; background:#c3cbe0; opacity:1; transition:width .25s,background .25s; }
.pf-pagination .swiper-pagination-bullet-active{ width:28px; border-radius:9px; background:var(--wbblue); }

/* ============================================================
   6. WEBZINE cards
   ============================================================ */
.wz-card{ display:block; background:#fff; border:1px solid var(--wbline); overflow:hidden; transition:transform .3s,box-shadow .3s; }
.wz-card:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(14,31,71,.1); }
.wz-thumb{ position:relative; height:170px; background-size:cover; background-position:center; }
.wz-date{ position:absolute; left:0; bottom:0; background:rgba(22,34,63,.85); color:#fff; font-size:12px; padding:.3rem .8rem; }
.wz-body{ padding:1.1rem 1.2rem 1.5rem; }
.wz-title{ font-size:1.02rem; font-weight:700; color:var(--wbink); margin-bottom:.55rem; display:-webkit-box; -webkit-line-clamp:1; line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.wz-desc{ font-size:.86rem; line-height:1.6; color:#6b7280; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ============================================================
   7. CONTACT
   ============================================================ */
.ct-tag{ display:inline-flex; align-items:center; justify-content:center; min-width:48px; height:30px; padding:0 .6rem; border:1px solid rgba(255,255,255,.5); font-size:13px; font-weight:600; }
.ct-addr{ background:rgba(0,0,0,.28); padding:1.3rem 1.5rem; }
.ct-input{
  width:100%; background:transparent; border:0; border-bottom:1px solid #d6dae3;
  padding:.6rem .1rem; font-size:.95rem; color:var(--wbink); outline:none; transition:border-color .2s;
}
.ct-input::placeholder{ color:#9aa1ad; }
.ct-input:focus{ border-color:var(--wbblue); }
select.ct-input{ background:#fff; }

/* ============================================================
   8. FOOTER
   ============================================================ */
.ft-btn{ display:flex; align-items:center; justify-content:space-between; height:48px; padding:0 1.2rem; background:var(--wbink); color:#fff; font-size:14px; font-weight:600; transition:background .2s; }
.ft-btn:hover{ background:var(--wbblue); }
.ft-btn--grey{ background:#9ca3af; }
.ft-btn--grey:hover{ background:#6b7280; }
.ft-select{ height:48px; padding:0 1rem; border:1px solid #d6dae3; background:#fff; font-size:14px; color:var(--wbink); cursor:pointer; }

/* ============================================================
   POPUP / CTA
   ============================================================ */
#popupLayer.is-open{ display:flex; }
.popup-cta{ display:flex; align-items:center; justify-content:center; gap:.4rem; height:48px; background:var(--wbblue); color:#fff; font-weight:600; border-radius:6px; transition:background .2s; }
.popup-cta:hover{ background:var(--wbnavy); }

/* ============================================================
   반응형 미세 보정 (280/320 overflow 0)
   ============================================================ */
@media (max-width:360px){
  .feat-inner{ padding:1.75rem; }
  .hero-btn{ height:46px; padding:0 1.4rem; }
}