/* st-base.css — 파운데이션(리셋 + 디자인 토큰). 컴포넌트 CSS와 분리. */
:root{
  /* 브랜드(그린) — 로고·헤더·내비·CTA·섹션 액센트 */
  --st-brand:#5f8c26; --st-brand-dark:#4c7220; --st-brand-soft:#f2f7e9;
  /* 세일(레드) — 할인율·할인금액·세일배지·랭킹 */
  --st-sale:#f9423a; --st-sale-dark:#e02b23; --st-sale-soft:#fff1f0;
  /* 하위호환 별칭: 기존 --st-red 계열은 브랜드 그린을 가리킨다 */
  --st-red:var(--st-brand); --st-red-dark:var(--st-brand-dark); --st-red-soft:var(--st-brand-soft);
  --st-ink:#232323; --st-ink-2:#555555; --st-ink-3:#8d8d8d;
  --st-line:#e6e4e1; --st-line-2:#f1efec;
  --st-bg:#ffffff; --st-bg-soft:#f7f6f4; --st-bg-deep:#efece6;
  --st-green:#eaf3e4; --st-pink:#fbeeee;
  --st-radius:14px; --st-radius-sm:8px;
  --st-inner:1680px; --st-gutter:48px; --st-cols:5; --st-promo-cols:3; --st-foot-cols:1.4fr 1fr 1fr 1.1fr;
  --st-font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --st-mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--st-font);color:var(--st-ink);background:var(--st-bg);-webkit-font-smoothing:antialiased;letter-spacing:-0.01em;word-break:keep-all;text-wrap:pretty}
img{max-width:100%}
a{color:var(--st-ink);text-decoration:none}
a:hover{color:var(--st-red)}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;color:var(--st-ink)}
input::placeholder,textarea::placeholder{color:#b3aea7}
table{border-collapse:collapse}
@keyframes st-kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}
@media (max-width:1400px){:root{--st-cols:4;--st-gutter:32px;--st-promo-cols:2}}
@media (max-width:1200px){:root{--st-foot-cols:1fr 1fr}}
@media (max-width:560px){:root{--st-foot-cols:1fr}}
@media (max-width:1080px){:root{--st-cols:3;--st-gutter:20px;--st-promo-cols:1}}
[data-fchip]{white-space:nowrap}
@media (max-width:1240px){.st-goods{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:36px!important}}
@media (max-width:900px){.st-goods{grid-template-columns:minmax(0,1fr)!important}.st-goods-info{position:static!important}}
@media (max-width:1400px){.st-plist-wrap{grid-template-columns:212px minmax(0,1fr)!important;gap:0 28px!important}}
@media (max-width:1080px){.st-plist-wrap{grid-template-columns:minmax(0,1fr)!important}.st-plist-side{position:static!important;margin-bottom:24px}}

/* ================= 반응형 확장 ================= */
@media (max-width:860px){:root{--st-cols:3}}
@media (max-width:640px){:root{--st-cols:2;--st-gutter:16px}}

/* 탭 상품 그리드 (기본 데스크톱 5단) */
.st-sec-cattab [data-cattab-grid]{grid-template-columns:repeat(5,1fr)!important;min-height:0!important}
/* 상품 그리드는 인라인 var(--st-cols)를 무시하고 뷰포트 기준으로 강제 */
@media (max-width:1400px){.st-grid,.st-sec-cattab [data-cattab-grid]{grid-template-columns:repeat(4,1fr)!important}}
@media (max-width:1080px){.st-grid,.st-sec-cattab [data-cattab-grid]{grid-template-columns:repeat(3,1fr)!important}}
@media (max-width:640px){.st-grid,.st-sec-cattab [data-cattab-grid]{grid-template-columns:repeat(2,1fr)!important;gap:26px 14px!important}}

/* 헤더 */
@media (max-width:1024px){
  .st-head-main{gap:24px!important;height:82px!important}
  .st-search{flex:1 1 auto!important;max-width:none!important}
  .st-head-icons{gap:22px!important}
}
@media (max-width:900px){
  .st-gnb{display:none!important}
  .st-mo-burger{display:flex!important}
  .st-drawer{display:flex!important}
  .st-drawer-scrim{display:block!important}
  .st-head-main{gap:18px!important}
}
@media (max-width:760px){
  [data-util]{display:none!important}
  .st-head-main{flex-wrap:wrap!important;height:auto!important;padding-top:12px!important;padding-bottom:12px!important;gap:12px 20px!important}
  .st-logo{order:1}
  .st-logo img{height:52px!important}
  .st-head-icons{order:2;margin-left:auto}
  .st-search{order:3;flex:1 1 100%!important;width:100%!important}
  .st-gnb .st-inner{height:auto!important;gap:14px!important;padding-top:10px!important;padding-bottom:10px!important}
  .st-gnb-list{display:none!important}
}
}

/* 메가메뉴 */
@media (max-width:1400px){.st-mega .st-inner{grid-template-columns:repeat(4,1fr) 240px!important}}
@media (max-width:1200px){.st-mega .st-inner{grid-template-columns:repeat(3,1fr)!important}.st-mega-promo{display:none!important}}
@media (max-width:760px){.st-mega .st-inner{grid-template-columns:repeat(2,1fr)!important;padding-top:24px!important;padding-bottom:24px!important;gap:22px!important}}

/* 원형 타일(카테고리·농가) */
@media (max-width:1080px){.st-cats ul,.st-sec-farms ul{grid-template-columns:repeat(4,1fr)!important}}
@media (max-width:640px){.st-cats ul,.st-sec-farms ul{grid-template-columns:repeat(3,1fr)!important}}

/* 서비스·듀오·게시판 2단 → 1단 */
@media (max-width:860px){
  .st-service ul{grid-template-columns:repeat(2,1fr)!important;gap:22px 0!important}
  .st-service li{border-right:0!important}
  .st-duo .st-inner{grid-template-columns:1fr!important}
  .st-board .st-inner{grid-template-columns:1fr!important;gap:36px!important}
}
@media (max-width:520px){.st-service ul{grid-template-columns:1fr!important}}

/* 띠배너·히어로·섹션 타이틀 */
@media (max-width:760px){.st-band-strip [data-strip]{height:auto!important;min-height:190px!important}.st-band-strip [data-strip-slide] > div:last-child{padding:0 28px!important}
  .st-hero{height:48vh!important;min-height:340px!important;max-height:440px!important}
  .st-hero [data-hero-bg]{background-position:center!important;inset:0!important}
  .st-hero-scrim{background:linear-gradient(180deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.2) 42%,rgba(255,255,255,0) 100%)!important}
  .st-hero h2{font-size:30px!important}
  .st-hero p{font-size:17px!important}
}
@media (max-width:640px){.st-sec-title{font-size:26px!important}}

/* 장바구니·주문 2단 → 1단 */
@media (max-width:1200px){
  .st-cart-grid,.st-order-grid{grid-template-columns:1fr!important;gap:28px!important}
  .st-cart-grid > aside,.st-order-grid > aside{position:static!important;top:auto!important}
}
/* \uc7a5\ubc14\uad6c\ub2c8 \ud589: \uc881\uc740 \ud654\uba74\uc5d0\uc11c 2\uc904\ub85c \uc7ac\ubc30\uce58 (\uae08\uc561\u00b7\uc0ad\uc81c \ud0ad \uc798\ub9bc \ubc29\uc9c0) */
@media (max-width:820px){
  .st-cart-grid ul > li,.st-order-grid ul > li{flex-wrap:wrap!important;gap:14px!important}
  .st-cart-name{flex:1 1 150px!important;min-width:0!important}
  .st-cart-price{width:auto!important;margin-left:auto!important;text-align:right!important}
}