/* =========================================================
   카탈로그 페이지 전용
   ========================================================= */

/* 상단 검색·네비 영역은 row layout */
.catalog-topbar-row { align-items: center; }

/* 그룹 (마감 임박 / 이번 주 / 다음 주 / 여유 / 상시) */
.group { margin-bottom: 2.5rem; }
/* 마지막 그룹은 하단 마진 제거 — 카드↔footer 간격은 common.css 의 통일 규칙(1.5rem)에 맡김 */
.group:last-child { margin-bottom: 0; }
.group-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; padding-bottom: 0.7rem; border-bottom: 2px solid var(--border); }
.group-head .indicator { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.group-head h3 { font-size: 1.1rem; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.group-head .count { color: var(--muted); font-size: 0.85rem; font-weight: 500; margin-left: auto; }

.group.new .group-head { border-bottom-color: var(--new); }
.group.new .indicator { background: var(--new-soft); color: var(--new); }
.group.urgent .group-head { border-bottom-color: var(--urgent); }
.group.urgent .indicator { background: var(--urgent-soft); color: var(--urgent); }
.group.thisweek .indicator { background: var(--accent-soft); color: #B45309; }
.group.nextweek .indicator { background: var(--brand-soft); color: var(--brand); }
.group.later .indicator { background: var(--safe-soft); color: var(--safe); }
.group.openend .indicator { background: #F1F5F9; color: var(--muted); }

/* 상품 카드 (가로 행) */
.pcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; gap: 1.1rem; align-items: center; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.pcard:hover { border-color: var(--brand); transform: translateX(2px); box-shadow: 0 4px 16px rgba(79,70,229,0.08); color: inherit; }
.pcard + .pcard { margin-top: 0.7rem; }

.pcard .pimg { width: 92px; height: 92px; border-radius: var(--radius-sm); background: var(--brand-soft); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; position: relative; }
/* 라이트박스 어포던스(.has-images / .img-count) 는 common.css 의 공용 클래스. */
.pcard .pimg.v2 { background: var(--accent-soft); }
.pcard .pimg.v3 { background: var(--safe-soft); }
.pcard .pimg img { width: 100%; height: 100%; object-fit: cover; }

.pcard .pinfo { flex: 1; min-width: 0; }
.pcard .pname { font-size: 1.02rem; font-weight: 700; margin: 0 0 0.35rem; color: var(--text); letter-spacing: -0.02em; }
/* 옵션 상품 표시 — 상품명 옆 인라인 태그 (단품은 미표시) */
.pcard .popt-tag { display: inline-block; vertical-align: middle; margin-left: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 5px; font-size: 0.72rem; font-weight: 700; letter-spacing: -0.01em; background: var(--brand-soft); color: var(--brand); }
.pcard .pmeta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.85rem; font-size: 0.83rem; color: var(--muted); margin: 0 0 0.5rem; }
.pcard .pmeta i { font-size: 0.78rem; margin-right: 0.2rem; }
.pcard .pprice { font-size: 1.15rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }

.dday-pill { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px; flex-shrink: 0; align-self: flex-start; margin-top: 0.2rem; }
.dday-pill.new { background: var(--new); color: white; }
.dday-pill.urgent { background: var(--urgent); color: white; }
.dday-pill.thisweek { background: var(--accent); color: #6B3F00; }
.dday-pill.nextweek { background: var(--brand-soft); color: var(--brand); }
.dday-pill.later { background: var(--safe-soft); color: var(--safe); }
.dday-pill.openend { background: #F1F5F9; color: var(--muted); }

.pcard .pcta { color: var(--muted); font-size: 1.4rem; flex-shrink: 0; transition: color 0.15s, transform 0.15s; }
.pcard:hover .pcta { color: var(--brand); transform: translateX(3px); }

/* =========================================================
   모바일(<768px) 카드 — 조밀 배치
   - D-day pill 을 이미지 좌상단 오버레이로 이동 (본문 행에서 폭 차지 제거)
   - → 화살표 제거 (카드 전체가 링크라 불필요)
   - 정보 영역이 남은 폭 전체를 사용 → 상품명·마감일 잘림 해소
   ========================================================= */
@media (max-width: 767.98px) {
    .pcard { position: relative; padding: 0.75rem; gap: 0.8rem; }
    .pcard .pimg { width: 72px; height: 72px; font-size: 1.7rem; }

    /* D-day pill → 이미지 좌상단 오버레이 */
    .dday-pill {
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        margin: 0;
        z-index: 1;
        font-size: 0.68rem;
        padding: 0.18rem 0.5rem;
        box-shadow: 0 1px 5px rgba(15,23,42,0.25);
    }

    /* → 화살표 숨김 */
    .pcard .pcta { display: none; }

    /* 본문 — 폭 전체 활용, 간격 축소 */
    .pcard .pname { font-size: 0.97rem; margin-bottom: 0.3rem; }
    .pcard .pmeta { gap: 0.25rem 0.7rem; margin-bottom: 0.35rem; font-size: 0.8rem; }
    .pcard .pprice { font-size: 1.08rem; }
}

/* 로딩 인디케이터 */
.catalog-loading { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.catalog-loading i { font-size: 1.8rem; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }