/* ==========================================================================
   마켓프레쉬 PAD — Market Kurly Tone
   톤: 따뜻한 흰배경 + 주황 메인 + 초록 서브, 큰 사진, 큰 가격
   브랜드: 주황 #FF6B35 (메인) · 초록 #2D8659 (서브)
   ========================================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('flatpickr.min.css');
@import url('flatpickr.style.css');

:root{
  /* 브랜드 컬러 */
  --primary:#FF6B35;        /* 로고 주황 — 메인 액션, 강조, 뱃지 */
  --primary-d:#E5572B;
  --primary-l:#FFF1EA;      /* 옅은 주황 배경 */
  --secondary:#2D8659;      /* 로고 초록 — 무료배송, 긍정 신호 */
  --secondary-d:#1f6342;
  --secondary-l:#EBF6F0;

  /* 텍스트 — 마켓컬리는 회색 위계를 잘 씀 */
  --ink:#333333;
  --ink-2:#666666;
  --ink-3:#999999;
  --ink-4:#BFBFBF;

  /* 라인 / 배경 */
  --line:#EEEEEE;
  --line-2:#F4F4F4;
  --bg:#ffffff;
  --bg-2:#FAFAFA;
  --page-bg:#F5F6F8;

  /* 상태 */
  --accent:#FA622F;        /* 할인가 강조 (주황과 톤 맞춤) */
  --info:#2563EB;
  --warn:#F59E0B;

  /* 라운드 — 마켓컬리는 작게 (4-8px), 카드는 좀 더 (12-16px) */
  --r:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow:0 2px 8px rgba(0,0,0,.04);
  --shadow-hover:0 4px 16px rgba(0,0,0,.08);
  --header-h:90px;
  --header-h-mb:60px;
  --t:cubic-bezier(.4,0,.2,1);

  /* 폰트 사이즈 토큰 — 인라인 폰트 크기는 반드시 이 변수만 사용 */
  --fs-xs:11px;
  --fs-sm:12.5px;
  --fs-base:14px;
  --fs-md:15px;
  --fs-lg:16px;
  --fs-xl:17px;
  --fs-2xl:22px;
}

/* === 글로벌 폼 토큰 === */
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}
/* 흰 배경 커스텀 체크박스 — cart-check 등 별도 디자인 영역은 input이 hidden이라 영향 X */
input[type=checkbox]:not(.no-style){-webkit-appearance:none;appearance:none;background:#fff;border:1.5px solid var(--line);border-radius:4px;cursor:pointer;position:relative;flex-shrink:0;margin:0;transition:all .12s var(--t);vertical-align:middle}
input[type=checkbox]:not(.no-style):hover{border-color:var(--primary)}
input[type=checkbox]:not(.no-style):checked{background:var(--primary);border-color:var(--primary)}
input[type=checkbox]:not(.no-style):checked::after{content:"";position:absolute;left:50%;top:48%;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-55%) rotate(45deg)}
input[type=checkbox]:not(.no-style):focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* === 결제 동의 (필수) — «체크박스»에 주황 테두리 ====================
   법정 필수 항목인데 잔글씨 + 회색 네모라 손님이 못 보고 결제 버튼부터 누른다.
   시범운영 첫날 밤 「주문 동의에 체크해주세요」로 «3번» 막혔다(2026-08-21 행동로그).
   · 체크 전 = 크고(22px) «주황 테두리» 빈 네모 → 아직 할 일이 남았다는 신호
   · 체크 후 = 주황으로 채워짐(전역 규칙 그대로)
   · 막혔을 때 = 빨간 테두리 + 한 번 흔들림 → 어디를 눌러야 하는지 눈이 간다
   ※ 감싸는 상자에는 테두리를 두지 않는다 — 결제 버튼과 테두리가 겹쳐 시끄러워진다(사장님 지시). */
.agree-box{display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  font-size:14px;color:var(--ink);line-height:1.55;font-weight:600;letter-spacing:-0.02em;cursor:pointer}
.agree-box input[type=checkbox]{width:22px;height:22px;flex:0 0 22px;margin-top:1px;
  border:2px solid var(--primary);border-radius:5px}
.agree-box input[type=checkbox]:checked{background:var(--primary);border-color:var(--primary)}
.agree-box input[type=checkbox]:checked::after{width:5px;height:10px;border-right-width:2.5px;border-bottom-width:2.5px}
.agree-box .agree-req{color:var(--primary);font-weight:800}
.agree-box.warn input[type=checkbox]{border-color:#DC2626;animation:agreeShake .38s ease}
.agree-box.warn .agree-req{color:#DC2626}
@keyframes agreeShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  50%{transform:translateX(5px)}80%{transform:translateX(-3px)}}
@media (prefers-reduced-motion:reduce){.agree-box.warn input[type=checkbox]{animation:none}}

.check-sm{width:16px;height:16px}
.check-md{width:18px;height:18px}

/* === 박스 안 섹션 헤딩 (반복 인라인 → 컴포넌트화) === */
.section-h4{font-size:var(--fs-lg);font-weight:800;color:var(--ink);margin:0 0 12px;letter-spacing:-0.03em}

*,*::before,*::after{box-sizing:border-box}
/* embed-mode — iframe 모달용. 헤더/탭바/사이드 숨김, 본문만 노출 */
body.embed-mode .header,
body.embed-mode .tabbar,
body.embed-mode .my-side,
body.embed-mode .my-drawer{display:none !important}
body.embed-mode .page{padding-top:14px;padding-bottom:14px}
body.embed-mode .my-page-layout{grid-template-columns:1fr}
body.embed-mode .my-card{box-shadow:none;border:none}
body.embed-mode{background:#fff}

/* 가로 넘침 차단은 html(뷰포트)에만 — body에 overflow를 걸면 body가 스크롤 컨테이너가 돼
   그 안의 position:sticky(장바구니·주문서 우측 요약 등)가 전부 무력화된다 */
html{overflow-x:hidden}
html,body{margin:0;padding:0;touch-action:manipulation;
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:var(--ink);background:var(--page-bg);-webkit-text-size-adjust:100%;
  line-height:1.5;letter-spacing:-0.02em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* 상품 목록 페이지(메인/상세)는 사진 그리드라 흰 배경이 더 잘 어울림 */
body.body-shop{background:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0;letter-spacing:inherit}
img{max-width:100%;display:block}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{letter-spacing:-0.03em;font-weight:700}
hr{border:none;border-top:1px solid var(--line);margin:24px 0}

/* SVG 아이콘 */
.ic{width:20px;height:20px;display:inline-block;vertical-align:middle;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ic-sm{width:16px;height:16px}
.ic-lg{width:24px;height:24px;stroke-width:1.6}
.ic-xl{width:36px;height:36px;stroke-width:1.4}

/* ===== 레이아웃 ===== */
.container{max-width:1280px;margin:0 auto;padding:0 16px}
.page{padding:calc(var(--header-h-mb) + 16px) 0 80px}
@media(min-width:768px){.container{padding:0 24px}.page{padding-top:calc(var(--header-h) + 24px)}}
@media(min-width:1280px){.container{padding:0 32px}}
/* cat-bar가 있는 페이지(메인): 모바일에서 cat-bar가 헤더에 딱 붙도록 page 상단 여백 제거 */
@media(max-width:767px){.body-has-catbar .page{padding-top:var(--header-h-mb)}}

/* ===== 헤더 (마켓컬리 스타일: 큰 로고 + 강조된 검색바) ===== */
.header{position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);z-index:50}
.header-inner{height:var(--header-h-mb);display:flex;align-items:center;gap:12px;max-width:1280px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.header-inner{height:var(--header-h);gap:32px;padding:0 24px}}

/* 로고 — 전체 로고 이미지(아이콘+SmartFresh 워드마크). 모바일 40px, PC 44px.
   ★ 키울 때 모바일 폭 주의: 40px=너비140px — 360px 화면에서 우측 아이콘 4개(174px)와 합쳐 여백 4px. 이보다 키우면 넘친다. */
.header-logo{font-size:20px;font-weight:600;letter-spacing:-0.04em;flex-shrink:0;display:flex;align-items:center;gap:8px;line-height:1}
.header-logo svg,.header-logo img{flex-shrink:0;display:block}
.header-logo img{height:40px;width:auto}
@media(min-width:768px){.header-logo img{height:44px}}
.header-logo .logo-text{color:var(--primary);font-weight:700}
.header-logo .logo-text em{color:var(--secondary);font-style:normal;font-weight:600}
@media(min-width:768px){.header-logo{font-size:23px;gap:10px}}

/* 검색바 — 마켓컬리 시그니처 */
.header-search{flex:1;max-width:520px;position:relative;display:none}
.header-search input{width:100%;height:48px;padding:0 52px 0 18px;border:2px solid var(--primary);border-radius:var(--r-md);outline:none;background:#fff;font-size:14px;font-weight:500;color:var(--ink)}
.header-search input::placeholder{color:var(--ink-3);font-weight:400}
.header-search input:focus{border-color:var(--primary-d)}
.header-search button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:8px;color:var(--primary);display:flex;align-items:center;justify-content:center}
.header-search button:hover{background:var(--primary-l)}

.header-actions{display:flex;gap:0;align-items:center;margin-left:auto}
.header-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;font-size:14px;color:var(--ink-2);border-radius:6px;transition:color .12s var(--t);font-weight:600;letter-spacing:-0.02em}
.header-btn:hover{color:var(--primary)}
.header-btn .ic{width:22px;height:22px}
.header-btn .cart-badge{position:absolute;top:-4px;right:-4px;background:var(--primary);color:#fff;font-size:14px;min-width:22px;height:22px;border-radius:11px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;border:2px solid #fff}
@media(min-width:768px){.header-search{display:block}.header-btn{padding:8px 14px;font-size:14px}.header-btn .ic{width:24px;height:24px}}

/* 헤더 액션: PC 전용 그룹 — 모바일에선 숨김 */
.header-btn-pc-group{display:inline-flex;align-items:center;gap:8px}
.header-btn-icon{padding:8px 10px}
.header-btn-icon .cart-badge{top:-2px;right:-2px}

/* 카톡 문의 (장바구니 오른쪽) — 2026-08-18 사장님과 세 번 맞춘 자리. 되돌리지 말 것.
     ① 노란 «칩»(아이콘만 노란 네모) → 「디자인이 쌩뚱맞다」
     ② 일반 선 말풍선(회색)        → 「카톡 모양인 게 전달이 정확하다」
     ③ 결론 = «카카오 마크 모양 + 카카오 노랑 배경 + 장바구니와 똑같은 네모 박스».
        모바일에서 오른쪽 두 칸이 [주황 장바구니][노랑 카톡문의] 한 쌍으로 읽힌다.
   ★ .ic 기본이 선(stroke) 방식이라 면(fill) 마크는 .ic-kakao 로 뒤집는다 — 빼면 안 보인다.
   ★ 크기 22px: 꽉 찬 면이라 24px 로 두면 옆의 선 아이콘보다 무거워 보인다. */
.ic-kakao{fill:currentColor;stroke:none}
.header-btn-kakao .ic{width:22px;height:22px}
/* PC 도 같은 카카오 옐로우 박스 — 모바일과 다른 색을 쓰면 같은 버튼으로 안 읽힌다.
   ★ 글자색을 span 에 직접 박는 이유: .header-btn:hover{color:primary} 가 「카톡 문의」를 주황으로 물들이면
     카카오 버튼으로 안 보인다(브랜드 색은 hover 로 바뀌면 안 되는 값). */
@media(min-width:768px){
  .header .header-btn-kakao{background:#FEE500;border:1.5px solid #F2D200;border-radius:10px;padding:5px 12px;margin-left:6px}
  .header .header-btn-kakao .ic{color:#191600}
  .header .header-btn-kakao span{color:#191600;font-weight:700}
  .header .header-btn-kakao:hover{filter:brightness(.95)}
}

/* ===== 헤더 「배송지」 패널 — PC 는 hover, 모바일은 아이콘 탭 =====
   내용(주소 · 도착 약속 · 배송지 변경/지역별 배송 안내)은 한 벌이고 배치만 화면폭에 따라 다르다.
   예전 모바일 전용 <배송지 바>(헤더 아래 항상 보이던 줄)는 이 패널로 흡수해 폐기. */
.addr-pop-wrap{position:relative;display:inline-block}
.addr-pop{position:absolute;top:calc(100% + 10px);right:-20px;width:326px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(16,24,40,.12);padding:16px 16px 14px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s var(--t),transform .15s var(--t),visibility .15s var(--t);z-index:60}
/* hover 는 PC 에서만 — 터치 기기에서 hover 가 흉내나면 탭 토글과 싸운다 */
@media(min-width:768px){
  .addr-pop-wrap:hover .addr-pop,.addr-pop-wrap:focus-within .addr-pop{opacity:1;visibility:visible;transform:translateY(0)}
}
.addr-pop-arrow{position:absolute;top:-7px;right:30px;width:14px;height:14px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.addr-pop-text{font-size:var(--fs-md);color:var(--ink-2);letter-spacing:-0.02em;line-height:1.5;margin:0 0 12px;font-weight:600}
.addr-pop-name{color:var(--ink);font-weight:800}
.addr-pop-addr{font-size:var(--fs-base);color:var(--ink-2);font-weight:600}
.addr-pop-sub{font-size:var(--fs-base);color:var(--ink-3);font-weight:600}
.addr-pop-eta:empty{display:none}
.addr-pop-eta{margin:0 0 12px}
.addr-pop-actions{display:flex;gap:6px}
.addr-pop-btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:12px 8px;border-radius:8px;font-size:var(--fs-base);font-weight:700;letter-spacing:-0.03em;white-space:nowrap;text-decoration:none;transition:all .12s var(--t);cursor:pointer;border:none;font-family:inherit}
.addr-pop-btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.addr-pop-btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.addr-pop-btn-primary{background:var(--primary);color:#fff}
.addr-pop-btn-primary:hover{background:var(--primary-d)}
.addr-pop-btn .ic{width:14px;height:14px}

/* 도착 약속 카드 — 작은 회색(주문시각) → 큰 진한색(도착시각). 도착이 주인공이다 */
.addr-pop .ab-card{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;background:var(--primary-l);border-radius:var(--r-md)}
.addr-pop .ab-card-ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:#fff;border-radius:50%}
.addr-pop .ab-card-ic svg{width:15px;height:15px;stroke:var(--primary)}
.addr-pop .ab-card-body{flex:1 1 0;min-width:0}
.addr-pop .ab-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 6px;margin:0;letter-spacing:-0.03em;line-height:1.4}
.addr-pop .ab-line + .ab-line{margin-top:7px;padding-top:7px;border-top:1px dashed rgba(255,107,53,.3)}
.addr-pop .ab-when{font-size:var(--fs-base);font-weight:700;color:var(--ink-3)}
.addr-pop .ab-eta{font-size:var(--fs-lg);font-weight:800;color:var(--ink)}
.addr-pop .ab-sub{margin:5px 0 0;font-size:var(--fs-base);color:var(--ink-2);letter-spacing:-0.03em}
.addr-pop .ab-meta{margin:9px 0 0;font-size:var(--fs-base);color:var(--ink-3);letter-spacing:-0.03em;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr-pop .ab-meta b{color:var(--ink-2);font-weight:700}

/* 모바일: 헤더 아래로 꽉 찬 드롭다운 — 아이콘을 탭하면 .open 이 붙는다(JS) */
@media(max-width:767px){
  .addr-pop{position:fixed;top:var(--header-h-mb);right:0;left:0;width:auto;padding:14px 16px 16px;border-width:0 0 1px;border-radius:0 0 16px 16px;box-shadow:0 12px 24px rgba(16,24,40,.14);transform:translateY(-8px)}
  .addr-pop-arrow{display:none}
  .addr-pop-wrap.open .addr-pop{opacity:1;visibility:visible;transform:translateY(0)}
  .addr-pop-btn{padding:14px 8px}
}

/* 2단 헤더 — 상단 작은 라인 (PC 전용, 회원/고객센터) */
.header-top{background:#fff;height:24px;display:flex;align-items:self-start}
.header-top-inner{max-width:1280px;width:100%;margin:0 auto;padding:0 24px;display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:-0.02em;color:var(--ink-2)}
@media(max-width:767px){.header-top{display:none}}
/* PC 메인 헤더 — top 24px 만큼 줄여서 전체 높이 --header-h 유지. inner 66px로 여유 확보 */
@media(min-width:768px){
  .header .header-inner{height:calc(var(--header-h) - 24px)}
  .header-search input{height:42px;font-size:14px}
  /* PC 헤더 아이콘 (배송지/알림/찜/장바구니) — 위아래 여유 + 배지 여백 */
  .header .header-btn-icon{padding:6px 10px}
  .header .header-btn-icon .cart-badge{top:0;right:0}
}

/* 고객센터 hover 드롭다운 */
.cs-dropdown{position:relative;display:inline-block}
.cs-trigger{display:inline-flex;align-items:center;gap:2px;background:none;border:none;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:-0.02em;padding:6px 4px;font-family:inherit;transition:color .12s var(--t)}
.cs-trigger:hover{color:var(--primary)}
.cs-chev{display:inline-flex;align-items:center;color:var(--ink-3)}
.cs-chev .ic{width:12px;height:12px;transform:rotate(90deg)}
.cs-menu{position:absolute;top:100%;right:0;min-width:160px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 20px rgba(16,24,40,.1);padding:6px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .15s var(--t);z-index:60}
.cs-dropdown:hover .cs-menu,.cs-dropdown:focus-within .cs-menu{opacity:1;visibility:visible;transform:translateY(0)}
.cs-menu a{display:block;padding:8px 12px;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-0.02em;text-decoration:none;border-radius:6px;transition:all .12s var(--t)}
.cs-menu a:hover{background:var(--bg-2);color:var(--primary)}

/* 비로그인 — 회원가입 | 로그인 | 고객센터 텍스트 링크 */
.guest-links{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;letter-spacing:-0.02em;font-weight:600}
.guest-links a{color:var(--ink-2);text-decoration:none;padding:6px 4px;transition:color .12s var(--t)}
.guest-links a:hover{color:var(--primary)}
.guest-divider{color:var(--line);font-weight:400}

/* 로그인 — 사용자 메뉴 드롭다운 */
.user-menu{position:relative;display:inline-block}
.user-menu-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;background:none;border:1px solid transparent;border-radius:8px;font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;cursor:pointer;transition:all .12s var(--t)}
.user-menu-btn:hover{color:var(--primary)}
.user-menu-btn:hover .user-menu-chev{color:var(--primary)}
.user-menu-btn .user-name{display:inline-flex;align-items:center;gap:4px;max-width:none;white-space:nowrap}
.user-type-badge{display:inline-flex;align-items:center;padding:2px 8px;font-size:11px;font-weight:800;border-radius:999px;letter-spacing:-0.02em;line-height:1.5;margin-right:2px;white-space:nowrap;flex-shrink:0}
.user-type-consumer{background:var(--bg-2);color:var(--ink-3)}
.user-type-corp_pending{background:#fef3c7;color:#d97706}
.user-type-corp{background:var(--primary-l);color:var(--primary)}
.user-menu-chev{display:inline-flex;align-items:center;color:var(--ink-3);transition:transform .15s var(--t)}
.user-menu-chev .ic{width:14px;height:14px;transform:rotate(90deg)}
.user-menu-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 20px rgba(16,24,40,.1);padding:6px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .15s var(--t);z-index:60}
.user-menu-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.user-menu-item{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-0.02em;text-decoration:none;border-radius:6px;background:none;border:none;cursor:pointer;width:100%;text-align:left;font-family:inherit;transition:background .12s var(--t)}
.user-menu-item:hover{background:var(--bg-2);color:var(--primary)}
.user-menu-item .ic{width:16px;height:16px;color:var(--ink-3);flex-shrink:0}
.user-menu-item:hover .ic{color:var(--primary)}
.user-menu-item .user-menu-badge{margin-left:auto;background:var(--primary);color:#fff;font-size:11px;min-width:18px;height:18px;border-radius:9px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.user-menu-divider{height:1px;background:var(--line-2);margin:4px 0}

/* 모바일 헤더 아이콘의 글자 라벨 — PC 는 원래 라벨(.header-btn > span)을 쓰므로 숨긴다 */
.hb-mb{display:none}

/* 모바일 헤더: [로고 + 배송지 + 알림 + 찜 + 장바구니] — 글자는 「장바구니」 하나만
   ★ 왜 장바구니만: 아이콘 넷이 다 비슷해 거래처 어르신들이 장바구니를 못 찾으셨다(2026-08-13).
     그래서 넷 다 글자를 달아봤더니 이번엔 빽빽해 보인다는 지적 → 정작 급히 찾는 건 장바구니 하나뿐이라
     그것만 글자+주황 알약으로 남기고 나머지는 아이콘으로 되돌렸다. 담은 뒤 동선은 하단 고정바(.cartbar)가 맡는다.
     ※ 배송지·알림·찜에 글자를 다시 달려면 폭이 안 나온다 — 360px 실측부터 다시 할 것.
   ★ 폭이 빠듯하다(로고 140px + 버튼 4개). 좌우 padding 16→10px 로 자리를 만든 상태. */
@media(max-width:767px){
  .header-search{display:none}
  .header-btn-pc-group{display:none}
  .header-actions{display:flex;margin-left:auto;gap:2px}
  .header-actions .header-btn span:not(.cart-badge):not(.hb-mb){display:none}
  .header-actions .header-btn .hb-mb{display:none}   /* 기본은 아이콘만 */
  .header-inner{gap:6px;padding:0 12px}
  .header-logo{font-size:18px}
  .header-btn-icon{padding:6px;width:auto;min-width:40px;height:auto;justify-content:center;gap:1px}
  .header-btn-icon .ic{width:24px;height:24px}
  .header-btn-icon .cart-badge{top:-2px;right:0}
  /* 장바구니만 격을 다르게 — 글자 + 주황 알약.
     ※ 선택자는 위 「기본은 아이콘만」 규칙과 같은 무게(.header-actions 포함)여야 이긴다 — 빼면 글자가 안 나온다. */
  .header-btn-cart{background:var(--primary-l);border:1.5px solid var(--primary);border-radius:10px;padding:3px 8px}
  .header-btn-cart .ic{color:var(--primary)}
  .header-actions .header-btn-cart .hb-mb{display:block;font-size:10.5px;font-weight:800;line-height:1.2;letter-spacing:-0.05em;white-space:nowrap;color:var(--primary)}
  /* 「찜」 자리를 「카톡 문의」가 대신한다 (2026-08-18 사장님 지시)
     ★ 왜 대체인가: 위 주석대로 모바일 헤더는 [로고 + 버튼 4개]가 폭의 한계다. 5개째를 밀어 넣으면
       320~360px 에서 장바구니가 잘린다. 사장님 판단 = 찜은 「우리 식당 발주판」이 대신하는 기능.
     ★ 찜을 아주 없앤 건 아니다 — 마이마켓 서랍 「관심 상품 > 찜한 상품」과
       비로그인 하단탭(찜) 은 그대로다. PC 헤더에도 그대로 남아 있다. */
  .header-btn-fav{display:none}
  /* 「카톡문의」 — 장바구니와 같은 네모 박스, 색만 카카오 노랑(#FEE500 · 글자/마크 #191600).
     ★ 글자를 다는 이유: 어르신은 아이콘만으로는 뭔지 모르신다(2026-08-18 사장님 지시).
     ★ 자리 만드는 법 — 「간격을 없애서」 만들지 말 것(2026-08-18 사장님: 「너무 딱 붙는다」).
       두 박스가 서로 붙으면 한 덩어리로 보이고, 오른쪽 끝에 닿으면 잘린 것처럼 보인다.
       그래서 폭은 «박스 안쪽 여백»(8→6px)에서 빼고, 버튼 사이 간격 4px · 화면 좌우 여백 12px 는 지킨다.
     ※ 선택자에 .header-actions 가 있어야 위 「기본은 아이콘만」 규칙을 이긴다. */
  .header-actions{gap:4px}
  .header-btn-icon{min-width:36px}
  .header-btn-cart{padding:3px 6px}
  .header-btn-kakao{background:#FEE500;border:1.5px solid #F2D200;border-radius:10px;padding:3px 6px}
  .header-btn-kakao .ic{color:#191600;width:24px;height:24px}   /* 장바구니 박스와 높이를 맞춘다(둘 다 46px) */
  .header-actions .header-btn-kakao .hb-mb{display:block;font-size:10.5px;font-weight:800;line-height:1.2;letter-spacing:-0.05em;white-space:nowrap;color:#191600}
}

/* 아주 좁은 폰(320px대) — 로고 140px + 버튼 4개가 안 들어가 「장바구니」가 오른쪽으로 잘려 나갔다.
   (이 잘림은 라벨 작업 이전부터 있던 것) 이 폭에서만 로고·버튼을 한 단계 줄여 잘림을 없앤다.
   ★ 360px 이상에서는 로고 크기 그대로 — 사장님이 "너무 작다"고 키운 값이다. */
@media(max-width:359px){
  .header-logo img{height:32px}
  .header-inner{gap:4px;padding:0 8px}
  .header-actions{gap:4px}   /* 좁은 폰에서도 간격은 줄이지 않는다 — 로고 옆에 26px 남는다(실측) */
  .header-btn-icon{min-width:34px;padding:6px 3px}
  .header-btn-cart{padding:3px 5px}
  /* 카톡 박스도 여기서 같이 줄여야 한다 — 이 블록이 뒤에 있어서 .header-btn-icon{padding} 이
     위쪽 .header-btn-kakao{padding} 을 이겨버린다(그대로 두면 카톡만 6px 높아 보인다). */
  .header-btn-kakao{padding:3px 5px}
}

/* ===== 장바구니 고정 바 (모바일) — 담은 게 있을 때만 하단탭 위에 뜬다 =====
   담긴 게 없으면 아예 안 뜨므로 평소 화면을 가리지 않는다. 엔진은 pad.js renderCartBar(). */
.cartbar{display:none;position:fixed;left:0;right:0;bottom:60px;z-index:49;
  align-items:center;gap:9px;height:56px;padding:0 12px;text-decoration:none;
  background:var(--primary);color:#fff;letter-spacing:-0.03em;
  box-shadow:0 -3px 12px rgba(16,24,40,.18)}
.cartbar .ic{width:24px;height:24px;flex-shrink:0}
.cartbar-txt{flex:1 1 0;min-width:0;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartbar-go{flex-shrink:0;display:inline-flex;align-items:center;gap:2px;background:#fff;color:var(--primary);
  font-size:13.5px;font-weight:800;padding:8px 11px;border-radius:999px;white-space:nowrap}
.cartbar-go .ic{width:15px;height:15px}
@media(max-width:767px){
  .cartbar.on{display:flex}
  body.has-cartbar .page{padding-bottom:150px}   /* 고정 바가 마지막 줄을 가리지 않게 */
}

/* ===== 하단탭 (모바일) ===== */
.tabbar{position:fixed;bottom:0;left:0;right:0;height:60px;background:#fff;border-top:1px solid var(--line);z-index:50;display:flex}
/* ★ nowrap 필수 — 「자주 산 상품」처럼 긴 이름이 2줄로 접히면 탭 높이(60px)를 넘어 잘린다.
   nowrap 이면 flex 가 글자 길이만큼 그 칸만 넓혀 주므로(min-width:auto) 320px 폰에서도 한 줄로 들어간다.
   글자를 줄이는 대신 칸을 넓히는 쪽 — 어르신 사용자라 14px 아래로 내리지 말 것. */
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;color:var(--ink-3);gap:3px;transition:color .12s var(--t);font-weight:600;letter-spacing:-0.02em;white-space:nowrap}
.tabbar a.active{color:var(--primary);font-weight:700}
.tabbar a .ic{width:22px;height:22px}
.tabbar .tabbar-ic{position:relative;display:inline-flex;align-items:center;justify-content:center}
.tabbar .tabbar-badge{position:absolute;top:-6px;left:14px;background:var(--primary);color:#fff;font-size:11px;min-width:18px;height:18px;border-radius:9px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;border:2px solid #fff;line-height:1;letter-spacing:0}
@media(min-width:768px){.tabbar{display:none}.page{padding-bottom:60px}}

/* ===== 카테고리 ===== */
/* 카테고리 sticky 바 — viewport 폭, 헤더 바로 아래에 고정 */
.cat-bar{position:sticky;top:var(--header-h-mb);z-index:40;
  background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line)}
.cat-bar + *{margin-top:20px}
@media(min-width:768px){
  .cat-bar{top:var(--header-h)}
  .cat-bar + *{margin-top:28px}
}

/* 카테고리 칩 row — 우측에 펼치기 버튼 절대 고정
   * 한 줄 모드: padding-right로 버튼 자리 확보
   * 펼친 모드: padding-right 제거 → 하단 줄들이 우측까지 꽉 참 (첫 줄만 버튼 아래로 살짝 깔림, z-index로 자연스럽게) */
/* 대분류 탭 (7순위④) — 카테고리 칩 위 상단 5~6 탭 */
.catgrp-bar{display:flex;align-items:center;gap:8px;padding:8px 0 0;border-bottom:1px solid var(--line)}
/* 하위 칩 줄이 없는 대분류(중분류 미보유 · 「전체」 탭)에서는 이 구분선을 끈다 —
   바깥 .cat-bar 테두리와 1px 간격으로 겹쳐 <줄이 두 개>로 보인다. 2026-08-19 사장님 */
.catgrp-bar.no-chips{border-bottom:0}
/* 대분류 탭만 담는 가로 스크롤 컨테이너 (내 전용 알약은 아래 catgrp-links로 분리) */
.catgrp-tabs-scroll{display:flex;align-items:center;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.catgrp-tabs-scroll::-webkit-scrollbar{display:none}
.catgrp-bar::-webkit-scrollbar{display:none}
.catgrp-tab{flex-shrink:0;padding:8px 4px;margin:0 6px;border:0;background:none;font-size:15px;font-weight:600;color:var(--ink-2);white-space:nowrap;cursor:pointer;border-bottom:2.5px solid transparent;transition:all .12s var(--t);letter-spacing:-0.02em}
.catgrp-tab:hover{color:var(--primary)}
.catgrp-tab.active{color:var(--primary);font-weight:700;border-bottom-color:var(--primary)}
@media(min-width:768px){.catgrp-tab{font-size:16px;padding:9px 4px}}
/* 대분류 탭 우측 메뉴(특가·기획전 바로가기) */
.catgrp-links{margin-left:auto;display:inline-flex;gap:6px;align-items:center;flex-shrink:0;padding-left:10px}
.catgrp-link{flex-shrink:0;padding:8px 12px;border-radius:var(--r-pill);font-size:14px;font-weight:700;color:var(--ink-2);white-space:nowrap;text-decoration:none;letter-spacing:-0.02em;transition:color .12s var(--t)}
.catgrp-link:hover{color:var(--primary)}
.catgrp-link.deal{color:var(--primary)}
/* 내 전용 탭(자주 산 상품·발주판) — 카테고리 텍스트 탭과 구분되게 아이콘+알약 */
.catgrp-mine{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border:1.5px solid #16A34A;border-radius:var(--r-pill);background:#ECFDF3;font-size:13.5px;font-weight:700;color:#15803D;white-space:nowrap;cursor:pointer;line-height:1;letter-spacing:-0.02em;transition:all .12s var(--t)}
.catgrp-mine + .catgrp-mine{margin-left:6px}
.catgrp-mine .ic{width:15px;height:15px}
.catgrp-mine:hover{background:#D1FADF}
.catgrp-mine.active{background:#16A34A;border-color:#16A34A;color:#fff;box-shadow:0 1px 4px rgba(22,163,74,.35)}
/* 오늘의 특가(주황) · 기획전(중립) — 진행 중일 때만 렌더되는 링크형 알약 */
a.catgrp-mine{text-decoration:none}
.catgrp-mine.deal{border-color:var(--primary);background:var(--primary-l);color:var(--primary-d)}
.catgrp-mine.deal:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.catgrp-mine.event{border-color:var(--ink-4);background:var(--bg);color:var(--ink-2)}
.catgrp-mine.event:hover{background:var(--bg-2);border-color:var(--ink-3);color:var(--ink)}
/* 모바일: 내 전용 알약(자주 산 상품·발주판)을 대분류 탭 아래 전용 줄로 내려 항상 노출 (50/50) */
@media(max-width:600px){
  .catgrp-bar{flex-wrap:wrap;padding-bottom:9px}
  .catgrp-tabs-scroll{flex:1 1 100%}
  /* 알약이 3개 이상(특가·기획전·추천 등)이면 한 줄에 2개씩 자동 줄바꿈 */
  .catgrp-links{flex:1 1 100%;flex-wrap:wrap;margin-left:0;padding-left:0;gap:8px;margin-top:8px}
  .catgrp-mine{flex:1 1 calc(50% - 8px);min-width:calc(50% - 8px);justify-content:center;padding:10px 10px;font-size:13.5px;border-width:1.5px}
  .catgrp-mine + .catgrp-mine{margin-left:0}
}
.cat-bar-row{position:relative;padding-right:118px}
.cat-bar-row.expanded{padding-right:0}
@media(max-width:480px){.cat-bar-row{padding-right:96px}}

/* 칩 스크롤 영역 — 가로 스크롤 또는 펼친 wrap */
.cat-bar-inner{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 0}
.cat-bar-inner::-webkit-scrollbar{display:none}
.cat-bar-inner.expanded{flex-wrap:wrap;overflow-x:visible;padding-bottom:12px}
@media(min-width:768px){.cat-bar-inner{padding:10px 0}}

.cat-chip{flex-shrink:0;padding:6px 13px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:14px;color:var(--ink-2);background:#fff;white-space:nowrap;transition:all .12s var(--t);font-weight:600;letter-spacing:-0.02em;line-height:1.5}
.cat-chip:hover{border-color:var(--primary);color:var(--primary)}
.cat-chip.active{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700}
@media(min-width:768px){.cat-chip{padding:7px 15px}}

/* 펼쳐보기/접기 버튼 — 항상 우측 상단 absolute 고정 (펼치든 접든 같은 위치) */
.cat-expand{position:absolute;right:0;top:8px;z-index:2;padding:6px 13px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);font-size:14px;color:var(--ink-2);cursor:pointer;font-weight:600;display:none;align-items:center;gap:4px;letter-spacing:-0.02em;line-height:1.5;white-space:nowrap}
.cat-expand:hover{border-color:var(--ink-2);color:var(--ink)}
.cat-expand .ic{width:14px;height:14px;transform:rotate(90deg);transition:transform .2s var(--t)}
.cat-bar-row.has-expand .cat-expand{display:inline-flex}
.cat-bar-row.expanded .cat-expand .ic{transform:rotate(-90deg)}
@media(min-width:768px){.cat-expand{top:10px}}

/* 한 줄 모드: 우측 페이드 (칩이 펼치기 버튼 뒤로 자연스럽게 가려지게) */
.cat-bar-row:not(.expanded)::after{content:"";position:absolute;right:118px;top:0;bottom:0;width:24px;background:linear-gradient(90deg,transparent,#fff);pointer-events:none;z-index:1}
@media(max-width:480px){.cat-bar-row:not(.expanded)::after{right:96px}}

/* ===== 섹션 ===== */
.section-title{font-size:22px;font-weight:800;margin:32px 0 16px;letter-spacing:-0.03em;color:var(--ink);display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.section-title small{font-size:18px;font-weight:700;color:var(--primary);letter-spacing:-0.03em;line-height:1}
@media(min-width:768px){.section-title{font-size:26px;margin:40px 0 20px}}

/* ===== 상품 그리드 ===== */
.products{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 12px}
@media(min-width:600px){.products{grid-template-columns:repeat(3,1fr);gap:40px 16px}}
@media(min-width:900px){.products{grid-template-columns:repeat(4,1fr);gap:48px 20px}}
@media(min-width:1200px){.products{grid-template-columns:repeat(4,1fr);gap:56px 24px}}

.product{cursor:pointer;position:relative}
.product-img{position:relative;aspect-ratio:1/1;background:#f5f5f5;overflow:hidden;border-radius:var(--r-md)}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--t)}
.product:hover .product-img img{transform:scale(1.06)}
.product-img-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:56px;line-height:1;filter:saturate(.95);transition:transform .45s var(--t)}
.product:hover .product-img-ph{transform:scale(1.06)}
@media(min-width:768px){.product-img-ph{font-size:68px}}

/* 배지 — 마켓컬리 "샛별배송" 스타일: 좌상단 큼직한 단색 뱃지 */
.product-badges{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:0;z-index:2}
.badge{display:inline-flex;align-items:center;padding:6px 12px;font-size:14px;font-weight:700;letter-spacing:-0.03em;color:#fff;line-height:1.2}
.badge.b-truck{background:var(--secondary)}
.badge.b-parcel{background:#5C6BC0}
.badge.b-quick{background:var(--primary)}
.badge.b-pickup{background:#7E57C2}
.badge.b-soldout{background:#666}
.badge.b-out{background:#dc2626}
.badge.b-sale{background:#E53935}
.badge.b-new{background:var(--secondary)}

/* 사용처별 배지 변형 (제품 정보 영역 등에선 작고 외곽선) */
.badge-sm{padding:4px 9px;font-size:14px;font-weight:600;border-radius:4px;letter-spacing:-0.02em}
/* outline 변형은 .badge.b-* 색상 채움을 덮어써야 하므로 specificity 동일하게 .badge.badge-outline.b-* 로 명시 */
.badge.badge-outline{background:#fff;color:var(--ink-2);border:1px solid var(--line);font-weight:600}
.badge.badge-outline.b-truck{background:#fff;color:var(--secondary);border-color:#C7E5D2}
.badge.badge-outline.b-parcel{background:#fff;color:#3949AB;border-color:#C5CAE9}
.badge.badge-outline.b-pickup{background:#fff;color:#5E35B1;border-color:#D6C9EE}
.badge.badge-outline.b-quick{background:#fff;color:var(--primary);border-color:#FFD7C2}

.product-soldout{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;z-index:3;border-radius:var(--r-md);letter-spacing:-0.02em}

/* 시세 변동 배지 (상품 카드, 가격 옆) — AI Smart Care 데이터 기반 */
.product-trend{display:inline-flex;align-items:center;gap:1px;font-size:11.5px;font-weight:800;padding:2px 7px;border-radius:var(--r-pill);letter-spacing:-0.02em;margin-left:6px;vertical-align:middle;line-height:1.3}
.product-trend.down{background:#D1FAE5;color:#047857}
.product-trend.up{background:#FEE2E2;color:#B91C1C}

/* 재고 임박 배지 (판매자 측 재고) — 상품 카드 우측 하단 (배송 배지/찜 하트와 분리) */
.stock-badge{position:absolute;bottom:8px;right:8px;font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:var(--r-pill);letter-spacing:-0.02em;z-index:4;line-height:1.2;backdrop-filter:blur(4px);box-shadow:0 2px 6px rgba(16,24,40,.08)}
.stock-badge.urgent{background:#FEE2E2;color:#B91C1C}
.stock-badge.low{background:#FEF3C7;color:#B45309}

/* myboard 탭 (자주 주문 / 이번 주 추천) */
.board-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin:-4px 0 0;position:relative}
.board-tab{flex:1;padding:14px 8px;background:none;border:none;font-size:15px;font-weight:700;color:var(--ink-3);cursor:pointer;letter-spacing:-0.02em;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:color .12s var(--t)}
.board-tab:hover{color:var(--ink)}
.board-tab.active{color:var(--ink);font-weight:800}
.board-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary)}
.tab-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;background:var(--bg-2);color:var(--ink-3);font-size:12px;font-weight:700;border-radius:var(--r-pill);letter-spacing:-0.02em}
.board-tab.active .tab-cnt{background:var(--primary-l);color:var(--primary)}

/* AI Smart Care — 시세 차트 + 가격 추천 (상품 상세) */
.ai-smart-care{margin:18px 0;padding:18px 20px;background:#F8F9FF;border:1px solid #DDE3FF;border-radius:var(--r-md)}
/* 🤖 AI 시세 추이 코너 (1단계 규칙기반) */
.ai-corner{margin:14px 0 0;padding:12px 14px;border-radius:12px;border:1px solid #DDE3FF;background:linear-gradient(135deg,#F5F7FF,#EEF2FF);display:flex;flex-direction:column;gap:4px}
.ai-corner .ai-corner-head{font-size:12.5px;font-weight:800;color:#4F46E5;letter-spacing:-0.02em;display:flex;align-items:center;gap:6px}
.ai-corner .ai-beta{font-size:10px;font-weight:800;color:#6366F1;background:#E0E7FF;padding:1px 6px;border-radius:var(--r-pill)}
.ai-corner .ai-corner-msg{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-0.02em;line-height:1.45}
.ai-corner.ai-cheap{background:linear-gradient(135deg,#ECFDF5,#D1FAE5);border-color:#A7F3D0}
.ai-corner.ai-cheap .ai-corner-head{color:#059669}
.ai-corner.ai-high{background:linear-gradient(135deg,#FFF7ED,#FFEDD5);border-color:#FED7AA}
.ai-corner.ai-high .ai-corner-head{color:#D97706}
.ai-corner.ai-wait{background:#F8FAFC;border-color:var(--line)}
.ai-corner.ai-wait .ai-corner-head{color:var(--ink-3)}
.asc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.asc-title{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800;color:#3B4FBF;letter-spacing:-0.02em}
.asc-title .ic{width:16px;height:16px}
.asc-rec{display:inline-flex;align-items:center;font-size:13px;font-weight:800;padding:4px 11px;border-radius:var(--r-pill);letter-spacing:-0.02em}
.asc-rec.cheap{background:#D1FAE5;color:#047857}
.asc-rec.normal{background:var(--bg-2);color:var(--ink-2)}
.asc-rec.high{background:#FEE2E2;color:#B91C1C}

.asc-chart{position:relative;height:60px;margin-bottom:12px}
.asc-chart svg{display:block;width:100%;height:100%;overflow:visible}
/* viewBox가 preserveAspectRatio=none으로 늘어나도 stroke 두께는 화면 픽셀 단위로 일정 유지 */
.asc-chart .line{fill:none;stroke:#5B6CE7;stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.asc-chart .area{fill:url(#asc-grad);opacity:.18}
.asc-chart .avg-line{stroke:var(--ink-4);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
/* 현재가 dot — SVG circle은 가로/세로 다르게 늘어나 타원이 되므로 HTML 요소로 오버레이 */
.asc-chart .current-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#3B4FBF;border:2px solid #fff;box-shadow:0 0 0 1px rgba(59,79,191,.15);transform:translate(-50%,-50%);pointer-events:none}
/* 실제 최고(빨강)·최저(초록) 발생 지점 마커 — 요약숫자와 위치 연결(착시 방지) */
.asc-chart .asc-pt{position:absolute;width:7px;height:7px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.05);transform:translate(-50%,-50%);pointer-events:none}
.asc-chart .asc-pt.hi{background:#EF4444}
.asc-chart .asc-pt.lo{background:#047857}

.asc-info{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-3);font-weight:600;letter-spacing:-0.02em;margin-bottom:14px;gap:8px}
.asc-info b{color:var(--ink);font-weight:700}
.asc-info .low{color:#047857}
.asc-info .high{color:#B91C1C}
.asc-legend{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle;margin:0 4px}
.asc-legend.hi{background:#EF4444}
.asc-legend.lo{background:#047857}

.asc-alert-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 14px;background:#fff;border:1px solid #DDE3FF;border-radius:var(--r);font-size:13.5px;font-weight:700;color:#3B4FBF;cursor:pointer;letter-spacing:-0.02em;transition:all .12s var(--t)}
.asc-alert-btn:hover{background:#3B4FBF;color:#fff;border-color:#3B4FBF}
.asc-alert-btn.on{background:#3B4FBF;color:#fff;border-color:#3B4FBF}
.asc-alert-btn .ic{width:14px;height:14px}

/* 사용자 재고 소진 예측 배지 (발주판 카드 안) — 회색 버튼 형태, 보조 배지 밑에 */
.predict-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:6px;letter-spacing:-0.02em;margin-top:6px;background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line-2)}
.predict-badge.urgent{color:var(--ink);font-weight:700}
.predict-badge.warn{color:var(--ink-2)}
.predict-badge .ic{width:12px;height:12px;color:var(--ink-3)}

/* 카드 담기 버튼 — 항상 보임 (마켓컬리 스타일) */
.product-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:12px 0;margin:10px 0 0;background:#fff;border:1px solid var(--line);border-radius:var(--r);font-size:14px;font-weight:700;color:var(--ink);transition:all .15s var(--t);cursor:pointer;letter-spacing:-0.02em}
.product-add:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.product-add:disabled{cursor:not-allowed;background:var(--bg-2);color:var(--ink-3);border-color:var(--line)}
.product-add .ic{width:18px;height:18px;stroke-width:2}

/* 카드 우상단 즐겨찾기 하트 */
.product-fav{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--ink-3);border:none;cursor:pointer;transition:all .12s var(--t);backdrop-filter:blur(4px);z-index:3}
.product-fav:hover{color:var(--accent);background:#fff;transform:scale(1.08)}
.product-fav.on{color:var(--accent)}
.product-fav.on .ic{fill:currentColor}
.product-fav .ic{width:20px;height:20px;stroke-width:1.8;transition:transform .15s var(--t)}

/* 정사각 찜/알림 버튼 (상품 상세 액션 영역) */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink-3);cursor:pointer;transition:all .12s var(--t)}
.icon-btn:hover{border-color:var(--ink-2);color:var(--ink-2)}
.icon-btn.on{color:var(--accent);border-color:var(--accent);background:#fff8f6}
.icon-btn.on .ic{fill:currentColor}
.icon-btn .ic{width:22px;height:22px;stroke-width:1.8}
@media(max-width:767px){.icon-btn{width:48px;height:48px}.icon-btn .ic{width:20px;height:20px}}

/* 상세 액션 영역 [하트][장바구니][바로주문] */
.detail-actions{display:grid;grid-template-columns:auto 1fr 1.5fr;gap:8px;margin-top:24px;align-items:stretch}

.product-info{padding:12px 2px 0}
.product-name{font-size:14px;font-weight:500;color:var(--ink);margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;min-height:40px;letter-spacing:-0.02em}
.product-unit{font-size:14px;color:var(--ink-3);margin-bottom:8px;letter-spacing:-0.02em}
.product-price{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1}
.product-price .won{font-weight:700;font-size:14px;margin-left:1px}
@media(min-width:768px){.product-price{font-size:18px}}

/* ===== 버튼 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:14px 22px;border-radius:var(--r);font-size:15px;font-weight:700;letter-spacing:-0.02em;transition:all .15s var(--t);border:1px solid transparent;line-height:1.2}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d)}
.btn-primary:disabled{background:var(--line);color:var(--ink-4);cursor:not-allowed}
.btn-secondary{background:var(--secondary);color:#fff}
.btn-secondary:hover{background:var(--secondary-d)}
.btn-line{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-line:hover{background:var(--primary-l)}
.btn-ghost{background:#fff;color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-2);color:var(--ink)}
.btn-block{display:flex;width:100%}
.btn-lg{padding:18px 28px;font-size:17px;border-radius:var(--r-md)}
.btn-sm{padding:10px 16px;font-size:14px;font-weight:700}

/* ===== 폼 ===== */
.field{margin-bottom:18px}
.field-label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-0.02em}
.field-input,.field-select,.field-textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:#fff;outline:none;transition:border-color .15s var(--t);font-size:15px;line-height:1.2;color:var(--ink)}
.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--primary)}
.field-input::placeholder{color:var(--ink-4)}
/* 날짜 입력칸 — iOS Safari 는 «자기 모양»으로 그린다(좁은 폭 + 가운데 정렬 + 낮은 높이).
   그대로 두면 바로 위 입력칸들과 어긋나 보인다(2026-08-19 사장님 지적). 다른 칸과 같게 맞춘다. */
.field-input[type="date"]{-webkit-appearance:none;appearance:none;box-sizing:border-box;text-align:left;min-height:calc(1.2em + 30px)}
.field-input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0;min-height:1.2em}
.field-input[type="date"]::-webkit-calendar-picker-indicator{margin-left:auto}
/* 달력(flatpickr) 선택색 — 기본 파랑을 브랜드색으로. 월 선택기(명세서)와 같은 톤으로 맞춘다(2026-08-19) */
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,
.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover{
	background:var(--primary);border-color:var(--primary);color:#fff}
.flatpickr-day.today{border-color:var(--primary)}
.flatpickr-day.today:hover{background:var(--primary-l);color:var(--ink)}
.flatpickr-day:hover{background:var(--bg-2)}
.flatpickr-months .flatpickr-month,.flatpickr-current-month{color:var(--ink)}
.flatpickr-weekday{color:var(--ink-3)}
.field-textarea{min-height:80px;resize:vertical;font-family:inherit;line-height:1.5}
.field-hint{font-size:14px;color:var(--ink-3);margin-top:6px;letter-spacing:-0.02em}
.field-required{color:var(--primary);margin-left:2px;font-weight:700}

/* ===== 카드 ===== */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px;margin-bottom:16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card-title{font-size:16px;font-weight:700;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line-2);letter-spacing:-0.03em;display:flex;align-items:center;gap:10px;color:var(--ink)}
.card-title .num{display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font-size:14px;font-weight:800;align-items:center;justify-content:center;flex-shrink:0}
@media(min-width:768px){.card{padding:28px}}

/* ===== 토글 / 탭 — 마켓컬리 상단 탭 스타일 ===== */
.toggle{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.toggle button{padding:18px 0;font-size:15px;font-weight:600;color:var(--ink-3);border-bottom:3px solid transparent;margin-bottom:-1px;transition:all .15s var(--t);letter-spacing:-0.02em}
.toggle button.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:800}

/* ===== 배송 옵션 ===== */
.delivery-opts{display:grid;gap:10px}
@media(min-width:600px){.delivery-opts{grid-template-columns:repeat(3,1fr)}}
/* 2열 변형(주문서 결제수단 등) — 모바일은 기본 1열로 세로 쌓임, 600px 이상에서만 2열 */
@media(min-width:600px){.delivery-opts.delivery-opts-2{grid-template-columns:repeat(2,1fr)}}
/* 결제수단 아래 카드사·할부 박스 — 데스크톱에서만 신용카드 카드 폭(좌측 절반, gap 10px 기준)에 맞춤 */
.pay-card-opts{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:600px){.pay-card-opts{width:calc(50% - 5px)}}
.dopt{display:flex;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;transition:all .15s var(--t);background:#fff;position:relative;align-items:flex-start}
.dopt:hover{border-color:var(--primary);background:var(--primary-l)}
.dopt.active{border-color:var(--primary);background:var(--primary-l);box-shadow:inset 0 0 0 1px var(--primary)}
.dopt input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.dopt-icon{width:40px;height:40px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg-2);color:var(--ink-2)}
.dopt-icon .ic{width:20px;height:20px}
.dopt.active .dopt-icon{background:var(--primary);color:#fff}
.dopt-body{flex:1;min-width:0}
.dopt-name{font-size:14px;font-weight:700;margin:0 0 3px;letter-spacing:-0.03em;color:var(--ink)}
.dopt-desc{font-size:14px;color:var(--ink-3);margin:0 0 6px;line-height:1.5;letter-spacing:-0.02em}
/* 수령방법 두 카드(배송받기·매장픽업)는 화면을 반씩 나눠 쓰므로 설명이 쉽게 두 줄로 내려간다.
   두 줄이 되면 카드 높이가 서로 어긋나 보인다 → 좁은 화면에서만 한 줄로 눌러 담는다(2026-08-19 사장님). */
@media (max-width:520px){
	/* ★ «수령 방법 토글(배송받기/매장픽업)» 에만 적용한다 — .delivery-opts 전체에 걸면
	   결제수단(#pay-opts)까지 2칸으로 눌려 「신용·체크 카드」가 세 줄로 쪼개진다(2026-08-19 사장님 지적).
	   결제수단은 모바일에서 «한 줄에 하나» 가 기본이고 그게 맞다.
	   1fr 은 내용보다 작아지지 않아 nowrap 을 주면 화면 밖으로 밀리므로 minmax(0,1fr) 로 바꾼다(인라인 style 을 이겨야 해서 !important). */
	#recv-method{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
	#recv-method .dopt{padding:14px 12px;gap:10px;min-width:0}
	#recv-method .dopt-body{min-width:0}
	#recv-method .dopt-desc{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	#recv-method .dopt-icon{width:36px;height:36px}
}
.dopt-fee{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-0.02em}
.dopt-fee.free{color:var(--secondary)}
/* 한국어 낱말 단위 줄바꿈 — 좁은 카드에서 "수령"이 "수/령"으로 갈라지지 않게 */
.dopt-name,.dopt-desc,.dopt-eta,.dopt-fee{word-break:keep-all;overflow-wrap:break-word}
/* 카드 우측 부가정보(결제금액·배송비) 공용 박스 */
.dopt-side{margin-left:auto;flex-shrink:0;text-align:right}
/* 읽기전용 배송그룹 카드(주문서 배송방법) — 모바일에서는 배송비를 아랫줄로 내려 도착안내가 눌리지 않게 */
.dopt-ro{cursor:default;align-items:center}
@media(max-width:599px){
  .dopt-ro{flex-wrap:wrap}
  .dopt-ro .dopt-side{flex-basis:100%;flex-shrink:1;margin-left:0;padding-left:52px;text-align:left}
}

/* ===== 장바구니 라인 ===== */
.cart-line{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line-2)}
.cart-line:first-child{padding-top:0}
.cart-line:last-child{border-bottom:none;padding-bottom:0}
.cart-thumb{width:90px;height:90px;border-radius:var(--r-md);background:#f5f5f5;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;font-size:38px;line-height:1;filter:saturate(.9)}
.cart-thumb img{width:100%;height:100%;object-fit:cover;filter:none}
@media(min-width:600px){.cart-thumb{width:108px;height:108px;font-size:44px}}
.cart-body{flex:1;min-width:0;display:flex;flex-direction:column}
/* 장바구니 상단 탭 (담은 상품 / 자주 산 상품) — 마켓컬리 스타일 */
.cart-tabs{display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line);margin-bottom:20px;padding:0 2px}
.cart-tab{padding:14px 2px;font-size:17px;font-weight:600;color:var(--ink-3);background:none;border:none;cursor:pointer;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;position:relative;line-height:1}
.cart-tab:hover{color:var(--ink-2)}
.cart-tab.active{color:var(--ink);font-weight:800}
.cart-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);border-radius:1px}
.cart-tab .tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;border-radius:11px;background:var(--ink-4);color:#fff;font-size:13px;font-weight:800;padding:0 7px;letter-spacing:0}
.cart-tab.active .tab-badge{background:var(--primary)}
.cart-tab .new-dot{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:10px;background:var(--primary);color:#fff;font-size:11.5px;font-weight:800;padding:0 6px}
@media(max-width:480px){
  .cart-tabs{gap:18px}
  .cart-tab{font-size:16px}
}

/* 장바구니 — 전체선택/선택삭제 툴바 */
.cart-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px;box-shadow:0 1px 2px rgba(16,24,40,.04);gap:10px;flex-wrap:wrap}
.cart-toolbar-left{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;cursor:pointer}
.cart-toolbar-left .count{color:var(--ink-3);font-weight:500;font-size:14px;margin-left:2px}
.cart-toolbar-left .count b{color:var(--primary);font-weight:700}
.cart-toolbar-right{display:flex;gap:6px}
.cart-toolbar-right button{padding:8px 14px;font-size:14px;border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--ink-2);cursor:pointer;font-weight:600;letter-spacing:-0.02em;transition:all .12s var(--t)}
.cart-toolbar-right button:hover{border-color:var(--primary);color:var(--primary)}

/* 배송지 카드 (장바구니 우측) */
.addr-card .card-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;padding-bottom:0;border:none}
.addr-card .card-title .title-l{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700}
.addr-card .addr-tag{display:inline-block;padding:5px 12px;background:var(--secondary-l);color:var(--secondary);font-size:13px;font-weight:700;border-radius:var(--r-pill);letter-spacing:-0.02em;margin-bottom:8px}
.addr-card .addr-text{font-size:14.5px;color:var(--ink);line-height:1.55;letter-spacing:-0.02em;font-weight:500;margin:0}
.addr-card .addr-empty{font-size:14px;color:var(--ink-3);letter-spacing:-0.02em;margin:0;padding:8px 0}

/* 체크박스 — 장바구니 / 전체선택 */
.cart-check{position:relative;display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer}
.cart-check input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.cart-check-box{width:22px;height:22px;border:1.5px solid var(--line);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;transition:all .12s var(--t);background:#fff;flex-shrink:0}
.cart-check input:checked ~ .cart-check-box{background:var(--primary);border-color:var(--primary)}
.cart-check input:checked ~ .cart-check-box::after{content:"";width:5px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-1px,-2px)}

/* 상품명 + 우상단 닫기 버튼 */
.cart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.cart-name-link{flex:1;min-width:0;display:block}
.cart-name{font-size:15px;font-weight:600;margin:0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;letter-spacing:-0.02em;color:var(--ink)}
.cart-meta{font-size:14px;color:var(--ink-2);margin-bottom:auto;letter-spacing:-0.02em;font-weight:500}

/* 하단: 수량 + 가격 (가로 양끝) */
.cart-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:nowrap}
.cart-price{font-size:18px;font-weight:800;letter-spacing:-0.03em;color:var(--ink);white-space:nowrap;flex-shrink:0;text-align:right}

/* 삭제(X) 버튼 — 우상단 작게 */
.cart-del{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--ink-3);background:transparent;border:none;border-radius:50%;transition:all .12s var(--t);cursor:pointer;flex-shrink:0;padding:0}
.cart-del:hover{color:var(--primary);background:var(--primary-l)}
.cart-del .ic{width:18px;height:18px;stroke-width:2}

@media(max-width:480px){
  .cart-line{gap:12px}
  .cart-thumb{width:72px;height:72px;font-size:28px}
  .qty button{width:30px;height:30px;font-size:14px}
  .qty input{width:34px;height:30px;font-size:13px}
  /* 모바일: 수량 + 가격을 옅은 회색 박스로 함께 묶음 */
  .cart-foot{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;background:var(--bg-2);padding:8px 12px;border-radius:var(--r);border:1px solid var(--line-2);flex-wrap:wrap;min-width:0}
  .cart-price{font-size:17px;font-weight:800}
}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.qty button{width:36px;height:36px;color:var(--ink-2);font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .12s var(--t)}
.qty button:hover{background:var(--primary-l);color:var(--primary)}
.qty input{width:48px;height:36px;text-align:center;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);outline:none;font-size:14px;font-weight:700;color:var(--ink)}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ===== 목록 수량박스 (PAD.buyBoxHtml) — 도매는 1개 주문이 예외라 목록에서 N개를 지정 ===== */
/* 위쪽 간격은 margin 이 아니라 padding — margin-top 은 아래 「바닥 고정(auto)」이 써야 한다 */
.product-buy{margin:0;padding-top:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.product-buy .qty-card{width:100%;display:flex;min-width:0}
/* +/- 는 정사각형이 아니라 가로로 넓게 — 손가락은 세로보다 가로 여유가 필요하다.
   고정폭 대신 비율(flex)이라 카드가 넓어지면 버튼도 같이 넓어진다. 최소 44px 는 지킴. */
.product-buy .qty-card button{flex:1 1 0;width:auto;min-width:44px;height:40px;background:transparent;border:none;cursor:pointer}
.product-buy .qty-card button .ic{width:18px;height:18px;stroke-width:2.4}
/* flex-basis 는 반드시 0 — auto 로 두면 input[type=number] 의 기본 폭(size=20, 약 177px)이
   카드 min-content 를 밀어올려 그리드 컬럼이 터지고 목록 전체가 우측으로 넘친다(2026-07-29 실측 155px). */
.product-buy .qty-card input{flex:1 1 0;width:0;min-width:0;height:40px;font-size:16px;padding:0} /* -·수량·+ 정확히 3등분 (2026-07-31 사장님) */
/* 그리드/플렉스 자식은 기본 min-width:auto 라 내용 최소폭이 트랙을 밀어낸다 — 목록 컨테이너 전부 차단 */
.products>.product,
.freq-grid>.freq-card,
.myboard-slide>.mb-item{min-width:0}
.filter-layout>section{min-width:0}

/* 담기 버튼 높이 정렬 — 할인줄·최저가뱃지·배송뱃지 유무로 카드마다 정보 높이가 달라
   버튼이 오르락내리락한다. 카드를 세로 플렉스로 늘리고 수량박스를 바닥에 고정. */
.products>.product,
.freq-grid>.freq-card,
.myboard-slide>.mb-item{display:flex;flex-direction:column;height:100%}
.products>.product>.product-img,
.freq-grid>.freq-card>.img{flex:0 0 auto}
.products>.product>.product-info,
.myboard-slide>.mb-item>.mb-link{flex:1 1 auto}
.products>.product>.product-buy,
.freq-grid>.freq-card>.product-buy,
.myboard-slide>.mb-item>.product-buy{margin-top:auto}
.product-buy .product-add,
.product-buy .add-btn,
.freq-card .product-buy .add-btn{margin:0;padding:10px 0;font-size:14px}   /* .freq-card .add-btn 의 margin-top 상쇄. 높이는 수량줄과 비슷하게(2026-07-31 사장님 "담기 너무 큼") */
/* 담긴 상태 — 스테퍼 숫자가 곧 장바구니 수량.
   목록 전체가 담김일 때 초록 덩어리가 되지 않게 채움 대신 옅은 초록 + 초록 글씨 */
.product-buy.in .qty-card{border-color:var(--secondary)}
.product-buy.in .product-add,
.product-buy.in .add-btn{background:var(--secondary-l);color:var(--secondary-d);border-color:var(--secondary)}
/* 담김 버튼은 상태 표시 전용(클릭 동작 없음) — 눌리는 것처럼 보이지 않게 hover 강조도 뺀다 */
.product-buy.in .product-add,
.product-buy.in .add-btn{cursor:pointer}   /* 담김 버튼도 누르면 +1 (전 화면 공통) */
.product-buy.in .product-add:hover,
.product-buy.in .add-btn:hover{background:var(--secondary-l);color:var(--secondary-d);border-color:var(--secondary)}
/* 작은 카드(발주판·자주 산 상품 슬라이드) */
.product-buy.compact{padding-top:8px;gap:5px}
.product-buy.compact .qty-card button{min-width:36px;height:36px}
.product-buy.compact .qty-card input{height:36px;font-size:15px}
.product-buy.compact .product-add,
.product-buy.compact .add-btn{padding:8px 0;font-size:13px}
/* 모바일 — 손가락으로 누른다. 터치 최소 44px 확보(+/- 는 48px), 숫자칸 16px(아이폰 포커스 자동확대 방지).
   기준을 599px 로 잡은 이유: .products 가 600px 미만에서 2열(=폰 레이아웃)이다.
   480 으로 잡으면 481~599 구간(대화면 폰 가로·소형 태블릿)이 데스크톱 크기로 남는다. */
@media(max-width:599px){
  .product-buy{gap:7px}
  .product-buy .qty-card button{min-width:46px;height:44px}
  .product-buy .qty-card button .ic{width:20px;height:20px}
  .product-buy .qty-card input{height:44px;font-size:16px}
  .product-buy .product-add,
  .product-buy .add-btn{padding:12px 0;font-size:14px} /* 터치 최소 44px 는 유지 */
  .product-buy.compact .qty-card button{min-width:38px;height:40px}
  .product-buy.compact .qty-card input{height:40px;font-size:16px}
  .product-buy.compact .product-add,
  .product-buy.compact .add-btn{padding:10px 0;font-size:13.5px}
}

/* ===== 주문서 / 결제 레이아웃 ===== */
.layout-checkout{display:grid;gap:20px}
@media(min-width:992px){
  .layout-checkout{grid-template-columns:1fr 360px;gap:32px;align-items:start}
  .layout-checkout .col-side{position:sticky;top:calc(var(--header-h) + 16px)}
}

/* ===== 요약 ===== */
.summary-row{display:flex;justify-content:space-between;padding:10px 0;font-size:15px;color:var(--ink-2);align-items:baseline;gap:12px;letter-spacing:-0.02em}
.summary-row strong{color:var(--ink);font-weight:600}
.summary-total{display:flex;justify-content:space-between;padding:20px 0 0;margin-top:14px;border-top:2px solid var(--ink);font-size:15px;font-weight:600;align-items:baseline;color:var(--ink)}
.summary-total b{font-size:24px;font-weight:800;letter-spacing:-0.04em;color:var(--primary)}

/* ===== 상품 상세 ===== */
.detail{display:grid;gap:32px}
@media(min-width:768px){.detail{grid-template-columns:minmax(0,1fr) 440px;gap:40px;align-items:start}}
@media(min-width:1200px){.detail{grid-template-columns:minmax(0,1fr) 480px;gap:56px}}

/* 모바일: detail-left를 contents로 풀어서 순서 조정 (사진→정보→시세→설명) */
@media(max-width:767px){
  .detail-left{display:contents}
  .detail-gallery{order:1}
  .detail-thumbs{order:1}
  .detail-info{order:2}
  .detail-left .ai-smart-care{order:3}   /* 최근 시세 — 금액/정보 다음, 상품설명 위 */
  .detail-desc{order:4}
}

/* PC: 우측 정보 패널 sticky — 페이지 스크롤 따라옴 (overflow 없이 자연스럽게) */
@media(min-width:768px){
  .detail-info{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;min-width:0}
}

/* 우측 패널 안에서는 배송옵션을 1컬럼 + 컴팩트하게 (좁은 폭에서 글자 깨짐 방지) */
.detail-info .delivery-opts{grid-template-columns:1fr;gap:8px}
.detail-info .dopt{padding:14px 16px;align-items:center}
.detail-info .dopt-icon{width:36px;height:36px}
.detail-info .dopt-icon .ic{width:18px;height:18px}
.detail-info .dopt-desc{margin:0;font-size:13px}
.detail-info .dopt-fee{margin-left:auto;flex-shrink:0;padding-left:8px}
.detail-info .dopt-body{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.detail-info .dopt-name{margin:0;font-size:14px;font-weight:700;flex-shrink:0}

.detail-gallery{position:relative}
.detail-main-img{aspect-ratio:1/1;border-radius:var(--r-lg);background:#f5f5f5;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:160px;line-height:1;filter:saturate(.95)}
.detail-main-img img{width:100%;height:100%;object-fit:cover;filter:none}
/* 상세 갤러리 — 스와이프 슬라이더 + 도트(모바일) / 썸네일(PC) */
.detail-swiper{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;aspect-ratio:1/1;border-radius:var(--r-lg);background:#f5f5f5;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.detail-swiper::-webkit-scrollbar{display:none}
.gslide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1}
.gslide img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.gdots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:6px;justify-content:center;pointer-events:none;z-index:2}
.gdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 3px rgba(0,0,0,.28);transition:all .2s var(--t)}
.gdot.on{background:#fff;width:18px;border-radius:4px}
.detail-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.dthumb{width:64px;height:64px;border:2px solid #e5e7eb;border-radius:6px;overflow:hidden;padding:0;cursor:pointer;background:#fff;transition:border-color .15s var(--t)}
.dthumb:hover{border-color:var(--primary-l)}
.dthumb.active{border-color:var(--primary)}
.dthumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:767px){.detail-thumbs{display:none}}   /* 모바일: 썸네일 대신 도트 */
/* 전체보기(확대) 뷰어 */
.gviewer{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:200;display:flex;flex-direction:column;justify-content:center}
.gviewer-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:20px;border:none;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}
.gviewer-swiper{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;scrollbar-width:none}
.gviewer-swiper::-webkit-scrollbar{display:none}
.gvslide{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.gvslide img{max-width:100%;max-height:78vh;object-fit:contain}
.gviewer-thumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:16px 16px 24px}
.gvthumb{width:56px;height:56px;border:2px solid transparent;border-radius:6px;overflow:hidden;padding:0;cursor:pointer;background:#fff;opacity:.55;transition:all .15s var(--t)}
.gvthumb.on{border-color:#fff;opacity:1}
.gvthumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:768px){.gviewer-thumbs{display:none}}   /* 뷰어 썸네일은 모바일만 (PC는 갤러리 하단 썸네일로 대체) */
/* 상품정보제공고시 (식품 의무표시) */
.food-notice{margin-top:40px;border-top:1px solid var(--line);padding-top:28px}
.food-notice h3{font-size:17px;font-weight:800;margin:0 0 14px;letter-spacing:-0.03em;color:var(--ink)}
.food-notice-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.food-notice-tbl th{width:38%;text-align:left;vertical-align:top;padding:11px 14px;background:var(--bg-2);color:var(--ink-2);font-weight:600;border:1px solid var(--line);letter-spacing:-0.02em;line-height:1.5}
.food-notice-tbl td{padding:11px 14px;color:var(--ink);border:1px solid var(--line);letter-spacing:-0.02em;line-height:1.5;word-break:break-word}
.food-notice-foot{font-size:12px;color:var(--ink-3);margin:10px 2px 0;line-height:1.55}
@media(max-width:600px){.food-notice-tbl th{width:44%}}
.detail-cat{font-size:14px;color:var(--ink-3);font-weight:600;margin-bottom:10px;letter-spacing:-0.02em}
.detail-info h1{font-size:24px;font-weight:700;margin:0 0 16px;letter-spacing:-0.03em;line-height:1.35;color:var(--ink)}
@media(min-width:768px){.detail-info h1{font-size:26px}}
.detail-badges{display:flex;gap:6px;margin:16px 0 24px;flex-wrap:wrap}
.detail-price{font-size:36px;font-weight:800;margin:24px 0;letter-spacing:-0.05em;line-height:1;color:var(--ink)}
.detail-price small{font-size:14px;color:var(--ink-3);font-weight:400;margin-left:6px;letter-spacing:-0.02em}
/* 오늘의 특가 — 상세페이지 가격 영역 */
.detail-deal-row{display:flex;align-items:center;gap:8px;margin:24px 0 8px;flex-wrap:wrap}
.detail-deal-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#FF6B35,#FF8C5A);color:#fff;font-size:13px;font-weight:800;letter-spacing:-0.02em;padding:5px 11px;border-radius:var(--r-pill);box-shadow:0 2px 8px rgba(255,107,53,.25)}
.detail-deal-end{font-size:12.5px;color:var(--ink-3);font-weight:600;letter-spacing:-0.02em}
.detail-orig-price{font-size:16px;color:var(--ink-4);text-decoration:line-through;font-weight:500;letter-spacing:-0.02em;margin:0}
.detail-price.is-deal{margin-top:0;color:var(--primary)}
.detail-meta{display:grid;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0;margin:24px 0}
.detail-meta-row{display:flex;font-size:14px;padding:12px 0;letter-spacing:-0.02em;gap:12px}
.detail-meta-row dt{width:130px;color:var(--ink-3);flex-shrink:0;font-weight:500;white-space:nowrap}
.detail-meta-row dd{margin:0;color:var(--ink);font-weight:600;min-width:0;word-break:break-all}
@media(max-width:480px){.detail-meta-row dt{width:104px}}

/* 상품 설명 섹션 (상세 페이지 하단, detail-left 안에 포함) */
.detail-desc{margin:48px 0 0;border-top:1px solid var(--line);padding-top:40px}

/* 큰 비주얼 이미지 영역 (마켓컬리 상세처럼 풀폭) */
.detail-desc-img{aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;position:relative;margin:0 0 28px;display:flex;align-items:center;justify-content:center}
.detail-desc-img.bg1{background:#fff1e6}
.detail-desc-img.bg2{background:#e8f1ec}
.detail-desc-img.bg3{background:#fef7d0}
.detail-desc-img .big-emoji{font-size:160px;line-height:1;filter:saturate(.95) drop-shadow(0 6px 16px rgba(0,0,0,.08))}
.detail-desc-img .caption{position:absolute;bottom:20px;left:24px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);padding:10px 18px;border-radius:var(--r-pill);font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.detail-desc-img img{width:100%;height:100%;object-fit:cover}
@media(min-width:768px){.detail-desc-img .big-emoji{font-size:200px}}
.detail-desc-head{display:flex;align-items:baseline;gap:14px;margin-bottom:28px}
.detail-desc-head h2{font-size:22px;font-weight:800;margin:0;letter-spacing:-0.03em;color:var(--ink)}
.detail-desc-head .sub{font-size:14px;color:var(--ink-3);font-weight:500;letter-spacing:-0.02em}

.detail-desc-hero{background:var(--bg-2);border-radius:var(--r-md);padding:28px 32px;margin-bottom:24px}
.detail-desc-hero h3{font-size:17px;font-weight:700;margin:0 0 10px;color:var(--ink);letter-spacing:-0.03em;line-height:1.4}
.detail-desc-hero p{font-size:15px;color:var(--ink-2);margin:0;line-height:1.7;letter-spacing:-0.02em}

.detail-desc-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:768px){.detail-desc-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.desc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.desc-card .ic-wrap{width:40px;height:40px;border-radius:10px;background:var(--primary-l);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.desc-card h4{font-size:15px;font-weight:800;margin:0 0 8px;color:var(--ink);letter-spacing:-0.03em}
.desc-card p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.65;letter-spacing:-0.02em}

.promise-list{display:grid;gap:12px;margin-top:24px}
.promise-item{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;background:var(--secondary-l);border:1px solid #D6E9DD;border-radius:var(--r-md)}
.promise-item .ic-wrap{width:36px;height:36px;border-radius:50%;background:var(--secondary);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.promise-item .body{flex:1}
.promise-item h4{font-size:15px;font-weight:700;margin:0 0 4px;color:var(--ink);letter-spacing:-0.02em}
.promise-item p{font-size:14px;color:var(--ink-2);margin:0;letter-spacing:-0.02em}
/* 모바일: 페이지 하단 고정 — 어디서 스크롤하든 항상 보임 */
@media(max-width:767px){
  .detail-actions{position:fixed;bottom:60px;left:0;right:0;background:#fff;padding:10px 14px;margin:0;border-top:1px solid var(--line);z-index:20;grid-template-columns:48px 1fr 1.4fr;gap:8px;box-shadow:0 -2px 12px rgba(0,0,0,.06)}
  .detail-actions .btn{padding:13px 8px;font-size:15px;white-space:nowrap;letter-spacing:-0.03em}
  .detail-actions .icon-btn{width:48px;height:48px}
}
.body-detail .page{padding-bottom:140px}
@media(min-width:768px){.body-detail .page{padding-bottom:60px}}

/* ===== 로그인 ===== */
.auth-wrap{max-width:420px;margin:0 auto;padding:24px 16px 80px}
/* 인증 3화면(로그인·가입·찾기) 브랜드 영역 — 2026-08-13 사장님 지시로 가운데 로고 제거.
   헤더에 이미 로고가 있어 한 화면에 두 번 나왔다. 지금은 안내문구(.tag)만 남는다.
   ※ .auth-brand-img / .footer-brand-row 규칙은 되돌릴 때를 위해 남겨둔다(현재 미사용). */
.auth-logo{text-align:center;margin-bottom:26px}
.auth-logo .brand{font-size:30px;font-weight:700;letter-spacing:-0.04em;line-height:1}
.auth-logo .brand .b1{color:var(--primary);font-weight:700}
.auth-logo .brand .b2{color:var(--secondary);font-weight:600}
.auth-logo .tag{font-size:14px;color:var(--ink-3);margin-top:0;letter-spacing:-0.02em}   /* 로고 제거로 위 여백 불필요 */
/* 인증 화면 브랜드 = 전체 로고 이미지 (텍스트 .brand 대체 — 2026-08-12) */
.auth-logo .auth-brand-img{height:54px;width:auto;display:inline-block}
.auth-card{border:1px solid var(--line);border-radius:var(--r-md);padding:28px 22px;background:#fff;margin-top:20px}
.auth-foot{text-align:center;font-size:14px;color:var(--ink-3);margin-top:24px;letter-spacing:-0.02em}
.auth-foot a{color:var(--primary);font-weight:700;margin-left:6px;border-bottom:1px solid var(--primary)}

/* ===== 빈 상태 / 알림 ===== */
.empty{text-align:center;padding:72px 20px;color:var(--ink-3)}
.empty .empty-ic{display:inline-flex;width:64px;height:64px;border-radius:50%;background:var(--primary-l);color:var(--primary);align-items:center;justify-content:center;margin-bottom:16px}
.empty .empty-ic .ic{width:28px;height:28px}
.empty p{font-size:15px;margin:0 0 20px;color:var(--ink-2);letter-spacing:-0.02em;line-height:1.6}
.empty p small{font-size:14px}

/* ===== 우측 사이드 레일 (PC 전용) — 배송안내 · 최근 본 상품 · 맨 위로 ===== */
.side-rail{position:fixed;right:20px;top:180px;z-index:60;display:flex;flex-direction:column;gap:10px;width:112px}
.side-rail .sr-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 8px;text-align:center;text-decoration:none;color:inherit;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.side-rail .sr-deliv{background:var(--primary-l);border-color:var(--primary)}
.side-rail .sr-deliv:hover{background:var(--primary);color:#fff}
.side-rail .sr-deliv:hover .sr-ic svg{stroke:#fff}
.side-rail .sr-ic{display:block;margin-bottom:5px}
.side-rail .sr-ic svg{width:22px;height:22px}
.side-rail .sr-tt{display:block;font-size:12.5px;font-weight:800;letter-spacing:-0.03em;line-height:1.3}
.side-rail .sr-copy{display:block;font-size:11px;color:var(--primary);font-weight:700;margin-top:4px;letter-spacing:-0.04em;line-height:1.4;word-break:keep-all}
.side-rail .sr-sub{display:block;font-size:11px;color:var(--ink-3);margin-top:6px;padding-top:6px;border-top:1px dashed var(--primary);letter-spacing:-0.03em;line-height:1.35;word-break:keep-all}
.side-rail .sr-sub:empty{display:none}
.side-rail .sr-sub i{display:block;font-style:normal;font-size:10.5px;margin-top:2px;opacity:.85}
.side-rail .sr-sub b{display:block;color:var(--primary);font-weight:800}
.side-rail .sr-deliv:hover .sr-copy,.side-rail .sr-deliv:hover .sr-sub,.side-rail .sr-deliv:hover .sr-sub b{color:#fff}
.side-rail .sr-deliv:hover .sr-sub{border-top-color:rgba(255,255,255,.5)}
.side-rail .sr-recent{padding:10px 8px}
.side-rail .sr-head{display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:8px}
.side-rail .sr-cnt{font-size:11px;color:var(--ink-3);font-weight:700}
.side-rail .sr-list{display:flex;flex-direction:column;gap:6px}
.side-rail .sr-item{display:block;width:100%;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--bg-2);display:flex;align-items:center;justify-content:center}
.side-rail .sr-item img{width:100%;height:100%;object-fit:cover}
.side-rail .sr-emoji{font-size:20px}
.side-rail .sr-more{display:block;margin-top:8px;font-size:11.5px;color:var(--ink-2);text-decoration:none;font-weight:700}
.side-rail .sr-top{width:100%;padding:9px 0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.side-rail .sr-top.on{opacity:1;pointer-events:auto}
/* chevron 은 오른쪽(→) 모양 — 위(↑)로 만들려면 -90도 */
.side-rail .sr-top svg{width:18px;height:18px;transform:rotate(-90deg)}
@media(max-width:1439px){ .side-rail{display:none} }

/* 배송지 지역 안내 — ERP 배송지역 설정(요일·주문/배송 시각) 실값 표기 */
.area-guide{margin-top:10px;padding:11px 13px;background:var(--primary-l);border:1px solid var(--primary);border-radius:var(--r-sm);font-size:14px;color:var(--ink);letter-spacing:-0.02em}
.area-guide .ag-days{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--primary);color:#fff;font-size:12px;font-weight:700}
.area-guide .ag-lines{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.area-guide .ag-line{font-size:13.5px;color:var(--ink-2)}
.area-guide .ag-more{display:inline-block;margin-top:8px;font-size:13px;color:var(--primary);font-weight:700;text-decoration:underline}

.alert{padding:14px 18px;border-radius:var(--r);font-size:14px;line-height:1.6;margin-bottom:18px;letter-spacing:-0.02em}
.alert.info{background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line)}
.alert.warn{background:#FFF8E7;color:#8B6914;border:1px solid #FFE4A0}
.alert.success{background:var(--secondary-l);color:var(--secondary-d);border:1px solid #C7E5D2}
.alert.primary{background:var(--primary-l);color:var(--primary-d);border:1px solid #FFD7C2}

/* ===== 진행 단계 (주문 추적) ===== */
.step-flow{display:flex;align-items:flex-start;justify-content:space-between;gap:0;margin:16px 0 28px}
.step{flex:1;text-align:center;font-size:14px;color:var(--ink-3);position:relative;letter-spacing:-0.02em;font-weight:600}
.step .step-ic{width:42px;height:42px;border-radius:50%;background:#fff;border:1.5px solid var(--line);color:var(--ink-3);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;transition:all .2s var(--t)}
.step .step-ic .ic{width:18px;height:18px}
.step.done{color:var(--ink-2)}
.step.done .step-ic{background:var(--secondary);border-color:var(--secondary);color:#fff}
.step.now{color:var(--primary);font-weight:700}
.step.now .step-ic{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 5px var(--primary-l)}
.step-line{flex:0 0 28px;height:2px;background:var(--line);margin-top:20px;border-radius:1px}
.step-line.done{background:var(--secondary)}

/* ===== 완료 화면 ===== */
.complete-wrap{max-width:560px;margin:0 auto;text-align:center;padding:60px 20px}
.complete-ic{width:80px;height:80px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;box-shadow:0 8px 24px rgba(255,107,53,.25)}
.complete-ic .ic{width:32px;height:32px;stroke-width:2.5}
.complete-wrap h1{font-size:26px;font-weight:800;margin:0 0 8px;letter-spacing:-0.04em;color:var(--ink)}
.complete-wrap > p{color:var(--ink-3);margin:0 0 36px;font-size:14px;letter-spacing:-0.02em}
.complete-order{border:1px solid var(--line);border-radius:var(--r-md);padding:24px;text-align:left;background:#fff}

/* ===== 히어로 배너 — 마켓컬리 스타일 (밝고 따뜻) ===== */
.hero{padding:0;margin-bottom:24px;background:var(--primary-l);border-radius:var(--r-lg);overflow:hidden;position:relative}
.hero-inner{display:flex;align-items:center;gap:16px;padding:20px 22px;flex-wrap:wrap}
.hero-text{flex:1;min-width:200px}
.hero-eyebrow{display:inline-block;background:#fff;color:var(--primary);font-size:14px;letter-spacing:-0.02em;padding:6px 14px;border-radius:var(--r-pill);font-weight:700;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.hero h1{font-size:22px;font-weight:800;margin:0 0 10px;letter-spacing:-0.04em;line-height:1.3;color:var(--ink)}
.hero p{font-size:14px;color:var(--ink-2);margin:0;letter-spacing:-0.02em}
.hero-ic{font-size:64px;line-height:1;flex-shrink:0;filter:drop-shadow(0 4px 12px rgba(255,107,53,.15))}
@media(min-width:768px){
  .hero{margin-bottom:32px}
  .hero-inner{padding:32px 40px;gap:20px}
  .hero h1{font-size:32px}
  .hero p{font-size:15px}
  .hero-ic{font-size:120px}
}

/* ===== 배송 안내 바 ===== */
.deliv-bar{display:flex;flex-wrap:wrap;gap:10px 20px;padding:16px 18px;background:var(--bg-2);border-radius:var(--r-md);font-size:14px;color:var(--ink-2);margin-bottom:16px;letter-spacing:-0.02em;border:1px solid var(--line);font-weight:500}
.deliv-bar > div{display:flex;align-items:center;gap:8px}
@media(min-width:768px){.deliv-bar{padding:18px 20px;gap:14px 24px;margin-bottom:24px}}
.deliv-bar > div{display:flex;align-items:center;gap:8px}
.deliv-bar .badge{margin:0;border-radius:3px}

/* ===== 유틸 ===== */
.text-primary{color:var(--primary)}
.text-secondary{color:var(--secondary)}
.text-accent{color:var(--accent)}
.text-muted{color:var(--ink-3)}
.text-right{text-align:right}
.fw-700{font-weight:700}
.fw-800{font-weight:800}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.hide-mb{display:none}@media(min-width:768px){.hide-mb{display:initial}.hide-pd{display:none}}

/* 브레드크럼 */
.bc{font-size:14px;color:var(--ink-3);margin-bottom:18px;display:flex;align-items:center;gap:6px;letter-spacing:-0.02em}
.bc a:hover{color:var(--primary)}
.bc .bc-sep{color:var(--ink-4)}

/* ===== 토스트 ===== */
/* 주소검색(다음 우편번호) 임베드 레이어 — 팝업 대신 프레임 */
.pad-postcode-ov{position:fixed;inset:0;z-index:2100;background:rgba(17,17,17,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.pad-postcode-box{background:#fff;border-radius:14px;overflow:hidden;width:100%;max-width:420px;height:540px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.28)}
.pad-postcode-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink);font-size:15px;letter-spacing:-0.02em}
.pad-postcode-close{border:none;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--ink-3);padding:0 4px}
.pad-postcode-embed{flex:1;min-height:0}
.pad-postcode-embed>div{width:100%!important;height:100%!important}
@media(max-width:560px){.pad-postcode-ov{padding:0;align-items:stretch}.pad-postcode-box{max-width:none;height:100%;max-height:none;border-radius:0}}

.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);background:var(--ink);color:#fff;padding:14px 24px;border-radius:var(--r-pill);font-size:14px;z-index:2000;opacity:0;transition:all .2s var(--t);pointer-events:none;letter-spacing:-0.02em;max-width:90vw;text-align:center;font-weight:600}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:768px){.toast{bottom:32px}}

/* 가상계좌 박스 */
.vbank-box{border:1.5px solid var(--primary);border-radius:var(--r-md);padding:24px;background:var(--primary-l)}
.vbank-box h3{margin:0 0 16px;font-size:16px;font-weight:800;color:var(--primary-d);letter-spacing:-0.03em}
.vbank-box table{width:100%;border-collapse:collapse;font-size:14.5px;letter-spacing:-0.02em}
.vbank-box table td{padding:8px 0}
.vbank-box table td:first-child{color:var(--ink-3);width:96px;font-weight:500}
.vbank-box table td:last-child{font-weight:700;color:var(--ink)}

/* ===== 마켓컬리 스타일 주문 카드 (track/cancels) ===== */
.order-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:14px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.order-card-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px;cursor:pointer;gap:10px}
.order-card-head .date{font-size:18px;font-weight:800;color:var(--ink);margin:0 0 4px;letter-spacing:-0.03em}
.order-card-head .date .lbl{display:inline-block;font-size:12px;font-weight:700;color:var(--primary);background:var(--primary-l);border-radius:var(--r);padding:2px 7px;margin-right:8px;vertical-align:2px;letter-spacing:-0.02em} /* 「배송예정」「픽업」 — 머리 날짜가 주문일이 아님을 한눈에 */
.order-card-head .ono{font-size:13px;color:var(--ink-3);margin:0;letter-spacing:-0.02em}
.order-card-head .chev{color:var(--ink-3);align-self:center;flex-shrink:0;display:flex}
.order-card-head .chev .ic{width:18px;height:18px}

.order-status{padding:12px 20px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.order-status .status-label{font-size:16px;font-weight:800;color:var(--primary);letter-spacing:-0.02em}
.order-status .status-label.canceled{color:var(--accent)}
.order-status .status-label.delivered{color:var(--secondary)}
.order-status .status-label.unpaid{color:#dc2626}   /* 결제 미완료 — 「입금대기」로 오해하지 않게 빨강(2026-08-19) */
.order-status .eta{font-size:14px;color:var(--ink-2);letter-spacing:-0.02em;font-weight:500}

.order-products{padding:4px 20px 12px}
.order-product{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line-2);align-items:center}
.order-product:first-child{border-top:none}
.order-product .thumb{width:54px;height:54px;border-radius:var(--r);background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;overflow:hidden;text-decoration:none}
.order-product .thumb img{width:100%;height:100%;object-fit:cover}
.order-product .info{flex:1;min-width:0}
.order-product .ship-label{display:inline-block;font-size:12px;color:var(--ink-3);font-weight:600;margin-bottom:2px;letter-spacing:-0.02em}
.order-product .name{font-size:14px;color:var(--ink-2);margin:0 0 4px;letter-spacing:-0.02em;line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.order-product .price{font-size:14px;font-weight:700;color:var(--ink)}
.order-product .price .qty{color:var(--ink-3);font-weight:500;margin-left:6px}
.order-product .reorder-btn{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--ink-3);cursor:pointer;flex-shrink:0;transition:all .12s var(--t)}
.order-product .reorder-btn:hover{border-color:var(--primary);color:var(--primary)}
.order-product .reorder-btn .ic{width:18px;height:18px}

.order-expand{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:13px;background:var(--bg-2);border:none;border-top:1px solid var(--line-2);font-size:14px;color:var(--ink-2);cursor:pointer;font-weight:600;letter-spacing:-0.02em;transition:color .12s var(--t)}
.order-expand:hover{color:var(--ink)}
.order-expand .ic{width:14px;height:14px;transition:transform .2s var(--t)}
.order-expand.expanded .ic{transform:rotate(180deg)}

.order-actions{padding:14px 20px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:8px}

/* 칩 탭 (전체/취소/반품/교환 같은 필터) */
.chip-tabs{display:flex;gap:8px;margin-bottom:0;flex-wrap:wrap}
.chip-tab{padding:11px 22px;border:none;background:var(--bg-2);border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--ink-3);cursor:pointer;letter-spacing:-0.02em;transition:all .12s var(--t)}
.chip-tab:hover{background:var(--line)}
.chip-tab.active{background:var(--ink);color:#fff;font-weight:700}

/* ===== 마이페이지 내부 페이지 — 좌측 메뉴(마이페이지 사이드와 동일 디자인) + 우측 콘텐츠 =====
   mypage-grid와 100% 동일한 컬럼/간격/sticky 위치 */
.my-page-layout{display:grid;gap:20px}
.my-page-layout > *{min-width:0}
@media(min-width:992px){
  .my-page-layout{grid-template-columns:300px 1fr;gap:32px;align-items:start}
  /* 사이드 sticky 제거 — 페이지 전체와 함께 스크롤 (메뉴 길어도 다 보임) */
}
@media(max-width:991px){.my-side{display:none}}

/* 모바일 햄버거 버튼 — 헤더 좌측 (마이페이지 카테고리만, desktop 숨김) */
.ham-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;color:var(--ink);border-radius:8px;cursor:pointer;padding:0;margin-right:-4px;flex-shrink:0}
.ham-btn:hover{background:var(--bg-2)}
.ham-btn .ic{width:24px;height:24px;stroke-width:2.2}
@media(max-width:991px){.ham-btn{display:inline-flex}}

/* 마이페이지 사이드 drawer (모바일 전용) */
.my-drawer{position:fixed;inset:0;z-index:1000;pointer-events:none}
.my-drawer[hidden]{display:none}
.my-drawer-overlay{position:absolute;inset:0;background:rgba(16,24,40,.5);opacity:0;transition:opacity .24s var(--t);pointer-events:auto}
.my-drawer.open .my-drawer-overlay{opacity:1}
.my-drawer-panel{position:absolute;left:0;top:0;bottom:0;width:min(86vw,320px);background:var(--page-bg);transform:translateX(-100%);transition:transform .26s var(--t);overflow-y:auto;overflow-x:hidden;padding:16px 14px;display:block;pointer-events:auto;box-shadow:2px 0 16px rgba(16,24,40,.12);box-sizing:border-box}
.my-drawer.open .my-drawer-panel{transform:translateX(0)}
.my-drawer-panel .me-card{margin-bottom:14px}
@media(min-width:992px){.my-drawer{display:none}}

/* 사용자 카드 (마이페이지 사이드) — 마컬 스타일 흰배경 */
.me-card{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.me-card-body{}
.me-hello{font-size:13px;font-weight:600;color:var(--primary);margin:0 0 4px;letter-spacing:-0.02em}
.me-name{font-size:17px;font-weight:800;letter-spacing:-0.03em;margin:0;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3}
.me-type{display:inline-flex;align-items:center;font-size:12px;font-weight:700;background:var(--primary-l);color:var(--primary);padding:3px 10px;border-radius:var(--r-pill);letter-spacing:-0.02em}

/* 진행중 주문 미니 (me-card 안) */
.me-stat{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);font-size:13.5px;letter-spacing:-0.02em;text-decoration:none;color:var(--ink-2);transition:color .12s var(--t)}
.me-stat:hover{color:var(--primary)}
.me-stat-label{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.me-stat-label .ic{width:14px;height:14px;color:var(--primary)}
.me-stat-value{display:inline-flex;align-items:center;gap:2px;font-weight:800;color:var(--ink);font-size:14px}
.me-stat-value .ic{width:14px;height:14px;color:var(--ink-3)}

/* 메뉴 리스트 (마이페이지 + 내부 사이드 공통) */
/* 마이페이지 사이드 — 하나의 흰 박스 안에 그룹 통합 */
.menu-list{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04);margin-top:14px;padding:6px 0}
.menu-group{padding:4px 0}
.menu-group + .menu-group{border-top:1px solid var(--line-2);margin-top:4px;padding-top:8px}
.menu-group-title{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:0;margin:0 0 4px;padding:8px 20px 4px}
.menu-item{display:flex;align-items:center;gap:14px;padding:12px 20px;font-size:15px;font-weight:600;color:var(--ink);transition:background .12s var(--t);letter-spacing:-0.02em;cursor:pointer;width:100%;text-align:left}
.menu-item:hover{background:var(--bg-2)}
.menu-item .menu-ic{width:36px;height:36px;border-radius:9px;background:var(--primary-l);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.menu-item .menu-ic .ic{width:18px;height:18px}
.menu-item .menu-arrow{margin-left:auto;color:var(--ink-4)}
.menu-item.danger{color:var(--primary)}

/* 메뉴 active 표시 (내부 사이드에서) */
.menu-list .menu-item.active{background:var(--primary-l)}
.menu-list .menu-item.active > span:not(.menu-arrow):not(.menu-ic){color:var(--primary);font-weight:800}
.menu-list .menu-item.active .menu-ic{background:var(--primary);color:#fff}
.menu-list .menu-item.active .menu-arrow{color:var(--primary)}

/* ===== 라벨 칩 (우리집/회사/직접입력 등) ===== */
.label-chips{display:flex;flex-wrap:wrap;gap:8px}
.label-chip{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--ink-2);background:#fff;cursor:pointer;transition:all .12s var(--t);letter-spacing:-0.02em;line-height:1.2}
.label-chip:hover{border-color:var(--ink-3);color:var(--ink)}
.label-chip.active{border-color:var(--primary);background:var(--primary-l);color:var(--primary);font-weight:700}
.label-chip .ic{width:16px;height:16px}

/* ===== 라디오 그룹 (가로/세로) ===== */
.radio-group{display:grid;gap:8px}
.radio-group.row{grid-template-columns:repeat(2,1fr)}
.radio-item{display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;transition:all .12s var(--t);font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:-0.02em;position:relative}
.radio-item:hover{border-color:var(--ink-3)}
.radio-item input{position:absolute;opacity:0;pointer-events:none}
.radio-circle{width:20px;height:20px;border:2px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s var(--t);background:#fff}
.radio-item input:checked ~ .radio-circle{border-color:var(--primary)}
.radio-item input:checked ~ .radio-circle::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--primary)}
.radio-item input:checked ~ .radio-label{color:var(--ink);font-weight:700}

/* ===== 알림 박스 (i 아이콘 + 텍스트) ===== */
.notice-box{display:flex;gap:10px;padding:14px 16px;background:var(--bg-2);border-radius:var(--r);font-size:13.5px;color:var(--ink-2);line-height:1.5;letter-spacing:-0.02em;align-items:flex-start;margin:10px 0}
.notice-box .ic{flex-shrink:0;color:var(--ink-3);margin-top:1px}
.notice-box.warn{background:var(--primary-l);color:var(--primary-d)}
.notice-box.warn .ic{color:var(--primary)}
.notice-box b{font-weight:700;display:block;margin-bottom:2px}

/* ===== 마이페이지 우측 흰 박스 공용 ===== */
.my-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px 16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
@media(min-width:768px){.my-card{padding:28px 28px}}
.my-card + .my-card{margin-top:14px}
.my-meta + .my-card{margin-top:14px}

/* 박스 사이 메타 라인 (총 N개 / 정렬 등) — track.html의 결과 헤더와 동일 패턴 */
.my-meta{display:flex;justify-content:space-between;align-items:baseline;margin:14px 4px;font-size:16px;color:var(--ink-3);font-weight:500;letter-spacing:-0.02em;flex-wrap:wrap;gap:8px}
.my-meta .left{display:flex;align-items:baseline;gap:8px}
.my-meta .left b{color:var(--ink);font-weight:800;font-size:16px}
.my-meta .right{font-size:16px;display:flex;align-items:center;gap:0}
.my-meta-sort{padding:0 12px;color:var(--ink-3);background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;position:relative;line-height:1.4;letter-spacing:-0.02em}
.my-meta-sort:hover{color:var(--ink)}
.my-meta-sort.active{color:var(--ink);font-weight:800}
.my-meta-sort + .my-meta-sort::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:var(--line)}

/* 흰 박스 안 H1 (페이지 타이틀) — H1 옆 안내문 인라인 지원 */
.my-card .my-title{font-size:22px;font-weight:800;letter-spacing:-0.03em;color:var(--ink);margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--ink);line-height:1.3;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.my-card .my-title .page-desc{font-size:13px;color:var(--ink-3);font-weight:500;letter-spacing:-0.02em;line-height:1.5;margin:0}
/* H1만 있는 박스 — 아래 라인/여백 제거 */
.my-card .my-title:only-child{margin:0;padding:0;border-bottom:none}
@media(min-width:768px){.my-card .my-title{font-size:24px}}

/* ===== 배송지 라디오 카드 (마컬 스타일) ===== */
.addr-list{display:flex;flex-direction:column;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:14px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.my-card > .addr-list{border:none;border-radius:0;box-shadow:none;margin-bottom:14px}
.my-card > .addr-list .addr-item{border-top:1px solid var(--line-2);padding-left:0;padding-right:0}
.my-card > .addr-list .addr-item:first-child{border-top:none;padding-top:0}
.addr-item{display:flex;gap:14px;padding:18px 20px;cursor:pointer;align-items:flex-start;position:relative;border-top:1px solid var(--line-2);transition:background .12s var(--t)}
.addr-item:first-child{border-top:none}
.addr-item:hover{background:var(--bg-2)}
.addr-radio-dot{width:24px;height:24px;border:2px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;background:#fff;transition:border-color .12s var(--t)}
.addr-item.default .addr-radio-dot{border-color:var(--primary)}
.addr-item.default .addr-radio-dot::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--primary)}
.addr-item-body{flex:1;min-width:0}
.addr-item-label{display:inline-block;background:var(--bg-2);color:var(--ink-2);font-size:13px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);margin-bottom:8px;letter-spacing:-0.02em}
.addr-item.default .addr-item-label{background:var(--primary-l);color:var(--primary)}
.addr-item-addr{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 4px;letter-spacing:-0.02em;line-height:1.5}
.addr-item-meta{font-size:14px;color:var(--ink-3);margin:0 0 6px;letter-spacing:-0.02em}
.addr-item-tag{display:inline-block;color:var(--secondary);font-size:13.5px;font-weight:700;letter-spacing:-0.02em}
.addr-item-guide{margin:4px 0 0;font-size:12.5px;color:var(--ink-3);letter-spacing:-0.03em;line-height:1.5}
.addr-item-guide b{color:var(--primary);font-weight:800}
.addr-item-guide:empty{display:none}
.addr-item-tag.off{color:var(--ink-3);font-weight:600}
.addr-item-edit{font-size:14px;color:var(--ink-2);background:none;border:none;cursor:pointer;font-weight:600;flex-shrink:0;letter-spacing:-0.02em;align-self:flex-start;padding:4px 8px;border-radius:6px;transition:color .12s var(--t)}
.addr-item-edit:hover{color:var(--primary)}

/* 페이지 안내 줄 (H1 옆 작은 설명) */
.page-desc{font-size:13.5px;color:var(--ink-3);font-weight:500;letter-spacing:-0.02em;margin-left:10px;line-height:1.5}

/* ===== 자주 산 상품 카드 (마컬 스타일 — 핀+횟수+할인) ===== */
.freq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 12px}
@media(min-width:600px){.freq-grid{grid-template-columns:repeat(3,1fr);gap:32px 16px}}
@media(min-width:1280px){.freq-grid{grid-template-columns:repeat(4,1fr);gap:36px 20px}}
.freq-card{position:relative;cursor:pointer}
/* 발주판 빼기(✕) — 저장 모델 복귀(2026-08-31). 카드 우상단 작은 원형 버튼(발주판 화면·홈 발주판 공용).
   테두리 대신 옅은 그림자로 사진 위에 떠 보이게, 호버 시 빨간 배경(뺀다는 신호). */
.board-del{position:absolute;top:6px;right:6px;z-index:2;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.95);border:none;box-shadow:0 1px 5px rgba(16,24,40,.22);color:var(--ink-3);font-size:12px;font-weight:600;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,color .15s,transform .15s,box-shadow .15s}
.board-del:hover{color:#fff;background:#f87171;box-shadow:0 2px 8px rgba(220,38,38,.35);transform:scale(1.08)}
.board-del:active{transform:scale(.96)}
/* 발주판 품목추가 모달 결과 줄 */
.board-add-row{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);margin-top:6px;background:var(--bg-2)}
.board-add-row .rn{flex:1 1 0;min-width:0;font-size:13.5px;color:var(--ink);font-weight:600;letter-spacing:-0.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-add-row .rp{font-size:13px;font-weight:800;color:var(--ink-2);flex-shrink:0}
.board-add-row .btn{flex-shrink:0;padding:7px 14px;font-size:13px}
.freq-card .img{position:relative;aspect-ratio:1/1;background:#f5f5f5;border-radius:var(--r-md);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:56px;line-height:1;filter:saturate(.95)}
.freq-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--t)}
.freq-card:hover .img img{transform:scale(1.05)}
.freq-card .pin{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink-3);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;backdrop-filter:blur(4px);z-index:2;transition:all .12s var(--t)}
.freq-card .pin:hover{color:var(--primary);background:#fff}
.freq-card .pin.on{color:var(--primary)}
.freq-card .pin .ic{width:16px;height:16px;stroke-width:2}
.freq-card .add-btn{width:100%;padding:9px 0;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .12s var(--t);letter-spacing:-0.02em}
.freq-card .add-btn:hover{border-color:var(--primary);color:var(--primary)}
.freq-card .add-btn .ic{width:16px;height:16px}
.freq-card .freq-count{display:inline-block;font-size:12px;color:var(--ink-3);background:var(--bg-2);padding:3px 9px;border-radius:var(--r-pill);margin-top:8px;letter-spacing:-0.02em;font-weight:600}
.freq-card .name{font-size:13.5px;color:var(--ink);font-weight:500;margin:6px 0 4px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;letter-spacing:-0.02em;min-height:38px}
.freq-card .price{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-0.03em}
.freq-card .price .discount{color:var(--accent);margin-right:4px}

/* 자주 산 상품 상단 헤더 (총 N개 + 정렬) */
.freq-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap;gap:12px}
.freq-head .count{font-size:14px;color:var(--ink-3);font-weight:500;letter-spacing:-0.02em}
.freq-head .count b{color:var(--ink);font-weight:800;font-size:16px}
.freq-sorts{display:flex;gap:0;font-size:14px;letter-spacing:-0.02em}
.freq-sort{padding:0 12px;color:var(--ink-3);background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;position:relative;line-height:1.4}
.freq-sort:hover{color:var(--ink)}
.freq-sort.active{color:var(--ink);font-weight:800}
.freq-sort + .freq-sort::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:var(--line)}

/* ===== 정기 주문 카드 ===== */
.subs-item{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:#fff;display:flex;gap:14px;align-items:center;margin-bottom:10px}
.subs-item .img{width:60px;height:60px;border-radius:var(--r);background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;line-height:1}
.subs-item .body{flex:1;min-width:0}
.subs-item .name{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 4px;letter-spacing:-0.02em;line-height:1.4}
.subs-item .period{font-size:13.5px;color:var(--secondary);font-weight:600;letter-spacing:-0.02em}
.subs-item .period::before{content:"";display:inline-block;width:6px;height:6px;background:var(--secondary);border-radius:50%;margin-right:5px;vertical-align:middle}
.subs-item button{padding:8px 14px;font-size:13.5px;background:#fff;border:1px solid var(--line);border-radius:6px;color:var(--ink-2);cursor:pointer;font-weight:600;flex-shrink:0;letter-spacing:-0.02em}
.subs-item button:hover{border-color:var(--primary);color:var(--primary)}

/* ===== 미니 스위치(컬리식 On/Off) — 장바구니·주문서 「최대 할인 적용」 공용 ===== */
.mini-switch{position:relative;width:36px;height:20px;border-radius:999px;background:var(--line);border:none;cursor:pointer;transition:background .15s var(--t);flex-shrink:0;padding:0}
.mini-switch:after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s var(--t);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.mini-switch.on{background:var(--primary)}
.mini-switch.on:after{left:18px}

/* ===== 공통 커스텀 드롭다운 (마켓컬리 스타일) ===== */
.dd{position:relative;display:inline-block}
.dd-toggle{display:inline-flex;align-items:center;gap:6px;padding:13px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;letter-spacing:-0.02em;line-height:1.2;width:100%;justify-content:space-between;text-align:left;transition:border-color .12s var(--t)}
.dd-toggle:hover{border-color:var(--ink-3)}
.dd.open .dd-toggle{border-color:var(--primary)}
.dd-toggle .dd-chev{flex-shrink:0;color:var(--ink-3);transition:transform .2s var(--t);display:flex}
.dd-toggle .dd-chev .ic{width:14px;height:14px;transform:rotate(90deg)}
.dd.open .dd-toggle .dd-chev .ic{transform:rotate(-90deg)}
.dd-toggle .dd-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-toggle .dd-placeholder{color:var(--ink-4);font-weight:400}
/* 메뉴 */
.dd-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;width:max-content;max-width:300px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(16,24,40,.12);padding:6px;z-index:50;max-height:420px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .15s var(--t);white-space:nowrap}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dd-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 12px;border:none;background:none;cursor:pointer;font-size:14px;color:var(--ink-2);text-align:left;border-radius:6px;font-weight:500;letter-spacing:-0.02em;line-height:1.4;white-space:nowrap}
.dd-item:hover{background:var(--bg-2);color:var(--ink)}
.dd-item.active{background:var(--primary-l);color:var(--primary);font-weight:700}
.dd-item.active::after{content:"";width:6px;height:11px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg) translate(-1px,-2px)}
/* 컴팩트 (검색바 안에 들어가는 작은 드롭다운) */
.dd-mini .dd-toggle{padding:10px 12px;border:none;background:transparent}
.dd-mini .dd-toggle:hover{background:var(--bg-2);border-radius:6px}
.dd-mini.open .dd-toggle{background:transparent;border:none}

/* ===== 주문조회 검색바 (기간 + 상품명) ===== */
.track-searchbar{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:6px 8px;margin-bottom:20px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.track-period{position:relative;flex-shrink:0}
/* select — 보더 없이 텍스트 + chevron만 */
.track-period select{appearance:none;-webkit-appearance:none;padding:10px 24px 10px 12px;border:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 6px center;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;cursor:pointer;outline:none;border-radius:6px}
.track-period select:hover{background-color:var(--bg-2)}
.track-period::before{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:1px;height:18px;background:var(--line)}
.track-search{flex:1;display:flex;align-items:center;gap:8px;min-width:0;padding:0 6px 0 10px}
.track-search .ic{color:var(--ink-3);flex-shrink:0}
.track-search input{flex:1;border:none;outline:none;background:transparent;padding:10px 0;font-size:15px;letter-spacing:-0.02em;min-width:0;color:var(--ink)}
.track-search input::placeholder{color:var(--ink-4)}
.track-clear{flex-shrink:0;background:none;border:none;color:var(--ink-3);font-size:14px;font-weight:600;padding:8px 10px;cursor:pointer;letter-spacing:-0.02em;border-radius:6px}
.track-clear:hover{color:var(--primary);background:var(--bg-2)}
.track-searchbar{min-width:0;overflow:hidden}
@media(max-width:480px){
  .track-searchbar{gap:0;padding:4px 4px}
  .track-period{min-width:0}
  .track-period .dd-toggle, .track-period select{padding:8px 18px 8px 8px;font-size:13px}
  .track-period::before{display:none}
  .track-search{padding:0 4px 0 6px;min-width:0}
  .track-search input{font-size:13.5px;min-width:0}
  .track-clear{padding:8px 6px;font-size:13px}
  /* 좁은 모바일: placeholder 짧게 — JS에서 처리 */
}
@media(max-width:360px){
  .track-searchbar{flex-wrap:wrap;gap:6px;padding:8px}
  .track-period, .track-search, .track-clear{flex:1 1 auto}
  .track-period{order:1;flex-basis:auto}
  .track-clear{order:3;flex-basis:auto}
  .track-search{order:2;flex-basis:100%}
}

/* 결제 PG 자리 */
.pg-area{text-align:center;padding:60px 20px;background:var(--bg-2);border-radius:var(--r-md);margin:16px 0;border:1px dashed var(--line)}
.pg-area .ic-xl{color:var(--primary);margin-bottom:14px}

/* ===== PPT 2단계: 나만의 발주판 (회원 한정) ===== */
.myboard{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px;margin-bottom:20px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.myboard-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;cursor:pointer;user-select:none}
.myboard-head h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-0.03em;color:var(--ink);display:flex;align-items:center;gap:8px;flex:1}
.myboard-head h3 .ic{color:var(--primary)}
.myboard-head .sub{font-size:14px;color:var(--ink-3);font-weight:500;letter-spacing:-0.02em}
.myboard-head .count-pill{display:inline-flex;align-items:center;justify-content:center;background:var(--primary-l);color:var(--primary);font-size:13px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);letter-spacing:-0.02em;margin-left:4px}
.myboard-toggle{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);font-size:13px;color:var(--ink-2);font-weight:600;letter-spacing:-0.02em;flex-shrink:0;transition:all .12s var(--t)}
.myboard-toggle:hover{border-color:var(--ink-2);color:var(--ink)}
.myboard-toggle .ic{width:14px;height:14px;transform:rotate(90deg);transition:transform .2s var(--t)}

/* 접힘 상태 */
.myboard.collapsed{padding-bottom:20px}
.myboard.collapsed .myboard-head{margin-bottom:0}
.myboard.collapsed .myboard-slide,
.myboard.collapsed .board-cats,
.myboard.collapsed .list-pager,
.myboard.collapsed .myboard-actions{display:none}
.myboard:not(.collapsed) .myboard-toggle .ic{transform:rotate(-90deg)}
.myboard-slide{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px 12px;padding:4px 0 10px}
.myboard-slide .mb-item{cursor:pointer;position:relative}   /* 좌상단 선택 체크(.board-check) 기준점 */
.myboard-slide .mb-item .img{aspect-ratio:1/1;background:#f5f5f5;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:48px;line-height:1;filter:saturate(.95);overflow:hidden;position:relative}
.myboard-slide .mb-item .img img{width:100%;height:100%;object-fit:cover;filter:none;transition:transform .4s var(--t)}
.myboard-slide .mb-item:hover .img img{transform:scale(1.05)}
.myboard-slide .mb-item .name{font-size:13.5px;color:var(--ink);font-weight:500;margin:8px 0 2px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;letter-spacing:-0.02em;min-height:38px}
.myboard-slide .mb-item .price{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-0.03em}
.myboard-slide .mb-item .mb-link{display:block;color:inherit;text-decoration:none}
.myboard-slide .mb-item .in-cart{position:absolute;top:6px;left:6px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;padding:3px 7px;border-radius:var(--r-pill);letter-spacing:-0.02em;z-index:2}
.myboard-slide .mb-item .mb-add{position:absolute;right:6px;bottom:6px;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--primary);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s var(--t);z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.myboard-slide .mb-item .mb-add:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.08)}
.myboard-slide .mb-item .mb-add.done{background:var(--secondary);color:#fff;border-color:var(--secondary)}
.myboard-slide .mb-item .mb-add .ic{width:18px;height:18px;stroke-width:2.5}
/* 발주판 목록 위 카테고리 칩 줄 — 등록 품목을 분류별로 나눠 본다 */
.board-cats{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 12px;border-bottom:1px solid var(--line-2);margin-bottom:12px}
.board-cats .cat-chip{font-size:13.5px;padding:6px 12px}
@media(max-width:599px){.board-cats{gap:5px}.board-cats .cat-chip{font-size:13px;padding:6px 11px}}
.myboard-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.myboard-actions .btn{flex:1;min-width:140px}
/* 발주판 주문 버튼은 «아랫줄 전체 폭» — 옆의 「＋ 품목 추가·정리」와 반씩 나눠 가지면
   긴 문구가 버튼 안에서 두 줄로 감긴다. 주 액션이라 넓은 쪽이 눌리기도 쉽다. (2026-08-31) */
#myboard .myboard-actions .btn-secondary{flex:1 0 100%}
/* 모바일은 버튼을 한 줄씩 — 좁은 폭에서 「발주판 이 수량으로 바로 주문」이 두 줄로 꺾이던 것(2026-08-31 사장님) */
@media(max-width:560px){
  .myboard-actions{flex-direction:column}
  .myboard-actions .btn{width:100%;min-width:0}
}
/* 발주판 섹션은 초록 정체성(제목 별·알약·주문 버튼과 동일) — 주황으로 남아 있던
   「＋ 품목 추가·정리」 테두리 버튼과 개수 알약을 초록으로(2026-08-31 사장님).
   「자주 산 상품」 쪽(#freqboard)은 주황 정체성 그대로 둔다. */
#myboard .count-pill{background:var(--secondary-l);color:var(--secondary-d)}
#myboard .myboard-actions .btn-line{color:var(--secondary-d);border-color:var(--secondary)}
#myboard .myboard-actions .btn-line:hover{background:var(--secondary-l)}
@media(max-width:480px){.myboard-slide{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px 8px}.myboard-slide .mb-item .img{font-size:42px}}

/* ===== 목록 페이지 이동 (PAD.pagerHtml — 한 화면에 다 안 들어가는 목록 공용) ===== */
.list-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;padding:12px 0 2px;border-top:1px solid var(--line-2);margin-top:2px}
.list-pager .pg-btn{display:inline-flex;align-items:center;gap:3px;min-height:38px;padding:0 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);font-size:14px;font-weight:700;color:var(--ink-2);letter-spacing:-0.02em;cursor:pointer;transition:all .12s var(--t)}
.list-pager .pg-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.list-pager .pg-btn:disabled{opacity:.4;cursor:default}
.list-pager .pg-btn .ic{width:14px;height:14px;stroke-width:2.5}
.list-pager .pg-nums{display:flex;align-items:center;gap:4px}
.list-pager .pg-num{min-width:38px;height:38px;padding:0 6px;background:#fff;border:1px solid var(--line);border-radius:var(--r);font-size:14px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:all .12s var(--t)}
.list-pager .pg-num:hover{border-color:var(--primary);color:var(--primary)}
.list-pager .pg-num.active{background:var(--primary);border-color:var(--primary);color:#fff}
.list-pager .pg-info{width:100%;text-align:center;font-size:12.5px;color:var(--ink-3);letter-spacing:-0.02em}
@media(max-width:599px){
  .list-pager{gap:5px}
  .list-pager .pg-btn{padding:0 12px;font-size:13.5px}
  .list-pager .pg-num{min-width:34px;height:36px;font-size:13.5px}
}

/* 담김 버튼 hover = 초록 채움(미담김 버튼의 주황 채움과 대칭) — 전 화면 공통(사장님 지시).
   누르면 +1 도 전 화면 공통(pad.js 위임 핸들러). 터치기기는 hover 없음(기본 규칙의 연초록 유지) */
@media(hover:hover){
  .product-buy.in .product-add:hover,
  .product-buy.in .add-btn:hover{background:var(--secondary);color:#fff;border-color:var(--secondary)}
}

/* ===== 발주판 ===== */
/* 확인 모달 [취소/삭제] 2버튼 줄 — 발주판 밖(주문취소 등)에서도 쓴다 */
.pad-confirm-btns{display:flex;gap:8px;margin-top:4px}
.pad-confirm-btns .btn{flex:1}
/* 품목 찾기 칸 — 발주판은 거래 이력 전량이라 목록이 수백 개인 거래처가 있다(최대 392개).
   지우는 대신 «찾아서 쓰게» 한다. 2026-08-24 발주판이 읽기 전용이 되면서
   옛 「품목추가 모달」(.board-add-*)·「선택 체크」(.board-check) 는 통째로 걷어냈다. */
.board-find{position:relative;margin:0 0 12px}
.board-find input{width:100%;padding:12px 40px 12px 14px;border:1.5px solid var(--line);border-radius:var(--r);font-size:15px;letter-spacing:-0.02em;background:#fff;color:var(--ink)}
.board-find input:focus{outline:none;border-color:var(--primary)}
.board-find input::-webkit-search-cancel-button{cursor:pointer}
.board-find .ic{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.board-find-none{padding:34px 0;text-align:center;color:var(--ink-3);font-size:14px}

/* ===== PPT 2단계: 정기 주문 카드 (상품 상세) ===== */
.subs-card{background:var(--secondary-l);border:1px solid #C7E5D2;border-radius:var(--r-md);padding:18px 20px;margin:20px 0}
.subs-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.subs-card-head h4{font-size:15px;font-weight:800;margin:0;display:flex;align-items:center;gap:8px;letter-spacing:-0.03em;color:var(--secondary-d)}
.subs-toggle{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;cursor:pointer}
.subs-toggle input{position:absolute;opacity:0;width:0;height:0}
.subs-toggle .slider{position:absolute;inset:0;background:var(--line);border-radius:13px;transition:.2s}
.subs-toggle .slider::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.subs-toggle input:checked + .slider{background:var(--secondary)}
.subs-toggle input:checked + .slider::before{transform:translateX(20px)}
.subs-card p{font-size:13px;color:var(--ink-2);margin:0 0 10px;letter-spacing:-0.02em;line-height:1.5}
.subs-card .field-select{margin-top:8px}

/* ===== PPT 2단계: 원클릭 결제 PIN 모달 ===== */
.pin-display{display:flex;gap:12px;justify-content:center;margin:24px 0}
.pin-display .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:#fff;transition:all .12s var(--t)}
.pin-display .dot.filled{background:var(--primary);border-color:var(--primary)}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:300px;margin:0 auto}
.pin-key{padding:18px 0;font-size:22px;font-weight:700;background:var(--bg-2);border:none;border-radius:var(--r);color:var(--ink);cursor:pointer;transition:background .1s var(--t);letter-spacing:-0.02em}
.pin-key:hover{background:var(--line-2)}
.pin-key:active{background:var(--line)}
.pin-key.del{font-size:16px;font-weight:600;color:var(--ink-3)}

/* ===== PPT 1단계: 친근한 인사 카드 ===== */
.greeting-card{background:var(--primary-l);border:1px solid #FFE0CC;border-radius:var(--r-md);padding:18px 22px;margin-bottom:20px;box-shadow:0 2px 6px rgba(255,107,53,.06)}
.greeting-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.greeting-hi{flex:1;min-width:200px}
.greeting-hi b{display:block;font-size:18px;font-weight:800;letter-spacing:-0.03em;color:var(--ink);line-height:1.3}
.greeting-hi p{font-size:14px;color:var(--ink-2);margin:4px 0 0;letter-spacing:-0.02em;font-weight:500}
.greeting-date{font-size:13px;color:var(--ink-3);text-align:right;letter-spacing:-0.02em;flex-shrink:0;line-height:1.4}
.greeting-date b{display:inline-block;color:var(--primary);font-weight:800;font-size:15px;letter-spacing:-0.03em;margin-left:4px}
@media(min-width:768px){
  .greeting-card{padding:22px 28px}
  .greeting-hi b{font-size:20px}
  .greeting-date b{display:block;margin-left:0}
}
/* 모바일: 인사말 / 날짜를 세로로 분리 */
@media(max-width:560px){
  .greeting-card{padding:16px 18px}
  .greeting-row{flex-direction:column;align-items:flex-start;gap:8px}
  .greeting-date{text-align:left;font-size:13px;padding-top:8px;border-top:1px solid rgba(255,107,53,.15);width:100%}
  .greeting-date b{margin-left:4px}
  .greeting-hi b{font-size:17px}
}

/* ===== PPT 1단계: 단골 배지 (자주 시키는 상품) ===== */
.badge.b-regular{background:#E53935;color:#fff}
.badge.b-rec{background:#2D8659;color:#fff}
.product-badges{display:flex;flex-direction:column;gap:4px;align-items:flex-start}

/* ===== PPT 1단계: 도착예정일 라벨 ===== */
.product-eta{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--secondary);font-weight:700;margin-top:6px;letter-spacing:-0.02em;line-height:1.4}
.product-eta.hot{color:var(--primary)}
.product-eta::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* 상세 페이지의 배송 옵션에서 ETA 강조 */
.dopt-eta{font-size:14px;font-weight:700;color:var(--secondary);letter-spacing:-0.02em;display:flex;align-items:center;gap:6px;margin:6px 0 4px}
.dopt-eta.hot{color:var(--primary)}
.dopt-eta::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ===== PPT 1단계: 모달 (더블체크 등) ===== */
.pad-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .2s var(--t)}
.pad-modal.show{opacity:1}
.pad-modal-backdrop{position:absolute;inset:0;background:rgba(17,17,17,.55);backdrop-filter:blur(2px)}
.pad-modal-box{position:relative;background:#fff;border-radius:var(--r-lg);max-width:480px;width:100%;max-height:90vh;overflow-y:auto;overflow-x:hidden;padding:28px 26px;box-shadow:0 20px 50px rgba(0,0,0,.25);transform:scale(.95);transition:transform .2s var(--t);
  scrollbar-width:thin;scrollbar-color:#d8d8d8 transparent}
.pad-modal-box::-webkit-scrollbar{width:6px}
.pad-modal-box::-webkit-scrollbar-track{background:transparent}
.pad-modal-box::-webkit-scrollbar-thumb{background:#d8d8d8;border-radius:3px}
.pad-modal-box::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

/* 우상단 X 닫기 버튼 */
.pad-modal-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;background:none;color:var(--ink-3);cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:3;transition:all .12s var(--t)}
.pad-modal-close:hover{background:var(--bg-2);color:var(--ink)}
.pad-modal-close .ic{width:20px;height:20px;stroke-width:2}
.pad-modal-box.pad-alert-box .pad-modal-close{display:none}

/* 모바일: 풀스크린 모달 */
@media(max-width:560px){
  .pad-modal{padding:0;align-items:stretch}
  .pad-modal-box{max-width:none;max-height:none;width:100%;min-height:100vh;border-radius:0;padding:60px 20px 24px;box-shadow:none}
  /* alert (작은 박스)는 모바일에서도 가운데 작게 유지 */
  .pad-modal{align-items:center;justify-content:center;padding:20px}
  .pad-modal:has(.pad-modal-box.pad-alert-box){padding:20px}
  .pad-modal-box.pad-alert-box{min-height:0;width:auto;max-width:340px;border-radius:var(--r-lg);padding:28px 24px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
  /* 일반 모달만 풀스크린 (alert·주문확인은 제외 — 아래 참조) */
  .pad-modal:not(:has(.pad-modal-box.pad-alert-box)):not(:has(.pad-oc)){padding:0;align-items:stretch}
  .pad-modal:not(:has(.pad-modal-box.pad-alert-box)):not(:has(.pad-oc)) .pad-modal-box{max-width:none;max-height:none;width:100%;min-height:100vh;border-radius:0;padding:60px 20px 24px;box-shadow:none}
  /* 「바로 주문」 확인창은 alert 과 같은 급 — 새 페이지처럼 전체화면으로 덮지 않고 가운데 카드로 */
  .pad-modal:has(.pad-oc){padding:16px;align-items:center;justify-content:center}
  .pad-modal:has(.pad-oc) .pad-modal-box{min-height:0;width:auto;max-width:420px;max-height:86vh;border-radius:var(--r-lg);padding:40px 20px 22px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
}
/* PAD.alert 전용 작은 박스 */
.pad-modal-box.pad-alert-box{max-width:340px;padding:28px 24px;text-align:center}
.pad-alert-msg{font-size:16px;color:var(--ink);letter-spacing:-0.02em;line-height:1.6;margin:0 0 22px;word-break:keep-all}
.pad-modal.show .pad-modal-box{transform:scale(1)}
@media(max-width:480px){.pad-modal-box{padding:24px 20px}}

/* 더블체크 모달 콘텐츠 */
.confirm-head{text-align:center;margin-bottom:20px}
.confirm-head.left{text-align:left}
.confirm-head h2{font-size:20px;font-weight:800;margin:0 0 6px;letter-spacing:-0.03em;color:var(--ink)}
.confirm-head p{font-size:14px;color:var(--ink-3);margin:0;letter-spacing:-0.02em}
.confirm-body{background:var(--bg-2);border-radius:var(--r);padding:18px 20px;margin-bottom:8px}
.confirm-row{display:flex;padding:8px 0;font-size:14px;letter-spacing:-0.02em;align-items:flex-start;gap:12px}
.confirm-row dt{width:72px;color:var(--ink-3);flex-shrink:0;font-weight:500;margin:0}
.confirm-row dd{margin:0;color:var(--ink);font-weight:600;flex:1;min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.confirm-eta{background:var(--primary-l);border:1px solid #FFD7C2;border-radius:var(--r);padding:14px 18px;margin:14px 0;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;color:var(--primary-d);letter-spacing:-0.02em}
.confirm-eta .ic{color:var(--primary);flex-shrink:0}
.confirm-total{display:flex;justify-content:space-between;padding:18px 0 0;margin-top:14px;border-top:2px solid var(--ink);font-size:15px;font-weight:600;align-items:baseline;color:var(--ink)}
.confirm-total b{font-size:24px;font-weight:800;color:var(--primary);letter-spacing:-0.04em}
.confirm-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:8px;margin-top:24px}
.confirm-actions>*{min-width:0}

/* 「바로 주문」 담긴 것 확인 (PAD.orderNow) — 품목·수량·금액 한 장.
   품목이 많아도 버튼이 화면 밖으로 밀리지 않게 목록만 스크롤시킨다. */
.oc-list{background:var(--bg-2);border-radius:var(--r);padding:6px 16px;max-height:42vh;overflow-y:auto;overscroll-behavior:contain}
.oc-row{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;column-gap:12px;padding:10px 0;font-size:14.5px;letter-spacing:-0.02em}
.oc-row+.oc-row{border-top:1px solid var(--line-2)}
.oc-nm{min-width:0;color:var(--ink);font-weight:600;word-break:keep-all;overflow-wrap:anywhere}
.oc-qt{color:var(--ink-3);font-weight:600;white-space:nowrap}
.oc-am{color:var(--ink);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.oc-note{margin:8px 0 0;font-size:13px;color:var(--ink-3);letter-spacing:-0.02em;text-align:right}
/* 좁은 폭에서 「수정할게요」가 2줄로 깨지지 않게 — 버튼 좌우 여백을 줄이고 줄바꿈 금지 */
.pad-oc .confirm-actions{grid-template-columns:1fr 1.3fr}
.pad-oc .confirm-actions .btn{white-space:nowrap;padding-left:10px;padding-right:10px}
@media(max-width:480px){
  .oc-list{padding:4px 14px;max-height:38vh}
  .oc-row{font-size:14px;column-gap:8px}
  .oc-am{min-width:66px}
}

/* ===== Footer ===== */
.footer-main{background:#fff;border-top:1px solid var(--line);margin-top:48px;padding:40px 0 80px;color:var(--ink-2);letter-spacing:-0.02em}
/* 푸터 상단 브랜드 로고 (footer-inner 와 같은 정렬폭) */
.footer-brand-row{max-width:1280px;margin:0 auto 24px;padding:0 20px}
@media(min-width:768px){.footer-brand-row{padding:0 24px}}
@media(min-width:1280px){.footer-brand-row{padding:0 32px}}
.footer-brand-row img{height:30px;width:auto;display:block}
@media(max-width:767px){.footer-main{margin-top:32px;padding:32px 0 100px}}
.footer-inner{max-width:1280px;margin:0 auto;padding:0 20px;display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:768px){.footer-inner{grid-template-columns:1fr 2fr;padding:0 24px;gap:48px}}
@media(min-width:1280px){.footer-inner{padding:0 32px}}

/* 좌측: 고객센터 */
.footer-cs h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:-0.03em}
.footer-cs .tel{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.04em;margin:0 0 4px;line-height:1.1}
.footer-cs .hours{font-size:14px;color:var(--ink-3);margin:0 0 16px}
.footer-cs-btns{display:flex;gap:8px;flex-wrap:wrap}
.footer-cs-btn{flex:1;min-width:100px;padding:10px 14px;border:1px solid var(--line);background:#fff;border-radius:var(--r);font-size:14px;font-weight:600;color:var(--ink-2);text-align:center;cursor:pointer;transition:all .12s var(--t)}
.footer-cs-btn:hover{border-color:var(--primary);color:var(--primary)}

/* 우측: 메뉴/회사 정보 */
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:18px;font-size:14px}
.footer-nav a{color:var(--ink);font-weight:600;transition:color .12s var(--t)}
.footer-nav a:hover{color:var(--primary)}
.footer-corp{font-size:14px;color:var(--ink-3);line-height:1.8}
.footer-corp .row{margin:0}
.footer-corp b{color:var(--ink-2);font-weight:600}
.footer-corp a{color:var(--primary);font-weight:600;border-bottom:1px solid currentColor;margin-left:4px}
/* 모바일: 법인 정보는 숨김 (가독성·공간 확보) */
@media(max-width:767px){.footer-corp{display:none}}

.footer-bottom{max-width:1280px;margin:32px auto 0;padding:24px 20px 0;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-3);text-align:center;line-height:1.7;letter-spacing:-0.02em}
@media(min-width:768px){.footer-bottom{padding:24px 24px 0}}
.footer-bottom p{margin:0;font-size:14px}

/* ===== 사이드 필터 (마켓컬리 스타일) ===== */
.filter-layout{display:grid;gap:24px}
@media(min-width:992px){
  .filter-layout{grid-template-columns:240px 1fr;gap:32px;align-items:start}
  .filter-side{position:sticky;top:calc(var(--header-h) + 24px)}
}

.filter-toggle-mb{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);font-size:14px;font-weight:700;color:var(--ink);width:100%;margin-bottom:16px;transition:all .15s var(--t);letter-spacing:-0.02em}
.filter-toggle-mb:hover{border-color:var(--primary);color:var(--primary)}
.filter-toggle-mb .filter-count-badge{background:var(--primary);color:#fff;border-radius:var(--r-pill);padding:2px 10px;font-size:14px;font-weight:700;margin-left:4px}
@media(min-width:992px){.filter-toggle-mb{display:none}}

.filter-side{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
@media(max-width:991px){.filter-side{display:none;margin-bottom:16px}.filter-side.open{display:block}}

.filter-group{border-bottom:1px solid var(--line-2)}
.filter-group:last-child{border-bottom:none}
.filter-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;cursor:pointer;font-size:15px;font-weight:700;letter-spacing:-0.03em;color:var(--ink);user-select:none;width:100%;background:none;border:none}
.filter-head .ic{color:var(--ink-3);transition:transform .2s var(--t)}
.filter-group.collapsed .filter-head .ic{transform:rotate(-90deg)}
.filter-body{padding:0 20px 16px}
.filter-group.collapsed .filter-body{display:none}

.filter-item{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;font-size:14px;color:var(--ink-2);letter-spacing:-0.02em;font-weight:500;position:relative}
.filter-item:hover{color:var(--ink)}
.filter-item input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
/* 라디오 (가격대 - 단일 선택) */
.filter-check{width:20px;height:20px;border:1.5px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s var(--t);background:#fff}
.filter-item:hover .filter-check{border-color:var(--ink-3)}
.filter-item input:checked ~ .filter-check{background:var(--primary);border-color:var(--primary)}
.filter-item input:checked ~ .filter-check::after{content:"";width:8px;height:8px;background:#fff;border-radius:50%}

/* 체크박스 (배송 방법, 품절 제외 등 - 멀티 선택 / 토글) */
.filter-check-box{width:20px;height:20px;border:1.5px solid var(--line);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s var(--t);background:#fff;position:relative}
.filter-item:hover .filter-check-box{border-color:var(--ink-3)}
.filter-item input:checked ~ .filter-check-box{background:var(--primary);border-color:var(--primary)}
.filter-item input:checked ~ .filter-check-box::after{content:"";width:5px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-1px,-2px)}
.filter-item-text{flex:1}
.filter-item input:checked ~ .filter-item-text{color:var(--ink);font-weight:700}
.filter-item-count{color:var(--ink-3);font-weight:500;font-size:14px}

.filter-clear{display:block;width:100%;padding:14px;text-align:center;font-size:14px;font-weight:600;color:var(--ink-3);background:var(--bg-2);transition:color .12s var(--t);letter-spacing:-0.02em;border:none;border-top:1px solid var(--line)}
.filter-clear:hover{color:var(--primary)}

.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center}
.active-filter-chip{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;background:var(--primary-l);color:var(--primary);border-radius:var(--r-pill);font-size:14px;font-weight:700;letter-spacing:-0.02em}
.active-filter-chip button{color:var(--primary);display:flex;align-items:center;margin-left:4px;padding:2px;border-radius:50%;transition:background .12s var(--t)}
.active-filter-chip button:hover{background:rgba(255,107,53,.15)}

.list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.list-head .count-txt{font-size:14px;color:var(--ink-3);font-weight:500;letter-spacing:-0.02em}
.list-head .count-txt b{color:var(--ink);font-weight:800;font-size:16px}

/* 정렬 탭 — 마켓컬리 스타일 (텍스트 + 구분선) */
.sort-tabs{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.sort-tab{padding:6px 14px;color:var(--ink-3);background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;letter-spacing:-0.02em;transition:color .12s var(--t);position:relative;line-height:1.4}
.sort-tab:hover{color:var(--ink)}
.sort-tab.active{color:var(--ink);font-weight:800}
.sort-tab + .sort-tab::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:var(--line)}
.sort-tab:first-child{padding-left:0}
.sort-tab:last-child{padding-right:0}
/* 모바일: 좁은 폭 대응 — 가로 스크롤 + 패딩 줄임 */
@media(max-width:480px){
  .sort-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .sort-tabs::-webkit-scrollbar{display:none}
  .sort-tab{padding:6px 10px;flex-shrink:0;white-space:nowrap}
}
/* flatpickr css */
/* 캘린더 카드 */
.flatpickr-calendar{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-hover);
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after{
  display:none; /* 말풍선 꼬리 제거 → 카드형 */
}

/* 연도 네비게이션 */
.flatpickr-months{
  position:relative;
  padding:8px 16px 8px;
  border-bottom:1px solid var(--line-2);
}
.flatpickr-current-month{
    padding:4.48px 0 0 0;
  font-size:var(--fs-xl);
  font-weight:700;
  color:var(--ink);
}
.flatpickr-prev-month,
.flatpickr-next-month{
  width:32px; height:32px;
  border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-2);
  transition:background .15s var(--t), color .15s var(--t);
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover{
  background:var(--primary-l);
  color:var(--primary);
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg{ fill:currentColor; }

/* 월 그리드 */
.flatpickr-monthSelect-months{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:4px 16px 16px;
}
.flatpickr-monthSelect-month{
    width:100%;
  padding:10px 0;
  border-radius:var(--r-md);
  /* border:1px solid var(--line);
  background:var(--bg-2); */
  font-size:var(--fs-md);
  font-weight:500;
  color:var(--ink-2);
  text-align:center;
  cursor:pointer;
  transition:background .15s var(--t), color .15s var(--t), border-color .15s var(--t), transform .1s var(--t);
}
.flatpickr-monthSelect-month:hover{
  background:var(--primary-l);
  border-color:var(--primary-l);
  color:var(--primary-d);
}
.flatpickr-monthSelect-month:active{
  transform:scale(.97);
}

/* 오늘이 속한 달 (현재 조회 중인 달) */
.flatpickr-monthSelect-month.today{
    color:var(--primary);
    font-weight:700;
    border-color:#fff;
    /* 
  background:var(--primary); */
}

/* 선택된 달 */
.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.startRange,
.flatpickr-monthSelect-month.endRange,
.flatpickr-monthSelect-month.inRange{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  font-weight:700;
}

.flatpickr-monthSelect-month.flatpickr-disabled{
  color:var(--ink-4);
  background:var(--bg);
  border-color:var(--line);
  cursor:not-allowed;
}

/* 하단 초기화 / 이번 달 링크 */
.flatpickr-monthSelect-months + div,
.monthSelect-footer,
.flatpickr-calendar .footer{
  display:flex;
  justify-content:center;
  gap:16px;
  padding:10px 16px 14px;
  border-top:1px solid var(--line-2);
  font-size:var(--fs-sm);
  color:var(--ink-3);
}
.flatpickr-calendar .footer button,
.flatpickr-calendar .footer a{
  color:var(--ink-2);
  font-weight:500;
  transition:color .15s var(--t);
}
.flatpickr-calendar .footer button:hover,
.flatpickr-calendar .footer a:hover{
  color:var(--primary);
}

.flatpickr-rContainer {
    width:100%;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    top:50%;
    transform:translateY(-50%);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
    left:10px;
}
.flatpickr-months .flatpickr-next-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
    right:10px;
}
.flatpickr-current-month .numInputWrapper {
    width: auto;
}
.flatpickr-current-month input.cur-year {
    padding:0;
    text-align:center; 
    font-size: 19px;
    font-weight: 500;
}
.numInputWrapper:hover {
    background: #fff !important;
}
/* .fp-footer {
    padding: 10px 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid var(--line-2);
} */
 .fp-footer{
  padding:10px 12px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:8px;
  border-top:1px solid var(--line-2);
}

.fp-footer button{
  font-size:var(--fs-sm);
  font-weight:600;
  border-radius:var(--r-pill);
  padding:7px 16px;
  transition:background .15s var(--t), color .15s var(--t), transform .1s var(--t);
}

/* 초기화 — 보조 액션, 텍스트 톤 */
.fp-btn-clear{
  color:var(--ink-3);
  background:transparent;
}
.fp-btn-clear:hover{
  color:var(--ink);
  background:var(--bg-2);
}

/* 이번 달 — 자주 쓰는 단축 액션, 브랜드 톤으로 강조 */
.fp-btn-today{
  color:var(--primary-d);
  background:var(--primary-l);
}
.fp-btn-today:hover{
  background:var(--primary);
  color:#fff;
}
.fp-btn-today:active,
.fp-btn-clear:active{
  transform:scale(.96);
}

/* ============================================================
   모바일 화면 확대(줌) 차단 — 파일 맨 끝(뒤에 오는 규칙에 지지 않도록)
   ------------------------------------------------------------
   화면이 갑자기 "당겨지는" 원인이 두 가지라 둘 다 막는다.

   ① 더블탭 확대
      html,body 에만 touch-action 을 걸면 overflow:auto 인 하위 스크롤 영역
      (카테고리 칩바·추천 가로스크롤 등) 안에서는 적용이 새어나가 그 위에서
      더블탭하면 확대된다 → 전체 요소에 건다.
      ※ manipulation 은 '더블탭 확대'만 막고 두 손가락 핀치 확대는 살려둔다.
        (핀치까지 막으면 눈 안 좋으신 분이 확대를 못 함 — 접근성상 막지 않는다)

   ② iOS 입력칸 포커스 확대
      iOS 사파리는 input 글씨가 16px 미만이면 탭하는 순간 화면을 확대하고
      스스로 되돌리지 않는다. 확대된 채로 남아 "화면이 당겨진" 상태가 된다.
      터치 기기에서만 16px로 올려 원천 차단(데스크톱 디자인은 그대로).
      개별 화면 규칙(.field-input 15px, .qty input 13px 등)을 전부 덮어야 하므로
      !important 사용 — 기기 안전장치 성격이라 예외로 둔다.
   ============================================================ */
*{touch-action:manipulation}

/* pointer:coarse 만으로는 새는 기기가 있어(데스크톱 모드 요청한 태블릿 등) 화면폭 조건을 함께 건다.
   ※ 검색 화면은 열자마자 입력칸에 자동 포커스가 걸려서, 16px 미만이면 페이지가 뜨는 순간 확대된다. */
@media (pointer:coarse), (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,
  textarea{font-size:16px !important}
  /* 16px로 커진 만큼 좁은 입력칸은 폭을 넓혀 숫자가 잘리지 않게 */
  .qty input{width:46px}
  .track-search input{min-width:0}
}