/* 마켓 컨테이너 기본 스타일 */
.shop-container { width: 100%; margin: 0 auto 60px; font-family: 'Lexend', 'Pretendard', sans-serif; }

/* 히어로 영역 */
.market-hero { 
    position: relative; 
    height: 480px; 
    width: 100%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: #fff; 
    overflow: hidden; 
    margin-bottom: 60px;
    background: #000;
}
.hero-bg { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); 
    background-size: cover; 
    background-position: center; 
    filter: brightness(0.6); 
    transform: scale(1.1);
    animation: hero-zoom 20s infinite alternate;
}
@keyframes hero-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}
.hero-content { position: relative; z-index: 10; max-width: 800px; padding: 0 20px; }
.hero-title { font-size: 72px; font-weight: 800; margin-bottom: 15px; letter-spacing: 4px; line-height: 1; }
.hero-desc { font-size: 20px; font-weight: 300; opacity: 0.9; margin-bottom: 40px; }

/* 카테고리 네비게이션 (1뎁스) */
.market-category-nav { margin: 0 auto; display: inline-block; }
.nav-depth1 { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; position: relative; }
.nav-depth1 > li { position: relative; }
.nav-depth1 > li > a { 
    display: block; 
    padding: 12px 28px; 
    border-radius: 30px; 
    background: rgba(255, 255, 255, 0.1); 
    color: rgba(255, 255, 255, 0.8); 
    font-size: 15px; 
    font-weight: 500; 
    text-decoration: none; 
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}
.nav-depth1 > li > a:hover,
.nav-depth1 > li.active > a { 
    background: #fff; 
    color: #000 !important; 
    border-color: #fff; 
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* 카테고리 네비게이션 (2뎁스 - 드롭다운) */
.nav-depth2 { 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    transform: translateX(-50%) translateY(10px); 
    background: #fff; 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    padding: 10px 0; 
    min-width: 160px; 
    list-style: none; 
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s ease; 
    z-index: 100;
}
.nav-depth1 > li.has-child:hover .nav-depth2 { 
    opacity: 1; 
    visibility: visible; 
    transform: translateX(-50%) translateY(5px); 
}
.nav-depth2::before { /* 말풍선 화살표 */
    content: ''; 
    position: absolute; 
    top: -6px; 
    left: 50%; 
    transform: translateX(-50%) rotate(45deg); 
    width: 12px; 
    height: 12px; 
    background: #fff; 
}
.nav-depth2 > li > a { 
    display: block; 
    padding: 8px 20px; 
    color: #666 !important; 
    font-size: 14px; 
    text-decoration: none; 
    text-align: center;
    transition: background 0.2s, color 0.2s;
}
.nav-depth2 > li > a:hover,
.nav-depth2 > li.active > a { 
    color: #222 !important; 
    font-weight: 600; 
    background: #f8f9fa; 
}

/* 포트폴리오(마켓) 그리드 */
.portfolio-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
    gap: 25px; 
    margin: 0 auto 60px; 
    padding: 0 40px;
    max-width: 1440px;
}
.portfolio-card { 
    background: #fff; 
    border-radius: 16px; 
    /* overflow: hidden; 제거: 라이선스 드롭다운이 카드 밖으로 보일 수 있도록 함 */
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
    border: 1px solid rgba(0,0,0,0.04);
}
.portfolio-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); 
}
.thumb-link { display: block; position: relative; overflow: hidden; border-radius: 16px 16px 0 0; }
.thumb-wrap { position: relative; width: 100%; aspect-ratio: 1/1; background: #f4f5f7; overflow: hidden; }
.thumb-wrap .thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.portfolio-card:hover .thumb { transform: scale(1.05); }

/* No Image 스타일 */
.no-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.no-thumb-inner { text-align: center; color: #a0a0a0; }
.no-thumb-inner svg { display: block; margin: 0 auto 8px; opacity: 0.6; }
.no-thumb-inner span { font-size: 12px; font-weight: 600; letter-spacing: 1px; }

/* 상품 정보 영역 */
.item-info { padding: 20px; }
.info-top { margin-bottom: 12px; }
.category { 
    display: inline-block; 
    padding: 4px 10px; 
    border-radius: 6px; 
    font-size: 11px; 
    font-weight: 600; 
    letter-spacing: 0.5px;
}
.category.badge-primary { background: #eef2ff; color: #4f46e5; border: 1px solid #e0e7ff; }

.title { margin: 0 0 12px; font-size: 16px; line-height: 1.5; font-weight: 700; word-break: keep-all; }
.title a { color: #111; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.title a:hover { color: #4f46e5; }

/* 가격 영역 및 라이선스 롤오버 */
.price-wrap { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 16px; border-top: 1px solid #f0f0f0; position: relative; }
.price-current { font-size: 16px; font-weight: 700; color: #111; }
.price-current.is-free { color: var(--primary-color); }
.price-original { font-size: 13px; color: #999; text-decoration: line-through; }
.price-discount { font-size: 13px; font-weight: 700; color: #ef4444; }

.license-dropdown-wrap { position: relative; display: flex; align-items: center; cursor: pointer; }
.dropdown-icon { color: #888; transition: color 0.2s ease; }
.license-dropdown-wrap:hover .dropdown-icon { color: #111; }

.license-dropdown {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 10;
    padding: 8px 0;
}
.license-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}
.license-dropdown-wrap:hover .license-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}
.license-dropdown ul { list-style: none; margin: 0; padding: 0; }
.license-dropdown li { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 8px 16px; 
    font-size: 14px;
}
.license-dropdown li:not(:last-child) { border-bottom: 1px solid #f5f5f5; }
.license-name { color: #666; }
.license-price { font-weight: 700; color: #111; }
.license-price.is-free { color: var(--primary-color); }

/* 데이터 없음 */
.no-data { grid-column: 1 / -1; text-align: center; padding: 100px 0; color: #888; font-size: 15px; background: #f9fafb; border-radius: 16px; }

@media screen and (max-width: 1024px) {
    .market-hero { height: 320px; }
    .hero-title { font-size: 48px; }
    .hero-desc { font-size: 16px; }
    .portfolio-grid { padding: 0 20px; gap: 15px; }
}

@media screen and (max-width: 768px) {
    .market-hero { height: 240px; margin-bottom: 30px; }
    .hero-title { font-size: 36px; letter-spacing: 2px; }
    .hero-desc { font-size: 14px; margin-bottom: 20px; }
    
    .nav-depth1 > li > a { padding: 8px 18px; font-size: 13px; }
    
    .portfolio-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; 
        padding: 0 15px; 
    }
    .item-info { padding: 12px; }
    .info-top { margin-bottom: 8px; }
    .category { padding: 2px 6px; font-size: 10px; }
    .title { font-size: 14px; margin-bottom: 8px; height: 3em; }
    .price-wrap { margin-top: 8px; padding-top: 12px; }
    .price-current { font-size: 14px; }
    .license-dropdown { min-width: 160px; }
}

@media screen and (max-width: 480px) {
    .portfolio-grid { gap: 8px; padding: 0 10px; }
    .item-info { padding: 10px; }
    .title { font-size: 13px; }
    .price-current { font-size: 13px; }
}