/* ============================================================
   kkebing UI — 공통 토큰 + 컴포넌트
   토큰 원본: docs/brand/tokens.json (디자인 인계 2026-09-15, design/brand-2026-09)
   규율: primary(초록 #087E60)가 주요 행동·선택 상태. 그 위 글자는 흰색(--on-primary).
         accent(금색 #F5B942, 변수 --fun)는 포인트·축하 순간(스트릭·룰렛·별점) 전용.
         --red 는 오류·소진 임박 전용. --gold / --gold-ink / --gold-soft 는 이름만 남은 옛 변수이고
         값은 primary 계열이다 — 16화면 100곳이 이 이름으로 쓰고 있어 이름을 바꾸지 않았다.
   글자: Pretendard. 크기는 tokens.json 의 typography(제목 24 · 섹션 20 · 재료 18 · 본문 16 · 버튼 14 · 메타 12)를
         하한으로 삼되, 폰 셸(430px) 안 밀도 때문에 본문·섹션은 한 단계 작게 두었다(아래 --fs-*).
   ============================================================ */
@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;
  /* tokens.json colors */
  --primary:#087E60; --primary-2:#066A50; --primary-soft:#E6F3EE; --primary-line:#BFDCD2; --on-primary:#FFFFFF;
  --accent:#F5B942; --accent-2:#D99A1E; --danger:#E5484D; --muted:#64736C;
  /* 옛 이름 → 새 값 (화면 100곳이 이 이름을 쓴다) */
  --gold:var(--primary); --gold-2:var(--primary-2); --gold-soft:var(--primary-soft); --gold-ink:var(--primary); --gold-line:var(--primary-line);
  --fun:var(--accent); --fun-2:var(--accent-2);
  --ink:#192C26; --ink-2:#4A5B55; --ink-3:var(--muted);
  --bg:#FFFFFF; --surface:#FFFFFF; --line:#E3E8E5; --soft:#F3F6F4;   /* 화면·카드 바탕은 흰색(tokens surface). --soft 는 카드 안 옅은 채움(단계 번호·아이콘 칸·표 셀)만 */
  --red:var(--danger);
  --tut-surface:#EEF1EF; --tut-border:#CBD4CE;
  --r-card:16px; --r-btn:12px;
  --fs-title:22px; --fs-section:17px; --fs-ingredient:16px; --fs-body:15px; --fs-button:14px; --fs-meta:13px;
  --sh:0 1px 2px rgba(20,40,32,.04),0 10px 26px -16px rgba(20,40,32,.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 프레임의 풀스크린 버전) ---- */
/* 셸 높이는 dvh 다 — 모바일 크롬에서 100vh 는 "주소창이 접힌" 큰 뷰포트라, 주소창이 보이는 동안
   .stage 의 아래 56~110px 이 화면 밖으로 밀려 하단 메뉴가 통째로 안 보인다. 안쪽 .scr 만 구르므로
   루트가 안 굴러 주소창이 접히지 않아 "한번 사라지면 계속 사라진다"(2026-09-22 사장님).
   헤드리스 크로미움에는 주소창이 없어 100vh === innerHeight 라 qa:overlap 이 이 사고를 못 잡는다.
   100vh 로 되돌리지 않는다. */
.stage{width:min(100vw,430px);height:100vh;height:100dvh;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:18px;font-weight:800}
/* 탭 화면(레시피·냉장고·저금통·마이)의 왼쪽 위 이름은 홈 제목과 같은 22px (사장님 2026-09-30 "카테고리 표기한 글씨는 조금 더 키우기") */
.tb-t.tab-t{font-size:var(--fs-title);letter-spacing:-.03em}
.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:var(--fs-meta);color:var(--ink-2);font-weight:600}
.hd h1{font-size:var(--fs-title);font-weight:800;letter-spacing:-.03em;margin-top:2px}

/* ---- 스트릭 칩 (fun 허용: 재미 순간) ---- */
/* 연속 배지는 2번처럼 연한 판(사장님 2026-09-17 오후) — 금색 토큰의 연한 섞임, 글자는 진한 톤 */
.streak{display:flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--fun) 22%,#fff);border:1px solid color-mix(in srgb,var(--fun) 45%,#fff);color:#4A3600;border-radius:15px;padding:7px 12px}
.streak .n{font-size:13px;font-weight:800;line-height:1}
.streak .l{font-size:11px;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:var(--fs-body);color:var(--ink-3)}
.search input{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:var(--fs-body);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}
/* 카테고리는 상자 없이 원 판 + 글자 (디자인 결정 2026-09-17 홈 1·목록 1). 선택은 연한 초록 판 + 초록 글자 */
.cat{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:0;border-radius:14px;padding:6px 0;width:60px}
.cat .food-ico,.cat>i{width:44px;height:44px;border-radius:50%;background:#EEF3F0;display:grid;place-items:center;font-size:20px;line-height:1;color:var(--ink-2)}
.cat i{font-size:17px;color:var(--ink-2)}
.cat .t{font-size:13px;font-weight:600;color:var(--ink)}
.cat.on{background:transparent;border-color:transparent}
.cat.on .food-ico,.cat.on>i{background:var(--primary-soft);box-shadow:0 0 0 1.5px var(--primary) inset;color:var(--primary)}
.cat.on .t{color:var(--primary);font-weight:800}

/* ---- 히어로 카드 ---- */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);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(8,126,96,.94);color:var(--on-primary);font-size:11px;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:var(--fs-meta);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:17px;font-weight:800}
.save .a em{font-style:normal;color:var(--gold-ink)}
.save .s{font-size:var(--fs-meta);color:var(--ink-3);margin-top:1px}

/* ---- CTA 버튼 (앰버 배경 + 먹 텍스트) ---- */
.cta{height:44px;padding:0 16px;border:none;border-radius:var(--r-btn);background:var(--primary);color:var(--on-primary);font-size:var(--fs-button);font-weight:700;font-family:inherit;box-shadow:0 5px 12px -4px rgba(8,126,96,.45)}
.cta.big{width:100%;height:48px;font-size:15px}
.cta.ghost{background:var(--surface);border:1.5px solid var(--line);box-shadow:none;color:var(--ink)}
.cta.fun{background:var(--fun);color:#4A3600;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)}
/* 깨빙 포인트 '준비 중' 카드 — 포인트 자리에 이것 한 장만 그린다(2026-09-16). 숫자 없음. KebbiPoints.renderPreparing 이 글을 채운다 */
.kp-prep{display:flex;align-items:center;gap:11px;background:linear-gradient(180deg,var(--surface),var(--primary-soft));border:1px solid var(--primary-line);border-radius:16px;padding:11px 13px;margin-bottom:13px;box-shadow:0 6px 18px rgba(8,126,96,.16),0 1px 3px rgba(25,44,38,.08)}
.kp-prep img{width:42px;height:42px;flex-shrink:0}
.kp-prep .kp-body{flex:1;min-width:0}
.kp-prep .kp-t{font-size:13px;font-weight:800;color:var(--ink)}
.kp-prep .kp-d{font-size:13px;font-weight:700;color:var(--ink-2);margin-top:2px;line-height:1.45}
.kp-prep .kp-tag{flex-shrink:0;font-size:11px;font-weight:800;color:var(--primary);background:var(--primary-soft);border-radius:999px;padding:4px 8px;white-space:nowrap}
.statstrip.kp-strip2{grid-template-columns:1fr 1fr}
.kc-t{font-size:var(--fs-body);font-weight:800}
.kc-d{font-size:var(--fs-meta);color:var(--ink-2);margin-top:2px}
.kc-d b{color:var(--gold-ink)}
.spin{height:36px;padding:0 13px;border:none;border-radius:var(--r-btn);background:var(--accent);color:#4A3600;font-size:13px;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:var(--fs-section);font-weight:800}
.sec a{font-size:var(--fs-meta);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:13px;font-weight:850;color:var(--ink)}
.country-mini-select{width:116px;height:32px;border:1.5px solid var(--line);border-radius:10px;background:var(--soft);color:var(--ink);font-size:11px;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:var(--r-card);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:11px;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:13px;font-weight:700;line-height:1.28}
.q .p{font-size:var(--fs-meta);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:11px;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:#E6F3EE}
.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(--primary);display:grid;place-items:center;color:var(--on-primary);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:var(--fs-meta);font-weight:600;opacity:.9}
.vmeta h2{font-size:18px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.vmeta .dur{font-size:13px;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:var(--fs-meta);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(--soft)}
.tri>div:first-child{border-left:none}
.tri .l{font-size:13px;color:var(--ink-3)}
.tri .v{font-size:13px;font-weight:800;margin-top:2px;font-feature-settings:'tnum'}

/* ---- 세그먼트 ---- */
.segrow{display:flex;gap:6px;margin:12px 0}
.pill{flex:1;height:40px;border-radius:var(--r-btn);border:1.5px solid var(--line);background:var(--surface);font-size:var(--fs-button);font-weight:700;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;font-family:inherit}
.pill.on,.pill.active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.segrow.small .pill{height:36px;font-size:13px;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(--soft);border:1px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--ink-2);flex-shrink:0}
.step .t{flex:1;font-size:var(--fs-body);font-weight:700}
.step .d{font-size:var(--fs-meta);color:var(--ink-3);margin-top:1px;font-weight:500}
.step .tm{font-size:13px;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:13px;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:var(--fs-ingredient);font-weight:700}
.ing .nm .d{font-size:var(--fs-meta);color:var(--ink-3);font-weight:500;margin-top:1px}
.ing .pr{font-size:13px;font-weight:800;margin-right:2px;font-feature-settings:'tnum'}
.chip{font-size:11px;font-weight:800;border-radius:8px;padding:4px 10px}
.chip.have{background:var(--gold-soft);color:var(--gold-ink)}
.chip.order{background:var(--primary);color:var(--on-primary)}

/* ---- 냉장고: 자산 히어로 ---- */
.asset{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:15px 16px;box-shadow:var(--sh);margin-bottom:11px}
.asset .l{font-size:var(--fs-meta);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:var(--fs-meta);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:var(--fs-body);font-weight:800}
.todo .th .pt{font-size:13px;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 var(--primary-line);flex-shrink:0}
.cbx.on{background:var(--gold);border-color:var(--gold);display:grid;place-items:center;color:#fff;font-size:13px}
.ti-row .t{flex:1;font-size:13px;font-weight:700}
.ti-row .t .d{font-size:var(--fs-meta);color:var(--ink-3);font-weight:500;margin-top:1px}
.ti-row .pp{font-size:13px;font-weight:800;color:var(--gold-ink)}

/* ---- 냉장고: 캐비티(아이콘 한눈에) ---- */
.fridge{background:#EAEFEC;border:1.5px solid #D8E0DC;border-radius:var(--r-card);padding:12px 12px 13px;box-shadow:inset 0 10px 22px rgba(20,40,32,.10);margin-bottom:12px}
.fr-light{height:5px;background:#FFFFFF;border-radius:6px;margin:0 32% 11px;box-shadow:0 3px 10px 2px rgba(230,243,238,.95)}
.fr-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 3px 10px}
.fr-head .t{font-size:13px;font-weight:800}
.fr-head .v{font-size:13px;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:11px;font-weight:700;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fitem .dd{font-size:11px;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(--soft);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:var(--fs-body);font-weight:700}
.frow .nm .d{font-size:var(--fs-meta);color:var(--ink-3);font-weight:500;margin-top:1px}
.frow .qty{font-size:13px;color:var(--ink-3);font-weight:600;text-align:right}
.frow .val{font-size:13px;font-weight:800;font-feature-settings:'tnum'}
.frow .mini{font-size:11px;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:13px;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:13px;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:var(--r-card);padding:16px;box-shadow:var(--sh);text-align:center;margin-bottom:12px}
.bank-hero .l{font-size:var(--fs-meta);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:var(--fs-meta);color:var(--ink-3);margin-top:3px}
/* 냉장고 '보유 재료' 칸과 저금통 '이번 달 아낀 돈' 칸은 같은 자로 그린다 (사장님 2026-09-27 "두개 박스안에 폰트사이즈가 다르니깐 비슷하게").
   라벨 15 · 큰 숫자 32 · 둘째 금액(예상 가치 · 누적 절약) 라벨 15 + 금액 20 · 설명 줄 13. 순서도 같다 — 라벨 → 큰 숫자 → 둘째 금액 → 설명. */
.asset .l,.bank-hero .l{font-size:var(--fs-body);font-weight:600}
.asset .v,.bank-hero .v{font-size:24px;font-weight:900;letter-spacing:-.03em;margin-top:4px;line-height:1.1}
.hero-amt{display:inline-flex;align-items:baseline;gap:6px;margin-top:8px;color:var(--primary);font-size:var(--fs-body);font-weight:700}
.hero-amt em{font-style:normal;font-size:19px;font-weight:900;letter-spacing:-.01em;font-feature-settings:'tnum'}
.asset .sub,.bank-hero .d{font-size:var(--fs-meta);color:var(--ink-2);margin-top:6px}
.bank-hero .d{margin-top:4px}
.quest{background:linear-gradient(120deg,#F2F8F5,var(--primary-soft));border:1.5px solid var(--primary-line);border-radius:var(--r-card);padding:13px 15px;margin-bottom:11px}
.quest .t{font-size:var(--fs-body);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(--primary-2),var(--primary));border-radius:6px}
.quest .d{font-size:var(--fs-meta);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:13px;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:13px;font-weight:700}
.log .d{font-size:13px;color:var(--ink-3);font-weight:500;margin-top:1px}
.log .amt{font-size:13px;font-weight:800;color:var(--gold-ink);font-feature-settings:'tnum'}

/* ---- 요리 완료 ---- */
.done-wrap{text-align:center;padding-top:10px}
.done-wrap h2{font-size:var(--fs-title);font-weight:800;letter-spacing:-.02em;margin-top:10px}
.done-wrap .d{font-size:13px;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%,#FFF4DC,#FBE6B8 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(--accent);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:13px;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:var(--r-card);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:13px;font-weight:800}
.reflect .rh .tag2{margin-left:auto;font-size:11px;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:13px;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:13px;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:34px;padding:0 12px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);font-size:13px;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(--primary);border-color:var(--primary);color:var(--on-primary)}
.fpill i{font-size:13px}
.rrow{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);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:14px;font-weight:800}
.rrow .d{font-size:var(--fs-meta);color:var(--ink-3);margin-top:2px;word-break:keep-all}
.rrow .d em{font-style:normal;color:var(--gold-ink);font-weight:800}
.rrow .cta{height:34px;padding:0 13px;font-size:13px}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.rc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);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:13px;font-weight:700;line-height:1.3}
.rc .p{font-size:var(--fs-meta);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:var(--fs-meta)}
.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,#ECF0EE 40%,#F6F8F7 50%,#ECF0EE 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(--soft)}
.imgbox.is-error{animation:none;background:var(--soft)}
.imgbox.is-error img{display:none}
.imgbox.is-error::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,var(--primary-soft) 0 26%,transparent 27%),radial-gradient(circle at 50% 50%,#fff 0 42%,transparent 43%),linear-gradient(135deg,#EDF3F0,#F6F8F7)}
.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}}

/* 수수료 고지는 무태그 모드여도 그린다 (사장님 2026-10-05 "쿠팡 파트너스 가입하려니깐 고지 문구가 들어가있어야 … 고지문구 열자").
   2026-09-16 ~ 10-05 에는 html[data-affiliate="off"] 일 때 .affiliate-note·.affiliate-only 를 감췄다. 링크 모드(무태그·제휴)는 서버 스위치 그대로다. */
/* 조리 시간 — 시계 아이콘 + 글자, 바탕 없음(2026-09-29). 칩은 판정만 쓴다. 저장소 timeHtml·withClock 이 그린다. */
.kb-time{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;font-weight:600;color:var(--ink-3);vertical-align:-1px}
.kb-time .ti{font-size:1.1em;line-height:1}