[hidden]{display:none!important}
/* Layout: 상단 브랜드 + 고정 탭바(홈·레시피·키친가이드·식재료·영양·스토어), 본문은 최대 960px, 상세 화면은 640px 한 줄 칼럼 */
:root{
  --bg:#f6f5ef; --surface:#ffffff; --fg:#26281f; --muted:#6b6e60; --line:#e3e2d6;
  --olive:#667d32; --olive-soft:#eef1e2; --beet:#9b1e45; --beet-soft:#f8e9ee; --banana:#b8860b; --banana-soft:#fbf3dc;
  --display:"Gowun Batang","Nanum Myeongjo",serif;
  --body:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#171812; --surface:#212219; --fg:#ecebe2; --muted:#a6a898; --line:#35362c;
  --olive:#a9bf6e; --olive-soft:#2a2f1d; --beet:#e4789a; --beet-soft:#3a1d27; --banana:#e2c066; --banana-soft:#352d17; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#171812; --surface:#212219; --fg:#ecebe2; --muted:#a6a898; --line:#35362c;
  --olive:#a9bf6e; --olive-soft:#2a2f1d; --beet:#e4789a; --beet-soft:#3a1d27; --banana:#e2c066; --banana-soft:#352d17; color-scheme:dark}

body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.75}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.3;word-break:keep-all}
p{margin:0}
button{font:inherit}

/* header + tabs */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.top .in{max-width:960px;margin:0 auto}
.brand{display:flex;align-items:baseline;gap:10px;padding-block:14px 6px;min-width:0}
.login-wrap{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:48px 0}
.login-title{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:.35em;font-size:1.35rem;margin:0;padding:0 18px;position:relative}
.login-title::before,.login-title::after{content:"";position:absolute;top:50%;width:1px;height:12px;background:var(--fg);transform:translateY(-50%)}
.login-title::before{left:0}.login-title::after{right:6px}
.login-lead{margin:18px 0 6px;font-size:.95rem;line-height:1.7}
.login-lead span{color:var(--beet)}
.login-main{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:min(260px,100%);padding:13px 18px;border-radius:6px;background:var(--olive);color:#fff;text-decoration:none;font-size:.92rem;font-weight:500}
.login-main svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.login-main:hover{filter:brightness(1.07)}
.login-sub{font-size:.85rem;color:var(--fg)}
.login-note{font-size:.78rem;color:var(--muted);line-height:1.7;margin:4px 0 0}
.topbar{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--olive);color:#fff;text-decoration:none;font-size:.82rem;padding:8px 16px;text-align:center}
.topbar .tb-msg{display:none}.topbar .tb-msg.on{display:inline;animation:tbfade .5s}
.tb-home{background:none;border:0;color:#fff;font:inherit;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@keyframes tbfade{from{opacity:0}to{opacity:1}}
.tb-pop{position:relative;z-index:30;max-width:420px;margin:8px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:.9rem;line-height:1.6;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.tb-pop[hidden]{display:none}
.tb-pop p{margin:6px 0}.tb-pop p span{display:inline-block;min-width:48px;font-weight:700;color:var(--olive)}
.tb-pop .tb-note{font-size:.8rem;color:var(--muted)}
.tb-close{margin-top:6px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 14px;font:inherit;cursor:pointer}
.topbar b{font-weight:700}
.tb-ic{width:20px;height:20px;border-radius:4px;background:#fff;color:var(--olive);display:grid;place-items:center;font-size:.7rem;font-weight:700;flex:none}
.brandrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
a.brand{text-decoration:none}
.hicons{display:flex;align-items:center;gap:6px;flex:none}
.hic{display:inline-flex;align-items:center;gap:5px;background:none;border:0;color:var(--fg);text-decoration:none;font:inherit;font-size:.8rem;padding:8px;cursor:pointer;border-radius:8px}
.hic:hover{color:var(--olive)}
.hic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.search-panel{border-top:1px solid var(--line);background:var(--surface)}
.search-panel[hidden]{display:none}
.sp-in{max-width:960px;margin:0 auto;padding-block:14px}
#search-q{width:100%;font:inherit;font-size:1rem;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg)}
#search-q:focus{outline:2px solid var(--olive);outline-offset:1px}
.sp-res{list-style:none;margin:8px 0 0;padding:0;max-height:50vh;overflow-y:auto}
.sp-res a{display:flex;justify-content:space-between;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none}
.sp-res a:hover{color:var(--olive)}
.sp-res small{color:var(--muted);flex:none}
.sp-res .none{padding:10px 4px;color:var(--muted)}
@media (max-width:560px){.brand span{display:none}.hic.login span{display:none}.topbar{font-size:.76rem}}

.brand b{font-family:var(--display);font-size:1.45rem;color:var(--olive)}
.brand span{font-size:.8rem;color:var(--muted)}
.tabs{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:10px 12px;color:var(--muted);text-decoration:none;font-weight:500;border-bottom:2px solid transparent;font-size:.95rem}
.tabs a[aria-current="page"]{color:var(--fg);border-color:var(--olive)}
.tabs a:focus-visible{outline:2px solid var(--olive);outline-offset:-2px}

main{max-width:960px;margin:0 auto;padding-block:20px 56px}
.view{display:flex;flex-direction:column;gap:20px}
.narrow{max-width:640px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:12px}
.vh{display:flex;flex-direction:column;gap:4px}
.vh h2{font-size:1.6rem}
.vh p{color:var(--muted)}
.label{font-size:.78rem;color:var(--olive);font-weight:700;letter-spacing:.08em}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{background:var(--surface);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line)}
a.card:hover{border-color:var(--olive)}
a.card:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.card .pic{aspect-ratio:4/3;display:grid;place-items:center;color:#fff;font-size:.85rem}
.card .txt{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.card h3{font-size:1.1rem}
.card small{color:var(--muted);font-size:.85rem}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.chip{font-size:.75rem;padding:2px 9px;border-radius:999px;background:var(--olive-soft);color:var(--olive);font-weight:500}
.chip.beet{background:var(--beet-soft);color:var(--beet)}
.card.soon{border-style:dashed;background:transparent}
.card.soon .pic{background:var(--olive-soft);color:var(--muted)}
.beetpic{background:radial-gradient(circle at 30% 30%,#c83a64,#7a1534 70%,#4c0c22)}
.bananapic{background:radial-gradient(circle at 30% 30%,#f3d36b,#c9961c 75%)}
.lemonpic{background:radial-gradient(circle at 30% 30%,#f6ea7c,#c7b524 75%)}
.guidepic{background:linear-gradient(135deg,#667d32,#3f4f1c)}

/* home */
.feature{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--surface);border-radius:16px;overflow:hidden;border:1px solid var(--line);text-decoration:none;color:inherit}
.feature .pic{min-height:240px;display:grid;place-items:center;color:#fff}
.feature .txt{padding:24px;display:flex;flex-direction:column;gap:8px;justify-content:center;min-width:0}
.feature h2{font-size:2rem}
.feature:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
@media (max-width:640px){.feature{grid-template-columns:1fr}.feature .pic{min-height:0;aspect-ratio:4/3}}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:480px){.quick{grid-template-columns:1fr}}
.quick a{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:2px}
.quick a b{font-family:var(--display);font-size:1.05rem}
.quick a span{font-size:.82rem;color:var(--muted)}
.quick a:hover{border-color:var(--olive)}

/* detail */
section.panel{background:var(--surface);border-radius:14px;padding:24px 20px;display:flex;flex-direction:column;gap:14px}
section.panel h2{font-size:1.3rem}
.back{align-self:flex-start;background:none;border:0;color:var(--olive);cursor:pointer;padding:4px 0;font-weight:500}
.photo{aspect-ratio:1/1;max-width:100%;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:.9rem}
.photo.sm{aspect-ratio:4/3;background:linear-gradient(135deg,var(--beet-soft),var(--olive-soft));color:var(--muted);border-radius:12px}
.head{text-align:center;align-items:center}
.sub{color:var(--muted);font-family:var(--display);font-size:1.05rem}
.head h1{font-size:2.1rem}
.meta{display:flex;width:100%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:12px}
.meta div{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.meta div+div{border-left:1px solid var(--line)}
.meta span{font-size:.75rem;color:var(--muted)}
.meta b{font-variant-numeric:tabular-nums}
.dots{color:var(--beet);letter-spacing:2px}
.author{display:flex;align-items:center;gap:10px;align-self:stretch;text-align:left}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--olive);color:var(--surface);display:grid;place-items:center;font-family:var(--display);font-weight:700;flex:none}
.author small{display:block;color:var(--muted);font-size:.8rem;line-height:1.3}
.head p.intro{text-align:left}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.stepper button{border:0;background:transparent;color:var(--olive);font-size:1.1rem;width:38px;height:34px;cursor:pointer}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper button:focus-visible{outline:2px solid var(--olive);outline-offset:-2px}
.stepper output{min-width:56px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.small{font-size:.8rem;color:var(--muted)}
ul.ing{list-style:none;margin:0;padding:0}
ul.ing li{display:flex;justify-content:space-between;padding:12px 2px;border-bottom:1px dashed var(--line)}
ul.ing li b{font-variant-numeric:tabular-nums;font-weight:500;color:var(--olive)}
ul.ing a{color:inherit;text-decoration-color:var(--line);text-underline-offset:4px}
.note{background:var(--olive-soft);border-radius:10px;padding:14px 16px;font-size:.95rem}
.note strong{display:block;color:var(--olive)}
.step{display:flex;flex-direction:column;gap:10px}
.step+.step{border-top:1px solid var(--line);padding-top:20px}
.stepno{font-family:var(--display);font-weight:700;color:var(--beet);font-size:.95rem}
.step h3{font-family:var(--body);font-size:1.05rem}
.tip{background:var(--beet-soft);border-radius:10px;padding:12px 14px;font-size:.92rem}
.tip b{color:var(--beet)}
.box{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:.95rem}
.box b{display:block;margin-bottom:2px}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.8rem;color:var(--muted);font-weight:500}
td:first-child{font-weight:500;min-width:9em}
.links{display:flex;gap:8px;flex-wrap:wrap}
.links a,.linkbtn{font-size:.85rem;padding:4px 12px;border-radius:999px;border:1px solid var(--line);color:var(--fg);text-decoration:none;background:var(--surface);cursor:pointer}
.links a:hover,.linkbtn:hover{border-color:var(--olive);color:var(--olive)}

/* guide & nutrition lists */
.list{display:flex;flex-direction:column;gap:12px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px;scroll-margin-top:130px}
.item h3{font-size:1.15rem}
.kind{font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--olive)}
.filter{display:flex;gap:6px;flex-wrap:wrap}
.filter button{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:5px 14px;cursor:pointer;font-size:.88rem}
.filter button[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--surface)}
.filter button:focus-visible{outline:2px solid var(--olive);outline-offset:2px}

.rfilters{display:flex;flex-direction:column;gap:10px}
.frow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.flabel{font-size:.8rem;color:var(--muted);font-weight:500;min-width:4.5em}
.cover{width:100%;height:100%;object-fit:cover;display:block}
.photo-img{width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block}
.img2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}.img2 img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}
#v-nutri-gimbap .step .step-img,#v-sesame-salad .step .step-img,#v-berry-smoothie .step .step-img{aspect-ratio:4/3;object-fit:cover}
.step-img.pair2{aspect-ratio:auto!important;object-fit:contain!important;margin-bottom:8px}
.step-img{width:100%;max-width:100%;border-radius:12px;display:block}
.imgrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.imgrow .step-img{aspect-ratio:1;object-fit:cover}
#v-cabbage-soup .step>.step-img,#v-onion-soup .step>.step-img{max-width:420px;aspect-ratio:1;object-fit:cover;margin-inline:auto}
.ing-nut{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.ing-nut:first-of-type{border-top:0;margin-top:0;padding-top:0}
.ing-nut .nut-img{max-width:260px;aspect-ratio:1;object-fit:cover;margin:8px 0}
.nlist{margin:4px 0 8px;padding-left:1.2em}
.nlist li{margin:4px 0}
.ing-nut ul{margin:6px 0 0;padding-left:1.1em}
.ing-nut li{margin:4px 0}
.ing-nut .more{display:inline-block;margin-top:8px;font-size:.85rem;color:var(--olive)}
.ing-img{width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}
.slide .sart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .sart .tag{z-index:1}
.subh{font-family:var(--body);font-size:1rem;margin:6px 0 0}
.shoplink{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 14px 10px 10px;text-decoration:none;color:inherit;background:var(--olive-soft)}
.shoplink img{width:52px;height:52px;object-fit:cover;border-radius:8px;flex:none}
.shoplink span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.shoplink small{color:var(--olive);font-size:.75rem;font-weight:700}
.shoplink:hover{border-color:var(--olive)}
.shoplink:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
ul.plain{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px}
td.num{font-variant-numeric:tabular-nums}
.column{display:grid;grid-template-columns:1fr 1.2fr;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit}
.column img{width:100%;height:100%;object-fit:cover;display:block;min-height:220px}
.column .ctxt{padding:24px 28px;display:flex;flex-direction:column;gap:8px;justify-content:center;min-width:0}
.column h2{font-size:1.6rem}
.column p{color:var(--muted)}
.column .more{color:var(--olive);font-weight:700}
.column:hover{border-color:var(--olive)}
.column:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
@media (max-width:640px){.column{grid-template-columns:1fr}.column img{aspect-ratio:16/10;min-height:0}.column .ctxt{padding:18px 20px}.column h2{font-size:1.3rem}}
.toc{display:flex;flex-direction:column;gap:2px;align-self:stretch;text-align:left;background:var(--olive-soft);border-radius:12px;padding:12px 16px}
.toc a{color:var(--fg);text-decoration:none;padding:4px 0;font-size:.95rem}
.toc a:hover{color:var(--olive)}
.share{display:flex;gap:10px;align-items:center;flex-wrap:wrap;align-self:stretch}
.panel[id^="gr-"]{scroll-margin-top:130px}
table.wide{min-width:520px}
td.hi{background:var(--olive-soft);color:var(--olive);font-weight:700}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pair div{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.pair b{font-family:var(--display);font-size:1.05rem}
.pair span{font-size:.92rem;color:var(--muted)}
@media (max-width:480px){.pair{grid-template-columns:1fr}}
.recipe-hl{border:2px solid var(--olive)}
ol.steps-ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:8px}
ol.steps-ol b{display:block}
.quote{margin:0;border-left:3px solid var(--olive);padding:8px 16px;background:var(--olive-soft);border-radius:0 10px 10px 0}
.quote b{display:block;color:var(--olive);margin-bottom:4px}
.hsec{display:flex;flex-direction:column;gap:14px;padding-block:22px 6px}
.hsec.tint{background:var(--olive-soft);border-radius:18px;padding:24px 18px 20px}
.hhead{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;text-align:center;gap:4px 8px}
.hhead .en{grid-column:2;font-family:var(--display);letter-spacing:.14em;color:var(--olive);font-size:.8rem}
.hhead h2{grid-column:1/-1;grid-row:2;font-size:1.45rem}
.hmore{grid-column:3;grid-row:2;justify-self:end;align-self:end;color:var(--muted);text-decoration:none;font-size:.85rem;white-space:nowrap}
.hmore:hover{color:var(--olive)}
@media (max-width:520px){.hhead{grid-template-columns:1fr auto;text-align:left}.hhead .en{grid-column:1;justify-self:start}.hhead h2{grid-column:1;font-size:1.2rem}.hmore{grid-column:2}}
.row{position:relative}
.rtrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.rtrack::-webkit-scrollbar{display:none}
@media (max-width:800px){.rtrack{grid-auto-columns:calc((100% - 14px)/2);gap:14px}}
@media (max-width:560px){.rtrack{grid-auto-columns:46%;gap:12px}}
.mini{scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;min-width:0}
.mini .mpic{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--olive-soft)}
.mini .mpic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.mini:hover .mpic img{transform:scale(1.04)}
.mini .mbadge{position:absolute;left:8px;bottom:8px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:.7rem;font-weight:700;line-height:1.2;background:var(--beet);color:#fff;padding:4px}
.mini .mpic.ph{display:grid;place-items:center;text-align:center;background:linear-gradient(150deg,var(--olive),#3f4f1c);color:#fff;font-family:var(--display);font-size:1rem;padding:12px}
.mini .mbadge.dark{background:var(--fg);color:var(--surface)}
.mini b{font-size:.95rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini small{color:var(--muted);font-size:.8rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini .mprice{font-weight:700;font-variant-numeric:tabular-nums}
.mini .mprice span{color:var(--muted);font-weight:400;font-size:.8rem;margin-left:6px}
.mini:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:12px}
.rbtn{position:absolute;top:calc(50% - 40px);width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;font-size:1.2rem;line-height:1;display:grid;place-items:center}
.rbtn.prev{left:-12px}.rbtn.next{right:-12px}
.rbtn:disabled{opacity:0;pointer-events:none}
.rbtn:focus-visible{outline:2px solid var(--olive)}
@media (max-width:560px){.rbtn{display:none}}
.ctabs{display:flex;justify-content:center;gap:6px 18px;flex-wrap:wrap}
.ctabs button{background:none;border:0;border-bottom:2px solid transparent;padding:4px 2px;color:var(--muted);cursor:pointer;font-size:.95rem}
.ctabs button[aria-selected="true"]{color:var(--fg);border-color:var(--olive);font-weight:700}
.ctabs button:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:800px){.hgrid{grid-template-columns:repeat(2,1fr)}}
.hgrid .empty-c{grid-column:1/-1;text-align:center;color:var(--muted);padding:28px 0}
.allbtn{align-self:center;border:1px solid var(--line);border-radius:6px;padding:10px 40px;color:var(--fg);text-decoration:none;font-size:.9rem;background:var(--surface)}
.allbtn:hover{border-color:var(--olive);color:var(--olive)}
.scard{transition:border-color .2s}
.scard .pic{position:relative}
.scard .pic img{transition:transform .3s}
.scard:hover .pic img{transform:scale(1.03)}
.rbadge{position:absolute;left:10px;bottom:10px;width:58px;height:58px;border-radius:50%;background:var(--surface);color:var(--olive);border:3px solid var(--olive);display:grid;place-items:center;text-align:center;font-weight:700;font-size:.8rem;line-height:1.15;font-family:var(--display)}
.rbadge.big{width:84px;height:84px;font-size:1.05rem;left:16px;bottom:16px}
.tags{display:flex;gap:4px;flex-wrap:wrap}
.tg{font-size:.72rem;padding:1px 6px;border-radius:3px;background:var(--olive);color:var(--surface)}
.pd{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media (max-width:760px){.pd{grid-template-columns:1fr;gap:18px}}
.pd-gal{position:relative;border-radius:14px;overflow:hidden;background:var(--surface)}
.pd-gal img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.pd-info{display:flex;flex-direction:column;gap:14px;min-width:0}
.pd-sub{color:var(--muted);font-size:.92rem}
.pd-title{font-family:var(--display);font-size:1.5rem;line-height:1.4}
.pd-price{font-size:1.05rem;display:flex;align-items:baseline;gap:6px}
.pd-price b{font-size:1.7rem;font-variant-numeric:tabular-nums}
.soldtag{font-size:.75rem;background:var(--fg);color:var(--surface);padding:2px 8px;border-radius:3px;align-self:center}
.pd-dl{margin:0;border-top:1px solid var(--line)}
.pd-dl div{display:grid;grid-template-columns:5.5em 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.pd-dl dt{color:var(--muted)}
.pd-dl dd{margin:0}
.pd-qty{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--olive-soft);border-radius:10px;padding:12px 14px}
.pd-total{margin-left:auto;font-size:1.25rem;color:var(--beet);font-variant-numeric:tabular-nums}
.pd-total .small{color:var(--muted);font-weight:400}
.buy.big{padding:15px;font-size:1.05rem;margin-top:0}
.pd-tabs{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);z-index:3;display:flex;gap:22px;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 0;margin-top:12px;overflow-x:auto}
.pd-tabs a{color:var(--muted);text-decoration:none;font-weight:500;white-space:nowrap}
.pd-tabs a:first-child{color:var(--fg);font-weight:700}
.pd-tabs a:hover{color:var(--olive)}
.pd-sec{scroll-margin-top:160px}
.pd-recipes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){.pd-recipes{grid-template-columns:repeat(2,1fr)}}
.gomall{color:var(--olive);font-weight:700;font-size:.88rem;margin-top:4px}
.curpic{position:relative;background:radial-gradient(circle at 35% 30%,#f2c14e,#c98a12 70%,#9a6208);color:#fff;display:grid;place-items:center}
.mini .mpic.ph.cur{background:radial-gradient(circle at 35% 30%,#f2c14e,#c98a12 70%,#9a6208)}
.qpic{position:relative;background:radial-gradient(circle at 35% 30%,#b8475e,#7c2236 70%,#561524);color:#fff;display:grid;place-items:center}
.lpic{position:relative;background:radial-gradient(circle at 35% 30%,#a8875c,#6f5233 70%,#4b3620);color:#fff;display:grid;place-items:center}
/* 진열 상품: 우리의식탁처럼 한 줄 3개, 정사각형 사진, 테두리 없는 카드 */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px}
@media (max-width:800px){.sgrid{grid-template-columns:repeat(2,1fr);gap:22px 14px}}
.sgrid .scard{background:none;border:0;border-radius:0;overflow:visible}
.sgrid .scard .pic{border-radius:4px;overflow:hidden}
.sgrid .scard .txt{padding:12px 2px 0;gap:4px}
.sgrid .scard .txt > small:first-child{display:none}
.sgrid .scard h3{font-family:var(--body);font-size:1rem;font-weight:500;line-height:1.45;min-height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sgrid .scard h3 + small{display:none}
.sgrid .scard .price{font-size:1.2rem}
.sgrid .scard .gomall{font-size:.8rem}
.sgrid .scard:hover h3{color:var(--olive)}
.sgrid .scard:focus-visible{outline:2px solid var(--olive);outline-offset:4px}
.mini .mpic{border-radius:4px}
.mini b{font-weight:500;font-size:1rem;min-height:2.8em}
.chpic{position:relative;background:linear-gradient(150deg,#8a948f,#4d5652);color:#fff;display:grid;place-items:center}
/* 스토어 메뉴에 마우스를 올리면 펼쳐지는 진열 상품 패널 */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 12px 24px -16px rgba(0,0,0,.25)}
.mega-in{max-width:960px;margin:0 auto;display:flex;gap:56px;padding-block:22px 28px;flex-wrap:wrap}
.mega-quick{display:flex;flex-direction:column;gap:14px;min-width:110px}
.mega-quick a{color:var(--olive);font-weight:700;text-decoration:none;font-size:1rem}
.mega-col{display:flex;flex-direction:column;gap:12px;min-width:120px}
.mega-col h4{margin:0 0 4px;font-size:1rem;color:var(--olive)}
.mega-col a{color:var(--fg);text-decoration:none;font-size:.92rem;display:flex;gap:6px;align-items:baseline}
.mega-col a small{color:var(--muted);font-size:.75rem}
.mega a:hover{color:var(--olive);text-decoration:underline;text-underline-offset:3px}
.mega a:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
@media (hover:none),(max-width:700px){.mega{display:none!important}}
.store-head{padding-block:18px 2px}
.dx-hero{display:grid;grid-template-columns:1fr 1.1fr;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.dx-hero img{width:100%;height:100%;object-fit:cover;display:block}
.dx-txt{padding:28px;display:flex;flex-direction:column;gap:10px;justify-content:center;min-width:0}
.dx-txt h2{font-size:2rem}
.dx-txt p{color:var(--muted)}
@media (max-width:700px){.dx-hero{grid-template-columns:1fr}.dx-txt{padding:20px}}
.dx-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px 18px}
@media (max-width:800px){.dx-list{grid-template-columns:repeat(2,1fr)}}
.dx-list a,.dx-list .soon > div{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;position:relative}
.dx-list img,.dx-list .ph{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;display:block}
.dx-list .ph{display:grid;place-items:center;background:var(--olive-soft);color:var(--muted);border:1px dashed var(--line)}
.dx-list .no{position:absolute;top:8px;left:8px;width:34px;height:34px;border-radius:50%;background:var(--beet);color:#fff;display:grid;place-items:center;font-weight:700}
.dx-list .soon .no{background:var(--muted)}
.dx-list b{font-weight:500;font-size:1rem}
.dx-list small{color:var(--muted);font-size:.82rem;line-height:1.4}
.dx-list a:hover b{color:var(--olive)}
.dx-list a:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.shoprow{display:flex;flex-direction:column;gap:8px}
.zc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:560px){.zc-steps{grid-template-columns:1fr}}
.zc-steps li{display:flex;flex-direction:column;gap:4px;min-width:0}
.zc-steps img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.zc-steps span{color:var(--muted);font-size:.92rem}
.gk-head{text-align:center;padding-block:28px 6px;display:flex;flex-direction:column;gap:8px;align-items:center}
.gk-title{font-family:var(--display);font-size:1.6rem;letter-spacing:.28em;padding:0 18px;border-left:2px solid var(--fg);border-right:2px solid var(--fg);line-height:1}
.gk-head p{color:var(--muted)}
.gk-filter{justify-content:center}
.gk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 16px}
@media (max-width:800px){.gk-grid{grid-template-columns:repeat(2,1fr)}}
.gcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;text-decoration:none;color:inherit;min-width:0}
.gcard img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;margin-bottom:6px}
.gcard .kind{font-size:.8rem;color:var(--muted);font-weight:400;letter-spacing:0}
.gcard h3{font-family:var(--body);font-size:1rem;font-weight:700}
.gcard:hover h3{color:var(--olive)}
.gcard:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.gk-empty{text-align:center;color:var(--muted);padding:30px 0}
.gk-video{width:100%;max-width:100%;aspect-ratio:16/9;border-radius:14px;background:#000;display:block;object-fit:cover}
.photo-ph,.gph{display:grid;place-items:center;background:linear-gradient(150deg,var(--olive-soft),var(--beet-soft));color:var(--olive);font-family:var(--display);font-weight:700}
.photo-ph{width:100%;aspect-ratio:4/3;border-radius:14px;font-size:2rem}
.gph{width:100%;aspect-ratio:1/1;font-size:1.3rem;margin-bottom:6px}
.guide-link{display:inline-block;margin-top:6px;font-size:.9rem;color:var(--olive);font-weight:600;text-decoration:none}
.guide-link:hover{text-decoration:underline}
/* 역노화 이야기 */
.ag-hero{--ag-g:#5b6e2c;--ag-c:#f8f4ea;--ag-y:#e9dcb8;--ag-r:#667d32}
.ag-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:8px}
.ag-card{display:block;text-decoration:none;color:inherit;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.ag-card .ag-cover{aspect-ratio:1;background:#5b6e2c;color:#f8f4ea;padding:26px 24px;display:flex;flex-direction:column;justify-content:center}
.ag-card .ag-cover i{display:block;width:34px;height:3px;background:#e9dcb8;margin-bottom:16px}
.ag-card .ag-cover b{font-family:var(--display);font-size:1.9rem;line-height:1.2;word-break:keep-all}
.ag-card .ag-cover b span{color:#e9dcb8}
.ag-card .ag-cover small{margin-top:12px;font-size:.88rem;opacity:.85;line-height:1.5}
.ag-card .ag-meta{padding:12px 16px 16px}
.ag-card .ag-meta em{font-style:normal;font-size:.8rem;color:var(--olive);font-weight:700}
.ag-card .ag-meta h3{margin:4px 0 0;font-size:1.05rem}
.ag-card.soon .ag-cover{background:#ede4d0;color:#5b6e2c}
.ag-card.soon{pointer-events:none}
.ag-slides{display:grid;gap:14px;margin:14px 0}
.ag-slide{border-radius:16px;padding:34px 28px;line-height:1.5}
.ag-slide.dk{background:#5b6e2c;color:#f8f4ea}
.ag-slide.lt{background:#f8f4ea;color:#5b6e2c}
.ag-slide .kick{font-size:.92rem;font-weight:700;color:#667d32;margin:0 0 8px}
.ag-slide.dk .kick{color:#e9dcb8}
.ag-slide h2{font-family:var(--display);font-size:clamp(1.7rem,6vw,2.4rem);line-height:1.22;margin:0 0 14px;color:inherit}
.ag-slide h2 span{color:#e9dcb8}
.ag-slide .yr{font-family:var(--display);font-size:clamp(3rem,13vw,4.6rem);font-weight:700;color:#667d32;line-height:1;margin:0 0 10px}
.ag-slide p{margin:8px 0}
.ag-slide .bar{border-left:4px solid #667d32;padding-left:14px;margin:14px 0}
.ag-slide .bar small{display:block;color:#6b6e60;font-size:.9rem}
.ag-slide .bar b{font-family:var(--display);font-size:1.3rem}
.ag-slide mark{background:#e6dcc3;color:inherit;padding:0 3px}
.ag-slide .box{background:#5b6e2c;color:#f8f4ea;border-radius:6px;padding:14px 16px;margin-top:12px}
.ag-slide .box strong{color:#e9dcb8}
.ag-slide .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ag-slide .facts div{background:#5b6e2c;color:#f8f4ea;padding:10px 12px;border-radius:4px;font-size:.8rem}
.ag-slide .facts b{display:block;color:#e9dcb8;font-family:var(--display);font-size:1rem;margin-top:4px}
.ag-slide .phase{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 4px;text-align:center;font-size:.85rem}
.ag-slide .phase div{border:1px solid rgba(243,239,227,.35);padding:10px 4px;border-radius:2px}
.ag-slide .phase div.on{background:#e9dcb8;color:#5b6e2c;border-color:#e9dcb8;font-weight:700}
.ag-slide .here{color:#e9dcb8;font-size:.85rem;font-weight:700}
.ag-slide .src{font-size:.75rem;color:#6b6e60;margin-top:14px;border-top:1px solid #ddd5c0;padding-top:8px}
.next-ep{background:var(--olive-soft);border-radius:14px;padding:18px 20px;margin-top:6px}
.next-ep b{color:var(--olive)}
@media (max-width:520px){.ag-slide{padding:26px 20px}.ag-slide .facts{grid-template-columns:1fr}}
.ag-card.soon .ag-cover i{background:#667d32}
.ag-slide.lt:nth-of-type(odd){background:#efe7d4}
.ag-steps{list-style:none;counter-reset:st;padding:0;margin:12px 0;display:grid;gap:8px}
.ag-steps li{counter-increment:st;background:#5b6e2c;color:#f8f4ea;padding:14px 16px 14px 56px;position:relative;border-radius:4px}
.ag-steps li::before{content:counter(st);position:absolute;left:18px;top:10px;font-family:var(--display);font-size:1.8rem;font-weight:700;color:#e9dcb8}
.ag-steps b{display:block;font-family:var(--display);font-size:1.1rem}
.ag-steps small{opacity:.85}
.ag-dots{padding-left:1.1em;margin:10px 0}
.ag-dots b{color:#e9dcb8}
.ep-nav{display:flex;justify-content:space-between;gap:12px;margin:18px 0 8px;flex-wrap:wrap}
.ep-nav a{color:var(--olive);font-weight:600;text-decoration:none}
.ep-nav a:hover{text-decoration:underline}
.ag-dots-lt b{color:#667d32}
.ag-five{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:14px 0}
.ag-five div{border:1px solid rgba(248,244,234,.4);padding:14px 4px;text-align:center;font-family:var(--display);font-weight:700;color:#e9dcb8;font-size:1.05rem;line-height:1.3}
@media (max-width:520px){.ag-five div{font-size:.85rem;padding:12px 2px;word-break:keep-all}}
.ag-week{display:grid;gap:8px;margin:10px 0 14px}
.ag-week div{background:rgba(248,244,234,.12);padding:12px 16px;border-radius:4px}
.ag-week small{display:block;opacity:.85}
.ag-week b{font-family:var(--display);font-size:1.2rem;color:#e9dcb8}
.ag-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.ag-two>div{background:#5b6e2c;color:#f8f4ea;padding:14px 16px;border-radius:4px}
.ag-two b{font-family:var(--display);font-size:1.2rem;color:#e9dcb8}
.ag-two ul{margin:6px 0 0;padding-left:1em;font-size:.9rem}
.ag-tag li{padding-left:84px}
.ag-tag li::before{content:attr(data-t);font-size:1.5rem;top:12px}
.ag-six{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}
.ag-six div{background:#5b6e2c;color:#e9dcb8;text-align:center;padding:16px 4px;font-family:var(--display);font-weight:700;line-height:1.35;border-radius:4px;word-break:keep-all}
@media (max-width:520px){.ag-two{grid-template-columns:1fr}.ag-six div{font-size:.85rem}}
.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:28px 24px;margin-top:20px}
.qr-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--fg);text-align:center}
.qr-card:hover{border-color:var(--olive)}
.qr-box{width:140px;height:140px;background:#fff;padding:8px;border-radius:8px;margin-bottom:8px;display:grid;place-items:center}
.qr-box img{width:100%;height:100%;image-rendering:pixelated}
.qr-wait{color:#8a8c7c;font-size:.85rem;border:1px dashed var(--line);background:var(--bg)}
.qr-card b{font-size:1rem}
.qr-card small{color:var(--muted);font-size:.82rem}
.price.ask{color:var(--olive);font-size:1rem}
.rm-ask{margin-top:14px;background:var(--olive-soft);border-radius:14px;padding:16px 18px}
.rm-ask b{color:var(--olive)}
.rm-ask p{margin:4px 0 12px;color:var(--muted);font-size:.9rem}
.rm-btns{display:grid;gap:8px}
.rm-chat,.rm-tel{display:flex;align-items:center;justify-content:center;padding:11px 12px;border-radius:10px;font:inherit;font-weight:700;font-size:.9rem;text-decoration:none;cursor:pointer}
.rm-chat{background:var(--olive);color:#fff;border:0}
.rm-tel{background:var(--surface);color:var(--fg);border:1px solid var(--line)}
@media (min-width:640px){.rm-btns{grid-template-columns:repeat(3,1fr)}}
.ag-six-dk div{background:transparent;border:1px solid rgba(248,244,234,.35)}
.ag-two-dk>div{background:transparent;border:1px solid rgba(248,244,234,.35);text-align:center}
.ag-two-dk small{display:block;opacity:.85;margin-bottom:6px}
.col-note{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin:4px 0 14px;font-size:.96rem;word-break:keep-all}
.col-note b{color:var(--olive)}
.col-lv{border-left:4px solid var(--olive);padding:4px 0 4px 14px;margin:22px 0 4px;font-weight:700;word-break:keep-all}
.col-lv small{display:block;font-weight:400;color:var(--muted);font-size:.82rem}
.col-cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 14px}
.col-cmp>div{background:var(--bg);border-radius:10px;padding:12px 14px}
.col-cmp b{color:var(--olive);font-family:var(--display);font-size:1.05rem}
.col-cmp ul{margin:6px 0 0;padding-left:1.1em;font-size:.92rem;line-height:1.6}
.col-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.col-chips span{background:var(--olive-soft);color:var(--olive);font-weight:700;font-size:.9rem;padding:6px 12px;border-radius:999px}
.col-steps3{grid-template-columns:repeat(3,1fr)}
.col-steps3 b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--olive)}
.col-list li b{min-width:auto;margin-right:6px}
@media (max-width:520px){.col-cmp{grid-template-columns:1fr}}
/* 역노화 칼럼 */
.col-time{display:grid;gap:10px;margin:6px 0 16px}
.col-time>div{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:10px}
.col-time b{font-family:var(--display);font-size:1.25rem;color:var(--olive);line-height:1.5}
.col-time p{margin:0}
.col-time small{display:block;color:var(--muted);font-size:.88rem;margin-top:2px}
.col-art{background:var(--surface);border-radius:14px;padding:30px 22px 26px;line-height:1.85;font-size:1.04rem;color:var(--fg)}
.col-hd{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px}
.col-ep{display:inline-block;font-size:.82rem;font-weight:700;color:var(--olive);letter-spacing:.02em}
.col-hd h1{font-family:var(--display);font-size:clamp(1.7rem,6vw,2.2rem);line-height:1.3;margin:6px 0 14px;word-break:keep-all}
.col-key{background:var(--olive-soft);border-left:4px solid var(--olive);border-radius:0 10px 10px 0;padding:14px 16px;margin:0 0 20px;font-weight:600;word-break:keep-all}
.col-key b{display:block;font-size:.8rem;color:var(--olive);margin-bottom:2px}
.col-lead{color:var(--muted);margin:0 0 8px}
.col-art h2{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-size:1.3rem;line-height:1.4;margin:32px 0 10px;word-break:keep-all}
.col-art h2 span{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--olive);color:#fff;font-family:inherit;font-size:.9rem}
.col-art p{margin:0 0 12px;word-break:keep-all}
.col-art strong{color:var(--olive);font-weight:700}
.col-tbl{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:.92rem;line-height:1.6}
.col-tbl th{background:var(--olive);color:#fff;font-weight:600;text-align:left;padding:9px 10px}
.col-tbl td{border-bottom:1px solid var(--line);padding:10px;vertical-align:top;word-break:keep-all}
.col-tbl td:first-child{font-family:var(--display);font-weight:700;color:var(--olive);white-space:nowrap}
.col-list{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px}
.col-list li{background:var(--bg);border-radius:8px;padding:9px 12px}
.col-list b{display:inline-block;min-width:44px;color:var(--olive)}
.col-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 14px;font-size:.82rem;text-align:center;line-height:1.35}
.col-steps span{border:1px solid var(--line);border-radius:8px;padding:9px 4px;color:var(--muted);word-break:keep-all}
.col-steps span.on{background:var(--olive);border-color:var(--olive);color:#fff;font-weight:700}
.col-ft{border-top:1px solid var(--line);margin-top:28px;padding-top:14px;font-size:.8rem;color:var(--muted);line-height:1.6}
.col-ft p{margin:0 0 6px}
@media (max-width:520px){.col-art{padding:24px 18px;font-size:1rem}.col-tbl{font-size:.85rem}.col-tbl td,.col-tbl th{padding:8px 6px}}
/* carousel */
.carousel{position:relative;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:1fr 1fr;text-decoration:none;color:inherit;min-height:300px}
.slide .stxt{padding:32px 40px 48px 64px;display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0}
.slide .kick{color:var(--muted);font-size:.95rem}
.slide h2{font-size:1.9rem}
.slide .when{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.slide .sart{display:grid;place-items:center;color:#fff;font-size:.9rem;position:relative}
.slide .tag{position:absolute;top:16px;right:16px;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:.8rem;font-weight:700;line-height:1.25;background:var(--fg);color:var(--surface)}
.slide:focus-visible{outline:2px solid var(--olive);outline-offset:-4px}
.cbtn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:var(--surface);color:var(--fg);font-size:1.4rem;cursor:pointer;opacity:.85;display:grid;place-items:center;line-height:1}
.cbtn:hover{opacity:1}
.cbtn:focus-visible{outline:2px solid var(--olive)}
.cbtn.prev{left:12px}.cbtn.next{right:12px}
.cdots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;align-items:center}
.cdots button{width:28px;height:4px;border:0;border-radius:2px;background:var(--line);cursor:pointer;padding:0;overflow:hidden;position:relative}
.cdots button[aria-current="true"]::after{content:"";position:absolute;inset:0;background:var(--olive);transform-origin:left;animation:fill var(--dur,5s) linear forwards}
.carousel.paused .cdots button[aria-current="true"]::after{animation-play-state:paused}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:640px){
  .slide{grid-template-columns:1fr;min-height:0}
  .slide .sart{aspect-ratio:16/10;order:-1}
  .slide .stxt{padding:18px 20px 40px}
  .slide h2{font-size:1.4rem}
  .cbtn{top:30%;width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){.track{transition:none}.cdots button[aria-current="true"]::after{animation:none;transform:none}}

/* store */
.ricepic{background:radial-gradient(circle at 30% 30%,#f1dc94,#c9a24a 75%);position:relative}
.card .pic.sq{aspect-ratio:1/1}
.progpic{position:relative;background:linear-gradient(150deg,var(--olive),#3f4f1c);color:#fff}
.progtxt{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.9rem;letter-spacing:.04em}
.progtxt b{font-family:var(--display);font-size:3rem;line-height:1}
.badge{position:absolute;top:10px;left:10px;background:var(--fg);color:var(--surface);font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:999px}
.prod .txt{gap:6px}
.price{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}
.price span{font-size:.95rem;font-weight:500;margin-left:2px}
.spec{list-style:none;margin:0;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.88rem;display:flex;flex-direction:column;gap:4px}
.spec li{display:flex;gap:10px}
.spec span{color:var(--muted);min-width:2.6em;flex:none}
.buy{margin-top:6px;text-align:center;background:var(--olive);color:var(--surface);text-decoration:none;font-weight:700;padding:11px;border-radius:10px}
.buy:hover{filter:brightness(1.08)}
.buy:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.fine{font-size:.78rem!important}
.dx-banner{display:flex;flex-direction:column;gap:2px;background:var(--olive-soft);border-left:4px solid var(--olive);border-radius:0 12px 12px 0;padding:14px 18px;margin:0 0 18px;color:var(--fg);text-decoration:none}.dx-banner[hidden]{display:none}.dx-banner b{font-family:var(--display);font-size:1.1rem;color:var(--olive)}.dx-banner small{color:var(--muted)}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:16px;padding:40px 20px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.empty h3{font-size:1.3rem}
.empty p{color:var(--muted);max-width:30em}

.site-foot{background:var(--surface);border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.ft-in{max-width:960px;margin:0 auto}
.ft-top{padding-block:28px 22px}
.ft-top .ft-in{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.ft-h{font-family:var(--display);font-size:1.15rem;color:var(--fg);margin:0 0 14px}
.ft-btns{display:flex;gap:10px;flex-wrap:wrap}
.ft-btn{display:inline-flex;align-items:center;gap:8px;min-width:150px;justify-content:center;padding:11px 16px;border:1px solid var(--olive);border-radius:4px;color:var(--fg);text-decoration:none;font-size:.88rem}
.ft-btn:hover{background:var(--olive-soft)}
.ft-btn svg,.ft-sns svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ft-hours{margin-top:16px;font-size:.8rem;line-height:1.7}
.ft-hours b{display:block;color:var(--fg);font-size:.88rem;margin-bottom:4px}
.ft-hours p{margin:0}
.ft-bar span{font-size:.84rem;color:var(--fg)}
.ft-bar a.plain{text-decoration:none}
.ft-sns{display:flex;gap:14px;padding-top:4px}
.ft-sns a{color:var(--fg);display:inline-flex}
.ft-sns svg{width:24px;height:24px}
.ft-sns a:hover{color:var(--olive)}
.ft-bar{background:var(--bg);border-block:1px solid var(--line);padding-block:11px}
.ft-bar .ft-in{display:flex;gap:6px 22px;flex-wrap:wrap}
.ft-bar a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;font-size:.84rem}
.ft-bar a:hover{color:var(--olive)}
.ft-info{padding-block:20px 34px}
.ft-info .ft-in{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.ft-biz b{color:var(--fg);font-size:.88rem}
.ft-biz p{margin:6px 0 0;font-size:.78rem;line-height:1.7;display:flex;flex-wrap:wrap;gap:0 18px}
.ft-biz a.ft-u{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ft-brand{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.flogo{font-family:var(--display);color:var(--olive);font-size:1.15rem}
.ft-brand small{font-size:.75rem}

button.ft-btn{background:transparent;font:inherit;cursor:pointer}
.chat{position:fixed;right:20px;bottom:88px;z-index:30;width:340px;max-width:calc(100vw - 32px);height:min(520px,calc(100vh - 120px));background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;overflow:hidden}
.chat[hidden]{display:none}
.chat-head{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.chat-av{width:28px;height:28px;border-radius:50%;background:var(--olive);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:700}
.chat-head b{font-size:.95rem}
.kakao-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 14px 0;padding:11px 12px;border-radius:10px;background:#fee500;color:#191600;font-weight:700;font-size:.9rem;text-decoration:none}
.kakao-btn svg{width:18px;height:18px;fill:#191600}
.kakao-btn:hover{filter:brightness(.96)}
.chat-notice{margin:0 14px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:.8rem;color:var(--muted)}
.chat-body{flex:1;overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:12px}
.cmsg p{margin:0;font-size:.9rem;line-height:1.6}
.cmsg.bot{max-width:92%}
.cmsg.me{align-self:flex-end;background:var(--olive);color:#fff;padding:8px 13px;border-radius:16px 16px 4px 16px;font-size:.88rem}
.cmeta{display:block;margin-top:6px;font-size:.72rem;color:var(--muted)}
.clinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.clinks a{font-size:.82rem;color:var(--olive);text-decoration:none;border:1px solid var(--olive);border-radius:999px;padding:5px 11px}
.cchoices{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.cchoices button{font:inherit;font-size:.84rem;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer}
.cchoices button:hover{border-color:var(--olive);color:var(--olive)}
.cchoices button.home{color:var(--muted)}
.chat-fab{position:fixed;right:20px;bottom:20px;z-index:31;width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:var(--olive);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.chat-fab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-fab .i-close{display:none}
.chat-fab.on{background:var(--surface);color:var(--fg)}
.chat-fab.on .i-open{display:none}.chat-fab.on .i-close{display:block}
@media (max-width:480px){.chat{right:16px;bottom:84px}.chat-fab{right:16px;bottom:16px}}
@media (max-width:640px){.ft-brand{align-items:flex-start;text-align:left}.ft-btn{min-width:0;flex:1}}

body.static .rfilters,body.static .gk-filter,body.static .filter,body.static .tb-home{display:none}
