@charset "UTF-8";

/* AEM/CMS 컨테이너 폭 제약 무력화 (CLAUDE.md §11) */
body .bat-wrapper { max-width: unset; }
.aem-Grid-Container--xxl { max-width: unset; margin: 0; }

/* ==========================================================================
   glo PICK — 일상을 편리하게 만드는 5가지 플러스 노하우
   - 코드네임 : glopick  (.glopick__wrap / --glopick-unit)
   - Figma    : PUBLISH-K
                PC 327:938 (1920 x 14507) / MO 327:1570
   - 단위 체계 : PC 시안 1920px 기준. --glopick-unit: 0.0520833vw (= 100/1920)
                모든 좌표/사이즈/폰트 = calc(시안px * var(--glopick-unit))
   - 이미지 경로 : ./assets/images/glopick/
   - [실측] 표시 값은 이미지 추출 후 Pillow .size 로 재확인할 것 (CLAUDE.md §7)

   섹션 맵 (PC / 노드 / 높이 / 문서 누적 y)
     1  327:939  1008   0        KV
     2  327:978  1322   1008
     3  327:1008 1188   2330
     4  327:1053 1105   3518
     5  327:1074 1105   4623
     6  327:1095 1105   5728
     7  327:1116 1105   6833
     8  327:1137  508   7938
     9  327:1142 1008   8446
     10 327:1186 1932   9454
     11 327:1344  508   11386
     12 327:1351 1251   11894
     13 327:1391  592   13145
     14 327:1404  770   13737
     합계 14507 ✓
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 스코프 & 리셋 (전역 태그 금지 — CLAUDE.md §1)
   -------------------------------------------------------------------------- */
.glopick__wrap {
  --glopick-unit: 0.0520833vw; /* 1920 기준 1px */
  --font-en: "Mont";
  --font-kr: "Onemobile";
  position: relative;
  width: 100%;
  font-family: var(--font-en), var(--font-kr), sans-serif;
}
.glopick__wrap, .glopick__wrap * { box-sizing: border-box; }
.glopick__wrap img { max-width: 100%; display: block; }
.glopick__wrap p,
.glopick__wrap dl, .glopick__wrap dd,
.glopick__wrap ul,
.glopick__wrap h1, .glopick__wrap h2, .glopick__wrap h3 { margin: 0; }
.glopick__wrap ul { padding: 0; list-style: none; }
.glopick__wrap a { text-decoration: none; }

/* PC / MO 요소 토글 — img 태그는 리셋(.glopick__wrap img = 0,0,2,0)보다
   특정도를 높여야 하므로 img 전용 규칙을 반드시 세트로 둔다 (CLAUDE.md §10) */
.glopick__mo-only { display: none; }
.glopick__wrap img.glopick__mo-only { display: none; }
.glopick__pc-only { display: block; }
.glopick__wrap img.glopick__pc-only { display: block; }
/* br/span 은 block 이 되면 안 된다(줄 하나가 더 생기거나 문장이 끊긴다) */
.glopick__wrap br.glopick__pc-only,
.glopick__wrap span.glopick__pc-only { display: inline; }
.glopick__wrap br.glopick__mo-only,
.glopick__wrap span.glopick__mo-only { display: none; }

/* --------------------------------------------------------------------------
   1. KV — 1920 x 1008 (327:939)
      배경은 이미지가 아니라 Figma 원본 그라디언트를 그대로 CSS 로 재현.
      사진 콜라주(327:942 그룹, bbox 1365.925 x 995.521 @ 855.6 / -13.04)만
      PNG 로 얹는다. 그룹이 섹션 오른쪽 밖으로 넘치므로 overflow: hidden 필수.
   -------------------------------------------------------------------------- */
.glopick__kv {
  position: relative;
  width: 100%;
  height: calc(1008 * var(--glopick-unit));
  overflow: hidden;
  background: linear-gradient(67.4035deg, #44ad6b 1.688%, #7bdaa8 125.29%);
  margin-bottom: -1px; /* 서브픽셀 반올림으로 흰 줄 비침 방지 (§2) */
}

/* 사진 콜라주 — kv_img.png [실측] 1064 x 982
   그룹(327:942) bbox 는 1365.925 x 995.521 @ (855.6, -13.04) 지만,
   Figma export 는 상위 프레임(1920 x 1008) 밖을 잘라내므로 실제 파일은
   1064 x 982 다 (get_screenshot original = 1064x982 로 확인).
   → 잘린 좌상단이 섹션 (855.6, 0) 이 되고 폭은 1920-855.6 = 1064.4. */
.glopick__kv-img {
  position: absolute;
  left: calc(855.6 * var(--glopick-unit));
  top: 0;
  width: calc(1064.4 * var(--glopick-unit));
}

/* glo 로고 — logo_glo.svg 그룹 bbox 194 x 136.412 / 좌표 x77.76 y49.66 */
.glopick__logo {
  position: absolute;
  left: calc(77.76 * var(--glopick-unit));
  top: calc(49.66 * var(--glopick-unit));
  width: calc(194 * var(--glopick-unit));
}

/* glo PICK 뱃지 — 흰 알약 300 x 63 @ (240, 320.42), radius 100 */
.glopick__badge {
  position: absolute;
  left: calc(240 * var(--glopick-unit));
  top: calc(320.42 * var(--glopick-unit));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(300 * var(--glopick-unit));
  height: calc(63 * var(--glopick-unit));
  border-radius: calc(100 * var(--glopick-unit));
  background: #fff;
  font-family: var(--font-en), sans-serif;
  font-size: calc(29.11 * var(--glopick-unit));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #44ad6b;
  white-space: nowrap; /* flex 중앙정렬 박스 안에서 절대 줄바꿈되지 않게 */
}

/* 타이틀 — Onemobile Bold 70 / 1.3 / -0.04em, 숫자만 Mont SemiBold */
.glopick__kv-title {
  position: absolute;
  left: calc(240 * var(--glopick-unit));
  top: calc(397.23 * var(--glopick-unit));
  font-size: calc(70 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
  white-space: nowrap;
}
.glopick__kv-title .glopick__num { font-weight: 600; }

/* 서브 카피 — Onemobile Regular 39.245 / 1.2 / -0.02em */
.glopick__kv-desc {
  position: absolute;
  left: calc(240 * var(--glopick-unit));
  top: calc(603.23 * var(--glopick-unit));
  font-size: calc(39.245 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

/* 하단 고지 — NotoSans Regular 14 / 1.3 / -0.02em, bottom 40 / left 60 */
.glopick__kv-note {
  position: absolute;
  left: calc(60 * var(--glopick-unit));
  bottom: calc(40 * var(--glopick-unit));
  font-family: var(--font-en), "NotoSans", sans-serif;
  font-size: calc(14 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. 인트로 (파동 BG + 디바이스) — 1920 x 1322 (327:978)
      문서 누적 y = 1008 (KV 다음). 아래 좌표는 전부 "섹션 기준" 값.

      [배경] 327:979 "BG" 그룹
        - conic-gradient(어두운 초록/블랙) + 파동 링 5겹(mask/mix-blend-overlay)
          + 하단 페이드 그라디언트가 겹친 구조라 CSS 재현이 불가능.
          → 그룹 통짜 PNG 로 export (CLAUDE.md §7 / SPEC §4)
        - export 실측 1920 x 1322 = 섹션과 정확히 동일 → background 로 100% 100% 사용.

      [디바이스] 327:997 "Boreas - 360 - Green_00000 2"
        - 원본 873.611 x 1091.947 이미지를 -12deg 회전시킨 노드.
          회전 상태 그대로 통짜 PNG export (CSS transform 재현 금지 — SPEC §4)
        - 노드 bbox 1081.549 x 1249.72 @ x394.42 / y206.71
          단, 섹션 하단(1322)에서 잘려 실제 export 는 1082 x 1115.
          → 좌상단 기준(left/top) + width 만 지정하면 잘림 여부와 무관하게 동일 렌더.
   -------------------------------------------------------------------------- */
.glopick__sec2 {
  position: relative;
  width: 100%;
  height: calc(1322 * var(--glopick-unit));
  overflow: hidden; /* 디바이스가 섹션 하단 밖으로 넘침 */
  background: #0d0d0d url(/content/dam/glo-kr/mcs/images/glo_pick/260818/sec2_bg.png) no-repeat center top / 100% 100%;
  margin-bottom: -1px; /* 서브픽셀 반올림으로 흰 줄 비침 방지 (§2) */
}

/* 디바이스 — sec2_device.png [실측] 1082 x 1115 (bbox 1081.549 x 1249.72 중 하단 잘림)
   좌표 x394.42 / y206.71 */
.glopick__sec2-device {
  position: absolute;
  left: calc(394.42 * var(--glopick-unit));
  top: calc(206.71 * var(--glopick-unit));
  width: calc(1081.549 * var(--glopick-unit));
}

/* 상단 리드 카피 (327:999) — Onemobile Regular 28 / 1.5 / -0.56px(-0.02em) / #a0a0a0
   좌표 : 가운데 정렬(left 50%), y150. 숫자 "10" 은 Mont 가 자동으로 잡는다. */
.glopick__sec2-lead {
  position: absolute;
  left: 50%;
  top: calc(150 * var(--glopick-unit));
  font-size: calc(28 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #a0a0a0;
  text-align: center;
  white-space: nowrap;
}

/* 메인 카피 (327:1000) — Onemobile 36 / 1.5 / -0.72px(-0.02em)
   1행 Regular #a0a0a0 / 2행 Bold #ffffff. 좌표 : 가운데 정렬, y250
   (= lead y150 + 2행 * 28 * 1.5 = 234 다음 줄) */
.glopick__sec2-copy {
  position: absolute;
  left: 50%;
  top: calc(250 * var(--glopick-unit));
  font-size: calc(36 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #a0a0a0;
  text-align: center;
  white-space: nowrap;
}
.glopick__sec2-copy strong {
  font-weight: 700;
  color: #fff;
}

/* 우상단 브랜드 마크 (327:1001 "글로픽") — 그룹 right 70 / top 60 기준 */
.glopick__sec2-brand {
  position: absolute;
  right: calc(70 * var(--glopick-unit));
  top: calc(60 * var(--glopick-unit));
  width: calc(201 * var(--glopick-unit)); /* 1850(right edge) - 1649(logo left) */
  height: calc(58.362 * var(--glopick-unit));
}
/* glo 심볼 (327:1003) — logo_glo_w.svg [실측] 83 x 58.362 / 좌표 x1649 y60
   섹션 좌표 x1649 → 브랜드 박스(left 1649) 기준 0 */
.glopick__sec2-brand-logo {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(83 * var(--glopick-unit));
}
/* "PICK" (327:1002) — Mont SemiBold 46.321 / 1.2 / -0.9264px(-0.02em) / #fff
   Figma 는 중앙 기준(cx 1797, cy 91.78) → 브랜드 박스 기준 cx 148, cy 31.78 */
.glopick__sec2-brand-pick {
  position: absolute;
  left: calc(148 * var(--glopick-unit));
  top: calc(31.78 * var(--glopick-unit));
  transform: translate(-50%, -50%);
  font-family: var(--font-en), sans-serif;
  font-size: calc(46.321 * var(--glopick-unit));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. 노하우 리스트 (5가지) — 1920 x 1188 (327:1008)
      문서 누적 y = 2330. 아래 좌표는 전부 "섹션 기준" 값.

      [배경] Figma 원본 그라디언트를 그대로 CSS 로 재현 (이미지 아님)
        linear-gradient(179.99999deg, #0c0f0e 10.925%, #215c37 57.583%, #44ad6b 100%)
        → 180deg 로 반올림.

      [카드] 5장 모두 "Mask group" 노드(465 x 250, radius 21.482) 통짜 PNG export.
        원본은 큰 사진을 라운드 사각형 마스크로 자르고 #858585 multiply 레이어를
        덮은 구조라 CSS 재현 대신 그룹 export 로 처리 (SPEC §4).
        export 실측 : 5장 모두 465 x 250.

      [그리드 계산]
        1F(327:1031) : 카드 3장 + gap 21 → 465*3 + 21*2 = 1437
                       left = (1920 - 1437) / 2 = 241.5 , top = 494
                       카드 left : 241.5 / 727.5 / 1213.5
        2F(327:1011) : 카드 2장 + gap 21 → 465*2 + 21   = 951
                       left = (1920 - 951) / 2 + 1.5(중심 보정 +1.5px) = 486 , top = 774
                       카드 left : 486 / 972
   -------------------------------------------------------------------------- */
.glopick__sec3 {
  position: relative;
  width: 100%;
  height: calc(1188 * var(--glopick-unit));
  background: linear-gradient(180deg, #0c0f0e 10.925%, #215c37 57.583%, #44ad6b 100%);
  margin-bottom: -1px; /* 서브픽셀 반올림으로 배경 틈 비침 방지 (§2) */
}

/* 숫자·영문 강조 (Mont SemiBold) — 문장 나머지는 Onemobile Bold(700) */
.glopick__sec3 .glopick__sec3-num {
  font-family: var(--font-en), sans-serif;
  font-weight: 600;
}

/* 리드 카피 (327:1051) — Onemobile Bold 28 / 1.4 / -0.56px(-0.02em) / #a0a0a0
   좌표 : 가운데 정렬(그룹 left 364 + width 1192 → 중앙 960), y150 */
.glopick__sec3-lead {
  position: absolute;
  left: 50%;
  top: calc(150 * var(--glopick-unit));
  font-size: calc(28 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #a0a0a0;
  text-align: center;
  white-space: nowrap;
}

/* 타이틀 (327:1052) — Onemobile Bold 52 / 1.3 / -1.04px(-0.02em) / #fff
   좌표 : 가운데 정렬. y = 150 + (28 * 1.4 * 2행 = 78.4) + gap 30 = 258.4 */
.glopick__sec3-title {
  position: absolute;
  left: 50%;
  top: calc(258.4 * var(--glopick-unit));
  font-size: calc(52 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* 카드 공통 — [실측] 465 x 250 / radius 21.482 */
.glopick__sec3-card {
  position: absolute;
  width: calc(465 * var(--glopick-unit));
  height: calc(250 * var(--glopick-unit));
}
.glopick__sec3-card img {
  width: calc(465 * var(--glopick-unit));
  height: calc(250 * var(--glopick-unit));
  border-radius: calc(21.482 * var(--glopick-unit));
}
/* 카드 라벨 — Onemobile Bold 31.507 / 1.3 / -0.6301px(-0.02em) / #fff
   카드 상단에서 y +109.26 (Figma mt), 카드 폭 전체 기준 가운데 정렬 */
.glopick__sec3-card-label {
  position: absolute;
  left: 0;
  top: calc(109.26 * var(--glopick-unit));
  width: 100%;
  font-size: calc(31.507 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* 1F — top 494 */
.glopick__sec3-card1 { left: calc(241.5 * var(--glopick-unit));  top: calc(494 * var(--glopick-unit)); } /* 전동커튼 */
.glopick__sec3-card2 { left: calc(727.5 * var(--glopick-unit));  top: calc(494 * var(--glopick-unit)); } /* 스마트 전구 */
.glopick__sec3-card3 { left: calc(1213.5 * var(--glopick-unit)); top: calc(494 * var(--glopick-unit)); } /* 리모컨 허브 */

/* 2F — top 774 */
.glopick__sec3-card4 { left: calc(486 * var(--glopick-unit)); top: calc(774 * var(--glopick-unit)); } /* 스마트 플러그 */
.glopick__sec3-card5 { left: calc(972 * var(--glopick-unit)); top: calc(774 * var(--glopick-unit)); } /* 하이퍼 프로 플러스 */

/* 카드 = 각 STEP 섹션으로 가는 앵커(<a>). 스무스 스크롤은 glo_pick.html 하단
   페이지 전용 스크립트가 처리한다 (CLAUDE.md §9 — 공통 파일로 옮기지 않음).
   ★ hover 효과는 카드 자신이 아니라 내부 img 에 건다. 카드에는 `.reveal` 의
     transform: translateY(var(--glopick-rv)) 가 이미 걸려 있어 덮어쓰면
     등장 애니메이션이 깨진다 (CLAUDE.md §5). */
a.glopick__sec3-card { display: block; cursor: pointer; }
.glopick__sec3-card img { transition: transform 0.35s ease, filter 0.35s ease; }
a.glopick__sec3-card:hover img { transform: scale(1.03); filter: brightness(1.06); }
a.glopick__sec3-card:focus-visible {
  outline: calc(3 * var(--glopick-unit)) solid #fff;
  outline-offset: calc(4 * var(--glopick-unit));
  border-radius: calc(21.482 * var(--glopick-unit));
}
@media (hover: none) {
  /* 터치 기기에서는 hover 가 탭 후 남아 붙으므로 비활성화 */
  a.glopick__sec3-card:hover img { transform: none; filter: none; }
}

/* ==========================================================================
   [공통] STEP 섹션 (섹션 4~7 / 327:1053, 327:1074, 327:1095, 327:1116)
   --------------------------------------------------------------------------
   4개 섹션은 높이(1105) · 내부 좌표가 완전히 동일한 반복 레이아웃이다.
   좌/우 배치만 서로 뒤바뀌므로 공통 클래스 `.glopick__step*` 하나로 정의하고
   방향만 `--left / --right` 모디파이어로 스위치한다.
   ★ 섹션 5·6·7 CSS 파일에서는 이 블록을 다시 정의하지 말 것 (sec_04.css 참고).

   공통 좌표 (Figma 1920 x 1105 섹션 기준)
     title 그룹   : left 364 / top 100 / w 1192 / 가운데 정렬 (flex col, gap 30)
       - eyebrow  : ONE_Mobile Bold 30 / 1.3 / -0.6px(-0.02em) / #fe5000  @ top 100
       - headline : ONE_Mobile Bold 52 / 1.3 / -1.04px(-0.02em) / #fff
                    @ top 169 (= 100 + 30*1.3 + gap 30)
     사진(마스크) : 1300 x 700 @ top 405
                    sec4·sec6 → left 0 / sec5·sec7 → left 620 (= 1920-1300)
                    405 + 700 = 1105 → 섹션 하단에 딱 맞음
     txt 그룹     : top 651 / w 580, sec4·sec6 → left 1100 / sec5·sec7 → left 240
       - 번호      : Mont Bold 34 / 1.4 / #fff  @ top 651 (h 47.6 → 698.6)
       - 카드      : 580 x 310 / radius 6 / #fff @ top 705 (= 698.6 + 6.4)
       - 카드 타이틀: ONE_Mobile Bold 28 / 1.4 / -1.12px(-0.04em) / #000
                     @ (카드left+35.81, 746.32) → 카드기준 (35.81, 41.32)
       - 본문 리스트: ONE_Mobile Regular 24 / 1.8(=43.2) / -0.96px(-0.04em) / #000
                     @ (카드left+35.81, 800.25)
                     구분선 5줄 @ (카드left+25, w530) y = 801.31 / 844.40 /
                     887.49 / 930.59 / 973.68  → 간격 43.09
                     → ul(border-top) + li 4개(height 43.09 + border-bottom)로 재현.
                       Figma 텍스트 라인박스(43.2)와 1px 미만 차이만 발생.
   ========================================================================== */

/* --- 섹션 골격 (배경은 섹션별 파일에서 지정) ------------------------------- */
.glopick__wrap .glopick__step {
  position: relative;
  width: 100%;
  height: calc(1105 * var(--glopick-unit));
  margin-bottom: -1px; /* 서브픽셀 반올림 흰 줄 비침 방지 (CLAUDE.md §2) */
}

/* --- 상단 카피 ------------------------------------------------------------ */
/* 카테고리 라벨 — 30 / 1.3 / -0.02em / #fe5000 @ top 100, 가로 중앙 */
.glopick__wrap .glopick__step-eyebrow {
  position: absolute;
  left: 50%;
  top: calc(100 * var(--glopick-unit));
  transform: translateX(-50%); /* .reveal.glopick__center 가 translateY 를 합성해 덮어씀 */
  font-size: calc(30 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fe5000;
  text-align: center;
  white-space: nowrap;
}

/* 헤드라인 — 52 / 1.3 / -0.02em / #fff @ top 169, 가로 중앙, <br> 로만 줄바꿈 */
.glopick__wrap .glopick__step-title {
  position: absolute;
  left: 50%;
  top: calc(169 * var(--glopick-unit));
  transform: translateX(-50%); /* .reveal.glopick__center 가 translateY 를 합성해 덮어씀 */
  font-size: calc(52 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
/* 헤드라인 글로우 — Figma text-shadow 0 0 20 rgba(68,150,107,.5)
   (섹션 5·6·7 에만 적용되어 있고 섹션 4 에는 없음 → 모디파이어로 분리) */
.glopick__wrap .glopick__step-title--glow {
  text-shadow: 0 0 calc(20 * var(--glopick-unit)) rgba(68, 150, 107, 0.5);
}

/* --- 사진 (마스크 적용 그룹 통짜 PNG, 실측 1300 x 700) --------------------- */
.glopick__wrap .glopick__step-img {
  position: absolute;
  top: calc(405 * var(--glopick-unit));
  width: calc(1300 * var(--glopick-unit));
  height: calc(700 * var(--glopick-unit));
}
.glopick__wrap .glopick__step-img--left { left: 0; }
.glopick__wrap .glopick__step-img--right { left: calc(620 * var(--glopick-unit)); } /* 1920 - 1300 */

/* --- 번호 + 카드 묶음 ------------------------------------------------------ */
.glopick__wrap .glopick__step-txt {
  position: absolute;
  top: calc(651 * var(--glopick-unit));
  width: calc(580 * var(--glopick-unit));
}
.glopick__wrap .glopick__step-txt--left { left: calc(240 * var(--glopick-unit)); }
.glopick__wrap .glopick__step-txt--right { left: calc(1100 * var(--glopick-unit)); }

/* 번호 — Mont Bold 34 / 1.4 / #fff (Mont 가 숫자 글리프를 가지므로 폴백 불필요) */
.glopick__wrap .glopick__step-num {
  font-family: var(--font-en), sans-serif;
  font-size: calc(34 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

/* 카드 — 시안 통짜 이미지 580 x 310 @ top 705 (번호 하단 698.6 + 6.4)
   ★ 원래 흰 박스 + 타이틀 + 4행 리스트 + 구분선을 HTML 로 조판했는데,
     Onemobile 의 폰트 메트릭과 Figma 의 행간 계산이 달라 본문이 시안보다
     아래로 밀렸다. 행 높이를 억지로 맞추면 다른 섹션에서 또 틀어지므로
     카드 전체를 이미지로 대체했다 (문구는 img alt 로 유지).
   PC 원본 : 섹션4 327:1059 / 섹션5 327:1080 / 섹션6 327:1101 / 섹션7 327:1122
   height 는 고정하지 않는다 — export 크기가 조금 달라도 찌그러지지 않게. */
.glopick__wrap .glopick__step-card {
  position: relative;
  margin-top: calc(6.4 * var(--glopick-unit));
  width: calc(580 * var(--glopick-unit));
  height: auto;
}

/* ==========================================================================
   4. STEP 01 전동커튼 — 1920 x 1105 (327:1053)
      배경 : Figma linear-gradient(180deg, #44ad6b 0%, #7bdaa8 100%)
      사진 : 327:1055 그룹 export → step01_img.png (마스크 결과 1300 x 700)
   ========================================================================== */
.glopick__wrap .glopick__sec4 {
  background: linear-gradient(180deg, #44ad6b 0%, #7bdaa8 100%);
}

/* ==========================================================================
   5. STEP 02 스마트 전구 — 1920 x 1105 (327:1074)
      ★ 반복 레이아웃 공통 규칙(.glopick__step*)은 sec_04.css 상단 참고.
        여기서는 섹션 4 와 다른 부분(배경 / 좌우 반전 / 문구)만 정의한다.
      배경 : Figma 단색 #7bdaa8 (그라디언트 아님)
      사진 : 327:1076 그룹 export → step02_img.png (마스크 결과 1300 x 700)
             right 0 기준 → left 620 (= 1920 - 1300), top 405
      txt  : left 240 (섹션 4 의 1100 과 좌우 반전)
   ========================================================================== */
.glopick__wrap .glopick__sec5 {
  background: #7bdaa8;
}

/* ==========================================================================
   6. STEP 03 리모컨 허브 — 1920 x 1105 (327:1095)
      ★ 반복 레이아웃 공통 규칙(.glopick__step*)은 sec_04.css 상단 참고.
      배경 : Figma 단색 #7bdaa8 (섹션 5 와 동일)
      사진 : 327:1097 그룹 export → step03_img.png (마스크 결과 1300 x 700)
             left 0 / top 405 — 섹션 4 와 같은 좌측 배치
      txt  : left 1100 — 섹션 4 와 동일한 우측 배치
      → 섹션 4 대비 실제 차이는 배경(단색) / 글로우 유무 / 문구·이미지뿐이다.
   ========================================================================== */
.glopick__wrap .glopick__sec6 {
  background: #7bdaa8;
}

/* ==========================================================================
   7. STEP 04 스마트 플러그 — 1920 x 1105 (327:1116)
      ★ 반복 레이아웃 공통 규칙(.glopick__step*)은 sec_04.css 상단 참고.
      배경 : Figma linear-gradient(180deg, #7bdaa8 37.981%, #44ad6b 100%)
             (섹션 4 의 그라디언트를 뒤집은 형태 — STEP 구간의 마무리)
      사진 : 327:1118 그룹 export → step04_img.png (마스크 결과 1300 x 700)
             right 0 기준 → left 620 (= 1920 - 1300), top 405
      txt  : left 240 (섹션 5 와 동일한 좌측 배치)
   ========================================================================== */
.glopick__wrap .glopick__sec7 {
  background: linear-gradient(180deg, #7bdaa8 37.981%, #44ad6b 100%);
}

/* --------------------------------------------------------------------------
   8. 메시지 밴드 — 1920 x 508 (327:1137)
      배경 : Figma 원본이 linear-gradient(90deg, #44ad6b 0%, #44ad6b 100%) 즉 단색.
             이미지 없이 CSS 단색으로 재현한다.
      내부 : txt 블록(327:1139) 1162 x auto @ (378.5, 150)
             → 블록 중심 x = 378.5 + 1162/2 = 959.5 ≒ 960 (섹션 정중앙)
             → left:50% + translateX(-50%) 로 배치 (.glopick__center)
             flex-col gap 16px : lead(2줄 36px/1.5 = 108px) → desc top = 150+108+16 = 274
   -------------------------------------------------------------------------- */
.glopick__sec8 {
  position: relative;
  width: 100%;
  height: calc(508 * var(--glopick-unit));
  background: #44ad6b;
  margin-bottom: -1px; /* 서브픽셀 반올림으로 흰 줄 비침 방지 (§2) */
}

/* 리드 카피 (327:1140) — Onemobile 36 / 1.5 / -0.72px(= -0.02em)
   1행 Regular(400) + 2행 Bold(700), 가운데 정렬 */
.glopick__sec8-lead {
  position: absolute;
  left: 50%;
  top: calc(150 * var(--glopick-unit));
  font-size: calc(36 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.glopick__sec8-lead strong { font-weight: 700; }

/* 서브 카피 (327:1141) — Onemobile 28 / 1.5 / -0.56px(= -0.02em)
   top = 150(txt 블록 top) + 108(lead 2줄) + 16(gap) = 274 */
.glopick__sec8-desc {
  position: absolute;
  left: 50%;
  top: calc(274 * var(--glopick-unit));
  font-size: calc(28 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. 제품 KV — 1920 x 1008 (327:1142)
      배경 : 327:1143 "img" 프레임(사진 + 상단 그라디언트 띠)을 통짜 PNG 로 export.
             bbox 2035 x 1008 @ (-110, 0) → 섹션 좌우로 넘치므로 overflow:hidden 필수.
      로고 락업 : 327:1150 (NEW HYPERpro+ / ＋로 더 쉽게) 벡터 묶음 → SVG 통짜.
                  617.598 x 204.612 @ (240, 344.215)
      서브카피  : 327:1174 텍스트 @ (240, 592.784)  ( = 344.215 + 248.569 )
      아이콘    : 327:1147 QuickStart 뱃지 65.936 x 65.936 @ (794.959, 595.866)
      우상단    : 327:1176 "현명한 선택" 벡터 337.049 x 74 @ (1509, 78)
   -------------------------------------------------------------------------- */
.glopick__sec9 {
  position: relative;
  width: 100%;
  height: calc(1008 * var(--glopick-unit));
  overflow: hidden;
  background: #2f7f4f; /* 배경 PNG 로딩 전/서브픽셀 여백 보정용 근사색 */
  margin-bottom: -1px; /* 서브픽셀 반올림으로 흰 줄 비침 방지 (§2) */
}

/* 배경 이미지 — sec09_kv_bg.png [실측] 1920 x 1008
   Figma 원본(327:1143)은 2035 x 1008 @ x-110 이지만 export 가 섹션 폭(1920)에
   이미 잘려 나왔다 → 잘린 좌상단이 곧 섹션 (0,0) 이므로 풀블리드로 얹는다. */
.glopick__sec9-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(1008 * var(--glopick-unit));
}

/* 우상단 "현명한 선택" — sec09_badge.svg 337.049 x 74 @ (1509, 78) */
.glopick__sec9-badge {
  position: absolute;
  left: calc(1509 * var(--glopick-unit));
  top: calc(78 * var(--glopick-unit));
  width: calc(337.049 * var(--glopick-unit));
  height: calc(74 * var(--glopick-unit));
}

/* 로고 락업 — sec09_lockup.svg [실측] 618 x 320 (= Figma 327:1149 "title" 통짜)
   ★ 락업(327:1150, 617.598 x 204.612)만이 아니라 그 아래 서브카피
     "꽂으면 끝 기다림은 짧게"(327:1174, y +248.569, h 71)까지 포함된 파일이다.
     617.598 x 319.569 → 세로를 204.612 로 고정하면 SVG 가 찌그러지고
     서브카피 위치도 어긋난다. height 는 파일 비율에 맡긴다(= 319.6).
   좌표는 그룹 원점 (240, 344.215) 그대로. 서브카피는 SVG 안에서
   left 0 = 240 에 놓이므로 락업과 자동으로 좌측 정렬된다. */
.glopick__sec9-lockup {
  position: absolute;
  left: calc(240 * var(--glopick-unit));
  top: calc(344.215 * var(--glopick-unit));
  width: calc(617.598 * var(--glopick-unit));
  height: auto;
}
.glopick__sec9-lockup img { width: 100%; height: auto; }

/* 서브 카피 옆 QuickStart 아이콘 — 65.936 x 65.936 @ (794.959, 595.866) */
.glopick__sec9-icon {
  position: absolute;
  left: calc(794.959 * var(--glopick-unit));
  top: calc(595.866 * var(--glopick-unit));
  width: calc(65.936 * var(--glopick-unit));
  height: calc(65.936 * var(--glopick-unit));
}

/* 하단 고지 (327:1175) — NotoSans 14 / 1.4 / -0.02em
   원본 좌표 (60, 948) / h20 → 1008 - 948 - 20 = bottom 40 */
.glopick__sec9-note {
  position: absolute;
  left: calc(60 * var(--glopick-unit));
  bottom: calc(40 * var(--glopick-unit));
  font-family: var(--font-en), "NotoSans", sans-serif;
  font-size: calc(14 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10. 4-업 피처 카드 — 1920 x 1932 (327:1186)

   [배경] 327:1187 "bg" — 검정 위에 conic-gradient 를 회전/스케일 매트릭스로
          얹은 형태라 CSS 로 정확 재현 불가. 노드 통짜 PNG(1920x1932)로 export.

   [그리드] 327:1189 "list" = 1440 x 1632 (실측: get_screenshot original 1440x1632)
          - 2열 x 2행, column-gap 60 / row-gap 100
          - 셀(=카드 1개) 690 x 766 (실측: 327:1190 original 690x766)
          - 섹션 내 위치 : x = (1920-1440)/2 = 240
                           y = 150  ← 섹션 상하 여백이 (1932-1632)/2 = 150 으로 균등.
                           ※ Figma metadata 가 list 하위 노드를 list 기준 좌표로만
                             돌려주어 y 를 직접 못 읽었다. 시안 스크린샷 실측값
                             147~148px 와 일치하므로 150 으로 확정. (검증 필요)
          - 셀 내부 좌표(카드 기준)
              비주얼(마스크 영역) : 690 x 520 @ (0, 0), radius 20 [추정]
              타이틀              : w690 @ top 570 (48px / 1.3 → h 62.4)
              디스크립션          : w690 @ top 658 (24px / 1.5 x 3줄 = 108 → 766 ✓)
          - 2행 오프셋 = 866 (520 + 246 + 100 = 카드높이 766 + gap 100)

   [카드 공통 헤드] 327:1195 / 327:1272 — 카드 상단 중앙 정렬 블록 @ top 40
              아이콘 h50 (top 40) → 라벨 top 102 (26px/1.4) → 헤드라인 top 146 (36px/1.3)

   [하단 각주] 327:1188 — NotoSans 14 / 1.4 / -0.02em @ (60, 1852)
   -------------------------------------------------------------------------- */
.glopick__sec10 {
  position: relative;
  width: 100%;
  height: calc(1932 * var(--glopick-unit));
  overflow: hidden;
  background: #000 url("/content/dam/glo-kr/mcs/images/glo_pick/260818/sec10_bg.png") no-repeat center top / 100% 100%;
  margin-bottom: -1px; /* 서브픽셀 반올림으로 흰 줄 비침 방지 (§2) */
}

/* ---- 그리드 컨테이너 1440 x 1632 @ (240, 150) ---- */
.glopick__sec10-list {
  position: absolute;
  left: calc(240 * var(--glopick-unit));
  top: calc(150 * var(--glopick-unit));
  width: calc(1440 * var(--glopick-unit));
  height: calc(1632 * var(--glopick-unit));
}

/* ---- 카드 셀 690 x 766 ---- */
.glopick__sec10-item {
  position: absolute;
  width: calc(690 * var(--glopick-unit));
  height: calc(766 * var(--glopick-unit));
}
.glopick__sec10-item1 { left: 0;                              top: 0; }
.glopick__sec10-item2 { left: calc(750 * var(--glopick-unit)); top: 0; }                              /* 690 + gap 60 */
.glopick__sec10-item3 { left: 0;                              top: calc(866 * var(--glopick-unit)); } /* 766 + gap 100 */
.glopick__sec10-item4 { left: calc(750 * var(--glopick-unit)); top: calc(866 * var(--glopick-unit)); }

/* ---- 카드 비주얼(마스크 영역) 690 x 520 ---- */
.glopick__sec10-visual {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(690 * var(--glopick-unit));
  height: calc(520 * var(--glopick-unit));
  border-radius: calc(20 * var(--glopick-unit)); /* [추정] Figma 마스크 rect radius — 확인 필요 */
  overflow: hidden;
}
/* 2·3·4번 카드 배경 — Figma 원본 linear-gradient(180deg,#44ad6b 0%,#7bdaa8 100%) */
.glopick__sec10-visual2,
.glopick__sec10-visual3,
.glopick__sec10-visual4 {
  background: linear-gradient(180deg, #44ad6b 0%, #7bdaa8 100%);
}

/* ---- 카드 헤드(아이콘 + 라벨 + 헤드라인) — 카드 폭 전체를 쓰고 텍스트만 중앙정렬 ---- */
.glopick__sec10-head {
  position: absolute;
  left: 0;
  top: calc(40 * var(--glopick-unit));
  width: calc(690 * var(--glopick-unit));
  text-align: center;
  color: #fff;
}
/* 아이콘 : 1번 카드 50x50 (327:1196) / 2번 카드 120x50 (327:1273)
   리셋(.glopick__wrap img { display:block })을 그대로 살리고 margin:0 auto 로 중앙정렬한다.
   inline-block 으로 바꾸면 리셋(0,0,2,0)에 눌리고 baseline 여백까지 생긴다. (§10) */
.glopick__sec10-icon { height: calc(50 * var(--glopick-unit)); margin: 0 auto; }
.glopick__sec10-icon1 { width: calc(50 * var(--glopick-unit)); }
.glopick__sec10-icon2 { width: calc(120 * var(--glopick-unit)); }

/* 라벨 — Mont Bold 26 / 1.4 / -0.26px(= -0.01em), 헤드 top 기준 62 (= 40+62 = 절대 102)
   ※ p 리셋(.glopick__wrap p { margin:0 } = 0,0,1,1)을 이기려면 클래스 2개 이상 필요 */
.glopick__sec10-head .glopick__sec10-label {
  margin-top: calc(12 * var(--glopick-unit)); /* 아이콘 50 + 12 = 62 */
  font-family: var(--font-en), sans-serif;
  font-size: calc(26 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* 헤드라인 — Onemobile Bold 36 / 1.3 / -0.36px(= -0.01em), 라벨 top +44 */
.glopick__sec10-head .glopick__sec10-headline {
  margin-top: calc(7.6 * var(--glopick-unit)); /* 라벨 h(26*1.4=36.4) + 7.6 = 44 */
  font-size: calc(36 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* 헤드라인 안 숫자만 Mont SemiBold */
.glopick__sec10 .glopick__num { font-weight: 600; }
/* 헤드라인 끝 별표만 23.22px */
.glopick__sec10-ast { font-size: calc(23.22 * var(--glopick-unit)); }

/* ---- 카드 내부 각주 (327:1194 / 327:1281) — NotoSans 14 / 1.3 / -0.02em @ (20, 482) ---- */
.glopick__sec10-cardnote {
  position: absolute;
  left: calc(20 * var(--glopick-unit));
  top: calc(482 * var(--glopick-unit));
  font-family: var(--font-en), "NotoSans", sans-serif;
  font-size: calc(14 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

/* ---- 카드 하단 텍스트 ---- */
/* 타이틀 (327:1201 등) — Onemobile Bold 48 / 1.3 / -0.96px(= -0.02em), w690 중앙 */
.glopick__sec10-title {
  position: absolute;
  left: 0;
  top: calc(570 * var(--glopick-unit));
  width: calc(690 * var(--glopick-unit));
  font-size: calc(48 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
}
/* 디스크립션 (327:1202 등) — Onemobile Regular 24 / 1.5 / -0.96px(= -0.04em) */
.glopick__sec10-desc {
  position: absolute;
  left: 0;
  top: calc(658 * var(--glopick-unit));
  width: calc(690 * var(--glopick-unit));
  font-size: calc(24 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.04em;
  color: #fff;
  text-align: center;
}

/* --------------------------------------------------------------------------
   10-1. QuickStart 카드 (327:1190)
      비주얼 배경 = 사진 1장(327:1193). Figma 마스크 오프셋
      mask-position (19.986, 292.097) → 이미지 좌상단은 카드 기준 (-19.986, -292.097)
      이미지 박스 739.974 x 1416.605, object-fit: cover
      ※ 폭 739.974 > 카드 690 이라 리셋 `.glopick__wrap img { max-width:100% }`(0,0,2,0)에
        눌린다. img 태그를 포함한 (0,0,2,1) 셀렉터로 특정도를 높여 해제한다. (§10)
   -------------------------------------------------------------------------- */
.glopick__sec10-photo1 {
  position: absolute;
  left: calc(-19.986 * var(--glopick-unit));
  top: calc(-292.097 * var(--glopick-unit));
  width: calc(739.974 * var(--glopick-unit));
  height: calc(1416.605 * var(--glopick-unit));
  object-fit: cover;
}
.glopick__sec10 img.glopick__sec10-photo1 { max-width: none; }

/* --------------------------------------------------------------------------
   10-2. EasyView 카드 (327:1203)
      디바이스 : 327:1209 통짜 PNG 239.317 x 546.941 @ 카드기준 (141.545, 120)
      디스플레이 아이콘 4종 : 327:1212 통짜 SVG 249.185 x 139.988 @ (299.274, 317.571)
   -------------------------------------------------------------------------- */
/* ★ 좌표를 프레임(327:1209, 239.317 x 546.941 @ 141.545/120)이 아니라
   실제 export 파일 기준으로 다시 잡았다. export 는 프레임이 아니라 그 안의
   디바이스 이미지(327:1211)가 카드 비주얼(690 x 520) 하단에 잘린 결과다
   → [실측] 149 x 314.
     left = 900.895 - 750(카드 x) = 150.895
     top  = 206.373
     w    = 148.378,  h = 520 - 206.373 = 313.627 (= 파일 314)
   이전에는 149 폭 파일을 239 로 1.6배 늘려 그리는 바람에 디바이스가 오른쪽으로
   퍼져 display2(아이콘 4개)와 겹쳤다. height 는 고정하지 않는다. */
.glopick__sec10-device2 {
  position: absolute;
  left: calc(150.895 * var(--glopick-unit));
  top: calc(206.373 * var(--glopick-unit));
  width: calc(148.378 * var(--glopick-unit));
  height: auto;
}
.glopick__sec10-display2 {
  position: absolute;
  left: calc(299.274 * var(--glopick-unit));
  top: calc(317.571 * var(--glopick-unit));
  width: calc(249.185 * var(--glopick-unit));
  height: calc(139.988 * var(--glopick-unit));
}

/* --------------------------------------------------------------------------
   10-3. 2가지 모드 카드 (327:1277)
      디바이스 2대 + 콜아웃(원형 5/3 minutes, 지시선, 미세 텍스트)이
      마스크·회전·블러로 얽혀 있어 CSS 재현 불가 → 327:1284 그룹 통짜 PNG.
      bbox 551 x 916 @ 카드기준 (65.165, -184)  ← 카드 위/아래로 잘려나감(overflow:hidden)
      카드 위에 얹히는 큰 카피 2개만 HTML 텍스트로 유지.
   -------------------------------------------------------------------------- */
.glopick__sec10-devices3 {
  position: absolute;
  left: calc(65.165 * var(--glopick-unit));
  /* ★ 실제 파일 sec10_card3_devices.png = 552 x 520 [실측].
     Figma 그룹(327:1284) 원본 bbox 는 551 x 916 @ (65.165, -184) 이지만,
     export 가 카드 비주얼 영역(690 x 520)에 이미 잘린 상태로 나왔다.
     → 잘린 이미지의 좌상단이 곧 카드 (65.165, 0) 이므로 top 은 0.
     height 는 고정하지 않는다(파일 비율 그대로 = 520). 고정하면 찌그러진다. */
  top: 0;
  width: calc(551 * var(--glopick-unit));
  height: auto;
}
/* "취향에 맞춰" (327:1282) / "선택도 쉽게" (327:1283)
   Onemobile Bold 36 / 1.3 / -0.36px(= -0.01em) @ y 241.5 */
.glopick__sec10-cap3a,
.glopick__sec10-cap3b {
  position: absolute;
  top: calc(241.5 * var(--glopick-unit));
  font-size: calc(36 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}
.glopick__sec10-cap3a { left: calc(35.004 * var(--glopick-unit)); }
.glopick__sec10-cap3b { left: calc(488.193 * var(--glopick-unit)); }

/* --------------------------------------------------------------------------
   10-4. 청소 알림 카드 (327:1333)
      디바이스 스크린샷 : 327:1340 PNG 271.772 x 480 @ 카드기준 (53.174, 69.988)
      카피 2블록 : 327:1338 (36 / 1.4 / -0.72px = -0.02em) @ (345, 172)
                   327:1339 (20 / 1.4 / -0.4px  = -0.02em) @ (345, 292)
                   ※ 두 블록 모두 Figma 상 ONE_Mobile_OTF:Bold 상속 (확인 필요)
   -------------------------------------------------------------------------- */
.glopick__sec10-screen4 {
  position: absolute;
  left: calc(53.174 * var(--glopick-unit));
  top: calc(69.988 * var(--glopick-unit));
  width: calc(271.772 * var(--glopick-unit));
  height: calc(480 * var(--glopick-unit));
  object-fit: cover;
}
.glopick__sec10-cap4a,
.glopick__sec10-cap4b {
  position: absolute;
  left: calc(345 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}
.glopick__sec10-cap4a {
  top: calc(172 * var(--glopick-unit));
  font-size: calc(36 * var(--glopick-unit));
}
.glopick__sec10-cap4b {
  top: calc(292 * var(--glopick-unit));
  font-size: calc(20 * var(--glopick-unit));
}

/* ---- 섹션 하단 각주 (327:1188) — NotoSans 14 / 1.4 / -0.02em @ (60, 1852) ---- */
.glopick__sec10-foot {
  position: absolute;
  left: calc(60 * var(--glopick-unit));
  top: calc(1852 * var(--glopick-unit));
  font-family: var(--font-en), "NotoSans", sans-serif;
  font-size: calc(14 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   11. 마무리 카피 — 1920 x 508 (327:1344)

   [배경] 327:1345 "bg" — 검정 위에 conic-gradient 를 회전/스케일 매트릭스로
          얹은 형태(원본 1920 x 1100, 섹션에서 508 로 클리핑)라 CSS 로 정확
          재현이 불가. 섹션 10 과 동일하게 노드 통짜 PNG 로 export 했다.
          export 실측 1920 x 508 (get_screenshot original 값). 100% 100% 로 채운다.
          Figma 원본 정의(참고용):
            matrix(-144.54 53.015 -112.28 -166.34 1223 618.14) 안의
            conic-gradient(from 90deg, #0b241b 0%, #144836 50%, #0b3123 62.5%,
                           #021911 75%, #0b241b 100%) / opacity 0.4
   -------------------------------------------------------------------------- */
.glopick__sec11 {
  position: relative;
  width: 100%;
  height: calc(508 * var(--glopick-unit));
  overflow: hidden;
  background: #000 url("/content/dam/glo-kr/mcs/images/glo_pick/260818/sec11_bg.png") no-repeat center top / 100% 100%;
  margin-bottom: -1px; /* 서브픽셀 반올림으로 흰 줄 비침 방지 (§2) */
}

/* 카피 블록 327:1347 — 1162 폭 @ x378.5(=1920 중앙) y150, 항목 간격 16 */
.glopick__sec11-txt {
  position: absolute;
  left: 50%;
  top: calc(150 * var(--glopick-unit));
  z-index: 1;
  width: calc(1162 * var(--glopick-unit));
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
}

/* 327:1348 — Onemobile Regular 28 / 1.5 / -0.02em (2줄 = 84px) */
.glopick__sec11-desc {
  font-size: calc(28 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* 327:1349 — 36 / 1.5 / -0.02em. 1줄 Regular + 2줄 Bold.
   위 간격 16 (flex gap 재현). ★ 리셋 `.glopick__wrap p { margin: 0 }`(0,0,1,1) 이
   클래스 1개(0,0,1,0)를 이기므로 반드시 .glopick__wrap 프리픽스 (CLAUDE.md §10) */
.glopick__wrap .glopick__sec11-lead {
  margin-top: calc(16 * var(--glopick-unit));
  font-size: calc(36 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.glopick__sec11-lead-b { font-weight: 700; }

/* 327:1350 — "+" Mont SemiBold 70 / #fe5000, 시안 좌표 x611 y328.78(세로 중심).
   컨테이너(378.5 / 150) 기준 → left 232.5 / top 178.78.
   시안에서는 두 번째 줄 앞의 공백 4칸 자리에 겹쳐 놓는 구조라 HTML 에도
   &nbsp; 4개를 그대로 두고 이 span 을 그 위에 절대배치한다. */
.glopick__sec11-plus {
  position: absolute;
  left: calc(232.5 * var(--glopick-unit));
  top: calc(178.78 * var(--glopick-unit));
  transform: translateY(-50%);
  font-family: var(--font-en), sans-serif;
  font-size: calc(70 * var(--glopick-unit));
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #fe5000;
}

/* --------------------------------------------------------------------------
   12. glo EVENT / 경품 안내 — 1920 x 1251 (327:1351)

   [배경] 327:1352 "Rectangle 2422" — 검정 위에 conic-gradient 를 회전/스케일
          매트릭스로 얹은 형태(mix-blend-multiply, Figma 상 회전이 걸려 있어
          metadata x/y 가 섹션 밖 값으로 나온다)라 CSS 로 정확 재현 불가.
          섹션 10/11 과 동일하게 노드 통짜 PNG 로 export 했다.
          export 실측 1920 x 1251 = 섹션 크기와 정확히 일치 → 100% 100% 로 채운다.
          Figma 원본 정의(참고용):
            matrix(-166.55 25.033 -48.854 -102.28 1119.7 603.26) 안의
            conic-gradient(from 90deg, #0d0d0d 0%, #081c15 50%,
                           #0d0d0d 75%, #0d0d0d 100%)
   -------------------------------------------------------------------------- */
.glopick__sec12 {
  position: relative;
  width: 100%;
  height: calc(1251 * var(--glopick-unit));
  overflow: hidden;
  isolation: isolate; /* 아래 경품 그림자의 mix-blend-mode 를 섹션 안으로 가둔다 */
  background: #000 url("/content/dam/glo-kr/mcs/images/glo_pick/260818/sec12_bg.png") no-repeat center top / 100% 100%;
  margin-bottom: -1px; /* 서브픽셀 반올림으로 흰 줄 비침 방지 (§2) */
}

/* 타이틀 로고 327:1384 — glo 심볼 83 x 58.362 @ (834, 110.59) [실측 필요],
   "EVENT" Mont SemiBold 52 / 1.5 / -0.02em @ x929, 세로중심 y139.
   EVENT 줄상자(52 x 1.5 = 78)를 기준으로 top 100, 심볼은 align-items:center 로 맞춘다.
   로고~EVENT 간격 12 (=929 - (834 + 83)) */
.glopick__sec12-logo {
  position: absolute;
  left: calc(834 * var(--glopick-unit));
  top: calc(100 * var(--glopick-unit));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--glopick-unit));
  height: calc(78 * var(--glopick-unit));
}
.glopick__sec12-logo img { width: calc(83 * var(--glopick-unit)); }
.glopick__sec12-logo span {
  font-family: var(--font-en), sans-serif;
  font-size: calc(52 * var(--glopick-unit));
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #fff;
}

/* 327:1383 — Onemobile Bold 52 / 1.5 / letter-spacing 0, 중앙정렬 @ y190 */
.glopick__sec12-title {
  position: absolute;
  left: 50%;
  top: calc(190 * var(--glopick-unit));
  transform: translateX(-50%);
  font-size: calc(52 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* 327:1382 — Onemobile Bold 28 / 1.5 / -0.02em, 2줄, 중앙정렬 @ y288 */
.glopick__sec12-desc {
  position: absolute;
  left: 50%;
  top: calc(288 * var(--glopick-unit));
  transform: translateX(-50%);
  font-size: calc(28 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* 이벤트 기간(327:1377) / 당첨자 발표(327:1372)
   두 줄 모두 x694 에서 시작(가운데 정렬 아님).
     라벨 : 694~809 (w115, 중심 751.5) Onemobile Bold 24 / 1.3 / -0.02em
     구분선: x829, h23
     날짜 : x849 Mont SemiBold 32 / 1.7
   행 자체 높이는 23 (기간 y422~445 / 발표 y475.08~498.08) 이고
   라벨·날짜는 행 세로중심(433.5 / 486.58)에 맞춘다. */
.glopick__sec12-info {
  position: absolute;
  left: calc(694 * var(--glopick-unit));
  height: calc(23 * var(--glopick-unit));
  color: #44ad6b;
}
.glopick__sec12-info--period { top: calc(422 * var(--glopick-unit)); }
.glopick__sec12-info--result { top: calc(475.08 * var(--glopick-unit)); }
.glopick__sec12-info dt {
  position: absolute;
  left: calc(57.5 * var(--glopick-unit)); /* 751.5 - 694 = 라벨 중심 */
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(24 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.glopick__sec12-info dd {
  position: absolute;
  left: calc(155 * var(--glopick-unit)); /* 849 - 694 */
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-en), sans-serif;
  font-size: calc(32 * var(--glopick-unit));
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
}
/* 구분선 327:1376 / 327:1381 — x829, 높이 23, 1px.
   ★ [확인필요] Figma 에서 0폭 stroke 라 색상값을 못 뽑았다. 시안 스크린샷상
     흐린 회색이라 rgba(255,255,255,0.3) 으로 잡아 둠. */
.glopick__sec12-bar {
  position: absolute;
  left: calc(-20 * var(--glopick-unit)); /* dd(849) 기준 829 위치 */
  top: 0;
  width: calc(1 * var(--glopick-unit));
  height: calc(23 * var(--glopick-unit));
  background: rgba(255, 255, 255, 0.3);
}

/* 경품 박스 327:1358 — 1195 x 440 / radius 20 / #262626 opacity .7 @ (363, 578.08) */
.glopick__sec12-box {
  position: absolute;
  left: calc(363 * var(--glopick-unit));
  top: calc(578.08 * var(--glopick-unit));
  width: calc(1195 * var(--glopick-unit));
  height: calc(440 * var(--glopick-unit));
  border-radius: calc(20 * var(--glopick-unit));
  background: rgba(38, 38, 38, 0.7);
}

/* 경품 그림자 327:1360 "sh" — 364.295 x 22.551 @ (1111.24, 947.5) [실측 필요]
   원본이 mix-blend-multiply 라 CSS 에서도 동일하게 합성한다. 제품 이미지보다 아래. */
.glopick__sec12-shadow {
  position: absolute;
  left: calc(1111.24 * var(--glopick-unit));
  top: calc(947.5 * var(--glopick-unit));
  width: calc(364.295 * var(--glopick-unit));
  mix-blend-mode: multiply;
}

/* 경품 이미지 327:1363 "미닉스 음식물 처리기 mini"
   332.816 x 392.01 @ (1037.5, 608.74) [실측 필요] */
.glopick__sec12-prize {
  position: absolute;
  left: calc(1037.5 * var(--glopick-unit));
  top: calc(608.74 * var(--glopick-unit));
  width: calc(332.816 * var(--glopick-unit));
}

/* 인원 뱃지 327:1364 — 원 140 x 140 @ (1258.23, 618.24), 안쪽 "1명"
   Mont Bold(숫자) + Onemobile Bold 45 / 0.93 / -0.02em, 흰색 */
.glopick__sec12-count {
  position: absolute;
  left: calc(1258.23 * var(--glopick-unit));
  top: calc(618.24 * var(--glopick-unit));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(140 * var(--glopick-unit));
  height: calc(140 * var(--glopick-unit));
  background: url("/content/dam/glo-kr/mcs/images/glo_pick/260818/sec12_badge.svg") no-repeat center / 100% 100%;
  font-size: calc(45 * var(--glopick-unit));
  font-weight: 700;
  line-height: 0.93;
  letter-spacing: -0.02em;
  color: #fff;
}

/* "경품 안내" 태그 327:1369 — 166.756 x 51.535 @ (500.31, 715.31)
   border 2.192 #44ad6b / radius 10 / Onemobile Bold 26 / 1.3 / -0.02em */
.glopick__sec12-tag {
  position: absolute;
  left: calc(500.31 * var(--glopick-unit));
  top: calc(715.31 * var(--glopick-unit));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(166.756 * var(--glopick-unit));
  height: calc(51.535 * var(--glopick-unit));
  border: calc(2.192 * var(--glopick-unit)) solid #44ad6b;
  border-radius: calc(10 * var(--glopick-unit));
  font-size: calc(26 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #44ad6b;
}

/* 경품명 327:1368 — Onemobile Bold 32 / 1.3 / -0.02em @ (500.5, 796.85), 2줄
   "mini" 는 Mont Bold 지정이지만 폰트 스택 1순위가 Mont 라 자동 적용된다 (§3) */
.glopick__sec12-gift {
  position: absolute;
  left: calc(500.5 * var(--glopick-unit));
  top: calc(796.85 * var(--glopick-unit));
  font-size: calc(32 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

/* 참여 버튼 327:1354 — 210 x 53 / radius 60 / #fe5000 @ (855.5, 1098.08)
   라벨 Onemobile Bold 20 / 1.3 / -0.02em */
.glopick__sec12-btn {
  position: absolute;
  left: calc(855.5 * var(--glopick-unit));
  top: calc(1098.08 * var(--glopick-unit));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(210 * var(--glopick-unit));
  height: calc(53 * var(--glopick-unit));
  border-radius: calc(60 * var(--glopick-unit));
  background: #fe5000;
  font-size: calc(20 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
}

/* 하단 고지 327:1353 — NotoSans Regular 14 / 1.3 / -0.02em @ (60, 1180)
   ★ [확인필요] Figma 지정 색이 #000 이라 검정 배경 위에서 거의 안 보인다.
     시안 그대로 옮겨 두었으니 흰색/회색으로 바꿀지 확인 필요. */
.glopick__sec12-note {
  position: absolute;
  left: calc(60 * var(--glopick-unit));
  top: calc(1180 * var(--glopick-unit));
  font-family: var(--font-en), "NotoSans", sans-serif;
  font-size: calc(14 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #000;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. 카카오톡 알림받기 / 목록으로 — 1920 x 592 (327:1391)
       배경이 두 덩어리(위 #f3f3f3 430 + 아래 #fff 162)라 요소를 더 만들지 않고
       세로 linear-gradient 의 색 정지점으로 한 번에 처리한다. 430 + 162 = 592 ✓
   -------------------------------------------------------------------------- */
.glopick__sec13 {
  position: relative;
  width: 100%;
  height: calc(592 * var(--glopick-unit));
  background: linear-gradient(
    to bottom,
    #f3f3f3 0,
    #f3f3f3 calc(430 * var(--glopick-unit)),
    #fff calc(430 * var(--glopick-unit)),
    #fff 100%
  );
  margin-bottom: -1px; /* 서브픽셀 반올림으로 흰 줄 비침 방지 (§2) */
}

/* 327:1394 — Onemobile Regular 42 / 1.5 / -0.02em, #191919, 2줄 중앙정렬.
   시안 텍스트 박스 610~1311 (w701) y100~226 → 세로 중심 163, top = 100 */
.glopick__sec13-txt {
  position: absolute;
  left: 50%;
  top: calc(100 * var(--glopick-unit));
  transform: translateX(-50%);
  font-size: calc(42 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #191919;
  text-align: center;
  white-space: nowrap;
}

/* 카카오 채널 버튼 327:1395 — 450 x 74 @ (735, 256) / bg #fae300
   내부 : CH 아이콘 42.134 x 38.47 + Onemobile Bold 22 / 1.2 / -0.02em, #391b1b
          좌우 여백 43.933, 아이콘~텍스트 간격 19
   (원본에 backdrop-blur 10.019 가 있으나 배경이 불투명 단색이라 시각 차이 없음 → 생략) */
.glopick__sec13-kakao {
  position: absolute;
  left: 50%; /* 735 + 450/2 = 960 = 1920 중앙 */
  top: calc(256 * var(--glopick-unit));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(19 * var(--glopick-unit));
  width: calc(450 * var(--glopick-unit));
  height: calc(74 * var(--glopick-unit));
  background: #fae300;
  font-size: calc(22 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #391b1b;
}
.glopick__sec13-kakao img { width: calc(42.134 * var(--glopick-unit)); }

/* 목록으로 버튼 327:1402 "btn_list" — 261 x 62 @ (830, 480)
   (830 + 261/2 = 960.5 ≒ 1920 중앙 / top = 430 + 50)
   border 2 rgba(0,0,0,.4) / radius 80 / bg rgba(255,255,255,.3)
   라벨 Onemobile Bold 22 / 1.2 / -0.02em, #000 */
.glopick__sec13-list {
  position: absolute;
  left: 50%;
  top: calc(480 * var(--glopick-unit));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(261 * var(--glopick-unit));
  height: calc(62 * var(--glopick-unit));
  border: calc(2 * var(--glopick-unit)) solid rgba(0, 0, 0, 0.4);
  border-radius: calc(80 * var(--glopick-unit));
  background: rgba(255, 255, 255, 0.3);
  font-size: calc(22 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #000;
}

/* --------------------------------------------------------------------------
   14. 유의사항 — 1920 x 770 (327:1404)
       공통 gp-notice 아코디언 (구조/스크립트는 CLAUDE.md §6, mcs_common.js).
       시안 실측
         상단바 327:1406 : 1920 x 120, #262626
           info 아이콘 327:1413 50 x 50 @ (238, 35)
           라벨 327:1414 NotoSans Bold 28 / -0.02em @ x321 (아이콘 우측에서 33)
           화살표 327:1407 50 x 50 @ (1643, 35)  → 우측 여백 1920-1693 = 227
         본문 327:1416 : 1920 x 650, #333, top 120
           좌측 여백 227.55
           "이벤트 유의사항" 블록 top 60 / 제목~목록 간격 24
           "경품 - ..." 블록 top 498  (앞 블록 끝 457.6 대비 약 40 띄움)
           제목 NotoSans Bold 28 / 1.2 / -0.02em, li NotoSans Regular 20 / 1.7 / -0.02em
           li 들여쓰기 30
       ※ 본문 높이는 아코디언이라 콘텐츠 기준으로 잡히므로 650 을 고정하지 않는다.
         (max-height 는 JS 가 scrollHeight 로만 제어 — 고정 px 금지, §6)
   -------------------------------------------------------------------------- */
.gp-notice {
  position: relative;
  width: 100%;
  font-family: var(--font-en, "Mont"), "NotoSans", sans-serif;
}
.gp-notice__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(120 * var(--glopick-unit));
  padding: 0 calc(227 * var(--glopick-unit)) 0 calc(238 * var(--glopick-unit));
  background: #262626;
}
.gp-notice__top-left {
  display: flex;
  align-items: center;
  gap: calc(33 * var(--glopick-unit)); /* 321 - (238 + 50) */
}
.gp-notice__icon { width: calc(50 * var(--glopick-unit)); }
.gp-notice__label {
  font-size: calc(28 * var(--glopick-unit));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.gp-notice__arrow {
  width: calc(50 * var(--glopick-unit));
  height: calc(50 * var(--glopick-unit));
  padding: 0;
  border: 0;
  cursor: pointer;
  background: url("/content/dam/glo-kr/mcs/images/glo_pick/260818/notice_arrow.svg") no-repeat center / 100% 100%;
  transition: transform 0.3s ease;
}
.gp-notice.is-closed .gp-notice__arrow { transform: rotate(180deg); }

/* 본문 — max-height 는 JS(scrollHeight)로만 제어, padding 은 상태 클래스로 분리 (§6) */
.gp-notice__bottom {
  overflow: hidden;
  background: #333;
  color: #fff;
  padding: 0 calc(227.55 * var(--glopick-unit));
  transition: max-height 0.5s ease, padding 0.5s ease;
}
.gp-notice:not(.is-closed) .gp-notice__bottom {
  padding-top: calc(60 * var(--glopick-unit));
  padding-bottom: calc(60 * var(--glopick-unit));
}

/* 제목 2종("이벤트 유의사항" / "경품 - ...") — 동일 크기.
   기본 : 아래 24 / --sub : 위 40, 아래 24
   ★ 반드시 `.glopick__wrap` 프리픽스를 붙일 것 (CLAUDE.md §10).
     리셋 `.glopick__wrap p { margin: 0 }` 는 (0,0,1,1) 이라 클래스 1개짜리
     `.gp-notice__title`(0,0,1,0) 을 이긴다 → 프리픽스가 없으면 margin 이
     통째로 무시된다(product_reg 에서 실제로 났던 버그). */
.glopick__wrap .gp-notice__title {
  margin: 0 0 calc(24 * var(--glopick-unit));
  font-size: calc(28 * var(--glopick-unit));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.glopick__wrap .gp-notice__title--sub {
  margin-top: calc(40 * var(--glopick-unit));
  margin-bottom: calc(24 * var(--glopick-unit));
}

/* ※ .glopick__wrap 프리픽스 필수 — 리셋 `.glopick__wrap ul { padding:0; list-style:none }`
   (0,0,1,1) 이 `.gp-notice__list`(0,0,1,0) 보다 특정도가 높아
   불렛/들여쓰기가 통째로 무시된다 (CLAUDE.md §10) */
.glopick__wrap .gp-notice__list {
  margin: 0;
  padding-left: calc(30 * var(--glopick-unit)); /* 시안 li margin-inline-start 30 */
  list-style: disc outside;
}
.gp-notice__list li {
  font-size: calc(20 * var(--glopick-unit));
  font-weight: 400;
  line-height: 1.7; /* 시안 20px / 34px */
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   9. 스크롤 리빌 (.reveal — mcs_common.js 가 is-visible 토글, CLAUDE.md §5)
      자체 transform 을 가진 요소는 범용 규칙에서 :not() 으로 제외하고,
      각자 transform 선언 안에 translateY(var(--glopick-rv)) 를 합성한다.
   -------------------------------------------------------------------------- */
.glopick__wrap .reveal {
  --glopick-rv: calc(40 * var(--glopick-unit));
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.glopick__wrap .reveal:not(.glopick__center) {
  transform: translateY(var(--glopick-rv));
}
.glopick__wrap .reveal.glopick__center {
  transform: translateX(-50%) translateY(var(--glopick-rv));
}
.glopick__wrap .reveal.is-visible {
  --glopick-rv: 0px;
  opacity: 1;
}

/* 순차 등장 딜레이 (0.05s 단위 재사용 클래스 — 인라인 style 금지, §5/§8) */
.glopick__wrap .fx__tran_05 { transition-delay: 0.05s; }
.glopick__wrap .fx__tran_10 { transition-delay: 0.1s; }
.glopick__wrap .fx__tran_15 { transition-delay: 0.15s; }
.glopick__wrap .fx__tran_20 { transition-delay: 0.2s; }
.glopick__wrap .fx__tran_25 { transition-delay: 0.25s; }
.glopick__wrap .fx__tran_30 { transition-delay: 0.3s; }
.glopick__wrap .fx__tran_35 { transition-delay: 0.35s; }
.glopick__wrap .fx__tran_40 { transition-delay: 0.4s; }


/* ==========================================================================
   10. 모바일 반응형 (MO 시안 375px 기준 — CLAUDE.md §10)
   --------------------------------------------------------------------------
   ★ MO 프레임은 750 이 아니라 375 기준이다 (Figma MO 327:1570 = 375 x 9858).
     따라서 단위는 100/375 = 0.266667vw 이고, 시안 px 값을 그대로 대입한다.
   ★ 브레이크포인트는 프로젝트 관례대로 750px.
   ★ img 토글 규칙은 리셋(.glopick__wrap img = 0,0,2,0)을 이기도록
     `.glopick__wrap img.클래스` 형태로 특정도를 올려 세트로 정의한다.
   ========================================================================== */
@media (max-width: 750px) {
  .glopick__wrap { --glopick-unit: 0.266667vw; } /* 375 기준 1px */

  /* PC/MO 토글 뒤집기 */
  .glopick__pc-only { display: none; }
  .glopick__wrap img.glopick__pc-only { display: none; }
  .glopick__mo-only { display: block; }
  .glopick__wrap img.glopick__mo-only { display: block; }
  .glopick__wrap br.glopick__pc-only,
  .glopick__wrap span.glopick__pc-only { display: none; }
  .glopick__wrap br.glopick__mo-only,
  .glopick__wrap span.glopick__mo-only { display: inline; }

  /* ==========================================================================
     [MO] 1. KV — 375 x 740  (Figma MO 327:1571)
     --------------------------------------------------------------------------
     ★ 이 파일은 @media 로 감싸지 않은 "안쪽 내용"만 담는다.
       부모가 @media (max-width: 750px) { --glopick-unit: 0.266667vw; ... } 로 감싼다.
     ★ 모든 수치는 MO 시안 375 기준 px 를 그대로 calc(N * var(--glopick-unit)) 에 대입.
     ★ 셀렉터는 PC 규칙(대부분 클래스 1개 = 0,0,1,0)을 확실히 이기도록
       `.glopick__wrap` 프리픽스를 붙여 0,0,2,0 이상으로 올린다. (CLAUDE.md §10)

     MO 시안 실측 (Figma 327:1571 / 375 x 740)
       배경        : linear-gradient(82.11639754859152deg, #44ad6b 2.0202%, #7bdaa8 105.58%)
                     → PC(67.4035deg / 1.688% / 125.29%) 와 값이 다르므로 반드시 재선언
       로고        : 327:1601  64 x 45.002       @ (25.65, 16.38)
       뱃지        : 327:1599  115 x 28          @ (131, 80)      radius 48.206
       타이틀      : 327:1597  312 x 80          @ (32, 122)      중앙정렬 2줄
       서브카피    : 327:1598  267 x 44          @ (55, 218)      중앙정렬 2줄
       사진 콜라주 : 327:1573  bbox 574.117 x 418.431 @ (-80.06, 285)
       하단 고지   : 327:1572  left 20 / bottom 20
     ========================================================================== */

  .glopick__wrap .glopick__kv {
    height: calc(740 * var(--glopick-unit));
    /* MO 375 기준 배경 그라디언트 (Figma 327:1571) — PC 와 각도/스톱이 다름 */
    background: linear-gradient(82.1164deg, #44ad6b 2.0202%, #7bdaa8 105.58%);
    /* overflow:hidden / margin-bottom:-1px 는 PC 규칙 그대로 유지 */
  }

  /* --- 사진 콜라주 (MO 전용 이미지) -----------------------------------------
     Figma 327:1573 의 그룹 bbox 는 574.117 x 418.431 @ (-80.06, 285) 이지만,
     Figma export 는 상위 프레임(375 폭) 밖을 잘라내므로 실제 파일은 375 x 418
     (get_screenshot original_width/height = 375 x 418 로 확인).
     → 잘린 이미지의 좌상단이 곧 섹션 (0, 285) 이 되므로 left 0 / top 285 / width 100%.
     ※ PC 용 kv_img.png 는 종횡비가 같은 같은 그룹이지만 PC 프레임(1920)에서 잘린
       1064 x 982 라 MO 에 재사용할 수 없다 → _m 파일 별도 필요. */
  .glopick__wrap .glopick__kv-img-m {
    position: absolute;
    left: 0;
    top: calc(285 * var(--glopick-unit)); /* MO 375 기준: top 285 (327:1573) */
    width: 100%;                          /* = 375 */
  }

  /* --- glo 로고 (PC 와 동일 SVG 재사용) --------------------------------------
     MO bbox 64 x 45.002 @ (25.65, 16.38).
     PC bbox 194 x 136.412 대비 64/194 = 45.002/136.412 = 0.3299 로 정확히 동일 비율
     → logo_glo.svg 그대로 쓰고 좌표/폭만 재선언한다. */
  .glopick__wrap .glopick__logo {
    left: calc(25.65 * var(--glopick-unit));
    top: calc(16.38 * var(--glopick-unit));
    width: calc(64 * var(--glopick-unit));
  }

  /* --- glo PICK 뱃지 ---------------------------------------------------------
     MO 375 기준: 115 x 28 @ (131, 80) / radius 48.206 / padding 7 30 4
     텍스트 : Mont SemiBold 14 / 1.2 / -0.28px(= -0.02em) / #44ad6b
     (131 + 115/2 = 188.5 ≒ 화면 중앙. transform 을 쓰면 .reveal 의 translateY 와
      충돌하므로 좌표 고정 방식을 유지한다 — CLAUDE.md §5) */
  .glopick__wrap .glopick__badge {
    left: calc(131 * var(--glopick-unit));
    top: calc(80 * var(--glopick-unit));
    width: calc(115 * var(--glopick-unit));
    height: calc(28 * var(--glopick-unit));
    /* ★ padding 금지 — 이 요소는 flex 중앙정렬 + 고정 폭(115) 이라
       box-sizing:border-box 상태에서 좌우 padding 30 을 주면 내용 폭이
       55 밖에 남지 않아 "glo PICK" 이 두 줄로 접혔다. Figma 의 패딩 값은
       텍스트 프레임 기준이므로 여기서는 무시하고 중앙정렬만 유지한다. */
    border-radius: calc(48.206 * var(--glopick-unit));
    font-size: calc(14 * var(--glopick-unit));
  }

  /* --- 타이틀 ----------------------------------------------------------------
     MO 375 기준: 312 x 80 @ (32, 122) / ONE_Mobile Bold 33 / 1.2 / -0.99px(= -0.03em)
     PC 는 left 240 좌측정렬, MO 는 화면 가운데정렬 → left 0 + width 100% + center.
     (translateX(-50%) 를 쓰지 않는 이유는 .reveal 의 translateY 합성 규칙 때문. §5) */
  .glopick__wrap .glopick__kv-title {
    left: 0;
    top: calc(122 * var(--glopick-unit));
    width: 100%;
    font-size: calc(33 * var(--glopick-unit));
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-align: center;
  }

  /* --- 서브 카피 -------------------------------------------------------------
     MO 375 기준: 267 x 44 @ (55, 218) / ONE_Mobile Regular 18 / 1.2 / -0.36px(-0.02em) */
  .glopick__wrap .glopick__kv-desc {
    left: 0;
    top: calc(218 * var(--glopick-unit));
    width: 100%;
    font-size: calc(18 * var(--glopick-unit));
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
  }

  /* --- 하단 고지 -------------------------------------------------------------
     MO 375 기준: left 20 / bottom 20 / NotoSans 10 / 1.3 / -0.2px(= -0.02em) */
  .glopick__wrap .glopick__kv-note {
    left: calc(20 * var(--glopick-unit));
    bottom: calc(20 * var(--glopick-unit));
    font-size: calc(10 * var(--glopick-unit));
    line-height: 1.3;
  }

  /* ==========================================================================
     [MO] 2. 인트로 (파동 BG + 디바이스) — 375 x 892  (Figma MO 327:1604)
     --------------------------------------------------------------------------
     ★ @media 로 감싸지 않은 "안쪽 내용"만. --glopick-unit 재정의는 부모가 담당.
     ★ 셀렉터에 `.glopick__wrap` 프리픽스를 붙여 PC 규칙(0,0,1,0)을 확실히 이긴다.

     MO 시안 실측 (Figma 327:1604 / 375 x 892)
       배경 BG      : 327:1605 — export 결과가 정확히 375 x 892 (섹션 크기와 동일)
                      → background 100% 100% 로 채운다. PC(1920x1322)와 종횡비가
                        완전히 달라(1.45 : 0.42) PC 이미지 재사용 불가 → _m 별도.
       브랜드 마크  : 327:1626  119.524 x 35.25 @ (128.672, 80)   ← PC 는 우상단, MO 는 중앙 상단
         - glo 심볼 : 327:1628  49.384 x 34.725 @ (128.672, 80)
         - "PICK"   : 327:1627  중심 (216.7, 98.75) / Mont SemiBold 27.56
       상단 리드    : 327:1625  310 x 66 @ (33, 135.25) / ONE_Mobile Regular 14 / 1.6 / -0.28px
                      → MO 는 3줄 (PC 는 2줄) — br 위치가 다르다 (sec_02.html 참고)
       디바이스     : 327:1623  bbox 445.715 x 515.019 @ (-29.1, 295.478)
                      export 는 프레임(375)에서 잘려 375 x 515
       하단 카피    : 327:1622  318 x 66 @ (29, 745.895) / ONE_Mobile **Bold** 16 / 1.4 / -0.32px
                      → MO 는 3줄 (PC 는 2줄)
     ========================================================================== */

  /* [공통] mo-only <br> 되살리기.
     기본 CSS 의 `.glopick__mo-only { display:none }` 은 br 에도 안전하게 먹지만,
     모바일에서 다시 켤 때는 block 이 아니라 inline 으로 되돌려야 br 이
     "빈 블록 박스"가 되어 줄이 하나 더 생기는 부작용을 확실히 피할 수 있다. */
  .glopick__wrap br.glopick__mo-only { display: inline; }

  .glopick__wrap .glopick__sec2 {
    height: calc(892 * var(--glopick-unit));
    /* MO 전용 배경 (327:1605 export = 375 x 892) */
    background: #0d0d0d url(/content/dam/glo-kr/mcs/images/glo_pick/260818/sec2_bg_m.png) no-repeat center top / 100% 100%;
    /* overflow:hidden / margin-bottom:-1px 은 PC 규칙 그대로 유지 */
  }

  /* --- 디바이스 (MO 전용 이미지) --------------------------------------------
     Figma 노드 bbox 는 445.715 x 515.019 @ (-29.1, 295.478) 이지만
     export 는 프레임(375 폭) 밖이 잘려 375 x 515
     (get_screenshot original_width/height = 375 x 515 로 확인).
     → 잘린 이미지의 좌상단이 섹션 (0, 295.478) → left 0 / width 100%.
     ※ PC 용 sec2_device.png 는 PC 프레임에서 하단이 잘린(1082x1115) 파일이라
       하단까지 다 보이는 MO 에는 쓸 수 없다 → _m 별도 필요. */
  .glopick__wrap .glopick__sec2-device-m {
    position: absolute;
    left: 0;
    top: calc(295.478 * var(--glopick-unit)); /* MO 375 기준: top 295.478 (327:1623) */
    width: 100%;                              /* = 375 */
    height: calc(515.019 * var(--glopick-unit));
  }

  /* --- 상단 리드 카피 --------------------------------------------------------
     MO 375 기준: top 135.25 (327:1625) / ONE_Mobile Regular 14 / 1.6 / -0.28px(-0.02em)
     가로 중앙정렬은 PC 와 동일하게 left:50% + .reveal.glopick__center 합성 transform 사용 */
  .glopick__wrap .glopick__sec2-lead {
    top: calc(135.25 * var(--glopick-unit));
    font-size: calc(14 * var(--glopick-unit));
    line-height: 1.6;
    letter-spacing: -0.02em;
  }

  /* --- 하단 메인 카피 --------------------------------------------------------
     MO 375 기준: top 745.895 (327:1622) / ONE_Mobile **Bold** 16 / 1.4 / -0.32px(-0.02em)
     ※ PC 는 1~2행 Regular + strong 만 Bold 였지만, MO 시안은 텍스트 노드 전체가
       ONE_Mobile_OTF:Bold 다. 색만 앞 2줄 #a0a0a0 / 마지막 줄 #fff 로 갈린다.
       → 여기서 font-weight 700 으로 올리고 strong 은 색만 담당하게 둔다. */
  .glopick__wrap .glopick__sec2-copy {
    top: calc(745.895 * var(--glopick-unit));
    font-size: calc(16 * var(--glopick-unit));
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
  }

  /* --- 우상단 → 중앙 상단으로 이동한 브랜드 마크 -----------------------------
     MO 375 기준: 119.524 x 35.25 @ (128.672, 80)  (327:1626)
     PC 는 right 기준 배치였으므로 right:auto 로 해제하고 left 로 다시 잡는다. */
  .glopick__wrap .glopick__sec2-brand {
    right: auto;
    left: calc(128.672 * var(--glopick-unit));
    top: calc(80 * var(--glopick-unit));
    width: calc(119.524 * var(--glopick-unit));
    height: calc(35.25 * var(--glopick-unit));
  }
  /* glo 심볼 — logo_glo_w.svg 재사용. MO 49.384 x 34.725
     (PC 83 x 58.362 대비 0.595 배로 종횡비 동일 → 같은 SVG) */
  .glopick__wrap .glopick__sec2-brand-logo {
    width: calc(49.384 * var(--glopick-unit));
  }
  /* "PICK" — Mont SemiBold 27.56 / 1.2 / -0.5512px(= -0.02em)
     Figma 는 중심 기준(cx 216.7, cy 98.75) → 브랜드 박스(left 128.672, top 80) 기준
     cx 88.03 / cy 18.75. transform: translate(-50%,-50%) 는 PC 규칙 그대로 유효. */
  .glopick__wrap .glopick__sec2-brand-pick {
    left: calc(88.03 * var(--glopick-unit));
    top: calc(18.75 * var(--glopick-unit));
    font-size: calc(27.56 * var(--glopick-unit));
  }

  /* ==========================================================================
     [MO] 3. 노하우 리스트 (5가지) — 375 x 696  (Figma MO 327:1633)
     --------------------------------------------------------------------------
     ★ @media 로 감싸지 않은 "안쪽 내용"만. --glopick-unit 재정의는 부모가 담당.
     ★ mo-only <br> 을 inline 으로 되살리는 공통 규칙은 sec_02_mo.css 상단에 1회 선언.

     MO 시안 실측 (Figma 327:1633 / 375 x 696)
       배경   : 327:1634
                linear-gradient(180deg, #0c0f0e 22.455%, #215c37 72.22%, #44ad6b 100%)
                → PC(10.925% / 57.583% / 100%) 와 스톱 위치가 달라 재선언 필요
       리드   : 327:1674  303 x 66 @ (36.5, 80)   ONE_Mobile **Regular** 14 / 1.6 / -0.28px
                → MO 3줄 (PC 2줄). PC 는 Bold(700) 였지만 MO 시안은 Regular(400)
       타이틀 : 327:1675  256 x 56 @ (59.5, 156)  ONE_Mobile Bold 20 / 1.4 / -0.4px
                → 줄바꿈 위치는 PC 와 동일 (2줄)
       카드   : 5장 모두 100 x 170 (PC 는 465 x 250 가로형 → MO 는 세로형 크롭이라
                PC 이미지 재사용 불가. 5장 모두 _m 별도 export)
                1F top 262 : left 24 / 137.502 / 251.004   (gap 13.502, 좌우 여백 24)
                2F top 446 : left 79.5 / 195.424           (gap 15.924)
       라벨   : ONE_Mobile Bold 12 / 1.3 / -0.24px / #fff / 카드 폭 기준 가운데
                1F y 339.589 → 카드(262) 기준 top 77.589
                2F y 523     → 카드(446) 기준 top 77       → 공통 77 로 통일
                단, 5번 카드("하이퍼 프로 플러스")만 MO 에서 2줄이라 top 69 로 올린다.
     ========================================================================== */

  .glopick__wrap .glopick__sec3 {
    height: calc(696 * var(--glopick-unit));
    /* MO 375 기준 배경 그라디언트 (Figma 327:1634) */
    background: linear-gradient(180deg, #0c0f0e 22.455%, #215c37 72.22%, #44ad6b 100%);
    /* margin-bottom:-1px 은 PC 규칙 그대로 유지 */
  }

  /* --- 리드 카피 -------------------------------------------------------------
     MO 375 기준: top 80 (327:1674) / 14 / 1.6 / -0.28px(-0.02em) / #a0a0a0
     ※ PC 는 Bold(700), MO 시안은 Regular(400) — weight 도 반드시 되돌린다. */
  .glopick__wrap .glopick__sec3-lead {
    top: calc(80 * var(--glopick-unit));
    font-size: calc(14 * var(--glopick-unit));
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.02em;
  }

  /* --- 타이틀 ----------------------------------------------------------------
     MO 375 기준: top 156 (327:1675) / ONE_Mobile Bold 20 / 1.4 / -0.4px(-0.02em) */
  .glopick__wrap .glopick__sec3-title {
    top: calc(156 * var(--glopick-unit));
    font-size: calc(20 * var(--glopick-unit));
    line-height: 1.4;
    letter-spacing: -0.02em;
  }

  /* --- 카드 공통 : MO 100 x 170 (세로형) ------------------------------------- */
  .glopick__wrap .glopick__sec3-card {
    width: calc(100 * var(--glopick-unit));
    height: calc(170 * var(--glopick-unit));
  }
  .glopick__wrap .glopick__sec3-card img {
    width: calc(100 * var(--glopick-unit));
    height: calc(170 * var(--glopick-unit));
    /* [추정] Figma 마스크가 SVG 라 radius 수치를 직접 못 읽었다. export PNG 자체에
       라운드가 이미 반영돼 있으므로 CSS radius 는 그보다 작게만 잡으면 안전하다.
       정확한 값이 확인되면 여기 한 곳만 고치면 된다. */
    border-radius: calc(8 * var(--glopick-unit));
  }

  /* --- 카드 라벨 : ONE_Mobile Bold 12 / 1.3 / -0.24px(-0.02em) --------------- */
  .glopick__wrap .glopick__sec3-card-label {
    top: calc(77 * var(--glopick-unit));
    font-size: calc(12 * var(--glopick-unit));
    line-height: 1.3;
    letter-spacing: -0.02em;
  }

  /* --- 1F : top 262 / left 24 · 137.502 · 251.004 (100 + gap 13.502) --------- */
  .glopick__wrap .glopick__sec3-card1 { left: calc(24 * var(--glopick-unit));      top: calc(262 * var(--glopick-unit)); } /* 전동커튼 */
  .glopick__wrap .glopick__sec3-card2 { left: calc(137.502 * var(--glopick-unit)); top: calc(262 * var(--glopick-unit)); } /* 스마트 전구 */
  .glopick__wrap .glopick__sec3-card3 { left: calc(251.004 * var(--glopick-unit)); top: calc(262 * var(--glopick-unit)); } /* 리모컨 허브 */

  /* --- 2F : top 446 / left 79.5 · 195.424 (100 + gap 15.924) ----------------- */
  .glopick__wrap .glopick__sec3-card4 { left: calc(79.5 * var(--glopick-unit));    top: calc(446 * var(--glopick-unit)); } /* 스마트 플러그 */
  .glopick__wrap .glopick__sec3-card5 { left: calc(195.424 * var(--glopick-unit)); top: calc(446 * var(--glopick-unit)); } /* 하이퍼 프로 플러스 */

  /* 5번 카드만 라벨이 2줄("하이퍼 프로 / 플러스")이라 1줄(12*1.3=15.6)만큼 위로 올려
     다른 카드 라벨과 세로 중심을 맞춘다. 77 - 15.6/2 ≒ 69 */
  .glopick__wrap .glopick__sec3-card5 .glopick__sec3-card-label {
    top: calc(69 * var(--glopick-unit));
  }

  /* ==========================================================================
     [MO 공통] STEP 섹션 4~7  —  MO 375 x 606
       MO 노드 : 327:1676(4) / 327:1697(5) / 327:1718(6) / 327:1740(7)
       대응 PC : 섹션 4~7 (1920 x 1105) — `.glopick__step*` 공통 클래스
     --------------------------------------------------------------------------
     ★ 여기가 STEP 4개 섹션의 MO 공통 규칙이다.
       sec_05_mo.css / sec_06_mo.css / sec_07_mo.css 에서는 이 블록을 절대 다시
       정의하지 말고 "공통 규칙은 sec_04_mo.css 참고" 주석 + 섹션별 차이만 남긴다.

     ▣ 좌우 배치 유지 (모디파이어 무력화 안 함)
       MO 도 PC 와 똑같이 사진과 카드가 좌우로 어긋난 오버랩 배치다.
       (위아래로 쌓이지 않는다 — 시안 327:1676/1697/1718/1740 확인함)
       좌우 배정도 PC 와 완전히 동일하므로 HTML 의 --left/--right 는 그대로 두고
       값만 375 기준으로 다시 잡는다.
         사진 : sec4·sec6 → left 0 / sec5·sec7 → left 65 (= 375 - 310)
         txt  : sec4·sec6 → left 91 / sec5·sec7 → left 24

     ▣ MO 공통 좌표 (Figma MO 375 x 606 섹션 기준)
       title 그룹 : left 50% / top 50 / w 302 / center, flex col gap 10
         - eyebrow  : ONE_Mobile 16 / 1.4 / -0.32px(= -0.02em) / #fe5000
                      + text-shadow 0 0 20 #8ee2ad   @ top 50
         - headline : ONE_Mobile Bold 24 / 1.4 / -0.48px(= -0.02em) / #fff
                      @ top 82.4 (= 50 + 16*1.4 + gap 10)
       사진      : 310 x 260 @ top 200      (PC 는 1300 x 700 @ top 405)
       txt 그룹  : top 380                  (PC 는 top 651 / w 580)
         - 번호      : Mont Bold 15.245 / 1.4 / #fff @ top 380 (h 21.34 → 401.34)
         - 카드      : 260 x 139 / radius 2.69 / #fff @ top 404.21 (= 401.34 + 2.87)
         - 카드타이틀 : ONE_Mobile Bold 12 / 1.4 / -0.48px(-0.04em) / #000
                       @ (107.05, 422.74) → 카드기준 (16.05, 18.53)
         - 본문 리스트 : ONE_Mobile Regular 11 / 1.8 / #000
                       구분선 그룹 @ (102.21, 447.39) w 237.586 h 80.287
                       → 카드기준 left 11.21 / top 43.18, 5줄 = li 4개 x 20.07 (80.287/4)
                       텍스트 들여쓰기 4.84 (= 107.05 - 102.21)
                       선 폭 237.586 = 카드260 - 11.21(좌) - 11.204(우) → 좌우 대칭
                       → width 대신 right:11.21 로 잡아 카드 폭이 다른 섹션 5(268)도 자동 대응
     ========================================================================== */

  /* --- 섹션 골격 ------------------------------------------------------------ */
  .glopick__wrap .glopick__step {
    height: calc(606 * var(--glopick-unit)); /* MO 375 x 606 */
  }

  /* --- 상단 카피 ------------------------------------------------------------ */
  /* eyebrow — 16 / 1.4 / -0.02em / #fe5000 @ top 50, glow 추가
     MO 는 PC 와 달리 eyebrow 쪽에 글로우(0 0 20 #8ee2ad)가 붙는다.
     [확인필요] Figma MO 의 eyebrow 는 ONE_Mobile "Regular"(400) 로 잡혀 있다
               (PC 는 Bold 700). 시안 렌더가 다소 두껍게 보이므로 700 이 의도일
               가능성도 있음 — 실기기 확인 후 필요하면 font-weight 만 700 으로 되돌린다. */
  .glopick__wrap .glopick__step-eyebrow {
    top: calc(50 * var(--glopick-unit));
    font-size: calc(16 * var(--glopick-unit));
    font-weight: 600; /* MO 시안은 Bold(700)·Regular(400) 가 아니라 SemiBold(600) */
    line-height: 1.4;
    text-shadow: 0 0 calc(20 * var(--glopick-unit)) #8ee2ad;
  }
  /* letter-spacing -0.32px / 16px = -0.02em → PC 와 동일하므로 재선언하지 않음 */

  /* headline — 24 / 1.4 / -0.02em / #fff @ top 82.4 */
  .glopick__wrap .glopick__step-title {
    top: calc(82.4 * var(--glopick-unit));
    font-size: calc(24 * var(--glopick-unit));
    line-height: 1.4;
  }
  /* MO 는 4개 섹션 모두 headline 에 글로우가 없다(글로우가 eyebrow 로 이동).
     → PC 의 --glow 모디파이어를 MO 에서 해제한다. */
  .glopick__wrap .glopick__step-title--glow {
    text-shadow: none;
  }

  /* --- 사진 (MO 전용 크롭 310 x 260, PC 1300 x 700 과 비율이 달라 별도 export) --- */
  .glopick__wrap .glopick__step-img {
    top: calc(200 * var(--glopick-unit));
    width: calc(310 * var(--glopick-unit));
    height: calc(260 * var(--glopick-unit));
  }
  /* --left 는 PC 와 동일하게 left:0 이므로 재선언하지 않는다 */
  .glopick__wrap .glopick__step-img--right {
    left: calc(65 * var(--glopick-unit)); /* 375 - 310 */
  }

  /* --- 번호 + 카드 묶음 ------------------------------------------------------ */
  .glopick__wrap .glopick__step-txt {
    top: calc(380 * var(--glopick-unit));
    width: auto; /* 폭은 카드가 결정 (섹션 5 만 268, 나머지 260) */
  }
  .glopick__wrap .glopick__step-txt--left  { left: calc(24 * var(--glopick-unit)); }
  .glopick__wrap .glopick__step-txt--right { left: calc(91 * var(--glopick-unit)); }

  /* 번호 — Mont Bold 15.245 / 1.4 / #fff */
  .glopick__wrap .glopick__step-num {
    font-size: calc(15.245 * var(--glopick-unit));
  }

  /* 카드 이미지 — 260 x 139 @ top 404.21 (번호 하단 401.34 + 2.87)
     MO 원본 : 섹션4 327:1683 / 섹션5 327:1704(268 폭) / 섹션6 327:1725 / 섹션7 327:1747 */
  .glopick__wrap .glopick__step-card {
    margin-top: calc(2.87 * var(--glopick-unit));
    width: calc(260 * var(--glopick-unit));
    height: auto;
  }

  /* ==========================================================================
     4. STEP 01 전동커튼 — MO 375 x 606 (327:1676)
        배경   : linear-gradient(180deg, #44ad6b 0%, #7bdaa8 100%) — PC 와 동일 → 재선언 없음
        좌우   : 사진 left 0 (--left) / txt left 91 (--right) — PC 와 동일 배정
        카드폭 : 260 (공통값)
        줄바꿈 : headline 2줄 / 본문 4줄 모두 PC 와 동일 → HTML 텍스트 변경 없음
        → 결과적으로 섹션 4 고유의 MO 오버라이드는 없다(공통 규칙만으로 완성).
     ========================================================================== */

  /* ==========================================================================
     5. STEP 02 스마트 전구 — MO 375 x 606 (327:1697)
        ★ STEP 섹션 MO 공통 규칙(.glopick__step*)은 sec_04_mo.css 상단 참고.
          여기서는 섹션 5 고유 차이만 정의한다(중복 정의 금지).

        · 배경 #7bdaa8 — PC 와 동일 → 재선언 없음
        · 사진 left 65(--right) / txt left 24(--left) — PC 좌우 배정과 동일 → 공통값 사용
        · Figma 원본은 img top 201 / txt top 381 로 잡혀 있으나 다른 섹션(200/380)과의
          1px 차이는 시안 반올림 오차로 판단해 공통값(200/380)에 맞춘다.
     ========================================================================== */

  /* 카드만 폭이 넓다 — 268 (다른 3개 섹션은 260). 본문 1행이 길어 시안에서 넓혀 잡음.
     MO 327:1704 : 268 x 139 @ (24, 405) */
  .glopick__wrap .glopick__sec5 .glopick__step-card {
    width: calc(268 * var(--glopick-unit));
  }

  /* headline 줄바꿈도 다르다 (PC 2줄 / MO 3줄, MO 327:1717)
       PC : "아침을 열었다면, / 이제 하루의 온도를 맞출 차례입니다."
       MO : "아침을 열었다면, / 이제 하루의 온도를 / 맞출 차례입니다."
     → HTML 에 <br class="glopick__mo-only"> 추가. br 은 공통 플립이 display:block 으로
       바꿔도 줄바꿈은 되지만, 예기치 않은 박스 생성을 막기 위해 inline 으로 고정한다. */
  .glopick__wrap .glopick__step-title br.glopick__mo-only { display: inline; }

  /* ==========================================================================
     6. STEP 03 리모컨 허브 — MO 375 x 606 (327:1718)
        ★ STEP 섹션 MO 공통 규칙(.glopick__step*)은 sec_04_mo.css 상단 참고.
          여기서는 섹션 6 고유 차이만 정의한다(중복 정의 금지).

        · 배경 #7bdaa8 — PC 와 동일 → 재선언 없음
        · 사진 left 0(--left) / txt left 91(--right) — PC 좌우 배정과 동일 → 공통값 사용
        · 카드 260 x 139 @ (91, 404.21) — 공통값 그대로
        · headline 2줄 / 본문 4줄 모두 PC 와 동일 → HTML 텍스트 변경 없음
        · 사진은 PC(1300x700)와 크롭이 달라 MO 전용 export 필요 (327:1720, 이미지 2장 합성)
     ========================================================================== */

  /* ==========================================================================
     7. STEP 04 스마트 플러그 — MO 375 x 606 (327:1740)
        ★ STEP 섹션 MO 공통 규칙(.glopick__step*)은 sec_04_mo.css 상단 참고.
          여기서는 섹션 7 고유 차이만 정의한다(중복 정의 금지).

        · 배경 linear-gradient(180deg, #7bdaa8 37.981%, #44ad6b 100%) — PC 와 동일 → 재선언 없음
        · 사진 left 65(--right) / txt left 24(--left) — PC 좌우 배정과 동일 → 공통값 사용
        · 카드 260 x 139 @ (24, 404.21) — 공통값 그대로
        · headline 2줄 / 본문 4줄 모두 PC 와 동일 → HTML 텍스트 변경 없음
     ========================================================================== */

  /* ==========================================================================
     MO 08. 메시지 밴드 — 375 x 300 (Figma MO 327:1761)
     ※ 이 파일은 @media (max-width:750px) { } 안쪽 내용만 담는다. (부모가 감쌈)
     ※ --glopick-unit 재정의(0.266667vw = 100/375)도 부모가 이미 넣는다.

     [배경] MO 프레임 fill 최상단 = solid #44ad6b → PC 와 동일. 변경 없음.
     [텍스트 블록] 327:1762 : left 1 / w 374 / top 50% + translateY(-50%)
          flex-col gap 9.245, items-center
          lead 2줄 (20 * 1.5 = 30 x 2 = 60) + gap 9.245 + desc 3줄 (12 * 1.5 = 18 x 3 = 54)
          = 블록 높이 123.245 → top = 150 - 123.245/2 = 88.3775
          → lead top 88.3775 / desc top 88.3775 + 60 + 9.245 = 157.6225
          (PC 와 동일하게 left:50% + translateX(-50%) 인 .glopick__center 로 중앙 정렬)
     ========================================================================== */
  .glopick__sec8 {
    height: calc(300 * var(--glopick-unit)); /* MO 375 기준 h 300 */
  }

  /* MO 327:1763 — ONE Mobile 20 / 1.5 / -0.8px(= -0.04em)
     ※ PC 는 -0.02em 이었으나 MO 는 -0.04em 이라 반드시 재선언한다.
     줄바꿈 위치는 PC 와 동일(2줄) → <br> 추가 불필요 */
  .glopick__sec8-lead {
    top: calc(88.3775 * var(--glopick-unit));
    font-size: calc(20 * var(--glopick-unit));
    letter-spacing: -0.04em;
  }

  /* MO 327:1764 — ONE Mobile 12 / 1.5 / -0.24px(= -0.02em, PC 와 동일해 재선언 생략)
     MO 는 3줄(PC 2줄) → HTML 에 <br class="glopick__mo-only"> 2개 추가 (sec_08.html 참고) */
  .glopick__sec8-desc {
    top: calc(157.6225 * var(--glopick-unit));
    font-size: calc(12 * var(--glopick-unit));
  }

  /* ==========================================================================
     MO 09. 제품 KV — 375 x 699 (Figma MO 327:1765)
     ※ 이 파일은 @media (max-width:750px) { } 안쪽 내용만 담는다. (부모가 감쌈)

     [배경] MO 프레임 fill 최상단 = solid #44ad6b (PC 의 #2f7f4f 근사색과 다름 → 재선언).
            사진 묶음 327:1766 "img" 그룹을 통짜 PNG 로 별도 export (sec09_kv_bg_m.png).
            get_screenshot 실측 bbox = 375 x 699 (마스크가 프레임 전체를 덮음).
            상단 약 40.8px 는 투명이라 그 아래 섹션 배경색(#44ad6b)이 그대로 보인다.
            → PC 용 배경 img 와 소스가 다르므로 pc-only / mo-only 로 분리 (sec_09.html)

     [로고 락업] MO 327:1774 그룹 = PC 327:1150 락업을 정확히 0.42166배 축소한 것.
            검증: MO 락업 그룹 260.416 x 86.278 / PC 617.598 x 204.612
                  260.416 / 617.598 = 0.42166, 86.278 / 204.612 = 0.42166 ✓
                  내부 행 높이(31.509 / 45.501) + gap 9.268 도 동일 비율로 일치 ✓
            → 새 SVG 불필요. sec09_lockup.svg 를 그대로 쓰고 크기/좌표만 재선언한다.

     [뱃지 "현명한 선택"] MO 327:1800 : 114 x 25.029 @ (236, 25)
            PC 337.049 x 74 → 종횡비 4.555 로 동일 → sec09_badge.svg 재사용.

     [아이콘] MO 327:1772 : 28 x 28 @ (259.8, 206.3) → sec09_icon_quickstart.svg 재사용.
     ========================================================================== */
  .glopick__sec9 {
    height: calc(699 * var(--glopick-unit)); /* MO 375 기준 h 699 */
    background: #44ad6b;                     /* MO 프레임 fill(최상단 solid #44ad6b) */
  }

  /* MO 전용 배경 — sec09_kv_bg_m.png (327:1766 export @2x, 실제 파일 750 x 1398)
     CSS 는 375 기준 px 로 지정한다. 좌표 (0, 0) / 375 x 699 */
  .glopick__sec9 .glopick__sec9-bg--m {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(375 * var(--glopick-unit));
    height: calc(699 * var(--glopick-unit));
  }

  /* MO 327:1800 — 114 x 25.029 @ (236, 25) */
  .glopick__sec9-badge {
    left: calc(236 * var(--glopick-unit));
    top: calc(25 * var(--glopick-unit));
    width: calc(114 * var(--glopick-unit));
    height: calc(25.029 * var(--glopick-unit));
  }

  /* MO 327:1774 "title" — 260.418 x 134.813 @ (25.898, 100)
     PC 와 같은 sec09_lockup.svg 한 장으로 락업 + 서브카피까지 모두 처리한다.
     검증: 260.418 / 617.598 = 0.42166, 134.813 / 319.569 = 0.42186 → 사실상 동일 비율.
     내부 서브카피(327:1799)는 SVG 안에서 local x 0 이므로 락업과 좌측 정렬이
     자동으로 맞는다. height 는 고정하지 않는다(고정하면 세로로 찌그러진다). */
  .glopick__sec9-lockup {
    left: calc(25.898 * var(--glopick-unit));
    top: calc(100 * var(--glopick-unit));
    width: calc(260.418 * var(--glopick-unit));
    height: auto;
  }

  /* MO 327:1772 — 28 x 28 @ (259.8, 206.3) */
  .glopick__sec9-icon {
    left: calc(259.8 * var(--glopick-unit));
    top: calc(206.3 * var(--glopick-unit));
    width: calc(28 * var(--glopick-unit));
    height: calc(28 * var(--glopick-unit));
  }

  /* MO 327:1770 — Noto Sans 10 / 1.25 / -0.3px(= -0.03em) @ left 24 / bottom 13 */
  .glopick__sec9-note {
    left: calc(24 * var(--glopick-unit));
    bottom: calc(13 * var(--glopick-unit));
    font-size: calc(10 * var(--glopick-unit));
    line-height: 1.25;
    letter-spacing: -0.03em;
  }

  /* ==========================================================================
     MO 10. 4-업 피처 카드 — 375 x 1788 (Figma MO 327:1801)
     ※ 이 파일은 @media (max-width:750px) { } 안쪽 내용만 담는다. (부모가 감쌈)

     [레이아웃 요약]
       PC : 1440 그리드 2열 x 2행 (셀 690 x 766, col-gap 60 / row-gap 100)
       MO : 327:1802 "list" = left 24.5 / top 80 / w 326 / flex-col gap 50 → 1열 4행

     [카드 스케일] MO 카드 비주얼 326 x 245.681 = PC 690 x 520 의 0.47246배
       (326/690 = 0.47246, 520 x 0.47246 = 245.68 ✓ 종횡비 동일)
       카드 내부 이미지 좌표도 전부 정확히 0.47246배라서 PC 이미지 자산을 그대로 재사용한다.
         card1 photo : PC(-19.986,-292.097,739.974,1416.605) x0.47246
                       = MO(-9.443,-138.005,349.611,669.295) ✓ (327:1806 실제값과 일치)
         card2 device: PC(141.545,120,239.317,546.941) x0.47246
                       = MO(66.87,56.7,113.069,258.41)  ✓
         card2 display:PC(299.274,317.571,249.185,139.988) x0.47246
                       = MO(141.396,150.041,117.731,66.139) ✓
         card4 screen: PC(53.174,69.988,271.772,480) x0.47246
                       = MO(25.123,33.067,128.402,226.783) ✓
       ★ 예외 : card3 디바이스+콜아웃 묶음(327:1897)만 MO 에서 구성이 달라
         (콜아웃 텍스트가 상대적으로 커져 bbox 가 왼쪽으로 확장) 별도 PNG 를 export 한다.
         MO bbox 287 x 433 @ (15.787, -86.933)  ← get_screenshot 실측
         PC 는 551 x 916 @ (65.165, -184) 이므로 단순 축소가 아님. (sec10_card3_devices_m.png)

     [카드 높이] 269.3(txt top) + 41.58(desc 오프셋) + 54(12 x 1.5 x 3줄) = 364.88
       - 비주얼 245.681 → txt 까지 gap 23.62 (= PC 50 x 0.47246 ✓)
       - title top 269.3 / desc top 269.3 + 41.58 = 310.88 (PC 570 / 658 x 0.47246 ✓)
     [카드 top] 0 / 414.88 / 829.76 / 1244.64  (364.88 + gap 50)
       list 높이 = 1244.64 + 364.88 = 1609.52 → 80 + 1609.52 = 1689.52

     [배경] MO 프레임 fill = 검정 + conic-gradient(회전 매트릭스, opacity 0.4).
       MO 에는 bg 전용 자식 노드가 없어 단독 export 가 불가능하다.
       PC 의 sec10_bg.png 가 이미 `/ 100% 100%` 로 늘어나므로 그대로 재사용한다(추가 자산 없음).
       ※ 1920x1932 → 375x1788 로 늘어나 글로우 방향이 달라진다. 거의 검정에 가까운
         텍스처라 육안 차이는 미미하지만, 정확히 맞추려면 Figma 에 MO bg 레이어를
         따로 만들어 export 해야 한다. (확인 필요)
     ========================================================================== */
  .glopick__sec10 {
    height: calc(1788 * var(--glopick-unit)); /* MO 375 기준 h 1788 */
  }

  /* ---- 327:1802 list : left 24.5 / top 80 / w 326 / h 1609.52 (1열 4행) ---- */
  .glopick__sec10-list {
    left: calc(24.5 * var(--glopick-unit));
    top: calc(80 * var(--glopick-unit));
    width: calc(326 * var(--glopick-unit));
    height: calc(1609.52 * var(--glopick-unit));
  }

  /* ---- 카드 셀 326 x 364.88, 1열 스택 (row gap 50) ---- */
  .glopick__sec10-item {
    width: calc(326 * var(--glopick-unit));
    height: calc(364.88 * var(--glopick-unit));
  }
  .glopick__sec10-item1 { left: 0; top: 0; }
  .glopick__sec10-item2 { left: 0; top: calc(414.88 * var(--glopick-unit)); }  /* 364.88 + 50 */
  .glopick__sec10-item3 { left: 0; top: calc(829.76 * var(--glopick-unit)); }
  .glopick__sec10-item4 { left: 0; top: calc(1244.64 * var(--glopick-unit)); }

  /* ---- 카드 비주얼 326 x 245.681 (radius 20 x 0.47246 = 9.449) ---- */
  .glopick__sec10-visual {
    width: calc(326 * var(--glopick-unit));
    height: calc(245.681 * var(--glopick-unit));
    border-radius: calc(9.449 * var(--glopick-unit));
  }

  /* ---- 카드 헤드 327:1808 / 327:1882 : top 18.899 (= PC 40 x 0.47246), 폭 전체 중앙정렬 ---- */
  .glopick__sec10-head {
    top: calc(18.899 * var(--glopick-unit));
    width: calc(326 * var(--glopick-unit));
  }
  /* 아이콘 : 1번 24 x 24 (327:1809) / 2번 57.6 x 24 (327:1883 실측 58 x 24, PC 120x50 종횡비 2.4 유지) */
  .glopick__sec10-icon  { height: calc(24 * var(--glopick-unit)); }
  .glopick__sec10-icon1 { width:  calc(24 * var(--glopick-unit)); }
  .glopick__sec10-icon2 { width:  calc(57.6 * var(--glopick-unit)); }

  /* 라벨 327:1811 — Mont Bold 14 / 1.4 / -0.14px(= -0.01em, PC 와 동일해 생략)
     아이콘과의 gap 5.67 (327:1808 flex gap) */
  .glopick__sec10-head .glopick__sec10-label {
    margin-top: calc(5.67 * var(--glopick-unit));
    font-size: calc(14 * var(--glopick-unit));
  }
  /* 헤드라인 327:1812 — ONE Mobile Bold 18 / 1.3 / -0.18px(= -0.01em, 생략)
     라벨 top 기준 +20.79 → 라벨 높이(14 x 1.4 = 19.6) 빼고 margin 1.19 */
  .glopick__sec10-head .glopick__sec10-headline {
    margin-top: calc(1.19 * var(--glopick-unit));
    font-size: calc(18 * var(--glopick-unit));
  }
  /* 헤드라인 끝 별표 11.61 */
  .glopick__sec10-ast { font-size: calc(11.61 * var(--glopick-unit)); }

  /* ---- 카드 내부 각주 327:1807 / 327:1894 — Noto Sans 8 / 1.3 / -0.16px(= -0.02em, 생략)
          @ (9.449, 226.728)  = PC (20, 482) x 0.47246 ---- */
  .glopick__sec10-cardnote {
    left: calc(9.449 * var(--glopick-unit));
    top: calc(226.728 * var(--glopick-unit));
    font-size: calc(8 * var(--glopick-unit));
  }

  /* ---- 카드 하단 텍스트 ---- */
  /* 타이틀 327:1814 등 — ONE Mobile Bold 23 / 1.3 / -0.46px(= -0.02em, 생략) @ top 269.3 */
  .glopick__sec10-title {
    top: calc(269.3 * var(--glopick-unit));
    width: calc(326 * var(--glopick-unit));
    font-size: calc(23 * var(--glopick-unit));
  }
  /* 디스크립션 327:1815 등 — ONE Mobile 12 / 1.5 / -0.48px(= -0.04em, 생략)
     top = 269.3 + 41.58 = 310.88. 줄바꿈 위치는 PC 와 동일(3줄) → <br> 추가 불필요 */
  .glopick__sec10-desc {
    top: calc(310.88 * var(--glopick-unit));
    width: calc(326 * var(--glopick-unit));
    font-size: calc(12 * var(--glopick-unit));
  }

  /* ---- 10-1. QuickStart 카드 사진 327:1806 : (-9.443, -138.005) 349.611 x 669.295 ---- */
  .glopick__sec10-photo1 {
    left: calc(-9.443 * var(--glopick-unit));
    top: calc(-138.005 * var(--glopick-unit));
    width: calc(349.611 * var(--glopick-unit));
    height: calc(669.295 * var(--glopick-unit));
  }

  /* ---- 10-2. EasyView 카드 ----
     디바이스 327:1820 그룹 : (66.87, 56.7) 113.069 x 258.41
     디스플레이 327:1825    : (141.396, 150.041) 117.731 x 66.139 */
  /* ★ MO 도 PC 와 같은 sec10_card2_device.png(149 x 314) 를 재사용 중이다.
     Figma MO 그룹(327:1820)은 카드 비주얼(246)에 잘려 113.069 x 189.3 이어야
     정확하지만 PC 크롭을 쓰는 한 비율이 다르다. w/h 를 둘 다 고정하면
     찌그러지므로 폭만 주고 비율은 파일에 맡긴다.
     정확히 맞추려면 327:1820 을 sec10_card2_device_m.png 로 별도 export 필요. */
  .glopick__sec10-device2 {
    left: calc(66.87 * var(--glopick-unit));
    top: calc(56.7 * var(--glopick-unit));
    width: calc(113.069 * var(--glopick-unit));
    height: auto;
  }
  .glopick__sec10-display2 {
    left: calc(141.396 * var(--glopick-unit));
    top: calc(150.041 * var(--glopick-unit));
    width: calc(117.731 * var(--glopick-unit));
    height: calc(66.139 * var(--glopick-unit));
  }

  /* ---- 10-3. 2가지 모드 카드 ----
     MO 전용 통짜 PNG(327:1897 export @2x → sec10_card3_devices_m.png, 실제 파일 574 x 866)
     CSS 는 375 기준 px : (15.787, -86.933) 287 x 433
     ※ PC 자산(551 x 916)과 구성이 달라 재사용 불가 → pc-only / mo-only 로 분리 */
  /* ★ [실측] 574 x 492 (= @2x of 287 x 246).
     Figma 그룹(327:1897)은 287 x 433 @ (15.787, -86.933) 이지만 export 가
     카드 비주얼 높이(246)에 이미 잘려 나왔다 → 잘린 좌상단이 곧 (15.787, 0).
     w/h 를 둘 다 고정하면(287 x 433) 세로로 늘어나 뭉개진다 → height 해제. */
  .glopick__sec10 .glopick__sec10-devices3--m {
    left: calc(15.787 * var(--glopick-unit));
    top: 0;
    width: calc(287 * var(--glopick-unit));
    height: auto;
  }
  /* "취향에 맞춰"(327:1895) / "선택도 쉽게"(327:1896)
     ONE Mobile Bold 18 / 1.3 / -0.18px(= -0.01em, 생략) @ top 114.101 */
  .glopick__sec10-cap3a,
  .glopick__sec10-cap3b {
    top: calc(114.101 * var(--glopick-unit));
    font-size: calc(18 * var(--glopick-unit));
  }
  .glopick__sec10-cap3a { left: calc(13.537 * var(--glopick-unit)); }
  .glopick__sec10-cap3b { left: calc(227.654 * var(--glopick-unit)); }

  /* ---- 10-4. 청소 알림 카드 ----
     스크린샷 327:1952 : (25.123, 33.067) 128.402 x 226.783
     카피 327:1950 : 18 / 1.4 / -0.36px(= -0.02em, 생략) @ (163, 81.265)
          327:1951 : 10 / 1.4 / -0.2px (= -0.02em, 생략) @ (163, 137.965 = 81.265 + 56.7) */
  .glopick__sec10-screen4 {
    left: calc(25.123 * var(--glopick-unit));
    top: calc(33.067 * var(--glopick-unit));
    width: calc(128.402 * var(--glopick-unit));
    height: calc(226.783 * var(--glopick-unit));
  }
  .glopick__sec10-cap4a,
  .glopick__sec10-cap4b {
    left: calc(163 * var(--glopick-unit));
  }
  .glopick__sec10-cap4a {
    top: calc(81.265 * var(--glopick-unit));
    font-size: calc(18 * var(--glopick-unit));
  }
  .glopick__sec10-cap4b {
    top: calc(137.965 * var(--glopick-unit));
    font-size: calc(10 * var(--glopick-unit));
  }

  /* ---- 섹션 하단 각주 327:1956 — Noto Sans 10 / 1.25 / -0.3px(= -0.03em)
          @ left 24 / bottom 20 (PC 는 top 1852 지정이라 top: auto 로 반드시 해제)
          MO 는 3줄 → HTML 에 <br class="glopick__mo-only"> 1개 추가 (sec_10.html 참고) ---- */
  .glopick__sec10-foot {
    left: calc(24 * var(--glopick-unit));
    top: auto;
    bottom: calc(20 * var(--glopick-unit));
    font-size: calc(10 * var(--glopick-unit));
    line-height: 1.25;
    letter-spacing: -0.03em;
  }

  /* ==========================================================================
     11. 마무리 카피 — MO 375 x 300 (Figma 327:1957)
         PC 1920 x 508 (327:1344) 대응. 좌표/폰트는 전부 375 기준 재선언.

     [배경] MO 프레임 자체의 fill 이 conic-gradient + 회전/스케일 매트릭스라
       PC 처럼 "bg" 자식 노드가 따로 없다 → MCP 로 배경만 단독 export 가 불가능.
       그래서 PNG 대신 Figma 매트릭스를 CSS conic-gradient 로 환산해서 넣었다.

       Figma 원본:
         matrix(-28.231 14.459 -21.93 -45.365 238.88 168.58) 안의
         conic-gradient(from 90deg, #0b241b 0%, #144836 50%, #0b3123 62.5%,
                        #021911 75%, #0b241b 100%) / opacity 0.4  (배경색 #000)

       환산 방법 : conic-gradient 는 "중심점 + 각도"만의 함수라 스케일 불변이다.
         gradient 공간의 파라미터 t 에 대응하는 방향벡터 v(t) = (sin(90+360t), -cos(90+360t))
         를 매트릭스 선형부 A=[[a,c],[b,d]] 로 보낸 뒤 화면 각도 β(t)=atan2(x,-y) 를 구해,
         그 β 를 새 stop 위치로 쓰면 동일한 그림이 된다.
         t 를 1/16 간격으로 16등분해 각 지점의 보간색을 그대로 stop 으로 박았다.
         중심점 (238.88, 168.58) 은 매트릭스의 (e, f) 그대로.
         opacity 0.4 는 배경색이 순수 #000 이므로 각 stop 색의 alpha 로 흡수했다.
       ★ [확인필요] 실기기에서 PC 시안 대비 색감이 맞는지 눈으로 한 번 볼 것.
         어긋나면 Figma 에서 텍스트 레이어를 끄고 375x300(@2x) 로 export 한
         sec11_bg_m.png 로 교체하면 된다(그때는 background-image 만 갈아끼우면 됨).
     ========================================================================== */
  .glopick__sec11 {
    height: calc(300 * var(--glopick-unit));
    /* background-color(#000) / size(100% 100%) / no-repeat 는 PC 선언 그대로 사용 */
    background-image: conic-gradient(
      from 242.88deg at calc(238.88 * var(--glopick-unit)) calc(168.58 * var(--glopick-unit)),
      rgba(11, 36, 27, 0.4) 0%,
      rgba(12, 40, 30, 0.4) 9.37%,
      rgba(13, 45, 34, 0.4) 16.32%,
      rgba(14, 50, 37, 0.4) 21.28%,
      rgba(16, 54, 40, 0.4) 25.37%,
      rgba(17, 58, 44, 0.4) 29.4%,
      rgba(18, 63, 47, 0.4) 34.2%,
      rgba(19, 68, 51, 0.4) 40.85%,
      rgba(20, 72, 54, 0.4) 50%,
      rgba(16, 60, 44, 0.4) 59.37%,
      rgba(11, 49, 35, 0.4) 66.32%,
      rgba(6, 37, 26, 0.4) 71.28%,
      rgba(2, 25, 17, 0.4) 75.37%,
      rgba(4, 28, 20, 0.4) 79.4%,
      rgba(6, 30, 22, 0.4) 84.2%,
      rgba(9, 33, 24, 0.4) 90.85%,
      rgba(11, 36, 27, 0.4) 100%
    );
  }

  /* 카피 블록 327:1959 — w374, 프레임 세로중심(150)에 정렬 → top 97.38
     (블록 높이 = 45.25 + 20*1.5*2 = 105.25 / 150 - 105.25/2 = 97.375)
     Figma left 는 1px 이지만 PC 와 동일하게 left:50% + translateX(-50%) 유지
     (374 폭 기준 실제 left 0.5 → 시안 대비 0.5px 차이, 무시 가능) */
  .glopick__sec11-txt {
    top: calc(97.38 * var(--glopick-unit));
    width: calc(374 * var(--glopick-unit));
  }

  /* 327:1961 — Onemobile Regular 12 / 1.5 / -0.24px(= -0.02em), 2줄 */
  .glopick__sec11-desc {
    font-size: calc(12 * var(--glopick-unit));
    line-height: 1.5;
    letter-spacing: -0.02em;
  }

  /* 327:1962 — Onemobile Regular 20 / 1.5 / -0.96px(= -0.048em), 2줄
     desc(12*1.5*2 = 36) 바로 아래 45.25 지점에서 시작 → margin-top 9.25
     ★ 리셋 `.glopick__wrap p { margin: 0 }`(0,0,1,1) 때문에 프리픽스 필수 (§10) */
  .glopick__wrap .glopick__sec11-lead {
    margin-top: calc(9.25 * var(--glopick-unit));
    font-size: calc(20 * var(--glopick-unit));
    line-height: 1.5;
    letter-spacing: -0.048em; /* MO 시안 지정 -0.96px @20px (PC 는 -0.02em) */
  }

  /* ★ MO 는 2번째 줄도 Bold 가 아니라 Regular (327:1962 = ONE_Mobile_OTF:Regular).
     PC 만 Bold 이므로 모바일에서 되돌린다. */
  .glopick__sec11-lead-b { font-weight: 400; }

  /* 327:1963 — "+" Mont SemiBold 35 / #fe5000, 시안 좌표 x144.14 y156.28(세로중심).
     .glopick__sec11-txt(left 0.5 / top 97.38) 기준 → left 143.64 / top 58.9 */
  .glopick__sec11-plus {
    left: calc(143.64 * var(--glopick-unit));
    top: calc(58.9 * var(--glopick-unit));
    font-size: calc(35 * var(--glopick-unit));
  }

  /* ==========================================================================
     12. glo EVENT / 경품 안내 — MO 375 x 977 (Figma 327:1964)
         PC 1920 x 1251 (327:1351) 대응.
         PC 는 "박스 왼쪽=텍스트 / 오른쪽=제품" 2단 구성이지만
         MO 는 전부 가운데 정렬 1단(제품 → 경품안내 태그 → 경품명) 으로 재배치된다.

     [배경] sec_11_mo.css 와 동일한 방식(프레임 fill conic-gradient 를 CSS 로 환산).
       Figma 원본:
         matrix(-28.231 47.087 -21.93 -147.74 238.88 549.02) 안의
         conic-gradient(from 90deg, #0b241b 0%, #144836 50%, #0b3123 62.5%,
                        #021911 75%, #0b241b 100%) / opacity 0.4  (배경색 #000)
       ※ MO sec11 과 a/c/e 가 같고 b/d/f 만 977/300 = 3.2567 배 → 같은 패턴을
         프레임 높이에 맞춰 세로로 늘린 것. 그래서 stop 분포가 sec11 보다 크게 휜다.
       ★ [확인필요] sec_11_mo.css 와 동일하게 실기기 색감 확인. 어긋나면
         Figma 에서 텍스트 끄고 375x977(@2x) export → sec12_bg_m.png 로 교체.
     ========================================================================== */
  .glopick__sec12 {
    height: calc(977 * var(--glopick-unit));
    background-image: conic-gradient(
      from 210.94deg at calc(238.88 * var(--glopick-unit)) calc(549.02 * var(--glopick-unit)),
      rgba(11, 36, 27, 0.4) 0%,
      rgba(12, 40, 30, 0.4) 22.16%,
      rgba(13, 45, 34, 0.4) 34.05%,
      rgba(14, 50, 37, 0.4) 37.32%,
      rgba(16, 54, 40, 0.4) 39.06%,
      rgba(17, 58, 44, 0.4) 40.43%,
      rgba(18, 63, 47, 0.4) 41.92%,
      rgba(19, 68, 51, 0.4) 44.19%,
      rgba(20, 72, 54, 0.4) 50%,
      rgba(16, 60, 44, 0.4) 72.16%,
      rgba(11, 49, 35, 0.4) 84.05%,
      rgba(6, 37, 26, 0.4) 87.32%,
      rgba(2, 25, 17, 0.4) 89.06%,
      rgba(4, 28, 20, 0.4) 90.43%,
      rgba(6, 30, 22, 0.4) 91.92%,
      rgba(9, 33, 24, 0.4) 94.19%,
      rgba(11, 36, 27, 0.4) 100%
    );
  }

  /* 타이틀 로고 327:1994 — glo 심볼 49.184 x 34.584 @ (122, 50),
     "EVENT" Mont SemiBold 23.664 / 1.5 @ x178.87, 세로중심 y68.07
     → EVENT 줄상자(23.664 * 1.5 = 35.496) 기준 top 50.32, 간격 178.87-(122+49.184)=7.686
     (PC 자산 그대로 축소 사용 : 83/49.184 = 58.362/34.584 = 1.6876 로 비율 동일) */
  .glopick__sec12-logo {
    left: calc(122 * var(--glopick-unit));
    top: calc(50.32 * var(--glopick-unit));
    gap: calc(7.686 * var(--glopick-unit));
    height: calc(35.496 * var(--glopick-unit));
  }
  .glopick__sec12-logo img { width: calc(49.184 * var(--glopick-unit)); }
  .glopick__sec12-logo span { font-size: calc(23.664 * var(--glopick-unit)); }

  /* 327:1993 — Onemobile Bold 28 / 1.4 / letter-spacing 0, 중앙정렬 @ y115.57
     ★ PC 1줄 → MO 2줄. HTML 에 <br class="glopick__mo-only"> 추가 (sec_12.html) */
  .glopick__sec12-title {
    top: calc(115.57 * var(--glopick-unit));
    font-size: calc(28 * var(--glopick-unit));
    line-height: 1.4;
  }

  /* 327:1992 — Onemobile **Regular** 16 / 1.4 / -0.48px(= -0.03em), 4줄 @ y205.57
     ★ PC 는 Bold 28 / 2줄. MO 는 Regular 로 되돌리고 줄바꿈 2개를 추가한다. */
  .glopick__sec12-desc {
    top: calc(205.57 * var(--glopick-unit));
    font-size: calc(16 * var(--glopick-unit));
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.03em;
  }

  /* 이벤트 기간(327:1987) / 당첨자 발표(327:1983)
     두 행 모두 x46.75 시작. 행 높이 = 구분선 높이 12.092
       라벨 : 중심 x78.25 (행 기준 31.5) Onemobile Bold 13 / 1.3 / -0.02em
       구분선: x118.73 (dd 기준 -10.52), h12.092
       날짜 : x129.25 (행 기준 82.5) Mont SemiBold 17 / 1.7
     기간 top 333.57 / 발표 top 361.48 (행 간격 27.91) */
  .glopick__sec12-info {
    left: calc(46.75 * var(--glopick-unit));
    height: calc(12.092 * var(--glopick-unit));
  }
  .glopick__sec12-info--period { top: calc(333.57 * var(--glopick-unit)); }
  .glopick__sec12-info--result { top: calc(361.48 * var(--glopick-unit)); }
  .glopick__sec12-info dt {
    left: calc(31.5 * var(--glopick-unit));
    font-size: calc(13 * var(--glopick-unit));
  }
  .glopick__sec12-info dd {
    left: calc(82.5 * var(--glopick-unit));
    font-size: calc(17 * var(--glopick-unit));
  }
  .glopick__sec12-bar {
    left: calc(-10.52 * var(--glopick-unit));
    height: calc(12.092 * var(--glopick-unit));
  }

  /* 경품 박스 327:1968 — 326 x 437 / radius 20 / #262626 opacity .7 @ (24.5, 413.57) */
  .glopick__sec12-box {
    left: calc(24.5 * var(--glopick-unit));
    top: calc(413.57 * var(--glopick-unit));
    width: calc(326 * var(--glopick-unit));
    height: calc(437 * var(--glopick-unit));
  }

  /* 경품 그림자 327:1971 — 227.657 x 14.093 @ (122.56, 664.12)
     PC(364.295 x 22.551) 와 가로세로 비율 동일(1.6002) → 같은 PNG 그대로 축소 */
  .glopick__sec12-shadow {
    left: calc(122.56 * var(--glopick-unit));
    top: calc(664.12 * var(--glopick-unit));
    width: calc(227.657 * var(--glopick-unit));
  }

  /* 경품 이미지 327:1974 — 207.985 x 245 @ (76.49, 452.4)
     PC(332.816 x 392.01) 와 비율 동일(1.6002) → 같은 PNG 그대로 축소 */
  .glopick__sec12-prize {
    left: calc(76.49 * var(--glopick-unit));
    top: calc(452.4 * var(--glopick-unit));
    width: calc(207.985 * var(--glopick-unit));
  }

  /* 인원 뱃지 327:1976 — 원 87.489 x 87.497 @ (214.42, 458.34),
     안쪽 "1명" Mont Bold + Onemobile Bold 29 / 0.93 / -0.02em */
  .glopick__sec12-count {
    left: calc(214.42 * var(--glopick-unit));
    top: calc(458.34 * var(--glopick-unit));
    width: calc(87.489 * var(--glopick-unit));
    height: calc(87.497 * var(--glopick-unit));
    font-size: calc(29 * var(--glopick-unit));
  }

  /* "경품 안내" 태그 327:1979 — 가운데 정렬(left 50%), top 713.57
     padding 5.124 / 19.216, border 1.281 #44ad6b, radius 5,
     Onemobile Bold 15 / 1.3 / -0.02em
     → PC 는 고정 폭이지만 MO 는 시안이 padding 기반이라 width/height auto 로 되돌린다. */
  .glopick__sec12-tag {
    left: 50%; /* 시안 중심 188.22 ≒ 375/2 (0.72px 차) */
    top: calc(713.57 * var(--glopick-unit));
    width: auto;
    height: auto;
    padding: calc(5.124 * var(--glopick-unit)) calc(19.216 * var(--glopick-unit));
    border-width: calc(1.281 * var(--glopick-unit));
    border-radius: calc(5 * var(--glopick-unit));
    font-size: calc(15 * var(--glopick-unit));
  }

  /* 경품명 327:1981 — Onemobile Bold 18 / 1.3 / -0.02em, 가운데 정렬 @ y752.82 */
  .glopick__sec12-gift {
    left: 50%; /* 시안 중심 188 */
    top: calc(752.82 * var(--glopick-unit));
    font-size: calc(18 * var(--glopick-unit));
    text-align: center;
  }

  /* 참여 버튼 327:1965 — 가운데 정렬, h36 / padding 0 35 / radius 60 / #fe5000 @ y890.57
     라벨 Onemobile Bold 14 / 1.3 / -0.02em */
  .glopick__sec12-btn {
    left: 50%;
    top: calc(890.57 * var(--glopick-unit));
    width: auto;
    height: calc(36 * var(--glopick-unit));
    padding: 0 calc(35 * var(--glopick-unit));
    border-radius: calc(60 * var(--glopick-unit));
    font-size: calc(14 * var(--glopick-unit));
  }

  /* ★ 위 3개(tag / gift / btn)는 PC 에선 left 고정이라 transform 이 없었는데
     MO 에선 가운데 정렬이 필요하다. 그런데 .reveal 범용 규칙
     `.glopick__wrap .reveal:not(.glopick__center)`(0,0,3,0) 이
     transform: translateY(...) 를 걸고 있으므로 그냥 translateX 를 쓰면 덮인다.
     → CLAUDE.md §5 대로 자체 transform 안에 translateY(var(--glopick-rv)) 를
       합성하고, 특정도를 (0,0,4,0) 으로 올려서 확실히 이기게 한다.
     (HTML 에 glopick__center 를 붙이면 PC 레이아웃이 깨지므로 쓰지 않는다) */
  .glopick__wrap .glopick__sec12 .glopick__sec12-tag.reveal,
  .glopick__wrap .glopick__sec12 .glopick__sec12-gift.reveal,
  .glopick__wrap .glopick__sec12 .glopick__sec12-btn.reveal {
    transform: translateX(-50%) translateY(var(--glopick-rv, 0));
  }

  /* ★ [확인필요] MO 시안(327:1964)에는 "※ 글로는 19세 이상 성인만을 위한 제품입니다."
     고지 텍스트가 아예 없다(PC 327:1353 만 존재). 시안대로 숨겼으니
     법적으로 모바일에도 노출이 필요하면 이 규칙을 지우고 좌표를 새로 잡아야 한다. */
  .glopick__sec12-note { display: none; }

  /* ==========================================================================
     13. 카카오톡 알림받기 / 목록으로 — MO (Figma 327:2001 상단부)
         PC 1920 x 592 (327:1391) 대응.

     ※ MO 시안은 PC 섹션 13 + 섹션 14(유의사항)가 한 프레임(327:2001, 375 x 1042)에
       묶여 있다. 프레임 내부 y 경계로 두 섹션을 다시 분리했다.
         327:2025 "14 알림받기"  frame-rel y 0   h 283  → 회색(#f3f3f3) 영역
         327:2023 "목록으로 버튼" frame-rel y 333 h 38   → 흰색 영역 위
         327:2002 "mo 유의사항"  frame-rel y 421 h 621  → gp-notice (sec_14_mo.css)
       ⇒ .glopick__sec13 높이 = 421,  gp-notice 높이 = 621,  합 1042 ✓
     ========================================================================== */

  /* 배경 : 위 #f3f3f3 283 + 아래 #fff 138 = 421 (PC 는 430 + 162 = 592) */
  .glopick__sec13 {
    height: calc(421 * var(--glopick-unit));
    background: linear-gradient(
      to bottom,
      #f3f3f3 0,
      #f3f3f3 calc(283 * var(--glopick-unit)),
      #fff calc(283 * var(--glopick-unit)),
      #fff 100%
    );
  }

  /* 327:2034 — Onemobile Regular 22 / 1.5 / -0.44px(= -0.02em), #000, 중앙정렬.
     시안 세로중심 99.5, 3줄(22*1.5*3 = 99) → top 50
     ★ PC 2줄 → MO 3줄. HTML 에 <br class="glopick__mo-only"> 1개 추가 (sec_13.html)
     ★ 색상도 PC #191919 → MO #000 (시안 text-black) */
  .glopick__sec13-txt {
    top: calc(50 * var(--glopick-unit));
    font-size: calc(22 * var(--glopick-unit));
    color: #000;
  }

  /* 카카오 채널 버튼 327:2028 — 275.052 x 44 @ (50, 189) / bg #fae300
     (50 + 275.052/2 = 187.53 = 375 중앙) 아이콘~텍스트 간격 11,
     CH 아이콘 25.052 x 22.874 (PC 42.134 x 38.47 과 비율 동일 1.0952 → 같은 SVG),
     라벨 Onemobile Bold 13.081 / 1.2 / -0.02em, #391b1b */
  .glopick__sec13-kakao {
    top: calc(189 * var(--glopick-unit));
    gap: calc(11 * var(--glopick-unit));
    width: calc(275.052 * var(--glopick-unit));
    height: calc(44 * var(--glopick-unit));
    font-size: calc(13.081 * var(--glopick-unit));
  }
  .glopick__sec13-kakao img { width: calc(25.052 * var(--glopick-unit)); }

  /* 목록으로 버튼 327:2023 — 160 x 38 @ (108, 333)  (108 + 80 = 188 ≒ 375 중앙)
     border 1.226 rgba(0,0,0,.4) / radius 49.042 / bg rgba(255,255,255,.3)
     라벨 Onemobile Bold 13.487 / 1.2 / -0.02em, #000 */
  .glopick__sec13-list {
    top: calc(333 * var(--glopick-unit));
    width: calc(160 * var(--glopick-unit));
    height: calc(38 * var(--glopick-unit));
    border-width: calc(1.226 * var(--glopick-unit));
    border-radius: calc(49.042 * var(--glopick-unit));
    font-size: calc(13.487 * var(--glopick-unit));
  }

  /* ==========================================================================
     14. 유의사항(gp-notice) — MO (Figma 327:2001 하단부 = 327:2002 "mo 유의사항")
         PC 1920 x 770 (327:1404) 대응. 프레임 내 y 421 ~ 1042 (h 621).

     MO 시안 실측 (327:2002 기준, 상대 좌표)
       상단바 327:2003 : 375 x 70, #262626
         info 아이콘 327:2010  32 x 32 @ (24, 19)   ← (70-32)/2 = 19, 세로 중앙
         라벨 327:2011        NotoSans Bold 20 / line-height 1.0 / -0.02em @ x66
                              (아이콘 우측에서 66-56 = 10)
         화살표 327:2005      40 x 40 @ (315, 20)   → 우측 여백 375-355 = 20
       본문 327:2012 : 375 x 551, #333, top 70
         좌우 여백 18 (콘텐츠 폭 338), 상하 여백 24
         "이벤트 유의사항" 블록 327:2018 : body-rel top 24
         "경품 - ..."   블록 327:2013 : body-rel top 453 (앞 블록 끝 433 대비 20 띄움)
         제목 NotoSans Bold 16 / -0.02em, 제목 왼쪽 들여쓰기 6 (헤더 아이콘 x24 와 정렬)
         제목~목록 간격 13
         li NotoSans Regular 11 / 1.7 / -0.33px(= -0.03em), 들여쓰기 16.5

     ※ 아코디언이므로 max-height 는 여기서 절대 건드리지 않는다.
       열고 닫기는 PC 와 동일하게 mcs_common.js 가 scrollHeight 로 제어 (CLAUDE.md §6).
       padding 만 상태 클래스(.gp-notice:not(.is-closed))로 분리 유지.
     ========================================================================== */

  .gp-notice__top {
    height: calc(70 * var(--glopick-unit));
    padding: 0 calc(20 * var(--glopick-unit)) 0 calc(24 * var(--glopick-unit));
  }
  .gp-notice__top-left { gap: calc(10 * var(--glopick-unit)); } /* 66 - (24 + 32) */
  .gp-notice__icon { width: calc(32 * var(--glopick-unit)); }
  .gp-notice__label {
    font-size: calc(20 * var(--glopick-unit));
    line-height: 1; /* 시안 leading-none */
  }
  .gp-notice__arrow {
    width: calc(40 * var(--glopick-unit));
    height: calc(40 * var(--glopick-unit));
  }

  /* 본문 — 좌우 18 / 상하 24. max-height 는 JS 전용이라 선언하지 않는다. */
  .gp-notice__bottom { padding: 0 calc(18 * var(--glopick-unit)); }
  .gp-notice:not(.is-closed) .gp-notice__bottom {
    padding-top: calc(24 * var(--glopick-unit));
    padding-bottom: calc(24 * var(--glopick-unit));
  }

  /* 제목 2종 — NotoSans Bold 16 / 1.3 / -0.02em, 왼쪽 들여쓰기 6, 아래 13
     ★ 리셋 `.glopick__wrap p { margin: 0 }`(0,0,1,1) 이 `.gp-notice__title`(0,0,1,0) 을
       이기므로 반드시 .glopick__wrap 프리픽스 (CLAUDE.md §10)
     ※ 시안에서 1줄짜리 제목(327:2021)만 line-height 1.0, 2줄짜리(327:2016)는 1.3 으로
       들쭉날쭉하게 잡혀 있다. 두 블록의 auto-layout gap 이 13 으로 동일하므로
       line-height 는 1.3 으로 통일하고 gap 13 을 margin-bottom 으로 옮겼다
       (1줄 제목 밑 목록이 시안보다 약 4.8px 내려온다 — 375 기준 오차, 허용) */
  .glopick__wrap .gp-notice__title {
    margin: 0 0 calc(13 * var(--glopick-unit)) calc(6 * var(--glopick-unit));
    font-size: calc(16 * var(--glopick-unit));
    line-height: 1.3;
  }
  .glopick__wrap .gp-notice__title--sub {
    margin-top: calc(20 * var(--glopick-unit)); /* 블록1 끝 433 → 블록2 시작 453 */
    margin-bottom: calc(13 * var(--glopick-unit));
  }

  /* ※ .glopick__wrap 프리픽스 필수 — 리셋 `.glopick__wrap ul { padding:0 }`(0,0,1,1)
     이 `.gp-notice__list`(0,0,1,0) 보다 특정도가 높다 (CLAUDE.md §10) */
  .glopick__wrap .gp-notice__list {
    padding-left: calc(16.5 * var(--glopick-unit)); /* 시안 li margin-inline-start 16.5 */
  }
  .gp-notice__list li {
    font-size: calc(11 * var(--glopick-unit));
    line-height: 1.7; /* 시안 11px / 18.7px */
    letter-spacing: -0.03em; /* 시안 -0.33px @11px (PC 는 -0.02em) */
  }
}