/* ============================================================
   sub.css — 서브 공통 + 페이지별 섹션
   ============================================================ */
.sub-contents {
  padding: 80px 0;
}
.sub-contents--soft {
  background: var(--bg-soft);
}
.sub-sec + .sub-sec {
  margin-top: 130px;
}
.sub-sec__head {
  text-align: center;
  margin-bottom: 45px;
}

/* 이미지 미수급 placeholder — report 참조 */
.img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #dfe9ef, #c9d8e1);
  color: #7d8f9b;
  font-size: 15px;
  letter-spacing: 0.06em;
  border-radius: 20px;
}
.img-ph--dark {
  background: linear-gradient(150deg, var(--navy-800), var(--navy-600));
  color: rgba(255, 255, 255, 0.35);
}

/* ------------------------------------------------------------
   01_01 인사말
   ------------------------------------------------------------ */
.greeting {
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 80px;
  align-items: stretch;
}
.greeting__body {
  align-self: center;
}
.greeting__photo {
  min-height: 795px;
  border-radius: 20px;
  overflow: hidden;
}
.greeting__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.greeting__lead {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  padding-bottom: 26px;
  border-bottom: 1px solid #e2ebf0;
}
.greeting__body p {
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.85;
  color: var(--ink-600);
}
.greeting__sign {
  margin-top: 44px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.greeting__sign .role {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-600);
}
.greeting__sign .name {
  font-size: 26px;
  font-weight: 700;
}

/* ------------------------------------------------------------
   01_02 미션 · 비전
   ------------------------------------------------------------ */
.mv-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
  margin-inline: auto;
}
.mv-row + .mv-row {
  margin-top: 90px;
}
.mv-row--reverse .mv-row__media {
  order: 2;
}
.mv-row__media {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
}
.mv-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mv-row__body .mv-row__tag {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mv-row__body h3 {
  margin-top: 14px;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.mv-row__en {
  position: relative;
  display: block;
  margin-top: 26px;
  padding-top: 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-600);
}
.mv-row__en::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan-500), var(--green-400));
}
.mv-row__body p {
  margin-top: 12px;
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-600);
}

.mv-values {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 323px));
  gap: 28px;
  justify-content: center;
}
.mv-value {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 320px;
  background: var(--bg-soft);
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mv-value img {
  width: 84px;
  height: 84px;
  margin-bottom: 40px;
}
.mv-value h4 {
  font-size: 28px;
  font-weight: 700;
  white-space: nowrap;
}
.mv-value p {
  margin-top: 10px;
  font-size: 18px;
  color: var(--ink-600);
}

/* ------------------------------------------------------------
   01_03 회사 연혁 — 타임라인
   ------------------------------------------------------------ */
.history2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  max-width: 1600px;
  margin-inline: auto;
}
.history2__side {
  align-self: start;
}
.history2__side .sec-title {
  margin-bottom: 84px;
}
.history2__photo {
  width: 90%;
  margin-top: 32px;
  aspect-ratio: 6 / 4;
  border-radius: 16px;
}

.history2__timeline {
  position: relative;
  padding-left: 56px;
  padding-right: 0;
}
.history2__timeline::before {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--cyan-700) 0%,
    rgba(43, 134, 184, 0.18) 100%
  );
}
.history2__year-group + .history2__year-group {
  margin-top: 56px;
}
.history2__year {
  position: relative;
  margin-bottom: 56px;
  font-size: 32px;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1;
}
.history2__year::before {
  content: "";
  position: absolute;
  left: -56px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan-700);
  box-shadow: 0 0 0 5px rgba(43, 134, 184, 0.16);
}
.history2__rows {
  margin-top: 24px;
}
.history2__rows > li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
}
.history2__rows > li + li {
  margin-top: 32px;
}
.history2__mm {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-600);
}
.history2__ev li {
  position: relative;
  padding-left: 14px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink-600);
}
.history2__ev li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink);
  font-weight: 700;
}
.history2__ev li + li {
  margin-top: 6px;
}

/* ------------------------------------------------------------
   01_04 인증현황
   ------------------------------------------------------------ */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 56px;
}
.cert-card {
  text-align: center;
  transition: transform 0.25s ease;
}
.cert-card:hover {
  transform: translateY(-6px);
}
.cert-card__media {
  box-sizing: border-box;
  width: 428px;
  height: 535px;
  padding: 90px;
  background: var(--bg-soft);
  border-radius: 24px;
  margin-bottom: 24px;
}
.cert-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(28, 102, 144, 0.14);
}
.cert-card h4 {
  font-size: 24px;
  font-weight: 700;
}
.cert-card p {
  margin-top: 10px;
  font-size: 18px;
  color: var(--ink-600);
}

/* ------------------------------------------------------------
   01_05 오시는 길
   ------------------------------------------------------------ */
.map-box {
  aspect-ratio: 1400 / 600;
  border-radius: 20px;
  overflow: hidden;
}
.map-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.loc-info {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.loc-card {
  background: var(--bg-soft);
  border: 1px solid #e2ebf0;
  border-radius: 20px;
  padding: 36px;
}
.loc-card .ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(53, 183, 224, 0.1);
  color: var(--cyan-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.loc-card h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.loc-card p {
  margin-top: 8px;
  font-size: 20px;
  color: var(--ink-600);
}
.loc-card .loc-card__label {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-600);
}
.loc-card .loc-card__value {
  margin-top: 10px;
  font-size: 33px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.loc-card__value a {
  color: inherit;
}
.loc-card .loc-card__note {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink-600);
}
.loc-card__ico {
  display: block;
  width: 48px;
  height: auto;
  margin-bottom: 18px;
}

.loc-detail {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.loc-detail__col + .loc-detail__col {
  padding-left: 64px;
  border-left: 1px solid #e2ebf0;
}
.loc-detail__col h3 {
  font-size: 32px;
  font-weight: 700;
  color: var(--navy-900);
}
.loc-detail__addr {
  margin-top: 16px;
  font-size: 22px;
  line-height: 1.6;
  color: var(--ink-600);
}
.loc-detail__rows {
  margin-top: 24px;
}
.loc-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.loc-row + .loc-row {
  margin-top: 18px;
}
.loc-row dt {
  min-width: 84px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.loc-row dd {
  font-size: 22px;
  color: var(--ink-600);
}
.loc-row dd a {
  color: var(--ink);
}
.loc-row dd a:hover {
  color: var(--cyan-600);
}
.loc-row__note {
  margin-left: 4px;
  font-size: 16px;
  color: #8a97a1;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 2px 10px;
  margin-right: 6px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  vertical-align: middle;
}
.pill--blue {
  background: var(--cyan-600);
}
.pill--green {
  background: var(--green-600);
}

/* ------------------------------------------------------------
   02_xx 솔루션 상세
   ------------------------------------------------------------ */
.sol-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.sol-intro__logo {
  height: 64px;
  width: auto;
  margin-bottom: 30px;
}
.sol-intro__logo-txt {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.sol-intro__logo-txt em {
  color: var(--teal-500);
}
.sol-intro h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
/* 본문 단락 — p 엘리먼트 셀렉터 대신 전용 클래스로 지정 */
.sol-intro__desc {
  margin-top: 22px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--ink-600);
}
/* 원본 비율과 무관하게 블록 크기를 고정 — 세로형 원본이 들어와도 폭·높이가 튀지 않음 */
.sol-intro__media {
  width: 100%;
  margin-left: auto;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 5 / 4;
  box-shadow: 0 30px 60px rgba(6, 12, 24, 0.25);
}
/* object-position: right — 가로형 원본에서 오른쪽 영역이 남도록 크롭 */
.sol-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* 핵심 강점 — 일러스트 8종 그리드 */
.strength-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.strength-card {
  background: var(--white);
  border: 1px solid #e2ebf0;
  border-radius: 18px;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.strength-card:hover {
  transform: translateY(-8px);
  border-color: var(--cyan-400);
  box-shadow: 0 20px 48px rgba(28, 102, 144, 0.14);
}
.strength-card img {
  width: 100%;
  aspect-ratio: 400 / 240;
  object-fit: cover;
}
.strength-card .body {
  padding: 24px 24px 28px;
}
.strength-card h4 {
  font-size: 19px;
  font-weight: 700;
}
.strength-card p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-600);
}

/* Overview — 강조 텍스트 + 체크리스트 */
.sol-intro h2 em {
  font-style: normal;
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.check-list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  color: var(--ink-600);
}
.check-list li svg {
  flex-shrink: 0;
  color: var(--cyan-600);
}

/* Advantages — 넘버 배지 + 다크 그래픽 카드 */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 45px;
}
.adv-card {
  background: var(--white);
  border: 1px solid #e2ebf0;
  border-radius: 20px;
  padding: 50px;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.adv-card:hover {
  transform: translateY(-8px);
  border-color: var(--cyan-400);
  box-shadow: 0 20px 48px rgba(28, 102, 144, 0.14);
}
.adv-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.adv-card__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--grad-cta);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
}
.adv-card__head h4 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.adv-card p {
  margin-top: 16px;
  font-size: 20px;
  line-height: 1.7;
  color: var(--ink-600);
}
.adv-card__graphic {
  margin-top: 24px;
  border-radius: 16px;
  overflow: hidden;
}
.adv-card__graphic img {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 240;
  object-fit: cover;
}

/* Key Features — 아이콘 배지 카드 */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.feat-card {
  background: var(--white);
  border: 1px solid #e2ebf0;
  border-radius: 18px;
  padding: 32px 32px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.feat-card:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-400);
  box-shadow: 0 18px 40px rgba(28, 102, 144, 0.12);
}
.feat-card__ico {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: rgba(53, 183, 224, 0.1);
  color: var(--cyan-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.feat-card__ico svg {
  width: 30px;
  height: 30px;
}
.feat-card__ico--green {
  background: rgba(142, 224, 106, 0.16);
  color: var(--green-600);
}
.feat-card h4 {
  font-size: 21px;
  font-weight: 700;
}
.feat-card p {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-600);
}

/* Application Area — 완성된 원형 아이콘 그래픽(cofit_icon.svg, 제목 포함) + 리스트 */
.app-visual {
  margin-top: 64px;
}
.app-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.app-labels {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.app-label {
  min-width: 0;
  text-align: center;
}
.app-item__list {
  display: inline-block;
  text-align: left;
}
/* cofit_icon.svg의 원 중심이 균등 3분할 컬럼 중앙과 살짝 어긋나 있어 좌/우 리스트만 아이콘 쪽으로 수동 보정 */
.app-label:nth-child(1) .app-item__list {
  position: relative;
  left: 13%;
}
.app-label:nth-child(3) .app-item__list {
  position: relative;
  left: -13%;
}
.app-item__list li {
  position: relative;
  padding-left: 16px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-600);
  white-space: nowrap;
}
.app-item__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-600);
}
.app-item__list li + li {
  margin-top: 6px;
}

/* Expected Outcomes */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 460px));
  justify-content: center;
  gap: 24px;
}
.outcome-card {
  background: var(--white);
  border: 1px solid #e2ebf0;
  border-radius: 20px;
  padding: 40px 36px;
}
.outcome-card__badge {
  display: inline-flex;
  padding: 5px 16px;
  border-radius: 20px;
  background: var(--grad-cta);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.outcome-card h4 {
  margin-top: 20px;
  font-size: 23px;
  font-weight: 700;
}
.outcome-card p {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-600);
}

/* More Services — sol-card 재사용, 2열 */
.more-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 64px;
}
.more-svc-grid .sol-card {
  aspect-ratio: 580 / 360;
}

/* 차별화된 강점 — 다크 배경 체크리스트 + 브랜드 타일 */
.sub-contents--dark {
  background: var(--navy-950);
}
.sub-contents--dark .sec-eyebrow {
  color: var(--cyan-400);
}
.sub-contents--dark .sec-title {
  color: var(--white);
}
.sub-contents--dark .sec-desc {
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.usp-card {
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 28px 26px;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.usp-card:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-400);
  box-shadow: 0 18px 40px rgba(28, 102, 144, 0.12);
}
.usp-card__check {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 18px;
}
.usp-card__text {
  font-size: 22px;
  line-height: 1.6;
  color: var(--ink-600);
}
.usp-card__text strong {
  font-weight: 700;
  color: var(--ink);
}
.usp-card--brand {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-cta);
  border-color: transparent;
}
.usp-card--brand .usp-card__logo {
  width: 148px;
  height: auto;
}

/* ------------------------------------------------------------
   03_xx 서비스 상세
   ------------------------------------------------------------ */
/* 중앙 정렬 히어로 — 서비스 상세 공통 (breadcrumb·eyebrow 없이 타이틀 + 한 줄 설명) */
.sub-visual--center {
  text-align: center;
}
.sub-visual--center .sub-visual__desc {
  max-width: 900px;
  margin-inline: auto;
  font-size: 22px;
  line-height: 1.5;
}

/* 섹션 헤드 하단 구분선 */
.sub-sec__head--line .sec-title {
  margin-bottom: 28px;
}
.sub-sec__head--line::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin: 0 auto;
  background: var(--grad-cta);
  border-radius: 2px;
}

/* 서비스 개요 — 중앙 정렬 본문 */
.svc-ov {
  text-align: center;
}
.svc-ov__lead {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.svc-ov__body {
  margin-top: 26px;
  font-size: 18px;
  line-height: 2;
  color: var(--ink-600);
}
.svc-ov__body strong {
  font-weight: 700;
  color: var(--ink);
}

/* 수행 절차 — Step 라벨 + 화살표 흐름 */
.proc-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 320px));
  justify-content: center;
  gap: 72px;
}
.proc-flow__step {
  position: relative;
  border: 3px solid transparent;
  border-radius: 16px;
  padding: 26px 24px 28px;
}
/* 카드 테두리는 좌(그린) → 우(네이비)로 이어지는 그라데이션, 화살표는 각 카드 우측 색을 단색으로 추출 */
.proc-flow__step:nth-child(1) {
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(90deg, var(--green-400), var(--teal-500)) border-box;
}
.proc-flow__step:nth-child(2) {
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(90deg, var(--teal-500), var(--cyan-500)) border-box;
}
.proc-flow__step:nth-child(3) {
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(90deg, var(--cyan-500), var(--cyan-700)) border-box;
}
.proc-flow__step:nth-child(4) {
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(90deg, var(--cyan-700), var(--cyan-700)) border-box;
}
.proc-flow__step:nth-child(1) .proc-flow__no {
  color: var(--green-600);
}
.proc-flow__step:nth-child(2) .proc-flow__no {
  color: var(--teal-700);
}
.proc-flow__step:nth-child(3) .proc-flow__no {
  color: var(--cyan-600);
}
.proc-flow__step:nth-child(4) .proc-flow__no {
  color: var(--cyan-700);
}
.proc-flow__step::before {
  content: "";
  position: absolute;
  left: -52px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 52px;
  clip-path: polygon(0% 18%, 56% 18%, 100% 50%, 56% 82%, 0% 82%, 34% 50%);
}
.proc-flow__step:nth-child(2)::before {
  background: var(--teal-500);
}
.proc-flow__step:nth-child(3)::before {
  background: var(--cyan-500);
}
.proc-flow__step:nth-child(4)::before {
  background: var(--cyan-700);
}
.proc-flow__no {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cyan-600);
}
.proc-flow__step h4 {
  margin-top: 10px;
  font-size: 23px;
  font-weight: 700;
}
.proc-flow__step p:not(.proc-flow__no) {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e6edf2;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-600);
}

/* 제공 서비스 — 아이콘 카드 2×2 */
.svc-offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.svc-offer {
  background: var(--bg-soft);
  border: 1px solid #e2ebf0;
  border-radius: 18px;
  padding: 32px 34px 34px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.svc-offer:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-400);
  box-shadow: 0 18px 40px rgba(28, 102, 144, 0.12);
}
.svc-offer__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.svc-offer__ico {
  flex-shrink: 0;
  width: 44px;
  height: auto;
}
.svc-offer__head h4 {
  font-size: 24px;
  font-weight: 700;
}
.svc-offer p {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-600);
}

.svc-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.svc-detail + .svc-detail {
  margin-top: 120px;
}
.svc-detail:nth-of-type(even) .svc-detail__media {
  order: 2;
}
.svc-detail__media {
  border-radius: 20px;
  overflow: hidden;
}
.svc-detail__media img {
  width: 100%;
}
.svc-detail h3 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.svc-detail p {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-600);
}
.svc-detail ul {
  margin-top: 26px;
}
.svc-detail ul li {
  position: relative;
  padding-left: 20px;
  margin-top: 10px;
  font-size: 17px;
  color: var(--ink-600);
}
.svc-detail ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-600);
}

.proc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
.proc-step {
  background: var(--white);
  border: 1px solid #e2ebf0;
  border-radius: 18px;
  padding: 36px 30px;
  counter-increment: step;
}
.proc-step::before {
  content: "0" counter(step);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cyan-600);
}
.proc-step h4 {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 700;
}
.proc-step p {
  margin-top: 10px;
  font-size: 16px;
  color: var(--ink-600);
}

/* ------------------------------------------------------------
   04_01 고객사
   ------------------------------------------------------------ */
.client-group + .client-group {
  margin-top: 48px;
}
.client-group__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
}
.client-group__label::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid var(--cyan-500);
  background: var(--white);
}
.client-group--green .client-group__label::before {
  border-color: var(--green-400);
}
.client-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* ------------------------------------------------------------
   04_02 기술 문의 (폼)
   ------------------------------------------------------------ */
.contact-form {
  margin-top: 56px;
  background: var(--white);
  border: 1px solid #e2ebf0;
  border-radius: 24px;
  padding: 56px;
}
.contact-form .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.contact-form form > .form-field + .form-field,
.contact-form form > .grid2 + .form-field,
.contact-form form > .form-field + .grid2,
.contact-form form > .grid2 + .grid2 {
  margin-top: 32px;
}
.contact-form .agree {
  margin-top: 28px;
}
.contact-form .submit {
  margin-top: 36px;
  text-align: center;
}

/* 문의 유형 — pill 형태 라디오 */
.type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 2px;
}
.type-pills .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid #d5dee4;
  background: var(--white);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-600);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.type-pills input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.type-pills .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #c3ced6;
  background: var(--white);
  transition: all 0.15s ease;
}
.type-pills .pill:has(input:checked) {
  background: var(--cyan-700);
  border-color: var(--cyan-700);
  color: var(--white);
}
.type-pills .pill:has(input:checked) .dot {
  background: var(--white);
  border-color: var(--white);
}

/* 개인정보 수집·이용 동의 박스 */
.agree-box {
  border: 1px solid #e2ebf0;
  border-radius: 12px;
  background: var(--bg-soft);
  padding: 20px 22px;
}
.agree-box__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.agree-box ol {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agree-box li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-600);
}
.agree-check {
  margin-top: 16px;
  font-size: 15px;
}
.agree-check .req-tag {
  color: var(--green-400);
  font-weight: 700;
}

/* 제출 버튼 — 단색 */
.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 48px;
  padding: 0 28px;
  border-radius: 10px;
  background: var(--grad-cta);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.btn-solid:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
   04_03 다운로드
   ------------------------------------------------------------ */
.dl-list {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.dl-card {
  background: var(--bg-soft);
  border: 1px solid #e2ebf0;
  border-radius: 20px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
}
.dl-card .ico {
  width: 84px;
  height: 80px;
  margin-bottom: 20px;
}
.dl-card h3 {
  font-size: 38px;
  font-weight: 700;
}
.dl-card p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-600);
  flex: 1;
}
.dl-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cyan-600);
}
.dl-card__link-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cyan-500);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 하단 CTA 배너 — 그라데이션 바 */
.dl-cta {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 36px 44px;
  border-radius: 20px;
  background: var(--grad-cta);
  color: var(--white);
}
.dl-cta__title {
  font-size: 23px;
  font-weight: 700;
}
.dl-cta__desc {
  margin-top: 6px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
}

/* 반응형 안전장치 */
@media (max-width: 1200px) {
  .strength-grid,
  .cert-grid,
  .proc-steps,
  .mv-values,
  .usp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 2열로 접히면 화살표가 행 경계에 걸리므로 숨김 */
  .proc-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .proc-flow__step + .proc-flow__step::before {
    display: none;
  }
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .client-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .greeting {
    grid-template-columns: 1fr;
  }
  .history2 {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .history2__side {
    position: static;
  }
}
@media (max-width: 900px) {
  .app-labels {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .app-label {
    padding: 0;
  }
  .app-label:nth-child(1) .app-item__list,
  .app-label:nth-child(3) .app-item__list {
    left: 0;
  }
}
/* 768px 이하(폰)는 common.css #phone-scale-inner의 zoom 축소 방식으로 대체 — 개별 리플로우 규칙 없음 */