/* 건물집사시설관리 허브 — 공통 스타일 */
:root{
  --ink:#171b1f; --sub:#4b5563; --paper:#fff; --muted:#f4f5f6; --line:#e3e5e8;
  --brand:#1c2430; --brand2:#2a3547; --accent:#c96a2c; --accent-ink:#8a4415;
  --radius:10px; --maxw:1280px;
  font-size:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  line-height:1.7; word-break:keep-all; overflow-wrap:break-word;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
.skip-link{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* 헤더 */
.site-header{position:sticky; top:0; z-index:100; background:rgba(28,36,48,.97); backdrop-filter:saturate(140%) blur(6px); color:#fff}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-size:19px; font-weight:800; letter-spacing:-.02em; text-decoration:none; color:#fff}
.brand small{display:block; font-size:11px; font-weight:500; color:#9aa5b1; letter-spacing:0}
.nav{display:flex; gap:6px; align-items:center}
.nav a{padding:10px 14px; text-decoration:none; font-size:14px; font-weight:600; border-radius:8px; color:#dbe1e8}
.nav a:hover,.nav a:focus-visible{background:rgba(255,255,255,.1); color:#fff}
.nav a.cta{background:var(--accent); color:#fff}
.nav a.cta:hover{background:var(--accent-ink)}
.burger{display:none; background:none; border:0; color:#fff; padding:10px; cursor:pointer}
.burger svg{width:26px; height:26px}
@media (max-width:880px){
  .nav{position:fixed; inset:64px 0 0 0; background:var(--brand); flex-direction:column; align-items:stretch; padding:14px; gap:2px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; overflow-y:auto}
  .nav.open{opacity:1; pointer-events:auto; transform:translateY(0)}
  .nav a{padding:14px 12px; font-size:16px}
  .burger{display:inline-flex}
}

/* 히어로 */
.hero{background:linear-gradient(160deg,var(--brand),var(--brand2)); color:#fff; padding:56px 0}
.hero-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center}
.hero h1{font-size:clamp(28px,4.4vw,46px); margin:0 0 14px; font-weight:800; letter-spacing:-.02em}
.hero p{font-size:clamp(14px,1.4vw,17px); color:#cdd5de; max-width:640px; margin:0 0 22px}
.hero .ctas{display:flex; gap:12px; flex-wrap:wrap}
.hero-photo{width:100%; height:260px; object-fit:cover; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.25)}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr} .hero-photo{height:180px}}
.btn{display:inline-block; padding:13px 22px; border-radius:8px; text-decoration:none; font-weight:700; font-size:15px}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-outline{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5)}
.btn-outline:hover{border-color:#fff}

/* 섹션 공통 */
section{padding:56px 0}
section.alt{background:var(--muted)}
.section-head{max-width:720px; margin:0 0 32px}
.eyebrow{color:var(--accent-ink); font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase}
h2{font-size:clamp(24px,3vw,34px); margin:8px 0 10px; letter-spacing:-.01em}
h2.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.lead{color:var(--sub); font-size:16px}

/* 회사소개 */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start}
.about-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.about-card b{color:var(--accent-ink)}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}}

/* 대표 서비스 6종 그리드 — 3개씩 2줄 */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:820px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.services-grid{grid-template-columns:1fr}}
.car-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); display:flex; flex-direction:column}
.car-card .thumb{aspect-ratio:4/3; background:var(--muted); position:relative; overflow:hidden}
.car-card .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.car-card .thumb.noimg{display:flex; align-items:center; justify-content:center; color:var(--sub); font-weight:800; font-size:15px; text-align:center; padding:16px}
.car-card .num{position:absolute; top:10px; left:10px; background:rgba(28,36,48,.85); color:#fff; font-size:12px; font-weight:800; padding:3px 9px; border-radius:20px}
.car-card .body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1}
.car-card .kw{font-size:19px; font-weight:800}
.car-card .desc{font-size:13.5px; color:var(--sub); flex:1}
.car-card .link{font-size:13px; font-weight:700; color:var(--accent-ink)}

/* 18개 사이트 — 정사각 카드 */
.site-cards{display:grid; grid-template-columns:repeat(9,1fr); gap:8px}
@media (max-width:900px){.site-cards{grid-template-columns:repeat(6,1fr)}}
@media (max-width:600px){.site-cards{grid-template-columns:repeat(4,1fr)}}
@media (max-width:380px){.site-cards{grid-template-columns:repeat(3,1fr)}}
.site-card{min-width:0; aspect-ratio:1/1; position:relative; overflow:hidden; display:block; background:var(--muted); border:1px solid var(--line); border-radius:8px; text-decoration:none; color:#fff}
.site-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.site-card:hover{border-color:var(--accent)}
.site-card .label{position:absolute; inset:auto 0 0 0; padding:5px 6px 6px; background:linear-gradient(to top,rgba(15,20,27,.88),rgba(15,20,27,0)); text-align:center}
.site-card .kw{font-size:10.5px; font-weight:700; line-height:1.25; display:block}
.site-card.noimg{background-color:var(--brand)}

/* 현장 사진 갤러리 */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.gallery figure{margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--muted)}
.gallery img{aspect-ratio:3/4; object-fit:cover; width:100%}
.gallery figcaption{padding:8px 10px; font-size:12.5px; color:var(--sub)}
/* 현장 작업 사례 — 4개씩 2줄 */
.gallery-4x2{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.gallery-4x2{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.gallery-4x2{grid-template-columns:1fr}}
.no-photo-card{border:1.5px dashed var(--line); border-radius:var(--radius); padding:24px; text-align:center; color:var(--sub); background:#fff}

/* 표·목록 */
table{width:100%; border-collapse:collapse; margin:14px 0; table-layout:fixed}
th,td{border:1px solid var(--line); padding:11px 12px; text-align:left; font-size:14.5px; vertical-align:top; overflow-wrap:anywhere}
th{background:var(--muted)}
ul.check{padding-left:0; list-style:none; display:grid; gap:8px}
ul.check li{padding-left:26px; position:relative}
ul.check li::before{content:"✓"; position:absolute; left:0; color:var(--accent-ink); font-weight:800}

/* 프로세스 */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:step}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.step .n{width:32px; height:32px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; margin-bottom:10px}
.step h4{margin:0 0 6px; font-size:15.5px}
.step p{margin:0; font-size:13.5px; color:var(--sub)}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line); padding:16px 0}
.faq-item h3{font-size:16px; margin:0 0 8px}
.faq-item p{margin:0; color:var(--sub); font-size:14.5px}

/* CTA */
.cta-band{background:var(--brand); color:#fff; border-radius:16px; padding:40px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between}
.cta-band h2{color:#fff}
.cta-band .phone{font-size:26px; font-weight:800; color:#fff; text-decoration:none}

/* 링크형 연관 서비스 */
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:820px){.related-grid{grid-template-columns:1fr}}
.related-card{display:block; text-decoration:none; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.related-card:hover{border-color:var(--accent)}
.related-card .kw{font-weight:800; font-size:16px; margin-bottom:6px}
.related-card .go{font-size:13px; color:var(--accent-ink); font-weight:700}

/* 외부사이트 링크 강조 박스 */
.ext-box{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; background:#fff; border:1.5px solid var(--brand); border-radius:var(--radius); padding:20px 22px}
.ext-box > div{min-width:0}
.ext-box .t{font-size:13px; color:var(--sub)}
.ext-box .u{font-weight:800; font-size:16px; overflow-wrap:anywhere}

/* 브레드크럼 */
.crumb{font-size:13px; color:var(--sub); padding:14px 0 0}
.crumb a{text-decoration:none; color:var(--sub)}
.crumb a:hover{color:var(--accent-ink)}

/* 상세 히어로(내부 페이지) */
.svc-hero{background:linear-gradient(160deg,var(--brand),var(--brand2)); color:#fff; padding:40px 0 40px}
.svc-hero h1{font-size:clamp(28px,4.2vw,42px); margin:6px 0 14px}
.svc-hero .answer{font-size:16px; color:#e7ebef; max-width:760px}
.svc-hero .kwtag{display:inline-block; background:rgba(255,255,255,.12); padding:5px 12px; border-radius:20px; font-size:12.5px; font-weight:700; letter-spacing:.03em}

/* 푸터 */
.site-footer{background:#12171f; color:#9aa5b1; padding:44px 0 26px; font-size:13.5px}
.site-footer .biz{color:#dbe1e8; line-height:2}
.site-footer .biz b{color:#fff}
.site-footer .flinks{display:flex; gap:16px; flex-wrap:wrap; margin:18px 0}
.site-footer .flinks a{color:#9aa5b1; text-decoration:none}
.site-footer .flinks a:hover{color:#fff}
.site-footer .copy{margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); color:#69707a}

.meta-updated{color:var(--sub); font-size:12.5px; margin-top:28px}
.related-caption{color:var(--sub); font-size:13px; margin-top:-4px}