/* iNSOFT insoft_home 공통 스타일 - 실제 사이트 CSS 실측값 반영 - by smchon / 2026.09.18 */

:root {
	/* --header-bg/--header-fg는 헤더 전용이 아니라 .detail-hero(solution-, service- 계열
	   상세페이지 서브비주얼) 등 "어두운 섹션" 배경에도 재사용되고 있어서 값을 그대로
	   둔다 - 데스크탑 헤더의 새 기본색(흰색/투명 전환)은 아래 --header-solid-*로 따로
	   분리했다. 실측(원본): 데스크탑 헤더 기본값은 검정이 아니라 "흰색 고정" 또는
	   "투명(홈/Solution 계열 히어로 위)" 둘 중 하나이고, 검정 고정은 원본 어디에도
	   없었다(사용자 지적으로 재검증 후 확인). ── by smchon / 2026.09.24 */
	--header-bg: #111111;
	--header-fg: #ffffff;
	--header-fg-inverted: #111111;
	/* 데스크탑 헤더의 새 기본("흰색 고정") 상태 - Service/Experiences/Reference/
	   About us 등 대부분의 상세페이지가 이 상태이고, 투명 헤더(.site-header--transparent)
	   도 스크롤하거나 메가메뉴에 hover하면 결국 이 색으로 수렴한다. ── by smchon / 2026.09.24 */
	--header-solid-bg: #ffffff;
	--header-solid-fg: #111111;
	--logo-accent: #2f8fff;
	--accent-from: #4d8ffb;
	--accent-to: #c834ff;
	--hover-blue: #0099db;
	--hover-blue-light: #4db8e8;
	--footer-bg: #333333;
	--footer-fg: #888888;
	--footer-fg-strong: #ffffff;
	--mobile-nav-bg: #14335c;
	--mobile-nav-border: #41658e;
	--menu-transition-duration: 0.3s;
	/* 투명 헤더가 사진 위에 겹쳐지는 페이지(홈페이지 히어로, about-us 히어로 등)에서
	   "헤더를 뺀 나머지 영역 기준 세로 중앙정렬"을 계산할 때 재사용 - 767px 이하에서
	   헤더 자체 높이가 80px로 바뀌므로 이 변수도 같이 재정의된다(아래 미디어쿼리).
	   ── by smchon / 2026.09.24 */
	--header-height: 100px;

	/* ── [신규] 반응형 타이포그래피 변수 ──────────────────────────────────
	   원본(Elementor)은 위젯마다 데스크탑/모바일 폰트 크기를 따로 입력해서 화면폭이
	   줄어드는 동안엔 크기가 그대로 있다가 767px 기준선을 넘는 순간 갑자기 작은
	   값으로 바뀐다(실측 확인: h1이 56px→27px로 순간 전환, 그 사이엔 계속 56px).
	   우리는 위젯마다 값을 따로 넣는 대신, 여기 변수 하나만 두고 아래
	   @media (max-width:767px)에서 이 변수들만 다시 정의한다 — 그러면 이 변수를
	   쓰는 모든 섹션(.section-title/.section-lead는 Industry/Tech&Business/Cloud/
	   Observability/AX Service가 전부 공유)에 한 번에 반영되고, 동작 방식도 원본과
	   동일하게 "줄어드는 동안은 그대로, 기준선에서 한 번에 전환"이 된다.
	   by smchon / 2026.09.19 */
	--font-hero-title: 56px;
	--font-hero-title-lh: 68px;
	--font-hero-subtitle: 18px;
	--font-section-title: 42px; /* 40→42, 실측(원본 Industry/Observability 42px) 반영 - 아래
	   --font-cloud-title 주석에 이미 42px로 실측됐다고 적혀있었는데 정작 이 값 자체는
	   40px로 남아있던 걸 뒤늦게 발견해 바로잡음. .... by smchon / 2026.09.24 */
	--font-section-lead: 20px; /* 18→20, 실측(원본 20px) 반영 .... by smchon / 2026.09.21 */
	--font-intro-title: 32px;
	--font-intro-lead: 20px; /* 17→20, 실측(원본 20px) 반영 .... by smchon / 2026.09.21 */
	--font-card-title: 18px;
	--font-card-text: 14px;
	--font-cloud-title: 56px; /* Cloud 제목 전용 - 실측 결과 Industry/Observability(42px)와
	   달리 원본이 56px라 공용 --font-section-title과 분리 .... by smchon / 2026.09.23 */
}

* { box-sizing: border-box; }

/* 실측: 원본은 텍스트 드래그 선택 시 브라우저 기본 파란색이 아니라 어두운 회색 계열로
   반전됨(전체 페이지 공통) ── [신규] by smchon / 2026.09.21 */
::selection { color: #fff; background: #333; }

/* 메가메뉴가 100vw로 펼쳐질 때 생기는 가짜 가로 스크롤 방지(보험).
   overflow-x:hidden 은 html/body 를 스크롤 컨테이너로 만들어서 그 안의 position:sticky(Solution
   소메뉴 탭바)가 동작하지 않는다. clip 은 같은 방식으로 잘라내되 스크롤 컨테이너를 만들지 않아
   sticky 가 살아난다. 앞줄 hidden 은 clip 미지원 구형 브라우저용 대체값.
   ── by smchon / 2026.10.08 */
html, body { overflow-x: hidden; overflow-x: clip; }
body {
	/* 100vw는 세로 스크롤바 폭까지 포함하지만 실제 보이는 영역(100%)은 그만큼 좁다.
	   이 차이(스크롤바 폭)를 --scrollbar-w로 구해서 메가메뉴 100vw 계산에서 빼줘야
	   화면 오른쪽으로 그만큼 삐져나가 생기는 진짜 가로 스크롤을 근본적으로 막는다.
	   by smchon / 2026.09.18 */
	--scrollbar-w: calc(100vw - 100%);
	margin: 0;
	font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	color: #1a1a1a;
	background: #ffffff;
}

a { color: inherit; text-decoration: none; }

.site-main { min-height: 40vh; }

/* ---------- 헤더 ----------
   실측(원본, 9개 페이지 교차 확인): 데스크탑 헤더의 "기본" 상태는 검정이 아니라
   흰색 고정이고, 검정은 원본 어디에도 없다. 홈페이지/Solution 계열처럼 히어로
   위에 얹히는 페이지만 .site-header--transparent를 따로 붙여 "투명 시작 →
   스크롤/hover 시 이 흰색으로 수렴"하는 예외를 만든다. 모바일은 이미 원본과
   동일(검정 고정)하게 동작 중이라 아래 @media(max-width:1024px) 블록에서 강제로
   되돌린다. ── by smchon / 2026.09.24 */
.site-header {
	background: var(--header-solid-bg);
	color: var(--header-solid-fg);
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 0.8px solid rgba(238,238,238,0.3);
	/* 실측(원본): 헤더가 나타날 때(스크롤 위로) 쓰는 transition이 top 0.6s - 배경/글자색
	   전환(메가메뉴 hover 등 기존 --menu-transition-duration=0.3s 용도)과는 별개로,
	   숨김/재등장(transform)만 원본과 같은 0.6s로 더 느리게 따로 준다(사용자 지적:
	   "천천히 스르륵 내려오는데 우리는 빠르다"). ── by smchon / 2026.09.24 */
	transition: background-color var(--menu-transition-duration) ease,
		color var(--menu-transition-duration) ease,
		transform 0.6s ease;
}

.site-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 25px;
	gap: 20px;
	position: relative;
}

/* 실제 사이트 자체가 이 요소에 서로 다른 두 CSS 규칙(파일+사이즈 방식이 다름)이 충돌해서
   캐시 타이밍에 따라 크기가 오락가락하는 상태라, 실측을 계속 쫓는 대신 자르거나
   축소하지 않고 원본(140x35)을 그대로 보여주는 가장 단순하고 확실한 방식으로 고정한다. */
.site-logo {
	position: relative;
	display: inline-block;
	width: 140px;
	height: 35px;
	margin-left: -8px; /* 오른쪽(지구본)은 그대로 두고 로고만 왼쪽으로 살짝 내어쓰기 */
}
.site-logo__img {
	position: absolute;
	top: 0; left: 0;
	width: 140px;
	height: 35px;
	display: block;
	transition: opacity var(--menu-transition-duration) ease;
}
/* 헤더 기본이 흰색이 됐으니 로고도 기본은 어두운(dark) 버전이 보이고, 밝은(light)
   버전은 숨긴다 - .site-header--transparent가 히어로 위 "투명" 시작 상태에서만
   반대로 뒤집는다(아래 .site-header--transparent 규칙). ── by smchon / 2026.09.24 */
.site-logo__img--light { opacity: 0; }
.site-logo__img--dark { opacity: 1; }
/* 데스크탑 전용 hover 반전 효과라 1025px 이상에서만 걸리게 감쌈 - 안 그러면 모바일에서
   대메뉴를 탭할 때 생기는 합성 :hover 상태 때문에 로고가 잘못 뒤집히는 버그가 생긴다
   (아래 헤더 전체 반전 블록에서 이미 겪은 것과 동일한 패턴). ── by smchon / 2026.09.24 */
@media (min-width: 1025px) {
	.site-header:has(.site-nav__item--menu:hover) .site-logo__img--light { opacity: 0; }
	.site-header:has(.site-nav__item--menu:hover) .site-logo__img--dark { opacity: 1; }
}

.site-header__globe img {
	width: 24px;
	height: 24px;
	display: block;
	/* 아이콘 원본 파일(vuesax-bold-global.svg) 자체가 fill:#fff(흰색)로 그려져
	   있어서, 흰색 배경이 기본이 된 지금은 filter로 어둡게(회색) 눌러줘야 보인다 -
	   .site-header--transparent가 투명 시작 상태에서만 filter:none으로 되돌려
	   원래 흰색 그대로 보이게 한다. ── by smchon / 2026.09.24 */
	filter: brightness(0) invert(0.45);
	transition: filter var(--menu-transition-duration) ease;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 35px;
	height: 28px;
	background: none;
	border: none;
	cursor: pointer;
	margin-left: auto;
}

.nav-toggle span {
	display: block;
	width: 100%;
	height: 4px;
	background: #fff;
	border-radius: 1px;
}

.site-nav__mobile-top,
.nav-close,
.nav-overlay { display: none; }

.site-nav {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.site-nav__list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
}

/* align-items:center로 되돌림 - .site-nav__label에 height:100%를 명시해뒀기 때문에
   center든 stretch든 라벨 자신은 어차피 li 높이를 꽉 채워서 "하이라이트 영역 전체가
   클릭 영역" 효과에는 영향이 없다. 반면 .ailink-btn(고정 height:40px)이나
   .site-header__globe처럼 높이를 명시한 자식은 align-items:stretch일 때 "늘어나진
   않지만 정렬 기준이 flex-start로 바뀌는" CSS 스펙 동작 때문에, li 위쪽(top)에
   붙어버려 AI Link 필/지구본이 다른 메뉴보다 위쪽에 떠 보이는 버그가 있었음(사용자
   지적: "웹버전의 AI Link 메뉴와 지구본 위치가 이상해졌다"). ── by smchon / 2026.09.24 */
.site-nav__item { position: relative; height: 100px; display: flex; align-items: center; }
/* hover 반전 영역이 빈틈없이 이어지도록: 각 --menu 항목에 좌우 22px(=44px 간격의 절반)씩
   padding으로 hit-area를 넓히고, 시각적 위치는 padding만으로 만든다(margin 없음).
   AI Link~Solution 사이 간격도 전부 Solution의 반전 영역에 포함시킨다(요청사항). */
/* 좌우 22px 패딩을 li가 아니라 라벨 쪽으로 옮김(box-sizing:border-box라 시각적
   위치는 동일) - li에 패딩을 주면 그 패딩 영역엔 label(cursor:pointer가 걸린
   실제 요소)이 없어서 정작 하이라이트되는 li 박스 안인데도 커서가 화살표로
   남는 죽은 영역이 생겼음(사용자 지적: "하이라이트 영역 전체가 링크가 아니다").
   ── by smchon / 2026.09.24 */
.site-nav__item--globe { padding-left: 22px; }
/* 메가메뉴 아이템은 자체 positioning context를 만들지 않고, .mega-panel이
   site-header__inner(전체폭, 이미 position:relative) 기준으로 붙게 한다 —
   그래야 패널이 로고 아래에서 시작해 헤더 전체 폭으로 펼쳐진다. */
.has-mega { position: static; }

.site-nav__label {
	background: none;
	border: none;
	/* 하드코딩된 흰색 대신 .site-header의 color를 그대로 물려받게 함 - 이러면
	   .site-header(흰 배경/어두운 글자)와 .site-header--transparent(투명/흰 글자)를
	   오갈 때 이 규칙을 따로 안 건드려도 자동으로 맞는 색이 된다. ── by smchon / 2026.09.24 */
	color: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	/* 텍스트 글자 상자 크기만큼만 커서/클릭 영역이 잡히던 문제 수정: label이
	   부모 li(.site-nav__item, height:100%로 stretch됨) 전체를 채우도록 하고,
	   글자는 flex로 가운데 정렬 - 이러면 원본처럼 하이라이트되는 영역 전체가
	   그대로 클릭/커서 영역이 된다. 좌우 22px 패딩은 원래 li(.site-nav__item--menu)가
	   갖고 있던 값을 그대로 옮겨온 것(시각적 텍스트 위치는 변화 없음).
	   ── by smchon / 2026.09.24 */
	padding: 8px 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	transition: color var(--menu-transition-duration) ease;
	/* 브라우저 폭을 서서히 줄이면 1024px(햄버거 전환 기준선)에 닿기 직전 구간에서
	   li가 flex-shrink로 계속 줄어들다가 "About us"처럼 긴 라벨의 글자가 두 줄로
	   개행되는 순간이 있었다(사용자 캡처로 확인) - nowrap으로 줄바꿈 자체를 막아서
	   li가 글자 폭 밑으로는 더 안 줄어들게(min-content가 글자 전체 폭이 되어) 한다.
	   ── by smchon / 2026.09.24 */
	white-space: nowrap;
}

.site-nav__item:hover .site-nav__label,
.site-nav__item.active .site-nav__label { color: var(--hover-blue-light); }

/* ---------- 대메뉴 영역 hover 시 헤더 전체 반전 (Solution~About us 영역에서만) ----------
   데스크탑 상단 네비게이션 전용 효과라 1025px 이상에서만 걸리게 감쌈 - 모바일 슬라이드
   패널은 완전히 다른 UI(어두운 배경 아코디언)라 이 반전 효과가 들어오면 안 되는데,
   :has()가 media query 없이 걸려 있어서 모바일에서 항목을 탭(hover 유사 상태)하면
   패널 전체가 흰 배경으로 뒤집히고 글자가 검게 보이는 버그가 있었음(사용자가 아코디언
   항목을 눌러볼 때 발견). ── by smchon / 2026.09.24 */
@media (min-width: 1025px) {
	.site-header:has(.site-nav__item--menu:hover) {
		background: #ffffff;
	}
	.site-header:has(.site-nav__item--menu:hover) .site-nav__item--menu .site-nav__label {
		color: var(--header-fg-inverted);
	}
	.site-header:has(.site-nav__item--menu:hover) .site-nav__item--menu:hover .site-nav__label {
		color: var(--hover-blue);
	}
	.site-header:has(.site-nav__item--menu:hover) .site-logo__rest {
		color: var(--header-fg-inverted);
	}
	.site-header:has(.site-nav__item--menu:hover) .site-header__globe img {
		/* 원본은 필터 없이 별도의 회색 지구본 이미지를 씀 — 우리는 파일이 하나뿐이라
		   filter로 밝은 회색 근사치를 낸다 (요청하신 옅은 회색 톤) */
		filter: brightness(0) invert(0.45);
	}
}

.mobile-accordion-toggle { display: none; }

/* ---------- AI Link 필 버튼 ---------- */
.ailink-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 200px;
	height: 40px;
	background: linear-gradient(to right, var(--accent-from), var(--accent-to));
	color: #fff;
	border: none;
	border-radius: 50px;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
}
.ailink-btn__icon { width: 16px; height: 16px; }
/* 실측: 화살표 아이콘 20x20px. down/up 두 개의 별도 이미지를 스왑하는 방식(원본과 동일) */
.ailink-btn__chevron { width: 20px; height: 20px; }
.ailink-btn__chevron--up { display: none; }
.site-nav__item--ailink:hover .ailink-btn__chevron--down,
.site-nav__item--ailink.is-open .ailink-btn__chevron--down { display: none; }
.site-nav__item--ailink:hover .ailink-btn__chevron--up,
.site-nav__item--ailink.is-open .ailink-btn__chevron--up { display: inline-block; }

.dropdown--ailink {
	width: 200px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 3px 6px rgba(0,0,0,.5);
	/* 실측: 드롭다운이 li 전체(100px) 기준이 아니라 AI Link 버튼(40px, 세로 중앙정렬) 바로
	   아래(버튼 bottom + 5px)에서 시작한다. li는 100px 높이라 top:100%로는 안 맞아서
	   버튼의 실제 위치(li 안에서 top 30~70px)를 기준으로 고정값을 사용한다. */
	right: 0;
	left: auto;
	padding: 0;
}
/* 이중 클래스로 명시도를 높여서 아래의 범용 .dropdown{top:100%} 규칙에 덮어써지지 않게 함 */
.dropdown.dropdown--ailink { top: 75px; }
.dropdown--ailink li a {
	color: #333;
	font-size: 15px;
	padding: 6px 10px;
	justify-content: space-between;
	transition: color var(--menu-transition-duration) ease;
}
.dropdown--ailink li a:hover { color: var(--hover-blue); }
/* 정렬 기준: 4개 항목 모두 동일하게 margin/width를 줘야 시작위치가 맞음 (마지막 항목만 빠지면 어긋남).
   위/아래 여백은 .dropdown의 기본 padding:10px 0 만 쓰고 첫 항목에 별도 padding-top을
   추가하지 않아야 위/아래가 대칭이 된다. 좌우 여백(li margin + a padding)을 줄여서
   긴 메뉴명이 들어와도 여유있게 가운데 공간을 넓게 쓴다. */
.dropdown--ailink li { margin: 0 6px; width: calc(100% - 12px); }
.dropdown--ailink li:not(:last-child) { border-bottom: 1px solid #f2f2f2; }
.dropdown--ailink li a img { width: 20px; height: 20px; }

.dropdown {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	top: 100%;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease;
}
.site-nav__item:hover .dropdown,
.site-nav__item.is-open .dropdown,
.site-nav__item--ailink:hover .dropdown,
.site-nav__item--ailink.is-open .dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.dropdown li a {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

/* ---------- 메가메뉴 (Solution/Service/About us) ---------- */
/* 원본은 화면폭마다 다른 고정 px(left:-721px 등)로 얼려놨던 부분을 대체:
   left:50%+translateX(-50%)+width:100vw로 "항상 브라우저 전체 폭"에 펼치면서도
   중앙정렬을 유지한다. 안쪽 좌우 여백은 site-header__inner(max-width:1280px)의
   여백과 맞춰야 로고/메뉴와 같은 줄에 정렬되므로, --side-offset 공식 하나로
   계산한다 (항목마다 다른 매직넘버 없음 — 1280px보다 넓은 화면에서만 의미 있고,
   그보다 좁은 데스크탑 폭에서는 0으로 자연스럽게 줄어든다). */
.mega-panel {
	/* max(0px, ...)로 하한을 묶지 않으면 1280px보다 좁을 때 음수가 되어(주석의 의도와
	   달리 0에서 멈추지 않음) 장식 이미지가 패널 밖으로 밀려나 가로 스크롤이 생겼다.
	   .... by smchon / 2026.09.18 */
	--side-offset: max(0px, calc((100vw - var(--scrollbar-w) - 1280px) / 2));
	position: absolute;
	/* 실측(원본 .menu-bg): 레이어는 헤더 아래 선 위를 1px 덮으면서 시작하고(top 99 / 헤더 101),
	   위쪽에 1px #dedede 선이 있으며 그림자는 연한 0 8px 8px rgba(0,0,0,.08)이다.
	   예전엔 선 없이 진한 그림자(0 16px 32px .25)라 헤더 아래가 "음영진 이상한 선"으로 보였다.
	   top 을 선 두께만큼 올리고 border-top 을 더해서 안쪽 내용 위치는 그대로 유지한다.
	   ── by smchon / 2026.10.08 */
	top: calc(100% - 1px);
	border-top: 1px solid #dedede;
	left: 50%;
	width: calc(100vw - var(--scrollbar-w)); /* 스크롤바 폭 보정 .... by smchon / 2026.09.18 */
	transform: translateX(-50%) translateY(6px);
	background: #fff;
	box-shadow: 0 8px 8px rgba(0,0,0,.08);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, transform .15s ease;
	z-index: 200;
}
.has-mega:hover .mega-panel,
.has-mega.is-open .mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
/* 제목|간격|소메뉴 를 나란히 배치(세로로 쌓지 않음). 왼쪽 여백은 로고 시작점과 거의
   맞도록 계산하고, 대표이미지는 흐름에서 빼서(position:absolute) 항상 같은 크기/위치에
   고정하고 소스 이미지만 바뀌게 한다. */
.mega-panel__inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 64px;
	/* 왼쪽 여백은 헤더 padding(25px)과 무관하게 고정값으로 둔다 — 로고 위치는
	   .site-logo의 margin-left로 별도 조정하므로 여기 값과 서로 얽히지 않게 분리. */
	padding: 64px calc(var(--side-offset) + 320px) 64px calc(var(--side-offset) + 31px);
	min-height: 420px;
}
.mega-panel__title {
	flex: 0 0 auto;
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	color: #1a1311;
	letter-spacing: -0.9px;
}
.mega-panel__list {
	list-style: none;
	margin: 16px 0 0; /* 대메뉴명보다 아주 살짝만 더 낮게 */
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 25px;
	min-width: 0;
	flex: 0 0 auto;
}
.mega-panel__list li { min-width: 0; }
.mega-panel__list a { display: inline-block; max-width: 100%; line-height: 1; }
.mega-panel__list a {
	font-size: 18px;
	font-weight: 500;
	color: #1a1311;
	transition: color var(--menu-transition-duration) ease;
}
.mega-panel__list a:hover { color: var(--hover-blue); }
.mega-panel__deco {
	position: absolute;
	top: 64px; /* 대메뉴명(title)의 상단 위치와 동일하게 맞춤 */
	right: calc(var(--side-offset) + 64px);
	/* 실측(자로 잰 값): 85mm x 75mm, 정사각형이 아니라 가로가 더 긴 직사각형 */
	width: 313px;
	height: 276px;
	object-fit: cover;
	/* 대각선으로 두 모서리만 둥글게(좌상/우하는 직각, 우상/좌하는 크게 라운드) */
	border-radius: 0 40px 0 40px;
}

/* ---------- 푸터 ---------- */
/* 실측: 배경 #333, 기본 텍스트 #888, 회사소개만 흰색. 회사명 18px, 나머지 14px */
.site-footer {
	background: var(--footer-bg);
	color: var(--footer-fg);
	margin-top: 60px;
	/* 맨 아래 큰 그림이 fadeInUp(아래→위)으로 올라올 때 푸터를 덮지 않고 푸터 뒤에 가려진 채 나타나게 -
	   transform 이 걸린 그림은 일반 요소보다 위에 그려지므로 푸터를 한 단계 위 층에 둔다(원본과 동일).
	   by smchon / 2026.10.09 */
	position: relative;
	z-index: 1;
}
.site-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	/* 실측: 배경 위쪽 끝~로고 40px, 로고~구분선~회사정보 약 62px(대칭 분배), Copyright~배경 아래끝 40px */
	padding: 40px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0;
	justify-content: space-between;
}
.site-footer__top {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #dedede22;
}
.site-footer__logo img { height: 27px; width: auto; display: block; }
.site-footer__side a {
	font-size: 15px;
	font-weight: 600;
	color: var(--footer-fg-strong);
}
.site-footer__side a:hover { text-decoration: none; opacity: .85; }
.site-footer__main { display: flex; flex-direction: column; width: 100%; }
.site-footer__meta p { margin: 0 0 6px; font-size: 14px; line-height: 25.2px; color: var(--footer-fg); }
.site-footer__meta p:last-child { margin-bottom: 0; }
/* 실측: 회사명 18px/weight 400 (Pretendard 웹폰트 미로딩으로 대체폰트 렌더링되어 커보였던 것 —
   폰트 로딩 확인 후 실측값 18px/line-height 26px, 아래 여백 10px로 원복) */
.site-footer__meta p:first-child { font-size: 18px; line-height: 26px; color: var(--footer-fg); margin-bottom: 10px; }
.site-footer__meta a { color: var(--footer-fg); }
.site-footer__meta a:hover { text-decoration: underline; }
/* 대표이사/주소/전화/이메일 - 원본처럼 데스크탑은 구분선과 함께 가로 나열, 모바일은
   flex-direction만 바꿔 한 줄씩 쌓이게(내용 중복이나 별도 마크업 없이 이 4줄 안에서
   전부 해결). ── [신규] by smchon / 2026.09.19 */
.site-footer__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0 21px;
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 25.2px;
	color: var(--footer-fg);
}
.site-footer__field { position: relative; }
.site-footer__field::after {
	content: "";
	position: absolute;
	top: 25%;
	right: -11px;
	width: 1px;
	height: 10px;
	background: rgba(255,255,255,.25);
}
.site-footer__field:last-child::after { display: none; }
.site-footer__field a { color: var(--footer-fg); }
.site-footer__field a:hover { text-decoration: underline; }

/* 맨 위로 스크롤 버튼 - 실측: 40x40 원형, rgba(0,0,0,.4) 배경, 우하단 고정.
   스크롤 100px를 넘으면(nav.js) .is-visible이 붙어 서서히 나타남(원본 OceanWP
   scroll-top.min.js 실측: `window.pageYOffset > 100` - 히어로/섹션 위치와 무관하게
   전 페이지 공통으로 고정 100px 기준). ── [신규] by smchon / 2026.09.19 */
.scroll-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0,0,0,.4);
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease, background-color .3s ease;
	z-index: 100;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; }
/* 실측(원본 #scroll-top:hover): 반투명(rgba(0,0,0,.4))에서 진한 검정(rgba(0,0,0,.8))으로
   전환 ── by smchon / 2026.09.21 */
.scroll-top:hover { background: rgba(0,0,0,.8); }
.scroll-top__arrow {
	display: block;
	width: 9px;
	height: 9px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(-45deg) translate(-1px, 1px);
}

/* ---------- 홈페이지 본문 ---------- */
.section-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section-title { font-size: var(--font-section-title); font-weight: 700; margin: 0 0 16px; color: #1a1a1a; letter-spacing: -1px; }
/* 색상 #555→#111, 실측(원본 rgb(17,17,17)) 반영 - 원본 대비 흐려 보인다는 지적 확인됨
   .... by smchon / 2026.09.21 */
/* margin-bottom 40→60px, 실측(원본 데스크탑 60px) 반영 - 사용자 지적: 리드 문구와
   아래 이미지 사이가 좁아 보임(웹 화면만 해당, 모바일은 아래 1024px 블록에서 별도로
   20px로 줄임 - 원본 모바일 실측값). ── by smchon / 2026.09.23 */
.section-lead { font-size: var(--font-section-lead); color: #111; line-height: 1.6; margin: 0 0 60px; }

/* 히어로 - 높이는 항상 순수 100vh (min/max로 자르지 않음, 원본과 동일하게 창 크기에
   그대로 반응). 헤더가 이 위에 투명하게 겹쳐지므로 헤더 높이만큼 상쇄하지 않고
   맨 위(0)부터 시작한다. */
.hero {
	position: relative;
	height: 100vh;
	overflow: hidden;
	background: #000; /* 실측: 영상 뒤 배경이 순수 검정 */
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .5; /* 실측값 (전에는 .75라 너무 밝았음) */
}
.hero__overlay { position: relative; z-index: 1; text-align: center; color: #fff; padding: 0 16px; }
.hero__title { font-size: var(--font-hero-title); font-weight: 700; line-height: var(--font-hero-title-lh); margin: 0 0 20px; } /* 실측: 제목~설명 간격 20px */
/* 부제목의 opacity 전환은 두 가지 서로 다른 상황에서 쓰이는데, 성격이 완전히 달라서
   분리했다 (2026.09.21):
   1) 최초 페이지 로딩 시 "등장 연출" - 아래 .hero-entrance-play 클래스 + keyframe로 처리.
      제목 슬라이드가 끝나는 시점(1.1s)에 맞춰 나타나야 겹침이 없다 - 이건 지난주에
      여러 차례 조정해서 맞춘 값이라 그대로 유지.
   2) 모바일 <-> 데스크탑 폭을 넘나들 때 숨김/표시 전환 - 아래 기본 transition으로 처리.
      이건 등장 연출과 무관하게 그 자체로 0.4~0.5s 안에 끝나야 자연스럽다(실측 체감 기준).
   이 둘을 하나의 media-query 걸린 animation으로 합쳐놨더니, resize로 breakpoint를
   넘을 때마다 등장 연출이 통째로 재생되면서 최초 로딩 타이밍과 뒤섞여 버그가 났었다 -
   그래서 등장 연출은 JS(nav.js)가 페이지 로딩 시 딱 한 번만 클래스를 붙였다 떼어내는
   방식으로 완전히 분리했다. */
/* 기본 상태를 opacity:1이 아니라 0으로 바꿈(2026.09.24) - 전에는 JS가
   .hero-entrance-play를 붙이기 전까지 잠깐(첫 페인트~JS 실행 사이) 이 기본값
   때문에 부제목이 그대로 보였다가, JS가 애니메이션 클래스를 붙이는 순간
   keyframe의 from(opacity:0)이 both fill-mode로 즉시 적용되면서 갑자기
   사라지고, 1.1s 뒤에야 다시 페이드인되는 "보였다 사라졌다 나타나는" 버그가
   있었음(사용자 지적). 기본값을 0으로 낮춰서 처음부터 안 보이게 하고, 애니메이션
   종료 후에는 별도의 .hero-entrance-done 클래스(단일 클래스라 특이도가 기본
   규칙과 동일 - 아래 767px 모바일 숨김 규칙이 소스 순서상 더 나중이라 그대로
   이김)로 최종 상태(opacity:1)를 유지시킴. ── by smchon / 2026.09.24 */
.hero__subtitle { font-size: var(--font-hero-subtitle); font-weight: 400; line-height: 26px; color: #fff; opacity: 0; margin: 0; transition: opacity .8s ease, visibility .8s ease; } /* 리사이즈 전환용 - .45s의 약 1.78배 .... by smchon / 2026.09.21 */
.hero__subtitle.hero-entrance-play { animation: hero-fade-in 1.1s ease-out 1.1s both; }
.hero-entrance-done { opacity: 1; }

.hero__title { animation: hero-slide-up 1.1s ease-out both; }
@keyframes hero-slide-up {
	/* 100%(자기 높이)에 부제목 한 줄 높이(line-height 26px)만큼 더 내려서 시작.
	   시작 위치가 Scroll 안내의 세로선과 살짝 겹친다는 지적으로 2.5mm만큼
	   덜 내려가게(시작점을 그만큼 높여서) 조정. .... by smchon / 2026.09.24 */
	from { opacity: 0; transform: translateY(calc(100% + 26px - 2.5mm)); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* 스크롤 안내: 세로선 - Scroll 글자 - 마우스 모양(알약) 안에서 점이 위아래로 움직임 */
.hero__scroll {
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 14px;
	text-align: center;
	opacity: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
/* 원본처럼 세로선은 위젯 흐름에서 빼서(position:absolute) 위쪽에 띄운다 —
   flex 흐름에 넣으면 위젯 전체 높이가 커져서 간격이 좁아 보이는 착시가 생김.
   색도 반투명이 아니라 완전 불투명 흰색(실측). */
.hero__scroll-line {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;
	width: 1px;
	height: 30px;
	background: #fff;
}
.hero__scroll-mouse {
	width: 20px;
	height: 36px;
	border: 0.8px solid #fff;
	border-radius: 20px;
	position: relative;
}
.hero__scroll-mouse::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: #fff;
	transform: translate(-50%, -10px);
	animation: hero-scroll-dot 1.35s linear infinite; /* 원본(1.15s)보다 살짝 느리게 조정 */
}
/* 실측(원본 keyframe "cursor" 그대로): 위쪽(흐림)에서 아래쪽(선명)으로 내려가고,
   끝나면 즉시 다시 위로 스냅 - 왕복(ping-pong)이 아니라 한 방향 반복임에 주의.
   .... by smchon / 2026.09.19 */
@keyframes hero-scroll-dot {
	0%   { opacity: 0; transform: translate(-50%, -10px); }
	100% { opacity: 1; transform: translate(-50%, 10px); }
}

/* ── [신규] 히어로 이후 각 영역 스크롤 등장 애니메이션 (원본 Elementor 실측 반영,
   2026.09.24) - 원본은 각 위젯에 Elementor의 entrance animation(_animation 설정)이
   걸려 있고, 화면에 스크롤되어 들어오는 순간 딱 한 번 재생된다. 원본 CSS에서
   실제 keyframe(translate3d 100%/-100% 기준, animate.css 방식)과 기본
   animation-duration(1.25s)을 그대로 가져왔다. [data-anim] 요소는 기본적으로
   안 보이는 상태(opacity:0)로 시작하고, nav.js의 IntersectionObserver가 화면에
   들어오면 .is-inview 클래스를 붙여 애니메이션을 재생시킨다(한 번 재생 후
   unobserve). by smchon / 2026.09.24 */
[data-anim] { opacity: 0; }
[data-anim].is-inview {
	animation-duration: 1.25s;
	animation-timing-function: ease;
	animation-fill-mode: both;
}
[data-anim="fadeIn"].is-inview { animation-name: reveal-fadeIn; }
[data-anim="fadeInUp"].is-inview { animation-name: reveal-fadeInUp; }
[data-anim="fadeInLeft"].is-inview { animation-name: reveal-fadeInLeft; }
[data-anim="fadeInRight"].is-inview { animation-name: reveal-fadeInRight; }
@keyframes reveal-fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes reveal-fadeInUp {
	0% { opacity: 0; transform: translate3d(0, 100%, 0); }
	100% { opacity: 1; transform: none; }
}
@keyframes reveal-fadeInLeft {
	0% { opacity: 0; transform: translate3d(-100%, 0, 0); }
	100% { opacity: 1; transform: none; }
}
@keyframes reveal-fadeInRight {
	0% { opacity: 0; transform: translate3d(100%, 0, 0); }
	100% { opacity: 1; transform: none; }
}
/* 애니메이션이 재생되기 전(opacity:0)에 JS가 실패/지연되는 극단적인 경우까지
   대비해, 스크린리더/저사양 환경이나 모션 최소화 설정에서는 애니메이션 없이
   바로 보이게 함(접근성 - 원본엔 없지만 부작용 없이 안전하게 추가). */
@media (prefers-reduced-motion: reduce) {
	[data-anim] { opacity: 1 !important; animation: none !important; transform: none !important; }
}

/* 홈페이지 히어로 위에 겹쳐지는 투명 헤더 */
/* 실측: 투명 헤더는 페이지 맨 위(scrollY=0)에서만 투명+흰 글자이고, 그 밖의 모든
   상태(is-solid=스크롤, 메가메뉴 hover)는 위 .site-header 기본값(흰 배경/어두운
   글자)으로 그대로 수렴한다 - 그래서 로고/지구본도 "투명일 때만" 뒤집어주면 되고,
   is-solid는 기본값을 그대로 쓰면 된다(별도로 다시 뒤집을 필요 없음). ── by smchon / 2026.09.24 */
/* 재실측(2026.09.25, Solution 페이지 원본 실측) - position을 여기(투명 기본값)와
   .is-solid로 나눠서 담당시켰더니, "투명한 채로 아래로 스크롤"하는 동안(is-solid를
   아직 안 붙인 구간)은 position:absolute라서 헤더가 페이지와 함께 스크롤되어
   버리는 회귀가 있었음(사용자가 직접 재현/지적: "헤더까지 함께 스크롤 되서
   올라가네"). 원본은 투명하든 흰색이든 항상 position:fixed였음(9개 페이지 실측
   전부 동일) - 배경색/글자색은 is-solid가 계속 담당하되, position은 여기서 항상
   fixed로 고정해서 둘을 분리한다. .... by smchon / 2026.09.25 */
.site-header--transparent {
	position: fixed;
	top: 0; left: 0; right: 0;
	background: transparent;
	color: #fff;
	box-shadow: none;
}
.site-header--transparent .site-logo__img--light { opacity: 1; }
.site-header--transparent .site-logo__img--dark { opacity: 0; }
.site-header--transparent .site-header__globe img { filter: none; }
.site-header--transparent.is-solid {
	background: var(--header-solid-bg);
	color: var(--header-solid-fg);
}
.site-header--transparent.is-solid .site-logo__img--light { opacity: 0; }
.site-header--transparent.is-solid .site-logo__img--dark { opacity: 1; }
.site-header--transparent.is-solid .site-header__globe img { filter: brightness(0) invert(0.45); }

/* about-us처럼 "사진 위에 겹쳐지긴 하지만(오버레이 포지셔닝) 시작부터 흰색"인
   페이지용 - .site-header--transparent(겹침)와 .site-header--start-white(시작색)를
   함께 써서 얻는다. 실측: about-us-2는 투명으로 시작했다가 흰색으로 바뀌는 게
   아니라 로드 시점부터 이미 흰 배경/어두운 글자였다(스크롤/hover와 무관하게 계속
   동일) - 클래스 2개짜리라 위 .site-header--transparent(클래스 1개)보다 특이도가
   높아서 자동으로 우선 적용된다. ── by smchon / 2026.09.24 */
.site-header--transparent.site-header--start-white {
	background: var(--header-solid-bg);
	color: var(--header-solid-fg);
}
.site-header--transparent.site-header--start-white .site-logo__img--light { opacity: 0; }
.site-header--transparent.site-header--start-white .site-logo__img--dark { opacity: 1; }
.site-header--transparent.site-header--start-white .site-header__globe img { filter: brightness(0) invert(0.45); }

/* 실측(원본, 웹버전 전용): 아래로 스크롤하면 헤더가 위로 사라지고, 스크롤을 올리는
   순간(양과 무관) 즉시 다시 나타난다 - "headroom" 방식. 투명/흰색 헤더 둘 다 동일하게
   적용되고(JS에서 .is-hidden을 .site-header에 공통으로 붙임), position이
   sticky/absolute/fixed 무엇이든 transform만으로 밀어 올리면 되므로 별도 분기가
   필요 없다. 데스크탑 전용 - 모바일은 이미 원본처럼 스크롤해도 항상 고정 노출이라
   이 클래스 자체를 JS에서 안 붙인다(1025px 미만에서는 추가 안전장치로 아예
   무효화). ── by smchon / 2026.09.24 */
@media (min-width: 1025px) {
	.site-header.is-hidden { transform: translateY(-100%); }
	/* 실측(원본 PC .header-type1.fixed): 위로 스크롤해서 흰 헤더가 나타난 동안은 아래에
	   1px #dedede 선이 생긴다(맨 위/아래로 스크롤 중에는 기본 반투명 선). 태블릿·스마트폰과
	   같은 값이다. nav.js 가 위로 스크롤 중에만 .is-scrollup 을 붙인다.
	   ── by smchon / 2026.10.08 */
	.site-header.is-scrollup { border-bottom: 1px solid #dedede; }
}

/* 회사 소개 - 사용자 명시 요청으로 원본 비교 없이 자체 기준으로 구성(2026.09.21):
   사진/글씨 좌우 배치는 지금 버전(사진 왼쪽/글씨 오른쪽) 유지, 모서리는 사각형(radius 0)
   으로 모바일/데스크탑 통일. 모바일에서는 사진이 화면 꽉 차게(여백 없이) 나오도록 사진만
   컨테이너 패딩 밖으로 빼고 글씨 쪽에만 패딩을 준다. 데스크탑에서는 사진이 890px에서
   최대치를 찍고 화면이 더 넓어져도 더 안 커지고(여백만 흡수), 반대로 더 작아지지도
   않아야 한다(min-width:0으로 img flex-shrink 버그 수정, 자세한 이유는 아래 참고).
   ── by smchon / 2026.09.21 */
/* 히어로→회사소개 간격만 위아래 비대칭(160/100)으로 줌 - 히어로는 100vh 풀블리드라
   그 아래에 여백을 전혀 안 주기 때문에, 이 경계의 간격은 오직 .intro의 padding-top
   하나에만 좌우된다(다른 섹션 경계처럼 "이전 섹션 bottom + 다음 섹션 top"으로 반반씩
   나눠 받는 구조가 아님). 실측 결과 원본은 이 경계에서 160px를 쓰는데 우리는 100px라
   좁아 보였다(사용자 지적) - 회사소개→Industry 간격(100+100=200, 이미 원본과 일치)은
   그대로 두고 위쪽만 160으로 키움. ── by smchon / 2026.09.23 */
.intro { padding: 160px 0 100px; overflow: hidden; }
/* flex-wrap:wrap을 썼을 때는 "줄바꿈 여부"가 shrink 적용 전(flex-basis) 크기 합으로
   판정돼서, min-width:0을 줘도 768~1000px대에서 여전히 줄바꿈(사진 위/글씨 아래로
   떨어짐)이 발생했음. wrap에 기대는 대신 데스크탑은 항상 row(줄바꿈 없음)로 고정하고,
   모바일 전환은 아래 미디어쿼리에서 flex-direction:column으로 명시적으로 전환하는
   방식으로 바꿔서 중간 폭에서의 의도치 않은 줄바꿈을 원천 차단함. ── by smchon / 2026.09.21 */
.intro__grid { display: flex; align-items: center; gap: 64px; max-width: 1680px; margin: 0 auto; padding: 0 24px; }
/* ── [신규] 좁아질 때 "글씨 줄바꿈"도 "글씨가 사진 뒤로 가려짐"도 아니라 사진만
   줄어들게 하는 방식으로 변경(사용자 요청 - 원본은 글씨 영역이 고정된 채 사진에 가려지는
   나쁜 방식이라 그렇게 하지 말라고 함). 핵심은 두 가지를 맞바꾼 것:
   1) `.intro__photo`에서 `flex-shrink:0`을 빼서(기본값 1) 사진이 자유롭게 줄어들게 함.
      max-width(890px)는 "커지는 한계"로만 남고, "안 줄어듦" 보장은 더 이상 안 함.
   2) `.intro__text`에서 `min-width:0`을 빼서(기본값 auto) 텍스트 쪽은 자기 내용의
      최소폭(min-content) 밑으로는 flexbox가 알아서 절대 안 줄인다 - 그 min-content가
      "가장 긴 한 줄의 실제 폭"이 되도록 아래 `.intro__lead`/`.intro__title`에
      `white-space:nowrap`을 줘서 고정함. 이러면 매직넘버 계산 없이 브라우저가 알아서
      "텍스트가 필요한 최소 폭"을 지키고, 남는 압축은 전부 사진 쪽으로 흡수됨.
   이 조합 덕분에 위 미디어쿼리의 세로 배치 전환 기준선도 1680px 같은 큰 값일 필요가
   없어져서 헤더/네비 기준선(1024px)으로 되돌림 - 그 지점에서 사진이 얼마나 작아져
   있든(실측: 1024px에서 약 341px) 상관없다, 그 아래로는 바로 모바일 스타일 세로
   배치로 넘어가기 때문(사용자: "하한선은 모바일 버전으로 넘어가니 상관없다").
   ── by smchon / 2026.09.21 */
.intro__photo { flex: 1 1 890px; max-width: 890px; min-width: 0; width: 100%; height: auto; border-radius: 0; }
.intro__text { flex: 1 1 360px; }
/* 폰트 크기(17→20px)/색상(#555→#333)을 실제 사이트 실측값으로 교체(사용자 지적:
   "글씨가 흐려 보인다" - 원본 확인 결과 진짜로 우리 색이 더 옅었음). white-space:nowrap은
   위 설명대로 "이 줄의 폭 = 텍스트 영역의 최소 보장 폭"으로 쓰기 위함(명시적 <br>로 나뉜
   줄바꿈 자체는 nowrap과 무관하게 그대로 유지됨). ── by smchon / 2026.09.21 */
.intro__lead { font-size: var(--font-intro-lead); color: #333; line-height: 1.7; margin: 0 0 12px; white-space: nowrap; }
.intro__title { font-size: var(--font-intro-title); font-weight: 700; margin: 0 0 20px; white-space: nowrap; }
/* 모바일 최소 크기 전용 줄바꿈 지점 - 기본은 숨김(자동 줄바꿈에 맡김). 실측(16px 기준
   나눔체): "기술...하는" 한 줄 전체 폭 약 456px, 텍스트 영역은 항상 (뷰포트-48px)이라
   뷰포트가 약 504px보다 좁아지면 이 줄이 더 이상 한 줄에 안 들어가 자동 줄바꿈이 일어나는데,
   기본 자동 줄바꿈은 "하고 혁신(Innovation)하는" 중간의 애매한 지점(예: "하"/"는" 사이)에서
   끊겨 부자연스러웠다(사용자 지적). 504px 이하에서만 이 <br>을 강제로 켜서 "...하고" /
   "혁신(Innovation)하는" / "Inventive Navigation Company," 3줄로 자연스럽게 끊기게
   하고, 그보다 넓으면(가로모드 포함) 기존처럼 2줄 그대로 유지한다.
   ── by smchon / 2026.09.22 */
.intro__lead-break { display: none; }
@media (max-width: 504px) {
	.intro__lead-break { display: block; }
}
.intro__more { display: inline-flex; align-items: center; gap: 10px; }
.intro__more span { font-size: 16px; font-weight: 600; letter-spacing: .02em; color: #1a1a1a; }
.intro__more img { width: 60px; height: auto; }

/* Industry - 배경색(#f7f8fa)을 뺌: 실측 결과 원본은 이 섹션에 구분되는 배경색이
   없고 페이지 배경(흰색)과 동일함. 이미지도 1000→1240px로 키움(실측: 원본은
   .section-inner와 같은 1240px, 즉 컨테이너 폭을 그대로 꽉 채움).
   ── by smchon / 2026.09.21 */
.industry { padding: 100px 0; text-align: center; }
/* 사용자 요청으로 가로 13mm(96dpi 환산 약 49px) 추가 확대: 공용 .section-inner는
   좌우 24px 패딩 때문에 실제 렌더 폭이 1240-48=1192px로 묶여 있어서, 이미지 자체의
   max-width를 올려도 소용없었다(부모 컨테이너가 먼저 막음). Industry 섹션만 컨테이너
   폭을 1192+49=1241px 필요분에 맞춰 1289px(패딩 포함)로 넓혀서 다른 섹션(.section-inner
   공유)에는 영향 없이 이 섹션의 이미지만 커지게 함. ── by smchon / 2026.09.22 */
.industry .section-inner { max-width: 1289px; }
/* display:block 필수 - img는 기본이 inline이라 텍스트 기준선(baseline) 정렬 때문에
   이미지 밑에 글꼴 디센더만큼(약 4px) 정체불명의 여백이 남는다. 이 여백이
   Industry→Technology&business 간격을 다른 경계보다 4px 더 벌어지게 만들고 있었다.
   ── by smchon / 2026.09.23 */
.industry__image { display: block; width: 100%; max-width: none; height: auto; border-radius: 12px; }

/* Technology & business */
/* Industry↔Technology&business(top)와 Technology&business→Cloud(bottom) 간격을
   각각 4mm씩 줄임(사용자 요청, 별도 시점에 순차 적용). .cloud는 배경색이 padding까지
   덮어서 cloud쪽 padding은 회색으로 보이므로, 이 경계에서 눈에 보이는 흰 여백은
   tech-business의 bottom padding 하나뿐 - 그래서 bottom을 직접 줄임.
   ── by smchon / 2026.09.23 */
.tech-business { padding: calc(100px - 4mm) 0 calc(100px - 4mm); text-align: center; }
/* 컨테이너(.section-inner 기본 1240px, 좌우 24px 패딩 → 실제 1192px)가 이미지
   원본 해상도(1209px)보다 좁아서 그만큼 못 커지고 있었음 - 사용자가 "가로로
   4mm 더 크게" 요청해서 Industry 때와 같은 방식으로 이 섹션 컨테이너만 넓힘
   (1192+15.12=1207.12px 필요 → 1240+4mm). 원본 해상도(1209px)를 살짝 밑도는
   선이라 확대(흐려짐) 없이 안전하게 커짐. ── by smchon / 2026.09.23 */
.tech-business .section-inner { max-width: calc(1240px + 4mm); }
/* width:100%(고정 1000px cap) 대신 width:auto - 실측 결과 원본은 이미지를 억지로
   컨테이너에 꽉 채우는 게 아니라 원본 파일의 실제 해상도(1209×625px) 그대로
   표시하고, 화면이 더 좁을 때만 줄어든다(max-width:100%로 캡). 우리도 1000px로
   임의로 눌러놨던 걸 원본 실제 해상도(1209px)까지 다시 키움 - 스크린샷 이미지라
   억지로 늘리면(예전 100%) 글자가 흐려지므로 원본 해상도 이상으로는 절대 안
   키우는 이 방식이 더 안전함. ── by smchon / 2026.09.23 */
.tech-business__image { width: auto; max-width: 100%; height: auto; margin-bottom: 56px; }
/* 원본 실측(Elementor 클래스 elementor-hidden-mobile/elementor-hidden-desktop):
   데스크탑/태블릿(768px~)에는 6개 항목의 제목+설명이 전부 그림에 텍스트로 박혀있는
   큰 이미지(KakaoTalk 스크린샷)만 보여주고 별도 텍스트 목록은 아예 없음 - 모바일
   (767px 이하)에서는 그 그림 대신 아이콘만 있는 작은 이미지(main-06.png)로 바뀌고,
   그림에 박혀있던 설명 텍스트는 아래 .tech-grid 목록(진짜 HTML 텍스트)으로 대체됨
   (그림 속 글씨가 작아져서 안 보이니까). 우리는 지금까지 두 이미지 중 하나만 쓰고
   .tech-grid를 데스크탑에도 항상 보여주고 있어서, 데스크탑에 원본엔 없는 중복
   텍스트 목록이 나타나고 있었음(사용자가 스크린샷으로 지적). ── by smchon / 2026.09.23 */
.tech-business__image--mobile { display: none; }
.tech-grid { display: none; }
.tech-grid__item h3 { font-size: var(--font-card-title); font-weight: 700; margin: 0 0 10px; }
.tech-grid__item p { font-size: var(--font-card-text); color: #666; line-height: 1.6; margin: 0; }

/* Cloud - 웹버전 실측 반영(2026.09.23): CI 로고 24→27.25px(원본 실측, 가로세로 비율
   동일하게 자동 확대), 제목 40→56px(다른 섹션(Industry/Observability)은 42px라
   공용 --font-section-title를 안 건드리고 이 섹션 전용 변수로 분리), 설명문단
   15→20px/#555→#333, 오른쪽 4개 항목은 2단 그리드(220px 이상이면 2열)였던 걸
   원본처럼 항상 1열로 쌓이게, 항목 제목/설명도 18→20px/#666→#333(16px), 색상까지
   실측값으로 교체. 모바일은 이번 요청 범위 밖이라 기존 값(변수 22px, 카드 폰트
   17/14px)을 767px 블록에서 그대로 복원함. ── by smchon / 2026.09.23 */
/* 배경색 실측(in-soft.co.kr, 2026.09.24): 원본은 rgb(248,248,248)=#f8f8f8인데
   우리는 #f7f8fa(약간 푸른 기가 도는 회색)를 쓰고 있었음 - #f8f8f8로 교체. */
.cloud { padding: 100px 0; background: #f8f8f8; }
/* list 고정폭에 8.5mm를 더하면서, 컨테이너(.section-inner 기본 max-width:1240px)
   안에 intro+gap최대+list가 다 안 들어가 항상(1920px에서도) wrap되어 버리는
   버그가 생김 - list에 더한 만큼 컨테이너 자체도 8.5mm 넓혀서 intro/gap은
   그대로 두고 다시 한 줄에 들어가게 함(.tech-business .section-inner와 동일한
   패턴). ── by smchon / 2026.09.24 */
.cloud .section-inner { max-width: calc(1240px + 8.5mm); }
/* gap 최대값을 64→92.35px(64px+7.5mm)로 늘리고, 화면이 좁아지면 이 gap이 0 근처까지
   줄어들다 그 이후엔 flex-wrap으로 세로 쌓임 - clamp()로 구현. **주의**: 이 공식의
   기준점(원래 1050px)은 .cloud__intro가 85mm였을 때의 wrap 발생 폭(실측 약 1140px)
   에 맞춰 역산한 값이었다. 그런데 intro를 85→105mm로 20mm 더 키우면서 wrap이 걸리는
   폭 자체가 약 1140px→1210px로 넓어졌는데(intro가 커진 만큼 필요한 공간도 늘어나서),
   이 공식은 그대로 둔 채였어서 gap이 실제 wrap 지점보다 훨씬 넓은 구간(1050~1210px)
   에서 이미 0으로 줄어들어 있었다 - 그래서 사용자가 보던 폭(대략 그 사이)에서 "박스를
   키웠는데 안 커진 것처럼" 보였던 것(실제로는 gap이 이미 0이라 레이아웃이 예상과
   다르게 보였을 가능성이 큼). intro 크기가 바뀔 때마다 이 기준점도 같이 옮겨야 한다는
   교훈으로, 새 wrap 폭(약 1210px)에 맞춰 기준점을 1050→1120px로, 기울기도 재계산함
   (92.35/(1288-1120)=0.550). ── by smchon / 2026.09.23 */
.cloud__grid { display: flex; gap: clamp(0px, (100vw - 1120px) * 0.55, calc(64px + 7.5mm)); flex-wrap: wrap; }
/* 왼쪽 Cloud 박스 가로 크기를 85mm로 고정(사용자 요청) - flex-grow/shrink 둘 다 0이라
   화면이 넓어져도 안 커지고, 좁아져도(줄어들 공간이 있는 한) 안 줄어듦. flex-wrap
   덕분에 정말 좁아지면 전체 폭으로 내려와 세로로 쌓인다(기존 동작 유지). 단,
   `max-width:100%`는 반드시 필요함 - 이게 없으면 아주 좁은 폰(예: 320px, 좌우
   패딩 제외 약 280px)에서는 85mm(약 321px)가 그 폭보다 커서 가로 스크롤이
   생기는 실제 버그가 있었음(실측으로 발견). ── by smchon / 2026.09.23 */
/* 85mm였는데 사용자 화면에서는 65mm처럼 보인다는 지적 - 우리 쪽 자동 측정으로는
   1920px 폭에서 정확히 85.00mm(321.25px)로 렌더링됨을 재확인함(코드 자체는 정상).
   화면마다 다르게 보이는 원인을 특정하지 못한 채로, 사용자 요청대로 "지금 보이는
   상태에서 20mm 더" 늘려서 105mm로 조정함. 이후 gap clamp 기준점 어긋남 버그를
   찾아 고쳤는데도 "초기 상태와 같다"는 지적이 다시 나옴 - 문단에 명시적 `<br>`가
   있어 원래도 자기 줄바꿈 폭이 좁고(20px 폰트로 긴 문장이라 어차피 여러 줄로
   감김), 박스에 테두리/배경이 없어서 컨테이너가 넓어져도 "글자 줄바꿈 위치"가
   크게 안 달라져 보여 체감이 잘 안 될 수 있음 - 정확한 원인 특정 없이 사용자
   요청대로 5mm 추가. ── by smchon / 2026.09.23 */
/* 실제 사이트 실측(in-soft.co.kr, 2026.09.24): 오른쪽 4개 박스가 아래로 wrap되면
   왼쪽 박스 자체가 행 안에서 가운데 정렬됨. margin:0 auto는 flex 아이템에서
   "남는 공간"이 있을 때만 작동하는데, 옆에 list(flex-grow:1)가 같이 있는(=안
   wrap된) 상태에서는 list가 grow로 남는 공간을 먼저 다 가져가 버려서 auto
   margin이 가져갈 공간이 0이 됨 - 그래서 이 규칙은 브레이크포인트 없이 항상
   켜둬도 wrap되기 전(데스크탑 나란히 배치)에는 자동으로 무효화되고, list가
   자기 줄로 내려가 intro 혼자 한 줄을 차지하는 순간부터만 저절로 가운데
   정렬로 전환된다. ── by smchon / 2026.09.24 */
.cloud__intro { flex: 0 0 110mm; max-width: 100%; margin: 0 auto; }
/* 실측: 로고 아래 여백이 원본은 10px인데 우리는 24px였음. ── by smchon / 2026.09.24 */
.cloud__logo { height: 27.25px; margin-bottom: 10px; display: block; }
/* 실측: 원본 h2는 line-height가 font-size와 동일(56px)해서 글자 위아래에 여분의
   줄간격이 전혀 없는데, 우리는 line-height를 안 정해줘서 브라우저 기본값(약 1.2배,
   67.2px)이 적용돼 글자 위아래로 여백이 더 있는 것처럼 보였음(사용자가 스크린샷에
   초록색으로 표시한 부분). line-height:1로 고정해서 제거. ── by smchon / 2026.09.24 */
.cloud .section-title { font-size: var(--font-cloud-title); color: #000; line-height: 1; }
.cloud__intro p { font-size: 20px; color: #333; line-height: 1.5; }
/* 오른쪽 4개 항목 목록의 실제 렌더 폭을 총 24mm(20mm+추가 4mm) 늘림(사용자 요청,
   웹버전). flex-grow가 양쪽(intro/list) 다 1이라 basis 증가분의 절반만 실제 폭
   증가로 남으므로(실측 확인됨), basis는 의도한 순증의 2배(48mm)를 더함. */
/* list를 grow/shrink 0인 고정폭으로 만들어 "intro의 gap이 0 되기 전까지는 안
   줄어들게" 시도했었는데(2026.09.23), 그러면 화면을 줄일 때 gap이 거의 안 줄다가
   wrap 지점에서 바로 뚝 끊기듯 전환되는 게 오히려 더 부자연스럽다는 피드백을
   받아 되돌림(2026.09.24). gap이 wrap 직전까지 서서히 줄어드는 원래 체감을 더
   우선시하기로 함 - 대신 폭 증가(24mm+8.5mm) 자체는 유지: list의 grow는 유일한
   grow 아이템이라 최종 렌더 폭은 basis 값과 무관하게 항상
   "컨테이너 가용폭 - intro - gap"으로 정해지므로, 아래 .cloud .section-inner의
   max-width를 8.5mm 늘려둔 것만으로 폭 증가분이 그대로 반영됨(basis 자체는
   안 건드려도 됨). ── by smchon / 2026.09.24 */
.cloud__list { flex: 1 1 calc(480px + 48mm); max-width: 100%; display: grid; grid-template-columns: 1fr; gap: 24px; }
.cloud__item { background: #fff; padding: 28px; border-radius: 12px; }
.cloud__item h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: #111; }
.cloud__item p { font-size: 16px; color: #333; line-height: 1.5; margin: 0; }

/* Observability */
.observability { padding: 100px 0; text-align: center; }
/* 실측(in-soft.co.kr, 2026.09.24): "AI 기반 통합 IT 운영 관리 솔루션" 리드 문구는
   Industry의 리드(공용 --font-section-lead 20px)와 달리 원본이 28px로 훨씬 커서
   섹션 전용으로 분리. margin-bottom도 원본은 20px인데 공용 .section-lead 값(60px)을
   그대로 썼더니 실제보다 3배 벌어져 있었음 - 20px로 교체. */
/* 사용자가 그래도 여전히 넓어 보인다고 지적해서 재조사한 결과, 진짜 원인은
   margin이 아니라 line-height였음: 리드는 공용 .section-lead의 line-height:1.6을
   그대로 물려받아 실제(34px, 28px 기준 1.214배)보다 훨씬 큰 44.8px 박스 높이를
   가지고 있었고, 그 안의 "보이지 않는 여백"(위아래 약 8.4px씩)이 margin은
   그대로인데도 글자 사이 체감 간격을 눈에 띄게 늘리고 있었음(margin-bottom
   자체는 20px로 이미 원본과 정확히 일치했었음, 실측으로 재확인). h2→리드
   간격도 마찬가지로 처음에 h2 자체 margin-bottom을 안 건드려서 16px로 남아있던
   게 원인(원본은 10px). 이번에 margin-bottom을 실측값(10px/20px) 그대로,
   line-height도 실측값(34px)으로 같이 맞춰서 "보이지 않는 여백" 문제까지
   근본적으로 해결함. ── by smchon / 2026.09.24 */
.observability .section-title { margin-bottom: 10px; }
.observability .section-lead { font-size: 28px; line-height: 34px; margin-bottom: 20px; }
/* 실측: 15px/#555(흐림)가 아니라 16px/#111(진하게), line-height도 1.8이 아니라
   1.5(24px)가 원본값. ── by smchon / 2026.09.24 */
.observability__desc { max-width: 820px; margin: 0 auto 56px; font-size: 16px; color: #111; line-height: 1.5; }
/* 실측(in-soft.co.kr, 2026.09.24): 원본은 grid(auto-fit)가 아니라 flex row +
   nowrap - 6개가 화면이 좁아져도 개별적으로 줄바꿈되지 않고 다같이 줄어들다가,
   767px(모바일 기준선)에서 flex-direction만 column으로 바뀌면서 한 번에
   전체가 세로로 쌓이는 구조. grid auto-fit은 아이템이 각자 줄바꿈 기준을
   넘는 순간 하나씩 다음 줄로 내려가서 원본과 다른 체감을 준다 - flex로 교체.
   ── by smchon / 2026.09.24 */
.observability__grid { display: flex; flex-wrap: nowrap; gap: 20px; }
/* 카드 배경(회색 #f8f8f8, 모서리 20px)이 원본에는 있는데 우리는 없었음 - 아이콘을
   감싸는 카드 자체에 배경을 줌. width:190px+flex-shrink:1(grow:0)로 좁아질 때
   6개가 같이 줄어들고, 아이콘(90px)이 flex 자식 기본 min-width:auto라 카드가
   90px보다 더 좁아지진 않아 아이콘이 찌그러지지 않음(원본과 동일한 원리).
   ── by smchon / 2026.09.24 */
.observability__item { width: 190px; height: 232px; flex: 0 1 auto; background: #f8f8f8; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 19px; }
/* 실측: 아이콘 64→90px(고정, 카드가 줄어들어도 안 줄어듦). ── by smchon / 2026.09.24 */
.observability__item img { width: 90px; height: 90px; margin: 0; }
/* 실측: 14px/600(가늘고 작음)이 아니라 20px/700(굵고 큼)이 원본값. ── by smchon / 2026.09.24 */
.observability__item p { font-size: 20px; font-weight: 700; color: #111; margin: 0; }

/* AX Service - 실측(in-soft.co.kr, 2026.09.24): 높이가 padding 기반이라 원본
   고정 높이(500px, min-height)보다 약 20.6px(5.45mm) 더 컸음 - min-height +
   flex 세로 중앙 정렬로 교체. 배경도 검은 단색이 아니라 실제로는 배경 이미지
   (원본 CSS에서 직접 찾은 파일: generative-ai.jpg, cover/center)가 있었음 -
   wdpress 백업에서 복사해 절대경로로 추가. */
/* 사용자가 우리 쪽이 원본보다 훨씬 밝다고 지적 - 원본 CSS를 ::before 가상요소까지
   뒤져보니 실제로 background-color:#000, opacity:0.7짜리 어두운 필터가 이미지
   위에 깔려 있었음(히어로 영상 위 오버레이와 같은 패턴). 별도 요소 없이
   linear-gradient를 이미지와 겹쳐서 같은 효과를 냄. ── by smchon / 2026.09.24 */
.ax-service {
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #0a0e1a;
	background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url('/insoft_home/wp-content/uploads/2024/11/generative-ai.jpg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
}
/* ax-service가 flex 세로 중앙정렬용 display:flex가 되면서, 그 안의
   .section-inner도 flex 자식이 되어 기본값(shrink-to-content)으로 좁아질 수
   있어 width:100%로 명시(그래야 자기 max-width:1240px+margin:auto 중앙정렬이
   그대로 유지됨). ── by smchon / 2026.09.24 */
.ax-service .section-inner { width: 100%; }
.ax-service .section-title { color: #fff; margin-bottom: 10px; }
/* 실측: "기업의 업무 효율화부터..." 리드 문구가 20px/#111(검은색, 어두운 배경
   위에서 안 보임)였음 - Observability와 동일하게 28px/흰색/line-height 34px로
   교체. margin-bottom도 공용 .section-lead 값(60px)이 원본(20px)의 3배라
   교체. ── by smchon / 2026.09.24 */
.ax-service .section-lead { font-size: 28px; color: #fff; line-height: 34px; margin-bottom: 20px; }
/* 실측: 설명문도 15px가 아니라 18px, line-height도 1.8이 아니라 26px(1.444배)가
   원본값. max-width도 760px가 아니라 1140px(고정값, 뷰포트에 안 따라 변함) -
   760px로는 화면이 넓어도 항상 4줄로 개행됐는데, 원본은 넓을 때 3줄이고 화면이
   좁아지면서 4줄로 바뀌는 구조였음(사용자 지적). ── by smchon / 2026.09.24 */
.ax-service__desc { max-width: 1140px; margin: 0 auto; font-size: 18px; line-height: 26px; opacity: .85; }
/* 실측: 원본은 AX Service 섹션이 footer와 간격 없이 바로 붙어있음 - 공용
   .site-footer의 margin-top:60px은 다른 페이지(이 섹션 없이 바로 footer가
   오는 경우)를 위한 기본값이라 그대로 두고, 이 홈페이지만 0으로 상쇄해야 함.
   .ax-service는 footer.php의 <footer>가 아니라 <main>의 형제(sibling)라
   `.ax-service + .site-footer`는 매칭이 안 됨(실제 DOM: main.site-main >
   ...sections..., .ax-service가 main의 마지막 자식 / .site-footer는 main의
   형제) - :has()로 "마지막 자식이 .ax-service인 main" 바로 다음 footer만
   골라서 적용. ── by smchon / 2026.09.24 */
main:has(> .ax-service:last-child) + .site-footer { margin-top: 0; }

/* ---------- [신규] Solution/Service 상세페이지 공용 컴포넌트 ----------
   솔루션 6개 + 서비스 8개 + devsecop/k8s-support 페이지가 공통으로 쓰는 구조:
   서브비주얼(어두운 배경 소개) → 피처 그리드(아이콘+제목+설명) → 다이어그램 이미지 →
   기술스택 아이콘 그리드 → 클로징 이미지. 페이지마다 필요한 것만 골라 쓰면 된다.
   by smchon / 2026.09.19 */
.detail-hero {
	padding: 140px 0 64px;
	background: var(--header-bg);
	color: #fff;
	text-align: left;
}
.detail-hero__eyebrow { font-size: 15px; color: var(--hover-blue-light); margin: 0 0 12px; font-weight: 600; }
.detail-hero__title { font-size: var(--font-section-title); font-weight: 700; line-height: 1.3; margin: 0 0 20px; color: #fff; }
.detail-hero__desc { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.8); max-width: 760px; }

/* ── [신규] Solution 6개 페이지 전용 - 사진 배경 100vh 히어로 + 소메뉴 탭바. 원본
   실측 결과 이 6개 페이지(iCNP/CloudMesh/EXODUS/OpenManager 6.0/7.0/CloudX)는
   .detail-hero(단색 배경, 42px 타이틀)가 아니라 전혀 다른 구조였음 - 히어로 전체가
   페이지별 사진(예: solution-01-1.jpg)을 배경으로 까는 100vh 섹션이고, 글자 크기도
   훨씬 큼(eyebrow 20px, 타이틀 56px, 설명 20px - 전부 불투명 흰색). 히어로 바로
   아래에는 6개 소메뉴로 이동하는 가로 탭바(각 200px, 선택된 것만 브랜드 블루
   배경)가 있고, 그 다음에야 기존 .detail-section이 이어짐. .detail-hero는 service-*
   등 다른 페이지가 이미 쓰고 있어 그대로 두고 이 페이지들 전용으로 클래스를
   분리했다. .... by smchon / 2026.09.25 */
.solution-hero {
	position: relative;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: 50% 0%;
	background-repeat: no-repeat;
	color: #fff;
	text-align: left;
}
/* 실측(1920x1080 vs 1440x900 교차 확인): 원본은 진짜 뷰포트 높이 기준 세로
   중앙정렬이라, 창 높이가 커지면 헤더~Solutions 간격도 그만큼 넓어짐(1440x900=
   195px, 1920x1080=270px) - 이전에 이 간격을 1440 기준 고정 px(padding-top)로
   박아놨더니 다른 창 크기/해상도에서 오히려 원본과 어긋나는 회귀가 있었음(사용자
   지적) - align-items:center(진짜 반응형 중앙정렬)로 되돌림.
   대신 iCNP/OpenManager 7.0의 "뱃지가 있으면 그만큼 위로 밀려 헤더에 닿는" 문제는
   뱃지를 중앙정렬 계산에서 아예 빼는 방식으로 해결 - 뱃지를 position:absolute로
   .section-inner 박스 바로 밑에 붙여서(아래 top:100%), 정렬 높이 계산에 뱃지가
   안 들어가게 함. 그 결과 뱃지 유무와 무관하게 eyebrow/타이틀/설명 블록의 세로
   위치가 모든 페이지에서 동일해짐. .... by smchon / 2026.09.25 */
/* .section-inner는 max-width:1240px에 width 지정이 없어서, flex item(주축=가로)으로
   들어가면 fit-content로 줄어들어(예: 타이틀 텍스트 자체 폭) 실측 1240px 고정폭과
   달라짐 - width:100%(부모 기준, max-width 1240에서 잘림)로 고정폭을 강제해야
   justify-content:center가 진짜 1240px 박스를 정확히 가운데 두게 됨. .... by
   smchon / 2026.09.25 */
.solution-hero .section-inner { position: relative; width: 100%; }
.solution-hero__eyebrow { font-size: 20px; font-weight: 600; color: var(--hover-blue); margin: 0 0 12px; }
.solution-hero__title { font-size: 56px; font-weight: 700; line-height: 64px; margin: 0 0 24px; color: #fff; }
.solution-hero__desc { font-size: 20px; line-height: 30px; color: #fff; max-width: 760px; margin: 0; }
.solution-hero__badge {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 32px;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 10px 24px;
	background: rgba(255, 255, 255, .1);
	border-radius: 10px;
	white-space: nowrap;
}
.solution-hero__badge img { width: 56px; height: 56px; flex: none; }
.solution-hero__badge-text { font-size: 14px; font-weight: 500; color: #fff; line-height: 1.5; }
.solution-hero__badge-text strong { display: block; font-size: 16px; font-weight: 700; }

/* 실측(원본 .solution-tab-wrap): 소메뉴 탭바는 position:sticky; top:0; z-index:9 로 화면을 내려도
   상단에 붙어 따라온다(헤더는 스크롤 내리면 사라지므로 탭바가 맨 위로 올라옴). 위로 스크롤해서
   헤더가 다시 나타나면(히어로 높이를 넘은 뒤) JS 가 .is-moved(원본 tab-move)를 붙여 탭바를
   100px 아래로 밀어 헤더 밑에 둔다(transition: transform .4s). PC 전용(1024px 이하는 원본도 숨김).
   ── by smchon / 2026.10.08 */
.solution-subnav { background: #fff; position: sticky; top: 0; z-index: 9; transition: transform .4s ease; border-bottom: 1px solid #eee; /* 원본: 탭바 하단에 화면 전체 폭 1px #eee 선 - by smchon / 2026.10.08 */ }
.solution-subnav.is-moved { transform: translateY(100px); }
/* ── [신규] 탭바 구분선/위치/줄간격 - by smchon / 2026.10.08
   실측(원본 1440px): 탭 항목은 200px 고정폭 6개(1200px)가 1240px 컨테이너 안에서 왼쪽 정렬(x=92.5),
   구분선은 1px #eee(첫 항목 왼쪽, 둘째 항목 왼쪽, 둘째 이후 항목 오른쪽), 글자 16px / 줄간격 18px.
   라벨의 고정 개행(<br>)은 partials/header.php 의 $solution_tab_labels 에서 넣는다. */
.solution-subnav__inner { max-width: 1240px; margin: 0 auto; display: flex; justify-content: flex-start; }
.solution-subnav__item {
	flex: 0 1 200px;
	height: 87px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 16px;
	line-height: 18px;
	color: #333;
	background: #fff;
	transition: background-color .3s ease; /* 원본: 배경만 0.3s ease(지연 0), 글자색은 즉시 바뀜 - by smchon / 2026.10.10 */
}
.solution-subnav__item:first-child,
.solution-subnav__item:nth-child(2) { border-left: 1px solid #eee; }
.solution-subnav__item:not(:first-child) { border-right: 1px solid #eee; }
/* 원본: 마우스를 올리면 아주 연한 회색 배경(#f8f8f8) + 파란 글자, 선택된 항목은 파란 배경 + 흰 글자 그대로 - by smchon / 2026.10.10 */
.solution-subnav__item:hover { background: #f8f8f8; color: var(--hover-blue); }
.solution-subnav__item.is-active,
.solution-subnav__item.is-active:hover { background: var(--hover-blue); color: #fff; }

.detail-section { padding: 80px 0; }
.detail-section--alt { background: #f7f8fa; }
.detail-section__desc { font-size: var(--font-section-lead); color: #555; line-height: 1.7; margin: 0 0 40px; max-width: 820px; }

.detail-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;
}
.detail-features__item { text-align: left; }
.detail-features__item img { width: 48px; height: 48px; margin-bottom: 16px; }
.detail-features__item h3 { font-size: var(--font-card-title); font-weight: 700; margin: 0 0 10px; }
.detail-features__item p { font-size: var(--font-card-text); color: #666; line-height: 1.7; margin: 0; }

/* ── [신규] Solution 페이지의 "특징 카드"(예: 효율적이고 유연한 클라우드 네이티브 개발 솔루션) ──
   by smchon / 2026.10.08
   실측(원본 iCNP, 1440px): 3열(카드 400px, 간격 20px), 카드 테두리 0.8px #002d61 / 모서리 20px,
   제목 띠 높이 80px · 배경 #002d61 · 흰색 20px/700 가운데정렬 · 위쪽 모서리 18px, 본문 18px/26px #333
   (안쪽 좌우 25px, 위아래 30px). 서비스 페이지의 같은 클래스(.detail-features)에는 영향이 없도록
   .solution-subnav 뒤에 오는 섹션(= Solution 페이지)에만 적용한다. */
.solution-subnav ~ .detail-section .detail-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.solution-subnav ~ .detail-section .detail-features__item {
	display: flex;
	flex-direction: column;
	min-height: 220px;
	border: .8px solid #002d61;
	border-radius: 20px;
	overflow: hidden;
}
.solution-subnav ~ .detail-section .detail-features__item h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	margin: 0;
	padding: 0 35px;
	background: #002d61;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
	border-radius: 18px 18px 0 0;
}
.solution-subnav ~ .detail-section .detail-features__item p {
	padding: 30px 25px;
	font-size: 18px;
	line-height: 26px;
	color: #333;
}
/* ── [신규] 첫 섹션 간격/카드 폭 - by smchon / 2026.10.08
   실측(원본 1440px): 탭바 아래 → 섹션 제목 121px, 제목 → 카드 60px, 카드 폭 400px
   (1240px 컨테이너를 패딩 없이 꽉 채움, x=92.5/512.5/932.5, 간격 20px).
   .solution-subnav + .detail-section = 탭바 바로 뒤의 첫 섹션(6개 Solution 페이지 공통). */
@media (min-width: 1025px) {
	/* 탭바가 보이는 PC 폭에서만 적용(태블릿/모바일 값은 원본 미측정) */
	.solution-subnav + .detail-section { padding-top: 120px; } /* 탭바 하단선 1px 포함해 원본과 같은 위치(탭바 88px + 120px) */
	.solution-subnav + .detail-section .section-title { margin-bottom: 60px; }
	/* 실측(원본 iCNP·CloudMesh 1440px): 섹션과 섹션 사이 간격은 140px(= 아래 80px + 위 60px) - by smchon / 2026.10.08 */
	.solution-subnav ~ .detail-section + .detail-section { padding-top: 60px; }
}
/* 첫 섹션 제목은 가운데 정렬(원본), 카드 본문 폭은 원본과 같은 350px(카드 400 - 좌우 24px 여백) -
   by smchon / 2026.10.08 */
.solution-subnav + .detail-section .section-title { text-align: center; }
.solution-subnav ~ .detail-section .detail-features__item p { padding-left: 24px; padding-right: 24px; }
/* 원본은 Solution 페이지 어디에도 회색 배경 섹션이 없다(히어로/푸터 제외) → 회색 배경 제거 - by smchon / 2026.10.08 */
.solution-subnav ~ .detail-section--alt { background: transparent; }
@media (min-width: 1289px) {
	.solution-subnav + .detail-section .section-inner { padding-left: 0; padding-right: 0; }
}
/* ── [신규] 카드가 4개인 페이지(OpenManager 6.0)는 2열 × 2행 - by smchon / 2026.10.08
   실측(원본 1440px): 카드 610px(2열, 가로·세로 간격 20px), 같은 행 카드는 높이가 같다(grid 기본 stretch).
   본문은 문장을 문단 2개로 나눠 담고(문단 간격 16px), 좌우 여백 35px · 위아래 25px. */
.solution-subnav ~ .detail-section .detail-features--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item p { padding: 0 25px 0 35px; }
.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item p:first-of-type { padding-top: 25px; }
.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item p + p { margin-top: 16px; }
.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item p:last-child { padding-bottom: 25px; }
/* 문단 앞 파란 말머리(원본 .openmanager-section1-memo:after): 4×4px 원, #00b5db, 문단 위 9px · 카드 안쪽 왼쪽 25px.
   첫 문단은 위 여백 25px 만큼 더 내린다. - by smchon / 2026.10.08 */
.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item p { position: relative; }
.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item p::before {
	content: '';
	position: absolute;
	left: 25px;
	top: 9px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #00b5db;
}
.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item p:first-of-type::before { top: 34px; }
@media (max-width: 767px) {
	/* 모바일 값은 원본 미측정 - 일단 세로 1열로 쌓는다 */
	.solution-subnav ~ .detail-section .detail-features,
	.solution-subnav ~ .detail-section .detail-features--2col { grid-template-columns: 1fr; }
}

.detail-diagram { text-align: center; }
.detail-diagram img { width: 100%; max-width: 900px; height: auto; margin: 0 auto 40px; display: block; }
.detail-diagram__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; text-align: left; }
.detail-diagram__list-item { padding: 20px; background: #fff; border-radius: 12px; border: 1px solid #eee; }
.detail-diagram__list-item h4 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.detail-diagram__list-item p { font-size: 14px; color: #666; line-height: 1.6; margin: 0 0 4px; }

/* ── [신규] iCNP "효율적인 클라우드 네이티브 애플리케이션 개발과 운영 관리 플랫폼" 박스 6개 - by smchon / 2026.10.08
   실측(원본 1440px): 3열(박스 400px, 간격 20px), 박스 테두리 1px #ccc / 모서리 20px / 위아래 안쪽 30px,
   각 박스 안에 사진(박스 폭 꽉 참, 398px) → 제목(가운데, 20px/36px/700 #111, 위 여백 30px) →
   점선 구분선(1px dotted #ccc, 폭 330px = 박스 좌우 35px씩 안쪽, 위 여백 19px) → 말머리 목록(18px/26px #555,
   구분선 안쪽 좌우 15px · 위 19px, 파란 말머리 4×4px #00b5db 가 글자 왼쪽 10px 밖 · 위 10px).
   같은 행의 박스는 높이가 같다(grid 기본 stretch). 이 페이지(.detail-diagram--cards) 전용. */
.detail-diagram--cards .detail-diagram__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.detail-diagram--cards .detail-diagram__list-item { padding: 30px 0; border: 1px solid #ccc; border-radius: 20px; background: transparent; }
.detail-diagram--cards .detail-diagram__list-item img { width: 100%; max-width: none; height: auto; margin: 0; display: block; }
.detail-diagram--cards .detail-diagram__list-item h4 { margin: 0; padding: 30px 20px 0; font-size: 20px; line-height: 36px; font-weight: 700; color: #111; text-align: center; }
.detail-diagram--cards .detail-diagram__bullets { margin: 19px 34px 0; padding: 19px 15px 0; border-top: 1px dotted #ccc; }
.detail-diagram--cards .detail-diagram__list-item p { position: relative; margin: 0; font-size: 18px; line-height: 26px; color: #555; }
.detail-diagram--cards .detail-diagram__list-item p::before {
	content: '';
	position: absolute;
	left: -10px;
	top: 10px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #00b5db;
}
@media (min-width: 1025px) {
	.detail-diagram--cards .section-title { margin-bottom: 60px; }
}
@media (min-width: 1289px) {
	.detail-diagram--cards.section-inner { padding-left: 0; padding-right: 0; }
}
@media (max-width: 767px) {
	/* 모바일 값은 원본 미측정 - 일단 세로 1열로 쌓는다 */
	.detail-diagram--cards .detail-diagram__list { grid-template-columns: 1fr; }
}

.detail-stack {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 24px;
	text-align: center;
}
.detail-stack__item img { width: 56px; height: 56px; margin-bottom: 10px; }
.detail-stack__item h4 { font-size: 15px; font-weight: 700; margin: 0; }
.detail-stack__item p { font-size: 13px; color: #777; margin: 4px 0 0; }

/* ── [신규] iCNP "기술 스택" 박스 9개 - by smchon / 2026.10.08
   실측(원본 1440px): 3열 × 3행, 박스 400×120px(가로·세로 간격 20px), 모서리 20px, 안쪽 오른쪽 40px,
   홀수번째 박스 배경 #f5fbfe · 짝수번째 #f8f8f8(바둑판처럼 교차), 글씨는 세로 가운데 · 왼쪽(왼쪽 여백 40px,
   1·4번째 박스만 53px), 아이콘은 오른쪽 끝(66×66, 3·9번째는 68×67 원본 크기 그대로).
   제목 20px/20px 굵게 #111, 부제(괄호) 16px/18px #333. 이 페이지(.detail-stack--cards) 전용. */
.detail-stack--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left; }
.detail-stack--cards .detail-stack__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 120px;
	padding: 0 40px 0 0;
	border-radius: 20px;
	background: #f8f8f8;
}
.detail-stack--cards .detail-stack__item:nth-child(odd) { background: #f5fbfe; }
.detail-stack--cards .detail-stack__text { padding-left: 40px; }
.detail-stack--cards .detail-stack__item:nth-child(1) .detail-stack__text,
.detail-stack--cards .detail-stack__item:nth-child(4) .detail-stack__text { padding-left: 53px; }
.detail-stack--cards .detail-stack__item img { width: auto; height: auto; flex: none; margin: 0; }
.detail-stack--cards .detail-stack__item h4 { font-size: 20px; line-height: 20px; font-weight: 700; color: #111; margin: 0; }
.detail-stack--cards .detail-stack__item p { font-size: 16px; line-height: 18px; font-weight: 400; color: #333; margin: 0; }
@media (min-width: 1289px) {
	.detail-stack-section.section-inner { padding-left: 0; padding-right: 0; }
}
@media (max-width: 767px) {
	/* 모바일 값은 원본 미측정 - 일단 세로 1열로 쌓는다 */
	.detail-stack--cards { grid-template-columns: 1fr; }
}

/* ── [신규] Solution 페이지 공통: 각 영역 제목·설명문 가운데 정렬 - by smchon / 2026.10.08
   실측(원본 6개 페이지 1440px): 큰 섹션 제목은 모두 화면 가운데(중심 오프셋 0), 제목 바로 아래 설명문도
   가운데 · 18px/26px #555 · 제목과 20px 간격 · 한 줄에 들어가도록 컨테이너(1240px) 폭까지 허용.
   설명문 아래 간격(60px)은 PC 폭에서만 적용(태블릿/모바일은 원본 미측정). */
.solution-subnav ~ .detail-section .section-title { text-align: center; }
.solution-subnav ~ .detail-section .detail-section__desc {
	max-width: 1240px;
	margin: 20px auto 40px;
	text-align: center;
	font-size: 18px;
	line-height: 26px;
}
@media (min-width: 1025px) {
	.solution-subnav ~ .detail-section .detail-section__desc { margin-bottom: 60px; }
}

.detail-closing img { width: 100%; height: auto; display: block; }

/* ── [신규] Solution 페이지 맨 아래 큰 그림(.detail-closing) 간격 - by smchon / 2026.10.08
   실측(원본 iCNP·CloudMesh·OpenManager 6.0 1440px): 그림은 화면 전체 폭이 아니라 1240px 컨테이너 안(x=92.5)에
   놓이고, 그림 아래 → 푸터 간격은 160px. 직전 섹션의 아래 여백은 0으로 줘서(설명문 아래 60px 만 남김) 설명문 →
   그림 간격이 원본(60px)과 같게 한다. PC 폭(≥1025px) 값 - 태블릿/모바일은 원본 미측정이라 건드리지 않는다. */
.solution-subnav ~ .detail-closing { max-width: 1240px; margin: 0 auto; padding: 0 24px; box-sizing: content-box; }
@media (min-width: 1289px) {
	.solution-subnav ~ .detail-closing { padding-left: 0; padding-right: 0; }
}
@media (min-width: 1025px) {
	.solution-subnav ~ .detail-section:has(+ .detail-closing) { padding-bottom: 0; }
	/* 푸터(.site-footer)에 기본 위 여백 60px 이 있으므로 100px + 60px = 160px */
	.solution-subnav ~ .detail-closing { padding-bottom: 100px; }
}

/* ========================================================================
   About us (about-us.php) - 원본(https://www.in-soft.co.kr/about-us-2/)
   실측 기반 전용 스타일. 기존 .detail-hero/.detail-section 등 공용 상세페이지
   템플릿은 solution-, service- 계열 등 다른 페이지와 공유하고 있어서, 이 페이지만을
   위해 그 클래스들을 고치면 다른 페이지가 깨진다 - 그래서 aboutus- 접두사로
   완전히 분리된 전용 클래스를 새로 만들었다. 실측 결과 정리:
   - 원본은 이 페이지 전체에서 배경색이 히어로(사진) 말고는 전부 흰색(회색 alt
     섹션 없음) - 기존 .detail-section--alt의 회색 배경 패턴은 여기 안 씀.
   - "비즈니스 모델의 혁신" 아래 실측된 5개 캡션 한 줄 요소는 원본 자체에서
     color:#fff인데 뒤에 어두운 배경이 전혀 없어서 흰 배경 위에 흰 글씨로
     실제로는 안 보이는 상태였다(원본 사이트 자체의 편집 실수로 추정, 스크롤
     애니메이션을 강제로 전부 재생시켜 직접 확인함) - 읽을 수 없는 내용을 그대로
     따라 만드는 건 의미가 없어서, 같은 정보를 담고 있던 기존 3개 카드(제목+설명)
     구성을 유지했다.
   - "Let's Intelligence..." 아래 두 줄 중 하나는 color:#fff + text-shadow:0 0
     10px rgba(0,0,0,.3)(부드러운 그림자로 흐릿하게 보이는 "고스트 텍스트"
     연출)이고 다른 하나는 그 그림자가 빠져서 진짜로 안 보였다 - 이것도 같은
     디자인 의도(고스트 텍스트)였다고 보고 두 줄 다 같은 그림자 스타일을 적용.
   ── by smchon / 2026.09.24 */

.aboutus-hero {
	min-height: 350px;
	/* 투명 헤더가 사진 위에 겹쳐서(position:absolute) 레이아웃 높이를 차지하지 않다
	   보니, align-items:center가 "헤더 포함 전체 350px"를 기준으로 중앙정렬을
	   계산해서 타이틀이 원본보다 아래로(정확히는 헤더 높이의 절반만큼) 처져
	   보였다(사용자 지적: "헤더 배경이미지까지 포함한 높이에서 중앙에 위치하는 것
	   같다"). box-sizing:border-box + padding-top:헤더높이로 "컨텐츠 박스" 자체를
	   헤더 아래 영역(350px - 헤더높이)만큼만 남겨서, 그 안에서 중앙정렬되게 한다 -
	   모바일(아래 767px 블록)은 이 방식이 아니라 실측된 하단정렬 방식을 이미 쓰고
	   있어서 그대로 둔다(사용자 지시). ── by smchon / 2026.09.24 */
	box-sizing: border-box;
	padding-top: var(--header-height);
	background-image: url('/insoft_home/wp-content/uploads/2024/11/about-main1.jpg');
	background-size: cover;
	/* 실측: center(50% 50%)가 아니라 left top(0% 0%) - 그래서 브라우저 폭을 늘리면
	   왼쪽은 고정된 채 오른쪽으로 더 보여지고, 줄이면 오른쪽부터 잘린다. center를
	   쓰면 좌우가 가운데 기준으로 대칭으로 줄었다 늘었다 하는 느낌이 되어 원본과
	   달라 보였다(사용자 지적). ── by smchon / 2026.09.24 */
	background-position: left top;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.aboutus-hero__inner { display: flex; flex-direction: column; align-items: center; }
.aboutus-hero__title { font-size: 56px; font-weight: 700; line-height: 56px; color: #fff; margin: 0 0 20px; }
.aboutus-hero__desc { font-size: 18px; font-weight: 400; line-height: 32.4px; color: #fff; margin: 0; }

/* 실측: 사진(506x450, 좌상단 크롭) + 텍스트, 사진 쪽에 타이틀/설명이 세로
   중앙정렬됨. 사진은 실제 원본 이미지(about-us-1.png) 자체에 둥근 모서리
   모양이 이미 그려져 있는 PNG라 CSS border-radius가 필요 없다. */
.aboutus-intro { padding: 170px 0 140px; }
/* 실측: 이 행(사진+글)은 .section-inner의 좌우 24px 패딩을 그대로 쓰면 안 된다 - 원본은
   패딩 없이 순수 1240px 콘텐츠 폭(가운데 정렬)을 그대로 쓰는데, .section-inner는
   box-sizing:border-box라 24px×2 패딩이 1240px "안에서" 깎여나가 실제 자식(사진+글)에게
   남는 폭이 1192px뿐이었다 - 그 결과 오른쪽 글 박스가 654px(173mm)가 아니라 606px
   (160mm)로 더 좁아져서 줄바꿈이 늘어나고 아래로 길어져 보였다(사용자 지적: "원본은
   130mm인데 우리는 120mm"). max-width를 패딩만큼(48px) 더 늘려서 상쇄한다.
   ── by smchon / 2026.09.24 */
.aboutus-intro__grid { display: flex; align-items: stretch; gap: 80px; max-width: calc(1240px + 48px); }
.aboutus-intro__photo {
	flex: 0 0 506px;
	width: 506px;
	height: 450px;
	background-image: url('/insoft_home/wp-content/uploads/2024/11/about-us-1.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: auto;
}
.aboutus-intro__text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.aboutus-intro__title { font-size: 56px; font-weight: 700; line-height: 68px; color: #111; margin: 0 0 32px; }
.aboutus-intro__desc { font-size: 20px; font-weight: 400; line-height: 30px; color: #333; }
.aboutus-intro__desc p { margin: 0 0 28px; }
.aboutus-intro__desc p:last-child { margin-bottom: 0; }

/* 실측: 큰 타이틀 계열(비즈니스 모델의 혁신 / Core Competency & Value)은
   42px/700/줄간격1(=line-height:font-size), "선언문" 계열(새로운 세상.../
   Let's Intelligence.../캡션들)은 28px/500/줄간격1.8 - 두 계열 다 데스크탑
   기준값이며 모바일에서 각각 다르게 축소된다(아래 미디어쿼리). */
.aboutus-eyebrow-title { font-size: 42px; font-weight: 700; line-height: 42px; color: #111; text-align: center; margin: 0 0 20px; }
.aboutus-statement { font-size: 28px; font-weight: 500; line-height: 50.4px; color: #000; text-align: center; margin: 0 0 40px; }
.aboutus-statement--caption { margin: 60px 0 20px; }

.aboutus-biz { padding: 0 0 140px; text-align: center; }
.aboutus-biz__features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin: 0 0 60px;
	text-align: left;
}
.aboutus-biz__feature h3 { font-size: 20px; font-weight: 700; color: #111; margin: 0 0 10px; }
.aboutus-biz__feature p { font-size: 16px; color: #666; line-height: 1.7; margin: 0; }
.aboutus-diagram { width: 100%; height: auto; display: block; margin: 0 0 20px; }
.aboutus-diagram:last-child { margin-bottom: 0; }

.aboutus-closing { padding: 140px 0 120px; text-align: center; }
/* 실측: 흰 글씨가 배경과 대비가 약해 잘 안 보이는 문제 - 배경 박스는 없애고, 글자는
   짙은 남색(#1c3a4a) + 회색 text-shadow 조합으로 확정. 둘째 줄(마지막 문장)만
   28px로 더 크게 강조되는 것도 실측 확인(원본은 둘째 줄이 20px가 아니라 28px).
   .... by smchon / 2026.09.24 */
.aboutus-closing__ghost-wrap {
	display: inline-block;
	margin: 0 0 30px;
}
.aboutus-closing__ghost {
	font-size: 20px;
	font-weight: 400;
	line-height: 36px;
	color: #1c3a4a;
	text-shadow: 0 0 10px rgba(0, 0, 0, .3);
	margin: 0 0 8px;
}
.aboutus-closing__ghost:last-of-type { font-size: 28px; line-height: 50.4px; margin-bottom: 0; }
/* 실측: img_01(원본 낱장 그림, 814x325)은 컨테이너 전체 폭으로 안 늘리고
   원본 크기 그대로 가운데 정렬, img_02(1240x146 배너형 그래픽)만 전체 폭. */
.aboutus-closing__diagram1 { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto 20px; }
.aboutus-closing__diagram2 { display: block; width: 100%; height: auto; }

.aboutus-core { padding: 0 0 120px; }
/* 재실측 - 원본 데스크탑은 실제로는 타이틀과 이 문구가 같은 줄에 나란히(inline)
   배치되는 구조라 text-align 자체는 left였지만, 시각적으로는 가운데 정렬된 타이틀
   옆에 붙어 있어 전체적으로 "가운데" 처럼 보임. 우리 구조는 타이틀/설명이 세로로
   쌓이는 단순 구조라, 그 시각적 인상을 그대로 살리려 가운데 정렬로 통일함 -
   글씨 크기(28px)는 모바일에서도 안 줄고 그대로 유지되는 게 실측 확인됨(기존 20px
   축소는 오류). .... by smchon / 2026.09.24 */
.aboutus-core__desc { font-size: 28px; font-weight: 500; line-height: 50.4px; color: #616161; text-align: center; margin: 0 0 40px; }
.aboutus-core__img { width: 100%; height: auto; display: block; }

/* [신규] Reference 페이지 - 연혁 타임라인 (연도 → 월 → 항목). by smchon / 2026.09.19 */
.timeline__year { padding: 32px 0; border-bottom: 1px solid #eee; }
.timeline__year:first-child { padding-top: 0; }
.timeline__year-label { font-size: 32px; font-weight: 700; color: var(--hover-blue); margin: 0 0 20px; }
.timeline__month { display: flex; gap: 24px; margin-bottom: 16px; align-items: baseline; }
.timeline__month-label { flex: 0 0 48px; font-weight: 700; color: #999; }
.timeline__month-items { flex: 1 1 auto; list-style: none; margin: 0; padding: 0; }
.timeline__month-items li { font-size: 15px; color: #333; line-height: 1.8; }

/* [신규] Contact 폼. by smchon / 2026.09.19 */
/* ---------- 모바일: 헤더/네비게이션 (실측: 1024=햄버거, 1025=데스크탑 메뉴) ----------
   실측해보니 원본은 요소마다 기준선이 다르다 — 헤더/네비는 1024px, 히어로/섹션 타이포그래피와
   푸터는 767px. 처음에 이걸 구분 안 하고 1040px 하나로 통일했더니 1024~767px 구간에서
   원본과 다르게 동작(히어로 글씨가 미리 줄어들며 아래로 밀림 등)했음 — 그래서 용도별로
   미디어쿼리를 분리함. ── by smchon / 2026.09.19 */
@media (max-width: 1024px) {
	/* 실측: 로고 배경 사이즈가 140px(데스크탑) → 91px(1024px 이하)로 축소됨.
	   비율(140:35) 유지해서 91:23 ── [신규] by smchon / 2026.09.19 */
	.site-logo { width: 91px; height: 23px; margin-left: 0; }
	.site-logo__img { width: 91px; height: 23px; }

	/* 실측: Solution 소메뉴 탭바(6칸×200px=1200px 고정폭)는 원본이 모바일 대체
	   버전 없이 그냥 통째로 숨김(elementor-hidden-mobile) - 대신 헤더의 드롭다운
	   메뉴로 이동한다. .... by smchon / 2026.09.25 */
	.solution-subnav { display: none; }

	/* 실측: 모바일 상단 바는 desktop의 흰색/투명 전환과 무관하게 원본이 항상 검정
	   고정이다 - 위에서 데스크탑 기본값을 흰색으로 바꾸고 투명 헤더에 스크롤
	   hide/show까지 추가했지만, 그건 전부 웹버전 전용(사용자 지시)이라 여기서
	   페이지 종류(투명/흰색)와 상관없이 강제로 검정 고정으로 되돌린다.
	   주의: position은 여기서 안 건드려도 됨 - .site-header--transparent 기본값
	   자체가 이제 항상 position:fixed라(2026.09.25 수정, is-solid와 분리) 모바일도
	   처음부터 고정되어 있다. 한때 여기 position:sticky를 강제했었는데,
	   body{overflow-x:hidden}이 걸려있으면 position:sticky가 조용히 무효화되는
	   CSS의 잘 알려진 함정 때문에 헤더가 스크롤 중 완전히 사라져버리는(다시 안
	   나타남) 회귀 버그가 있었다(실제로 재현/확인함) - sticky는 이제 아예 안 쓰므로
	   해당 없음.
	   ── by smchon / 2026.09.24 */
	.site-header,
	.site-header--transparent,
	.site-header--transparent.is-solid,
	.site-header--transparent.site-header--start-white {
		background: var(--header-bg);
		color: var(--header-fg);
	}
	.site-header.is-hidden { transform: none; }
	/* 실측(원본): 1024px 이하(태블릿·스마트폰)에서는 헤더 아래 선이 평소엔 없다(border-bottom 0px) -
	   PC 의 반투명 흰 선(rgba(238,238,238,.3))이 그대로 남아 있던 것을 제거. 선이 생기는 건
	   위로 스크롤해서 .is-solid(태블릿, 아래 블록) / .is-scrollup(스마트폰, 아래 블록)이 붙을 때뿐이다.
	   ── by smchon / 2026.10.08 */
	.site-header { border-bottom-width: 0; }
	/* .is-solid/.start-white 조합(2~3개 클래스)까지 명시적으로 다시 눌러줘야 함 -
	   그냥 .site-logo__img--light{opacity:1} 하나만 쓰면 특이도가 낮아서 더 구체적인
	   데스크탑 규칙에 밀린다. ── by smchon / 2026.09.24 */
	.site-logo__img--light,
	.site-header--transparent .site-logo__img--light,
	.site-header--transparent.is-solid .site-logo__img--light,
	.site-header--transparent.site-header--start-white .site-logo__img--light { opacity: 1; }
	.site-logo__img--dark,
	.site-header--transparent .site-logo__img--dark,
	.site-header--transparent.is-solid .site-logo__img--dark,
	.site-header--transparent.site-header--start-white .site-logo__img--dark { opacity: 0; }
	.site-header__globe img,
	.site-header--transparent .site-header__globe img,
	.site-header--transparent.is-solid .site-header__globe img,
	.site-header--transparent.site-header--start-white .site-header__globe img { filter: none; }

	.nav-toggle { display: flex; }

	/* 실측: 원본은 패널이 오른쪽에서 슬라이드해 들어오는 게 아니라 항상 같은 위치(right:0)에
	   있고, 반투명 검은 딤 배경(.nav-overlay)과 한 덩어리로 opacity 0→1(약 0.4s)로만
	   서서히 나타남 - transform은 시작부터 끝까지 한 번도 안 바뀜(실측: JS로 opacity를
	   0→1로 애니메이션, translateX 계열 값 전혀 없음). 예전엔 이걸 슬라이드로 구현해서
	   느낌이 완전히 달랐음(사용자 지적: "슬라이드식이 아니라 그자리에서 시간차로
	   진해지면서 나타나는 방식"). ── by smchon / 2026.09.24 */
	.nav-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .46);
		opacity: 0;
		visibility: hidden;
		transition: opacity .4s ease;
		z-index: 299;
	}
	.nav-overlay.is-open { opacity: 1; visibility: visible; }
	body.is-resizing .nav-overlay { transition: none; }

	.site-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		/* 실측(in-soft.co.kr 모바일 메뉴 패널): 375px/320px 뷰포트 모두에서 고정 270px -
		   우리 320px는 원본보다 가로 폭이 10mm(약 37.8px) 더 넓었음. ── by smchon / 2026.09.24 */
		width: min(270px, 85vw);
		background: var(--mobile-nav-bg);
		opacity: 0;
		visibility: hidden;
		transition: opacity .4s ease;
		z-index: 300;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		/* 실측(원본 CSS 원문): 상단 아이콘 줄(.mo-contents 첫 자식)과 아코디언 목록(둘째 자식)
		   사이는 이 컨테이너의 flex gap 80px 하나로 만들어짐(.mo-contents{display:flex;
		   flex-direction:column;gap:80px 0}). 예전엔 이걸 모르고 목록 쪽 padding-top을
		   억지로 늘려 흉내냈는데, 그때 스크롤(overflow-y:auto)도 이 패널 전체에 걸어놔서
		   소메뉴가 열려 넘칠 때 상단 지구본/X까지 스크롤바 폭만큼 밀리는 버그가 있었음
		   (사용자 지적: "X 아이콘이 밀려서 보인다") - 스크롤은 아래 .site-nav__list에만
		   걸어서 상단 줄은 항상 고정되게 분리. ── by smchon / 2026.09.24 */
		gap: 80px;
	}
	.site-nav.is-open { opacity: 1; visibility: visible; }
	/* 창 크기 조절로 1024px 기준선을 넘나들 때, transform이 처음 걸리는 순간까지
	   트랜지션이 애니메이션으로 잡아서 메뉴 패널이 잠깐 보였다 슬라이드되며 사라지는
	   현상 방지 (nav.js의 resize 리스너와 짝) .... by smchon / 2026.09.19 */
	body.is-resizing .site-nav { transition: none; }

	/* 실측(in-soft.co.kr 모바일 메뉴): 지구본+닫기(X)가 오른쪽 끝에 붙어서 32px
	   간격으로 나란히 있음(우리는 space-between이라 지구본이 왼쪽 끝으로 멀리
	   떨어져 있었음 - 사용자 지적). ── by smchon / 2026.09.24 */
	.site-nav__mobile-top {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 32px;
		/* 실측: 이 줄 자체는 아이콘 높이(30px)만큼만 딱 맞고 아래쪽 여백이 없음 -
		   그 아래 간격은 이 줄의 padding이 아니라 .site-nav의 flex gap(80px) 하나로
		   전부 만들어짐. 여기 padding-bottom을 20px로 남겨뒀더니 80px gap과 합쳐져
		   실측(80px)보다 20px 더 벌어지는 버그가 있었음. ── by smchon / 2026.09.24 */
		padding: 20px 25px 0;
	}
	.globe-icon { width: 24px; height: 24px; } /* 실측(24x24) 반영 .... by smchon / 2026.09.19 */
	.nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		background: none;
		border: none;
		color: #fff;
		/* 실측(원본 .mo-close-btn::after): content:"×", font-size:37px, font-weight:200(가는
		   두께) - 우리 32px/기본 굵기보다 원본이 더 크고 가늘다. ── by smchon / 2026.09.24 */
		font-size: 37px;
		font-weight: 200;
		line-height: 1;
		cursor: pointer;
	}

	.site-nav__list {
		/* 실측(원본 .mo-accordion-wrap): overflow-y:auto + max-height를 목록 자신에게만
		   걸어서, 소메뉴가 펼쳐져 넘칠 때 이 목록 안쪽만 스크롤되고 위 .site-nav__mobile-top
		   (지구본/X)은 절대 움직이지 않음. flex:1로 상단 80px gap을 뺀 나머지 공간을 전부
		   차지하고, min-height:0은 flex 자식이 내용물 높이만큼 커져서 스크롤이 아예 안 걸리는
		   문제를 막기 위해 필수. ── by smchon / 2026.09.24 */
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		/* 실측: 소메뉴가 넘쳐 스크롤이 생겨도 원본은 +/- 아이콘이 절대 왼쪽으로 안 밀림 -
		   원본은 각 항목 폭을 패널 폭(270px) 고정값으로 박아둬서 스크롤바가 콘텐츠 폭을
		   줄이지 못하게 만드는 방식(Elementor 빌드타임에 실측폭을 그대로 하드코딩한 것)을
		   쓰는데, 우리는 그런 하드코딩이 불가능하니(반응형 min(270px,85vw)) 대신
		   scrollbar-gutter:stable로 "스크롤바가 실제로 생기든 안 생기든 항상 자리를
		   미리 비워둬서" 스크롤바 등장 전후로 콘텐츠 폭이 아예 안 바뀌게 만든다
		   (사용자 지적: "+ 아이콘 영역을 왼쪽으로 밀어낸다"). ── by smchon / 2026.09.24 */
		scrollbar-gutter: stable;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 0 40px;
	}
	.site-nav__item {
		height: auto;
		border-bottom: 1px solid var(--mobile-nav-border);
		margin: 0 25px;
		display: block;
	}
	/* .site-nav__item(위)과 특이도가 같은 단일 클래스라, 소스 순서상 반드시 뒤에
	   와야 이긴다 - 예전엔 이 규칙이 위 .site-nav__item보다 앞에 있어서
	   display:none이 덮어써져 지구본이 목록 맨 아래에 그대로 보이는 버그가
	   있었음(사용자 지적: "원본엔 없는 지구본이 목록에 있다"). 원본 모바일
	   메뉴에는 이 위치의 지구본이 아예 없음(상단 것 하나뿐). ── by smchon / 2026.09.24 */
	.site-nav__item--globe { display: none; }
	.site-nav__item--ailink { border-bottom: 1px solid var(--mobile-nav-border); position: relative; }
	.has-mega { position: relative; }
	/* 실측(원본 CSS 원문 ul.mo-menu): padding:20px 0, line-height:26px, font-size:20px,
	   weight 400(공용 규칙은 600) - 아코디언 대메뉴 "줄" 자체를 이 라벨이 담당한다.
	   중요: 이 padding은 li가 아니라 반드시 라벨(닫힌 줄의 실제 모양)에 줘야 한다 -
	   li에 주면 소메뉴(.mega-panel)가 라벨 바로 아래(텍스트 기준)에서 시작해버려서,
	   원본처럼 "대메뉴 줄 전체 영역이 끝나는 지점(패딩 포함 67px 지점)"에서 시작하는
	   게 아니라 그보다 위(46px 지점)에서 시작하며 아래로 밀어버리는 버그가 있었다
	   (사용자 지적: "메뉴명 바로 밑에서부터 소메뉴 박스가 생긴다"). 예전에
	   "실측 46.8px"로 알고 있던 값은 사실 목록 맨 첫 항목(AI Link)에만 걸리는 특수
	   오버라이드(:first-child{padding-top:0})의 결과값이었고, 나머지 항목(Solution/
	   Service/Experiences/Reference/About)은 전부 위아래 20px씩이라 훨씬 크다(약 67px).
	   justify-content/height는 데스크탑에서 새로 추가한 "라벨이 li 전체를 채우는" 규칙
	   (가운데 정렬)이 그대로 새어들어오면 모바일 텍스트가 가운데 정렬되고 높이도
	   100%(=auto 부모 기준 무의미하지만 명시적으로 되돌림)로 깨지는 걸 막기 위해
	   원래 모바일 동작(왼쪽 정렬)으로 복원. ── by smchon / 2026.09.24 */
	.site-nav__label {
		color: #fff;
		font-size: 20px;
		font-weight: 400;
		line-height: 26px;
		padding: 20px 0;
		height: auto;
		display: block;
	}

	/* 실측: 원본 모바일에서 "INsoft AI Link"는 웹버전의 그라디언트 필 버튼이 아니라
	   다른 대메뉴와 완전히 동일한 흰 텍스트+아코디언 토글 형태임 - 필 스타일(배경,
	   둥근모서리, 고정폭, 아이콘/화살표)을 전부 제거하고 다른 항목과 통일.
	   ── by smchon / 2026.09.24 */
	.ailink-btn {
		width: 100%;
		height: auto;
		background: none;
		border-radius: 0;
		color: #fff;
		font-size: 20px;
		font-weight: 400;
		line-height: 26px;
		justify-content: flex-start;
		gap: 0;
		/* 첫 항목(목록의 :first-child)이라 위쪽 패딩이 없음(실측) - 다른 대메뉴는 20px 0,
		   이 버튼(=AI Link의 "줄")만 0 0 20px. .site-nav__label과 같은 이유로 li가 아니라
		   이 버튼 자신이 패딩을 가져야 소메뉴가 "줄 전체 영역" 아래에서 시작한다.
		   ── by smchon / 2026.09.24 */
		padding: 0 0 20px;
	}
	.ailink-btn__icon,
	.ailink-btn__chevron { display: none; }
	/* 위 .ailink-btn__chevron{display:none}만으로는 부족함 - 데스크탑용
	   ":hover .ailink-btn__chevron--up{display:inline-block}" 규칙(클래스 3개,
	   특이도 더 높음)이 모바일에서도 그대로 이겨서, 항목에 마우스를 대면(자동화
	   테스트의 합성 hover 등) "^" 화살표가 다시 나타나는 버그가 있었음(원본
	   모바일은 hover 시 아무 표시도 안 함). 같은 특이도로 소스 순서상 뒤에 오는
	   규칙을 추가해서 모바일에서는 hover/열림 상태에서도 항상 숨김. ── by smchon / 2026.09.24 */
	.site-nav__item--ailink:hover .ailink-btn__chevron--down,
	.site-nav__item--ailink:hover .ailink-btn__chevron--up,
	.site-nav__item--ailink.is-open .ailink-btn__chevron--up { display: none; }

	/* 실측: "+"/"−"는 도형이 아니라 글자(content)로 그려짐 - 24px(+) / 30px(−),
	   오른쪽 끝 정렬. 예전 막대 2개 겹쳐 그리던 방식보다 훨씬 얇고 작아 보여서
	   "아이콘이 너무 크다"는 지적이 자연히 해결됨. top은 50%+translateY가 아니라
	   고정값을 써야 함 - 아코디언이 열려서 li 전체 높이가 커지면 50%는 그 커진
	   높이의 절반(즉 펼쳐진 하위메뉴 한가운데)으로 밀려버려서 +/− 기호가 엉뚱한
	   위치(맨 아래쪽)에 나타나는 버그가 있었음. ── by smchon / 2026.09.24 */
	.mobile-accordion-toggle {
		display: inline-block;
		position: absolute;
		right: 0;
		/* li의 padding-top과 정확히 같은 값을 줘서, li 안쪽 맨 위부터 시작하는 라벨
		   텍스트의 top과 아이콘의 top이 정확히 일치하게 함(일반 항목 padding-top
		   20px 기준). AI Link는 이제 다른 항목과 동일하게 li의 직계 형제(sibling)라
		   (버튼 안에 넣었을 때 겪은 "버튼 자체 높이 기준으로 계산돼 아래로 쳐지는"
		   문제가 구조적으로 없어짐) 그냥 아래 규칙 하나로 자기 li의 padding-top(0)에
		   맞춰 재정의하면 끝. ── by smchon / 2026.09.24 */
		top: 20px;
		width: auto;
		height: auto;
		line-height: 1;
		/* +/- 글자 자체는 장식일 뿐이고 진짜 토글 클릭 리스너는 .site-nav__label에
		   붙어있음(li의 형제 요소라 이 span 위에서 클릭하면 이벤트가 label로
		   전달되지 않았음 - "+ 아이콘 부분을 눌러도 소메뉴가 안 열린다" 지적).
		   pointer-events:none으로 클릭을 그 아래(라벨)로 그대로 통과시킨다.
		   ── by smchon / 2026.09.24 */
		pointer-events: none;
	}
	/* AI Link li 자체의 padding-top이 0(위 .site-nav__item--ailink)이라, 다른 항목의
	   기준값(20px)과 다르게 0으로 재정의 - 구조가 다른 항목과 동일해졌으므로 이제
	   "버튼 안이라 기준이 다르다"는 특수 처리 없이 이 한 줄이면 충분. ── by smchon / 2026.09.24 */
	.site-nav__item--ailink .mobile-accordion-toggle { top: 0; }
	.mobile-accordion-toggle::before { content: none; }
	.mobile-accordion-toggle::after {
		content: '+';
		color: #fff;
		font-size: 24px;
		font-weight: 400;
	}
	.has-mega.is-open .mobile-accordion-toggle::after,
	.site-nav__item.is-open .mobile-accordion-toggle::after {
		content: '-';
		font-size: 30px;
	}

	/* 실측: 하위메뉴가 있는(+) 대메뉴는 hover/tap 시 색이 안 바뀌고 항상 흰색
	   그대로임 - 하위메뉴가 없는 일반 링크(Experiences/Reference)에만 걸리는
	   공용 hover 파란색(위 .site-nav__item:hover .site-nav__label 규칙)이
	   여기까지 같이 걸려 있었음(사용자 지적: "하이라이트가 웹버전과 섞여있다").
	   ── by smchon / 2026.09.24 */
	.has-mega:hover .site-nav__label,
	.has-mega.active .site-nav__label,
	.site-nav__item--ailink:hover .ailink-btn {
		color: #fff;
	}

	/* 모바일에서는 메가메뉴 장식이미지를 빼고 목록만 아코디언으로.
	   실측(원본 .mo-sub-menu): 소메뉴 박스는 대메뉴 텍스트 폭(220px, li의 좌우 25px
	   마진 안쪽)에 갇히지 않고 패널 전체 폭(270px)을 그대로 씀 - li의 25px 마진을
	   음수 마진(-25px)으로 상쇄해서 배경이 패널 가장자리까지 꽉 차게 하고, 그
	   대신 내부 padding(23px 25px 0, 실측값)으로 텍스트를 다시 25px 안쪽으로
	   들여쓴다. 예전엔 이 음수 마진이 없어서 소메뉴 배경이 대메뉴 텍스트와 같은
	   좁은 폭 안에만 깔렸었음(사용자 지적: "대메뉴 영역 가로사이즈 만큼만 덮고
	   있다"). ── by smchon / 2026.09.24 */
	.mega-panel {
		position: static;
		transform: none;
		width: auto;
		margin: 0 -25px;
		padding: 23px 25px 0;
		background-color: transparent;
		background-image: url('/insoft_home/wp-content/uploads/2024/11/mo-gnb1.png');
		background-position: 0 0;
		background-size: auto;
		background-repeat: repeat;
		box-shadow: none;
		border-top: 0; /* PC 레이어의 위쪽 1px 선이 모바일 메뉴로 새어들지 않게 .... by smchon / 2026.10.08 */
		opacity: 1;
		visibility: visible;
		display: none;
	}
	/* .has-mega.is-open .mega-panel(데스크탑 hover/open 규칙, 클래스 3개라 특이도가
	   더 높음)이 transform:translateX(-50%)를 계속 걸어서, 위 .mega-panel의
	   transform:none이 무시되고 패널이 화면 밖 왼쪽으로 밀려 안 보이는 버그가
	   있었음(사용자가 지적한 "하위메뉴가 안 보인다"의 원인) - 같은 특이도로
	   다시 눌러줌. ── by smchon / 2026.09.24 */
	.has-mega.is-open .mega-panel { display: block; transform: none; }
	.mega-panel__inner { flex-direction: column; padding: 0; gap: 0; min-height: 0; }
	.mega-panel__title { display: none; }
	.mega-panel__deco { display: none; }
	/* 데스크탑용 .mega-panel__list의 margin:16px 0 0 + gap:25px가 모바일에도 새어들어와서,
	   항목당 간격이 "a의 padding-bottom 30px + gap 25px = 55px(14.5mm)"로 원본(30px/8mm)의
	   거의 2배가 되어 있었음(사용자 지적: "간격이 12mm 넘는다, 원본은 8mm") - gap/margin을
	   0으로 리셋해서 간격을 a의 padding-bottom 30px 하나로만 만들게 함.
	   ── by smchon / 2026.09.24 */
	.mega-panel__list { margin: 0; gap: 0; }
	/* 실측(원본 ul.mo-sub-menu > li): 글자 14px/line-height 20px, 각 항목이 아래쪽
	   30px 패딩으로 다음 항목과의 간격을 만듦 - 마지막 항목도 동일하게 30px라
	   박스 맨 아래에도 같은 여백이 남는다(그래서 다음 대메뉴 줄과의 사이가 항상
	   일정). ── by smchon / 2026.09.24 */
	.mega-panel__list a { display: block; color: #fff; font-size: 14px; font-weight: 400; line-height: 20px; padding: 0 0 30px; }
	.mega-panel__list a:hover { color: var(--hover-blue); }

	.dropdown--ailink {
		position: static;
		width: auto;
		/* mega-panel과 완전히 동일한 실측값(음수 마진으로 전체 폭 확장 + 텍스처 배경) -
		   원본은 AI Link 소메뉴도 다른 대메뉴와 똑같은 .mo-sub-menu 구조/스타일을 그대로
		   쓴다(데스크탑용 흰색 둥근 드롭다운 박스가 아님). 예전엔 데스크탑용 dropdown 요소를
		   재활용해 배경색만 바꿔서 써서, AI Link만 폭/시작위치/모양이 다른 대메뉴와 달랐음
		   (사용자 지적: "AI Link만 웹버전 소메뉴 박스를 그대로 보여준다"). border-radius도
		   데스크탑 드롭다운(10px 둥근모서리) 값이 새어들어와 있었음 - 원본은 모서리가
		   각진 사각형이라 0으로 리셋(사용자 지적: "모서리 부분이 둥글게 처리되어 있다").
		   ── by smchon / 2026.09.24 */
		border-radius: 0;
		margin: 0 -25px;
		padding: 23px 25px 0;
		background-color: transparent;
		background-image: url('/insoft_home/wp-content/uploads/2024/11/mo-gnb1.png');
		background-position: 0 0;
		background-size: auto;
		background-repeat: repeat;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		display: none;
	}
	.site-nav__item--ailink.is-open .dropdown--ailink { display: block; }
	.dropdown--ailink li { margin: 0; width: auto; }
	.dropdown--ailink li a { display: block; color: #fff; font-size: 14px; font-weight: 400; line-height: 20px; padding: 0 0 30px; justify-content: flex-start; }
	/* 실측: 모바일에서는 데스크탑 드롭다운의 화살표 아이콘(↗)이 아예 안 보임(텍스트만). */
	.dropdown--ailink li a img { display: none; }
	/* 실측: 원본 소메뉴 목록엔 항목 사이 구분선이 없음(간격만 있음) - 데스크탑
	   드롭다운용 회색 구분선(base .dropdown--ailink li:not(:last-child))이
	   모바일까지 새어 들어와 있던 걸 제거. ── by smchon / 2026.09.24 */
	.dropdown--ailink li:not(:last-child) { border-bottom: none; }
}

/* 회사 소개 세로 배치 전환 기준선 - 1680px에서 헤더/네비 기준선(1024px) 재사용으로
   되돌림(2026.09.21 후속 수정). 사진이 좁아질 때 줄어들지 않고 텍스트만 밀어내던
   이전 방식과 달리, 이제는 위에서 `.intro__photo`가 자유롭게 줄어들고 `.intro__text`가
   (nowrap으로 고정된) 자기 min-content 밑으로는 안 줄어드는 방식으로 바꿨기 때문에
   더 이상 "텍스트 자리 확보용 큰 기준선"이 필요 없다 - 사진이 1024px 근처에서 어느
   정도 크기(실측 약 341px)까지 줄어 있어도 상관없다, 그 지점 밑으로는 바로 아래처럼
   모바일 스타일 세로 배치로 넘어가기 때문(사용자: "하한선은 모바일 버전으로 넘어가니
   상관없다"). ── by smchon / 2026.09.21 */
@media (max-width: 1024px) {
	.intro__grid { flex-direction: column; align-items: stretch; gap: 24px; padding: 0; }
	/* flex:none이 핵심 - 위 데스크탑 규칙의 flex-basis(890px)를 여기서 반드시 꺼야 한다.
	   flex-basis는 "메인축" 기준인데, 가로 배치(row)에서는 메인축이 너비라 문제없지만
	   세로 배치(column)로 바뀌면 메인축이 "높이"로 바뀌어서 flex-basis:890px가 사진의
	   높이를 890px로 강제해버림 - 그 결과 원본 비율과 안 맞는 정사각형에 가까운 모양으로
	   양옆이 잘려 보이는 심각한 버그가 있었다(사용자가 스크린샷으로 지적). flex:none으로
	   완전히 꺼서 세로 배치일 때는 순수 width(백분율/max-width)+height:auto로만
	   원본 비율 그대로 크기가 정해지게 한다. ── by smchon / 2026.09.21 */
	.intro__photo { flex: none; max-width: 890px; width: 100%; height: auto; margin: 0 auto; display: block; border-radius: 0; }
	/* flex:none이 여기도 똑같이 필요하다 - 위 사진과 같은 이유로, 데스크탑 규칙의
	   flex-basis(360px)가 세로 배치에서는 "높이"로 강제 적용되면서 .intro__text가
	   실제 글자 내용(약 170px)보다 훨씬 큰 360px 높이를 차지해, 회사소개와 Industry
	   사이에 쓸데없는 빈 공간이 생기는 버그가 있었다(사용자가 스크린샷으로 지적).
	   ── by smchon / 2026.09.21 */
	/* 좌우 여백 24→20px - 실측 결과 원본은 375px/1000px 등 폭과 무관하게 항상 20px를
	   쓰는데 우리는 24px라 4px(약 1mm) 더 넓었음(사용자 지적: 이 4px 때문에 Industry
	   최소 사진이 그만큼 더 작게 나옴). 데스크탑(.section-inner 기본값 24px)은 원본도
	   그런지 확인 안 됐고 사용자 지적도 모바일 한정이라 안 건드리고, 여기 모바일
	   전용으로만 20px 적용. ── by smchon / 2026.09.23 */
	.intro__text { flex: none; padding: 0 20px; }
	/* 데스크탑 전용 nowrap(텍스트 최소폭 고정용)을 세로 배치에서는 반드시 풀어줘야 한다 -
	   안 풀면 좁은 모바일 폭에서 긴 줄이 화면 밖으로 삐져나간다. ── by smchon / 2026.09.21 */
	.intro__lead, .intro__title { white-space: normal; }

	/* 홈페이지 섹션(영역 단락) 간 상하 여백 - 사용자가 실제 화면에서 mm 단위로 재본 뒤
	   "전부 8.5mm(안 되면 8mm)로 통일해달라"고 명시적으로 요청함. px로 값을 맞추면
	   화면/배율에 따라 체감이 달라 정확한 mm 매칭이 어려우니, CSS가 지원하는 mm
	   단위를 그대로 써서 요청한 물리적 크기를 직접 지정함(1mm는 CSS 표준상 96dpi
	   기준 정확히 3.7795px로 고정 변환되는 값이라 브라우저마다 다르게 계산되지 않음).
	   각 섹션이 위아래 절반씩(4.25mm) 부담해서 인접 섹션 사이 합이 8.5mm가 되도록 함
	   (히어로→회사소개만 예외 - 아래 `.intro` 규칙 참고). 히어로/헤더/네비 관련이 아닌
	   순수 "영역 단락 사이" 여백이라 1024px 기준선(다른 섹션 padding과 동일)에 둠.
	   ── by smchon / 2026.09.23 */
	/* 히어로→회사소개 간격만 예외 - 히어로가 100vh 풀블리드라 자체 padding이 없어서
	   이 경계 간격은 `.intro`의 padding-top 하나에만 좌우된다(다른 경계처럼 양쪽에서
	   절반씩 받는 구조가 아님) - 그래서 여기만 전체 목표값을 padding-top에 몰아준다.
	   Industry↔Technology&business 간격을 9.5mm로 확정(사용자 확인)한 뒤, 이 경계도
	   "동일하게" 맞춰달라는 요청에 따라 8.5→9.5mm로 키움. padding-bottom(4.25mm,
	   회사소개→Industry 간격의 절반 분담분)은 그대로 유지. ── by smchon / 2026.09.23 */
	.intro { padding: 11mm 0 4.75mm; }
	/* Industry↔Technology&business 간격만 우선 테스트 - 사용자가 실제 화면에서
	   8.5mm를 "7mm 정도"로 느껴서 8mm로 조금 넓혀달라고 요청함. 이 경계만 먼저
	   맞춘 뒤 나머지 경계에도 같은 방식으로 통일할 예정이라 industry의 bottom과
	   tech-business의 top만 4.25→4.75mm(합 9.5mm)로 비대칭 처리함 - 나머지 경계
	   (회사소개→Industry, Technology&business→Cloud)는 그대로 8.5mm 유지.
	   ── by smchon / 2026.09.23 */
	.industry { padding: 4.75mm 0; }
	/* Technology&business→Cloud 경계만 예외 - .cloud는 배경색(#f7f8fa)이 섹션
	   padding까지 통째로 덮고 있어서, cloud의 top padding(4.75mm)은 "회색"으로
	   칠해져 눈에 보이는 흰 여백이 아니다. 그래서 이 경계에서 사용자가 체감하는
	   "흰 여백"은 사실상 tech-business의 bottom padding 하나뿐이었음(다른 경계는
	   양쪽 다 배경이 없어서 9.5mm 그대로 흰 여백으로 보였지만 여기만 절반만 보임).
	   실측 결과 원본의 실제 흰 여백은 10.6mm라 tech-business의 bottom만 그 값으로
	   올림(top은 Industry↔Tech 쪽 9.5mm 그대로 유지). ── by smchon / 2026.09.23 */
	.tech-business { padding: 4.75mm 0 10.6mm; }
	.cloud { padding: 4.75mm 0; }
	/* Observability↔AX Service 경계만 사용자 요청으로 지금(35.9px)의 2배(71.8px,
	   실측값 80px과 근접)로 넓힘 - Cloud↔Observability(top)와 AX Service↔Footer
	   (bottom)는 이미 맞춰둔 값이라 안 건드리고, 이 경계에 닿는 두 변만 4.75mm→
	   9.5mm로 각각 올림. ── by smchon / 2026.09.24 */
	.observability { padding: 4.75mm 0 9.5mm; }
	/* AX Service 모바일 값은 파일 맨 아래 @media (max-width: 767px) 블록으로 옮김(태블릿은 PC 와 동일) - by smchon / 2026.10.09 */

	/* 좌우 여백 24→20px - .intro__text와 동일한 이유(실측: 원본 20px, 우리 24px,
	   4px≈1mm 차이). Industry 등 본문 섹션 공용 컨테이너(.section-inner)의 좌우
	   여백도 똑같이 줄여서, Industry 최소 사진 폭이 그만큼 커지게 함(사용자 지적).
	   ── by smchon / 2026.09.23 */
	.section-inner { padding: 0 20px; }

	/* section-title→section-lead 간격("Industry" 제목 ↔ "We provide..." 리드 문구,
	   3mm)과 section-lead→다음 콘텐츠 간격(이미지 등, 20px) - 원래 767px 블록에
	   넣었었는데, 실측해보니 원본 CSS 규칙 자체는 767px 기준이 맞지만(직접 확인함),
	   사용자가 테스트하는 창 폭이 767~1024px 사이일 때가 많아서 "분명 고쳤는데
	   반영이 안 된다"는 혼란이 반복됐다(900px에서 실측: 3mm 규칙이 아예 안 걸리고
	   데스크탑 값 16px=4.23mm가 그대로 나옴 - 사용자가 계속 보고한 "4mm"와 정확히
	   일치). 위의 섹션 padding(8.5mm)들과 같은 1024px 기준선으로 옮겨서, 사용자가
	   "좁다"고 느끼는 대부분의 폭(햄버거 메뉴가 보이는 1024px 이하 전체)에서 한꺼번에
	   적용되게 함 - 원본과 살짝 안 맞더라도(원본은 768~1024 구간에서 아직 데스크탑
	   값) 사용자 경험상 혼란을 없애는 쪽을 택함. ── by smchon / 2026.09.23 */
	/* "Industry" 제목 → "We provide..." 리드 간격 - 원본 실측값은 10px(h2 자체는
	   margin:0, 실제 간격은 이를 감싸는 wrapper div의 margin-bottom에서 나옴)이지만,
	   사용자가 0px/5px/10px를 직접 A/B 테스트한 결과 원본보다 살짝 더 좁은 5px를
	   최종으로 선택함(0px는 원본보다도 더 좁아서 과함, 10px는 사용자가 원하는
	   만큼 안 좁혀짐) - 사용자의 최종 판단이 "원본과 동일" 원칙보다 우선. ── by
	   smchon / 2026.09.23 */
	.section-title { margin-bottom: 5px; }
	/* line-height 1.6→1.125 - 실측 결과 원본 모바일 리드 문구(16px 폰트)는 줄간격이
	   18px(1.125배)로 우리보다 훨씬 촘촘함(우리는 25.6px, 1.6배). 리드 문구가 짧은
	   화면에서 2줄로 개행될 때 줄 사이 간격이 원본보다 훨씬 넓어 보이는 원인이었다
	   (사용자 지적). ── by smchon / 2026.09.23 */
	.section-lead { margin-bottom: 20px; line-height: 1.125; }

	/* 실측(in-soft.co.kr): 오른쪽 4개 박스가 아래로 wrap되는 시점(원본은 대략
	   1024px 부근)부터 원본은 왼쪽 박스 내용(로고/"Cloud" 제목)이 시각적으로
	   가운데에 몰려 보인다(원본의 실제 구현은 text-align이 아니라 박스 자체가
	   내용물 크기로 줄어든 뒤 flex align-items:center로 위치만 옮기는 방식이라
	   h2/로고의 raw text-align 값 자체는 "start"로 나옴 - 그래서 처음에 767px
	   Elementor Mobile 기준선에서만 켜지는 걸로 착각해 767px 블록에 넣었다가,
	   사용자가 스크린샷으로 "1024px대 폭에서도 원본은 가운데인데 우리는 아직
	   왼쪽"이라고 지적해 이 블록(1024px)으로 옮김). 본문 설명 문단은 이 폭에서도
	   원본이 계속 왼쪽 정렬이라 안 건드림. 우리 intro 박스는 원본과 달리 항상
	   고정폭(110mm)이라 내용물 실제 너비보다 넓어서, text-align:center로 직접
	   맞춰야 원본과 같은 가운데 배치가 나온다. ── by smchon / 2026.09.24 */
	.cloud__intro { text-align: center; }
	.cloud__logo { margin-left: auto; margin-right: auto; }
	.cloud__intro p { text-align: left; }
}

/* ---------- 태블릿 헤더 (768px ~ 1024px 전용) ──[신규]── by smchon / 2026.10.08 ----------
   원본은 헤더가 폭에 따라 세 가지 모드다(원본 CSS/JS와 실제 휠 스크롤로 실측):
     - PC(1025px~): 위 .site-header.is-hidden 규칙(검정 아님, 투명/흰색 headroom)
     - 태블릿(768~1024px): 모양은 햄버거(스마트폰과 동일)지만 동작은 PC처럼 "아래로 스크롤하면
       위로 사라지고(top:-100px), 위로 올리면 흰 배경으로 나타남". 원본 .header-type1:
         .hidden{top:-100px}  .fixed{top:0; 흰 배경; border-bottom:1px solid #dedede; 어두운 로고}
         transition: top .6s
       (기본은 #111 검정, 위로 올리는 순간 .fixed 가 붙어 흰색이 된다.)
     - 스마트폰(~767px): 원본이 position:fixed !important; top:0 !important 로 위 hidden/fixed 를
       무력화 → 항상 검정 고정. 이건 위 ≤1024px 블록 그대로(건드리지 않음).
   JS(nav.js)가 이 구간에서만 원본 알고리즘대로 .is-hidden / .is-solid 를 붙인다.
   원본에서도 흰 헤더 상태일 때 햄버거(흰 막대)가 흰 배경에 묻혀 안 보이는데, 같은 모습이 되도록
   막대 색은 그대로 둔다(원본 재현). 필요하면 아래 .nav-toggle span 색만 바꾸면 된다. */
@media (min-width: 768px) and (max-width: 1024px) {
	/* 숨김: ≤1024px 블록의 transform:none 을 이 구간에서만 되돌림(높이 100px = -100%) */
	.site-header.is-hidden { transform: translateY(-100%); }

	/* 흰 헤더 상태(위로 스크롤): 투명/시작흰색 변형까지 모두 덮어씀 */
	.site-header.is-solid,
	.site-header--transparent.is-solid,
	.site-header--transparent.site-header--start-white.is-solid {
		background: #fff;
		color: var(--header-fg);
		border-bottom: 1px solid #dedede;
	}
	/* 흰 배경이므로 어두운 로고를 보이고 밝은 로고는 숨김 */
	.site-header.is-solid .site-logo__img--light,
	.site-header--transparent.is-solid .site-logo__img--light,
	.site-header--transparent.site-header--start-white.is-solid .site-logo__img--light { opacity: 0; }
	.site-header.is-solid .site-logo__img--dark,
	.site-header--transparent.is-solid .site-logo__img--dark,
	.site-header--transparent.site-header--start-white.is-solid .site-logo__img--dark { opacity: 1; }
	/* 햄버거 막대는 기본이 흰색이라 흰 헤더에서는 안 보인다(원본도 같은 문제). 사용자 지시로
	   원본과 다르게 흰 헤더일 때만 어두운 색으로 반전시킨다. ── by smchon / 2026.10.08 */
	.site-header.is-solid .nav-toggle span,
	.site-header--transparent.is-solid .nav-toggle span,
	.site-header--transparent.site-header--start-white.is-solid .nav-toggle span { background: var(--header-fg-inverted); }
}

/* ---------- 스마트폰(767px 이하) 헤더 아래 선 ──[신규]── by smchon / 2026.10.08 ----------
   실측(원본 .header-type1.fixed): 스마트폰은 헤더가 항상 검정 고정이지만, 위로 스크롤하는 동안
   (원본의 fixed 클래스) 1px #dedede 선이 생긴다(높이 80→81). 평소(맨 위/아래로 스크롤)는 선 없음.
   nav.js 가 위로 스크롤 중에만 .is-scrollup 을 붙인다. */
@media (max-width: 767px) {
	.site-header.is-scrollup { border-bottom: 1px solid #dedede; }
}

/* ---------- 모바일: 본문 콘텐츠 (실측: 767px에서 순간 전환) ----------
   히어로 제목/부제목, section-title 계열, 푸터 등 "콘텐츠" 성격의 요소들은 원본에서
   767px(Elementor 기본 Mobile 기준선)에 맞춰 전환된다. 헤더/네비(1024px)와는 다른
   기준선이라 별도 블록으로 분리. ── by smchon / 2026.09.19 */
@media (max-width: 767px) {
	/* 반응형 타이포그래피 변수 재정의 - 이 값들만 바꾸면 이 변수를 쓰는 모든 섹션
	   (히어로, Industry/Tech&Business/Cloud/Observability/AX Service의 section-title·
	   section-lead, 회사소개, 카드형 텍스트)에 한 번에 반영된다. */
	:root {
		--font-hero-title: 27px;
		--font-hero-title-lh: 36px;
		--font-hero-subtitle: 15px;
		--font-section-title: 22px;
		--font-cloud-title: 30px; /* 실측(in-soft.co.kr 모바일): 22px는 너무 작았음, 원본은 30px .... by smchon / 2026.09.24 */
		--font-section-lead: 16px; /* 15→16, 실측(원본 모바일 16px) 반영 .... by smchon / 2026.09.21 */
		--font-intro-title: 22px;
		--font-intro-lead: 16px; /* 15→16, 실측(원본 모바일 16px) 반영 .... by smchon / 2026.09.21 */
		--font-card-title: 17px;
		--font-card-text: 14px;
		/* 실측: 헤더 높이 100px(데스크탑) → 80px(767px 이하) - 변수로 재정의해두면
		   .site-header__inner의 height:var(--header-height)가 자동으로 따라가고,
		   투명 헤더 히어로(예: about-us)의 "헤더를 뺀 나머지 세로 중앙정렬" 계산도
		   같은 변수를 재사용해 항상 정확한 값을 쓰게 된다. ── by smchon / 2026.09.24 */
		--header-height: 80px;
	}


	/* 실측: 푸터 상단(로고+회사소개)이 데스크탑은 가로 양끝 정렬, 모바일은 세로로
	   쌓이면서 회사소개가 로고 바로 아래 왼쪽 정렬로 붙음 ── [신규] by smchon / 2026.09.19 */
	.site-footer__top { flex-direction: column; align-items: flex-start; gap: 8px; }

	/* 실측: 원본은 부제목을 축소하지 않고 767px에서 통째로 사라졌다 나타남(display:none).
	   display는 트랜지션이 안 되므로 opacity+visibility로 부드럽게 페이드 처리. */
	.hero__subtitle { opacity: 0; visibility: hidden; }

	/* 푸터: 데스크탑은 대표이사/주소/전화/이메일이 구분선과 함께 가로 나열되지만,
	   모바일은 flex-direction만 세로로 바꾸고 구분선을 숨긴다(내용은 그대로,
	   레이아웃만 전환) */
	.site-footer__fields { flex-direction: column; gap: 0; line-height: 20px; }
	.site-footer__field::after { display: none; }
	.site-footer__field { margin-bottom: 4px; }
	.site-footer__field:last-child { margin-bottom: 0; }

	/* 모바일에서 줄 간격이 데스크탑 값(25.2px)보다 좁아 보이도록 살짝 줄임
	   ── [신규] by smchon / 2026.09.19 */
	.site-footer__meta p { line-height: 20px; }
	.site-footer__meta p:first-child { line-height: 22px; }

	/* 홈페이지 본문 섹션 - 모바일에서 그리드/이미지 간격을 좁혀서 스크롤 길이를 줄임
	   (grid/flex는 auto-fit·flex-wrap 덕에 이미 1열로 자연스럽게 쌓이므로 열 구조
	   자체는 그대로 두고 여백만 조정) ── [신규] by smchon / 2026.09.19 */
	/* 레이아웃(세로/가로 배치, 사진 크기)과 섹션 상하 padding은 위쪽 1024px 전용
	   블록에서 처리하고(실측 결과 원본이 그 기준선부터 간격을 줄이기 때문), 여기서는
	   767px 이하 폰트 축소에 맞춰서만 달라지는 그리드 간격/이미지 여백을 조정한다.
	   ── by smchon / 2026.09.22 */
	/* 767px 이하(원본 실측 기준선)에서 데스크탑용 큰 이미지(텍스트가 박힌
	   KakaoTalk 스크린샷)를 숨기고, 아이콘만 있는 작은 이미지(main-06.png)로
	   바꾼 뒤 그 밑에 진짜 텍스트 목록(.tech-grid)을 보여준다. 목록 항목은
	   원본처럼 카드 박스(배경/둥근모서리) 없이 순수 텍스트로만 표시.
	   ── by smchon / 2026.09.23 */
	.tech-business__image--desktop { display: none; }
	/* 사용자 요청으로 사진↔"Cloud"(목록 첫 항목) 간격 1mm 축소. ── by smchon / 2026.09.23 */
	.tech-business__image--mobile { display: block; margin: 0 auto calc(32px - 1mm); }
	/* 실측/사용자 확인: 가운데 정렬은 완료. 간격은 절대 mm 수치가 실제 체감과 안
	   맞아서(사용자: "5mm/2.5mm로 줬는데 실제론 4.5mm/3mm 정도로 보인다"), 수치를
	   더 이상 믿지 않고 "지금 상태에서 0.5mm씩만 더 줄여달라"는 상대 조정 요청에
	   따라 5→4.5mm, 2.5→2mm로 조정. ── by smchon / 2026.09.23 */
	.tech-grid { display: flex; flex-direction: column; gap: 4.5mm; text-align: center; }
	.tech-grid__item { padding: 0; background: none; border-radius: 0; }
	.tech-grid__item h3 { margin: 0 0 2mm; }

	.cloud__grid { gap: 32px; }
	.cloud__list { gap: 16px; }
	.cloud__item { padding: 20px; }
	/* Cloud 영역 맨 아래(4개 박스 끝)↔Observability 사이 간격 - 고정 10mm로
	   단순화했다가, 그러면 가로 화면(747px)에서 간격이 사라진 것처럼 보인다는
	   피드백을 받아 다시 원복함. 375px(10mm)~747px(28mm, 사용자 실제 핸드폰
	   가로 폭 실측값) 사이를 clamp()로 선형 보간 - .observability의 top
	   padding(4.75mm)은 고정, .cloud의 bottom padding만 5.25mm~23.25mm 사이를
	   보간(각각 +4.75mm = 10mm~28mm). 747px~767px는 28mm 유지, 767px 넘어가면
	   (1024px 이하) 기존처럼 4.75mm 고정. ── by smchon / 2026.09.24 */
	.cloud { padding-bottom: clamp(5.25mm, 5.25mm + (100vw - 375px) * 0.18288, 23.25mm); }
	/* 웹버전 전용 확대(로고/제목/설명 폰트)는 모바일에는 아직 적용 안 함 - 이번 요청이
	   "먼저 웹버전부터"였고, 기존 카드 폰트(--font-card-title/text 17/14px)를 하드코딩
	   전이랑 동일하게 유지. ── by smchon / 2026.09.23 */
	.cloud__logo { height: 24px; }
	/* 가운데 정렬(intro 박스/로고/제목)은 1024px 블록으로 옮김 - 실측해보니
	   원본은 1024px 근처(4개 박스가 아래로 wrap되는 시점)부터 이미 시각적으로
	   가운데 정렬돼 있었음(767px에서 켜지는 게 아니었음). 아래는 폰트/색상만.
	   ── by smchon / 2026.09.24 */
	.cloud .section-title { color: #1a1a1a; }
	/* 실측(in-soft.co.kr 모바일, 2026.09.24): 설명 문단이 15px/#555(흐림)로 너무
	   작고 흐렸음 - 원본은 18px/#333(웹버전과 동일한 진한 색)/line-height 24px.
	   또한 원본은 이 폭에서 intro 박스가 고정폭이 아니라 Cloud 섹션 가로 전체를
	   차지해서(아래 4개 박스와 동일한 폭), 문단이 좁은 고정폭 안에서 억지로
	   개행되지 않고 화면 폭에 맞춰 자연스럽게 개행된다 - flex:1 1 100%로 풀어서
	   같은 동작을 재현. ── by smchon / 2026.09.24 */
	.cloud__intro { flex: 1 1 100%; }
	/* "Cloud" 제목 아래 간격 - 처음엔 "지금 간격의 1/3만큼 줄여달라"는 요청으로
	   18→12px로 줄였는데, 사용자가 실제 원본을 DevTools로 직접 열어 비교한
	   결과 원본 h2의 margin-bottom은 0px이고 실제 보이는 간격(10px)은 원본에서
	   h2를 감싸는 elementor-widget-container 쪽 margin-bottom에서 나오는
	   것으로 확인됨(실측: gap 10px, 우리처럼 h2/p 사이 margin이 아니라 감싸는
	   wrapper의 margin) - 우리는 그 wrapper 구조가 없어 h2 자신에게 최종 시각적
	   간격(10px)을 직접 줌. h2 자신의 raw margin-bottom 값 자체는 원본(0)과
	   다르지만, 실제 보이는 간격은 원본과 동일(10px)함. ── by smchon / 2026.09.24 */
	.cloud .section-title { margin-bottom: 10px; }
	.cloud__intro p { font-size: 18px; color: #333; line-height: 24px; margin-top: 0; }
	.cloud__item h3 { font-size: 17px; color: #1a1a1a; }
	/* 실측: 카드 설명문도 14px/#666(흐림)이 아니라 16px/#333(진하게, line-height 1.5)
	   이 원본값. ── by smchon / 2026.09.24 */
	.cloud__item p { font-size: 16px; color: #333; line-height: 1.5; }

	/* 위 .observability .section-lead 확대(28px, line-height 34px)/간격 축소,
	   .observability .section-title 간격 축소는 이번 요청이 "먼저 웹버전부터"
	   였는데, 클래스 선택자가 media query 순서와 무관하게 media query 없는
	   규칙이라 모바일에도 그대로 새어 들어가는 문제가 있어서 여기서 모바일
	   원래 값(공용 .section-title margin-bottom 5px, --font-section-lead 16px+
	   공용 line-height:1.6, margin-bottom 60px)으로 복원해둠. line-height도
	   같이 안 풀어주면 34px 고정값이 그대로 남아 16px 폰트에 비해 지나치게
	   커져버림. ── by smchon / 2026.09.24 */
	.observability .section-title { margin-bottom: 5px; }
	.observability .section-lead { font-size: var(--font-section-lead); line-height: 1.6; margin-bottom: 60px; }
	.observability__desc { margin-bottom: 32px; }
	/* 실측(in-soft.co.kr 모바일): 767px 이하에서는 6개가 flex-direction:column으로
	   한 번에 세로 쌓임(위 desktop nowrap-shrink 구조와 반대). 카드 width:190px는
	   flex-basis라서 column 방향에서는 "높이"로 강제 적용되는 버그가 생기므로
	   flex:none으로 반드시 꺼야 함(이 프로젝트에서 반복된 패턴). 아이콘은 실측상
	   모바일에서도 90px로 안 줄어듦(고정 유지), 라벨 글자는 20px가 아니라
	   18px가 실측값. ── by smchon / 2026.09.24 */
	.observability__grid { flex-direction: column; gap: 10px; }
	/* 실측: 카드 높이가 padding:24px 0(추정치)로는 177.8px가 나와 원본(159px)보다
	   높아서 카드 사이 간격이 좁아 보였음 - height를 실측값으로 직접 고정.
	   ── by smchon / 2026.09.24 */
	.observability__item { flex: none; width: 100%; height: 159px; }
	.observability__item img { width: 90px; height: 90px; }
	.observability__item p { font-size: 18px; }

	/* Solution/Service 상세페이지 공용 컴포넌트 - 모바일 여백/그리드 축소
	   ── [신규] by smchon / 2026.09.19 */
	.detail-hero { padding: 100px 0 40px; }
	.detail-hero__desc { font-size: 15px; }
	/* 실측: Solution 6개 페이지 전용 히어로도 모바일은 세 글자 크기(eyebrow/타이틀/
	   설명)가 전부 20px/30px로 통일됨(데스크탑은 각각 20/56/20px로 달랐음). 배지도
	   살짝 축소. .... by smchon / 2026.09.25 */
	.solution-hero__eyebrow,
	.solution-hero__title,
	.solution-hero__desc { font-size: 20px; line-height: 30px; }
	.solution-hero__title { margin-bottom: 12px; }
	.solution-hero__badge { margin-top: 24px; padding: 8px 16px; gap: 12px; }
	.solution-hero__badge img { width: 40px; height: 40px; }
	.detail-section { padding: 48px 0; }
	.detail-section__desc { margin-bottom: 24px; }
	.detail-features { gap: 20px; }
	.detail-diagram img { margin-bottom: 24px; }
	.detail-diagram__list { gap: 16px; }
	.detail-diagram__list-item { padding: 16px; }
	.detail-stack { gap: 16px; }
	.detail-stack__item img { width: 44px; height: 44px; }

	/* Reference 타임라인 - 모바일에서 월 라벨과 목록을 세로로 쌓음
	   ── [신규] by smchon / 2026.09.19 */
	.timeline__year-label { font-size: 24px; }
	.timeline__month { flex-direction: column; gap: 4px; }
	.timeline__month-label { flex: none; }
}

/* 위 clamp()가 375px 밑에서도 수식상 최솟값(5.25mm)에 고정되긴 하지만, 특정
   모바일 브라우저의 vw+mm 혼합 calc() 처리를 못 믿어 계산 없는 고정값으로
   한 번 더 안전장치를 둠(375px보다 좁은 실제 폰 세로 화면 대비).
   ── by smchon / 2026.09.24 */
@media (max-width: 375px) {
	.cloud { padding-bottom: 5.25mm; }
}

/* ========================================================================
   About us 모바일 - 레이아웃 전환(사진+텍스트 세로 배치)은 원본 실측 기준선인
   1024px에서, 폰트 크기 축소는 767px에서 (프로젝트 공통 관례). by smchon / 2026.09.24 */
@media (max-width: 1024px) {
	.aboutus-intro__grid { flex-direction: column; gap: 24px; }
	.aboutus-intro__photo { flex: none; width: 100%; }
	.aboutus-intro__text { display: block; }
}

@media (max-width: 767px) {
	/* 실측: 모바일은 세로 중앙정렬이 아니라 하단정렬(+ 25px 여백) - 데스크탑처럼
	   중앙정렬하면 헤더(투명, 80.8px)와 타이틀이 겹쳐 보이는 문제가 있었음
	   (모바일 히어로가 210px로 짧아서 중앙정렬 시 타이틀이 72px 지점에서
	   시작해 헤더 영역과 겹침). ── by smchon / 2026.09.24 */
	/* padding-top:0 - 데스크탑 전용 "헤더 높이만큼 빼고 중앙정렬" 트릭(위 기본 규칙의
	   padding-top:var(--header-height))이 여기 새어들어오면 하단정렬 여백 계산이
	   틀어지므로 리셋. ── by smchon / 2026.09.24 */
	.aboutus-hero { min-height: 210px; padding-top: 0; align-items: flex-end; padding-bottom: 25px; }
	.aboutus-hero__title { font-size: 28px; line-height: 28px; margin-bottom: 12px; }
	.aboutus-hero__desc { font-size: 14px; line-height: 25.2px; }

	/* 재실측(1차 실측값 60px는 오류) - 실제로는 히어로 바로 아래 섹션 자체 padding이
	   20px밖에 안 됨(위/아래 모두). 이전 60px는 원본보다 3배 커서 사진 위 공백이
	   과하게 벌어지는 버그였음(사용자 지적: 원본 4mm ↔ 우리 12mm). .... by smchon / 2026.09.24 */
	.aboutus-intro { padding: 20px 0 20px; }
	/* 재실측 - 사진+텍스트 칼럼 자체가 섹션 좌우 여백(20px, .section-inner)에 더해
	   추가로 좌우 20px씩 더 안쪽으로 들어가 있음(모바일 전용, Elementor 반응형
	   패딩). 이걸 놓쳐서 사진 폭이 원본보다 넓게(335px) 렌더링되고, 세로 비율은
	   그대로(67.8%)라 세로로 더 길어져 보이는 버그였음 - "사진이 잘려보인다"던
	   사용자 지적의 원인. .... by smchon / 2026.09.24 */
	.aboutus-intro__grid { padding: 0 40px; gap: 30px; }
	/* 실측: 모바일은 크롭된 카드형 사진이 아니라 원본 이미지 전체를 비율 유지한 채
	   꽉 채워 보여줌(배경이미지 대신 실제 <img>처럼 cover). */
	/* 재실측 - 데스크탑용 about-us-1.png가 아니라 모바일 전용 about-us.png를 쓰고
	   있었음(원본은 두 이미지 파일 자체가 다름 - 모서리 둥글림이 CSS가 아니라
	   PNG 파일에 미리 그려져 있어서, 파일이 다르면 둥근 모서리 위치도 달라짐).
	   background-position도 원본 실측대로 좌하단 기준(0% 100%)으로 바꿔서, 세로로
	   넘치는 부분이 아래가 아니라 위쪽에서 잘리게 함 - 그 결과 진짜 이미지 하단
	   모서리(왼쪽 아래=둥긂, 오른쪽 아래=둥긂)만 보이고 위쪽 두 모서리(크롭되어
	   잘린 부분)는 각지게 보임(사용자가 캡처로 지적한 "오른쪽 위는 각지고 왼쪽
	   아래는 둥근" 패턴과 정확히 일치). .... by smchon / 2026.09.24 */
	/* 3차 재실측 - padding-bottom:67.8%(너비 비례)는 틀렸음. 375px 폭에서 우연히
	   200px로 맞아떨어져서 그땐 안 걸렸는데, 320px/414px 등 다른 폭에서 직접
	   실측해보니 원본은 폭이 얼마든 항상 height:200px 고정값이었음(너비만 유동,
	   높이는 고정). 비례값을 쓰면 폭이 375보다 넓은 실제 폰(390/414 등)에서
	   사진이 원본보다 더 크게(세로로 길게) 잘려 보이는 버그였음(사용자 지적:
	   15mm 더 길어 보임). .... by smchon / 2026.09.24 */
	.aboutus-intro__photo {
		height: 200px;
		background-image: url('/insoft_home/wp-content/uploads/2024/11/about-us.png');
		background-size: cover;
		background-position: left bottom;
	}
	.aboutus-intro__title { font-size: 20px; line-height: 30px; margin-bottom: 10px; text-align: center; }
	.aboutus-intro__desc { font-size: 18px; line-height: 30px; }
	.aboutus-intro__desc p { margin-bottom: 20px; }

	/* 실측: 큰 타이틀 계열은 42px→20px로 큰 폭으로 축소(단순 비례 축소가 아니라
	   원본이 아예 다른 고정값을 씀) - "선언문" 계열(28px/500)은 모바일에서도
	   그대로 유지됨(실측 확인). ── by smchon / 2026.09.24 */
	/* 재실측 - 바로 위 주석과 실제 코드가 어긋나 있었음(주석은 "선언문 유지"라
	   써있는데 코드는 22px로 줄이고 있었음) - .aboutus-statement/.aboutus-core__desc
	   둘 다 원본은 모바일에서도 28px/50.4px 그대로 유지됨(모바일 전용 축소 규칙
	   불필요 - 아래에서 제거). .... by smchon / 2026.09.24 */
	.aboutus-eyebrow-title { font-size: 20px; line-height: 30px; }
	.aboutus-biz .aboutus-eyebrow-title { margin-bottom: 30px; }
	.aboutus-core .aboutus-eyebrow-title { margin-bottom: 50px; }
	/* 실측 - 캡션(아래 이미지 바로 위 소제목) 앞뒤 간격: 이미지 앞은 60px, 이미지
	   뒤(=캡션 자신의 margin-bottom)는 40px로 원본이 비대칭. .... by smchon / 2026.09.24 */
	.aboutus-statement--caption { margin: 60px 0 40px; }

	/* 재실측 - 원본은 이 3카드 그리드 자체가 모바일에서 완전히 숨겨짐
	   (elementor-hidden-mobile) - "비즈니스 모델의 혁신" 통계 문구 다음 바로
	   "Agent와 함께 일하는 혁신 기업" 캡션+다이어그램으로 넘어간다. 원본을 그대로
	   확인해보면 이 카드가 사라진 자리에 빈 여백(약 388px)이 그대로 남아있는데,
	   이건 반응형 숨김 처리가 깔끔하지 않아 생긴 원본 자체의 버그로 보여서 그
	   여백까지 재현하지는 않았다(선언문 margin-bottom 40 + 캡션 margin-top 60 =
	   100px 정도의 정상적인 간격만 남도록 카드를 아예 숨김). .... by smchon / 2026.09.24 */
	.aboutus-biz__features { display: none; }
	/* 데스크탑 기본값(140px)은 위 카드 그리드가 있다는 전제의 여백이라, 그리드를
	   숨긴 모바일에서는 0으로 - 아래 .aboutus-closing의 padding-top(60px)만으로
	   실측 간격(60px)이 맞음. .... by smchon / 2026.09.24 */
	.aboutus-biz { padding-bottom: 0; }
	/* 사용자 지적 - 바로 위 아이엔소프트 소개 섹션과 간격이 거의 없어 붙어보임.
	   원본 간격(388px, 숨긴 카드 자리)은 재현 대상이 아니라서 참고하지 않고,
	   대신 이 페이지 안에서 "적당한 간격"의 기준으로 이미 쓰고 있는
	   eyebrow-title↔statement 간격(30px)과 비슷한 수준으로 맞춤(intro 자체
	   padding-bottom 20px + 여기 10px = 30px). .... by smchon / 2026.09.24 */
	.aboutus-biz { padding-top: 10px; }

	.aboutus-closing { padding: 60px 0 100px; }
	/* ghost-wrap의 margin-bottom을 모바일 실측값(40px)으로 재정의 - 데스크탑은
	   30px. .... by smchon / 2026.09.24 */
	.aboutus-closing__ghost-wrap { margin-bottom: 40px; }
	.aboutus-closing__diagram1 { margin-bottom: 20px; }

	/* 사용자 지적 - Core 섹션 마지막 사진과 footer 사이 공백이 웹버전(원본과 일치)
	   대비 모바일에서만 과도하게(25mm) 벌어져 있었음 - 데스크탑 기본값(120px)은
	   그대로 두고 모바일만 대폭 축소. .... by smchon / 2026.09.24 */
	.aboutus-core { padding-bottom: 10px; }
	/* padding-bottom만으로는 .site-footer 자체의 전역 margin-top:60px(다른 페이지들
	   때문에 필요한 값이라 전역으로는 건드리지 않음)이 더해져서 여전히 70px이나
	   남음 - 기존에 .ax-service 마지막 섹션에 쓰던 것과 같은 :has() 패턴으로
	   about-us 페이지 모바일에서만 footer의 margin-top을 0으로 상쇄. .... by
	   smchon / 2026.09.24 */
	main:has(> .aboutus-core:last-child) + .site-footer { margin-top: 0; }
}


/* ========================================================================
   ── [신규] Solution 페이지 태블릿(768~1024px) / 모바일(~767px) 반응형 - by smchon / 2026.10.08
   실측(원본 iCNP 페이지를 1024 · 768 · 600 · 390px 로 측정). PC(1025px~) 규칙은 건드리지 않고,
   이 블록은 반드시 파일 맨 끝에 둔다(앞쪽의 기존 모바일 규칙을 같은 우선순위로 덮어쓰기 위해).
   ■ 태블릿(768~1024): 소메뉴 탭바 보임(전체 폭 6등분, 위로 스크롤 시 is-moved), 컨테이너 좌우 20px(100% 폭),
     섹션 간 60px · 제목→카드 60px · 제목→설명 20px · 설명→내용 60px, 첫 섹션은 탭바 아래 120px.
     카드는 3열 유지(폭만 줄어듦). 제목·설명은 글자 폭만큼의 상자가 가운데에 놓이고(한 줄이면 가운데, 두 줄로
     꺾이면 왼쪽 정렬 - 원본 그대로), 푸터 위 60px.
   ■ 모바일(~767): 탭바 숨김, 첫 섹션은 히어로 아래 20px, 섹션 간 40px · 제목→내용 20px · 설명→내용 20px,
     제목 20px/30px 가운데, 카드 1열(헤더 16px/24px 안쪽 10px, 본문 16px/26px 안쪽 15px), 다이어그램 박스 1열
     (그림 최대 400px 가운데), 기술 스택 박스는 글씨 위 · 아이콘 아래 세로 가운데, 푸터 위 30px.
   ======================================================================== */
@media (max-width: 1024px) {
	/* 컨테이너와 섹션 간격 */
	.solution-subnav ~ .detail-section { padding-top: 30px; padding-bottom: 30px; }
	.solution-subnav ~ .detail-section .section-inner { padding-left: 20px; padding-right: 20px; max-width: none; }
	.solution-subnav ~ .detail-section:has(+ .detail-closing) { padding-bottom: 0; }
	.solution-subnav ~ .detail-closing { max-width: none; margin: 0; padding: 0 20px; box-sizing: border-box; }
	/* 제목 / 설명 */
	.solution-subnav ~ .detail-section .section-title { font-size: 42px; line-height: 50px; letter-spacing: normal; margin-bottom: 20px; } /* 원본 제목은 글자 간격 없음(PC 는 -1px 그대로 둠) */
	.solution-subnav + .detail-section .section-title,
	.solution-subnav ~ .detail-section .detail-diagram--cards .section-title { margin-bottom: 60px; }
	.solution-subnav ~ .detail-section .detail-section__desc { margin: 20px auto 60px; max-width: none; }
	/* 카드(첫 섹션) */
	.solution-subnav ~ .detail-section .detail-features { gap: 20px; }
	.solution-subnav ~ .detail-section .detail-features__item { min-height: 0; } /* PC 의 220px 최소 높이는 해제(원본은 내용만큼) */
	.solution-subnav ~ .detail-section .detail-features__item h3 { height: auto; min-height: 80px; padding: 20px; }
	.solution-subnav ~ .detail-section .detail-features__item p { padding: 25px; }
	/* 다이어그램 박스 */
	.detail-diagram--cards .detail-diagram__list { gap: 20px; }
	.detail-diagram--cards .detail-diagram__list-item h4 { padding: 30px 0 0; }
	.detail-diagram--cards .detail-diagram__bullets { margin: 19px 0 0; padding: 19px 20px 0; }
	.detail-diagram--cards .section-inner,
	.detail-stack-section.section-inner { padding-left: 20px; padding-right: 20px; }
	/* 기술 스택 박스 */
	.detail-stack--cards { gap: 20px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	/* 소메뉴 탭바: 원본은 태블릿에서도 보인다(768 미만에서만 숨김). 6등분 전체 폭, 라벨이 꺾이면 칸이 높아짐 */
	.solution-subnav { display: block; }
	.solution-subnav__inner { max-width: none; align-items: center; }
	.solution-subnav__item { flex: 1 1 0; min-width: 0; height: auto; min-height: 87px; }
	/* 첫 섹션은 탭바 아래 120px */
	.solution-subnav + .detail-section { padding-top: 120px; }
	/* 제목/설명: 글자 폭만큼의 상자가 가운데, 두 줄로 꺾이면 줄은 왼쪽 정렬(원본 text-align:start) */
	.solution-subnav ~ .detail-section .section-title,
	.solution-subnav ~ .detail-section .detail-section__desc { display: table; margin-left: auto; margin-right: auto; text-align: left; }
	/* 기술 스택 아이콘은 칸이 좁아지면 같이 줄어든다 */
	.detail-stack--cards .detail-stack__item img { flex: 0 1 auto; min-width: 0; max-width: 100%; }
	.detail-stack--cards .detail-stack__text { min-width: 0; overflow-wrap: break-word; }
}

@media (max-width: 767px) {
	/* 탭바 숨김, 첫 섹션은 히어로 바로 아래 20px */
	.solution-subnav { display: none; }
	.solution-subnav ~ .detail-section { padding-top: 20px; padding-bottom: 20px; }
	.solution-subnav + .detail-section { padding-top: 20px; }
	/* 제목 / 설명 - 가운데 정렬, 간격 20px */
	.solution-subnav ~ .detail-section .section-title { font-size: 20px; line-height: 30px; text-align: center; margin-bottom: 20px; }
	.solution-subnav + .detail-section .section-title,
	.solution-subnav ~ .detail-section .detail-diagram--cards .section-title { margin-bottom: 20px; }
	.solution-subnav ~ .detail-section .detail-section__desc { margin: 20px auto 20px; text-align: center; }
	/* 카드(첫 섹션): 헤더 안쪽 10px · 16px/24px, 본문 안쪽 15px · 16px/26px */
	.solution-subnav ~ .detail-section .detail-features__item h3 { min-height: 0; padding: 10px; font-size: 16px; line-height: 24px; }
	.solution-subnav ~ .detail-section .detail-features__item h3:has(br) { line-height: 30px; }
	.solution-subnav ~ .detail-section .detail-features__item p { padding: 15px; font-size: 16px; line-height: 26px; }
	/* 다이어그램 박스: 1열, 그림은 최대 400px 가운데 */
	.detail-diagram--cards .detail-diagram__list-item img { max-width: 400px; margin: 0 auto; }
	.detail-diagram--cards .detail-diagram__list-item:nth-child(1) .detail-diagram__bullets,
	.detail-diagram--cards .detail-diagram__list-item:nth-child(n+4) .detail-diagram__bullets { padding-left: 40px; padding-right: 40px; }
	.detail-diagram--cards .detail-diagram__bullets { padding-bottom: 1px; } /* 원본 모바일 점선 박스는 98→99px */
	/* 기술 스택 박스: 1열, 글씨 위 · 아이콘 아래 세로 가운데 */
	.detail-stack--cards .detail-stack__item { flex-direction: column; justify-content: center; height: auto; padding: 10px; text-align: center; }
	.detail-stack--cards .detail-stack__item:nth-child(n) .detail-stack__text { padding: 0; }
	.detail-stack--cards .detail-stack__item img { width: auto; height: auto; flex: none; margin: 20px 0 0; }
	.detail-stack--cards .detail-stack__item:nth-child(n+2):nth-child(-n+5) img { margin-top: 10px; }
	/* 푸터 위 간격: 마지막이 큰 그림(.detail-closing)이면 30px */
	main:has(> .solution-subnav):has(> .detail-closing:last-child:not(.detail-closing--far)) + .site-footer { margin-top: 30px; }
}

/* ── [신규] 공통 푸터 태블릿/모바일 값 - 원본 푸터 실측(768/600/390px) - by smchon / 2026.10.08
   ≤1024: 좌우 여백 20px, '회사소개' 16px/16px.
   768~1024: 로고 높이 26px, 회사정보 4칸 행 높이 50px(칸이 원본에선 2줄 높이).
   ≤767: 로고 115×30, 회사소개는 로고 아래(간격 15px), 구분선 위 15px, 회사정보는 25.2px 줄간격으로 쌓음. */
@media (max-width: 1024px) {
	.site-footer__inner { padding-left: 20px; padding-right: 20px; }
	.site-footer__side { line-height: 16px; }
	.site-footer__side a { display: block; font-size: 16px; line-height: 16px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.site-footer__logo img { height: 26px; }
	.site-footer__fields { flex-wrap: nowrap; } /* 원본: 4칸이 한 줄에서 같이 줄어들며(좁으면 칸 안에서 2줄) 줄바꿈 */
}
@media (max-width: 767px) {
	.site-footer__logo img { width: 115px; height: 30px; }
	.site-footer__top { gap: 15px; padding-bottom: 15px; margin-bottom: 15px; }
	.site-footer__meta p { line-height: 25.2px; }
	.site-footer__meta p:first-child { line-height: 26px; margin-bottom: 5px; }
	.site-footer__fields { line-height: 25.2px; margin-bottom: 0; }
	.site-footer__field { margin-bottom: 0; }
}

/* ── [신규] Solution 히어로 태블릿/모바일 값 - 원본 실측(1024/768/600/390px) - by smchon / 2026.10.08
   ≤1024: 라벨 20px/30px 굵게(700), 라벨→제목 0 · 제목→설명 30px, 설명 폭 503px(좁은 폭에서만 가득),
          배지는 PC 와 달리 정렬 계산에 포함(위 60px, 글씨 왼쪽 · K-PaaS 마크 오른쪽 57×56, 안쪽 10px 24px).
   ≤767 : 콘텐츠 블록이 세로 가운데보다 약 25px 아래(= 위쪽 51px 보정), 좌우 25px, 제목 20px/30px,
          배지는 가로 전체 폭 박스(안쪽 10px 0) 안에 글씨(위) → 마크 64×63(가운데, 간격 20px) 세로 배치. */
@media (max-width: 1024px) {
	.solution-hero__eyebrow { font-weight: 700; line-height: 30px; margin: 0; }
	.solution-hero__title { margin-bottom: 30px; }
	.solution-hero__desc { max-width: 503px; }
	.solution-hero__badge { position: static; margin-top: 60px; flex-direction: row-reverse; gap: 16px; padding: 10px 24px; }
	.solution-hero__badge img { width: 57px; height: 56px; }
	.solution-hero__badge-text { font-size: 14px; line-height: 14px; }
	.solution-hero__badge-text strong { font-size: 16px; line-height: 16px; margin-top: 4px; }
}
@media (max-width: 767px) {
	.solution-hero { padding-top: 51px; box-sizing: border-box; }
	.solution-hero .section-inner { padding-left: 25px; padding-right: 25px; }
	.solution-hero__title { font-size: 20px; line-height: 30px; margin-bottom: 30px; }
	.solution-hero__badge { display: flex; flex-direction: column-reverse; align-items: stretch; margin-top: 0; gap: 20px; padding: 10px 0; }
	.solution-hero__badge img { width: 64px; height: 63px; margin: 0 auto; position: relative; left: 5px; } /* 원본 마크는 가운데에서 +5px */
	.solution-hero__badge-text strong { margin-top: 0; }
	.solution-hero .hero__scroll { display: none; } /* 원본 모바일 히어로에는 Scroll 안내가 없다(홈 히어로는 별개라 그대로) */
}

/* ── [신규] CloudMesh PC 값 - 원본 실측(1440px) - by smchon / 2026.10.09
   2번째 영역 그림(solution-02-img-01-1.png)은 1240×726 으로 컨테이너 폭을 꽉 채운다(.detail-diagram--wide).
   3번째 영역은 제목만 있는 영역(.detail-section--title-only) - 제목 바로 아래에 큰 그림(.detail-closing)이 붙는다
   (제목→그림 간격 0). 2번째 영역 그림 아래 → 3번째 제목 간격은 120px(일반 140px 보다 20px 작음). */
.detail-diagram--wide img { max-width: none; width: 100%; margin: 0; }
@media (min-width: 1289px) {
	.detail-diagram--wide.section-inner { padding-left: 0; padding-right: 0; }
}
@media (min-width: 1025px) {
	.solution-subnav ~ .detail-section.detail-section--title-only { padding-top: 40px; }
	.solution-subnav ~ .detail-section--title-only .section-title { margin-bottom: 0; }
}

/* ── [신규] CloudMesh 태블릿/모바일 마지막 영역 간격 - 원본 실측(1024/768/600/390px) - by smchon / 2026.10.09
   원본 CloudMesh 는 iCNP 와 달리 마지막 그림 → 푸터 간격이 모든 폭에서 160px(= 그림 아래 100px + 푸터 위 60px).
   3번째 영역(제목만 있는 영역): 2번째 그림 아래 → 제목 간격은 태블릿 120px · 모바일 80px,
   제목 → 큰 그림 간격은 태블릿 0 · 모바일 20px. (.detail-closing--far / .detail-section--title-only) */
@media (max-width: 1024px) {
	.solution-subnav ~ .detail-closing--far { padding-bottom: 100px; }
	.solution-subnav ~ .detail-section--title-only .section-title { margin-bottom: 0; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.solution-subnav ~ .detail-section.detail-section--title-only { padding-top: 90px; }
}
@media (max-width: 767px) {
	.solution-subnav ~ .detail-section.detail-section--title-only { padding-top: 60px; }
	.solution-subnav ~ .detail-section--title-only .section-title { margin-bottom: 20px; }
}

/* ── [신규] CloudMesh 태블릿/모바일 상단 영역 - 원본 실측(1024/768/600/390px) - by smchon / 2026.10.09
   · 카드 헤더 안쪽 여백은 태블릿에서도 10px(iCNP 는 20px) → .detail-features--hdr10
   · 모바일(600px 등)에서 본문 글자는 폭 350px 로 제한되어 카드 가운데에 놓인다(390px 에서는 가득)
   · 첫 영역(카드) 아래 → 2번째 영역 제목 간격: 태블릿 140px · 모바일 80px → .detail-section--after-cards
   · 모바일 히어로는 배지가 없어 콘텐츠가 iCNP 보다 13px 위(위쪽 보정 51px → 25px) → .solution-hero--nobadge */
@media (max-width: 1024px) {
	.solution-subnav ~ .detail-section .detail-features--hdr10 .detail-features__item h3 { padding: 10px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.solution-subnav ~ .detail-section.detail-section--after-cards { padding-top: 110px; }
}
@media (max-width: 767px) {
	.solution-subnav ~ .detail-section.detail-section--after-cards { padding-top: 60px; }
	.solution-subnav ~ .detail-section .detail-features--hdr10 .detail-features__item p { width: 100%; max-width: 380px; align-self: center; }
	.solution-hero.solution-hero--nobadge { padding-top: 25px; }
}

/* ── [신규] EXODUS "기업을 위한 최적화된 Private Cloud 관리 솔루션, Exodus OCMP" 영역 - 원본 실측(1440px) - by smchon / 2026.10.09
   큰 박스(.exo-box): 1240px · 테두리 1px #0099db · 모서리 20px · 안쪽 좌우 30px / 아래 40px, 설명문 아래 70px.
   제목 알약(.exo-box__pill): 박스 위 가운데 붙음, 배경 #0099db · 아래쪽 모서리 10px · 안쪽 7px 26px, 글자 흰색 20px/30px 굵게.
   카드(.exo-card): 3열(379.3px, 간격 20px) · 모서리 20px · 배경 #f5fbfe / #eef3f9 바둑판 교차, OCMM 은 2행 병합.
   카드 안: 제목(20px 굵게 #0099db 가운데) [+ 부제 16px] → 아이콘 66×66(OCMM 178×147) → 설명(18px/26px #333,
   글자 폭만큼의 상자가 가운데, 줄은 왼쪽 정렬, 줄바꿈은 원본 위치). 아이콘 위치는 카드 위에서 약 80px.
   아래 점선 로고 박스(.exo-logos): 높이 155px · 1px dotted #0074a7 · 모서리 20px · 로고 3개 가운데. */
.exo-box { margin-top: 70px; border: 1px solid #0099db; border-radius: 20px; padding: 0 30px 40px; text-align: left; }
.exo-box__pill { width: fit-content; max-width: 100%; min-height: 44px; margin: 0 auto; background: #0099db; border-radius: 0 0 10px 10px; padding: 0 26px; display: flex; align-items: center; justify-content: center; }
.exo-box__pill h3 { margin: 0; font-size: 20px; line-height: 30px; font-weight: 700; color: #fff; text-align: center; }
.exo-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.exo-col { display: flex; flex-direction: column; gap: 20px; }
.exo-card { display: flex; flex-direction: column; align-items: center; border-radius: 20px; padding: 0; min-height: 275px; }
/* 원본 카드 높이(열마다 275 / 242 / 275, OCMM 537) - 내용이 더 길어지면 늘어난다 */
.exo-card--scheduler, .exo-card--opm { min-height: 242px; }
.exo-card--ocmm { min-height: 537px; }
.exo-card--a { background: #f5fbfe; }
.exo-card--b { background: #eef3f9; }
.exo-card--portal { padding-left: 43px; padding-right: 43px; }
.exo-card--osm { padding-left: 42px; padding-right: 42px; }
.exo-card--ocmm { padding-left: 44px; padding-right: 44px; }
.exo-card--cicd { padding-left: 50px; padding-right: 50px; }
/* 아래 여백: 원본은 Portal 카드만 30px 이고 나머지는 0 - 카드 높이는 min-height(275 / 242 / 537)로 정해진다 */
.exo-card { padding-bottom: 0; }
.exo-card--portal { padding-bottom: 30px; }
.exo-card__head { margin-top: 16px; min-height: 64px; padding: 20px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.exo-card__head h4 { margin: 0; font-size: 20px; line-height: 24px; font-weight: 700; color: #0099db; text-align: center; }
.exo-card__sub { margin: 0; font-size: 16px; line-height: 24px; color: #4a4a4a; text-align: center; }
.exo-card--osm .exo-card__head h4, .exo-card--opm .exo-card__head h4, .exo-card--ocd .exo-card__head h4,
.exo-card--osm .exo-card__sub, .exo-card--opm .exo-card__sub, .exo-card--ocd .exo-card__sub { line-height: 18px; }
.exo-card--ocml .exo-card__head { margin-top: 22px; height: 59px; min-height: 0; padding: 0; }
.exo-card--ocml .exo-card__sub { color: #333; }
.exo-card--scheduler .exo-card__head h4 { line-height: 26px; }
/* 부제가 있는 카드(OSM·OPM·OCD): 머리 영역 위아래 11px(부제가 꺾이면 커짐), 제목만 있는 카드는 위아래 20px */
.exo-card--osm .exo-card__head, .exo-card--opm .exo-card__head, .exo-card--ocd .exo-card__head { padding: 11px 0; }
.exo-card--ocmm .exo-card__head { margin-top: 88px; height: auto; min-height: 0; padding: 0; }
.exo-card img { display: block; margin: 0; }
.exo-card--ocmm img { margin-top: 23px; }
.exo-card__text { width: fit-content; max-width: 100%; margin: 20px auto 0; font-size: 18px; line-height: 26px; color: #333; text-align: left; }
.exo-card--opm .exo-card__text { margin-top: 15px; }
.exo-card--ocmm .exo-card__text { margin-top: 40px; }
.exo-logos { margin-top: 20px; height: 155px; display: flex; align-items: center; justify-content: center; border: 1px dotted #0074a7; border-radius: 20px; }
.exo-logos img { display: block; height: auto; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.exo-logos img:nth-child(1) { width: 269px; }
.exo-logos img:nth-child(2) { width: 221px; margin-left: 63px; }
.exo-logos img:nth-child(3) { width: 136px; margin-left: 54px; }
@media (min-width: 1289px) {
	.exo-ocmp.section-inner { padding-left: 0; padding-right: 0; }
}
@media (min-width: 1025px) {
	/* 마지막 박스 아래 → 푸터 160px (푸터 위 60px + 아래 100px) */
	.solution-subnav ~ .detail-section.detail-section--exo-last { padding-bottom: 100px; }
}

/* ── [신규] EXODUS 태블릿/모바일 - 원본 실측(1024/768/600/390px) - by smchon / 2026.10.09
   · 마지막 큰 박스 아래 → 푸터: 모든 폭에서 160px (박스 아래 100px + 푸터 위 60px)
   · 태블릿(768~1024): 구조는 PC 와 같고(3열, 열마다 높이가 독립) 폭만 줄어든다. 로고는 같이 줄어든다.
   · 모바일(~767): 열이 세로로 쌓임, 카드 안쪽 여백 20px(좌우 포함), 제목 알약은 폭 전체(좌우 20px),
     로고 박스는 세로 쌓기(간격 20px, 안쪽 20px), 1→2번째 영역 간격 80px(.detail-section--m80). */
@media (max-width: 1024px) {
	.solution-subnav ~ .detail-section.detail-section--exo-last { padding-bottom: 100px; }
}
@media (max-width: 767px) {
	.solution-subnav ~ .detail-section.detail-section--m80 { padding-top: 60px; }
	.exo-box__pill { width: 100%; padding: 0 20px; }
	.exo-grid { grid-template-columns: 1fr; }
	.exo-card, .exo-card--portal, .exo-card--osm, .exo-card--ocmm, .exo-card--cicd { padding: 20px; }
	.exo-card--ocmm { min-height: 458px; }
	.exo-card--ocmm .exo-card__head { margin-top: 27px; }
	.exo-logos { height: auto; flex-direction: column; justify-content: center; padding: 20px; gap: 20px; }
	.exo-logos img:nth-child(n) { margin-left: 0; }
	.exo-logos img:nth-child(2) { width: min(221px, 52.4%); }
}

/* ── [신규] EXODUS 첫 번째 영역(카드 3개) 태블릿/모바일 - 원본 실측(1024/768/600/390px) - by smchon / 2026.10.09
   · 태블릿: 카드 헤더 최소 높이 없음(제목 줄 수만큼), 본문은 좌우 여백 없이 위아래 30px(글자가 카드 폭을 꽉 채움)
   · 모바일: 첫 카드 제목만 줄 높이 30px (→ .is-lh30)
   · OpenStack 로고(모바일 세로 쌓기)는 가운데에서 +4.5px 오른쪽 */
@media (max-width: 1024px) {
	.solution-subnav ~ .detail-section .detail-features--flush .detail-features__item h3 { min-height: 0; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.solution-subnav ~ .detail-section .detail-features--flush .detail-features__item p { padding: 30px 0; }
}
@media (max-width: 767px) {
	.solution-subnav ~ .detail-section .detail-features__item h3.is-lh30 { line-height: 30px; }
	.exo-logos img:nth-child(2) { position: relative; left: 4.5px; }
}

/* ── [신규] EXODUS 태블릿: 제목·설명문은 두 줄로 꺾여도 가운데 정렬(원본) - by smchon / 2026.10.09
   (iCNP 는 원본이 두 줄로 꺾이면 왼쪽 정렬이라 공통 태블릿 규칙은 왼쪽 정렬 - 가운데인 페이지만 .detail-section--center-t) */
@media (min-width: 768px) and (max-width: 1024px) {
	.solution-subnav ~ .detail-section.detail-section--center-t .section-title,
	.solution-subnav ~ .detail-section.detail-section--center-t .detail-section__desc { text-align: center; }
}

/* ── [신규] OpenManager 6.0 "IT 자원 통합 모니터링 및 최적화" 영역 - 원본 실측(1440px) - by smchon / 2026.10.09
   iCNP 다이어그램 박스(.detail-diagram--cards)와 같은 모양: 박스 400px · 테두리 1px #ccc · 모서리 20px · 위아래 30px,
   사진은 박스 폭 꽉 참(400×280 원본 → 398×278.6), 제목(20px/36px 가운데)은 사진 아래 16px, 점선(위쪽 한 줄, 폭 330px) 아래 설명은
   18px/26px #333 가운데 정렬 + 굵은 글씨(<strong>), 점선 상자 안쪽 좌우 4px(글자 폭 322px). 첫 카드 사진만 좌우 20px 안쪽 · 위 10px (358px). */
.detail-diagram--om .detail-diagram__list-item h4 { padding-top: 16px; }
.detail-diagram--om .detail-diagram__bullets { padding: 19px 4px 0; text-align: center; }
.detail-diagram--om .detail-diagram__list-item p { color: #333; text-align: center; }
.detail-diagram--om .detail-diagram__list-item p::before { display: none; }
.detail-diagram--om .detail-diagram__list-item strong { font-weight: 700; }
.detail-diagram--om .detail-diagram__list-item:first-child img { width: calc(100% - 40px); margin: 10px 20px 20px; }

/* OpenManager 6.0 은 원본에서 탭바 아래 → 첫 제목이 100px (다른 페이지는 120px) - PC 폭 값, 태블릿/모바일은 해당 단계에서 측정 - by smchon / 2026.10.09 */
@media (min-width: 1025px) {
	.solution-subnav + .detail-section.detail-section--top100 { padding-top: 100px; }
}

/* ── [신규] OpenManager 6.0 3·4번째 영역 - 원본 실측(1440px) - by smchon / 2026.10.09
   3번째(흐름도): 제목 아래 60px, 지름 240px 원 4개(채움 #f8f8f8 · 점선 0.8px #0099db 교차)와 화살표 52×52 3개가 가운데에 한 줄,
     화살표 좌우 여백 19.5px(원 사이 91px). 원 안: 채움 첫 원=OpenManager 로고(150×86), 점선 첫 원=제목(20px/26px 굵게 #0099db) +
     목록 3줄(18px/26px, 줄 간격 10px, 파란 말머리, 왼쪽 정렬·원 왼쪽에서 약 41px), 셋째 원=두 줄 제목, 마지막 점선 원=제목 + 로고 3개(가운데).
   4번째: 제목 아래 13px, 큰 사진 4장 2×2(각 620px, 열 간격 0, 행 간격 21.9px), 마지막 사진 아래 → 푸터 160px. */
.om-flow-wrap .section-title { margin-bottom: 60px; }
.om-flow { display: flex; justify-content: center; align-items: center; }
.om-flow__arrow { width: 52px; height: 52px; margin: 0 19.5px; flex: none; }
.om-flow__circle { flex: none; width: 240px; height: 240px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.om-flow__circle--fill { background: #f8f8f8; }
.om-flow__circle--dash { border: .8px dashed #0099db; }
.om-flow__circle img { display: block; max-width: none; }
.om-flow__circle h4 { margin: 0 0 20px; font-size: 20px; line-height: 26px; font-weight: 700; color: #0099db; }
.om-flow__circle p { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; color: #0099db; }
.om-flow__list { align-self: flex-start; margin: 0 0 0 40px; padding: 0; list-style: none; text-align: left; }
.om-flow__list li { position: relative; margin: 0 0 10px; font-size: 18px; line-height: 26px; color: #333; white-space: nowrap; }
.om-flow__list li:last-child { margin-bottom: 0; }
.om-flow__list li::before { content: ''; position: absolute; left: -10px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: #00b5db; }
.om-flow__circle--notify h4 { margin-bottom: 0; }
.om-flow__circle--notify img:nth-of-type(1) { margin-top: 29.4px; }
.om-flow__circle--notify img:nth-of-type(2) { margin-top: 27.2px; }
.om-flow__circle--notify img:nth-of-type(3) { margin-top: 24.7px; }
.om-shots-wrap .section-title { margin-bottom: 13px; }
.om-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 21.9px; }
.om-shots img { display: block; width: 100%; height: auto; }
@media (min-width: 1289px) {
	.om-flow-wrap.section-inner, .om-shots-wrap.section-inner { padding-left: 0; padding-right: 0; }
}
@media (min-width: 1025px) {
	.solution-subnav ~ .detail-section.detail-section--om-last { padding-bottom: 100px; }
}

/* ── [신규] OpenManager 6.0 태블릿 흐름도 - 원본 실측(1024/768px) - by smchon / 2026.10.09
   원본은 7개 요소(원 래퍼 폭 180px[원 240px 은 좌우 30px 넘침] · 화살표 래퍼 폭 52px)를 flex-wrap + justify-content:space-evenly
   (요소 사이 20px) 로 놓아서, 좁아지면 잘리지 않고 아래 줄로 내려온다(1024: 원3+화살표3 / 원1, 768: 원2+화살표2 / 원2+화살표1).
   화살표는 줄 가운데. 마지막 사진 아래 → 푸터는 태블릿에서 60px(PC 160px) → 아래 여백 0. */
@media (max-width: 1024px) {
	.om-flow { flex-wrap: wrap; justify-content: space-evenly; column-gap: 20px; row-gap: 0; }
	.om-flow__circle { margin: 0 -30px; }
	.om-flow__arrow { margin: 0; align-self: center; }
	.solution-subnav ~ .detail-section.detail-section--om-last { padding-bottom: 0; }
	/* 태블릿 공통 제목 아래 20px 규칙이 덮어쓰지 않도록: 흐름도 제목 아래 60px, 사진 제목 아래 13px(원본) */
	.solution-subnav ~ .detail-section .om-flow-wrap .section-title { margin-bottom: 60px; }
	.solution-subnav ~ .detail-section .om-shots-wrap .section-title { margin-bottom: 13px; }
}

/* OpenManager 6.0 첫 영역(카드 2×2) 태블릿: 탭바 아래 → 첫 제목 100px(PC 와 같음), 카드 헤더 안쪽은 PC 와 같은 25px 35px - 원본 실측 1024px - by smchon / 2026.10.09 */
@media (min-width: 768px) and (max-width: 1024px) {
	.solution-subnav + .detail-section.detail-section--top100 { padding-top: 100px; }
	.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item h3 { padding: 25px 35px; }
}

/* ── [신규] OpenManager 6.0 모바일(~767px) - 원본 실측(600/390px) - by smchon / 2026.10.09
   · 첫 영역 카드: 헤더 안쪽 10px(16/24), 본문은 왼쪽 25px · 오른쪽 15px · 위아래 15px, 문단 간격 16px, 말머리는 본문 왼쪽 10px 앞.
   · 2번째 영역 첫 카드 사진: 400px 로 고정하지 않고 카드 폭 - 40px 로 같이 줄어든다(좌우 20px · 위 10px · 아래 20px),
     나머지 카드 사진은 최대 400px 가운데.
   · 3번째 영역 흐름도: 원 4개가 아니라 폭 = 컨테이너 - 40px, 높이 240px 직사각형 4개를 간격 없이 세로로 쌓고 화살표는 숨김.
   · 4번째 영역 사진: 1열(폭 100%), 두 장씩 묶음 사이만 21.9px. */
@media (max-width: 767px) {
	.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item p { padding: 0 15px 0 25px; }
	.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item p:first-of-type { padding-top: 15px; }
	.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item p:last-child { padding-bottom: 15px; }
	.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item p::before { left: 15px; }
	.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item p:first-of-type::before { top: 24px; }

	.detail-diagram--cards.detail-diagram--om .detail-diagram__list-item:first-child img { max-width: none; width: calc(100% - 40px); margin: 10px 20px 20px; }

	.om-flow { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; column-gap: 0; }
	.om-flow__arrow { display: none; }
	.om-flow__circle { width: auto; margin: 0 20px; border-radius: 0; }
	.solution-subnav ~ .detail-section .om-flow-wrap .section-title { margin-bottom: 50px; }
	.om-shots { grid-template-columns: 1fr; row-gap: 0; }
	.om-shots img:nth-child(n+3):nth-child(odd) { margin-top: 21.9px; }
	main:has(> .solution-subnav) > .detail-section--om-last { padding-bottom: 0; }
	main:has(> .detail-section--om-last:last-child) + .site-footer { margin-top: 30px; }
	/* 영역 사이 간격 30px(위 20 + 아래 10), 4번째 영역 제목 아래 20px(태블릿 13px 규칙 덮어쓰기) */
	.solution-subnav ~ .detail-section:has(.detail-features--2col),
	.solution-subnav ~ .detail-section:has(.detail-diagram--om),
	.solution-subnav ~ .detail-section:has(.om-flow-wrap) { padding-bottom: 10px; }
	.solution-subnav ~ .detail-section .om-shots-wrap .section-title { margin-bottom: 20px; }
	.detail-diagram--cards.detail-diagram--om .detail-diagram__list-item:nth-child(n) .detail-diagram__bullets { padding-left: 4px; padding-right: 4px; } /* iCNP 의 첫 카드 좌우 40px 여백은 OM6 에 없음 */
	.solution-hero.solution-hero--nobadge.solution-hero--om { padding-top: 30px; } /* 원본 라벨 위치가 CloudMesh 보다 2.5px 아래 */
	.solution-subnav ~ .detail-section .detail-features--2col .detail-features__item { border-width: 1px; } /* 원본 모바일 카드 테두리 1px(카드 높이 170px) */
}

/* ── [신규] 홈페이지 AX Service: 태블릿(768~1024px)은 PC 와 같은 높이(500px)·글자 크기를 유지, 모바일(~767px)에서만 바뀐다 - 원본 실측(900/768/700px) - by smchon / 2026.10.09
   (이전에는 1024px 이하에서 모바일 값이 적용되어 태블릿에서 높이/글자가 줄어들었음. 아래는 기존 모바일 값을 그대로 옮긴 것) */
@media (max-width: 767px) {
	/* (옮김) AX Service 웹버전 수정(min-height:500px+flex 중앙정렬, 배경이미지)은
	   모바일에는 적용 범위 밖 - display/min-height를 모바일 전용 값으로 되돌려서
	   기존처럼 padding 기반 높이로 복원. top padding(9.5mm)은 Observability와의
	   경계용으로 이미 확정된 값이라 유지, bottom padding은 실측값(40px≈10.58mm)
	   으로 교체(사용자 지적: 마지막 줄 아래 여백이 원본보다 좁음).
	   ── by smchon / 2026.09.24 */
	.ax-service { padding: 9.5mm 0 10.58mm; min-height: auto; display: block; background-size: cover; }
	/* 실측(in-soft.co.kr 모바일): 제목→리드 간격 10px(margin-bottom), 제목
	   폰트도 공용 --font-section-title(22px)이 아니라 20px가 원본값이라 전용
	   지정. ── by smchon / 2026.09.24 */
	.ax-service .section-title { font-size: 20px; margin-bottom: 10px; }
	/* 실측: 리드 문구가 공용 --font-section-lead(16px)이 아니라 20px, line-height
	   24px, margin-bottom도 60px(공용값)이 아니라 20px가 원본값 - 사용자가
	   지적한 "리드↔설명 간격이 원본보다 넓다"의 원인. ── by smchon / 2026.09.24 */
	.ax-service .section-lead { font-size: 20px; line-height: 24px; margin-bottom: 20px; }
	/* 실측: 설명문도 15px가 아니라 16px, line-height 1.8이 아니라 24px(1.5배)가
	   원본값. ── by smchon / 2026.09.24 */
	.ax-service__desc { font-size: 16px; line-height: 24px; }
}

/* ── [신규] OpenManager 7.0 PC 값 - 원본 실측(1440px) - by smchon / 2026.10.09
   · 첫 영역 카드: 본문 안쪽 여백 25.2px(다른 페이지 30px·24px) → 카드 높이 236px (.detail-features--pad26)
   · 2·3번째 영역: 제목 아래 60px 에 그림이 컨테이너 폭(1240px) 꽉 채움 - 그림 1240×595 / 1240×390 (.detail-diagram--wide + .detail-diagram--plain)
   · 마지막 그림 아래 → 푸터 160px (그림 아래 100px + 푸터 위 60px) → .detail-section--b100 */
@media (min-width: 1025px) {
	.solution-subnav ~ .detail-section .detail-features--pad26 .detail-features__item p { padding: 25.2px; }
	.solution-subnav ~ .detail-section .detail-diagram--plain .section-title { margin-bottom: 60px; }
	.solution-subnav ~ .detail-section.detail-section--b100 { padding-bottom: 100px; }
}

/* ── [신규] OpenManager 7.0 히어로 - 원본 실측(1440/1024/768/600/390px) - by smchon / 2026.10.09
   원본은 PC 에서도 태블릿과 같은 구조: 설명 폭 503px · K-PaaS 배지가 정렬 계산에 포함(위 60px, 박스 265×86, 글씨 칸 150px + 간격 10px + 마크 57px).
   모바일(~767px)은 배지가 글씨(위) → 마크(아래) 왼쪽 정렬 세로 배치(박스 전체 폭 · 안쪽 10px 24px · 위 60px · 마크 64×64),
   콘텐츠 위쪽 50px · 아래쪽 20px 여백 안에서 세로 가운데. → .solution-hero--om7 */
.solution-hero--om7 .solution-hero__badge-text { width: 150px; }
@media (min-width: 1289px) {
	.solution-hero--om7 .section-inner { padding-left: 0; padding-right: 0; } /* 원본 PC 컨테이너는 안쪽 여백 없이 x=92.5 */
}
@media (min-width: 1025px) {
	.solution-hero--om7 .solution-hero__eyebrow { font-weight: 700; line-height: 30px; margin: 0; }
	.solution-hero--om7 .solution-hero__title { margin-bottom: 30px; }
	.solution-hero--om7 .solution-hero__desc { max-width: 503px; }
	.solution-hero--om7 .solution-hero__badge { position: static; margin-top: 60px; flex-direction: row-reverse; gap: 10px; padding: 10px 24px; min-height: 86px; box-sizing: border-box; }
	.solution-hero--om7 .solution-hero__badge img { width: 57px; height: 57px; }
	.solution-hero--om7 .solution-hero__badge-text { font-size: 14px; line-height: 14px; }
	.solution-hero--om7 .solution-hero__badge-text strong { font-size: 16px; line-height: 16px; margin-top: 4px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.solution-hero--om7 .solution-hero__badge { gap: 10px; min-height: 86px; box-sizing: border-box; }
	.solution-hero--om7 .solution-hero__badge img { height: 57px; }
}
@media (max-width: 767px) {
	.solution-hero.solution-hero--om7 { padding-top: 50px; }
	.solution-hero--om7 .section-inner { padding-bottom: 20px; }
	.solution-hero--om7 .solution-hero__badge { display: flex; flex-direction: column-reverse; align-items: flex-start; margin-top: 60px; gap: 0; padding: 10px 24px; min-height: 0; }
	.solution-hero--om7 .solution-hero__badge-text { width: auto; }
	.solution-hero--om7 .solution-hero__badge img { width: 64px; height: 64px; margin: 0; left: 0; }
}

/* ── [신규] OpenManager 7.0 태블릿/모바일 본문 - 원본 실측(1024/768/600/390px) - by smchon / 2026.10.09
   · 태블릿: 2·3번째 영역 제목 → 그림 60px, 영역 사이 60px, 마지막 그림 → 푸터 60px
   · 모바일: 제목 → 그림 20px, 영역 사이 50px(위 20 + 아래 30), 마지막 그림 → 푸터 30px
   · 첫 영역 카드 제목 둘은 줄 높이 30px (.is-lh30), 셋째는 24px */
@media (min-width: 768px) and (max-width: 1024px) {
	.solution-subnav ~ .detail-section .detail-diagram--plain .section-title { margin-bottom: 60px; }
	.solution-subnav ~ .detail-section :is(.detail-features--pad26, .detail-features--hdr25) .detail-features__item h3 { padding: 25px 0; } /* 카드 제목 띠 위아래 25px (제목이 두 줄이면 110px) */
}
@media (max-width: 1024px) {
	.solution-subnav ~ .detail-section.detail-section--b100 { padding-bottom: 0; }
}
@media (max-width: 767px) {
	.solution-subnav ~ .detail-section:has(.detail-features--pad26, .detail-features--hdr25),
	.solution-subnav ~ .detail-section:has(.detail-diagram--plain):not(.detail-section--b100) { padding-bottom: 30px; }
	.solution-subnav ~ .detail-section :is(.detail-features--pad26, .detail-features--hdr25) .detail-features__item p { width: 100%; max-width: 380px; align-self: center; } /* 넓은 모바일 폭에서 본문 글자 폭 350px 가운데 */
	main:has(> .detail-section--b100:last-child) + .site-footer { margin-top: 30px; }
}

/* ── [신규] CloudX 2~4번째 영역 그림 - 원본 실측(1440px) - by smchon / 2026.10.09
   그림은 원본 크기 그대로(1240 / 1240 / 1124px, 컨테이너보다 좁으면 줄어듦) 가운데, 제목 아래 60px(.detail-diagram--plain),
   마지막 그림 아래 → 푸터 160px(.detail-section--b100). 히어로는 OpenManager 7.0 과 같은 구조(.solution-hero--om7, 배지 없음). */
.detail-diagram--natural img { width: auto; max-width: 100%; height: auto; margin: 0 auto; }
@media (min-width: 1289px) {
	.detail-diagram--natural.section-inner { padding-left: 0; padding-right: 0; }
}
/* 4번째 영역 그림은 제목과 80px(다른 그림은 60px) - 원본 1440/1024/768px 실측 */
@media (min-width: 768px) {
	.solution-subnav ~ .detail-section .detail-diagram--img20 .section-title { margin-bottom: 80px; }
}

/* ── [신규] Experiences 페이지 - 원본 실측(1440px) - by smchon / 2026.10.09
   히어로: 높이 350px(맨 위부터 · 헤더가 위에 겹침), 윗여백 75px 아래에서 제목(56px/56px · 굵게 · 글자 간격 -1.4px)과 부제(18px/32.4px)가 간격 20px 로 세로 가운데.
   본문: 히어로 아래 70px 에 제목(42px/50px · 굵게 · #111 · 가운데), 제목 아래 120px 에 카드 3열(400px · 간격 20px) × 4행(높이 540px, 행 간격 20px), 마지막 줄 아래 160px.
   카드: 배경 사진(400×540, 왼쪽 위) 위 흰 글씨 - 제목 윗여백 50px(28px/34px · 굵게 · 칸 높이 138px), 밑줄 부제(18px/26px · 500, 아래 10px), 설명(14px/24px), 글씨 왼쪽 30px. */
.exp-hero {
	min-height: 350px;
	box-sizing: border-box;
	padding-top: 75px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	background-color: #1d3b6e;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	text-align: center;
}
.exp-hero__title { margin: 0; font-size: 56px; line-height: 56px; font-weight: 700; letter-spacing: -1.4px; color: #fff; }
.exp-hero__desc { margin: 0; font-size: 18px; line-height: 32.4px; color: #fff; }
.exp-section { padding: 70px 0 100px; } /* 마지막 카드 아래 → 푸터 160px = 100px + 푸터 위 60px */
.exp-title { margin: 0 0 120px; font-size: 42px; line-height: 50px; font-weight: 700; letter-spacing: -1.05px; color: #111; text-align: center; }
.exp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.exp-card {
	min-height: 540px;
	box-sizing: border-box;
	padding-bottom: 30px;
	background-repeat: no-repeat;
	background-position: 0 0;
	color: #fff;
}
/* 원본 8~12번째 카드는 배경 사진이 없어 흰 글씨가 안 보이는 상태(회사에서 의도적으로 가린 것으로 보임) → 내용은 지우지 않고
   자리만 차지한 채 안 보이게 처리(visibility:hidden). 나중에 다시 보이게 하려면 이 규칙(.exp-card--plain)만 지우면 됨. - by smchon / 2026.10.09 */
.exp-card--plain { visibility: hidden; }
.exp-card__title { box-sizing: border-box; min-height: 138px; margin: 0; padding: 50px 0 20px 30px; font-size: 28px; line-height: 34px; font-weight: 700; color: #fff; }
.exp-card--t340 .exp-card__title { padding-right: 30px; }
.exp-card__sub { margin: 0 30px 10px; font-size: 18px; line-height: 26px; font-weight: 500; text-decoration: underline; }
.exp-card--sub325 .exp-card__sub { margin-right: 45px; } /* 원본 4번째 카드 부제 폭 325px */
.exp-card__desc { margin: 0 30px; font-size: 14px; line-height: 24px; font-weight: 400; }
@media (min-width: 1289px) {
	.exp-section .section-inner { padding-left: 0; padding-right: 0; }
}

/* ── [신규] Experiences 태블릿/모바일 - 원본 실측(1024/768/600/390px) - by smchon / 2026.10.09
   태블릿(768~1024px): PC 와 같은 구조에서 카드 폭만 줄어든다(3열 유지, 높이 540px). 제목 칸 아래 여백만 54px(제목이 줄바꿈되면 칸이 늘어남).
   모바일(~767px): 히어로 높이 210px(글씨는 아래쪽: 제목 28px/28px · 부제 14px/25.2px · 간격 6px · 아래 25px), 히어로 아래 30px 에 제목(20px/50px),
   제목 아래 30px 에 카드 1열(간격 20px · 높이는 내용만큼 · 배경 사진은 폭 100%), 카드 아래 여백은 앞 3개 30px · 나머지 20px, 마지막 카드 → 푸터 30px. */
@media (min-width: 768px) and (max-width: 1024px) {
	.exp-card__title { padding-bottom: 54px; }
}
@media (max-width: 767px) {
	.exp-hero { min-height: 210px; justify-content: flex-end; gap: 6px; padding: 0 0 25px; margin-bottom: 30px; }
	.exp-hero__title { font-size: 28px; line-height: 28px; }
	.exp-hero__desc { font-size: 14px; line-height: 25.2px; }
	.exp-section { padding: 0; }
	.exp-title { margin-bottom: 30px; font-size: 20px; }
	.exp-grid { grid-template-columns: minmax(0, 1fr); }
	.exp-card { min-height: 0; padding-bottom: 20px; background-size: 100% auto; }
	.exp-card:nth-child(-n+3) { padding-bottom: 30px; }
	main:has(> .exp-section:last-child) + .site-footer { margin-top: 30px; }
	/* 원본 모바일: 안 보이는 카드들(8·9·11·12번째)은 앞 카드에 간격 없이 붙어 쌓임(10번째 카드부터 새 줄 → 20px) */
	.exp-card--plain:nth-child(8), .exp-card--plain:nth-child(9), .exp-card--plain:nth-child(11), .exp-card--plain:nth-child(12) { margin-top: -20px; }
}

/* ── [신규] Reference(주요연혁) 페이지 - 원본 실측(1440px) - by smchon / 2026.10.09
   히어로는 Experiences 와 같은 구조(.exp-hero) + 아래 1px. 본문은 가로 2칸 탭 위젯:
   왼쪽(폭 38.55% · 연한 파란색 #f5fbfe · 안쪽 위 130px 오른쪽 102px): 탭 4개(오른쪽 정렬, 선택된 탭 42px/50px 굵게 · 나머지 28px/50.4px) +
     선택된 탭 아래 그림(280px · 위아래 여백 50px · 오른쪽 가운데).
   오른쪽(안쪽 위 119px · 왼쪽 105px · 오른쪽 300px): "주요연혁"(42px/50px 굵게, 아래 50px) → 연도 줄(연도 28px 굵게 #0199db | 점선 상자: 위 여백 17px,
     점선 0.8px #0099db, 안쪽 위 37px, 월 줄 간격 42px) → 월(20px/26px 굵게 · 폭 64px) + 프로젝트 목록(18px/26px · 항목 간격 25px · 파란 점 5px).
   연도 줄 사이 60px (2023년 탭의 2025→2024 만 0px, 원본 그대로), 마지막 아래 60px + 푸터 위 20px. */
.exp-hero--ref { margin-bottom: 1px; }
.ref-tabs { display: flex; margin-bottom: 20px; }
.ref-tabs__head {
	box-sizing: border-box;
	flex: 0 0 38.55%;
	display: flex;
	flex-direction: column;
	padding: 130px 102px 0 0;
	background: #f5fbfe;
}
.ref-tab {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 28px;
	line-height: 50.4px;
	font-weight: 400;
	color: #111;
	text-align: end;
	margin-bottom: 80px;
}
.ref-tab.is-on { font-size: 42px; line-height: 50px; font-weight: 700; margin-bottom: 0; }
.ref-tab-image { height: 0; margin: 0; opacity: 0; background-repeat: no-repeat; background-position: 100% 50%; background-size: auto; }
.ref-tab > span:hover { color: #0099db; }
.ref-tab.is-on > span:hover { color: #111; }
/* 원본: 새로 선택된 탭의 그림만 0.5초 동안 열리고(위→아래), 이전 탭의 그림은 즉시 닫힌다 → transition 은 선택된 쪽에만 */
.ref-tab.is-on + .ref-tab-image { height: 280px; margin: 50px 0; opacity: 1; transition: all .5s ease; }
/* 오른쪽 여백: 원본은 300px 고정이라 주요연혁 영역이 너무 좁았음 → 화면 폭에 비례(10.5% ≈ 1440px 에서 150px, 원본의 절반)해서 같이 줄어들게 함 - 원본과 다른 요청 사항 */
.ref-tabs__body { box-sizing: border-box; flex: 1 1 0; min-width: 0; padding: 119px 10.5% 60px 105px; }
.ref-panel { display: none; }
.ref-panel.is-on { display: block; }
.ref-title { margin: 0 0 50px; font-size: 42px; line-height: 50px; font-weight: 700; color: #111; }
.ref-year-row { display: flex; gap: 20px; margin-top: 60px; }
.ref-title + .ref-year-row, .ref-year-row--tight { margin-top: 0; }
/* 연도는 원본에서 하나만(최신 연도) 파란색, 나머지는 #111. 4자리 연도가 "202/5" 처럼 꺾이지 않도록 white-space:nowrap, 칸 폭은 글자 폭 그대로(auto)라서
   연도 ↔ 점선 간격은 어떤 화면 폭에서도 20px 로 일정(원본과 다른 요청 사항) - by smchon / 2026.10.09 */
.ref-year { flex: 0 0 auto; min-width: 0; margin: 0; font-size: 28px; line-height: 28px; font-weight: 600; color: #111; white-space: nowrap; }
.ref-year--hl { color: #0199db; }
.ref-months { flex: 1 1 0; min-width: 0; box-sizing: border-box; margin-top: 17px; padding-top: 37px; border-top: .8px dashed #0099db; display: flex; flex-direction: column; gap: 42px; }
.ref-month { display: flex; gap: 30px; }
.ref-month__label { flex: 0 1 64.15px; min-width: 41.8px; margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; color: #333; }
.ref-month__items { flex: 1 1 289.5px; min-width: 0; display: flex; flex-direction: column; gap: 25px; }
.ref-item { position: relative; margin: 0; font-size: 18px; line-height: 26px; font-weight: 400; color: #333; }
.ref-item::before { content: ''; position: absolute; left: -11px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: #00b5db; }
main:has(> .ref-tabs:last-child) + .site-footer { margin-top: 0; }

/* ── [신규] Reference 모바일(~767px) 아코디언 - 원본 실측(390px) - by smchon / 2026.10.09
   히어로 높이 210px(Experiences 모바일 히어로와 같음), 아래 41px 에 "주요연혁"(24px/24px 가운데, 아래 34px) → 20px → 아코디언 4개(각 76px 높이 · 모서리 20px ·
   배경 사진 mo-ref1~4 가로 100% 가운데 · 흰 제목 20px/34px 굵게 가운데, 항목 사이 15px). 펼친 안쪽: 연도(20px/34px 600 · 위 30px · 최신 연도만 파랑),
   월(14px/20px 굵게, 왼쪽 58px) + 목록(16px/24px · 파란 점 5px · 간격 15px), 월 줄 아래 30px. 마지막 → 푸터 61px. */
.ref-acc { display: none; }
@media (max-width: 767px) {
	.ref-tabs { display: none; }
	.exp-hero.exp-hero--ref { margin-bottom: 0; }
	.ref-acc { display: block; padding: 0 25px; margin-bottom: 61px; }
	.ref-acc__title { margin: 41px 0 54px; font-size: 24px; line-height: 24px; font-weight: 700; color: #111; text-align: center; }
	.ref-acc-item { margin-bottom: 15px; }
	.ref-acc-item:last-child { margin-bottom: 0; }
	.ref-acc-item > summary {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 76px;
		padding: 10px;
		border-radius: 20px;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: 100% auto;
		color: #fff;
		font-size: 20px;
		line-height: 34px;
		font-weight: 700;
		cursor: pointer;
		list-style: none;
	}
	.ref-acc-item > summary::-webkit-details-marker { display: none; }
	.ref-acc-body { overflow: hidden; }
	.ref-acc-year { margin: 70px 0 0; font-size: 20px; line-height: 34px; font-weight: 600; color: #111; } /* 앞 월 줄 아래 30px 와 겹쳐 연도 사이 70px */
	.ref-acc-body > .ref-acc-year:first-child { margin-top: 30px; }
	.ref-acc-year.ref-year--hl { color: #0199db; }
	.ref-acc-month { display: flex; margin-bottom: 30px; }
	.ref-acc-month__label { flex: 0 0 71.1px; box-sizing: border-box; margin: 0; padding-left: 58px; font-size: 14px; line-height: 20px; font-weight: 700; color: #111; }
	.ref-acc-month__items { flex: 1 1 0; min-width: 0; margin-left: 30.9px; display: flex; flex-direction: column; gap: 15px; }
	.ref-acc-item-text { position: relative; margin: 0; font-size: 16px; line-height: 24px; color: #333; }
	.ref-acc-item-text::after { content: ''; position: absolute; left: -11px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: #00b5db; }
}

/* ── [신규] About us PC·태블릿 간격·크기 - 원본 실측(1440/1024/768px, 이미지 로드 후) - by smchon / 2026.10.09
   히어로 글씨 위쪽 75px 기준(제목 y158). 소개(PC): 사진 506×450 + 글(위 정렬: 제목 아래 82px, 문단 간격 30px).
   비즈니스 모델: 큰 제목 아래 60px → 선언문(28px) 아래 20px → 카드 영역 높이 218px → 50px → 캡션 → 아래 40px → 그림(폭 컨테이너-20px) → 60px 반복.
   Let's…: 캡션 아래 40px → 두 줄 문구 상자(안쪽 10px · 최소 높이 163px · 세로 가운데) → 20px → 그림 1(원본 814×325 가운데) → 20px → 그림 2(폭 컨테이너-40px) → 130px.
   Core: 제목과 (Solutions and Experience) 한 줄 가운데 → 아래 40px → 그림(폭 컨테이너 전체). 컨테이너는 좌우 안쪽 여백 20px(1289px~ 는 없음 → 폭 1240px). */
@media (min-width: 768px) {
	.aboutus-hero { padding-top: 75px; }
	.aboutus-biz .section-inner, .aboutus-closing .section-inner, .aboutus-core .section-inner { padding-left: 20px; padding-right: 20px; }
	.aboutus-biz { padding-bottom: 0; }
	.aboutus-biz .aboutus-eyebrow-title { margin-bottom: 60px; }
	.aboutus-biz .aboutus-statement { margin: 0 0 20px; }
	.aboutus-biz__features { min-height: 218px; margin: 0 0 50px; }
	.aboutus-biz .aboutus-statement--caption { margin: 0 0 40px; }
	.aboutus-closing { padding: 0 0 130px; }
	.aboutus-core__head { display: flex; align-items: center; justify-content: center; gap: 4.9px; margin-bottom: 40px; padding: 0 10px; }
	.aboutus-core .aboutus-eyebrow-title { margin: 0; }
	.aboutus-core__desc { margin: 0; text-align: start; }
}
@media (min-width: 1025px) {
	.aboutus-intro__text { justify-content: flex-start; }
	.aboutus-intro__title { margin-bottom: 82px; }
	.aboutus-intro__desc p { margin-bottom: 30px; }
	.aboutus-intro__desc p:last-child { margin-bottom: 0; }
}
@media (min-width: 1289px) {
	.aboutus-biz .section-inner, .aboutus-closing .section-inner, .aboutus-core .section-inner { padding-left: 0; padding-right: 0; }
}
/* 모든 폭 공통: 캡션/그림/문구 상자 폭(원본 컨테이너 안쪽 여백 10px 씩) - 캡션·그림 100%-20px, 문구 상자·그림 2 는 100%-40px */
.aboutus-statement--caption, .aboutus-closing .aboutus-statement { width: calc(100% - 20px); margin-left: auto; margin-right: auto; }
.aboutus-diagram { width: calc(100% - 20px); margin: 0 auto 60px; }
.aboutus-diagram:last-child { margin-bottom: 60px; }
.aboutus-closing .aboutus-statement { margin-bottom: 40px; }
.aboutus-closing__ghost-wrap { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; width: calc(100% - 20px); min-height: 163px; margin: 0 auto 30px; padding: 10px; }
.aboutus-closing__ghost { margin: 0; }
.aboutus-closing__diagram1 { margin-top: 0; max-width: calc(100% - 40px); }
.aboutus-closing__diagram2 { width: calc(100% - 40px); margin: 0 auto; }

/* ── [신규] About us 모바일(~767px) 간격 - 원본 실측(600/390px) - by smchon / 2026.10.09
   히어로 제목 6px 아래로(부제와 간격 6px). 소개 문단 간격 30px, 소개 → 비즈니스 제목 220px(보이지 않는 카드 영역 때문에 선언문 아래 388px).
   컨테이너 안쪽 여백 없음(큰 제목·선언문·Core 그림은 화면 폭 전체, 캡션·그림은 좌우 10px, 문구·그림 2 는 20px). 문구 위 50px 대신 상자 규칙 공통,
   그림 2 → Core 제목 160px, Core 제목 아래 50px · 그림 아래 40px, Core 그림 → 푸터 0px. */
@media (max-width: 767px) {
	.aboutus-hero__title { margin-bottom: 6px; }
	.aboutus-intro { padding-bottom: 210px; }
	.aboutus-intro__desc p { margin-bottom: 30px; }
	.aboutus-intro__desc p:last-child { margin-bottom: 0; }
	.aboutus-biz .section-inner, .aboutus-closing .section-inner, .aboutus-core .section-inner { padding-left: 0; padding-right: 0; }
	.aboutus-biz .aboutus-statement:not(.aboutus-statement--caption) { margin-bottom: 388px; }
	.aboutus-biz .aboutus-statement--caption { margin-top: 0; margin-bottom: 40px; }
	.aboutus-closing { padding: 0 0 160px; }
	.aboutus-core { padding-bottom: 0; }
	.aboutus-core__head { display: block; padding: 0; margin-bottom: 40px; }
	.aboutus-core .aboutus-eyebrow-title { margin: 0 0 50px; }
	.aboutus-core__desc { text-align: center; }
}

/* ── [신규] Client 페이지 - 원본 실측(1440/1024/768/600/390px) - by smchon / 2026.10.09
   PC·태블릿: 히어로(350px) 아래 110px 에 제목(42px/42px 굵게 #111 가운데) → 아래 20px → 설명(18px/26px #555, 가운데 상자 · 줄바꿈 시 왼쪽 정렬) → 아래 60px →
   로고 칸 4열(칸 100px · 테두리 0.8px #eee · 가로 간격 20px · 세로 간격 40px, 컨테이너 1240px · 태블릿은 화면 폭 전체), 마지막 칸 아래 100px + 푸터 위 60px = 160px.
   모바일(~767px): 제목 18px/18px(히어로 아래 30px), 설명 좌우 20px, 로고 칸 1열(좌우 20px · 간격 20px) 이고 푸터와 간격 30px(0 + 아래 30px). */
.clientp { padding: 110px 0 100px; }
.clientp__inner { max-width: 1240px; margin: 0 auto; }
.clientp__title { margin: 0 0 20px; font-size: 42px; line-height: 42px; font-weight: 700; color: #111; text-align: center; }
.clientp__desc { width: fit-content; max-width: 100%; margin: 0 auto; font-size: 18px; line-height: 26px; font-weight: 400; color: #555; text-align: start; }
.clientp__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; margin-top: 60px; }
.clientp__item { display: block; box-sizing: border-box; height: 100px; border: .8px solid #eee; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; background-size: auto; }
@media (max-width: 767px) {
	.clientp { padding: 30px 0 30px; }
	.clientp__inner { padding: 0 20px; }
	.clientp__title { margin-bottom: 10px; font-size: 18px; line-height: 18px; }
	.clientp__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 30px; }
	main:has(> .clientp:last-child) + .site-footer { margin-top: 0; }
}

/* ── [신규] Location 페이지 - 원본 실측(1440/1024/768/600/390px) - by smchon / 2026.10.09
   PC·태블릿: 히어로(350px) 아래 60px 에 제목(42px/50px 굵게 #111 가운데) → 20px → 설명(18px/26px #555 가운데) → 60px → 지도(높이 459px, 직각, 컨테이너 1240px · 태블릿은 화면 폭 전체),
   지도 아래 → 푸터 200px.  모바일(~767px): 히어로 아래 30px, 제목 18px/28px, 설명과 붙어 있고(간격 0), 지도는 설명 아래 20px · 화면 폭 전체, 푸터와 간격 0. */
.locp { padding: 60px 0 200px; }
.locp__inner { max-width: 1240px; margin: 0 auto; }
.locp__title { margin: 0 0 20px; font-size: 42px; line-height: 50px; font-weight: 700; color: #111; text-align: center; }
.locp__desc { margin: 0 0 60px; font-size: 18px; line-height: 26px; font-weight: 400; color: #555; text-align: center; }
.locp__map { height: 459px; }
.locp__map iframe { display: block; width: 100%; height: 459px; border: 0; }
main:has(> .locp:last-child) + .site-footer { margin-top: 0; }
@media (max-width: 767px) {
	.locp { padding: 30px 0 0; }
	.locp__title { margin-bottom: 0; font-size: 18px; line-height: 28px; }
	.locp__desc { margin-bottom: 20px; }
}

/* ── [신규] Contact 페이지 - 원본(WPForms) 실측(1440/1024/768/600/390px) + 원본 CSS - by smchon / 2026.10.09
   PC·태블릿: 히어로(350px) 아래 60px 에 제목 "Contact US"(42px/50px 굵게 #111 가운데) → 20px → 설명(18px/26px #555 가운데) → 60px → 폼(폭 648px 가운데).
   폼: 입력칸 3개(이름·이메일 높이 60px, 메시지 120.4px) · 칸 위아래 여백 15px(칸 사이 30px) · 배경 #F7F9FE · 테두리 1px #F7F9FE · 모서리 16px · 글씨 18px #777 ·
   안쪽 왼쪽 74px(아이콘 자리, 아이콘은 왼쪽 30px · 칸 안쪽 가운데 세로) · 글자 수 제한 없음. 버튼: 190×56px 가운데(위 20px), 배경 #1A1311 · 흰 글씨 18px 400 · 글자 간격 1.8px · 대문자(SEND MESSAGE) ·
   테두리 1px #fff · 모서리 16px, 마우스를 올리면 20% 더 어둡게. 폼 아래 → 푸터 124px(24px + 100px).
   모바일(~767px): 히어로 아래 30px, 제목 18px/28px, 설명과 간격 10px, 폼은 좌우 20px 여백 · 화면 폭 전체(버튼도 폭 100%). */
.contactp { padding: 60px 20px 124px; }
.contactp__title { margin: 0 0 20px; font-size: 42px; line-height: 50px; font-weight: 700; color: #111; text-align: center; }
.contactp__desc { margin: 0 0 60px; font-size: 18px; line-height: 26px; font-weight: 400; color: #555; text-align: center; }
.contactp__form { width: 100%; max-width: 648px; margin: 0 auto; }
.contactp__field { position: relative; padding: 15px 0; }
.contactp__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.contactp__field input, .contactp__field textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0 14px 0 74px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 400;
	color: #777;
	background-color: #f7f9fe;
	border: 1px solid #f7f9fe;
	border-radius: 16px;
	transition: border .15s, box-shadow .15s;
}
.contactp__field input { height: 60px; line-height: 18px; }
.contactp__field textarea { height: 120.4px; min-height: 43px; padding: 14px 14px 14px 74px; line-height: 23.4px; resize: vertical; }
.contactp__field input::placeholder, .contactp__field textarea::placeholder { color: #777; opacity: 1; }
.contactp__field input:focus, .contactp__field textarea:focus { outline: none; } /* 원본은 포커스 때 테두리·그림자·윤곽선이 바뀌지 않음 */
.contactp__field::after { content: ''; position: absolute; top: 46px; left: 30px; background-repeat: no-repeat; transform: translateY(-50%); pointer-events: none; }
.contactp__field--name::after { width: 18px; height: 20px; background-image: url('/insoft_home/wp-content/uploads/2024/11/contact-name.png'); }
.contactp__field--email::after { width: 23px; height: 18px; background-image: url('/insoft_home/wp-content/uploads/2024/11/contact-mail.png'); }
.contactp__field--message::after { width: 20px; height: 20px; background-image: url('/insoft_home/wp-content/uploads/2024/11/icon-message.png'); }
.contactp__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contactp__submit { margin-top: 20px; text-align: center; }
.contactp__submit button {
	box-sizing: border-box;
	width: 190px;
	height: 56px;
	padding: 14px 20px;
	font-family: inherit;
	font-size: 18px;
	line-height: 18px;
	font-weight: 400;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	white-space: pre;
	color: #fff;
	background-color: #1a1311;
	border: 1px solid #fff;
	border-radius: 16px;
	cursor: pointer;
	transition: .3s;
}
.contactp__submit button:hover, .contactp__submit button:active { background-image: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)); }
/* ── [신규] 문의 접수 결과 표시(원본 WPForms 실측): 일반 오류는 버튼 위 회색 글씨, 성공은 폼 자리에 연두색 상자 ── by smchon / 2026.10.22 */
.contactp__notice { display: none; margin: 20px 0 0; padding: 0; color: #777; font-size: 16px; line-height: 19px; text-align: left; }
.contactp__notice.is-visible { display: block; }
.contactp__notice a { color: inherit; text-decoration: underline; }
.contactp__notice-hl { color: #d63637; } /* 메일 발송 실패·네트워크 오류 문구의 첫 문장(빨간색) .... by smchon / 2026.10.22 */
.contactp__success { display: none; width: 100%; max-width: 479px; margin: 0 auto; padding: 15px; box-sizing: border-box; background: #e0ffc7; border: 1px solid #b4d39b; color: #333; font-size: 15px; line-height: 24px; text-align: center; } /* 폭 479px = 위 설명 문구("아이엔소프트가 여러분의 비즈니스 성공을…") 글자 폭 407px + 양쪽 36px(18px 글자 2자씩), 글씨는 원본(14px)보다 조금 크게 15px .... by smchon / 2026.10.22 */
.contactp__success.is-visible { display: block; }
.contactp__success p { margin: 0; }
.contactp__submit button:disabled { cursor: default; opacity: .7; }
main:has(> .contactp) + .site-footer { margin-top: 0; }
@media (max-width: 767px) {
	.contactp { padding: 30px 20px 124px; }
	.contactp__title { margin-bottom: 10px; font-size: 18px; line-height: 28px; }
	.contactp__field { padding-left: 1px; padding-right: 1px; }
	.contactp__submit button { width: 100%; }
}

/* Contact 입력 안내(원본 WPForms 와 같음): 필수·형식 오류 / 이메일 오타 제안 = 입력칸 아래 14px/17px #777(위 15px · 왼쪽 5px) + 앞에 경고 아이콘(16×14px, 글자색),
   제안 링크는 #333(밑줄 없음). - by smchon / 2026.10.09 */
.contactp__error { display: block; position: relative; min-width: 120px; margin-top: 15px; padding: 0 0 0 5px; font-size: 14px; font-style: normal; font-weight: 400; line-height: 17px; color: #777; cursor: default; }
.contactp__error::before {
	content: '';
	position: relative;
	display: inline-block;
	right: 5px;
	top: 1.5px;
	width: 16px;
	height: 14px;
	background-color: #777;
	-webkit-mask-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2217%22%20height%3D%2215%22%20viewBox%3D%220%200%2017%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.0264%2012.3086L9.46387%200.90625C8.97168%200.0585938%207.68652%200.03125%207.19434%200.90625L0.631836%2012.3086C0.139648%2013.1562%200.768555%2014.25%201.78027%2014.25H14.8779C15.8896%2014.25%2016.5186%2013.1836%2016.0264%2012.3086ZM8.34277%209.92969C9.02637%209.92969%209.60059%2010.5039%209.60059%2011.1875C9.60059%2011.8984%209.02637%2012.4453%208.34277%2012.4453C7.63184%2012.4453%207.08496%2011.8984%207.08496%2011.1875C7.08496%2010.5039%207.63184%209.92969%208.34277%209.92969ZM7.13965%205.41797C7.1123%205.22656%207.27637%205.0625%207.46777%205.0625H9.19043C9.38184%205.0625%209.5459%205.22656%209.51855%205.41797L9.32715%209.13672C9.2998%209.32812%209.16309%209.4375%208.99902%209.4375H7.65918C7.49512%209.4375%207.3584%209.32812%207.33105%209.13672L7.13965%205.41797Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2217%22%20height%3D%2215%22%20viewBox%3D%220%200%2017%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.0264%2012.3086L9.46387%200.90625C8.97168%200.0585938%207.68652%200.03125%207.19434%200.90625L0.631836%2012.3086C0.139648%2013.1562%200.768555%2014.25%201.78027%2014.25H14.8779C15.8896%2014.25%2016.5186%2013.1836%2016.0264%2012.3086ZM8.34277%209.92969C9.02637%209.92969%209.60059%2010.5039%209.60059%2011.1875C9.60059%2011.8984%209.02637%2012.4453%208.34277%2012.4453C7.63184%2012.4453%207.08496%2011.8984%207.08496%2011.1875C7.08496%2010.5039%207.63184%209.92969%208.34277%209.92969ZM7.13965%205.41797C7.1123%205.22656%207.27637%205.0625%207.46777%205.0625H9.19043C9.38184%205.0625%209.5459%205.22656%209.51855%205.41797L9.32715%209.13672C9.2998%209.32812%209.16309%209.4375%208.99902%209.4375H7.65918C7.49512%209.4375%207.3584%209.32812%207.33105%209.13672L7.13965%205.41797Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
}
.contactp__error a { color: #333; text-decoration: none; cursor: pointer; }


/* ── [신규] Service 대메뉴 공통 히어로 + 소메뉴 탭바 ── by smchon / 2026.10.09
   실측(원본 service-intelligence, 1440/1280/1100/1024/768/600/390):
   - 히어로: 높이 400px(사진 cover · 가운데), 위쪽 50px 를 비우고 그 아래 350px 안에서 제목/설명을 가운데 정렬(간격 20px).
     제목 56/56 700 흰색 -1.4px, 설명 18/32.4 흰색. 아래 50px 는 탭바가 사진 위에 겹친다(margin-bottom:-50px).
   - 탭바: 흰 배경, 하단 1px #eee 전체 폭 선, 오른쪽 40px 여백, 안쪽 1200px 가운데(항목 10개 × 120px, 좁아지면 같이 줄어듦).
     항목은 최소 높이 87px 에 글자가 가운데, 글자 칸 좌우 10px · 16/18 · #333, 칸이 좁아 줄이 늘면 칸이 같이 높아진다.
     선택 항목은 파란 배경 + 흰 글자, 선택 아닌 항목에 마우스를 올리면 글자만 파랑(#0099db). 탭바 아래 100px.
   - 태블릿(768~1024): 오른쪽 여백 0, 전체 폭을 10등분. 스마트폰(~767): 탭바 숨김, 히어로 210px 하단 정렬(제목 28/28, 설명 14/25.2, 간격 6px). */
.svc-hero {
	box-sizing: border-box;
	height: 400px;
	margin-bottom: -50px;
	padding-top: 50px;
	background: #02283c url('/insoft_home/wp-content/uploads/2024/11/service-pc-banner.png') 50% 50% / cover no-repeat; /* 사진이 늦게 떠도 흰 화면 대신 사진 평균색(#02283c)이 먼저 보이게 - by smchon / 2026.10.10 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	text-align: center;
}
.svc-hero__title { margin: 0; font-size: 56px; font-weight: 700; line-height: 56px; letter-spacing: -1.4px; color: #fff; }
.svc-hero__desc { margin: 0; font-size: 18px; font-weight: 400; line-height: 32.4px; color: #fff; }

.svc-subnav {
	position: sticky;
	top: 0;
	z-index: 9;
	display: flex;
	justify-content: center;
	padding-right: 40px;
	margin-bottom: 100px;
	background: #fff;
	border-bottom: 1px solid #eee;
	transition: transform .4s ease;
}
.svc-subnav.is-moved { transform: translateY(100px); }
.svc-subnav__inner { display: flex; align-items: center; flex: 0 1 1200px; min-width: 0; }
.svc-subnav__item {
	flex: 0 1 120px;
	min-width: 0;
	min-height: 87px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 16px;
	line-height: 18px;
	color: #333;
	background: #fff;
	border-right: 1px solid #eee;
	transition: background-color .3s ease; /* 원본: 배경만 0.3s ease, 글자색은 즉시 */
}
/* 글자 칸 좌우 여백: 원본 첫 페이지 실측 - 1·2번 항목만 10px(긴 영단어/세 줄 라벨), 나머지는 0 */
.svc-subnav__item > span { display: block; min-width: 0; padding: 0; overflow-wrap: break-word; /* 원본(OceanWP): 칸보다 긴 영단어는 줄을 꺾는다 */ }

.svc-subnav__item:hover { background: #f8f8f8; color: var(--hover-blue); } /* 원본: 연한 회색 배경 + 파란 글자 .... by smchon / 2026.10.10 */
.svc-subnav__item.is-active,
.svc-subnav__item.is-active:hover { background: var(--hover-blue); color: #fff; }
/* 원본: 선택 항목과 맞닿은 칸의 구분선은 없다 */
.svc-subnav__item.is-active,
.svc-subnav__item:has(+ .is-active) { border-right-color: transparent; }

@media (max-width: 1024px) {
	.svc-subnav { padding-right: 0; }
	.svc-subnav__inner { flex: 1 1 auto; }
}
@media (max-width: 767px) {
	.svc-hero { height: 210px; margin-bottom: 0; padding-top: 0; padding-bottom: 25px; justify-content: flex-end; gap: 6px; }
	.svc-hero__title { font-size: 28px; line-height: 28px; }
	.svc-hero__desc { font-size: 14px; line-height: 25.2px; }
	.svc-subnav { display: none; }
}

/* ── [신규] Service 대메뉴 본문 공통 조각(.svc-*) ── by smchon / 2026.10.09
   실측(원본 Service 10개 페이지, 1440/1024/768/390): 가운데 1240px 칸(좁아지면 좌우 20px), 구역 제목 42/42 700 #111 가운데,
   소개(그림 506×450 + 글, 사이 80px), 3칸 카드(칸 사이 + 그림), 큰 그림. 구역 위·아래 간격은 페이지별 .svc-pN 규칙에서 정한다. */
.svc-main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; overflow-wrap: break-word; /* 원본(OceanWP): 칸보다 긴 낱말은 줄을 꺾는다 */ }
.svc-sec { display: flex; flex-direction: column; }
.svc-h2 { margin: 0; padding: 0 0 60px; font-size: 42px; line-height: 42px; font-weight: 700; letter-spacing: normal; color: #111; text-align: center; }
.svc-h2--pb20 { padding-bottom: 20px; }
.svc-h2--pb0 { padding-bottom: 0; }

.svc-intro { display: flex; justify-content: space-between; column-gap: 80px; }
.svc-intro__img { flex: 0 1 506px; min-width: 0; }
.svc-intro__img img { display: block; width: 100%; height: auto; }
.svc-intro__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.svc-intro__title { margin: 0; font-size: 56px; line-height: 68px; font-weight: 700; letter-spacing: -1.4px; color: #111; }
.svc-intro__title strong { font-weight: 700; } /* 원본: 굵은 글자도 700(브라우저 기본 900 보다 얇음) */
.svc-intro__title--thin { font-size: 38px; font-weight: 400; }
.svc-intro__title--thin strong { font-weight: 700; font-size: 56px; } /* 원본: 굵은 글자(MSP/애자일)만 56px, 나머지 38px */
.svc-intro__desc { margin: 0; padding-top: 30px; font-size: 20px; line-height: 30px; font-weight: 400; color: #333; }
.svc-hide { display: none; } /* 원본의 글자 잘못 붙은 부분 등 - 지우지 않고 숨김(복구 가능) */

.svc-cards { display: flex; align-items: stretch; }
.svc-card { flex: 1 1 0; min-width: 0; padding: 10px; display: flex; }
.svc-card__in { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.svc-card__icon { width: 180px; height: 180px; margin: 0 auto 30px; border-radius: 50%; background: #eef3f9; display: flex; align-items: center; justify-content: center; }
.svc-card__icon img { display: block; max-width: 100%; } /* 아이콘은 원본 그림 크기 그대로(100~101px) */
.svc-card__body { display: flex; flex-direction: column; row-gap: 20px; }
.svc-card__title { margin: 0 auto; width: fit-content; max-width: 100%; font-size: 28px; line-height: 34px; font-weight: 700; color: #111; text-align: center; }
.svc-card__text { margin: 0 auto; width: 320px; max-width: 100%; font-size: 18px; line-height: 26px; font-weight: 400; color: #333; }
.svc-cards--center .svc-card__text { text-align: center; }
.svc-cards--left .svc-card__text { text-align: left; }
.svc-plus { flex: 0 0 12.5px; min-width: 0; padding-top: 75px; }
.svc-plus img { display: block; width: 40px; max-width: none; height: auto; }

.svc-fig { display: flex; justify-content: center; }
.svc-fig--pt60 { padding-top: 60px; } /* 제목 아래 60px 이 그림 칸 안쪽 여백인 구역(모바일에서도 유지) */
.svc-fig img { display: block; max-width: 100%; height: auto; }

main:has(> .svc-main) + .site-footer { margin-top: 0; }

/* 페이지 1: Intelligence Integration */
.svc-p1 > .svc-sec:nth-child(1) { margin-bottom: 120px; }
.svc-p1 > .svc-sec:nth-child(2) { margin-bottom: 140px; }

@media (max-width: 1024px) {
	.svc-intro__text { margin-top: 0 !important; }
	.svc-p1 > .svc-sec:nth-child(1),
	.svc-p1 > .svc-sec:nth-child(2) { margin-bottom: 60px; }
}

/* Service 본문 공통 - 태블릿/모바일 (원본 1024/768/390 실측) */
@media (max-width: 1024px) {
	.svc-main { max-width: none; padding-left: 20px; padding-right: 20px; } /* 원본: 1025px 이상은 좌우 여백 없이 최대 1240px, 1024px 이하는 좌우 20px */
	.svc-intro__text { min-width: 300px; } /* 768 근처에서 글 칸이 너무 좁아지지 않게 그림이 먼저 줄어든다(원본은 이 구간에서 글 칸이 126px 로 깨짐) */
}
@media (max-width: 767px) {
	.svc-h2 { padding: 30px 0; font-size: 20px; line-height: 20px; }
	.svc-sec:first-child > .svc-h2 { font-size: 18px; line-height: 18px; }
	.svc-h2--lh30 { line-height: 30px; }
	.svc-intro { flex-direction: column; }
	.svc-intro__img { flex: none; }
	.svc-intro__img:not(.svc-intro__img--bg) img { max-width: 506px; margin: 0 auto; } /* 원본: 그림은 원래 크기(506px)까지만 커지고 가운데 */
	.svc-intro__text { min-width: 0; margin-top: 20px !important; }
	.svc-intro__title { font-size: 20px; line-height: 30px; text-align: center; letter-spacing: normal; }
	.svc-intro__title--thin { font-size: 20px; font-weight: 400; }
	.svc-intro__title--thin strong { font-size: 24px; }
	.svc-intro__desc { font-size: 16px; }
	.svc-cards { flex-direction: column; align-items: stretch; }
	.svc-card { flex: none; }
	.svc-card__in { align-items: center; }
	.svc-card__icon { width: 200px; height: 200px; margin-bottom: 10px; }
	.svc-card__body { row-gap: 0; width: 100%; }
	.svc-card__title { font-size: 16px; padding: 0 !important; } /* 모바일은 줄바꿈용 좌우 여백 없음(원본) */
	.svc-card__text { font-size: 16px; }
	.svc-plus { flex: none; padding-top: 0; display: flex; justify-content: center; }
	.svc-plus img { width: 30px; }
	.svc-p1 > .svc-sec:nth-child(1) { margin-bottom: 60px; }
	.svc-p1 > .svc-sec:nth-child(2) { margin-bottom: 0; }
}

.svc-intro__img--bg { height: 450px; }
.svc-intro__img--bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
/* 모바일 전(768px 이상)에는 그림을 자르지 않고 원래 비율로 줄인다(Intelligence Integration 소개와 같게, 높이 450 고정이면 폭이 줄 때 오른쪽이 잘려 글에 가린 듯 보임). K8s(--stack)는 제외 ... by 장원석 / 2026.10.12 */
@media (min-width: 768px) {
	.svc-intro:not(.svc-intro--stack) .svc-intro__img--bg { height: auto; }
	.svc-intro:not(.svc-intro--stack) .svc-intro__img--bg img { height: auto; }
}
@media (max-width: 767px) {
	.svc-intro__img--bg { height: 200px; }
	.svc-intro__img--bg img { object-position: var(--bgpos, 50% 50%); }
}

/* 페이지 2: 클라우드 네이티브 구축/컨설팅 서비스 */
.svc-p2 > .svc-sec:nth-child(2) { margin-top: 120px; }
.svc-p2 > .svc-sec:nth-child(3) { margin-top: 140px; margin-bottom: 160px; }
@media (max-width: 1024px) {
	.svc-p2 > .svc-sec:nth-child(2) { margin-top: 60px; }
}
@media (max-width: 767px) {
	.svc-p2 > .svc-sec:nth-child(2) { margin-top: 0; }
	.svc-p2 > .svc-sec:nth-child(3) { margin-top: 0; margin-bottom: 40px; }
	.svc-intro--gap .svc-intro__title { line-height: 68px; letter-spacing: -1.4px; }
	.svc-intro--gap .svc-intro__text { margin-top: 0 !important; }
	.svc-intro--gap .svc-intro__desc { padding-top: 0; }
}

/* 페이지 3: 애플리케이션 현대화 서비스 */
.svc-p3 > .svc-sec:nth-child(2) { margin-top: 120px; }
.svc-p3 > .svc-sec:nth-child(3) { margin-top: 140px; }
.svc-p3 > .svc-sec:nth-child(4) { margin-top: 140px; margin-bottom: 180px; }
@media (max-width: 1024px) {
	.svc-p3 > .svc-sec:nth-child(2),
	.svc-p3 > .svc-sec:nth-child(3),
	.svc-p3 > .svc-sec:nth-child(4) { margin-top: 60px; }
	.svc-p3 > .svc-sec:nth-child(4) { margin-bottom: 60px; }
}
@media (max-width: 767px) {
	.svc-p3 > .svc-sec:nth-child(2),
	.svc-p3 > .svc-sec:nth-child(3),
	.svc-p3 > .svc-sec:nth-child(4) { margin-top: 0; }
	.svc-p3 > .svc-sec:nth-child(4) { margin-bottom: 40px; }
	/* 원본: 소개 그림과 '제공 스텍' 그림은 좌우 여백 없이 화면 끝까지 */
	.svc-p3 > .svc-sec:nth-child(1) .svc-intro__img,
	.svc-p3 > .svc-sec:nth-child(3) .svc-fig { margin-left: -20px; margin-right: -20px; }
}

/* 그림 위 + 글 아래 5칸(.svc-cols) / 파란 요약 상자(.svc-note) / 그림 아래 40px(.svc-fig--pb40) */
.svc-cols { display: flex; column-gap: 24px; }
.svc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; row-gap: 40px; }
.svc-col__img img { display: block; width: 100%; height: auto; }
.svc-col__body { display: flex; flex-direction: column; }
.svc-col__h { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; color: #333; text-align: left; }
.svc-col__t { margin: 20px 0 0; font-size: 18px; line-height: 26px; font-weight: 400; color: #333; text-align: left; }
.svc-note { padding: 65px 45px; border-radius: 10px; background: #eef3f9; }
.svc-note p { margin: 0; font-size: 20px; line-height: 36px; font-weight: 400; color: #333; text-align: center; }
.svc-fig--pb40 { padding-bottom: 40px; }
.svc-col--gap46 .svc-col__t { margin-top: 46px; } /* 원본 4번째 칸만 제목-설명 간격 46px */
.svc-cols--h111 .svc-col__h { color: #111; }
@media (max-width: 1024px) {
}
@media (max-width: 767px) {
	.svc-cols { flex-direction: column; row-gap: 0; }
	.svc-col { flex: none; row-gap: 20px; margin-bottom: 20px; }
	.svc-col__img img { height: 200px; object-fit: cover; }
	.svc-col--gap46 .svc-col__t { margin-top: 0; }
	.svc-col__h { font-size: 16px; }
	.svc-col__t { margin-top: 0; font-size: 16px; }
	.svc-note { padding: 20px; }
	.svc-note p { font-size: 16px; text-align: left; }
}

/* 페이지 4: 하이브리드 클라우드 구축 서비스 */
.svc-p4 > .svc-sec:nth-child(1) { margin-bottom: 120px; }
.svc-p4 > .svc-sec:nth-child(2) { margin-bottom: 140px; }
.svc-p4 > .svc-sec:nth-child(4) { margin-top: 140px; margin-bottom: 160px; }
@media (max-width: 1024px) {
	.svc-p4 > .svc-sec:nth-child(1),
	.svc-p4 > .svc-sec:nth-child(2) { margin-bottom: 60px; }
	.svc-p4 > .svc-sec:nth-child(4) { margin-top: 60px; margin-bottom: 60px; }
}
@media (max-width: 767px) {
	.svc-p4 > .svc-sec:nth-child(2) { margin-bottom: 0; }
	.svc-p4 > .svc-sec:nth-child(4) { margin-top: 0; margin-bottom: 40px; }
}

/* 번호 가로 상자(.svc-rows) */
.svc-rows { display: flex; flex-direction: column; row-gap: 20px; }
.svc-row { padding: 30px 60px 30px 39px; border-radius: 10px; background: #eef3f9; display: flex; align-items: center; justify-content: space-between; }
.svc-row__text { flex: 1 1 0; min-width: 0; }
.svc-row__no { margin: 0 0 10px; font-size: 14px; line-height: 20px; font-weight: 700; color: #0099db; }
.svc-row__t { margin: 0; font-size: 32px; line-height: 38px; font-weight: 700; color: #111; }
.svc-row__d { margin: 10px 0 0; font-size: 20px; line-height: 30px; font-weight: 400; color: #333; }
.svc-row__img { flex: none; display: block; width: 80px; max-width: none; height: auto; }
@media (max-width: 767px) {
	.svc-row { padding: 20px 10px !important; flex-direction: column-reverse; justify-content: center; row-gap: 0; }
	.svc-row__text { flex: none; width: 100%; }
	.svc-row__t { font-size: 16px; }
	.svc-row__d { font-size: 16px; margin: 0; }
	.svc-rows--gap20 .svc-row { row-gap: 20px; }
}

/* 페이지 5: MSP 서비스 */
.svc-p5 > .svc-sec:nth-child(2) { margin-top: 120px; }
.svc-p5 > .svc-sec:nth-child(3) { margin-top: 140px; }
.svc-p5 > .svc-sec:nth-child(4) { margin-top: 140px; margin-bottom: 160px; }
.svc-p5 .svc-cols { column-gap: 24px; }
@media (min-width: 768px) and (max-width: 1024px) {
	.svc-p5 { padding-left: 25px; padding-right: 25px; } /* 원본 이 페이지만 태블릿 좌우 25px */
}
@media (max-width: 1024px) {
	.svc-p5 > .svc-sec:nth-child(2),
	.svc-p5 > .svc-sec:nth-child(3),
	.svc-p5 > .svc-sec:nth-child(4) { margin-top: 60px; }
	.svc-p5 > .svc-sec:nth-child(4) { margin-bottom: 60px; }
}
@media (max-width: 767px) {
	.svc-p5 > .svc-sec:nth-child(2),
	.svc-p5 > .svc-sec:nth-child(3),
	.svc-p5 > .svc-sec:nth-child(4) { margin-top: 0; }
	.svc-p5 > .svc-sec:nth-child(4) { margin-bottom: 30px; }
	.svc-p5 .svc-intro__title--thin { font-size: 18px; }
	.svc-p5 .svc-intro__desc { text-align: center; }
}

/* 페이지 6: Agile 방법론 */
.svc-p6 { padding-bottom: 160px; }
.svc-p6 > .svc-sec:nth-child(2) { margin-top: 120px; margin-bottom: 60px; }
.svc-p6 .svc-sec:nth-child(2) .svc-fig { margin-top: 140px; }
.svc-p6 .svc-intro__desc { letter-spacing: -0.2px; }
@media (max-width: 1024px) {
	.svc-p6 { padding-bottom: 60px; }
	.svc-p6 > .svc-sec:nth-child(2) { margin-top: 60px; }
}
@media (max-width: 767px) {
	.svc-p6 > .svc-sec:nth-child(2) { margin-top: 0; padding-left: 20px; padding-right: 20px; }
	.svc-p6 .svc-sec:nth-child(2) .svc-fig { margin-top: 0; }
	.svc-p6 .svc-intro__title--thin { font-size: 20px; }
}

/* 페이지 7: DevSecOps */
.svc-p7 > .svc-sec:nth-child(2) { margin-top: 120px; }
.svc-p7 > .svc-sec:nth-child(3) { margin-top: 140px; margin-bottom: 160px; }
@media (max-width: 1024px) {
	.svc-p7 > .svc-sec:nth-child(2) { margin-top: 60px; }
	.svc-p7 > .svc-sec:nth-child(3) { margin-top: 60px; margin-bottom: 60px; }
}
@media (max-width: 767px) {
	.svc-p7 > .svc-sec:nth-child(2),
	.svc-p7 > .svc-sec:nth-child(3) { margin-top: 0; padding-left: 20px; padding-right: 20px; }
	.svc-p7 > .svc-sec:nth-child(3) { margin-bottom: 40px; }
	.svc-cards--lh24 .svc-card__title { line-height: 24px; } /* 제목이 두 줄(<br>)인 카드: 모바일 줄 간격 24px */
}

/* 페이지 8: 생성형 AI 구축 서비스 */
.svc-p8 > .svc-sec:nth-child(2) { padding-bottom: 12px; } /* 원본: 특장점 구역 아래에 12px 더 */
.svc-p8 > .svc-sec:nth-child(2) { margin-top: 120px; }
.svc-p8 > .svc-sec:nth-child(3) { margin-top: 140px; margin-bottom: 160px; }
@media (max-width: 1024px) {
	.svc-p8 > .svc-sec:nth-child(2) { margin-top: 60px; }
	.svc-p8 > .svc-sec:nth-child(3) { margin-top: 60px; margin-bottom: 60px; }
}
@media (max-width: 767px) {
	.svc-p8 > .svc-sec:nth-child(2),
	.svc-p8 > .svc-sec:nth-child(3) { margin-top: 0; padding-left: 20px; padding-right: 20px; }
	.svc-p8 > .svc-sec:nth-child(2) { padding-bottom: 0; }
	.svc-p8 > .svc-sec:nth-child(3) { margin-bottom: 30px; }
}

/* 페이지 9: 하이브리드 오프쇼어링 서비스 */
.svc-p9 { padding-bottom: 190px; } /* 원본: 이 페이지는 1024px 이하에서 좌우 25px(그 위는 다른 페이지와 같음) */
.svc-p9 > .svc-sec:nth-child(2) { margin-top: 120px; }
.svc-p9 > .svc-sec:nth-child(3) { margin-top: 140px; }
.svc-lead { margin: 0; padding-bottom: 60px; font-size: 18px; line-height: 27px; font-weight: 400; color: #555; text-align: center; }
.svc-vgdc { min-height: 895px; padding-top: 52px; background-position: 0 0; background-repeat: repeat; display: flex; justify-content: center; align-items: flex-start; }
.svc-vgdc img { display: block; max-width: 100%; height: auto; }
@media (max-width: 1024px) {
	.svc-p9 { padding-left: 25px; padding-right: 25px; padding-bottom: 60px; }
	.svc-p9 > .svc-sec:nth-child(2),
	.svc-p9 > .svc-sec:nth-child(3) { margin-top: 60px; }
}
@media (max-width: 767px) {
	.svc-p9 { padding-bottom: 40px; }
	.svc-p9 > .svc-sec:nth-child(2) { margin-top: 0; padding-left: 20px; padding-right: 20px; }
	.svc-p9 > .svc-sec:nth-child(3) { margin-top: 0; }
	.svc-vgdc { min-height: 270px; padding-left: 25px; padding-right: 25px; }
}

/* 페이지 10: K8s & 오픈소스 기술지원 서비스 ── by smchon / 2026.10.09
   원본은 이 페이지만 탭바가 PC 에서만 보인다(태블릿·모바일은 히어로 바로 아래 60px / 30px 에서 본문 시작). */
.svc-p10 { padding-bottom: 160px; }
.svc-p10 > .svc-sec + .svc-sec { margin-top: 140px; }
.svc-intro--stack .svc-intro__img { }
.svc-lead2 { margin: 0; padding-bottom: 60px; font-size: 20px; line-height: 36px; font-weight: 400; color: #333; text-align: center; }

/* 기술 지원 방식: 파란 상자 2개 */
.k8s-plans { display: flex; column-gap: 20px; align-items: stretch; }
.k8s-plan { flex: 1 1 0; min-width: 0; padding: 30px 60px 30px 39px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; }
.k8s-plan--a { background: #e5f4fc; }
.k8s-plan--b { background: #eef3f9; }
.k8s-plan__icon { display: block; width: 80px; height: 80px; margin-bottom: 20px; }
.k8s-plan__title { margin: 0 0 20px; font-size: 28px; line-height: 28px; font-weight: 700; color: #111; text-align: center; }
.k8s-plan__list { align-self: stretch; margin-top: 19px; }
.k8s-plan__list p { margin: 10px 0 0; font-size: 18px; line-height: 26px; font-weight: 400; color: #555; text-align: left; }
.k8s-plan__list p:first-child,
.k8s-plan__list p.is-tight { margin-top: 0; }

/* 오픈소스 적용 프로세스: 점선 상자 안에 3단계 + 화살표 */
.k8s-flow { padding: 20px; border: 1px dashed #0099db; border-radius: 10px; display: flex; align-items: flex-start; }
.k8s-step { flex: 1 1 0; min-width: 0; border-radius: 20px; background: #fff; }
.k8s-step__h { margin: 0; padding: 12px; font-size: 20px; line-height: 30px; font-weight: 700; color: #fff; text-align: center; }
.k8s-step--1 .k8s-step__h { background: #00cbff; border-radius: 10px 0 0 10px; }
.k8s-step--2 .k8s-step__h { background: #0099db; }
.k8s-step--3 .k8s-step__h { background: #0074a7; border-radius: 0 20px 20px 0; }
.k8s-step__b { margin-top: 19px; padding-left: 24px; min-height: 88px; display: flex; flex-direction: column; justify-content: center; }
.k8s-step__b p { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #333; text-align: left; }
.k8s-step__b p + p,
.k8s-step__b p.is-gap { margin-top: 10px; }
.k8s-arrow { flex: 0 0 52.6px; }
.k8s-arrow img { display: block; width: 54px; max-width: none; height: 54px; } /* 원본: 그림은 54px 그대로, 칸이 좁아져도 안 줄어듦 */

/* 오픈소스 테스트 환경: 점선 상자 안에 노드 4개 + 아래 설명 줄 4개 */
.k8s-env { padding: 30px 20px; border: 1px dashed #0099db; border-radius: 20px; }
.k8s-env__title { margin: 0; font-size: 20px; line-height: 36px; font-weight: 700; color: #333; text-align: center; }
.k8s-nodes { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 20px; }
.k8s-node { flex: 0 0 calc((100% - 60px) / 4); min-width: 0; border-radius: 20px; display: flex; flex-direction: column; }
.k8s-node:nth-child(odd) { background: #e5f4fc; }
.k8s-node:nth-child(even) { background: #eef3f9; }
.k8s-node__h { margin: 0; padding: 12px; border-radius: 20px 20px 0 0; background: #0099db; font-size: 20px; line-height: 30px; font-weight: 700; color: #fff; text-align: center; }
.k8s-node__b { flex: 1; padding: 25px 25px 16px; display: flex; flex-direction: column; row-gap: 10px; }
.k8s-node:nth-child(1) .k8s-node__b { padding: 40px 25px 25px; row-gap: 16px; }
.k8s-node:nth-child(2) .k8s-node__b { padding-top: 40px; }
.k8s-node__b img { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
.k8s-node:nth-child(2) .k8s-node__b img { margin-bottom: 21px; } /* 원본: 두 번째 노드 그림 칸이 21px 더 높다 */
.k8s-node__dots { margin: 0; font-size: 20px; line-height: 20px; font-weight: 700; color: #4a4a4a; text-align: right; }
.k8s-rows { margin-top: 19px; display: flex; flex-direction: column; row-gap: 10px; }
.k8s-row { border-radius: 10px; background: #eef3f9; display: flex; align-items: center; column-gap: 20px; }
.k8s-row__l { flex: 0 0 210px; padding: 10px; border-radius: 10px 0 0 10px; background: #eef3f9; }
.k8s-row__l h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; color: #333; text-align: left; }
.k8s-row p { margin: 0; font-size: 18px; line-height: 36px; font-weight: 400; color: #333; text-align: left; }

@media (max-width: 1024px) {
	.svc-cards--nopad-t .svc-card__title { padding: 0 !important; } /* K8s: 태블릿부터 카드 제목 줄바꿈용 좌우 여백 없음 */
	.svc-hero--bar-pc { margin-bottom: 0; }
	.svc-subnav--pc { display: none; }
	.svc-p10 { padding-top: 60px; padding-bottom: 60px; }
	.svc-p10 > .svc-sec + .svc-sec { margin-top: 140px; }
	.svc-p10 > .svc-sec:last-child { margin-top: 130px; }
	.svc-intro--stack { flex-direction: column; }
	.svc-intro--stack .svc-intro__img { flex: none; height: 160px; border-radius: 0 20px; overflow: hidden; }
	.svc-intro--stack .svc-intro__img img { object-position: 50% 50%; } /* 원본(태블릿): 그림 가운데를 보여 줌 - 그림 자체의 둥근 모서리(위 오른쪽)가 잘려 나가 CSS 20px 곡선만 남는다 .... by smchon / 2026.10.12 */
	.svc-intro--stack .svc-intro__text { min-width: 0; margin-top: 40px !important; }
	.svc-intro--stack .svc-intro__desc { max-width: 655px; }
	.svc-lead2 { font-size: 18px; }
	.svc-lead2--20 { font-size: 20px; }
	.k8s-plans { flex-direction: column; row-gap: 20px; }
	.k8s-plan__list { padding: 0 20px; }
	.k8s-step__h { font-size: 18px; line-height: 27px; }
	.k8s-step__b { padding-left: 20px; }
	.k8s-arrow { flex: 0 0 50.35px; }
	.k8s-arrow img { height: 51px; }
	.k8s-node { flex: 0 0 calc((100% - 20px) / 2); }
	.k8s-row { padding: 10px; }
	.k8s-rows { padding: 0 20px; }
	.k8s-row__l { flex: 0 0 var(--tl, 25.7%); }
	.k8s-row p { font-size: 18px; line-height: 25.2px; }
}
@media (max-width: 767px) {
	.svc-p10 { padding-top: 30px; padding-bottom: 40px; }
	.svc-p10 > .svc-sec + .svc-sec { margin-top: 80px; }
	.svc-p10 > .svc-sec:last-child { margin-top: 40px; }
	.svc-intro--stack .svc-intro__img { height: 200px; }
	.svc-intro--stack .svc-intro__img img { object-position: 50% 0; } /* 원본(모바일): 그림 위쪽 기준 */
	.svc-intro--stack .svc-intro__text { margin-top: 20px !important; }
	.svc-intro--stack .svc-intro__desc { max-width: none; }
	.svc-lead2,
	.svc-lead2--20 { font-size: 16px; text-align: left; }
	.k8s-plan { padding: 20px 10px; align-items: center; }
	.k8s-plan__title { font-size: 16px; line-height: 16px; }
	.k8s-plan__list { padding: 0; }
	.k8s-plan__list p { padding: 20px 20px 0; margin-top: 10px; }
	.k8s-plan__list p:first-child,
	.k8s-plan__list p.is-tight { margin-top: 0; }
	.k8s-flow { flex-direction: column; row-gap: 20px; align-items: stretch; }
	.k8s-arrow { display: none; }
	.k8s-step__h { padding: 10px; font-size: 16px; line-height: 24px; border-radius: 10px !important; }
	.k8s-step__b { margin-top: 0; padding-left: 0; justify-content: flex-start; }
	.k8s-step__b p { padding: 20px 20px 0; }
	.k8s-step__b p.is-gap { margin-top: 10px; }
	.k8s-step__b p + p { margin-top: 0; }
	.k8s-step--1 .k8s-step__b { padding-bottom: 20px; } /* 원본: 1단계 본문만 아래 20px 여백 */
	.k8s-step--3 .k8s-step__b { justify-content: center; } /* 원본: 3단계 본문만 세로 가운데 */
	.k8s-node:nth-child(1) { min-height: 206px; } /* 원본: 1·2번 노드 카드는 높이가 같다 */
	.k8s-node { flex: 0 0 100%; }
	.k8s-node__h { padding: 10px; font-size: 16px; line-height: 24px; }
	.k8s-node__b,
	.k8s-node:nth-child(n) .k8s-node__b { padding: 15px; }
	.k8s-row { padding: 20px; flex-direction: column; align-items: stretch; row-gap: 20px; }
	.k8s-rows { padding: 0; }
	.k8s-row__l { flex: none; }
	.k8s-row__l h3 { font-size: 16px; }
	.k8s-row p { font-size: 16px; line-height: 22.4px; }
}