/* ===========================
   Responsive / Final Polish
   _bak/responsive.css 참고
   =========================== */

@media (max-width: 768px) {
    .emoticon-page-head,
    .emoticon-upload-status {
        align-items: stretch;
        flex-direction: column;
    }

    .emoticon-shop-head-controls {
        align-items: stretch;
        width: 100%;
        margin-left: 0;
    }

    .emoticon-shop-head .emoticon-toolbar,
    .emoticon-shop-head .emoticon-toolbar label {
        width: 100%;
    }

    .emoticon-shop-head .emoticon-toolbar label {
        justify-content: space-between;
    }

    .emoticon-form-grid,
    .emoticon-searchbar,
    .emoticon-detail-head,
    .emoticon-stats-grid {
        grid-template-columns: 1fr;
    }

    .emoticon-preview-grid,
    .emoticon-result-summary,
    .emoticon-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .emoticon-card-grid {
        grid-template-columns: 1fr;
    }

    .emoticon-card {
        grid-template-rows: 160px minmax(76px, auto) auto;
    }

    .emoticon-card-thumb {
        width: 100%;
        height: 160px;
    }

    .emoticon-detail-thumb {
        width: 100%;
    }

    .emoticon-item-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .emoticon-detail-overlay {
        padding: 12px;
    }

    .emoticon-detail-panel {
        margin: 12px auto;
        padding: 18px;
    }

    .emoticon-detail-page {
        padding: 18px;
    }

    .emoticon-detail-panel .emoticon-detail-head {
        margin-right: 0;
    }

    .emoticon-mypage-summary {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .emoticon-mypage-summary .emoticon-link-button {
        grid-column: 1 / -1;
    }

    .emoticon-mini-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .emoticon-page {
        padding: 18px 12px 36px;
    }

    .emoticon-page-head h1,
    .emoticon-detail-info h1,
    .emoticon-result-head h1 {
        font-size: 24px;
    }

    .emoticon-head-actions,
    .emoticon-detail-actions,
    .emoticon-purchase-box form,
    .emoticon-form-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .emoticon-link-button,
    .emoticon-primary-button {
        width: 100%;
    }

    .emoticon-card {
        grid-template-rows: 140px minmax(72px, auto) auto;
        padding: 12px;
    }

    .emoticon-card-thumb {
        width: 100%;
        height: 140px;
    }

    .emoticon-preview-grid,
    .emoticon-result-summary,
    .emoticon-result-grid {
        grid-template-columns: 1fr;
    }

    .emoticon-item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .emoticon-mini-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .emoticon-result-grid img {
        width: 88px;
        height: 88px;
    }
}