@charset "utf-8";

/* =========================================================
   daisyui 테마 디자인 CSS — 깔끔/기본(미니멀) 톤
   - daisyUI + Tailwind 로 대부분 처리하므로 최소만 둔다.
   - 시맨틱 컬러(base/primary/...)만 사용. 브랜드 팔레트 하드코딩 없음.
   - 디자인 전용 추가 스타일이 필요하면 여기에만 작성.
   ========================================================= */

a { text-decoration: none; }

/* 앵커(#) 이동 시 sticky 헤더에 가려지지 않도록 + 부드러운 스크롤 */
html { scroll-padding-top: 5rem; scroll-behavior: smooth; }

/* 버튼 입체감(depth) 제거 → 단독 버튼·join 그룹 모두 평면(이음선 없음) */
:root { --depth: 0; }

/* error 색 보정: daisyUI light 기본은 연한 빨강+어두운 글자라 가독성 낮음 → 진한 빨강+흰 글자 */
:root {
	--color-error: oklch(58% .22 25);
	--color-error-content: oklch(100% 0 0);
}

/* success 색 보정: 어두운 초록 배경 + 밝은(흰) 글자 → badge-success/btn-success 등에 일괄 적용 */
:root {
	--color-success: oklch(55% .17 150);       /* 배경: 진한 초록 */
	--color-success-content: oklch(100% 0 0);  /* 글자: 흰색 */
}

/* =========================================================
   mystic 테마 — 꿈해몽 리뉴얼 (daisyUI v5)
   v2 mystic.css 를 daisyUI 5 변수로 이식 + 신비로운 다크 룩앤필.
   [data-theme=mystic] 일 때만 적용되므로 light 기본 톤에는 영향 없음.
   ========================================================= */
[data-theme="mystic"] {
	color-scheme: dark;
	--color-base-100: oklch(15% 0.028 290);
	--color-base-200: oklch(19% 0.032 290);
	--color-base-300: oklch(24% 0.036 290);
	--color-base-content: oklch(90% 0.03 300);
	--color-primary: oklch(64% 0.19 300);       /* 자수정 보라 */
	--color-primary-content: oklch(98% 0.01 300);
	--color-secondary: oklch(60% 0.15 264);     /* 신비로운 인디고 */
	--color-secondary-content: oklch(98% 0.01 264);
	--color-accent: oklch(82% 0.13 86);         /* 아케인 골드 */
	--color-accent-content: oklch(22% 0.05 86);
	--color-neutral: oklch(30% 0.03 290);
	--color-neutral-content: oklch(90% 0.02 300);
	--color-info: oklch(70% 0.13 230);
	--color-info-content: oklch(16% 0.04 230);
	--color-success: oklch(72% 0.16 152);
	--color-success-content: oklch(16% 0.04 152);
	--color-warning: oklch(83% 0.16 80);
	--color-warning-content: oklch(20% 0.04 80);
	--color-error: oklch(64% 0.21 25);
	--color-error-content: oklch(98% 0.01 25);
	--radius-box: 1.25rem;
	--radius-field: 1rem;
	--radius-selector: 1.9rem;
	--font-serif: "Gowun Batang", "Noto Serif KR", serif;
	--font-display: "Cinzel", "Gowun Batang", serif;
}

/* 글꼴 + 우주적 배경(고정) */
[data-theme="mystic"] body {
	font-family: var(--font-serif);
	letter-spacing: 0.01em;
	background-color: #07030f;
	background-image:
		radial-gradient(1200px 800px at 15% -10%, rgba(124,58,237,0.25), transparent 60%),
		radial-gradient(1000px 700px at 110% 10%, rgba(56,70,190,0.22), transparent 60%),
		radial-gradient(900px 900px at 50% 120%, rgba(168,85,247,0.18), transparent 60%),
		linear-gradient(180deg, #0a0518 0%, #07030f 50%, #050109 100%);
	background-attachment: fixed;
}

/* 상단/하단 글래스 바 */
[data-theme="mystic"] #site-header {
	background: rgba(16,9,33,0.55);
	border-bottom: 1px solid rgba(167,139,250,0.18);
}
[data-theme="mystic"] #site-footer {
	background: rgba(16,9,33,0.5);
	border-top: 1px solid rgba(167,139,250,0.18);
}

/* 글래스 카드 + 신비 제목 글꼴 */
/* !important: daisyUI 의 bg-base-100/200(불투명) 유틸을 덮어 우주 배경이 비치게 한다 */
[data-theme="mystic"] .card,
[data-theme="mystic"] .collapse,
[data-theme="mystic"] .stats,
[data-theme="mystic"] .stat {
	background-color: rgba(28,18,54,0.42) !important;
	border: 1px solid rgba(167,139,250,0.22);
	box-shadow: 0 8px 40px rgba(76,29,149,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* stat 은 stats 안에서 테두리 중복 방지 */
[data-theme="mystic"] .stats .stat { border: none; box-shadow: none; }
[data-theme="mystic"] .card-title,
[data-theme="mystic"] h1,
[data-theme="mystic"] h2,
[data-theme="mystic"] h3 {
	font-family: var(--font-display);
	color: #ecdcff;
	letter-spacing: 0.02em;
	text-shadow: 0 0 24px rgba(168,85,247,0.35);
}

/* 버튼 글로우 */
[data-theme="mystic"] .btn-primary {
	background-image: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
	border: none;
	box-shadow: 0 6px 24px rgba(124,58,237,0.45);
	color: #fff;
}
[data-theme="mystic"] .btn-primary:hover {
	background-image: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
	box-shadow: 0 8px 32px rgba(139,92,246,0.6);
}

/* 입력폼 */
[data-theme="mystic"] .input,
[data-theme="mystic"] .textarea,
[data-theme="mystic"] .select {
	background: rgba(10,6,24,0.6);
	border: 1px solid rgba(167,139,250,0.25);
	color: #efe7ff;
}
[data-theme="mystic"] .input:focus,
[data-theme="mystic"] .textarea:focus,
[data-theme="mystic"] .select:focus {
	outline: none;
	border-color: rgba(167,139,250,0.7);
	box-shadow: 0 0 0 3px rgba(124,58,237,0.25);
}

/* 스크롤바 */
[data-theme="mystic"] ::-webkit-scrollbar { width: 9px; }
[data-theme="mystic"] ::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.4); border-radius: 9999px; }
[data-theme="mystic"] ::-webkit-scrollbar-track { background: transparent; }

/* =========================================================
   v2 모바일앱 레이아웃 — 상단바 / 하단탭 / 우주 배경 (v2 mystic.css 이식)
   ========================================================= */

/* 별 / 성운 레이어 (고정) */
/* z-index:0 — body 의 불투명 배경 그라디언트에 가리지 않도록 그 위로 올린다(콘텐츠는 z-index:1 이라 별 위) */
[data-theme="mystic"] .cosmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
[data-theme="mystic"] .cosmos .stars,
[data-theme="mystic"] .cosmos .stars2 { position: absolute; inset: -50%; background-repeat: repeat; }
[data-theme="mystic"] .cosmos .stars {
	background-image:
		radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
		radial-gradient(1.5px 1.5px at 120px 80px, #e9d5ff, transparent),
		radial-gradient(1px 1px at 200px 160px, #fff, transparent),
		radial-gradient(1.5px 1.5px at 300px 50px, #c4b5fd, transparent),
		radial-gradient(1px 1px at 380px 220px, #fff, transparent);
	background-size: 420px 300px;
	animation: twinkle 6s ease-in-out infinite alternate, drift 120s linear infinite;
	opacity: 0.7;
}
[data-theme="mystic"] .cosmos .stars2 {
	background-image:
		radial-gradient(1px 1px at 60px 120px, #fff, transparent),
		radial-gradient(1px 1px at 180px 40px, #ddd6fe, transparent),
		radial-gradient(1px 1px at 280px 200px, #fff, transparent),
		radial-gradient(1.5px 1.5px at 350px 140px, #a78bfa, transparent);
	background-size: 380px 260px;
	animation: twinkle 9s ease-in-out infinite alternate, drift 200s linear infinite reverse;
	opacity: 0.5;
}
[data-theme="mystic"] .cosmos .moon {
	position: absolute; top: 8%; right: 8%; width: 90px; height: 90px; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #f4ecff, #b9a4e8 60%, #6d5ba8);
	box-shadow: 0 0 60px 12px rgba(196,181,253,0.35), inset -10px -8px 24px rgba(40,20,70,0.6);
	opacity: 0.55;
}
@keyframes twinkle { from { opacity: 0.25; } to { opacity: 0.85; } }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(40px); } }

/* 상단 앱바 */
[data-theme="mystic"] .mystic-topbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 40;
	height: calc(56px + var(--app-top, env(safe-area-inset-top)));
	display: flex; align-items: center; padding: var(--app-top, env(safe-area-inset-top)) 0.5rem 0;
	background: rgba(16,9,33,0.85);
	backdrop-filter: blur(14px);           /* 상단바도 blur 유지 — 뒤 콘텐츠 비침 방지(가독성) */
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(167,139,250,0.18);
}
[data-theme="mystic"] .mystic-brand {
	font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em;
	font-size: 1.05rem; color: #e9d5ff; text-shadow: 0 0 18px rgba(167,139,250,0.55);
}
[data-theme="mystic"] .mystic-iconbtn {
	width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9999px;
	color: #d8c9ff; transition: background 0.2s, color 0.2s;
}
[data-theme="mystic"] .mystic-iconbtn:hover { background: rgba(167,139,250,0.15); color: #fff; }

/* 본문 컨테이너 (상단바/하단탭 여백 확보) */
[data-theme="mystic"] .mystic-main {
	position: relative; z-index: 1; max-width: 540px; margin: 0 auto;
	padding: calc(76px + var(--app-top, env(safe-area-inset-top))) 1rem calc(110px + var(--app-bottom, env(safe-area-inset-bottom)));
}
/* 상단 헤더가 숨겨지는 페이지(홈·로그인 등)는 상단 여백 축소 */
[data-theme="mystic"] .mystic-main.no-topbar { padding-top: calc(1.5rem + var(--app-top, env(safe-area-inset-top))); }
/* 앱(웹뷰): 상·하단 메뉴 없음 → 여백은 safe-area 만 확보 */
[data-theme="mystic"] .mystic-main.inapp {
	/* fallback: 실여백 = safe-area + 네이티브 메뉴(56px) 이므로 env 에 56을 "더한다"(max 는 겹침 합산 불가).
	   최악(메뉴 표시) 기준. 단 서버·앱이 --app-top 을 주입하므로 이 fallback 은 둘 다 없는 극단에서만 쓰인다. */
	padding-top: calc(1rem + var(--app-top, calc(env(safe-area-inset-top, 24px) + 56px)));
	padding-bottom: calc(1rem + var(--app-bottom, calc(env(safe-area-inset-bottom, 0px) + 56px)));
}

/* 하단 네비게이션 */
[data-theme="mystic"] .mystic-bottomnav {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex;
	max-width: 540px; margin: 0 auto;
	padding-bottom: var(--app-bottom, env(safe-area-inset-bottom));
	background: rgba(16,9,33,0.85);
	backdrop-filter: blur(16px);           /* 하단탭만 blur 유지 — 뒤 콘텐츠가 비쳐 아이콘이 묻히는 것 방지 */
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid rgba(167,139,250,0.2);
}
[data-theme="mystic"] .mystic-bottomnav a {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 0.15rem; padding: 0.55rem 0 0.7rem; color: rgba(200,185,240,0.6); font-size: 0.72rem;
	transition: color 0.2s;
}
[data-theme="mystic"] .mystic-bottomnav a svg { width: 22px; height: 22px; }
[data-theme="mystic"] .mystic-bottomnav a.active { color: #e9d5ff; text-shadow: 0 0 14px rgba(167,139,250,0.7); }
[data-theme="mystic"] .mystic-bottomnav a.active svg { filter: drop-shadow(0 0 8px rgba(167,139,250,0.8)); }

/* 진입 페이드 */
.fade-in { animation: fadeIn 0.6s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }