/* theme.css — ANT Central 공통 테마 스타일
   (Tailwind CDN + 커스텀 포털 카드/배경 정의) */

body {
    background-color: #020617;
    background-image:
        radial-gradient(at 0% 0%,   hsla(253, 16%, 10%, 1) 0, transparent 50%),
        radial-gradient(at 100% 100%, hsla(225, 39%, 15%, 1) 0, transparent 50%);
    min-height: 100vh;
}

/* ── 포털 카드 공통 ──────────────────────────────────────────── */
.portal-card {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.portal-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.icon-box { transition: all 0.4s ease; }

/* ── Blue (BizPro) ───────────────────────────────────────────── */
.portal-card.blue:hover              { border-color: rgba(59, 130, 246, 0.5); box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 20px rgba(59,130,246,.1); }
.blue .icon-box                      { background: linear-gradient(135deg, rgba(59,130,246,.1), rgba(37,99,235,.1)); }
.portal-card.blue:hover .icon-box    { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; transform: scale(1.1) rotate(5deg); }

/* ── Amber (WMS) ─────────────────────────────────────────────── */
.portal-card.amber:hover             { border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 20px rgba(245,158,11,.1); }
.amber .icon-box                     { background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(217,119,6,.1)); color: #fbbf24; }
.portal-card.amber:hover .icon-box   { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; transform: scale(1.1) rotate(-5deg); }

/* ── Emerald (Server Monitor) ───────────────────────────────── */
.portal-card.emerald:hover           { border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 20px rgba(16,185,129,.1); }
.emerald .icon-box                   { background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(5,150,105,.1)); color: #34d399; }
.portal-card.emerald:hover .icon-box { background: linear-gradient(135deg, #10b981, #059669); color: #fff; transform: scale(1.1) rotate(5deg); }

/* ── Violet (매출 분석) ─────────────────────────────────────── */
.portal-card.violet:hover            { border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 20px rgba(139,92,246,.1); }
.violet .icon-box                    { background: linear-gradient(135deg, rgba(139,92,246,.1), rgba(109,40,217,.1)); color: #a78bfa; }
.portal-card.violet:hover .icon-box  { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; transform: scale(1.1) rotate(-5deg); }

/* ── Rose (재고조사) ────────────────────────────────────────── */
.portal-card.rose:hover              { border-color: rgba(244, 63, 94, 0.5); box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 20px rgba(244,63,94,.1); }
.rose .icon-box                      { background: linear-gradient(135deg, rgba(244,63,94,.1), rgba(225,29,72,.1)); color: #fb7185; }
.portal-card.rose:hover .icon-box    { background: linear-gradient(135deg, #f43f5e, #e11d48); color: #fff; transform: scale(1.1) rotate(5deg); }

/* ── Cyan (정산서 백데이터) ─────────────────────────────────── */
.portal-card.cyan:hover              { border-color: rgba(6, 182, 212, 0.5); box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 20px rgba(6,182,212,.1); }
.cyan .icon-box                      { background: linear-gradient(135deg, rgba(6,182,212,.1), rgba(8,145,178,.1)); color: #22d3ee; }
.portal-card.cyan:hover .icon-box    { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; transform: scale(1.1) rotate(-5deg); }

/* ════════════════════════════════════════════════════════════════
   화이트(라이트) 테마 — body.theme-light 일 때만 적용.
   index.php / register.php 가 $page_theme='light' 로 켠다. 다른 페이지는 영향 없음.
   ════════════════════════════════════════════════════════════════ */
body.theme-light {
    background-color: var(--app-bg, #f1f5f9);
    background-image:
        radial-gradient(at 0% 0%,     var(--app-bg-grad-1, hsla(214, 70%, 95%, 1)) 0, transparent 50%),
        radial-gradient(at 100% 100%, var(--app-bg-grad-2, hsla(226, 60%, 94%, 1)) 0, transparent 50%);
    color: var(--app-text, #1e293b);
}
.theme-light .portal-card {
    background: var(--app-card, #ffffff);
    border: 1px solid var(--app-border, #e7ecf3);
    box-shadow: var(--app-shadow, 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05));
}
.theme-light .portal-card:hover { transform: translateY(-8px); }
.theme-light .blue    .icon-box { background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(37,99,235,.12)); color:#2563eb; }
.theme-light .amber   .icon-box { background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(217,119,6,.14)); color:#d97706; }
.theme-light .emerald .icon-box { background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(5,150,105,.14)); color:#059669; }
.theme-light .violet  .icon-box { background: linear-gradient(135deg, rgba(139,92,246,.13), rgba(109,40,217,.13)); color:#7c3aed; }
.theme-light .rose    .icon-box { background: linear-gradient(135deg, rgba(244,63,94,.13), rgba(225,29,72,.13)); color:#e11d48; }
.theme-light .cyan    .icon-box { background: linear-gradient(135deg, rgba(6,182,212,.14), rgba(8,145,178,.14)); color:#0891b2; }
.theme-light .portal-card.blue:hover    { border-color: rgba(59,130,246,.45); box-shadow: 0 18px 36px rgba(59,130,246,.18); }
.theme-light .portal-card.amber:hover   { border-color: rgba(245,158,11,.45); box-shadow: 0 18px 36px rgba(245,158,11,.18); }
.theme-light .portal-card.emerald:hover { border-color: rgba(16,185,129,.45); box-shadow: 0 18px 36px rgba(16,185,129,.18); }
.theme-light .portal-card.violet:hover  { border-color: rgba(139,92,246,.45); box-shadow: 0 18px 36px rgba(139,92,246,.18); }
.theme-light .portal-card.rose:hover    { border-color: rgba(244,63,94,.45);  box-shadow: 0 18px 36px rgba(244,63,94,.18); }
.theme-light .portal-card.cyan:hover    { border-color: rgba(6,182,212,.45);  box-shadow: 0 18px 36px rgba(6,182,212,.18); }
.theme-light .portal-card:hover .icon-box { color:#fff; transform: scale(1.08) rotate(4deg); }
.theme-light .portal-card.blue:hover .icon-box    { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.theme-light .portal-card.amber:hover .icon-box   { background: linear-gradient(135deg,#f59e0b,#d97706); }
.theme-light .portal-card.emerald:hover .icon-box { background: linear-gradient(135deg,#10b981,#059669); }
.theme-light .portal-card.violet:hover .icon-box  { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.theme-light .portal-card.rose:hover .icon-box    { background: linear-gradient(135deg,#f43f5e,#e11d48); }
.theme-light .portal-card.cyan:hover .icon-box    { background: linear-gradient(135deg,#06b6d4,#0891b2); }

/* ════════════════════════════════════════════════════════════════
   글래스모피즘 테마 — body.theme-glass (포털). theme-light 위에 덧입힘.
   ════════════════════════════════════════════════════════════════ */
body.theme-glass {
    background-color: #eef1fb;
    background-image:
        radial-gradient(40rem 30rem at 10% 5%,   rgba(59,130,246,.45), transparent 60%),
        radial-gradient(38rem 30rem at 95% 8%,   rgba(168,85,247,.42), transparent 58%),
        radial-gradient(42rem 32rem at 80% 100%, rgba(236,72,153,.30), transparent 60%),
        radial-gradient(40rem 30rem at 0% 95%,   rgba(14,165,233,.35), transparent 60%);
    background-attachment: fixed;
}
.theme-glass .portal-card {
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 8px 30px rgba(31,38,135,.14);
}
.theme-glass .portal-card:hover {
    background: rgba(255,255,255,.7);
    box-shadow: 0 18px 44px rgba(31,38,135,.22);
}