/* ─────────────────────────────────────────
   imotion — Dark Theme (새벽/명상 무드)
   ───────────────────────────────────────── */

/* ─── Google Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

/* ─── Reset / Base ─── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: #0f0e17 !important;
}

body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #0f0e17 !important;
  background-image:
    radial-gradient(ellipse at 20% 0%,   rgba(124,111,224,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(168, 85,247,0.12) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
  color: #e8e6f0 !important;
  min-height: 100vh;
}

.app-bg { background: transparent !important; }

/* ─── Brand ─── */
.app-brand {
  background: linear-gradient(135deg, #a78bfa 0%, #e879f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.03em;
}

/* ─── Mood Buttons ─── */
.mood-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 0.75rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mood-btn:active { transform: scale(0.95); }
.mood-emoji { font-size: 2.2rem; line-height: 1; }
.mood-label { font-size: 0.78rem; font-weight: 600; color: rgba(232, 230, 240, 0.65); }

.mood-good:hover    { border-color: rgba(110,231,183,0.35); background: rgba(110,231,183,0.07); }
.mood-okay:hover    { border-color: rgba(147,197,253,0.35); background: rgba(147,197,253,0.07); }
.mood-anxious:hover { border-color: rgba(252,211, 77,0.35); background: rgba(252,211, 77,0.07); }
.mood-sad:hover     { border-color: rgba(165,180,252,0.35); background: rgba(165,180,252,0.07); }
.mood-angry:hover   { border-color: rgba(252,165,165,0.35); background: rgba(252,165,165,0.07); }
.mood-numb:hover    { border-color: rgba(156,163,175,0.35); background: rgba(156,163,175,0.07); }

/* ─── Textarea ─── */
.app-textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1rem 1.125rem;
  color: #e8e6f0;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.75;
  resize: none;
  outline: none;
  width: 100%;
  transition: border-color 0.2s ease;
}
.app-textarea:focus       { border-color: rgba(167,139,250,0.5); box-shadow: 0 0 0 3px rgba(167,139,250,0.08); }
.app-textarea::placeholder { color: rgba(232, 230, 240, 0.22); }

/* ─── Buttons ─── */
.app-btn-primary {
  display: block;
  background: #7c6fe0;
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.95rem 1.5rem;
  border-radius: 1rem;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity 0.2s, transform 0.15s;
}
.app-btn-primary:hover   { opacity: 0.82; }
.app-btn-primary:active  { transform: scale(0.98); }
.app-btn-primary:disabled { opacity: 0.3; cursor: not-allowed; }

.app-btn-secondary {
  display: block;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 230, 240, 0.75);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.95rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.app-btn-secondary:hover  { background: rgba(255,255,255,0.09); }
.app-btn-secondary:active { transform: scale(0.98); }

/* ─── Result Cards ─── */
.result-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.875rem;
  padding: 1.125rem;
}
.result-card-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(232, 230, 240, 0.38);
  margin-bottom: 0.375rem;
}

/* ─── Emotion Tags ─── */
.emotion-tag {
  display: inline-block;
  background: rgba(167,139,250,0.12);
  color: #c4b5fd;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(167,139,250,0.2);
}
.emotion-tag-sm {
  display: inline-block;
  background: rgba(167,139,250,0.1);
  color: #c4b5fd;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.18rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid rgba(167,139,250,0.15);
}

/* ─── History Cards ─── */
.history-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1.25rem;
  padding: 1.125rem;
  transition: border-color 0.2s;
}
.history-card:hover {
  border-color: rgba(167,139,250,0.2);
}

/* ─── Loading Spinner ─── */
.loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid rgba(255,255,255,0.08);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Tailwind Dark Overrides ─── */

/* 텍스트 */
.text-gray-800  { color: #e8e6f0 !important; }
.text-gray-700  { color: rgba(232,230,240,0.88) !important; }
.text-gray-600  { color: rgba(232,230,240,0.65) !important; }
.text-gray-500  { color: rgba(232,230,240,0.5) !important; }
.text-gray-400  { color: rgba(232,230,240,0.38) !important; }
.text-gray-300  { color: rgba(232,230,240,0.28) !important; }

/* 상태별 텍스트 */
.text-green-600   { color: #6ee7b7 !important; }
.text-amber-700   { color: #fcd34d !important; }
.text-amber-800   { color: #fde68a !important; }
.text-amber-600   { color: rgba(252,211,77,0.8) !important; }
.text-amber-500   { color: rgba(252,211,77,0.7) !important; }
.text-indigo-600  { color: #a78bfa !important; }
.text-indigo-800  { color: #c4b5fd !important; }
.text-indigo-500  { color: rgba(167,139,250,0.8) !important; }
.text-purple-400  { color: rgba(192,132,252,0.7) !important; }
.text-purple-800  { color: #d8b4fe !important; }

/* 배경 */
.bg-white                  { background: rgba(255,255,255,0.05) !important; }
.bg-green-50               { background: rgba(110,231,183,0.07) !important; }
.bg-amber-50               { background: rgba(252,211, 77,0.07) !important; }
.bg-indigo-50              { background: rgba(167,139,250,0.07) !important; }
.bg-purple-50              { background: rgba(192,132,252,0.07) !important; }
.bg-gray-50                { background: rgba(255,255,255,0.03) !important; }
.bg-white\/80              { background: rgba(15,14,23,0.85) !important; }

/* 테두리 */
.border-green-200   { border-color: rgba(110,231,183,0.2) !important; }
.border-amber-200   { border-color: rgba(252,211, 77,0.2) !important; }
.border-indigo-100  { border-color: rgba(167,139,250,0.15) !important; }
.border-purple-100  { border-color: rgba(192,132,252,0.15) !important; }
.border-gray-100    { border-color: rgba(255,255,255,0.06) !important; }
.border-gray-200    { border-color: rgba(255,255,255,0.09) !important; }
.border-indigo-300  { border-color: rgba(167,139,250,0.3) !important; }
.border-amber-300   { border-color: rgba(252,211, 77,0.3) !important; }

/* 프로그레스 바 */
.bg-indigo-500  { background: linear-gradient(90deg,#7c6fe0,#a855f7) !important; }
.bg-gray-200    { background: rgba(255,255,255,0.08) !important; }

/* 달력 */
.ring-indigo-400 { --tw-ring-color: rgba(167,139,250,0.6) !important; }

/* 캘린더 셀 hover */
.hover\:bg-indigo-50:hover { background: rgba(167,139,250,0.07) !important; }
.hover\:bg-gray-50:hover   { background: rgba(255,255,255,0.04) !important; }
.bg-indigo-50              { background: rgba(167,139,250,0.07) !important; }

/* 인디고 텍스트/배경 뱃지 */
.text-indigo-600 { color: #a78bfa !important; }
.border-indigo-100 { border-color: rgba(167,139,250,0.15) !important; }

/* 아이콘/화살표 */
.text-gray-400.hover\:text-gray-600:hover { color: rgba(232,230,240,0.7) !important; }

/* ─── Cal cell active ─── */
.cal-cell.ring-2 {
  box-shadow: 0 0 0 2px rgba(167,139,250,0.6);
}

/* ─── Page Transitions ─── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; }
}
body {
  animation: pageIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.page-out {
  animation: pageOut 0.21s ease forwards !important;
}
@keyframes pageOut {
  to { opacity: 0; transform: translateY(-14px); }
}

/* ─── Screen Transitions (index.php) ─── */
@keyframes screenOut {
  to { opacity: 0; transform: translateY(-18px); }
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}