/* 브랜드 색은 아직 미정(2026-11-03 오너: 흑백으로 출시, 색은 나중에). 화면의 색은 상품 사진이 담당한다.
   색을 정하면 --accent 한 줄만 바꾸면 로고·제일 싼 곳·아끼는 금액에 입혀진다.
   토스 파랑·쿠팡 빨강·네이버 초록은 쓰지 않는다 — 특정 쇼핑몰을 밀어주는 것처럼 보이면 안 된다. */
:root{
  --page:#F2F4F6; --bg:#FFFFFF; --ink:#191F28; --ink2:#333D4B; --mute:#6B7684; --line:#E5E8EB; --soft:#F2F4F6;
  --ph:#E8EBEE; --bar:#B0B8C1;
  --accent:#191F28; --accent-ink:#FFFFFF;
  --brand:var(--accent); --save:var(--accent);
}

/* 세 칸 대결 (2026-11-03 오너 선택 B안): 쇼핑몰은 각자 색의 은은한 그라데이션.
   이긴 칸만 진하게(흰 글씨), 진 칸은 자기 색이 아주 연하게. 작은 글씨에 파랑·초록을 직접 쓰지 않는다(가독성). */
.m-toss{--win:linear-gradient(160deg,#4A92F8,#1B64DA);--tint:linear-gradient(180deg,#E8F1FE,#FFFFFF);--bd:#D3E3FD}
.m-coupang{--win:linear-gradient(160deg,#EE4B42,#C21F17);--tint:linear-gradient(180deg,#FDECEB,#FFFFFF);--bd:#F9D6D3}
.m-naver{--win:linear-gradient(160deg,#0FA956,#00752F);--tint:linear-gradient(180deg,#E6F8EE,#FFFFFF);--bd:#C9EFD9}
.tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.tile{border-radius:9px;padding:6px 4px;text-align:center;background:var(--tint);border:1px solid var(--bd);color:var(--ink2);min-width:0}
.tile .tm{display:block;font-size:10px;font-weight:700}
.tile .tp{display:block;font-size:12px;font-weight:500;white-space:nowrap}
.tile .td{display:none}
.tile.win{background:var(--win);border-color:transparent;color:#FFFFFF}
.tile.win .tp{font-weight:900}
.tile.none{color:var(--mute)}
.tiles.md{gap:6px}
.tiles.md .tile{padding:7px 6px;text-align:left;border-radius:10px}
.tiles.md .tm{font-size:11px}
.tiles.md .tp{font-size:14px}
.tiles.lg{gap:8px;margin-top:18px}
.tiles.lg .tile{border-radius:16px;padding:14px 10px;min-height:108px;display:flex;flex-direction:column;justify-content:space-between;text-align:left}
.tiles.lg .tm{font-size:13px;display:flex;justify-content:space-between}
.tiles.lg .tp{font-size:19px;letter-spacing:-.3px}
.tiles.lg .td{display:block;font-size:11px;opacity:.85}
[hidden]{display:none !important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.sr{position:absolute;left:-9999px}
.wrap{max-width:640px;margin:0 auto;padding:0 12px 32px}
/* 연회색 바탕 위 흰 카드로 덩어리를 나눈다 (오너 레퍼런스: 토스 홈). 선 대신 카드 간격으로 구분. */
.panel{background:var(--bg);border-radius:22px;padding:20px 18px;margin-top:12px}
.top{padding:0 6px}

.sample-banner{position:sticky;top:0;z-index:5;background:#FFF4E5;color:#8A4B00;font-size:12px;font-weight:700;text-align:center;padding:7px 12px}

.top{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{display:inline-flex;align-items:baseline;line-height:1;font-family:'Outfit',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--brand)}
.logo .mark{flex:none;display:block;width:.707em;height:.755em;margin:0 .01em 0 0;position:relative;top:.02em}
.back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-left:-10px}
.top-sp{width:34px}

.mute{color:var(--mute);font-weight:400}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.intro{margin-top:4px;padding:24px 18px 20px;word-break:keep-all}
.intro h1{margin:0;font-size:27px;font-weight:900;letter-spacing:-.7px;line-height:1.3}
.bigsearch{display:flex;align-items:center;gap:10px;height:54px;border-radius:14px;background:var(--soft);padding:0 16px;margin-top:18px;color:var(--ink2)}
.bigsearch input{flex:1;min-width:0;border:0;background:transparent;font-family:inherit;font-size:16px;color:var(--ink);outline:none}

.cats{padding:18px 18px 10px}
.cats-head{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:700}
.cats-head .mute{font-size:12px}
.cats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;margin-top:6px}
.cat{display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:0 4px;border:0;background:none;font-size:14px;color:var(--ink2);cursor:pointer;text-align:left}
.cat .n{color:var(--mute);font-size:13px}

.recent{padding:18px 18px 10px}
.recent h2{margin:0 0 4px;font-size:16px;font-weight:700}
.ritem{display:flex;align-items:center;gap:10px;padding:8px 0}
.rimg{flex:none;width:44px;height:44px;border-radius:10px;overflow:hidden;background:var(--soft)}
.rimg img{width:100%;height:100%;object-fit:cover;display:block}
.rn{flex:1;min-width:0;font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp{display:flex;flex-direction:column;align-items:flex-end;font-size:14px}
.rp small{font-size:11px;font-weight:700;color:var(--mute)}
.rp small.down{color:var(--save)}
.rp small.up{color:var(--ink2)}

.strip{padding:20px 18px 18px}
.strip-head{display:flex;justify-content:space-between;align-items:baseline}
.strip-head h2{margin:0;font-size:18px;font-weight:700}
.strip-head .mute{font-size:13px}
.strip-list{display:flex;gap:10px;overflow-x:auto;padding:12px 18px 0;margin:0 -18px;scrollbar-width:none}
.strip-list::-webkit-scrollbar{display:none}
.sitem{flex:none;width:112px;display:flex;flex-direction:column;gap:5px}
.simg{width:112px;height:112px;border-radius:14px;object-fit:cover;background:var(--ph);display:block}
.flip{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mute)}
.flip b{background:var(--win,var(--accent));color:var(--accent-ink);font-weight:700;padding:1px 6px;border-radius:5px}
.sprice{font-size:15px;font-weight:900}
.adtag{display:inline-block;vertical-align:2px;margin-right:6px;padding:1px 6px;border:1px solid #D1D6DB;border-radius:5px;font-size:11px;font-weight:700;color:var(--mute)}
.adname{font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adfree{font-size:11px;color:var(--mute)}

.sec{font-size:18px;font-weight:700;margin:0 0 14px}

.rmeta{font-size:13px;color:var(--mute);margin:0 0 2px}
.rlist li:last-child{border-bottom:0}
.rlist{list-style:none;margin:0;padding:0}
.rlist li{border-bottom:1px solid var(--soft)}
.rlist a{display:flex;gap:12px;padding:14px 0}
.rthumb{flex:none;width:72px;height:72px;border-radius:12px;overflow:hidden;background:var(--ph);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--mute)}
.rthumb img{width:100%;height:100%;object-fit:cover;display:block}
.rbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rname{font-size:14px;line-height:1.35;color:var(--ink2)}
.rv{font-size:13px;font-weight:700;color:var(--save)}
.rv.quiet{color:var(--mute);font-weight:500}
.rtoss{font-size:13px;color:var(--ink2)}
.rbody .tiles{margin-top:2px}
.reqbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:12px 16px;border-radius:14px;background:var(--soft);font-size:13px;color:var(--ink2)}
.btn-dark{height:40px;padding:0 14px;border-radius:10px;border:0;background:var(--ink);color:#FFFFFF;font-size:13px;font-weight:700;cursor:pointer}
.btn-dark:disabled,.btn.primary:disabled{opacity:.55;cursor:default}
.miss{text-align:center;padding:32px 18px 18px}
.miss h2{margin:0;font-size:19px;font-weight:700}
.miss p{margin:8px 0 0;font-size:14px;color:var(--mute);line-height:1.5}
.btn.wide{width:100%;margin-top:18px}
.miss .reqcount{font-size:12px}
.reqmore{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.reqmore input{min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font-size:16px}
.reqmsg{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--soft);font-size:13px;line-height:1.5;color:var(--ink2);text-align:left}
.reqmsg b{color:var(--ink)}
@media (max-width:360px){.reqmore{grid-template-columns:1fr}}
.miss-cats{margin-top:32px;padding-top:20px;border-top:1px solid var(--soft);text-align:left;font-size:14px;font-weight:700}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pill{height:34px;padding:0 12px;border-radius:17px;border:0;background:var(--soft);font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:4px;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
@media (min-width:560px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;gap:5px;min-width:0}
.photo{position:relative;aspect-ratio:1/1;border-radius:14px;background:var(--ph);overflow:hidden}
.pimg{width:100%;height:100%;object-fit:cover;display:block}
.ph{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:12px;color:var(--mute)}
.name{font-size:13px;line-height:1.35;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{font-size:18px;font-weight:900;letter-spacing:-.3px}
.save{font-size:12px;font-weight:700;color:var(--save)}
.save.quiet{color:var(--mute);font-weight:500}

.hero{padding:0;overflow:hidden;aspect-ratio:1/1;max-height:380px;display:flex;align-items:center;justify-content:center}
.himg{width:100%;height:100%;object-fit:contain;display:block}
.dname{font-size:16px;font-weight:500;line-height:1.4;color:var(--ink2);margin:0 0 4px}
.verdict{font-size:26px;font-weight:900;letter-spacing:-.6px;line-height:1.3}
.verdict em{font-style:normal;color:var(--accent)}
.vsub{font-size:14px;font-weight:700;color:var(--save);margin-top:4px}
.hist{font-size:13px;color:var(--mute);margin:0}
.chart{margin:10px 0 0;color:var(--ink2)}
.chart svg{width:100%;height:auto;display:block;background:var(--soft);border-radius:12px}
.chart figcaption{display:flex;justify-content:space-between;font-size:11px;color:var(--mute);margin-top:4px}
.gapnote{display:block;font-size:11px;color:var(--mute);margin-top:2px}
.actions{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.two > :only-child{grid-column:1 / -1}
.btn{height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:500;border:1px solid #D1D6DB;background:var(--bg);color:var(--ink2);cursor:pointer;text-align:center;padding:0 8px}
.btn.primary{height:54px;border:0;background:var(--ink);color:#FFFFFF;font-size:16px;font-weight:700}
.btn.alert{border:0;background:var(--soft);color:var(--mute);font-weight:700;cursor:not-allowed}
.seen{font-size:11px;color:var(--mute);margin:10px 0 0}

.foot{margin-top:24px;padding:0 6px;font-size:11px;color:var(--mute)}
.foot a{text-decoration:underline}
.doc h1{margin:0 0 4px;font-size:22px}
.doc h2{margin:22px 0 6px;font-size:16px}
.doc p,.doc li{font-size:14px;color:var(--ink2);line-height:1.6}
.doc ul{padding-left:18px;margin:6px 0}
.doc a{text-decoration:underline}
.foot p{margin:0 0 6px}
/* PC 폭에선 광고 카드가 칸에 딱 맞아 옆에 더 있는지 안 보인다 → 넘기지 않고 줄 바꿈해서 다 보여준다 */
@media (min-width:560px){
.adp .strip-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:16px 10px;overflow:visible;margin:0;padding:12px 0 0}
.adp .sitem{width:auto;min-width:0}
.adp .simg{width:100%;height:auto;aspect-ratio:1}
}
/* 상세 = 퍼널 (2026-11-04 오너 승인 시안 U2·U4): 판정 먼저 → 아끼는 금액 → 진짜 마감 → 이것도 … → 늘 떠 있는 구매 버튼 */
.dtop{padding-top:16px}
.dhead{display:flex;gap:14px;align-items:center}
.dimg{width:96px;height:96px;border-radius:14px;object-fit:cover;background:var(--ph);flex:none;display:block}
.dhead .dname{margin:0;font-size:14px;color:var(--ink2)}
.dtop .verdict{margin:20px 0 0;font-size:32px;line-height:1.22;letter-spacing:-1px}
.unit{margin:12px 0 0;font-size:14px;font-weight:700;color:var(--ink2)}
.savep{text-align:center;padding:22px 18px}
.check{width:56px;height:56px;border-radius:28px;margin:0 auto;background:var(--win,var(--ink));color:#FFFFFF;display:flex;align-items:center;justify-content:center}
.save-sub{margin-top:12px;font-size:14px;color:var(--ink2)}
.save-big{margin-top:2px;font-size:34px;font-weight:900;letter-spacing:-1px}
.units{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;text-align:left}
.units div{border-radius:14px;padding:12px;background:var(--soft)}
.units span{display:block;font-size:12px;color:var(--mute)}
.units b{display:block;font-size:18px;font-weight:900}
.units b.mute{font-weight:500;color:var(--mute)}
.deadline{display:flex;align-items:center;gap:12px;padding:16px 18px}
.deadline[hidden]{display:none}
.dtag{flex:none;padding:4px 8px;border-radius:7px;background:var(--ink);color:#FFFFFF;font-size:12px;font-weight:700}
.dlabel{flex:1;font-size:14px;color:var(--ink2)}
.dleft{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums}
.rel .sitem{width:128px}
.rel .simg{width:128px;height:128px}
.sgap{font-size:15px;font-weight:900}
.sname{font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:0 12px calc(12px + env(safe-area-inset-bottom));pointer-events:none}
.buybar > *{max-width:616px;margin-left:auto;margin-right:auto}
.buybar .btn.primary{height:54px;border-radius:14px;font-size:16px;font-weight:800}
.has-buybar .wrap{padding-bottom:150px}
.buy-others{margin:6px auto 0;text-align:center;font-size:13px;color:var(--mute)}
.buy-others a{color:var(--ink2)}
.pgap{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:8px;background:var(--ink);color:#FFFFFF;font-size:13px;font-weight:900}

/* 장바구니 나눠 사기 (2026-11-04 파일럿). 쇼핑몰 색은 칸·막대에만, 글자는 먹색 */
.bks-sub{margin:4px 0 0;font-size:13px;color:var(--mute)}
.bk{flex:none;width:236px;border-radius:18px;background:var(--soft);padding:14px;display:flex;flex-direction:column;gap:2px;color:var(--ink);text-decoration:none}
.bk-th{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px}
.bk-img{width:100%;aspect-ratio:1;border-radius:9px;object-fit:cover;background:var(--bg);display:block}
.bk-t{font-size:14px;color:var(--ink2)}
.bk-s{font-size:20px;font-weight:900;letter-spacing:-.4px}
.bk-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-top:8px}
.bk-bar i{display:block;background:var(--win)}
.bk-l{margin-top:4px;font-size:11px;color:var(--mute)}
.bhero .bh-k{margin:0;font-size:14px;color:var(--mute)}
.bhero .verdict{margin:4px 0 0;font-size:32px;line-height:1.22;letter-spacing:-1px}
.bh-bar{display:flex;height:40px;border-radius:12px;overflow:hidden;margin-top:16px;font-size:13px;font-weight:700;color:#FFFFFF}
.bh-bar span{display:flex;align-items:center;padding-left:12px;background:var(--win);white-space:nowrap;min-width:0;overflow:hidden}
.bh-cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.bh-cmp div{border-radius:14px;padding:10px 12px;background:var(--soft);display:flex;flex-direction:column;min-width:0}
.bh-cmp span{font-size:12px;color:var(--mute)}
.bh-cmp b{font-size:16px;font-weight:500;color:var(--ink2);font-variant-numeric:tabular-nums}
.bh-cmp .dark{background:var(--ink)}
.bh-cmp .dark span{color:#FFFFFF;opacity:.75}
.bh-cmp .dark b{color:#FFFFFF;font-weight:900}
.bg-h{display:flex;align-items:center;gap:10px}
.bg-h>span:last-child{display:flex;flex-direction:column}
.bg-h b{font-size:16px}
.bg-h small{font-size:12px;color:var(--mute)}
.bg-m{width:36px;height:36px;border-radius:10px;background:var(--win);color:#FFFFFF;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;flex:none}
.bl{list-style:none;margin:8px 0 0;padding:0}
.bi{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.bi-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit;text-decoration:none}
.bi-img{width:52px;height:52px;border-radius:12px;object-fit:cover;background:var(--ph);flex:none;display:block}
.bi-txt{display:flex;flex-direction:column;min-width:0}
.bi-n{font-size:13px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bi-o{font-size:12px;color:var(--mute);margin-top:2px}
.bi-end{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.bi-end b{font-size:15px;font-variant-numeric:tabular-nums}
.bi-end small{font-size:11px;color:var(--mute)}
.bi-go{flex:none;height:34px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none;display:flex;align-items:center;background:var(--tint);border:1px solid var(--bd);color:var(--ink)}
.bnote b{font-size:14px}
.bnote p{margin:4px 0 0;font-size:13px;color:var(--ink2);line-height:1.6}

/* 장바구니 (손님이 담는다, 2026-11-04) */
.cartb{position:relative;width:44px;height:44px;margin-right:-10px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.cartn{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:#FFFFFF;font-size:11px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.cartn[hidden]{display:none}
.buyrow{display:flex;gap:8px}
.buyrow .btn.primary{flex:1;min-width:0}
.addcart{flex:none;width:76px;height:56px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.addcart svg{width:20px;height:20px}
.addcart[aria-pressed="true"]{background:var(--soft);border-color:var(--ink)}
.bi-x{flex:none;width:32px;height:34px;margin-right:-8px;border:0;background:none;color:var(--mute);font:inherit;font-size:20px;cursor:pointer}
.cart-empty .verdict{margin:0;font-size:24px}
.cart-empty p{margin:10px 0 0;font-size:14px;color:var(--ink2);line-height:1.6}
.cart-empty .btn.wide{margin-top:12px}
.cart-empty .btn.primary.wide{margin-top:18px}
.cart-clear{margin-top:12px;padding:0;border:0;background:none;color:var(--mute);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}

/* 카드 위 담기 버튼 (홈 피드·검색 결과) */
.cardw{position:relative;min-width:0}
.cadd{position:absolute;top:6px;right:6px;width:40px;height:40px;padding:0;border:0;border-radius:20px;background:rgba(255,255,255,.94);color:#191F28;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cadd svg{width:20px;height:20px}
.cadd .i-on{display:none}
.cadd[aria-pressed="true"]{background:#191F28;color:#FFFFFF}
.cadd[aria-pressed="true"] .i-add{display:none}
.cadd[aria-pressed="true"] .i-on{display:block}
.cadd:active{transform:scale(.92)}
.rlist li{position:relative}
.rlist li .cadd{top:12px;right:0;box-shadow:none;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.rlist li .cadd[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.rlist li .rname{padding-right:48px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:50;display:flex;align-items:center;gap:14px;max-width:calc(100% - 32px);padding:12px 16px;border-radius:14px;background:#191F28;color:#FFFFFF;font-size:14px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:#FFFFFF;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* 상세 구매 버튼: 사러 가는 쇼핑몰 색 */
.buybar .btn.primary.buy.m-coupang,.buybar .btn.primary.buy.m-toss,.buybar .btn.primary.buy.m-naver{background:var(--win)}
/* 경제적 이해관계 표시: 쿠팡 파트너스 가이드상 첫 부분에 */
.disc{margin:0 0 10px;font-size:11.5px;line-height:1.5;color:var(--mute)}
.mq{overflow:hidden;white-space:nowrap;padding:2px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-t{display:inline-flex;animation:mq-left 40s linear infinite}
.mq-r .mq-t{animation-name:mq-right}
.mq-i{flex:none;padding-right:36px;display:inline-flex;align-items:center;gap:6px}
.mq-i b{flex:none;font-size:10px;font-weight:800;line-height:1;padding:3px 6px;border-radius:6px;color:#FFFFFF;background:var(--win)}
.disc:hover .mq-t,.disc:active .mq-t{animation-play-state:paused}
@keyframes mq-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mq-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.mq-t{animation:none;display:block}.mq{white-space:normal;-webkit-mask-image:none;mask-image:none}.mq-i{display:block;padding-right:0}.mq-i b{display:inline-block;margin-right:6px}.mq-i ~ .mq-i{display:none}}
/* 상세 아래 고정 카드(C안): 아끼는 금액 + 담기 + 쇼핑몰 색 구매 버튼 */
.bcard{pointer-events:auto;background:#191F28;border-radius:22px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.bc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 6px 10px;font-size:13px;color:rgba(255,255,255,.72)}
.bc-top b{color:#FFFFFF}
.bc-top > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-o{flex:none;font-size:12px}
.bc-o a{color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:2px}
.bc-cart{width:54px;height:54px;flex:none;border-radius:14px;padding:0;border:0;background:rgba(255,255,255,.12);color:#FFFFFF}
.bc-cart svg{width:22px;height:22px}
.bc-cart .i-on{display:none}
.bc-cart[aria-pressed="true"]{background:#FFFFFF;color:#191F28;border:0}
.bc-cart[aria-pressed="true"] .i-add{display:none}
.bc-cart[aria-pressed="true"] .i-on{display:block}
/* 상세: 아래 고정 카드 위로 토스트를 띄운다 */
.has-buybar .toast{bottom:calc(136px + env(safe-area-inset-bottom))}
/* 페이지 이동을 앱처럼: 흰 화면 깜빡임 대신 짧게 겹쳐 바뀐다(크롬·사파리 18.2+, 나머지는 그냥 이동) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
header.top{view-transition-name:top}
.buybar{view-transition-name:buybar}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* 상품 줄(C안): 홈 피드·검색 결과 공통. 폰 1열, 넓은 화면 2열 */
.feedl{display:grid;grid-template-columns:minmax(0,1fr);column-gap:28px}
.lrow{position:relative;display:flex;align-items:center;gap:10px;min-width:0;border-top:1px solid var(--soft)}
.feedl > .lrow:first-child{border-top:0}
.rlist .lrow{border-top:0}
.lr{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;gap:14px;padding:12px 0}
.rlist .lrow .lr{padding:12px 0}
.lr-img{flex:none;width:88px;height:88px;border-radius:14px;overflow:hidden;background:var(--ph);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--mute)}
.lr-img img{width:100%;height:100%;object-fit:cover;display:block}
.lr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.lr-name{font-size:14px;line-height:1.35;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lr-price{display:flex;align-items:baseline;gap:6px}
.lr-m{font-size:13px;font-weight:700}
.lr-m.m-toss{color:#1B64DA}
.lr-m.m-coupang{color:#C21F17}
.lr-p{font-size:18px;font-weight:900;letter-spacing:-.2px;color:var(--ink)}
.lr-pill{align-self:flex-start;font-size:12px;font-weight:700;color:var(--ink2);background:var(--soft);border-radius:6px;padding:3px 7px}
.lr-pill.quiet{font-weight:500;color:var(--mute);background:none;padding:0}
.lrow .cadd{position:static;flex:none;width:44px;height:44px;border-radius:22px;box-shadow:none;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.lrow .cadd[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.lr-pill{white-space:nowrap}
@media (max-width:374px){.lr{gap:12px}.lr-img{width:76px;height:76px;border-radius:12px}.lrow{gap:8px}}
@media (max-width:340px){.lr-img{width:64px;height:64px}.lr{gap:10px}.lrow .cadd{width:40px;height:40px}.lr-pill{font-size:11px;padding:3px 6px}.lr-p{font-size:17px}}
@media (max-width:340px){.lr-pill{white-space:normal}}
/* 상품 카드(B-2안): 홈 피드·검색 결과 공통. 사진 위 흰 배지에 아끼는 금액 */
.gc-photo{position:relative;display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--ph);margin-bottom:6px}
.gc-photo .pimg{width:100%;height:100%;object-fit:cover;display:block}
.gc-badge{position:absolute;left:8px;top:8px;font-size:13px;font-weight:900;color:#F04452;background:#FFFFFF;border-radius:8px;padding:4px 8px;box-shadow:0 1px 4px rgba(0,0,0,.12);letter-spacing:-.2px}
.gc-name{font-size:13px;line-height:1.35;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-price{display:flex;align-items:baseline;gap:5px}
.gc-price .lr-m{font-size:12px}
.gc-p{font-size:18px;font-weight:900;letter-spacing:-.3px;color:var(--ink)}
.gc-sub{font-size:12px;color:#8B95A1}
.gc-sub s{text-decoration:line-through}
.gc-ov{position:absolute;left:0;right:0;top:0;aspect-ratio:1/1;pointer-events:none}
.gcard .gc-ov .cadd{pointer-events:auto;position:absolute;top:auto;left:auto;right:8px;bottom:8px;width:36px;height:36px;border-radius:18px;border:0;background:rgba(255,255,255,.95);color:#191F28;box-shadow:0 1px 4px rgba(0,0,0,.16)}
.gcard .gc-ov .cadd[aria-pressed="true"]{background:#191F28;color:#FFFFFF}
.gc-ov .cadd svg{width:18px;height:18px}
.rlist.grid{margin-top:4px}
.rlist.grid li{border-bottom:0;position:relative}
.rlist.grid a.gc{padding:0;gap:5px}
/* ===== 2026-11-05 오너 프롬프트: A 홈 · B 상품 랜딩 · C 검색 ===== */
.intro{padding:20px 18px 16px}
.intro h1{font-size:22px;letter-spacing:-.5px}
.intro-sub{margin:6px 0 0;font-size:13px;color:var(--mute)}
.intro .bigsearch{height:48px;margin-top:14px}
.chips{display:flex;gap:6px;margin:12px -18px 0;padding:0 18px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:36px;padding:0 13px;border-radius:18px;border:1px solid var(--line);background:var(--bg);font:inherit;font-size:13px;color:var(--ink2);cursor:pointer;white-space:nowrap}
.chip.on{background:var(--ink);border-color:var(--ink);color:#FFFFFF;font-weight:700}
.sec-sub{margin:-10px 0 14px;font-size:12px;color:var(--mute)}
.cond{margin:16px 0 0;font-size:11.5px;line-height:1.5;color:var(--mute)}
/* A: 비교 카드 2열 */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
@media (min-width:768px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{position:relative;display:flex;flex-direction:column;min-width:0}
.pc-link{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-link .gc-photo{margin-bottom:6px}
.pc-name{font-size:13.5px;line-height:1.35;color:var(--ink);font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-spec{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-prices{display:flex;flex-direction:column;gap:0;margin-top:6px}
.pc-lose{font-size:12.5px;color:var(--ink2)}
.pc-lose .lr-m,.pc-win .lr-m,.sr-lose .lr-m,.sr-win .lr-m,.mr-prices .lr-m{font-size:12px;margin-right:2px}
.pc-win{display:flex;align-items:baseline;gap:4px}
.pc-p{font-size:18px;font-weight:900;letter-spacing:-.3px;color:var(--ink)}
.pc-buy{margin-top:8px;min-height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:14px;font-weight:800;color:#FFFFFF;background:var(--win);text-decoration:none}
.pc-buy.off,.sr-buy.off{background:var(--soft);color:var(--mute);font-weight:500;font-size:12px}
.pcard .gc-ov{position:absolute;left:0;right:0;top:0;aspect-ratio:1/1;pointer-events:none}
.pcard .gc-ov .cadd{pointer-events:auto;position:absolute;top:auto;left:auto;right:8px;bottom:8px;width:36px;height:36px;border-radius:18px;border:0;background:rgba(255,255,255,.95);color:#191F28;box-shadow:0 1px 4px rgba(0,0,0,.16)}
.pcard .gc-ov .cadd svg{width:18px;height:18px}
.pcard .gc-ov .cadd[aria-pressed="true"]{background:#191F28;color:#FFFFFF}
.gc-photo .ph{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:12px;color:var(--mute)}
/* C: 검색 결과 세로 목록 */
.rhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.rhead .rmeta{margin:0}
.sortl select{min-height:36px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font:inherit;font-size:13px;color:var(--ink2);padding:0 8px}
.slist{list-style:none;margin:0;padding:0}
.srow{padding:14px 0;border-top:1px solid var(--soft)}
.srow:first-child{border-top:0}
.sr-link{display:flex;flex-direction:row;gap:12px;align-items:flex-start;min-width:0}
.sr-img{flex:none;width:84px;height:84px;border-radius:12px;overflow:hidden;background:var(--ph);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--mute)}
.sr-img img{width:100%;height:100%;object-fit:cover;display:block}
.sr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-top{display:flex;align-items:flex-start;gap:8px}
.sr-name{flex:1;min-width:0;font-size:14px;line-height:1.35;font-weight:500;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr-gap{flex:none;font-size:12px;font-weight:900;color:#F04452;background:#FFF0F1;border-radius:7px;padding:3px 7px;white-space:nowrap}
.sr-spec{font-size:12px;color:var(--mute)}
.sr-lose{font-size:12.5px;color:var(--ink2);margin-top:2px}
.sr-win{display:flex;align-items:baseline;gap:4px}
.sr-p{font-size:18px;font-weight:900;letter-spacing:-.3px}
.sr-act{display:flex;gap:8px;margin-top:10px;padding-left:96px}
.sr-buy{flex:1;min-height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:14px;font-weight:800;color:#FFFFFF;background:var(--win);text-decoration:none}
.sr-act .cadd{position:static;flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);box-shadow:none}
.sr-act .cadd[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
@media (max-width:374px){.sr-act{padding-left:0}}
/* B: 상품 랜딩 */
.dkick{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--mute)}
.dtop .verdict{margin-top:0}
.dtop .dhead{margin:14px 0 14px}
.dnm{min-width:0}
.dspec{margin:3px 0 0;font-size:13px;color:var(--mute)}
.mlist{list-style:none;margin:0;padding:0}
.mlist li{border-top:1px solid var(--soft)}
.mlist li:first-child{border-top:0}
.mrow{display:flex;align-items:center;gap:12px;padding:12px 0;min-width:0}
.mimg{flex:none;width:60px;height:60px;border-radius:12px;object-fit:cover;background:var(--ph)}
.mimg.ph{display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--mute)}
.mr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mr-name{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-spec{font-size:12px;color:var(--mute)}
.mr-prices{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12.5px;color:var(--ink2)}
.mr-gap{flex:none;font-size:12px;font-weight:900;color:#F04452;background:#FFF0F1;border-radius:7px;padding:3px 7px;white-space:nowrap}
.dsearch{padding:14px 18px}
.dsearch .bigsearch{margin-top:0;height:48px}
.pc-prices{margin-top:auto;padding-top:6px}
/* 개당 비교 카드(2026-11-05): 큰 숫자는 개당 가격, 아래 줄은 실제 사게 될 묶음·가격 */
.pc-per{font-size:12px;font-weight:700;color:var(--ink2);margin-right:3px}
.pc-pack{font-size:12px;color:var(--ink2)}
.pc-lose small{font-size:11.5px;color:var(--ink3,#8B95A1)}

/* ---------- 나눠 사기 (2026-11-05 B안 수정) ---------- */
.split-pick .picks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media (max-width:560px){.split-pick .picks{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.pick{padding:6px 3px 7px;font-size:11.5px;border-radius:12px}.pick img,.pick .ph{width:48px;height:48px;border-radius:10px}.pick[aria-pressed="true"]::after{top:4px;right:4px;width:16px;height:16px;background-size:10px}}
.pick{position:relative;border:1.5px solid var(--line);background:var(--bg);border-radius:14px;padding:8px 6px 9px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;min-width:0}
.pick img,.pick .ph{width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--ph);display:block;max-width:100%}
.pick span{line-height:1.25;text-align:center;word-break:keep-all}
.pick[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pick[aria-pressed="true"]::after{content:"";position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pick:focus-visible,.go:focus-visible,.st-open:focus-visible,.ag-btn:focus-visible{outline:2px solid #1B64DA;outline-offset:2px}
.sbig{font-size:22px;font-weight:900;letter-spacing:-.4px;margin:0 0 12px}
.sbig em{font-style:normal;color:#F04452}
.sbig.small{font-size:17px;margin:0}
.halves{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.half{border-radius:14px;padding:12px;background:var(--tint);border:1px solid var(--bd);min-width:0}
.half .h1{font-size:13px;font-weight:900}
.half ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--ink2)}
.half .ht{display:block;font-size:17px;font-weight:900;margin-top:8px;font-variant-numeric:tabular-nums}
.gos{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:12px}
.go{display:flex;align-items:center;justify-content:center;height:50px;border-radius:14px;background:var(--win);color:#FFFFFF;font-weight:800;font-size:14.5px;text-decoration:none;text-align:center;padding:0 8px}
.panel .go{margin-top:12px}
.again{display:flex;align-items:center;gap:12px}
.ag-imgs{display:flex;flex:none}
.ag-imgs img,.ag-imgs .ph{width:40px;height:40px;border-radius:11px;border:2px solid var(--bg);margin-left:-12px;object-fit:cover;background:var(--ph)}
.ag-imgs img:first-child,.ag-imgs .ph:first-child{margin-left:0}
.ag-mid{flex:1;min-width:0}
.ag-t{margin:0;font-size:15px;font-weight:800}
.ag-s{margin:2px 0 0;font-size:12.5px;color:var(--mute)}
.ag-btn{flex:none;border:0;background:var(--ink);color:#FFFFFF;border-radius:11px;padding:10px 12px;font:inherit;font-weight:800;font-size:13px;cursor:pointer}
.prog{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:12px}
.prog i{display:block;height:100%;background:var(--ink);border-radius:3px;transition:width .3s}
.mute.small{font-size:12px;margin:6px 0 0}
.steps{list-style:none;margin:10px 0 0;padding:0}
.steps li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
.st-img{width:60px;height:60px;border-radius:12px;object-fit:cover;background:var(--ph);flex:none;display:block}
.st-mid{flex:1;min-width:0}
.st-k{margin:0;font-size:11.5px;color:var(--mute)}
.st-n{margin:2px 0 0;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-p{margin:2px 0 0;font-size:12.5px;color:var(--ink2)}
.steps li.done .st-n::before{content:"✓ ";color:#0B7A43}
.st-open{flex:none;border-radius:11px;padding:10px 11px;font-size:13px;font-weight:800;color:#FFFFFF;background:var(--win);text-decoration:none;white-space:nowrap}
.steps li.done .st-open{background:var(--soft);color:var(--ink2)}
.rk{font-size:10.5px;font-weight:800;color:#1B64DA;border:1px solid #D3E3FD;border-radius:5px;padding:0 4px}
.m-toss-t{color:#1B64DA}.m-coupang-t{color:#C21F17}
@media (prefers-reduced-motion:reduce){.prog i{transition:none}}
/* PC QR 창 */
.qr-dim{position:fixed;inset:0;z-index:100;background:rgba(25,31,40,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.qr-box{background:var(--bg);border-radius:22px;padding:22px;display:flex;gap:20px;align-items:center;max-width:460px;width:100%}
.qr-img{width:150px;height:150px;flex:none}
.qr-img svg{width:100%;height:100%;display:block}
.qr-txt h3{margin:0;font-size:17px;font-weight:900}
.qr-txt p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink2)}
.qr-acts{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.qr-close{border:0;background:var(--ink);color:#FFFFFF;border-radius:10px;padding:9px 14px;font:inherit;font-weight:800;cursor:pointer}
.qr-pc{font-size:12.5px;color:var(--mute)}