/*3dprinting-section*/
@media screen and (max-width: 768px) {
    .printingView-square {
        width: 87% !important; /* 모바일 화면에서 가로 크기를 화면의 90%로 조정 */
        height:730px !important;
    }
    .printing-table-container {
        /* border: 1px solid red; */
        font-size: 18px;
        margin-top: 0;
        margin-left:-104px;
    }
    .printing-upload-section {
        order: -1; /* 테이블보다 위로 배치 */
        width: 100%; /* 부모 컨테이너에 맞춤 */
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        margin-left: 127px;


    }
    .printing-table-cont-div {
        display: flex;
        flex-direction: column; /* 세로 정렬 */
        align-items: center; /* 가운데 정렬 */
    }
    .printing-upload-box {
        width: 90%; /* 모바일 화면에서 가로 크기 조정 */
        max-width: 300px; /* 최대 너비 설정 */
    }

    .printing-order-table {
        width: 100% !important; /* 테이블도 부모 컨테이너에 맞추기 */
        margin-left: 154px;
    }
    /* 🔹 버튼 크기 조정 */
    .printing-tech-button,
    .printing-material-button,
    .printing-color-button,
    .printing-time-button,
    .printing-surface-button {
        font-size: 10px !important;
        padding: 4px 8px !important;
        border-radius: 15px !important;
    }

    .printing-number-input {
        width: 50px !important;
        font-size: 14px !important;
    }

    .printing-upload-label {
        font-size: 12px; /* 업로드 버튼 폰트 크기 축소 */
        padding: 8px 16px; /* 버튼 크기 조정 */
    }
    .printing-order-button {
        width: 50% !important;
        display: inline-block !important;
        overflow: hidden; /* 내용이 버튼을 벗어나지 않도록 설정 */
        white-space: nowrap; /* 내용이 줄 바꿈되지 않도록 설정 */
        text-overflow: ellipsis; /* 내용이 버튼을 벗어날 경우 생략 부호로 표시 */
        position: relative; /* 상대 위치 지정 */
    }
    /* 모바일 화면에서 주문하기 버튼 내용 변경 */
    .printing-order-button::after {
        content: '상담'; /* 가상 요소의 내용을 직접 설정 */
        position: absolute; /* 절대 위치 지정 */
        top: 50%; /* 부모 요소의 중앙에 위치시키기 위해 50%로 설정 */
        left: 0;
        width: 100%;
        /* height: 100%; */
        transform: translateY(-50%); /* 부모 요소의 중앙에 텍스트를 배치하기 위해 사용 */
        background-color: #1d5b8d; /* 배경 색상을 버튼과 동일하게 설정하여 텍스트를 가리기 */
        color: #fff; /* 텍스트 숨김 */
        box-shadow: 0px 4px 6px rgba(11, 94, 135, 0.3);
        font-weight: bold;
    }
    .printing-price-container{
        width: 58% ! important;
        margin-left: 50px !important;
    }
    .printing-price-div{
        margin-left: -88px !important;
        margin-top: 6px !important;
        font-size: small !important;
    }
    .printing-price-div2{
        margin-left: -75px !important;
        margin-top: 6px !important;
        font-size: small !important;
    }
    .printing-price-button{
        margin-left: 11px !important;
    }
    .printing-estimate-button{
        margin-left: 11px !important;
    }
    .printing-price-warning{
        white-space: normal !important;
        word-wrap: break-word;
        word-break: keep-all; /* Prevents breaking Korean words awkwardly */
        max-width: 84%; /* Ensure it stays within the screen */
    }
}

.printingView-square{
    border: 10px solid #2b768c;
    /* Set border to 2px solid black */
    width: 800px;
    height: 400px;
    margin: auto;
    margin-top: 30px;
    border-radius: 30px;
    /* Optional: Add border-radius for rounded corners */
    padding: 10px;
    /* Optional: Add padding to create space between the content and the border */
    box-sizing: border-box;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 6.5);
    background-color: rgb(92 154 205 / 50%);
    justify-content: center;
    align-items: center;

}

.printing-table-container {
    /* border: 1px solid red; */
    font-size: 18px;

}
.printing-table-cont-div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /*margin-top: 20px;*/
}

.printing-order-table {
    width: 50%;
    border-collapse: separate;
    border-spacing: 10px;
}
.printing-order-table td:nth-child(2) {
    text-align: left; /* Left align the buttons */
}

.printing-label-cell {
    white-space: nowrap;
    text-align: right;
    padding-right: 10px;
    vertical-align: center;
}

.printing-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.default,
.active {
    background-color: #1d5b8d !important; /* Blue */
    color: white !important;
}

.default:hover,
.active:hover {
    background-color: #14446a !important; /* Darker blue on hover */
}

/* Active state for selected buttons */
.printing-tech-button.active,
.printing-material-button.active,
.printing-color-button.active,
.printing-surface-button.active,
.printing-time-button.active,
.layer-button.active,
.material-button.active {
    color: #fff;
    background-color: #1d5b8d;
}

/* Default selected buttons (before user interaction) */
.printing-tech-button.button-default,
.printing-material-button.button-default,
.printing-color-button.button-default,
.printing-surface-button.button-default,
.printing-time-button.button-default,
.layer-button.button-default,
.material-button.button-default {
    background-color: #1d5b8d;
    color: white;
}

.printing-tech-button, .printing-material-button, .printing-color-button, .printing-surface-button, .printing-time-button {
    padding: 6px 14px;
    border-radius: 20px;
    border: 2px solid #1d5b8d;
    background-color: white;
    font-size: 12px;
    box-shadow: 0px 2px 4px rgb(5 50 65);
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap;
}

.printing-tech-button:hover, .printing-material-button:hover, .printing-color-button:hover, .printing-surface-button:hover, .printing-time-button:hover {
    background-color: #1d5b8d;
    color: white;
}

.printing-number-input{
    width: 60px;
    padding: 5px;
    font-size: 16px;
    text-align: center;
    border: 2px solid #1d5b8d;
    border-radius: 6px;
    box-shadow: 0px 2px 4px rgb(5 50 65);
}

.printing-select-box {
    padding: 6px;
    border: 1px solid #1d5b8d;
    border-radius: 5px;
    font-size: 12px;
}
.printing-upload-section {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 70px;
    /*overflow: visible !important; !* Ensure scrolling isn't blocked *!*/
    /*pointer-events: auto !important; !* Allow touch events *!*/
}



.printing-upload-box {
    border: 2px solid #1d5b8d;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    background-color: rgba(196, 218, 235, 0.6);
    height: 355px;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 44px;
    transition: border 0.1s ease-in-out, background-color 0.1s ease-in-out, transform 0.1s ease-in-out;
}
.printing-upload-box.active {
    border: 3px solid #003366 !important; /* Thicker, darker blue border */
    background-color: rgba(196, 218, 235, 0.7) !important;
    /*background-color: rgba(146, 198, 235, 0.8) !important; !* Slightly darker blue background *!*/
    transform: scale(1.02) translateY(-2px); /* Slight movement effect */
}

/* Hide File Input */
#printing-file-input {
    display: none;
}

/* 커스텀 업로드 버튼 */
.printing-upload-label {
    display: inline-block;
    background-color: #1E73BE; /* 버튼 색상 */
    color: white;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 20px; /* 둥근 모서리 */
    cursor: pointer;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transition: background 0.3s;
}

/* 마우스 호버 효과 */
.printing-upload-label:hover {
    background-color: #1669A8;
}
.printing-viewer {
    width: 300px;
    height: 300px;
    justify-content: center;
    align-items: center;
    margin-top: -62px;


}

/* Image Preview */
.printing-preview-image {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 5px;
}

/* File Info */
#printing-file-info {
    font-size: 16px;
    color: #333;
    margin-top: -57px;
    margin-bottom: -49px;
    text-align: center;
}

/* Upload Button */
.printing-upload-button {
    background-color: #1d5b8d;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    margin-top: 82px;
}

.printing-upload-button:hover {
    background-color: #14446a;
}
.printing-upload-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
}

.printing-price-container{
    border-top: 2px solid #868e96;
    width: 430px;
    display: flex;

}
.printing-price-div{
    margin-left: -164px;
    margin-top: 10px;
    font-size: larger;
    width: 111%;
}
.printing-price-div2{
    margin-left: -43px;
    margin-top: 10px;
    font-size: larger;
}

.printing-price-button{
    color: #fff;
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgb(5 50 65);
    cursor: pointer;
    transition: background-color 0.3s;
    margin-left: 242px;
    margin-right: 5px;
    width: 23%;
    background-color: #f7918e;
}
.printing-estimate-button{
    color: #fff;
    /*border: 2px solid #1d5b8d;*/
    border-radius: 5px;
    /* Add round corners */
    box-shadow: 0px 2px 4px rgb(5 50 65);
    /* Add shadow effect */
    cursor: pointer;
    /* Change cursor to pointer on hover */
    transition: background-color 0.3s;
    /* Add transition for color change */
    margin-left: 242px;
    margin-right: 5px;
    width: 23%;
    background-color: #f7918e;
}
.printing-basic-price{
    margin-left: 10px;
    font-weight: 600;
    font-size: large;
}
.printing-price-warning{
    color: red;
    font-size: 13px;
    margin-top: 20px;
    white-space: nowrap; /* 웹에서는 한 줄 유지 */
    text-align: center;
    padding: 0 10px;
    display: block;
    overflow: hidden;
}




/*printing-modal*/

.printing-myModal {
    display: none;
    /* 모달 초기에는 보이지 않도록 설정 */
    position: fixed;
    /* 화면에 고정 */
    z-index: 9999;/* 모달 창을 가장 위로 올립니다. */
    /* 다른 요소들보다 위에 표시 */
    width: 36%;
    /* 모달의 너비를 설정 */
    height: 60%;
    top: 50%;
    /* 화면의 세로 중앙에 모달을 위치시킵니다. */
    left: 50%;
    /* 화면의 가로 중앙에 모달을 위치시킵니다. */
    transform: translate(-50%, -50%);
    /* 모달을 수평 및 수직으로 정확히 화면의 중앙에 위치시킵니다. */
    background: transparent;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.9);
    font-family: 'Noto Sans KR', sans-serif;

}
@media screen and (max-width: 768px)and (min-width:300px) {
    .printing-myModal {
        width: 98%;
        height: 400px !important;
    }
    .printing-modal-info-span1{

    }
    .close{
    }
    .printing-modal-container{
        margin-top:38px !important;
        margin-left: -30px !important;

    }
    .printing-modal-span2{
        margin-top:-5px !important;
        margin-left: -67px !important;
    }
    .fontMedium{
        font-size:medium;
    }
    .printing-modal-container input{
        margin-left: -82px;
        width:122% !important;
    }
    .printing-modal-order-button {
        margin-left: -54px !important;
        width:100% !important;
    }
    .fontSmall{
        font-size: small;
    }
}

@media screen and (max-width: 300px) {
    .printing-myModal {
        width: 98%;
        height: 300px !important;
    }
    .printing-modal-container{
        margin-top:29px !important;
        margin-left: 10px !important;

    }
    .printing-modal-span2{
        margin-top:-5px !important;
        margin-left: -82px !important;
    }
    .fontMedium{
        font-size:medium;
    }
    .printing-modal-container input{
        margin-left: -82px;
        width:131% !important;
    }
    .printing-modal-order-button {
        margin-left: -48px !important;
        width:100% !important;
    }
    .fontSmall{
        font-size: small;
    }
}

.printing-mymodal-content {

    grid-template-columns: 1fr 2fr auto; /* 3열로 구성 */
    grid-template-rows: auto; /* 행은 자동으로 조절됩니다 */

}

.printing-modal-container {
    display: grid;
    grid-column: 1 / span 2; /* 1열부터 2열까지 스팬 */
    grid-row: 1 / span 2; /* 1행부터 2행까지 스팬 */
    grid-template-columns: 1fr 2fr; /* 2열로 구성 */
    grid-template-rows: repeat(5, auto); /* 2행으로 구성 */
    grid-column-gap: 20px; /* 열 사이의 간격을 10px로 설정 */
    grid-row-gap: 10px;
    margin-left:-30px;
    margin-top:56px;

}
.printing-modal-container input,
.printing-modal-container textarea{
    border: 1px solid #dddddd;
    color: #999999;
    border-radius: 6px;
    box-shadow: 0px 2px 4px rgb(4 50 65);
    width: 71%;
}
.printing-modal-container label{
    align-self: center; /* 세로로 중앙 정렬 */

}
.printing-modal-container button{
    background-color: #1d5b8d;
    /* 배경색을 설정합니다. */
    color: #fff;
    /* 글자색을 설정합니다. */
    border: none;
    /* 테두리를 없앱니다. */
    padding: 10px 20px;
    /* 내부 여백을 조정합니다. */
    border-radius: 20px;
    /* 버튼을 둥글게 만듭니다. */
    box-shadow: 0px 4px 6px rgba(11, 94, 135, 0.3);
    /* 자연스러운 그림자를 추가합니다. */
    cursor: pointer;
    /* 마우스 커서를 포인터로 변경합니다. */
    transition: transform 0.3s, box-shadow 0.3s;
}
.printing-modal-info-span-container{
    margin-left:36px;
    padding: 0px 0px 17px 0px !important;
}

.printing-modal-info{
    text-align: center; /* 텍스트를 가운데 정렬로 설정 */
    font-weight: bold; /* 폰트를 굵게 설정 */
    font-size: 20px; /* 폰트 크기를 조절 */
    margin-top: 30px !important;
    text-align: center;
    /* margin-left: 32px !important; */
    color:#1d5b8d;
    border-bottom: 1px solid #708590; /* 밑줄 선 추가 */
}

.close{

    cursor: pointer;
    color: #1d5b8d !important;
    float: right;
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.printing-modal-order-button:hover {
    transform: translateY(-2px);
    /* 호버 시 버튼을 약간 위로 이동하여 입체감을 표현합니다. */
    box-shadow: 0px 6px 8px rgba(11, 94, 135, 1.3);
    /* 호버 시 그림자를 더 크게 만듭니다. */
}
.printing-modal-order-button:active {
    border: none !important; /* 클릭 시 테두리를 없애고 싶을 때 */
}
.printing-modal-order-button{
    grid-column: 2; /* 2열에 배치 */
    grid-row: 7; /* 3행에 배치 */
    width:50%;
    margin-top: 20px;
    margin-left:7px;



}

.printing-modal-label1 {
    grid-column: 1; /* 1열에 배치 */
    grid-row: 1; /* 1행에 배치 */
    text-align: right; /* 텍스트를 오른쪽 정렬로 설정 */

}
.printing-modal-label2 {
    grid-column: 1; /* 1열에 배치 */
    grid-row: 2; /* 2행에 배치 */
    text-align: right; /* 텍스트를 오른쪽 정렬로 설정 */

}
.printing-modal-label3 {
    grid-column: 1; /* 1열에 배치 */
    grid-row: 3; /* 3행에 배치 */
    text-align: right; /* 텍스트를 오른쪽 정렬로 설정 */

}
.printing-modal-label4{
    grid-column: 1; /* 1열에 배치 */
    grid-row: 4; /* 3행에 배치 */
    text-align: right; /* 텍스트를 오른쪽 정렬로 설정 */
}
.printing-modal-label5 {
    grid-column: 1; /* 1열에 배치 */
    grid-row: 5; /* 4행에 배치 */
    text-align: right; /* 텍스트를 오른쪽 정렬로 설정 */

}

input:focus::placeholder {
    color: transparent; /* 입력란에 포커스가 있을 때 placeholder 텍스트를 투명하게 만듭니다. */
}

.printing-modal-input1{
    grid-column: 2; /* 2열에 배치 */
    grid-row: 1; /* 1행에 배치 */


}
.printing-modal-input2{
    grid-column: 2; /* 2열에 배치 */
    grid-row: 2; /* 2행에 배치 */


}
.printing-modal-input3{
    grid-column: 2; /* 2열에 배치 */
    grid-row: 3; /* 3행에 배치 */

}
.printing-modal-input4{
    grid-column: 2; /* 2열에 배치 */
    grid-row: 4; /* 4행에 배치 */

}
.printing-modal-textArea{
    grid-column: 2; /* 2열에 배치 */
    grid-row: 5; /* 4행에 배치 */

}

.printing-modal-span2{
    grid-column: 2; /* 2열에 배치 */
    grid-row: 6; /* 5행에 배치 */
    text-align: left; /* 텍스트를 오른쪽 정렬로 설정 */
    margin-top:30px;
    /*margin-left: 24px;*/
    font-weight: 400;
    color: #ff0000;
}

.printing-order-button {
    background-color: #1d5b8d;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0px 4px 6px rgba(11, 94, 135, 0.3);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-top: 15px;
    width: 15%;
    display: inline-block;
}