/* 리퀴드 글래스 · 3D 입체 레이어 — 기존 색은 유지하고 깊이만 더한다 */

:root {
    --sh-sm: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 18px rgba(11,31,79,.07);
    --sh-md: 0 1px 0 rgba(255,255,255,.85) inset, 0 14px 28px rgba(11,31,79,.10), 0 4px 10px rgba(255,45,120,.06);
    --sh-lg: 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 48px rgba(11,31,79,.14), 0 8px 18px rgba(255,45,120,.10);
    --r-md: 18px;
    --r-lg: 24px;
    --r-xl: 32px;
}

html { background: #dfe8f8; }

body {
    background:
        radial-gradient(1200px 640px at -5% -15%, rgba(255, 77, 140, .22), transparent 55%),
        radial-gradient(900px 520px at 110% 0%, rgba(56, 189, 248, .20), transparent 50%),
        radial-gradient(700px 480px at 50% 110%, rgba(26, 58, 143, .14), transparent 55%),
        linear-gradient(165deg, #e8eefc 0%, #f3f0f8 42%, #eef4ff 100%);
    background-attachment: fixed;
}

.liquid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.liquid-bg .blob {
    position: absolute;
    border-radius: 42% 58% 40% 60% / 45% 40% 60% 55%;
    filter: blur(42px);
    opacity: .48;
}
.liquid-bg .b1 {
    width: min(52vw, 520px); height: min(52vw, 520px);
    left: -8%; top: -12%;
    background: radial-gradient(circle at 30% 30%, #ff8cb8, #ff2d78 55%, transparent 72%);
}
.liquid-bg .b2 {
    width: min(46vw, 460px); height: min(46vw, 460px);
    right: -10%; top: 8%;
    background: radial-gradient(circle at 40% 35%, #93c5fd, #1a3a8f 58%, transparent 74%);
}
.liquid-bg .b3 {
    width: min(40vw, 400px); height: min(40vw, 400px);
    left: 28%; bottom: -18%;
    background: radial-gradient(circle at 50% 40%, #c4b5fd, #7c3aed 50%, transparent 72%);
    opacity: .4;
}

.wrap {
    position: relative;
    z-index: 1;
}

.card.genealogy-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    filter: none;
}

/* 네비 — 두꺼운 유리 */
.top-nav {
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.52));
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border-bottom: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 10px 30px rgba(11,31,79,.08);
}
.nav-links a {
    background: rgba(255,255,255,.28);
    border: 1px solid rgba(255,255,255,.4);
}
.nav-links a:hover {
    background: rgba(255,255,255,.7);
    box-shadow: 0 6px 16px rgba(11,31,79,.10);
}
.nav-links a.active,
.nav-auth a.active {
    box-shadow: 0 8px 20px rgba(255,45,120,.32), 0 2px 0 rgba(255,255,255,.35) inset;
}

/* 카드 — 유리 + 상단 하이라이트 + 하단 깊이 */
.card,
.admin-block,
.welcome-banner,
.auth-shell {
    background: linear-gradient(165deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.62) 100%);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow:
        0 1.5px 0 rgba(255,255,255,.95) inset,
        0 -18px 28px rgba(11,31,79,.045) inset,
        0 12px 28px rgba(11,31,79,.10),
        0 32px 56px rgba(11,31,79,.08);
}
.card::before {
    height: 3px;
    background: linear-gradient(90deg, #1a3a8f, #38bdf8, #ff2d78, #f59e0b);
}

/* 컬러 카드는 유리 위에 물감이 흐르는 느낌 */
.card-withdraw::before,
.card-grand::before,
.card-total::before {
    display: block !important;
    opacity: .55;
}
.card-withdraw {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.38), transparent 50%),
        linear-gradient(145deg, #ff4d8a 0%, #c2185b 58%, #7c1d48 100%) !important;
    border-color: rgba(255,255,255,.28) !important;
    box-shadow:
        0 2px 0 rgba(255,255,255,.35) inset,
        0 18px 40px rgba(194,24,91,.38),
        0 8px 16px rgba(11,31,79,.18) !important;
}
.card-grand,
.card-total {
    background:
        radial-gradient(ellipse at 80% -10%, rgba(255,140,184,.4), transparent 46%),
        linear-gradient(145deg, #163a9a 0%, #0b1f4f 55%, #2d1b6b 100%) !important;
    border: none !important;
    box-shadow:
        0 2px 0 rgba(255,255,255,.28) inset,
        0 20px 44px rgba(11,31,79,.38) !important;
}
.card-profit {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(255,255,255,.7), transparent 45%),
        linear-gradient(160deg, #ecfdf5, rgba(255,255,255,.7)) !important;
}
.card-nft {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(147,197,253,.45), transparent 50%),
        linear-gradient(160deg, #f8f9ff, rgba(255,255,255,.7)) !important;
}
.card-legL {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(147,197,253,.5), transparent 48%),
        linear-gradient(160deg, #eff6ff, rgba(255,255,255,.7)) !important;
}
.card-legR {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(253,224,71,.45), transparent 48%),
        linear-gradient(160deg, #fffbeb, rgba(255,255,255,.7)) !important;
}
.income-card.card-rank {
    background:
        radial-gradient(ellipse at 80% 0%, rgba(252,211,77,.55), transparent 50%),
        linear-gradient(160deg, #fffbeb, rgba(255,255,255,.65)) !important;
}

.income-card .i-val,
.c-val {
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

/* 진행바 */
.prog-wrap {
    height: 8px;
    background: rgba(11,31,79,.08);
    box-shadow: 0 1px 2px rgba(11,31,79,.12) inset;
}
.prog-bar {
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
}
/* 버튼 입체 */
.btn-apply,
.btn-restock,
.tree-launch-btn {
    box-shadow:
        0 1px 0 rgba(255,255,255,.4) inset,
        0 10px 22px rgba(255,45,120,.32),
        0 4px 0 rgba(11,31,79,.18);
}
.btn-apply:hover,
.btn-restock:hover,
.tree-launch-btn:hover {
    opacity: 1;
}

.ci input, .ci select, .ci textarea {
    background: rgba(255,255,255,.7);
    box-shadow: 0 2px 8px rgba(11,31,79,.05) inset;
}
.ci input:focus, .ci select:focus, .ci textarea:focus {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,45,120,.14), 0 8px 20px rgba(11,31,79,.08);
}

.welcome-banner {
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 28px rgba(5,150,105,.12);
}
.admin-notice {
    backdrop-filter: blur(14px);
    background: linear-gradient(135deg, rgba(255,247,237,.9), rgba(255,251,235,.72));
}

.auth-brand {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(255,45,120,.45), transparent 50%),
        linear-gradient(145deg, #0b1f4f 0%, #1a2a6c 48%, #b21f66 100%);
}

.notice-box {
    background: linear-gradient(135deg, rgba(220,232,255,.8), rgba(240,244,255,.65));
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 20px rgba(26,58,143,.08);
}