* { box-sizing: border-box; }
html, body { margin: 0; }
:root { --accent: #FF5A1F; }
body { background: #f2f2f4; color: #1f2329; font-family: -apple-system, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", sans-serif; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 480px; min-height: 100vh; margin: 0 auto; background: #f7f7f8; box-shadow: 0 0 24px rgba(0,0,0,.04); }
.cover { height: 130px; background: #ececee; display: flex; align-items: flex-start; justify-content: space-between; padding: 14px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #d6d6da; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn.ghost { visibility: hidden; }
.brand { margin-top: 10px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: #b5b5bb; }
.profile { text-align: center; margin-top: -48px; padding: 0 18px; }
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; background: #d6d6da; border: 4px solid #f7f7f8; }
.avatar[hidden] { display: none; }
.profile h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.bio { margin: 6px 0 0; font-size: 14px; color: #6b7280; line-height: 1.5; white-space: pre-line; }
.bio:empty { display: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #e3e3e7; color: #1f2329; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.pill[hidden] { display: none; }
.body { padding: 22px 16px 28px; }
.searchrow { display: flex; gap: 8px; margin-bottom: 12px; }
#q { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid #e3e3e7; background: #fff; color: #1f2329; font-size: 15px; outline: none; }
#q:focus { border-color: var(--accent); }
#all { flex: 0 0 auto; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid #e3e3e7; background: #fff; color: #4b5563; font-size: 14px; font-weight: 600; cursor: pointer; }
#all[hidden] { display: none; }
.list { display: grid; gap: 10px; }
.card { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: transform .1s, box-shadow .1s; }
.card:active { transform: scale(.985); }
.card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.card img, .noimg { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: #f0f0f2; flex: 0 0 64px; }
.info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row1 { display: flex; align-items: center; gap: 6px; }
.no { font-size: 12px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 8px; }
.shop { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; color: #fff; }
.shop.coupang { background: #E52528; } .shop.naver { background: #03C75A; }
.name { font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { font-size: 14px; font-weight: 800; }
.arrow { flex: 0 0 auto; font-size: 22px; color: #c3c8d0; }
.empty { text-align: center; color: #9aa1ab; padding: 48px 16px; font-size: 14px; background: #ececee; border-radius: 16px; }
.notice { margin-top: 26px; font-size: 11px; color: #9aa1ab; line-height: 1.6; text-align: center; }
.notice p { margin: 2px 0; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: rgba(31,35,41,.92); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; }
.toast[hidden] { display: none; }
/* v3 상품 칸 흰색 */
.empty { background: #fff; border: 1px solid #ececef; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.card { background: #fff; border: 1px solid #ececef; }