@charset "UTF-8";
/* ==================================================================
   theme.css — 디자인 토큰 & 컴포넌트 재정의
   경로 : /css/theme.css   호출 : common/link.php (가장 마지막)

   ※ 마크업과 문구는 그대로 두고, 기존 클래스의 겉모습만 다시 정의한다.
     bootstrap.css / layout.css 뒤에 로드되어 같은 특이도면 이 파일이 이긴다.
   ※ 읽는 사람이 중장년층 건물 관리주체이므로 판독성을 최우선으로 잡았다.
     - 본문 20px / 줄간격 1.8 유지, 표 18px, 최소 15px
     - 얇은 굵기(100~200) 사용 금지, 본문 400 이상
     - 본문 대비 10:1 이상 (#333a41 on #fff)
   ※ 이 파일을 고친 뒤에는 link.php 의 ?v= 값을 바꿔 주세요.
================================================================== */

:root{
	/* 브랜드 — 2026 개편으로 네이비 축으로 옮겼다.
	   메인(index.php)·회사소개서와 같은 체계이며, knowhow.css 의
	   --kh-* 값과 짝을 이룬다. 예전 값은 아래 주석에 남겨 둔다.
	   (구: brand #1266a8 / 700 #0d4f80 / 900 #093a5f / 300 #8ec2e2 / 050 #eef4fa) */
	--brand:#1f5aa8;
	--brand-700:#16447f;
	--brand-900:#0d2450;
	--brand-300:#9cc4ee;
	--brand-050:#eef4fc;

	/* 중성 — 파랑 쪽으로 아주 살짝 기울인 회색 */
	--ink:#1c2126;
	--ink-body:#333a41;
	--ink-muted:#5d6670;
	--line:#dde1e6;
	--line-soft:#eaedf1;
	--surface:#ffffff;
	--surface-2:#f6f8fa;

	/* 근거 조문 인용 */
	--cite:#556b7d;

	/* 형태 */
	--radius:14px;
	--radius-sm:10px;
	--shadow-1:0 1px 2px rgba(31,38,36,.04), 0 2px 8px rgba(31,38,36,.05);
	--shadow-2:0 2px 4px rgba(31,38,36,.06), 0 12px 28px -12px rgba(31,38,36,.22);

	/* 타이포 — 중장년 판독성 기준 */
	--fs-body:20px;
	--fs-table:18px;
	--fs-small:16px;
	--lh-body:1.8;
}

/* ── 섹션 리듬 ────────────────────────────────────
   템플릿의 섹션 여백이 75 / 80 / 90 / 110 / 125 / mt-90 / mb-90 으로
   제각각이라 어떤 곳은 180px 씩 벌어지고 어떤 곳은 맞닿았다.
   (게다가 section-md-* 는 992px 이상에서만 정의되어 있다)
   여기서 전부 무효화하고 한 가지 값으로 통일한다.
   → 본문 섹션 상하 각 44px, 섹션 사이는 항상 88px (모바일 60px)
   히어로는 .shell / .container 를 담지 않으므로 영향받지 않는다. */

.page > section > .shell,
.page > section > .container{
	padding-top:44px;
	padding-bottom:44px;
}

/* 템플릿 값 무효화 — 위 규칙에 더해지지 않도록 */
.page > section.section-75,
.page > section.section-80{ padding-top:0; padding-bottom:0; }
.page > section.mt-90{ margin-top:0 !important; }
.page > section.mb-90{ margin-bottom:0 !important; }
.page > section.mb-50{ margin-bottom:0 !important; }
@media (min-width:992px){
	.page > section[class*="section-md-top-"]{ padding-top:0; }
	.page > section[class*="section-md-bottom-"]{ padding-bottom:0; }
}

@media (max-width:991px){
	.page > section > .shell,
	.page > section > .container{
		padding-top:30px;
		padding-bottom:30px;
	}
}

/* 섹션 안쪽 리듬 — mt-90 / mb-90 이 한 섹션 안에서만 90px 씩 벌린다.
   본문 20px 기준으로 절과 절 사이는 48px, 소단락은 36px 이면 충분하다. */
.shell .mt-90{ margin-top:48px !important; }
.shell .mb-90{ margin-bottom:48px !important; }
.shell .mt-50{ margin-top:36px !important; }
.shell .mb-50{ margin-bottom:36px !important; }
.shell .range > [class*="cell-"].mb-90{ margin-bottom:36px !important; }

/* 섹션 직계 .shell 안에 다시 .shell 이 오는 구조가 있다.
   좌우 여백이 두 번 들어가므로 안쪽은 없앤다. */
.shell .shell{ padding-left:0; padding-right:0; max-width:none; }

/* 한 섹션 안에 .shell 이 나란히 두세 개 오는 구조 (11개 페이지).
   위 .shell 의 아래 여백 44 + .mt-90(layout.css 90px !important)
   + 아래 .shell 의 위 여백 44 가 겹쳐 178px 까지 벌어졌다.
   .mt-90 은 .shell 의 "자손"에만 걸리는 규칙이라 여기엔 닿지 않는다.
   섹션 사이 리듬(44+44=88px)과 같은 값으로 맞춘다. */
.page > section > .shell + .shell{ margin-top:0 !important; }

@media (max-width:991px){
	.shell .mt-90{ margin-top:34px !important; }
	.shell .mb-90{ margin-bottom:34px !important; }
	.shell .mt-50{ margin-top:26px !important; }
	.shell .mb-50{ margin-bottom:26px !important; }
}

/* ── 기본 타이포 ──────────────────────────────── */

/* 본문 기본 글꼴.
   bootstrap.css 는 body 에 'Noto Sans KR' 를, layout.css 는 body p 에만
   Pretendard 를 준다. 그래서 p 가 아닌 span·li·td 는 Noto Sans KR 로
   따로 놀았다. 여기서 body 부터 Pretendard 로 통일한다. */
body,
body p{
	font-family:'Pretendard', 'Apple SD Gothic Neo', sans-serif;
	color:var(--ink-body);
	font-size:var(--fs-body);
	line-height:var(--lh-body);
	font-weight:400;
	word-break:keep-all;
}
body footer p{ color:inherit; }

/* 템플릿이 남긴 헤어라인 굵기 제거 — 얇으면 읽기 어렵다 */
.offset-top-44{ font-weight:400; }

/* 페이지 리드 문구
   ※ font-family 를 여기서 못 박는 이유 —
     layout.css 는 .shell h2 에 Paperozi 를, style.css 는 SeoulNamsanM 을
     같은 특이도로 지정한다. style.css 가 14개 페이지에만 로드되므로
     제목 글꼴이 페이지마다 갈렸다. 마지막에 로드되는 이 파일에서 통일한다. */
.shell h1,
.shell h2{
	font-family:'Paperozi', 'Pretendard', sans-serif;
	font-weight:700;
	color:var(--ink);
	letter-spacing:-.01em;
	line-height:1.45;
	font-size:clamp(26px, 3.2vw, 38px);
}
.shell h2.page-lead{ font-size:clamp(24px, 2.8vw, 34px); }

/* 섹션 제목 (.mediterrain) — 브랜드 색 + 하단 실선으로 위계를 준다 */
h6.mediterrain{
	color:var(--brand-900);
	font-size:26px;
	font-weight:700;
	line-height:1.45;
	letter-spacing:-.01em;
	padding-bottom:14px;
	border-bottom:2px solid var(--brand-300);
	margin-bottom:6px;
}
h6.mediterrain i{ color:var(--brand); margin-right:6px; }
/* 소제목 — 실선 없이 한 단계 낮춘다 */
h6.mediterrain.black{
	color:var(--ink);
	font-size:22px;
	border-bottom:0;
	padding-bottom:0;
}
h6.mediterrain.black i{ display:none; }

/* ── 섹션 제목 아래 여백을 구조로 고정한다 ──────────
   지금까지는 페이지마다 mt-20 / offset-top-44 / mt-50 을 손으로 붙여
   같은 구조인데 값이 제각각이었다. 아래 규칙이 기본값을 정하므로
   새 페이지에서 클래스를 빠뜨려도 간격이 유지된다.

   범위를 `.text-left 의 직계 자식`으로 한정한 이유 —
   h6.mediterrain 은 본문 섹션 제목이자 통계 카드의 숫자(「2002년」)
   두 가지로 쓰인다. 카드 쪽은 부모가 .post-vacancy 라 여기서 빠진다.
   (본문 제목 68곳 적용 / 카드 17곳 제외)

   기존 마크업의 .mt-20 등은 !important 라 그대로 이기지만 값이 같아
   결과는 동일하다. 나중에 클래스를 지워도 간격은 유지된다. */
.shell .text-left > h6.mediterrain + *{ margin-top:20px; }
.shell .text-left > h6.mediterrain + .range{ margin-top:44px; }
.shell .text-left > h6.mediterrain + h6{ margin-top:36px; }

/* 절차 페이지의 단계 라벨 → 카드 줄 (test-process 4곳이 0px 였다) */
.phase-head{ margin-bottom:20px; }

/* 강조 — 본문보다 진하게 (기존 #666 은 본문과 같아 강조가 되지 않았다) */
.gray{ color:var(--ink); }
.fw-400{ font-weight:600; }
.fw-600{ font-weight:700; }

/* 근거 조문 — 보라(#8071e8)는 브랜드와 충돌해 차분한 청회색으로 */
.aqua{
	color:var(--cite);
	font-size:var(--fs-small);
	line-height:1.6;
}

/* ── 링크 ─────────────────────────────────────────
   기존 템플릿은 링크에 밑줄도 색도 주지 않아 본문과 구분되지 않았다.
   본문 속 링크는 반드시 "눌러지는 것"으로 보이게 한다. */

.shell a{ color:var(--brand-700); }
.shell a:hover,
.shell a:focus{ color:var(--brand-900); }
a:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:3px; }

/* 본문 문장 속 링크 — .shell 안에만 적용해 푸터·내비를 건드리지 않는다 */
.shell p a,
.shell td a,
.shell li a,
.shell dd a{
	color:var(--brand-700);
	font-weight:700;
	text-decoration:underline;
	text-decoration-thickness:2px;
	text-underline-offset:5px;
	text-decoration-color:var(--brand-300);
	transition:color .15s ease, text-decoration-color .15s ease, background-color .15s ease;
	border-radius:3px;
}
.shell p a:hover,
.shell td a:hover,
.shell li a:hover,
.shell dd a:hover{
	color:var(--brand-900);
	text-decoration-color:var(--brand-900);
	background:var(--brand-050);
}
/* 링크에 붙은 .gray 는 강조색이 아니라 링크색이어야 한다 */
.shell a.gray,
.shell a.gray.fw-400,
.shell a.gray.fw-600{ color:var(--brand-700); }
.shell a.gray:hover{ color:var(--brand-900); }

/* 전화·메일 링크는 밑줄 없이 (숫자 가독성 우선) */
.shell p a[href^="tel:"],
.shell p a[href^="mailto:"],
.tel a{ text-decoration:none; }
.shell p a[href^="tel:"]:hover,
.shell p a[href^="mailto:"]:hover{ text-decoration:underline; }

/* 자료 내려받기 링크 — 밑줄 대신 내려받기 아이콘을 앞에 세운다.
   파일명이 길어 밑줄이 두 줄로 끊기면 지저분해 보인다.
   href 로 걸어 두어 표에 행이 늘어도 CSS 를 다시 손댈 일이 없다. */
.shell td a[href^="/down/"]{
	display:inline-flex;
	align-items:baseline;
	gap:8px;
	text-decoration:none;
	word-break:break-all;
}
.shell td a[href^="/down/"]::before{
	font-family:"Font Awesome 6 Free";
	font-weight:900;
	content:"\f019";              /* fa-download */
	flex:0 0 auto;
	font-size:12px;
	color:var(--brand-700);
	transition:color .15s ease;
}
/* 밑줄은 없앴지만 누를 수 있는 곳임은 남겨 둔다 */
.shell td a[href^="/down/"]:hover{
	text-decoration:underline;
	text-decoration-thickness:2px;
	text-underline-offset:5px;
	text-decoration-color:var(--brand-300);
}
.shell td a[href^="/down/"]:hover::before{ color:var(--brand-900); }

/* ── 더 보기 버튼 (.btn-more) ──────────────────── */

.link-row{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:24px;
}
.btn-more{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:var(--brand);
	color:#fff !important;
	font-size:17px;
	font-weight:700;
	line-height:1.2;
	padding:13px 22px;
	border:1px solid var(--brand);
	border-radius:999px;
	text-decoration:none !important;
	box-shadow:var(--shadow-1);
	transition:background .18s ease, border-color .18s ease, transform .18s ease;
	white-space:nowrap;
}
.btn-more:after{ content:"›"; font-size:20px; line-height:1; margin-top:-2px; }
.btn-more:hover,
.btn-more:focus{ background:var(--brand-700); border-color:var(--brand-700); color:#fff !important; transform:translateY(-1px); }
/* 보조 버튼 — 같은 줄의 두 번째 항목 */
.btn-more.btn-ghost{
	background:#fff;
	color:var(--brand-700) !important;
	border-color:var(--brand-300);
	box-shadow:none;
}
.btn-more.btn-ghost:hover,
.btn-more.btn-ghost:focus{ background:var(--brand-050); border-color:var(--brand); color:var(--brand-900) !important; }

/* ── 본문 속 작은 링크 버튼 (.link-chip) ────────────
   표 안이나 문단 끝의 참고 링크용. .btn-more 보다 한 단계
   조용하게 — 바탕은 흰색, 테두리만으로 버튼임을 알린다.
   .shell a 규칙(0,1,1)에 지지 않도록 a 를 붙여 특이도를 올린다. */

.chip-row{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:16px 0 0 !important;
}
.shell a.link-chip{
	display:inline-flex;
	align-items:center;
	gap:7px;
	background:var(--surface);
	color:var(--brand-700) !important;
	font-size:16px;
	font-weight:600;
	line-height:1.2;
	padding:9px 16px;
	border:1px solid var(--line);
	border-radius:999px;
	text-decoration:none !important;
	white-space:nowrap;
	transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.shell a.link-chip:after{ content:"›"; font-size:17px; line-height:1; margin-top:-2px; color:var(--brand-300); }
.shell a.link-chip.is-external:after{ content:none; }
.shell a.link-chip.is-external i{ font-size:12px; color:var(--brand-300); }
.shell a.link-chip:hover,
.shell a.link-chip:focus{
	background:var(--brand-050);
	border-color:var(--brand-300);
	color:var(--brand-900) !important;
}
.shell a.link-chip:hover:after,
.shell a.link-chip:hover i{ color:var(--brand); }
@media (max-width:575px){
	.shell a.link-chip{ font-size:15px; padding:8px 14px; }
}

/* ── 상단 내비게이션 ──────────────────────────────
   기존 내비는 템플릿 잔재로 색이 뒤섞여 있었다.
   파란 바(#4876ef) · 노란 강조(#fbc318) · 하늘색 hover(#1da4e1) 로
   브랜드 색과 맞지 않고, 무엇보다 배경이 히어로 사진에 좌우되어
   흰 로고가 밝은 사진 위에서 사라졌다.
   배경을 브랜드 계열 진한 남색으로 고정해 로고·메뉴를 항상 읽히게 한다.
   흰 로고 대비 약 14:1 이라 어떤 히어로 사진 위에서도 안전하다. */

.rd-navbar .rd-navbar-inner{ background:var(--nav-bg); }
:root{ --nav-bg:#0e2942; --nav-text:#f2f5f8; --nav-accent:#8ec9ee; }

/* 메뉴 글자 — 중장년 판독성을 위해 16px → 17px */
.rd-navbar-static .rd-navbar-nav > li > a,
.rd-navbar-fullwidth .rd-navbar-nav > li > a{
	color:var(--nav-text);
	font-size:17px;
	font-weight:600;
	letter-spacing:-.01em;
}
.rd-navbar-static .rd-navbar-nav > li,
.rd-navbar-fullwidth .rd-navbar-nav > li{ color:var(--nav-text); }

/* hover · 현재 메뉴 — 노랑/기존 하늘색 대신 브랜드 파랑 */
.rd-navbar-static .rd-navbar-nav > li > a:hover,
.rd-navbar-static .rd-navbar-nav > li.focus > a,
.rd-navbar-static .rd-navbar-nav > li.opened > a,
.rd-navbar-static .rd-navbar-nav > li.active > a,
.rd-navbar-fullwidth .rd-navbar-nav > li > a:hover,
.rd-navbar-fullwidth .rd-navbar-nav > li.active > a{
	color:var(--nav-accent);
	background:transparent;
}

/* 드롭다운 */
.rd-navbar-dropdown{ background:#143352; border-radius:0 0 10px 10px; overflow:hidden; }
.rd-navbar-dropdown .rd-dropdown-link,
.rd-navbar-dropdown li > a{
	color:#dce6ef;
	font-size:16px;
	background:transparent;
}
.rd-navbar-dropdown .rd-dropdown-link:hover,
.rd-navbar-dropdown li > a:hover{
	color:#fff;
	background:var(--brand);
}

/* 스크롤 고정 시에도 같은 색을 유지 */
.rd-navbar--is-stuck .rd-navbar-inner,
.rd-navbar--is-clone .rd-navbar-inner{ background:var(--nav-bg); }

/* 로고 — 배경이 확정되었으므로 흰 로고가 항상 읽힌다.
   주의: logo-light-183x34.png 의 실제 크기는 138x34 인데 HTML 은 width="183"
   으로 선언한다. 아래 전역 규칙 img{height:auto} 가 height 속성을 무효화하면
   높이가 45px 로 늘어나 내비 바를 넘어간다. 여기서 크기를 확정한다. */
.rd-navbar-brand img{
	height:34px;
	width:auto;
	max-width:none;
	filter:none;
	display:block;
}

/* ── 카드 (.post-vacancy) ─────────────────────── */

.post-vacancy{
	overflow-wrap:break-word;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow-1);
	padding:30px 30px 27px;
	transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.post-vacancy:hover{
	background:var(--surface);
	border-color:var(--brand-300);
	box-shadow:var(--shadow-2);
	transform:translateY(-2px);
}
.post-vacancy.no-hover:hover{ transform:none; box-shadow:var(--shadow-1); border-color:var(--line); }

/* hover 시 색이 뭉개지지 않도록 — 배경 흰색 유지와 색 상속은 layout.css 가
   이미 처리하므로, 여기서는 layout.css 가 다루지 않는 요소만 보정한다. */
.page .post-vacancy:hover{ background:var(--surface); color:var(--ink-body); }
.page .post-vacancy:hover h6.mediterrain i{ color:var(--brand); }
.page .post-vacancy:hover .gray{ color:var(--ink); }
.page .post-vacancy:hover .aqua{ color:var(--cite); }
.page .post-vacancy:hover .license-title{ color:var(--ink); }
.page .post-vacancy:hover .license-desc{ color:var(--ink-muted); }
.page .post-vacancy:hover .text-turquoise{ color:var(--brand-900); }
.page .post-vacancy:hover a{ color:var(--brand-700); }

/* 나란히 놓인 카드 행 (.stat-row) — 지표 카드, 법정 의무 카드
   기본 .range 는 카드가 셀 높이를 채우지 않아 밑선이 어긋나고,
   mb-30-xs 는 xs 에서만 걸려 그 위 구간에서 아래 요소와 붙는다. */
/* 앞 섹션에 걸린 .bottom-margin{padding-bottom:0} 때문에 위아래가 붙는다.
   지표 카드 행 자체에 여백을 준다. */
.shell .stat-row{
	align-items:stretch;
	margin-top:36px;
	margin-bottom:6px;
}
.stat-row > [class*="cell-"]{
	display:flex;
	margin-bottom:30px;
}
/* 마지막 줄 카드의 아래 여백은 행 여백과 겹치므로 덜어낸다 */
.stat-row{ padding-bottom:0; }
.stat-row .post-vacancy{
	width:100%;
	display:flex;
	flex-direction:column;
}
/* 지표 카드 — 숫자를 크게, 설명은 아래에 붙여 정렬 */
.stat-row .post-vacancy h6.mediterrain{
	font-size:24px;
	border-bottom:0;
	padding-bottom:0;
	margin-bottom:10px;
	color:var(--brand-700);
}
.stat-row .post-vacancy h6.mediterrain i{ display:none; }
.stat-row .post-vacancy > p{
	font-size:17px;
	line-height:1.6;
	color:var(--ink-muted);
	margin:0;
}
/* 본문형 카드(법정 의무)는 링크 줄을 바닥에 붙인다 */
.stat-row .post-vacancy .link-row{ margin-top:auto; padding-top:18px; }

@media (max-width:991px){
	.stat-row .post-vacancy h6.mediterrain{ font-size:22px; }
}

/* 문의 카드 (.question) — 전화번호가 주인공이 되도록 */
.post-vacancy.question{
	background:var(--brand-050);
	border-color:var(--brand-300);
	text-align:left;
	padding:34px 36px;
}
.tel{ color:var(--ink); font-size:clamp(28px, 3.4vw, 40px); line-height:1.3; }
.tel span{ color:var(--ink); font-size:inherit; font-family:inherit; }
.tel a{ color:var(--brand-700); font-weight:800; }
.name{ color:var(--ink); }
.name span:first-child{ color:var(--ink-muted); font-size:18px; }


/* 정의 목록 (연락처·오시는 길) */
.contact-info dt{
	font-size:var(--fs-small);
	font-weight:700;
	color:var(--ink-muted);
	letter-spacing:.02em;
}
.contact-info dd{
	font-size:var(--fs-body);
	line-height:1.65;
	color:var(--ink-body);
	margin:0;
}

/* 안내 박스 (.box) — 양쪽정렬은 한글에서 어색한 공백을 만든다 */
.box{
	font-weight:400;
	background:var(--surface-2);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:36px 40px;
	text-align:left;
	color:var(--ink-body);
	line-height:var(--lh-body);
}
.box h6{
	color:var(--brand-900);
	font-size:22px;
	font-weight:700;
	margin-bottom:4px;
}

/* ── 표 ───────────────────────────────────────── */

.default-table{
	border-collapse:separate;
	border-spacing:0;
	border:1px solid var(--line);
	border-radius:var(--radius-sm);
	overflow:hidden;
	background:var(--surface);
}
.default-table th{
	background:var(--brand-050);
	color:var(--brand-900);
	border:0;
	border-bottom:2px solid var(--brand-300);
	padding:16px 18px;
	font-size:var(--fs-table);
	font-weight:700;
	line-height:1.5;
}
.default-table td{
	border:0;
	border-bottom:1px solid var(--line-soft);
	padding:16px 18px;
	font-size:var(--fs-table);
	line-height:1.75;
	color:var(--ink-body);
	font-weight:400;
	vertical-align:top;
}
.default-table tbody tr:last-child td{ border-bottom:0; }
/* 열 사이 경계 — 가로선만 있으면 항목명 칸과 내용 칸이 구분되지 않는다 */
.default-table td + td,
.default-table th + th,
.default-table th + td,
.default-table td + th{ border-left:1px solid var(--line-soft); }
.default-table thead th + th{ border-left-color:var(--brand-300); }
/* 항목명 칸에 옅은 바탕을 깔아 경계를 한 번 더 잡아준다 */
.inspection td:first-child,
.facility td:first-child,
.extent td:first-child{ background:var(--surface-2); }
.default-table tbody tr:nth-child(even) td{ background:#fbfcfc; }
/* 첫 칸은 항목명 — 진하게 */
.default-table td:first-child{ color:var(--ink); font-weight:600; }
.default-table td p{ font-size:var(--fs-table); line-height:1.75; margin:0 0 6px; }
.default-table td p:last-child{ margin-bottom:0; }
/* ── 실적 표 (.ref_table — style.css 정의를 덮는다) ────
   style.css 는 구 브랜드색 #189890(청록)으로 머리행을 칠하고
   글자·여백도 다른 표와 달랐다. .default-table 과 같은 모습으로 맞춘다.
   .ref_table 은 mr_client / ref_* / *_client 등 실적 페이지 공통. */

.ref_table table{
	border-collapse:separate;
	border-spacing:0;
	border:1px solid var(--line);
	border-radius:var(--radius-sm);
	overflow:hidden;
	background:var(--surface);
	width:100%;
}
.ref_table table thead tr{ height:auto; background:var(--brand-050); }
.ref_table table thead th{
	background:var(--brand-050);
	color:var(--brand-900);
	font-size:var(--fs-table);
	font-weight:700;
	line-height:1.5;
	padding:16px 18px;
	border:0;
	border-bottom:2px solid var(--brand-300);
}
/* 머리글은 그 열의 내용과 같은 방향으로 맞춘다.
   1열(실적년월)은 짧은 날짜라 가운데, 2·3열은 본문이 왼쪽 정렬이므로 왼쪽. */
.ref_table table thead th{ text-align:left; }
.ref_table table thead th:first-child{ text-align:center; }
.ref_table table thead th + th{ border-left:1px solid var(--brand-300); }
.ref_table table tbody tr{ height:auto; background:var(--surface); }
/* 실적년월 칸 — 다른 표의 항목명 칸과 같은 옅은 바탕 */
.ref_table table tbody th{
	background:var(--surface-2);
	color:var(--ink);
	font-size:var(--fs-table);
	font-weight:600;
	line-height:1.6;
	padding:14px 16px;
	border:0;
	border-top:1px solid var(--line-soft);
	text-align:center;
	white-space:nowrap;
}
.ref_table table tbody td{
	color:var(--ink-body);
	font-size:var(--fs-table);
	font-weight:400;
	line-height:1.7;
	padding:14px 18px;
	border:0;
	border-top:1px solid var(--line-soft);
	border-left:1px solid var(--line-soft);
	text-align:left;
}
.ref_table table tbody tr:first-child th,
.ref_table table tbody tr:first-child td{ border-top:0; }
.ref_table table tbody tr:last-child th,
.ref_table table tbody tr:last-child td{ border-bottom:0; }
/* 줄무늬 — style.css 의 .bg-white(!important) 와 부딪히지 않게
   tr 이 아니라 td 에 건다. */
.ref_table table tbody tr:nth-child(even) td{ background:#fbfcfc; }
.ref_table table tbody tr:nth-child(even) th{ background:var(--surface-2); }
.ref_table .none{ border-right:0 !important; }

/* 제품 사양 표 머리칸 — 같은 구 브랜드색을 쓰고 있었다 */
.unit-right table th{ background:var(--brand-050); color:var(--brand-900); }

/* 자료 표 — style.css 가 th·td 를 모두 가운데로 두고 padding 을 3px 로 잡아
   글이 칸에 답답하게 붙어 있었다. 다른 표와 같은 여백으로 맞추고,
   파일명 칸만 왼쪽으로 읽히게 한다. 벽에 붙지 않도록 왼쪽 여백은 남긴다. */
.unit-right table th,
.unit-right table td{ padding:13px 18px; }
/* 카테고리 칸은 짧은 말이라 가운데가 낫다 — 다른 표의 항목명 칸과 같은 결.
   style.css 의 150px 는 가장 긴 '(전자파성적서)' 에 겨우 맞춘 폭이라
   파일명 칸이 그만큼 넓어져 글이 왼쪽에 몰려 보였다. 셋에 하나쯤으로 넓힌다. */
.unit-right table th:first-child,
.unit-right table td:first-child{ text-align:center; width:32%; min-width:170px; }
/* 파일명 칸 — 머리행까지 함께 왼쪽으로 두어야 열이 어긋나 보이지 않는다 */
.unit-right table th:nth-child(2),
.unit-right table td:nth-child(2){ text-align:left; }

@media (max-width:767px){
	.unit-right table th,
	.unit-right table td{ padding:11px 12px; }
	.unit-right table th:first-child,
	.unit-right table td:first-child{ width:38%; min-width:0; }
}

@media (max-width:767px){
	.ref_table table thead th{ padding:12px 10px; font-size:var(--fs-small); }
	.ref_table table tbody th{ padding:12px 8px; font-size:var(--fs-small); }
	.ref_table table tbody td{ padding:12px 12px; font-size:var(--fs-small); }
}

/* ── 설비명 나열 (.fac-list) ─────────────────────
   고시 별표의 설비 이름처럼 "개수 자체가 메시지"인 목록용.
   20개를 카드로 만들면 화면을 다 잡아먹으므로 알약형 태그로 늘어놓는다.
   bootstrap 은 bare ul 의 padding-left / list-style 을 지우지 않으므로
   여기서 직접 없앤다. */
.fac-list{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:24px 0 0;
	padding:0;
	list-style:none;
}
.fac-list li{
	background:var(--brand-050);
	color:var(--brand-900);
	border:1px solid var(--brand-300);
	border-radius:999px;
	padding:8px 16px;
	font-size:var(--fs-small);
	font-weight:600;
	line-height:1.35;
	word-break:keep-all;
}
@media (max-width:575px){
	.fac-list{ gap:6px; }
	.fac-list li{ padding:7px 13px; font-size:15px; }
}

/* ── Seetrol 제품 카드 (.sp-*) ─────────────────────
   seetrol.php 에서 쓴다. 예전 seetrol_product.php 는 bootstrap 의
   .unit / cell-md-4 격자에 사양을 ■ 문자로 나열했는데,
   그 페이지만 style.css 를 로드하지 않아 일부 클래스가 비어 있었다.
   여기서 theme.css 만으로 성립하는 컴포넌트로 다시 만든다. */

.sp-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:20px;
	margin:24px 0 0;
}
.sp-card{
	display:flex;
	flex-direction:column;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow-1);
	overflow:hidden;
	transition:border-color .18s ease, box-shadow .18s ease;
}
.sp-card:hover{ border-color:var(--brand-300); box-shadow:var(--shadow-2); }
/* 썸네일 — flex 를 쓰면 안 된다.
   <img> 가 flex 아이템이 되면 flex-shrink 로 폭만 줄고 높이는
   width/height 속성값이 남아 가로로 눌린 그림이 된다.
   block 으로 두고 이미지가 칸을 채우게 한다. */
.sp-thumb{
	background:var(--surface-2);
	border-bottom:1px solid var(--line-soft);
	display:block;
	padding:14px 14px 10px;
}
.sp-thumb img{
	display:block;
	width:100%;
	height:auto;      /* 270x263 비율(1.027)을 그대로 따라간다 */
	margin:0 auto;
}
.sp-body{
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	padding:20px 22px 22px;
}
.sp-name{
	font-size:21px;
	font-weight:700;
	color:var(--brand-900);
	line-height:1.35;
	margin:0;
	word-break:keep-all;
}
.sp-spec{
	list-style:none;
	margin:14px 0 0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:6px;
}
.sp-spec li{
	position:relative;
	padding-left:16px;
	font-size:var(--fs-small);
	line-height:1.5;
	color:var(--ink-body);
	word-break:keep-all;
}
.sp-spec li:before{
	content:"";
	position:absolute;
	left:0;
	top:.6em;
	width:6px;
	height:6px;
	background:var(--brand-300);
	border-radius:2px;
}
/* 버튼은 카드 아래에 붙여 카드 높이가 달라도 줄이 맞는다 */
.sp-act{
	margin:18px 0 0 !important;
	padding-top:16px;
	border-top:1px solid var(--line-soft);
	display:flex;
	flex-direction:column;
	/* stretch 로 두어 버튼이 카드 폭을 채운다.
	   글자 수가 "구매하기"(4자)와 "무료 체험 · 구독 신청"(13자)로 크게
	   달라, 내용 폭에 맡기면 한 줄에 놓인 카드끼리 버튼 크기가 들쭉날쭉하다. */
	align-items:stretch;
	gap:8px;
	margin-top:auto !important;
}
.sp-act .btn-more{
	font-size:16px;
	padding:11px 20px;
	justify-content:center;
	white-space:normal;      /* 좁은 화면에서 넘치지 않게 */
	text-align:center;
}
.sp-mail{
	font-size:14px;
	color:var(--ink-muted);
	word-break:break-all;
}

@media (max-width:991px){
	.sp-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
}
@media (max-width:575px){
	.sp-grid{ grid-template-columns:1fr; }
	.sp-body{ padding:18px 18px 20px; }
}

/* ── 구축 사례 (.cs-* — remote-case.php) ───────────
   사례가 열 건을 넘어가면 한 화면에 다 펴 두는 것이 오히려 방해가 된다.
   <details>/<summary> 로 접어 두고 제목을 누르면 펼쳐지게 한다.
   자바스크립트를 쓰지 않으므로 스크립트가 막힌 환경에서도 열리고,
   접힌 내용도 문서 안에 그대로 있어 검색에 잡힌다.

   본문의 표·개념도·태그는 .default-table / .netmap / .fac-list 를
   그대로 재사용하므로 여기에는 접기 틀과 그 사이를 잇는 것만 둔다. */

.cs-count{
	margin:0 0 20px !important;
	font-size:var(--fs-small);
	color:var(--ink-muted);
}
.cs-count b{ color:var(--brand-900); }

/* 사례 한 건 = 카드 하나 */
.cs-item{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow-1);
	margin-top:14px;
	overflow:hidden;
	transition:border-color .18s ease, box-shadow .18s ease;
}
.cs-item:first-of-type{ margin-top:0; }
.cs-item[open]{ border-color:var(--brand-300); box-shadow:var(--shadow-2); }

/* 접힌 상태에서 보이는 줄 */
.cs-head{
	display:flex;
	align-items:flex-start;
	gap:16px;
	padding:20px 22px;
	cursor:pointer;
	list-style:none;              /* 기본 삼각형 제거 */
	background:var(--surface);
	transition:background .15s ease;
}
.cs-head::-webkit-details-marker{ display:none; }
.cs-head:hover{ background:var(--brand-050); }
.cs-item[open] .cs-head{ background:var(--brand-050); border-bottom:1px solid var(--line-soft); }
.cs-head:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }

.cs-no{
	flex:0 0 auto;
	min-width:44px;
	height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--brand);
	color:#fff;
	font-size:17px;
	font-weight:700;
	border-radius:10px;
}
.cs-sum{ flex:1 1 auto; min-width:0; }

.cs-title{
	margin:0 !important;
	font-size:22px;
	font-weight:700;
	line-height:1.4;
	color:var(--brand-900);
	word-break:keep-all;
}
.cs-brief{
	display:block;
	margin-top:8px;
	font-size:var(--fs-small);
	line-height:1.6;
	color:var(--ink-body);
	word-break:keep-all;
}

/* 펼침 표시 — 열리면 화살표가 뒤집힌다 */
.cs-toggle{
	flex:0 0 auto;
	width:34px;
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--brand-700);
	font-size:16px;
	border:1px solid var(--brand-300);
	border-radius:50%;
	background:var(--surface);
	transition:transform .2s ease;
}
.cs-item[open] .cs-toggle{ transform:rotate(180deg); }

/* 펼친 본문 */
.cs-body{ padding:22px; }

/* 수요처 · 시기 · 분야 */
.cs-meta{
	display:flex;
	flex-wrap:wrap;
	gap:6px 0;
	margin:8px 0 0 !important;
	font-size:15px;
	color:var(--ink-muted);
}
.cs-meta span{ padding:0 12px; border-left:1px solid var(--line); line-height:1.4; }
.cs-meta span:first-child{ padding-left:0; border-left:0; color:var(--ink); font-weight:700; }

/* 구현 단계 — 표 안에 들어가는 번호 없는 목록 */
.cs-steps{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:9px;
}
.cs-steps li{
	position:relative;
	padding-left:22px;
	font-size:var(--fs-table);
	line-height:1.7;
	color:var(--ink-body);
	word-break:keep-all;
}
.cs-steps li:before{
	content:"";
	position:absolute;
	left:2px;
	top:.62em;
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--brand-300);
}
.cs-steps li b{ color:var(--ink); font-weight:700; }

/* 방식 비교 표 */
.cs-vs th:first-child,
.cs-vs td:first-child{ width:16%; }
.cs-vs thead th:last-child{ color:var(--brand); }
.cs-vs td:last-child{ color:var(--ink); font-weight:600; }

/* "이렇게도" — 같은 구조를 조금 달리 쓴 현장.
   본문과 구분되게 .box 를 쓰되 사례 안이라 여백을 줄인다. */
.cs-also{
	margin-top:36px;
	padding:26px 28px;
	border-left:4px solid var(--brand-300);
}
.cs-also h6{ font-size:20px; }

/* "이런 곳에도" 앞 라벨 */
.cs-apply-label{
	margin:36px 0 0 !important;
	font-size:var(--fs-table);
	font-weight:700;
	color:var(--brand-900);
}

@media (max-width:767px){
	.cs-head{ padding:16px 16px; gap:12px; }
	.cs-no{ min-width:38px; height:38px; font-size:15px; }
	.cs-title{ font-size:19px; }
	.cs-toggle{ width:30px; height:30px; font-size:14px; }
	.cs-body{ padding:18px 16px; }
	.cs-vs th:first-child,
	.cs-vs td:first-child{ width:22%; }
}
@media (prefers-reduced-motion:reduce){
	.cs-item,
	.cs-head,
	.cs-toggle{ transition:none !important; }
}

/* ── 시스템 구성도 (.netmap) ───────────────────────
   seetrol.co.kr/system.php 의 구성도를 unwired 스타일로 다시 그린 것.
   저쪽은 .sys-page / .auto-container 등 다른 템플릿이라 마크업을
   가져올 수 없다. 그림 파일이 아니라 아이콘+HTML 이므로 확대해도
   깨지지 않고, 기기 이름이 검색에도 잡힌다.

   구조 : [관리자 기기] → [Seetrol MY 서버] ← [현장 기기]
          위에 망(인터넷·폐쇄망) 띠를 얹어 어디를 지나는지 보인다.
   모바일(991px 이하) : 세로로 쌓이고 화살표가 아래를 가리킨다.
   -------------------------------------------------------------- */

.netmap{
	margin:24px 0 0;
	border:1px solid var(--line);
	border-radius:var(--radius);
	background:var(--surface);
	box-shadow:var(--shadow-1);
	overflow:hidden;
}

/* 망 띠 — 이 통신이 어느 망을 지나는지 */
.nm-band{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	flex-wrap:wrap;
	background:var(--brand-900);
	color:#e8f1f8;
	font-size:var(--fs-small);
	font-weight:600;
	line-height:1.5;
	padding:14px 20px;
	text-align:center;
	word-break:keep-all;
}
.nm-band i{ color:var(--brand-300); font-size:19px; }

/* 본체 — 좌 / 화살표 / 서버 / 화살표 / 우 */
.nm-flow{
	display:grid;
	grid-template-columns:1fr auto 1fr auto 1fr;
	align-items:center;
	gap:0;
	padding:26px 22px 24px;
	background:var(--surface-2);
}

.nm-side{ display:flex; flex-direction:column; align-items:center; }
.nm-side-label{
	font-size:14px;
	font-weight:700;
	color:var(--brand-700);
	margin-bottom:14px;
	white-space:nowrap;
}
.nm-devs{ display:flex; flex-direction:column; gap:10px; width:100%; }

/* 기기 한 칸 — 아이콘이 주인공 */
.nm-dev{
	display:flex;
	align-items:center;
	gap:13px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius-sm);
	padding:12px 14px;
	text-align:left;
}
.nm-dev i{
	flex:0 0 40px;
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:22px;
	color:var(--brand);
	background:var(--brand-050);
	border-radius:9px;
}
.nm-dev b{
	display:block;
	font-size:var(--fs-small);
	font-weight:700;
	color:var(--ink);
	line-height:1.35;
	word-break:keep-all;
}
.nm-dev em{
	display:block;
	font-style:normal;
	font-size:14px;
	color:var(--ink-muted);
	line-height:1.4;
	margin-top:2px;
	word-break:keep-all;
}

/* 가운데 서버 — 가장 크고 진하게 */
.nm-hub{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	background:var(--brand-050);
	border:2px solid var(--brand-300);
	border-radius:var(--radius);
	box-shadow:var(--shadow-2);
	padding:22px 18px 20px;
}
.nm-hub > i{
	width:66px;
	height:66px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:32px;
	color:#fff;
	background:var(--brand);
	border-radius:50%;
	margin-bottom:12px;
}
.nm-hub b{
	font-size:21px;
	font-weight:700;
	color:var(--brand-900);
	line-height:1.3;
}
.nm-hub em{
	font-style:normal;
	font-size:14px;
	color:var(--ink-muted);
	line-height:1.5;
	margin-top:6px;
	word-break:keep-all;
}
.nm-hub .nm-hub-tags{
	list-style:none;
	margin:12px 0 0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:5px;
}
.nm-hub .nm-hub-tags li{
	font-size:13px;
	font-weight:600;
	color:var(--brand-700);
	background:var(--surface);
	border:1px solid var(--brand-300);
	border-radius:999px;
	padding:4px 10px;
	line-height:1.3;
	white-space:nowrap;
}

/* 연결 화살표 */
.nm-arrow{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 14px;
	color:var(--brand);
	font-size:24px;
	line-height:1;
}

@media (max-width:991px){
	.nm-flow{ grid-template-columns:1fr; padding:22px 18px 20px; }
	.nm-arrow{ padding:12px 0; transform:rotate(90deg); }
	.nm-side-label{ margin-bottom:10px; }
}
@media (max-width:575px){
	.nm-dev{ padding:10px 12px; gap:11px; }
	.nm-dev i{ flex-basis:34px; height:34px; font-size:19px; }
	.nm-hub > i{ width:56px; height:56px; font-size:27px; }
	.nm-band{ padding:12px 16px; }
}

/* .effect 표는 th 가 항목명으로 쓰인다 */
.effect th{
	background:var(--surface-2);
	color:var(--ink);
	border-bottom:1px solid var(--line-soft);
	text-align:center;
	font-size:var(--fs-table);
}
.effect tbody tr:last-child th{ border-bottom:0; }

/* layout.css 에 남아 있는 옛 브랜드색(#189890) 잔여 사용처 —
   theme.css 가 덮지 못하던 것들을 여기서 함께 파랑으로 맞춘다. */
.manufacturer{ color:var(--brand-700); font-weight:500; font-size:17px; }
.yellow{ color:var(--brand); }

/* ── 회사 개요 표 (.about — about.php) ──
   style.css 원본은 본문 17px, 모바일 12px 로 중장년 판독성 기준에 못 미쳤다.
   좌우 2단 정의형 표로 다시 잡고, 모바일에서는 위아래로 쌓는다. */

/* style.css 의 .range > div{ border-bottom:1px dashed #adadad } 는
   범용 그리드 클래스에 무차별로 걸려 있어, 카드 그리드와 이미지 행마다
   가로 점선이 그어진다(about·careers·seetrol·history).
   의도된 구분선이 아니므로 해제한다. */
.range > div{ border-bottom:0; }

/* .about 은 .range(flex) 안의 항목이라 폭을 명시하지 않으면 내용만큼만
   차지해 표가 가운데로 오지 않는다. */
.range > .about{ flex:1 1 100%; width:100%; max-width:100%; }

/* 표 위아래 숨통 — 앞뒤 섹션의 padding 이 0 으로 눌려 있어 직접 준다 */

.about .link-row{ margin-top:34px; }

.about table{
	width:100%;
	max-width:900px;
	margin-left:auto;
	margin-right:auto;
	border-collapse:separate;
	border-spacing:0;
	border:1px solid var(--line);
	border-radius:var(--radius-sm);
	overflow:hidden;
	background:var(--surface);
}
.about tr{ height:auto; }
.about th{
	width:30%;
	text-align:left;
	vertical-align:top;
	font-size:var(--fs-table);
	font-weight:700;
	color:var(--brand-900);
	background:var(--brand-050);
	border:0;
	border-bottom:1px solid var(--line-soft);
	padding:18px 22px;
	line-height:1.6;
	letter-spacing:0;
	word-break:keep-all;
}
.about td{
	width:70%;
	text-align:left;
	vertical-align:top;
	font-size:var(--fs-table);
	font-weight:400;
	color:var(--ink-body);
	border:0;
	border-bottom:1px solid var(--line-soft);
	padding:18px 22px;
	line-height:1.7;
	word-break:keep-all;
}
.about tbody tr:last-child th,
.about tbody tr:last-child td{ border-bottom:0; }
.about td a{
	color:var(--brand-700);
	font-weight:700;
	text-decoration:underline;
	text-decoration-thickness:2px;
	text-underline-offset:5px;
	text-decoration-color:var(--brand-300);
}
.about td a:hover{ color:var(--brand-900); text-decoration-color:var(--brand-900); }

@media (max-width:767px){
	/* 좁은 화면에서는 항목명과 내용을 위아래로 쌓는다 */
	.about table,
	.about tbody,
	.about tr,
	.about th,
	.about td{ display:block; width:100%; }
	.about tr{ border-bottom:1px solid var(--line-soft); }
	.about tbody tr:last-child{ border-bottom:0; }
	.about th{
		border-bottom:0;
		padding:14px 18px 4px;
		font-size:var(--fs-small);
		background:transparent;
		color:var(--ink-muted);
	}
	.about td{ border-bottom:0; padding:0 18px 16px; font-size:var(--fs-table); }
}

/* ── 회사 연혁 (history.php) ───────────────────────
   기존은 항목마다 내용이 빈 아코디언이라 눌러도 아무것도 열리지 않았다.
   중장년층이 훑어보기 쉽도록 연도별 카드로 나누고, 얇은 구분선 대신
   면(面)으로 구획을 만든다. 글자는 본문 20px / 월 18px 이상으로 키운다. */

.timeline{ max-width:940px; margin:0 auto; }

.timeline-year{
	background:var(--surface);
	border:1px solid var(--line);
	border-left:6px solid var(--brand);
	border-radius:var(--radius);
	box-shadow:var(--shadow-1);
	padding:26px 32px;
	margin-bottom:22px;
	display:flex;
	gap:34px;
	align-items:flex-start;
}
.timeline-year-label{
	flex:0 0 120px;
	font-size:38px;
	font-weight:800;
	line-height:1.15;
	color:var(--brand-700);
	letter-spacing:-.02em;
	font-variant-numeric:tabular-nums;
	padding-top:2px;
}

.timeline-list{ list-style:none; margin:0; padding:0; flex:1 1 auto; }
.timeline-list li{
	display:flex;
	gap:16px;
	align-items:flex-start;
	padding:12px 0;
	margin:0;
	border-top:1px solid var(--line-soft);
}
.timeline-list li:first-child{ border-top:0; padding-top:0; }
.timeline-list li:last-child{ padding-bottom:0; }

/* 월 — 알약 배지로 또렷하게 */
.timeline-month{
	flex:0 0 auto;
	min-width:62px;
	text-align:center;
	font-size:17px;
	font-weight:700;
	line-height:1.4;
	color:var(--brand-900);
	background:var(--brand-050);
	border-radius:999px;
	padding:5px 12px;
	font-variant-numeric:tabular-nums;
	margin-top:2px;
}
.timeline-text{
	flex:1 1 auto;
	font-size:var(--fs-body);
	line-height:1.6;
	color:var(--ink-body);
	font-weight:500;
	word-break:keep-all;
}
.timeline-note{
	display:block;
	margin-top:5px;
	font-size:var(--fs-small);
	font-weight:400;
	color:var(--cite);
	line-height:1.5;
}

@media (max-width:767px){
	.timeline-year{
		display:block;
		padding:22px 20px;
		border-left-width:5px;
		margin-bottom:18px;
	}
	.timeline-year-label{
		font-size:32px;
		margin-bottom:14px;
		padding-bottom:12px;
		border-bottom:2px solid var(--brand-050);
	}
	.timeline-list li{ gap:12px; padding:11px 0; }
	.timeline-month{ min-width:56px; font-size:16px; padding:4px 10px; }
}

/* ── 채용 (careers.php) ───────────────────────────
   기존 직군 카드는 href 없는 <a> 라 눌러도 아무 일이 없었다.
   카드로만 두고, 자격 요건이 제목 아래에서 또렷이 읽히게 한다. */

.job-card .h5{
	font-size:22px;
	font-weight:700;
	color:var(--brand-900);
	line-height:1.4;
	text-transform:none;
}
.job-req{
	display:block;
	margin-top:6px;
	font-size:var(--fs-table);
	color:var(--ink-muted);
	line-height:1.6;
	word-break:keep-all;
}

/* 근무 조건 · 복리후생 목록 */
.benefit-list{
	list-style:none;
	margin:16px 0 0;
	padding:0;
}
.benefit-list li{
	position:relative;
	padding:9px 0 9px 26px;
	font-size:var(--fs-table);
	line-height:1.6;
	color:var(--ink-body);
	border-top:1px solid var(--line-soft);
	word-break:keep-all;
}
.benefit-list li:first-child{ border-top:0; }
.benefit-list li:before{
	content:"";
	position:absolute;
	left:4px; top:19px;
	width:7px; height:7px;
	border-radius:50%;
	background:var(--brand-300);
}

/* ── 연락처 (contacts.php) ────────────────────────
   전화·이메일·팩스를 큰 타일로 세워 첫 화면에서 바로 잡히게 한다. */

.lead-sub{
	margin-top:18px;
	font-size:var(--fs-table);
	line-height:1.7;
	color:var(--ink-muted);
	word-break:keep-all;
}

.contact-tiles{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:22px;
	margin-top:38px;
}
.contact-tile{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow-1);
	padding:32px 24px 28px;
	text-decoration:none !important;
	transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.contact-tile:hover,
a.contact-tile:focus{
	border-color:var(--brand-300);
	box-shadow:var(--shadow-2);
	transform:translateY(-2px);
}
.ct-icon{
	width:60px; height:60px;
	border-radius:50%;
	background:var(--brand-050);
	color:var(--brand);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:24px;
	margin-bottom:16px;
}
.ct-label{
	font-size:var(--fs-small);
	font-weight:700;
	color:var(--ink-muted);
	letter-spacing:.02em;
}
.ct-value{
	display:block;
	margin-top:6px;
	font-size:26px;
	font-weight:800;
	line-height:1.3;
	color:var(--brand-900);
	word-break:break-all;
}
a.contact-tile:hover .ct-value{ color:var(--brand-700); }
.ct-note{
	margin-top:8px;
	font-size:var(--fs-small);
	color:var(--ink-muted);
}

@media (max-width:991px){
	.contact-tiles{ grid-template-columns:1fr 1fr; }
	.ct-value{ font-size:22px; }
}
@media (max-width:575px){
	.contact-tiles{ grid-template-columns:1fr; gap:16px; margin-top:36px; }
	.contact-tile{ padding:26px 20px 24px; }
}

/* Seetrol 브랜드 로고 — 실제 930x537 인데 컨테이너 폭까지 늘어나 확대된다 */
.shell img[src*="seetrollogo"]{
	max-width:420px;
	width:100%;
	height:auto;
	margin:0 auto;
	display:block;
}
@media (max-width:575px){
	.shell img[src*="seetrollogo"]{ max-width:280px; }
}

/* ── 사업 영역 카드 (about.php — 우리가 해온 일) ──
   실적 건수를 앞세워 "무엇을 얼마나 해왔는가"가 먼저 읽히게 한다. */

.work-cards{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:20px;
	margin:32px 0 0;
	text-align:left;
}
.work-card{
	display:flex;
	flex-direction:column;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow-1);
	padding:26px 26px 24px;
	transition:border-color .18s ease, box-shadow .18s ease;
}
.work-card:hover{ border-color:var(--brand-300); box-shadow:var(--shadow-2); }
.wc-name{
	margin-top:12px;
	font-size:20px;
	font-weight:700;
	line-height:1.4;
	color:var(--ink);
	word-break:keep-all;
}
.wc-desc{
	margin-top:8px;
	font-size:var(--fs-small);
	line-height:1.6;
	color:var(--ink-muted);
	word-break:keep-all;
}

@media (max-width:991px){
	.work-cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width:575px){
	.work-cards{ grid-template-columns:1fr; gap:16px; }
}

/* ── 번호 배지 ────────────────────────────────── */

.num, .num2, .num3, .num4, .num5{
	font-family:'Pretendard', sans-serif;
	font-variant-numeric:tabular-nums;
	font-size:24px;
	font-weight:800;
	width:52px;
	height:52px;
	line-height:32px;
	border-radius:14px;
	padding:10px 5px;
	box-shadow:var(--shadow-1);
}
.num{ background:var(--brand); }
.list-index-counter.h2{
	font-family:'Pretendard', sans-serif;
	font-variant-numeric:tabular-nums;
	background:var(--brand);
	font-size:22px;
	font-weight:800;
	padding:6px 12px;
	border-radius:12px;
}

/* ── 히어로 슬라이드 ──────────────────────────── */

.swiper-slide{
	position:relative;
	text-shadow:none;
}
.swiper-slide:after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(15,24,22,.30) 0%, rgba(15,24,22,.62) 100%);
	z-index:0;
}
/* 오버레이 위로 올린다. .main 은 position:absolute 로 배치되어 있으므로
   position 을 건드리면 레이아웃이 무너진다 — z-index 만 준다. */
.swiper-slide > *:not(.main){ position:relative; z-index:1; }
.swiper-slide > .main{ z-index:1; }
/* .main 은 top:200px 고정이라 500px 슬라이드에서 300px 만 쓸 수 있다.
   글자를 키우면 내용이 넘쳐 p 와 버튼이 잘린다.
   위치를 세로 가운데로 바꿔 내용 높이에 관계없이 담기도록 한다. */
.swiper-slide .main{
	top:50%;
	transform:translateY(-50%);
	padding:24px 0 26px;
	/* 기존 rgba(0,0,0,.8) 은 배경 사진을 거의 덮었다.
	   투명도를 높이고, 글자는 그림자로 대비를 보완한다. */
	background:rgba(0,0,0,.42);
}
.swiper-slide .main h1,
.swiper-slide .main h2,
.swiper-slide .main p{
	text-shadow:0 2px 6px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.5);
}
/* 절차 페이지의 단계 사이 화살표 — 원래 크기 때문에 h1 을 썼으나
   글자가 없는 제목이라 장식용 div 로 바꿨다. 크기는 그대로 유지한다. */
.step-arrow{ font-size:36px; }
@media (min-width:768px){ .step-arrow{ font-size:60px; line-height:.6; } }

/* index.php 슬라이드는 3장인데 h1 은 문서당 하나여야 하므로
   2·3번 슬라이드는 h2 다. 보이는 모습은 h1 과 같아야 한다. */
.swiper-slide h1,
.swiper-slide h2{
	color:#fff;
	font-size:clamp(28px, 3.4vw, 42px);
	font-weight:800;
	line-height:1.3;
	letter-spacing:-.01em;
	margin:0;
}
.swiper-slide .main p{
	color:#f1f5f4;
	font-size:clamp(17px, 1.5vw, 20px);
	line-height:1.55;
	margin:12px 0 0 !important;
	padding:0 !important;
}
.swiper-slide .main a{
	display:inline-block;
	margin-top:18px;
	background:var(--brand);
	color:#fff;
	font-size:17px;
	font-weight:700;
	padding:11px 26px;
	border-radius:999px;
	text-decoration:none;
	box-shadow:var(--shadow-1);
	transition:background .18s ease;
}
.swiper-slide .main a:hover{ background:var(--brand-700); color:#fff; }

@media (max-width:767px){
	.swiper-slide .main{ padding:18px 0 20px; }
	.swiper-slide .main p{ margin-top:10px !important; }
	.swiper-slide .main a{ margin-top:14px; padding:10px 22px; font-size:16px; }
}

/* ── 메인 사업영역 카드 (index) ───────────────── */

.page .container .card .face.face1{ background:var(--brand); border-radius:var(--radius) var(--radius) 0 0; }
.page .container .card:hover .face.face1{ background:var(--brand-700); }
.page .container .card .face.face1 .content h3{ font-size:23px; line-height:1.45; font-weight:700; }
.page .container .card .face.face2,
.page .container .card .face.face3{
	border-radius:0 0 var(--radius) var(--radius);
	box-shadow:var(--shadow-1);
	border:1px solid var(--line);
	border-top:0;
}
.page .container .card .face.face2 .content p,
.page .container .card .face.face3 .content p{
	font-size:17px;
	line-height:1.7;
	color:var(--ink-body);
}
/* main.css 의 min-height:220px 때문에 문구가 짧아도 220px 를 차지해
   아래 링크가 멀리 밀려난다. 실제 문구 길이에 맞춰 줄인다. */
.page .container .card .face.face2 .content p,
.page .container .card .face.face3 .content p{
	min-height:170px;
	padding:18px 20px 0;
}
.page .container .card .face.face2 .content a,
.page .container .card .face.face3 .content a{
	background:var(--brand);
	font-size:17px;
	font-weight:700;
	padding:11px 22px;
	border-radius:999px;
	margin-top:6px;
}
.page .container .card .face.face2 .content a:hover,
.page .container .card .face.face3 .content a:hover{ background:var(--brand-700); }

/* ── 증서 카드 ────────────────────────────────── */

.license-title{ font-size:19px; color:var(--ink); }
.license-desc{ font-size:16px; color:var(--ink-muted); }

/* ── 절차 카드 설명문 ─────────────────────────── */

.process-desc{ font-size:17px; color:var(--ink-muted); line-height:1.65; }
.phase-head{ font-size:18px; color:var(--brand-900); font-weight:700; }

/* ── 반응형 ───────────────────────────────────── */

@media (max-width:991px){
	:root{ --fs-body:19px; --fs-table:17px; }
	h6.mediterrain{ font-size:23px; }
	.box{ padding:28px 24px; }
	.post-vacancy{ padding:24px 22px; }
}
@media (max-width:767px){
	:root{ --fs-body:18px; --fs-table:16px; --fs-small:15px; }
	.default-table th,
	.default-table td{ padding:13px 12px; }
	.post-vacancy.question{ padding:26px 22px; text-align:center; }
	.name{ display:block; margin-left:0; margin-top:12px; min-width:0; }
	.swiper{ height:400px; }

	/* 설비 표의 첫 칸이 22% 라 좁은 화면에서 글자가 뭉개진다 */
	.facility td:first-child{ width:34%; }
	.inspection td:first-child{ width:34%; }
	.panalty td:first-child{ width:74%; }

	/* 버튼은 화면 폭에 맞춰 늘어나되 두 개까지는 한 줄에 */
	.btn-more{ flex:1 1 auto; justify-content:center; }
}

@media (max-width:479px){
	/* 히어로 문구 상자 — layout.css 의 left:10px + width:100% 조합이 넘친다 */
	.main > div{ left:0; width:100%; padding:0 16px; }
	.main{ left:5%; width:90%; }
	.swiper{ height:360px; }

	/* 지표 카드가 2열이면 한 칸이 110px 남짓이라 글자가 세로로 길어진다 */
	.range > .cell-xs-6{ flex-basis:100%; max-width:100%; }

	/* 전화번호 줄바꿈 허용 */
	.post-vacancy.question .tel{ display:block; }
	.btn-more{ width:100%; }
}

/* ── 가로 넘침 방지 (모든 화면) ───────────────── */

img,
video,
iframe{ max-width:100%; height:auto; }

/* 긴 영문(예: Facility Management System)이 좁은 칸을 밀어내지 않도록.
   한글은 keep-all 로 어절 단위 줄바꿈을 유지한다. */
.default-table th,
.default-table td{ word-break:keep-all; overflow-wrap:anywhere; }
.shell p,
.shell li{ overflow-wrap:break-word; }

@media (prefers-reduced-motion:reduce){
	.post-vacancy,
	.swiper-slide .main a{ transition:none !important; }
	.post-vacancy:hover{ transform:none; }
}