/* 단가나라: 분홍 + 핑크 + 흰색. 둥근 칩, 아이콘 타일, 아래 메뉴 (2026-10-28) */
:root{
  --bg:#ffffff;--card:#ffffff;--soft:#fff5f8;--soft2:#f7f7f9;--line:#f2e6eb;--line2:#ececf0;
  --ink:#1d1a1f;--sub:#6e6872;--faint:#a49ea8;
  --accent:#ff4f8b;--accent-ink:#e0306f;--accent-bg:#ffeef4;--accent-2:#ff8fb3;--on-accent:#ffffff;
  --down:#ff3d6e;--up:#5b7cfa;--hot:#ff3d6e;--hot-bg:#ffeef3;--gold:#ffb21e;
  --wow:#8a4dff;--wow-bg:#f3edff;--coupon:#e8590c;--coupon-bg:#fff1e6;--mart:#d48a0b;
  --shadow:0 4px 18px rgba(255,79,139,.10);--font:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#16121a;--card:#1e1922;--soft:#2a1e27;--soft2:#221d26;--line:#33262f;--line2:#2c2731;
  --ink:#f3eef4;--sub:#b5adb8;--faint:#857d89;
  --accent:#ff6fa1;--accent-ink:#ff8db5;--accent-bg:#3a1f2c;--accent-2:#ff9dc0;--on-accent:#1b0f15;
  --down:#ff7a9e;--up:#8ea6ff;--hot:#ff7a9e;--hot-bg:#3b1e29;
  --wow:#c4a4ff;--wow-bg:#2c2140;--coupon:#ffa45c;--coupon-bg:#3a2516;--mart:#f0b44c;--shadow:none;
}}
*{box-sizing:border-box}
html{scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);word-break:keep-all;letter-spacing:-.2px}
body.has-nav{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
svg{display:block}

/* ── 맨 위: 로고, 분야 메뉴 ─────────────────────────────── */
.top{position:sticky;top:0;z-index:20;background:var(--bg);box-shadow:0 1px 0 var(--line)}
.topbar{display:flex;align-items:center;gap:10px;height:52px}
.logo{display:flex;align-items:center;gap:5px;font-size:20px;font-weight:800;letter-spacing:-.6px}
.logo svg{width:22px;height:22px;fill:var(--gold)}
.logo b{color:var(--accent)}
.upd{margin-left:auto;font-size:11.5px;color:var(--faint)}
.ico{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%}
.ico svg,.bottomnav svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.toptabs{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;height:40px;align-items:stretch}
.toptabs::-webkit-scrollbar{display:none}
.toptabs a{flex:none;display:flex;align-items:center;font-size:14.5px;font-weight:600;color:var(--sub);border-bottom:2.5px solid transparent}
.toptabs a.on{color:var(--ink);font-weight:800;border-bottom-color:var(--accent)}

/* ── 아래 메뉴 ───────────────── */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;background:var(--bg);border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--sub);max-width:120px}
.bottomnav a.on{color:var(--accent-ink);font-weight:700}
.bottomnav a.on svg{stroke:var(--accent)}

/* ── 공통 블록 ───────────────── */
.page{padding-top:12px}
.page-h{font-size:21px;margin:6px 0 12px;letter-spacing:-.5px}
h2{font-size:17px;margin:0;letter-spacing:-.4px}
.note{font-size:12.5px;color:var(--sub);margin:2px 0 0}
.block{margin:26px 0 0}
.block-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px}
.block-h a,.block-h .hint{font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:3px}
.hint svg{width:13px;height:13px;fill:var(--gold)}

/* 홈 배너 */
.hero-banner{margin:4px 0 0;border-radius:22px;padding:20px 20px 22px;background:linear-gradient(135deg,#ff6b9d 0%,#ff4f8b 45%,#ff8fb3 100%);color:#fff;position:relative;overflow:hidden}
.hero-banner::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.16)}
.hero-banner::before{content:"";position:absolute;right:40px;bottom:-50px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.12)}
.eyebrow{display:inline-flex;align-items:center;gap:4px;margin:0 0 6px;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.22);border-radius:999px;padding:3px 10px 3px 7px}
.eyebrow svg{width:14px;height:14px;fill:#ffe066}
.hero-banner h1{margin:0 0 6px;font-size:22px;line-height:1.32;letter-spacing:-.6px;position:relative;z-index:1}
.hero-banner h1 em{font-style:normal;color:#fff3a8}
.hero-banner p{margin:0;font-size:12.5px;opacity:.92;position:relative;z-index:1}

/* 아이콘 타일 */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;margin:20px 0 0}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;text-align:center;color:var(--ink);line-height:1.3}
.tile small{font-size:11px;color:var(--faint)}
.ti{width:62px;height:62px;border-radius:20px;background:var(--accent-bg);display:flex;align-items:center;justify-content:center}
.ti svg{width:40px;height:40px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.ti svg .dot{fill:var(--accent-2);stroke:none;opacity:.85}
.ti svg circle:not(.dot){fill:var(--ink)}
.ti svg circle[r="10"]{fill:none}
.cat{margin:18px 0 6px}
.cat h2{margin-bottom:12px}

/* 단가킹 가로 카드 */
.kings{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 6px}
.kings::-webkit-scrollbar{display:none}
.king{flex:none;width:136px;display:flex;flex-direction:column;gap:2px}
.king .thumb{width:136px;height:136px;margin-bottom:6px}
.k-cat{font-size:11.5px;color:var(--accent-ink);font-weight:700}
.k-name{font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.k-price{display:flex;align-items:baseline;gap:2px;font-size:13px;font-weight:700;flex-wrap:wrap}
.k-price b{font-size:18px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.k-price small,.r-unit small{font-size:11.5px;color:var(--sub);font-weight:500}
.crownb{position:absolute;z-index:2;top:8px;left:8px;display:flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:#fff;background:var(--accent);border-radius:999px;padding:2px 8px 2px 6px;box-shadow:0 2px 6px rgba(255,79,139,.35)}
.thumb .crownb svg{width:12px;height:12px;fill:#ffe066;stroke:none;opacity:1}

/* 순위 칩 + 줄 */
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 6px;padding:0 16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font:inherit;font-size:13px;font-weight:600;color:var(--sub);background:var(--soft2);border:0;border-radius:999px;padding:7px 13px;cursor:pointer}
.chip.on{color:var(--on-accent);background:var(--accent)}
.rows{list-style:none;margin:0;padding:0}
.rows li+li{border-top:1px solid var(--line2)}
.rows a{display:flex;gap:14px;padding:14px 0;position:relative}
.rows .thumb{width:92px;height:92px}
.flag{position:absolute;z-index:2;top:14px;left:0;font-size:11px;font-weight:800;color:#fff;background:var(--accent);border-radius:10px 0 10px 0;padding:2px 7px}
.r-body{min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:2px}
.r-name{margin:0;font-size:14px;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.r-unit{margin:2px 0 0;display:flex;align-items:baseline;gap:3px;font-weight:700}
.r-unit b{font-size:18px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.r-sub{margin:0;font-size:12.5px;color:var(--sub)}
.more-btn{display:block;text-align:center;margin:8px 0 0;padding:12px;border:1px solid var(--line2);border-radius:12px;font-size:14px;font-weight:600}

/* 검색 */
.searchbar{position:relative;margin:4px 0 6px}
.searchbar input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1.5px solid var(--ink);border-radius:999px;padding:11px 18px}
.searchbar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.toplist{list-style:none;margin:0;padding:0}
.toplist a{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line2);font-size:14.5px}
.toplist .no{width:18px;font-weight:800;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.toplist .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toplist b{font-variant-numeric:tabular-nums}

/* ── 분야 목록 페이지 ───────────────── */
.hero{padding:8px 0 2px}
.hero h1{font-size:22px;line-height:1.3;margin:0 0 6px;letter-spacing:-.6px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{margin:0;color:var(--sub);font-size:13px}
.best{margin:18px 0 4px}
.best h2{margin-bottom:10px}
.strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip a{flex:none;width:134px;background:var(--soft);border:1.5px solid transparent;border-radius:16px;padding:11px 13px;display:flex;flex-direction:column;gap:2px}
.strip a.on{border-color:var(--accent);background:var(--card);box-shadow:var(--shadow)}
.strip .bl{font-size:12px;color:var(--sub);font-weight:600}
.strip b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.strip b small{font-size:12px;font-weight:700;margin-left:1px}
.strip .bn{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip .bn svg{flex:none;width:12px;height:12px;fill:var(--gold)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;margin:14px 0 0;overflow:hidden}
.frow{display:flex;align-items:flex-start;border-bottom:1px solid var(--line);padding:10px 14px;gap:10px}
.fl{flex:none;width:44px;font-size:13px;font-weight:700;padding-top:6px}
.fc{display:flex;flex-wrap:wrap;gap:6px}
.fc a{font-size:13.5px;font-weight:600;border:0;background:var(--soft2);color:var(--sub);border-radius:999px;padding:6px 13px}
.fc a.on{background:var(--accent);color:var(--on-accent)}
.search{padding:10px 14px}
.search input{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--soft2);border:0;border-radius:999px;padding:10px 16px}
.search input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.listbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 0 8px;flex-wrap:wrap}
.listbar .count{font-size:13.5px;color:var(--sub)}
.listbar .count b{color:var(--accent-ink)}
.sort{display:flex;gap:6px}
.sort button{font:inherit;font-size:12.5px;color:var(--sub);background:var(--bg);border:1px solid var(--line2);border-radius:999px;padding:4px 11px;cursor:pointer}
.sort button.on{color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.no-js .sort{display:none}
.group{margin:0 0 24px}
.group>header{margin:6px 0 10px}

/* 상품 카드 */
.cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.card[hidden]{display:none}
.main{display:flex;gap:14px;padding:14px}
.thumb{position:relative;flex:none;width:96px;height:104px;border-radius:16px;background:var(--soft);overflow:hidden}
.ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--accent);gap:1px}
.thumb svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round;opacity:.85}
.thumb b{font-size:15px;line-height:1.2;color:var(--ink)}
.thumb small{font-size:11px;color:var(--sub)}
.thumb img{display:none}
.thumb.photo{background:#fff;border:1px solid var(--line2)}
.thumb.photo img{display:block;width:100%;height:100%;object-fit:contain}
.thumb.photo .ph{display:none}
.rank{position:absolute;z-index:1;top:0;left:0;font-size:11px;font-weight:800;background:var(--ink);color:var(--bg);border-radius:16px 0 12px 0;padding:2px 8px}
.card:first-child .rank{background:var(--accent);color:#fff}
.info{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.info h3{display:flex;align-items:center;gap:4px;font-size:16px;line-height:1.35;margin:0;font-weight:700}
.crown svg{width:17px;height:17px;fill:var(--gold)}
.spec{margin:0;font-size:12.5px;color:var(--sub)}
.spec i{font-style:normal;color:var(--line);margin:0 5px}
.rate{margin:1px 0 0;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--sub)}
.stars{position:relative;display:inline-block;font-size:12.5px;line-height:1;letter-spacing:1px;color:var(--line2)}
.stars::before{content:'★★★★★'}
.stars::after{content:'★★★★★';position:absolute;left:0;top:0;width:var(--r);overflow:hidden;white-space:nowrap;color:var(--gold)}
.unit{margin:4px 0 0;display:flex;align-items:baseline;gap:3px;font-size:14px;font-weight:700}
.unit b{font-size:25px;line-height:1.1;font-weight:800;letter-spacing:-.7px;font-variant-numeric:tabular-nums}
.unit span{font-size:12.5px;color:var(--sub);font-weight:500}
.chg{font-size:13px;font-weight:800;margin-right:4px;font-variant-numeric:tabular-nums}
.chg.down{color:var(--down)}
.chg.up{color:var(--up)}
.price{margin:0;font-size:13px;color:var(--sub);display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.tag{font-size:11.5px;font-weight:700;border-radius:6px;padding:1px 7px}
.tag.wow{color:var(--wow);background:var(--wow-bg)}
.tag.coupon{color:var(--coupon);background:var(--coupon-bg)}
.hot{margin:4px 0 0;align-self:flex-start;font-size:12px;font-weight:800;color:var(--hot);background:var(--hot-bg);border-radius:8px;padding:2px 8px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 14px 12px}
.opt{position:relative;display:flex;flex-direction:column;background:var(--soft2);border:1.5px solid transparent;border-radius:14px;padding:8px 10px 7px;font-size:12px;min-width:0}
.opt.on{border-color:var(--accent);background:var(--accent-bg)}
.opt span{color:var(--sub)}
.opt b{font-size:13.5px;font-variant-numeric:tabular-nums}
.opt small{color:var(--sub);font-size:11.5px;white-space:nowrap}
.opt em{position:absolute;right:0;top:0;font-style:normal;font-size:10.5px;font-weight:800;color:#fff;background:var(--faint);border-radius:0 12px 0 8px;padding:1px 7px}
.opt.on em{background:var(--accent)}
.acts{display:flex;border-top:1px solid var(--line)}
.more,.go{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:12px;font:inherit;font-size:14px;font-weight:700;background:none;border:0;cursor:pointer;color:var(--ink)}
.more{border-right:1px solid var(--line)}
.no-js .more{display:none}
.go{color:var(--accent-ink)}
.go:active,.main:active,.more:active,.rows a:active{background:var(--soft)}
.empty{display:none;text-align:center;color:var(--sub);padding:30px 0}

/* ── 상세 시트·상품 페이지 ───────────────── */
.sheet{padding:0;border:0;margin:auto auto 0;width:100%;max-width:560px;max-height:90vh;max-height:90dvh;border-radius:24px 24px 0 0;background:var(--card);color:var(--ink);box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.sheet[open]{display:flex;animation:up .22s ease-out}
.sheet::backdrop{background:rgba(30,10,20,.45)}
@keyframes up{from{transform:translateY(48px);opacity:.3}to{transform:none;opacity:1}}
.sh-in{display:flex;flex-direction:column;width:100%;min-height:0}
.sh-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 4px;font-size:16px}
.sh-x{font:inherit;font-size:28px;line-height:1;color:var(--ink);background:none;border:0;padding:0 4px;cursor:pointer}
.sh-body{flex:1;min-height:0;overflow-y:auto;padding:4px 18px 16px;overscroll-behavior:contain}
.sh-head{display:flex;gap:14px;align-items:center;margin:0 0 14px}
.sh-head .thumb{width:84px;height:84px}
.sh-head .thumb svg{width:28px;height:28px}
.sh-pic{flex:none;display:block;border-radius:16px}
.sh-cat{margin:0;font-size:12.5px;color:var(--accent-ink);font-weight:700}
.sh-body h3,.detail-page h1{font-size:19px;line-height:1.35;margin:2px 0;letter-spacing:-.4px}
.sh-name{text-decoration:none}
.sh-name span{color:var(--accent);font-weight:800}
.sh-name:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.sh-spec{margin:0;font-size:13px;color:var(--sub)}
.sh-avg{margin:0;font-size:14px;color:var(--faint);text-decoration:line-through}
.sh-now{margin:0;display:flex;align-items:center;gap:6px}
.sh-now b{font-size:30px;font-weight:800;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.sh-now span{font-size:14px;color:var(--sub)}
.sh-now .chg{order:3;margin-left:6px;background:var(--hot-bg);border-radius:8px;padding:2px 8px}
.sh-now .chg.up{background:var(--soft2)}
.sh-price{margin:2px 0 0;font-size:13.5px;color:var(--sub);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sh-body h4,.detail-page h4{font-size:15px;margin:22px 0 6px;padding-top:16px;border-top:1px solid var(--line)}
.sh-body h4 small,.detail-page h4 small{font-size:12px;color:var(--sub);font-weight:500;margin-left:4px}
.chart{display:block;width:100%;height:auto;margin:4px 0 0;overflow:visible}
.chart .ln{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .ln.open{stroke:var(--accent)}
.chart .ln.wow{stroke:var(--wow)}
.chart .pt.open{fill:var(--accent)}
.chart .pt.wow{fill:var(--wow)}
.chart .ref{stroke-width:1;stroke-dasharray:3 3}
.chart .ref.hi{stroke:var(--up)}
.chart .ref.lo{stroke:var(--down)}
.chart text{font-size:10.5px;fill:var(--sub);font-family:var(--font)}
.chart text.hi{fill:var(--up)}
.chart text.lo{fill:var(--down)}
.chart-empty{margin:8px 0;padding:26px 12px;text-align:center;font-size:13px;color:var(--faint);background:var(--soft);border-radius:14px}
.legend{display:flex;gap:14px;justify-content:center;margin:2px 0 0;font-size:12px;color:var(--sub)}
.legend i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.legend i.open{background:var(--accent)}
.legend i.wow{background:var(--wow)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 0}
.stats div{background:var(--soft);border-radius:14px;padding:9px 11px}
.stats dt{font-size:11.5px;color:var(--sub)}
.stats dd{margin:0;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.stats dd small{font-size:11px;color:var(--faint);font-weight:500}
.sh-basis{margin:8px 0 0;font-size:12px;color:var(--faint)}
.mart{margin:12px 0 0;padding:11px 13px;background:var(--soft);border-radius:14px}
.mrow{display:grid;grid-template-columns:56px 1fr 64px;align-items:center;gap:8px;font-size:12.5px;margin-bottom:5px}
.mrow b{text-align:right;font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.mrow.m .bar i{background:var(--mart)}
.mart p{margin:4px 0 0;font-size:12px;color:var(--sub)}
.mart p b{color:var(--accent-ink)}
.sellers{list-style:none;margin:8px 0 0;padding:0;border-top:2px solid var(--ink)}
.sellers li{border-bottom:1px solid var(--line2)}
.sellers a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 2px}
.sellers a:active{background:var(--soft)}
.s-units{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.s-units em{font-style:normal;font-size:12px;font-weight:800;color:var(--accent-ink)}
.s-price{text-align:right;font-size:15px;font-variant-numeric:tabular-nums}
.sellers li:first-child .s-price{color:var(--accent-ink)}
.s-name{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.s-unit{text-align:right;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.sh-foot{padding:10px 18px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.buy{display:block;text-align:center;background:linear-gradient(135deg,#ff5f95,#ff4f8b);color:#fff;font-weight:800;font-size:15.5px;border-radius:16px;padding:14px;box-shadow:0 6px 16px rgba(255,79,139,.28)}
.sh-page{margin:14px 0 0;text-align:center;font-size:13px}
.sh-page a{color:var(--sub);text-decoration:underline}
.crumbs{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--sub);margin:2px 0 10px;flex-wrap:wrap}
.detail-page{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.detail-page .buy{margin-top:18px}
/* 대가 문구: 쿠팡 단추 곁에 작고 흐리게 */
.aff{margin:6px 0 0;font-size:11px;line-height:1.35;color:var(--sub);opacity:.85;letter-spacing:-.2px}
.sh-foot .aff,.detail-page .aff{text-align:center}
.siblings{margin:24px 0 0}
.siblings h2{margin:0 0 10px}
.siblings ol{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.siblings li+li{border-top:1px solid var(--line2)}
.siblings a{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:14px}
.siblings .rk{flex:none;width:24px;height:24px;border-radius:50%;background:var(--soft2);color:var(--sub);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.siblings .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.siblings b{font-variant-numeric:tabular-nums}
.siblings li.on a{background:var(--accent-bg)}
.siblings li.on .rk{background:var(--accent);color:#fff}

/* 가격 알림 */
.alert{margin:18px 0 0;padding:15px;border-radius:18px;background:var(--accent-bg);border:1.5px solid var(--accent-2)}
.sh-body .alert h4,.detail-page .alert h4{margin:0 0 6px;padding:0;border:0}
.al-note{margin:0 0 6px;font-size:12px;color:var(--sub)}
.al-row{display:flex;gap:8px;align-items:center;font-size:14px;margin:6px 0}
.al-row input[type=radio]{flex:none;margin:0;accent-color:var(--accent)}
.al-target,.al-days{font:inherit;font-size:14px;padding:5px 8px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.al-target{width:80px}
.al-go{margin-top:8px;width:100%;font:inherit;font-size:15px;font-weight:800;color:#fff;background:var(--accent);border:0;border-radius:14px;padding:12px;cursor:pointer}
.al-go:disabled{opacity:.6}
.al-msg{margin:8px 0 0;font-size:13px}
.al-msg:empty{display:none}
.no-js .alert{display:none}
.my-alerts{list-style:none;margin:14px 0 0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.my-alerts li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:13px 15px;font-size:14px}
.my-alerts li+li{border-top:1px solid var(--line2)}
.my-alerts li a{font-weight:700}
.my-alerts li span{flex:1;min-width:140px;color:var(--sub);font-size:13px}
.my-alerts li button{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:5px 13px;cursor:pointer}
.my-alerts li.loading{color:var(--sub);justify-content:center}

footer{font-size:12.5px;color:var(--sub);border-top:8px solid var(--soft);margin:32px -16px 0;padding:18px 16px 24px}
footer h2{font-size:13.5px;color:var(--ink);margin:0 0 6px}
footer p{margin:0 0 8px}
@media (min-width:640px){
  .thumb{width:108px;height:114px}.main{padding:16px}.unit b{font-size:27px}
  .tiles{grid-template-columns:repeat(8,1fr)}
  .sheet{margin:auto;border-radius:24px;max-height:86vh}
}