[hidden]{display:none!important}
/* 색상 4가지(바깥·안쪽 배경, 카드, 구매 버튼)는 관리 화면 설정값으로 public.js 가 덮어쓴다. 글자색은 배경 밝기에 맞춰 자동. */
:root{
  --outer:#7c3a99; --inner:#f7ecfb; --card:#ffffff; --button:#222222;
  --ink:#1a1a1f; --muted:#5f5f6b; --card-ink:#1a1a1f; --button-ink:#ffffff;
  --ticker:#333333; --ticker-ink:#ffffff;
  --gap:28px; --card-gap:16px;   /* 영역 간격·카드 간격: 관리 화면 배치 설정 */
  --font:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--outer);color:var(--ink);font-family:var(--font);-webkit-text-size-adjust:100%}
body{line-height:1.5;min-height:100vh;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}

/* PC: 바깥 배경 위 가운데 440px 화면 / 모바일: 화면 너비 그대로 */
.page{width:100%;max-width:440px;min-height:100vh;margin:0 auto;background:var(--inner);position:relative}
@media (min-width:481px){
  .page{margin:32px auto 0;min-height:calc(100vh - 32px);border-radius:28px 28px 0 0;overflow:clip;box-shadow:0 10px 40px rgba(0,0,0,.18)}
}
.wrap{padding:0 16px 40px}

/* 쿠파스 안내: 맨 위 검은 배너, 오른쪽 → 왼쪽 반복 */
.ticker{background:var(--ticker);color:var(--ticker-ink);overflow:hidden;white-space:nowrap;position:sticky;top:0;z-index:20;height:38px;display:flex;align-items:center}
.ticker-track{display:inline-block;font-size:14px;font-weight:700;letter-spacing:-.01em;will-change:transform}
.ticker.static{white-space:normal;height:auto;padding:9px 16px}
.ticker.static .ticker-track{transform:none!important}

/* 소개 배너 (관리 화면에서 숨길 수 있음) */
.intro{margin:var(--gap) 0 0;border-radius:16px;overflow:hidden;background:var(--card);color:var(--card-ink);box-shadow:0 2px 8px rgba(0,0,0,.10)}
.intro img{width:100%;aspect-ratio:16/7;object-fit:cover}
.intro p{margin:0;padding:12px 16px;font-size:15px;font-weight:600;text-align:center;text-wrap:balance}

/* 프로필: 가운데 원형 사진 + 이름 + 소개 */
.profile{display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--gap) * 2) 8px 0}
.page[data-intro="top"] .intro:not([hidden]) + .profile{padding-top:var(--gap)}
/* 프로필 왼쪽 정렬: 사진 왼쪽, 이름·소개 오른쪽 */
.align-left .profile{display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:16px;text-align:left;padding-left:4px}
.align-left .avatar{grid-column:1;grid-row:1 / span 4;align-self:center}
.align-left .profile h1{grid-column:2;grid-row:2;margin:0}
.align-left .profile p{grid-column:2;grid-row:3;margin:4px 0 0}.avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;object-position:center;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.75);color:var(--muted);font-weight:700;font-size:30px;overflow:hidden}
.profile h1{margin:16px 0 0;font-size:20px;line-height:1.3;font-weight:800;letter-spacing:-.02em;word-break:break-word}
.profile p{margin:6px 0 0;color:var(--muted);font-size:14px;white-space:pre-line;word-break:break-word}
.profile p:empty{display:none}

/* 검색창 */
.search{position:sticky;top:38px;z-index:10;background:var(--inner);padding:var(--gap) 0 0;margin:0}
.search label{position:absolute;left:-9999px}
.search-icon{position:absolute;left:14px;bottom:13px;width:20px;height:20px;fill:none;stroke:#8b8b96;stroke-width:2;stroke-linecap:round;pointer-events:none}
.search input{width:100%;height:46px;border-radius:12px;border:0;background:#f8f8fa;padding:0 16px 0 42px;font:inherit;font-size:15px;color:#1a1a1f;outline:none;
  box-shadow:0 1px 4px rgba(0,0,0,.08);-webkit-appearance:none;appearance:none}
.search input::placeholder{color:#9b9ba6}
.search input:focus{box-shadow:0 0 0 2px rgba(0,0,0,.18)}

/* 쿠파스 고지 문구 */
.notice{margin:var(--gap) 4px calc(var(--gap) * .8);color:var(--ink);font-size:14px;line-height:1.6;text-align:center;font-weight:500;word-break:keep-all}
.count{font-size:13px;color:var(--muted);margin:0 4px 10px;text-align:center}
.count:empty{display:none}

/* 상품 카드: 흰 카드 · 둥근 모서리 · 은은한 그림자 / 카드 전체가 구매 링크 */
.list{list-style:none;margin:0;padding:0;display:grid;gap:var(--card-gap)}
.item a{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:76px;
  background:var(--card);color:var(--card-ink);border-radius:14px;padding:8px 10px 8px 8px;text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.13);transition:transform .12s ease,box-shadow .12s ease}
.item a:hover{box-shadow:0 4px 12px rgba(0,0,0,.16)}
.item a:active{transform:scale(.99)}
.item a:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.thumb{width:60px;height:60px;border-radius:10px;object-fit:cover;background:rgba(0,0,0,.05)}
.thumb.empty{display:grid;place-items:center;color:#a3a3ad;font-size:11px}
.name{margin:0;font-size:15px;font-weight:500;line-height:1.4;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
.no{font-variant-numeric:tabular-nums;font-weight:400}
.buy{background:var(--button);color:var(--button-ink);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;white-space:nowrap}
.state{text-align:center;color:var(--muted);padding:28px 0;font-size:14px}
.sentinel{height:1px}
footer.site{text-align:center;color:var(--muted);opacity:.7;font-size:12px;padding:28px 0 0}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none!important}}