@charset "UTF-8";

/* ========================================================
   FO-SUP-06-01-001 — Support 검색 결과 (Search Results)
======================================================== */

/* 검색 영역 — 검색바 + 버블 탭 */
.search-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-600); /* 24 */
  padding-bottom: var(--gap-sm); /* 80 (모바일 48) */
}

/* 결과 영역 */
.result-area {
  padding: 0; /* 하단 여백은 푸터 간격(200)으로 처리 */
}
/* 검색 결과(FO-SUP-06) — 카테고리 탭 아래 배치 시 탭 ↔ 검색건수 80 (시안 7552:10929 contents pad-top) */
.result-area--tabbed {
  padding-top: 80rem;
}
.result-area__count {
  margin-bottom: 20rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body);
  color: var(--color-text-default-medium); /* #535455 */
}
.result-area__count b {
  font-weight: var(--font-weight-regular);
}
.result-area .btn-wrap {
  margin-top: var(--spacing-2000); /* 80 — 모바일에서도 80 고정 (gap-sm은 모바일 48로 축소됨) */
}

/* ── 모바일 (390 시안 · 7552-11468) ──
   보드 목록·버블 탭 등 공통 컴포넌트의 모바일 규칙은 components.css 각 블록에 있다 */
@media (max-width: 1024px) {
  .search-area .search-bar {
    width: calc(100% - 48rem); /* 사이드 패딩 24 */
  }
  .result-area--tabbed {
    padding-top: 48rem; /* 탭 ↔ 검색건수 48 (M 시안 7552:12246 Board pad-top) */
  }
}

/* ========================================================
   FO-SUP-01-01-001 — Support 메인
======================================================== */

/* 제품 자료 찾기 영역 */
.docs-area {
  padding-top: var(--spacing-2000); /* 80 — 모바일에서도 80 고정 */
}

/* 섹션 타이틀 */
.docs-area .head {
  text-align: center;
}
.docs-area .head .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.docs-area .head .desc {
  margin-top: var(--spacing-500); /* 20 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-high); /* #373839 */
}

/* 제품 카테고리 카드 — CSS 배경 이미지 + 딤 + 라벨 */
.docs-area .cate-list {
  display: flex;
  gap: var(--spacing-600); /* 24 */
  margin-top: var(--spacing-1000); /* 40 */
}
.docs-area .cate-list li {
  flex: 1;
}
.docs-area .cate-list a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400rem;
  border-radius: var(--radius-400); /* 16 */
  overflow: hidden;
}
/* 배경 이미지 레이어 — 호버 시 약간 확대 */
.docs-area .cate-list a::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.5s ease;
}
.docs-area .cate-list .lock a::before {
  background-image: url("../images/img-sup-smartlock.jpg");
}
.docs-area .cate-list .device a::before {
  background-image: url("../images/img-sup-accessdevice.jpg");
}
.docs-area .cate-list a:hover::before,
.docs-area .cate-list a:focus-visible::before {
  transform: scale(1.05);
}
.docs-area .cate-list .name {
  position: relative;
  z-index: 1;
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-white);
  transition: transform 0.4s ease;
}
.docs-area .cate-list a:hover .name,
.docs-area .cate-list a:focus-visible .name {
  transform: translateY(-60rem); /* 라벨 위로 이동 (시안: 중앙 → 상단) */
}
/* View More 버튼 — 호버 시 아래에서 위로 등장 */
.docs-area .cate-list .btn {
  position: absolute;
  left: 50%;
  top: 272rem;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, 24rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.docs-area .cate-list a:hover .btn,
.docs-area .cate-list a:focus-visible .btn {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* 퀵링크 카드 */
.docs-area .quick-list {
  display: flex;
  gap: var(--spacing-600); /* 24 */
  margin-top: var(--spacing-3000); /* 120 */
}
.docs-area .quick-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1000); /* 40 */
  flex: 1;
  padding: var(--padding-1000); /* 40 */
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-line-low); /* #e8e8e8 */
  border-radius: var(--radius-400); /* 16 */
}
.docs-area .quick-list .txt .tit {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.docs-area .quick-list .txt .desc {
  margin-top: var(--spacing-400); /* 16 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-high);
}
.docs-area .quick-list .btn {
  margin-top: auto; /* 버튼 하단 정렬 */
}

/* ── 모바일 (390 시안 · 7596-16147) ── */
@media (max-width: 1024px) {
  .docs-area .cate-list {
    flex-direction: column;
    gap: var(--spacing-600); /* 24 */
    margin-top: var(--spacing-600); /* 24 */
  }
  .docs-area .cate-list a {
    align-items: flex-start;
    height: 400rem;
    padding-top: 80rem; /* 라벨 상단 고정 */
  }
  /* 모바일 — 호버 인터랙션 없이 라벨/버튼 상시 노출 */
  .docs-area .cate-list a:hover .name,
  .docs-area .cate-list a:focus-visible .name {
    transform: none;
  }
  .docs-area .cate-list .btn {
    top: 312rem;
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
    background: var(--color-btn-default-secondary); /* #093568 — 모바일 시안은 세컨더리 */
    border-color: var(--color-btn-default-secondary);
  }
  .docs-area .quick-list {
    flex-direction: column;
    gap: var(--spacing-600); /* 24 */
    margin-top: 80rem;
  }
}

/* ========================================================
   FO-SUP-01-02-001 — Smart Locks 목록
   목록 필터 바(.list-filter/.list-search)는 공통 컴포넌트 — components.css 참조
======================================================== */

/* ========================================================
   FO-SUP-01-04-003 — Release Notes 상세
   (.detail-area — Detail_FAQ 등 게시물 상세 페이지 공용)
======================================================== */
.detail-area {
  padding-top: var(--spacing-2000); /* 80 */
}
.detail-area__inner {
  width: 952rem;
  margin: 0 auto;
}

/* 제목 + 게시일 */
.detail-area .head {
  text-align: center;
}
.detail-area .head .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.detail-area .head .date {
  margin-top: var(--spacing-400); /* 16 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
/* 메타 — 구분 | FAQ 카테고리 (Detail_FAQ) */
.detail-area .head .meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-500); /* 20 */
  margin-top: var(--spacing-400); /* 16 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
.detail-area .head .meta i {
  width: 1px;
  height: 16rem;
  background: var(--color-line-medium); /* #d0d1d2 */
}

/* 본문 — 에디터 등록 내용 */
.detail-area .body {
  margin-top: var(--spacing-2000); /* 80 */
}
/* 본문 이미지 — 에디터로 등록되는 콘텐츠라 클래스 없이 img 태그 대상, 높이는 원본 비율 */
.detail-area .body img {
  display: block;
  width: 100%;
}
.detail-area .editor {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1000); /* 40 */
  margin-top: var(--spacing-1000); /* 40 */
}
.detail-area .editor p {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
.detail-area .editor .sec-tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
}
.detail-area .editor ul {
  margin-top: var(--spacing-400); /* 16 */
}
.detail-area .editor ul li {
  list-style: disc;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}

/* 하단 구분선 */
.detail-area .divider {
  margin-top: var(--spacing-2000); /* 80 */
  border: 0;
  border-top: 1px solid var(--color-line-highest); /* #111 */
}

/* 목록으로 버튼 */
.detail-area .btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-2000); /* 80 */
}

/* ── 뉴스/블로그 상세 변형 (FO-DIS-04-01-003 · FO-DIS-05-01-003) ── */
/* 카테고리 라벨 — 제목 위 중앙 */
.detail-area--news .head .label {
  margin-bottom: 16rem;
}
/* 유튜브 — 에디터 이미지처럼 래퍼 없이 태그 대상, 이미지와 16 간격 */
.detail-area--news .body iframe {
  display: block;
  width: 100%;
  aspect-ratio: 952 / 533;
  margin-top: 16rem;
  background: #000;
  border: 0;
}
.detail-area--news .editor {
  margin-top: var(--spacing-2000); /* 80 */
}
/* 뉴스 원문 보기 — 본문 아래 우측 (원문 URL 등록 시 노출) */
.detail-area--news .origin-link {
  display: flex;
  justify-content: flex-end;
  margin-top: 40rem;
}
/* 첨부파일 (설계 8 — 1개 이상 등록 시 노출, 최대 5개) */
.detail-area--news .attachments {
  margin-top: var(--spacing-2000); /* 80 */
  padding: 32rem;
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
  border-radius: 8rem;
}
.detail-area--news .attachments__tit {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-btn-text-on-btn-black); /* #062141 */
}
.detail-area--news .attachments ul {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin-top: 16rem;
}
.detail-area--news .attachments a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 파일명 1줄 말줄임 (설계 8-1) */
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
  text-decoration: underline;
  text-underline-offset: 3rem;
}
.detail-area--news .attachments a:hover,
.detail-area--news .attachments a:focus-visible {
  color: var(--color-text-default-highest);
}
/* 구분선 — 첨부 박스 아래 32 */
.detail-area--news .divider {
  margin-top: 32rem;
}

/* ── 모바일 (모바일 시안 미확정 — 재량 처리) ── */
@media (max-width: 1024px) {
  .detail-area {
    padding-top: 48rem;
  }
  .detail-area__inner {
    width: calc(100% - 48rem);
  }
  .detail-area .body,
  .detail-area .divider,
  .detail-area .btn-wrap {
    margin-top: 48rem;
  }
}

/* ========================================================
   FO-PRO-07-01-001 — All Products (제품 목록)
======================================================== */

/* 제품 카드 그리드 — 3열 · 컬럼 40 / 로우 80 */
.product-area .pd-list,
.search-area .pd-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2000) var(--spacing-1000); /* 80 40 */
}
.product-area .pd-list a,
.search-area .pd-list a {
  display: block;
}
/* 썸네일 — 연회색 라운드 박스 + 제품 컷아웃 이미지 */
.product-area .pd-list .thumb,
.search-area .pd-list .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
  border-radius: var(--radius-400); /* 16 */
  overflow: hidden;
}
/* 썸네일 원본(정사각)이 박스를 꽉 채움 — 패딩 없음, 흰 배경 이미지여도 박스 회색(#f8f8f8)이 비치도록 multiply (2026-10-01) */
.product-area .pd-list .thumb img,
.search-area .pd-list .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  transition: transform 0.4s ease;
}
.product-area .pd-list a:hover .thumb img,
.search-area .pd-list a:hover .thumb img,
.product-area .pd-list a:focus-visible .thumb img,
.search-area .pd-list a:focus-visible .thumb img {
  transform: scale(1.05);
}
/* 텍스트 — 카테고리 / 제품명 / 슬로건 */
.product-area .pd-list .txt,
.search-area .pd-list .txt {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200); /* 8 */
  margin-top: var(--spacing-800); /* 32 */
  padding: 0 var(--spacing-300); /* 12 */
}
.product-area .pd-list .cate,
.search-area .pd-list .cate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-low); /* #8a8c8e */
}
.product-area .pd-list .name,
.search-area .pd-list .name {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24(20) — 피그마 list-thumbnail 컴포넌트 b1 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.product-area .pd-list .desc,
.search-area .pd-list .desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 설명 Intro 최대 4줄 + 말줄임 (화면설계 3-4) */
  overflow: hidden;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-low); /* #8a8c8e — 피그마 list-thumbnail 컴포넌트 */
}
/* 더 보기 */
.product-area .btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-2000); /* 80 */
}

/* No Data — 구분선 없이 상단 80, 하단 여백은 푸터 간격(200)으로 처리 (시안 7596-14808) */
.product-area .no-content {
  padding: var(--spacing-2000) 0 0; /* 80 0 0 */
  border-top: 0;
}

@media (max-width: 1024px) {
  .product-area .pd-list,
  .search-area .pd-list {
    grid-template-columns: 1fr;
    gap: 80rem;
  }
}

/* ========================================================
   FO-PRO-01-01-001 — Push/Pull Mortise (유형 소개 · 제품 목록)
======================================================== */

/* 대표 제품 비주얼 — 풀와이드 960 크롭 (관리자 등록: 이미지·영상 모두 대응) */
.type-visual {
  height: 960rem;
  margin-top: 40rem; /* 브레드크럼 하단 여백 */
  overflow: hidden;
  background: #000;
}
.type-visual img,
.type-visual video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 비율 다른 원본도 영역 채움 + 중앙 크롭 */
}

/* 유형 소개 — 좌 타이틀 / 우 설명 2단 */
.type-intro {
  padding: 120rem 0;
}
.type-intro .inner {
  display: flex;
  justify-content: space-between;
  gap: 80rem;
}
.type-intro .tit h1 {
  font-family: var(--font-family-eng);
  font-size: var(--type-h2); /* 64 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.type-intro .tit p {
  max-width: 464rem;
  margin-top: 40rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.type-intro .desc {
  flex-shrink: 0;
  width: 730rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-high); /* #373839 */
}

/* 제품 목록 — 공통 product-area 재사용 + 중앙 타이틀, 슬로건 1줄 말줄임 */
.product-area--type {
  padding-top: 160rem;
}
.product-area__title {
  margin-bottom: 40rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
  text-align: center;
}
@media (max-width: 1024px) {
  /* 비주얼 — 원본 비율 그대로 노출 */
  .type-visual {
    height: auto;
    margin-top: 0;
  }
  .type-visual img,
  .type-visual video {
    height: auto;
  }
  .type-intro {
    padding: 80rem 0;
  }
  /* 유형명 → 서브카피 40(데스크톱 규칙 유지), 서브카피 → 설명 20 */
  .type-intro .inner {
    flex-direction: column;
    gap: 20rem;
  }
  .type-intro .desc {
    width: 100%;
  }
  .product-area--type {
    padding-top: 100rem;
  }
}

/* ========================================================
   FO-PRO-01-01-002 — 제품 상세 (유형별 공통 템플릿)
   각 섹션은 관리자 등록에 따라 통째로 빠질 수 있는 독립 블록
======================================================== */

/* 상단 제품 요약 — 연회색 배경 */
.pd-top {
  position: relative;
  padding: 64rem 0 180rem;
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
}
.pd-top__back {
  position: absolute;
  top: 80rem;
  left: calc((100% - 1440rem) / 2);
  width: 40rem;
  height: 40rem;
  background-color: var(--color-ic-black); /* #111 */
  -webkit-mask: url("../images/ico-arrow-tail-left.svg") center / contain no-repeat;
  mask: url("../images/ico-arrow-tail-left.svg") center / contain no-repeat;
}
.pd-top__back:hover,
.pd-top__back:focus-visible {
  background-color: var(--color-ic-point); /* #1475e7 */
}
.pd-top__name {
  font-family: var(--font-family-eng);
  font-size: var(--type-h2); /* 64 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
  text-align: center;
}
.pd-top .inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 100rem;
}
.pd-top__info {
  width: 589rem;
  padding-top: 46rem;
}
.pd-top__slogan {
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-high); /* #373839 */
}
.pd-top__desc {
  margin-top: 20rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
/* 색상(Finish) — 관리자 등록 컬러 칩 */
.pd-top__finish {
  display: flex;
  gap: 40rem;
  width: 854rem; /* 정보 영역(589) 밖 이미지 앞(x 1094)까지 한 줄 — 피그마 7682-1289 */
  margin-top: 56rem;
}
.pd-top__finish .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
}
.pd-top__finish .colors {
  display: flex;
  flex-wrap: wrap; /* 854 폭을 넘는 개수면 줄바꿈 */
  gap: 16rem 8rem;
  flex: 1;
  min-width: 0;
}
/* 칩마다 고정 폭 92 — 색상명 글자수와 무관하게 칩 간격 일정(8), 긴 색상명은 줄바꿈 (2026-10-02 QA · 피그마 7682-1289) */
.pd-top__finish .colors li {
  flex: 0 0 auto;
  width: 92rem;
}
.pd-top__finish .colors button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  width: 100%;
}
.pd-top__finish .colors i {
  width: 50rem;
  height: 50rem;
  margin: 3rem; /* 활성 outline(2+1) 자리 — 56 박스 */
  border-radius: var(--radius-300); /* 12 */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); /* 밝은 칩 경계 보정 */
  overflow: hidden;
}
/* 칩은 관리자 등록 PNG 이미지 (2026-10-02) */
.pd-top__finish .colors i img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.pd-top__finish .colors span {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  text-align: center;
  color: var(--color-text-default-medium); /* #535455 */
}
.pd-top__finish .colors .is-active i {
  outline: 1rem solid var(--color-line-highest); /* #111 */
  outline-offset: 2rem;
}
.pd-top__img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 586rem;
  height: 586rem;
  background: var(--color-bg-default-white);
  border-radius: var(--radius-800); /* 32 */
  overflow: hidden;
}
/* 색상별 이미지 전부 마크업에 두고 선택된 것만 노출 — 썸네일과 동일하게 586×586 정사각 원본이 박스를 꽉 채움 (2026-10-01) */
.pd-top__img img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd-top__img img.is-active {
  display: block;
}

/* 상세 섹션 바로가기 — ScrollTrigger로 상단 고정 */
.pd-nav {
  position: relative;
  z-index: 30;
  background: var(--color-gray-900); /* #111 */
}
.pd-nav .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 77rem;
}
.pd-nav__name {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: #fff;
}
.pd-nav__menu {
  display: flex;
  gap: 24rem;
}
.pd-nav__menu a {
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: #fff;
  transition: color 0.3s ease;
}
.pd-nav__menu a:hover,
.pd-nav__menu a:focus-visible,
.pd-nav__menu a.is-active {
  color: var(--color-brand-new-blue); /* #1475e7 */
}

/* 상세 섹션 공통 — 독립 블록 (빠져도 리듬 유지) */
.pd-section {
  padding: 120rem 0 160rem;
}
.pd-section:last-of-type {
  padding-bottom: 0; /* 마지막 섹션 하단 여백은 푸터 간격(200)으로 처리 */
}
/* 섹션 사이 구분선 — 풀와이드, 위 160(이전 섹션 패딩)/아래 120 간격 */
.pd-section + .pd-section {
  padding-top: 0;
}
.pd-section + .pd-section::before {
  content: "";
  display: block;
  margin-bottom: 120rem;
  border-top: 1px solid var(--color-line-low); /* #e8e8e8 */
}
.pd-section__title {
  margin-bottom: 80rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
  text-align: center;
}

/* 상세 이미지 (관리자 등록) */
.pd-visual img {
  display: block;
  width: 100%;
  border-radius: var(--radius-800); /* 32 */
}

/* 좌 타이틀 / 우 콘텐츠 2단 행 */
.pd-row {
  display: flex;
  gap: 24rem;
}
.pd-row + .pd-row {
  margin-top: 80rem;
}
.pd-row__tit {
  flex-shrink: 0;
  width: 464rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-highest);
}
.pd-row__cont {
  flex: 1;
  min-width: 0;
}
/* 타이틀이 위로 오는 풀와이드 행 */
.pd-row--full {
  display: block;
}
.pd-row--full .pd-row__tit {
  display: block;
  width: auto;
  margin-bottom: 24rem;
}

/* 아이콘 나열 (출입 방식·특장점) */
.icon-group + .icon-group {
  margin-top: 80rem;
}
.icon-group__tit {
  display: block;
  margin-bottom: 24rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.icon-list {
  display: flex;
  gap: 40rem;
}
.icon-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
  width: 120rem;
}
.icon-list img {
  width: 120rem;
  height: 120rem;
}
.icon-list span {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-high); /* #373839 */
  text-align: center;
}
/* 전체 폭 균등 배치 (Key Features) */
.icon-list--spread {
  gap: 0;
  justify-content: space-between;
}
.icon-list--spread li {
  flex: 1;
  width: auto;
}

/* 스마트홈 연동 로고 */
.logo-list {
  display: flex;
  gap: 24rem;
}
.logo-list li {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12rem;
}
.logo-list .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rem;
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
  border-radius: var(--radius-300); /* 12 */
}
/* 로고 박스 이미지 — 시안 268×100 박스(배경 포함) 2배 export PNG (2026-09-30 피그마 7663-15527)
   항목 개수가 적어 li가 넓어져도 이미지는 268×100 고정, 박스 배경(#f8f8f8)이 이미지 배경과 같아 자연스럽게 이어짐 */
.logo-list .logo {
  overflow: hidden;
}
.logo-list .logo img {
  flex-shrink: 0;
  width: 268rem;
  height: 100rem;
  object-fit: cover;
}
.logo-list .txt {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-high); /* #373839 */
  text-align: center;
}
.pd-row--full .btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24rem;
}

/* 특장점 텍스트 (관리자 등록 · 줄바꿈 그대로) */
.pd-features__text {
  margin-top: 80rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: 1.5;
  color: var(--color-text-default-highest);
}
/* 제품 영상 (관리자 유튜브 등록 — 아이프레임) */
.pd-video {
  aspect-ratio: 1440 / 806;
  margin-top: 80rem;
  background: #000;
  border-radius: var(--radius-800); /* 32 */
  overflow: hidden;
}
.pd-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 사양 목록 */
.spec-list__row {
  display: flex;
  gap: 24rem;
}
.spec-list__row + .spec-list__row {
  margin-top: 40rem;
  padding-top: 41rem;
  border-top: 1px solid var(--color-line-low); /* #e8e8e8 */
}
.spec-list__row dt {
  flex-shrink: 0;
  width: 464rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-highest);
}
.spec-list__row dd {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: 1.5;
  color: var(--color-text-default-medium); /* #535455 */
}
/* 스펙 값 표 (디자이너 코멘트 · 관리자 에디터 등록 표 포함) — 라벨(Outdoor/Indoor) 열 + 값 열, 테두리 없음 */
.spec-list__row dd table {
  border-collapse: collapse;
  text-align: left;
}
.spec-list__row dd th,
.spec-list__row dd td {
  padding: 0 0 16rem;
  font-family: var(--font-family-eng); /* 리셋의 th 폰트 지정 덮어씀 */
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  vertical-align: top;
}
.spec-list__row dd th {
  width: 120rem; /* 기본 라벨 열 폭 — 긴 라벨(Door Thickness 등)은 nowrap으로 열이 자동 확장 (2026-10-01 QA) */
  padding-right: 24rem;
  color: var(--color-text-default-highest);
  white-space: nowrap;
}
.spec-list__row dd tr:last-child th,
.spec-list__row dd tr:last-child td {
  padding-bottom: 0;
}
/* 관리자 에디터 입력 영역의 불릿·번호 목록 — 리셋(list-style: none) 복구, 에디터 영역(스펙 값·특장점 텍스트·상세 본문·메인 팝업) 안에서만 (2026-10-02 QA) */
.spec-list__row dd ul,
.pd-features__text ul,
.detail-area .editor ul,
.mainpop-html ul {
  padding-left: 24rem;
  list-style: disc;
}
.spec-list__row dd ol,
.pd-features__text ol,
.detail-area .editor ol,
.mainpop-html ol {
  padding-left: 24rem;
  list-style: decimal;
}
.spec-list__row dd li,
.pd-features__text li,
.detail-area .editor li,
.mainpop-html li {
  list-style: inherit;
}

/* 관련 제품 카드 (소형) */
.pd-list--sm {
  display: flex;
  gap: 24rem;
}
.pd-list--sm li {
  flex-shrink: 0;
  width: 342rem;
}
.pd-list--sm a {
  display: block;
}
.pd-list--sm .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: var(--padding-1000); /* 40 */
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
  border-radius: var(--radius-400); /* 16 */
  overflow: hidden;
}
.pd-list--sm .thumb img {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.4s ease;
}
.pd-list--sm a:hover .thumb img,
.pd-list--sm a:focus-visible .thumb img {
  transform: scale(1.05);
}
.pd-list--sm .txt {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin-top: 32rem;
  padding: 0 12rem;
}
.pd-list--sm .name {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.pd-list--sm .desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 설명 최대 4줄 + 말줄임 */
  overflow: hidden;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
}
/* 액세서리 설명 — 말줄임 없이 전체 표시 (설계 6-2C) */
.pd-list--sm .desc--full {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
/* 호환 제품 스와이퍼 — 인너 밖 오른쪽 화면 끝까지 블리드, 넘긴 카드도 잘리지 않게 노출 */
.pd-swiper {
  margin-right: calc(-1 * (100vw - 1440rem) / 2);
  overflow: visible;
}
/* 뷰포트 밖으로 나간 슬라이드만 잘라 가로 스크롤 방지 (화면 안에서는 안 잘림) */
#related-products {
  overflow-x: clip;
}
.pd-swiper .pd-list--sm {
  gap: 0; /* 간격은 슬라이드 margin으로 처리 (스와이퍼 계산에 포함) */
}
.pd-swiper .swiper-slide {
  width: 342rem;
  margin-right: 24rem;
}

/* 다운로드 그룹 */
.dl-group + .dl-group {
  margin-top: 40rem;
  padding-top: 41rem;
  border-top: 1px solid var(--color-line-low); /* #e8e8e8 */
}
.dl-group__tit {
  display: block;
  margin-bottom: 24rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.dl-group__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12rem;
}
/* 앱 마켓 버튼 — 로고 이미지형 */
.btn-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48rem;
  padding: 0 24rem;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-line-highest); /* #111 */
  border-radius: var(--radius-full);
  transition: background-color 0.4s ease;
}
.btn-store:hover,
.btn-store:focus-visible {
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
}
.btn-store img {
  height: 22rem;
}

/* FAQ — 카테고리 앞 Q 표기 + 하단 더 보기 */
.pd-faq .board-text__cate b {
  margin-right: 8rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default-highest);
}
.pd-faq .btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40rem;
}

/* ========================================================
   FO-PRO-01-01-002-L01 — 다운로드 레이어 (Products·Support 공통)
======================================================== */
.pop-download__desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
}
.pop-download__desc .file {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-new-blue); /* #1475e7 */
}
.pop-download__note {
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body);
  color: var(--color-text-default-highest);
}
.pop-download .mark {
  color: var(--color-text-status-danger); /* #c41b24 */
}
.pop-download__form {
  display: flex;
  flex-direction: column;
  gap: 40rem;
  margin-top: 40rem;
}
/* 이름 2열 */
.pop-download__row {
  display: flex;
  gap: 24rem;
}
.pop-download__row .input {
  flex: 1;
  min-width: 0;
}
/* 폼 셀렉트 — 인풋과 같은 풀 너비 */
.pop-download .selectbox {
  width: 100%;
}
/* 개인정보 수집 안내 — Privacy Policy 텍스트 링크 (새 창) */
.pop-download__agree .link-policy {
  text-decoration: underline;
  text-underline-offset: 3rem;
  color: inherit;
}
.pop-download__agree .link-policy:hover,
.pop-download__agree .link-policy:focus-visible {
  color: var(--color-text-default-highest);
}
/* 개인정보 수집 안내 */
.pop-download__agree {
  padding: 20rem;
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}

@media (max-width: 1024px) {
  .pop-download__row {
    flex-direction: column;
    gap: 40rem;
  }
}

/* ========================================================
   FO-DIS-04-01-001 — News (목록)
======================================================== */
/* 카테고리 셀렉트 — 시안 폭 320 */
.news-area .select-wrap {
  width: 320rem;
}
/* No Data — 필터 아래 구분선 간격 40 (공통 보정 -24 대신) */
.news-area .list-filter + .no-content {
  margin-top: -4rem;
}
/* 뉴스 카드 그리드 — 3열 · 컬럼 40 / 로우 80 */
.news-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 80rem 40rem;
}
.news-list a {
  display: block;
}
.news-list .thumb {
  display: block;
  aspect-ratio: 710 / 473;
  background: url("../images/img-thumb-default.png") center / cover no-repeat; /* 이미지 없거나 로드 전 기본 썸네일 (2026-10-02) */
  border-radius: var(--radius-400); /* 16 */
  overflow: hidden;
}
.news-list .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.news-list a:hover .thumb img,
.news-list a:focus-visible .thumb img {
  transform: scale(1.05);
}
.news-list .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--spacing-800); /* 32 */
  padding: 0 16rem;
}
.news-list .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 제목 최대 3줄 + 말줄임 (설계 4-3) */
  overflow: hidden;
  margin-top: 4rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-highest);
}
.news-list .date {
  margin-top: 16rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: 1.6;
  color: var(--color-text-default-low); /* #8a8c8e */
}
@media (max-width: 1024px) {
  .news-area .select-wrap {
    width: 100%;
  }
  .news-list {
    grid-template-columns: 1fr;
    gap: 48rem;
  }
}

/* ========================================================
   FO-CON-01-01-001 — Contact Us (오피스 위치 · 바로가기 배너)
======================================================== */
.contact-area {
  padding-top: var(--spacing-2000); /* 80 */
}
.contact-area__title h2 {
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.contact-area__title p {
  margin-top: 20rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
/* 오피스 목록 — 좌 정보 / 우 구글맵 iframe 영역 */
.office-list {
  display: flex;
  flex-direction: column;
  gap: 40rem;
  margin-top: 40rem;
}
.office-list li {
  display: flex;
  height: 320rem;
}
.office-list .txt {
  flex-shrink: 0;
  width: 50%;
  padding: 60rem 40rem;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-line-low); /* #e8e8e8 */
  border-right: 0;
  border-radius: var(--radius-400) 0 0 var(--radius-400); /* 좌측 16 */
}
.office-list .name {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.office-list .info {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  margin-top: 40rem;
}
.office-list .info .row {
  display: flex;
  gap: 12rem;
}
.office-list .info dt {
  flex-shrink: 0;
  width: 130rem;
  padding-left: 27rem;
  position: relative;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
}
.office-list .info dt::before {
  content: "";
  position: absolute;
  top: 10rem;
  left: 12rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--color-text-default-highest);
}
.office-list .info dd {
  min-width: 0;
  overflow-wrap: anywhere; /* 이메일 등 긴 한 단어 값도 영역 안에서 줄바꿈 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: #727272; /* ver.3 시안 */
}
/* 구글맵 영역 — 연동 전 지도 이미지 플레이스홀더 (img → iframe 교체) */
.office-list .map {
  flex: 1;
  min-width: 0;
  background: var(--color-bg-primary-light-level-3, #e8e8e8);
  border-radius: 0 var(--radius-400) var(--radius-400) 0; /* 우측 16 */
  overflow: hidden;
}
.office-list .map iframe,
.office-list .map img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
/* 바로가기 카드 — 페이지 타이틀(하단 패딩 80) 바로 아래 (ver.3 content 상단 패딩 0) */
.contact-area--link {
  padding-top: 0;
}
/* 오피스 위치 — 바로가기 카드 아래 120 */
.contact-area--loc {
  padding-top: 120rem;
}

/* 바로가기 카드 (ver.3) — 연파랑 카드 + 아이콘 원 + 타이틀/설명 + h48 버튼, 중앙 정렬 */
.contact-link {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rem;
}
.contact-link li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rem;
  background: var(--color-bg-secondary-light-level-1); /* #e7f2ff */
  border-radius: var(--radius-400); /* 16 */
  text-align: center;
}
.contact-link .icon {
  width: 120rem;
  height: 120rem;
  background: var(--color-bg-default-white) center / 74rem 74rem no-repeat;
  border: 1px solid var(--color-line-low); /* #e8e8e8 */
  border-radius: 50%;
}
.contact-link .icon--find {
  background-image: url("../images/ico-contact-find.svg");
}
.contact-link .icon--sales {
  background-image: url("../images/ico-contact-sales.svg");
}
.contact-link .tit {
  margin-top: 16rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.contact-link .desc {
  margin-top: 8rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
.contact-link .btn {
  margin-top: 24rem;
}

/* ── 모바일 (시안 8185-18680) ── */
@media (max-width: 1024px) {
  .contact-area {
    padding-top: 48rem;
  }
  /* 오피스 — 정보 위 / 지도 아래 세로 스택 */
  .office-list li {
    flex-direction: column;
    height: auto;
  }
  .office-list .txt {
    width: 100%;
    padding: 40rem 24rem;
    border-right: 1px solid var(--color-line-low);
    border-bottom: 0;
    border-radius: var(--radius-400) var(--radius-400) 0 0;
  }
  .office-list .info dt {
    width: 120rem;
  }
  .office-list .map {
    flex: none;
    height: 152rem;
    border-radius: 0 0 var(--radius-400) var(--radius-400);
  }
  /* 바로가기 카드 — 1열 스택 (M 시안: 아이콘 96, 타이틀 20, 버튼 24 아래) · 오피스 위치는 96 아래 */
  .contact-area--link {
    padding-top: 0;
  }
  .contact-area--loc {
    padding-top: 96rem;
  }
  .contact-link {
    grid-template-columns: 1fr;
  }
  .contact-link li {
    min-height: 0;
  }
  .contact-link .icon {
    width: 96rem;
    height: 96rem;
    background-size: 59rem 59rem;
  }
  .contact-link .tit {
    font-size: 20rem;
  }
  .contact-link .desc {
    margin-top: 4rem;
  }
  .contact-link .btn {
    margin-top: 24rem;
  }
}

/* ========================================================
   FO-CON-01-02-001 — How Can We Help (문의하기 폼)
======================================================== */
.inquiry-area {
  padding-top: var(--spacing-2000); /* 80 */
}
.inquiry-area__inner {
  width: 708rem;
  margin: 0 auto;
}
/* 필수 입력 안내 */
.inquiry-area__note {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
  text-align: right;
}
.inquiry-area .mark {
  color: var(--color-text-status-danger); /* #c41b24 */
}
/* 섹션 — 타이틀/설명 + 폼 */
.inquiry-sec {
  margin-top: 40rem;
}
.inquiry-sec + .inquiry-sec {
  margin-top: 120rem;
}
.inquiry-sec__head h2 {
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.inquiry-sec__head h3 {
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-highest);
}
.inquiry-sec__head p {
  margin-top: 20rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
.inquiry-sec__form {
  display: flex;
  flex-direction: column;
  gap: 32rem;
  margin-top: 40rem;
}
/* 2열 행 (First/Last Name · Project Scale/Timeline) */
.inquiry-sec__row {
  display: flex;
  gap: 32rem;
}
.inquiry-sec__row .input {
  flex: 1;
  min-width: 0;
}
.inquiry-sec .select-wrap .selectbox {
  width: 100%;
}
/* 첨부파일 — 인풋 + 업로드 버튼 */
.inquiry-file__row {
  display: flex;
  gap: 24rem;
}
.inquiry-file__row .input__box {
  flex: 1;
  min-width: 0;
}
.inquiry-file__row .btn {
  flex-shrink: 0;
}
/* 유입 경로 체크박스 — 가로 나열 */
.inquiry-check {
  display: flex;
  flex-wrap: wrap;
  gap: 24rem;
  margin-top: 32rem;
}
/* 하단 동의 영역 — 유입경로 + 마케팅 동의 + 개인정보 동의 (시안 8202-19793 agree · 세로 간격 48) */
.inquiry-agree {
  display: flex;
  flex-direction: column;
  gap: 48rem;
  margin-top: 120rem;
}
.inquiry-agree__source h3 {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
}
/* 동의 항목 묶음 — 개인정보(필수) 위 · 마케팅(선택) 아래, 항목 간격 32 */
.inquiry-agree__terms {
  display: flex;
  flex-direction: column;
  gap: 32rem;
}
/* 동의 문구 — 체크박스 라벨로 통합 (16 레귤러 #535455) */
.inquiry-agree__item .checkbox__label {
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
.inquiry-agree__item .dot {
  color: var(--color-text-default-highest);
}
.inquiry-agree .link-policy {
  color: var(--color-text-point-default); /* #1475e7 */
  text-decoration: underline;
  text-underline-offset: 3rem;
}
.inquiry-agree .link-policy:hover,
.inquiry-agree .link-policy:focus-visible {
  color: var(--color-text-point-default);
  text-decoration: none;
}
/* 제출 버튼 */
.inquiry-area__submit {
  display: flex;
  justify-content: center;
  margin-top: 120rem;
}

/* ── 모바일 (시안 8202-23023) ── */
@media (max-width: 1024px) {
  .inquiry-area__inner {
    width: calc(100% - 48rem);
  }
  .inquiry-area__note {
    font-size: var(--type-b3); /* 18 */
    color: var(--color-text-default-high); /* #373839 */
  }
  .inquiry-sec__head p {
    font-size: var(--type-b3); /* 18 */
    color: var(--color-text-default-high);
  }
  .inquiry-sec__row {
    flex-direction: column;
    gap: 32rem;
  }
  /* 첨부파일 — 인풋 풀폭, 도움말 아래 업로드 버튼 (시안 순서: 인풋 → 도움말 → 버튼) */
  .inquiry-file__row {
    display: contents;
  }
  .inquiry-file__row .input__box {
    flex: 0 0 auto; /* 세로 flex(.input) 기준 flex:1이 높이를 찌부러뜨리는 것 방지 */
  }
  .inquiry-file__row .btn {
    order: 10;
    margin-top: 20rem; /* .input gap 12 + 20 = 시안 32 */
    align-self: flex-start;
  }
  /* 하단 동의 — 문구 줄바꿈 해제 (PC 시안 강제 개행) */
  .inquiry-agree__item .checkbox__label br {
    display: none;
  }
}

/* ========================================================
   FO-CON-01-03-001 — Find an Official Distributor (대리점 지도)
======================================================== */
.dist-area {
  padding-top: var(--spacing-2000); /* 80 */
}
.dist-map {
  position: relative;
  width: 1440rem;
  margin: 0 auto;
}
.dist-map__bg {
  display: block;
  width: 100%;
}
/* 마커 — 국기 + 국가명 (국기 박스 좌상단 기준 % 앵커 · 인라인 left/top) */
.dist-map__marker {
  display: flex;
  position: absolute;
  align-items: center;
  gap: 6rem;
  white-space: nowrap;
}
/* 국기 — 32×32 박스 (실제 국기 32×24 + 상하 투명 여백) */
.dist-map__flag {
  flex-shrink: 0;
  width: 32rem;
  height: 32rem;
  transition: transform 0.25s ease;
}
.dist-map__name {
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  font-size: var(--type-cap1);
  line-height: var(--lh-display);
  color: var(--color-neutral-black);
  transition: color 0.25s ease;
}
.dist-map__marker:hover .dist-map__flag,
.dist-map__marker:focus-visible .dist-map__flag,
.dist-map__marker.is-active .dist-map__flag {
  transform: scale(1.15); /* 국기가 살짝 커짐 */
}
.dist-map__marker:hover .dist-map__name,
.dist-map__marker:focus-visible .dist-map__name,
.dist-map__marker.is-active .dist-map__name {
  color: var(--color-text-point-default);
}
/* ── 모바일 (시안 8210-24645) — 지도 시안 크기 유지 + 가로 스크롤 ── */
@media (max-width: 1024px) {
  .dist-area {
    overflow-x: auto; /* 지도가 화면보다 넓어 가로 스크롤 */
  }
  .dist-map {
    width: 1327rem; /* 시안 지도 실측 폭 (390 기준) */
    margin: 0 24rem; /* 스크롤 양 끝 여백 */
  }
}

/* ========================================================
   FO-CON-01-02-002 — Submission Complete (문의 제출 완료)
======================================================== */
.inquiry-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rem 24rem 0;
  text-align: center;
}
.inquiry-done__icon {
  width: 64rem;
  height: 64rem;
  background: url("../images/ico-status-complete-light.svg") center / contain no-repeat;
}
.inquiry-done__title {
  margin-top: 20rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.inquiry-done__desc {
  margin-top: 20rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-high); /* #373839 */
}
.inquiry-done .btn {
  margin-top: 120rem;
}

/* ========================================================
   FO-COM-01-01-002 — 통합검색 결과
======================================================== */
/* 검색어 입력 — 라운드 풀 바 (시안 720) */
.search-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-400); /* 16 */
  width: 720rem;
  height: 60rem;
  margin: 0 auto;
  padding: 0 var(--padding-600); /* 24 */
  border: 1px solid var(--color-bd-active); /* #111 */
  border-radius: var(--radius-full);
  background: var(--color-bg-default-white);
}
.search-box__field {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.search-box__field::placeholder {
  color: var(--color-text-default-medium);
}
/* 2026-10-12 수정 (QA) — 포커스 시 placeholder 숨김 (클래스 규칙보다 우선) */
.search-box__field:focus::placeholder {
  color: transparent;
  opacity: 0;
}
.search-box__field:focus {
  outline: none;
}
.search-box__del {
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  background-color: var(--color-ic-gray); /* #8a8c8e */
  -webkit-mask: url("../images/ico-delete-circle.svg") center / contain no-repeat;
  mask: url("../images/ico-delete-circle.svg") center / contain no-repeat;
}
.search-box__btn {
  flex-shrink: 0;
  width: 32rem;
  height: 32rem;
  background-color: var(--color-ic-black); /* #111 */
  -webkit-mask: url("../images/ico-search-32.svg") center / contain no-repeat;
  mask: url("../images/ico-search-32.svg") center / contain no-repeat;
}
/* 결과 수 — 키워드 포인트 컬러 */
.search-area__count {
  margin-top: 20rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-high); /* #373839 */
  text-align: center;
}
.search-area__count .keyword {
  font-size: 24rem; /* 모바일에서도 24 유지 (시안) */
  color: var(--color-text-point-default); /* #1475e7 */
}
/* 결과 섹션 — 타이틀(굵은 구분선) + 콘텐츠 */
.sr-sec {
  margin-top: 80rem;
}
.sr-sec__title {
  padding-bottom: 12rem;
  border-bottom: 1px solid var(--color-line-high); /* #535455 */
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-highest);
}
.sr-sec__title + * {
  margin-top: 40rem;
}
.sr-sec__more {
  display: flex;
  justify-content: center;
  margin-top: 40rem;
}
/* 메뉴 결과 */
.sr-menu {
  display: flex;
  flex-direction: column;
  gap: 20rem;
}
.sr-menu a {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
.sr-menu a:hover,
.sr-menu a:focus-visible {
  color: var(--color-text-point-default);
}
/* 제품 결과 카드 — 공통 .pd-list 재사용 + 시안 차이만 오버라이드 (4열 · 축소 타이포) */
.search-area .pd-list {
  grid-template-columns: repeat(4, 1fr);
  gap: 24rem;
}
.search-area .pd-list li {
  min-width: 0; /* nowrap 말줄임 텍스트가 1fr 컬럼 폭을 밀어내지 않게 */
}
.search-area .pd-list .thumb {
  display: block;
  position: relative;
}
/* 정사각 박스를 이미지가 꽉 채움 (2026-10-01 — 여백 60 중앙 배치에서 변경) */
.search-area .pd-list .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.search-area .pd-list .txt {
  gap: 4rem;
}
.search-area .pd-list .cate {
  font-size: var(--type-b3); /* 18 */
  color: var(--color-text-default-high); /* #373839 */
}
.search-area .pd-list .name {
  font-size: var(--type-b2); /* 20 */
  line-height: var(--lh-body-tight); /* 1.2 */
}
.search-area .pd-list .desc {
  margin-top: 4rem;
  color: var(--color-text-default-low); /* #8a8c8e */
}
/* 목록형 결과 (서포트/뉴스/인사이트) — 공통 .board-text 재사용 + 시안 차이만 오버라이드 */
.search-area .board-text {
  margin-bottom: 0;
  border-top: 0; /* 섹션 타이틀에 구분선이 있어 상단 라인 제거 */
}
.search-area .board-text li + li {
  margin-top: 20rem;
}
/* components.css(뒤 로드)의 모바일 패딩보다 우선하도록 특이도 상승 */
.search-area .board-text .board-text__item {
  gap: 16rem;
  padding: 0 0 20rem;
  border-bottom-color: var(--color-line-low); /* #e8e8e8 */
}
.search-area .board-text__cate {
  width: 440rem;
  color: var(--color-text-default-medium); /* #535455 */
}
.search-area .board-text--news .board-text__cate {
  width: 180rem;
}
.search-area .board-text__title {
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-high); /* #373839 */
}
/* 다운로드 아이콘 (매뉴얼·가이드 행) */
.search-area .board-text__dl {
  flex-shrink: 0;
  width: 32rem;
  height: 32rem;
  background-color: var(--color-ic-black);
  -webkit-mask: url("../images/ico-download.svg") center / contain no-repeat;
  mask: url("../images/ico-download.svg") center / contain no-repeat;
}
/* 결과 없음 — 섹션 타이틀에 이미 라인이 있어 no-content 자체 라인 제거 (시안 8271-24112) */
.sr-sec .no-content {
  border-top: 0;
  padding: 80rem 0;
}

/* ── 모바일 (시안 8271-24832) ── */
@media (max-width: 1024px) {
  .search-box {
    width: 100%;
  }
  .search-area .pd-list {
    grid-template-columns: 1fr; /* 데스크톱 4열 규칙(뒤 선언)이 공통 모바일 1열을 이겨서 재선언 */
    gap: 24rem; /* 공통 모바일(80)보다 촘촘한 시안 간격 */
  }
  /* 목록형 — 공통 board-text 모바일 스택에서 시안 간격(8)만 조정 */
  .search-area .board-text .board-text__item {
    gap: 8rem;
  }
  .search-area .board-text__cate,
  .search-area .board-text--news .board-text__cate {
    width: auto;
  }
}

/* ========================================================
   FO-ETC-03-01-001 — 브라우저 업데이트 안내 레이어
======================================================== */
/* 헤더 — 타이틀 + 오늘 하루 보지 않기 + 닫기 */
.layer-popup.pop-browser .pop-head {
  gap: var(--spacing-300); /* 12 */
}
.pop-browser .pop-head__hide {
  flex-shrink: 0;
}
.pop-browser .pop-head__hide .checkbox__label {
  white-space: nowrap;
  font-size: var(--type-b3); /* 18 */
}
/* 콘텐츠 슬롯 — 본문 패딩(40) 안쪽 여백 32 (피그마 8262:20944 slot-content · 팝업 높이 539) */
.pop-browser .pop-con {
  padding: 32rem;
}

/* 모바일 — 폭이 좁아 타이틀+X 첫 줄, 체크박스는 아랫줄 우측 정렬 */
@media (max-width: 1024px) {
  .layer-popup.pop-browser .pop-head {
    flex-wrap: wrap;
    height: auto;
    min-height: 56rem;
    padding-top: 14rem;
    padding-bottom: 14rem;
  }
  .pop-browser .pop-head__title {
    white-space: nowrap;
  }
  .pop-browser .pop-head .btn-close {
    order: 2;
  }
  .pop-browser .pop-head__hide {
    order: 3;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 8rem;
  }
  .pop-browser .pop-con {
    padding: 0; /* 모바일은 폭이 좁아 슬롯 여백 생략 */
  }
}
/* 안내 문구 */
.browser-guide {
  text-align: center;
}
.browser-guide__tit {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.browser-guide__desc {
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
}
/* 브라우저 바로가기 카드 */
.browser-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24rem;
  margin-top: 48rem;
}
.browser-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  width: 200rem;
  height: 200rem;
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
  border-radius: var(--radius-300); /* 12 */
}
.browser-list a:hover,
.browser-list a:focus-visible {
  background: var(--color-bg-primary-light-level-2);
}
.browser-list img {
  width: 64rem;
  height: 64rem;
}
.browser-list .name {
  display: flex;
  align-items: center;
  gap: 4rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
}
.browser-list .name i {
  width: 16rem;
  height: 16rem;
  background-color: var(--color-ic-black);
  -webkit-mask: url("../images/ico-arrow-up-right.svg") center / contain no-repeat;
  mask: url("../images/ico-arrow-up-right.svg") center / contain no-repeat;
}

/* ========================================================
   FO-ETC-01-01-001 — Error Page (헤더/푸터 없는 전면 페이지)
======================================================== */
.error-area {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40rem;
  min-height: 100vh;
  padding: 40rem 24rem;
  text-align: center;
}
.error-area__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.error-area__title {
  font-family: var(--font-family-eng);
  font-size: var(--type-d1); /* 120 */
  font-weight: var(--font-weight-bold);
  line-height: 0.9;
  color: var(--color-text-default-highest);
}
.error-area__desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-medium); /* #535455 */
}

/* 점검 안내 변형 (피그마 8229:20743 / M 8260:20923) — 타이틀 96 + 점검 기간 카드 */
.error-area--maint .error-area__title {
  font-size: var(--type-t1); /* 96 */
  line-height: var(--lh-display); /* 1.1 */
}
.error-area__period {
  width: 672rem;
  padding: 40rem;
  background: var(--color-bg-default-white);
  border: 1px solid #d3e7ff;
  border-radius: var(--radius-400); /* 16 */
  text-align: left;
}
.error-area__period .tit {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 (모바일 20) */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-highest);
}
.error-area__period .desc {
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body);
  color: var(--color-text-default-medium);
}

@media (max-width: 1024px) {
  /* 긴 단어(Maintenance 등)가 화면 폭을 넘지 않게 축소 */
  .error-area__title,
  .error-area--maint .error-area__title {
    font-size: 40rem;
  }
  .error-area__period {
    width: 100%; /* 섹션 좌우 패딩(24) 안에서 풀폭 — M 시안 342 */
  }
}

/* ========================================================
   FO-COM-02-02-001~003 — 약관 (Privacy Policy · Terms 공통 템플릿)
======================================================== */
.policy-area {
  padding-top: var(--spacing-2000); /* 80 */
}
/* 개정 이력 셀렉트 + 이동 버튼 — 우측 정렬 */
.policy-area__control {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-200); /* 8 */
}
.policy-area__control .select-wrap {
  width: 320rem;
}
.policy-area__control .btn {
  flex-shrink: 0;
  width: 120rem;
  min-width: 120rem;
}
/* 내용 — 관리자 HTML 등록 (태그 셀렉터 기반) */
.policy-body {
  margin-top: 40rem;
}
.policy-body .policy-body__date {
  margin-bottom: 48rem;
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default-highest);
}
.policy-body p {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
/* 문단 사이 간격 (시안 8229-12780) */
.policy-body p + p {
  margin-top: 16rem;
}
/* 섹션 타이틀 */
.policy-body h2 {
  margin-top: 48rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-high); /* #373839 */
}
/* 서브 타이틀 — (1) (2) … */
.policy-body h3 {
  margin-top: 24rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.policy-body h2 + p,
.policy-body h3 + p {
  margin-top: 16rem;
}
.policy-body ul {
  margin-top: 12rem;
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.policy-body ul li {
  position: relative;
  padding-left: 24rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
.policy-body ul li::before {
  content: "";
  position: absolute;
  top: 11rem;
  left: 10rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-text-default-medium);
}
.policy-body ul li b {
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default-high); /* #373839 */
}

@media (max-width: 1024px) {
  .policy-area {
    padding-top: 48rem;
  }
  /* 셀렉트 값이 1줄로 못 들어갈 만큼 좁아지면 자동 줄바꿈 — 그때 버튼은 혼자 풀폭 */
  .policy-area__control {
    flex-wrap: wrap;
  }
  .policy-area__control .select-wrap {
    flex: 1 1 auto;
    width: auto;
    min-width: max-content; /* 값 텍스트가 1줄로 들어가는 폭을 확보 못 하면 그때만 줄바꿈 */
  }
  .policy-area__control .btn {
    flex: 1 1 auto; /* 한 줄일 땐 셀렉트 옆에 붙고, 줄바꿈되면 남은 줄에서 풀폭 */
  }
}

/* ========================================================
   FO-CON-01-03-001-L01 — 국가별 대리점 상세보기 레이어
   (Find an Official Distributor 지도 마커 선택 시 노출)
======================================================== */
.layer-popup.pop-distributor .pop-wrap {
  width: 600rem; /* components.css 공통(800)보다 뒤에 로드되지 않으므로 특이도로 우선 적용 */
}
/* 대리점 목록 — 회색 박스 (시안 8210-24945) */
.layer-popup.pop-distributor .pop-con {
  padding: var(--spacing-800); /* 32 */
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
}
/* 대리점 반복 항목 */
.dist-item + .dist-item {
  margin-top: 48rem;
}
.dist-item__name {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.dist-item__info {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  margin-top: 24rem;
}
.dist-item__info .row {
  display: flex;
  gap: 12rem;
}
.dist-item__info dt {
  flex-shrink: 0;
  width: 130rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
}
.dist-item__info dd {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-neutral-500); /* #727272 */
  overflow-wrap: anywhere;
}
/* 구글맵 텍스트 링크 — 주소 아래 */
.dist-item__map {
  display: inline-block;
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-point-default); /* #1475e7 */
  text-decoration: underline;
  text-underline-offset: 3rem;
}

/* ── 대리점 레이어 모바일 (시안 8210-25370) — 라벨/값 세로 스택 ── */
@media (max-width: 1024px) {
  .layer-popup.pop-distributor .pop-con {
    padding: 24rem;
  }
  .dist-item__info {
    gap: 16rem;
    margin-top: 20rem;
  }
  .dist-item__info .row {
    flex-direction: column;
    gap: 8rem;
  }
  .dist-item__info dt {
    width: auto;
  }
}

/* ── 모바일 (시안 7855-1691) ── */
@media (max-width: 1024px) {
  /* 상단 — 뒤로가기/제품명 → 소개 → 색상 → 이미지 순 세로 배치 */
  .pd-top {
    padding: 24rem 0 140rem;
  }
  .pd-top__back {
    top: 24rem;
    left: 24rem;
  }
  .pd-top__name {
    margin-top: 48rem; /* 뒤로가기(40) 아래 8 */
  }
  .pd-top .inner {
    flex-direction: column;
    margin-top: 80rem;
  }
  .pd-top__info {
    width: 100%;
    padding-top: 0;
  }
  /* 컬러 칩 여러 개일 때 화면 밖으로 넘치지 않게 — 픽토그램 영역처럼 화면 오른쪽 여백(24)까지 가로 스크롤 (2026-10-02 QA) */
  .pd-top__finish {
    width: auto;
  }
  .pd-top__finish .colors {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -24rem;
    padding-right: 24rem;
    scrollbar-width: none;
  }
  .pd-top__finish .colors::-webkit-scrollbar {
    display: none;
  }
  .pd-top__img {
    width: 100%;
    height: calc(100vw - 48rem); /* 인너 폭과 동일한 정사각 (컨텐츠가 밀어내지 않게 고정 높이) */
    margin-top: 40rem;
  }
  /* 바로가기 바 — 제품명 포함 전체 가로 스크롤 (풀폭 스크롤 영역, 탭이 화면 좌우 끝까지 보이게) */
  .pd-nav .inner {
    justify-content: flex-start;
    gap: 32rem;
    width: 100%;
    height: 73rem;
    padding: 0 24rem;
    overflow-x: auto;
    white-space: nowrap;
  }
  .pd-nav__name {
    flex-shrink: 0;
  }
  .pd-nav__menu {
    flex-shrink: 0;
    gap: 24rem;
  }
  .pd-nav__menu a {
    font-size: var(--type-b3); /* 18 */
    font-weight: var(--font-weight-semibold);
    line-height: var(--lh-body); /* 1.4 */
  }
  .pd-section {
    padding: 80rem 0 100rem;
  }
  .pd-section + .pd-section::before {
    margin-bottom: 80rem;
  }
  .pd-section__title {
    margin-bottom: 48rem;
  }
  .pd-row {
    flex-direction: column;
    gap: 24rem;
  }
  .pd-row + .pd-row {
    margin-top: 48rem;
  }
  .pd-row__tit {
    width: auto;
  }
  /* 아이콘·로고 — 크기 유지, 인너 좌우 밖(화면 여백 24)까지 가로 스크롤 (스크롤 시 왼쪽도 안 잘리게) */
  .icon-list {
    overflow-x: auto;
    margin: 0 -24rem;
    padding: 0 24rem;
  }
  .icon-list li {
    flex-shrink: 0;
  }
  .icon-list--spread {
    gap: 24rem;
    justify-content: flex-start;
  }
  .icon-list--spread li {
    flex: 0 0 auto;
    width: 120rem;
  }
  .logo-list {
    overflow-x: auto;
    margin: 0 -24rem;
    padding: 0 24rem;
  }
  .logo-list li {
    flex: 0 0 268rem;
  }
  /* 하단 버튼(Learn more·More FAQs) 좌측 정렬 */
  .pd-row--full .btn-wrap,
  .pd-faq .btn-wrap {
    justify-content: flex-start;
  }
  .pd-features__text,
  .pd-video {
    margin-top: 48rem;
  }
  .pd-video,
  .pd-visual img {
    border-radius: var(--radius-400); /* 16 */
  }
  .spec-list__row {
    flex-direction: column;
    gap: 24rem;
  }
  .pd-list--sm li {
    width: 280rem;
  }
  /* 모바일은 인너가 유동 폭이라 화면 오른쪽 여백(24) 기준으로 블리드 */
  .pd-swiper {
    margin-right: -24rem;
  }
  .pd-swiper .swiper-slide {
    width: 280rem;
  }
}

/* 2026-10-12 수정 (SEO 요청) — 헤딩 계층 변경(page-title h1, 섹션 h2, 하위 h3)에 맞춰 h태그 요소 선택자 조정 */
/* ========================================================
   메인 (main.html · 시안 7517-2838)
======================================================== */
.main {
  overflow-x: clip;
}

/* 공통 섹션 타이틀 — 중앙 정렬 */
.main-tit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.main-tit h1,
.main-tit h2 {
  font-family: var(--font-family-eng);
  font-size: var(--type-h2); /* 64 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.main-tit p {
  margin-top: 32rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-high); /* #8a8c8e */
}
.main-tit .btn {
  margin-top: 40rem;
}

/* ── 키비주얼 — 자동 롤링 배너 ── */
.kv-area {
  position: relative;
  height: 100vh;
  min-height: 600px;
  background: var(--color-bg-primary-dark-level-1);
}
.kv-swiper,
.kv-swiper .swiper-wrapper {
  height: 100%;
}
.kv-slide a {
  display: block;
  position: relative;
  height: 100%;
}
.kv-slide__bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}
.kv-slide__bg img,
.kv-slide__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 하단 딤 그라데이션 */
.kv-slide__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
  opacity: 0.8;
}
.kv-slide__copy {
  position: absolute;
  left: 80rem;
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40rem;
  transform: translateY(-50%);
}
.kv-slide__copy .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-h1); /* 80 */
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-white);
}
/* 설명 문구(선택) — 타이틀과 32, 버튼과 60 간격 (copy gap 40 기준 보정 · 피그마 7517-3320 copy-left) */
.kv-slide__copy .desc {
  max-width: 863rem;
  margin: -8rem 0 20rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-white);
}
/* 슬라이드 전환 시 카피 순차 등장 모션 — 활성 슬라이드에서만 노출 */
.kv-slide__copy > * {
  opacity: 0;
  transform: translateY(40rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.swiper-slide-active .kv-slide__copy > * {
  opacity: 1;
  transform: translateY(0);
}
.swiper-slide-active .kv-slide__copy > *:nth-child(1) {
  transition-delay: 0.35s; /* 슬라이드 전환(0.8s) 중반부터 순차 등장 */
}
.swiper-slide-active .kv-slide__copy > *:nth-child(2) {
  transition-delay: 0.5s;
}
.swiper-slide-active .kv-slide__copy > *:nth-child(3) {
  transition-delay: 0.65s;
}
/* 컨트롤러 — 이전/다음/재생 정지 */
.kv-area__ctrl {
  position: absolute;
  right: 80rem;
  bottom: 80rem;
  z-index: 10;
  display: flex;
  gap: 40rem;
}
.kv-area__ctrl button {
  position: relative;
  width: 40rem;
  height: 40rem;
}
/* 처음/끝 배너에서 이전/다음 비활성화 (설계 2) */
.kv-area__ctrl button:disabled {
  opacity: 0.4;
  cursor: default;
}
.kv-area__prev,
.kv-area__next {
  background-color: #fff;
  -webkit-mask: url("../images/ico-arrow-tail-left.svg") center / 32rem no-repeat;
  mask: url("../images/ico-arrow-tail-left.svg") center / 32rem no-repeat;
}
.kv-area__next {
  transform: rotate(180deg);
}
/* 일시정지/재생 — 피그마 ic/40/pause·play SVG */
.kv-area__toggle {
  background: url("../images/ico-kv-pause.svg") no-repeat center / auto 33rem;
}
.kv-area__toggle.is-paused {
  background-image: url("../images/ico-kv-play.svg");
}

/* ── 피처 — 섹션 핀 후 카드가 위로 밀리며 교체되는 모션 (features2.mp4) ── */
.feature-area {
  padding: 120rem 0 80rem;
}
.feature-list {
  position: relative; /* 카드 4장이 같은 자리에 겹침 — 다음 카드가 아래에서 올라와 덮는 모션 */
  width: 1162rem;
  height: 473rem;
  margin: 80rem auto 0;
}
.feature-list li {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80rem;
  overflow: hidden; /* 카드보다 큰 이미지는 잘라 보더 유지 */
  border-radius: var(--radius-600); /* 24 */
  padding: 100rem 26rem 100rem 80rem;
}
/* 뒤로 밀린 카드에 깔리는 딤 — 깊이와 무관하게 동일 (--dim 값을 JS 타임라인에서 제어) */
.feature-list li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-600); /* 24 */
  background: #000;
  opacity: var(--dim, 0);
  pointer-events: none;
}
.feature-list li {
  background: var(--color-bg-default-white); /* 불투명 — 덮인 뒤 카드가 비치지 않게 */
  border: 1px solid var(--color-line-low); /* #e8e8e8 */
  border-radius: var(--radius-600); /* 24 */
  box-shadow: 0 24rem 72rem -12rem rgba(0, 0, 0, 0.1); /* 프로토 7474:12286 드롭섀도 */
  transform-origin: 50% 0; /* 뒤로 밀릴 때 상단 기준 축소 — 윗변이 앞 카드 위로 살짝 보이게(적층) */
}
.feature-list .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24rem;
  width: 586rem;
}
.feature-list .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-highest);
}
.feature-list .desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-high); /* #373839 */
}
.feature-list .btn {
  margin-top: 16rem;
}
.feature-list .icon {
  flex-shrink: 0;
  width: 480rem;
}
.feature-list .icon img {
  width: 100%;
}

/* PC — 피처 카드 핀 모션은 GSAP 제어: 카드의 scroll-motion 전환 무효화 */
@media (min-width: 1025px) {
  .feature-list li.scroll-motion {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── 데이터 — 카운팅업 수치 ── */
.num-area {
  margin-top: 120rem;
  padding: 110rem 0;
  background: var(--color-bg-secondary-light-level-4, #66acff);
}
.num-area__inner {
  display: flex;
  width: 1760rem; /* 시안 — 기본 inner(1440)보다 넓은 전용 폭 */
  margin: 0 auto;
}
.num-area li {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 20rem;
  text-align: center;
  color: var(--color-text-default-white);
}
/* 세로 구분선 — 시안처럼 중앙 199 높이만 */
.num-area li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 199rem;
  background: rgba(255, 255, 255, 0.6);
  transform: translateY(-50%);
}
.num-area .label {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-style: normal;
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
}
.num-area .num {
  display: flex;
  align-items: flex-end;
  font-family: var(--font-family-eng);
  font-size: 120rem;
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  letter-spacing: -0.04em; /* 설계 예외 — 숫자만 자간 -4% */
}
.num-area .num small {
  padding-bottom: 20rem;
  margin-left: 8rem;
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  white-space: nowrap; /* K Locations 등 접미사 줄바꿈 방지 */
}
.num-area .desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-regular); /* 400 */
  line-height: var(--lh-body);
}
.num-area .desc br {
  display: none; /* 모바일 전용 줄바꿈 — PC는 한 줄 */
}

/* ── 솔루션 — 산업별 배너 (호버 시 설명 노출) ── */
.sol-area {
  padding: 160rem 0 0;
}
.sol-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32rem;
  margin-top: 120rem;
}
.sol-list li {
  grid-column: span 2;
}
.sol-list li.sol-list__wide {
  grid-column: span 3;
}
.sol-list a {
  display: block;
  overflow: hidden;
  position: relative;
  height: 646rem;
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
  border-radius: var(--radius-800); /* 32 */
}
.sol-list__wide a {
  height: 360rem;
}
.sol-list .img {
  position: absolute;
  inset: 0;
}
.sol-list .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sol-list .tit {
  position: absolute;
  left: 80rem;
  top: 80rem;
  z-index: 2;
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-white);
}
/* 상세문구+버튼 — PC는 호버 시 노출(원복), 모바일은 상시 노출(M-Main 7657-13117) */
.sol-list a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-800); /* 32 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.45));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sol-list a:hover::after,
.sol-list a:focus-visible::after {
  opacity: 1;
}
.sol-list .detail {
  position: absolute;
  left: 80rem;
  right: 80rem;
  bottom: 64rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20rem);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.sol-list a:hover .detail,
.sol-list a:focus-visible .detail {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sol-list .detail .desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-white);
}

/* ── 제품 — 카테고리 탭 + 대표 제품 ── */
.mainpd-area {
  padding: 320rem 0 0;
}
.mainpd-area__inner {
  display: flex;
  align-items: flex-start;
  gap: 106rem;
  margin: 120rem auto 0; /* 폭은 .inner-wide 공통(1760) 사용 */
}
.mainpd-tab {
  flex-shrink: 0;
  width: 342rem;
}
.mainpd-tab button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
  width: 100%;
  padding: 24rem 0;
  border-bottom: 1px solid var(--color-line-low); /* #e8e8e8 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-low); /* #8a8c8e */
  text-align: left;
  transition: color 0.3s ease;
}
.mainpd-tab button i {
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  background-color: currentColor;
  -webkit-mask: url("../images/ico-btn-arrow-r.svg") center / contain no-repeat;
  mask: url("../images/ico-btn-arrow-r.svg") center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mainpd-tab button:hover,
.mainpd-tab button:focus-visible,
.mainpd-tab button.is-active {
  color: var(--color-text-point-default); /* #1475e7 */
}
.mainpd-tab button.is-active i {
  opacity: 1;
}
.mainpd-view {
  display: flex;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  min-height: 720rem;
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
  border-radius: var(--radius-800); /* 32 */
}
.mainpd-view .img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}
/* 이미지 박스 720×720 (피그마 8602:21309) — 카테고리별 이미지 크기·위치를 박스 대비 %로 지정 (모바일은 박스가 정사각 비율로 축소) */
.mainpd-swiper {
  --pd-pad: 0rem; /* 02(팬) 이미지 시작 위치(하단) 추가 여백 — 01과 같은 바닥 60 여백이라 0 */
  --pd-top2: 11.111%; /* 02 정지 위치 — 03과 같은 상단 80/720 (시안의 카테고리별 20~81 대신 통일) */
  flex: none;
  overflow: hidden;
  width: 720rem;
  height: 720rem;
}
.mainpd-swiper .swiper-slide {
  position: relative;
  overflow: hidden; /* 박스보다 큰 이미지는 잘라 크롭 */
}
.mainpd-swiper .swiper-slide img {
  position: absolute;
  left: 50%;
  width: auto;
  max-width: none;
  max-height: none;
  transform: translateX(-50%);
}
/* 01 측면 — 가로 중앙, 박스 하단 60 여백에 바닥 정렬 (윗부분 크롭) */
.mainpd-swiper .swiper-slide--s1 img {
  bottom: 8.333%; /* 60/720 */
  height: var(--pd-h1);
}
/* 02 정면 — 팬: 01과 같은 하단 60 여백 위치에서 시작해 아래로 내려오며 03과 같은 상단 80 여백 위치에서 정지 */
.mainpd-swiper .swiper-slide--s2 img {
  left: var(--pd-x2, 50%);
  top: var(--pd-top2);
  height: var(--pd-h2);
}
.mainpd-swiper .swiper-slide--s2.swiper-slide-active img {
  /* 전환(0.6s) 후 0.5s 정지 → 1s 동안 내려옴(부드러운 ease-in-out) → 1s 정지 후 다음 전환 (autoplay 2.5s) */
  animation: mainpdPan 1s cubic-bezier(0.45, 0.05, 0.25, 1) 1.1s both;
}
@keyframes mainpdPan {
  from {
    top: calc(var(--pd-pan-from) - var(--pd-pad)); /* 이미지 하단이 박스 하단 60(+여백) 위에 오는 위치 */
  }
  to {
    top: var(--pd-top2);
  }
}
/* 03 정면 점등 — 02와 같은 크기, 상단 80 여백 (아랫부분 크롭) */
.mainpd-swiper .swiper-slide--s3 img {
  left: var(--pd-x2, 50%);
  top: 11.111%; /* 80/720 */
  height: var(--pd-h2);
}
/* 카테고리별 수치 — 시안 px ÷ 720. --pd-pan-from = (660 − h2) ÷ 720 */
.mainpd-swiper[data-pd="pushpull"] {
  --pd-h1: 181.39%; /* 1306 */
  --pd-h2: 178.75%; /* 1287 */
  --pd-pan-from: -87.08%;
}
.mainpd-swiper[data-pd="lever"] {
  --pd-h1: 168.9%; /* 1216 — 시안 누락(pushpull-01 대체) → 02와 같은 배율 적용 */
  --pd-h2: 169.03%; /* 1217 */
  --pd-x2: 68.06%; /* 손잡이가 우측으로 튀어나와 본체 기준 중앙(490) */
  --pd-pan-from: -77.36%;
}
.mainpd-swiper[data-pd="deadbolt"] {
  --pd-h1: 147.78%; /* 1064 */
  --pd-h2: 121.67%; /* 876 */
  --pd-pan-from: -30%;
}
.mainpd-swiper[data-pd="rim"] {
  --pd-h1: 151.11%; /* 1088 */
  --pd-h2: 126.11%; /* 908 */
  --pd-pan-from: -34.44%;
}
.mainpd-swiper[data-pd="gate"] {
  --pd-h1: 121.39%; /* 874 */
  --pd-h2: 185.56%; /* 1336 */
  --pd-pan-from: -93.89%;
}
.mainpd-view .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  width: 480rem;
  padding: 80rem 80rem 80rem 0;
}
.mainpd-view .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-highest);
}
.mainpd-view .sub {
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-style: normal;
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-high); /* #373839 */
}
.mainpd-view .desc {
  margin-top: 24rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
.mainpd-view .btn {
  margin-top: 40rem;
}

/* ── 파트너 ── */
.partner-area {
  position: relative;
  padding: 320rem 0;
}
/* 타이틀 뒤 지구본 (피그마 7517:2935) */
.partner-area::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 107rem; /* 시안 — 타이틀보다 213 위에서 시작 */
  width: 924rem;
  height: 520rem;
  background: url("../images/img-partner-globe.png") center / contain no-repeat;
  transform: translateX(-50%);
  pointer-events: none;
}
.partner-area .main-tit {
  position: relative;
  z-index: 1;
}
.partner-list {
  width: 1760rem; /* 시안 — 기본 inner(1440)보다 넓은 전용 폭 */
  margin: 120rem auto 0;
}
.partner-list__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32rem;
}
.partner-list__row + .partner-list__row {
  margin-top: 32rem;
}
.partner-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150rem;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-line-low); /* #e8e8e8 */
  border-radius: 8rem;
}
/* 로고별 사이즈 — 피그마 실측 (5n: 모바일 루핑 복제본 포함) */
.partner-list__row:nth-child(1) li:nth-child(5n + 1) img {
  width: 210rem;
}
.partner-list__row:nth-child(1) li:nth-child(5n + 2) img {
  width: 202rem;
}
.partner-list__row:nth-child(1) li:nth-child(5n + 3) img {
  width: 162rem;
}
.partner-list__row:nth-child(1) li:nth-child(5n + 4) img {
  width: 165rem;
}
.partner-list__row:nth-child(1) li:nth-child(5n + 5) img {
  width: 120rem;
}
.partner-list__row:nth-child(2) li:nth-child(5n + 1) img {
  width: 174rem;
}
.partner-list__row:nth-child(2) li:nth-child(5n + 2) img {
  width: 147rem;
}
.partner-list__row:nth-child(2) li:nth-child(5n + 3) img {
  width: 135rem;
}
.partner-list__row:nth-child(2) li:nth-child(5n + 4) img {
  width: 242rem;
}
.partner-list__row:nth-child(2) li:nth-child(5n + 5) img {
  width: 312rem;
}

/* ── 뉴스 & 인사이트 ── */
/* 2026-10-08 수정 — 파트너 영역 주석 처리로 앞 여백이 사라져 섹션 상단 패딩 추가 (앞 섹션 리듬 320 유지) */
.mainnews-area {
  padding-top: 320rem;
}
.mainnews-area__head h2 {
  font-family: var(--font-family-eng);
  font-size: var(--type-h2); /* 64 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.mainnews-area__head p {
  margin-top: 32rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-high); /* #8a8c8e */
}
.mainnews {
  display: flex;
  gap: 96rem;
  margin-top: 100rem;
}
/* 최신 대표 뉴스 */
.mainnews__latest {
  display: block;
  flex-shrink: 0;
  width: 956rem;
}
.mainnews__latest .thumb {
  display: block;
  overflow: hidden;
  position: relative;
  height: 637rem;
  border-radius: var(--radius-800); /* 32 */
}
.mainnews__latest .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.mainnews__latest:hover .thumb img,
.mainnews__latest:focus-visible .thumb img {
  transform: scale(1.03);
}
.mainnews__latest .badge {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 16rem 40rem;
  background: #111111;
  border-bottom-right-radius: 24rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-white);
}
.mainnews__latest .info {
  display: block;
  margin-top: 40rem;
  padding: 0 32rem;
}
.mainnews .cate {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body);
  color: var(--color-text-default-low); /* #8a8c8e */
}
.mainnews__latest .tit {
  display: block;
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-highest);
}
.mainnews .date {
  display: block;
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body);
  color: var(--color-text-default-low);
}
/* 우측 — 썸네일형 2건 + 텍스트형 3건 */
.mainnews__side {
  flex: 1;
  min-width: 0;
}
.mainnews__thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rem;
}
.mainnews__thumbs a {
  display: block;
}
.mainnews__thumbs .thumb {
  display: block;
  overflow: hidden;
  height: 228rem;
  border-radius: 20rem;
}
.mainnews__thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.mainnews__thumbs a:hover .thumb img,
.mainnews__thumbs a:focus-visible .thumb img {
  transform: scale(1.05);
}
.mainnews__thumbs .cate {
  margin-top: 24rem;
}
.mainnews__thumbs .tit {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 8rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-high); /* #373839 */
}
.mainnews__thumbs .date {
  margin-top: 8rem;
}
.mainnews__texts {
  margin-top: 40rem;
  border-top: 1px solid var(--color-line-low); /* #e8e8e8 */
}
.mainnews__texts li {
  border-bottom: 1px solid var(--color-line-low);
}
.mainnews__texts a {
  display: block;
  position: relative;
  padding: 32rem 140rem 32rem 0;
}
.mainnews__texts .tit {
  display: block;
  overflow: hidden;
  margin-top: 8rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body);
  color: var(--color-text-default-high);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mainnews__texts a:hover .tit,
.mainnews__texts a:focus-visible .tit,
.mainnews__thumbs a:hover .tit,
.mainnews__thumbs a:focus-visible .tit {
  color: var(--color-text-point-default);
}
.mainnews__texts .date {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}

/* ── 메인 팝업 (FO-MAI-01-01-001-L01/L02 · 시안 8271-25538/25800) ── */
.layer-popup.pop-main .pop-wrap {
  width: 800rem;
}
/* 헤더 — 우측 정렬 체크박스 + 닫기 */
.pop-main .pop-head {
  justify-content: flex-end;
  gap: var(--spacing-300); /* 12 */
}
.pop-main .pop-head__hide {
  flex-shrink: 0;
}
.pop-main .pop-head__hide .checkbox__label {
  white-space: nowrap;
}
/* 본문 — 높이 고정 (스크롤은 슬라이드 내부에서 · 설계 1-A) */
/* 높이 가변 — 슬라이드 콘텐츠 높이를 따라감 (swiper autoHeight) */
.pop-main .pop-body {
  overflow: hidden;
  padding: 0 24rem;
}
/* 슬라이드별 내부 스크롤 (설계 1-A — 콘텐츠가 최대 높이 초과 시) */
.mainpop-list li {
  overflow-y: auto;
  max-height: 500rem;
}
.mainpop-list a {
  display: block;
}
/* 이미지형 슬라이드 — 팝업 폭에 맞춤 (에디터 HTML형 이미지는 아래 .mainpop-html img 규칙) */
.mainpop-list > li > img,
.mainpop-list > li > a > img {
  display: block;
  width: 100%;
}
/* HTML형 콘텐츠 — 관리자 에디터 입력 그대로 (자동 가운데정렬 없음 · QA 2026-09-30) */
.mainpop-html {
  padding: 16rem 0 0;
}
.mainpop-html .tit {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-highest);
}
.mainpop-html .desc {
  margin-top: 8rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body);
  color: var(--color-text-default-high);
}
/* 에디터 이미지 — 폭만 제한하고 원본 비율 유지 (width/height 속성이 있어도 찌그러지지 않게 · QA 2026-09-30) */
.mainpop-html img {
  max-width: 100%;
  height: auto;
  margin-top: 24rem;
}
/* 좌/우 + 현위치/개수 페이저 */
.mainpop-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  flex-shrink: 0;
  padding: 12rem 0 16rem;
}
.mainpop-pager__prev,
.mainpop-pager__next {
  width: 20rem;
  height: 20rem;
  background-color: var(--color-ic-gray); /* #8a8c8e */
  -webkit-mask: url("../images/ico-arrow-tail-left.svg") center / contain no-repeat;
  mask: url("../images/ico-arrow-tail-left.svg") center / contain no-repeat;
}
.mainpop-pager__prev:hover,
.mainpop-pager__prev:focus-visible,
.mainpop-pager__next:hover,
.mainpop-pager__next:focus-visible {
  background-color: var(--color-ic-black);
}
.mainpop-pager__next {
  transform: rotate(180deg);
}
.mainpop-pager__num {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-style: normal;
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-low); /* #8a8c8e */
}
.mainpop-pager__num .cur {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-point-default); /* #1475e7 */
}

/* ── 모바일 ── */
/* === FO-SOL-01-01-001 — Multi-family 솔루션 === */
/* 공통 섹션 타이틀 (라벨 + 헤딩 + 설명) */
.sol-sec-tit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
  width: 1440rem;
  margin: 0 auto;
  text-align: center;
}
.sol-sec-tit--narrow {
  /* width 제거 — 기본(1440rem) 폭 사용 */
}
.sol-sec-tit .label {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  font-style: normal;
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-point-default); /* #1475e7 */
}
.sol-sec-tit h2 {
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.sol-sec-tit p {
  margin-top: 8rem; /* 헤딩과 20 간격 (gap 12 + 8) */
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
/* 좌측 정렬 변형 (WHAT YOU GET) */
.sol-sec-tit--left {
  align-items: flex-start;
  text-align: left;
}
.sol-sec-tit--left h2,
.sol-sec-tit--left p {
  max-width: 708rem;
}

/* 히어로 비주얼 */
.solhero-area {
  position: relative;
  height: 960rem;
  background: url("../images/img-sol-mf-hero.jpg") center 65% / cover no-repeat;
}
.solhero-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.solhero-area .inner {
  display: flex;
  justify-content: space-between;
  gap: 80rem;
  position: relative;
  padding-top: 172rem;
}
.solhero-area__tit {
  flex-shrink: 0;
  width: 464rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-white);
}
.solhero-area__desc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32rem;
  width: 708rem;
}
.solhero-area__desc p {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-white);
}

/* WHY — 아이콘 카드 3종 */
.solwhy-area {
  padding: 120rem 0 160rem;
}
.solwhy-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rem;
  width: 1440rem;
  margin: 80rem auto 0;
}
.solwhy-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
  padding: 0 24rem;
  text-align: center;
}
.solwhy-list .icon {
  width: 120rem;
}
.solwhy-list .icon img {
  width: 100%;
}
.solwhy-list .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-high);
}
.solwhy-list .desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium);
}

/* HOW IT WORKS — 다이어그램 (카드 3 + 연결선, 연결선은 PC 전용) */
.solhow-area {
  padding: 120rem 0 160rem;
}
.solhow-diagram {
  position: relative;
  width: 1420rem;
  height: 564rem;
  margin: 80rem auto 0;
}
.solhow-diagram__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16rem;
  position: absolute;
  width: 602rem;
  min-height: 246rem;
  padding: 40rem;
  background: var(--color-bg-secondary-light-level-1, #e7f2ff);
  border: 1px solid var(--color-bg-secondary-light-level-2, #d3e7ff);
  border-radius: var(--radius-600); /* 24 */
}
.solhow-diagram__card--lock {
  left: 385rem;
  top: 0;
}
.solhow-diagram__card--app {
  left: 0;
  top: 318rem;
}
.solhow-diagram__card--cloud {
  left: 818rem;
  top: 318rem;
}
.solhow-diagram__card .icon {
  width: 32rem;
  height: 32rem;
  background-color: var(--color-brand-new-blue); /* #1475e7 */
}
.solhow-diagram__card .icon--lock {
  -webkit-mask: url("../images/ico-sol-how-lock.svg") center / contain no-repeat;
  mask: url("../images/ico-sol-how-lock.svg") center / contain no-repeat;
}
.solhow-diagram__card .icon--app {
  -webkit-mask: url("../images/ico-sol-how-app.svg") center / contain no-repeat;
  mask: url("../images/ico-sol-how-app.svg") center / contain no-repeat;
}
.solhow-diagram__card .icon--cloud {
  -webkit-mask: url("../images/ico-sol-how-cloud.svg") center / contain no-repeat;
  mask: url("../images/ico-sol-how-cloud.svg") center / contain no-repeat;
}
.solhow-diagram__card .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.solhow-diagram__card .desc {
  width: 520rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium);
}
/* 연결선 — 피그마 벡터 배경 + 흰 바탕 라벨 */
.solhow-diagram__arrow {
  position: absolute;
  width: 186rem;
  height: 186rem;
}
.solhow-diagram__arrow em {
  position: absolute;
  padding: 4rem;
  background: var(--color-bg-default-white);
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-high);
  text-align: center;
  white-space: nowrap;
}
.solhow-diagram__arrow--left {
  left: 188.5rem;
  top: 127rem;
  background: url("../images/img-sol-how-arrow1.svg") center / contain no-repeat;
}
.solhow-diagram__arrow--left em {
  left: 0;
  top: 40rem;
  transform: translateX(-50%); /* 세로선 위 중앙 */
}
.solhow-diagram__arrow--right {
  left: 995.5rem;
  top: 127rem;
  background: url("../images/img-sol-how-arrow2.svg") center / contain no-repeat;
  transform: scaleX(-1); /* 좌측 연결선 미러 */
}
.solhow-diagram__arrow--right em {
  left: 0; /* 미러된 좌표계 — 시각적으로는 오른쪽 세로선 */
  top: 40rem;
  transform: translateX(-50%) scaleX(-1); /* 선 위 중앙 + 라벨 원래 방향 */
}
.solhow-diagram__arrow--bottom {
  left: 617rem;
  top: 415rem;
  height: 52rem;
  background: url("../images/img-sol-how-arrow3.svg") center 26rem / 100% auto no-repeat;
}
.solhow-diagram__arrow--bottom em {
  left: 48rem;
  top: 0;
}

/* === FO-SOL-01-03-001 — Corporate 전용 === */
.solhero-area--corp {
  background-image: url("../images/img-sol-corp-hero.jpg");
  background-position: center;
}
.solhow-diagram--hosp .solhow-diagram__card .icon--api {
  -webkit-mask: url("../images/ico-sol-how-api.svg") center / contain no-repeat;
  mask: url("../images/ico-sol-how-api.svg") center / contain no-repeat;
}
/* 시스템 아키텍처 다이어그램 — HTML 구현 (피그마 좌표 그대로) */
.solhow-arch {
  width: 1441rem;
  margin: 80rem auto 0;
}
.solarch {
  position: relative;
  width: 1441rem;
  height: 934rem;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-line-low); /* #e8e8e8 */
  border-radius: var(--radius-600); /* 24 */
  font-family: var(--font-family-eng);
}
.solarch strong {
  font-family: var(--font-family-eng); /* 리셋(strong → Roboto-Regular) 무효화 */
}
/* 범례 */
.solarch__legend {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  position: absolute;
  left: 80rem;
  top: 80rem;
}
.solarch__legend strong {
  font-size: 15rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default-highest);
}
.solarch__legend-item {
  display: flex;
  align-items: center;
  gap: 8rem;
  font-size: 13rem;
  color: var(--color-text-default-medium);
}
.solarch__legend-item::before {
  content: "";
  width: 16rem;
  height: 16rem;
  border-radius: 3rem;
}
.solarch__legend-item--green::before {
  background: #3eae58;
}
.solarch__legend-item--blue::before {
  background: var(--color-brand-new-blue);
}
/* 상단 사용자 카드 */
.solarch__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 238rem;
  height: 196rem;
  padding-top: 25rem;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-line-low);
  border-radius: var(--radius-400); /* 16 */
  text-align: center;
}
.solarch__person--admin {
  left: 863.5rem;
  top: 80rem;
}
.solarch__person--appuser {
  left: 1131.5rem;
  top: 80rem;
}
.solarch__person .icon {
  width: 64rem;
  height: 64rem;
  margin-bottom: 8rem;
  border-radius: 50%;
  background-color: #d0d1d2;
  position: relative;
}
.solarch__person .icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
}
.solarch__person .icon--monitor::after {
  -webkit-mask: url("../images/ico-arch-monitor.svg") center / 30rem no-repeat;
  mask: url("../images/ico-arch-monitor.svg") center / 30rem no-repeat;
}
.solarch__person .icon--phone::after {
  -webkit-mask: url("../images/ico-sol-how-phone.svg") center / auto 30rem no-repeat;
  mask: url("../images/ico-sol-how-phone.svg") center / auto 30rem no-repeat;
}
.solarch__person strong {
  font-size: 16rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default-highest);
}
.solarch__person p {
  margin-top: 8rem;
  font-size: 14rem;
  line-height: var(--lh-body);
  color: var(--color-text-default-medium);
}
/* 장비 노드 */
.solarch__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  position: absolute;
  border-radius: var(--radius-400);
  font-size: 18rem;
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-white);
  text-align: center;
}
.solarch__node--green {
  background: #3eae58;
}
.solarch__node--blue {
  background: var(--color-brand-new-blue);
}
.solarch__node--gray {
  background: #f3f3f4;
  color: var(--color-text-default-high);
}
.solarch__node .icon {
  width: 32rem;
  height: 32rem;
  background-color: #fff;
}
.solarch__node .icon--card {
  -webkit-mask: url("../images/ico-arch-card.svg") center / contain no-repeat;
  mask: url("../images/ico-arch-card.svg") center / contain no-repeat;
}
.solarch__node .icon--lock {
  -webkit-mask: url("../images/ico-sol-how-lock.svg") center / contain no-repeat;
  mask: url("../images/ico-sol-how-lock.svg") center / contain no-repeat;
}
.solarch__node .icon--api {
  -webkit-mask: url("../images/ico-sol-how-api.svg") center / contain no-repeat;
  mask: url("../images/ico-sol-how-api.svg") center / contain no-repeat;
}
.solarch__node--ddl {
  left: 178.5rem;
  top: 339rem;
  width: 231rem;
  height: 144rem;
}
.solarch__node--reader {
  left: 433rem;
  top: 339rem;
  width: 162rem;
  height: 144rem;
}
.solarch__node--lock {
  left: 178.5rem;
  top: 507rem;
  width: 231rem;
  height: 144rem;
}
.solarch__node--gateway {
  left: 433rem;
  top: 507rem;
  width: 162rem;
  height: 144rem;
}
.solarch__node--acu {
  left: 433rem;
  top: 700rem;
  width: 162rem;
  height: 98rem;
}
/* 플랫폼 패널 */
.solarch__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 339rem;
  height: 312rem;
  border-radius: var(--radius-600);
  text-align: center;
}
.solarch__panel--solity {
  left: 635rem;
  width: 343rem;
  background: #d3e7ff;
}
.solarch__panel--customer {
  left: 1018rem;
  width: 351rem;
  background: #f3f3f4;
}
.solarch__panel .badge {
  display: block;
  width: 88rem;
  height: 88rem;
  margin-bottom: 8rem;
}
.solarch__panel .badge img {
  width: 100%;
  height: 100%;
}
.solarch__panel em {
  font-size: 14rem;
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-new-blue);
}
.solarch__panel strong {
  margin-top: 8rem;
  font-size: 24rem;
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-highest);
}
.solarch__panel p {
  margin-top: 8rem;
  font-size: 14rem;
  color: var(--color-text-default-medium);
}
/* On-site 라벨 / 사용자 아이콘 */
.solarch__onsite {
  position: absolute;
  left: 392.5rem;
  top: 810rem;
  width: 244rem;
  font-size: 14rem;
  line-height: var(--lh-body);
  color: var(--color-text-default-medium);
  text-align: center;
}
.solarch__enduser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  position: absolute;
  left: 71.5rem;
  top: 546rem;
}
.solarch__enduser .circle {
  display: block;
  position: relative;
  width: 64rem;
  height: 64rem;
  border-radius: 50%;
  background: #d0d1d2;
}
.solarch__enduser .circle .icon {
  position: absolute;
  inset: 0;
  background-color: #fff;
  -webkit-mask: url("../images/ico-arch-user.svg") center / auto 27rem no-repeat;
  mask: url("../images/ico-arch-user.svg") center / auto 27rem no-repeat;
}
.solarch__enduser .txt {
  font-size: 16rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default-high);
}
/* 점선 연결선 */
.solarch__line {
  position: absolute;
}
.solarch__line--user-h {
  left: 135rem;
  top: 578rem;
  width: 43.5rem;
  border-top: 1px dashed #b9babb;
}
.solarch__line--gw-plat {
  left: 595rem;
  top: 578rem;
  width: 40rem;
  border-top: 1px dashed #b9babb;
}
.solarch__line--v1 {
  left: 294rem;
  top: 483rem;
  height: 24rem;
  border-left: 1px dashed #b9babb;
}
.solarch__line--v2 {
  left: 514rem;
  top: 483rem;
  height: 24rem;
  border-left: 1px dashed #b9babb;
}
.solarch__line--gw-acu {
  left: 514rem;
  top: 651rem;
  height: 49rem;
  border-left: 1px dashed #b9babb;
}
.solarch__line--acu-h {
  left: 595rem;
  top: 748rem;
  width: 630rem;
  border-top: 1px dashed #b9babb;
}
.solarch__line--acu-v {
  left: 1225rem;
  top: 651rem;
  height: 98rem;
  border-left: 1px dashed #b9babb;
}
.solarch__line--bus {
  left: 790rem;
  top: 300rem;
  width: 460rem;
  border-top: 1px dashed #b9babb;
}
.solarch__line--admin-v {
  left: 982rem;
  top: 276rem;
  height: 24rem;
  border-left: 1px dashed #b9babb;
}
.solarch__line--appuser-v {
  left: 1250rem;
  top: 276rem;
  height: 24rem;
  border-left: 1px dashed #b9babb;
}
.solarch__line--plat-v {
  left: 790rem;
  top: 300rem;
  height: 39rem;
  border-left: 1px dashed #b9babb;
}
.solarch__line--cust-v {
  left: 1194rem;
  top: 300rem;
  height: 39rem;
  border-left: 1px dashed #b9babb;
}
/* 화살촉 */
.solarch__line--arrow-d::after,
.solarch__line--arrow-u::after,
.solarch__line--arrow-r::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
.solarch__line--arrow-d::after {
  left: -4rem;
  bottom: -1rem;
  border-left: 4rem solid transparent;
  border-right: 4rem solid transparent;
  border-top: 6rem solid #b9babb;
}
.solarch__line--arrow-u::after {
  left: -4rem;
  top: -1rem;
  border-left: 4rem solid transparent;
  border-right: 4rem solid transparent;
  border-bottom: 6rem solid #b9babb;
}
.solarch__line--arrow-r::after {
  right: -1rem;
  top: -4rem;
  border-top: 4rem solid transparent;
  border-bottom: 4rem solid transparent;
  border-left: 6rem solid #b9babb;
}

/* === FO-SOL-01-02-001 — Hospitality 전용 === */
.solhero-area--hosp {
  background-image: url("../images/img-sol-hosp-hero.jpg");
  background-position: center;
}
/* HOW 다이어그램 변형 — 중앙 파란 원 + 점선 원 (피그마 8453-10172) */
.solhow-diagram--hosp {
  width: 1209rem;
  height: 747rem;
}
.solhow-diagram--hosp::before {
  content: "";
  position: absolute;
  left: 328.5rem;
  top: 193rem;
  width: 551rem;
  height: 551rem;
  border: 2px dashed var(--color-line-medium); /* #d0d1d2 */
  border-radius: 50%;
}
.solhow-diagram--hosp .solhow-diagram__card {
  width: 382rem;
  min-height: 0;
}
.solhow-diagram--hosp .solhow-diagram__card--lock {
  left: 413rem;
  top: 0;
}
.solhow-diagram--hosp .solhow-diagram__card--app {
  left: 0;
  top: 451rem;
  min-height: 296rem;
}
.solhow-diagram--hosp .solhow-diagram__card--cloud {
  left: 827rem;
  top: 451rem;
  min-height: 296rem;
}
.solhow-diagram--hosp .solhow-diagram__card .desc {
  width: 300rem;
}
.solhow-diagram--hosp .solhow-diagram__card .icon--phone {
  -webkit-mask: url("../images/ico-sol-how-phone.svg") center / contain no-repeat;
  mask: url("../images/ico-sol-how-phone.svg") center / contain no-repeat;
}
.solhow-diagram__center {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 423.5rem;
  top: 288rem;
  width: 361rem;
  height: 361rem;
  padding: 40rem;
  background: var(--color-brand-new-blue); /* #1475e7 */
  border-radius: 50%;
}
.solhow-diagram__center p {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-white);
  text-align: center;
}

/* WHO IT'S FOR — 이미지 + 불릿 카드 2종 */
.solwho-area {
  padding: 120rem 0 160rem;
}
.solwho-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40rem;
  width: 1440rem;
  margin: 80rem auto 0;
}
.solwho-list > li {
  display: flex;
  flex-direction: column; /* 텍스트 박스가 남은 높이를 채워 카드 높이 통일 */
}
.solwho-list .img {
  display: block;
  overflow: hidden;
  aspect-ratio: 700 / 466;
  border-radius: var(--radius-400) var(--radius-400) 0 0; /* 16 */
}
.solwho-list .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.solwho-list .txt {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16rem;
  padding: 40rem;
  border: 1px solid var(--color-line-low); /* #e8e8e8 */
  border-top: 0;
  border-radius: 0 0 var(--radius-400) var(--radius-400);
}
.solwho-list .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.solwho-list .bullets {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.solwho-list .bullets li {
  position: relative;
  padding-left: 27rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium);
}
.solwho-list .bullets li::before {
  content: "";
  position: absolute;
  left: 10rem;
  top: 10rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: currentColor;
}

/* 공통 아코디언 (WHAT YOU GET / FAQ) */
.sol-acco > li {
  border-bottom: 1px solid var(--color-line-low); /* #e8e8e8 */
}
.sol-acco > li > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rem;
  width: 100%;
  padding: 24rem 0;
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-high);
  text-align: left;
}
.sol-acco > li > button:hover,
.sol-acco > li > button:focus-visible,
.sol-acco > li.is-open > button {
  color: var(--color-text-point-default); /* #1475e7 */
}
.sol-acco > li > button i {
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  background-color: currentColor;
  -webkit-mask: url("../images/ico-accordion-arrow.svg") center / contain no-repeat;
  mask: url("../images/ico-accordion-arrow.svg") center / contain no-repeat;
  transition: transform 0.3s ease;
}
.sol-acco > li.is-open > button i {
  transform: rotate(180deg);
}
.sol-acco__detail {
  display: none; /* 초기 열림 항목 포함 JS(slideDown/Up)로만 제어 — 열림 모션 유지 */
  padding: 0 40rem 24rem 0;
}
.sol-acco__detail p {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium);
}

/* WHAT YOU GET — 좌 이미지 / 우 아코디언 */
.solget-area {
  padding: 120rem 0 160rem;
}
.solget-area .sol-sec-tit--left {
  width: 1440rem;
}
.solget-cont {
  display: flex;
  align-items: flex-start;
  gap: 80rem;
  width: 1440rem;
  margin: 80rem auto 0;
}
.solget-cont__img {
  display: block;
  overflow: hidden;
  flex-shrink: 0;
  width: 700rem;
  height: 466rem;
  border-radius: var(--radius-400); /* 16 */
  background: var(--color-bg-secondary-light-level-1, #e7f2ff);
}
/* 2026-10-02 수정 (디자이너 코멘트) — 이미지 자동 슬라이드(Swiper 페이드). 슬라이드가 박스를 꽉 채우도록 높이 100% */
.solget-cont__img .swiper-wrapper,
.solget-cont__img .swiper-slide {
  height: 100%;
}
.solget-cont__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.solget-acco {
  flex: 1;
  min-width: 0;
}

/* PRODUCT LINEUP — pd-list 재사용 (4열) */
.solpd-area {
  padding: 120rem 0 160rem;
}
.solpd-area .pd-list {
  grid-template-columns: repeat(4, 1fr);
  gap: 80rem 32rem;
  margin-top: 80rem;
}
.solpd-area__btn {
  display: flex;
  justify-content: center;
  margin-top: 80rem;
}

/* FAQ */
.solfaq-area {
  padding: 120rem 0 160rem;
}
.solfaq-acco {
  width: 952rem;
  margin: 80rem auto 0;
  border-top: 1px solid var(--color-line-high); /* #e8e8e8 */
}
.solfaq-acco > li > button {
  padding: 32rem 0;
  font-size: var(--type-b1); /* 24 */
}
.solfaq-acco .sol-acco__detail {
  padding-bottom: 32rem;
}
.solfaq-acco .sol-acco__detail p {
  max-width: 830rem;
}

/* CTA 배너 — 풀블리드 배너로 끝나는 페이지는 푸터 기본 상단 여백(200) 제거 */
.sub:has(.solcta-area:last-child) + footer {
  margin-top: 0;
}
/* CTA 배너 */
.solcta-area {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 500rem;
  background: url("../images/img-sol-cta.jpg") center / cover no-repeat;
}
.solcta-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
}
.solcta-area__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
  position: relative;
  width: 100%;
  text-align: center;
}
.solcta-area__txt .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-white);
}
.solcta-area__txt .desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-white);
}
.solcta-area__txt .btn {
  margin-top: 28rem; /* 텍스트와 40 간격 (gap 12 + 28) */
}

@media (max-width: 1024px) {
  /* 섹션 타이틀 — inner 밖 배치라 모바일 양옆 여백 직접 지정 */
  .main-tit {
    width: calc(100% - 48rem);
    margin-left: auto;
    margin-right: auto;
  }
  .kv-slide__copy {
    left: 24rem;
    right: 24rem;
  }
  .kv-slide__copy .desc {
    max-width: none;
    font-size: var(--type-b4); /* 16 */
  }
  .kv-slide__copy .desc br {
    display: none;
  }
  /* 컨트롤러 — 하단 중앙 (M-Main) */
  .kv-area__ctrl {
    right: auto;
    left: 50%;
    bottom: 40rem;
    gap: 40rem;
    transform: translateX(-50%);
  }
  .feature-area,
  .sol-area,
  .mainpd-area,
  .partner-area {
    padding-top: 120rem;
  }
  .feature-area {
    padding-bottom: 0;
  }
  /* 피처 — 핀 모션 없이 세로 나열 · 카드 세로형(아이콘 위/텍스트 아래 중앙 정렬) */
  .feature-list {
    display: flex;
    flex-direction: column;
    gap: 24rem;
    width: calc(100% - 48rem);
    height: auto;
    margin-top: 10rem;
  }
  .feature-list li {
    position: static;
    flex-direction: column-reverse;
    align-items: center;
    gap: 32rem;
    min-height: 0;
    padding: 40rem 32rem;
    text-align: center;
  }
  .feature-list .txt {
    align-items: center;
    width: 100%;
  }
  .feature-list .tit {
    font-size: var(--type-h3);
  }
  .feature-list .btn {
    height: 60rem;
  }
  .feature-list .icon {
    width: 100%;
    max-width: 276rem;
    margin: 0 auto;
  }
  /* 데이터 — 세로 스택 + 흰 구분선 · 단위는 숫자 아래 줄 (시안 주석: 모바일 숫자는 T1 예외 + 자간 -4%) */
  .num-area {
    padding: 120rem 24rem;
  }
  .num-area__inner {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .num-area li {
    text-align: center;
    gap: 0;
  }
  .num-area li + li {
    margin-top: 60rem;
    padding-top: 60rem;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }
  .num-area li + li::before {
    display: none; /* 세로 구분선은 PC 전용 */
  }
  .num-area .num {
    display: block;
    font-size: var(--type-t1); /* 60 */
    letter-spacing: -0.04em;
  }
  .num-area .num small {
    display: block;
    height: auto;
    margin-top: 2rem;
    padding: 0;
  }
  .num-area .desc {
    margin-top: 24rem;
  }
  .num-area .desc br {
    display: inline; /* 모바일 — 캡처처럼 2줄 (QA 2026-09-28) */
  }
  /* 솔루션 — 배너 세로 스택 + 상세문구/버튼 노출 (마지막 2장은 낮은 배너) */
  .sol-list {
    grid-template-columns: 1fr;
    gap: 24rem;
    margin-top: 140rem;
  }
  .sol-list li,
  .sol-list li.sol-list__wide {
    grid-column: span 1;
  }
  /* 카드 높이 — 문구가 길면 내용에 맞게 늘어나도록 min-height + 플렉스 배치 */
  .sol-list a,
  .sol-list__wide a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 60rem;
    height: auto;
    min-height: 680rem;
    padding: 80rem 32rem 56rem;
  }
  .sol-list li:nth-child(4) a {
    min-height: 460rem;
  }
  .sol-list li:nth-child(5) a {
    min-height: 400rem;
  }
  .sol-list a::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    opacity: 1; /* 모바일은 륌 상시 노출 */
  }
  .sol-list .tit {
    position: static;
    text-align: center;
  }
  .sol-list .detail {
    position: static;
    opacity: 1; /* 모바일은 상시 노출 */
    visibility: visible;
    transform: none;
  }
  .sol-list .detail .desc {
    font-family: var(--font-family-eng);
    font-size: var(--type-b4); /* 16 */
    line-height: var(--lh-body); /* 1.4 */
    color: var(--color-text-default-white);
  }
  /* 제품 — 탭 → 아코디언 (뷰 카드가 활성 탭 아래로 이동, pages.js) */
  .mainpd-area__inner {
    flex-direction: column;
    gap: 0;
    margin-top: 40rem; /* 폭은 .inner-wide 공통 모바일 규칙 사용 */
  }
  .mainpd-tab {
    width: 100%;
  }
  .mainpd-tab > li {
    border-bottom: 1px solid var(--color-line-low); /* #e8e8e8 — 탭 항목만 (뷰 이동 후 내부 슬라이드 li 제외) */
  }
  .mainpd-tab button {
    font-size: var(--type-b2);
    border-bottom: 0; /* 항목 구분선은 li가 담당 — 열린 탭에서 뷰 위에 라인이 생기지 않게 */
  }
  .mainpd-tab button i {
    opacity: 1;
    -webkit-mask-image: url("../images/ico-accordion-arrow.svg"); /* 쇈버론(아래) — M-Main ic/20/arrow-down */
    mask-image: url("../images/ico-accordion-arrow.svg");
    transition: transform 0.3s ease;
  }
  .mainpd-tab button.is-active i {
    transform: rotate(180deg); /* 열림 — 위쪽 쇈버론 */
  }
  .mainpd-view {
    flex-direction: column;
    width: 100%;
    min-height: 0;
    margin: 0 0 24rem;
    border-radius: var(--radius-800); /* 32 */
  }
  .mainpd-view .img {
    padding: 0;
  }
  /* 모바일 — 이미지 박스를 뷰 폭 정사각으로 축소 (내부 %는 그대로 비례) */
  .mainpd-swiper {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .mainpd-view .txt {
    width: 100%;
    padding: 32rem 32rem 48rem; /* 이미지와 텍스트 사이 여백 */
  }
  .partner-area {
    margin-top: 91rem; /* 지구본이 섭션 위로 올라오는 만큼 여백 확보 — 이전 섭션과 겹침 방지 */
    padding-bottom: 120rem;
  }
  .partner-area::before {
    top: -91rem;
    width: 828rem;
    height: 466rem;
  }
  /* 파트너 — 로고 2줄 무한 루핑 (윗줄 좌 / 아랫줄 우 · 시안 인터랙션 주석) */
  .partner-list {
    overflow: hidden;
    width: 100%;
    margin-top: 80rem;
  }
  .partner-list__row {
    display: flex;
    gap: 16rem;
    width: max-content;
    animation: partnerLoop 24s linear infinite;
  }
  .partner-list__row + .partner-list__row {
    margin-top: 16rem;
  }
  .partner-list__row:nth-child(2) {
    animation-direction: reverse;
  }
  .partner-list li {
    flex: 0 0 auto;
    width: 175rem;
    height: 80rem;
    border-radius: 8rem;
  }
  /* 로고별 사이즈 — PC 비율 유지 축소(셀 326→175) */
  .partner-list__row:nth-child(1) li:nth-child(5n + 1) img {
    width: 155rem;
  }
  .partner-list__row:nth-child(1) li:nth-child(5n + 2) img {
    width: 155rem;
  }
  .partner-list__row:nth-child(1) li:nth-child(5n + 3) img {
    width: 126rem;
  }
  .partner-list__row:nth-child(1) li:nth-child(5n + 4) img {
    width: 129rem;
  }
  .partner-list__row:nth-child(1) li:nth-child(5n + 5) img {
    width: 94rem;
  }
  .partner-list__row:nth-child(2) li:nth-child(5n + 1) img {
    width: 136rem;
  }
  .partner-list__row:nth-child(2) li:nth-child(5n + 2) img {
    width: 115rem;
  }
  .partner-list__row:nth-child(2) li:nth-child(5n + 3) img {
    width: 105rem;
  }
  .partner-list__row:nth-child(2) li:nth-child(5n + 4) img {
    width: 155rem;
  }
  .partner-list__row:nth-child(2) li:nth-child(5n + 5) img {
    width: 155rem;
  }
  /* 2026-10-08 수정 — 파트너 영역 주석 처리로 앞 여백이 사라져 섹션 상단 패딩 추가 (모바일 섹션 리듬 120 유지) */
  .mainnews-area {
    padding-top: 120rem;
  }
  .mainnews {
    flex-direction: column;
    gap: 40rem;
    margin-top: 40rem;
  }
  .mainnews__latest {
    width: 100%;
  }
  .mainnews__latest .info {
    padding: 0;
  }
  .mainnews__latest .thumb {
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 16rem;
  }
  .mainnews__thumbs {
    grid-template-columns: 1fr;
    gap: 40rem;
  }
  .mainnews__texts a {
    padding-right: 0;
  }
  .mainnews__texts .date {
    position: static;
    margin-top: 16rem;
    transform: none;
  }

  /* === FO-SOL-01-01-001 — 모바일 (M-FO-SOL 8123-26021) === */
  .sol-sec-tit,
  .sol-sec-tit--narrow,
  .solget-area .sol-sec-tit--left {
    width: calc(100% - 48rem);
  }
  /* 히어로 — 텍스트 상단 스택 */
  .solhero-area {
    height: auto;
    min-height: 800rem;
  }
  .solhero-area .inner {
    flex-direction: column;
    gap: 32rem;
    padding: 80rem 0 60rem;
  }
  .solhero-area__tit,
  .solhero-area__desc {
    width: 100%;
  }
  .solhero-area__desc .btn {
    margin-top: 8rem; /* 본문과 40 간격 (gap 32 + 8) */
  }
  .solwhy-area,
  .solhow-area,
  .solwho-area,
  .solget-area,
  .solpd-area,
  .solfaq-area {
    padding: 80rem 0;
  }
  /* WHY — 카드 세로 스택 */
  .solwhy-list {
    grid-template-columns: 1fr;
    gap: 24rem;
    width: calc(100% - 48rem);
    margin-top: 48rem;
  }
  /* HOW — 카드 세로 + 사이 연결선 라벨 (시안 모바일 다이어그램) */
  .solhow-diagram {
    display: flex;
    flex-direction: column;
    width: calc(100% - 48rem);
    height: auto;
    margin-top: 48rem;
    padding-right: 10rem;
  }
  .solhow-diagram__card {
    position: static;
    width: 100%;
    min-height: 0;
    padding: 32rem 24rem;
  }
  .solhow-diagram__card--lock {
    order: 1;
  }
  .solhow-diagram__card--app {
    order: 3;
  }
  .solhow-diagram__card--cloud {
    order: 5;
  }
  .solhow-diagram__card .desc {
    width: 100%;
  }
  /* 카드 사이 세로 점선 + 라벨 */
  .solhow-diagram__arrow--left,
  .solhow-diagram__arrow--bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 0; /* PC 절대좌표 오프셋 초기화 */
    top: 0;
    width: 100%;
    height: 80rem;
    background-color: transparent; /* PC 벡터 이미지 초기화는 아래 background-image로 대체 */
    transform: none;
  }
  .solhow-diagram__arrow--left {
    order: 2;
  }
  .solhow-diagram__arrow--bottom {
    order: 4;
  }
  .solhow-diagram__arrow--left,
  .solhow-diagram__arrow--bottom {
    /* 가운데 세로 점선 — 라벨 위/아래 대시 2개씩 대칭 (삼각형과 같은 50% 기준) */
    background-image: repeating-linear-gradient(to bottom, var(--color-line-medium) 0 3rem, transparent 3rem 6rem),
      repeating-linear-gradient(to top, var(--color-line-medium) 0 3rem, transparent 3rem 6rem);
    background-size: 2px 9rem, 2px 9rem;
    background-position: center 12rem, center calc(100% - 12rem);
    background-repeat: no-repeat, no-repeat;
  }
  .solhow-diagram__arrow--left em,
  .solhow-diagram__arrow--bottom em {
    position: relative; /* 점선(::before)보다 위에 그려지도록 */
    left: auto;
    top: auto;
    transform: none;
    white-space: nowrap;
  }
  .solhow-diagram__arrow--left em br,
  .solhow-diagram__arrow--bottom em br {
    display: none; /* 모바일 라벨은 한 줄 */
  }
  /* 양방향 화살촉 — 채워진 삼각형 (::before = 위쪽, ::after = 아래쪽) */
  .solhow-diagram__arrow--left::before,
  .solhow-diagram__arrow--bottom::before,
  .solhow-diagram__arrow--left::after,
  .solhow-diagram__arrow--bottom::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 5rem solid transparent;
    border-right: 5rem solid transparent;
    transform: translateX(-50%);
  }
  .solhow-diagram__arrow--left::before,
  .solhow-diagram__arrow--bottom::before {
    top: 0;
    border-bottom: 7rem solid var(--color-line-medium); /* ↑ */
  }
  .solhow-diagram__arrow--left::after,
  .solhow-diagram__arrow--bottom::after {
    bottom: 0;
    border-top: 7rem solid var(--color-line-medium); /* ↓ */
  }
  /* 우측 러너 — 양끝 좌측 채워진 화살촉 */
  .solhow-diagram__arrow--right::before,
  .solhow-diagram__arrow--right::after {
    content: "";
    position: absolute;
    left: -5rem;
    width: 0;
    height: 0;
    border-top: 5rem solid transparent;
    border-bottom: 5rem solid transparent;
    border-right: 7rem solid var(--color-line-medium); /* ← */
  }
  .solhow-diagram__arrow--right::before {
    top: -5rem;
  }
  .solhow-diagram__arrow--right::after {
    bottom: -5rem;
  }
  /* 우측 세로 러너 — 카드1↔카드3 연결 (Remote Management) */
  .solhow-diagram__arrow--right {
    display: block;
    position: absolute;
    left: auto;
    right: -9rem;
    top: 144rem;
    bottom: 74rem;
    width: 14rem;
    height: auto;
    background: none;
    border: 2px dashed var(--color-line-medium);
    border-left: 0;
    transform: none;
  }
  .solhow-diagram__arrow--right em {
    left: auto;
    right: 0;
    top: 50%;
    padding: 4rem 2rem;
    transform: translate(50%, -50%);
    writing-mode: vertical-rl;
    white-space: nowrap;
  }
  .solhow-diagram__arrow--right em br {
    display: none;
  }
  /* Corporate — 아키텍처 다이어그램: 풀 블리드 가로 스크롤 (양옆 여백은 스크롤 안쪽 마진 — 끝까지 스크롤됨) */
  .solhow-arch {
    overflow-x: auto;
    width: 100%;
    margin-top: 48rem;
  }
  .solarch {
    transform: scale(0.7633); /* 1441 → 1100 비례 축소 */
    transform-origin: 0 0;
    margin: 0 calc(24rem - 341rem) 0 24rem; /* 좌우 24 여백 + 축소분 레이아웃 보정(1441-1100) */
    margin-bottom: -221rem; /* 934-713 */
  }
  /* Hospitality — HOW 변형: 카드 스택 + 파란 라운드 박스 (M-FO-SOL-01-02-001) */
  .solhow-diagram--hosp {
    width: calc(100% - 48rem);
    height: auto;
    gap: 20rem;
  }
  .solhow-diagram--hosp::before {
    display: none; /* 점선 원 장식은 PC 전용 */
  }
  .solhow-diagram--hosp .solhow-diagram__card {
    width: 100%;
  }
  .solhow-diagram--hosp .solhow-diagram__card .desc {
    width: 100%;
  }
  .solhow-diagram__center {
    position: static;
    order: 6;
    width: 100%;
    height: auto;
    margin-top: 20rem;
    padding: 40rem;
    border-radius: var(--radius-600); /* 24 */
  }
  /* WHO — 카드 세로 스택 */
  .solwho-list {
    grid-template-columns: 1fr;
    gap: 40rem;
    width: calc(100% - 48rem);
    margin-top: 48rem;
  }
  .solwho-list .img {
    aspect-ratio: 342 / 228;
  }
  .solwho-list .txt {
    padding: 40rem;
  }
  /* WHAT YOU GET — 세로 스택 */
  .solget-cont {
    flex-direction: column;
    gap: 8rem;
    width: calc(100% - 48rem);
    margin-top: 48rem;
  }
  .solget-cont__img {
    width: 100%;
    height: auto;
    aspect-ratio: 342 / 228;
  }
  .solget-acco {
    width: 100%;
  }
  /* PRODUCT LINEUP — 2열 */
  .solpd-area .pd-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 48rem 12rem;
    margin-top: 40rem;
  }
  .solpd-area__btn {
    margin-top: 40rem;
  }
  /* FAQ — 시안 좌우 48 여백 */
  .solfaq-acco {
    width: calc(100% - 96rem);
    margin-top: 40rem;
  }
  .solfaq-acco > li > button {
    padding: 32rem 0;
    font-size: var(--type-b2);
  }
  /* CTA 배너 */
  .solcta-area {
    height: auto;
    padding: 103rem 24rem;
    background-image: url("../images/img-sol-cta-m.jpg"); /* 모바일 전용 크롭 (시안 8123-26345) */
  }
}

/* 파트너 로고 루핑 (모바일) — 행 내용이 2벌 복제되어 있어 -50%가 정확히 한 사이클 */
@keyframes partnerLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 8rem)); /* 복제 경계 gap 보정 */
  }
}

/* === FO-SOL-02-01-001 — Solity Connect === */
/* 히어로 — 커넥트 변형 배경 */
.solhero-area--con {
  background-image: url("../images/img-sol-con-hero.jpg");
  background-position: center;
}
.solhero-area--con::before {
  background: rgba(0, 0, 0, 0.3);
}
/* WHAT — 제공 기술 ↔ 비즈니스 다이어그램 (피그마 7935:16456) */
.conwhat-area,
.conwhy-area,
.conmodel-area,
.conhow-area,
.contech-area,
.conref-area {
  padding: 120rem 0 160rem;
}
.conwhat-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1002rem;
  margin: 80rem auto 0;
}
.conwhat-diagram__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 32rem 40rem;
  background: #e7f2ff;
  border: 1px solid #d3e7ff;
  border-radius: var(--radius-600); /* 24 */
}
.conwhat-diagram__box .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.conwhat-diagram__box .subtxt {
  /* 공통 서브 래퍼 .sub와 클래스명 충돌 방지를 위해 subtxt 사용 */
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-medium);
}
.conwhat-diagram__box .icons {
  display: flex;
  justify-content: center;
  width: 920rem;
  margin-top: 16rem;
}
.conwhat-diagram__box .icons li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
  width: 230rem;
  padding: 0 24rem;
  text-align: center;
}
.conwhat-diagram__box .icons img {
  width: 120rem;
}
.conwhat-diagram__box .icons span {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-high);
}
/* 커넥터 — 세로 점선 + 라벨 */
.conwhat-diagram__link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 80rem;
}
.conwhat-diagram__link::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  border-left: 1px dashed var(--color-line-medium); /* #d0d1d2 */
}
/* 점선 하단 화살촉 (다음 단계 방향) */
.conwhat-diagram__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 5rem solid transparent;
  border-right: 5rem solid transparent;
  border-top: 7rem solid var(--color-line-medium);
}
.conwhat-diagram__link em {
  position: relative;
  padding: 4rem 10rem;
  background: var(--color-bg-default-white);
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-high);
}
.conwhat-diagram__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 600rem;
  height: 122rem;
  background: var(--color-brand-new-blue);
  border-radius: var(--radius-600);
}
.conwhat-diagram__bar strong {
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default-white);
}
/* WHY — 아이콘 카드 4종 */
.conwhy-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rem;
  width: 1440rem;
  margin: 80rem auto 0;
}
.conwhy-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
  padding: 0 24rem;
  text-align: center;
}
.conwhy-list .icon {
  width: 120rem;
}
.conwhy-list .icon img {
  width: 100%;
}
.conwhy-list .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-high);
}
.conwhy-list .desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium);
}
/* CONNECTION MODELS — 비교 테이블 */
.conmodel-cont {
  width: 1440rem;
  margin: 68rem auto 0;
}
.conmodel-cont__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8rem;
  margin-bottom: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  color: var(--color-text-default-medium);
}
.conmodel-cont__legend img {
  width: 22rem;
}
.conmodel-tbl {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.conmodel-tbl th,
.conmodel-tbl td {
  border: 1px solid var(--color-line-low); /* #e8e8e8 — 연한 구분선 */
  text-align: center;
  vertical-align: middle;
  font-family: var(--font-family-eng);
}
.conmodel-tbl thead th {
  padding: 28rem 40rem 36rem;
  vertical-align: top;
}
.conmodel-tbl thead .flag {
  display: block;
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-medium);
  font-style: normal;
  line-height: var(--lh-body-tight);
  color: var(--color-text-point-default); /* #1475e7 */
}
.conmodel-tbl thead .name {
  display: block;
  margin-top: 8rem;
  font-family: var(--font-family-eng); /* strong 리셋(Roboto) 무효화 */
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-highest);
}
.conmodel-tbl thead .aud {
  display: block;
  margin-top: 12rem;
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-high);
}
.conmodel-tbl thead .desc {
  margin-top: 16rem;
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body);
  color: var(--color-text-default-medium);
}
.conmodel-tbl tbody th {
  height: 149rem; /* 노트 유무와 무관하게 행 높이 균일 (시안 149) */
  padding: 24rem;
  font-size: 20rem;
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-high);
}
.conmodel-tbl tbody th .icon {
  display: block;
  width: 32rem;
  height: 32rem;
  margin: 0 auto 8rem;
}
.conmodel-tbl tbody th .icon--tb-lock {
  background: url("../images/ico-sol-con-tb-lock.svg") center / contain no-repeat;
}
.conmodel-tbl tbody th .icon--tb-comm {
  background: url("../images/ico-sol-con-tb-comm.svg") center / contain no-repeat;
}
.conmodel-tbl tbody th .icon--tb-cloud {
  background: url("../images/ico-sol-con-tb-cloud.svg") center / contain no-repeat;
}
.conmodel-tbl tbody th .icon--tb-api {
  background: url("../images/ico-sol-con-tb-api.svg") center / contain no-repeat;
}
.conmodel-tbl tbody th .icon--tb-app {
  background: url("../images/ico-sol-con-tb-app.svg") center / contain no-repeat;
}
.conmodel-tbl tbody td {
  padding: 24rem;
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body);
  color: var(--color-text-default-medium);
}
.conmodel-tbl tbody td .chk {
  width: 40rem;
  vertical-align: middle;
}
.conmodel-tbl tbody td .note {
  display: block;
  margin-top: 8rem;
  color: var(--color-text-default-highest);
}
/* ⓘ 팝업(모바일 전용) — PC에서는 aud/desc 일반 노출 */
.conmodel-tbl thead .info,
.conmodel-tbl thead .detail .close {
  display: none;
}
/* Connect Here — 열 안에서 고객이 연결을 시작하는 지점 (파란 점선 경계 + 라벨) */
.conmodel-tbl tbody td.is-connect {
  position: relative;
  border-top: 2px dashed var(--color-brand-new-blue);
}
.conmodel-tbl tbody td .connect-label {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  padding: 2rem 12rem;
  background: var(--color-bg-default-white);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body-tight);
  color: var(--color-brand-new-blue);
  white-space: nowrap;
}
/* HOW — 4단계 플로우 카드 */
.conhow-flow {
  width: 1440rem;
  margin: 80rem auto 0;
}
.conhow-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rem;
}
.conhow-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  min-height: 340rem;
  padding: 60rem 40rem;
  background: #e7f2ff;
  border: 1px solid #d3e7ff;
  border-radius: var(--radius-600);
}
/* 카드 사이 진행 체브론 (시안: 얇은 선 › 모양) */
.conhow-list li + li::before {
  content: "";
  position: absolute;
  left: -19rem;
  top: 50%;
  width: 8rem;
  height: 8rem;
  border-top: 2px solid var(--color-brand-new-blue);
  border-right: 2px solid var(--color-brand-new-blue);
  transform: translateY(-50%) rotate(45deg);
}
.conhow-list .tit {
  display: flex;
  align-items: center;
  gap: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-highest);
}
.conhow-list .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: var(--color-brand-new-blue);
  font-size: var(--type-b4); /* 16 */
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default-white);
}
.conhow-list .desc {
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body);
  color: var(--color-text-default-medium);
}
.conhow-list .label {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding: 3rem 12rem;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-brand-new-blue);
  border-radius: 999rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body);
  color: var(--color-brand-new-blue); /* 보더와 동일 #1475e7 */
}
/* 하단 피드백 라인 — 양방향 점선 + 중앙 라벨 */
.conhow-feedback {
  display: flex;
  align-items: center;
  margin-top: 34rem;
}
.conhow-feedback .line {
  flex: 1;
  border-top: 1px dashed var(--color-brand-new-blue);
}
.conhow-feedback .tip {
  width: 0;
  height: 0;
  border-top: 4rem solid transparent;
  border-bottom: 4rem solid transparent;
}
.conhow-feedback .tip--l {
  border-right: 6rem solid var(--color-brand-new-blue);
}
.conhow-feedback .tip--r {
  border-left: 6rem solid var(--color-brand-new-blue);
}
.conhow-feedback span {
  padding: 4rem 10rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-high);
}
/* TECHNICAL LEADERSHIP — 카드 3종 + 로고 */
.contech-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rem;
  width: 1440rem;
  margin: 80rem auto 0;
}
.contech-list li {
  padding: 60rem 40rem;
  background: #e7f2ff;
  border: 1px solid #d3e7ff;
  border-radius: var(--radius-600);
}
.contech-list .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-highest);
}
.contech-list .desc {
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body);
  color: var(--color-text-default-medium);
}
.contech-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24rem;
  width: 1440rem;
  margin: 40rem auto 0;
}
.contech-logos img {
  display: block;
  width: 100%;
  border-radius: 4rem;
}
/* REFERENCES — 이미지 카드 그리드 */
.conref-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rem;
  width: 1440rem;
  margin: 80rem auto 0;
}
.conref-list li {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-line-low); /* #e8e8e8 */
  border-radius: 16rem;
}
.conref-list .img {
  display: block;
  overflow: hidden;
  aspect-ratio: 464 / 309;
}
.conref-list .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.conref-list .txt {
  flex: 1;
  padding: 40rem;
}
.conref-list .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-highest);
}
.conref-list .desc {
  margin-top: 16rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body);
  color: var(--color-text-default-medium);
}
/* CTA 배너 — 커넥트 변형 배경 (dim은 이미지에 포함) */
.solcta-area--con {
  background-image: url("../images/img-sol-con-cta.jpg");
}
.solcta-area--con::before {
  display: none;
}

@media (max-width: 1024px) {
  /* === FO-SOL-02-01-001 — Solity Connect (모바일, M 시안 8436:5860) === */
  .conwhat-area,
  .conwhy-area,
  .conmodel-area,
  .conhow-area,
  .contech-area,
  .conref-area {
    padding: 80rem 0 100rem;
  }
  /* WHAT 다이어그램 — 아이콘 2열, 바/커넥터 축소 */
  .conwhat-diagram {
    width: calc(100% - 48rem);
    margin-top: 48rem;
  }
  .conwhat-diagram__box {
    padding: 40rem 40rem;
  }
  .conwhat-diagram__box .icons {
    flex-wrap: wrap;
    gap: 24rem 4rem;
    width: 100%;
    padding: 0 16rem;
  }
  .conwhat-diagram__box .icons li {
    width: calc(50% - 2rem);
    padding: 0;
  }
  .conwhat-diagram__box .icons img {
    width: 72rem;
  }
  .conwhat-diagram__link {
    height: 56rem;
  }
  .conwhat-diagram__bar {
    width: 100%;
    height: 64rem;
    border-radius: 16rem;
  }
  .conwhat-diagram__bar strong {
    font-size: var(--type-b1); /* 모바일 20 */
  }
  /* WHY — 2열 (M 시안: 아이콘 120, 행/열 간격 24) */
  .conwhy-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24rem;
    width: calc(100% - 48rem);
    margin-top: 48rem;
  }
  .conwhy-list li {
    padding: 0;
  }
  .conwhy-list .icon {
    width: 120rem;
  }
  /* CONNECTION MODELS — 전폭 축소 테이블 + ⓘ 팝업 (범례·Connect Here 라벨 생략) */
  .conmodel-cont {
    width: calc(100% - 48rem);
    margin-top: 40rem;
  }
  .conmodel-cont__legend {
    display: none;
  }
  .conmodel-tbl thead th {
    position: relative;
    padding: 24rem 8rem;
  }
  .conmodel-tbl thead .flag {
    font-size: 14rem;
  }
  .conmodel-tbl thead .name {
    margin-top: 4rem;
    font-size: 16rem;
    font-weight: var(--font-weight-medium); /* 모바일은 세미볼드 아님 */
  }
  .conmodel-tbl thead .info {
    display: inline-block;
    width: 20rem;
    height: 20rem;
    margin-top: 12rem;
    background: url("../images/ico-sol-con-info.svg") center / contain no-repeat;
    filter: grayscale(1) opacity(0.55); /* 기본 회색, 열리면 파랑 */
  }
  .conmodel-tbl thead th.is-open .info {
    filter: none;
  }
  .conmodel-tbl thead .detail {
    display: none;
    position: absolute;
    left: 50%;
    top: calc(100% - 4rem);
    z-index: 5;
    width: 282rem;
    padding: 28rem 36rem;
    background: var(--color-bg-default-white);
    border-radius: 4rem;
    box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.18);
    text-align: left;
    transform: translateX(-50%);
  }
  .conmodel-tbl thead th.is-open .detail {
    display: block;
  }
  /* 좌/우 열 팝업은 테이블 중앙 쪽으로 보정 + 꼬리는 열 중앙 유지 */
  .conmodel-tbl thead .detail::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -6rem;
    width: 12rem;
    height: 12rem;
    background: var(--color-bg-default-white);
    transform: translateX(-50%) rotate(45deg);
  }
  .conmodel-tbl thead th:nth-child(2) .detail {
    transform: translateX(calc(-50% + 86rem));
  }
  .conmodel-tbl thead th:nth-child(2) .detail::before {
    left: calc(50% - 86rem);
  }
  .conmodel-tbl thead th:nth-child(4) .detail {
    transform: translateX(calc(-50% - 86rem));
  }
  .conmodel-tbl thead th:nth-child(4) .detail::before {
    left: calc(50% + 86rem);
  }
  .conmodel-tbl thead .aud {
    margin-top: 0;
    font-size: 16rem;
    font-weight: var(--font-weight-semibold);
    line-height: var(--lh-body);
    color: var(--color-text-default-highest);
  }
  .conmodel-tbl thead .aud br {
    display: none; /* PC 강제 줄바꿈 해제 — 팝업 폭에 맞게 랩 */
  }
  .conmodel-tbl thead .desc {
    margin-top: 12rem;
    font-size: 14rem;
  }
  .conmodel-tbl thead .detail .close {
    display: block;
    position: absolute;
    top: 15rem;
    right: 15rem;
    width: 20rem;
    height: 20rem;
    background: url("../images/ico-x-20.svg") center / contain no-repeat;
  }
  .conmodel-tbl tbody th {
    padding: 16rem 4rem;
    font-size: 14rem;
  }
  .conmodel-tbl tbody th .icon {
    width: 24rem;
    height: 24rem;
  }
  .conmodel-tbl tbody td {
    padding: 16rem 4rem;
    font-size: 14rem;
  }
  .conmodel-tbl tbody td .note {
    margin-top: 4rem;
  }
  .conmodel-tbl tbody td.is-connect {
    border-top: 1px solid var(--color-line-medium); /* 파란 점선 경계는 PC 전용 */
  }
  .conmodel-tbl tbody td .connect-label {
    display: none;
  }
  /* HOW — 카드 가로 스크롤 (1장 + 다음 카드 비침) */
  .conhow-flow {
    overflow-x: auto;
    width: 100%;
    margin-top: 48rem;
  }
  .conhow-list {
    display: flex;
    gap: 24rem;
    width: max-content;
    padding: 0 24rem;
  }
  .conhow-list li {
    flex: 0 0 322rem;
    min-height: 360rem;
    padding: 60rem 40rem;
  }
  .conhow-feedback {
    width: 1432rem; /* 카드 4장(322×4) + 갭(24×3) + 좌우 여백(48) */
    padding: 0 24rem;
    margin-top: 24rem;
  }
  /* TECH — 카드 가로 스크롤 + 로고 2열 */
  .contech-list {
    display: flex;
    overflow-x: auto;
    gap: 24rem;
    width: 100%;
    padding: 0 24rem;
    margin-top: 48rem;
  }
  .contech-list li {
    flex: 0 0 312rem;
  }
  .contech-logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 20rem;
    width: calc(100% - 48rem);
    margin-top: 40rem;
  }
  /* REFERENCES — 카드 가로 스크롤 (보더 카드형) */
  .conref-list {
    display: flex;
    overflow-x: auto;
    gap: 24rem;
    width: 100%;
    padding: 0 24rem;
    margin-top: 48rem;
  }
  .conref-list li {
    flex: 0 0 312rem;
    overflow: hidden;
    background: var(--color-bg-default-white);
    border: 1px solid var(--color-line-low); /* #e8e8e8 */
    border-radius: 16rem;
  }
  .conref-list .img {
    aspect-ratio: 312 / 208;
  }
  .conref-list .txt {
    padding: 40rem;
  }
  .conref-list .desc {
    margin-top: 16rem;
  }
  /* CTA 배너 — 모바일 전용 크롭 (M 시안 8436:6637) */
  .solcta-area--con {
    background-image: url("../images/img-sol-con-cta-m.jpg");
  }
}

/* === FO-SOL-02-02-001 — ODM/OEM === */
/* 히어로 — ODM 변형 배경 */
.solhero-area--odm {
  background-image: url("../images/img-sol-odm-hero.jpg");
  background-position: center;
}
.solhero-area--odm::before {
  background: rgba(0, 0, 0, 0.3);
}
.odmpillar-area,
.odmtrust-area {
  padding: 120rem 0 160rem;
}
/* CORE STRATEGIC PILLARS — 번호 타이틀(좌) + 콘텐츠(우) 4행 */
.odmpillar-list {
  display: flex;
  flex-direction: column;
  gap: 80rem;
  width: 1440rem;
  margin: 80rem auto 0;
}
.odmpillar-list > li {
  display: flex;
  align-items: flex-start; /* 타이틀이 행 높이만큼 늘어나지 않게 (스크롤 고정 구간 계산) */
  gap: 120rem;
}
.odmpillar-list__tit {
  flex-shrink: 0;
  width: 489rem;
}
.odmpillar-list__tit .num {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  line-height: var(--lh-body-tight);
  color: var(--color-text-point-default); /* #1475e7 */
}
.odmpillar-list__tit .tit {
  display: block;
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-highest);
}
.odmpillar-list__cont {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 40rem;
}
/* 01 — 파란 카드 2종 */
.odmpillar-box {
  display: flex;
  gap: 24rem;
}
.odmpillar-box__card {
  flex: 1;
  padding: 40rem;
  background: #e7f2ff;
  border: 1px solid #d3e7ff;
  border-radius: var(--radius-600); /* 24 */
}
.odmpillar-box__card .icon {
  display: block;
  width: 32rem;
  height: 32rem;
}
.odmpillar-box__card .icon--equip {
  background: url("../images/ico-sol-odm-equip.svg") center / contain no-repeat;
}
.odmpillar-box__card .icon--expand {
  background: url("../images/ico-sol-odm-expand.svg") center / contain no-repeat;
}
.odmpillar-box__card .tit {
  display: block;
  margin-top: 16rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-highest);
}
.odmpillar-box__card .desc,
.odmpillar-box__card .note {
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body);
  color: var(--color-text-default-medium);
}
/* 01 — 공장 카드 (이미지 + 스펙) */
.odmpillar-fac {
  display: flex;
  overflow: hidden;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-line-low); /* #e8e8e8 */
  border-radius: 16rem;
}
.odmpillar-fac .img {
  display: block;
  flex-shrink: 0;
  width: 407rem;
}
.odmpillar-fac .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.odmpillar-fac .txt {
  flex: 1;
  padding: 40rem;
}
.odmpillar-fac .tit {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-highest);
}
.odmpillar-fac .loc {
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body);
  color: var(--color-text-default-highest);
}
.odmpillar-fac .spec {
  display: grid;
  grid-template-columns: 130rem 1fr;
  gap: 12rem;
  margin-top: 40rem;
}
.odmpillar-fac .spec dt {
  position: relative;
  padding-left: 16rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body);
  color: var(--color-text-default-highest);
}
/* 항목 불릿 점 */
.odmpillar-fac .spec dt::before {
  content: "";
  position: absolute;
  left: 2rem;
  top: 10rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--color-text-default-highest);
}
.odmpillar-fac .spec dd {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body);
  color: var(--color-text-default-medium);
}
/* 02~04 — 이미지 카드 */
.odmpillar-cards {
  display: flex;
  gap: 40rem;
}
.odmpillar-cards > li {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 396rem;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-line-low);
  border-radius: 16rem;
}
.odmpillar-cards .img {
  display: block;
  aspect-ratio: 396 / 228;
}
.odmpillar-cards .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.odmpillar-cards .txt {
  flex: 1;
  padding: 40rem;
}
.odmpillar-cards .tit {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-highest);
}
.odmpillar-cards .desc {
  margin-top: 16rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body);
  color: var(--color-text-default-medium);
}
.odmpillar-cards--wide > li {
  width: 100%;
}
.odmpillar-cards--wide .img {
  aspect-ratio: 831 / 320;
}
/* TRUST & COMPLIANCE — 테스트 랩 카드 6종 */
.odmtrust-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rem;
  width: 1440rem;
  margin: 80rem auto 0;
}
.odmtrust-list li {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-line-low);
  border-radius: 16rem;
}
.odmtrust-list .img {
  display: block;
  aspect-ratio: 464 / 309;
}
.odmtrust-list .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.odmtrust-list .txt {
  flex: 1;
  padding: 40rem;
}
.odmtrust-list .tit {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-highest);
}
.odmtrust-list .desc {
  margin-top: 16rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body);
  color: var(--color-text-default-medium);
}

@media (max-width: 1024px) {
  /* === FO-SOL-02-02-001 — ODM/OEM (모바일) === */
  .odmpillar-area,
  .odmtrust-area {
    padding: 80rem 0 100rem;
  }
  /* PILLARS — 세로 스택 (M 시안 8168:846) */
  .odmpillar-list {
    gap: 100rem;
    width: calc(100% - 48rem);
    margin-top: 100rem;
  }
  .odmpillar-list > li {
    flex-direction: column;
    gap: 40rem;
  }
  .odmpillar-list__tit {
    width: 100%;
  }
  .odmpillar-list__tit .num {
    font-size: 32rem; /* 모바일도 32 고정 (h4 토큰 28 미적용) */
  }
  .odmpillar-box {
    flex-direction: column;
    gap: 24rem;
  }
  .odmpillar-fac {
    flex-direction: column;
  }
  .odmpillar-fac .img {
    width: 100%;
    aspect-ratio: 342 / 228;
  }
  .odmpillar-fac .txt {
    padding: 40rem;
  }
  .odmpillar-cards {
    flex-direction: column;
    gap: 40rem;
  }
  .odmpillar-cards > li {
    width: 100%;
  }
  /* TRUST — 카드 가로 스크롤 (M 시안: 1장 + 비침) */
  .odmtrust-list {
    display: flex;
    overflow-x: auto;
    gap: 24rem;
    width: 100%;
    padding: 0 24rem;
    margin-top: 48rem;
  }
  .odmtrust-list li {
    flex: 0 0 312rem;
  }
}

/* === FO-ETC-05-01-001 — 쿠키 동의 레이어 팝업 (피그마 7517:3320) === */
.cookie-pop {
  position: fixed;
  right: 40rem;
  bottom: 40rem;
  z-index: 9000;
  width: 620rem;
  padding: 40rem;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-line-low); /* #e8e8e8 */
  border-radius: var(--radius-600); /* 24 */
  max-height: calc(100vh - 80rem); /* 상하 여백 40씩 */
  max-height: calc(100dvh - 80rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cookie-pop.is-hide {
  display: none;
}
.cookie-pop__desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium);
}
.cookie-pop__btns {
  display: flex;
  align-items: center;
  gap: 32rem;
  margin-top: 24rem;
}
/* 텍스트 버튼 (Reject All · Cookies Setting) */
.cookie-pop__txtbtn {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body);
  color: var(--color-text-default-highest);
}
.cookie-pop__txtbtn i {
  width: 7rem;
  height: 7rem;
  border-top: 2px solid currentColor; /* 체브론 › */
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.cookie-pop__txtbtn:hover,
.cookie-pop__txtbtn:focus-visible {
  color: var(--color-text-point-default); /* #1475e7 */
}
/* 닫기 */
.cookie-pop__close {
  position: absolute;
  top: 24rem;
  right: 24rem;
  width: 24rem;
  height: 24rem;
  background-color: var(--color-ic-black);
  -webkit-mask: url("../images/ico-x-20.svg") center / contain no-repeat;
  mask: url("../images/ico-x-20.svg") center / contain no-repeat;
}
.cookie-pop__close:hover,
.cookie-pop__close:focus-visible {
  background-color: var(--color-ic-point); /* #1475e7 */
}

@media (max-width: 1024px) {
  /* 쿠키 팝업 — 하단 풀폭. 넓은 모바일 화면(폴드·가로·태블릿)에서 커지지 않게 390 시안 크기를 상한으로(--u), 최대 폭 480 */
  .cookie-pop {
    --u: min(1rem, 1px);
    right: calc(16 * var(--u));
    bottom: calc(16 * var(--u));
    left: calc(16 * var(--u));
    width: auto;
    max-width: 480px;
    margin-left: auto;
    max-height: calc(100vh - 32 * var(--u)); /* 낮은 화면(가로 모드)에선 화면 안 + 내부 스크롤 */
    max-height: calc(100dvh - 32 * var(--u));
    padding: calc(32 * var(--u)) calc(24 * var(--u));
    border-radius: calc(24 * var(--u));
  }
  .cookie-pop__desc {
    width: calc(100% - 32 * var(--u)); /* 우상단 닫기(X)와 겹침 방지 */
    font-size: calc(16 * var(--u));
  }
  .cookie-pop__btns {
    flex-wrap: wrap;
    gap: calc(16 * var(--u)) calc(24 * var(--u));
    margin-top: calc(24 * var(--u));
  }
  .cookie-pop__txtbtn {
    gap: calc(8 * var(--u));
    font-size: calc(16 * var(--u));
  }
  .cookie-pop__txtbtn i {
    width: calc(7 * var(--u));
    height: calc(7 * var(--u));
  }
  .cookie-pop__close {
    top: calc(24 * var(--u));
    right: calc(24 * var(--u));
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }
  .cookie-pop .btn--h48 {
    gap: calc(12 * var(--u));
    height: calc(48 * var(--u));
    min-width: calc(80 * var(--u));
    padding: 0 calc(24 * var(--u));
    font-size: calc(16 * var(--u));
  }
  .cookie-pop .btn--h48 .btn__icon {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
  }
}

/* === FO-DIS-01-01-001 — Who We Are (피그마 7863:11695 / M 7890:17261) === */
/* 히어로 — Who We Are 변형 배경 (dim은 이미지에 포함) */
.solhero-area--dis {
  background-image: url("../images/img-dis-hero.jpg");
  background-position: center;
}
.solhero-area--dis::before {
  display: none;
}
/* 공통 섹션 타이틀 — 라벨 32 + (헤딩 64 + 설명 18) */
.dis-sec-tit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40rem;
  padding: 120rem 0 100rem;
  text-align: center;
}
.dis-sec-tit .label {
  display: block; /* em 인라인 → 라인하이트 적용 */
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-point-default); /* #1475e7 */
}
.dis-sec-tit__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
}
.dis-sec-tit h2 {
  font-family: var(--font-family-eng);
  font-size: var(--type-h2); /* 64 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.dis-sec-tit p {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
.dis-sec-tit--who p {
  width: 1440rem;
}
.dis-sec-tit--partner {
  padding-bottom: 160rem;
}
.dis-sec-tit--partner h2 {
  white-space: nowrap; /* 시안 1줄 — 브라우저 Inter 자간이 넓어 1250 초과 시에도 줄바꿈 방지 */
}
.dis-sec-tit--partner p {
  width: 1250rem;
}

/* WHO WE ARE — 여정 3단계 (좌 타이틀 489 + 우 콘텐츠 831) */
.diswho-area {
  padding-bottom: 100rem;
}
.diswho-list {
  display: flex;
  flex-direction: column;
  gap: 80rem;
  width: 1440rem;
  margin: 80rem auto 0;
}
.diswho-list > li {
  display: flex;
  gap: 120rem;
  position: relative;
  padding-bottom: 120rem;
}
.diswho-list > li:last-child {
  padding-bottom: 0;
}
/* 장식 — 우상→좌하 대각 그라데이션 면 (프로토 7983:9624)
   래퍼(100vh)를 ScrollTrigger로 섹션 구간 동안 고정하고, 안쪽 삼각형 높이를 스크롤에 따라 21.76vh→100vh로 키움 (pages.js) */
.diswho-area {
  position: relative;
}
.diswho-area__deco {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0; /* 콘텐츠 뒤 — pin(fixed) 상태에선 multiply가 콘텐츠와 섞이지 않아 위에 올리면 텍스트가 흐려짐 */
  width: 100%;
  height: 100vh;
  pointer-events: none;
}
.diswho-area__deco span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 21.76vh; /* 초기 235/1080 */
  background: url("../images/img-dis-deco.svg") center / 100% 100% no-repeat;
  opacity: 0.7;
}
.dis-sec-tit--who,
.diswho-list {
  position: relative;
  z-index: 1;
}
.diswho-list__tit {
  flex-shrink: 0;
  position: relative;
  width: 489rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.diswho-list__cont {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  position: relative;
  width: 831rem;
}
.diswho-list__cont .sub-tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
}
.diswho-list__cont .desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-medium);
}

/* 다이어그램 공통 — 아이콘 원 + 라벨 노드 */
.diswho-diagram {
  position: relative;
}
.diswho-diagram .ico {
  display: block;
  width: 120rem;
  height: 120rem;
  background: center / contain no-repeat;
}
.diswho-diagram .ico--hardware {
  background-image: url("../images/ico-dis-hardware.svg");
}
.diswho-diagram .ico--smartlock {
  background-image: url("../images/ico-dis-smartlock.svg");
}
.diswho-diagram .ico--software {
  background-image: url("../images/ico-dis-software.svg");
}
.diswho-diagram .ico--cloud {
  background-image: url("../images/ico-dis-cloud.svg");
}
.diswho-diagram .ico--connectivity {
  background-image: url("../images/ico-dis-connectivity.svg");
}
.diswho-diagram .ico--open-eco {
  background-image: url("../images/ico-dis-open-eco.svg");
}
/* Matter — 흰 원 SVG 위에 래스터 로고(51×52) 겹침 */
.diswho-diagram .ico--matter {
  background: url("../images/ico-dis-matter.png") center / 51rem 52rem no-repeat, url("../images/ico-dis-circle.svg") center / contain no-repeat;
}
.diswho-diagram .ico--cloud-svc {
  background-image: url("../images/ico-dis-cloud-svc.svg");
}
.diswho-diagram .ico--global {
  background-image: url("../images/ico-dis-global.svg");
}
.diswho-diagram .ico--customers {
  background-image: url("../images/ico-dis-customers.svg");
}
.diswho-diagram .ico--smart-access,
.diswho-diagram .ico--solity {
  width: 162rem;
  height: 162rem;
  background-image: url("../images/ico-dis-smart-access.svg");
}
.diswho-diagram .ico--solity {
  background-image: url("../images/ico-dis-solity.svg");
}
/* STEP 1 — 아이콘 2 + 우향 화살표 (시안: 아이콘 168 셀, 좌 151 오프셋) */
.diswho-diagram--step1 {
  display: flex;
  align-items: flex-start;
  padding: 40rem 0 0 151rem;
}
.diswho-diagram--step1 .step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
  width: 168rem;
  padding: 0 24rem;
  text-align: center;
}
.diswho-diagram--step1 .step-item span {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-high); /* #373839 */
}
.diswho-diagram--step1 .arrow {
  width: 54rem;
  height: 23rem;
  margin: 49rem 55rem 0; /* 아이콘 원 세로 중앙 · 셀 사이(164) 가운데 */
  background: url("../images/ico-dis-arrow-right.svg") center / contain no-repeat;
}
/* STEP 2·3 — 절대 배치 노드 (left = 원 중심 x) */
.diswho-diagram--step2 {
  height: 481rem;
}
.diswho-diagram--step3 {
  height: 771rem;
}
.diswho-diagram .node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
}
.diswho-diagram .node span {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
  white-space: nowrap;
}
.diswho-diagram .node--top {
  flex-direction: column-reverse; /* 라벨 위 */
}
.diswho-diagram .node--center {
  gap: 12rem;
}
/* 연결선 — 1px 점선 #d0d1d2, 모서리 20 */
.diswho-diagram .line {
  position: absolute;
  border: 1px dashed var(--color-line-medium); /* #d0d1d2 */
}
.diswho-diagram .line--top {
  left: 216rem;
  top: 187rem;
  width: 400rem;
  height: 186rem;
  border-top: 0;
  border-radius: 0 0 20rem 20rem;
}
.diswho-diagram .line--mid {
  left: 416rem;
  top: 187rem;
  width: 0;
  height: 186rem;
  border-width: 0 0 0 1px;
}
.diswho-diagram .line--bl {
  left: 301rem;
  top: 447rem;
  width: 115rem;
  height: 84rem;
  border-width: 0 1px 1px 0;
  border-radius: 0 0 20rem 0;
}
.diswho-diagram .line--br {
  left: 416rem;
  top: 447rem;
  width: 77rem;
  height: 84rem;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 20rem;
}
/* 노드 좌표 — STEP 2 */
.diswho-diagram--step2 .node--software {
  left: 216rem;
  top: 42rem;
}
.diswho-diagram--step2 .node--cloud {
  left: 416rem;
  top: 42rem;
}
.diswho-diagram--step2 .node--connectivity {
  left: 616rem;
  top: 42rem;
}
.diswho-diagram--step2 .node--center {
  left: 416rem;
  top: 285rem;
}
/* 노드 좌표 — STEP 3 */
.diswho-diagram--step3 .node--openeco {
  left: 216rem;
  top: 110rem;
}
.diswho-diagram--step3 .node--matter {
  left: 416rem;
  top: 20rem;
}
.diswho-diagram--step3 .node--cloudsvc {
  left: 616rem;
  top: 110rem;
}
.diswho-diagram--step3 .node--center {
  left: 416rem;
  top: 285rem;
}
.diswho-diagram--step3 .node--global {
  left: 297rem;
  top: 467rem;
}
.diswho-diagram--step3 .node--customers {
  left: 537rem;
  top: 467rem;
}
.diswho-diagram--step3 .arrow-down {
  position: absolute;
  left: 416rem;
  top: 602rem;
  width: 23rem;
  height: 54rem;
  background: url("../images/ico-dis-arrow-down.svg") center / contain no-repeat;
  transform: translateX(-50%);
}
.diswho-diagram--step3 .result {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 174rem;
  top: 687rem;
  width: 484rem;
  height: 64rem;
  padding: 0 60rem;
  border-radius: 40rem;
  background: var(--color-text-default-high); /* #373839 */
  font-family: var(--font-family-kor);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body-tight);
  color: var(--color-bg-secondary-light-level-1);
  text-align: center;
}

/* WHY SOLITY — 롤링 배너 + 문단 + 카드 4 + 이미지 행 2 */
.diswhy-area {
  padding-bottom: 40rem;
}
/* 배너 — 이미지 4장 자동 롤링, 텍스트는 고정 오버레이 */
.diswhy-banner {
  position: relative;
  width: 1440rem;
  height: 540rem;
  margin: 80rem auto 0;
}
.diswhy-banner__img {
  position: absolute;
  inset: 0;
  border-radius: 12rem;
  overflow: hidden;
}
.diswhy-banner__img .swiper,
.diswhy-banner__img .swiper-slide {
  height: 100%;
}
.diswhy-banner__img .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* dim — 좌 60% → 우 10% 그라데이션 */
.diswhy-banner__img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));
  pointer-events: none;
}
.diswhy-banner__nav {
  display: none; /* PC는 자동 롤링만 — 화살표는 모바일 전용 */
}
.diswhy-banner__txt {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  position: absolute;
  left: 80rem;
  top: 166rem;
  z-index: 2;
  width: 668rem;
}
.diswhy-banner__txt .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-white);
  white-space: nowrap; /* 시안 1줄 (668 폭 초과분은 배너 안에서 흐름) */
}
.diswhy-banner__txt .desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-white);
}
/* 문단 */
.diswhy-desc {
  width: 1440rem;
  margin: 80rem auto 0;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
  text-align: center;
}
/* 역량 카드 — 2열 (704×309) */
.diswhy-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32rem;
  width: 1440rem;
  margin: 80rem auto 0;
}
.diswhy-cards li {
  padding: 40rem;
  background: var(--color-bg-secondary-light-level-1); /* #e7f2ff */
  border: 1px solid var(--color-bg-secondary-light-level-2); /* #d3e7ff */
  border-radius: var(--radius-600); /* 24 */
}
.diswhy-cards .ico {
  display: block;
  width: 120rem;
  height: 120rem;
  background: center / contain no-repeat;
}
.diswhy-cards .ico--why1 {
  background-image: url("../images/ico-dis-why1.svg");
}
.diswhy-cards .ico--why2 {
  background-image: url("../images/ico-dis-why2.svg");
}
.diswhy-cards .ico--why3 {
  background-image: url("../images/ico-dis-why3.svg");
}
.diswhy-cards .ico--why4 {
  background-image: url("../images/ico-dis-why4.svg");
}
.diswhy-cards .tit {
  display: block;
  margin-top: 16rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: #1a1a1a;
}
.diswhy-cards .desc {
  margin-top: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: #727272;
}
/* 이미지 + 텍스트 행 (708 + 64 + 668) */
.diswhy-feat {
  display: flex;
  align-items: center;
  gap: 64rem;
  width: 1440rem;
  margin: 120rem auto 0;
}
.diswhy-feat--rev {
  flex-direction: row-reverse;
}
.diswhy-feat .img {
  flex-shrink: 0;
  display: block;
  width: 708rem;
  height: 472rem;
  border-radius: 12rem;
  overflow: hidden;
}
.diswhy-feat .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.diswhy-feat .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24rem;
  width: 668rem;
}
.diswhy-feat .tit {
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-highest);
}
.diswhy-feat .desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
}

/* GLOBAL PARTNERSHIP — 메인 파트너 로고 목록 재사용 (폭 1440 · 5×2) */
.dispartner-area {
  padding-bottom: 160rem;
}
.partner-list--dis {
  width: 1440rem;
  margin-top: 0;
}
/* 로고별 사이즈 — Who We Are 시안(7890:17187) 실측, 전용 PNG(img-dis-partner1~10) */
.partner-list--dis .partner-list__row:nth-child(1) li:nth-child(5n + 1) img {
  width: 210rem;
}
.partner-list--dis .partner-list__row:nth-child(1) li:nth-child(5n + 2) img {
  width: 202rem;
}
.partner-list--dis .partner-list__row:nth-child(1) li:nth-child(5n + 3) img {
  width: 162rem;
}
.partner-list--dis .partner-list__row:nth-child(1) li:nth-child(5n + 4) img {
  width: 165rem;
}
.partner-list--dis .partner-list__row:nth-child(1) li:nth-child(5n + 5) img {
  width: 120rem;
}
.partner-list--dis .partner-list__row:nth-child(2) li:nth-child(5n + 1) img {
  width: 174rem;
}
.partner-list--dis .partner-list__row:nth-child(2) li:nth-child(5n + 2) img {
  width: 147rem;
}
.partner-list--dis .partner-list__row:nth-child(2) li:nth-child(5n + 3) img {
  width: 135rem;
}
.partner-list--dis .partner-list__row:nth-child(2) li:nth-child(5n + 4) img {
  width: 242rem;
}
.partner-list--dis .partner-list__row:nth-child(2) li:nth-child(5n + 5) img {
  width: 263rem; /* 시안 이미지 312 중 셀(262)에 잘려 보이는 폭 — export PNG가 이 폭 */
}
/* CTA 배너 — Who We Are 변형 배경 (dim은 이미지에 포함) */
.solcta-area--dis {
  background-image: url("../images/img-dis-cta.jpg");
}
.solcta-area--dis::before {
  display: none;
}

@media (max-width: 1024px) {
  /* === FO-DIS-01-01-001 — Who We Are (모바일, M 시안 7890:17261) === */
  .dis-sec-tit {
    padding: 80rem 24rem 100rem;
  }
  .dis-sec-tit .label {
    font-size: var(--type-h4); /* 28 */
  }
  .dis-sec-tit h2 {
    font-size: var(--type-h2); /* 40 */
  }
  .dis-sec-tit--who p,
  .dis-sec-tit--partner p {
    width: 100%;
  }
  .dis-sec-tit--partner h2 {
    white-space: normal;
  }
  .dis-sec-tit--partner {
    padding-bottom: 100rem;
  }
  .dis-sec-tit p br,
  .dis-sec-tit h2 br,
  .solhero-area--dis .solhero-area__desc p br {
    display: none;
  }
  /* WHO — 세로 스택 (장식 삼각형 고정 모션은 PC와 동일하게 유지) */
  .diswho-list {
    gap: 0;
    width: 100%;
    margin-top: 0;
  }
  .diswho-list > li {
    flex-direction: column;
    gap: 32rem;
    padding: 0 24rem 80rem;
  }
  .diswho-list__tit {
    width: 100%;
    font-size: 32rem;
  }
  .diswho-list__cont {
    width: 100%;
  }
  .diswho-list > li:first-child .diswho-diagram {
    margin-top: 16rem; /* STEP1 텍스트↔다이어그램 40 (gap 24 + 16) */
  }
  .diswho-list__cont .sub-tit {
    font-size: 20rem; /* 모바일도 20 고정 (b2 토큰 18 미적용) */
  }
  .diswho-list__cont .desc {
    font-size: var(--type-b3); /* 18 */
  }
  .diswho-list__cont .desc br {
    display: none;
  }
  /* STEP 1 — 아이콘 양끝, 화살표 가운데 */
  .diswho-diagram--step1 {
    justify-content: space-between;
    padding: 0;
  }
  .diswho-diagram--step1 .step-item {
    width: 120rem;
    padding: 0;
  }
  .diswho-diagram--step1 .arrow {
    margin: 49rem auto 0;
  }
  /* STEP 2·3 — 원 80 / 중앙 162, 390 시안 좌표 (STEP1 아이콘은 120 유지) */
  .diswho-diagram--step2 .ico,
  .diswho-diagram--step3 .ico {
    width: 80rem;
    height: 80rem;
  }
  .diswho-diagram .ico--smart-access,
  .diswho-diagram .ico--solity {
    width: 162rem;
    height: 162rem;
  }
  .diswho-diagram .ico--matter {
    background-size: 34rem 35rem, contain;
  }
  .diswho-diagram--step2 {
    height: 446rem;
  }
  .diswho-diagram--step3 {
    height: 736rem;
  }
  .diswho-diagram--step2 .line--top {
    left: 50rem;
    top: 150rem;
    width: 242rem;
    height: 153rem;
  }
  .diswho-diagram--step2 .line--mid {
    left: 172rem;
    top: 150rem;
    height: 153rem;
  }
  .diswho-diagram--step2 .node--software {
    left: 50rem;
    top: 40rem;
  }
  .diswho-diagram--step2 .node--cloud {
    left: 172rem;
    top: 40rem;
  }
  .diswho-diagram--step2 .node--connectivity {
    left: 292rem;
    top: 40rem;
  }
  .diswho-diagram--step2 .node--center {
    left: 172rem;
    top: 215rem;
  }
  .diswho-diagram--step3 .line--top {
    left: 63rem;
    top: 242rem;
    width: 216rem;
    height: 131rem;
  }
  .diswho-diagram--step3 .line--mid {
    left: 171rem;
    top: 152rem;
    height: 221rem;
  }
  .diswho-diagram--step3 .line--bl {
    left: 72rem;
    top: 447rem;
    width: 99rem;
    height: 60rem;
  }
  .diswho-diagram--step3 .line--br {
    left: 171rem;
    top: 447rem;
    width: 99rem;
    height: 60rem;
  }
  .diswho-diagram--step3 .node--openeco {
    left: 63rem;
    top: 110rem;
  }
  .diswho-diagram--step3 .node--matter {
    left: 171rem;
    top: 20rem;
  }
  .diswho-diagram--step3 .node--cloudsvc {
    left: 279rem;
    top: 110rem;
  }
  .diswho-diagram--step3 .node--center {
    left: 171rem;
    top: 285rem;
  }
  .diswho-diagram--step3 .node--global {
    left: 72rem;
    top: 467rem;
  }
  .diswho-diagram--step3 .node--customers {
    left: 270rem;
    top: 467rem;
  }
  .diswho-diagram--step3 .arrow-down {
    left: 171rem;
    top: 564rem;
  }
  .diswho-diagram--step3 .result {
    left: 10rem;
    top: 632rem;
    width: 322rem;
    height: 84rem;
    font-size: var(--type-b3); /* 18 */
  }
  /* WHY — 배너 이미지(342×228) + 텍스트 하단 스택, 화살표 노출 */
  .diswhy-area {
    padding-bottom: 100rem;
  }
  .diswhy-banner {
    width: calc(100% - 48rem);
    height: auto;
    margin-top: 0;
  }
  .diswhy-banner__img {
    position: relative;
    aspect-ratio: 342 / 228;
  }
  .diswhy-banner__img::after {
    background: rgba(0, 0, 0, 0.3);
  }
  .diswhy-banner__nav {
    display: block;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 32rem;
    height: 32rem;
    border-radius: 50%;
    background: var(--color-bg-default-white);
    transform: translateY(-50%);
  }
  .diswhy-banner__nav::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8rem;
    height: 8rem;
    border-top: 2px solid var(--color-ic-black); /* 체브론 */
    border-right: 2px solid var(--color-ic-black);
    transform: translate(-70%, -50%) rotate(45deg);
  }
  .diswhy-banner__nav--prev {
    left: 20rem;
  }
  .diswhy-banner__nav--prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
  }
  .diswhy-banner__nav--next {
    right: 20rem;
  }
  .diswhy-banner__txt {
    gap: 16rem;
    position: static;
    width: 100%;
    margin-top: 32rem;
  }
  .diswhy-banner__txt .tit {
    font-size: var(--type-h4); /* 28 */
    line-height: var(--lh-heading); /* 1.3 */
    color: var(--color-text-default-highest);
    white-space: normal;
  }
  .diswhy-banner__txt .desc {
    font-size: var(--type-b4); /* 16 */
    color: var(--color-text-default-highest);
  }
  .diswhy-banner__txt .desc br {
    display: none;
  }
  .diswhy-desc {
    width: calc(100% - 48rem);
    margin-top: 80rem;
    text-align: left;
  }
  .diswhy-desc br {
    display: none;
  }
  /* 카드 — 가로 스크롤 (312 + gap 20) */
  .diswhy-cards {
    display: flex;
    overflow-x: auto;
    gap: 20rem;
    width: 100%;
    padding: 0 24rem;
    margin-top: 40rem;
  }
  .diswhy-cards li {
    flex: 0 0 312rem;
  }
  .diswhy-cards .ico {
    margin: 0 auto;
  }
  .diswhy-cards .tit {
    font-size: 20rem; /* 모바일도 20 고정 */
  }
  /* 이미지 행 — 세로 스택 (이미지 342×228 + 텍스트) */
  .diswhy-feat,
  .diswhy-feat--rev {
    flex-direction: column;
    align-items: stretch;
    gap: 32rem;
    width: calc(100% - 48rem);
    margin-top: 80rem;
  }
  .diswhy-feat .img {
    width: 100%;
    height: auto;
    aspect-ratio: 342 / 228;
  }
  .diswhy-feat .txt {
    gap: 16rem;
    width: 100%;
  }
  .diswhy-feat .tit {
    font-size: var(--type-h4); /* 28 */
  }
  .diswhy-feat .desc {
    font-size: var(--type-b4); /* 16 */
  }
  .diswhy-feat .btn {
    gap: var(--spacing-300); /* h48 규격 */
    height: 48rem;
    padding: 0 var(--padding-600);
    font-size: var(--type-b4);
  }
  .diswhy-feat .btn .btn__icon {
    width: 16rem;
    height: 16rem;
  }
  /* 파트너 — 메인 모바일 루핑 재사용, 셀 174×100 gap 12 */
  .dispartner-area {
    padding-bottom: 100rem;
  }
  .partner-list--dis {
    width: 100%;
    margin-top: 0;
  }
  .partner-list--dis .partner-list__row {
    gap: 12rem;
  }
  .partner-list--dis .partner-list__row + .partner-list__row {
    margin-top: 12rem;
  }
  .partner-list--dis li {
    width: 174rem;
    height: 100rem;
  }
  /* 로고별 사이즈 — M 시안(7909:18301) 실측: 셀 174 기준 */
  .partner-list--dis .partner-list__row:nth-child(1) li:nth-child(5n + 1) img {
    width: 150rem;
  }
  .partner-list--dis .partner-list__row:nth-child(1) li:nth-child(5n + 2) img {
    width: 146rem;
  }
  .partner-list--dis .partner-list__row:nth-child(1) li:nth-child(5n + 3) img {
    width: 114rem;
  }
  .partner-list--dis .partner-list__row:nth-child(1) li:nth-child(5n + 4) img {
    width: 110rem;
  }
  .partner-list--dis .partner-list__row:nth-child(1) li:nth-child(5n + 5) img {
    width: 80rem;
  }
  .partner-list--dis .partner-list__row:nth-child(2) li:nth-child(5n + 1) img {
    width: 130rem;
  }
  .partner-list--dis .partner-list__row:nth-child(2) li:nth-child(5n + 2) img {
    width: 121rem;
  }
  .partner-list--dis .partner-list__row:nth-child(2) li:nth-child(5n + 3) img {
    width: 121rem;
  }
  .partner-list--dis .partner-list__row:nth-child(2) li:nth-child(5n + 4) img {
    width: 161rem;
  }
  .partner-list--dis .partner-list__row:nth-child(2) li:nth-child(5n + 5) img {
    width: 174rem;
  }
  /* CTA — M 시안 높이 500 */
  .solcta-area--dis {
    min-height: 500rem;
  }
}