/* ============================================================
   노리핫딜 모바일 리뉴얼 (renewal.css) — page.css 뒤에 로드
   기준: 820px 이하 = 모바일 카드형, 그 이상 = 기존 데스크톱 유지
   ============================================================ */

/* 데스크톱 미세 조정 */
@media (min-width: 821px){
    .cont {max-width:120rem}
    .table_wrap .table td {padding-top:1rem; padding-bottom:1rem}
    .table_wrap .table td img {max-height:6rem; width:auto}
}

@media (max-width: 820px){
    html {font-size:62.5%}
    body {font-size:1.5rem; -webkit-text-size-adjust:100%}
    .body {padding-top:0}
    .cont {width:100%; max-width:100%; margin:0; padding:0 1.4rem; box-sizing:border-box}
    .p-5 {padding:1.2rem 0 !important}

    /* 상단 타이틀 */
    .tit {display:flex; flex-direction:column; gap:.5rem; padding:1rem 0 .6rem}
    .tit strong {font-size:2.2rem !important; letter-spacing:-.02em}
    .tit span {font-size:1.2rem; color:#8a8a8a; line-height:1.55; display:block}

    /* 검색 */
    form.pt-5 {padding-top:.8rem !important}
    .src {display:flex; flex-direction:column; gap:.6rem; margin:0}
    .src li, .src li.cate_cont, .src li.date_range, .src li.sel_area {width:100% !important; margin:0 !important}
    .src .form-control, .src .form-select {height:4.4rem; font-size:1.5rem; border-radius:.8rem}
    .btn_submit, form .btn_sellu {display:block; width:100% !important; height:4.2rem; margin-top:.6rem; font-size:1.6rem; border-radius:.8rem}

    /* 카테고리 칩 */
    .nav {display:flex; flex-wrap:nowrap !important; width:100%; gap:.6rem; overflow-x:auto; white-space:nowrap; padding:.9rem 0;
          position:sticky; top:0; background:#fff; z-index:6;
          -webkit-overflow-scrolling:touch; scrollbar-width:none; box-shadow:0 1px 0 #eee}
    .nav::-webkit-scrollbar {display:none}
    .nav .nav-link {flex:0 0 auto; padding:.7rem 1.4rem; border-radius:2rem;
                    background:#f4f5f7; color:#555; font-size:1.4rem; font-weight:500}
    .nav .nav-link.active {background:var(--sellu-point); color:#fff; font-weight:700}

    /* 목록 = 카드 */
    .table_wrap {overflow:visible; padding-top:.8rem !important}
    #list {display:block; border:0; background:transparent; table-layout:auto}
    #list thead {display:none}
    #list tbody {display:block; padding-bottom:1.6rem}
    #list tr {display:grid; gap:.3rem .9rem; padding:1.1rem; margin:0 0 1rem;
              border:1px solid #ececec; border-radius:1.2rem; background:#fff; align-items:start;
              box-shadow:0 1px 2px rgba(0,0,0,.03)}
    #list tr.nodata {display:block; padding:3rem 0; text-align:center; color:#888}
    #list td {display:block; height:auto !important; min-height:0 !important; border:0 !important; padding:0 !important;
              white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
              vertical-align:top}
    #list td img {max-width:100%; height:auto; border-radius:.8rem}
    #list td a {display:block}

    /* No. 숨김 */
    #list td:nth-child(1) {display:none}

    /* 상품 썸네일 */
    #list td:nth-child(2) {grid-area:thumb; width:auto !important; overflow:hidden; border-radius:1rem; background:#f7f7f7}
    #list td:nth-child(2) img {width:100%; height:8.4rem; object-fit:cover; display:block}

    /* 쇼핑몰 로고 */
    #list td:nth-child(3) {grid-area:shop; display:flex; align-items:center}
    #list td:nth-child(3) img {max-height:1.8rem; max-width:6.4rem; width:auto; object-fit:contain; border-radius:0}

    /* 상품명 */
    #list td:nth-child(4) {grid-area:title; font-size:1.45rem !important; line-height:1.42 !important; font-weight:600; color:#222}
    #list td:nth-child(4) a {font-size:inherit !important; line-height:inherit !important; color:inherit !important; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
                             overflow:hidden !important; text-overflow:ellipsis; max-height:4.2rem}

    /* 가격 */
    #list td:nth-child(5) {grid-area:price; white-space:nowrap !important; min-width:8rem; font-size:1.4rem !important; font-weight:800; color:#e5322d;
                           text-align:right; white-space:nowrap}

    /* 작성일 */
    #list td:nth-child(6) {grid-area:date; font-size:1.2rem; color:#9a9a9a; text-align:right !important}

    #list tr {grid-template-columns:9rem minmax(0,1fr) auto;
              grid-template-areas:
                "thumb title price"
                "thumb shop  date";}

    /* 페이징 */
    .paging_area {margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center}
    .paging_area .row {position:static; display:flex; align-items:center; gap:.6rem; width:100%; margin:0}
    .paging_area .row select {width:9rem; margin:0; height:4rem; font-size:1.4rem}
    .paging_area .btn_reflash {width:4rem; height:4rem; line-height:4rem; margin:0}
    .paging {display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; width:100%; margin:0}
    .paging a {min-width:4rem; height:4rem; line-height:4rem; font-size:1.4rem; margin:0; padding:0 .6rem}
    .paging_area .total {position:static; width:100%; text-align:right; font-size:1.3rem; color:#888; margin:.2rem 0 0}

    /* 푸터 */
    footer {margin-top:2rem}
    footer .cont {width:100%; padding:2rem 1.4rem; min-height:0}
    footer .f_logo {width:12rem; float:none; display:block; margin:0 0 1.2rem}
    footer ul {float:none; width:100%; padding:0; font-size:1.25rem; line-height:1.7; color:#666}
    footer ul li {display:flex; flex-wrap:wrap; gap:.3rem 1rem; margin-bottom:.8rem}
    footer ul li a {color:#444}

    /* 상세 페이지 */
    .table_basic tr {display:grid; grid-template-columns:7.4rem 1fr; align-items:start; border-bottom:1px solid #eee}
    .table_basic th {background:#fafafa; font-size:1.3rem; padding:1rem .6rem !important; white-space:nowrap}
    .table_basic td {padding:1rem .6rem !important; font-size:1.4rem; word-break:break-all}
    .prd_detail img, .content img, table.table_basic:not(#list) img {max-width:100% !important; height:auto !important}
    #myChart, canvas {width:100% !important; max-width:100%; height:auto !important}
    .btn_area .btn {width:100%; height:4.6rem; line-height:4.6rem; font-size:1.5rem; padding:0}
    h5 {font-size:1.6rem; margin:1.6rem 0 .8rem}
}