<link href="https://fonts.googleapis.com/css?family=DM+Serif+Text:400,400i&display=swap&subset=latin-ext" rel="stylesheet">

  /* 일반 태블릿 및 소형 데스크톱 */
@media (max-width: 1199px) {
  #s_blank {
    height: 100px;
  }
}

/* 모바일 기기 (스마트폰) */
@media (max-width: 767px) {
  #s_blank {
    height: 100px;
  }
}

/* 데스크톱 */
@media (min-width: 1200px) {
  #s_blank {
    height: 100px;
  }
}

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4); /* 어두운 반투명 오버레이 */
      z-index: 1;
    }

    .banner {
      position: relative;
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      z-index: 2;
    }

    .banner-text h1 {
      font-size: 35px;
      color: white;
      margin-bottom: 10px;	  
	  font-family:'Cal Sans', sans-serif;
	   letter-spacing: 0.1em;
    }

    .banner-text p {
      font-size: 18px;
      color: white;
	  font-family:'NanumSquareNeo', sans-serif;
    }

    @media (max-width: 1024px) {
      .banner {
        height: 120px;
        padding: 20px;
      }

      .banner-text h1 {
        font-size: 25px;
      }

      .banner-text p {
        font-size: 14px;
      }
    } 


        /* 1. Wrapper (가로 100%, 바탕색 #fff) */
        .wrapper4 {
            width: 100%;
            background-color: #ffffff;
            box-sizing: border-box;
            padding: 0px 0; /* 상하 여백 추가 */
        }

        /* 2. Container (PC: 1200px 중앙 정렬, 태블릿/모바일: 좌우 10px 여백) */
        .container4 {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 10px; /* 기본 좌우 여백 10px */
            box-sizing: border-box;
        }

        /* PC (1200px 이상) 스타일: 컨테이너 중앙 정렬 */
        @media (min-width: 1200px) {
            .container4 {
                padding: 0; /* PC에서는 좌우 여백 없음 (max-width가 적용되므로) */
            }
        }

/* 기본은 숨김 */
.mobile-text {
  display: none;
}

/* 모바일 전용 */
@media screen and (max-width: 768px) {
  .mobile-text {
    display: block;
    text-align: center;   /* 가운데 정렬 */
    margin-bottom: 10px;  /* 아래 여백 */
    font-size: 13px;      /* 필요시 글자 크기 조정 */
    color: #333;          /* 필요시 색상 조정 */
  }
}

        /* --- 공통 타이포그래피 스타일 --- */
        .section-title {
            font-size: 34px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 50px;
            padding-bottom: 10px;
            letter-spacing: -0.5px;
        }
        
        /* 새로 추가된 가운데 정렬 텍스트 스타일 1 (제목 아래) */
        .notice-text {
            text-align: center;
            font-size: 18px;
            color: #666;
            margin-top: -30px; /* 제목 아래쪽 마진 보정 */
            margin-bottom: 50px;
            line-height: 1.5;
            letter-spacing: -0.2px;
        }

        /* 새로 추가된 가운데 정렬 텍스트 스타일 2 (테이블 아래) */
        .table-footer-notice {
            text-align: center;
            font-size: 18px;
            color: #444;
            margin: 40px 0 80px 0; /* 표와 다음 섹션 사이 여백 */
            line-height: 1.8;
            padding: 0px 0;
            letter-spacing: -0.2px;
        }

        .item-title {
            font-size: 20px;
            font-weight: 600;
            color: #000;
            margin-bottom: 15px;
        }
        .item-content {
            font-size: 16px;
            color: #555;
        }
        
        /* 모바일 최적화 글자 크기 */
        @media (max-width: 768px) {
            .section-title { font-size: 24px; margin-bottom: 30px; }			
            .notice-text, .table-footer-notice p {
                font-size: 13px;
                padding: 0 10px;
            }
            .item-title { font-size: 18px; }
            .item-content { font-size: 14px; }
        }

        /* ========================================================= */
        /* --- Content 1: 표 (Table) 스타일 --- */
        /* ========================================================= */
        /* 3. 모바일에서 좌우 스크롤을 위한 래퍼 */
        .table-wrap {
            overflow-x: auto; /* 좌우 스크롤 가능 */
            -webkit-overflow-scrolling: touch; /* iOS 스크롤 성능 개선 */
            /* 맨 위 테두리를 2px #333으로 변경 */
            border-top: 2px solid #333; 
            /* 좌우 테두리는 요청대로 1px #e0e0e0 유지 */
            border-left: 1px solid #e0e0e0; 
            border-right: 1px solid #e0e0e0; 
        }

        /* 4. 표 기본 스타일 */
        .product-table {
            width: 100%;
            min-width: 700px; /* 모바일에서 좌우 스크롤을 위한 최소 너비 설정 */
            border-collapse: collapse;
            font-size: 14px; /* 기본 글자 크기 (예: 리스트 항목) */
            color: #333;
        }

        /* 5. 셀 스타일 */
        .product-table th, 
        .product-table td {
            padding: 15px 20px;
            border-bottom: 1px solid #e0e0e0; /* 연한 하단 선 */
            border-right: none;
            vertical-align: middle; 
            text-align: left;
        }

        /* 5. th (왼쪽 제목 열) 스타일 - 모바일 18px */
        .product-table th {
            font-weight: 600;
            background-color: #f8f8f8; /* TH 배경색 통일 */
            width: 150px; 
            text-align: center; 
            font-size: 17px; /* 요청된 글자 크기 (촬영순서, 상품구성, 금액, 종류) */
        }

        /* 6. 섹션 헤더 스타일 - 본식상품, 옵션 (모바일 18px, 배경색 #f8f8f8) */
        .section-header th {
            background-color: #f8f8f8; /* 배경색 #f8f8f8로 변경 */
            color: #1a1a1a;
            font-size: 17px; /* 요청된 글자 크기 */
            font-weight: 800; /* 강조 */
            text-align: center;
            padding: 20px 0;
            border-bottom: 1px solid #e0e0e0; /* 기본 라인은 1px 유지 */
            border-right: none;
        }

        /* 7. 상품 구성 상세 스타일 */
        .detail-list {
            list-style: none;
            margin-top: 10px;
            padding-left: 0;
        }
        .detail-list li {
            margin-bottom: 5px;
            padding-left: 10px;
            text-indent: -10px; 
        }
        
        .sub-text {
            font-size: 12px; /* 18px보다 작게 유지하여 가독성 확보 */
            margin-top: 5px;
        }

        /* 8. 금액 스타일 - 1,200,000원 (모바일 18px) */
        .price-row th {
             border-bottom: 1px solid #e0e0e0;
        }
        .price-row td {
            text-align: center;
            font-size: 18px; /* 요청된 글자 크기 */
            font-weight: 800;
            color: #333;
            padding: 20px 20px;
            border-left: none;
            border-bottom: 1px solid #e0e0e0;
            vertical-align: middle;
        }
        
        /* 9. 옵션 리스트 내부 스타일링 - 모바일 14px 유지 */
        .option-item-list {
            width: 100%;
        }

        .option-item {
            display: flex; 
            padding: 15px 0;
            border-bottom: 1px solid #e0e0e0; 
            align-items: center;
        }

        .option-item:last-child {
            border-bottom: none; 
        }

        .option-item .option-type {
            font-weight: 600;
            width: 150px; 
            flex-shrink: 0; 
            text-align: center; 
            padding-right: 20px;
            border-right: 1px solid #e0e0e0; 
        }

        .option-item .option-description {
            flex-grow: 1;
            color: #555;
            font-size: 14px; /* 옵션 설명은 14px 유지 */
            padding: 0 20px;
            border-right: 1px solid #e0e0e0; 
            min-width: 310px; 
        }

        .option-item .option-price-item {
            font-weight: 700;
            width: 100px; 
            flex-shrink: 0; 
            text-align: right;
            color: #333;
            padding-left: 20px;
            font-size: 14px; /* 옵션 금액은 14px 유지 */
        }
        
        /* 테이블 맨 아래 (옵션 섹션 하단) 테두리 2px #333으로 변경 */
        .last-section-row th,
        .last-section-row td {
            border-bottom: 2px solid #333 !important; 
        }

.product-table td strong {
    font-size: 17px; /* 모바일 기본 크기 18px */
}

        /* ================================================= */
        /* PC (Desktop) 반응형 설정: 가로 1200px 이상 - 24px 고정 */
        /* ================================================= */
        @media (min-width: 1200px) {
            
            .container3 {
                width: 1200px; /* PC 가로 1200px */
                padding: 0;
            }

            /* 기본 텍스트 20px 유지 */
            .product-table {
                font-size: 18px;
            }
            
            /* TH labels (촬영순서, 상품구성, 금액, 종류) - PC 24px */
            .product-table th {
                width: 220px; 
                padding: 25px 30px;
                font-size: 22px; 
            }

            .product-table td {
                padding: 25px 30px;
            }

            /* Section Headers (본식상품, 옵션) - PC 24px */
            .section-header th {
                font-size: 22px; 
                padding: 20px 0;
            }

            /* Price TD (1,200,000원) - PC 24px */
            .price-row td {
                font-size: 24px; 
                font-weight: 800;
                padding: 20px 30px;
            }
            
            /* Sub text - PC 18px로 조정 */
            .sub-text {
                font-size: 18px; 
            }

            /* 옵션 항목 (description/price) - PC 20px 유지 */
            .option-item .option-type {
                font-size: 18px; 
                width: 200px; 
            }
            .option-item .option-description {
                font-size: 18px; 
                min-width: 300px;
            }
            .option-item .option-price-item {
                 font-size: 18px; 
                 width: 150px;
            }

    .product-table td strong {
        font-size: 20px; /* PC 크기 24px */
    }
        }


        /* ========================================================= */
        /* --- Content 2: 단계별 안내 (Numbered Steps) 스타일 --- */
        /* ========================================================= */
        .step-section {
            margin-top: 80px;
        }

        .step-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .step-item {
            flex-basis: calc(50% - 10px); /* PC: 2열 */
            box-sizing: border-box;
            border: 2px solid #f8f8f8;
            border-radius: 12px;
            padding: 30px;
            transition: all 0.3s ease-in-out;
            background-color: #fff;
            display: flex;
            flex-direction: column;
        }

        /* 마우스 오버 효과 (고급스러운 그림자 및 테두리 강조) */
        .step-item:hover {
            border-color: #eee;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            transform: translateY(-5px);
        }

        .step-number-box {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .step-number-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: 700;
            color: #333; /* 숫자 색깔 */
            margin-right: 15px;
            background-color: #f8f8f8;
        }

        .step-title {
            font-size: 22px;
            font-weight: 700;
            color: #000;
            letter-spacing: -0.5px;
        }

        .step-content {
            font-size: 16px;
            color: #555;
            line-height: 1.7;
        }

        /* 모바일 (1줄씩) 레이아웃 조정 */
        @media (max-width: 768px) {
            .step-item {
                flex-basis: 100%; /* 모바일: 1열 */
            }
            .step-item:last-child {
                margin-bottom: 0;
            }
            .step-title {
                font-size: 18px;
            }
            .step-content {
                font-size: 14px;
            }
			
            .product-table .category { font-size: 16px; }			
            .product-table .main-header th { font-size: 16px; }			
            .option-header th { font-size: 16px; }		
            .price-row td { font-size: 18px; }
        }

/* ========================================================= */
/* --- NEW IMAGE GALLERY SECTION STYLES --- */
/* ========================================================= */
.image-gallery-section {
    margin: 10px 0px 30px 0px;
    padding: 0 10px;
}

.image-grid {
    display: grid;
    /* PC: 2x2 Grid */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.image-item {
    overflow: hidden;
    border-radius: 12px; /* 둥근 테두리 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}

.image-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 마우스 오버 효과 */
    transform: scale(1.02);
}

.image-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* 모바일 (1x4 Stack) */
@media (max-width: 768px) {
    .image-gallery-section {
        margin: 30px 0;
    }
    .image-grid {
        /* Mobile: 1x4 Stack (1 column) */
        grid-template-columns: 1fr;
        gap: 15px;
    }
}