/* [생성일] 2026-08-14
   [경위] 서브페이지 4개(회사소개·시공사례·간판종류·제작문의)를 만들면서
          index.html에 인라인으로 있던 CSS를 공용 파일로 분리. 5개 페이지가 같은 디자인을 쓴다.
   [변경이력]
     - 2026-08-14: index.html의 <style> 블록을 그대로 옮김 (값 변경 없음) + 서브페이지용 CSS 추가 */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

/* ═════════ 토큰 — 심야 검정 → 초저녁 남색으로 한 단계 밝힘 ═════════ */
:root{
  --bg:#0B1220; --bg2:#111A2C; --card:#17223A; --line:#27354E;
  --tx:#F2F6FA; --tx2:#AEC0D6; --tx3:#7288A2;
  --blue:#1D6FE0;       /* 웰컴싸인 로고 블루 계열 */
  --lit:#7FD8FF;
  --glow1:rgba(96,190,255,.85); --glow2:rgba(30,130,255,.55); --glow3:rgba(0,90,255,.3);
  --f:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  --m:ui-monospace,"SF Mono","Consolas","D2Coding","Malgun Gothic",monospace;
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--bg);color:var(--tx);line-height:1.68;
     letter-spacing:-.018em;word-break:keep-all;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lit);outline-offset:3px}
.w{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.lb{font-family:var(--m);font-size:11.5px;letter-spacing:.16em;color:var(--tx3);
    text-transform:uppercase;font-weight:500}
.n{font-family:var(--m);font-variant-numeric:tabular-nums;letter-spacing:0}

section{padding:clamp(64px,8vw,110px) 0}
h2{font-size:clamp(26px,3.6vw,42px);font-weight:900;letter-spacing:-.05em;line-height:1.2;margin-top:14px}
.lead{color:var(--tx2);margin-top:16px;font-size:clamp(14px,1.4vw,16px);max-width:600px}

/* ═════════ 시안 고지 ═════════ */
.demo{background:#14203A;color:#A3C4F2;font-family:var(--m);font-size:11.5px;
      letter-spacing:.02em;text-align:center;padding:9px 16px;line-height:1.6;
      border-bottom:1px solid #223252}

/* ═════════ 헤더 ═════════ */
.hdr{position:sticky;top:0;z-index:60;background:rgba(11,18,32,.82);
     backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.mark{font-size:18px;font-weight:900;letter-spacing:-.05em}
.mark b{color:var(--lit);font-weight:900}
.hdr nav{display:flex;gap:26px;font-size:14px;font-weight:600;color:var(--tx2)}
.hdr nav a:hover{color:var(--lit)}
.call{font-family:var(--m);font-size:14px;font-weight:700;letter-spacing:.02em;
      background:var(--blue);color:#fff;padding:9px 18px;border-radius:4px;
      transition:box-shadow .25s,transform .2s}
.call:hover{box-shadow:0 0 24px rgba(29,111,224,.5);transform:translateY(-1px)}

/* ═════════ 히어로 — 사진을 더 보이게(.34→.46), 덮개도 옅게 ═════════ */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero .bgp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
     object-position:50% 42%;opacity:.46}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,18,32,.68) 0%,rgba(11,18,32,.18) 42%,rgba(11,18,32,.88) 88%)}
.hero-in{position:relative;z-index:2;padding:clamp(80px,11vw,150px) 0 clamp(56px,7vw,88px);
  text-align:center}
.hero .lb{color:#8FA6C2}
.sign{font-size:clamp(60px,12.5vw,148px);font-weight:900;letter-spacing:-.055em;
  line-height:1.04;margin-top:22px;color:#182335;transition:color .2s}
.sign.on{color:#EAF7FF;
  text-shadow:0 0 8px var(--glow1),0 0 26px var(--glow2),0 0 64px var(--glow3),0 0 120px var(--glow3);
  animation:ignite 1.15s steps(1,end) 1}
@keyframes ignite{
  0%{color:#182335;text-shadow:none}
  12%{color:#EAF7FF} 22%{color:#1E2B42;text-shadow:none}
  34%{color:#EAF7FF} 44%{color:#243450}
  56%{color:#EAF7FF} 100%{color:#EAF7FF}
}
.dimcap{display:flex;align-items:center;justify-content:center;gap:12px;margin:26px auto 0;
  max-width:560px;font-family:var(--m);font-size:12.5px;letter-spacing:.08em;color:var(--tx3)}
.dimcap::before,.dimcap::after{content:"";flex:1;border-top:1px solid #35465F}
.dimcap b{color:var(--lit);font-weight:700}
.hero p.sub{margin:20px auto 0;font-size:clamp(15px,1.6vw,18px);color:var(--tx2);max-width:540px}
.hero-act{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:4px;
  font-weight:800;font-size:15.5px;letter-spacing:-.02em;
  transition:transform .2s,box-shadow .25s,background .2s,color .2s}
.btn-a{background:var(--blue);color:#fff}
.btn-a:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(29,111,224,.45)}
.btn-b{border:1.5px solid #445A80;color:var(--tx)}
.btn-b:hover{border-color:var(--lit);color:var(--lit)}

/* 2026-08-14 고객 요청 ③ — 히어로 문의 버튼을 크고 눈에 띄게 */
.hero-act .btn{padding:17px 32px;font-size:16.5px;border-radius:6px}
.btn-kakao{background:#FEE500;color:#191600}          /* 카카오 브랜드 노랑 */
.btn-kakao:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(254,229,0,.35)}
.btn-tel{background:#fff;color:#0B1220}
.btn-tel:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,255,255,.25)}
.btn i{font-style:normal;font-size:17px;line-height:1}
/* 부차 링크로 내린 "시공사례 보기" */
.hero-sub-link{display:inline-block;margin-top:20px;font-size:14px;font-weight:600;
  color:var(--tx2);border-bottom:1px solid #46597A;padding-bottom:2px;transition:.18s}
.hero-sub-link:hover{color:var(--lit);border-color:var(--lit)}

/* ═════════ 함께한 곳 — 현판 진열 ═════════ */
.clients{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg2);padding:clamp(48px,6vw,76px) 0;text-align:center}
.clients h2{font-size:clamp(22px,3vw,34px);margin-top:12px}
.clients .lead{margin-left:auto;margin-right:auto;margin-top:12px}
.plaques{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.pq{padding:15px 26px;border-radius:5px;font-size:clamp(15px,1.7vw,19px);font-weight:800;
  letter-spacing:-.035em;color:#E6EFF8;
  background:linear-gradient(180deg,#1B2946,#111C31);
  border:1px solid #33455F;border-top-color:#48607F;
  text-shadow:0 0 12px rgba(120,190,255,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .2s,border-color .2s,text-shadow .25s}
.pq:hover{transform:translateY(-3px);border-color:var(--lit);
  text-shadow:0 0 10px var(--glow1),0 0 26px var(--glow2)}
.pq.more{font-family:var(--m);font-size:13.5px;font-weight:600;letter-spacing:.04em;
  color:var(--tx3);text-shadow:none;background:transparent;border-style:dashed}
.pq.more:hover{color:var(--lit);text-shadow:none}

/* ═════════ 인덱스 ═════════ */
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  border-bottom:1px solid var(--line);padding-bottom:16px}
.sec-h h2{margin-top:10px}
.idx-blk{margin-top:36px}
.idx-blk + .idx-blk{margin-top:46px}
.idx-blk h3{font-size:13.5px;font-weight:800;letter-spacing:-.02em;color:var(--tx2);
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.idx-list{list-style:none;margin-top:4px;display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(20px,3vw,48px)}
.idx-list a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 2px;border-bottom:1px solid #1F2B42;font-size:15px;font-weight:600;
  color:var(--tx2);transition:color .16s,padding-left .16s}
.idx-list a:hover{color:var(--lit);padding-left:8px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.chips a{font-family:var(--m);font-size:12.5px;padding:9px 15px;border:1px solid var(--line);
  border-radius:3px;color:var(--tx2);transition:.18s}
.chips a:hover{border-color:var(--lit);color:var(--lit);box-shadow:0 0 14px rgba(53,176,255,.18)}

/* ═════════ 사례 = 사양서 ═════════ */
.works{background:var(--bg2);border-top:1px solid var(--line)}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.spec{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:transform .22s,border-color .22s,box-shadow .25s}
.spec:hover{transform:translateY(-4px);border-color:#3F587E;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.spec .ph{aspect-ratio:4/3;overflow:hidden;background:#111A2C}
.spec .ph img{width:100%;height:100%;object-fit:cover;transition:filter .35s,transform .5s}
.spec:hover .ph img{filter:brightness(1.16) saturate(1.06);transform:scale(1.03)}
.spec.feat{grid-column:span 2}
.spec.feat .ph{aspect-ratio:16/8.2}
.spec-h{padding:16px 17px 12px;border-bottom:1px dashed #263349}
.spec-h .kind{font-family:var(--m);font-size:11px;letter-spacing:.12em;color:var(--lit);font-weight:600}
.spec-h h3{font-size:16.5px;font-weight:800;letter-spacing:-.035em;margin-top:7px;line-height:1.35}
.spec dl{display:grid;grid-template-columns:auto 1fr;padding:12px 17px 16px;
  font-family:var(--m);font-size:11.5px;line-height:1.95}
.spec dt{color:var(--tx3);padding-right:16px;white-space:nowrap}
.spec dd{color:var(--tx2);text-align:right}
.works-more{margin-top:34px;text-align:center}
.fbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;
  padding:14px 18px;background:var(--card);border:1px solid #3A4F70;border-radius:5px}
.fbar[hidden]{display:none}   /* display:flex가 hidden을 이기므로 필수 */
.fbar .fk{font-family:var(--m);font-size:11px;letter-spacing:.14em;color:var(--tx3)}
.fbar b{font-size:16px;font-weight:800;letter-spacing:-.03em;color:var(--lit)}
.fbar .fc{font-family:var(--m);font-size:12.5px;color:var(--tx2)}
.fbar button{margin-left:auto;font-family:var(--f);font-size:13px;font-weight:700;
  color:var(--tx2);background:none;border:1px solid #445A80;border-radius:4px;
  padding:8px 16px;cursor:pointer;transition:.18s}
.fbar button:hover{border-color:var(--lit);color:var(--lit)}
.spec.hide{display:none}
.fempty{margin-top:18px;padding:26px 24px;border:1px dashed #445A80;border-radius:6px;
  text-align:center;color:var(--tx2);font-size:14.5px;line-height:1.9}
.fempty b{color:var(--lit)}
.fempty .fhas a{color:#CBDBEC;border-bottom:1px dotted #5C7392;padding-bottom:1px;
  transition:color .15s,border-color .15s}
.fempty .fhas a:hover{color:var(--lit);border-color:var(--lit)}

/* ═════════ 공정 ═════════ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.step{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.step figure{aspect-ratio:3/2;overflow:hidden;background:#111A2C}
.step figure img{width:100%;height:100%;object-fit:cover}
.step .body{padding:22px 22px 26px}
.step .num{font-family:var(--m);font-size:12px;letter-spacing:.18em;color:var(--lit)}
.step h3{font-size:19px;font-weight:800;letter-spacing:-.04em;margin-top:9px}
.step p{margin-top:10px;font-size:13.5px;color:var(--tx2);line-height:1.66}
.step.plain figure{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#16213A,#16213A 10px,#121B2F 10px,#121B2F 20px)}
.step.plain figure svg{width:66%;height:auto}

/* ═════════ 문의 ═════════ */
.cta{position:relative;overflow:hidden;background:var(--bg2);border-top:1px solid var(--line);text-align:center}
.cta::before{content:"";position:absolute;left:50%;top:-40%;width:900px;height:520px;
  transform:translateX(-50%);background:radial-gradient(ellipse,rgba(29,111,224,.25),transparent 65%)}
.cta .w{position:relative;z-index:2}
.cta h2 em{font-style:normal;color:var(--lit);text-shadow:0 0 22px rgba(53,176,255,.5)}
.cta .lead{margin-left:auto;margin-right:auto}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.cta .note{margin-top:14px;font-family:var(--m);font-size:11.5px;color:var(--tx3)}

/* ═════════ 푸터 ═════════ */
.ft{background:#0A101E;border-top:1px solid var(--line);padding:46px 0 56px;font-size:13px;color:var(--tx3)}
.ft-grid{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.ft b{display:block;color:var(--tx2);font-size:15px;font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.ft .biz{font-family:var(--m);font-size:12px;line-height:2}
.ft-note{margin-top:34px;padding-top:22px;border-top:1px solid #1A2540;
  font-size:11.5px;line-height:1.8;color:#5C7292}
.ft-note strong{color:var(--tx3);font-weight:700}

/* ═════════ 플로팅 문의 (2026-08-14 추가) ═════════
   PC: 우측 하단 세로 스택 / 모바일: 화면 하단 고정 바 2분할
   히어로에는 이미 큰 버튼이 있으므로, 히어로를 지나야 나타난다
   ⚠️ 아임웹에 "맨 위로" 버튼을 켜면 보통 우측 하단에 붙는다. 겹치면 이 값을 좌측으로 되돌리거나
      bottom 값을 키운다(예: bottom:88px). 현 사이트에는 하단 고정 요소가 없어 지금은 문제없다. */
.float{position:fixed;right:22px;bottom:22px;z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .28s ease,transform .28s ease}
.float.show{opacity:1;transform:none;pointer-events:auto}
.float a{display:flex;align-items:center;gap:9px;padding:13px 20px;border-radius:999px;
  font-size:14.5px;font-weight:800;letter-spacing:-.025em;white-space:nowrap;
  box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform .18s,box-shadow .25s}
.float a:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.float i{font-style:normal;font-size:16px;line-height:1}
.float .f-kakao{background:#FEE500;color:#191600}
.float .f-tel{background:#fff;color:#0B1220}

/* ═════════ 반응형 ═════════ */
@media (max-width:1000px){
  .spec-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:14px}
  .hdr nav{display:none}
}
@media (max-width:620px){
  .idx-list{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:1fr}
  .spec.feat{grid-column:auto}
  .spec.feat .ph{aspect-ratio:4/3}
  .sec-h{flex-direction:column;align-items:flex-start;gap:6px}
  .dimcap{max-width:86%}
  /* 플로팅 → 화면 하단 고정 바 (엄지가 닿는 자리) */
  .float{left:0;right:0;bottom:0;flex-direction:row;gap:0;transform:translateY(100%)}
  .float.show{transform:none}
  .float a{flex:1;justify-content:center;border-radius:0;padding:16px 8px;
    font-size:15.5px;box-shadow:0 -4px 18px rgba(0,0,0,.35)}
  .float a:hover{transform:none}
  .ft{padding-bottom:100px}   /* 하단 바에 푸터가 가리지 않게 */
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .sign{color:#EAF7FF;text-shadow:0 0 8px var(--glow1),0 0 26px var(--glow2),0 0 64px var(--glow3)}
}