/*
Theme Name: S&C ENG
Theme URI: https://solartubekr5.mycafe24.com/
Description: (주)S&C ENG 친환경 고효율 자연채광 시스템 - 밝은 화이트+옐로 리뉴얼 테마. daylux 스타일 풀스크린 참고.
Author: S&C ENG
Version: 1.0
*/

/* ==========================================================
   S&C ENG 리뉴얼 공통 스타일
   컨셉: 받은 시안(화이트+옐로 도트+블랙 타이포) × daylux 풀스크린 레이아웃
   ========================================================== */
:root{
  --yellow:#F6C544;
  --yellow-deep:#E8A93A;
  --yellow-pale:#FdF3D9;
  --ink:#141414;
  --gray-8:#333;
  --gray-6:#5f5f5f;
  --gray-4:#9a9a9a;
  --line:#e9e6df;
  --paper:#ffffff;
  --bg-soft:#faf8f3;
  --green:#5aa63f;
  --nav-h:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans KR',sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;word-break:keep-all}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}
.en{font-family:'Montserrat','Noto Sans KR',sans-serif}

/* ===== 헤더 ===== */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,56px);
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.06);
  transition:box-shadow .25s}
.hd.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.08)}
.hd .logo{font-family:'Montserrat';font-weight:800;font-size:23px;letter-spacing:.5px;color:var(--ink);display:flex;align-items:center;gap:10px}
.hd .logo .sun{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9b0,var(--yellow) 45%,var(--yellow-deep));box-shadow:0 0 10px rgba(246,197,68,.8)}
.gnb{display:flex;gap:6px;align-items:center}
.gnb>li{position:relative}
.gnb>li>a{display:block;padding:26px 20px;font-weight:600;font-size:16px;color:var(--ink);transition:color .2s;position:relative}
.gnb>li>a::after{content:"";position:absolute;left:20px;right:20px;bottom:18px;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.gnb>li:hover>a{color:var(--yellow-deep)}
.gnb>li:hover>a::after{transform:scaleX(1)}
.snb{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:190px;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(20,20,20,.12);
  padding:10px;opacity:0;visibility:hidden;transition:.22s}
.gnb>li:hover .snb{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.snb a{display:block;padding:10px 14px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--gray-8);white-space:nowrap}
.snb a:hover{background:var(--yellow-pale);color:var(--ink)}
.hd-cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;
  padding:11px 22px;border-radius:999px;transition:.22s}
.hd-cta:hover{background:var(--yellow-deep);color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.25s}

/* 모바일 메뉴 */
.m-nav{display:none}
@media(max-width:1024px){
  .gnb,.hd-cta{display:none}
  .burger{display:block}
  .m-nav{display:block;position:fixed;inset:var(--nav-h) 0 0 0;background:#fff;z-index:99;
    padding:24px;overflow-y:auto;transform:translateX(100%);transition:.3s;visibility:hidden}
  .m-nav.open{transform:translateX(0);visibility:visible}
  .m-nav .grp{border-bottom:1px solid var(--line);padding:14px 4px}
  .m-nav .grp>b{display:block;font-size:17px;margin-bottom:6px}
  .m-nav .grp a{display:block;padding:8px 10px;color:var(--gray-6);font-size:15px}
  .m-nav .grp a:active{color:var(--yellow-deep)}
  body.m-open{overflow:hidden}
  .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ===== 섹션 공통 ===== */
.sec{padding:clamp(64px,9vw,120px) clamp(20px,5vw,60px)}
.wrap{max-width:1240px;margin:0 auto}
.sec-head{text-align:center;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .tag{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat';font-weight:700;font-size:13px;
  letter-spacing:2.5px;color:var(--yellow-deep);margin-bottom:14px;text-transform:uppercase}
.sec-head .tag::before,.sec-head .tag::after{content:"";width:26px;height:1.5px;background:var(--yellow)}
.sec-head h2{font-size:clamp(26px,3.4vw,42px);font-weight:800;line-height:1.3}
.sec-head p{margin-top:14px;color:var(--gray-6);font-size:clamp(14.5px,1.3vw,17px);line-height:1.75}

/* ===== 버튼 ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:999px;font-weight:700;font-size:15px;transition:.22s;border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn:hover{background:var(--ink);color:#fff}
.btn.solid{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.btn.solid:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost-w{border-color:rgba(255,255,255,.8);color:#fff}
.btn.ghost-w:hover{background:#fff;color:var(--ink)}

/* ===== 서브페이지 히어로 ===== */
.sub-hero{position:relative;height:clamp(300px,42vh,430px);display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;background-size:cover;background-position:center;margin-top:var(--nav-h)}
.sub-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.35))}
.sub-hero .in{position:relative;z-index:1;padding:0 20px}
.sub-hero .crumb{font-family:'Montserrat';font-size:12.5px;letter-spacing:2px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:14px;text-transform:uppercase}
.sub-hero h1{font-size:clamp(30px,4.5vw,50px);font-weight:900}
.sub-hero p{margin-top:12px;font-size:clamp(14px,1.5vw,17px);color:rgba(255,255,255,.9)}

/* ===== 콘텐츠 타이포 ===== */
.t-label{display:flex;align-items:center;gap:10px;font-weight:800;font-size:clamp(20px,2.2vw,27px);margin-bottom:22px}
.t-label::before{content:"";width:6px;height:26px;border-radius:3px;background:var(--yellow)}
.lead{font-size:clamp(15px,1.4vw,18px);line-height:1.9;color:var(--gray-8)}
.quote{position:relative;text-align:center;font-size:clamp(17px,2vw,24px);font-weight:700;line-height:1.7;padding:10px 30px}
.quote em{font-style:normal;color:var(--yellow-deep)}
.quote::before,.quote::after{font-family:Georgia,serif;font-size:44px;color:var(--yellow);position:absolute;line-height:1}
.quote::before{content:"\201C";left:0;top:-4px}
.quote::after{content:"\201D";right:0;bottom:-14px}

/* ===== 표 (도표 리디자인) ===== */
.tbl-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--line);box-shadow:0 6px 24px rgba(20,20,20,.05)}
table.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:640px;background:#fff}
.tbl thead th{background:var(--ink);color:#fff;font-weight:700;padding:15px 18px;text-align:center;font-size:14.5px;letter-spacing:.5px}
.tbl thead.yellow th{background:var(--yellow);color:var(--ink)}
.tbl tbody th{background:var(--yellow-pale);font-weight:700;padding:14px 18px;text-align:center;color:var(--ink);border-bottom:1px solid var(--line)}
.tbl tbody td{padding:14px 18px;border-bottom:1px solid var(--line);color:var(--gray-8);text-align:center;line-height:1.6}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0}
.tbl tbody tr:hover td{background:#fffdf5}
.tbl .src{font-size:12.5px;color:var(--gray-4)}

/* ===== 카드/그리드 ===== */
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1024px){.g4,.g5{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.28s}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(20,20,20,.12);border-color:transparent}
.card .thumb{aspect-ratio:4/3;overflow:hidden;background:#f3f1ea}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .thumb img{transform:scale(1.06)}
.card .body{padding:22px 24px 26px}
.card .body .en-tag{font-family:'Montserrat';font-size:11px;font-weight:700;letter-spacing:2px;color:var(--yellow-deep);text-transform:uppercase}
.card .body h3{font-size:19px;font-weight:800;margin:8px 0 10px}
.card .body p{font-size:14.5px;line-height:1.7;color:var(--gray-6)}
.card .body .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--ink)}
.card .body .more::after{content:"→";transition:.2s}
.card:hover .body .more::after{transform:translateX(4px)}

/* 인포그래픽: 스텝/프로세스 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:step}
.step{position:relative;padding:34px 28px;background:#fff;border:1px solid var(--line);text-align:center}
.step:first-child{border-radius:18px 0 0 18px}
.step:last-child{border-radius:0 18px 18px 0}
.step+.step{border-left:0}
.step .no{font-family:'Montserrat';font-weight:800;font-size:13px;letter-spacing:2px;color:var(--yellow-deep)}
.step h4{font-size:19px;font-weight:800;margin:10px 0 10px}
.step p{font-size:14px;line-height:1.7;color:var(--gray-6)}
.step::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);z-index:2;
  width:26px;height:26px;border-radius:50%;background:var(--yellow);color:var(--ink);font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:13px}
.step:last-child::after{display:none}
@media(max-width:760px){
  .steps{grid-template-columns:1fr}
  .step{border-radius:0!important;border-left:1px solid var(--line)!important;border-top:0}
  .step:first-child{border-radius:18px 18px 0 0!important;border-top:1px solid var(--line)}
  .step:last-child{border-radius:0 0 18px 18px!important}
  .step::after{content:"↓";right:auto;left:50%;top:auto;bottom:-13px;transform:translateX(-50%)}
}

/* 인포그래픽: 수치 스탯 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stats{grid-template-columns:1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 24px;text-align:center}
.stat b{font-family:'Montserrat';font-size:clamp(30px,3.4vw,44px);font-weight:800;color:var(--ink);display:block;line-height:1.1}
.stat b small{font-size:.5em;font-weight:700;color:var(--yellow-deep)}
.stat span{display:block;margin-top:10px;font-size:14px;color:var(--gray-6);font-weight:500}

/* 특장점 아이콘 리스트 */
.feat{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.feat .ic{flex:0 0 52px;height:52px;border-radius:14px;background:var(--yellow-pale);display:flex;align-items:center;justify-content:center;font-size:24px}
.feat b{display:block;font-size:16.5px;margin-bottom:6px}
.feat p{font-size:14px;line-height:1.7;color:var(--gray-6)}

/* 체크 리스트 */
.checks li{position:relative;padding:10px 0 10px 34px;font-size:15.5px;line-height:1.7;color:var(--gray-8);border-bottom:1px dashed var(--line)}
.checks li:last-child{border-bottom:0}
.checks li::before{content:"✓";position:absolute;left:2px;top:9px;width:22px;height:22px;border-radius:50%;
  background:var(--yellow);color:var(--ink);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* 이미지 캡션 */
.fig{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff}
.fig img{width:100%;object-fit:cover}
.fig figcaption{padding:12px 16px;font-size:13.5px;color:var(--gray-6);text-align:center;border-top:1px solid var(--line)}

/* 갤러리 */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gal{grid-template-columns:1fr}}
.gal .ph{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#eee}
.gal .ph img{width:100%;height:100%;object-fit:cover;transition:.35s}
.gal .ph:hover img{transform:scale(1.05)}
.gal .ph .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;color:#fff;font-size:13.5px;font-weight:600;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}

/* CTA 밴드 */
.cta-band{background:var(--ink);color:#fff;text-align:center;padding:clamp(56px,8vw,96px) 24px;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,197,68,.28),transparent 70%)}
.cta-band h2{font-size:clamp(24px,3vw,38px);font-weight:800;line-height:1.4}
.cta-band p{margin:16px 0 30px;color:rgba(255,255,255,.75);font-size:clamp(14px,1.4vw,16.5px)}
.cta-band .tel{font-family:'Montserrat';font-weight:800;font-size:clamp(22px,2.6vw,32px);color:var(--yellow);letter-spacing:1px}

/* ===== 푸터 ===== */
.ft{background:#171717;color:#bfbcb4;padding:clamp(44px,6vw,72px) clamp(20px,5vw,60px) 34px}
.ft .top{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
.ft .brand .logo{font-family:'Montserrat';font-weight:800;font-size:22px;color:#fff;display:flex;align-items:center;gap:9px}
.ft .brand .logo .sun{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9b0,var(--yellow) 45%,var(--yellow-deep))}
.ft .brand p{margin-top:14px;font-size:13.5px;line-height:1.8;color:#8f8c85}
.ft .info{font-size:14px;line-height:2.05}
.ft .info b{color:#f0eee8;font-weight:600}
.ft .info a{color:var(--yellow);border-bottom:1px dotted rgba(246,197,68,.5)}
.ft .quick{display:flex;gap:44px;flex-wrap:wrap}
.ft .quick b{display:block;color:#fff;font-size:14.5px;margin-bottom:14px;font-weight:700}
.ft .quick a{display:block;font-size:13.5px;color:#8f8c85;padding:4px 0;transition:.2s}
.ft .quick a:hover{color:var(--yellow)}
.ft .bottom{max-width:1240px;margin:26px auto 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#77746d}
.ft .bottom .en{letter-spacing:1px}

/* 스크롤 리빌 */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.rv.on{opacity:1;transform:none}