/* ==========================================================
   누마루토건(신흥중기) 공통 스타일
   ========================================================== */
:root{
  --navy:#12203a;
  --navy-2:#1c3358;
  --red:#d1382c;
  --gray-bg:#f4f5f7;
  --text:#20242c;
  --sub:#5b6472;
  --line:#e4e6ea;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Pretendard","Noto Sans KR",-apple-system,"Malgun Gothic",sans-serif;
  color:var(--text);
  line-height:1.6;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}

/* ---------- 헤더 ---------- */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:200;
  background:#fff;border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;max-width:1280px;
}
.logo{font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--navy);}
.logo span{color:var(--red);}
.gnb{display:flex;gap:36px;list-style:none;margin:0;padding:0;}
.gnb a{font-size:15px;font-weight:600;color:#333;padding:6px 0;border-bottom:2px solid transparent;transition:.2s;}
.gnb a:hover,.gnb a.active{color:var(--red);border-color:var(--red);}
.menu-btn{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:var(--navy);}

@media (max-width:860px){
  .gnb{
    position:fixed;top:72px;left:0;right:0;bottom:0;background:#fff;
    flex-direction:column;gap:0;padding:10px 24px;transform:translateY(-8px);
    opacity:0;pointer-events:none;transition:.2s;
  }
  .gnb.open{opacity:1;pointer-events:auto;transform:translateY(0);}
  .gnb a{display:block;padding:16px 0;border-bottom:1px solid var(--line);}
  .menu-btn{display:block;}
}

/* ---------- 히어로 ---------- */
.hero{
  position:relative;min-height:480px;display:flex;align-items:center;
  background-size:cover;background-position:center;color:#fff;
  overflow:hidden;padding:64px 0;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,16,30,.86) 0%,rgba(10,16,30,.55) 45%,rgba(10,16,30,.25) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%;}
.hero-sub{font-size:15px;color:#ffd7cf;font-weight:700;margin-bottom:18px;letter-spacing:.3px;}
.hero h1{font-size:40px;font-weight:800;line-height:1.35;margin:0 0 24px;max-width:760px;}
.hero p{font-size:16px;color:#d8dce4;max-width:640px;margin:0 0 30px;}
.hero-page{min-height:280px;}
.hero-page h1{font-size:34px;}
.hero-tag{
  position:absolute;right:40px;bottom:34px;font-size:30px;font-weight:800;
  color:#fff;opacity:.85;z-index:2;letter-spacing:1px;
}

/* 메인 히어로 슬라이더 (밝은 패턴 배경, 다크 텍스트) */
.hero-slider{
  position:relative;min-height:520px;background:#e9eaec;overflow:hidden;color:var(--text);
}
.hero-slider::before{content:none;}
.slide{
  position:absolute;inset:0;display:flex;align-items:center;
  background-size:cover;background-position:center;
  opacity:0;visibility:hidden;transition:opacity .6s ease;
}
.slide.active{opacity:1;visibility:visible;position:relative;}
.slide::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.35);}
.slide .slide-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 24px;width:100%;}
.slide.align-right .slide-inner{text-align:right;margin-left:auto;}
.slide h1{font-size:34px;font-weight:800;line-height:1.4;margin:0 0 18px;color:#151a22;}
.slide.align-right h1{margin-left:auto;}
.slide p{font-size:15px;color:#3d4453;max-width:520px;margin:0 0 22px;}
.slide.align-right p{margin-left:auto;}
.slide-eyebrow{font-size:26px;font-weight:800;letter-spacing:1px;color:#151a22;margin-bottom:10px;}

.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  background:none;border:none;font-size:24px;color:#333;cursor:pointer;padding:10px;
}
.slider-arrow.prev{left:16px;}
.slider-arrow.next{right:16px;}
.slider-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5;}
.slider-dots button{width:22px;height:3px;border:none;background:rgba(20,25,35,.25);cursor:pointer;padding:0;}
.slider-dots button.active{background:var(--red);}

.btn{
  display:inline-block;background:var(--red);color:#fff;font-weight:700;font-size:15px;
  padding:13px 26px;border-radius:6px;border:none;cursor:pointer;transition:.2s;
}
.btn:hover{background:#b32b20;}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.6);}
.btn-outline:hover{background:rgba(255,255,255,.12);}

/* ---------- 섹션 공통 ---------- */
.section{padding:80px 0;}
.section-gray{background:var(--gray-bg);}
.section-head{margin-bottom:40px;}
.eyebrow{font-size:13px;font-weight:800;color:var(--red);letter-spacing:1px;margin-bottom:10px;text-transform:uppercase;}
.section-head h2{font-size:28px;font-weight:800;margin:0 0 12px;color:var(--navy);}
.section-head p{color:var(--sub);font-size:15.5px;max-width:640px;}

/* 3단 카드 (메인) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.feature-card img{width:100%;height:210px;object-fit:cover;border-radius:8px;margin-bottom:18px;}
.feature-card h3{font-size:18px;font-weight:800;margin:0 0 10px;color:var(--navy);}
.feature-card .tag{color:var(--red);font-weight:700;font-size:14px;display:block;margin-bottom:6px;}
.feature-card p{font-size:14.5px;color:var(--sub);margin:0 0 10px;}
.feature-card ul{margin:0;padding-left:18px;color:var(--sub);font-size:14px;}
.feature-card ul li{margin-bottom:4px;}

.callout{
  margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 28px;
}
.callout p{margin:6px 0;font-size:14.5px;color:var(--sub);}
.callout strong{color:var(--navy);}
.callout .icon{margin-right:8px;}

/* ---------- 시공사례 갤러리 ---------- */
.works-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.work-item{
  position:relative;overflow:hidden;border-radius:8px;aspect-ratio:4/3;background:#e9ebee;
  cursor:pointer;
}
.work-item img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.work-item:hover img{transform:scale(1.06);}
.work-cap{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px 9px;
  background:linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 100%);
  color:#fff;font-size:13px;font-weight:700;
  transform:translateY(100%);opacity:0;transition:.25s ease;
}
.work-item:hover .work-cap{transform:translateY(0);opacity:1;}
.works-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--sub);background:#fff;border-radius:8px;border:1px dashed var(--line);}

/* 라이트박스 */
.lightbox{display:none;position:fixed;inset:0;background:rgba(6,9,16,.92);z-index:999;align-items:center;justify-content:center;padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(92vw,1100px);max-height:80vh;object-fit:contain;border-radius:4px;}
.lightbox-cap{color:#fff;text-align:center;margin-top:14px;font-size:15px;font-weight:600;}
.lightbox-close{position:absolute;top:24px;right:32px;color:#fff;font-size:32px;background:none;border:none;cursor:pointer;}

/* ---------- 비교 테이블 (시공특허) ---------- */
.compare-table{width:100%;border-collapse:collapse;margin:26px auto 40px;font-size:14.5px;}
.compare-table th,.compare-table td{border:1px solid var(--line);padding:12px 16px;text-align:center;}
.compare-table th{background:var(--navy);color:#fff;font-weight:700;}
.compare-table td:last-child{color:#1a7a44;font-weight:700;}
.notice-box{
  display:flex;gap:10px;align-items:flex-start;background:#fff2f1;border:1px solid #f3c7c3;
  color:#a4291f;padding:14px 18px;border-radius:8px;font-size:14px;font-weight:700;margin-bottom:26px;
}
.diagram-wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:34px;}
.diagram-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;text-align:center;}
.diagram-box h4{font-size:14.5px;margin:0 0 16px;color:var(--navy);}

/* ---------- 정보 리스트 (상담문의 상단) ---------- */
.info-list{display:flex;flex-direction:column;gap:22px;}
.info-list .row{display:flex;gap:18px;font-size:15px;}
.info-list .row .k{flex:0 0 150px;font-weight:800;color:var(--navy);}
.info-list .row .v{color:var(--sub);}
.price-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 26px;margin-top:10px;font-size:14.5px;color:var(--sub);line-height:1.9;}
.price-box b{color:var(--navy);}

/* ---------- 문의 폼(전 페이지 공통 하단) ---------- */
.contact-cta{background:var(--navy);color:#fff;padding:70px 0 60px;}
.cta-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;}
.cta-left h2{font-size:26px;font-weight:800;margin:0 0 12px;}
.cta-left .desc{color:#aeb6c6;font-size:14.5px;margin-bottom:26px;}
.cta-left .phone-line{font-size:15px;color:#ffcfc9;font-weight:700;margin-bottom:6px;}
.cta-left .phone{font-size:34px;font-weight:800;letter-spacing:1px;margin-bottom:22px;}
.cta-left .biz-info{font-size:13px;color:#8992a3;line-height:1.9;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;}
.cta-left .foot-links{margin-top:16px;font-size:13px;color:#8992a3;}
.cta-left .foot-links a{margin-right:14px;}

.cform{display:flex;flex-direction:column;gap:16px;}
.cform label{font-size:13.5px;font-weight:700;color:#c9cfdb;margin-bottom:6px;display:block;}
.cform input,.cform textarea{
  width:100%;padding:12px 14px;border-radius:6px;border:none;background:#22345a;
  color:#fff;font-size:14.5px;font-family:inherit;
}
.cform input::placeholder,.cform textarea::placeholder{color:#8892a8;}
.cform textarea{min-height:100px;resize:vertical;}
.cform .req{color:var(--red);}
.cform .submit-btn{margin-top:4px;}
.form-msg{font-size:13.5px;margin-top:2px;min-height:18px;}
.form-msg.ok{color:#7fd8a0;}
.form-msg.err{color:#ff9d94;}

.copyright{background:#0a1122;color:#5c6579;font-size:12.5px;padding:16px 0;text-align:center;}

/* ---------- 반응형 ---------- */
@media (max-width:1000px){
  .grid-3{grid-template-columns:1fr;}
  .works-grid{grid-template-columns:repeat(2,1fr);}
  .diagram-wrap{grid-template-columns:1fr;}
  .cta-grid{grid-template-columns:1fr;gap:36px;}
  .hero h1{font-size:30px;}
  .wrap[style*="grid-template-columns:280px"]{grid-template-columns:1fr !important;}
}
@media (max-width:560px){
  .works-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .section{padding:56px 0;}
  .info-list .row{flex-direction:column;gap:4px;}
}