.oracle-page {
  background:
    radial-gradient(1200px 640px at 15% -12%, rgba(56, 189, 248, 0.22), transparent 58%),
    radial-gradient(980px 540px at 88% -18%, rgba(196, 181, 253, 0.25), transparent 60%),
    radial-gradient(760px 460px at 50% 120%, rgba(244, 114, 182, 0.14), transparent 62%),
    linear-gradient(180deg, #03040c 0%, #0b1024 42%, #111737 100%);
  color: #e2e8f0;
  min-height: 100vh;
}

.oracle-wrap { max-width: 1240px; margin: 0 auto; padding: 34px 16px 84px; }
.oracle-shell {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(9, 16, 34, .8), rgba(13, 23, 43, .72));
  border: 1px solid rgba(125, 211, 252, .28);
  border-radius: 26px;
  padding: 24px;
  box-shadow:
    0 30px 80px rgba(2, 6, 23, .58),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 90px rgba(139, 92, 246, .16);
  backdrop-filter: blur(6px);
}
.oracle-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(120deg, rgba(34,211,238,.08), transparent 44%, rgba(167,139,250,.12));
}

.oracle-header { position: relative; }
.oracle-hero {
  width: min(380px, 72vw);
  margin: 0 auto 14px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(196, 181, 253, .45);
  box-shadow: 0 22px 40px rgba(15, 23, 42, .68), 0 0 40px rgba(167,139,250,.35);
}
.oracle-hero img {
  width: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
}
.oracle-header h1 {
  text-align: center;
  font-size: clamp(1.62rem, 3.8vw, 2.5rem);
  font-weight: 900;
  letter-spacing: .01em;
  color: #f5f3ff;
  text-shadow: 0 0 24px rgba(196,181,253,.36);
}
.oracle-header p { color: #dbeafe; margin-top: 10px; line-height: 1.7; text-align: center; }

.mode-selector { display: flex; gap: 10px; margin: 18px 0 10px; flex-wrap: wrap; justify-content: center; }
.mode-btn {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(167,139,250,.36);
  background: rgba(7, 12, 28, .82);
  color: #e9d5ff;
  font-weight: 800;
  transition: all .2s ease;
}
.mode-btn:hover { transform: translateY(-1px); border-color: rgba(34,211,238,.6); box-shadow: 0 6px 20px rgba(14, 116, 144, .28); }
.mode-btn.active { background: linear-gradient(90deg, #22d3ee, #818cf8, #c084fc); color: #0b1120; border-color: transparent; box-shadow: 0 10px 22px rgba(129,140,248,.36); }
.mode-guide,.sub-guide,.progress { margin: 8px 0; color: #dbeafe; text-align: center; }
.progress { color: #a5f3fc; font-weight: 800; min-height: 24px; }

.carousel-shell { position: relative; margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.nav-btn {
  width: 44px;
  height: 136px;
  border: 1px solid rgba(167,139,250,.36);
  border-radius: 14px;
  background: rgba(8, 13, 26, .85);
  color: #e2e8f0;
  transition: all .2s ease;
}
.nav-btn:hover { border-color: rgba(34,211,238,.7); color: #67e8f9; box-shadow: 0 0 16px rgba(103,232,249,.26); }

.card-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 34px 10px 36px;
  flex: 1;
  touch-action: pan-x;
  perspective: 1000px;
}
.card-track::-webkit-scrollbar { height: 8px; }
.card-track::-webkit-scrollbar-thumb { background: linear-gradient(90deg,#155e75,#6366f1,#a855f7); border-radius: 999px; }

.oracle-card { position: relative; min-width: 150px; width: 150px; aspect-ratio: 2/3; perspective: 1200px; border: none; background: transparent; transform-origin: 50% 140%; transition: transform .25s ease, filter .25s ease; }
.oracle-inner { position: absolute; inset: 0; transition: transform .58s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.oracle-card.revealed .oracle-inner { transform: rotateY(180deg); }
.oracle-face { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; border: 1px solid rgba(167,139,250,.5); box-shadow: 0 8px 30px rgba(2, 6, 23, .5); }
.oracle-front { transform: rotateY(180deg); }
.oracle-face img { width: 100%; height: 100%; object-fit: cover; }
.oracle-card:hover { transform: translateY(-4px) scale(1.01); }
.oracle-card.selected .oracle-face { border: 2px solid #f0abfc; box-shadow: 0 0 28px rgba(240, 171, 252, .58); }
.order-badge { position: absolute; top: 6px; left: 6px; z-index: 2; background: linear-gradient(90deg,#f59e0b,#facc15); color: #111827; border-radius: 999px; padding: 3px 8px; font-size: .78rem; font-weight: 900; }

.result { margin-top: 24px; background: rgba(9,15,28,.82); border: 1px solid rgba(167,139,250,.28); border-radius: 16px; padding: 18px; display: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 36px rgba(96,165,250,.08); }
.result.show { display: block; }
.attribute { display: inline-block; padding: 4px 10px; border-radius: 999px; font-weight: 700; margin-right: 8px; }
.attr-무{background:#e5e7eb;color:#111827}.attr-불{background:#ef4444;color:#fff}.attr-물{background:#06b6d4}.attr-땅{background:#22c55e;color:#052e16}.attr-바람{background:#7dd3fc;color:#0c4a6e}.attr-특수{background:#a855f7}
.result-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.result-item { background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(11,17,32,.88)); border: 1px solid rgba(148,163,184,.22); border-radius: 12px; padding: 12px; }
.result img { width: 120px; border-radius: 10px; margin-bottom: 10px; border: 1px solid rgba(125,211,252,.22); }
.action-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.action-row button { padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(167,139,250,.3); background: #172033; color: #e2e8f0; font-weight: 700; transition: all .2s ease; }
.action-row button:hover { border-color: rgba(34,211,238,.72); color: #67e8f9; }

.card-track{cursor:grab}
.card-track.dragging{cursor:grabbing}
.fortune-box{margin-top:18px;padding:14px;border-radius:12px;background:rgba(2,6,23,.58);border:1px solid rgba(167,139,250,.26)}
.fortune-box h3{font-size:1.05rem;font-weight:800;margin-bottom:10px;color:#ddd6fe}
.fortune-row{margin-bottom:10px}.fortune-head{display:flex;justify-content:space-between;font-size:.92rem;color:#cbd5e1}
.fortune-bar{height:10px;background:#0b1324;border-radius:999px;overflow:hidden;border:1px solid rgba(148,163,184,.25)}
.fortune-bar span{display:block;height:100%;background:linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa)}
.fortune-desc{margin-top:12px;padding-left:18px;color:#dbeafe;line-height:1.65}

.card-track,.card-track *{user-select:none;-webkit-user-select:none}
.oracle-card img{-webkit-user-drag:none;user-drag:none;pointer-events:none}

@media (max-width: 768px) {
  .oracle-wrap { padding: 20px 12px 64px; }
  .oracle-shell { padding: 14px; border-radius: 18px; }
  .oracle-card { min-width: 42vw; width: 42vw; }
  .result-grid { grid-template-columns: 1fr; }
  .nav-btn { display: none; }
}