/* ═══ 프런트(사용자) 레이아웃 ═══ */
/* 유틸바 */
.utilbar{background:var(--side);color:#cfd8cd;font-size:11.5px}
.utilbar .wrap{display:flex;justify-content:flex-end;gap:16px;padding:6px 20px}
.utilbar a:hover{color:#fff}
.utilbar .sep{opacity:.3}

/* 헤더 */
header.gnbwrap{background:rgba(255,254,250,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.gnbtop{display:flex;align-items:center;gap:22px;padding:14px 20px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo img{height:38px}
.logo .lt{line-height:1.15}
.logo .lt b{font-family:var(--serif);font-size:17px;color:var(--forest);display:block}
.logo .lt span{font-size:10px;letter-spacing:.08em;color:var(--sage);font-weight:800;text-transform:uppercase}
.gnbsearch{flex:1;max-width:430px;position:relative}
.gnbsearch input{width:100%;border:2px solid var(--forest);border-radius:var(--r-pill);padding:9px 42px 9px 18px;font:400 13.5px var(--sans);background:#fff}
.gnbsearch button{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:var(--forest);color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer}
.gnbuser{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:12px;color:var(--ink2)}
.gnbuser a{display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:700}
.gnbuser a .ico{font-size:19px}
.gnbuser a:hover{color:var(--forest)}
.gnbuser .cartn{position:relative}
.gnbuser .cartn em{position:absolute;top:-4px;right:-8px;background:var(--clay);color:#fff;font-style:normal;font-size:9.5px;font-weight:800;border-radius:var(--r-pill);padding:1px 5px}

/* GNB */
nav.gnb{border-top:1px solid var(--line)}
nav.gnb ul.main{display:flex;gap:2px;padding:0 12px;list-style:none;flex-wrap:wrap}
nav.gnb ul.main>li{position:relative}
nav.gnb ul.main>li>a{display:block;padding:11px 14px;font-size:14px;font-weight:800;color:var(--ink)}
nav.gnb ul.main>li>a:hover,nav.gnb ul.main>li.here>a{color:var(--forest)}
nav.gnb ul.main>li.here>a{box-shadow:inset 0 -3px 0 var(--forest)}
nav.gnb ul.main>li:hover .dd{display:block}
.dd{display:none;position:absolute;left:0;top:100%;min-width:200px;background:var(--card);border:1px solid var(--line);
  border-radius:0 0 14px 14px;box-shadow:var(--sh2);padding:8px;z-index:70}
.dd a{display:block;padding:8px 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink2)}
.dd a:hover{background:var(--leaf);color:var(--forest)}
.dd .ddsec{font-size:10.5px;font-weight:800;color:var(--sage);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px 2px}

/* 레이아웃: 사이드 서브내브 */
.layout{display:grid;gap:22px;padding:6px 0 50px}
@media(min-width:960px){.layout.side{grid-template-columns:220px 1fr}}
/* ★ grid item 의 기본 최소 크기는 min-content 다 — 본문 안에 넓은 표가 있으면
   1fr 열이 그만큼 안 줄어들어 **페이지가 가로로 넘친다**(마이 홈이 1024·1200px 에서 넘쳤다).
   좁은 화면(760px 이하)에만 주던 규칙인데 데스크톱에서도 필요하다. */
.layout > *, main, .grid > *, .cardlist > *{min-width:0}
aside.subnav{align-self:start}
@media(min-width:960px){aside.subnav{position:sticky;top:120px}}
.subnav .snhead{font-family:var(--serif);font-size:17px;color:var(--forest);padding:4px 6px 10px;border-bottom:2px solid var(--forest);margin-bottom:8px}
.subnav ul{list-style:none}
.subnav li a{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.subnav li a:hover{background:var(--leaf);color:var(--forest)}
.subnav li a.on{background:var(--forest);color:#fff;font-weight:800}
.subnav .sndiv{font-size:10.5px;font-weight:800;color:var(--sage);letter-spacing:.05em;padding:12px 10px 4px;text-transform:uppercase}

/* 히어로(메인) */
.hero{background:linear-gradient(120deg,var(--forest) 0%,var(--forest2) 60%,#3c7a58 100%);color:#fff;border-radius:22px;
  padding:44px 40px;margin:20px 0;position:relative;overflow:hidden;box-shadow:var(--sh2)}
.hero::after{content:'🌾';position:absolute;right:-10px;bottom:-26px;font-size:150px;opacity:.14;transform:rotate(-8deg)}
.hero .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--leaf2);text-transform:uppercase}
.hero h1{font-family:var(--serif);font-size:32px;line-height:1.3;margin:10px 0 12px}
.hero p{font-size:14px;opacity:.88;max-width:560px}
.hero .heroact{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.hero .btn{border-color:transparent}
.hero .btn.line{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}

/* 4주체 진입 카드 */
.actors{display:grid;gap:14px;margin:20px 0}
@media(min-width:860px){.actors{grid-template-columns:repeat(4,1fr)}}
.actorcard{border-radius:var(--r-card);border:1px solid var(--line);background:var(--card);box-shadow:var(--sh);padding:20px;position:relative;transition:.15s;border-top:4px solid var(--forest)}
.actorcard:hover{box-shadow:var(--sh2);transform:translateY(-3px)}
.actorcard.buyer{border-top-color:var(--clay)} .actorcard.vendor{border-top-color:var(--gold)} .actorcard.seller{border-top-color:var(--info)}
.actorcard .ico{font-size:28px}
.actorcard b{display:block;font-size:15.5px;color:var(--forest);margin:8px 0 4px}
.actorcard p{font-size:12px;color:var(--ink2);min-height:52px}
.actorcard .go{font-size:12px;font-weight:800;color:var(--clay)}

/* 섹션 헤더 */
.sech{display:flex;align-items:baseline;gap:12px;margin:30px 0 14px}
.sech h2{font-family:var(--serif);font-size:22px;color:var(--forest)}
.sech .more{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink2)}
.sech .more:hover{color:var(--forest)}

/* 상품 그리드 */
.prods{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.prods{grid-template-columns:repeat(4,1fr)}}
.prod{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);padding:12px;transition:.15s;display:block}
.prod:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.prod .pn{font-size:13.5px;font-weight:700;color:var(--ink);margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.prod .po{font-size:11.5px;color:var(--ink2)}
.prod .pp{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--clay);margin-top:3px}
.prod .pp small{font-size:11px;color:var(--ink2);font-family:var(--sans);font-weight:400}
.prod .ptag{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}

/* 로그인 */
.authwrap{max-width:460px;margin:40px auto 70px}
.authwrap .card{padding:30px}
.authlogo{text-align:center;margin-bottom:22px}
.authlogo img{height:52px;margin:0 auto 10px}
.authlogo b{font-family:var(--serif);font-size:20px;color:var(--forest);display:block}
/* 로그인 화면 제목 — 화면에서는 작게, 스크린리더에게는 h1 로(P1 검수) */
.authlogo .authtitle{font-size:13px;font-weight:700;color:var(--ink3);margin:0 0 4px;letter-spacing:.04em}
.authlogo span{font-size:11.5px;color:var(--ink2)}
.authtabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-ctrl);overflow:hidden;margin-bottom:18px}
.authtabs button{padding:11px 6px;border:0;background:var(--paper);font:700 12.5px var(--sans);color:var(--ink2);cursor:pointer}
.authtabs button.on{background:var(--forest);color:#fff}
.authlinks{display:flex;justify-content:center;gap:14px;font-size:12px;color:var(--ink2);margin-top:16px}
.authlinks a:hover{color:var(--forest);text-decoration:underline}
.snsrow{display:grid;gap:8px;margin-top:14px}
.snsbtn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:var(--r-ctrl);border:1px solid var(--line);font:700 13px var(--sans);cursor:pointer;background:#fff}
.snsbtn.kakao{background:#FEE500;border-color:#FEE500}
.snsbtn.naver{background:#03C75A;border-color:#03C75A;color:#fff}

/* 푸터 */
footer.foot{background:var(--side);color:#aab5a8;margin-top:50px;font-size:12px}
footer.foot .wrap{padding:34px 20px 40px;display:grid;gap:24px}
@media(min-width:860px){footer.foot .wrap{grid-template-columns:2fr 1fr 1fr 1fr}}
footer.foot b{color:#fff;font-size:13px;display:block;margin-bottom:10px}
footer.foot a{display:block;padding:3px 0}
footer.foot a:hover{color:#fff}
footer.foot .flogo{font-family:var(--serif);font-size:16px;color:#fff}
footer.foot .fnote{margin-top:10px;line-height:1.7;opacity:.75}

/* 장바구니/주문 요약 */
.summary{background:var(--leaf);border:1px solid var(--leaf2);border-radius:var(--r-card);padding:20px}
.summary .srow{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;color:var(--ink2)}
.summary .srow.total{border-top:2px solid var(--forest);margin-top:8px;padding-top:12px;color:var(--forest);font-weight:800;font-size:16px}
.summary .srow.total .v{font-family:var(--serif);font-size:22px;color:var(--clay)}

/* 주문 흐름선 (buyer-order-detail 등) */
.flowline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--ink2);background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-ctrl);padding:10px 14px;margin-bottom:14px}
.flowline .fstep{background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 12px}
.flowline .fstep.on{background:var(--forest);border-color:var(--forest);color:#fff}
.flowline .arr{color:var(--sage)}

/* 그린페이 지갑 */
.wallet{background:linear-gradient(120deg,var(--forest),var(--forest2));color:#fff;border-radius:var(--r-card);padding:26px;box-shadow:var(--sh2);margin-bottom:16px;position:relative;overflow:hidden}
.wallet::after{content:'₩';position:absolute;right:14px;bottom:-24px;font-family:var(--serif);font-size:120px;opacity:.12}
.wallet .wl{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--leaf2)}
.wallet .wv{font-family:var(--serif);font-size:38px;font-weight:700;margin:6px 0 2px}
.wallet .wm{font-size:12px;opacity:.8}
.wallet .wact{display:flex;gap:8px;margin-top:16px}

/* 모바일(2026-08-08): 375px 에서 상품 카드 2열은 내용 최소폭 때문에 컨테이너를 밀어낸다.
   그리드 열에 minmax(0,1fr) 을 줘서 **줄어들 수 있게** 한다(1fr 만으로는 auto 최소폭이 이긴다). */
@media (max-width: 760px) {
  .prods { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .prod, .prod * { min-width: 0 }
  .prod .pn, .prod .po { overflow-wrap: anywhere }
}