/* ════════════════════════════════════════════════════════════════════
   saju-landing.css — 사주집 정적 랜딩(#248 · 2026-09-07 사람 지시)
   ────────────────────────────────────────────────────────────────────
   "예쁜 사주집 건물 위에 UI가 올라간 화면"에서 "하연이 직접 나를 맞아주는
   장소"로 — 상담(채팅)이 시작되기 전 한 장을 덧씌운다. 기존 saju.js 의
   대화 엔진·무대(shop-stage)·생년월일 폼은 한 글자도 안 건드린다 — 이
   화면은 그 위에 얹히는 새 레이어 하나일 뿐이다(saju.js 사주집랜딩배선()
   이 body.sj-landing-active 를 뗀 뒤 기존 흐름을 그대로 부른다).

   자산: 배경 assets/village/entry/saju-night.jpg(정본 그대로) ·
         하연 assets/village/npc/full/yeonhui.png(확정 정본, 얼굴·헤어·
         의상 변경 없음 — cutout PNG 를 배경 위에 얹기만 한다).
   색: Deep Indigo/Navy · Lavender · Ivory · Champagne Gold 만 쓴다
       (§15 금지: 브라운·순검정·크롬·네온보라·원색노랑·과한 glassmorphism).
   ════════════════════════════════════════════════════════════════════ */

#sj-landing{ display:none; }
body.sj-landing-active #sj-landing{
  display:flex; flex-direction:column;
  position:fixed; inset:0; z-index:10; overflow:hidden;
  --sjl-ivory:#f7f1e6;
  --sjl-lavender:#d9caf0;
  --sjl-navy:#171335;
  --sjl-navy-glass:rgba(19,15,46,.86);
  --sjl-line:rgba(217,202,240,.22);
  --sjl-gold-1:#f4e3ae;
  --sjl-gold-2:#c9a961;
}

/* ── 배경 — 기존 정본 그대로, 화면 전체를 덮는다(도사집 복제 아님 · 별/천문/밤하늘) ── */
/* ★ VISUAL/ANIMATION FINAL GATE(2026-09-15) — 하연이 이 배경 그림 안에 합성돼 있어(위 §3 지시)
   캐릭터만 따로 숨쉬게 만들 수 없다. 대신 장면 전체를 아주 느리게 확대(켄번즈)해 [멈춘 사진]이
   아니라 [보고 있는 방]처럼 느끼게 한다 — 24초에 한 방향, 사람 눈에는 "움직인다"보다 "공간에
   있다"로 읽히는 속도다. 인물 표정·구도는 원본 그대로, 카메라만 아주 조금 다가간다.
   ★ 이 keyframes 는 여기서 정의만 하고, 실제로 거는 자리는 `entry-scene.css` 다 — 그 파일이
   이미 `.sj-landing-bg` 에 `es-room-reveal`(밝기 reveal)을 걸어 두고 있고, 같은 선택자에
   `animation:` 을 또 쓰면 shorthand 전체가 뒤엣것으로 통째로 덮인다(2026-09-15 실측 — 이
   규칙을 먼저 여기 단독으로 뒀더니 `getComputedStyle().animationName` 이 `es-room-reveal` 로만
   나오고 이 애니메이션은 한 번도 안 돌았다). `es-room-reveal` 은 `filter` 만 쓰고 이건 `transform`
   만 써서 같은 자리에서 겹쳐 돌 수 있다 — 그래서 entry-scene.css 쪽에 콤마로 같이 건다. */
body.sj-landing-active .sj-landing-bg{
  position:absolute; inset:0;
  background:url("assets/village/entry/saju-night.jpg") center 14% / cover no-repeat;
}
@keyframes sjl-kenburns{
  from{ transform:scale(1) translateY(0); }
  to{ transform:scale(1.028) translateY(-0.6%); }
}
/* 위(상태바 근처)와 아래(패널로 이어지는 자리)만 살짝 정리 — 사진을 왜곡하지 않는다 */
body.sj-landing-active .sj-landing-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,11,36,.42) 0%, rgba(15,11,36,0) 22%, rgba(15,11,36,0) 62%, rgba(15,11,36,.5) 100%);
}
/* §11 — 건물 본체가 하연·메뉴보다 묻히지 않게, 문·창문 자리를 아주 약하게 밝힌다.
   원본 사진은 그대로 두고 그 위에 아주 옅은 온기 조명만 얹는다(오버레이 수준 · 그림 수정 아님).
   밤 분위기는 유지 — 세 점 다 낮게, screen 블렌드로 [더하기]만 한다. */
body.sj-landing-active .sj-landing-bg-glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:screen; opacity:.55;
  /* ★ 끝을 `transparent`(투명 검정)로 두면 블렌드 경계에 회색 사각형 자국이 보인다
     (2026-09-07 실측) — 반드시 [같은 색의 알파 0]으로 끝낸다. */
  background:
    radial-gradient(ellipse 15% 8% at 52% 46%, rgba(255,214,140,.55), rgba(255,214,140,0) 70%),
    radial-gradient(ellipse 9% 7% at 36% 38%, rgba(255,224,170,.4), rgba(255,224,170,0) 70%),
    radial-gradient(ellipse 9% 7% at 68% 38%, rgba(255,224,170,.4), rgba(255,224,170,0) 70%);
}
/* ★ 등불이 아주 약하게 숨쉰다 — 정적인 방을 [불빛이 흔들리는 방]으로. 진폭은 눈에 [반짝인다]로
   안 읽히게 좁게 잡았다(§4 "sparkle 남발" 금지선). `opacity` 는 entry-scene.css 의
   `es-glow-reveal`(등장 reveal)이 이미 쓰고 있어 또 쓰면 그 reveal 을 통째로 덮으므로
   `filter:brightness()` 로 겹치지 않게 돈다 — 실제로 거는 자리도 entry-scene.css(콤마로 병기). */
@keyframes sjl-glow-breathe{
  0%, 100%{ filter:brightness(.92); }
  50%{ filter:brightness(1.12); }
}

/* ── 하연 영역 — 패널 위 [남는 공간]에 자동으로 채워진다 ───────────────────
   ★ 광고 배너가 있으면 --banner-ad-height 만큼 패널이 커진다(실기기 80px · 헤드리스는 0).
   패널을 flex:0 0 auto 로 두고 이 영역을 flex:1 로 두면, 패널이 커진 만큼 이 영역이
   저절로 줄어들어 하연이 패널에 덮이지 않는다(2026-09-07 실기기 실측으로 발견한 버그 수정 —
   전에는 둘 다 화면 bottom:0 에 각자 고정돼 있어 패널이 커지면 하연을 그대로 덮었다). */
body.sj-landing-active .sj-landing-stage{
  position:relative; flex:1 1 auto; min-height:0;
}
/* ── 하연 — 확정 정본 cutout. 포즈·의상·헤어는 원본 그대로, 위치·크기만 이 화면 것 ──
   §3 — 스티커처럼 붙어 보이던 것을 줄인다: 오른쪽으로 이동(문과 안 겹치는 선에서) ·
   발밑 자연 fade(mask) · 등불빛이 얼굴/어깨에 아주 약하게 얹히는 느낌(이번 판은 렌더
   자체에 이미 있다). 원본 PNG 파일 자체는 안 건드린다 — 전부 이 래퍼의 위치·마스크로만 만든다. */
/* ★ 2026-09-10 3차 사람 지시 — 사람이 [하연이 창가 벤치에 이미 자연스럽게 앉은 합성본]을
   배경 그림 자체로 새로 줬다(같은 자리 `assets/village/entry/saju-night.jpg` 교체). 따로
   얹던 하연 컷아웃 레이어는 이제 배경 그림 안에 같이 들어 있어 **완전히 끈다** — 두 장을
   겹치면 하연이 둘로 보인다. DOM(`.sj-landing-yeonhui-wrap`)은 saju.html·saju.js 가 참조하는
   자리라 지우지 않고 display:none 으로만 물러난다(구조는 그대로, 화면에만 안 그린다). */
body.sj-landing-active .sj-landing-yeonhui-wrap{ display:none; }
/* ── 하연 말풍선 — 2026-09-08(2차 미세보정) §1·§2·§3 — 하연과 [연결된 한 장면]처럼.
   실측(412x915) — 옛 값(top:15%)에서 말풍선 아랫단과 하연 머리 상단 사이 간격이 125px 였다.
   목표(35~45%↓)로 75px 근방까지 줄이려면 top ≈ 22%(짧은 화면 비율도 같은 비로 다시 잡는다:
   12%→18% · 9%→13%). 폭은 7%, padding 은 한 단 줄인다 — 텍스트·글자크기는 그대로(§3). */
body.sj-landing-active .sj-landing-bubble{
  position:absolute; z-index:4;
  left:38%; top:22%;
  max-width:min(41vw, 177px);
  padding:8px 10px 9px;
  border-radius:16px; border-bottom-left-radius:5px;
  background:var(--sjl-ivory);
  box-shadow:0 8px 18px rgba(8,5,26,.3);
}
/*  꼬리 — 하연이 화면 왼쪽에 있으므로 왼쪽 아래로 더 확실히 치우치게(§2). 길이는 그대로(과도한
    꼬리 금지) — 삼각형 폭만 12px→11px 로 살짝 줄이고 자리를 8px 로 당겨 왼쪽에 더 붙인다. */
body.sj-landing-active .sj-landing-bubble::after{
  content:""; position:absolute; left:8px; bottom:-6px;
  width:12px; height:12px; background:var(--sjl-ivory);
  clip-path:polygon(0 0, 100% 0, 0 100%);
  transform:rotate(0deg);
}
/*  ★ 말풍선의 [뜸 들이다 떠오르는] 등장은 이미 `entry-scene.css` 의 `es-tier-reveal`(방 reveal
    480ms 뒤 560ms 지점에 opacity+translateY 로 등장)이 한다 — 여기서 새로 안 만든다(2026-09-15
    VISUAL GATE 조사 중 발견: 처음엔 이 사실을 모르고 같은 것을 또 만들었다가, 같은 선택자에
    건 `animation:` 이 서로를 덮는 것만 확인하고 지웠다. 중복 만들지 않는다). */
/* ★ 2026-09-10 6차 사람 지시 [사주집/도사집 공통 타이포그래피 개선] — 화면마다 폰트를
   하드코딩하지 않고 `village-typography.css`(reading.html·saju.html 둘 다 saju-landing.css
   보다 먼저 읽는다)의 공통 토큰을 쓴다. 이름표는 NPC Name 역할, 본문은 Conversation 역할
   (§5 "본문까지 장식적인 폰트로 만들지 않는다" — --vt-font-body 는 시스템 고딕). */
body.sj-landing-active .sj-landing-bubble-name{
  display:inline-flex; align-items:center; gap:3px;
  margin-bottom:4px; padding:2px 8px;
  border-radius:999px; background:var(--sjl-lavender);
  color:#3a2e63; font-size:.66rem; font-weight:var(--vt-w-npc-name); letter-spacing:.02em;
  font-family:var(--vt-font-display);
}
body.sj-landing-active .sj-landing-bubble p{
  margin:0; color:#3a2e52; font-size:.82rem; font-weight:var(--vt-w-convo); line-height:1.4;
  letter-spacing:.01em; font-family:var(--vt-font-body);
  /*  §5 — 카드에 따라 말풍선 문구가 바뀔 때 "갑자기 깜빡이지" 않게 아주 짧은 fade 하나만.
      saju.js 사주집랜딩말풍선갈기() 가 opacity 를 0→1 로만 토글한다(타이핑 효과 없음). */
  transition:opacity .15s ease;
}

/* ── 하단 영역 — #254(2026-09-07 2차 재수정 · 사람 지시 [방향 재수정]) — 큰 패널을 걷는다.
   배경/캐릭터가 화면 65~75%를 그대로 차지하게, 이 래퍼는 레이아웃용 투명 컨테이너일 뿐이다
   (배경·테두리·blur·그림자 없음). 카드 하나하나가 [배경 위에 뜬 독립된 작은 오브젝트]로
   보이게 한다 — .sj-card/.sj-landing-ai 각자가 자기 배경·그림자를 갖는다(아래). */
body.sj-landing-active .sj-landing-panel{
  position:relative; z-index:5; flex:0 0 auto;
  /*  2026-09-08(2차 미세보정) §6 — 하연 발밑과 카드 사이 [작지만 일정한 breathing space].
      카드를 크게 안 내리려고(§6 "크게 아래로 내리지 않는다") 패널 자체에 8px 위 여백만 준다. */
  padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px) + var(--banner-ad-height,0px));
}

/* ══ 5개 콘텐츠 — 3+2 그리드 (2026-09-13 사람 지시 [5개 콘텐츠+AI 상담 고정 무대 통합]) ══
   PART1 — **가로 캐러셀로 바꾸지 않는다.** 2026-09-12 판은 캐러셀이었는데, 사람이 "5개 모두
   사용자가 사주집에 들어오자마자 확인할 수 있어야 한다"고 다시 정해 1단(3장 나란히) + 2단
   (2장 나란히, 폭 절반씩)으로 되돌렸다. PART2 — 다섯 장 전부 **하나의 .sj-card 규칙**을
   물려받는다(아이보리 반투명·같은 corner radius·같은 그림자·같은 제목/설명 폰트·같은 아이콘
   렌더링·같은 내부 여백) — 1단/2단이 서로 다른 UI 로 보이지 않는다. 폭만 다르다(.sj-card-wide
   가 2열 grid 안에서 가로로 넓다). */
body.sj-landing-active .sj-landing-cards{ display:flex; gap:7px; margin:0 0 7px; }
body.sj-landing-active .sj-landing-cards2{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 0 7px; }
/* ★ 2026-09-10 사람 지시 [사주집/타로집/도사집 내부 리뉴얼] §4 — 사주집 정체성을
   CREAM+PEACH+LIGHT SAGE+CHAMPAGNE GOLD 로. 옛 라벤더 그라디언트/테두리/그림자는
   타로집(§5 LILAC)과 겹치는 톤이라 여기서만 복숭아·세이지·샴페인골드로 갈아 낀다 —
   구조·클릭 영역·라우팅은 한 글자도 안 바꾼다. */
body.sj-landing-active .sj-card{
  position:relative;   /* .sj-card-badge 앵커 */
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center;
  gap:4px; padding:9px 5px 8px;
  border:1px solid rgba(224,186,140,.45); border-radius:20px; cursor:pointer;
  background:linear-gradient(165deg, rgba(255,252,247,.93), rgba(255,232,214,.82));
  box-shadow:0 4px 14px rgba(184,134,90,.14);
  transition:transform .12s ease, box-shadow .12s ease;
}
body.sj-landing-active .sj-card:active{ transform:translateY(-2px) scale(1.02); box-shadow:0 6px 18px rgba(184,134,90,.2); }
body.sj-landing-active .sj-card-ico-wrap{
  position:relative; display:inline-flex; overflow:hidden; border-radius:11px;
}
body.sj-landing-active .sj-card-ico{ width:34px; height:34px; object-fit:contain; -webkit-user-drag:none; }
/*  토정비결·궁합 — 가로로 넓은 카드. PART2 — 아이콘 왼쪽 + 제목/설명 오른쪽 세로쌓기, 그
    이외의 모든 값(테두리·라운드·그림자·폰트·여백)은 위 .sj-card 를 그대로 물려받는다. */
body.sj-landing-active .sj-card-wide{
  flex-direction:row; align-items:center; justify-content:flex-start;
  gap:8px; padding:9px 10px; text-align:left;
}
body.sj-landing-active .sj-card-wide .sj-card-ico{ width:32px; height:32px; }
body.sj-landing-active .sj-card-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
body.sj-landing-active .sj-card-wide .sj-card-tt,
body.sj-landing-active .sj-card-wide .sj-card-sub{ text-align:left; white-space:normal; }
/*  §9·§10(전 사이클 유지) micro animation — 아이콘 위를 아주 은은한 빛줄기가 낮은 빈도
    (5.6~7초)로 한 번씩 지나간다("움직이는 UI"가 아니라 "가끔 살아 있는 것처럼"). data-cat
    으로 카드마다 delay·duration·색을 달리해 다섯이 동시에 반짝이지 않게 한다(동시 발동·
    지속 bounce/pulse/회전 금지). ★ 3+2 로 되돌리며 두 컨테이너로 나뉘어 :nth-child 가 컨테이너
    마다 다시 세어져 겹치므로, data-cat 셀렉터로 바꿔 카드가 어느 줄에 있어도 안 겹치게 했다. */
body.sj-landing-active .sj-ico-shine{
  position:absolute; inset:-45% -65%; pointer-events:none;
  background:linear-gradient(100deg, transparent 42%, var(--sj-shine, rgba(255,244,214,.65)) 50%, transparent 58%);
  transform:translateX(-140%);
  animation:sj-shine 6.4s ease-in-out infinite;
  mix-blend-mode:soft-light;
}
body.sj-landing-active [data-cat="daily"] .sj-ico-shine{ --sj-shine:rgba(255,214,225,.6); animation-delay:.4s; animation-duration:6.1s; }
body.sj-landing-active [data-cat="newyear"] .sj-ico-shine{ --sj-shine:rgba(214,255,214,.55); animation-delay:1.8s; animation-duration:5.6s; }
body.sj-landing-active [data-cat="default"] .sj-ico-shine{ --sj-shine:rgba(224,214,255,.5); animation-delay:2.5s; animation-duration:6.9s; }
body.sj-landing-active [data-cat="tojeong"] .sj-ico-shine{ --sj-shine:rgba(244,227,174,.75); animation-delay:3.2s; animation-duration:7s; }
body.sj-landing-active [data-cat="compat"] .sj-ico-shine{ --sj-shine:rgba(255,224,200,.6); animation-delay:.9s; animation-duration:6.6s; }
@keyframes sj-shine{
  0%, 88%{ transform:translateX(-140%); opacity:0; }
  92%{ opacity:1; }
  100%{ transform:translateX(140%); opacity:0; }
}
/*  §6·§11·§12(전 사이클 유지) — 카드를 탭하면 saju.js 가 이 클래스를 붙이고 실제 화면
    전환까지 그 시간(약 550ms)을 그대로 쓴다 — 대기시간이 늘지 않는다. */
body.sj-landing-active .sj-card.sj-anim-active .sj-ico-shine{ animation:sj-shine-once .55s ease-out 1; }
@keyframes sj-shine-once{
  0%{ transform:translateX(-140%); opacity:0; }
  35%{ opacity:1; }
  100%{ transform:translateX(140%); opacity:0; }
}
body.sj-landing-active .sj-card.sj-anim-active .sj-card-ico-wrap{ transition:transform .55s ease-out; transform:scale(1.08); }
/*  §7(전 사이클 유지) — 오늘의 추천 배지. 매우 작고, 흔들지 않고, glow·SALE 스타일 금지. */
body.sj-landing-active .sj-card-badge{
  position:absolute; top:-6px; right:3px; z-index:1;
  padding:2px 7px; border-radius:999px;
  background:linear-gradient(135deg, #f9ecc9, #e7c98a);
  color:#6b4d24; font-size:.5rem; font-weight:700; letter-spacing:.01em; white-space:nowrap;
  box-shadow:0 2px 6px rgba(184,134,90,.28);
  font-family:var(--vt-font-display);
}
/*  §9 — warm plum-brown 계열로(§4 복숭아/세이지 위에서도 읽히게), 너무 굵거나 검게 보이지 않게. */
body.sj-landing-active .sj-card-tt{
  /* Card Title 역할(§7) — 600~700 안. PART16 — 카드 제목은 한 줄. */
  font-size:.72rem; font-weight:var(--vt-w-card-title); color:#5c4430; text-align:center; letter-spacing:-.01em;
  white-space:nowrap; font-family:var(--vt-font-display);
}
/* Card Description 역할(§7) — 400~500 안, 제목보다 가볍게. PART16 — 설명은 최대 2줄. */
body.sj-landing-active .sj-card-sub{
  font-size:.58rem; font-weight:var(--vt-w-card-desc); color:#9c8268; text-align:center; line-height:1.3;
  font-family:var(--vt-font-display);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  /*  412px 실측에서 [오늘의 운세를 확인해보세 / 요] 처럼 낱말 한가운데가 끊겼다.
      한국어는 어절 단위로 접는다(keep-all). 글자 크기·카드 폭은 그대로 두고 줄바꿈 자리만 고친다. */
  word-break:keep-all; overflow-wrap:break-word;
}
/*  PART2 — 토정비결·궁합 신규 콘텐츠 표시는 **매우 얇은 hairline 하나**뿐이다. 강한 금테·
    과도한 glow·반짝이는 테두리·진한 보라·SALE 배지는 전부 안 쓴다(사람 지시 그대로) —
    테두리 굵기는 1px 유지, 색만 골든 쪽으로 아주 조금 + 안쪽 hairline 1줄만 얹는다. */
body.sj-landing-active .sj-card-new{
  border-color:rgba(201,169,97,.62);
  box-shadow:0 4px 14px rgba(184,134,90,.14), inset 0 0 0 1px rgba(244,227,174,.55);
}
body.sj-landing-active .sj-card-new:active{
  box-shadow:0 6px 18px rgba(184,134,90,.2), inset 0 0 0 1px rgba(244,227,174,.7);
}
/*  reduced-motion 환경에서는 반짝임과 탭 반응 스케일을 끈다(기능은 그대로 돈다). */
@media (prefers-reduced-motion:reduce){
  body.sj-landing-active .sj-ico-shine{ display:none; }
  body.sj-landing-active .sj-card.sj-anim-active .sj-card-ico-wrap{ transition:none; transform:none; }
}

/* ── 하연에게 물어보기 — 3개 카드 아래 얇은 pill, 그 자체도 독립된 floating 오브젝트(§6) ── */
/*  2026-09-08 [입구씬 MASTER 적용] §13 — 3개 카드와 같은 급이 아니라 이 화면의 주 상담 CTA다.
    충분한 터치 타깃(44px↑) + 은은한 그라디언트로 무게를 살짝 올린다(광고 배너처럼
    안 보이게 폭 100%·라운드 pill 은 그대로 — 크기만 카드보다 확실히 커 보이게). */
/* ★ 2026-09-10 §4 — 세이지→샴페인골드 그라디언트로(라벤더 → 사주집 고유색). */
body.sj-landing-active .sj-landing-ai{
  display:flex; align-items:center; gap:9px; width:100%;
  min-height:50px; padding:9px 17px; margin:0;
  border:1px solid rgba(212,183,140,.6); border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg, #f3efe1, #eadfc5);
  box-shadow:0 4px 14px rgba(184,144,90,.2), inset 0 1px 0 rgba(255,248,224,.5);
  color:#5c4430; font:inherit; text-align:left;
  transition:transform .12s ease, box-shadow .12s ease;
}
body.sj-landing-active .sj-landing-ai:active{ transform:scale(.98); background:linear-gradient(135deg, #ece5d2, #ded0ab); }
/*  §11 — 아이콘 22→25px(+14%). */
body.sj-landing-active .sj-ai-ico{ flex:0 0 auto; width:25px; height:25px; object-fit:contain; -webkit-user-drag:none; }
/* CTA 역할(§7) — 이 화면의 주 상담 CTA, 600~700 상단. */
body.sj-landing-active .sj-landing-ai .sjl-tx{
  flex:1 1 auto; font-size:.84rem; font-weight:var(--vt-w-cta);
  font-family:var(--vt-font-display);
}
body.sj-landing-active .sj-ai-arrow{
  flex:0 0 auto; width:23px; height:23px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.75); color:#a86a3a; font-size:1rem; font-weight:700;
}

/* ── 상단 배지·음악 — [‹ 마을] 은 기존 backhome 그대로, 배지는 여기서 새로 심는다 ──
   ★ 배지는 랜딩(#sj-landing) **밖**의 형제 요소다 — 안에 넣으면 랜딩 컨테이너의
   z-index(10)가 쌓임 맥락을 만들어, 자식이 아무리 z 를 올려도 z22 인 backhome/ⓘ 보다
   위로 못 올라간다(랜딩이 사라지기 전엔 항상 그 아래 깔린다).
   §2 — 우측은 새 아이콘을 만들지 않고 **실제 음악칩**(bgm-player.js·#bgm-chip)을 그대로
   가져와 이 자리에 앉힌다 — 클릭하면 진짜 배경음악 선택 창이 뜬다(가짜 장식 아이콘 아님). */
.sj-landing-badge{ display:none; }
body.sj-landing-active .sj-landing-badge{
  display:inline-flex; align-items:center; gap:3px;
  position:fixed; z-index:22; left:50%; transform:translateX(-50%);
  top:var(--pg-row1, 12px); height:29px; padding:0 11px;
  border:1px solid var(--pg-line, rgba(255,255,255,.24)); border-radius:999px;
  background:linear-gradient(180deg, var(--pg-hi, rgba(255,255,255,.1)), transparent 42%), var(--pg-glass, rgba(38,28,56,.7));
  color:var(--pg-ink, #f6efe3); font-size:.7rem; font-weight:700; letter-spacing:.02em;
  font-family:var(--vt-font-display);
  box-shadow:0 2px 8px rgba(18,11,32,.22); white-space:nowrap;
}
/* [‹ 마을] — §2 "상단 마을 텍스트에도 공통 Rounded Font". 전역 back-home.css 는 앱 전체가
   같이 쓰므로 여기서 이 화면 안에서만(body.sj-landing-active) 폰트만 얹는다(크기·자리는
   그대로 — 전역 규칙을 그대로 물려받는다). */
body.sj-landing-active .backhome{ font-family:var(--vt-font-display); }
/*  2026-09-08(2차 미세보정) §12 — [‹ 마을] 이 다른 요소보다 커 보인다. back-home.css 의
    공용 규격(44px·15px·.875rem — 다른 화면 전부 공용)은 안 건드리고, 이 화면에서만
    ~9% 줄인다(scoped !important — 랜딩이 사라지면 공용값으로 돌아온다). */
body.sj-landing-active .backhome.jelly{
  min-height:40px !important; padding:0 13px !important; font-size:.8rem !important;
}
/* saju-stage.css 의 `body.sj-on.premium-hud .bgm-chip{ top:auto; bottom:... }`(특정성 0,4,1)를
   이겨야 해서 !important 로 확정한다 — 랜딩이 사라지면(클래스가 빠지면) 그 규칙이 다시 산다. */
/*  2026-09-08(2차 미세보정) §14 — 마을 버튼과 같은 언어(축소 비율)로, 36→33px. */
body.sj-landing-active .bgm-chip{
  position:fixed !important; z-index:22 !important;
  top:var(--pg-row1, 12px) !important; right:12px !important; bottom:auto !important; left:auto !important;
  width:33px !important; height:33px !important; min-width:0 !important; min-height:0 !important; padding:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border-radius:50% !important; background:rgba(255,255,255,.14) !important; border:1px solid var(--pg-line, rgba(255,255,255,.24)) !important;
  box-shadow:0 2px 8px rgba(18,11,32,.22) !important;
}
body.sj-landing-active .bgm-chip-title,
body.sj-landing-active .bgm-chip .bgm-eq{ display:none !important; }
body.sj-landing-active .bgm-chip::before{ content:"🎵"; font-size:.92rem; line-height:1; }
body.sj-landing-active .bgm-chip:not(.is-playing)::before{ content:"🔇"; opacity:.6; }

/* 랜딩이 떠 있는 동안은 그 화면의 이름줄(하연 · 사주 상담사)을 숨긴다 — 이 자리는
   지금 "사주집" 배지가 대신한다. 상담이 시작되면(랜딩이 사라지면) 원래대로 돌아온다.
   saju-stage.css 의 body.sj-on 규칙(같은 특정성)보다 이 파일이 뒤에 실리므로 이겨야
   하지만, 로드 순서 실수를 대비해 !important 로 확정한다. */
body.sj-landing-active header.char-header{ display:none !important; }

/* saju-stage.css 는 은화·ⓘ 를 [무대 바로 아래]로 옮겨 두는데(그 계산이 --sj-stage-h 기준이다),
   랜딩엔 그 무대 띠가 없어 화면 아래쪽 — 하필 랜딩 하단 카드 위 — 로 떨어져 겹친다(2026-09-07
   첫 캡처 실측). 랜딩이 떠 있는 동안은 숨긴다 — 상담이 실제로 시작되면(랜딩이 사라지면) 그대로
   돌아온다. 은화는 상담 중에나 의미 있는 위젯이라 이 화면에서 잠깐 숨겨도 기능 삭제가 아니다.
   음악(.bgm-chip)은 §2 지시로 위에서 다시 살려 배지 옆에 앉혔다 — 여기서는 안 건드린다. */
body.sj-landing-active .hud-info,
body.sj-landing-active .tarot-coin-widget{ display:none !important; }

/* #250(2026-09-07) 입구씬 리마스터 실측 — 좌하단 고정 `.tarot-audio-widget`(audio.js · 전 화면
   공통 x12~55·y865~901, 412px)이 새 3카드+하연에게 물어보기 패널과 겹친다(헤드리스 412x915
   재현). 지우지 않는다 — hud-info·tarot-coin-widget 과 같은 방식으로 랜딩 동안만 숨긴다.
   상담이 시작되면(랜딩이 사라지면) 원래대로 돌아와 그대로 쓸 수 있다. */
body.sj-landing-active .tarot-audio-widget{ display:none !important; }

/* ── 화면이 짧을 때 — 여백부터 줄인다(캐릭터를 지우거나 패널을 잘라내지 않는다, §14) ──
   순서: ① 말풍선 → ② 하연 영역 → ③ 카드 padding. */
@media (max-height:760px){
  body.sj-landing-active .sj-landing-bubble{ top:18%; padding:7px 9px 8px; }
}
@media (max-height:680px){
  body.sj-landing-active .sj-landing-yeonhui-wrap{ height:min(88%, 430px); }
  body.sj-landing-active .sj-landing-bubble{ top:13%; padding:6px 9px 7px; }
  body.sj-landing-active .sj-card{ padding:6px 5px 6px; }
  body.sj-landing-active .sj-card-ico{ width:28px; height:28px; }
  body.sj-landing-active .sj-landing-ai{ min-height:36px; padding:5px 12px; }
  /*  2단도 같은 순서로 줄인다(여백부터 · 글자는 안 줄인다). */
  body.sj-landing-active .sj-card-wide{ padding:6px 8px; gap:6px; }
  body.sj-landing-active .sj-card-wide .sj-card-ico{ width:26px; height:26px; }
  body.sj-landing-active .sj-landing-cards,
  body.sj-landing-active .sj-landing-cards2{ gap:5px; margin:0 0 5px; }
}
@media (min-width:480px){
  body.sj-landing-active .sj-landing-panel{ max-width:520px; margin:0 auto; width:100%; }
}

/* 884 — iOS: 정적 배지·카드 줄이 JS 가 문구를 바꾸기 전 첫 프레임에 [사주집]·[오늘 운세]로 비치지 않게(플랫폼은 platform.js 가 <html data-platform> 으로 먼저 단다). 배지는 saju.js 가 치환을 끝내면 .sj-ios-ready 로 다시 보인다. Android·웹은 이 선택자에 안 걸린다. */
html[data-platform="ios"] .sj-landing-badge:not(.sj-ios-ready){ visibility:hidden; }
html[data-platform="ios"] .sj-landing-cards{ display:none; }

/* ══ 1.1.2 운세 메뉴 풍성판 — 카드 19칸(fortune-menu.json) + 기기 안 기본 풀이 패널 (분리계획 §3-1) ══
   패널이 길어져도 하연 무대를 덮지 않게 최대 높이를 두고 칸만 스크롤한다. 기존 .sj-card 규칙을 그대로 물려받는다. */
body.sj-landing-active .sj-landing-panel.sjl-has-fm{ display:flex; flex-direction:column; max-height:62dvh; overflow:hidden; }
body.sj-landing-active .sjl-fm-wrap{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
body.sj-landing-active .sjl-fm-wrap[hidden], body.sj-landing-active .sjl-local[hidden]{ display:none; }
body.sj-landing-active .sjl-fm-bigrow{ display:flex; gap:7px; margin:0 0 7px; }
body.sj-landing-active .sjl-fm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 0 7px; }
body.sj-landing-active .sj-card.sjl-fm-big{ padding:10px 4px 9px; }
body.sj-landing-active .sj-card.sjl-fm-big .sj-card-ico{ width:38px; height:38px; }
body.sj-landing-active .sjl-fm-grid .sj-card-wide{ padding:7px 8px; gap:7px; }
body.sj-landing-active .sjl-fm-grid .sj-card-wide .sj-card-ico{ width:28px; height:28px; }
body.sj-landing-active .sjl-fm-grid .sj-card-wide .sj-card-tt{ font-size:.7rem; }
body.sj-landing-active .sjl-fm-grid .sj-card-wide .sj-card-sub{ -webkit-line-clamp:1; }
body.sj-landing-active .sj-landing-panel.sjl-has-fm .sj-landing-ai{ flex:0 0 auto; margin-top:2px; min-height:44px; }

body.sj-landing-active .sjl-local{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; margin:0 0 6px; padding:10px 12px 12px;
  border:1px solid rgba(224,186,140,.55); border-radius:20px; background:linear-gradient(165deg, rgba(255,252,247,.96), rgba(255,240,224,.9)); box-shadow:0 4px 14px rgba(184,134,90,.16); color:#4a3826; }
body.sj-landing-active .sjl-fm-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
body.sj-landing-active .sjl-fm-back{ flex:none; min-height:36px; padding:0 12px; border:1px solid rgba(201,169,97,.7); border-radius:18px; background:#fff8e6; color:#6a4a2c; font:inherit; font-size:.72rem; cursor:pointer; }
body.sj-landing-active .sjl-fm-title{ margin:0; font-size:1rem; font-weight:700; color:#5c4430; }
body.sj-landing-active .sjl-fm-p{ margin:6px 0; font-size:.84rem; line-height:1.55; word-break:keep-all; }
body.sj-landing-active .sjl-fm-rows{ margin-top:6px; border-top:1px dashed rgba(122,90,60,.35); }
body.sj-landing-active .sjl-fm-row{ display:flex; gap:8px; align-items:flex-start; padding:5px 0; border-bottom:1px dashed rgba(122,90,60,.22); }
body.sj-landing-active .sjl-fm-k{ flex:none; min-width:46px; padding:1px 6px; border-radius:10px; background:#f4e1b4; text-align:center; font-size:.72rem; color:#5a3a2c; }
body.sj-landing-active .sjl-fm-v{ flex:1; font-size:.8rem; line-height:1.45; word-break:keep-all; }
body.sj-landing-active .sjl-fm-duo{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; }
body.sj-landing-active .sjl-fm-box{ padding:6px 8px; border-radius:10px; background:rgba(255,255,255,.75); box-shadow:inset 0 0 0 1.5px #e3c88f; }
body.sj-landing-active .sjl-fm-box.is-avoid{ box-shadow:inset 0 0 0 1.5px #d98c7a; }
body.sj-landing-active .sjl-fm-box.is-do{ box-shadow:inset 0 0 0 1.5px #7cae7a; }
body.sj-landing-active .sjl-fm-box em{ display:block; font-style:normal; font-size:.66rem; color:#7a5a45; }
body.sj-landing-active .sjl-fm-box span{ display:block; margin-top:2px; font-size:.78rem; line-height:1.4; word-break:keep-all; }
body.sj-landing-active .sjl-fm-lucky{ display:flex; gap:6px; margin-top:8px; }
body.sj-landing-active .sjl-fm-chip{ flex:1; padding:5px 3px; border-radius:10px; background:#f9ecc8; text-align:center; }
body.sj-landing-active .sjl-fm-chip em{ display:block; font-style:normal; font-size:.62rem; color:#7a5a45; }
body.sj-landing-active .sjl-fm-chip b{ display:block; font-size:.86rem; color:#3a2f2a; }
body.sj-landing-active .sjl-fm-actions{ margin-top:10px; }
body.sj-landing-active .sjl-fm-btn{ display:block; width:100%; min-height:44px; border:0; border-radius:22px; background:linear-gradient(135deg, #d4895a, #c4513c); color:#fff; font:inherit; font-size:.88rem; font-weight:700; cursor:pointer; }
body.sj-landing-active .sjl-fm-note{ margin:8px 0 0; font-size:.66rem; line-height:1.45; color:#9c8268; text-align:center; }

/* ── 하연 책방(consult-v2) 위에서의 배치 — 운세 메뉴가 주(主), 책갈피·힐링은 보조 한 줄, 하연에게 물어보기는 맨 아래 ── */
html.cv2-on body.sj-landing-active .sjl-has-fm .sjl-fm-wrap{ grid-column:1 / -1; order:1; max-height:38dvh; overflow-y:auto; }
html.cv2-on body.sj-landing-active .sjl-has-fm .sjl-local{ grid-column:1 / -1; order:1; max-height:56dvh; margin:0; }
html.cv2-on body.sj-landing-active .sjl-has-fm .cv2-book{ grid-column:1; order:2; min-height:56px; padding:6px 10px 6px 8px; }
html.cv2-on body.sj-landing-active .sjl-has-fm .cv2-heal{ grid-column:2; order:3; min-height:56px; padding:6px 10px 6px 8px; }
html.cv2-on body.sj-landing-active .sjl-has-fm .cv2-book .cv2-card-ico{ width:36px; height:36px; }
html.cv2-on body.sj-landing-active .sjl-has-fm .cv2-card-tx b{ font-size:15px; }
html.cv2-on body.sj-landing-active .sjl-has-fm .cv2-card-tx small{ font-size:12px; }
html.cv2-on body.sj-landing-active .sjl-has-fm .sj-landing-ai.cv2-talk{ grid-column:1 / -1; order:4; min-height:44px; }
html.cv2-on body.sj-landing-active .sjl-has-fm .cv2-hint{ display:none; }
html.cv2-on body.sj-landing-active .sjl-has-fm.sjl-reading .cv2-book,
html.cv2-on body.sj-landing-active .sjl-has-fm.sjl-reading .cv2-heal{ display:none; }
body.sj-landing-active .sjl-fm-actions{ position:sticky; bottom:-12px; margin:10px -12px -12px; padding:8px 12px 12px; background:linear-gradient(rgba(255,246,235,0), rgba(255,246,235,.97) 35%); }

/* 919 — 「오늘」 칸: 첫 줄에서 2칸 폭 · 1.5배 높이 · 오늘 아직 안 봤으면 분홍 점 (도깨비판 격자에서만 .sjl-fm-today 가 붙는다) */
body.sj-landing-active .sjl-fm-bigrow{ align-items:stretch; }
body.sj-landing-active .sj-card.sjl-fm-big{ flex:1 1 0; position:relative; }
body.sj-landing-active .sj-card.sjl-fm-big.sjl-fm-today{ flex:2 1 0; min-height:calc(1.5 * 92px); justify-content:center; }
body.sj-landing-active .sj-card.sjl-fm-big.sjl-fm-today .sj-card-ico{ width:52px; height:52px; }
body.sj-landing-active .sj-card.sjl-fm-big.sjl-fm-today .sj-card-tt{ font-size:1rem; }
body.sj-landing-active .sjl-fm-dot{ position:absolute; top:8px; right:8px; width:11px; height:11px; border-radius:50%; background:#d6336c; border:2px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.2); }