/* world.css — 카라 "학교 월드" 테마 (padella 게임월드 계열)
   나폴리 천상 팔레트 + φ 토큰 + 앰비언트(광선/먼지/구름) + 세리프 크레스트.
   style.css/erp.css 뒤에 로드 → body.erp 스코프로 팔레트 덮어씀. */

body.erp {
  --card: rgba(255, 248, 236, 0.93);
  --ink: #3a2417; --sub: #8a6f52; --accent: #8B3A2F; --accent2: #C9A961;
  --line: rgba(201, 169, 97, 0.38); --ok: #4A7C59; --danger: #b23b3b;
  --gold: #C9A961; --gold-lt: #E6CC8A; --night: #241830;
  color: var(--ink);
  background:
    radial-gradient(150% 95% at 50% -12%, #FCE9BE 0%, #F6CE86 28%, #E9A461 56%, #C9683B 82%, #8B3A2F 100%) fixed;
  min-height: 100vh;
}

/* ── 앰비언트 (배경 레이어) ── */
.world-rays {
  position: fixed; top: -55%; left: 50%; width: 170vmax; height: 170vmax;
  transform: translateX(-50%); pointer-events: none; z-index: 0; opacity: .55;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,244,210,0) 0deg, rgba(255,244,210,.16) 2.2deg, rgba(255,244,210,0) 6deg);
  animation: raySpin 120s linear infinite;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle, #000 0%, transparent 70%);
}
@keyframes raySpin { to { transform: translateX(-50%) rotate(360deg); } }
canvas#dust { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.world-hill {
  position: fixed; left: 0; right: 0; bottom: 0; height: 22vh; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 140% at 50% 100%, rgba(74,124,89,.55), rgba(47,82,57,.0) 70%);
}
@media (prefers-reduced-motion: reduce) { .world-rays { animation: none; } }

/* 앱/콘텐츠는 앰비언트 위로 */
body.erp #app, body.erp #login { position: relative; z-index: 2; }

/* ── HUD (상단 크레스트 바) ── */
.topbar {
  background: linear-gradient(180deg, rgba(36,24,48,.82), rgba(36,24,48,.5) 72%, transparent);
  border-bottom: none; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding: 14px 18px calc(14px + 6px);
}
.topbar .crest { display: flex; align-items: center; gap: 10px; }
.topbar .crest .seal {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px dashed var(--gold-lt);
  background: radial-gradient(circle, rgba(230,204,138,.35), transparent 70%);
  animation: sealGlow 4.5s ease-in-out infinite;
}
@keyframes sealGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(230,204,138,.0); } 50% { box-shadow: 0 0 16px 2px rgba(230,204,138,.45); } }
.topbar b { font-family:var(--font); color: var(--gold-lt); letter-spacing: .04em; font-size: 18px; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
.topbar .muted { color: rgba(255,243,220,.66); }
.world-clock { text-align: right; line-height: 1.1; }
.world-clock .t { font-family:var(--font); font-size: 19px; color: #FFF3DC; font-variant-numeric: tabular-nums; }
.world-clock .l { font-size: 9.5px; letter-spacing: .22em; color: var(--gold); text-transform: uppercase; }
.setupLink { color: var(--gold-lt); }

/* ── 도크 (하단 네비) ── */
.tabbar {
  background: linear-gradient(0deg, rgba(36,24,48,.92), rgba(36,24,48,.7));
  border-top: 1px solid rgba(201,169,97,.32); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.tab { color: rgba(255,243,220,.55); transition: color .25s, transform .25s; }
.tab span { letter-spacing: .02em; }
.tab.on { color: var(--gold-lt); }
.tab.on svg { filter: drop-shadow(0 0 7px rgba(230,204,138,.85)); transform: scale(1.12); }
.tab:active { transform: scale(.92); }

/* ── 씬 전환 ── */
main#view { transition: opacity .25s; }
.scene-in { animation: sceneIn .5s cubic-bezier(.4,0,.2,1); }
@keyframes sceneIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ── 패널/카드 (양피지+금테+글로우) ── */
.sect, .stat, .row-item, .notice-item {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(120,60,20,.14), inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter: blur(3px);
}
.sect h3 { font-family:var(--font); color: var(--accent); }
.stat .num { font-family:var(--font); }
.stat .num, .stat.warn .num { color: var(--accent); }
.stat.ok .num { color: var(--ok); }
h1 { font-family:var(--font); }
.hi, .muted, .sub2, .lab, .nd { color: var(--sub); }
.avatar { background: linear-gradient(135deg, #F4D98C, #D9A94E); color: #5a3d12; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }

/* 버튼 — 금빛 */
.big.primary, .primary {
  background: linear-gradient(180deg, #E6CC8A, #C9A961); color: #3a2417; border: none;
  box-shadow: 0 4px 16px rgba(201,169,97,.4); font-weight: 800;
}
.toggle.paid { background: linear-gradient(180deg,#5a9e76,#4A7C59); border-color: #4A7C59; }
.banner { background: linear-gradient(135deg, rgba(255,243,220,.96), rgba(246,206,134,.5)); border: 1px solid var(--gold); }
.banner a { color: var(--accent); }

/* ── 로그인 = 정문(포털) ── */
#login.card {
  background: linear-gradient(180deg, rgba(255,248,236,.96), rgba(251,233,199,.92));
  border: 1px solid var(--gold); box-shadow: 0 18px 60px rgba(90,40,15,.35);
}
#login .logo { animation: sealGlow 4s ease-in-out infinite; border-radius: 50%; }
#login h1 { color: var(--accent); }

/* ── 오늘 할 일 (마당 퀘스트) ── */
.quest-item { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--gold); border-radius:14px; margin-bottom:8px;
  background:linear-gradient(135deg, rgba(255,248,236,.96), rgba(246,206,134,.4)); cursor:pointer; transition:transform .15s, box-shadow .15s; }
.quest-item:active { transform:scale(.98); }
.quest-item:hover { box-shadow:0 6px 18px rgba(201,169,97,.35); }
.quest-done { text-align:center; padding:22px; font-family:var(--font); font-size:18px; color:var(--ok); font-weight:800; }

/* ── 씬 헤더 (메뉴 통일) ── */
.scene-head { display:flex; align-items:center; gap:10px; margin:2px 0 14px; }
.scene-head .sh-ic { width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#F4D98C,#D9A94E); color:#5a3d12; flex-shrink:0; }
.scene-head .sh-ic svg { width:20px; height:20px; }
.scene-head h2 { margin:0; font-size:22px; font-family:var(--font); color:var(--accent); letter-spacing:.01em; }