/* =============================================
   dream.css — 꿈해몽 페이지 스타일
   ============================================= */

/* ===== Dream Hero ===== */
.dream-hero {
  position: relative;
  width: 100%;
  height: 280px;
  margin: -24px 0 28px;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.dream-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: high-quality;
}
.dream-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,10,30,0.3) 0%, rgba(15,10,30,0.1) 40%, rgba(250,245,255,0.8) 85%, rgba(250,245,255,1) 100%);
}
.dream-hero-content {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  text-align: center;
}
.dream-hero-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.dream-hero-desc {
  font-size: 14px;
  color: var(--text-secondary);
}
@media (max-width: 520px) {
  .dream-hero {
    height: 200px;
    margin: -16px 0 20px;
  }
  .dream-hero-title { font-size: 24px; }
  .dream-hero-content { bottom: 20px; }
}

/* ===== Dream Card (Input Section) ===== */
.dream-card {
  padding: 24px;
  margin-bottom: 24px;
}
.dream-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.dream-card-icon {
  font-size: 24px;
}
.dream-card-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
}

/* ===== Category Chips ===== */
.dream-chips-scroll {
  overflow-x: auto;
  margin-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dream-chips-scroll::-webkit-scrollbar {
  display: none;
}
.dream-chips {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}
.dream-chip {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  background: rgba(245, 235, 250, 0.5);
  border: 1px solid var(--border-glass);
  cursor: pointer;
  transition: all 0.25s;
  flex-shrink: 0;
}
.dream-chip:hover {
  color: var(--text-primary);
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(167, 139, 250, 0.1);
}
.dream-chip.active {
  color: white;
  background: linear-gradient(135deg, var(--violet-500), var(--purple-500));
  border-color: transparent;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.3);
}

/* ===== Textarea ===== */
.dream-textarea-wrap {
  margin-bottom: 20px;
}
.dream-input {
  width: 100%;
  min-height: 140px;
  padding: 16px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: var(--radius-md);
  background: rgba(245, 235, 250, 0.6);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  resize: vertical;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.dream-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}
.dream-input:focus {
  outline: none;
  border-color: var(--violet-500);
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.15);
}
.dream-textarea-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ===== Voice Input Button ===== */
.dream-voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-glass);
  background: rgba(245, 235, 250, 0.5);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.25s;
}
.dream-voice-btn:hover {
  color: var(--text-accent);
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(167, 139, 250, 0.1);
}
.dream-voice-btn.recording {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
  animation: voicePulse 1.5s ease-in-out infinite;
}
.dream-voice-btn.recording svg {
  stroke: #ef4444;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.dream-char-count {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* ===== Submit Button ===== */
.dream-submit-btn {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-family: var(--font-sans);
  letter-spacing: 0.5px;
}
.dream-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.dream-submit-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ===== Example Dreams ===== */
.dream-examples {
  margin-bottom: 32px;
}
.dream-examples-title {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.dream-examples-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dream-example-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  border: none;
  font-family: var(--font-sans);
  transition: all 0.25s;
}
.dream-example-card:hover {
  border-color: rgba(167, 139, 250, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(167, 139, 250, 0.15);
}
.dream-example-emoji {
  font-size: 28px;
}
.dream-example-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ===== Loading State ===== */
.dream-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}
.dream-loading-orb {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
}
.dream-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--violet-500);
  animation: orbSpin 1.5s linear infinite;
}
.dream-orb-ring:nth-child(2) {
  inset: 10px;
  border-top-color: var(--gold);
  animation-duration: 2s;
  animation-direction: reverse;
}
.dream-orb-core {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--violet-500), transparent);
  animation: orbPulse 1.5s ease-in-out infinite;
}
@keyframes orbSpin {
  to { transform: rotate(360deg); }
}
@keyframes orbPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}
.dream-loading-text {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-secondary);
  animation: textPulse 2s ease-in-out infinite;
}
@keyframes textPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ===== User Input Display ===== */
.dream-user-input-card {
  border-color: rgba(167,139,250,0.25);
}
.dream-user-input-body {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.8;
  font-style: italic;
  padding: 12px 16px;
  background: rgba(167,139,250,0.05);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--violet-500);
}

/* ===== Result Section ===== */
.dream-result-section {
  margin-top: 8px;
}
.dream-result-card {
  padding: 24px;
  margin-bottom: 16px;
}
.dream-result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.dream-result-icon {
  font-size: 20px;
}
.dream-result-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 0;
}
.dream-result-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ===== Symbols ===== */
.dream-symbols {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dream-symbol-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
  font-size: 13px;
  color: var(--text-accent);
}
.dream-symbol-meaning {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ===== Fortune Bar ===== */
.dream-fortune {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: rgba(245, 235, 250, 0.4);
  margin-bottom: 16px;
}
.dream-fortune-label {
  font-size: 13px;
  color: var(--text-accent);
  font-weight: 500;
  flex-shrink: 0;
}
.dream-fortune-bar {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(167, 139, 250, 0.12);
  overflow: hidden;
}
.dream-fortune-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--violet-500), var(--gold));
  transition: width 1s ease;
}
.dream-fortune-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}

/* ===== Result Actions ===== */
.dream-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 32px;
}
.dream-share-btn {
  flex: 1;
  text-align: center;
  padding: 14px 12px;
  font-size: 13px;
}
.dream-insta-btn {
  flex: 1;
  text-align: center;
  padding: 14px 12px;
  font-size: 13px;
  border-color: rgba(225, 48, 108, 0.4);
  color: #E1306C;
}
.dream-insta-btn:hover {
  background: rgba(225, 48, 108, 0.08);
  border-color: #E1306C;
}
.dream-retry-btn {
  flex: 1;
  text-align: center;
  padding: 14px 12px;
  font-size: 13px;
  font-family: var(--font-sans);
}

/* ===== Result Fade-in Stagger ===== */
.dream-result-section .dream-result-card:nth-child(1) { animation: fadeInUp 0.5s 0.1s both; }
.dream-result-section .dream-result-card:nth-child(2) { animation: fadeInUp 0.5s 0.25s both; }
.dream-result-section .dream-result-card:nth-child(3) { animation: fadeInUp 0.5s 0.4s both; }
.dream-result-section .dream-result-card:nth-child(4) { animation: fadeInUp 0.5s 0.55s both; }
.dream-result-actions { animation: fadeInUp 0.5s 0.7s both; }

/* ===== Responsive ===== */
@media (min-width: 640px) {
  .dream-card {
    padding: 32px;
  }
  .dream-examples-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .dream-submit-btn {
    width: auto;
    min-width: 200px;
    display: block;
    margin-left: auto;
  }
  .dream-result-card {
    padding: 28px;
  }
}

/* ===== Dream Scene Image + Ken Burns Animation ===== */
.dream-scene-container {
  margin-bottom: 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.dream-scene-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.dream-scene-img {
  width: 110%;
  height: 110%;
  object-fit: cover;
  position: absolute;
  top: -5%;
  left: -5%;
  animation: kenBurns 20s ease-in-out infinite alternate;
}
.dream-scene-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 50%,
    rgba(255, 249, 242, 0.6) 100%
  );
  pointer-events: none;
}
.dream-scene-sparkles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(167,139,250,0.6), transparent),
    radial-gradient(2px 2px at 70% 20%, rgba(245,166,35,0.5), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(192,132,252,0.5), transparent),
    radial-gradient(2px 2px at 80% 60%, rgba(103,212,232,0.4), transparent),
    radial-gradient(1.5px 1.5px at 10% 80%, rgba(167,139,250,0.5), transparent),
    radial-gradient(2px 2px at 60% 50%, rgba(245,166,35,0.4), transparent);
  animation: sparkleFloat 6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes kenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  33%  { transform: scale(1.08) translate(-2%, -1%); }
  66%  { transform: scale(1.05) translate(1%, -2%); }
  100% { transform: scale(1.1) translate(-1%, 1%); }
}
@keyframes sparkleFloat {
  0%   { opacity: 0.4; transform: translateY(0); }
  100% { opacity: 0.8; transform: translateY(-8px); }
}