/* ==========================================================
   메인 (index.html)
   - 색 · 글꼴은 1번 구역의 값만 바꾸면 페이지 전체에 적용됩니다.
   - "@media (max-width: 860px)" = 화면 폭이 860px 이하(태블릿 · 휴대폰)일 때만 적용되는 규칙입니다.
   목차
     1. 섹션 머리
     2. 링크 버튼
     3. 버튼: 초록이 왼쪽부터 차오르고 화살표가 앞으로
     4. 글 속 링크: 밑줄이 길처럼 이어짐
     5. 스크롤하면 한 줄씩 등장
     6. 로고 (글자로 그린 GIL)
     7. 헤더
     8. 메뉴에 마우스를 올리면 초록 길이 그려지고 끝에 점이 찍힘
     9. 첫 화면
     10. 첫 화면: 사장님의 일 × GIL의 일 → 손님의 반응 (연결 지도)
     11. 마우스를 올린 칸과 이어진 것만 진하게
     12. 첫 화면 배경: AI 온라인 노출 진단 화면 (가로 전체) ----------
   옅은 격자 위로 진단 빛줄기가 왼쪽→오른쪽으로 지나가며, 지나간 자리의 진단 항목에 체크 · 주의 표시가 켜집니다.
     13. 칸 아래쪽 작은 진단 막대: 빛줄기가 지나가면 점수만큼 차오름
     14. 마우스를 올린 아이콘의 한글 설명: 글자보다 위에 뜨는 작은 말풍선
     15. 흐르는 사례 띠
     16. 새 소식 띠
     17. 콘셉트
     18. 콘셉트 영상
     19. 서비스
     20. 서비스: 2열 상세
     21. 서비스: 제작 → 홍보 → 리포트 흐름
     22. 미니 그림 공통
     23. 제작: 화면이 차례로 조립됨
     24. 홍보: 채널에 차례로 불이 들어옴
     25. 리포트: 숫자가 올라가고 막대가 자람
     26. 리포트 → 다음 달 홍보로 돌아가는 고리
     27. 광고 영상
     28. 진행 과정
     29. 업종 맛보기
     30. 제작 사례
     31. 인사이트
     32. FAQ
     33. 상담
     34. 푸터
     35. 등장 효과 (한 번만, 섹션 머리에만)
     36. 반응형
     37. 1. 협회: 에디토리얼
     38. 2. 피부과: 럭셔리 미니멀
     39. 3. 협동조합: 따뜻한 텍스처
     40. 4. 소상공인: 볼드 그래픽
     41. 5. 제조: 테크니컬 모노크롬
     42. 6. IT · SaaS: 다크 글래스
     43. 하단 개인정보처리방침 · 이용약관 링크
     44. 맨 위 메뉴
     45. 페이지 머리 · 메인 첫 화면의 긴 줄기
     46. 밑줄 링크 (예: 제작 요금 보기 →)
     47. 메인 화면 게시판 최신글
     48. 첫 화면 짙은 색 (반전)
     49. 고객 정보 보호 (짙은 초록 띠, 카드 4개)
     50. 서비스 아래 AI 직원 띠
   ========================================================== */
/* =========================================================
   GIL Global Interline — 메인 페이지
   색: 종이(흰색) · 먹색 · 돌색(연회색) · 길 초록(포인트 1색)
   ========================================================= */
:root {
  --g-paper: #ffffff;   /* 바탕색 (흰색) */
  --g-stone: #f3f3ef;   /* 연한 회색 띠 배경 */
  --g-ink: #161616;   /* 기본 글자색 */
  --g-ink-2: #55554f;   /* 보조 글자색 (조금 연함) */
  --g-ink-3: #8c8c85;   /* 흐린 글자색 (날짜 · 작은 설명) */
  --g-line: #e2e2dc;   /* 구분선 색 */
  --g-road: #1f6b4e;   /* 대표 초록색 — 버튼 · 링크 · 강조가 모두 이 색 */
  --g-road-soft: #e6f0eb;   /* 연한 초록 배경 */
  --g-en: "Source Sans 3","Pretendard Variable",sans-serif;   /* 영어 글꼴 */
  --g-ko: "Pretendard Variable","Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;   /* 한글 글꼴 (기본 글꼴) */
  --g-max: 1320px;   /* 내용 최대 폭 */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--g-ko);
  background: var(--g-paper);
  color: var(--g-ink);
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: -.01em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

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

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--g-road);
  outline-offset: 3px;
}

/* 내용 영역 (가운데 정렬, 좌우 여백) */
.g-wrap {
  max-width: var(--g-max);
  margin: 0 auto;
  padding: 0 48px;
}

/* 구역 하나의 위아래 여백 */
.g-sec {
  padding: 150px 0;
}

.g-stone {
  background: var(--g-stone);
}


/* ========== 1. 섹션 머리 ========== */
.g-head {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  margin-bottom: 64px;
  align-items: start;
}

.g-head .g-en {
  font-family: var(--g-en);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--g-ink);
}

.g-head .g-en small {
  display: block;
  font-family: var(--g-ko);
  font-size: 16px;
  font-weight: 500;
  color: var(--g-road);
  letter-spacing: 0;
  margin-top: 10px;
}

.g-head h2 {
  font-size: clamp(30px,calc(3.2vw + 2px),44px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.4;
}

.g-head p {
  color: var(--g-ink-2);
  margin-top: 18px;
  max-width: 640px;
}


/* ========== 2. 링크 버튼 ========== */
/* 화살표가 붙은 글자 링크 */
.g-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 6px 0;
  border-bottom: 1px solid currentColor;
}

.g-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--g-road);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.6,.05,.25,1);
}

.g-link svg {
  width: 34px;
  height: 10px;
  transition: transform .45s cubic-bezier(.6,.05,.25,1);
}

.g-link:hover::after,.g-link:focus-visible::after {
  transform: scaleX(1);
}

.g-link:hover svg,.g-link:focus-visible svg {
  transform: translateX(8px);
}


/* ========== 3. 버튼: 초록이 왼쪽부터 차오르고 화살표가 앞으로 ========== */
/* 녹색 버튼 */
.g-btn,.g-gnav .g-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.g-btn::before,.g-gnav .g-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g-road);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.6,.05,.25,1);
}

.g-btn:hover::before,
.g-btn:focus-visible::before,
.g-gnav .g-cta:hover::before,
.g-gnav .g-cta:focus-visible::before {
  transform: scaleX(1);
}

.g-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--g-ink);
  color: #fff;
  padding: 16px 28px;
  font-weight: 600;
  font-size: 17px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  border-radius: 2px;
}

.g-btn svg {
  width: 28px;
  height: 10px;
  transition: transform .45s cubic-bezier(.6,.05,.25,1);
}

.g-btn:hover svg,.g-btn:focus-visible svg {
  transform: translateX(8px);
}

.g-btn:active {
  transform: scale(.98);
}


/* ========== 4. 글 속 링크: 밑줄이 길처럼 이어짐 ========== */
.g-tl {
  background: linear-gradient(var(--g-road),var(--g-road)) left bottom/0 1.5px no-repeat;
  padding-bottom: 2px;
  transition: background-size .45s cubic-bezier(.6,.05,.25,1),color .3s;
}

a:hover .g-tl,a:focus-visible .g-tl,.g-tl:hover {
  background-size: 100% 1.5px;
  color: var(--g-road);
}


/* ========== 5. 스크롤하면 한 줄씩 등장 ========== */
.js .g-ln {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d,0s);
}

.js .g-ln.in {
  opacity: 1;
  transform: none;
}

span.g-ln {
  display: block;
}


/* ========== 6. 로고 (글자로 그린 GIL) ========== */
/* 로고 (GIL 글자) */
.g-logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  color: var(--g-ink);
}

.g-logo b {
  font-family: var(--g-en);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -.045em;
  line-height: .82;
}

.g-logo span {
  font-family: var(--g-en);
  font-weight: 400;
  font-size: 11.6px;
  letter-spacing: .015em;
  margin-top: 5px;
  white-space: nowrap;
}


/* ========== 7. 헤더 ========== */
/* 맨 위 메뉴 줄 (스크롤해도 위에 붙어 있음) */
.g-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s,padding .3s;
}

.g-header.scrolled {
  border-color: var(--g-line);
}

/* 맨 위 메뉴 글자들 */
.g-gnav {
  display: flex;
  align-items: center;
  gap: 38px;
  font-family: var(--g-en);
  font-size: var(--g-menu-size,20px);
  font-weight: 400;
  letter-spacing: .04em;
}

/* 로고는 메뉴에 밀려 줄어들지 않게 */
.g-logo {
  flex-shrink: 0;
}

.g-gnav a {
  position: relative;
  padding: 4px 0;
  transition: color .3s;
}

.g-gnav a:hover,.g-gnav a:focus-visible {
  color: var(--g-road);
}


/* ========== 8. 메뉴에 마우스를 올리면 초록 길이 그려지고 끝에 점이 찍힘 ========== */
/* 메뉴 밑에 그려지는 별무리 선 */
.g-road-ln {
  position: absolute;
  left: -6px;
  bottom: -9px;
  width: calc(100% + 12px);
  height: 14px;
  overflow: visible;
  pointer-events: none;
}

.g-road-ln path {
  fill: none;
  stroke: var(--g-road);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset .55s cubic-bezier(.6,.05,.25,1);
}

.g-road-ln circle {
  fill: var(--g-road);
  opacity: 0;
  transform: scale(.3);
  transform-origin: 56px 6px;
  transition: opacity .2s,transform .25s;
}

.g-gnav a:hover .g-road-ln path,
.g-gnav a:focus-visible .g-road-ln path {
  stroke-dashoffset: 0;
}

.g-gnav a:hover .g-road-ln circle,
.g-gnav a:focus-visible .g-road-ln circle {
  opacity: 1;
  transform: none;
  transition-delay: .45s;
}

.g-gnav .g-cta {
  background: var(--g-ink);
  color: #fff;
  padding: 11px 22px;
  font-family: var(--g-ko);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0;
  border-radius: 2px;
}

.g-gnav .g-cta:hover,.g-gnav .g-cta:focus-visible {
  color: #fff;
}

/* 휴대폰 메뉴 버튼 (줄 세 개) */
.g-menu {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--g-line);
  background: none;
  cursor: pointer;
  color: var(--g-ink);
}

.g-menu i {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  margin: 5px auto;
  transition: .3s;
}

/* 휴대폰 메뉴가 열린 상태 */
.menu-open .g-menu i:nth-child(1) {
  transform: translateY(3.25px) rotate(45deg);
}

.menu-open .g-menu i:nth-child(2) {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* 휴대폰에서 메뉴 버튼을 누르면 열리는 메뉴 */
.g-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #fff;
  padding: 110px 24px 40px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.menu-open .g-drawer {
  opacity: 1;
  pointer-events: auto;
}

.g-drawer a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--g-line);
  font-size: 24px;
  font-weight: 600;
}

.g-drawer a {
  transition: color .3s,padding .3s;
}

.g-drawer a:hover {
  color: var(--g-road);
  padding-left: 8px;
}

.g-drawer a small {
  font-family: var(--g-en);
  font-size: 16px;
  font-weight: 400;
  color: var(--g-ink-3);
  letter-spacing: .06em;
}


/* ========== 9. 첫 화면 ========== */
.g-hero {
  padding: 170px 0 0;
  position: relative;
}

.g-hero-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: end;
}

.g-hero h1 {
  font-family: var(--g-ko);
  font-weight: 300;
  font-size: clamp(31px,calc(5.4vw + 2px),88px);
  line-height: 1.22;
  letter-spacing: -.045em;
  color: var(--g-ink);
}

.g-hero h1 em {
  font-style: normal;
  font-weight: 600;
  color: var(--g-road);
}

.g-hero h1 span {
  display: block;
  white-space: nowrap;
}

/* 별무리 길 장식 */
.g-route {
  display: block;
  width: 100%;
  height: 70px;
  margin-top: 6px;
  overflow: visible;
}

.g-route path {
  fill: none;
  stroke: var(--g-road);
  stroke-width: 1.5;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw 2.4s .4s cubic-bezier(.6,.05,.2,1) forwards;
}

.g-route circle {
  fill: var(--g-road);
  opacity: 0;
  animation: pop .4s 2.6s forwards;
}

.g-route .g-start {
  fill: var(--g-paper);
  stroke: var(--g-road);
  stroke-width: 1.5;
  opacity: 1;
  animation: none;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pop {
  to {
    opacity: 1;
  }
}

.g-hero-copy {
  padding-bottom: 26px;
}

.g-hero-copy h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.5;
}

.g-hero-copy p {
  color: var(--g-ink-2);
  margin: 14px 0 30px;
  font-size: 17.5px;
}

.g-hero-copy .g-key {
  color: var(--g-road);
  font-weight: 600;
  font-size: 18px;
  margin: 12px 0 -6px;
}


/* ========== 10. 첫 화면: 사장님의 일 × GIL의 일 → 손님의 반응 (연결 지도) ========== */
.g-syn {
  position: relative;
  margin: 54px 0 0;
  padding: 26px 0 8px;
}

.g-syn-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 18px;
}

.g-syn-head b {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--g-ink);
}

.g-syn-head b em {
  font-style: normal;
  color: var(--g-road);
}

.g-syn-head small {
  font-size: 14px;
  color: var(--g-ink-3);
}

.g-syn-map {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 0 min(9vw,130px);
  align-items: stretch;
}

.g-syn-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.g-syn-col>h5 {
  margin-bottom: auto!important;
}

.g-syn-col::after {
  content: "";
  margin-top: auto;
}

.g-syn-col[data-col="1"] {
  align-items: center;
}

.g-syn-col[data-col="2"] {
  align-items: flex-end;
}

.g-syn-col>h5 {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--g-ink-3);
  margin: 0 0 4px;
  font-family: var(--g-en),var(--g-ko);
}

.g-syn-col[data-col="1"]>h5 {
  color: var(--g-road);
}

.g-syn-n {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 8px 15px;
  font-size: 15px;
  line-height: 1.2;
  border: 1px solid var(--g-line);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--g-ink-2);
  cursor: default;
  transition: border-color .3s,color .3s,background .3s,opacity .3s,box-shadow .4s;
}

.g-syn-n::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-ink-3);
  flex: none;
  transition: background .3s;
}

.g-syn-col[data-col="1"] .g-syn-n {
  border-color: rgba(31,107,78,.35);
  color: var(--g-road);
  font-weight: 600;
}

.g-syn-col[data-col="1"] .g-syn-n::before {
  background: var(--g-road);
}

.g-syn-col[data-col="2"] .g-syn-n {
  background: var(--g-road-soft);
  border-color: transparent;
  color: var(--g-ink);
  font-weight: 600;
}

.g-syn-col[data-col="2"] .g-syn-n::before {
  background: #8fd1b0;
}

.g-syn-n.hit {
  box-shadow: 0 0 0 6px rgba(143,209,176,.35);
  border-color: var(--g-road);
}

.g-syn-n .plus {
  position: absolute;
  right: -6px;
  top: -6px;
  font: 600 12px/1 var(--g-en),sans-serif;
  color: var(--g-road);
  opacity: 0;
  pointer-events: none;
}

.g-syn-n.hit .plus {
  animation: g-syn-plus .9s ease-out;
}

@keyframes g-syn-plus {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}

.g-syn-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.g-syn-svg path {
  fill: none;
  stroke: var(--g-road);
  stroke-width: 1;
  opacity: .18;
  transition: opacity .3s,stroke-width .3s;
}

.g-syn-svg path.on {
  opacity: .75;
  stroke-width: 1.6;
}

.g-syn-svg circle {
  fill: #8fd1b0;
}

.g-syn-svg circle.k {
  fill: var(--g-road);
}


/* ========== 11. 마우스를 올린 칸과 이어진 것만 진하게 ========== */
.g-syn.focus .g-syn-n {
  opacity: .32;
}

.g-syn.focus .g-syn-n.rel {
  opacity: 1;
}

.g-syn-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--g-ink-3);
}

.g-syn-loop i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(31,107,78,.4);
  color: var(--g-road);
  font-weight: 600;
}

/* 화면 폭 900px 이하일 때 (태블릿 · 휴대폰) */
@media (max-width:900px) {
  .g-syn-map {
    gap: 0 22px;
    grid-template-columns: 1fr 1.1fr 1fr;
  }
  .g-syn-n {
    font-size: 12.5px;
    padding: 6px 10px;
    gap: 5px;
  }
  .g-syn-n::before {
    width: 5px;
    height: 5px;
  }
  .g-syn-head {
    flex-direction: column;
    gap: 4px;
  }
  .g-syn-col>h5 {
    font-size: 11px;
  }
}

/* 화면 폭 560px 이하일 때 (휴대폰) */
@media (max-width:560px) {
  /* 휴대폰: 위(사장님) → 가운데(GIL) → 아래(손님) 세로 흐름 */
  .g-syn-map {
    grid-template-columns: 1fr;
    gap: 30px 0;
  }
  .g-syn-col,.g-syn-col[data-col="1"],.g-syn-col[data-col="2"] {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .g-syn-col>h5 {
    width: 100%;
    text-align: center;
    margin: 0!important;
  }
  .g-syn-col::after {
    display: none;
  }
  .g-syn-n {
    font-size: 13px;
    padding: 6px 11px;
  }
  .g-syn-head small {
    display: none;
  }
  .g-syn-loop {
    font-size: 12.5px;
    flex-wrap: wrap;
  }
}


/* ========== 12. 첫 화면 배경: AI 온라인 노출 진단 화면 (가로 전체) ----------
   옅은 격자 위로 진단 빛줄기가 왼쪽→오른쪽으로 지나가며, 지나간 자리의 진단 항목에 체크 · 주의 표시가 켜집니다. ========== */
.g-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.g-scan::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(31,107,78,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(31,107,78,.055) 1px,transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 100%);
}

.g-scan-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 220px;
  margin-left: -220px;
  background: linear-gradient(90deg,rgba(143,209,176,0) 0,rgba(143,209,176,.10) 70%,rgba(31,107,78,.22) 99%,rgba(31,107,78,.55) 100%);
  -webkit-mask-image: linear-gradient(to bottom,transparent,#000 12%,#000 82%,transparent);
  mask-image: linear-gradient(to bottom,transparent,#000 12%,#000 82%,transparent);
  will-change: transform;
  opacity: 0;
}

.g-scan-tag {
  position: absolute;
  width: 93px;
  height: 93px;
  margin: -46px 0 0 -46px;
  display: grid;
  place-items: center;
  color: rgba(140,140,133,.42);
  transition: color .5s,opacity .8s;
  opacity: 0;
}

.g-scan-tag.show {
  opacity: 1;
}

.g-scan-tag::before {
  content: "";
  position: absolute;
  inset: 0;
  color: rgba(140,140,133,.32);
  transition: color .5s;
  background: linear-gradient(currentColor,currentColor) left top/10px 1px,linear-gradient(currentColor,currentColor) left top/1px 10px,
  linear-gradient(currentColor,currentColor) right top/10px 1px,linear-gradient(currentColor,currentColor) right top/1px 10px,
  linear-gradient(currentColor,currentColor) left bottom/10px 1px,linear-gradient(currentColor,currentColor) left bottom/1px 10px,
  linear-gradient(currentColor,currentColor) right bottom/10px 1px,linear-gradient(currentColor,currentColor) right bottom/1px 10px;
  background-repeat: no-repeat;
}

.g-scan-tag svg {
  width: 39px;
  height: 39px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: -6px;
}


/* ========== 13. 칸 아래쪽 작은 진단 막대: 빛줄기가 지나가면 점수만큼 차오름 ========== */
.g-scan-tag i {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
  height: 2px;
  background: rgba(140,140,133,.18);
  overflow: hidden;
}

.g-scan-tag i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--v);
  transform: scaleX(0);
  transform-origin: left;
  background: currentColor;
  transition: transform .9s cubic-bezier(.3,.7,.2,1) .15s;
}

.g-scan-tag em {
  position: absolute;
  right: -9px;
  top: -9px;
  font-style: normal;
  font-family: var(--g-en);
  font-weight: 700;
  font-size: 13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1);
  background: #fff;
  box-shadow: 0 0 0 1px currentColor;
}

.g-scan-tag.ok em {
  color: var(--g-road);
}

.g-scan-tag.warn em {
  color: #c4432b;
}

.g-scan-tag.hit {
  color: rgba(31,107,78,.62);
}

.g-scan-tag.warn.hit {
  color: rgba(31,107,78,.55);
}

.g-scan-tag.warn.hit i::after {
  background: #d9826f;
}

.g-scan-tag.hit::before {
  color: rgba(31,107,78,.6);
}

.g-scan-tag.hit i::after {
  transform: scaleX(1);
}

.g-scan-tag.hit em {
  opacity: 1;
  transform: none;
}

.g-scan-tag b {
  display: none;
}

.g-scan-tag.over {
  color: var(--g-road);
}

.g-scan-tag.over::before {
  color: var(--g-road);
}


/* ========== 14. 마우스를 올린 아이콘의 한글 설명: 글자보다 위에 뜨는 작은 말풍선 ========== */
.g-scan-tip {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(.92);
  opacity: 0;
  transition: opacity .2s,transform .25s;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #fff;
  border: 1px solid var(--g-road);
  border-radius: 2px;
  box-shadow: 0 10px 30px -12px rgba(22,22,22,.35);
  white-space: nowrap;
}

.g-scan-tip.on {
  opacity: 1;
  transform: translate(-50%,-50%);
}

.g-scan-tip svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--g-road);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.g-scan-tip b {
  font-size: 15px;
  font-weight: 600;
  color: var(--g-ink);
  letter-spacing: -.02em;
}

.g-scan-tip small {
  font-size: 12.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.g-scan-tip small.ok {
  color: var(--g-road);
  background: var(--g-road-soft);
}

.g-scan-tip small.warn {
  color: #c4432b;
  background: #fbeae6;
}

.g-scan-status {
  position: absolute;
  right: 48px;
  top: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--g-en);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: rgba(31,107,78,.7);
  opacity: 0;
  transition: opacity .8s;
}

.g-scan-status.show {
  opacity: 1;
}

.g-scan-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-road);
  animation: g-scan-blink 1.4s infinite;
}

.g-scan-status span {
  font-family: var(--g-ko);
  letter-spacing: 0;
  font-size: 12.5px;
  color: var(--g-ink-3);
}

@keyframes g-scan-blink {
  50% {
    opacity: .25;
  }
}

/* 쌓이는 순서(위→아래): 본문 글자·이미지(2) > 아이콘 설명 말풍선(1) > 진단 아이콘 배경(0) */
.g-hero>.g-wrap,.g-hero>.g-strip {
  position: relative;
  z-index: 2;
}

/* 화면 폭 900px 이하일 때 (태블릿 · 휴대폰) */
@media (max-width:900px) {
  .g-scan-status {
    right: 20px;
    top: 84px;
  }
  .g-scan-tag {
    transform: scale(.66);
  }
}

/* 화면 폭 700px 이하일 때 (태블릿 · 휴대폰) */
@media (max-width:700px) {
  .g-scan-tag:nth-of-type(odd) {
    display: none;
  }
  .g-scan-tag em {
    display: none;
  }
  .g-scan-tag,.g-scan-tag.hit {
    color: rgba(31,107,78,.35);
  }
}


/* ========== 15. 흐르는 사례 띠 ========== */
.g-strip {
  position: relative;
  margin-top: 56px;
  overflow: hidden;
  padding: 0 0 10px;
  touch-action: pan-y;
  cursor: grab;
}

.g-strip.dragging {
  cursor: grabbing;
}

.g-strip.dragging .g-card {
  pointer-events: none;
}

.g-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}

.g-card {
  width: 440px;
  flex: 0 0 auto;
  display: block;
}

.g-frame {
  background: #fff;
  border: 1px solid var(--g-line);
  overflow: hidden;
}

.g-frame .g-bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--g-line);
  background: var(--g-stone);
}

.g-frame .g-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d6d6cf;
}

.b-view {
  height: 290px;
  overflow: hidden;
  position: relative;
  background: #fff;
}

.b-view .site {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  transform-origin: 0 0;
  transform: scale(var(--s,.36));
}

.g-strip .site {
  animation: autoscroll var(--dur,30s) ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes autoscroll {
  0%,6% {
    transform: translateY(0) scale(var(--s,.36));
  }
  94%,100% {
    transform: translateY(var(--dist,0px)) scale(var(--s,.36));
  }
}

.g-card .g-cap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px 0;
  font-size: 15.5px;
  color: var(--g-ink-2);
}

.g-card .g-cap b {
  font-weight: 600;
  color: var(--g-ink);
}

.g-strip-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
}

.g-strip-nav p {
  font-size: 15.5px;
  color: var(--g-ink-3);
}

.g-arrows {
  display: flex;
  gap: 8px;
}

.g-arrows button {
  width: 52px;
  height: 52px;
  border: 1px solid var(--g-line);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--g-ink);
  transition: .25s;
}

.g-arrows button:hover {
  background: var(--g-ink);
  color: #fff;
  border-color: var(--g-ink);
}

.g-arrows svg {
  width: 22px;
  height: 10px;
  transition: transform .35s;
}

.g-arrows .next:hover svg {
  transform: translateX(4px);
}

.g-arrows .prev:hover svg {
  transform: scaleX(-1) translateX(4px);
}

.g-arrows .prev svg {
  transform: scaleX(-1);
}


/* ========== 16. 새 소식 띠 ========== */
.g-pickup {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 24px;
  align-items: center;
  margin-top: 60px;
  padding: 22px 0;
  border-top: 1px solid var(--g-ink);
  border-bottom: 1px solid var(--g-line);
  font-size: 17px;
}

.g-pickup .g-k {
  font-family: var(--g-en);
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--g-road);
  font-weight: 500;
}

.g-pickup time {
  font-family: var(--g-en);
  color: var(--g-ink-3);
  margin-right: 18px;
}

.g-pickup b {
  font-weight: 500;
}

.g-pickup>svg {
  transition: transform .45s cubic-bezier(.6,.05,.25,1);
  color: var(--g-ink);
}

.g-pickup:hover>svg {
  transform: translateX(8px);
  color: var(--g-road);
}


/* ========== 17. 콘셉트 ========== */
.g-concept {
  padding: 150px 0 140px;
  overflow: hidden;
}

.g-mq {
  white-space: nowrap;
  font-family: var(--g-en);
  font-weight: 200;
  font-size: clamp(72px,calc(11vw + 2px),172px);
  letter-spacing: .08em;
  line-height: 1;
  color: #e7e7e1;
  margin-bottom: 90px;
  width: max-content;
  animation: mq 60s linear infinite;
}

@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}

.g-concept-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
}

.g-concept h2 {
  font-size: clamp(30px,calc(3.4vw + 2px),48px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.45;
}

.g-concept .g-lead {
  color: var(--g-ink-2);
  margin: 28px 0 46px;
  max-width: 820px;
  font-size: 18.5px;
}

.g-pts {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  border-top: 1px solid var(--g-ink);
}

.g-pts div {
  padding: 26px 26px 0;
}

.g-pts div+div {
  padding-left: 26px;
  border-left: 1px solid var(--g-line);
}

.g-pts b {
  display: block;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -.03em;
}

.g-pts p {
  color: var(--g-ink-2);
  font-size: 17px;
}

.g-map {
  margin-top: 70px;
  display: grid;
  grid-template-columns: 1fr 70px 1.35fr;
  align-items: center;
  padding: 40px;
  background: var(--g-stone);
}

.g-map h4 {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--g-ink-3);
  margin-bottom: 14px;
}

.g-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.g-chips span {
  background: #fff;
  padding: 8px 14px;
  font-size: 15.5px;
  color: var(--g-ink-2);
  border: 1px dashed #cfcfc7;
  transform: rotate(var(--r,0deg));
  cursor: default;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,color .3s,box-shadow .35s;
}

.g-chips span:hover,.g-chips span.on {
  transform: rotate(0) translateY(-4px);
  border: 1px solid var(--g-road);
  color: var(--g-road);
  box-shadow: 0 10px 20px -12px rgba(31,107,78,.5);
}

.g-to-ln {
  stroke-dasharray: 4 4;
  transition: stroke-dashoffset 0s;
}

.g-map.act .g-to-ln {
  animation: flow .8s linear infinite;
}

.g-map .g-to svg {
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}

.g-map.act .g-to svg {
  transform: translateX(6px);
}

@keyframes flow {
  to {
    stroke-dashoffset: -16;
  }
}

.g-map .g-to svg {
  width: 70px;
  height: 24px;
  color: var(--g-road);
}

.g-tree .g-root {
  display: inline-block;
  background: var(--g-ink);
  color: #fff;
  padding: 8px 16px;
  font-family: var(--g-en);
  font-weight: 500;
  letter-spacing: .08em;
  font-size: 16px;
  margin-bottom: 10px;
}

.g-tree .g-branch {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 8px;
}

.g-tree .g-root {
  transition: background .3s;
}

.g-map.act .g-tree .g-root {
  background: var(--g-road);
}

.g-tree .g-branch div {
  background: #fff;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  border-top: 2px solid var(--g-road);
  cursor: default;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),background .3s,color .3s,box-shadow .35s;
}

.g-tree .g-branch div:hover,.g-tree .g-branch div.on {
  background: var(--g-road);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -14px rgba(31,107,78,.7);
}

.g-tree .g-branch div:hover small,.g-tree .g-branch div.on small {
  color: rgba(255,255,255,.75);
}

.g-tree .g-branch small {
  display: block;
  font-weight: 400;
  color: var(--g-ink-3);
  font-size: 14.5px;
  line-height: 1.5;
  margin-top: 3px;
}


/* ========== 18. 콘셉트 영상 ========== */
.g-cvid {
  margin-top: 20px;
  aspect-ratio: 16/9;
  background: #fff;
  overflow: hidden;
  border: 1px solid var(--g-line);
}

.g-cvid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.g-cvid.empty {
  display: none;
}


/* ========== 19. 서비스 ========== */
.g-svc {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  border-top: 1px solid var(--g-ink);
}

.g-svc>div {
  padding: 34px 34px 10px;
}

.g-svc>div+div {
  padding-left: 34px;
  border-left: 1px solid var(--g-line);
}

.g-svc .g-svc-en {
  font-family: var(--g-en);
  font-size: 17px;
  color: var(--g-road);
  letter-spacing: .04em;
}

.g-svc h3 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.04em;
  margin: 4px 0 22px;
}

.g-svc dl {
  border-top: 1px solid var(--g-line);
}

.g-svc dt {
  font-weight: 600;
  font-size: 18px;
  padding-top: 18px;
}

.g-svc dd {
  color: var(--g-ink-2);
  font-size: 16.5px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--g-line);
}

.g-svc dd span {
  display: block;
  padding-left: 14px;
  position: relative;
}

.g-svc dd span::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: 6px;
  height: 1px;
  background: var(--g-ink-3);
}

.g-svc>div {
  display: flex;
  flex-direction: column;
}

.g-svc dl {
  flex: 1;
  margin-bottom: 26px;
}

.g-svc .g-link {
  align-self: flex-start;
  margin-bottom: 24px;
}


/* ========== 20. 서비스: 2열 상세 ========== */
.g-svc.g-svc-two {
  grid-template-columns: 1fr 1fr;
  margin-top: 110px;
}

.g-svc.g-svc-two>div {
  padding-right: 48px;
}


/* ========== 21. 서비스: 제작 → 홍보 → 리포트 흐름 ========== */
.g-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0 40px;
  padding-top: 34px;
}

.g-flow-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--g-line);
}

.g-flow-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--g-road);
  transition: width 1.8s cubic-bezier(.6,.05,.2,1);
}

.g-flow.in .g-flow-fill {
  width: 100%;
}

.g-flow-car {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--g-road);
  box-shadow: 0 0 0 6px rgba(31,107,78,.15);
  opacity: 0;
}

.g-flow.in .g-flow-car {
  animation: gCar 7.5s 1.9s cubic-bezier(.45,0,.25,1) infinite;
}

@keyframes gCarV {
  0% {
    top: 0;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  94% {
    top: 100%;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes gCar {
  0% {
    left: 0;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  30% {
    left: calc(33.33% + 13px);
  }
  36% {
    left: calc(33.33% + 13px);
  }
  64% {
    left: calc(66.66% + 26px);
  }
  70% {
    left: calc(66.66% + 26px);
  }
  94% {
    left: 100%;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.g-stage {
  position: relative;
}

.g-node {
  position: absolute;
  left: 0;
  top: -41px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--g-stone);
  border: 2px solid var(--g-ink-3);
  transition: border-color .4s,background .4s;
}

.g-flow.in .g-stage:nth-of-type(1) .g-node {
  border-color: var(--g-road);
  background: var(--g-road);
  transition-delay: .2s;
}

.g-flow.in .g-stage:nth-of-type(2) .g-node {
  border-color: var(--g-road);
  background: var(--g-road);
  transition-delay: .9s;
}

.g-flow.in .g-stage:nth-of-type(3) .g-node {
  border-color: var(--g-road);
  background: var(--g-road);
  transition-delay: 1.6s;
}

.g-stage-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--g-en);
}

.g-stage-no {
  font-size: 17px;
  color: var(--g-road);
  font-weight: 600;
  letter-spacing: .04em;
}

.g-stage-en {
  font-size: 17px;
  color: var(--g-ink-3);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.g-stage h3 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -.04em;
  margin: 6px 0 6px;
}

.g-stage-when {
  display: inline-block;
  font-size: 15px;
  color: var(--g-road);
  background: var(--g-road-soft);
  padding: 4px 10px;
  border-radius: 999px;
}

.g-stage ul {
  list-style: none;
  margin: 22px 0 0;
  border-top: 1px solid var(--g-line);
}

.g-stage li {
  font-size: 17px;
  color: var(--g-ink-2);
  padding: 11px 0 11px 16px;
  border-bottom: 1px solid var(--g-line);
  position: relative;
}

.g-stage li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 7px;
  height: 1px;
  background: var(--g-road);
}

.g-you {
  margin-top: 16px;
  font-size: 16px;
  color: var(--g-ink-2);
}

.g-you b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--g-road);
  letter-spacing: .02em;
  margin-bottom: 2px;
}


/* ========== 22. 미니 그림 공통 ========== */
.g-mini {
  margin-top: 22px;
  height: 150px;
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  position: relative;
  overflow: hidden;
}


/* ========== 23. 제작: 화면이 차례로 조립됨 ========== */
.mb-bar {
  height: 22px;
  border-bottom: 1px solid var(--g-line);
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 0 10px;
}

.mb-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g-line);
}

.mb-body {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.mb-body b,.mb-3 b {
  display: block;
  background: var(--g-stone);
  border-radius: 2px;
  opacity: 0;
  transform: translateY(8px);
}

.mb-1 {
  height: 12px;
  width: 55%;
  background: var(--g-ink)!important;
}

.mb-2 {
  height: 8px;
  width: 80%;
}

.mb-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
}

.mb-3 b {
  height: 34px;
}

.mb-4 {
  height: 14px;
  width: 34%;
  background: var(--g-road)!important;
  border-radius: 999px!important;
}

.g-flow.in .mb-body b,.g-flow.in .mb-3 b {
  animation: gBuild 6s infinite;
}

.g-flow.in .mb-1 {
  animation-delay: .2s!important;
}

.g-flow.in .mb-2 {
  animation-delay: .5s!important;
}

.g-flow.in .mb-3 b:nth-child(1) {
  animation-delay: .8s;
}

.g-flow.in .mb-3 b:nth-child(2) {
  animation-delay: 1s;
}

.g-flow.in .mb-3 b:nth-child(3) {
  animation-delay: 1.2s;
}

.g-flow.in .mb-4 {
  animation-delay: 1.6s!important;
}

@keyframes gBuild {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  8%,85% {
    opacity: 1;
    transform: none;
  }
  95%,100% {
    opacity: 0;
    transform: none;
  }
}


/* ========== 24. 홍보: 채널에 차례로 불이 들어옴 ========== */
.g-mini-promote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px;
  align-content: center;
}

.g-mini-promote span {
  font-size: 15px;
  color: var(--g-ink-2);
  border: 1px solid var(--g-line);
  border-radius: 999px;
  padding: 7px 10px;
  text-align: center;
  white-space: nowrap;
}

.g-flow.in .g-mini-promote span {
  animation: gLit 6s calc(var(--i)*.6s + 1s) infinite;
}

@keyframes gLit {
  0%,100% {
    background: transparent;
    color: var(--g-ink-2);
    border-color: var(--g-line);
  }
  8%,40% {
    background: var(--g-road);
    color: #fff;
    border-color: var(--g-road);
  }
  55% {
    background: var(--g-road-soft);
    color: var(--g-road);
    border-color: var(--g-road-soft);
  }
}


/* ========== 25. 리포트: 숫자가 올라가고 막대가 자람 ========== */
.g-mini-report {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 16px;
  align-items: end;
}

.mr-num small {
  display: block;
  font-size: 14px;
  color: var(--g-ink-3);
}

.mr-num b {
  display: block;
  font-family: var(--g-en);
  font-size: 42px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--g-ink);
}

.mr-num em {
  font-style: normal;
  font-size: 15px;
  color: var(--g-road);
}

.mr-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 110px;
}

.mr-bars i {
  flex: 1;
  height: 0;
  background: var(--g-road-soft);
  transition: height 1s cubic-bezier(.6,.05,.2,1);
}

.mr-bars i:last-child {
  background: var(--g-road);
}

.g-flow.in .mr-bars i {
  height: var(--h);
}

.g-flow.in .mr-bars i:nth-child(1) {
  transition-delay: 1.7s;
}

.g-flow.in .mr-bars i:nth-child(2) {
  transition-delay: 1.85s;
}

.g-flow.in .mr-bars i:nth-child(3) {
  transition-delay: 2s;
}

.g-flow.in .mr-bars i:nth-child(4) {
  transition-delay: 2.15s;
}


/* ========== 26. 리포트 → 다음 달 홍보로 돌아가는 고리 ========== */
.g-loop {
  grid-column: 2 / 4;
  height: 46px;
  margin: 22px 0 0;
}

.g-loop svg {
  display: block;
  width: calc(100% - 40px);
  margin-left: 20px;
  height: 46px;
  overflow: visible;
}

.g-loop path {
  fill: none;
  stroke: var(--g-road);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 5 6;
}

.g-flow.in .g-loop path:first-child {
  animation: gDash 1.2s linear infinite;
}

.g-loop {
  position: relative;
}

.g-loop-arrow {
  position: absolute;
  left: 20px;
  top: -3px;
  width: 0;
  height: 0;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--g-road);
}

@keyframes gDash {
  to {
    stroke-dashoffset: -22;
  }
}

.g-loop-text {
  grid-column: 2 / 4;
  text-align: center;
  font-size: 16px;
  color: var(--g-ink-2);
  margin-top: 10px;
}

.g-loop-text b {
  color: var(--g-road);
  font-weight: 600;
}


/* ========== 27. 광고 영상 ========== */
.g-motion {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 110px;
}

.g-vid {
  position: relative;
  aspect-ratio: 16/9;
  background: #fff;
  overflow: hidden;
  border: 1px solid var(--g-line);
}

.g-vid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.g-vid-empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-end;
  padding: 26px;
  color: #fff;
  background: linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.05) 60%),url("../images/works/video-empty.jpg") center/cover;
}

.g-vid-empty span {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.g-vid-empty i {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  display: grid;
  place-items: center;
}

.g-vid.empty video {
  display: none;
}

.g-vid.empty .g-vid-empty {
  display: flex;
}

.g-motion h3 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.45;
  margin: 6px 0 16px;
}

.g-motion p {
  color: var(--g-ink-2);
}

.g-motion ul {
  list-style: none;
  margin-top: 26px;
  border-top: 1px solid var(--g-line);
}

.g-motion li {
  padding: 14px 0;
  border-bottom: 1px solid var(--g-line);
  font-size: 17px;
}

.g-motion li b {
  font-weight: 600;
  margin-right: 10px;
}


/* ========== 28. 진행 과정 ========== */
.g-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 20px;
  padding-top: 10px;
}

.g-steps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  border-top: 1.5px dashed var(--g-road);
}

.g-steps::after {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: var(--p,0px);
  border-top: 1.5px solid var(--g-road);
  transition: width .55s cubic-bezier(.6,.05,.25,1);
  pointer-events: none;
}

.g-step {
  position: relative;
  cursor: default;
}

.g-step i {
  transition: background .3s,transform .35s cubic-bezier(.2,.7,.2,1);
  position: relative;
  z-index: 1;
}

.g-step h3 {
  transition: color .3s;
}

.g-step em {
  transition: background .3s,color .3s;
}

.g-step.done i {
  background: var(--g-road);
}

.g-step.cur i {
  transform: scale(1.35);
  background: var(--g-road);
}

.g-step.cur h3 {
  color: var(--g-road);
}

.g-step.cur em {
  background: var(--g-road);
  color: #fff;
}

.g-step i {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--g-paper);
  border: 1.5px solid var(--g-road);
  margin: 2px 0 26px;
}

.g-step:last-child i {
  background: var(--g-road);
}

.g-step .g-n {
  font-family: var(--g-en);
  font-size: 16px;
  color: var(--g-ink-3);
  letter-spacing: .06em;
}

.g-step h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 2px 0 8px;
  letter-spacing: -.03em;
}

.g-step p {
  font-size: 16.5px;
  color: var(--g-ink-2);
}

.g-step em {
  display: inline-block;
  font-style: normal;
  margin-top: 12px;
  font-size: 15px;
  color: var(--g-road);
  background: var(--g-road-soft);
  padding: 2px 10px;
}


/* ========== 29. 업종 맛보기 ========== */
.g-quad {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  border-top: 1px solid var(--g-ink);
}

.g-qd {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 24px 30px;
  border-right: 1px solid var(--g-line);
  border-bottom: 1px solid var(--g-line);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s;
}

.g-qd::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g-road);
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.6,.05,.25,1);
}

.g-qd small {
  font-size: 15px;
  color: var(--g-road);
  font-weight: 600;
  transition: color .35s;
}

.g-qd b {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.45;
}

.g-qd span {
  margin-top: auto;
  padding-top: 24px;
  font-size: 16px;
  color: var(--g-ink-3);
  transition: color .35s;
}

.g-qd em {
  font-style: normal;
  color: var(--g-ink);
  font-weight: 600;
  margin-left: 6px;
  transition: color .35s;
}

.g-qd:hover,.g-qd:focus-visible {
  color: #fff;
}

.g-qd:hover::before,.g-qd:focus-visible::before {
  transform: none;
}

.g-qd:hover small,
.g-qd:hover span,
.g-qd:hover em,
.g-qd:focus-visible small,
.g-qd:focus-visible span,
.g-qd:focus-visible em {
  color: #fff;
}


/* ========== 30. 제작 사례 ========== */
.g-works {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 56px;
  align-items: start;
}

.g-wlist {
  list-style: none;
  border-top: 1px solid var(--g-ink);
}

.g-wlist button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--g-line);
  padding: 22px 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--g-ink-3);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 10px;
  transition: color .25s;
}

.g-wlist .g-n {
  font-family: var(--g-en);
  font-size: 16px;
  padding-top: 3px;
}

.g-wlist small {
  font-size: 15px;
  grid-column: 2;
}

.g-wlist b {
  grid-column: 2;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.03em;
}

.g-wlist .g-tags {
  grid-column: 2;
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.g-wlist .g-tags span {
  font-size: 14.5px;
  border: 1px solid var(--g-line);
  padding: 2px 10px;
  color: var(--g-ink-2);
}

.g-wlist b {
  transition: transform .35s;
}

.g-wlist button:hover {
  color: var(--g-ink-2);
}

.g-wlist button:hover b {
  transform: translateX(6px);
}

.g-wlist button.on {
  color: var(--g-ink);
}

.g-wlist button.on .g-n {
  color: var(--g-road);
}

.g-wlist button.on .g-tags {
  display: flex;
}

.g-preview {
  position: sticky;
  top: 110px;
}

.g-preview .b-view {
  height: min(66vh,620px);
}

.g-preview .site {
  transition: transform 14s ease-in-out;
}

.g-preview .g-pv {
  display: none;
}

.g-preview .g-pv.on {
  display: block;
}

.g-preview-cap {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 15.5px;
  color: var(--g-ink-3);
}

.g-concept-tag {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--g-road);
  border: 1px solid var(--g-road);
  padding: 2px 10px;
  margin-right: 8px;
}


/* ========== 31. 인사이트 ========== */
.g-ins {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 48px 28px;
}

.g-post {
  display: block;
}

.g-post .g-ph {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-color: var(--g-stone);
  overflow: hidden;
  position: relative;
}

.g-post .g-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g-ink);
  opacity: 0;
  transition: opacity .35s;
}

.g-post:hover .g-ph::after {
  opacity: .12;
}

.g-post .g-meta {
  display: flex;
  justify-content: space-between;
  margin: 16px 0 6px;
  font-size: 15px;
  color: var(--g-ink-3);
}

.g-post .g-meta em {
  font-style: normal;
  color: var(--g-road);
  font-weight: 600;
}

.g-post h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.035em;
}

.g-post .g-ph {
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

.g-post:hover .g-ph {
  transform: translateY(-4px);
}


/* ========== 32. FAQ ========== */
.g-faq {
  border-top: 1px solid var(--g-ink);
}

.g-faq-item {
  border-bottom: 1px solid var(--g-line);
}

/* 자주 묻는 질문 — 질문 줄 */
.g-faq-q {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr 28px;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 19.5px;
  font-weight: 600;
  color: var(--g-ink);
  padding: 26px 0;
  letter-spacing: -.02em;
}

.g-faq-q .g-q {
  font-family: var(--g-en);
  font-weight: 400;
  color: var(--g-road);
  font-size: 20px;
}

.g-faq-q .g-pm {
  width: 28px;
  height: 28px;
  position: relative;
}

.g-faq-q .g-pm::before,.g-faq-q .g-pm::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--g-ink);
  translate: -50% -50%;
  transition: .3s;
}

.g-faq-q .g-pm::after {
  rotate: 90deg;
}

.g-faq-item.open .g-pm::after {
  rotate: 0deg;
}

/* 자주 묻는 질문 — 답변 */
.g-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}

.g-faq-a p {
  padding: 0 40px 28px 54px;
  color: var(--g-ink-2);
}

.g-faq-q {
  transition: color .3s;
}

.g-faq-q:hover {
  color: var(--g-road);
}

.g-faq-q:hover .g-pm::before,.g-faq-q:hover .g-pm::after {
  background: var(--g-road);
}

.g-faq-a a {
  color: var(--g-road);
  border-bottom: 1px solid currentColor;
}


/* ========== 33. 상담 ========== */
.g-contact-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}

.g-ct {
  padding: 46px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
}

.g-ct.dark {
  background: var(--g-ink);
  color: #fff;
}

.g-ct.light {
  background: var(--g-stone);
}

.g-ct h3 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.04em;
}

.g-ct p {
  font-size: 17px;
  opacity: .75;
  margin-top: 8px;
}

.g-ct .g-tel {
  font-family: var(--g-en);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: .02em;
  margin-top: 22px;
  align-self: flex-start;
  transition: color .3s;
}

.g-ct .g-tel:hover {
  color: var(--g-road);
}

.g-ct.dark .g-link::after {
  background: #7fc3a2;
}

.g-ct.dark .g-link {
  border-color: #fff;
  align-self: flex-start;
  margin-top: 30px;
}

.g-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 70px;
  margin-top: 100px;
}

.g-info {
  list-style: none;
  margin-top: 30px;
  border-top: 1px solid var(--g-ink);
}

.g-info li {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--g-line);
  font-size: 17px;
}

.g-info b {
  flex: 0 0 76px;
  color: var(--g-ink-3);
  font-weight: 500;
}

.g-form {
  background: var(--g-stone);
  padding: 46px;
}

.g-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.g-field {
  margin-bottom: 20px;
}

.g-field label,.g-field .g-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.g-field .req {
  color: var(--g-road);
  margin-left: 2px;
}

.g-field input,.g-field select,.g-field textarea {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid transparent;
  border-bottom: 1px solid #cfcfc7;
  background: #fff;
  font-family: inherit;
  font-size: 17.5px;
  color: var(--g-ink);
  border-radius: 0;
  transition: border-color .2s;
}

.g-field input:focus,.g-field select:focus,.g-field textarea:focus {
  outline: none;
  border-color: var(--g-road);
}

.g-field textarea {
  min-height: 140px;
  resize: vertical;
}

.g-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.g-types label {
  margin: 0;
  font-weight: 400;
}

.g-types input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.g-types span {
  display: inline-block;
  padding: 9px 16px;
  background: #fff;
  font-size: 16.5px;
  cursor: pointer;
  border: 1px solid #fff;
  transition: .2s;
}

.g-types input:checked+span {
  background: var(--g-ink);
  color: #fff;
  border-color: var(--g-ink);
}

.g-types input:focus-visible+span {
  outline: 2px solid var(--g-road);
  outline-offset: 2px;
}

.g-types span:hover {
  border-color: var(--g-road);
  color: var(--g-road);
}

.g-types input:checked+span:hover {
  color: #fff;
}

.g-agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
  color: var(--g-ink-2);
  margin: 4px 0 26px;
}

.g-agree input {
  margin-top: 5px;
  accent-color: var(--g-road);
  width: 16px;
  height: 16px;
}

.g-row4 {
  grid-template-columns: repeat(4,1fr);
}

.g-row2 {
  grid-template-columns: 1fr 280px;
  align-items: start;
}

.g-privacy {
  background: #fff;
  padding: 24px 26px;
  margin: 6px 0 22px;
  border-left: 3px solid var(--g-road);
}

.g-privacy h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}

.g-privacy>p {
  font-size: 15.5px;
  color: var(--g-ink-2);
}

.g-privacy dl {
  display: grid;
  grid-template-columns: 96px 1fr;
  margin-top: 14px;
  border-top: 1px solid var(--g-line);
  font-size: 15.5px;
  line-height: 1.7;
}

.g-privacy dt,.g-privacy dd {
  padding: 10px 0;
  border-bottom: 1px solid var(--g-line);
}

.g-privacy dt {
  font-weight: 600;
  color: var(--g-ink);
}

.g-privacy dd {
  color: var(--g-ink-2);
}

.g-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.g-submit .g-agree {
  margin: 0;
  cursor: pointer;
}

.g-submit .g-agree b {
  color: var(--g-road);
  font-weight: 600;
}

.g-submit .g-btn {
  flex: 0 0 320px;
  justify-content: space-between;
}

.g-agree.err {
  color: #b3261e;
}

.g-agree.err input {
  outline: 2px solid #b3261e;
  outline-offset: 2px;
}

.g-done {
  display: none;
  background: var(--g-stone);
  padding: 70px 40px;
  text-align: center;
}

.g-done .ok {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--g-road);
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
}

.g-done h3 {
  font-size: 24px;
  margin-bottom: 6px;
}

.g-done p {
  color: var(--g-ink-2);
}


/* ========== 34. 푸터 ========== */
/* 맨 아래 회사 정보 영역 */
.g-footer {
  margin-top: 150px;
  padding: 70px 0 0;
  border-top: 1px solid var(--g-ink);
}

.g-f-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.g-f-top .g-logo b {
  font-size: 54px;
}

.g-f-top .g-logo span {
  font-size: 16.6px;
  margin-top: 8px;
}

.g-f-top p {
  color: var(--g-ink-3);
  font-size: 16px;
  margin-top: 18px;
}

.g-f-links {
  display: grid;
  grid-template-columns: repeat(3,auto);
  gap: 10px 64px;
  font-family: var(--g-en);
  font-size: 17px;
  letter-spacing: .04em;
}

.g-f-links a {
  color: var(--g-ink-2);
}

.g-f-links a {
  transition: color .3s;
}

.g-f-links a:hover {
  color: var(--g-road);
}

.g-f-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 15.5px;
  color: var(--g-ink-3);
  line-height: 1.9;
  padding-bottom: 30px;
}

.g-bigmark {
  font-family: var(--g-en);
  font-weight: 200;
  font-size: clamp(48px,calc(11vw + 2px),172px);
  letter-spacing: .06em;
  line-height: .9;
  color: var(--g-stone);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  padding-bottom: 10px;
}


/* ========== 35. 등장 효과 (한 번만, 섹션 머리에만) ========== */

/* ========== 36. 반응형 ========== */
/* 화면 폭 1100px 이하일 때 (작은 노트북 · 태블릿 · 휴대폰) */
@media (max-width:1100px) {
  .g-quad {
    grid-template-columns: 1fr 1fr;
  }
  .g-row4 {
    grid-template-columns: 1fr 1fr;
  }
  .g-gnav a:not(.g-cta) {
    display: none;
  }
  .g-menu {
    display: block;
  }
  .g-hero-grid {
    grid-template-columns: 1fr;
  }
  .g-works {
    grid-template-columns: 1fr;
  }
  .g-preview {
    position: relative;
    top: 0;
    order: -1;
  }
  .g-tree .g-branch {
    grid-template-columns: repeat(3,1fr);
  }
}

/* 화면 폭 860px 이하일 때 (태블릿 · 휴대폰) */
@media (max-width:860px) {
  .g-wrap {
    padding: 0 20px;
  }
  .g-header,.g-header.scrolled {
    padding: 12px 20px;
  }
  .g-gnav .g-cta {
    display: none;
  }
  .g-sec {
    padding: 96px 0;
  }
  .g-hero {
    padding-top: 120px;
  }
  .g-hero h1 {
    letter-spacing: -.05em;
  }
  .g-head,.g-concept-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }
  .g-head .g-en {
    font-size: 26px;
  }
  .g-card {
    width: 300px;
  }
  .g-strip .b-view {
    height: 210px;
  }
  .g-strip-nav p {
    display: none;
  }
  .g-pickup {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .g-pts,.g-svc {
    grid-template-columns: 1fr;
  }
  .g-pts div,.g-pts div+div,.g-svc>div,.g-svc>div+div {
    padding: 24px 0;
    border-left: 0;
  }
  .g-pts div+div,.g-svc>div+div {
    border-top: 1px solid var(--g-line);
  }
  .g-map {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 20px;
  }
  .g-map .g-to {
    transform: rotate(90deg);
    justify-self: center;
  }
  .g-tree .g-branch {
    grid-template-columns: 1fr 1fr;
  }
  .g-flow {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 0 0 34px;
  }
  .g-flow-track {
    left: 6px;
    right: auto;
    top: 8px;
    bottom: 0;
    width: 2px;
    height: auto;
  }
  .g-flow-fill {
    width: 100%!important;
    height: 0;
    transition: height 1.8s cubic-bezier(.6,.05,.2,1);
  }
  .g-flow.in .g-flow-fill {
    height: 100%;
  }
  .g-flow-car {
    left: 50%!important;
    top: 0;
    margin: -6px 0 0 -6px;
  }
  .g-flow.in .g-flow-car {
    animation: gCarV 7.5s 1.9s cubic-bezier(.45,0,.25,1) infinite;
  }
  .g-node {
    left: -34px;
    top: 2px;
  }
  .g-stage h3 {
    font-size: 30px;
  }
  .g-loop {
    display: none;
  }
  .g-loop-text {
    grid-column: auto;
    text-align: left;
    margin: 0;
    padding: 14px 16px;
    background: var(--g-road-soft);
    font-size: 16px;
  }
  .g-svc.g-svc-two {
    grid-template-columns: 1fr;
    margin-top: 80px;
  }
  .g-svc.g-svc-two>div,.g-svc.g-svc-two>div+div {
    padding: 24px 0;
  }
  .g-motion {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 80px;
  }
  .g-quad {
    grid-template-columns: 1fr;
  }
  .g-qd,.g-qd:first-child {
    padding: 22px 0;
    border-right: 0;
  }
  .g-steps {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-left: 34px;
  }
  .g-steps::before {
    left: 7px;
    right: auto;
    top: 0;
    bottom: 0;
    border-top: 0;
    border-left: 1.5px dashed var(--g-road);
  }
  .g-step i {
    position: absolute;
    left: -34px;
    top: 4px;
    margin: 0;
  }
  .g-steps::after {
    display: none;
  }
  .g-preview .b-view {
    height: 360px;
  }
  .g-ins {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .g-contact-top,.g-form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .g-form-grid {
    margin-top: 60px;
    gap: 40px;
  }
  .g-ct {
    padding: 32px 24px;
    min-height: 0;
  }
  .g-ct .g-tel {
    font-size: 34px;
  }
  .g-form {
    padding: 28px 18px;
  }
  .g-row,.g-row4,.g-row2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .g-submit {
    flex-direction: column;
    align-items: stretch;
  }
  .g-submit .g-btn {
    flex: auto;
  }
  .g-privacy {
    padding: 18px 16px;
  }
  .g-privacy dl {
    grid-template-columns: 1fr;
  }
  .g-privacy dt {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .g-faq-a p {
    padding: 0 0 24px 54px;
  }
  .g-f-links {
    grid-template-columns: repeat(2,auto);
    gap: 10px 40px;
  }
}

/* 기기 설정에서 "움직임 줄이기"를 켠 방문자 — 애니메이션을 끔 */
@media (prefers-reduced-motion:reduce) {
  * {
    animation: none!important;
    transition: none!important;
  }
  .js .g-ln {
    opacity: 1;
    transform: none;
  }
  .g-route path {
    stroke-dashoffset: 0;
  }
  .g-route circle {
    opacity: 1;
  }
  .g-flow-fill {
    width: 100%;
  }
  .g-flow-car {
    display: none;
  }
  .mb-body b,.mb-3 b {
    opacity: 1!important;
    transform: none!important;
  }
  .mr-bars i {
    height: var(--h)!important;
  }
}

/* ================== 제작 사례 미니 사이트 (디자인 컨셉 6종) ================== */
.x {
  --ko: "Pretendard Variable","Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --se: "Noto Serif KR",serif;
  --it: "Instrument Serif","Noto Serif KR",serif;
  --gr: "Space Grotesk","Outfit",sans-serif;
  --mo: "IBM Plex Mono",ui-monospace,monospace;
  width: 1200px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ko);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -.02em;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.x * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.x [style*="background-image"] {
  background-size: cover;
  background-position: center;
  background-color: var(--ph,#cfcac0);
}

.x h1,.x h2,.x h3,.x b {
  letter-spacing: -.04em;
}

.x em {
  font-style: normal;
}

.x .rbadge text {
  font-size: 17.5px;
  letter-spacing: .24em;
  font-weight: 600;
  fill: currentColor;
  font-family: "Outfit",sans-serif;
}

.x .spin {
  animation: xspin 22s linear infinite;
}

@keyframes xspin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes xmq {
  to {
    transform: translateX(-50%);
  }
}

.xdiv {
  height: 96px;
  background: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
}

.xdiv span {
  font-family: "Outfit",sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  border: 1px solid rgba(255,255,255,.35);
  padding: 6px 14px;
  border-radius: 999px;
}

.xdiv b {
  font-size: 22px;
  font-weight: 700;
}


/* ========== 37. 1. 협회: 에디토리얼 ========== */
.x1 {
  --bg: #f3f1ea;
  --fg: #141414;
  --ac: #1d5c45;
  --mute: #6f6b62;
  --line: rgba(20,20,20,.15);
  --ph: #d7d3c8;
}

.x1 .hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 48px;
  font-size: 14.5px;
}

.x1 .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
}

.x1 .logo i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ac);
}

.x1 .logo small {
  font-family: "Outfit",sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--mute);
  letter-spacing: .1em;
}

.x1 nav {
  display: flex;
  gap: 36px;
  font-weight: 500;
}

.x1 nav .on {
  color: var(--ac);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.x1 .menu {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
}

.x1 .menu i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ac);
}

.x1 .xh {
  position: relative;
  padding: 40px 48px 0;
}

.x1 .xh h1 {
  font-size: 172px;
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.07em;
}

.x1 .xh h1 em {
  color: var(--ac);
}

.x1 .xh .side {
  position: absolute;
  right: 48px;
  top: 70px;
  width: 290px;
  display: grid;
  gap: 30px;
  justify-items: end;
}

.x1 .xh .side p {
  font-size: 16px;
  color: var(--mute);
  line-height: 1.7;
}

.x1 .xh .rbadge {
  color: var(--ac);
}

.x1 .hero-img {
  position: relative;
  height: 540px;
  margin-top: 56px;
}

.x1 .hero-img span,.x1 .hero-img b {
  position: absolute;
  bottom: 22px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.x1 .hero-img span {
  left: 48px;
}

.x1 .hero-img b {
  right: 48px;
  font-family: "Outfit",sans-serif;
}

.x1 .nums {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 28px;
  padding: 80px 48px;
}

.x1 .nums div {
  border-top: 1px solid var(--fg);
  padding-top: 18px;
}

.x1 .nums b {
  display: block;
  font-family: "Outfit",sans-serif;
  font-size: 72px;
  font-weight: 600;
  line-height: 1.1;
}

.x1 .nums span {
  color: var(--mute);
}

.x1 .lab {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.x1 .biz {
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 40px 48px 110px;
}

.x1 .row {
  display: grid;
  grid-template-columns: 60px 1fr 190px 300px 48px;
  gap: 24px;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}

.x1 .row:last-child {
  border-bottom: 1px solid var(--line);
}

.x1 .row .n {
  font-family: "Outfit",sans-serif;
  color: var(--mute);
}

.x1 .row h3 {
  font-size: 46px;
  font-weight: 700;
}

.x1 .row .th {
  height: 120px;
  border-radius: 4px;
  filter: grayscale(1);
  opacity: .85;
}

.x1 .row p {
  color: var(--mute);
  font-size: 15px;
}

.x1 .row .go {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}

.x1 .row.on h3 {
  color: var(--ac);
}

.x1 .row.on .th {
  filter: none;
  opacity: 1;
}

.x1 .row.on .go {
  background: var(--ac);
  color: #fff;
  border-color: var(--ac);
}

.x1 .mq {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 26px 0;
}

.x1 .mq div {
  white-space: nowrap;
  font-size: 110px;
  font-weight: 800;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--fg);
  width: max-content;
}

.x1 .news {
  padding: 110px 48px;
}

.x1 .news .head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  font-weight: 600;
}

.x1 .g3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
}

.x1 .card .ph {
  aspect-ratio: 4/3;
  border-radius: 4px;
}

.x1 .card .meta {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 6px;
  font-family: "Outfit",sans-serif;
  font-size: 13px;
  color: var(--mute);
}

.x1 .card .meta em {
  color: var(--ac);
  font-family: var(--ko);
  font-weight: 600;
}

.x1 .card h4 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
}

.x1 .ft {
  background: var(--fg);
  color: var(--bg);
  padding: 50px 48px 30px;
}

.x1 .ft .top {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  opacity: .7;
}

.x1 .ft .mark {
  font-family: "Outfit",sans-serif;
  font-size: 320px;
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .8;
  margin-top: 50px;
}

.x1 .ft .mark sup {
  font-size: 40px;
  vertical-align: top;
}

.x1 .sub-t {
  padding: 60px 48px 40px;
}

.x1 .sub-t small {
  font-family: "Outfit",sans-serif;
  color: var(--mute);
  letter-spacing: .06em;
}

.x1 .sub-t h1 {
  font-size: 150px;
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: 1.05;
  margin: 10px 0 40px;
}

.x1 .sub-t h1 sup {
  font-family: "Outfit",sans-serif;
  font-size: 36px;
  color: var(--ac);
  vertical-align: top;
  margin-left: 10px;
  letter-spacing: 0;
}

.x1 .flt {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.x1 .flt div:first-child {
  display: flex;
  gap: 8px;
}

.x1 .flt span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
}

.x1 .flt .on {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.x1 .srch {
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--fg);
  width: 340px;
  padding: 10px 0;
  color: var(--mute);
}

.x1 .tbl {
  padding: 10px 48px 100px;
}

.x1 .th-row,.x1 .tr {
  display: grid;
  grid-template-columns: 90px 1.5fr 1fr 1fr 48px;
  align-items: center;
  gap: 20px;
}

.x1 .th-row {
  font-family: "Outfit",sans-serif;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--mute);
  padding: 14px 0;
  border-bottom: 1px solid var(--fg);
}

.x1 .tr {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: var(--mute);
}

.x1 .tr b {
  font-size: 24px;
  color: var(--fg);
  font-weight: 700;
}

.x1 .tr .n {
  font-family: "Outfit",sans-serif;
}

.x1 .tr .go {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--fg);
}

.x1 .tr.on {
  background: #e9e6dc;
}

.x1 .tr.on b {
  color: var(--ac);
}

.x1 .tr.on .go {
  background: var(--ac);
  color: #fff;
  border-color: var(--ac);
}

.x1 .pg {
  display: flex;
  gap: 22px;
  margin-top: 40px;
  font-family: "Outfit",sans-serif;
  color: var(--mute);
  font-weight: 500;
}

.x1 .pg .on {
  color: var(--fg);
  border-bottom: 2px solid var(--fg);
}

.x1 .pg .nx {
  margin-left: auto;
  color: var(--fg);
  font-family: var(--ko);
}


/* ========== 38. 2. 피부과: 럭셔리 미니멀 ========== */
.x2 {
  --bg: #efe9e2;
  --fg: #2a211d;
  --ac: #9b6a55;
  --mute: #7e726b;
  --line: rgba(42,33,29,.16);
  --ph: #d9cfc6;
}

.x2 .lab {
  font-family: var(--it);
  font-style: italic;
  font-size: 19px;
  color: var(--ac);
}

.x2 .hd {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 30px 64px;
  border-bottom: 1px solid var(--line);
}

.x2 .hd nav {
  display: flex;
  gap: 30px;
  font-size: 14.5px;
}

.x2 .hd nav .on {
  color: var(--ac);
}

.x2 .hd .logo {
  font-family: var(--se);
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
}

.x2 .hd .logo small {
  display: block;
  font-family: "Outfit",sans-serif;
  font-size: 10px;
  letter-spacing: .42em;
  color: var(--mute);
  font-weight: 500;
  margin-top: 4px;
}

.x2 .rsv {
  justify-self: end;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--fg);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 14px;
}

.x2 .xh {
  display: grid;
  grid-template-columns: 1fr 470px;
  gap: 70px;
  padding: 80px 64px 110px;
  align-items: end;
}

.x2 .xh h1 {
  font-family: var(--se);
  font-size: 78px;
  font-weight: 600;
  line-height: 1.28;
  margin: 22px 0 18px;
  letter-spacing: -.05em;
}

.x2 .xh .en {
  font-family: var(--it);
  font-style: italic;
  font-size: 30px;
  color: var(--mute);
}

.x2 .row {
  display: flex;
  gap: 26px;
  align-items: center;
  margin-top: 40px;
}

.x2 .btn {
  background: var(--fg);
  color: var(--bg);
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  display: inline-block;
}

.x2 .lnk {
  border-bottom: 1px solid var(--fg);
  padding-bottom: 2px;
}

.x2 .facts {
  display: flex;
  gap: 56px;
  margin-top: 70px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.x2 .facts b {
  display: block;
  font-family: var(--se);
  font-size: 30px;
  font-weight: 600;
}

.x2 .facts span {
  font-size: 14px;
  color: var(--mute);
}

.x2 .xh .r {
  position: relative;
}

.x2 .arch {
  height: 640px;
  border-radius: 240px 240px 8px 8px;
}

.x2 .xh .rbadge {
  position: absolute;
  left: -80px;
  bottom: 60px;
  color: var(--fg);
  background: var(--bg);
  border-radius: 50%;
}

.x2 .philo {
  text-align: center;
  padding: 40px 64px 130px;
}

.x2 .philo p {
  font-family: var(--se);
  font-size: 42px;
  line-height: 1.75;
  font-weight: 600;
  margin-top: 20px;
  letter-spacing: -.04em;
}

.x2 .pill {
  display: inline-block;
  width: 120px;
  height: 56px;
  border-radius: 999px;
  vertical-align: middle;
}

.x2 .treat {
  padding: 0 64px 120px;
}

.x2 .treat .head {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--fg);
}

.x2 .treat h2 {
  font-family: var(--it);
  font-style: italic;
  font-weight: 400;
  font-size: 84px;
  letter-spacing: -.02em;
  line-height: 1;
}

.x2 .treat .head span {
  color: var(--mute);
}

.x2 .treat .tr {
  display: grid;
  grid-template-columns: 110px 280px 1fr 230px;
  gap: 30px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.x2 .treat .tr em {
  font-family: var(--it);
  font-style: italic;
  font-size: 52px;
  color: var(--ac);
  line-height: 1;
}

.x2 .treat .tr h3 {
  font-family: var(--se);
  font-size: 34px;
  font-weight: 600;
}

.x2 .treat .tr p {
  color: var(--mute);
}

.x2 .treat .tr .im {
  height: 140px;
  border-radius: 4px;
}

.x2 .space {
  height: 600px;
  position: relative;
}

.x2 .space::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,rgba(30,20,15,.55),transparent 55%);
}

.x2 .space p {
  position: absolute;
  left: 64px;
  bottom: 60px;
  z-index: 1;
  color: #fff;
  font-family: var(--se);
  font-size: 52px;
  font-weight: 600;
  line-height: 1.35;
}

.x2 .space em {
  position: absolute;
  right: 64px;
  bottom: 66px;
  z-index: 1;
  color: #fff;
  font-family: var(--it);
  font-style: italic;
  font-size: 20px;
  opacity: .85;
}

.x2 .info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 110px 64px;
}

.x2 dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  margin-top: 16px;
  border-top: 1px solid var(--fg);
}

.x2 dt,.x2 dd {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}

.x2 dt {
  color: var(--mute);
}

.x2 dd {
  font-family: var(--se);
  font-weight: 600;
}

.x2 .addr {
  font-family: var(--se);
  font-size: 24px;
  line-height: 1.6;
  margin: 16px 0 24px;
  font-weight: 600;
}

.x2 .mapline {
  height: 200px;
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.x2 .mapline i {
  position: absolute;
  background: var(--line);
}

.x2 .mapline i:nth-child(1) {
  left: 0;
  right: 0;
  top: 48%;
  height: 14px;
}

.x2 .mapline i:nth-child(2) {
  top: 0;
  bottom: 0;
  left: 40%;
  width: 12px;
}

.x2 .mapline i:nth-child(3) {
  left: 55%;
  right: 0;
  top: 78%;
  height: 8px;
  transform: rotate(-7deg);
}

.x2 .mapline b {
  position: absolute;
  left: 44%;
  top: 18%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ac);
  color: #fff;
  display: grid;
  place-items: center;
}

.x2 .ft {
  background: var(--fg);
  color: #efe9e2;
  padding: 60px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 30px;
}

.x2 .ft .logo {
  font-family: var(--se);
  font-size: 34px;
  font-weight: 600;
}

.x2 .ft p {
  font-size: 14px;
  opacity: .65;
  line-height: 1.8;
}

.x2 .ft em {
  font-family: var(--it);
  font-style: italic;
  font-size: 22px;
  opacity: .8;
}

.x2 .s-hero {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 60px;
  padding: 70px 64px 100px;
  align-items: end;
}

.x2 .s-hero small {
  font-family: "Outfit",sans-serif;
  letter-spacing: .12em;
  color: var(--mute);
  font-size: 12px;
}

.x2 .s-hero h1 {
  font-family: var(--it);
  font-style: italic;
  font-weight: 400;
  font-size: 190px;
  line-height: .9;
  letter-spacing: -.03em;
  margin-top: 20px;
}

.x2 .s-hero h2 {
  font-family: var(--se);
  font-size: 40px;
  font-weight: 600;
  margin: 14px 0 18px;
}

.x2 .s-hero p {
  color: var(--mute);
  max-width: 470px;
}

.x2 .s-hero .im {
  height: 500px;
  border-radius: 4px;
}

.x2 .cmp {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px;
  padding: 0 64px;
}

.x2 .cmp>div {
  border-top: 1px solid var(--fg);
  padding-top: 22px;
}

.x2 .cmp em {
  font-family: var(--it);
  font-style: italic;
  font-size: 44px;
  color: var(--ac);
  line-height: 1;
}

.x2 .cmp h3 {
  font-family: var(--se);
  font-size: 28px;
  font-weight: 600;
  margin: 14px 0 6px;
}

.x2 .cmp p {
  color: var(--mute);
  min-height: 52px;
}

.x2 .cmp dl {
  grid-template-columns: 90px 1fr;
  border-top: 0;
  margin-top: 14px;
}

.x2 .cmp dt,.x2 .cmp dd {
  font-size: 14.5px;
  padding: 10px 0;
}

.x2 .note {
  padding: 26px 64px 0;
  font-size: 13.5px;
  color: var(--mute);
}

.x2 .flow {
  padding: 110px 64px;
}

.x2 .flow .line {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  margin-top: 30px;
  position: relative;
}

.x2 .flow .line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 1px;
  background: var(--fg);
}

.x2 .flow .line i {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--fg);
  position: relative;
  margin-bottom: 22px;
}

.x2 .flow .line div:first-child i {
  background: var(--ac);
  border-color: var(--ac);
}

.x2 .flow .line em {
  font-family: var(--it);
  font-style: italic;
  color: var(--ac);
  font-size: 22px;
}

.x2 .flow .line b {
  display: block;
  font-family: var(--se);
  font-size: 22px;
  font-weight: 600;
}

.x2 .cta {
  text-align: center;
  padding: 40px 64px 130px;
}

.x2 .cta h2 {
  font-family: var(--se);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 34px;
}


/* ========== 39. 3. 협동조합: 따뜻한 텍스처 ========== */
.x3 {
  --bg: #fbf3e4;
  --fg: #1f1a14;
  --tm: #ef5a3c;
  --gr: #2f7d5b;
  --ye: #f5c142;
  --mute: #6f665a;
  --ph: #ecdcc0;
}

.x3::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: multiply;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .4  0 0 0 0 .3  0 0 0 .25 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.x3>* {
  position: relative;
  z-index: 1;
}

.x3 .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tm);
  color: #fff;
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 700;
  font-size: 15px;
}

.x3 .btn.dark {
  background: var(--fg);
}

.x3 .btn.light {
  background: #fff;
  color: var(--fg);
}

.x3 .btn.big {
  font-size: 19px;
  padding: 20px 34px;
}

.x3 .hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 48px;
}

.x3 .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 22px;
}

.x3 nav {
  display: flex;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 6px 20px -12px rgba(0,0,0,.3);
}

.x3 nav span {
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
}

.x3 nav .on {
  background: var(--ye);
}

.x3 .xh {
  position: relative;
  padding: 40px 48px 30px;
}

.x3 .xh h1 {
  font-size: 132px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.06em;
}

.x3 .xh h1 span {
  color: var(--tm);
}

.x3 .inph {
  display: inline-block;
  width: 260px;
  height: 110px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
}

.x3 .stk {
  position: absolute;
  right: 120px;
  top: 40px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--ye);
  display: grid;
  place-content: center;
  text-align: center;
  transform: rotate(12deg);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.1;
  box-shadow: 0 10px 0 var(--fg);
}

.x3 .stk b {
  font-size: 48px;
  letter-spacing: -.04em;
}

.x3 .intro {
  position: absolute;
  right: 48px;
  bottom: 40px;
  width: 380px;
  display: grid;
  gap: 18px;
  justify-items: start;
}

.x3 .intro p {
  font-size: 17px;
  color: var(--mute);
}

.x3 .collage {
  position: relative;
  height: 480px;
  margin-top: 20px;
}

.x3 .collage>div {
  position: absolute;
  border-radius: 28px;
  box-shadow: 0 22px 40px -22px rgba(60,30,10,.5);
}

.x3 .collage .p1 {
  left: 48px;
  top: 50px;
  width: 470px;
  height: 330px;
  transform: rotate(-3.5deg);
}

.x3 .collage .p2 {
  left: 470px;
  top: 130px;
  width: 330px;
  height: 260px;
  transform: rotate(4deg);
  z-index: 2;
}

.x3 .collage .p3 {
  right: 48px;
  top: 30px;
  width: 420px;
  height: 340px;
  transform: rotate(-1.5deg);
}

.x3 .tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 110px;
  height: 30px;
  margin-left: -55px;
  background: rgba(245,193,66,.75);
  transform: rotate(-4deg);
}

.x3 .collage .note {
  position: absolute;
  left: 560px;
  bottom: 20px;
  background: #fff;
  border-radius: 14px;
  padding: 10px 16px;
  font-weight: 700;
  transform: rotate(-2deg);
  z-index: 3;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.3);
}

.x3 .band {
  background: var(--tm);
  color: #fff;
  transform: rotate(-2deg);
  margin: 40px -20px;
  padding: 18px 0;
  overflow: hidden;
}

.x3 .band div {
  white-space: nowrap;
  font-size: 66px;
  font-weight: 900;
  letter-spacing: -.04em;
  width: max-content;
}

.x3 .wwd {
  padding: 100px 48px;
}

.x3 h2 {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1.2;
}

.x3 .g3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
  margin-top: 40px;
}

.x3 .cd {
  border-radius: 40px;
  padding: 40px 36px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.x3 .cd.tm {
  background: var(--tm);
  color: #fff;
}

.x3 .cd.gr {
  background: var(--gr);
  color: #fff;
}

.x3 .cd.ye {
  background: var(--ye);
}

.x3 .cd .no {
  position: absolute;
  right: 26px;
  top: 10px;
  font-family: "Outfit",sans-serif;
  font-size: 120px;
  font-weight: 700;
  opacity: .22;
  line-height: 1;
}

.x3 .cd .ic {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: grid;
  place-items: center;
}

.x3 .cd h3 {
  font-size: 38px;
  font-weight: 900;
  margin-top: auto;
}

.x3 .cd p {
  font-size: 16px;
  opacity: .9;
  margin-top: 8px;
}

.x3 .stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  padding: 10px 48px 100px;
  gap: 20px;
}

.x3 .stats div {
  border-top: 3px solid var(--fg);
  padding-top: 14px;
}

.x3 .stats b {
  display: block;
  font-family: "Outfit",sans-serif;
  font-size: 84px;
  font-weight: 700;
  color: var(--tm);
  line-height: 1.05;
}

.x3 .stats span {
  font-weight: 600;
}

.x3 .cta {
  position: relative;
  overflow: hidden;
  margin: 0 48px 100px;
  background: var(--ye);
  border-radius: 56px;
  padding: 80px 70px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
}

.x3 .cta h2 {
  font-size: 72px;
}

.x3 .cta p {
  margin-top: 14px;
  font-size: 17px;
}

.x3 .cta .c1,.x3 .cta .c2 {
  position: absolute;
  border-radius: 50%;
  border: 3px solid var(--fg);
  pointer-events: none;
}

.x3 .cta .c1 {
  width: 220px;
  height: 220px;
  right: -60px;
  top: -80px;
}

.x3 .cta .c2 {
  width: 120px;
  height: 120px;
  right: 180px;
  top: -50px;
  background: var(--tm);
  border: 0;
}

.x3 .ft {
  background: var(--fg);
  color: var(--bg);
  padding: 60px 48px 40px;
  border-radius: 48px 48px 0 0;
}

.x3 .ft .mark {
  font-size: 190px;
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: 1;
}

.x3 .ft .info {
  display: flex;
  gap: 40px;
  margin-top: 24px;
  font-size: 14px;
  opacity: .7;
}

.x3 .s-hero {
  padding: 60px 48px 40px;
}

.x3 .s-hero small {
  font-weight: 600;
  color: var(--tm);
}

.x3 .s-hero h1 {
  font-size: 140px;
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: 1.05;
  margin-top: 12px;
}

.x3 .s-hero h1 span {
  color: var(--tm);
}

.x3 .plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 30px 48px;
}

.x3 .pl {
  border-radius: 40px;
  padding: 46px;
  background: #fff;
  display: grid;
  gap: 14px;
  justify-items: start;
}

.x3 .pl.tm {
  background: var(--tm);
  color: #fff;
}

.x3 .pl em {
  font-weight: 800;
  font-size: 15px;
  background: var(--ye);
  color: var(--fg);
  padding: 5px 14px;
  border-radius: 999px;
}

.x3 .pl h3 {
  font-size: 44px;
  font-weight: 900;
}

.x3 .pl p {
  opacity: .85;
  margin-bottom: 10px;
}

.x3 .use {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 70px;
  align-items: center;
  padding: 70px 48px;
}

.x3 .donut {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: conic-gradient(var(--tm) 0 52%,var(--gr) 0 80%,var(--ye) 0 92%,var(--fg) 0);
  display: grid;
  place-items: center;
}

.x3 .donut div {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: var(--bg);
  display: grid;
  place-content: center;
  text-align: center;
}

.x3 .donut b {
  font-family: "Outfit",sans-serif;
  font-size: 48px;
}

.x3 .donut span {
  font-size: 14px;
  color: var(--mute);
}

.x3 .use h3 {
  font-size: 40px;
  font-weight: 900;
  margin-bottom: 22px;
}

.x3 .lg {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 2px dashed rgba(31,26,20,.2);
  font-size: 19px;
  font-weight: 600;
}

.x3 .lg i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.x3 .lg i.tm {
  background: var(--tm);
}

.x3 .lg i.gr {
  background: var(--gr);
}

.x3 .lg i.ye {
  background: var(--ye);
}

.x3 .lg i.ink {
  background: var(--fg);
}

.x3 .lg b {
  font-family: "Outfit",sans-serif;
  font-size: 24px;
}

.x3 .stp {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 10px;
  padding: 30px 48px 110px;
  position: relative;
}

.x3 .stp::before {
  content: "";
  position: absolute;
  left: 120px;
  right: 120px;
  top: 66px;
  border-top: 3px dashed var(--fg);
}

.x3 .stp div {
  text-align: center;
  position: relative;
}

.x3 .stp b {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--ye);
  border: 3px solid var(--fg);
  font-family: "Outfit",sans-serif;
  font-size: 28px;
}

.x3 .stp div:first-child b {
  background: var(--tm);
  color: #fff;
}

.x3 .stp span {
  font-weight: 700;
  font-size: 17px;
}


/* ========== 40. 4. 소상공인: 볼드 그래픽 ========== */
.x4 {
  --bg: #0f0f0f;
  --fg: #f4f1ea;
  --or: #ff5b1f;
  --mute: #8d8a84;
  --line: rgba(255,255,255,.14);
  --ph: #2a2a2a;
}

.x4 .hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 48px;
  border-bottom: 1px solid var(--line);
}

.x4 .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gr);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.02em;
}

.x4 .logo i {
  width: 18px;
  height: 18px;
  background: var(--or);
}

.x4 .logo small {
  font-family: var(--ko);
  font-size: 12px;
  color: var(--mute);
  font-weight: 500;
}

.x4 nav {
  display: flex;
  gap: 30px;
  font-size: 15px;
  color: #cfcac2;
}

.x4 nav .on {
  color: var(--or);
}

.x4 .btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: var(--or);
  color: #111;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 999px;
}

.x4 .xh {
  position: relative;
  padding: 40px 48px 70px;
}

.x4 .xh h1 {
  font-family: var(--gr);
  font-size: 236px;
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.075em;
}

.x4 .xh h1 span {
  color: var(--or);
}

.x4 .inph {
  display: inline-block;
  width: 560px;
  height: 176px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 10px;
  filter: saturate(1.1);
}

.x4 .under {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 60px;
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  align-items: end;
}

.x4 .under p {
  grid-column: 2;
  grid-row: 1;
}

.x4 .under h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.35;
}

.x4 .under p {
  color: var(--mute);
}

.x4 .circle {
  position: absolute;
  right: 48px;
  top: 60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--or);
  color: #111;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
}

.x4 .tick {
  background: var(--or);
  color: #111;
  overflow: hidden;
  padding: 16px 0;
}

.x4 .tick div {
  white-space: nowrap;
  font-size: 22px;
  font-weight: 800;
  width: max-content;
}

.x4 .ol {
  font-family: var(--gr);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
  letter-spacing: -.05em;
  line-height: .9;
}

.x4 .ol.or {
  -webkit-text-stroke-color: var(--or);
}

.x4 .sup {
  padding: 110px 48px;
}

.x4 .sup .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
}

.x4 .sup .head h2 {
  font-size: 130px;
}

.x4 .sup .head p {
  font-size: 26px;
  font-weight: 700;
  text-align: right;
  line-height: 1.35;
}

.x4 .g3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}

.x4 .cd {
  background: #1b1b1b;
  border-radius: 22px;
  padding: 30px;
  display: grid;
  gap: 8px;
}

.x4 .dd {
  font-family: var(--gr);
  font-size: 120px;
  font-weight: 700;
  color: var(--or);
  letter-spacing: -.06em;
  line-height: .95;
}

.x4 .dd small {
  font-size: 40px;
  letter-spacing: 0;
}

.x4 .cd em {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  background: var(--fg);
  padding: 4px 10px;
  border-radius: 999px;
  justify-self: start;
  margin-top: 10px;
}

.x4 .cd h3 {
  font-size: 24px;
  font-weight: 700;
}

.x4 .cd p {
  color: var(--mute);
}

.x4 .cd>span {
  color: var(--or);
  font-weight: 700;
  margin-top: 10px;
}

.x4 .reg {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  padding: 40px 48px 110px;
}

.x4 .reg h2 {
  font-size: 110px;
  margin-bottom: 30px;
}

.x4 .big {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}

.x4 .big b {
  font-family: var(--gr);
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
}

.x4 .big span {
  display: block;
  color: var(--mute);
}

.x4 .reg p {
  color: var(--mute);
  margin-top: 18px;
  font-size: 14.5px;
}

.x4 .map {
  position: relative;
  height: 720px;
  background: radial-gradient(circle,rgba(255,255,255,.1) 1.2px,transparent 1.4px) 0 0/22px 22px;
  border-radius: 24px;
}

.x4 .map div {
  position: absolute;
  width: 120px;
  height: 84px;
  border-radius: 16px;
  background: #1d1d1d;
  border: 1px solid var(--line);
  padding: 12px 14px;
}

.x4 .map b {
  display: block;
  font-size: 20px;
}

.x4 .map small {
  color: var(--mute);
  font-size: 13px;
}

.x4 .map small::after {
  content: " 지회";
}

.x4 .map .on {
  background: var(--or);
  color: #111;
  border-color: var(--or);
  transform: scale(1.12);
  box-shadow: 0 20px 40px -12px rgba(255,91,31,.6);
}

.x4 .map .on small {
  color: #111;
}

.x4 .strip {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
  padding: 0 48px 110px;
}

.x4 .strip .ph {
  height: 420px;
  border-radius: 22px;
}

.x4 .strip span {
  display: block;
  margin-top: 14px;
  font-family: var(--gr);
  color: var(--mute);
}

.x4 .ft {
  border-top: 1px solid var(--line);
  padding: 50px 48px 34px;
}

.x4 .ft .mark {
  font-family: var(--gr);
  font-size: 170px;
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--or);
}

.x4 .ft .info {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  color: var(--mute);
  font-size: 14px;
}

.x4 .s-hero {
  padding: 60px 48px 50px;
}

.x4 .s-hero small {
  font-family: var(--gr);
  color: var(--mute);
  letter-spacing: .14em;
}

.x4 .s-hero h1 {
  font-size: 230px;
  margin: 10px 0 12px;
}

.x4 .s-hero h2 {
  font-size: 36px;
  font-weight: 700;
}

.x4 .s-img {
  height: 400px;
}

.x4 .list {
  padding: 60px 48px 110px;
}

.x4 .list .tr {
  display: grid;
  grid-template-columns: 70px 260px 1fr 220px 56px;
  gap: 20px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  color: var(--mute);
}

.x4 .list .tr b {
  font-size: 30px;
  color: var(--fg);
}

.x4 .list .n {
  font-family: var(--gr);
}

.x4 .list .go {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--fg);
}

.x4 .list .tr.on b {
  color: var(--or);
}

.x4 .list .tr.on .go {
  background: var(--or);
  color: #111;
  border-color: var(--or);
}


/* ========== 41. 5. 제조: 테크니컬 모노크롬 ========== */
.x5 {
  --bg: #f4f4f1;
  --fg: #111;
  --bl: #2340ff;
  --mute: #76767a;
  --line: rgba(0,0,0,.14);
  --ph: #c9c9c6;
  background-image: linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px);
  background-size: 60px 60px;
}

.x5 .mono {
  font-family: var(--mo);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--mute);
}

.x5 .hd {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 36px;
  align-items: center;
  padding: 22px 48px;
  border-bottom: 1px solid var(--fg);
  background: var(--bg);
}

.x5 .logo {
  font-family: var(--gr);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
}

.x5 .logo span {
  color: var(--bl);
  margin: 0 3px;
}

.x5 nav {
  display: flex;
  gap: 28px;
  font-size: 14.5px;
  justify-content: center;
}

.x5 nav .on {
  color: var(--bl);
}

.x5 .coord {
  font-family: var(--mo);
  font-size: 12px;
  color: var(--mute);
}

.x5 .btn {
  display: inline-block;
  background: var(--fg);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14.5px;
}

.x5 .btn.ln {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
}

.x5 .btn.inv {
  background: #fff;
  color: var(--fg);
}

.x5 .xh {
  display: grid;
  grid-template-columns: 1fr 540px;
  border-bottom: 1px solid var(--fg);
}

.x5 .xh .l {
  padding: 70px 48px 60px;
}

.x5 .xh h1 {
  font-family: var(--gr);
  font-size: 190px;
  font-weight: 600;
  letter-spacing: -.07em;
  line-height: .9;
  margin: 26px 0 20px;
}

.x5 .xh h1 small {
  font-size: 64px;
  letter-spacing: -.02em;
  margin-left: 6px;
  color: var(--bl);
}

.x5 .xh h2 {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.045em;
}

.x5 .xh p {
  color: var(--mute);
  max-width: 480px;
  margin: 18px 0 32px;
}

.x5 .xh .row {
  display: flex;
  gap: 10px;
}

.x5 .xh .r {
  position: relative;
  filter: grayscale(1) contrast(1.1);
  border-left: 1px solid var(--fg);
}

.x5 .dim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-family: var(--mo);
  font-size: 15px;
}

.x5 .spec {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-bottom: 1px solid var(--fg);
  background: var(--bg);
}

.x5 .spec div {
  padding: 26px 48px 30px;
  border-right: 1px solid var(--line);
}

.x5 .spec b {
  display: block;
  font-family: var(--gr);
  font-size: 66px;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1.1;
  margin-top: 6px;
}

.x5 .spec b small {
  font-family: var(--ko);
  font-size: 18px;
  margin-left: 4px;
  letter-spacing: 0;
}

.x5 .head {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 36px;
}

.x5 .head h2 {
  font-size: 40px;
  font-weight: 700;
}

.x5 .head .all {
  margin-left: auto;
  font-weight: 600;
  color: var(--bl);
}

.x5 .capa {
  padding: 100px 48px;
}

.x5 .g3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}

.x5 .cd .ph {
  aspect-ratio: 4/5;
  filter: grayscale(1);
}

.x5 .cd h3 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 18px;
}

.x5 .cd p {
  color: var(--mute);
  margin: 4px 0 10px;
}

.x5 .prod {
  padding: 0 48px 100px;
}

.x5 .g4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--fg);
  border-left: 1px solid var(--fg);
}

.x5 .g4 div {
  border-right: 1px solid var(--fg);
  border-bottom: 1px solid var(--fg);
  padding: 20px;
  background: var(--bg);
  display: grid;
  gap: 4px;
}

.x5 .g4 svg {
  color: var(--fg);
  height: 120px;
  width: 100%;
  margin: 10px 0;
}

.x5 .g4 b {
  font-size: 20px;
}

.x5 .g4 small {
  color: var(--mute);
}

.x5 .g4 .on {
  background: var(--fg);
  color: #fff;
}

.x5 .g4 .on svg {
  color: #8fa0ff;
}

.x5 .g4 .on .mono,.x5 .g4 .on small {
  color: #aaa;
}

.x5 .hist {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  padding: 0 48px 110px;
}

.x5 .certs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 20px;
}

.x5 .certs span {
  border: 1px solid var(--fg);
  padding: 20px 14px;
  font-family: var(--gr);
  font-weight: 600;
  background: var(--bg);
}

.x5 .tl {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  margin-top: 20px;
  border-top: 2px solid var(--fg);
}

.x5 .tl div {
  padding-top: 16px;
  position: relative;
}

.x5 .tl div::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--bl);
}

.x5 .tl b {
  display: block;
  font-family: var(--gr);
  font-size: 28px;
  font-weight: 600;
}

.x5 .tl span {
  font-size: 14px;
  color: var(--mute);
}

.x5 .ft {
  background: var(--fg);
  color: #fff;
  padding: 40px 48px 30px;
}

.x5 .ft .info {
  display: flex;
  justify-content: space-between;
  font-family: var(--mo);
  font-size: 12.5px;
  color: #9a9a9a;
}

.x5 .ft .mark {
  font-family: var(--gr);
  font-size: 220px;
  font-weight: 600;
  letter-spacing: -.075em;
  line-height: .85;
  margin-top: 40px;
}

.x5 .s-hero {
  padding: 60px 48px 50px;
  border-bottom: 1px solid var(--fg);
  background: var(--bg);
}

.x5 .s-hero h1 {
  font-family: var(--gr);
  font-size: 190px;
  font-weight: 600;
  letter-spacing: -.07em;
  line-height: .9;
  margin: 20px 0 20px;
}

.x5 .s-hero h1 span {
  font-family: var(--ko);
  font-size: 44px;
  letter-spacing: -.04em;
  margin-left: 20px;
  color: var(--bl);
}

.x5 .s-hero p {
  color: var(--mute);
  max-width: 600px;
}

.x5 .cat {
  display: grid;
  grid-template-columns: 220px 1fr;
}

.x5 .cat aside {
  border-right: 1px solid var(--fg);
  padding: 30px 0;
  background: var(--bg);
}

.x5 .cat aside span {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px 12px 48px;
  font-weight: 600;
}

.x5 .cat aside em {
  font-family: var(--mo);
  font-size: 12px;
  color: var(--mute);
}

.x5 .cat aside .on {
  background: var(--fg);
  color: #fff;
}

.x5 .tb {
  padding: 30px 48px 80px 36px;
}

.x5 .tb .th,.x5 .tb .tr {
  display: grid;
  grid-template-columns: 150px 110px 1fr 120px 100px 90px 80px;
  gap: 16px;
  align-items: center;
}

.x5 .tb .th {
  font-family: var(--mo);
  font-size: 12px;
  color: var(--mute);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fg);
}

.x5 .tb .tr {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.x5 .tb .tr b {
  font-size: 18px;
}

.x5 .tb .dw svg {
  height: 60px;
  width: 100%;
  color: var(--bl);
}

.x5 .tb .dl {
  font-weight: 600;
  color: var(--bl);
}

.x5 .band {
  background: var(--bl);
  color: #fff;
  padding: 60px 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 30px;
}

.x5 .band h2 {
  font-size: 48px;
  font-weight: 700;
}

.x5 .band p {
  opacity: .8;
  grid-column: 1;
}

.x5 .band .btn {
  grid-column: 2;
  grid-row: 1/3;
}


/* ========== 42. 6. IT · SaaS: 다크 글래스 ========== */
.x6 {
  --bg: #07070c;
  --fg: #f2f2f7;
  --ac: #8b7bff;
  --mute: #9a9ab0;
  --gl: rgba(255,255,255,.055);
  --gb: rgba(255,255,255,.11);
  --ph: #1b1830;
}

.x6 .glow {
  position: absolute;
  left: 50%;
  top: -240px;
  width: 1400px;
  height: 1000px;
  margin-left: -700px;
  filter: blur(60px) saturate(1.3);
  opacity: .55;
  border-radius: 50%;
  z-index: 0;
}

.x6>* {
  position: relative;
  z-index: 1;
}

.x6 .k {
  font-family: "Outfit",sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--ac);
}

.x6 .btn {
  display: inline-block;
  background: #fff;
  color: #0b0b12;
  border-radius: 12px;
  padding: 13px 22px;
  font-weight: 700;
  font-size: 15px;
}

.x6 .btn.gl {
  background: var(--gl);
  color: var(--fg);
  border: 1px solid var(--gb);
}

.x6 .hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 22px 40px 0;
  padding: 12px 14px 12px 24px;
  border-radius: 18px;
  background: var(--gl);
  border: 1px solid var(--gb);
  backdrop-filter: blur(14px);
}

.x6 .logo {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: "Outfit",sans-serif;
  font-weight: 700;
  font-size: 21px;
}

.x6 .logo i {
  width: 24px;
  height: 24px;
  border-radius: 8px 50% 50% 50%;
  background: linear-gradient(135deg,#8b7bff,#ff8bd2);
}

.x6 nav {
  display: flex;
  gap: 32px;
  color: var(--mute);
  font-size: 15px;
}

.x6 nav .on {
  color: var(--fg);
}

.x6 .hd .r {
  display: flex;
  gap: 18px;
  align-items: center;
  color: var(--mute);
}

.x6 .xh {
  text-align: center;
  padding: 90px 40px 0;
}

.x6 .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--gl);
  border: 1px solid var(--gb);
  color: #d6d0ff;
  font-size: 14px;
  font-weight: 600;
}

.x6 .xh h1 {
  font-size: 104px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.06em;
  margin: 26px 0 22px;
}

.x6 .xh h1 span,.x6 .s-hero h1 span {
  background: linear-gradient(90deg,#b3a8ff,#ff9ad5 60%,#ffd18b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.x6 .xh p {
  color: var(--mute);
  font-size: 19px;
  max-width: 620px;
  margin: 0 auto 32px;
}

.x6 .row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.x6 .app {
  display: grid;
  grid-template-columns: 64px 1fr;
  margin: 60px auto 0;
  width: 1000px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(18,17,30,.78);
  border: 1px solid var(--gb);
  backdrop-filter: blur(16px);
  text-align: left;
  box-shadow: 0 40px 90px -40px rgba(139,123,255,.6);
}

.x6 .app .side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 20px;
  border-right: 1px solid var(--gb);
}

.x6 .app .side i {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255,255,255,.1);
}

.x6 .app .side .lg {
  background: linear-gradient(135deg,#8b7bff,#ff8bd2);
}

.x6 .app .side .on {
  background: rgba(139,123,255,.6);
}

.x6 .app .main {
  padding: 24px 28px;
}

.x6 .app .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.x6 .app .top b {
  font-size: 20px;
}

.x6 .app .pl {
  background: var(--ac);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 9px;
}

.x6 .app .cols {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}

.x6 .app .cols>div {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--gb);
  border-radius: 14px;
  padding: 14px;
}

.x6 .app .cols small {
  font-size: 13px;
  color: var(--mute);
  font-weight: 600;
}

.x6 .app .cols small em {
  background: rgba(255,255,255,.1);
  padding: 1px 7px;
  border-radius: 6px;
  margin-left: 4px;
}

.x6 .app .cols p {
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 11px 12px;
  margin-top: 10px;
  font-size: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.x6 .app .cols p i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.x6 .d0 {
  background: #8b7bff;
}

.x6 .d1 {
  background: #ffb44d;
}

.x6 .d2 {
  background: #3ddc97;
}

.x6 .app .chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 110px;
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--gb);
}

.x6 .app .chart i {
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg,#b3a8ff,#6a5cff);
}

.x6 .logos {
  display: flex;
  justify-content: center;
  gap: 66px;
  padding: 70px 40px;
  color: #5d5d72;
  font-weight: 800;
  font-size: 20px;
}

.x6 .bento,.x6 .price {
  padding: 70px 40px;
}

.x6 .head {
  margin-bottom: 34px;
}

.x6 .head h2 {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.05em;
  margin-top: 10px;
}

.x6 .grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: 330px 260px;
  gap: 16px;
}

.x6 .b {
  border-radius: 26px;
  background: var(--gl);
  border: 1px solid var(--gb);
  padding: 28px;
  overflow: hidden;
  position: relative;
}

.x6 .b h3 {
  font-size: 24px;
  font-weight: 700;
  margin-top: 6px;
  line-height: 1.35;
}

.x6 .b1 {
  grid-row: 1/3;
}

.x6 .b1 .app {
  width: auto;
  margin: 24px -60px 0 0;
  box-shadow: none;
  grid-template-columns: 50px 1fr;
}

.x6 .b1 .app .cols {
  grid-template-columns: repeat(2,1fr);
}

.x6 .b1 .app .cols>div:nth-child(3) {
  display: none;
}

.x6 .calm {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 6px;
  margin-top: 20px;
}

.x6 .calm i {
  font-style: normal;
  font-size: 12px;
  text-align: center;
  padding: 6px 0;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: var(--mute);
}

.x6 .calm .on {
  background: var(--ac);
  color: #fff;
}

.x6 .b3 {
  background-size: cover;
}

.x6 .b3::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(7,7,12,.1),rgba(7,7,12,.75));
}

.x6 .b3>* {
  position: relative;
}

.x6 .toast {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14.5px;
  font-weight: 600;
}

.x6 .bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
  margin-top: 22px;
}

.x6 .bars i {
  flex: 1;
  border-radius: 6px;
  background: linear-gradient(180deg,#ffd18b,#ff8bd2);
}

.x6 .ints {
  display: grid;
  grid-template-columns: repeat(3,54px);
  gap: 12px;
  margin-top: 22px;
}

.x6 .ints i {
  font-style: normal;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--gb);
  display: grid;
  place-items: center;
  font-family: "Outfit",sans-serif;
  font-weight: 700;
  font-size: 20px;
}

.x6 .g3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}

.x6 .pc {
  border-radius: 26px;
  background: var(--gl);
  border: 1px solid var(--gb);
  padding: 34px;
  display: grid;
  gap: 10px;
  justify-items: start;
}

.x6 .pc b {
  font-size: 44px;
  font-weight: 800;
}

.x6 .pc b small {
  font-size: 16px;
  color: var(--mute);
  font-weight: 500;
  margin-left: 4px;
}

.x6 .pc p {
  color: var(--mute);
  margin-bottom: 14px;
}

.x6 .pc.hot {
  background: linear-gradient(160deg,rgba(139,123,255,.35),rgba(255,139,210,.12));
  border-color: rgba(179,168,255,.5);
}

.x6 .quote {
  padding: 90px 140px;
  text-align: center;
}

.x6 .quote p {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.04em;
}

.x6 .who {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  margin-top: 30px;
  text-align: left;
}

.x6 .who i {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.x6 .who span {
  display: block;
  color: var(--mute);
  font-size: 14px;
}

.x6 .ft {
  border-top: 1px solid var(--gb);
  padding: 50px 40px 34px;
}

.x6 .ft .mark {
  font-family: "Outfit",sans-serif;
  font-size: 200px;
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .9;
  background: linear-gradient(180deg,#fff,rgba(255,255,255,.08));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.x6 .ft .info {
  display: flex;
  justify-content: space-between;
  color: var(--mute);
  font-size: 14px;
  margin-top: 20px;
}

.x6 .s-hero {
  text-align: center;
  padding: 90px 40px 40px;
}

.x6 .s-hero h1 {
  font-size: 96px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.06em;
  margin-top: 16px;
}

.x6 .s-hero .band {
  height: 180px;
  border-radius: 28px;
  margin-top: 50px;
}

.x6 .frow {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items: center;
  padding: 70px 40px;
}

.x6 .frow.rev .t {
  order: 2;
}

.x6 .frow h2 {
  font-size: 52px;
  font-weight: 800;
  margin: 8px 0 14px;
}

.x6 .frow p {
  color: var(--mute);
  font-size: 17px;
  margin-bottom: 22px;
}

.x6 .frow ul {
  list-style: none;
  display: grid;
  gap: 12px;
}

.x6 .frow li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
}

.x6 .frow li svg {
  color: var(--ac);
}

.x6 .frow .v {
  border-radius: 28px;
  padding: 40px 0 40px 40px;
  overflow: hidden;
}

.x6 .frow .v .app {
  width: auto;
  margin: 0 -40px 0 0;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}

.x6 .cta {
  text-align: center;
  padding: 90px 40px 110px;
}

.x6 .cta h2 {
  font-size: 58px;
  font-weight: 800;
  margin-bottom: 30px;
  letter-spacing: -.05em;
}

.x .hd,.x .ft {
  position: relative;
  inset: auto;
  z-index: auto;
  margin: 0;
  backdrop-filter: none;
}

.x6 .hd {
  margin: 22px 40px 0;
  backdrop-filter: blur(14px);
}

.x .logo {
  align-items: center;
}

.x2 .hd .logo {
  display: block;
}

.x5 .logo span {
  font-size: inherit;
  color: var(--bl);
}


/* ========== 43. 하단 개인정보처리방침 · 이용약관 링크 ========== */
.g-fend {
  text-align: right;
}

/* 하단 개인정보처리방침 · 이용약관 링크 */
.g-flegal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 15.5px;
  line-height: 1.9;
}

.g-flegal a {
  color: var(--g-ink-2);
  transition: color .3s;
}

.g-flegal a:hover {
  color: var(--g-road);
}

.g-flegal a.pv {
  font-weight: 700;
  color: var(--g-ink);
}

/* 화면 폭 860px 이하일 때 (태블릿 · 휴대폰) */
@media (max-width:860px) {
  .g-fend {
    text-align: left;
  }
  .g-flegal {
    justify-content: flex-start;
  }
}

/* 맨 위 메뉴 오른쪽: 로그인 · 회원가입 (로그인하면 내 정보 · 로그아웃) */
/* 메뉴 오른쪽 로그인 · 회원가입 링크 */
.g-util {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 4px;
  padding-left: 28px;
  border-left: 1px solid var(--g-line);
  line-height: 1.2;
}

.g-gnav .g-util a {
  display: inline-block;
  font-family: var(--g-ko);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--g-ink-2);
  padding: 2px 0;
  transition: color .25s;
}

.g-gnav .g-util a:last-child {
  color: var(--g-ink);
  font-weight: 600;
}

.g-gnav .g-util a:hover,.g-gnav .g-util a:focus-visible {
  color: var(--g-road);
}

.g-util .g-road-ln {
  display: none;
}

/* 화면 폭 1100px 이하일 때 (작은 노트북 · 태블릿 · 휴대폰) */
@media (max-width:1100px) {
  .g-util {
    padding-left: 0;
    border-left: 0;
    margin-right: -22px;
    gap: 12px;
  }
  .g-gnav .g-util a {
    font-size: 15px;
  }
}

/* 화면 폭 420px 이하일 때 (휴대폰) */
@media (max-width:420px) {
  .g-gnav .g-util a {
    font-size: 14px;
  }
  .g-util {
    gap: 10px;
  }
}

/* ===== 별무리 줄기: 왼쪽에서 오른쪽으로 그려진 뒤 끝에 별이 나타남 =====
   줄기(images/deco/stars-stem)는 길이에 맞춰 늘어나고, 별 부분(stars-head)은 비율 그대로라 찌그러지지 않음 */
.g-road-ln,.g-route,.g-link::after {
  --hw: calc(var(--sh) * 1.155);
  background: url(../images/deco/stars-head-s.png) right top/var(--hw) 100% no-repeat,url(../images/deco/stars-stem-s.png) left top/calc(100% - var(--hw) + 1px) 100% no-repeat;
  clip-path: inset(0 100% 0 0);
}


/* ========== 44. 맨 위 메뉴 ========== */
.g-road-ln {
  --sh: 30px;
  position: absolute;
  left: -4px;
  bottom: -17px;
  width: calc(100% + 22px);
  height: var(--sh);
  pointer-events: none;
  transition: clip-path .6s cubic-bezier(.6,.05,.25,1);
}

.g-gnav a:hover .g-road-ln,
.g-gnav a:focus-visible .g-road-ln,
.g-gnav a[aria-current] .g-road-ln {
  clip-path: inset(0 -4px 0 0);
}


/* ========== 45. 페이지 머리 · 메인 첫 화면의 긴 줄기 ========== */
.g-route {
  --sh: 90px;
  height: var(--sh);
  background-image: url(../images/deco/stars-head.png),url(../images/deco/stars-stem.png);
  animation: g-star-draw 2s .3s cubic-bezier(.6,.05,.2,1) forwards;
}

@keyframes g-star-draw {
  to {
    clip-path: inset(0 -2% 0 0);
  }
}


/* ========== 46. 밑줄 링크 (예: 제작 요금 보기 →) ========== */
.g-link::after {
  --sh: 16px;
  height: var(--sh);
  bottom: -13px;
  background-color: transparent;
  transform: none;
  transition: clip-path .5s cubic-bezier(.6,.05,.25,1);
}

.g-link:hover::after,.g-link:focus-visible::after {
  transform: none;
  clip-path: inset(0 -2px 0 0);
}

.g-ct.dark .g-link::after {
  background-color: transparent;
  background-image: url(../images/deco/stars-head-s-mint.png),url(../images/deco/stars-stem-s-mint.png);
}

/* 기기 설정에서 "움직임 줄이기"를 켠 방문자 — 애니메이션을 끔 */
@media (prefers-reduced-motion:reduce) {
  .g-route {
    animation: none;
    clip-path: none;
  }
}


/* ========== 47. 메인 화면 게시판 최신글 ========== */
.g-latest {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 28px 40px;
  margin-top: 90px;
}

.g-lt-col {
  border-top: 1px solid var(--g-ink);
}

.g-lt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0 10px;
}

.g-lt-head b {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.03em;
}

.g-lt-head a {
  font-size: 15.5px;
  color: var(--g-ink-3);
  transition: color .25s;
}

.g-lt-head a:hover {
  color: var(--g-road);
}

.g-lt-col ul {
  list-style: none;
}

.g-lt-col li a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--g-line);
  transition: color .25s,padding .25s;
}

.g-lt-col li a:hover {
  color: var(--g-road);
  padding-left: 6px;
}

.g-lt-col li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
}

.g-lt-col li em {
  font-style: normal;
  font-family: var(--g-en);
  font-size: 15px;
  color: var(--g-ink-3);
}

.g-lt-col li .pin {
  font-style: normal;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--g-road);
  padding: 1px 7px;
  margin-right: 8px;
  vertical-align: 1px;
}

/* 화면 폭 860px 이하일 때 (태블릿 · 휴대폰) */
@media (max-width:860px) {
  .g-latest {
    margin-top: 60px;
  }
}

/* ========== 48. 첫 화면 짙은 색 (반전) ========== */
/* 2026-10-21 적용. 원래의 흰 바탕 첫 화면으로 되돌리려면 이 48번 구역 전체를 지우면 됩니다.
   (흰 바탕 원본: _backup/2026-10-21_반전전_메인/) */

/* ---------- 48-1. 색 (자주 바꾸는 값) ---------- */
/* 첫 화면 안에서만 색 이름의 값을 바꿉니다. 사이트의 다른 구역에는 영향 없음 */
.g-hero {
  --g-paper: #0f231b;             /* 첫 화면 바탕 (짙은 초록) */
  --g-ink: #f1f4f2;               /* 제목 · 기본 글자 (밝은 흰색) */
  --g-ink-2: #c6d0ca;             /* 설명 글자 */
  --g-ink-3: #8ea69a;             /* 흐린 글자 */
  --g-line: rgba(255,255,255,.14);/* 구분선 */
  --g-road: #8fd1b0;              /* 강조색 (밝은 민트) — '길', 핵심 문장, 선 */
  --g-road-soft: rgba(143,209,176,.14);
  background: var(--g-paper);
  color: var(--g-ink);
}


/* ---------- 48-2. 디자인 컨셉 카드는 원래 밝은 색 유지 ---------- */
.g-hero .g-strip {
  --g-paper: #ffffff;
  --g-ink: #161616;
  --g-ink-2: #55554f;
  --g-ink-3: #8c8c85;
  --g-line: #e2e2dc;
  --g-road: #1f6b4e;
  --g-road-soft: #e6f0eb;
}


/* ---------- 48-3. 배경 격자 · 빛줄기 ---------- */
/* 옅은 격자 선 */
.g-hero .g-scan::before {
  background-image: linear-gradient(rgba(143,209,176,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(143,209,176,.08) 1px,transparent 1px);
}

/* 왼쪽 → 오른쪽으로 지나가는 빛줄기: 앞쪽 끝이 밝게 빛남 */
.g-hero .g-scan-beam {
  background: linear-gradient(90deg,rgba(143,209,176,0) 0,rgba(143,209,176,.08) 70%,rgba(143,209,176,.28) 99%,rgba(200,245,222,.8) 100%);
}


/* ---------- 48-4. 진단 아이콘 ---------- */
/* 빛줄기가 지나가기 전 (흐린 흰색) */
.g-hero .g-scan-tag {
  color: rgba(255,255,255,.22);
}

.g-hero .g-scan-tag::before {
  color: rgba(255,255,255,.18);
}

.g-hero .g-scan-tag i {
  background: rgba(255,255,255,.10);
}

/* 빛줄기가 지나간 뒤 (민트로 켜짐) */
.g-hero .g-scan-tag.hit {
  color: rgba(143,209,176,.75);
}

.g-hero .g-scan-tag.warn.hit {
  color: rgba(143,209,176,.6);
}

.g-hero .g-scan-tag.hit::before {
  color: rgba(143,209,176,.6);
}

.g-hero .g-scan-tag.warn.hit i::after {
  background: #e59a87;
}

/* 마우스를 올린 아이콘 */
.g-hero .g-scan-tag.over,
.g-hero .g-scan-tag.over::before {
  color: #c8f5de;
}

/* 아이콘 오른쪽 위 체크 · 주의 동그라미 */
.g-hero .g-scan-tag em {
  background: #0f231b;
}

.g-hero .g-scan-tag.ok em {
  color: #8fd1b0;
}

.g-hero .g-scan-tag.warn em {
  color: #f08a74;
}


/* ---------- 48-5. 아이콘 설명 말풍선 · AI SCAN 표시 ---------- */
.g-hero .g-scan-tip {
  background: #143026;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}

.g-hero .g-scan-tip small.warn {
  color: #f08a74;
  background: rgba(240,138,116,.15);
}

/* 왼쪽 위 "AI SCAN 온라인 노출 진단" 글자 */
.g-hero .g-scan-status {
  color: rgba(143,209,176,.8);
}


/* ---------- 48-6. 버튼 ---------- */
/* 평소: 흰 버튼에 짙은 글자 / 마우스를 올리면 원래 초록이 차오르고 글자는 흰색 */
.g-hero .g-btn {
  background: #f1f4f2;
  color: #0f231b;
}

.g-hero .g-btn::before {
  background: #1f6b4e;
}

.g-hero .g-btn:hover,
.g-hero .g-btn:focus-visible {
  color: #ffffff;
}


/* ---------- 48-7. 연결 지도 (자료 → GIL → 고객의 반응) ---------- */
.g-hero .g-syn-n {
  background: rgba(255,255,255,.05);
}

.g-hero .g-syn-col[data-col="1"] .g-syn-n {
  border-color: rgba(143,209,176,.4);
}

.g-hero .g-syn-n.hit {
  box-shadow: 0 0 0 6px rgba(143,209,176,.22);
}

.g-hero .g-syn-loop i {
  border-color: rgba(143,209,176,.5);
}


/* ---------- 48-8. 컨셉 넘기기 화살표 ---------- */
.g-hero .g-arrows button {
  background: transparent;
  color: var(--g-ink);
  border-color: var(--g-line);
}

.g-hero .g-arrows button:hover {
  background: #f1f4f2;
  color: #0f231b;
  border-color: #f1f4f2;
}


/* ---------- 48-9. 제목 아래 별무리 (흰색) ---------- */
/* 제목 밑에 그려지는 큰 별무리 줄기를 흰색 그림으로 바꿈 (녹색 버튼에 쓰는 흰 별무리와 같은 그림) */
.g-hero .g-route {
  background-image: url(../images/deco/stars-head-w.png),url(../images/deco/stars-stem-w.png);
}


/* ========== 49. 고객 정보 보호 (짙은 초록 띠, 카드 4개) ========== */
/* 2026-10-27 추가. 자세한 내용은 security.html 로 연결됩니다.
   첫 화면(48번)과 같은 짙은 초록 색을 이 띠 안에서만 씁니다. */
.g-sc-sec {
  --g-paper: #0f231b;             /* 띠 바탕 (짙은 초록) */
  --g-ink: #f1f4f2;               /* 제목 · 기본 글자 (밝은 흰색) */
  --g-ink-2: #c6d0ca;             /* 설명 글자 */
  --g-ink-3: #8ea69a;             /* 흐린 글자 */
  --g-line: rgba(255,255,255,.14);/* 구분선 */
  --g-road: #8fd1b0;              /* 강조색 (밝은 민트) */
  background: var(--g-paper);
  color: var(--g-ink);
}

/* 카드 4개를 한 줄에 */
.g-sc4 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border-top: 1px solid var(--g-ink);
}

.g-sc4 li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 24px 34px;
  border-right: 1px solid var(--g-line);
  border-bottom: 1px solid var(--g-line);
}

.g-sc4 li:last-child {
  border-right: 0;
}

/* 카드 위 번호 (01 · 02 …) */
.g-sc-no {
  font-family: var(--g-en);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--g-road);
}

.g-sc4 b {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.45;
}

.g-sc4 p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--g-ink-2);
}

/* 화면 폭 1100px 이하일 때 (작은 노트북 · 태블릿): 2칸씩 두 줄 */
@media (max-width: 1100px) {
  .g-sc4 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .g-sc4 li:nth-child(2n) {
    border-right: 0;
  }
}

/* 화면 폭 860px 이하일 때 (태블릿 · 휴대폰): 한 줄에 하나 */
@media (max-width: 860px) {
  .g-sc4 {
    grid-template-columns: 1fr;
  }

  .g-sc4 li {
    border-right: 0;
    padding: 24px 0 28px;
  }
}


/* ========== 50. 서비스 아래 AI 직원 띠 ========== */
/* 2026-10-28 추가. 제작 · 마케팅 상세 아래에 붙는 한 줄 띠 — 전체가 ai-staff.html 로 가는 링크 */
.g-ai-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 36px;
  margin-top: 40px;
  padding: 34px 34px 32px;
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-left: 4px solid var(--g-road);
  transition: border-color .3s, box-shadow .3s;
}

.g-ai-band:hover,
.g-ai-band:focus-visible {
  border-color: var(--g-road);
  box-shadow: 0 18px 40px -26px rgba(22, 22, 22, .35);
}

/* 왼쪽 위 "New · 시범 업체 모집" 표시 */
.g-ai-tag {
  position: absolute;
  top: -13px;
  left: 30px;
  background: var(--g-road);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}

.g-ai-txt .g-svc-en {
  font-family: var(--g-en);
  font-size: 17px;
  color: var(--g-road);
  letter-spacing: .04em;
}

.g-ai-txt h3 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.04em;
  margin: 4px 0 10px;
}

.g-ai-txt p {
  color: var(--g-ink-2);
  font-size: 16px;
  line-height: 1.7;
}

/* 네 역할: 접수 담당(.on)만 초록 */
.g-ai-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.g-ai-roles li {
  border: 1px solid var(--g-line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--g-ink-2);
}

.g-ai-roles li.on {
  background: var(--g-road);
  border-color: var(--g-road);
  color: #fff;
}

.g-ai-roles small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--g-ink-3);
}

.g-ai-band .g-link {
  white-space: nowrap;
}

/* 화면 폭 1100px 이하일 때: 링크를 아래로 */
@media (max-width: 1100px) {
  .g-ai-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .g-ai-band .g-link {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* 화면 폭 860px 이하일 때 (태블릿 · 휴대폰): 한 줄에 하나 */
@media (max-width: 860px) {
  .g-ai-band {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 34px 22px 26px;
  }

  .g-ai-txt h3 {
    font-size: 24px;
  }
}

/* 50-1. AI 직원 띠 아래 "무료 업무 진단부터" 링크 */
.g-ai-check {
  margin-top: 18px;
  text-align: right;
}

@media (max-width: 860px) {
  .g-ai-check {
    text-align: left;
  }
}