:root { --navy: #0b2c7a; --ink: #14161a; --muted: #5d6470; --line: #e6e8ec; --naver: #03c75a; --naver-dark: #02a84b; --bg: #f5f6f8; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; word-break: keep-all; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
main, header.top, footer { max-width: 520px; margin: 0 auto; }

header.top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--line); }
header.top .brand img { width: 132px; height: auto; }
header.top .cartlink { font-size: 14px; text-decoration: none; color: var(--navy); font-weight: 600; }
header.top .count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--navy); color: #fff; text-align: center; font-size: 12px; line-height: 20px; }

.banner { margin: 0; padding: 12px 16px; background: #fff4e5; color: #8a4b00; font-size: 14px; }
.hero { width: 100%; background: var(--navy); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.offers, .lines { list-style: none; margin: 0; padding: 12px; display: grid; gap: 12px; }
.offer, .line { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.offer .shot { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--navy); }
.info { padding: 14px 16px 16px; }
.info h2 { margin: 0; font-size: 18px; }
.detail { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.price { margin: 8px 0 0; font-size: 20px; }
.price del { color: var(--muted); font-size: 14px; margin-right: 4px; }
.price .off { color: #e5323f; font-weight: 700; font-size: 16px; }

.actions { display: grid; gap: 8px; margin-top: 12px; }
.buy { display: block; text-align: center; background: var(--naver); color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; padding: 14px 12px; border-radius: 10px; }
.buy:active { background: var(--naver-dark); }
.alt { display: block; text-align: center; color: var(--muted); font-size: 14px; padding: 4px 0; }
.add, .remove { appearance: none; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 15px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.remove { color: var(--muted); }
.add:active, .remove:active { background: var(--bg); }

.line { display: grid; grid-template-columns: 96px 1fr; }
.line .thumb { width: 96px; height: 100%; object-fit: cover; background: var(--navy); }
.cart h1, .doc h1 { margin: 20px 16px 4px; font-size: 22px; }
.cart .hint, .cart .empty { margin: 0 16px; color: var(--muted); font-size: 14px; }
.back { margin: 16px; }
.back a { color: var(--navy); font-weight: 600; }

.notes { margin: 4px 12px 0; padding: 14px 16px; background: #fff; border-radius: 14px; border: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.notes p { margin: 4px 0; }

.doc { background: #fff; padding: 4px 4px 16px; }
.doc h1 { margin: 20px 12px 8px; }
.doc h2 { margin: 18px 12px 4px; font-size: 16px; }
.doc p, .doc ul { margin: 4px 12px; font-size: 14px; color: #333; }

footer { padding: 18px 16px 40px; font-size: 12px; color: var(--muted); }
footer p { margin: 4px 0; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 40px); opacity: 0; pointer-events: none; background: rgba(20, 22, 26, .92); color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 14px; transition: all .2s; white-space: nowrap; }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast a { color: #7ef0ad; font-weight: 700; margin-left: 6px; }