:root{
  --bg:#f7f5f0;          /* 크림 (세모쇼핑백 톤) */
  --card:#ffffff;
  --ink:#23221d;          /* 차콜 */
  --ink2:#5b584f;
  --mut:#8f8b7f;
  --line:#e8e4d9;
  --line2:#f0ede4;
  --dark:#201f1b;         /* 다크 섹션 */
  --dark2:#2a2924;
  --sage:#7d9a62;         /* 세이지 그린 포인트 */
  --sage-d:#66824e;
  --sage-l:#b9cfa3;
  --sage-bg:#eef2e6;
  --kraft:#c79a6b;        /* 크라프트 */
  --kraft-d:#a97e4f;
  --gold:#c9a24b;
  --red:#c25b4a;
  --r:14px;
  --maxw:1600px; /* 상품 4열(371×278 기준) 수용 폭 — 헤더·GNB·배너·섹션 공통 */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:"Pretendard Variable",Pretendard,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:700;transition:.18s;border:1.5px solid transparent}
.btn-dark{background:var(--ink);color:#fff;padding:11px 24px;font-size:13.5px}
.btn-dark:hover{background:#000}
.btn-line{border-color:var(--ink);color:var(--ink);padding:11px 24px;font-size:13.5px;background:#fff}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-sage{background:var(--sage);color:#fff;padding:11px 24px;font-size:13.5px}
.btn-sage:hover{background:var(--sage-d)}

/* ───────── 헤더 (TAIBE 형태: 로고 좌 / 검색 중앙 / 유틸 우 / 하단 GNB 균등배치) ───────── */
header.smnm{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;transition:box-shadow .25s}
header.smnm.scrolled{box-shadow:0 6px 24px rgba(35,34,29,.09)}
.hd{display:flex;align-items:center;gap:28px;max-width:var(--maxw);margin:0 auto;padding:20px 24px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo img{height:46px;width:auto;display:block}
.logo .lg-b2b{font-size:14px;font-weight:800;color:#fff;background:var(--sage);border-radius:7px;padding:4px 10px;letter-spacing:.05em}
.search{flex:1;display:flex;align-items:center;gap:10px;border:1px solid var(--ink);border-radius:50px;padding:14px 24px;background:#fff}
.search input{border:0;flex:1;font-size:14.5px;font-family:inherit;outline:none;background:transparent}
.search input::placeholder{color:var(--mut)}
.search button{border:0;background:transparent;color:var(--ink);font-size:15px;display:flex;align-items:center}
.hd-util{display:flex;align-items:center;gap:24px;margin-left:auto}
.hd-ico{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--ink);min-width:46px;position:relative;letter-spacing:.02em}
.hd-ico svg{width:20px;height:20px}
.hd-ico:hover{color:var(--sage)}
.hd-ico .bdg{position:absolute;top:-5px;right:4px;background:var(--sage);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.deposit-chip{display:none;align-items:center;gap:8px;background:var(--sage-bg);border:1px solid var(--sage-l);border-radius:999px;padding:8px 16px;font-size:13px;white-space:nowrap}
.deposit-chip b{color:var(--sage-d);font-size:14.5px}
body.member .deposit-chip{display:flex}
body.member .hd-login{display:none}
.hd-login{display:flex;gap:8px}
/* GNB — TAIBE 형태: 상단 구분선 + 좌우 균등 배치 */
.gnb{border-top:1px solid var(--line2)}
.gnb ul{display:flex;justify-content:space-between;align-items:center;max-width:var(--maxw);margin:0 auto;padding:15px 24px}
.gnb a{font-size:15.5px;font-weight:700;letter-spacing:.02em;color:var(--ink);padding:9px 18px;border-radius:9px;transition:.15s;white-space:nowrap}
.gnb a:hover{background:var(--bg);color:var(--sage-d)}
.gnb a.hot{color:var(--sage-d)}
.gnb a.reorder{display:inline-flex;align-items:center;gap:7px;color:var(--kraft-d);background:#faf3ea;border:1px solid #eeddc8;border-radius:999px;padding:9px 20px;font-size:14.5px}
.gnb a.reorder:hover{background:#f3e7d6;color:var(--kraft-d)}
.gnb a.bulkorder{display:inline-flex;align-items:center;gap:7px;color:var(--sage-d);background:var(--sage-bg);border:1px solid var(--sage-l);border-radius:999px;padding:9px 18px;font-size:14.5px}
.gnb a.bulkorder:hover{background:#e4eed6;color:var(--sage-d)}
/* 빠른 재주문 = 승인 판매자(로그인) 전용 — 비로그인 땐 미노출 (GNB·모바일 카테고리바·드로어) */
body:not(.member) .gnb li:last-child,
body:not(.member) .brandbar a.reorder,
body:not(.member) .m-side .m-acct a:last-child{display:none}
/* 장바구니 수량 배지도 로그인 시에만 (PC 헤더·모바일 헤더·드로어) */
body:not(.member) .hd-ico .bdg,
body:not(.member) .m-right .bdg,
body:not(.member) .m-acct .badge{display:none}

/* ───────── 모바일 헤더 (TAIBE 형태: 햄버거/중앙로고/우측아이콘 + 전폭검색 + 가로스크롤 카테고리바) ───────── */
.hd-mb{display:none;position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hd-mb-top{position:relative;display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px}
.hd-mb-top .m-menu{width:26px;font-size:19px;cursor:pointer;display:flex;color:var(--ink)}
.hd-mb-top .logo-m{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.hd-mb-top .logo-m em{font-style:normal;color:var(--sage)}
.hd-mb-top .logo-m svg{width:26px;height:26px}
.hd-mb-top .m-right{display:flex;gap:14px;align-items:center}
.hd-mb-top .m-right a{display:inline-flex;color:var(--ink);position:relative}
.hd-mb-top .m-right svg{width:19px;height:19px}
.hd-mb-top .m-right .bdg{position:absolute;top:-6px;right:-7px;background:var(--sage);color:#fff;font-size:9.5px;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.mb-search{display:flex;align-items:center;gap:8px;margin:0 16px 11px;padding:10px 14px;border:1px solid var(--line);border-radius:50px;background:var(--bg)}
.mb-search svg{width:14px;height:14px;color:var(--mut);flex-shrink:0}
.mb-search input{border:0;background:transparent;flex:1;font-size:12.5px;font-family:inherit;outline:none}
.mb-search input::placeholder{color:var(--mut)}
.brandbar{display:flex;gap:6px;overflow-x:auto;padding:10px 16px;border-top:1px solid var(--line2);scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%)}
.brandbar::-webkit-scrollbar{display:none}
.brandbar a{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;padding:6px 12px;border-radius:999px}
.brandbar a.hot{color:var(--sage-d)}
.brandbar a.reorder{color:var(--kraft-d);background:#faf3ea;border:1px solid #eeddc8}
/* 모바일 드로어 (좌측 슬라이드) */
.m-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;opacity:0;visibility:hidden;transition:.3s}
.m-overlay.on{opacity:1;visibility:visible}
.m-side{position:fixed;top:0;left:0;width:80%;max-width:330px;height:100%;background:#fff;z-index:70;transform:translateX(-100%);transition:.3s;overflow-y:auto;padding:22px 22px 60px}
.m-side.on{transform:translateX(0)}
.m-side .m-close{position:absolute;top:16px;right:18px;font-size:18px;color:var(--mut);cursor:pointer}
.m-side .m-logo{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;margin-bottom:20px}
.m-side .m-logo em{font-style:normal;color:var(--sage)}
.m-side .m-auth{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.m-side .m-auth .btn{width:100%;padding:12px 0;border-radius:10px;font-size:13.5px}
body.member .m-side .m-auth{display:none}
.m-side .m-dep{display:none;background:var(--sage-bg);border:1px solid var(--sage-l);border-radius:12px;padding:14px 16px;margin-bottom:18px;font-size:13px}
.m-side .m-dep b{color:var(--sage-d);font-size:15px}
.m-side .m-dep .gd{float:right;background:linear-gradient(135deg,#e8c86e,#c9a24b);color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px}
body.member .m-side .m-dep{display:block}
.m-side .m-acct{display:flex;flex-direction:column;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.m-side .m-acct a{display:flex;align-items:center;gap:12px;padding:11px 4px;font-size:14px}
.m-side .m-acct a svg{width:18px;height:18px;color:var(--ink)}
.m-side .m-acct .badge{margin-left:auto;background:var(--sage);color:#fff;font-size:10px;border-radius:50px;padding:1px 7px}
.m-side .dm{display:flex;flex-direction:column}
.m-side .dm a{display:block;padding:12px 4px;font-size:14.5px;font-weight:600;border-bottom:1px solid var(--line2)}
.m-side .dm a.hot{color:var(--sage-d)}
@media(max-width:1023px){
  .hd,.gnb{display:none}
  .hd-mb{display:block}
}

/* 로그인 시: 입점 유도·소개성 섹션 숨김 → 배너 다음 바로 상품 */
body.member .guest-only{display:none}
.prods-sec{padding-top:10px}
/* 신상품 구간 (배너 아래) — 승인 판매자 전용 노출 · 4초 자동 슬라이드 캐러셀 */
.new-sec{margin-bottom:64px}
body:not(.member) .new-sec{display:none}
.np-car{position:relative;padding:0 58px} /* 좌우 화살표 전용 여백 — 카드와 겹침 방지 */
.np-vp{overflow:hidden}
.np-track{display:flex;gap:18px;transition:transform .55s ease}
.np-track .pd{flex:0 0 calc((100% - 54px)/4);min-width:0} /* PC 4개 노출 (.prods 4열과 동일 폭) */
@media(max-width:1380px){.np-track .pd{flex-basis:calc((100% - 36px)/3)}} /* 3개 노출 */
@media(max-width:1080px){.np-track .pd{flex-basis:calc((100% - 18px)/2)}} /* 2개 노출 */
@media(max-width:640px){.np-track{gap:10px}.np-track .pd{flex-basis:calc((100% - 10px)/2)}} /* 모바일 2개 (.prods 모바일과 동일) */
.np-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.95);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(35,34,29,.14)}
.np-nav:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.np-nav.prev{left:0}
.np-nav.next{right:0}
.np-nav svg{width:18px;height:18px}
@media(max-width:640px){
  /* 좁아진 캐러셀 카드: 가격 라벨 중간 꺾임 방지 — 라벨 한 줄 유지, 금액은 다음 줄 우측 정렬 */
  .np-track .pd .pr{flex-wrap:wrap;row-gap:1px}
  .np-track .pd .pr .l{white-space:nowrap}
  .np-track .pd .pr>span:last-child{margin-left:auto;white-space:nowrap}
}
/* 모바일 상세페이지 보강 (2026-07-07 사장님 1·2.png): 단가표 가로 스크롤 + 스펙 행 여백 */
@media(max-width:640px){
  .detail-top>*{min-width:0} /* 그리드 아이템 min-width:auto 블로우아웃 방지 — 단가표 min-width가 레이아웃을 밀어내지 않게 */
  .qtable-w{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .qtable{min-width:440px}
  .irows .ir{gap:12px}
  .irows .ir .l{width:74px}
  .irows .ir .v{min-width:0;flex:1}
  /* 선택된 옵션: 좁은 화면에서 옵션명이 9px로 짜부라지던 것 → 옵션명 한 줄 전체 사용, 수량/가격은 다음 줄
     (기본 규칙이 파일 뒤쪽에 있어 특이성 상향 필요) */
  #sit_opt_added .sit_opt_list .opt_name{flex:1 1 100%}
  #sit_opt_added .sit_opt_list .sit_opt_subj{white-space:normal}
  #sit_opt_added .sit_opt_list .sit_opt_prc{margin-left:auto}
}
/* 모바일(≤1024px): 화살표 제거 + 손가락 스와이프 슬라이드 (2026-07-07 사장님 지시) */
@media(max-width:1024px){
  .np-car{padding:0}
  .np-nav{display:none}
  .np-vp{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none}
  .np-vp::-webkit-scrollbar{display:none}
  .np-track{transform:none !important;transition:none}
  .np-track .pd{scroll-snap-align:start}
}

/* ───────── 승인 대기(pending) — 기획서 §2: 승인 전 대기 화면만 표시, 가격/주문 불가 ───────── */
body.pending #mainView>*{display:none!important}
body.pending #mainView>#pendingBox{display:block!important}
body.pending .demo-toggle .st{background:#e8b96e}
#pendingBox{padding:72px 18px 90px}
.pend-card{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:44px 40px;text-align:center}
.pend-card .ic{width:64px;height:64px;border-radius:50%;background:#faf3e2;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:#c9a24b}
.pend-card h2{font-size:23px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.pend-card .sub{font-size:13.5px;color:var(--mut);margin-bottom:26px}
.pend-steps{display:flex;margin:0 auto 26px;max-width:440px;list-style:none;padding:0}
.pend-steps li{flex:1;position:relative;font-size:12px;font-weight:700;color:var(--mut);padding-top:44px} /* 원(10+22px)+글로우와 라벨 겹침 방지 */
.pend-steps li::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:var(--line2);z-index:1}
.pend-steps li::after{content:"";position:absolute;top:20px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;background:var(--line2)}
.pend-steps li:last-child::after{display:none}
.pend-steps li.done{color:var(--sage-d)} .pend-steps li.done::before{background:var(--sage)}
.pend-steps li.now{color:#b8860b} .pend-steps li.now::before{background:#e8c86e;box-shadow:0 0 0 5px #faf3e2}
.pend-info{background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:16px 22px;margin-bottom:20px;text-align:left;font-size:13px}
.pend-info .rr{display:flex;justify-content:space-between;padding:5px 0;gap:12px}
.pend-info .rr .l{color:var(--mut);flex-shrink:0}
.pend-note{font-size:12.5px;color:var(--mut);line-height:1.7;margin-bottom:24px}
.pend-cs{font-size:13px;color:var(--ink2)}
.pend-cs b{font-size:17px;letter-spacing:.03em}
/* 상태칩: 주문접수(§7 상태값) · 예치금 관리자 조정(§7 조정 로그) */
.st-chip.st-new{background:#eef2fa;color:#4a6fa5}
.st-chip.st-adj{background:#f3eefa;color:#7a5aa5}
/* 형태(직사각/정사각) 필터 칩 — 기획서 §4 p.s */
.lst-shape{display:flex;gap:6px;margin-left:14px;margin-right:auto}
.lst-shape a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap}
.lst-shape a.on{background:var(--sage);border-color:var(--sage);color:#fff}
@media(max-width:640px){
  .pend-card{padding:30px 20px}
  .pend-card h2{font-size:19px}
  .pend-steps{max-width:100%}
  #lstBar{flex-wrap:wrap;gap:10px}
  .lst-shape{margin-left:0}
}

/* ───────── 히어로 · 비로그인 (다크 배너 + 로그인박스) ───────── */
.hero{background:var(--dark);color:#f2f0e8;position:relative;overflow:hidden}
/* [126차 2026-07-10] 배너관리(히어로) 이미지 배경일 때 — 장식 원 숨김(사진 위 얼룩 방지) */
.hero.hero-img::before,.hero.hero-img::after{display:none}
.hero::before{content:"";position:absolute;right:-140px;top:-180px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(199,154,107,.24),transparent 65%)}
.hero::after{content:"";position:absolute;left:-160px;bottom:-260px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(125,154,98,.18),transparent 65%)}
.hero .wrap{display:grid;grid-template-columns:1.25fr .9fr;gap:56px;align-items:center;padding-top:68px;padding-bottom:74px;position:relative;z-index:1}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 16px;font-size:12.5px;color:#cfe3b8;font-weight:600;margin-bottom:22px}
.hero h1{font-size:clamp(34px,3.1vw,52px);line-height:1.22;font-weight:800;letter-spacing:-.035em;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--sage-l)}
.hero p.lead{font-size:16.5px;color:#bcb9ac;max-width:560px;margin-bottom:30px}
.hero .cta{display:flex;gap:12px;margin-bottom:34px}
.hero .cta .btn{padding:15px 32px;font-size:15px}
.hero .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.hero .btn-ghost:hover{background:rgba(255,255,255,.1)}
.hero .keys{display:flex;gap:26px}
.hero .keys li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#c9c6b9}
.hero .keys svg{width:17px;height:17px;color:var(--sage-l);flex-shrink:0}
body.member .hero{display:none}
/* 로그인 박스 */
.loginbox{background:#fff;color:var(--ink);border-radius:20px;padding:36px 34px;box-shadow:0 24px 60px rgba(0,0,0,.35);width:100%;max-width:470px;justify-self:end}
.loginbox h3{font-size:19px;font-weight:800;margin-bottom:6px}
.loginbox .sub{font-size:13px;color:var(--mut);margin-bottom:20px}
.loginbox input{width:100%;height:48px;border:1px solid var(--line);border-radius:10px;padding:0 16px;font-size:14px;margin-bottom:9px;font-family:inherit;background:var(--bg);outline:none}
.loginbox input:focus{border-color:var(--sage)}
.loginbox .btn{width:100%;padding:14px 0;border-radius:10px;font-size:14.5px;margin-top:4px}
.loginbox .join{margin-top:16px;text-align:center;font-size:13px;color:var(--mut)}
.loginbox .join a{color:var(--sage-d);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ───────── 히어로 · 로그인 (밝은 파트너 대시보드 배너 — 비로그인과 확실히 구분) ───────── */
.hero-m{display:none;background:linear-gradient(120deg,#eef2e6 0%,#f7f5f0 55%,#f5ead9 100%);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero-m::before{content:"";position:absolute;right:-120px;top:-160px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(125,154,98,.16),transparent 65%)}
body.member .hero-m{display:block}
.hero-m .wrap{display:grid;grid-template-columns:1.25fr .9fr;gap:56px;align-items:center;padding-top:52px;padding-bottom:56px;position:relative;z-index:1}
.hero-m .hello{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:12.5px;font-weight:700;color:var(--sage-d);margin-bottom:18px}
.hero-m .hello .gd{background:linear-gradient(135deg,#e8c86e,#c9a24b);color:#fff;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:999px;letter-spacing:.06em}
.hero-m h1{font-size:clamp(28px,2.5vw,42px);line-height:1.28;font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.hero-m h1 em{font-style:normal;color:var(--sage-d)}
.hero-m p.lead{font-size:15px;color:var(--ink2);margin-bottom:24px}
.hero-m .cta{display:flex;gap:10px;margin-bottom:26px}
.hero-m .cta .btn{padding:14px 28px;font-size:14.5px}
.hero-m .notice-tk{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 18px;font-size:13px;color:var(--ink2);max-width:520px}
.hero-m .notice-tk i{font-style:normal;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:6px;background:var(--sage-bg);color:var(--sage-d);flex-shrink:0}
.hero-m .notice-tk a{margin-left:auto;color:var(--mut);font-size:12px;flex-shrink:0}
/* 내 등급 카드 */
.gradecard{background:#fff;color:var(--ink);border-radius:20px;padding:32px 32px 28px;box-shadow:0 18px 46px rgba(35,34,29,.12);border:1px solid var(--line);width:100%;max-width:490px;justify-self:end}
.gradecard .gc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.gradecard .gc-top .lab{font-size:12px;color:var(--mut);font-weight:600;letter-spacing:.05em;margin-bottom:4px}
.gradecard .gc-top .grade{font-size:26px;font-weight:800;letter-spacing:-.02em}
.gradecard .gc-top .grade small{font-size:13px;color:var(--sage-d);font-weight:700;margin-left:6px}
.gradecard .medal{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#e8c86e,#c9a24b);display:flex;align-items:center;justify-content:center;color:#fff}
.gradecard .bar{height:9px;background:var(--line2);border-radius:5px;overflow:hidden;margin:6px 0 8px}
.gradecard .bar i{display:block;height:100%;width:64%;background:linear-gradient(90deg,var(--sage-l),var(--sage));border-radius:5px}
.gradecard .bar-lab{display:flex;justify-content:space-between;font-size:12px;color:var(--mut)}
.gradecard .gc-rows{margin-top:18px;border-top:1px dashed var(--line);padding-top:16px;display:grid;gap:10px}
.gradecard .gc-rows li{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink2)}
.gradecard .gc-rows b{font-weight:700;color:var(--ink)}
.gradecard .gc-rows b.sg{color:var(--sage-d)}
.gradecard .gc-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.gradecard .gc-btns .btn{padding:11px 0;font-size:13px;border-radius:10px}

/* ───────── 실적 스트립 ───────── */
.stats{background:#fff;border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:38px 24px}
/* [126차 2026-07-10] 실적 항목 1~3개일 때 개수에 맞춰 균등 분할 (4개는 기존 그대로) */
.stats.stats-c1 .wrap{grid-template-columns:1fr}
.stats.stats-c2 .wrap{grid-template-columns:repeat(2,1fr)}
.stats.stats-c3 .wrap{grid-template-columns:repeat(3,1fr)}
.stats .st{text-align:center;position:relative}
.stats .st+.st::before{content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:var(--line)}
.stats b{font-size:clamp(26px,2vw,32px);font-weight:800;letter-spacing:-.02em}
.stats b em{font-style:normal;color:var(--sage)}
.stats span{display:block;font-size:12.5px;color:var(--mut);margin-top:2px}

/* ───────── 공통 섹션 ───────── */
.smnm-page section{padding:clamp(58px,5.6vw,92px) 0}
.smnm-page .mp-panel{padding:0} /* 마이페이지 패널은 위 clamp 패딩 무효화 (요약바~대시보드 사이 빈 여백 제거) */
.sec-h{text-align:center;margin-bottom:44px}
.sec-h .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.16em;color:var(--sage-d);background:var(--sage-bg);border-radius:999px;padding:6px 16px;margin-bottom:14px}
.sec-h h2{font-size:clamp(25px,2.2vw,34px);font-weight:800;letter-spacing:-.03em}
.sec-h h2 .h2-sub{display:block;font-size:.68em;margin-top:6px;letter-spacing:-.02em}
.sec-h p{color:var(--mut);font-size:14.5px;margin-top:8px}

/* ───────── 멤버십 등급 ───────── */
.grades{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.gr{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px 22px 28px;text-align:center;position:relative;transition:.2s;display:flex;flex-direction:column}
.gr:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(35,34,29,.08)}
.gr .nm{font-size:16px;font-weight:800;letter-spacing:.04em;margin-bottom:2px}
.gr .cond{font-size:12px;color:var(--mut);min-height:36px;margin-bottom:12px}
.gr .rate{font-size:clamp(28px,2.2vw,35px);font-weight:800;letter-spacing:-.02em;margin-top:auto;line-height:40px}
.gr .rate small{font-size:1em;font-weight:inherit;color:inherit}
.gr .dot{width:54px;height:54px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:inset 0 -3px 6px rgba(0,0,0,.12),0 4px 12px rgba(35,34,29,.12)}
.gr .dot svg{width:26px;height:26px}
.gr.basic .dot{background:#a8a494}.gr.basic .rate{color:#7a766a}
.gr.silver .dot{background:#9fb3c8}.gr.silver .rate{color:#6e8aa5}
.gr.gold .dot{background:var(--gold)}.gr.gold .rate{color:var(--gold)}
.gr.vip .dot{background:var(--kraft-d)}.gr.vip .rate{color:var(--kraft-d)}
.gr.vvip{background:var(--dark);border-color:var(--dark);color:#f0eee4}
.gr.vvip .dot{background:var(--sage)}
.gr.vvip .cond{color:#9c9a8d}
.gr.vvip .rate{color:var(--sage-l);font-size:20px;line-height:40px;text-align:center;width:100%}
.gr .now{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--sage);color:#fff;font-size:11px;font-weight:700;padding:3px 13px;border-radius:999px;display:none}
/* '내 등급' 배지·현재 등급 하이라이트 — PHP가 현재 등급 카드에만 배지를 렌더하고
   body에 smnm-g-{등급} 클래스를 부여(lib/semonemo.head.inc.php). 데모용 GOLD 고정 규칙을 동적 규칙으로 교체(2026-07-08) */
body.smnm-g-basic .gr.basic, body.smnm-g-silver .gr.silver, body.smnm-g-gold .gr.gold,
body.smnm-g-vip .gr.vip, body.smnm-g-vvip .gr.vvip{border-color:var(--sage);box-shadow:0 10px 30px rgba(125,154,98,.18)}
.grade-note{display:flex;justify-content:center;gap:26px;margin-top:26px;font-size:12.5px;color:var(--mut);flex-wrap:wrap}
.grade-note li{display:flex;align-items:center;gap:6px}
.grade-note svg{width:14px;height:14px;color:var(--sage)}

/* ───────── 수량 할인 — 계단형 단가 차트 ───────── */
.qty-sec{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.qty-stairs{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:end} /* 멤버십 카드(.grades)와 동일 폭·간격 — 좌우 라인 일치 */
.qs{text-align:center;position:relative}
.qs .qs-max{display:inline-block;background:#faf3ea;border:1px solid #eeddc8;color:var(--kraft-d);border-radius:999px;font-size:10.5px;font-weight:800;padding:3px 11px;margin-bottom:7px;letter-spacing:.03em}
.qs .qs-price{font-size:clamp(13px,1.15vw,17px);font-weight:800;margin-bottom:9px;letter-spacing:-.01em}
.qs .qs-price small{font-size:11px;color:var(--mut);font-weight:600}
.qs .qs-bar{height:var(--bh);border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:0 10px 26px rgba(35,34,29,.1)}
.qs .qs-bar b{font-size:clamp(16px,1.7vw,26px);font-weight:800;letter-spacing:-.02em}
.qs .qs-bar span{font-size:11.5px;font-weight:600;opacity:.82}
.qs .qs-rng{margin-top:11px;font-size:clamp(11.5px,1vw,13.5px);font-weight:700;color:var(--ink2)}
.qs.q1 .qs-bar{background:linear-gradient(180deg,#eae5d7,#dcd7c6);color:var(--ink2)}
.qs.q2 .qs-bar{background:linear-gradient(180deg,#cfe0ba,#b9cf9e);color:#41562f}
.qs.q3 .qs-bar{background:linear-gradient(180deg,#a7c487,#90b26e);color:#fff}
.qs.q4 .qs-bar{background:linear-gradient(180deg,#7d9a62,#63804b);color:#fff}
.qs.q5 .qs-bar{background:linear-gradient(180deg,#3a3931,#23221d);color:var(--sage-l)}
/* 스크롤 진입 시 계단이 차오르는 모션 */
.qty-sec.rv .qs-bar{transform:scaleY(.3);opacity:0;transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.7,.3,1),opacity .5s}
.qs:nth-child(2) .qs-bar{transition-delay:.08s}
.qs:nth-child(3) .qs-bar{transition-delay:.16s}
.qs:nth-child(4) .qs-bar{transition-delay:.24s}
.qs:nth-child(5) .qs-bar{transition-delay:.32s}
.qty-sec.in .qs-bar{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.qty-sec.rv .qs-bar{transform:none;opacity:1;transition:none}}
.qty-note{text-align:center;font-size:12.5px;color:var(--mut);margin-top:26px}
.qty-note b{color:var(--ink2)}

/* ───────── 카테고리 ───────── */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* [126차 2026-07-10] 카테고리 카드 1~3개일 때 중앙 정렬 — 카드 폭은 4열 기준 유지, 4개부터는 기존 그리드 */
.cats.cats-c1,.cats.cats-c2,.cats.cats-c3{display:flex;justify-content:center;flex-wrap:wrap}
.cats.cats-c1 .cat,.cats.cats-c2 .cat,.cats.cats-c3 .cat{width:calc((100% - 48px)/4);flex:0 0 auto}
.cat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.2s}
.cat:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(35,34,29,.09)}
.cat .thumb{height:210px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.cat .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.cat:hover .thumb img{transform:scale(1.05)}
.cat .tx{padding:16px 20px 20px;border-top:1px solid var(--line2)}
.cat .tx b{font-size:16px;font-weight:800}
.cat .tx span{display:block;font-size:12.5px;color:var(--mut);margin-top:3px}
.cat .tx .go{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--sage-d);margin-top:10px}

/* ───────── 프로모션 배너 — 자동 슬라이드 (위탁 인기 상품 위) ───────── */
.promo{position:relative;border-radius:18px;overflow:hidden;margin-bottom:44px;box-shadow:0 14px 36px rgba(35,34,29,.12);height:clamp(260px,21vw,368px)}
.promo .pm-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.promo .pm-slide.on{opacity:1;pointer-events:auto}
.promo .pm-slide>img{width:100%;height:100%;object-fit:cover;display:block}
.promo .pm-ov{position:absolute;inset:0;background:linear-gradient(95deg,rgba(24,23,19,.72) 0%,rgba(24,23,19,.42) 46%,rgba(24,23,19,.05) 75%);display:flex;flex-direction:column;justify-content:center;padding:0 clamp(28px,4vw,66px);color:#fff}
.promo .pm-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;background:rgba(185,207,163,.22);border:1px solid rgba(185,207,163,.45);color:#dcebc9;font-size:12px;font-weight:700;letter-spacing:.08em;border-radius:999px;padding:6px 15px;margin-bottom:14px}
.promo h3{font-size:clamp(24px,2.3vw,35px);font-weight:800;letter-spacing:-.03em;line-height:1.3;margin-bottom:8px}
.promo h3 em{font-style:normal;color:#cfe3b0}
.promo p{font-size:14px;color:#e4e1d5;margin-bottom:20px;max-width:440px}
.promo .pm-btn{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:#fff;color:var(--ink);border-radius:999px;padding:12px 26px;font-size:13.5px;font-weight:700}
.promo .pm-btn:hover{background:var(--sage);color:#fff}
.promo .pm-dots{position:absolute;right:24px;bottom:18px;display:flex;gap:7px;z-index:2}
.promo .pm-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.25s}
.promo .pm-dots i.on{background:#fff;width:22px;border-radius:5px}

/* ───────── 상품 그리드 ───────── */
.prods-hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px}
.prods-hd h2{font-size:clamp(24px,1.9vw,30px);font-weight:800;letter-spacing:-.03em}
.prods-hd p{color:var(--mut);font-size:13.5px;margin-top:4px}
.ptabs{display:flex;gap:8px}
.ptabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 20px;font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap;flex-shrink:0}
.ptabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* 상품 4열 고정 — 이미지 등록 규격 371×278(비율 유지, 최대폭에서 실치수 일치) */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pd{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.pd:hover{box-shadow:0 16px 38px rgba(35,34,29,.1);transform:translateY(-3px)}
.pd .ph{width:100%;aspect-ratio:371/278;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pd .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pd:hover .ph img{transform:scale(1.05)}
.pd .flag{position:absolute;top:12px;left:12px;display:flex;gap:5px}
.pd .flag i{font-style:normal;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:6px;white-space:nowrap}
.pd .flag .f-best{background:var(--ink);color:#fff}
.pd .flag .f-md{background:var(--sage);color:#fff}
.pd .flag .f-soldout{background:#b1ada0;color:#fff}
.pd .flag .f-low{background:#faf0ec;color:var(--red);border:1px solid #eed7d1}
.pd .body{padding:16px 18px 18px;border-top:1px solid var(--line2);flex:1;display:flex;flex-direction:column}
.pd .cat-s{font-size:11px;color:var(--mut);font-weight:600;letter-spacing:.03em}
.pd .nm{font-size:14.5px;font-weight:700;margin:3px 0 2px;line-height:1.4}
.pd .spec{font-size:12px;color:var(--mut);margin-bottom:12px}
.pd .prices{border-top:1px dashed var(--line);padding-top:11px;display:grid;gap:4px;margin-bottom:12px}
.pd .pr{display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
.pd .pr .l{color:var(--mut)}
.pd .pr .consumer{color:#b1ada0;text-decoration:line-through}
.pd .pr .base{font-weight:700;font-size:14px}
.pd .pr.benefit .l{color:var(--sage-d);font-weight:700}
.pd .pr.benefit .v{font-weight:800;font-size:16.5px;color:var(--sage-d)}
.pd .pr.benefit .v small{font-size:11px;font-weight:600;margin-left:2px}
.pd .locked{display:flex;justify-content:space-between;align-items:center;background:var(--bg);border:1px dashed var(--line);border-radius:9px;padding:8px 12px;font-size:12px;color:var(--mut);margin-bottom:12px}
.pd .locked a{color:var(--sage-d);font-weight:700;font-size:11.5px}
/* [126차 2026-07-10] 혜택가 전면 공개(발주처) — 비회원 혜택가 숨김/잠금 게이트 제거 */
.pd .moq{display:flex;gap:6px;margin-bottom:13px;flex-wrap:wrap}
.pd .moq i{font-style:normal;font-size:11px;color:var(--ink2);background:var(--bg);border:1px solid var(--line2);border-radius:6px;padding:3px 8px}
.pd .moq i b{font-weight:700}
.pd .buy{display:flex;gap:7px;margin-top:auto}
.pd .stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex-shrink:0}
.pd .stepper button{width:29px;height:38px;border:0;background:#fff;font-size:15px;color:var(--ink2)}
.pd .stepper button:hover{background:var(--bg)}
.pd .stepper input{width:44px;height:38px;border:0;border-left:1px solid var(--line2);border-right:1px solid var(--line2);text-align:center;font-size:13px;font-weight:700;font-family:inherit;outline:none}
.pd .addcart{flex:1;border:0;background:var(--ink);color:#fff;border-radius:9px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px}
.pd .addcart:hover{background:#000}
.pd .addcart svg{width:15px;height:15px}
.pd.soldout .ph{opacity:.45}
.pd.soldout .addcart{background:#c9c5b8;pointer-events:none}
.more-wrap{text-align:center;margin-top:34px}

/* ───────── 이용 절차 ───────── */
.flow-sec{background:var(--dark);color:#eceadf}
.flow-sec .sec-h h2{color:#fff}
.flow-sec .sec-h p{color:#9c9a8d}
.flow-sec .sec-h .tag{background:rgba(125,154,98,.18);color:var(--sage-l)}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fl{background:var(--dark2);border:1px solid #383730;border-radius:var(--r);padding:34px 30px;position:relative}
.fl .no{font-size:12px;font-weight:800;color:var(--sage-l);letter-spacing:.1em;margin-bottom:14px;display:block}
.fl .ic{width:46px;height:46px;border-radius:12px;background:rgba(125,154,98,.16);display:flex;align-items:center;justify-content:center;color:var(--sage-l);margin-bottom:16px}
.fl .ic svg{width:22px;height:22px}
.fl b{font-size:16.5px;font-weight:800;display:block;margin-bottom:6px;color:#fff}
.fl p{font-size:13px;color:#a5a294;line-height:1.6}
.fl .arrow{position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:#4e4d45;z-index:2;font-size:18px}
.fl:last-child .arrow{display:none}

/* ───────── 특징 3종 ───────── */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ft{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:36px 34px}
.ft .ic{width:48px;height:48px;border-radius:13px;background:var(--sage-bg);color:var(--sage-d);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ft .ic svg{width:23px;height:23px}
.ft b{font-size:17px;font-weight:800;display:block;margin-bottom:8px}
.ft p{font-size:13.5px;color:var(--ink2)}
.ft p em{font-style:normal;color:var(--sage-d);font-weight:700}

/* ───────── 공지 / 자료실 ───────── */
.boards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bd{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 34px;min-width:0} /* min-width:0 — nowrap 제목이 그리드 트랙을 부풀려 모바일 가로 오버플로우 되는 것 방지 */
.bd .bd-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.bd .bd-h b{font-size:17px;font-weight:800}
.bd .bd-h a{font-size:12.5px;color:var(--mut)}
.bd li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line2);font-size:13.5px}
.bd li:first-of-type{border-top:0}
.bd li .t{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* flex 아이템 축소 허용 → 말줄임 정상 동작 */
.bd li .t i{font-style:normal;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;margin-right:8px;vertical-align:1px}
.bd li .t .n1{background:var(--sage-bg);color:var(--sage-d)}
.bd li .t .n2{background:#faf3ea;color:var(--kraft-d)}
.bd li .t .n3{background:#f4f1ea;color:var(--mut)}
.bd li .d{color:var(--mut);font-size:12.5px;flex-shrink:0}
.bd.rss li .t::before{content:"⤓";color:var(--sage-d);margin-right:8px;font-size:13px}

/* ───────── 하단 CTA ───────── */
.cta-band{background:linear-gradient(120deg,var(--sage) 0%,#5e7a47 100%);color:#fff;text-align:center;padding:64px 0}
.cta-band h2{font-size:29px;font-weight:800;letter-spacing:-.03em;margin-bottom:10px}
.cta-band p{font-size:14.5px;color:#e5eeda;margin-bottom:26px}
.cta-band .btn{background:#fff;color:var(--ink);padding:15px 38px;font-size:15px}
.cta-band .btn:hover{background:var(--ink);color:#fff}

/* ═════════ 상품 상세 뷰 (같은 파일 내 전환 — #detailView) ═════════ */
#detailView{display:none}
body.vdetail #detailView{display:block}
body.vdetail #mainView{display:none}
.crumb{font-size:13px;color:var(--mut);padding:18px 0 0;display:flow-root} /* flow-root: .sku(float:right)가 밖으로 새어 아래 그리드(.detail-top)를 밀어내는 것 방지 (2026-07-07) */
.crumb a:hover{color:var(--sage-d)}
.crumb .sku{float:right;color:var(--mut)}
.crumb .sku b{color:var(--ink2);font-weight:600}
.detail-top{display:grid;grid-template-columns:minmax(420px,560px) 1fr;gap:clamp(28px,3.5vw,64px);padding:26px 0 60px;align-items:start;clear:both}
.gallery .main{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff}
.gallery .main img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.gallery .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.gallery .thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px;border:1.5px solid var(--line);cursor:pointer;transition:.15s}
.gallery .thumbs img.on,.gallery .thumbs img:hover{border-color:var(--sage)}
.gallery .g-links{display:flex;justify-content:center;gap:26px;margin-top:16px;font-size:12.5px;color:var(--ink2)}
.gallery .g-links a{display:inline-flex;align-items:center;gap:6px}
.gallery .g-links a:hover{color:var(--sage-d)}
.gallery .g-links svg{width:14px;height:14px}
.ipanel .icat{font-size:12.5px;color:var(--mut);font-weight:600}
.ipanel .flags{display:inline-flex;gap:5px;margin-left:8px;vertical-align:1px}
.ipanel .flags i{font-style:normal;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:6px}
.ipanel .f-best{background:var(--ink);color:#fff}
.ipanel .f-md{background:var(--sage);color:#fff}
.ipanel h1{font-size:clamp(21px,1.8vw,27px);font-weight:800;letter-spacing:-.02em;line-height:1.4;margin:6px 0 18px}
.pricebox{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin-bottom:20px}
.pricebox .row{display:flex;align-items:baseline;justify-content:space-between;padding:4px 0}
.pricebox .row .l{font-size:13px;color:var(--mut)}
.pricebox .consumer2{color:#b1ada0;text-decoration:line-through;font-size:14px}
.pricebox .base2{font-size:clamp(24px,2vw,30px);font-weight:800;letter-spacing:-.02em}
.pricebox .base2 small{font-size:14px;font-weight:600;color:var(--ink2)}
.pricebox .row.benefit2{border-top:1px dashed var(--line);margin-top:8px;padding-top:12px}
.pricebox .row.benefit2 .l{color:var(--sage-d);font-weight:700}
.pricebox .row.benefit2 .v{font-size:clamp(20px,1.7vw,25px);font-weight:800;color:var(--sage-d)}
.pricebox .row.benefit2 .v small{font-size:12px;font-weight:600}
.pricebox .locked2{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px dashed var(--line);border-radius:9px;padding:10px 14px;font-size:12.5px;color:var(--mut);margin-top:10px}
.pricebox .locked2 span{flex:1;min-width:0}
.pricebox .locked2 a{color:var(--sage-d);font-weight:700;font-size:12px;white-space:nowrap;flex-shrink:0}
body.member .pricebox .locked2{display:none}
body:not(.member) .pricebox .row.benefit2{display:none}
.irows{border-top:1px solid var(--line);margin-bottom:20px}
.irows .ir{display:flex;gap:18px;padding:12px 4px;border-bottom:1px solid var(--line2);font-size:13.5px}
.irows .ir .l{width:88px;flex-shrink:0;color:var(--mut);font-weight:600}
.irows .ir .v{color:var(--ink2)}
.irows .ir .v b{color:var(--ink);font-weight:700}
.irows .ir .v .tag{display:inline-block;font-size:11px;font-weight:700;color:var(--sage-d);background:var(--sage-bg);border-radius:5px;padding:2px 8px;margin-left:6px;vertical-align:1px}
.qtable-w{margin-bottom:20px}
.qtable-w .qt-h{font-size:13.5px;font-weight:700;margin-bottom:8px}
.qtable-w .qt-h span{font-weight:600;color:var(--mut);font-size:12px;margin-left:8px}
.qtable{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qtable th{background:var(--line2);padding:9px 6px;font-weight:700;font-size:12.5px;border-bottom:1px solid var(--line);white-space:nowrap}
.qtable td{padding:10px 6px;text-align:center;border-bottom:1px solid var(--line2)}
.qtable tr:last-child td{border-bottom:0}
.qtable td.dc{color:var(--sage-d);font-weight:700}
.qtable td.pr{font-weight:700}
.qtable tr.gold td{background:#fbf7ec}
.qtable tr.gold td:first-child{color:var(--gold);font-weight:800}
/* [126차 2026-07-10] 혜택가 전면 공개(발주처 요청 ②) — 비회원 gold행 숨김 제거 (등급별 혜택가 표 가격 행이 비로그인에 안 보이던 잔여 버그) */
.opt{margin-bottom:16px}
.opt label{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:6px}
.opt select{width:100%;height:46px;border:1px solid var(--line);border-radius:10px;padding:0 14px;font-size:13.5px;font-family:inherit;background:#fff;outline:none;color:var(--ink)}
.opt select:focus{border-color:var(--sage)}
.buyrow{display:flex;gap:10px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;flex-wrap:wrap}
.buyrow .stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.buyrow .stepper button{width:38px;height:46px;border:0;background:#fff;font-size:17px;color:var(--ink2)}
.buyrow .stepper button:hover{background:var(--bg)}
.buyrow .stepper input{width:64px;height:46px;border:0;border-left:1px solid var(--line2);border-right:1px solid var(--line2);text-align:center;font-size:15px;font-weight:700;font-family:inherit;outline:none}
.buyrow .boxbtn{border:1px solid var(--line);background:#fff;border-radius:10px;height:46px;padding:0 14px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.buyrow .boxbtn:hover{border-color:var(--sage);color:var(--sage-d)}
.buyrow .total{margin-left:auto;text-align:right}
.buyrow .total .tl{font-size:11.5px;color:var(--mut)}
.buyrow .total .tv{font-size:clamp(19px,1.6vw,24px);font-weight:800;letter-spacing:-.02em}
.buyrow .total .tv small{font-size:12px;font-weight:600;color:var(--ink2)}
.buyrow .total .save{font-size:11.5px;color:var(--sage-d);font-weight:700}
.actbtns{display:grid;grid-template-columns:1fr 1fr 56px;gap:9px}
.actbtns .wish{border:1px solid var(--line);background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.actbtns .wish:hover{color:var(--red);border-color:#eed7d1}
.actbtns .wish svg{width:20px;height:20px}
.actbtns .btn{padding:16px 0;font-size:15px;border-radius:12px}
.actbtns .smnm-bulk-btn{grid-column:1/-1}
body:not(.member) .actbtns .m-only{display:none}
body.member .actbtns .g-only{display:none}
.gate-note{font-size:12px;color:var(--mut);margin-top:10px;text-align:center}
body.member .gate-note{display:none}
.tabs{position:sticky;top:0;z-index:40;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabs ul{display:flex;max-width:var(--maxw);margin:0 auto;padding:0 24px;overflow-x:auto;-webkit-overflow-scrolling:touch} /* 모바일: 탭 가로 스크롤 (오버플로우 방지) */
.tabs li:first-child{margin-left:auto}.tabs li:last-child{margin-right:auto} /* 중앙 정렬 — justify-content:center 대신 auto 마진(가로 스크롤 시 좌측 잘림 방지) */
.tabs a{display:block;padding:16px 26px;font-size:14.5px;font-weight:700;color:var(--mut);border-bottom:2.5px solid transparent;white-space:nowrap}
.tabs a small{font-weight:600;color:var(--sage-d);margin-left:3px}
.tabs a.on,.tabs a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.dsec{padding:54px 0 10px}
#detailView .dsec:last-of-type{padding-bottom:88px} /* 마지막 섹션(함께 보면 좋은 상품)과 푸터 사이 여백 */
.dsec .d-h{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:18px;padding-left:12px;border-left:4px solid var(--sage)}
.dsec .d-h small{font-size:12.5px;color:var(--mut);font-weight:600;margin-left:10px}
table.spec{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.spec th{width:170px;background:var(--line2);padding:12px 18px;text-align:left;font-weight:700;color:var(--ink2);border-bottom:1px solid var(--line);font-size:13px}
table.spec td{padding:12px 18px;border-bottom:1px solid var(--line2);color:var(--ink2)}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
/* [2026-07-25 사장님 지시] 상세설명 이미지 = 업로드 원본 크기 그대로 출력(자동 맞춤).
   기본 제작 규격 860×1200 기준으로 컨테이너 최대폭 860px — 그보다 큰 이미지는 860으로 축소만 하고,
   작은 이미지는 원본 크기 그대로 중앙 배치(강제 확대 금지 → 업스케일 화질저하 제거). */
.dimgs{max-width:860px;margin:26px auto 0;display:grid;gap:14px;justify-items:center}
.dimgs img{max-width:100%;width:auto;height:auto;display:block;margin:0 auto;border-radius:var(--r);border:1px solid var(--line)}
.dimgs .cap{text-align:center;font-size:12px;color:var(--mut)}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rev li{padding:18px 24px;border-bottom:1px solid var(--line2);font-size:13.5px}
.rev li:last-child{border-bottom:0}
.rev .r-top{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.rev .stars{color:var(--gold);font-size:13px;letter-spacing:1px}
.rev .who{font-size:12px;color:var(--mut)}
.rev .q{font-weight:700}
.rev .a{margin-top:8px;background:var(--bg);border-radius:9px;padding:10px 14px;font-size:13px;color:var(--ink2)}
.rev .a b{color:var(--sage-d)}
.rev .badge-q{font-style:normal;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:5px;background:var(--sage-bg);color:var(--sage-d);margin-right:6px}
.policy{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;font-size:13.5px;color:var(--ink2)}
.policy dt{font-weight:800;color:var(--ink);margin:14px 0 4px;font-size:13.5px}
.policy dt:first-child{margin-top:0}
.policy dd{padding-left:2px}
.policy .hl{color:var(--red);font-weight:600}
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rel a{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.2s;display:block}
.rel a:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(35,34,29,.1)}
.rel img{width:100%;aspect-ratio:371/278;object-fit:cover;display:block}
.rel .tx{padding:13px 16px 15px}
.rel .tx .c{font-size:11px;color:var(--mut)}
.rel .tx b{display:block;font-size:13.5px;font-weight:700;margin:2px 0 4px;line-height:1.4}
.rel .tx .p{font-size:14px;font-weight:800}
.rel .tx .p small{font-size:11px;color:var(--mut);font-weight:600}
.mbuy{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;background:#fff;border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));grid-template-columns:52px 1fr 1fr;gap:8px}
.mbuy .wish{border:1px solid var(--line);background:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.mbuy .wish svg{width:19px;height:19px}
.mbuy .btn{padding:14px 0;font-size:14px;border-radius:11px}
body:not(.member) .mbuy .m-only{display:none}
body.member .mbuy .g-only{display:none}
@media(max-width:1080px){
  .detail-top{grid-template-columns:1fr;gap:30px;padding-bottom:40px}
  .gallery{max-width:560px;margin:0 auto;width:100%}
  .spec-grid{grid-template-columns:1fr}
  .rel{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1023px){
  body.vdetail .mbuy{display:grid}
  body.vdetail .actbtns{display:none}
  body.vdetail .demo-toggle{bottom:86px}
  body.vdetail{padding-bottom:76px}
}
@media(max-width:640px){
  .detail-top{padding-top:14px}
  .buyrow .total{width:100%;margin-left:0}
  .rel{grid-template-columns:1fr 1fr;gap:10px}
  .tabs a{padding:14px 14px;font-size:13px}
  .dsec{padding:40px 0 6px}
}

/* ═════════ 마이페이지 뷰 (#mypageView — 로그인 판매자 전용, 마니팜 파트너포털 참조) ═════════ */
#mypageView{display:none}
body.vmypage #mypageView{display:block}
body.vmypage #mainView,body.vmypage #detailView{display:none}
body.vdetail #mypageView{display:none}
/* 상단 요약바 (마니팜: 예치금·적립금·결제대기 상시 노출) */
.mp-topbar{background:var(--dark);color:#d8d5c8;font-size:13px}
.mp-topbar .wrap{display:flex;align-items:center;gap:26px;height:46px}
.mp-topbar b{color:#fff}
.mp-topbar .tv{color:var(--sage-l);font-weight:800}
.mp-topbar .warn{color:#e8b96e;font-weight:800}
.mp-topbar .sp{flex:1}
.mp-topbar a{font-size:12px;color:#b6b3a8;text-decoration:underline;text-underline-offset:3px}
/* [2026-07-14] 요약바 항목(예치금·적립금·결제대기·진행중 주문) 가운데 정렬 — 충전안내 링크는 우측 고정(데스크톱). 모바일(≤768)은 기존 가로 스크롤 유지 */
@media(min-width:769px){
  .mp-topbar .wrap{justify-content:center;position:relative}
  .mp-topbar .wrap>.sp{display:none}
  .mp-topbar .wrap>a{position:absolute;right:24px}
}
/* 레이아웃: 좌 사이드바 + 우 콘텐츠 */
.mp-wrap{display:grid;grid-template-columns:236px 1fr;gap:30px;padding:32px 0 90px;align-items:start}
.mp-wrap>*{min-width:0} /* 그리드 아이템 축소 허용 — 내부 표/버튼줄이 트랙을 부풀려 모바일 가로 오버플로우 되는 것 방지 */
.mp-side{position:sticky;top:90px}
.mp-side .who{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:14px}
.mp-side .who .nm{font-size:15.5px;font-weight:800}
.mp-side .who .gd{display:inline-block;background:linear-gradient(135deg,#e8c86e,#c9a24b);color:#fff;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:999px;margin-left:6px;vertical-align:1px}
.mp-side .who .bz{font-size:11.5px;color:var(--mut);margin-top:2px}
.mp-side nav{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.mp-side nav a{display:flex;align-items:center;gap:10px;padding:13px 18px;font-size:14px;font-weight:600;color:var(--ink2);border-bottom:1px solid var(--line2);cursor:pointer}
.mp-side nav a:last-child{border-bottom:0}
.mp-side nav a svg{width:17px;height:17px;flex-shrink:0}
.mp-side nav a:hover{background:var(--bg)}
.mp-side nav a.on{background:var(--sage-bg);color:var(--sage-d);font-weight:800;border-left:3px solid var(--sage);padding-left:15px}
.mp-side nav a .cnt{margin-left:auto;background:var(--sage);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px}
.mp-side .qbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--dark);color:#eceadf;border-radius:11px;padding:12px 0;font-size:13px;font-weight:700;margin-bottom:8px}
.mp-side .qbtn:hover{background:#000}
.mp-side .qbtn.alt{background:#fff;color:var(--ink2);border:1px solid var(--line)}
.mp-side .qbtn.alt:hover{border-color:var(--sage);color:var(--sage-d);background:#fff}
.mp-side .cs{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;text-align:center;margin-top:6px}
.mp-side .cs .l{font-size:11px;color:var(--mut);font-weight:700}
.mp-side .cs .tel{font-size:18px;font-weight:800;letter-spacing:-.01em}
/* 콘텐츠 패널 */
.mp-panel{display:none;padding:0} /* 전역 section 패딩 무효화 — 좌측 박스 라인 정렬 */
.mp-panel.on{display:block}
.mp-h{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:16px;display:flex;align-items:center;gap:10px}
/* 패널 첫 헤딩 = 좌측 (주)베리나인 프로필 박스와 같은 높이대 → 아래 콘텐츠가 좌측 메뉴 박스 상단 라인과 정렬 */
.mp-panel>.mp-h:first-child{min-height:83px;margin-bottom:14px;padding-top:2px}
.mp-h small{font-size:12px;color:var(--mut);font-weight:600}
.mp-h .rt{margin-left:auto;display:flex;gap:8px}
.mp-h .rt .btn{padding:9px 18px;font-size:12.5px}
/* 대시보드 카드 */
.mp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.mpc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.mpc .l{font-size:12px;color:var(--mut);font-weight:700;display:flex;align-items:center;gap:6px}
.mpc .l svg{width:14px;height:14px;color:var(--sage-d)}
.mpc .v{font-size:clamp(19px,1.5vw,24px);font-weight:800;letter-spacing:-.02em;margin-top:6px}
.mpc .v small{font-size:12px;font-weight:600;color:var(--mut)}
.mpc .sub{font-size:11.5px;color:var(--mut);margin-top:3px}
.mpc .sub em{font-style:normal;color:var(--sage-d);font-weight:700}
.mpc.hl{background:var(--sage-bg);border-color:var(--sage-l)}
.mpc.hl .v{color:var(--sage-d)}
/* 등급 진행바 (대시보드) */
.mp-grade{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;margin-bottom:22px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.mp-grade .medal{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#e8c86e,#c9a24b);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.mp-grade .gtx{flex:1;min-width:260px}
.mp-grade .gtx .t{font-size:15px;font-weight:800}
.mp-grade .gtx .t em{font-style:normal;color:var(--gold)}
.mp-grade .bar{height:9px;background:var(--line2);border-radius:5px;overflow:hidden;margin:9px 0 7px}
.mp-grade .bar i{display:block;height:100%;width:64%;background:linear-gradient(90deg,var(--sage-l),var(--sage));border-radius:5px}
.mp-grade .bl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut)}
/* 공통 테이블 */
.mtb-w{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mtb-scroll{overflow-x:auto}
.mtb{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
.mtb th{background:var(--line2);padding:11px 14px;font-weight:700;font-size:12.5px;color:var(--ink2);white-space:nowrap;text-align:left}
.mtb td{padding:12px 14px;border-top:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.mtb td.num{text-align:right;font-weight:700;color:var(--ink)}
.mtb .it{font-weight:700;color:var(--ink)}
.mtb .sub{font-size:11px;color:var(--mut);font-weight:400}
/* 신청 내역 표: 모든 셀 중앙정렬 (.num 우측정렬도 override) */
.mtb.mtb-center th,.mtb.mtb-center td,.mtb.mtb-center td.num{text-align:center}
/* 상태 칩 */
.st-chip{display:inline-block;font-size:11px;font-weight:800;border-radius:6px;padding:3px 10px}
.st-wait{background:#faf3ea;color:var(--kraft-d)}
.st-paid{background:#eef1f6;color:#5a7396}
.st-ready{background:var(--sage-bg);color:var(--sage-d)}
.st-done{background:#f0efe9;color:var(--mut)}
.st-ship{background:#eaf3f0;color:#2f7d64}
.st-cancel{background:#faf0ec;color:var(--red)}
.st-plus{background:var(--sage-bg);color:var(--sage-d)}
.st-minus{background:#faf0ec;color:var(--red)}
/* 주문 상태 탭 (마니팜: 상태별 서브메뉴) */
.mp-tabs{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.mp-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 17px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.mp-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mp-tabs button i{font-style:normal;font-weight:600;color:var(--mut);margin-left:3px;font-size:11px}
.mp-tabs button.on i{color:#cfcabc}
/* 테이블 내 미니 버튼 */
.mini-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font-size:11.5px;font-weight:700;color:var(--ink2);cursor:pointer}
.mini-btn:hover{border-color:var(--sage);color:var(--sage-d)}
.mini-btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.mini-btn.dark:hover{background:#000}
/* 예치금 패널 */
.dep-top{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-bottom:22px}
.dep-bal{background:linear-gradient(120deg,var(--sage) 0%,#5e7a47 100%);color:#fff;border-radius:var(--r);padding:26px 30px}
.dep-bal .l{font-size:12.5px;color:#dcebc9;font-weight:700}
.dep-bal .v{font-size:clamp(26px,2.2vw,34px);font-weight:800;letter-spacing:-.02em;margin:4px 0 14px}
.dep-bal .v small{font-size:14px;font-weight:600}
.dep-bal .btn{background:#fff;color:var(--ink);padding:10px 22px;font-size:12.5px;border-radius:9px}
.dep-bal .btn:hover{background:var(--ink);color:#fff}
.dep-info{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;font-size:13px;color:var(--ink2)}
.dep-info b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:8px}
.dep-info .acct{background:var(--bg);border:1px dashed var(--line);border-radius:9px;padding:10px 14px;font-weight:700;color:var(--ink);margin:8px 0}
.dep-info .memo{font-size:11.5px;color:var(--mut)}
/* 판매자 정보 패널 */
.mp-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.mp-note{background:var(--sage-bg);border:1px solid var(--sage-l);border-radius:11px;padding:13px 18px;font-size:12.5px;color:#4e6b3a;margin-top:14px}
.mp-note b{font-weight:800}
/* 반응형 */
@media(max-width:1080px){
  .mp-wrap{grid-template-columns:1fr;gap:16px;padding:18px 0 60px}
  .mp-side{position:static}
  .mp-side nav{display:flex;overflow-x:auto;scrollbar-width:none;margin-bottom:0}
  .mp-side nav a{border-bottom:0;border-right:1px solid var(--line2);white-space:nowrap}
  .mp-side nav a.on{border-left:0;padding-left:18px}
  .mp-side .who,.mp-side .qbtn,.mp-side .cs{display:none}
  /* 데스크톱 프로필 박스 정렬용 min-height는 모바일에서 불필요 → 상단 과다 여백 제거 */
  .mp-panel>.mp-h:first-child{min-height:0;padding-top:0;margin-bottom:14px}
  .mp-cards{grid-template-columns:repeat(2,1fr)}
  .dep-top{grid-template-columns:1fr}
  .mp-info-grid{grid-template-columns:1fr}
  .mp-topbar .wrap{overflow-x:auto;gap:18px;scrollbar-width:none}
  .mp-topbar .wrap::-webkit-scrollbar{display:none}
  .mp-topbar .wrap>span,.mp-topbar .wrap>a{white-space:nowrap;flex-shrink:0}
}
@media(max-width:640px){
  .mp-cards{grid-template-columns:1fr 1fr;gap:8px}
  .mpc{padding:14px 15px}
  .mp-h .rt{display:none}
}

/* ───────── 푸터 ───────── */
/* 푸터 — TAIBE 형태 (PC: 정보행+호스팅+카피 / 모바일: 로고·CS전화·링크·사업자정보) */
footer.ftr{margin-top:70px;border-top:1px solid var(--line);background:#f0efec}
.ftr-pc .wrap{padding:46px 24px 56px}
.ftr-pc p{font-size:13px;color:#6d6a60;line-height:1.5;margin-bottom:15px;letter-spacing:.01em}
.ftr-pc .sep{color:#d4d2ca;margin:0 12px}
.ftr-pc .biz-confirm{display:inline-block;background:#e4e2db;color:#8a877c;font-size:11px;padding:3px 10px;margin-left:8px;border-radius:4px;cursor:pointer}
.ftr-pc .host{color:#8f8b7f}
.ftr-pc .copy{font-size:12px;color:#b5b2a6;margin-top:26px;margin-bottom:0;letter-spacing:.02em}
.ftr-pc .copy b{color:#8f8b7f;font-weight:600}
.ftr-mb{display:none}
.ftr-mb .wrap{padding:40px 18px 70px}
.ftr-mb .flogo{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.ftr-mb .flogo img{height:24px;width:auto}
.ftr-mb .flogo em{font-style:normal;font-size:10px;font-weight:800;color:#fff;background:var(--sage);border-radius:6px;padding:3px 7px;letter-spacing:.06em}
.ftr-mb .cs{font-size:21px;font-weight:800;letter-spacing:.04em;color:var(--ink)}
.ftr-mb .cs small{display:block;font-size:11px;color:var(--mut);font-weight:500;letter-spacing:0;margin-top:5px}
.ftr-mb .links{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:12px;margin:20px 0}
.ftr-mb .links a{color:var(--ink2);font-weight:600}
.ftr-mb .biz{font-size:11px;color:var(--mut);line-height:1.8;margin-top:18px}
@media(max-width:1024px){
  .ftr-pc{display:none}
  .ftr-mb{display:block}
}

/* ───────── 스크롤 리빌 + TOP 버튼 ───────── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.top-btn{position:fixed;left:22px;bottom:22px;z-index:98;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink2);font-size:16px;box-shadow:0 8px 24px rgba(35,34,29,.14);opacity:0;visibility:hidden;transition:.25s;display:flex;align-items:center;justify-content:center}
.top-btn.show{opacity:1;visibility:visible}
.top-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* ───────── 플로팅 퀵메뉴 (PC 전용 · 비로그인 클릭=승인 판매자 안내) — TAIBE .quick 스타일 이식(캡슐·다크보더, 포인트=세이지) ───────── */
.quickbar{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:97;background:var(--card);border:1px solid var(--ink);border-radius:46px;padding:12px 8px;box-shadow:0 8px 26px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:5px}
.quickbar .qb-item{position:relative;border:0;background:none;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:7px;width:68px;padding:12px 0;font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:.01em;border-radius:13px}
.quickbar .qb-item:hover{color:var(--sage-d)}
.quickbar .qb-item svg{width:25px;height:25px;stroke-width:1.8}
.quickbar .qb-n{position:absolute;top:5px;right:7px;min-width:18px;height:18px;border-radius:9px;background:var(--sage-d);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}
.quickbar .qb-top{border:0;background:none;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:5px;width:68px;margin-top:4px;border-top:1px solid var(--line);padding:11px 0 7px;font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--ink)}
.quickbar .qb-top svg{width:21px;height:21px;stroke-width:2}
.quickbar .qb-top:hover{color:var(--sage-d)}
.qb-pop{position:absolute;right:calc(100% + 14px);top:-1px;width:330px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(35,34,29,.16);padding:18px;display:none;text-align:left;cursor:default}
.qb-pop.on{display:block}
.qb-pop .qp-h{font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.qb-pop .qp-h small{font-size:12px;color:var(--mut);font-weight:600}
.qb-pop .qp-row{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:12px;cursor:pointer}
.qb-pop .qp-row:hover{background:var(--bg)}
.qb-pop .qp-row img{width:56px;height:42px;object-fit:cover;border-radius:9px;border:1px solid var(--line2);flex-shrink:0}
.qb-pop .qp-row .tx{min-width:0}
.qb-pop .qp-row .tx b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qb-pop .qp-row .tx span{font-size:12px;color:var(--mut)}
.qb-pop .qp-empty{font-size:13px;color:var(--mut);text-align:center;padding:22px 20px 16px;line-height:1.7} /* [2026-07-21 ⓐ] 좌우 여백 20px */
.qb-pop .qp-more{display:block;width:100%;margin-top:12px;padding:12px 0;border:1px solid var(--line);border-radius:11px;background:var(--bg);font-family:inherit;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;text-align:center}
.qb-pop .qp-more:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.qb-pop.qb-cspop{width:290px;top:auto;bottom:-1px}
.qb-cspop .tel{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:5px}
.qb-cspop .hrs{font-size:12.5px;color:var(--mut);line-height:1.7;margin-bottom:14px}
.qb-cspop a.call{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;border-radius:11px;padding:13px 0;font-size:14px;font-weight:700;text-decoration:none}
.qb-cspop a.call:hover{background:#000}
.qb-cspop a.call svg{width:16px;height:16px}
/* 마이페이지 최근 본 상품·관심상품 그리드 (mp-body 폭 기준 3열) */
#mpRecentGrid,#mpWishGrid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){#mpRecentGrid,#mpWishGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){#mpRecentGrid,#mpWishGrid{grid-template-columns:repeat(2,1fr)}}
/* 관심상품(하트) 활성 + 마이페이지 해제 칩 */
.actbtns .wish.on,.mbuy .wish.on{color:var(--red);border-color:#eed7d1;background:#faf0ec}
.actbtns .wish.on svg path,.mbuy .wish.on svg path{fill:currentColor}
.wish-del{position:absolute;top:10px;right:10px;z-index:3;border:1px solid var(--line);background:rgba(255,255,255,.94);border-radius:999px;padding:6px 12px;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--ink2);cursor:pointer}
.wish-del:hover{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:640px){.wish-del{top:auto;bottom:10px}} /* 모바일 좁은 카드: 플래그(BEST 등)와 겹침 방지 — 우하단 배치 */
/* ───────── 헤더 커뮤니티 호버 드롭다운 (TAIBE .ddwrap/.dd-panel 이식) ───────── */
.ddwrap{position:relative;cursor:pointer}
.ddwrap .dd-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:158px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 0;opacity:0;visibility:hidden;transition:.18s;z-index:120;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.ddwrap:hover .dd-panel{opacity:1;visibility:visible}
.dd-panel a{display:block;padding:10px 18px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink);white-space:nowrap;text-align:center}
.dd-panel a:hover{color:var(--sage-d);background:var(--bg)}
.deposit-chip{cursor:pointer;transition:transform .12s,background .15s,border-color .15s;user-select:none}
.deposit-chip:hover{border-color:var(--sage);background:#e9efdd}
.deposit-chip:active{transform:scale(.97);background:#dde7cc;border-color:var(--sage-d)}
/* ═════════ 커뮤니티 뷰 (#commView — 상품 후기 · 판매자 문의 · 이벤트 · FAQ) ═════════ */
#commView{display:none;padding-bottom:90px}
body.vcomm #commView{display:block}
body.vcomm #mainView{display:none}
.cm-panel{display:none;padding:0} /* 전역 section 패딩 무효화 (마이페이지 mp-panel과 동일 이슈) */
.cm-panel.on{display:block}
.cm-list{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cm-row{padding:18px 22px;border-top:1px solid var(--line2)}
.cm-row:first-child{border-top:0}
.cm-row .stars{color:var(--kraft-d);letter-spacing:2px;font-size:13px}
.cm-row .who{font-size:12px;color:var(--mut);margin-left:8px}
.cm-row .pd-lnk{font-size:12.5px;font-weight:700;color:var(--sage-d);cursor:pointer}
.cm-row .bd2{font-size:13.5px;color:var(--ink2);line-height:1.7;margin-top:7px}
.cm-form input,.cm-form select,.cm-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink)}
.cm-form label{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin:14px 0 6px}
.cm-submit{display:block;margin:20px auto 0;width:220px;padding:14px 0;background:var(--ink);color:#fff;border:0;border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;cursor:pointer;text-align:center}
.cm-submit:hover{background:#000}
.cm-submit:active{transform:scale(.98)}
.iq-st{display:inline-flex;align-items:center;border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:700}
.iq-st.done{background:var(--sage-bg);color:var(--sage-d)}
.iq-st.wait{background:#faf3e2;color:#a97e4f}
.ev-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ev-card .ev-bdg{display:inline-flex;border-radius:999px;padding:5px 13px;font-size:11.5px;font-weight:800;background:var(--sage-bg);color:var(--sage-d);margin-bottom:8px}
.ev-card .ev-bdg.end{background:var(--line2);color:var(--mut)}
.ev-card b{display:block;font-size:16px;letter-spacing:-.01em}
.ev-card .ev-p{font-size:13px;color:var(--mut);margin-top:5px;line-height:1.65}
.cm-faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.cm-faq summary{padding:16px 20px;font-size:14px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.cm-faq summary::-webkit-details-marker{display:none}
.cm-faq summary::after{content:'+';font-size:18px;color:var(--mut);flex-shrink:0}
.cm-faq details[open] summary::after{content:'−'}
.cm-faq .fa-b{padding:0 20px 16px;font-size:13px;color:var(--ink2);line-height:1.75}
body:not(.member) #cm-inquiry .m-only{display:none}
body.member #cm-inquiry .g-only{display:none}
@media(max-width:1080px){.iq-grid{grid-template-columns:1fr!important}}
@media(min-width:1025px){.top-btn{display:none!important}} /* PC는 퀵메뉴 하단 TOP으로 통합 */
@media(max-width:1024px){.quickbar{display:none}}          /* 모바일·태블릿 미노출 */
.dsec{scroll-margin-top:70px}

/* ═════════ 장바구니 뷰 (#cartView — 기획서 §5·§7: 수량+멤버십 자동계산, 예치금 차감, 부족 시 결제대기) ═════════ */
#cartView{display:none}
body.vcart #cartView{display:block}
body.vcart #mainView,body.vcart #detailView,body.vcart #mypageView{display:none}
.cart-wrap{display:grid;grid-template-columns:1fr 392px;gap:30px;padding:34px 0 90px;align-items:start}
.cart-hd{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cart-hd h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
.cart-hd .cnt{background:var(--sage);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:3px 12px}
.cart-hd .rt{margin-left:auto}
.ci-list{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ci{display:grid;grid-template-columns:104px 1fr 250px;gap:18px;padding:22px 24px;border-bottom:1px solid var(--line2);align-items:center}
.ci:last-child{border-bottom:0}
.ci img{width:104px;height:78px;object-fit:cover;border-radius:10px;border:1px solid var(--line2)}
.ci .inm{font-size:14.5px;font-weight:800;line-height:1.35}
.ci .iopt{font-size:12px;color:var(--mut);margin:3px 0 8px}
.ci .ichips{display:flex;gap:5px;flex-wrap:wrap}
.ci .ichips i{font-style:normal;font-size:10.5px;color:var(--ink2);background:var(--bg);border:1px solid var(--line2);border-radius:5px;padding:2px 7px}
.ci .irt{text-align:right}
.ci .istep{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;margin-bottom:9px}
.ci .istep button{width:30px;height:36px;border:0;background:#fff;font-size:14px;color:var(--ink2);cursor:pointer}
.ci .istep button:hover{background:var(--bg)}
.ci .istep input{width:56px;height:36px;border:0;border-left:1px solid var(--line2);border-right:1px solid var(--line2);text-align:center;font-size:13px;font-weight:700;font-family:inherit;outline:none}
.ci .iunit{font-size:11.5px;color:var(--mut)}
.ci .iunit b{color:var(--sage-d)}
.ci .iunit .strike{text-decoration:line-through;color:#b1ada0}
.ci .itot{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-top:2px}
.ci .itot small{font-size:11px;font-weight:600;color:var(--mut)}
.ci .irm{border:0;background:transparent;color:var(--mut);font-size:11.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:6px}
.ci .irm:hover{color:var(--red)}
.cart-empty{display:none;background:#fff;border:1px dashed var(--line);border-radius:var(--r);padding:70px 20px;text-align:center;color:var(--mut);font-size:14px} /* [2026-07-21 ⓐ] 좌우 여백 20px */
.cart-empty .btn{margin-top:16px}
/* 결제 요약 (우측 sticky) */
.cart-sum{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.cart-sum h3{font-size:16px;font-weight:800;margin-bottom:16px}
.cart-sum .sr{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink2);padding:5px 0;gap:10px}
.cart-sum .sr b{font-weight:700;color:var(--ink)}
/* 금액은 줄바꿈 금지·라벨만 축소 허용 — 라벨·금액 겹침 방지 (2.png 유형 재발 방지) */
.cart-sum .sr>b,.cart-sum .sr>.dc{white-space:nowrap;flex-shrink:0}
.cart-sum .sr>span:first-child{min-width:0}
.dep-box .dr{gap:10px}
.dep-box .dr>b{white-space:nowrap;flex-shrink:0}
.cart-sum .sr .dc{color:var(--sage-d);font-weight:700}
.cart-sum .sr .sub{font-size:11px;color:var(--mut)}
.cart-sum .divi{border-top:1px dashed var(--line);margin:12px 0}
.cart-sum .tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cart-sum .tot .l{font-size:13.5px;font-weight:800}
.cart-sum .tot .v{font-size:26px;font-weight:800;letter-spacing:-.02em}
.cart-sum .tot .v small{font-size:13px;font-weight:600;color:var(--ink2)}
.cart-sum .saved{text-align:right;font-size:11.5px;color:var(--sage-d);font-weight:700;margin-bottom:16px}
/* 예치금 박스 */
.dep-box{background:var(--sage-bg);border:1px solid var(--sage-l);border-radius:12px;padding:14px 18px;margin-bottom:16px;font-size:12.5px;color:#4e6b3a}
.dep-box .dr{display:flex;justify-content:space-between;padding:2.5px 0}
.dep-box .dr b{font-weight:800}
.dep-box .dr .ok{color:var(--sage-d)}
.dep-box.short{background:#faf0ec;border-color:#eed7d1;color:#8f4536}
.dep-box.short .dr .ok{color:var(--red)}
.dep-box .short-note{font-size:11.5px;margin-top:8px;padding-top:8px;border-top:1px dashed #eed7d1;line-height:1.55}
.cart-sum .cta{width:100%;padding:16px 0;border-radius:12px;font-size:15px;border:0;margin-bottom:10px}
.cart-sum .note{font-size:11.5px;color:var(--mut);text-align:center;line-height:1.6}
@media(max-width:1080px){
  .cart-wrap{grid-template-columns:1fr;gap:18px}
  .cart-sum{position:static}
}
@media(max-width:640px){
  .ci{grid-template-columns:78px 1fr;gap:12px;padding:16px}
  .ci img{width:78px;height:59px}
  /* 1행: 수량 스테퍼 ─ 합계 ─ 삭제 / 2행: 단가 브레이크다운 전체폭 (겹침·세로꺾임 방지) */
  .ci .irt{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;text-align:left}
  .ci .istep{margin-bottom:0}
  .ci .iunit{order:5;flex:1 1 100%}
  .ci .itot{margin:0 0 0 auto;white-space:nowrap}
  .ci .irm{margin:0;white-space:nowrap;flex-shrink:0}
}

/* ═════════ 주문서(#orderView) + 입점 신청(#joinView) ═════════ */
#orderView,#joinView{display:none}
body.vorder #orderView{display:block}
body.vjoin #joinView{display:block}
body.vorder #mainView,body.vorder #detailView,body.vorder #mypageView,body.vorder #cartView,
body.vjoin #mainView,body.vjoin #detailView,body.vjoin #mypageView,body.vjoin #cartView{display:none}
/* 폼 공통 */
.frm{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 30px;margin-bottom:16px}
.frm h3{font-size:15.5px;font-weight:800;margin-bottom:16px;padding-left:11px;border-left:3.5px solid var(--sage);display:flex;align-items:center;gap:10px}
.frm h3 small{font-size:11.5px;color:var(--mut);font-weight:600}
.frm h3 .rt{margin-left:auto}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.fgrid .full{grid-column:1/-1}
.fld label{font-size:12px;font-weight:700;color:var(--ink2);display:block;margin-bottom:6px}
.fld label em{color:var(--red);font-style:normal;margin-left:2px}
.fld input[type=text],.fld input[type=password],.fld input[type=tel],.fld input[type=email],.fld select{width:100%;height:45px;border:1px solid var(--line);border-radius:9px;padding:0 14px;font-size:13.5px;font-family:inherit;background:var(--bg);outline:none;color:var(--ink)}
.fld textarea{width:100%;height:76px;border:1px solid var(--line);border-radius:9px;padding:11px 14px;font-size:13.5px;font-family:inherit;background:var(--bg);outline:none;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--sage);background:#fff}
.fld .withbtn{display:flex;gap:8px}
.fld .withbtn input{flex:1}
.fld .withbtn .mini-btn{height:45px;padding:0 16px;flex-shrink:0;border-radius:9px}
.fld .hint{font-size:11px;color:var(--mut);margin-top:5px}
/* 파일 업로드 (시안) */
.file-box{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--line);border-radius:9px;padding:11px 14px;background:var(--bg);font-size:12.5px;color:var(--mut);cursor:pointer}
.file-box:hover{border-color:var(--sage);color:var(--sage-d)}
.file-box svg{width:16px;height:16px;flex-shrink:0}
/* 라디오 칩 */
.rchips{display:flex;gap:8px;flex-wrap:wrap}
.rchips label{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 20px;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.rchips input{accent-color:var(--sage)}
.rchips label:has(input:checked){background:var(--sage-bg);border-color:var(--sage);color:var(--sage-d)}
/* 읽기전용 주문자 카드 */
.ro-card{background:var(--bg);border:1px solid var(--line2);border-radius:11px;padding:16px 20px}
.ro-card .rr{display:flex;gap:14px;font-size:13px;padding:3.5px 0}
.ro-card .rr .l{width:110px;color:var(--mut);font-weight:600;flex-shrink:0}
.ro-card .rr b{font-weight:700}
/* 블라인드 토글 + 미리보기 */
.blind-box{background:var(--sage-bg);border:1px solid var(--sage-l);border-radius:12px;padding:16px 20px}
.blind-box .bt{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:800;color:#3f5530;margin-bottom:10px}
.sw{position:relative;width:44px;height:24px;flex-shrink:0}
.sw input{opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:#c9c5b8;border-radius:99px;transition:.2s;cursor:pointer}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.sw input:checked+i{background:var(--sage)}
.sw input:checked+i::after{left:23px}
.blind-box .rr{display:flex;gap:14px;font-size:12.5px;color:#4e6b3a;padding:2.5px 0}
.blind-box .rr .l{width:82px;font-weight:700;flex-shrink:0}
/* 주문 상품 요약 */
.ord-items li{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line2)}
.ord-items li:last-child{border-bottom:0}
.ord-items .n{font-weight:700}
.ord-items .n small{font-weight:600;color:var(--mut);margin-left:6px}
.ord-items .p{font-weight:800;white-space:nowrap}
/* 약관 동의 */
.agree{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.agree label{display:flex;align-items:center;gap:10px;padding:13px 18px;font-size:13px;color:var(--ink2);border-bottom:1px solid var(--line2);cursor:pointer}
.agree label:last-child{border-bottom:0}
.agree label.all{background:var(--bg);font-weight:800;color:var(--ink)}
.agree input{width:17px;height:17px;accent-color:var(--sage)}
.agree .vw{margin-left:auto;font-size:11.5px;color:var(--mut);text-decoration:underline;text-underline-offset:3px}
/* 입점 신청 헤더 + 절차 */
.join-hd{text-align:center;padding:38px 0 26px}
.join-hd h2{font-size:clamp(24px,2.2vw,30px);font-weight:800;letter-spacing:-.02em}
.join-hd p{font-size:13.5px;color:var(--mut);margin-top:8px}
.join-steps{display:flex;justify-content:center;gap:10px;margin:20px 0 6px;flex-wrap:wrap}
.join-steps span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:12px;font-weight:700;color:var(--ink2)}
.join-steps span b{color:var(--sage-d)}
.join-steps i{align-self:center;color:var(--mut);font-style:normal}
.join-submit{max-width:420px;margin:10px auto 0;display:block;width:100%;padding:17px 0;border-radius:13px;font-size:15.5px;border:0}
.join-note{text-align:center;font-size:12px;color:var(--mut);margin-top:12px;padding-bottom:80px}
@media(max-width:640px){
  .frm{padding:20px 18px}
  .fgrid{grid-template-columns:1fr}
}

/* ───────── 예치금 충전 안내 레이어 (페이지 내 오버레이) ───────── */
.dep-ov{position:fixed;inset:0;background:rgba(24,23,19,.55);backdrop-filter:blur(3px);z-index:130;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.25s}
.dep-ov.on{opacity:1;visibility:visible}
.dep-modal{background:#fff;border-radius:22px;max-width:540px;width:100%;max-height:88vh;overflow-y:auto;padding:38px 40px 32px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(18px) scale(.97);transition:.28s ease}
.dep-ov.on .dep-modal{transform:none}
.dep-modal .dm-x{position:absolute;top:18px;right:20px;border:0;background:transparent;font-size:19px;color:var(--mut);cursor:pointer}
.dep-modal .dm-x:hover{color:var(--ink)}
.dep-modal .dm-ico{width:58px;height:58px;border-radius:16px;background:var(--sage-bg);color:var(--sage-d);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.dep-modal .dm-ico svg{width:28px;height:28px}
.dep-modal .dm-badge{display:inline-block;background:#faf3ea;border:1px solid #eeddc8;color:var(--kraft-d);font-size:11px;font-weight:800;border-radius:999px;padding:4px 13px;margin-bottom:10px;letter-spacing:.04em}
.dep-modal h3{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.dep-modal .dm-lead{font-size:14px;color:var(--ink2);margin-bottom:20px}
.dep-modal .dm-lead b{color:var(--sage-d)}
.dep-modal .dm-acct{background:var(--bg);border:1.5px dashed var(--sage-l);border-radius:14px;padding:18px 22px;margin-bottom:20px;position:relative}
.dep-modal .dm-acct .l{font-size:11px;color:var(--mut);font-weight:800;letter-spacing:.06em;margin-bottom:4px}
.dep-modal .dm-acct .v{font-size:19px;font-weight:800;letter-spacing:-.01em}
.dep-modal .dm-acct .h{font-size:12px;color:var(--ink2);margin-top:2px}
.dep-modal .dm-acct .cp{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.dep-modal .dm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:20px}
.dep-modal .dm-steps div{background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px 12px;text-align:center}
.dep-modal .dm-steps b{display:block;font-size:11px;color:var(--sage-d);font-weight:800;letter-spacing:.05em;margin-bottom:4px}
.dep-modal .dm-steps span{font-size:12px;color:var(--ink2);font-weight:600;line-height:1.45;display:block}
.dep-modal .dm-notes{background:var(--sage-bg);border-radius:12px;padding:14px 18px;margin-bottom:22px}
.dep-modal .dm-notes li{font-size:12px;color:#4e6b3a;padding:2.5px 0;padding-left:14px;position:relative}
.dep-modal .dm-notes li::before{content:"·";position:absolute;left:2px;font-weight:800}
.dep-modal .dm-ok{width:100%;padding:15px 0;border-radius:12px;font-size:14.5px;border:0}
@media(max-width:640px){.dep-modal{padding:28px 22px 24px}.dep-modal .dm-steps{grid-template-columns:1fr;gap:6px}.dep-modal .dm-acct .cp{position:static;transform:none;margin-top:10px}}

/* ═════════ 카테고리 상품 목록 뷰 (#listView — 카테고리 클릭 시) ═════════ */
#listView{display:none;padding-bottom:90px}
body.vlist #listView{display:block}
body.vlist #mainView,body.vlist #detailView,body.vlist #mypageView,body.vlist #cartView,body.vlist #orderView,body.vlist #joinView{display:none}
.lst-head{padding:30px 0 24px;border-bottom:1px solid var(--line);margin-bottom:24px}
.lst-head h2{font-size:clamp(24px,2vw,32px);font-weight:800;letter-spacing:-.03em}
.lst-head h2 small{font-size:14px;color:var(--mut);font-weight:600;margin-left:10px}
.lst-head>p{color:var(--mut);font-size:13.5px;margin-top:7px}
.lst-head>p b{color:var(--sage-d);font-weight:700}
.lst-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.lst-tabs a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 20px;font-size:13px;font-weight:600;color:var(--ink2)}
.lst-tabs a:hover{border-color:var(--sage);color:var(--sage-d)}
.lst-tabs a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lst-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.lst-bar .cnt{font-size:13.5px;color:var(--mut)}
.lst-bar .cnt b{color:var(--ink);font-weight:700}
.lst-bar select{border:1px solid var(--line);border-radius:9px;padding:9px 14px;font-size:13px;font-weight:600;color:var(--ink2);background:#fff}
.lst-empty{padding:90px 24px;text-align:center;border:1px dashed var(--line);border-radius:var(--r);background:var(--card)}
.lst-empty .ic{width:54px;height:54px;border-radius:50%;background:var(--sage-bg);color:var(--sage-d);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.lst-empty .ic svg{width:26px;height:26px}
.lst-empty b{display:block;font-size:17px;margin-bottom:7px}
.lst-empty p{color:var(--mut);font-size:13.5px;margin-bottom:20px;line-height:1.7}
@media(max-width:640px){
  .lst-head{padding-top:18px}
  .lst-tabs a{padding:8px 15px;font-size:12.5px}
}

/* ═════════ 자료실 뷰 (#dataView — 기획서 §5: 상품이미지·상세페이지·판매가이드·엑셀양식 다운로드, 판매자 전용) ═════════ */
#dataView{display:none;padding-bottom:90px}
body.vdata #dataView{display:block}
body.vdata #mainView,body.vdata #listView,body.vdata #detailView,body.vdata #mypageView,body.vdata #cartView,body.vdata #orderView,body.vdata #joinView{display:none}
.dr-note{display:flex;gap:11px;align-items:flex-start;background:var(--sage-bg);border:1px solid #d8e3c6;border-radius:12px;padding:14px 18px;font-size:12.5px;color:var(--ink2);margin-bottom:22px;line-height:1.65}
.dr-note svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--sage-d)}
.dr-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.dr-bar .cnt{font-size:13.5px;color:var(--mut)}
.dr-bar .cnt b{color:var(--ink);font-weight:700}
.dr-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:#fff;min-width:min(280px,100%)}
.dr-search svg{width:15px;height:15px;color:var(--mut);flex-shrink:0}
.dr-search input{border:0;outline:0;font-size:13px;flex:1;background:none;color:var(--ink);min-width:0}
.dr-list{display:flex;flex-direction:column;gap:10px}
.dr-item{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;transition:.15s}
.dr-item:hover{box-shadow:0 10px 26px rgba(35,34,29,.08);transform:translateY(-1px)}
.dr-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;letter-spacing:.04em;flex-shrink:0;color:#fff}
.dr-ico.zip{background:#8a7a5c}
.dr-ico.pdf{background:#c25b4a}
.dr-ico.xlsx{background:#4e7a4e}
.dr-ico.ai{background:#c98a2e}
.dr-tx{flex:1;min-width:0}
.dr-tx .cat{font-size:11px;font-weight:700;color:var(--sage-d)}
.dr-gd{display:inline-block;font-style:normal;font-size:10px;font-weight:800;border-radius:6px;padding:2px 7px;margin-left:6px;background:#f4ead2;color:#9a7b2e;vertical-align:1px}
.dr-tx b{display:block;font-size:14.5px;font-weight:700;margin:3px 0 3px;line-height:1.4}
.dr-tx .ds{font-size:12px;color:var(--mut)}
.dr-meta{font-size:11.5px;color:var(--mut);text-align:right;flex-shrink:0;line-height:1.75}
.dr-meta b{color:var(--ink2);font-weight:700}
.dr-dl{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:11px 18px;font-size:12.5px;font-weight:700;color:var(--ink2);background:#fff;flex-shrink:0;cursor:pointer;transition:.15s}
.dr-dl svg{width:14px;height:14px}
.dr-dl:hover{border-color:var(--sage);color:var(--sage-d);background:var(--sage-bg)}
.dr-dl.lock{color:var(--mut);background:var(--bg);border-style:dashed}
body:not(.member) .dr-item .m-only{display:none}
body.member .dr-item .g-only{display:none}
.dr-toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(16px);background:var(--ink);color:#fff;font-size:13px;font-weight:600;border-radius:999px;padding:13px 26px;opacity:0;pointer-events:none;transition:.25s;z-index:120;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.dr-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:640px){
  .dr-item{flex-wrap:wrap;padding:15px 16px}
  .dr-tx{flex:1 1 calc(100% - 62px)}
  .dr-meta{text-align:left;flex:1}
  .dr-dl{padding:10px 15px}
}

/* ═════════ 등급 혜택 상세 뷰 (#gradeView — 기획서 §3 멤버십 + 등급 운영 기준 + §7 결제 적용 순서) ═════════ */
#gradeView{display:none;padding-bottom:90px}
body.vgrade #gradeView{display:block}
body.vgrade #mainView{display:none}
.gv-mine{display:flex;align-items:center;gap:14px;background:var(--sage-bg);border:1px solid #d8e3c6;border-radius:14px;padding:15px 20px;margin-bottom:28px;font-size:13.5px;color:var(--ink2);flex-wrap:wrap}
.gv-mine .gd{background:var(--gold);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:4px 12px;flex-shrink:0}
.gv-mine b{color:var(--ink)}
.gv-mine a{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--sage-d);text-decoration:underline;text-underline-offset:3px}
body:not(.member) .gv-mine{display:none}
.gv-sec{margin-top:52px}
.gv-sec>h3{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.gv-sec>.sub{color:var(--mut);font-size:13px;margin-bottom:20px}
.gv-tablew{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.gv-tablew .scroll{overflow-x:auto}
table.gv-table{width:100%;border-collapse:collapse;min-width:820px;font-size:13px}
.gv-table th{background:var(--bg);font-weight:700;padding:13px 18px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.gv-table td{padding:14px 18px;border-bottom:1px solid var(--line2);color:var(--ink2)}
.gv-table tr:last-child td{border-bottom:0}
.gv-table td b{color:var(--ink)}
.gv-table td .rate{font-weight:800;font-size:15px}
.gv-table tr.cur td{background:var(--sage-bg)}
body:not(.member) .gv-table tr.cur td{background:none}
.gv-table .curtag{display:inline-block;background:var(--sage);color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:1px}
body:not(.member) .gv-table .curtag{display:none}
.gv-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gv-rule{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 22px}
.gv-rule>b{display:flex;align-items:center;gap:9px;font-size:15px;margin-bottom:14px}
.gv-rule>b svg{width:18px;height:18px;color:var(--sage-d);flex-shrink:0}
.gv-rule ul{list-style:none;font-size:12.5px;color:var(--ink2);display:grid;gap:9px;line-height:1.65}
.gv-rule li{padding-left:14px;position:relative}
.gv-rule li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--sage)}
.gv-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.gv-step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 15px;text-align:center;position:relative}
.gv-step .no{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--sage-d);display:block;margin-bottom:8px}
.gv-step b{font-size:13.5px;display:block;margin-bottom:5px}
.gv-step span{font-size:11.5px;color:var(--mut);line-height:1.5;display:block}
.gv-except{margin-top:14px;font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:8px}
.gv-except svg{width:14px;height:14px;color:#c25b4a;flex-shrink:0}
.gv-calc{background:var(--dark);color:#f0eee4;border-radius:var(--r);padding:28px 32px}
.gv-calc .t{font-size:12px;color:#9c9a8d;margin-bottom:6px;font-weight:700;letter-spacing:.08em}
.gv-calc .nm2{font-size:16px;font-weight:800;margin-bottom:16px}
.gv-calc .row{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.14)}
.gv-calc .row .l{color:#b9b6a7}
.gv-calc .row .l i{font-style:normal;font-size:10.5px;font-weight:800;background:rgba(185,207,163,.18);color:var(--sage-l);border-radius:6px;padding:2px 8px;margin-left:7px;vertical-align:1px}
.gv-calc .row.fin{border-bottom:0;padding-top:16px;font-size:14.5px}
.gv-calc .row.fin b{color:var(--sage-l);font-size:22px;font-weight:800}
.gv-calc .save2{margin-top:6px;font-size:12px;color:var(--sage-l);text-align:right}
.gv-faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 22px;margin-bottom:10px}
.gv-faq summary{cursor:pointer;font-size:14px;font-weight:700;padding:17px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.gv-faq summary::-webkit-details-marker{display:none}
.gv-faq summary::after{content:'+';font-size:19px;color:var(--mut);font-weight:600;flex-shrink:0}
.gv-faq details[open] summary::after{content:'−'}
.gv-faq .fa{font-size:13px;color:var(--ink2);line-height:1.8;padding-bottom:19px}
@media(max-width:1080px){
  .gv-rules{grid-template-columns:1fr}
  .gv-steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .gv-steps{grid-template-columns:repeat(2,1fr)}
  .gv-calc{padding:22px 20px}
}

/* ═════════ 공지사항 뷰 (#noticeView — 기획서 §5: 단가 변경·품절·출고 지연 안내) ═════════ */
#noticeView{display:none;padding-bottom:90px}
body.vnotice #noticeView{display:block}
body.vnotice #mainView{display:none}
.nt-list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.nt-row{display:flex;align-items:center;gap:13px;padding:17px 22px;border-bottom:1px solid var(--line2);cursor:pointer;transition:.12s}
.nt-row:last-child{border-bottom:0}
.nt-row:hover{background:var(--bg)}
.nt-row .pin{flex-shrink:0;color:var(--sage-d);display:flex}
.nt-row .pin svg{width:14px;height:14px}
.nt-cat{flex-shrink:0;font-style:normal;font-size:10.5px;font-weight:800;border-radius:6px;padding:4px 10px}
.nt-cat.c1{background:var(--ink);color:#fff}
.nt-cat.c2{background:#f4ead2;color:#9a7b2e}
.nt-cat.c3{background:var(--sage-bg);color:var(--sage-d)}
.nt-cat.c4{background:#faf0ec;color:#c25b4a}
.nt-cat.c5{background:#e8ecf4;color:#5b6f92}
.nt-row .tt{flex:1;font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-row.pinned .tt{font-weight:700}
.nt-row .meta{flex-shrink:0;font-size:12px;color:var(--mut)}
.nt-doc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:36px 40px}
.nt-doc .dhd{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px}
.nt-doc h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:12px 0 10px;line-height:1.4}
.nt-doc .dmeta{font-size:12.5px;color:var(--mut)}
.nt-doc .body{font-size:14px;line-height:1.85;color:var(--ink2)}
.nt-doc .body p{margin-bottom:14px}
.nt-doc .body .hl{background:var(--sage-bg);border:1px solid #d8e3c6;border-radius:10px;padding:15px 19px;font-size:13px;margin:18px 0;line-height:1.75}
.nt-doc .body table{width:100%;border-collapse:collapse;font-size:13px;margin:16px 0}
.nt-doc .body th{background:var(--bg);font-weight:700;padding:10px 14px;border:1px solid var(--line);text-align:left}
.nt-doc .body td{padding:10px 14px;border:1px solid var(--line2)}
.nt-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:10px;flex-wrap:wrap}
.nt-nav .mv{display:flex;gap:8px}
@media(max-width:640px){
  .nt-row{padding:14px 16px;gap:9px}
  .nt-row .meta{display:none}
  .nt-doc{padding:24px 20px}
}

/* ═════════ 빠른 재주문 뷰 (#reorderView — 기획서 §5 UI 포인트: 재주문 최적화, 회원 전용) ═════════ */
#reorderView{display:none;padding-bottom:90px}
body.vreorder #reorderView{display:block}
body.vreorder #mainView{display:none}
.ro-sec{margin-top:42px}
.ro-sec>h3{font-size:19px;font-weight:800;margin-bottom:6px;letter-spacing:-.02em}
.ro-sec>.sub{color:var(--mut);font-size:13px;margin-bottom:16px}
.ro-ords{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ro-ord{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px 20px;display:flex;flex-direction:column}
.ro-ord .oh{display:flex;align-items:center;gap:10px;margin-bottom:13px;flex-wrap:wrap}
.ro-ord .oh b{font-size:14.5px}
.ro-ord .oh .od{font-size:12px;color:var(--mut)}
.ro-ord .oh .st{margin-left:auto;font-size:10.5px;font-weight:800;border-radius:6px;padding:4px 10px;background:var(--sage-bg);color:var(--sage-d)}
.ro-ord .oi{display:flex;align-items:center;gap:11px;font-size:13px;padding:10px 0;border-top:1px dashed var(--line2)}
.ro-ord .oi img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0}
.ro-ord .oi .n{flex:1;min-width:0;font-weight:600}
.ro-ord .oi .n small{display:block;color:var(--mut);font-size:11.5px;font-weight:500;margin-top:2px}
.ro-ord .oi .pr2{font-weight:700;font-size:12.5px;flex-shrink:0;text-align:right;line-height:1.5}
.ro-ord .oi .pr2 small{display:block;font-weight:500;color:var(--mut);font-size:10.5px}
.ro-ord .oi.dead{opacity:.6}
.ro-ord .oi.dead .n>span{text-decoration:line-through}
.ro-chg{display:inline-block;font-style:normal;font-size:10px;font-weight:800;background:#f4ead2;color:#9a7b2e;border-radius:6px;padding:2px 7px;margin-left:6px;vertical-align:1px}
.ro-dead{display:inline-block;font-style:normal;font-size:10px;font-weight:800;background:#faf0ec;color:#c25b4a;border-radius:6px;padding:2px 7px;margin-left:6px;vertical-align:1px}
.ro-ord .of{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin-top:auto;padding-top:15px;flex-wrap:wrap}
.ro-ord .of .amt{font-size:12px;color:var(--mut);line-height:1.8}
.ro-ord .of .amt b{color:var(--ink);font-size:16px;letter-spacing:-.01em}
.ro-bulk{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.ro-bulk label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer}
.ro-bulk input[type=checkbox]{width:17px;height:17px;accent-color:var(--sage-d);cursor:pointer}
.ro-bulk .btn{margin-left:auto;padding:11px 24px;font-size:13px}
.ro-list{display:flex;flex-direction:column;gap:10px}
.ro-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;transition:.15s}
.ro-row:hover{box-shadow:0 10px 26px rgba(35,34,29,.07)}
.ro-row input[type=checkbox]{width:17px;height:17px;accent-color:var(--sage-d);flex-shrink:0;cursor:pointer}
.ro-row img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex-shrink:0}
.ro-row .tx{flex:1;min-width:0}
.ro-row .tx b{display:block;font-size:14px}
.ro-row .tx .m1{font-size:11.5px;color:var(--mut);margin-top:3px}
.ro-row .pr3{flex-shrink:0;text-align:right;font-size:11px;color:var(--mut);line-height:1.55}
.ro-row .pr3 b{display:block;color:var(--sage-d);font-size:14.5px;font-weight:800}
.ro-row .pr3 .strike{text-decoration:line-through;color:#b1ada0}
.ro-row .istep{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;flex-shrink:0}
.ro-row .istep button{width:30px;height:36px;border:0;background:#fff;font-size:14px;color:var(--ink2);cursor:pointer}
.ro-row .istep button:hover{background:var(--bg)}
.ro-row .istep input{width:56px;height:36px;border:0;border-left:1px solid var(--line2);border-right:1px solid var(--line2);text-align:center;font-size:13px;font-weight:700;font-family:inherit;outline:none}
.ro-row .add{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:10px 17px;font-size:12.5px;font-weight:700;color:var(--ink2);background:#fff;flex-shrink:0;cursor:pointer;transition:.15s}
.ro-row .add svg{width:14px;height:14px}
.ro-row .add:hover{border-color:var(--sage);color:var(--sage-d);background:var(--sage-bg)}
.ro-row.dead{opacity:.72}
.ro-row.dead .add{border-style:dashed;color:var(--mut)}
.ro-note{margin-top:14px;font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:8px}
.ro-note svg{width:14px;height:14px;color:var(--sage-d);flex-shrink:0}
@media(max-width:1080px){.ro-ords{grid-template-columns:1fr}}
@media(max-width:640px){
  .ro-row{flex-wrap:wrap;padding:13px 15px}
  .ro-row .tx{flex:1 1 calc(100% - 110px)}
  .ro-row .pr3{text-align:left;flex:1}
  .ro-bulk .btn{margin-left:0;width:100%}
}

/* ───────── 데모 토글 (시안 확인용) ───────── */
.demo-toggle{position:fixed;right:22px;bottom:22px;z-index:99;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:13px 22px;font-size:13px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.3);display:flex;align-items:center;gap:9px}
.demo-toggle .st{width:8px;height:8px;border-radius:50%;background:#b1ada0}
body.member .demo-toggle .st{background:var(--sage-l)}
.demo-note{position:fixed;right:22px;bottom:74px;z-index:99;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:11.5px;color:var(--mut);box-shadow:0 6px 20px rgba(0,0,0,.1)}

/* ───────── 반응형 ───────── */
@media(max-width:1380px){
  .prods{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1080px){
  .hero .wrap,.hero-m .wrap{grid-template-columns:1fr;gap:40px}
  .hero h1{font-size:36px}
  .hero-m h1{font-size:29px}
  .grades{grid-template-columns:repeat(3,1fr)}
  .qs .qs-bar{height:calc(var(--bh)*.82)}
  .cats,.prods{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .fl .arrow{display:none}
  .feats{grid-template-columns:1fr}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  .hero h1{font-size:29px}
  .hero-m h1{font-size:25px}
  .hero .cta,.hero-m .cta{flex-direction:column}
  .stats .wrap{grid-template-columns:repeat(2,1fr);gap:20px 0}
.stats.stats-c2 .wrap,.stats.stats-c3 .wrap{grid-template-columns:repeat(2,1fr)}
  .stats .st:nth-child(3)::before{display:none}
  /* 모바일: 등급 카드 전부 1열 가로형 배너(아이콘 | 등급명·조건 | 할인)로 통일 — VVIP와 동일 모양 (2026-07-07 사장님 지시). PC는 5열 유지 */
  .grades{grid-template-columns:1fr;gap:10px}
  .grades .gr{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"dot nm rate" "dot cond rate";align-items:center;column-gap:18px;text-align:left;padding:18px 22px}
  .grades .gr .dot{grid-area:dot;margin:0}
  .grades .gr .nm{grid-area:nm;margin:0;align-self:end}
  .grades .gr .cond{grid-area:cond;min-height:0;margin:0;align-self:start}
  .grades .gr .rate{grid-area:rate;margin:0;text-align:right;white-space:nowrap}
  .grades .gr .now{left:22px;transform:none}
  .qty-stairs{gap:5px}
  .qs .qs-bar{height:calc(var(--bh)*.55);border-radius:9px}
  .qs .qs-bar span{display:none}
  .qs .qs-max{display:none}
  .cats{grid-template-columns:1fr}
.cats.cats-c1,.cats.cats-c2,.cats.cats-c3{display:grid} /* 모바일: 1열 그리드 복원 */
.cats.cats-c1 .cat,.cats.cats-c2 .cat,.cats.cats-c3 .cat{width:auto}
  /* 프로모션 배너: 카피가 배너 높이를 넘어 위가 잘리던 것 — 높이 확보 + 타이포 축소 */
  .promo{height:340px;margin-bottom:30px}
  .promo .pm-ov{padding:0 20px}
  .promo .pm-tag{font-size:10.5px;padding:5px 12px;margin-bottom:10px}
  .promo h3{font-size:21px}
  .promo p{font-size:12.5px;margin-bottom:14px}
  .promo .pm-btn{padding:10px 20px;font-size:12.5px}
  /* 섹션 헤더: 탭이 눌려 세로 글자가 되던 것 — 설명 아래로 탭 줄바꿈 */
  .prods-hd{flex-wrap:wrap;gap:12px}
  .prods-hd>div:first-child{flex:1 1 100%}
  /* 상품: 모바일 한 화면 2개씩 (TAIBE 형태) — 카드 요소 컴팩트 축소 */
  .prods{grid-template-columns:repeat(2,1fr);gap:10px}
  /* 모바일 2열 카드: 플래그 배지 세로 깨짐 방지 — nowrap + 여러개면 다음 줄로 wrap + 축소 */
  .pd .flag{gap:4px;flex-wrap:wrap;max-width:calc(100% - 24px)}
  .pd .flag i{white-space:nowrap;font-size:9.5px;padding:3px 7px;line-height:1.2}
  .pd .body{padding:11px 11px 13px}
  .pd .cat-s{font-size:9.5px}
  .pd .nm{font-size:12.5px;margin:2px 0 1px}
  .pd .spec{font-size:10.5px;margin-bottom:9px}
  .pd .prices{padding-top:9px;gap:3px;margin-bottom:9px}
  .pd .pr{font-size:11px}
  .pd .pr .base{font-size:12.5px}
  .pd .pr.benefit .v{font-size:14px}
  .pd .locked{padding:7px 9px;font-size:10px;gap:5px;margin-bottom:9px;flex-wrap:wrap}
  .pd .locked a{font-size:10px;white-space:nowrap}
  .pd .moq{gap:4px;margin-bottom:10px}
  .pd .moq i{font-size:9.5px;padding:2px 6px}
  .pd .buy{flex-direction:column;gap:6px}
  .pd .stepper{width:100%}
  .pd .stepper input{flex:1;width:auto;min-width:0}
  .pd .stepper button{flex-shrink:0}
  .pd .addcart{width:100%;padding:9px 0}
  .flow{grid-template-columns:1fr}
  .boards{grid-template-columns:1fr}
  section{padding:54px 0}
  .sec-h h2{font-size:24px}
}

/* ═══════════ 영카트 이식 보정 (semonemo) ═══════════ */
/* 그누보드 기본 로그인 안내/스킵 링크 숨김 */
#hd_login_msg,#skip_to_container,.sanchor{position:absolute;left:-9999px;top:-9999px}
/* 내부(영카트 기본) 페이지 공통 래퍼 — 장바구니/주문/마이페이지 등 */
.smnm-inner{max-width:var(--maxw);margin:0 auto;padding:34px 24px 70px;min-height:52vh}
.smnm-inner #wrapper_title,.smnm-inner #container_title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:6px 0 22px}
.smnm-inner section:not(.frm){padding:0}
/* 영카트 기본 위젯 잔재 숨김 */
#sct_sort_anchor{display:none}
.sct_admin{display:none}
/* 목록 뷰(서버 렌더) — 시안 lst-* 클래스 재사용 시 여백 */
.smnm-page .lst-wrap{padding:26px 24px 70px}
/* 상세 페이지 기본 여백 */
.smnm-page .dt-wrap{padding:26px 24px 70px}
/* 시안 모듈이 없는 페이지에서 기본 버튼 폭 유지 */
.smnm-inner .btn_confirm{margin:20px 0}
/* 메인 히어로 로그인박스 폼 요소 (form 태그 추가분) */
.loginbox form{display:flex;flex-direction:column;gap:0}

/* ═══ 영카트 상세 기능요소 → 시안 룩 보정 ═══ */
/* 옵션 select (get_item_options 출력) */
.smnm-opts{margin-bottom:16px}
.smnm-opts h3{font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:6px}
.smnm-opts select{width:100%;height:46px;border:1px solid var(--line);border-radius:10px;padding:0 14px;font-size:13.5px;font-family:inherit;background:#fff;outline:none;color:var(--ink);margin-bottom:10px}
.smnm-opts select:focus{border-color:var(--sage)}
/* 선택된 옵션 리스트 */
#sit_sel_option{margin-bottom:14px}
#sit_sel_option h3{font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:8px}
#sit_opt_added{list-style:none;margin:0;padding:0}
#sit_opt_added .sit_opt_list{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin-bottom:8px;flex-wrap:wrap}
#sit_opt_added .opt_name{flex:1;min-width:0}
#sit_opt_added .sit_opt_subj{font-size:13px;font-weight:600;color:var(--ink2);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sit_opt_added .opt_count{display:flex;align-items:center;gap:6px;flex-shrink:0}
#sit_opt_added .opt_count button{width:38px;height:42px;border:1px solid var(--line);background:#fff;font-size:16px;color:var(--ink2);cursor:pointer}
#sit_opt_added .opt_count .sit_qty_minus{border-radius:10px 0 0 10px;border-right:0}
#sit_opt_added .opt_count .sit_qty_plus{border-radius:0 10px 10px 0;border-left:0}
#sit_opt_added .opt_count .num_input{width:74px;height:42px;border:1px solid var(--line);text-align:center;font-size:15px;font-weight:800;font-family:inherit;outline:none}
#sit_opt_added .sit_opt_prc{font-size:12.5px;font-weight:700;color:var(--sage-d);min-width:56px;text-align:right}
#sit_opt_added .sit_opt_del{border:0;background:transparent;color:var(--mut);font-size:15px;cursor:pointer}
/* 총 구매액 (shop.js price_calculate 출력) */
/* 총 금액 — shop.js 출력: <span>총 금액 :</span><strong>금액</strong> 원
   (기존 span 22px 규칙은 라벨만 키우고 금액(strong)이 14px로 남던 오류 — 2026-07-07 사장님 1.png) */
#sit_tot_price{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;text-align:right;font-size:13.5px;font-weight:700;color:var(--ink2)}
#sit_tot_price span{font-size:13.5px;font-weight:700;color:var(--ink2)}
#sit_tot_price strong{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
#sit_ov_soldout{background:#faf0ec;border:1px solid #eed7d1;color:#c25b4a;border-radius:var(--r);padding:12px 16px;font-size:13px;font-weight:700;margin-bottom:14px}
/* 상세 하단 정보영역 (item.info.skin) → 시안 탭/섹션 룩 */
#sit_info{max-width:var(--maxw);margin:26px auto 0;padding:0 24px}
#sit_tab .tab_tit{position:sticky;top:0;list-style:none;display:flex;justify-content:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px;margin:0 0 34px;z-index:20;overflow-x:auto}
#sit_tab .tab_tit li{list-style:none}
#sit_tab .tab_tit button{border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink2);padding:11px 22px;border-radius:999px;cursor:pointer;white-space:nowrap}
#sit_tab .tab_tit button.selected,#sit_tab .tab_tit button:hover{background:var(--ink);color:#fff}
#sit_tab .tab_tit button span{color:var(--sage-d);font-size:12px}
#sit_tab .tab_tit button.selected span{color:var(--sage-l)}
#sit_tab .tab_con{list-style:none;margin:0;padding:0}
#sit_tab .tab_con>li{padding:34px 0;border-bottom:1px solid var(--line2);list-style:none}
#sit_tab .tab_con>li>h2{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:18px;padding-left:12px;border-left:4px solid var(--sage)}
#sit_inf_explan{text-align:center}
#sit_inf_explan img{max-width:100%;border-radius:14px}
#sit_inf_open{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:20px}
#sit_inf_open th{width:220px;background:var(--line2);padding:12px 18px;text-align:left;font-weight:700;color:var(--ink2);border-bottom:1px solid var(--line);font-size:13px}
#sit_inf_open td{padding:12px 18px;border-bottom:1px solid var(--line2);color:var(--ink2)}
/* 페이지네이션 */
.smnm-page .pg_wrap{display:block;text-align:center;margin:34px 0 0}
.smnm-page .pg{display:inline-flex;gap:5px;align-items:center}
.smnm-page .pg_page,.smnm-page .pg_current{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--ink2);padding:0 8px}
.smnm-page .pg_current{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:800}
.smnm-page .pg_page:hover{border-color:var(--ink);color:var(--ink)}
/* 상세 상단 여백 */
.dt-wrap{padding-top:26px}
#sit_hhtml,#sct_hhtml,#sit_thtml,#sct_thtml{max-width:var(--maxw);margin:0 auto}
/* 기본 스킨 style.css의 #sit_info inline-flex(콘텐츠 폭 확장) 무력화 — 모바일 가로 오버플로우 수정 */
#sit_info{display:block;width:auto;min-height:0;border:0;background:transparent}
#sit_tab,#sit_tab .tab_con,#sit_tab .tab_con>li,#sit_inf,#sit_inf_explan{max-width:100%;min-width:0;width:auto}
#sit_inf_explan img{max-width:100% !important;height:auto}
#sit_inf_explan table{max-width:100%}
#sit_inf_open{display:block;overflow-x:auto}
#sit_tab{display:block;width:100%;max-width:100%}
#sit_inf_explan{overflow-x:auto}

/* ═══════════ 그누보드 default_shop.css 충돌 무력화 — 시안과 동일 렌더 보장 ═══════════ */
/* 폰트/기본 (default_shop.css body 0.75em·Malgun Gothic, h1~h6/입력/버튼 폰트 강제 대응) */
body.smnm-body{font-size:15px !important;font-family:"Pretendard Variable",Pretendard,"Malgun Gothic","Apple SD Gothic Neo",sans-serif !important;line-height:1.6 !important;letter-spacing:-.01em;color:var(--ink);background:var(--bg)}
body.smnm-body h1,body.smnm-body h2,body.smnm-body h3,body.smnm-body h4,body.smnm-body h5,body.smnm-body h6,
body.smnm-body input,body.smnm-body button,body.smnm-body textarea,body.smnm-body select{font-family:inherit !important}
body.smnm-body a{color:inherit}
/* 한글 단어 단위 줄바꿈 전역 적용 — 모바일에서 "입점 신\청", "출\고"처럼 단어 중간이 깨지는 문제 방지 (2026-07-07 사장님 1·2.png)
   overflow-wrap:break-word — SKU·URL 등 긴 영문 토큰은 넘칠 때만 강제 줄바꿈 */
body.smnm-body{word-break:keep-all;overflow-wrap:break-word}
body.smnm-body p{word-break:keep-all}
/* .btn — 기본 css a.btn/.btn (height 35px·line-height 35px·bold·1.4em) 무력화 후 시안 정의 복원 */
body.smnm-body .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;line-height:1.45;border-radius:999px;font-weight:700;transition:.18s;border:1.5px solid transparent;font-size:13.5px;padding:11px 24px;text-align:center;cursor:pointer}
body.smnm-body .btn-dark{background:var(--ink);color:#fff}
body.smnm-body .btn-dark:hover{background:#000;color:#fff}
body.smnm-body .btn-line{border-color:var(--ink);color:var(--ink);background:#fff}
body.smnm-body .btn-line:hover{background:var(--ink);color:#fff}
body.smnm-body .btn-sage{background:var(--sage);color:#fff}
body.smnm-body .btn-sage:hover{background:var(--sage-d);color:#fff}
body.smnm-body .hero .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
body.smnm-body .hero .btn-ghost:hover{background:rgba(255,255,255,.1)}
body.smnm-body .loginbox .btn{width:100%;padding:14px 0;border-radius:10px;font-size:14.5px;margin-top:4px}
body.smnm-body .m-side .m-auth .btn{width:100%;padding:12px 0;border-radius:10px;font-size:13.5px}
body.smnm-body .cta-band .btn{background:#fff;color:var(--ink);padding:15px 38px;font-size:15px}
body.smnm-body .cta-band .btn:hover{background:var(--sage-l);color:var(--ink)}
/* 입력 포커스 — 기본 css 파란 글로우(border !important 포함) 무력화 */
body.smnm-body input[type=text]:focus,body.smnm-body input[type=password]:focus,body.smnm-body textarea:focus,body.smnm-body select:focus{box-shadow:none !important;border:1px solid var(--sage) !important}
body.smnm-body .search input:focus,body.smnm-body .mb-search input:focus{border:0 !important;box-shadow:none !important}
body.smnm-body .pd .stepper input:focus,body.smnm-body .buyrow .stepper input:focus{border:0 !important}
body.smnm-body #sit_opt_added .opt_count .num_input:focus{border:1px solid var(--line) !important}
/* 컨텍스트별 .btn 크기(시안값) — 강한 레이어와 동일 특이도로 재선언 */
body.smnm-body .hero .cta .btn{padding:15px 32px;font-size:15px}
body.smnm-body .hero-m .cta .btn{padding:14px 28px;font-size:14.5px}
body.smnm-body .gradecard .gc-btns .btn{padding:11px 0;font-size:13px;border-radius:10px}
body.smnm-body .actbtns .btn{padding:16px 0;font-size:15px;border-radius:12px}
body.smnm-body .more-wrap .btn{padding:14px 44px}
/* 입점 신청/결과 페이지 — 셸의 기본 페이지 제목(회원 가입) 숨김 (폼 자체 제목 사용) */
body.smnm-body.smnm-register #wrapper_title{display:none}

/* ═══ 상세: 관심상품 제거 반영 — actbtns/mbuy 2열 ═══ */
body.smnm-body .actbtns{grid-template-columns:1fr 1fr}
body.smnm-body .mbuy{grid-template-columns:1fr 1fr}
/* 로그인/입점(비회원)도 2열 유지 */
body.smnm-body .actbtns .btn,body.smnm-body .mbuy .btn{width:100%}
/* [2026-08-03] 회원(하트 노출) 3열 배치: [바로 주문][장바구니][♡ fit] 한 줄.
   비회원(로그인/입점 2버튼)은 위 2열 그대로. */
body.smnm-body.member .actbtns{grid-template-columns:1fr 1fr 56px}
body.smnm-body.member .actbtns .smnm-wish{width:56px;min-width:0;flex:none}

/* ═══ 입점 신청 폼 — default_shop.css/기본 라벨 충돌 무력화 (시안 #join과 동일) ═══ */
/* 파일첨부 박스: .fld label 규칙(굵게·margin-bottom)이 leak → 시안 file-box 복원 */
body.smnm-body .file-box{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--line);border-radius:9px;padding:11px 14px;background:var(--bg);font-size:12.5px;font-weight:400;color:var(--mut);cursor:pointer;margin-bottom:0}
body.smnm-body .file-box:hover{border-color:var(--sage);color:var(--sage-d)}
/* 신청 버튼: 기본 .btn override(999px·11px)보다 우선 — 시안 크기(17px·radius13·15.5px) */
body.smnm-body .join-submit{max-width:420px;margin:10px auto 0;display:block;width:100%;padding:17px 0;border-radius:13px;font-size:15.5px;border:0}
body.smnm-body .frm .withbtn .mini-btn{height:45px;padding:0 16px;flex-shrink:0;border-radius:9px;font-size:12.5px}
/* 폼 컨테이너 폭·간격 시안과 동일 (셸 .smnm-inner 안에서도) */
body.smnm-body.smnm-register .smnm-inner{max-width:1000px}

/* ═══ 커뮤니티 드롭다운 텍스트 검정 (그누보드 링크 초록색 무력화, 사장님 요청) ═══ */
body.smnm-body .dd-panel a{color:var(--ink)}
body.smnm-body .dd-panel a:hover{color:var(--ink);background:var(--bg)}
.smnm-page .cm-panel{padding:0}

/* ═════════ 주문서(shop/orderform.sub.php) — 세모네모 재구성 (2026-07-08) ═════════ */
/* 영카트 기본 주문서 마크업(input name/id·결제 JS 무수정)을 세모네모 톤으로 스타일링. */
.ord-wrap{max-width:900px;padding-top:34px;padding-bottom:90px}
.ord-wrap .cart-hd{margin-top:0}
.ord-frm{margin-bottom:16px}
.ord-wrap #sod_frm{display:block}
.ord-wrap .sod_left,.ord-wrap .sod_right{float:none;width:auto;margin:0;padding:0;display:block}
/* 공통 입력 */
.ord-wrap input[type=text],.ord-wrap input[type=password],.ord-wrap input[type=tel],.ord-wrap input[type=email],.ord-wrap input[type=number],.ord-wrap select{height:45px;border:1px solid var(--line);border-radius:9px;padding:0 14px;font-size:13.5px;font-family:inherit;background:var(--bg);color:var(--ink);outline:none;box-sizing:border-box;max-width:100%}
.ord-wrap textarea{width:100%;min-height:76px;border:1px solid var(--line);border-radius:9px;padding:11px 14px;font-size:13.5px;font-family:inherit;background:var(--bg);color:var(--ink);outline:none;resize:vertical;box-sizing:border-box}
.ord-wrap input:focus,.ord-wrap select:focus,.ord-wrap textarea:focus{border-color:var(--sage);background:#fff}
.ord-wrap .frm_input{width:100%}
.ord-wrap #od_zip,.ord-wrap #od_b_zip{width:150px;display:inline-block}
.ord-wrap .frm_address{margin-top:6px}
.ord-wrap .frm_info{display:block;font-size:11px;color:var(--mut);margin-bottom:5px}
/* 주소검색 등 인라인 버튼 */
.ord-wrap .btn_address,.ord-wrap .btn_frmline{display:inline-flex;align-items:center;justify-content:center;height:45px;padding:0 16px;margin-left:6px;border:1px solid var(--line);background:#fff;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer;vertical-align:top}
.ord-wrap .btn_address:hover,.ord-wrap .btn_frmline:hover{border-color:var(--sage);color:var(--sage-d)}
/* 폼 테이블 → 세로 스택형 */
.ord-wrap .tbl_frm01 table{width:100%;border-collapse:collapse}
.ord-wrap .tbl_frm01 caption{display:none}
.ord-wrap .tbl_frm01 tr{display:block;padding:9px 0;border-bottom:1px solid var(--line2)}
.ord-wrap .tbl_frm01 tr:last-child{border-bottom:0}
.ord-wrap .tbl_frm01 th{display:block;text-align:left;font-size:12px;font-weight:700;color:var(--ink2);padding:0 0 7px;width:auto;border:0;background:none}
.ord-wrap .tbl_frm01 td{display:block;padding:0;border:0;background:none}
/* 배송지 선택 라디오 → 칩 */
.ord-wrap .order_choice_place{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:2px}
.ord-wrap .order_choice_place label{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer;margin:0}
.ord-wrap .order_choice_place input[type=radio],.ord-wrap .order_choice_place input[type=checkbox]{accent-color:var(--sage);margin-right:2px;height:auto}
/* 주문상품 표 */
.ord-prd #sod_list{width:100%;border-collapse:collapse}
.ord-prd #sod_list thead th{font-size:11.5px;font-weight:700;color:var(--mut);text-align:center;padding:0 8px 10px;border-bottom:1px solid var(--line)}
.ord-prd #sod_list thead th:first-child{text-align:left}
.ord-prd #sod_list tbody td{padding:12px 8px;border-bottom:1px solid var(--line2);font-size:13px;text-align:center;vertical-align:middle}
.ord-prd #sod_list tbody tr:last-child td{border-bottom:0}
.ord-prd #sod_list .td_prd{text-align:left}
.ord-prd #sod_list .sod_img{float:left;margin-right:12px}
.ord-prd #sod_list .sod_img img{border-radius:8px;display:block}
.ord-prd #sod_list .sod_name{overflow:hidden;font-weight:700}
.ord-prd #sod_list .sod_opt{font-weight:600;font-size:11.5px;color:var(--mut);margin-top:3px}
.ord-prd #sod_list .cp_btn{margin-top:6px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 10px;font-size:11.5px;font-weight:700;color:var(--ink2);cursor:pointer}
/* 결제 요약(합계) */
.ord-sum #sod_bsk_tot ul{list-style:none;margin:0;padding:0}
.ord-sum #sod_bsk_tot li{display:flex;align-items:baseline;font-size:13.5px;color:var(--ink2);padding:6px 0;gap:0}
.ord-sum #sod_bsk_tot li>span:first-child{flex:1 1 auto;text-align:left}
.ord-sum #sod_bsk_tot li>strong{text-align:right}
.ord-sum #sod_bsk_tot li strong{font-weight:700;color:var(--ink)}
.ord-sum #sod_bsk_tot .sod_bsk_cnt{margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.ord-sum #sod_bsk_tot .sod_bsk_cnt span{font-size:14px;font-weight:800;color:var(--ink)}
.ord-sum #sod_bsk_tot .sod_bsk_cnt strong{font-size:22px;font-weight:800;color:var(--sage-d)}
/* 결제 수단 */
.ord-wrap .od_pay_buttons_el>h3{display:none}
.ord-wrap #od_tot_price{display:flex;align-items:baseline;gap:0;background:var(--sage-bg);border-radius:12px;padding:14px 18px;margin:2px 0 16px}
.ord-wrap #od_tot_price>span{flex:1 1 auto;font-size:13.5px;font-weight:800;color:#3f5530;text-align:left}
.ord-wrap #od_tot_price strong{font-size:22px;font-weight:800;color:var(--sage-d)}
.ord-wrap #sod_frm_paysel{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.ord-wrap #sod_frm_paysel legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.ord-wrap #od_pay_sl label.lb_icon{border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px 18px;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:7px;margin:0}
.ord-wrap #od_pay_sl input[type=radio]{accent-color:var(--sage);height:auto}
.ord-wrap #od_pay_sl input[type=radio]:checked+label.lb_icon{border-color:var(--sage);background:var(--sage-bg);color:var(--sage-d)}
.ord-wrap #sod_frm_pt_alert{font-size:11.5px;color:var(--mut);background:var(--bg);border-radius:9px;padding:10px 14px;margin:0 0 12px}
.ord-wrap #settle_bank{margin-top:12px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:10px}
.ord-wrap #settle_bank label{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin:0 0 6px}
.ord-wrap #settle_bank label.sound_only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);margin:0}
.ord-wrap #settle_bank br{display:none}
.ord-wrap #settle_bank select,.ord-wrap #settle_bank input[type=text]{width:100%;max-width:340px}
.ord-wrap #settle_bank input[type=text]{margin-top:12px}
.ord-wrap .sod_frm_point{margin-top:14px;padding:14px;background:var(--bg);border-radius:10px}
.ord-wrap #sod_frm_pt{margin-top:8px;font-size:12px;color:var(--ink2)}
.ord-wrap .pay_tbl table{width:100%}
.ord-wrap .pay_tbl th{vertical-align:top;text-align:left;font-size:12.5px;font-weight:700;color:var(--ink2);padding:6px 8px 6px 0;white-space:nowrap}
.ord-wrap .pay_tbl td{vertical-align:top;text-align:right;font-size:13px;padding:6px 0}
.ord-wrap .pay_tbl .es-note-row td{text-align:left;padding:0 0 4px}
.ord-wrap .pay_tbl .es-note{display:block;text-align:left;font-size:11px;font-weight:400;color:var(--mut);line-height:1.4}
/* 주문 버튼 */
.ord-wrap #display_pay_button{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ord-wrap #display_pay_button .btn_submit{width:100%;background:var(--sage);color:#fff;border:0;border-radius:12px;padding:16px 0;font-size:15.5px;font-weight:700;cursor:pointer}
.ord-wrap #display_pay_button .btn_submit:hover{background:var(--sage-d)}
.ord-wrap #display_pay_button .btn01{text-align:center;color:var(--mut);font-size:12.5px;text-decoration:none;padding:4px}

/* ── [주문서] 테마 default_shop.css 의 #sod_frm* ID 규칙 오버라이드 ──
   테마가 #sod_frm .tbl_frm01 th/td{padding:10px}, #sod_frm_pay .pay_tbl th/td{padding:10px} 등
   ID 특정도(1,2,0)로 .ord-wrap 클래스 규칙(0,2,0)을 이겨 여백이 어긋남 → .ord-wrap 접두로 특정도 우위 확보 */
.ord-wrap #sod_frm .tbl_frm01,
.ord-wrap #sod_frm_orderer .tbl_frm01,
.ord-wrap #sod_frm_taker .tbl_frm01{padding:0;margin:0;border:0}
.ord-wrap #sod_frm .tbl_frm01 th{display:block;width:auto;text-align:left;font-size:12px;font-weight:700;color:var(--ink2);padding:0 0 7px;background:none;vertical-align:top}
.ord-wrap #sod_frm .tbl_frm01 td{display:block;text-align:left;padding:0;background:none;vertical-align:top}
.ord-wrap #sod_frm .tbl_frm01 td input[type=radio],
.ord-wrap #sod_frm .tbl_frm01 td input[type=checkbox]{width:auto}
.ord-wrap #sod_frm .tbl_frm01 td #od_zip,
.ord-wrap #sod_frm .tbl_frm01 td #od_b_zip{width:150px;display:inline-block}
.ord-wrap #sod_frm_pay{position:static;margin:0 0 16px}
.ord-wrap #sod_frm_pay .pay_tbl th{width:auto;text-align:left;font-size:12.5px;font-weight:700;color:var(--ink2);padding:6px 8px 6px 0;background:none;border:0;white-space:nowrap}
.ord-wrap #sod_frm_pay .pay_tbl td{text-align:right;font-size:13px;padding:6px 0;height:auto;background:none;border:0}
.ord-wrap #sod_frm_pay .pay_tbl .es-note-row td{text-align:left;padding:0 0 4px}
.ord-wrap .sod_right .pay_tbl,
.ord-wrap .sod_right #od_tot_price{border:0}
.ord-prd #sod_list .td_num,
.ord-prd #sod_list .td_numbig,
.ord-prd #sod_list .td_dvr{width:auto}

/* ── [주문서] 세모네모 자체 규칙 보정 ── */
/* .smnm-page section{padding:clamp(58px..92px) 0}(랜딩용)이 주문서 카드에 붙는 것 차단 → 카드 패딩 복원 */
.ord-wrap .frm{padding:26px 30px}
/* 참고항목(od_addr3)은 프리뷰 디자인에 없음 → 숨김(값은 그대로 전송) */
.ord-wrap #od_addr3,.ord-wrap #od_b_addr3{display:none}
.ord-wrap #od_addr3+label,.ord-wrap #od_b_addr3+label{display:none}
/* 배송지선택: 라디오+라벨 형제 구조 → 라디오 숨기고 라벨을 pill로, 선택 시 sage 강조(프리뷰와 동일) */
.ord-wrap .order_choice_place input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0}
.ord-wrap .order_choice_place input[type=radio]:checked+label{border-color:var(--sage);background:var(--sage-bg);color:var(--sage-d)}
/* 스크린리더 전용 텍스트 숨김(테마 default_shop.css 미로드 대비 — 주문서 자체 보장) */
.ord-wrap .sound_only,.ord-wrap .msg_sound_only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px!important;border:0!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;font-size:0;line-height:0}
/* '기본배송지로 설정' 체크박스+라벨 — div.smnm-chk-row flex 정렬(수직 중앙) */
.ord-wrap #sod_frm_taker .smnm-chk-row{display:flex;align-items:center;gap:6px;margin-top:10px}
.ord-wrap #sod_frm_taker .smnm-chk-row #ad_default{width:auto;height:auto;margin:0;accent-color:var(--sage);flex:none}
.ord-wrap #sod_frm_taker .smnm-chk-row label[for=ad_default]{font-size:12px;font-weight:400;color:var(--ink2);cursor:pointer;margin:0}

@media(max-width:640px){
  .ord-wrap .frm{padding:20px 18px}
  .ord-wrap{padding-left:16px;padding-right:16px}
  .ord-wrap .btn_address,.ord-wrap .btn_frmline{margin-left:0;margin-top:6px}
  .ord-prd #sod_list thead{display:none}
  .ord-prd #sod_list tbody tr{display:block;border-bottom:1px solid var(--line);padding:10px 2px}
  /* [세모네모 B2B 2026-07-15] 모바일: thead 숨김 시 각 셀에 라벨(총수량/판매가/소계/포인트/배송비) 병기 */
  .ord-prd #sod_list tbody td{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px;border:0;text-align:right}
  .ord-prd #sod_list tbody td[data-label]::before{content:attr(data-label);font-size:12px;font-weight:700;color:var(--mut);text-align:left;flex:none}
  .ord-prd #sod_list .td_prd{display:block}
  .ord-prd #sod_list .td_prd::before{content:none}
}

/* ═════════ [주문상세 orderinquiryview.php] 세모네모 디자인 (테마 shop CSS 미로드 + #sod_fin 스코프) ═════════ */
#sod_fin{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0 18px;align-items:start;max-width:900px;margin:0 auto;padding:6px 0 90px}
#sod_fin > *{grid-column:1/-1;min-width:0}
#sod_fin > .sod_left{grid-column:1}
#sod_fin > .sod_right{grid-column:2;position:sticky;top:185px;align-self:start}
#sod_fin h2,#sod_fin h3{font-size:15.5px;font-weight:800;padding-left:11px;border-left:3.5px solid var(--sage);margin-bottom:15px;letter-spacing:-.01em}
/* 헤더: 주문번호 + 상태칩 */
#sod_fin_no{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
#sod_fin_no .ov-hd-l{font-size:14px;color:var(--ink2)}
#sod_fin_no .ov-hd-l strong{font-size:20px;font-weight:800;color:var(--ink);margin-left:6px;letter-spacing:-.02em}
#sod_fin_no .ov-date{display:block;font-size:12px;color:var(--mut);margin-top:5px;font-weight:500}
#sod_fin .ov-chip{font-size:12.5px;font-weight:800;border-radius:999px;padding:7px 16px;background:var(--sage-bg);color:var(--sage-d)}
#sod_fin .ov-chip.st-wait{background:#fbeeeb;color:var(--red)}#sod_fin .ov-chip.st-pay{background:#eef2e6;color:var(--sage-d)}
#sod_fin .ov-chip.st-ready{background:#fff4e2;color:#b0714f}#sod_fin .ov-chip.st-ship{background:#e8f0f7;color:#5b6f92}
#sod_fin .ov-chip.st-done{background:#eef2e6;color:var(--sage-d)}#sod_fin .ov-chip.st-cancel{background:#f0ede4;color:var(--mut)}
/* 카드 공통(각 섹션) */
#sod_fin_list,#sod_fin .sod_left > section,#sod_fin_tot,#sod_fin_cancel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:16px}
/* 주문 상품 테이블 */
#sod_fin_list .tbl_wrap{overflow-x:auto}
#sod_fin_list table{width:100%;border-collapse:collapse;min-width:560px}
#sod_fin_list thead th{font-size:11px;font-weight:700;color:var(--mut);padding:0 8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
#sod_fin_list thead #th_itimg,#sod_fin_list thead #th_itname{text-align:left}
#sod_fin_list tbody td{font-size:12.5px;padding:12px 8px;border-bottom:1px solid var(--line2);text-align:right;vertical-align:middle}
#sod_fin_list tbody tr:last-child td{border-bottom:0}
#sod_fin_list .td_imgsmall{text-align:center;vertical-align:middle;width:78px}#sod_fin_list .td_imgsmall img{border-radius:8px}
#sod_fin_list .td_prod{text-align:left;vertical-align:middle}
#sod_fin_list .ov-pname{display:block;font-weight:700;color:var(--ink);font-size:13px;line-height:1.4}
#sod_fin_list .ov-opt{display:block;color:var(--mut);font-size:11.5px;margin-top:2px;line-height:1.4}
#sod_fin_list .td_dvr{text-align:center;color:var(--ink2)}
/* 상태설명 토글 */
#sod_fin .btn_frmline{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:12px;font-weight:700;color:var(--ink2);cursor:pointer}
#sod_fin .btn_frmline:hover{border-color:var(--sage);color:var(--sage-d)}
/* 정보 카드 내부 tbl_head01 → 라벨/값 행 */
#sod_fin .tbl_head01 table{width:100%;border-collapse:collapse}
#sod_fin .tbl_head01 tr{border-bottom:1px solid var(--line2)}
#sod_fin .tbl_head01 tr:last-child{border-bottom:0}
#sod_fin .tbl_head01 th{width:104px;text-align:left;font-size:12px;font-weight:700;color:var(--ink2);padding:10px 8px 10px 0;vertical-align:top;white-space:nowrap}
#sod_fin .tbl_head01 td{font-size:13px;color:var(--ink);padding:10px 0;vertical-align:top;line-height:1.55;word-break:break-all}
#sod_fin .tbl_head01 td a{color:var(--sage-d);font-weight:700}
#sod_fin .empty_table{color:var(--mut);font-size:12.5px;text-align:left;padding:6px 0}
/* [2026-07-13] 분리송장(주문 1건 : 송장 N건) + 블라인드 발신인 */
#sod_fin .ov-split{background:#fdf1ee;border:1px solid #f2d9d1;color:#a4533f;border-radius:9px;padding:9px 12px;font-size:12px;font-weight:600;margin-bottom:10px}
#sod_fin .ov-ships table{width:100%;border-collapse:collapse}
#sod_fin .ov-ships th{font-size:11px;font-weight:700;color:var(--mut);text-align:left;padding:0 6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
#sod_fin .ov-ships td{font-size:12.5px;padding:10px 6px;border-bottom:1px solid var(--line2);vertical-align:middle}
#sod_fin .ov-ships tr:last-child td{border-bottom:0}
#sod_fin .ov-ships td.n{text-align:right}
#sod_fin .ov-ships a{color:var(--sage-d);font-weight:700;text-decoration:underline}
#sod_fin .ov-shst{font-size:11px;font-weight:800;border-radius:6px;padding:3px 8px;background:var(--sage-bg);color:var(--sage-d);white-space:nowrap}
#sod_fin .ov-ships td.ov-shit{font-size:11.5px;color:var(--ink2);line-height:1.6}
#sod_fin .ov-ships td.ov-shit span{display:block}
#sod_fin .ov-ships td.ov-shit b{color:var(--ink);font-weight:800}
#sod_fin .ov-sender{margin-top:10px;font-size:12px;color:var(--ink2);background:var(--bg);border-radius:8px;padding:9px 12px}
#sod_fin .ov-sender b{color:var(--ink);font-weight:800}
#sod_fin .ov-sender em{font-style:normal;font-size:10.5px;font-weight:800;color:#8a6d1f;background:#fff7e6;border-radius:5px;padding:2px 7px;margin-left:4px}
/* 우측 결제 요약 */
#sod_bsk_tot{list-style:none;margin:0 0 16px;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:14px}
#sod_bsk_tot li{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;color:var(--ink2);padding:6px 0}
#sod_bsk_tot li span{flex:1}#sod_bsk_tot li strong{font-weight:700;color:var(--ink)}
#sod_bsk_tot .sod_bsk_cnt{margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
#sod_bsk_tot .sod_bsk_cnt span{font-size:14px;font-weight:800;color:var(--ink)}
#sod_bsk_tot .sod_bsk_cnt strong{font-size:18px;font-weight:800;color:var(--sage-d)}
#sod_fin_tot ul{list-style:none;margin:0;padding:0}
#sod_fin_tot li{display:flex;align-items:baseline;justify-content:space-between;font-size:13.5px;color:var(--ink2);padding:7px 0;flex-wrap:wrap}
#sod_fin_tot li strong{font-weight:800;color:var(--ink);font-size:15px}
#sod_fin_tot #alrdy strong{color:var(--sage-d);font-size:18px}
#sod_fin_tot .right{flex:1 1 100%;margin-top:6px;background:var(--bg);border-radius:8px;padding:8px 12px}
#sod_fin_tot .right p{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);margin:2px 0}
/* 주문취소 */
#sod_fin_cancel > button{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer}
#sod_fin_cancel > button:hover{border-color:var(--red);color:var(--red)}
#sod_fin_cancelfrm{display:none;margin-top:12px}
#sod_fin_cancelfrm .frm_input{width:100%;height:44px;border:1px solid var(--line);border-radius:9px;padding:0 12px;font-size:13px;background:var(--bg);box-sizing:border-box;margin-bottom:8px}
#sod_fin_cancelfrm .btn_frmline{width:100%;height:44px;justify-content:center;background:var(--sage);color:#fff;border:0}
#sod_fin_cancel p{font-size:12.5px;color:var(--mut)}
#sod_fin_test .btn_submit{margin-top:10px;padding:10px 18px;background:var(--sage);color:#fff;border:0;border-radius:8px;cursor:pointer}

/* 구매확정 · 후기 (배송완료 주문) — 김명구 2026-07-14 */
#sod_fin_confirm{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:16px}
#sod_fin_confirm.is-done{border-color:var(--sage);background:linear-gradient(180deg,#f6faf6,#fff)}
#sod_fin_confirm .cf-msg{font-size:12.5px;color:var(--ink2);line-height:1.6;margin:0 0 6px}
#sod_fin_confirm .cf-msg b{color:var(--sage-d);font-weight:800}
#sod_fin_confirm .cf-auto{font-size:11.5px;color:var(--mut);background:var(--bg);border-radius:8px;padding:8px 10px;margin:0 0 12px;line-height:1.5}
#sod_fin_confirm .cf-auto b{color:var(--ink2);font-weight:700}
#sod_fin_confirm form{margin:0}
#sod_fin_confirm .cf-btn{width:100%;height:46px;background:var(--sage);color:#fff;border:0;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;transition:.15s}
#sod_fin_confirm .cf-btn:hover{background:var(--sage-d)}
#sod_fin_confirm .cf-done{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--sage-d);margin:0 0 12px}
#sod_fin_confirm .cf-done::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--sage);color:#fff;font-size:12px;flex:0 0 20px}
#sod_fin_confirm .cf-done span{font-size:11.5px;font-weight:600;color:var(--mut)}
#sod_fin_confirm .cf-review{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
#sod_fin_confirm .cf-review li{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:10px;padding:10px 12px}
#sod_fin_confirm .cf-rname{flex:1;min-width:0;font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sod_fin_confirm .cf-rbtn{flex:0 0 auto;background:#fff;border:1px solid var(--sage);color:var(--sage-d);border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
#sod_fin_confirm .cf-rbtn:hover{background:var(--sage);color:#fff}

@media(max-width:760px){
  #sod_fin{grid-template-columns:1fr;padding-left:16px;padding-right:16px}
  #sod_fin > .sod_left,#sod_fin > .sod_right{grid-column:1/-1}
  #sod_fin > .sod_right{position:static}
  #sod_fin_list,#sod_fin .sod_left > section,#sod_fin_tot,#sod_fin_cancel,#sod_fin_confirm,#sod_bsk_tot{padding:18px 16px}
}

/* ═════════ [세모네모] 데스크톱 기본 배율 90% (브라우저 100%에서도 90% 룩) — 사장님 요청 2026-07-09 ═════════ */
/* zoom은 크롬/엣지/사파리/최신 파폭 지원. 스티키 헤더·fixed 퀵바·모달 정상 동작. 모바일(≤768)은 설계 크기 유지. */
@media(min-width:769px){body{zoom:.9}}

/* [2026-07-15] 선택된 옵션 수량/삭제 버튼 정상화 (2.png 증가/감소/삭제 세로깨짐 수정)
   원인: 이 스킨엔 .2017_renewal_itemform 이 없어 shop.override.js 아이콘 템플릿 대신
   원본 shop.js 텍스트버튼(증가/감소/삭제.btn_frmline) 구조가 렌더됨 → 아이콘용 CSS와 불일치.
   → 텍스트 버튼을 [−][수량][+] 스텝퍼 + × 삭제로 CSS만으로 정상화(JS 무수정). */
#sit_opt_added .sit_opt_list .sit_opt_subj{flex:1 1 200px;white-space:normal}
#sit_opt_added .sit_opt_list > div{display:flex;align-items:center;flex-shrink:0}
#sit_opt_added .sit_opt_list .frm_input{width:52px !important;height:40px !important;text-align:center;font-size:15px;font-weight:800;font-family:inherit;border:1px solid var(--line) !important;border-radius:0 !important;padding:0 !important;background:#fff !important;order:2;outline:none}
#sit_opt_added .sit_opt_list .btn_frmline{width:40px !important;min-width:0 !important;height:40px !important;padding:0 !important;border:1px solid var(--line) !important;background:#fff !important;color:var(--ink2) !important;font-size:0 !important;line-height:1 !important;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap}
#sit_opt_added .sit_opt_list .btn_frmline:hover{background:var(--bg) !important}
#sit_opt_added .sit_opt_list .sit_qty_minus{order:1;border-radius:10px 0 0 10px !important;border-right:0 !important}
#sit_opt_added .sit_opt_list .sit_qty_plus{order:3;border-radius:0 10px 10px 0 !important;border-left:0 !important}
#sit_opt_added .sit_opt_list .sit_qty_minus::before{content:"\2212";font-size:18px}
#sit_opt_added .sit_opt_list .sit_qty_plus::before{content:"+";font-size:20px}
#sit_opt_added .sit_opt_list .sit_opt_del{position:static !important;top:auto !important;right:auto !important;left:auto !important;order:4;margin-left:8px;border-radius:9px !important;flex-shrink:0}
#sit_opt_added .sit_opt_list .sit_opt_del::before{content:"\00D7";font-size:20px;color:var(--mut)}

/* [2026-07-15] 주문서 하단 '취소' 버튼 숨김 (사장님 요청) — #display_pay_button 내 cart.php 링크(.btn01) */
#display_pay_button a.btn01{display:none !important}