@media (min-width: 721px) and (pointer: fine) and (hover: hover) {
    #tab-monetization .monetization-rule-strip {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 18px;
        padding: 14px 16px;
        border: 1px solid rgba(6, 182, 212, 0.26);
        border-radius: 8px;
        background: rgba(6, 182, 212, 0.08);
        color: var(--text-main);
    }
}

@media (max-width: 720px), (max-device-width: 920px), (pointer: coarse), (hover: none) {
    #tab-monetization .table-card {
        position: relative;
        overflow: hidden;
        padding: 18px;
        border-color: rgba(6, 182, 212, 0.24);
        background:
            linear-gradient(145deg, rgba(6, 182, 212, 0.08), rgba(16, 185, 129, 0.04)),
            rgba(22, 30, 49, 0.74);
    }

    #tab-monetization .table-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: linear-gradient(180deg, #06b6d4, #10b981, #8b5cf6);
    }

    #tab-monetization .card-header {
        gap: 10px;
        margin-bottom: 14px;
    }

    #tab-monetization .card-header h3 {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.045);
        font-size: 15px;
        line-height: 1.25;
    }

    #tab-monetization .card-header h3 i {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: rgba(6, 182, 212, 0.16);
        color: #67e8f9;
    }

    #tab-monetization .monetization-rule-strip {
        display: grid;
        gap: 8px;
        margin: 0 0 14px;
        padding: 13px;
        border: 1px solid rgba(6, 182, 212, 0.26);
        border-radius: 8px;
        background: rgba(6, 182, 212, 0.08);
        font-size: 12px;
        line-height: 1.45;
    }

    #tab-monetization .monetization-rule-strip strong {
        font-size: 14px;
        color: #fff;
    }

    #tab-monetization .rule-chip {
        width: fit-content;
        padding: 4px 9px;
        border-radius: 999px;
        background: rgba(34, 197, 94, 0.16);
        color: #86efac;
        font-size: 10px;
        font-weight: 900;
    }

    #tab-monetization .monetization-flow-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 14px;
        border-color: rgba(6, 182, 212, 0.16);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.026)),
            rgba(15, 23, 42, 0.82);
    }

    #tab-monetization .monetization-flow-row::before {
        background: linear-gradient(180deg, #06b6d4, #10b981);
    }

    #tab-monetization .monetization-flow-row td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 38px;
        padding: 8px 9px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.035);
        text-align: right;
        font-size: 13px;
    }

    #tab-monetization .monetization-flow-row td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 900;
        text-align: left;
    }

    #tab-monetization .monetization-flow-row td:nth-child(1) {
        grid-column: 1 / -1;
        justify-content: center;
        min-height: 42px;
        background: rgba(139, 92, 246, 0.14);
        color: #fff;
        font-size: 16px;
        font-weight: 900;
    }

    #tab-monetization .monetization-flow-row td:nth-child(1)::before {
        display: none;
    }

    #tab-monetization .monetization-flow-row td:nth-child(2),
    #tab-monetization .monetization-flow-row td:nth-child(3) {
        min-height: 54px;
        background: rgba(6, 182, 212, 0.1);
        font-size: 15px;
        font-weight: 900;
    }

    #tab-monetization .monetization-flow-row td:nth-child(n+4) {
        grid-column: 1 / -1;
    }

    #tab-monetization .monetization-flow-row td:nth-child(n+4)::before {
        display: none;
    }

    #tab-monetization .monetization-flow-row .source-empty {
        display: none;
    }

    #tab-monetization .flow-empty td:nth-child(2)::after {
        content: "준비기간";
        margin-left: 8px;
        padding: 3px 7px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.12);
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 900;
    }

    .cash-source {
        display: inline-flex;
        align-items: center;
        min-width: 82px;
        padding: 5px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 900;
    }

    .source-dividend { background: rgba(16, 185, 129, 0.16); color: #86efac; }
    .source-sale { background: rgba(139, 92, 246, 0.16); color: #c4b5fd; }
    .source-isa { background: rgba(59, 130, 246, 0.16); color: #93c5fd; }
    .source-us { background: rgba(6, 182, 212, 0.16); color: #67e8f9; }
    .source-spy { background: rgba(250, 204, 21, 0.14); color: #fde68a; }
    .source-btc { background: rgba(247, 147, 26, 0.16); color: #fdba74; }
    .source-rise { background: rgba(34, 197, 94, 0.15); color: #86efac; }
    .source-pension { background: rgba(236, 72, 153, 0.16); color: #f9a8d4; }
}