/**
 * 프론트 그리드/카드 — design/prototype.html CSS 이관 (aff-* 클래스 그대로).
 * 테마 충돌 방지: 변수는 .aff-scope 하위에만 선언, 모든 규칙은 aff- 프리픽스 (SPEC §12).
 * 1차는 라이트 팔레트만 사용 — 사이트 크롬(테마)이 라이트 고정이라 다크 자동 전환은 보류.
 */
.aff-scope{
	--paper:#FAF9F7; --surface:#FFFFFF; --surface-2:#F4F1EC;
	--ink:#1A1815; --ink-soft:#6B655C; --ink-faint:#9A9388;
	--line:#E7E3DC; --line-strong:#D8D2C8;
	--accent:#C7691F; --accent-hover:#A9550F; --accent-ink:#FFFFFF; --accent-tint:#F6EADF;
	--ok:#2E7D57; --warn:#B0480E;
	--r:14px; --r-sm:9px;
	--shadow:0 1px 2px rgba(26,24,21,.04), 0 8px 24px -14px rgba(26,24,21,.18);
	--shadow-lift:0 2px 6px rgba(26,24,21,.06), 0 22px 40px -20px rgba(26,24,21,.28);
	--aff-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	--aff-mono:"SF Mono",ui-monospace,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
	font-family:var(--aff-sans);
	color:var(--ink);
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
}
.aff-scope *{box-sizing:border-box}

/* ---- 아카이브 컨테이너 ---- */
.aff-container{max-width:1120px;margin:0 auto;padding:40px 24px 64px}
.aff-page-title{font-size:clamp(22px,3vw,30px);letter-spacing:-.025em;margin:0 0 22px;font-weight:700;color:var(--ink)}
.aff-empty{color:var(--ink-soft);padding:40px 0;text-align:center}

/* ---- 필터바 ---- */
.aff-filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;align-items:center;justify-content:center}
.aff-filter{font-family:var(--aff-sans);font-size:13.5px;font-weight:540;cursor:pointer;border:1px solid var(--line-strong);
	background:transparent;color:var(--ink-soft);padding:7px 15px;border-radius:99px;transition:.15s;text-decoration:none}
.aff-filter:hover{color:var(--ink);border-color:var(--ink-faint);text-decoration:none}
.aff-filter[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.aff-filter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- 상품 그리드 ---- */
.aff-grid{display:grid;grid-template-columns:var(--aff-cols,repeat(auto-fill,minmax(232px,1fr)));gap:20px}
@media(max-width:680px){.aff-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}}

/* ---- 카드 ---- */
.aff-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
	overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.aff-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}
.aff-card__media{position:relative;aspect-ratio:1/1;background:
	radial-gradient(120% 120% at 50% 15%,var(--surface-2),color-mix(in srgb,var(--surface-2) 60%,var(--paper)));
	display:grid;place-items:center;border-bottom:1px solid var(--line)}
.aff-card__media svg{width:44%;height:44%;color:var(--ink-faint);opacity:.9}
.aff-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 플레이스홀더 svg는 항상 마크업에 있고 이미지가 그 위를 덮는다.
   로드 실패 시 img가 스스로 제거되면(onerror) 이 규칙이 풀리며 플레이스홀더가 드러난다. */
.aff-card__media img ~ svg{display:none}
.aff-card__badge{position:absolute;top:11px;left:11px;z-index:2;font-size:11px;font-weight:640;letter-spacing:.01em;
	padding:4px 9px;border-radius:99px;background:var(--accent);color:var(--accent-ink)}
.aff-card__badge--soft{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.aff-card__badge--out{background:var(--ink);color:var(--paper)}
/* 카드 바디: 카테고리(가운데) → 제목(100%) → 설명(80%) + 버튼(20%) */
.aff-card__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.aff-card__cat{font-family:var(--aff-mono);font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;
	letter-spacing:.06em;text-align:center}
.aff-card__title{font-size:13.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em;margin:0;color:var(--ink);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 설명 + 버튼 = 8:2 가로 배치 */
.aff-card__foot{display:flex;gap:10px;align-items:flex-end;margin-top:auto}
.aff-card__desc{flex:1;min-width:0;font-size:12px;line-height:1.45;color:var(--ink-soft);margin:0;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aff-card__spacer{flex:1}
/* 바로구매: 작은 정사각형 아이콘 (우측 하단) */
.aff-card__cta{flex-shrink:0;display:grid;place-items:center;width:36px;height:36px;
	border-radius:var(--r-sm);background:var(--accent);color:#fff;text-decoration:none;transition:background .15s}
.aff-card__cta:hover{background:var(--accent-hover);color:#fff;text-decoration:none}
.aff-card__cta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aff-card__cta svg{width:15px;height:15px;color:#fff}

/* ---- 디스클로저 ---- */
.aff-disclosure{font-size:12.5px;color:var(--ink-faint);line-height:1.6}
.aff-disclosure--top{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;
	padding:10px 14px;margin-bottom:18px}

/* ---- 퀵뷰 모달 + 단일 포커스 뷰 (SPEC §6-2, 시안 .qv 이관) ---- */
.aff-card{cursor:pointer}
.aff-scope .qv-scrim{position:fixed;inset:0;background:rgba(20,18,15,.62);backdrop-filter:blur(3px);
	display:none;place-items:center;z-index:99990;padding:20px}
.aff-scope .qv-scrim.open{display:grid}
.aff-scope .qv{width:min(420px,94vw);max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--line);
	border-radius:18px;box-shadow:var(--shadow-lift);position:relative}
.aff-scope .qv__x{position:absolute;top:12px;right:12px;z-index:3;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
	background:var(--surface);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.aff-scope .qv__x:hover{background:var(--surface-2)}
.aff-scope .qv__media{height:172px;display:grid;place-items:center;position:relative;overflow:hidden;
	background:radial-gradient(120% 120% at 50% 24%,var(--surface-2),var(--paper));border-bottom:1px solid var(--line)}
.aff-scope .qv__media>svg{width:78px;height:78px;color:var(--ink-faint)}
.aff-scope .qv__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aff-scope .qv__media img ~ svg{display:none} /* 카드와 동일한 폴백 규칙 */
.aff-scope .qv__badge{position:absolute;top:14px;left:14px;z-index:2;font-size:11px;font-weight:640;padding:4px 10px;border-radius:99px;background:var(--accent);color:var(--accent-ink)}
.aff-scope .qv__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.aff-scope .qv__cat{font-family:var(--aff-mono);font-size:10.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.aff-scope .qv__title{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:0;color:var(--ink);text-wrap:balance}
.aff-scope .qv__desc{margin:0;color:var(--ink-soft);font-size:12.5px;line-height:1.5;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aff-scope .qv__price{font-family:var(--aff-mono);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px;margin-top:1px;color:var(--ink)}
.aff-scope .qv__price small{font-size:11px;color:var(--ink-faint);font-weight:500}
.aff-scope .qv__cta{margin-top:3px;display:inline-flex;justify-content:center;align-items:center;gap:8px;font-size:14.5px;font-weight:640;
	text-decoration:none;padding:12px 18px;border-radius:11px;background:var(--accent);color:var(--accent-ink)}
.aff-scope .qv__cta:hover{background:var(--accent-hover);color:var(--accent-ink);text-decoration:none}
.aff-scope .qv__cta svg{width:15px;height:15px}
.aff-scope .qv__share{margin-top:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:11px;color:var(--ink-soft);line-height:1.5}
.aff-scope .qv__share b{color:var(--ink)}
.aff-scope .qv__url{display:flex;align-items:center;gap:8px;font-family:var(--aff-mono);font-size:11px;color:var(--ink);margin-top:6px;
	background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:6px 9px;word-break:break-all}
.aff-scope .qv__url .slug{color:var(--accent)}
.aff-scope .qv__url button{margin-left:auto;font:inherit;font-size:10.5px;border:1px solid var(--line-strong);background:var(--surface);
	color:var(--ink);border-radius:6px;padding:4px 9px;cursor:pointer;white-space:nowrap}
.aff-scope .qv__url button:hover{border-color:var(--accent);color:var(--accent)}
.aff-scope .qv__back{margin-top:1px;background:none;border:0;color:var(--ink-soft);font-family:var(--aff-sans);font-size:12.5px;cursor:pointer;text-align:center;padding:5px 0;text-decoration:none;display:block}
.aff-scope .qv__back:hover{color:var(--ink);text-decoration:none}

/* 단일 포커스 뷰 = 퀵뷰와 동일 카드가 페이지 중앙에 (SSR) */
/* 상품 상세의 이미지 영역 — 잘리지도, 여백이 생기지도 않게 한다.
   .qv__media의 기본값은 172px 고정 높이라 상세(폭 420px)에서는 2.4:1 가로 띠가 된다.

   틀을 고정 비율로 두는 한 셋 중 둘만 가질 수 있다:
     cover   → 여백은 없지만 상품이 잘린다 (마이크 헤드·붐대 끝이 잘려나갔다)
     contain → 잘리진 않지만 좌우 레터박스가 생긴다
   그래서 틀을 고정하지 않고 **이미지의 실제 비율이 높이를 정하게** 한다. 잘림도 여백도 없다.
   쿠팡·아마존 상품 이미지는 대체로 정사각에 가까워 결과도 정사각처럼 보인다.
   (상세는 이미지가 한 장뿐이라 카드 높이가 상품마다 달라져도 어색하지 않다.)

   퀵뷰 모달은 컴팩트 카드라 172px 고정을 유지한다 (SPEC §6-2) — 그래서 상세에만 스코프한다. */
.aff-scope .aff-single__card .qv__media{height:auto;aspect-ratio:auto}
.aff-scope .aff-single__card .qv__media img{position:static;width:100%;height:auto} /* 절대배치 해제 → 이미지가 높이를 만든다 */
.aff-scope .aff-single__card .qv__media:not(:has(img)){aspect-ratio:1/1}            /* 이미지가 없을 때만 정사각 빈 틀 */
.aff-scope .aff-single__card .qv__media>svg{width:30%;height:auto}                  /* 높이는 viewBox가 정한다 — 컨테이너 높이가 auto라 %는 못 쓴다 */

.aff-single{display:grid;place-items:start center;min-height:60vh}
.aff-single__card{width:min(420px,94vw);background:var(--surface);border:1px solid var(--line);
	border-radius:18px;box-shadow:var(--shadow-lift);overflow:hidden}
.aff-single__card .qv__title{font-size:20px}

@media (prefers-reduced-motion:reduce){.aff-scope *{transition:none!important}}

/* ---- 캔버스 모드: 헤더 ---- */
body.aff-canvas{margin:0;background:var(--paper);font-family:var(--aff-sans);color:var(--ink)}
.aff-header{text-align:center;padding:48px 24px 28px;border-bottom:1px solid var(--line)}
.aff-header__inner{max-width:640px;margin:0 auto}
.aff-header__name{font-size:clamp(24px,4vw,36px);font-weight:800;letter-spacing:-.03em;margin:0 0 6px;color:var(--ink)}
.aff-header__tagline{font-size:15px;color:var(--ink-soft);margin:0 0 8px}
.aff-header__sub{font-size:12.5px;color:var(--ink-faint);margin:0}

/* ---- 캔버스 모드: 푸터 ---- */
.aff-footer{text-align:center;padding:32px 24px 48px;border-top:1px solid var(--line);margin-top:40px}
.aff-footer__disclosure{font-size:12px;color:var(--ink-faint);margin:0 0 8px;line-height:1.6}
.aff-footer__copy{font-size:11.5px;color:var(--ink-faint);margin:0}

/* ---- SNS 링크 ---- */
.aff-sns{display:flex;justify-content:center;gap:8px;padding:16px 24px 0;flex-wrap:wrap}
.aff-sns__link{font-size:12.5px;color:var(--ink-soft);text-decoration:none;padding:5px 12px;
	border:1px solid var(--line);border-radius:99px;transition:.15s}
.aff-sns__link:hover{color:var(--accent);border-color:var(--accent)}