@import "common.css";

/**
 * torderGPT 페이지
 * ------------------------------------------------------------
 * - 페이지 래퍼: .gpt-wrap
 * - 반응형 브레이크포인트:
 *    PC     : default (~1920 기준 디자인)
 *    Tablet : max-width 1199px (~1024 기준 디자인)
 *    Mobile : max-width 599px  (~360 기준 디자인)
 * - 공통 토큰 활용: common.css 의 --torder-red-500, --color-white 등
 * ------------------------------------------------------------
 */

/* 페이지 공통 ***************************************************/
.gpt-wrap{
  /* 페이지 내부에서 자주 쓰는 로컬 토큰 */
  --gpt-hero-bg: linear-gradient(
    180deg,
    #000000 6.47%,
    #3D0030 20.17%,
    #A30D3B 31.67%,
    #FF193F 47.13%,
    rgba(255, 25, 63, 0) 84.25%
  ), #ffffff;
  --gpt-red: #FF193F;
  --gpt-text-white: #f7f8f9;
  --gpt-text-red-sub: #fffafb;
}

/** section1 - 히어로 (소상공인 AI 티오더GPT) *******************************************************/
.gpt-wrap .section1{
  position: relative;
  width:100%;
  padding:120px 0;
  background: var(--gpt-hero-bg);
  overflow: hidden;
}
.gpt-wrap .section1 .com-center{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:100px;
}
.gpt-wrap .section1-text{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:60px;
  width:100%;
}
.gpt-wrap .section1-title-wrap{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:16px;
  text-align:center;
}
.gpt-wrap .section1-title{
  display:flex;
  gap:16px;
  justify-content:center;
  font-size:80px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.025em;
  white-space: nowrap;
}
.gpt-wrap .section1-title-white{
  color:var(--color-white);
}
.gpt-wrap .section1-title-red{
  color:var(--gpt-red);
}
.gpt-wrap .section1-desc{
  font-size:24px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.02em;
  color:var(--gpt-text-red-sub);
}
.gpt-wrap .section1-btn-wrap{
  display:flex;
  gap:12px;
  justify-content: center;
}
.gpt-wrap .section1-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:20px 36px;
  border-radius:100px;
  font-size:22px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--color-white);
  text-decoration:none;
  transition: opacity .2s ease;
}
.gpt-wrap .section1-btn:hover{
  opacity: .85;
}
.gpt-wrap .section1-btn-black{
  background:var(--color-black);
}
.gpt-wrap .section1-btn-red{
  background:var(--gpt-red);
}
.gpt-wrap .section1-video{
  position: relative;
  width:100%;
  max-width:1280px;
  aspect-ratio: 16 / 9;  /* 1280 x 720 */
  background:var(--color-black);
  border-radius:36px;
  overflow: hidden;
}
.gpt-wrap .section1-video-el{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
}
.gpt-wrap .section1-video-play{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:240px;
  height:240px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.gpt-wrap .section1-video-play-icon{
  display:block;
  width:100%;
  height:100%;
  background: rgba(255,255,255,0.4);
  border-radius:50%;
  position:relative;
}
.gpt-wrap .section1-video-play-icon::before{
  content:"";
  position:absolute;
  top:50%;
  left:54%;
  transform: translate(-50%, -50%);
  width:0;
  height:0;
  border-left: 58px solid rgba(255,255,255,0.85);
  border-top: 36px solid transparent;
  border-bottom: 36px solid transparent;
}

@media screen and (max-width:1199px) {
  /* Tablet (1024 기준) */
  .gpt-wrap .section1{
    padding:80px 0;
  }
  .gpt-wrap .section1 .com-center{
    gap:0;
  }
  .gpt-wrap .section1-text{
    gap:28px;
    margin-bottom:80px;
  }
  .gpt-wrap .section1-title-wrap{
    gap:8px;
  }
  .gpt-wrap .section1-title{
    gap:12px;
    font-size:var(--font-size-h3);
    letter-spacing:-0.025em;
  }
  .gpt-wrap .section1-desc{
    font-size:var(--font-size-subtitle4);
    letter-spacing:-0.02em;
  }
  .gpt-wrap .section1-btn-wrap{
    gap:12px;
  }
  .gpt-wrap .section1-btn{
    padding:18px 28px;
    font-size:18px;
  }
  .gpt-wrap .section1-video{
    max-width:864px;
    width:calc(100% - 160px);
    border-radius:24px;
  }
  .gpt-wrap .section1-video-play{
    width:162px;
    height:162px;
  }
  .gpt-wrap .section1-video-play-icon::before{
    border-left-width: 40px;
    border-top-width: 24px;
    border-bottom-width: 24px;
  }
}

@media screen and (max-width:599px) {
  /* Mobile (360 기준) */
  /* Figma 모바일 시안의 stop 값으로 그라디언트 재정의 — bright red(#FF193F) 피크를
     PC 47% → 모바일 68% 로 아래로 이동시켜 버튼 영역(상단)에서 빨강 묻힘 방지. */
  .gpt-wrap{
    --gpt-hero-bg: linear-gradient(
      180deg,
      #000000 18.77%,
      #3D0030 33.60%,
      #A30D3B 50.78%,
      #FF193F 67.91%,
      rgba(255, 25, 63, 0) 102.92%
    ), #ffffff;
  }
  .gpt-wrap .section1{
    padding:60px 0;
  }
  .gpt-wrap .section1-text{
    gap:20px;
    margin-bottom:32px;
  }
  .gpt-wrap .section1-title-wrap{
    gap:7px;
  }
  .gpt-wrap .section1-title{
    flex-direction: column;
    gap:0;
    font-size:var(--font-size-h5);
    letter-spacing:-0.02em;
    white-space: normal;
  }
  .gpt-wrap .section1-desc{
    font-size:16px;
    font-weight:500;
    line-height:1.5;
    letter-spacing:-0.02em;
  }
  .gpt-wrap .section1-btn-wrap{
    gap:8px;
  }
  .gpt-wrap .section1-btn{
    padding:14px 20px;
    font-size:16px;
    letter-spacing:-0.02em;
  }
  .gpt-wrap .section1-video{
    width:320px;
    max-width:320px;
    height:180px;
    aspect-ratio: auto;
    border-radius:12px;
  }
  .gpt-wrap .section1-video-play{
    width:60px;
    height:60px;
  }
  .gpt-wrap .section1-video-play-icon::before{
    border-left-width: 15px;
    border-top-width: 9px;
    border-bottom-width: 9px;
  }
}

/** section2 - 롤링 프롬프트 칩 *************************************************/
.gpt-wrap .section2{
  --gpt-s2-chip-bg: linear-gradient(180deg, #000 0%, #131419 100%);
  --gpt-s2-chip-text: #f7f8f9;
  --gpt-s2-chip-glow: inset 0 0 7.91px 0 rgba(255,255,255,0.55);
  --gpt-s2-eyebrow: #ff809d;
  --gpt-s2-bg: radial-gradient(
    ellipse 192% 217% at 0% 50%,
    #131419 16.3%,
    #252730 59.1%,
    #373840 74.8%,
    #494a50 90.4%
  );
  position: relative;
  width:100%;
  background: var(--gpt-s2-bg);
  overflow: hidden;
}
.gpt-wrap .section2 .com-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:60px;
}
.gpt-wrap .section2-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:24px;
  flex-shrink:0;
  width:530px;
}
.gpt-wrap .section2-eyebrow{
  font-size:24px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.02em;
  color:var(--gpt-s2-eyebrow);
  white-space:nowrap;
}
.gpt-wrap .section2-title{
  display:flex;
  flex-direction:column;
  font-size:var(--font-size-h4);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.02em;
  color:var(--color-white);
  white-space:nowrap;
}
.gpt-wrap .section2-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-shrink:0;
  padding:20px 32px;
  border-radius:158.209px;
  background: var(--gpt-s2-chip-bg);
  box-shadow: var(--gpt-s2-chip-glow);
  font-size:24px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.02em;
  color: var(--gpt-s2-chip-text);
  white-space:nowrap;
  /* Row 2(RTL parent) 에서도 칩 내부 단어/아이콘 순서는 LTR 로 유지
   * !important — dir="rtl" 속성에 의한 inherited direction 덮어쓰기 보장 */
  direction:ltr !important;
}
.gpt-wrap .section2-chip span{
  display:inline-block;
}
.gpt-wrap .section2-chip-icon{
  display:inline-block;
  width:24px;
  height:24px;
  flex-shrink:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.gpt-wrap .section2-chip-icon-sales{
  background-image:url("/img/pages/torderGpt/section2-chip-sticker.png");
}
.gpt-wrap .section2-chip-icon-sticker{
  background-image:url("/img/pages/torderGpt/section2-chip-megaphone.png");
}
.gpt-wrap .section2-chip-icon-menu{
  background-image:url("/img/pages/torderGpt/section2-chip-menu.png");
}
.gpt-wrap .section2-chip-icon-megaphone{
  background-image:url("/img/pages/torderGpt/section2-chip-sales.png");
}

/* PC : 세로 Swiper 무한 롤링 (>=1200) */
.gpt-wrap .section2-rolling-pc{
  position:relative;
  flex-shrink:0;
  width:532px;
  height:794px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}
.gpt-wrap .section2-rolling-pc .swiper{
  width:100%;
  height:100%;
  overflow:hidden;
}
.gpt-wrap .section2-rolling-pc .swiper-wrapper{
  transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  -webkit-transition-timing-function: linear !important;
}
.gpt-wrap .section2-rolling-pc .swiper-slide{
  height:auto;
  margin-bottom:16px;
  /* Swiper 기본 .swiper-slide{width:100%} 를 덮어 텍스트 길이에 맞춘 칩 폭으로 좌측정렬
   * (column flex parent 의 align-items:stretch 도 align-self 로 해제) */
  width:auto !important;
  align-self:flex-start !important;
}

/* Tablet/Mobile 영역(<=1199)은 기본 숨김, PC에서만 노출 */
.gpt-wrap .section2-rolling-mobile{
  display:none;
}

@media screen and (max-width:1199px) {
  /* Tablet (1024 기준) : 상단 타이틀 + 3행 가로 Swiper 롤링 */
  .gpt-wrap .section2{
    padding:120px 0;
  }
  .gpt-wrap .section2 .com-center{
    flex-direction:column;
    gap:48px;
    /* 좌우 롤링이 viewport 끝까지 보이도록 com-center 의 tablet padding(60px) 제거.
       텍스트(.section2-text) 는 자체 padding 으로 좌우 여백 유지. */
    padding-left:0;
    padding-right:0;
  }
  .gpt-wrap .section2-text{
    align-items:center;
    gap:8px;
    width:auto;
    text-align:center;
    padding-left:60px;
    padding-right:60px;
  }
  .gpt-wrap .section2-eyebrow{
    font-size:var(--font-size-subtitle4);
    letter-spacing:-0.02em;
  }
  .gpt-wrap .section2-title{
    align-items:center;
    font-size:var(--font-size-h5);
    letter-spacing:-0.02em;
  }

  /* PC 영역 숨김 */
  .gpt-wrap .section2-rolling-pc{
    display:none;
  }

  /* Tablet/Mobile : Swiper 3행 가로 롤링 — viewport 끝까지, 좌우 페이드 마스크 없음 */
  .gpt-wrap .section2-rolling-mobile{
    display:flex;
    flex-direction:column;
    gap:12px;
    width:100%;
    height:auto;
    overflow:hidden;
  }
  .gpt-wrap .section2-rolling-mobile .swiper{
    width:100%;
    overflow:hidden;
  }
  .gpt-wrap .section2-rolling-mobile .swiper-wrapper{
    display:flex;
    align-items:center;
    /* Swiper가 linear 트랜지션 타이밍을 쓰도록 강제 */
    transition-timing-function: linear !important;
  }
  .gpt-wrap .section2-rolling-mobile .swiper-slide{
    width:auto;
    margin-right:12px;
  }
  /* RTL 행은 margin-right 대신 margin-left 사용 */
  .gpt-wrap .section2-rolling-mobile .swiper[dir="rtl"] .swiper-slide{
    margin-right:0;
    margin-left:12px;
  }
  .gpt-wrap .section2-chip{
    padding:12px 28px;
    border-radius:110.53px;
    font-size:18px;
    font-weight:500;
    line-height:1.5;
    letter-spacing:-0.02em;
    box-shadow: inset 0 0 5.526px 0 rgba(255,255,255,0.55);
  }
  .gpt-wrap .section2-chip-icon{
    width:17px;
    height:17px;
  }
}

@media screen and (max-width:599px) {
  /* Mobile (360 기준) */
  .gpt-wrap .section2{
    padding:80px 0;
  }
  .gpt-wrap .section2 .com-center{
    gap:48px;
    /* 좌우 롤링이 viewport 끝까지 보이도록 com-center 의 mobile padding(20px) 제거.
       텍스트(.section2-text) 는 자체 padding 으로 좌우 여백 유지. */
    padding-left:0;
    padding-right:0;
  }
  .gpt-wrap .section2-text{
    padding-left:20px;
    padding-right:20px;
  }
  .gpt-wrap .section2-eyebrow{
    font-size:16px;
    font-weight:500;
    line-height:1.5;
    letter-spacing:-0.02em;
  }
  .gpt-wrap .section2-title{
    font-size:var(--font-size-subtitle2);
    font-weight:700;
    letter-spacing:-0.02em;
  }
  .gpt-wrap .section2-rolling-mobile{
    gap:8px;
  }
  .gpt-wrap .section2-rolling-mobile .swiper-slide{
    margin-right:8px;
  }
  .gpt-wrap .section2-rolling-mobile .swiper[dir="rtl"] .swiper-slide{
    margin-left:8px;
  }
  .gpt-wrap .section2-chip{
    padding:10px 24px;
    font-size:var(--font-size-body5);
    font-weight:500;
  }
}

/** section3 - 사장님과 장사를 함께 할 똑똑한 AI 매니저 (3-feature) *******************************************************/
/**
 * 네이버페이 GSAP pin + scrub 패턴
 * 구성
 *  - .section3-head              : sticky top:72 (타이틀 + 서브카피 상단 고정)
 *  - .section3-info-group        : 2-col flex (align-items:stretch)
 *    · .section3-img-slide-box   : GSAP pin 대상 (text 끝까지 고정)
 *      · width:auto + height:100vh + flex(center) → 100vh 컨테이너 안에 휴대폰 프레임 중앙 배치
 *      └ .section3-img-fade-box  : 고정 크기 PC 394x630 / Tablet 300x480, radius 55 / 42
 *    · .section3-text-slide-box  : 일반 flow scroll
 *      · gap PC 96px / Tablet 80px (Figma 충실)
 *      · mask-image 상하 페이드 (Figma 2301-6042)
 *      └ .section3-text-box      : 기본 opacity 0.5, GSAP scrub 으로 1↔0.5
 *  - .section3-note              : sticky bottom:20px 우측 정렬 (com-center 직계)
 *
 * Mobile (<=599): pin 해제, 세로 스택, note 도 static
 */
/* torderGpt 페이지 전용 : 공통 .sub-content-wrap 의 overflow:hidden 이
   하위 position:sticky / pin 을 깨트리므로 이 페이지에 한해 visible 로 해제한다. */
.sub-content-wrap:has(.gpt-wrap){
  overflow: visible;
}

.gpt-wrap .section3{
  --gpt-s3-bg: #ffffff;
  --gpt-s3-title: #131419;       /* torder-gray/950 */
  --gpt-s3-red: #ff193f;         /* torder-red/500 */
  --gpt-s3-title-gradient: linear-gradient(160.388deg, #ff193f 23.81%, #840040 84.583%);
  --gpt-s3-desc: #898ea3;        /* torder-gray/300 */
  --gpt-s3-info: #898ea3;
  --gpt-s3-tag: #ff193f;

  position: relative;
  width:100%;
  padding: 180px 0;
  background: var(--gpt-s3-bg);
}
.gpt-wrap .section3 .com-center{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* 상단 타이틀 (sticky 해제, 일반 flow) */
.gpt-wrap .section3-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:center;
}
.gpt-wrap .section3-title{
  display:flex;
  gap:14px;
  justify-content:center;
  margin:0;
  font-size:var(--font-size-h4);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.02em;
  white-space:nowrap;
}
.gpt-wrap .section3-title-line1{
  color:var(--gpt-s3-title);
}
.gpt-wrap .section3-title-line2{
  background: var(--gpt-s3-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gpt-wrap .section3-desc{
  margin:0;
  font-size:22px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-0.02em;
  color:var(--gpt-s3-desc);
}

/* info-group : 좌측 휴대폰(394) + 우측 텍스트(500) — Figma 1120 wide space-between
   GSAP pin 대비 : align-items:stretch + min-height:100vh 로 좌측 100vh 컨테이너 확보 */
.gpt-wrap .section3-info-group{
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  width:100%;
  min-height:100vh;
}

/* 좌측 : GSAP ScrollTrigger pin 대상
   - height:100vh 컨테이너 안에 휴대폰 프레임을 flex 중앙 배치
   - CSS sticky 제거 (JS 가 pin 처리) */
.gpt-wrap .section3-img-slide-box{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:100vh;
}
/* 휴대폰 프레임 (PC 394x630, radius 55 — Figma 충실) */
.gpt-wrap .section3-img-fade-box{
  position:relative;
  width:394px;
  height:630px;
  overflow:hidden;
  border-radius:55px 55px 0 0;
  background:transparent;
}
.gpt-wrap .section3-media-el{
  position:absolute;
  inset:0;
  /* 비디오 파일 좌/우 가장자리에 박힌 1~2px 검은 픽셀 가리기 — overflow:hidden 으로 자동 클립 */
  left:-2px;
  width:calc(100% + 4px);
  height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity .5s ease;
  pointer-events:none;
}
.gpt-wrap .section3-media-el.is-active{
  opacity:1;
}

/* 우측 : 텍스트 3블록 (일반 flow)
 *  - gap 96px (Figma 충실)
 *  - mask-image 상하 페이드 (Figma 2301-6042)
 *  - opacity 는 GSAP scrub timeline 으로 0.5 ↔ 1 보간 */
.gpt-wrap .section3-text-slide-box{
  position:relative;
  flex-shrink:0;
  width:500px;
  display:flex;
  flex-direction:column;
  gap:96px;
  /* top : 첫 박스 center 가 viewport 60% (= 휴대폰 pin 위치) 에 오도록 (text-box 221 / 2 = 110.5)
     bottom : 짧게 100px 로 마무리 빠르게 */
  padding:calc(50vh - 110.5px) 0 80px;
}
/* Figma 2301-6042 mask-group : 상/하단 흰색 fade overlay (page bg 흰색 가정).
   ::before(위) / ::after(아래) 분리 — fade 영역 길이/색을 각각 조정 가능. */
.gpt-wrap .section3-text-slide-box::before,
.gpt-wrap .section3-text-slide-box::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  pointer-events:none;
  z-index:2;
}
.gpt-wrap .section3-text-slide-box::before{
  top:0;
  height:107px; /* Figma 543 × 19.65% */
  background:linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%);
}
.gpt-wrap .section3-text-slide-box::after{
  bottom:0;
  height:163px; /* Figma 543 × 30% (100-70) */
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%);
}
/* text-box : 500x221, 기본 opacity 0.5 — GSAP scrub timeline 이 동적 제어
   .is-active 클래스는 비-GSAP 환경(reduce-motion / GSAP 미로드) 백업용 */
.gpt-wrap .section3-text-box{
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  width:500px;
  height:221px;
  opacity:0.5;
}
.gpt-wrap .section3-text-box.is-active{
  opacity:1;
}
/* PC/Tablet 에서는 모바일 전용 비디오 숨김 */
.gpt-wrap .section3-mobile-media{
  display:none;
}
/* text-body : 221 높이 안에서 head(태그+부제 135) + info(66) / gap 20 */
.gpt-wrap .section3-text-body{
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
  height:100%;
}
/* text-head : 태그 행(33) + 부제(90) → gap 12 = 135 */
.gpt-wrap .section3-text-head{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}
.gpt-wrap .section3-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:33px;
  font-size:22px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-0.02em;
  color:var(--gpt-s3-tag);
  font-style:normal;
}
.gpt-wrap .section3-icon{
  display:inline-block;
  width:24px;
  height:24px;
  flex-shrink:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.gpt-wrap .section3-icon-sales{
  background-image: url("/img/pages/torderGpt/section3-icon-sales.svg");
}
.gpt-wrap .section3-icon-customer{
  background-image: url("/img/pages/torderGpt/section3-icon-customer.svg");
}
.gpt-wrap .section3-icon-store{
  background-image: url("/img/pages/torderGpt/section3-icon-store.svg");
}
.gpt-wrap .section3-subtitle{
  display:flex;
  flex-direction:column;
  margin:0;
  font-size:var(--font-size-subtitle1);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.02em;
  color:var(--gpt-s3-title);
}
.gpt-wrap .section3-subtitle span{
  display:block;
}
.gpt-wrap .section3-info{
  display:flex;
  flex-direction:column;
  margin:0;
  font-size:22px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-0.02em;
  color:var(--gpt-s3-info);
}
.gpt-wrap .section3-info span{
  display:block;
}

/* note : com-center 직계 sticky bottom 20 우측 정렬 */
.gpt-wrap .section3-note{
  position:sticky;
  bottom:20px;
  z-index:2;
  width:100%;
  font-size:18px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-0.02em;
  color:var(--gpt-s3-info);
  text-align:right;
}

@media screen and (max-width:1199px) {
  /* Tablet (1024 기준) */
  .gpt-wrap .section3{
    padding:120px 0;
  }
  .gpt-wrap .section3 .com-center{
    gap:0;
    /* common tablet padding 60 → 80 override (Figma 매칭) */
    padding:0 80px;
  }
  .gpt-wrap .section3-head{
    gap:16px;
  }
  .gpt-wrap .section3-title{
    flex-direction:column;
    gap:0;
    font-size:var(--font-size-h5);
  }
  .gpt-wrap .section3-desc{
    font-size:18px;
    font-weight:500;
  }

  /* tablet : phone+text 가운데 정렬 + 명시적 gap (Figma 매칭) */
  .gpt-wrap .section3-info-group{
    padding-top: 80px;
    justify-content:flex-end;
    gap:100px;
    /* Figma 543 mask 영역 기준. min-height 로 자식(텍스트 자연 길이) 따라 자동 확장. */
    min-height:543px;
  }
  /* Tablet : phone 300x480 — img-slide-box 는 GSAP pin 대상이라 543 고정 */
  .gpt-wrap .section3-img-slide-box{
    width:auto;
    height:543px;
  }
  .gpt-wrap .section3-img-fade-box{
    width:300px;
    height:480px;
    border-radius:42px;
  }

  .gpt-wrap .section3-text-slide-box{
    width:400px;                          /* base 500 → 400 (자식 text-box 와 일치) */
    gap:80px;
    /* min-height 543 — Figma mask 영역 보장하되, 자식 자연 길이(약 685)가 더 크면
       자동 확장해서 다음 섹션과 겹침 방지 (text-box 3개 모두 정상 flow). */
    min-height:543px;
    padding:71px 0 0;
  }
  .gpt-wrap .section3-text-box{
    width:400px;
    height:auto;
  }
  .gpt-wrap .section3-text-body{
    gap:16px;
  }
  .gpt-wrap .section3-text-head{
    gap:10px;
  }
  .gpt-wrap .section3-tag{
    height:auto;
    font-size:18px;
    font-weight:500;
  }
  .gpt-wrap .section3-icon{
    width:20px;
    height:20px;
  }
  .gpt-wrap .section3-subtitle{
    font-size:var(--font-size-subtitle2);
  }
  .gpt-wrap .section3-info{
    font-size:18px;
    font-weight:500;
  }
  .gpt-wrap .section3-note{
    font-size:16px;
  }
}

@media screen and (max-width:599px) {
  /* Mobile (360 기준) : 텍스트 상 + 비디오 하 × 3회, pin 비활성 */
  .gpt-wrap .section3{
    padding:80px 0;
  }
  .gpt-wrap .section3 .com-center{
    gap:36px;
    padding: 0 20px;
  }
  .gpt-wrap .section3-head{
    gap:20px;
  }
  .gpt-wrap .section3-title{
    flex-direction:column;
    gap:0;
    font-size:var(--font-size-subtitle2);
    font-weight:700;
  }
  .gpt-wrap .section3-desc{
    /* Figma 모바일 : 노출되지 않음 */
    display:none;
  }

  /* head sticky 해제 */
  .gpt-wrap .section3-head{
    position:static;
    top:auto;
    padding: 0;
  }

  /* PC/Tablet 좌측 고정 비디오는 mobile 에서 숨김 */
  .gpt-wrap .section3-img-slide-box{
    display:none;
  }

  .gpt-wrap .section3-info-group{
    padding-top: 0;
    display:block;
    gap:0;
    height:auto;
    min-height:0;
  }
  .gpt-wrap .section3-text-slide-box{
    display:flex;
    flex-direction:column;
    gap:48px;
    width:100%;
    height:auto;
    max-width:100%;
    padding:0;
  }
  /* Mobile : 흰색 fade overlay 해제 */
  .gpt-wrap .section3-text-slide-box::before,
  .gpt-wrap .section3-text-slide-box::after{
    display:none;
  }
  .gpt-wrap .section3-text-box{
    flex-direction: column-reverse;
    align-items:center;
    gap:32px;
    width:100%;
    height:auto;
    opacity:1;
    text-align:center;
  }
  .gpt-wrap .section3-text-head{
    gap:8px;
    align-items:center;
  }
  /* mobile 에서 블록 내부 비디오 노출 */
  .gpt-wrap .section3-mobile-media{
    display:block;
    width:210px;
    height:auto;
    flex-shrink:0;
    border-radius:30px 30px 0 0;
    overflow:hidden;
  }
  .gpt-wrap .section3-mobile-media-el{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .gpt-wrap .section3-text-body{
    gap:12px;
    width:100%;
    align-items:center;
    display:flex;
    flex-direction:column;
  }
  .gpt-wrap .section3-tag{
    justify-content:center;
    font-size:16px;
    font-weight:700;
  }
  .gpt-wrap .section3-icon{
    width:16px;
    height:16px;
  }
  .gpt-wrap .section3-subtitle{
    align-items:center;
    font-size:var(--font-size-subtitle4);
    text-align:center;
  }
  .gpt-wrap .section3-info{
    align-items:center;
    font-size:var(--font-size-body5);
    font-weight:500;
    text-align:center;
  }
  .gpt-wrap .section3-note{
    position:static;
    bottom:auto;
    font-size:var(--font-size-body5);
    text-align:right;
  }
}

/* prefers-reduced-motion : 비디오/크로스페이드 최소화 */
@media (prefers-reduced-motion: reduce) {
  .gpt-wrap .section3-media-el,
  .gpt-wrap .section3-text-box{
    transition:none;
  }
}

/** section4 - 소상공인 특화 AI (숫자 증명) *******************************************************/
/**
 * 구성
 *  - section4-head     : 2행 타이틀 (테이블오더 1위 티오더가 만든 / 소상공인 특화 AI는 다릅니다.)
 *  - section4-stats    : 4 카드 grid
 *    · --map           : 전국 커버리지 + 한국 지도 (좌측 big)
 *    · --orders        : 누적 주문 건수 7억 3천+
 *    · --users         : 누적 이용자 수 11억+
 *    · --payments      : 누적 결제액 13조 원+
 *
 * 레이아웃 (grid)
 *  PC(1920)  : 2열 x 3행
 *              col1(421): map 이 3행 전체 점유
 *              col2(672): orders + users (1행), payments (2행 병합)
 *  Tablet    : PC 와 동일한 구조를 720px 컨테이너에 맞춰 축소
 *  Mobile    : 수직 스택 (map → orders·users(2열) → payments)
 *
 * 에셋
 *  - 한국 지도 일러스트: /img/pages/torderGpt/section4-map.svg (추후 지급)
 */
.gpt-wrap .section4{
  --gpt-s4-bg: #000000;
  --gpt-s4-title: #ffffff;
  --gpt-s4-desc: #ffc7d3;          /* t'order red/100 */
  --gpt-s4-card-border: rgba(255,102,133,0.7);
  --gpt-s4-card-glow: 0 0 20px 0 #ff193f;
  --gpt-s4-map-bg: #ad102a;        /* t'order red/800 */
  --gpt-s4-red: #ff193f;           /* t'order red/500 */
  --gpt-s4-deep: #4d050e;          /* t'order red/950 */
  /* 지도 카드 배경 글로우 (우측 상단 + 좌측 하단 라이트) */
  --gpt-s4-map-glow:
    radial-gradient(circle at 80% 100%, rgba(255,25,63,0.55) 0%, rgba(255,25,63,0) 58%),
    radial-gradient(circle at 5% 10%, rgba(255,140,160,0.35) 0%, rgba(255,25,63,0) 55%);
  /* PNG baked 배경 (Figma 2x export, 노드 2137:4504/4509/4514) */
  --gpt-s4-orders-glow: url("../../img/pages/torderGpt/section4-bg1.png");
  --gpt-s4-users-glow: url("../../img/pages/torderGpt/section4-bg2.png");
  --gpt-s4-payments-glow: url("../../img/pages/torderGpt/section4-bg3.png");

  position: relative;
  width:100%;
  padding:180px 0;
  background: var(--gpt-s4-bg);
  color: var(--gpt-s4-title);
  overflow: hidden;
}
.gpt-wrap .section4 .com-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:56px;
}

/* 상단 타이틀 */
.gpt-wrap .section4-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.gpt-wrap .section4-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin:0;
  font-size:var(--font-size-h4);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.02em;
  text-align:center;
  white-space:nowrap;
}
.gpt-wrap .section4-title-line1{
  color: var(--gpt-s4-title);
}
.gpt-wrap .section4-title-line2{
  display:flex;
  align-items:center;
  gap:12px;
}
.gpt-wrap .section4-title-accent{
  /* 소상공인 특화 : 분홍 → 연핑크 그라디언트 */
  background: linear-gradient(90deg, #fff5f7 32.718%, #ffccd5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  font-style: normal;
}
.gpt-wrap .section4-title-plain{
  color: var(--gpt-s4-title);
}

/* stats grid
   Figma 구조(노드 2137:4377) : map(421) + gap(30) + rightBlock(672)
   rightBlock 내부 : [orders(322) + gap(26) + users(322)] / [payments(672)]
   row gap = 26
   CSS grid 로 단일 표현 → gap 트랙(30/26)을 직접 컬럼에 명시 */
.gpt-wrap .section4-stats{
  display:grid;
  grid-template-columns: 421px 30px 322px 26px 322px;
  grid-template-rows: 320px 26px 308px;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  width:1120px;
  max-width:100%;
}

/* 공통 카드 */
.gpt-wrap .section4-stat{
  position:relative;
  overflow:hidden;
  padding:40px 38px 38px 40px;
  border:1px solid var(--gpt-s4-card-border);
  border-radius:36px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset var(--gpt-s4-card-glow);
  color: var(--gpt-s4-title);
}
.gpt-wrap .section4-stat::after{
  /* 카드 내부 글로우 (각 카드별 배경에 덧씌움) */
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}
.gpt-wrap .section4-stat-title{
  display:block;
  font-size:var(--font-size-subtitle2);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.02em;
  /* 살짝 핑크 그라디언트 (Figma: #ffffff → #ffcfd8) */
  background: linear-gradient(180deg, #ffffff 34.69%, #ffcfd8 88.112%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gpt-wrap .section4-stat-value {
  margin:0;
  font-size:var(--font-size-h1);
  font-weight:800;
  line-height:77px;
  color: var(--gpt-s4-title);
  text-align:right;
  white-space:nowrap;
}
.gpt-wrap .section4-stat--orders .section4-stat-value .odometer.odometer-auto-theme .odometer-digit:first-child,
.gpt-wrap .section4-stat--orders .section4-stat-value .odometer.odometer-theme-default .odometer-digit:first-child,
.gpt-wrap .section4-stat--orders .section4-stat-value .odometer.odometer-auto-theme,
.gpt-wrap .section4-stat--orders .section4-stat-value .odometer.odometer-auto-theme .odometer-digit,
.gpt-wrap .section4-stat--orders .section4-stat-value .odometer.odometer-theme-default,
.gpt-wrap .section4-stat--orders .section4-stat-value .odometer.odometer-theme-default .odometer-digit {
  letter-spacing: -0.05em !important;
}
.gpt-wrap .section4-stat-value .odometer.odometer-auto-theme,
.gpt-wrap .section4-stat-value .odometer.odometer-auto-theme .odometer-digit,
.gpt-wrap .section4-stat-value .odometer.odometer-theme-default,
.gpt-wrap .section4-stat-value .odometer.odometer-theme-default .odometer-digit {
  letter-spacing: -0.03em !important;
  /* 라이브러리 default vertical-align:middle → bottom 으로 변경하여 옆 한글 텍스트(억/조 원)
     와 플러스(+) 까지 모두 baseline 정렬 — stat 들의 line-height 가 달라도 시각상 바닥 일치 */
  vertical-align: bottom !important;
}
.gpt-wrap .section4-stat-value .section4-stat-plus {
  vertical-align: bottom;
}
/* 첫 자릿수 박스만 더 좁게 — 두 자릿수 사이의 시각 간격 보정.
   위 룰의 specificity (.odometer.odometer-auto-theme .odometer-digit = 0,5,0) 보다
   높은 specificity 필요 → :first-child pseudo 추가로 0,5,1 매칭. */
.gpt-wrap .section4-stat-value .odometer.odometer-auto-theme .odometer-digit:first-child,
.gpt-wrap .section4-stat-value .odometer.odometer-theme-default .odometer-digit:first-child {
  letter-spacing: -0.16em !important;
}

.gpt-wrap .section4-stat-plus{
  display:inline-block;
  padding-left:2px;
}
/* 카운트업 숫자 : Odometer 슬롯머신 롤링
 *  - Odometer 기본 폰트/색상 덮어쓰기 방지 (.section4-stat-value 스타일 상속)
 *  - 라이브러리 강제값 line-height:1.1em / vertical-align:middle 를 덮어 "억" 텍스트와 baseline 정렬
 *  - tabular-nums 로 자릿수 폭 일정 유지 */
.gpt-wrap .section4-odometer{
  display:inline-block;
  font: inherit;
  font-family: 'Pretendard', sans-serif;
  line-height:1.25;
  letter-spacing:inherit;
  color:inherit;
  vertical-align:baseline;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* reset.css 의 *{letter-spacing:-0.02em} 이 odometer 내부 element 에 직접 적용되어
   부모(.section4-stat-value -0.025em) 가 inherit 되지 않는 문제를 막기 위해 명시 inherit. */
.gpt-wrap .section4-odometer .odometer-inside,
.gpt-wrap .section4-odometer .odometer-digit,
.gpt-wrap .section4-odometer .odometer-digit .odometer-digit-spacer,
.gpt-wrap .section4-odometer .odometer-digit .odometer-digit-inner,
.gpt-wrap .section4-odometer .odometer-digit .odometer-ribbon,
.gpt-wrap .section4-odometer .odometer-digit .odometer-ribbon-inner,
.gpt-wrap .section4-odometer .odometer-value{
  font: inherit;
  font-family: 'Pretendard', sans-serif;
  line-height:1.25;
  letter-spacing:inherit;
  color:inherit;
  vertical-align: bottom !important;
}
/* odometer-theme-default.css 의
 *   .odometer.odometer-auto-theme,
 *   .odometer.odometer-auto-theme .odometer-digit { vertical-align:middle }
 * 를 baseline 으로 덮음 (section4 한정) */
.gpt-wrap .section4-odometer .odometer-digit,
.gpt-wrap .section4-odometer .odometer.odometer-auto-theme,
.gpt-wrap .section4-odometer .odometer.odometer-auto-theme .odometer-digit,
.gpt-wrap .section4-odometer .odometer.odometer-theme-default,
.gpt-wrap .section4-odometer .odometer.odometer-theme-default .odometer-digit,
.gpt-wrap .section4-odometer .odometer.odometer-auto-theme,
.gpt-wrap .section4-odometer .odometer.odometer-auto-theme .odometer-digit,
.gpt-wrap .section4-odometer .odometer.odometer-theme-default,
.gpt-wrap .section4-odometer .odometer.odometer-theme-default .odometer-digit,
.gpt-wrap .section4-odometer .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
.gpt-wrap .section4-odometer .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
  vertical-align: bottom !important;
}
/* spacer 는 별도 — 라이브러리 기본을 sub 로 유지 (자릿수 폭 placeholder) */
.gpt-wrap .section4-odometer .odometer-digit .odometer-digit-spacer{
  vertical-align:bottom !important;
}


/* 1. map 카드 : 좌측, 큰 카드 (row 1~3 전체 점유) */
.gpt-wrap .section4-stat--map{
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  display:flex;
  flex-direction:column;
  gap:0;
  background-color: var(--gpt-s4-map-bg);
  background-image: var(--gpt-s4-map-glow);
}
.gpt-wrap .section4-stat--map .section4-stat-head{
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
  z-index:2;
}
.gpt-wrap .section4-stat--map .section4-stat-title{
  font-size:var(--font-size-subtitle2);
}
.gpt-wrap .section4-stat-sub{
  margin:0;
  font-size:18px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-0.02em;
  color: var(--gpt-s4-desc);
  opacity:0.77;
}
/* 지도 일러스트 영역 (에셋 지급 전 placeholder 유지) */
.gpt-wrap .section4-stat-map{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.gpt-wrap .section4-stat-map-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* 2. 누적 주문 건수 */
.gpt-wrap .section4-stat--orders{
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background-color: var(--gpt-s4-red);
  background-image: var(--gpt-s4-orders-glow);
}
.gpt-wrap .section4-stat--orders .section4-stat-title{
  /* Figma 2137:4507 - 붉은 배경 위에서도 흰색 → 연핑크 그라디언트 유지 */
  background: linear-gradient(180deg, #ffffff 34.69%, #ffcfd8 88.112%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gpt-wrap .section4-stat--orders .section4-stat-value{
  text-align:right;
}

/* 3. 누적 이용자 수 */
.gpt-wrap .section4-stat--users{
  grid-column: 5 / 6;
  grid-row: 1 / 2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background-color: var(--gpt-s4-deep);
  background-image: var(--gpt-s4-users-glow);
}
.gpt-wrap .section4-stat--users .section4-stat-title{
  /* Figma : #fff5f7 → #ffa6b7 */
  background: linear-gradient(180deg, #fff5f7 34.69%, #ffa6b7 88.112%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* 4. 누적 결제액 : 우측 하단 가로 긴 카드 (col 3~5 병합, 2px 차이는 Figma 반올림 허용) */
.gpt-wrap .section4-stat--payments{
  grid-column: 3 / 6;
  grid-row: 3 / 4;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background-color: var(--gpt-s4-bg);
  background-image: var(--gpt-s4-payments-glow);
}
.gpt-wrap .section4-stat--payments .section4-stat-value{
  font-size:84px;
  /* Figma 2137:4519 — h1 60px(1.25) 와 달리 84px 결제액만 leading:normal 사용 */
  line-height:normal;
  letter-spacing:-0.02em;
  font-weight:700;
}

/* Tablet : max-width 1199 ***********************************/
@media screen and (max-width:1199px) {
  .gpt-wrap .section4{
    padding:120px 0;
  }
  .gpt-wrap .section4 .com-center{
    gap:48px;
  }
  .gpt-wrap .section4-title{
    font-size:var(--font-size-h5);
    letter-spacing:-0.02em;
  }
  .gpt-wrap .section4-title-line2{
    gap:10px;
  }
  .gpt-wrap .section4-stats{
    /* Tablet : map + gap + orders + gap + users / row2: payments
       PC 와 동일한 gap 트랙 구조(단, 축소된 폭) */
    grid-template-columns: 1fr 12px 208px 12px 208px;
    grid-template-rows: 214px 12px 214px;
    gap:0;
    width:720px;
  }
  .gpt-wrap .section4-stat{
    padding:30px;
    border-radius:20px;
  }
  .gpt-wrap .section4-stat--map{
    grid-column:1 / 2;
    grid-row:1 / 4;
    position:relative;
  }
  .gpt-wrap .section4-stat--map .section4-stat-title{
    font-size:var(--font-size-subtitle2);
  }
  .gpt-wrap .section4-stat-sub{
    font-size:18px;
  }
  .gpt-wrap .section4-stat-value{
    font-size:var(--font-size-h6);
    letter-spacing:-0.02em;
    line-height: normal;
  }
  .gpt-wrap .section4-stat--orders{
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    align-items:stretch;
  }
  .gpt-wrap .section4-stat--users{
    grid-column: 5 / 6;
    grid-row: 1 / 2;
    align-items:stretch;
    /* Tablet 전용 비율 PNG (PC bg2 와 색감 동일, 416×428 정사각형) */
    background-image: url("../../img/pages/torderGpt/section4-bg2-mo.png");
  }
  .gpt-wrap .section4-stat--orders .section4-stat-title,
  .gpt-wrap .section4-stat--users .section4-stat-title{
    font-size:22px;
    font-weight:600;
  }
  .gpt-wrap .section4-stat--payments{
    grid-column: 3 / 6;
    grid-row: 3 / 4;
  }
  .gpt-wrap .section4-stat--payments .section4-stat-title{
    font-size:22px;
    font-weight:600;
  }
  .gpt-wrap .section4-stat--payments .section4-stat-value{
    font-size:var(--font-size-h4);
  }
  .gpt-wrap .section4-stat-map{
    inset: 0;
  }

  .gpt-wrap .section4-stat-value .odometer.odometer-auto-theme,
  .gpt-wrap .section4-stat-value .odometer.odometer-auto-theme .odometer-digit,
  .gpt-wrap .section4-stat-value .odometer.odometer-theme-default,
  .gpt-wrap .section4-stat-value .odometer.odometer-theme-default .odometer-digit {
    vertical-align: baseline !important;
  }
}

/* Mobile : max-width 599 ***********************************/
@media screen and (max-width:599px) {
  .gpt-wrap .section4{
    padding:80px 0;
  }
  .gpt-wrap .section4 .com-center{
    gap:36px;
    padding:0 20px;
  }
  /* Mobile : 작은 폭에서 28px 타이틀이 4줄로 깨지는 걸 막기 위해
     공통 .com-center 의 padding 을 흡수 + title 전용 폭을 한 글자 더 확보 */
  .gpt-wrap .section4-head{
    width: calc(100% + 0px);   /* padding 유지, 별도 보정은 title 에서 */
  }
  .gpt-wrap .section4-title{
    /* PC flex-column override → block 으로 자식 span 들이 inline 흐름 */
    display:block;
    font-size:var(--font-size-subtitle2);
    font-weight:700;
    line-height:1.25;
    letter-spacing:-0.02em;
    white-space:normal;
    word-break:keep-all;
    gap:0;
    width:100%;
  }
  /* Mobile : 3행 강제 줄바꿈
   *   1행 — 테이블오더 1위 티오더가         (pc-part block)
   *   2행 — 만든 소상공인 특화 AI는           (mobile-wrap + accent + plain inline)
   *   3행 — 다릅니다.                         (final block)
   * line1/line2 wrapper 를 display:contents 로 풀어 자식 6개를 .section4-title 직속 흐름으로 배치
   */
  .gpt-wrap .section4-title-line1,
  .gpt-wrap .section4-title-line2{
    display:contents;
  }
  .gpt-wrap .section4-title-pc-part{
    display:block;
  }
  .gpt-wrap .section4-title-br{
    display:none;
  }
  .gpt-wrap .section4-title-mobile-wrap,
  .gpt-wrap .section4-title-accent,
  .gpt-wrap .section4-title-plain{
    display:inline;
  }
  .gpt-wrap .section4-title-final{
    display:block;
  }
  .gpt-wrap .section4-title-accent{
    /* Figma Mobile : #ffe4e9 → #ffa7b7 */
    background: linear-gradient(90deg, #ffe4e9 32.718%, #ffa7b7 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    margin-right:4px;
  }
  .gpt-wrap .section4-stats{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 100px 100px;
    gap:8px;
    width:100%;
  }
  .gpt-wrap .section4-stat{
    padding:23px 22px;
    border-radius:16px;
  }
  .gpt-wrap .section4-stat--map{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    padding:23px 24px;
    /* Mobile 전용 가로형 PNG (좌 빈 공간 + 우 한국 지도 + 발광 모두 baked) */
    background-image: url("../../img/pages/torderGpt/section4-bg-map.png");
  }
  /* bg-map.png 에 한국 지도 baked → 내부 지도 PNG container hide (이중 표시 방지) */
  .gpt-wrap .section4-stat--map .section4-stat-map{
    display:none;
  }
  .gpt-wrap .section4-stat--map .section4-stat-head{
    gap:4px;
  }
  .gpt-wrap .section4-stat--map .section4-stat-title{
    font-size:22px;
    font-weight:600;
  }
  .gpt-wrap .section4-stat-sub{
    font-size:var(--font-size-body5);
    letter-spacing:-0.02em;
  }
  .gpt-wrap .section4-stat--orders{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .gpt-wrap .section4-stat--users{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .gpt-wrap .section4-stat--payments{
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    padding:17px 22px;
  }
  .gpt-wrap .section4-stat-title{
    font-size:22px !important;        /* 소형 카드 타이틀 */
    font-weight:600;
  }
  /* Figma 2385:2581/2585/2590 : inner 박스 카드 수직중앙 + column
   *   숫자(좌측 정렬) → 라벨(우측 정렬) 같은 박스 안에서 위/아래
   *   orders/users : gap 12 / payments : space-between (위/아래 양 끝) */
  .gpt-wrap .section4-stat--orders,
  .gpt-wrap .section4-stat--users,
  .gpt-wrap .section4-stat--payments{
    display:flex;
    flex-direction:column;
    align-items:stretch;          /* 자식 width 100% 보장 → text-align 작동 */
    justify-content:center;        /* orders/users : 세로 중앙 */
    gap:12px;
  }
  .gpt-wrap .section4-stat--payments{
    justify-content:space-between; /* payments 만 위/아래 양 끝 (Figma 2385:2590) */
  }
  /* 숫자 : 좌측 정렬 (Figma 카드 inner 좌측 시작) */
  .gpt-wrap .section4-stat--orders .section4-stat-value,
  .gpt-wrap .section4-stat--users .section4-stat-value,
  .gpt-wrap .section4-stat--payments .section4-stat-value{
    order:1;
    width:100%;
    font-size:22px;
    font-weight:600;
    line-height:1.5;
    letter-spacing:-0.02em;
    text-align:left;
  }
  /* 라벨 : 우측 정렬 (Figma text-right) */
  .gpt-wrap .section4-stat--orders .section4-stat-title,
  .gpt-wrap .section4-stat--users .section4-stat-title,
  .gpt-wrap .section4-stat--payments .section4-stat-title{
    order:2;
    width:100%;
    text-align:right;
    font-size:14px !important;
    font-weight:500;
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--gpt-s4-desc);
  }
  .gpt-wrap .section4-stat-map{
    inset: 0;
  }
}

/** section5 - 사장님 후기 (질문하지 않아도 알아서 먼저) *******************************************/
/**
 * 구성
 *  - section5-head   : eyebrow(코랄핑크) + 2행 타이틀(흰색)
 *  - section5-media  : 사장님 인터뷰 비디오 영역 + 좌하단 caption
 *
 * 레이아웃
 *  PC(1920)  : 텍스트(540) | gap32 | 비디오(548×365)  -- 가로 2열
 *  Tablet    : 텍스트(flex) | 비디오(339×227)          -- 가로 2열 축소
 *  Mobile    : 텍스트 → 비디오(320×213)               -- 세로 스택
 *
 * 에셋
 *  - /media/torderGpt/section5-ceo.mp4         (지급 대기)
 *  - /img/pages/torderGpt/section5-ceo-poster.png (지급 대기)
 *  - 지급 전에는 검정 placeholder 유지
 */
.gpt-wrap .section5{
  --gpt-s5-bg: #131419;                 /* Section 2 칩 영역 동일 계열 (common.css 토큰 없음) */
  --gpt-s5-eyebrow: var(--torder-red-200);
  --gpt-s5-title: var(--color-white);
  --gpt-s5-caption: #c9cbd6;            /* t'order gray/100 근접 (공통 토큰 미존재) */

  position: relative;
  width:100%;
  padding:100px 0;
  background: var(--gpt-s5-bg);
  color: var(--gpt-s5-title);
  overflow: hidden;
}
.gpt-wrap .section5 .com-center{
  display:flex;
  justify-content:center;
}

/* 래퍼 - PC 가로 2열 / Mobile 세로 스택 */
.gpt-wrap .section5-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  width:100%;
  max-width:1120px;
}

/* 좌측 텍스트 영역 */
.gpt-wrap .section5-head{
  display:flex;
  flex-direction:column;
  gap:20px;
  width:540px;
  flex-shrink:0;
}
.gpt-wrap .section5-eyebrow{
  margin:0;
  font-size:22px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-0.02em;
  color: var(--gpt-s5-eyebrow);
  white-space:nowrap;
}
.gpt-wrap .section5-title{
  margin:0;
  font-size:var(--font-size-h5);
  font-weight:800;
  color: var(--gpt-s5-title);
}
.gpt-wrap .section5-title-line{
  display:block;
  white-space:nowrap;
}

/* 우측 비디오 영역 */
.gpt-wrap .section5-media{
  position:relative;
  margin:0;
  width:548px;
  height:365px;
  border-radius:32px;
  overflow:hidden;
  flex-shrink:0;
}
.gpt-wrap .section5-media-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* 하단 gradient overlay (Figma: black 70% → transparent, 하단 ~60%) */
.gpt-wrap .section5-media::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0) 60%
  );
  pointer-events:none;
}
.gpt-wrap .section5-caption{
  position:absolute;
  left:30px;
  bottom:30px;
  font-size:18px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-0.02em;
  color: var(--gpt-s5-caption);
  z-index:1;
}

/* Tablet (1199 이하) */
@media screen and (max-width:1199px) {
  .gpt-wrap .section5{
    padding:52px 0;
  }
  .gpt-wrap .section5-inner{
    gap:0;
    max-width:720px;
  }
  .gpt-wrap .section5-head{
    width:auto;
    flex:1 0 0;
    min-width:0;
    gap:12px;
    padding:40px 0;
  }
  .gpt-wrap .section5-eyebrow{
    font-size:16px;
    font-weight:500;
    color: var(--torder-red-300);       /* Tablet/Mobile 은 300 (PC 는 200) */
  }
  .gpt-wrap .section5-title{
    font-size:var(--font-size-subtitle2);
    font-weight:700;
  }
  .gpt-wrap .section5-media{
    width:339px;
    height:227px;
    border-radius:16px;
  }
  .gpt-wrap .section5-caption{
    left:20px;
    bottom:20px;
    font-size:var(--font-size-body5);
  }
}

/* Mobile (599 이하) - 세로 스택 */
@media screen and (max-width:599px) {
  .gpt-wrap .section5{
    padding:60px 0;
  }
  .gpt-wrap .section5-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:32px;
    max-width:100%;
  }
  .gpt-wrap .section5-head{
    width:100%;
    flex:initial;
    gap:8px;
    padding:0 12px;
  }
  .gpt-wrap .section5-eyebrow{
    font-size:var(--font-size-body5);
    font-weight:500;
    white-space:normal;
  }
  .gpt-wrap .section5-title{
    font-size:24px;
    font-weight:700;
  }
  .gpt-wrap .section5-title-line{
    white-space:normal;
  }
  .gpt-wrap .section5-media{
    width:100%;
    height:auto;
    border-radius:12px;
    align-self:center;
  }
  .gpt-wrap .section5-caption{
    left:18px;
    bottom:16px;
    font-size:var(--font-size-body5);
  }
}

/* section6 ---------------------------------------------------------------- */
.gpt-wrap .section6{
  --gpt-s6-bg: radial-gradient(
    ellipse 172% 79% at 50% 0%,
    #6e001c 8.38%,
    #3f0816 49.19%,
    #280c13 69.59%,
    #101010 90%
  );
  --gpt-s6-pain-bg: rgba(255, 255, 255, 0.1);
  --gpt-s6-pain-text: #e5e6ea;
  --gpt-s6-title-gradient: linear-gradient(150.433deg, var(--torder-red-500) 23.81%, #ff5974 84.583%);

  position: relative;
  width:100%;
  padding:180px 0;
  background: var(--gpt-s6-bg);
  overflow:hidden;
}
.gpt-wrap .section6 .com-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:56px;
}

.gpt-wrap .section6-title{
  width:100%;
  margin:0;
  font-size:var(--font-size-h4);
  font-weight:800;
  text-align:center;
  white-space:nowrap;
  word-break:keep-all;
}
.gpt-wrap .section6-title-accent{
  background: var(--gpt-s6-title-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  font-style: normal;
}
.gpt-wrap .section6-title-plain{
  color: var(--color-white);
}
.gpt-wrap .section6-title-line2{
  display:inline;
}

.gpt-wrap .section6-flex{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
}
.gpt-wrap .section6-row{
  display:flex;
  gap:32px;
  width:100%;
}
.gpt-wrap .section6-row > .section6-pain,
.gpt-wrap .section6-row > .section6-solve{
  flex:1 1 0;
  min-width:0;
}
.gpt-wrap .section6-row-arrow > .section6-arrow-cell{
  flex:1 1 0;
  min-width:0;
}

.gpt-wrap .section6-pain{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 23px;
  background: var(--gpt-s6-pain-bg);
  border-radius:20px;
  overflow:hidden;
}
.gpt-wrap .section6-pain-text{
  margin:0;
  font-size:var(--font-size-subtitle4);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.02em;
  color: var(--gpt-s6-pain-text);
  text-align:center;
}

.gpt-wrap .section6-arrow-cell{
  display:flex;
  align-items:center;
  justify-content:center;
}
.gpt-wrap .section6-arrow{
  display:block;
  width:30px;
  height:15px;
  background: url("/img/pages/torderGpt/section6-arrow.svg") no-repeat center / contain;
}

.gpt-wrap .section6-solve{
  position:relative;
  height:259px;
  border-radius:20px;
  overflow:hidden;
}
.gpt-wrap .section6-solve-glow{
  position:absolute;
  top:50%;
  left:50%;
  width:352px;
  height:259px;
  transform: translate(-50%, -50%);
  background: url("/img/pages/torderGpt/section6-glow.png") no-repeat center / contain;
  pointer-events:none;
  z-index:0;
}
.gpt-wrap .section6-solve-text{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.02em;
  color: var(--color-white);
  text-align:center;
  white-space:nowrap;
  z-index:1;
}

.gpt-wrap .section6-scroll{
  display:none;
}

@media screen and (max-width:1199px) {
  .gpt-wrap .section6{
    padding:120px 0;
  }
  .gpt-wrap .section6 .com-center{
    gap:48px;
    max-width:1024px;
    padding:0 80px;
  }
  .gpt-wrap .section6-title{
    font-size:var(--font-size-h5);
  }
  .gpt-wrap .section6-title-line2{
    display:block;
  }
  .gpt-wrap .section6-title-accent{
    background: linear-gradient(163.212deg, var(--torder-red-500) 23.81%, #ff5974 84.583%);
    -webkit-background-clip: text;
            background-clip: text;
  }

  /* Tablet : section6-flex 를 row 방향으로 회전시키면 같은 HTML 로
     [pain | arrow | solve] 가 행 단위로 보이는 layout 이 만들어짐.
     pain 의 aspect-ratio 가 height 를 결정 → solve 는 stretch 로 자동 매칭되어 동일 비율 유지. */
  .gpt-wrap .section6-flex{
    flex-direction:row;
    align-items:stretch;
    gap:40px;
    height:auto;
  }
  .gpt-wrap .section6-row{
    flex-direction:column;
    flex:1 1 0;
    min-width:0;
    gap:20px;
    width:auto;
    height:auto;
  }
  .gpt-wrap .section6-row-arrow{
    flex:0 0 32px;
  }
  .gpt-wrap .section6-row > .section6-pain,
  .gpt-wrap .section6-row > .section6-solve{
    flex:1 1 0;
    min-height:189px;
    height:auto;
  }
  .gpt-wrap .section6-row > .section6-pain{
    aspect-ratio: 384 / 189;
  }
  .gpt-wrap .section6-row-arrow > .section6-arrow-cell{
    flex:1 1 0;
    min-height:0;
  }

  .gpt-wrap .section6-pain{
    padding:52px 30px;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 100%);
  }
  /* nowrap 해제하지 않으면 좁은 카드에서 absolute+nowrap 텍스트가 좌우로 overflow → overflow:hidden 에 잘림 */
  .gpt-wrap .section6-solve-text{
    width:100%;
    padding:0 16px;
    box-sizing:border-box;
    white-space:normal;
  }
  .gpt-wrap .section6-arrow{
    width:32px;
    height:16px;
    transform: rotate(-90deg);
  }
  .gpt-wrap .section6-solve{
    height:auto;
  }
  .gpt-wrap .section6-solve-glow{
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform:none;
    background-image: url("/img/pages/torderGpt/section6-glow-tablet.png");
  }
}

@media screen and (max-width:599px) {
  .gpt-wrap .section6{
    padding:80px 0;
  }
  /* tablet override 를 reset. section2 와 동일 패턴 — com-center 좌우 padding 제거하여
     section6-scroll 이 viewport 끝까지 차도록, title 은 자체 padding 으로 좌우 여백 유지. */
  .gpt-wrap .section6 .com-center{
    gap:36px;
    max-width:none;
    padding:0;
  }
  .gpt-wrap .section6-title{
    font-size:var(--font-size-subtitle2);
    font-weight:700;
    white-space:normal;
    padding-left:20px;
    padding-right:20px;
  }
  .gpt-wrap .section6-title-accent{
    background: linear-gradient(158.006deg, var(--torder-red-500) 23.81%, #ff5974 84.583%);
    -webkit-background-clip: text;
            background-clip: text;
  }

  .gpt-wrap .section6-flex{
    display:none;
  }

  /* 모바일 통합 카드 swiper (autoplay 3s, 좌우 스와이프 가능)
   * - slidesPerView:'auto' + 카드 width 260 → viewport 360 - 좌우 padding 40 = 320 가용,
   *   카드 260 + spaceBetween 12 → 다음 카드 살짝 노출 (≈48px) */
  .gpt-wrap .section6-scroll{
    display:block;       /* swiper container — block default */
    width:100%;
    overflow:hidden;     /* loop 시 양옆 카드 컨테이너 밖 표시 방지 */
  }

  .gpt-wrap .section6-card{
    position:relative;
    /* 기준 260×250, viewport 따라 비율 유지하며 축소/확대 — 360 viewport 의 약 72% (260/360) */
    width:72.22vw;
    max-width:260px;
    aspect-ratio: 260 / 250;
    height:auto;
    padding:24px 22px;
    background: linear-gradient(180deg, #9a0000 0%, #000 54.726%);
    border-radius:16px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:24px;
    box-sizing:border-box;
  }
  /* 모바일 카드 글로우/발광은 PNG 에 baked, 별도 box-shadow 미사용 */
  .gpt-wrap .section6-card-glow{
    position:absolute;
    inset:0;
    background: url("/img/pages/torderGpt/section6-glow-mobile.png") no-repeat center / cover;
    pointer-events:none;
    z-index:0;
  }
  .gpt-wrap .section6-card-pain{
    position:relative;
    z-index:1;
    margin:0;
    font-size:16px;
    font-weight:500;
    line-height:1.5;
    letter-spacing:-0.02em;
    color: var(--torder-red-50);              /* #ffdbe4 */
    text-align:center;
  }
  .gpt-wrap .section6-card-arrow{
    position:relative;
    z-index:1;
    display:block;
    width:24px;
    height:12px;
    background: url("/img/pages/torderGpt/section6-arrow.svg") no-repeat center / contain;
    flex-shrink:0;
  }
  .gpt-wrap .section6-card-solve{
    position:relative;
    z-index:1;
    margin:0;
    font-size:var(--font-size-subtitle4);
    font-weight:700;
    line-height:1.25;
    letter-spacing:-0.02em;
    color: var(--color-white);
    text-align:center;
    white-space:nowrap;
  }
}

/** section7 - 카카오톡 데모 + 탭리스트 *******************************************************/
/**
 * 구성
 *  - .section7-header  : "지금 티오더GPT(핑크) 경험해 보세요" + sub
 *  - .section7-inner   : 3열 (PC 전용 좌측문구 | 폰 목업 | 질문 버튼 5개)
 *  - .section7-phone   : 카카오톡 폰 목업 340×600 (노드 2338-2771 재현)
 *                          status bar + kakao header + chat body + chat foot
 *  - .section7-chat-dynamic : JS 로 Q/typing/A 말풍선 삽입
 *
 * 반응형
 *  PC    (>=1200) : [ 상품관리문구 | 폰 | 질문리스트 ]  3열
 *  Tablet(<=1199) : [ 폰 | 질문리스트 ] 2열, 좌측문구 숨김
 *  Mobile(<=599)  : 폰(위) → 질문리스트(아래) 세로 스택
 *
 * 인터랙션 : /js/sub/torder-gpt/section7.js
 */
.gpt-wrap .section7{
  /* 로컬 토큰 (3회+ 재사용 항목만) */
  --gpt-s7-phone-w: 340px;
  --gpt-s7-phone-h: 600px;
  --gpt-s7-phone-radius: 24px;
  /* Figma 합성 PNG (statusbar + 카카오 헤더 + 채팅 그라디언트 + 입력창 단일 이미지) */
  --gpt-s7-phone-bg: url("../../img/pages/torderGpt/section7-phone-bg.png") no-repeat center / cover, linear-gradient(180deg, #d5e3ec 0%, #8fb5ce 68.455%, #427da4 100%);
  --gpt-s7-kakao-yellow: #fee500;
  --gpt-s7-bubble-text: var(--color-black);
  --gpt-s7-bubble-radius-a: 12px;
  --gpt-s7-bubble-radius-q: 14px;
  --gpt-s7-bot-label: #131419;
  --gpt-s7-placeholder: rgba(0, 0, 0, 0.3);
  --gpt-s7-btn-bg: #edeff2;
  --gpt-s7-btn-text: #252730;
  --gpt-s7-btn-active-bg: var(--torder-red-50);
  --gpt-s7-btn-active-border: var(--torder-red-500);
  --gpt-s7-btn-active-text: var(--torder-red-500);
  --gpt-s7-title-gradient: linear-gradient(152.964deg, #FF193F 23.81%, #840040 84.583%);
  --gpt-s7-status-color: #252730;

  position: relative;
  width:100%;
  padding:180px 0;
  background: var(--color-white);
  overflow:hidden;
}
.gpt-wrap .section7 .com-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:56px;
  max-width:1120px;
}

/* 헤더 */
.gpt-wrap .section7-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  width:100%;
}
.gpt-wrap .section7-title{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:0;
  font-size:var(--font-size-h4);
  font-weight:800;
  white-space:nowrap;
}
.gpt-wrap .section7-title-plain{
  color: #131419;
}
.gpt-wrap .section7-title-accent{
  background: var(--gpt-s7-title-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.gpt-wrap .section7-sub{
  margin:0;
  font-size:24px;
  font-weight:700;
  color:#6a7089;
}

/* 본체 3열 레이아웃 */
.gpt-wrap .section7-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:88px;
  width:100%;
}
.gpt-wrap .section7-side{
  flex:0 0 auto;
  min-width:302px;
}
.gpt-wrap .section7-side-text{
  margin:0;
  font-size:var(--font-size-h4);
  font-weight:800;
  color:#131419;
  white-space:nowrap;
}
.gpt-wrap .section7-tab{
  flex:0 0 auto;
  min-width:302px;
}

/* 폰 프레임 (340×600) */
.gpt-wrap .section7-phone{
  position:relative;
  flex-shrink:0;
  width: var(--gpt-s7-phone-w);
  height: var(--gpt-s7-phone-h);
  background: var(--gpt-s7-phone-bg);
  border-radius: var(--gpt-s7-phone-radius);
  overflow:hidden;
}
.gpt-wrap .section7-phone-inner{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  padding:20px 0;
}

/* 상태바 + 카카오 헤더 묶음
 * 기존 HTML/CSS 재현 → div.phone_container.png 단일 이미지로 대체.
 * 공간은 유지 (chat-body 위치 기준점), 콘텐츠는 visibility:hidden 으로 invisible. */
.gpt-wrap .section7-statusbar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11.303px;
  padding: 0 16.607px 24px;
  visibility:hidden;
}
.gpt-wrap .section7-status-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:286px;
  height:16.147px;
}
.gpt-wrap .section7-status-signal{
  display:block;
  width:32.293px;
  height:16.147px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'><g fill='%23252730'><rect x='2' y='10' width='3' height='4' rx='0.5'/><rect x='7' y='7' width='3' height='7' rx='0.5'/><rect x='12' y='5' width='3' height='9' rx='0.5'/><rect x='17' y='3' width='3' height='11' rx='0.5'/></g></svg>") no-repeat left center / contain;
}
.gpt-wrap .section7-status-right{
  display:flex;
  gap:3.229px;
  align-items:center;
}
.gpt-wrap .section7-status-wifi{
  display:block;
  width:19.069px;
  height:16.147px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 16' fill='%23252730'><path d='M9.5 3C6.3 3 3.5 4.1 1.5 5.8l1.5 1.5c1.6-1.3 3.9-2.1 6.5-2.1s4.9 0.8 6.5 2.1l1.5-1.5C15.5 4.1 12.7 3 9.5 3zm0 3.2c-2 0-3.8 0.7-5.2 1.9l1.5 1.5c1-0.8 2.3-1.3 3.7-1.3s2.7 0.5 3.7 1.3l1.5-1.5c-1.4-1.2-3.2-1.9-5.2-1.9zm0 3.2c-0.9 0-1.8 0.3-2.5 0.9l2.5 2.5 2.5-2.5c-0.7-0.6-1.6-0.9-2.5-0.9z'/></svg>") no-repeat center / contain;
}
.gpt-wrap .section7-status-volume{
  display:block;
  width:17.588px;
  height:16.147px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16' fill='%23252730'><path d='M10 3L5.5 6H2v4h3.5L10 13V3zm3.5 1.5c1.5 1 2.5 2.6 2.5 4.5s-1 3.5-2.5 4.5'  stroke='%23252730' stroke-width='0.8' fill='none'/></svg>") no-repeat center / contain;
}
.gpt-wrap .section7-status-battery{
  display:block;
  width:24.558px;
  height:16.147px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 16'><rect x='1' y='4' width='20' height='8' rx='1.5' fill='none' stroke='%23252730' stroke-width='0.8' opacity='0.6'/><rect x='2' y='5' width='18' height='6' rx='1' fill='%23252730'/><rect x='22' y='6.5' width='1.5' height='3' fill='%23252730' opacity='0.6'/></svg>") no-repeat center / contain;
}
.gpt-wrap .section7-kakao-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:306px;
  height:20px;
}
.gpt-wrap .section7-kakao-back{
  display:block;
  width:9.688px;
  height:19.376px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20' fill='none' stroke='%23252730' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='7,4 3,10 7,16'/></svg>") no-repeat center / contain;
}
.gpt-wrap .section7-kakao-title{
  display:flex;
  align-items:center;
  gap:4.037px;
  font-family:'Pretendard';
  font-weight:600;
  font-size:15px;
  line-height:1.35;
  letter-spacing:-0.01em;
  color:#252730;
}
.gpt-wrap .section7-kakao-badge{
  display:block;
  width:19.376px;
  height:19.376px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23252730'><path d='M10 3c-3.3 0-6 2-6 4.4 0 1.6 1.1 2.9 2.7 3.7L6 13l2.6-1.6c0.4 0.1 0.9 0.1 1.4 0.1 3.3 0 6-2 6-4.4S13.3 3 10 3z'/></svg>") no-repeat center / contain;
}
.gpt-wrap .section7-kakao-actions{
  display:flex;
  gap:8.073px;
  align-items:center;
}
.gpt-wrap .section7-kakao-search{
  display:block;
  width:19.376px;
  height:19.376px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23252730' stroke-width='1.5' stroke-linecap='round'><circle cx='9' cy='9' r='5.5'/><line x1='13' y1='13' x2='17' y2='17'/></svg>") no-repeat center / contain;
}
.gpt-wrap .section7-kakao-menu{
  display:block;
  width:19.376px;
  height:19.376px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23252730' stroke-width='1.5' stroke-linecap='round'><line x1='4' y1='7' x2='16' y2='7'/><line x1='4' y1='13' x2='16' y2='13'/></svg>") no-repeat center / contain;
}

/* 채팅 body (인삿말 + 동적영역)
   - flex:1 1 0 : 남은 수직 공간을 basis 0 기준으로 꽉 채워 chat-body 높이 확정
   - min-height:0 + overflow-y:auto : 내용이 body 높이 초과 시 내부 스크롤 활성화
   - gap:19.759px : Figma 2348-3129 spec (greet ↔ dynamic 간격) */
.gpt-wrap .section7-chat-body{
  flex:1 1 0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding: 0 16.607px; /* bottom 패딩은 dynamic 의 margin-bottom 으로 이전 — flex column scroll 컨테이너의 padding-bottom 이 마지막 자식과 겹치는 브라우저 버그 회피 */
  display:flex;
  flex-direction:column;
  gap:19.759px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  margin-bottom: 51px;
}
.gpt-wrap .section7-chat-body::-webkit-scrollbar{
  width:3px;
}
.gpt-wrap .section7-chat-body::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.15);
  border-radius:3px;
}

.gpt-wrap .section7-chat-dynamic{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding-bottom: 20px;
}

/* 인삿말 블록 + 동적 row 공통 */
.gpt-wrap .section7-chat-greet,
.gpt-wrap .section7-chat-row--a.section7-chat-row--with-avatar{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
}
.gpt-wrap .section7-chat-row{
  display:flex;
  width:100%;
}
.gpt-wrap .section7-chat-row--q{
  justify-content:flex-end;
}
.gpt-wrap .section7-chat-row--a{
  justify-content:flex-start;
}
.gpt-wrap .section7-chat-row--a.section7-chat-row--no-avatar{
  /* 아바타 공간(32+10=42px)만큼 들여쓰기 유지 */
  padding-left:42px;
}

/* 봇 아바타 (32×32 SVG) */
.gpt-wrap .section7-bot-avatar{
  flex-shrink:0;
  width:32px;
  height:32px;
  display:block;
}

.gpt-wrap .section7-bot-body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.gpt-wrap .section7-bot-label{
  padding-top:1.872px;
  font-family:'Pretendard';
  font-weight:700;
  font-size:16px;
  line-height:1.35;
  letter-spacing:-0.01em;
  color: var(--gpt-s7-bot-label);
}

/* 답변 말풍선 (좌측, 흰) */
.gpt-wrap .section7-bubble-a{
  display:inline-block;
  align-self:flex-start;
  padding: 8px 14px;
  background: var(--color-white);
  border: 0.725px solid var(--color-white);
  border-radius: var(--gpt-s7-bubble-radius-a);
  font-family:'Pretendard';
  font-weight:500;
  font-size:16px;
  line-height:1.5;
  letter-spacing:-0.02em;
  color: var(--gpt-s7-bubble-text);
  max-width:100%;
  word-break:keep-all;
  animation: section7BubbleIn 0.2s ease-out;
}
.gpt-wrap .section7-bubble-a p{
  margin:0;
}
.gpt-wrap .section7-bubble-a--greet{
  width:auto;
  max-width:none;
  white-space:nowrap;
  text-align:left;
}
.gpt-wrap .section7-bubble-a--greet p{
  text-align:left;
}

/* 질문 말풍선 (우측, 카카오 노랑) */
.gpt-wrap .section7-bubble-q{
  display:inline-block;
  max-width: calc(100% - 42px);
  padding: 12px 16px;
  background: var(--gpt-s7-kakao-yellow);
  border: 0.928px solid var(--color-white);
  border-radius: var(--gpt-s7-bubble-radius-q);
  font-family:'Pretendard';
  font-weight:500;
  font-size:16px;
  line-height:1.5;
  letter-spacing:-0.02em;
  color: var(--color-black);
  word-break:keep-all;
  animation: section7BubbleIn 0.2s ease-out;
}

/* 타이핑 인디케이터 : 답변 말풍선 안 점 1→2→3 순환 */
.gpt-wrap .section7-typing-bubble{
  min-width:48px;
  padding: 10px 16px;
}
.gpt-wrap .section7-typing-dots{
  display:inline-block;
  min-width:18px;
  font-family:'Pretendard';
  font-weight:700;
  font-size:var(--font-size-subtitle4);
  line-height:1;
  color: #6a7089;
  letter-spacing:2px;
  vertical-align:middle;
}

@keyframes section7BubbleIn{
  from { opacity:0; transform: translateY(2px); }
  to   { opacity:1; transform: translateY(0); }
}

/* 하단 입력창
 * 기존 HTML/CSS 재현 → div.phone_container.png 단일 이미지로 대체.
 * 공간은 유지 (chat-body 위치 기준점), 콘텐츠는 visibility:hidden 으로 invisible. */
.gpt-wrap .section7-chat-foot{
  flex-shrink:0;
  padding: 4px 16px;
  width:100%;
  visibility:hidden;
}
.gpt-wrap .section7-chat-form{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 14px;
  background: var(--color-white);
  border-radius:16px;
  width:100%;
}
.gpt-wrap .section7-chat-placeholder{
  font-family:'Pretendard';
  font-weight:400;
  font-size:var(--font-size-body5);
  line-height:1.155;
  color: var(--gpt-s7-placeholder);
}
.gpt-wrap .section7-chat-send{
  display:block;
  width:30px;
  height:30px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23252730' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='15' x2='22' y2='15'/><polyline points='17,10 22,15 17,20'/></svg>") no-repeat center / contain;
}

/* 탭리스트 */
.gpt-wrap .section7-tab{
  display:flex;
  flex-direction:column;
  gap:44px;
  justify-content:center;
}
.gpt-wrap .section7-tab-title{
  margin:0;
  font-size:var(--font-size-subtitle2);
  font-weight:700;
  color:#373a47;
  white-space:nowrap;
  word-break:keep-all;
}
/* 모바일 전용 탭 타이틀 — base hide, mobile 미디어쿼리에서 노출 */
.gpt-wrap .section7-mobile-tab-title{
  display:none;
}
.gpt-wrap .section7-tab-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0;
  margin:0;
  list-style:none;
}
.gpt-wrap .section7-tab-list li{
  display:flex;
}
.gpt-wrap .section7-question-btn{
  display:inline-flex;
  align-items:center;
  padding: 17px 29px;
  border-radius:60px;
  background: var(--gpt-s7-btn-bg);
  border: 1px solid transparent;
  font-family:'Pretendard';
  font-weight:600;
  font-size:var(--font-size-button1);
  line-height:1.5;
  letter-spacing:-0.02em;
  color: var(--gpt-s7-btn-text);
  cursor:pointer;
  white-space:nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.gpt-wrap .section7-question-btn:hover,
.gpt-wrap .section7-question-btn:focus-visible{
  background: var(--torder-red-10);
  color: var(--torder-red-500);
  outline:none;
}
.gpt-wrap .section7-question-btn.is-active{
  background: var(--gpt-s7-btn-active-bg);
  border-color: var(--gpt-s7-btn-active-border);
  color: var(--gpt-s7-btn-active-text);
}

/* Tablet (<=1199) ***************************************************/
@media screen and (max-width:1199px) {
  .gpt-wrap .section7{
    padding:120px 0;
  }
  .gpt-wrap .section7 .com-center{
    gap:48px;
    max-width:864px;
  }
  .gpt-wrap .section7-title{
    font-size:var(--font-size-h5);
  }
  .gpt-wrap .section7-sub{
    font-size:var(--font-size-subtitle4);
  }

  /* 좌측 "상품관리…" 문구 숨김, 폰 + 탭리스트 2열 */
  .gpt-wrap .section7-inner{
    gap:60px;
  }
  .gpt-wrap .section7-side{
    display:none;
  }
  .gpt-wrap .section7-tab{
    gap:32px;
  }
  .gpt-wrap .section7-tab-title{
    font-size:24px;
  }
  .gpt-wrap .section7-question-btn{
    padding: 13px 25px;
    font-size:var(--font-size-button2);
  }
}

/* Mobile (<=599) ****************************************************/
@media screen and (max-width:599px) {
  .gpt-wrap .section7{
    padding:80px 0;
  }
  .gpt-wrap .section7 .com-center{
    gap:36px;
  }
  .gpt-wrap .section7-title{
    font-size:var(--font-size-subtitle2);
    gap:6px;
    /* flex 컨테이너 안 br 는 flex item 으로 인식 안 돼 줄바꿈 안 됨 → block 으로 전환 */
    display:block;
    text-align:center;
  }
  .gpt-wrap .section7-sub{
    font-size:var(--font-size-body4);
    font-weight:600;
  }

  /* 폰 → 탭리스트 세로 스택 — gap 대신 phone 자체 margin 명시 (top 20 / bottom 24) */
  .gpt-wrap .section7-inner{
    flex-direction:column;
    gap:0;
    align-items:center;
  }
  .gpt-wrap .section7-side{
    display:none;
  }
  .gpt-wrap .section7-phone{
    /* 360 viewport 에서 260×458 로 축소 (노드 2286-1532 스펙) */
    width:260px;
    height:458px;
    border-radius:18px;
    margin:20px 0 24px;       /* mobile-tab-title↔phone 20 / phone↔tab 24 */
  }
  .gpt-wrap .section7-phone-inner{
    padding:15.3px 0;
  }
  .gpt-wrap .section7-statusbar{
    gap:8.6px;
    padding: 0 12.7px 13px;
  }
  .gpt-wrap .section7-status-row{
    width:218.7px;
    height:12.3px;
  }
  .gpt-wrap .section7-status-signal{ width:24.7px; height:12.3px; }
  .gpt-wrap .section7-status-wifi{ width:14.58px; height:12.3px; }
  .gpt-wrap .section7-status-volume{ width:13.45px; height:12.3px; }
  .gpt-wrap .section7-status-battery{ width:18.78px; height:12.3px; }
  .gpt-wrap .section7-kakao-row{
    width:234px;
    height:15px;
  }
  .gpt-wrap .section7-kakao-back{ width:7.4px; height:14.8px; }
  .gpt-wrap .section7-kakao-title{ font-size:var(--font-size-body6); gap:3px; }
  .gpt-wrap .section7-kakao-badge,
  .gpt-wrap .section7-kakao-search,
  .gpt-wrap .section7-kakao-menu{
    width:14.8px;
    height:14.8px;
  }
  .gpt-wrap .section7-kakao-actions{ gap:6.2px; }

  .gpt-wrap .section7-chat-dynamic {
    padding-bottom: 13px;
  }
  .gpt-wrap .section7-chat-body{
    padding: 11px 12.7px; /* bottom 패딩은 dynamic margin-bottom 으로 이전 */
    gap:15.1px;
    margin-bottom: 38px;
  }
  .gpt-wrap .section7-bot-avatar{
    width:24.47px;
    height:24.47px;
  }
  .gpt-wrap .section7-chat-greet,
  .gpt-wrap .section7-chat-row--a.section7-chat-row--with-avatar{
    gap:7.6px;
  }
  .gpt-wrap .section7-chat-row--a.section7-chat-row--no-avatar{
    padding-left:32px;
  }
  .gpt-wrap .section7-bot-label{ font-size:var(--font-size-body6); }
  .gpt-wrap .section7-bubble-a,
  .gpt-wrap .section7-bubble-q{
    font-size:var(--font-size-body6);
    padding: 6px 10.7px;
  }
  .gpt-wrap .section7-bubble-a{ border-radius:9px; }
  .gpt-wrap .section7-bubble-q{ border-radius:11px; padding: 9px 12px; }
  .gpt-wrap .section7-bubble-a--greet{ max-width:none; }
  .gpt-wrap .section7-typing-dots{ font-size:16px; min-width:14px; }
  .gpt-wrap .section7-typing-bubble{ min-width:38px; padding:7px 12px; }

  .gpt-wrap .section7-chat-foot{
    padding: 3px 12px;
  }
  .gpt-wrap .section7-chat-form{
    padding: 6px 10.7px;
    border-radius:12px;
  }
  .gpt-wrap .section7-chat-placeholder{ font-size:10px; }
  .gpt-wrap .section7-chat-send{ width:22.9px; height:22.9px; }

  .gpt-wrap .section7-tab{
    width:100%;
    align-items:center;
    gap:24px;
  }
  /* mobile : tab 안의 title hide, phone 위 mobile-tab-title 노출 */
  .gpt-wrap .section7-tab-title{
    display:none;
  }
  .gpt-wrap .section7-mobile-tab-title{
    display:block;
    margin:0;
    font-size:var(--font-size-subtitle4);
    font-weight:700;
    color:#131419;             /* Figma t'order-gray/950 */
    text-align:center;
    white-space:nowrap;
    word-break:keep-all;
  }
  .gpt-wrap .section7-tab-list{
    align-items:flex-start;
    gap:10px;
    width:260px;
  }
  .gpt-wrap .section7-tab-list li{ justify-content:center; }
  .gpt-wrap .section7-question-btn{
    padding: 11px 21px;
    font-size:var(--font-size-button3);
    font-weight:600;
    white-space:nowrap;
  }
}

/* 접근성 : prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .gpt-wrap .section7-bubble-a,
  .gpt-wrap .section7-bubble-q{
    animation:none;
  }
  .gpt-wrap .section7-question-btn{
    transition:none;
  }
}

/** section8 - 자주 묻는 질문 FAQ *******************************************************/
.gpt-wrap .section8{
  position:relative;
  width:100%;
  padding:180px 0;
  background:#252730;
}
.gpt-wrap .section8 .com-center{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.gpt-wrap .section8-head{
  margin-bottom:48px;
}
.gpt-wrap .section8-title{
  margin:0;
  font-size:var(--font-size-h4);
  font-weight:800;
  color:var(--color-white);
  text-align:center;
}
.gpt-wrap .section8 .com-faq-list{
  width:100%;
  max-width:1120px;
}
/* .com-faq-list 박스/타이포 룰은 common.css 공통 스타일을 그대로 사용. 페이지 CSS 는 배경/padding 만 담당. */

@media screen and (max-width:1199px){
  .gpt-wrap .section8{ padding:120px 0; }
  .gpt-wrap .section8-head{ margin-bottom:40px; }
  .gpt-wrap .section8-title{ font-size:var(--font-size-h5); }
}

@media screen and (max-width:599px){
  .gpt-wrap .section8{ padding:80px 0; }
  .gpt-wrap .section8-head{ margin-bottom:32px; }
  .gpt-wrap .section8-title{ font-size:var(--font-size-h6); }
}