/* RUNIEL BLOOM 상세페이지 — 원본 PNG 01~68 재현 (기준 폭 860px)
   - 모든 섹션은 원본 PNG 1장 = <section class="s"> 1개, 원본 높이 그대로, 섹션 사이 여백 없음
   - 요소 위치는 각 섹션 안 절대 좌표(px) = 원본 PNG 픽셀 좌표 */

/* ---------- 폰트: 실제 굵기별 파일 ---------- */
@font-face { font-family: "Pretendard"; font-weight: 100; font-style: normal; src: url("assets/fonts/Pretendard-Thin.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 200; font-style: normal; src: url("assets/fonts/Pretendard-ExtraLight.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 300; font-style: normal; src: url("assets/fonts/Pretendard-Light.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 400; font-style: normal; src: url("assets/fonts/Pretendard-Regular.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 500; font-style: normal; src: url("assets/fonts/Pretendard-Medium.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-style: normal; src: url("assets/fonts/Pretendard-SemiBold.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-style: normal; src: url("assets/fonts/Pretendard-Bold.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 800; font-style: normal; src: url("assets/fonts/Pretendard-ExtraBold.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 900; font-style: normal; src: url("assets/fonts/Pretendard-Black.otf") format("opentype"); }
@font-face { font-family: "Gmarket Sans"; font-weight: 300; font-style: normal; src: url("assets/fonts/GmarketSansLight.otf") format("opentype"); }
@font-face { font-family: "Gmarket Sans"; font-weight: 500; font-style: normal; src: url("assets/fonts/GmarketSansMedium.otf") format("opentype"); }
@font-face { font-family: "Gmarket Sans"; font-weight: 700; font-style: normal; src: url("assets/fonts/GmarketSansBold.otf") format("opentype"); }
@font-face { font-family: "Sansita Swashed"; font-weight: 300 900; font-style: normal; src: url("assets/fonts/SansitaSwashed[wght].ttf") format("truetype"); }

/* ---------- 페이지 ---------- */
html, body { margin: 0; padding: 0; background: #ffffff; }
body { overflow-x: hidden; }
.page-fit { width: 100%; }
.page {
  width: 860px; margin: 0 auto; position: relative;
  font-family: "Pretendard", sans-serif; font-synthesis: none;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
  word-break: keep-all; color: #000000;
}
.page * { font-synthesis: none; }
.s { position: relative; width: 860px; overflow: hidden; }
.s > * { position: absolute; margin: 0; box-sizing: border-box; }
.s img, .s video { display: block; }
.s video { object-fit: cover; }
.t { white-space: nowrap; }
.t b { font-weight: inherit; }
.f-gm { font-family: "Gmarket Sans", sans-serif; }
.f-sw { font-family: "Sansita Swashed", cursive; }

/* ---------- 좁은 화면: 860px 레이아웃을 비율 그대로 축소 (줄바꿈·배치 유지) ---------- */
@media (max-width: 859.98px) {
  .page-fit { overflow: hidden; }
  .page { transform-origin: 0 0; transform: scale(var(--k, 1)); margin: 0; }
}

/* ---------- 섹션 번호 표시 (작업용, N 키로 켜고 끄기) ---------- */
.show-num .s::before {
  content: attr(data-n);
  position: absolute; left: 8px; top: 8px; z-index: 50;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(255, 0, 80, .88); color: #fff;
  font: 700 16px/1.2 'Pretendard', sans-serif; letter-spacing: 0;
  pointer-events: none;
}
.show-num .s { outline: 1px dashed rgba(255, 0, 80, .55); outline-offset: -1px; }


/* ---------- HOLD 섹션: 근거 확인 전까지 숨김, 주소에 ?hold 를 붙이면 보임 ---------- */
.s[data-hold] { display: none; }
.show-hold .s[data-hold] { display: block; outline: 3px dashed rgba(255, 120, 0, .8); outline-offset: -3px; }
.show-hold .s[data-hold]::after {
  content: "HOLD · " attr(data-hold);
  position: absolute; right: 8px; top: 8px; z-index: 50;
  padding: 3px 9px; border-radius: 6px; background: rgba(255, 120, 0, .9); color: #fff;
  font: 700 15px/1.3 'Pretendard', sans-serif; letter-spacing: 0; pointer-events: none;
}