/* 광고 훅(AdHook) 공통 — 박스 + 공용 헤더바(타이틀 탭/광고안내/ⓘ툴팁/우측문구) + 카드 그리드 */

/* 슬롯: 위치/레이아웃 컨테이너 */
.adhook-slot { margin: 28px 0; }
/* 일반형제 ~ 사용: 각 박스 앞에 위젯 스킨의 <link> 가 인라인으로 끼어 인접형제(+)가 깨지므로… */
.adhook-stack > .adhook-box ~ .adhook-box { margin-top: 20px; }   /* 세로: 파워→베스트→추천 */
.adhook-row { display: flex; gap: 24px; align-items: flex-start; }
.adhook-row > .adhook-box { flex: 1 1 0; min-width: 0; }

/* 박스: 전체 테두리 제거 — 박스감은 헤더바에만(상품 영역이 더 크게 보이도록) */
.adhook-box { border: 0; border-radius: 0; background: #fff; }

/* 공용 헤더바 (파워/베스트/추천 동일 디자인) — 헤더만 박스화(테두리+라운드) */
.adhook-head { display: flex; align-items: center; gap:12px; padding: 9px 14px; background: #f5f6fa; border: 1px solid #eceef2; border-radius: 10px; }
.adhook-tab { flex: 0 0 auto; padding: 6px 16px; font-size: 13px; font-weight: 800; color: #fff; background: #2f3a8f; border-radius: 4px; letter-spacing: .02em; white-space: nowrap; }
.adhook-notice { flex: 1 1 auto; font-size: 13px; color: #666; line-height:1.4; padding-top:3px;}
.adhook-notice strong { color: #d23b3b; font-weight: 700; }
.adhook-market { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #d23b3b; white-space: nowrap; }

/* ⓘ 호버 툴팁 (광고 노출기준 안내) */
.adhook-info { position: relative; display: inline-flex; align-items: center; margin-left: 4px; color: #9aa1ac; cursor: help; vertical-align: middle; outline: none; line-height: 1; }
/* margin-top:-2px 하드오프셋 제거 → inline-flex(부모 flex면 align-items)… */
.adhook-info .ri-information-line { font-size: 15px; line-height: 1; display: block; }

.adhook-tip {
	position: absolute;
	left: 0;
	top: calc(100% + 8px);
	z-index: 30;
	width: 300px;
	max-width: min(300px, calc(100vw - 24px));
	padding: 12px 14px;
	font-size: 12px;
	line-height: 1.6;
	font-weight: 400;
	color: #fff;
	text-align: left;
	background: rgba(33, 37, 43, .96);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease;
	word-break: keep-all;
}
.adhook-tip::before {
	content: "";
	position: absolute;
	left: var(--tip-arrow-left, 12px);
	top: -6px;
	border: 6px solid transparent;
	border-top: 0;
	border-bottom-color: rgba(33, 37, 43, .96);
}
.adhook-info:hover .adhook-tip,
.adhook-info:focus .adhook-tip,
.adhook-info.tip-open .adhook-tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* AD 보더 뱃지 — 뱃지 자체가 툴팁 트리거(.adhook-info 호버/탭 로직 재사용) */
.adhook-ad-badge {
	padding: 2px 6px;
	border: 1px solid #c9cfda;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #8a93a6;
	line-height: 1;
}


/* 바디 — 좌우 패딩 0(상품이 박스 끝까지 크게) */
.adhook-body { padding: 16px 0; }
/* 정본 .product.list.thumb 컨테이너의 margin-bottom:40px 가 박스 하단 여백을… */
.adhook-body .product.list.thumb { margin-bottom: 0; }
/* 모바일 정본 그리드(.product.list .grid)의 자체 좌우 패딩(13px)도 광고 박스 안에선 중화… */
.adhook-body .product.list .grid { padding-left: 0; padding-right: 0; }
/* 광고 박스 안 정본 그리드: PC 한 줄 5개(정본 기본 4개=width:25% → 20%) */
@media (min-width: 769px) {
	.adhook-body .product.list.thumb ul.grid li.item { width: 20%; }
	/* 하단은 상단과 대칭(박스 패딩 16px + 정본 item 상하 margin 20px = 상/하 동일) */
}

/* 변형: 타이틀 탭 색상만 차등 */
.adhook-box--power_item .adhook-tab { background: #2f3a8f; }
.adhook-box--best_products .adhook-tab { background: #2563eb; }
.adhook-box--recommended_products .adhook-tab { background: #c0392b; }

/* 카드 그리드 (best/recommended 공용) — PC 5열, 모바일 2열 */
.adhook-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; }
.adhook-card { display: block; text-decoration: none; color: inherit; }
.adhook-thumb { display: block; position: relative; width: 100%; padding-top: 100%; overflow: hidden; border-radius: 8px; background: #f4f5f7; }
.adhook-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.adhook-card:hover .adhook-thumb img { transform: scale(1.04); }
/* PC 썸네일 링크(이미지 커버) + 호버 오버레이(상세보기/관심상품) — 일반 상품목록 패턴 */
.adhook-thumb-link { position: absolute; inset: 0; display: block; z-index: 1; }
.adhook-hover-btns {
	position: absolute;
	left: 50%; bottom: 0;
	transform: translate(-50%, 0);
	z-index: 3;
	display: flex;
	visibility: hidden;
	opacity: 0;
	background: #fff;
	border: 1px solid #ddd;
	transition: opacity .2s ease, bottom .2s ease;
}
.adhook-card:hover .adhook-hover-btns { visibility: visible; bottom: 10px; opacity: 1; }
.adhook-hover-btns a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 31px;
	border-right: 1px solid #ddd;
}
.adhook-hover-btns a:last-child { border-right: 0; }
.adhook-hover-btns a:hover { background: rgba(0, 0, 0, 0.1); }
.adhook-hover-btns a img { width: 20px; }

/* 상품코드 뱃지 — 일반 상품목록(.product.list .code)과 동일: 썸네일 하단 우측 다크 뱃지 +… */
.adhook-code {
	pointer-events: none;   /* 뱃지가 썸네일 링크 클릭을 막지 않게 */
	position: absolute;
	bottom: 0; right: 0;
	padding: 3px 5px;
	font-size: 0.75rem;
	line-height: 1rem;
	letter-spacing: 0.03em;
	color: #fff;
	text-align: center;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 3px 0 3px 3px;
	z-index: 1;
}
.adhook-code::before {
	content: '';
	position: absolute;
	top: -3px;
	right: 0;
	width: 0; height: 0;
	border-top: 3px solid transparent;
	border-left: 3px solid #000;
	border-bottom: 0 solid transparent;
	border-right: 0 solid transparent;
}
.adhook-name { 
	display: -webkit-box;
	-webkit-box-orient: vertical; 
	-webkit-line-clamp: 2; 
	overflow: hidden; 
	min-height: 2em;   /* line-height 1.4 * 2줄 기준 */
	margin-top: 8px;
	font-size: 13px; 
	line-height: 1.4; 
	color: #333; 
}
.adhook-price { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; color: #111; }

/* 모바일 카드용 상품코드 텍스트 라인 — 일반 상품목록(.product.list .code) 톤: 이름 위 회색… */
.adhook-code-line {
	display: block;
	margin-top: 8px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #888;
	letter-spacing: -0.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 모바일 카드 액션로우(코드 + 관심상품 하트) — 일반 상품목록 .action-row 패턴 */
.adhook-action-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; min-height: 20px; }
.adhook-action-row .adhook-code-line { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.adhook-wish { flex: 0 0 auto; margin-left: 6px; font-size: 1.125rem; line-height: 1; color: #c4c4c4; text-decoration: none; }
.adhook-wish .icon-active { color: #ff3b30; }
/* 이름을 링크로 써도 카드 톤 유지(밑줄/색 상속) */
a.adhook-name { text-decoration: none; }

@media (max-width: 768px) {
	.adhook-slot { margin: 28px 16px; }
	.adhook-row { flex-direction: column; }
	.adhook-row > .adhook-box ~ .adhook-box { margin-top: 20px; }
	.adhook-body { padding: 16px 0; }
	.adhook-head { flex-wrap: wrap; }
	.adhook-market {display:none; flex-basis: 100%; border-top:1px solid #eceef2; padding:10px 0 0;}
	.adhook-grid { grid-template-columns: repeat(2, 1fr); gap:12px 10px;}   /* 모바일 항상 2열(최소 2개 유지) */
	/* 카드 타이포를 일반 상품목록과 동일하게 + 가격만 강조색(--point-color) */
	.adhook-code-line { margin-top: 8px; }
	.adhook-name { margin-top: 3px; min-height: 0; font-size: 0.9375rem; }
	.adhook-price { color: var(--point-color); }
	.adhook-tab { flex: 0 0 auto; padding: 5px 10px; font-size: 13px; line-height:1.2; font-weight: 800; color: #fff; background: #2f3a8f; border-radius: 4px; letter-spacing: .02em; white-space: nowrap; }
 }