:root {
    --kexu-bg: #f3f7ff;
    --kexu-surface: rgba(255, 255, 255, 0.94);
    --kexu-surface-soft: rgba(246, 250, 255, 0.92);
    --kexu-border: rgba(37, 99, 235, 0.13);
    --kexu-cyan: #0891b2;
    --kexu-blue: #2563eb;
    --kexu-violet: #6366f1;
    --kexu-text: #10213d;
    --kexu-muted: #64748b;
}

body {
    min-height: 100vh;
    color: var(--kexu-text);
    background-color: var(--kexu-bg) !important;
    background-image: linear-gradient(180deg, #f8fafc 0%, #f1f5fb 100%) !important;
    background-attachment: fixed !important;
}

.navbar-acg {
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid var(--kexu-border);
    box-shadow: 0 4px 18px rgba(30, 64, 175, 0.06);
    backdrop-filter: blur(18px) saturate(140%);
}

.navbar-acg .navbar-brand::before {
    content: "K";
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 11px;
    color: #ffffff;
    font-weight: 900;
    background: linear-gradient(135deg, var(--kexu-cyan), #60a5fa);
    box-shadow: 0 8px 22px rgba(14, 165, 233, 0.24);
}

.navbar-acg .brand-logo {
    display: none;
}

.navbar-acg .navbar-brand span {
    color: var(--kexu-text) !important;
    letter-spacing: 0.02em;
}

.navbar-acg .nav-link,
.navbar-acg .btn-outline-secondary {
    color: var(--kexu-muted);
    border-color: rgba(100, 116, 139, 0.24);
}

.navbar-acg .nav-link:hover,
.navbar-acg .nav-link.active {
    color: var(--kexu-cyan);
}

.navbar-acg .btn-primary {
    color: #ffffff;
    border: 0;
    background: linear-gradient(135deg, var(--kexu-cyan), #60a5fa);
}

.navbar-acg .search-input .input-group-text,
.navbar-acg .search-input .form-control {
    color: var(--kexu-text);
    background: rgba(248, 251, 255, 0.96);
    border-color: rgba(100, 116, 139, 0.20);
}

.navbar-acg .search-input .form-control::placeholder {
    color: #94a3b8;
}

main.container {
    max-width: 1180px;
}

.panel {
    overflow: hidden;
    margin-bottom: 22px;
    border: 1px solid var(--kexu-border);
    border-radius: 14px;
    background: var(--kexu-surface);
    box-shadow: 0 10px 30px rgba(30, 64, 175, 0.07);
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 17px 20px;
    border-bottom: 1px solid rgba(37, 99, 235, 0.10);
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.10), rgba(99, 102, 241, 0.035) 62%, transparent);
}

.panel-header .icon {
    color: var(--kexu-cyan);
}

.panel-title {
    margin: 0;
    color: var(--kexu-text);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.panel-body {
    padding: 20px;
    color: #334155;
}

.notice-grid {
    display: block;
}

.notice-block {
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.notice-block strong {
    display: block;
    margin-bottom: 6px;
    color: var(--kexu-cyan);
    font-size: 1.05rem;
}

.notice-block span {
    color: #52647d;
    line-height: 1.75;
}

.notice-block + .notice-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(100, 116, 139, 0.18);
}

.chip-list {
    gap: 10px;
}

.chip {
    color: #52647d;
    border: 1px solid rgba(100, 116, 139, 0.18);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: none;
}

.chip:hover {
    color: var(--kexu-text);
    border-color: rgba(34, 211, 238, 0.46);
    transform: translateY(-1px);
}

.chip.is-primary {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--kexu-cyan), #60a5fa);
    box-shadow: 0 10px 28px rgba(34, 211, 238, 0.18);
}

.chip .chip-icon {
    display: none;
}

.acg-card {
    border: 1px solid rgba(37, 99, 235, 0.12);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.08);
}

.acg-card:hover {
    border-color: rgba(34, 211, 238, 0.38);
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(30, 64, 175, 0.16);
}

.acg-thumb {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
    padding: 18px;
    background-image:
        linear-gradient(135deg, rgba(34, 211, 238, 0.86), rgba(37, 99, 235, 0.76)),
        radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.30), transparent 24%) !important;
}

.acg-thumb::before {
    content: "KEXU AI LAB";
    position: absolute;
    top: 16px;
    left: 18px;
    color: rgba(232, 244, 255, 0.84);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.acg-thumb::after {
    content: "AI LEARNING PACK";
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -0.02em;
    text-shadow: 0 6px 24px rgba(4, 17, 29, 0.28);
}

a[data-id="1"] .acg-thumb {
    background-image: linear-gradient(135deg, #0f766e, #06b6d4) !important;
}

a[data-id="1"] .acg-thumb::after {
    content: "OPENAI STARTER";
}

a[data-id="2"] .acg-thumb {
    background-image: linear-gradient(135deg, #4f46e5, #8b5cf6) !important;
}

a[data-id="2"] .acg-thumb::after {
    content: "CLAUDE WRITING";
}

a[data-id="3"] .acg-thumb {
    background-image: linear-gradient(135deg, #2563eb, #38bdf8) !important;
}

a[data-id="3"] .acg-thumb::after {
    content: "GEMINI VISION";
}

a[data-id="4"] .acg-thumb {
    background-image: linear-gradient(135deg, #334155, #6366f1) !important;
}

a[data-id="4"] .acg-thumb::after {
    content: "GROK SEARCH";
}

.goods-title,
.section-title {
    color: var(--kexu-text);
}

.price,
.price .unit {
    color: var(--kexu-cyan);
}

.meta,
.stat-bottom {
    color: var(--kexu-muted);
}

.badge-soft-success {
    color: #0e7490;
    border-color: rgba(8, 145, 178, 0.20);
    background: rgba(207, 250, 254, 0.74);
}

.badge-soft-primary {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.18);
    background: rgba(219, 234, 254, 0.78);
}

.item-message {
    color: var(--kexu-muted);
}

@media (max-width: 767.98px) {
    .notice-grid {
        grid-template-columns: 1fr;
    }

    .panel {
        border-radius: 17px;
    }

    .panel-header,
    .panel-body {
        padding-left: 15px;
        padding-right: 15px;
    }
}