/* =========================================================
   시절마디 V4.42 R1 - 오늘운세 브랜드 톤 연결
   - 기존 오늘운세 DOM/JS/계산 로직은 변경하지 않음
   - body[data-sjm-page="today"] 안에서만 표현을 덮어씀
   ========================================================= */

body[data-sjm-page="today"] {
  --color-bg: #fffaf5;
  --color-bg-soft: #f7f0fb;
  --color-card: #fffdfb;
  --color-card-border: rgba(72, 44, 92, 0.13);
  --color-text: #211a29;
  --color-text-muted: #716979;
  --color-gold: #6b35a6;
  --color-gold-soft: #5b2e91;
  --color-accent: #e97c75;
  --color-danger: #c84e63;
  --shadow-card: 0 18px 48px rgba(77, 43, 101, 0.11);
  background:
    radial-gradient(circle at 12% 4%, rgba(233, 124, 117, 0.12), transparent 25rem),
    radial-gradient(circle at 88% 8%, rgba(107, 53, 166, 0.10), transparent 28rem),
    linear-gradient(180deg, #fffaf5 0%, #fbf7fc 58%, #fffdfb 100%);
  color: var(--color-text);
}

body[data-sjm-page="today"] .stars {
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, rgba(91, 46, 145, 0.18), transparent),
    radial-gradient(1.5px 1.5px at 120px 90px, rgba(233, 124, 117, 0.16), transparent),
    radial-gradient(1px 1px at 200px 40px, rgba(91, 46, 145, 0.16), transparent),
    radial-gradient(1.5px 1.5px at 260px 150px, rgba(201, 144, 57, 0.13), transparent),
    radial-gradient(1px 1px at 340px 60px, rgba(91, 46, 145, 0.14), transparent),
    radial-gradient(1.5px 1.5px at 400px 200px, rgba(233, 124, 117, 0.12), transparent);
  opacity: 0.48;
}

body[data-sjm-page="today"] main.container {
  padding-top: 18px;
}

body[data-sjm-page="today"] .hero {
  padding-top: 34px;
}

body[data-sjm-page="today"] .hero-title,
body[data-sjm-page="today"] .result-brand-tagline {
  background: linear-gradient(100deg, #211a29 0%, #6b35a6 58%, #c56f68 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body[data-sjm-page="today"] .hero-subtitle {
  color: #716979;
}

body[data-sjm-page="today"] .card {
  background: rgba(255, 253, 251, 0.96);
  border-color: var(--color-card-border);
  box-shadow: var(--shadow-card);
}

body[data-sjm-page="today"] .form-card {
  position: relative;
  overflow: hidden;
}

body[data-sjm-page="today"] .form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #6b35a6, #e97c75, #c99039);
}

body[data-sjm-page="today"] input[type="text"],
body[data-sjm-page="today"] input[type="date"],
body[data-sjm-page="today"] input[type="time"],
body[data-sjm-page="today"] select,
body[data-sjm-page="today"] textarea {
  border-color: rgba(72, 44, 92, 0.16);
  background: #faf7fb;
  color: var(--color-text);
}

body[data-sjm-page="today"] input::placeholder,
body[data-sjm-page="today"] textarea::placeholder {
  color: #a69daa;
}

body[data-sjm-page="today"] input:focus,
body[data-sjm-page="today"] select:focus,
body[data-sjm-page="today"] textarea:focus {
  border-color: #6b35a6;
  background: #fffdfb;
  box-shadow: 0 0 0 3px rgba(107, 53, 166, 0.10);
}

body[data-sjm-page="today"] input[type="date"],
body[data-sjm-page="today"] input[type="time"] {
  color-scheme: light;
}

body[data-sjm-page="today"] .toggle-btn,
body[data-sjm-page="today"] .radio-pill span {
  border-color: rgba(72, 44, 92, 0.16);
  background: #faf7fb;
  color: #716979;
}

body[data-sjm-page="today"] .toggle-btn.active,
body[data-sjm-page="today"] .radio-pill input:checked + span {
  border-color: #6b35a6;
  background: #f1eafa;
  color: #4a237c;
}

body[data-sjm-page="today"] .primary-btn {
  background: linear-gradient(135deg, #6b35a6 0%, #4a237c 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(76, 35, 126, 0.23);
}

body[data-sjm-page="today"] .primary-btn:hover {
  box-shadow: 0 16px 34px rgba(76, 35, 126, 0.28);
}

body[data-sjm-page="today"] .ghost-btn {
  border-color: rgba(72, 44, 92, 0.18);
  color: #716979;
  background: rgba(255, 255, 255, 0.68);
}

body[data-sjm-page="today"] .ghost-btn:hover {
  color: #4a237c;
  border-color: #6b35a6;
}

body[data-sjm-page="today"] .result-brand-name,
body[data-sjm-page="today"] .section-title,
body[data-sjm-page="today"] .lucky-value,
body[data-sjm-page="today"] .copy-toast {
  color: #5b2e91;
}

body[data-sjm-page="today"] .gauge-bg {
  stroke: rgba(72, 44, 92, 0.10);
}

body[data-sjm-page="today"] .total-status {
  color: #4a237c;
  background: #f1eafa;
  border-color: rgba(107, 53, 166, 0.20);
}

body[data-sjm-page="today"] .detail-card.highlight {
  border-color: rgba(107, 53, 166, 0.45);
  background: linear-gradient(145deg, #fbf7ff 0%, #f4ecfb 100%);
  box-shadow: 0 16px 38px rgba(91, 46, 145, 0.13);
}

body[data-sjm-page="today"] .detail-icon,
body[data-sjm-page="today"] .lucky-icon {
  background: #f1eafa;
  color: #6b35a6;
}

body[data-sjm-page="today"] .highlight-badge {
  color: #ffffff;
  background: #6b35a6;
}

body[data-sjm-page="today"] .lucky-item {
  background: rgba(255, 253, 251, 0.9);
  border-color: rgba(72, 44, 92, 0.13);
}

body[data-sjm-page="today"] .color-swatch {
  border-color: rgba(33, 26, 41, 0.18);
}

body[data-sjm-page="today"] .copy-btn {
  border-color: rgba(107, 53, 166, 0.28);
  background: #f5eefb;
  color: #4a237c;
}

body[data-sjm-page="today"] .copy-btn:hover {
  background: #eee3f8;
}

@media (max-width: 480px) {
  body[data-sjm-page="today"] .hero {
    padding-top: 24px;
  }

  body[data-sjm-page="today"] .form-card::before {
    height: 3px;
  }
}