/* === Per-page themes — give each reading its own identity === Shared base lives in style.css; this only re-skins backgrounds, accents and motifs per class: .saju-page / .zodiac-page / .dream-page (tarot uses tarot_table.css). */ /* Large faint glyph behind each panel title */ .panel { position: relative; overflow: hidden; } .panel-title { position: relative; z-index: 1; } .theme-glyph { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 150px; line-height: 1; opacity: 0.06; pointer-events: none; z-index: 0; font-family: 'Noto Serif KR', serif; user-select: none; } /* ============================================================= SAJU — Eastern */ body.saju-page .stars { display: none; } body.saju-page .cosmos { background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(212, 184, 92, 0.22) 0%, transparent 55%), radial-gradient(ellipse 80% 70% at 85% 85%, rgba(150, 44, 44, 0.28) 0%, transparent 60%), radial-gradient(ellipse 70% 60% at 12% 75%, rgba(60, 45, 117, 0.40) 0%, transparent 60%), radial-gradient(ellipse 120% 120% at 50% 8%, #241829 0%, #170f22 55%, #0b0814 100%); } body.saju-page .panel { background: linear-gradient(180deg, rgba(248, 243, 232, 0.97) 0%, rgba(238, 226, 205, 0.97) 100%); border: 1px solid rgba(176, 124, 47, 0.5); box-shadow: 0 22px 64px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(212, 184, 92, 0.2); } body.saju-page .panel::before { /* top seal ribbon */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #962c2c, #c89b3c 50%, #962c2c); } body.saju-page .panel-title { color: #5a3413; letter-spacing: 20px; } body.saju-page .panel-title-sub { color: #a8761f; } body.saju-page .panel-lead { color: #6b4a2a; } body.saju-page .divider-line { color: #b8862f; } body.saju-page .btn-divine { background: linear-gradient(135deg, #e6cf8c, #c89b3c); color: #2b1a08; box-shadow: 0 8px 22px rgba(176, 124, 47, 0.4); } body.saju-page .fc-medallion { box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.35), 0 10px 30px rgba(150, 44, 44, 0.35); } /* ============================================================ ZODIAC — Celestial */ body.zodiac-page .cosmos { background: radial-gradient(ellipse 75% 55% at 50% 8%, rgba(86, 130, 220, 0.40) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 18% 75%, rgba(60, 90, 200, 0.32) 0%, transparent 60%), radial-gradient(ellipse 70% 60% at 85% 70%, rgba(120, 90, 200, 0.30) 0%, transparent 60%), radial-gradient(ellipse 120% 120% at 50% 0%, #101a3a 0%, #0c1430 45%, #070a1c 100%); } body.zodiac-page .stars { animation-duration: 6s; opacity: 0.9; } body.zodiac-page .panel { background: linear-gradient(180deg, rgba(20, 28, 56, 0.92) 0%, rgba(12, 18, 40, 0.95) 100%); border: 1px solid rgba(130, 170, 235, 0.35); color: #dce6ff; box-shadow: 0 22px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(160, 190, 255, 0.12); } body.zodiac-page .panel .back { color: #9fb6e6; } body.zodiac-page .panel-title { color: #eaf1ff; letter-spacing: 12px; text-shadow: 0 0 22px rgba(120, 170, 255, 0.5); } body.zodiac-page .panel-title-sub { color: #8fc7e6; } body.zodiac-page .panel-lead { color: #b9c6ec; } body.zodiac-page .divider-line { color: #7fb0e6; } body.zodiac-page .input-group label { color: #aebfe8; } body.zodiac-page .input-group input, body.zodiac-page .input-group select { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(130, 170, 235, 0.35); color: #eef3ff; } body.zodiac-page .btn-divine { background: linear-gradient(135deg, #9fd4f0, #5b8fd6); color: #08122b; box-shadow: 0 8px 24px rgba(91, 143, 214, 0.45); } body.zodiac-page .zodiac-cell { border-color: rgba(130, 170, 235, 0.25); } /* =============================================================== DREAM — Ethereal */ body.dream-page .cosmos { background: radial-gradient(ellipse 70% 50% at 75% 12%, rgba(120, 200, 200, 0.30) 0%, transparent 60%), radial-gradient(ellipse 70% 60% at 18% 80%, rgba(180, 120, 210, 0.34) 0%, transparent 62%), radial-gradient(ellipse 60% 50% at 50% 50%, rgba(90, 130, 220, 0.18) 0%, transparent 60%), radial-gradient(ellipse 130% 130% at 50% 0%, #1c1640 0%, #161033 50%, #0c0a1e 100%); } body.dream-page .stars { opacity: 0.5; animation-duration: 7s; } body.dream-page::after { /* soft moon glow top-right */ content: ""; position: fixed; top: -120px; right: -100px; width: 420px; height: 420px; border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(230, 235, 255, 0.22) 0%, rgba(180, 200, 255, 0.10) 40%, transparent 70%); } body.dream-page .panel { background: linear-gradient(180deg, rgba(36, 28, 70, 0.78) 0%, rgba(22, 16, 48, 0.85) 100%); border: 1px solid rgba(170, 150, 230, 0.32); color: #ece6ff; backdrop-filter: blur(3px); box-shadow: 0 22px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(200, 185, 255, 0.12); } body.dream-page .panel .back { color: #c3b6e8; } body.dream-page .panel-title { color: #f1ecff; letter-spacing: 14px; text-shadow: 0 0 26px rgba(180, 160, 240, 0.55); } body.dream-page .panel-title-sub { color: #9fd6cf; } body.dream-page .panel-lead { color: #cfc4ec; } body.dream-page .divider-line { color: #b59be0; } body.dream-page #dream-form .input-group label { color: #c8bce8; } body.dream-page .btn-divine { background: linear-gradient(135deg, #c9b6f0, #7fcfd0); color: #1a1240; box-shadow: 0 8px 24px rgba(140, 120, 220, 0.45); } /* dark panels: let the result card stand on its own (no light wrapper box) */ body.zodiac-page .result, body.dream-page .result { background: transparent; border: none; box-shadow: none; padding: 0; margin-top: 28px; } /* zodiac sign grid on the dark panel */ body.zodiac-page .zodiac-cell .nm { color: #dce6ff; } body.zodiac-page .zodiac-cell .sym { color: #8fc7e6; } body.zodiac-page .note { color: #aebfe8; }