/* 곡간 한톨 — 공통 스타일 (② 디자인 시안 = ③ 웹이 그대로 이어 씀). 색은 :root 만 바꾼다 */
:root{
  --bg:#F6EFE2;      /* 쌀겨 베이지 — 바탕 */
  --card:#FFFDF8;    /* 흰쌀 — 카드·입력칸 */
  --ink:#3B2A1A;     /* 짙은 갈색 — 본문 글자 */
  --sub:#8A6E4B;     /* 볏짚 갈색 — 보조 글자·테두리 강조 */
  --green:#4F7A3A;   /* 모 초록 — 주 버튼·포인트 */
  --gold:#D9A441;    /* 황금 낟알 — 뱃지·별 */
  --line:#E6DAC4;    /* 구분선 */
  --r:12px; --r-btn:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --f-xs:12px; --f-sm:14px; --f-md:16px; --f-lg:20px; --f-xl:24px; --f-2xl:32px;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-size:var(--f-md);line-height:1.55;padding-bottom:72px}
a{color:inherit}
img{max-width:100%;display:block}
.band{background:var(--ink);color:#F6EFE2;font-size:var(--f-xs);text-align:center;padding:6px var(--s3);letter-spacing:.02em}
.band b{color:var(--gold)}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s4)}
/* 머리 */
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.top .wrap{display:flex;align-items:center;gap:var(--s4);height:56px}
.logo{display:flex;align-items:center;gap:var(--s2);font-weight:800;font-size:var(--f-lg);text-decoration:none;letter-spacing:-.02em}
.logo svg{width:28px;height:28px}
.nav{display:none;margin-left:auto;gap:var(--s5)}
.nav a{text-decoration:none;font-weight:600;color:var(--sub)}
.nav a[aria-current]{color:var(--ink);border-bottom:2px solid var(--green)}
.top .cart-btn{margin-left:auto;text-decoration:none;font-weight:700;display:flex;align-items:center;gap:6px}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--green);color:#fff;font-size:var(--f-xs);line-height:20px;text-align:center}
/* 하단 탭 바(휴대폰 — 앱에서도 그대로) */
.tabbar{position:fixed;left:0;right:0;bottom:0;height:64px;background:var(--card);border-top:1px solid var(--line);display:flex;z-index:20}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;font-size:var(--f-xs);color:var(--sub);font-weight:600}
.tabbar a svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
.tabbar a[aria-current]{color:var(--green)}
@media(min-width:900px){
  body{padding-bottom:0}
  .tabbar{display:none}
  .nav{display:flex}
  .top .cart-btn{margin-left:var(--s4)}
}
/* 공통 블록 */
h1{font-size:var(--f-xl);margin:var(--s5) 0 var(--s3);letter-spacing:-.02em;line-height:1.3}
h2{font-size:var(--f-lg);margin:var(--s6) 0 var(--s3);letter-spacing:-.01em}
.muted{color:var(--sub);font-size:var(--f-sm)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;padding:0 var(--s5);border-radius:var(--r-btn);border:0;background:var(--green);color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn.line{background:transparent;color:var(--green);border:1.5px solid var(--green)}
.btn.dark{background:var(--ink)}
.btn.sm{height:36px;padding:0 var(--s4);font-size:var(--f-sm)}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.chip{display:inline-block;font-size:var(--f-xs);font-weight:700;padding:2px 8px;border-radius:var(--r-btn);background:#EEF3E8;color:var(--green)}
.chip.gold{background:#F8ECD3;color:#8A5A0F}
/* S1 홈 */
.hero{background:linear-gradient(135deg,#EFE2C8,#F6EFE2);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;gap:var(--s5);padding-top:var(--s6);padding-bottom:var(--s6);align-items:center}
.hero h1{font-size:var(--f-2xl);margin:var(--s2) 0}
.hero p{margin:0 0 var(--s5);color:var(--sub)}
.hero .art{max-width:360px;justify-self:center;width:100%}
.hero .cta{display:flex;gap:var(--s3);flex-wrap:wrap}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.1fr .9fr;padding-top:var(--s7);padding-bottom:var(--s7)}.hero h1{font-size:40px}}
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin:var(--s5) 0}
.promise div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);text-align:center;font-size:var(--f-sm)}
.promise b{display:block;font-size:var(--f-md);color:var(--green)}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.cats a{display:block;text-decoration:none;text-align:center;padding:var(--s4) var(--s2);font-weight:700}
.cats a svg{width:48px;height:48px;margin:0 auto var(--s2)}
/* 상품 카드 */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr);gap:var(--s5)}}
.pcard{display:flex;flex-direction:column;text-decoration:none;overflow:hidden}
.pcard .thumb{aspect-ratio:1/1;background:#F1E6D1;display:flex;align-items:center;justify-content:center}
.pcard .thumb img{width:78%}
.pcard .body{padding:var(--s3)}
.pcard .name{font-weight:700;margin:var(--s1) 0}
.pcard .price{font-weight:800;font-size:var(--f-lg)}
.pcard .price small{font-size:var(--f-xs);color:var(--sub);font-weight:600}
/* S2 목록 */
.tabs{display:flex;gap:var(--s2);overflow:auto;margin:var(--s3) 0}
.tabs button,.tabs a{flex:none;height:40px;padding:0 var(--s4);border-radius:var(--r-btn);border:1px solid var(--line);background:var(--card);font:inherit;font-weight:700;color:var(--sub);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.tabs [aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s3);font-size:var(--f-sm)}
select,input,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
select{padding:6px 10px}
/* S3 상세 */
.detail{display:grid;gap:var(--s5);margin-top:var(--s4)}
@media(min-width:900px){.detail{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.detail .pic{aspect-ratio:1/1;background:#F1E6D1;border-radius:var(--r);display:flex;align-items:center;justify-content:center}
.detail .pic img{width:72%}
.opt{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s2) 0 var(--s4)}
.opt label{position:relative}
.opt input{position:absolute;opacity:0}
.opt span{display:inline-flex;flex-direction:column;align-items:center;min-width:92px;padding:var(--s2) var(--s3);border:1.5px solid var(--line);border-radius:var(--r);background:var(--card);font-weight:700;cursor:pointer}
.opt span small{font-weight:600;color:var(--sub)}
.opt input:checked+span{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset;color:var(--green)}
.mill{display:flex;gap:var(--s2);align-items:center;background:#EEF3E8;border-radius:var(--r);padding:var(--s3);font-size:var(--f-sm);margin-bottom:var(--s4)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--card)}
.qty button{width:40px;height:40px;border:0;background:none;font-size:20px;cursor:pointer;color:var(--ink)}
.qty output,.qty span{min-width:32px;text-align:center;font-weight:700}
.buy{display:flex;gap:var(--s2);margin-top:var(--s4)}
.buy .btn{flex:1}
.total-line{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s4);font-weight:700}
.total-line b{font-size:var(--f-xl)}
.info{width:100%;border-collapse:collapse;font-size:var(--f-sm);margin-top:var(--s3)}
.info th,.info td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.info th{width:96px;color:var(--sub);font-weight:600}
/* S4 장바구니 */
.cart-list{display:grid;gap:var(--s3)}
.citem{display:grid;grid-template-columns:72px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3)}
.citem .thumb{width:72px;height:72px;background:#F1E6D1;border-radius:10px;display:flex;align-items:center;justify-content:center}
.citem .thumb img{width:80%}
.citem .del{border:0;background:none;color:var(--sub);text-decoration:underline;cursor:pointer;font:inherit;font-size:var(--f-sm)}
.sum{padding:var(--s4);margin-top:var(--s4)}
.sum div{display:flex;justify-content:space-between;padding:4px 0}
.sum .grand{border-top:1px solid var(--line);margin-top:var(--s2);padding-top:var(--s3);font-weight:800;font-size:var(--f-lg)}
.freebar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin:var(--s2) 0}
.freebar i{display:block;height:100%;background:var(--green)}
.cols{display:grid;gap:var(--s5)}
@media(min-width:900px){.cols{grid-template-columns:1.6fr 1fr;align-items:start}}
/* 폼 */
.form{display:grid;gap:var(--s3)}
.form label{display:grid;gap:4px;font-weight:600;font-size:var(--f-sm)}
.form input,.form textarea{width:100%}
.notice{background:#F8ECD3;border:1px solid #EBD3A3;border-radius:var(--r);padding:var(--s3);font-size:var(--f-sm)}
.empty{text-align:center;padding:var(--s7) var(--s4);color:var(--sub)}
/* 관리자 */
.status{display:inline-block;padding:2px 10px;border-radius:var(--r-btn);font-size:var(--f-xs);font-weight:700;background:#EFE2C8}
.status[data-s="도정"]{background:#F8ECD3;color:#8A5A0F}
.status[data-s="발송"]{background:#E3ECF6;color:#2C5282}
.status[data-s="완료"]{background:#EEF3E8;color:var(--green)}
.olist{width:100%;border-collapse:collapse;font-size:var(--f-sm);background:var(--card)}
.olist th,.olist td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
/* 바닥 */
.foot{margin-top:var(--s7);padding:var(--s5) 0 var(--s6);border-top:1px solid var(--line);font-size:var(--f-xs);color:var(--sub)}
.foot .sample{display:block;margin-top:var(--s2);padding:var(--s2) var(--s3);background:#EFE2C8;border-radius:8px;color:var(--ink);font-weight:600}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r-btn);font-size:var(--f-sm);opacity:0;transition:opacity .2s;pointer-events:none;z-index:30}
.toast.on{opacity:1}
[hidden]{display:none!important}
.tabbar a{position:relative}
.tabbar .badge{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;line-height:18px;font-size:11px}
.status{white-space:nowrap}
@media(max-width:899px){
  .olist thead{display:none}
  .olist,.olist tbody,.olist tr,.olist td{display:block}
  .olist tr{border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--s3);padding:var(--s2) 0;background:var(--card)}
  .olist td{border:0;padding:4px var(--s3)}
  .olist td:last-child{padding-top:var(--s2)}
  .olist{background:transparent}
}
.sum .freebar{display:block;padding:0}