/* 사람과안전 홈페이지 공용 디자인 시스템 — D1 v8 확정본(2026-10-24 인아님 OK)에서 분리. 설명서: ../디자인시스템_설명서.md */
/* 디자인 규칙 v8 — 머리글·바닥글은 원래 사이트 구성을 새 토큰으로. 이전 v6 — 글자는 검정(#212121), 강조색 파랑 하나(#1B4DFF), 정렬은 마일스톤과 같게.
   이전 v5 — 뼈대는 마일스톤 서비스 상세의 실측값(폭 992, 섹션 여백 86, 제목 30, 강점 3칸, 업무 카드, FAQ 줄)
   겉은 우리 것: 파랑 강조색, Pretendard(무료·OFL), 우리 사진·원고·아이콘. 마일스톤 고유 표시(제목 끝 주황 마침표)는 쓰지 않음 */
:root{
  --ink:#212121; --navy:#212121; --muted:#636363; --soft:#737373; --line:#e5e7eb; --rule:#d0d0d0; --paper:#fafafa;
  --accent:#1b4dff; --accent-text:#1b4dff; --accent-dark:#1640d6;
  --wrap:992px; --gut:24px; --sec:86px;
  --ease:cubic-bezier(.16,1,.3,1);
  --accent-soft:#f3f6ff; --ok:#1d7a46; --warn:#b07a12; --warn-soft:#fff4dc; --warn-ink:#8a5a00; --ink-deep:#16181d;   /* 꼬리표 바탕·양호/첫 실적·보완·NEW 소개판 (10-28 토큰화) */
  --fs-h1:40px; --fs-h1-post:34px; --fs-h2:30px; --fs-h2-post:24px; --fs-body:18px; --fs-chip:13px;   /* 목록 h1·글 h1·글 소제목·글 본문·꼬리표 */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.6 "Pretendard Variable",Pretendard,system-ui,sans-serif;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec) 0}
.paper{background:var(--paper)}
h1,h2,h3{margin:0;color:var(--navy);font-weight:700;letter-spacing:-.025em}
h2{font-size:30px;line-height:1.35}
h2 .no{color:var(--accent);margin-right:8px}
p{margin:0}

/* 머리글 — 원래 사이트 메뉴 구성 + 새 디자인 토큰. 교육원 바로가기는 뺌(10-24 결정) */
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #f2f2f2}
.top .bar{max-width:1440px;margin:0 auto;padding:0 48px;height:88px;display:flex;align-items:center;gap:40px}
.logo img{height:34px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav > ul{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.nav li{position:relative}
.nav > ul > li > a{display:flex;align-items:center;gap:4px;height:88px;padding:0 16px;white-space:nowrap;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none}
.nav > ul > li > a:hover,.nav > ul > li:focus-within > a{color:var(--accent)}
.nav .caret{font-size:12px;opacity:.6}
.dd{position:absolute;top:100%;left:0;min-width:220px;margin:0;padding:12px 0;list-style:none;background:#fff;box-shadow:0 0 0 1px var(--line),0 12px 28px rgba(17,17,17,.08);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.dd.wide{display:grid;grid-template-columns:1fr 1fr;min-width:520px;column-gap:8px}
.nav li:hover > .dd,.nav li:focus-within > .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:block;padding:9px 20px;font-size:15px;color:var(--ink);text-decoration:none;white-space:nowrap}
.dd a:hover{color:var(--accent);background:var(--paper)}
.dd a[aria-current]{color:var(--accent);font-weight:600}
.quote{flex:none;display:inline-flex;align-items:center;height:44px;padding:0 22px;margin-left:12px;border-radius:24px;background:var(--accent);color:#fff;font-size:15px;font-weight:600;text-decoration:none;transition:background .2s var(--ease)}
.quote:hover{background:var(--accent-dark)}
.tel{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.tel i{font-size:18px;color:var(--accent)}
.menu-btn{display:none;margin-left:auto;background:none;border:0;padding:8px;font-size:28px;color:var(--ink);cursor:pointer}
.quote:focus-visible,.tel:focus-visible,.nav a:focus-visible,.menu-btn:focus-visible,.btn:focus-visible,summary:focus-visible,.go:focus-visible,.float-cta:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cta .btn:focus-visible{outline-color:#fff}
/* 떠 있는 견적 버튼 */
.float-cta{position:fixed;right:28px;bottom:28px;z-index:30;display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 24px;border-radius:28px;background:var(--accent);color:#fff;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 10px 24px rgba(27,77,255,.28);transition:transform .2s var(--ease),background .2s var(--ease)}
.float-cta:hover{background:var(--accent-dark);transform:translateY(-2px)}
.float-cta:active{transform:scale(.98)}
.menu-open .float-cta{display:none}

/* 1. 제목 — 가운데, 큰 제목 + 소개 두 줄 */
.title{padding:80px 0 64px;text-align:center}
.title .eyebrow{font-size:15px;font-weight:700;color:var(--accent-text);letter-spacing:.06em}
.title h1{margin-top:14px;font-size:var(--fs-h1);line-height:1.3}
.title .sub{margin-top:10px;font-size:18px;color:var(--muted)}
.title .lead{margin:28px auto 0;max-width:760px;font-size:21px;font-weight:500;line-height:1.55;color:var(--ink)}
.photo-wide{width:100%;height:520px;object-fit:cover;object-position:center 55%}

/* 2. 왜 해야 하나요 — 왼쪽 제목, 오른쪽 본문 (마일스톤 소개 페이지의 두 칸) */
.split{display:grid;grid-template-columns:330px 1fr;gap:40px}
.split .k{font-size:22px;font-weight:700;color:var(--navy);line-height:1.4}
.split p{font-size:16px;line-height:1.75}
.who{margin-top:64px;padding-top:64px;border-top:1px solid var(--line);text-align:center}
.who .lead2{max-width:820px;margin:0 auto}
.who .note{max-width:820px;margin:24px auto 0}
.split .lead2{font-size:18px;font-weight:500;color:var(--navy);line-height:1.7}
.inds{margin:40px auto 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:992px}
.inds li{flex:0 0 156px}
.inds li{text-align:center;font-size:15px;font-weight:500;white-space:nowrap;color:var(--navy);line-height:1.4}
.inds i{display:block;font-size:44px;margin-bottom:10px}
.note{margin-top:24px;font-size:14px;line-height:1.7;color:var(--muted)}

/* 사진 띠 */
.band{display:grid;grid-template-columns:2fr 1fr 1fr;gap:4px}
.band img{width:100%;height:440px;object-fit:cover}

/* 3. 상황 3칸 — 마일스톤 「강점」 실측: 가운데, 숫자 30, 제목 20, 설명 14, 칸 사이 1px 세로선 */
.center{text-align:center}
.three{display:grid;grid-template-columns:repeat(3,1fr);margin-top:64px;counter-reset:n}
.three > *{padding:0 24px;text-align:center;counter-increment:n;display:flex;flex-direction:column;align-items:center}
.three > * + *{border-left:1px solid var(--rule)}
.three > *::before{content:counter(n,decimal-leading-zero);font-size:30px;font-weight:700;color:var(--accent);line-height:1.35}
.three h3{margin-top:8px;font-size:20px;line-height:1.4}
.three q{quotes:none;margin-top:20px;font-size:14px;line-height:1.43;color:var(--ink)}
.go{margin-top:auto;padding-top:20px;font-size:14px;font-weight:700;color:var(--accent-text);text-decoration:none}
.go:hover{text-decoration:underline}
.go-pair{margin-top:auto;display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.tag{margin-left:8px;font-size:14px;font-weight:600;color:var(--accent-text);vertical-align:middle}
.after{margin:56px auto 0;max-width:720px;font-size:15px;line-height:1.7;color:var(--ink);text-align:center}

/* 4. 서비스 카드 — 마일스톤 「주요 업무」 실측: 회색 섹션 위 흰 카드, 1px 테두리, 모서리 0, 안쪽 24 */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
/* 카드 수에 따라: 2개·4개는 2열, 5개는 3+2 (둘째 줄은 두 장이 줄을 나눠 씀 — 빈 칸 없게) */
.cards.n2,.cards.n4{grid-template-columns:repeat(2,1fr)}
.cards.n5{grid-template-columns:repeat(6,1fr)}
.cards.n5 > *{grid-column:span 2}
.cards.n5 > :nth-child(n+4){grid-column:span 3}
.card{background:#fff;box-shadow:0 0 0 1px var(--line);padding:28px 24px;display:flex;flex-direction:column;scroll-margin-top:120px;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.card:hover{box-shadow:0 0 0 1px var(--accent);transform:translateY(-2px)}
.card .no{font-size:16px;font-weight:700;color:var(--accent);letter-spacing:.02em}
.card h3{margin-top:6px;font-size:20px;line-height:1.4}
.card .do{margin-top:18px;font-size:14px;line-height:1.6;color:var(--ink)}
.card dl{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px;line-height:1.55}
.card dt{color:var(--soft);font-weight:500;white-space:nowrap}
.card dd{margin:0}
.card .term{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:baseline}
.card .term span{font-size:14px;color:var(--soft);flex:none;white-space:nowrap}
.card .term b{text-align:right}
/* 기간 값이 길면 — 「기간」 위 줄, 값 아래 줄 왼쪽 18px */
.card .term.long{display:block}
.card .term.long b{display:block;margin-top:4px;font-size:18px;line-height:1.45;text-align:left}
.card .term b{font-size:22px;color:var(--navy)}
.svc-note{margin:32px 0 0;max-width:820px;text-align:left;font-size:15px;line-height:1.7;color:var(--ink)}

/* 5. 문의 띠 — 가운데 문장 + 버튼 */
.cta{position:relative;color:#fff;text-align:center;padding:96px 0}
.cta::before{content:"";position:absolute;inset:0;background:url(../img/HSJ02232.jpg) center 40%/cover}
.cta::after{content:"";position:absolute;inset:0;background:rgba(17,17,17,.78)}
.cta .wrap{position:relative;z-index:1}
.cta p{max-width:620px;margin:0 auto;font-size:20px;line-height:1.7}
.cta p.cta-sub{margin-top:20px;font-size:16px;opacity:.8}   /* 법인소개: 「유별나고…」 아래 질문 한 줄(옛 사이트처럼 한 구역) */
.btns{margin-top:32px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px;align-items:stretch}
.btn{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;min-height:64px;min-width:220px;padding:10px 28px;border-radius:28px;font-weight:700;font-size:16px;text-decoration:none;transition:background .2s var(--ease)}
.btn small{font-weight:400;font-size:14px;opacity:.85}
.btn-main{background:var(--accent);color:#fff}
.btn-main:hover{background:var(--accent-dark)}
.btn-sub{border:1px solid rgba(255,255,255,.8);color:#fff}
.btn-sub:hover{background:rgba(255,255,255,.08)}
.btn-dark{background:var(--accent);color:#fff}
.btn-dark:hover{background:var(--accent-dark)}

/* 6. 자세히 — 마일스톤 FAQ 실측: 줄 72px, 번호는 열리면 주황 닫히면 회색 */
.more h2{text-align:left}
.more .intro{margin-top:20px;font-size:15px;color:var(--muted)}
.more .big{margin-top:16px;font-size:20px;font-weight:600;color:var(--ink);line-height:1.5}
.acc{margin-top:40px;border-top:1px solid var(--ink);counter-reset:a}
details{border-bottom:1px solid var(--line);counter-increment:a}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:72px;padding:24px 0;font-size:17px;font-weight:700;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;border-right:1.5px solid var(--soft);border-bottom:1.5px solid var(--soft);transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease)}
details[open] summary::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--accent)}
.body{padding:0 0 36px;font-size:16px;line-height:1.75}
.reasons{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:28px 48px}
.reasons li{display:flex;gap:16px;align-items:flex-start}
.reasons i{font-size:34px;color:var(--accent-text);flex:none}
.sched{margin:0;padding:0;list-style:none;display:grid;gap:22px}
.sched li{display:grid;grid-template-columns:130px 1fr;gap:20px}
.sched .when{font-weight:700;color:var(--accent-text)}
.sched .name{font-weight:700;color:var(--navy);display:block}
.foot-note{margin-top:22px;font-size:14px;color:var(--muted)}
.d-head,.d-row{display:grid;grid-template-columns:200px 1fr 1fr;gap:20px}
.d-head{font-size:14px;font-weight:700;color:var(--soft);padding-bottom:10px}
.d-row{padding:14px 0;border-top:1px solid var(--line)}
.d-area{display:flex;gap:10px;align-items:center;font-weight:700;color:var(--navy)}
.d-area i{font-size:24px;color:var(--accent-text)}
.faq{margin:0}
.faq dt{font-weight:700;color:var(--navy);padding-top:20px}
.faq dt:first-child{padding-top:0}
.faq dd{margin:6px 0 0}
.terms{display:grid;grid-template-columns:180px 1fr;gap:14px 20px;margin:0}
.terms dt{font-weight:700;color:var(--navy)}
.terms dd{margin:0}
.page-end{margin:0 auto;padding-top:24px;padding-bottom:56px;font-size:14px;color:var(--muted)}
.foot{background:#161616;color:#c9c9c9;padding:64px 0 40px;font-size:15px}
.foot a{color:#c9c9c9;text-decoration:none}
.foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1fr auto auto;column-gap:96px;row-gap:40px}   /* 서비스 목록 뺌(10-28) — 연락처 왼쪽, 메뉴·채널 오른쪽 */
.foot-brand{display:flex;flex-direction:column;gap:14px}
.foot-brand img{height:30px;width:auto;align-self:flex-start;margin-bottom:10px}
.foot-brand a{white-space:nowrap}
.foot-brand a,.foot-brand .foot-addr{display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:12px;align-content:start}
.foot ul.two{grid-template-columns:1fr 1fr;column-gap:24px}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid #2c2c2c;display:flex;gap:24px;flex-wrap:wrap;font-size:14px;color:#8f8f8f}
.foot-bottom a{color:#8f8f8f}

/* ── 폼 (91 사전상담에서 정함, 90·94 공용) — 마일스톤 상담신청 실측: 폭 640, 라벨 위, 입력칸 50, 모서리 0 */
.form-head{padding:72px 0 40px}
.form-head h1{font-size:40px;line-height:1.3}
.form-head .lead{margin-top:14px;font-size:18px;color:var(--muted);line-height:1.6}
.form-wrap{max-width:calc(640px + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.form-photo{width:100%;height:320px;object-fit:cover;object-position:center 40%}
.promise{margin:40px 0 0;padding:28px 0 0;border-top:1px solid var(--line);list-style:none;display:grid;gap:14px}
.promise li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.6}
.promise i{font-size:22px;color:var(--accent);flex:none;margin-top:1px}
.form{margin-top:48px;display:grid;gap:28px}
[hidden]{display:none !important}   /* 숨김 표시는 어디서나 숨김 — .field 처럼 display 를 정한 부품이 hidden 을 이기던 것(브리핑 칸 10-27) 한 줄로 */
.form[hidden],.done[hidden]{display:none}
.field{display:grid;gap:10px}
.field > label,.field > .label{font-size:16px;font-weight:700;color:var(--ink)}
.field .req{color:var(--accent);margin-left:2px}
.field .hint{font-weight:400;font-size:14px;color:var(--muted);margin-left:8px}
.input{width:100%;height:52px;padding:12px 16px;border:1px solid var(--rule);border-radius:0;background:#fff;font:inherit;font-size:16px;color:var(--ink);transition:border-color .15s var(--ease)}
textarea.input{height:auto;min-height:128px;resize:vertical;line-height:1.6}
.input::placeholder{color:#8a8a8a}
.input:hover{border-color:#a9a9a9}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(27,77,255,.15)}
.input[aria-invalid="true"]{border-color:#d93025}
.err{font-size:14px;color:#c5221f}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;border:0}
.choices label{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 10px;text-align:center;line-height:1.4;border:1px solid var(--rule);background:#fff;font-size:15px;cursor:pointer;transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease)}
.choices input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choices label:hover{border-color:#a9a9a9}
.choices label:has(input:checked){border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}
.choices label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.submit{margin-top:12px;text-align:center}
.submit .btn{min-width:260px;border:0;cursor:pointer;font-family:inherit}
.submit .note{margin-top:16px;font-size:14px;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-page main{padding-bottom:96px}
.form-page .float-cta{display:none}
.done{margin-top:48px;padding:40px 32px;text-align:center;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.done i{font-size:48px;color:var(--accent)}
.done p{margin-top:16px;font-size:18px;line-height:1.7}
/* 90 견적 폼 — 91 규칙 위에 묶음 접기·여러 개 선택·교과목 목록만 더함 (안전개발) */
.form-intro{margin-top:32px;font-size:16px;line-height:1.7}
.q-sec{display:grid;gap:24px;padding-top:40px;border-top:1px solid var(--line)}
.q-sec h2{font-size:24px;line-height:1.4}
.q-sec h3{font-size:18px}
.q-intro{font-size:15px;line-height:1.7;color:var(--muted)}
.q-group{display:grid;gap:24px}
.q-group[hidden],.q-empty[hidden]{display:none}
.q-empty{font-size:15px;color:var(--muted)}
.bundles{border-top:1px solid var(--ink)}
.bundle summary{min-height:64px;padding:18px 0}
.bundle .code{width:20px;color:var(--accent);flex:none}
/* 안1: 묶음 이름 = 선택 단추(네모 체크) */
.bundle summary{cursor:pointer}
.bundle .bx{flex:none;width:20px;height:20px;margin-right:12px;border:1.5px solid var(--rule);border-radius:5px;display:inline-grid;place-items:center;vertical-align:-4px;transition:background .15s,border-color .15s}
.bundle.on .bx{background:var(--accent);border-color:var(--accent)}
.bundle.on .bx::after{content:'';width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.bundle.on summary{color:var(--accent-text)}
.bundle .choices{padding-bottom:24px}
.choices.multi{grid-template-columns:1fr 1fr}
.choices.multi label{flex-direction:column;min-height:76px;padding:12px}
.choices.multi small{font-size:14px;font-weight:400;color:var(--muted)}
.choices.list{grid-template-columns:1fr}
.choices.list label{justify-content:flex-start;text-align:left;padding:10px 16px;gap:12px}
.choices.list .sc{font-weight:700;color:var(--accent);width:24px;flex:none}
.j-sum{position:sticky;top:88px;z-index:2;padding:12px 16px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:16px}
.j-sum b{color:var(--accent)}
.field .hint.long{display:block;margin:4px 0 0}
input[type=file].input{padding:0 16px 0 0;line-height:50px}
input[type=file].input::file-selector-button{height:50px;margin-right:16px;padding:0 20px;border:0;border-right:1px solid var(--rule);border-radius:0;background:#fff;font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
input[type=file].input::file-selector-button:hover{background:var(--paper)}

/* 01·00 서비스안내 — 서비스 목록·사진 설명·진행 흐름 (안전개발) */
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:48px}
.svc-list > article{display:grid;grid-template-columns:44px 1fr;gap:0 16px;padding:32px 0;border-top:1px solid var(--line);align-content:start}
.svc-list .code{font-size:32px;font-weight:700;color:var(--accent);line-height:1.15}
.svc-list h3{font-size:20px;line-height:1.4}
.svc-list .sub{margin-top:4px;font-size:18px;color:var(--muted);line-height:1.5}
.svc-list .one{margin-top:14px;font-size:16px;line-height:1.6}
.svc-list .duty{margin-top:12px;font-size:14px;line-height:1.65;color:var(--muted)}
.svc-list .duty b{font-weight:600;color:var(--soft);margin-right:4px}
.svc-list .go{display:inline-block;margin-top:16px;padding-top:0}
.band figure{margin:0}
.band figcaption{margin-top:10px;padding:0 16px;font-size:14px;line-height:1.5;color:var(--muted)}
.flow{list-style:none;margin:0 auto;padding:0;display:flex;justify-content:center;align-items:flex-start;gap:12px;flex-wrap:wrap}
.flow li{display:flex;align-items:flex-start;gap:12px;text-align:center}
.flow li > span{display:flex;flex-direction:column;font-size:16px;font-weight:700;color:var(--ink);line-height:1.5}
.flow li > span small{font-size:14px;font-weight:400;color:var(--muted)}
.flow i{font-size:20px;color:var(--soft);margin-top:3px}
.flow-sec{padding:56px 0}

/* J 관리감독자 과정 — 교과목표·강사 소개 (안전개발) */
.subj{margin-top:24px;border-top:1px solid var(--ink)}
.subj-head,.subj-row{display:grid;grid-template-columns:56px 1fr 56px 48px;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.subj-head{font-size:14px;color:var(--muted)}
.subj-head span:last-child,.subj-row .h{text-align:right}
.subj-row b{color:var(--accent-text)}
.subj-row small{font-size:14px;color:var(--muted)}
.subj-row .h{font-weight:600}
.subj-g{padding:24px 0 10px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink)}
.card .kind{margin-top:4px;font-size:15px;color:var(--muted)}
.bio{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:48px;margin-top:40px;align-items:start}
.bio img{width:100%;max-width:320px;height:auto}
.bio h3{font-size:24px}
.bio .cred{margin-top:4px;font-size:16px;color:var(--muted)}
.bio p{margin-top:16px;line-height:1.75}
.bio b{margin-right:8px}
.band.one{grid-template-columns:1fr}
.flow li > span{max-width:260px}
.body .promise{margin:0;padding:0;border:0}

/* 92 AI 사전 상담 — 왼쪽 안내 · 오른쪽 대화창 (안전개발). 모서리 0 */
.ai-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.ai-intro .eyebrow{font-size:15px;font-weight:700;color:var(--accent-text);letter-spacing:.06em}
.ai-intro h1{margin-top:14px;font-size:36px;line-height:1.3}
.ai-intro .lead{margin-top:20px;font-size:18px;line-height:1.65}
.ai-intro .promise{margin-top:32px}
.ai-next{margin-top:40px;font-size:20px}
.ai-next-p{margin-top:8px;line-height:1.7}
.chat{box-shadow:0 0 0 1px var(--line);background:#fff}
.chat[data-preview]::before{content:attr(data-preview);display:block;padding:8px 16px;font-size:14px;color:var(--muted);background:var(--paper);border-bottom:1px solid var(--line)}
.chat-head{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-bottom:1px solid var(--line)}
.chat-head > i{font-size:36px;color:var(--accent);flex:none}
.chat-head b{font-size:16px}
.chat-head p{margin-top:2px;font-size:14px;line-height:1.55;color:var(--muted)}
.chat-head a{color:var(--accent-text);font-weight:600}
.chat-head .state{margin-left:auto;flex:none;font-size:14px;font-weight:600;color:var(--accent-text)}
.chat-off{margin:0;padding:10px 20px;font-size:14px;line-height:1.55;background:var(--paper);border-bottom:1px solid var(--line)}
.chat-off[hidden]{display:none}
.chat-off b{margin-right:8px}
.chat-body{display:grid;gap:12px;padding:20px;max-height:720px;overflow-y:auto}
.msg{margin:0;padding:12px 16px;font-size:15px;line-height:1.65}
.msg p + p{margin-top:8px}
.msg.ai{background:var(--paper);box-shadow:0 0 0 1px var(--line);margin-right:10%}
.msg.me{background:#fff;box-shadow:0 0 0 1px var(--accent);justify-self:end;margin-left:10%}
.step{margin:12px 0 0;font-size:14px;font-weight:600;color:var(--muted)}
.chat-body .choices{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.choices input:disabled{cursor:default}
.chat-sum{padding:20px;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.sum-head{font-weight:700}
.sum-head small{display:block;font-size:14px;font-weight:400;color:var(--muted)}
.chat-sum dl{margin:16px 0 0;display:grid;grid-template-columns:120px 1fr;gap:10px 16px;font-size:15px;line-height:1.6}
.chat-sum dt{font-weight:600;color:var(--soft)}
.chat-sum dd{margin:0}
.chat-sum ul{margin:0;padding-left:18px}
.sum-btns{margin-top:20px;display:grid;gap:8px}
.btn-line{border:1px solid var(--rule);background:#fff;color:var(--ink);font-family:inherit;cursor:pointer}
.btn-line:hover{border-color:var(--accent)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.sum-note{margin-top:12px;font-size:14px;color:var(--muted)}
.chat-input{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.chat-input .btn{min-width:112px;min-height:52px;padding:0 20px;border:0;white-space:nowrap}
.chat-foot{margin:0;padding:0 20px 14px;font-size:14px;color:var(--muted)}

/* 블로그 글 — 옛 글 class(blog-h2 등)에 모양만 입힘 (안전개발) */
.blog-post{max-width:calc(720px + var(--gut)*2);margin:0 auto;padding:72px var(--gut) 56px}
.blog-head .blog-cat{display:inline-block;padding:3px 10px;background:var(--accent-soft);color:var(--accent-text);font-size:var(--fs-chip);font-weight:600;text-decoration:none}   /* 사이트 꼬리표(.fr-chip·.wc-tag)와 같게 */
.blog-head h1{margin-top:14px;font-size:var(--fs-h1-post);line-height:1.4}
.blog-head .blog-by{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:12px;font-size:14px;color:var(--muted)}
.blog-head .blog-by span::before{content:'·';margin-right:12px}
.blog-hero{display:block;width:100%;height:auto;margin-top:32px}
.blog-body{margin-top:40px;font-size:var(--fs-body);line-height:1.8;color:var(--ink);overflow-wrap:break-word}
.blog-body p{margin:0 0 20px}
.blog-body strong,.blog-body b{font-weight:700}
.blog-body a{color:var(--accent-text)}
.blog-body a.btn{color:#fff;text-decoration:none}
.blog-body ul,.blog-body ol{margin:0 0 20px;padding-left:22px}
.blog-body li{margin-bottom:6px}
.blog-body img,.blog-body video{display:block;max-width:100%;height:auto}
.blog-body figure{margin:32px 0}
.blog-body figure img{width:100%}
.blog-body figcaption{margin-top:10px;font-size:14px;line-height:1.6;color:var(--muted)}
.blog-h2{margin:56px 0 16px;font-size:24px;font-weight:700;line-height:1.45;color:var(--navy)}
.blog-h3,.blog-body h3{margin:36px 0 12px;font-size:19px;font-weight:700;line-height:1.5;color:var(--navy)}
.blog-divider,.blog-body hr{margin:48px 0;border:0;border-top:1px solid var(--line)}
.blog-table{margin:24px 0 28px;overflow-x:auto}
.blog-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.6}
.blog-table th,.blog-table td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.blog-table thead th,.blog-table th{background:var(--paper);font-weight:700}
.blog-embed{position:relative;margin:24px 0;aspect-ratio:16/9}
.blog-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.blog-series-box{margin:0 0 40px;padding:24px;background:var(--paper)}
.blog-series-box .series-brand,.blog-series-box .series-company{display:none}
.blog-series-box .series-title{font-weight:700}
.blog-series-box .series-list{margin:12px 0 0;padding:0;list-style:none;font-size:15px}
.blog-series-box .series-list li{margin:0;padding:8px 0;border-top:1px solid var(--line)}
.blog-series-box .series-list li.current{color:var(--accent-text);font-weight:700}
.blog-case,.blog-insight,.blog-callout{margin:28px 0;padding:20px 24px;background:var(--paper)}
.blog-summary-list{margin:24px 0;border-top:1px solid var(--line)}
.blog-summary-list .summary-item{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.blog-summary-list .summary-item br{display:none}
.blog-summary-list .item-num{flex:none;width:24px;font-weight:700;color:var(--accent-text)}
.blog-case .blog-label{display:block;font-weight:700;color:var(--navy)}
.blog-video-box{margin:40px 0;padding:24px;box-shadow:0 0 0 1px var(--line)}
.blog-video-box .video-title{font-weight:700}
.blog-video-box .video-instructor{margin-top:4px;font-size:14px;color:var(--muted)}
.blog-footer{margin:48px 0 0;padding:24px;background:var(--paper);text-align:center;line-height:1.8}
.blog-footer .btn{margin-top:16px}
.blog-end{margin-top:56px;padding-top:24px;border-top:1px solid var(--ink)}
.blog-pns{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.blog-pn{display:block;padding-top:16px;border-top:1px solid var(--line);font-size:16px;font-weight:600;line-height:1.5;color:var(--ink);text-decoration:none}
.blog-pn span{display:block;margin-bottom:4px;font-size:14px;font-weight:400;color:var(--muted)}
.blog-pn.next{text-align:right}
a.blog-pn:hover{color:var(--accent-text)}

/* 블로그 목록 /blog/… — 카드 2열, 테두리 없이 위 선 (안전개발) */
.blog-list h1{font-size:var(--fs-h1)}
.blog-body h2{margin:56px 0 12px;font-size:var(--fs-h2-post);line-height:1.4}
.blog-cards{display:grid;grid-template-columns:1fr 1fr;gap:40px 32px;margin-top:40px}
.blog-card{display:flex;flex-direction:column;padding-top:20px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.blog-card img,.blog-noimg{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper)}
.blog-card-cat{margin-top:16px;font-size:14px;font-weight:700;color:var(--accent-text)}
.blog-card-title{margin-top:6px;font-size:19px;font-weight:700;line-height:1.45}
.blog-card time{margin-top:8px;font-size:14px;color:var(--muted)}
.blog-card:hover .blog-card-title{color:var(--accent-text)}

/* 90 견적 폼 — 4단계 (인아님: 폼이 너무 길다) */
#qf [hidden]{display:none !important}
.q-sec{grid-template-columns:1fr 1fr;column-gap:16px}
.q-sec > *{grid-column:1 / -1}
.q-sec > .field.half{grid-column:auto}
.qsteps{display:flex;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.qsteps li{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:12px 4px;margin-bottom:-1px;border-bottom:2px solid transparent;font-size:15px;color:var(--muted);text-align:center;line-height:1.4}
.qsteps li i{display:none}
.qsteps li.past i{display:inline-block;color:var(--accent)}
.qsteps li.on{color:var(--accent-text);font-weight:700;border-bottom-color:var(--accent)}
.steps-m{display:none}
.step-nav{display:flex;justify-content:space-between;gap:12px}
.step-nav .btn{min-width:140px;font-family:inherit;cursor:pointer}
.step-nav #next{margin-left:auto}

/* 옮긴 페이지: 연속 사진 가로 묶음 (안전개발) */
.blog-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;margin:24px 0}
.blog-body .blog-band img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
/* 사업실적 /work/ (안전개발) */
.logo-flow{display:grid;gap:24px;overflow:hidden;padding:28px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}   /* 두 줄, 서로 반대 방향, 양끝 흐림 */
.logo-track{display:flex;gap:56px;width:max-content;animation:logo-flow 150s linear infinite}   /* 인아님 10-26: 2배 이상 느리게(60→150s) */
.logo-track.rev{animation-name:logo-flow-rev;animation-duration:170s}
.logo-track:hover{animation-play-state:paused}
.lg{display:flex;align-items:center;justify-content:center;flex:none;width:160px;height:48px}   /* 로고 칸 고정, 로고 크기는 width/height 속성(넓이 맞춤) */
.lg img{display:block;max-width:100%;height:auto}
@keyframes logo-flow{to{transform:translateX(-50%)}}
@keyframes logo-flow-rev{from{transform:translateX(-50%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.logo-flow{-webkit-mask-image:none;mask-image:none;max-width:992px;margin:0 auto;padding:28px var(--gut);grid-template-columns:repeat(5,1fr)}.logo-track,.logo-track.rev{display:contents;animation:none}.logo-track .lg:nth-child(n+19),.logo-track.rev .lg:nth-child(n+18){display:none}.logo-track .lg{width:auto}}   /* 멈춘 5열×7줄 */
.wk-filter{display:grid;gap:10px;margin-top:24px}
.wk-row{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline}
.wk-lab{font-size:14px;color:var(--muted)}
.wk-note{margin-top:20px;font-size:15px;color:var(--muted)}
.wk-note[hidden]{display:none}
.wk-line{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px}
.wk-line button{padding:4px 0;border:0;border-bottom:2px solid transparent;background:none;font:inherit;font-size:16px;color:var(--muted);cursor:pointer}
.wk-line button + button{margin-left:16px;position:relative}
.wk-line button + button::before{content:"";position:absolute;left:-9px;top:8px;bottom:8px;border-left:1px solid var(--rule)}
.wk-line button.on{color:var(--accent-text);font-weight:700;border-bottom-color:var(--accent)}
/* 서비스 거르기 B안 — 둥근 단추+아이콘(인아님 10-24 확정). PC 한 줄, 모바일 가로 스크롤 */
.fb-row{display:flex;flex-wrap:wrap;gap:8px}
.fb{display:inline-flex;align-items:center;gap:8px;flex:none;height:44px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;background:#fff;font:inherit;font-size:15px;color:var(--ink);white-space:nowrap;cursor:pointer;transition:border-color .15s var(--ease)}
.fb i{font-size:18px;color:var(--soft)}
.fb:hover{border-color:var(--accent)}
@media (min-width:641px){.fb{font-size:14px}}
/* 인아님 10-26: 5+5 칸 맞춤 줄바꿈이 어색 → 자연스럽게 흐르게(칸 맞춤 뺌) */
.fb.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text);font-weight:600}.fb.on i{color:var(--accent-text)}   /* 폼 .choices 고른 칩과 같은 모양 */
@media (max-width:640px){.fb-row{flex-wrap:nowrap;overflow-x:auto;margin-right:calc(-1 * var(--gut));padding-right:var(--gut);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}.fb-row::-webkit-scrollbar{display:none}}
.wk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px;margin-top:32px}
.wk{position:relative;display:flex;flex-direction:column;cursor:pointer}
.wk[hidden]{display:none}
.wk-near{grid-column:1/-1;margin:0;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}   /* 고른 서비스 실적이 적을 때 채운 카드 위 안내 줄 */
.wk-near.zero{padding-top:0;border-top:0}
.wk img,.wk .blog-noimg{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;flex:none;margin-bottom:20px;background:#f2f2f2}   /* 사진 늦게 뜨는 사이 옅은 바탕 */
.wk-ind{font-size:13px;color:var(--soft)}
.wk b{display:block;margin-top:6px;font-size:18px;line-height:1.4;color:var(--ink)}
.wk-date{display:block;margin-top:6px;font-size:14px;color:var(--soft)}
.wk-meta{margin-top:4px;font-size:15px;line-height:1.55;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}   /* 두 줄까지, 넘치면 그때만 말줄임 */
/* 자세히보기 — 누르면 그 줄 아래 전체 폭 상세 칸(.wd-panel). 한 번에 하나 */
.wk-more{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;padding:14px 0 16px;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--accent-text);text-align:left;cursor:pointer}
.wk-more::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--soft);border-bottom:1.5px solid var(--soft);transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease)}
.wk-more[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--accent)}
.wk.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.wd-panel{grid-column:1/-1;position:relative;display:grid;grid-template-columns:5fr 7fr;gap:48px;padding:48px;background:var(--paper);margin-top:-24px;scroll-margin:96px 0 24px}
.wd-pimg{aspect-ratio:4/3;overflow:hidden;background:#f2f2f2}.wd-pimg img{width:100%;height:100%;object-fit:cover;display:block}
.wd-pbody .eyebrow{font-size:14px;font-weight:600;color:var(--accent-text)}
.wd-pbody h3{margin-top:8px;font-size:26px;line-height:1.35}
.wd-meta{margin-top:8px;font-size:15px;color:var(--muted)}
.wd-list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--ink)}
.wd-list li{display:grid;grid-template-columns:44px 1fr;padding:16px 0;border-bottom:1px solid var(--line)}
.wd-list .n{font-weight:700;color:var(--accent-text)}.wd-list p{margin:0;font-size:16px;line-height:1.65}
.wd-list p + p{margin-top:4px;padding-left:12px;font-size:15px;color:var(--muted)}   /* 원문 「- 」 하위 줄 */
/* 묶음 카드 펼친 칸 — 연도별 줄(시안 261024_실적묶음_서울경찰청) */
.wd-panel.grp{grid-template-columns:4fr 8fr}
.yr{display:grid;grid-template-columns:72px 1fr;gap:0 16px;margin-top:28px;padding-top:20px;border-top:1px solid var(--ink)}
.yr + .yr{margin-top:0;border-top:1px solid var(--rule)}
.y{font-size:22px;font-weight:700;color:var(--accent-text);line-height:1.3}
.yr-row{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.yr-row:last-child{border-bottom:0}
.yr-svc{font-size:14px;font-weight:600}.yr-who{margin:0;font-size:15px;line-height:1.55}.yr-it{margin:4px 0 0;font-size:14px;color:var(--muted);line-height:1.55}
@media (max-width:640px){.wd-panel.grp{grid-template-columns:1fr}.yr{grid-template-columns:52px 1fr;gap:0 12px}.y{font-size:18px}.yr-row{grid-template-columns:1fr;gap:2px}}
.wd-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border:0;background:none;font-size:24px;cursor:pointer;color:var(--ink)}
@media (max-width:1024px){.wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wd-panel{gap:32px;padding:40px 32px}}
@media (max-width:640px){.wk-grid{grid-template-columns:minmax(0,1fr)}.wk-row{grid-template-columns:1fr;gap:2px}.wk-line{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.wk-line button{flex:none}
  .wd-panel{grid-template-columns:1fr;padding:40px 20px 28px}.wd-pimg{display:none}.wd-pbody h3{font-size:22px;padding-right:32px}}
/* 주요실적 모자이크 7칸(큰 1·작은 2·넓은 1·작은 2·넓은 1), 로고 없음 */
/* 주요실적 모자이크+로고 띠를 한 연회색 구역으로(C안 — 인아님 10-25) */
.gz{background:#f4f5f7}
.gz > .sec{padding-bottom:64px}
.gz-line{margin:0;border:0;border-top:1px solid var(--line)}
.gz .logo-flow{padding:48px 0 80px}
.gz .lg img{mix-blend-mode:multiply}   /* 흰 바탕 로고 그림이 회색 위에서 흰 상자로 안 보이게(로고 색은 그대로) */
/* 주요실적 모달 — 가운데 흰 상자(최대 960), 모바일은 아래 시트 */
.wd-modal{width:min(960px,calc(100% - 48px));max-width:none;max-height:min(86vh,900px);margin:auto;padding:0;border:0;background:#fff;overflow:auto;overscroll-behavior:contain}
.wd-modal::backdrop{background:rgba(15,16,18,.6)}
.wd-modal .wd-panel{background:#fff;margin:0}
.wd-grip{display:none}
.wd-modal.by-mouse .wd-x:focus{outline:none}
html.wd-lock{overflow:hidden}
.wd-modal[open]{animation:wd-in .2s var(--ease)}.wd-modal[open]::backdrop{animation:wd-fade .2s var(--ease)}
.wd-modal.out{animation:wd-in .2s var(--ease) reverse forwards}.wd-modal.out::backdrop{animation:wd-fade .2s var(--ease) reverse forwards}
@keyframes wd-in{from{opacity:0;transform:scale(.97)}}
@keyframes wd-fade{from{opacity:0}}
@keyframes wd-up{from{opacity:0;transform:translateY(40px)}}
@media (max-width:640px){
  .wd-modal{width:100%;max-height:90vh;margin:auto 0 0;border-radius:16px 16px 0 0}
  .wd-modal[open],.wd-modal.out{animation-name:wd-up}
  .wd-grip{display:block;width:40px;height:4px;margin:10px auto 0;border-radius:2px;background:var(--rule)}
  .wd-modal .wd-panel{padding-top:28px}}
@media (prefers-reduced-motion:reduce){.wd-modal[open],.wd-modal.out,.wd-modal[open]::backdrop,.wd-modal.out::backdrop{animation:none}}
.mos{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;gap:16px;margin-top:40px}
.dc{position:relative;overflow:hidden;cursor:pointer;background:#1c1d20}
.dc.big{grid-column:span 2;grid-row:span 2}.dc.wide{grid-column:span 2}
.dc>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.dc:hover>img{transform:scale(1.04)}
.dc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.9))}
.dc.on::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);z-index:2}
.dt{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.dt .ind{font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.7)}
.dt h3{color:#fff;font-size:19px;margin-top:6px;line-height:1.35}.big .dt h3{font-size:30px}
.dt .work-svc{margin-top:6px;font-size:13px;color:rgba(255,255,255,.72)}.big .dt .work-svc{font-size:15px}
.dc .wk-more{display:inline-flex;align-items:center;gap:6px;width:auto;margin-top:14px;padding:0;font-size:14px;font-weight:700;color:#fff}   /* 늘 보임, 최근실적 자세히보기와 같은 크기·굵기 */
.dc .wk-more i{transition:transform .2s var(--ease)}
.dc:hover .wk-more i{transform:translateX(4px)}
.dc .wk-more::after{display:none}
@media (max-width:1024px){.mos{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}}
@media (max-width:640px){.mos{grid-template-columns:1fr;grid-auto-rows:auto}.dc,.dc.big,.dc.wide{grid-column:auto;grid-row:auto;aspect-ratio:4/3}.big .dt h3{font-size:22px}}
.work-more-wrap{margin-top:32px;text-align:center}
.work-more-wrap .btn{min-width:200px}
.work-more-wrap .btn[hidden]{display:none}
.work-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.work-filter button{min-height:40px;padding:0 16px;border:1px solid var(--rule);background:#fff;font:inherit;font-size:14px;cursor:pointer}
.work-filter button.on{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft);font-weight:700}
/* 법인소개 /about/ (안전개발) */
.card-list{margin:12px 24px 0;padding-left:18px;font-size:14px;line-height:1.6}
.card.review q{display:block;margin:4px 24px 0;quotes:none;font-size:15px;line-height:1.7}
.card.review .review-logo{aspect-ratio:auto;width:calc(100% - 48px);object-fit:contain;object-position:left center;margin:20px 24px 0;align-self:flex-start;justify-self:start}   /* 로고 크기=width·height 속성(로고 띠와 같은 넓이 맞춤 값, 인아님 10-26 크기 점검) */
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:32px}
.logo-grid .lg{width:auto;height:72px;padding:12px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.req-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.req-grid img{width:100%;height:auto}
.sec .eyebrow{display:block;font-size:15px;font-weight:700;color:var(--accent-text);letter-spacing:.06em;margin-bottom:8px}
.about-en{font-size:18px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.about-quote{margin-top:12px;font-size:28px;line-height:1.5}
.about-msg p{margin-top:16px;line-height:1.8}
.about-msg p:first-child{margin-top:0}
.about-sign{margin-top:28px !important}
.about-msg .sign{display:block;margin-top:8px;width:160px;height:auto}
.about-group{margin-top:48px;font-size:20px}
.card.photo{padding:0 0 24px}
.card.photo img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:16px}
.card.photo h3,.card.photo > p{padding:0 24px}
.card.photo > p:not(.kind){margin-top:8px;font-size:15px}   /* 법인소개 사업실적 카드: 서비스 한 줄 */
.award{display:flex;gap:32px;align-items:center;margin-top:32px}
.award > img{flex:none}
.award p{line-height:1.75}
.award-logos{display:flex;gap:24px;align-items:center;margin-top:16px}
.award-logos img{height:40px;width:auto}
.about-close{max-width:760px;margin:0 auto;font-size:22px;line-height:1.7}

/* 등장 효과 — 읽는 순서 안내용 */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:900px){
  .form-head{padding:44px 0 28px}
  .form-head h1{font-size:30px}
  .form-photo{height:200px}
  .choices label{font-size:14px}
  .choices.multi{grid-template-columns:1fr}
  .j-sum{top:72px}
  :root{--sec:64px;--gut:20px}
  .top .bar{height:64px;padding:0 20px;gap:12px}
  .logo img{height:26px}
  .menu-btn{display:block;order:3;margin-left:0}
  .tel{margin-left:auto;font-size:14px}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:8px 20px 20px;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(17,17,17,.08)}
  .nav.open{display:flex}
  .nav > ul{flex-direction:column;gap:0}
  .nav > ul > li > a{height:auto;padding:14px 0}
  .dd,.dd.wide{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;display:block;min-width:0;padding:0 0 8px 12px}
  .dd a{padding:7px 0;white-space:normal}
  .quote{margin:12px 0 0;justify-content:center}
  .float-cta{right:16px;bottom:16px;height:52px;padding:0 20px;font-size:15px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .who{text-align:left}
  .who .lead2,.who .note{margin-left:0}
  .inds li{white-space:normal}
  .title{padding:48px 0 36px}
  .title h1{font-size:30px}
  .title .sub,.title .lead{font-size:16px}
  .photo-wide{height:260px}
  h2{font-size:24px}
  .split{grid-template-columns:1fr;gap:12px}
  .inds{row-gap:20px;justify-content:center}
  .inds li{flex:0 0 calc(33.33% - 6px)}
  .inds:has(> li:nth-child(4):last-child) li{flex:0 0 calc(50% - 4px)}   /* 4개는 2+2, 나머지는 가운데로(3+1 어색함, 10-26) */
  .band{grid-template-columns:1fr 1fr}
  .band img{height:220px}
  .band img:first-child,.band > figure:first-child{grid-column:1/3}
  .band figure img{height:220px}
  .svc-list{grid-template-columns:1fr}
  .award{flex-direction:column;align-items:flex-start}
  .req-grid{grid-template-columns:1fr 1fr}
  .logo-grid{grid-template-columns:repeat(3,1fr)}
  .about-quote{font-size:22px}
  .blog-post{padding-top:44px}
  .blog-head h1{font-size:26px}
  .blog-head .blog-by{flex-direction:column}
  .blog-head .blog-by span::before{display:none}
  .blog-pns{grid-template-columns:1fr}
  .blog-cards{grid-template-columns:1fr}
  .blog-list h1{font-size:30px}
  .blog-pn.next{text-align:left}
  .ai-wrap{grid-template-columns:1fr;gap:32px}
  .ai-intro h1{font-size:28px}
  .chat-body{max-height:none;padding:16px}
  .chat-sum dl{grid-template-columns:1fr;gap:2px}
  .chat-sum dd{margin-bottom:10px}
  .msg.ai{margin-right:0}
  .subj-head,.subj-row{grid-template-columns:40px 1fr 28px;gap:4px 12px}
  .subj-head span:nth-child(3){display:none}
  .subj-row small{grid-column:2;grid-row:2}
  .subj-row .h{grid-column:3;grid-row:1}
  .bio{grid-template-columns:1fr;gap:24px}
  .band.one img:first-child{grid-column:auto}
  .flow{flex-direction:column;align-items:center}
  .flow i{transform:rotate(90deg)}
  .flow li{flex-direction:column;align-items:center}
  .three{grid-template-columns:1fr;gap:48px;margin-top:40px}
  .three > * + *{border-left:0;border-top:1px solid var(--rule);padding-top:48px}
  .cards,.cards.n2,.cards.n4,.cards.n5{grid-template-columns:1fr;gap:16px}
  .cards.n5 > *,.cards.n5 > :nth-child(n+4){grid-column:auto}
  .cta{padding:64px 0}
  .cta p{font-size:17px}
  .btn{width:100%}
  .reasons{grid-template-columns:1fr}
  .sched li{grid-template-columns:1fr;gap:2px}
  .d-head{display:none}
  .d-row{grid-template-columns:1fr;gap:6px}
  .d-row > div[data-h]::before{content:attr(data-h);display:block;font-size:13px;font-weight:700;color:var(--soft)}
  .terms{grid-template-columns:1fr;gap:2px}
  .terms dd{margin-bottom:14px}
}

/* 표·버튼 줄 위 간격(인라인 style 대신) */
.gap-top{margin-top:24px}
.btns.start{justify-content:flex-start}
/* 누를 수 없는 안내 줄(→ …)은 링크색 대신 본문색 */
.go.note{color:var(--ink);font-weight:600}
/* 이유가 홀수면 마지막 칸이 줄 전체를 씀 */
.reasons li:last-child:nth-child(odd){grid-column:1/-1}
/* 긴 제목 줄 균형 · 제목 바로 아래 설명 간격 */
h1,h2{text-wrap:balance}
h2 + .intro{margin-top:14px}
/* 약속 3개: 3열, 굵은 첫 문장은 한 줄 따로 */
.reasons.n3{grid-template-columns:repeat(3,1fr)}
.reasons.n3 li{flex-direction:column;gap:12px}
.reasons.n3 li:last-child:nth-child(odd){grid-column:auto}
.reasons b{display:block;margin-bottom:6px}
@media (max-width:860px){.reasons.n3{grid-template-columns:1fr}}
/* 한 줄에 놓인 카드끼리 설명·구분선·기간 높이 맞춤 */
.cards{row-gap:0}
.card{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;margin-bottom:20px;align-content:start}
.card > .term{align-self:end}
.card dl{align-self:start}
/* 개인정보 동의 (기존 홈페이지 문구 그대로) */
.consent{margin-top:8px}
.consent-title{font-size:16px;font-weight:700}
.consent-box{margin:12px 0 0;padding:16px 18px;background:var(--paper);box-shadow:0 0 0 1px var(--line);display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px;line-height:1.6;color:var(--muted)}
.consent-box dt{font-weight:600;color:var(--ink);white-space:nowrap}
.consent-box dd{margin:0}
.consent-more{margin-top:10px;font-size:14px;color:var(--muted)}
.consent-more a{color:var(--ink);text-decoration:underline}
.consent-check{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:16px;font-weight:600;cursor:pointer}
.consent-check input{width:20px;height:20px;accent-color:var(--accent);margin:0}
@media (max-width:640px){.consent-box{grid-template-columns:1fr;gap:2px}.consent-box dd{margin-bottom:8px}}
/* 순서가 있는 3단계(J 교재) — 상황 3칸과 같은 틀, 인용 대신 설명 */
.three.steps{margin-top:56px}
.three.steps p{margin:14px 0 0;font-size:15px;line-height:1.65;color:var(--muted)}
/* 회색 섹션 바로 뒤 흰 섹션: 위아래 여백이 겹쳐 넓어 보이지 않게 */
.sec.paper + .sec:not(.paper){padding-top:56px}
.title + .sec:not(.paper){padding-top:40px}   /* 흰 바탕끼리 붙을 때 위아래 여백 겹침 줄이기 */
/* 제목+문단 줄을 여러 개 쌓을 때: 줄마다 위 선과 넉넉한 위아래 여백 */
.rows > .split{margin:0;padding:40px 0;border-top:1px solid var(--line)}
.rows > .split:last-child{border-bottom:1px solid var(--line)}
.wide-top{margin-top:64px}
.wide-top + .foot-note{margin-top:48px}
/* 기간: 모든 카드가 「기간」 위 줄·값 아래 줄 — 한 줄 카드끼리 「기간」 높이도 맞춤 */
.card > .term{display:block;align-self:start;margin-top:0;padding-top:28px}
.card .term b{display:block;margin-top:4px;text-align:left}
/* J 교재: 왼쪽 설명 · 오른쪽 세로 3단계 */
.doc-make{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.doc-k{margin-top:32px;font-size:20px;font-weight:700;line-height:1.45;color:var(--ink)}
.doc-body{margin-top:14px;font-size:16px;line-height:1.75;color:var(--ink)}
.steps-v{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.steps-v li{display:grid;grid-template-columns:56px 1fr;gap:0 8px;padding:28px 0;border-bottom:1px solid var(--line)}
.steps-v .n{font-size:22px;font-weight:700;color:var(--accent);line-height:1.3}
.steps-v h3{font-size:18px;line-height:1.4}
.steps-v p{margin:8px 0 0;font-size:15px;line-height:1.65;color:var(--muted)}
@media (max-width:860px){.doc-make{grid-template-columns:1fr;gap:40px}}
/* 01 진행 순서: 「어떻게 진행되고」 영역 안, 흰 띠 위에 */
.flow-in{background:#fff;box-shadow:0 0 0 1px var(--line);padding:32px 24px}
/* 서비스 목록: 한 줄 두 칸끼리 이름·부제·소개·법적 의무·링크 높이 맞춤 */
.svc-list{row-gap:0}
.svc-list > article{grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
.svc-list > article > div{display:contents}
.svc-list > article > div > *{grid-column:2}
.svc-list .code{grid-column:1;grid-row:1 / 3}
.svc-list .go{align-self:start}
/* 기간: 「기간」 왼쪽 · 값 오른쪽 정렬(긴 값도 오른쪽, 줄마다) — 인아님 10-24 */
.card > .term,.card > .term.long{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.card .term b,.card .term.long b{display:block;margin-top:0;text-align:right}
/* 01 진행 순서 다시: 상자 없이 가로 5칸 타임라인(위 선 + 점) */
.flow-in{background:none;box-shadow:none;padding:0}
.flow-in .flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;justify-content:stretch}
.flow-in .flow li{position:relative;display:block;text-align:left;padding:28px 16px 0 0;border-top:1px solid var(--rule)}
.flow-in .flow li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.flow-in .flow li > span{max-width:none;font-size:18px}
.flow-in .flow li > span small{margin-top:6px;font-size:14px}
.flow-in .flow i{display:none}
@media (max-width:860px){
  .flow-in .flow{grid-template-columns:1fr}
  .flow-in .flow li{border-top:0;border-left:1px solid var(--rule);padding:0 0 24px 24px;align-items:flex-start}
  .flow-in .flow li::before{top:6px;left:-5px}
}
/* 폼: 짧은 칸(성함·직책, 연락처·이메일)은 두 칸씩 */
.form{grid-template-columns:1fr 1fr;column-gap:16px}
.form > *{grid-column:1 / -1}
.form > .field.half{grid-column:auto}
@media (max-width:640px){.form > .field.half,.q-sec > .field.half{grid-column:1 / -1}
  .qsteps{display:none}
  .steps-m{display:block;font-weight:700;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .steps-m::before{content:attr(data-n);margin-right:8px;color:var(--accent-text)}
  .step-nav .btn{min-width:0;flex:1}}
/* 개인정보 동의 다시: 회색 큰 상자 대신 접힌 한 줄 + 동의 체크 */
.consent-box{display:block;margin:0;padding:0;background:none;box-shadow:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.consent-box summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;cursor:pointer}
.consent-box summary::-webkit-details-marker{display:none}
.consent-box .consent-title{font-size:15px;font-weight:600}
.consent-open{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);white-space:nowrap}
.consent-open i{transition:transform .2s var(--ease)}
.consent-box[open] .consent-open i{transform:rotate(180deg)}
.consent-box dl{margin:0 0 4px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px;line-height:1.6;color:var(--muted)}
.consent-box dt{font-weight:600;color:var(--ink);white-space:nowrap}
.consent-box dd{margin:0}
.consent-box .consent-more{margin:12px 0 16px}
.consent-check{margin-top:16px}
@media (max-width:640px){.consent-box dl{grid-template-columns:1fr;gap:2px}.consent-box dd{margin-bottom:8px}}
/* 단계 폼: 진행 표시 아래 선과 구역 위 선이 겹치지 않게 */
.qsteps ~ .q-sec{border-top:0;padding-top:16px}
.consent .mkt{margin-top:28px}
/* 단계 폼 마지막: 이전·보내기 한 줄 */
.step-nav button[type=submit]{margin-left:auto;min-width:220px}
.step-nav + .submit .note{margin-top:16px;text-align:right}
button.btn-dark{border:0}
.consent-check + .consent-check{margin-top:10px;font-weight:500}
/* 3단계: 서비스 여러 개 고르면 묶음마다 구분 선과 큰 제목 */
.q-group > h3{font-size:19px;color:var(--accent-text)}
.q-group:not([hidden]) ~ .q-group:not([hidden]){margin-top:24px;padding-top:40px;border-top:1px solid var(--ink)}

/* 폼 접수 창구 전 임시 — 전화·메일 버튼(publish.py FORMS_LIVE) */
.form-off{margin-top:24px;padding:32px;background:var(--paper)}
.form-off-t{margin:0;font-size:17px;font-weight:600;color:var(--ink)}
.form-off-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
@media (max-width:640px){.form-off{padding:24px 20px}.form-off-btns .btn{width:100%;justify-content:center}}

/* 전문가해설 왼쪽 사이드바 (인아님 10-26, 옛 사이트 메뉴 그대로) — 글·목록 공통 */
.blog-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;align-items:start}
main > .blog-layout{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}   /* 목록(.wrap)과 왼쪽 끝 맞춤 */
.blog-layout .blog-post{max-width:720px;margin:0;padding-left:0;padding-right:0}
.blog-side{position:sticky;top:112px;padding-top:48px}   /* 글 쪽 분류 줄과 높이 맞춤 */
.blog-list .blog-side{padding-top:6px}
.blog-side-t{font-size:20px;font-weight:700;color:var(--ink)}
.blog-side-s{margin-top:6px;font-size:14px;line-height:1.5;color:var(--muted)}
.blog-side nav{margin-top:24px;border-top:1px solid var(--line)}
.blog-side ul{list-style:none;margin:0;padding:0}
.blog-side nav > ul > li{border-bottom:1px solid var(--line)}
.blog-side a{display:block;padding:12px 0;font-size:15px;color:var(--ink);text-decoration:none}
.blog-side a:hover,.blog-side a[aria-current="page"],.blog-side a.on{color:var(--accent-text);font-weight:700}
.blog-side li ul{padding:0 0 10px 12px}
.blog-side li ul a{padding:6px 0;font-size:14px;color:var(--muted);font-weight:400}
.blog-side li ul a[aria-current="page"]{color:var(--accent-text);font-weight:700}
.blog-group{margin-top:56px;font-size:22px;scroll-margin-top:120px}
.blog-main > .blog-group:first-of-type{margin-top:40px}
@media (max-width:1024px){
  .blog-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .blog-side{position:static;padding-top:32px}
  .blog-list .blog-side{padding-top:0;margin-bottom:24px}
  .blog-side-t,.blog-side-s,.blog-side li ul{display:none}
  .blog-side nav{margin-top:0;border-top:0}
  .blog-side nav > ul{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gut));padding-right:var(--gut)}
  .blog-side nav > ul::-webkit-scrollbar{display:none}
  .blog-side nav > ul > li{border:0;flex:none}
  .blog-side a{padding:8px 14px;border:1px solid var(--rule);border-radius:999px;font-size:14px;white-space:nowrap}
  .blog-side a[aria-current="page"],.blog-side a.on{border-color:var(--accent)}
  .blog-layout .blog-post{padding-top:32px}
}

/* 법인소개 대표 사진(옛 사이트 HSJ02504) — 인용구 아래 */
.about-ceo{display:block;width:100%;max-width:360px;height:auto;margin-top:32px}
/* 2단 CTA(법인소개 맨 아래, 옛 사이트처럼 왼쪽 큰 문장·오른쪽 질문+버튼) */
.cta.cta-split .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px;align-items:center;text-align:left}
.cta.cta-split .cta-big{max-width:none;margin:0;font-size:24px;line-height:1.6;font-weight:700}
.cta.cta-split .cta-side{padding-left:40px;border-left:1px solid rgba(255,255,255,.25)}
.cta.cta-split .cta-sub{max-width:none;margin:0;font-size:18px;opacity:1}
.cta.cta-split .btns{justify-content:flex-start;margin-top:24px}
@media (max-width:900px){
  .cta.cta-split .wrap{grid-template-columns:minmax(0,1fr);gap:28px}
  .cta.cta-split .cta-big{font-size:19px}
  .cta.cta-split .cta-side{padding-left:0;padding-top:24px;border-left:0;border-top:1px solid rgba(255,255,255,.25)}
  .about-ceo{max-width:none}
}
/* 법인소개 「We only think…」 — 왼쪽 큰 영문 다짐, 오른쪽 세 줄(인아님 10-26: 가운데 작은 글씨+아이콘 3칸이 애매) */
.about-vals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:start}
.about-motto{font-size:34px;line-height:1.3;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.about-motto span{display:block;margin-bottom:14px;font-size:16px;font-weight:700;letter-spacing:.08em;color:var(--accent-text)}
.about-val-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.about-val-list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.about-val-list li:last-child{border-bottom-color:var(--ink)}   /* 위·아래 끝선 같은 굵기(인아님 10-26) */
.about-val-list i{font-size:24px;color:var(--accent-text);margin-top:2px}
.about-val-list p{font-size:16px;line-height:1.75}
@media (max-width:900px){.about-vals{grid-template-columns:minmax(0,1fr);gap:28px}.about-motto{font-size:26px}}
/* 대표인사: 머리글·제목 위 한 줄 → 아래 사진 | 본문 (인아님 10-26) */
.about-ceo-row{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:56px;align-items:start;margin-top:40px}
.about-ceo-row .about-ceo{margin-top:0;max-width:none}
@media (max-width:900px){.about-ceo-row{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}}
/* 로고 그림의 흰 바탕이 회색 구역에서 네모로 보임(인아님 10-26) → 바탕색과 곱해 흰 부분을 투명처럼 */
/* (multiply는 띠의 가장자리 흐림 마스크와 겹쳐 안 먹음 → 로고 PNG 바깥 흰 바탕을 직접 투명 처리함, 10-26) */
/* 최상단 메뉴: 가운데 정렬 + 글자 조금 크게(인아님 10-26). 펼친 메뉴가 보이는 넓은 화면만 */
@media (min-width:1200px){
  .top .bar{position:relative}
  .nav{position:absolute;left:50%;top:0;height:100%;margin:0;transform:translateX(-50%)}   /* 메뉴+견적문의 묶음을 화면 정가운데(인아님 10-26) — 좁으면 겹쳐 1200px 이상만 */
  .nav .quote{margin-left:8px}
  .top .top-right{margin-left:auto}
  .nav > ul > li > a{font-size:17px}
}
/* 흰 구역이 연달아 오면 여백이 2배로 보임 → 아래 구역 위쪽 여백 없애고 얇은 선으로 나눔(10-26 서비스 검수, J 교육 페이지) */
.sec:not(.paper):not(.more) + .sec:not(.paper):not(.more){padding-top:0}
.sec:not(.paper):not(.more) + .sec:not(.paper):not(.more) > .wrap{border-top:1px solid var(--line);padding-top:var(--sec)}
/* 사진별 잘림 기준점 — 넓게 잘리는 사진(맨 위 큰 사진·띠·카드)에서 얼굴·안전모가 잘리지 않게(인아님 10-26 「얼굴 잘린 사진」) */
img[src$="HSJ02232.jpg"]{object-position:center 45%}
img[src$="HSJ02298.jpg"]{object-position:center 22%}
img[src$="HSJ02307.jpg"]{object-position:center 32%}
img[src$="HSJ02308.jpg"]{object-position:center 45%}
img[src$="HSJ02364.jpg"]{object-position:center 52%}
img[src$="HSJ02370.jpg"]{object-position:center 15%}
img[src$="HSJ02387.jpg"]{object-position:center 60%}
img[src$="HSJ02418.jpg"]{object-position:center 72%}
img[src$="HSJ02453.jpg"]{object-position:center 62%}
img[src$="about/hero.jpg"]{object-position:center 75%}
img[src$="DSC00578.jpg"]{object-position:center 35%}
img[src$="HSJ02361.jpg"]{object-position:center 60%}
@media (min-width:901px) and (max-width:1399px){.nav > ul > li > a{padding:0 12px}.nav > ul > li > a{font-size:16px}}   /* 상담 신청 단추가 더해져 좁은 PC에서 메뉴 줄바꿈 → 간격만 줄임 */
.top .logo{flex:none}
@media (min-width:901px) and (max-width:1099px){.top .top-right .tel,.top .top-sep{display:none}}   /* 좁은 PC: 전화번호까지 넣으면 겹침 → 숨김(바닥글·폼에 번호 있음) */
img[src*="삼성SDI_고화질"]{object-position:5% center}

/* 상단 오른쪽: 「상담 신청」 글자 링크 | 전화번호 (인아님 10-27 가안) */
.top-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.top-right .tel{margin-left:0}
.consult-link{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.consult-link i{font-size:18px;color:var(--accent-text)}
.consult-link:hover{color:var(--accent-text)}
.top-sep{width:1px;height:14px;background:var(--rule)}
.consult-m{display:none}
@media (max-width:900px){
  .top-right{gap:0}.top-right .consult-link,.top-sep{display:none}   /* 휴대폰 머리줄은 전화번호만 */
  .consult-m{display:block;margin-top:16px;padding:12px 0;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none}   /* 휴대폰 메뉴 안 「상담 신청」 */
}

/* 넓은 펼침 메뉴(메가 메뉴) — 300_출시/menu.py 가 menu.json·글 목록으로 만들어 끼움(인아님 10-27 「가」). 휴대폰은 원래 목록 */
.mega{display:none}
@media (min-width:901px){
  .top{overflow-x:clip}
  .nav li.has-mega{position:static}
  .has-mega > .dd{display:none}
  .mega{display:block;position:absolute;top:100%;left:50%;width:100vw;transform:translate(-50%,-4px);background:#fff;border-top:1px solid var(--line);box-shadow:0 18px 32px rgba(17,17,17,.08);opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s .18s}
  .has-mega:hover > .mega,.has-mega:focus-within > .mega{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
  .mm-in{display:grid;gap:32px;max-width:1440px;margin:0 auto;padding:32px 48px 36px}   /* 로고와 같은 왼쪽 선 */
  .mm-in.c5{grid-template-columns:1.15fr repeat(4,1fr)}
  .mm-in.c3{grid-template-columns:1.15fr 1fr 1fr 2fr}
  .mm-in.c4{grid-template-columns:1.15fr 1.1fr 1.1fr 1.9fr}
  .mm-intro{padding-right:24px;border-right:1px solid var(--line)}
  .mm-intro b{display:block;font-size:20px;line-height:1.35;color:var(--ink)}
  .mm-intro p{margin-top:10px;font-size:14px;line-height:1.6;color:var(--muted)}
  .mm-intro a{display:inline-block;margin-top:18px;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}
  .mm-g{display:block;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--soft)}
  .mm-i{display:flex;gap:10px;padding:9px 10px;margin:0 -10px;border-radius:6px;color:var(--ink);text-decoration:none}
  .mm-i i{flex:none;margin-top:2px;font-size:20px;color:var(--accent)}
  .mm-i b{display:block;font-size:15px;font-weight:600;line-height:1.4}
  .mm-i small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--muted)}
  .mm-i:hover{background:var(--paper)}.mm-i:hover b{color:var(--accent)}
  .mm-sub{display:block;padding:5px 0 5px 30px;font-size:14px;line-height:1.45;color:var(--muted);text-decoration:none}
  .mm-sub:hover{color:var(--accent)}.mm-sub.more{font-weight:600;color:var(--ink)}
  .mm-cards{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px}
  .mm-card{display:block;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}
  .mm-card img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;margin-bottom:8px}
  .mm-card:hover{color:var(--accent)}
  .mm-post{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:6px 0;color:var(--ink);text-decoration:none}
  .mm-post img{width:96px;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--paper)}
  .mm-post b{font-size:14px;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mm-post:hover b{color:var(--accent)}
}
@media (min-width:901px) and (max-width:1199px){.mm-in{gap:20px;padding:28px 24px 32px}.mm-intro{display:none}.mm-in.c5{grid-template-columns:repeat(4,1fr)}.mm-in.c3{grid-template-columns:1fr 1fr 2fr}.mm-in.c4{grid-template-columns:1fr 1fr 1.8fr}}   /* 좁은 PC: 소개 칸 빼고 */
@media (prefers-reduced-motion:reduce){.mega{transition:none}}
.svc-list .code i{display:block;font-size:36px;line-height:1}   /* 알파벳 → 메뉴·홈과 같은 아이콘(인아님 10-27) */
@media (min-width:1200px){.nav > ul{gap:14px}}   /* 최상단 메뉴 사이 여백 조금 더(인아님 10-27) — 좁은 PC는 겹쳐서 그대로 */

/* 본문 속 다른 페이지 안내 링크 (D1↔D2 원청·협력업체 페이지 연결, 10-27) */
.inline-link{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.inline-link:hover{color:var(--accent,#1f4fff)}

/* 사업실적 개편(v8·시안_102, 10-27) — 새 사이트 색·부품 그대로(남색·둥근 모서리 안 씀). 숫자·NEW 띠·실적 카드(wc)·검색·소규모 목록 */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sec > .wrap > .sub{margin:10px 0 0;font-size:16px;color:var(--muted)}
.wk-top{padding-top:0}
.wk-stats{display:grid;grid-template-columns:1.4fr repeat(5,1fr);border:1px solid var(--line);background:#fff}
.wk-stat{padding:24px 20px;display:flex;flex-direction:column;gap:6px}
.wk-stat + .wk-stat{border-left:1px solid var(--line)}
.wk-stat b{font-size:30px;font-weight:700;line-height:1.2;color:var(--accent)}
.wk-stat b small{margin-left:3px;font-size:15px;font-weight:600}
.wk-stat span{font-size:14px;color:var(--muted)}
.wk-stat.main{background:var(--accent)}
.wk-stat.main b,.wk-stat.main span{color:#fff}
.new-band{margin-top:40px;padding:32px;background:var(--paper)}   /* 회색 바탕 위 흰 카드 — 서비스 카드(.cards)와 같은 부품 */
.new-head{margin:0;display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700}
.new-tag{flex:none;white-space:nowrap;margin:0;padding:3px 10px;background:var(--accent);color:#fff;font-size:13px}
.new-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0;align-items:stretch;margin-top:20px;background:#fff;border:1px solid var(--line)}
.new-grid > .card{display:flex;flex-direction:column;grid-row:auto;margin:-1px 0 -1px -1px}   /* 공용 .card 줄 맞춤(subgrid) 끔 */
/* 이 서비스로 수행한 실적 — 한 판 목록(인아님 10-28) */
.new-grid .rs{padding:32px 36px;display:flex;flex-direction:column}
.rs .hd{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.rs .hd b{font-size:15px}.rs .hd span{font-size:13px;color:var(--muted)}
.rs ul{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column}
.rs li{flex:1;display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.rs .d{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rs .n{font-size:18px;font-weight:700;color:var(--ink)}
.rs .w{margin-top:4px;font-size:14px;color:var(--muted)}
.rs .b{font-size:12px;font-weight:700;padding:4px 10px;white-space:nowrap}
.rs .b.on{background:#e8f5ee;color:var(--ok)}.rs .b.pre{background:#f1f2f4;color:#555}
@media (max-width:900px){.new-grid{grid-template-columns:minmax(0,1fr)}.new-grid > .card{margin:-1px -1px 0}.new-grid .rs{padding:24px 20px}.rs li{grid-template-columns:minmax(0,1fr);gap:6px}.rs .b{justify-self:start}}
/* 서비스 소개판 A(짙은 먹색, 인아님 10-28). .cta 는 사이트 사진 버튼과 겹쳐 .nx */
.new-svc{position:relative;overflow:hidden;padding:32px 28px;box-shadow:none;background:var(--ink-deep)}
.new-svc .bgi{position:absolute;right:-18px;bottom:-26px;font-size:150px;opacity:.10;color:#fff;pointer-events:none}
.new-svc .k{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;color:#8fa8ff}
.new-svc .t{margin:14px 0 0;font-size:23px;line-height:1.35;font-weight:700;letter-spacing:-.02em;color:#fff}
.new-svc .s{margin:10px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.66)}
.new-svc .st{list-style:none;margin:22px 0 0;padding:0}
.new-svc .st li{display:flex;gap:14px;align-items:baseline;padding:10px 0;font-size:15px;color:#fff;border-top:1px solid rgba(255,255,255,.14)}
.new-svc .st b{font-size:12px;font-weight:700;letter-spacing:.06em;min-width:18px;color:#8fa8ff}
.new-svc .nx{position:relative;margin-top:20px;font-size:15px;font-weight:700;color:#fff;text-decoration:none}
.new-svc .nx span{display:inline-block;transition:transform .2s}
.new-svc .nx:hover span{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.new-svc .nx span{transition:none}}
.wc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px;align-items:stretch}   /* 카드 높이 맞춤(인아님 10-28) */
.wc{background:#fff;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column}
.wc-pic{position:relative;aspect-ratio:16/9;background:var(--paper);overflow:hidden}
.wc-pic img{width:100%;height:100%;object-fit:cover}
.wc-pic.ci{background:#fff;border-bottom:1px solid var(--line)}
.wc-pic.ci img{object-fit:contain;padding:18px}
.wc-pic.none{display:flex;align-items:center;justify-content:center}
.wc-letter{font-size:44px;font-weight:700;color:var(--rule)}
.wc-live{position:absolute;left:12px;top:12px;padding:3px 10px;background:var(--ok);color:#fff;font-size:13px;font-weight:700}
.wc-body{padding:20px 20px 0;display:flex;flex-direction:column;flex:1}
.wc-tag{align-self:flex-start;padding:3px 10px;background:var(--accent-soft);color:var(--accent-text);font-size:var(--fs-chip);font-weight:600}
.wc h3{margin-top:10px;font-size:18px;line-height:1.4}
.wc-date{margin:4px 0 0;font-size:14px;color:var(--muted)}
.wc-svc{margin:8px 0 0;font-size:15px;line-height:1.5}
.wc-scale{margin:4px 0 0;font-size:14px;color:var(--muted)}
.wc-renew{align-self:flex-start;margin:8px 0 0;padding:2px 8px;background:var(--warn-soft);color:var(--warn-ink);font-size:var(--fs-chip);font-weight:600}
.wc-body > :last-child:not(.wc-more){margin-bottom:20px}
.wc-more{margin-top:auto;border:0;border-top:1px solid var(--line)}
.wc-body > :has(+ .wc-more){margin-bottom:16px}   /* 자세히보기는 카드 바닥에 맞춤 — 같은 줄 카드끼리 선 높이 같게 */
.wc-more summary{min-height:0;padding:14px 0;font-size:14px;font-weight:700;color:var(--accent-text)}
.wc-more ul{margin:0;padding:0 0 18px;list-style:none;display:grid;gap:8px;font-size:14px;line-height:1.6}
.wc-more b{color:var(--ink)}
.wc-more li{position:relative;padding-left:20px}
.wc-more li::before{content:"✓";position:absolute;left:0;color:var(--accent-text);font-weight:700}
.wk-search{margin-top:24px;max-width:420px}
.wk-count{margin:24px 0 0;font-size:15px;color:var(--ink)}
.wk-count b{color:var(--accent-text)}
.wk-reset{margin-left:10px;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--muted);text-decoration:underline;cursor:pointer}
.wk-empty{margin-top:24px;padding:40px;background:var(--paper);text-align:center;color:var(--muted)}
.wk-empty b{color:var(--ink)}
.wk-filter .fb-row{flex-wrap:wrap}
.ws-sum{margin-left:12px;font-size:14px;font-weight:400;color:var(--muted)}
.ws-list{margin:0;padding:0 0 20px;list-style:none}
.ws-list li{display:grid;grid-template-columns:80px 200px 1fr;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.ws-date{color:var(--muted)}
.wk-foot{padding-top:0}
@media (max-width:1024px){.wk-stats{grid-template-columns:repeat(3,1fr)}.wk-stat:nth-child(3n+1){border-left:0}.wk-stat:nth-child(n+4){border-top:1px solid var(--line)}
  .wc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.wk-stats{grid-template-columns:repeat(2,1fr)}.wk-stat{border-left:0 !important;border-top:1px solid var(--line)}.wk-stat.main{grid-column:1/-1;border-top:0}
  .wc-grid{grid-template-columns:minmax(0,1fr)}.new-band{padding:20px}.ws-list li{grid-template-columns:1fr;gap:2px}}
/* 대표 실적 가로형(v8 10-1 — 썸네일 38%, 3열) */
.wc.h{flex-direction:row}
.wc.h .wc-pic{flex:0 0 38%;aspect-ratio:auto;min-height:150px}
.wc.h .wc-pic img{position:absolute;inset:0}
.wc.h .wc-pic.ci img{padding:10px}
.wc.h .wc-letter{font-size:32px}
.wc.h .wc-body{padding:16px}
.wc.h .wc-body > :last-child{margin-bottom:0}
.wc.h h3{font-size:17px;margin-top:8px}
.wc.h .wc-svc{order:2;margin-top:6px;font-size:14px}
.wc.h .wc-scale{order:3}
.wc.h .wc-date{order:4;margin-top:auto;padding-top:8px;font-size:13px}
.wc.h .wc-renew{order:5}
.wc.h .wc-live{left:8px;top:8px;font-size:12px;padding:2px 8px}
#wk-feat .wc-grid{align-items:stretch}
@media (max-width:640px){.wc.h .wc-pic{flex-basis:34%}}

/* 현장 리포트(v8 4절, 첫 글=정선군청 시안_99C) — 본문 클래스는 fr- 접두사. 사이트 글꼴·색(명조·남색·둥근 모서리 안 씀) */
.fr{max-width:880px;margin:0 auto;font-size:var(--fs-body);padding:0 var(--gut) var(--sec)}
.fr-crumb{padding-top:40px;font-size:13px;color:var(--muted)}
.fr-crumb a{color:inherit;text-decoration:none}
.fr-sep{margin:0 6px;opacity:.5}
.fr-chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.fr-chip{padding:3px 10px;background:var(--accent-soft);color:var(--accent-text);font-size:var(--fs-chip);font-weight:600}
.fr-chip.fr-ac{background:var(--paper);color:var(--ink)}
.fr h1{font-size:var(--fs-h1-post);line-height:1.38;margin:0 0 16px}
.fr-lead{font-size:18px;line-height:1.8;margin:0 0 28px}
.fr h2{font-size:var(--fs-h2-post);line-height:1.4;margin:64px 0 8px}
.fr-ey{display:block;margin-bottom:6px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--accent-text)}
.fr h3{font-size:19px;line-height:1.45;margin:36px 0 8px}
.fr p{margin:0 0 16px;line-height:1.8}
.fr-sub{font-size:15px;color:var(--muted)}
.fr-tldr{padding:22px 24px;background:var(--paper);border:1px solid var(--line);margin:0 0 28px}
.fr-tl{margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--accent-text)}
.fr-tldr ul{margin:0;padding-left:18px;font-size:15px}
.fr-tldr li{margin-bottom:6px;line-height:1.7}
.fr-hero img{width:100%;height:clamp(230px,38vw,400px);object-fit:cover}
.fr-hero .fr-cap,.fr-cap{margin:8px 0 0;font-size:13px;color:var(--muted)}
.fr table{border-collapse:collapse;width:100%;font-size:15px;margin:0}
.fr th,.fr td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.fr th{background:var(--paper);font-weight:700;white-space:nowrap}
.fr-kpis{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border:1px solid var(--line)}
.fr-kpi{padding:18px 16px}
.fr-kpi + .fr-kpi{border-left:1px solid var(--line)}
.fr-kpi .fr-n{font-size:30px;font-weight:700;line-height:1.15;color:var(--accent)}
.fr-kpi .fr-n small{font-size:15px;margin-left:2px}
.fr-kpi .fr-l{margin-top:4px;font-size:13px;line-height:1.5;color:var(--muted)}
.fr-scope{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.fr-sc{padding:16px 18px;border:1px solid var(--line);background:#fff}
.fr-sc .fr-n{font-size:12px;font-weight:700;color:var(--accent-text)}
.fr-sc .fr-t{margin:3px 0 4px;font-weight:700;font-size:15px;line-height:1.5}
.fr-sc .fr-d{font-size:14px;line-height:1.6;color:var(--muted)}
.fr-g3,.fr-pg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 28px}
.fr-pg.fr-pg2{grid-template-columns:1fr 1fr}
.fr-g3 figure,.fr-pg figure{margin:0;border:1px solid var(--line);background:#fff}
.fr-g3 img,.fr-pg img{width:100%;height:200px;object-fit:cover}
.fr-g3 figcaption,.fr-pg figcaption{padding:8px 12px 10px;font-size:13px;line-height:1.55;color:var(--muted)}
.fr-find{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:20px 22px;margin-bottom:12px;border:1px solid var(--line)}   /* 한쪽 색 막대 금지(인아님) — 상태는 번호 색으로 */
.fr-find.fr-ok .fr-no{color:var(--ok)}.fr-find.fr-warn .fr-no{color:var(--warn)}.fr-find.fr-urg .fr-no{color:var(--accent)}
.fr-find .fr-no{font-size:30px;font-weight:700;line-height:1;color:var(--accent)}
.fr-find h4{margin:0 0 6px;font-size:17px;line-height:1.45}
.fr-find p{margin:0 0 8px;font-size:15px}
.fr-src{margin:0;padding-top:8px;border-top:1px dashed var(--line);font-size:13px;color:var(--muted)}
.fr-res{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.fr-rr{padding:16px 18px;border:1px solid var(--line)}
.fr-rr .fr-g{font-size:24px;font-weight:700;color:var(--accent)}
.fr-rr .fr-t{margin-top:3px;font-size:13px;line-height:1.5;color:var(--muted)}
.fr-road{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.fr-rd{padding:16px 14px;border:1px solid var(--line)}
.fr-rd .fr-h{font-size:13px;font-weight:700;color:var(--accent-text)}
.fr-rd .fr-w{margin:2px 0 8px;font-size:13px;color:var(--muted)}
.fr-rd ul{margin:0;padding-left:16px;font-size:14px;line-height:1.6}
.fr-good{display:grid;grid-template-columns:220px 1fr;gap:18px;padding:18px;margin-top:12px;border:1px solid var(--line)}
.fr-good img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fr-good h4{margin:0 0 6px;font-size:16px}
.fr-good p{margin:0;font-size:15px}
.fr ul.fr-plain{margin:12px 0 0;padding-left:18px;font-size:15px}
.fr-qa{padding:18px 20px;margin:12px 0;border:1px solid var(--line)}
.fr-qa b{display:block;margin-bottom:6px;font-size:16px}
.fr-qa span{font-size:15px;line-height:1.75}
.fr-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:56px;padding:28px;background:var(--paper)}
.fr-cta .fr-t{font-size:19px;font-weight:700;line-height:1.5;max-width:28em}
.fr-cta .fr-s{margin-top:6px;font-size:14px;color:var(--muted)}
.fr-btns{display:flex;gap:10px;flex-wrap:wrap}
.fr-foot{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
/* 현장 리포트 목록 */
.fr-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.fr-card{display:flex;flex-direction:column;background:#fff;box-shadow:0 0 0 1px var(--line);text-decoration:none;color:inherit}
.fr-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fr-card .fr-cb{padding:18px 20px 22px}
.fr-card h3{margin:10px 0 0;font-size:18px;line-height:1.45}
.fr-card p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.fr-card:hover h3{color:var(--accent-text)}
@media (max-width:1024px){.fr-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.fr-kpis{grid-template-columns:1fr 1fr}.fr-kpi:nth-child(3){border-left:0}.fr-kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .fr-scope,.fr-res,.fr-good{grid-template-columns:1fr}.fr-road,.fr-g3,.fr-pg{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.fr h1{font-size:26px}.fr-find{grid-template-columns:1fr;gap:6px}.fr-list{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.fr-g3,.fr-pg,.fr-pg.fr-pg2{grid-template-columns:1fr}}
@media (max-width:640px){.fr table{display:block;overflow-x:auto}}   /* 표가 많음 — 휴대폰에선 표만 가로로 밀어 보기(v8 4-3 ⑧) */

/* 모바일 푸터 정리(인아님 10-27): 서비스 목록은 상단 메뉴에 있어 숨김, 링크는 2열, 떠 있는 견적 버튼이 저작권 줄을 가리지 않게 아래 여백 */
@media (max-width:600px){
  .foot{padding:44px 0 104px}
  .foot nav[aria-label="서비스"]{display:none}
  .foot nav[aria-label="바닥글 메뉴"] ul,.foot nav[aria-label="채널"] ul{grid-template-columns:1fr 1fr;column-gap:16px}
  .foot-grid{gap:28px}
  .foot-bottom{margin-top:28px;flex-direction:column;gap:8px}
}
.foot a.ext::after{content:" ↗";font-size:.85em}

/* 적격수급 카드: 협력업체용 | 원청용 한 줄(인아님 10-28 C안, 화살표 없음) */
.two-go a{color:inherit;text-decoration:none}
.two-go a:hover{text-decoration:underline;text-underline-offset:3px}
.two-go a+a::before{content:"|";display:inline-block;margin:0 10px;color:#c4c9d2;font-weight:400;text-decoration:none}
div.svc-tile:hover{border-color:var(--line);box-shadow:none}

/* 새 블로그 글 (안전개발 10-28) — 요약 상자·사진 2열·숫자 3칸·번호 상자. 한쪽 색 막대 없음 */
.blog-callout .blog-label{display:block;margin-bottom:6px;color:var(--navy)}
.bp-pg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 28px}
.blog-body .bp-pg figure{margin:0}
.blog-body .bp-pg img{height:230px;object-fit:cover}
.bp-nums{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0;border:1px solid var(--line)}
.bp-nums div{padding:18px 16px;text-align:center}
.bp-nums div + div{border-left:1px solid var(--line)}
.bp-nums b{display:block;font-size:28px;line-height:1.2;color:var(--accent)}
.bp-nums span{font-size:14px;color:var(--muted)}
.bp-box{margin:24px 0;padding:20px 24px;border:1px solid var(--line)}
.bp-box ol{margin:0}
.blog-body > figure img{max-height:560px;object-fit:cover}   /* 세로 사진이 화면을 다 덮지 않게(원고 440 상한) */
@media (max-width:640px){.bp-pg,.bp-nums{grid-template-columns:1fr}.bp-nums div + div{border-left:0;border-top:1px solid var(--line)}}
.fr-date{margin:-6px 0 20px;font-size:14px;color:var(--muted)}   /* 게시일 — 블로그 글쓴이 줄과 같은 회색 */
/* 사진·로고 없는 실적 카드 — 서비스 사진+어두운 그라데이션+아이콘·서비스 이름(인아님 10-28) */
.wc-pic.fill::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72))}
.wc-fill{position:absolute;left:20px;right:20px;bottom:16px;z-index:1;display:flex;flex-direction:column;gap:6px;color:#fff;font-size:15px;font-weight:700;line-height:1.35}
.wc-fill i{font-size:28px}
.wc-pic .wc-live{z-index:2}