/* ====================================
공통 및 데스크톱 스타일 (1201px 이상)
==================================== */
.jura_container {
    /* 1080px 너비 고정 */
    width: 1080px; 
    /* 가운데 정렬 */
    margin: 0 auto; 
    
    display: flex;
    /* sticky 작동을 위해 height: 100vh 를 제거하고 min-height: 100vh 로 변경 */
    /*min-height: 100vh; */
    position: relative;

    /* 좌측 메뉴와 우측 박스 간격을 최대로 벌려주는 핵심 속성 */
    justify-content: space-between; 
    
    /* 메뉴가 상단에 붙도록 align-items도 변경 */
    align-items: flex-start;
}

.jura_box_title { display: none; }

/* --- 색상 정의 --- */
.jura_beans_active .jura_single_box_desktop { background: linear-gradient(135deg, #ff6b6b, #ff8e8e); }
.jura_coldbrew_active .jura_single_box_desktop { background: linear-gradient(135deg, #4fc3f7, #81d4fa); }
.jura_dripbag_active .jura_single_box_desktop { background: linear-gradient(135deg, #9c27b0, #ba68c8); }

/* 단일 버튼 색상 정의 
.jura_beans_active .jura_link_button { background-color: #8B4513; color: #fff; }
.jura_coldbrew_active .jura_link_button { background-color: #FFD700; color: #333; }
.jura_dripbag_active .jura_link_button { background-color: #228B22; color: #fff; }*/

/* --- 데스크톱 메뉴/헤더 스타일 (1201px 이상) --- */
.jura_left_menu { 
    width: 300px; 
    /*background: linear-gradient(135deg, #f8f6f0, #ebe5d6); */
    
    /* 메뉴 상단 여백 (top: 0 부터 30px 아래에서 시작) */
    /*padding: 30px 0 0 30px; */
    /* 메뉴 배경이 스크롤 시에도 화면 높이를 유지 */
    /*min-height: 100vh;*/
    
    z-index: 5; 
    
    /* 상단 고정을 위한 핵심 속성 */
    position: sticky; /* 스크롤 시 고정 */
    top: 0;           /* 뷰포트 상단 0px 지점에 달라붙음 */
}
.jura_menu_item { 
    cursor: pointer; 
    padding: 20px 0 15px 0; 
    position: relative; 
    transition: all 0.3s ease, padding-bottom 0.4s ease;
    overflow: hidden; 
}
.jura_menu_item:hover, .jura_menu_item.jura_active { 
    transform: translateX(10px); 
    padding-bottom: 45px; 
}

/* 텍스트 스타일 */
.jura_text_container { position: relative; height: 80px; } 
.jura_korean_text {/* font-size: 1.8rem; font-weight: bold; color: #8b7355; */position: absolute; top: 0; left: 0; opacity: 1; transition: opacity 0.3s ease; }
.jura_english_text {/* font-size: 1.6rem; font-weight: 600; color: #6d5a47; */position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease; }
.jura_description {/* font-size: 0.9rem; color: #9a8570; line-height: 1.4; */position: absolute; top: 50px; left: 5px; opacity: 0; transition: opacity 0.3s ease 0.1s; max-width: 250px; }
.jura_menu_item:hover .jura_korean_text, .jura_menu_item.jura_active .jura_korean_text { opacity: 0; }
.jura_menu_item:hover .jura_english_text, .jura_menu_item.jura_active .jura_english_text, 
.jura_menu_item:hover .jura_description, .jura_menu_item.jura_active .jura_description { opacity: 1; }

/* --- 데스크톱 단일 박스 스타일 (1201px 이상) --- */
.jura_right_boxes { 
    flex: 1; 
    position: relative; 
    display: flex; 
    /*justify-content: center; */
    justify-content: end;
    align-items: center; 
}

/* 모바일용 박스는 데스크톱에서 숨김 */
.jura_box_1, .jura_box_2, .jura_box_3 { display: none; } 

.jura_single_box_desktop {
    position: relative; 
    /* 고정된 너비/높이 유지 (원한다면 70vw/80vh로 복원 가능) */
    width: 580px; 
    height: 485px;
    /* width: 70vw; max-width: 800px; height: 80vh; max-height: 600px; */ 
    transition: background 0.6s ease; 
    overflow: hidden; 
    border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: block; 
    position: relative; /* 버튼 컨테이너의 기준점 설정 */
    cursor: pointer; 
}
.jura_single_box_desktop .jura_image {
    width: 100%; height: 100%; object-fit: cover; opacity: 0; 
    transition: opacity 0.6s ease, transform 0.6s ease; position: absolute; top: 0; left: 0; transform: scale(1.0);
}
.jura_beans_active .jura_single_box_desktop .jura_image_beans,
.jura_coldbrew_active .jura_single_box_desktop .jura_image_coldbrew,
.jura_dripbag_active .jura_single_box_desktop .jura_image_dripbag { opacity: 1; transform: scale(1.03); }

/* --- 데스크톱 버튼 스타일 --- */
/* --- 데스크톱 버튼 스타일 --- */
/*
.jura_button_container { 
    position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); 
    text-align: center; width: 100%; z-index: 30; display: block; 
}
.jura_link_button {
    display: inline-block; padding: 12px 25px; font-size: 1.1rem;
    font-weight: bold; border: none; border-radius: 50px;
    cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); white-space: nowrap; margin-top: 10px;
}
*/
.jura_button_container { 
    position: absolute; bottom: -50px; right: 0; 
}
.jura_link_button {
    cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap; margin-top: 10px;
}
.jura_button_container button {background: none; border: none;}

/* ------------------------------------
    모바일 최적화 (1200px 이하)
    ------------------------------------ */
@media (max-width: 1200px) {
    /* 1. 데스크톱 요소 강제 숨김 */
    /* 버튼 컨테이너 숨김 */
    .jura_left_menu, .jura_button_container { 
        display: none !important;
    }
    .jura_single_box_desktop {
        display: none; 
    }

    /* 2. 컨테이너 및 박스 설정 */
    .jura_container { 
        display: block; 
        /*min-height: 100vh; */
        height: auto; 
        
        /* 반응형 복구를 위한 핵심 수정 */
        width: 100%; /* 뷰포트 너비를 따르도록 설정 */
        margin: 0; /* 중앙 정렬 해제 및 마진 초기화 */
    }
    .jura_right_boxes {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%; padding: 20px; gap: 15px; flex: none; 
        justify-content: initial; align-items: initial;
    }

    /* 3. 모바일 박스 스타일 */
    .jura_box_1, .jura_box_2, .jura_box_3 {
        position: relative; width: 100%; height: 0; padding-bottom: 70%; 
        margin: 0; background: #f0f0f0; display: block; overflow: hidden; 
        border-radius: 8px; cursor: pointer; 
    }
    .jura_box_1, .jura_box_2, .jura_box_3 {
        display: block;
    }

    /* 4. 이미지 및 제목 스타일 */
    .jura_box_1 .jura_image, .jura_box_2 .jura_image, .jura_box_3 .jura_image {
        width: 100%; height: 100%; object-fit: cover; opacity: 1; 
        position: absolute; top: 0; left: 0; transform: scale(1.0);
        transition: transform 0.3s ease;
    }
    .jura_box:hover .jura_image { transform: scale(1.1); }
    .jura_box_title {
        display: block !important; position: absolute; bottom: 0; left: 0; width: 100%;
        padding: 10px 0; background: rgba(0, 0, 0, 0.6);
        color: #fff; text-align: center; font-size: 1.1rem;
        font-weight: bold; z-index: 2; 
    }
}

/* ====================================
    521px ~ 1200px : 가로 3열 레이아웃 
    ==================================== */
@media (min-width: 521px) and (max-width: 1200px) {
    .jura_right_boxes { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .jura_box_1, .jura_box_2, .jura_box_3 { padding-bottom: 100%; }
    .jura_box_title { font-size: 1rem; }
}


/* ====================================
    520px 이하 화면 (2열 그리드) 
    ==================================== */
@media (max-width: 520px) { 
    .jura_right_boxes { 
        grid-template-columns: repeat(2, 1fr); 
        padding: 15px; 
        gap: 15px; 
    }
    
    .jura_box_1, .jura_box_2, .jura_box_3 { 
        padding-bottom: 100%; 
    }
    
    .jura_box_title { font-size: 0.9rem; padding: 7px 0; }
}