/* ══════════════════════════════════════════════
   대한엘리베이터 — 화이트 · 기술도면(Blueprint) 시스템
   ══════════════════════════════════════════════ */
:root{
  --ink:#0c1626;
  --navy:#12325e;
  --accent:#0f56b3;
  --accent-2:#1b74e4;
  --accent-soft:#eef4fc;
  --accent-line:#bcd4f2;
  --text:#111a26;
  --text-2:#57616f;
  --text-3:#8c95a3;
  --line:#e4e9f0;
  --line-2:#eef1f6;
  --paper:#ffffff;
  --paper-2:#f7f9fc;
  --blue-print:#9fbde2;
  --kakao:#FEE500;
  --kakao-ink:#191600;
  --wrap:1260px;
  --ease:cubic-bezier(.22,.68,.24,1);
  /* Inter 에는 국문 글리프가 없다. Pretendard 를 바로 뒤에 둬야 국문이
     OS 기본 폰트(Noto Sans KR Thin 등)로 떨어지지 않는다 — 라벨 글씨 깨짐의 원인. */
  --mono:'Inter','Pretendard Variable',Pretendard,ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:146px}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  color:var(--text);background:var(--paper);line-height:1.72;letter-spacing:-.021em;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
.en{font-family:var(--mono);letter-spacing:.16em}

/* ── 도면 텍스처 ── */
.grid-bg{
  background-image:
    linear-gradient(rgba(18,50,94,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,50,94,.045) 1px,transparent 1px);
  background-size:34px 34px;
}

/* ── 리빌 ── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}.d6{transition-delay:.42s}

/* ══ 상단 바 ══ */
.topbar{background:var(--ink);color:rgba(255,255,255,.66);font-size:12.5px;letter-spacing:-.01em;position:relative;z-index:60}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:36px}
.topbar b{color:#fff;font-weight:600}
.topbar .live{display:inline-flex;align-items:center;gap:7px}
.topbar .live i{width:6px;height:6px;border-radius:50%;background:#35d07f;
  box-shadow:0 0 0 3px rgba(53,208,127,.2);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(53,208,127,.2)}50%{box-shadow:0 0 0 6px rgba(53,208,127,0)}}
.topbar ul{display:flex;gap:18px}
.topbar a{transition:color .25s}
.topbar a:hover{color:#fff}

/* ══ 헤더 ══ */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.985);
  border-bottom:1px solid var(--line);transition:box-shadow .4s var(--ease)}
header.solid{box-shadow:0 4px 24px rgba(12,22,38,.06)}
.hd{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto;padding:5px 0;min-width:0}
.logo .mk{width:46px;height:36.8px;flex:0 0 46px;color:var(--navy);
  display:block;transition:.34s var(--ease)}
.logo:hover .mk{opacity:.82}
.logo .mk svg{width:100%;height:100%;display:block;fill:currentColor}
.logo .tx b{display:block;font-size:19px;font-weight:800;letter-spacing:-.05em;line-height:1.22;color:var(--ink)}
.logo .tx span{display:block;font-family:var(--mono);font-size:9.4px;font-weight:600;
  letter-spacing:.085em;white-space:nowrap;color:var(--text-3);margin-top:2px}
.gnb{display:flex;align-items:center;gap:2px}
.gnb > li > a{display:block;padding:10px 13px;font-size:14.6px;font-weight:600;color:var(--text);
  position:relative;transition:color .28s;white-space:nowrap}
.gnb > li > a::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)}
.gnb > li > a:hover{color:var(--accent)}
.gnb > li > a:hover::after{transform:scaleX(1)}
.hd-r{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.hd-tel{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);line-height:1.2;
  transition:border-color .28s var(--ease),background .28s var(--ease),transform .28s var(--ease),
             box-shadow .28s var(--ease)}
.hd-tel .ic{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);transition:background .28s var(--ease)}
.hd-tel .ic svg{width:14px;height:14px;fill:var(--accent);transition:transform .34s var(--ease)}
.hd-tel .tx{display:block;text-align:left}
.hd-tel .tx i{display:block;font-style:normal;font-family:var(--mono);font-size:8.6px;font-weight:600;
  letter-spacing:.2em;color:var(--text-3)}
.hd-tel .tx b{display:block;font-family:var(--mono);font-size:17px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin-top:1px}
.hd-tel:hover,.hd-tel:focus-visible{border-color:var(--accent-line);background:var(--accent-soft);
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,86,179,.12);outline:none}
.hd-tel:hover .ic{background:var(--accent)}
.hd-tel:hover .ic svg{fill:#fff;transform:rotate(-12deg) scale(1.06)}
.burger{display:none;width:44px;height:44px;position:relative;flex:0 0 44px}
.burger i{position:absolute;left:10px;right:10px;height:1.8px;background:var(--ink);
  border-radius:2px;transition:.34s var(--ease)}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:20px}.burger i:nth-child(3){top:26px}
body.nav-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger i:nth-child(2){opacity:0;transform:scaleX(.4)}
body.nav-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ══ 버튼 ══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;
  font-size:14.8px;font-weight:600;letter-spacing:-.025em;border-radius:4px;
  transition:.32s var(--ease);white-space:nowrap;border:1px solid transparent}
.btn svg{width:15px;height:15px;flex:0 0 15px;transition:transform .32s var(--ease)}
.btn:hover svg.ar{transform:translateX(3px)}
.btn-fill{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(15,86,179,.22)}
.btn-fill:hover{background:#0c4693;box-shadow:0 8px 22px rgba(15,86,179,.32);transform:translateY(-1px)}
.btn-kakao{background:var(--kakao);color:var(--kakao-ink);box-shadow:0 4px 14px rgba(254,229,0,.34)}
.btn-kakao:hover{background:#f5dc00;box-shadow:0 8px 22px rgba(254,229,0,.42);transform:translateY(-1px)}
.btn-line{border-color:var(--line);color:var(--text);background:#fff}
.btn-line:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-sm{padding:10px 18px;font-size:13.6px}
.btn-lg{padding:16px 32px;font-size:16px}

/* ══ 모바일 드로어 ══ */
.drawer{position:fixed;inset:0;top:0;z-index:45;background:#fff;padding:100px 30px 40px;
  overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.4s var(--ease)}
body.nav-open{overflow:hidden}
body.nav-open .drawer{opacity:1;visibility:visible;transform:none}
.drawer a.dl{display:flex;justify-content:space-between;align-items:center;font-size:19px;font-weight:700;
  padding:16px 0;border-bottom:1px solid var(--line);letter-spacing:-.04em;
  opacity:0;transform:translateY(12px);transition:.45s var(--ease)}
.drawer a.dl span{font-family:var(--mono);font-size:10px;color:var(--text-3);letter-spacing:.14em;font-weight:600}
body.nav-open .drawer a.dl{opacity:1;transform:none}
.drawer a.dl:nth-child(1){transition-delay:.05s}.drawer a.dl:nth-child(2){transition-delay:.09s}
.drawer a.dl:nth-child(3){transition-delay:.13s}.drawer a.dl:nth-child(4){transition-delay:.17s}
.drawer a.dl:nth-child(5){transition-delay:.21s}.drawer a.dl:nth-child(6){transition-delay:.25s}
.drawer a.dl:nth-child(7){transition-delay:.29s}.drawer a.dl:nth-child(8){transition-delay:.33s}
.dw-cta{display:grid;gap:10px;margin-top:28px}
.dw-tel{display:block;margin-top:26px;padding:22px;background:var(--paper-2);border:1px solid var(--line);border-radius:6px;text-align:center}
.dw-tel b{display:block;font-family:var(--mono);font-size:27px;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.dw-tel span{font-size:13px;color:var(--text-2)}

/* ══ 히어로 ══ */
.hero{position:relative;background:var(--paper);border-bottom:1px solid var(--line);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(18,50,94,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,50,94,.038) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(120% 90% at 68% 45%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 68% 45%,#000 20%,transparent 78%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr .82fr;
  gap:60px;align-items:center;padding:86px 0 0;min-height:600px}
.hero-grid>*{min-width:0}
.h-eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11px;
  font-weight:600;letter-spacing:.24em;color:var(--accent);margin-bottom:26px}
.h-eyebrow i{display:block;width:30px;height:1px;background:var(--accent-line)}
.h-title{font-size:clamp(38px,4.6vw,62px);font-weight:800;line-height:1.24;letter-spacing:-.055em;color:var(--ink)}
.h-title .lt{display:block;font-weight:300;color:var(--text-2);letter-spacing:-.05em}
.h-rule{width:56px;height:2px;background:var(--accent);margin:32px 0 26px}
.h-lead{font-size:17.4px;font-weight:300;line-height:1.92;color:var(--text-2);max-width:520px}
.h-lead b{font-weight:600;color:var(--ink)}
.h-btns{display:flex;gap:11px;margin-top:38px;flex-wrap:wrap}
.h-meta{display:flex;align-items:center;gap:22px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.h-meta .mi{display:block;line-height:1.3;padding:3px 0}
.h-meta .mi span{display:block;font-size:11.5px;color:var(--text-3);font-weight:500;letter-spacing:0}
.h-meta .mi b{display:block;font-family:var(--mono);font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.h-meta .sep{width:1px;height:34px;background:var(--line)}

/* 히어로 현장사진 뷰어 */
.h-shot{position:relative;width:100%;max-width:392px;margin-left:auto}
.shot{position:relative;border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:22px;box-shadow:0 28px 60px -28px rgba(12,22,38,.24)}
.shot::before,.shot::after{content:"";position:absolute;width:11px;height:11px;
  border:1.6px solid var(--accent-line)}
.shot::before{top:-1px;left:-1px;border-right:none;border-bottom:none;border-radius:8px 0 0 0}
.shot::after{bottom:-1px;right:-1px;border-left:none;border-top:none;border-radius:0 0 8px 0}
.shot-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.shot-hd span{font-family:var(--mono);font-size:9.6px;letter-spacing:.17em;color:var(--text-3);font-weight:600}
.shot-hd span:last-child{font-family:inherit;font-size:11.5px;letter-spacing:-.03em;color:var(--text-2)}

.shot-stage{position:relative;aspect-ratio:4/3;border:1px solid var(--line-2);border-radius:5px;
  overflow:hidden;background:var(--paper-2)}
.shot-img{width:100%;height:100%;object-fit:cover;transition:opacity .28s var(--ease)}
.shot.load .shot-img{opacity:.4}
.shot-tag{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:3px;
  background:rgba(12,22,38,.74);color:#fff;font-size:11px;font-weight:600;letter-spacing:-.02em}
.shot-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;
  display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);
  box-shadow:0 4px 14px -5px rgba(12,22,38,.5);opacity:0;transition:.3s var(--ease)}
.shot-nav svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.sn-prev{left:9px}
.sn-next{right:9px}
.shot-stage:hover .shot-nav,.shot-nav:focus-visible{opacity:1}
.shot-nav:hover{background:#fff;color:var(--accent)}

.shot-bar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:13px}
.shot-cap{font-size:13px;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.shot-cnt{flex:none;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;color:var(--text-3)}
.shot-cnt b{color:var(--accent);font-weight:700}

.shot-rail{display:flex;gap:6px;margin-top:12px;padding-bottom:5px;overflow-x:auto;
  scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.shot-rail::-webkit-scrollbar{height:4px}
.shot-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
.sh-th{flex:0 0 54px;height:41px;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  opacity:.5;transition:.3s var(--ease)}
.sh-th img{width:100%;height:100%;object-fit:cover}
.sh-th:hover{opacity:1}
.sh-th.on{opacity:1;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* ══ 히어로 배경 영상 ══
   .hv 가 붙은 히어로만 어두운 영상 배경으로 바뀐다. 상세페이지 서브히어로는 영향 없음. */
.hero.hv{background:var(--ink);border-bottom:none}
.hero.hv::before{display:none}                 /* 도면 그리드 대신 영상이 배경이 된다 */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(7,14,26,.92) 0%,rgba(7,14,26,.84) 34%,
                             rgba(7,14,26,.56) 66%,rgba(7,14,26,.68) 100%)}

/* 배경 영상 정지 버튼 — 10초 넘게 자동 재생되므로 정지 수단이 필요하다 */
.hero.hv .hero-play{position:absolute;right:0;top:24px;z-index:4;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(10,18,32,.55);color:rgba(255,255,255,.8);
  transition:.25s var(--ease)}
.hero.hv .hero-play:hover{background:rgba(10,18,32,.85);color:#fff;border-color:rgba(255,255,255,.5)}
.hero.hv .hero-play svg{width:11px;height:11px;fill:currentColor;stroke:none}

/* 카피 — 어두운 배경용 */
.hero.hv .h-eyebrow{color:#8fbaf0}
.hero.hv .h-eyebrow i{background:rgba(143,186,240,.45)}
.hero.hv .h-title{color:#fff}
.hero.hv .h-title .lt{color:rgba(255,255,255,.72)}
.hero.hv .h-rule{background:var(--accent-2)}
.hero.hv .h-lead{color:rgba(255,255,255,.84)}
.hero.hv .h-lead b{color:#fff}
.hero.hv .h-meta{border-top-color:rgba(255,255,255,.16)}
.hero.hv .h-meta .mi b{color:#fff}
.hero.hv .h-meta .mi span{color:rgba(255,255,255,.74)}
.hero.hv .h-meta .sep{background:rgba(255,255,255,.18)}

/* 현장사진 카드 — 어두운 유리판 */
.hero.hv .shot{background:rgba(11,20,35,.62);border-color:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75)}
.hero.hv .shot::before,.hero.hv .shot::after{border-color:rgba(143,186,240,.45)}
.hero.hv .shot-hd{border-bottom-color:rgba(255,255,255,.16)}
.hero.hv .shot-hd span{color:rgba(255,255,255,.64)}
.hero.hv .shot-hd span:last-child{color:rgba(255,255,255,.74)}
.hero.hv .shot-stage{border-color:rgba(255,255,255,.14);background:rgba(0,0,0,.32)}
.hero.hv .shot-cap{color:#fff}
.hero.hv .shot-cnt{color:rgba(255,255,255,.64)}
.hero.hv .shot-cnt b{color:#8fbaf0}
.hero.hv .sh-th{border-color:rgba(255,255,255,.18)}
.hero.hv .sh-th.on{border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-2)}
.hero.hv .shot-rail{scrollbar-color:rgba(255,255,255,.26) transparent}
.hero.hv .shot-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26)}
.hero.hv .shot-more{border-top-color:rgba(255,255,255,.16);color:rgba(255,255,255,.72)}
.hero.hv .shot-more:hover{color:#8fbaf0}

/* 서비스 바 */
.hero.hv .h-svc{border-top-color:rgba(255,255,255,.14);background:rgba(5,11,21,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero.hv .h-svc li{border-right-color:rgba(255,255,255,.12)}
.hero.hv .h-svc .no{color:rgba(143,186,240,.7)}
.hero.hv .h-svc .nm{color:#fff}
.hero.hv .h-svc .ar{color:rgba(255,255,255,.45)}
.hero.hv .h-svc a:hover{background:rgba(255,255,255,.07)}
.hero.hv .h-svc a:hover .nm{color:#fff}
.hero.hv .h-svc a:hover .ar{color:#8fbaf0}

.shot-more{display:flex;align-items:center;gap:7px;width:100%;margin-top:15px;padding-top:13px;
  border-top:1px dashed var(--line);font-size:12.5px;font-weight:600;letter-spacing:-.035em;
  color:var(--text-2);transition:.3s var(--ease)}
.shot-more svg{width:14px;height:14px;margin-left:auto;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:.3s var(--ease)}
.shot-more:hover{color:var(--accent)}
.shot-more:hover svg{transform:translateX(3px)}
@media (hover:none){.shot-nav{opacity:1}}

.h-svc{position:relative;z-index:2;border-top:1px solid var(--line);margin-top:74px}
.h-svc ul{display:grid;grid-template-columns:repeat(4,1fr)}
.h-svc li{border-right:1px solid var(--line)}
.h-svc li:last-child{border-right:none}
.h-svc a{display:flex;align-items:center;gap:14px;padding:28px 24px;transition:.36s var(--ease);position:relative}
.h-svc a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.h-svc a:hover{background:var(--paper-2)}
.h-svc a:hover::before{transform:scaleX(1)}
.h-svc .no{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--accent-line)}
.h-svc .nm{font-size:16px;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.h-svc .ar{margin-left:auto;color:var(--text-3);transition:.36s var(--ease)}
.h-svc a:hover .ar{color:var(--accent);transform:translateX(3px)}
.h-svc svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ══ 섹션 프레임 ══ */
section{padding:130px 0;position:relative}
.sec-h{margin-bottom:64px;max-width:780px}
.sec-h .num{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.6px;
  font-weight:600;letter-spacing:.26em;color:var(--accent);margin-bottom:20px}
.sec-h .num i{width:26px;height:1px;background:var(--accent-line)}
.sec-h h2{font-size:clamp(29px,3.3vw,44px);font-weight:800;letter-spacing:-.055em;line-height:1.3;color:var(--ink)}
.sec-h h2 .lt{font-weight:300;color:var(--text-2)}
.sec-h h2 em{font-style:normal;color:var(--accent)}
.sec-h p{margin-top:20px;font-size:16.6px;color:var(--text-2);font-weight:300;line-height:1.9}
.sec-h.ctr{margin-left:auto;margin-right:auto;text-align:center}
.sec-h.wide{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;max-width:none}
.sec-h.wide > div{max-width:720px}
.dark .sec-h h2{color:#fff}
.dark .sec-h h2 .lt{color:rgba(255,255,255,.6)}
.dark .sec-h p{color:rgba(255,255,255,.66)}
.dark .sec-h .num{color:#7fb0f0}
.dark .sec-h .num i{background:rgba(127,176,240,.4)}

/* ══ 차별화 선언 밴드 ══ */
.claim{background:var(--ink);color:#fff;padding:clamp(104px,17vh,196px) 0;overflow:hidden;position:relative}
.claim::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 78% 0%,rgba(27,116,228,.26),transparent 62%)}
.claim::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.038) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 40%,transparent)}
.claim .wrap{position:relative;z-index:2}
.claim .cl-top{font-family:var(--mono);font-size:10.6px;font-weight:600;letter-spacing:.3em;
  color:#7fb0f0;margin-bottom:42px}
.claim h2{font-size:clamp(36px,6.4vw,88px);font-weight:800;letter-spacing:-.065em;line-height:1.2;max-width:18ch;text-wrap:balance}
.claim h2 em{font-style:normal;position:relative;white-space:nowrap;color:#fff}
.claim h2 em::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.08em;
  background:linear-gradient(90deg,#1b74e4,rgba(27,116,228,.15));border-radius:3px;
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .35s}
.claim h2.in em::after{transform:scaleX(1)}
.claim p{margin-top:clamp(34px,4.4vh,56px);font-size:clamp(17px,1.75vw,23px);font-weight:300;
  line-height:1.86;color:rgba(255,255,255,.72);max-width:38ch;text-wrap:balance}
.cl-pts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:60px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:6px;overflow:hidden}
.cl-pt{background:rgba(255,255,255,.028);padding:32px 30px;transition:.4s var(--ease)}
.cl-pt:hover{background:rgba(255,255,255,.07)}
.cl-pt b{display:block;font-size:17.5px;font-weight:700;letter-spacing:-.04em;margin-bottom:11px}
.cl-pt span{font-size:14.4px;font-weight:300;line-height:1.82;color:rgba(255,255,255,.62)}

/* ══ 서비스 5 ══ */
.svcs{background:var(--paper-2);border-top:1px solid var(--line)}
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sv{background:#fff;border:1px solid var(--line);border-radius:8px;padding:36px 32px 32px;
  position:relative;overflow:hidden;transition:.45s var(--ease);display:flex;flex-direction:column}
.sv::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.sv:hover{transform:translateY(-6px);box-shadow:0 26px 54px -22px rgba(12,22,38,.22);border-color:var(--accent-line)}
.sv:hover::before{transform:scaleX(1)}
.sv .hd-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px}
.sv .no{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--accent);
  padding:6px 11px;background:var(--accent-soft);border-radius:3px}
.sv .ic{width:46px;height:46px;color:var(--navy);opacity:.9}
.sv .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round}
.sv h3{font-size:21.5px;font-weight:800;letter-spacing:-.05em;margin-bottom:12px;color:var(--ink)}
.sv > p{font-size:14.8px;color:var(--text-2);font-weight:300;line-height:1.84;flex:1}
.sv ul{margin-top:24px;padding-top:22px;border-top:1px solid var(--line-2);display:grid;gap:7px}
.sv li{font-size:13.6px;color:var(--text-2);padding-left:17px;position:relative;line-height:1.66}
.sv li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;
  border:1.4px solid var(--accent-line)}
.sv .go{margin-top:24px;display:inline-flex;align-items:center;gap:7px;font-size:13.8px;
  font-weight:600;color:var(--accent);transition:gap .3s var(--ease)}
.sv:hover .go{gap:12px}
.sv .go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.sv.wide{grid-column:span 3;flex-direction:row;align-items:center;gap:44px;padding:40px}
.sv.wide .bodyc{flex:1}
.sv.wide ul{margin-top:0;padding-top:0;border-top:none;grid-template-columns:repeat(2,1fr);
  gap:9px 26px;flex:0 0 42%}

/* ══ 7대 안전장치 (다크 도면) ══ */
.safe{background:#0a1220;color:#fff;position:relative;overflow:hidden}
.safe::before{content:"";position:absolute;inset:0;opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:40px 40px}
.safe::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 30% 12%,rgba(27,116,228,.2),transparent 62%)}
.safe .wrap{position:relative;z-index:2}
.sf-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center}
.sf-plate{position:relative;border:1px solid rgba(255,255,255,.13);border-radius:10px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.014));padding:30px}
.sf-plate .cap{display:flex;justify-content:space-between;margin-bottom:18px;
  padding-bottom:14px;border-bottom:1px dashed rgba(255,255,255,.18)}
.sf-plate .cap span{font-family:var(--mono);font-size:9.6px;letter-spacing:.18em;
  color:rgba(255,255,255,.42);font-weight:600}
.sf-svg{width:100%;height:auto}
.d-line{stroke:rgba(159,189,226,.42);stroke-width:1;fill:none}
.d-dash{stroke:rgba(159,189,226,.3);stroke-width:1;fill:none;stroke-dasharray:4 4}
.d-solid{stroke:#cfe0f5;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.d-fill{fill:rgba(27,116,228,.14)}
.d-tx{font-family:'Inter',sans-serif;font-size:7.2px;font-weight:600;letter-spacing:.1em;fill:rgba(255,255,255,.4)}
.d-kr{font-size:9.6px;font-weight:600;letter-spacing:-.03em;fill:rgba(255,255,255,.5)}
.hot{cursor:pointer}
.hot circle.ring{fill:rgba(27,116,228,.2);stroke:#5aa0f5;stroke-width:1.4;transition:.35s var(--ease)}
.hot text{font-family:'Inter',sans-serif;font-size:9px;font-weight:700;fill:#fff;
  text-anchor:middle;dominant-baseline:central;pointer-events:none}
.hot:hover circle.ring,.hot.on circle.ring{fill:#1b74e4;stroke:#fff;stroke-width:1.8;r:12}
.sf-list{display:grid;gap:1px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden}
.sf-item{background:rgba(255,255,255,.028);padding:20px 24px;display:flex;gap:18px;
  align-items:flex-start;cursor:pointer;transition:.36s var(--ease);position:relative}
.sf-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent-2);
  transform:scaleY(0);transition:transform .36s var(--ease)}
.sf-item:hover,.sf-item.on{background:rgba(27,116,228,.13)}
.sf-item:hover::before,.sf-item.on::before{transform:scaleY(1)}
.sf-item .n{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:700;
  border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.7);transition:.36s var(--ease)}
.sf-item:hover .n,.sf-item.on .n{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.sf-item b{display:block;font-size:16.4px;font-weight:700;letter-spacing:-.04em;margin-bottom:6px}
.sf-item b .alt{display:block;margin-top:3px;font-style:normal;font-size:11.8px;font-weight:400;
  letter-spacing:-.01em;color:rgba(255,255,255,.42)}
.sf-item .ref{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10.2px;
  font-style:normal;letter-spacing:.06em;color:rgba(127,176,240,.8);
  border:1px solid rgba(127,176,240,.3);padding:3px 8px;border-radius:3px}
.sf-item span{font-size:13.8px;font-weight:300;line-height:1.74;color:rgba(255,255,255,.6)}
.sf-note{margin-top:26px;padding:22px 26px;border-radius:8px;
  background:rgba(27,116,228,.12);border:1px solid rgba(27,116,228,.3);
  font-size:14.4px;font-weight:300;line-height:1.86;color:rgba(255,255,255,.82)}
.sf-note b{font-weight:700;color:#fff}
.sf-src{margin-top:14px;font-size:12.6px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.42)}

/* ══ 철학 (Mission / Vision / Value) ══ */
.phil{background:#fff}
.ph-mv{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.ph-card{border:1px solid var(--line);border-radius:8px;padding:44px 40px;position:relative;
  overflow:hidden;transition:.45s var(--ease);background:#fff}
.ph-card::after{content:"";position:absolute;right:-40px;bottom:-40px;width:170px;height:170px;
  border-radius:50%;background:var(--accent-soft);opacity:0;transition:.6s var(--ease)}
.ph-card:hover{border-color:var(--accent-line);box-shadow:0 22px 48px -24px rgba(12,22,38,.2)}
.ph-card:hover::after{opacity:1;transform:scale(1.15)}
.ph-card > *{position:relative;z-index:2}
.ph-card .lb{display:inline-block;font-family:var(--mono);font-size:10.4px;font-weight:700;
  letter-spacing:.28em;color:var(--accent);padding:6px 12px;border:1px solid var(--accent-line);
  border-radius:3px;margin-bottom:24px}
.ph-card h3{font-size:clamp(21px,2.3vw,29px);font-weight:800;letter-spacing:-.055em;line-height:1.42;color:var(--ink)}
.ph-card p{margin-top:16px;font-size:15.4px;font-weight:300;line-height:1.88;color:var(--text-2)}
.ph-vals{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ph-val{background:#fff;padding:40px 28px;text-align:center;transition:.42s var(--ease)}
.ph-val:hover{background:var(--accent-soft)}
.ph-val .ic{width:38px;height:38px;margin:0 auto 20px;color:var(--accent)}
.ph-val .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round}
.ph-val .en{display:block;font-size:11.4px;font-weight:700;letter-spacing:.24em;color:var(--accent);margin-bottom:9px}
.ph-val b{display:block;font-size:19px;font-weight:800;letter-spacing:-.05em;color:var(--ink)}
.ph-val span{display:block;margin-top:9px;font-size:13.4px;font-weight:300;line-height:1.72;color:var(--text-2)}

/* ══ 교체 vs 리모델링 비교 ══ */
.cmp{background:var(--paper-2);border-top:1px solid var(--line)}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative}
.cmp-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;
  box-shadow:0 10px 26px rgba(12,22,38,.26);border:3px solid var(--paper-2)}
.cmp-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:40px 36px;transition:.45s var(--ease)}
.cmp-card:hover{box-shadow:0 24px 52px -26px rgba(12,22,38,.22);border-color:var(--accent-line)}
.cmp-card .tag{display:inline-block;font-size:12.2px;font-weight:700;letter-spacing:-.02em;
  padding:6px 13px;border-radius:3px;margin-bottom:20px}
.cmp-card.a .tag{background:var(--accent-soft);color:var(--accent)}
.cmp-card.b .tag{background:#f2f4f7;color:var(--text-2)}
.cmp-card h3{font-size:24px;font-weight:800;letter-spacing:-.055em;color:var(--ink);margin-bottom:12px}
.cmp-card > p{font-size:15px;font-weight:300;line-height:1.86;color:var(--text-2);min-height:58px}
.cmp-rows{margin-top:26px;border-top:1px solid var(--line-2)}
.cmp-row{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--line-2)}
.cmp-row dt{flex:0 0 96px;font-size:12.6px;font-weight:600;color:var(--text-3);letter-spacing:0;padding-top:1px}
.cmp-row dd{font-size:14.4px;font-weight:400;color:var(--text);line-height:1.72}
.cmp-foot{margin-top:24px;font-size:13.6px;font-weight:300;line-height:1.8;color:var(--text-2);
  padding:16px 18px;background:var(--paper-2);border-radius:5px;border-left:2px solid var(--accent-line)}

/* ══ 시공사례 ══ */
.works{background:#fff}
.wk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wk{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;
  transition:.45s var(--ease);display:block}
.wk:hover{transform:translateY(-5px);box-shadow:0 26px 54px -26px rgba(12,22,38,.24);border-color:var(--accent-line)}
.wk .thumb{position:relative;aspect-ratio:4/3;background:var(--paper-2);border-bottom:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden}
.wk .thumb::before{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(18,50,94,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,50,94,.05) 1px,transparent 1px);
  background-size:26px 26px}
.wk .thumb img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.wk:hover .thumb img{transform:scale(1.04)}
.wk .thumb .badge{position:absolute;z-index:3;left:16px;top:16px;font-size:11.6px;font-weight:700;
  padding:5px 11px;border-radius:3px;background:rgba(255,255,255,.94);color:var(--accent);
  border:1px solid var(--accent-line);letter-spacing:-.02em}
.wk .info{padding:24px 24px 26px}
.wk .info .mt{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.wk .info .cat{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--text-3)}
.wk .info .dt{font-family:var(--mono);font-size:11.4px;font-weight:500;color:var(--text-3)}
.wk .info h3{font-size:18.4px;font-weight:700;letter-spacing:-.05em;color:var(--ink);margin-bottom:8px}
.wk .info p{font-size:13.8px;font-weight:300;line-height:1.76;color:var(--text-2)}
.wk-more{margin-top:44px;text-align:center}

/* ══ 게시판 (기술자료 / 고객지원) ══ */
.board{background:var(--paper-2);border-top:1px solid var(--line)}
.bd-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bd-grid > *{min-width:0}
.bd-box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:34px 32px;min-width:0}
.bd-hd{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-bottom:20px;border-bottom:1.5px solid var(--ink);margin-bottom:6px}
.bd-hd h3{font-size:19.5px;font-weight:800;letter-spacing:-.05em;color:var(--ink);min-width:0}
.bd-hd a{display:inline-flex;align-items:center;gap:6px;font-size:12.8px;font-weight:600;
  color:var(--text-3);transition:.3s;flex:0 0 auto;white-space:nowrap}
.bd-hd a:hover{color:var(--accent)}
.bd-hd svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.bd-li{display:flex;align-items:center;gap:12px;padding:16px 4px;min-width:0;border-bottom:1px solid var(--line-2);transition:.3s}
.bd-li:last-child{border-bottom:none}
.bd-li:hover{background:var(--paper-2);padding-left:10px;padding-right:0}
.bd-li .tg{flex:0 0 auto;font-size:11.4px;font-weight:700;padding:4px 9px;border-radius:3px;
  background:var(--accent-soft);color:var(--accent);letter-spacing:-.02em}
.bd-li .tg.g{background:#f2f4f7;color:var(--text-2)}
.bd-li .tt{flex:1 1 auto;min-width:0;font-size:14.8px;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .3s}
.bd-li:hover .tt{color:var(--accent)}
.bd-li .dt{flex:0 0 auto;font-family:var(--mono);font-size:11.6px;color:var(--text-3);font-weight:500}

/* ══ 견적문의 ══ */
.contact{background:#fff;border-top:1px solid var(--line)}
.ct-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:64px;align-items:start}
.ct-info dl{margin-top:38px;border-top:1px solid var(--line)}
.ct-info .row{display:flex;gap:20px;padding:17px 0;border-bottom:1px solid var(--line-2)}
.ct-info dt{flex:0 0 108px;font-size:13.2px;font-weight:600;color:var(--text-3);letter-spacing:0;padding-top:2px}
.ct-info dd{font-size:15.2px;font-weight:400;color:var(--text);line-height:1.7}
.ct-info dd b{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.ct-info dd small{font-size:13px;color:var(--text-2);font-weight:300;margin-left:6px}
.ct-cta{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}

.qf{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:40px}
.qf h3{font-size:22px;font-weight:800;letter-spacing:-.05em;color:var(--ink);margin-bottom:8px}
.qf .sb{font-size:14.4px;font-weight:300;color:var(--text-2);margin-bottom:30px;line-height:1.8}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{margin-bottom:16px}
.f label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:8px;letter-spacing:0}
.f label i{font-style:normal;color:#d33;margin-left:2px}
.f input,.f select,.f textarea{width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:5px;background:#fff;font-size:14.8px;font-weight:400;transition:.28s var(--ease);
  outline:none;letter-spacing:-.02em}
.f input::placeholder,.f textarea::placeholder{color:#b4bcc7;font-weight:300}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(15,86,179,.1)}
.f textarea{resize:vertical;min-height:112px;line-height:1.72}
.f select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238c95a3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.agree{display:flex;align-items:flex-start;gap:10px;margin:6px 0 22px;font-size:13.4px;
  color:var(--text-2);font-weight:300;line-height:1.7}
.agree input{width:17px;height:17px;flex:0 0 17px;margin-top:3px;accent-color:var(--accent);cursor:pointer}
.agree a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.qf .btn{width:100%}
.fmsg{display:none;margin-top:16px;padding:15px 18px;border-radius:5px;font-size:14px;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);font-weight:500}
.fmsg.err{background:#fdf3ef;color:#a52d0c;border-color:#f0cdc0}
.fmsg b{font-weight:700;color:inherit}
.qf .btn[disabled]{opacity:.6;pointer-events:none}

/* ══ 푸터 ══ */
footer{background:var(--ink);color:rgba(255,255,255,.56);padding:76px 0 34px;font-size:14px}
.ft-top{display:grid;grid-template-columns:1.15fr 1.5fr .9fr;gap:52px;
  padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.11)}
.ft-logo{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.ft-logo .mk{width:45px;height:36px;flex:0 0 45px;color:#fff;display:block}
.ft-logo .mk svg{width:100%;height:100%;display:block;fill:currentColor}
/* 감싸개(.tx)까지 mono 가 걸리면 국문 b 가 Inter 를 상속받아 폴백 폰트로 깨진다.
   헤더(.logo .tx)와 똑같이 영문 줄에만 mono 를 건다. */
.ft-logo .tx b{display:block;font-size:18px;font-weight:800;color:#fff;letter-spacing:-.05em;line-height:1.22}
.ft-logo .tx span{display:block;font-family:var(--mono);font-size:9.2px;font-weight:600;
  letter-spacing:.085em;white-space:nowrap;color:rgba(255,255,255,.42);margin-top:2px}
.ft-slogan{font-size:15px;font-weight:300;line-height:1.86;color:rgba(255,255,255,.62);max-width:290px}
.ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ft-col h4{font-size:13px;font-weight:700;color:#fff;letter-spacing:0;margin-bottom:16px}
.ft-col a{display:block;padding:5px 0;font-size:13.6px;font-weight:300;transition:color .26s}
.ft-col a:hover{color:#fff}
.ft-tel b{display:block;font-family:var(--mono);font-size:29px;font-weight:700;color:#fff;
  letter-spacing:-.04em;line-height:1.16}
.ft-tel span{display:block;margin-top:8px;font-size:13px;font-weight:300;color:rgba(255,255,255,.5)}
.ft-tel .btn{margin-top:20px}
.ft-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;padding-top:30px;flex-wrap:wrap}
.ft-bot p{font-size:12.8px;font-weight:300;line-height:1.86;color:rgba(255,255,255,.44)}
.ft-lk{display:flex;gap:20px;margin-bottom:12px;justify-content:flex-end}
.ft-lk a{font-size:12.8px;font-weight:500;color:rgba(255,255,255,.66);transition:color .26s}
.ft-lk a:hover{color:#fff}
.ft-cr{font-family:var(--mono);font-size:11.4px;letter-spacing:.04em;text-align:right;color:rgba(255,255,255,.34)}

/* ══ 플로팅 ══ */
.float{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;flex-direction:column;gap:9px}
.float a,.float button{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(12,22,38,.14);
  transition:.34s var(--ease);color:var(--text-2);position:relative}
.float a:hover,.float button:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(12,22,38,.2)}
.float svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.float .pri{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 24px rgba(15,86,179,.34)}
.float .kko{background:var(--kakao);border-color:var(--kakao);color:var(--kakao-ink);box-shadow:0 8px 24px rgba(254,229,0,.36)}
.float .kko svg{fill:currentColor;stroke:none}
.float .top{opacity:0;visibility:hidden;transform:translateY(8px)}
.float .top.on{opacity:1;visibility:visible;transform:none}
.float .tip{position:absolute;right:62px;top:50%;transform:translateY(-50%);white-space:nowrap;
  background:var(--ink);color:#fff;font-size:12.4px;font-weight:500;padding:7px 12px;border-radius:4px;
  opacity:0;visibility:hidden;transition:.3s var(--ease);pointer-events:none;letter-spacing:-.02em}
.float a:hover .tip{opacity:1;visibility:visible;right:58px}

/* ── 데이터 표 (점검항목 · 대응기준 · 자료실) ── */
.dtb-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.dtb{width:100%;min-width:660px;border-collapse:collapse;font-size:14.6px}
.dtb th,.dtb td{padding:15px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-2);line-height:1.74}
.dtb thead th{background:var(--paper-2);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.6px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.dtb tbody tr:last-child td{border-bottom:none}
.dtb tbody th{width:190px;font-weight:700;letter-spacing:-.04em;color:var(--ink);background:var(--paper-2)}
.dtb tbody th small{display:block;margin-top:3px;font-family:var(--mono);font-size:10.6px;
  font-weight:500;letter-spacing:.08em;color:var(--text-3)}
.dtb td{color:var(--text-2);font-weight:300}
.dtb td b{font-weight:600;color:var(--text)}
.dtb ul{list-style:none}
.dtb ul li{position:relative;padding-left:13px;margin-bottom:4px}
.dtb ul li:last-child{margin-bottom:0}
.dtb ul li::before{content:"";position:absolute;left:0;top:11px;width:4px;height:1px;background:var(--accent-line)}
.dtb .cyc{white-space:nowrap;font-weight:500;color:var(--text)}
.dtb .lv{white-space:nowrap}
.lvtag{display:inline-block;font-size:11.4px;font-weight:700;letter-spacing:-.02em;
  padding:4px 10px;border-radius:3px;background:var(--accent-soft);color:var(--accent)}
.lvtag.hot{background:#fdeceb;color:#b3261e}
.lvtag.mid{background:#fdf3e2;color:#96570a}
.lvtag.low{background:#f2f4f7;color:var(--text-2)}

/* ── 프로세스 스텝 ── */
.steps{counter-reset:st;border-top:1px solid var(--line)}
.step{counter-increment:st;display:grid;grid-template-columns:64px 1fr;gap:24px;
  padding:28px 0;border-bottom:1px solid var(--line-2);position:relative}
.step:last-child{border-bottom:none}
.step::before{content:counter(st,decimal-leading-zero);
  font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.04em;
  color:var(--accent-line);line-height:1.2}
.step h4{font-size:17.2px;font-weight:700;letter-spacing:-.045em;color:var(--ink);line-height:1.5}
.step .tl{display:block;margin-top:5px;font-size:13px;font-weight:500;
  letter-spacing:-.03em;color:var(--accent)}
.step ul{margin-top:12px;list-style:none}
.step ul li{position:relative;padding-left:15px;margin-bottom:6px;
  font-size:14.6px;font-weight:300;line-height:1.8;color:var(--text-2)}
.step ul li:last-child{margin-bottom:0}
.step ul li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:1px;background:var(--accent-line)}
.step ul li b{font-weight:600;color:var(--text)}

/* ── 체크리스트 ── */
.chk{display:grid;gap:12px}
.chk li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;
  border:1px solid var(--line);border-radius:7px;padding:18px 20px;background:#fff;
  transition:.34s var(--ease)}
.chk li:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.chk li::before{content:"";width:20px;height:20px;margin-top:3px;border-radius:4px;
  border:1.5px solid var(--accent-line);background:#fff;
  background-image:linear-gradient(45deg,transparent 44%,var(--accent) 44%,var(--accent) 56%,transparent 56%),
                   linear-gradient(-45deg,transparent 44%,var(--accent) 44%,var(--accent) 56%,transparent 56%);
  background-size:9px 2px,9px 2px;background-position:4px 10px,8px 10px;background-repeat:no-repeat}
.chk b{display:block;font-size:15.4px;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.chk span{display:block;margin-top:4px;font-size:14.2px;font-weight:300;line-height:1.78;color:var(--text-2)}
.chk-note{margin-top:16px;font-size:14.2px;font-weight:300;color:var(--text-2);
  padding:15px 18px;background:var(--paper-2);border-radius:5px;border-left:2px solid var(--accent)}
.chk-note b{font-weight:600;color:var(--ink)}

/* ── 강조 안내 박스 ── */
.callout{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:7px;
  padding:22px 24px;margin-top:22px}
.callout.warn{border-color:#f0d5a8;background:#fdf6e9}
.callout b.hd{display:block;font-size:15px;font-weight:700;letter-spacing:-.04em;
  color:var(--navy);margin-bottom:7px}
.callout.warn b.hd{color:#8a5107}
.callout p{font-size:14.4px;font-weight:300;line-height:1.84;color:var(--text-2)}
.callout p + p{margin-top:8px}
.callout p b{font-weight:600;color:var(--text)}

/* ── FAQ 아코디언 ── */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;gap:14px;align-items:flex-start;padding:20px 2px;cursor:pointer;
  list-style:none;transition:.3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";flex:0 0 auto;font-family:var(--mono);font-size:13px;
  font-weight:700;color:var(--accent);line-height:1.72}
.faq summary b{flex:1 1 auto;font-size:15.8px;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.faq summary::after{content:"";flex:0 0 auto;width:11px;height:11px;margin-top:8px;
  border-right:1.6px solid var(--text-3);border-bottom:1.6px solid var(--text-3);
  transform:rotate(45deg);transition:.32s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
.faq summary:hover b{color:var(--accent)}
.faq .a{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:0 2px 22px}
.faq .a::before{content:"A";font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text-3)}
.faq .a p{font-size:14.8px;font-weight:300;line-height:1.86;color:var(--text-2)}

/* ── 필터 탭 ── */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.filters button{font-size:13.8px;font-weight:600;letter-spacing:-.035em;
  padding:9px 17px;border-radius:99px;border:1px solid var(--line);background:#fff;
  color:var(--text-2);transition:.3s var(--ease)}
.filters button:hover{border-color:var(--accent-line);color:var(--accent)}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.filters button .n{font-family:var(--mono);font-size:11px;margin-left:6px;opacity:.55}

/* ── 시공사례 프로젝트 카드 ── */
.prjs{display:grid;gap:18px}
.prj{border:1px solid var(--line);border-radius:9px;background:#fff;padding:30px 32px;
  transition:.4s var(--ease)}
.prj:hover{border-color:var(--accent-line);box-shadow:0 20px 46px -28px rgba(12,22,38,.28)}
.prj .tag{display:inline-block;font-size:11.8px;font-weight:700;letter-spacing:-.02em;
  padding:5px 11px;border-radius:3px;background:var(--accent-soft);color:var(--accent);margin-bottom:14px}
.prj h3{font-size:20px;font-weight:700;letter-spacing:-.05em;color:var(--ink);line-height:1.45}
.prj .meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;padding-top:13px;
  border-top:1px solid var(--line-2)}
.prj .meta div{font-size:13.6px;font-weight:300;color:var(--text-2)}
.prj .meta dt{display:inline;font-family:var(--mono);font-size:10.4px;font-weight:600;
  letter-spacing:.14em;color:var(--text-3);text-transform:uppercase;margin-right:7px}
.prj .meta dd{display:inline;color:var(--text)}
.prj ul{margin-top:16px;list-style:none}
.prj ul li{position:relative;padding-left:15px;margin-bottom:6px;
  font-size:14.6px;font-weight:300;line-height:1.8;color:var(--text-2)}
.prj ul li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:1px;background:var(--accent-line)}
.prj ul li b{font-weight:600;color:var(--text)}
.prj .res{margin-top:16px;padding:14px 17px;background:var(--paper-2);border-radius:5px;
  border-left:2px solid var(--accent);font-size:14.2px;font-weight:300;color:var(--text-2)}
.prj .res b{font-weight:600;color:var(--ink)}
.prj-note{margin-top:20px;font-size:13.4px;font-weight:300;color:var(--text-3);line-height:1.8}

/* ── 게시글 아코디언 ── */
.posts{border-top:2px solid var(--ink)}
.posts details{border-bottom:1px solid var(--line)}
.posts summary{display:flex;align-items:center;gap:13px;padding:19px 4px;cursor:pointer;
  list-style:none;transition:.3s var(--ease);min-width:0}
.posts summary::-webkit-details-marker{display:none}
.posts summary:hover{background:var(--paper-2);padding-left:10px}
.posts .tg{flex:0 0 auto;font-size:11.4px;font-weight:700;padding:4px 9px;border-radius:3px;
  background:var(--accent-soft);color:var(--accent);letter-spacing:-.02em}
.posts .tg.g{background:#f2f4f7;color:var(--text-2)}
.posts .tt{flex:1 1 auto;min-width:0;font-size:15px;font-weight:500;color:var(--text);
  letter-spacing:-.035em;transition:color .3s}
.posts summary:hover .tt{color:var(--accent)}
.posts .dt{flex:0 0 auto;font-family:var(--mono);font-size:11.6px;color:var(--text-3);font-weight:500}
.posts .bd{padding:6px 4px 32px;border-top:1px dashed var(--line)}
.posts .bd .by{display:flex;gap:16px;padding:13px 0 20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-3)}
.posts .bd p{font-size:15px;font-weight:300;line-height:1.9;color:var(--text-2)}
.posts .bd p + p{margin-top:14px}
.posts .bd p b{font-weight:600;color:var(--ink)}
.posts .bd h4{margin:26px 0 10px;font-size:16px;font-weight:700;
  letter-spacing:-.045em;color:var(--ink)}
.posts .bd ul{margin-top:10px;list-style:none}
.posts .bd ul li{position:relative;padding-left:15px;margin-bottom:7px;
  font-size:14.8px;font-weight:300;line-height:1.82;color:var(--text-2)}
.posts .bd ul li b{font-weight:600;color:var(--text)}
.posts .bd ul li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:1px;background:var(--accent-line)}
.posts .bd ol{margin-top:10px;padding-left:20px}
.posts .bd ol li{margin-bottom:7px;font-size:14.8px;font-weight:300;line-height:1.82;color:var(--text-2)}
.posts .bd ol li b{font-weight:600;color:var(--text)}

/* ── 자료실 다운로드 ── */
.ftag{display:inline-block;font-family:var(--mono);font-size:10.4px;font-weight:600;
  letter-spacing:.08em;padding:3px 8px;border-radius:3px;background:#f2f4f7;color:var(--text-2)}
.ftag.pdf{background:#fdeceb;color:#b3261e}
.ftag.hwp{background:#e9f1fc;color:#0f56b3}
.dl-go{display:inline-flex;align-items:center;gap:6px;font-size:13.2px;font-weight:600;
  letter-spacing:-.03em;color:var(--accent);white-space:nowrap}
.dl-go svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:.3s var(--ease)}
.dl-go:hover svg{transform:translate(2px,-2px)}

/* ── 신규 컴포넌트 반응형 ── */
@media (max-width:720px){
  .step{grid-template-columns:44px 1fr;gap:16px}
  .step::before{font-size:18px}
  .prj{padding:24px 22px}
  .prj h3{font-size:18px}
  .posts .dt{display:none}
  .faq summary b{font-size:15px}
}

/* ── 인사말 서명 ── */
.blk-b .sign{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  font-size:15.4px;font-weight:300;color:var(--text-2);letter-spacing:-.03em}
.blk-b .sign b{font-weight:700;color:var(--ink);font-size:17px;margin-left:4px}

/* ── 핵심가치 슬로건 ── */
.ph-val .sl{margin-top:12px;font-size:14.6px;font-weight:600;letter-spacing:-.04em;
  color:var(--ink);line-height:1.6}
.ph-val .ds{margin-top:8px;font-size:13.8px;font-weight:300;line-height:1.82;color:var(--text-2)}

/* ── 오시는길 주소 ── */
.mp-ad{font-size:13.6px;font-weight:300;color:var(--text-3);letter-spacing:-.03em}

/* ── 견적폼 추가 요소 ── */
.qf .qf-lead{margin:-6px 0 26px;font-size:14.4px;font-weight:300;line-height:1.82;color:var(--text-2)}
.fsep{display:flex;align-items:center;gap:14px;margin:8px 0 4px}
.fsep::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.fsep span{flex:0 0 auto;font-family:var(--mono);font-size:10.4px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.f .hint{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:5px;
  border-radius:50%;background:var(--accent-soft);color:var(--accent);
  font-size:10.5px;font-weight:700;vertical-align:1px;transition:.28s var(--ease)}
.f .hint:hover,.f .hint[aria-expanded="true"]{background:var(--accent);color:#fff}
.fchk{display:inline-flex;align-items:center;gap:8px;margin-top:9px;cursor:pointer;
  font-size:13.4px;font-weight:400;color:var(--text-2);letter-spacing:-.03em}
.fchk input{width:16px;height:16px;flex:none;accent-color:var(--accent);cursor:pointer}
.fchk:hover span{color:var(--accent)}
.f input:disabled{background:var(--paper-2);color:var(--text-3);cursor:not-allowed}
.fhelp{display:none;margin-top:8px;padding:12px 14px;border-radius:5px;
  background:var(--accent-soft);border-left:2px solid var(--accent);
  font-size:13.2px;font-weight:300;line-height:1.75;color:var(--text-2)}
.fhelp.on{display:block}
.fhelp b{font-weight:600;color:var(--ink)}
.fnote{padding:14px 16px;border:1px dashed var(--line);border-radius:6px;background:var(--paper-2);
  font-size:13.4px;font-weight:300;line-height:1.78;color:var(--text-2)}
.fnote b{font-weight:600;color:var(--ink)}

/* ── 필터 숨김 · 빈 분류 ── */
.prj[hidden]{display:none}
.dtb tr[hidden]{display:none}
.tc-lead{font-size:16px;font-weight:300;line-height:1.9;color:var(--text-2);margin-bottom:26px}
.tc-lead b{font-weight:600;color:var(--text)}
.tc-empty{display:none;padding:52px 20px;text-align:center;font-size:14.6px;
  font-weight:300;color:var(--text-3);border-top:1px solid var(--line-2)}
.tc-empty.on{display:block}

/* ── 하단 배너 보조 문구 ── */
.cta-band .sub{margin-top:14px;max-width:46ch;font-size:14.8px;font-weight:300;
  line-height:1.82;color:rgba(255,255,255,.66)}

/* ══ 반응형 ══ */
@media (max-width:1180px){
  .gnb > li > a{padding:10px 9px;font-size:13.8px}
  .hd-tel{display:none}
}
@media (max-width:1024px){
  section{padding:96px 0}
  .hero-grid{grid-template-columns:1fr;gap:52px;padding:62px 0 0;min-height:0}
  .h-shot{max-width:440px;margin:0 auto}
  .h-svc ul{grid-template-columns:repeat(2,1fr)}
  .h-svc li:nth-child(2n){border-right:none}
  .h-svc li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .sf-grid,.ct-grid{grid-template-columns:1fr;gap:44px}
  .sv-grid,.wk-grid{grid-template-columns:repeat(2,1fr)}
  .sv.wide{grid-column:span 2;flex-direction:column;align-items:flex-start;gap:26px}
  .sv.wide ul{flex:1;width:100%;margin-top:22px;padding-top:22px;border-top:1px solid var(--line-2)}
  .ph-vals{grid-template-columns:repeat(2,1fr)}
  .ft-top{grid-template-columns:1fr 1fr;gap:40px}
  .ft-tel{grid-column:span 2}
  .gnb,.topbar ul{display:none}
  .burger{display:block}
}
@media (max-width:860px){
  .cl-pts{grid-template-columns:1fr}
  .cmp-grid,.bd-grid,.ph-mv{grid-template-columns:1fr}
  .cmp-vs{display:none}
  .sec-h.wide{flex-direction:column;align-items:flex-start;gap:26px}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  section{padding:74px 0}
  html{scroll-padding-top:126px}
  .topbar .wrap{justify-content:center}
  .hd{height:66px}
  .h-title{letter-spacing:-.05em}
  .h-btns .btn{flex:1;min-width:142px}
  .h-meta{gap:16px}
  .h-svc ul{grid-template-columns:1fr}
  .h-svc li{border-right:none;border-bottom:1px solid var(--line)}
  .h-svc li:last-child{border-bottom:none}
  .h-svc li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .hero.hv .hero-play{top:14px}
  .hero.hv .h-svc li,.hero.hv .h-svc li:nth-child(-n+2){border-bottom-color:rgba(255,255,255,.12)}
  .sec-h{margin-bottom:44px}
  .sv-grid,.wk-grid{grid-template-columns:1fr}
  .sv.wide{grid-column:span 1}
  .sv,.ph-card,.cmp-card,.bd-box,.qf{padding:28px 22px}
  .ph-vals{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr;gap:0}
  .claim{padding:88px 0}
  .claim .cl-top{margin-bottom:30px}
  .ft-top{grid-template-columns:1fr;gap:34px}
  .ft-tel{grid-column:span 1}
  .ft-cols{grid-template-columns:repeat(2,1fr)}
  .ft-bot{flex-direction:column;align-items:flex-start}
  .ft-lk,.ft-cr{justify-content:flex-start;text-align:left}
  .float{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .float a,.float button{width:47px;height:47px}
  .sf-plate,.shot{padding:18px}
  .d-kr{font-size:11.4px}
}
/* ══ 모바일 최적화 ══ */
body{-webkit-tap-highlight-color:rgba(15,86,179,.14)}
.hot:focus{outline:none}
.sf-item:focus-visible{outline:2px solid #5aa0f5;outline-offset:-2px}
.float{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.agree a{display:inline-block;padding:5px 0}

@media (max-width:860px){
  /* iOS 입력 포커스 시 자동 확대 방지 (16px 미만이면 확대됨) */
  .f input,.f select,.f textarea{font-size:16px}
  /* 터치 타깃 44px 확보 */
  .ft-col a{padding:11px 0}
  .bd-hd a{padding:12px 0}
  .agree input{width:22px;height:22px;flex:0 0 22px;font-size:16px}
  .wk .info,.bd-li{padding-top:18px;padding-bottom:18px}
  .ct-info dd a{display:inline-block;padding:13px 0}
  .ft-tel a{display:inline-block;padding:7px 0}
  .ft-tel .btn{padding:13px 22px;font-size:15px;min-height:46px}
  .ft-lk a{display:inline-block;padding:11px 0}
  .agree a{padding:11px 0}
}

/* 초소형 화면 (≤400px) */
/* 헤더 압축은 440px 부터 — 로고(207px)+견적버튼(158px)+좌우 여백이 429px 라서
   430px(아이폰 Pro Max)에서 가로로 3px 밀렸다. 압축이 걸리면 341px 로 준다. */
@media (max-width:440px){
  .hd{gap:10px}
  .logo{min-width:0}
  .logo .mk{width:39px;height:31.2px;flex:0 0 39px}
  .logo .tx span{display:none}
  .logo .tx b{font-size:15px}
  .rfq{padding:11px 11px;font-size:12.6px;gap:5px}
  .rfq .ar{display:none}
  .rfq .br{width:9px;height:9px;border-width:1.6px}
  .hd-r{gap:4px}
  .burger{width:44px;height:44px;flex:0 0 44px}
  .burger i{left:11px;right:11px}
}
@media (max-width:400px){
  .wrap{padding:0 16px}
  .bd-li{gap:9px}
  .bd-li .tt{font-size:14px}
  .bd-li .dt{font-size:10.8px}
  .bd-li .tg{font-size:10.8px;padding:3px 7px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
}

/* 서비스 2열 행 */
.sv-grid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.sv-grid.two{grid-template-columns:1fr}}

/* ══ 견적문의 CTA — 도면 라벨 태그형 ══ */
.rfq{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;font-size:15px;font-weight:700;letter-spacing:-.035em;
  color:var(--accent);background:transparent;transition:background .36s var(--ease)}
.rfq .ar{width:14px;height:14px;flex:0 0 14px;stroke:currentColor;fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .36s var(--ease)}
.rfq .br{position:absolute;width:13px;height:13px;border:1.8px solid var(--accent);
  transition:width .44s var(--ease),height .44s var(--ease);pointer-events:none}
.rfq .b-tl{top:0;left:0;border-right:0;border-bottom:0}
.rfq .b-tr{top:0;right:0;border-left:0;border-bottom:0}
.rfq .b-bl{bottom:0;left:0;border-right:0;border-top:0}
.rfq .b-br{bottom:0;right:0;border-left:0;border-top:0}
.rfq:hover,.rfq:focus-visible{background:var(--accent-soft);outline:none}
.rfq:hover .br,.rfq:focus-visible .br{width:calc(50% + 1px);height:calc(50% + 1px)}
.rfq:hover .ar,.rfq:focus-visible .ar{transform:translateX(3px)}
@media (max-width:640px){
  .rfq{padding:10px 16px;font-size:14px;gap:7px}
  .rfq .br{width:11px;height:11px}
}


/* ══ 현장사진 갤러리 ══ */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gi{padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;touch-action:pan-y;
  background:var(--paper-2);aspect-ratio:4/3;display:block;position:relative;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease);pointer-events:none}
.gi:hover{border-color:var(--accent-line);box-shadow:0 14px 30px -14px rgba(12,22,38,.32);transform:translateY(-2px)}
.gi:hover img{transform:scale(1.06)}
.gi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.gi-cap{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;pointer-events:none;color:#fff;
  background:linear-gradient(to top,rgba(9,16,28,.84),rgba(9,16,28,.46) 52%,rgba(9,16,28,0))}
.gi-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;line-height:1;
  padding:4px 7px;border-radius:3px;border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.13)}
.gi-loc{font-size:12.5px;font-weight:600;letter-spacing:-.02em;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.lb-meta{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;color:#fff;white-space:nowrap}
.lb-meta i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  padding:4px 7px;border-radius:3px;border:1px solid rgba(255,255,255,.32);color:rgba(255,255,255,.82)}
.lb-meta b{font-size:13.5px;font-weight:600;letter-spacing:-.02em}
.lb-desc{position:absolute;bottom:76px;left:50%;transform:translateX(-50%);
  width:min(760px,90vw);margin:0;text-align:center;color:rgba(255,255,255,.82);
  font-size:13.5px;line-height:1.6;letter-spacing:-.01em;white-space:pre-line;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lb-desc:empty{display:none}
.gal-empty{grid-column:1/-1;padding:38px 0;text-align:center;color:var(--muted,#68727f);font-size:14.5px}
.lb.has-desc img{max-height:min(68vh,calc(100vh - 290px))}

.lb{display:none}
.lb.on{display:flex;position:fixed;inset:0;z-index:90;background:rgba(7,11,17,.95);
  align-items:center;justify-content:center;padding:56px 24px}
body.lb-open{overflow:hidden}
.lb img{max-width:100%;max-height:76vh;object-fit:contain;border-radius:4px;
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.lb-btn{position:absolute;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);
  transition:.28s var(--ease)}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-close{top:18px;right:18px;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.34)}
.lb-close::after{content:"닫기";position:absolute;top:54px;right:0;font-size:11.5px;
  color:rgba(255,255,255,.55);letter-spacing:-.02em}
.lb.loading::before{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;
  margin:-17px 0 0 -17px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;animation:lbspin .8s linear infinite;z-index:2}
@keyframes lbspin{to{transform:rotate(360deg)}}
.lb.loading img{opacity:.45;filter:blur(1px);transition:opacity .2s}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.lb-cnt{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:rgba(255,255,255,.62)}
@media (max-width:1024px){.gal{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .gal{grid-template-columns:repeat(2,1fr);gap:8px}
  .gi-cap{padding:22px 8px 8px;gap:6px}
  .gi-tag{font-size:9.5px;padding:3px 5px}
  .gi-loc{font-size:11.5px}
  .lb-meta{bottom:44px;gap:7px}
  .lb-meta b{font-size:12.5px}
  .lb-desc{bottom:72px;font-size:12.5px;line-height:1.55;width:94vw}
  .lb{padding:64px 12px}
  .lb-btn{width:44px;height:44px}
  .lb-prev{left:8px}.lb-next{right:8px}
}

/* ══════════════════════════════════════════════
   상세페이지 시스템 (2026-08-25 다중페이지 전환)
   ══════════════════════════════════════════════ */

/* ── PC 드롭다운 2depth ── */
.gnb > li{position:relative}
.gnb > li.on > a{color:var(--accent)}
.gnb > li.on > a::after{transform:scaleX(1)}
.gnb .sub{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);
  min-width:206px;padding:10px 0;background:#fff;border:1px solid var(--line);
  border-top:2px solid var(--accent);border-radius:0 0 6px 6px;
  box-shadow:0 18px 40px rgba(12,22,38,.12);
  opacity:0;visibility:hidden;pointer-events:none;transition:.26s var(--ease);z-index:60}
.gnb > li.on .sub{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.gnb .sub li + li{border-top:1px solid var(--line-2)}
.gnb .sub a{display:block;padding:11px 20px;font-size:13.8px;font-weight:500;
  color:var(--text-2);letter-spacing:-.03em;white-space:nowrap;transition:.22s}
.gnb .sub a:hover,.gnb .sub a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.gnb > li > a.cur{color:var(--accent)}
.gnb > li > a.cur::after{transform:scaleX(1)}

/* ── 모바일 드로어 아코디언 ── */
.drawer .dgroup{opacity:0;transform:translateY(12px);transition:.45s var(--ease);
  border-bottom:1px solid var(--line)}
body.nav-open .drawer .dgroup{opacity:1;transform:none}
.drawer .dgroup:nth-child(1){transition-delay:.05s}.drawer .dgroup:nth-child(2){transition-delay:.09s}
.drawer .dgroup:nth-child(3){transition-delay:.13s}.drawer .dgroup:nth-child(4){transition-delay:.17s}
.drawer .dgroup:nth-child(5){transition-delay:.21s}.drawer .dgroup:nth-child(6){transition-delay:.25s}
.drawer .dgroup:nth-child(7){transition-delay:.29s}.drawer .dgroup:nth-child(8){transition-delay:.33s}
.drawer .dgroup > a.dl{border-bottom:none;opacity:1;transform:none;transition-delay:0s}
.drawer .dgroup .dl-tg{position:relative;padding-right:34px}
.drawer .dgroup .dl-tg::before,.drawer .dgroup .dl-tg::after{content:"";position:absolute;
  right:8px;top:50%;width:13px;height:1.8px;background:var(--text-3);border-radius:2px;transition:.3s var(--ease)}
.drawer .dgroup .dl-tg::after{transform:rotate(90deg)}
.drawer .dgroup.on .dl-tg::after{transform:rotate(0)}
.drawer .dgroup.on .dl-tg::before,.drawer .dgroup.on .dl-tg::after{background:var(--accent)}
.dw-sub{display:none;padding:2px 0 16px}
.drawer .dgroup.on .dw-sub{display:block}
.dw-sub a{display:block;padding:9px 0 9px 14px;font-size:15px;font-weight:500;color:var(--text-2);
  border-left:1px solid var(--line);letter-spacing:-.03em}
.dw-sub a:hover,.dw-sub a.on{color:var(--accent);border-left-color:var(--accent)}

/* ── 서브 히어로 (페이지 배너) ── */
.sub-hero{position:relative;background:var(--ink);color:#fff;padding:96px 0 0;overflow:hidden}
.sub-hero::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:40px 40px}
.sub-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(78% 130% at 80% 0%,rgba(27,116,228,.3),transparent 62%)}
.sub-hero .wrap{position:relative;z-index:2}
.sh-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:10.6px;font-weight:600;letter-spacing:.26em;color:#7fb0f0;margin-bottom:18px}
.sh-eyebrow i{width:26px;height:1px;background:rgba(127,176,240,.45)}
.sub-hero h1{font-size:clamp(31px,4vw,50px);font-weight:800;letter-spacing:-.055em;line-height:1.25}
.sub-hero h1 .lt{font-weight:300;color:rgba(255,255,255,.62)}
.sub-hero p{margin-top:20px;max-width:720px;font-size:16.4px;font-weight:300;
  line-height:1.9;color:rgba(255,255,255,.72)}
.crumb{display:flex;align-items:center;gap:9px;margin-top:44px;padding:16px 0;
  border-top:1px solid rgba(255,255,255,.12);font-size:12.6px;color:rgba(255,255,255,.5)}
.crumb a{transition:color .25s}
.crumb a:hover{color:#fff}
.crumb svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;opacity:.5}
.crumb b{color:#fff;font-weight:600}
.crumb .home svg{width:13px;height:13px}

/* ── 2depth 서브내비 ── */
.subnav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:78px;z-index:40;
  position:sticky;overflow:hidden}
/* 탭이 넘칠 때 오른쪽에 스크롤 여지를 보여준다 */
.subnav::after{content:"";position:absolute;right:0;top:0;bottom:1px;width:38px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 72%)}
@media (min-width:861px){.subnav::after{display:none}}
.subnav ul{display:flex;overflow-x:auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav li{flex:0 0 auto}
.subnav a{display:block;padding:19px 26px;font-size:14.6px;font-weight:600;color:var(--text-2);
  letter-spacing:-.035em;white-space:nowrap;position:relative;transition:color .26s}
.subnav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transition:transform .32s var(--ease)}
.subnav a:hover{color:var(--accent)}
.subnav a.on{color:var(--accent)}
.subnav a.on::after,.subnav a:hover::after{transform:scaleX(1)}

/* ── 페이지 본문 블록 ── */
.page{padding:110px 0}
.page + .page{padding-top:0}
.page.tint{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page + .page.tint,.page.tint + .page{padding-top:110px}
.blk{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.blk > *{min-width:0}
.blk + .blk{margin-top:88px;padding-top:88px;border-top:1px solid var(--line)}
.blk-h .num{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.4px;
  font-weight:600;letter-spacing:.26em;color:var(--accent);margin-bottom:16px}
.blk-h .num i{width:24px;height:1px;background:var(--accent-line)}
.blk-h h2{font-size:clamp(24px,2.4vw,31px);font-weight:800;letter-spacing:-.055em;
  line-height:1.34;color:var(--ink)}
.blk-h h2 .lt{font-weight:300;color:var(--text-2)}
.blk-b > * + *{margin-top:22px}
.blk-b p{font-size:16.2px;line-height:1.95;color:var(--text-2);font-weight:300}
.blk-b p b,.blk-b p strong{font-weight:600;color:var(--text)}
.blk-b h3{font-size:19px;font-weight:700;letter-spacing:-.045em;color:var(--ink);margin-top:36px}
.blk-b .big{font-size:22px;line-height:1.72;color:var(--ink);font-weight:400;letter-spacing:-.04em}
.blk-b .big em{font-style:normal;color:var(--accent);font-weight:700}

/* ── 인사말 : 대표 사진 ── */
.greet{display:grid;grid-template-columns:1fr 296px;gap:52px;align-items:start}
.greet > *{min-width:0}
.greet-t > * + *{margin-top:22px}
.ceo{margin:0}
.ceo-ph{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(168deg,#f4f8fd 0%,#e7f0fa 46%,#d8e6f6 100%)}
.ceo-ph::before{content:'';position:absolute;left:50%;top:16%;width:78%;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 70%)}
.ceo-ph img{position:relative;display:block;width:100%;height:auto}
.ceo figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;
  margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.ceo figcaption .ceo-lb{flex:0 0 100%;font-family:var(--mono);font-size:10.4px;font-weight:600;
  letter-spacing:.26em;color:var(--accent);margin-bottom:9px}
.ceo figcaption b{font-size:18px;font-weight:800;letter-spacing:-.05em;color:var(--ink)}
.ceo figcaption span.ro{font-size:13.4px;font-weight:300;color:var(--text-3);letter-spacing:-.03em}
/* 대표 사진 모션 — 떠오르며 등장한 뒤 아주 천천히 부유한다 */
.ceo{transform:translateY(34px) scale(.985);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.ceo.in{transform:none}
.ceo-ph img{animation:ceoFloat 7s ease-in-out infinite;will-change:transform}
.ceo-ph::before{animation:ceoGlow 7s ease-in-out infinite}
.ceo-ph::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 62%);
  transform:translateX(-120%);animation:ceoSheen 7s ease-in-out 1.4s infinite}
@keyframes ceoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes ceoGlow{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}
                   50%{opacity:1;transform:translateX(-50%) scale(1.07)}}
@keyframes ceoSheen{0%,62%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}
/* 대표 사진은 PC 전용.
   1024px 로 끊으면 Windows 배율 125% 짜리 1280 화면(=CSS 1024px)이나
   창을 줄인 PC에서도 사라져 버린다. 실제 PC는 남기고 폰·태블릿만 걷어내도록
   900px 로 낮춘다. 901~1024 구간은 사진 폭만 줄여서 2단을 유지한다. */
@media (max-width:1024px){
  .greet{grid-template-columns:1fr 236px;gap:34px}
}
@media (max-width:900px){
  .greet{grid-template-columns:1fr}
  .ceo{display:none}
}

/* ── 자료 대기 플레이스홀더 ── */
.pend{border:1px dashed var(--accent-line);background:var(--accent-soft);border-radius:6px;
  padding:26px 28px;display:flex;gap:14px;align-items:flex-start}
.pend svg{width:19px;height:19px;flex:0 0 19px;margin-top:2px;stroke:var(--accent);fill:none;stroke-width:1.7}
.pend b{display:block;font-size:14.6px;font-weight:700;color:var(--navy);letter-spacing:-.04em;margin-bottom:5px}
.pend span{display:block;font-size:14px;line-height:1.8;color:var(--text-2);font-weight:400}

/* ── 스펙 표 (회사개요 등) ── */
.spec{width:100%;border-top:2px solid var(--ink);border-collapse:collapse}
.spec th,.spec td{border-bottom:1px solid var(--line);padding:17px 20px;
  font-size:15px;text-align:left;vertical-align:top;line-height:1.7}
.spec th{width:184px;background:var(--paper-2);font-weight:600;color:var(--ink);letter-spacing:-.035em}
.spec td{color:var(--text-2);font-weight:300}
.spec td .wait{color:var(--text-3);font-size:14px}
.spec td .note{color:var(--text-3);font-size:13.6px;font-weight:300}
.spec td b{font-weight:600;color:var(--text)}

/* ── 포인트 카드 그리드 ── */
.pts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pts.two{grid-template-columns:repeat(2,1fr)}
.pt{border:1px solid var(--line);border-radius:8px;padding:30px 28px;background:#fff;
  transition:.38s var(--ease)}
.pt:hover{border-color:var(--accent-line);box-shadow:0 14px 34px rgba(12,22,38,.07);transform:translateY(-3px)}
.pt .no{font-family:var(--mono);font-size:10.6px;font-weight:600;letter-spacing:.2em;color:var(--accent-line)}
.pt h4{margin-top:14px;font-size:17.4px;font-weight:700;letter-spacing:-.045em;color:var(--ink);line-height:1.45}
.pt p{margin-top:10px;font-size:14.4px;line-height:1.82;color:var(--text-2);font-weight:300}
.pt .ic{display:block;width:42px;height:42px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:7px;padding:9px;background:var(--paper-2)}
.pt .ic svg{width:100%;height:100%;stroke:var(--accent);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
/* 클릭 가능한 포인트 카드 */
.pt.lk{display:flex;flex-direction:column}
.pt.lk .go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
  font-size:13.4px;font-weight:600;letter-spacing:-.035em;color:var(--accent)}
.pt.lk .go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:.3s var(--ease)}
.pt.lk:hover .go svg{transform:translateX(3px)}

/* ── 서비스 인덱스 (다른 서비스 보기) ── */
.svnav{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.svnav a{background:#fff;padding:26px 22px;display:block;transition:.32s var(--ease)}
.svnav a:hover{background:var(--accent-soft)}
.svnav .no{font-family:var(--mono);font-size:10.2px;font-weight:600;letter-spacing:.18em;color:var(--accent-line)}
.svnav b{display:block;margin-top:9px;font-size:15.6px;font-weight:700;letter-spacing:-.045em;color:var(--ink)}
.svnav a:hover b{color:var(--accent)}

/* ── 게시판 목록 ── */
.bd-tb{width:100%;border-top:2px solid var(--ink);border-collapse:collapse}
.bd-tb th{padding:15px 12px;font-size:13.4px;font-weight:600;color:var(--text-2);
  border-bottom:1px solid var(--line);background:var(--paper-2);letter-spacing:-.03em}
.bd-tb td{padding:19px 12px;font-size:15px;border-bottom:1px solid var(--line-2);color:var(--text-2)}
.bd-tb .c{text-align:center;width:88px;font-family:var(--mono);font-size:12.8px;color:var(--text-3)}
.bd-tb .d{text-align:center;width:124px;font-family:var(--mono);font-size:12.6px;color:var(--text-3)}
.bd-empty{padding:96px 20px;text-align:center;border-bottom:1px solid var(--line)}
.bd-empty svg{width:38px;height:38px;margin:0 auto 18px;stroke:var(--line);fill:none;stroke-width:1.4}
.bd-empty b{display:block;font-size:16px;font-weight:600;color:var(--text-2);letter-spacing:-.04em}
.bd-empty span{display:block;margin-top:8px;font-size:14px;color:var(--text-3);font-weight:300}

/* ── 하단 문의 밴드 ── */
.cta-band{background:var(--ink);color:#fff;padding:82px 0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 130% at 82% 0%,rgba(27,116,228,.28),transparent 62%)}
.cta-band .wrap{position:relative;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-band .en{font-family:var(--mono);font-size:10.6px;font-weight:600;
  letter-spacing:.26em;color:#7fb0f0;display:block;margin-bottom:14px}
.cta-band h2{font-size:clamp(24px,2.7vw,34px);font-weight:800;letter-spacing:-.055em;line-height:1.36}
.cta-band h2 .lt{font-weight:300;color:rgba(255,255,255,.62)}
.cta-band .acts{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.cta-band .tel{text-align:right;margin-right:14px}
.cta-band .tel b{display:block;font-family:var(--mono);font-size:27px;font-weight:700;letter-spacing:-.03em}
.cta-band .tel span{font-size:11.6px;color:rgba(255,255,255,.55);letter-spacing:.02em}

/* ── 도면 카드 (라이트) ── */
.fig{border:1px solid var(--line);border-radius:10px;background:#fff;padding:28px}
.fig .cap{display:flex;justify-content:space-between;margin-bottom:16px;
  padding-bottom:13px;border-bottom:1px dashed var(--line)}
.fig .cap span{font-family:var(--mono);font-size:9.6px;letter-spacing:.18em;color:var(--text-3);font-weight:600}

/* ── 오시는길 지도 ── */
.mapbox{position:relative;border:1px solid var(--line);border-radius:8px;
  background:var(--paper-2);aspect-ratio:16/7;overflow:hidden}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.mp-links{display:flex;align-items:center;justify-content:space-between;
  gap:14px 20px;flex-wrap:wrap;margin-top:15px}
.mp-go{display:flex;gap:8px;flex-wrap:wrap}
.mp-go .btn svg{width:13px;height:13px;flex:0 0 13px}

/* ── 상세페이지 반응형 ── */
@media (max-width:1024px){
  .blk{grid-template-columns:1fr;gap:26px}
  .blk + .blk{margin-top:64px;padding-top:64px}
  .pts,.svnav{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .sub-hero{padding-top:64px}
  .crumb{margin-top:32px}
  .page{padding:76px 0}
  .page + .page.tint,.page.tint + .page{padding-top:76px}
  .subnav a{padding:16px 18px;font-size:13.8px}
  .spec th{width:112px;padding:14px;font-size:14px}
  .spec td{padding:14px;font-size:14px}
  .cta-band .wrap{flex-direction:column;align-items:flex-start;gap:26px}
  .cta-band .tel{text-align:left;margin-right:0}
}
@media (max-width:640px){
  .subnav{top:66px}
  .mapbox{aspect-ratio:4/3}
  .mp-links{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:560px){
  .pts,.pts.two,.svnav{grid-template-columns:1fr}
  .bd-tb .c{display:none}
  .pend{padding:20px}
  .fig{padding:18px}
}

/* ── 메인 7대 안전장치 요약 밴드 ── */
.sf-brief{display:flex;align-items:flex-end;justify-content:space-between;gap:44px;
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
.sf-brief p{max-width:720px;font-size:16.6px;font-weight:300;line-height:1.92;color:rgba(255,255,255,.74)}
.sf-brief p b{font-weight:600;color:#fff}
.sf-brief .btn{flex:0 0 auto}
.sf-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:44px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:8px;overflow:hidden}
.sf-chips li{background:#0a1220;padding:22px 20px;display:flex;align-items:center;gap:12px;
  font-size:15px;font-weight:600;letter-spacing:-.04em;color:rgba(255,255,255,.86)}
.sf-chips li span{flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(127,176,240,.5);color:#7fb0f0;font-family:var(--mono);font-size:11.5px;
  font-weight:700;display:flex;align-items:center;justify-content:center}
@media (max-width:1024px){
  .sf-brief{flex-direction:column;align-items:flex-start;gap:28px}
  .sf-chips{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .sf-chips{grid-template-columns:1fr}
  .sf-chips li{padding:16px}
}

/* ══════════════════════════════════════════════════════════
   메인(홈) 전용 — 랜딩은 짧게, 본문은 상세페이지에서
   ══════════════════════════════════════════════════════════ */
.home section{padding:92px 0}
.home .hero-grid{min-height:520px;padding:72px 0 0}
.home .sec-h{margin-bottom:44px}
.home .sec-h h2{font-size:clamp(26px,2.7vw,36px)}

/* 차별화 선언 밴드 축소 */
.home .claim{padding:clamp(78px,11vh,124px) 0}
.home .claim .cl-top{margin-bottom:28px}
.home .claim h2{font-size:clamp(32px,5vw,62px)}
.home .claim p{margin-top:26px;font-size:clamp(16px,1.5vw,19px)}
.cl-more{display:inline-flex;align-items:center;gap:9px;margin-top:34px;
  font-size:14px;font-weight:600;letter-spacing:-.02em;color:#fff;
  padding:11px 18px;border:1px solid rgba(255,255,255,.28);border-radius:4px;
  transition:.34s var(--ease)}
.cl-more:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5);gap:14px}
.cl-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

/* 7대 안전장치 슬림 밴드 */
.safe.slim{padding:78px 0}
.sf-slim{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12)}
.sf-slim .num{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:10.6px;font-weight:600;letter-spacing:.26em;color:#7fb0f0;margin-bottom:14px}
.sf-slim .num i{width:26px;height:1px;background:rgba(127,176,240,.4)}
.sf-slim h2{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.055em;
  line-height:1.3;color:#fff}
.sf-slim h2 .lt{font-weight:300;color:rgba(255,255,255,.6)}
.sf-slim .btn{flex:0 0 auto}
.sf-slim .btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.safe.slim .sf-chips{margin-top:32px}
.safe.slim .sf-chips li{padding:17px 18px;font-size:14.2px}

/* 게시판·현장사진 헤더 여백 축소 */
.home .works .gal{gap:10px}
.home .board .sec-h{margin-bottom:32px}

@media (max-width:1024px){
  .home section{padding:74px 0}
  .home .hero-grid{min-height:0}
  .sf-slim{flex-direction:column;align-items:flex-start;gap:24px}
}
@media (max-width:560px){
  .home section{padding:58px 0}
  .safe.slim{padding:58px 0}
  .home .sec-h{margin-bottom:32px}
}

/* 메인 서비스 카드 압축 */
.home .sv{padding:28px 26px 26px}
.home .sv .hd-row{margin-bottom:20px}
.home .sv .ic{width:40px;height:40px}
.home .sv h3{font-size:19.5px;margin-bottom:9px}
.home .sv > p{font-size:14.2px;line-height:1.72}
.home .sv .go{margin-top:18px;font-size:13.2px}

/* 7칩 4열 배치 시 마지막 빈칸 제거 */
.safe.slim .sf-chips li:last-child{grid-column:span 2}
@media (max-width:1024px){.safe.slim .sf-chips li:last-child{grid-column:span 2}}
@media (max-width:560px){.safe.slim .sf-chips li:last-child{grid-column:span 1}}

/* 설명문 없는 메인 카드 — 제목이 남는 공간을 채워 링크를 아래로 */
.home .sv h3{flex:1;margin-bottom:0}
.home .sv .go{margin-top:22px}

/* 메인 서비스 진입 그리드 — 5개 한 줄 */
.home .sv-grid{grid-template-columns:repeat(5,1fr);gap:14px}
.home .sv{padding:24px 20px 22px}
.home .sv h3{font-size:17.5px;letter-spacing:-.055em;line-height:1.36}
.home .sv .no{font-size:10.4px;padding:5px 9px}
.home .sv .ic{width:34px;height:34px}
.home .sv .go{margin-top:20px;font-size:12.6px}
@media (max-width:1180px){.home .sv-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.home .sv-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.home .sv-grid{grid-template-columns:1fr}}

/* 메인 미리보기는 4장 고정 — 3열이 되면 한 장이 혼자 남는다 */
@media (max-width:1024px){.home .gal{grid-template-columns:repeat(2,1fr)}}

/* 브레드크럼 홈 아이콘 — 아이콘이 13px라 터치 영역만 넓힌다(레이아웃 영향 없음) */
.crumb .home{display:inline-flex;align-items:center;justify-content:center;
  padding:11px 10px;margin:-11px -10px}

/* ══ 추가 모션 (2026-08-28 클라이언트 요청 "모션을 더 많이") ══ */

/* 스크롤 진행 바 — 페이지 최상단 */
#sprog{position:fixed;left:0;top:0;height:2px;width:0;z-index:120;pointer-events:none;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%);
  box-shadow:0 0 10px rgba(27,116,228,.45);transition:width .1s linear}

/* 히어로 스크롤 안내 — 빛줄기가 아래로 흐른다 */
.h-cue{position:absolute;left:50%;bottom:calc(100% + 18px);transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;
  font-family:var(--mono);font-size:9.2px;font-weight:600;letter-spacing:.3em;
  color:rgba(255,255,255,.66)}
.h-cue i{position:relative;display:block;width:1px;height:40px;overflow:hidden;
  background:rgba(255,255,255,.22)}
.h-cue i::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;
  background:#fff;animation:cueRun 2.4s var(--ease) infinite}
@keyframes cueRun{0%{top:-100%}62%,100%{top:100%}}
@media (max-width:1024px){.h-cue{display:none}}

/* 히어로 구분선이 그려지듯 늘어난다 */
.hero.hv .h-rule{animation:ruleDraw .95s var(--ease) .45s both}
@keyframes ruleDraw{from{width:0;opacity:0}to{width:56px;opacity:1}}

/* 강조어 밑줄이 좌 → 우로 그어진다 */
.mk-line{position:relative;display:inline-block}
.mk-line::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:currentColor;opacity:.42;transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease) .4s}
.rv.in .mk-line::after{transform:scaleX(1)}

/* 섹션 번호 라벨의 짧은 선이 등장할 때 늘어난다 */
.rv.in .num i,.sec-h.rv.in .num i{animation:numLine .8s var(--ease) .15s both}
@keyframes numLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.num i{transform-origin:left}

/* 플로팅 전화 버튼 — 은은한 신호 링 */
.float .pri::after{content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1.5px solid var(--accent);animation:fpulse 3s var(--ease) infinite;pointer-events:none}
@keyframes fpulse{0%{transform:scale(1);opacity:.5}72%,100%{transform:scale(1.6);opacity:0}}

/* 서비스 카드 아이콘 — 카드가 나타난 뒤 살짝 떠오른다 */
.sv .ic{transition:transform .45s var(--ease)}
.sv:hover .ic{transform:translateY(-3px) rotate(-4deg)}

/* 시공사례 미리보기 — 등장할 때 사진이 아주 살짝 줌아웃된다.
   :not(.in) 으로 걸어야 .gi:hover img 확대가 살아남는다 */
.gi.rv:not(.in) img{transform:scale(1.08)}

/* ══ 문서형 페이지 (개인정보처리방침 등) ═══════════════════ */
.wrap-narrow{max-width:880px}
.doc{padding:8px 0 12px}
.doc h3{
  font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--line);
}
.doc h3:first-of-type{margin-top:26px}
.doc p{color:var(--text-2);margin:0 0 12px;line-height:1.85}
.doc p b,.doc li b{color:var(--text);font-weight:700}
.doc ul{margin:0 0 14px;padding-left:2px;list-style:none}
.doc ul li{
  position:relative;padding-left:16px;margin-bottom:8px;
  color:var(--text-2);line-height:1.8;
}
.doc ul li::before{
  content:'';position:absolute;left:2px;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--accent-line);
}
.doc a{color:var(--accent);font-weight:600;border-bottom:1px solid var(--accent-line)}
.doc a:hover{border-bottom-color:var(--accent)}
.doc-lead a{color:#0d47a1;border-bottom-color:#9dc0ea}
.doc-lead{
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:10px;padding:18px 20px;color:#134a92 !important;
  font-size:15.5px;margin-bottom:8px !important;
}
.doc-date{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--text-3) !important;
}
@media (max-width:640px){
  .doc h3{font-size:17.5px;margin-top:30px}
  .doc a{color:var(--accent);font-weight:600;border-bottom:1px solid var(--accent-line)}
.doc a:hover{border-bottom-color:var(--accent)}
.doc-lead a{color:#0d47a1;border-bottom-color:#9dc0ea}
.doc-lead{font-size:14.5px;padding:15px 16px}
}