/* =========================================================
   /css/og-extreme.css
   extreme-15.html OG 전용 (전체 화면 + 위 여백 추가 버전)
========================================================= */

:root{
  --ogW:1200px;
  --ogH:630px;

  --og-title:#0F172A;
  --og-muted:#64748B;
}

/* =========================================================
   1️⃣ 캔버스 고정
========================================================= */
html[data-og="1"],
html[data-og="1"] body{
  width:var(--ogW) !important;
  height:var(--ogH) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#ffffff !important;
}

html[data-og="1"] *{
  animation:none !important;
  transition:none !important;
}

/* =========================================================
   2️⃣ 불필요 요소 제거
========================================================= */
html[data-og="1"] #ppHeader,
html[data-og="1"] #ppFooter,
html[data-og="1"] #coupangAdMount,
html[data-og="1"] .pp-topbar,
html[data-og="1"] #quizSection,
html[data-og="1"] #toast,
html[data-og="1"] #startBtn{
  display:none !important;
}

/* =========================================================
   3️⃣ 페이지 전체 영역
========================================================= */
html[data-og="1"] .pp-page.pp-app.pp-extreme{
  width:100% !important;
  height:100% !important;

  display:flex;
  align-items:flex-start;   /* 🔥 위로 정렬 */
  justify-content:center;

  background:#ffffff !important;
}

/* =========================================================
   4️⃣ heroSection (위 여백 추가)
========================================================= */
html[data-og="1"] #heroSection.pp-hero{
  width:100% !important;
  height:100% !important;

  padding:80px 0px 0px;  /* 🔥 위 여백 크게 추가 */

  display:flex;
  flex-direction:column;
  justify-content:flex-start;  /* 🔥 상단부터 시작 */
  gap:40px;

  text-align:left;
}

/* 상단 브랜드 */
html[data-og="1"] #heroSection.pp-hero::before{
  content:"PICKPLAY";
  font-size:30px;
  font-weight:950;
  letter-spacing:1px;
  color:#0F172A;
}

/* =========================================================
   5️⃣ 타이포
========================================================= */

html[data-og="1"] .pp-hero-sub{
  font-size:50px !important;
  font-weight:950 !important;
  letter-spacing:-1.5px !important;
  line-height:1.1 !important;
  color:var(--og-muted) !important;
}

html[data-og="1"] .pp-hero-title{
  font-size:90px !important;
  font-weight:950 !important;
  letter-spacing:-3px !important;
  line-height:1.05 !important;
  color:var(--og-title) !important;
  margin:0 !important;
}

/* =========================================================
   6️⃣ meta 영역
========================================================= */
html[data-og="1"] .pp-meta{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:24px !important;
  flex-wrap:wrap !important;
}

/* ✅ span/inline 특성 제거 → 캡처 결과 안정화 */
html[data-og="1"] .pp-meta .pp-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  /* ✅ 패딩이 캡처에서 확실히 보이도록 약간 키움 */
  padding:18px 28px !important;

  /* ✅ 캡처에서 줄높이 차이 줄이기 */
  line-height:1 !important;

  font-size:25px !important;
  font-weight:950 !important;
  letter-spacing:-.2px !important;

  border-radius:999px !important;

  /* ✅ 1px이 흐려지는 문제 방지: 살짝 진하게 */
  border:2px solid rgba(15,23,42,.16) !important;

  /* ✅ 배경도 살짝 올려서 캡처에서 더 또렷하게 */
  background:rgba(15,23,42,.06) !important;

  color:#0F172A !important;

  /* ✅ 서브픽셀 렌더링 영향 줄이기 */
  transform:translateZ(0);
}
/* =========================================================
   7️⃣ 캡처 토스트
========================================================= */
html[data-og="1"] .pp-og-toast{
  position:fixed;
  left:24px;
  bottom:24px;
  padding:10px 14px;
  font-size:14px;
  border-radius:12px;
  background:#111;
  color:#fff;
  z-index:99999;
}