body {
    font-family      : Arial, sans-serif;
    background-color : #f9f9f9;
    margin           : 0;
    padding          : 0;
}
.container {
    position         : relative;
    max-width        : 600px;
    margin           : 20px auto;
    padding          : 20px 20px 80px 20px;
    background-color : #fff;
    border-radius    : 8px;
    box-shadow       : 0 0 10px rgba(0, 0, 0, 0.1);
}
.logo {
    text-align    : center;
    margin-top    : 20px;
    margin-bottom : 20px;
}
.logo img {
    max-width : 200px; /* 이미지를 더 크게 만듭니다 */
    width     : 100%;
    height    : auto;
}
h1 {
    text-align    : center;
    margin-bottom : 20px;
}
h2 {
    text-align    : start;
    margin-top    : 40px;
    margin-bottom : 20px;
}
h3 {
    text-align    : start;
    margin-bottom : 20px;
}
form {
    display        : flex;
    flex-direction : column;
}
.form-group {
    margin-bottom : 15px;
}
.form-group label {
    display       : block;
    margin-bottom : 5px;
}
.form-group input, .form-group select {
    width         : 100%;
    padding       : 10px;
    box-sizing    : border-box;
    border        : 1px solid #ccc;
    border-radius : 4px;
}
.form-text {
    display: block;
    margin-top: 5px;
    font-size: 0.633em; /* 작은 글씨 크기 */
    color: #6c757d; /* 회색 글씨 색상 */
  }
form#final_confirm button {
    padding        : 10px;
    box-sizing     : border-box;
    border         : 1px solid #ccc;
    border-radius  : 4px;
    color          : white;
    border         : none;
    cursor         : pointer;
    font-size      : 16px;
    font-weight    : bold;
    text-transform : uppercase;
    transition     : background-color 0.3s ease;
}
form#final_confirm button[type='submit'] { background-color : #000000}
form#final_confirm button[type='submit_2'] { background-color : #C8A49C}
form#final_confirm button[type='submit_3'] { background-color : #E3170D}
form#final_confirm button:first-child { background-color : #797979}
form#orderForm button[type='submit'] {
    width            : 100%;
    padding          : 10px;
    box-sizing       : border-box;
    border           : 1px solid #ccc;
    border-radius    : 4px;
    background-color : #000000;
    color            : white;
    border           : none;
    cursor           : pointer;
    font-size        : 16px;
    font-weight      : bold;
    text-transform   : uppercase;
    transition       : background-color 0.3s ease;
}
form#orderForm button[type='submit_2'] {
  width            : 100%;
  padding          : 10px;
  box-sizing       : border-box;
  border           : 1px solid #ccc;
  border-radius    : 4px;
  background-color : #C8A49C;
  color            : white;
  border           : none;
  cursor           : pointer;
  font-size        : 16px;
  font-weight      : bold;
  text-transform   : uppercase;
  transition       : background-color 0.3s ease;
}
form#orderForm button[type='submit_3'] {
  width            : 100%;
  padding          : 10px;
  box-sizing       : border-box;
  border           : 1px solid #ccc;
  border-radius    : 4px;
  background-color : #E3170D;
  color            : white;
  border           : none;
  cursor           : pointer;
  font-size        : 16px;
  font-weight      : bold;
  text-transform   : uppercase;
  transition       : background-color 0.3s ease;
}
form button[type='submit']:hover {
    background-color : #218838;
}
.finish_order {
    background-color : #000000;
    width            : 100%;
    padding          : 10px;
    box-sizing       : border-box;
    border           : 1px solid #ccc;
    border-radius    : 4px;    
    color            : white;
    border           : none;
    cursor           : pointer;
    font-size        : 16px;
    font-weight      : bold;
    text-transform   : uppercase;
    transition       : background-color 0.3s ease;
}
.finish_order2 {
    background-color : #C8A49C;
    width            : 100%;
    padding          : 10px;
    box-sizing       : border-box;
    border           : 1px solid #ccc;
    border-radius    : 4px;    
    color            : white;
    border           : none;
    cursor           : pointer;
    font-size        : 16px;
    font-weight      : bold;
    text-transform   : uppercase;
    transition       : background-color 0.3s ease;
}
.finish_order3 {
    background-color : #E3170D;
    width            : 100%;
    padding          : 10px;
    box-sizing       : border-box;
    border           : 1px solid #ccc;
    border-radius    : 4px;    
    color            : white;
    border           : none;
    cursor           : pointer;
    font-size        : 16px;
    font-weight      : bold;
    text-transform   : uppercase;
    transition       : background-color 0.3s ease;
}
/* 가로 스크롤 스타일 */
.product-selection-container {
    overflow-x  : auto;
    white-space : nowrap;
    /* margin-bottom: 20px; */
}
.product-selection {
    /*display: inline-flex;*/
    /*flex-wrap: nowrap;*/
}
.product-option {
    flex        : 0 0 auto;
    margin      : 5px;
    box-sizing  : border-box;
    display     : inline-block;
    white-space : normal;
    width       : 100%; /* 상자의 너비를 원하는 크기로 조정 */
    height      : 200px; /* 상자의 높이를 원하는 크기로 조정 */
}
.product-option input {
    display : none;
}
.product-option label {
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    justify-content  : center;
    padding          : 1px;
    text-align       : center;
    border           : 1px solid #ccc;
    border-radius    : 4px;
    background-color : #fff;
    cursor           : pointer;
    transition       : background-color 0.3s ease, border-color 0.3s ease;
    width            : 100%;
    height           : 100%;
    box-sizing       : border-box;
}
.product-option label img {
    max-width     : 100px; /* 이미지 크기를 조정 */
    max-height    : 100px; /* 이미지 크기를 조정 */
    margin-bottom : 10px; /* 이미지와 텍스트 간의 간격 */
}
.product-option input:checked + label {
    border      : 2px solid #242525;
    font-weight : 700;
}
#backButton {
    position         : absolute;
    margin-left      : 5px;
    margin-bottom    : 10px;
    padding          : 10px 10px;
    background-color : #f35f6e;
    color            : white;
    border           : none;
    border-radius    : 4px;
    cursor           : pointer;
    z-index          : 99;
}
#backButton:hover {
    background-color : #f35f6e;
}
.confirm {
    position  : fixed;
    bottom    : 0;
    left      : calc(50% - 300px);
    width     : 100%;
    height    : 80px;
    max-width : 600px;
    z-index   : 99;
}
.btn-group {
    display         : flex;
    margin-top      : 30px;
    justify-content : space-between;
}
.btn-group button:first-child {
    flex         : 30% 0 0;
    margin-right : 2px;
}
.btn-group button:last-child {
    flex : 70% 0 0;
}
/* 반응형 디자인을 위한 미디어 쿼리 */
@media (max-width : 200px) {
    .btn-group {
        display : block;
    }
    .btn-group button {
        width : 100%;
    }
}
@media (max-width : 600px) {
    .container {
        width   : 90%;
        margin  : 10px auto;
        padding : 10px 10px 80px 10px;
    }
    .confirm {
        left  : 0;
        width : 100%;
    }
    h1 {
        font-size : 1.5em;
    }
    .form-group input,
    .form-group select,
    form button[type='submit'] {
        font-size : 14px;
        padding   : 8px;
    }
    .product-option {
        flex : 1 1 calc(50% - 10px);
    }
    #backButton {
        padding   : 8px 16px;
        font-size : 14px;
    }
}
/* Sub Item Selection 스타일 */
.sub-item-selection-container {
    overflow-x  : auto;
    white-space : nowrap;
}
.sub-item-selection {
    display  : inline-block;
    /* padding: 10px; */
    position : relative;
}
.sub-item-option {
    display       : inline-block;
    width         : 200px;
    height        : 200px;
    margin        : 5px;
    margin-top    : 40px;
    box-sizing    : border-box;
    border        : 1px solid #ccc;
    border-radius : 4px;
    text-align    : center;
    cursor        : pointer;
    /*transition    : background-color 0.3s ease, border-color 0.3s ease;*/
}
.sub-item-option-price,.sub-item-option-name  {
  font-size: 14px;
}

.sub-item-option input {
    display : none;
}
.sub-item-option label {
    display    : block;
    width      : 100%;
    height     : 100%;
    padding    : 10px;
    box-sizing : border-box;
}
.sub-item-option input:checked + label {
    border      : 2px solid #242525;
    font-weight : 700;
}
.sub-item-option img {
    max-width : 110px;
    height    : auto;
}
.sub-item-option div {
    margin-top : 15px;
}
.sub-item-option span {
    display : block;
}
.swiper, .swiper3 {
    margin-left  : auto;
    margin-right : auto;
    position     : relative;
    overflow     : hidden;
    list-style   : none;
    padding      : 0;
    z-index      : 1;
    display      : block;
    width        : 100%;
    height       : 100%;
}
.swiper-slide {
    text-align      : center;
    font-size       : 18px;
    background      : #fff;
    display         : flex;
    justify-content : center;
    align-items     : center;
}
.swiper-slide img {
    display    : block;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}
.h-space {
    height : 10px;
}
/* 로딩 스피너 스타일 */
.spinner-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }
  
  .spinner {
    border: 8px solid rgba(0, 0, 0, 0.1);
    border-top: 8px solid #000;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }