@charset "utf-8";

@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* ================================================= */
/* [공통] 폰트 및 기본 설정 */
/* ================================================= */

/* [공통] 레이아웃 (기존 유지) */
.j_list { max-width: 1600px; margin: 0 auto; }
#j_header .hdInner > .j_gnb > li > a { color: rgba(0,0,0, 0.35); }
#j_header .hdInner > .j_gnb > li.on > a { color: rgba(0,0,0,1); }
#j_header .hdInner > .j_gnb > li > a i:after { content: ""; position: absolute; bottom: -3px; left: auto; right: 0; width: 0; height: 2px; background: #000; z-index: 1; transition: width .45s ease; }
#j_header .hdInner > .j_gnb > li > a:hover i:after { left: 0; right: auto; width: 100%; }
#j_header .nav_btn>span { background: #000; }
#j_header { position: fixed; background: #fff; }
#j_header .hdLogo_w { filter: grayscale(100%) invert(100%); }
#j_header .btn_box.on .nav_btn>span { background: #fff; }
footer { background: #fff; }
.ft_w { display: none; }
.ft_b { display: block; }
.ftL p { color: rgba(0, 0, 0, 0.20); }

.subWrap { padding: 180px 0; }
.j_list_wrap { max-width: 1600px; width: 92%; margin: 0 auto; }
.j_btn_box {display: flex;align-items: center;justify-content: space-between;max-width: 1280px;margin: 100px auto 0 auto;}
.j_left_btn { display: flex; gap: 5px; }
.j_btn_wrap .j_btn { display: flex; padding: 5px; height: 40px; text-align: center; font-size: 0.875rem; font-weight: 500; color: #222; border: 1px solid #222; align-items: center; gap: 5px; justify-content: center; background: #f9f9f9; width: 80px; }

@media screen and (max-width: 1080px) {
    .subWrap { padding: 120px 0; }+
	.................................................................
}
@media screen and (max-width: 767px) {
    .subWrap { padding: 120px 0; }
    .j_left_btn { flex-wrap: wrap; }
    .j_btn_box { align-items: unset; }
    .boWrap { padding-bottom: 20px; }
    .j_btn_wrap .j_btn { width: 65px; }
}
@media screen and (max-width: 360px) {
    .subWrap { padding: 40px 0; }
}
.swiper-button-next, .swiper-button-prev { color: #ffffff75 !important;  }
/* 화살표 크기와 두께 조절 */
.swiper-button-next:after, 
.swiper-button-prev:after {
    font-size: 32px !important; /* 화살표 크기 (기본값은 보통 44px) */
    font-weight: 500 !important; /* 화살표 두께 */
}

/* cateOpt */
#j_cate { display: flex; justify-content: space-between; margin-bottom: 15px; }
.j_cate_list { display: flex; align-items: center; gap: 15px; }
.j_cate_list > li { position: relative; }
.j_cate_list > li:last-child:after { display: none; }
.j_cate_list > li:after { content: ''; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); background: #b7b7b7; width: 1px; height: 14px; }
.j_cate_list > li > a { display: block; color: #666; font-size: 1rem; font-weight: 400; }
.j_cate_list > li > a#bo_cate_on { color: #111; font-weight: 500; }

/* list (NEWS용 기본) */
.j_list { display: flex; flex-wrap: wrap; }
.j_list > li { position: relative; width: calc((100% - 25px*4)/5); margin-right: 25px; }
.j_list > li:nth-of-type(5n) { margin-right: 0; }
.j_list > li:nth-of-type(n + 6) { margin-top: 75px; }

@media screen and (max-width: 1720px) {
    .j_list > li figure img { width: 100%; }
    .j_list > li { width: calc((100% - 25px*3)/4); margin-right: 25px; }
    .j_list > li:nth-of-type(4n) { margin-right: 0; }
    .j_list > li:nth-of-type(5n) { margin-right: 25px; }
    .j_list > li:nth-of-type(n + 5) { margin-top: 75px; }
}
@media screen and (max-width: 1020px) {
    .j_list > li { width: calc((100% - 10px)/2); margin-right: 10px; }
    .j_list > li:nth-of-type(2n) { margin-right: 0; }
    .j_list > li:nth-of-type(4n) { margin-right: 0; }
    .j_list > li:nth-of-type(5) { margin-right: 10px; }
    .j_list > li:nth-of-type(n + 3) { margin-top: 30px; }
}
@media screen and (max-width: 767px) {
    #j_cate { flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
    .cateTit { width: 100%; }
    .j_cate_list { width: 100%; gap: 30px; flex-wrap: wrap; }
    .j_cate_list > li:after { right: -5px; }
}

/* ================================================= */
/* [WRITE] 글쓰기 페이지 (라이트 스킨 디자인 보강) ✏️ */
/* ================================================= */
.j_write_page { padding: 160px 0; max-width: 1280px; margin: 0 auto; width: 100%;}
#j_w_bo { position: relative; width: 94%; margin: 0 auto 40px; }

.j_w_table {
    width: 100%; border-top: 2px solid #222; border-collapse: collapse;
    font-family: 'Noto Sans KR', sans-serif;
}
.j_w_table th, .j_w_table td {
    padding: 20px 15px; border-bottom: 1px solid #eee; font-size: 14px;
}
/* 제목 라벨(th) 스타일 */
.j_w_table th.b_td_tit {
    background: #f9f9f9; width: 160px; text-align: center;
    font-weight: 700; color: #333; border-right: 1px solid #f1f1f1;
}
/* 입력 필드 스타일 */
.frm_input {
    height: 48px; border: 1px solid #ddd; padding: 0 15px;
    width: 100%; box-sizing: border-box; outline: none; transition: all 0.3s;
}
.frm_input:focus { border-color: #222; background: #fcfcfc; }
textarea.frm_input { height: 400px; padding: 15px; line-height: 1.6; resize: vertical; }

/* 글쓰기 페이지 전용 하단 버튼 */
.j_btn_box.j_write_box { justify-content: center; gap: 15px; margin-top: 50px; }
.j_btn_box.j_write_box .j_btn {
    width: 150px; height: 55px; font-size: 15px; font-weight: 600;
    line-height: 55px; justify-content: center;
}
.j_btn_box.j_write_box .j_btn_submit { background: #222; color: #fff; border-color: #222; }
.j_btn_box.j_write_box .j_btn_submit:hover { background: #444; border-color: #444; }

/* ================================================= */
/* [VIEW] 상세 페이지 (기존 레이아웃 유지) */
/* ================================================= */
.j_view_wrap { margin: 0 auto; max-width: 1600px; width: 92%; }
.j-ViewList { display: flex; }
.viewLt { width: 292px; }
.viewLt figure img { max-width: 100%; }
.viewRt { width: calc(100% - 292px); padding: 13px 0 0 66px; }
.viewRt dl { display: flex; }
.viewRt dl dt { width: 120px; }
.viewRt dl dd { width: calc(100% - 120px); }
.j_btn_box.j_view_btn { justify-content: space-between; gap: 20px; }
.j_btn_box.j_view_btn .j_right_btn { display: flex; gap: 5px; }
.j_right_btn { display: flex; gap: 5px; }
.view-slide img { max-width: 100%; }

@media screen and (max-width: 1020px) {
    .viewRt { padding: 13px 0 0 36px; }
}
@media screen and (max-width: 767px) {
    .viewLt figure img { max-height: 560px; max-width: unset; width: 100%; }
    .j-ViewList { flex-wrap: wrap; }
    .viewLt { width: 100%; }
    .viewRt { width: 100%; padding: 20px 0 0 0px; }
    #bo_v_con { margin: 14px 0 20px; }
    .j_btn_box { margin-top: 20px; }
    .view-slide img { max-width: unset; width: 100%; }
    .j_notice_list02 .j_tit { margin-bottom: 16px; }
}

.subInner { max-width: 1362px; width: 92%; margin: 0 auto; position: relative; height: 100%; }
.subInner02 { max-width: 1520px; width: 92%; margin: 0 auto; position: relative; height: 100%; }
.subPd {padding: 180px 0 100px 0;display: flex;flex-direction: column;}
.subDesc { position: absolute; bottom: 64px; left: 0; }
.subDesc h2 { color: #fff; }

/* [수정] NEWS 게시판 최대 너비 1280px로 조정 */
.j_notice_list02 {max-width: 1280px;width: 95%;margin: 0 auto;}   /* 거대마루 원본과 동일 */
.j_notice_list02 .j_top_wrap { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 20px; }
.j_notice_list02 #j_cate { justify-content: flex-end; }
.j_notice_list02 .j_tit {font-size: 22px;font-weight: 400;color: #111;letter-spacing: -1.2px;margin-left: 15px;}

.j_footer { position: relative; }
.j_tit { font-size: 18px; }


/* ================================================= */
/* [PRODUCT 전용 스타일] (.product-skin 클래스로 격리) */
/* ================================================= */
.product-skin { font-family: 'pretendard', 'Noto Sans KR', sans-serif !important; max-width: 1440px; width: 95%; margin: 0 auto; }
/* 타이틀은 거대마루 원본과 동일하게 .product-skin 폭을 그대로 사용 (중첩 축소 해제) */
.product-skin .page_header_title { max-width: 100%; width: 100%; }

/* 타이틀/카테고리 — 어바웃(.page_header_title)/브랜드 타이틀 스타일과 완전 통일
   about 구조: h2(margin-bottom:20px) + .title_line(높이 1.5px, #9D9D9D) 이 wrap 안에 있고
   wrap 자체가 margin-bottom:65px. product는 h3 없이 wrap에 border-bottom을 직접 얹는
   구조라 border-bottom(=title_line 역할) + padding-bottom(=h2 margin-bottom 역할) +
   margin-bottom(=wrap margin-bottom 역할) 값을 동일하게 맞춘다. */
.product-skin .j_top_wrap {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 2px solid #a7a7a770; padding-bottom: 15px; margin-bottom: 60px;
}
.product-skin .j_tit {
    font-size: 22px; font-weight: 400; color: #111; margin: 0;
    letter-spacing: -1.2px; margin-left: 15px;
	 font-family: 'pretendard';
}

.product-skin #j_cate { margin: 0 !important; padding: 0; display: block; }
.product-skin .j_cate_list { display: flex; gap: 0; align-items: center; }
.product-skin .j_cate_list li { position: relative; padding: 0 12px; }
.product-skin .j_cate_list li a {
    display: block; color: #444; font-size: 14px; font-weight: 500; text-decoration: none; text-transform: uppercase;
}
.product-skin .j_cate_list li.on a,
.product-skin .j_cate_list li a:hover { color: #000; font-weight: 700; }
.product-skin .j_cate_list li::after {
    content: "|"; position: absolute; right: 0; top: 48%; transform: translateY(-50%); color: #ccc; font-size: 11px;
}
.product-skin .j_cate_list li:last-child { padding-right: 0; }
.product-skin .j_cate_list li:last-child::after { display: none; }

/* ======================================================== */
/* 분류 2단 분할 (너비 동일하게 맞추는 부분) */
/* ======================================================== */
#prod_cate_split .cate_group h3 {font-size: 16px;font-weight: 700;color: #222;margin-bottom: 16px;}
#prod_cate_split .cate_group h3 .cate_kr { font-weight: 400; color: #666; }

/* 기존 display: flex를 display: grid로 변경하여 동일 너비 적용 */
#prod_cate_split .cate_group ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    width: 100%;
}

#prod_cate_split .cate_group li a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding: 8px 16px;
    border: 1px solid #ddd;
    font-size: 14px;
    color: #666;
    font-weight: 400;
    text-align: left;
    box-sizing: border-box;
}

#prod_cate_split .cate_group li.on a,
#prod_cate_split .cate_group li a:hover {
    background-color: #eeedec; color: #111; font-weight: 400; border: 1px solid #bbb5ae;
}
.mt40 { margin-top: 40px; }
/* 2차 분류(소분류) 영역은 대분류와 확실히 떨어뜨림 */
#prod_cate_split + .portfolio_2nd_area { margin-top: 80px; }

/* PRODUCT 리스트 ([수정] 폭 1440px로 설정) */
.product-skin .product_list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 26.5px;
    padding: 0;
    margin: 80px auto 100px;      /* 카테고리 영역과 동일 간격(80px) */
    list-style: none;
    max-width: 1280px;
    width: 95%;
}
#sortable_post_list {
    display: flex;
    flex-wrap: wrap;
    gap: 60px 26.5px;
    padding: 0;
    margin: 100px auto;
    list-style: none;
    max-width: 1280px;
    width: 95%;
}
.product-skin .product_list li {
    width: calc((100% - 80px) / 4);
    position: relative;
    margin: 0 !important;
    height: auto;
}
/* 높이를 자동으로 두고 aspect-ratio 적용 */
.product-skin .product_list li figure {
    width: 100%;
    overflow: hidden;
    margin: 0 0 15px 0;
    background: #f5f5f5;
    position: relative;
    height: auto;
    aspect-ratio:  / 0.9;
}
.product-skin .product_list li figure img {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    object-fit: cover;
}

/* NEW ARRIVAL 텍스트 스타일 */
.product-skin .new_badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    z-index: 1;
    padding: 0;
    text-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.product-skin .product_list .txt_box { text-align: left; }
.product-skin .product_list .pj_tit {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    margin-bottom: 3px;
    line-height: 1;
    text-align: center;
}

/* 폰트 적용 */
.product-skin .product_list .pj_size {
    font-size: 13px; 
    color: #888; 
    font-weight: 400; 
    margin: 0; 
    text-align: center;
    font-family: 'Noto Sans KR', sans-serif !important;
}

/* 제품 상세 뷰 페이지 */
.product-skin .j-ViewList { display: flex; justify-content: space-between; margin-bottom: 60px; border-bottom: 1px solid #ddd; padding-bottom: 60px; }
.product-skin .viewLt { width: 48%; }
.product-skin .viewRt { width: 48%; padding-top: 10px; }
.myProdSwiper { width: 100%; overflow: hidden; }
.myProdSwiper .swiper-slide img { display: block; width: 100%; height: auto; }
.product-skin .prod_info_head { padding-bottom: 20px; border-bottom: 2px solid #000; margin-bottom: 25px; }
.product-skin .prod_info_head h2 { font-size: 32px; font-weight: 700; margin: 0; }

/* ======================================================== */
/* [수정] 프로덕트 & 포트폴리오 뷰페이지 상세 스펙 테이블 통합 */
/* ======================================================== */
.product-skin .prod_spec_table dl,
.product-skin .spec_item {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    border-bottom: 1.5px solid #a7a7a766;   /* 40% */
    padding: 20px 0;
    margin: 0;
    max-width: 540px;
}
.product-skin .prod_spec_table dt,
.product-skin .spec_item dt {
    width: 120px;
    font-weight: 500; /* 포트폴리오 스타일에 맞춤 */
    font-size: 15px;
    color: #222;
    /* margin-left: 10px; */
    flex-shrink: 0;
    padding: 0 16px;
}
.product-skin .prod_spec_table dd,
.product-skin .spec_item dd {
    font-size: 15px;
    color: #666;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.2px;
    line-height: 1.4; 
    word-break: keep-all; 
}

.product-skin .prod_right_bottom { margin-top: 40px; text-align: right; }
.product-skin .pattern_img { display: inline-block; width: 100%; max-width: 300px; margin-bottom: 15px; }
.product-skin .pattern_img img { width: 100%; height: auto; display: block; }
.product-skin .btn_portfolio { display: inline-block; padding: 14px 35px; background: #000; color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.product-skin .btn_portfolio:hover { background: #333; }
.product-skin .j_content_wrap { text-align: center; }
.product-skin .detail_imgs .view_img_box { margin-bottom: 20px; }
.product-skin .detail_imgs img { max-width: 100%; height: auto; }

/* ================================================= */
/* [PRODUCT 전용 스타일] (이미지 11번 기준 레이아웃 수정) */
/* ================================================= */
.product-skin { font-family:  'Noto Sans KR', sans-serif !important; max-width: 1400px; width: 95%; margin: 0 auto; }

/* 1. 타이틀 왼쪽 위 배치, 밑줄 — 거대마루 원본과 동일화 */
.product-skin .prod_view_header {
    border-bottom: 1.5px solid #a7a7a7;
    padding-bottom: 15px; margin-bottom: 40px;
}
.product-skin .prod_view_header h2 {    font-size: 22px;
    font-weight: 400;
    color: #111;
    margin: 0;
    letter-spacing: -1.2px;
    margin-left: 15px; }

/* 2. 상품명(제목) 슬라이드 위쪽 왼쪽 정렬 */
.product-skin .prod_view_title {
    width: 100%; padding-bottom: 25px; margin-bottom: 10px;
}
.product-skin .prod_view_title h3 { font-size: 20px; font-weight: 400; color: #333; margin: 0; text-align: center; }
.product-skin .prod_view_title h3 .cate_child { color: #888; font-size: 16px; }

/* 3. 슬라이드 이미지 가로 100% 확장 (2:1 비율 강제 적용) */
.product-skin .prod_view_slider {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 40px auto;
    aspect-ratio: 2 / 1.2;
    overflow: hidden;
}

/* Swiper 컨테이너가 slider 영역에 꽉 차도록 설정 */
.product-skin .prod_view_slider .myProdSwiper {
    width: 100%;
    height: 100%;
}

.product-skin .prod_view_slider .swiper-slide img { 
    width: 100%; 
    height: 100%; 
    display: block; 
    object-fit: cover; 
}

/* 4. 하단 상세 정보 영역 (좌/우 분할) */
.product-skin .prod_info_container {
    margin: 0 auto;
    width: 85%;
    display: flex;
    justify-content: space-between;
    align-items: center;              /* 좌측 패턴&사이즈 영역 세로 가운데 정렬 */
    padding: 0;
    margin-bottom: 60px;
}

/* 하단 왼쪽: 스펙 테이블 */
.product-skin .info_left { width: 50%; }

/* 하단 오른쪽: 패턴 이미지 + 포트폴리오 링크 */
.product-skin .info_right { width: 45%; text-align: right;padding-top: 30px; }
.product-skin .pattern_img_box { display: inline-block; width: 100%;  }

/* [핵심 수정] 3:1 비율 강제 적용 & 화질 최적화 */
.product-skin .pattern_img_box img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 1; /* 기존의 max-height: 150px 제거 후 3:1 비율 강제 지정 */
    object-fit: cover;
    background-position: center;
    margin: 0 0 0 auto;
    image-rendering: -webkit-optimize-contrast; /* 축소 시 화질 깨짐 완화 */
}

/* 포트폴리오 텍스트 링크 스타일 */
.product-skin .btn_portfolio_text {
    display: inline-block; color: #333; font-size: 16px; text-decoration: none;
}
.product-skin .btn_portfolio_text:hover { text-decoration: underline; color: #000; }

/* 반응형 유지 */
@media screen and (max-width: 1024px) {
    .product-skin .prod_info_container { flex-direction: column; }
    .product-skin .info_left, .product-skin .info_right { width: 100%; }
    .product-skin .info_right { text-align: left; margin-top: 40px; }
}

#prod_cate_split {max-width: 1280px;margin:0 auto;width: 95%;}   /* 거대마루 원본과 동일 */
.care_info_content {max-width: 1280px; margin: 0 auto;}

/* 2026-02-27 */
.brandSwiper .swiper-slide a {
    pointer-events: none; /* 클릭 이벤트 자체를 무효화 */
    cursor: default;      /* 마우스 올렸을 때 손가락 모양으로 변하는 것 방지 */
}


/* 검색창 커스텀 스타일 */
.j_sch_wrapper {margin: 20px 0;text-align: center;}
.j_sch_form { display: inline-block; background: #fff; }
.j_sch_inner { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 30px; padding: 2px 5px 2px 15px; overflow: hidden; }

/* 셀렉트 박스 */
.j_sch_select { border: none; background: none; outline: none; font-size: 14px; color: #666; padding-right: 10px; border-right: 1px solid #eee; cursor: pointer; height: 36px; }

/* 입력창 */
.j_sch_input_wrap { display: flex; align-items: center; padding-left: 10px; }
.j_sch_input { border: none; background: none; outline: none; padding: 5px; width: 200px; font-size: 14px; height: 36px; }

/* 검색 버튼 */
.j_sch_submit { border: none; background: #333; color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.3s; cursor: pointer; margin-left: 5px; }
.j_sch_submit:hover { background: #000; }
.j_sch_submit svg { fill: #fff; }

/* ============================================================ */
/* [모바일 사이즈 통합 반응형 설정 (768px 이하) - 썸네일 가로 100%] */
/* ============================================================ */
@media screen and (max-width: 768px) {
    
    .subWrap, .subPd { padding: 160px 0 120px 0; }
    .j_left_btn { flex-wrap: wrap; }
    .j_btn_box { align-items: unset; }
    .boWrap { padding-bottom: 20px; }
    .j_btn_wrap .j_btn { width: 65px; }
    #j_cate { flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
    .cateTit { width: 100%; }
    
    .viewLt figure img { max-height: 560px; max-width: unset; width: 100%; }
    .j-ViewList { flex-wrap: wrap; }
    .viewLt { width: 100%; }
    .viewRt { width: 100%; padding: 20px 0 0 0px; }
    #bo_v_con { margin: 14px 0 20px; }
    .j_btn_box {margin-top: 40px;}
    .j_notice_list02 .j_tit { margin-bottom: 16px; }

    /* 1. 탭 메뉴(카테고리) - 글자 크기로 띄엄띄엄 배치 */
    .j_cate_list,
    #prod_cate_split .cate_group ul,
    .pf_2nd_btn_grid {
        display: flex;
        flex-wrap: wrap !important; 
        overflow-x: visible !important; 
        width: 100% !important;
        gap: 8px !important;
        padding-bottom: 0 !important;
    }
    .j_cate_list {        justify-content: flex-end;}
.product-skin .prod_info_container {width: 100%;}
    .j_cate_list > li,
    #prod_cate_split .cate_group li,
    .pf_2nd_btn_grid > *,
    .pf_2nd_btn_grid li {
        flex: 0 0 auto !important; 
        width: auto !important;
        white-space: nowrap !important;
        margin: 0 !important;
        display: block !important;
    }

    #prod_cate_split .cate_group li a .pf_2nd_btn_grid a {
        justify-content: center !important;
        text-align: center !important;
        padding: 8px 15px !important; 
    }

    /* 🔥 2. 상품 리스트(ul li) - 모바일에서 무조건 1줄에 1개씩(가로 100%) 길게 나열 🔥 */
    .product-skin .product_list,
    #fboardlist .product_list {
        display: flex !important;
        flex-direction: column !important; /* 위에서 아래로 차곡차곡 쌓임 */
        overflow-x: visible !important; 
        padding-bottom: 0 !important;
        gap: 0 !important; 
    }
    
    #fboardlist .product_list li,
    .product-skin .product_list li {
        flex: 0 0 100% !important; 
        width: 100% !important; 
        margin-bottom: 40px !important; /* 상품 간격 여유있게 확보 */
        margin-right: 0 !important;
    }

    /* 🔥 3. 썸네일: 비율 찌그러짐 방지 및 가로 100% 꽉 차게 유지 🔥 */
    .product-skin .product_list li figure {
        width: 100% !important; 
        height: auto !important; 
        aspect-ratio: 3 / 1 !important; /* PC와 동일한 원본 가로:세로 3:1 유지 */
        max-width: none !important;
        margin-bottom: 15px !important;
    }

    .product-skin .product_list li figure img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* [수정] 모바일 환경 스펙 테이블 통합 설정 */
    .product-skin .prod_spec_table dl,
    .product-skin .spec_item {
        margin: 0 auto;
        width: 80% !important;
        max-width: 100% !important;
        padding: 15px 0 !important;
    }
    .product-skin .prod_spec_table dd,
    .product-skin .spec_item dd {
        font-size: 13px !important;
    }
    
    /* 검색창 모바일 대응 */
    .j_sch_input { width: 140px; }
    .j_sch_select { font-size: 13px; }
    
    /* [핵심 수정] 모바일 패턴 썸네일도 3:1 비율 유지 */
    .product-skin .pattern_img_box img {
        height: auto; 
        aspect-ratio: 3 / 1;
    }
    
    #prod_cate_split .cate_group ul, .pf_2nd_btn_grid a{display:grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))}
    #prod_cate_split .cate_group li a , .pf_2nd_btn_grid a{font-size: 12px;text-align: center;justify-content: center;}
}

@media screen and (max-width: 480px) {
    .subWrap {padding: 160px 0 120px;}
    
    /* 초소형 화면에서도 무조건 가로 100% (비율 유지) */
    .product-skin .product_list li figure {
        width: 100% !important; 
        height: auto !important; 
        aspect-ratio: 3 / 1 !important; 
        margin: 0 auto 15px auto !important;
    }
    #prod_cate_split .pf_2nd_btn_grid {grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))}
}