/* www/assets/css/aurora.css
   인스레드 — 전 사이트 "오로라 글래스" 다크 테마 (2026-07-21)
   공통 style.css 뒤에 로드되는 오버라이드 시트입니다.
   1) :root 변수 플립(잉크/골드 → 미드나잇/바이올렛) 2) 라이트 리터럴 컴포넌트 다크화
   3) 전역 배경 이펙트(별밭 캔버스·오로라 블롭)와 마우스 팔로워 스타일
   페이지별 <style>보다 이겨야 하는 페이지 전용 오버라이드는 `body ` 접두로 특이도를 올립니다. */

:root {
  color-scheme: dark;
  --bg: #080b18;
  --bg-2: #0b0e22;
  --ink: #e8eaf6;
  --ink-soft: #9aa2c7;
  --ink-faint: #6f77a0;
  --card: rgba(255, 255, 255, .05);
  --line: rgba(255, 255, 255, .12);
  --accent: #8b9dff;
  --accent-2: #a5b4fc;
  --gold: #c4b5fd;
  --grad: linear-gradient(92deg, #6366f1, #8b5cf6);
  --grad-gold: linear-gradient(92deg, #8b9dff 10%, #c4b5fd 55%, #f0abfc 95%);
  --shadow-sm: 0 1px 1px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, .4), 0 34px 70px rgba(20, 10, 60, .35);
}

body {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--ink);
}
body::after { opacity: .3; }

/* ── 전역 배경 이펙트 레이어 (aurora_fx.php 파셜이 출력) ─── */
.au-fx {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
}
#au-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 블롭: filter:blur 대신 미리 그라디언트로 흐림을 구워 GPU 부담을 없앱니다 (스크롤 경량화) */
.au-blob {
  position: absolute; border-radius: 50%;
  will-change: transform;
}
.au-blob.b1 { width: 720px; height: 720px; top: -240px; left: -200px;
  background: radial-gradient(circle, rgba(59, 47, 134, .55) 0%, rgba(59, 47, 134, .18) 45%, transparent 70%); }
.au-blob.b2 { width: 640px; height: 640px; top: 160px; right: -240px;
  background: radial-gradient(circle, rgba(23, 58, 99, .6) 0%, rgba(23, 58, 99, .2) 45%, transparent 70%); }
.au-blob.b3 { width: 660px; height: 660px; top: 62%; left: -260px;
  background: radial-gradient(circle, rgba(76, 29, 149, .38) 0%, rgba(76, 29, 149, .12) 45%, transparent 70%); }
.au-blob.b4 { width: 560px; height: 560px; top: 88%; right: -200px;
  background: radial-gradient(circle, rgba(21, 94, 99, .3) 0%, rgba(21, 94, 99, .1) 45%, transparent 70%); }

/* ── 마우스 팔로워 ──────────────────────────────────── */
.au-cursor-glow {
  position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: 208px; height: 208px; margin: -104px 0 0 -104px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(139, 157, 255, .22) 0%,
    rgba(196, 181, 253, .11) 32%,
    transparent 66%);
  will-change: transform;
}
.au-cursor-dot {
  position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 2.5px rgba(164, 148, 255, .45),
    0 0 16px 5px rgba(164, 148, 255, .65);
  will-change: transform;
}
.au-spark {
  position: fixed; left: 0; top: 0; z-index: 299; pointer-events: none;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #c7d0ff;
  box-shadow: 0 0 8px 2px rgba(164, 148, 255, .7);
  animation: auSparkFade .8s ease-out forwards;
}
@keyframes auSparkFade {
  0%   { opacity: .95; transform: translate(var(--sx, 0), var(--sy, 0)) scale(1); }
  100% { opacity: 0;   transform: translate(var(--sx, 0), calc(var(--sy, 0) + 18px)) scale(.2); }
}
/* 터치 기기(주 포인터 coarse)에서는 마우스 팔로워를 통째로 숨깁니다 —
   JS 오탐(탭의 합성 mousemove)이 있어도 흰 점이 화면에 남지 않게 하는 안전망 */
@media (pointer: coarse) {
  .au-cursor-glow, .au-cursor-dot, .au-spark { display: none !important; }
}

/* ── 상단 메뉴 다크 글래스 ───────────────────────────── */
.topnav {
  background: rgba(8, 11, 24, .72);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.brand { color: var(--ink); display: inline-flex; align-items: center; gap: 9px; }
/* 브랜드 심볼 (favicon-64) — 다크 배경 이미지라 라운드+얇은 림으로 앱 아이콘처럼 보이게 */
.brand-logo {
  width: 28px; height: 28px; display: block; border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 8px rgba(0, 0, 0, .4);
}
/* 로그인·회원가입 히어로 로고 — block+margin auto로 배지와 줄이 섞이지 않게 중앙 정렬 */
.auth-logo {
  width: 116px; height: auto; display: block; border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 36px rgba(0, 0, 0, .45);
  margin: 0 auto 14px;
}
.hero > *:nth-child(4) { animation-delay: .44s; } /* 로고가 첫 자식으로 늘어난 히어로의 마지막 요소 딜레이 */
/* 랜딩 푸터 로고 */
.ld-foot-logo {
  width: 88px; height: auto; display: block; margin: 0 auto 18px; border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 10px 30px rgba(0, 0, 0, .4);
  opacity: .92;
}
.brand span {
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-group-btn:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
.nav-guest a:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
.nav-group-list {
  background: rgba(16, 20, 40, .97);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.nav-group-list a:hover, .nav-group-list a:active { color: var(--ink); background: rgba(255, 255, 255, .07); }
.nav-cta { box-shadow: 0 4px 18px -4px rgba(124, 108, 246, .55); }
.credit-pill { background: rgba(139, 157, 255, .16); color: #b8c4ff; }
.credit-pill:hover { background: rgba(139, 157, 255, .26); }
@media (max-width: 768px) {
  .nav-menu {
    background: rgba(10, 13, 28, .98);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .5);
  }
  .nav-group-list a:hover { background: rgba(255, 255, 255, .06); }
  .nav-group-list a.active { background: rgba(139, 157, 255, .12); }
}

/* ── 히어로·공통 컴포넌트 ────────────────────────────── */
.hero .eyebrow {
  border-color: rgba(139, 157, 255, .32);
  background: rgba(139, 157, 255, .08);
}
.trio div { background: rgba(255, 255, 255, .05); }
.card::before { background: linear-gradient(90deg, transparent, rgba(196, 181, 253, .45), transparent); }

/* 폼 */
.field input, .field textarea, .field select {
  background: rgba(255, 255, 255, .06);
  border-color: var(--line);
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus {
  background: rgba(255, 255, 255, .1);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(139, 157, 255, .16);
}
.field select option { background: #10142a; color: var(--ink); }

/* 버튼 */
.btn { box-shadow: 0 10px 26px rgba(80, 70, 220, .35); }
.btn:hover { box-shadow: 0 16px 36px rgba(100, 90, 246, .45); }
.btn-secondary {
  background: rgba(255, 255, 255, .06);
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-secondary::after { background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .1), transparent); }
.btn-secondary:hover { background: rgba(255, 255, 255, .11); box-shadow: none; }

/* 메시지·상태 */
.msg-error { background: rgba(239, 68, 68, .13); color: #fca5a5; }
.msg-saved { background: rgba(34, 197, 94, .13); color: #86efac; }
.fx-check { background: #22c55e; }

/* 체크박스·라디오 */
.chk { background: rgba(255, 255, 255, .05); }
.chk:hover { border-color: rgba(139, 157, 255, .4); }
.chk:has(input:checked) { border-color: rgba(139, 157, 255, .55); background: rgba(139, 157, 255, .1); }

/* 분석 오버레이 */
#overlay { background: rgba(8, 11, 24, .9); }
.ov-step .dot { background: rgba(255, 255, 255, .08); border-color: var(--line); }
.ov-step.done .dot { background: var(--gold); border-color: var(--gold); color: #1a1440; }
.ov-bar { background: rgba(255, 255, 255, .1); }
.ov-thread::before {
  background-image: radial-gradient(circle, rgba(139, 157, 255, .4) 2.3px, transparent 3px);
}
.ov-thread > span::after { background: #c7d0ff; }

/* 점수·비율·진행 */
.score-bar { background: rgba(255, 255, 255, .1); }
.ratio div { background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(139, 92, 246, .1)); }
.cal-progress { background: rgba(255, 255, 255, .1); }

/* 생성 결과·복사 */
.gen-item { background: rgba(255, 255, 255, .05); }
.gen-item:hover { border-color: rgba(196, 181, 253, .45); }
.copy-btn { background: rgba(255, 255, 255, .08); color: var(--ink-soft); }
.copy-btn.copied { background: var(--gold); border-color: var(--gold); color: #1a1440; }

/* 완성 후 액션 바 (DEPLOY32) — 복사·저장·업로드 완료 모음 */
.done-bar { background: rgba(255, 255, 255, .05); border-color: rgba(139, 157, 255, .32); }
.done-btn { background: rgba(255, 255, 255, .08); color: var(--ink); }
.done-btn:hover { border-color: rgba(196, 181, 253, .5); color: var(--accent); }
.done-btn.is-primary { background: var(--gold); border-color: var(--gold); color: #1a1440; }
.done-btn.is-primary:hover { color: #1a1440; }
.done-btn.copied { background: var(--gold); border-color: var(--gold); color: #1a1440; }
.done-btn.is-done { background: rgba(61, 220, 151, .18); border-color: rgba(61, 220, 151, .45); color: #8ef0c2; }

/* 인용·랜딩 잔여 클래스 */
.share-quote { background: rgba(255, 255, 255, .05); }
.landing-badge { background: rgba(139, 157, 255, .14); color: #b8c4ff; }

/* ── 페이지 전용 오버라이드 (페이지 <style>보다 특이도 우선) ── */
/* 캘린더 */
body .month-nav { background: rgba(255, 255, 255, .07); color: var(--ink); }
body .month-nav:hover { border-color: rgba(139, 157, 255, .45); }
body .month-chip { background: rgba(255, 255, 255, .06); }
body .month-chip.active { background: rgba(139, 157, 255, .14); color: var(--accent); border-color: rgba(139, 157, 255, .3); }
body .month-stat { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03)); }
body .calendar-board { background: rgba(255, 255, 255, .03); }
body .calendar-day { background: transparent; }
body .calendar-day:hover { background: rgba(139, 157, 255, .08); box-shadow: inset 0 0 0 2px rgba(139, 157, 255, .22); }
body .calendar-day.selected { background: rgba(139, 157, 255, .1); box-shadow: inset 0 0 0 2px rgba(139, 157, 255, .4); }
body .calendar-day.today { background: linear-gradient(145deg, rgba(99, 102, 241, .16), rgba(139, 92, 246, .08)); }
/* 지난달·다음달 날짜: 이번 달보다 한 톤 어둡게 가라앉혀 시선이 가지 않게 */
body .calendar-day.outside-month { background: rgba(2, 4, 10, .38); color: rgba(111, 119, 160, .55); }
body .calendar-day.outside-month:hover { background: rgba(139, 157, 255, .06); }
body .calendar-day.outside-month .day-number { color: rgba(111, 119, 160, .55); }
body .cal-modal { background: linear-gradient(135deg, #12162e, #171233); }
body .cal-modal-close { background: rgba(255, 255, 255, .08); color: var(--ink); }
body .cal-modal-close:hover { border-color: rgba(139, 157, 255, .45); }
body .achievement-item { background: rgba(255, 255, 255, .05); }
/* 미획득 스티커: 배경을 가라앉히고 아이콘·글자를 흐리게 (획득한 것만 도드라지게) */
body .achievement-item.locked { background: rgba(2, 4, 10, .3); color: rgba(111, 119, 160, .6); border-color: rgba(255, 255, 255, .06); }
body .achievement-item.locked .achievement-icon { filter: grayscale(1); opacity: .28; }
body .achievement-item.locked .achievement-copy span { color: rgba(111, 119, 160, .55); }
body .calendar-weekdays span:first-child { color: #f2a0a0; }
body .calendar-weekdays span:last-child { color: #9db4f5; }
body .calendar-day:nth-child(7n+1) .day-number { color: #f2a0a0; }
body .calendar-day:nth-child(7n) .day-number { color: #9db4f5; }
/* 바깥달 날짜는 주말이어도 흐리게 유지 */
body .calendar-day.outside-month:nth-child(7n+1) .day-number,
body .calendar-day.outside-month:nth-child(7n) .day-number { color: rgba(111, 119, 160, .55); }

body .record-pill { background: rgba(255, 255, 255, .09); color: var(--ink-soft); }
body .record-pill.primary { background: rgba(139, 157, 255, .16); color: var(--accent); }
body .record-pill.positive { background: rgba(34, 197, 94, .16); color: #86efac; }
body .record-pill.negative { background: rgba(239, 68, 68, .15); color: #fca5a5; }
body .cal-post-chip.uploaded { background: rgba(34, 197, 94, .16); color: #86efac; }
body .cal-post-chip.fallback { background: rgba(239, 68, 68, .15); color: #fca5a5; }
body .cal-post-chip.extra { background: rgba(139, 157, 255, .16); color: var(--accent); }

/* 크레딧 */
body .credit-stats .stat { background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(139, 92, 246, .1)); }

/* 안전 배지 (result·safety-check) */
body .safety-badge.safe { background: rgba(34, 197, 94, .15); color: #86efac; }
body .safety-badge.watch { background: rgba(250, 204, 21, .14); color: #fde68a; }
body .safety-badge.risk { background: rgba(239, 68, 68, .14); color: #fca5a5; }

/* 계정 삭제 버튼 (account) */
body .btn-danger { background: #dc2626; }
body .btn-danger:hover { background: #b91c1c; }