*{margin:0;padding:0;box-sizing:border-box}
:root{
--black:#0A0A0A;
--black-2:#111111;
--black-3:#181818;
--slate:#1B2838;--slate-light:#2D4156;
--white:#FFFFFF;--off-white:#F8F9FA;
--gray-200:#E2E2E2;--gray-300:#CCCCCC;--gray-400:#888;--gray-600:#555;
--text-dark:#1A1A1A;--text-light:#666;
--red:#C0392B;--red-line:#E84A3C;
--red-light:rgba(192,57,43,.15);
}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%}
body{font-family:'Noto Sans KR',sans-serif;color:var(--white);background:var(--black);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ── NAV ─────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1rem 3.5rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .5s;
  background:rgba(10,10,10,.97);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 20px rgba(0,0,0,.5);
}
.nav-inner{
  display:flex;align-items:center;
  width:100%;
  position:relative;
}
.nav.s{
  background:rgba(10,10,10,.97);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 20px rgba(0,0,0,.5);
}
.nav-logo{text-decoration:none;display:flex;align-items:center;flex-shrink:0}
.nav-logo-img{height:70px;width:auto;transition:opacity .3s,transform .3s;display:block;}
.nav-logo:hover .nav-logo-img{opacity:.7;transform:scale(1.04);}

.nav-links{
  display:flex;gap:2.4rem;list-style:none;
  position:absolute;left:50%;transform:translateX(-50%);
}
.nav-links a{font-size:.9rem;color:rgba(255,255,255,.85);text-decoration:none;letter-spacing:.05em;transition:color .3s;font-family:'Syne',sans-serif;font-weight:500}
.nav-links a:hover{color:var(--white)}
.nav-links a.active{color:var(--white);border-bottom:2px solid var(--red-line);padding-bottom:2px;}
.nav-cta{
  margin-left:auto;
  font-family:'Syne',sans-serif;font-size:.81rem;font-weight:600;
  padding:.55rem 1.4rem;
  border:1.5px solid rgba(255,255,255,.7);
  color:var(--white);text-decoration:none;
  letter-spacing:.08em;transition:all .35s;
}
.nav-cta:hover{background:var(--red);border-color:var(--red);color:var(--white)}
.nav-toggle{display:none;}

/* ── QUICK MENU BAR (우측 고정) ─────────────── */
.quick-menu{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:90;
  display:flex;flex-direction:column;
  background:#ffffff;
  border-left:1px solid rgba(0,0,0,.1);
  border-top:1px solid rgba(0,0,0,.1);
  border-bottom:1px solid rgba(0,0,0,.1);
  border-radius:6px 0 0 6px;
  box-shadow:-4px 0 24px rgba(0,0,0,.15);
  overflow:hidden;
}
.quick-menu-item{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  padding:1.3rem .9rem;
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.07);
  color:#111111;
  font-family:'Syne',sans-serif;
  font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-align:center;transition:all .3s;
  position:relative;
  min-width:72px;
}
.quick-menu-item:last-child{border-bottom:none}
.quick-menu-item svg{
  width:20px;height:20px;
  transition:all .3s;
  stroke:#111111;
}
.quick-menu-item:hover{
  background:var(--red);
  color:#ffffff;
}
.quick-menu-item:hover svg{stroke:#ffffff}
.quick-menu-label{line-height:1.3;white-space:nowrap}

/* ── SECTIONS COMMON ─────────────────────── */
.sec-inner{max-width:1100px;margin:0 auto}
.sec-tag{
  font-family:'Syne',sans-serif;font-size:.72rem;letter-spacing:.28em;
  color:var(--red);margin-bottom:.6rem;font-weight:700;text-transform:uppercase;
  display:flex;align-items:center;gap:.6rem;
}
.sec-tag::before{content:'';width:20px;height:1px;background:var(--red)}
.sec-title{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:700;margin-bottom:.5rem;line-height:1.3;color:var(--white)}
.sec-desc{font-size:.95rem;color:rgba(255,255,255,.4);margin-bottom:3.5rem;max-width:520px;line-height:1.8}

/* ── CTA (shared button style) ───────────── */
.cta-sec{background:var(--black-3);padding:7rem 3.5rem;text-align:center;border-top:1px solid rgba(255,255,255,.05)}
.cta-sec h2{font-size:clamp(1.4rem,2.5vw,2rem);color:var(--white);font-weight:700;margin-bottom:.8rem}
.cta-sec p{color:rgba(255,255,255,.35);font-size:.9rem;font-weight:300;margin-bottom:2.8rem}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.cta-b{
  padding:1rem 2.2rem;font-family:'Syne',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-decoration:none;transition:all .3s;
  border:1px solid rgba(255,255,255,.15);cursor:pointer;color:rgba(255,255,255,.6);
  background:transparent;
}
.cta-b:hover{border-color:rgba(255,255,255,.4);color:var(--white)}
.cta-b.pri{background:var(--red);color:#fff;border-color:var(--red)}
.cta-b.pri:hover{background:#a93226;border-color:#a93226}

/* ── FOOTER ──────────────────────────────── */
.footer{background:#050505;padding:2.5rem;text-align:center;color:rgba(255,255,255,.55);font-size:.8rem;letter-spacing:.05em;border-top:1px solid rgba(255,255,255,.04)}

/* ── BACK TO TOP ─────────────────────────── */
.back-to-top{
  position:fixed;right:2rem;bottom:2.8rem;z-index:85;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:#0D0D0D;border:1px solid rgba(255,255,255,.15);
  cursor:pointer;color:rgba(255,255,255,.7);
  box-shadow:0 8px 30px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s,transform .35s,border-color .3s,background .3s,color .3s;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{border-color:var(--red);background:var(--red);color:#fff}
.back-to-top svg{width:20px;height:20px}
@media(max-width:768px){.back-to-top{right:1.2rem;bottom:1.2rem;width:46px;height:46px}}

/* ── RESPONSIVE (shared) ─────────────────── */
/* 모바일 전용 의도적 줄바꿈([mo] 마커) — 데스크톱에서는 기본적으로 숨김,
   모바일 미디어쿼리에서만 다시 노출 */
br.mo-only {
  display: none;
}

/* 모바일 전용 문구 오버라이드(예: about_title_mobile) — 필드가 비어있으면
   이 클래스들 자체가 아예 안 쓰이니(else 분기) 영향 없음. 채워졌을 때만
   PC/모바일 버전을 둘 다 렌더링해두고 미디어쿼리로 하나만 보이게 토글한다.
   (wp_is_mobile() 같은 서버 UA 판별은 캐싱 환경에서 잘못된 버전이 굳을 수
   있어 쓰지 않음 — 이 사이트의 [pc]/[mo] 마커와 동일한 방식.) */
.mo-only-block {
  display: none;
}

/* ── AUTO TEXT WRAP (데스크톱+모바일 공통) ───────
   마커 없이 편집해도 웬만큼 자연스러운 줄바꿈이 나오도록 하는 브라우저 자동 처리.
   미지원 브라우저(Firefox 등)에서는 이 선언만 무시되고 기존 기본 줄바꿈으로 동작 —
   레이아웃이 깨지지 않는 순수 점진적 개선(progressive enhancement). */
h1, h2, h3,
.about-title, .criteria-title, .page-title, .sec-title, .section-title,
.cert-group-title, .db-cert-group-title, .hero-slide-title, .timeline-title,
.value-title, .mission-text, .cta-card-title, .cta-headline, .hero-headline,
.hero-title, .db-hero__title {
  text-wrap: balance;
}
p, dd,
.about-text, .catalog-desc, .hero-slide-desc, .mission-sub, .page-subtitle,
.perf-desc, .prod-tagline, .proj-card-desc, .proj-desc, .promise-desc,
.sec-desc, .step-desc, .tech-step-desc, .timeline-desc, .value-desc,
.loc-info-row dd,
.addr-sub, .app-desc, .caption-text, .cta-card-desc, .cta-sub,
.db-hero__desc, .db-sublink, .dbhc-sub, .lf-int-desc, .lf-int-sub,
.mech-desc, .product-desc, .section-lead, .test-desc {
  text-wrap: pretty;
}

@media(max-width:1024px){
  .quick-menu{display:none}
}
@media(max-width:768px){
  br.mo-only {
    display: inline;
  }
  .pc-only-block {
    display: none;
  }
  .mo-only-block {
    display: inline;
  }
  /* 한글 본문은 어절(띄어쓰기) 단위로만 줄바꿈 — 음절 단위로 아무데서나
     끊기면서 "습니다"의 "다"만 다음 줄에 혼자 남는 것 같은 어색한 줄바꿈 방지.
     특허번호·고시번호처럼 공백 없는 긴 영숫자 토큰이 그래도 넘칠 때만
     overflow-wrap이 예외적으로 끊어줌(안전장치). 사이트 전체 텍스트에 적용. */
  body {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  /* 데스크톱 전용 의도적 줄바꿈 — 모바일에서는 자동 줄바꿈에 맡기고 숨김 */
  br.pc-only {
    display: none;
  }
  .nav-links{display:none}
  .nav{padding:1rem 1.2rem}
  .nav-cta{margin-left:auto;padding:.5rem 1rem;font-size:.72rem}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:36px;height:36px;margin-left:.8rem;padding:0;
    background:none;border:none;cursor:pointer;flex-shrink:0;
  }
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--white);transition:transform .3s,opacity .3s;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobile-nav-backdrop{
    position:fixed;inset:0;z-index:98;
    background:rgba(0,0,0,.55);
    opacity:0;visibility:hidden;transition:opacity .3s;
  }
  .mobile-nav-backdrop.open{opacity:1;visibility:visible;}

  .mobile-nav{
    position:fixed;top:0;right:0;bottom:0;z-index:101;
    width:78%;max-width:320px;
    background:rgba(10,10,10,.98);backdrop-filter:blur(14px);
    box-shadow:-8px 0 30px rgba(0,0,0,.5);
    padding:6.5rem 2rem 2.5rem;
    display:flex;flex-direction:column;gap:2.5rem;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);transition:transform .35s ease;
  }
  .mobile-nav.open{transform:translateX(0);}
  .mobile-nav-links{list-style:none;display:flex;flex-direction:column;gap:1.7rem;}
  .mobile-nav-links a{
    font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:600;
    color:rgba(255,255,255,.88);text-decoration:none;letter-spacing:.02em;
  }
  .mobile-nav-links a.active{color:var(--red-line);}
  .mobile-nav-cta{
    font-family:'Syne',sans-serif;font-size:.85rem;font-weight:600;
    text-align:center;padding:.9rem;letter-spacing:.06em;
    border:1.5px solid rgba(255,255,255,.7);color:var(--white);text-decoration:none;
  }
  .cta-btns{flex-direction:column;align-items:center}
}
@media(min-width:769px){
  .mobile-nav,.mobile-nav-backdrop{display:none;}
}

/* PROJECT IMAGE LIGHTBOX — /projects/ 페이지와 홈 시공사례 섹션 공용
   (모달 DOM은 footer.php, 로직은 assets/js/common.js) */
.proj-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:9999;display:none;align-items:center;justify-content:center;padding:2rem;cursor:zoom-out;}
.proj-lightbox.open{display:flex;}
.proj-lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.proj-lightbox-close{position:absolute;top:24px;right:32px;background:none;border:none;color:#fff;font-size:2.5rem;line-height:1;cursor:pointer;padding:0;}
.proj-lightbox-trigger{cursor:zoom-in;}