/* 1. 기본 컨테이너 및 아이템 (1920 기준, 1920 이상에서도 레이아웃 유지) */
.product_container { display: flex; width: 100%; margin: 0 auto; height: 100vh; overflow: hidden; background-color: #000; box-sizing: border-box; }
.product_item { position: relative; flex: 1; background-size: cover; background-position: center; transition: flex 0.7s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; overflow: hidden; }
.item01 { background-image: url('../img/prod01.jpg'); }
.item02 { background-image: url('../img/prod02.jpg'); }
.item03 { background-image: url('../img/prod03.jpg'); }
.item04 { background-image: url('../img/prod04.jpg'); }
.product_item:hover { flex: 1.5; }
/* 2. 오버레이 */
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: background 0.5s ease; }
/* 3. 중앙 텍스트 박스 위치 */
.txt_box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 3; display: flex; justify-content: center; align-items: center; transition: top 0.5s ease-in-out; }
.product_item:hover .txt_box { top: 50%; }
/* 4. 반투명 둥근 박스 (시안 수치 반영) */
.desc_box { width: 500px; height: 470px; background: rgba(0, 0, 0, 0); border-radius: 50px; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); text-align: center; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; }
.product_item:hover .desc_box { height: 670px; background: rgba(0, 0, 0, 0.4); padding: 0 40px; }
/* 5. 카테고리 (글자 크기에 맞춘 가변 테두리) */
.cate { display: inline-flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto 30px auto; padding: 20px 30px; border: 1px solid rgba(255,255,255,0.6); border-radius: 100px; font-size: 20px; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; }
.desc_box h2 { font-size: 46px; font-weight: 600; margin: 0; line-height: 1.1; transition: all 0.5s ease; word-break: keep-all; }
.product_item:hover .desc_box h2 { font-size: 58px; margin-bottom: 60px; }
/* 설명글 및 버튼 */
.desc_box p { max-height: 0; opacity: 0; font-size: 17px; line-height: 1.6; margin-bottom: 0; transition: all 0.5s ease; word-break: keep-all; }
.product_item:hover .desc_box p { max-height: 200px; opacity: 1; margin-bottom: 50px; }
/* 6. 주황색 플러스 버튼 */
.btn_orange { width: 75px; height: 75px; background: #FF6B00; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 60px; font-weight: 100; opacity: 0; transform: translateY(30px); transition: all 0.6s ease, background 0.3s ease; }
.product_item:hover .btn_orange { opacity: 1; transform: translateY(0); }
.btn_orange:hover { background: #ff8533; transform: scale(1.05); /* 회전 대신 살짝 커지는 효과 */
}
/* ========== 반응형 ========== */

/* --- 1200px --- */
@media (max-width:1200px) {
    .desc_box { width: 380px; height: 400px; }
    .product_item:hover .desc_box { height: 560px; }
    .cate { padding: 14px 22px; font-size: 16px; margin-bottom: 24px; }
    .desc_box h2 { font-size: 36px; }
    .product_item:hover .desc_box h2 { font-size: 44px; margin-bottom: 40px; }
    .desc_box p { font-size: 15px; }
    .product_item:hover .desc_box p { margin-bottom: 36px; }
    .btn_orange { width: 60px; height: 60px; font-size: 48px; }
}
/* --- 992px --- */
@media (max-width:992px) {
    .desc_box { width: 300px; height: 350px; }
    .product_item:hover .desc_box { height: 480px; }
    .cate { padding: 12px 18px; font-size: 14px; margin-bottom: 20px; }
    .desc_box h2 { font-size: 28px; }
    .product_item:hover .desc_box h2 { font-size: 34px; margin-bottom: 30px; }
    .desc_box p { font-size: 14px; }
    .product_item:hover .desc_box p { margin-bottom: 30px; }
    .btn_orange { width: 50px; height: 50px; font-size: 40px; }
}
/* --- 768px: 2열 2행 그리드 전환 --- */
@media (max-width:768px) {
    .product_container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 50vh 50vh; height: 100vh; }
    .product_item { flex: none; transition: none; }
    .product_item:hover { flex: none; }
    .desc_box { width: 90%; max-width: 320px; height: auto; padding: 30px 20px; background: rgba(0, 0, 0, 0.4); border-radius: 24px; }
    .product_item:hover .desc_box { height: auto; width:90% !important; padding:30px 20px;}
    .cate { padding: 10px 16px; font-size: 14px; margin-bottom: 14px; }
    .desc_box h2 { font-size: 24px; margin-bottom:20px;}
    .product_item:hover .desc_box h2 { font-size: 24px !important; margin-bottom: 0; }
    .desc_box p { max-height: 200px; opacity: 1; font-size: 16px; margin-bottom: 20px; }
    .product_item:hover .desc_box p { margin-bottom: 20px; }
    .btn_orange { width: 44px; height: 44px; font-size: 32px; opacity: 1; transform: translateY(0); }
    .product_item:hover .btn_orange { transform: translateY(0); }

}
/* --- 480px --- */
@media (max-width:480px) {
    .product_container { display: flex; flex-direction: column; height: auto; grid-template-rows: none; }
    .product_item { height: 60vh; }
    .desc_box { width: 90%; padding: 24px 16px; border-radius: 20px; }
    .cate { padding: 8px 12px; font-size: 14px; margin-bottom: 10px; }
    .desc_box h2 { font-size: 20px;}
    .product_item:hover .desc_box{padding:24px 16px;}
    .product_item:hover .desc_box h2 { font-size: 20px !important; margin-bottom: 20px;}
    .desc_box p { font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
    .desc_box p br{display:none;}
    .product_item:hover .desc_box p { margin-bottom: 16px; }
    .btn_orange { width: 38px; height: 38px; font-size: 26px; }
}