/* ===== Store List 전용 5개 탭 스타일 ===== */

/* 5개 탭용 pill-tabs 재정의 */
.store-pill-tabs {
    --pill-h: 60px;
    --pill-gap: 4px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    margin: 0 auto;
    height: var(--pill-h, 60px);
    padding: var(--pill-gap, 4px);
    background: var(--pill-bg, #f6f6f7);
    border-radius: var(--pill-r, 999px);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
    user-select: none;
    box-sizing: border-box;
}

/* 라디오 숨김 */
.store-pill-tabs input {
    position: absolute;
    opacity: 0;
    
}

/* 레이블(탭) */
.store-pill-tabs label {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    line-height: calc(var(--pill-h, 60px) - var(--pill-gap, 4px) * 2);
    color: var(--pill-off, #9aa0a6);
    cursor: pointer;
    border-radius: var(--pill-r, 999px);
    transition: color 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 움직이는 슬라이더 */
.store-pill-tabs .pill-slider {
    position: absolute;
    z-index: 1;
    top: var(--pill-gap, 4px);
    left: var(--pill-gap, 4px);
    width: calc((100% - var(--pill-gap, 4px) * 2) / 5);
    height: calc(var(--pill-h, 60px) - var(--pill-gap, 4px) * 2);
    background: var(--pill-on, #ff8a00);
    border-radius: var(--pill-r, 999px);
    transition: transform 0.25s ease;
    box-shadow: 0 2px 6px rgba(255, 138, 0, 0.35);
}

/* 5개 탭용 선택 상태 글자색 */
#tab-korean:checked ~ label[for="tab-korean"] { color: #fff; }
#tab-japanese:checked ~ label[for="tab-japanese"] { color: #fff; }
#tab-chinese:checked ~ label[for="tab-chinese"] { color: #fff; }
#tab-western:checked ~ label[for="tab-western"] { color: #fff; }
#tab-etc:checked ~ label[for="tab-etc"] { color: #fff; }

/* 5개 탭용 슬라이더 이동 */
#tab-korean:checked ~ .pill-slider { transform: translateX(0%); }
#tab-japanese:checked ~ .pill-slider { transform: translateX(100%); }
#tab-chinese:checked ~ .pill-slider { transform: translateX(200%); }
#tab-western:checked ~ .pill-slider { transform: translateX(300%); }
#tab-etc:checked ~ .pill-slider { transform: translateX(400%); }

/* 포커스 접근성 */
.store-pill-tabs label:focus-visible {
    outline: 2px solid #333;
    outline-offset: 2px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .store-pill-tabs {
        --pill-h: 52px;
        grid-template-columns: repeat(5, minmax(64px, 1fr));
        width: calc(100% - 32px);
        margin-left: 16px;
        margin-right: 16px;
    }

    .store-pill-tabs label {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .store-pill-tabs label {
        font-size: 12px;
    }

    .store-pill-tabs {
        --pill-h: 46px;
        padding: 3px;
        grid-template-columns: repeat(5, minmax(58px, 1fr));
        width: calc(100% - 24px);
        margin-left: 12px;
        margin-right: 12px;
    }
}

.app-main{
    padding: 0px !important;
}
#panel-store { display:block; }

/* 루트 상태 클래스로 패널 표시 제어 */
.tab--korean #panel-store,
.tab--japanese #panel-store,
.tab--chinese #panel-store,
.tab--western #panel-store,
.tab--etc #panel-store { display:block !important; }

/* 스토어 패널이 비어 보이는 현상 방지 + 카드 애니메이션 */
#panel-store { min-height: 200px; }

.portfolio-will-appear {
    opacity: 0;
    transform: translateY(8px);
}
.portfolio-appear {
    opacity: 1;
    transform: none;
    transition: opacity .35s ease, transform .35s ease;
    transition-delay: var(--delay, 0ms);
}
.cotent-text {
    font-size: 14px;
    padding-bottom: 10px;
    padding-top: 10px;
}
.pb-4{
    padding-bottom: 0 !important;
}
.portfolio-empty { display:block; padding:24px 0; text-align:center; color:#333; }
.category-box{
    border: solid 1px #003A6C;
    border-radius: 16px;
    width: 17%;
    text-align: center;
    color: #003A6C;
    font-size: 14px;
    margin-bottom: 10px;
}

.store-search-box{
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    box-shadow: 0px 16px 30px #00000029;
    border-radius: 99px;
    padding: 15px;
    padding-left: 20px;
    padding-right: 20px;
    width: 60%;
    color: #7A7A7A;
    font-weight: 200;
}

.store-search-box img{
    cursor: pointer;
    width: 25px;
    height: 25px;
}