/*
 * product.css
 * 최종 통합 버전: PC 2단 레이아웃 + 모바일 1단 레이아웃 + 모달 FIX
 */

/* ---------------------------------------------------------------------- */
/* 1. Hero Section 및 기본 레이아웃 */
/* ---------------------------------------------------------------------- */

.product-hero {
    padding: 70px 0;
}

.product-hero .hero-content h1 {
    font-size: 38px;
}

.product-selection-section {
    padding: 80px 0;
    text-align: center; 
}

.product-selection-section .sub-text {
    font-size: 18px;
    color: #666;
    margin-bottom: 50px;
}

/* ---------------------------------------------------------------------- */
/* 2. PC 2단 레이아웃 (769px 이상) - Flexbox 적용 */
/* ---------------------------------------------------------------------- */

/* 2단 레이아웃의 부모 컨테이너 (PC View) */
.product-detail-area {
    display: flex;
    justify-content: center; /* 중앙에 배치 */
    align-items: flex-start; /* 상단 정렬 */
    gap: 40px; 
    max-width: 1100px; 
    margin: 0 auto;
    padding: 40px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* 2-1. 왼쪽: 이미지 컨테이너 */
.product-image-container-single {
    flex: 0 0 400px; /* 이미지 영역 너비 고정 */
    max-width: 40%;
    text-align: center;
    margin: 0; 
    padding-top: 10px;
}

.product-image-container-single img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* 2-2. 오른쪽: 옵션 및 장바구니 영역 */
.product-options-area {
    flex-grow: 1; 
    width: auto;
    padding-top: 0;
    text-align: left; 
}

.product-options-area .product-item-title {
    margin: 0 0 25px 0; 
    text-align: left; 
    font-size: 28px;
    font-weight: 700;
    color: #0056b3;
}

/* ---------------------------------------------------------------------- */
/* 3. 옵션/장바구니 요소 (PC에서 폭 확장) */
/* ---------------------------------------------------------------------- */

/* 모든 옵션/카트 요소의 너비를 부모 영역(product-options-area)에 맞춤 */
.option-select-box,
.cart-item-list,
.cart-summary {
    max-width: 100% !important; 
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left;
}

/* 주문하기 버튼만 적절한 너비로 조정하고 중앙 정렬 */
.cta-button.purchase-btn {
    max-width: 400px !important; 
    margin-top: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important; /* 버튼만 중앙 정렬 */
    display: block; 
    width: 100%;
    text-align: center;
    padding: 15px 0;
    font-size: 20px;
}

.option-select-box select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    margin-bottom: 20px;
    
    /* 1. 기본 화살표를 숨깁니다. */
    appearance: none; 
    
    /* 2. 간소화된 유니코드 아이콘을 사용합니다. */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23007bff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

/* 장바구니 항목 라인 */
.selected-item-line {
    background-color: #f7f7f7;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    position: relative;
}

/* 장바구니 요약 줄 정렬 */
.cart-summary {
    border-top: 1px dashed #ddd;
    padding-top: 15px;
    margin-top: 15px;
}

.cart-summary p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
    color: #555;
}


/* ---------------------------------------------------------------------- */
/* 4. 모바일 1단 레이아웃 (768px 이하) */
/* ---------------------------------------------------------------------- */

@media (max-width: 768px) {
    .product-detail-area {
        flex-direction: column !important; /* 1단으로 변경 강제 */
        align-items: center; 
        padding: 20px;
        box-shadow: none;
        background-color: transparent;
    }

    .product-image-container-single {
        flex: none;
        max-width: 300px; /* 모바일 이미지 최대 크기 */
        width: 100%;
        margin: 0 auto 30px auto;
        padding-top: 0;
    }
    
    .product-options-area {
        width: 100%;
        max-width: none;
        text-align: left;
    }
    
    /* 모든 내부 요소 (옵션, 카트, 버튼) 100% 너비로 사용 */
    .option-select-box,
    .cart-item-list,
    .cart-summary {
        max-width: none !important; 
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .cta-button.purchase-btn {
        max-width: none !important; /* 버튼도 100% 너비로 확장 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .product-options-area .product-item-title {
        text-align: center; /* 모바일에서 제목 중앙 정렬 */
    }
}


/* ---------------------------------------------------------------------- */
/* 5. 모달 오버레이 스타일 (Fixed 중앙 고정) */
/* ---------------------------------------------------------------------- */

/* 1. 모달 오버레이 (배경과 겹치는 문제 해결) */
.modal-overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 🚨 핵심 수정 1: 배경색 투명 문제 해결 (색상과 투명도) 🚨 */
    background-color: rgba(0, 0, 0, 0.6); 
    
    /* 🚨 핵심 수정 2: z-index를 높여 모든 페이지 요소 위에 오도록 보장 🚨 */
    z-index: 9999; 
    
    display: none; 
    justify-content: center;
    align-items: center; 
    overflow: auto;
}
/* 2. 모달 내용 박스 (모달 자체의 투명 문제 해결) */
.modal-content {
    
    /* 🚨 핵심 수정 3: 모달 박스 자체에 흰색 배경색 강제 지정 🚨 */
    background-color: #fff !important; 
    
    padding: 30px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    margin: 50px auto; 
    text-align: center;
}
/* 2. 주문 완료 모달 내용 컨테이너 */
.completion-modal-content {
    background-color: #fff; 
    padding: 30px;
    border-radius: 8px;
    max-width: 400px; 
    width: 90%;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    margin: 50px auto; 
    
    /* 🚨 추가/수정: 모든 내부 텍스트 및 인라인 요소 중앙 정렬 🚨 */
    text-align: center; 
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

/* 모달 버튼 스타일 */
.confirm-btn {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
}

.modal-content .modal-footer {
    padding-top: 15px;
    border-top: 1px solid #eee;
    margin-top: 10px;
    
    /* 🚨 추가: 버튼을 오른쪽으로 이동 🚨 */
    text-align: right; 
}

/* -----------------/* 3. 모달 제목/메시지 스타일 */
/* '주문이 완료되었습니다.' 텍스트와 체크 아이콘을 감싸는 div (HTML 확인 필요) */
/* 만약 이 부분이 <p> 또는 <h3> 태그라면 해당 태그에 text-align: center가 자동으로 적용됩니다. */
.completion-modal-content .status-message { /* 만약 이런 클래스가 있다면 */
    font-size: 18px;
    font-weight: 700;
    color: #28a745; /* 초록색 (주문 완료) */
    margin-bottom: 15px;
    display: flex; /* 아이콘과 텍스트를 한 줄에 정렬 */
    align-items: center;
    justify-content: center; /* 🚨 핵심: 아이콘+텍스트를 중앙 정렬 🚨 */
}

.completion-modal-content .status-message .icon { /* 아이콘이 있다면 */
    margin-right: 8px;
    font-size: 20px;
}

.completion-modal-content p {
    font-size: 16px;
    margin: 10px 0;
    line-height: 1.5;
    color: #333;
}

.completion-modal-content strong {
    font-weight: 700;
    color: #333;
}


/* 4. 주문 조회하기 버튼 스타일 */
.completion-modal-content .order-lookup-btn {
    display: inline-block; /* 너비 조정을 위해 */
    background-color: #007bff; /* 로얄 블루 */
    color: #fff;
    font-size: 18px;
    padding: 12px 25px;
    border: none; /* 🚨 핵심: 검은색 테두리 제거 🚨 */
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none; /* 링크인 경우 밑줄 제거 */
    margin-top: 25px;
    transition: background-color 0.2s;
    width: auto; /* 내용에 맞춰 너비 자동 조정 */
    max-width: 250px; /* 너무 커지지 않도록 최대 너비 제한 */
}

.completion-modal-content .order-lookup-btn:hover {
    background-color: #0056b3;
}

/* 모달 닫기 버튼 (X 아이콘) */
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.modal-close-btn:hover {
    color: #333;
}-------------------------- */
/* 장바구니 항목 라인 스타일 (로얄 블루 적용) */
/* ------------------------------------------- */

/* selected-item-line 배경색은 유지 (f7f7f7) */

.selected-item-line .name {
    /* 상품명 스타일 유지 */
    font-weight: 700;
    display: block;
    margin-bottom: 5px; 
    padding-right: 50px; 
}

.item-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px; 
}

/* 수량 조절 컨트롤 박스 */
.quantity-control {
    display: flex;
    align-items: center;
    border: 1px solid #0056b3; /* 로얄 블루 테두리 */
    border-radius: 4px;
    overflow: hidden; 
}

/* 수량 버튼 (+/-) 스타일 */
.qty-btn {
    width: 35px; 
    height: 35px; 
    border: none; 
    background-color: #007bff; /* 쨍한 로얄 블루 (버튼 기본 색상) */
    color: #fff; /* 버튼 텍스트 흰색 */
    cursor: pointer;
    font-size: 20px; 
    line-height: 1;
    transition: background-color 0.2s;
    font-weight: 700;
}

.qty-btn:hover {
    background-color: #0056b3; /* 호버 시 진한 블루 */
}

/* 수량 입력 필드 스타일 */
.qty-input {
    width: 45px; 
    height: 35px; 
    text-align: center;
    border: none; 
    margin: 0;
    background-color: #fff;
    font-weight: bold;
    color: #333;
    font-size: 16px;
    padding: 0;
}

/* 개별 상품 가격 강조 */
.selected-item-line .price {
    font-size: 20px;
    font-weight: 700;
    color: #0056b3; /* 로얄 블루 계열로 강조 */
}

/* 총 결제 금액만 파란색/빨간색 강조 (기존 .final-price 유지) */
.cart-summary .final-price {
    color: #e74c3c; /* 빨간색 유지 */
	font-size: 20px;
    font-weight: 700;
}
/* product.css 파일 내, 기존 .remove-item-top-btn 스타일을 아래와 같이 덮어씁니다. */

.remove-item-top-btn {
    position: absolute;
    top: 10px; /* 상단에서 띄우기 */
    right: 15px; /* 오른쪽에서 띄우기 (padding 고려) */
    
    background: none;
    border: none;
    
    color: #999; /* 색상 연하게 */
    font-size: 24px; /* X 아이콘 크기 키우기 */
    font-weight: 300; /* X를 얇게 처리하여 깔끔하게 */
    cursor: pointer;
    line-height: 1;
    
    padding: 0; /* 불필요한 패딩 제거 */
    text-decoration: none; /* 밑줄 제거 */
    transition: color 0.2s;
}

.remove-item-top-btn:hover {
    color: #e74c3c; /* 호버 시 빨간색 */
}

/* 상품 이름이 X 버튼과 겹치지 않도록 오른쪽 패딩 조정 (선택 사항) */
.selected-item-line .name {
    padding-right: 35px; /* X 버튼 공간 확보 */
}
/* product.css 파일 내, 주문서 폼 및 버튼 관련 스타일 최종 버전 */

/* --- 주문서 작성 섹션 (.order) - PC 레이아웃 안정화 --- */

.order-form-section {
    padding: 80px 0;
    max-width: 900px; /* 주문서 전체 컨테이너 최대 너비 제한 및 중앙 정렬 */
    margin: 0 auto;
}

.order-summary-table {
    margin-bottom: 40px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.order-summary-table .section-title {
    text-align: left;
    font-size: 22px;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    color: #0056b3;
}

.order-summary-table table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.order-summary-table th, .order-summary-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
}

.order-summary-table thead th {
    background-color: #f8f8f8;
    font-weight: 700;
    color: #333;
}

.order-summary-table .shipping-row td {
    background-color: #fefefe;
    text-align: right;
    font-weight: 700;
}

.order-summary-table .shipping-row td:first-child {
    text-align: left;
    font-weight: 400;
}

.order-summary-table .total-row td {
    background-color: #0056b3;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: right;
}

.order-summary-table .total-row td:first-child {
    text-align: left;
}

.final-price {
    font-size: 20px;
}

.delete-btn {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background-color 0.2s;
}

.delete-btn:hover {
    background-color: #c0392b;
}

/* --- 받는 사람/배송지 폼 (.recipient-form) --- */

.recipient-form {
    max-width: 800px;
    margin: 40px auto;
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.recipient-form .section-title {
    text-align: left;
    font-size: 22px;
    margin-top: 30px;
    margin-bottom: 25px; /* 제목 아래 여백 조정 */
    border-bottom: none; /* 밑줄 제거 */
    padding-bottom: 0;
    color: #333; 
}

.recipient-form .form-group {
    margin-bottom: 20px;
}

.recipient-form label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: #555;
}

.recipient-form input[type="text"],
.recipient-form input[type="tel"],
.recipient-form input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    height: 44px; /* 입력 필드 높이 통일 */
}

/* --- 버튼 스타일 통일 (로얄 블루) 및 정렬 --- */

/* --- 주소 그룹 스타일 (.address-group-modified) --- */
.address-group-modified {
    display: flex;
    gap: 10px;
    align-items: stretch; 
}
/* 우편번호 입력 필드 (.short-input) */
.address-group-modified .short-input {
    flex-grow: 1;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    height: 44px; 
}
/* 주소 검색 버튼 (.btn-address-search-modified) */
.btn-address-search-modified {
    padding: 0 15px; 
    background-color: #007bff; /* 로얄 블루 */
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    height: 44px; /* 버튼 높이 통일 */
    line-height: 1; 
    display: flex; 
    align-items: center;
    justify-content: center;
    white-space: nowrap; 
    transition: background-color 0.2s;
}

.btn-address-search-modified:hover {
    background-color: #0056b3;
}

.full-width-input {
    width: 100%;
    height: 44px; 
}

/* 통관고유부호 그룹 스타일 */
.customs-group-modified {
    display: flex;
    gap: 10px;
    align-items: stretch; 
}

.customs-group-modified .customs-input-modified {
    flex-grow: 1;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    height: 44px; 
}

.customs-btn-modified {
    padding: 0 15px; 
    background-color: #007bff; /* 로얄 블루 */
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    height: 44px; /* 버튼 높이 통일 */
    line-height: 1; 
    display: flex; 
    align-items: center;
    justify-content: center;
    white-space: nowrap; 
    transition: background-color 0.2s;
}

.customs-btn-modified:hover {
    background-color: #0056b3;
}

/* 약관 동의 영역 */
.terms-area {
    margin-top: 30px;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
    background-color: #fcfcfc;
}

.terms-area textarea {
    width: 100%;
    height: 80px;
    resize: none;
    border: 1px solid #ddd;
    padding: 10px;
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.terms-checkbox {
    display: block;
    font-weight: 400;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}

/* 결제 버튼 영역 (CTA 버튼 - 시그니처 붉은색 유지) */
.payment-area {
    margin-top: 30px;
    text-align: center;
}

.payment-btn {
    background-color: #e74c3c; /* 최종 결제 버튼은 붉은색으로 강조 */
    color: #fff; 
    font-size: 22px; 
    font-weight: 700;
    padding: 18px 30px; 
    display: inline-block;
    width: 100%;
    max-width: 400px;
    border: none;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.payment-btn:hover {
    background-color: #c0392b;
}

/* 안내 사항 */
.guidance-notes {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* --- 모바일 반응형 조정 (768px 이하) --- */

@media (max-width: 768px) {
    .order-form-section {
        padding: 40px 0;
    }
    
    .order-summary-table {
        padding: 15px;
    }

    .order-summary-table th, .order-summary-table td {
        padding: 8px 10px;
        font-size: 13px;
    }

    .recipient-form {
        padding: 20px;
        margin: 20px auto;
    }
    
    .address-group-modified {
    display: flex;
    gap: 10px;
    align-items: stretch; 
    /* 🚨 추가: 컨테이너의 너비를 벗어나면 요소들이 축소되도록 허용 */
    flex-wrap: wrap; /* 너비가 좁아지면 다음 줄로 넘어갈 수 있도록 허용 (모바일 대응) */
    width: 100%; /* 부모 요소의 전체 너비를 차지하도록 명시 */
    max-width: none; /* 너비 제한이 걸려있다면 해제 (옵션 1) */
}
    
    .address-group-modified .short-input,
    .btn-address-search-modified,
    .customs-group-modified .customs-input-modified,
    .customs-btn-modified {
        width: 100%;
        max-width: none;
    }
    
    .customs-group-modified {
        flex-direction: column;
        gap: 10px;
    }
}