/* =========================================================
   나눔소프트 Design System  (실측 브랜드 컬러 #DB0E64 기반)
   모든 페이지 공용 — assets/nanum.css
   ========================================================= */

/* ---------- 디자인 토큰 ---------- */
:root{
  --red:#DB0E64;           /* 브랜드 메인 (실측: 텍스트·배경·로고 fill 3중 확인) */
  --red-dark:#B40B52;      /* 브랜드 딥 톤 */
  --red-tint:#FCE4EF;      /* 브랜드 연한 틴트 */
  --orange:#EB6100;        /* 액센트 오렌지 (실측: 프로모 요소) */
  --ink:#111111;           /* 기본 텍스트 */
  --ink-2:#444444;         /* 보조 텍스트 */
  --gray:#6B707A;          /* 약한 텍스트 (WCAG AA 4.5:1 충족 — 기존 #8A8F99는 흰배경 3.25:1로 미달이었음) */
  --line:#E4E7EC;          /* 구분선 (실측: 최빈 회색) */
  --bg:#F2F4F7;            /* 페이지/섹션 배경 (실측) */
  --white:#FFFFFF;
  /* 표면 — 카드·헤더·입력칸처럼 "페이지 위에 얹히는 면". 예전엔 #fff 를 51곳에 직접 적어
     다크모드에서 한 번에 바꿀 수가 없었다. 값은 이 토큰 하나만 갈아끼우면 된다. */
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;     /* 표면 위 한 단 더 눌린 면(입력칸·비활성 행) */
  /* 어두운 칩 바탕 — 등급·순위 배지, 띠배너처럼 "짙은 면에 흰 글자"인 자리.
     --ink(글자색)와 같은 값이지만 쓰임이 달라 토큰을 나눈다: 다크에서 --ink 는 밝아지고
     이쪽은 어두운 채로 남아야 흰 글자가 계속 읽힌다. */
  --ink-fill:#111111;
  --yellow:#FFB800;        /* 쿠폰 포인트 */
  --star-off:#DDE1E6;      /* 별점 미선택 */
  --kakao:#FEE500;         /* 소셜 브랜드 (하드코딩 제거) */
  --kakao-ink:#191600;
  --naver:#03C75A;
  --blue:#1665B3;          /* 링크/무료배송 (WCAG AA 4.5:1 충족 — 기존 #1E7FE0는 흰배경 4.06:1로 미달이었음) */
  --radius:12px;
  --radius-s:8px;
  --shadow:0 2px 12px rgba(0,0,0,.06);
  --shadow-lg:0 20px 50px rgba(0,0,0,.3);
  --app-w:500px;           /* 모바일 앱 최대폭 */
}

/* ---------- 리셋 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
ul,ol{list-style:none}
img{display:block;max-width:100%}
em{font-style:normal}
table{border-collapse:collapse;width:100%}

/* ---------- 접근성 / 입력 품질 (전 페이지 공통) ---------- */
html{scroll-behavior:smooth}
*{-webkit-tap-highlight-color:rgba(219,14,100,.15)}
a,button,input,select,textarea,[tabindex]{outline:none}
a:focus-visible,button:focus-visible,.chip:focus-visible,.btn:focus-visible,
label.check:focus-within,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- 앱 컨테이너 ---------- */
.app{
  max-width:var(--app-w);margin:0 auto;background:var(--surface);
  min-height:100vh;box-shadow:0 0 40px rgba(0,0,0,.05);
  position:relative;overflow-x:hidden;
}
.pad{padding:16px}
.pb-tab{padding-bottom:80px}   /* 하단 탭바 여백 */

/* =========================================================
   헤더 / GNB
   ========================================================= */
.header{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line)}
.header__top{display:flex;align-items:center;gap:12px;padding:12px 16px 10px}
.logo{display:flex;align-items:center;gap:6px;font-weight:900;font-size:22px;letter-spacing:-1px}
.logo .box{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 8px;background:var(--red);color:#fff;border-radius:7px;font-size:13px;font-weight:900;letter-spacing:.4px}
.logo b{color:var(--red)}
.header__spacer{flex:1}
.icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:20px;position:relative}
.icon-btn .dot{position:absolute;top:4px;right:4px;min-width:7px;height:7px;padding:0 3px;background:var(--red);border-radius:20px;color:#fff;font-size:9px;line-height:7px;font-weight:700}

/* 뒤로가기형 서브 헤더 */
.subhead{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:12px 12px}
.subhead .back{font-size:22px;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.subhead .title{flex:1;font-size:17px;font-weight:800;text-align:center;margin-right:32px}
.subhead .act{display:flex;gap:6px}
.subhead .act .icon-btn{font-size:19px}

/* 검색바 */
.searchbar{padding:0 16px 12px}
.searchbar__inner{display:flex;align-items:center;gap:8px;border:2px solid var(--red);border-radius:24px;padding:9px 14px}
.searchbar input{flex:1;border:none;outline:none;font-size:14px;background:transparent}
/* [2026-09-03] 검색 실행 버튼이 25px라 WCAG 2.2 2.5.8(최소 24x24) 경계였고 누르기도 좁았음 — 44px 확보 */
.searchbar__go{color:var(--red);font-size:18px;font-weight:700;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* 헤더 보조 링크(로그인·회원가입)와 GNB 항목도 세로 여백을 줘 터치 영역 확보 */
.utilbar .join,.utilbar .login,.header__top .join,.header__top .login{display:inline-flex;align-items:center;min-height:32px;padding:0 6px}
.gnb a{display:inline-flex;align-items:center;min-height:36px}

.utilbar{display:flex;justify-content:flex-end;gap:14px;align-items:center;padding:0 16px 8px;font-size:12px;color:var(--gray)}
.utilbar .tel{font-weight:700;color:var(--ink)}
.utilbar .join{color:var(--red);font-weight:700}

.gnb{border-top:1px solid var(--line)}
.gnb__scroll{
  display:flex;gap:18px;overflow-x:auto;padding:12px 16px;scrollbar-width:none;
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)),
    linear-gradient(to left, var(--white) 30%, rgba(255,255,255,0)) 100% 0,
    linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0)),
    linear-gradient(to left, rgba(0,0,0,.10), rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;
  background-color:var(--surface);
  background-size:24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment:local, local, scroll, scroll;
}
.gnb__scroll::-webkit-scrollbar{display:none}
.gnb a{white-space:nowrap;font-size:15px;font-weight:600;color:var(--ink-2);padding-bottom:2px}
.gnb a.active{color:var(--red);border-bottom:2px solid var(--red)}
.gnb a .flag{color:var(--red);font-size:10px;vertical-align:top;margin-left:2px}

/* =========================================================
   버튼
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:44px;padding:0 18px;border-radius:var(--radius-s);font-size:15px;font-weight:700;
  background:var(--bg);color:var(--ink);transition:.15s}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--red);color:#fff}
.btn--dark{background:var(--ink-fill);color:#fff}
.btn--line{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.btn--line-red{background:var(--surface);border:1px solid var(--red);color:var(--red)}
.btn--block{width:100%;display:flex}
.btn--lg{height:52px;font-size:16px}
.btn--sm{height:34px;font-size:13px;padding:0 12px}
.btn:disabled{background:var(--line);color:var(--gray);cursor:not-allowed}

/* =========================================================
   폼
   ========================================================= */
.field{margin-bottom:18px}
.field > label,.label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;color:var(--ink-2)}
.label .req{color:var(--red);margin-left:2px}
.input,.select,.textarea{
  width:100%;height:48px;border:1px solid var(--line);border-radius:var(--radius-s);
  padding:0 14px;font-size:15px;background:var(--surface);outline:none;transition:.15s}
.textarea{height:auto;min-height:100px;padding:12px 14px;resize:vertical}
/* select가 텍스트 입력창과 스타일이 똑같아 "펼쳐진다"는 신호가 전혀 없었음 — 화살표 인디케이터 추가 */
.select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B707A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--red)}
.input::placeholder{color:var(--gray)}
.input-group{display:flex;gap:8px}
.input-group .input{flex:1}
.help{font-size:12px;color:var(--gray);margin-top:6px}
.help.err{color:var(--red)}

.check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;user-select:none}
.check input{width:20px;height:20px;accent-color:var(--red)}
.check.all{font-weight:700;font-size:15px}

/* 수량 스텝퍼 */
/* 스텝퍼 버튼이 38px로 모바일 권장 터치 타겟(44px)보다 작았음 — 44px로 확대 */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden}
.stepper button{width:44px;height:44px;font-size:18px;background:var(--surface)}
.stepper span{min-width:44px;text-align:center;font-weight:700;font-size:15px;border-left:1px solid var(--line);border-right:1px solid var(--line);height:44px;line-height:44px}
/* 삭제(✕) 아이콘 버튼이 색 지정 없이 기본 톤이라 눈에 잘 안 띄고 삭제라는 신호도 약했음 */
.icon-btn[data-remove]{color:var(--gray);transition:color .12s ease}
.icon-btn[data-remove]:hover,.icon-btn[data-remove]:active{color:var(--red)}

/* =========================================================
   배지 / 태그 / 칩
   ========================================================= */
.badge{display:inline-block;font-size:10px;font-weight:800;padding:3px 7px;border-radius:5px;background:var(--bg);color:var(--ink-2)}
.badge--red{background:var(--red);color:#fff}
.badge--tint{background:var(--red-tint);color:var(--red-dark)}
.badge--dark{background:var(--ink-fill);color:#fff}
.tag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px}
/* "무료배송"은 배송조건(실용정보), "당당"류는 캠페인명(마케팅) — 같은 무게로 나열돼 구분이 안 됐음.
   배송조건은 중립 톤으로 낮추고 캠페인 태그만 브랜드 컬러를 유지해 중요도를 차등화 */
.tag.free{background:var(--bg);color:var(--ink-2)}
.tag.dan{background:var(--red-tint);color:var(--red-dark)}
.tag.new{background:#EAFBF0;color:#0C7D38}
/* 랭킹 순위변동(▲▼) 배지가 .tag.new(원래 "신상품")·.tag.free(원래 "무료배송")를 색만 빌려쓰고 있어서
   사이트 다른 곳에서 학습한 태그 의미와 충돌했음 — 시세·주문상태에서 이미 쓰는 상승/하락 색(--red/--blue)에
   맞춘 전용 클래스로 분리 */
.tag.up{background:#FDECEC;color:var(--red)}
.tag.down{background:#EAF4FF;color:var(--blue)}

/* 랭킹 TOP3: 배지 크기 차이뿐이라 가장 사회적 증거가 강한 구간의 존재감이 약했음 — 옅은 브랜드 틴트로 구분 */
/* 랭킹 순위변동 배지 — 직전 기간 대비 상승(▲)·하락(▼)·유지(–)·신규(NEW).
   비교할 직전 기간이 없으면 아예 그리지 않으므로 "변동 없음"과 "비교 불가"가 섞이지 않는다 */
.rk-legend{margin-left:auto;color:var(--gray);font-size:11px;font-weight:600}
.rk-chg{align-self:center;flex-shrink:0;margin-left:8px;min-width:44px;text-align:center;font-size:12px;font-weight:700;padding:4px 8px;border-radius:20px;background:var(--bg);color:var(--gray);font-variant-numeric:tabular-nums}
.rk-chg.up{background:#FDECEC;color:var(--red)}
.rk-chg.down{background:#EAF4FF;color:var(--blue)}
.rk-chg--new{background:var(--ink-fill);color:#fff;letter-spacing:.3px}
.prow.rk-top{background:linear-gradient(90deg,var(--red-tint) 0%,rgba(252,228,239,0) 60%)}

/* 참여방법 같은 순서 안내가 번호 텍스트만 있어 가이드보다 문단처럼 읽혔음 — 원형 숫자 스텝 */
.step-list{counter-reset:step;display:flex;flex-direction:column;gap:10px;padding-left:0}
.step-list li{counter-increment:step;position:relative;padding-left:32px;font-size:13px;color:var(--ink-2);line-height:1.6}
.step-list li::before{content:counter(step);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:var(--red);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.step-list li:not(:last-child)::after{content:"";position:absolute;left:10px;top:24px;bottom:-10px;width:2px;background:var(--line)}

/* 가로스크롤 칩 목록에 스크롤 가능 힌트가 전혀 없어서(카테고리/정렬/필터 칩 등 사이트 전역) 화면 폭을
   넘는 칩이 있어도 사용자가 더 있다는 걸 알아채기 어려웠음 — 스크롤 위치에 따라 자동으로 나타나고
   사라지는 순수 CSS 그림자(스크롤 다한 쪽은 안 보임)를 전역 컴포넌트에 한 번만 적용 */
.chips{
  display:flex;gap:8px;overflow-x:auto;padding:12px 16px;scrollbar-width:none;
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)),
    linear-gradient(to left, var(--white) 30%, rgba(255,255,255,0)) 100% 0,
    linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0)),
    linear-gradient(to left, rgba(0,0,0,.10), rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;
  background-color:var(--surface);
  background-size:24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment:local, local, scroll, scroll;
}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;padding:8px 14px;border:1px solid var(--line);border-radius:20px;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface)}
.chip.on{background:var(--ink-fill);color:#fff;border-color:var(--ink)}
/* 최근 검색어 전체삭제는 링크가 아니라 실제 동작하는 버튼이라 button 으로 바꿈 — 폰트·커서를 칩과 동일하게 */
button.chip{font-family:inherit;cursor:pointer;line-height:1.2}

/* 상품 상세 배송·반품 안내표 — 항목명 열을 좁게 고정해 값이 읽히도록 */
.pd-ship th{width:88px;white-space:nowrap;color:var(--gray);font-weight:700;font-size:13px;vertical-align:top;text-align:left}
.pd-ship td{font-size:13px;line-height:1.65;color:var(--ink-2)}
/* data-toast="준비 중" 칩(예: 찜 폴더추가·검색 상세필터)이 실제 동작하는 칩과 스타일이 완전히 같아서
   눌러보기 전엔 "아직 안 되는 기능"이라는 걸 알 방법이 없었음 — 점선+옅은 톤으로 미리 신호를 줌 */
.chip--soon{color:var(--gray);border-style:dashed;background:var(--bg)}

/* =========================================================
   상품 카드
   ========================================================= */
.plist{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.plist::-webkit-scrollbar{display:none}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}

.pcard{min-width:150px;width:150px}
.pgrid .pcard{min-width:0;width:100%}
.pcard .thumb{width:100%;aspect-ratio:1/1;border-radius:var(--radius);background:var(--bg);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:44px}
.plist .pcard{flex:0 0 auto;width:150px}
.plist.drag{cursor:grab}
.plist.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.plist.dragmoved a{pointer-events:none}
.plist .pcard .thumb{width:150px;height:150px;aspect-ratio:auto}
.pcard .rank{position:absolute;top:0;left:0;background:var(--ink-fill);color:#fff;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;border-bottom-right-radius:10px}
/* 하트가 흰 텍스트+그림자뿐이라 흰 배경 썸네일에선 거의 안 보이고 버튼으로 인지되지도 않았음 —
   원형 배경을 깔아 어떤 썸네일 배경에서도 일관되게 도드라지게 하고 터치 타겟도 함께 확보 */
.pcard .heart{position:absolute;bottom:8px;right:8px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 5px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--ink-2);text-shadow:none;cursor:pointer}
/* 실 상품 이미지: .thumb 안에 이모지 위로 오버레이. 로드 실패 시 JS가 제거 → 이모지 폴백 */
.thumb{position:relative;overflow:hidden}
.thumb .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--bg);z-index:0}
/* 실사진 없을 때 임시 플레이스홀더 (순수 흰 배경 + 이모지 입체감). 실이미지 오면 .thumb-img가 위를 덮음 */
.thumb.ph-done{background:var(--surface);text-shadow:0 6px 14px rgba(0,0,0,.10)}
.pcard .brand{font-size:11px;color:var(--gray);margin-top:10px}
.pcard .name{font-size:13.5px;font-weight:600;margin-top:3px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:38px}
.pcard .price{margin-top:6px;display:flex;align-items:center;gap:5px}
.pcard .price .off{color:var(--red);font-weight:800;font-size:15px}
.pcard .price .won{font-weight:800;font-size:16px}
.pcard .price .won small{font-size:12px;font-weight:600}
.pcard .unit{font-size:11px;color:var(--gray);margin-top:2px}
.pcard .tags{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.pcard .thumb .grade{position:absolute;top:6px;left:6px;background:var(--ink-fill);color:#fff;font-size:10px;font-weight:800;line-height:1.5;padding:1px 7px;border-radius:6px;z-index:1}
.pcard .thumb .grade.hi{background:var(--red)}

/* 품절 카드: 기존엔 category.html이 인라인 스타일로 반투명 오버레이만 덧그려서 가격 텍스트는 여전히 선명하고
   하트도 눌리는 것처럼 보였음 — 썸네일 흑백처리+오버레이+가격 톤다운+하트 숨김을 공용 클래스 하나로 처리 */
.pcard.sold-out .thumb{filter:grayscale(1)}
.pcard.sold-out .thumb::after{content:"품절";position:absolute;inset:0;background:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--ink);z-index:3}
.pcard.sold-out .name,.pcard.sold-out .unit,.pcard.sold-out .price .won{color:var(--gray)}
.pcard.sold-out .price .off{color:var(--gray)}
.pcard.sold-out .heart{display:none}
.tag.trace{background:#F1EEFB;color:#6D4AC0}
.tag.grade-tag{background:var(--ink-fill);color:#fff}
.tag.grade-tag.hi{background:var(--red)}
.prow-tags{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.trust-banner{display:flex;align-items:center;gap:10px;margin:12px 16px 0;padding:12px 14px;background:var(--red-tint);border:1px solid var(--line);border-radius:var(--radius)}
.trust-banner .tb-ico{font-size:22px;flex-shrink:0}
.trust-banner .tb-txt{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.trust-banner .tb-txt b{font-size:13px;font-weight:800;color:var(--ink)}
.trust-banner .tb-txt small{font-size:11px;color:var(--ink-2);margin-top:2px}
.trace-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.trace-modal .tm-card{background:var(--surface);border-radius:var(--radius);max-width:360px;width:100%;padding:20px;max-height:82vh;overflow:auto}
.trace-modal .tm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.trace-modal .tm-head h4{font-size:16px;font-weight:800;margin:0}
.trace-modal .tm-close{font-size:22px;color:var(--gray);background:none;border:0;cursor:pointer;line-height:1}
.trace-modal .tm-no{font-size:15px;font-weight:800;letter-spacing:.5px;margin-bottom:12px}
.trace-modal .tm-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.trace-modal .tm-row .k{color:var(--gray);flex-shrink:0}
.trace-modal .tm-row .v{font-weight:600;text-align:right}
.oh-trace{display:inline-block;margin-top:6px;font-size:11px;color:var(--red-dark);background:var(--red-tint);padding:2px 8px;border-radius:6px;cursor:pointer}
.oh-trace:active{opacity:.7}

/* 리스트형(가로) 상품 행 */
.prow{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.prow .thumb{width:90px;height:90px;border-radius:var(--radius-s);background:var(--bg);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:34px;position:relative}
.prow .info{flex:1;min-width:0}
.prow .info .brand{font-size:11px;color:var(--gray)}
.prow .info .name{font-size:14px;font-weight:600;margin-top:2px}
/* [2026-09-15 BR-055] 상품명처럼 서버에서 오는 글자는 공백이 하나도 없는 긴 덩어리일 수 있다.
   그런 문자열은 줄바꿈 지점이 없어 말줄임(-webkit-line-clamp)이 걸려 있어도 가로로 칸을 넘쳐
   옆 요소를 밀어내거나 표를 찢는다. 극단 데이터로 확인한 지점들에 줄바꿈 허용을 준다.
   (일반 한글·영문 문장은 기존대로 단어 단위로 끊긴다 — anywhere 는 끊을 데가 없을 때만 개입한다) */
.pcard .name,.prow .info .name,.rv-name,
.table td,.table th,.dtable td,.dtable th,
[data-pd-name],.ev-name,.iq-h,.dc-title,
.slide h2,.slide p,.slide small,[data-filter-item],
.oh-item .name,.summary .row span{overflow-wrap:anywhere}
.prow .info .price{margin-top:6px}
.prow .info .price .off{color:var(--red);font-weight:800;margin-right:5px}
.prow .info .price .won{font-weight:800;font-size:16px}

/* =========================================================
   섹션 / 히어로 / 배너
   ========================================================= */
.section{background:var(--surface);margin-top:10px;padding:22px 16px}
.section--flat{margin-top:0}
.section__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.section__head h2,.section__head h3{font-size:19px;font-weight:900;letter-spacing:-.5px}
.section__head h2 em,.section__head h3 em{color:var(--red)}
.section__head a{font-size:13px;color:var(--gray)}

.hero{position:relative;overflow:hidden}
.hero__track{display:flex;align-items:stretch;transition:transform .45s ease}
.slide{min-width:100%;height:180px;color:#fff;position:relative;display:flex;flex-direction:column;justify-content:center;padding:28px 24px}
.slide.s1{background:linear-gradient(120deg,#DB0E64,#8E0940)}
.slide.s2{background:linear-gradient(120deg,#2B2B2B,#555)}
.slide.s3{background:linear-gradient(120deg,#EB6100,#C0450A)}
/* 기획전 배너가 s1~s3 3종뿐이라 4개를 나열하면 1번과 4번 색이 똑같아 서로 다른 기획전인데 구분이 안 됐음 */
.slide.s4{background:linear-gradient(120deg,#1F5F4B,#0E3A2C)}
.slide small{font-size:12px;opacity:.85;font-weight:600;letter-spacing:1px}
.slide h2{font-size:26px;font-weight:900;margin-top:6px;line-height:1.25;letter-spacing:-.5px}
.slide p{font-size:13px;margin-top:8px;opacity:.9}
/* 배너 — 히어로 배경 이미지와 띠배너(메인 띠배너·카테고리 상단·장바구니 하단 공용) */
.slide__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
/* [2026-09-17] 홈 히어로 — 사진만 크게 띄우던 것을 "왼쪽 사진 · 오른쪽 설명/가격"으로 바꾼다.
   기존 .slide(세로 텍스트형)는 기획전 화면이 그대로 쓰므로 건드리지 않고, 홈에서만 --split 을 얹는다.
   사진이 없는 배너(가입 혜택·공지처럼 보여줄 제품이 없는 경우)는 --text 로 글자 위주로 넓게 쓴다. */
.slide--split{flex-direction:row;align-items:center;gap:16px;height:auto;min-height:200px;padding:20px}
.slide__media{flex:0 0 40%;max-width:170px;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
  background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:44px}
.slide__img{width:100%;height:100%;object-fit:cover;display:block}
.slide__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.slide__eyebrow{font-size:11.5px;opacity:.85;font-weight:700;letter-spacing:.6px}
.slide__title{font-size:19px;font-weight:900;margin-top:5px;line-height:1.3;letter-spacing:-.3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slide__desc{font-size:12.5px;margin-top:6px;opacity:.9;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slide__price{margin-top:9px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.slide__off{font-size:15px;font-weight:900}
.slide__won{font-size:20px;font-weight:900;letter-spacing:-.3px}
.slide__list{font-size:12px;opacity:.72;text-decoration:line-through}
.slide__cta{display:inline-flex;align-items:center;align-self:flex-start;margin-top:11px;min-height:24px;
  padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.4);font-size:12px;font-weight:800}

/* 보여줄 제품이 없는 배너 — 사진 칸을 빼고 글자를 키운다 */
.slide--text{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;height:auto;min-height:200px}
.slide--text .slide__title{font-size:25px;-webkit-line-clamp:3}
.slide--text .slide__desc{font-size:13.5px;-webkit-line-clamp:3;max-width:34ch}

/* 화면이 아주 좁으면 사진을 조금 줄여 글자 자리를 지킨다 */
@media (max-width:380px){
  .slide--split{gap:12px;padding:16px}
  .slide__media{flex-basis:34%}
  .slide__title{font-size:17px}
  .slide__won{font-size:18px}
}
/* 데스크톱에서는 사진을 키우고 글자도 한 단 올린다 */
@media (min-width:768px){
  .slide--split{min-height:260px;gap:28px;padding:28px max(32px, calc((100% - 1120px) / 2))}
  .slide--text{padding:28px max(32px, calc((100% - 1120px) / 2))}
  .slide__media{max-width:230px}
  .slide__title{font-size:24px}
  .slide__desc{font-size:14px}
  .slide__won{font-size:26px}
  .slide--text .slide__title{font-size:32px}
}
.bstrip{display:flex;flex-direction:column;gap:8px;padding:12px 16px}
.bstrip__item{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;min-height:64px;padding:12px 14px;border-radius:var(--radius-s);background:var(--ink-fill);color:#fff}
.bstrip__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.bstrip__item>b{position:relative;font-size:14px;font-weight:800;line-height:1.35;flex:1}
.bstrip__go{position:relative;font-size:12px;font-weight:700;opacity:.9;flex-shrink:0}
.hero__count{position:absolute;right:16px;bottom:14px;background:rgba(0,0,0,.4);color:#fff;font-size:12px;padding:3px 10px;border-radius:20px}
/* 반투명 흰색이라 슬라이드 배경색(핑크/회색/오렌지)마다 대비가 들쭉날쭉했음 — 어두운 배경+흰 테두리로 고정 */
.hero__nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.55);border-radius:50%;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center}
.hero__nav.prev{left:10px}
.hero__nav.next{right:10px}
/* [2026-09-17] 홈 히어로는 사진·글자가 좌우로 꽉 차서, 가운데 높이에 뜬 좌우 화살표가
   사진과 본문 위를 덮었다. 홈에서만 조작 버튼을 오른쪽 아래로 모아 내용과 겹치지 않게 한다.
   (기획전 화면의 히어로는 배경 사진 위 글자라 기존 위치가 그대로 자연스러워 건드리지 않는다) */
.hero--compactnav .hero__nav{top:auto;bottom:12px;transform:none;width:30px;height:30px;font-size:16px}
.hero--compactnav .hero__nav.prev{left:auto;right:104px}
.hero--compactnav .hero__nav.next{right:68px}
.hero--compactnav .hero__count{right:16px;bottom:14px}
/* 버튼과 겹치지 않도록 본문 아래쪽에 자리를 둔다 */
.hero--compactnav .slide{padding-bottom:52px}

.promo{margin:16px;background:linear-gradient(100deg,#1A1A1A,#3a3a3a);border-radius:var(--radius);color:#fff;padding:18px 20px;display:flex;align-items:center;gap:14px}
.promo .badge{background:var(--yellow);color:#1A1A1A}
.promo b{font-size:16px}
.promo small{display:block;opacity:.75;font-size:12px;margin-top:2px}
.promo .arrow{margin-left:auto;font-size:20px}

/* 카테고리 아이콘 그리드 */
.quickmenu{background:var(--surface);padding:20px 8px 8px}
.quickmenu .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 4px}
.qm{display:flex;flex-direction:column;align-items:center;gap:8px}
.qm .ic{width:54px;height:54px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:26px}
.qm span{font-size:12.5px;color:var(--ink-2);font-weight:500}
.qm.hot .ic{background:var(--red-tint)}

/* =========================================================
   테이블(시세/주문 등)
   ========================================================= */
.table{font-size:13px}
.table th{text-align:left;color:var(--gray);font-weight:600;padding:10px 6px;border-bottom:1px solid var(--line)}
.table td{padding:12px 6px;border-bottom:1px solid var(--line)}
.up{color:var(--red);font-weight:700}
.down{color:var(--blue);font-weight:700}

/* 주문 요약 박스 */
.summary{background:var(--bg);border-radius:var(--radius);padding:16px}
.summary .row{display:flex;justify-content:space-between;font-size:14px;padding:6px 0}
.summary .row.total{border-top:1px dashed #D5D9DF;margin-top:8px;padding-top:14px;font-weight:800;font-size:17px}
/* 최종 결제금액이 위 행들과 17px/볼드 정도로만 달라 한눈에 안 들어왔음 — 금액만 확실히 키워 시선을 잡음 */
.summary .row.total b{color:var(--red);font-size:22px;letter-spacing:-.4px}

/* 브레드크럼 / 페이지네이션 */
.crumb{display:flex;gap:6px;font-size:12px;color:var(--gray);padding:12px 16px}
.crumb a:not(:last-child)::after{content:'›';margin-left:6px;color:#C5C9CF}
.pager{display:flex;justify-content:center;gap:6px;padding:20px 0}
.pager a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:14px;color:var(--ink-2)}
.pager a.on{background:var(--red);color:#fff;font-weight:700}

/* 별점 */
.stars{color:var(--yellow);font-size:14px;letter-spacing:1px}
.stars .g{color:var(--star-off)}

/* 빈 상태 */
.empty{text-align:center;padding:70px 20px;color:var(--gray)}
.empty .ic{font-size:52px;margin-bottom:14px}
.empty p{font-size:15px}

/* 실데이터가 아직 없는 예시 블록(시세 주간추이 차트·등락요약 등)이 실데이터 카드와 똑같은 .summary
   스타일이라, 구체적인 숫자(21,340원/kg 등)까지 붙어 실시간 데이터로 오인되기 쉬웠음 —
   점선 테두리·톤다운·상단 라벨로 "샘플"임을 분명히 드러냄 */
.sample-block{position:relative;border:1px dashed var(--line-2,#C9CDD4)!important;background:var(--bg)!important;opacity:.92}
.sample-block::before{content:"예시 데이터";position:absolute;top:-9px;left:14px;background:var(--ink-fill);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.02em;padding:2px 8px;border-radius:10px}
.sample-note{font-size:11px;color:var(--gray);margin-top:10px;line-height:1.5}

/* 로딩 표시가 "불러오는 중…" 텍스트 한 줄뿐이라 응답이 늦으면 빈 화면처럼 보였음 — 골격을 먼저 보여줌 */
.skel-list{display:flex;flex-direction:column;gap:10px;padding:12px 0}
.skel{height:52px;border-radius:var(--radius-s);
  background:linear-gradient(90deg,var(--bg) 25%,#EDEFF3 37%,var(--bg) 63%);
  background-size:400% 100%;animation:skelShine 1.3s ease-in-out infinite}
@keyframes skelShine{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion: reduce){.skel{animation:none}}

/* =========================================================
   푸터 / 탭바 / 위로가기
   ========================================================= */
.footer{background:#F0F1F3;color:var(--gray);font-size:12px;padding:26px 16px 90px;margin-top:10px;line-height:1.7}
.footer__links{display:flex;flex-wrap:wrap;gap:10px 16px;font-weight:600;color:var(--ink-2);margin-bottom:16px}
.footer__cs b{font-size:20px;color:var(--ink)}
.footer__cs span{display:block;margin-top:2px;color:var(--gray)}
.footer__info{margin-top:16px;color:var(--gray);font-size:11px}
.footer__badges{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.footer__badges .b{background:var(--surface);border:1px solid #ddd;border-radius:6px;padding:6px 10px;font-size:11px;color:var(--gray)}
.sns{display:flex;gap:10px;margin-top:16px;font-size:20px}

.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--app-w);background:var(--surface);border-top:1px solid var(--line);display:flex;z-index:50}
.tabbar a{flex:1;text-align:center;padding:9px 0 12px;font-size:11px;color:var(--gray);display:flex;flex-direction:column;gap:3px;align-items:center}
.tabbar a.on{color:var(--red);font-weight:700}
.tabbar .ti{font-size:20px}

/* [2026-09-15 BR-056] 예전엔 left:50% + margin-left:calc(--app-w/2 - 60px) 로 앱 열(500px) 기준 위치를
   잡아서, 화면이 500px 보다 좁으면 버튼이 화면 밖으로 나갔다(360px 에서 left 370 — 아예 누를 수 없음).
   사실상 모든 휴대폰이 해당된다. 앱 열 오른쪽에 붙이되 화면 가장자리보다 안쪽으로는 못 나가게 한다. */
.totop{position:fixed;bottom:80px;right:max(16px, calc(50% - var(--app-w)/2 + 16px));width:44px;height:44px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:20px;z-index:45;border:1px solid var(--line)}

/* 하단 고정 구매 바 */
.buybar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--app-w);background:var(--surface);border-top:1px solid var(--line);display:flex;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:50}
.buybar .btn{flex:1}
.buybar .wish{width:52px;border:1px solid var(--line);border-radius:var(--radius-s);font-size:22px;background:var(--surface);display:flex;align-items:center;justify-content:center}

/* =========================================================
   팝업 / 모달 / 토스트
   ========================================================= */
.popup-dim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.popup-dim.hide{display:none}
.popup{width:100%;max-width:340px;background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg)}
.popup__img{height:300px;background:linear-gradient(150deg,#DB0E64,#7A0938);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.popup__img small{font-size:13px;opacity:.85;letter-spacing:2px;font-weight:600}
.popup__img h2{font-size:30px;font-weight:900;margin:10px 0;line-height:1.25}
.popup__img p{font-size:14px;opacity:.9}
.popup__img .coupon{margin-top:18px;background:var(--surface);color:var(--red);font-weight:900;font-size:18px;padding:10px 22px;border-radius:30px}
.popup__foot{display:flex;border-top:1px solid var(--line)}
/* 두 버튼이 같은 크기·색이라 "오늘 하루 보지 않기"(영구 숨김)와 "닫기"(1회 닫기) 구분이 안 됐음 —
   기본 동작인 닫기를 넓고 진하게, 보조 동작은 좁고 연하게 해서 우선순위를 시각적으로 분리 */
.popup__foot button{flex:1;padding:15px 0;font-size:13px;color:var(--gray)}
.popup__foot button.close{flex:1.6;border-left:1px solid var(--line);font-weight:800;font-size:15px;color:var(--ink)}

/* 바텀시트 */
/* 리뷰 신고 버튼 — 리뷰 헤더 오른쪽 끝. 평소엔 흐리게 두고 hover/focus 에서만 또렷하게 */
.rv-report{flex-shrink:0;width:28px;height:28px;margin-left:6px;border-radius:8px;background:none;font-size:13px;line-height:1;opacity:.42;transition:opacity .15s}
.rv-report:hover,.rv-report:focus-visible{opacity:1;background:var(--bg)}
.sheet-dim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;display:flex;align-items:flex-end;justify-content:center}
.sheet-dim.hide{display:none}
.sheet{width:100%;max-width:var(--app-w);background:var(--surface);border-radius:18px 18px 0 0;padding:8px 16px 20px;max-height:80vh;overflow:auto}
.sheet .grip{width:40px;height:4px;background:var(--line);border-radius:2px;margin:6px auto 14px}

/* =========================================================
   관리자(admin) 레이아웃 — 데스크톱 기준
   ========================================================= */
.adm{display:flex;min-height:100vh;background:var(--bg)}
.adm__side{width:230px;background:#171922;color:#C7CBD3;flex-shrink:0;position:sticky;top:0;height:100vh;overflow:auto}
.adm__brand{display:flex;align-items:center;gap:8px;padding:20px 20px;font-size:18px;font-weight:900;color:#fff;border-bottom:1px solid #262A36}
.adm__brand .box{min-width:24px;height:24px;padding:0 7px;background:var(--red);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;letter-spacing:.4px}
.adm__nav{padding:12px 10px}
.adm__nav .grp{font-size:11px;color:#5B6070;padding:14px 12px 6px;font-weight:700;letter-spacing:1px}
.adm__nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;font-size:14px;color:#C7CBD3;margin-bottom:2px}
.adm__nav a .i{width:18px;text-align:center}
.adm__nav a:hover{background:#22262F;color:#fff}
.adm__nav a.on{background:var(--red);color:#fff}

.adm__main{flex:1;min-width:0;display:flex;flex-direction:column}
.adm__top{height:60px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 24px;position:sticky;top:0;z-index:10}
.adm__top h1{font-size:18px;font-weight:800}
.adm__top .sp{flex:1}
.adm__top .who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.adm__top .avatar{width:32px;height:32px;border-radius:50%;background:var(--red-tint);color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:800}
.adm__body{padding:24px;flex:1}

/* 통계 카드 */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.stat .t{font-size:13px;color:var(--gray)}
.stat .v{font-size:26px;font-weight:900;margin-top:6px}
.stat .d{font-size:12px;margin-top:6px}
.stat .d.up{color:var(--red)}
.stat .d.down{color:var(--blue)}

/* 관리자 카드/패널 */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:20px}
.panel__head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.panel__head h2{font-size:16px;font-weight:800}
.panel__head .sp{flex:1}
.panel__body{padding:20px}
.panel__body.flush{padding:0}

/* 데이터 테이블 */
.dtable{font-size:13px}
.dtable th{background:#F7F8FA;text-align:left;padding:12px 16px;font-weight:700;color:var(--ink-2);border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.dtable tr:hover td{background:#FAFBFC}
/* 주문/클레임 상태 배지가 11px이라 카드에서 가장 먼저 읽혀야 할 정보인데 눈에 잘 안 들어왔음 */
/* 증빙서류 — 반려 사유와 안내문 */
.dc-reject{margin-top:8px;padding:10px 12px;border-radius:var(--radius-s);background:var(--red-tint);color:var(--red-dark);font-size:12.5px;line-height:1.6}
.dc-note{padding:14px 16px;font-size:12px;line-height:1.7}
.st{display:inline-block;font-size:12.5px;font-weight:800;padding:4px 11px;border-radius:20px}
.st.ok{background:#EAFBF0;color:#0C7D38}
.st.wait{background:#FFF6E5;color:#8F6708}
.st.no{background:var(--red-tint);color:var(--red-dark)}
.st.done{background:#EAF1FB;color:var(--blue)}

/* 관리자 폼 필터 바 */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filterbar .input,.filterbar .select{height:40px;width:auto}
.adm .btn{height:40px}

/* 반응형: 관리자도 좁은 화면 대응 */
@media(max-width:820px){
  .adm__side{position:fixed;left:-240px;z-index:60;transition:.2s}
  .adm__side.open{left:0}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .dtable{display:block;overflow-x:auto;white-space:nowrap}
}

/* 토스트 */
.mb-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(10px);
  background:rgba(17,17,17,.92);color:#fff;padding:11px 18px;border-radius:22px;
  font-size:13px;font-weight:600;z-index:200;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;max-width:88%;text-align:center}
.mb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 유틸 */
/* 화면엔 안 보이지만 스크린리더는 읽는 표준 패턴 — 시각 디자인 안 바뀌는 h1 보강용(index/mypage/search 등) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted{color:var(--gray)}
.right{text-align:right}
.center{text-align:center}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.divider{height:8px;background:var(--bg)}
.price-red{color:var(--red);font-weight:800}
.hr{height:1px;background:var(--line);border:0;margin:16px 0}
/* 텍스트 문서 본문 — 넓은 화면에서 읽기 좋은 폭으로 중앙 정렬 (모바일 앱 폭에서는 영향 없음) */
.readable{max-width:760px;margin-left:auto;margin-right:auto}

/* 상품 상세 2단 (데스크톱) — 모바일에서는 단일 컬럼 유지 */
.pd-actions{display:none;gap:10px;margin-top:22px}
@media (min-width:1000px){
  .pd-top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding:14px 24px 0}
  .pd-media{position:sticky;top:84px}
  .pd-info .pad{padding-left:0;padding-right:0}
  .pd-info .pad:first-child{padding-top:0}
  .pd-actions{display:flex}
  .pd-actions .btn{flex:1;height:52px;font-size:16px}
  .pd-actions .wish{width:56px;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--radius-s);font-size:24px;display:flex;align-items:center;justify-content:center;background:var(--surface)}
  .pd .buybar{display:none !important}
  .pd-detail{max-width:900px;margin-left:auto;margin-right:auto}
}

/* 주문/결제 2단 (데스크톱) — 왼쪽 주문정보 · 오른쪽 결제요약(sticky) */
.co-actions{display:none}
@media (min-width:1000px){
  .co-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start;padding:0 24px}
  .co-side{position:sticky;top:84px}
  .co-grid .divider{display:none}
  .co-grid .section{border:1px solid var(--line);border-radius:12px;margin-top:16px;padding:22px 24px}
  .co-actions{display:block;margin-top:16px}
  .co-actions .btn{width:100%}
  .co .buybar{display:none !important}
}

/* 마이페이지 2단 (데스크톱) — 좌: 요약+메뉴 / 우: 주문현황+개인BEST
   (DOM은 모바일 순서 유지, 데스크톱만 grid 배치로 재배열) */
@media (min-width:1000px){
  .my-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:start;padding:0 24px;margin-top:16px}
  .my-grid > section{margin-top:0;border:1px solid var(--line);border-radius:12px}
  .my-summary{grid-column:1;grid-row:1}
  .my-menu{grid-column:1;grid-row:2}
  .my-orders{grid-column:2;grid-row:1}
  .my-best{grid-column:2;grid-row:2}
}

/* 장바구니 2단 (데스크톱) — 좌 상품목록 · 우 주문요약(sticky) */
@media (min-width:1000px){
  .ca-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start;padding:8px 24px 0}
  .ca-side{position:sticky;top:84px}
  .ca-side .summary{border:1px solid var(--line)}
  .ca .buybar{display:none !important}
}

/* 주문내역 2단 (데스크톱) — 좌 상태필터(세로·sticky) · 우 주문카드 */
@media (min-width:1000px){
  .oh-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start;padding:12px 24px 0}
  .oh-side{position:sticky;top:84px}
  .oh-side .chips{flex-direction:column;gap:6px;padding:0;overflow:visible}
  .oh-side .chip{width:100%;text-align:left;padding:11px 14px}
  .oh-main .divider{display:none}
  .oh-main > section{border:1px solid var(--line);border-radius:12px;margin-top:16px;padding:20px 22px}
  .oh-main > section:first-child{margin-top:0}
}

/* 배송조회 2단 (데스크톱) — 좌 운송장+타임라인 · 우 배송이력(sticky) */
.dv-actions{display:none}
@media (min-width:1000px){
  .dv-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start;padding:8px 24px 0}
  .dv-side{position:sticky;top:84px}
  .dv-grid .divider{display:none}
  .dv-main > section, .dv-side > section{border:1px solid var(--line);border-radius:12px;margin-top:16px;padding:20px 22px}
  .dv-main > section:first-child, .dv-side > section:first-child{margin-top:0}
  .dv-actions{display:flex;gap:10px;margin-top:16px}
  .dv-actions .btn{flex:1;height:48px}
  .dv .buybar{display:none !important}
}

/* 쿠폰함 (데스크톱) — 중앙 정렬 + 쿠폰 2열 그리드 */
@media (min-width:1000px){
  .cp-wrap{max-width:920px;margin-left:auto;margin-right:auto}
  .cp-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .cp-list > div{margin-bottom:0 !important}
}

/* 문의내역 (데스크톱) — order-history의 oh-* 레이아웃 재사용 + 새문의 버튼 */
.iq-newbtn{display:none}
@media (min-width:1000px){
  .iq .buybar{display:none !important}
  .iq-newbtn{display:block;margin-top:14px}
}

/* 배송지 관리 (데스크톱) — 중앙 정렬 + 배송지 2열 그리드 */
@media (min-width:1000px){
  .addr-wrap{max-width:880px;margin-left:auto;margin-right:auto}
  .addr-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .addr-list > div{margin-bottom:0 !important}
}

/* 인증·폼·완료 페이지 (데스크톱) — 좁은 중앙 컬럼 */
@media (min-width:1000px){
  .app.auth-page{max-width:460px}
  .app.rv{max-width:540px}
  .app.oc{max-width:500px}
  .app.oc .summary{border:1px solid var(--line)}
}

/* 검색 (데스크톱) — 좌 추천/최근/인기 검색어 · 우 검색결과 */
@media (min-width:1000px){
  .sr-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start;padding:8px 24px 0}
  .sr-grid .sr-main,.sr-grid .sr-side{order:0}
  .sr-side{position:sticky;top:84px}
  .sr-grid .divider{display:none}
  .sr-side .pad{padding-left:0;padding-right:0}
  .sr-main .pgrid{grid-template-columns:repeat(3,1fr)}
}

/* 랭킹 (데스크톱) — 좌 카테고리 필터 · 우 랭킹 2열(1~10 | 11~20) */
@media (min-width:1000px){
  .rk-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start;padding:12px 24px 0}
  .rk-side{position:sticky;top:84px}
  .rk-side .chips{flex-direction:column;gap:6px;padding:0}
  .rk-side .chip{width:100%;text-align:left;padding:11px 14px}
  .rk-list{display:grid;grid-auto-flow:column;grid-template-rows:repeat(10,auto);grid-template-columns:1fr 1fr;column-gap:28px}
}

/* 기획전 (데스크톱) — 배너 2열 + (이벤트 목록 · 상세 안내) 2단 */
@media (min-width:1000px){
  .ev-banners{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 24px 0}
  .ev-banners > a{margin-bottom:0 !important;height:200px !important}
  .ev-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start;padding:8px 24px 0}
  .ev-side{position:sticky;top:84px}
  .ev-grid .divider{display:none}
  .ev-main > section, .ev-side > section{border:1px solid var(--line);border-radius:12px}
}

/* 도매시세 (데스크톱) — 좌 대표가·추이·등락(sticky) · 우 카테고리+시세표 */
@media (min-width:1000px){
  .mk-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:28px;align-items:start;padding:8px 24px 0}
  .mk-side{position:sticky;top:84px}
  .mk-side .pad, .mk-main .pad{padding-left:0;padding-right:0}
  .mk-side .pad:first-child{padding-top:0}
}

/* 공지사항 (데스크톱) — 중앙 정렬 게시판 */
@media (min-width:1000px){
  .nt-wrap{max-width:820px;margin-left:auto;margin-right:auto}
}

/* 카테고리 목록 (데스크톱) — 좌 필터 패널(sticky) · 우 상품 그리드 */
/* 모바일에서는 .sr-side(자동완성·최근검색어·인기검색어)가 DOM 순서상 결과보다 앞이라,
   정작 보러 온 검색결과를 보려면 3개 블록을 전부 스크롤해서 지나쳐야 했음 — 결과를 먼저 보여줌 */
.sr-grid{display:flex;flex-direction:column}
.sr-grid .sr-main{order:1}
.sr-grid .sr-side{order:2}

.cat-side{display:none}
@media (min-width:1000px){
  .cat-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start;padding:8px 24px 0}
  .cat-side{display:block;position:sticky;top:84px;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
  .cat-side h2,.cat-side h4{font-size:13px;font-weight:800;margin:16px 0 10px}
  .cat-side h2:first-child,.cat-side h4:first-child{margin-top:0}
  .cat-side .check{margin-bottom:11px;font-size:13.5px}
  .cat-filterbtn{display:none}
  .cat-main .pad{padding-left:0;padding-right:0}
}

/* 기획전 상세 (데스크톱) — 좌 쿠폰·안내(sticky) · 우 상품+유의 */
@media (min-width:1000px){
  .ed-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:28px;align-items:start;padding:8px 24px 0}
  .ed-side{position:sticky;top:84px}
  .ed-grid .divider{display:none}
  .ed-side .pad{padding-left:0;padding-right:0}
  .ed-side > section, .ed-main > section{border:1px solid var(--line);border-radius:12px}
  .ed-main .pgrid{grid-template-columns:repeat(3,1fr)}
}

/* 전체 카테고리 (데스크톱) — 섹션 2열 디렉터리 */
@media (min-width:1000px){
  .ca2-wrap{max-width:1080px;margin:0 auto;padding:8px 24px 0;column-count:2;column-gap:28px}
  .ca2-wrap > section{break-inside:avoid;-webkit-column-break-inside:avoid;margin-top:0;margin-bottom:18px;border:1px solid var(--line);border-radius:12px}
  .ca2-wrap .divider{display:none}
  .ca2-wrap .quickmenu .grid{grid-template-columns:repeat(4,1fr)}
}

/* 홈 (데스크톱) — 도매시세 + 개인 BEST 2단 페어링 */
@media (min-width:1000px){
  .hm-2col{display:grid;grid-template-columns:440px minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}
  .hm-2col > section{margin-top:0}
  .hm-2col .pgrid{grid-template-columns:repeat(3,1fr)}
}

/* =========================================================
   데스크톱 크롬 (JS가 주입) — 기본은 숨김, 데스크톱에서만 표시
   ========================================================= */
.dt-nav,.dt-foot{display:none}
.dt-nav{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.dt-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:14px 24px}
.dt-logo{display:flex;align-items:center;gap:6px;font-weight:900;font-size:22px;letter-spacing:-1px;flex-shrink:0}
.dt-logo .box{min-width:26px;height:26px;padding:0 8px;background:var(--red);color:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;letter-spacing:.4px}
.dt-logo b{color:var(--red)}
.dt-menu{display:flex;gap:26px}
.dt-menu a{font-size:15px;font-weight:600;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent}
.dt-menu a:hover{color:var(--red);border-bottom-color:var(--red)}
.dt-search{margin-left:auto;display:flex;align-items:center;border:2px solid var(--red);border-radius:22px;padding:7px 14px;width:260px}
.dt-search input{flex:1;border:none;outline:none;font-size:14px;background:transparent}
.dt-search button{color:var(--red);font-size:16px}
.dt-util{display:flex;align-items:center;gap:16px;flex-shrink:0}
.dt-util a{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.dt-util a:hover{color:var(--red)}
.dt-foot{background:#F0F1F3;color:#666;border-top:1px solid var(--line)}
.dt-foot-inner{max-width:1200px;margin:0 auto;padding:34px 24px 44px;display:flex;gap:40px;flex-wrap:wrap}
.dt-foot h2,.dt-foot h4{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:10px}
.dt-foot .cs b{font-size:22px;color:var(--ink)}
.dt-foot a{color:#555;font-size:13px;line-height:2}
.dt-foot a:hover{color:var(--red)}
.dt-foot .info{font-size:12px;color:#999;line-height:1.8;max-width:420px}

/* =========================================================
   반응형 — 사용자몰(.app)은 모바일 우선, 넓은 화면에서 확장
   ========================================================= */
/* 태블릿 */
@media (min-width:620px){
  :root{ --app-w:720px; }
  .app{ border-radius:0; }
  .pgrid{ grid-template-columns:repeat(3,1fr); }
  .quickmenu .grid{ grid-template-columns:repeat(6,1fr); }
  .slide{ height:230px; }
  .slide h2{ font-size:30px; }
  .plist .pcard, .plist .pcard .thumb{ width:170px; }
  .plist .pcard .thumb{ height:170px; }
}
/* 데스크톱 — 완전한 PC 웹 레이아웃으로 전환 */
@media (min-width:1000px){
  :root{ --app-w:1200px; }
  body{ background:var(--surface); }
  /* 데스크톱 크롬 표시 */
  .dt-nav{ display:block; }
  .dt-foot{ display:block; }
  /* 모바일 크롬 숨김 */
  .app > .header, .app > .subhead, .tabbar, .totop{ display:none !important; }
  /* 앱 컨테이너 → 넓은 콘텐츠 영역 */
  .app{ max-width:1200px; box-shadow:none; min-height:auto; padding-bottom:0 !important; }
  .app.pb-tab{ padding-bottom:0; }
  /* 그리드 다단 */
  .pgrid{ grid-template-columns:repeat(4,1fr); gap:24px 20px; }
  .quickmenu .grid{ grid-template-columns:repeat(8,1fr); }
  .slide{ height:320px; padding:44px 52px; border-radius:14px; }
  .slide h2{ font-size:40px; }
  .hero{ margin:20px 24px 0; border-radius:14px; overflow:hidden; }
  .section{ padding:28px 24px; margin-top:16px; border-radius:12px; border:1px solid var(--line); }
  .section--flat{ border:0; }
  .pad{ padding:22px 24px; }
  .plist .pcard, .plist .pcard .thumb{ width:216px; }
  .plist .pcard .thumb{ height:216px; }
  /* 폼/텍스트 가독성: 입력 폭 제한 */
  .field{ max-width:640px; }
  /* 자체 푸터(index)는 데스크톱 전용 푸터와 중복되므로 숨김 */
  .footer{ display:none; }
  /* 구매바: 하단 고정 대신 콘텐츠 내부 정렬 */
  .buybar{ position:static; transform:none; max-width:none; width:100%; border-top:0; padding:16px 24px 40px; justify-content:flex-end; gap:12px; background:transparent; }
  .buybar .btn{ flex:0 0 auto; min-width:200px; }
  .buybar .wish{ flex:0 0 auto; }
  /* 상세/폼 페이지 본문 가독성 위해 중앙 컬럼 폭 제한 */
  .subhead + *{ }
}
@media (min-width:1400px){
  .pgrid{ grid-template-columns:repeat(5,1fr); }
}

/* ===== UX 15차: 결제 · 장바구니 · 상품상세 ===== */
/* 결제 단계 번호 — 배송지→상품→할인→결제수단 흐름 인지 */
.co-step{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:7px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:800;font-style:normal;vertical-align:1px}
.co-hint{margin:6px 2px 0;font-size:12px;color:var(--ink-2)}
/* 할인수단(쿠폰/포인트) 구분 */
.co-disc+.co-disc{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.co-disc__ic{margin-right:5px}
/* 결제수단 카드 — 선택 시 레드 테두리 */
.pay-opts{display:flex;flex-direction:column;gap:8px}
.pay-opt{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-s);font-size:14px;cursor:pointer;background:var(--surface);transition:border-color .15s,background .15s}
.pay-opt input{width:18px;height:18px;accent-color:var(--red);flex-shrink:0}
.pay-opt__ic{font-size:18px;line-height:1}
.pay-opt__tx{font-weight:700}
.pay-opt__tx small{font-weight:500;color:var(--ink-2);font-size:12px}
.pay-opt:has(input:checked){border-color:var(--red);background:var(--red-tint)}
.pay-opt.is-on{border-color:var(--red);background:var(--red-tint)}
/* 결제금액 요약 카드 */
.co-sumcard{border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
/* 장바구니 — 품절 라인 */
.ca-sold{background:var(--bg);border-radius:var(--radius-s)}
.ca-sold .thumb,.ca-sold .name,.ca-sold .brand{opacity:.55}
/* 장바구니 — 쿠폰 카드 */
.ca-coupon{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--red-tint)}
.ca-coupon__hd{display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:8px}
.ca-coupon__ic{font-size:15px}
.ca-coupon__note{margin:7px 2px 0;font-size:11px;color:var(--ink-2)}
/* 장바구니 — 배송 안내 통합 박스 */
.ca-ship{border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;background:var(--bg)}
.ca-ship__row{display:flex;gap:8px;font-size:12px;line-height:1.6;color:var(--ink-2)}
.ca-ship__row+.ca-ship__row{margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}
.ca-ship__ic{flex-shrink:0}
/* 상품상세 — 배지 1차(신뢰)/2차(프로모션) 위계 */
.pd-tags__row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pd-tags__row--promo{margin-top:7px;opacity:.92}
.pd-tags__row--promo .badge{font-size:11px}
/* 상품상세 — 축산물 정보 핵심 행 강조 */
.table--pdinfo tr.is-key th{color:var(--ink);font-weight:800}
.table--pdinfo tr.is-key td{font-weight:700;color:var(--ink)}
.table--pdinfo tr:not(.is-key) td{color:var(--ink-2)}
/* 상품상세 — 리뷰 헤더 평균 별점 */
.pd-rvhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pd-rvavg{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:13px}
.pd-rvavg[hidden]{display:none}
/* [2026-09-04 OD-006·OD-009] .btn{display:inline-flex} 가 브라우저 기본 [hidden]{display:none} 을 이겨서
   hidden=true 로 감춘 '배송 조회하기'·'반품·교환' 버튼이 화면에 계속 보였음(상태와 무관하게 노출되는 막다른 링크) */
/* [2026-09-10 BR-044] 위 규칙을 버튼·칩에만 걸어 뒀더니 같은 함정이 다른 곳에서 계속 재현됐다 —
   display 를 지정하는 클래스(.badge·.bstrip·.pf-ok·.lg-fail·.sr-research …)에 hidden 을 걸면
   브라우저 기본 [hidden]{display:none} 이 클래스에 밀려 요소가 그대로 남는다.
   실제로 9개 화면에서 11곳이 빈 칸·빈 배지·상시 노출된 "✓ 저장됨" 으로 새어 나오고 있었다.
   개별 클래스마다 예외를 다는 대신 한 줄로 못박는다. 이 프로젝트 코드는 요소를 열 때
   hidden 속성을 반드시 지우므로(style.display 만 바꾸는 두 곳은 hidden 을 아예 안 쓴다) 부작용이 없다. */
[hidden]{display:none!important}
.pd-rvavg .stars{font-size:13px}
/* 모바일 주소/포인트 입력 중에는 하단 결제바를 숨겨 키보드와 겹치지 않게 함 */
.buybar.is-kbd{transform:translateY(120%);pointer-events:none;transition:transform .18s ease}

/* ===== UX 16차: 주문완료 · 주문상세 · 리뷰작성 ===== */
/* 주문 완료 — 결제/장바구니와 구분되는 완료 톤 */
.oc-card{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:linear-gradient(180deg,var(--red-tint) 0%,#fff 62%)}
.oc-ship{margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.oc-ship__row{display:flex;gap:10px;align-items:flex-start}
.oc-ship__row+.oc-ship__row{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.oc-ship__ic{font-size:18px;line-height:1.3;flex-shrink:0}
.oc-ship__k{font-size:11px;color:var(--ink-2);margin-bottom:1px}
.oc-ship b{font-size:14px}
/* 주문 상세 — 데스크톱 폭 제한 · 리뷰 버튼 자리 유지 · 총액 강조 */
.ov [data-order-detail],.ov .buybar>*{max-width:100%}
@media(min-width:1024px){ .ov [data-order-detail]{max-width:760px;margin:0 auto} }
.ov-rv{margin-top:8px}
.ov-rv.is-off{opacity:.6;cursor:default;pointer-events:none}
.ov-total{font-size:19px}
/* 리뷰 작성 */
.rv-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-stars{font-size:38px;color:var(--star-off);user-select:none}
.rv-up{display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed var(--line);border-radius:var(--radius);cursor:pointer;background:var(--bg)}
.rv-up:hover{border-color:var(--red)}
.rv-up__ic{font-size:22px}
.rv-up__tx{display:flex;flex-direction:column;font-size:13.5px;font-weight:700;line-height:1.4}
.rv-up__tx small{font-weight:500;font-size:11px;color:var(--ink-2);margin-top:2px}
.rv-up__cnt{margin-left:auto;font-size:12px;font-weight:800;color:var(--ink-2)}
.rv-prev{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:10px}
.rv-prev__it{aspect-ratio:1/1;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.rv-prev__it img{width:100%;height:100%;object-fit:cover;display:block}
.rv-notice{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--red-tint);font-size:13.5px;line-height:1.6}
.rv-notice__ic{font-size:18px;flex-shrink:0}

/* ===== UX 17차: 반품·교환 ===== */
/* 모바일에서는 새 신청 폼보다 기존 신청내역을 먼저 보게 함 */
@media(max-width:1023px){ .cl-grid{display:flex;flex-direction:column} .cl-grid .oh-side{order:2} .cl-grid .oh-main{order:1} }
@media(min-width:1024px){ .cl-grid .oh-side{max-height:calc(100vh - 104px);overflow-y:auto} }
.cl-rec{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--red-tint);color:var(--red);font-size:11px;font-weight:800;vertical-align:1px}
/* 선택한 주문 상품 미리보기 */
.cl-pick{margin-top:10px;border:1px solid var(--line);border-radius:var(--radius-s);padding:10px 12px;background:var(--bg)}
.cl-pick__hd{font-size:11px;font-weight:800;color:var(--ink-2);margin-bottom:7px}
.cl-pick__it{display:flex;gap:9px;align-items:center}
.cl-pick__it+.cl-pick__it{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.cl-pick__th{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:17px}
.cl-pick__nm{display:flex;flex-direction:column;font-size:13px;font-weight:700;line-height:1.35;min-width:0}
.cl-pick__nm small{font-weight:500;font-size:11px;color:var(--ink-2);margin-top:2px}
/* 신청 진행 단계 */
.cl-steps{display:flex;align-items:center;gap:4px;margin-top:10px}
.cl-step{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--gray);white-space:nowrap}
.cl-step i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.cl-step.on{color:var(--red);font-weight:800}
.cl-step.on i{background:var(--red)}
.cl-step+.cl-step::before{content:"";width:16px;height:2px;background:var(--line);margin-right:1px}
.cl-step.on+.cl-step.on::before,.cl-step.on:not(:first-child)::before{background:var(--red)}
.cl-steps--off{margin-top:10px;font-size:11px;color:var(--gray)}
/* 신규 접수 카드 강조 */
.cl-new{animation:clnew 2.4s ease}
@keyframes clnew{0%,60%{background:var(--red-tint)}100%{background:transparent}}
@media(prefers-reduced-motion:reduce){ .cl-new{animation:none;background:var(--red-tint)} }

/* ===== UX 17차: 고객센터 ===== */
.sp-nav{position:sticky;top:56px;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
@media(min-width:1024px){ .sp-nav{top:64px} }
.sp-guest{margin:0 0 14px;padding:10px 12px;border-radius:var(--radius-s);background:var(--bg);font-size:12px;line-height:1.6;color:var(--ink-2)}
.sp-guest a{color:var(--red);font-weight:700;white-space:nowrap}
.sp-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sp-file{display:inline-block;max-width:100%;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-file.is-over{border-color:var(--red);color:var(--red);background:var(--red-tint)}
.sp-b2b{display:flex;align-items:center;gap:10px;margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}

/* ===== UX 18차: 도매시세 · 공지 상세 ===== */
/* 사이드 카드 수직 리듬 통일(이전엔 14/16/12px 제각각) */
.mk-block{padding-top:14px;padding-bottom:0}
.mk-filnote{margin:0 16px 8px;font-size:11.5px;color:var(--ink-2)}
@media(min-width:1024px){ .mk-filnote{margin-left:0;margin-right:0} }
/* 주간 추이 Y축 눈금 */
.mk-chart{display:flex;gap:8px;margin-top:14px}
.mk-yaxis{display:flex;flex-direction:column;justify-content:space-between;height:112px;font-size:9.5px;color:var(--gray);text-align:right;flex-shrink:0;padding-bottom:18px}
/* 시세표 가로 스크롤 힌트 */
.mk-tablewrap{position:relative}
.mk-fade{display:none;position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff)}
.mk-tablewrap.is-over .mk-fade{display:block}
.mk-tablewrap.is-over.is-end .mk-fade{display:none}
.mk-scrollhint{display:none;margin:6px 0 0;font-size:11px;color:var(--gray);text-align:right}
.mk-tablewrap.is-over .mk-scrollhint{display:block}
.mk-tablewrap.is-over.is-end .mk-scrollhint{display:none}
/* 상세 시세 CTA */
.mk-more{margin-top:16px}
/* 용어/등급 안내 시각 분리 */
.mk-guide__hd{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;margin-bottom:8px}
.mk-guide__ic{font-size:15px}
.mk-guide--grade{background:var(--bg)}
/* 공지 상세 메타 · 본문 */
.nd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:12px;color:var(--ink-2);margin-top:8px}
.nd-meta__k{color:var(--gray);margin-right:2px}
.nd-meta__sep{color:var(--line);margin:0 4px}
.nd-body{font-size:14px;line-height:1.8;color:var(--ink-2);white-space:pre-wrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nd-body table{min-width:100%;border-collapse:collapse}
.nd-body img{max-width:100%;height:auto}

/* ===== UX 19차: 기획전 ===== */
.ev-row{transition:opacity .15s}
.ev-row.is-ended{opacity:.55}
.ev-row.is-ended .name{text-decoration:line-through;text-decoration-color:var(--line)}
.ev-thumb{font-size:30px;border:1px solid var(--line)}
.prow .ev-thumb--red{background:var(--red-tint)}
.prow .ev-thumb--yellow{background:#FFF6DE}
.prow .ev-thumb--orange{background:#FFEEE2}
.prow .ev-thumb--blue{background:#E7F0FF}
.prow .ev-thumb--green{background:#E6F5EC}
/* 배지와 쿠폰 버튼 폭·정렬을 맞춰 행마다 들쭉날쭉하던 우측 컬럼 정리 */
.ev-act{display:flex;flex-direction:column;align-items:stretch;gap:6px;flex-shrink:0;width:88px}
.ev-act .badge{justify-content:center;text-align:center;width:100%;box-sizing:border-box}
.ev-act .ev-btn{width:100%;padding:0 8px}
.ev-cp{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:999px;background:#FFF6DE;color:#8A6100;font-size:10.5px;font-weight:800;vertical-align:1px}
/* 사이드 sticky 하단 여백을 실제 이동 경로 카드로 채움 */
.ev-links{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.ev-link{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-s);font-size:13px;font-weight:700}
.ev-link span{display:flex;flex-direction:column;flex:1;min-width:0}
.ev-link small{font-weight:500;font-size:11px;color:var(--ink-2);margin-top:2px}
.ev-link__ic{font-size:18px;flex:0 0 auto!important;display:block!important}
.ev-link__ar{flex:0 0 auto!important;display:block!important;color:var(--gray);font-size:17px}

/* ===== UX 19차: 마이페이지 ===== */
.my-avatar{width:52px;height:52px;border-radius:50%;background:var(--red-tint);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.my-avatar.is-initial{font-size:22px;font-weight:900;letter-spacing:-.5px}
/* 주문현황: 화살표로 이어 붙여 하나의 흐름처럼 보이던 것을 독립 카드 4개로 */
.my-ostat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.my-ostat__c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px 4px;border:1px solid var(--line);border-radius:var(--radius-s);text-align:center}
.my-ostat__n{font-size:20px;font-weight:900;line-height:1}
.my-ostat__k{font-size:11.5px;color:var(--ink-2)}
/* 메뉴: 자주 쓰는 항목과 로그아웃을 시각적으로 분리 */
.my-menu-list{display:flex;flex-direction:column}
.my-mi{display:flex;align-items:center;gap:10px;padding:15px 0;border-bottom:1px solid var(--line)}
.my-mi__ic{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.my-mi__t{flex:1;font-size:15px}
.my-mi__ar{color:var(--gray);font-size:18px}
.my-mi--out{margin-top:14px;padding:14px 12px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg)}
.my-mi--out .my-mi__t{color:var(--gray);font-size:14px}

/* ===== UX 20차: 회원가입 · 주문내역 ===== */
/* 회원가입 단계 청킹 */
.su-step{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:14px;font-weight:800}
.su-step__n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:800;flex-shrink:0}
.su-step__c{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--gray)}
.su-step__c.is-done{color:#0C7D38}
.su-req b{color:var(--red);font-weight:800}
.su-opt{color:var(--ink-2)}
.su-opt input{opacity:.85}
.field > label.su-optlabel{color:var(--gray);font-weight:600}
.su-cta{margin-top:26px}
.su-login{margin-top:18px;font-size:13.5px;color:var(--ink-2)}
.su-login a{color:var(--red);font-weight:800;font-size:14px}
/* 주문내역 카드 헤더·액션 */
.oh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.oh-date{font-size:16px;font-weight:900;line-height:1.2}
.oh-no{font-size:12px;color:var(--gray);margin-top:3px}
.oh-acts{display:flex;gap:8px;margin-top:12px}
.oh-tracebadge{display:inline-block;margin-top:6px;padding:3px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:10.5px;color:var(--ink-2);font-weight:700}
/* 취소·반품은 되돌릴 수 없는 상태라 회색보다 한 톤 분명하게 */
/* 취소·반품은 되돌릴 수 없는 상태 — 이미 red-tint였으나 다른 배지와 형태가 같아 묻혔음. 테두리로 한 톤만 분명하게 */
.st.no{background:#FDECEF;color:#A3103A;border:1px solid #F2BFCE;padding:3px 10px}
/* 품목 성격별 썸네일 톤 */
.prow .thumb.tone--beef{background:#FBE9EE}
.prow .thumb.tone--pork{background:#FDEFE6}
.prow .thumb.tone--poultry{background:#FFF7E0}
.prow .thumb.tone--lamb{background:#EFEAF7}
.prow .thumb.tone--etc{background:var(--bg)}
/* 좌측 사이드 이번달 요약 */
.oh-sum{padding-top:0}
.oh-sum__t{font-size:12px;font-weight:800;color:var(--ink-2);margin-bottom:8px}
.oh-sum__r{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--line)}
.oh-sum__r:last-child{border-bottom:0}
.oh-sum__r span{color:var(--gray)}
.oh-sum__r b{font-size:13.5px}

/* ===== UX 21차: 전체 카테고리 · 찜 ===== */
/* 상단 하이라이트 스트립 (첫 화면 시각 앵커) */
.ca2-hl{display:flex;gap:8px;padding-top:12px;padding-bottom:0}
.ca2-hl__i{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 6px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);font-size:13px;font-weight:700}
.ca2-hl__ic{font-size:15px}
/* 8px divider 반복 대신 섹션 카드 보더로 구분 */
.ca2-cards > section{margin:12px 16px 0;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.ca2-cards > section:first-of-type{margin-top:12px}
.ca2-cards > section:last-of-type{margin-bottom:16px}
@media(min-width:1024px){ .ca2-cards > section{margin-left:0;margin-right:0} }
/* 특가·기획관은 카테고리가 아니라 프로모션 묶음 */
.ca2-cards > section.ca2-promo{background:var(--bg)}
/* 카테고리별 실제 상품 수 */
.qm-cnt{display:block;margin-top:2px;font-size:10.5px;font-weight:800;color:var(--red);font-style:normal}
.qm-cnt.is-soon{color:var(--gray);font-weight:600}
/* 홈 퀵메뉴: 축종 카테고리와 프로모션 진입점을 구분 */
.qm[data-qm-promo] .ic{background:var(--surface);border:1px solid var(--line)}
.qm.qm--all[data-qm-promo] .ic{background:var(--red-tint);border-color:var(--red-tint)}
/* 찜 */
.wl-glabel{margin:12px 16px 4px;font-size:11.5px;font-weight:800;color:var(--gray)}
@media(min-width:1024px){ .wl-glabel{margin-left:24px} }
.pcard .wl-sold{position:absolute;top:8px;left:8px;z-index:1}
.wl-soon{opacity:.75}
.wl-trust{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);font-size:12.5px;color:var(--ink-2)}
.wl-trust span{flex:1}
.wl-trust__ic{flex:0 0 auto!important;font-size:15px}
.wl-trust__ar{flex:0 0 auto!important;color:var(--gray);font-size:16px}

/* ===== UX 22차: 배송조회 · 회원정보 수정 ===== */
/* 배너를 중립 톤으로 — red는 타임라인의 '현재 단계'에만 집중 */
.dv-banner{margin-top:18px;text-align:center;background:var(--bg);border:1px solid var(--line)}
.dv-banner__msg{font-size:15px;font-weight:800;color:var(--ink)}
.dv-updated{font-size:11px;margin-top:6px;color:var(--gray)}
/* 좁은 사이드에서 3열 표가 잘리지 않도록 */
.dv-histwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 스캔이력이 없을 때 사이드를 채우는 안내 */
.dv-tips{display:flex;flex-direction:column;gap:12px}
.dv-tips li{font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.dv-tips b{display:block;font-size:13px;color:var(--ink);margin-bottom:2px}
/* 회원정보 수정 */
.pf-ok{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:999px;background:#EAFBF0;color:#0C7D38;font-size:11.5px;font-weight:800}
.pf-leave{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;font-size:12.5px;color:var(--gray);text-decoration:underline}
#pfSaveBasic,#pfSavePw{margin-top:4px}

/* ===== UX 23차: 대량주문 · 문의내역 ===== */
.bo-hero{padding:18px 16px;background:var(--bg);border:1px solid var(--line)}
.bo-tel{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);font-size:13px}
.bo-tel span{display:flex;flex-direction:column;flex:1;min-width:0}
.bo-tel b{font-size:15px;color:var(--red);font-weight:900}
.bo-tel small{font-size:11px;color:var(--ink-2);margin-top:2px}
.bo-tel__ic{flex:0 0 auto!important;display:block!important;font-size:17px}
.bo-tel__ar{flex:0 0 auto!important;display:block!important;color:var(--gray);font-size:17px}
.bo-prog{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--gray)}
.bo-prog.is-done{color:#0C7D38}
.input-group .bo-unit{width:auto;min-width:82px;flex:0 0 auto;border-radius:0 var(--radius-s) var(--radius-s) 0}
/* 문의내역 */
.iq-help{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 11px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.iq-tabs{position:sticky;top:56px;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
@media(min-width:1024px){ .iq-tabs{top:64px} }
.iq-flabel{margin:12px 16px 4px;font-size:11.5px;font-weight:800;color:var(--gray)}
.iq-filter .chip{font-size:12.5px}
.iq-h{display:flex;flex-direction:column;font-size:17px;font-weight:900;margin:0 0 8px;scroll-margin-top:120px}
.iq-h small{font-size:11.5px;font-weight:500;color:var(--ink-2);margin-top:3px}
.iq-card{margin-top:0;margin-bottom:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.iq-newinline{padding:0 16px 12px}
@media(min-width:1000px){ .iq-newinline{display:none} .iq-flabel{margin-left:0} }
@media(max-width:999px){ .iq-newbtn{display:none} }

/* ===== UX 24차: 기획전 상세 · 상세시세 · 가입완료 ===== */
/* 기획전 상세 */
/* 기획전 배너 배경 — 관리자가 올린 banner_image. 글자 대비를 지키려고 반투명으로 깐다 */
.ed-banner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.ed-banner>small,.ed-banner>h2,.ed-banner>p,.ed-banner>.ed-dday{position:relative}
.ed-banner{min-width:0;height:auto;min-height:200px;padding:30px 24px 22px}
.ed-dday{align-self:flex-start;margin-top:14px}
.ed-flow{margin:10px 2px 0;font-size:12px;color:var(--ink-2);text-align:center}
.ed-legend{margin:2px 0 12px;font-size:11.5px;color:var(--ink-2)}
.ed-legend .tag{margin-right:2px}
.pcard--ev{position:relative}
.ev-ribbon{position:absolute;top:8px;left:8px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;font-size:13px;font-weight:900;line-height:1;box-shadow:0 2px 8px rgba(219,14,100,.35)}
.ev-ribbon small{font-size:8.5px;font-weight:700;margin-top:1px}
.pcard--ev .price .won{font-size:17px}
@media(max-width:999px){
  /* 모바일에서 쿠폰·안내를 다 지나야 상품에 닿던 순서를 뒤집음 */
  .ed-grid--mobfirst{display:flex;flex-direction:column}
  .ed-grid--mobfirst .ed-main{order:1}
  .ed-grid--mobfirst .ed-side{order:2}
}
/* 상세 시세 */
.sd-flabel{margin:2px 16px 6px;font-size:11.5px;font-weight:800;color:var(--gray)}
@media(min-width:1024px){ .sd-flabel{margin-left:0} }
.sd-grade .chip{font-size:12px}
.sd-note{margin:8px 0 0;font-size:11px;color:var(--gray);line-height:1.6}
.sd-gtable{margin-top:4px}
.sd-gtable th,.sd-gtable td{font-size:12px;padding:7px 6px}
/* 가입 완료 */
.sc-head{border-bottom:0;background:transparent}
.sc-wrap{display:flex;flex-direction:column;justify-content:center;text-align:center;min-height:calc(100vh - 60px)}
@media(min-width:1000px){
  .sc-wrap{min-height:0;max-width:520px;margin:48px auto 64px;padding:34px 28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
}
.sc-badge{width:72px;height:72px;border-radius:50%;background:var(--red-tint);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:38px;margin:0 auto;animation:scPop .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes scPop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){ .sc-badge{animation:none} }
.sc-card{margin-top:24px;text-align:center;border:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.05)}
.sc-name .skel{border-radius:6px}
/* 상품상세 → 도매시세 진입점 */
.pd-sise{margin-left:auto;font-size:12px;font-weight:700;color:var(--blue);white-space:nowrap}

/* ===== UX 25차: 검색 · 로그인 · 쿠폰함 ===== */
/* 검색 사이드 3블록을 독립 패널로 분리 */
.sr-panel{margin:12px 16px 0;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
@media(min-width:1024px){ .sr-panel{margin-left:0;margin-right:0} }
.sr-ph{font-size:14px;font-weight:800;margin-bottom:10px}
.sr-clearall{color:var(--gray);border-style:dashed}
/* 인기 검색어: Top3 배지 + 순위변동은 시세 색상과 분리(중립) */
.sr-rank{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--bg);color:var(--ink-2);font-size:11.5px;font-weight:800}
.sr-rank--top{background:var(--ink-fill);color:#fff}
.sr-tr{font-size:12px;color:var(--gray)}
.sr-tr--up::after{content:" 상승";font-size:10px}
.sr-tr--down::after{content:" 하락";font-size:10px}
/* 결과 상단 보조 검색바 */
.sr-research{display:flex;align-items:center;gap:8px;margin:12px 16px 0;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.sr-research input{flex:1;border:none;outline:none;font-size:14px;background:transparent}
.sr-research button{font-size:16px}
@media(min-width:1024px){ .sr-research{margin-left:0;margin-right:0} }
/* 로그인 수직 리듬 통일 (26/30/18px 혼재 → 20/28px 스케일) */
.lg-logo{margin:28px 0 28px}
.lg-auto{margin-bottom:6px}
.lg-autohelp{margin:0 2px 20px}
.lg-or{display:flex;align-items:center;gap:12px;margin:28px 0}
.btn--kakao{background:var(--kakao);color:var(--kakao-ink);margin-bottom:10px}
.btn--naver{background:var(--naver);color:#fff}
.lg-terms{margin-top:28px;font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.lg-terms a{color:var(--ink);font-weight:700;text-decoration:underline}
/* 쿠폰함 */
.cp-hero{margin:12px 16px 0}
@media(min-width:1024px){ .cp-hero{margin-left:0;margin-right:0} }
.cp-guide{margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--bg)}
.cp-guide summary{font-size:13.5px;font-weight:800;cursor:pointer;list-style:none}
.cp-guide summary::-webkit-details-marker{display:none}
.cp-guide summary::after{content:" ⌄";color:var(--gray)}
.cp-guide[open] summary::after{content:" ⌃"}
.cp-guide a{color:var(--red);font-weight:700}
.cp-onlyuse{display:flex;align-items:center;gap:7px;margin:2px 0 14px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.cp-onlyuse input{width:17px;height:17px;accent-color:var(--red)}
.cp-empty{grid-column:1/-1}

/* ===== UX 26차: 배송지 · 포인트 · 공지 ===== */
/* 배송지 이름 칩 */
.addr-labels .chip{font-size:12.5px}
/* 데스크톱 2열에서 카드 높이가 내용량에 따라 들쭉날쭉하던 것 정리 */
.addr-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;background:var(--surface)}
.addr-card.is-default{border:2px solid var(--red)}
.addr-card__acts{display:flex;gap:8px;margin-top:auto;padding-top:12px}
@media(min-width:1024px){
  .addr-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
  .addr-card{margin-bottom:0}
}
/* 공지 목록 — 최근 글만 옅은 배경으로 스캔성 확보 */
.nt-row > a{display:flex;gap:8px;align-items:center;padding:18px 12px;border-bottom:1px solid var(--line);border-radius:var(--radius-s)}
.nt-row.is-new > a{background:var(--bg)}

/* ===== UX 27차: 남은 항목 마무리 ===== */
/* 홈 — 섹션 제목 이모지를 .qm .ic 와 같은 원형 배지로 통일 */
.section__head h2 .sec-ic,.section__head h3 .sec-ic{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:7px;border-radius:50%;background:var(--bg);font-size:13px;vertical-align:-5px}
.sec-sub{margin:-4px 16px 10px;font-size:12px;color:var(--ink-2)}
@media(min-width:1024px){ .sec-sub{margin-left:0} }
/* 카테고리 — 타이틀 옆 개수 · 개수 강조 / 필터 축소 */
.subhead .title .cat-sub{display:block;font-size:11px;font-weight:400;color:var(--gray);margin-top:2px}
.cat-countrow{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 0}
.cat-count{font-size:15px;font-weight:800;color:var(--ink)}
.cat-count b{color:var(--red)}
.cat-filterbtn{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;padding:6px 11px}
/* 상품 카드 이름 — 2줄 클램프로 자주 잘리던 것 3줄로 */
.pcard .name{font-size:13px;-webkit-line-clamp:3;height:auto;max-height:54px}
/* 랭킹 — 열 소제목 + 행에서 바로 담기 */
.rk-cols{display:none}
@media(min-width:1024px){
  .rk-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;padding:0 0 4px;font-size:12px;font-weight:800;color:var(--gray)}
}
.rk-row{display:flex;align-items:center;gap:8px}
.rk-row > .prow{flex:1;min-width:0}
.rk-add{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--surface);font-size:16px;display:flex;align-items:center;justify-content:center}
.rk-add:hover{border-color:var(--red)}
/* 상품상세 — 갤러리 · 상세 카드 통일 · 설명 문단화 */
.pd-gal{position:relative}
.pd-gal__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pd-gal__track::-webkit-scrollbar{display:none}
.pd-gal__it{flex:0 0 100%;scroll-snap-align:start}
.pd-gal__it img{width:100%;display:block}
.pd-gal__dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}
.pd-gal__dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.15);padding:0}
.pd-gal__dot.on{background:var(--red);border-color:var(--red)}
.pd-gal__cnt{position:absolute;right:12px;top:12px;background:rgba(0,0,0,.45);color:#fff;font-size:11.5px;padding:3px 9px;border-radius:20px}
.pd-dcard{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.pd-dcard img{width:100%;display:block}
.pd-dcard__ph{padding:40px;text-align:center;font-size:72px;background:var(--bg)}
.pd-dbody{padding:16px;font-size:14px;color:var(--ink-2);line-height:1.8;white-space:pre-line}
.pd-descline{display:block;margin-top:6px}
.pd-descline:first-child{margin-top:0}
/* 배송 관련 CTA 색상 언어 통일 (전역 배송 톤 = blue) */
.btn--ship{background:var(--blue);color:#fff}
.btn--ship:hover{filter:brightness(.95)}
/* 결제 — 하단바에 최종 금액 상시 노출 */
.co-buybar{flex-direction:column;align-items:stretch;gap:8px}
.co-buybar__sum{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.co-buybar__sum b{font-size:18px;color:var(--red);font-weight:900}
/* 주문완료 — 완료 모먼트 배경 */
.oc--celebrate{background:linear-gradient(180deg,var(--red-tint) 0%,var(--bg) 220px)}
/* 배송조회 — 상태별 타임라인 시안 */
.dv-preview{display:flex;flex-direction:column;gap:16px}
.dv-pv{border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.dv-pv__t{font-size:12.5px;font-weight:800;margin-bottom:10px}
.dv-pv__row{display:flex;align-items:flex-start;text-align:center}
.dv-pv__s{flex:1;position:relative;font-size:10.5px;color:var(--gray)}
.dv-pv__s span.is-cur{color:var(--red);font-weight:800}
.dv-pv__c{width:26px;height:26px;border-radius:50%;margin:0 auto 5px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:var(--bg);color:var(--gray)}
.dv-pv__c.is-done{background:var(--red);color:#fff}
.dv-pv__c.is-cur{box-shadow:0 0 0 4px var(--red-tint)}
.dv-pv__l{position:absolute;top:13px;left:50%;width:100%;height:2px;background:var(--line);z-index:-1}
.dv-pv__l.is-done{background:var(--red)}
.dv-pv__m{margin-top:10px;font-size:12px;color:var(--ink-2);text-align:center}

/* ===== UX 28차: 계정 찾기 ===== */
/* 탭은 필터칩과 상호작용이 달라 밑줄 인디케이터 전용 스타일 */
.fa-tabs{border-bottom:1px solid var(--line);gap:0;padding:0 16px}
.fa-tabs .chip{flex:1;justify-content:center;text-align:center;background:transparent;border:0;border-radius:0;border-bottom:2px solid transparent;padding:13px 0;font-size:14px;font-weight:700;color:var(--gray)}
.fa-tabs .chip.on{background:transparent;color:var(--red);border-bottom-color:var(--red);font-weight:800}
@media(min-width:1024px){ .fa-tabs{padding:0} }
.fa-lead{display:flex;align-items:flex-start;gap:8px;margin-bottom:18px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.fa-lead__ic{font-size:17px;flex-shrink:0;line-height:1.35}
.fa-lead b{color:var(--ink)}
/* 탭 전환 페이드 */
.fa-in{animation:faIn .22s ease both}
@keyframes faIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .fa-in{animation:none} }

/* 결제금액 변경 안내 (화면 표시 금액과 실제 청구액이 다를 때) */
.oc-diff{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;padding:13px 14px;border:1px solid var(--red);border-radius:var(--radius);background:var(--red-tint)}
.oc-diff b{font-size:14px;color:var(--red)}
.oc-diff span{font-size:13px;color:var(--ink)}
.oc-diff small{font-size:11.5px;color:var(--ink-2);line-height:1.6}
.oc-diff a{color:var(--red);font-weight:700}

/* [2026-09-03 품질 스윕] 결제 하단바를 세로 배치로 바꾸면서 .buybar .btn{flex:1} 이 세로로 작동해
   결제 버튼 높이가 21px로 찌그러졌음(주 CTA가 사실상 눌리지 않는 크기) — 본래 높이 복구 */
.co-buybar .btn{flex:0 0 auto}
/* 독립 컨트롤 최소 터치 영역(WCAG 2.2 2.5.8) — 본문 안 인라인 링크는 예외라 건드리지 않음 */
.section__head a{display:inline-flex;align-items:center;min-height:24px;padding:0 2px}
.crumb a{display:inline-flex;align-items:center;min-height:24px}
/* [2026-09-11 BR-046] 터치영역(WCAG 2.2 2.5.8 최소 24×24)을 360px 폭에서 전수로 재봤더니,
   위 세 줄로 처리해 둔 것 말고도 24건이 더 남아 있었다 — 약관 동의 라벨 21px, 로그인 보조링크 20px,
   "보기" 링크 18px, 마이페이지 화살표 7px 너비, 개인정보 처리방침의 기관 링크 15px 등.
   손가락이 큰 사용자나 흔들리는 차 안에서 누르기 어려운 크기라 같은 방식으로 넓힌다. */
.tap{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
/* [2026-09-11 BR-047] 본문 바로가기 — 화면낭독기·키보드 사용자는 페이지마다 헤더와 카테고리 메뉴를
   전부 지나서야 본문에 닿았다. 평소엔 화면 밖에 있다가 탭으로 포커스가 오면 나타난다. */
.skip-main{position:absolute;left:8px;top:-48px;z-index:200;padding:10px 16px;border-radius:0 0 8px 8px;
  background:var(--red);color:var(--on-brand,#fff);font-size:14px;font-weight:700;transition:top .15s}
.skip-main:focus{top:0}
.check{min-height:24px}
.crumb a{min-width:24px;justify-content:center}
/* 표 안 링크(개인정보 처리방침의 신고기관 등)와 동의행의 "보기" 링크 */
.table td a,.dtable td a,.agree-item a,.lg-links a{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
.footer__links a{display:inline-flex;align-items:center;min-height:24px}
/* [2026-09-09 BR-043] 이 min-width 가 flex 항목의 기본 min-width:auto 를 덮어써서, 가로 스크롤로
   흘러야 할 메뉴가 전부 32px 로 찌그러지고 white-space:nowrap 글자가 옆 항목 위로 넘쳐 겹쳤다
   (홈 상단 "당당시리즈·소용량(1kg↓)·낱개"가 서로 포개져 읽히지 않았음).
   터치영역(32px)은 그대로 두되 줄어들지는 않게 해서, 원래 의도대로 가로 스크롤이 되게 한다. */
.gnb a{min-width:32px;justify-content:center;flex:0 0 auto}

/* [2026-09-04 PC-005·006] 상품 조회 실패 안내 */
.pd-unavailable{max-width:520px;margin:56px auto;padding:36px 26px;text-align:center}
.pd-unavailable__ic{font-size:46px;opacity:.55}
.pd-unavailable__t{margin-top:12px;font-size:17px;font-weight:800}
.pd-unavailable__d{margin-top:8px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.pd-unavailable__a{display:flex;gap:8px;justify-content:center;margin-top:20px}
.pd-unavailable__a .btn{min-width:140px}

/* [2026-09-04 OD-007·008] 배송조회 대상이 없거나 조회 실패 시 안내 */
.dv-none{max-width:520px;margin:56px auto;padding:36px 26px;text-align:center}
.dv-none__ic{font-size:46px;opacity:.55}
.dv-none__t{margin-top:12px;font-size:17px;font-weight:800}
.dv-none__d{margin-top:8px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.dv-none__a{display:flex;gap:8px;justify-content:center;margin-top:20px}
.dv-none__a .btn{min-width:140px}
/* [2026-09-04 BR-038] 카드 하트를 실제 누를 수 있는 컨트롤로 */
.pcard .heart[data-wish-toggle]{cursor:pointer;z-index:3}

/* [2026-09-04 AU-032] 로그인 필요/세션 만료 안내 */
.lg-reason{margin:0 0 16px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);font-size:12.5px;color:var(--ink-2);line-height:1.6}

/* [2026-09-04 GL] 작성 중이던 폼 내용 복원 안내 */
.draft-note{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);font-size:12.5px;color:var(--ink-2)}

/* [2026-09-04 GL] 인쇄 — 주문서·거래내역 인쇄 시 내비게이션·버튼 제외 */
@media print{
  .tabbar,.buybar,.header,.subhead,.totop,.chips,.hero__nav,.hero__count,
  .sp-nav,.iq-tabs,.co-actions,.dv-actions,.pwa-banner,#pwaBanner{display:none!important}
  body{background:var(--surface)}
  .app{max-width:none;padding-bottom:0}
  .section,.pad{break-inside:avoid}
  a[href]:after{content:""}
  .oh-acts,.my-mi__ar,.btn{display:none!important}
  .divider{background:none;border-top:1px solid #ddd;height:0}
}

/* [2026-09-04 BR-039] 목록으로 돌아왔을 때 방금 본 상품을 잠깐 표시 */
.pcard.is-returned{box-shadow:0 0 0 2px var(--red);border-radius:var(--radius);transition:box-shadow .3s}

/* 주문완료 품목 요약 — [OD-035] 금액만 있고 무엇을 주문했는지가 없어 확인할 방법이 없었음 */
.oc-items{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.oc-items__h{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:8px}
.oc-items__r{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.oc-items__r:first-of-type{border-top:0}
.oc-items__e{font-size:20px;flex-shrink:0}
.oc-items__n{flex:1;min-width:0;font-size:13px;color:var(--ink);line-height:1.4}
.oc-items__n small{display:block;color:var(--gray);font-size:11px;margin-top:2px}
.oc-items__p{font-size:13px;font-weight:700;white-space:nowrap}

/* 로그인 상태에서 인증 화면에 들어왔을 때의 안내 — [AU-014] */
.auth-already{margin:12px 16px 0;padding:14px 16px;background:var(--red-tint);border-radius:var(--radius);display:flex;flex-direction:column;gap:6px}
.auth-already b{font-size:14px;color:var(--ink)}
.auth-already span{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.auth-already__a{display:flex;gap:8px;margin-top:6px}
.auth-already__a .btn{width:auto;flex:1}

/* 로그인 실패 안내 — [AU-009] */
.lg-fail{margin-bottom:12px;padding:12px 14px;border:1px solid var(--red);border-radius:var(--radius-s);background:var(--red-tint);display:flex;flex-direction:column;gap:4px}
.lg-fail b{font-size:13px;color:var(--red)}
.lg-fail span{font-size:12px;color:var(--ink-2);line-height:1.6}
.lg-fail__a a{color:var(--red);font-weight:700}

/* 오프라인 화면 대체 경로 — [CS-040] */
.of-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.of-links a{padding:9px 14px;border:1px solid var(--line);border-radius:20px;font-size:13px;font-weight:700;color:var(--ink-2);background:var(--surface)}
.of-tel{margin-top:16px;font-size:13px;color:var(--gray);line-height:1.7;text-align:center}
.of-tel a{color:var(--red);font-weight:800}
.of-tel small{font-size:11px}

/* 상품 상세 리뷰의 판매자 답변 — [PC-031] */
.pd-rvreply{margin-top:10px;padding:12px 14px;background:var(--bg);border-radius:8px}
.pd-rvreply b{font-size:13px;color:var(--red)}
.pd-rvreply .muted{font-size:12px;margin-left:8px}
.pd-rvreply p{font-size:14px;margin-top:6px;color:var(--ink);white-space:pre-wrap;line-height:1.6}

/* 결제 입력값 복원 안내 — [OD-021·022] */
.co-restored{margin:0 16px 10px;padding:10px 12px;background:var(--red-tint);border-radius:var(--radius-s);font-size:12.5px;color:var(--ink-2);line-height:1.6}

/* 없는 카테고리 주소 안내 — [BR-006] */
.cat-unknown{margin:10px 16px 0;padding:12px 14px;background:var(--red-tint);border-radius:var(--radius-s);font-size:13px;color:var(--ink-2);line-height:1.6}

/* 오프라인 상태 띠 — [CS-039] */
.off-bar{position:sticky;top:0;z-index:200;background:var(--ink-fill);color:#fff;font-size:12px;line-height:1.5;padding:8px 14px;text-align:center}

/* 장바구니 자동 보정 안내 — [PC-016·PC-017] */
.cart-reval{margin:10px 16px;padding:12px 14px;background:var(--red-tint);border-radius:var(--radius-s);font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.cart-reval b{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
.cart-reval span{display:block}

/* 로그아웃 후 복구 제안 — [PC-021] */
.cart-restore{margin:10px 16px 0;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-s);font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:8px}
.cart-restore__a{display:flex;gap:8px}
.cart-restore__a .btn{width:auto;flex:1}

/* 상품 0건 카테고리 퀵메뉴 — [BR-007·009] */
.qm--soon{opacity:.5;position:relative}
.qm-soon{display:block;font-size:9.5px;color:var(--gray);margin-top:1px}

/* 이력조회 모의응답 고지 — [PC-011] */
.tm-mock{margin-top:12px;padding:10px 12px;background:var(--red-tint);border-radius:8px;font-size:11.5px;line-height:1.6;color:var(--ink-2)}
.tm-mock a{color:var(--red);font-weight:700}

/* 결제수단 안내(PG 미연동 사실) — [GL-014] */
.co-paynotice{margin:0 0 12px;padding:11px 13px;background:var(--red-tint);border-radius:var(--radius-s);font-size:12.5px;line-height:1.7;color:var(--ink-2)}

/* 상품 상세 품절 안내 — [PC-043] */
.pd-soldout{margin-top:12px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-s);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.pd-soldout b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}
.pd-soldout a{color:var(--red);font-weight:700}