/* ===================================================================
   피터캣클럽 — 공통 부품 (시안 없는 화면용 디자인 언어)

   규칙 출처: specs/2026-09-14-existing-pages-renewal/spec.md §4 규칙표(DL-xx).
   "가안"은 시안·확정 결정에 직접 근거가 없어 규칙표가 정한 값(마크업 data-draft 로 표시).
   모든 선택자는 pc- 부품 클래스로 시작한다(플러그인 CSS 와 섞여도 서로 건드리지 않게).
   =================================================================== */

/* ===================
   4. Components
   =================== */

/* 1차 텍스트 버튼 — DL-18: pill, 딥퍼플 바탕 흰 글자(15.61:1), 3~8.png "자세히 보러가기" */
.pc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pc-space-2);
	min-height: 48px;
	margin: 0;
	padding: 0 34px;
	border: 0;
	border-radius: var(--pc-radius-pill);
	background: var(--pc-purple-deep);
	box-shadow: none;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-15);
	font-weight: 700;
	line-height: 1.3;
	color: var(--pc-on-dark);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--pc-dur-fast) ease, box-shadow var(--pc-dur-fast) ease;
}

.pc-button:hover,
.pc-button:focus {
	background: var(--pc-purple-deep);
	color: var(--pc-on-dark);
	text-decoration: none;
}

.pc-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--pc-shadow-btn-hover);
}

.pc-button:active {
	transform: translateY(0);
}

/* 2차 텍스트 버튼 — DL-19(가안 EP-btn2): 흰 바탕, 1px 검정, 검정 글자 */
.pc-button--secondary,
.pc-button--secondary:hover,
.pc-button--secondary:focus {
	border: var(--pc-line-width) solid var(--pc-black);
	background: var(--pc-white);
	color: var(--pc-black);
}

.pc-button:focus-visible,
.pc-badge:focus-visible,
.pc-card__link:focus-visible,
.pc-pagination a:focus-visible,
.pc-empty a:focus-visible,
.pc-entry__content a:focus-visible {
	outline: 2px solid var(--pc-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--pc-white);
}

/* 상태 배지·카테고리 — DL-28(가안 EP-badge): 작은 pill, 흰 바탕 1px 검정 */
.pc-badge {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 var(--pc-space-3);
	border: var(--pc-line-width) solid var(--pc-black);
	border-radius: var(--pc-radius-pill);
	background: var(--pc-white);
	font-size: var(--pc-fs-12);
	font-weight: 700;
	line-height: 1.2;
	color: var(--pc-black);
	text-decoration: none;
}

a.pc-badge:hover {
	background: var(--pc-gray-soft);
	color: var(--pc-black);
}

/* 페이지 부제·메타 — DL-13 / DL-16 */
.pc-page-sub {
	margin: calc(-1 * var(--pc-space-5)) 0 var(--pc-space-7);
	font-size: var(--pc-fs-14);
	font-weight: 700;
	line-height: 1.7;
	color: var(--pc-black);
	text-align: center;
}

/* 목록 그리드 — DL-11: ≥1024 3열 / 768~1023 2열 / <768 1열 */
.pc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 62px 45px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 목록 카드 — DL-25: 상자 없음, 1:1 썸네일 1px 검정, 제목 700 검정 2줄 */
.pc-card {
	margin: 0;
}

.pc-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-3);
	color: var(--pc-black);
	text-decoration: none;
}

.pc-card__thumb {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: var(--pc-line-width) solid var(--pc-black);
	background: var(--pc-white);
}

.pc-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms var(--pc-ease);
}

.pc-card__link:hover .pc-card__thumb img {
	transform: scale(1.03);
}

.pc-card__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 21px;
	font-weight: 700;
	line-height: 30px;
	color: var(--pc-black);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pc-card__link:hover .pc-card__title {
	text-decoration: underline;
}

.pc-card__meta {
	font-size: var(--pc-fs-14);
	font-variant-numeric: tabular-nums;
	color: var(--pc-ink-muted);
}

/* 페이지 번호 — DL-36(가안 EP-page) */
.pc-pagination {
	margin-top: var(--pc-space-8);
}

.pc-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--pc-space-2);
	border: var(--pc-line-width) solid var(--pc-black);
	border-radius: var(--pc-radius-pill);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--pc-black);
	text-decoration: none;
}

.pc-pagination a.page-numbers:hover {
	background: var(--pc-gray-soft);
}

.pc-pagination .page-numbers.current {
	background: var(--pc-black);
	color: var(--pc-white);
}

.pc-pagination .page-numbers.dots {
	border-color: transparent;
}

/* 빈 상태 — DL-34: 1px 검정 상자, 제목 20 700, 설명 16 muted, 다음 행동 링크 */
.pc-empty {
	max-width: 640px;
	margin: var(--pc-space-7) auto 0;
	padding: var(--pc-space-7) var(--pc-space-5);
	border: var(--pc-line-width) solid var(--pc-black);
	text-align: center;
}

.pc-empty__title {
	margin: 0;
	font-size: var(--pc-fs-20);
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-empty__desc {
	margin: var(--pc-space-2) 0 0;
	font-size: var(--pc-fs-16);
	line-height: 1.7;
	color: var(--pc-ink-muted);
}

.pc-empty__desc a {
	color: var(--pc-ink);
	text-decoration: underline;
}

.pc-empty .pc-button {
	margin-top: var(--pc-space-5);
}

/* 한 줄 검색 — DL-30(검색 입력만 pill 허용) */
.pc-searchbar {
	display: flex;
	gap: var(--pc-space-2);
	max-width: 560px;
	margin: 0 auto var(--pc-space-8);
}

.pc-searchbar__input {
	flex: 1;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 var(--pc-space-5);
	border: var(--pc-line-width) solid var(--pc-black);
	border-radius: var(--pc-radius-pill);
	background: var(--pc-white);
	font-size: var(--pc-fs-16);
	color: var(--pc-ink);
}

.pc-searchbar__input:focus {
	outline: 2px solid var(--pc-ink);
	outline-offset: 2px;
}

/* 필터 칩·카테고리 탭 — DL-29: pill 1px 검정 15px 700, 높이 44, 선택 = 안쪽 2px + 800 (11.png 태그) */
.pc-chips {
	margin: 0 0 var(--pc-space-5);
}

.pc-chips__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pc-space-2) var(--pc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--pc-space-5);
	border: var(--pc-line-width) solid var(--pc-black);
	border-radius: var(--pc-radius-pill);
	background: var(--pc-white);
	font-size: var(--pc-fs-15);
	font-weight: 700;
	line-height: 1.2;
	color: var(--pc-black);
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--pc-dur-fast) ease;
}

.pc-chip:hover {
	transform: translateY(-2px);
	color: var(--pc-black);
}

.pc-chip[aria-current="true"] {
	box-shadow: inset 0 0 0 2px var(--pc-black);
	font-weight: 800;
}

.pc-chip:focus-visible {
	outline: 2px solid var(--pc-ink);
	outline-offset: 2px;
}

/* 선택 상자 — DL-30 입력 규칙(1px 검정, 모서리 0, 높이 48) */
.pc-select {
	height: 48px;
	margin: 0;
	padding: 0 40px 0 var(--pc-space-4);
	border: var(--pc-line-width) solid var(--pc-black);
	border-radius: 0;
	background: var(--pc-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;
	font-size: var(--pc-fs-15);
	color: var(--pc-ink);
	-webkit-appearance: none;
	appearance: none;
}

.pc-select:focus {
	outline: 2px solid var(--pc-ink);
	outline-offset: 2px;
}

/* 카드 위 원형 아이콘 버튼 — DL-26(가안 EP-card-icon): 44×44, 흰 바탕 1px 검정, 그림자 0 */
.pc-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: var(--pc-line-width) solid var(--pc-black);
	border-radius: 50%;
	background: var(--pc-white);
	box-shadow: none;
	color: var(--pc-black);
	cursor: pointer;
	transition: transform var(--pc-dur-fast) ease;
}

.pc-icon-btn:hover,
.pc-icon-btn:focus {
	background: var(--pc-white);
	color: var(--pc-black);
	transform: translateY(-2px);
}

.pc-icon-btn:focus-visible {
	outline: 2px solid var(--pc-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--pc-white);
}

.pc-icon-btn svg {
	display: block;
	stroke: var(--pc-black);
}

/* 발바닥(찜) — 빈 상태는 선, 찜하면 핑크 채움(헤더 발바닥 색) */
.pc-icon-btn .pc-lms-card__paw ellipse {
	fill: none;
	stroke: var(--pc-black);
	stroke-width: 1.4;
}

.pc-icon-btn.wishlisted .pc-lms-card__paw ellipse,
.pc-icon-btn[aria-pressed="true"] .pc-lms-card__paw ellipse {
	fill: var(--pc-pink-sub);
	stroke: var(--pc-pink-sub);
}

/* 가격 — DL-27: 판매가 700 검정, 원가 취소선 muted, 할인율 700 핑크(4.53:1) */
.pc-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--pc-space-2);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.pc-price__rate {
	font-size: var(--pc-fs-16);
	font-weight: 700;
	color: var(--pc-pink-sub-text);
}

.pc-price__now {
	font-size: var(--pc-fs-18);
	font-weight: 700;
	color: var(--pc-black);
}

.pc-price__was {
	font-size: var(--pc-fs-14);
	color: var(--pc-ink-muted);
}

/* 잠깐 뜨는 안내(role=status) — alert 대신. DL-35 문구 + DL-39 고정 바 모양 */
.pc-toast {
	position: fixed;
	left: 50%;
	bottom: var(--pc-space-6);
	z-index: 100000003;
	max-width: calc(100vw - 32px);
	padding: var(--pc-space-3) var(--pc-space-5);
	border: var(--pc-line-width) solid var(--pc-black);
	background: var(--pc-white);
	font-size: var(--pc-fs-15);
	font-weight: 700;
	color: var(--pc-ink);
	transform: translateX(-50%);
	transition: opacity var(--pc-dur) ease, transform var(--pc-dur) ease;
}

.pc-toast--out {
	opacity: 0;
	transform: translate(-50%, 8px);
}

/* ===================
   6. Responsive
   =================== */

@media (max-width: 1023px) {
	.pc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pc-space-7) var(--pc-space-5);
	}
}

@media (max-width: 767px) {
	.pc-grid {
		grid-template-columns: 1fr;
		gap: var(--pc-space-7);
	}

	.pc-card__title {
		font-size: var(--pc-fs-18);
		line-height: 1.5;
	}

	.pc-searchbar {
		margin-bottom: var(--pc-space-7);
	}
}