/**
 * 티오더GPT 에이전트 페이지 스타일
 * 페이지: /torderGptAgent
 * 템플릿: /page/service/torder-gpt-agent/
 *
 * 디자인 토큰: src/main/resources/static/css/common.css :root
 * - 색상: --torder-red-*, --torder-gray-*, --torder-red-gradient
 * - 폰트: --font-size-h2~6, --font-size-subtitle1~4, --font-size-body1~6, --font-size-button1~3
 * - 폰트 패밀리: Pretendard (모든 텍스트, letter-spacing -2.5%)
 *
 * 반응형 브레이크포인트(공통): 1199 (Tablet), 599 (Mobile)
 * .com-center 패딩: 80px(PC) → 60px(≤1199) → 20px(≤599)
 */

.gpt-agent-wrap {
  position: relative;
  width: 100%;
}
/* overflow:hidden 은 하위 position:sticky 를 깨트리므로 페이지 wrap 에선 풀고
   섹션별로 필요한 곳만 자체 overflow 를 명시한다. */
.sub-content-wrap:has(.gpt-agent-wrap) {
  overflow: visible;
}

/* ============================================================
 * Section 1 - Hero
 * Figma node: 2197:1790 > 2325:7903 (PC) / 2207:8754 (Tablet) / 2325:11127 (Mobile)
 * PC 1920×840 / Tablet 1024×786 / Mobile 360×567
 * ============================================================ */
.section1 {
  position: relative;
  width: 100%;
  height: 840px; /* Figma Section_01 높이 고정 */
  background: url("../../img/pages/torderGptAgent/section1-bg.png") no-repeat center center / cover;
  overflow: hidden;
}
.section1 .com-center {
  position: relative;
  height: 840px;
  padding: 0; /* Section 1은 com-center 외부 left/right 기준 절대 좌표 사용 (default 80 padding override) */
}

/* 좌측 텍스트 영역 - Figma title.y=277, x=0(com-center 외부 left 기준) */
.section1 .section1-text {
  position: absolute;
  top: 277px;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
}
.section1 .section1-title {
  font-size: var(--font-size-h2); /* 52px */
  color: var(--color-white);
  display: flex;
  flex-direction: column;
}
.section1 .section1-title span {
  display: block;
}

/* CTA 버튼 - 검정 알약 */
.section1 .section1-btn {
  display: inline-block;
  padding: 20px 36px;
  border-radius: 100px;
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--font-size-button1); /* 22px */
  line-height: 1;
  letter-spacing: -0.025em;
  transition: all 0.3s;
}
.section1 .section1-btn:hover {
  background: var(--torder-gray-800);
}

/* 우측 휴대폰 mockup - phone-pc.svg 통이미지 (794×659) 기준 */
.section1 .section1-phone {
  position: absolute;
  bottom: 0;
  right: 3%;
  width: 794px;
  height: auto;
  z-index: 2;
}

/* 모바일 합성 SVG - PC/Tablet 에서는 숨김 */
.section1 .section1-phone-mobile-img {
  display: none;
}
/* PC/Tablet : phone-pc.svg 통이미지가 폰베젤+화면컨텐츠+로고+글로우 모두 합성하므로
   기존 HTML 의 화면 안 statusbar/카톡헤더/채팅 + 큰 t'order 로고 오버레이는 모두 hide */
.section1 .section1-phone-screen,
.section1 .section1-phone-logo-overlay {
  display: none;
}
.section1 .section1-phone-frame {
  position: relative;
  width: 100%;
}
.section1 .section1-phone-frame-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 휴대폰 화면(스크린 영역) - 프레임 안쪽에 절대 위치 */
.section1 .section1-phone-screen {
  position: absolute;
  top: 17px;
  left: 4%;
  right: 4%;
  bottom: 14px;
  border-radius: 57px;
  background: linear-gradient(to bottom, #d5e3ec 0%, #8fb5ce 44%, #427da4 64%, #427da4 100%);
  padding: 38px 27px 0;
  overflow: hidden;
}

/* 상태바 (시간 / 안테나·와이파이·배터리) - dynamic island 양옆 */
.section1 .section1-phone-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 21px;
  padding: 0 4px;
  margin-bottom: 18px;
}
/* Figma SVG 들이 width="100%" height="100%"로 부모 박스를 채우므로
 * 각 img에 명시적 width/height 지정 (Figma viewBox 비율 그대로) */
.section1 .section1-phone-statusbar .status-time {
  width: 41px;
  height: 21px;
  flex-shrink: 0;
}
.section1 .section1-phone-statusbar .status-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.section1 .section1-phone-statusbar .status-icons img:nth-child(1) { width: 24px; height: 21px; }
.section1 .section1-phone-statusbar .status-icons img:nth-child(2) { width: 23px; height: 21px; }
.section1 .section1-phone-statusbar .status-icons img:nth-child(3) { width: 31px; height: 21px; }

/* 카카오톡 채팅방 헤더 */
.section1 .section1-phone-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  margin-bottom: 28px;
}
.section1 .section1-phone-chat-header .chat-header-left {
  display: flex;
  align-items: center;
  gap: 5px;
}
.section1 .section1-phone-chat-header .chat-arrow {
  width: 13px;
  height: 25px;
  margin-right: 14px;
  flex-shrink: 0;
}
.section1 .section1-phone-chat-header .chat-title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--torder-gray-800);
}
.section1 .section1-phone-chat-header .chat-badge {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}
.section1 .section1-phone-chat-header .chat-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section1 .section1-phone-chat-header .chat-header-right img {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}

/* 채팅 메시지 본문 */
.section1 .section1-phone-chat-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 사용자 메시지 (카톡 노란 버블) */
.section1 .chat-msg-user {
  display: flex;
  justify-content: flex-end;
}
.section1 .chat-bubble-user {
  background: #fee500; /* 카카오 옐로우 — 브랜드 specific, 토큰 없음 */
  border: 1.115px solid var(--color-white);
  border-radius: 16.7px;
  padding: 12px 18px;
  font-size: 19px;
  font-weight: 500;
  color: var(--color-black);
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* AI 응답 */
.section1 .chat-msg-ai {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.section1 .chat-ai-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.section1 .chat-ai-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14.4px;
  background: linear-gradient(116.81deg, var(--torder-gray-700) 7.6%, var(--torder-gray-950) 85.6%);
  flex-shrink: 0;
}
.section1 .chat-ai-logo img {
  width: 30px;
  height: 30px;
}
.section1 .chat-ai-name {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--torder-gray-950);
}
.section1 .chat-ai-card {
  width: calc(100% - 60px);
  margin-left: 60px;
  background: var(--color-white);
  border: 1.115px solid var(--color-white);
  border-radius: 20px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.section1 .chat-ai-text {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--color-black);
  width: 100%;
}
.section1 .chat-ai-btn {
  width: 100%;
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--torder-red-gradient);
  color: var(--color-white);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

/* 큰 t'order 로고 오버레이
 * Figma: 폰 size 500x1018, 로고 size 200x200
 *   - 로고 center.top = 287.16 (phone top 기준) → top:187 (translateY 안 쓰고 직접 위치)
 *   - 로고 center.left = 5.52 (phone left 기준) → left:-94 (logo는 phone 좌측으로 94 튀어나옴)
 */
.section1 .section1-phone-logo-overlay {
  position: absolute;
  top: 187px;
  left: -94px;
  width: 200px;
  height: 200px;
  z-index: 3;
  border-radius: 50px;
  background: linear-gradient(126.88deg, #525252 6.83%, #292929 35.47%, var(--color-black) 98.19%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 30px 0 rgba(255, 255, 255, 0.55),
    0 0 110px 0 rgba(255, 255, 255, 0.66),
    0 0 200px 0 var(--color-white);
}
.section1 .section1-phone-logo-overlay img {
  width: 65%;
  height: 65%;
}

/* ============================================================
 * Section 2 - 검정 띠 promo
 * Figma node: 2137:3788 (PC) / 2207:11670 (Tablet) / 2207:15619 (Mobile)
 * PC 1920×396 / Tablet 1024×342 / Mobile 360×256
 * ============================================================ */
.section2 {
  position: relative;
  width: 100%;
  background: #131419; /* Figma t'order Gray/900 (공통 토큰 매칭값 없어 hex 사용) */
  padding: 100px 0 108px; /* Figma: top 100, bottom 108 */
}
.section2 .com-center {
  position: relative;
  z-index: 3; /* Section1 의 phone(z=2) 위에 텍스트/아이콘 노출 */
}
.section2 .section2-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
/* 아이콘 영역 — 3장 absolute stack, opacity 크로스페이드로 교체
 * 9s cycle = 3개 × 3s 슬롯 / 슬롯당 hold 2.5s + fade 0.5s
 * 키워드 텍스트(.section2-keyword-slot) 는 기존 slide 유지 — 사이클 9s 동기화 */
.section2 .section2-icon {
  position: relative;
  width: 90px;
  height: 90px;
  display: inline-block;
  flex-shrink: 0;
}
.section2 .section2-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}
.section2 .section2-icon img:nth-child(1) { animation: section2-icon-fade-1 6s linear infinite; }
.section2 .section2-icon img:nth-child(2) { animation: section2-icon-fade-2 6s linear infinite; }
.section2 .section2-icon img:nth-child(3) { animation: section2-icon-fade-3 6s linear infinite; }

/* 순차 페이드 — 텍스트 슬라이드(.section2-keyword-slot) 타이밍과 정확히 동기화
 * 텍스트 timeline (section2-rotator 9s cycle):
 *   0-0.79s   : 1→2 slide      | icon 1 fade-out (0-0.4s) → icon 2 fade-in (0.4-0.79s)
 *   0.79-3.0s : item 2 hold    | icon 2 fully visible
 *   3.0-3.8s  : 2→3 slide      | icon 2 fade-out → icon 3 fade-in
 *   3.8-6.0s  : item 3 hold    | icon 3 fully visible
 *   6.0-6.8s  : 3→1 slide      | icon 3 fade-out → icon 1 fade-in
 *   6.8-9.0s  : item 1 hold    | icon 1 fully visible
 * 어떤 순간에도 두 아이콘이 동시에 opacity > 0 아님 → 잔상 0 */
@keyframes section2-icon-fade-1 {
  0%        { opacity: 1; }     /* item 1 hold 끝/슬라이드 시작 — icon 1 표시 */
  4.44%     { opacity: 0; }     /* 0.4s : icon 1 fade-out 완료 */
  71.11%    { opacity: 0; }     /* 6.4s : icon 3 fade-out 완료 직후 */
  75.55%    { opacity: 1; }     /* 6.8s : icon 1 fade-in 완료, 텍스트 item 1 hold 시작 */
  100%      { opacity: 1; }
}
@keyframes section2-icon-fade-2 {
  0%, 4.44% { opacity: 0; }     /* 0-0.4s : icon 1 fade-out 중 */
  8.8%      { opacity: 1; }     /* 0.79s : icon 2 fade-in 완료, 텍스트 item 2 hold 시작 */
  33.33%    { opacity: 1; }     /* 3.0s : item 2 hold 끝, fade-out 시작 */
  37.77%    { opacity: 0; }     /* 3.4s : icon 2 fade-out 완료 */
  100%      { opacity: 0; }
}
@keyframes section2-icon-fade-3 {
  0%, 37.77% { opacity: 0; }
  42.22%    { opacity: 1; }     /* 3.8s : icon 3 fade-in 완료, 텍스트 item 3 hold 시작 */
  66.66%    { opacity: 1; }     /* 6.0s : item 3 hold 끝 */
  71.11%    { opacity: 0; }     /* 6.4s : icon 3 fade-out 완료 */
  100%      { opacity: 0; }
}

.section2 .section2-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  font-size: var(--font-size-h5); /* 40px */
  color: var(--color-white);
  text-align: center;
}

/* 키워드 영역 — overflow:hidden 으로 1줄만 노출, .inner 6개 span 세로 stack */
.section2 .section2-keyword-slot {
  display: inline-block;
  height: 1.25em; /* h5 line-height 와 동일 — 1줄 만큼 */
  overflow: hidden;
  vertical-align: baseline;
}
.section2 .section2-keyword-slot .inner {
  display: flex;
  flex-direction: column;
  animation: section2-rotator 6s linear 0s infinite;
}
.section2 .section2-keyword-slot .inner > span {
  display: block;
  white-space: nowrap;
  line-height: 1.25;       /* slot height (1.25em) 와 강제 일치 */
  height: 1.25em;          /* 자식 한 칸 = slot 1칸 명시 */
  flex-shrink: 0;
  /* 핑크 그라디언트 텍스트 */
  background: linear-gradient(to right, var(--torder-red-10) 0%, var(--torder-red-100) 47%, #ffb2c3 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 9초 사이클 marquee — 6개 항목(원본 3 + dup 3), 각 3초씩 머무름
 * % 단위 transform → viewport/em 변화에도 자동 비례 (1개 항목 = 16.66% of inner) */
@keyframes section2-rotator {
  0%      { transform: translateY(0);        animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
  4.4%    { transform: translateY(-8.33%);   animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  8.8%    { transform: translateY(-16.66%);  /* 2번째 도달 */ }
  33.33%  { transform: translateY(-16.66%);  animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
  37.77%  { transform: translateY(-25%);     animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  42.22%  { transform: translateY(-33.33%);  /* 3번째 도달 */ }
  66.66%  { transform: translateY(-33.33%);  animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
  71.11%  { transform: translateY(-41.66%);  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  75.55%  { transform: translateY(-50%);     /* 4번째(=1번 dup) 도달 — 시각적으로 1번과 동일 */ }
  100%    { transform: translateY(-50%);     /* 100% 후 0% 로 리셋되면서 원본 1번으로 자연 연결 */ }
}


/* ============================================================
 * Section 3 - POS 24개 마퀴 (2 행 LTR/RTL)
 * Figma node: 2137:3802 (PC) / 2207:11677 (Tablet) / 2207:15626 (Mobile)
 * PC 1920×723 / Tablet 1024×526 / Mobile 360×570
 * ============================================================ */
.section3 {
  position: relative;
  width: 100%;
  background: var(--color-white);
  padding: 120px 0; /* Figma: title at y=180, content total */
}
.section3 .com-center {
  position: relative;
}
.section3 .section3-title {
  font-size: var(--font-size-h4); /* 44px */
  color: var(--color-gray10);
  text-align: center;
  margin-bottom: 12px; /* Figma title→subtitle gap */
}
.section3 .section3-desc {
  font-size: 22px; /* PC subtitle (Tablet 18 / Mobile 16 — 미디어쿼리에서 오버라이드) */
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--torder-gray-500);
  text-align: center;
  margin-bottom: 48px; /* subtitle→POS grid gap */
}
.section3 .section3-pos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* PC/Tablet 에서만 PC 마퀴 노출, Mobile 에서만 mobile grid 노출 (기본 PC) */
.section3 .section3-pos-pc { display: flex; }
.section3 .section3-pos-mobile { display: none; }

/* 모바일 4행×6열 그리드 — 가로 스크롤 (autoplay 없음, 터치 가능)
 * Figma: 카드 146.2×67.5, 4 row, 6 col, gap 8, padding-x 20 */
.section3 .section3-pos-grid {
  display: grid;
  grid-template-rows: repeat(4, 67.5px);
  grid-auto-flow: column;
  grid-auto-columns: 146px;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 20px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.section3 .section3-pos-grid::-webkit-scrollbar {
  display: none;
}
.section3 .section3-pos-grid > .section3-pos-card {
  width: 146px;
  height: 67.5px;
}
.section3 .section3-pos-swiper {
  width: 100%;
  overflow: hidden;
}
.section3 .section3-pos-swiper .swiper-wrapper {
  /* Swiper autoplay linear 위해 transition-timing-function 강제 */
  transition-timing-function: linear !important;
}
.section3 .section3-pos-swiper .swiper-slide {
  width: 260px;
  height: 120px;
  flex-shrink: 0;
}

/* 카드 — Figma 260×120, --torder-gray-5 bg, radius 20 */
.section3 .section3-pos-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--torder-gray-5); /* #fcfcfd or matching --torder-gray-10 #f5f6fa - Figma uses #f7f8f9 */
  border-radius: 20px;
}
.section3 .section3-pos-logo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding: 4px 0;
}
.section3 .section3-pos-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.section3 .section3-pos-name {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 4px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-gray60); /* #898EA4 — Figma value */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}


/* ============================================================
 * Section 4 - 3 피처 카드 + 영상
 * Figma node: 2202:10896 (PC) / 2207:11920 (Tablet) / 2207:15869 (Mobile)
 * PC 1920×1632 / Tablet 1024×1343 / Mobile 360×1344
 * 카드 사이즈: PC 1120×343 / Tablet 864×288 / Mobile 320×324
 * ============================================================ */
/* main-service section11 패턴 — GSAP ScrollTrigger pin + .on 클래스 swap 으로
   카드가 한 장씩 fade-up 되며 교체됨. .section4 자체가 100vh 로 잡혀서 pin 시 풀스크린.
   pin 은 JS (`section4.js`) 에서 ScrollTrigger 로 처리. */
.section4 {
  position: relative;
  width: 100%;
  height: 100vh;
  background: var(--torder-gray-950); /* 검정 배경 #11151d */
}
.section4 .com-center {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.section4 .section4-head {
  text-align: center;
  margin-bottom: 48px;
}
.section4 .section4-title {
  font-size: var(--font-size-h4);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
}
.section4 .section4-title span { display: block; }
.section4 .section4-desc {
  margin-top: 12px;
  font-size: var(--font-size-body2); /* Body2 */
  color: var(--torder-gray-300); /* gray 흐릿 */
}

/* 카드 컨테이너 — 모든 카드가 absolute 로 같은 위치에 겹쳐 있고 .on 인 카드만 보임.
   다음 카드가 .on 되어도 이전 카드는 .on 유지 → 새 카드가 z-index 순서대로 위에 stack 됨. */
.section4 .section4-cards {
  position: relative;
  width: 100%;
  height: 343px; /* PC 카드 높이 — anchor for absolute children */
}
.section4 .section4-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--torder-gray-950); /* 영상 로드 전 검정 fallback */
  /* default off-state: 아래에서 살짝 내려가있고 투명 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(100px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.section4 .section4-card.on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 1s, transform 1s, visibility 1s;
}
/* 카드 stack 순서 — 뒤 카드가 앞 카드를 덮어야 하므로 index 순서대로 z-index 증가 */
.section4 .section4-card-1 { z-index: 1; }
.section4 .section4-card-2 { z-index: 2; }
.section4 .section4-card-3 { z-index: 3; }
.section4 .section4-card-text {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  width: 464px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none; /* 영상 위에 글자만, 영상 컨트롤 방해 X */
}
.section4 .section4-card-tag {
  font-size: var(--font-size-body3); /* 18 */
  color: var(--torder-red-200); /* #ffa8bb */
}
.section4 .section4-card-title {
  font-size: var(--font-size-subtitle2); /* 28 */
  color: var(--torder-gray-5);
  margin-top: 4px;
}
.section4 .section4-card-desc {
  font-size: var(--font-size-body3); /* 18 */
  color: var(--torder-gray-5);
  display: flex;
  flex-direction: column;
}
.section4 .section4-card-desc span { display: block; }

/* 카드 영상 영역 — 카드 전체를 채움 (영상 자체가 그라디언트 배경 포함) */
.section4 .section4-card-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.section4 .section4-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.section4 .section4-card-video-mo { display: none; }


/* ============================================================
 * Section 5 - 3-Step 연결방법 + 핑크 CTA
 * Figma node: 2137:4088 (PC) / 2207:11952 (Tablet) / 2207:15901 (Mobile)
 * PC 1920×1079 / Tablet 1024×853 / Mobile 360×1752
 * ============================================================ */
.section5 {
  position: relative;
  width: 100%;
  background: var(--color-white);
  padding: 120px 0;
}
.section5 .com-center {
  position: relative;
}

/* 헤더 — 그라디언트 텍스트 + 일반 텍스트 */
.section5 .section5-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2.625px;
  font-size: var(--font-size-h4); /* 44 */
  text-align: center;
  margin-bottom: 48px;
}
.section5 .section5-title-grad {
  background: linear-gradient(152.96deg, var(--torder-red-500) 23.81%, #840040 84.58%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.section5 .section5-title-rest {
  color: var(--torder-gray-900);
}
.section5 .section5-title-rest.section5-title-line2 {
  margin-left: 7px;
}

/* 3-Step 카드 */
.section5 .section5-steps {
  display: flex;
  gap: 28px;
  justify-content: center;
  max-width: 1120px;
  margin: 0 auto 48px;
}
.section5 .section5-step {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.section5 .section5-step-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section5 .section5-step-title {
  font-size: var(--font-size-subtitle3); /* 24 */
  color: var(--torder-gray-800);
}
.section5 .section5-step-desc {
  font-size: var(--font-size-body3); /* 18 */
  color: var(--torder-gray-300);
}
.section5 .section5-step-image {
  position: relative;
  width: 100%;
  height: 306px;
  background: #e1e7f0; /* 이미지 로드 전 fallback */
  border-radius: 20px;
  overflow: hidden;
}
.section5 .section5-step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 핑크 CTA 배너 */
.section5 .section5-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 80px;
  background: var(--torder-red-10); /* #ffebf0 */
  border-radius: 20px;
}
.section5 .section5-cta-info {
  display: flex;
  align-items: center;
  gap: 26px;
}
.section5 .section5-cta-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 18px;
  background: linear-gradient(126.88deg, #525252 6.83%, #292929 35.47%, var(--color-black) 98.19%);
  flex-shrink: 0;
}
.section5 .section5-cta-logo img {
  width: 65%;
  height: 65%;
}
.section5 .section5-cta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.section5 .section5-cta-title {
  font-size: var(--font-size-subtitle3); /* 24 */
  color: var(--torder-gray-800);
}
.section5 .section5-cta-desc {
  font-size: var(--font-size-body3); /* 18 */
  color: var(--torder-gray-500);
}

.section5 .section5-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 66px;
  padding: 20px 28px;
  background: var(--color-white);
  border: 1px solid var(--torder-red-500);
  border-radius: 12px;
  color: var(--torder-red-500);
  font-size: var(--font-size-button1); /* 22 */
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.3s;
}
.section5 .section5-cta-btn:hover {
  background: var(--torder-red-500);
  color: var(--color-white);
}
.section5 .section5-cta-btn:hover img {
  filter: brightness(0) invert(1);
}
.section5 .section5-cta-btn img {
  width: 28px;
  height: 28px;
  transition: filter 0.3s;
}


/* ============================================================
 * Section 6 - FAQ (자주 묻는 질문)
 * Figma node: 2137:4229 (PC) — torder-gpt section8 동일 패턴
 * 다크 배경 + com-faq-list (다크 모드, common.css 정의)
 * ============================================================ */
.section6 {
  position: relative;
  width: 100%;
  background: #252730;  /* torder-gpt section8 동일 (--torder-gray-800 #2E3238 와 살짝 다른 hex) */
  padding: 180px 0;
}
.section6 .com-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section6 .section6-head {
  margin-bottom: 48px;
}
.section6 .section6-title {
  margin: 0;
  font-size: var(--font-size-h4); /* 44 */
  color: var(--color-white);
  text-align: center;
}
.section6 .com-faq-list {
  width: 100%;
  max-width: 1120px;
}
/* .com-faq-list 박스/타이포 룰은 common.css 공통 스타일을 그대로 사용. 페이지 CSS 는 배경/padding 만 담당. */


/* ---------- Tablet (≤1199) ----------
 * Figma 1024×786 — title.x=80,y=80 / phone.x=451,y=273,w=482,h=825
 * com-center: padding 0 (Section 1 절대 좌표 기준 사용)
 */
@media screen and (max-width: 1199px) {
  .section1 {
    height: 786px;
    background: url("../../img/pages/torderGptAgent/section1-bg-tablet.png") no-repeat center center / cover;
  }
  .section1 .com-center {
    height: 786px;
    padding: 0; /* Section 1은 절대 좌표 기준 */
  }
  .section1 .section1-text {
    top: calc(80px + 72px);
    left: 80px;
  }
  .section1 .section1-title {
    font-size: var(--font-size-h3); /* 48px */
  }
  .section1 .section1-phone {
    bottom: 0;
    left: 36vw;
    width: 56.7vw;
    height: auto;
  }
  .section1 .section1-phone-screen {
    padding: 32px 22px 0;
  }
  .section1 .section1-phone-statusbar .status-time { width: 36px; height: 18px; }
  .section1 .section1-phone-statusbar .status-icons img:nth-child(1) { width: 21px; height: 18px; }
  .section1 .section1-phone-statusbar .status-icons img:nth-child(2) { width: 20px; height: 18px; }
  .section1 .section1-phone-statusbar .status-icons img:nth-child(3) { width: 27px; height: 18px; }
  .section1 .section1-phone-logo-overlay {
    /* tablet phone 482w → 482/500=0.964 비율로 로고 좌표 거의 PC 동일 */
    top: 180px;
    left: -90px;
    width: 192px;
    height: 192px;
    border-radius: 48px;
  }

  /* Section 2 — Tablet (1024 기준 padding 80/84) */
  .section2 {
    padding: 80px 0 84px;
  }
  .section2 .section2-title {
    font-size: var(--font-size-h6); /* Figma Tablet h6 */
  }

  /* Section 3 — Tablet (Figma 1024×526, title 50px h3, 카드 사이즈 동일 유지) */
  .section3 {
    padding: 120px 0;
  }
  .section3 .section3-title {
    font-size: var(--font-size-h5);
    margin-bottom: 12px;
  }
  .section3 .section3-desc {
    font-size: 18px; /* Tablet */
    margin-bottom: 48px;
  }
  .section3 .section3-pos {
    gap: 8px;
  }
  .section3 .section3-pos-swiper .swiper-slide {
    width: 195px;
    height: 90px;
  }
  .section3 .section3-pos-card {
    padding: 6px 0;
    border-radius: 15px;
  }
  .section3 .section3-pos-name {
    font-size: 13.5px;          /* Figma Tablet 명시값 */
  }


  /* Section 4 — Tablet (Figma 1024×1343, 카드 864×288) */
  .section4 .section4-title {
    font-size: var(--font-size-h5);
  }
  .section4 .section4-desc {
    font-size: 18px;
  }
  .section4 .section4-cards {
    height: 288px;
  }
  .section4 .section4-card-text {
    left: 48px;
    width: 380px;
  }
  .section4 .section4-card-tag {
    font-size: var(--font-size-body4); /* Figma Tablet Body4 */
  }
  .section4 .section4-card-title {
    font-size: var(--font-size-subtitle3); /* Figma Tablet Subtitle3 */
  }
  .section4 .section4-card-desc {
    font-size: var(--font-size-body4); /* Figma Tablet Body4 */
  }

  /* Section 5 — Tablet (Figma 1024 / node 2207:11952)
   * - section bg #f7f8f9, padding 120 80 (com-center 가 좌우 80 처리)
   * - title 40px h5, mb 48 (title↔content gap)
   * - steps gap 24 / steps↔CTA outer gap 48
   * - step gap 20 / step-image 234h r16
   * - CTA padding 32 40 / r16, logo 68×68 r17 (Figma 16.541 반올림)
   * - cta-btn h58 / border 1px / r12, icon 24
   */
  .section5 {
    background: #f7f8f9;
    padding: 120px 0;
  }
  .section5 .section5-title {
    font-size: var(--font-size-h5);
    margin-bottom: 48px;
  }
  .section5 .section5-steps {
    gap: 24px;
    margin-bottom: 48px;
  }
  .section5 .section5-step {
    gap: 20px;
  }
  .section5 .section5-step-title {
    font-size: var(--font-size-subtitle4);
  }
  .section5 .section5-step-desc {
    font-size: 16px;
  }
  .section5 .section5-step-image {
    height: 234px;
    border-radius: 16px;
  }
  .section5 .section5-cta {
    padding: 32px 40px;
    border-radius: 16px;
  }
  .section5 .section5-cta-logo {
    width: 68px; height: 68px;
    border-radius: 17px; /* Figma 16.541 반올림 */
  }
  .section5 .section5-cta-title {
    font-size: 24px;
  }
  .section5 .section5-cta-desc {
    font-size: 16px;
  }
  .section5 .section5-cta-btn {
    height: 58px;
    padding: 16px 24px;
    font-size: 18px;
    border-width: 1px;
    border-radius: 12px;
  }
  .section5 .section5-cta-btn img {
    width: 24px; height: 24px;
  }

  /* Section 6 — Tablet */
  .section6 {
    padding: 120px 0;
  }
  .section6 .section6-head {
    margin-bottom: 40px;
  }
  .section6 .section6-title {
    font-size: var(--font-size-h5);
  }
}

/* ---------- Fluid scaling 600 ~ 980 ----------
 * 980 viewport 기준점 — 모든 px 값을 vw 로 변환 (px / 980 × 100 vw)
 * 980 viewport 에서는 위 tablet(1199) 사이즈와 거의 동일, 600 으로 갈수록 비율 그대로 축소
 * 위쪽 tablet 미디어 쿼리를 override (CSS 우선순위는 같지만 후순위라 적용)
 */
@media screen and (max-width: 980px) and (min-width: 600px) {
  .section1 {
    /* GNB(72) 이후 본 섹션 시작 — 작은 viewport에서 title이 GNB 뒤로 들어가지 않도록 padding-top 적용 */
    padding-top: 72px;
    height: calc(80.20vw + 72px); /* 786 + GNB */
  }
  .section1 .com-center {
    height: 80.20vw; /* 786 */
  }
  .section1 .section1-text {
    top: 8.16vw; /* 80 */
    left: 8.16vw;
    gap: 2.86vw; /* 28 */
  }
  .section1 .section1-btn {
    padding: 2.04vw 3.67vw; /* 20 36 */
  }

  .section1 .section1-phone-screen {
    top: 1.73vw; /* 17 */
    bottom: 1.43vw; /* 14 */
    border-radius: 5.82vw; /* 57 */
    padding: 3.88vw 2.76vw 0; /* 38 27 0 */
  }

  /* 상태바 */
  .section1 .section1-phone-statusbar {
    height: 2.14vw; /* 21 */
    padding: 0 0.41vw; /* 0 4 */
    margin-bottom: 1.84vw; /* 18 */
  }
  .section1 .section1-phone-statusbar .status-time { width: 3.67vw; height: 1.84vw; } /* 36 18 */
  .section1 .section1-phone-statusbar .status-icons { gap: 0.41vw; }
  .section1 .section1-phone-statusbar .status-icons img:nth-child(1) { width: 2.14vw; height: 1.84vw; }
  .section1 .section1-phone-statusbar .status-icons img:nth-child(2) { width: 2.04vw; height: 1.84vw; }
  .section1 .section1-phone-statusbar .status-icons img:nth-child(3) { width: 2.76vw; height: 1.84vw; }

  /* 채팅 헤더 */
  .section1 .section1-phone-chat-header {
    padding: 0 0.41vw;
    margin-bottom: 2.86vw; /* 28 */
  }
  .section1 .section1-phone-chat-header .chat-arrow {
    width: 1.33vw; height: 2.55vw; /* 13 25 */
    margin-right: 1.43vw; /* 14 */
  }
  .section1 .section1-phone-chat-header .chat-badge { width: 2.55vw; height: 2.55vw; }
  .section1 .section1-phone-chat-header .chat-header-right { gap: 1.02vw; } /* 10 */
  .section1 .section1-phone-chat-header .chat-header-right img { width: 2.55vw; height: 2.55vw; }

  /* 채팅 본문 */
  .section1 .section1-phone-chat-body { gap: 2.04vw; } /* 20 */
  .section1 .chat-bubble-user {
    padding: 1.22vw 1.84vw; /* 12 18 */
    border-radius: 1.70vw; /* 16.7 */
  }
  .section1 .chat-msg-ai { gap: 0.82vw; } /* 8 */
  .section1 .chat-ai-head { gap: 1.43vw; } /* 14 */
  .section1 .chat-ai-logo {
    width: 4.69vw; height: 4.69vw; /* 46 */
    border-radius: 1.47vw; /* 14.4 */
  }
  .section1 .chat-ai-logo img { width: 3.06vw; height: 3.06vw; } /* 30 */
  .section1 .chat-ai-card {
    width: calc(100% - 6.12vw); /* 60 */
    margin-left: 6.12vw;
    padding: 1.63vw 2.04vw; /* 16 20 */
    gap: 1.63vw;
    border-radius: 2.04vw; /* 20 */
  }
  .section1 .chat-ai-btn {
    padding: 1.22vw 2.45vw; /* 12 24 */
    border-radius: 1.22vw; /* 12 */
  }

  /* t'order 큰 로고 오버레이 */
  .section1 .section1-phone-logo-overlay {
    top: 18.37vw; /* 180 */
    left: -9.18vw; /* -90 */
    width: 19.59vw; height: 19.59vw; /* 192 */
    border-radius: 4.90vw; /* 48 */
  }

  /* Section 2 — fluid (980 기준 padding 80/84, icon 90, font 40, gap 12/32) */
  .section2 {
    padding: 8.16vw 0 8.57vw; /* 80 84 */
  }
  .section2 .section2-inner {
    gap: 3.27vw; /* 32 */
  }
  .section2 .section2-icon {
    width: 9.18vw; height: 9.18vw; /* 90 */
  }
  .section2 .section2-title {
    gap: 1.22vw; /* 12 */
  }

  /* Section 3 — fluid (vw scaled — 카드/타이틀/패딩 비율 축소) */
  .section3 {
    padding: 8.16vw 0; /* 80 */
  }
  .section3 .section3-title {
    margin-bottom: 1.22vw; /* 12 */
  }
  .section3 .section3-desc {
    margin-bottom: 3.67vw; /* 36 */
  }
  .section3 .section3-pos {
    gap: 2.04vw; /* 20 */
  }
  .section3 .section3-pos-swiper .swiper-slide {
    width: 26.53vw;  /* 260 */
    height: 12.24vw; /* 120 */
  }
  .section3 .section3-pos-card {
    padding: 0.82vw; /* 8 */
    border-radius: 2.04vw; /* 20 */
  }
  .section3 .section3-pos-name {
    height: 5.31vw; /* 52 */
  }

  /* Section 4 — fluid (vw scaled, 카드 비율 축소) */
  .section4 .section4-desc {
    margin-top: 1.22vw; /* 12 */
  }
  .section4 .section4-cards {
    height: 29.39vw; /* 288 */
  }
  .section4 .section4-card {
    border-radius: 2.04vw;
  }
  .section4 .section4-card-text {
    left: 4.90vw; /* 48 */
    width: 38.78vw; /* 380 */
    gap: 1.22vw;
  }

  /* Section 5 — fluid (vw scaled) */
  .section5 {
    padding: 8.16vw 0;
  }
  .section5 .section5-title {
    margin-bottom: 3.67vw;
  }
  .section5 .section5-steps {
    gap: 2.04vw;
    margin-bottom: 3.67vw;
  }
  .section5 .section5-step {
    gap: 1.84vw;
  }
  .section5 .section5-step-image {
    height: 24.49vw;
    border-radius: 2.04vw;
  }
  .section5 .section5-cta {
    padding: 2.86vw 4.90vw;
    border-radius: 2.04vw;
  }
  .section5 .section5-cta-logo {
    width: 6.12vw; height: 6.12vw;
    border-radius: 1.43vw;
  }
  .section5 .section5-cta-btn {
    height: 5.71vw;
    padding: 1.63vw 2.45vw;
    border-radius: 1.22vw;
  }
  .section5 .section5-cta-btn img {
    width: 2.24vw; height: 2.24vw;
  }

  /* Section 6 — fluid */
  .section6 {
    padding: 12.24vw 0;
  }
  .section6 .section6-head {
    margin-bottom: 4.08vw;
  }
}

/* ---------- Mobile (≤599) ----------
 * Figma 360×567 — title.y=80, phone.y=303, w=242 h=493
 * 간격: title-text 120 + title-button gap 20 + button 44 + (title→phone) 39 = 단위 기준
 */
@media screen and (max-width: 599px) {
  .section1 {
    height: auto;                /* tablet 룰(@1199)의 height:786 unset — aspect-ratio 활성화 조건 */
    aspect-ratio: 360 / 627;     /* 360 기준 section 비율 — viewport 따라 자동 비례 */
    padding-bottom: 0;
    /* 모바일 통합 이미지 (배경 + 로고 + 폰 + 채팅 합성). 자연 비율 360:567,
       background-size 100% auto + center bottom 으로 viewport 폭에 맞춰 비례 확대.
       section 도 aspect-ratio 로 같이 늘어나서 top 잘림 없음. */
    background: url("../../img/pages/torderGptAgent/section1-bg-mobile.png") no-repeat center bottom / 100% auto;
    background-color: #240007; /* 이미지 외곽 색 매칭 */
  }
  .section1 .com-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto;            /* tablet 룰(@1199)의 height:786 unset — section aspect-ratio 가 결정 */
    /* GNB(mobile 60px) 아래 80px gap → 140px (= 60 + 80, Figma section.y=80 위치 정확 매칭) */
    padding: 140px 20px 0;
    gap: 39px; /* Figma title-block bottom(264) → phone-top(303) gap = 39 */
  }
  /* 모바일은 세로 스택이므로 PC absolute 해제 */
  .section1 .section1-text {
    position: static;
    align-items: center;
    text-align: center;
    gap: 20px; /* Figma title-text → button gap */
  }
  /* 모바일은 통합 SVG 가 background 로 들어가므로 .section1-phone 영역 전체 숨김 (폰·로고·글로우·채팅 모두 bg 이미지 안에 포함) */
  .section1 .section1-phone {
    display: none;
  }
  .section1 .section1-phone-mobile-img {
    display: none;
  }
  .section1 .section1-phone-frame,
  .section1 .section1-phone-logo-overlay {
    display: none;
  }
  .section1 .section1-title {
    font-size: var(--font-size-subtitle2);
    align-items: center;
  }
  .section1 .section1-btn {
    padding: 12px 24px;
    font-size: var(--font-size-button3); /* 16px */
  }
  /* 모바일 로고 오버레이 - phone 242w 기준 (242/500=0.484)
   * top 187*0.484=90, left -94*0.484=-45, size 200*0.484=97 */
  .section1 .section1-phone-logo-overlay {
    top: 90px;
    left: -45px;
    width: 97px;
    height: 97px;
    border-radius: 24px;
    box-shadow:
      0 0 14px 0 rgba(255, 255, 255, 0.55),
      0 0 50px 0 rgba(255, 255, 255, 0.66),
      0 0 100px 0 var(--color-white);
  }
  .section1 .section1-phone-logo-overlay img {
    width: 65%;
    height: 65%;
  }
  /* 모바일 폰 내부 (폰 242 기준, 화면 안쪽 약 220 가용)
   * Figma 모바일 status height ~12, chat title ~12, bubble text ~12 */
  .section1 .section1-phone-screen {
    padding: 18px 13px 0;
    border-radius: 26px;
    bottom: 7px;
  }
  .section1 .section1-phone-statusbar {
    height: 12px;
    margin-bottom: 10px;
    padding: 0 2px;
  }
  .section1 .section1-phone-statusbar .status-time {
    width: 23px;
    height: 12px;
  }
  .section1 .section1-phone-statusbar .status-icons {
    gap: 3px;
  }
  .section1 .section1-phone-statusbar .status-icons img:nth-child(1) { width: 14px; height: 12px; }
  .section1 .section1-phone-statusbar .status-icons img:nth-child(2) { width: 13px; height: 12px; }
  .section1 .section1-phone-statusbar .status-icons img:nth-child(3) { width: 18px; height: 12px; }
  .section1 .section1-phone-chat-header {
    margin-bottom: 14px;
    padding: 0 2px;
  }
  .section1 .section1-phone-chat-header .chat-arrow {
    width: 6px;
    height: 12px;
    margin-right: 6px;
  }
  .section1 .section1-phone-chat-header .chat-badge,
  .section1 .section1-phone-chat-header .chat-header-right img {
    width: 12px;
    height: 12px;
  }
  .section1 .section1-phone-chat-header .chat-header-right {
    gap: 5px;
  }
  .section1 .section1-phone-chat-header .chat-title {
    font-size: 10px;
  }
  .section1 .section1-phone-chat-body {
    gap: 10px;
  }
  .section1 .chat-bubble-user {
    font-size: 10px;
    padding: 5px 9px;
    border-radius: 8px;
  }
  .section1 .chat-ai-head {
    gap: 7px;
  }
  .section1 .chat-ai-logo {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }
  .section1 .chat-ai-logo img {
    width: 16px;
    height: 16px;
  }
  .section1 .chat-ai-name {
    font-size: 10px;
  }
  .section1 .chat-ai-card {
    width: calc(100% - 31px);
    margin-left: 31px;
    padding: 8px 10px;
    border-radius: 10px;
    gap: 8px;
  }
  .section1 .chat-ai-text {
    font-size: 10px;
  }
  .section1 .chat-ai-btn {
    font-size: 10px;
    padding: 6px 12px;
    border-radius: 6px;
  }

  /* Section 2 — Mobile (Figma 360×256, icon 48, font 24, 2줄 wrap)
   * Figma frame: y=60, h=136 → padding 60 top, 60 bottom (256-60-136 = 60)
   * 단, 1줄 영역 + 2줄 영역 사이 gap 16 (Figma frame y=64-48=16) */
  .section2 {
    padding: 60px 0;
  }
  .section2 .section2-inner {
    gap: 16px;
  }
  .section2 .section2-icon {
    width: 48px; height: 48px;
  }
  /* 모바일에서는 아이콘 이미지 height auto — 자연 비율 유지 */
  .section2 .section2-icon .inner img {
    height: auto;
  }
  .section2 .section2-title {
    font-size: 24px;
    gap: 8px; /* line 1 안의 "무료로" "상품 관리" 사이 갭 */
  }
  /* 모바일 2줄 wrap — "지금 경험해 보세요" 강제 다음 줄 */
  .section2 .section2-title-w2 {
    flex-basis: 100%;
  }

  /* Section 3 — Mobile : 4 행 × 6 열 grid + 가로 스크롤 (autoplay 없음, 터치 가능)
   * Figma: 카드 146×67.5, gap 8, padding-x 20 */
  .section3 {
    padding: 60px 0;
  }
  .section3 .section3-title {
    font-size: var(--font-size-h6); /* 32px */
    margin-bottom: 12px;
  }
  .section3 .section3-desc {
    font-size: 16px; /* Mobile */
    margin-bottom: 24px;
  }
  /* PC swipers 숨김, mobile 4-row swiper marquee 노출 */
  .section3 .section3-pos-pc { display: none; }
  .section3 .section3-pos-mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* mobile swiper slide 사이즈 (Figma 모바일: 카드 146×67.5, gap 8 — Swiper spaceBetween 이 처리) */
  .section3 .section3-pos-mobile .section3-pos-swiper .swiper-slide {
    width: 146px;
    height: 67.5px;
  }
  .section3 .section3-pos-mobile .section3-pos-card {
    padding: 4.5px;
    border-radius: 12px;
  }
  .section3 .section3-pos-mobile .section3-pos-name {
    height: 22px;
    font-size: 11px;            /* Figma 10.1 → 가독성 위해 11 round up */
    padding: 0;
  }

  /* Section 4 — Mobile (Figma 360×1344, node 2207-15869)
   * 모바일도 PC/Tablet 과 동일한 pin+swap 패턴 (.section4 height:100vh 베이스 룰 상속).
   * 카드 높이만 모바일 스펙(324) 으로 오버라이드. */
  .section4 .section4-head {
    margin-bottom: 36px;
  }
  .section4 .section4-title {
    font-size: var(--font-size-h6);             /* Figma h6 32 */
  }
  .section4 .section4-desc {
    font-size: var(--font-size-body4);             /* Figma Body4 16 */
    color: var(--torder-gray-100); /* #c9cbd6 */
    margin-top: 8px;
  }
  .section4 .section4-cards {
    height: 324px;
  }
  .section4 .section4-card {
    border-radius: 12px;         /* Figma r 12 */
  }
  /* 카드별 배경 이미지 (Figma div.card_ai 1/2/3) */
  .section4 .section4-card-1 {
    background: url("../../img/pages/torderGptAgent/section4-card-bg-1.png") no-repeat center / cover;
  }
  .section4 .section4-card-2 {
    background: url("../../img/pages/torderGptAgent/section4-card-bg-2.png") no-repeat center / cover;
  }
  .section4 .section4-card-3 {
    background: url("../../img/pages/torderGptAgent/section4-card-bg-3.png") no-repeat center / cover;
  }
  /* card head — Figma top 28, padding-x 28, tag→title 4 / title→desc 12 */
  .section4 .section4-card-text {
    position: absolute;
    top: 28px;
    left: 28px;
    transform: none;
    width: calc(100% - 56px);
    gap: 0;                      /* base gap 12 override → margin 으로 명시 */
  }
  .section4 .section4-card-tag {
    font-size: var(--font-size-body5);             /* Figma Body5 14 */
    color: var(--torder-red-200);              /* Figma red-200 */
  }
  .section4 .section4-card-title {
    font-size: var(--font-size-subtitle4);             /* Figma Subtitle4 20 */
    color: var(--torder-gray-5); /* #f7f8f9 */
    margin-top: 4px;             /* Figma tag→title gap 4 */
  }
  .section4 .section4-card-desc {
    font-size: var(--font-size-body5);
    line-height: 1.5;            /* Figma Body5 lh 1.5 (com-line145 1.45 override) */
    color: var(--torder-gray-5);
    margin-top: 12px;            /* Figma title→desc gap 12 */
  }
  /* 모바일 영상 분기 - PC 영상 숨기고 모바일 영상 노출 */
  .section4 .section4-card-video-pc { display: none; }
  .section4 .section4-card-video-mo { display: block; }
  /* 모바일: 비디오 visible 영역을 카드 하단 296px 로 클립 (상단 28 head 영역 보존) */
  .section4 .section4-card-media {
    inset: auto 0 0 0;
    height: 324px;
  }
  .section4 .section4-card-video {
    object-fit: cover;
    object-position: bottom;
  }

  /* Section 5 — Mobile (Figma 360×1752 / node 2207:15901)
   * - section bg #f7f8f9, padding 80 0 (com-center 가 좌우 20 처리)
   * - title 32px, line1=「티오더GPT 와」 grad+black, line2=「연결하는 방법」(별도 줄)
   * - steps gap 32, steps↔CTA outer gap 48
   * - CTA-info column (logo 위 / text 아래) — Figma 일치
   */
  .section5 {
    background: #f7f8f9;
    padding: 80px 0;
  }
  .section5 .section5-title {
    font-size: var(--font-size-h6);
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 2px;
  }
  /* line2 만 줄바꿈 (line1 의 grad + 「와」는 한 줄에 같이) */
  .section5 .section5-title-rest.section5-title-line2 {
    margin-left: 0;
  }
  .section5 .section5-title-line2 {
    display: block;
    width: 100%;
  }
  .section5 .section5-steps {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 48px;
  }
  .section5 .section5-step {
    gap: 16px;
  }
  .section5 .section5-step-head {
    padding: 0 8px;
  }
  .section5 .section5-step-title {
    font-size: var(--font-size-subtitle4);
  }
  .section5 .section5-step-desc {
    font-size: var(--font-size-body5);
  }
  .section5 .section5-step-image {
    height: auto;
    border-radius: 12px;
  }
  /* 부모 height auto 일 때 이미지는 자연 비율로 width 100% */
  .section5 .section5-step-image img {
    height: auto;
    object-fit: contain;
  }
  /* CTA 배너 모바일 — outer column (info 위 / 버튼 아래)
   * info 도 column (logo 위 / text 아래) — Figma 일치
   */
  .section5 .section5-cta {
    flex-direction: column;
    align-items: center;
    gap: 26px; /* Figma 26.25 반올림 */
    padding: 32px 28px;
    border-radius: 12px;
  }
  .section5 .section5-cta-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }
  .section5 .section5-cta-logo {
    width: 56px; height: 56px;
    border-radius: 14px; /* Figma 13.622 반올림 */
  }
  .section5 .section5-cta-title {
    font-size: var(--font-size-subtitle4);
  }
  .section5 .section5-cta-desc {
    font-size: var(--font-size-body5);
  }
  .section5 .section5-cta-btn {
    width: 100%;
    height: 52px;
    padding: 14px 20px;
    font-size: 16px;
    border-width: 1px;
    border-radius: 12px;
    justify-content: center;
  }
  .section5 .section5-cta-btn img {
    width: 20px; height: 20px;
  }

  /* Section 6 — Mobile */
  .section6 {
    padding: 80px 0;
  }
  .section6 .section6-head {
    margin-bottom: 32px;
  }
  .section6 .section6-title {
    font-size: var(--font-size-h6);
  }
}
@media screen and (max-width: 480px) {
  .section1 .section1-phone {
    width: 65%;
  }
}
@media screen and (max-width: 380px) {
  .section1 .section1-phone {
    width: 75%;
  }
}