/* 라벨리 v20 · 디자인 업그레이드 — 큰 굵은 제목 · 3D 아이콘 · 둥근 흰 카드 · 떠 있는 하단 메뉴
   색: 청록(브랜드) · 짙은 남색(글자·주요 버튼) · 옅은 회색 바탕 */
[hidden]{display:none!important}
:root{
  --bg:#f2f4f6;--card:#fff;--fill:#f4f6f8;--ink:#111a2e;--ink2:#2b3548;--sub:#4e586a;--mute:#6b7385;--line:#e6e9ee;
  --teal:#0e8f82;--teal-d:#0b766b;--teal-bg:#e3f4f1;--mint:#16b3a2;
  --warn:#a14f00;--warn-bg:#fff3e3;--red:#c4281c;--red-bg:#fdecea;
  --sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px);--tab:66px;--tabgap:10px;
  --r-lg:24px;--r-md:18px;--r-sm:14px;--sh:0 1px 2px rgba(17,26,46,.04),0 6px 18px rgba(17,26,46,.06);
  --ease:cubic-bezier(.2,.8,.2,1);--t:200ms}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--ink);font-family:Pretendard,-apple-system,system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;cursor:pointer}
svg{width:22px;height:22px;flex-shrink:0}
img{display:block}
.num{font-variant-numeric:tabular-nums}
#app{max-width:520px;margin:0 auto;min-height:100dvh;position:relative}
.scr{min-height:100dvh;padding:calc(var(--st)) 16px calc(var(--tab) + var(--tabgap) + var(--sb) + 28px);animation:in var(--t) var(--ease)}
.scr.withbar{padding-bottom:calc(var(--tab) + var(--tabgap) + var(--sb) + 104px)}
.subbar .tabbar{display:none}
.subbar .actionbar{bottom:0;padding-bottom:calc(12px + var(--sb))}
.subbar .scr.withbar{padding-bottom:calc(var(--sb) + 96px)}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 머리 */
.hd{height:60px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.hd.sub{margin:0 -8px;position:sticky;top:0;z-index:5;background:var(--bg)}
.ttl{font-weight:800;font-size:18px;letter-spacing:-.02em}
.ttl.big{font-size:28px;font-weight:900;letter-spacing:-.04em}
.ic{width:44px;height:44px;display:grid;place-items:center;border-radius:14px}
.ic.light{color:#fff}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:22px;letter-spacing:-.04em}
.logo .mark{width:34px;height:34px}

/* 눌림 반응 */
.btn,.scanbtn,.row,.chip,.seg button,.tabbar button,.mini,.link,.cat,.tile,.prog,.sv,.rpcta,.hdbtn{transition:transform 110ms var(--ease),background-color var(--t),color var(--t),border-color var(--t),box-shadow var(--t)}
.btn:active,.scanbtn:active,.chip:active,.seg button:active,.mini:active,.cat:active,.tile:active,.prog:active,.sv:active,.rpcta:active,.hdbtn:active{transform:scale(.96)}
.row:active{background:var(--fill)}

/* 버튼 */
.btn{min-height:56px;border-radius:var(--r-md);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;text-align:center;text-decoration:none;letter-spacing:-.02em}
.btn.pri{background:var(--ink);color:#fff;box-shadow:0 6px 16px rgba(17,26,46,.22)}
.btn.teal{background:var(--teal);color:#fff}
.btn.ghost{background:var(--card);border:1.5px solid var(--line);color:var(--ink)}
.btn.ghost.light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.4)}
.btn.done{background:var(--teal-bg);color:var(--teal-d)}
.btn svg{width:20px;height:20px}
.link{color:var(--teal-d);font-weight:800;font-size:15.5px;min-height:44px;display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.mini{min-height:40px;padding:0 14px;border-radius:99px;font-weight:800;font-size:14px;background:var(--fill);color:var(--ink2);display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.mini.on{background:var(--teal-bg);color:var(--teal-d)}
.row2{display:flex;gap:8px}.row2>*{flex:1;min-width:0}
h3.sec{font-size:20px;font-weight:900;letter-spacing:-.03em;margin:30px 2px 12px;color:var(--ink)}
.hint{font-size:14.5px;color:var(--sub);line-height:1.6}
.hint.ok{color:var(--teal-d);font-weight:700}
.inl{color:var(--teal-d);font-weight:800;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}

/* ───── 첫 화면 ───── */
.scr.home{padding-left:0;padding-right:0;padding-top:0}
.hero{background:linear-gradient(160deg,#07655b 0%,#0b776b 50%,#0f8b7d 100%);color:#fff;padding:calc(var(--st) + 4px) 18px 64px;position:relative;overflow:hidden}
.hero:before,.hero:after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}
.hero:before{width:240px;height:240px;right:-70px;top:-60px}
.hero:after{width:150px;height:150px;left:-50px;bottom:10px;background:rgba(255,255,255,.06)}
.hero>*{position:relative;z-index:1}
.hero .logo{color:#fff}
.hdbtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 8px;border-radius:99px;background:rgba(255,255,255,.18);color:#fff;font-weight:800;font-size:14px;backdrop-filter:blur(6px)}
.hdbtn img{width:26px;height:26px}
.hero-t{font-size:32px;line-height:1.22;font-weight:900;letter-spacing:-.05em;margin-top:18px;word-break:keep-all}
.hero-s{font-size:16.5px;font-weight:600;opacity:.92;margin-top:8px;word-break:keep-all}
.scanbtn{width:100%;display:flex;align-items:center;gap:14px;background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:16px 16px 16px 14px;text-align:left;margin-top:22px;box-shadow:0 14px 30px rgba(4,60,54,.28)}
.scanbtn img{width:56px;height:56px}
.scanbtn span{flex:1;display:flex;flex-direction:column;min-width:0}
.scanbtn b{font-size:21px;font-weight:900;letter-spacing:-.04em}
.scanbtn small{font-size:14.5px;color:var(--sub);font-weight:600}
.scanbtn .go{font-style:normal;background:var(--ink);color:#fff;font-weight:800;font-size:15px;border-radius:99px;padding:10px 16px;flex-shrink:0}
.paper{background:var(--bg);border-radius:28px 28px 0 0;margin-top:-36px;position:relative;z-index:2;padding:20px 16px 0}

/* 검색 */
.qbox{display:flex;align-items:center;gap:8px;height:58px;border-radius:99px;background:var(--card);border:2px solid var(--ink);padding:0 10px 0 22px;transition:box-shadow var(--t)}
.qbox:focus-within{box-shadow:0 0 0 4px rgba(14,143,130,.18)}
.qbox input{flex:1;border:0;background:none;outline:none;font-size:17.5px;font-weight:600;min-width:0;height:100%}
.qbox input::placeholder{color:#8a92a3;font-weight:500}
.qbox input::-webkit-search-cancel-button{display:none}
.qbox .qic{width:26px;height:26px;color:var(--ink);margin-right:6px}
.qclear{width:40px;height:40px;display:grid;place-items:center;color:var(--mute);border-radius:50%;background:var(--fill)}
.qclear svg{width:16px;height:16px}
.scr:not(.home) .qbox{margin-top:10px}
.linkbar{background:var(--teal-bg);color:var(--teal-d);border-radius:var(--r-sm);padding:12px 14px;font-size:15px;font-weight:700;line-height:1.5;margin-top:12px}

/* 종류 아이콘 */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 4px;margin-top:22px}
.cat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0;min-height:44px;border-radius:var(--r-md)}
.cat img{width:62px;height:62px;filter:drop-shadow(0 6px 8px rgba(17,26,46,.12))}
.cat span{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.03em;white-space:nowrap}

/* 기능 타일 */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.tile{position:relative;min-height:122px;border-radius:var(--r-md);padding:14px 12px;text-align:left;display:flex;flex-direction:column;overflow:hidden}
.tile b{font-size:16.5px;font-weight:900;letter-spacing:-.04em;line-height:1.25}
.tile small{font-size:12.5px;font-weight:700;line-height:1.35;margin-top:4px;opacity:.85;word-break:keep-all}
.tile img{position:absolute;right:6px;bottom:6px;width:46px;height:46px}
.tile.mint{background:#d9f5ef;color:#06594f}
.tile.sun{background:#fff1c9;color:#6a4800}
.tile.sky{background:#e3ecff;color:#1f3d8a}
.trust{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:var(--r-md);padding:14px 16px;margin-top:22px;box-shadow:var(--sh)}
.trust img{width:44px;height:44px}
.trust p{font-size:14px;color:var(--sub);line-height:1.5}
.trust b{display:block;font-size:15.5px;color:var(--ink);font-weight:800}

/* 상태 */
.state{padding:20px 4px;font-size:15.5px;color:var(--sub)}
.state b{color:var(--ink);display:block;font-size:18px;font-weight:800;margin-bottom:4px}
.state .acts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.spin{display:inline-block;width:16px;height:16px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--teal);animation:sp .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}

/* 목록 */
.list{list-style:none;background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.row{width:100%;display:flex;align-items:center;gap:14px;padding:12px 16px;text-align:left;min-height:76px;position:relative}
.list li+li .row:before{content:'';position:absolute;top:0;left:82px;right:16px;height:1px;background:var(--line)}
.row .tx{flex:1;min-width:0}
.row .nm{font-weight:800;font-size:16.5px;line-height:1.35;letter-spacing:-.03em;word-break:keep-all;overflow-wrap:anywhere}
.row small{display:block;color:var(--sub);font-size:14px;margin-top:2px;font-weight:500}
.row .w{flex-shrink:0;font-size:15px;font-weight:800;color:var(--ink2)}
.ex{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;border-radius:99px;background:var(--card);border:1.5px solid var(--line);font-weight:700;font-size:15px;display:inline-flex;align-items:center}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .ck{width:0;height:16px;margin-right:0;transition:width var(--t),margin var(--t);overflow:hidden}
.chip.on .ck{width:16px;margin-right:5px}

/* 사진 */
.ph{border-radius:var(--r-sm);background:var(--fill);display:grid;place-items:center;overflow:hidden;flex-shrink:0;color:#a3aab8}
.ph img{width:100%;height:100%;object-fit:contain;background:#fff}
.ph.s{width:52px;height:52px}
.ph svg{width:22px;height:22px}

/* ───── 제품 확인 ───── */
.phead{display:flex;gap:16px;align-items:flex-start;margin-top:6px;background:var(--card);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh)}
.pthumb{width:104px;height:104px;border-radius:var(--r-md);background:var(--fill);flex-shrink:0;overflow:hidden;display:grid;place-items:center;color:#a3aab8}
.pthumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.pthumb svg{width:30px;height:30px}
.ptx{flex:1;min-width:0}
.pname{font-size:22px;font-weight:900;letter-spacing:-.04em;line-height:1.28;word-break:keep-all;overflow-wrap:anywhere}
.ptx .vol{font-size:16px;font-weight:800;color:var(--ink2);margin-top:6px}
.brand{font-size:14px;color:var(--sub);font-weight:600;margin-top:2px}
.status{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:var(--sub);background:var(--fill);border-radius:99px;padding:4px 10px 4px 8px;margin-top:8px}
.status:before{content:'';width:8px;height:8px;border-radius:50%;background:#9aa3b2}
.status.cand:before{background:#d08a2a}.status.ok{color:var(--teal-d);background:var(--teal-bg)}.status.ok:before{background:var(--teal)}
.credit{font-size:13px;color:var(--sub);margin:8px 4px 0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.credit a{color:var(--sub)}
.credit .inl{min-height:36px}
.qc{background:var(--warn-bg);color:var(--warn);font-size:14.5px;font-weight:700;border-radius:var(--r-sm);padding:12px 14px;margin-top:12px;line-height:1.5}
.ask{background:var(--card);border-radius:var(--r-lg);padding:18px;margin-top:14px;box-shadow:0 0 0 2px var(--teal) inset,var(--sh)}
.ask .how{font-size:14px;color:var(--teal-d);font-weight:800}
.ask h3{font-size:21px;font-weight:900;letter-spacing:-.04em;margin:6px 0 16px;line-height:1.35;word-break:keep-all}
.seg{display:flex;background:#e6e9ee;border-radius:var(--r-sm);padding:4px;margin-top:16px}
.seg button{flex:1;min-height:44px;font-size:15px;font-weight:800;border-radius:11px;color:var(--sub);padding:0 6px;line-height:1.25;letter-spacing:-.03em}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 2px 6px rgba(17,26,46,.12)}
.seg button:disabled{opacity:.4}
.keyn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.keyn div{background:var(--card);padding:14px 16px;border-radius:var(--r-md);box-shadow:var(--sh)}
.keyn span{font-size:14.5px;color:var(--sub);font-weight:700}
.keyn b{display:block;font-size:30px;font-weight:900;letter-spacing:-.04em;margin-top:2px;line-height:1.2}
.keyn b small{font-size:15px;font-weight:700;color:var(--sub);margin-left:3px;letter-spacing:0}
.keyn b.na{font-size:16px;color:var(--warn);font-weight:800;padding:7px 0}
.keyn em{display:block;font-style:normal;font-size:13px;color:var(--sub);font-weight:700;margin-top:2px}
.basisnote{font-size:13.5px;color:var(--sub);margin:8px 4px 0;line-height:1.55}
details.more{margin-top:12px;background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh)}
details.more summary{list-style:none;min-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-weight:800;font-size:16px;cursor:pointer}
details.more summary::-webkit-details-marker{display:none}
details.more summary:after,details.raw summary:after{content:'';width:8px;height:8px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(45deg);transition:transform var(--t)}
details.more[open] summary:after,details.raw[open] summary:after{transform:rotate(-135deg)}
details.more .in{padding:0 18px 16px;font-size:14.5px;color:var(--ink2);line-height:1.6}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.kv:last-of-type{border-bottom:0}
.crit{display:flex;gap:8px;flex-wrap:wrap}
.alts{list-style:none;margin-top:12px;background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.alts li{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.alts li:last-child{border-bottom:0}
.alts .tx{flex:1;min-width:0}
.alts .nm{font-weight:800;font-size:16px;line-height:1.35;letter-spacing:-.03em;word-break:keep-all;overflow-wrap:anywhere}
.alts small{display:block;color:var(--sub);font-size:13.5px}
.alts .v{font-size:15px;font-weight:800;margin-top:2px}
.alts .v em{font-style:normal;color:var(--teal-d);margin-left:6px}
.rpcta{width:100%;display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r-md);padding:14px 16px;margin-top:12px;text-align:left;min-height:64px;box-shadow:var(--sh)}
.rpcta>svg:first-child{color:var(--teal-d)}
.rpcta span{flex:1;display:flex;flex-direction:column}.rpcta b{font-size:16px;font-weight:800}.rpcta small{font-size:13.5px;color:var(--sub)}
.rpcta .chev{color:var(--mute)}

/* 원재료·알레르기 */
.alg,.algc{background:var(--card);border-radius:var(--r-lg);padding:16px;margin-top:12px;box-shadow:var(--sh)}
.alg.bad{background:var(--red-bg);box-shadow:0 0 0 2px #f2b8b1 inset}
.alg-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.alg-h img{width:34px;height:34px}
.alg-h b{flex:1;font-size:17px;font-weight:900;letter-spacing:-.03em;line-height:1.3;word-break:keep-all}
.alg.bad .alg-h b{color:var(--red)}
.algs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.algs span{font-size:14px;font-weight:800;background:var(--fill);color:var(--ink2);border-radius:99px;padding:6px 12px}
.algs span.on{background:var(--red);color:#fff}
details.raw{margin-top:6px;border-top:1px solid var(--line)}
details.raw summary{list-style:none;min-height:44px;display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14.5px;cursor:pointer;color:var(--ink2)}
details.raw summary::-webkit-details-marker{display:none}
details.raw p{font-size:14px;color:var(--ink2);line-height:1.65;padding-bottom:4px;word-break:keep-all}
.algc .ac{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink2)}
.algc .ac i{font-style:normal;width:26px;height:26px;border-radius:8px;background:var(--ink);color:#fff;font-weight:900;font-size:13px;display:grid;place-items:center;flex-shrink:0}
.algc .ac+.ac i{background:var(--teal-d)}
.algc .ac.bad{color:var(--red)}
.algc .ac.bad b{font-weight:900}
.algpick{margin:6px 0 10px}

/* 회수 */
.recall{margin-top:12px;background:var(--red-bg);border-radius:var(--r-lg);padding:16px;color:#8a1f12}
.recall b{font-size:17px;font-weight:900;display:block;letter-spacing:-.03em}.recall p{font-size:14px;margin-top:4px;line-height:1.5}
.recall .rc{margin-top:10px;background:#fff;border-radius:var(--r-sm);padding:12px 14px;color:var(--ink)}
.recall .rc strong{font-size:15.5px;font-weight:800}.recall .rc em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--red);margin-left:4px}
.recall .rc small{display:block;font-size:13.5px;color:var(--ink2);margin-top:2px;line-height:1.45}
.recall .link{color:#8a1f12}

/* ───── 비교 ───── */
.pair2{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.pr2{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r-lg);padding:12px 12px 12px 14px;position:relative;min-height:84px;width:100%;text-align:left;box-shadow:var(--sh)}
.pr2 .ph{width:60px;height:60px}
.pr2 .tag{width:30px;height:30px;border-radius:10px;background:var(--ink);color:#fff;font-weight:900;font-size:15px;display:grid;place-items:center;flex-shrink:0}
.pr2.b .tag{background:var(--teal-d)}
.pr2 .tx{flex:1;min-width:0}
.pr2 .nm{font-size:16px;font-weight:800;line-height:1.3;letter-spacing:-.03em;word-break:keep-all;overflow-wrap:anywhere}
.pr2 .w{font-size:14px;color:var(--ink2);margin-top:2px;font-weight:600}
.pr2 .cred{font-size:12.5px;color:var(--sub);min-height:24px;display:inline-flex;align-items:center}
.pr2 .rm{width:40px;height:40px;display:grid;place-items:center;color:var(--mute);flex-shrink:0;border-radius:50%}
.pr2 .rm svg{width:18px;height:18px}
.pr2.empty{border:2px dashed #cdd3dc;background:transparent;color:var(--ink2);box-shadow:none}
.pr2.empty b{flex:1;font-size:17px;font-weight:800}
.summary{margin-top:14px;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:20px 18px;box-shadow:0 10px 24px rgba(17,26,46,.2)}
.summary p{font-size:14px;color:rgba(255,255,255,.78);font-weight:700}
.summary h2{font-size:25px;font-weight:900;letter-spacing:-.045em;line-height:1.32;margin-top:6px;word-break:keep-all;transition:opacity var(--t)}
.summary h2 em{font-style:normal;color:#6fe3d4}
.summary ul{list-style:none;margin-top:10px;border-top:1px solid rgba(255,255,255,.14);padding-top:8px}
.summary li{font-size:15px;color:rgba(255,255,255,.9);padding:3px 0;font-weight:600}
.summary .gap{font-size:14px;color:#ffd08a;margin-top:8px;font-weight:700}
.summary.block{background:var(--warn-bg);color:var(--warn);box-shadow:none}.summary.block p,.summary.block h2{color:var(--warn)}
.summary.ask2{background:var(--card);color:var(--ink);box-shadow:0 0 0 2px var(--teal) inset}
.summary.ask2 p,.summary.ask2 .hint{color:var(--sub)}
.summary.ask2 h2{font-size:22px;color:var(--ink)}
.bars{margin-top:12px;background:var(--card);border-radius:var(--r-lg);padding:8px 16px;box-shadow:var(--sh)}
.bar{padding:14px 0;border-bottom:1px solid var(--line)}
.bar:last-child{border-bottom:0}
.bar .lb{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;font-weight:800}
.bar .lb small{font-size:13px;color:var(--sub);font-weight:700}
.bar.sel .lb span{color:var(--teal-d)}
.bar .ln{display:grid;grid-template-columns:24px 1fr minmax(68px,auto);gap:10px;align-items:center;margin-top:8px}
.bar .ln i{font-style:normal;font-weight:900;font-size:13px;color:var(--sub);text-align:center}
.bar .tr{height:12px;background:var(--fill);border-radius:99px;overflow:hidden}
.bar .fl{height:100%;border-radius:99px;background:#b3bac7;width:0;transition:width 420ms var(--ease),background-color var(--t)}
.bar.sel .fl.a{background:var(--ink)}.bar.sel .fl.b{background:var(--mint)}
.bar .v{text-align:right;font-weight:900;font-size:16px;letter-spacing:-.02em}
.bar .v.na{color:var(--warn);font-size:13.5px;font-weight:800}
#bars .bar{border-bottom:0}
#bars .bar .tr{height:18px}
#bars .bar .v{font-size:20px}
.bars.in{margin-top:0;padding:0 0 4px;box-shadow:none}
details.more .bars.in{background:transparent}
.amt{display:flex;gap:8px;align-items:center;margin-top:10px}
.amt input{flex:1;min-width:0;height:52px;border-radius:var(--r-sm);border:1.5px solid var(--line);padding:0 14px;font-size:17px;font-weight:700;background:var(--card)}
.amt span{font-weight:800}
.price{margin-top:12px;background:var(--card);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh)}
.price h4{font-size:17px;font-weight:900;letter-spacing:-.03em}
.price .pr{display:flex;gap:8px;margin-top:10px}
.price input{flex:1;min-width:0;height:52px;border-radius:var(--r-sm);border:1.5px solid var(--line);padding:0 14px;font-size:17px;font-weight:700}
.price .res{margin-top:10px;font-size:15.5px;font-weight:800}
.src{font-size:13.5px;color:var(--sub);margin:16px 4px 0;line-height:1.6}
.src a{color:var(--sub)}

/* 진행 */
.prog{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r-md);padding:14px 16px;margin-top:8px;width:100%;text-align:left;min-height:62px;box-shadow:var(--sh)}
.prog .step{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-weight:900;font-size:14px;display:grid;place-items:center;flex-shrink:0}
.prog .step.done{background:var(--teal)}.prog .step svg{width:16px;height:16px}
.prog b{font-size:16.5px;font-weight:800;letter-spacing:-.03em;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.prog .tx{flex:1;min-width:0}.prog small{display:block;font-size:13px;color:var(--sub);font-weight:700}
.prog.on{box-shadow:0 0 0 2px var(--teal) inset,var(--sh)}
.prog .chev{color:var(--mute)}

/* 저장·구매·기록 */
.sv{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:var(--r-lg);padding:14px 16px;margin-top:10px;width:100%;text-align:left;min-height:76px;box-shadow:var(--sh)}
.sv .tx{flex:1;min-width:0;font-size:16px;font-weight:800;letter-spacing:-.03em;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.sv small{display:block;color:var(--sub);font-weight:600;font-size:13.5px}
.buyc{background:var(--card);border-radius:var(--r-lg);padding:16px;margin-top:10px;box-shadow:var(--sh)}
.buyc .hd2{display:flex;gap:10px;align-items:center}
.buyc .hd2 b{font-size:16px;font-weight:800;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.buyl{display:flex;justify-content:space-between;align-items:center;margin-top:10px;min-height:54px;border-radius:var(--r-sm);background:var(--fill);padding:10px 16px;font-weight:800;font-size:15.5px;color:var(--ink);text-decoration:none}
.buyl.product{background:var(--teal-bg);color:var(--teal-d)}
.buyl i{font-style:normal;font-size:13px;color:var(--sub);font-weight:700;flex-shrink:0;margin-left:8px}
.nolink{margin-top:10px;font-size:14.5px;color:var(--sub);background:var(--fill);border-radius:var(--r-sm);padding:12px 14px;line-height:1.5}
.disc{font-size:13.5px;color:var(--sub);line-height:1.6;margin-top:14px}
.daynav{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-radius:var(--r-md);padding:4px;margin-top:2px;box-shadow:var(--sh)}
.daynav b{font-size:18px;font-weight:900;letter-spacing:-.03em}.daynav .ic:disabled{opacity:.3}
.logrow{cursor:default}.logrow .rm{width:44px;height:44px;display:grid;place-items:center;color:var(--mute);flex-shrink:0}.logrow .rm svg{width:18px;height:18px}

/* 입력 */
.form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:800;color:var(--ink2);flex:1;min-width:0}
.form input,.form select{height:54px;border-radius:var(--r-sm);border:1.5px solid var(--line);padding:0 14px;font-size:17px;background:var(--card);font-weight:600}

/* 하단: 주요 행동 + 떠 있는 메뉴 */
.actionbar{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:520px;bottom:calc(var(--tab) + var(--tabgap) + var(--sb));padding:12px 16px 10px;background:linear-gradient(to top,var(--bg) 72%,rgba(242,244,246,0));z-index:15;display:flex;gap:8px}
.actionbar>*{flex:1}
.actionbar .btn.ghost{flex:0 0 auto;padding:0 18px}
.tabbar{position:fixed;left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:492px;bottom:calc(var(--tabgap) + var(--sb));height:var(--tab);border-radius:99px;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 10px 30px rgba(17,26,46,.16),0 0 0 1px rgba(17,26,46,.06);display:flex;padding:6px;z-index:16}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:12.5px;font-weight:800;color:var(--mute);position:relative;min-height:44px;border-radius:99px;letter-spacing:-.02em}
.tabbar button svg{width:24px;height:24px}
.tabbar button.on{color:var(--ink);background:#e9ecf0}
.tabbar .cnt{position:absolute;top:4px;left:calc(50% + 8px);min-width:20px;height:20px;border-radius:10px;background:var(--red);color:#fff;font-style:normal;font-size:12px;font-weight:900;display:grid;place-items:center;padding:0 5px}
.cnt.bump{animation:bump 260ms var(--ease)}
@keyframes bump{50%{transform:scale(1.3)}}

/* 카메라 */
.cam{position:fixed;inset:0;background:#000;z-index:30}
.cam video{width:100%;height:100%;object-fit:cover}
.frame{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.frame i{width:78%;max-width:340px;aspect-ratio:1.6;border-radius:24px;box-shadow:0 0 0 2000px rgba(0,0,0,.5);border:3px solid #fff}
.camtop{position:absolute;top:0;left:0;right:0;padding:calc(var(--st) + 10px) 10px 10px 20px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:800;font-size:16.5px;gap:10px}
.cambot{position:absolute;bottom:0;left:0;right:0;padding:16px 16px calc(18px + var(--sb));display:flex;flex-direction:column;gap:10px}
.cambot.nocam{top:90px;justify-content:flex-start}
.cam.off .frame,.cam.off video{display:none}
.codebox{display:flex;gap:8px}
.codebox input{flex:1;min-width:0;height:56px;border-radius:var(--r-md);border:0;padding:0 16px;font-size:17px;background:rgba(255,255,255,.16);color:#fff}
.codebox input::placeholder{color:rgba(255,255,255,.72)}
.codebox button{height:56px;padding:0 22px;border-radius:var(--r-md);background:#fff;color:var(--ink);font-weight:900}
.camfail{color:#fff;font-size:16px;line-height:1.6;background:rgba(255,255,255,.1);border-radius:var(--r-md);padding:16px}
.camfail b{display:block;font-size:18px;margin-bottom:4px}

/* 아래에서 올라오는 창 */
.sheet{position:fixed;inset:0;background:rgba(17,26,46,.42);z-index:35;display:flex;align-items:flex-end;justify-content:center;animation:fade var(--t) var(--ease)}
@keyframes fade{from{opacity:0}}
.sheetbox{background:var(--bg);width:100%;max-width:520px;border-radius:28px 28px 0 0;padding:10px 18px calc(20px + var(--sb));display:flex;flex-direction:column;gap:10px;max-height:92vh;overflow:auto;animation:up 260ms var(--ease)}
@keyframes up{from{transform:translateY(40px)}}
.sheetbox .grab{width:40px;height:5px;border-radius:3px;background:#cdd3dc;margin:0 auto 6px}
.sheetbox h3{font-size:22px;font-weight:900;letter-spacing:-.04em;margin-top:6px}
.sheetbox .row{background:var(--card);border-radius:var(--r-md)}
.sheetbox.zoom img{width:100%;max-height:70vh;object-fit:contain;background:#fff;border-radius:var(--r-md)}
.rpgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rpslot{aspect-ratio:1/1;border:2px dashed #cdd3dc;border-radius:var(--r-md);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:800;color:var(--ink2);overflow:hidden;position:relative;padding:6px;text-align:center}
.rpslot.on{border-style:solid;border-color:var(--teal-d)}
.rpslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rpslot.on span{position:relative;background:rgba(17,26,46,.75);color:#fff;border-radius:8px;padding:4px 8px;font-size:13px}
.rpwhy{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:800;color:var(--ink2)}
.rpwhy textarea{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;font:inherit;font-size:16px;resize:none;background:var(--card)}
.rpok{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink2);line-height:1.5;min-height:44px}
.rpok input{width:22px;height:22px;flex-shrink:0;margin-top:1px;accent-color:var(--teal-d)}
.shimg{margin:6px 0;border-radius:var(--r-md);overflow:hidden;background:var(--fill);max-height:240px;display:grid;place-items:center}.shimg img{max-width:100%;max-height:240px;object-fit:contain}

.toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--st) + 12px);background:var(--ink);color:#fff;padding:13px 20px;border-radius:99px;font-size:15px;font-weight:700;z-index:40;max-width:calc(100% - 32px);text-align:center;animation:in var(--t) var(--ease);box-shadow:0 10px 24px rgba(17,26,46,.25)}
.toast .undo{color:#7fe0d5;font-weight:900;margin-left:8px;min-height:32px;text-decoration:underline}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media (max-width:360px){.hero-t{font-size:28px}.cat img{width:54px;height:54px}.cat span{font-size:14px}.tile b{font-size:15px}.keyn b{font-size:26px}}
/* 검색 중에는 소개를 줄여 결과를 바로 보이게 */
.home.q .hero{padding-bottom:52px}
.home.q .hero-t,.home.q .hero-s,.home.q .scanbtn{display:none}
.home.q .paper{margin-top:-36px}
/* 비교 카드: A·B 표시를 사진 모서리로 → 이름 자리 넓히기 */
.pr2{padding-left:12px}
.pr2 .tag{position:absolute;left:6px;top:6px;width:26px;height:26px;font-size:13.5px;border-radius:9px;box-shadow:0 0 0 2px #fff;z-index:1}
.pr2 .mini{padding:0 12px;min-height:36px;font-size:13.5px}
.pr2 .rm{width:36px;height:36px;margin-left:-4px}
.pr2.empty .tag{position:static;box-shadow:none}
.algbad{display:inline-flex;margin-top:4px;font-size:12.5px;font-weight:900;color:#fff;background:var(--red);border-radius:99px;padding:3px 9px}
.state.empty{background:var(--card);border-radius:var(--r-lg);padding:28px 20px 20px;margin-top:12px;text-align:center;box-shadow:var(--sh);word-break:keep-all}
.state.empty img{width:76px;height:76px;margin:0 auto 10px;filter:drop-shadow(0 8px 10px rgba(17,26,46,.12))}
.state.empty b{font-size:19px;font-weight:900;letter-spacing:-.03em}
.state.empty .acts .btn{background:var(--ink);color:#fff;border:0}

/* v23: 움직이는 바코드 스캐너 (GIF 대신 CSS — 선명하고 가볍게) */
.hero{padding-bottom:70px;text-align:center}
.hero .hd{text-align:left}
.hero-t{font-size:26px;margin-top:10px}
.hero-s{font-size:15.5px;margin-top:4px}
.stage{position:relative;display:block;width:min(78%,300px);aspect-ratio:1.25;margin:20px auto 0;border-radius:22px}
.stage .cn{position:absolute;width:38px;height:38px;border:4px solid #fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))}
.stage .tl{left:0;top:0;border-right:0;border-bottom:0;border-radius:18px 0 0 0}
.stage .tr{right:0;top:0;border-left:0;border-bottom:0;border-radius:0 18px 0 0}
.stage .bl{left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 18px}
.stage .br{right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 18px 0}
.pk{position:absolute;left:50%;top:50%;width:62%;height:64%;transform:translate(-50%,-50%) rotate(-3deg);background:#fff;border-radius:14px;box-shadow:0 12px 26px rgba(3,50,45,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;animation:bob 3.2s ease-in-out infinite}
.pk-face{display:flex;gap:9px;align-items:center;position:relative;height:16px}
.pk-face i{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.pk-face b{position:absolute;left:50%;top:9px;width:16px;height:8px;border:2.6px solid var(--ink);border-top:0;border-radius:0 0 10px 10px;transform:translateX(-50%)}
.pk .bars{display:flex;gap:3px;height:42%;align-items:stretch}
.pk .bars i{width:3px;background:var(--ink);border-radius:1px}
.pk .bars i:nth-child(3n){width:5px}.pk .bars i:nth-child(4n+1){width:2px}
.pk-num{font-size:12px;font-weight:800;color:var(--ink2);letter-spacing:.06em}
.laser{position:absolute;left:8%;right:8%;height:3px;top:18%;border-radius:3px;background:#7dffe9;box-shadow:0 0 10px 3px rgba(125,255,233,.75),0 0 24px 6px rgba(125,255,233,.35);animation:sweep 2.4s ease-in-out infinite}
.ok{position:absolute;right:14%;top:12%;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--teal);display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,0,0,.2);opacity:0;transform:scale(.4);animation:pop 2.4s ease-in-out infinite}
.ok svg{width:20px;height:20px}
.stage-cap{font-size:14.5px;font-weight:700;opacity:.9;margin-top:12px}
.shutter{display:inline-flex;align-items:center;gap:10px;margin-top:16px;background:#fff;color:var(--ink);font-weight:900;font-size:19px;letter-spacing:-.03em;border-radius:99px;padding:16px 30px;box-shadow:0 14px 30px rgba(3,50,45,.35);transition:transform 110ms var(--ease)}
.shutter:active{transform:scale(.96)}
.shutter svg{width:26px;height:26px;color:var(--teal)}
@keyframes sweep{0%,100%{top:16%}50%{top:82%}}
@keyframes pop{0%,40%{opacity:0;transform:scale(.4)}48%,62%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(.6)}}
@keyframes bob{0%,100%{transform:translate(-50%,-50%) rotate(-3deg)}50%{transform:translate(-50%,-53%) rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){.laser{top:50%}.ok{display:none}}
.home.q .stage,.home.q .stage-cap,.home.q .shutter{display:none}
/* 화장품·샴푸 */
.cosban{width:100%;display:flex;align-items:center;gap:12px;margin-top:18px;background:linear-gradient(120deg,#ffe8f1,#f3e9ff);border-radius:var(--r-md);padding:14px 16px;text-align:left;color:#5b2350;transition:transform 110ms var(--ease)}
.cosban:active{transform:scale(.97)}
.cosban img{width:52px;height:52px}
.cosban span{flex:1;display:flex;flex-direction:column;min-width:0}
.cosban b{font-size:17px;font-weight:900;letter-spacing:-.04em}.cosban small{font-size:13px;font-weight:700;opacity:.8;word-break:keep-all}
.cosban .chev{color:#8a4a7d}
.cosintro{display:flex;gap:12px;align-items:center;background:linear-gradient(120deg,#ffe8f1,#f3e9ff);border-radius:var(--r-lg);padding:16px;margin-top:6px;color:#5b2350}
.cosintro img{width:54px;height:54px}.cosintro p{font-size:13.5px;line-height:1.55;font-weight:600;word-break:keep-all}.cosintro b{display:block;font-size:16.5px;font-weight:900;letter-spacing:-.03em;margin-bottom:2px}
.cosph{background:#fbeef6}.cosph img{width:80%;height:80%;object-fit:contain;background:transparent}
.cosslot .tag{position:static!important}
.avset{margin-top:10px}
.ingrs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ingrs span{font-size:14px;font-weight:700;background:var(--card);border:1.5px solid var(--line);color:var(--ink2);border-radius:99px;padding:6px 12px}
.ingrs span.frag{border-color:#f0b35a;background:#fff6e8;color:#7a4a00}
.ingrs span.bad{background:var(--red);border-color:var(--red);color:#fff}
.ingrs em{font-style:normal;color:var(--sub);font-size:14px}
.cosres{background:var(--card);border-radius:var(--r-lg);padding:16px;margin-top:12px;box-shadow:var(--sh)}
.cosres h4{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:900;letter-spacing:-.03em;margin-bottom:6px}
.cosres h4 i{font-style:normal;width:26px;height:26px;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;display:grid;place-items:center}
.kv2{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.kv2 span{color:var(--sub);font-weight:700;flex-shrink:0}.kv2 b{text-align:right;font-weight:800;word-break:keep-all}.kv2 b.red{color:var(--red)}
.form textarea{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;font:inherit;font-size:16px;background:var(--card);resize:vertical}
.ocrbtn{display:flex;align-items:center;gap:12px;width:100%;background:var(--ink);color:#fff;border-radius:var(--r-md);padding:12px 16px;text-align:left;margin:4px 0}
.ocrbtn img{width:44px;height:44px}.ocrbtn span{display:flex;flex-direction:column}.ocrbtn b{font-size:17px;font-weight:900}.ocrbtn small{font-size:12.5px;opacity:.8}
.ocrst{position:relative;background:var(--card);border-radius:var(--r-sm);padding:14px;font-size:14.5px;font-weight:700;overflow:hidden}
.ocrst i{position:absolute;left:0;bottom:0;height:4px;background:var(--teal);transition:width .3s}
.ocrres{background:var(--card);border-radius:var(--r-md);padding:14px}
.ocrres b{font-size:16px;font-weight:900;display:block}.ocrres small{font-size:13px;color:var(--sub);display:block;margin-top:2px;line-height:1.5}
.ingrs span.fix{background:#e6f0ff;border-color:#9dbcf5;color:#1f4fa8}
.ingrs span.unk{background:#fff4d6;border-color:#f0c050;color:#6a4800}
.cropwrap{display:flex;flex-direction:column;gap:10px}
.cropwrap .hint b{color:var(--ink)}
.crop{position:relative;border-radius:var(--r-md);overflow:hidden;touch-action:none;user-select:none;background:#000}
.crop img{width:100%;display:block;pointer-events:none;opacity:.9}
.crop .sel{position:absolute;border:3px solid #7dffe9;border-radius:8px;box-shadow:0 0 0 2000px rgba(0,0,0,.45);pointer-events:none}
.adds{margin:4px 0 8px;padding:10px 12px;background:var(--fill);border-radius:var(--r-sm)}
.alg.bad .adds{background:rgba(255,255,255,.7)}
.adds-h{font-size:14.5px;font-weight:700;color:var(--ink2)}.adds-h b{font-weight:900;color:var(--ink)}
.add{display:flex;gap:8px;font-size:14px;line-height:1.5;margin-top:4px;color:var(--ink2);word-break:keep-all}
.add span{flex-shrink:0;font-size:12.5px;font-weight:800;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:1px 8px;height:fit-content;color:var(--ink)}
.addc{border-top:1px solid var(--line);padding-top:10px;margin-top:4px}.addc>p:first-child{font-size:15px}
.rank{background:var(--card);border-radius:var(--r-lg);padding:16px;margin-top:12px;box-shadow:var(--sh)}
.rk{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.rk-l{font-size:14.5px;font-weight:800;color:var(--ink2)}
.rk-t{position:relative;height:8px;border-radius:99px;background:linear-gradient(90deg,#bfe9e2,#eef1f4 50%,#f6d6d2)}
.rk-t i{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transform:translate(-50%,-50%)}
.rk-v{font-size:13.5px;font-weight:800;color:var(--ink2);text-align:right;white-space:nowrap}
.rk-v.good{color:var(--teal-d)}.rk-v.low{color:#b0452f}
.cosban.foodban,.cosintro.food{background:linear-gradient(120deg,#e3f6ef,#e8f0ff);color:#0f4a43}
.cosban.foodban .chev{color:#2c6b62}
.foodban{margin-top:8px}
.tiles{grid-template-columns:1fr 1fr}
.tile{min-height:104px}
.tile.rose{background:#ffe6ea;color:#7a1f35}
.gl{margin-top:12px}.gl .chip small{font-size:12px;color:var(--mute);margin-left:4px;font-weight:700}
.rnum{width:26px;text-align:center;font-size:16px;font-weight:900;color:var(--mute);flex-shrink:0}
.rnum.top{color:var(--teal-d)}
.gradec{background:var(--card);border-radius:var(--r-lg);padding:16px;margin-top:12px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:14px}
.ngrade{display:flex;gap:14px;align-items:center}
.gl5{display:flex;gap:3px;flex-shrink:0}
.gl5 i{font-style:normal;width:26px;height:34px;border-radius:7px;display:grid;place-items:center;font-weight:900;font-size:14px;color:#fff;opacity:.35}
.gl5 i.on{opacity:1;transform:scale(1.18);box-shadow:0 3px 8px rgba(0,0,0,.18)}
.gA{background:#1f8a4c}.gB{background:#7ab648}.gC{background:#e8b923;color:#4a3800!important}.gD{background:#e67c22}.gE{background:#d6402c}
.ngrade p{font-size:13px;color:var(--sub);line-height:1.45}.ngrade b{display:block;font-size:17px;font-weight:900;color:var(--ink);letter-spacing:-.03em}.ngrade small{display:block;margin-top:2px}
.kids{border-top:1px solid var(--line);padding-top:12px}
.kids-h{font-size:13px;color:var(--sub)}.kids-h b{font-size:16px;font-weight:900;color:var(--ink);margin-right:6px}
.kl{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.kl span{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--fill);border-radius:var(--r-sm);padding:10px 4px;font-size:12.5px;font-weight:800;color:var(--ink2)}
.kl span i{width:16px;height:16px;border-radius:50%;background:#c9ced6}
.kl .low i{background:#3aa655}.kl .mid i{background:#f2b51b}.kl .high i{background:#e0442f}
.kl b{font-size:14px;font-weight:900;color:var(--ink)}.kl small{font-size:11.5px;color:var(--sub)}
.hint .red{color:var(--red);font-weight:900}
.add .an{flex:1;font-style:normal}
.aname{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:#c6ccd6;text-underline-offset:3px;min-height:28px}
.addl{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.adi{background:var(--card);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--sh)}
.adi b{font-size:17px;font-weight:900;letter-spacing:-.03em}.adi small{display:block;color:var(--sub);font-size:13px;margin-top:1px}
.adi p{display:flex;gap:8px;font-size:14px;line-height:1.55;margin-top:8px;color:var(--ink2);word-break:keep-all}
.adi p span{flex-shrink:0;font-size:12.5px;font-weight:800;background:var(--teal-bg);color:var(--teal-d);border-radius:99px;padding:1px 9px;height:fit-content}
.more3{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.more3 button{background:var(--card);border-radius:var(--r-md);padding:12px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:var(--sh);transition:transform 110ms var(--ease)}
.more3 button:active{transform:scale(.95)}
.more3 img{width:40px;height:40px;margin-bottom:2px}.more3 b{font-size:14.5px;font-weight:900;letter-spacing:-.03em}.more3 small{font-size:11.5px;color:var(--sub);font-weight:700}
.hlic{background:#f1f3f6}.hlic img{width:70%;height:70%;object-fit:contain;background:transparent}
.hlsheet{gap:6px}.hlimg{width:100%;max-height:180px;object-fit:contain;background:#fff;border-radius:var(--r-md)}
.hlp{background:var(--card);border-radius:var(--r-md);padding:12px 14px}
.hlp b{font-size:14.5px;font-weight:900}.hlp p{font-size:14.5px;line-height:1.6;color:var(--ink2);margin-top:4px;word-break:keep-all}
.hlp.warn{background:var(--red-bg)}.hlp.warn b{color:var(--red)}
.hlp .amt{display:flex;gap:8px}.hlp .amt span{font-weight:800;color:var(--ink);flex-shrink:0;max-width:55%}
.supcmp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--teal-bg);border-radius:var(--r-md);padding:10px 12px;margin-top:10px}
.supcmp b{font-size:14px;font-weight:900;color:var(--teal-d);margin-right:4px}
.supcmp span{background:#fff;border-radius:99px;padding:4px 4px 4px 12px;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:2px;max-width:100%}
.supcmp span button{width:28px;height:28px;font-size:16px;color:var(--mute)}
.stab{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border-radius:var(--r-md);overflow:hidden;font-size:13.5px;table-layout:fixed}
.stab th,.stab td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;word-break:keep-all;overflow-wrap:anywhere;line-height:1.45}
.stab thead th{background:var(--ink);color:#fff;font-size:13px}.stab tbody th{width:28%;color:var(--sub);font-weight:800}
.more3{grid-template-columns:repeat(3,1fr)}
.medrow .mchk{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:900;color:#fff;flex-shrink:0}
.medrow.on .mchk{background:var(--teal);border-color:var(--teal)}.medrow.on .nm{text-decoration:line-through;color:var(--mute)}
.mnl{margin-top:4px}
.mncard{background:var(--card);border-radius:var(--r-md);padding:14px 16px;margin-top:10px;box-shadow:var(--sh)}
.mnk{font-size:14px;color:var(--sub);font-weight:700}.mnk small{font-weight:600;margin-left:4px}
.mncard b{display:block;font-size:19px;font-weight:900;letter-spacing:-.02em;margin-top:2px;line-height:1.3}
.mncard p:not(.mnk){font-size:14.5px;line-height:1.55;color:var(--ink2);margin-top:6px}
.hdr{display:flex;gap:6px}.hdbtn.lng{padding:0 12px;font-size:18px}

.readbox{background:#fff;border-radius:18px;padding:16px;margin:4px 0 14px;box-shadow:0 0 0 1px rgba(17,26,46,.06)}
.readbox b{font-size:16px}
.readbox .hint{margin:6px 0 10px}
.misscode small{display:block;color:var(--mute);font-weight:700;margin-bottom:4px}
.misscode .row2{margin-top:6px}
.misscode .inl{margin-top:12px}

/* v46: 힉스필드 고정 그림 — 첫 화면·빈 화면·오류 (캐릭터: 웃는 흰 라벨) */
.stage.art{aspect-ratio:auto;width:min(96%,400px);margin:14px auto 0;background:none}
.stage.art img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(3,50,45,.28));animation:floaty 3.6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ill{display:block;height:auto;margin:0 auto 12px;max-width:100%}
.state.empty img.ill{width:150px;height:auto;filter:none}
.misscode .ill{width:96px;float:right;margin:-4px 0 6px 10px}
.cmp-ill{margin:6px 0 4px}.cmp-ill .ill{width:min(260px,80%)}
@media (prefers-reduced-motion:reduce){.stage.art img{animation:none}}

/* v47: 움직이는 첫 화면 — 바코드 빛이 폰으로 → 화면 스캔 → 라벨이 튀어나와 손 흔들기 → 결과 배지 (4.8초 반복) */
.stage.anim{aspect-ratio:1.5;width:min(100%,420px);margin:10px auto 0;background:none;--T:4.8s}
.stage.anim>*{position:absolute;animation-duration:var(--T);animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.sc-scene{left:0;top:4%;width:68%;height:auto;filter:drop-shadow(0 16px 20px rgba(3,50,45,.3))}
/* 폰 화면 위치(그림 기준 x 67~85%, y 15~81%) */
.sc-scr{left:calc(68% * .675);top:calc(4% + 68% * 1.5 / 1.2237 * .155);width:calc(68% * .17);height:calc(68% * 1.5 / 1.2237 * .64);border-radius:6px;overflow:hidden;transform:skewY(-4deg);animation-name:scrflash}
.sc-laser{position:absolute;left:4%;right:4%;height:3px;border-radius:3px;background:#2ee6c9;box-shadow:0 0 8px 2px rgba(46,230,201,.8);animation:sclaser var(--T) ease-in-out infinite}
.sc-dot{left:24%;top:64%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:radial-gradient(circle,#c9fff5 0,#2ee6c9 45%,rgba(46,230,201,0) 72%);animation-name:scdot}
.sc-label{left:58%;top:2%;width:30%;height:auto;transform-origin:30% 90%;filter:drop-shadow(0 12px 14px rgba(3,50,45,.32));animation-name:sclabel}
.sc-badge{right:0;display:flex;align-items:center;gap:6px;background:#fff;color:var(--ink);font-size:13.5px;font-weight:900;letter-spacing:-.02em;padding:7px 12px 7px 9px;border-radius:99px;box-shadow:0 8px 16px rgba(3,50,45,.28);white-space:nowrap}
.sc-badge i{width:16px;height:14px;background:linear-gradient(90deg,var(--mint) 0 4px,transparent 4px 6px,var(--mint) 6px 10px,transparent 10px 12px,var(--teal) 12px 16px);clip-path:polygon(0 60%,4px 60%,4px 100%,6px 100%,6px 30%,10px 30%,10px 100%,12px 100%,12px 0,16px 0,16px 100%,0 100%)}
.sc-badge.b1{top:56%;animation-name:scb1}.sc-badge.b2{top:74%;animation-name:scb2}
.sc-badge.b2 i{background:var(--teal)}
@keyframes scdot{0%{opacity:0;transform:scale(.4)}6%{opacity:1;transform:scale(1)}20%{left:24%;top:64%;opacity:1}30%{left:52%;top:46%;opacity:1;transform:scale(1.4)}34%,100%{left:52%;top:46%;opacity:0;transform:scale(.4)}}
@keyframes scrflash{0%,28%{background:rgba(46,230,201,0)}33%{background:rgba(46,230,201,.55)}42%,100%{background:rgba(46,230,201,0)}}
@keyframes sclaser{0%,22%{top:6%;opacity:0}24%{opacity:1}36%{top:90%;opacity:1}38%,100%{top:90%;opacity:0}}
@keyframes sclabel{0%,34%{opacity:0;transform:translate(-62%,48%) scale(.25) rotate(-10deg)}44%{opacity:1;transform:translate(0,-6%) scale(1.06) rotate(4deg)}50%{transform:translate(0,0) scale(1) rotate(-3deg)}56%{transform:rotate(5deg)}62%{transform:rotate(-4deg)}68%{transform:rotate(4deg)}74%,86%{opacity:1;transform:rotate(0)}94%,100%{opacity:0;transform:translateY(-6%) scale(.92)}}
@keyframes scb1{0%,50%{opacity:0;transform:translateX(14px) scale(.6)}56%{opacity:1;transform:translateX(0) scale(1.08)}60%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.9)}}
@keyframes scb2{0%,58%{opacity:0;transform:translateX(14px) scale(.6)}64%{opacity:1;transform:translateX(0) scale(1.08)}68%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.9)}}
/* 크고 움직이는 바코드 찍기 버튼 */
.shutter.big{display:flex;width:min(100%,360px);margin:14px auto 0;padding:12px 22px 12px 12px;gap:14px;border-radius:24px;text-align:left;position:relative;isolation:isolate;animation:shbreath 2.4s ease-in-out infinite}
.shutter.big:before{content:'';position:absolute;inset:0;border-radius:inherit;border:3px solid rgba(255,255,255,.75);z-index:-1;animation:shring 2.4s ease-out infinite}
.sh-ic{position:relative;width:58px;height:58px;border-radius:18px;background:var(--teal);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.shutter.big .sh-ic svg{width:34px;height:34px;color:#fff}
.sh-ic i{position:absolute;left:8px;right:8px;height:3px;border-radius:2px;background:#9dfff0;box-shadow:0 0 8px 2px rgba(157,255,240,.9);animation:shlaser 1.6s ease-in-out infinite}
.sh-tx{display:flex;flex-direction:column;min-width:0}
.sh-tx b{font-size:24px;font-weight:900;letter-spacing:-.04em;line-height:1.2}
.sh-tx small{font-size:14px;font-weight:700;color:var(--sub);margin-top:2px}
@keyframes shbreath{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes shring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.18,1.5);opacity:0}}
@keyframes shlaser{0%,100%{top:10px}50%{top:45px}}
.shutter.big:active{animation:none;transform:scale(.96)}
/* 「동작 줄이기」가 켜진 폰: 움직임(이동·확대·흔들기) 대신 나타났다 사라지기로 같은 장면을 보여 준다 */
@media (prefers-reduced-motion:reduce){
  .stage.anim>*{animation-duration:var(--T)!important;animation-iteration-count:infinite!important;animation-timing-function:ease-in-out!important}
  .sh-ic i{animation:shlaser 1.6s ease-in-out infinite!important}
  .sc-label{animation-name:rmlabel!important}.sc-badge.b1{animation-name:rmb1!important}.sc-badge.b2{animation-name:rmb2!important}
  .sc-dot{animation-name:rmdot!important;left:52%;top:46%}.sc-laser{animation:rmlaser var(--T) ease-in-out infinite!important;top:48%}
  .shutter.big,.shutter.big:before{animation:none!important}
}
@keyframes rmdot{0%,10%{opacity:0}18%,28%{opacity:1}34%,100%{opacity:0}}
@keyframes rmlaser{0%,22%{opacity:0}26%,36%{opacity:1}40%,100%{opacity:0}}
@keyframes rmlabel{0%,36%{opacity:0}46%,86%{opacity:1}94%,100%{opacity:0}}
@keyframes rmb1{0%,52%{opacity:0}58%,86%{opacity:1}94%,100%{opacity:0}}
@keyframes rmb2{0%,60%{opacity:0}66%,86%{opacity:1}94%,100%{opacity:0}}

/* v49: 보라 테마(시안 4) — 청록은 청소업체 같다는 지적 */
:root{--teal:#6C4CF5;--teal-d:#5435D6;--teal-bg:#EEEAFF;--mint:#8F74FF;--lime:#FFE29A;--bg:#F5F3FF;--pu-sh:rgba(52,28,140,.22)}
.hero{background:linear-gradient(170deg,#F3F0FF 0%,#E9E2FF 100%);color:var(--ink)}
.hero:before{background:rgba(108,76,245,.08)}.hero:after{background:rgba(108,76,245,.06)}
.hero .logo{color:var(--ink)}
.hdbtn{background:rgba(108,76,245,.10);color:var(--ink)}
.hero-t{color:var(--ink)}.hero-t .pu{color:var(--teal)}
.hero-s{color:var(--sub);opacity:1}
.sc-scene{filter:drop-shadow(0 16px 20px var(--pu-sh))}
.sc-label{filter:drop-shadow(0 12px 14px var(--pu-sh))}
.sc-badge{box-shadow:0 8px 16px var(--pu-sh)}
.sc-badge i{background:var(--teal)}
.sc-laser{background:#8F74FF;box-shadow:0 0 8px 2px rgba(143,116,255,.85)}
.sc-dot{background:radial-gradient(circle,#fff 0,#8F74FF 45%,rgba(143,116,255,0) 72%)}
@keyframes scrflash{0%,28%{background:rgba(143,116,255,0)}33%{background:rgba(143,116,255,.45)}42%,100%{background:rgba(143,116,255,0)}}
/* 라벨: 한 번 등장한 뒤 사라지지 않고 머물며 둥실·손 흔들기 */
.stage.anim .sc-label{animation:scenter 1.6s ease-out .9s both,labelidle 3.2s ease-in-out 2.5s infinite}
.stage.anim .sc-badge.b1{animation:bin .5s ease-out 2.2s both,bfloat 3s ease-in-out 2.7s infinite}
.stage.anim .sc-badge.b2{animation:bin .5s ease-out 2.5s both,bfloat 3s ease-in-out 3.2s infinite}
.stage.anim .sc-dot{animation:scdot 4.8s ease-in-out infinite}
.stage.anim .sc-scr{animation:scrflash 4.8s ease-in-out infinite}
@keyframes scenter{0%{opacity:0;transform:translate(-62%,48%) scale(.25) rotate(-10deg)}55%{opacity:1;transform:translate(0,-6%) scale(1.06) rotate(4deg)}75%{transform:translate(0,0) scale(1) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes labelidle{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-5px) rotate(-4deg)}30%{transform:translateY(-5px) rotate(5deg)}40%{transform:translateY(-4px) rotate(-3deg)}55%{transform:translateY(-2px) rotate(0)}}
@keyframes bin{0%{opacity:0;transform:translateX(14px) scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes bfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.stage.anim .sc-label,.stage.anim .sc-badge{animation:fadein .6s ease-out 1s both!important}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* 크고 움직이는 보라 버튼(찍먹처럼): 빛이 지나가고, 테두리가 퍼지고, 아이콘 안 스캔선 */
.shutter.big{width:100%;max-width:440px;background:linear-gradient(135deg,#7A5CFF,#5B3DE8);color:#fff;padding:14px 18px 14px 14px;border-radius:26px;box-shadow:0 14px 28px rgba(91,61,232,.38);overflow:visible}
.shutter.big:before{border-color:rgba(108,76,245,.55)}
.shutter.big:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 48%,transparent 66%);background-size:250% 100%;animation:shshine 2.6s ease-in-out infinite;pointer-events:none}
.sh-ic{width:64px;height:64px;background:rgba(255,255,255,.18);border-radius:20px}
.shutter.big .sh-ic svg{width:38px;height:38px}
.sh-ic i{background:var(--lime);box-shadow:0 0 10px 2px rgba(255,226,154,.9)}
.sh-tx{flex:1}
.sh-tx b{font-size:27px;color:#fff}
.sh-tx small{color:rgba(255,255,255,.85);font-size:14.5px}
.sh-go{font-size:40px;font-weight:300;line-height:1;margin-right:4px;animation:shgo 1.2s ease-in-out infinite}
@keyframes shshine{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
@keyframes shgo{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.shutter.big:after,.sh-go{animation:none!important}}
/* 자동으로 넘어가는 소개 배너 */
.promo{margin:16px -18px 0;position:relative}
.pr-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 18px 4px;scrollbar-width:none;scroll-behavior:smooth}
.pr-track::-webkit-scrollbar{display:none}
.pr-s{flex:0 0 calc(100% - 36px);max-width:420px;scroll-snap-align:center;display:flex;gap:12px;align-items:center;text-align:left;background:#fff;border-radius:22px;padding:14px 16px;box-shadow:0 6px 18px rgba(52,28,140,.10)}
.pr-s img{width:54px;height:54px;flex-shrink:0}
.pr-s small{display:block;font-size:12.5px;font-weight:800;color:var(--teal)}
.pr-s b{display:block;font-size:17.5px;font-weight:900;letter-spacing:-.03em;color:var(--ink);margin-top:1px}
.pr-s p{font-size:13.5px;color:var(--sub);line-height:1.45;margin-top:3px;word-break:keep-all}
.pr-s.s2{background:#F6FFE0}.pr-s.s4{background:#FFF4EA}
.pr-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.pr-dots i{width:6px;height:6px;border-radius:3px;background:rgba(108,76,245,.25);transition:width .3s var(--ease),background .3s}
.pr-dots i.on{width:18px;background:var(--teal)}
.paper{margin-top:-24px}
.home.q .promo{display:none}

/* v52: 로고 A는 연보라 바탕 그대로 — 보라 머리말 줄·테두리 없음, 흰 글자는 라벨처럼 흰 입체 음영 */
.hero .hd .logo-img{height:40px;width:auto;display:block}
/* v51: 라벨이 폰을 들고 제품을 여러 방향에서 빠르게 찍는 장면 (4.8초 반복, 라벨은 늘 화면에 있음) */
.stage.scan2{position:relative;display:block;width:min(100%,400px);aspect-ratio:1.5;margin:8px auto 0;background:none}
.stage.scan2>*{position:absolute;animation-duration:4.8s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.s2-bag{left:6%;top:18%;width:30%;height:auto;filter:drop-shadow(0 14px 16px var(--pu-sh))}
.s2-ring{left:calc(6% + 30% * .54);top:calc(18% + 30% * 1.5 * 1.379 * .58);width:calc(30% * .23);height:calc(30% * 1.5 * 1.379 * .16);border:3px solid #8F74FF;border-radius:6px;box-shadow:0 0 12px 2px rgba(143,116,255,.7);animation-name:s2ring}
.s2-p1{width:46%;height:auto;left:24.2%;top:33%;filter:drop-shadow(0 10px 12px var(--pu-sh));animation-name:s2p1}
.s2-p2{width:42%;height:auto;left:31%;top:3%;filter:drop-shadow(0 10px 12px var(--pu-sh));animation-name:s2p2}
.stage.scan2 .sc-badge{right:0;animation:bin .5s ease-out 1.2s both,bfloat 3s ease-in-out 1.7s infinite}
.stage.scan2 .sc-badge.b1{top:34%}.stage.scan2 .sc-badge.b2{top:54%;animation-delay:1.5s,2s}
@keyframes s2p1{0%{left:24.2%;top:33%;opacity:1;transform:none}6%{transform:translate(2px,-3px) rotate(-2deg)}12%{transform:translate(-2px,2px) rotate(2deg)}18%{transform:none}20%{opacity:1;transform:scale(1)}22%{opacity:0;transform:scale(.8) translateY(-10%)}46%{opacity:0;left:27%;top:47%;transform:scale(.8)}49%{opacity:1;left:27%;top:47%;transform:scale(1.05)}52%{transform:none}58%{transform:translate(2px,-2px) rotate(2deg)}64%{transform:translate(-2px,2px) rotate(-2deg)}70%{left:27%;top:47%;transform:none}78%,100%{left:24.2%;top:33%;opacity:1;transform:none}}
@keyframes s2p2{0%,20%{opacity:0;transform:scale(.8) translateY(10%)}24%{opacity:1;transform:scale(1.06)}27%{transform:none}32%{transform:translate(3px,-2px) rotate(3deg)}38%{transform:translate(-2px,2px) rotate(-2deg)}43%{opacity:1;transform:none}46%,100%{opacity:0;transform:scale(.8) translateY(8%)}}
@keyframes s2ring{0%,4%{opacity:0;transform:scale(1.3)}9%{opacity:1;transform:scale(1)}15%{opacity:0}28%{opacity:0;transform:scale(1.3)}33%{opacity:1;transform:scale(1)}39%{opacity:0}52%{opacity:0;transform:scale(1.3)}57%{opacity:1;transform:scale(1)}63%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.stage.scan2>*{animation-duration:4.8s!important;animation-iteration-count:infinite!important}.s2-p1{animation-name:s2p1!important}.s2-p2{animation-name:s2p2!important}.s2-ring{animation-name:s2ring!important}.stage.scan2 .sc-badge{animation:fadein .6s ease-out 1s both!important}}
.home.q .stage.scan2{display:none}

/* v53: 제품 → 폰 순서로 나와 고정, 라벨만 카메라 들고 이쪽저쪽 「찰칵」, 배지는 하나씩 톡톡 */
.stage.s3{position:relative;display:block;width:min(100%,420px);aspect-ratio:1.5;margin:6px auto 0;background:none}
.stage.s3>*{position:absolute}
.s3-bag{left:3%;top:14%;width:30%;height:auto;filter:drop-shadow(0 14px 16px var(--pu-sh));animation:s3in1 .6s cubic-bezier(.2,.9,.3,1.2) .1s both}
.s3-phone{left:33%;top:3%;width:25%;height:auto;filter:drop-shadow(0 14px 16px var(--pu-sh));animation:s3in2 .6s cubic-bezier(.2,.9,.3,1.2) .55s both}
@keyframes s3in1{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
@keyframes s3in2{from{opacity:0;transform:translate(30px,-10px) rotate(8deg) scale(.9)}to{opacity:1;transform:none}}
/* 라벨 위치 이동(겉) + 등장·찰칵 몸짓(안) */
.s3-lb{left:62%;top:0;width:30%;animation:s3pop .5s cubic-bezier(.2,.9,.3,1.3) 1s both,s3move 6.4s ease-in-out 1.6s infinite}
.s3-in{display:block;position:relative;animation:s3snap 1.6s ease-in-out 1.6s infinite}
.s3-label{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 14px var(--pu-sh))}
.s3-cam{position:absolute;left:-6%;top:40%;width:34%;height:auto;transform:rotate(-12deg);filter:drop-shadow(0 4px 6px rgba(52,28,140,.3))}
.s3-flash{position:absolute;left:-14%;top:34%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,rgba(255,255,255,.85) 30%,rgba(255,226,154,.45) 48%,rgba(255,255,255,0) 70%);opacity:0;animation:s3flash 1.6s ease-out 1.6s infinite;pointer-events:none}
@keyframes s3pop{from{opacity:0;transform:scale(.3) translateY(30%)}to{opacity:1;transform:none}}
/* 오른쪽 → 봉지 위 → 오른쪽 아래 → 폰 위 → 오른쪽 (각 자리에서 찰칵) */
@keyframes s3move{0%,18%{left:62%;top:0;transform:none}25%,43%{left:2%;top:-4%;transform:scale(.72) rotate(-6deg)}50%,68%{left:63%;top:12%;transform:scale(.88) rotate(6deg)}75%,93%{left:7%;top:4%;transform:scale(.66) rotate(5deg)}100%{left:62%;top:0;transform:none}}
@keyframes s3snap{0%,40%{transform:none}48%{transform:translateY(-4px) rotate(-5deg) scale(1.03)}56%{transform:rotate(3deg)}64%,100%{transform:none}}
@keyframes s3flash{0%,46%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.15)}62%,100%{opacity:0;transform:scale(1.6)}}
/* 배지: 하나씩 톡 튀어나오고 반짝 → 잠시 머물다 사라지고 다시 */
.s3-badge{right:0;display:flex;align-items:center;gap:6px;background:#fff;color:var(--ink);font-size:14px;font-weight:900;letter-spacing:-.02em;padding:8px 13px 8px 10px;border-radius:99px;box-shadow:0 8px 18px var(--pu-sh);white-space:nowrap;overflow:hidden;opacity:0;animation:s3badge 6.4s cubic-bezier(.2,.9,.3,1.3) 1.9s infinite}
.s3-badge.b1{top:60%}.s3-badge.b2{top:80%;animation-delay:2.5s}
.s3-badge .bars{width:16px;height:14px;background:var(--teal);clip-path:polygon(0 60%,4px 60%,4px 100%,6px 100%,6px 30%,10px 30%,10px 100%,12px 100%,12px 0,16px 0,16px 100%,0 100%)}
.s3-badge b{display:inline-block;color:var(--teal);font-size:15px;animation:s3arrow .9s ease-in-out infinite}
.s3-badge.b1 b{--d:3px}.s3-badge.b2 b{--d:-3px}
.s3-badge .spark{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,226,154,.55) 50%,transparent 65%);background-size:300% 100%;animation:s3shine 6.4s ease-out 1.9s infinite}
.s3-badge.b2 .spark{animation-delay:2.5s}
@keyframes s3badge{0%{opacity:0;transform:translateX(24px) scale(.5)}6%{opacity:1;transform:translateX(-4px) scale(1.12)}10%{transform:scale(.96)}13%,72%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateX(10px) scale(.9)}}
@keyframes s3arrow{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--d))}}
@keyframes s3shine{0%,6%{background-position:120% 0}18%,100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){.s3-bag,.s3-phone{animation:fadein .5s ease-out both!important}.s3-lb{animation:fadein .5s ease-out 1s both,s3move 6.4s ease-in-out 1.6s infinite!important}.s3-in{animation:none!important}.s3-flash{animation:s3flash 1.6s ease-out 1.6s infinite!important}.s3-badge{animation:s3badge 6.4s ease 1.9s infinite!important}.s3-badge.b2{animation-delay:2.5s!important}.s3-badge b,.s3-badge .spark{animation:none!important}}
.home.q .stage.s3{display:none}

/* v54 시안: 라벨은 제자리에서 찰칵만, 제품·폰·라벨 줄 맞춤, 폰은 라벨 쪽으로 더 기울임, 배지는 아래로 */
.s3-bag{left:5%;top:20%;width:27%}
.s3-phone{left:35%;top:9%;width:23%;transform:rotate(12deg);animation-name:s3in2b}
@keyframes s3in2b{from{opacity:0;transform:translate(30px,-10px) rotate(22deg) scale(.9)}to{opacity:1;transform:rotate(12deg)}}
.s3-lb{left:63%;top:4%;width:29%;animation:s3pop .5s cubic-bezier(.2,.9,.3,1.3) 1s both}
.s3-badge.b1{top:70%}.s3-badge.b2{top:88%}
@media (prefers-reduced-motion:reduce){.s3-lb{animation:fadein .5s ease-out 1s both!important}.s3-phone{animation:fadein .5s ease-out both!important}}

/* v54 시안: 배지는 한 번 톡 나온 뒤 사라지지 않고 둥실 움직이기만 */
.s3-badge{animation:s3bin .55s cubic-bezier(.2,.9,.3,1.3) 1.9s both,s3bfloat 2.8s ease-in-out 2.5s infinite}
.s3-badge.b2{animation-delay:2.5s,3.1s}
.s3-badge .spark{animation:s3shine2 3.2s ease-out 1.9s infinite}
.s3-badge.b2 .spark{animation-delay:2.5s}
.s3-badge b{font-size:12.5px;font-weight:900;letter-spacing:.02em;margin-left:2px}
@keyframes s3bin{0%{opacity:0;transform:translateX(24px) scale(.5)}60%{opacity:1;transform:translateX(-4px) scale(1.1)}100%{opacity:1;transform:none}}
@keyframes s3bfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes s3shine2{0%,8%{background-position:120% 0}40%,100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){.s3-badge{animation:fadein .5s ease-out 1.9s both!important}.s3-badge.b2{animation-delay:2.5s!important}}
.s3-badge.b1{top:58%}.s3-badge.b2{top:76%}
/* v54b 시안: 바닥선 한 줄(제품·폰·라벨) + 같은 간격, 배지는 아래에 나란히 */
.stage.s3{aspect-ratio:1.25}
.s3-bag{left:4%;top:auto;bottom:24%;width:26%}
.s3-phone{left:37%;top:auto;bottom:24%;width:22%;transform-origin:50% 100%}
.s3-lb{left:67%;top:auto;bottom:24%;width:27%}
.s3-badge.b1,.s3-badge.b2{top:auto;bottom:3%;right:auto}
.s3-badge.b1{left:calc(50% - 150px)}.s3-badge.b2{left:calc(50% + 6px)}
.s3-floor{left:6%;right:6%;bottom:21%;height:14px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(52,28,140,.16),rgba(52,28,140,0) 70%)}
.stage.s3{aspect-ratio:1.5}
.s3-bag,.s3-phone,.s3-lb{bottom:27%}
.s3-floor{bottom:24%}
.s3-badge{gap:5px;padding:7px 14px 7px 11px}
.s3-badge.b1{left:auto;right:calc(50% + 5px)}.s3-badge.b2{left:calc(50% + 5px);right:auto}

.s3-badge .bars{width:18px;height:16px;flex:0 0 18px;clip-path:none;background:none;fill:var(--teal);display:block}
.s3-badge .s3bars{width:18px;height:16px;flex:0 0 18px;fill:var(--teal);display:block;background:none;box-shadow:none}
/* v54c 시안: 장면 위 빈 공간 줄이고 그만큼 바코드 찍기 버튼 크게 */
.stage.s3{aspect-ratio:1.95;margin-top:0}
.s3-bag,.s3-phone,.s3-lb{bottom:30%}
.s3-floor{bottom:27%}
.shutter.big{margin-top:16px;padding:20px 22px 20px 18px;border-radius:30px}
.sh-ic{width:76px;height:76px;border-radius:24px}
.shutter.big .sh-ic svg{width:46px;height:46px}
.sh-tx b{font-size:32px}
.sh-tx small{font-size:15.5px}
.sh-go{font-size:48px}
@keyframes shlaser{0%,100%{top:12px}50%{top:60px}}
.stage.s3{aspect-ratio:1.72;margin-top:6px}
.sh-tx small{white-space:nowrap}
.hero{padding-bottom:40px}
.promo{margin-top:14px}
/* v55 시안: 배경은 거의 흰색, 가장자리에만 보라 빛이 흐릿하게 번지는 아웃포커스 */
:root{--bg:#FAF9FF}
.hero{background:
  radial-gradient(55% 32% at 0% 0%,rgba(124,92,255,.32),rgba(124,92,255,0) 70%),
  radial-gradient(48% 30% at 100% 6%,rgba(143,116,255,.28),rgba(143,116,255,0) 70%),
  radial-gradient(45% 28% at 0% 78%,rgba(124,92,255,.22),rgba(124,92,255,0) 70%),
  radial-gradient(42% 30% at 100% 70%,rgba(160,138,255,.24),rgba(160,138,255,0) 70%),
  #FCFBFF}
.hero:before{width:180px;height:180px;right:-60px;top:120px;background:rgba(124,92,255,.22);filter:blur(36px)}
.hero:after{width:200px;height:200px;left:-80px;bottom:60px;background:rgba(143,116,255,.20);filter:blur(40px)}
.hdbtn{background:rgba(255,255,255,.7);box-shadow:0 2px 10px rgba(108,76,245,.10)}
.pr-s{box-shadow:0 6px 18px rgba(52,28,140,.08)}
/* v55 시안: 바코드 찍기 버튼 — 스캔 아이콘을 가운데 위에, 그 아래 제목·설명을 가운데로 */
.shutter.big{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:20px 18px 22px}
.shutter.big .sh-tx{align-items:center;flex:none}
.shutter.big .sh-go{display:none}
/* v55b 시안: 버튼 위 아이콘 → 가로로 긴 바코드 + 좌우로 훑는 스캔선, 버튼 높이 줄임 */
.shutter.big{gap:8px;padding:14px 18px 16px}
.shutter.big .sh-ic{width:min(82%,300px);height:46px;border-radius:14px;background:rgba(255,255,255,.16)}
.shutter.big .sh-ic svg{display:none}
.shutter.big .sh-ic:before{content:'';position:absolute;left:14px;right:14px;top:9px;bottom:9px;background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 6px,#fff 6px 7px,transparent 7px 10px,#fff 10px 14px,transparent 14px 16px,#fff 16px 17px,transparent 17px 21px,#fff 21px 23px,transparent 23px 25px);opacity:.95;border-radius:2px}
.shutter.big .sh-ic i{left:auto;right:auto;top:4px;bottom:4px;width:3px;height:auto;animation:shscanx 1.8s ease-in-out infinite}
@keyframes shscanx{0%,100%{left:10px}50%{left:calc(100% - 13px)}}
.sh-tx b{font-size:28px}
.sh-tx small{font-size:14.5px;margin-top:0}
/* v55c 시안: 찍먹식 스캔 화면 — 흰 모서리 괄호 + 반투명 바코드 + 위아래 형광 스캔선, 뒤는 흐릿한 보라 */
.shutter.big{background:
  radial-gradient(60% 70% at 15% 20%,rgba(160,130,255,.95),rgba(160,130,255,0) 70%),
  radial-gradient(55% 65% at 85% 85%,rgba(76,40,210,.95),rgba(76,40,210,0) 70%),
  radial-gradient(50% 60% at 80% 15%,rgba(198,170,255,.7),rgba(198,170,255,0) 70%),
  linear-gradient(135deg,#6C4CF5,#5435D6);padding:16px 18px 16px;gap:10px}
.shutter.big .sh-ic{width:min(72%,250px);height:112px;border-radius:0;background:none;overflow:visible}
.shutter.big .sh-ic:after{content:'';position:absolute;inset:0;border:4px solid #fff;border-radius:20px;
  -webkit-mask:linear-gradient(#000 0 0) top left/34px 34px no-repeat,linear-gradient(#000 0 0) top right/34px 34px no-repeat,linear-gradient(#000 0 0) bottom left/34px 34px no-repeat,linear-gradient(#000 0 0) bottom right/34px 34px no-repeat;
  mask:linear-gradient(#000 0 0) top left/34px 34px no-repeat,linear-gradient(#000 0 0) top right/34px 34px no-repeat,linear-gradient(#000 0 0) bottom left/34px 34px no-repeat,linear-gradient(#000 0 0) bottom right/34px 34px no-repeat}
.shutter.big .sh-ic:before{left:28%;right:28%;top:24%;bottom:24%;border-radius:0;opacity:1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 3px,transparent 3px 8px)}
.shutter.big .sh-ic i{left:6%;right:6%;width:auto;top:30%;bottom:auto;height:3px;border-radius:3px;background:#7CFF9B;box-shadow:0 0 10px 2px rgba(124,255,155,.85);animation:shscany 1.8s ease-in-out infinite}
@keyframes shscany{0%,100%{top:22%}50%{top:76%}}
/* v55d 시안: 스캔선을 세로로 세워 왼쪽 ↔ 오른쪽으로 훑기, 바코드는 가로로 넓게 */
.shutter.big .sh-ic:before{left:16%;right:16%;top:22%;bottom:22%}
.shutter.big .sh-ic i{top:12%;bottom:12%;height:auto;width:3px;right:auto;left:8%;animation:shscanlr 2s ease-in-out infinite}
@keyframes shscanlr{0%,100%{left:8%}50%{left:calc(92% - 3px)}}
.hero .hd .logo-img{height:30px}
.hero .hd{display:flex;align-items:center;justify-content:space-between}.hero .hd .hdr{margin-left:auto}
.hero .hd .hdbtn.lng{min-height:0;width:32px;height:32px;padding:0;justify-content:center;font-size:16px;margin-top:-6px}
/* ===== v56 전체 디자인 업그레이드: 보라 · 라벨 · 둥근 제목 글꼴(Jua) ===== */
html,body{touch-action:manipulation}
.ttl,.hero-t,h3.sec,.state.empty b,.pr-s b,.tile b,.sh-tx b,.summary h2,.ask2 h2,.sec{font-family:Jua,Pretendard,sans-serif;font-weight:400;letter-spacing:-.01em}
.ttl.big{font-size:30px}
.hero-t{font-size:30px}
h3.sec{font-size:21px}
/* 주요 버튼·요약 카드: 남색 → 보라 */
.btn.pri,.state.empty .acts .btn{background:linear-gradient(135deg,#7A5CFF,#5B3DE8);color:#fff;border:0;box-shadow:0 8px 18px rgba(91,61,232,.28)}
.summary{background:linear-gradient(140deg,#5B3DE8 0%,#3E25B8 100%);box-shadow:0 12px 26px rgba(62,37,184,.30)}
.chip.on,.crit .chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.state.empty{border:1px solid rgba(108,76,245,.08)}
.state.empty img.ill{width:118px}
/* 제품 사진 없는 칸: 연보라 바탕 */
.ph{background:#F1EDFF;color:#9B88F2}
/* 아래 메뉴: 비교 · 기록 · (홈) · 저장 · 스캔 — 홈은 가운데 떠 있는 보라 동그라미 */
.tabbar{padding:6px 8px;overflow:visible;box-shadow:0 10px 30px rgba(52,28,140,.16),0 0 0 1px rgba(108,76,245,.08)}
.tabbar button{font-size:12px}
.tabbar button.on{color:var(--teal);background:transparent}
.tabbar button.on:not(.home) svg{stroke-width:2.6}
.tabbar button.home{color:var(--ink);gap:3px;justify-content:flex-end;padding-bottom:4px}
.tabbar .hm{width:58px;height:58px;margin-top:-30px;border-radius:50%;background:linear-gradient(135deg,#7A5CFF,#5B3DE8);display:grid;place-items:center;box-shadow:0 10px 20px rgba(91,61,232,.4),0 0 0 5px #fff;transition:transform .2s var(--ease)}
.tabbar .hm svg{width:28px;height:28px;color:#fff}
.tabbar button.home.on{color:var(--teal)}
.tabbar button.home:not(.on) .hm{background:linear-gradient(135deg,#B9A9FF,#8F74FF)}
.tabbar button.home:active .hm{transform:scale(.92)}
.tabbar .scanb svg{color:var(--teal)}
/* 로고 버튼 */
.hero .hd .logo{background:none;border:0;padding:0;cursor:pointer}
/* 라벨 칭찬 알림 */
.toast{background:#2A1F66}
.toast .undo{color:var(--lime)}
.toast.cheer{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 16px 10px 10px;border-radius:22px;background:linear-gradient(135deg,#7A5CFF,#4E30D6);animation:cheerin .5s cubic-bezier(.2,.9,.3,1.3)}
.toast.cheer .ch{position:relative;flex-shrink:0;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.toast.cheer .ch img{width:34px;height:auto;animation:chwave 1s ease-in-out 2}
.toast.cheer .ch i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--lime);opacity:0;animation:chspark .9s ease-out .15s}
.toast.cheer .ch i:nth-child(2){left:-2px;top:6px}.toast.cheer .ch i:nth-child(3){right:-3px;top:2px;animation-delay:.25s;background:#fff}.toast.cheer .ch i:nth-child(4){right:2px;bottom:-2px;animation-delay:.35s}
.toast.cheer .cht{display:flex;flex-direction:column;font-size:14px;font-weight:700;line-height:1.35}
.toast.cheer .cht b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:17px;color:var(--lime)}
@keyframes cheerin{0%{opacity:0;transform:translate(-50%,-14px) scale(.9)}100%{opacity:1;transform:translate(-50%,0)}}
@keyframes chwave{0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg)}60%{transform:rotate(10deg)}}
@keyframes chspark{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(.6) translateY(-8px)}}
/* v56 카메라 화면: 흰 모서리 괄호 + 좌우로 훑는 초록 스캔선(첫 화면 버튼과 같은 모양) */
.frame i{position:relative;border:0;box-shadow:0 0 0 2000px rgba(20,12,60,.55);overflow:visible}
.frame i:before{content:'';position:absolute;inset:0;border:4px solid #fff;border-radius:24px;
  -webkit-mask:linear-gradient(#000 0 0) top left/44px 44px no-repeat,linear-gradient(#000 0 0) top right/44px 44px no-repeat,linear-gradient(#000 0 0) bottom left/44px 44px no-repeat,linear-gradient(#000 0 0) bottom right/44px 44px no-repeat;
  mask:linear-gradient(#000 0 0) top left/44px 44px no-repeat,linear-gradient(#000 0 0) top right/44px 44px no-repeat,linear-gradient(#000 0 0) bottom left/44px 44px no-repeat,linear-gradient(#000 0 0) bottom right/44px 44px no-repeat}
.frame i:after{content:'';position:absolute;top:10%;bottom:10%;width:3px;border-radius:3px;background:#7CFF9B;box-shadow:0 0 12px 3px rgba(124,255,155,.8);animation:camscan 2s ease-in-out infinite}
@keyframes camscan{0%,100%{left:6%}50%{left:calc(94% - 3px)}}
.camtop{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:18px}
.codebox button{background:linear-gradient(135deg,#7A5CFF,#5B3DE8);color:#fff}
.cambot .btn.ghost.light{border-color:rgba(255,255,255,.35)}
.ph.food{background:#F6F4FB}.ph.food img{object-fit:contain;background:none;padding:12%}
/* v56b: 배민처럼 반투명 유리 아래 메뉴 — 뒤 내용이 흐리게 비침, 선택 칸은 옅은 알약 */
.tabbar{background:rgba(255,255,255,.42);backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 28px rgba(30,20,80,.14);padding:6px}
.tabbar button{color:#2a2640;font-weight:700}
.tabbar button svg{color:#2a2640}
.tabbar button.on{background:rgba(40,30,90,.10);color:#17142B}
.tabbar button.on svg{color:#17142B;stroke-width:2.6}
.tabbar button.home{justify-content:center;padding-bottom:0;gap:1px}
.tabbar .hm{width:auto;height:auto;margin:0;border-radius:0;background:none!important;box-shadow:none;display:block}
.tabbar .hm svg{width:24px;height:24px;color:#2a2640}
.tabbar button.home.on .hm svg{color:#17142B;fill:rgba(23,20,43,.9)}
.tabbar .scanb svg{color:#2a2640}
.tabbar button.home.on{color:#17142B}
/* v57 카메라 화면 새 디자인 */
.cam{background:#0E0A24}
.cam video{filter:saturate(1.05)}
.camtop{padding:calc(var(--st) + 8px) 12px 8px;justify-content:space-between;background:linear-gradient(180deg,rgba(14,10,36,.75),rgba(14,10,36,0))}
.camtop .ic{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;color:#fff}
.camtop .ic svg{width:22px;height:22px}
.camtop #torchBtn.on{background:var(--lime);color:#17142B}
.camttl{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:20px;color:#fff}
.frame{align-content:center;padding-bottom:120px}
.frame i{width:80%;max-width:330px;aspect-ratio:1.55;box-shadow:0 0 0 2000px rgba(14,10,36,.58);border-radius:26px;transition:box-shadow .3s}
.frame .got{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;font-style:normal;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:22px;color:#fff;background:rgba(46,204,113,.35);border-radius:26px;opacity:0;transform:scale(.9);transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.3,1.4)}
.frame .got svg{width:28px;height:28px}
.cam.hit .frame i:before{border-color:#7CFF9B}
.cam.hit .frame i:after{display:none}
.cam.hit .frame .got{opacity:1;transform:none}
.camguide{position:absolute;left:0;right:0;top:calc(50% + 60px);display:flex;justify-content:center;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.camguide img{width:30px;height:auto;animation:chwave 2.4s ease-in-out infinite}
.cambot{gap:12px;background:linear-gradient(0deg,rgba(14,10,36,.92) 60%,rgba(14,10,36,0));padding-top:40px}
.camrec small{display:block;color:rgba(255,255,255,.65);font-size:12.5px;font-weight:700;margin:0 0 6px 2px}
.camrec div{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.camrec div::-webkit-scrollbar{display:none}
.camrec button{flex-shrink:0;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.12);color:#fff;font-size:13.5px;font-weight:700}
.cammode{display:flex;background:rgba(255,255,255,.10);border-radius:99px;padding:4px}
.cammode>*{flex:1;text-align:center;padding:11px 0;border-radius:99px;color:rgba(255,255,255,.8);font-weight:800;font-size:15px;cursor:pointer}
.cammode .on{background:#fff;color:#17142B}
.camrow{display:flex;gap:8px;align-items:center}
.camrow .gal{width:56px;height:56px;flex-shrink:0;border-radius:18px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff;cursor:pointer}
.camrow .gal svg{width:26px;height:26px}
.camrow .codebox{flex:1}
.codebox input{background:rgba(255,255,255,.12)}
.camtop{position:absolute}.camttl{position:absolute;left:50%;transform:translateX(-50%)}
.cmp-ill{text-align:center}.cmp-ill .ill{width:130px}.cmp-say{font-family:Jua,Pretendard,sans-serif;font-size:18px;color:var(--ink);margin:-4px 0 10px}
.state.empty img.ill{width:130px}
/* v59 마이라벨리 */
#my{padding-bottom:20px}
.myhero{text-align:center;padding:6px 0 14px}
.myhero .av{width:104px;height:104px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff,#EDE8FF);display:grid;place-items:center;box-shadow:0 8px 20px rgba(108,76,245,.18);position:relative}
.myhero .av:before,.myhero .av:after{content:'✦';position:absolute;color:var(--teal);font-size:20px}
.myhero .av:before{left:-6px;top:10px}.myhero .av:after{right:-4px;bottom:12px;color:var(--lime);text-shadow:0 0 1px #6b8a00}
.myhero .av img{width:70px;height:auto;animation:chwave 3s ease-in-out infinite}
.myhero .nick{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-family:Jua,Pretendard,sans-serif;font-size:24px;color:var(--ink);background:none;border:0}
.myhero .nick svg{width:18px;height:18px;color:var(--mute)}
.myhero p{font-size:14px;color:var(--sub);margin-top:2px}
.mycard{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;margin-top:10px}
.mycard.sum{display:grid;grid-template-columns:repeat(3,1fr)}
.mycard.sum button{padding:16px 6px;text-align:center;border-right:1px solid var(--line)}
.mycard.sum button:last-child{border-right:0}
.mycard.sum b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:24px;color:var(--teal)}
.mycard.sum small{font-size:13px;color:var(--sub);font-weight:700}
.myrow{width:100%;display:flex;align-items:center;gap:12px;padding:15px 16px;text-align:left;border-bottom:1px solid var(--line)}
.myrow:last-child{border-bottom:0}
.myrow img{width:34px;height:34px;flex-shrink:0}
.myrow span{flex:1;min-width:0;display:flex;flex-direction:column}
.myrow b{font-size:16px;font-weight:800;color:var(--ink)}
.myrow small{font-size:13px;color:var(--sub);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.myrow em{font-style:normal;font-size:14px;font-weight:800;color:var(--teal)}
.myrow .chev{width:18px;height:18px;color:#b6b9c6;flex-shrink:0}
.myrow .sw{width:50px;height:30px;border-radius:15px;background:#d9dbe3;position:relative;flex-shrink:0;transition:background .2s}
.myrow .sw:after{content:'';position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.myrow .sw.on{background:var(--teal)}.myrow .sw.on:after{transform:translateX(20px)}
.myrow.danger b{color:var(--red)}
.myver{text-align:center;font-size:12.5px;color:var(--mute);margin:18px 0 6px}
#s-my h3.sec{margin-top:22px}
.steps{padding-left:20px;margin:6px 0 14px;line-height:1.7;font-size:15px}
html.bigtext body{zoom:1.14}
.tabbar .hm{line-height:0}.tabbar button.home{padding:0;gap:1px}
.hd .gearbtn{margin-left:auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(52,28,140,.08)}.hd .gearbtn svg{width:23px;height:23px}
.hd:has(.gearbtn){display:flex;align-items:center}

/* v60: 홈 버튼 스캔선 — 천천히 왼쪽 ↔ 오른쪽(동작 줄이기에서도) */
.shutter.big .sh-ic i{animation:shscanlr 3.2s ease-in-out infinite!important}
@media (prefers-reduced-motion:reduce){.shutter.big .sh-ic i{animation:shscanlr 3.2s ease-in-out infinite!important}.frame i:after{animation:camscan 3.2s ease-in-out infinite!important}}
.frame i:after{animation-duration:3.2s}
/* 빈 화면 두 갈래 버튼 */
.state.empty .acts.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.state.empty .acts.two .btn{min-height:52px;font-size:16px;gap:6px}
.state.empty .acts.two .btn svg{width:20px;height:20px}
.state.empty .acts.two .btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.actionbar .btn svg{width:20px;height:20px}
/* 아래에서 올라오는 창 끌어내리기 */
.sheetbox{transition:transform .25s var(--ease);touch-action:pan-y}
.myrow img.appic{border-radius:9px;box-shadow:0 2px 6px rgba(52,28,140,.2)}
/* 아래 메뉴: 홈 · 기록 · (스캔 크게) · 비교 · 저장 */
.tabbar button.scanc{color:var(--teal);font-weight:900;justify-content:flex-end;padding-bottom:5px;gap:2px}
.tabbar .sc{width:62px;height:62px;margin-top:-34px;border-radius:22px;background:linear-gradient(135deg,#7A5CFF,#5B3DE8);display:grid;place-items:center;box-shadow:0 10px 22px rgba(91,61,232,.42),0 0 0 4px rgba(255,255,255,.85);position:relative;overflow:hidden}
.tabbar .sc svg{width:32px;height:32px;color:#fff!important}
.tabbar .sc:after{content:'';position:absolute;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--lime);box-shadow:0 0 6px 1px rgba(255,226,154,.9);animation:tabscan 2.6s ease-in-out infinite}
@keyframes tabscan{0%,100%{left:14px}50%{left:calc(100% - 16px)}}
.tabbar button.scanc:active .sc{transform:scale(.92)}

/* v61 전용 검색 화면 */
.qbox.sq{margin:4px 0 6px;border-color:var(--teal);gap:10px;padding:0 10px 0 16px}
.qbox.sq .qic{width:22px;height:22px;color:var(--teal);flex-shrink:0}
.srhero{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r-lg);padding:14px 16px;margin-top:10px;box-shadow:var(--sh)}
.srhero img{width:64px;height:auto}
.srhero p{font-size:14px;color:var(--sub);line-height:1.45}.srhero b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:19px;color:var(--ink)}
h3.sec.sm{font-size:18px;margin-top:20px;display:flex;align-items:center;justify-content:space-between}
h3.sec.sm .inl{font-family:Pretendard,sans-serif;font-size:13px;color:var(--mute)}
#s-srch .chip{background:#fff;border:1.5px solid #E6E1FA}
.srscan{width:100%;margin-top:22px;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-lg);background:linear-gradient(135deg,#F1EDFF,#E8E1FF);text-align:left}
.srscan .sc2{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#7A5CFF,#5B3DE8);display:grid;place-items:center;color:#fff;flex-shrink:0}.srscan .sc2 svg{width:26px;height:26px}
.srscan span:nth-child(2){flex:1;display:flex;flex-direction:column}.srscan b{font-size:16px;font-weight:800;color:var(--ink)}.srscan small{font-size:13px;color:var(--sub)}
.srscan .chev{width:18px;height:18px;color:var(--teal)}
/* 아래 창 머리(라벨 + 제목) · 언어 · 이름 바꾸기 */
.shhead{display:flex;align-items:center;gap:12px;margin:2px 0 6px}
.shhead img{width:52px;height:auto;flex-shrink:0}
.shhead h3{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:22px}
.shhead .hint{font-size:13.5px;margin-top:2px}
.langs{display:flex;flex-direction:column;gap:8px}
.lang{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:#fff;border:2px solid transparent;box-shadow:0 2px 8px rgba(52,28,140,.06);text-align:left}
.lang .fl{font-size:28px;line-height:1}
.lang span:nth-child(2){flex:1;display:flex;flex-direction:column}.lang b{font-size:17px;font-weight:800}.lang small{font-size:13px;color:var(--sub)}
.lang.on{border-color:var(--teal);background:#F4F1FF}
.lang .ck{width:24px;height:24px;color:var(--teal)}
.nickf{display:flex;gap:8px;margin-top:6px}
.nickf input{flex:1;min-width:0;height:56px;border-radius:16px;border:2px solid var(--teal);padding:0 16px;font-size:18px;font-weight:700;background:#fff;color:var(--ink);outline:none}
.nickf .btn{min-width:88px}
.seg.os{display:flex;background:#EEEAFB;border-radius:99px;padding:4px;margin:4px 0 8px}
.seg.os button{flex:1;padding:10px 0;border-radius:99px;font-weight:800;font-size:15px;color:var(--sub)}
.seg.os button.on{background:#fff;color:var(--teal);box-shadow:0 2px 6px rgba(52,28,140,.12)}
/* 당류 DOWN 파랑 · 단백질 UP 빨강, 글자 크기 통일 */
.s3-badge{font-size:15px;font-family:Pretendard,sans-serif;font-weight:900}
.s3-badge b{font-size:15px!important;font-weight:900;letter-spacing:.01em;margin-left:3px}
.s3-badge.dn b{color:#2F6BFF}.s3-badge.dn .s3bars{fill:#2F6BFF}
.s3-badge.up b{color:#F0423C}.s3-badge.up .s3bars{fill:#F0423C}
.s3-badge.dn .spark{background:linear-gradient(105deg,transparent 35%,rgba(47,107,255,.18) 50%,transparent 65%);background-size:300% 100%}
.s3-badge.up .spark{background:linear-gradient(105deg,transparent 35%,rgba(240,66,60,.16) 50%,transparent 65%);background-size:300% 100%}

/* 당겨서 새로 고침 */
.ptr{position:fixed;left:50%;top:calc(var(--st) - 46px);transform:translate(-50%,0);z-index:45;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:99px;background:#fff;box-shadow:0 6px 18px rgba(52,28,140,.18);font-size:13.5px;font-weight:800;color:var(--ink);opacity:0;transition:opacity .15s;pointer-events:none}
.ptr.show{opacity:1}
.ptr img{width:26px;height:auto;transition:transform .2s}
.ptr.ready img{transform:rotate(-18deg) scale(1.1)}
.ptr.ready span{color:var(--teal)}
.ptr.spin img{animation:ptrspin .8s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
/* ===== v62 ===== */
/* 검색 결과: 검색어 강조·회사 구분 */
.row .nm mark{background:none;color:var(--teal);font-weight:900}
.row small .mk{color:var(--ink2);font-weight:800;background:#F1EDFF;padding:1px 7px;border-radius:6px}
/* 제품 화면 설명 문구는 작고 옅게 */
.basisnote,.credit,.src.fine,.kids .basisnote,.ngrade small{font-size:12px!important;color:#9aa0ae!important;opacity:.85;line-height:1.5}
.ngrade small{display:block;margin-top:2px}
/* 다른 제품인가요? 버튼 */
.wrongb{width:100%;display:flex;align-items:center;gap:12px;margin:10px 0 4px;padding:12px 14px;border-radius:18px;background:#fff;border:1.5px dashed #CFC5FA;text-align:left}
.wrongb .wi{width:40px;height:40px;border-radius:13px;background:#F1EDFF;display:grid;place-items:center;color:var(--teal);flex-shrink:0}.wrongb .wi svg{width:22px;height:22px}
.wrongb span:nth-child(2){flex:1;display:flex;flex-direction:column}.wrongb b{font-size:15.5px;font-weight:800;color:var(--ink)}.wrongb small{font-size:13px;color:var(--sub)}
.wrongb .chev{width:18px;height:18px;color:var(--teal)}
/* 원재료명 전체 보기 카드 */
details.raw2{margin-top:10px;border-radius:16px;background:#F7F5FF;border:1px solid #E7E1FB;overflow:hidden}
details.raw2 summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer}
details.raw2 summary::-webkit-details-marker{display:none}
details.raw2 summary img{width:30px;height:30px}
details.raw2 summary span{flex:1;display:flex;flex-direction:column}details.raw2 summary b{font-size:15.5px;font-weight:800;color:var(--ink)}details.raw2 summary small{font-size:12.5px;color:var(--sub)}
details.raw2 .arr{width:30px;height:30px;border-radius:50%;background:#fff;position:relative;flex-shrink:0}
details.raw2 .arr:after{content:'';position:absolute;left:11px;top:9px;width:7px;height:7px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:transform .2s}
details.raw2[open] .arr:after{transform:rotate(-135deg);top:12px}
details.raw2 p{margin:0 14px 14px;padding:12px;background:#fff;border-radius:12px;font-size:14.5px;line-height:1.75;color:var(--ink2);word-break:keep-all}
/* 비교 요약: 적어요 파랑 · 많아요 빨강 */
.summary h2 em,.summary li em{font-style:normal;padding:0 4px;border-radius:6px}
.summary em.lo{color:#9CC2FF}.summary em.hi{color:#FF9D97}
.summary li em.lo{color:#B5D0FF}.summary li em.hi{color:#FFB3AE}
/* 막대: A 보라 · B 주황 + 범례 */
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 8px;font-size:13px;font-weight:700;color:var(--sub)}
.legend span{display:flex;align-items:center;gap:6px;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend i{width:12px;height:12px;border-radius:4px;flex-shrink:0}.legend .ca{background:#6C4CF5}.legend .cb{background:#FF8A3D}
.bar .fl.a,.bar.sel .fl.a{background:#6C4CF5}.bar .fl.b,.bar.sel .fl.b{background:#FF8A3D}
.bar:not(.sel) .fl.a{background:#B7A8FA}.bar:not(.sel) .fl.b{background:#FFC39A}
.bar .ln i{font-style:normal}.bar .ln:nth-child(2) i{color:#6C4CF5}.bar .ln:nth-child(3) i{color:#E8702A}
/* 비교 불가·묻기 알림 */
.notice{display:flex;gap:12px;align-items:center;margin-top:14px;padding:16px;border-radius:22px;background:#fff;box-shadow:var(--sh)}
.notice img{width:64px;height:auto;flex-shrink:0}
.notice b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:19px;color:var(--ink)}
.notice p{font-size:14px;color:var(--sub);line-height:1.5;margin-top:3px;word-break:keep-all}
.notice.no{border:1.5px solid #FFE1CC;background:#FFFBF7}
.notice.ask{border:1.5px solid #E1D9FF;background:#FAF8FF}
/* 가격 비교 */
.price{padding:16px 16px 14px}
.pc-h{display:flex;align-items:center;gap:8px}.pc-h img{width:28px;height:28px}.pc-h b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:19px}.pc-h small{margin-left:auto;font-size:12px;font-weight:700;color:var(--mute);background:#F2F0F8;padding:3px 8px;border-radius:99px}
.price .pr input{border-radius:14px;background:#F8F7FC;border-color:#ECE8F7;font-size:16px}
.price .res{font-weight:700;font-size:14px}
.pc-hint{color:var(--mute);font-weight:600;font-size:13px}
.pc-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pc-two>div{border-radius:14px;background:#F8F7FC;padding:10px 12px;display:flex;flex-direction:column;position:relative}
.pc-two i{font-style:normal;font-size:12px;font-weight:900;color:#fff;width:20px;height:20px;border-radius:6px;display:grid;place-items:center}.pc-two .ta{background:#6C4CF5}.pc-two .tb{background:#FF8A3D}
.pc-two b{font-size:20px;font-weight:900;margin-top:4px}.pc-two small{font-size:12px;color:var(--sub)}
.pc-two .win{background:#EEF4FF;outline:2px solid #2F6BFF}.pc-two .win:after{content:'더 싸요';position:absolute;right:10px;top:10px;font-size:12px;font-weight:900;color:#2F6BFF}
.pc-res{margin-top:8px;font-size:15px;font-weight:700}.pc-res b{color:#2F6BFF}
.pc-note{font-size:13px;color:var(--sub);margin-top:6px}
/* 구매처 보기 */
.buyb{width:100%;display:flex;align-items:center;gap:12px;margin-top:12px;padding:13px 14px;border-radius:18px;background:#fff;box-shadow:var(--sh);text-align:left}
.buyb img{width:32px;height:32px}.buyb span{flex:1;display:flex;flex-direction:column}.buyb b{font-size:15.5px;font-weight:800}.buyb small{font-size:12.5px;color:var(--mute)}
.buyb .chev{width:18px;height:18px;color:var(--teal)}
/* 당겨서 새로 고침: 라벨 동그라미만 */
.ptr{padding:6px;gap:0}.ptr img{width:28px}
.pthumb.food{background:#F6F4FB}.pthumb.food img{width:70%;height:70%;object-fit:contain}
.algc .ac i{background:#6C4CF5}.algc .ac+.ac i{background:#FF8A3D}.pr2 .tag{background:#6C4CF5}.pr2.b .tag{background:#FF8A3D}

/* ===== v63 ===== */
.basisnote,.credit,.src.fine,.kids .basisnote,.ngrade small,.rank .basisnote{font-size:12px!important;line-height:1.45}
.row small .repv,.brand .repv{font-weight:800;color:#6C4CF5;background:#F1EDFF;padding:1px 7px;border-radius:6px;font-size:12px}
.row .w{display:flex;align-items:baseline;gap:1px}.row .w small{font-size:12px;font-weight:800;color:var(--sub);margin-left:1px}
/* 순위 쉽게 */
.rk-scale{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800;color:var(--mute);margin:6px 0 -2px 64px;padding-right:118px}
.rk-scale span:first-child{color:#2F6BFF}.rk-scale span:last-child{color:#E2483D}
.rk-t{background:linear-gradient(90deg,#DCE8FF,#EEE 50%,#FFE0DD)!important}
.rk-v{display:flex;flex-direction:column;align-items:flex-end;min-width:104px;text-align:right}
.rk-v b{font-size:14.5px;font-weight:900}.rk-v small{font-size:11.5px;color:var(--mute);font-weight:700}
.rk-v.g1 b,.rk-v.g2 b{color:#2F6BFF}.rk-v.g3 b{color:var(--ink2)}.rk-v.g4 b,.rk-v.g5 b{color:#E2483D}
/* 화장품 소개 */
.cos2{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#FFF0F6,#F3EEFF);border-radius:22px;padding:16px}
.cos2 img{width:54px;height:54px;flex-shrink:0}
.cos2 b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:20px;color:var(--ink)}
.cos2 ol{margin:4px 0 0 18px;font-size:14px;line-height:1.6;color:var(--ink2);font-weight:600}
/* 첫 화면 제목 */
.hero-k{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:99px;background:#fff;color:var(--teal);font-weight:800;font-size:13px;box-shadow:0 2px 8px rgba(108,76,245,.12)}
.hero-t{font-family:Jua,Pretendard,sans-serif!important;font-weight:400;font-size:34px!important;line-height:1.15;margin-top:8px!important;letter-spacing:-.02em}
.hero-t .pu{background:linear-gradient(transparent 62%,#D9F77A 62%,#D9F77A 92%,transparent 92%);color:#5B3DE8;padding:0 2px}
/* 첫 화면: 제품 → 폰 → 라벨 순서로 등장(동작 줄이기에서도) */
.s3-bag{animation:s3in1 .6s cubic-bezier(.2,.9,.3,1.2) .15s both!important}
.s3-phone{animation:s3in2b .6s cubic-bezier(.2,.9,.3,1.2) .75s both!important}
.s3-lb{animation:s3pop .55s cubic-bezier(.2,.9,.3,1.3) 1.35s both!important}
.s3-in{animation:s3snap 1.6s ease-in-out 2s infinite!important}
.s3-flash{animation:s3flash 1.6s ease-out 2s infinite!important}
/* 라벨 말풍선(배지 대신) */
.s3-say{position:absolute;right:2%;top:-6%;height:34px;min-width:140px;animation:fadein .4s ease-out 1.9s both}
.s3-say span{position:absolute;right:0;top:0;white-space:nowrap;background:#fff;color:var(--ink);font-family:Jua,Pretendard,sans-serif;font-size:15px;padding:7px 13px;border-radius:16px 16px 4px 16px;box-shadow:0 6px 14px rgba(52,28,140,.16);opacity:0;animation:sayc 7.5s ease-in-out 2s infinite}
.s3-say span:nth-child(2){animation-delay:4.5s}.s3-say span:nth-child(3){animation-delay:7s}
@keyframes sayc{0%{opacity:0;transform:translateY(6px) scale(.9)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-4px)}}
.s3-lb{top:auto}

.myhero .av{border:0;cursor:pointer}
.myhero .av img{width:78px}
.myhero .avch{position:absolute;right:2px;bottom:4px;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 3px #fff;font-style:normal}
.myhero .avch svg{width:16px;height:16px}
.myhero .avname{font-size:12.5px;font-weight:800;color:var(--teal);margin-top:8px!important}
.myhero .nick{margin-top:2px}
.avgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:56vh;overflow:auto;padding-bottom:6px}
.avc{background:#fff;border-radius:18px;padding:10px 4px 8px;border:2px solid transparent;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 2px 8px rgba(52,28,140,.06)}
.avc img{width:68px;height:68px;object-fit:contain}
.avc span{font-size:12.5px;font-weight:800;color:var(--ink2)}
.avc.on{border-color:var(--teal);background:#F4F1FF}
/* ===== v64 ===== */
.mk2{color:var(--sub);font-size:13px;font-weight:600}
.mk2.avg{color:var(--mute)}
.mk2 .imp{font-style:normal;font-size:12px;font-weight:800;color:#0F7B5F;background:#E3F6EF;border-radius:5px;padding:1px 5px;margin-right:5px}
.row small{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:none!important}
.row small .mk,.row small .repv{background:none!important;padding:0!important;color:var(--sub)!important;font-weight:600!important}
.row .algw{font-size:11.5px;font-weight:900;color:#fff;background:#E2483D;border-radius:6px;padding:1px 6px}
.row .w{flex-direction:column;align-items:flex-end;gap:1px}
.row .w>span{display:flex;align-items:baseline}
.row .w em{font-style:normal;font-size:12.5px;font-weight:800;color:#E8702A;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.row .w em i{font-style:normal;font-size:12px;color:var(--mute);font-weight:600}
/* 제품 화면 영양 칸 */
.keyn .kcal{background:linear-gradient(135deg,#FFF4EC,#fff)}.keyn .kcal span{color:#E8702A;font-weight:800}
.keyn3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.keyn3 div{background:var(--card);border-radius:16px;padding:10px 12px;box-shadow:var(--sh)}
.keyn3 span{display:block;font-size:12.5px;color:var(--sub);font-weight:700}
.keyn3 b{font-size:19px;font-weight:900}.keyn3 small{font-size:12px;color:var(--sub);margin-left:1px}
/* 알레르기 경고 맨 위 */
.algtop{display:flex;gap:12px;align-items:center;background:#FFECEA;border:2px solid #F3B2AC;border-radius:18px;padding:12px 14px;margin-bottom:10px;animation:algpulse 1.6s ease-in-out 2}
.algtop img{width:36px;height:36px}.algtop b{display:block;color:#C4281C;font-size:16.5px;font-weight:900}.algtop small{font-size:12.5px;color:#8a3a33}
@keyframes algpulse{0%,100%{box-shadow:0 0 0 0 rgba(226,72,61,0)}50%{box-shadow:0 0 0 6px rgba(226,72,61,.18)}}
/* 더 나은 제품 찾기 */
.altc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.altc button:last-child:nth-child(odd),.keyn>div:last-child:nth-child(odd){grid-column:1/-1}
.altc button{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:12px;box-shadow:var(--sh);text-align:left}
.altc img{width:34px;height:34px}.altc b{font-size:15.5px;font-weight:900;display:block}.altc small{font-size:12px;color:var(--sub)}
.altc button span{display:flex;flex-direction:column}
.altc button{flex-wrap:wrap}.altc button b{flex:1}.altc button small{width:100%;margin:-6px 0 0 44px}
/* 비교 기준 카드 */
.critc{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.critc button{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:2px solid transparent;border-radius:18px;padding:10px 4px;box-shadow:var(--sh)}
.critc img{width:34px;height:34px}.critc b{font-size:14.5px;font-weight:900;color:var(--ink2)}
.critc button.on{border-color:var(--teal);background:#F4F1FF}.critc button.on b{color:var(--teal)}
.bars.in.all{margin-top:10px;background:var(--card);border-radius:var(--r-lg);padding:8px 16px;box-shadow:var(--sh)}

/* ===== v65 비교 VS · 여러 개 순위 ===== */
.cmode{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#EEEAFB;border-radius:18px;padding:5px;margin:2px 0 14px}
.cmode button{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 0;border-radius:14px;font-weight:800;font-size:15px;color:var(--sub)}
.cmode button b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:15px;color:var(--mute)}
.cmode button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(52,28,140,.12)}.cmode button.on b{color:var(--teal)}
.vsbox{background:#fff;border-radius:26px;padding:16px 12px;box-shadow:var(--sh)}
.vsrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}
.vs{font-style:normal;font-family:Jua,Pretendard,sans-serif;font-size:22px;color:#fff;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#7A5CFF,#FF8A3D);box-shadow:0 6px 14px rgba(91,61,232,.35),0 0 0 4px #fff;z-index:2}
.vsslot{position:relative;aspect-ratio:.8;border-radius:22px;border:2px dashed #D6CEF8;background:#FAF9FF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 8px;text-align:center}
.vsslot.b{border-color:#FFD3B4;background:#FFFAF6}
.vsslot .tag{position:absolute;left:10px;top:10px;width:26px;height:26px;border-radius:9px;color:#fff;font-weight:900;font-size:13.5px;display:grid;place-items:center;background:#6C4CF5}
.vsslot.b .tag{background:#FF8A3D}
.vsslot .plus{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:30px;font-weight:300;color:var(--teal);box-shadow:0 3px 10px rgba(52,28,140,.12)}
.vsslot.b .plus{color:#E8702A}
.vsslot>b{font-size:15px;font-weight:800;color:var(--ink);line-height:1.3;word-break:keep-all}
.vsslot>small{font-size:12.5px;color:var(--sub)}
.vsbtn{display:flex;gap:5px;margin-top:4px}
.vsbtn button{display:flex;align-items:center;gap:3px;padding:7px 9px;border-radius:99px;background:#fff;font-size:12.5px;font-weight:800;color:var(--ink2);box-shadow:0 2px 6px rgba(52,28,140,.1)}
.vsbtn svg{width:14px;height:14px}
.vsslot.full{border-style:solid;background:#fff}
.vsslot .ph.m{width:72px;height:72px;border-radius:18px}
.vsslot .rm{position:absolute;right:6px;top:6px;width:30px;height:30px;display:grid;place-items:center;color:var(--mute)}.vsslot .rm svg{width:16px;height:16px}
.vssay{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-family:Jua,Pretendard,sans-serif;font-size:16.5px;color:var(--ink)}
.vssay img{width:40px}
.pair2.vsp{position:relative}
.pair2.vsp .vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;font-size:18px}
/* 여러 개 순위 */
.rkempty{text-align:center;padding:24px 18px}.rkempty img{width:110px}.rkempty b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:21px;margin-top:6px}.rkempty p{font-size:14px;color:var(--sub);margin-top:6px;line-height:1.55;word-break:keep-all}
.rkhd{margin:14px 2px 8px;font-size:13.5px;font-weight:800;color:var(--sub)}
.rklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.rklist li{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:10px 6px 10px 10px;box-shadow:var(--sh)}
.rklist .no{width:30px;text-align:center;font-size:20px;font-weight:900;color:var(--mute);flex-shrink:0}
.rklist li.m1{outline:2px solid #FFC93C;background:#FFFCEF}
.rklist .tx{flex:1;min-width:0}.rklist .tx b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rklist .tx small{display:block}
.rkbar{height:6px;border-radius:3px;background:#F0EEF7;margin-top:6px;overflow:hidden}.rkbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#8F74FF,#6C4CF5)}
.rklist .val{font-size:18px;font-weight:900;text-align:right;flex-shrink:0}.rklist .val small{font-size:11.5px;color:var(--sub);margin-left:1px}
.rklist .rm{width:30px;height:30px;display:grid;place-items:center;color:#b6b9c6;flex-shrink:0}.rklist .rm svg{width:15px;height:15px}

/* 화장품 VS */
.vsslot .cosic{width:54px;height:54px}
.vsslot .vsgo{margin-top:4px;padding:7px 14px;border-radius:99px;background:#fff;font-size:13px;font-weight:800;color:var(--teal);box-shadow:0 2px 6px rgba(52,28,140,.1)}
.vsslot.b .vsgo{color:#E8702A}
.cosbad{font-size:12px;font-weight:900;color:#fff;background:#E2483D;border-radius:6px;padding:2px 7px}
.cosok{font-size:12px;font-weight:800;color:#2F6BFF;background:#EAF1FF;border-radius:6px;padding:2px 7px}
.avcard{width:100%;display:flex;align-items:center;gap:12px;margin-top:10px;padding:13px 14px;border-radius:18px;background:#fff;box-shadow:var(--sh);text-align:left}
.avcard img{width:32px;height:32px}.avcard span{flex:1;display:flex;flex-direction:column;min-width:0}.avcard b{font-size:15.5px;font-weight:800}
.avcard small{font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avcard .chev{width:18px;height:18px;color:var(--teal)}
.vsbtn{flex-direction:column;width:100%;gap:5px}
.vsbtn button{justify-content:center;white-space:nowrap;width:100%}
.rklist .no{font-size:24px}
/* v67: 그림이 모두 불러와진 뒤(.go) 제품 → 폰 → 라벨 → 찰칵 순서로 천천히 */
.stage.s3:not(.go) .s3-bag,.stage.s3:not(.go) .s3-phone,.stage.s3:not(.go) .s3-lb,.stage.s3:not(.go) .s3-say{opacity:0;animation:none!important}
.stage.s3.go .s3-bag{animation:s3in1 .7s cubic-bezier(.2,.9,.3,1.2) .2s both!important}
.stage.s3.go .s3-phone{animation:s3in2b .7s cubic-bezier(.2,.9,.3,1.2) 1.1s both!important}
.stage.s3.go .s3-lb{animation:s3pop .6s cubic-bezier(.2,.9,.3,1.3) 2s both!important}
.stage.s3.go .s3-in{animation:s3snap 1.8s ease-in-out 2.8s infinite!important}
.stage.s3.go .s3-flash{animation:s3flash 1.8s ease-out 2.8s infinite!important}
.stage.s3.go .s3-say{animation:fadein .4s ease-out 3.4s both!important}
.stage.s3.go .s3-say span{animation-delay:3.4s}
.stage.s3.go .s3-say span:nth-child(2){animation-delay:5.9s}.stage.s3.go .s3-say span:nth-child(3){animation-delay:8.4s}

/* v68 VS 빈 칸 단순화: 칸 전체가 찾기, 오른쪽 아래 동그란 바코드 버튼 */
.vsslot.e .vshit{position:absolute;inset:0;border-radius:inherit;z-index:1}
.vsslot.e .tag,.vsslot.e .plus,.vsslot.e b,.vsslot.e small{pointer-events:none}
.vsslot.e b{font-size:16px}
.vsslot.e small{font-size:12.5px;color:var(--mute);font-weight:700}
.vsscan{position:absolute;right:8px;bottom:8px;z-index:2;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#7A5CFF,#5B3DE8);color:#fff;display:grid;place-items:center;box-shadow:0 4px 10px rgba(91,61,232,.35)}
.vsslot.b .vsscan{background:linear-gradient(135deg,#FFA25E,#FF7A2E);box-shadow:0 4px 10px rgba(255,122,46,.35)}
.vsscan svg{width:20px;height:20px}
.vsslot.e{justify-content:flex-start;padding-top:34px}.vsscan{width:34px;height:34px;right:6px;bottom:6px}.vsscan svg{width:18px;height:18px}.vssay{font-size:15.5px;word-break:keep-all;text-align:left}

/* ===== v69 ===== */
.critc.six{grid-template-columns:repeat(3,1fr)}
.rkchips{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:6px}
.rkchips span{font-size:11.5px;color:var(--sub);font-weight:700}.rkchips b{color:var(--ink);font-weight:900}
.rklist li{align-items:flex-start}.rklist .no,.rklist .val,.rklist .rm{align-self:center}
/* 비교 보기: 움직이는 그라데이션 박스 */
.btn.go2{position:relative;overflow:hidden;color:#fff;border:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 52px 0 20px;gap:0;background:linear-gradient(110deg,#6C4CF5,#A35CFF,#FF8A3D,#6C4CF5);background-size:300% 100%;animation:gomove 3.5s linear infinite,gopulse 1.6s ease-in-out infinite;box-shadow:0 10px 22px rgba(108,76,245,.4)}
.btn.go2 .g2t{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:20px;line-height:1.1}
.btn.go2 .g2s{font-size:12px;font-weight:700;opacity:.9}
.btn.go2 .g2a{position:absolute;right:16px;top:50%;width:24px;height:24px;margin-top:-12px;animation:shgo 1s ease-in-out infinite}
.btn.go2:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);background-size:250% 100%;animation:shshine 2.4s ease-in-out infinite}
@keyframes gomove{to{background-position:300% 0}}
@keyframes gopulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
/* 칭찬 알림: 버튼은 아래 줄로(세로 글자 방지) */
.toast.cheer{flex-wrap:wrap;max-width:min(360px,calc(100% - 32px))}
.toast.cheer .cht{flex:1;min-width:0}
.toast.cheer .undo{flex-basis:100%;margin:2px 0 0 54px;text-align:left;white-space:nowrap;text-decoration:none;font-weight:900}
.toast.cheer .undo:after{content:' ›'}
/* 요약 카드: 흰 바탕 + 진한 글자(보라 바탕 대비 부족 해결) */
.summary{background:#fff!important;color:var(--ink)!important;border:2px solid #E4DCFF;box-shadow:0 10px 24px rgba(52,28,140,.10)!important}
.summary p{color:var(--sub)!important}.summary h2{color:var(--ink)!important}.summary ul li{color:var(--ink2)!important}
.summary ul{border-top-color:#EEE9FB!important}
.summary em.lo,.summary li em.lo{color:#1D5BF0!important;background:#EAF1FF}.summary em.hi,.summary li em.hi{color:#D93A30!important;background:#FFECEA}
.summary .pn{font-weight:900;padding:0 4px;border-radius:6px}.summary .pn.a{color:#5B3DE8;background:#F1EDFF}.summary .pn.b{color:#D9631F;background:#FFF0E5}
.summary.ask2,.summary.block{border-color:#FFE1CC}
/* 막대: 제품 사진·이름 */
.ln2{margin-top:10px}
.ln2 .who{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--ink2)}
.ln2 .who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph.xs{width:26px;height:26px;border-radius:8px;padding:0}.ph.xs img{padding:6%}.ph.xs svg{width:14px;height:14px}
.ln2.a .who span{color:#5B3DE8}.ln2.b .who span{color:#D9631F}
.ln2 .row3{display:flex;align-items:center;gap:10px;margin-top:4px}
.ln2 .tr{flex:1;height:12px;border-radius:99px;background:#F2F0F8;overflow:hidden}
.ln2 .fl{height:100%;border-radius:99px;width:0;transition:width 700ms cubic-bezier(.2,.8,.2,1)}
.ln2 .v{min-width:86px;text-align:right;font-size:17px;font-weight:900}
/* 전체 효과: 화면 들어올 때 카드가 차례로 떠오르기 */
.scr:not([hidden])>*:not(header){animation:riseup .45s cubic-bezier(.2,.8,.2,1) both}
.scr:not([hidden])>*:nth-child(2){animation-delay:.04s}.scr:not([hidden])>*:nth-child(3){animation-delay:.08s}.scr:not([hidden])>*:nth-child(4){animation-delay:.12s}
#cmp>*,#prod>*,#my>*,#srchBody>*{animation:riseup .45s cubic-bezier(.2,.8,.2,1) both}
#cmp>*:nth-child(2),#prod>*:nth-child(2),#my>*:nth-child(2){animation-delay:.05s}#cmp>*:nth-child(3),#prod>*:nth-child(3),#my>*:nth-child(3){animation-delay:.1s}#cmp>*:nth-child(4),#prod>*:nth-child(4),#my>*:nth-child(4){animation-delay:.15s}#cmp>*:nth-child(n+5),#prod>*:nth-child(n+5),#my>*:nth-child(n+5){animation-delay:.2s}
.rklist li{animation:riseup .4s cubic-bezier(.2,.8,.2,1) both}.rklist li:nth-child(2){animation-delay:.06s}.rklist li:nth-child(3){animation-delay:.12s}.rklist li:nth-child(n+4){animation-delay:.18s}
@keyframes riseup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.btn:active,.critc button:active,.altc button:active,.vsslot:active,.row:active{transform:scale(.97)}
.critc button.on{animation:pick .35s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pick{0%{transform:scale(.92)}100%{transform:none}}
.rklist .rkchips b{display:inline!important;font-size:11.5px;white-space:nowrap}.rkchips span{white-space:nowrap;background:#F6F4FB;border-radius:6px;padding:1px 6px}
.rkchips{display:grid!important;grid-template-columns:1fr 1fr;gap:4px}.rkchips span{display:block}.summary .pn{margin-right:1px;padding:0 3px}

/* ===== v70: A 빨강 · B 파랑 ===== */
:root{--ca:#F0423C;--cb:#2F6BFF}
.vs{background:linear-gradient(135deg,var(--ca),var(--cb))!important}
.vsslot .tag,.pr2 .tag,.algc .ac i{background:var(--ca)!important}
.vsslot.b .tag,.pr2.b .tag,.algc .ac+.ac i{background:var(--cb)!important}
.vsslot{border-color:#FFC9C6!important;background:#FFF8F7!important}.vsslot.b{border-color:#C6D6FF!important;background:#F6F9FF!important}
.vsslot.full{background:#fff!important}
.vsslot .plus{color:var(--ca)!important}.vsslot.b .plus{color:var(--cb)!important}
.vsscan{background:linear-gradient(135deg,#FF6A5E,#E2342B)!important;box-shadow:0 4px 10px rgba(226,52,43,.35)!important}
.vsslot.b .vsscan{background:linear-gradient(135deg,#5B8CFF,#2F6BFF)!important;box-shadow:0 4px 10px rgba(47,107,255,.35)!important}
.vsslot .vsgo{color:var(--ca)!important}.vsslot.b .vsgo{color:var(--cb)!important}
.ln2 .fl.a,.bar .fl.a,.bar.sel .fl.a{background:var(--ca)!important}.ln2 .fl.b,.bar .fl.b,.bar.sel .fl.b{background:var(--cb)!important}
.bar:not(.sel) .ln2 .fl.a{background:#F7A19D!important}.bar:not(.sel) .ln2 .fl.b{background:#9DB9FF!important}
.ln2.a .who span{color:#D93A30!important}.ln2.b .who span{color:#1D5BF0!important}
.summary .pn.a{color:#D93A30!important;background:#FFECEA!important}.summary .pn.b{color:#1D5BF0!important;background:#EAF1FF!important}
.summary em.lo,.summary li em.lo,.summary em.hi,.summary li em.hi{color:var(--ink)!important;background:none!important;font-weight:900;border-bottom:3px solid #D9F77A}
.pc-two .ta{background:var(--ca)!important}.pc-two .tb{background:var(--cb)!important}
/* 원재료 분석 화면 */
.ig-hero{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#F3EEFF,#EAF7F2);border-radius:22px;padding:14px 16px}
.ig-hero img{width:62px;height:auto}.ig-hero b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:20px}.ig-hero small{font-size:13px;color:var(--sub)}
.ig-steps{display:flex;gap:6px;margin:10px 0}
.ig-steps span{flex:1;display:flex;align-items:center;gap:5px;justify-content:center;background:#fff;border-radius:12px;padding:8px 4px;font-size:12.5px;font-weight:800;color:var(--ink2);box-shadow:var(--sh)}
.ig-steps i{font-style:normal;width:18px;height:18px;border-radius:50%;background:var(--teal);color:#fff;font-size:12px;display:grid;place-items:center}
.ig-shot{width:100%;display:flex;align-items:center;gap:14px;padding:16px;border-radius:22px;color:#fff;text-align:left;background:linear-gradient(135deg,#7A5CFF,#5B3DE8);box-shadow:0 10px 22px rgba(91,61,232,.32);position:relative;overflow:hidden}
.ig-shot:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 48%,transparent 66%);background-size:250% 100%;animation:shshine 2.8s ease-in-out infinite}
.ig-cam{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.18);display:grid;place-items:center}.ig-cam svg{width:28px;height:28px}
.ig-shot span:nth-child(2){flex:1;display:flex;flex-direction:column}.ig-shot b{font-size:18px;font-weight:900}.ig-shot small{font-size:13px;opacity:.85}.ig-shot .chev{width:20px;height:20px}
.ig-or{display:flex;align-items:center;gap:10px;margin:16px 0 8px;color:var(--mute);font-size:12.5px;font-weight:800}
.ig-or:before,.ig-or:after{content:'';flex:1;height:1px;background:var(--line)}
.ig-box{position:relative;background:#fff;border-radius:18px;border:1.5px solid #E6E1FA;padding:12px 12px 44px}
.ig-box textarea{width:100%;border:0;outline:none;resize:none;font-size:15px;line-height:1.6;background:none;color:var(--ink)}
.ig-paste{position:absolute;right:10px;bottom:10px;padding:7px 14px;border-radius:99px;background:#F1EDFF;color:var(--teal);font-weight:800;font-size:13px}
.ig-go{width:100%;margin-top:10px}
.ig-alg,.ig-dict{width:100%;display:flex;align-items:center;gap:12px;margin-top:10px;padding:13px 14px;border-radius:18px;background:#fff;box-shadow:var(--sh);text-align:left}
.ig-alg img,.ig-dict img{width:32px;height:32px}.ig-alg span,.ig-dict span{flex:1;display:flex;flex-direction:column;min-width:0}
.ig-alg b,.ig-dict b{font-size:15.5px;font-weight:800}.ig-alg small,.ig-dict small{font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-alg .chev,.ig-dict .chev{width:18px;height:18px;color:var(--teal)}

/* ===== v72 ===== */
/* 막대: 쭉 자라기 + 더 높은 쪽 강조 */
.ln2 .fl{transition:width 1100ms cubic-bezier(.16,1,.3,1)!important}
.ln2 .tr{height:12px;transition:height .3s}
.ln2.win .tr{height:20px}
.ln2.win .v{font-size:22px!important;transform-origin:right center;animation:winpop .5s cubic-bezier(.2,.9,.3,1.4) 1.1s both}
.ln2.win .who span{font-weight:900}
.ln2.win .who:after{content:'더 많아요';margin-left:4px;white-space:nowrap;flex:none;font-size:12px;font-weight:900;color:#fff;background:var(--ink);border-radius:6px;padding:1px 6px;animation:fadein .3s 1.2s both}
.ln2:not(.win) .v{color:var(--sub)}
@keyframes winpop{0%{transform:scale(.8)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
/* 첫 화면 장면 v3 */
.stage.s3.v3>*{position:absolute}
.v3-duo{left:2%;bottom:20%;width:38%;height:auto;filter:drop-shadow(0 12px 14px var(--pu-sh))}
.v3-ph{left:41%;bottom:24%;width:21%;height:auto;filter:drop-shadow(0 12px 14px var(--pu-sh))}
.v3-lb{right:-1%;bottom:18%;width:35%;height:auto;transform-origin:70% 80%;filter:drop-shadow(0 12px 14px var(--pu-sh))}
.v3-fl{right:21%;top:22%;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,255,255,.7) 30%,rgba(255,226,154,.45) 55%,transparent 72%);opacity:0}
.v3-ring{bottom:26%;width:60px;height:60px;border-radius:50%;border:3px solid #7CFF9B;box-shadow:0 0 12px rgba(124,255,155,.6);opacity:0}
.v3-ring.r1{left:5%}.v3-ring.r2{left:22%;bottom:23%;width:54px;height:54px}
.stage.s3.v3:not(.go)>*:not(.s3-floor){opacity:0;animation:none!important}
.stage.s3.v3.go .v3-duo{animation:inUp3 .7s cubic-bezier(.2,.9,.3,1.2) .2s both!important}
.stage.s3.v3.go .v3-ph{animation:inR3 .7s cubic-bezier(.2,.9,.3,1.2) 1.1s both,flo3 2.4s ease-in-out 1.8s infinite!important}
.stage.s3.v3.go .v3-lb{animation:pop3 .6s cubic-bezier(.2,.9,.3,1.3) 2s both,snap3 2s ease-in-out 2.8s infinite!important}
.stage.s3.v3.go .v3-fl{animation:flash3 2s ease-out 2.8s infinite!important}
.stage.s3.v3.go .v3-ring.r1{animation:ring3 4s 2.8s infinite!important}
.stage.s3.v3.go .v3-ring.r2{animation:ring3 4s 4.8s infinite!important}
.stage.s3.v3.go .s3-say{animation:fadein .4s ease-out 3.4s both!important}
@keyframes inUp3{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
@keyframes inR3{from{opacity:0;transform:translateX(40px) rotate(10deg)}to{opacity:1;transform:none}}
@keyframes pop3{from{opacity:0;transform:scale(.3)}70%{transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes flo3{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes snap3{0%,40%{transform:none}48%{transform:rotate(-6deg) scale(1.04)}60%,100%{transform:none}}
@keyframes flash3{0%,44%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.3)}66%,100%{opacity:0;transform:scale(1.8)}}
@keyframes ring3{0%,10%{opacity:0;transform:scale(.6)}18%,35%{opacity:1;transform:scale(1)}45%,100%{opacity:0;transform:scale(1.3)}}
/* ===== v73 ===== */
/* 첫 화면 로고: 투명 가로 라벨 + 제목과 같은 Jua 글자 */
.hero .hd .logo{display:flex;align-items:center;gap:7px}
.logo-tag{height:30px;width:auto;display:block;filter:drop-shadow(0 3px 6px rgba(52,28,140,.16))}
.logo-tx{font-family:Jua,Pretendard,sans-serif;font-size:27px;line-height:1;color:var(--ink);letter-spacing:-.01em}
/* 기준 탭 아이콘(힉스필드 그림) */
.critc img{width:38px;height:38px;object-fit:contain}
.altc img{object-fit:contain}
/* 바코드 화면: 확인 버튼 잘림 고치기 + 글자 잘 보이게 */
.camrow .codebox{min-width:0}
.codebox button{flex-shrink:0;min-width:76px;padding:0 18px;font-size:17px;font-weight:900;box-shadow:0 6px 16px rgba(91,61,232,.45)}
.codebox input{background:rgba(255,255,255,.16)!important;border:1.5px solid rgba(255,255,255,.28);font-weight:700;color:#fff}
.codebox input::placeholder{color:rgba(255,255,255,.82)}
.codebox input:focus{outline:0;border-color:var(--lime);background:rgba(255,255,255,.22)!important}
.camguide span{background:rgba(14,10,36,.72);border:1px solid rgba(255,255,255,.18);padding:9px 16px;border-radius:99px;font-size:15.5px;font-weight:800;text-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.camguide img{width:36px}
.cambot{background:linear-gradient(0deg,#0E0A24 70%,rgba(14,10,36,0))}
.camrec small{color:#fff;opacity:.9;font-size:13.5px;font-weight:800}
.camrec button{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);font-size:14.5px;font-weight:800;padding:9px 15px}
.cammode{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.12)}
.cammode button,.cammode label{color:#fff!important;font-size:16px;font-weight:800;opacity:.92}
.cammode .on{color:#17142B!important;opacity:1;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.camrow .gal{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22)}
.camttl{font-size:21px;text-shadow:0 2px 8px rgba(0,0,0,.35)}
/* 기록 탭: 오늘 열량 막대 + 일반식 바로 넣기 */
.kbar{background:#fff;border-radius:22px;padding:16px 18px;box-shadow:var(--sh);margin:4px 0 12px}
.kbar .kt{display:flex;align-items:baseline;gap:6px}.kbar .kt b{font-size:30px;font-weight:900;color:var(--ink)}.kbar .kt span{color:var(--sub);font-weight:700}.kbar .kt em{margin-left:auto;font-style:normal;font-family:Jua,Pretendard,sans-serif;color:var(--teal)}
.kbar .kb{height:12px;border-radius:99px;background:#EEEAFF;margin-top:10px;overflow:hidden}.kbar .kb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8F74FF,#6C4CF5);transition:width .9s cubic-bezier(.16,1,.3,1)}
.dishadd{background:linear-gradient(135deg,#F4F1FF,#fff);border:1.5px solid #E4DEFF;border-radius:22px;padding:14px;margin-bottom:14px}
.dishadd .dh{display:flex;gap:10px;align-items:center}.dishadd .dh img{width:40px;height:40px}.dishadd .dh b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:17px;color:var(--ink)}.dishadd .dh small{color:var(--sub);font-size:13px;font-weight:600}
.dchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.dchips button{padding:8px 13px;border-radius:99px;background:#fff;border:1.5px solid #E4DEFF;font-weight:800;font-size:14px;color:var(--ink2)}
.dchips button.more{background:var(--teal);border-color:var(--teal);color:#fff}
.dchips button:active{transform:scale(.95)}
/* 기록 탭: 최근 7일 그래프 */
.week{background:#fff;border-radius:22px;padding:16px 16px 12px;box-shadow:var(--sh);margin-bottom:12px}
.wk-h{display:flex;align-items:center;justify-content:space-between}.wk-h>b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:18px;color:var(--ink)}
.wk-tabs{display:flex;background:#F2EFFF;border-radius:99px;padding:3px}
.wk-tabs button{padding:5px 11px;border-radius:99px;font-size:13px;font-weight:800;color:var(--sub)}
.wk-tabs button.on{background:#fff;color:var(--teal);box-shadow:0 2px 6px rgba(52,28,140,.12)}
.wk-sum{margin:8px 0 4px;font-size:13.5px;color:var(--sub);font-weight:600}.wk-sum b{color:var(--ink)}.wk-sum b.over{color:var(--ca)}
.wk-chart{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:150px;padding-top:18px;margin-top:6px}
.wk-goal{position:absolute;left:0;right:0;bottom:calc(22px + (100% - 56px) * var(--g));border-top:2px dashed #C9BEFF;pointer-events:none;z-index:1}
.wk-goal span{position:absolute;right:0;top:-18px;font-size:12px;font-weight:800;color:#8F74FF;background:#fff;padding:0 4px}
.wk-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;background:none;border:0;padding:0;height:100%}
.wk-v{font-size:12px;font-weight:800;color:var(--sub);height:16px;white-space:nowrap}
.wk-bar{flex:1;width:100%;max-width:26px;display:flex;align-items:flex-end;background:#F4F1FF;border-radius:9px;overflow:hidden}
.wk-bar i{display:block;width:100%;border-radius:9px;background:linear-gradient(180deg,#A28CFF,#6C4CF5);animation:wkup .8s cubic-bezier(.16,1,.3,1) both}
.wk-bar i.over{background:linear-gradient(180deg,#FF7A73,#F0423C)}
.wk-col em{font-style:normal;font-size:12px;font-weight:800;color:var(--mute);margin-top:5px;height:17px}
.wk-col.cur em{color:#fff;background:var(--teal);border-radius:99px;padding:0 7px}
.wk-col.cur .wk-v{color:var(--ink)}
@keyframes wkup{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.wk-goal span{font-style:normal}
/* 기준치 넘으면: 빨간 막대 + 흔들림 */
.kbar.over{background:linear-gradient(135deg,#FFF1F0,#fff);box-shadow:0 0 0 2px #FFD0CC,var(--sh);animation:kshake .55s cubic-bezier(.36,.07,.19,.97) .35s both}
.kbar.over .kt b{color:var(--ca)}.kbar.over .kt em{color:var(--ca);font-size:14px}
.kbar.over .kb{background:#FFE1DE}.kbar.over .kb i{background:linear-gradient(90deg,#FF8A80,#F0423C);animation:kpulse 1.6s ease-in-out 1s infinite}
@keyframes kshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes kpulse{0%,100%{filter:none}50%{filter:brightness(1.15) drop-shadow(0 0 6px rgba(240,66,60,.6))}}
.dupn{font-size:12px;color:var(--mute);font-weight:600}
.hlic img{object-fit:contain}
/* 첫 화면 로고: 예전처럼 흰 둥근 글자, 연하게 */
.logo-tx{color:#fff!important;text-shadow:0 2px 6px rgba(108,76,245,.35),0 0 1px rgba(108,76,245,.5);font-size:28px}
.hero .hd .logo{opacity:.92}
.logo-tag{filter:drop-shadow(0 2px 5px rgba(108,76,245,.22))}
@media (prefers-reduced-motion:reduce){
  .kbar.over{animation:kshake .55s cubic-bezier(.36,.07,.19,.97) .35s both!important}
  .kbar.over .kb i{animation:kpulse 1.6s ease-in-out 1s infinite!important}
  .wk-bar i{animation:wkup .8s cubic-bezier(.16,1,.3,1) both!important}
  .kbar .kb i{transition:width .9s cubic-bezier(.16,1,.3,1)!important}
}
/* ===== v76 ===== */
/* 첫 화면 로고: 보라 테두리 없이, 글자 작게, 반투명해서 뒤 배경이 비치게 */
.logo-tag{filter:none!important;height:26px;opacity:.78}
.logo-tx{text-shadow:none!important;font-size:21px!important;color:#fff!important;opacity:.95;-webkit-text-stroke:0}
.hero .hd .logo{opacity:1!important;gap:6px}
/* 맨 위 시계 줄: 화면을 올릴 때 글자가 흐릿하게 비치지 않도록 배경색으로 덮기 */
.stcover{position:fixed;top:0;left:0;right:0;height:var(--st);background:var(--bg);z-index:35;pointer-events:none}
.stcover{opacity:0;transition:opacity .15s}
body.scrolled .stcover{opacity:1}
/* 기록: 기준치 넘은 칸은 숫자·글자 모두 빨강 */
.keyn>div.over{background:linear-gradient(135deg,#FFF1F0,#fff);box-shadow:0 0 0 2px #FFD0CC,var(--sh)}
.keyn>div.over b,.keyn>div.over b small,.keyn>div.over em,.keyn>div.over span{color:var(--ca)!important}
.kbar.over .kt span{color:var(--ca)}
/* ml·g 다른 제품 비교 안내 */
.approxn{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 14px;border-radius:16px;background:#FFF8E6;border:1px solid #FFE3A3;color:#7A5200;font-size:13.5px;font-weight:700;line-height:1.45}
.approxn img{width:34px;height:auto;flex-shrink:0}
/* ===== v78 ===== */
/* 홈 맨 위 영어 로고: 흰 글자 + 보라 그라데이션 테두리(빛) */
.logo-en{height:34px;width:auto;display:block;overflow:visible}
.logo-en text{font-family:Fredoka,Jua,sans-serif;font-weight:700;font-size:34px;letter-spacing:.5px}
.logo-en .lg-stroke{fill:none;stroke:url(#lgG);stroke-width:7;stroke-linejoin:round}
.logo-en .lg-fill{fill:#fff}
.hero .hd .logo{opacity:1!important}
/* 생활 도구 4칸 */
.tools4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tools4 button{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;background:#fff;border-radius:20px;padding:14px;box-shadow:var(--sh)}
.tools4 img{grid-row:span 2;width:44px;height:44px}.tools4 b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:16.5px;color:var(--ink)}.tools4 small{font-size:12.5px;color:var(--sub);font-weight:600}
.tools4 button:active{transform:scale(.97)}
/* 홈 화면 추가 안내 */
.a2hs{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#F1EDFF,#fff);border:1.5px solid #E1D9FF;border-radius:20px;padding:12px 12px 12px 14px;margin-bottom:14px}
.a2hs img{width:40px;height:40px;border-radius:11px}.a2hs div{flex:1;min-width:0}.a2hs b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:16px}.a2hs small{color:var(--sub);font-size:12.5px;font-weight:600}
.a2hs .x{width:30px;height:30px;border-radius:50%;color:var(--mute);font-size:20px}
/* 장보기 목록 */
.qbox .addb{flex-shrink:0;height:40px;padding:0 16px;border-radius:99px;background:var(--teal);color:#fff;font-weight:800;margin-right:4px}
.shopl .row{display:flex;align-items:center;gap:10px}.shopl .row.done .nm{text-decoration:line-through;color:var(--mute)}
.shopl .ck{width:30px;height:30px;flex-shrink:0;border-radius:50%;border:2px solid #CFC5FF;color:#fff;font-weight:900;display:grid;place-items:center}
.shopl .row.done .ck{background:var(--teal);border-color:var(--teal)}
/* 냉장고 */
.frl .row{display:flex;align-items:center;gap:10px}
.dd{flex-shrink:0;padding:5px 10px;border-radius:99px;background:#EEEAFF;color:var(--teal);font-weight:900;font-size:13.5px}
.dd.soon{background:#FFE9E7;color:var(--ca)}.dd.gone{background:var(--ca);color:#fff}
.frb{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border-radius:20px;padding:14px;box-shadow:var(--sh);margin:12px 0}
.frb img{width:38px;height:38px}.frb span{flex:1}.frb b{display:block;font-weight:900;color:var(--ink)}.frb small{color:var(--sub);font-size:13px}.frb .chev{width:18px;height:18px;color:var(--mute)}
/* 가족 알레르기 */
.famc{background:#fff;border-radius:20px;padding:14px;box-shadow:var(--sh);margin-top:12px}
.famh{display:flex;align-items:center;gap:8px}.famh b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:18px}.famh small{flex:1;color:var(--sub);font-size:12.5px;font-weight:600}
.algs.pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.algs.pick button{padding:6px 11px;border-radius:99px;background:#F4F1FF;font-size:13px;font-weight:800;color:var(--ink2)}
.algs.pick button.on{background:var(--ca);color:#fff}
.famw{display:flex;gap:10px;align-items:flex-start;background:#FFF1F0;border:1.5px solid #FFD0CC;border-radius:18px;padding:12px 14px;margin-bottom:12px}
.famw img{width:30px;height:30px}.famw b{color:var(--ca);font-weight:900}.famw p{margin:2px 0 0;font-size:14px;font-weight:700;color:var(--ink2)}.famw em{font-style:normal;color:var(--ca);margin-right:4px}
/* 오늘 남은 양 */
.leftc{background:#fff;border-radius:20px;padding:14px;box-shadow:var(--sh);margin-top:12px}
.leftc .lh b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:17px}.leftc .lh small{display:block;color:var(--sub);font-size:12.5px;font-weight:600}
.leftc .lg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.leftc .lg>div{background:#F6F4FF;border-radius:14px;padding:10px}.leftc .lg span{display:block;font-size:12.5px;color:var(--sub);font-weight:700}
.leftc .lg b{font-size:19px;font-weight:900;color:var(--ink)}.leftc .lg b small{font-size:12px}.leftc .lg em{display:block;font-style:normal;font-size:11.5px;color:var(--sub);font-weight:600}
.leftc .lg>div.over{background:#FFF1F0}.leftc .lg>div.over b,.leftc .lg>div.over em,.leftc .lg>div.over span{color:var(--ca)}
/* 영양제 겹침·약 주의 */
.ovl{background:#F6F4FF;border-radius:16px;padding:12px 14px;margin:12px 0}.ovl>b{font-weight:900}.ovl p{margin:6px 0 0;font-size:13.5px}.ovl p span{font-weight:800;margin-right:6px}.ovl p small{display:block;color:var(--sub)}
.ovl p.bad{color:var(--ca)}.ovl p.bad small{color:var(--ca);font-weight:800}.ovl.ok{background:#EFFAF3}
.supw.ok{background:#EFFAF3}
/* 주간 리포트 이미지 단추 */
.wkimg{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:7px 12px;border-radius:99px;background:#F2EFFF;color:var(--teal);font-weight:800;font-size:13px}
.wkimg svg{width:16px;height:16px}
/* 영수증 결과 */
.rcl .row{display:flex;align-items:center;gap:10px}.rcl input{width:22px;height:22px;accent-color:#6C4CF5;flex-shrink:0}
/* ===== v79 ===== */
/* 홈 6칸: 새 기능, 그림 크게 */
.tiles.six{grid-template-columns:1fr 1fr;gap:10px}
.tiles.six .tile{min-height:112px}
.tiles.six .tile img{width:58px;height:58px;right:8px;bottom:8px;object-fit:contain}
.tile.lav{background:#ECE7FF;color:#3E2A9E}.tile.peach{background:#FFEBDD;color:#7A3A0E}
/* 회수 안내: 맨 위, 눈에 띄게 */
.trust.top{margin:0 0 14px;background:linear-gradient(135deg,#FFF3F2,#fff);border:1.5px solid #FFD7D3}
.trust.top b{color:#B4231B}
/* 기록 탭 날짜: 누르면 달력 */
.daylbl{display:inline-flex;align-items:center;gap:6px;font-size:18px;font-weight:900;color:var(--ink);padding:8px 12px;border-radius:12px}
.daylbl svg{width:20px;height:20px;color:var(--teal)}
.daylbl .caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--mute)}
.daylbl:active{background:#F2EFFF}
.calh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.calh b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:20px}.calh .ic:disabled{opacity:.3}
.calw,.calg{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:4px}
.calw span{font-size:12.5px;font-weight:800;color:var(--mute);padding:4px 0}.calw span:first-child{color:var(--ca)}
.calg button{position:relative;aspect-ratio:1;border-radius:12px;font-weight:800;font-size:15px;color:var(--ink2);background:#F7F5FF}
.calg button:disabled{opacity:.3}
.calg button.today{box-shadow:inset 0 0 0 2px #CFC5FF}
.calg button.sel{background:var(--teal);color:#fff}
.calg button i{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#8F74FF}
.calg button i.over{background:var(--ca)}.calg button.sel i{background:#fff}
.calk{display:flex;gap:14px;justify-content:center;font-size:12.5px;color:var(--sub);font-weight:700;margin:12px 0}
.calk i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8F74FF;margin-right:5px}.calk i.over{background:var(--ca)}
/* 공유하기 */
.sharec{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:linear-gradient(135deg,#FFF9DB,#fff);border:1.5px solid #FBE7A1;border-radius:20px;padding:13px 14px;margin:12px 0;box-shadow:var(--sh)}
.sharec .si{width:42px;height:42px;flex-shrink:0;border-radius:14px;background:#FEE500;color:#3A1D1D;display:grid;place-items:center}
.sharec .si svg{width:22px;height:22px}
.sharec span:nth-child(2){flex:1;min-width:0}.sharec b{display:block;font-weight:900;color:var(--ink)}.sharec small{color:var(--sub);font-size:12.5px;font-weight:600}
.sharec .chev{width:18px;height:18px;color:var(--mute)}
.sharec:active{transform:scale(.98)}
.wkbtns{display:flex;gap:6px;flex-wrap:wrap}
.sharetx{width:100%;min-height:150px;border-radius:14px;border:1px solid var(--line);padding:12px;font:inherit;font-size:14px}
/* ===== v81: 홈 기능 아이콘(두 줄, 옆으로 넘김) ===== */
.feat{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:16px -16px 0;-webkit-overflow-scrolling:touch}
.feat::-webkit-scrollbar{display:none}
.fpage{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:repeat(6,1fr);row-gap:14px;padding:0 10px;box-sizing:border-box;align-content:start}
.fi{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;min-width:0}
.fic{position:relative;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(52,28,140,.10);display:grid;place-items:center}
.fic img{width:36px;height:36px;object-fit:contain}
.fic em{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:var(--ca);color:#fff;font-style:normal;font-size:12px;font-weight:900;display:grid;place-items:center}
.fn{font-size:12px;font-weight:700;color:var(--ink2);letter-spacing:-.04em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.fi:active .fic{transform:scale(.92)}
.fdots{display:flex;justify-content:center;gap:0;margin:12px 0 4px}
.fdots i{width:22px;height:4px;background:#E2DCFA}.fdots i:first-child{border-radius:4px 0 0 4px}.fdots i:last-child{border-radius:0 4px 4px 0}
.fdots i.on{background:var(--ink);border-radius:4px}
@media (max-width:360px){.fic{width:46px;height:46px}.fic img{width:32px;height:32px}.fn{font-size:12px}}
/* v82: 홈 영어 로고 절반 크기 */
.logo-en{height:18px!important}
/* v83: 장보기·기능 아이콘 따로, 숫자 표시 잘림·회수 칸 겹침 고침 */
.feat{padding-top:8px}
.fsec{display:flex;align-items:baseline;gap:8px;margin-top:20px}.fsec small{font-family:Pretendard,sans-serif;font-size:12.5px;color:var(--mute);font-weight:600}
.fic.food{background:#FFF8EC}
.fic em{top:-4px;right:-4px;box-shadow:0 0 0 2px #fff}
.trust.top{margin:14px 0 6px!important}
.a2hs{margin:14px 0 0}.a2hs+.trust.top{margin-top:10px!important}
/* v85: 기능 네 묶음(쓰임새별, 묶음마다 색 하나) */
.fgroups{display:grid;gap:12px;margin-top:10px}
.fg{background:#fff;border-radius:22px;padding:14px 12px 12px;box-shadow:var(--sh);position:relative;overflow:hidden}
.fg:before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--fgc)}
.fg header{display:flex;align-items:baseline;gap:8px;padding:0 4px 10px}
.fg header b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:17px;color:var(--fgc)}
.fg header small{font-size:12.5px;color:var(--mute);font-weight:600}
.fg4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.fg .fic{width:54px;height:54px;background:var(--fgb);box-shadow:none}
.fg .fic img{width:36px;height:36px}
.fg .fn{font-size:12.5px;font-weight:800}
.fg.safe{--fgc:#E0453D;--fgb:#FFF0EE}
.fg.log{--fgc:#6C4CF5;--fgb:#F1EDFF}
.fg.find{--fgc:#2F6BFF;--fgb:#EAF1FF}
.fg.med{--fgc:#13A06B;--fgb:#E7F7F0}
/* 영양성분표 찍어서 자동 채우기 */
.lblshot{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:linear-gradient(135deg,#7A5CFF,#5B3DE8);color:#fff;border-radius:20px;padding:14px 16px;margin:6px 0 12px;box-shadow:0 8px 20px rgba(91,61,232,.3)}
.lblshot img{width:42px;height:42px}.lblshot b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:17px}.lblshot small{font-size:12.5px;opacity:.9}
.okmsg{background:#EFFAF3;color:#11734F;border-radius:14px;padding:10px 14px;font-weight:700;font-size:14px;margin:0 0 10px}
.btn.big{width:100%;margin-top:12px}
/* 사용자 제공 올리기 */
.cblist{margin:8px 0;padding-left:18px;font-size:13.5px;color:var(--sub);line-height:1.6}
.cbfront{display:flex;align-items:center;gap:8px;margin:6px 0 12px}.cbfront span{color:var(--teal);font-weight:800;font-size:14px;cursor:pointer}.cbfront em{font-style:normal;color:#11734F;font-weight:800;font-size:13px}
/* ===== v90 ===== */
/* 비교 결론: 라벨이 말하는 말풍선 */
.sumtop{display:flex;align-items:flex-end;gap:8px}
.sumlb{width:58px;height:auto;flex-shrink:0;margin-bottom:-4px;filter:drop-shadow(0 6px 8px rgba(52,28,140,.18));animation:sumwave 2.6s ease-in-out infinite}
.sumtop .bub{position:relative;flex:1;min-width:0;background:linear-gradient(135deg,#F4F1FF,#fff);border:1.5px solid #E1D9FF;border-radius:20px 20px 20px 6px;padding:10px 14px 12px}
.sumtop .bub:before{content:'';position:absolute;left:-9px;bottom:10px;border:8px solid transparent;border-right-color:#E1D9FF}
.sumtop .bub p{margin:0 0 2px}.sumtop .bub h2{margin:0}
@keyframes sumwave{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
/* 기록: 끼니별 묶음 */
.mealh{display:flex;align-items:baseline;justify-content:space-between;margin:14px 4px 6px}
.mealh b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:17px;color:var(--teal)}.mealh span{font-size:13px;color:var(--sub);font-weight:700}
.ex.meal{display:flex;gap:6px;flex-wrap:wrap}
/* 다시 먹기 */
.again{background:#fff;border-radius:20px;padding:12px 14px;box-shadow:var(--sh);margin-bottom:12px}
.again>b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:16px}
.agch{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin-top:8px;padding-bottom:2px}.agch::-webkit-scrollbar{display:none}
.agch button{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;padding:8px 12px;border-radius:14px;background:#F4F1FF;font-weight:800;font-size:13.5px;color:var(--ink2);max-width:170px}
.agch button small{font-size:11.5px;color:var(--sub);font-weight:600}
.agch button:active{transform:scale(.95)}
/* 내가 올린 제품 */
.mycard.contrib{padding:14px}
.cbsum{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;margin-bottom:8px}.cbsum b{font-size:22px;font-weight:900;color:var(--teal)}.cbsum span{font-size:13px;color:var(--sub);font-weight:700;margin-right:8px}
.cbrow{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:14px;font-weight:700}
.cbrow em{font-style:normal;font-size:12.5px;color:var(--sub);text-align:right;flex:none}.cbrow span{min-width:0}.cbrow em.st-ok{color:#11734F}.cbrow em.st-no{color:var(--ca)}.mycard.contrib .cbrow:first-of-type{border-top:0}
@media (prefers-reduced-motion:reduce){.sumlb{animation:sumwave 2.6s ease-in-out infinite!important}}
/* ===== v91 ===== */
/* 쿠팡에서 주문하기 */
.buyb.cp{background:var(--card);border:0}
.cplogo{flex-shrink:0;display:inline-flex;align-items:baseline;font-family:Fredoka,Pretendard,sans-serif;font-weight:700;font-size:21px;letter-spacing:-.5px;padding:8px 10px;border-radius:14px;background:#F7F7FA}
.cplogo i{font-style:normal}.cplogo i:nth-child(1){color:#8B1E1E}.cplogo i:nth-child(2){color:#E52528}.cplogo i:nth-child(3){color:#F4A11A}.cplogo i:nth-child(4){color:#7DBB2F}.cplogo i:nth-child(5){color:#2AA0DA}.cplogo i:nth-child(6){color:#2AA0DA}.cplogo i:nth-child(7){color:#2AA0DA}
.buyb.cp b{color:var(--ink)}
/* 가격 비교: 제품 이름 빨강·파랑 */
.pn.a{color:var(--ca)}.pn.b{color:var(--cb)}
.pc-pro{margin:10px 0 0;font-size:14px;font-weight:700;line-height:1.6;color:var(--ink2)}
/* 저장한 비교: 빨강·파랑 */
.sv .tx{display:flex;flex-direction:column;gap:4px}
.svn{display:flex;align-items:center;gap:6px;font-weight:900;font-size:15.5px;line-height:1.3}
.svn i{flex-shrink:0;width:20px;height:20px;border-radius:7px;color:#fff;font-style:normal;font-size:11.5px;display:grid;place-items:center}
.svn.a{color:var(--ca)}.svn.a i{background:var(--ca)}.svn.b{color:var(--cb)}.svn.b i{background:var(--cb)}
.sv{border-left:5px solid transparent;border-image:linear-gradient(180deg,var(--ca) 50%,var(--cb) 50%) 1}
/* 알림(칭찬) 카드: 흰 카드 + 보라 테두리 빛 */
.toast.cheer{background:#fff!important;color:var(--ink)!important;border:1.5px solid #E1D9FF;box-shadow:0 14px 34px rgba(52,28,140,.22),0 0 0 4px rgba(143,116,255,.12);padding:12px 14px 12px 12px}
.toast.cheer .ch{background:linear-gradient(135deg,#EEE8FF,#F8F5FF)}
.toast.cheer .cht{color:var(--ink2);font-weight:700}
.toast.cheer .cht b{color:var(--teal)!important;font-size:18px}
.toast.cheer .ch i{background:#8F74FF}
.toast.cheer .undo{display:inline-flex;width:auto;flex-basis:auto!important;margin:8px 0 0 54px!important;padding:7px 14px;border-radius:99px;background:linear-gradient(135deg,#7A5CFF,#5B3DE8);color:#fff!important;font-size:14px}
.buyb.cp{display:flex!important;align-items:center;gap:12px}
.buyb.cp .cplogo{display:inline-flex!important;flex-direction:row!important;align-items:baseline;width:auto!important;height:auto!important;flex:0 0 auto}
.buyb.cp .cplogo i{display:inline!important;width:auto!important;height:auto!important;background:none!important}
.buyb.cp>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.buyb.cp .adtag{flex-shrink:0;font-style:normal;font-size:11.5px;font-weight:800;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.cpnote{background:#FFF8E6;border:1.5px solid #FFE3A3;border-radius:18px;padding:14px 16px;margin:4px 0 14px}
.cpnote b{display:block;font-weight:900;color:#7A5200;margin-bottom:4px}.cpnote p{margin:0;font-size:14px;line-height:1.55;color:#5E4300;font-weight:600}
/* 제품 화면 아래 단추 3개: 평소 흰색, 해 둔 상태면 보라 */
.tribar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.tri{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:62px;padding:8px 4px;border-radius:18px;background:#fff;border:1.5px solid #E4DEFF;color:var(--ink2);box-shadow:0 4px 14px rgba(52,28,140,.08);transition:background .25s,color .25s,border-color .25s,transform .15s}
.tri svg{width:20px;height:20px;color:var(--teal);margin-bottom:2px;transition:color .25s}
.tri b{font-size:14px;font-weight:900;white-space:nowrap}.tri small{font-size:12px;color:var(--mute);font-weight:700;white-space:nowrap}
.tri:active{transform:scale(.95)}
.tri.on{background:linear-gradient(135deg,#7A5CFF,#5B3DE8);border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(91,61,232,.35)}
.tri.on svg{color:var(--lime)}.tri.on small{color:rgba(255,255,255,.85)}
.tri.pop{animation:tripop .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes tripop{0%{transform:scale(.9)}55%{transform:scale(1.07)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.tri.pop{animation:tripop .45s cubic-bezier(.2,.9,.3,1.4)!important}}
/* v94: 말풍선 글자 줄이기·제품 이름 안 끊기게 */
.sumtop .bub h2{font-size:19px!important;line-height:1.45!important;letter-spacing:-.03em;margin-top:2px}
.sumtop .bub h2 .pn,.sumtop .bub h2 em{white-space:nowrap}
.sumtop .bub p{font-size:12.5px}
.sumlb{width:46px}
.sdiff{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:99px;background:#F1EDFF;color:var(--teal);font-size:12px;font-weight:800;vertical-align:middle;white-space:nowrap}
.summary ul li{font-size:14px}.summary ul li .pn,.summary ul li em{white-space:nowrap}
/* 비교 목록 비우기 */
.clrrow{display:flex;justify-content:flex-end;margin:8px 2px 0}
.clrall{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:99px;background:#fff;border:1.5px solid #FFD0CC;color:var(--ca);font-size:13px;font-weight:800}
.clrall svg{width:14px;height:14px}
/* v95: 알림 카드 한 줄 배치(그림 · 글 · 단추), 제목 줄바꿈 없이 */
.toast.cheer{width:calc(100% - 32px);max-width:440px!important;flex-wrap:nowrap!important;align-items:center;gap:10px;padding:10px 10px 10px 10px!important}
.toast.cheer .ch{width:40px;height:40px}.toast.cheer .ch img{width:30px}
.toast.cheer .cht{flex:1;min-width:0;font-size:13.5px!important;line-height:1.35;word-break:keep-all}
.toast.cheer .cht b{font-size:15px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast.cheer .undo{flex:0 0 auto!important;margin:0!important;align-self:center;padding:8px 12px!important;font-size:13px!important;white-space:nowrap}
.toast.cheer .undo:after{content:"›";margin-left:4px}
/* v96: 원재료·첨가물·가격 칸도 A·B 대신 제품 이름 */
.algc .ac{align-items:flex-start}
.algc .ac i.dot{width:10px!important;height:10px!important;border-radius:50%!important;margin-top:7px;flex-shrink:0;font-size:0}
.algc .ac i.dot.a{background:var(--ca)!important}.algc .ac i.dot.b{background:var(--cb)!important}
.acx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.acn{font-size:13.5px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acn.a{color:var(--ca)}.acn.b{color:var(--cb)}
.acx span{font-size:15px;font-weight:700;color:var(--ink2);word-break:keep-all}
.pc-two i.pcn{width:auto!important;height:auto!important;max-width:100%;padding:3px 8px;border-radius:7px!important;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block!important}
.pn{word-break:keep-all}
.pc-two .win i.pcn{max-width:calc(100% - 52px)}
.pr-s img{object-fit:contain}
/* v98: 먹은 것 목록 — 끼니 카드 + 같은 음식 묶기 + 모두 지우기 */
.logtop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:18px}.logtop .sec{margin:0}
.mealc{background:#fff;border-radius:22px;box-shadow:var(--sh);padding:6px 14px 6px;margin-top:12px}
.mealh2{display:flex;align-items:center;gap:8px;padding:10px 0 8px;border-bottom:1px solid var(--line)}
.mealh2 .me{font-size:18px}.mealh2 b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:17px;color:var(--teal)}
.mealh2 .num{margin-left:auto;font-weight:900;font-size:15px;color:var(--ink)}
.lgi{position:relative;display:flex;align-items:center;gap:10px;padding:10px 0}
.lgi+.lgi{border-top:1px solid #F1EFF7}
.lgic{flex-shrink:0;width:44px;height:44px;border-radius:14px;background:#F6F3FF;display:grid;place-items:center}.lgic img{width:32px;height:32px;object-fit:contain}
.lgt{flex:1;min-width:0}.lgt b{display:block;font-size:15px;font-weight:900;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lgt small{font-size:12.5px;color:var(--sub);font-weight:600}
.lgk{flex-shrink:0;font-size:17px;font-weight:900;color:var(--ink);text-align:right}.lgk small{font-size:12px;color:var(--mute);margin-left:1px}
.lgn{position:absolute;left:30px;top:6px;font-style:normal;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--teal);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.lgdel{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#F4F2F8;color:var(--mute);display:grid;place-items:center}.lgdel svg{width:14px;height:14px}
.lgic{position:relative}.lgn{left:auto!important;top:auto!important;right:-6px;bottom:-5px}
/* v99: 검색 중 위쪽 배너(라벨 그림 + 상황 멘트), 더 보기 */
.qban{display:none}
.home.q .hero-k{display:none}
.home.q .qban{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 14px;border-radius:20px;background:rgba(255,255,255,.75);border:1.5px solid #E4DEFF;text-align:left;box-shadow:0 6px 18px rgba(52,28,140,.08)}
.qban:empty{display:none!important}
.qban img{width:52px;height:52px;object-fit:contain;flex-shrink:0;animation:sumwave 2.6s ease-in-out infinite}
.qban p{margin:0;min-width:0}.qban b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:17px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qban span{font-size:13px;color:var(--sub);font-weight:600}
.moreres{width:100%;margin-top:12px}
/* v100: 저장한 비교 카드 */
.svtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 4px}.svtop>span{font-weight:800;color:var(--sub);font-size:14px}
.svsort{display:flex;background:#EEEAFB;border-radius:99px;padding:3px;margin-left:auto}.svsort button{padding:5px 10px;border-radius:99px;font-size:12.5px;font-weight:800;color:var(--sub)}.svsort button.on{background:#fff;color:var(--teal);box-shadow:0 2px 6px rgba(52,28,140,.12)}
.svtop .clrall{margin-left:0}
.svc{background:#fff;border-radius:22px;box-shadow:var(--sh);margin-top:12px;overflow:hidden;position:relative}
.svc:before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--ca) 50%,var(--cb) 50%)}
.svmain{display:block;width:100%;text-align:left;padding:14px 16px 10px 20px}
.svhd{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute);font-weight:700}
.svk{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;background:#F4F1FF;color:var(--teal)}.svk img{width:16px;height:16px}
.svfav{margin-left:auto;color:#F5B400;font-size:15px}
.svcon{margin:8px 0 10px;font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.4;word-break:keep-all}
.svrow{display:flex;align-items:center;gap:10px;margin-top:6px}
.svbar{flex:1;min-width:0}.svnm{display:block;font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.svnm.a{color:var(--ca)}.svnm.b{color:var(--cb)}
.svbar i{display:block;height:8px;border-radius:99px;background:#F1EFF7;margin-top:4px;overflow:hidden}.svbar em{display:block;height:100%;border-radius:99px}.svbar em.a{background:var(--ca)}.svbar em.b{background:var(--cb)}
.svrow>b{flex-shrink:0;min-width:70px;text-align:right;font-size:15px;font-weight:900}
.svact{display:flex;border-top:1px solid var(--line)}
.svact button{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:11px 4px;font-size:13px;font-weight:800;color:var(--sub)}
.svact button+button{border-left:1px solid var(--line)}.svact svg{width:15px;height:15px}
.svact button.on{color:#C78A00}.svact .del{color:var(--ca)}
/* v101: 마이라벨리 요약 칸(그림+숫자), 임박 빨강 */
.mycard.sum button{display:flex;flex-direction:column;align-items:center;gap:2px}
.mycard.sum img{width:34px;height:34px;object-fit:contain;margin-bottom:2px}
.mycard.sum button.warn b{color:var(--ca)}
.myrow img{object-fit:contain}
.redn{color:var(--ca);font-weight:900}
/* v103: 홈 위쪽 지구본 + 설정 */
.hero .hd .hdr{display:flex;align-items:center;gap:8px}
.hero .hd .hgear{color:var(--ink)}.hero .hd .hgear svg{width:18px;height:18px}
/* ===== v105 UI 정리 ===== */
/* 1) 아래 단추 줄을 탭·스캔 단추 위로 띄우기 */
.actionbar{bottom:calc(var(--tab) + var(--tabgap) + var(--sb) + 22px)!important;background:none!important;padding-top:6px!important}
.actionbar:before{content:'';position:absolute;inset:-14px -16px -40px;background:linear-gradient(to top,var(--bg) 70%,rgba(245,243,255,0));z-index:-1;pointer-events:none}
.scr.withbar{padding-bottom:calc(var(--tab) + var(--tabgap) + var(--sb) + 130px)!important}
/* 2) 홈 줄이기: 장면 낮게, 안내 띠 작게 */
.stage.s3.v3{aspect-ratio:1.8!important}
.home .shutter.big{margin-top:6px}
.trust.top{padding:10px 14px!important}.trust.top img{width:30px!important;height:30px!important}.trust.top p{font-size:13px!important;line-height:1.4}
.a2hs{padding:8px 10px 8px 12px}.a2hs img{width:32px;height:32px}.a2hs small{display:none}
/* 3) 비교 막대: 좋은 쪽에만 초록 「더 좋아요」 */
.ln2.win .who:after{content:none!important}
.ln2.good .who:after{content:'👍 더 좋아요'!important;margin-left:6px;font-size:11.5px;font-weight:900;color:#11734F;background:#E3F7EC;border-radius:7px;padding:2px 7px;white-space:nowrap}
/* 5) 제품 화면 접기 */
.pmore{margin-top:14px;background:#fff;border-radius:20px;box-shadow:var(--sh);padding:0 14px}
.pmore>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:14px 2px;font-weight:800;font-size:14.5px;color:var(--teal);cursor:pointer}
.pmore>summary::-webkit-details-marker{display:none}
.pmore .arr{width:9px;height:9px;border-right:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);transform:rotate(45deg);transition:transform .2s}
.pmore[open] .arr{transform:rotate(-135deg)}.pmore[open]{padding-bottom:12px}
/* 6) 가장 작은 글씨 13 */
.basisnote,.credit,.pc-note,.pc-hint,.rk-scale span,.dupn,.qc,.hint{font-size:13px!important;line-height:1.5}
.myrow small,.row small,.tri small,.svhd{font-size:12.5px!important}
/* 9) 못 찾은 바코드 창 */
.missq{display:flex;align-items:center;gap:12px;margin:4px 0 14px}.missq img{width:80px;height:auto}.missq p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}
.sheetbox .btn.big{width:100%;margin-top:8px}
/* 11) 검색 거르기 */
.rfilt{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 2px}
.rfilt button{padding:7px 13px;border-radius:99px;background:#fff;border:1.5px solid #E4DEFF;font-size:13.5px;font-weight:800;color:var(--ink2)}
.rfilt button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.promo.low{margin-top:22px}
/* v106: 작은 안내 글씨 한 가지 색·투명도 없이, 바코드 큰 단추 1/3 줄이기 */
.basisnote,.credit,.src.fine,.kids .basisnote,.ngrade small,.rank .basisnote,.pc-note,.pc-hint{color:#7A8194!important;opacity:1!important;font-size:12.5px!important;line-height:1.5!important;font-weight:500}
/* v107: 같은 제품(이름만 다름) 알림 */
.alsoN{display:block;font-size:12px;color:var(--mute);font-weight:600}
.twin{display:flex;gap:12px;align-items:flex-start;background:#FFF8E6;border:1.5px solid #FFE3A3;border-radius:20px;padding:14px;margin-top:14px}
.twin img{width:52px;height:auto;flex-shrink:0}.twin b{display:block;font-weight:900;color:#7A5200;font-size:15.5px}.twin p{margin:4px 0 8px;font-size:13.5px;color:#5E4300;line-height:1.5}
/* v107: 메인 배너 더 줄이기 — 제목 작게, 장면 낮게, 바코드 단추 가로 한 줄 */
.hero .hero-k{margin-top:4px!important;font-size:12px!important;padding:3px 10px!important}
.hero .hero-t{font-size:27px!important;margin-top:6px!important}
.hero .hero-s{font-size:14px!important;margin-top:4px!important}
.stage.s3.v3{aspect-ratio:2.3!important;width:min(86%,360px)!important;margin-top:2px!important}
.stage.s3.v3 .s3-say{display:none!important}
.stage.s3.v3{margin-top:26px!important}.stage.s3.v3 .v3-ph{bottom:16%!important;width:18%!important}.stage.s3.v3 .v3-lb{width:30%!important;bottom:12%!important}
/* v109: 대문 배너(제목+장면)만 절반으로, 바코드 단추는 원래 크기 */
.hero .hero-k{display:none!important}
.hero .hero-t{font-size:23px!important;margin-top:0!important;line-height:1.2}
.hero .hero-s{font-size:13px!important;margin-top:2px!important}
.stage.s3.v3{aspect-ratio:3.4!important;width:min(78%,320px)!important;margin-top:12px!important}
.stage.s3.v3{margin-top:34px!important}
/* v111: 바코드 단추 = 세로형, 처음보다 1/3 작게(v106 크기) */
.shutter.big{padding:12px 16px 14px!important;gap:6px!important;border-radius:24px!important}
.shutter.big .sh-ic{height:74px!important;width:min(56%,180px)!important}
.shutter.big .sh-tx b{font-size:22px!important}.shutter.big .sh-tx small{font-size:13px!important}
/* v112: 하위 화면(제품 등) 아래 단추 줄은 맨 아래에 붙임 — 위 v1669 규칙의 !important 가 탭 높이만큼 띄워 화면 가운데 떠 있던 문제 */
.subbar .actionbar{bottom:0!important;padding-bottom:calc(10px + var(--sb))!important}
.subbar .actionbar:before{inset:-18px -16px 0}
.subbar .scr.withbar{padding-bottom:calc(var(--sb) + 120px)!important}
.hero-s b{color:var(--teal);font-weight:800}
h3.sec.ingsec{margin-top:22px;display:flex;align-items:baseline;gap:8px}
h3.sec.ingsec small{font-family:Pretendard,sans-serif;font-size:13px;color:#7A8194;font-weight:700}
#algBox .alg{margin-top:8px}
.ingsum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 12px}
.ingsum span{background:#F5F3FF;border-radius:14px;padding:10px 6px;text-align:center;font-size:13px;font-weight:700;color:var(--sub)}
.ingsum b{display:block;font-size:24px;font-weight:900;color:var(--ink);line-height:1.15}
.ingsum span.warn{background:#FFF4EA}.ingsum span.warn b{color:#D9622B}
.kimnote{display:flex;gap:10px;align-items:center;background:#FFF3F2;border-radius:14px;padding:10px 12px;font-size:14px;font-weight:700;color:#B4231B;line-height:1.45;margin:0 0 12px;word-break:keep-all}
.kimnote img{width:36px;height:36px;flex-shrink:0}
.pr-s.s0{background:#FFF3F2;cursor:pointer}.pr-s.s0 small{color:#D23A2F}
.kmimg{display:block;width:84px;height:84px;margin:0 auto 6px}
.kmlist p{font-size:15px;line-height:1.55;color:var(--sub);margin:0 0 12px;word-break:keep-all}
.kmlist b{display:block;color:var(--ink);font-size:16px;font-weight:900}
.kmgo{width:100%;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:6px}.kmgo svg{width:20px;height:20px}
/* v112: 먹으면 이만큼 — 하루 기준치 % */
.seg.s3b{margin-top:6px}.seg.s3b button{font-size:14.5px;white-space:nowrap;padding:0 6px}
.dvhead{display:flex;align-items:center;gap:10px;margin:10px 0 2px;background:#FFF4EA;border-radius:16px;padding:10px 14px;font-size:15px;font-weight:800;color:#9A4A12;line-height:1.4;word-break:keep-all}
.dvhead img{width:34px;height:34px;flex-shrink:0}.dvhead b{font-size:19px;color:#D9622B}
.dvhead.hi{background:#FFF1F0;color:#9E1F17}.dvhead.hi b{color:#D23A2F}
.dvbar{display:block;height:7px;border-radius:7px;background:#ECEAF6;margin-top:8px;overflow:hidden}
.dvbar>i{display:block;height:100%;border-radius:7px;background:#8F74FF}
.dvbar.mid>i{background:#F0A050}.dvbar.hi>i{background:#E0453D}
.keyn em.dvt,.keyn3 em.dvt{display:block;font-style:normal;font-size:12.5px;color:#7A8194;font-weight:700;margin-top:4px}
button.pr-s{font:inherit;border:0;color:inherit}
.pr-s .prx{display:block}.pr-s .prp{display:block;font-size:13.5px;color:var(--sub);line-height:1.45;margin-top:3px;word-break:keep-all}
/* v113: 출처·설명 글씨는 한 단계 흐리게 — 숫자와 제목이 먼저 보이게 */
.basisnote,.credit,p.credit{color:#A9AEBB!important;font-size:12px!important;font-weight:500!important;opacity:1}
.basisnote a,.credit a{color:#A9AEBB!important}
.credit .inl{color:var(--teal)!important;font-size:13px!important}
.ptx .status{background:none!important;padding:0!important;color:#A9AEBB!important;font-size:12px!important;font-weight:600!important}
.ptx .status:before{display:none!important}
.keyn em.dvt,.keyn3 em.dvt{color:#9AA0AE;font-weight:600}
.alg .hint{color:#8C92A1}
/* v114: 제품 화면 정리 — 그림자·테두리 줄이고, 색은 빨강=많음·주황=보통·보라=정보 */
#prod .phead,#prod .keyn>div,#prod .keyl,#prod .alg,#prod .pmore,#prod .rpcta,#prod .gradec,#prod .algnone{box-shadow:none!important;border:0!important}
#prod .phead{position:relative;background:#fff}
#prod .keyn .kcal{background:#fff}#prod .keyn .kcal span{color:var(--sub)}
#prod .keyn>div.over{box-shadow:none}
.pthumb.none{border:0;cursor:pointer;position:relative;padding:0}
.pthumb .pcam{position:absolute;right:6px;bottom:6px;width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--teal);box-shadow:0 2px 6px rgba(52,28,140,.15)}
.pthumb .pcam svg{width:16px;height:16px}
.pthumb.none:not(.food) .pcam{position:static;width:44px;height:44px;box-shadow:none;background:none}.pthumb.none:not(.food) .pcam svg{width:28px;height:28px}
.pswap{position:absolute;top:12px;right:12px;font:inherit;font-size:13px;font-weight:800;color:var(--teal);background:#F1EDFF;border:0;border-radius:99px;padding:5px 11px}
#prod .ptx{padding-right:46px}
.verdict{display:flex;gap:6px;margin:10px 0 2px;flex-wrap:wrap}
.verdict span{flex:1 1 0;min-width:96px;display:flex;align-items:center;gap:6px;border-radius:14px;padding:8px 10px;background:#F1EDFF;color:#4B36B8}
.verdict img{width:24px;height:24px;flex-shrink:0}
.verdict b{font-size:14px;font-weight:900;white-space:nowrap}.verdict small{margin-left:auto;font-size:12px;font-weight:700;opacity:.75}
.verdict .hi{background:#FFECEA;color:#C42A20}.verdict .mid{background:#FFF2E2;color:#B5590F}
.keyn em.dvt{font-size:12px}
.keyl{background:#fff;border-radius:18px;padding:6px 14px;margin-top:8px}
.keyl p{display:grid;grid-template-columns:62px 70px 1fr 38px;align-items:center;gap:8px;padding:7px 0;margin:0}
.keyl p+p{border-top:1px solid #F0EEF6}
.keyl span{font-size:13.5px;color:var(--sub);font-weight:700}
.keyl b{font-size:16px;font-weight:900}.keyl b small{font-size:12px;color:var(--sub);margin-left:1px}
.keyl .dvbar{margin:0;height:6px}
.keyl em{font-style:normal;font-size:12px;color:#9AA0AE;font-weight:600;text-align:right}
.ingsum span.warn{background:#F5F3FF}.ingsum span.warn b{color:var(--ink)}
.kimnote{background:#F5F3FF;color:#4B36B8}
.algnone{width:100%;display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:12px 14px;margin-top:8px;font:inherit;text-align:left}
.algnone img{width:30px;height:30px}.algnone span{flex:1;display:flex;flex-direction:column}
.algnone b{font-size:15px;font-weight:800;color:var(--ink)}.algnone small{font-size:12.5px;color:#9AA0AE}
.algnone .chev{width:18px;height:18px;color:var(--teal)}
.verdict{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.verdict>span{min-width:0;padding:8px 8px;gap:6px}
.verdict>span>span{display:flex;flex-direction:column;min-width:0}
.verdict b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis}.verdict small{margin:0;font-size:12.5px;font-weight:800;opacity:1}
.verdict img{width:26px;height:26px}
.verdict>span>span{background:none!important;padding:0!important;border-radius:0;color:inherit;flex:1;min-width:0;gap:0}
.verdict small{white-space:nowrap}
.verdict>span>span{align-items:flex-start;text-align:left}
/* v115: 한눈 결론은 늘 100g당 판정, 제품 카드 바로 아래 */
.vwrap{margin-top:12px}
.vcap{font-size:12.5px;font-weight:700;color:#9AA0AE;margin:0 0 6px 2px}
.vwrap .verdict{margin:0}
.verdict .lo{background:#F1EDFF;color:#4B36B8}
#prod .frb img{width:36px;height:36px}
/* v116: 몸 관리 — 목표·오늘 남은 양·성적표·연속 기록·홈 열량 막대 */
.verdict .goal{background:#F1EDFF;color:#4B36B8}
.verdict .mine{box-shadow:0 0 0 2px #8F74FF inset}
.vnote{font-size:13px;color:#6B7183;margin:6px 2px 0}.vnote b{color:#4B36B8}
.tleft{margin-top:10px;background:#fff;border-radius:18px;padding:12px 14px}
.tleft>p{display:flex;gap:10px;align-items:center;margin:0 0 10px;font-size:15px;font-weight:700;color:var(--ink);line-height:1.45;word-break:keep-all}
.tleft>p img{width:32px;height:32px;flex-shrink:0}
.tleft>p b{color:#4B36B8;font-weight:900}.tleft>p b.over{color:#D23A2F}
.tleft>p small{display:block;font-size:12px;color:#9AA0AE;font-weight:600}
.tlb{display:flex;gap:8px}
.tlb button{flex:1;font:inherit;font-size:13.5px;font-weight:800;border:0;border-radius:12px;padding:10px 8px}
.tlalt{background:#6C4CF5;color:#fff}.tlgoal{background:#F1EDFF;color:#4B36B8}
.goalg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.goalg button{font:inherit;border:0;background:#F5F3FF;border-radius:16px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:4px}
.goalg button.on{background:#6C4CF5;color:#fff}.goalg button.on small{color:#E6DFFF}
.goalg img{width:40px;height:40px}.goalg b{font-size:16px;font-weight:900}.goalg small{font-size:12.5px;color:var(--sub)}
.wrep{background:#fff;border-radius:18px;padding:14px;margin-top:10px}
.wrh{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.wrh b{font-size:16px;font-weight:900}.wrh small{font-size:12px;color:#9AA0AE;font-weight:600}
.streak{margin-left:auto;font-style:normal;font-size:13px;font-weight:800;color:#B5590F;background:#FFF2E2;border-radius:99px;padding:3px 10px}
.wrg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wrg span{background:#F5F3FF;border-radius:14px;padding:10px 4px;text-align:center;font-size:12.5px;font-weight:700;color:var(--sub)}
.wrg b{display:block;font-size:22px;font-weight:900;color:var(--ink)}.wrg b small{font-size:13px;color:#9AA0AE}
.wrg span.good{background:#ECF8E8}.wrg span.good b{color:#2F8A3A}
.kmini{width:100%;display:flex;align-items:center;gap:12px;background:#fff;border:0;border-radius:18px;padding:12px 14px;margin:14px 0 0;font:inherit;text-align:left}
.kmini img{width:34px;height:34px}.km{flex:1;min-width:0}
.kmt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.kmt b{font-size:16px;font-weight:900;color:var(--ink)}.kmt small{font-size:12.5px;color:#9AA0AE;font-weight:600}
.kmb{display:block;height:7px;border-radius:7px;background:#ECEAF6;margin-top:6px;overflow:hidden}.kmb>i{display:block;height:100%;background:#8F74FF;border-radius:7px}
.kmini.over .kmb>i{background:#E0453D}.kmini.over .kmt small{color:#D23A2F}
.kmini .chev{width:18px;height:18px;color:var(--teal)}
.kmini+.a2hs{margin-top:10px}
/* v117: 소개 배너를 회수 칸 아래로 옮긴 뒤 음수 여백이 화면 밖으로 2px 넘쳐 좌우로 밀리던 문제 — 여백을 맞추고 가로 넘침을 막음 */
#findBody .promo{margin:14px -16px 0}
html,body{overflow-x:hidden;max-width:100%}
#app{overflow-x:clip}
.scr{touch-action:pan-y pinch-zoom}
.pr-track,.feat{touch-action:pan-x pan-y}
/* v118: 시인성 — 글자 세 단계(제목 22·본문 15·보조 12.5), 보조 글씨는 한 가지 흐린 회색 */
:root{--fine:#9AA0AE}
.hint{font-size:14.5px;line-height:1.55}
.basisnote,.credit,.src.fine,.vcap,.keyn em.dvt,.keyl em,.tleft>p small,.wrh small,.kmt small{color:var(--fine)!important}
h3.sec{font-size:21px}
/* 아래 단추 줄을 한 줄 높이로 — 화면을 덜 가리게 */
.tri{flex-direction:row;min-height:48px;padding:6px 8px;gap:6px;border-radius:16px}
.tri svg{margin:0;width:19px;height:19px}.tri small{display:none}
.tri b{font-size:14px}
.subbar .scr.withbar{padding-bottom:calc(var(--sb) + 84px)!important}
/* 홈 열량 막대 — 기록 없을 때는 더하기 단추 */
.kmini.empty{background:linear-gradient(135deg,#F4F0FF,#fff);box-shadow:0 0 0 1.5px #E4DEFF inset}
.kplus{width:34px;height:34px;border-radius:50%;background:#6C4CF5;color:#fff;display:grid;place-items:center;font-size:22px;font-weight:700;line-height:1;flex-shrink:0}
/* 찍은 직후 미리 보기 */
.qsheet .qsh{display:flex;gap:12px;align-items:center;margin-bottom:4px}
.qsheet .qph{width:52px;height:52px;border-radius:14px;background:#F5F3FF;display:grid;place-items:center;flex-shrink:0}.qsheet .qph img{width:40px;height:40px}
.qsheet h3{margin:0;font-size:20px}.qsheet .qsh small{color:var(--fine);font-size:12.5px}
.qsheet .tleft{background:#F7F5FF}
/* 비교 한 줄 승자 */
.winner{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#6C4CF5,#5B3DE8);color:#fff;border-radius:20px;padding:14px 16px;margin-top:14px}
.winner img{width:44px;height:44px;flex-shrink:0}
.winner p{display:flex;flex-direction:column;margin:0;min-width:0}
.winner small{font-size:12.5px;opacity:.85;font-weight:700}
.winner b{font-size:18px;font-weight:900;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.winner b .tag{flex-shrink:0;width:22px;height:22px;border-radius:7px;background:#fff;color:#5B3DE8;display:grid;place-items:center;font-size:13px;position:static}
.winner em{font-style:normal;font-size:15px;font-weight:800;color:var(--lime)}
/* 빈 화면: 그림·한 줄·단추 하나 */
.state.empty .acts{justify-content:center}
/* v121: 아래로 당겨 새로고침 — 화면이 같이 끌려 내려오고 위에 라벨 알약 */
html,body{overscroll-behavior-y:none}
.pull2{position:fixed;top:calc(var(--st) + 10px);left:50%;transform:translate(-50%,-56px);opacity:0;z-index:60;display:flex;align-items:center;gap:6px;background:#fff;border-radius:99px;padding:6px 14px 6px 6px;box-shadow:0 6px 18px rgba(52,28,140,.2);pointer-events:none}
.pull2 img{width:30px;height:30px}
.pull2 span{font-size:13px;font-weight:800;color:#6B7183;white-space:nowrap}
.pull2.ready span,.pull2.spin span{color:#6C4CF5}
.pull2.spin img{animation:ptrspin .6s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
/* v125: 같은 회사 다른 맛 */
.sibs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;margin:0 -2px;scroll-snap-type:x mandatory;touch-action:pan-x pan-y}
.sibs button{flex:0 0 132px;scroll-snap-align:start;background:#fff;border:0;border-radius:16px;padding:10px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;font:inherit}
.sibs .ph{width:48px;height:48px}
.sibs b{font-size:13.5px;font-weight:800;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sibs small{font-size:12px;color:var(--fine)}
#rankBox .rank{margin-top:10px}
/* v126: 검색 결과 포장 제품 / 일반 음식 탭 */
.kindtab{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#ECEAF6;border-radius:16px;padding:4px;margin:12px 0 10px}
.kindtab button{font:inherit;font-size:14.5px;font-weight:800;border:0;border-radius:12px;padding:10px 6px;background:none;color:var(--sub)}
.kindtab button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(52,28,140,.12)}
.kindtab b{color:#6C4CF5;margin-left:2px}
/* v127: 예민 성분 9종 한눈 표 */
.sens{background:#fff;border-radius:16px;padding:12px;margin:10px 0}
.sens-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px;flex-wrap:wrap}
.sens-h b{font-size:15.5px;font-weight:900}.sens-h small{font-size:12px;color:var(--fine)}
.sens-g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.sens-g span{background:#F5F3FF;border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sens-g i{font-style:normal;font-size:11.5px;font-weight:800;color:#2F8A3A}
.sens-g b{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.3;word-break:keep-all}
.sens-g small{font-size:11.5px;color:#C42A20;line-height:1.3;word-break:break-all}
.sens-g span.on{background:#FFECEA}.sens-g span.on i{color:#C42A20}
.sens-g span.mine{box-shadow:0 0 0 2px #8F74FF inset}
/* v128: 장보기 종류 묶음 + 세부 종류 */
#shopc .fi.on .fic{box-shadow:0 0 0 2.5px #6C4CF5 inset;background:#F1EDFF}
#shopc .fi.on .fn{color:#4B36B8;font-weight:900}
#shopc .fn{font-size:12px;letter-spacing:-.04em;white-space:nowrap}
.shsub{background:#fff;border-radius:16px;padding:12px 14px;margin:8px 0 4px;animation:in .2s var(--ease)}
.shsub>b{display:block;font-size:14.5px;font-weight:900;margin-bottom:8px}
.shsub .ex{display:flex;flex-wrap:wrap;gap:6px}
.shsub .chip{font-size:14px;padding:8px 12px}
#shopc .fn{white-space:normal;word-break:keep-all;text-align:center;line-height:1.2;font-size:11.5px;min-height:2.4em;overflow:visible}
/* v130: 종류별 성분 비교 — 정렬 칩 */
.shsub>b small{display:block;font-size:12px;font-weight:600;color:var(--fine);margin-top:2px}
.rsort{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;touch-action:pan-x pan-y}
.rsort button{flex:0 0 auto;font:inherit;font-size:13.5px;font-weight:800;border:0;border-radius:99px;padding:8px 13px;background:#fff;color:var(--sub);box-shadow:0 0 0 1.5px #E4DEFF inset}
.rsort button.on{background:#6C4CF5;color:#fff;box-shadow:none}
.row .w em.rsv{color:#4B36B8}.row .w em.rsv.na{color:var(--fine);font-size:12px}
/* v132: 하루 권장량 막대 — 무엇 중 얼마인지 글로 */
.tlh{display:flex;gap:10px;align-items:center;margin:0 0 10px;font-size:15px;font-weight:700;color:var(--ink);line-height:1.4}
.tlh img{width:32px;height:32px;flex-shrink:0}.tlh b{color:#4B36B8;font-weight:900}.tlh small{display:block;font-size:12px;color:var(--fine);font-weight:600}
.tlbar{display:flex;height:12px;border-radius:12px;background:#ECEAF6;overflow:hidden;margin:0 0 10px}
.tlbar i{display:block;height:100%}.tlbar .had{background:#B9A9FF}.tlbar .me{background:#F0A050}.tlbar .me.over{background:#E0453D}
.tlr{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:14px;color:var(--sub);font-weight:700}
.tlr i{width:10px;height:10px;border-radius:3px;flex-shrink:0;background:#ECEAF6}.tlr i.had{background:#B9A9FF}.tlr i.me{background:#F0A050}.tlr i.over{background:#E0453D}.tlr i.left{background:#ECEAF6;box-shadow:0 0 0 1.5px #CFC5FA inset}
.tlr span{flex:1}.tlr b{font-size:15.5px;font-weight:900;color:var(--ink)}.tlr b small{font-size:12px;color:var(--fine);font-weight:700}
.tleft .tlb{margin-top:10px}
.tlr b{white-space:nowrap}
#prod .ptx{padding-right:62px}
/* v133: 내 살림 · 처음 안내 */
.fgroups.hub{margin-top:6px}
.svnone{margin:4px 2px 0}
.onbdots{display:flex;gap:6px;justify-content:center;margin:2px 0 10px}.onbdots i{width:7px;height:7px;border-radius:7px;background:#E4DEFF}.onbdots i.on{width:22px;background:#6C4CF5}
.onb h3{text-align:center}.onb .hint{text-align:center}
.onbfin{display:flex;flex-direction:column;align-items:center;gap:8px;margin:8px 0 14px;text-align:center}.onbfin img{width:120px}.onbfin p{font-size:15px;color:var(--sub);line-height:1.55}
/* v134: 홈 두 제품 비교 카드 */
.pcard{background:linear-gradient(160deg,#F4F0FF,#fff 60%);border-radius:22px;padding:14px;box-shadow:0 0 0 1.5px #E4DEFF inset}
.prow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.prow .vs{font-style:normal;font-weight:900;font-size:14px;color:#6C4CF5;background:#fff;border-radius:99px;width:34px;height:34px;display:grid;place-items:center;box-shadow:0 4px 10px rgba(108,76,245,.18)}
.pslot{position:relative;min-height:128px;border-radius:18px;background:#fff;border:2px dashed #CFC5FA;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 8px;font:inherit;text-align:center}
.pslot.full{border:0;box-shadow:0 4px 14px rgba(52,28,140,.08)}
.pslot .tag{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:7px;background:#6C4CF5;color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center}
.pslot.b .tag{background:#F0A050}
.pslot .pplus{width:46px;height:46px;border-radius:50%;background:#F1EDFF;color:#6C4CF5;display:grid;place-items:center}.pslot .pplus svg{width:24px;height:24px}
.pslot b{font-size:14px;font-weight:900;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pslot small{font-size:12px;color:#6C4CF5;font-weight:800}
.pslot .ph{width:56px;height:56px}
.pslot .rm{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:#F5F3FF;display:grid;place-items:center;border:0}.pslot .rm svg{width:14px;height:14px}
.psay{text-align:center;font-size:14px;font-weight:700;color:var(--sub);margin:12px 0 10px}
.plink{display:block;margin:0 auto;font:inherit;font-size:13.5px;font-weight:800;color:#6C4CF5;background:none;border:0}
/* 장보기 목록에 있던 제품 */
.shophit{width:100%;display:flex;align-items:center;gap:10px;background:#ECF8E8;border:0;border-radius:16px;padding:12px 14px;margin:6px 0 10px;font:inherit;text-align:left}
.shophit>svg:first-child{width:26px;height:26px;color:#fff;background:#2F8A3A;border-radius:50%;padding:5px;flex-shrink:0}
.shophit span{flex:1;display:flex;flex-direction:column}.shophit b{font-size:15px;font-weight:900;color:#1F6B2A}.shophit small{font-size:12.5px;color:#4E7A55}
.shophit .chev{width:18px;height:18px;color:#2F8A3A}
/* v135: 같은 종류 안 평가 — 라벨 총평 + 5칸 별점 */
.rank2{background:#fff;border-radius:20px;padding:14px 16px;margin-top:10px}
.rk2-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rk2-top img{width:70px;height:70px;flex-shrink:0}
.rk2-say{flex:1;position:relative;background:#F5F3FF;border-radius:16px;padding:10px 12px}
.rk2-say:before{content:'';position:absolute;left:-6px;top:50%;width:12px;height:12px;background:#F5F3FF;transform:translateY(-50%) rotate(45deg)}
.rk2-say small{display:block;font-size:12px;color:var(--fine);font-weight:700}
.rk2-say b{display:block;font-size:16px;font-weight:900;color:var(--ink);line-height:1.35;word-break:keep-all}
.rk2{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #F0EEF6}
.rk2-l{font-size:14.5px;font-weight:800;color:var(--ink2)}
.rk2-s{display:flex;gap:4px}.rk2-s i{flex:1;height:10px;border-radius:5px;background:#ECEAF6;max-width:34px}
.rk2 b{font-size:15px;font-weight:900;white-space:nowrap}
.rk2.g1 .rk2-s i.on,.rk2.g2 .rk2-s i.on{background:#3DBE5A}.rk2.g1 b,.rk2.g2 b{color:#2F8A3A}
.rk2.g3 .rk2-s i.on{background:#A9A1D8}.rk2.g3 b{color:var(--sub)}
.rk2.g4 .rk2-s i.on,.rk2.g5 .rk2-s i.on{background:#E0453D}.rk2.g4 b,.rk2.g5 b{color:#C42A20}
/* v135: 장보기 빠른 넣기 */
.shq{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.shq button{font:inherit;font-size:14px;font-weight:800;border:0;border-radius:99px;padding:8px 13px;background:#fff;color:var(--sub);box-shadow:0 0 0 1.5px #E4DEFF inset}
.shq button.on{background:#6C4CF5;color:#fff;box-shadow:none}
.btn.ghost.red{color:#C42A20}
.shopl .row{animation:none}
/* v136: 순위 내 목표 · 비교 마무리 */
.rk2.goal{background:#F7F5FF;margin:0 -8px;padding:9px 8px;border-radius:12px}
.rk2-l em{display:block;font-style:normal;font-size:12px;font-weight:800;color:#6C4CF5}
.pickc{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#6C4CF5,#5B3DE8);color:#fff;border-radius:22px;padding:14px;margin-top:16px}
.pickc img{width:72px;height:72px;flex-shrink:0;background:rgba(255,255,255,.18);border-radius:18px}
.pickc>div{flex:1;min-width:0}.pickc small{font-size:12.5px;opacity:.85;font-weight:700}
.pickc b{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:900;margin-top:2px;line-height:1.3;word-break:keep-all}
.pickc b .tag{position:static;flex-shrink:0;width:22px;height:22px;border-radius:7px;background:#fff;color:#5B3DE8;display:grid;place-items:center;font-size:13px}
.pickc ul{margin:8px 0 0;padding:0;list-style:none}.pickc li{font-size:14px;font-weight:700;line-height:1.6}.pickc li:before{content:'✓ ';color:var(--lime)}
.pickb{display:flex;gap:6px;margin-top:10px}.pickb .mini{background:#fff;color:#4B36B8;border:0}
.dvbox{background:#fff;border-radius:18px;padding:12px 14px}
.dvc+.dvc{border-top:1px solid #F0EEF6;margin-top:10px;padding-top:10px}
.dvc p{display:flex;align-items:baseline;gap:8px;margin:0 0 6px}.dvc p b{font-size:15px;font-weight:900}.dvc p small{font-size:12px;color:var(--fine)}
.dvl{display:grid;grid-template-columns:24px 1fr 56px;align-items:center;gap:8px;margin:5px 0}
.dvl .tag,.famr .tag{position:static;width:22px;height:22px;border-radius:7px;background:#6C4CF5;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}
.dvl .tag.b,.famr .tag.b{background:#F0A050}
.dvl .dvbar{margin:0;height:9px}.dvl em{font-style:normal;font-size:14px;font-weight:900;text-align:right}
.famr{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:14px;color:var(--sub);flex-wrap:wrap}.famr b.bad{color:#C42A20}.famr b.ok{color:#2F8A3A}
.altpick{width:100%;display:flex;gap:12px;align-items:center;background:#ECF8E8;border:0;border-radius:18px;padding:12px 14px;margin-top:12px;font:inherit;text-align:left}
.altpick .ph{width:52px;height:52px;flex-shrink:0}.altpick span{display:flex;flex-direction:column;min-width:0}
.altpick small{font-size:12.5px;color:#2F8A3A;font-weight:800}.altpick b{font-size:15.5px;font-weight:900}.altpick em{font-style:normal;font-size:13px;color:#4E7A55;font-weight:700}
.famr b.fok{color:#2F8A3A}
/* v137: 오늘 한 줄 · 장보기→냉장고 */
.dayl{display:flex;gap:10px;align-items:center;background:#fff;border-radius:18px;padding:10px 14px;margin:10px 0}
.dayl img{width:54px;height:54px;flex-shrink:0}
.dayl p{margin:0;font-size:15.5px;font-weight:900;color:var(--ink);line-height:1.4;word-break:keep-all}.dayl p small{display:block;font-size:12px;color:var(--fine);font-weight:600}
.dayl.cry{background:#FFF1F0}.dayl.worry{background:#FFF6EC}.dayl.best{background:#ECF8E8}
.shophit .mini{background:#fff;color:#1F6B2A;border:0;flex-shrink:0}
/* v138: 순위 카드 — 아이콘 + 초록→빨강 눈금 */
.rk3{display:grid;grid-template-columns:30px 62px 1fr 76px;align-items:center;gap:8px;padding:10px 0;border-top:1px solid #F0EEF6}
.rk3 img{width:28px;height:28px}
.rk3-l{font-size:14.5px;font-weight:800;color:var(--ink2);line-height:1.2}.rk3-l em{display:block;font-style:normal;font-size:12px;font-weight:800;color:#6C4CF5}
.rk3-g{position:relative;height:10px;border-radius:10px;background:linear-gradient(90deg,#3DBE5A,#9BD86A 30%,#E8E3F6 50%,#F5A86A 70%,#E0453D)}
.rk3-g i{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--ink);transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.rk3 b{font-size:14.5px;font-weight:900;text-align:right;white-space:nowrap}
.rk3.g1 b,.rk3.g2 b{color:#2F8A3A}.rk3.g3 b{color:var(--sub)}.rk3.g4 b,.rk3.g5 b{color:#C42A20}
.rk3.g1 .rk3-g i,.rk3.g2 .rk3-g i{border-color:#2F8A3A}.rk3.g4 .rk3-g i,.rk3.g5 .rk3-g i{border-color:#C42A20}
.rk3.goal{background:#F7F5FF;margin:0 -8px;padding:10px 8px;border-radius:12px}
.rk3-sc{display:grid;grid-template-columns:100px 1fr 76px;font-size:11.5px;font-weight:800;margin:2px 0 0}
.rk3-sc span:first-child{grid-column:2;color:#2F8A3A}.rk3-sc span:last-child{grid-column:2;justify-self:end;color:#C42A20;margin-top:-17px}
.rk2-say b{word-break:keep-all}
.rk2-say .sg,.rk2-say .sb{display:inline-block;font-size:12px;font-weight:900;border-radius:99px;padding:1px 8px;margin-right:6px;vertical-align:2px}
.rk2-say .sg{background:#DDF3D6;color:#1F6B2A}.rk2-say .sb{background:#FFE0DD;color:#B4231B}
/* v139: 홈 비교 카드 VS 글자 보이게 */
.prow .vs{background:#fff!important;color:#6C4CF5!important;font-family:Pretendard,sans-serif;font-size:13px;font-weight:900;box-shadow:0 4px 10px rgba(108,76,245,.18),0 0 0 1.5px #E4DEFF inset!important}
/* v139: 성분 분석 카드 다시 */
.alg2{background:#fff;border-radius:22px;padding:16px}
.alg2 .alg-h b{font-size:17px}
.ing3g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 14px}
.ing3{background:#F5F3FF;border-radius:16px;padding:10px 6px 9px;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.ing3 img{width:26px;height:26px;margin-bottom:2px}.ing3 b{font-size:24px;font-weight:900;line-height:1.1;color:var(--ink)}
.ing3 span{font-size:13px;font-weight:800;color:var(--ink2)}.ing3 small{font-size:11.5px;font-weight:700;color:var(--fine)}
.ing3.warn{background:#FFF4E6}.ing3.warn b,.ing3.warn small{color:#C2620F}
.ing3.bad{background:#FFECEA}.ing3.bad b,.ing3.bad small{color:#C42A20}
.ingsec2{border-top:1px solid #F0EEF6;padding:12px 0 4px}
.ingt{font-size:14px;font-weight:900;color:var(--ink);margin:0 0 8px}.ingt small{font-size:12px;color:var(--fine);font-weight:600;margin-left:4px}
.ingmain{display:flex;flex-wrap:wrap;gap:6px}
.ingmain span{display:flex;align-items:center;gap:6px;background:#F7F6FB;border-radius:99px;padding:6px 12px 6px 6px;font-size:14px;font-weight:700}
.ingmain i{font-style:normal;width:20px;height:20px;border-radius:50%;background:#6C4CF5;color:#fff;font-size:11.5px;font-weight:900;display:grid;place-items:center}
.algs.big span{font-size:14.5px;padding:7px 14px;border-radius:99px;background:#FFF4E6;color:#B5590F;font-weight:900}
.algs.big span.on{background:#E0453D;color:#fff}
.ingnone{font-size:14px;color:var(--fine);margin:0}
.hint.sm{font-size:12.5px;margin-top:6px}
.addl{display:flex;flex-direction:column;gap:6px}
.addl .aname{display:flex;align-items:center;gap:10px;background:#F7F6FB;border:0;border-radius:14px;padding:10px 12px;font:inherit;text-align:left;width:100%;text-decoration:none}
.addl em{font-style:normal;font-size:12px;font-weight:800;color:#6C4CF5;background:#fff;border-radius:99px;padding:3px 9px;flex-shrink:0}
.addl b{flex:1;font-size:14.5px;font-weight:800;color:var(--ink)}.addl .chev{width:16px;height:16px;color:var(--fine)}
.alg2 .raw2{margin-top:12px}
.alg2.bad .ing3{background:#fff}.alg2.bad .ing3.bad{background:#fff;box-shadow:0 0 0 2px #E0453D inset}
/* v140: 제품 화면 합치기 · 비교 한 줄 결론 · 기록 단추 */
.segcap{font-size:14px;font-weight:900;color:var(--ink);margin:16px 2px 6px}
.pmore.nums{margin-top:10px}.pmore.nums .keyn{margin-top:4px}
.winner.sm{width:100%;border:0;font:inherit;text-align:left;padding:12px 14px}
.winner.sm img{width:34px;height:34px}.winner.sm b{font-size:15.5px;white-space:normal}
.winner .wgo{font-style:normal;font-size:12.5px;font-weight:800;color:var(--lime);white-space:nowrap;margin-left:auto}
.dchips .more2{background:#F1EDFF;color:#4B36B8;font-weight:900}
.rk3-sc{display:flex;justify-content:space-between;padding:0 84px 0 108px;margin:4px 0 0}
.rk3-sc span:first-child,.rk3-sc span:last-child{grid-column:auto;justify-self:auto;margin:0}
/* v142: A=빨강 B=파랑 통일 · 영양 자료 없는 제품 안내 */
.pslot.a{border-color:#F7B5B2;background:#FFF7F6}.pslot.b{border-color:#B9CDFF;background:#F5F8FF}
.pslot.full.a,.pslot.full.b{border:0}
.pslot .tag{background:var(--ca)}.pslot.b .tag{background:var(--cb)}
.pslot.a .pplus{background:#fff;color:var(--ca)}.pslot.b .pplus{background:#fff;color:var(--cb)}
.pslot.a small{color:var(--ca)}.pslot.b small{color:var(--cb)}
.prow .vs{background:linear-gradient(135deg,var(--ca),var(--cb))!important;color:#fff!important;box-shadow:0 4px 10px rgba(80,60,200,.25)!important}
.dvl .tag,.famr .tag,.pickc b .tag,.winner b .tag{background:var(--ca);color:#fff}.dvl .tag.b,.famr .tag.b,.pickc b .tag.b,.winner b .tag.b{background:var(--cb);color:#fff}
.nonut{width:100%;display:flex;gap:12px;align-items:center;background:#FFF6EC;border:0;border-radius:18px;padding:12px 14px;margin:12px 0 4px;font:inherit;text-align:left}
.nonut img{width:46px;height:46px;flex-shrink:0}.nonut span{flex:1;display:flex;flex-direction:column;gap:2px}
.nonut b{font-size:15.5px;font-weight:900;color:#9A4A12}.nonut small{font-size:12.5px;color:#7A5A3A;line-height:1.45}
.nonut em{font-style:normal;font-weight:900;color:#C2620F;white-space:nowrap}
/* v143: 영양성분표 한 번에 */
.qlbar{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#ECF8E8,#fff);border-radius:20px;padding:14px;margin:12px 0 4px;box-shadow:0 0 0 1.5px #CDEBC4 inset}
.qlbar img{width:58px;height:58px;flex-shrink:0}.qlbar>div{flex:1}
.qlbar b{font-size:16px;font-weight:900;color:#1F6B2A}.qlbar small{display:block;font-size:12.5px;color:#4E7A55;line-height:1.45;margin-top:2px}
.qlb{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.qlb .mini.pri{background:#2F8A3A;color:#fff;border:0}
.qlok{font-size:13.5px;font-weight:800;color:#2F8A3A;margin:8px 0 0}
.missq+.btn.pri.big{font-size:17px;min-height:58px}
.dvbar.good>i{background:#3DBE5A}
/* v145: 자료 올린 사람 배지 */
.cbbadge{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#FFF6D9,#fff);border-radius:18px;padding:12px 14px;margin:6px 0 10px;box-shadow:0 0 0 1.5px #F5E2A8 inset}
.cbbadge i{font-style:normal;font-size:34px;line-height:1}.cbbadge b{display:block;font-size:16px;font-weight:900;color:#7A5A00}.cbbadge small{font-size:12.5px;color:#8A7A50;font-weight:700}
.vol small.est{display:block;font-size:12px;color:#C2620F;font-weight:700}
/* v147 가게 한 그릇 실측 */
.svy{margin:12px 0 4px;padding:12px 14px;border-radius:14px;background:#FFF4EC;border:1.5px solid #FFD3B5}
.svy b{display:block;font-size:13px;color:#C2410C}
.svy .svyn{margin:4px 0 6px;font-size:15px;color:#111a2e}.svy .svyn strong{font-size:22px;font-weight:900}
.svy small{display:block;font-size:12.5px;line-height:1.5;color:#4e586a;margin-top:2px}
/* 보상 포인트 카드 · 이달의 순위 · 자료 제공 이름표 (11-03) */
.rwcard{background:linear-gradient(135deg,#F1ECFF,#fff 70%);border-radius:20px;padding:16px;margin:6px 0 12px;box-shadow:0 0 0 1.5px #DCD2FF inset}
.rwtop{display:flex;gap:12px;align-items:center}.rwtop>i{font-style:normal;font-size:38px;line-height:1}
.rwtop small{display:block;font-size:12.5px;color:#6B6290;font-weight:700}.rwtop b{font-size:18px;font-weight:900;color:#2B1C7A}
.rwpts{margin-left:auto;font-size:14px;font-weight:800;color:#4A3BB0}.rwpts b{font-size:28px;font-weight:900;color:#5B3DF0;margin-right:2px}
.rwbar{height:10px;border-radius:99px;background:#E6E0FF;margin:14px 0 8px;overflow:hidden}.rwbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7B5CFF,#5B3DF0)}
.rwnext{margin:0;font-size:14px;line-height:1.5;color:#3A3360;font-weight:700}.rwnext b{color:#5B3DF0}
.rwnow{margin:6px 0 0;font-size:13px;color:#1F7A4A;font-weight:800}
.rwhow{list-style:none;padding:0;margin:12px 0 8px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rwhow li{background:#fff;border-radius:12px;padding:8px 4px;text-align:center;font-size:11.5px;line-height:1.3;color:#5A5478;font-weight:700;box-shadow:0 0 0 1px #E6E0FF inset}
.rwhow b{display:block;font-size:17px;font-weight:900;color:#5B3DF0}
.rwboard{padding:6px 14px}.rwrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #EEEAF8;font-size:15px}.rwrow:last-child{border-bottom:0}
.rwrow em{font-style:normal;width:22px;text-align:center;font-weight:900;color:#8A84A8}.rwrow:nth-child(-n+3) em{color:#5B3DF0}
.rwrow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}.rwrow b{font-weight:900;color:#2B1C7A}
.rwrow.gold span{color:#9A6B00}.rwrow.gold{background:linear-gradient(90deg,#FFF6D9,transparent);border-radius:10px;padding-left:6px}
.sec small{font-size:12.5px;font-weight:700;color:#8A84A8;margin-left:6px}
.byline{margin:8px 0 0;font-size:13.5px;color:#5A4A00;background:#FFF6D9;border-radius:10px;padding:8px 12px;font-weight:700}.byline b{font-weight:900;color:#7A5A00}
.rwhint{margin:10px 0 0;font-size:14px;color:#4A3BB0;background:#F1ECFF;border-radius:12px;padding:9px 12px;font-weight:700;text-align:center}.rwhint b{color:#5B3DF0}
.avc.lock{opacity:.55;position:relative}.avc.lock img{filter:grayscale(1)}.avc.lock em{position:absolute;top:6px;right:6px;font-style:normal;font-size:12px;font-weight:900;background:#2B1C7A;color:#fff;border-radius:99px;padding:2px 6px}
.rwmini{margin-top:10px;background:linear-gradient(135deg,#F1ECFF,#fff 75%);box-shadow:0 0 0 1.5px #DCD2FF inset}.rwmini .rwic{font-size:30px;line-height:1;width:34px;text-align:center}.rwmini .kmt b{color:#2B1C7A}
/* 이벤트 배너(보상) — 첫 장 */
.pr-s.sev{background:linear-gradient(120deg,#EFE8FF,#F8FFE0);cursor:pointer;box-shadow:0 0 0 1.5px #D9CCFF inset,0 6px 18px rgba(52,28,140,.10)}.pr-s.sev img{width:84px;height:84px}.pr-s.sev small{color:#5B3DF0;font-weight:900}
.rwtop>img{width:56px;height:56px;flex:none}.rwnext img,.rwrow img{width:22px;height:22px;vertical-align:-5px;margin-right:2px}.rwmini .rwic img{width:34px;height:34px}
.rwlad{list-style:none;padding:0;margin:14px 0 4px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rwlad li{text-align:center;background:#fff;border-radius:14px;padding:8px 2px 7px;box-shadow:0 0 0 1px #E6E0FF inset}
.rwlad img{width:46px;height:46px;display:block;margin:0 auto 3px}.rwlad b{display:block;font-size:11.5px;font-weight:900;color:#2B1C7A;line-height:1.25;word-break:keep-all}.rwlad small{display:block;font-size:12px;color:#8A84A8;font-weight:700}
.rwlad li.now{box-shadow:0 0 0 2px #6C4CF5 inset;background:#F6F2FF}.rwlad li.lock img{filter:grayscale(1);opacity:.45}.rwlad li.lock b{color:#9A95B5}
.rwnext img,.rwrow span img{display:inline-block!important;width:22px!important;height:22px!important;vertical-align:-5px;margin:0 3px 0 2px}
/* 11-03 보상 화면 시인성 개선: 글 줄이고 숫자·그림 위주 */
.rwcard{padding:18px 16px 14px}
.rwtop{gap:12px}.rwtop>img{width:64px;height:64px}
.rwme{flex:1;min-width:0}.rwme b{display:block;font-size:19px;font-weight:900;color:#2B1C7A;line-height:1.2}
.rwme small{display:block;margin-top:3px;font-size:13.5px;font-weight:700;color:#6B6290}.rwme small em{font-style:normal;color:#5B3DF0;font-weight:900}
.rwpts{align-self:flex-start;font-size:14px}.rwpts b{font-size:34px;line-height:1}
.rwbar{margin:14px 0 12px}
.rwlad{margin:0 0 12px;gap:6px}.rwlad li{padding:8px 2px 6px}.rwlad img{width:42px;height:42px}
.rwlad b{font-size:12.5px}.rwlad small{font-size:12px}
.rwperk{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}
.rwperk span{font-size:12px;font-weight:800;color:#6B6290;width:40px;flex:none}
.rwperk i{font-style:normal;font-size:13px;font-weight:800;color:#4A33D6;background:#fff;border-radius:99px;padding:5px 11px;box-shadow:0 0 0 1.5px #D9CCFF inset}
.rwperk.next i{color:#8A84A8;background:transparent;box-shadow:0 0 0 1.5px #D6D2E6 inset}
.rwhow{margin:12px 0 6px}.rwhow li{padding:8px 2px 7px;font-size:12px}.rwhow b{font-size:18px}
.rwfoot{margin:0;text-align:center;font-size:12px;color:#8A84A8;font-weight:700}
.rwmini .kmt b em{font-style:normal;color:#5B3DF0;margin-left:4px}
.cbsum span{margin-right:12px}
/* 이벤트 배너 */
.pr-s.sev b{font-size:19px;line-height:1.25}.pr-s.sev .prp{margin-top:6px;font-size:13.5px;color:#4A3BB0;font-weight:800}
.pr-s.sev .prp em{font-style:normal;background:#FFE29A;color:#2B1C7A;border-radius:99px;padding:3px 9px;margin-right:4px;font-weight:900}
/* 라벨 고르기: 기본 위 · 점수로 여는 라벨 아래 등급별 */
.avwrap{max-height:62vh;overflow:auto;padding-bottom:8px}.avwrap .avgrid{max-height:none;overflow:visible}
.avsec{margin:18px 2px 10px;font-size:16px;font-weight:900;color:#2B1C7A;display:flex;align-items:baseline;gap:8px}.avsec small{font-size:12.5px;color:#8A84A8;font-weight:700}
.avtier{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.avlv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:18px;background:#F1ECFF;padding:8px 4px}
.avlv img{width:46px;height:46px}.avlv b{font-size:13px;font-weight:900;color:#2B1C7A}.avlv small{font-size:11.5px;font-weight:800;color:#6B6290}
.avtier:not(.open) .avlv{background:#F2F1F6}.avtier:not(.open) .avlv img{filter:grayscale(1);opacity:.5}
.avc.lock em{font-size:12px;padding:2px 7px}
/* 커피 추첨: 응모 상태 줄 · 당첨 카드 · 안내 */
.rwraf{width:100%;display:flex;align-items:center;gap:12px;border:0;font:inherit;text-align:left;background:#FFF8E6;border-radius:16px;padding:12px 14px;margin:-2px 0 12px;box-shadow:0 0 0 1.5px #F5E2A8 inset}
.rwraf .cup{font-size:28px;line-height:1}.rwraf span:nth-child(2){flex:1;min-width:0}.rwraf b{display:block;font-size:15.5px;font-weight:900;color:#5A4200}.rwraf small{display:block;font-size:13px;font-weight:700;color:#8A6D20;margin-top:2px}
.rwraf em{font-style:normal;font-size:12.5px;font-weight:900;color:#8A6D20;background:#fff;border-radius:99px;padding:4px 10px}
.rwraf.is-ok{background:#EAF9EF;box-shadow:0 0 0 1.5px #B8E6C6 inset}.rwraf.is-ok b{color:#14603A}.rwraf.is-ok small{color:#2F7A4E}
.rwwin{display:flex;flex-direction:column;gap:8px;background:linear-gradient(135deg,#FFF1C9,#FFF9EA);border-radius:20px;padding:16px;margin:8px 0 14px;box-shadow:0 0 0 2px #F2CB55 inset}
.rwwin>b{font-size:19px;font-weight:900;color:#5A4200}.rwwin>small{font-size:13.5px;color:#7A5E10;font-weight:700}
.rwwin input#winPhone{height:48px;border-radius:12px;border:1.5px solid #E8D18A;padding:0 14px;font:inherit;font-size:17px;background:#fff}
.rwwin .wagree{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:#6A5520;font-weight:700;line-height:1.4}.rwwin .wagree input{margin-top:2px}
.rwwin.done{background:#EAF9EF;box-shadow:0 0 0 1.5px #B8E6C6 inset}.rwwin.done>b{color:#14603A;font-size:16px}.rwwin.done>small{color:#2F7A4E}
.rwmini.win{background:linear-gradient(135deg,#FFF1C9,#fff);box-shadow:0 0 0 2px #F2CB55 inset}.rwmini.win .rwic{font-size:30px}
.evrule{list-style:none;padding:0;margin:4px 0 14px;display:flex;flex-direction:column;gap:10px}
.evrule li{display:flex;gap:12px;font-size:14.5px;line-height:1.45}.evrule b{flex:none;width:58px;font-weight:900;color:#5B3DF0}.evrule span{color:var(--ink2);font-weight:600}
/* 11-03 커피 추첨 시인성: 그림·체크·D-day 위주 */
.rwraf,.evrule{display:none}
.rwraf2{width:100%;display:flex;align-items:center;gap:12px;border:0;font:inherit;text-align:left;background:linear-gradient(120deg,#FFF6DD,#FFFBEF);border-radius:20px;padding:12px 14px 12px 10px;margin:0 0 14px;box-shadow:0 0 0 1.5px #F3DFA2 inset}
.rwraf2>img{width:64px;height:64px;flex:none}
.rwraf2 .rft{flex:1;min-width:0}.rwraf2 .rft small{display:block;font-size:12px;font-weight:800;color:#A07A10}
.rwraf2 .rft b{display:block;font-size:18px;font-weight:900;color:#4A3700;margin:1px 0 6px}
.rfchk{display:flex;gap:5px;flex-wrap:wrap}.rfchk i{font-style:normal;font-size:12px;font-weight:800;color:#9A8550;background:#fff;border-radius:99px;padding:3px 9px;box-shadow:0 0 0 1px #EBDDB0 inset}
.rfchk i.on{color:#14603A;background:#E3F6EA;box-shadow:none}
.dday{flex:none;text-align:center;background:#fff;border-radius:14px;padding:7px 10px;min-width:58px}.dday b{display:block;font-size:19px;font-weight:900;color:#5B3DF0;line-height:1.1}.dday small{display:block;font-size:12px;font-weight:800;color:#8A84A8}
.rwraf2.is-ok{background:linear-gradient(120deg,#E7F8EE,#F5FFF8);box-shadow:0 0 0 1.5px #BDE8CC inset}.rwraf2.is-ok .rft b{color:#14603A}.rwraf2.is-ok .rft small{color:#2F7A4E}
/* 이벤트 안내 시트 */
.evsheet h3{margin:0}
.evhero{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#FFF3D6,#F3EEFF);border-radius:22px;padding:14px 16px;margin:4px 0 14px}
.evhero img{width:96px;height:96px;flex:none}.evhero small{font-size:13px;font-weight:900;color:#A07A10}.evhero h3{font-size:24px;font-weight:900;color:#2B1C7A;line-height:1.2}
.evhero p{margin:6px 0 0;font-size:14px;font-weight:700;color:#6B6290}.evhero p b{color:#5B3DF0;font-size:16px}
.evsteps{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;counter-reset:st}
.evsteps li{position:relative;background:#fff;border-radius:18px;padding:14px 4px 10px;text-align:center;box-shadow:0 0 0 1.5px #E6E0FF inset;counter-increment:st}
.evsteps li:before{content:counter(st);position:absolute;top:8px;left:8px;width:20px;height:20px;border-radius:50%;background:#5B3DF0;color:#fff;font-size:12px;font-weight:900;line-height:20px}
.evsteps img{width:54px;height:54px;display:block;margin:0 auto 6px}.evsteps b{display:block;font-size:15px;font-weight:900;color:#2B1C7A}.evsteps small{display:block;font-size:12px;font-weight:700;color:#8A84A8;margin-top:2px}
.evfine{margin:0 0 14px;background:#F7F6FB;border-radius:14px;padding:10px 14px}.evfine summary{font-size:13.5px;font-weight:800;color:#6B6290;cursor:pointer}.evfine p{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--ink2)}
.rwperk.next span{width:auto;margin-right:2px}
/* ===== 11-03 보상 디자인 v2: 영양성분표 · 응모권 · 영수증 (라벨리 세계의 물건으로) ===== */
.nf{--ink:#1B1236;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:10px 14px 12px;margin:6px 0 14px;color:var(--ink)}
.nfh{display:flex;align-items:center;justify-content:space-between;border-bottom:10px solid var(--ink);padding-bottom:6px}
.nfh b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:26px;letter-spacing:-.02em}.nfh img{width:46px;height:46px}
.nfbig{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:8px 0 6px;border-bottom:5px solid var(--ink)}
.nfbig span{font-size:16px;font-weight:900;padding-bottom:8px}
.nfn{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:60px;line-height:.95;color:var(--ink)}.nfn small{font-size:20px;margin-left:2px}
.nfbar{height:14px;border:2.5px solid var(--ink);border-radius:99px;margin:10px 0 4px;overflow:hidden;background:#fff}.nfbar i{display:block;height:100%;background:#FFE29A;border-right:2.5px solid var(--ink)}
.nfr{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-top:1px solid var(--ink);font-size:15px;font-weight:700}
.nfbar+.nfr{border-top:0}
.nfr b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:21px}
.nfr.strong span{font-weight:900}.nfr.strong b{color:#5B3DF0;font-size:24px}
.nflad{list-style:none;margin:0;padding:10px 0 4px;border-top:5px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center}
.nflad img{width:44px;height:44px;display:block;margin:0 auto 2px}.nflad b{font-size:12.5px;font-weight:900}
.nflad li.now b{background:var(--ink);color:#FFE29A;border-radius:99px;padding:2px 9px}.nflad li.lock img{filter:grayscale(1);opacity:.35}.nflad li.lock b{color:#A9A4BD}
.nfnext{margin:6px 0 0;padding-top:7px;border-top:1px solid var(--ink);font-size:13.5px;font-weight:700}.nfnext b{color:#5B3DF0;font-weight:900}
/* 응모권 */
.tk{position:relative;width:100%;display:flex;align-items:stretch;border:0;font:inherit;text-align:left;padding:0;margin:0 0 14px;background:#FFF0D2;border-radius:18px;box-shadow:inset 0 0 0 2px #E7C784;color:#4A2C0E}
.tk:before,.tk:after{content:'';position:absolute;right:84px;width:20px;height:20px;border-radius:50%;background:var(--bg,#F6F4FB);box-shadow:inset 0 0 0 2px #E7C784}
.tk:before{top:-10px}.tk:after{bottom:-10px}
.tkm{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:12px 10px 12px 10px}
.tkm img{width:74px;height:74px;flex:none}
.tkm small{display:block;font-size:12.5px;font-weight:900;color:#A0661A}
.tkm b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:24px;line-height:1.15;margin:1px 0 6px}
.tkc{display:flex;flex-wrap:wrap;gap:5px}.tkc i{font-style:normal;font-size:12px;font-weight:800;border-radius:99px;padding:3px 9px;border:1.5px dashed #C99A4B;color:#8A5A1A}
.tkc i.on{border:1.5px solid #1E8F4E;background:#1E8F4E;color:#fff}.tkc i.on:before{content:'✓ '}
.tkstamp{position:absolute;right:8px;top:8px;transform:rotate(-14deg);font-style:normal;font-family:Jua,Pretendard,sans-serif;font-size:19px;color:#1E8F4E;border:3px solid #1E8F4E;border-radius:10px;padding:0 8px;opacity:.85;background:rgba(255,255,255,.35)}
.tks{flex:none;width:94px;border-left:2.5px dashed #D3AE66;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 4px}
.tks b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:30px;color:#5B3DF0;line-height:1}.tks small{font-size:11.5px;font-weight:800;color:#8A5A1A;margin-top:4px;line-height:1.3}
/* 영수증 */
.rcpt{background:#fff;padding:14px 16px 24px;margin:0 0 14px;border-radius:6px 6px 0 0;filter:drop-shadow(0 4px 10px rgba(40,20,120,.10));
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 9px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 9px repeat-x}
.rch{text-align:center;padding-bottom:10px;border-bottom:2px dashed #CFCAE0;margin-bottom:4px}
.rch b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:23px;color:#1B1236}.rch small{font-size:12.5px;font-weight:800;color:#8A84A8}
.rcr{display:flex;align-items:center;gap:8px;padding:9px 0;font-size:15.5px}
.rcr em{font-style:normal;width:22px;text-align:center;font-family:Jua,Pretendard,sans-serif;font-size:19px;color:#A9A4BD}.rcr.top em{color:#5B3DF0}
.rcr img{width:28px;height:28px}.rcr span{font-weight:900;color:#1B1236;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcr i{flex:1;border-bottom:2px dotted #D6D2E6;margin:0 2px;transform:translateY(4px)}
.rcr b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:20px;color:#1B1236}.rcr b:after{content:'점';font-size:13px;margin-left:1px}
.rcr.gold span,.rcr.gold em{color:#B07A00}
.rcempty{text-align:center;margin:14px 0 2px;font-size:14px;font-weight:800;color:#8A84A8}
.tkstamp{font-size:16px;right:6px;top:10px;padding:1px 7px}
.tkstamp{right:auto;top:auto;left:8px;bottom:10px;font-size:15px;transform:rotate(-12deg);background:rgba(255,248,230,.85)}
/* ===== 11-03 보상 B안: 캐릭터 주인공 · 선 없이 색 덩어리 ===== */
.rwb{position:relative;margin:10px 0 14px;padding:20px 14px 14px;border-radius:28px;background:radial-gradient(120% 70% at 50% 28%,#FFFFFF 0,#F1ECFF 55%,#E6DDFF 100%);text-align:center;overflow:hidden}
.rwbt{margin:0;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:34px;line-height:1.1;color:#fff;letter-spacing:-.01em;
  -webkit-text-stroke:7px #5B3DF0;paint-order:stroke fill;text-shadow:0 4px 0 #3A22B8}
.rwbstage{position:relative;height:178px;margin:2px 0 -6px}
.rwbstage:before{content:'';position:absolute;left:50%;bottom:6px;width:190px;height:44px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,#FFE29A,rgba(255,226,154,.25) 70%,transparent)}
.rwbstage:after{content:'';position:absolute;left:50%;top:6px;width:170px;height:170px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,154,.45),transparent)}
.rwbstage img{position:relative;z-index:1;height:172px;width:auto;filter:drop-shadow(0 8px 10px rgba(60,30,160,.18))}
.rwbstage .sp{position:absolute;z-index:2;font-style:normal;color:#F5C518;font-size:22px}.sp.s1{left:22%;top:30%}.sp.s2{right:22%;top:18%;font-size:18px;color:#FFE29A}.sp.s3{right:26%;bottom:28%;font-size:14px}
.rwbpts{display:inline-block;position:relative;z-index:2;background:linear-gradient(180deg,#7B5CFF,#5B3DF0);color:#fff;border-radius:99px;padding:6px 26px 8px;font-family:Jua,Pretendard,sans-serif;font-size:20px;box-shadow:0 6px 0 #3A22B8}
.rwbpts b{font-size:38px;font-weight:400;margin-right:2px}
.rwbprog{display:flex;align-items:center;gap:8px;margin:16px 4px 4px}.rwbprog img{width:42px;height:42px;flex:none}
.rwbbar{flex:1;height:16px;border-radius:99px;background:#fff;overflow:hidden}.rwbbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#F7CF6E,#FFE29A)}
.rwbnext{margin:2px 0 14px;font-size:14px;font-weight:800;color:#4A3BB0}.rwbnext b{color:#5B3DF0;font-size:16px}
.rwbtiles{list-style:none;padding:0;margin:0 0 10px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.rwbtiles li{background:rgba(255,255,255,.75);border-radius:18px;padding:10px 2px 9px;display:flex;flex-direction:column;align-items:center;gap:3px}
.rwbtiles img{width:50px;height:50px}.rwbtiles b{font-size:13.5px;font-weight:900;color:#2B1C7A}
.rwbtiles em{font-style:normal;font-size:12px;font-weight:900;border-radius:99px;padding:2px 8px;background:#EDE8FF;color:#7A70A8}
.rwbtiles li.now{background:#FFE29A}.rwbtiles li.now em{background:#2B1C7A;color:#FFE29A}
.rwbtiles li.lock img{filter:grayscale(1);opacity:.4}.rwbtiles li.lock b{color:#9A95B5}.rwbtiles li.lock em:before{content:'🔒 '}
.rwbhow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.rwbhow li{background:rgba(255,255,255,.6);border-radius:14px;padding:7px 2px;font-size:11.5px;font-weight:800;color:#6B6290}.rwbhow b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:20px;color:#5B3DF0}
/* 커피 추첨 배너 */
.cfb{position:relative;width:100%;display:flex;align-items:center;gap:6px;border:0;font:inherit;text-align:left;margin:0 0 14px;padding:10px 12px 10px 4px;border-radius:24px;background:linear-gradient(115deg,#F08A24,#F6B04A 55%,#FFD27A);color:#fff;overflow:hidden}
.cfb>img{width:96px;height:96px;flex:none;margin:-4px 0 -6px}
.cft{flex:1;min-width:0}.cft b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:25px;line-height:1.15;color:#fff;-webkit-text-stroke:5px #8A3E0A;paint-order:stroke fill}
.cft small{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:900;color:#7A3A08;background:rgba(255,255,255,.75);border-radius:99px;padding:3px 10px}
.cfb.is-ok .cft small{background:#1E8F4E;color:#fff}
.cfd{flex:none;background:#fff;color:#5B3DF0;border-radius:18px;padding:8px 12px;font-family:Jua,Pretendard,sans-serif;font-size:24px;transform:rotate(-6deg);box-shadow:0 4px 0 rgba(138,62,10,.35)}
/* 순위 */
.rkb{margin:0 0 14px;padding:14px 12px 10px;border-radius:24px;background:#F1ECFF}
.rkh{display:flex;align-items:baseline;justify-content:space-between;padding:0 6px 10px}.rkh b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:21px;color:#2B1C7A}.rkh small{font-size:13px;font-weight:900;color:#5B3DF0}
.rkr{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:9px 12px;margin-bottom:6px}
.rkr em{font-style:normal;width:22px;text-align:center;font-family:Jua,Pretendard,sans-serif;font-size:20px;color:#8A84A8}
.rkr img{width:32px;height:32px}.rkr span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15.5px;font-weight:900;color:#2B1C7A}
.rkr b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:17px;color:#5B3DF0;background:#F1ECFF;border-radius:99px;padding:3px 11px}
.rkr.first{background:#FFE29A}.rkr.first em{color:#2B1C7A}.rkr.first b{background:#2B1C7A;color:#FFE29A}
.rkempty{text-align:center;margin:6px 0 8px;font-size:14px;font-weight:800;color:#7A70A8}
.rwbstage.lv3 img{transform:translateX(9%)}
/* 내가 올린 자료: 선 없이 둥근 칸 */
.mycard.contrib{background:#F1ECFF;padding:12px}.mycard.contrib .cbsum{padding:2px 4px 8px;margin:0}
.mycard.contrib .cbrow{border-top:0;background:#fff;border-radius:14px;padding:11px 12px;margin-top:6px}
.rwbstage .sp.s1{left:14%;top:8%}
.rwbt{-webkit-text-stroke:0;text-shadow:none;line-height:0}.rwbt img{width:min(78%,300px);height:auto;filter:drop-shadow(0 4px 6px rgba(60,30,160,.15))}
/* 11-03 가운데 정렬 · 커피 배너 연보라 반투명 */
.rwbstage img{display:block;margin:0 auto}
.cfb{background:rgba(124,92,255,.10);color:#2B1C7A;padding:12px 12px 12px 6px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cft{display:flex;flex-direction:column;align-items:center;text-align:center}
.cfe{font-style:normal;font-size:12.5px;font-weight:900;color:#fff;background:#5B3DF0;border-radius:99px;padding:3px 11px;margin-bottom:4px}
.cfti{display:block;width:100%;max-width:190px;height:auto;margin:0 auto}
.cft small{background:#fff;color:#5B3DF0}
.cfd{background:#5B3DF0;color:#fff;box-shadow:0 4px 0 #3A22B8}
.rwbt img{display:block;margin:0 auto}
.cfd{background:rgba(255,255,255,.6);color:#5B3DF0;box-shadow:0 0 0 1.5px rgba(91,61,240,.18),0 4px 10px rgba(91,61,240,.10);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cft small{white-space:nowrap;font-size:12px}
.alg.warnc{background:#FFF4E5;border-radius:20px;padding:14px}.alg.warnc .alg-h b{color:#A3570A}.warnp{margin:6px 0 10px;font-size:14px;line-height:1.55;color:#5A3A10}.warnp b{color:#A3570A}
.rk3-cap{margin:10px 2px 2px;font-size:13px;font-weight:900;color:#6B6290}
/* 맨 아래 내용이 가운데 스캔 버튼에 가리지 않게(11-03 사용자 점검) */
.scr.withbar{padding-bottom:calc(var(--tab,0px) + var(--tabgap,0px) + var(--sb,0px) + 150px)}
/* 11-03 그림 위주 시인성: 검색 배너 · 알레르기 확인 불가 · 제품 아래 메뉴 타일 */
.qbf{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px}
.qbf .qbq{font-size:17px;font-weight:900;color:#2B1C7A;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qbf b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:26px;color:#5B3DF0;line-height:1}
.qbf .qbs{flex-basis:100%;font-size:13.5px;font-weight:700;color:#6B6290}
.alnk{background:#FFF3E2;border-radius:22px;padding:14px}
.alnkh{display:flex;align-items:center;gap:12px}.alnkh img{width:64px;height:64px;flex:none}
.alnkh b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:21px;color:#A3570A}
.alnkh p{margin:3px 0 0;font-size:14px;line-height:1.45;font-weight:700;color:#6A4A1A}
.alnkc{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}.alnkc i{font-style:normal;font-size:12.5px;font-weight:800;color:#8A5A1A;background:#fff;border-radius:99px;padding:4px 10px}
.alnk .btn{width:100%}
.recok{display:flex;align-items:center;gap:8px;margin:14px 0 0;background:#E9F8EF;border-radius:16px;padding:8px 12px}
.recok img{width:30px;height:30px}.recok b{font-size:14px;font-weight:900;color:#14603A}.recok small{margin-left:auto;font-size:11.5px;font-weight:700;color:#4A8A64}
.ptiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ptiles button{border:0;font:inherit;background:#fff;border-radius:20px;padding:12px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 2px 10px rgba(52,28,140,.06)}
.ptiles img{width:52px;height:52px}.ptiles b{font-size:13.5px;font-weight:900;color:#2B1C7A}
.ptiles button.on{background:#F1ECFF}
.ptpanel{margin-top:10px;background:#fff;border-radius:20px;padding:12px 14px}.ptq{margin:0 0 8px;font-size:14px;font-weight:900;color:#2B1C7A}
.home.q .qban{border:0;background:#F1ECFF;box-shadow:none}
/* ===== 바코드 연속 찍기(11-03) ===== */
.cammode button#multiBtn.on{background:#FFE29A;color:#1B1236}
.cammulti{margin:8px 0 6px}
.cmlist{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}.cmlist::-webkit-scrollbar{display:none}
.cmi{flex:none;width:76px;background:rgba(255,255,255,.92);border-radius:16px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.cmi .pthumb,.cmi img{width:40px!important;height:40px!important;border-radius:10px}.cmi em{font-style:normal;width:40px;height:40px;border-radius:10px;background:#FFE8E5;color:#D23A2F;font-weight:900;display:grid;place-items:center}
.cmi b{font-size:12px;font-weight:800;color:#1B1236;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmi.miss b{color:#D23A2F}.cmi .spin{width:20px;height:20px;margin:10px}
.cmempty{margin:4px 0 8px;color:#fff;font-size:13px;font-weight:700;opacity:.85}
.cammulti .btn{width:100%}
#s-multi #multi{padding:0 16px}
.mhead{background:#F1ECFF;border-radius:22px;padding:14px 16px;margin:6px 0 12px}
.mhead>b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:34px;color:#5B3DF0;margin-right:4px}.mhead>span{font-size:15px;font-weight:800;color:#2B1C7A}
.mhead p{margin:6px 0 0;font-size:14px;font-weight:700;color:#6B6290}.mhead p b{color:#D23A2F}
.msort{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.msort button{flex:none;border:0;font:inherit;font-size:13px;font-weight:800;background:#fff;color:#4A3BB0;border-radius:99px;padding:7px 12px;display:flex;align-items:center;gap:4px}
.msort img{width:18px;height:18px}.msort button.on{background:#5B3DF0;color:#fff}
.mbasis{margin:8px 2px 8px;font-size:12px;font-weight:700;color:#8A84A8}
.mrow{width:100%;border:0;font:inherit;text-align:left;display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:20px;padding:12px;margin-bottom:8px}
.mrow .pthumb{width:56px;height:56px}
.mtx{flex:1;min-width:0}.mtx>b{display:block;font-size:15.5px;font-weight:900;color:#1B1236;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtx>small{display:block;font-size:12px;color:#8A84A8;font-weight:700}
.mal{display:inline-block;font-style:normal;margin-top:4px;font-size:12px;font-weight:900;color:#fff;background:#E0453D;border-radius:99px;padding:2px 9px}
.mbars{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.mb{position:relative;display:block;height:22px;border-radius:8px;background:#F4F2FA;overflow:hidden}
.mb i{position:absolute;left:0;top:0;bottom:0;background:#E6E0FF;border-radius:8px}.mb.on i{background:#FFD7D2}
.mb em{position:relative;font-style:normal;font-size:12px;font-weight:800;color:#2B1C7A;padding-left:8px;line-height:22px}.mb.on em{color:#B3261E}
.mmiss{display:flex;align-items:center;gap:8px;background:#FFF3F1;border-radius:16px;padding:10px 12px;margin-bottom:6px}.mmiss .num{flex:1;font-weight:800;color:#8A3A30}
.mfoot{margin:14px 0}
#cam.multi .camrec{display:none}
.mb{height:20px}.mb em{line-height:20px}.mb.prot i{background:#DDF5E5}.mb.prot.on i{background:#BDEBCB}.mb.prot.on em{color:#14603A}
.mingr{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;font-size:12px;font-weight:700;color:#8A84A8;align-items:center}
.mingr i{font-style:normal;font-size:12px;font-weight:800;border-radius:99px;padding:3px 9px;background:#F1ECFF;color:#4A3BB0}
.mingr i.spin{background:none;padding:0;width:14px;height:14px}
.mingr i.al{background:#FFF1D6;color:#8A5A10}.mingr i.al.mine{background:#E0453D;color:#fff}
.mingr i.wa{background:#FFE6E3;color:#B3261E}.mingr i.ok{background:#E9F8EF;color:#14603A}.mingr i.un{background:#FFF3E2;color:#A3570A}
/* 종류별 성분 비교 세부 칸: 눈에 띄게(11-03) */
.shsub{background:#F1ECFF;border-radius:20px;padding:14px;margin:10px 0 6px}
.shsub>b{font-size:16px;color:#2B1C7A}.shsub>b small{display:block;margin-top:2px;font-size:12.5px;font-weight:700;color:#6B6290}
.shsub .chip{background:#fff;border:0;font-weight:800;color:#4A3BB0;font-size:14.5px;padding:9px 14px;border-radius:99px}
.shgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.shgrid button{border:0;font:inherit;background:#fff;border-radius:18px;padding:10px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:4px}
.shgrid img{width:52px;height:52px;object-fit:contain}.shgrid span{font-size:13px;font-weight:800;color:#2B1C7A;word-break:keep-all;text-align:center;line-height:1.2}
.shgrid button:active{background:#E6DDFF}
/* 한눈에 보기: 색 타일(사또밥 안, 11-03) */
.mcard{background:#fff;border-radius:24px;padding:14px;margin-bottom:10px;cursor:pointer}
.mch{display:flex;align-items:center;gap:12px;margin-bottom:12px}.mch .pthumb{width:58px;height:58px}
.mch>span{flex:1;min-width:0}.mch b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:21px;color:#1B1236;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mch small{font-size:12.5px;font-weight:700;color:#8A84A8}
.mtiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mt{display:flex;align-items:center;gap:8px;border-radius:18px;padding:10px 10px;background:#F4F2FA}
.mt img{width:40px;height:40px;flex:none}.mt>span{min-width:0}
.mt small{display:block;font-size:12px;font-weight:800;color:#6B6290}
.mt b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:24px;line-height:1.05;color:#1B1236}.mt b em{font-style:normal;font-size:14px;margin-left:1px}
.mt.hi{background:#FFE3E0}.mt.hi b{color:#C0281E}.mt.mid{background:#FFF4CC}.mt.mid b{color:#7A5A00}.mt.lo{background:#E3F6EA}.mt.lo b{color:#14603A}.mt.na b{color:#A9A4BD}
.mt.on{box-shadow:0 0 0 2.5px #5B3DF0 inset}
.mcard .mingr:empty{display:none}
/* 색 줄이기(11-03 대표님): 칸은 모두 같은 연보라, 「많음」만 숫자 빨강 + 작은 점 */
.mt,.mt.mid,.mt.lo,.mt.hi,.mt.na{background:#F4F1FF}
.mt b,.mt.mid b,.mt.lo b{color:#1B1236}.mt.na b{color:#A9A4BD}
.mt.hi b{color:#D23A2F}.mt.hi small:after{content:'많음';margin-left:5px;font-size:12px;font-weight:900;color:#fff;background:#E0453D;border-radius:99px;padding:1px 6px}
.mt.on{box-shadow:none;background:#E9E2FF}
.mingr i.al,.mingr i.wa,.mingr i.un{background:#F4F1FF;color:#4A3BB0}.mingr i.al.mine{background:#E0453D;color:#fff}
/* 기준치 초과: 빨간 칸이 잠깐 흔들리고 「기준치 초과 · 100g당 600mg 넘음」(11-03) */
@keyframes overshake{0%,100%{transform:translateX(0)}15%{transform:translateX(-4px) rotate(-1deg)}30%{transform:translateX(4px) rotate(1deg)}45%{transform:translateX(-3px)}60%{transform:translateX(3px)}75%{transform:translateX(-1px)}}
@keyframes overpulse{0%,100%{box-shadow:0 0 0 0 rgba(224,69,61,.45)}50%{box-shadow:0 0 0 6px rgba(224,69,61,0)}}
.mt.over{background:#FFE9E6!important;animation:overshake .6s ease .2s 2,overpulse 1.6s ease .2s 3;flex-wrap:wrap}
.mt.over small:after{content:'기준치 초과'}
.mt.over:after{content:attr(data-lim);flex-basis:100%;font-size:12px;font-weight:800;color:#B3261E;margin-top:2px}
.verdict span.over{background:#FFE9E6!important;animation:overshake .6s ease .3s 2,overpulse 1.6s ease .3s 3}
.verdict span.over b{color:#C0281E}
@media (prefers-reduced-motion:reduce){.mt.over,.verdict span.over{animation:none}}
.mt.over{flex-wrap:nowrap}.mt.over:after{content:none}
.mt .lim{display:block;font-style:normal;font-size:12px;font-weight:800;color:#B3261E;margin-top:2px;line-height:1.2}
.mt.over small:after{display:inline-block;margin-top:2px}
/* 11-03 한눈에 보기 칸 정리: 3칸×2줄, 작게, 가운데 정렬 */
.mtiles{grid-template-columns:repeat(3,1fr);gap:6px}
.mt,.mt.over{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;padding:9px 4px 8px;border-radius:16px;min-height:96px}
.mt img{width:28px;height:28px}
.mt>span{display:flex;flex-direction:column;align-items:center}
.mt small{font-size:11.5px;line-height:1.2}
.mt b{font-size:19px;line-height:1.1}.mt b em{font-size:11.5px}
.mt.hi small:after,.mt.over small:after{display:none}
.mt .lim{font-size:12px;margin-top:1px;color:#C0281E}
.mt.over{box-shadow:0 0 0 1.5px #F2A39C inset}
.mt.over:before{content:'기준치 초과';font-size:9.5px;font-weight:900;color:#fff;background:#E0453D;border-radius:99px;padding:1px 6px;order:-1;margin-bottom:1px}
.mt.over img{display:none}
/* 홈: 알레르기 상태 칸(11-03) */
.alghome{width:100%;display:flex;align-items:center;gap:12px;border:0;font:inherit;text-align:left;background:#E9F8EF;border-radius:20px;padding:12px 14px;margin:14px 0 0}
.alghome img{width:48px;height:48px;flex:none}.alghome>span{flex:1;min-width:0}
.alghome b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:18px;color:#14603A}
.alghome small{display:block;font-size:13px;font-weight:700;color:#2F5A40;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.alghome small i{font-style:normal;font-weight:900;margin-right:6px;color:#14603A}
.alghome em{flex:none;font-style:normal;font-size:13px;font-weight:900;color:#14603A;background:#fff;border-radius:99px;padding:5px 11px}
.alghome.empty{background:#FFF3E2}.alghome.empty b{color:#A3570A}.alghome.empty small{color:#6A4A1A}.alghome.empty em{color:#fff;background:#E0453D}
.mmiss .mini.pri{background:#5B3DF0;color:#fff}.mmhint{margin:4px 2px 10px;font-size:12.5px;font-weight:700;color:#6B6290}
.alghome.empty small{white-space:normal}
.alghome small{word-break:keep-all}
/* 쿠팡: 홈 칸 · 붙여넣기 · 제품 구매 칸 · 순위 링크(11-03) */
.cpl{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#fff;color:#E5352B;font-weight:900;font-size:13px;letter-spacing:-.03em;box-shadow:0 0 0 1.5px #FFD6D2 inset}
.cpl.big{width:52px;height:52px;font-size:15px}
.cphome{width:100%;display:flex;align-items:center;gap:12px;border:0;font:inherit;text-align:left;background:var(--card);border-radius:20px;padding:12px 14px;margin:10px 0 0}
.cphome>span:nth-child(2){flex:1;min-width:0}.cphome b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:18px;color:var(--ink)}.cphome small{display:block;font-size:12.5px;font-weight:700;color:var(--mute);margin-top:2px;word-break:keep-all}
.cphome .chev{width:18px;height:18px;color:var(--ink)}
.cphd{display:flex;gap:12px;align-items:center;margin-bottom:10px}.cphd h3{margin:0}
#cpT{width:100%;border:0;background:#F4F1FF;border-radius:16px;padding:12px 14px;font:inherit;font-size:15px;resize:none;margin-bottom:8px}
#cpRes{margin-top:10px}.cpfound{font-size:14px;font-weight:700;color:#4A3BB0;margin:4px 2px 8px}
.cpbuy{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--card);border-radius:20px;padding:12px 14px;margin-top:12px;color:inherit}
.cpbuy img{width:44px;height:44px}.cpbuy>span:nth-child(2){flex:1}.cpbuy b{display:block;font-size:16px;font-weight:900;color:var(--ink)}.cpbuy small{font-size:12.5px;font-weight:700;color:var(--mute)}
.cpbuy em{font-style:normal;font-size:12px;font-weight:800;color:var(--sub);background:var(--fill);border-radius:99px;padding:3px 8px}
.cpbuy.sm{margin:0 0 10px}
.cprow{display:inline-flex;align-items:center;gap:6px;margin:-4px 0 8px 56px;font-size:12.5px;font-weight:900;color:var(--ink);text-decoration:none;background:var(--card);border-radius:99px;padding:5px 11px}.cprow em{font-style:normal;font-size:12px;color:var(--sub)}
.cpdisc{margin:8px 2px 0;font-size:13px;line-height:1.5;font-weight:500;color:var(--ink2);word-break:keep-all}
/* 온라인 사기 · 대신 이거(11-03): 가짜 로고 대신 장바구니 그림 */
.cphd img{width:52px;height:52px}
.buyb.cp .cpimg{width:40px;height:40px;flex:none}.buyb.cp small{display:block;font-size:12px;font-weight:700;color:var(--sub)}
.cpalt{background:#E9F8EF;border-radius:22px;padding:14px;margin-top:12px}
.cpq{margin:0 2px 8px;font-size:13.5px;font-weight:900;color:#14603A}
.cpa{width:100%;display:flex;align-items:center;gap:12px;border:0;font:inherit;text-align:left;background:#fff;border-radius:18px;padding:10px 12px}
.cpa .pthumb{width:52px;height:52px}.cpa>span{flex:1;min-width:0}.cpa small{display:block;font-size:12px;font-weight:800;color:#6B6290}
.cpa b{display:block;font-size:16px;font-weight:900;color:#1B1236;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cpa em{font-style:normal;font-size:13px;font-weight:900;color:#14603A}
.cpbtn{display:block;text-align:center;margin-top:8px;background:var(--card);color:#fff;font-weight:900;font-size:15px;border-radius:14px;padding:12px;text-decoration:none}.cpbtn i{font-style:normal;font-size:12px;opacity:.8;margin-left:4px}
/* 쿠팡 공식 로고(흰 알약 위) — 어두운 화면에서도 로고 색이 보이도록 바탕은 항상 흰색 */
.cplg{flex:none;display:inline-grid;place-items:center;width:76px;height:44px;border-radius:14px;background:white;box-shadow:0 0 0 1px rgba(17,26,46,.06)}
.cplg img{display:block;width:62px;height:auto;margin:0}
.cpbuy .cplg img,.buyb.cp .cplg img{width:62px;height:auto}
.cphd .cplg img{width:62px;height:auto}
/* ===== 쿠팡 칸 A안(11-03 대표님 선택): 흰 카드 · 쿠팡 공식 로고 · 보라 화살표 — 붉은색 안 씀 ===== */
.cpbuy,.cphome,.buyb.cp{background:var(--card);box-shadow:var(--sh);border:0;border-radius:22px;padding:14px;gap:14px;color:var(--ink)}
.cpbuy .cplg,.cphome .cplg,.buyb.cp .cplg,.cphd .cplg{width:84px;height:46px;background:rgb(244,246,248);box-shadow:none}
html.dark .cpbuy .cplg,html.dark .cphome .cplg,html.dark .buyb.cp .cplg,html.dark .cphd .cplg{background:white}
.cplg img,.cpbuy .cplg img,.buyb.cp .cplg img,.cphd .cplg img{width:66px;height:auto}
.cpbuy b,.cphome b,.buyb.cp b{display:block;font-family:Pretendard,sans-serif;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.cpbuy small,.cphome small,.buyb.cp small{display:block;font-size:13px;font-weight:600;color:var(--mute);margin-top:2px}
.cpbuy em,.buyb.cp .adtag{flex:none;font-style:normal;font-size:11.5px;font-weight:800;color:var(--sub);background:var(--fill);border:0;border-radius:99px;padding:3px 8px}
.cpgo{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#6C4CF5;color:white}
.cpgo svg{width:16px;height:16px}
.cprow{background:var(--card);color:var(--ink);box-shadow:var(--sh)}.cprow em{color:var(--sub)}
.cpbtn{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
/* 기준치 초과 칸은 한 줄 전체로(3칸에 넣으면 「나트륨 기준치 초…」처럼 잘림) */
.verdict>span.over{grid-column:1/-1;padding:10px 12px}
.verdict>span.over>span{flex-direction:row!important;align-items:baseline!important;gap:8px!important;flex-wrap:wrap}
.verdict>span.over b{font-size:15px;overflow:visible}
.verdict>span.over small{white-space:normal}
/* 검색 목록 핵심 성분(라면=나트륨, 음료=당류): 많으면 빨강, 나머지는 진한 글자 */
.row .w em.kn{color:var(--ink2)}.row .w em.kn.hi{color:#C4281C}.row .w em.kn.good{color:#4B36B8}
/* 홈 「오늘의 비교」: 흰 카드 하나, 순위는 보라 숫자 동그라미(진짜 순위라 번호를 씀) */
.topc{background:var(--card);border-radius:22px;box-shadow:var(--sh);padding:16px 14px 8px;margin:12px 0 0}
.topc header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 6px}
.topc header small{display:block;font-size:12.5px;font-weight:800;color:#6C4CF5}
.topc header b{display:block;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:21px;color:var(--ink);letter-spacing:-.01em}
.topall{flex:none;border:0;font:inherit;font-size:13px;font-weight:800;color:#4B36B8;background:#F1EDFF;border-radius:99px;padding:7px 12px}
.topc ol{list-style:none;padding:0;margin:0;counter-reset:tp}
.topc li{counter-increment:tp}
.topc li button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:none;font:inherit;text-align:left;padding:9px 2px;color:inherit}
.topc li button:before{content:counter(tp);flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#6C4CF5;color:white;font-size:13px;font-weight:900}
.topc li .ph{width:44px;height:44px;flex:none}
.topc .tn{flex:1;min-width:0}.topc .tn b{display:block;font-size:15.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topc .tn small{font-size:12.5px;color:var(--mute);font-weight:600}
.topc em{flex:none;font-style:normal;text-align:right;font-size:12px;font-weight:700;color:var(--sub);line-height:1.2}.topc em b{display:block;font-size:16px;font-weight:900;color:#4B36B8}.topc em i{font-style:normal;font-size:12px;color:var(--mute)}
/* 원재료 사진 제보 포인트 안내 */
.ptb{font-style:normal;margin-left:8px;font-size:12.5px;font-weight:900;color:#1d2a00;background:#FFE29A;border-radius:99px;padding:3px 9px}
.ptnote{margin:8px 2px 0;font-size:12.5px;font-weight:600;color:var(--sub);text-align:center;word-break:keep-all}
.algnone small .ptin{display:inline;font-size:inherit;font-weight:900;color:#4B36B8}
.row .w .mp{font-style:normal;margin-left:4px;font-size:12px;font-weight:800;color:#4B36B8;background:#F1EDFF;border-radius:99px;padding:1px 6px}
/* 비교 빈 칸: 점선 테두리 없이 색 덩어리로(선 많은 디자인 금지, 11-03) */
.vsslot,.pslot,.rpslot,.pr2.empty{border:0!important}
.pslot.a{background:#FFEDEB}.pslot.b{background:#EAF0FF}
.vsslot{background:#FFEDEB!important}.vsslot.b{background:#EAF0FF!important}.vsslot.full{background:var(--card)!important}
.wrongb{border:0;background:#F1EDFF}
/* 약·영양제·외식·먹은 것: 검색 전 추천어 칩 */
.hlex{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.hlex button{border:0;font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:var(--card);box-shadow:var(--sh);border-radius:99px;padding:9px 15px}
/* 종류별 순위 첫 화면: 그림 분류 묶음 + 세부 분류는 접기 */
.lsgrp{background:var(--card);border-radius:22px;box-shadow:var(--sh);padding:14px 12px 12px;margin:12px 0 0}
.lsgrp h3{margin:0 4px 10px;font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:19px;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.lsgrp h3 small{font-family:Pretendard,sans-serif;font-size:12.5px;font-weight:700;color:#6C4CF5}
.lsgrp .shgrid button{background:var(--fill)}
.lsall{margin:16px 0 0;background:var(--card);border-radius:18px;padding:14px;box-shadow:var(--sh)}
.lsall summary{font-size:15.5px;font-weight:800;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.lsall summary::-webkit-details-marker{display:none}.lsall summary small{font-size:13px;color:var(--mute);font-weight:700}
.lsall summary:after{content:'⌄';color:#6C4CF5;font-size:20px;margin-left:8px}.lsall[open] summary:after{content:'⌃'}
.mnintro{display:flex;gap:12px;align-items:center;background:#F1EDFF;border-radius:20px;padding:14px;margin:0 0 12px}
.mnintro img{width:44px;height:44px;flex:none}.mnintro p{margin:0;font-size:13.5px;color:var(--sub);font-weight:600;line-height:1.45;word-break:keep-all}.mnintro b{display:block;font-size:16px;color:var(--ink);font-weight:800;margin-bottom:2px}
/* 내 살림: 쿠팡 로고 칸, 친구 초대는 묶음 밖 한 줄 */
.fic img[src*="coupang"]{width:46px!important;height:auto!important;object-fit:contain}
.invite{width:100%;display:flex;align-items:center;gap:12px;border:0;font:inherit;text-align:left;background:var(--card);box-shadow:var(--sh);border-radius:20px;padding:12px 14px;margin:12px 0 0;color:var(--ink)}
.invite img{width:40px;height:40px;flex:none}.invite span{flex:1}.invite b{display:block;font-size:16px;font-weight:800}.invite small{font-size:12.5px;color:var(--mute);font-weight:600}.invite .chev{width:18px;height:18px;color:#6C4CF5}
/* 영수증 기록 첫 안내 */
.rcintro{text-align:center;padding:4px 4px 8px}.rcintro img{width:84px;height:84px}
.rcintro h3{margin:6px 0 6px}.rcintro p{margin:0 0 12px;font-size:14.5px;color:var(--sub);line-height:1.5;word-break:keep-all}
.rcintro ul{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.rcintro li{font-size:13px;font-weight:700;color:#4B36B8;background:#F1EDFF;border-radius:99px;padding:5px 10px}
.btn.wide{width:100%}
.famq{margin-top:10px}
.rcintro img{display:block;margin:0 auto}
.fic:has(img[src*="coupang"]){background:white!important}
.fic:has(img[src*="coupang"]){box-shadow:0 0 0 1.5px #ECEEF2 inset}
/* 비교 화면 쿠팡 칸: .buyb span{flex:1} 이 로고·화살표까지 늘려 타원이 되던 것 고침 */
.buyb.cp .cplg,.buyb.cp .cpgo{flex:0 0 auto!important;display:grid!important}
.buyb.cp>span:not(.cplg):not(.cpgo){flex:1;min-width:0}
.buyb.cp small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 칭찬·안내 알림은 아래쪽으로(위에 뜨면 제품 이름을 가림, 11-03) — 아래 버튼 줄·하단 메뉴 위 */
.toast.cheer{top:auto!important;bottom:calc(var(--sb) + 150px)!important}
.cmpacts{margin:18px 0 8px}
/* 제품 맨 위: 기준치 초과는 한 줄 전체, 보통·적음은 작은 칩으로 나란히(혼자 덩그러니 떨어지지 않게) */
.verdict{display:flex!important;flex-wrap:wrap;gap:6px}
.verdict>span{flex:0 0 auto;min-width:0;padding:7px 11px}
.verdict>span.over{flex:1 1 100%;padding:10px 12px}
.verdict>span:not(.over) img{width:22px;height:22px}
.verdict>span:not(.over)>span{flex-direction:row!important;align-items:baseline!important;gap:6px!important}
.verdict>span:not(.over) b{font-size:14px}.verdict>span:not(.over) small{font-size:12.5px}
/* 이달의 라벨 탐정 비었을 때: 큰 빈칸 대신 한 줄 + 버튼 */
.rkempty2{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:16px;padding:12px 12px 12px 14px;margin:6px 0 4px}
.rkempty2 span{flex:1;min-width:0}.rkempty2 b{display:block;font-size:15px;font-weight:800;color:var(--ink)}.rkempty2 small{font-size:12.5px;color:var(--sub);font-weight:600}
.rkempty2 .mini{flex:none}
/* 비교: 알레르기 먼저 확인 카드(추천보다 위) */
.algstop{display:flex;gap:12px;align-items:flex-start;background:#FFECEA;border-radius:22px;padding:14px;margin:12px 0 0;color:#7A1B14}
.algstop>img{width:44px;height:44px;flex:none}.algstop small{display:block;font-size:12.5px;font-weight:800;color:#C4281C}
.algstop b{display:flex;align-items:center;gap:6px;font-size:16.5px;font-weight:900;color:var(--ink);margin-top:4px}
.algstop p{margin:2px 0 0;font-size:14.5px;font-weight:700;color:#C4281C;word-break:keep-all}
.algstop .algok{margin-top:8px;font-size:13.5px;color:#5b4a48;font-weight:600}.algstop .algok b{display:inline;font-size:13.5px}
.famr .fq{color:var(--sub)}
/* 영양제 비교 표 머리: 어두운 화면에서 밝은 바탕+흰 글씨가 되던 것 → 보라 두 가지로 제품 구분 */
.stab thead th{background:#4B36B8!important;color:white!important}
.stab thead th:nth-child(2){background:#6C4CF5!important}
.stab thead th:first-child{background:#2B1C7A!important}
.stab td.na{color:var(--mute);font-size:12.5px}
/* 제품 이름 아래 알레르기 상태 한 줄 */
.apin{width:100%;display:flex;align-items:center;gap:10px;border:0;font:inherit;text-align:left;border-radius:18px;padding:11px 14px;margin:10px 0 2px;background:var(--fill);color:var(--ink)}
.apin img{width:30px;height:30px;flex:none}.apin span{flex:1;min-width:0}.apin b{display:block;font-size:15.5px;font-weight:800;word-break:keep-all}.apin small{display:block;font-size:12.5px;font-weight:600;color:var(--sub)}
.apin.bad{background:#FFECEA}.apin.bad b{color:#C4281C}
.apin.ok{background:#EDF8F1}.apin.ok b{color:#1E6B3E}
.apin.q{background:#FFF4E5}.apin.q b{color:#8A4B00}
.apin.wait b{font-size:14px;color:var(--sub)}
.row .dupd{color:#6C4CF5;font-weight:700}
.dupnote{margin:-2px 2px 8px;font-size:13px;font-weight:700;color:#4B36B8;background:#F1EDFF;border-radius:12px;padding:8px 12px;word-break:keep-all}
/* 큰 글씨: 아래 버튼 3개가 화면 밖으로 잘리던 것 → 두 줄(기록·장보기 / 비교 크게) */
html.bigtext .tribar{grid-template-columns:1fr 1fr}
html.bigtext .tribar .tri:last-child{grid-column:1/-1}
/* 내 살림 기능 이름: 14px, 길면 두 줄로(「냉장고 유통…」 잘림 막기). 큰 글씨에서는 3칸 */
.fg .fn{font-size:14px;white-space:normal;word-break:keep-all;text-align:center;line-height:1.25;overflow:visible}
html.bigtext .fg4{grid-template-columns:repeat(3,1fr)}
#shopc .fn{font-size:12.5px}
.wrnote{margin:8px 2px 0;font-size:12.5px;color:var(--sub);font-weight:600;word-break:keep-all}
.mnlh{margin:4px 2px 6px;font-size:14px;font-weight:800;color:var(--ink)}
/* 커피 추첨 창 시인성(11-03): 발표일 크게, 조건은 세로 줄(세 칸에 넣으니 글자가 낱말 중간에서 끊김), 테두리 선 없이 색 덩어리 */
.evhero{margin:4px 0 10px}.evhero h3{font-size:26px}
.evdate{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#5B3DF0;color:white;border-radius:20px;padding:14px 18px}
.evdate small{display:block;font-size:13px;font-weight:800;color:#DCD3FF}.evdate b{display:block;font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.evdate em{flex:none;font-style:normal;font-size:20px;font-weight:900;color:#1d2a00;background:#FFE29A;border-radius:14px;padding:8px 12px}
.evspan{margin:10px 4px 0;font-size:15px;font-weight:700;color:var(--sub)}.evspan b{color:var(--ink);font-weight:900}
.evh{margin:18px 4px 10px;font-size:17px;font-weight:900;color:var(--ink);word-break:keep-all}
.evsteps{display:flex!important;flex-direction:column;gap:8px;grid-template-columns:none!important;margin:0 0 14px}
.evsteps li{display:flex!important;align-items:center;gap:14px;text-align:left!important;background:#F3EFFF!important;box-shadow:none!important;border-radius:18px!important;padding:12px 14px!important}
.evsteps li:before{display:none!important}
.evsteps img{width:52px!important;height:52px!important;margin:0!important;flex:none}
.evsteps span{flex:1;min-width:0}
.evsteps em{display:inline-block;font-style:normal;font-size:12.5px;font-weight:900;color:white;background:#6C4CF5;border-radius:99px;padding:2px 9px;margin-bottom:3px}
.evsteps b{display:block;font-size:17px!important;font-weight:900;color:var(--ink)!important;word-break:keep-all}
.evsteps small{display:block;font-size:13.5px!important;font-weight:600!important;color:var(--sub)!important;margin-top:1px}
.evsteps li.draw{background:#FFF6DA!important}.evsteps li.draw em{background:#A07A10}
/* 발표일 칸: 진한 보라가 눈부심 → 연보라 바탕 + 진한 보라 글자(11-03 대표님) */
.evdate{background:#EEEAFF;color:#2B1C7A}
.evdate small{color:#6C4CF5}.evdate b{color:#2B1C7A}
.evdate em{background:#6C4CF5;color:white}
/* 쿠팡에서 주문하기 창 */
.cpord .cphd{margin-bottom:12px}
.cpostep{margin:8px 4px 0;font-size:13.5px;font-weight:700;color:#4B36B8;word-break:keep-all}
.cpoh{margin:18px 4px 10px;font-size:16px;font-weight:900;color:var(--ink);display:flex;align-items:baseline;gap:8px}.cpoh small{font-size:12.5px;font-weight:700;color:var(--mute)}
.cpokinds{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:42vh;overflow:auto}
.cpokinds button{border:0;font:inherit;background:var(--fill);border-radius:16px;padding:10px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:4px}
.cpokinds img{width:44px;height:44px;object-fit:contain}.cpokinds span{font-size:13px;font-weight:800;color:var(--ink);word-break:keep-all;text-align:center;line-height:1.2}
/* 홈 첫 장면: 힉스필드 영상(6초 반복, 소리 없음). 바탕은 영상과 같은 연보라로 녹여서 네모가 티 나지 않게 */
.stage.vhero{width:min(100%,460px)!important;aspect-ratio:1.92!important;margin:14px auto 0!important;padding:0;border:0;background:none;overflow:hidden;border-radius:26px;display:block}
.stage.vhero .vh{width:100%;height:100%;object-fit:cover;display:block;-webkit-mask-image:radial-gradient(120% 110% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(120% 110% at 50% 50%,#000 72%,transparent 100%)}
@media (prefers-reduced-motion:reduce){.stage.vhero .vh{animation:none}}
.stage.vhero{margin-bottom:10px!important}html.dark .stage.vhero{box-shadow:0 0 0 1px rgba(255,255,255,.06)}
/* 홈 영상 카메라 플래시(렌즈 위치 67.5%, 32%) */
.stage.vhero{position:relative}
.vflash,.vflash2{position:absolute;pointer-events:none;opacity:0;border-radius:50%}
.vflash{left:67.5%;top:32%;width:44%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);background:radial-gradient(circle,#fff 0,#fff 18%,rgba(255,255,255,.85) 30%,rgba(230,255,170,.5) 48%,rgba(255,255,255,0) 70%)}
.vflash2{inset:0;border-radius:inherit;background:rgba(255,255,255,.55)}
.stage.vhero.flash .vflash{animation:vfl .55s ease-out}
.stage.vhero.flash .vflash2{animation:vfl2 .45s ease-out}
@keyframes vfl{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
@keyframes vfl2{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.vflash,.vflash2{display:none}}
.vflash{left:71%;top:54%}
.vflash2{background:radial-gradient(70% 80% at 71% 54%,rgba(255,255,255,.7),rgba(255,255,255,0) 75%)}
.stage.vhero.imgmode .vflash{animation:vfli 6.04s ease-out 2.2s infinite}
@keyframes vfli{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}1.5%{opacity:1;transform:translate(-50%,-50%) scale(1)}9%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}100%{opacity:0}}
.stage.vhero.imgmode .vflash2{animation:vfl2i 6.04s ease-out 2.2s infinite}
@keyframes vfl2i{0%{opacity:0}1.5%{opacity:1}8%{opacity:0}100%{opacity:0}}
/* 그림이 뜨기 전에는 첫 장면 사진을 바탕으로(빈칸 방지) */
.stage.vhero{background:url(/img/sc/hero-v.jpg) center/cover no-repeat}
.vflash,.vflash2{display:none!important}
/* 쿠팡 종류: 안쪽 스크롤 없애고 창 전체가 내려가게(아이폰에서 안쪽 칸이 안 내려가던 것), 묶음마다 제목 */
.cpokinds{max-height:none!important;overflow:visible!important}
.cpog{margin:0 0 14px}.cpog h5{margin:0 4px 8px;font-size:15px;font-weight:900;color:#4B36B8}
.sheetbox.cpord{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* 카메라를 못 열 때: 큰 「사진 찍기」, 허용하는 법은 접기 */
.camfail{text-align:center;padding:18px 16px 14px!important;background:rgba(255,255,255,.08)!important;border-radius:22px!important}
.camfail img{width:84px;height:auto;display:block;margin:0 auto 6px}
.camfail b{font-size:20px!important;margin:0 0 4px!important}
.camfail>p{margin:0 0 14px;font-size:15px;color:#D9D4F5;word-break:keep-all}
.cfshot{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;border-radius:18px;background:#6C4CF5;color:white;font-size:18px;font-weight:900;cursor:pointer}
.cfshot svg{width:24px;height:24px}
.cfhow{margin-top:12px;text-align:left;background:rgba(255,255,255,.06);border-radius:16px;padding:12px 14px}
.cfhow summary{font-size:14.5px;font-weight:800;color:#C9BCFF;cursor:pointer}
.cfhow ol{margin:10px 0 6px;padding-left:20px;font-size:15px;line-height:1.7;color:white}.cfhow ol b{color:#FFE29A}
.cfhow p{margin:0 0 10px;font-size:13px;color:#B9B3D6}
.cfretry{width:100%;min-height:46px;border:0;border-radius:14px;background:white;color:#2B1C7A;font:inherit;font-size:16px;font-weight:900}
/* 아래 창(시트) 스크롤·움직임 다듬기(11-03): 안쪽 칸 따로 스크롤 없애고 창 전체가 부드럽게, 뒤 화면은 같이 안 움직이게 */
.avgrid,.avwrap{max-height:none!important;overflow:visible!important}
.sheetbox{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;animation:shup .42s cubic-bezier(.22,1.18,.36,1) both}
@keyframes shup{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
.sheet.closing{animation:shfade .26s ease forwards}
.sheet.closing .sheetbox{animation:shdown .26s cubic-bezier(.4,0,.8,.4) forwards}
@keyframes shdown{to{transform:translateY(105%)}}
@keyframes shfade{to{background:rgba(17,26,46,0)}}
/* 칸들이 차례로 떠오르기 */
.sheetbox .avgrid>*,.sheetbox .cpokinds>*,.sheetbox .cpog h5{animation:itup .38s cubic-bezier(.2,.9,.3,1.15) both}
.sheetbox .avgrid>*:nth-child(1){animation-delay:.08s}.sheetbox .avgrid>*:nth-child(2){animation-delay:.11s}.sheetbox .avgrid>*:nth-child(3){animation-delay:.14s}
.sheetbox .avgrid>*:nth-child(4){animation-delay:.17s}.sheetbox .avgrid>*:nth-child(5){animation-delay:.2s}.sheetbox .avgrid>*:nth-child(6){animation-delay:.23s}
.sheetbox .avgrid>*:nth-child(n+7){animation-delay:.26s}
.sheetbox .cpokinds>*:nth-child(1){animation-delay:.05s}.sheetbox .cpokinds>*:nth-child(2){animation-delay:.08s}.sheetbox .cpokinds>*:nth-child(3){animation-delay:.11s}.sheetbox .cpokinds>*:nth-child(n+4){animation-delay:.14s}
@keyframes itup{0%{opacity:0;transform:translateY(14px) scale(.96)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sheetbox,.sheet.closing,.sheet.closing .sheetbox,.sheetbox .avgrid>*,.sheetbox .cpokinds>*,.sheetbox .cpog h5{animation:none!important}}
.cpokinds button{position:relative}
.cpokinds button em{position:absolute;top:5px;right:5px;font-style:normal;font-size:12px;font-weight:800;color:#4B36B8;background:#EEEAFF;border-radius:99px;padding:1px 6px}
.cpokinds button.soon{padding-top:24px}.cpokinds button em{top:4px;right:50%;transform:translateX(50%);white-space:nowrap}
/* 장보기 목록: 품목 아래 추천 3개 · 알레르기 · 쿠팡 */
.shopl li{display:block}
.shalg{display:block;margin-top:2px;font-size:12.5px;font-weight:800;color:#C4281C}
.shrec{padding:2px 12px 12px 56px}
.shrec .state{font-size:12.5px;padding:4px 0}
.shrh{margin:0 0 6px;font-size:12.5px;font-weight:700;color:#6C4CF5}
.shrl{display:flex;flex-direction:column;gap:6px}
.shri{display:flex;align-items:center;gap:8px;border:0;font:inherit;text-align:left;background:var(--fill);border-radius:14px;padding:6px 10px 6px 8px;color:var(--ink)}
.shri .no{flex:none;width:20px;height:20px;border-radius:50%;background:#6C4CF5;color:white;font-size:12px;display:grid;place-items:center}
.shri .ph{width:34px;height:34px;flex:none}
.shri span{flex:1;min-width:0}.shri i{display:block;font-style:normal;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shri small{font-size:12.5px;color:#4B36B8;font-weight:700}
.shcp{margin-top:8px;width:100%;display:flex;align-items:center;gap:8px;border:0;font:inherit;font-size:14px;font-weight:800;color:var(--ink);background:var(--card);box-shadow:var(--sh);border-radius:14px;padding:7px 10px}
.shcp .cplg{width:58px!important;height:30px!important;border-radius:9px}.shcp .cplg img{width:46px!important}
.shcp em{margin-left:auto;font-style:normal;font-size:12px;font-weight:800;color:var(--sub);background:var(--fill);border-radius:99px;padding:2px 8px}
.shrh.warn{color:#C4281C;font-weight:800}
.cpbuy.sm>span:nth-child(2){text-align:left}
/* 원재료 분석 결과: 알레르기 성분 제목 + 빨간 칩 */
.fdah{margin:10px 2px 6px;font-size:15px;font-weight:900;color:#C4281C}.fdah .link{font-size:13.5px;font-weight:800;color:#4B36B8;background:none;border:0;padding:0}
.algs.fdal span{background:#FFECEA!important;color:#C4281C!important;font-weight:900;font-size:15px;padding:7px 13px}
.algs.fdal span.on{background:#C4281C!important;color:white!important}
#fdRes{scroll-margin-top:12px}
.rkexh{margin:14px 0 8px;font-size:14px;font-weight:900;color:#4B36B8}
.rkex{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rkex button{display:flex;align-items:center;gap:8px;border:0;font:inherit;background:#F1EDFF;border-radius:16px;padding:10px 12px;color:var(--ink);font-size:15px;font-weight:800;text-align:left}
.rkex img{width:36px;height:36px;object-fit:contain;flex:none}
/* 기록 빈 화면: 큰 카드 대신 한 줄(위 음식 칩과 역할 겹침 정리) */
.logempty{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:20px;box-shadow:var(--sh);padding:12px 14px;margin-top:12px}
.logempty img{width:52px;height:52px;flex:none}.logempty p{flex:1;margin:0;font-size:13.5px;color:var(--sub);font-weight:600;line-height:1.45;word-break:keep-all}.logempty b{display:block;font-size:16px;color:var(--ink);font-weight:800}
.logempty .mini{flex:none}
/* 아래 창 닫기 버튼: 오른쪽 위에 붙어서 끝까지 내려도 보임 */
.sheetbox{position:relative}
.shx{position:sticky;top:0;align-self:flex-end;margin:-2px -6px -46px 0;z-index:5;width:40px;height:40px;border:0;border-radius:50%;background:var(--card);box-shadow:0 2px 10px rgba(17,26,46,.14);display:grid;place-items:center;color:var(--ink);flex:none}
.shx svg{width:18px;height:18px}
.ptpanel.ptin{animation:itup .35s cubic-bezier(.2,.9,.3,1.15)}
#cpBox{margin-top:12px}
/* 로고 옆 베타 표시 */
.hero .hd .beta{align-self:center;margin-left:-4px;font-size:11.5px;font-weight:900;color:#1d2a00;background:#FFE29A;border-radius:99px;padding:2px 8px;letter-spacing:0}
.hero .hd{align-items:center}
#fbT{width:100%;border:0;border-radius:16px;background:var(--card);box-shadow:var(--sh);padding:14px;font-size:16px;line-height:1.5;resize:none;color:var(--ink)}
/* 제품 화면: 알레르기 설정 안 한 사람용 한 줄 */
.apin.lite{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;background:var(--card);box-shadow:var(--sh)}
.apin.lite b{font-size:13.5px;font-weight:800;color:var(--sub)}
.apin.lite span{display:flex;gap:5px;flex-wrap:wrap;flex:1}
.apin.lite i{font-style:normal;font-size:13px;font-weight:800;color:#8A4B00;background:#FFF4E5;border-radius:99px;padding:2px 9px}
.apin.lite .link{font-size:13px;font-weight:800;color:#4B36B8;background:none;border:0;padding:0}
/* 홈 제목: 힉스필드 글자 그림(밝은 화면). 어두운 화면에서는 남색 글자가 안 보여서 글자로 */
.hero-t.has-img{margin:6px auto 4px;line-height:0}
.hero-t .htimg{display:block;width:min(86%,340px);height:auto;margin:0 auto}
.hero-t .httx{display:none}
html.dark .hero-t .htimg{display:none}
html.dark .hero-t .httx{display:inline;line-height:1.25}
/* 11-04 대표님: 보라 연하게, 형광색 빼기 — 홈 위쪽 */
.hero .hd .beta{color:#5B48C8;background:#ECE6FF}
.hero{background:radial-gradient(55% 32% at 0% 0%,rgba(156,140,240,.18),rgba(156,140,240,0) 70%),radial-gradient(48% 30% at 100% 6%,rgba(176,160,245,.16),rgba(176,160,245,0) 70%),radial-gradient(45% 28% at 0% 78%,rgba(156,140,240,.12),rgba(156,140,240,0) 70%),#FCFBFF}
.hero:before{background:rgba(156,140,240,.12)}.hero:after{background:rgba(176,160,245,.10)}
.tabbar .sc{background:linear-gradient(135deg,#A595F5,#8371E6);box-shadow:0 8px 18px rgba(110,90,210,.25),0 0 0 4px rgba(255,255,255,.85)}
.tabbar .sc:after{background:rgba(255,255,255,.9);box-shadow:none}
.tabbar button.scanc{color:#6E5CD6}
.hero-s b{color:#6A58C8}
/* 첫 안내: 다이어트 목표 칼로리 고르기(11-04) */
.kgoalg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.kgoalg button{border:0;border-radius:20px;background:var(--teal-bg);padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink);font:inherit}
.kgoalg button b{font-size:26px;font-weight:900;letter-spacing:-.02em}.kgoalg button small{font-size:13px;color:#6A6290;font-weight:700}
.kgoalg button.on{background:#6C4CF5;color:#fff}.kgoalg button.on small{color:#E4DCFF}
.row small .kindt{display:inline-block;font-size:11.5px;font-weight:800;color:#5B48C8;background:#EEEAFF;border-radius:99px;padding:1px 7px;margin-right:5px;vertical-align:1px}
/* 광고 문구는 쿠팡 버튼 위(첫 부분)에, 본문과 다른 색으로 분명히(공정위 추천·보증 지침 2024.12.) */
.cpdisc{margin:0 2px 8px;font-size:13px;font-weight:700;color:#5B48C8}
.cpalt .cpdisc,.cpd-wrap .cpdisc{margin-top:10px}
/* 쿠팡 로고 그림 대신 글자(파트너스 약관: 동의 없는 상표·로고 사용 금지, 11-04) — 쿠팡 색을 흉내 내지 않고 앱 기본 색으로 */
.cplg.cptx{display:grid;place-items:center;font-size:16px;font-weight:900;letter-spacing:-.02em;color:#3A3363;background:#F1EEFA!important}
.shcp .cplg.cptx{font-size:12.5px}
html.dark .cplg.cptx{color:#ECEAF6;background:#2A2738!important}
/* 아이폰 사파리: 92vh는 주소창 뒤까지 포함해 창 위(제목·닫기)가 잘림 → 실제 보이는 높이(dvh) 기준(11-04) */
.sheetbox{max-height:calc(92vh - env(safe-area-inset-top));max-height:calc(100dvh - env(safe-area-inset-top) - 36px)}
/* 홈 화면에 추가 배너(11-04) — 연보라 바탕, 그림은 오른쪽, 글은 왼쪽 */
.a2hsb{position:relative;margin:12px 0 14px}
.a2hsbm{display:flex;align-items:stretch;width:100%;border:0;padding:0;font:inherit;text-align:left;color:var(--ink);background:#F1ECFD;border-radius:24px;overflow:hidden;min-height:132px}
.a2hsbt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:16px 4px 16px 18px;z-index:1}
.a2hsbt b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:21px;line-height:1.2;color:#3A3363;letter-spacing:-.01em}
.a2hsbt small{font-size:13px;font-weight:600;color:#6A6290}
.a2hsbt i{font-style:normal;align-self:flex-start;margin-top:6px;font-size:13px;font-weight:800;color:#fff;background:#7B66D9;border-radius:99px;padding:6px 12px}
.a2hsbm img{width:52%;max-width:240px;object-fit:cover;object-position:70% 50%;margin-left:-8%}
.a2hsb .x{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.75);color:#6A6290;font-size:18px;line-height:1}
html.dark .a2hsbm{background:#262046;color:#ECEAF6}html.dark .a2hsbt b{color:#E4DCFF}html.dark .a2hsbt small{color:#B9B2DA}
/* 영양 자료 없는 바코드: 성분표 찍기를 크게(11-04) */
.nonut2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:#F1ECFD;border-radius:24px;padding:18px 16px 14px;margin:12px 0 6px}
.nonut2 img{width:64px;height:64px}
.nonut2>b{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:21px;color:#3A3363;line-height:1.25}
.nonut2 p{margin:0;font-size:14px;line-height:1.55;color:#4e586a;word-break:keep-all}.nonut2 p b{color:#3A3363}
.nonut2 .btn{width:100%;margin-top:6px}
.nonut2 small{font-size:12.5px;color:#6A6290;font-weight:600}
.nearn{width:100%;display:flex;align-items:center;gap:10px;border:0;font:inherit;text-align:left;background:var(--card);border-radius:18px;padding:12px 14px;margin:0 0 8px;color:var(--ink)}
.nearn span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.nearn small{font-size:12px;color:#8A84A8;font-weight:700}.nearn b{font-size:15px;font-weight:800}.nearn em{font-style:normal;font-size:13px;color:#5B48C8;font-weight:700}
html.dark .nonut2{background:#262046}html.dark .nonut2>b,html.dark .nonut2 p b{color:#E4DCFF}html.dark .nonut2 p{color:#c9c6d6}
/* 홈 화면 추가 설명서: 실제 아이폰 화면 사진(11-04) */
.hsteps li{margin-bottom:14px}.hsteps li>span{display:block}
.hsteps img{display:block;width:100%;max-width:340px;margin:8px 0 0;border-radius:14px;box-shadow:0 2px 10px rgba(17,26,46,.12)}
/* 내 정보는 안전한가요? — 안심 안내(11-04) */
.privok{display:flex;gap:12px;align-items:center;background:#EAF7EE;border-radius:18px;padding:14px}
.privok img{width:44px;height:44px;flex:none}.privok p{margin:0;font-size:13.5px;color:#3E6B4C;line-height:1.45}.privok b{display:block;font-size:16.5px;color:#1F5A33;font-weight:900}
.privl{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.privl li{position:relative;padding-left:26px;font-size:13.5px;color:#5A5478;line-height:1.5}
.privl li:before{content:'✓';position:absolute;left:4px;top:0;font-weight:900;color:#2E9E5B}
.privl b{display:block;font-size:15px;color:var(--ink);font-weight:800}
html.dark .privok{background:#1d3326}html.dark .privok p{color:#b8d9c3}html.dark .privok b{color:#d9f2e1}html.dark .privl li{color:#c9c6d6}
.hd [data-act="langSet"]{display:none!important}
.sharec .si.app{background:none!important;padding:0;overflow:hidden}.sharec .si.app img{width:100%;height:100%;display:block;border-radius:inherit}
/* 가족 알레르기(11-04 디자인 업그레이드) */
.famintro{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#EAF7EE,#EEF0FF);border-radius:24px;padding:16px}
.famintro>img{width:56px;height:56px;flex:none}.famintro b{display:block;font-size:17px;font-weight:900;color:#1F4D34}
.famintro p{margin:3px 0 6px;font-size:13.5px;color:#4B5A52;line-height:1.45}.famintro span{display:inline-block;font-size:12.5px;font-weight:800;color:#2E7D4F;background:#fff;border-radius:99px;padding:3px 10px}
.famt{margin:20px 2px 10px;font-size:17px;font-weight:900;color:var(--ink)}
.famg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.famg button{position:relative;border:0;background:var(--card);border-radius:20px;padding:14px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;box-shadow:0 2px 10px rgba(52,28,140,.06)}
.famg img{width:52px;height:52px}.famg b{font-size:15px;font-weight:800;color:var(--ink)}
.famg i{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:#EEEAFF;color:#6C4CF5;font-style:normal;font-weight:900;font-size:16px;line-height:22px;text-align:center}
.famf{display:flex;align-items:center;gap:8px;margin-top:12px;background:var(--card);border-radius:18px;padding:6px 6px 6px 16px;box-shadow:0 2px 10px rgba(52,28,140,.06)}
.famf input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;padding:8px 0;color:var(--ink);outline:none}
.famadd{border:0;background:#EEEAFF;color:#5B48C8;font:inherit;font-weight:800;font-size:15px;border-radius:14px;padding:10px 16px}
.famc2{background:var(--card);border-radius:22px;padding:14px;margin-top:12px;box-shadow:0 2px 10px rgba(52,28,140,.06)}
.famh2{display:flex;align-items:center;gap:12px;margin-bottom:10px}.famh2 img{width:46px;height:46px;flex:none;background:#F3F0FF;border-radius:16px;padding:4px}
.famh2 span{flex:1;min-width:0}.famh2 b{display:block;font-size:17px;font-weight:900}.famh2 small{font-size:13px;color:#6A6290}
/* 목표 칼로리 카드(11-04) */
.kgg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}
.kgg button{display:flex;align-items:center;gap:10px;border:0;background:var(--card);border-radius:18px;padding:12px;font:inherit;text-align:left;box-shadow:0 0 0 1.5px #ECE8F7 inset}
.kgg img{width:34px;height:34px;flex:none}.kgg b{display:block;font-size:19px;font-weight:900;color:var(--ink);line-height:1.1}.kgg b small{font-size:12px;font-weight:700;color:#8A84A8;margin-left:2px}
.kgg span{display:block;font-size:12.5px;color:#6A6290;font-weight:700}
.kgg button{flex-direction:row}.kgg button>b,.kgg button>span{}
.kgg button.on{background:#EEEAFF;box-shadow:0 0 0 2px #8371E6 inset}
.kgf{display:flex;align-items:center;gap:8px;margin-top:12px;background:var(--card);border-radius:18px;padding:6px 6px 6px 14px;box-shadow:0 0 0 1.5px #ECE8F7 inset}
.kgf label{font-size:14px;font-weight:800;color:#5A5478;white-space:nowrap}.kgf input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:17px;font-weight:800;text-align:right;outline:none;color:var(--ink)}.kgf span{font-size:13px;color:#8A84A8;font-weight:700}
/* 검색창 새 모양(11-04 대표님 「없어 보여」): 굵은 검정 테두리 → 흰 칸 + 연보라 테두리·그림자, 돋보기는 연보라 둥근 단추 */
.qbox,.qbox.sq{height:56px;border:0;background:#fff;border-radius:20px;padding:0 6px 0 18px;gap:8px;box-shadow:0 0 0 1.5px #E4DEF8 inset,0 6px 18px rgba(91,72,200,.08)}
.qbox:focus-within,.qbox.sq:focus-within{box-shadow:0 0 0 2px #9C8CF0 inset,0 8px 22px rgba(91,72,200,.16)}
.qbox input{font-size:16.5px;font-weight:600;color:var(--ink)}
.qbox input::placeholder{color:#9A94B8;font-weight:500}
.qbox .qic,.qbox.sq .qic{box-sizing:border-box;width:44px;height:44px;padding:11px;margin:0;border-radius:14px;background:#F1ECFD;color:#6C4CF5;flex-shrink:0}
.qbox .addb{height:44px;border-radius:14px;margin-right:0}
html.dark .qbox,html.dark .qbox.sq{background:#1c1b25;box-shadow:0 0 0 1.5px #2f2b42 inset}
html.dark .qbox .qic{background:#2a2546;color:#C9BCFF}
.qbox .qclear{width:34px;height:34px;background:#F4F2FA;color:#8A84A8;flex-shrink:0}.qbox .qclear svg{width:14px;height:14px}
html.dark .qbox .qclear{background:#2a2738;color:#b4b0c8}

/* 내 살림(11-05 대표님 참고 화면 기준): 카드·색 배경 없이 큰 동그라미, 진한 이름, 회색 설명, 간단한 줄 */
.mhub{margin:4px -2px 0}
.mh{padding:18px 0 20px;border-bottom:1px solid var(--line)}
.mh:first-child{padding-top:8px}
.mh h2{margin:0 2px 14px;font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.mh4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 2px}
.mi{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:0 1px;-webkit-tap-highlight-color:transparent}
.mic{position:relative;width:74px;height:74px;border-radius:50%;background:#F2F3F5;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
html.dark .mic{background:#2A2933}
.mic img{width:50px;height:50px;object-fit:contain}
.mic em{position:absolute;right:0;top:0;font-style:normal;font-size:12px;font-weight:800;min-width:22px;height:22px;border-radius:11px;background:#6C4CF5;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 5px}
.mi b{font-size:15.5px;font-weight:800;line-height:1.25;color:var(--ink);letter-spacing:-.03em;word-break:keep-all}
.mi small{font-size:13px;font-weight:500;line-height:1.3;color:var(--sub);margin-top:3px;letter-spacing:-.03em;word-break:keep-all}
.mi:active .mic{background:#E6E2F8}.mi:focus-visible{outline:3px solid #6C4CF5;outline-offset:2px;border-radius:12px}
.invite{gap:12px;background:none;color:var(--ink);box-shadow:none;border-radius:0;padding:14px 2px;margin:0;border-bottom:1px solid var(--line)}
.invite img{width:60px;height:auto;filter:drop-shadow(0 2px 5px rgba(52,28,140,.28))}
.invite b{color:var(--ink);font-size:18px;line-height:1.3;word-break:keep-all}
.invite small{color:var(--sub);font-size:14px;display:block;margin-top:1px;word-break:keep-all}
.invite .chev{width:20px;height:20px;color:var(--mute)}
html.bigtext .mh4{grid-template-columns:repeat(3,1fr);gap:14px 2px}
/* 바코드 확인(11-05): 고르는 동작 한 번으로 끝. 이름·회사·용량을 크게 */
.cf{padding:6px 0 24px}.cf h2{margin:4px 2px 6px;font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.cf>p{margin:0 2px 16px;font-size:15px;color:var(--sub);word-break:keep-all}.cf>p b{color:var(--ink)}
.cfl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.cfl li{border-bottom:1px solid var(--line)}
.cfl button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:12px;min-height:76px;padding:10px 2px;-webkit-tap-highlight-color:transparent}
.cfn{flex:1;min-width:0;text-align:left}.cfn strong{display:block;font-size:17px;font-weight:800;line-height:1.3;color:var(--ink);word-break:keep-all}
.cfn span{display:block;font-size:14px;color:var(--sub);margin-top:2px;word-break:keep-all}
.cfl i{flex:none;font-style:normal;color:var(--mute);font-size:20px}
.cfl button:active{background:var(--fill)}.cfl button:focus-visible{outline:3px solid #6C4CF5;outline-offset:-3px}
.cfno{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;min-height:52px;margin-top:16px;border-radius:14px;background:var(--fill);color:var(--ink);text-align:center;line-height:52px;font-size:16px;font-weight:800}
/* 못 찾았을 때 흐름(11-05) */
.mszone{position:relative;min-height:calc(100dvh - 190px);padding:0 24px 190px;text-align:center}
.mszone h2{font-family:Jua,Pretendard,sans-serif;font-weight:400;font-size:30px;line-height:1.28;word-break:keep-all;color:var(--ink)}
.mszone p{font-size:17.5px;line-height:1.5;color:var(--sub);margin-top:10px;word-break:keep-all}
.mshero{display:block;width:200px;height:200px;object-fit:contain;margin:18px auto 24px}
.mstop{margin-top:6px}
.mscard{background:var(--card);border-radius:26px;padding:24px 18px;margin-top:22px;box-shadow:0 8px 24px rgba(52,28,140,.08)}
.mscard .ph{margin:0 auto;width:116px;height:116px}.mscard .ph img{width:100%;height:100%;object-fit:contain}.mscard b{display:block;font-size:23px;font-weight:800;line-height:1.3;margin-top:12px;word-break:keep-all;color:var(--ink)}.mscard small{display:block;font-size:17px;color:var(--sub);margin-top:5px}
.msbtm{position:absolute;left:24px;right:24px;bottom:110px}
.msbig{display:block;width:100%;height:64px;border:0;border-radius:20px;background:var(--teal);color:#fff;font:800 20px Pretendard,sans-serif;box-shadow:0 8px 20px rgba(108,76,245,.25)}
.mssec{display:block;width:100%;height:58px;border:0;border-radius:18px;background:var(--teal-bg);color:var(--teal-d);font:800 18px Pretendard,sans-serif;margin-top:10px}
.mslnk{display:block;width:100%;border:0;background:none;color:var(--sub);font:700 17px Pretendard,sans-serif;margin-top:12px;padding:6px}
.msspin{display:block;margin:20px auto 0}