/* 추가적인 커스텀 스타일 및 레이아웃 조정 */
:root {
    --frame-max: 1200px;
}

/* 기본 링크 스타일 정리 */
a {
    text-decoration: none;
    color: inherit;
}

.pi-tile, .pi-btn {
    text-decoration: none !important;
}

.pi-tile {
    display: block;
}

.search-container {
    margin-bottom: var(--s-6);
    display: flex;
    gap: var(--s-4);
    flex-wrap: wrap;
    align-items: center !important; /* 부모 차원에서 강제 중앙 정렬 */
    justify-content: space-between;
}

.pi-filters {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    flex-wrap: wrap;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 280px;
}

.search-input-wrapper i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fg-4);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-input-wrapper input {
    padding-left: 40px;
    width: 100%;
    height: 46px; /* 필터 바 높이에 맞게 조정 */
    display: flex;
    align-items: center;
    line-height: normal;
}

/* 필터 바 자체의 높이 조절 (디자인 시스템 오버라이드) */
.pi-filters {
    height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    margin: 0 !important;
    box-sizing: border-box;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 280px;
    margin: 0 !important;
    box-sizing: border-box;
    align-self: center;
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}

.tag-rule { background: var(--c-ink-soft); color: var(--c-ink); }
.tag-utility { background: var(--c-copper-soft); color: var(--c-copper); }
.tag-webgame { background: var(--c-moss-soft); color: var(--c-moss); }
.tag-genre { background: var(--c-paper-soft); color: var(--fg-2); border: 1px solid var(--fg-5); }
.tag-psych { background: #fce7f3; color: #9d174d; } /* 심리전 - Pink */
.tag-calc { background: #dcfce7; color: #166534; }  /* 점수 계산 - Green */
.tag-hand { background: #e0e7ff; color: #3730a3; }  /* 핸드관리 - Indigo */

.pi-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.pi-tile:hover .pi-tile__image img {
    transform: scale(1.05);
}

.empty-state {
    grid-column: 1 / -1;
    padding: var(--s-10) 0;
    text-align: center;
    color: var(--fg-4);
    font-family: var(--font-serif);
    font-size: var(--step-2);
}

/* 애니메이션 */
.fade-in {
    animation: fadeIn var(--dur-base) var(--ease-out) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pi-brand img {
    height: 32px;
    width: auto;
    display: block;
}