/* ============================================================
   kmall — 네이버쇼핑 스타일 디자인
   - 시그니처 컬러: 네이버쇼핑 그린(#03C75A), 단일 포인트로만 사용
   - 폰트: 외부 CDN 의존 없이 OS 기본 한글 시스템 폰트 사용
     (Windows: 맑은 고딕 / macOS: Apple SD Gothic Neo)
   ============================================================ */

:root{
  --ink:#212529;         /* 본문/제목 텍스트 */
  --muted:#767676;       /* 보조 텍스트 (네이버 특유의 회색) */
  --line:#ededed;        /* 구분선/테두리 */
  --paper:#f7f8f9;       /* 페이지 배경 (연회색) */
  --surface:#ffffff;     /* 카드/표면 배경 */
  --green:#0E7C86;       /* kerp/kprt와 통일된 색상 */
  --green-deep:#0B6870;  /* 그린 hover/active */
  --green-tint:#DEF0EF;  /* 그린 연한 배경(배지 등) */
  --steel:#495057;       /* 상단바 등 진회색 텍스트 */

  --font-display:-apple-system,BlinkMacSystemFont,'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --font-display-weight:700;
  --font-body:-apple-system,BlinkMacSystemFont,'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --font-body-weight:400;
  --font-mono:-apple-system,BlinkMacSystemFont,'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --font-mono-weight:700;

  /* 이전 디자인과의 호환용 별칭 (accent = 그린) */
  --accent:var(--green);
  --accent-ink:#ffffff;
}
.kmall-wrap *{box-sizing:border-box;}
.kmall-wrap{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-weight:var(--font-body-weight);min-height:100vh;-webkit-font-smoothing:antialiased;}

/* ── 상단 바 ── */
.kmall-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid var(--line);background:var(--surface);}
.kmall-nav-links{display:flex;align-items:center;gap:18px;font-size:13.5px;color:var(--steel);}
.kmall-nav-links a{color:inherit;text-decoration:none;}
.kmall-nav-links a.kmall-cross-link{padding:6px 13px;border:1px solid var(--line);border-radius:99px;font-size:12.5px;color:var(--steel);}
.kmall-nav-links a.kmall-cross-link:hover{border-color:var(--green);color:var(--green-deep);}
.kmall-nav-links a:hover{color:var(--green-deep);}

/* ── 카테고리 레일 : 네이버 특유의 그린 밑줄 탭 ── */
.kmall-cat-rail{display:flex;gap:4px;padding:0 28px;overflow-x:auto;background:var(--surface);border-bottom:1px solid var(--line);}
.kmall-cat-chip{flex-shrink:0;font-family:var(--font-mono);font-weight:500;font-size:14px;padding:14px 14px 12px;border:none;border-bottom:2.5px solid transparent;border-radius:0;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .15s ease,border-color .15s ease;}
.kmall-cat-chip.active{border-bottom-color:var(--green);color:var(--ink);font-weight:700;}
.kmall-cat-chip:hover:not(.active){color:var(--ink);}

/* ── 섹션 헤더 ── */
.kmall-section{padding:28px 28px 4px;}
.kmall-section-head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;}
.kmall-section-head h3{font-family:var(--font-display);font-size:19px;font-weight:var(--font-display-weight);margin:0;letter-spacing:-.01em;}
.kmall-section-head .count{font-family:var(--font-mono);font-weight:500;font-size:12.5px;color:var(--muted);}
.kmall-section-head .kmall-select-all{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);cursor:pointer;}
.kmall-section-head .kmall-select-all input{width:15px;height:15px;cursor:pointer;}
.kmall-bulk-cart-btn{font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:7px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;}
.kmall-bulk-cart-btn:hover{opacity:.85;}
.kmall-bulk-cart-btn:disabled{opacity:.5;cursor:default;}

/* ── 상품 그리드 : 대형 카드 + 여백 중심의 네이버쇼핑식 그리드 ── */
.kmall-list{display:flex;flex-direction:column;padding:0 28px 44px;}
.kmall-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-top:none;padding:10px 16px;transition:background .12s ease;}
.kmall-row:first-child{border-top:1px solid var(--line);border-radius:10px 10px 0 0;}
.kmall-row:last-child{border-radius:0 0 10px 10px;}
.kmall-row:hover{background:#f7f8f9;}
.kmall-row .kmall-row-check{width:16px;height:16px;flex:0 0 16px;cursor:pointer;}
.kmall-row .row-link{display:flex;align-items:center;gap:16px;flex:1 1 auto;min-width:0;text-decoration:none;color:inherit;}
.kmall-row .row-thumb{position:relative;width:56px;height:56px;flex:0 0 56px;background:#f2f3f5;border-radius:6px;overflow:hidden;}
.kmall-row .row-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.kmall-row .soldout-flag{position:absolute;inset:0;background:rgba(33,37,41,.6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;}
.kmall-badge{font-family:var(--font-mono);font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:99px;letter-spacing:.01em;margin-left:8px;vertical-align:middle;}
.kmall-badge.new{background:var(--ink);color:#fff;}
.kmall-badge.recommend{background:var(--green);color:#fff;}
.kmall-row .row-code{flex:0 0 100px;font-family:var(--font-mono);font-weight:500;font-size:11px;color:var(--muted);letter-spacing:.02em;}
.kmall-row .row-name{flex:1 1 auto;font-size:14px;font-weight:400;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.kmall-row .row-price{flex:0 0 auto;font-family:var(--font-mono);font-weight:700;font-size:16px;white-space:nowrap;}
.kmall-row .row-price .won{font-size:11.5px;font-weight:400;color:var(--muted);margin-left:2px;}
.kmall-row .row-ship{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--green-deep);background:var(--green-tint);padding:3px 8px;border-radius:5px;white-space:nowrap;}

.kmall-empty{padding:64px 28px;text-align:center;color:var(--muted);}

/* ── 페이지네이션 ── */
.kmall-pager{display:flex;justify-content:center;align-items:center;gap:4px;padding:8px 28px 48px;}
.kmall-pager a,.kmall-pager span{font-family:var(--font-mono);font-weight:500;font-size:13px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--steel);}
.kmall-pager .current{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700;}
.kmall-pager a:hover{border-color:var(--green);color:var(--green-deep);}

@media (max-width:640px){
  .kmall-topbar,.kmall-cat-rail,.kmall-section,.kmall-list,.kmall-pager{padding-left:16px;padding-right:16px;}
  .kmall-nav-links{gap:10px;font-size:12px;}
  .kmall-row{gap:10px;padding:8px 12px;}
  .kmall-row .row-code,.kmall-row .row-ship{display:none;}
  .kmall-row .row-thumb{width:44px;height:44px;flex-basis:44px;}
}

@media (prefers-reduced-motion: reduce){
  .kmall-row{transition:none;}
}

/* 통합 네비게이션바(kc-nav-bar)를 쇼핑몰 전면 레이아웃 폭에 맞춤 */
.kmall-wrap .kc-nav-bar{padding:14px 28px;margin-bottom:0;border-bottom:1px solid var(--line);background:var(--surface);}
@media (max-width:720px){
  .kmall-wrap .kc-nav-bar{padding:12px 16px;}
}