:root{
  --navy:#14202B;
  --navy-2:#1E2F3D;
  --accent:#C2410C;
  --bg:#FFFFFF;
  --bg-2:#F2F4F5;
  --line:#D5DBDF;
  --text:#1B242C;
  --muted:#55626C;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"IBM Plex Sans KR","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;line-height:1.7;font-size:16px;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* 어두운 배경에서는 흰 테두리 */
.top-links :focus-visible,.hero :focus-visible,.quick :focus-visible,.band :focus-visible,.ft :focus-visible,.skip:focus-visible{outline-color:#fff}
main:focus{outline:none}
/* 내용이 짧은 페이지에서도 푸터가 화면 아래에 붙도록 */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:8px;top:-60px;z-index:20;background:var(--navy);color:#fff;padding:10px 16px;text-decoration:none}
.skip:focus{top:8px}
[id]{scroll-margin-top:84px}
.todo{background:#FFE9A8;color:#14202B;padding:1px 6px;font-size:.9rem}

/* 사진 자리: 사진이 들어오면 .ph 안의 TODO 문구를 지우고 <img>를 넣습니다
   - 메인 배너: <img src="images/hero.jpg" alt="사진 설명" width="1920" height="1080" fetchpriority="high">
   - 그 밖의 사진: <img src="images/파일명.jpg" alt="사진 설명" width="1200" height="900" loading="lazy">
   - alt에는 사진에 보이는 것을 짧게 적습니다 (예: "변압기 외함에 장착한 단열 jacket"). 거래처 이름은 허락받은 경우에만 적습니다.
   - 사진은 가로 1200px 안팎(배너는 1920px), JPG 기준 300KB 이하로 줄여서 넣습니다. */
.ph{position:relative;background:#B9C2C8;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.ph .todo{position:absolute;left:12px;top:12px;right:12px;width:fit-content}

/* 헤더 */
.hd{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-weight:700;font-size:1.3rem;text-decoration:none;color:var(--navy);letter-spacing:-.02em;white-space:nowrap}
.gnb{display:flex;gap:40px}
.gnb a{text-decoration:none;font-weight:500;font-size:1.02rem}
.gnb a:hover{color:var(--accent)}
.menu-btn{display:none;background:none;border:1px solid var(--line);padding:8px 12px;font:inherit;font-size:.95rem;cursor:pointer}

/* 메인 배너 */
.hero{position:relative;height:560px;color:#fff;background:var(--navy-2)}
.hero .ph{position:absolute;inset:0;background:#3A4A57}
.hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,18,26,.8) 0%,rgba(10,18,26,.7) 55%,rgba(10,18,26,.35) 100%)}
.hero .ph .todo{top:auto;bottom:16px;z-index:1}
.hero .wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center}
.hero h1{margin:0 0 16px;font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.25;letter-spacing:-.03em;max-width:15em}
.hero p{margin:0 0 32px;font-size:1.1rem;max-width:32em;color:#E3E8EB}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:500;padding:14px 28px;width:fit-content}
.btn:hover{background:#9A3412}

/* 바로가기 */
.quick{display:grid;grid-template-columns:repeat(4,1fr)}
.quick a{position:relative;display:block;height:180px;text-decoration:none;color:#fff}
.quick .ph{position:absolute;inset:0}
.quick .ph::after{content:"";position:absolute;inset:0;background:rgba(14,24,33,.7)}
.quick a:hover .ph::after{background:rgba(194,65,12,.85)}
.quick span.t{position:absolute;left:24px;bottom:22px;z-index:1;font-size:1.2rem;font-weight:700}
.quick span.d{display:block;font-size:.88rem;font-weight:400;color:#E3E8EB}
.quick .ph .todo{font-size:.78rem;z-index:1}
.quick a.quick-cta{background:var(--accent)}
.quick a.quick-cta:hover{background:#9A3412}

/* 공통 섹션 */
section{padding:96px 0}
section.gray{background:var(--bg-2)}
.sec-title{margin:0 0 12px;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;line-height:1.3;color:var(--navy)}
.sec-sub{margin:0 0 48px;color:var(--muted);max-width:40em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.two .ph{aspect-ratio:4/3}

/* 회사소개 */
.about p{margin:0 0 16px}
.about dl{display:grid;grid-template-columns:88px 1fr;gap:10px 16px;margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.about dt{color:var(--muted)}
.about dd{margin:0}

/* 제품소개 */
.mat{list-style:none;margin:24px 0 0;padding:0;border-top:2px solid var(--navy)}
.mat li{padding:16px 0;border-bottom:1px solid var(--line)}
.mat b{display:inline-block;min-width:110px;color:var(--navy)}
.mat span{color:var(--muted)}

/* 시공사례 */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tabs button{font:inherit;font-size:.95rem;padding:9px 18px;border:1px solid var(--line);background:#fff;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery figure{margin:0;background:#fff}
.gallery .ph{aspect-ratio:4/3}
.gallery figcaption{padding:14px 16px;font-size:.95rem}
.gallery figcaption small{display:block;color:var(--muted)}

/* 제작 과정 */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.steps li{counter-increment:s}
.steps .ph{aspect-ratio:1/1}
.steps .ph .todo{font-size:.75rem}
.steps b{display:block;margin-top:14px}
.steps b::before{content:counter(s) ". ";color:var(--accent)}
.steps span{display:block;font-size:.9rem;color:var(--muted);line-height:1.5;margin-top:4px}

/* 고객센터 */
.contact .box{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:#fff}
.contact .box > div{padding:36px}
.contact .box > div + div{border-left:1px solid var(--line)}
.contact h3{margin:0 0 16px;font-size:1.15rem;color:var(--navy)}
.contact dl{display:grid;grid-template-columns:80px 1fr;gap:12px 16px;margin:0}
.contact dt{color:var(--muted)}
.contact dd{margin:0}
.map-link{display:inline-block;margin-top:20px;padding:10px 18px;border:1px solid var(--navy);text-decoration:none;font-weight:500}
.map-link:hover{background:var(--navy);color:#fff}

/* 푸터 */
.ft{background:var(--navy);color:#B7C2CA;padding:40px 0;font-size:.9rem}
.ft strong{color:#fff;font-size:1.05rem}
.ft p{margin:8px 0 0}

@media (max-width:960px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .quick{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .hd .wrap{height:60px}
  .menu-btn{display:block}
  .gnb{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid var(--line)}
  .gnb.open{display:flex}
  .gnb a{padding:14px 24px;border-top:1px solid var(--line)}
  .hero{height:440px}
  .hero .ph::after{background:rgba(10,18,26,.72)}
  .quick a{height:130px}
  .quick span.t{left:16px;bottom:14px;font-size:1.05rem}
  section{padding:64px 0}
  .two,.contact .box{grid-template-columns:1fr;gap:32px}
  .contact .box{gap:0}
  .contact .box > div{padding:24px}
  .contact .box > div + div{border-left:0;border-top:1px solid var(--line)}
  .gallery{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
}

/* ---- 여러 페이지 공통 ---- */
/* 드롭다운 메뉴 */
.gnb > div{position:relative}
.gnb > div > a,.gnb > a{display:block;line-height:72px}
.gnb [aria-current="page"]{color:var(--accent)}
.gnb .sub{display:none;position:absolute;top:72px;left:50%;transform:translateX(-50%);min-width:180px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--accent);padding:8px 0}
.gnb .sub a{display:block;padding:8px 20px;line-height:1.5;font-weight:400;font-size:.95rem;white-space:nowrap}
.gnb > div:hover .sub,.gnb > div:focus-within .sub{display:block}
.top-links{background:var(--navy);color:#B7C2CA;font-size:.8rem}
.top-links .wrap{display:flex;justify-content:flex-end;gap:16px;height:30px;align-items:center}
.top-links a{text-decoration:none}
.top-links a:hover{color:#fff}

.top-links .todo{font-size:.75rem;padding:0 4px}
.top-links span{margin-right:auto}

/* 모바일 전화 버튼: 760px 이하에서만 보입니다 */
.call-fab{display:none}

/* 하위 페이지 상단 */
.sub-visual{position:relative;height:260px;color:#fff;background:var(--navy-2)}
.sub-visual .ph{position:absolute;inset:0;background:#3A4A57}
.sub-visual .ph::after{content:"";position:absolute;inset:0;background:rgba(10,18,26,.7)}
.sub-visual .ph .todo{top:auto;bottom:12px;z-index:1;font-size:.8rem}
.sub-visual .wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center}
.sub-visual h1{margin:0;font-size:clamp(1.7rem,3.6vw,2.5rem);letter-spacing:-.02em}
.crumb{margin:8px 0 0;font-size:.9rem;color:#D3DADF}
.crumb a{text-decoration:none}
.lnb{border-bottom:1px solid var(--line);background:#fff}
.lnb .wrap{display:flex;flex-wrap:wrap}
.lnb a{padding:16px 24px;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.lnb a:hover{color:var(--text)}
.lnb a[aria-current]{color:var(--navy);font-weight:700;border-bottom-color:var(--accent)}

/* 메인: 더보기 링크, 미리보기 */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:32px}
.sec-head .sec-sub{margin:0}
.more{white-space:nowrap;text-decoration:none;font-size:.95rem;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px}
.more:hover{color:var(--accent);border-color:var(--accent)}
.prod-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.prod-list a{display:block;text-decoration:none;background:#fff;border:1px solid var(--line)}
.prod-list a:hover{border-color:var(--navy)}
.prod-list .ph{aspect-ratio:4/3}
.prod-list b{display:block;padding:16px 18px;font-weight:500}
.band{background:var(--navy);color:#fff;padding:56px 0}
.band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.band h2{margin:0 0 6px;font-size:1.5rem}
.band p{margin:0;color:#C9D2D8}

/* 회사소개: 인사말, 연혁, 인증 */
.greeting{max-width:46em;font-size:1.05rem}
.greeting .sign{margin-top:28px;text-align:right;font-weight:500}
.history{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy);max-width:820px}
.history li{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.history b{color:var(--navy)}
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.certs figure{margin:0;background:#fff;border:1px solid var(--line)}
.certs .ph{aspect-ratio:3/4}
.certs figcaption{padding:12px 14px;font-size:.92rem}

/* 제품 상세 */
.prod{padding:80px 0;border-bottom:1px solid var(--line)}
.prod:nth-of-type(even){background:var(--bg-2)}
.prod h2{margin:0 0 12px;font-size:1.7rem;color:var(--navy)}
.spec{width:100%;border-collapse:collapse;margin-top:24px;font-size:.95rem}
.spec th,.spec td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:110px;color:var(--muted);font-weight:500}
.spec tr:first-child th,.spec tr:first-child td{border-top:2px solid var(--navy)}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.thumbs .ph{aspect-ratio:1/1}
.thumbs .ph .todo{font-size:.7rem;left:6px;top:6px}

@media (max-width:960px){
  .prod-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .top-links{display:none}
  .call-fab{display:flex;align-items:center;justify-content:center;gap:8px;position:fixed;left:16px;right:16px;bottom:16px;z-index:15;height:52px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;box-shadow:0 4px 16px rgba(0,0,0,.25)}
  .call-fab .todo{font-size:.8rem;font-weight:400}
  .ft{padding-bottom:96px}
  .gnb{top:60px}
  .gnb > div > a,.gnb > a{line-height:1.5}
  .gnb .sub{display:block;position:static;transform:none;border:0;padding:0 0 8px;min-width:0}
  .gnb .sub a{padding:6px 40px;border-top:0;color:var(--muted)}
  .sub-visual{height:180px}
  .lnb .wrap{padding:0;overflow-x:auto;flex-wrap:nowrap}
  .lnb a{padding:14px 16px;white-space:nowrap}
  .sec-head{flex-direction:column;align-items:flex-start}
  .prod-list{grid-template-columns:1fr}
  .certs{grid-template-columns:repeat(2,1fr);gap:12px}
  .history li{grid-template-columns:96px 1fr}
  .prod{padding:56px 0}
}