@charset "UTF-8";

/* ============================================
   main (신규) - Figma 2928:54804 (프레임 1204x3815, auto-layout 없음/절대좌표)
   ============================================
   [전역 결정]
   - 콘텐츠 폭 1200px (max-width, 중앙). 프레임 1204는 4px 여유
   - 섹션 좌우 여백 70px (글로벌·교육·APP 텍스트 x70 기준 / 기존 사이트 관례와 동일)
   - 카드 그리드만 full-bleed(1200 전체, 3열 × 400 = 1200)
   - 폰트 Pretendard Variable (Figma의 Roboto:Medium은 export 아티팩트)
   - 헤더는 res/css/ss-header.css (공용)

   [세로 리듬] Figma y좌표 차이를 그대로 padding/margin으로 이식
   히어로 텍스트 y300 / 칩 y589 / 카드그리드 y845~1354 / 글로벌 y1450~2185
   교육 y2321~2841 / APP y2999~3519 / 프레임 하단 3815

   [없는 요소] 시안에 없는 것은 만들지 않는다
   - 푸터: 예외 — 시안엔 없으나 사용자 요청으로 다른 페이지와 같은 공용 ss-footer 추가(2026-09-29)
   - 헤더 '입점문의' 버튼 (이전 버전 new-nav에는 있었으나 시안에서 빠짐)
   - 죽은 레이어 2928:54863 '공구 시작하기' (Component 14 흰 배경에 덮여 렌더 안 됨)
   - hover / focus / transition / 애니메이션 (시안에 없음)
     예외 1건: 참여 카드 5장의 hover 배경 — 사용자가 명시 요청한 시안 외 추가분
     (해당 규칙 블록에 '시안 외 추가(사용자 요청)' 주석으로 표기)
   - 이전 버전 히어로 카드·메시지 버블·글래스 박스·스크롤 인디케이터

   [모바일 실측 시안] 375 폭. 해당 섹션은 파생값을 전부 폐기했다
   - 헤더 + 히어로   Figma 2960:10426 (헤더는 I2967:30676)
   - 참여 카드       Figma 2960:10436
   - 글로벌 + 통계   Figma 3087:10546 (375x977, 구 2960:10482 대체)
   - 교육            Figma 3087:10566 (375x812)
   - APP             Figma 3087:10573 (375x812)

   [모바일 파생] 1440·1024 전 구간은 아직 시안이 없다 → 웹 값에서 파생
   - 디스플레이(히어로 76.079/34.87): 1024 ×0.63
   - 헤딩(섹션 제목 36 / 카드 제목 32 / 숫자 64 / 접미 48): 1024 ×0.85
   - 본문(17.5 / 16 / 20): 1.0 유지 (가독성 하한)
   - 768 에 남은 파생은 섹션 간 간격(padding-top/bottom)뿐이다
     — 모바일 3프레임이 독립 스크린이라 이전 섹션과의 간격을 프레임 y 로 판별할 수 없다
   ============================================ */

/* ---- base ----
   reset.css는 button·section 등에 box-sizing을 주지 않고
   body 폰트를 Spoqa Han Sans Neo로 고정하므로 여기서 덮는다
   (이전 버전이 style_new.css로 처리하던 몫. 그 파일은 더 이상 로드하지 않는다) */
* {
  box-sizing: border-box;
}

body {
  background: #ffffff;
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* ============================================
   Hero - Figma 3271:13343 (웹) / 3277:14853 (모바일 MainTitle 375x580)
   ============================================
   정본 스펙: _workspace/figma/main_hero_3271-13343_spec.md
   텍스트 블록: x80(→70) y300, flex-column gap 19.02
   스타일셀러      34.87px / 600 / lh 1.3 / ls -0.005em / #4D4D4D
   대한민국에서…   76.079px / 600 / lh 1.3 / ls -0.0052em / #000 (2줄)
     └ 실측은 76.079 이지만 적용값은 사용자 지시로 64px 이다(그 외 속성은 실측 그대로).
       이번 시안에서 타이틀 자체는 바뀌지 않았으므로 지시를 되돌리지 않는다
   칩 2개: y589 h46, x80(→70) w83 / x183 w97 → gap 20
   궤도 오브젝트: 3261:20130 x697.0005 y267 460x460 (텍스트 뒤)

   [없는 요소] 구 계단 배경 아트(3205:14055 / 3248:13855). 이 시안에서 삭제됐다
   ============================================ */
.main-hero {
  /* padding-top 300 = 텍스트 블록 y300 (헤더는 fixed라 문서 흐름에서 제외) */
  /* padding-bottom 71 = 카드그리드 y950 − 하단 문구 서브 하단 879 */
  padding: 300px 0 71px;
  background: #ffffff;
  /* 궤도 오브젝트의 좌표 기준 + 히어로 밖으로 넘치는 부분 클립 */
  position: relative;
  overflow: hidden;
  /* [삭제] min-height:100vh — 2026-08-25 사용자 지시로 뺐다.
     구 시안(계단 아트)일 때 넣은 값인데, 히어로 콘텐츠가 916px 에서 끝나므로
     세로가 긴 화면일수록 다음 섹션과의 빈틈만 커졌다(vh 1261 에서 344px).
     지금은 시안 그대로 콘텐츠 높이 + padding 71 로 끝난다 */
}

.main-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 70px; /* 파생: Figma x80 → 여백 통일 70 */
  position: relative; /* 궤도 오브젝트 위에 텍스트·칩을 얹는다 */
  z-index: 1;
}

/* ---- 궤도 오브젝트 - 웹 Figma 3261:20130 (x697.0005 y267, 460x460) ----
   Figma 는 타원 3장을 정지 상태로 플랫해 뒀고, 움직이는 정본은 사용자가 준 orbital-object.html 이다.
   원본 구조 그대로: 3축 회전(24/30/45s, 전부 reverse) → 정지 포즈 rotateX(-119deg)
                    → 60도 간격 디스크 3장(각 rotateX 60deg)
   좌표는 .main-hero 기준이다(Figma 히어로 프레임 = 섹션 자체). 텍스트 x80 을 여백 70 으로
   이식한 −10 시프트는 궤도에도 같이 적용해 left 687(= 697 − 10) 로 둔다 */
.main-hero__orb {
  position: absolute;
  z-index: 0; /* .main-hero__inner 가 z-index 1 이라 텍스트 뒤로 들어간다 */
  pointer-events: none;
  top: 267px; /* Figma y267 — .main-hero 기준(= 히어로 프레임 상단) */
  /* 좌표 기준은 폭 1200 의 중앙 정렬 콘텐츠 박스다: 50% − 600 + 687 = 50% + 87 */
  left: calc(50% + 87px);
  width: 460px;
  height: 460px;
  perspective: 1400px; /* 원본 .scene */
}

.main-hero__orb .ss-orb__spin,
.main-hero__orb .ss-orb__pose {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.ss-orb__spin--x {
  animation: ssOrbSpinX 24s linear infinite reverse;
}

.ss-orb__spin--y {
  animation: ssOrbSpinY 30s linear infinite reverse;
}

.ss-orb__spin--z {
  animation: ssOrbSpinZ 45s linear infinite reverse;
}

.ss-orb__pose {
  transform: rotateX(-119deg);
}

/* 디스크 424/460 = 92.174% — 분기별로 orb 크기만 바꾸면 비율이 따라온다 */
.ss-orb__disc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92.174%;
  height: 92.174%;
}

/* 원본은 mix-blend-mode:screen 이지만 screen 은 흰 바탕과 합성하면 항상 흰색이라
   디스크가 통째로 사라진다. 시안은 겹친 부분이 더 진해지므로 multiply 가 맞다.
   원본의 filter:drop-shadow(...) 는 색 뒤 '55' 때문에 파서가 선언을 버려 원본에서도
   발광이 없었고 시안에도 헤일로가 없다 → 이식하지 않는다 */
.ss-orb__disc svg {
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}

.ss-orb__disc--1 {
  transform: translate(-50%, -50%) rotateZ(0deg) rotateX(60deg);
}

.ss-orb__disc--2 {
  transform: translate(-50%, -50%) rotateZ(60deg) rotateX(60deg);
}

.ss-orb__disc--3 {
  transform: translate(-50%, -50%) rotateZ(120deg) rotateX(60deg);
}

@keyframes ssOrbSpinX {
  to {
    transform: rotateX(360deg);
  }
}

@keyframes ssOrbSpinY {
  to {
    transform: rotateY(360deg);
  }
}

@keyframes ssOrbSpinZ {
  to {
    transform: rotateZ(360deg);
  }
}

/* 정지 시에도 Figma 플랫 상태와 같은 성격의 포즈가 남는다 */
@media (prefers-reduced-motion: reduce) {
  .main-hero__orb .ss-orb__spin {
    animation: none;
  }
}

.main-hero__eyebrow {
  font-weight: 600;
  font-size: 34.87px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #4d4d4d;
}

/* 모바일 전용 로고 킥커(Figma 2960:10430) — 웹 시안에는 없다 */
.main-hero__logo {
  display: none;
}

/* 모바일 전용 3번째 줄 개행(Figma 2960:10432) — 웹은 2줄 */
.main-hero__br--m {
  display: none;
}

.main-hero__title {
  margin-top: 19.02px; /* Figma 텍스트 블록 gap */
  font-weight: 600;
  font-size: 64px; /* 사용자 지시 (Figma 실측 76.079) */
  line-height: 1.3;
  letter-spacing: -0.0052em;
  color: #000000;
}

.main-hero__pills {
  display: flex;
  gap: 20px; /* 칩 x80+w83=163 → 다음 칩 x183 */
  /* 파생: 칩 y589 − 텍스트 블록 하단 562.12(=300+45.33+19.02+197.77) */
  margin-top: 26.88px;
}

.main-hero__pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 30px;
  background: #f3ff99;
  filter: drop-shadow(2px 2px 10px rgba(76, 76, 76, 0.1));
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
}

/* 히어로 하단 문구 - Figma 3271:13344 (x70 y798) / 3271:13348 (x70 y853)
   칩 하단 635 → 제목 798 = 163. 제목 하단 844.8 → 서브 853 = 8.2 */
.main-hero__lead {
  margin-top: 163px;
}

.main-hero__lead-title {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: -0.005em; /* -0.18px */
  color: #000000;
}

.main-hero__lead-desc {
  margin-top: 8.2px;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01255em; /* -0.251px */
  color: #000000;
}

/* ============================================
   참여 카드 그리드 - Figma 3271:13343 (y950~1399.77, x72~1135)
   ============================================
   구 시안(2928:54859~54913)의 full-bleed 1200 × h313/196 을 이 시안이 대체한다.
   그리드 x72~1134.99 (폭 1062.99 = 3 × 354.333), 1행 h276.574 / 2행 h173.19
   → 좌우 여백 72 는 다른 섹션과 같은 70 으로 이식하고 폭은 1060 (열 353.33)
   바깥 네 모서리만 radius 40 (tl 13349 / tr 13374 / bl 13350 / br 13352)
   테두리 0.884px solid #000 (구 1px). 선 두께 중복을 막는 컨테이너 top·left +
   카드 right·bottom 조합은 그대로다

   1행 col1 13349: #EFFF75, 링크 없음(시안 기준)
   1행 col2 13373 Component 14 / col3 13374 Component 16: #FFFFFF
   2행 13350/13351/13352: #F2F2F2 (Static/50)
   [없는 요소] 하위 라벨 3종(벤더사 / 인플루언서 커넥터 / 콘텐츠 수익화) — 이 시안에서 빠졌다
   [죽은 레이어] 13353 '공구 시작하기' — Component 14 흰 배경에 덮여 렌더되지 않는다
   ============================================ */
.main-join {
  background: #ffffff;
  padding: 0 70px; /* 그리드 x72 → 다른 섹션과 같은 여백 70 */
}

.main-join__grid {
  max-width: 1060px; /* = 1200 − 70 × 2 (Figma 1062.99) */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 276.574px 173.19px; /* Figma 1행 / 2행 */
  /* 바깥 4면은 컨테이너가, 내부 구분선은 카드가 그린다.
     바깥선을 카드 border-right/bottom 에 맡기면 radius 구간에서 끊긴다 —
     overflow 클립은 padding-box 곡선을 따르는데 카드 border 는 그 안쪽 직선이라
     우·하 모서리에서 잘려나간다. 컨테이너 border 는 border-box 에 그려져 안 잘린다 */
  border: 0.884px solid #000000;
  border-radius: 40px;
  overflow: hidden; /* 카드 배경(intro 노랑)을 모서리 곡선으로 자른다 */
}

.main-join__card {
  position: relative;
  border-right: 0.884px solid #000000;
  border-bottom: 0.884px solid #000000;
  background: #ffffff;
  text-decoration: none;
}

/* 3열 그리드의 마지막 열·마지막 행은 바깥선이라 컨테이너가 담당한다 */
.main-join__card:nth-child(3n) {
  border-right: 0;
}

.main-join__card:nth-child(n + 4) {
  border-bottom: 0;
}

/* --- 1행 col1: STYLESELLER PARTNER (rect 2928:54859) --- */
.main-join__card--intro {
  background: #efff75;
}

.main-join__intro-title {
  position: absolute;
  top: 45.06px; /* Figma 13372 y995.06 − 카드 y950 */
  left: 31.81px; /* Figma 13372 x103.81 − 카드 x72 */
  font-weight: 600;
  font-size: 31.81px;
  line-height: 1.3;
  letter-spacing: -0.005em; /* -0.1591px */
  color: #000000;
}

/* 모바일 전용(2960:10475). PC 시안에서는 이 문구가 그리드 위 .main-hero__lead 로 빠졌다 */
.main-join__intro-desc {
  display: none;
  position: absolute;
  font-weight: 500;
  line-height: 1.5;
  color: #000000;
}

/* --- 1행 col2·col3: Component 14 / 16 --- */
.main-join__lead-title {
  position: absolute;
  top: 16.93%; /* Figma inset — 카드 높이 276.574 기준 46.82 */
  left: 10.22%; /* Figma inset — 카드 폭 354.333 기준 36.21 */
  font-weight: 500;
  font-size: 28.28px;
  line-height: 1.3;
  letter-spacing: -0.00888em; /* -0.251px */
  color: #000000;
}

/* --- 2행 3장 --- */
.main-join__card--role {
  background: #f2f2f2; /* Figma 2928:54860 / 54861 / 54862 (Static/50) */
}

.main-join__role-title {
  position: absolute;
  top: 44.18px; /* Figma 13355 y1270.76 − 카드 y1226.58 */
  left: 36.23px; /* Figma 13355 x108.23 − 카드 x72 (3장 동일) */
  font-weight: 500;
  font-size: 28.276px;
  line-height: 1.3;
  letter-spacing: -0.00784em; /* -0.2218px */
  color: #000000;
}

/* 시안 외 추가(사용자 요청): hover 시 배경이 한 단계 진해진다
   - 대상은 링크가 걸린 5장(--lead 2 + --role 3)만.
     --intro(STYLESELLER PARTNER)는 링크가 없어 제외 — 거짓 어포던스 방지
   - 기본색이 행마다 달라 hover도 행별로 다르다
       --lead(1행 2장) #FFFFFF → #F2F2F2  (시안에 있는 Static/50)
       --role(2행 3장) #F2F2F2 → #E5E5E5  (신규 값)
   - #E5E5E5 근거: 같은 Figma 파일의 채용 프로세스 카드가 #F0F0F0 → hover #D2D2D2
     (.cursor/rules/figma-specs.md 659:4582/659:4593)인데 그 낙차는 사용자가 요청한
     '살짝'보다 훨씬 진하다. 그래서 #F2F2F2와 #D2D2D2 사이 중간값을 쓴다
   - 배경색만 변한다. 텍스트·테두리·화살표는 시안 값 유지
   - 터치 기기 hover 고착 방지를 위해 (hover: hover) and (pointer: fine) 안에 둔다 */
@media (hover: hover) and (pointer: fine) {
  .main-join__card--lead,
  .main-join__card--role {
    transition: background-color 0.2s ease;
  }

  .main-join__card--lead:hover {
    background-color: #f2f2f2;
  }

  .main-join__card--role:hover {
    background-color: #e5e5e5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-join__card--lead,
  .main-join__card--role {
    transition: none;
  }
}

/* ============================================
   화살표 아이콘 (공용) - Figma
   ============================================
   원 64x64 radius 50% / 글리프 26.67x26.67 중앙
   viewBox 0 0 30.3505 30.3505, path 2개, stroke #000 3.68386, round

   원 배경은 3종이다 — 혼동 주의 (최초 스펙은 2종으로 파생했으나 실측 결과 3종)
   - 변형 없음 : 원 배경 없음. --intro(노랑 헤더 카드) 전용.
                 2928:54870 실측 — 검정 화살표만 있고 원이 없다
   - --yellow  : #EFFF75. --lead(Component 14/16) 전용. 2928:54883 / 54884
   - --white   : #FFFFFF. --role(2행 3장) 전용. 2928:54873 (arrow-up-right, Static/White)
                 2행 카드가 #F2F2F2 회색이라 흰 원이 실제로 보인다

   섀도는 --yellow / --white 공통 값 (원본 SVG filter dx/dy 4.06495,
   stdDeviation 20.3247 → blur = 20.3247 × 2 = 40.649, rgb(97,88,81) alpha 0.08)

   left → right 환산 (카드 폭 354.333 기준):
   - 1행 col1 13360 x344.16 → right 25.62 / top 20.32
   - Component 14·16 내부 화살표 → right 4.49%(15.91) / top 38
   - 2행 13366/13363/13369 x344.16 → right 25.62 / top 15.9
   ============================================ */
.main-arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma 56.552 (구 64). 글리프 비율 41.66% 는 그대로다 */
  width: 56.552px;
  height: 56.552px;
  border-radius: 50%;
}

.main-arrow__glyph {
  width: 23.56px; /* 56.552 × 41.66% */
  height: 23.56px;
}

/* 원 배경이 있는 2종 공통 섀도 */
.main-arrow--yellow,
.main-arrow--white {
  box-shadow: 3.592px 3.592px 35.919px rgba(97, 88, 81, 0.08);
}

.main-arrow--yellow {
  background: #efff75; /* Figma 2928:54883 / 54884 */
}

.main-arrow--white {
  background: #ffffff; /* Figma 2928:54873 (arrow-up-right, Static/White) */
}

.main-join__card--intro .main-arrow {
  top: 20.32px; /* Figma 13360 y970.32 − 카드 y950 */
  right: 25.62px;
}

.main-join__card--lead .main-arrow {
  top: 38px; /* Figma 컴포넌트 내부 top */
  right: 4.49%; /* Figma 컴포넌트 내부 inset (15.91) */
}

.main-join__card--role .main-arrow {
  top: 15.9px; /* Figma 13366 y1242.48 − 카드 y1226.58 */
  right: 25.62px;
}

/* ============================================
   글로벌 + 통계 - Figma 2928:54893~54910 (y1450~2185)
   ============================================
   일러스트(브랜드 노드 스피어): 표시 527x520, x600 y1450 우측
     → 콘텐츠 박스(1200) 기준 right 75 = 1200 − (600−2) − 527
     모바일은 581.5x316.691 (Figma 2960:10485)
     2026-08-12 이전에는 워드클라우드 PNG 2벌(main_global_wordcloud.png 1054x1040 /
     _m.png 1163x633)을 <picture> source 로 분기했다. 지금은 res/js/ss-node-sphere.js 가
     canvas 로 그리므로 에셋 분기가 없다 — 한 컴포넌트가 두 크기를 다 그린다
   제목 54896 x70 y1635 w387 h94: 파생 36px / 700 / lh 1.3 / ls -0.007em / #000, 2줄
   서브 54893 x70 y1737 w560 h26: 파생 17.5px / 500 / lh 1.5 / ls -0.01em / #333
   통계 4장 y2005, 250.5x180, gap 20 (x72 / 342.5 / 613 / 883.5)
     #F2F2F2, radius 30, overflow hidden, 내부 패딩 파생 25 (Figma 20~26 어긋남)
     숫자 64px / 600 / lh 1.3 / ls -0.004em / #000, 접미 '+'만 48px
     라벨 16px / 600 / lh 1.5 / ls -0.005em / #333, 숫자 바로 아래(추가 gap 0)
   ============================================ */
.main-global {
  padding-top: 96px; /* 섹션 y1450 − 카드그리드 하단 1354 */
  background: #ffffff;
}

.main-global__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 70px;
}

/* 워드클라우드 자리 — 내용은 res/js/ss-node-sphere.js 가 canvas 로 그린다(구 png 2벌 대체).
   크기·위치는 이미지 시절 값 그대로다 */
.main-global__illust {
  position: absolute;
  top: 0; /* 일러스트 y1450 = 섹션 콘텐츠 top */
  right: 75px;
  width: 527px;
  height: 520px;
}

.main-global__title {
  position: relative; /* 일러스트 위로 */
  padding-top: 185px; /* 제목 y1635 − 섹션 y1450 */
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: -0.007em;
  color: #000000;
}

.main-global__desc {
  position: relative;
  margin-top: 8px; /* 서브 y1737 − 제목 하단 1728.6 */
  font-weight: 500;
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #333333;
}

.main-stats {
  position: relative;
  display: flex;
  gap: 20px;
  margin-top: 242px; /* 카드 y2005 − 서브 하단 1763.25 */
  list-style: none;
}

.main-stats__item {
  flex: 1;
  height: 180px;
  padding: 25px; /* 파생: Figma 20~26 어긋남 → 25 */
  border-radius: 30px;
  background: #f2f2f2;
  overflow: hidden;
}

.main-stats__value {
  white-space: nowrap;
  font-weight: 600;
  font-size: 64px;
  line-height: 1.3;
  letter-spacing: -0.004em;
  color: #000000;
}

.main-stats__plus {
  font-size: 48px; /* 접미 기호만 48 */
}

.main-stats__label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: #333333;
}

/* ============================================
   교육 - Figma 2928:54885~54891 (y2321~2841)
   ============================================
   일러스트 main_lesson_thumb.png (원본 1200x1200 → 표시 520x520), x613 y2321
     Image 54889: border-radius 30, overflow hidden / 내부 img object-fit cover
     원본 raw 이미지는 모서리가 직각이라 CSS로 radius를 걸어야 한다
     (radius 30은 통계 카드 54897·히어로 칩과 동일 값)
     → right 69 = 1200 − (613−2) − 520
   텍스트 박스 54885 x75(→70) y2399 w651: padding-right 20, 내부 padding 30px 0, gap 20
   제목 54887 36px / 700 / lh 1.3 / ls -0.007em / #000, w440, 2줄
   본문 54888 17.5px / 500 / lh 1.5 / ls -0.01em / #333, 5줄(4번째 빈 줄)
   버튼 x70 y2715 — 디자인은 재디자인 노드 2962:10427 이 정본이다 (구 54891 폐기)
     110x46: #F3FF99, border 없음, radius 30, padding 11px 12px, drop-shadow
     텍스트 86x24 → 16px / 600 / lh 1.5 / ls -0.01em / #000
     (구 54891: 141x42 #F2F2F2 + 1px #999 + 20px/400/#666 — 시안과 달라 교체됨)
   ============================================ */
.main-lesson {
  padding-top: 136px; /* 섹션 y2321 − 글로벌 하단 2185 */
  background: #ffffff;
}

.main-lesson__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 70px; /* 파생: 텍스트 박스 x75 → 여백 통일 70 */
  min-height: 520px; /* 파생: 절대배치 일러스트(520) 높이 확보 → 섹션 y2321~2841 */
}

.main-lesson__illust {
  position: absolute;
  top: 0; /* 일러스트 y2321 = 섹션 콘텐츠 top */
  right: 69px;
  width: 520px;
  height: 520px;
  border-radius: 30px; /* Figma 2928:54889 (Image) */
  object-fit: cover; /* Figma 2928:54889 내부 img */
}

.main-lesson__text {
  position: relative; /* 일러스트 위로 */
  max-width: 651px; /* Figma w651 */
  /* padding-top 108 = 박스 y2399 − 섹션 y2321(78) + 박스 내부 padding-top 30 */
  padding: 108px 20px 30px 0;
}

.main-lesson__title {
  max-width: 440px; /* Figma w440 */
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: -0.007em;
  color: #000000;
}

.main-lesson__desc {
  margin-top: 20px; /* 박스 내부 gap */
  font-weight: 500;
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #333333;
}

/* CTA 재디자인 - Figma 2962:10427 (instance "메뉴2", 구 2928:54891 대체)
   회색 아웃라인(#F2F2F2 + 1px #999999 + 20px/400/#666666) → 히어로 칩과 같은 Primary/200 알약
   노드 110x46 / 내부 텍스트 노드 86x24 at x12 y11 → padding 11px 12px (11 + 24 + 11 = 46)
   폭은 콘텐츠 구동(fit-content): 12 + 텍스트 86 + 12 = 110
   위치(margin-top 11.1)는 이번 재디자인 범위 밖이라 유지한다 */
.main-lesson__btn {
  position: relative;
  display: flex;
  width: fit-content; /* Figma 110 은 텍스트 기준 → auto */
  height: 46px; /* 11 + 텍스트 24(16 × 1.5) + 11 */
  align-items: center;
  justify-content: center;
  margin-top: 11.1px; /* 버튼 y2715 − 텍스트 박스 하단 2703.9 */
  padding: 11px 12px;
  border: none;
  border-radius: 30px;
  background: #f3ff99; /* StyleSeller/Primary/200 */
  filter: drop-shadow(2px 2px 10px rgba(76, 76, 76, 0.1));
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em; /* Figma -0.16px */
  color: #000000;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* ============================================
   APP - Figma 2928:54807~54858 (y2999~3519)
   ============================================
   일러스트 main_app_mockup.png (1040x1040 → 표시 520x520), x607 y2999
     연라벤더 배경·회전 라벨·'+ 링크샵 만들기' 버튼·커서가 모두 이미지에 합성됨
     → 개별 노드로 재현하지 않는다 (회전 각도 추측 금지)
     → right 75 = 1200 − (607−2) − 520
   제목 54858 x70 y3147 w233 h94: 파생 36px / 700 / lh 1.3 / #000, 2줄
   서브 54807 x70 y3262 w416 h26: 파생 17.5px / 500 / lh 1.5 / #333
   스토어 버튼 54843 x70 y3364 412x63: row gap 12, 각 200x63
     padding 14px 28px, radius 20, 내부 gap 10, center
     Google Play: rgba(255,255,255,0.8) + box-shadow 0 1px 4px rgba(0,0,0,0.25)
       아이콘 박스 20x20 / 글리프 18.128x20, 텍스트 rgba(0,0,0,0.6)
     App Store: rgba(0,0,0,0.8)
       아이콘 박스 20x20 / 글리프 16x20, 텍스트 rgba(255,255,255,0.6)
     텍스트 공통 22px / 600 / line-height 35px / ls -0.0068em
   ============================================ */
.main-app {
  padding-top: 158px; /* 섹션 y2999 − 교육 하단 2841 */
  padding-bottom: 296px; /* 프레임 하단 여백 = 3815 − 3519 (푸터 없음) */
  background: #ffffff;
}

.main-app__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 70px;
  min-height: 520px; /* 파생: 절대배치 일러스트(520) 높이 확보 */
}

.main-app__illust {
  position: absolute;
  top: 0; /* 일러스트 y2999 = 섹션 콘텐츠 top */
  right: 75px;
  width: 520px;
  height: 520px;
}

/* <picture> 로 모바일 에셋을 갈아끼우므로 크기는 바깥 picture 가 잡고 img 는 채우기만 한다 */
.main-app__illust img {
  display: block;
  width: 100%;
  height: 100%;
}

.main-app__title {
  position: relative; /* 일러스트 위로 */
  padding-top: 148px; /* 제목 y3147 − 섹션 y2999 */
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  color: #000000;
}

.main-app__desc {
  position: relative;
  margin-top: 21.4px; /* 서브 y3262 − 제목 하단 3240.6 */
  font-weight: 500;
  font-size: 17.5px;
  line-height: 1.5;
  color: #333333;
}

.main-app__stores {
  position: relative;
  display: flex;
  gap: 12px;
  margin-top: 75.75px; /* 버튼 y3364 − 서브 하단 3288.25 */
}

.main-app__store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  height: 63px;
  padding: 14px 28px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 22px;
  line-height: 35px;
  letter-spacing: -0.0068em;
  text-decoration: none;
  white-space: nowrap;
}

.main-app__store--google {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.6);
}

.main-app__store--apple {
  background: rgba(0, 0, 0, 0.8);
  color: rgba(255, 255, 255, 0.6);
}

/* 에셋별 실크기 — 전역 규칙 금지(종류가 다르다) */
.main-app__store-icon--google {
  width: 20px; /* 박스 20x20 / 글리프 18.128x20 */
  height: 20px;
  flex-shrink: 0;
}

.main-app__store-icon--apple {
  width: 16px; /* 글리프 16x20 (박스 20x20 중 실제 점유분) */
  height: 20px;
  flex-shrink: 0;
}

/* ============================================
   반응형 — 브레이크포인트 1440 / 1024 / 768 (기존 페이지 관례)
   ============================================
   768 이하 실측: 히어로·헤더 2960:10426 / 참여 카드 2960:10436
                 글로벌·통계 3087:10546 / 교육 3087:10566 / APP 3087:10573
   그 외(1440·1024 전부, 768 의 섹션 간 간격): 시안 없음 → 파생
   ============================================ */

/* 설계폭(1204) 아래에서 고정폭 요소가 넘치지 않게 하는 가드 */
@media screen and (max-width: 1440px) {
  .main-lesson__illust,
  .main-app__illust {
    max-width: 45%; /* 파생: 527/1204 ≈ 43.8% → 텍스트와 겹침 방지 */
    height: auto;
  }

  /* 노드 스피어(.main-global__illust)는 이 가드에서 뺀다.
     <img> 가 아니라 빈 박스라 height:auto 면 높이가 0 이 되고, 이를 aspect-ratio 로 메우면
     WebKit 이 절대배치 박스의 auto 높이를 비율이 아닌 남은 공간으로 잡아 520 대신 592~712 가 된다.
     1024~1440 구간에서도 컨테이너 폭이 1200 이라 527 고정으로 제목과 겹치지 않는다 */
}

@media screen and (max-width: 1024px) {
  /* 좌우 여백 70 → 30 (기존 관례: new-nav/new-hero 1024) */
  .main-hero__inner,
  .main-global__inner,
  .main-lesson__inner,
  .main-app__inner {
    padding: 0 30px;
  }

  /* 디스플레이 티어 ×0.63 */
  .main-hero__eyebrow {
    font-size: 22px; /* 파생: web 34.87 × 0.63 */
  }

  .main-hero__title {
    /* 구 실측 76.079 기준 파생값(× 0.63, 기존 new-hero-title 1024 값과 동일).
       PC 기본이 64 로 바뀐 뒤에도 1024 값은 그대로 유지한다(사용자 지시 범위 밖) */
    font-size: 48px;
  }

  .main-hero {
    padding: 220px 0 50px; /* 파생: 헤더 축소(1024 pad-top 20) + 여백 축소 */
  }

  /* 파생: 1024 시안 없음. 고정 left 687 은 이 구간에서 넘치므로 우측 앵커로 바꾸고
     크기·상단 좌표를 타이틀 축소비(48/64 = 0.75)에 맞춰 줄인다. perspective 도 같은 비율 */
  .main-hero__orb {
    top: 200px;
    left: auto;
    right: 30px; /* 좌우 여백과 동일 */
    width: 360px;
    height: 360px;
    perspective: 1096px;
  }

  /* 헤딩 티어 ×0.85 */
  .main-hero__lead-title,
  .main-global__title,
  .main-lesson__title,
  .main-app__title {
    font-size: 30.6px; /* 파생: web 36 × 0.85 */
  }

  .main-join__intro-title {
    font-size: 27.04px; /* 파생: web 31.81 × 0.85 */
  }

  .main-join__lead-title,
  .main-join__role-title {
    font-size: 24.04px; /* 파생: web 28.28 × 0.85 */
  }

  /* 좌우 여백 70 → 30 (다른 섹션과 동일) */
  .main-join {
    padding: 0 30px;
  }

  .main-stats__value {
    font-size: 54.4px; /* 파생: web 64 × 0.85 */
  }

  .main-stats__plus {
    font-size: 40.8px; /* 파생: web 48 × 0.85 */
  }

  .main-stats__item {
    padding: 20px; /* 파생: 카드 폭 축소분 보정 */
  }

  /* 일러스트 우측 정렬 (고정 오프셋 75/69는 1200 이상에서만 유효) */
  .main-global__illust,
  .main-lesson__illust,
  .main-app__illust {
    right: 30px;
  }

  /* 세로 리듬 축소 — 파생: 웹 대비 약 0.6 */
  .main-global {
    padding-top: 60px;
  }

  .main-global__title {
    padding-top: 110px;
  }

  .main-stats {
    margin-top: 140px;
  }

  .main-lesson {
    padding-top: 80px;
  }

  .main-lesson__text {
    padding-top: 60px;
  }

  .main-app {
    padding-top: 90px;
    padding-bottom: 180px; /* 파생: web 296 × 0.6 */
  }

  .main-app__title {
    padding-top: 90px;
  }

  .main-app__stores {
    margin-top: 45px;
  }
}

@media screen and (max-width: 768px) {
  /* 좌우 여백 30 → 20 (기존 모바일 관례). 글로벌 섹션만 Figma left 21 이라 아래에서 따로 준다 */
  .main-hero__inner,
  .main-lesson__inner,
  .main-app__inner {
    padding: 0 20px;
  }

  /* ---- 모바일 히어로 실측 - Figma 3277:14853 (MainTitle 375x580) ----
     프레임 절대 y좌표를 흐름 배치로 이식한다. 헤더가 fixed(흐름 미점유)이므로
     로고 박스 top 236 = .main-hero padding-top 236 이 그대로 성립한다
       궤도     3277:15013  top 132, 93x93, 가로 중앙(중심 187.5)  → 절대배치라 흐름 무관
       로고 박스 3277:14856  top 236, padding 20px 0, 이미지 87x10  → 박스 하단 286
       타이틀   3277:14858  top 286(= gap 0), padding-bottom 44, 3줄 30×1.3×3=117 → 하단 447
       칩       3277:14860/14861  top 447(= gap 0), h46 → 하단 493
     전체 가로 중앙 정렬. padding-bottom 87 = 프레임 하단 580 − 493 */
  .main-hero {
    padding: 236px 0 87px;
  }

  /* 궤도 오브젝트(모바일) - Figma 3277:15013 (x140.9978 y132, 93x93)
     x141 + 93/2 = 187.5 = 375/2 → 가로 정중앙. perspective 는 460 기준 1400 을 같은 비율로 */
  .main-hero__orb {
    top: 132px;
    left: 50%;
    right: auto;
    width: 93px;
    height: 93px;
    margin-left: -46.5px; /* = −93/2 */
    perspective: 283px;
  }

  .main-hero__inner {
    text-align: center;
  }

  /* 킥커: 텍스트 → 로고 이미지로 교체 (모바일 시안에 34.87px 텍스트가 없다) */
  .main-hero__eyebrow {
    display: none;
  }

  .main-hero__logo {
    display: block;
    padding: 20px 0; /* Figma 2960:10430 박스 */
  }

  .main-hero__logo img {
    /* 시안 표기 87x10. 워드마크 종횡비 138.589:16 로 계산하면 86.62 → 종횡비를 지켜 왜곡을 피한다 */
    /* block + margin auto: reset.css 의 line-height 150% / vertical-align middle 이
       inline 이미지에 얹는 여백을 없애 박스 높이를 정확히 20+10+20=50 으로 만든다 */
    display: block;
    width: auto;
    height: 10px;
    margin: 0 auto;
    aspect-ratio: 138.589 / 16;
  }

  .main-hero__title {
    margin-top: 0; /* 로고 박스와 gap 0 */
    padding-bottom: 44px; /* Figma 2960:10432 */
    font-weight: 700;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.008em;
    color: #000000;
    text-align: center;
  }

  .main-hero__br--m {
    display: inline;
  }

  .main-hero__pills {
    justify-content: center;
    gap: 16px; /* 칩1 x89+w97=186 → 칩2 x202 */
    margin-top: 0; /* 타이틀 padding-bottom 44 가 간격 */
  }

  .main-hero__pill {
    height: 46px; /* Figma 2960:10434 / 10435 */
  }

  /* 모바일은 좌우 순서가 웹과 반대다: 서비스 소개(x89) → 기업 소개(x202) */
  .main-hero__pill:nth-child(1) {
    order: 2; /* 기업 소개 */
  }

  .main-hero__pill:nth-child(2) {
    order: 1; /* 서비스 소개 */
  }

  /* [없는 요소] 히어로 하단 문구가 모바일 시안(3277:14853)에 없다.
     같은 문구를 참여 카드 intro 가 담당한다 */
  .main-hero__lead {
    display: none;
  }

  /* ---- 모바일 참여 카드 실측 - Figma 2960:10436 (375x812) ----
     PC(3열 균등 그리드)와 배치가 완전히 다르다. 카드는 전부 맞닿는다(gap 0)
       intro   2960:10475  풀폭 375x260              프레임 y50
       정사각  2960:10437 / 10444  187x187 + 188x187  프레임 y310
       바 3장                풀폭 375x86              프레임 y497 / 583 / 669
     테두리 0.934px (PC 1px). 선 중복을 막는 컨테이너 top·left + 카드 right·bottom 조합은 PC와 동일
     아래 카드 내부 좌표는 전부 '프레임 y − 카드 y' 로 환산한 카드 기준값이다 */
  /* 모바일 시안은 카드가 화면 좌우에 밀착한다 → PC 여백·라운드·중앙 제한을 전부 푼다 */
  .main-join {
    padding: 0;
  }

  .main-join__grid {
    max-width: none;
    border-radius: 0;
    grid-template-columns: repeat(2, 1fr);
    /* 2행(정사각 2장)만 auto — 카드가 aspect-ratio 1:1 이라 열 폭을 따라간다.
       Figma 187px 은 375 폭에서의 1열 폭이고, 넓은 화면에서 고정하면 정사각이 깨진다 */
    grid-template-rows: 260px auto repeat(3, 86px);
    border-width: 0.934px;
  }

  /* 모바일은 행·열 구성이 달라 PC 의 3n / n+4 규칙이 맞지 않는다.
     내부 구분선은 ① 정사각 2장 사이 세로선 ② 마지막 카드를 뺀 전부의 가로선 뿐이다 */
  .main-join__card {
    border-right: 0;
    border-bottom: 0.934px solid #000000;
  }

  .main-join__card:nth-child(2) {
    border-right: 0.934px solid #000000;
  }

  /* PC 의 :nth-child(n+4) 는 특정도 0,2,0 이라 위의 .main-join__card 한 줄로는 안 눌린다 */
  .main-join__card:nth-child(n + 4) {
    border-bottom: 0.934px solid #000000;
  }

  .main-join__card:last-child {
    border-bottom: 0;
  }

  /* intro 와 바 3장은 2열 전체 폭, 정사각 2장만 1열씩 차지한다 */
  .main-join__card--intro,
  .main-join__card--role {
    grid-column: 1 / -1;
  }

  /* --- intro 카드 2960:10475 --- */
  .main-join__intro-title {
    top: 47.65px; /* 프레임 y97.65 − 카드 y50 */
    left: 22.97px;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.005em;
  }

  .main-join__intro-desc {
    display: block; /* PC 에서는 .main-hero__lead 가 대신한다 */
    top: 122.29px; /* 프레임 y172.29 − 카드 y50 */
    left: 20.17px; /* 제목 22.97과 2.8px 어긋남 — Figma 원값 유지 */
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: -0.0168em;
  }

  /* --- 정사각 2장 2960:10437 / 10444 (위치는 Figma 원값인 카드 대비 %) --- */
  .main-join__card--lead {
    aspect-ratio: 1 / 1; /* Figma 187x187 / 188x187 — 열 폭이 곧 높이 */
  }

  .main-join__lead-title {
    top: 17%;
    left: 5.33%;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.0117em;
  }

  /* --- 바 3장: 1줄 + 세로 중앙 --- */
  .main-join__role-title {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.0117em;
    white-space: nowrap; /* 시안이 1줄로 확정 — 폭이 좁아져도 접히지 않게 고정 */
  }

  /* PC 전용 2줄 개행. 숨기면 뒤따르는 공백이 살아나 '상품과 셀러를 연결하기' 한 줄이 된다 */
  .main-join__br--pc {
    display: none;
  }

  /* --- 화살표: 40x40 (PC 64) --- */
  .main-arrow {
    width: 40px;
    height: 40px;
    /* PC 3.592 / 35.919 의 40÷56.552 확대분 */
    box-shadow: 2.541px 2.541px 25.408px rgba(97, 88, 81, 0.08);
  }

  .main-arrow__glyph {
    width: 16.67px; /* 40 × 41.66% */
    height: 16.67px;
  }

  /* 원 배경이 PC와 다르다: PC intro 는 배경 없음, 모바일 intro 는 흰 원 */
  .main-join__card--intro .main-arrow {
    top: 200px; /* 프레임 y250 − 카드 y50 */
    right: 20px; /* 375 − x315 − 40 */
    background: #ffffff;
  }

  .main-join__card--lead .main-arrow {
    /* Figma top 127 = 187 높이에서 하단 20 (187−127−40). 카드가 열 폭을 따라 커지므로
       하단 기준으로 걸어야 여백이 20 으로 유지된다 */
    top: auto;
    bottom: 20px;
    right: 20px;
  }

  .main-join__card--role .main-arrow {
    top: 23px; /* 프레임 y520 − 카드 y497 (3장 동일) */
    right: 20px; /* 375 − x315 − 40 */
  }

  /* ---- 모바일 글로벌 + 통계 실측 - Figma 3087:10546 (375x977) ----
     구 시안 2960:10482 대체. 실질 변경은 통계 블록이 210px 아래로 내려간 것
     (워드클라우드와 겹치지 않게 바뀌었다). 나머지는 1~2px

     프레임은 독립 스크린이라 이전 섹션과의 간격은 프레임 y로 판별할 수 없다
     → 타이틀 상단(프레임 y104)을 섹션 콘텐츠 top 으로 잡고 나머지를 상대 오프셋으로 이식한다
        (.main-global 의 padding-top 60 은 섹션 간 간격이라 파생 유지)
       타이틀 3087:10547  x21 y104, 2줄 24×1.4×2 = 67.2 → 하단 171.2
       서브   3087:10548  x21 y206(세로중심 215), 334x18 = 1줄 → 하단 224
       워드클라우드 3087:10549  y286, 581.5x316.691, left −104 → 좌우로 화면 밖까지 넘친다
       통계 4개  y582 / 684 / 786 / 888 (102 간격), left 41 / right 39, 각 295x62
     통계가 워드클라우드와 겹친다(286~602.7 vs 582~). 시안대로 워드클라우드가 뒤 */
  .main-global__inner {
    display: flex;
    flex-direction: column;
    padding: 0 21px; /* Figma left 21 — 히어로·교육·APP 의 20과 다르다 */
    overflow: hidden; /* 워드클라우드가 패딩박스(0~375) 밖으로 넘치는 만큼을 잘라낸다 */
  }

  .main-global__title {
    font-weight: 600; /* PC 700 */
    font-size: 24px;
    line-height: 1.4; /* PC 1.3 */
    letter-spacing: 0; /* PC -0.007em */
  }

  .main-global__desc {
    width: auto; /* Figma 334 = 375 폭의 콘텐츠 전폭. 넓은 화면에서 같이 늘어나야 한다 */
    margin-top: 34.8px; /* 서브 y206 − 타이틀 하단 171.2 */
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -0.01em; /* Figma -0.12px */
    color: #666666; /* PC #333333 */
  }

  .main-global__illust {
    /* 배경 레이어라 흐름에서 빼고 절대배치한다. left 는 .main-global__inner 패딩박스(0~375) 기준.
       박스가 와이드(581.5x316.691)라 구는 짧은 변(316.691)에 맞고 좌우로 여백이 남는다
       — 구 워드클라우드 모바일 에셋(1163x633)의 크롭과 같은 구도다 */
    position: absolute;
    top: 182px; /* 프레임 y286 − 타이틀 y104 */
    right: auto; /* PC·1024 의 right 값 해제 (left+width 와 동시 지정 불가) */
    /* Figma left −104 은 375 폭 기준으로 좌우 균등 overflow(좌 104 / 우 102.5)를 뜻한다.
       고정 left 로 두면 넓은 화면에서 왼쪽으로 쏠리므로 가운데 기준으로 건다 */
    left: 50%;
    margin-left: -290.75px; /* 581.5 / 2 */
    width: 581.5px;
    height: 316.691px;
    max-width: none; /* 1440 분기의 45% 해제 */
    margin-top: 0;
  }

  .main-stats {
    z-index: 1; /* DOM 상 워드클라우드가 뒤라 지정하지 않으면 통계가 덮인다 */
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 39.6px; /* 항목 간격 102 − 값 높이 62.4(48×1.3) */
    /* top: 통계 1행 y582 − 서브 하단 224 */
    /* 좌: Figma left 41 − .main-global__inner 패딩 21 / 우: right 39 − 21 */
    margin: 358px 18px 0 20px;
  }

  /* PC는 값 위 / 라벨 아래. 모바일은 한 줄에 값(좌) + 라벨(우) */
  .main-stats__item {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .main-stats__value {
    font-size: 48px;
    letter-spacing: -0.0052em; /* Figma -0.25px (PC -0.004em) */
  }

  .main-stats__plus {
    font-size: 48px; /* 모바일 시안은 값+기호가 한 덩어리(400k+) → 값과 같은 크기 */
  }

  /* 값 행 높이를 62.4(48 × 1.3)로 되돌린다 — 이게 없으면 72 가 되어 행간이 102 를 넘는다
     원인: reset.css 38행이 span 을 포함한 요소 목록에 line-height:150% / vertical-align:middle 을
     '직접' 걸고 있다. 요소 선택자라 상속보다 강해 .main-stats__value 의 line-height:1.3 이
     내부 span(.main-stats__num / __plus)에는 닿지 않는다 → 줄상자 48 × 1.5 = 72.
     높이를 하드코딩하지 않고 상속·기본 정렬을 복구하는 쪽으로 원인을 제거한다.
     ss-countup.js 는 span 의 textContent 만 갈아끼우므로 노드를 추가하지 않는다(무관) */
  .main-stats__num,
  .main-stats__plus {
    line-height: inherit;
    vertical-align: baseline;
  }

  .main-stats__label {
    font-weight: 500; /* PC 600 */
    font-size: 12.5px;
    letter-spacing: -0.005em;
    color: #666666; /* PC #333333 */
  }

  /* 섹션 간 간격만 파생으로 남는다 — 모바일 3프레임이 독립 스크린이라
     이전 섹션과의 간격을 프레임 y 로 판별할 수 없다 */
  .main-global,
  .main-lesson,
  .main-app {
    padding-top: 60px; /* 파생: 섹션 간 간격 통일 */
  }

  .main-app {
    padding-bottom: 120px; /* 파생: web 296 × 0.4 */
  }

  /* PC 는 일러스트를 절대배치해 min-height 로 자리를 잡지만 모바일은 흐름 배치다 */
  .main-global__inner,
  .main-lesson__inner,
  .main-app__inner {
    min-height: 0;
  }

  /* PC 의 '섹션 top → 첫 요소' 오프셋 해제. 모바일은 타이틀이 섹션 콘텐츠 top */
  .main-global__title,
  .main-app__title,
  .main-lesson__text {
    padding-top: 0;
  }

  /* ---- 모바일 개정 v2 카드 - Figma 교육 3189:13255 / APP 3189:13256 ----
     카드는 x21 y38, 334x664, bg #F2F2F2, radius 30. 교육·APP 공통이다
     마크업 무변경으로 순서를 뒤집는다 → illust 에 order:-1 을 줘 이미지를 카드 최상단으로 올린다
     (교육 inner: text·btn·illust / APP inner: title·desc·stores·illust)
     카드 안쪽 좌우 padding 은 시안 0 이다. 문구 개행은 마크업 <br> 로 이미 고정돼 있다 */
  .main-lesson__inner,
  .main-app__inner {
    display: flex;
    flex-direction: column;
    align-items: center; /* 타이틀·서브·CTA·스토어 전부 중앙 정렬 */
    padding: 0; /* 위 .main-*__inner 의 0 20px 해제 — 여백은 카드 바깥 margin 으로 옮긴다 */
    margin: 0 20px; /* 파생: Figma x21 → 기존 모바일 좌우 20 관례 유지(1px 차) */
    background: #f2f2f2;
    border-radius: 30px;
    overflow: hidden; /* 이미지 상단 라운드가 카드 모서리 밖으로 새지 않게 */
  }

  /* ---- 모바일 교육 실측 v2 - Figma 3087:10566 (375x740) ----
     구 시안(타이틀 → 서브 → CTA → 이미지, 좌측정렬·배경 없음)은 폐기했다
     아래 오프셋은 전부 카드(3189:13255, 프레임 y38) 기준이다
       이미지 3189:13250  카드 top, 334x334, 상단 라운드 30, cover        → 하단 334
       타이틀 3189:13246  프레임 y412 = 이미지 하단 + 40,  2줄 24×1.4×2 = 67.2   → 하단 441.2
       서브   3189:13247  프레임 y514 = 타이틀 하단 + 34.8, 5줄(4번째 빈 줄) 12.5×1.5×5 = 93.75 → 하단 569.75
       CTA    3189:13248  프레임 y628 = 서브 하단 + 20.25, h32            → 하단 622
       카드 하단 여백 = CTA 하단 + 42 (inner 의 padding-bottom)          → 664
     합 334 + 40 + 67.2 + 34.8 + 93.75 + 20.25 + 32 + 42 = 664 = 카드 높이와 일치
     → 흐름 배치로 그대로 재현된다. 카드 높이는 고정하지 않는다(375 보다 넓은 기기에서는
       정사각 이미지가 커지며 카드가 자연히 늘어난다) */
  .main-lesson__inner {
    padding-bottom: 42px; /* 카드 하단 여백 = 카드 bottom 664 − CTA 하단 622 */
  }

  .main-lesson__text {
    max-width: 100%;
    padding-right: 0;
    padding-bottom: 0;
    text-align: center; /* 신 시안 중앙 정렬 (구 시안의 좌측 x21 오프셋 padding-left:1px 제거) */
    margin-top: 40px; /* 타이틀 y412 − 이미지 하단 372 */
  }

  .main-lesson__title {
    max-width: 100%;
    font-weight: 600; /* PC 700 */
    font-size: 24px;
    line-height: 1.4; /* PC 1.3 */
    letter-spacing: 0; /* PC -0.007em */
  }

  .main-lesson__desc {
    margin-top: 34.8px; /* 서브 y514 − 타이틀 하단 479.2 */
    font-size: 12.5px; /* v2 갱신 (구 시안 12) */
    line-height: 1.5;
    letter-spacing: -0.01em; /* Figma -0.12px */
    color: #666666; /* PC #333333 */
  }

  /* CTA (Figma 3087:10571) — PC 2962:10427 과 같은 Primary/200 알약이라 크기·타이포만 덮는다
     (#F3FF99 · border none · radius 30 · drop-shadow · 600 · #000 은 PC 와 동일 → 오버라이드 없음)
     h32 = padding 10×2 + Figma 텍스트 노드 h12. CSS 줄상자는 12×1.3 = 15.6 이라
     높이를 시안값으로 고정하고 flex 중앙정렬로 맞춘다 (문구는 PC 와 공유) */
  .main-lesson__btn {
    height: 32px; /* PC 46 */
    margin-top: 20.25px; /* CTA y628 − 서브 하단 607.75 (구 24, PC 11.1) */
    padding: 10px 12px; /* PC 11px 12px. 12 + 텍스트 65 + 12 = 89 */
    font-size: 12px; /* PC 16 */
    line-height: 1.3; /* PC 1.5 */
    letter-spacing: -0.005em; /* Figma -0.06px (PC -0.01em) */
  }

  .main-lesson__illust {
    /* PC 의 절대배치 해제 — 모바일은 카드 최상단 흐름 배치. cover 는 PC 와 동일 */
    position: static;
    display: block;
    width: 100%;
    max-width: none; /* Figma 334 = 카드 전폭 → 폭에 따라 늘어난다 */
    height: auto;
    aspect-ratio: 1 / 1; /* 3189:13250 334x334 (에셋 main_lesson_thumb.png 1200x1200 정사각) */
    order: -1; /* 마크업(text·btn·illust) 무변경으로 이미지를 카드 최상단으로 */
    margin-top: 0; /* 구 시안의 70px(이미지 y422 − 버튼 하단 352) 해제 — 카드 top 밀착 */
    border-radius: 30px 30px 0 0; /* 카드 상단만 라운드 30 */
  }

  /* ---- 모바일 APP 실측 v2 - Figma 3087:10573 (375x800) ----
     구 시안(타이틀 → 서브 → 스토어 → 일러스트, 좌측정렬·스토어 가로 2개)은 폐기했다
     아래 오프셋은 전부 카드(3189:13256, 프레임 y38) 기준이다
       이미지   3087:10591  카드 top, 335x335, 상단 라운드 30, 연보라 bg 3087:10592 #E5EAFF 포함 → 하단 335
       타이틀   3087:10574  프레임 y410 = 이미지 하단 + 37,  2줄 24×1.4×2 = 67.2  → 하단 439.2
       서브     3087:10575  프레임 y512 = 타이틀 하단 + 34.8, 1줄 12.5×1.5 = 18.75 → 하단 492.75
       스토어   3087:10576  프레임 y564 = 서브 하단 + 33.25, 세로 스택 37.8×2 + gap 7.2 = 82.8 → 하단 608.8
       카드 하단 여백 = 스토어 하단 + 55.2 (inner 의 padding-bottom)      → 664
     합 335 + 37 + 67.2 + 34.8 + 18.75 + 33.25 + 82.8 + 55.2 = 664 = 카드 높이와 일치
     → 흐름 배치로 그대로 재현된다. 구 시안의 x21 좌측 오프셋(margin-left:1px)은 중앙 정렬로 대체됐다
     (이미지 335 는 카드 폭 334 대비 1px 넓은 값이라 width:100% 로 파생 흡수한다) */
  .main-app__inner {
    padding-bottom: 55.2px; /* 카드 하단 여백 = 카드 bottom 664 − 스토어 하단 608.8 */
  }

  .main-app__title {
    text-align: center; /* 신 시안 중앙 정렬 */
    margin-top: 37px; /* 타이틀 y410 − 이미지 하단 373 */
    font-weight: 600; /* PC 700 */
    font-size: 24px;
    line-height: 1.4; /* PC 1.3 */
    letter-spacing: 0;
  }

  .main-app__desc {
    margin-top: 34.8px; /* 서브 y512 − 타이틀 하단 477.2 */
    text-align: center; /* 신 시안 중앙 정렬 */
    font-size: 12.5px; /* v2 갱신 (구 시안 12) */
    line-height: 1.5;
    letter-spacing: -0.01em; /* Figma -0.12px */
    color: #666666; /* PC #333333 */
  }

  .main-app__stores {
    flex-direction: column; /* v2: 가로 2개 → 세로 스택 */
    align-items: center;
    gap: 7.2px; /* PC 12 */
    margin-top: 33.25px; /* 스토어 y564 − 서브 하단 530.75 (구 34) */
  }

  /* [없는 요소] 모바일 시안에도 스토어 버튼은 2개뿐. 링크는 PC 와 동일 */
  .main-app__store {
    gap: 6px; /* PC 10 */
    width: 120px; /* Figma 120x37.8 */
    height: 37.8px; /* padding 8.4×2 + line-height 21 */
    padding: 8.4px 16.8px; /* PC 14px 28px */
    border-radius: 12px; /* PC 20 */
    font-size: 13.2px; /* PC 22 */
    line-height: 21px; /* PC 35 */
  }

  .main-app__store--google {
    box-shadow: 0 0.6px 2.4px rgba(0, 0, 0, 0.25); /* PC 0 1px 4px */
  }

  /* 에셋별 실크기 — 전역 규칙 금지(종류가 다르다) */
  .main-app__store-icon--google {
    width: 12px; /* 박스 12x12 / 글리프 10.874x12.001 */
    height: 12px;
  }

  .main-app__store-icon--apple {
    width: 9.6px; /* 글리프 9.6x12 (박스 12x12 중 실제 점유분) */
    height: 12px;
  }

  .main-app__illust {
    /* PC 의 절대배치 해제 — 모바일은 카드 최상단 흐름 배치 */
    position: static;
    display: block;
    width: 100%;
    max-width: none; /* Figma 335 = 카드 전폭 → 폭에 따라 늘어난다 */
    height: auto;
    aspect-ratio: 1 / 1; /* 3087:10591 335x335 (에셋 main_app_mockup_m.png 1005x1005 = x3, #E5EAFF 배경 포함) */
    order: -1; /* 마크업(title·desc·stores·illust) 무변경으로 이미지를 카드 최상단으로 */
    margin-top: 0; /* 구 시안의 73.2px(일러스트 y369 − 스토어 하단 295.8) 해제 — 카드 top 밀착 */
    /* [없는 요소] 이미지 자체 radius 없음 — 상단 라운드는 카드의 radius 30 + overflow:hidden 이
       그대로 잘라 준다. 모바일 에셋은 아래 모서리가 직각이라 카드 본문과 이음매 없이 붙는다
       (PC 에셋은 네 모서리가 흰색으로 구워져 있어 회색 카드 위에서 흰 노치가 됐다) */
  }
}