/* saju-3d.css — 사주 시간축 3D 패널. **사주 페이지에서만 불러온다.**
   site.css 에 두면 꿈 상세 148편까지 5.5KB 를 더 받는다. 트래픽 94%가 모바일이다(9월 실측).
   짝: site/assets/saju-3d.js · 마크업: site/layouts/saju-body.html
   라이브러리 0개. CSS transform 만으로 원반을 눕힌다(DECISIONS 2026-09-13).
   .s3-idle → .s3-busy → .s3-locked 순으로 상태가 바뀐다. */
.s3{position:relative;border-radius:18px;overflow:hidden;padding:13px 12px 14px;color:#EDEAE2;margin:0 0 16px;
  background:radial-gradient(120% 90% at 50% 0%,#16203A 0%,#0B0E16 55%,#07090F 100%);
  box-shadow:0 10px 34px rgba(12,16,30,.28)}
.s3::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;
  background:linear-gradient(transparent 0 calc(100% - 1px),rgba(120,200,255,.16) 100%) 0 0/100% 26px,
             linear-gradient(90deg,transparent 0 calc(100% - 1px),rgba(120,200,255,.10) 100%) 0 0/26px 100%;
  -webkit-mask:radial-gradient(80% 70% at 50% 44%,#000 25%,transparent 78%);
          mask:radial-gradient(80% 70% at 50% 44%,#000 25%,transparent 78%)}
.s3-top{position:relative;z-index:4}
/* ⚠️ site.css 의 `.page p, .page li{color:var(--ink)}` 가 (0,2,0) 이라 클래스 하나로는 진다.
   패널 안의 <p> 는 #saju3d 를 붙여 확실히 이긴다(09-15 실측: 글자가 검게 나왔다). */
#saju3d .s3-eyebrow{font-size:10.5px;letter-spacing:.18em;color:#9DE6F2;margin:0;font-weight:600}

.s3-stage{position:relative;height:370px;perspective:1000px;perspective-origin:50% 47%;z-index:2}
.s3-disc{position:absolute;left:50%;top:53%;width:330px;height:330px;margin:-165px 0 0 -165px;
  transform-style:preserve-3d;transform:rotateX(33deg)}   /* 44→33: 운영자 지적, 글자를 더 세운다(09-15) */
.s3-layer{position:absolute;inset:0;transform-style:preserve-3d}
/* --in/--out 은 px 다. % 로 쓰면 기준이 가장 먼 모서리(233px)라 라벨 반지름과 어긋난다(09-15 실측) */
.s3-ring{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--tc) 0 calc(var(--p)*.5),transparent calc(var(--p)*.5) var(--p));
  -webkit-mask:radial-gradient(circle,transparent 0 var(--in),#000 var(--in) var(--out),transparent var(--out));
          mask:radial-gradient(circle,transparent 0 var(--in),#000 var(--in) var(--out),transparent var(--out));
  border:1px solid rgba(140,190,225,.16);opacity:.5;transition:opacity .5s}
.s3-busy .s3-ring,.s3-locked .s3-ring{opacity:.9}

/* 칸 — 전부 한글. 한자 없음.
   세 고리의 반지름 여유가 원반 최대치라 대각선에서 글자가 겹친다. 칸마다 바탕을 깔아
   겹쳐도 앞의 것이 읽히게 한다(09-14 운영자 지적: "글씨가 잘 안 보인다"). */
/* 글자 테두리는 **흐린 그림자가 아니라 또렷한 선**이다 — 흐린 그림자는 오히려 번져 보였다
   (09-15 운영자: "테두리가 흐릿해서 더 안 보인다. 차라리 테두리를 해줘"). 사방 1px 하드 섀도를 쓴다. */
.s3-cell{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;
  white-space:nowrap;color:#E4EBF7;font-weight:700;
  text-shadow:1px 1px 0 #05070C,-1px 1px 0 #05070C,1px -1px 0 #05070C,-1px -1px 0 #05070C,0 2px 4px rgba(5,7,12,.9);
  background:rgba(7,10,18,.78);border:1px solid rgba(150,180,220,.28);border-radius:999px;
  transition:color .45s,background .45s,border-color .45s}
#s3-tti{z-index:1}#s3-gi{z-index:2}#s3-du{z-index:3}   /* 안쪽 고리가 위로 */
.s3-cell .s3-cap{position:absolute;inset:-3px -7px;border-radius:999px;z-index:-1;opacity:0;transform:scale(.75);
  background:linear-gradient(180deg,#FBEFC6,#E7C877);border:1.5px solid #6E5312;
  box-shadow:0 0 10px rgba(234,208,138,.55);
  transition:opacity .3s,transform .35s cubic-bezier(.2,1.5,.4,1)}
/* 맞은 칸: 금색 바탕에 검은 글자. 번짐(그림자)을 아예 없애야 가장자리가 선다.
   z-index 로 이웃 위에 올린다 — 10년 칸은 맞으면 넓어져서 옆 칸을 덮는다(09-15). */
.s3-cell.on{color:#231A03;font-weight:800;background:transparent;border-color:transparent;text-shadow:none;z-index:4}
.s3-cell.on .s3-cap{opacity:1;transform:scale(1)}
.s3-cell.dim{color:#9FAABF;border-color:rgba(150,180,220,.16)}
.s3-cell.s3-du{width:35px;height:22px;margin:-11px 0 0 -17.5px;font-size:13px}
.s3-cell.s3-du.on{width:74px;margin-left:-37px;font-size:13.5px}
.s3-cell.s3-gi{width:55px;height:22px;margin:-11px 0 0 -27.5px;font-size:13px}
.s3-cell.s3-tti{width:55px;height:23px;margin:-11.5px 0 0 -27.5px;font-size:13.5px}

.s3-core{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  transform:translateZ(14px);opacity:.25;transition:opacity .7s;
  background:radial-gradient(circle,rgba(255,248,226,.95) 0%,rgba(234,208,138,.5) 45%,rgba(234,208,138,0) 72%)}
.s3-locked .s3-core{opacity:1}
/* 12시 지시자 — 고리가 멈추는 자리. 운영자 질문("윗쪽 화살표가 뭐야?")에 답이 필요해 설명을 붙였다 */
#saju3d .s3-cap-note{position:absolute;left:0;right:0;top:13px;text-align:center;font-size:10px;letter-spacing:.02em;
  color:#9AA7C0;z-index:5;margin:0;transition:opacity .5s}
.s3-locked .s3-cap-note{opacity:.45}
.s3-idx{position:absolute;left:50%;top:-3px;width:0;height:0;margin-left:-6px;z-index:5;
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:11px solid #EAD08A;
  filter:drop-shadow(0 0 6px rgba(234,208,138,.8))}
#saju3d .s3-hint{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:12.5px;color:#A3ACC2;z-index:4;
  margin:0;transition:opacity .4s}
.s3-busy .s3-hint,.s3-locked .s3-hint{opacity:0}

.s3-legend{position:relative;z-index:4;display:grid;gap:2px}
.s3-lg{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:8px;
  padding:3px 9px;border-radius:8px;background:rgba(140,175,220,.07);border:1px solid rgba(146,178,214,.14);
  transition:background .4s,border-color .4s}
.s3-lg.hit{background:rgba(234,208,138,.14);border-color:rgba(234,208,138,.45)}
.s3-dot{width:7px;height:7px;border-radius:50%}
.s3-n{font-size:10.5px;color:#9AA4BA;line-height:1.3}
.s3-n b{display:inline;color:#DCE5F4;font-size:12px;font-weight:600;margin-right:6px}
.s3-v{font-size:13.5px;color:#7B85A0;font-weight:700;text-align:right}
.s3-lg.hit .s3-v{color:#F6E4AC}

/* 사주 결과 뒤 다음 걸음 — 3D 는 아니지만 사주 페이지 전용이라 같은 파일에 둔다 */
.sj-next .to-today{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  margin-top:4px;min-height:52px;border-radius:11px;background:var(--accent-bg);color:var(--ink);
  text-decoration:none;text-align:center}
.sj-next .to-today b{font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.sj-next .to-today span{font-size:12.5px;color:#5C4A16}

/* 아주 좁은 화면(≤374px, 옛 iPhone SE·일부 안드로이드)에서는 원반을 줄인다.
   칸 위치는 JS 가 px 로 잡으므로 원반 자체를 축소해야 바깥 띠 글자가 잘리지 않는다
   (09-15 실측: 320px 에서 좌 -6px · 우 +6px 잘림). */
@media (max-width:374px){
  #saju3d .s3-stage{height:330px}
  #saju3d .s3-disc{transform:rotateX(33deg) scale(.8)}
}