/* ===========================================
   포스터 상품 페이지 - 책자 스타일 완전 적용
   - 책자 페이지와 동일한 스타일 사용
   =========================================== */

/* 기본 레이아웃 - 책자와 완전 동일한 폰트 */
.item-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    background: #f8f9fa !important;
    padding: 0 !important;
}

/* 옵션 테이블 내 모든 요소 폰트 통일 (FontAwesome 제외) */
.option-tbl:not(.fa):not([class*="fa-"]),
.option-tbl th:not(.fa):not([class*="fa-"]),
.option-tbl td:not(.fa):not([class*="fa-"]),
.option-tbl select,
.option-tbl input,
.option-tbl textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* 레이아웃 행 설정 */
.item-head .row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    margin: 0 !important;
}

/* 상품 이미지 영역 - 책자와 동일한 크기로 조정 */
.item-head .col.img-container {
    padding: 5px !important; /* 20px → 5px로 대폭 줄임 */
    background: transparent !important;
    max-width: 35% !important; /* 이미지 영역을 35%로 줄임 */
    flex: 0 0 35% !important;
}

.item-head .imgframe {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e1e5e9 !important;
    margin: 0 !important; /* 마진 제거 */
}

.item-head .img-wrap {
    background: #f8f9fa !important;
    padding-bottom: 100% !important; /* 정사각형 비율 유지 */
    position: relative !important;
}

/* 이미지 컨테이너 내부 요소들 여백 제거 */
.item-head #sit_pvi {
    margin: 0 !important;
    padding: 0 !important;
}

.item-head #sit_pvi_big {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.item-head #sit_pvi_big a {
    width: 100% !important;
    height: 100% !important;
    display: none !important; /* 기본적으로 숨김 */
    align-items: center !important;
    justify-content: center !important;
}

.item-head #sit_pvi_big a.visible {
    display: flex !important; /* visible 클래스가 있을 때만 표시 */
}

.item-head #sit_pvi_big img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 4px !important;
}

/* 썸네일 영역 최적화 */
.item-head #sit_pvi_thumb {
    display: flex !important;
    gap: 4px !important;
    margin-top: 8px !important;
    padding: 4px !important;
    background: #f8f9fa !important;
    border-radius: 6px !important;
    justify-content: center !important;
}

.item-head .img_thumb {
    width: 50px !important;
    height: 50px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    border: 1px solid #e1e5e9 !important;
    transition: border-color 0.2s ease !important;
    flex-shrink: 0 !important;
}

.item-head .img_thumb:hover {
    border-color: #007bff !important;
}

.item-head .img_thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 이미지 전환 JavaScript 지원 */
.item-head .img_thumb {
    cursor: pointer !important;
}

.item-head .img_thumb.active {
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
}

/* 상품 정보 영역 - 책자와 동일하게 넓게 */
.item-head .form-container {
    padding: 20px !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e9ecef !important;
    max-width: 65% !important; /* 폼 영역을 65%로 늘림 */
    flex: 0 0 65% !important;
}

/* 상품명 스타일링 */
.item-head h1 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin: 0 0 8px 0 !important;
    padding-bottom: 6px !important;
    border-bottom: 3px solid #3498db !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
}

/* 옵션 테이블 스타일링 - 책자와 동일 */
.option-tbl {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 3px !important;
    background: white !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #dee2e6 !important;
}

.option-tbl th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    color: #495057 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 4px 12px !important;
    text-align: left !important;
    border-bottom: 1px solid #dee2e6 !important;
    white-space: nowrap !important;
    min-width: 120px !important;
    letter-spacing: -0.3px !important;
    line-height: 1.2 !important;
    height: auto !important;
}

.option-tbl td {
    padding: 4px 12px !important;
    background: white !important;
    border-bottom: 1px solid #f1f3f4 !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
    height: auto !important;
}

.option-tbl tr:last-child th,
.option-tbl tr:last-child td {
    border-bottom: none !important;
}

/* 셀렉트박스 스타일링 - 책자와 동일 */
.option-tbl select {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 0 22px 0 8px !important;
    font-size: 13px !important;
    color: #333 !important;
    background-color: #fff !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 6px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    font-family: inherit !important;
    outline: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    height: 30px !important;
    line-height: normal !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 100% !important;
}

.option-tbl select:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
}

.option-tbl select:hover {
    border-color: #aaa !important;
}

/* 📝 주문 요청사항 스타일링 - 책자와 완전 동일 */
.option-tbl textarea {
    width: 98% !important;
    height: 60px !important;
    padding: 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    resize: vertical !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #333 !important;
    background-color: #fff !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.option-tbl textarea:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
    outline: none !important;
}

/* 📎 파일첨부 헤더 - 책자와 동일한 보라색 그라데이션 */
.option-tbl th:has(.fa-file-image-o),
.option-tbl th[data-file-header="true"] {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border: none !important;
}

/* 파일첨부 아이콘도 흰색으로 */
.option-tbl th .fa-file-image-o {
    color: white !important;
}

/* 파일 선택 버튼 스타일링 - 책자와 동일 */
.fibtn {
    display: inline-block !important;
    padding: 6px 12px !important;
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    color: #333 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.fibtn:hover {
    background: #e9ecef !important;
    border-color: #bbb !important;
    color: #333 !important;
    text-decoration: none !important;
}

/* 대용량업로드 버튼 - 책자와 동일한 검은색 */
.large-file-upload-btn {
    display: inline-block !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    margin-left: 10px !important;
    transition: background-color 0.3s ease !important;
}

.large-file-upload-btn:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.large-file-upload-btn:visited {
    color: #ffffff !important;
}

/* 파일 선택 상태 표시 */
#selected_filename {
    color: #666 !important;
    font-size: 12px !important;
}

/* 총 금액 표시 스타일링 - 우측 밀착 */
.price-sum {
    background: #f8f9fa !important;
    border: 2px solid #3498db !important; /* 녹색 → 파란색으로 변경 */
    border-radius: 8px !important;
    padding: 12px 15px !important;
    text-align: right !important; /* 우측 정렬 */
    margin: 20px 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
}

.price-sum b {
    color: #3498db !important; /* 텍스트 색상도 파란색으로 변경 */
    font-size: 20px !important;
    font-weight: 600 !important;
}

/* VAT 포함 텍스트를 한 줄로 */
.price-sum .text-muted {
    margin: 0 !important;
    display: inline !important;
    font-size: 12px !important;
    color: #6c757d !important;
}

/* 구매 버튼 영역 스타일링 - 우측 밀착 */
.btn_buy_wrap {
    margin-top: 30px !important;
    display: flex !important;
    justify-content: flex-end !important; /* 우측 정렬 */
    width: 100% !important;
    
    /* 컨테이너 완전 정리 */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    
    /* 플렉스 박스 완전 제어 */
    align-items: stretch !important;
    flex-wrap: nowrap !important;
}

.btn_buy_wrap ul {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important; /* 불필요한 테두리 제거 */
    background: transparent !important; /* 완전 투명 배경 */
    width: auto !important; /* 전체 width 대신 내용에 맞춤 */
    
    /* ul 요소 완전 리셋 */
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
    float: none !important;
    clear: none !important;
    position: static !important;
    overflow: visible !important;
    
    /* 브라우저 기본 ul 스타일 완전 제거 */
    -webkit-margin-before: 0 !important;
    -webkit-margin-after: 0 !important;
    -webkit-margin-start: 0 !important;
    -webkit-margin-end: 0 !important;
    -webkit-padding-start: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    padding-inline-start: 0 !important;
}

.btn_buy_wrap ul li {
    flex: 0 0 auto !important; /* flex: 1 대신 고정 크기 */
    margin: 0 !important;
    margin-right: 0 !important; /* 우측 마진 완전 제거 */
    padding: 0 !important; /* 패딩 완전 제거 */
    width: 120px !important; /* 고정 폭 설정 */
    background: transparent !important; /* 배경 투명 */
    border: none !important; /* 테두리 제거 */
    box-shadow: none !important; /* 그림자 제거 */
}

/* 마지막 li 요소 특별 처리 */
.btn_buy_wrap ul li:last-child {
    margin-right: 0 !important;
    padding-right: 0 !important;
    width: 120px !important;
}

.btn_buy_wrap input[type="submit"] {
    width: 100% !important;
    padding: 12px 15px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important; /* 불필요한 그림자 제거 */
    outline: none !important; /* 불필요한 아웃라인 제거 */
}

/* 장바구니 버튼 */
.btn_buy_wrap input[value="장바구니"] {
    background: #6c757d !important;
    color: #fff !important;
}

.btn_buy_wrap input[value="장바구니"]:hover {
    background: #545b62 !important;
    transform: translateY(-1px) !important;
}

/* 바로구매 버튼 */
.btn_buy_wrap input[value="바로구매"],
.btn_buy_wrap .on_blue {
    background: #007bff !important;
    color: #fff !important;
}

.btn_buy_wrap input[value="바로구매"]:hover,
.btn_buy_wrap .on_blue:hover {
    background: #0056b3 !important;
    transform: translateY(-1px) !important;
}

/* 반응형 처리 */
@media (max-width: 768px) {
    .item-head .row {
        margin: 0 !important;
        flex-direction: column !important;
    }
    
    .item-head .col {
        padding: 5px !important;
    }
    
    .item-head .col.img-container {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 5px !important; /* 모바일에서도 최소 패딩 */
    }
    
    .item-head .form-container {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 15px !important; /* 모바일에서 폼 영역은 약간 더 */
    }
    
    .item-head h1 {
        font-size: 18px !important;
    }
    
    .option-tbl th,
    .option-tbl td {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
    
    .btn_buy_wrap ul {
        flex-direction: column !important;
    }
}

/* 기존 스타일 덮어쓰기 */
.item-wrap * {
    box-sizing: border-box !important;
}

/* 구매 버튼 컨테이너 불필요한 스타일 완전 제거 */
.btn_buy_wrap,
.btn_buy_wrap ul,
.btn_buy_wrap ul li {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
}

/* 총 금액 영역 추가 정리 */
#it_sel_option {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* 불필요한 마진/패딩 제거 */
.option-line {
    display: none !important;
}

/* 아이콘 스타일링 */
.option-tbl .fa {
    margin-right: 5px !important;
}

/* 도움말 텍스트 스타일링 */
.option-tbl .text-muted {
    color: #6c757d !important;
    font-size: 11px !important;
    margin-top: 5px !important;
    line-height: 1.3 !important;
}

/* 호버 효과 - 파일첨부 영역 제외 */
.option-tbl tr:hover {
    background: #f8f9fa !important;
}

.option-tbl tr:hover th {
    background: #e9ecef !important;
}

/* 파일첨부 헤더는 호버 효과 제거 - 항상 보라색 유지 */
.option-tbl tr:hover th[data-file-header="true"] {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    color: white !important;
}

/* 파일첨부 행의 td도 호버시 색상 변경 없음 */
.option-tbl tr:hover th[data-file-header="true"] + td {
    background: white !important;
}

/* 주문 요청사항 아이콘 색상 */
.option-tbl th .fa-comment-o {
    color: #495057 !important;
}

/* ===============================================
   📎 파일첨부 영역 - 책자와 완전 동일한 스타일 
   =============================================== */

/* 커스텀 파일 업로드 스타일 */
.custom-file-upload {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.file-input-wrapper {
    position: relative !important;
}

.file-input-wrapper input[type="file"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0.1px !important;
    height: 0.1px !important;
    overflow: hidden !important;
}

.file-upload-btn {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 2px 8px rgba(66, 153, 225, 0.3) !important;
}

.file-upload-btn:hover {
    background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%) !important;
    transform: translateY(-1px) !important;
}

.file-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #6c757d !important;
    font-size: 14px !important;
}

.file-delete-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: #dc3545 !important;
    color: white !important;
    border: none !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.file-delete-btn:hover {
    background-color: #c82333 !important;
}

/* 업로드 진행률 바 */
.upload-progress {
    width: 100% !important;
    height: 4px !important;
    background-color: #e9ecef !important;
    border-radius: 2px !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
    display: none !important;
}

.upload-progress-bar {
    height: 100% !important;
    background-color: #007bff !important;
    width: 0% !important;
    transition: width 0.3s ease !important;
}

/* 파일 안내 텍스트 */
.file-note {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #6c757d !important;
    margin-top: 8px !important;
}

.file-note i {
    color: #17a2b8 !important;
}

/* 대용량업로드 버튼 수정 - 책자와 완전 동일 */
.large-file-upload-btn {
    display: inline-block !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    margin-left: 10px !important;
    transition: background-color 0.3s ease !important;
}

.large-file-upload-btn:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.large-file-upload-btn:visited {
    color: #ffffff !important;
}

/* 파일첨부 헤더 아이콘 업데이트 */
.option-tbl th .fa-cloud-upload {
    color: white !important;
}

/* ===============================================
   🎯 전체 폰트 및 스타일 강제 통일 (책자와 완전 동일)
   =============================================== */

/* 모든 폼 요소 폰트 강제 통일 (FontAwesome 아이콘 제외) */
.item-wrap *:not(.fa):not([class*="fa-"]),
.option-tbl *:not(.fa):not([class*="fa-"]),
select,
input,
textarea,
button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* FontAwesome 아이콘 폰트 복원 */
.fa,
[class*="fa-"] {
    font-family: FontAwesome !important;
}

/* 셀렉트박스 옵션 스타일링 */
.option-tbl select option {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13px !important;
    color: #333 !important;
    background: #fff !important;
    padding: 2px 4px !important;
}

/* 테이블 간격 완전 통일 */
.option-tbl + .option-tbl {
    margin-top: 3px !important;
}

/* 폼 컨테이너 전체 정리 */
.item-head .form-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* 별점 영역 숨기기 (HTML 구조는 유지하되 화면에서만 숨김) */
.price .pull-right {
    display: none !important;
}