/* BASIC css start */
@font-face {
    font-family: 'Hamchorom';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.0/HCRDotum.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
/* 글로벌 Noto Sans 로딩 (KR + Latin) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Noto+Sans:wght@300;400;500;700&display=swap');
/* 전역 Noto 적용 – 텍스트 요소 위주 */
html, body,
body p, body span, body a, body li,
body h1, body h2, body h3, body h4, body h5, body h6,
body dt, body dd, body th, body td,
button, input, select, textarea {
    font-family: 'Noto Sans KR', 'Noto Sans', system-ui, sans-serif;
}
/* 메인 배너 */
#column_visual {position:relative;overflow:hidden;width:100%;}
#column_visual .visual { position:relative }
#column_visual .visual .main_banner li img { width:100%;}
#column_visual .visual .bx-controls-direction { position:absolute; top:255px; left:0; width:1200px; z-index:10 }
#column_visual .visual .bx-controls-direction a { display:inline-block; position:absolute; top:0; width:40px; height:40px; text-indent:-9999em; background:url(//skin.makeshop.co.kr/skin/tem95/sp_controls.png) 0 0 no-repeat }
#column_visual .visual .bx-controls-direction a.bx-prev { left:23px }
#column_visual .visual .bx-controls-direction a.bx-next { right:23px; background-position:0 -40px }
#column_visual .bx-controls{position:absolute;bottom:15px;left:50%;width:200px;text-align:center;margin-left:-100px;}
#column_visual .bx-pager-item{display:inline-block;vertical-align:top;font-size:0;padding:0 7px;}
#column_visual .bx-pager-link{display:inline-block;width:12px;height:12px;border:2px solid #f3f3f3;border-radius:50%;font-size:0;}
#column_visual .bx-pager-link.active{background-color:#383838;border-color:#383838;cursor:default;}

/* 상품 타이틀 */
.h_title { padding:60px 0 25px; text-align:center }
.h_title h3 { display:inline-block; font-size:25px;font-weight:500;color:#383838;}
.h_title h3 .prefix{color:#f00;margin-right:5px;}
/* main 정보 영역 */
.mainInfoArea {position:relative;padding-top:70px;width:1200px;margin:0 auto;}
.mainInfoArea:after { display:block; clear:both; content:'' }
.mainInfoArea .emphaLinks{float:left;width:780px;}
.mainInfoArea .emphaLinks a{display:inline-block;}
.mainInfoArea .emphaLinks .left{float:left;}
.mainInfoArea .emphaLinks .right{float:right;}
.mainInfoArea .infoArea{float:right;width:380px;}
.mainInfoArea .infoHead{height:17px;}
.mainInfoArea .infoHead .title{color:#383838;font-size:15px;font-weight:500;line-height:1;float:left;}
.mainInfoArea .infoHead .title .fa{margin-right:3px}
.mainInfoArea .infoHead .moreBtn{font-size:11px;font-weight:300;color:#777;float:right;}

.mainInfoArea .notice{height:143px}
.mainInfoArea .notice .infoHead{padding-bottom:15px;}
.mainInfoArea .notice ul {}
.mainInfoArea .notice ul li{padding:9px 0;border-bottom:1px solid #f3f3f3;height:18px;}
.mainInfoArea .notice ul li a{font-weight:300;float:left;max-width:88%;font-size:12px;color:#777;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.mainInfoArea .notice ul li .date{float:right; font-size:12px;color:#acacac;}
.mainInfoArea .insta {height:127px;position:relative }
.mainInfoArea .insta .infoHead{padding:35px 0 11px;}
.mainInfoArea .insta .instaCont {padding-top:12px}

/* best */
.bestPrdArea{background-color:#f8f8f8;margin-top:70px;}
.bestPrdArea .thumb{}
.bestPrdArea .h_title{padding-top:30px;}
.bestPrdArea .sliderViewport{max-width:1440px;margin:0 auto;max-height:500px;text-align:center;overflow:hidden;}
.bestPrdArea .item-wrap{}
.bestPrdArea .item-wrap .item-cont{width:auto;overflow:visible;font-size:0;}
.bestPrdArea .item-wrap .item-cont .item-list{width:200px;height:330px;float:none;display:inline-block;vertical-align:top;font-size:12px;padding:0 20px;}
.bestPrdArea .item-wrap .item-cont .item-list dl{}
.bestPrdArea .item-wrap .item-cont .item-list .thumb img{width:100%;height:200px;border-radius:50%;}
.bestPrdArea .item-wrap .item-cont .item-list .thumb .preview img{height:100px;}
.bestPrdArea .item-cont .item-list .prd-name, .bestPrdArea .item-cont .item-list .prd-subname{white-space:normal;}

.bestPrdArea .bx-controls{height:88px;position:relative;}
.bestPrdArea .bx-pager{position:absolute;top:30px;left:50%;width:200px;text-align:center;margin-left:-100px;}
.bestPrdArea .bx-pager-item{display:inline-block;vertical-align:top;font-size:0;padding:0 7px;}
.bestPrdArea .bx-pager-link{display:inline-block;width:12px;height:12px;border:2px solid #e1e0e0;border-radius:50%;font-size:0;}
.bestPrdArea .bx-pager-link.active{background-color:#383838;border-color:#383838;cursor:default;}

/* band slider */
.midBandBnnr{height:240px;margin-top:37px;}
.midBandBnnr ul{height:100%;}
.midBandBnnr a{display:block;}
.midBandBnnr .left{float:left}
.midBandBnnr .right{float:right}

@media screen and (max-width:1440px) {
.bestPrdArea .item-wrap .item-cont .item-list{width:160px;height:300px;padding-top:20px;}
.bestPrdArea .item-wrap .item-cont .item-list .thumb img{height:160px;}

}




/* 기존 메인 템플릿 영역 전체 숨김 */
#contentWrapper {
    display: none;
}



/* 1) 섹션 전체 컨테이너 */
.main-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0 90px;
    text-align: center;
    background-color: #efefef
}

.main-hero-inner {
    width: 100%;
    margin: 0 auto;
}

/* 타이틀 */
.main-hero-title {
    font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
    font-size: 24px;
    font-weight: 500;

    color: #363636;
    margin-bottom: 5px;
}
.title-orange {
    color: #EEAC60;
    margin-bottom: 32px;
}

/* 2) 미디어 래퍼 – 1280px 중앙정렬 */
.main-hero-media {
    display: flex;
    justify-content: center;
}

.main-hero-media-box {
    position: relative;
    width: 100%;
    max-width: 900px;

    /* 16:9 비율 고정 */
    aspect-ratio: 16 / 9;

    /* padding-bottom 방식은 제거 */
    height: auto;
    padding-bottom: 0;

    background-color: #000;
    overflow: hidden;
}

/* 3) 안쪽 iframe / video / img 공통 */
.main-hero-media-box iframe,
.main-hero-media-box video,
.main-hero-media-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

@media screen and (max-width: 1024px) {
    .main-hero {
        padding: 50px 0 60px;
    }
    .main-hero-title {
        font-size: 22px;
        letter-spacing: 0.26em;
        margin-bottom: 24px;
    }
}








/* ===========================
   FOR PUPPY 카테고리 큐레이션
   =========================== */

.main-curation-puppy {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-top: 200px;
    font-family: 'Noto Sans KR', 'Noto Sans', -apple-system, BlinkMacSystemFont,
        'Segoe UI', sans-serif;
}





/* FOR PUPPY 큐레이션 – 좌우 반전 버전 */
.main-curation-puppy--reverse .puppy-curation-left {
    order: 2;   /* 대표 이미지가 오른쪽으로 */
}
.main-curation-puppy--reverse .puppy-curation-right {
    order: 1;   /* 타이틀 + 캐로셀을 왼쪽으로 */
}






/* 내부 콘텐츠 폭 1200px + 중앙 정렬 */
.main-curation-puppy-inner {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    column-gap: 0px;
    align-items: stretch; /* 좌/우 컬럼 높이 동일 */
}

/* ETC FOR PUPPY 섹션(반전 섹션)만 간격 다르게 */
.main-curation-puppy--reverse .main-curation-puppy-inner {
    column-gap: 30px;   /* 원하는 값으로 조절 (예: 72 → 48) */
}



/* ------- 좌측 대표 이미지 ------- */
.puppy-curation-left {
    flex: 0 0 420px;
}

.puppy-left-link {
    display: block;
    text-decoration: none;
}

.puppy-left-img {
    width: 100%;
    padding-bottom: 120%;        /* 대략 5:6 비율 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 임시 회색 플레이스홀더 (추후 background-image로 교체) */
.puppy-left-img.is-placeholder {
    background-color: #efefef;
}
.puppy-left-img {
    width: 100%;
    padding-bottom: 120%;        /* 대략 5:6 비율 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 기존 플레이스홀더가 필요하면 그대로 두고, 이제는 새 클래스가 이미지를 덮어씀 */
.puppy-left-img.is-placeholder {
    background-color: #efefef;
}

/* FOR PUPPY 대표 이미지 */
.puppy-left-img--for-puppy {
    background-image: url('/design/keepaw/Main_img/photos/1-1674d39d.png');
}

/* ETC FOR PUPPY 대표 이미지 */
.puppy-left-img--etc {
    background-image: url('/design/keepaw/Main_img/photos/2-1674d39d.png');
}

/* ------- 우측 타이틀 + 슬라이더 ------- */
.puppy-curation-right {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* 타이틀/서브텍스트 (이미지 오른쪽) */
.puppy-right-header {
    margin: 40px 0 28px;
    padding-left: 50px;
}

.puppy-header-link {
    text-decoration: none;
    color: inherit;
}

.puppy-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #262626;
    margin-bottom: 8px;
}

.puppy-subtitle-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.puppy-subtitle {
    font-size: 15px;
    font-weight: 500;
    color: #6a7280;
    margin: 0;
}

.subtitle-kr {
    font-family: 'Hamchorom', sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.puppy-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid #c2c8d1;
    font-size: 12px;
    line-height: 1;
    color: #11315b;
}

/* ===== 상품 리스트 슬라이더 ===== */

/* show_goods 출력에서 타이틀/배너는 숨김 */
.main-curation-puppy .puppy-carousel-list .display-title,
.main-curation-puppy .puppy-carousel-list .display-sub,
.main-curation-puppy .puppy-carousel-list .display-link,
.main-curation-puppy .puppy-carousel-list .banner-area {
    display: none !important;
}

.main-curation-puppy .puppy-carousel-list .product-area {
    margin: 0;
    padding: 0;
    background: none;
}

/* 뷰포트: 넘치는 부분 가리기, 우측 컬럼 하단 정렬 */
.puppy-carousel-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: auto;
}

/* 실제 슬라이드 트랙: UL 리스트 */
.main-curation-puppy .puppy-carousel-list ul {
    display: flex;
    flex-wrap: nowrap;       /* 한 줄로만 */
    gap: 32px;
    padding: 0;
    margin: 0;
    list-style: none;
    transition: transform 0.4s ease;
    will-change: transform;
}

/* 기본 li = width는 JS가 px로 다시 잡을 예정 */
.main-curation-puppy .puppy-carousel-list li.prd-wrap {
    flex: 0 0 auto;
}

/* 썸네일 5:6 비율 */
.main-curation-puppy .prd-img {
    position: relative;
    width: 100%;
    padding-bottom: 120%;    /* 5:6 */
    overflow: hidden;
}

.main-curation-puppy .prd-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 상품명/가격 기본 여백 조금 */
.main-curation-puppy .prd-name,
.main-curation-puppy .prd-price {
    font-size: 13px;
}

/* ===== 커스텀 좌우 화살표 ===== */
.main-curation-puppy .puppy-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #c2c8d1;
    background: #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.08);
    cursor: pointer;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* 아이콘 화살표 */
.main-curation-puppy .puppy-arrow::before {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    border-top: 2px solid #7b8594;
    border-right: 2px solid #7b8594;
}

/* 위치 + 방향 */
.main-curation-puppy .puppy-arrow.prev {
    left: -20px;
}
.main-curation-puppy .puppy-arrow.prev::before {
    transform: rotate(225deg);   /* 왼쪽 */
}

.main-curation-puppy .puppy-arrow.next {
    right: -20px;
}
.main-curation-puppy .puppy-arrow.next::before {
    transform: rotate(45deg);    /* 오른쪽 */
}

/* PC / 모바일 링크 분기 */
.only-pc { display: block; }
.only-mo { display: none; }

/* ===== 반응형 ===== */
@media screen and (max-width: 1024px) {
    .main-curation-puppy {
        padding: 60px 0;
    }

    .main-curation-puppy-inner {
        max-width: 100%;
        padding: 0 16px;
        flex-direction: column;
        row-gap: 32px;
    }

    .puppy-curation-left,
    .puppy-curation-right {
        flex: 1 1 auto;
    }

    .puppy-title {
        font-size: 22px;
        letter-spacing: 0.12em;
    }

    .main-curation-puppy .puppy-carousel-list ul {
        gap: 16px;
    }

    .main-curation-puppy .puppy-arrow.prev {
        left: 0;
    }
    .main-curation-puppy .puppy-arrow.next {
        right: 0;
    }

    .only-pc { display: none; }
    .only-mo { display: block; }
}




/* ===== 상품 리스트 슬라이더 ===== */
/* show_goods 출력에서 타이틀/배너는 숨김 */
.main-curation-puppy .puppy-carousel-list .display-title,
.main-curation-puppy .puppy-carousel-list .display-sub,
.main-curation-puppy .puppy-carousel-list .display-link,
.main-curation-puppy .puppy-carousel-list .banner-area {
    display: none !important;
}

/* 뷰포트: 넘치는 부분 가리기 + 좌우 버튼 들어갈 패딩 */
.main-curation-puppy .puppy-carousel-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: auto;
    padding: 0 48px;
}

/* 트랙: product-area 를 가로 플렉스 트랙으로 사용 */
.main-curation-puppy .puppy-carousel-list .product-area {
    display: flex !important;
    flex-wrap: nowrap;
    column-gap: 32px;
    row-gap: 0;
    margin: 0;
    padding: 0;
    background: none;
    grid-template-columns: none !important;
    transition: transform 0.4s ease;
    will-change: transform;
}

/* 카드: PC 기준 3장 고정 */
.main-curation-puppy .puppy-carousel-list .product-area .prd-wrap {
    flex: 0 0 calc((100% - 2 * 32px) / 3) !important;
}

/* 썸네일 5:6 비율 */
.main-curation-puppy .prd-img {
    position: relative;
    width: 100%;
    padding-bottom: 120%;
    overflow: hidden;
}
.main-curation-puppy .prd-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 텍스트 여백 */
.main-curation-puppy .prd-info {
    margin-top: 8px;
}
.main-curation-puppy .prd-name {
    font-size: 13px;
    margin-bottom: 4px;
}
.main-curation-puppy .prd-sprice strong {
    font-size: 13px;
}

/* 커스텀 화살표 버튼 – 화살표만 */
.main-curation-puppy .puppy-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-curation-puppy .puppy-arrow::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid #7b8594;
    border-right: 2px solid #7b8594;
}
.main-curation-puppy .puppy-arrow.prev { left: 12px; }
.main-curation-puppy .puppy-arrow.prev::before { transform: rotate(225deg); }
.main-curation-puppy .puppy-arrow.next { right: 12px; }
.main-curation-puppy .puppy-arrow.next::before { transform: rotate(45deg); }

/* 모바일에서는 2장씩 보이게 */
@media screen and (max-width: 1024px) {
    .main-curation-puppy .puppy-carousel-viewport {
        padding: 0 32px;
    }
    .main-curation-puppy .puppy-carousel-list .product-area {
        column-gap: 16px;
    }
    .main-curation-puppy .puppy-carousel-list .product-area .prd-wrap {
        flex: 0 0 calc((100% - 16px) / 2) !important;
    }
    .main-curation-puppy .puppy-arrow.prev { left: 8px; }
    .main-curation-puppy .puppy-arrow.next { right: 8px; }
}
/* FOR PUPPY 오른쪽 영역 안에서 캐로셀만 축소 */
.puppy-curation-right .puppy-carousel-viewport {
    transform: scale(0.91);          /* 90% 크기로 축소 */
    transform-origin: left bottom;     /* 왼쪽 위 기준으로 줄어들게 */
}



/* ===========================
   ETC FOR PUPPY 섹션 텍스트 우측 정렬
   =========================== */



/* 타이틀/서브텍스트 블록 자체도 오른쪽 기준 */
.main-curation-puppy--reverse .puppy-right-header {
    text-align: right;
    width: 90%; /* 필요하면 유지 */
}


.main-curation-puppy--reverse .puppy-subtitle-row {
    display: flex;
    justify-content: flex-end;
}












/* ===========================
   Brand Story 하단 배너
   =========================== */

/* 배경 컨테이너 */
/* 섹션은 전체 폭, 위아래 여백만 */
.main-brandstory-section {
    padding-top: 200px;
    margin-top: 0 !important
}

/* 앵커는 블록으로만 */
.main-brandstory-link {
    display: block;
    text-decoration: none;
}

/* 실제 회색 배너 박스 */
.main-brandstory {
    position: relative;
    width: 100%;             /* 부모(섹션) 기준 100% */
    max-width: 1200px; 
    margin: 0 auto;          /* 화면 중앙 정렬 */

    min-height:400px;
    overflow: hidden;
    background: #EEAC60;        /* 배경 이미지/색 */
    background-size: cover;
    background-position: center;
}

/* 가운데 정렬될 컨텐츠 래퍼 */
.main-brandstory-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    font-family: "Noto Sans KR", "Noto Sans", sans-serif;
}

/* 내부 여백/마진 정리 */
.main-brandstory-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0 0 16px;
}

.main-brandstory-summary {
    font-size: 16px;
    margin: 0 0 32px;
}

/* 버튼 */
.main-brandstory-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 44px;
    padding: 0 32px;
    border-radius: 999px;
    background-color: #ffffff;
    color: #262626;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 15px;
}
/* BASIC css end */