@charset "utf-8";
/* sub.css는 서브 페이지 전용 스타일 정의 */
/* [P-03] 이 파일은 자체 @media 블록을 두지 않는다 — 반응형은 responsive.css 「sub : responsive」
   구간(css/responsive.css)으로 이관됐다. 2026-09-04 골격 반응형 분리. */

#sub{padding-top:var(--h-header);}
/* [A-4 필수 해소 · 퍼피1e · G-14 피그마우선] get_design_context(38:4807 외 43:*) 실측 — 서브 전
   텍스트 줄높이는 160% 일괄(예외: 서명 120%, 개별 override). reset.css:157 전역 line-height:1 을
   #sub 하위에서 상속 기준값만 되돌린다 — 이미 자체 line-height 를 지정한 규칙(대부분 이 파일
   아래쪽)은 상속을 그대로 덮어써 영향 없음. */
#sub{line-height:1.6;}

/* ─────────────────────────────────────────────
   sub-visual(=.page-header) : S   [S1 공통 — get_design_context(38:4807) 실측]
   Figma SubVisual 전체 476px = 헤더 86(#header 로 이미 렌더) + 배경띠 390.
   .page-header 자체는 헤더를 제외한 390px 만 담당한다. .typeN 은 01~05 대메뉴 배경.
───────────────────────────────────────────── */
.page-header{
	position:relative;width:100%;height:390px;overflow:hidden;
	background-color:#333;background-position:50% 50%;background-repeat:no-repeat;background-size:cover;
}
.page-header:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4);}   /* get_design_context(38:4807) node 38:4468 오버레이 rgba(0,0,0,.4) */
.page-header.type1{background-image:url(../img/sub/s-visual01.jpg);}   /* 01 회사소개 — get_design_context(38:4807) imgRectangle1, FIG-04 열어봄(4096×2443→1920×1145 리사이즈) */
.page-header.type2{background-image:url(../img/sub/s-visual02.jpg);}   /* 02 정보통신설비 유지보수 — TODO(자산 추출 대기) */
.page-header.type3{background-image:url(../img/sub/s-visual03.jpg);}   /* 03 네트워크·보안설비 시공 — TODO(자산 추출 대기) */
.page-header.type4{background-image:url(../img/sub/s-visual04.jpg);}   
.page-header.type5{background-image:url(../img/sub/s-visual05.jpg);}   /* 05 커뮤니티 — TODO(자산 추출 대기) */


.page-header .container{position:relative;z-index:1;height:100%;}
/* [A-5 필수 해소 · 퍼피1e · G-14] 눈대조 §3(25_퍼피5_S2_눈대조.md) 1920 실측 — 제목·부제가 시안보다
   y+51 낮게 렌더됐다(그림 대조, 5페이지 전부 동일 오프셋). bottom 63→114 로 51px 위로 보정 —
   근거: `.page-header__title h1/p` 는 이미 line-height:1.6 명시라 A-4(line-height 전역) 영향권 밖 ·
   재검증은 2회차(퍼피-5) 그림 대조로. */
.page-header__title{position:absolute;left:var(--pad-side);bottom:114px;width:calc(100% - var(--pad-side) * 2);}   /* Figma 38:4470 left236/top257(헤더 86 제외 171) */
.page-header__title h1{font-size:40px;font-weight:700;line-height:1.6;color:#fff;}
.page-header__title p{margin-top:12px;font-size:var(--fs-body);line-height:1.6;color:#fff;}
/* page-header : E */

/* ─────────────────────────────────────────────
   breadcrumb : S   [get_design_context(38:4807) SubBredcrumb 실측 — 우측 정렬 right240/top506]
───────────────────────────────────────────── */
/* [B-4 필수 해소 · 퍼피1e · FIG-06] 브레드크럼 아래 전폭 1px 선 — 시안(get_design_context 38:4807)에
   없다. 골격 잔재라 제거(border-bottom 삭제). */
.sub-breadcrumb{padding:28px 0 50px;}
.sub-breadcrumb .container{display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.sub-breadcrumb__home{display:block;width:20px;height:20px;}
.sub-breadcrumb__sep{display:block;width:20px;height:20px;}
.sub-breadcrumb__item{font-size:14px;line-height:1.6;color:var(--c-text-sub);}
.sub-breadcrumb__item.is-current{font-weight:600;}
/* breadcrumb : E */

/* ─────────────────────────────────────────────
   sub-layout(lnb + real-cont) : S
   [get_design_context(38:4807)] LNB left240/top442/w260, Con left580/top700 — LNB 카드가
   배경띠 하단을 34px 끌어올려 덮는다(442 = 배경 하단 476 − 34). Flex 로 재현:
   -34px 음수 margin-top 으로 겹치고 z-index 로 배경 위에 얹는다.
───────────────────────────────────────────── */
.sub-layout{position:relative;display:flex;align-items:flex-start;gap:80px;}   /* gap = Con.left580 − (LNB.left240+w260)=80 */

.lnb{position:relative;z-index:2;flex:0 0 260px;width:260px;margin-top:-133px;background:var(--c-bg);}
.lnb__logo{height:90px;background-image:url('../img/sub/lnb_head.png');background-size:260px 90px;background-position:0 0;background-repeat:no-repeat;}
.lnb ul li{border:1px solid var(--c-line-weak); border-top: none;}
.lnb ul li:first-child{border-top:1px solid var(--c-line-weak); border-top: 0;	}
.lnb ul li a{
	display:flex;align-items:center;justify-content:space-between;gap:8px;height:58px;padding:0 16px;
	font-size:var(--fs-body);font-weight:600;color:var(--c-text-sub);line-height:1.6;
	transition:all var(--t-slow) linear;
}
.lnb ul li a img{width:20px;height:20px;}
.lnb ul li a:after{content: '';width: 20px; height: 20px; background: url(../img/common/ico_lnb_arrow_default.svg) center no-repeat;}
.lnb ul li.is-active a{background:#00237c;color:#fff;}
.lnb ul li.is-active a:after{background: url(../img/common/ico_lnb_arrow_active.svg) center no-repeat;}
.lnb ul li a:hover{color:var(--c-text);}

.m-lnb-wrap{display: none;}
.real-cont{width:1%;flex:1 1 auto;padding:0 0 160px;}
.real-cont > .container{padding-left:0;padding-right:0;max-width:none;}   /* 부모 .sub-layout 이 이미 .container 안 */
.real-cont > .contain{margin-top: 100px;}
/* sub-layout : E */

/* ─────────────────────────────────────────────
   sub-c-title(콘텐츠 제목) : S   [Figma 38:4920 Sub_C_Title]
───────────────────────────────────────────── */
.sub-c-title{display:flex;flex-direction:column;gap:4px;margin-bottom:40px;}
.sub-c-title__bar{display:flex;align-items:center;gap:12px;}
.sub-c-title__bar span{display:block;width:15px;height:4px;background:var(--c-primary);}
.sub-c-title h2{font-size:var(--fs-head-ms);font-weight:700;color:var(--c-text);}
.sub-c-title p{font-size:var(--fs-body);color:var(--c-text-sub);}
/* sub-c-title : E */

/* [정정 · 퍼피1e] 앞서 이 규칙을 삭제하며 "마크업도 같이 뺀다"고 적었으나, 그건 **이 담당이
   쓰는 s1_1~s1_5.html 뿐**이었다 — s2_*·s3_*·s5_2.html(다른 담당 소관, GD-23 ㉰ 겹치지 않는 조각)
   은 여전히 `.sub-fix-r-btn` 마크업을 쓰고 있는데, 공통 파일(sub.css)에서 그 규칙만 지워
   해당 페이지들의 버튼이 배경 없이 무스타일로 노출되는 새 결함을 냈다(S4 눈대조 C2 — 카카오 원
   없음·문의 흰 아이콘 안 보임. 일하는 규칙 22 ㉰ 위반 — 만든 것을 다른 페이지에서 돌려 보지
   않았다). **되살리고 색을 시안대로 고친다** — 이제 이 규칙은 s2/s3/s5 소관 페이지가 쓰는
   공통 부품이다. s1_1~s1_5 는 이 클래스를 마크업에서 뺐으니 이 규칙은 그 페이지에는 영향 없다.
   색은 `.quick-visual__btn--*` 와 같은 시안 리터럴(카카오 #FFEA00 · 문의 #0000FF · TOP 반투명
   블러) — Figma 40:6964 Fix_R_Btn 재사용. */
.sub-fix-r-btn{position:fixed;right:40px;bottom:154px;z-index:50;display:flex;flex-direction:column;gap:8px;}
.sub-fix-r-btn a,
.sub-fix-r-btn button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:0;padding:0;}
.sub-fix-r-btn a:first-child{background:#ffea00;}      /* 카카오톡 문의 — node 40:7203 */
.sub-fix-r-btn a:nth-child(2){background:var(--c-primary);}   /* 상담 문의 — node 40:7204 */
.sub-fix-r-btn button{background:rgba(68,68,68,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}   /* TOP — node 40:7206 */
.sub-fix-r-btn img{width:24px;height:24px;display:block;pointer-events:none;}

/* ─────────────────────────────────────────────
   sub common(섹션·아티클 공통) : S
───────────────────────────────────────────── */
#sub .section-header{margin-bottom:60px;text-align:center;}   /* [FBD-03] #sub 네임스페이스 */
#sub .section-header h2{
	position:relative;padding-top:24px;font-size:var(--fs-head-ml);font-weight:700;line-height:1.4;
	color:var(--c-text);letter-spacing:-1.32px;
}
#sub .section-header h2:before{
	content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
	width:8px;height:8px;border-radius:50%;background:var(--c-primary);
}
#sub .section-header p{margin-top:24px;font-size:var(--fs-body);line-height:1.8;color:var(--c-text-sub);letter-spacing:-.54px;}

.article-header{margin-bottom:20px;}
/* Figma Sub_C_TitleS(57:5928) — 세로바 3×24 #00237C + 24 Bold #222 lh 1.6 · 제목↔본문 gap 20 */
.article-header h3{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:700;line-height:1.6;color:#222;letter-spacing:0;}
.article-header h3:not(.blind):before{content:'';flex:0 0 3px;width:3px;height:24px;background:#00237c;}

article ~ article{margin-top:80px;}
/* sub common : E */

/* ─────────────────────────────────────────────
   s1_1 인사말 : S   [get_design_context(38:4807) 실측 — DIR-03: URL s1_1.html ↔ .s1_1 ↔ bg_s101.jpg]
───────────────────────────────────────────── */
.s1_1 .arti01{display:flex;gap:60px;}
.s1_1 .arti01 .img-box{flex:0 0 417px;width:417px;}   /* Figma 53:3841 417×571 */
.s1_1 .arti01 .img-box img{width:100%;height:571px;object-fit:cover;border-radius:12px;background:#d9d9d9;}
.s1_1 .arti01 .txt-box{width:1%;flex:1 1 auto;display:flex;flex-direction:column;gap:40px;}
.s1_1 .arti01 .txt-main{display:flex;flex-direction:column;gap:20px;width:100%;}
.s1_1 .arti01 .txt-box .lead{font-size:28px;font-weight:700;line-height:1.6;color:#222;}

.s1_1 .arti01 .txt-box .lead em{font-style:normal;color:var(--c-primary);}
.s1_1 .arti01 .txt-box .body-txt p{font-size:var(--fs-body);line-height:1.6;color:var(--c-text-sub);}
.s1_1 .arti01 .txt-box .body-txt p ~ p{margin-top:20px;}
.s1_1 .arti01 .txt-box .sign{display:flex;justify-content:flex-end;align-items:center;gap:16px;color:var(--c-text);}
.s1_1 .arti01 .txt-box .sign .company{font-size:var(--fs-body-s);}
/* [피그마우선] node 53:3856 「임직원 일동」 리터럴 38px — 토큰 없음(손글씨체 전용 1회성 값).
   [A-4 필수 해소 · 퍼피1e] 이 요소만 줄높이 120%(시안값) — #sub 상속 160% 를 개별 override. */
.s1_1 .arti01 .txt-box .sign .handwrite{font-family: "Nanum Pen Script", cursive;;font-size:38px;line-height:1.2;}

.s1_1 .arti02{display:flex;flex-direction:column;gap:20px;}
.s1_1 .arti02 .article-header{margin-bottom:0;}
.s1_1 .arti02 ul{display:flex;gap:30px;}
.s1_1 .arti02 ul li{flex:0 0 calc(33.3333% - 20px);padding:30px 0;background:#fafdff;border:1px solid #d7e6f9; border:1px solid #B8D1F0; border-radius:12px;text-align:center;}
.s1_1 .arti02 ul li i{display: flex; align-items:center; justify-content: center; text-align: center; width: 80px; height: 80px; margin: 0 auto;}

.s1_1 .arti02 ul li i img{width: auto; height: auto;	}
.s1_1 .arti02 ul li h4{margin-top:12px;font-size:22px;font-weight:700;line-height:1.6;color:#222;}
/* [A-9 필수 해소 · 퍼피1e → C1(S4보고 #8) 로 승격] 「경영 이념」 24px Bold 자간0 — 섹션 전용
   override 를 지웠다. 위 `.article-header h3` 공통 규칙 자체를 24px 로 올려서 이 섹션도 그
   공통 규칙만으로 맞다(중복 선언 제거, 재발 원인 — 섹션만 고치고 공통을 안 고친 것). */
.s1_1 .arti02 ul li p{margin-top:12px;font-size:var(--fs-body-s);line-height:1.6;color:var(--c-text-sub);}
/* s1_1 : E */

/* ─────────────────────────────────────────────
   s1_2 연혁 · s1_3 조직도 · s1_4 면허 및 인증서 · s1_5 찾아오시는 길 : S
   [21_퍼피1r 재작업 · 노드별 실측 반영 — 43:8720·43:9025·43:9309·43:9593 get_design_context 값 그대로]
───────────────────────────────────────────── */
/* s1_2 연혁 — 상단 소개 배너 + 연도별 타임라인(피그마 43:8730 Img/01~04 실측) */
/* [A-7 필수 해소 · 퍼피1e · FIG-04] Figma node 53:3795(Rectangle 198, 43:8730 Con 안 57:5604 Img)
   렌더 그대로 추출(`download_assets` export, 1100×282 — 박스 치수와 정확히 같다). raw fill 이 아니라
   **합성된 export** 를 쓴다(효과가 렌더와 다르면 렌더가 정본). 원본 `_source/figma_export/sub/`. */
.s1_2 .arti01{display:flex;flex-direction:column;gap:40px;}
.s1_2 .hero-txt{position:relative;box-sizing:border-box;width:100%;height:282px;padding:0 60px;margin:0;overflow:hidden;background:#dfe6ee url('../img/sub/bg_s102.png') center/cover no-repeat;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}
.s1_2 .hero-txt .eng{margin:0;font-size:36px;font-weight:700;line-height:1.6;color:#00237c;letter-spacing:0;}
.s1_2 .hero-txt .kor{margin:10px 0 0;font-size:16px;font-weight:400;line-height:1.6;color:#333;}
.s1_2 .history-list{display:flex;flex-direction:column;gap:40px;width:100%;}
.s1_2 .history-list__year{display:flex;align-items:flex-start;gap:62px;padding:0;border:0;}
.s1_2 .history-list__year .year{flex:0 0 280px;width:280px;margin:0;padding-top:12px;border-top:1px solid #00237c;font-size:38px;font-weight:600;line-height:1.6;color:#00237c;}
.s1_2 .history-list__year .year:before{content:none;}
.s1_2 .history-list__year ul{width:1%;flex:1 1 758px;display:flex;flex-direction:column;gap:0;padding:0;}
.s1_2 .history-list__year ul li{display:flex;align-items:flex-start;gap:8px;padding:16px 0;border-top:1px solid #eee;font-size:16px;font-weight:400;line-height:1.6;color:#666;}
.s1_2 .history-list__year ul li .month{flex:0 0 37px;width:37px;font-size:18px;font-weight:600;line-height:1.6;color:#222;}
.s1_2 .history-list__year ul li > span:last-child{min-width:0;flex:1 1 auto;overflow-wrap:break-word;word-break:keep-all;}

/* s1_3 조직도 — 피그마 43:9025(Con 43:9035) 실측. 대표이사 원(#00237c) → 부사장/감사 두 박스 →
   4부서 컬럼(헤더 #006aff, 팀 박스 #eee 보더). 연결선은 HTM-07 에 따라 빈 태그가 아니라
   ::before/::after 가상요소로 그린다. */
.s1_3 .arti01{}
.s1_3 .org-chart{position:relative;width:1100px;max-width:100%;margin:0 auto;padding:0;text-align:center;}
.s1_3 .org-chart__ceo{position:relative;z-index:1;width:166px;height:166px;margin:0 auto;border-radius:50%;background:#00237c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.s1_3 .org-chart__ceo-name{margin:0;font-size:20px;font-weight:700;line-height:1.6;color:#fff;}
.s1_3 .org-chart__ceo-role{margin:0;font-size:16px;font-weight:700;line-height:1.6;color:#72d2ff;}
.s1_3 .org-chart__exec{position:relative;display:flex;justify-content:center;gap:108px;margin-top:70px;}
.s1_3 .org-chart__exec:before{content:'';position:absolute;top:-70px;left:50%;width:0;height:70px;border-left:2px solid #00237c;transform:translateX(-1px);}
.s1_3 .org-chart__exec:after{content:'';position:absolute;top:29px;left:calc(50% - 53px);width:106px;height:0;border-top:2px solid #00237c;}
.s1_3 .org-chart__exec-box{box-sizing:border-box;width:211px;height:60px;display:flex;align-items:center;justify-content:center;border:1px solid #00237c;background:#fff;font-size:18px;font-weight:700;line-height:1.6;color:#00237c;}
.s1_3 .org-chart__depts{position:relative;display:flex;gap:40px;justify-content:center;margin-top:97px;}
.s1_3 .org-chart__depts:before{content:'';position:absolute;top:-34px;left:122px;right:122px;height:0;border-top:2px solid #00237c;}
.s1_3 .org-chart__depts:after{content:'';position:absolute;top:-97px;left:50%;width:0;height:63px;border-left:2px solid #00237c;transform:translateX(-1px);}
.s1_3 .org-chart__dept{position:relative;flex:0 0 245px;display:flex;flex-direction:column;align-items:center;}
.s1_3 .org-chart__dept:before{content:'';position:absolute;top:-34px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#006aff;z-index:1;}
.s1_3 .org-chart__dept-head{width:100%;height:60px;display:flex;align-items:center;justify-content:center;background:#006aff;color:#fff;font-size:18px;font-weight:700;line-height:1.6;}
.s1_3 .org-chart__dept ul{width:100%;}
.s1_3 .org-chart__dept ul li{position:relative;width:100%;height:48px;display:flex;align-items:center;justify-content:center;margin-top:12px;background:#dfebf0;border:2px solid #d0e2ea;font-size:16px;font-weight:600;line-height:1.6;color:#00237c;}
.s1_3 .org-chart__dept ul li:before{content:'';position:absolute;top:-12px;left:50%;width:0;height:12px;border-left:2px solid #00237c;transform:translateX(-1px);}
.s1_3 .org-chart__dept.is-branch ul li{background:#eef1f3;border-style:dashed;}

/* s1_4 면허 및 인증서 — 피그마 43:9309(Con 43:9324) 실측. 카드(border-radius:12px, 이미지 영역
   #f0f4f9 h350) + KC 표 2종 + [상호 변경 안내]/[시안 안내] 노티스(76:4537/76:4542). */
.s1_4 .arti01{display:flex;flex-direction:column;gap:80px;}
.s1_4 .license-group{margin-top:0;display:flex;flex-direction:column;gap:20px;}
.s1_4 .license-group__tit{display:flex;align-items:center;gap:12px;margin:0;font-size:24px;font-weight:700;line-height:1.6;color:#222;}
.s1_4 .license-group__tit:before{content:'';flex:0 0 3px;width:3px;height:24px;background:#00237c;}
.s1_4 .license-group__tit--dot:before{content:'';flex:0 0 3px;width:3px;height:24px;background:#00237c;border-radius:0;position:static;top:auto;left:auto;}
.s1_4 .license-group__desc{margin:0;font-size:18px;line-height:1.6;color:#666;}
.s1_4 .license-cards{display:flex;flex-wrap:wrap;gap:30px;margin-top:0;}
.s1_4 .license-cards li{flex:0 0 346px;border:1px solid #B8D1F0;border-radius:12px;padding-bottom:16px;}
.s1_4 .license-cards__img{height:350px;display:flex;align-items:center;justify-content:center;background:#f0f4f9;border-radius:12px 12px 0 0;overflow:hidden;}
.s1_4 .license-cards__img img{max-width:222px;max-height:314px;width:auto;height:auto;object-fit:contain;box-shadow:0 2px 8px rgba(0,0,0,.12);}
.s1_4 .license-cards .tit{margin-top:16px;padding:0 16px;font-size:16px;font-weight:700;color:var(--c-text);}
.s1_4 .license-cards .desc{margin-top:4px;padding:0 16px;font-size:14px;color:#666;}
.s1_4 .license-cards .date{margin-top:4px;padding:0 16px;font-size:12px;color:#666;}
.s1_4 .license-table-wrap{margin-top:0px;overflow-x:auto; margin-bottom: 30px;}
.s1_4 .license-table{width:100%;border-collapse:collapse;border-top:2px solid #000;}
.s1_4 .license-table th,.s1_4 .license-table td{padding:17px 20px;border:1px solid #d7d7d7;font-size:16px;text-align:center;}
.s1_4 .license-table th{background:#f2f2f2;font-weight:700;color:var(--c-text);}
.s1_4 .license-table td{color:var(--c-text); padding: 18px 20px;;}
.s1_4 .license-table--wide td{padding: 14px 20px;}
.s1_4 .license-table--wide td:last-child{line-height: 160%; }
/* [A-8 필수 해소 · 퍼피1e · G-14] get_design_context(76:4537/76:4542) 노티스 리터럴 색 #00237c. */
.s1_4 .s-notice{position: relative; margin-top:0px;padding:24px 30px 24px 33px;background:#f8f8f8;border-radius:12px;font-size:14px;line-height:1.6;color:#00237c; border: 1px solid #ddd; border-left: 0;}
.s1_4 .s-notice:before{position: absolute;content: ''; width: 3px; height: 100%; background: #00237C; left: 0; top: 0;}
.s1_4 .s-notice__tit{font-weight:700;}


.s1_5 .arti01{display:flex;flex-direction:column;gap:20px;}
.s1_5 .branch-tabs{display:flex;flex-wrap:nowrap;gap:12px;margin:0;width:100%;}
.s1_5 .branch-tabs button{flex:1 1 0;min-width:0;height:57px;padding:0 8px;border-radius:10px;border:1px solid #ccc;background:#fff;font-size:18px;font-weight:400;line-height:1.6;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all var(--t-base) linear;}
.s1_5 .branch-tabs button[aria-selected="true"]{background:#006aff;border-color:#006aff;color:#fff;font-weight:700;}
.s1_5 .branch-panel{flex-direction:column;gap:20px;}
.s1_5 .branch-panel:not([hidden]){display:flex;}
.s1_5 .branch-panel[hidden]{display:none;}
.s1_5 .map-box{position:relative;height:540px;display:flex;align-items:center;justify-content:center;background:#6c6c6c;color:#fff;font-size:25.6px;font-weight:700;}
.s1_5 .map-box .root_daum_roughmap{width:100%;}
.s1_5 .root_daum_roughmap .wrap_map{height:540px !important;}
.root_daum_roughmap .wrap_controllers{display:none;}
.root_daum_roughmap .cont{display:none;}
.s1_5 .branch-info{margin:0;display:flex;flex-direction:column;gap:12px;}
.s1_5 .branch-info dl{display:flex;align-items:flex-start;gap:20px;margin:0;padding:12px 0;border-bottom:1px solid #ddd;}
.s1_5 .branch-info__row{display:flex;flex-wrap:nowrap;align-items:stretch;gap:100px;border-bottom:1px solid #ddd;}
.s1_5 .branch-info__row dl{flex:0 0 auto;flex-direction:row;border-bottom:0;}
.s1_5 .branch-info dt{flex:0 0 92px;font-size:18px;font-weight:700;line-height:1.6;color:#222;position:relative;padding-left:27px;}
.s1_5 .branch-info dt:before{content:'';position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:#222;}
.s1_5 .branch-info dd{margin:0;font-size:16px;line-height:1.6;color:#444;}
.s1_5 .branch-panel--todo{padding:80px 0;text-align:center;}
.s1_5 .branch-panel__todo{font-size:var(--fs-body);color:var(--c-text-weak);}
.s1_5 .branch-note{display:none;}




/* s1_2~s1_5 : E */
/* [P-03] sub 반응형(1400·1280·1024·768·480)은 css/responsive.css 「sub : responsive」로 이관됐다.
   이 파일에서는 데스크톱 기준값만 정의한다. */

/* ─────────────────────────────────────────────
   popup page : S      [CSS-06]
   ※ pop_*.html 전용. 별도 CSS 파일을 만들지 않는다 — 6분할을 깨지 않기 위해
      서브 계열 문서로 보고 sub.css 안에 둔다.
───────────────────────────────────────────── */
.popup{padding:40px 30px 60px;}
.popup__head{padding-bottom:20px;border-bottom:2px solid var(--c-text);}
.popup__head h1{font-size:var(--fs-head-s);line-height:var(--lh-head-s);}
.popup__body{padding-top:30px;font-size:var(--fs-body-s);line-height:var(--lh-body-s);color:var(--c-text-sub);}
.popup__body h2{margin:32px 0 12px;font-size:var(--fs-body-l);line-height:var(--lh-body-l);color:var(--c-text);}
.popup__body h2:first-child{margin-top:0;}
.popup__body p + p{margin-top:12px;}
.popup__body ul{margin-top:12px;}
.popup__body ul li{position:relative;padding-left:12px;}
.popup__body ul li:before{content:'';position:absolute;top:11px;left:0;width:3px;height:3px;border-radius:50%;background:var(--c-text-weak);}
.popup__foot{margin-top:40px;text-align:center;}
.popup__close{min-width:140px;height:52px;padding:0 24px;background:var(--c-text);color:var(--c-text-invert);font-size:var(--fs-button);line-height:var(--lh-button);transition:background var(--t-base) linear;}
.popup__close:hover,
.popup__close:focus-visible{background:var(--c-primary);}
/* popup page : E */

/* ═══════════════════════════════════════════════════════════
   S2/S3/S4 병합 (2026-09-21 지휘자 합침 · GD-23 병렬 제작 규칙)
   ═══════════════════════════════════════════════════════════ */

/* ── 출처: _qa/퍼피1_s3/sub_s3.css (퍼피-1b · s2_1~s2_6 공통/개별) : S ── */
/* ============================================================
   sub_s3.css — 원테크솔루션(주) 서브 S3(02_정보통신설비 유지보수) 전용 임시 CSS
   퍼피-1b 작업본 · 2026-09-21
   근거: 16_퍼피6_서브페이지_분석서.md §1·§3·§7(S3) · _qa/퍼피6_sub/ 내 png(그림 대조)
   대상 노드: 13:3494 · 57:6346 · 76:4591 · 81:6056 · 81:8417 · 81:8954

   [임시 배치 안내 — 지휘자 합치기 작업]
   이 파일은 main/css/sub.css 가 아니라 여기(_qa/퍼피1_s3/)에 둔다(S2 세션이 sub.css 를
   동시 작업 중이라 충돌 방지). 각 s2_*.html 은 <link rel="stylesheet" href="../_qa/퍼피1_s3/sub_s3.css">
   를 sub.css 뒤에 "임시로" 추가 로드한다. 합칠 때: 이 파일 전체를 main/css/sub.css 끝에 붙이고
   각 페이지의 임시 <link> 줄을 삭제한다. 클래스는 전부 .s2- 접두이므로 sub.css 기존 클래스와
   충돌하지 않는다(S2/S4 세션의 페이지 네임스페이스 .s2_1~.s2_6 과도 분리됨 — 이쪽은 BEM 컴포넌트).
   반응형은 @media 블록을 그대로 responsive.css 로 옮겨 합친다(CSS-02 — main/sub.css 에는 @media 를
   두지 않는다는 골격 관행에 맞춤. 이 임시 파일 안에서는 편의상 함께 둔다).
   ============================================================ */

/* ── 공통 : 페이지 헤더 배경(02 유지보수)/(03 시공) 은 sub.css page-header.type2/type3 재사용 ── */

/* ── LNB 9칸(정보통신설비 유지보수 하위) — 골격 .lnb 재사용, 항목 9개로 확장 ── */
.lnb ul li.is-disabled a{cursor:default;color:var(--c-text-weak);}
.lnb ul li.is-disabled a:hover{color:var(--c-text-weak);}

/* ── 알림/공지 박스 공통 ── */
.s2-notice{margin-top:16px;padding:20px 24px;background:var(--c-bg-weak);border-radius:var(--r-md);}
.s2-notice__tit{display:flex;align-items:center;gap:8px;font-size:var(--fs-body-s);font-weight:700;color:var(--c-text);}
.s2-notice__tit:before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--c-primary);}
.s2-notice ul{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.s2-notice li{position:relative;padding-left:14px;font-size:var(--fs-body-s);line-height:1.6;color:var(--c-text-sub);}
.s2-notice li:before{content:'※';position:absolute;left:0;top:0;color:var(--c-text-weak);}

/* ── S2-1 : 유지보수 관리제도 안내 (13:3494) ── */
.s2_1 .s2-info-cards{display:flex;gap:24px;margin-top:24px;}
.s2_1 .s2-info-cards li{flex:1 1 0;padding:28px 24px;background:var(--c-primary-dark);border-radius:var(--r-lg);color:#fff;}
.s2_1 .s2-info-cards .num{display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-label);font-weight:700; color: var(--Primary-Blue3, #72D2FF);
text-align: center;

/* Title3 */
font-family: Pretendard;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 160%; /* 35.2px */}
.s2_1 .s2-info-cards h4{font-size:var(--fs-body-l);font-weight:700;}
.s2_1 .s2-info-cards p{margin-top:8px;font-size:var(--fs-caption);line-height:1.6;color:var(--c-text-on-dark);}

.s2-table{margin-top:20px;width:100%;border-collapse:collapse;font-size:var(--fs-body-s);}
.s2-table caption{margin-bottom:12px;font-size:var(--fs-body-l);font-weight:700;color:var(--c-text);text-align:left;}
.s2-table th,
.s2-table td{padding:16px 20px;border-bottom:1px solid var(--c-line-weak);text-align:center;color:var(--c-text-sub);}
.s2-table thead th{background:var(--c-bg-weak);color:var(--c-text);font-weight:700;border-top:2px solid var(--c-text); text-align: center;}
.s2-table td.is-strong{color:var(--c-primary);font-weight:600;}
.s2-table--left th,
.s2-table--left td{text-align:left;}

.s2-sec-tit{margin-top:60px;margin-bottom:20px;font-size:24px;line-height:1.6;font-weight:700;color:var(--c-text);}   /* [M-1·N2-1 병합 반영] 시안 24px/lh160% — 페이지별 30px/48px 덮어쓰기 제거 */

.s2_1 .s2-manager-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px;}
.s2_1 .s2-manager-cards li{display:flex;align-items:flex-start;gap:16px;padding:24px;border:1px solid var(--c-line-weak);border-radius:var(--r-md);
border: 1px solid #D7E6F9;
background: #FAFDFF;

}
.s2_1 .s2-manager-cards .badge{flex:0 0 auto;font-size:var(--fs-caption);font-weight:700;color:#fff;background:var(--c-primary);border-radius:var(--r-sm);padding:2px 8px;}
.s2_1 .s2-manager-cards .txt h4{font-size:var(--fs-body);font-weight:700;color:var(--c-text);}
.s2_1 .s2-manager-cards .txt p{margin-top:4px;font-size:var(--fs-caption);line-height:1.6;color:var(--c-text-sub);}
.s2_1 .s2-manager-cards .ico{margin-left:auto;flex:0 0 auto;width:32px;height:32px;}

.s2-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:60px;padding:32px 40px;background:var(--c-primary-dark);border-radius:var(--r-lg);color:#fff;}
.s2-cta p{font-size:var(--fs-body-l);font-weight:700;line-height:1.5;}
.s2-cta__tel{font-size:var(--fs-caption);font-weight:400;margin-top:8px;}
.s2-cta__btn{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;height:52px;padding:0 24px;background:var(--c-primary);border-radius:var(--r-pill);font-size:var(--fs-button);line-height:var(--lh-button);color:#fff;transition:background var(--t-base) linear;}
.s2-cta__btn:hover,
.s2-cta__btn:focus-visible{background:#0000cc;}



/* ── S2-2 : 대상 설비 34종 (57:6346) ── */
.s2_2 .s2-cta{gap:0px}
.s2_2 .s2-list-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px;}
.s2_2 .s2-list-grid li{display:flex;align-items:center;gap:21px;padding:18px 20px;border:1px solid var(--c-line-weak);border-radius:var(--r-md);}
.s2_2 .s2-list-grid .num{flex:0 0 32px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--c-primary);color:#fff;font-size:var(--fs-caption);font-weight:700;}
.s2_2 .s2-list-grid .txt h4{font-size:var(--fs-body);font-weight:700;color:var(--c-text);}
.s2_2 .s2-list-grid .txt p{margin-top:2px;font-size:var(--fs-caption);color:var(--c-text-sub);}

/* ── S2-3 : 대상 건축물 (76:4591) ── */
.s2_3 .s2-info-cards{display:flex;gap:24px;margin-top:24px;}
.s2_3 .s2-info-cards li{flex:1 1 0;padding:28px 24px;border-radius:var(--r-lg);background:var(--c-bg-weak);}
.s2_3 .s2-info-cards .label{font-size:var(--fs-caption);color:var(--c-text-sub);}
.s2_3 .s2-info-cards .value{margin-top:8px;font-size:var(--fs-head-xs);font-weight:700;color:var(--c-primary-dark);}

.s2_3 .s2b1-step-card__step{height: 20px;}
.s2_3 .s2b1-step-card__in{gap:14px;}
.s2_3 .s2b1-step-card__a{margin-top: 6px; font-weight: 400;}
.s2_3 .s2-check-box{padding-right: 40px;}

.s2-tag-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:20px;}
.s2-tag-grid li{display:flex;align-items:center;gap:10px;padding:16px;border:1px solid var(--c-line-weak);border-radius:var(--r-md);font-size:var(--fs-body-s);color:var(--c-text);}
.s2-tag-grid li:before{content:'';flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--c-primary);}
.s2-tag-grid li.is-weak{color:var(--c-text-weak);}
.s2-tag-grid li.is-weak:before{background:var(--c-line-strong);}

.s2-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;}
.s2-photo-grid li .pic{aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-md);background:var(--c-bg-weak);}
.s2-photo-grid li .pic img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) linear;}
.s2-photo-grid li:hover .pic img{transform:scale(1.05);}
.s2-photo-grid li h4{margin-top:12px;font-size:var(--fs-body);font-weight:700;color:var(--c-text);}
.s2-photo-grid li p{margin-top:4px;font-size:var(--fs-caption);line-height:1.6;color:var(--c-text-sub);}

/* ── S2-4 : 점검 비용·견적 검증 (81:6056) ── */
.s2_4 .s2-price-cards{display:flex;gap:24px;margin-top:24px;}
.s2_4 .s2-price-cards li{flex:1 1 0;padding:28px 24px;border-radius:var(--r-lg);background:var(--c-bg-weak);text-align:center;}
.s2_4 .s2-price-cards li.is-primary{background:var(--c-primary-dark);color:#fff;}
.s2_4 .s2-price-cards .tag{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);background:var(--c-primary);color:#fff;font-size:var(--fs-caption);}
.s2_4 .s2-price-cards .price{margin-top:12px;font-size:var(--fs-head-xs);font-weight:700;}
.s2_4 .s2-price-cards .desc{margin-top:8px;font-size:var(--fs-caption);color:var(--c-text-sub);}
.s2_4 .s2-price-cards li.is-primary .desc{color:var(--c-text-on-dark);}

.s2-variable-cards{display:flex;gap:24px;margin-top:20px;}
.s2-variable-cards li{flex:1 1 0;padding:24px;border:1px solid var(--c-line-weak);border-radius:var(--r-md);}
.s2-variable-cards .tit{display:flex;align-items:center;gap:8px;font-size:var(--fs-body);font-weight:700;color:var(--c-primary-dark);}
.s2-variable-cards p{margin-top:8px;font-size:var(--fs-body-s);line-height:1.6;color:var(--c-text-sub);}

.s2-step-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-top:16px;padding:24px;background:var(--c-primary-dark);border-radius:var(--r-lg);color:#fff;font-size:var(--fs-body);text-align:center;}
.s2-step-bar .arrow{opacity:.6;}

.s2-table thead th[rowspan],
.s2-table thead th[colspan]{background:var(--c-primary-dark);color:#fff;}

/* ── S2-5 : 업무 프로세스 (81:8417) ── */
/* [정정 2026-09-21 퍼피-1(S3-다)] get_design_context(81:8427) 리터럴 대조:
   카드 bg #f0f4f9(Primary/BlueBG) · STEP 배지 bg #006aff(Primary/Blue4 — --c-primary #0000ff 와 다른 값,
   G-14 피그마 값 우선) · 카드 사이 화살표는 CSS 삼각형이 아니라 실제 아이콘(24_Arrow/Arrow2_R, FIG-04) */
/* [재정정 2026-09-21 퍼피-5 반려 B1·B3 대응] 셀렉터를 .s2_5 범위로 좁히고(S3 공유 CSS 번짐 방지),
   .s2-step-cards li 가 .s2-step-arrow 를 명시도로 덮던 문제를 :not() 으로 분리 */
.s2_5 .s2-step-cards{display:flex;align-items:stretch;gap:2px;margin-top:20px;}
.s2_5 .s2-step-cards li:not(.s2-step-arrow){flex:1 1 0;position:relative;display:flex;flex-direction:column;align-items:center;padding:28px 10px;background:#f0f4f9;border-radius:var(--r-lg);text-align:center;}
.s2_5 .s2-step-cards i{display: flex; align-items:center; justify-content: center; text-align: center; width: 60px; height: 60px; margin-bottom: 12px;}
.s2_5 .s2-step-cards .step-ico{width: auto; height: auto;}

.s2_5 .s2-step-cards .step-no{display:inline-flex;align-items:center;justify-content:center;padding:0 10px;height:19px;border-radius:var(--r-pill);background:#006aff;color:#fff;font-size:12px;font-weight:700;order:-1;margin-bottom:12px;}
.s2_5 .s2-step-cards h4{margin-top:2px;font-size:16px;font-weight:700;color:var(--c-text);}
.s2_5 .s2-step-cards p{color: #666; text-align: center; font-size: 14px; font-weight: 400; line-height: 160%; }
/* .s2-step-arrow 전용 규칙 — li:not() 규칙과 명시도가 같은 층(클래스 1개)이라 뒤에 적어 확실히 이기게 함 */
.s2_5 .s2-step-cards li.s2-step-arrow{flex:0 0 32px;width:32px;padding:0;background:none;border-radius:0;display:flex;align-items:center;justify-content:center;}
.s2_5 .s2-step-arrow img{width:32px;height:32px;}

.s2_5 .s2-cal-table{margin-top:20px;width:100%;border-collapse:collapse;font-size:16px;text-align:center;}   /* [M-3 병합 반영] 시안 16px */
.s2_5 .s2-cal-table th,
.s2_5 .s2-cal-table td{padding:12px 8px;height:54px;border:1px solid #d7d7d7;}   /* [M-3 병합 반영] 시안 칸 높이 54px */
.s2_5 .s2-cal-table thead th{background:#f2f2f2;font-weight:700;color:var(--c-text);}
.s2_5 .s2-cal-table tbody th{text-align:center;font-weight:400;color:var(--c-text);}
/* 점 색상 — Figma 리터럴 #00237c(유지보수 점검) / #d60000(성능점검, G-14 — --c-danger #d92d20 과 다른 값) */
.s2_5 .s2-cal-table .dot{display:inline-block;width:13px;height:13px;border-radius:50%;background:#00237c;}
.s2_5 .s2-cal-table .dot.is-danger{background:#d60000;}
/* 표 하단 주석 — 시안은 상자 없는 한 줄(리터럴에 ※ 포함) · 기존 .s2-notice 박스 대신 단순 p */
.s2_5 .s2-cal-note{margin-top:12px;font-size:14px;line-height:1.6;color:#999;}

.s2_5 .s2-deliver-cards{display:flex;gap:30px;margin-top:20px;}
.s2_5 .s2-deliver-cards li{flex:1 1 0;padding:30px 20px;background:#fafdff;border:1px solid #d7e6f9;border-radius:var(--r-lg);text-align:center;}
.s2_5 .s2-deliver-cards img{width:80px;height:80px;margin:0 auto;object-fit:contain;}
.s2_5 .s2-deliver-cards h4{margin-top:12px;font-size:24px;font-weight:700;color:var(--c-primary-dark);}
.s2_5 .s2-deliver-cards p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--c-text-sub);}

/* ── S2-6 : 원테크솔루션이 필요한 이유 (81:8954) ── */
.s2_6 .s2-why-lead{font-size:var(--fs-body);color:var(--c-text-sub);}
.s2_6 .s2-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:60px 30px;margin-top:24px;}   /* [M-4 병합 반영] 시안 행 60px·열 30px */
/* [재정정 2026-09-21 퍼피-5 반려 C1] 시안 리터럴 — 카드 전체 1px 테두리(#eee) + 하단 패딩, 사진은 모서리 각짐(border-radius 0),
   텍스트 좌우 30px 안쪽 여백(get_design_context 81:9410 각 카드 컨테이너 px-[30px] pb-[20px] 값) */
.s2_6 .s2-why-grid li{border:1px solid #eee;padding-bottom:20px;}
.s2_6 .s2-why-grid li .pic{aspect-ratio:auto;height:250px;overflow:hidden;border-radius:0;background:var(--c-bg-weak);}
.s2_6 .s2-why-grid li .pic img{width:100%;height:100%;object-fit:cover;}
.s2_6 .s2-why-grid li h3{margin-top:20px;padding:0 30px;font-size:18px;font-weight:700;color:#00237c;}
.s2_6 .s2-why-grid li p{margin-top:4px;padding:0 30px;font-size:16px;line-height:1.6;color:#444;}
.s2_6 .s2-why-grid li.is-full{grid-column:1 / -1;max-width:calc(50% - 12px);}
/* 출처: sub_s3.css : E */

/* ── 출처: _qa/퍼피1_s3a/sub_s3a.css (퍼피-1a · s2_1·s2_2 전용) : S ── */
/* ============================================================
   sub_s3a.css — 원테크솔루션(주) 서브 S3-가(퍼피-1a) 전용 신규 CSS
   대상: main/s2_1.html(13:3494) · main/s2_2.html(57:6346) — 이 두 페이지 전용
   기존 sub_s3.css(퍼피1_s3, 다른 담당 작성분)는 읽기만 하고 여기에 쓰지 않는다.
   이 파일은 sub_s3.css 뒤에 "추가로" 로드해 그 규칙을 덮는 값만 담는다.
   합치기 안내: 지휘자가 sub_s3.css 로 합칠 때 이 파일 규칙도 함께 흡수한다.
   ============================================================ */

/* ── arti01 카드 3개 — 사진 배경(Group47288 22:1143) · 반려 A6 반영
   346×236 · rounded 12 · overlay rgba(16,16,46,.7) over photo(opacity .8 object-cover)
   제목 24px Bold #fff · 구분선(imgLine25, white 30%) · 번호 22px Bold #72d2ff · 설명 16px SemiBold #f8f8f8 ── */
.s2_1 .s2-info-cards li{position:relative;flex:1 1 0;height:236px;padding:0;border-radius:var(--r-lg);overflow:hidden;background-size:cover;background-position:center;isolation:isolate;background-color:transparent;}
.s2_1 .s2-info-cards li:before{content:'';position:absolute;inset:0;background:rgba(16,16,46,.7);z-index:0;}
.s2_1 .s2-info-cards li:nth-child(1){background-image:url('../img/sub/s2/img_s201_card01.jpg');}
.s2_1 .s2-info-cards li:nth-child(2){background-image:url('../img/sub/s2/img_s201_card02.jpg');}
.s2_1 .s2-info-cards li:nth-child(3){background-image:url('../img/sub/s2/img_s201_card03.jpg');}
.s2_1 .s2-info-cards{align-items:stretch;}
.s2-info-cards__row{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin:40px 20px 0;}
.s2-info-cards__row .tit{display:flex;align-items:center;flex:1 1 auto;font-size:24px;font-weight:700;color:#fff;}
.s2-info-cards__row .tit:after{content:'';flex:1 1 auto;height:1px;margin-left:14px;background:rgba(255,255,255,.3);}   /* [HTM-07 병합 반영] 빈 <span class="line"> 제거 — 가상요소로 대체 */
.s2-info-cards__row .num{flex:0 0 auto;font-size:22px;font-weight:700;color:var(--c-primary-light);}
.s2_1 .s2-info-cards li p{position:relative;z-index:1;margin:40px 20px 0;color: var(--Gray-300, #F8F8F8);

/* SubTitle8 */
font-family: Pretendard;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 160%; /* 25.6px */}

/* ── s2-cta 공통 — 설명 한 줄 추가(기존 sub_s3.css .s2-cta 는 p 하나만 대응) (13:3494 · 57:6346) ── */
.s2-cta__desc{margin-top:8px;font-size:var(--fs-caption);font-weight:400;color:var(--c-text-on-dark);}
.s2-cta{flex-wrap:wrap;}
.s2-cta .s2-cta__txt{flex:1 1 auto;}

/* ── arti06 위반행위 표 "과태료 부과 대상" — 시안 red, sub_s3.css 주석 근거 리터럴 #d60000(:127) ── */
.arti06 .s2-table td.is-strong{color:#d60000;}

/* ── arti03 소제목(리스트형 안내 — 시안 글자 크기가 arti02 섹션 제목보다 한 단 작음) ── */
.s2-sec-tit--bullet{position:relative;padding-left:16px;}
.s2-sec-tit--bullet:before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--c-primary);}

/* ── arti03 "연면적을 모르시나요?" 안내 박스 + 외부링크 버튼 2개 (13:3494) ── */
.s2-check-box{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding:24px 32px;background:var(--c-bg-weak);border-radius:var(--r-lg);}
.s2-check-box__txt p{font-size:var(--fs-body-s);line-height:1.6;color:var(--c-text-sub);}
.s2-check-box__txt p strong{color:var(--c-text);font-weight:700;}
.s2-check-box__btns{display:flex;flex:0 0 auto;gap:12px;}
.s2-check-box__btn{display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 20px;border:1px solid var(--c-line-strong);border-radius:var(--r-pill);background:#fff;font-size:var(--fs-body-s);font-weight:600;color:var(--c-text);white-space:nowrap;transition:border-color var(--t-base) linear,color var(--t-base) linear;}
.s2-check-box__btn:hover,
.s2-check-box__btn:focus-visible{border-color:var(--c-primary);color:var(--c-primary);}

/* ── 페이지 맨 아래 CTA — 배경 사진 위 안내문 + "자가진단 하기" 버튼 (13:3494, 노드 26:3815 "Banner")
   배경: bg_s201_cta.png(get_design_context 26:3815 imgProperty1, 원본 c7c38e5d-9739-47f0-beec-f5e223966a76.png 리사이즈)
   배치값은 시안 리터럴 그대로 — height 267.69% / left 49.36% / top -78.1% / width 57.74% / opacity 20% ── */
.s2-cta--photo{position:relative;align-items:center;background:#f4f6f8;overflow:hidden;border-radius:var(--r-lg);border:1px solid #ccc;padding:50px;}
.s2-cta--photo:before{content:'';position:absolute;left:49.36%;top:-78.1%;width:57.74%;height:267.69%;background:url('../img/sub/s2/bg_s201_cta.png') no-repeat center/cover;opacity:.2;pointer-events:none;}
.s2-cta--photo .s2-cta__txt,
.s2-cta--photo .s2-cta__btn{position:relative;z-index:1;}
.s2-cta--photo .s2-cta__txt p{font-size:24px;font-weight:700;line-height:1.6;color:#0000ff;}

.s2-cta--photo .s2-cta__txt .s2-cta__desc{margin-top:6px;font-size:16px;font-weight:400;line-height:1.6;color:#666;}
.s2-cta--photo .s2-cta__btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:163px;height:40px;padding:0;background:#00237c;border-radius:100px;font-size:14px;font-weight:700;color:#fff;flex:0 0 auto;}

/* ── 반려 A4·A5·A8·A10·A11·B5·B6 반영(피그마 리터럴, G-14) — 60분 예산 내 CSS 전용 수정 ── */

/* A4: 섹션 제목 30px(토큰 --fs-head-sm) → 시안 24px(Sub_C_TitleS 14:5179) */
.s2_1 .s2-sec-tit,
.s2_2 .s2-sec-tit{font-size:24px;font-weight:700;}

/* A5: arti03 소제목 20px Bold + 원형 점(list-disc, 23:1220) — 사각 마커 제거 */
.s2_1 .s2-sec-tit--bullet{font-size:20px;padding-left:18px;}
.s2_1 .s2-sec-tit--bullet:before{width:6px;height:6px;border-radius:50%;top:.6em;}

/* A8: 각주(.s2-notice) — 박스 제거, 회색 글자만(25:1707 <p> 텍스트, 박스 없음) */
.s2_1 .arti02 .s2-notice,
.s2_1 .arti04 .s2-notice,
.s2_1 .arti06 .s2-notice{background:none;padding:0;margin-top:12px;border-radius:0;}
.s2_1 .arti02 .s2-notice li,
.s2_1 .arti04 .s2-notice li,
.s2_1 .arti06 .s2-notice li{padding-left:0;color:#666;}
.s2_1 .arti02 .s2-notice li:before,
.s2_1 .arti04 .s2-notice li:before,
.s2_1 .arti06 .s2-notice li:before{content:none;}
.s2_1 .arti02 .s2-notice .s2-notice__tit{color:#666;font-weight:400;}
.s2_1 .arti02 .s2-notice .s2-notice__tit:before{content:none;}

/* A11: [계도기간] 박스 — 시안은 파란 글자·기호 없음(계도기간 자체는 강조 정보라 박스 형태만 유지, 색만 리터럴) */
.s2_1 .arti02 .s2-notice{background:var(--c-bg-weak);padding:20px 24px;border-radius:var(--r-md);margin-top:16px;}
.s2_1 .arti02 .s2-notice .s2-notice__tit{color: var(--Primary-Blue2, #00237C);
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 160%; /* 22.4px */}
.s2_1 .arti02 .s2-notice li{color:#0000ff;padding-left:0; color: var(--Primary-Blue2, #00237C);

/* Body5 */
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 22.4px */}
.s2_1 .arti02 .s2-notice li:before{content:none;}
.s2_1 .arti02 .s2-notice__tit{color:#0000ff;font-weight:700;}
.s2_1 .arti02 .s2-notice__tit:before{content:none;}

/* A10: 표 열 등분 · 강조행은 아래 Figma 리터럴(.is-alert #fff4f0)이 담당 */
.s2_1 .arti02 .s2-table th,
.s2_1 .arti02 .s2-table td{/* width:25%; */font-weight:400;}



.s2_1 .arti06 .s2-table th,
.s2_1 .arti06 .s2-table td{width:50%;text-align:center;}

/* A7: 관리주체의 의무사항 카드 — 배지 제거(01 텍스트만) · 아이콘(120_Icon, 25:1861) · 설명 16px */
.s2_1 .s2-manager-cards li{position:relative;padding-right:110px;}
.s2_1 .s2-manager-cards .badge{background:none;color:#00237c;font-size:16px;font-weight:700;padding:0;border-radius:0;}
.s2_1 .s2-manager-cards .txt p{font-size:16px;color:#666;}
.s2_1 .s2-manager-cards li:after{content:'';position:absolute;right:20px;bottom:0%;;width:120px;height:104px;background:url('../img/sub/s2/ico_s201_duty.png') no-repeat center/contain;opacity:.6; z-index: -1;}

.s2_1 .s2-manager-cards li:nth-child(1):after{background:url('../img/sub/s2/s21-icon1.png') center no-repeat;}
.s2_1 .s2-manager-cards li:nth-child(2):after{background:url('../img/sub/s2/s21-icon2.png') center no-repeat;}
.s2_1 .s2-manager-cards li:nth-child(3):after{background:url('../img/sub/s2/s21-icon3.png') center no-repeat;}
.s2_1 .s2-manager-cards li:nth-child(4):after{background:url('../img/sub/s2/s21-icon4.png') center no-repeat;}
.s2_1 .s2-manager-cards li:nth-child(5):after{background:url('../img/sub/s2/s21-icon5.png') center no-repeat;}
.s2_1 .s2-manager-cards li:nth-child(6):after{background:url('../img/sub/s2/s21-icon6.png') center no-repeat;}

/* B5: 34종_Card — 540×98 · gap 20 · bg #f0f4f9 · 테두리 없음 · 번호 원 38 #006aff */
.s2_2 .s2-list-grid{gap:20px;}
.s2_2 .s2-list-grid li{min-height:98px;padding:24px 30px;background:#f0f4f9;border:0;border-radius:12px;}
.s2_2 .s2-list-grid .num{width:38px;height:38px;flex:0 0 38px;background:#006aff;font-size:16px;}
.s2_2 .s2-list-grid .txt h4{font-size:16px;color:#222;}
.s2_2 .s2-list-grid .txt p{font-size:14px;color:#666;margin-top:2px;}

/* B6: 점검표 — 열 260/260/나머지, 가운데 정렬, 제목 24px(위 공통 처리) */
.s2_2 .arti03 .s2-table th,
.s2_2 .arti03 .s2-table td{text-align:center;}
.s2_2 .arti03 .s2-table th:nth-child(1),
.s2_2 .arti03 .s2-table td:nth-child(1){width:260px;}
.s2_2 .arti03 .s2-table th:nth-child(2),
.s2_2 .arti03 .s2-table td:nth-child(2){width:260px;}
.s2_2 .arti03 .s2-notice{background:none;padding:0;margin-top:12px;}
.s2_2 .arti03 .s2-notice li{padding-left:0;color:#666;}
.s2_2 .arti03 .s2-notice li:before{content:none;}

/* B3: 관리주체 안내박스 — 점·※ 제거, 아이콘 60×60(I76:4515;25:1382), 제목 16px #00237c, 본문 14px #666, 패딩 40/24 */
.s2_2 .arti01 .s2-notice{display:flex;align-items:center;gap:40px;padding:24px 40px;background:#f8f8f8;}
.s2_2 .arti01 .s2-notice:before{content:'';flex:0 0 60px;width:60px;height:60px;background:url('../img/sub/s2/ico_s202_manager.svg') no-repeat center/contain;}
.s2_2 .arti01 .s2-notice__tit{font-size:16px;color:#00237c;}
.s2_2 .arti01 .s2-notice__tit:before{content:none;}
.s2_2 .arti01 .s2-notice ul{gap:2px;}
.s2_2 .arti01 .s2-notice li{padding-left:0;font-size:14px;color:#666;}
.s2_2 .arti01 .s2-notice li:before{content:none;}

/* B2: s2_2 CTA — 밝은 배경(#f4f6f8)+지도 핀 그림(opacity .2)+테두리, 제목 24px 파랑, 설명 16px #666, 버튼 #00237c 163×40 */
.s2_2 .s2-cta{position:relative;align-items:center;background:#f4f6f8;overflow:hidden;border:1px solid #ddd;border-radius:var(--r-lg);padding:50px;}
.s2_2 .s2-cta:before{content:'';position:absolute;left:0;top:-130.87%;width:100%;height:361.74%;background:url('../img/sub/s2/bg_s202_cta_map.jpg') no-repeat center/cover;opacity:.2;pointer-events:none;}
.s2_2 .s2-cta p,
.s2_2 .s2-cta .s2-cta__btn{position:relative;z-index:1;}
.s2_2 .s2-cta p:first-child{font-size:24px;font-weight:700;color:#0000ff;}
.s2_2 .s2-cta .s2-cta__desc{margin-top:6px;font-size:16px;font-weight:400;color:#666;}
.s2_2 .s2-cta .s2-cta__btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:163px;height:40px;padding:0;background:#00237c;border-radius:100px;font-size:14px;font-weight:700;color:#fff;flex:0 0 auto;}
/* 출처: sub_s3a.css : E */

/* ── 출처: _qa/퍼피1_s3b1/sub_s3b1.css (S3-나1 · s2_3 전용) : S ── */
/* ============================================================
   S3-나1 (s2_3.html 「대상 건축물」) 전용 임시 스타일
   합칠 때 sub.css 에 흡수하고 이 파일 로드 줄을 삭제한다.
   전 클래스 .s2b1- 접두 — sub_s3.css(다른 담당 파일)와 이름이 겹치지 않게
   완전히 분리했다(2026-09-21 눈대조 1회차 A6③ 반려 반영 — 두 임시 CSS 의 같은
   클래스(.s2-notice/.s2-table)가 겹쳐 "• ※" 이중 표지·색 번짐이 났었다).
   피그마 76:4591 리터럴 그대로 — 값 반올림 금지(G-14).
   ============================================================ */

.s2b1-sec-tit{font-family:Pretendard,sans-serif;font-weight:700;font-size:24px;line-height:1.6;color:#222;margin-bottom:10px}
.s2b1-tit-sub{font-weight:700;font-size:24px}
.s2b1-lead{font-size:16px;color:#666;line-height:1.6;margin-bottom:20px}

/* ---- 표(공통, 이 페이지 전용) — 피그마 리터럴: 전 셀 가운데 정렬·진한 글자 ---- */
.s2b1-table{width:100%;border-collapse:collapse;border-top:2px solid #000}
.s2b1-table th,.s2b1-table td{border:1px solid #d7d7d7;padding:12px 54px;font-size:16px;line-height:1.6;text-align:center;height:54px;color:#222;font-weight:400}
.s2b1-table thead th{background:#f2f2f2;font-weight:700;color:#222}

/* ---- 노티 박스(이 페이지 전용) ---- */
.s2b1-notice{background:#f8f8f8;border-radius:12px;padding:24px 30px;margin-top:20px; border-radius: 0 12px 12px 0;}
.s2b1-notice__tit{font-weight:700;color:#00237c;font-size:14px;margin-bottom:2px}
.s2b1-notice ul{font-size:14px;color:#666;line-height:1.6}
.s2b1-notice ul li{list-style:none;margin-left:0}
.s2b1-notice a{color:#00237c;}

/* ---- 01. STEP 확인 카드 3장(76:5258) — bg 이미지 + 남색 오버레이 ---- */
.s2b1-step-cards{display:flex;gap:30px;align-items:stretch;width:100%}
.s2b1-step-card{position:relative;flex:1 1 0;min-width:0;border-radius:12px;padding:36px 30px;color:#fff}   /* [M-5 병합 반영] overflow:hidden 제거 — ≤1024 콘텐츠 7px 잘림(R2-6) */
.s2b1-step-card::before{content:"";position:absolute;inset:0;border-radius:12px;background:rgba(16,16,46,.86);z-index:0}
.s2b1-step-card__bg{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;object-fit:cover;z-index:-1}   /* [M-5] 카드 대신 배경 레이어에 라운드·클립 적용 */
.s2b1-step-card:nth-child(2) .s2b1-step-card__bg,
.s2b1-step-card:nth-child(3) .s2b1-step-card__bg{object-position:bottom}
.s2b1-step-card:nth-child(3) .s2b1-step-card__bg{opacity:.8}
.s2b1-step-card__in{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;width:100%;max-width:286px}
.s2b1-step-card__step{display:inline-flex;align-items:center;justify-content:center;padding:0 10px;height:26px;border-radius:100px;background:#006aff;font-size:12px;font-weight:700;align-self:flex-start}
.s2b1-step-card__q{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:12px}
.s2b1-step-card__q strong{display:block;font-size:20px;font-weight:700;line-height:1.6}
.s2b1-step-card__q span{display:block;font-size:14px;font-weight:600;color:#f8f8f8;line-height:1.6}
.s2b1-step-card__as{display:flex;flex-direction:column;width:100%}
.s2b1-step-card__a{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:14px;font-weight:600;color:#f8f8f8;line-height:1.6}
.s2b1-step-card__a b{color:#72d2ff;font-size:18px;font-weight:700}
/* 데스크톱 기준 242px 는 min-height 로만(고정 height 금지) — 반응형에서 내용이 늘면 카드도 늘어야 한다.
   [A4 반려 반영] 이전엔 height:242px 고정 + <=1024 에서 height:auto;min-height:160px 였는데
   160px 가 실제 콘텐츠 높이(226~249px)보다 작아 아래 문구가 잘렸다(clientHeight160/scrollHeight226~249). */
.s2b1-step-card{min-height:242px}

.s2b1-notice--flex{display:flex;align-items:center;gap:30px;justify-content:space-between;flex-wrap:wrap}
.s2b1-notice--flex .s2b1-notice__txt{font-size:14px;color:#666;line-height:1.6}
.s2b1-notice--flex .s2b1-notice__txt b{display:block;color:#00237c;font-weight:700}
.s2b1-notice--flex .s2b1-notice__txt b::before{content:"·  "}
.s2b1-notice--flex .s2b1-notice__btns{display:flex;gap:12px;flex-shrink:0}
.s2b1-link-btn{display:inline-flex;align-items:center;gap:12px;height:40px;padding:0 28px;border:1px solid #00237c;border-radius:100px;background:#fff;color:#00237c;font-size:14px;font-weight:700;white-space:nowrap}
.s2b1-link-btn img{width:auto;height:auto;}
.s2b1-link-btn i{width: 24px; height: 24px; display: flex; align-items:center; justify-content: center; text-align: center; }

/* ---- 04(78:5536). 용도별 건축물 카드 그리드 4열×8행=32칸(마지막행 2칸 hidden→30장) ----
   [A5 반려 반영] 피그마는 뱃지 옆 왼쪽 정렬인데 justify-content:center + text-align:center 로
   가운데 정렬해놨었다 — flex-start·text-align:left 로 고친다. */
.s2b1-usage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;width:100%}
.s2b1-usage-card{min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:12px;border-radius:12px;padding:24px 30px;background:#f8f8f8}
.s2b1-usage-card.is-target{background:#fff;border:1px solid #ccc}
.s2b1-usage-card__badge{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:100px;background:#d0d7e0;color:#fff;font-size:12px;font-weight:700;flex-shrink:0}
.s2b1-usage-card.is-target .s2b1-usage-card__badge{background:#6495d2}
.s2b1-usage-card__txt{flex:1;min-width:0;text-align:left;color:#999}
.s2b1-usage-card.is-target .s2b1-usage-card__txt{color:inherit}
.s2b1-usage-card__txt strong{display:block;font-size:16px;font-weight:700}
.s2b1-usage-card.is-target .s2b1-usage-card__txt strong{color:#222}
.s2b1-usage-card__txt span{display:block;font-size:14px;color:#666}
.s2b1-usage-card:not(.is-target) .s2b1-usage-card__txt strong,
.s2b1-usage-card:not(.is-target) .s2b1-usage-card__txt span{color:#999;text-decoration:line-through}

/* ---- 04(76:4672). 대표적인 대상 건축물 — S시공분야_Card 3열×2행=6장 ---- */
.s2b1-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px 30px;width:100%}
.s2b1-photo-card{min-width:0;border:1px solid #ccc;border-radius:0;display:flex;flex-direction:column;align-items:center;gap:20px;padding-bottom:20px}
.s2b1-photo-card .pic{width:100%;min-width:0;height:200px;aspect-ratio:auto;overflow:hidden}
.s2b1-photo-card .pic img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover}
.s2b1-photo-card__txt{width:304px;max-width:calc(100% - 42px);display:flex;flex-direction:column;gap:4px}
.s2b1-photo-card__txt strong{font-size:18px;font-weight:700;color:#00237c;line-height:1.6}
.s2b1-photo-card__txt p{font-size:16px;color:#444;line-height:1.6}


/* ---- 02(76:5259). 연면적 구간별 준비 일정 — 4열 6행 표(강조행 배경) ---- */
.s2b1-sched-table{margin-top:16px}
.s2b1-sched-table td.is-muted{color:#999}
/* 출처: sub_s3b1.css : E */

/* ── 출처: _qa/퍼피1_s3b2/sub_s3b2.css (S3-나2 · s2_4 전용) : S ── */
/* ============================================================
   sub_s3b2.css — 원테크솔루션(주) s2_4.html(점검 비용·견적 검증) 전용 임시 CSS
   퍼피-1(S3-나2) 작업본 · 2026-09-21 · 전면 재구성
   근거: Figma node 81:6056(Con 81:6066) get_design_context 전수 호출(81:6067·81:6073·81:6125·81:6167·81:8126·81:8416)
   프로젝트 구분: 고객사 → FIG-06·FIG-07 엄격 적용(값·문구는 피그마 리터럴 그대로)

   [임시 배치 안내 — 지휘자 합치기]
   S2(다른 세션)가 main/css/sub.css·responsive.css 를 동시 작업 중이라 이 파일은 여기(_qa/퍼피1_s3b2/)에
   둔다. s2_4.html 은 sub_s3.css(S3-나1 공용) 뒤에 이 파일을 "임시로" 추가 로드한다.
   합칠 때: 이 파일 전체를 main/css/sub.css 끝에 붙이고 s2_4.html 의 임시 <link> 줄을 삭제한다.
   클래스는 전부 .s2- 접두 + 신규 컴포넌트명(구 .s2-price-cards 등과 겹치지 않게 구조가 달라 새 이름 사용).
   반응형은 @media 블록을 그대로 responsive.css 로 옮겨 합친다(CSS-02).
   ============================================================ */

/* ── 01 예시 견적 : 이미지 배경 카드 3장 ── */
.s2-image-cards{display:flex;gap:30px;margin-top:20px;}
.s2-image-cards li{position:relative;flex:1 1 0;min-width:0;padding:36px 30px;border-radius:12px;overflow:hidden;color:#fff;background-size:cover;background-position:center;}
.s2-image-cards li:before{content:'';position:absolute;inset:0;background:rgba(16,16,46,.7);}
.s2-image-cards__item--gongjang{background-image:url('../img/sub/s2/img_s204_card01_gongjang.webp');}
.s2-image-cards__item--office{background-image:url('../img/sub/s2/img_s204_card02_office.webp');}
.s2-image-cards__item--jusang{background-image:url('../img/sub/s2/img_s204_card03_jusang.webp');}
.s2-image-cards .s2-image-cards__body{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;}
/* [N-3 수정] 태그 세로 패딩 0(높이 22) · 구분선을 price-block 하단(=가격+최소 연 묶음 아래)으로 이동 */
.s2-image-cards .tag{display:inline-flex;align-self:flex-start;align-items:center;padding:0 10px;height:22px;border-radius:100px;background:#006aff;font-size:14px;font-weight:700;color:#fff;line-height:22px;}
.s2-image-cards .price-block{padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.3);}
.s2-image-cards .price-row{display:flex;align-items:baseline;gap:4px;}
.s2-image-cards .price{font-size:32px;font-weight:700;line-height:1.6;}
.s2-image-cards .unit{font-size:24px;font-weight:600;line-height:1.6;}
.s2-image-cards .desc{font-size:16px;color:#eee;}
.s2-image-cards .meta{font-size:14px;color:#eee;}
.s2-note-line{margin-top:16px;font-size:14px;color:var(--c-text-weak);}
.s2-note-line--tight{margin-top:4px;color:var(--c-text-sub);font-size:18px;}

/* ── 04 이 금액에 포함되는 것 / 02-1단계 : 표 공통 — Figma Table 81:7481 · 81:8209
   전 셀 가운데 · padding 12/54 · 사방 1px #d7d7d7 · 머리 위 2px #000 · 합계행 #fff4f0 */
.s2-table2-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.s2-table2{margin-top:20px;width:100%;border-collapse:collapse;border-top:2px solid #000;font-size:16px;}
.s2-table2 th,
.s2-table2 td{padding:12px 54px;height:54px;border:1px solid #d7d7d7;text-align:center;color:#222;font-size:16px;line-height:1.6;font-weight:400;box-sizing:border-box;}
.s2-table2 thead th{background:#f2f2f2;font-weight:700;color:#222;}
.s2-table2 tbody tr:last-child td,
.s2-table2 tbody tr:last-child th{background:#fff4f0;color:#222;font-weight:600;}
/* [R-1 수정] colgroup col 인라인 style 제거 — 클래스로 대체 */
.s2-col-300{width:300px;}
.s2-col-200{width:200px;}
.s2-col-325{width:325px;}

/* [M-1 병합 반영] 섹션 타이틀 — 공통 sub.css `.s2-sec-tit` 를 24px/lh160% 로 직접 정했으므로
   이 페이지 범위 덮어쓰기는 지운다(중복). */

/* ── 03 금액을 가르는 두 가지 변수 : S_Card ── */
.s2-var-cards{display:flex;gap:20px;margin-top:20px;}
.s2-var-cards li{flex:1 1 0;min-width:0;padding:30px;background:#fafdff;border:1px solid #d7e6f9;border-radius:12px;}
.s2-var-cards .var-head{display:flex;align-items:baseline;gap:12px;font-weight:700;color:var(--c-primary-dark);}
.s2-var-cards .var-head .num{font-size:16px;}
.s2-var-cards .var-head .tit{font-size:18px;}
.s2-var-cards p{margin-top:2px;font-size:16px;line-height:1.6;color:var(--c-text-sub);}

/* ── 02 대가산정 기준 ── */
.s2-formula-card{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:20px;padding:28px 20px;background:#f0f4f9;border-radius:12px;text-align:center; border: 1px solid #ccc;}
.s2-formula-card__formula{font-size:22px;font-weight:700;color:var(--c-text);}
.s2-formula-card__formula .em{color:var(--c-primary-dark);}
.s2-formula-card__note{font-size:14px;color:var(--c-text-sub);}

.s2-calc-grid{display:flex;gap:40px;margin-top:50px;align-items:flex-start;}
.s2-calc-col{flex:1 1 0;min-width:0;}
/* [N-6 재발 수정] p+margin-left 로는 글머리 점이 안 그려졌다. ul>li + ::before 원형 마커로 교체,
   Figma ms-[30px](텍스트 들여쓰기 30px) 기준으로 좌표 맞춤 */
.s2-calc-col > .s2-calc-step{list-style:none;margin:0 0 16px;padding:0;}
.s2-calc-col > .s2-calc-step li{position:relative;padding-left:20px;font-size:20px;font-weight:700;color:var(--c-text);line-height:1.6;}
.s2-calc-col > .s2-calc-step li:before{content:'';position:absolute;left:4px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--c-text);}

.s2-coef-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:16px;}
.s2-coef-grid li{display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;height:108px;padding:16px 14px 20px;border:1px solid #d7d7d7;margin-left:-1px;margin-top:-1px;}
.s2-coef-grid .area{display:block;font-size:14px;line-height:1.4;color:#222;}
.s2-coef-grid .coef{display:block;margin-top:8px;font-size:14px;font-weight:700;color:#a81900;text-align:right;}

.s2-example-card{margin-top:16px;padding:24px 30px;background:#f8f8f8;border-radius:12px;}
.s2-example-card p{margin-top:2px;font-size:14px;color:var(--c-text-sub);}
/* [N-8 수정] 위 ".s2-example-card p"(0,1,1)가 아래 두 규칙(원래 0,1,0)을 이겨 값이 회색 14px 로 나왔다.
   parent+class 로 특이성을 (0,2,1)로 올려 확실히 이긴다. */
.s2-example-card .s2-example-card__tit{font-size:16px;font-weight:700;color:var(--c-text);margin-top:0;}
.s2-example-card .s2-example-card__result{font-size:16px;font-weight:700;color:var(--c-primary);}

/* ── 5 원테크솔루션㈜은 기준가를 공개합니다 : 아이콘 안내 박스 ── */
.s2-notice-icon{display:flex;gap:40px;align-items:center;margin-top:20px;padding:24px 40px;background:#f8f8f8;border-radius:12px;}
.s2-notice-icon img{flex:0 0 60px;width:60px;height:60px;}
.s2-notice-icon p{flex:1 1 0;font-size:14px;line-height:1.6;color:var(--c-primary-dark);}


.s2_4 .s2-coef-grid li{padding: 20px 12px 19px;}
/* ── Frame47426 : 배너 + 안내(건축물대장) ── */
/* [N-10 수정] 40% 사각 박스 배경이 x≈1600 에 세로 경계선을 만들었다. 좌측에서 오른쪽으로
   불투명해지는 그라디언트로 이미지를 마스킹해 대각선처럼 자연스러운 페이드를 만든다(사진 자체를
   새로 제작하지 않음 — 같은 자산, 합성 방식만 교정). */
.s2-banner{position:relative;margin-top:20px;padding:50px;background-color:#f4f6f8;border:1px solid #ccc;border-radius:12px;overflow:hidden;  background: url(../img/sub/s2/bg_s204_banner_pattern.jpg) center / cover no-repeat;}


.s2-banner__row{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:40px;}
.s2-banner__tit{font-size:24px;font-weight:700;color:var(--c-primary);}
.s2-banner__desc{margin-top:6px;font-size:16px;color:var(--c-text-sub);}
.s2-banner__tel{margin-top:12px;padding-top:12px;border-top:1px solid #eee;font-size:16px;font-weight:600;color:var(--c-text-sub); color: #666; padding-top: 6px; margin-top: 12px;}
/* [R-2 수정] 버튼 실측 폭 136 → 시안 163 */
.s2-banner__btn{flex:0 0 auto;width:163px;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:40px;padding:0 28px;background:var(--c-primary-dark);border-radius:100px;font-size:14px;font-weight:700;color:#fff;white-space:nowrap;transition:background .2s linear;box-sizing:border-box;}
.s2-banner__btn:hover,.s2-banner__btn:focus-visible{background:#001c63;}
.s2-banner__btn img{width:20px;height:10px;}

.s2-notice-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:20px;padding:24px 30px;background:#f8f8f8;border-radius:12px;}
/* [N-7 재발 수정] 글머리 점 누락 — ul>li + ::before 원형 마커로 교체(공용 .s2-notice__tit 패턴과 동일) */
.s2-notice-cta__tit{list-style:none;margin:0;padding:0;}
.s2-notice-cta__tit li{position:relative;padding-left:21px;font-size:14px;font-weight:700;color:var(--c-primary-dark);}
.s2-notice-cta__tit li:before{content:'';position:absolute;left:4px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--c-primary-dark);}
.s2-notice-cta__tit--second{margin-top:16px;}
.s2-notice-cta p{margin-top:4px;font-size:14px;color:var(--c-text-sub);}
.s2-notice-cta__btns{display:flex;gap:12px;flex:0 0 auto;}
.s2-notice-cta__btns a{display:inline-flex;align-items:center;gap:12px;height:40px;padding:0 28px;border:1px solid var(--c-primary-dark);border-radius:100px;background:#fff;font-size:14px;font-weight:700;color:var(--c-primary-dark);white-space:nowrap;transition:background .2s linear,color .2s linear;}
.s2-notice-cta__btns a:hover,.s2-notice-cta__btns a:focus-visible{background:var(--c-primary-dark);color:#fff;}
.s2-notice-cta__btns a:hover img,.s2-notice-cta__btns a:focus-visible img{filter:brightness(0) invert(1);}
.s2-notice-cta__btns img{width:24px;height:24px;}
/* 출처: sub_s3b2.css : E */

/* ═══════════════════════════════════════════════════════════
   s2_* Figma Con 리터럴 (2026-10-08)
   25:1613 · 57:6356 · 76:4601 · 81:6066 · 81:8427 · 81:8957/9378/9394
   Sub_C_TitleS 는 공통 .article-header h3 재사용 — 아래는 .s2_N 범위만.
═══════════════════════════════════════════════════════════ */
.s2_1 .article-header:has(+ .s2-sec-lead),
.s2_2 .article-header:has(+ .s2-sec-lead),
.s2_3 .article-header:has(+ .s2-sec-lead),
.s2_4 .article-header:has(+ .s2-sec-lead){margin-bottom:0;}
.s2_1 .s2-sec-lead,
.s2_2 .s2-sec-lead,
.s2_3 .s2-sec-lead,
.s2_4 .s2-sec-lead{margin:10px 0 20px;font-size:18px;font-weight:400;line-height:1.6;color:#666;}
.s2_1 .s2-note,
.s2_2 .s2-note{margin-top:16px;font-size:14px;line-height:1.6;color:#999;}
.s2_1 .s2-note strong{font-weight:600;color:#999;}

.s2_1 .s2-info-cards{display:flex;align-items:stretch;gap:30px;margin-top:0;}
.s2_1 .s2-info-cards li{display:flex;flex-direction:column;justify-content:center;gap:40px;height:236px;padding:0 30px;border-radius:12px;}
.s2_1 .s2-info-cards li:before{background:rgba(16,16,46,.86);}
.s2_1 .s2-info-cards__row{margin:0;gap:22px;}
.s2_1 .s2-info-cards li p{margin:0;}

.s2_1 .s2-table{margin-top:0;border-collapse:collapse;border-top:2px solid #000;font-size:16px; table-layout: fixed;}
.s2_1 .s2-table th,
.s2_1 .s2-table td{min-height:54px;height:54px;padding:12px 54px;border:1px solid #d7d7d7;text-align:center;color:#222;font-weight:400;font-size:16px;line-height:1.6;box-sizing:border-box;word-break:keep-all;}
.s2_1 .s2-table thead th{background:#f2f2f2;font-weight:700;color:#222;border-top:2px solid #000;}
.s2_1 .s2-table tbody tr.is-alert th,
.s2_1 .s2-table tbody tr.is-alert td{background:#fff4f0;font-weight:600;color:#070707;}
.s2_1 .s2-table tbody tr.is-alert td.is-alert-em{color:#a81900;}
.s2_1 .s2-table strong{font-weight:600;color:#070707;}
/* 4열(275px)은 컴포넌트 px-54가 인스턴스에서 압축됨 — 시안 nowrap 1줄 유지 */
.s2_1 .arti02 > .s2-table:not(.s2-table--measure) th,
.s2_1 .arti02 > .s2-table:not(.s2-table--measure) td{padding:12px 16px;/* white-space:nowrap; */}

.s2_1 .s2-tag,
.s2_3 .s2-tag{display:inline-flex;align-items:center;justify-content:center;margin-right:8px;padding:1px 6px;border-radius:4px;font-size:12px;font-weight:600;line-height:1.6;vertical-align:middle;}
.s2_1 .s2-tag--end,
.s2_3 .s2-tag--end{background:#e3e3e3;color:#666;}
.s2_1 .s2-tag--guide,
.s2_3 .s2-tag--guide{background:#f2e2c3;color:#6d4000;}
.s2_1 .s2-tag--hold,
.s2_3 .s2-tag--hold{background:#cee5d9;color:#1f7a5b;margin-right:0;}
.s2_1 .s2-tag--fine{background:#f9e2dc;color:#a81900;margin-right:0;}
.s2_3 .s2-tag--in{background:#a81900;color:#fff;}

.s2_1 .arti02 .s2-notice,
.s2_1 .arti02 .s2-notice--bar{margin-top:16px;padding:24px 30px;background:#f8f8f8;border-radius:0; border: 1px solid #ccc; border-left:3px solid #00237c; border-radius: 0 5px 5px 0;}
.s2_1 .arti02 .s2-notice--bar .s2-notice__tit{margin:0;color:#00237c;font-size:14px;font-weight:700;line-height:1.6;}
.s2_1 .arti02 .s2-notice--bar .s2-notice__tit:before{content:none;}
.s2_1 .arti02 .s2-notice--bar .s2-notice__body{margin-top:2px;color:#00237c;font-size:14px;font-weight:400;line-height:1.6;}

.s2_1 .s2-subsec{margin-top:50px;}
.s2_1 .s2-bullet-tit{position:relative;margin:0 0 20px;padding-left:29px;font-size:20px;font-weight:700;line-height:1.6;color:#222; }
.s2_1 .s2-bullet-tit:before{content:'';position:absolute;left:11px;top:.7em;width:6px;height:6px;border-radius:50%;background:#222;}
.s2_1 .s2-table--measure th:first-child,
.s2_1 .s2-table--measure td:first-child,
.s2_1 .s2-table--measure tbody th{width:275px;}
.s2_1 .s2-table--measure tbody th{font-weight:600;color:#070707;padding:12px 54px;}
.s2_1 .s2-table--measure td{text-align:left;padding:12px 30px;height:78px;white-space:nowrap;word-break:normal;}
.s2_1 .arti04 .s2-table th,
.s2_1 .arti04 .s2-table td{white-space:nowrap;padding:12px 30px;}
.s2_1 .s2-table--fine th,
.s2_1 .s2-table--fine td{white-space:nowrap;padding:12px 30px;}
.s2_1 .s2-table--measure ol{margin:0;padding-left:1.4em;font-size:16px;line-height:1.6;color:#222;}
.s2_1 .s2-table--measure ol em{font-style:normal;font-weight:600;color:#a81900;}

/* .s2_1 .s2-check-box,
.s2_3 .s2-check-box{margin-top:16px;padding:24px 30px;background:#f8f8f8;border:1px solid #eee;border-radius:12px;}
.s2_1 .s2-check-box__txt,
.s2_3 .s2-check-box__txt{display:flex;flex-direction:column;gap:10px;}
.s2_1 .s2-check-box__item,
.s2_3 .s2-check-box__item{position:relative;padding-left:21px;margin:0;font-size:14px;line-height:1.6;}
.s2_1 .s2-check-box__item:before,
.s2_3 .s2-check-box__item:before{content:'';position:absolute;left:6px;top:9px;width:5px;height:5px;border-radius:50%;background:#222;}
.s2_1 .s2-check-box__item strong,
.s2_3 .s2-check-box__item strong{display:block;font-weight:700;color:#222;}
.s2_1 .s2-check-box__item span,
.s2_3 .s2-check-box__item span{display:block;color:#666;font-weight:400;}
.s2_1 .s2-check-box__btn,
.s2_3 .s2-check-box__btn{height:40px;padding:0 28px;border:1px solid #00237c;border-radius:100px;color:#00237c;font-size:14px;font-weight:700;gap:12px;}
.s2_3 .s2-check-box__btn{padding: 0 31px;}
.s2_1 .s2-check-box__btn img,
.s2_3 .s2-check-box__btn img{width: auto; height: auto;}

.s2-check-box__btn i{display: flex; align-items:center; justify-content: center; text-align: center; width: 24px; height: 24px;} */

.s2_1 .s2-check-box,
.s2_3 .s2-check-box,
.s5_2 .s2-check-box{margin-top:16px;padding:24px 30px;background:#f8f8f8;border:1px solid #ccc;border-radius:12px;}

.s2_1 .s2-check-box__txt,
.s2_3 .s2-check-box__txt,
.s5_2 .s2-check-box__txt{display:flex;flex-direction:column;gap:10px;}

.s2_1 .s2-check-box__item,
.s2_3 .s2-check-box__item,
.s5_2 .s2-check-box__item{position:relative;padding-left:21px;margin:0;font-size:14px;line-height:1.6;}

.s2_1 .s2-check-box__item:before,
.s2_3 .s2-check-box__item:before,
.s5_2 .s2-check-box__item:before{content:'';position:absolute;left:6px;top:9px;width:5px;height:5px;border-radius:50%;background:#222;}

.s2_1 .s2-check-box__item strong,
.s2_3 .s2-check-box__item strong,
.s5_2 .s2-check-box__item strong{display:block;font-weight:700;color:#222;}

.s2_1 .s2-check-box__item span,
.s2_3 .s2-check-box__item span,
.s5_2 .s2-check-box__item span{display:block;color:#666;font-weight:400;}

.s2_1 .s2-check-box__btn,
.s2_3 .s2-check-box__btn,
.s5_2 .s2-check-box__btn{height:40px;padding:0 28px;border:1px solid #00237c;border-radius:100px;color:#00237c;font-size:14px;font-weight:700;gap:12px;}

.s2_3 .s2-check-box__btn{padding:0 31px;}

.s2_1 .s2-check-box__btn img,
.s2_3 .s2-check-box__btn img,
.s5_2 .s2-check-box__btn img{width:auto;height:auto;}

.s2-check-box__btn i{display:flex;align-items:center;justify-content:center;text-align:center;width:24px;height:24px;}



.s2_1 .s2-manager-cards{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px;}
.s2_1 .s2-manager-cards li{min-height:146px;padding:30px;border:1px solid #B8D1F0;border-radius:12px;background:#fafdff; position: relative; z-index: 1;}
.s2_1 .s2-manager-cards__head{display:flex;align-items:center;gap:12px;margin:0;}
.s2_1 .s2-manager-cards .badge{background:none;padding:0;font-size:16px;font-weight:700;color:#00237c;}
.s2_1 .s2-manager-cards__head strong{font-size:18px;font-weight:700;color:#00237c;}
.s2_1 .s2-manager-cards .txt p:not(.s2-manager-cards__head){margin-top:2px;font-size:16px;line-height:1.6;color:#666;}
.s2_1 .arti05 .s2-table--fine{margin-top:50px;}
.s2_1 .s2-table--fine th,
.s2_1 .s2-table--fine td{width:50%;text-align:center;}
.s2_1 .s2-cta{margin-top:80px;}

.s2_2 .arti01 + .arti02{margin-top:20px;}
.s2_2 .arti01 .s2-notice{align-items:center;gap:40px;padding:24px 40px;background:#f8f8f8;border-radius:12px; border: 1px solid #ccc;}
.s2_2 .arti01 .s2-notice__tit{font-size:16px;font-weight:700;color:#222;}
.s2_2 .arti01 .s2-notice ul{gap:0;}
.s2_2 .arti01 .s2-notice li{padding-left:0;font-size:14px;line-height:1.6;color:#666;}
.s2_2 .arti01 .s2-notice li strong{font-weight:600;color:#666;}
.s2_2 .s2-list-grid{gap:20px;margin-top:0;}
.s2_2 .s2-list-grid li{min-height:0;padding:24px 30px;background:#fff;border:1px solid #ccc;border-radius:12px;}
.s2_2 .s2-list-grid .num{width:38px;height:38px;flex:0 0 38px;background:#006aff;font-size:16px;}
.s2_2 .s2-list-grid .num.non{background: #D0D7E0;}
.s2_2 .arti03 .s2-table{margin-top:0;border-collapse:collapse;border-top:2px solid #000;font-size:16px;table-layout:fixed;}
.s2_2 .arti03 .s2-table th,
.s2_2 .arti03 .s2-table td{height:54px;padding:12px 16px;border:1px solid #d7d7d7;text-align:center;color:#222;font-size:16px;line-height:1.6;box-sizing:border-box;}
.s2_2 .arti03 .s2-table thead th{background:#f2f2f2;font-weight:700;color:#222;}
.s2_2 .arti03 .s2-table th:last-child,
.s2_2 .arti03 .s2-table td:last-child{padding:12px 24px;}
.s2_2 .arti03 .s2-table tbody td{height:78px;}
.s2_2 .arti03 .s2-table tbody td:first-child{font-weight:600;color:#070707;}
.s2_2 .arti03 .s2-table th:nth-child(1),
.s2_2 .arti03 .s2-table td:nth-child(1),
.s2_2 .arti03 .s2-table th:nth-child(2),
.s2_2 .arti03 .s2-table td:nth-child(2){width:260px;white-space:nowrap;}
.s2_2 .s2-cta{margin-top:50px;}

.s2_3 .s2-sec-lead{margin:10px 0 16px;}
.s2_3 .s2-check-box{margin-top:20px; padding-right: 50px;}
.s2_3 .s2b1-usage-grid{margin-top:0;} 
.s2_3 .s2b1-lead{display:none;}
.s2_3 .s2b1-photo-grid{margin-top:0;}
.s2_3 .s2b1-sched-table{margin-top:0;}
.s2_3 .s2b1-table{margin-top:0;table-layout:fixed;}
.s2_3 .arti03 .s2b1-table{border-top:0;}
.s2_3 .arti03 .s2b1-table th:first-child{width:220px;padding:12px 16px;white-space:nowrap;}
.s2_3 .arti03 .s2b1-table tr.col-r > *{background: #FFF4F0; font-weight: 600; color: #222;}
.s2_3 .arti03 .s2b1-table tbody th{font-weight:400;}
.s2_3 .arti03 .s2b1-table tbody th span{border-radius: 4px;
background: #E3E3E3; display: inline-flex;
padding: 1px 6px;
justify-content: center;
align-items: center;
text-align: center; 
gap: 10px; color: var(--Gray-700, #666);
font-family: Pretendard;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 160%; /* 19.2px */ margin-right: 8px; position: relative; top: -2px;}
 
.s2_3 .arti03 .s2b1-table tbody th span.red-s{background: #A81900; color: #fff; }

.s2_3 .s2b1-step-card{padding: 32px 30px;}
.s2_3 .s2b1-notice--flex .s2b1-notice__txt b{color: #222; font-size: 14px; font-weight: 700; line-height: 160%; }
.s2_3 .s2b1-notice{padding: 24px 40px; position: relative;     padding: 23px 34px; border: 1px solid #ccc; border-left: 0;}
.s2_3 .s2b1-notice:before{position: absolute; content: ''; width: 3px; height: 100%; background: #00237C; left: 0; top: 0;}
.s2_3 .s2b1-step-card__a.mt-{margin-top: -15px;}
.s2_3 .s2b1-notice--flex .s2b1-notice__txt b::before{margin-right: 5px; font-size: 20px;}
.s2_3 .s2b1-notice--flex .s2b1-notice__txt span{display: inline-block; padding-left: 12px; 	}
.s2_3 .s2b1-table tr.is-alert th,
.s2_3 .s2b1-table tr.is-alert td{background:#fff4f0;font-weight:600;color:#222;}
.s2_3 .s2b1-sched-table .s2-tag--end,
.s2_3 .s2b1-sched-table .s2-tag--hold{margin-right:0;}
.s2_3 .s2b1-sched-table td.is-muted{color:#999;}
.s2_3 .s2b1-sched-table th,
.s2_3 .s2b1-sched-table td{padding:12px 16px;white-space:nowrap;}
.s2_3 .arti05 .s2-notice--bar{margin-top:16px;padding:24px 30px;background:#f8f8f8;border-radius:0;border-left:3px solid #00237c;}
.s2_3 .arti05 .s2-notice--bar .s2-notice__tit{margin:0;color:#00237c;font-size:14px;font-weight:700;line-height:1.6;}
.s2_3 .arti05 .s2-notice--bar .s2-notice__tit:before{content:none;}
.s2_3 .arti05 .s2-notice--bar .s2-notice__body{margin-top:2px;color:#00237c;font-size:14px;font-weight:400;line-height:1.6;}
.s2_3 .arti05 .s2-notice--bar .s2-notice__body p{margin:0;color:#00237c;}
.s2_3 .arti05 .s2-notice--bar .s2-notice__body strong{font-weight:600;}
.s2_3 .arti05 .s2-notice--bar a{color:#a81900;text-decoration:underline;text-underline-offset:2px;}

.s2_3 .s2b1-usage-card{    padding: 25px 21px;}
.s2_3 .s2b1-usage-card__txt span{text-decoration:auto !important}
.s2_3  .s2b1-photo-card__txt p{-ms-word-break: break-all; word-break: break-all;}

.s2_3 .s2b1-sched-table .is-highlight > *{background: #FFF4F0; color: #222; font-weight: 600;}

.s2_3 .s2b1-sched-table td span{border: 1px solid #D7D7D7; display: inline-flex;
display: inline-flex;
padding: 1px 6px;
justify-content: center;
align-items: center;
gap: 10px; border-radius: 4px;
background: #E3E3E3; color: var(--Gray-700, #666);

font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 160%; /* 19.2px */ border: none;}

.s2_3 .s2b1-sched-table td span.span-y{background: #F2E2C3; color: #6D4000;}
.s2_3 .s2b1-sched-table td span.span-g{background: #CEE5D9; color: #1F7A5B;}
.s2_3 .s2b1-notice ul{color: #00237C; font-weight: 400;}
.s2_3 .s2b1-notice ul b{font-weight: 600;}
.s2_3 .s2b1-notice ul a{color: #A81900; font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 160%;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font}

.s2_4 .arti03[hidden]{display:none;}
.s2_4 .s2-image-cards{margin-top:20px;}
.s2_4 .s2-table2{margin-top:0px;}
.s2_4 .s2-table--cost th,
.s2_4 .s2-table--cost td{padding:12px 16px;white-space:nowrap;}
.s2_4 .s2-table--cost td:last-child,
.s2_4 .s2-table--cost th:last-child{padding:12px 24px;}
.s2_4 .s2-calc-col .s2-table2 th,
.s2_4 .s2-calc-col .s2-table2 td{padding:12px 16px;white-space:nowrap;}
.s2_4 .s2-formula-card{margin-top:20px;}
.s2_4 .s2-notice-icon{margin-top:20px; gap:45px; border: 1px solid #ccc;}
.s2_4 .s2-notice-icon p{color: var(--Gray-900, #222);
font-size: 14px;
font-weight: 400;
line-height: 160%; }
.s2_4 .s2-notice-icon p b{font-weight: 600;}

.s2_4 .s2-notice-icon img{width: auto; height: auto; flex:none;}
.s2_4 .s2-banner{margin-top:0;}

.s2_4 .arti04 .s2-table2{border-top: 0;}
.s2_4 .s2-example-card{padding: 27px 30px; border: 1px solid #ccc;}
.s2_4 .s2-example-card .s2-example-card__tit{margin-top: 0;}
.s2_4 .s2-example-card p{font-size: 16px; color: #666;  margin-top: 8px;}
.s2_4 .s2-example-card p b{font-weight: 600;}
.s2_4 .s2-example-card .s2-example-card__result{color: #A81900; font-size: 18px; font-weight: 700; margin-top: 0;}
.s2_4 .s2-banner__tel{margin-top: 0; font-size: 16px; font-weight: 400; color: #666; padding-top: 6px; margin-top: 6px;}
 
.s2_4 .s2-notice-cta{padding: 27px 30px; padding-right: 50px; border: 1px solid #ccc;}
.s2_4 .s2-notice-cta__tit li{color: #222; font-size: 14px; font-weight: 700; line-height: 160%; }
.s2_4 .s2-notice-cta__tit li:before{background: #222; width: 3px; height: 3px; left: 9px; top: 12px; }
.s2_4 .s2-notice-cta p{padding-left: 22px; margin-top: 0;}
.s2_4 .s2-notice-cta__tit--second{margin-top: 10px;}


.s2_4 .s2-calc-col > .s2-calc-step li{padding-left: 31px;}
.s2_4 .s2-calc-col > .s2-calc-step li:before{left: 12px; top: 17px;}


.s2_5 .s2-step-cards{margin-top:0;}
.s2_5 .s2-step-cards li:not(.s2-step-arrow){background:#f0f4f9;border:1px solid #B8D1F0;border-radius:12px;}
.s2_5 .s2-step-cards .step-no{background:#00237c;}
.s2_5 .s2-cal-table{margin-top:16px;table-layout:fixed;width:100%;border-collapse:collapse;font-size:16px;text-align:center;}
.s2_5 .s2-cal-table th,
.s2_5 .s2-cal-table td{padding:12px;height:54px;border:1px solid #d7d7d7;font-size:16px;line-height:1.6;color:#222;box-sizing:border-box;}
.s2_5 .s2-cal-table thead th{background:#f2f2f2;font-weight:700;color:#222;}
.s2_5 .s2-cal-table tbody th{font-weight:600;color:#222;width:196px;}
.s2_5 .s2-cal-table th:first-child,
.s2_5 .s2-cal-table td:first-child{width:196px;}
.s2_5 .s2-cal-table th:nth-child(2),
.s2_5 .s2-cal-table td:nth-child(2){width:105px;}
.s2_5 .s2-cal-table .dot.is-danger{background:#a81900;}
.s2_5 .s2-deliver-cards{margin-top:0;gap:30px;}
.s2_5 .s2-deliver-cards li{padding:30px 20px;background:#fafdff;border:1px solid #B8D1F0;border-radius:12px;}
.s2_5 .s2-deliver-cards h4{margin-top:12px;font-size:22px;font-weight:700;color:#222;}
.s2_5 .s2-deliver-cards p{margin-top:12px;font-size:16px;line-height:1.6;color:#666;}

.s2_6 .s2-why-grid{gap:60px 30px;margin-top:0;}
.s2_6 .s2-why-grid li{display:flex;flex-direction:column;gap:20px;border:1px solid #ccc;padding-bottom:20px;}
.s2_6 .s2-why-grid li .pic{height:250px;}
.s2_6 .s2-why-grid li h3{margin-top:0;padding:0 30px;font-size:18px;font-weight:700;line-height:1.6;color:#00237c;}
.s2_6 .s2-why-grid li p{padding:0 30px;font-size:16px;line-height:1.6;color:#444; margin-top: -15px;}
.s2_6 .s2-why-grid li.is-full{max-width:calc(50% - 15px);}

/* ── 출처: main/css/sub_s4.css (S4 · s3_1~s3_3·s5_2 전용) : S ── */
/* S4 · s3_1~s3_3 · s5_2 전용 (데스크톱) — 반응형은 responsive.css sub : responsive */
/* ─────────────────────────────────────────────
   공통 — S_Noti(시안 안내 박스) [get_design_context(89:10775) node 25:1428 · 38:6194]
   s1_4.html 의 .s1_4 .s-notice 와 같은 규격을 범위 제한 없이 재사용
───────────────────────────────────────────── */
.s-notice{margin-top:20px;padding:24px 30px;background:#f8f8f8;border-radius:12px;font-size:var(--fs-label);line-height:1.6;color:var(--c-primary-dark);}
.s-notice__tit{font-weight:700;}
.s-notice p ~ p{margin-top:2px;}

/* ─────────────────────────────────────────────
   s3_1 시공 분야 : S   [get_design_context(38:5510 · 57:5660) 실측]
───────────────────────────────────────────── */
.s3-field-list{display:flex;flex-wrap:wrap;gap:60px 30px;}
.s3-field-card{flex:0 0 346px;width:346px;border:1px solid #ccc;border-radius:0;padding-bottom:20px;display:flex;flex-direction:column;align-items:center;gap:20px; }
.s3-field-card__img{width:100%;height:200px;overflow:hidden;}
.s3-field-card__img img{width:100%;height:100%;object-fit:cover;display:block;background:#d9d9d9;}
.s3-field-card__body{width:304px;display:flex;flex-direction:column;gap:12px;}
.s3-field-card__body h3{font-size:18px;font-weight:700;line-height:1.6;color:#00237c;}
.s3-field-card__body > p{min-height:102px;margin:0;font-size:16px;line-height:1.6;color:#444;box-sizing:border-box; margin-top: -7px;}
.s3-field-card__list{font-size:14px;line-height:1.6;color:#666;}
.s3-field-card__list li{position:relative;padding-left:21px;}
.s3-field-card__list li:before{content:'';position:absolute;left:6px;top:9px;width:5px;height:5px;border-radius:50%;background:#666;}

/* ─────────────────────────────────────────────
   s3_2 시공 프로세스 : S   [get_design_context(57:6008) 실측]
───────────────────────────────────────────── */
.s3-step-row{display:flex;align-items:stretch;gap:2px;margin-bottom:80px;}
.s3-step-card{flex:1 1 0;background:#f0f4f9;border:1px solid #B8D1F0;border-radius:12px;padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;box-sizing:border-box;}
.s3-step-card__step{display:inline-flex;align-items:center;justify-content:center;padding:0 10px;border-radius:100px;background:#00237c;color:#fff;font-size:12px;font-weight:700;line-height:1.6;}
.s3-step-card i{display:flex;align-items:center;justify-content:center;width:60px;height:60px;}
.s3-step-card img{width:auto;height:auto;}
.s3-step-card strong{font-size:16px;font-weight:700;line-height:1.6;color:#222;}
.s3-step-card p{margin-top:-10px;font-size:14px;line-height:1.6;color:#666;}
.s3-step-arrow{flex:0 0 32px;width:32px;height:32px;align-self:center;}

.s3-safety ul{display:flex;gap:30px;}
.s3-safety ul li{flex:0 0 346px;width:346px;padding:30px 0;background:#fafdff;border:1px solid #B8D1F0;border-radius:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;box-sizing:border-box;}
.s3-safety ul li i{display:flex;align-items:center;justify-content:center;width:80px;height:80px;}
.s3-safety ul li h4{font-size:22px;font-weight:700;line-height:1.6;color:#222;}
.s3-safety ul li p{width:284px;padding:0;font-size:16px;line-height:1.6;color:#666;box-sizing:border-box;}

/* ─────────────────────────────────────────────
   s3_3 주요 실적 : S   [get_design_context(89:10785) 실측]
───────────────────────────────────────────── */
.s3_3 .s-notice{margin-top:20px;padding:24px 30px;background:#f8f8f8; border: 1px solid #ccc;border-left:3px solid #00237c;border-radius:0;font-size:14px;line-height:1.6;color:#00237c; 
border-radius: 0 12px 12px 0;}
.s3_3 .sub-c-title + .s-notice{margin-top:0;}
.s3_3 .s-notice__tit{font-weight:700;}
.s3_3 .s-notice strong{font-weight:600;}
.s3-board-placeholder{margin-top:20px;height:540px;background:#6c6c6c;display:flex;align-items:center;justify-content:center;color:#fff;font-size:25.6px;font-weight:700;}
.s3-site-cards{margin-top:80px;}
.s3-site-cards ul{display:flex;flex-wrap:wrap;gap:20px 30px;}
.s3-site-cards li{flex:0 0 346px;width:346px;border:1px solid #ccc;padding-bottom:20px;display:flex;flex-direction:column;align-items:center;gap:20px;box-sizing:border-box;}
.s3-site-cards__img{width:100%;height:200px;overflow:hidden;}
.s3-site-cards__img img{width:100%;height:100%;object-fit:cover;display:block;background:#d9d9d9;}
.s3-site-cards li p{margin:0;width:304px;text-align:center;font-size:18px;font-weight:700;line-height:1.6;color:#00237c;}

/* ─────────────────────────────────────────────
   s5_2 카카오톡 문의 : S   [get_design_context(38:6149) 실측]
───────────────────────────────────────────── */
.s5-kakao-banner{position:relative;width:1100px;max-width:100%;height:294px;border-radius:12px;overflow:hidden;background:#666;margin-bottom:80px;}
.s5-kakao-banner__bg{position:absolute;inset:0;z-index:0;}
.s5-kakao-banner__bg img{width:100%;height:100%;object-fit:cover;}
.s5-kakao-banner__bg:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.2);}
.s5-kakao-banner__panel{position:relative;z-index:1;left:24px;top:24px;width:1052px;max-width:calc(100% - 48px);height:246px;background:#fbe413;border-radius:12px;padding:36px 40px 24px;box-sizing:border-box;}
.s5-kakao-banner__tit-row{display:flex;align-items:center;gap:8px;}
.s5-kakao-banner__tit{font-size:22px;font-weight:700;line-height:1.6;color:#070707;}
.s5-kakao-banner__talk{width:28px;height:26px;flex:0 0 28px; position: relative; top: -8px;}
.s5-kakao-banner__desc{margin-top:4px;max-width:734px;font-size:16px;line-height:1.6;color:#444;}
.s5-kakao-banner__desc strong{font-weight:700;}
.s5-kakao-banner__actions{margin-top:20px;display:flex;align-items:center;gap:16px;}
.s5-kakao-banner__btn{display:inline-flex;align-items:center;gap:12px;height:40px;padding:0 28px;border-radius:100px;background:#070707;color:#fff;font-size:14px;font-weight:700;transition:opacity var(--t-base) linear;}
.s5-kakao-banner__btn:hover,
.s5-kakao-banner__btn:focus-visible{opacity:.85;}
.s5-kakao-banner__btn-accent{color:#ffea00; margin-right: -12px;}
.s5-kakao-banner__btn-arrow{width:20px;height:10px;}
.s5-kakao-banner__tel{display:inline-flex;align-items:center;gap:3px;font-size:18px;font-weight:700;line-height:1.6;color:#222;}
.s5-kakao-banner__tel img{width:20px;height:20px;}
.s5-kakao-banner__qr{position:absolute;right:64px;top:56px;z-index:2;width:170px;display:flex;flex-direction:column;align-items:center;}
.s5-kakao-banner__qr-card{width:170px;height:161px;border-radius:20px;background:#fff;display:flex;align-items:center;justify-content:center;}
.s5-kakao-banner__qr i{display: flex; align-items:center; justify-content: center; width: 170px; height: 161px; /* background: #fff;  */border-radius: 20px; font-size: 16px; font-weight: 700; color: #000;}

.s5-kakao-banner__qr img{width:137px;height:135px;object-fit:contain;}
.s5-kakao-banner__qr p{margin-top:6px;font-size:12px;line-height:1.6;color:#222;}

.s5-faq > ul{margin-top:20px;display:flex;flex-wrap:wrap;gap:20px;}
.s5-faq > ul > li{flex:0 0 540px;width:540px;min-height:146px;box-sizing:border-box;padding:30px;background:#fafdff;border:1px solid #B8D1F0;border-radius:12px;}
.s5-faq > ul > li h4{font-size:18px;font-weight:700;line-height:1.6;color:#00237c;}
.s5-faq > ul > li p{margin-top:2px;font-size:16px;line-height:1.6;color:#666;}
.s5-faq > ul > li p strong{font-weight:400;color:#222;}
.s5-faq > ul > li p.is-body{color:#222;}

.s5-building-info{margin-top:20px;padding:24px 30px;background:#f8f8f8;border:1px solid #eee;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:30px;box-sizing:border-box;}
.s5-building-info__txt{width:531px;max-width:100%;}
.s5-building-info__tit{list-style:none;margin:0;padding:0;}
.s5-building-info__tit li{position:relative;padding-left:21px;font-size:14px;font-weight:700;line-height:1.6;color:#222;}
.s5-building-info__tit li:before{content:'';position:absolute;left:6px;top:9px;width:5px;height:5px;border-radius:50%;background:#222;}
.s5-building-info__txt p{padding-left:21px;font-size:14px;line-height:1.6;color:#666;}
.s5-building-info__tit + p + .s5-building-info__tit{margin-top:10px;}
.s5-building-info__actions{display:flex;gap:12px;flex:0 0 auto;}
.s5-building-info__btn{display:inline-flex;align-items:center;gap:12px;height:40px;padding:0 28px;border-radius:100px;border:1px solid #00237c;background:#fff;color:#00237c;font-size:14px;font-weight:700;white-space:nowrap;box-sizing:border-box;transition:background var(--t-base) linear,color var(--t-base) linear;}
.s5-building-info__btn:hover,
.s5-building-info__btn:focus-visible{background:#00237c;color:#fff;}
.s5-building-info__btn:hover img,
.s5-building-info__btn:focus-visible img{filter:brightness(0) invert(1);}
.s5-building-info__btn img{width:24px;height:24px;}

.s5-consult-table table{width:100%;border-collapse:collapse;margin-top:20px;}
.s5-consult-table th,
.s5-consult-table td{border:1px solid #d7d7d7;font-size:16px;line-height:1.6;height:54px;box-sizing:border-box;}
.s5-consult-table th{width:275px;padding:12px 54px;background:#f2f2f2;font-weight:700;color:#222;text-align:center;}
.s5-consult-table td{padding:12px 30px;color:#222;text-align:left;}
.s5-consult-table td a.s5-link{color:#a81900;font-weight:600;text-decoration:none;}
.s5-consult-table td a.s5-mail{color:inherit;font-weight:400;text-decoration:none;}

.s5_2 .s-notice{margin-top:20px;padding:24px 30px;background:#f8f8f8;border-left:3px solid #00237c;border-radius:0;font-size:14px;line-height:1.6;color:#00237c;}
.s5_2 .s-notice__tit{font-weight:700;}
.s5_2 .s-notice p:not(.s-notice__tit){color:#666;}
/* S4 : E */

/* 출처: sub_s4.css : E */