@charset "utf-8";
/* =========================================================================
   pliki8 테마 — 디자인 토큰 + 반응형 셸 (M1)
   출처: docs/pliki8-analysis/09-yc5-implementation-map.md §1 (디자인 토큰)
         docs/pliki8-analysis/01-header-nav.md (PC 헤더 실측)
         docs/pliki8-analysis/08-mobile.md (모바일 실측)
         design/pliki-canvas/DesignSystem.dc.html (비주얼 스펙)
   방침: 모바일 퍼스트 · 단일 반응형 테마 (G5_USE_MOBILE = false)
   ========================================================================= */

/* Pretendard Variable — 동적 서브셋 (jsdelivr CDN)
   [M7/NFR-03] @import 는 이 파일을 파싱한 뒤에야 요청이 시작되는 직렬 체인이라
   head.sub.php 의 <link rel="stylesheet"> + preconnect 로 옮겼다.
   폰트 URL 을 바꿀 때는 theme/pliki8/head.sub.php 를 수정한다. */

/* -------------------------------------------------------------------------
   1. 디자인 토큰
   ------------------------------------------------------------------------- */
:root {
    /* 폰트 */
    --font-base: "Pretendard Variable", "Malgun Gothic", "맑은 고딕", AppleGothic, Dotum, sans-serif;
    --fs-body: 13px;          /* body 기본 */
    --fs-card-brand: 13px;    /* 카드 브랜드 (700) */
    --fs-card-name: 14px;     /* 카드 상품명 (2줄 말줄임) */
    --fs-card-sub: 11px;      /* 매장가/즉시구매가 */
    --fs-card-price: 14px;    /* 판매가 (700) */
    --fs-section-title: 20px; /* 메인 섹션 제목 */
    --fs-page-title: 28px;    /* 리스트 페이지 타이틀 */
    --fs-detail-name: 22px;   /* 상세 상품명 (700) */
    --fs-detail-price: 25px;  /* 상세 판매가 (700) */

    /* 컬러 */
    --c-text: #222;
    --c-text-strong: #000;
    --c-text-sub: rgba(34, 34, 34, .5);
    --c-text-gray: #767676;
    --c-thumb-bg: #f2f2f4;
    --c-border: #EBEBEB;
    --c-cta-green: #41B979;   /* 구매하기 */
    --c-cta-coral: #EF6253;   /* 장바구니 */
    --c-price-red: #FF204B;   /* 합계 금액 */
    --c-sale-red: #F15746;    /* 할인율 */
    --c-point-blue: #0083FF;  /* 회원가 할인 */
    --c-star: #F8B11C;        /* 별점 */

    /* 규격 */
    --radius-thumb: 8px;
    --radius-btn: 8px;
    --grid-gap-x: 20px;   --grid-gap-y: 40px;    /* PC */
    --grid-gap-x-m: 13px; --grid-gap-y-m: 24px;  /* 모바일 */
    --content-max: 1280px;
    --content-pad: 40px;  /* PC */ /* 모바일: 16px */

    /* --- 셸 확장 토큰 (위 정의안 + 캔버스 실측 보강) --- */
    --c-bg: #fff;
    --c-field-bg: #F4F4F4;      /* 입력/뱃지 배경 */
    --c-section-highlight: #ECEEF1; /* 메인 강조 섹션 배경 */
    --c-placeholder: #9A9A9E;
    --c-tab-active: #21272A;    /* 활성 탭 밑줄 2px */

    --pad-mobile: 16px;         /* 모바일 좌우 여백 */

    /* 헤더 단별 높이 — 모바일 기본값 (미디어쿼리에서 PC 값으로 승격) */
    --h-promo: 30px;            /* ① 프로모션 스트립 */
    --h-util: 0px;              /* ② 유틸 바 (모바일 미노출) */
    --h-hdmain: 50px;           /* ③ 로고 + GNB + 아이콘 */
    --h-subgnb: 46px;           /* ④ 서브 GNB(카테고리) */
    --h-dock: 55px;             /* 모바일 하단 탭바 */

    --z-hd: 90;
    --z-dock: 1400;
    --z-drawer: 1500;

    --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) {
    :root {
        /* pliki8 PC 실측(프로모션 포함 약 176px)에 맞춘 4단 헤더 밀도 */
        --h-promo: 30px;
        --h-util: 30px;
        --h-hdmain: 68px;
        --h-subgnb: 46px;
    }
}

/* -------------------------------------------------------------------------
   2. 리셋 · 베이스
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .06);
}

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-base);
    font-size: var(--fs-body);
    line-height: 1.5;
    word-break: break-word;
    /* 모바일 하단 탭바에 콘텐츠가 가리지 않도록 여백 확보 */
    padding-bottom: calc(var(--h-dock) + var(--safe-b));
    overflow-x: hidden; /* 좌우 스크롤 금지 (NFR-01) */
}

@media (min-width: 768px) {
    body { padding-bottom: 0; }
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--c-text); text-decoration: none; }
a:hover, a:focus { color: var(--c-text-strong); }

img { max-width: 100%; height: auto; border: 0; vertical-align: top; }
svg { display: block; }

button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

input, select, textarea {
    font: inherit;
    color: inherit;
}
input::placeholder, textarea::placeholder { color: var(--c-placeholder); }

table { border-collapse: collapse; border-spacing: 0; }
hr { display: none; }

/* 키보드 포커스만 표시 (마우스 클릭 시 외곽선 노이즈 제거) */
:focus-visible { outline: 2px solid var(--c-text-strong); outline-offset: 2px; }

/* 스크린리더 전용 — 그누보드 기본 클래스명과 호환 */
.sound_only,
.pk-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 그누보드 팝업레이어(newwin.inc.php) — 제목은 스크린리더 전용, 레이어는 콘텐츠 위 부유 */
#hd_pop { position: relative; z-index: 1000; margin: 0 auto; height: 0; }
#hd_pop h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.hd_pops { position: absolute; border: 1px solid var(--c-border); background: #fff; }
.hd_pops img { max-width: 100%; }
.hd_pops_footer { padding: 8px 12px; background: #000; color: #fff; font-size: 12px; }
.hd_pops_footer button { background: none; border: 0; color: #fff; font-size: 12px; padding: 4px; cursor: pointer; }

/* 본문 바로가기 (skip link) */
.pk-skip a {
    position: absolute;
    left: 0; top: -60px;
    z-index: 2000;
    display: block;
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: var(--c-text-strong);
    color: #fff;
    font-size: 14px;
}
.pk-skip a:focus { top: 0; color: #fff; }

/* 가로 스크롤 영역 공통 — 스크롤바 숨김 */
.pk-xscroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pk-xscroll::-webkit-scrollbar { display: none; height: 0; }

/* -------------------------------------------------------------------------
   3. 레이아웃 컨테이너
   최대 1280px · 좌우 패딩 PC 40px / 모바일 16px
   ------------------------------------------------------------------------- */
.pk-inner {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding-left: var(--pad-mobile);
    padding-right: var(--pad-mobile);
}

@media (min-width: 1024px) {
    .pk-inner {
        padding-left: var(--content-pad);
        padding-right: var(--content-pad);
    }
}

/* 본문 래퍼 */
.pk-wrap { min-height: 40vh; }

/* -------------------------------------------------------------------------
   4. 헤더 ① 프로모션 스트립 + ② 유틸 바
   (sticky 대상이 아니므로 헤더 본체와 분리된 형제 블록)
   ------------------------------------------------------------------------- */
.pk-hd-top { background: var(--c-bg); }

/* ① 프로모션 스트립 — bg #000 / 흰 텍스트 / 닫기 가능 */
.pk-promo {
    position: relative;
    background: #000;
    color: #fff;
}
.pk-promo[hidden] { display: none; }

.pk-promo__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--h-promo);
    padding-right: 40px;
    padding-left: 40px;
}
.pk-promo__text {
    font-size: 11px;
    line-height: 1.4;
    color: #fff;
    text-align: center;
}
.pk-promo__text a { color: #fff; text-decoration: none; }

.pk-promo__close {
    position: absolute;
    top: 50%; right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    color: #fff;
    opacity: .7;
}
.pk-promo__close:hover { opacity: 1; }

@media (min-width: 768px) {
    .pk-promo__text { font-size: 13px; }
    .pk-promo__close { right: 12px; width: 40px; height: 40px; }
}

/* ② 유틸 바 — PC 전용, 우측 정렬 소형 링크 */
.pk-util { display: none; }

@media (min-width: 768px) {
    .pk-util {
        display: block;
        border-bottom: 1px solid var(--c-field-bg);
        background: var(--c-bg);
    }
    .pk-util__list {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
        height: var(--h-util);
    }
    .pk-util__list > li { display: flex; align-items: center; }
    .pk-util__list a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: var(--c-text-gray);
    }
    .pk-util__list a:hover { color: var(--c-text-strong); }
}

/* 장바구니 수량 뱃지 — 유틸 바(PC)와 드로어(모바일) 양쪽에서 사용 */
.pk-util__count {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--c-price-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    vertical-align: 1px;
}

/* -------------------------------------------------------------------------
   5. 헤더 본체 ③ 로고 + GNB + 아이콘 / ④ 서브 GNB
   body 직계 자식이므로 position:sticky 가 문서 전체에서 유지된다.
   ------------------------------------------------------------------------- */
.pk-hd {
    position: sticky;
    top: 0;
    z-index: var(--z-hd);
    background: var(--c-bg);
    transition: box-shadow .2s ease;
}
.pk-hd.is-stuck { box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }

/* ③ 메인 헤더 */
.pk-hd__main { background: var(--c-bg); }

.pk-hd__row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--h-hdmain);
}

/* 로고 — LUSSO 워드마크 SVG (currentColor 상속, 텍스트 폴백 겸용) */
.pk-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 180px;
    overflow: hidden;
    color: var(--c-text-strong);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pk-logo:hover { color: var(--c-text-strong); }
.pk-logo svg { display: block; height: 20px; width: auto; }

@media (min-width: 768px) {
    .pk-hd__row { gap: 40px; }
    .pk-logo { max-width: 260px; font-size: 20px; }
    .pk-logo svg { height: 26px; }
}

/* PC 는 로고 / 중앙 GNB / 우측 액션을 독립 축으로 배치한다.
   flex 흐름에 모두 넣으면 메뉴가 로고 쪽으로 몰려 레퍼런스의 균형이 깨진다. */
@media (min-width: 1024px) {
    .pk-hd__row {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
        column-gap: 32px;
    }
    .pk-logo { justify-self: start; }
    .pk-logo svg { height: 30px; }
}

/* 메인 GNB — 모바일 미노출 (드로어로 대체) */
.pk-gnb { display: none; }

@media (min-width: 768px) {
    .pk-gnb { display: block; }
    .pk-gnb__list { display: flex; align-items: center; gap: 28px; }
    .pk-gnb__list > li { position: relative; }
    .pk-gnb__list a {
        display: block;
        padding: 4px 0;
        font-size: 15px;
        font-weight: 500;
        color: var(--c-text-strong);
        white-space: nowrap;
    }
    .pk-gnb__list a:hover { opacity: .6; }
}

@media (min-width: 1024px) {
    .pk-gnb { justify-self: center; }
}

/* 헤더 우측 아이콘 묶음 */
.pk-acts {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

@media (min-width: 1024px) {
    .pk-acts {
        justify-self: end;
        margin-left: 0;
    }
}

/* 터치 영역 ≥44px (NFR-01) */
.pk-iconbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--c-text-strong);
}
.pk-iconbtn:hover { color: var(--c-text-strong); opacity: .6; }

.pk-badge {
    position: absolute;
    top: 6px; right: 4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--c-price-red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

/* 햄버거 — 모바일 전용 */
@media (min-width: 768px) {
    .pk-acts__ham { display: none; }
}

/* ④ 서브 GNB — 카테고리 가로 나열 (모바일: 가로 스크롤) */
.pk-subgnb {
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg);
}
.pk-subgnb__inner { position: relative; }

.pk-subgnb__list {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--h-subgnb);
    white-space: nowrap;
}
.pk-subgnb__list > li { flex-shrink: 0; }

.pk-subgnb__list a {
    display: inline-flex;
    align-items: center;
    height: var(--h-subgnb);
    font-size: 14px;
    color: var(--c-text);
}
.pk-subgnb__list a:hover { color: var(--c-text-strong); }

/* 활성 카테고리 — 레드 (#F15746) */
.pk-subgnb__list .is-active > a {
    color: var(--c-sale-red);
    font-weight: 600;
}

/* red dot 뱃지 — 신규/이벤트 메뉴에 .pk-dot 부여 */
.pk-dot::after {
    content: "";
    display: inline-block;
    width: 4px; height: 4px;
    margin: 1px 0 0 2px;
    border-radius: 50%;
    background: var(--c-price-red);
    vertical-align: top;
}

@media (min-width: 768px) {
    .pk-subgnb__list { gap: 24px; }
}

/* 모바일에서 가로 스크롤되는 카테고리 줄은 좌우 여백을 패딩으로 유지 */
@media (max-width: 767px) {
    .pk-subgnb .pk-inner {
        padding-left: 0;
        padding-right: 0;
    }
    .pk-subgnb__list {
        padding-left: var(--pad-mobile);
        padding-right: var(--pad-mobile);
    }
}

/* -------------------------------------------------------------------------
   6. 헤더 검색 레이어 (M1: 간이 슬라이드 다운 / M4에서 풀스크린으로 확장)
   ------------------------------------------------------------------------- */
.pk-search {
    display: none;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg);
}
.pk-search.is-open { display: block; }

.pk-search__form {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 66px;
}
.pk-search__field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    height: 50px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-btn);
    background: var(--c-field-bg);
}
.pk-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: 14px;
    outline: none;
}
.pk-search__submit,
.pk-search__close {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* -------------------------------------------------------------------------
   7. 모바일 풀스크린 드로어 (햄버거 메뉴)
   ------------------------------------------------------------------------- */
.pk-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: none;
}
.pk-drawer.is-open { display: block; }

.pk-drawer__dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .4);
}

.pk-drawer__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    overflow: hidden;
}

@media (min-width: 768px) {
    /* 태블릿 이상에서는 좌측 패널형으로 (PC 는 햄버거 자체를 감춤) */
    .pk-drawer__panel {
        right: auto;
        width: 380px;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .12);
    }
}

.pk-drawer__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px var(--pad-mobile);
    border-bottom: 1px solid var(--c-border);
}
.pk-drawer__search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-btn);
    background: var(--c-field-bg);
}
.pk-drawer__search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: 14px;
    outline: none;
}
.pk-drawer__search button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.pk-drawer__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    color: var(--c-text-strong);
}

.pk-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px var(--pad-mobile) 40px;
}

.pk-drawer__title {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text-strong);
}
.pk-drawer__title + .pk-drawer__title { margin-top: 28px; }

/* 1차 카테고리 그리드 (2열) */
.pk-drawer__cate {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 28px;
}
.pk-drawer__cate a {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-btn);
    font-size: 14px;
    color: var(--c-text);
}
.pk-drawer__cate .is-active a {
    border-color: var(--c-text-strong);
    color: var(--c-text-strong);
    font-weight: 700;
}

/* 유틸 링크 목록 */
.pk-drawer__util > li + li { border-top: 1px solid var(--c-border); }
.pk-drawer__util a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    font-size: 14px;
    color: var(--c-text);
}

.pk-drawer__empty {
    padding: 24px 0;
    color: var(--c-text-gray);
    font-size: 13px;
}

/* 드로어/시트 열림 시 본문 스크롤 락 (theme.js 가 부여) */
body.pk-locked {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   8. 모바일 하단 탭바 (dock) 55px
   ------------------------------------------------------------------------- */
.pk-dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-dock);
    display: flex;
    align-items: stretch;
    height: calc(var(--h-dock) + var(--safe-b));
    padding-bottom: var(--safe-b);
    border-top: 1px solid var(--c-border);
    background: var(--c-bg);
}

@media (min-width: 768px) {
    .pk-dock { display: none; }
}

.pk-dock__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    height: var(--h-dock);
    color: var(--c-text-gray);
}
.pk-dock__item:hover { color: var(--c-text-gray); }

.pk-dock__label {
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.pk-dock__item.is-active,
.pk-dock__item.is-active:hover { color: var(--c-text-strong); }
.pk-dock__item.is-active .pk-dock__label { font-weight: 600; }

/* 최근 본 상품 바텀시트 */
.pk-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: none;
}
.pk-sheet.is-open { display: block; }
.pk-sheet__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.pk-sheet__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--safe-b);
    border-radius: 16px 16px 0 0;
    background: var(--c-bg);
}
.pk-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 56px;
    padding: 0 var(--pad-mobile) 0 var(--pad-mobile);
    border-bottom: 1px solid var(--c-border);
}
.pk-sheet__title { font-size: 15px; font-weight: 700; color: var(--c-text-strong); }
.pk-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-right: -10px;
}
.pk-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px var(--pad-mobile) 24px;
}
.pk-sheet__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-gap-x-m);
    row-gap: var(--grid-gap-y-m);
}
.pk-sheet__thumb {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    border-radius: var(--radius-thumb);
    background: var(--c-thumb-bg);
}
.pk-sheet__thumb img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.pk-sheet__name {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    max-height: 2.7em;
    overflow: hidden;
}
.pk-empty {
    padding: 40px 0;
    color: var(--c-text-gray);
    font-size: 13px;
    text-align: center;
}

/* -------------------------------------------------------------------------
   9. 푸터
   ------------------------------------------------------------------------- */
.pk-ft {
    margin-top: 60px;
    border-top: 1px solid var(--c-border);
    background: var(--c-bg);
}

/* 상단 링크줄 */
.pk-ft__nav { border-bottom: 1px solid var(--c-border); }
.pk-ft__nav-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pk-ft__nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 20px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.pk-ft__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    color: var(--c-text);
}
.pk-ft__nav a:hover { color: var(--c-text-strong); }
.pk-ft__social { display: none; }

/* 본문 (사업자 정보 + 고객센터 + 모바일 링크 열) */
.pk-ft__body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 24px;
    padding-bottom: 24px;
}

.pk-ft__cs { order: 1; display: flex; flex-direction: column; gap: 8px; }
.pk-ft__eyebrow { color: var(--c-placeholder); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.pk-ft__cs-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.03em;
}
.pk-ft__cs-title a { white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; }
.pk-ft__title { font-size: 14px; font-weight: 700; color: var(--c-text-strong); }
.pk-ft__desc { font-size: 13px; line-height: 1.6; color: var(--c-text-gray); }
.pk-ft__csbtns { display: flex; width: 100%; gap: 8px; margin-top: 4px; }
.pk-ft__csbtns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-btn);
    font-size: 13px;
}

.pk-ft__cols {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 28px 40px;
}
.pk-ft__col { display: flex; flex-direction: column; gap: 8px; min-width: 130px; }
.pk-ft__col a { font-size: 12px; color: var(--c-text-gray); }
.pk-ft__col a:hover { color: var(--c-text-strong); }

/* 사업자 정보 */
.pk-ft__info {
    order: 3;
    padding-top: 20px;
    border-top: 1px solid var(--c-border);
}
.pk-ft__company-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--c-text-gray);
}
.pk-ft__company-lines span { display: inline-block; }
.pk-ft__company-lines span:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 12px;
    background: var(--c-border);
    vertical-align: -1px;
}
.pk-ft__info b { font-weight: 600; color: var(--c-text); }
.pk-ft__verify { margin-left: 4px; color: var(--c-text-strong); text-decoration: underline; text-underline-offset: 3px; }
.pk-ft__notice { margin-top: 20px; color: var(--c-text-gray); font-size: 12px; line-height: 1.75; }
.pk-ft__copy {
    margin-top: 18px;
    font-size: 12px;
    color: var(--c-placeholder);
}

/* PC 우측 공유/맨 위 퀵 버튼 */
.pk-float-quick { display: none; }

/* 모바일에서 하단 탭바 높이만큼 여백 */
@media (max-width: 767px) {
    .pk-ft { margin-top: 40px; }
    .pk-ft__body { gap: 0; padding-top: 28px; padding-bottom: 32px; }
    .pk-ft__cs { gap: 6px; padding-bottom: 28px; border-bottom: 1px solid var(--c-border); }
    .pk-ft__csbtns { margin-top: 10px; }
    .pk-ft__cols { gap: 28px 40px; padding: 28px 0; border-bottom: 1px solid var(--c-border); }
    .pk-ft__info { padding-top: 28px; padding-bottom: 8px; border-top: 0; }
}

@media (min-width: 768px) {
    .pk-ft { margin-top: 90px; }
    .pk-ft__nav ul { gap: 0; padding: 18px 0; }
    .pk-ft__nav li { display: flex; align-items: center; }
    .pk-ft__nav li + li::before { content: ''; width: 1px; height: 13px; margin: 0 18px; background: #cfcfcf; }
    .pk-ft__nav a { min-height: 42px; font-size: 14px; font-weight: 600; }
    .pk-ft__social { display: flex; flex: 0 0 auto; gap: 12px; }
    .pk-ft__social a {
        display: inline-grid;
        width: 46px;
        height: 46px;
        place-items: center;
        border-radius: 50%;
        background: #f2f2f2;
        color: #333;
        font-size: 20px;
        transition: background .2s ease, color .2s ease, transform .2s ease;
    }
    .pk-ft__social a:hover { background: #111; color: #fff; transform: translateY(-2px); }
    .pk-ft__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 72px;
        align-items: start;
        padding-top: 48px;
        padding-bottom: 52px;
    }
    .pk-ft__info { order: 1; padding: 0; border: 0; }
    .pk-ft__company-lines { font-size: 13px; line-height: 2; }
    .pk-ft__notice { max-width: 790px; margin-top: 30px; font-size: 13px; line-height: 1.8; }
    .pk-ft__copy { margin-top: 28px; font-size: 13px; }
    .pk-ft__cs { order: 2; width: 100%; align-items: flex-end; gap: 10px; padding: 2px 0 0; text-align: right; }
    .pk-ft__cs-title { font-size: 24px; }
    .pk-ft__csbtns { width: auto; justify-content: flex-end; }
    .pk-ft__csbtns a { flex: 0 0 auto; height: 40px; }
    .pk-ft__cols { display: none; }

    .pk-float-quick {
        position: fixed;
        right: max(24px, calc((100vw - 1440px) / 2));
        bottom: 28px;
        z-index: 80;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .pk-float-quick > button {
        display: grid;
        width: 54px;
        height: 54px;
        place-items: center;
        border: 1px solid #e2e2e2;
        border-radius: 50%;
        background: rgba(255,255,255,.96);
        color: #666;
        font-size: 18px;
        box-shadow: 0 6px 18px rgba(0,0,0,.1);
        transition: border-color .2s ease, color .2s ease, transform .2s ease;
    }
    .pk-float-quick > button:hover { border-color: #111; color: #111; transform: translateY(-2px); }
    .pk-float-quick > button[aria-expanded="true"] { border-color: #111; background: #111; color: #fff; }
    .pk-share-popover {
        position: absolute;
        right: 66px;
        bottom: 0;
        width: 326px;
        padding: 22px;
        border: 1px solid #dedede;
        border-radius: 12px;
        background: #fff;
        color: #111;
        box-shadow: 0 18px 45px rgba(0,0,0,.14);
    }
    .pk-share-popover[hidden] { display: none; }
    .pk-share-popover__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .pk-share-popover__eyebrow { margin-bottom: 3px; color: #999; font-size: 9px; font-weight: 700; letter-spacing: .17em; }
    .pk-share-popover__head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
    .pk-share-popover .pk-share-popover__close {
        display: grid;
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: #f4f4f4;
        color: #666;
        font-size: 14px;
    }
    .pk-share-popover .pk-share-popover__close:hover { background: #111; color: #fff; }
    .pk-share-popover__desc { margin-top: 10px; color: #777; font-size: 12px; line-height: 1.5; }
    .pk-share-popover__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 8px; margin-top: 18px; }
    .pk-share-popover .pk-share-popover__item {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #555;
        font-size: 10px;
        line-height: 1.3;
        box-shadow: none;
        text-align: center;
        transform: none;
    }
    .pk-share-popover .pk-share-popover__item:hover { color: #111; transform: none; }
    .pk-share-popover__icon {
        display: grid;
        width: 48px;
        height: 48px;
        place-items: center;
        border-radius: 50%;
        background: #f2f2f2;
        color: #111;
        font-size: 18px;
        transition: transform .2s ease;
    }
    .pk-share-popover__item:hover .pk-share-popover__icon { transform: translateY(-2px); }
    .pk-share-popover__item.is-kakao .pk-share-popover__icon { background: #fee500; color: #191919; }
    .pk-share-popover__item.is-facebook .pk-share-popover__icon { background: #1877f2; color: #fff; }
    .pk-share-popover__item.is-twitter .pk-share-popover__icon { background: #111; color: #fff; }
    .pk-share-popover__item.is-copy .pk-share-popover__icon { background: #f2f2f2; color: #333; }
    .pk-float-quick__status {
        position: absolute;
        right: 66px;
        top: 8px;
        width: max-content;
        max-width: 220px;
        padding: 9px 12px;
        border-radius: 6px;
        background: #111;
        color: #fff;
        font-size: 11px;
        box-shadow: 0 5px 14px rgba(0,0,0,.15);
    }
}

/* -------------------------------------------------------------------------
   10. 페이지 공통 요소 (셸 범위)
   ------------------------------------------------------------------------- */
.pk-page { padding-top: 24px; padding-bottom: 40px; }

.pk-page__title {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 600;
    color: var(--c-text-strong);
}

@media (min-width: 768px) {
    .pk-page { padding-top: 40px; padding-bottom: 80px; }
    .pk-page__title { margin-bottom: 28px; font-size: var(--fs-page-title); }
}

/* 섹션 헤더 (메인/목록 공용 뼈대) */
.pk-sect { padding-top: 24px; padding-bottom: 24px; }
.pk-sect__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.pk-sect__title { font-size: var(--fs-section-title); font-weight: 600; color: var(--c-text-strong); }
.pk-sect__sub { margin-top: 3px; font-size: 12px; color: var(--c-text-gray); }
.pk-sect__more { flex-shrink: 0; font-size: 12px; color: var(--c-text-gray); }

@media (min-width: 768px) {
    .pk-sect { padding-top: 24px; padding-bottom: 40px; }
    .pk-sect__head { margin-bottom: 20px; }
    .pk-sect__sub { font-size: 13px; }
    .pk-sect__more { font-size: 13px; }
}

/* 플레이스홀더 (M1 셸 확인용 — M3 에서 실제 콘텐츠로 교체) */
.pk-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-thumb);
    background: var(--c-thumb-bg);
    color: var(--c-text-gray);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* 그누보드 코어가 body 직후 출력하는 로그인 안내 — 셸 톤에 맞춤 */
#hd_login_msg {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   11. 상품 그리드 (M2)
   출처: docs/pliki8-analysis/03-product-list.md §4 (확정 CSS 실측)
        PC   4열 · column-gap 20px · row-gap 40px
        모바일 2열 · column-gap 13px · row-gap 24px
   ------------------------------------------------------------------------- */
.pk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap-x-m);
    row-gap: var(--grid-gap-y-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .pk-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--grid-gap-x);
        row-gap: var(--grid-gap-y);
    }
}

@media (min-width: 1024px) {
    .pk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- variant: 열 수 고정 -------------------------------------------------
   모바일(<768)은 어떤 variant 든 항상 2열을 유지한다. (03-product-list.md §4)
   .pk-grid--5 는 상품 상세의 추천/관련상품 5열용. */
@media (min-width: 768px) {
    .pk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pk-grid--5,
    .pk-grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .pk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pk-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .pk-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 메인 섹션 진열 — 세로 여백을 목록보다 조금 줄인다 (TODO(M3) swiper 로 교체) */
.pk-grid--main { row-gap: var(--grid-gap-y-m); }

/* 상품 상세의 관련/추천 진열 */
.pk-grid--rel { row-gap: var(--grid-gap-y-m); }

@media (min-width: 768px) {
    .pk-grid--main,
    .pk-grid--rel { row-gap: 28px; }
}

/* 상품이 없을 때 */
.pk-noitem {
    padding: 60px 0;
    color: var(--c-text-gray);
    font-size: 14px;
    text-align: center;
}

/* -------------------------------------------------------------------------
   12. 1:1 썸네일 (FR-06) — 어떤 비율의 원본이 와도 그리드가 깨지지 않는다
   ------------------------------------------------------------------------- */
.pk-thumb {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;   /* 1:1 비율 박스 예약 → 로딩 중 레이아웃 시프트 없음 */
    overflow: hidden;
    border-radius: var(--radius-thumb);
    background: var(--c-thumb-bg);
}
.pk-thumb img {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* 원본이 정사각이 아니어도 중앙 기준으로 채운다 */
    object-position: center;
    transition: transform .4s ease;
}
/* 카드 밖(위젯 등)에서 .pk-thumb 만 단독으로 쓸 때의 호버 확대 */
.pk-thumb:hover img { transform: scale(1.1); }

.pk-thumb__none {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: var(--c-placeholder);
    font-size: 11px;
    letter-spacing: .04em;
}

/* -------------------------------------------------------------------------
   13. 상품 카드 (.pk-card)
   출처: docs/pliki8-analysis/03-product-list.md §5 (표시 순서/수치 실측)
        design/pliki-canvas/ProductCard.dc.html (기본/할인·랭킹/품절 3종)
   ------------------------------------------------------------------------- */
.pk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* --- 썸네일 영역 --- */
.pk-card__media { position: relative; }

.pk-card:hover .pk-thumb img { transform: scale(1.1); }

/* NEW — 좌상단 10px, 배경 없는 텍스트 (실측 12px/#000) */
.pk-card__new {
    position: absolute;
    left: 10px; top: 10px;
    z-index: 2;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--c-text-strong);
    letter-spacing: .02em;
}

/* 랭킹 뱃지 30×30 (#333 / 10위 이상 #000) */
.pk-card__rank {
    position: absolute;
    left: 0; top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    background: #333;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.pk-card__rank.is-ten { background: #000; }

/* 품절 오버레이 */
.pk-card__soldout {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-thumb);
    background: rgba(255, 255, 255, .55);
}
.pk-card__soldout-txt {
    padding: 8px 14px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

/* 액션 아이콘(찜 · 장바구니) — 썸네일 우하단 8px, 원형 32px, gap 6px
   ProductCard.dc.html variant ① 기준. PC 는 호버 시, 모바일은 상시 노출. */
.pk-card__acts {
    position: absolute;
    right: 8px; bottom: 8px;
    z-index: 3;               /* stretched link(::after) 보다 위 */
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.pk-card__act {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    color: var(--c-text);
    transition: color .2s ease;
}
.pk-card__act:hover { color: var(--c-text-strong); }

.pk-card:hover .pk-card__acts {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
/* 키보드 포커스로도 노출되어야 한다 (별도 규칙 — 미지원 브라우저에서 위 규칙까지 무효화되지 않게) */
.pk-card__acts:focus-within {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* 찜 담김 상태 */
.pk-card__act--wish.is-on { color: var(--c-cta-coral); }
.pk-card__act--wish.is-on svg path { fill: currentColor; }

/* 상품 카드 빠른 장바구니 — 모바일 바텀시트 / PC 중앙 모달 */
.pk-quickcart {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.pk-quickcart[hidden] { display: none !important; }
.pk-quickcart__dim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, .48);
    opacity: 0;
    transition: opacity .2s ease;
}
.pk-quickcart__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: min(82vh, 720px);
    overflow: auto;
    padding: 0 20px calc(20px + var(--safe-b));
    border-radius: 18px 18px 0 0;
    background: var(--c-bg);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .16);
    transform: translateY(24px);
    opacity: 0;
    transition: transform .22s ease, opacity .18s ease;
}
.pk-quickcart.is-open .pk-quickcart__dim { opacity: 1; }
.pk-quickcart.is-open .pk-quickcart__panel { transform: none; opacity: 1; }
.pk-quickcart__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg);
}
.pk-quickcart__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--c-text-gray);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}
.pk-quickcart__head h2 {
    margin: 0;
    overflow: hidden;
    color: var(--c-text-strong);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-quickcart__x {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--c-field-bg);
    color: var(--c-text);
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
}
.pk-quickcart__body { padding-top: 18px; }

/* 코어 기본 스킨의 카드 내부 절대배치 규칙을 모달 안에서 명시적으로 해제 */
.pk-quickcart .sct_cartop_wr {
    position: static;
    z-index: auto;
    width: auto;
    height: auto;
    padding: 0;
    text-align: left;
    background: transparent;
    opacity: 1;
}
.pk-qcart__fields { display: flex; flex-direction: column; gap: 20px; }
.pk-qcart__fieldgroup { display: flex; flex-direction: column; gap: 9px; }
.pk-qcart__label {
    display: block;
    color: var(--c-text-strong);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}
.pk-quickcart .get_item_options,
.pk-quickcart .get_item_supply {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
}
.pk-quickcart .get_item_options + .get_item_options,
.pk-quickcart .get_item_supply + .get_item_supply { margin-top: 8px; }
.pk-quickcart .get_item_options label,
.pk-quickcart .get_item_supply label {
    color: var(--c-text-gray);
    font-size: 12px;
    line-height: 1.35;
}
.pk-quickcart select.it_option,
.pk-quickcart select.it_supply,
.pk-quickcart .sct_cartop_wr .it_option {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 36px 0 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-btn);
    background: var(--c-bg);
    color: var(--c-text);
    font: inherit;
}
.pk-quickcart select:focus { border-color: var(--c-text-strong); outline: 1px solid var(--c-text-strong); }
.pk-quickcart select:disabled { background-color: var(--c-field-bg); color: var(--c-placeholder); }
.pk-qcart__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2px;
}
.pk-qcart__stepper {
    display: grid;
    grid-template-columns: 40px 54px 40px;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-btn);
}
.pk-qcart__stepper button,
.pk-qcart__stepper input {
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--c-bg);
    color: var(--c-text-strong);
    text-align: center;
}
.pk-qcart__stepper button { font-size: 18px; }
.pk-qcart__stepper input {
    border-right: 1px solid var(--c-border);
    border-left: 1px solid var(--c-border);
    font-size: 13px;
    font-weight: 600;
    appearance: textfield;
}
.pk-qcart__stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.pk-quickcart .cartopt_cart_btn,
.pk-quickcart .sct_cartop_wr .cartopt_cart_btn {
    width: 100%;
    min-height: 48px;
    margin: 22px 0 0;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-btn);
    background: var(--c-cta-coral);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.pk-quickcart .cartopt_cart_btn:disabled { opacity: .55; cursor: wait; }
.pk-quickcart .cartopt_close_btn,
.pk-quickcart .sct_cartop_wr .cartopt_close_btn {
    width: 100%;
    min-height: 44px;
    margin: 8px 0 0;
    padding: 0 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-btn);
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 13px;
    font-weight: 600;
}

.pk-carttoast {
    position: fixed;
    right: 16px;
    bottom: calc(var(--h-dock) + var(--safe-b) + 14px);
    left: 16px;
    z-index: 1700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #222;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
}
.pk-carttoast[hidden] { display: none !important; }
.pk-carttoast.is-show { opacity: 1; transform: none; }
.pk-carttoast.is-error { background: #9f2f2f; }
.pk-carttoast a { flex: 0 0 auto; color: #fff; font-size: 12px; font-weight: 700; text-decoration: underline; }

@media (min-width: 768px) {
    .pk-quickcart { align-items: center; padding: 32px; }
    .pk-quickcart__panel {
        width: min(460px, 100%);
        padding: 0 28px 28px;
        border-radius: 14px;
        box-shadow: 0 22px 70px rgba(0, 0, 0, .22);
        transform: translateY(10px) scale(.985);
    }
    .pk-carttoast {
        right: 28px;
        bottom: 28px;
        left: auto;
        width: min(390px, calc(100vw - 56px));
    }
}

/* 모바일 폭 또는 터치 기기에서는 호버가 없으므로 상시 노출한다.
   데스크톱 브라우저의 모바일 뷰포트(device=mobile QA)에서도 동일해야 한다. */
@media (max-width: 767px), (hover: none) {
    .pk-card__acts {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .pk-card__act { width: 34px; height: 34px; }
}

/* --- 정보 영역 --- */
.pk-card__info {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

/* 카드 전체를 덮는 링크 — 탭 이동은 한 번, 클릭 영역은 카드 전체 */
.pk-card__link {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* 링크가 걸린 경우에만 카드 전체를 덮는다 (span 으로 렌더될 땐 오버레이 없음) */
a.pk-card__link::after {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 1;
}

.pk-card__brand {
    margin-bottom: 2px;
    font-size: var(--fs-card-brand);   /* 13px */
    line-height: 16px;
    font-weight: 700;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 상품명 — 2줄 말줄임(고정 높이 34px) */
.pk-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 34px;
    font-size: var(--fs-card-name);    /* 14px */
    line-height: 17px;
    font-weight: 400;
    color: var(--c-text);
    word-break: break-all;
}

/* 매장가 / 정상가 */
.pk-card__cust {
    margin-top: 3px;
    font-size: var(--fs-card-sub);     /* 11px */
    line-height: 13px;
    color: var(--c-text-sub);
}
.pk-card__cust del {
    font-size: 12px;
    color: #AAA;
    text-decoration: line-through;
}

/* 검수합격 / 오늘출발 — 썸네일 좌하단 작은 칩 */
.pk-card__flags {
    position: absolute;
    left: 6px;
    bottom: 8px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: calc(100% - 12px);
    pointer-events: none;
}
.pk-card:has(.pk-card__timer) .pk-card__flags { bottom: 30px; }
.pk-card__flag {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.pk-card__flag--inspect { background: #111; color: #fff; }
.pk-card__flag--today { background: var(--c-cta-green); color: #fff; }
.pk-card__flag--hold { background: #8B6914; color: #fff; }

/* 아이콘 뱃지 (적립 / 무료배송) */
.pk-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
/* 주의: 헤더 장바구니 카운트의 .pk-badge(절대배치)와 다른 클래스다. 섞어 쓰지 말 것. */
.pk-card__badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--c-field-bg);     /* #F4F4F4 */
    color: #828B9D;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

/* 판매가 (+ 할인율) */
.pk-card__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-top: 12px;
}
.pk-card__sale {
    font-size: var(--fs-card-price);   /* 14px */
    line-height: 17px;
    font-weight: 700;
    font-style: normal;
    color: var(--c-sale-red);          /* #F15746 */
}
.pk-card__now {
    font-size: var(--fs-card-price);   /* 14px */
    line-height: 17px;
    font-weight: 700;
    color: var(--c-text-strong);
}

.pk-card__label {
    font-size: var(--fs-card-sub);
    line-height: 13px;
    color: var(--c-text-sub);
}

/* "★ 4.9 | 리뷰 12건" */
.pk-card__star {
    margin-top: 4px;
    font-size: 12px;
    line-height: 15px;
    color: var(--c-text-gray);
}
.pk-card__star i { font-style: normal; color: var(--c-star); }

/* --- 품절 카드 톤 다운 --- */
.pk-card.is-soldout .pk-card__brand,
.pk-card.is-soldout .pk-card__name,
.pk-card.is-soldout .pk-card__now { color: #9A9A9E; }
.pk-card.is-soldout .pk-card__sale { color: #C4A5A1; }
.pk-card.is-soldout:hover .pk-thumb img { transform: none; }

/* -------------------------------------------------------------------------
   14. 상품 목록 페이지 셸 (M2 최소 구현 — M4 에서 필터/정렬 UI 로 확장)
   shop/list.php 가 만드는 #sct / #sct_sortlst 컨테이너와
   테마 스킨(navigation / listcategory / list.sort)의 마크업을 담당한다.
   ------------------------------------------------------------------------- */
#sct { margin: 0; }
#sct_hhtml:empty,
#sct_thtml:empty { display: none; }

.sct_admin { margin-bottom: 12px; text-align: right; }

/* 브레드크럼 */
.pk-crumb { margin-bottom: 14px; }
.pk-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--c-text-gray);
}
.pk-crumb li + li::before {
    content: "›";
    margin-right: 6px;
    color: var(--c-placeholder);
}
.pk-crumb a { color: var(--c-text-gray); }
.pk-crumb a:hover { color: var(--c-text-strong); }
.pk-crumb [aria-current="page"] { color: var(--c-text-strong); font-weight: 600; }

/* 하위 분류 칩 */
.pk-subcate { margin-bottom: 18px; }
.pk-subcate ul { display: flex; gap: 8px; }
.pk-subcate a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--c-border);
    border-radius: 17px;
    color: var(--c-text-gray);
    font-size: 13px;
    white-space: nowrap;
}
.pk-subcate a:hover {
    border-color: var(--c-text-strong);
    color: var(--c-text-strong);
}

/* 정렬 바 */
#sct_sortlst { margin-bottom: 16px; }
.pk-sort ul {
    display: flex;
    align-items: center;
    gap: 16px;
}
.pk-sort a {
    display: inline-block;
    padding: 4px 0;
    color: var(--c-text-gray);
    font-size: 13px;
    white-space: nowrap;
}
.pk-sort a:hover { color: var(--c-text-strong); }
.pk-sort .is-active > a {
    color: var(--c-text-strong);
    font-weight: 700;
}

@media (min-width: 768px) {
    .pk-crumb { margin-bottom: 18px; }
    .pk-subcate { margin-bottom: 24px; }
    #sct_sortlst { margin-bottom: 20px; }
    .pk-sort ul { justify-content: flex-end; }
    .pk-sort a { font-size: 14px; }
}

/* 페이지네이션 — 코어 get_paging() 마크업 (TODO(M4) 무한 스크롤로 대체) */
.pg_wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.pg_wrap .pg { display: flex; flex-wrap: wrap; gap: 4px; }
.pg_page,
.pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-btn);
    background: #fff;
    color: var(--c-text-gray);
    font-size: 13px;
    font-weight: 400;
}
.pg_page:hover { border-color: var(--c-text-strong); color: var(--c-text-strong); }
.pg_current {
    border-color: var(--c-text-strong);
    background: var(--c-text-strong);
    color: #fff;
    font-weight: 600;
}

/* 모션 최소화 선호 사용자 대응 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}