#index_wrap { display: flex; flex-wrap:wrap;}
.box-image { width: 60%; order: 1; }    /* 왼쪽 상단 */
.box-ranking { width: 40%; order: 2; padding:0 20px; }  /* 오른쪽 상단 */
.box-designer { width: 100%; order: 3; } /* PC에선 맨 아래 가로로 꽉 차게 */

.box-designer { margin-top:36px;  }
.box-designer h3 { text-align: center; font-size: 18px;font-weight: 700;padding: 0 0 16px;}
.box-designer .rank { font-size:14px; color:#6b7280; font-weight: 600;}


.designer-wrap { display: flex;align-items: center;justify-content: center; gap:10px; }
.designer-wrap img { border-radius: 100%; border:1px solid #ddd; padding:5px;}
.designer-wrap p { font-size:16px; font-weight: 700;}

.ranking-wrap { height:calc(100% - 50px); position: relative; padding:0 10px; display:flex; flex-direction: column;}
.ranking-wrap .bottom { margin-top:auto; align-self: center; background:#60a5fa; padding:6px 12px; margin-bottom:10px; border-radius: 12px; color:#fff; }


.designer-highlight-section {
background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 50%, #f1f3f5 100%);
border-radius: 24px;
padding: 20px;

}

/* 우측 카테고리 리스트 스타일링 */
.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 10px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    cursor: pointer;
    color: #555;
    font-size: 0.95rem;
}

.category-item:last-child {
    border-bottom: none;
}

.category-item:hover {
    background-color: #fcfcfc;
    color: #d4af37; /* 골드 포인트 컬러 */
    padding-left: 15px;
}

.category-item .arrow {
    font-size: 1rem;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.category-item:hover .arrow {
    opacity: 1;
}





/* rank_list 관련 */

.rank_list { position: relative; border-radius:16px; margin-bottom:0px;}
.rank_list .text_wrap { margin-top:0px; padding:0 20px;}
.rank_list .btn_wrap a { padding:7px 10px;}

.rank_list .btn_good .like-btn { position: absolute; top:10px; right:10px; z-index:1; }

.rank_list .subject a { font-size:18px; margin-bottom:6px; display:block; font-weight:700;}
.rank_list .addr {color: #a8a29e;font-size: 14px; display:flex;align-items:center;}
.rank_list .rank-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    padding: 6px 14px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 12px;
    color: white;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.price { font-size:20px; font-weight:600; color:#111111;}

.price_wrap {
    padding: 10px 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.like-btn {
    flex-shrink: 0;
    text-align: right;
    position: absolute;
    top: -44px;
    right: 0;
    border: 1px solid #ffccd5;
    background: #fff;
}

.rank-1 {
    border: 2px solid #ffd700 !important;
    background: linear-gradient(to bottom, #fffdf0, #ffffff);
}

.rank-item.rank-1 { 
    width: 100%; 
    border: 3px solid #fbbf24; /* 골드 */
    box-shadow: 0 20px 25px -5px rgba(251, 191, 36, 0.15);
}
.rank-item.rank-2 { 
    width: 88%; 
    border: 3px solid #94a3b8; /* 실버/그레이 강화 */
    box-shadow: 0 15px 20px -5px rgba(148, 163, 184, 0.2);
}
.rank-item.rank-3 { 
    width: 76%; 
    border: 2px solid #f97316; /* 브론즈/오렌지 */
    box-shadow: 0 10px 15px -5px rgba(249, 115, 22, 0.15);
}

.rank-1 .rank-badge { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.rank-2 .rank-badge { background: linear-gradient(135deg, #94a3b8, #64748b); }
.rank-3 .rank-badge { background: linear-gradient(135deg, #f97316, #ea580c); }

.list_text { text-align: right; font-size:16px; background-color: #ddd; padding:10px 16px; display: inline-block; margin-bottom:30px; color:#fff;} 

.rank_list img { border-radius:16px 16px 0 0; overflow:hidden;}
.btn_all_wrap {
    display: flex;
    gap: 10px;
    justify-content: end;
    flex-direction: column;
}
.btn_all_wrap .btn_wrap {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.custom-slider .swiper-slide {
    opacity: 0 !important; /* 기본적으로 숨김 */
    transition: opacity 0.6s ease-in-out; /* 부드러운 전환 속도 */
}

/* 활성화된 슬라이드만 보이게 */
.custom-slider .swiper-slide-active {
    opacity: 1 !important;
}

.custom-slider img {
    width: 100%;
    /* height: 600px;  */
    object-fit: cover;
}

#index_wrap h2 { font-size:18px; font-weight:600; padding: 0 0 20px 0;}


@media (max-width: 500px) {
.main-container {
    flex-direction: column; /* 세로 한 줄로 나열 */
  }

  .box-image { 
    width:100%;
    order: 1; /* 1번: 이미지 */
  }

  .box-designer { 
    order: 2; /* 2번: 디자이너 정보를 랭킹보다 위로 올림! */
  }

  .box-ranking { 
    width:100%;
    margin-top:30px;
    order: 3; /* 3번: 랭킹 메뉴를 맨 아래로 보냄 */
  }    
  .box-ranking .bottom { width:100%; text-align: center;}
}