/* 이 페이지만 body 배경이 #f6f8fa라 공유 --bg 기본값(#f8fafc)을 덮어쓴다. */
:root { --bg: #f6f8fa; }
@media (prefers-color-scheme: dark) { :root { --bg: #0f172a; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Pretendard","Apple SD Gothic Neo","Malgun Gothic",-apple-system,system-ui,sans-serif;
       background:var(--bg); color:var(--ink-strong); line-height:1.6; padding:20px; }
.container { max-width:520px; margin:0 auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.brand { font-size:15px; font-weight:800; color:var(--brand); text-decoration:none; letter-spacing:-0.02em; }
.topbar a.home { font-size:13px; color:var(--muted); text-decoration:none; }

/* 아이콘 시스템 (Lucide, MIT). <symbol> 스프라이트는 body 시작 부분에 두었다. */
.icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.card { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.card-img { width:100%; aspect-ratio:1/1; object-fit:contain; display:block; background:var(--surface-muted); }
.card-body { padding:20px; }
.title { font-size:18px; font-weight:700; letter-spacing:-0.02em; margin-bottom:8px; }
.desc { font-size:14px; color:var(--ink-soft); margin-bottom:14px; }
.price { font-size:22px; font-weight:800; letter-spacing:-0.02em; margin-bottom:4px; }
.meta { font-size:12px; color:var(--muted-2); margin-bottom:18px; }

.creator { display:flex; align-items:center; gap:10px; padding:12px 0; margin-bottom:16px;
           border-top:1px solid var(--surface-muted); border-bottom:1px solid var(--surface-muted); text-decoration:none; color:inherit; }
.creator-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; background:var(--line); flex-shrink:0; }
.creator-avatar-ph { width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff;
                     display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.creator-name { font-size:14px; font-weight:600; }
.creator-sub { font-size:12px; color:var(--muted-2); }

.btn { display:block; width:100%; text-align:center; background:var(--brand); color:#fff;
       text-decoration:none; padding:15px; border-radius:12px; font-weight:700; font-size:15px;
       border:none; cursor:pointer; font-family:inherit; }
.btn:hover { background:var(--brand-hover); }
.btn-copy { background:var(--card); color:var(--ink-2); border:1px solid var(--line); margin-top:9px; font-weight:600; }
.btn-copy:hover { background:var(--bg); }
.expired { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; padding:11px 14px;
           border-radius:10px; font-size:13px; margin-bottom:14px; text-align:center; font-weight:600; }
@media (prefers-color-scheme: dark) {
  .expired { background:#450a0a; border-color:#7f1d1d; color:#fca5a5; }
}
.affiliate-notice-tight { margin-top:16px; margin-bottom:0; }
.btn-disabled { background:var(--muted-2); cursor:not-allowed; }