/*
 * 중고 PC 비교기.
 *
 * 모든 셀렉터에 .pcc- 프리픽스를 붙인다. 테마 CSS 와 섞이면 안 된다.
 * 기본이 모바일이고, 데스크탑에서는 640px 로 묶어 가운데 정렬한다.
 */

.pcc-app {
	--pcc-fg: #1a1a1a;
	--pcc-muted: #6b7280;
	--pcc-line: #e5e7eb;
	--pcc-bg-soft: #f9fafb;
	--pcc-accent: #2563eb;
	--pcc-danger: #b32d2e;
	--pcc-warn: #b45309;
	--pcc-ok: #1a7f37;

	max-width: 640px;
	margin: 0 auto;
	padding: 4px 0 40px;
	color: var(--pcc-fg);
	font-size: 16px;
	line-height: 1.6;
	word-break: keep-all;
}

.pcc-app *,
.pcc-app *::before,
.pcc-app *::after {
	box-sizing: border-box;
}

/* ---------- 폼 ---------- */

.pcc-step {
	margin: 0 0 28px;
}

.pcc-step__title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.pcc-step__hint {
	margin: 0 0 12px;
	color: var(--pcc-muted);
	font-size: 14px;
}

.pcc-listing {
	margin: 0 0 12px;
	padding: 14px;
	border: 1px solid var(--pcc-line);
	border-radius: 12px;
	background: #fff;
}

.pcc-listing__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.pcc-listing__label {
	font-size: 15px;
}

.pcc-listing__remove {
	padding: 4px 8px;
	border: 0;
	background: none;
	color: var(--pcc-muted);
	font-size: 13px;
	cursor: pointer;
}

.pcc-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.pcc-thumbs:empty {
	margin-bottom: 0;
}

.pcc-thumb {
	position: relative;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border: 1px solid var(--pcc-line);
	border-radius: 8px;
}

.pcc-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pcc-thumb__remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 14px;
	line-height: 22px;
	cursor: pointer;
}

/* ---------- 선택지 ---------- */

.pcc-choices {
	display: flex;
	gap: 8px;
}

.pcc-choices--wrap {
	flex-wrap: wrap;
}

.pcc-choice {
	flex: 1 1 auto;
	min-width: 84px;
	padding: 12px 10px;
	border: 1px solid var(--pcc-line);
	border-radius: 10px;
	background: #fff;
	text-align: center;
	font-size: 15px;
	cursor: pointer;
}

.pcc-choices--wrap .pcc-choice {
	flex: 0 0 auto;
	min-width: 0;
	padding: 9px 12px;
	font-size: 14px;
}

.pcc-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pcc-choice:has(input:checked) {
	border-color: var(--pcc-accent);
	background: #eff6ff;
	font-weight: 700;
}

.pcc-games {
	margin-top: 14px;
}

.pcc-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 15px;
	cursor: pointer;
}

/* ---------- 버튼 ---------- */

.pcc-btn {
	display: block;
	width: 100%;
	padding: 14px;
	border: 1px solid var(--pcc-line);
	border-radius: 10px;
	background: #fff;
	color: var(--pcc-fg);
	font-family: inherit;
	font-size: 16px;
	text-align: center;
	cursor: pointer;
}

.pcc-btn--primary {
	border-color: var(--pcc-accent);
	background: var(--pcc-accent);
	color: #fff;
	font-weight: 700;
}

.pcc-btn--primary:disabled {
	opacity: 0.6;
	cursor: default;
}

.pcc-btn--ghost {
	color: var(--pcc-muted);
}

.pcc-btn--file {
	margin: 0;
}

.pcc-form__error {
	margin: 12px 0 0;
	color: var(--pcc-danger);
	font-size: 14px;
}

/* ---------- 로딩 ---------- */

.pcc-skeleton {
	height: 16px;
	margin-bottom: 10px;
	border-radius: 6px;
	background: linear-gradient(90deg, #f1f3f5 25%, #e9ecef 37%, #f1f3f5 63%);
	background-size: 400% 100%;
	animation: pcc-shimmer 1.2s ease-in-out infinite;
}

.pcc-skeleton--title {
	height: 30px;
	width: 70%;
}

@keyframes pcc-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.pcc-skeleton { animation: none; }
}

.pcc-loading__text {
	margin: 14px 0 0;
	color: var(--pcc-muted);
	font-size: 14px;
}

/* ---------- 결과 ---------- */

/* 결론은 스크롤 없이 보여야 한다. 위쪽 여백을 최소로 둔다. */
.pcc-verdict {
	padding: 4px 0 20px;
}

.pcc-verdict__headline {
	margin: 0 0 6px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.25;
}

.pcc-verdict__subline {
	margin: 0;
	font-size: 17px;
	color: var(--pcc-muted);
}

.pcc-section {
	margin: 0 0 26px;
}

.pcc-section__title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--pcc-muted);
}

.pcc-card {
	margin: 0 0 10px;
	padding: 14px;
	border: 1px solid var(--pcc-line);
	border-radius: 12px;
	background: #fff;
}

.pcc-card--winner {
	border-color: var(--pcc-accent);
	background: #f5f9ff;
}

.pcc-card__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pcc-card__rank {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--pcc-bg-soft);
	font-size: 13px;
	color: var(--pcc-muted);
}

.pcc-card--winner .pcc-card__rank {
	background: var(--pcc-accent);
	color: #fff;
}

.pcc-card__label {
	font-size: 17px;
}

.pcc-card__grade {
	margin-left: auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--pcc-muted);
}

.pcc-card__price {
	margin: 6px 0 0;
	font-size: 18px;
	font-weight: 700;
}

.pcc-card__reason {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--pcc-muted);
}

.pcc-warn {
	margin: 8px 0 0;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--pcc-bg-soft);
	font-size: 14px;
}

.pcc-warn--critical {
	background: #fdf2f2;
	color: var(--pcc-danger);
	font-weight: 700;
}

.pcc-warn--warning {
	color: var(--pcc-warn);
}

.pcc-warn--info {
	color: var(--pcc-muted);
}

.pcc-game {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--pcc-line);
}

.pcc-game__name {
	flex: 1 1 auto;
}

.pcc-game__level {
	font-weight: 700;
}

.pcc-game__level--excellent { color: var(--pcc-ok); }
.pcc-game__level--good { color: var(--pcc-accent); }
.pcc-game__level--playable { color: var(--pcc-warn); }
.pcc-game__level--hard { color: var(--pcc-danger); }

.pcc-game__fps {
	min-width: 80px;
	text-align: right;
	font-size: 14px;
	color: var(--pcc-muted);
}

.pcc-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--pcc-line);
}

.pcc-row__name {
	color: var(--pcc-muted);
}

.pcc-row__value {
	font-weight: 700;
	text-align: right;
}

/* 항목별 비교표 */

.pcc-tablewrap {
	/* 매물 3개까지라 대개 들어가지만, 긴 부품명이 있으면 가로로 넘긴다.
	   페이지 전체가 옆으로 밀리지 않게 여기서만 스크롤한다. */
	overflow-x: auto;
	border: 1px solid var(--pcc-line);
	border-radius: 12px;
	background: #fff;
}

.pcc-compare {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.pcc-compare th,
.pcc-compare td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--pcc-line);
	text-align: left;
	vertical-align: top;
}

.pcc-compare tr:last-child th,
.pcc-compare tr:last-child td {
	border-bottom: none;
}

/* 항목 이름은 가로 스크롤에도 붙어 있어야 무슨 줄인지 안다. */
.pcc-compare__corner,
.pcc-compare__row {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 78px;
	background: var(--pcc-bg-soft);
	color: var(--pcc-muted);
	font-weight: 600;
	white-space: nowrap;
}

.pcc-compare__head {
	background: var(--pcc-bg-soft);
	min-width: 116px;
}

.pcc-compare__name {
	display: block;
	color: var(--pcc-fg);
	font-weight: 700;
}

.pcc-compare__rank {
	display: block;
	color: var(--pcc-muted);
	font-size: 12px;
	font-weight: 600;
}

.pcc-compare__value {
	display: block;
	color: var(--pcc-fg);
	line-height: 1.4;
	word-break: break-word;
}

.pcc-compare__score {
	display: block;
	margin-top: 2px;
	color: var(--pcc-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* 그 줄에서 나은 쪽. 색만으로 구분하지 않도록 왼쪽 띠도 같이 준다. */
.pcc-compare__cell--best {
	background: #f0f7ff;
	box-shadow: inset 3px 0 0 var(--pcc-accent);
}

.pcc-compare__cell--best .pcc-compare__value {
	font-weight: 700;
	color: var(--pcc-accent);
}

.pcc-compare__total th,
.pcc-compare__total td {
	border-top: 2px solid var(--pcc-line);
	background: var(--pcc-bg-soft);
}

.pcc-compare__total .pcc-compare__value {
	font-size: 17px;
	font-weight: 700;
}

/* 스펙 수정 폼 */

.pcc-edit {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--pcc-bg-soft);
}

.pcc-edit__label {
	display: block;
	margin-bottom: 8px;
}

/* 사진을 왼쪽에, 입력칸을 오른쪽에. 보면서 고칠 수 있어야 한다. */
.pcc-edit__body {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.pcc-edit--noshot .pcc-edit__body {
	grid-template-columns: minmax(0, 1fr);
}

.pcc-edit__shots {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pcc-edit__shot {
	display: block;
	padding: 0;
	border: 1px solid var(--pcc-line);
	border-radius: 8px;
	background: #fff;
	cursor: zoom-in;
	overflow: hidden;
	line-height: 0;
}

.pcc-edit__shot img {
	display: block;
	width: 100%;
	height: auto;
}

.pcc-edit__shot:focus-visible {
	outline: 2px solid var(--pcc-accent);
	outline-offset: 2px;
}

/* 누르면 카드 전체 폭으로 펼친다. 겹치는 레이어를 안 쓰므로 모바일에서도 안전하다. */
.pcc-edit__shot--big {
	grid-column: 1 / -1;
	cursor: zoom-out;
}

.pcc-edit__shots:has(.pcc-edit__shot--big) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.pcc-edit__fields {
	min-width: 0;
}

.pcc-edit__row {
	display: grid;
	/* 이름 · 입력칸 · 단위 · 못읽음표시. 단위와 표시는 폭을 고정해 칸이 흔들리지 않게 한다. */
	grid-template-columns: 84px minmax(0, 1fr) 28px 72px;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.pcc-edit__name {
	color: var(--pcc-muted);
	font-size: 14px;
}

.pcc-edit__input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--pcc-line);
	border-radius: 8px;
	background: #fff;
	color: var(--pcc-fg);
	/* 16px 미만이면 iOS 사파리가 입력할 때 화면을 확대한다. */
	font-size: 16px;
}

.pcc-edit__input:focus {
	outline: none;
	border-color: var(--pcc-accent);
}

.pcc-edit__row--missing .pcc-edit__input {
	border-color: var(--pcc-warn);
	background: #fffbeb;
}

.pcc-edit__suffix {
	color: var(--pcc-muted);
	font-size: 14px;
}

.pcc-edit__flag {
	color: var(--pcc-warn);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.pcc-edit__row {
		grid-template-columns: 72px minmax(0, 1fr) 24px;
	}

	/* 좁은 화면에서는 표시를 입력칸 아래 줄로 내린다. */
	.pcc-edit__flag {
		grid-column: 2 / -1;
	}
}

.pcc-upgrade {
	margin: 0 0 10px;
	padding: 14px;
	border: 1px solid var(--pcc-line);
	border-radius: 12px;
	background: #fff;
}

.pcc-upgrade__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.pcc-upgrade__name {
	font-size: 16px;
}

.pcc-upgrade__price {
	font-weight: 700;
	white-space: nowrap;
}

.pcc-upgrade__effect {
	margin: 6px 0 10px;
	font-size: 14px;
	color: var(--pcc-muted);
}

.pcc-upgrade__link {
	display: inline-block;
	padding: 9px 14px;
	border-radius: 8px;
	background: var(--pcc-bg-soft);
	color: var(--pcc-accent);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.pcc-related__item {
	display: block;
	padding: 11px 0;
	border-bottom: 1px solid var(--pcc-line);
	color: var(--pcc-fg);
	text-decoration: none;
}

/*
 * 쿠팡 대가성 문구. 결과 맨 위에 선다.
 *
 * 흐린 12px 로 두면 "명확히 인식 가능" 기준에 걸린다(2024-12-01 개정).
 * 본문 색에 13px, 왼쪽 띠를 둘러 배경과 구분되게 한다.
 */
.pcc-disclosure {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-left: 3px solid var(--pcc-line);
	background: var(--pcc-bg-soft);
	color: var(--pcc-fg);
	font-size: 13px;
	line-height: 1.5;
}

.pcc-spec__label {
	display: block;
	margin-bottom: 4px;
}

.pcc-details {
	margin: 0 0 20px;
	padding: 12px 0;
	border-top: 1px solid var(--pcc-line);
}

.pcc-details summary {
	color: var(--pcc-muted);
	font-size: 15px;
	cursor: pointer;
}

.pcc-spec {
	margin-top: 14px;
}

@media (min-width: 641px) {
	.pcc-verdict__headline {
		font-size: 34px;
	}
}