* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: var(--bg); color: var(--ink); padding: 20px; }
.container { max-width: 800px; margin: 0 auto; }

header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
header h2 { font-size: 18px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.btn-group { display: flex; gap: 8px; }

/* 아이콘 시스템 (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; }
header h2 .icon { width: 20px; height: 20px; }
.btn { padding: 8px 14px; min-height: 44px; line-height: 1; border-radius: 8px; font-weight: 600; font-size: 13px; text-decoration: none; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.btn-home { background: var(--btn-neutral); color: white; }
.btn-mypage { background: var(--brand); color: white; }

/* 💡 크리에이터 프로필 헤더 카드 */
.creator-card { position: relative; background: var(--card); padding: 32px 20px; border-radius: 20px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.03); margin-bottom: 24px; }

/* 더보기(⋮) 메뉴 — 신고하기처럼 자주 안 쓰는 액션을 눈에 덜 띄게 숨긴다 */
.more-menu-wrap { position: absolute; top: 14px; right: 14px; }
.more-menu-trigger { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 8px; display: flex; }
.more-menu-trigger:hover { background: var(--surface-muted); }
.more-menu { position: absolute; top: calc(100% + 4px); right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 180px; overflow: hidden; z-index: 20; }
.more-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; background: none; border: none; font-size: 13px; color: var(--ink); cursor: pointer; text-align: left; }
.more-menu-item:hover { background: var(--surface-muted); color: var(--danger); }

.follow-counts { display: flex; justify-content: center; gap: 18px; font-size: 13.5px; color: var(--muted); margin-bottom: 4px; }
.follow-counts strong { color: var(--ink-strong); font-variant-numeric: tabular-nums; }

.avatar-wrapper { position: relative; width: 88px; height: 88px; margin: 0 auto 12px auto; cursor: pointer; }
.avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); display: none; }
.avatar-placeholder { width: 100%; height: 100%; border-radius: 50%; background: var(--brand); color: white; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: bold; }

.creator-name { font-size: 20px; font-weight: bold; margin-bottom: 6px; }
.creator-bio { font-size: 14px; color: var(--muted); margin-bottom: 12px; max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.5; }

.action-group { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.btn-follow { background: var(--success); color: white; padding: 10px 20px; min-height: 44px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: bold; border: none; cursor: pointer; transition: background 0.2s, transform 0.15s; }
.btn-follow:active { transform: scale(0.95); }
.btn-follow.following { background: var(--muted-2); }
.btn-contact { background: #e0f2fe; color: #0284c7; padding: 10px 20px; min-height: 44px; line-height: 1; border-radius: 10px; font-weight: bold; text-decoration: none; display: none; align-items: center; justify-content: center; gap: 6px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; color: var(--muted); text-align: center; }
.empty-state .icon { width: 36px; height: 36px; opacity: 0.45; }
.empty-state p { margin: 0; font-size: 13.5px; }
.card { background: var(--card); border-radius: 16px; padding: 16px; border: 1px solid rgba(0,0,0,0.02); box-shadow: 0 4px 16px rgba(0,0,0,0.04); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

/* 본인 숍 볼 때만 노출되는 공유/수정/삭제 (mypage.css와 동일 스타일) */
.card-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; }
.btn-share { background: #0ea5e9; color: white; }
.btn-edit { background: var(--surface-muted); color: var(--ink-2); flex: 1; justify-content: center; }
.btn-delete { background: #fee2e2; color: var(--danger); flex: 1; justify-content: center; }
.card[data-expired="1"] { opacity: 0.72; cursor: not-allowed; }
.card[data-expired="1"]:hover { transform: none; box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.period-badge { font-size: 11px; background: var(--surface-muted); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; margin-top: 8px; line-height: 1.4; display: flex; flex-direction: column; gap: 3px; }
.period-badge-expired { color: var(--danger); font-weight: bold; display: inline-flex; align-items: center; gap: 4px; }
.period-badge-sub { color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.card-img { width: 100%; height: 160px; object-fit: contain; background: var(--surface-muted); border-radius: 8px; margin-bottom: 10px; }
.card-title { font-size: 16px; font-weight: bold; margin-bottom: 6px; }
.card-price { font-size: 17px; font-weight: bold; color: var(--brand); }

/* 💡 라이트박스 확대 모달 */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; justify-content: center; align-items: center; }
.lightbox-img { max-width: 90vw; max-height: 80vh; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); object-fit: contain; }