/* =========================================================
   상품 목록 페이지 전용 (fam4report)

   ★★★자사몰 `fam4store/public/css/catalog.css` 의 **카드 배열을 그대로** 가져왔다
     (2026-09-03 대표이사 지시 — *"제품소개 디자인도 fam4store와 같은 카드배열 쓰라고 했는데"*).
     ⛔다열 그리드로 다시 설계하지 말 것. 초판이 `grid-template-columns: repeat(auto-fill, …)`
       로 갔다가 되돌렸다. 기준은 하나다 — **자사몰에 있는 것은 자사몰대로.**

   ⇒ 클래스 이름까지 자사몰과 같다: `.pcard` `.pimg` `.pinfo` `.pname` `.pmeta` `.pprice`
     `.pcta` `.group` `.group-head` `.catalog-loading`.
     두 사이트를 나란히 놓고 볼 때 **같은 것을 같은 이름으로** 찾을 수 있어야 한다.

   ⛔가져오지 않은 것 (이 사이트에 대응 개념이 없다)
     · `.dday-pill` · `.group.urgent|thisweek|nextweek|later` — 자사몰의 **마감일 그룹**이다.
       블로그페이 상품에는 마감일 축이 없다.
     · `.popt-tag` — 옵션 상품 표시. 이 사이트는 옵션을 다루지 않는다.
     · 품절 배지 — ★**품절 상품은 목록에 아예 나오지 않는다**(2026-09-03 대표이사 결정).
       배지를 만들면 영원히 안 쓰이는 코드가 된다.
   ========================================================= */

/* ---------- 최신성 안내 ----------
   ★★[2026-09-06] 본문의 「상품 정보는 매일 새벽 갱신됩니다」 안내는 **마크업에서 삭제**됐다
     (대표이사 지시 — *"이거 누가 보지도 않음"*). ⛔그렇다고 이 규칙을 지우지 말 것 —
     지금은 아래 `.warn` 변형이 **#divTruncated(목록이 잘렸을 때의 안내)** 를 그린다.
     즉 기본형(파랑)은 당장 쓰이지 않지만 `.warn` 이 그 위에 얹혀 있어 함께 지우면 깨진다.

   ★자사몰에 대응물이 **없어서** 새로 만들었다 — 이 사이트만의 요건이다(계획 §G-1).
   증분 동기화의 한계로 품절 상태가 최대 일주일 낡을 수 있어, 그 사실을 화면이 먼저 말한다.
   ⇒ 색·모서리·여백은 자사몰 토큰(--brand-soft·--radius-sm)만 썼다. */
.freshness-note {
    display: flex; align-items: flex-start; gap: 0.5rem;
    background: var(--brand-soft); border: 1px solid #C7D2FE;
    border-radius: var(--radius-sm); padding: 0.7rem 0.95rem;
    margin-bottom: 1.2rem;
    font-size: 0.83rem; font-weight: 600; line-height: 1.55;
    color: var(--brand-dark); word-break: keep-all;
}
.freshness-note i { font-size: 0.98rem; flex-shrink: 0; margin-top: 0.1rem; }
.freshness-note p { margin: 0; }
.freshness-note .sub { display: block; font-weight: 500; color: #4338CA; margin-top: 0.15rem; }
/* 목록이 상한에서 잘렸을 때 — 안내(파랑)와 구별되게 주의(앰버) 톤. 토큰만 쓴다. */
.freshness-note.warn { background: var(--accent-soft); border-color: #FCD34D; color: #92580C; }
.freshness-note.warn .sub { color: #B45309; }

/* ---------- 히어로 띠 (common.css 의 .hero-banner 를 그대로 쓴다) ----------
   ★자사몰 orders/catalog 와 같은 띠다. 새로 만든 것은 아래 링크 색 한 줄뿐 —
   히어로 배경이 브랜드 그라디언트라 본문 링크색(--brand)이 배경에 묻힌다. */
.hero-sub a { color: #fff; text-decoration: underline; font-weight: 700; }
.hero-sub a:hover { color: #fff; opacity: 0.85; }

/* ---------- 그룹 머리 (자사몰 catalog.css 그대로) ----------
   자사몰은 마감일별로 그룹이 여럿이지만 이 사이트는 「판매 중」 하나뿐이다.
   그래도 같은 클래스를 쓴다 — 나중에 그룹이 늘어도 자사몰과 같은 모양이 된다. */
.group { margin-bottom: 2.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; background: var(--brand-soft); color: var(--brand); }
/* 자사몰은 h3 다. 이 사이트는 페이지 h1 이 히어로 제목이라 그 아래가 h2 다. */
.group-head h2, .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-head .count strong { color: var(--brand); font-weight: 800; }

/* ---------- ★마감 분류 배지 줄 (2026-09-06 신설) ----------
   ★★자사몰 `fam4store/public/css/common.css` 의 `.hero-stats`·`.hero-stat`(97~110행)을 본떴다.
     큰 숫자 + 작은 라벨의 사각 칩, 눌린 칩이 밝게 강조되는 것 — **모양은 그대로**다.

   ⚠️이 사이트의 `common.css` 에도 `.hero-stat` 규칙이 **이미 이식돼 있다**(자사몰에서 통째로
     가져올 때 따라왔다). 그러나 이 사이트에는 그 마크업이 없어 **한 번도 쓰인 적이 없다.**
     ⇒ 그 규칙을 재사용하지 않고 `.stat-chip` 을 새로 만들었다. 이유는 두 가지다:
       1. `common.css` 는 9개 화면 공용이라 이 화면 사정으로 고칠 수 없다.
       2. 그 규칙은 **보라 히어로 띠 안**(흰 반투명)을 전제한 색이라, 놓이는 자리가 다른
          이 화면에 그대로 쓰면 배경 없이 떠 버린다.

   ★★★[왜 「어두운 면」이 필요한가 — 2026-09-06 대표이사 지시 *"뱃지는 은은한 네온글로우 스타일로"*]
     전역 표준 `~/.claude/design.md` §2-2 는 **「글로우는 다크에서만, 라이트 배경에선 색광이
     탁해져 오히려 지저분하다」** 고 못 박고 있다. 그런데 이 사이트는 **라이트 전용**이다
     (tokens.css 머리말). 두 요구가 정면으로 부딪힌다.
     ⇒ 해법은 「라이트에서 억지로 발광시키기」가 아니라 **칩이 놓이는 면을 어둡게** 하는 것이다.
        같은 `--footer-bg` 를 쓰므로 **새 색을 도입하지 않고** 페이지 안에서 이질적이지 않다.
        어두운 면 위에서는 후광이 살아나 **약한 알파로도 보인다** ⇒ 「은은한」을 지킬 수 있다.

   ★★★[2026-09-06 개정 — 어두운 면이 **띠에서 칩 각각으로 옮겨졌다**]
     대표이사 지시 — *"여기도 바깥배경 색상 들어간거는 빼버리자.. 안에 색상 채워진것만 쓰자"*.
     ⇒ 칩들을 감싸던 **바깥 띠(`--footer-bg` 패널)를 없애고**, 그 어두운 면을 **칩 자신**이 갖는다.
       칩 안의 색 채움은 그대로다. 즉 없어진 것은 「감싸는 면」이지 「칩의 면」이 아니다.
     ★★이 이전이 **필수**인 이유(빼기만 하면 화면이 깨진다): 종전 `.stat-chip` 의 배경은
       `color-mix(--chip-c 8%, transparent)` 로 **투명 위 8% tint** 였고, 어두운 면은 전부 띠가
       대고 있었다. 글자는 흰색(`color:#fff`)이다. ⇒ 띠만 빼면 **흰 본문 위에 흰 글자**가 되어
       칩이 통째로 사라진다. 그래서 두 번째 인자를 `transparent` → `var(--footer-bg)` 로 옮겼다.
       ★같은 비율(8·13·18%)을 그대로 유지하므로 **칩 자체의 겉모습은 종전과 픽셀 단위로 같다** —
         `color-mix(C 8%, footer-bg)` 는 「footer-bg 위에 C 를 8% 알파로 얹은 것」과 같은 값이다.
     ★칩끼리의 구분은 **오히려 또렷해졌다** — 종전에는 어두운 패널 위 어두운 칩이라 경계가
       약했는데(특히 색이 옅은 보라 계열 세 칸), 이제 칩 사이로 **흰 본문**이 보여 14:1 로 갈린다.
       ⇒ 이 때문에 테두리·면 농도를 손댈 필요가 없었다. ⛔경계 보강한다고 값을 올리지 말 것.
     ★후광은 **그대로 둔다.** 퍼지는 바깥 면이 어두운 패널에서 흰 본문으로 바뀌지만,
       음수 spread 로 확산이 **2~3px** 에 묶여 있어(§2-2 가 경고한 「넓게 퍼지는 색광」이 아니다)
       칩 가장자리가 옅게 빛나는 정도로만 읽힌다. 대표이사가 이미 보고 채택하신 세기이므로
       임의로 낮추지 않는다.
     ⛔띠를 되살리지 말 것. ⛔칩 배경을 다시 `transparent` 로 되돌리지 말 것(위 「깨진다」 참조).

   ★★[띠가 하던 「묶는 일」은 이제 **간격**이 한다]
     배경 면이 없어지면 여섯 칩을 한 덩어리로 묶어 주던 것이 사라진다 ⇒ 근접성으로 대신한다.
     칩 사이(묶음 **내부**)를 12.8px → **9.6px** 로 좁히고, 묶음 **바깥** 여백은 위 17.6px ·
     아래 22.4px 로 두어 **내부 : 외부 ≈ 1 : 1.8~2.3** 을 만들었다. 안쪽이 바깥쪽의 절반 이하라
     눈이 여섯을 먼저 한 묶음으로 본다. ⛔간격을 균등하게 되돌리지 말 것 — 묶음이 풀린다.
     ★바깥 위 여백(17.6px)은 없어진 패널 안쪽 여백(16px)을 대신해, **칩의 위치가 종전과 같은
       자리에 남게** 한다(띠만 사라지고 칩이 위로 튀어 오르지 않는다).

   ★색은 **네 가지뿐**이다(무지개 금지). 「마감이 급한 정도」가 식어 가는 **한 방향 온도 축**이다:
     빨강(마감 임박) → 앰버(이번 주) → 보라(다음 주·소진 시까지·전체). 신제품만 축이 달라
     사이언인데, 보라와 이웃한 한색이라 튀지 않는다. ⛔초록(`--safe`)을 더하지 말 것 —
     신호등이 되어 색이 늘고 은은함이 깨진다.
   ★★글자는 **형광으로 만들지 않는다.** 숫자·라벨은 흰색이고, 색은 **테두리와 후광에만** 있다.
     design.md §2-2 의 관찰(*"또렷한 네온 테두리가 발광"*)이 핵심이라, 글자까지 물들일 필요가 없다.
     덤으로 숫자가 전부 흰색이라 **여섯 수를 서로 비교하기 쉽다**(이 줄의 본래 목적).
   ⛔깜빡임·펄스 애니메이션을 넣지 말 것. 글로우는 정지 상태로 충분하다. */
.deadline-stats {
    /* ⛔배경·안쪽 여백·모서리 없음 — 바깥 띠를 걷어냈다(위 「2026-09-06 개정」 참조).
       띠가 사라졌으므로 그것에 걸려 있던 `padding`·`border-radius` 도 함께 없앤다
       (띠가 없는데 안쪽 여백만 남으면 칩 묶음이 이유 없이 안쪽으로 밀려 어긋나 보인다). */
    margin: 1.1rem 0 1.4rem;               /* ★묶음 바깥 여백 — 위 17.6 / 아래 22.4px. 위 「묶는 일」 참조.
                                              아래를 더 넓게 둔 것은 검색칸 포커스 링(3px) 여유 때문이다. */
    display: grid;
    /* ★flex 가 아니라 grid 다 — 칩이 **여섯 개**(자사몰은 다섯)라, 내용 폭 flex 로 두면
         중간 폭(md, 컨테이너 720px)에서 5+1 로 접혀 외톨이가 생긴다. 6 은 2·3·6 으로 딱
         나뉘어 어느 구간에서도 줄이 고르게 찬다. ⛔가로 스크롤은 만들지 않는다. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* ★9.6px — 묶음 **내부** 간격. 바깥 여백(17.6·22.4px)의 절반 이하라 여섯 칩이 한 덩어리로 읽힌다.
       칩 후광이 이웃과 뭉치지도 않는다(후광 확산 3px + 3px = 6px < 9.6px). */
    gap: 0.6rem;
}
@media (min-width: 576px) { .deadline-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .deadline-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.stat-chip {
    /* ★글로우 색 주입 — 기본은 브랜드 보라를 **밝힌** 값이다.
       원색 `--brand`(#4F46E5)는 어두운 패널(#1E293B) 위에서 너무 어두워 후광이 보이지 않는다.
       흰색과 섞어 밝기를 올렸다(≈#8F8AEC). ⇒ 새 색 토큰을 도입한 것이 아니라 **토큰에서 파생**한 값이다.
       ★design.md §2-2 의 함정(색 변수를 `:root` 에서 인디렉션하면 glow 가 죽는다)은 여기 해당하지 않는다 —
         `--chip-c` 주입도 `box-shadow` 선언도 **같은 요소(.stat-chip)** 에서 일어난다. */
    --chip-c: color-mix(in srgb, var(--brand) 62%, #fff);

    /* ★★칩이 **스스로 어두운 면**을 갖는다 — 종전에는 이 자리가 `transparent` 였고 어두운 면은
       바깥 띠가 댔다(2026-09-06 그 띠를 걷어냈다). 비율 8% 는 그대로라 겉모습은 종전과 같다.
       ⛔`transparent` 로 되돌리지 말 것 — 흰 본문 위에 흰 글자가 되어 칩이 사라진다. */
    background: color-mix(in srgb, var(--chip-c) 8%, var(--footer-bg));
    border: 1px solid color-mix(in srgb, var(--chip-c) 30%, transparent);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
    /* ★자사몰은 좌측정렬이지만 여기는 중앙정렬이다 — 자사몰은 내용 폭 flex 라 칩이 글자에
       딱 맞지만, 여기는 균등 grid 라 칩 안에 남는 폭이 생긴다. 좌측정렬이면 오른쪽이 비어 보인다. */
    text-align: center;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    /* 은은한 2겹 후광 — 근거리(또렷) + 원거리(확산). 음수 spread 로 칩에 밀착시켜
       빛이 멀리 퍼지지 않게 한다(design.md §2-2 의 강도 규칙). blur 는 그 절의 값(5/11px)보다
       크다 — 그쪽은 표에 밀집하는 작은 뱃지 기준이고, 이 칩은 훨씬 커서 같은 blur 로는 보이지 않는다. */
    box-shadow: 0 0 8px -2px color-mix(in srgb, var(--chip-c) 16%, transparent),
                0 0 18px -6px color-mix(in srgb, var(--chip-c) 12%, transparent);
}

/* 의미색 배정 — 위 「온도 축」 참조. 지정이 없는 칩(nextweek·openend·all)은 기본 보라를 그대로 쓴다. */
.stat-chip[data-filter="new"]      { --chip-c: var(--new); }      /* 사이언 — 「새로 들어온 것」, 마감과 다른 축 */
.stat-chip[data-filter="urgent"]   { --chip-c: var(--urgent); }   /* 빨강 — 가장 급함 */
.stat-chip[data-filter="thisweek"] { --chip-c: var(--accent); }   /* 앰버 — 곧 */

/* 눌리지 않은 칩에 마우스를 올렸을 때 — 기본과 선택 사이의 밝기 */
.stat-chip:hover {
    background: color-mix(in srgb, var(--chip-c) 13%, var(--footer-bg));   /* 어두운 면 위 — 위 기본과 같은 규칙 */
    border-color: color-mix(in srgb, var(--chip-c) 52%, transparent);
    box-shadow: 0 0 8px -2px color-mix(in srgb, var(--chip-c) 32%, transparent),
                0 0 18px -6px color-mix(in srgb, var(--chip-c) 24%, transparent);
}

/* ★선택된 칩이 가장 밝다. JS 가 `.active` 와 `aria-pressed` 를 함께 갱신한다. */
.stat-chip.active {
    background: color-mix(in srgb, var(--chip-c) 18%, var(--footer-bg));   /* 어두운 면 위 — 위 기본과 같은 규칙 */
    border-color: color-mix(in srgb, var(--chip-c) 78%, transparent);
    box-shadow: 0 0 10px -2px color-mix(in srgb, var(--chip-c) 48%, transparent),
                0 0 22px -6px color-mix(in srgb, var(--chip-c) 34%, transparent);
}
/* 선택된 칩에서만 숫자가 옅게 빛난다 — 「가장 밝다」를 만드는 마지막 한 겹.
   글자색은 그대로 흰색이다(형광으로 바꾸지 않는다). */
.stat-chip.active .num { text-shadow: 0 0 7px color-mix(in srgb, var(--chip-c) 55%, transparent); }
.stat-chip.active .lbl { color: #fff; }

/* ★포커스 링은 **밝은 쪽**이다 — 어두운 패널 위에서 `--brand`(#4F46E5) 원색은 대비 2.2:1 로
   보이지 않는다. 거의 흰색인 `--brand-soft` 로 3:1(WCAG 1.4.11 비텍스트)을 넉넉히 넘긴다. */
.stat-chip:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; }

/* 숫자·라벨 — span 이라 block 을 명시해야 세로로 쌓인다.
   `tabular-nums` 는 JS 가 숫자를 갈아끼울 때 폭이 흔들리지 않게 한다(자리표시 「—」→ 실수치). */
.stat-chip .num {
    display: block;
    font-size: 1.55rem; font-weight: 800; line-height: 1;
    letter-spacing: -0.02em; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* 라벨은 **줄바꿈하지 않는다** — 접히면 칩마다 높이가 달라져 줄이 들쭉날쭉해진다.
   가장 긴 라벨(「전체 진행 중」 6자 ≈ 79px)에 좌우 패딩을 더해도 ≈115px 라,
   가장 좁은 구간(320px 화면 · 2열 ≈ 129px)에서도 들어간다. */
.stat-chip .lbl {
    display: block;
    font-size: 0.75rem; font-weight: 600; margin-top: 0.25rem;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.72);   /* 어두운 패널 위 ≈7:1 — 작은 글자라 AA(4.5:1) 를 넘겨 둔다 */
}

/* ---------- ★상품명 검색 (2026-09-06 신설) ----------
   ★★자사몰(`fam4store/public/catalog.html:27-29`)은 검색을 **상단바 안**(`.topbar-search`)에
     두지만, 이 사이트는 **본문 안**에 두었다. 겉보기 취향이 아니라 폭 예산 문제다:

     · 상단바는 `.topbar-flex`(flex, gap 1rem) 한 줄에 로고+태그라인+메뉴가 들어간다.
       이 사이트의 메뉴는 로그인 상태에서 **user-chip + 링크 6개**(상품 보기 / 주문·거래명세서 /
       비밀번호 변경 / 회원탈퇴 / 로그아웃 …)로, 자사몰(칩+링크 3개)보다 **두 배**다.
     · `.topbar-menu` 는 `flex-shrink: 0` 이고 `.topbar-search` 만 `flex: 1 1 0; min-width: 0` 이라,
       폭이 모자라면 **줄어드는 쪽이 언제나 검색칸**이다. 즉 넘치지는 않고 **조용히 눌린다** —
       자리표시 문구가 잘려 무엇을 넣는 칸인지 안 보이는 상태가 된다.
     · 특히 태그라인이 켜지는 `lg`(≥992px) 구간과 컨테이너가 720px 로 좁아지는 `md` 구간이
       가장 빠듯하다. 검색을 그 줄에 끼우면 그 두 구간에서 먼저 무너진다.
   ⇒ 본문에 두면 컨테이너 폭을 온전히 쓸 수 있어 어느 폭에서도 눌리지 않는다.

   ★자리는 「판매 중인 상품」 머리 **바로 아래·목록 바로 위**다. 검색이 거르는 대상(목록)과
     그 결과 수(#lblGoodsCount)가 위아래로 맞닿아, 근접성만으로 인과가 읽힌다.

   ⇒ 색·모서리·포커스 링은 공용 `.search`(common.css 55~64행)를 그대로 쓴다.
     여기서 더한 것은 **폭 상한·바깥 여백·왼쪽 돋보기 아이콘** 셋뿐이다. */
.goods-search { display: block; margin: 0 0 1.1rem; }   /* `<search>` 는 구형 브라우저에서 inline 이라 block 을 명시한다 */

/* 폭 상한 — 본문 컨테이너는 최대 1440px 이라 100% 로 두면 한 줄짜리 입력칸이 지나치게 길어진다.
   상품명 한 줄이 넉넉히 들어가는 26rem(416px)에서 멈추고, 그보다 좁은 화면에서는 100% 로 찬다. */
.goods-search .search-wrap { max-width: 26rem; }

/* 왼쪽 돋보기 — 검색칸임을 글자 없이 알린다(자사몰은 자리표시 문구에 이모지를 넣었으나,
   이모지는 OS 폰트에 따라 크기·색이 제각각이라 여기서는 아이콘 폰트를 쓴다).
   아이콘 폭(0.95rem)+좌우 여백만큼 입력 시작점을 밀어, 글자가 아이콘에 닿지 않게 한다. */
.goods-search .search { padding-left: 2.5rem; }
.goods-search .search-icon {
    position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 0.95rem; line-height: 0; pointer-events: none;
}

/* `type="search"` 의 브라우저 기본 ✕ 를 끈다 — 우리 `.search-clear` 와 겹쳐 ✕ 가 둘로 보인다.
   ★그래도 `text` 가 아니라 `search` 를 쓰는 이유: 모바일 키보드에 「검색」 키가 뜬다. */
.goods-search .search::-webkit-search-cancel-button,
.goods-search .search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* ---------- 검색 결과 없음 (pages/products.js 가 #divGoods 에 넣는 안내) ----------
   ★위의 `.catalog-loading` 을 재사용하면 아이콘이 계속 돌아 「아직 불러오는 중」으로 읽힌다.
     그래서 **스핀 없는 짝**을 따로 둔다. 여백은 로딩(3rem)보다 조금 낮춰, 결과가 0건일 때
     화면이 통째로 비어 보이지 않게 했다. */
.catalog-empty { text-align: center; padding: 2.6rem 1rem; color: var(--muted); }
.catalog-empty i { font-size: 1.8rem; opacity: 0.55; }
.catalog-empty p { margin: 0.7rem 0 0; font-size: 0.92rem; font-weight: 600; }
.catalog-empty .kw { color: var(--text); font-weight: 800; }   /* 찾던 낱말을 되비출 때 */

/* ---------- 상품 카드 (가로 행) — 자사몰 catalog.css 그대로 ---------- */
.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:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.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; color: var(--brand); }
.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; word-break: keep-all; }
.pcard .pprice { font-size: 1.15rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }

/* ⛔자사몰 `.pmeta`(작은 회색 한 줄 — 「9/14 마감 · 일괄 배송」)는 **빼 두었다.**
   자사몰에는 있으나 블로그페이 원장에 대응 필드가 없다 — 마감일·배송메모가 별도 컬럼이
   아니라 아래 `sub_title` 한 문장 안에 들어 있기 때문이다. 빈 칸을 남기지 않는다.
   ⇒ 그 자리를 아래 `.psub` 가 대신 갖는다. */

/* ---------- ★안내문(공동구매 마감·배송 예정) — 이 사이트의 핵심 정보 ----------
   ★자사몰에 대응물이 **없어서** 새로 만들었다. 원장 `blogpay_goods.sub_title` 이며
     실물은 「9월14일까지주문 / 10월 중순 배송」 같은 **문장**이다(2026-09-03 실측 · 31건 전부 채워짐).

   ★★`.pmeta` 자리(작은 회색 글씨)에 넣지 않는다 — 대표이사 지시.
     공동구매에서는 *"언제까지 주문하면 언제 받는가"* 가 상품명 다음으로 중요해서
     **상품명 바로 아래 자기 자리**를 준다. 작은 회색으로 깔면 빨간 강조가 죽는다.

   ⚠️색은 화면이 정하지 않는다 — 상대(`sub_title_color`)가 준 값을 인라인 style 로 받는다.
     실물은 전부 빨강 계열(#ff0303·#ff0000·#fc0505)이지만 ⛔**빨강을 여기에 하드코딩하지 말 것.**
     색이 안 내려오면 아래 기본색(`--text`)으로 그린다. 값은 API 가 허용목록으로 검증해
     통과한 것만 온다(계획 §G-4 보안 주의 1). */
.pcard .psub {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 0.5rem;
    color: var(--text);          /* ★색이 안 내려왔을 때의 기본. 빨강을 박지 말 것 */
    word-break: keep-all;
}

/* ---------- ★분류 알약 (2026-09-06 신설) ----------
   ★★위 배지 줄(`.stat-chip`)을 눌러 목록을 좁힌 뒤, **그 낱말과 그 색이 카드에도 있어야** 한다.
     그래서 색 축을 새로 만들지 않고 `.stat-chip` 과 **같은 색 정의**를 `data-bucket` 으로 잇는다
     (마감 임박=빨강 · 이번 주=앰버 · 다음 주·소진 시까지=보라 · 신제품=사이언).
     ⛔초록(`--safe`)을 더하지 말 것 — 배지 줄의 「온도 축」이 깨진다.
     ※`later` 는 배지 줄에 칸이 없어 알약도 그리지 않는다(마크업이 만들지 않는다).

   ★★★[색은 **글자와 테두리 둘뿐** — 안을 채우지 않는다]
     2026-09-06 대표이사 지시 — *"알약안을 색상으로 채웠는데… 그러지 말고 글자색상과
     보더라인 색상으로만 효과를 내보자"*. ⇒ `background` 는 **`transparent`** 다.
     ⛔면을 채우지 말 것. 어두운 채움(`--footer-bg`)도, 옅은 tint 도 넣지 않는다 —
       둘 다 이 지시가 명시적으로 물린 것이다.

   ★★★[그래서 **글로우(후광)를 뺐다** — 판단 근거]
     하루 전 판(어두운 채움)에서는 알약 자신이 어두운 면이라 후광이 살았다. 그 면이 없어진 지금
     후광은 **흰 카드 위에 직접** 놓이는데, 전역 표준 `~/.claude/design.md` §2-2 가
     **「글로우는 다크 전용 · 라이트 배경에선 색광이 탁해져 오히려 지저분하다」** 고 못 박은 바로 그 조건이다.
     여기에 알약이 **26개(상품 수만큼) 세로로 늘어선다**는 사정이 겹친다 — 탁한 색번짐이 26번
     반복되면 목록 전체가 흐려 보인다. 요건은 *"글자색과 테두리색으로만 효과를 낸다"* 이므로
     **후광 없이 색 대비만으로 가는 것이 지시에 어긋나지 않는다.**
     ★★[배지 줄은 글로우를 남겼는데 왜 여기는 뺐는가 — 모순이 아니다]
       위 `.stat-chip` 은 띠를 걷어낸 뒤에도 **칩 자신이 어두운 면을 갖는다** ⇒ 후광이 어두운 면
       가장자리에서 살아난다. 반면 알약은 지시대로 **면이 아예 없다**(`transparent`) ⇒ 후광이
       흰 카드 위에 맨몸으로 놓인다. **어두운 면이 있느냐가 갈림길**이고, 두 곳의 답이 다른 것은
       조건이 다르기 때문이다. ⛔「배지 줄에는 있으니 알약에도」로 되돌리지 말 것.
     ⇒ `box-shadow` 를 두지 않는다. ⛔되돌려 넣지 말 것. ⛔깜빡임·펄스도 금지(종전과 같다).
     ⛔글자에 `text-shadow` 를 얹지 말 것 — 그것도 흰 면에서는 글자를 흐리게 만들 뿐이다.

   ★★[글자색은 원색이 아니라 **어둡게 섞은 파생값**이다 — 흰 면 대비 때문이다]
     알약 글자는 14.7px 라 Large Text 가 아니어서 **4.5:1** 이 필요하다. 흰 면(`--card`) 위 실측:
       · 보라   `--brand`  원색 **6.29:1** ✓ ⇒ 그대로 쓴다(nextweek·openend)
       · 빨강   `--urgent` 원색 3.77:1 ✗ → **82%** 검정혼합(≈#C43737)으로 **5.30:1** ✓
       · 앰버   `--accent` 원색 2.17:1 ✗ → **62%** 검정혼합(≈#986207)으로 **5.15:1** ✓
       · 사이언 `--new`    원색 2.43:1 ✗ → **62%** 검정혼합(≈#046F83)으로 **5.69:1** ✓
     ★혼합비가 색마다 다른 것은 **원색의 밝기가 다르기 때문**이다 — 앰버·사이언은 원래 밝아 많이
       내려야 하고, 빨강은 62%까지 내리면 7.98:1 로 지나쳐 **갈색으로 죽는다**(색이 안 읽힌다).
       ⇒ 각 색이 4.5:1 을 **막 넘기는 지점**에서 멈춰 hue 를 최대한 살렸다.
     ★배지 줄에서 보라를 **밝게** 파생한 것(`62%, #fff`)과 정확히 **반대 방향**이다 —
       그쪽은 어두운 패널 위, 여기는 흰 면 위라서다. 두 값이 다른 것이 불일치가 아니다.
     취향 노트 §3-1 —「신호색은 구별도보다 가독성이 먼저, 미달이면 한 단계 되돌린다」.
     ⛔원색으로 되돌리지 말 것. ⛔새 색을 도입하지 말고 반드시 `color-mix` 로 토큰에서 파생할 것.

   ★[크기 근거 — 대표이사 *"조금 잘 보이는 사이즈"*]
     카드 안 위계는 가격 18.4px(800) > 상품명 16.3px(700) > 안내문 14.4px(700) 이다.
     알약은 **14.7px / 800** — 안내문과 나란한 크기에 굵기만 한 단계 위로 얹어
     「가격 다음, 안내문과 비슷하거나 조금 위」에 앉힌다. 상품명·가격을 넘지 않아 위계가 안 뒤집힌다.
     ⛔자사몰 `.dday-pill`(0.75rem=12px)을 그대로 베끼지 말 것 — 그쪽은 `D-3` 같은 **숫자 두세 글자**라
       작아도 눈에 들어오지만, 여기는 「소진 시까지」 같은 **낱말**이라 12px 면 읽히지 않는다.

   ⛔알약은 **누르는 것이 아니다** — 카드 전체가 `<a>` 다. 커서·hover·transition 을 따로 주지 않는다
     (카드 hover 를 그대로 따라간다). 여기에 hover 를 주면 「눌리는 것」으로 오해된다. */
.pcard .pbucket {
    /* ★색은 **이 한 변수** 하나로 흐른다 — 글자는 그대로 쓰고, 테두리는 그것을 옅혀 쓴다.
       기본은 보라 **원색**이다(흰 면 위 6.29:1 이라 파생이 필요 없다).
       ⇒ 배지 줄 `.stat-chip` 과 **같은 토큰·같은 뜻**이다. 한쪽만 고치면
         「배지를 눌렀는데 카드 색이 다른」 상태가 되므로 반드시 함께 고칠 것. */
    --pill-ink: var(--brand);

    flex-shrink: 0;            /* ★줄어드는 쪽은 알약이 아니라 상품명이다(아래 「접힘 순서」 참조) */
    display: inline-flex;
    align-items: center;
    /* ★줄바꿈 금지 — 「다음 주 마감」이 「다음 주 / 마감」으로 접히면 알약 높이가 두 배가 되어
       카드마다 높이가 들쭉날쭉해진다. 폭이 모자라면 접는 것은 알약이 아니라 상품명이다. */
    white-space: nowrap;

    font-size: 0.92rem;        /* 14.72px — 안내문(14.4px)과 나란한 크기 */
    font-weight: 800;          /* 안내문(700)보다 한 단계 위 = 「조금 잘 보이는」 무게 */
    line-height: 1.2;
    letter-spacing: -0.02em;   /* 카드 안 다른 글자(.pname·.pprice)와 같은 자간 */
    color: var(--pill-ink);    /* ★색이 나타나는 자리 1 — 글자 */

    padding: 0.4rem 0.8rem;    /* 6.4 / 12.8px — 높이 ≈32px 로 92px 이미지 옆에서 과하지 않다 */
    border-radius: 999px;      /* 알약. §1-2(표는 각지게)는 표 컨트롤 규칙이라 여기 해당 없음 */

    background: transparent;   /* ⛔채우지 않는다 — 카드 흰 면이 그대로 비친다(대표이사 지시) */

    /* ★색이 나타나는 자리 2 — 테두리. **두께가 아니라 색 농도로 보완**했다.
       종전(36% 알파)은 채워진 면 위의 윤곽이라 옅어도 됐지만, 채움이 사라진 지금은 테두리가
       알약의 **형태를 혼자 정의**하므로 훨씬 진해야 한다 ⇒ 70%.
       흰 면 위 실측 대비 **3.19:1** 로 비텍스트 기준(WCAG 1.4.11 · 3:1)을 넘긴다.
       ⛔두께를 1.5px 로 올려 보완하지 말 것 — 1.5px 은 배율·위치에 따라 1px/2px 로 반올림돼
         **26개가 세로로 늘어설 때 굵기가 들쭉날쭉해 보인다.** 2px 은 알약(높이 32px)에 과하다.
       ★글자와 같은 100% 로 두지 않은 이유: 테두리까지 글자만큼 진해지면 알약이 「박스」로 읽혀
         낱말보다 테두리가 먼저 보인다. 글자가 주(主), 테두리가 종(從)인 관계를 지킨다. */
    border: 1px solid color-mix(in srgb, var(--pill-ink) 70%, transparent);
}

/* 의미색 배정 — 흰 면 위 4.5:1 을 **막 넘기는 지점**에서 멈춘 파생값이다(위 대비표 참조).
   위 `.stat-chip[data-filter=…]` 와 같은 토큰·같은 뜻이니 한쪽만 고치지 말 것.
   nextweek·openend 는 지정을 두지 않아 기본 보라 원색을 그대로 쓴다(배지 줄과 동일). */
.pcard .pbucket[data-bucket="urgent"] {                        /* 빨강 — 가장 급함 */
    --pill-ink: color-mix(in srgb, var(--urgent) 82%, #000);   /* ≈#C43737 · 5.30:1 */
}
.pcard .pbucket[data-bucket="thisweek"] {                      /* 앰버 — 곧 */
    --pill-ink: color-mix(in srgb, var(--accent) 62%, #000);   /* ≈#986207 · 5.15:1 */
}
.pcard .pbucket[data-bucket="new"] {                           /* 사이언 — 마감과 다른 축 */
    --pill-ink: color-mix(in srgb, var(--new) 62%, #000);      /* ≈#046F83 · 5.69:1 */
}

.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) — 자사몰 catalog.css 그대로 ----------
   ⛔여기서 그리드로 갈라지게 하지 말 것. 세로 리스트는 모바일에서 그대로 좋다.
   (자사몰의 D-day pill 오버레이 규칙은 그 요소가 없어 함께 빠졌다.) */
@media (max-width: 767.98px) {
    /* ★마감 분류 배지 — 좁은 화면에서는 2열(576px 미만) 또는 3열(576~767px)로 접힌다.
       ⛔칩을 감추거나 가로 스크롤로 밀어 넣지 말 것. 여섯 개가 **모두 보이는 것**이 이 줄의 값어치다.
       여기서는 칩 사이 간격과 숫자만 한 단계 줄여, 좁은 폭에서 칩이 서로를 밀지 않게 한다.
       ★검산(가장 좁은 320px 화면 · 2열): 칩 폭 ≈141px 이고 가장 긴 라벨 묶음이 ≈98.5px 라 들어간다.
         바깥 띠를 걷어내면서 그 안쪽 여백(좌우 25.6px)이 칩 폭으로 돌아와, 종전 128.7px 보다 **넓어졌다**. */
    .deadline-stats { gap: 0.5rem; }
    .stat-chip { padding: 0.6rem 0.5rem; }
    .stat-chip .num { font-size: 1.35rem; }

    /* 검색칸은 좁은 화면에서 폭 상한(26rem)이 자연히 풀려 100% 로 찬다 — 눌리지 않는다.
       아래 여백만 살짝 죈다(15.75px). 포커스 링 3px 이 첫 카드에 닿지 않는 하한은 지킨다. */
    .goods-search { margin-bottom: 0.9rem; }

    /* ★★[좁은 화면에서는 **알약이 아래 줄로 접힌다** — 줄이지 않는다]
       접힘 순서를 폭으로 판정했다(가장 긴 낱말 「다음 주 마감」 기준 · 알약 ≈124px):
         · 데스크톱에서 가장 빠듯한 구간(md · 컨테이너 720px)에서도 상품명 자리가 **≈390px** 남는다
           ⇒ 알약을 그대로 두고 **상품명이 줄바꿈**되게 한다(`.pname` 은 `word-break: keep-all` 이라
             낱말 단위로 곱게 접힌다). 알약을 줄이면 낱말이 안 읽혀 애초의 목적이 사라진다.
         · 모바일에서는 이미지(72px)+알약(≈124px)이 폭의 대부분을 먹어, 375px 화면에서 상품명 자리가
           **≈99px**(한 줄에 6자)까지 눌린다 ⇒ 여기서는 **알약을 아래 줄로 내린다.**
       ⇒ 즉 「알약을 줄인다」는 어느 구간에서도 택하지 않는다. 데스크톱은 상품명이 접히고, 모바일은 알약이 접힌다.

       ★구현이 flex 가 아니라 **grid** 인 이유: flex 에서 줄바꿈을 강제하려면 `flex-basis:100%` 가 필요한데,
         그러면 알약이 폭 전체로 늘어나 「띠」가 된다. `max-width:max-content` 로 되돌리면 그 값이
         줄바꿈 판정(hypothetical main size)에 그대로 쓰여 **줄바꿈 자체가 풀린다.** grid 는 자리를
         행·열로 못 박아 이 모순이 없다. ⛔flex+`flex-basis:100%` 로 되돌리지 말 것. */
    .pcard {
        position: relative;
        padding: 0.75rem;
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);   /* 이미지 열 + 내용 열 */
        column-gap: 0.8rem;
        row-gap: 0.5rem;                              /* 내용↔알약(8px). 가격 줄과 알약이 붙지 않는 하한 */
        align-items: center;
    }
    .pcard .pimg { width: 72px; height: 72px; font-size: 1.7rem; align-self: center; }
    /* ★알약이 **있는 카드에서만** 이미지를 두 행에 걸쳐 세로 중앙에 세운다.
       무조건 `span 2` 로 두면 알약 없는 카드(`later`)에도 빈 둘째 행과 `row-gap` 8px 이 생겨
       카드 높이가 이유 없이 달라진다. `:has()` 를 못 읽는 구형 브라우저에서는 이 한 줄만
       무시되어 이미지가 첫 행 안에서 중앙에 서는데, 그것도 그 자체로 자연스러운 모양이라
       **깨지지 않는다**(점진적 향상). */
    .pcard:has(.pbucket) .pimg { grid-row: span 2; }
    .pcard .pcta { display: none; }          /* 카드 전체가 링크라 화살표가 불필요 */

    /* 알약은 내용 열의 둘째 행 · 왼쪽 끝(상품명 정렬선에 붙는다). 폭은 내용만큼만 차지한다.
       검산(가장 좁은 320px 화면): 내용 열 ≈181px, 가장 긴 알약 ≈113px ⇒ 들어간다. */
    .pcard .pbucket {
        grid-column: 2;
        justify-self: start;
        font-size: 0.86rem;                  /* 안내문 모바일 값(0.86rem)과 같은 크기 — 위계 유지 */
        padding: 0.34rem 0.72rem;
    }
    .pcard .pname { font-size: 0.97rem; margin-bottom: 0.3rem; }
    /* 안내문은 좁은 화면에서도 **줄이지 않는다** — 마감일을 놓치면 주문을 못 한다.
       자사몰이 `.pmeta` 를 0.8rem 으로 줄이던 자리이지만 여기서는 성격이 다르다. */
    .pcard .psub { font-size: 0.86rem; margin-bottom: 0.35rem; }
    .pcard .pprice { font-size: 1.08rem; }
}

/* ---------- 로딩 인디케이터 (자사몰 catalog.css 그대로) ---------- */
.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); } }