/* 홈페이지 디자인 — 담당: web-builder */
:root{
  --navy:#16306b; --blue:#1f5bd1; --ink:#1c2230; --sub:#5b6476; --line:#e3e7ef; --bg:#ffffff; --soft:#f4f6fa;
  --radius:14px; --max:1180px;
  /* 글자 크기: 여기 한 곳에서 관리 (화면용 px. 인쇄용 pt 는 맨 아래 @media print 안에 그대로).
     휴대폰(720px 이하)에서 본문성 글은 --fs-body(16px)로 올림 — 기준.md "글자 16px 이상" */
  --fs-2xs:12px;  /* PC 꼬리표: .tag, .panel small */
  --fs-xs:13px;   /* 영문·분류 이름표: .eyebrow, .card .no, .info dt (휴대폰 꼬리표 최소) */
  --fs-sm:14px;   /* PC 보조 글: 숫자 설명, 표 개수, 사진 설명, footer */
  --fs-md:15px;   /* PC 메뉴·카드 설명·표 칸 */
  --fs-body:16px; /* 본문 기본 · 휴대폰 본문성 글 · 입력칸 · 하단 바 */
  --fs-lead:17px; /* 제목 아래 설명(.lead), 연락처 */
  --fs-lg:18px;   /* 첫 화면 설명 */
  --fs-xl:20px;   /* h3 · 작은 제목 · 휴대폰 메뉴 전화번호 */
  --fs-menu:23px; /* 휴대폰 전체 메뉴 항목 */
  --fs-quote:24px;/* 대표 인사 인용 */
  --fs-icon:26px; /* ☰ 단추 */
  --fs-stat:30px; /* 숫자로 보는 삼진비티 */
  --fs-h2:clamp(26px,3.2vw,44px);
  --fs-h1:clamp(32px,5vw,54px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:Pretendard,-apple-system,"Malgun Gothic",sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;word-break:keep-all}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
section{padding:96px 0}
section.alt{background:var(--soft)}
.eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;color:var(--blue);text-transform:uppercase}
.hero .eyebrow{color:#9fc0ff} /* 어두운 첫 화면 위 영문 이름표 (20261024-15, 인라인 style 에서 옮김) */
h2{font-size:var(--fs-h2);line-height:1.3;margin:8px 0 14px;letter-spacing:-.02em}
.lead{color:var(--sub);font-size:var(--fs-lead);max-width:680px}

/* 접근성: 화면에는 안 보이고 화면 낭독기만 읽는 이름표 (입력칸 label) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* 본문 바로가기: 평소엔 화면 위로 숨고, 키보드로 포커스하면 왼쪽 위에 나타난다 */
.skip{position:absolute;left:12px;top:-120px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:10px;
  background:var(--navy);color:#fff;font-size:var(--fs-body);font-weight:700;box-shadow:0 6px 20px rgba(22,48,107,.25)}
.skip:focus{top:12px}
main:focus{outline:none} /* 바로가기로 도착한 본문 상자 자체에는 테두리를 그리지 않음 */
/* 키보드 포커스 표시: 모든 링크·버튼·입력칸에 파랑 2px 테두리 (마우스 클릭 땐 안 보임). 어두운 첫 화면 위에서는 흰색 */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hero :focus-visible,.skip:focus-visible{outline-color:#fff}
.skip:focus-visible{outline-offset:-5px}

/* 머리글 */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav img{height:40px;width:auto} /* 로고 A안 svg(282.35:60, 20261023-32) */
.menu{display:flex;gap:30px;font-weight:600;font-size:var(--fs-md)}
.menu a:hover{color:var(--blue)}
.call{background:var(--navy);color:#fff;padding:9px 16px;border-radius:999px;font-size:var(--fs-sm);font-weight:700}
.burger{display:none;background:none;border:0;font-size:var(--fs-icon);cursor:pointer;color:var(--ink)}
.menu-info{display:none}
/* ☰ 선 3개 → 열리면 ✕ (0.25초, 움직임 끄기면 즉시) */
.burger span{position:absolute;left:11px;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.burger span{transition:none}}
/* PC(721px 이상): 첫 화면을 지나면 머리글 68px → 56px + 옅은 그림자 (0.25초, 움직임 끄기면 즉시).
   줄어든 12px 은 margin-bottom 으로 채워 아래 글이 튀지 않게 한다. 판단은 index.html 의 IntersectionObserver(.hero 밖 → header.thin) */
@media (min-width:721px){
  header{transition:box-shadow .25s ease,margin-bottom .25s ease}
  header .nav,header .nav img{transition:height .25s ease}
  header.thin{margin-bottom:12px;box-shadow:0 6px 20px rgba(22,48,107,.10)}
  header.thin .nav{height:56px}
  header.thin .nav img{height:34px}
  /* 메뉴의 "견적문의"만 버튼처럼 (휴대폰 전체 메뉴는 그대로) */
  .menu{align-items:center}
  .menu>a{display:inline-flex;align-items:center;min-height:40px} /* 항목 높이를 버튼과 맞춰 한 줄 정렬(모양은 그대로) */
  .menu a[href="#contact"]{padding:0 18px;border-radius:999px;background:var(--blue);color:#fff;transition:background-color .2s ease,box-shadow .2s ease}
  .menu a[href="#contact"]:hover,.menu a[href="#contact"]:focus-visible{background:var(--navy);color:#fff}
  /* 지금 보는 구역(20261024-15, index.html 이 aria-current 를 붙임): 파란 글자 + 밑줄 2px. 견적문의 버튼은 모양 그대로 두고 바깥 남색 테두리만 */
  .menu>a:not([href="#contact"]){transition:color .2s ease,box-shadow .2s ease}
  .menu>a[aria-current="true"]:not([href="#contact"]){color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)}
  .menu a[href="#contact"][aria-current="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy)}
}
@media (min-width:721px) and (prefers-reduced-motion:reduce){
  header,header .nav,header .nav img,.menu a[href="#contact"],.menu>a:not([href="#contact"]){transition:none}
}

/* 첫 화면 */
.hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;min-height:88vh;min-height:min(88svh,820px);padding:130px 0 120px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(14,32,74,.92) 0%,rgba(14,32,74,.82) 50%,rgba(14,32,74,.25) 100%),url(images/hero-concrete.jpg) center/cover;transform-origin:60% 50%;animation:heroZoom 2.4s cubic-bezier(.22,.61,.36,1) both}
/* WebP 사본(20261024-22, 크기·자르기 같음, JPG 의 약 65%): image-set 을 아는 브라우저는 WebP, 모르면 이 줄을 버리고 위 JPG 그대로 */
.hero::before{background-image:linear-gradient(100deg,rgba(14,32,74,.92) 0%,rgba(14,32,74,.82) 50%,rgba(14,32,74,.25) 100%),image-set(url(images/hero-concrete.webp) type("image/webp"),url(images/hero-concrete.jpg) type("image/jpeg"))}
/* 옛 사파리(14.1~16)·옛 크롬: WebP 는 보여 주지만 image-set 의 type() 을 몰라 위 줄을 버림 → JPG 를 받고 preload 한 WebP 는 헛받기(두 번 받기).
   그런 브라우저만(type() 모름 + inset 앎 = WebP 되는 판) WebP 를 -webkit-image-set 으로 직접 씀. type() 아는 Edge·크롬·새 사파리는 이 칸을 건너뜀 (20261024-23) */
@supports (inset:0) and (not (background-image:image-set(url("a.webp") type("image/webp")))){
  .hero::before{background-image:linear-gradient(100deg,rgba(14,32,74,.92) 0%,rgba(14,32,74,.82) 50%,rgba(14,32,74,.25) 100%),-webkit-image-set(url(images/hero-concrete.webp) 1x)}
}
.hero .wrap{width:100%}
/* 첫 화면 글 나타나기: <head> 의 한 줄 스크립트가 html 에 .hj 를 붙일 때만(스크립트가 꺼지면 처음부터 또렷하게, 20261024-21) */
.hj .hero .wrap>*{animation:heroUp .9s cubic-bezier(.22,.61,.36,1) both}
.hj .hero .wrap>:nth-child(2){animation-delay:.15s}
.hj .hero .wrap>:nth-child(3){animation-delay:.3s}
.hj .hero .wrap>:nth-child(4){animation-delay:.45s}
@keyframes heroZoom{from{transform:scale(1.06)}}
@keyframes heroUp{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){.hero::before,.hj .hero .wrap>*{animation:none}}
.hero h1{font-size:var(--fs-h1);line-height:1.22;letter-spacing:-.03em;max-width:700px}
.hero p{font-size:var(--fs-lg);opacity:.88;margin:20px 0 34px;max-width:560px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 24px;border-radius:10px;font-weight:700}
.btn.primary{background:#fff;color:var(--navy)}
.btn.ghost{border:1px solid rgba(255,255,255,.55);color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:var(--radius);overflow:hidden;margin-top:-52px;position:relative;box-shadow:0 12px 34px rgba(20,40,90,.12)}
.stats div{background:#fff;padding:26px 22px}
.stats b{display:block;font-size:var(--fs-stat);color:var(--navy);letter-spacing:-.02em}
.stats span{color:var(--sub);font-size:var(--fs-sm)}
/* 숫자 줄 바로 아래 협력 건설사 로고 한 줄(PARTNERS 앞 6개, 회색) + "N곳 모두 보기". 신뢰 띠가 나중에 오면 이 묶음만 바꿈 */
.logo-strip{display:flex;align-items:center;gap:20px;margin-top:22px}
.logo-strip[hidden]{display:none}
.logo-row{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;min-width:0}
.logo-row>.lg{display:flex;align-items:center;justify-content:center;min-height:48px;padding:4px} /* .lg = 로고 한 칸(링크 아님, 20261023-26) */
.logo-row>.lg>img{max-height:34px;max-width:100%;width:auto;height:auto;filter:grayscale(1);opacity:.6}
.logo-row .fr{width:min(112px,100%);filter:grayscale(1);opacity:.6} /* 옛 로고 그림(151×46)을 34px 높이로 줄인 크기와 같게 */
.logo-all{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:var(--fs-body);font-weight:700;color:var(--blue);white-space:nowrap}
@media (hover:hover){
  .logo-all:hover{color:var(--navy);text-decoration:underline;text-underline-offset:4px}
}

/* 사업분야 */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card .no{font-size:var(--fs-xs);font-weight:700;color:var(--blue)}
.card h3{font-size:var(--fs-xl);margin:8px 0 8px}
.card p{color:var(--sub);font-size:var(--fs-md)}
/* 사업분야 카드 "이 분야 문의하기": 카드 아래쪽에 붙는 작은 링크(누르는 곳 44px, 16px). 누르면 #contact (index.html 스크립트) */
.cards .card{display:flex;flex-direction:column}
/* 카드 아래 링크 줄: "관련 실적 보기"(#projects, 필터·검색은 index.html 스크립트) + "이 분야 문의하기".
   모든 카드에서 같은 높이(44px 두 줄)로: 위 줄 = 관련 실적, 아래 줄 = 문의. 관련 실적이 없는 카드(VE)도 문의는 아래 줄이라 옆 카드와 줄이 맞음 */
.card .acts{display:grid;grid-template-rows:44px 44px;justify-items:start;align-items:center;margin-top:auto;padding-top:6px}
.card .acts .rel{grid-row:1}
.card .acts .ask{grid-row:2}
.card .ask,.card .rel{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-body);font-weight:700;color:var(--blue);transition:color .2s}
.card .rel{color:var(--navy)}
.card .ask::after,.card .rel::after{content:"→";margin-left:6px;transition:transform .2s}
.card .ask:hover,.card .ask:focus-visible,.card .rel:hover,.card .rel:focus-visible{color:var(--navy);text-decoration:underline;text-underline-offset:4px}
.card .ask:hover::after,.card .rel:hover::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.card .ask,.card .ask::after,.card .rel,.card .rel::after{transition:none}}
/* 카드 위 시공 사진(있는 카드만): 카드 안쪽 여백(28px)을 넘어 테두리까지 채우는 4:3, 늦게 떠도 자리·옅은 배경이 먼저 잡힘 */
.card .ph{margin:-28px -28px 20px;aspect-ratio:4/3;overflow:hidden;background:#e9eef6;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0}
.card .ph img{display:block;width:100%;height:100%;object-fit:cover}
.card .ph picture{display:contents} /* WebP 먼저(picture), 못 읽으면 img 의 JPG — 감싸도 사진 자리·채움은 그대로 (20261024-22) */
/* 사진 없는 카드(VE·화재복구): 같은 4:3 자리에 남색 바탕 + 선 아이콘(index.html 안 인라인 SVG, 그림 파일 아님) */
.card .ph-icon{display:flex;align-items:center;justify-content:center;background:var(--navy);color:#9fc0ff}
.card .ph-icon svg{width:72px;height:72px;flex:none}
/* 휴대폰(720px 이하, 20261024-09): 카드가 한 줄에 하나라 아이콘 칸 4:3 이면 약 270px — 108px 띠로 낮춤(사진 카드는 4:3 그대로) */
@media (max-width:720px){.card .ph-icon{aspect-ratio:auto;height:108px}}
/* 카드 "자세히" 펼치기(보수·구조보강·VE): 닫힘이 기본. 열면 그 카드만 길어지고, 같은 줄 옆 카드는 원래 높이 그대로(index.html 스크립트가 .pin + min-height).
   누르는 곳 44px·16px. 인쇄 때는 펼친 상태(맨 아래 @media print) */
.card .detail{margin-top:10px;border-top:1px solid var(--line)}
.card .detail summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none;
  font-size:var(--fs-body);font-weight:700;color:var(--navy)}
.card .detail summary::-webkit-details-marker{display:none}
.card .detail summary::after{content:"+";font-size:var(--fs-xl);font-weight:400;line-height:1;color:var(--blue);margin-left:12px}
.card .detail[open] summary::after{content:"−"}
.card .detail summary:hover{color:var(--blue)}
.card .detail-body{padding:2px 0 8px}
.card .detail[open] .detail-body{animation:detailIn .25s ease both}
@keyframes detailIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.card .detail h4{font-size:var(--fs-md);font-weight:700;color:var(--ink);margin:12px 0 4px}
.card .detail h4:first-child{margin-top:4px}
.card .detail ul{list-style:none}
.card .detail li{position:relative;padding-left:14px;font-size:var(--fs-md);color:var(--sub);margin:3px 0}
.card .detail li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.card .detail .files li{padding-left:0;margin:0;border-bottom:1px solid var(--line)}
.card .detail .files li::before{display:none}
.card .detail .files a{display:flex;align-items:center;min-height:44px;padding:8px 24px 8px 0;position:relative;color:var(--ink);font-weight:600}
.card .detail .files a::after{content:"→";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--blue);font-weight:700}
.card .detail .files a:hover,.card .detail .files a:focus-visible{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.cards .card.pin{align-self:start}
@media (min-width:721px){.cards .card:last-child:nth-child(3n+1){grid-column:2}} /* 마지막 카드가 세 칸 줄에 혼자 남으면(카드 수 3n+1) 가운데 칸으로 */
@media (prefers-reduced-motion:reduce){.card .detail[open] .detail-body{animation:none}}

/* 회사소개 */
.ceo{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;margin-top:40px}
.ceo blockquote{font-size:var(--fs-quote);font-weight:700;line-height:1.45;color:var(--navy);margin-bottom:18px}
.ceo p{color:var(--sub);margin-bottom:12px}
.ceo .sign{color:var(--ink);font-weight:700;margin-top:18px}
/* 인증·특허(.ceo-certs): 휴대폰·태블릿·인쇄는 연혁 다음 한 줄(칸 사이 32px + 24px = 예전 제목 위 56px),
   PC(961px 이상)는 인사말 아래 왼쪽 칸으로 올리고 연혁이 오른쪽 두 줄을 차지 → 인사말 아래 빈 칸이 줄어듦 */
.ceo-certs .subhead{margin-top:24px}
/* 인사말·연혁 칸 맨 위 제목(20261024-22): 칸 맨 위라 위 여백 없음, 아래는 인증 그림 칸과 같은 20px.
   휴대폰·태블릿은 연혁이 인사말 아래로 내려가 칸 사이 32px + 24px = 다른 제목 위 56px. PC 는 두 칸 제목이 같은 줄 */
.ceo .ceo-h{margin:0 0 20px}
.ceo.intro>div+div>.ceo-h{margin-top:24px}
@media (min-width:961px){
  .ceo.intro{grid-template-rows:auto 1fr}
  .ceo.intro>:nth-child(2){grid-column:2;grid-row:1 / span 2}
  .ceo.intro>.ceo-certs{grid-column:1;grid-row:2}
  .ceo-certs .subhead{margin-top:0}
  .ceo.intro>div+div>.ceo-h{margin-top:0}
  .ceo-certs .certs{grid-template-columns:repeat(2,1fr)}
}
.timeline{list-style:none;border-left:2px solid var(--line);padding-left:22px}
.timeline li{position:relative;padding:0 0 18px}
.timeline li::before{content:"";position:absolute;left:-29px;top:8px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.timeline b{color:var(--blue);margin-right:10px;display:inline-block;min-width:68px;text-indent:0}
/* 둘째 줄부터는 내용 첫 글자 위치(연도 칸 68 + 10px)에 맞춤 — 연도는 왼쪽 칸에만, 동그라미는 li 기준이라 그대로 (20261024-06) */
.timeline li{padding-left:78px;text-indent:-78px}
/* 조직도: 회장 → 대표이사(옆 경영고문, 점선) → 공사부·경영전략부·관리부 (20261023-34) */
.org-top{display:flex;flex-direction:column;align-items:center;margin-top:20px}
.org-top b{position:relative;box-sizing:border-box;width:150px;padding:12px 20px;border-radius:10px;background:var(--navy);color:#fff;text-align:center;font-size:var(--fs-body)}
.org-top .org-ceo{background:var(--blue)}
/* 경영고문: 회장–대표이사 사이 세로선 가운데에서 오른쪽으로 실선, 회장·대표이사와 같은 크기 (문수형 2026-10-24) */
.org-mid{position:relative;align-self:stretch;height:76px}
.org-mid::before{content:"";position:absolute;left:calc(50% - 1px);top:0;bottom:0;border-left:2px solid #c3cbdb}
.org-mid::after{content:"";position:absolute;left:50%;top:calc(50% - 1px);width:70px;border-top:2px solid #c3cbdb}
.org-top .org-adv{position:absolute;left:calc(50% + 70px);top:50%;transform:translateY(-50%);white-space:nowrap}
.org-split::before{content:"";position:absolute;left:50%;top:-22px;height:22px;border-left:2px solid #c3cbdb}
.org-split{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.org-grp{background:#e9edf5;border-top:3px solid var(--navy);border-radius:14px;padding:16px}
.org-name{font-size:var(--fs-lead);font-weight:700;color:var(--navy);margin-bottom:12px}
.org{display:grid;grid-template-columns:1fr;gap:10px}
.org div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.org h5{font-size:var(--fs-md);margin-bottom:6px}
.org li{font-size:var(--fs-sm);color:var(--sub);list-style:none}
.subhead{font-size:var(--fs-xl);margin:56px 0 4px}
.chair{margin-top:24px}
.minihead{font-size:var(--fs-lead);color:var(--navy);margin-bottom:14px}
/* 인증·특허·회장 인증서 그림(20261023-28): 문서라 잘라내지 않음(비율 그대로, object-fit 없음). 흰 바탕·얇은 테두리·옅은 그림자, 누르면 원본 새 탭.
   PC 5칸 / 태블릿 3칸 / 휴대폰 2칸, 칸 위쪽 맞춤(그림 높이가 조금씩 달라도 캡션이 그림 바로 아래) */
.certs{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:20px;align-items:start}
.certs figure{margin:0;break-inside:avoid;page-break-inside:avoid}
.certs a{display:block;background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px;box-shadow:0 2px 10px rgba(22,48,107,.08);transition:box-shadow .2s,border-color .2s}
.certs img{display:block;width:100%;height:auto}
.certs figcaption{margin-top:10px;font-size:var(--fs-sm);line-height:1.5;color:var(--sub);word-break:keep-all}
@media (hover:hover){.certs a:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(22,48,107,.16)}}
@media (prefers-reduced-motion:reduce){.certs a{transition:none}}
@media (max-width:960px){.certs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.certs{grid-template-columns:repeat(2,1fr);gap:16px}.certs figcaption{font-size:var(--fs-body)}}

/* 기술력 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.panel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.panel div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.panel small{color:var(--blue);font-weight:700;font-size:var(--fs-2xs)}
.panel b{display:block;margin:4px 0 2px}
.panel span{color:var(--sub);font-size:var(--fs-xs)}

/* 공사실적 */
.tools{display:flex;gap:10px;flex-wrap:wrap;margin:32px 0 18px}
.tools select,.tools input{font:inherit;font-size:var(--fs-body);padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}
.tools input{flex:1;min-width:200px}
.count{color:var(--sub);font-size:var(--fs-sm);margin-bottom:10px}
/* 실적(data/projects.js)을 불러오기 전(#projects.wait, index.html 스크립트가 붙였다 뗌): 글 없이 표·시공 사진 자리 높이만 잡아 둔다(대략값) */
#projects.wait .count{min-height:1100px}
#projects.wait .gallery{min-height:320px} /* 한 줄 띠 높이(1400px 에서 약 317px) */
@media (max-width:960px){#projects.wait .count{min-height:1340px}#projects.wait .gallery{min-height:345px}}
@media (max-width:720px){#projects.wait .count{min-height:1420px}#projects.wait .gallery{min-height:330px}}
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.tbl th,.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:var(--fs-md)}
.tbl th{background:#eef2f9;font-size:var(--fs-xs);color:var(--sub);font-weight:700}
.tag{display:inline-block;white-space:nowrap;font-size:var(--fs-2xs);font-weight:700;padding:2px 9px;border-radius:999px;background:#e6edfb;color:var(--blue)}
.tag.b{background:#fdeee3;color:#b4541a}
.tag.n{background:#e6f4ec;color:#1d6b3f} /* 신축공사: 초록 (대비 약 6:1) */
.tag.e{background:#eef0f3;color:#4a5262} /* 기타공사: 차분한 회색 (대비 약 7:1) */
/* 실적 0건 안내(표 자리): 글(span#noResult, 작가가 채움) + [조건 지우기] + 문의 링크. 16px, 누르는 곳 44px 이상 */
.tbl[hidden],.no-result[hidden]{display:none}
.no-result{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;text-align:center;font-size:var(--fs-body);color:var(--ink)}
.no-result #noResult{display:block}
.no-result #noResult:empty{display:none}
.no-result-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.no-result #noResult:empty+.no-result-btns{margin-top:0}
.no-result-btns button,.no-result-btns a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:10px;
  font:inherit;font-size:var(--fs-body);font-weight:700;cursor:pointer;text-decoration:none}
.no-result-btns button{border:1px solid var(--navy);background:var(--navy);color:#fff}
.no-result-btns a{border:1px solid var(--line);background:#fff;color:var(--blue)}
.more{display:block;margin:18px auto 0;padding:12px 26px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-weight:700;cursor:pointer}
.more[hidden]{display:none} /* 실적 "더 보기"는 html 에서 hidden — 스크립트가 풀어 줌(스크립트 끔이면 안 보임, 20261024-20) */
/* 스크립트 끔 안내(<noscript>, 20261024-20): 표 아래 상자, 16px, 전화 링크 44px */
.nojs-note{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;font-size:var(--fs-body);color:var(--ink)}
.nojs-note a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);font-weight:700}
/* 시공 사진 한 줄 띠(20261024-02): 화면에 약 3.3장, 나머지는 옆으로 넘겨서. 흐름·단추는 index.html 스크립트(scrollLeft).
   스크롤바는 숨기고 단추·마우스 흐름·휠/트랙패드·키보드(띠에 포커스 후 ←→)로 넘김 */
.gal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.gal-nav{display:flex;gap:8px;flex:none}
.gal-nav[hidden]{display:none}
.gal-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;
  background:#fff;color:var(--navy);cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease,opacity .25s ease}
.gal-btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.gal-btn[aria-disabled="true"]{opacity:.35;cursor:default}
.gal-btn[aria-disabled="true"]:hover{background:#fff;border-color:var(--line);color:var(--navy)}
.gallery{display:flex;gap:16px;margin-top:20px;overflow-x:auto;overscroll-behavior-x:contain}
@media (min-width:721px){.gallery{scrollbar-width:none}.gallery::-webkit-scrollbar{display:none}}
.gallery figure{flex:0 0 calc((100% - 48px) / 3.3);background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
/* 사진 자리(.ph): 사진이 늦게 떠도 4:3 자리와 옅은 배경이 먼저 잡힌다. 사진은 모두 4:3 로 잘라 채움 */
.gallery .ph{aspect-ratio:4/3;background:#e9eef6;overflow:hidden;flex:none}
.gallery img{display:block;width:100%;height:100%;object-fit:cover}
.gallery figcaption{padding:12px 14px;font-size:var(--fs-sm);flex:1}
.gallery figcaption{display:flex;flex-direction:column}
.gallery figcaption .gc{margin-top:auto;padding-top:8px} /* 건설사는 카드 맨 아래 — 설명 줄 수가 달라도 빈 칸이 설명과 건설사 사이로 가서 고르게 보임 (20261024-12) */
@media (min-width:721px) and (max-width:960px){.gallery figure{flex-basis:calc((100% - 16px) / 2.3)}}
@media (prefers-reduced-motion:reduce){.gal-btn{transition:none}}
/* 사진이 다 불러지면 서서히 나타나기 — 숨김은 .js 아래에서만, 불러진 사진(.on)은 보임 */
.js .gallery img{opacity:0;transition:opacity .6s ease}
.js .gallery img.on{opacity:1}
/* 마우스 있는 화면만 살짝 확대 */
@media (hover:hover){
  .gallery img{transition:transform .4s ease}
  .js .gallery img{transition:opacity .6s ease,transform .4s ease}
  .gallery figure:hover img{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  .gallery img,.js .gallery img{opacity:1;transition:none}
  .gallery figure:hover img{transform:none}
}
.gallery figcaption span{display:block;color:var(--sub);font-size:var(--fs-xs)}
/* 시공 사진 출처(20261024-15, 문수형 결정): 사진 위 띠는 없애고 꼬리말 맨 아래 "사진 출처" 한 줄 목록(#photoCredits).
   PC 13px 작은 글씨, 휴대폰 16px(footer 글 기준)·링크 누르는 칸 44px. 링크는 원본 페이지·라이선스 문서, 새 탭 */
.gallery-pos{display:none} /* 위치 표시 "1 / N" 은 휴대폰에서만 (아래 720px 이하) */

/* 협력사 */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:36px}
.logos>.lg{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;align-items:center;justify-content:center;height:72px} /* 로고 칸: 누르는 요소 아님(링크·hover 없음) */
.logos>.lg>img{max-height:40px;max-width:100%;width:auto;height:auto;filter:grayscale(1);opacity:.8}
.logos .fr{width:min(131px,100%);filter:grayscale(1);opacity:.8} /* 옛 로고 그림(151×46)을 40px 높이로 줄인 크기와 같게 */
/* .fr = 새 로고·글자 로고 틀: 옛 로고 그림처럼 151:46 흰 바탕에 얇은 회색 테두리, 로고는 가운데에 비율 그대로 */
.fr{display:flex;align-items:center;justify-content:center;aspect-ratio:151/46;background:#fff;border:1px solid #d9d9d9;overflow:hidden}
.fr img{display:block;width:78%;height:58%;object-fit:contain}
.fr img.inv{filter:brightness(0)} /* 흰 글씨 로고(어두운 머리글용)는 검게 */
.fr.lt>span{display:inline-block} /* 이름 조각: 줄은 조각 사이에서만 바뀜 */
.fr.lt{padding:0 6%;font-size:13px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#333;text-align:center;overflow-wrap:anywhere;filter:none} /* 글자 로고는 이미 회색 글씨 — filter 를 걸면 인쇄 PDF 에서 그림으로 굳어 글자가 안 남으므로 끔 */

/* 중간 연락 띠 (#partners 바로 아래): 남색 바탕, 왼쪽 글·오른쪽 버튼 2개(48px·16px). 휴대폰은 글 위·버튼 아래 */
.band{background:var(--navy);color:#fff;padding:36px 0}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.band p{font-size:var(--fs-lead);font-weight:600;line-height:1.55;flex:1 1 360px;max-width:680px}
.band-btns{display:flex;gap:10px;flex-wrap:wrap}
.band-btns a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:10px;
  font-size:var(--fs-body);font-weight:700;white-space:nowrap;transition:background-color .2s,color .2s}
.band-btns a:first-child{background:#fff;color:var(--navy)}
.band-btns a:last-child{background:var(--blue);color:#fff}
.band-btns a:first-child:hover{background:#e6edfb}
.band-btns a:last-child:hover{background:#2a6af0}
.band :focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){.band-btns a{transition:none}}

/* 문의 */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:36px}
.info dt{font-size:var(--fs-xs);color:var(--sub);font-weight:700;margin-top:18px}
.info dd{font-size:var(--fs-lead)}
.info dd a{color:var(--blue);font-weight:700}
.info dd.map{margin-top:14px} /* 네이버 지도 링크 줄 (20261024-15, 인라인 style 에서 옮김) */
form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:grid;gap:12px}
form input,form textarea{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;width:100%}
form textarea{min-height:130px;resize:vertical}
form button{background:var(--navy);color:#fff;border:0;padding:14px;border-radius:10px;font:inherit;font-weight:700;cursor:pointer}
form small{color:var(--sub);font-size:var(--fs-sm)} /* 개인정보 안내는 읽는 문장 — PC 14px, 휴대폰 16px(720px 이하 규칙) (20261024-15) */
/* 문의 양식 이름표(20261024-09): 칸 위에 보이게 — 16px·진한 글씨, 앞 칸과는 띄우고 자기 칸에는 붙임 */
form label{font-size:var(--fs-body);font-weight:700;color:var(--ink);line-height:1.4;margin:6px 0 -6px}
form label:first-of-type{margin-top:0}
/* 필수 칸 표시(20261024-18): 이름표 옆 "필수" 글자 — 색만이 아니라 글자로 구분, 화면 낭독기도 이름표와 함께 읽음(입력칸은 required). PC 13px, 휴대폰 16px. 파랑 #1f5bd1 / 흰 바탕 대비 약 6:1 */
form label .must{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--blue);border-radius:4px;color:var(--blue);font-size:var(--fs-xs);font-weight:700;line-height:1.3;vertical-align:1px}
form input,form textarea{min-height:44px}

footer{background:#0f1b38;color:#aeb7cc;padding:40px 0;font-size:var(--fs-sm)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer b{color:#fff}
.nw,footer .nw{white-space:nowrap} /* 번호(특허번호·사업자번호)는 중간에서 줄 안 바꿈 */
footer a.tel{color:#fff}
footer a.tel:hover{text-decoration:underline;text-underline-offset:3px}

/* #partners "모두 보기"(휴대폰에서만, 아래 720px 이하): PC 는 안 보이고 로고 모두 */
.logos-more{display:none}

/* 휴대폰 하단 [전화 | 견적문의] 바 — 721px 이상은 숨김 */
.dock{display:none}

/* 휴대폰·태블릿 */
@media (max-width:960px){
  .cards{grid-template-columns:1fr 1fr}
  .panel{grid-template-columns:repeat(2,1fr)}
  .logos{grid-template-columns:repeat(4,1fr)}
  .ceo,.split,.contact{grid-template-columns:1fr;gap:32px}
}
/* 태블릿만(721~960px, 20261024-20). 720 이하 휴대폰·961 이상 PC 는 이 묶음이 걸리지 않음 */
@media (min-width:721px) and (max-width:960px){
  /* 머리글 한 줄: 로고·메뉴 간격·전화 버튼을 화면 폭에 따라 줄임(721px 에서 로고 28px·메뉴 간격 14px → 960px 에서 40px·30px, PC 와 이어짐).
     전화 버튼은 줄바꿈 없이 한 줄, 로고·메뉴·전화 사이 16px 이상 */
  .nav{--lh:calc(28px + (100vw - 721px) * .05);gap:16px}
  .nav>a:first-child{flex:none}
  .nav img,header .nav img{height:var(--lh)}
  header.thin .nav img{height:calc(var(--lh) * .85)}
  .menu{gap:calc(14px + (100vw - 721px) * .067);font-size:var(--fs-sm)}
  .menu a[href="#contact"]{padding:0 16px}
  .call{flex:none;white-space:nowrap;padding:8px 12px;font-size:var(--fs-xs)}
  /* 공사실적 표: 칸 여백을 줄이고, 띄어쓰기 없는 긴 이름은 칸 안에서 접히게(keep-all 은 그대로) — 가로 넘침 없음 */
  .tbl th,.tbl td{padding:12px 10px}
  .tbl td{overflow-wrap:anywhere}
  .tbl td:nth-child(2){white-space:nowrap} /* 연도(4자리)는 접지 않음 */
  /* 견적문의 연락처: 한 칸이 세로로 길고 오른쪽이 비던 것을 두 단으로(글·순서 그대로) */
  .info{columns:2;column-gap:32px}
  .info dt{break-after:avoid}
  .info dd{break-inside:avoid}
  .info>dt:first-child{margin-top:0} /* 둘째 단 맨 위(주소)와 첫 단 맨 위(전화) 높이 맞춤 */
  /* 인증·특허 2장은 2칸(셋째 칸 빈 자리 없음). 회장 인증서·표창은 3칸 그대로 */
  .ceo-certs .certs{grid-template-columns:repeat(2,1fr);max-width:680px} /* 폭 상한(20261024-21): 960px 에서도 한 장 약 328px — 휴대폰 720px 때와 비슷 */
}
@media (max-width:720px){
  section{padding:68px 0}
  .wrap{padding:0 16px}
  /* 머리글 56px (PC 68px 그대로) */
  html{scroll-padding-top:60px}
  .nav{height:56px}
  /* 화면 전체 메뉴: 머리글 아래 전체를 덮음, 큰 글자, 맨 아래 연락처 */
  .menu{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;height:calc(100vh - 56px);height:calc(100dvh - 56px);
    background:#fff;flex-direction:column;gap:0;overflow-y:auto;overscroll-behavior:contain;
    padding:8px 20px calc(24px + env(safe-area-inset-bottom,0px));font-size:var(--fs-menu);font-weight:700}
  .menu.open{display:flex;animation:menuIn .2s ease both}
  .menu>a{display:flex;align-items:center;min-height:60px;border-bottom:1px solid var(--line);color:var(--navy);letter-spacing:-.02em}
  .menu.open>a{animation:menuItem .25s cubic-bezier(.22,.61,.36,1) both}
  .menu>a[aria-current="true"]{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)} /* 지금 보는 구역 (20261024-15) */
  .menu.open>a:nth-child(2){animation-delay:.01s}
  .menu.open>a:nth-child(3){animation-delay:.02s}
  .menu.open>a:nth-child(4){animation-delay:.03s}
  .menu.open>a:nth-child(5){animation-delay:.04s}
  .menu.open>a:nth-child(6){animation-delay:.05s}
  .menu-info{display:block;margin-top:auto;padding-top:28px;font-size:var(--fs-body);font-weight:400;color:var(--sub)}
  .menu-info dt{font-size:var(--fs-body);font-weight:700;margin-top:12px;color:var(--ink)}
  .menu-info dd a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-xl);font-weight:700;color:var(--blue)}
  /* 열리면 뒤 페이지 스크롤 막기. 머리글의 흐림(backdrop-filter)은 fixed 메뉴의 기준을 머리글로 바꾸므로 열릴 때 끈다 */
  html.menu-open{overflow:hidden} /* body 까지 막으면 body 가 스크롤 상자가 되어 머리글 sticky 가 풀린다 — html 만 */
  html.menu-open header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  header:has(.menu.open){backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .nav{gap:8px}
  .nav>a:first-child{flex:0 1 auto;min-width:0;margin-right:auto;display:flex;align-items:center}
  .nav img{height:36px;max-width:100%;object-fit:contain;object-position:left center}
  .call{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;padding:0 13px;font-size:var(--fs-xs);white-space:nowrap}
  .burger{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;position:relative}
  .hero{min-height:72vh;min-height:min(72svh,680px);padding:90px 0 100px}
  /* 휴대폰용 첫 화면 사진: 원본 가운데 800x660 사본(느린 망에서 빨리 받게, 20261023-23). preload 도 index.html 에서 같은 폭으로 나눔 */
  .hero::before{background-image:linear-gradient(100deg,rgba(14,32,74,.92) 0%,rgba(14,32,74,.82) 50%,rgba(14,32,74,.25) 100%),url(images/hero-concrete_m.jpg)}
  .hero::before{background-image:linear-gradient(100deg,rgba(14,32,74,.92) 0%,rgba(14,32,74,.82) 50%,rgba(14,32,74,.25) 100%),image-set(url(images/hero-concrete_m.webp) type("image/webp"),url(images/hero-concrete_m.jpg) type("image/jpeg"))}
  @supports (inset:0) and (not (background-image:image-set(url("a.webp") type("image/webp")))){
    .hero::before{background-image:linear-gradient(100deg,rgba(14,32,74,.92) 0%,rgba(14,32,74,.82) 50%,rgba(14,32,74,.25) 100%),-webkit-image-set(url(images/hero-concrete_m.webp) 1x)}
  }
  /* 첫 화면 버튼: 폭 가득, 세로로 쌓기, 높이 48px 이상 */
  .hero .btns{display:grid;grid-template-columns:1fr;gap:10px}
  .hero .btn{display:flex;align-items:center;justify-content:center;min-height:48px;width:100%;text-align:center}
  .stats{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .org-split{grid-template-columns:1fr}
  .org{grid-template-columns:1fr 1fr}
  .org>div:last-child:nth-child(odd){grid-column:1 / -1} /* 홀수 팀 부서(경영전략부·관리부)의 마지막 팀은 두 칸 폭 — 빈 반 칸 없게 (20261024-06) */
  .org-top b{width:120px;padding:12px 8px}
  .org-mid::after{width:36px}
  .org-top .org-adv{left:calc(50% + 36px)}
  .logos{grid-template-columns:repeat(3,1fr)}
  /* 로고 한 줄: 3개×2줄(가로 넘기기 없음), "모두 보기"는 아래 가운데 */
  .logo-strip{flex-direction:column;align-items:stretch;gap:4px;margin-top:16px}
  .logo-row{grid-template-columns:repeat(3,1fr);gap:4px}
  .logo-row>.lg{min-height:44px}
  .logo-row>.lg>img{max-height:30px}
  .logo-row .fr{width:min(98px,100%)}
  /* 글자 로고: 휴대폰은 16px 이상이어야 해서 틀(151:46) 안에 안 들어감 — 틀 없이 칸 가운데 글자만(두 줄까지) */
  .logos .fr.lt,.logo-row .fr.lt{width:100%;aspect-ratio:auto;border:0;background:none;padding:0;font-size:16px;font-weight:600;color:#555;letter-spacing:-.04em;flex-wrap:wrap;align-content:center}
  .logos>.lg:has(.lt){padding:6px} /* 글자 로고 칸은 안쪽 여백을 줄여 한 줄에 6자까지 */
  .logo-all{justify-content:center}
  .tbl thead{display:none}
  .tbl tr{display:block;padding:12px 14px;border-bottom:1px solid var(--line)}
  .tbl td{display:block;border:0;padding:2px 0}
  .tbl td.d{color:var(--sub);font-size:var(--fs-body)}
  /* 중간 연락 띠: 글 위, 버튼은 폭 가득 나란히(좁으면 아래로) */
  .band{padding:28px 0}
  .band p{flex-basis:100%}
  .band-btns{width:100%}
  .band-btns a{flex:1 1 auto;padding:0 14px}

  /* 휴대폰 읽기 크기: 본문성 글 16px, 꼬리표 13px 이상 */
  .call{font-size:var(--fs-body);padding:0 12px}
  .card p,.org h5,.org li,.panel span,.stats span,.count,.tbl td,
  .gallery figcaption,.gallery figcaption span,form small,footer,
  .card .detail h4,.card .detail li{font-size:var(--fs-body)}
  .tag,.panel small{font-size:var(--fs-xs)}

  /* 휴대폰 누르는 곳 44px 이상 */
  .nav>a:first-child{min-height:44px}
  .info dd a{display:inline-flex;align-items:center;min-height:44px}
  footer a.tel{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  form label .must{font-size:var(--fs-body);vertical-align:0}
  /* 견적문의 순서(20261024-24): 휴대폰은 제목·안내문 → 양식 → 연락처 목록(문의하러 온 사람이 바로 양식을 봄). 태블릿·PC 는 html 순서 그대로 */
  .contact>form{order:-1}

  /* 시공 사진: 옆으로 넘기기 (한 장씩 멈춤, 다음 사진이 오른쪽에 살짝 보임). 자동 넘김 없음, 스크롤바 그대로 */
  .gallery{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:10px}
  .gallery figure{flex:0 0 85%;scroll-snap-align:start}
  .gal-nav,.gal-nav:not([hidden]){display:none} /* 휴대폰은 손가락 넘기기 + "1 / N" — 단추 없음 */
  /* 몇 번째 사진인지 "1 / N" (안내문이라 16px). 숫자는 index.html 스크립트가 바꾼다 */
  .gallery-pos:not([hidden]){display:block;margin:6px 0 0;text-align:center;font-size:var(--fs-body);color:var(--sub);font-variant-numeric:tabular-nums}
}

/* 휴대폰 화면 전용(인쇄 제외 — 종이 폭도 720px 이하라 걸리지 않게 screen 만):
   - 하단 바가 보이면(html.dock-on, index.html 스크립트) 머리글 전화 숨김 — 전화 버튼이 두 개 동시에 보이지 않게
   - #partners 로고는 처음 12개, "모두 보기"를 누르면(.all) 모두 */
@media screen and (max-width:720px){
  html.dock-on .call{display:none}
  .logos:not(.all)>:nth-child(n+13){display:none}
  .logos-more:not([hidden]){display:block;min-height:48px;margin-top:16px;font-size:var(--fs-body)}
  /* 사업분야 카드가 한 줄씩 쌓이면 옆 카드와 줄 맞출 일이 없음 — 링크 줄은 있는 링크만큼(44px씩), "관련 실적" 없는 카드(VE)에 빈 자리 없음 */
  .card .acts{grid-template-rows:none;grid-auto-rows:44px}
  .card .acts .rel,.card .acts .ask{grid-row:auto}
}

@keyframes menuIn{from{opacity:0}}
@keyframes menuItem{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.menu.open,.menu.open>a{animation:none}}

/* 스크롤 나타나기 — 숨김은 .js(관찰 가능할 때만 붙음) 아래에서만. 한 번 .in 이 붙으면 그대로 */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i,0) * 80ms)}
.js .reveal.in{opacity:1;transform:none}
@media (max-width:720px){
  .js .reveal{transform:translateY(12px);transition-delay:calc(var(--i,0) * 40ms)}
  .js .reveal.in{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* 휴대폰 하단 바: 아래 고정, 두 칸 52px·16px, 아이폰 홈 막대(safe-area) 만큼 아래 여백.
   body 아래 여백(바 높이만큼)은 footer 색으로 칠해 footer 밑에 흰 띠가 생기지 않게 한다. */
@media (max-width:720px){
  body{--dock-h:calc(68px + env(safe-area-inset-bottom,0px));padding-bottom:var(--dock-h);
    background:var(--bg) linear-gradient(#0f1b38,#0f1b38) left bottom/100% var(--dock-h) no-repeat}
  .dock{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(20,40,90,.08);
    transition:transform .25s ease,visibility 0s}
  .dock a{flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:10px;font-size:var(--fs-body);font-weight:700;white-space:nowrap}
  .dock a:first-child{border:1px solid var(--navy);color:var(--navy);background:#fff}
  .dock a:last-child{background:var(--navy);color:#fff}
  .dock.hide{transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
}
@media (prefers-reduced-motion:reduce){
  .dock,.dock.hide{transition:none}
}

/* 인쇄·PDF 저장: 고정된 것 풀기, 누르는 장치 숨기기, 숨은 글·사진 모두 보이기, 배경 사진 빼고 글은 검은색,
   외부 링크만 뒤에 (주소), 카드·표 줄·사진이 쪽 사이에서 잘리지 않게 */
@media print{
  @page{margin:14mm 12mm}
  html{scroll-padding-top:0}
  body,body *{color:#000 !important;background-color:transparent !important;box-shadow:none !important;text-shadow:none !important}
  body{background:none !important;padding-bottom:0 !important;font-size:11pt}
  header{position:static !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;margin:0 !important;border-bottom:1px solid #999}
  .nav{height:auto !important;padding:6px 0}
  .skip,.burger,.menu,.menu-info,.dock,.gallery-pos,.gal-nav,.tools,.more,.band,.card .acts,.card .ph{display:none !important} /* 연락 띠·분야 문의·관련 실적 링크: 누르는 장치, 문구는 #contact 에 그대로. 카드 사진은 종이 쪽수만 늘려서 뺌 */
  #contact form{display:none !important} /* 빈 입력칸은 종이에서 쓸 수 없음 — 연락처·주소는 왼쪽 묶음과 footer 에 그대로 */
  .timeline li::before{color:#000 !important;border-color:#000 !important}
  .call{padding:0;border-radius:0}
  /* 첫 화면: 배경 사진·움직임 빼고 글만 */
  .hero{min-height:0 !important;padding:24px 0 8px !important;display:block}
  .hero::before{display:none;background:none !important}
  .hero .wrap>*{animation:none !important;opacity:1 !important;transform:none !important}
  .hero p{opacity:1}
  .hero .btns{display:none !important}
  .stats{margin-top:12px;border:1px solid #999}
  section{padding:24px 0 !important}
  /* 스크롤 나타나기·시공 사진 서서히: 인쇄에선 처음부터 다 보이게 */
  .reveal,.js .reveal,.gallery img,.js .gallery img{opacity:1 !important;transform:none !important;transition:none !important}
  .logos>.lg>img,.logos .fr{opacity:1;filter:grayscale(1)}
  .logos .fr.lt{filter:none}
  .logo-strip{display:none !important} /* 인쇄: #partners 에 모두 있으므로 위 한 줄은 뺌 */
  /* 휴대폰 폭으로 찍혀도 사진은 옆으로 넘기기 대신 격자로 */
  .gallery{display:grid !important;grid-template-columns:repeat(5,1fr) !important;gap:8px;overflow:visible !important;padding-bottom:0}
  /* 19장 모두(20261024-08): 5열로 작게 — 3열 12장일 때와 쪽 수 같음(A4 13쪽). 완공 사진은 출처 줄(원본·라이선스 주소)까지 */
  .gallery figure,.gallery figure:first-child{grid-column:auto !important;grid-row:auto !important;flex:none}
  .gallery figcaption,.gallery figure:first-child figcaption{padding:6px 8px;font-size:9pt}
  .gallery figcaption span{font-size:8pt}
  .gallery figcaption{display:block}
  .gallery figcaption .gc{padding-top:0}
  /* 첫 사진도 다른 사진과 같은 캡션 크기 (721px 이상 화면의 큰 캡션 규칙을 인쇄에서 덮음) */
  .gallery figure:first-child figcaption{padding:6px 8px !important;font-size:9pt !important}
  .gallery figure:first-child figcaption span{font-size:8pt !important}
  /* 쪽 나눔: 제목·설명 바로 뒤에서 끊지 않고(제목·설명이 본문과 같은 쪽), 카드·표 줄·사진·연혁 줄은 쪼개지 않음 */
  h2,h3,h4,h5,.subhead,.eyebrow,.lead{break-after:avoid;page-break-after:avoid}
  .org,.org-top,.org-split,.contact{break-inside:avoid;page-break-inside:avoid}
  #partners{break-before:page;page-break-before:always} /* 시공 사진이 23장(5열 5줄)이 되며 "함께하는 건설사" 제목만 쪽 끝에 남음 → 새 쪽에서 시작 (20261024-16) */
  .card,.org div,.panel div,.stats div,.gallery figure,.tbl tr,.timeline li,.contact dl,form,footer .wrap>div{break-inside:avoid;page-break-inside:avoid}
  /* 종이 폭(A4 약 700px)은 휴대폰 화면 폭과 비슷해 휴대폰 배치가 걸리므로, 인쇄에선 칸을 PC 처럼 나누고 글을 줄인다 */
  .stats{grid-template-columns:repeat(4,1fr) !important}
  .cards{grid-template-columns:repeat(3,1fr) !important;gap:10px}
  .org-split{grid-template-columns:repeat(3,1fr) !important;gap:10px}
  .org{grid-template-columns:1fr !important}
  .org-top b{width:150px;padding:12px 20px}
  .org-mid::after{width:70px}
  .org-top .org-adv{left:calc(50% + 70px)}
  .panel{grid-template-columns:repeat(4,1fr) !important;gap:8px}
  .split,.contact{gap:12px}
  .card,.org div,.panel div{padding:12px}
  .stats div{padding:12px}
  .card p,.org h5,.org li,.panel span,.stats span,.count,.info dd,form small{font-size:10pt !important}
  /* 사업분야 "자세히": 종이에선 펼친 상태로(누르는 "자세히" 줄은 숨김), 옆 카드 높이 고정(.pin)은 풂 */
  .card .detail summary{display:none !important}
  .card .detail::details-content{content-visibility:visible !important;display:block !important}
  .card .detail{border-top:1px solid #999}
  .card .detail-body{animation:none !important;padding:0 0 4px}
  .card .detail h4{font-size:10pt !important;margin:6px 0 2px}
  .card .detail li{font-size:10pt !important;margin:1px 0}
  .card .detail li::before{background:#000 !important}
  .card .detail .files a{min-height:0;padding:2px 0;font-weight:400}
  .card .detail .files a::after{content:none}
  .cards .card.pin{align-self:stretch !important;min-height:0 !important}
  /* 펼친 카드는 길어서 통째로 다음 쪽으로 밀리면 "사업분야" 제목만 남으므로, 펼친 카드만 칸(목록) 사이에서 나눌 수 있게. 목록 하나는 쪼개지 않음 */
  .cards .card:has(.detail),.cards:has(.detail) .card{break-inside:auto;page-break-inside:auto}
  .card .detail ul{break-inside:avoid;page-break-inside:avoid}
  .tbl{display:table !important}
  .tbl[hidden]{display:none !important} /* 실적 0건이면 인쇄에도 빈 표 머리글을 내지 않음 */
  .tbl thead{display:table-header-group !important}
  .tbl tbody{display:table-row-group !important}
  .tbl tr{display:table-row !important;padding:0}
  .tbl th,.tbl td{display:table-cell !important;padding:4px 6px !important;font-size:9pt !important;border-bottom:1px solid #ccc !important}
  /* 표 머리글과 본문 글 시작을 맞춤: 구분 꼬리표의 안쪽 여백(9px)을 인쇄에선 뺌 (배경이 없어 꼬리표 모양도 없음) */
  .tbl .tag{padding:0 !important;border-radius:0;font-size:inherit !important;font-weight:400}
  .tbl th,.tbl td{vertical-align:top}
  /* 외부 링크(http…)만 뒤에 주소 표시. 건설사 로고 34개는 칸이 좁아 빼고, 사이트 안 링크·전화·파일은 표시 안 함 */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;font-weight:400;word-break:break-all}
  footer{border-top:1px solid #999;padding:16px 0}
}
.q-result{margin-top:12px;font-weight:600;color:var(--navy)}
.q-result a{color:var(--blue);font-weight:700} /* 전송 실패 안내의 전화·메일 링크(20261024-24) */
@media (max-width:720px){
  .q-result{font-size:var(--fs-body)}
  .q-result a{display:inline-flex;align-items:center;min-height:44px}
}