/* ============================================================
   kkebi UI — 공통 토큰 + 컴포넌트
   출처: design/kebbi-final.html (참고 시안) — DOM/클래스 구조 복제 기준
   규율: 앰버(--gold) 원 컬러. --fun은 스트릭/룰렛 등 재미 순간 전용.
         그린 사용 금지. --red는 유통기한 임박·오류 전용.
   ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.7.0/dist/tabler-icons.min.css");

:root{
  color-scheme:only light;
  --gold:#EFB73C; --gold-2:#D69E10; --gold-soft:#FBEFD0; --gold-ink:#755400;
  --fun:#F7C948; --fun-2:#E8B412;
  --ink:#201A12; --ink-2:#655D50; --ink-3:#A29A8C;
  --bg:#FAFAF8; --surface:#FFFFFF; --line:#EEECE7;
  --red:#E5484D;
  --sh:0 1px 2px rgba(40,30,10,.04),0 10px 26px -16px rgba(40,30,10,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;color-scheme:only light;background:var(--bg)!important}
body{font-family:'Pretendard',sans-serif;background:var(--bg)!important;color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
button,input{font:inherit}
button{border:0;cursor:pointer;background:none;color:inherit}

/* ---- 앱 셸 (시안 phone 프레임의 풀스크린 버전) ---- */
.stage{width:min(100vw,430px);height:100vh;max-height:932px;margin:0 auto;background:var(--bg)!important;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.18)}
.phone{height:100%;display:grid;grid-template-rows:1fr auto;background:var(--bg)!important;position:relative}
.scr{overflow-y:auto;padding:16px 15px 24px}
@media (max-width:430px){.stage{width:100vw;max-height:none;box-shadow:none}}

/* ---- 상단 ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tb-t{font-size:16px;font-weight:800}
.icbtn{width:34px;height:34px;border-radius:12px;background:var(--surface);border:1.5px solid var(--line);display:grid;place-items:center;color:var(--ink);font-size:16px}
.hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.hd .hi{font-size:11.5px;color:var(--ink-2);font-weight:600}
.hd h1{font-size:21px;font-weight:800;letter-spacing:-.03em;margin-top:2px}

/* ---- 스트릭 칩 (fun 허용: 재미 순간) ---- */
.streak{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--fun),var(--gold));border:none;color:#4A3600;border-radius:15px;padding:7px 12px}
.streak .n{font-size:13px;font-weight:800;line-height:1}
.streak .l{font-size:8px;font-weight:700;opacity:.85}

/* ---- 검색 ---- */
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:11px 13px;margin-bottom:12px}
.search i{color:var(--ink-3);font-size:16px}
.search span{font-size:12.5px;color:var(--ink-3)}
.search input{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:12.5px;font-weight:600}
.search input::placeholder{color:var(--ink-3);font-weight:500}

/* ---- 카테고리 칩 (가로 스크롤) ---- */
.cats{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:10px 0;width:60px}
.cat i{font-size:17px;color:var(--ink-2)}
.cat .t{font-size:10px;font-weight:700;color:var(--ink-2)}
.cat.on{background:var(--gold);border-color:var(--gold)}
.cat.on i,.cat.on .t{color:var(--ink)}

/* ---- 히어로 카드 ---- */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh);margin-bottom:12px}
.hero .ph{height:190px;position:relative;overflow:hidden}
.hero .ph img{width:100%;height:100%;object-fit:cover;object-position:center 47%;display:block}
.hero .ph .badge{position:absolute;left:11px;top:11px;background:rgba(248,188,45,.94);color:var(--ink);font-size:9.5px;font-weight:800;border-radius:8px;padding:4px 9px;box-shadow:0 4px 12px -8px rgba(22,18,10,.55)}
.hero .body{padding:11px 14px 13px}
.meta{display:flex;gap:5px;margin-bottom:5px}
.m{font-size:9.5px;font-weight:600;color:var(--ink-3)}
.m::after{content:"\00b7";margin-left:5px}
.m:last-child::after{content:""}
.hero h2{font-size:17px;font-weight:800;line-height:1.23;margin-bottom:8px}
.title-line{display:block}
.foot{display:flex;align-items:center;justify-content:space-between}
.save .a{font-size:15.5px;font-weight:800}
.save .a em{font-style:normal;color:var(--gold-ink)}
.save .s{font-size:9.5px;color:var(--ink-3);margin-top:1px}

/* ---- CTA 버튼 (앰버 배경 + 먹 텍스트) ---- */
.cta{height:38px;padding:0 16px;border:none;border-radius:12px;background:var(--gold);color:var(--ink);font-size:12.5px;font-weight:800;font-family:inherit;box-shadow:0 5px 12px -4px rgba(232,180,18,.55)}
.cta.big{width:100%;height:46px;font-size:14px}
.cta.ghost{background:var(--surface);border:1.5px solid var(--line);box-shadow:none}
.cta.fun{background:var(--fun);box-shadow:0 5px 12px -4px rgba(232,180,18,.6)}

/* ---- 깨비 카드 ---- */
.kcard{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:11px 13px;margin-bottom:13px;box-shadow:var(--sh)}
.kc-t{font-size:12.5px;font-weight:800}
.kc-d{font-size:10px;color:var(--ink-2);margin-top:2px}
.kc-d b{color:var(--gold-ink)}
.spin{height:34px;padding:0 13px;border:none;border-radius:11px;background:var(--fun);color:var(--ink);font-size:11.5px;font-weight:800;font-family:inherit;flex-shrink:0}

/* ---- 섹션 헤더 ---- */
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 9px}
.sec h3{font-size:14.5px;font-weight:800}
.sec a{font-size:10.5px;font-weight:700;color:var(--ink-3);text-decoration:none;cursor:pointer;background:none;border:0;font-family:inherit}

/* ---- 국가별 운영 표시 ---- */
.global-pack-banner{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:12px}
.global-pack-copy{min-width:0;flex:1}
.global-pack-banner b{display:block;font-size:12.5px;font-weight:850;color:var(--ink)}
.country-mini-select{width:116px;height:32px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-size:10.5px;font-weight:800;padding:0 8px;outline:0;flex-shrink:0}
.global-pack-select{width:86px;background:var(--gold-soft);border-color:var(--gold-line)}
.cats .cat[hidden]{display:none!important}
.rc.is-selected,.rrow.is-selected,.featured-card.is-selected{outline:2px solid var(--gold);outline-offset:-2px}

/* ---- 빠른 선택 가로 카드 ---- */
.qgrid{display:flex;gap:9px;overflow-x:auto;margin-bottom:8px;scrollbar-width:none}
.qgrid::-webkit-scrollbar{display:none}
.q{flex-shrink:0;width:122px;background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:var(--sh)}
.q .ph{height:82px;overflow:hidden}
.q .ph img{width:100%;height:100%;object-fit:cover;display:block}
.q .b{padding:8px 10px 10px}
.tg{font-size:8.5px;font-weight:800;color:var(--gold-ink);background:var(--gold-soft);border-radius:5px;padding:2px 6px;display:inline-block;margin-bottom:4px;margin-right:3px}
.q .t{font-size:11px;font-weight:700;line-height:1.28}
.q .p{font-size:9.5px;font-weight:800;color:var(--ink-2);margin-top:4px}

/* ---- 하단 내비게이션 ---- */
.nav{background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 6px 14px}
.nv{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink-3);font-size:9px;font-weight:700;position:relative;background:none;border:0;font-family:inherit;cursor:pointer}
.nv i{font-size:19px}
.nv span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv.on{color:var(--ink)}
.nv.on::after{content:"";position:absolute;bottom:-7px;width:16px;height:3px;border-radius:3px;background:var(--gold)}

/* ---- 상세: 영상 히어로 ---- */
.vhero{position:relative;height:190px;margin:-16px -15px 0;overflow:hidden;background:#F6F0E4}
.vhero>img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.vhero iframe{width:100%;height:100%;border:0;display:block}
.vhero .over{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,6,.35),transparent 40%,rgba(20,14,6,.6))}
.vplay{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--fun);display:grid;place-items:center;color:var(--ink);font-size:22px;box-shadow:0 8px 20px -6px rgba(0,0,0,.5);border:0;cursor:pointer}
.vmeta{position:absolute;left:15px;right:15px;bottom:10px;display:flex;align-items:flex-end;justify-content:space-between;color:#fff}
.vmeta .mm{font-size:10px;font-weight:600;opacity:.9}
.vmeta h2{font-size:18px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.vmeta .dur{font-size:10px;font-weight:700;background:rgba(0,0,0,.45);border-radius:7px;padding:3px 8px}

/* ---- 상세: 절약 카드 ---- */
.savecard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 15px;box-shadow:var(--sh);margin:12px 0}
.savecard .big{font-size:20px;font-weight:800}
.savecard .big em{font-style:normal;color:var(--gold-ink)}
.savecard .sub{font-size:10px;color:var(--ink-3);margin-top:2px}
.tri{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:11px}
.tri>div{padding:9px 11px;border-left:1px solid var(--line);background:var(--bg)}
.tri>div:first-child{border-left:none}
.tri .l{font-size:9px;color:var(--ink-3)}
.tri .v{font-size:12.5px;font-weight:800;margin-top:2px;font-feature-settings:'tnum'}

/* ---- 세그먼트 ---- */
.segrow{display:flex;gap:6px;margin:12px 0}
.pill{flex:1;height:36px;border-radius:11px;border:1.5px solid var(--line);background:var(--surface);font-size:12px;font-weight:700;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;font-family:inherit}
.pill.on,.pill.active{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.segrow.small .pill{height:32px;font-size:11px;border-radius:10px}

/* ---- 상세: 단계 + 타임스탬프 ---- */
.steps{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);margin-bottom:12px}
.step{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step .n{width:24px;height:24px;border-radius:9px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--ink-2);flex-shrink:0}
.step .t{flex:1;font-size:12px;font-weight:700}
.step .d{font-size:10px;color:var(--ink-3);margin-top:1px;font-weight:500}
.step .tm{font-size:10.5px;font-weight:800;font-feature-settings:'tnum';background:var(--gold-soft);color:var(--gold-ink);padding:3px 9px;border-radius:8px;border:0;cursor:pointer;font-family:inherit}
.seek-hint{font-size:9.5px;color:var(--ink-3);text-align:right;margin:-6px 2px 10px}

/* ---- 상세: 재료 행 + 칩 ---- */
.ing{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:7px}
.ing .nm{flex:1;font-size:12px;font-weight:700}
.ing .nm .d{font-size:9.5px;color:var(--ink-3);font-weight:500;margin-top:1px}
.ing .pr{font-size:11.5px;font-weight:800;margin-right:2px;font-feature-settings:'tnum'}
.chip{font-size:10px;font-weight:800;border-radius:8px;padding:4px 10px}
.chip.have{background:var(--gold-soft);color:var(--gold-ink)}
.chip.order{background:var(--gold);color:var(--ink)}

/* ---- 냉장고: 자산 히어로 ---- */
.asset{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:15px 16px;box-shadow:var(--sh);margin-bottom:11px}
.asset .l{font-size:11px;color:var(--ink-2);font-weight:600}
.asset .v{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-top:2px;font-feature-settings:'tnum'}
.asset .v em{font-style:normal;color:var(--gold-ink)}
.asset .sub{display:flex;gap:12px;margin-top:6px;font-size:10px;color:var(--ink-3)}

/* ---- 냉장고: 오늘 할 일 체크리스트 ---- */
.todo{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);margin-bottom:11px;overflow:hidden}
.todo .th{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--line)}
.todo .th .t{flex:1;font-size:12px;font-weight:800}
.todo .th .pt{font-size:10px;font-weight:800;color:#4A3600;background:var(--fun);border-radius:8px;padding:3px 8px}
.ti-row{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line)}
.ti-row:last-child{border-bottom:none}
.cbx{width:20px;height:20px;border-radius:7px;border:2px solid #D9D4CA;flex-shrink:0}
.cbx.on{background:var(--gold);border-color:var(--gold);display:grid;place-items:center;color:#fff;font-size:12px}
.ti-row .t{flex:1;font-size:11.5px;font-weight:700}
.ti-row .t .d{font-size:9.5px;color:var(--ink-3);font-weight:500;margin-top:1px}
.ti-row .pp{font-size:10px;font-weight:800;color:var(--gold-ink)}

/* ---- 냉장고: 캐비티(아이콘 한눈에) ---- */
.fridge{background:#EFEBE3;border:1.5px solid #E0DACC;border-radius:18px;padding:12px 12px 13px;box-shadow:inset 0 10px 22px rgba(70,55,25,.10);margin-bottom:12px}
.fr-light{height:5px;background:#FFFDF4;border-radius:6px;margin:0 32% 11px;box-shadow:0 3px 10px 2px rgba(255,238,180,.9)}
.fr-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 3px 10px}
.fr-head .t{font-size:12.5px;font-weight:800}
.fr-head .v{font-size:10px;color:var(--ink-2);font-weight:700}
.fr-head .v em{font-style:normal;color:var(--gold-ink)}
.fgrid2{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.fitem{background:var(--surface);border:1px solid var(--line);border-radius:12px;text-align:center;padding:8px 2px 7px;position:relative}
.fitem .ic{font-size:17px;color:var(--ink-2);line-height:1}
.fitem .nm{font-size:8.5px;font-weight:700;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fitem .dd{font-size:7.5px;font-weight:800;color:var(--ink-3);margin-top:1px}
.fitem.warn{border-color:#F1AFB2;background:#FEF6F6}
.fitem.warn .dd{color:var(--red)}
.fitem.warn::after{content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--red)}

/* ---- 냉장고: 재료 상세 행 ---- */
.frow{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:7px}
.frow .ic{width:34px;height:34px;border-radius:11px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;font-size:15px;color:var(--ink-2);flex-shrink:0}
.frow .nm{flex:1;font-size:12px;font-weight:700}
.frow .nm .d{font-size:9.5px;color:var(--ink-3);font-weight:500;margin-top:1px}
.frow .qty{font-size:10px;color:var(--ink-3);font-weight:600;text-align:right}
.frow .val{font-size:11px;font-weight:800;font-feature-settings:'tnum'}
.frow .mini{font-size:9.5px;font-weight:800;color:var(--gold-ink);background:var(--gold-soft);border-radius:7px;padding:3px 8px;white-space:nowrap;border:0;cursor:pointer;font-family:inherit}
.dday{font-size:10.5px;font-weight:800;font-feature-settings:'tnum'}
.dday.warn{color:var(--red)}
.dday.okc{color:var(--ink-3)}

/* ---- 통계 스트립 ---- */
.statstrip,.stat3{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:var(--sh);margin-bottom:11px}
.statstrip>div,.stat3>div{padding:10px 12px;border-left:1px solid var(--line)}
.statstrip>div:first-child,.stat3>div:first-child{border-left:none}
.ss-l{font-size:9px;color:var(--ink-3)}
.ss-v{font-size:15px;font-weight:800;margin-top:2px;font-feature-settings:'tnum'}
.ss-v em{font-style:normal;color:var(--gold-ink)}
.ss-v .r{color:var(--red)}

/* ---- 저금통 ---- */
.bank-hero{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--sh);text-align:center;margin-bottom:12px}
.bank-hero .l{font-size:11px;color:var(--ink-2);font-weight:600}
.bank-hero .v{font-size:30px;font-weight:800;letter-spacing:-.03em;margin-top:3px;font-feature-settings:'tnum'}
.bank-hero .v em{font-style:normal;color:var(--gold-ink)}
.bank-hero .d{font-size:10px;color:var(--ink-3);margin-top:3px}
.quest{background:linear-gradient(120deg,#FDF6DE,#FBEFD0);border:1.5px solid #F0DCA0;border-radius:16px;padding:13px 15px;margin-bottom:11px}
.quest .t{font-size:12.5px;font-weight:800}
.quest .t em{font-style:normal;color:var(--gold-ink)}
.qbar{height:8px;border-radius:6px;background:#fff;margin:9px 0 5px;overflow:hidden}
.qbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--fun),var(--gold));border-radius:6px}
.quest .d{font-size:10px;color:var(--ink-2);display:flex;justify-content:space-between}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.duo>div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 13px;box-shadow:var(--sh)}
.duo .l{font-size:9.5px;color:var(--ink-3)}
.duo .v{font-size:16px;font-weight:800;margin-top:2px;font-feature-settings:'tnum'}
.log{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:10px 12px;margin-bottom:7px}
.log .t{flex:1;font-size:11.5px;font-weight:700}
.log .d{font-size:9px;color:var(--ink-3);font-weight:500;margin-top:1px}
.log .amt{font-size:12px;font-weight:800;color:var(--gold-ink);font-feature-settings:'tnum'}

/* ---- 요리 완료 ---- */
.done-wrap{text-align:center;padding-top:10px}
.done-wrap h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-top:10px}
.done-wrap .d{font-size:11.5px;color:var(--ink-2);margin-top:4px}
.celebr{position:relative;display:inline-block}
.celebr .halo{width:128px;height:128px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#FDF3D7,#FBEFD0 62%,transparent 70%);display:grid;place-items:center;margin:0 auto}
.cfd{position:absolute;border-radius:50%}
.stars{display:flex;gap:6px;justify-content:center;margin:10px 0 2px}
.stars i{font-size:24px;color:var(--gold);cursor:pointer}
.stars i.off{color:var(--line)}
.rewards{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 12px;text-align:left}
.rw{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 13px;box-shadow:var(--sh)}
.rw .l{font-size:9.5px;color:var(--ink-3)}
.rw .v{font-size:16px;font-weight:800;margin-top:2px;font-feature-settings:'tnum'}
.rw .v em{font-style:normal;color:var(--gold-ink)}
.reflect{background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:var(--sh);text-align:left;margin-bottom:10px}
.reflect .rh{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:800}
.reflect .rh .tag2{margin-left:auto;font-size:9px;font-weight:800;color:var(--gold-ink);background:var(--gold-soft);border-radius:6px;padding:2px 7px}
.rl{display:flex;justify-content:space-between;padding:8px 13px;font-size:11px;border-bottom:1px solid var(--line)}
.rl:last-child{border-bottom:none}
.rl .n{font-weight:700}
.rl .a{font-weight:800;font-feature-settings:'tnum';color:var(--ink-2)}
.rl .a.plus{color:var(--gold-ink)}
.strkbar{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--sh);text-align:left;margin-bottom:12px}
.strkbar .t{font-size:11.5px;font-weight:700}
.strkbar .t em{font-style:normal;color:var(--gold-ink)}
.dots{display:flex;gap:6px;margin-top:9px}
.dot{flex:1;height:7px;border-radius:5px;background:var(--line)}
.dot.on{background:var(--gold)}

/* ---- 레시피 목록 ---- */
.pillrow{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;scrollbar-width:none}
.pillrow::-webkit-scrollbar{display:none}
.fpill{flex-shrink:0;height:32px;padding:0 12px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);font-size:11px;font-weight:700;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-family:inherit}
.fpill.on,.fpill.active{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.fpill i{font-size:13px}
.rrow{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:9px 11px;margin-bottom:8px;box-shadow:var(--sh)}
.rrow .th{width:56px;height:56px;border-radius:12px;overflow:hidden;flex-shrink:0}
.rrow .th img{width:100%;height:100%;object-fit:cover}
.rrow .bd{flex:1;min-width:0}
.rrow .t{font-size:12.5px;font-weight:800}
.rrow .d{font-size:10px;color:var(--ink-3);margin-top:2px}
.rrow .d em{font-style:normal;color:var(--gold-ink);font-weight:800}
.rrow .cta{height:32px;padding:0 13px;font-size:11px}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.rc{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:var(--sh);position:relative}
.rc .ph{height:auto;aspect-ratio:1.12/1;overflow:hidden}
.rc .ph img{width:100%;height:100%;object-fit:cover}
.rc .b{padding:8px 10px 10px}
.rc .t{font-size:11.5px;font-weight:700;line-height:1.3}
.rc .p{font-size:9.5px;color:var(--ink-3);margin-top:3px}
.rc .p em{font-style:normal;color:var(--gold-ink);font-weight:800}
.rc .hrt{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--gold-2);font-size:14px}

/* ---- Visual-first recipe cards ---- */
.hero{position:relative}
.hero .ph{height:228px}
.hero .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,rgba(20,14,6,0),rgba(20,14,6,.18));pointer-events:none}
.hero h2{position:static;margin:3px 0 11px;color:var(--ink);font-size:23px;line-height:1.12;font-weight:900;letter-spacing:-.02em;text-shadow:none}
.hero h2 .title-line{display:inline}
.hero h2 .title-line+.title-line::before{content:" "}
.hero .body{padding:11px 14px 14px;background:var(--surface)}
.hero .body .meta{margin-bottom:6px}
.hero .body .meta .m{font-size:10px}
.hero .foot{min-height:42px}
.q{width:138px}
.q .ph{height:112px}
.q .ph img{object-position:center 48%}
.q .b{padding:8px 10px 11px}
.q .t .title-line,.rc .t .title-line,.rrow .t .title-line{display:inline}
.q .t .title-line+.title-line::before,.rc .t .title-line+.title-line::before,.rrow .t .title-line+.title-line::before{content:" "}
.rc .ph{aspect-ratio:1.05/1}
.rc .ph img{object-position:center 48%}

/* ============================================================
   이미지 폴백 패턴 (spec 6)
   고정 비율 박스 + object-fit:cover + 스켈레톤 + 접시 폴백
   사용: <div class="imgbox" style="aspect-ratio:4/3"><img ...></div>
   ============================================================ */
.imgbox{position:relative;overflow:hidden;background:linear-gradient(100deg,#F1EEE8 40%,#F8F6F1 50%,#F1EEE8 60%);background-size:200% 100%;animation:kbSkel 1.4s ease infinite}
.imgbox img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.imgbox.is-loaded{animation:none;background:var(--bg)}
.imgbox.is-error{animation:none;background:var(--bg)}
.imgbox.is-error img{display:none}
.imgbox.is-error::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,#FBEFD0 0 26%,transparent 27%),radial-gradient(circle at 50% 50%,#fff 0 42%,transparent 43%),linear-gradient(135deg,#F4EFE5,#FAF8F2)}
.imgbox.is-error::after{content:"\eb95";font-family:'tabler-icons';position:absolute;inset:0;display:grid;place-items:center;font-size:24px;color:var(--gold-ink)}
@keyframes kbSkel{0%{background-position:0 0}100%{background-position:-200% 0}}