@charset "UTF-8";
/* =============================================================================
   BuyKing Home — Commerce shell
   -----------------------------------------------------------------------------
   레이아웃 계약: Commerce shell (유동 폭, 최대 1050px).
   업무 화면(Work shell)은 별도 계약이며 이 파일과 무관하다.

   조판 기준은 kurly.com 실측에서 왔다(2026.09.12, 뷰포트 1440):
     콘텐츠 1050 / 상품 4열 249px · 간격 18px / 이미지 3:4
     섹션 제목 28px·500 / 상품명 16px·400 / 가격 16px·700
     border-radius 이미지·카드 0, 뱃지 4px / box-shadow 페이지 전체 2개
   즉 "납작하고 각지고 굵지 않게". 위계는 사진과 여백이 만들고 장식은 쓰지 않는다.
   한글이 라틴보다 크게 보여 섹션 제목만 26px 로 한 단 낮췄다.

   색은 전역 토큰을 참조한다 — 여기서 hex 를 다시 적으면 나중에 어긋난다.
   강조색(오렌지)은 화면당 한 대상에만 붙인다. 이 사이트에서 그 대상은 '등락'이다.
   그래서 가격은 오렌지가 아니라 먹으로 쓴다.
============================================================================= */

.bk-home {
    /* ── 전역 토큰 참조 ──
       custom.css :root 의 값을 가리킨다. hex 를 여기 다시 적으면 나중에 어긋난다.
       fallback 은 custom.css 가 늦게 로드되거나 빠졌을 때의 안전장치일 뿐,
       색을 바꿀 때는 custom.css 만 고치면 된다. */
    --h-accent:        var(--color-primary,        #CC5500);
    --h-accent-ink:    var(--color-primary-dark,   #A34400);
    --h-accent-strong: var(--color-primary-strong, #BF4F00);
    --h-accent-soft:   var(--color-primary-bg,     #FFF4EC);
    --h-accent-line:   var(--color-primary-border, #FFB380);

    /* ── 면·먹 (웜 뉴트럴: auction.css 와 같은 계열) ── */
    --h-paper:    #FFFFFF;
    --h-ground:   #FBF9F6;
    --h-sunken:   #F4F0EA;
    --h-ink:      #16120E;
    --h-ink-2:    #574F45;
    --h-muted:    #938A7E;
    --h-hair:     #E9E3DA;
    --h-hair-2:   #DCD4C8;

    /* ── 등락: 이 화면의 유일한 강조 대상 ── */
    --h-up:   #C3362B;
    --h-down: #1F5FA8;

    /* ── 다크 밴드 ── */
    --h-night:      #14181F;
    --h-night-2:    #1E2A38;
    --h-night-ink:  #F4EFE6;
    --h-night-mute: #9AA6B4;

    /* ── 치수 ── */
    --h-w:       1050px;   /* Commerce shell 상한 */
    --h-gutter:  24px;
    --h-gap:     18px;     /* 상품 그리드 */
    --h-sec:     48px;     /* 섹션 상하 */

    /* 모서리는 2단뿐. 카드·이미지는 각지게 둔다 */
    --h-r:       0;
    --h-r-badge: 4px;

    background: var(--h-paper);
    color: var(--h-ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.011em;
}

body:has(.bk-home) { background: var(--h-paper); }

/* -----------------------------------------------------------------------------
   공통
----------------------------------------------------------------------------- */
.bk-home .full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.bk-home .wrap {
    width: 100%;
    max-width: var(--h-w);
    margin: 0 auto;
    padding-inline: var(--h-gutter);
}
.bk-home .link-reset { text-decoration: none; color: inherit; display: block; }

/* 수치 조판: 자릿수 고정 + 라틴 전용 서체.
   한글(원·회·품목)은 Archivo 에 글리프가 없어 자동으로 Pretendard 로 떨어진다 */
.bk-home .num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.02em;
}
.bk-home :focus-visible { outline: 2px solid var(--h-accent); outline-offset: 2px; }

/* 한글은 어절 중간에서도 줄이 바뀐다 — "서 있습니 / 다." 같은 꼴이 나온다.
   제목과 짧은 문구는 어절 단위로만 끊는다. 본문은 그대로 둔다(너무 들쭉날쭉해진다) */
.bk-home .sec-title,
.bk-home .night-title,
.bk-home .cta-t,
.bk-home .how-t,
.bk-home .auc-title,
.bk-home .p-name,
.bk-home .btn-h,
.bk-home .chip { word-break: keep-all; }

.bk-home .night-title,
.bk-home .cta-t { text-wrap: balance; }

.bk-home .sec { padding-block: var(--h-sec); }
.bk-home .sec.paper { background: var(--h-ground); }

/* -----------------------------------------------------------------------------
   버튼 — pill 을 쓰지 않는다. 4px.
----------------------------------------------------------------------------- */
.bk-home .btn-h {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--h-r-badge);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.bk-home .btn-h.solid { background: var(--h-accent-strong); color: #fff; }
.bk-home .btn-h.solid:hover { background: var(--h-accent-ink); color: #fff; }
.bk-home .btn-h.line { background: var(--h-paper); color: var(--h-ink); border-color: var(--h-hair-2); }
.bk-home .btn-h.line:hover { border-color: var(--h-accent); color: var(--h-accent-ink); }
.bk-home .btn-h.on-night { background: var(--h-night-ink); color: var(--h-night); }
.bk-home .btn-h.on-night:hover { background: #fff; }
.bk-home .btn-h.on-night-line { background: transparent; color: var(--h-night-ink); border-color: rgba(244,239,230,.3); }
.bk-home .btn-h.on-night-line:hover { border-color: var(--h-night-ink); }

/* -----------------------------------------------------------------------------
   섹션 헤더 — eyebrow 를 쓰지 않는다. 제목 한 줄 + 오른쪽 전체보기.
   같은 리듬이 다섯 번 반복되면 그 자체가 템플릿처럼 읽힌다.
----------------------------------------------------------------------------- */
.bk-home .sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}
.bk-home .sec-title {
    margin: 0;
    font-size: 26px;
    font-weight: 500;          /* 굵히지 않는다 — 크기로만 위계를 만든다 */
    line-height: 1.3;
    letter-spacing: -0.032em;
}
.bk-home .sec-title .sub {
    font-size: 15px;
    font-weight: 400;
    color: var(--h-muted);
    letter-spacing: -0.01em;
    margin-left: 10px;
}
.bk-home .more-link {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--h-ink-2);
    text-decoration: none;
}
.bk-home .more-link:hover { color: var(--h-accent-ink); }
.bk-home .more-link .arw { margin-left: 3px; }

/* =============================================================================
   0) 배너 — 순수 이미지
   -----------------------------------------------------------------------------
   HTML 이 글자를 얹지 않는다. 문구·타이포까지 전부 이미지 안에 들어간다.
   컬리 배너가 디자인된 것처럼 보이는 이유가 그것이다 — 사진 위에 웹 글자를
   올리면 어느 사이트나 똑같은 모양이 된다.

   이미지가 아직 없으면 배너 구역 전체가 사라진다(JS). 파일을 넣는 순간 나타난다.
============================================================================= */
.bk-home .banner { background: var(--h-ground); }
.bk-home .banner[hidden] { display: none; }
.bk-home .banner-track {
    position: relative;
    aspect-ratio: 1920 / 500;
    max-height: 560px;
    overflow: hidden;
}
.bk-home .bslide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}
.bk-home .bslide.is-on { opacity: 1; pointer-events: auto; }
/* 스크립트가 죽어도 첫 장은 보인다 */
.bk-home .banner:not(.ready) .bslide:first-child { opacity: 1; pointer-events: auto; }
.bk-home .bslide > a,
.bk-home .bslide > span { display: block; width: 100%; height: 100%; }
.bk-home .bslide img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    font-size: 0; color: transparent;
}

/* 컨트롤: 배경 그림이 밝을지 어두울지 모르므로 자체 대비를 갖는다 */
.bk-home .b-nav {
    position: absolute; z-index: 2; top: 50%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    appearance: none; border: 0; cursor: pointer;
    border-radius: 50%;
    background: rgba(22,18,14,.4);
    color: #fff;
    font-size: 17px; line-height: 1;
    opacity: 0;
    transition: opacity .16s ease, background .16s ease;
}
.bk-home .banner:hover .b-nav,
.bk-home .b-nav:focus-visible { opacity: 1; }
.bk-home .b-nav:hover { background: rgba(22,18,14,.72); }
.bk-home .b-nav.prev { left: 20px; }
.bk-home .b-nav.next { right: 20px; }

.bk-home .b-dots {
    position: absolute; z-index: 2;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    height: 26px; padding: 0 12px;
    border-radius: var(--h-r-pill, 999px);
    background: rgba(22,18,14,.4);
}
.bk-home .b-dot {
    appearance: none; border: 0; padding: 0; cursor: pointer;
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.45);
    transition: background .18s ease, width .18s ease;
}
.bk-home .b-dot[aria-current="true"] { background: #fff; width: 16px; border-radius: 3px; }

@media (max-width: 768px) {
    /* 모바일 1080×600 (1.8:1). 쿠팡 공식 규격 720×380(1.89:1)에 가깝게.
       4:3 은 폰 화면 절반을 먹어 시세표가 첫 화면 아래로 밀렸다 */
    .bk-home .banner-track { aspect-ratio: 9 / 5; max-height: none; }
    .bk-home .b-nav { display: none; }
    .bk-home .b-dots { bottom: 12px; }
}

/* =============================================================================
   1) 히어로 — 오늘의 시세표
   -----------------------------------------------------------------------------
   슬로건을 쓰지 않는다. 이 사업의 고유한 것은 새벽 5시에 정해지는 값이지
   그걸 설명하는 문장이 아니다. 그래서 첫 화면에 문장 대신 숫자를 놓는다.

   카드에 담지 않는다. 굵은 괘선 두 줄 사이에 행을 넣는 건 인쇄된 시세표의
   조판이다 — 둥근 모서리와 그림자로 만든 카드 UI 와 정반대 지점이고,
   이 업계 사람이 종이로 보던 것과 같은 형태다.
============================================================================= */
.bk-home .board {
    background: var(--h-ground);
    border-bottom: 1px solid var(--h-hair);
    padding-block: 40px 44px;
}

/* ── 머리: 날짜 + 사실 3개 ── */
.bk-home .board-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 22px;
}
/* 기준일은 이 화면에서 가장 특징적인 값이라 수치 조판으로 크게 세운다.
   좁힌 폭(62%)은 사이트 어디에도 없는 이 화면만의 표식 — 유일한 장식이다 */
.bk-home .stamp {
    display: block;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-stretch: 62%;
    font-weight: 800;
    font-size: 92px;
    line-height: .82;
    letter-spacing: .012em;
    color: var(--h-ink);
}
.bk-home .board-cap {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--h-ink-2);
}

/* 사실은 문장이 아니라 항목으로 적는다 — 시세표의 머리말과 같은 방식 */
.bk-home .facts { display: flex; gap: 28px; margin: 0; flex-shrink: 0; }
.bk-home .facts > div { text-align: right; }
.bk-home .facts dt {
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--h-muted);
    margin-bottom: 5px;
}
.bk-home .facts dd {
    margin: 0;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--h-ink);
}
.bk-home .facts dd .u { font-size: 13px; font-weight: 400; color: var(--h-ink-2); margin-left: 1px; }

/* ── 시세표 ── */
.bk-home .sheet { border-top: 2px solid var(--h-ink); }
.bk-home .sheet-foot {
    border-top: 2px solid var(--h-ink);
    padding-top: 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.bk-home .sheet-note { font-size: 13px; color: var(--h-muted); }
.bk-home .sheet-links { display: flex; gap: 20px; }
.bk-home .sheet-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--h-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--h-ink);
    padding-bottom: 1px;
}
.bk-home .sheet-links a:hover { color: var(--h-accent-ink); border-bottom-color: var(--h-accent); }

.bk-home .lrow {
    display: grid;
    grid-template-columns: minmax(0,auto) auto minmax(24px,1fr) minmax(104px,auto) 84px;
    grid-template-areas: "name grade lead price change";
    align-items: center;
    gap: 12px;
    min-height: 46px;
    border-bottom: 1px solid var(--h-hair-2);
}
.bk-home .lrow.data:hover { background: rgba(22,18,14,.025); }
.bk-home .lrow.colhead {
    min-height: 32px;
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--h-muted);
    border-bottom: 1px solid var(--h-hair-2);
}
.bk-home .lrow .l-name {
    grid-area: name;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-home .lrow .l-grade { grid-area: grade; }
.bk-home .grade-tag {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid var(--h-hair-2);
    border-radius: var(--h-r-badge);
    font-size: 11px;
    color: var(--h-ink-2);
}
/* 인쇄 시세표가 쓰는 점선 안내선. 품목명에서 금액까지 눈이 건너가는 거리를 잡아준다 */
.bk-home .lrow .l-lead {
    grid-area: lead;
    height: 0;
    border-bottom: 1px dotted var(--h-hair-2);
    transform: translateY(2px);
}
.bk-home .lrow .l-price {
    grid-area: price;
    text-align: right;
    font-size: 17px;
    font-weight: 700;
    color: var(--h-ink);       /* 강조색은 등락이 가져간다 */
}
.bk-home .lrow .l-price .won { font-size: 13px; font-weight: 400; color: var(--h-ink-2); margin-left: 1px; }
.bk-home .lrow .l-change {
    grid-area: change;
    text-align: right;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
}
.bk-home .l-change.is-up   { color: var(--h-up); }
.bk-home .l-change.is-down { color: var(--h-down); }
.bk-home .l-change.is-flat { color: var(--h-muted); font-weight: 400; }
.bk-home .l-change.is-none { color: var(--h-muted); font-weight: 400; font-size: 12px; }

.bk-home .ledger.anim .lrow.data { opacity: 0; }
.bk-home .ledger.anim .lrow.data.is-in { opacity: 1; transition: opacity .3s ease; }

.bk-home .ledger-empty {
    padding: 40px 0;
    color: var(--h-ink-2);
    line-height: 1.8;
    border-bottom: 1px solid var(--h-hair-2);
}
.bk-home .ledger-empty strong { display: block; font-size: 17px; font-weight: 500; color: var(--h-ink); margin-bottom: 4px; }
.bk-home .ledger-empty a { color: var(--h-accent-ink); font-weight: 500; }

/* =============================================================================
   2) 카테고리 레일
============================================================================= */
.bk-home .cat-rail { border-bottom: 1px solid var(--h-hair); }
.bk-home .cat-scroll {
    display: flex; gap: 6px;
    padding-block: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.bk-home .cat-scroll::-webkit-scrollbar { display: none; }
.bk-home .chip {
    flex-shrink: 0;
    display: inline-flex; align-items: center;
    height: 34px; padding: 0 14px;
    border: 1px solid var(--h-hair-2);
    border-radius: var(--h-r-badge);
    background: var(--h-paper);
    font-size: 14px;
    color: var(--h-ink-2);
    text-decoration: none;
}
.bk-home .chip:hover { border-color: var(--h-accent); color: var(--h-accent-ink); }
.bk-home .chip.all { background: var(--h-ink); border-color: var(--h-ink); color: #fff; }

/* =============================================================================
   3) 진행중인 경매
   상품 카드와 달리 테두리를 남긴다 — 마감 시간이 붙어 있어 한 덩어리로 읽혀야 한다.
============================================================================= */
.bk-home .auc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--h-gap); }
.bk-home .auc-card {
    border: 1px solid var(--h-hair);
    border-radius: var(--h-r);
    height: 100%;
    display: flex; flex-direction: column;
    transition: border-color .14s ease;
}
.bk-home .link-reset:hover .auc-card { border-color: var(--h-hair-2); }
.bk-home .auc-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--h-sunken);
    overflow: hidden;
}
.bk-home .auc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-home .media-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--h-muted); font-size: 13px;
}
.bk-home .live-badge {
    position: absolute; top: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 4px;
    height: 22px; padding: 0 8px;
    border-radius: var(--h-r-badge);
    background: rgba(22,18,14,.8);
    color: #fff;
    font-family: var(--font-num);
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
}
.bk-home .live-badge i { width: 4px; height: 4px; border-radius: 50%; background: #FF7A29; }

.bk-home .auc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bk-home .auc-title {
    margin: 0;
    font-size: 16px; font-weight: 400; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-home .countdown {
    align-self: flex-start;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--h-ink-2);
}
.bk-home .countdown.urgent { color: var(--h-up); font-weight: 700; }
.bk-home .countdown.ended  { color: var(--h-muted); }
.bk-home .auc-foot {
    margin-top: auto; padding-top: 10px;
    border-top: 1px solid var(--h-hair);
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.bk-home .auc-price {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 16px; font-weight: 700;
    color: var(--h-ink);
}
.bk-home .auc-price .won { font-size: 13px; font-weight: 400; }
.bk-home .auc-bids { font-size: 13px; color: var(--h-muted); }

/* =============================================================================
   4) 새벽 — 다크 풀블리드
   사진이 지배하는 유일한 구간. 번호를 붙이지 않는다 — 순서가 정보인 경우에만 쓴다.
============================================================================= */
.bk-home .night {
    position: relative;
    background: var(--h-night);
    color: var(--h-night-ink);
    padding-block: 60px;
    overflow: hidden;
    isolation: isolate;
}
.bk-home .night-bg {
    position: absolute; inset: 0; z-index: -2;
    background: linear-gradient(160deg, var(--h-night-2), var(--h-night));
}
.bk-home .night-bg img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .42; font-size: 0; color: transparent; }
.bk-home .night::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(20,24,31,.94) 0%, rgba(20,24,31,.74) 46%, rgba(20,24,31,.42) 100%),
        linear-gradient(180deg, rgba(20,24,31,.5) 0%, rgba(20,24,31,0) 30%, rgba(20,24,31,.6) 100%);
}
.bk-home .night-title {
    margin: 0;
    font-size: 24px; font-weight: 500;     /* 선언문이 아니라 구간 이름이다 — 크게 세우지 않는다 */
    line-height: 1.3; letter-spacing: -0.03em;
}
.bk-home .night-sub {
    margin: 14px 0 0;
    font-size: 15px; line-height: 1.75;
    color: var(--h-night-mute);
    max-width: 36em;
}
.bk-home .steps {
    list-style: none;
    margin: 28px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(244,239,230,.16);
    border-bottom: 1px solid rgba(244,239,230,.16);
}
.bk-home .step { padding: 24px 24px 26px; border-left: 1px solid rgba(244,239,230,.16); }
.bk-home .step:first-child { padding-left: 0; border-left: 0; }
.bk-home .step-k {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #E8A64C;
}
.bk-home .step-d { margin: 0; font-size: 14px; line-height: 1.7; color: var(--h-night-mute); }
.bk-home .night-cta { margin-top: 28px; }
.bk-home .night-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--h-night-ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(244,239,230,.5);
    padding-bottom: 2px;
}
.bk-home .night-link:hover { border-bottom-color: var(--h-night-ink); }

/* =============================================================================
   5) 상품 — 4열 249px · 간격 18px · 3:4 세로
   카드 컨테이너가 없다. 이미지가 흰 바탕에 직접 놓인다.
============================================================================= */
.bk-home .prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px var(--h-gap); }
.bk-home .prod-media {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--h-sunken);
    overflow: hidden;
    margin-bottom: 12px;
}
.bk-home .prod-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-home .p-status {
    position: absolute; top: 8px; left: 8px;
    height: 22px; padding: 0 8px;
    display: inline-flex; align-items: center;
    border-radius: var(--h-r-badge);
    font-size: 11px; font-weight: 500;
}
.bk-home .p-status.live { background: var(--h-accent-strong); color: #fff; }
.bk-home .p-status.sold { background: rgba(22,18,14,.72); color: #E0D9CE; }

.bk-home .p-name {
    margin: 0;
    font-size: 16px; font-weight: 400; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-home .p-meta { margin-top: 4px; font-size: 13px; color: var(--h-muted); }
.bk-home .p-price-row { margin-top: 6px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bk-home .p-price {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 16px; font-weight: 700;
    color: var(--h-ink);
}
.bk-home .p-price-ghost { font-size: 14px; color: var(--h-muted); text-decoration: line-through; }

/* =============================================================================
   6) 이용 방법 — 사장님 / 중매인
   양면 구조를 여기서 한 번만 갈라 보여준다. 카드가 아니라 열로 나눈다.
============================================================================= */
.bk-home .tabs {
    display: inline-flex;
    border: 1px solid var(--h-hair-2);
    border-radius: var(--h-r-badge);
    overflow: hidden;
    margin-bottom: 24px;
}
.bk-home .tab {
    appearance: none; border: 0; background: var(--h-paper);
    height: 38px; padding: 0 18px;
    font-family: var(--font-sans); font-size: 14px; font-weight: 400;
    color: var(--h-ink-2); cursor: pointer;
}
.bk-home .tab + .tab { border-left: 1px solid var(--h-hair-2); }
.bk-home .tab[aria-selected="true"] { background: var(--h-ink); color: #fff; font-weight: 500; }
.bk-home .how-panel[hidden] { display: none; }
.bk-home .how-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--h-hair);
}
.bk-home .how-col { padding: 22px 22px 4px; border-left: 1px solid var(--h-hair); }
.bk-home .how-col:first-child { padding-left: 0; border-left: 0; }
.bk-home .how-t { margin: 0 0 6px; font-size: 16px; font-weight: 500; }
.bk-home .how-d { margin: 0; font-size: 14px; line-height: 1.7; color: var(--h-ink-2); }

/* =============================================================================
   7) 이중 CTA
============================================================================= */
.bk-home .cta-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--h-hair); }
.bk-home .cta-card { padding: 34px 32px 36px; display: flex; flex-direction: column; justify-content: space-between; }
.bk-home .cta-card + .cta-card { border-left: 1px solid var(--h-hair); }
.bk-home .cta-card.primary { background: var(--h-ground); }
.bk-home .cta-t { margin: 0 0 8px; font-size: 22px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.3; }
.bk-home .cta-d { margin: 0; font-size: 14px; line-height: 1.7; color: var(--h-ink-2); max-width: 26em; }
.bk-home .cta-actions { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }

/* =============================================================================
   빈 상태
============================================================================= */
.bk-home .empty {
    padding: 48px 20px;
    text-align: center;
    border: 1px solid var(--h-hair);
    color: var(--h-muted);
    font-size: 14px;
}

/* =============================================================================
   반응형 — Commerce shell 은 유동이다. 1050 은 상한일 뿐.
============================================================================= */
@media (max-width: 900px) {
    .bk-home .board-top { flex-direction: column; align-items: flex-start; gap: 22px; }
    .bk-home .facts > div { text-align: left; }
    .bk-home .auc-grid { grid-template-columns: repeat(2, 1fr); }
    .bk-home .steps, .bk-home .how-grid { grid-template-columns: 1fr; }
    .bk-home .step, .bk-home .how-col {
        padding-inline: 0;
        border-left: 0;
        border-top: 1px solid rgba(244,239,230,.16);
    }
    .bk-home .how-col { border-top-color: var(--h-hair); }
    .bk-home .step:first-child, .bk-home .how-col:first-child { border-top: 0; }
    .bk-home .cta-grid { grid-template-columns: 1fr; }
    .bk-home .cta-card + .cta-card { border-left: 0; border-top: 1px solid var(--h-hair); }
}
@media (max-width: 768px) {
    .bk-home { --h-gutter: 16px; --h-sec: 36px; }
    .bk-home .stamp { font-size: 60px; }
    .bk-home .facts { gap: 20px; }
    .bk-home .facts dd { font-size: 17px; }
    .bk-home .sec-title { font-size: 21px; }
    .bk-home .sec-title .sub { display: block; margin: 4px 0 0; font-size: 14px; }
    .bk-home .night { padding-block: 48px; }
    .bk-home .night-title { font-size: 23px; }

    /* 원장: 5열을 2행으로 접는다. 점선 안내선은 폭이 없어 의미를 잃으므로 숨김 */
    .bk-home .lrow {
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-areas: "name price" "grade change";
        row-gap: 2px;
        padding-block: 11px;
        min-height: 0;
    }
    .bk-home .lrow .l-lead { display: none; }
    .bk-home .lrow.colhead { display: none; }
    .bk-home .lrow .l-grade { justify-self: start; }

    .bk-home .auc-grid { grid-template-columns: 1fr; }
    .bk-home .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
    .bk-home .cta-card { padding: 26px 20px 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .bk-home *, .bk-home *::before, .bk-home *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .bk-home .ledger.anim .lrow.data { opacity: 1; }
}

@media print {
    .bk-home .night, .bk-home .cta-grid, .bk-home .tabs,
    .bk-home .how-grid, .bk-home .cat-rail,
    .bk-home .auc-grid, .bk-home .prod-grid { display: none !important; }
}

/* =============================================================================
   상품 카드 — 이미지 아래 액션 버튼
   장바구니가 없고 /checkout?productId= 단건 결제라 "담기"가 아니라 "바로 구매".
   순서를 품목명 → 가격 → 메타 로 바꿨다. 원산지가 이름과 값 사이에 끼면
   시선이 한 번 끊긴다.
============================================================================= */
.bk-home .prod { display: flex; flex-direction: column; }
.bk-home .prod-media-link { display: block; text-decoration: none; }
.bk-home .prod-info { display: block; text-decoration: none; color: inherit; }
.bk-home .prod:hover .p-name { color: var(--h-accent-ink); }
.bk-home .prod-media { margin-bottom: 10px; }
.bk-home .p-buy {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%; height: 34px;
    border: 1px solid var(--h-hair-2);
    border-radius: var(--h-r-badge);
    background: var(--h-paper);
    font-size: 13px; font-weight: 500;
    color: var(--h-ink-2);
    text-decoration: none;
    margin-bottom: 10px;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.bk-home .prod:hover .p-buy {
    border-color: var(--h-accent);
    color: var(--h-accent-ink);
    background: var(--h-accent-soft);
}
.bk-home .p-buy svg { width: 13px; height: 13px; flex-shrink: 0; }
.bk-home .p-buy.sold { color: var(--h-muted); border-color: var(--h-hair); background: var(--h-sunken); }
.bk-home .prod:hover .p-buy.sold { border-color: var(--h-hair); color: var(--h-muted); background: var(--h-sunken); }

.bk-home .p-price-row { margin-top: 6px; }
.bk-home .p-meta { margin-top: 6px; }   /* 가격 아래로 내려간다 */

@media (max-width: 900px) {
    .bk-home .slide-body { min-height: 300px; padding-block: 44px; }
    .bk-home .slide-title { font-size: 28px; }
    .bk-home .hero-nav { display: none; }   /* 좁으면 스와이프·점으로 충분하다 */
}
@media (max-width: 768px) {
    .bk-home .slide-body { min-height: 260px; padding-block: 36px; }
    .bk-home .slide-title { font-size: 23px; }
    .bk-home .slide-sub { font-size: 14px; }
    .bk-home .slide-cta .btn-h { height: 42px; }
    .bk-home .hero-dots { bottom: 16px; }
    .bk-home .p-buy { height: 32px; font-size: 12px; }
}