/* 포켓몬GO 도감 — 종 검색 화면. 공용 pokemon.css 를 @import 합니다. */
@import "pokemon.css";

/* 검색 폼 */
.pk-search { display: flex; gap: 8px; }
.pk-search input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid #23306a; background: #0a0e1f; color: #e8ecf7; font-size: 15px; }
.pk-search input::placeholder { color: #5f6f9f; }
.pk-search input:focus { outline: none; border-color: #f5c542; }
.pk-search button { padding: 0 22px; border: 0; border-radius: 10px; background: #f5c542; color: #1a1300; font-size: 14px; font-weight: 800; cursor: pointer; }
.pk-search button:hover { background: #ffd666; }

/* 결과 */
.pk-count { margin: 0; font-size: 13px; color: #8da0d6; }
.pk-results { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pk-item { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid #23306a; border-radius: 14px; background: #111938; color: inherit; text-decoration: none; }
.pk-item:hover, .pk-item:focus { border-color: #f5c542; color: inherit; text-decoration: none; }
.pk-item .pk-types { color: #c3cdec; font-size: 13px; }
.pk-item.is-unreleased { opacity: 0.7; }
.pk-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pk-item-name { font-size: 16px; font-weight: 800; color: #e8ecf7; }
.pk-item-en { font-size: 12px; color: #8da0d6; font-family: monospace; }
.pk-item-meta { font-size: 13px; color: #c3cdec; }
.pk-item .pk-flag { align-self: flex-start; margin-top: 4px; }

/* 전체 목록의 카드: 왼쪽 열(이미지 · 성별 단추)과 오른쪽 열(도감번호 · 이름 · 영문 이름 · 타입 · 설명, 그 아래에 지역 단추)이
   서로 다른 상자(.pk-cell-side · .pk-cell-main)라서 한쪽이 길어져도 다른 쪽의 간격이 벌어지지 않는다.
   단추는 링크 안에 둘 수 없어 카드 바탕을 li 가 맡고, 이미지와 글자는 각각 링크다. */
.pk-cell { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border: 1px solid #23306a; border-radius: 14px; background: #111938; }
.pk-cell:hover, .pk-cell:focus-within { border-color: #f5c542; }
.pk-cell-side { flex: none; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pk-thumb { display: block; }
.pk-cell-side .pk-tile { width: 96px; height: 96px; font-size: 14px; }
.pk-cell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pk-cell-main > .pk-item { display: block; width: 100%; padding: 0; border: 0; background: transparent; }
.pk-item-no { font-size: 13px; font-family: monospace; color: #8da0d6; }
.pk-item-flavor { display: block; margin-top: 6px; font-size: 13px; line-height: 1.6; color: #c3cdec; }
.pk-item-flavor.is-none { color: #8da0d6; }
.pk-item-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.pk-genders { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; }
.pk-gender { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 2px solid #23306a; border-radius: 50%; background: #0a0e1f; color: #5f6f9f; font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer; transition: width .12s, height .12s, font-size .12s, border-color .12s; }
.pk-gender.is-none { cursor: default; }
.pk-gender.is-male { color: #6ab0ff; }
.pk-gender.is-female { color: #ff8fc4; }
.pk-gender.is-on { width: 30px; height: 30px; font-size: 18px; background: #17224a; }
.pk-gender.is-male.is-on { border-color: #6ab0ff; }
.pk-gender.is-female.is-on { border-color: #ff8fc4; }
.pk-regions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pk-region { height: 26px; padding: 0 12px; border: 1px solid #23306a; border-radius: 13px; background: #0a0e1f; color: #8da0d6; font-size: 12px; font-weight: 700; cursor: pointer; }
.pk-region:hover { border-color: #f5c542; }
.pk-region.is-on { border-color: #f5c542; background: #f5c542; color: #1a1300; }

/* 전체 목록(무한 스크롤)의 안내 줄 */
.pk-more { margin: 14px 0 0; text-align: center; font-size: 13px; color: #8da0d6; min-height: 20px; }

/* 도감과 교환의 목적 설명 */
.pk-purpose { gap: 10px; }
.pk-bullets { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.6; color: #c3cdec; }

@media (max-width: 640px) {
	.pk-results { grid-template-columns: 1fr; }
	.pk-cell-side { width: 88px; }
	.pk-cell-side .pk-tile { width: 88px; height: 88px; }
}