/*  청운의 오늘 숫자 점지 — DAILY SIX NUMBERS  (2026-09-22 사람 지시)
 *
 *  도사집 랜딩(body.dj-on.dj-landing)에만 붙는 새 규칙이다. 기존 선택자를 재선언하지
 *  않는다 — 전부 `.dj-six-*` 새 이름이다(2026-09-13 dj-bottom position 회귀와 같은
 *  덮어쓰기 사고를 만들지 않기 위해서다).
 *  색은 도사집 정체성 그대로: WARM IVORY(#FDF9F0) · CLEAR NAVY(#1F3450) ·
 *  SOFT TEAL(rgba(45,90,95,…)) · LANTERN GOLD(#C9A65A / #A8791F).
 *  금지(지시서 §2): 과도한 금색 · 카지노/슬롯 · 실제 로또공 모사 · 네온 · 화면 덮는 대형 CTA.
 */

/* ══ 1. 랜딩 카드 — [고민 있어]/[그냥 궁금해서] 아래 한 줄 ════════════════════
   위계는 두 상담 카드보다 **한 단 낮다**: 높이 68px → 46px, 배경 알파 .92 → .62,
   테두리 골드 .32 → .22, 그림자 없음. 청운이 화면의 주인공인 구조를 안 깬다. */
body.dj-on.dj-landing .dj-six-card{ flex: 0 0 auto; }

body.dj-on.dj-landing .dj-six-card-btn{
  width: 100%; box-sizing: border-box; min-height: 46px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 13px;
  border: 1px solid rgba(201,166,90,.22); border-radius: 14px;
  background: rgba(253,249,240,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #1f3450; font: inherit; text-align: left;
  cursor: pointer; transition: transform .12s ease, background-color .12s ease;
}
body.dj-on.dj-landing .dj-six-card-btn:active{
  transform: translateY(-1px); background: rgba(253,249,240,.78);
}
body.dj-on.dj-landing .dj-six-card-text{
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
body.dj-on.dj-landing .dj-six-card-tt{
  font-family: var(--vt-font-display); font-size: .68rem;
  font-weight: var(--vt-w-card-title); color: #1f3450;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.dj-on.dj-landing .dj-six-card-sub{
  font-family: var(--vt-font-display); font-size: .6rem;
  font-weight: var(--vt-w-card-desc); color: rgba(45,90,95,.78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/*  받은 뒤 상태 — 부제 자리에 숫자 여섯이 들어온다. 자간을 조금 벌려 읽히게 한다. */
body.dj-on.dj-landing .dj-six-card-sub.is-nums{
  font-size: .66rem; font-weight: 600; letter-spacing: .03em; color: #1f3450;
}
body.dj-on.dj-landing .dj-six-card-cta{
  flex: 0 0 auto; font-family: var(--vt-font-display); font-size: .62rem;
  font-weight: var(--vt-w-small-label); color: #a8791f; white-space: nowrap;
}

/* ══ 2. 점지 오버레이 ════════════════════════════════════════════════════════
   z-index 9700 — 음악칩(bgm-player.css z 9500)·프리미엄 HUD(z 21~23)·상단바(z 9400)를
   **전부 덮는다**. 무대 위에 반쯤 걸치는 층을 만들면 --stage-h 기준 위젯들과 좌표가
   겹친다(CLAUDE.md 함정 · 2026-09-10 실측). 겹칠 여지를 남기지 않는 쪽을 고른다. */
.dj-six-veil{
  position: fixed; inset: 0; z-index: 9700;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  /*  §4 "배경이 아주 살짝 어두워지고" — 청운·서재가 가장자리에서 계속 보일 만큼만 내린다
      (.56 은 실측상 배경이 거의 사라졌다 · 2026-09-22 360×800 캡처 대조). */
  background: rgba(16,20,34,.44);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: no-preference){
  .dj-six-veil{ animation: dj-six-veil-in .22s ease both; }
}
@keyframes dj-six-veil-in{ from{ opacity: 0; } to{ opacity: 1; } }

.dj-six-panel{
  position: relative; overflow: hidden;
  width: min(340px, 100%); box-sizing: border-box;
  max-height: calc(100dvh - 40px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 18px 16px 14px;
  border: 1px solid rgba(201,166,90,.38); border-radius: 22px;
  background: linear-gradient(160deg, rgba(253,249,240,.97), rgba(238,229,209,.94));
  box-shadow: 0 14px 40px rgba(12,16,30,.42);
  text-align: center;
}
/*  은은한 기운 — 별빛 입자·플래시·폭발 없이(§4 금지) 부드러운 빛무리 하나만 둔다.
    연출 중에만 아주 천천히 숨쉰다. */
.dj-six-panel::before{
  content: ""; position: absolute; left: 50%; top: 34%;
  width: 240px; height: 240px; margin: -120px 0 0 -120px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201,166,90,.26), rgba(201,166,90,0) 68%);
  opacity: 0; transition: opacity .4s ease;
}
.dj-six-panel.is-casting::before{ opacity: 1; }
@media (prefers-reduced-motion: no-preference){
  .dj-six-panel.is-casting::before{ animation: dj-six-glow 2.2s ease-in-out infinite; }
}
@keyframes dj-six-glow{
  0%,100%{ opacity: .55; transform: scale(.94); }
  50%    { opacity: 1;   transform: scale(1.04); }
}
.dj-six-panel > *{ position: relative; }

/*  청운의 말 — 연출 중/결과 두 문장이 같은 자리에서 바뀐다. 줄 수가 달라도 판이
    흔들리지 않도록 최소 높이를 고정한다(2줄 기준). */
.dj-six-say{ margin: 0 0 10px; }
.dj-six-say strong{
  display: block; font-family: var(--vt-font-display); font-size: .6rem;
  font-weight: 700; letter-spacing: .02em; color: #a8791f; margin-bottom: 3px;
}
.dj-six-say p{
  margin: 0; min-height: 2.5em;
  font-family: var(--vt-font-body); font-size: .74rem; line-height: 1.45;
  color: #1f3450; white-space: pre-line;
}

.dj-six-title{
  margin: 0 0 12px;
  font-family: var(--vt-font-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; color: #a8791f;
}

/*  숫자 알 — 한지/옥 느낌의 원형 메달. 실제 로또공(원색 채도 높은 구슬) 모사 금지(§2). */
.dj-six-grid{
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px;
}
.dj-six-ball{
  aspect-ratio: 1 / 1; min-height: 62px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(201,166,90,.5);
  background: radial-gradient(circle at 34% 28%, #fffdf7, #f0e6d2 62%, #e4d8bf);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.8), 0 2px 6px rgba(45,60,90,.12);
  font-family: var(--vt-font-display); font-size: 1.18rem; font-weight: 700;
  letter-spacing: .01em; color: #1f3450;
  opacity: 0;
}
.dj-six-ball.is-on{ opacity: 1; }
@media (prefers-reduced-motion: no-preference){
  .dj-six-ball{ transform: scale(.82); transition: opacity .26s ease, transform .26s cubic-bezier(.2,.9,.3,1.2); }
  .dj-six-ball.is-on{ transform: none; }
}

/*  결과에서만 보이는 세 줄 + 확인. 연출 중에도 **자리는 차지한다**(opacity 만 0) —
    숫자가 다 뜬 뒤 판 높이가 튀어 오르지 않게 한다. */
.dj-six-quote, .dj-six-keep, .dj-six-fine, .dj-six-ok{
  opacity: 0; transition: opacity .3s ease;
}
.dj-six-panel.is-done .dj-six-quote,
.dj-six-panel.is-done .dj-six-keep,
.dj-six-panel.is-done .dj-six-fine,
.dj-six-panel.is-done .dj-six-ok{ opacity: 1; }
.dj-six-panel:not(.is-done) .dj-six-ok{ pointer-events: none; }

.dj-six-quote{
  margin: 0 0 8px;
  font-family: var(--vt-font-body); font-size: .7rem; line-height: 1.45;
  color: rgba(45,90,95,.92);
}
.dj-six-keep{
  margin: 0 0 6px;
  font-family: var(--vt-font-display); font-size: 12px; line-height: 1.4;      /* 892 — 면책·안내 글은 12px 이상 */
  color: rgba(31,52,80,.72);
}
/*  §13 — 메인 콘텐츠보다 강조하지 않는다. 두 줄(\n) 그대로 흘린다. */
.dj-six-fine{
  margin: 0 0 12px;
  font-family: var(--vt-font-display); font-size: 12px; line-height: 1.45;      /* 892 — 면책문 8.48px → 12px */
  color: rgba(31,52,80,.72); white-space: pre-line;
}
.dj-six-ok{
  width: 100%; box-sizing: border-box; min-height: 42px;
  border: 1px solid rgba(201,166,90,.42); border-radius: 14px;
  background: linear-gradient(145deg, rgba(253,249,240,.98), rgba(236,226,204,.94));
  font-family: var(--vt-font-display); font-size: .76rem; font-weight: 600;
  color: #1f3450; cursor: pointer;
}
.dj-six-ok:active{ background: rgba(236,226,204,1); }
/*  결과가 뜨면 [확인]으로 포커스를 옮긴다(스크린리더가 판 안으로 들어오게) — 그런데 크롬 기본
    포커스 테두리가 검은 1px 링이라 아이보리 판 위에서 혼자 튄다(2026-09-22 360×800 캡처 실측).
    접근성은 그대로 두고 링만 골드로 바꾼다 — 끄지 않는다. */
.dj-six-ok:focus-visible{ outline: 2px solid rgba(168,121,31,.7); outline-offset: 2px; }

/*  짧은 화면(360×800 세로 여백이 빠듯한 기기) — 여백과 알 크기만 줄인다. */
@media (max-height: 700px){
  body.dj-on.dj-landing .dj-six-card-btn{ min-height: 42px; padding: 6px 12px; }
  .dj-six-panel{ padding: 14px 14px 12px; }
  .dj-six-grid{ gap: 8px; margin-bottom: 11px; }
  .dj-six-ball{ min-height: 54px; font-size: 1.04rem; }
  .dj-six-say p{ font-size: .7rem; }
}

/* ═══ WO-57 — [오늘의 숫자] 한 줄 알약: ✦ 오늘의 숫자 ····· 받아보기 › (높이 ≥44 · 글 ≥15) ═══ */
body.dj-on.dj-landing .dj-six-card-btn{ display: flex; flex-direction: row; align-items: center; width: 100%; min-height: 46px; padding: 0 14px 0 20px; box-sizing: border-box; border-radius: 23px;
  background: linear-gradient(rgba(248,242,228,.86), rgba(232,224,208,.8)); border: 1px solid rgba(217,180,114,.55); box-shadow: 0 2px 8px rgba(20,12,30,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.dj-on.dj-landing .dj-six-card-text{ display: flex; flex-direction: row; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
body.dj-on.dj-landing .dj-six-card-tt{ flex: 0 0 auto; font-size: 16px; font-weight: 700; color: #3f3040; }
body.dj-on.dj-landing .dj-six-card-sub{ display: none; font-size: 15px; color: #6b5a68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.dj-on.dj-landing .dj-six-card-sub.is-nums{ display: block; }
body.dj-on.dj-landing .dj-six-card-cta{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 16px; font-weight: 700; color: #b9741f; text-decoration: underline; text-underline-offset: 3px; }
body.dj-on.dj-landing .dj-six-card-cta::after{ content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='9 5 16 12 9 19' fill='none' stroke='%23b9741f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; text-decoration: none; display: inline-block; }