/* ═══ ✦ 천문시계 고급 옷 (독립형 · 사장님 10-27 「여기도 고급으로 만들어 줘 — 주역 점을 만드니 여기가 상대적으로 싸 보이네」) ═══
 * 주역 점(주역.html)과 같은 결 — 먹빛 바탕에 금빛 은은한 빛 · 괘 무늬 아주 옅게 · 금박 알약 단추 · 안쪽 실선 두른 창
 * ⚠ 색의 뜻은 그대로 둔다(시계/사주 = 금 · 운10/사주/대운 = 보라 · 사람 = 분홍 · 손님 = 초록) — 모양만 바꾼다
 * ⚠ 판(캔버스)에는 그림자 필터를 걸지 않는다 — 1초에 열 번 다시 그려서 무거워진다. 판 테두리 금속 결은 태양_우주.html goldRim()
 * 연결: 태양_우주.html <head> 의 </style> 뒤 <link> 1줄 — 빼면 예전 모양
 */
:root { --pm-gold:#e9c46a; --pm-gold-hi:#fff1c1; --pm-gold-lo:#9c7a2c; --pm-ink:#07090c; }

/* 바탕 — 위에서 비치는 금빛 · 아래 옥빛 · 괘 무늬 */
body { background:
    radial-gradient(1200px 640px at 50% -8%, rgba(233,196,106,.11), transparent 62%),
    radial-gradient(900px 600px at 100% 100%, rgba(127,200,169,.05), transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 0%, #121a21 0%, #0a0e12 58%, var(--pm-ink) 100%) !important; }
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23e9c46a'%3E%3Crect x='20' y='18' width='26' height='3'/%3E%3Crect x='20' y='26' width='11' height='3'/%3E%3Crect x='35' y='26' width='11' height='3'/%3E%3Crect x='20' y='34' width='26' height='3'/%3E%3Crect x='76' y='78' width='11' height='3'/%3E%3Crect x='91' y='78' width='11' height='3'/%3E%3Crect x='76' y='86' width='26' height='3'/%3E%3Crect x='76' y='94' width='11' height='3'/%3E%3Crect x='91' y='94' width='11' height='3'/%3E%3C/g%3E%3C/svg%3E"); }

/* 머리 — 제목 금박을 더 밝게 · 인장 빛 */
.lxHead h1 { background-image:linear-gradient(180deg, #fff6d6, #e9c46a 55%, #a7812f) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;   /* ⚠ background 줄임꼴은 clip 을 되돌려 네모로 칠해진다 */
  text-shadow:none; filter:drop-shadow(0 2px 10px rgba(233,196,106,.18)); }
.lxSeal { filter:drop-shadow(0 0 14px rgba(233,196,106,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.6)) !important; }
.lxRule::before, .lxRule::after { background:linear-gradient(90deg, transparent, rgba(233,196,106,.7), transparent) !important; }

/* 판 머리 줄 — 알약 묶음(유리 판 + 금 테) */
/* 밑바탕 투명 (사장님 11-04 「원판 위에 메뉴 밑바탕을 투명으로」) — 금 테만 남기고 판이 비쳐 보이게 · 글자엔 그림자로 읽힘 지킴 */
#modeBox, #subBox.show, #whoBox.show { padding:3px; border-radius:999px; background:transparent !important;
  border:1px solid rgba(214,178,94,.38); box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; gap:3px; }
#modeBox button, #subBox button, #whoBox button { text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6); }
#modeBox button, #subBox button, #whoBox button { border:1px solid transparent !important; background:transparent !important; color:#e8dcb8;
  border-radius:999px !important; padding:5px 13px !important; font-size:13px !important; transition:background .2s, color .2s, box-shadow .2s; margin-left:0 !important; }
#modeBox button:hover, #subBox button:hover, #whoBox button:hover { background:rgba(233,196,106,.10) !important; color:var(--pm-gold-hi); }
#modeBox button.on { background:linear-gradient(180deg,#fbe7a6,#e2b553 55%,#b8892f) !important; color:#2a1a02 !important;
  box-shadow:0 3px 12px rgba(233,196,106,.32), inset 0 1px 0 rgba(255,255,255,.6); }
#subBox button.on { background:linear-gradient(180deg,#b9a2f2,#7b5cc4 60%,#5a3f9c) !important; color:#fff !important;
  box-shadow:0 3px 12px rgba(123,92,196,.35), inset 0 1px 0 rgba(255,255,255,.35); }
#whoBox button.on { background:linear-gradient(180deg,#f29ac2,#c2477e 60%,#8f2c5a) !important; color:#fff !important;
  box-shadow:0 3px 12px rgba(194,71,126,.35), inset 0 1px 0 rgba(255,255,255,.35); }
#whoBox button.gbOn { background:linear-gradient(180deg,#8fd6a8,#2f6b45 65%) !important; color:#fff !important; }

/* 가운데 금 단추 · 보석 단추 — 빛을 조금 더 */
.colToggle.center { box-shadow:0 0 0 3px rgba(233,196,106,.18), 0 0 22px rgba(233,196,106,.35), 0 4px 12px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.6) !important; }
.colToggle.stub { border-color:rgba(233,196,106,.6) !important; }
.colLabel { color:#cdbb8a !important; }

/* 출력 창 · 풀이 창 — 카드처럼(안쪽 실선 · 깊은 그림자 · 명조 제목) */
.lxPanel { background:linear-gradient(180deg, rgba(20,26,32,.98), rgba(11,15,19,.98)) !important; border-color:rgba(233,196,106,.42) !important; border-radius:14px !important;
  box-shadow:0 22px 60px rgba(0,0,0,.6), inset 0 0 0 4px rgba(11,15,19,.98), inset 0 0 0 5px rgba(214,178,94,.12), inset 0 1px 0 rgba(255,255,255,.04) !important; }
.lxPanel h3 { font-family:var(--lx-serif); letter-spacing:.03em; color:var(--pm-gold-hi) !important; padding-bottom:6px; border-bottom:1px solid rgba(214,178,94,.18); }
.sayBody h4, .helpBody h4 { font-family:var(--lx-serif); color:var(--pm-gold-hi) !important; }
#hoverTip { background:linear-gradient(180deg, rgba(20,26,32,.97), rgba(9,12,15,.97)) !important; border-color:rgba(233,196,106,.55) !important; border-radius:10px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.6), inset 0 0 0 3px rgba(9,12,15,.97), inset 0 0 0 4px rgba(214,178,94,.1) !important; }
.lxBtn { background:linear-gradient(180deg, rgba(251,231,166,.22), rgba(184,137,47,.18)) !important; border-color:rgba(233,196,106,.6) !important; color:var(--pm-gold-hi) !important; border-radius:999px !important; }
.lxBtn:hover { filter:brightness(1.12); }

/* 확대 · 축소 알약 */
.wheelZoom { border-color:rgba(233,196,106,.45) !important; background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }   /* 밑바탕 투명 (11-04) */
.wheelZoom .wz-pct { text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6); }
.wheelZoom button { background:radial-gradient(circle at 35% 30%, rgba(255,241,193,.3), rgba(214,178,94,.12) 70%) !important; }

/* 가운데 메뉴 원 — 금 테에 빛 */
#hubCenter { border-color:var(--pm-gold) !important; box-shadow:0 0 0 3px rgba(233,196,106,.14), 0 0 30px rgba(233,196,106,.12), 0 8px 28px rgba(0,0,0,.65) !important; }

/* 스크롤 막대 — 금 실 */
* { scrollbar-color:rgba(214,178,94,.45) transparent; }