/* サキヨミ card market search */
.s360-cards-page .s360-site-main {
	background: linear-gradient(180deg, rgba(223, 242, 255, .58), transparent 500px), var(--s360-bg);
}

.s360-cards-page .s360-article {
	overflow: visible;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.s360-cards-page .s360-article-header {
	position: relative;
	overflow: hidden;
	margin: 0 0 16px;
	padding: clamp(18px, 3vw, 28px);
	border: 1px solid rgba(86, 164, 217, .35);
	border-radius: 18px;
	background:
		radial-gradient(circle at 88% 10%, rgba(66, 184, 233, .24), transparent 32%),
		linear-gradient(135deg, #071f39, #0a477b 64%, #087fc0);
	box-shadow: 0 10px 26px rgba(8, 47, 87, .15);
}

.s360-cards-page .s360-article-header::before {
	display: block;
	margin-bottom: 4px;
	color: #78d7ff;
	font-size: max(var(--s360-readable-floor, 14px), .58rem);
	font-weight: 950;
	letter-spacing: .16em;
	content: "CARD PRICE DATABASE";
}

.s360-cards-page .s360-article-title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.5rem, 3vw, 2.15rem);
	font-weight: 950;
	letter-spacing: -.045em;
}

.s360-cards-page .s360-article-content > * {
	max-width: none;
}

.s360-card-search {
	margin: 0;
	color: #17283a;
}

.s360-game-tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 9px;
	margin-top: 0;
	padding: 8px;
	border: 1px solid #d8e6f1;
	border-radius: 18px;
	background: #edf5fc;
}

.s360-game-tab {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 76px;
	align-items: flex-start;
	justify-content: center;
	padding: 13px 16px;
	border: 1px solid transparent;
	border-radius: 13px;
	background: transparent;
	color: #52687c;
	cursor: pointer;
	flex-direction: column;
	transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.s360-game-tab:hover:not(.is-active) {
	border-color: #d4e4f0;
	background: rgba(255, 255, 255, .8);
	transform: translateY(-1px);
}

.s360-game-tab.is-active {
	border-color: #167dbc;
	background: linear-gradient(135deg, #0c63a6, #0788d1);
	color: #fff;
	box-shadow: 0 8px 19px rgba(12, 99, 166, .24);
}

.s360-game-tab.is-onepiece.is-active {
	border-color: #bf3737;
	background: linear-gradient(135deg, #ad2929, #df4b43);
	box-shadow: 0 8px 19px rgba(173, 41, 41, .22);
}

.s360-game-tab.is-lorcana.is-active {
	border-color: #6846bf;
	background: linear-gradient(135deg, #5b3dad, #8968d8);
	box-shadow: 0 8px 19px rgba(104, 70, 191, .22);
}

.s360-game-tab:focus-visible {
	outline: 3px solid rgba(66, 184, 233, .42);
	outline-offset: 2px;
}

.s360-game-tab-code,
.s360-game-tab-label,
.s360-game-tab-note {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.s360-game-tab-code {
	margin-bottom: 2px;
	font-size: max(var(--s360-readable-floor, 14px), .56rem);
	font-weight: 950;
	letter-spacing: .13em;
	opacity: .74;
}

.s360-game-tab-label {
	font-size: max(var(--s360-readable-floor, 14px), .93rem);
	font-weight: 950;
}

.s360-game-tab-note {
	margin-top: 2px;
	font-size: max(var(--s360-readable-floor, 14px), .63rem);
	font-weight: 700;
	opacity: .72;
}

.s360-card-search-form {
	margin-top: 14px;
	padding: 20px;
	border: 1px solid #d8e6f1;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(8, 47, 87, .08);
}

.s360-card-query-wrap {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 7px;
	padding: 6px;
	border: 1px solid #bdd3e4;
	border-radius: 15px;
	background: #f8fbfe;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.s360-card-query-wrap:focus-within {
	border-color: #42a7df;
	box-shadow: 0 0 0 4px rgba(66, 167, 223, .13);
}

.s360-card-query-icon {
	position: absolute;
	top: 50%;
	left: 20px;
	color: #6590ae;
	pointer-events: none;
	transform: translateY(-50%);
}

.s360-card-query-wrap input {
	width: 100%;
	min-width: 0;
	min-height: 50px;
	padding: 10px 14px 10px 49px;
	border: 0;
	background: transparent;
	color: #17283a;
	font-size: max(var(--s360-readable-floor, 14px), .95rem);
	outline: 0;
}

.s360-card-query-wrap input::placeholder {
	color: #8295a7;
}

.s360-card-search-submit {
	display: inline-flex;
	min-width: 132px;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 9px 19px;
	border: 0;
	border-radius: 11px;
	background: linear-gradient(135deg, #0c63a6, #0788d1);
	color: #fff;
	font-size: max(var(--s360-readable-floor, 14px), .86rem);
	font-weight: 950;
	cursor: pointer;
	box-shadow: 0 7px 17px rgba(12, 99, 166, .23);
	transition: transform .18s ease, box-shadow .18s ease;
}

.s360-card-search-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 21px rgba(12, 99, 166, .3);
}

.s360-card-filter {
	margin-top: 15px;
}

.s360-card-filter summary {
	display: none;
}

.s360-card-filter-fields {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

.s360-card-filter-fields label {
	min-width: 0;
}

.s360-card-filter-fields label > span {
	display: block;
	margin: 0 0 5px 2px;
	color: #607286;
	font-size: max(var(--s360-readable-floor, 14px), .67rem);
	font-weight: 900;
}

.s360-card-filter-fields select {
	width: 100%;
	min-height: 46px;
	padding: 9px 34px 9px 11px;
	border: 1px solid #cbd9e8;
	border-radius: 10px;
	background-color: #f9fcff;
	color: #17283a;
	font-size: max(var(--s360-readable-floor, 14px), .78rem);
	outline: 0;
}

.s360-card-filter-fields select:focus {
	border-color: #42a7df;
	box-shadow: 0 0 0 3px rgba(66, 167, 223, .12);
}

.s360-card-filter-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 26px;
	padding-top: 8px;
}

.s360-card-stock-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #3d566d;
	font-size: max(var(--s360-readable-floor, 14px), .72rem);
	font-weight: 900;
	cursor: pointer;
}

.s360-card-stock-toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.s360-card-stock-switch {
	position: relative;
	display: inline-block;
	width: 34px;
	height: 20px;
	border: 1px solid #b8cada;
	border-radius: 999px;
	background: #dfe8ef;
	transition: background .18s ease, border-color .18s ease;
}

.s360-card-stock-switch::after {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(8, 47, 87, .25);
	content: "";
	transition: transform .18s ease;
}

.s360-card-stock-toggle input:checked + .s360-card-stock-switch {
	border-color: #0878d1;
	background: #0878d1;
}

.s360-card-stock-toggle input:checked + .s360-card-stock-switch::after {
	transform: translateX(14px);
}

.s360-card-stock-toggle input:focus-visible + .s360-card-stock-switch {
	outline: 3px solid rgba(66, 167, 223, .28);
	outline-offset: 2px;
}

.s360-card-filter-reset {
	padding: 4px 7px;
	border: 0;
	background: transparent;
	color: #0b65ad;
	font-size: max(var(--s360-readable-floor, 14px), .7rem);
	font-weight: 900;
	text-decoration: underline;
	cursor: pointer;
}

.s360-card-results-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 24px 2px 13px;
}

.s360-search-summary {
	color: #29445c;
	font-size: max(var(--s360-readable-floor, 14px), .9rem);
	font-weight: 900;
}

.s360-card-results-head p {
	margin: 0;
	color: #718397;
	font-size: max(var(--s360-readable-floor, 14px), .68rem);
}

.s360-card-results {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.s360-search-card {
	position: relative;
	display: flex;
	min-width: 0;
	overflow: hidden;
	padding: 11px;
	border: 1px solid #dce8f2;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 7px 22px rgba(8, 47, 87, .065);
	color: #17283a;
	text-decoration: none;
	flex-direction: column;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.s360-search-card:hover {
	transform: translateY(-4px);
	border-color: #8fc4e7;
	box-shadow: 0 15px 32px rgba(8, 47, 87, .14);
}

.s360-search-card:focus-visible {
	outline: 3px solid rgba(66, 184, 233, .45);
	outline-offset: 3px;
}

.s360-search-card-image {
	position: relative;
	display: grid;
	height: 255px;
	place-items: center;
	overflow: hidden;
	margin-bottom: 11px;
	padding: 8px;
	border-radius: 13px;
	background: radial-gradient(circle at 50% 18%, #fff 0, #eef5fa 75%);
	color: #8295a7;
	font-size: max(var(--s360-readable-floor, 14px), .62rem);
	font-weight: 800;
	text-align: center;
}

.s360-search-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .22s ease;
}

.s360-search-card:hover .s360-search-card-image img {
	transform: scale(1.025);
}

.s360-search-card-change {
	position: absolute;
	top: 9px;
	right: 9px;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 4px 12px rgba(8, 47, 87, .13);
	font-size: max(var(--s360-readable-floor, 14px), .65rem);
	font-weight: 950;
}

.s360-search-card-change.is-up {
	color: #dc2626;
}

.s360-search-card-change.is-down {
	color: #16834b;
}

.s360-search-card-tags {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	margin: 0 2px 7px;
}

.s360-search-card-game,
.s360-search-card-rarity {
	display: inline-flex;
	align-items: center;
	min-height: 21px;
	padding: 2px 7px;
	border-radius: 999px;
	font-size: max(var(--s360-readable-floor, 14px), .58rem);
	font-weight: 950;
}

.s360-search-card-game {
	background: #eaf5ff;
	color: #0c63a6;
}

.s360-search-card-game.is-onepiece {
	background: #fff0ef;
	color: #b73832;
}

.s360-search-card-game.is-lorcana {
	background: #f2edff;
	color: #6846bf;
}

.s360-search-card-rarity {
	background: #f1f4f7;
	color: #586c7f;
}

.s360-search-card-name {
	margin: 0 2px 6px;
	color: #17283a;
	font-size: max(var(--s360-readable-floor, 14px), .96rem);
	font-weight: 950;
	line-height: 1.45;
}

.s360-search-card-meta {
	min-height: 38px;
	margin: 0 2px;
	color: #64748b;
	font-size: max(var(--s360-readable-floor, 14px), .7rem);
	line-height: 1.55;
}

.s360-search-card-meta strong {
	display: block;
	overflow: hidden;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.s360-search-card-price {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding: 13px 2px 8px;
	border-bottom: 1px solid #e4edf4;
}

.s360-search-card-price small,
.s360-search-card-price strong {
	display: block;
}

.s360-search-card-price small {
	color: #718397;
	font-size: max(var(--s360-readable-floor, 14px), .61rem);
}

.s360-search-card-price strong {
	color: #0870c5;
	font-size: 1.27rem;
	font-weight: 950;
	letter-spacing: -.02em;
}

.s360-search-card-condition {
	padding: 3px 7px;
	border-radius: 7px;
	background: #eef6ff;
	color: #35627f;
	font-size: max(var(--s360-readable-floor, 14px), .61rem);
	font-weight: 850;
	white-space: nowrap;
}

.s360-search-card-condition.is-out {
	background: #f3f4f6;
	color: #6b7280;
}

.s360-search-card-action {
	display: flex;
	justify-content: space-between;
	padding: 9px 2px 1px;
	color: #0b65ad;
	font-size: max(var(--s360-readable-floor, 14px), .68rem);
	font-weight: 900;
}

.s360-card-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 28px;
}

.s360-card-pagination button {
	min-width: 42px;
	height: 42px;
	padding: 0 11px;
	border: 1px solid #cfdeea;
	border-radius: 10px;
	background: #fff;
	color: #29445c;
	font-size: max(var(--s360-readable-floor, 14px), .76rem);
	font-weight: 800;
	cursor: pointer;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.s360-card-pagination button:hover:not(:disabled) {
	transform: translateY(-1px);
	border-color: #82b9e7;
	box-shadow: 0 5px 13px rgba(21, 91, 160, .12);
}

.s360-card-pagination button.is-active {
	border-color: #0878d1;
	background: linear-gradient(135deg, #0c63a6, #0788d1);
	color: #fff;
	font-weight: 950;
}

.s360-card-pagination button:disabled {
	opacity: .4;
	cursor: default;
}

.s360-card-search-error,
.s360-no-cards {
	grid-column: 1 / -1;
	padding: 42px 20px;
	border: 1px dashed #cbdce9;
	border-radius: 16px;
	background: linear-gradient(145deg, #fff, #f5faff);
	color: #64748b;
	text-align: center;
}

.s360-search-card.is-loading {
	pointer-events: none;
}

.s360-search-card.is-loading .s360-search-card-image,
.s360-search-skeleton-line {
	background: linear-gradient(90deg, #eef3f7 25%, #f8fbfd 50%, #eef3f7 75%);
	background-size: 200% 100%;
	animation: s360-card-shimmer 1.35s infinite linear;
}

.s360-search-skeleton-line {
	height: 13px;
	margin: 6px 3px;
	border-radius: 999px;
}

.s360-search-skeleton-line.is-short {
	width: 40%;
}

.s360-search-skeleton-line.is-price {
	width: 62%;
	height: 24px;
	margin-top: 20px;
}

@keyframes s360-card-shimmer {
	to { background-position: -200% 0; }
}

@media (max-width: 960px) {
	.s360-card-results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.s360-card-filter-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.s360-cards-page .s360-article-header {
		padding: 16px 18px;
		border-radius: 14px;
	}

	.s360-cards-page .s360-article-title {
		font-size: 1.45rem;
	}

	.s360-game-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.s360-game-tab {
		min-height: 67px;
		padding: 10px;
	}

	.s360-game-tab-label {
		font-size: max(var(--s360-readable-floor, 14px), .8rem);
	}

	.s360-game-tab-note {
		display: none;
	}

	.s360-card-search-form {
		padding: 14px;
		border-radius: 16px;
	}

	.s360-card-filter summary {
		display: flex;
		min-height: 44px;
		align-items: center;
		justify-content: space-between;
		padding: 8px 12px;
		border: 1px solid #cbd9e8;
		border-radius: 10px;
		background: #f9fcff;
		color: #28506f;
		font-size: max(var(--s360-readable-floor, 14px), .78rem);
		font-weight: 950;
		cursor: pointer;
		list-style: none;
	}

	.s360-card-filter summary::-webkit-details-marker {
		display: none;
	}

	.s360-card-filter summary::after {
		content: "＋";
	}

	.s360-card-filter[open] summary::after {
		content: "−";
	}

	.s360-card-filter-fields {
		padding-top: 11px;
	}

	.s360-card-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.s360-card-results-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
	}

	.s360-search-card {
		padding: 8px;
		border-radius: 14px;
	}

	.s360-search-card-image {
		height: 205px;
		padding: 5px;
	}

	.s360-search-card-name {
		font-size: max(var(--s360-readable-floor, 14px), .83rem);
	}

	.s360-search-card-price strong {
		font-size: 1.05rem;
	}
}

@media (max-width: 460px) {
	.s360-game-tabs {
		gap: 5px;
		padding: 5px;
	}

	.s360-game-tab {
		min-height: 58px;
		padding: 8px 5px;
	}

	.s360-game-tab-code {
		font-size: max(var(--s360-readable-floor, 14px), .47rem);
	}

	.s360-game-tab-label {
		font-size: max(var(--s360-readable-floor, 14px), .68rem);
	}

	.s360-card-query-wrap {
		grid-template-columns: minmax(0, 1fr) 47px;
	}

	.s360-card-search-submit {
		min-width: 47px;
		width: 47px;
		padding: 0;
	}

	.s360-card-search-submit span:first-child {
		display: none;
	}

	.s360-card-filter-fields {
		grid-template-columns: 1fr;
	}

	.s360-search-card-image {
		height: 180px;
	}

	.s360-search-card-meta {
		min-height: 34px;
		font-size: max(var(--s360-readable-floor, 14px), .62rem);
	}

	.s360-search-card-price {
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.s360-game-tab,
	.s360-card-search-submit,
	.s360-search-card,
	.s360-search-card-image img,
	.s360-card-pagination button {
		transition: none;
	}

	.s360-search-card.is-loading .s360-search-card-image,
	.s360-search-skeleton-line {
		animation: none;
	}
}